diff --git a/01_Code/physical_computing_interface/index.html b/01_Code/physical_computing_interface/index.html
index 409e1d71d05415b08bc38162795a1b29ad11e2be..5157daa62deae898cc3e7353b785bfe9f2781b22 100644
--- a/01_Code/physical_computing_interface/index.html
+++ b/01_Code/physical_computing_interface/index.html
@@ -26,6 +26,23 @@
         </div>
             
     </div>
+
+    <div id="simulation">
+        <div id="threejs1">
+            <div class="header1">
+                    <i> Simulation</i>
+                    <!-- Three.js -->
+            </div>
+            
+            <!-- <div id="webgl1"></div> -->
+            <div class="dragbar2"></div>
+        </div>
+        <!-- <div class="slidecontainer">
+                <input type="range" min="0" max="0" value="1" class="slider" id="time">
+        </div> -->
+        
+            
+    </div>
     
 
 
@@ -142,6 +159,9 @@
         $(document).mousemove(function(e){
         //   $('#position').html(e.pageX +', '+ e.pageY);
           $('#threejs').css("width",e.pageX+2);
+
+          $('#simulation').css("width",e.pageX+2);
+
           $('#graph').css("left",e.pageX+2);
           $('#json').css("left",e.pageX+2);
           $('.footer1').css("width",e.pageX+2);
@@ -160,6 +180,16 @@
       })
    });
 
+   $('.dragbar2').mousedown(function(e){
+       e.preventDefault();
+       // $('#mousestatus').html("mousedown" + i++);
+       $(document).mousemove(function(e){
+        $('#threejs').css("height",e.pageY+2);
+        $('#simulation').css("top",e.pageY+2);
+         
+      })
+   });
+
    $(document).mouseup(function(e){
        $(document).unbind('mousemove');
     });
diff --git a/01_Code/physical_computing_interface/style.css b/01_Code/physical_computing_interface/style.css
index 062963debf668ebfb2a5e3f7f0c537f02f1ab6a4..106c2044b7b4f242ad93857a4e2f193ef7b9de4a 100644
--- a/01_Code/physical_computing_interface/style.css
+++ b/01_Code/physical_computing_interface/style.css
@@ -30,6 +30,7 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
     color: var(--color2);
     top:var(--dragwidth);
 }
+
 .header2{
     background-color:  rgba(0, 0, 0, 0);/*transparent*/
 
@@ -46,6 +47,7 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
     color: var(--color1);
     
 }
+
 #threejs1{
     background-color: var(--color11);
     /* background-image: linear-gradient(+90deg, #03023d 90%,#ffffff ); */
@@ -53,7 +55,8 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
     height: 100%;
     float: top;
     /* z-index: -1; */
- }
+}
+
 #threejs{
    background-color: var(--color11);
    /* background-image: linear-gradient(+90deg, #03023d 90%,#ffffff ); */
@@ -61,14 +64,27 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
    float: left;
    position: absolute;
    top:0px;
-   bottom: var(--bottom);
+   bottom: 50%;
+   /* bottom: var(--bottom); */
    overflow-y: hidden;
    font-family: var(--font);
    color: var(--color2);
    /* z-index: -1; */
 }
 
-
+#simulation{
+    background-color: var(--color11);
+    /* background-image: linear-gradient(+90deg, #03023d 90%,#ffffff ); */
+    width: 50%;
+    float: left;
+    position: absolute;
+    top:50%;
+    bottom: var(--bottom);
+    overflow-y: hidden;
+    font-family: var(--font);
+    color: var(--color2);
+    /* z-index: -1; */
+}
 
 #webgl{
     top:var(--top);
@@ -76,7 +92,7 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
     overflow-y: hidden;
     font-family: var(--font);
     color: var(--color2);
- }
+}
 
 #graph{
     background-color: var(--color2);
@@ -118,9 +134,9 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
     color: var(--color2);
     height: var(--bottom);
     bottom:0;
- }
+}
  
- .footer2{
+.footer2{
     background-color: var(--color1);
     float: right;
     position: absolute;
@@ -130,7 +146,7 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
     color: var(--color2);
     height: var(--bottom);
     bottom:0;
- }
+}
 
 
 .dragbar{
@@ -151,7 +167,18 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
     /* position: absolute; */
     height: var(--dragwidth);
     cursor: row-resize;
- }
+}
+
+.dragbar2{
+    /* background-color: var(--color3); */
+    background-image: linear-gradient(+0deg, var(--color1)50% ,var(--color2)60% ,var(--color1));
+    width:100%;
+    left:var(--dragwidth);
+    float: bottom;
+    /* position: absolute; */
+    height: var(--dragwidth);
+    cursor: row-resize;
+}
 
 #cy {
     height: 100%;
@@ -163,6 +190,7 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
     /* left: var(--dragwidth);
     top:var(--top); */
 }
+
 #jsoneditor {
     width: 100%;
     height: 100%;
@@ -192,6 +220,7 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
 	-webkit-transition: background-color .2s ease-in; 
 	transition: background-color .2s ease-in; 
 }
+
 .button:hover {
     background-color: #e5e5e5;    
 }