diff --git a/resources/views/time_tracker.blade.php b/resources/views/time_tracker.blade.php
index faab60bc304e..3cff00e0d3a2 100644
--- a/resources/views/time_tracker.blade.php
+++ b/resources/views/time_tracker.blade.php
@@ -12,6 +12,28 @@
 
     <style type="text/css">
 
+		#side-nav {
+		  position: fixed;
+		  width: 400px;
+		  height:100vh;
+		  left: 0;
+		  right: 0;
+		  overflow-y: auto;
+		  padding-right: 1px;
+		  top: 80px;
+		  xbackground-color: red;
+		}
+
+		#content-wrapper {
+		  margin: 60px 0px 0 400px;
+		  padding: 0 30px;
+		  overflow-y: auto;
+		  position: fixed;
+		  left: 0;
+		  top: 20px;
+		  height:100vh;
+		}
+
 		button .glyphicon {
 			vertical-align: text-top;
 		}
@@ -101,12 +123,46 @@
 	<div data-bind="text: ko.toJSON(model.selectedTask().project)"></div>
 	-->
 
-    <div class="container" style="margin: 0 auto;width: 100%;">
-        <div class="row no-gutter">
+	<div>
+		<div id="side-nav">
 
-            <!-- Task Form -->
-            <div class="col-sm-7 col-sm-push-5">
-                <div class="xwell" data-bind="visible: selectedTask" style="margin:20px; display:none;">
+			<!-- Task List -->
+			<div data-bind="foreach: filteredTasks">
+				<a href="#" data-bind="click: $parent.selectTask, event: { mouseover: showActionButton, mouseout: hideActionButton }, css: listItemState"
+					class="list-group-item" stylex="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
+					<div class="pull-right" style="text-align:right;">
+						<div data-bind="visible: actionButtonVisible()"
+							data-bindx="style : { visibility : actionButtonVisible() ? '' : 'hidden' }">
+							&nbsp;&nbsp;
+							<button type="button" data-bind="css: startClass, click: onStartClick, clickBubble: false"
+								class="btn btn-sm" style="padding-left:0px; padding-right: 12px; padding-bottom: 6px; margin-top:5px;">
+								<span data-bind="css: startIcon"></span>
+							</button>
+						</div>
+					</div>
+					<div class="pull-right" style="text-align:right">
+						<div data-bind="text: duration, style: { fontWeight: isRunning() ? 'bold' : '' }"></div>
+						<div data-bind="text: age, style: { fontWeight: isRunning() ? 'bold' : '' }" style="padding-top: 2px"></div>
+					</div>
+					<h4 class="list-group-item-heading">
+						<span data-bind="text: description.truncated, style: { fontWeight: isRunning() ? 'bold' : '' }"></span>&nbsp;
+					</h4>
+					<p class="list-group-item-text">
+						<span class="link" data-bind="text: clientName, click: $parent.viewClient, clickBubble: false"></span>
+						<span data-bind="visible: clientName &amp;&amp; projectName"> | </span>
+						<span class="link" data-bind="text: projectName, click: $parent.viewProject, clickBubble: false"></span>
+						&nbsp;
+					</p>
+				</a>
+			</div>
+
+
+		</div>
+		<div id="content-wrapper">
+			<div class="container-fluid">
+
+				<!-- Task Form -->
+                <div data-bind="visible: selectedTask" style="margin:20px; display:none;">
                     <div class="panel panel-default">
                         <div class="panel-body">
 							<form id="taskForm">
@@ -158,37 +214,14 @@
                         </div>
                     </div>
                 </div>
-            </div>
 
-            <!-- Task List -->
-            <div class="list-group col-sm-5 col-sm-pull-7" data-bind="foreach: filteredTasks">
-                <a href="#" data-bind="click: $parent.selectTask, event: { mouseover: showActionButton, mouseout: hideActionButton }, css: listItemState"
-                    class="list-group-item" stylex="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
-                    <div class="pull-right" style="text-align:right;">
-                        <div data-bind="visible: actionButtonVisible()"
-                            data-bindx="style : { visibility : actionButtonVisible() ? '' : 'hidden' }">
-                            &nbsp;&nbsp;
-                            <button type="button" data-bind="css: startClass, click: onStartClick, clickBubble: false"
-                                class="btn btn-sm" style="padding-left:0px; padding-right: 12px; padding-bottom: 6px; margin-top:5px;">
-                                <span data-bind="css: startIcon"></span>
-                            </button>
-                        </div>
-                    </div>
-                    <div class="pull-right" style="text-align:right">
-                        <div data-bind="text: duration, style: { fontWeight: isRunning() ? 'bold' : '' }"></div>
-                        <div data-bind="text: age, style: { fontWeight: isRunning() ? 'bold' : '' }" style="padding-top: 2px"></div>
-                    </div>
-                    <h4 class="list-group-item-heading">
-						<span data-bind="text: description.truncated, style: { fontWeight: isRunning() ? 'bold' : '' }"></span>&nbsp;
-					</h4>
-                    <p class="list-group-item-text">
-                        <span class="link" data-bind="text: clientName, click: $parent.viewClient, clickBubble: false"></span>
-                        <span data-bind="visible: clientName &amp;&amp; projectName"> | </span>
-                        <span class="link" data-bind="text: projectName, click: $parent.viewProject, clickBubble: false"></span>
-						&nbsp;
-                    </p>
-                </a>
-            </div>
+			</div>
+		</div>
+	</div>
+
+
+    <div class="container" style="margin: 0 auto;width: 100%;">
+        <div class="row no-gutter">
 
         </div>
     </div>