diff --git a/app/styles.scss b/app/styles.scss
deleted file mode 100644
index aaa7394..0000000
--- a/app/styles.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@import "susy";
-
-$susy: (
-  columns: 24 ,
-  gutter-position: split ,
-);
-
-.debugger-view { @include container(90%); }
-
-.classes { @include span(3); }
-
-.file-view {
-  @include span(4);
-  margin: span(1);
-}
-
-.source-view { @include span(6); }
-
-.block-view {
-  @include span(4);
-  margin-right: span(3);
-  height: 200px;
-}
-
-.status-view {
-  @include span(2 at 22);
-}
-
-.registers-view {
-  @include span(20 at 3);
-}
-
-.register-view {
-  @include gallery(3);
-  margin-top: 10px;
-}
-
-.bright {
-  background-color: orange ;
-}
diff --git a/assets/css/app.css.scss b/assets/css/app.css.scss
index f64375c..aaa7394 100644
--- a/assets/css/app.css.scss
+++ b/assets/css/app.css.scss
@@ -1 +1,40 @@
-// Place your apps css here
\ No newline at end of file
+@import "susy";
+
+$susy: (
+  columns: 24 ,
+  gutter-position: split ,
+);
+
+.debugger-view { @include container(90%); }
+
+.classes { @include span(3); }
+
+.file-view {
+  @include span(4);
+  margin: span(1);
+}
+
+.source-view { @include span(6); }
+
+.block-view {
+  @include span(4);
+  margin-right: span(3);
+  height: 200px;
+}
+
+.status-view {
+  @include span(2 at 22);
+}
+
+.registers-view {
+  @include span(20 at 3);
+}
+
+.register-view {
+  @include gallery(3);
+  margin-top: 10px;
+}
+
+.bright {
+  background-color: orange ;
+}
diff --git a/volt/block_view.rb b/volt/block_view.rb
new file mode 100644
index 0000000..6480cb1
--- /dev/null
+++ b/volt/block_view.rb
@@ -0,0 +1,49 @@
+
+require "instruction_view"
+
+class BlockView
+
+  include React::Component
+  required_param :interpreter
+
+  define_state :block => []
+  define_state :block_name => ""
+
+  before_mount do
+    interpreter.register_event(:instruction_changed,  self)
+    update_block
+  end
+
+  def update_block
+    return unless interpreter.instruction
+    block_name! interpreter.block.name
+    codes = interpreter.block.codes.dup
+    slice = codes.index(interpreter.instruction) #- 1
+    codes.shift( slice ) if slice >= 0
+    codes.pop while(codes.length > 4)
+    block! codes
+  end
+
+  def instruction_changed
+    update_block
+  end
+
+  def render
+    return unless block
+    div.block_view do
+      div do
+        h4 { method_name}
+        h4 {"Block: #{block_name}"}
+      end
+      block.each do |code|
+        InstructionView  :interpreter => interpreter , :instruction => code
+      end
+    end
+  end
+
+  def method_name
+    bl = interpreter.block
+    return bl.method if bl.method.is_a? String
+    "#{bl.method.for_class.name}.#{bl.method.name}"
+  end
+end
diff --git a/volt/class_view.rb b/volt/class_view.rb
new file mode 100644
index 0000000..dd64bde
--- /dev/null
+++ b/volt/class_view.rb
@@ -0,0 +1,16 @@
+class ClassView
+  include React::Component
+
+  required_param :classes, type: {}
+
+  def render
+    div.classes do
+      h4 { "Classes" }
+      classes.each do |name , clas|
+        div.one_class do
+           clas.name
+        end
+      end
+    end
+  end
+end
diff --git a/volt/debugger.rb b/volt/debugger.rb
new file mode 100644
index 0000000..7fe5060
--- /dev/null
+++ b/volt/debugger.rb
@@ -0,0 +1,37 @@
+
+require "register_view"
+require "class_view"
+require "source_view"
+require "block_view"
+require "status_view"
+
+class Debugger
+
+  include React::Component
+  required_param :machine , :type => Virtual::Machine
+  define_state :interpreter  => Interpreter.new
+
+  before_mount do
+    code = Ast::ExpressionList.new( [Ast::CallSiteExpression.new(:putstring, [] ,Ast::StringExpression.new("Hello again"))])
+    Virtual::Compiler.compile( code , machine.space.get_main )
+    machine.run_before "Register::CallImplementation"
+    interpreter.start machine.init
+  end
+  def render
+    div.debugger_view do
+      ClassView classes: machine.space.classes
+      div.file_view do
+        "Future Source code view"
+      end
+      SourceView  :interpreter => interpreter
+      BlockView :interpreter => interpreter
+      StatusView :interpreter => interpreter
+      div.registers_view do
+        interpreter.registers.each do |r , oid|
+          RegisterView interpreter: interpreter , register: r
+        end
+      end
+    end
+
+  end
+end
diff --git a/volt/instruction_view.rb b/volt/instruction_view.rb
new file mode 100644
index 0000000..5e056f6
--- /dev/null
+++ b/volt/instruction_view.rb
@@ -0,0 +1,28 @@
+
+
+class InstructionView
+
+  include React::Component
+  required_param :interpreter
+  required_param :instruction
+
+  define_state :active => ""
+
+  before_mount do
+    check_active interpreter.instruction
+  end
+
+  def check_active i
+    active! instruction == i ? "bright" : ""
+
+  end
+  def instruction_changed old , ins
+    check_active ins
+  end
+
+  def render
+    div :class => active do
+      instruction.to_s if instruction
+    end
+  end
+end
diff --git a/volt/main.rb b/volt/main.rb
new file mode 100644
index 0000000..640bf5a
--- /dev/null
+++ b/volt/main.rb
@@ -0,0 +1,16 @@
+require 'opal'
+require "opal/parser"
+
+require "salama"
+require "interpreter"
+
+require 'opal-react'
+
+require "debugger"
+
+require 'opal-jquery'
+
+Document.ready? do  # Document.ready? is a opal-jquery method.
+  machine = Virtual.machine.boot
+  React.render( React.create_element( Debugger , :machine => machine ),  Element['#content']    )
+end
diff --git a/volt/register_view.rb b/volt/register_view.rb
new file mode 100644
index 0000000..5caf560
--- /dev/null
+++ b/volt/register_view.rb
@@ -0,0 +1,64 @@
+
+class RegisterView
+
+  include React::Component
+  required_param :interpreter
+  required_param :register
+
+  define_state :objects_id
+  define_state :fields => []
+
+  before_mount do
+    interpreter.register_event(:register_changed,  self)
+    interpreter.register_event(:object_changed,  self)
+    register_changed( register , nil , interpreter.registers[register])
+  end
+
+  def register_changed reg , old , value
+    reg = reg.symbol unless reg.is_a? Symbol
+    return unless reg == register
+    objects_id! value
+    calc_fields
+  end
+
+  def object_changed reg
+    reg = reg.symbol unless reg.is_a? Symbol
+    return unless reg == register
+    puts "Object changed in #{reg}"
+    calc_fields
+  end
+
+  def calc_fields
+    #puts "My id #{objects_id} , #{objects_id.class}"
+    object = Virtual.machine.objects[objects_id]
+    if object and ! object.is_a?(String)
+      has_fields = []
+      clazz = object.class.name.split("::").last
+      #puts "found #{clazz}"
+      has_fields << clazz
+      object.get_instance_variables.each do |variable|
+        f = object.get_instance_variable(variable)
+        has_fields << f
+      end
+      fields! has_fields
+    end
+  end
+
+  def render
+    div.register_view do
+      div do
+        objects_id.to_s
+      end
+      fields.each do |attribute|
+        div.col_md_12 do
+          "#{marker(attribute)} - #{attribute.object_id}".span
+        end
+      end
+    end
+  end
+
+  def marker var
+    return "W" if var.is_a? String
+    var.class.name.split("::").last[0]
+  end
+end
diff --git a/volt/source_view.rb b/volt/source_view.rb
new file mode 100644
index 0000000..3efbb68
--- /dev/null
+++ b/volt/source_view.rb
@@ -0,0 +1,38 @@
+class SourceView
+
+  include React::Component
+
+  required_param :interpreter
+
+  define_state :sources => []
+
+  before_mount do
+    interpreter.register_event(:instruction_changed,  self)
+    instruction_changed nil , interpreter.instruction
+  end
+
+  def instruction_changed old , ins
+    text = ins ? source_text(ins.source) : "exit"
+    return if sources.last == text
+    sources << text
+    sources.shift if sources.length > 5
+    sources! sources
+  end
+
+  def render
+    div.source_view do
+      h4 {"Virtual Machine Instruction"}
+      sources.each do |s|
+        s.br
+      end
+    end
+  end
+
+  def source_text source
+    if source.is_a? Virtual::Instruction
+      return source.class.name
+    else
+      return "Method: #{source.name}"
+    end
+  end
+end
diff --git a/volt/status_view.rb b/volt/status_view.rb
new file mode 100644
index 0000000..f9b2453
--- /dev/null
+++ b/volt/status_view.rb
@@ -0,0 +1,41 @@
+
+class StatusView
+
+  include React::Component
+  required_param :interpreter
+
+  define_state :state => "starting"
+  define_state :stdout
+
+  before_mount do
+    interpreter.register_event(:instruction_changed,  self)
+  end
+
+  def update_state
+    state! interpreter.state
+    stdout! interpreter.stdout
+  end
+
+  def instruction_changed old , nex
+    update_state
+  end
+
+  def render
+    div.status_view do
+      div do
+        button.bright { "next" }.on(:click) { interpreter.tick }
+        " ".br
+      end
+      div do
+        h4 {"Status:"}
+        state.to_s.br
+      end
+      div do
+        h4 {"Stdout:"}
+      end
+      div do
+        interpreter.stdout.br
+      end
+    end
+  end
+end