diff --git a/css/1140.css b/css/1140.css
index b8d6fa2..9b1a3da 100644
--- a/css/1140.css
+++ b/css/1140.css
@@ -87,6 +87,9 @@ img {
 	height: auto;
 }
 
+.mobile-tabs {
+	display: none;
+}
 
 /* Smaller screens */
 
@@ -108,7 +111,7 @@ img {
 	font-size: 16px;
 	-webkit-text-size-adjust: none;
 	}
-	
+
 	.row, body, .container {
 	width: 100%;
 	min-width: 0;
@@ -127,4 +130,86 @@ img {
 	padding-right: 20px;
 	}
 
+	/* Re-arrange layout */
+	body #ExplainGitZen-Container .playground-container {
+		display: flex;
+		flex-direction: column;
+		margin: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;	
+	}
+
+	body #ExplainGitZen-Container .control-box {
+		width: 100%;
+		height: 30vh;
+		bottom: 0;
+		top: auto;
+		z-index: 105;
+		background-color: white;
+	}
+
+	body #ExplainGitZen-Container .control-box input[type="text"] {
+		width: 100vw;
+		height: 40px;
+		box-sizing: border-box;
+		border-top: 1px solid gray;
+	}
+
+	body #ExplainGitZen-Container .control-box .log {
+		bottom: 40px;
+		padding-bottom: 10px;
+	}
+
+	body #ExplainGitZen-Container .svg-container {
+		position: static;
+		width: 100%;
+		height: calc(70vh - 15px);
+		margin-top: 11px;
+		border: none;
+	}
+
+	/* Tabbed view for Remote scenarios */
+	#ExplainGitZen-Container .svg-container.remote-container {
+		height: 70vh;
+		min-height: auto;
+	}
+
+	#ExplainGitZen-Container .svg-container.remote-container
+	#ExplainGitZen-Origin {
+		height: 90%;
+	}
+
+	#ExplainGitZen-Container .svg-container.remote-container.hidden {
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.mobile-tabs {
+		display: flex;
+		position: fixed;
+		z-index: 105;
+		width: 100%;
+		background-color: white;	
+	}
+
+	.mobile-tabs.hidden {
+		display: none;
+	}
+
+	.mobile-tabs span {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 50%;
+		text-align: center;
+		height: 40px;
+		font-weight: bold;
+		cursor: pointer;
+	}
+
+	.tab-origin {
+		background-color: #eff1ff;
+	}
+
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index a87e584..c7b1255 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
   gtag('config', 'UA-115441830-1');
 </script>
 
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 <title>Visualizing Git</title>
 <script src="js/vendor/jquery.js"></script>
@@ -23,6 +24,11 @@
 </head>
 <body>
 
+<div class="mobile-tabs hidden">
+  <span class="tab-local" onclick="showLocalRepo()">Local Repository</span>
+  <span class="tab-origin" onclick="showRemoteRepo()">Origin (Remote)</span>
+</div>
+
 <div id="ExplainGitZen-Container" style="display:none">
     <div class="playground-container">
       <pre id='last-command' style='display: none;'></pre>
@@ -49,6 +55,26 @@
     </marker>
 </svg>
 
+<script type="text/javascript">
+    function initMobileTabs () {
+      var hasRemote = $('#ExplainGitZen-Origin').length > 0;
+      if(hasRemote) {
+        $('.mobile-tabs').removeClass('hidden');
+        showLocalRepo();
+      }else {
+        $('.mobile-tabs').addClass('hidden');
+        showRemoteRepo();
+      }
+    }
+
+    function showLocalRepo () {
+      $('.remote-container').addClass('hidden');
+    }
+
+    function showRemoteRepo () {
+      $('.remote-container').removeClass('hidden');
+    }
+</script>
 <script type="text/javascript">
 require(['explaingit', 'demos'], function (explainGit, demos) {
     function ready(fn) {
@@ -99,6 +125,7 @@
           document.getElementById('last-command').textContent = ""
           clean()
           open()
+          initMobileTabs()
         }
       }
 
diff --git a/js/controlbox.js b/js/controlbox.js
index c9761bf..a1f0e78 100644
--- a/js/controlbox.js
+++ b/js/controlbox.js
@@ -133,9 +133,13 @@ function(_yargs, d3, demos) {
         .classed('log', true);
 
       input = cBoxContainer.append('input')
-        .attr('type', 'text')
-        .classed('input', true)
-        .attr('placeholder', 'enter git command');
+        .attr({
+          type: 'text',
+          placeholder: 'enter git command',
+          autocorrect: 'off',
+          autocapitalize: 'none'
+        })
+        .classed('input', true);
 
       log.on('click', function () {
         if (d3.event.target === log.node()) {
diff --git a/js/explaingit.js b/js/explaingit.js
index 8aa89d5..309568c 100644
--- a/js/explaingit.js
+++ b/js/explaingit.js
@@ -25,7 +25,7 @@ define(['historyview', 'controlbox', 'd3'], function(HistoryView, ControlBox, d3
       originView = new HistoryView({
         name: name + '-Origin',
         width: 300,
-        height: 400,
+        height: $(window).height() * 0.3,
         commitRadius: args.commitRadius,
         remoteName: 'origin',
         commitData: args.originData,
