diff --git a/build/bundle.js b/build/bundle.js
index cd60c1a9..803d7f5b 100644
--- a/build/bundle.js
+++ b/build/bundle.js
@@ -4807,6 +4807,14 @@ var Level = Sandbox.extend({
     }, this));
   },
 
+  showGoal: function() {
+    this.goalCanvasHolder.slideIn();
+  },
+
+  hideGoal: function() {
+    this.goalCanvasHolder.slideOut();
+  },
+
   initParseWaterfall: function(options) {
     this.parseWaterfall = new ParseWaterfall();
 
@@ -4820,7 +4828,6 @@ var Level = Sandbox.extend({
         }).getInstantCommands()
       );
     }
-
   },
 
   initGitShim: function(options) {
@@ -4887,6 +4894,7 @@ var Level = Sandbox.extend({
 
   levelSolved: function(defer) {
     this.solved = true;
+    this.hideGoal();
     this.mainVis.gitVisuals.finishAnimation()
     .then(function() {
       defer.resolve();
@@ -6567,27 +6575,6 @@ var Visualization = Backbone.View.extend({
     $(this.paper.canvas).css('opacity', 0);
   },
 
-  harshSlideChange: function(value) {
-  },
-
-  slideOut: function() {
-    this.toggleSlide(true);
-  },
-
-  slideIn: function() {
-    this.toggleSlide(false);
-  },
-
-  toggleSlide: function(value) {
-    if (!this.containerElement) {
-      console.warn('cant slide with absolute positioning');
-      return;
-    }
-
-    // no classes on svg :-/
-    $(this.containerElement).toggleClass('slideOut', value);
-  },
-
   getAnimationTime: function() { return 300; },
 
   fadeTreeIn: function() {
@@ -9483,6 +9470,18 @@ var CanvasTerminalHolder = BaseView.extend({
     this.render();
   },
 
+  slideOut: function() {
+    this.slideToggle(true);
+  },
+
+  slideIn: function() {
+    this.slideToggle(false);
+  },
+
+  slideToggle: function(value) {
+    this.$('div.terminal-window-holder').toggleClass('slideOut', value);
+  },
+
   getCanvasLocation: function() {
     return this.$('div.inside')[0];
   }
@@ -17478,6 +17477,14 @@ var Level = Sandbox.extend({
     }, this));
   },
 
+  showGoal: function() {
+    this.goalCanvasHolder.slideIn();
+  },
+
+  hideGoal: function() {
+    this.goalCanvasHolder.slideOut();
+  },
+
   initParseWaterfall: function(options) {
     this.parseWaterfall = new ParseWaterfall();
 
@@ -17491,7 +17498,6 @@ var Level = Sandbox.extend({
         }).getInstantCommands()
       );
     }
-
   },
 
   initGitShim: function(options) {
@@ -17558,6 +17564,7 @@ var Level = Sandbox.extend({
 
   levelSolved: function(defer) {
     this.solved = true;
+    this.hideGoal();
     this.mainVis.gitVisuals.finishAnimation()
     .then(function() {
       defer.resolve();
@@ -19259,6 +19266,18 @@ var CanvasTerminalHolder = BaseView.extend({
     this.render();
   },
 
+  slideOut: function() {
+    this.slideToggle(true);
+  },
+
+  slideIn: function() {
+    this.slideToggle(false);
+  },
+
+  slideToggle: function(value) {
+    this.$('div.terminal-window-holder').toggleClass('slideOut', value);
+  },
+
   getCanvasLocation: function() {
     return this.$('div.inside')[0];
   }
@@ -21922,27 +21941,6 @@ var Visualization = Backbone.View.extend({
     $(this.paper.canvas).css('opacity', 0);
   },
 
-  harshSlideChange: function(value) {
-  },
-
-  slideOut: function() {
-    this.toggleSlide(true);
-  },
-
-  slideIn: function() {
-    this.toggleSlide(false);
-  },
-
-  toggleSlide: function(value) {
-    if (!this.containerElement) {
-      console.warn('cant slide with absolute positioning');
-      return;
-    }
-
-    // no classes on svg :-/
-    $(this.containerElement).toggleClass('slideOut', value);
-  },
-
   getAnimationTime: function() { return 300; },
 
   fadeTreeIn: function() {
diff --git a/src/index.html b/src/index.html
index 228fdbab..31ba0410 100644
--- a/src/index.html
+++ b/src/index.html
@@ -97,28 +97,32 @@
 
   <script type="text/html" id="terminal-window-bare-template">
     <div class="terminal-window-holder box flex3 vertical transitionTransform">
-      <div class="toolbar box vertical">
-        <div class="controls box horizontal">
-          <div class="box flex1">
-            <div class="close">
+      <div class="wrapper box vertical">
+        <div class="toolbar box vertical">
+          <div class="controls box horizontal">
+            <div class="box flex1">
+              <div class="close">
+              </div>
+            </div>
+            <div class="box flex1">
+              <div class="minimize">
+              </div>
+            </div>
+            <div class="box flex1">
+              <div class="plus">
+              </div>
             </div>
           </div>
-          <div class="box flex1">
-            <div class="minimize">
-            </div>
-          </div>
-          <div class="box flex1">
-            <div class="plus">
-            </div>
+          <div>
+            <i class="icon-cog"></i>
+            <%= title %>
           </div>
         </div>
-        <div>
-          <i class="icon-cog"></i>
-          <%= title %>
+        <div class="terminal-text">
+          <p> yo </p>
+        </div>
+        <div class="inside box flex1">
         </div>
-      </div>
-
-      <div class="inside box flex1">
       </div>
     </div>
     <div class="box flex3">
diff --git a/src/js/level/index.js b/src/js/level/index.js
index ae553399..a5ad359a 100644
--- a/src/js/level/index.js
+++ b/src/js/level/index.js
@@ -77,6 +77,14 @@ var Level = Sandbox.extend({
     }, this));
   },
 
+  showGoal: function() {
+    this.goalCanvasHolder.slideIn();
+  },
+
+  hideGoal: function() {
+    this.goalCanvasHolder.slideOut();
+  },
+
   initParseWaterfall: function(options) {
     this.parseWaterfall = new ParseWaterfall();
 
@@ -90,7 +98,6 @@ var Level = Sandbox.extend({
         }).getInstantCommands()
       );
     }
-
   },
 
   initGitShim: function(options) {
@@ -157,6 +164,7 @@ var Level = Sandbox.extend({
 
   levelSolved: function(defer) {
     this.solved = true;
+    this.hideGoal();
     this.mainVis.gitVisuals.finishAnimation()
     .then(function() {
       defer.resolve();
diff --git a/src/js/views/index.js b/src/js/views/index.js
index 07e284c7..e7c42fa7 100644
--- a/src/js/views/index.js
+++ b/src/js/views/index.js
@@ -323,6 +323,18 @@ var CanvasTerminalHolder = BaseView.extend({
     this.render();
   },
 
+  slideOut: function() {
+    this.slideToggle(true);
+  },
+
+  slideIn: function() {
+    this.slideToggle(false);
+  },
+
+  slideToggle: function(value) {
+    this.$('div.terminal-window-holder').toggleClass('slideOut', value);
+  },
+
   getCanvasLocation: function() {
     return this.$('div.inside')[0];
   }
diff --git a/src/js/visuals/visualization.js b/src/js/visuals/visualization.js
index 09c3d5ca..63ecf6a2 100644
--- a/src/js/visuals/visualization.js
+++ b/src/js/visuals/visualization.js
@@ -87,27 +87,6 @@ var Visualization = Backbone.View.extend({
     $(this.paper.canvas).css('opacity', 0);
   },
 
-  harshSlideChange: function(value) {
-  },
-
-  slideOut: function() {
-    this.toggleSlide(true);
-  },
-
-  slideIn: function() {
-    this.toggleSlide(false);
-  },
-
-  toggleSlide: function(value) {
-    if (!this.containerElement) {
-      console.warn('cant slide with absolute positioning');
-      return;
-    }
-
-    // no classes on svg :-/
-    $(this.containerElement).toggleClass('slideOut', value);
-  },
-
   getAnimationTime: function() { return 300; },
 
   fadeTreeIn: function() {
diff --git a/src/style/main.css b/src/style/main.css
index 7f2da98a..7056b9a2 100644
--- a/src/style/main.css
+++ b/src/style/main.css
@@ -131,32 +131,48 @@ div.canvasTerminalHolder {
 }
 
 #mainVisSpace {
-  background-color: #4183C4;
+  background-color: #24A7FF;
 }
 
 #interfaceWrapper {
   min-width: 600px;
-  min-height: 400px;
+  min-height: 600px;
 }
 
 div.canvasTerminalHolder div.terminal-window-holder {
-  margin: 50px 0;
+  margin: 10% 0;
   height: 100%;
+  -webkit-transform: translate3d(0,0,0);
+}
+
+div.canvasTerminalHolder div.terminal-window-holder.slideOut {
+  -webkit-transform: translate3d(-150%,0,0);
+}
+
+div.canvasTerminalHolder div.terminal-window-holder div.wrapper {
+  margin: 0 20px 0px 20px;
+  height: 80%;
+  box-shadow: 0 0 30px rgb(0,0,0);
+}
+
+div.canvasTerminalHolder div.terminal-window-holder div.terminal-text {
+  padding: 5px 10px;
 }
 
 div.canvasTerminalHolder div.terminal-window-holder div.toolbar,
+div.canvasTerminalHolder div.terminal-window-holder div.terminal-text,
 div.canvasTerminalHolder div.terminal-window-holder div.inside {
-  margin: 0px 20px;
   border: 0px;
 }
 
+div.canvasTerminalHolder div.terminal-window-holder div.terminal-text,
+div.canvasTerminalHolder div.terminal-window-holder div.inside {
+  background: #ff4c7e;
+}
+
 div.canvasTerminalHolder div.terminal-window-holder div.inside {
   min-height: 200px;
-  margin-bottom: 150px;
   border-radius: 0 0 5px 5px;
-  background: #4C7956;
-  background: -webkit-linear-gradient(top, #97ECAA 0%,#698D48 100%);
-  box-shadow: 0 0 10px rgba(0,0,0,0.7);
 }
 
 div.canvasTerminalHolder div.terminal-window-holder,