diff --git a/src/ui/v1/package-lock.json b/src/ui/v1/package-lock.json
index 8251d86..2a41a91 100644
--- a/src/ui/v1/package-lock.json
+++ b/src/ui/v1/package-lock.json
@@ -10,7 +10,8 @@
       "dependencies": {
         "next": "14.1.4",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "react-icons": "^5.0.1"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -3836,6 +3837,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
+      "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/src/ui/v1/package.json b/src/ui/v1/package.json
index 160abe9..f31621f 100644
--- a/src/ui/v1/package.json
+++ b/src/ui/v1/package.json
@@ -9,19 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.1.4",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.1.4"
+    "react-icons": "^5.0.1"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.4",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.1.4"
+    "typescript": "^5"
   }
 }
diff --git a/src/ui/v1/src/app/globals.css b/src/ui/v1/src/app/globals.css
index bd6213e..7882a8e 100644
--- a/src/ui/v1/src/app/globals.css
+++ b/src/ui/v1/src/app/globals.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+.text-transparent { 
+    color: transparent !important;
+}
\ No newline at end of file
diff --git a/src/ui/v1/src/app/page.tsx b/src/ui/v1/src/app/page.tsx
index c7fcaf1..f0711fa 100644
--- a/src/ui/v1/src/app/page.tsx
+++ b/src/ui/v1/src/app/page.tsx
@@ -1,5 +1,6 @@
 "use client"
 import { useRef, useEffect, useInsertionEffect, useState } from "react";
+import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp } from "react-icons/fa";
 
 export default function Home() {
   const ws = new WebSocket('ws://localhost:8000/ws');
@@ -96,20 +97,18 @@ export default function Home() {
   }, [])
 
   useEffect(() => {
-    if (left === 1 || up === 1 || right === 1 || down === 1) {
-      fetch('http://localhost:8000/command', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          left,
-          up,
-          right,
-          down
-        }),
-      });
-    }
+    fetch('http://localhost:8000/command', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        left,
+        up,
+        right,
+        down
+      }),
+    });
   }, [down, left, right, up])
 
   return (
@@ -121,7 +120,34 @@ export default function Home() {
           </div>
           <div className="col-span-2 bg-gradient-to-br from-red to-yellow">
             <div className="flex flex-col items-center justify-center h-full">
-              <button
+              <div className="grid grid-cols-3 w-1/3">
+                <div className="aspect-square"/>
+                <div className={up ? "border-green text-green" : "border-blue text-blue"}>
+                  <div className="border-4 rounded-[50%] aspect-square flex justify-center items-center">
+                    <FaArrowUp size={32}/>
+                  </div>
+                </div>
+                <div className="aspect-square"/>
+                <div className={left ? "border-green text-green" : "border-blue text-blue"}>
+                  <div className="border-4 rounded-[50%] aspect-square flex justify-center items-center">
+                    <FaArrowLeft size={32}/>
+                  </div>
+                </div>
+                <div className="aspect-square"/>
+                <div className={right ? "border-green text-green" : "border-blue text-blue"}>
+                  <div className="border-4 rounded-[50%] aspect-square flex justify-center items-center">
+                    <FaArrowRight size={32}/>
+                  </div>
+                </div>
+                <div className="aspect-square"/>
+                <div className={down ? "border-green text-green" : "border-blue text-blue"}>
+                  <div className="border-4 rounded-[50%] aspect-square flex justify-center items-center">
+                    <FaArrowDown size={32}/>
+                  </div>
+                </div>
+                <div className="aspect-square"/>
+              </div>
+              {/* <button
                 className="arrow-button"
                 onClick={() => setDirection("up")}
               >
@@ -144,7 +170,7 @@ export default function Home() {
                 onClick={() => setDirection("right")}
               >
                 Right
-              </button>
+              </button> */}
             </div>
           </div>
         </div>