diff --git a/.gitignore b/.gitignore
index 98bd010..4607e0a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
 csflow/src/cs2dumper/offsets.rs
 csflow/src/cs2dumper/engine2.rs
 csflow/src/cs2dumper/client.rs
+webradar_rewrite
\ No newline at end of file
diff --git a/webradar/index.html b/webradar/index.html
index bb82358..1e70b45 100644
--- a/webradar/index.html
+++ b/webradar/index.html
@@ -4,10 +4,17 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>radarflow</title>
-    <link rel="stylesheet" href="styles.css">
+    <link href="styles.css" rel="stylesheet" type="text/css"/>
 </head>
 <body>
-    <canvas id="canvas"></canvas>
+    <div id="canvasContainer">
+        <div id="settingsHolder">
+            <div class="settings">
+                <button onclick="toggleZoom()">Toggle Zoom</button>
+            </div>
+        </div>
+        <canvas id="canvas"></canvas>
+    </div>
     <script src="script.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/webradar/script.js b/webradar/script.js
index a61ab3c..2812a2b 100644
--- a/webradar/script.js
+++ b/webradar/script.js
@@ -414,3 +414,7 @@ addEventListener("DOMContentLoaded", (e) => {
     console.log(`[radarflow] connecting to ${websocketAddr}`)
     connect()
 });
+
+function toggleZoom() {
+    shouldZoom = !shouldZoom
+}
\ No newline at end of file
diff --git a/webradar/styles.css b/webradar/styles.css
index 8695ad3..eb9453d 100644
--- a/webradar/styles.css
+++ b/webradar/styles.css
@@ -1,17 +1,43 @@
-body {
+body, html {
+    height: 100%;
     margin: 0;
-    overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100vh;
     background-color: #000000; /* Change the background color as needed */
 }
 
+#canvasContainer {
+    aspect-ratio: 1 / 1;
+    width: 100vh; /* Initial half-screen size */
+    position: relative;
+    overflow: hidden;
+    transition: width 0.5s ease; /* Smooth transition */
+    float: left;
+}
+
 canvas {
     width: 100%;
     height: 100%;
-    overflow: hidden;
-    display: block;
-    object-fit: contain;
+}
+
+#settingsHolder {
+    visibility: hidden;
+    position: absolute;
+    top: inherit;
+    left: inherit;
+    width: inherit;
+    height: 20%;
+}
+
+#settingsHolder:hover .settings {
+    opacity: 1;
+}
+
+.settings {
+    visibility: visible;
+    opacity: 0;
+    padding: 10px;
+    background-color: rgba(25, 25, 25, 0.7); /* Semi-transparent white background */
+    transition: opacity 0.3s ease; /* Smooth transition */
 }
\ No newline at end of file
