diff --git a/lib/preview-view.coffee b/lib/preview-view.coffee
index eab4f2d..90a9d75 100644
--- a/lib/preview-view.coffee
+++ b/lib/preview-view.coffee
@@ -1,4 +1,6 @@
-{$, $$, $$$} = require 'atom'
+{Emitter, Disposable, CompositeDisposable} = require 'atom'
+{$, $$, $$$, ScrollView, TextEditorView} = require 'atom-space-pen-views'
+
 util = require 'util'
 path = require 'path'
 _ = require 'underscore-plus'
@@ -10,6 +12,7 @@ SelectRendererView = require './select-renderer-view.coffee'
 analyticsWriteKey = "bp0dj6lufc"
 pkg = require "../package"
 version  = pkg.version
+
 # Get Atom internal modules
 resourcePath = atom.config.resourcePath
 try
@@ -31,54 +34,63 @@ catch e
   # Catch error
 Editor = Editor ? require path.resolve resourcePath, 'src', 'text-editor'
 
-module.exports =
-class PreviewView extends TextEditorView
-  @content: (params) ->
-    params = params ? params || {}
-    super(params)
+class PreviewView extends HTMLElement
+
+  textEditor: document.createElement('atom-text-editor')
+  messageView = null
+  optionsView = null
+  selectRendererView = null
+  htmlPreviewContainer = null
 
   lastEditor: null
   lastRendererName: null # TODO: implement the tracking of this
   matchedRenderersCache: {}
 
-  constructor: () ->
-    # Initialize the EditorView
-    @self = super(mini:false, placeholderText:"Please type in a Text Editor to render preview")
-    @self.getTitle = @getTitle
-    @self.getUri = @getUri
-    # console.log('constructor editor', @self, @, @self.getModel(), @getModel())
-    # Add classes
-    @addClass('preview-container')
-    # Empty to start
-    editor = @self.getModel()
-    editor.setText ''
-
-    # Get EditorContents element
-    @editorContents = $('.editor-contents', @self)
-    # Attach the MessageView
-    @messageView = new PreviewMessageView()
-    @showLoading()
-    # Attach the OptionsView
-    @optionsView = new OptionsView(@)
-    # Create SelectRendererView
-    @selectRendererView = new SelectRendererView(@)
-    # Create container for Previewing Rendered HTML
-    @htmlPreviewContainer = $$ ->
-      @div =>
-        @div "THIS IS A TEST"
-    @self.append @htmlPreviewContainer
-    @htmlPreviewContainer.hide() # hide by default
+  # Public: Initializes the indicator.
+  initialize: ->
+    @classList.add('atom-preview-container')
 
     # Setup Observers
     # Update on Tab Change
-    atom.workspaceView.on \
-    'pane-container:active-pane-item-changed', @handleTabChanges
+    # atom.workspaceView.on \
+    # 'pane-container:active-pane-item-changed', @handleTabChanges
+    @activeItemSubscription = atom.workspace.onDidChangeActivePaneItem =>
+      @handleTabChanges()
     # Setup debounced renderer
     atom.config.observe 'preview.refreshDebouncePeriod', \
     (wait) =>
       # console.log "update debounce to #{wait} ms"
       @debouncedRenderPreview = _.debounce @renderPreview.bind(@), wait
 
+    @self = $(@)
+
+    @editorContents = $(@textEditor)
+
+    # Add Text Editor
+    # Placeholder = Please type in a Text Editor to render preview
+    @appendChild(@textEditor)
+
+    # Create container for Previewing Rendered HTML
+    @htmlPreviewContainer = $$ ->
+        @div =>
+          @div "Empty HTML Preview..."
+    # Add HTML Previewer
+    @self.append @htmlPreviewContainer
+    @htmlPreviewContainer.hide() # hide by default
+
+    # Attach the MessageView
+    @messageView = new PreviewMessageView()
+    @self.append(@messageView)
+
+    # Attach the OptionsView
+    @optionsView = new OptionsView(@)
+
+    # Create SelectRendererView
+    @selectRendererView = new SelectRendererView(@)
+
+    @showLoading()
+
+
     # Setup Analytics
     Analytics = null
     allowUnsafeEval ->
@@ -99,37 +111,17 @@ class PreviewView extends TextEditorView
     @renderPreview()
     return @
 
-  destroy: ->
-    @messageView.detach()
-    @unsubscribe()
-    atom.workspaceView.off \
-    'pane-container:active-pane-item-changed', @handleTabChanges
-
-  getTitle: ->
-    # if @lastRendererName?
-    #   "#{@lastRendererName} Preview"
-    # else
-    #   "Preview"
-    if @getEditor()?
-      "#{@getEditor().getTitle()} preview"
-    else
-      "Preview"
-
-  getEditor: ->
-    @self.getEditor()
-
-  getPath: ->
-    if @getEditor()?
-      @getEditor().getPath()
+  changeHandler: () =>
+    @debouncedRenderPreview()
 
-  getUri: ->
-    "preview://editor"
+  subscribe: () =>
+      # TODO
 
-  focus: ->
-    false
+  unsubscribe: () =>
+      # TODO
 
-  changeHandler: () =>
-    @debouncedRenderPreview()
+  trigger: () =>
+      # TODO
 
   handleEvents: () ->
     currEditor = atom.workspace.getActiveEditor()
@@ -151,6 +143,88 @@ class PreviewView extends TextEditorView
         # Trigger update
         @changeHandler()
 
+  toggleOptions: ->
+    @optionsView.toggle()
+
+  selectRenderer: ->
+    @selectRendererView.attach()
+
+  showError: (result) ->
+    # console.log('showError', result)
+    failureMessage = result?.message
+    @showMessage()
+    @messageView.message.html $$$ ->
+      @div
+        class: 'preview-spinner'
+        style: 'text-align: center'
+        =>
+          @span
+            class: 'loading loading-spinner-large inline-block'
+          @div
+            class: 'text-highlight',
+            'Previewing Failed\u2026'
+            =>
+              @div
+                class: 'text-error'
+                failureMessage if failureMessage?
+          @div
+            class: 'text-warning'
+            result?.stack
+
+  showLoading: ->
+    @showMessage()
+    @messageView.message.html $$$ ->
+      @div
+        class: 'preview-spinner'
+        style: 'text-align: center'
+        =>
+          @span
+            class: 'loading loading-spinner-large inline-block'
+          @div
+            class: 'text-highlight',
+            'Loading Preview\u2026'
+
+  showMessage: ->
+    if not @messageView.hasParent()
+      #@editorContents.append @messageView
+      @self.append @messageView
+
+  hideMessage: ->
+    if @messageView.hasParent()
+      @messageView.detach()
+
+  renderViewForPreview: (view) =>
+    @editorContents.hide()
+    @htmlPreviewContainer.show()
+    @htmlPreviewContainer.html view
+  hideViewPreview: =>
+    @htmlPreviewContainer.hide()
+    @editorContents.show()
+
+  getTitle: ->
+    if @getEditor()?
+      "#{@getEditor().getTitle()} preview"
+    else
+      "Preview"
+
+  getEditor: ->
+    @textEditor.getModel()
+
+  getPath: ->
+    if @getEditor()?
+      @getEditor().getPath()
+
+  getUri: ->
+    "atom://atom-preview"
+
+  focus: ->
+    false
+
+  # Public: Destroys the indicator.
+  destroy: ->
+    @messageView.detach()
+    @activeItemSubscription.dispose()
+
   renderPreview: =>
     @renderPreviewWithRenderer "Default"
 
@@ -169,7 +243,10 @@ class PreviewView extends TextEditorView
     else
       # console.log "Revert to last editor", @lastEditor
       cEditor = @lastEditor
-    if cEditor?
+    if not cEditor?
+      # cEditor not defined
+      @showError({message:"Please type a Text Editor to render preview"})
+    else
       # Source Code text
       text = cEditor.getText()
       # Save Preview's Scroll position
@@ -297,60 +374,4 @@ class PreviewView extends TextEditorView
         }
         return @showError e
 
-  toggleOptions: ->
-    @optionsView.toggle()
-
-  selectRenderer: ->
-    @selectRendererView.attach()
-
-  showError: (result) ->
-    # console.log('showError', result)
-    failureMessage = result?.message
-    @showMessage()
-    @messageView.message.html $$$ ->
-      @div
-        class: 'preview-spinner'
-        style: 'text-align: center'
-        =>
-          @span
-            class: 'loading loading-spinner-large inline-block'
-          @div
-            class: 'text-highlight',
-            'Previewing Failed\u2026'
-            =>
-              @div
-                class: 'text-error'
-                failureMessage if failureMessage?
-          @div
-            class: 'text-warning'
-            result?.stack
-
-  showLoading: ->
-    @showMessage()
-    @messageView.message.html $$$ ->
-      @div
-        class: 'preview-spinner'
-        style: 'text-align: center'
-        =>
-          @span
-            class: 'loading loading-spinner-large inline-block'
-          @div
-            class: 'text-highlight',
-            'Loading Preview\u2026'
-
-  showMessage: ->
-    if not @messageView.hasParent()
-      #@editorContents.append @messageView
-      @self.append @messageView
-
-  hideMessage: ->
-    if @messageView.hasParent()
-      @messageView.detach()
-
-  renderViewForPreview: (view) =>
-    @editorContents.hide()
-    @htmlPreviewContainer.show()
-    @htmlPreviewContainer.html view
-  hideViewPreview: =>
-    @htmlPreviewContainer.hide()
-    @editorContents.show()
+module.exports = document.registerElement 'atom-preview-editor', prototype: PreviewView.prototype
diff --git a/lib/preview.coffee b/lib/preview.coffee
index 03ec0b5..5ea4ead 100644
--- a/lib/preview.coffee
+++ b/lib/preview.coffee
@@ -7,7 +7,7 @@ module.exports =
     refreshDebouncePeriod: 100
 
   previewView: null
-  uri: "preview://editor"
+  uri: "atom://atom-preview"
 
   ###
   # This required method is called when your package is activated. It is passed
@@ -27,19 +27,9 @@ module.exports =
       @selectRenderer()
 
     atom.workspace.addOpener (uriToOpen) =>
-      # console.log(uriToOpen)
-      try
-        {protocol, host, pathname} = url.parse(uriToOpen)
-      catch error
-        return
-      return unless protocol is 'preview:'
-      try
-        pathname = decodeURI(pathname) if pathname
-      catch error
-        return
+      return unless uriToOpen is @uri
       # Create and show preview!
       @previewView = new PreviewView()
-      return @previewView.self
 
     # Deserialize state
     @toggle if state.isOpen
@@ -51,7 +41,7 @@ module.exports =
   # activate method so you can restore your view to where the user left off.
   ###
   serialize: ->
-    console.log 'serialize()'
+    # console.log 'serialize()'
     previewPane = atom.workspace.paneForUri(@uri)
     return {
       isOpen: previewPane?
@@ -64,7 +54,7 @@ module.exports =
   # don't need to worry because that's getting torn down anyway.
   ###
   deactivate: ->
-    console.log 'deactivate()'
+    # console.log 'deactivate()'
     previewPane = atom.workspace.paneForUri(@uri)
     if previewPane
       previewPane.destroyItem(previewPane.itemForUri(@uri))
@@ -80,10 +70,11 @@ module.exports =
     previousActivePane = atom.workspace.getActivePane()
     atom.workspace.open(@uri, split: 'right', searchAllPanes: true)
     .done (previewView) =>
-      # console.log("previewView", previewView, @previewView)
+    #   console.log("previewView", previewView, @previewView)
       if previewView instanceof PreviewView
-        previewView.renderPreview()
-        previousActivePane.activate()
+          previewView.initialize()
+    #     previewView.renderPreview()
+    #     previousActivePane.activate()
 
   toggleOptions: ->
     if @previewView?
diff --git a/package.json b/package.json
index f045043..004cef5 100644
--- a/package.json
+++ b/package.json
@@ -35,23 +35,24 @@
     "preview:toggle"
   ],
   "dependencies": {
-    "underscore-plus": "^1.5.0",
+    "LiveScript": "^1.2.0",
+    "analytics-node": "^1.0.2",
+    "atom-space-pen-views": "^2.0.4",
+    "clear-require": "^1.0.1",
     "coffee-script": "^1.7.1",
-    "less": "^1.7.3",
+    "dogeon": "^1.0.0",
+    "dogescript": "^2.3.0",
+    "ember-script": "0.0.14",
     "jade": "^1.4.2",
+    "less": "^1.7.3",
     "loophole": "^1.0.0",
-    "dogescript": "^2.3.0",
-    "typestring": "^1.0.0-2",
-    "stylus": "^0.47.3",
-    "analytics-node": "^1.0.2",
+    "ng-classify": "^4.0.2",
     "node-uuid": "^1.4.1",
-    "dogeon": "^1.0.0",
     "react-tools": "^0.11.1",
-    "ember-script": "0.0.14",
-    "clear-require": "^1.0.1",
+    "stylus": "^0.47.3",
     "temp": "^0.8.1",
-    "LiveScript": "^1.2.0",
-    "ng-classify": "^4.0.2"
+    "typestring": "^1.0.0-2",
+    "underscore-plus": "^1.5.0"
   },
   "devDependencies": {
     "grunt": "~0.4.2",
diff --git a/stylesheets/main.less b/stylesheets/main.less
index f829521..11b922b 100644
--- a/stylesheets/main.less
+++ b/stylesheets/main.less
@@ -5,15 +5,24 @@
  * For more information: https://atom.io/docs/latest/creating-a-package#stylesheets
  */
 
-.preview-container {
+.atom-preview-container {
   overflow: scroll;
   box-sizing: border-box;
   padding: 0px;
+
   code {
     padding: 0px;
     background: none;
   }
 
+  atom-text-editor {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
   .preview-code-block {
     padding: 0px 9.5px;
   }