diff --git a/nui/arrow.png b/nui/arrow.png
new file mode 100644
index 0000000..59353ca
Binary files /dev/null and b/nui/arrow.png differ
diff --git a/nui/arrow.psd b/nui/arrow.psd
new file mode 100644
index 0000000..f70d4aa
Binary files /dev/null and b/nui/arrow.psd differ
diff --git a/nui/radar.css b/nui/radar.css
index ca2c6db..7a20352 100644
--- a/nui/radar.css
+++ b/nui/radar.css
@@ -15,7 +15,7 @@
 
 .radar_container {
     width: 700px;
-    height: 220px;
+    height: 200px;
 
     /* Temp centre */
     position: absolute;
@@ -26,39 +26,57 @@
     left: 0;
 
     display: grid;
-    grid-template-columns: 5% 90% 5%;
+    grid-template-columns: 2.50% 95% 2.50%;
 }
 
-.panel_left_side {
-    border-right: 20px solid darkslategray;
-    border-top: 80px solid transparent;
-    border-bottom: 80px solid transparent;
+.panel_side {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient( to bottom, rgb( 50, 50, 50 ), rgb( 25, 25, 25 ) );
 }
+    .panel_left {
+        clip-path: polygon( 0 30%, 100% 0, 100% 100%, 0 70% );   
+    }
 
-.panel_right_side {
-    border-left: 20px solid darkslategray;
-    border-top: 80px solid transparent;
-    border-bottom: 80px solid transparent;
+    .panel_right {
+        clip-path: polygon( 0 0, 100% 30%, 100% 70%, 0 100% );   
+    }
+
+.arrow {
+    transform: scale(0.50);
+    width: 25px;
+    height: 35px;
+    margin: auto;
+    background-color: red;
+    clip-path: polygon( 50% 0, 100% 55%, 65% 55%, 65% 100%, 35% 100%, 35% 55%, 0 55% );
 }
+    .arrow_up {
+
+    }
+
+    .arrow_down {
+
+    }
 
 #radar {
-    background-color: gray; 
+    /* background-color: gray;  */
+    background: linear-gradient( to bottom, rgb( 50, 50, 50 ), rgb( 25, 25, 25 ) );
 
     display: grid;
-    grid-template-columns: 60px 50px auto;
+    grid-template-columns: 45px 50px 150px 45px auto;
 }
     #radar .pwr_button_container {
         display: flex;
         flex-direction: column;
     }
         #radar .pwr_button_container .pwr_button {
-            width: 50px;
-            height: 50px;
+            width: 45px;
+            height: 45px;
             margin: auto;
             background: linear-gradient(to bottom, rgba( 230, 230, 230, 0.8 ), limegreen 10%, rgb(0, 149, 0)  );
             box-shadow: 0px 0px 3px 0px rgb( 80, 80, 80 ) ;
             text-align: center;
-            line-height: 50px;
+            line-height: 45px;
             border-radius: 10px;
         }
 
@@ -70,8 +88,60 @@
             display: flex;
             flex-direction: column;
 
-            padding: 10px;
+            box-sizing: border-box;
+
+            padding: 10px 0;
         }
             #radar .modes_container .modes p {
                 margin: auto;
             }
+    
+    #radar .speeds_container {
+        display: flex;
+        flex-direction: column;
+    }
+        #radar .speeds_container .display {
+            display: grid;
+            grid-template-columns: 1fr;
+
+            height: 70px;
+
+            box-sizing: border-box;
+
+            border: 3px solid black;
+            
+            margin: auto 0;
+            background-color: rgb(61, 18, 0);
+        }   
+            #radar .speeds_container .display p {
+                grid-row-start: 1;
+                grid-column-start: 1;
+
+                font-family: 'Seg-7';
+                font-size: 70px;
+                text-align: center;
+
+                line-height: 108%;
+
+                margin: 0 auto;
+                letter-spacing: 10px;
+
+                margin-right: -6px;
+            }
+
+            #radar .speeds_container .display .ghost {
+                color: rgb(90, 35, 1);
+            }
+
+            #radar .speeds_container .display .speed {
+                color: rgb(252, 113, 1);;
+            }
+
+    #radar .speed_arrows_container {
+        display: grid;
+        grid-template-rows: 50% 50%;
+    }
+        #radar .speed_arrows_container .speed_arrows {
+            display: flex;
+            flex-direction: column;
+        }
\ No newline at end of file
diff --git a/nui/radar.html b/nui/radar.html
index 257e359..c275b4d 100644
--- a/nui/radar.html
+++ b/nui/radar.html
@@ -6,7 +6,7 @@
 
 	<body onselectstart="return false;" ondragstart="return false;">
 		<div class="radar_container"> 
-			<div class="panel_left_side"></div>
+			<div class="panel_side panel_left"></div>
 
 			<div id="radar">
 				<div class="pwr_button_container">
@@ -26,9 +26,33 @@
 						<p id="rearXmit">XMIT</p>
 					</div>
 				</div>
+
+				<div class="speeds_container">
+					<div class="display">
+						<p class="ghost">000</p>
+						<p class="speed" id="frontSpeed">¦27</p>
+					</div>
+
+					<div class="display">
+						<p class="ghost">000</p>
+						<p class="speed" id="rearSpeed">118</p>
+					</div>
+				</div>
+
+				<div class="speed_arrows_container">
+					<div class="speed_arrows">
+						<div class="arrow arrow_up" id="frontDirAway"></div>
+						<div class="arrow arrow_down" id="frontDirTowards"></div>
+					</div>
+
+					<div class="speed_arrows">
+						<div class="arrow arrow_up" id="rearDirTowards"></div>
+						<div class="arrow arrow_down" id="rearDirAway"></div>
+					</div>
+				</div>
 			</div>
 
-			<div class="panel_right_side"></div>
+			<div class="panel_side panel_right"></div>
 		</div>
     </body>
 </html>
\ No newline at end of file