diff --git a/src/api/v1/api.py b/src/api/v1/api.py
index 121142a..114a458 100644
--- a/src/api/v1/api.py
+++ b/src/api/v1/api.py
@@ -56,8 +56,10 @@ async def command(request: Request):
 
     x_val = -data.get("left", 0) + data.get("right", 0)
     y_val = -data.get("down", 0) + data.get("up", 0)
+    rl = data.get("rotateleft", 0)
+    rr = data.get("rotateright", 0)
 
-    ctrl.set_velocity(Position2D(x_val, y_val, 0))
+    ctrl.set_velocity(Position2D(x_val, y_val, rr - rl))
 
     return {"status": "success"}
 
diff --git a/src/ui/v1/package.json b/src/ui/v1/package.json
index e04be1f..eebc031 100644
--- a/src/ui/v1/package.json
+++ b/src/ui/v1/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
diff --git a/src/ui/v1/src/app/page.tsx b/src/ui/v1/src/app/page.tsx
index e8b4a16..a446a82 100644
--- a/src/ui/v1/src/app/page.tsx
+++ b/src/ui/v1/src/app/page.tsx
@@ -1,6 +1,7 @@
 "use client"
 import { useRef, useEffect, useInsertionEffect, useState } from "react";
-import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp } from "react-icons/fa";
+import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp  } from "react-icons/fa";
+import { FaArrowRotateLeft, FaArrowRotateRight } from "react-icons/fa6";
 // @ts-ignore
 import useSound from 'use-sound';
 // @ts-ignore
@@ -46,6 +47,8 @@ export default function Home() {
   const [up, setUp] = useState(0);
   const [right, setRight] = useState(0);
   const [down, setDown] = useState(0);
+  const [rotateleft, setRotateLeft] = useState(0);
+  const [rotateright, setRotateRight] = useState(0);
 
   useInsertionEffect(() => {
     ws.onmessage = (event) => {
@@ -81,18 +84,24 @@ export default function Home() {
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       switch (event.key) {
-        case "ArrowUp":
+        case "w":
           setUp(1);
           break;
-        case "ArrowDown":
+        case "s":
           setDown(1);
           break;
-        case "ArrowLeft":
+        case "a":
           setLeft(1);
           break;
-        case "ArrowRight":
+        case "d":
           setRight(1);
           break;
+        case "q":
+          setRotateLeft(1);
+          break;
+        case "e":
+          setRotateRight(1);
+          break;
         default:
           break;
       }
@@ -108,18 +117,24 @@ export default function Home() {
   useEffect(() => {
     const handleKeyUp = (event: KeyboardEvent) => {
       switch (event.key) {
-        case "ArrowUp":
+        case "w":
           setUp(0);
           break;
-        case "ArrowDown":
+        case "s":
           setDown(0);
           break;
-        case "ArrowLeft":
+        case "a":
           setLeft(0);
           break;
-        case "ArrowRight":
+        case "d":
           setRight(0);
           break;
+        case "q":
+          setRotateLeft(0);
+          break;
+        case "e":
+          setRotateRight(0);
+          break;
         default:
           break;
       }
@@ -142,10 +157,12 @@ export default function Home() {
         left,
         up,
         right,
-        down
+        down,
+        rotateleft,
+        rotateright,
       }),
     });
-  }, [down, left, right, up])
+  }, [down, left, right, up, rotateleft, rotateright])
 
   return (
     <main className="min-h-screen w-full">
@@ -192,21 +209,29 @@ export default function Home() {
             </a>
             <div className="flex flex-col items-center justify-center h-full">
               <div className="mb-10 space-x-10">
+                <button className=" hover:text-white text-3xl text-blue font-bold active:border-none" onClick={playBloop}>
+                  BING
+                </button>
                 <button className=" hover:text-white text-3xl text-blue font-bold active:border-none" onClick={playBong}>
                   BONG
                 </button>
-                <button className=" hover:text-white text-3xl text-blue font-bold active:border-none" onClick={playBloop}>
-                  BLOOP
-                </button>
               </div>
               <div className="grid grid-cols-3 w-1/3">
-                <div className="aspect-square"/>
+                <div className={rotateleft ? "border-green text-green" : "border-blue text-blue"}>
+                  <div className="rounded-[50%] aspect-square flex justify-center items-center">
+                    <FaArrowRotateLeft size={32}/>
+                  </div>
+                </div>
                 <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={rotateright ? "border-green text-green" : "border-blue text-blue"}>
+                  <div className="rounded-[50%] aspect-square flex justify-center items-center">
+                    <FaArrowRotateRight size={32}/>
+                  </div>
+                </div>
                 <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}/>