diff --git a/frontend/src/routes/zesty/+page.svelte b/frontend/src/routes/zesty/+page.svelte
new file mode 100644
index 0000000..3f495e4
--- /dev/null
+++ b/frontend/src/routes/zesty/+page.svelte
@@ -0,0 +1,8 @@
+<script>
+  import Radar from './components/Radar.svelte';
+</script>
+<div class="flex items-center justify-center h-screen bg-gray-900">
+  <Radar />
+</div>
+<style>
+</style>
\ No newline at end of file
diff --git a/frontend/src/routes/zesty/components/Radar.svelte b/frontend/src/routes/zesty/components/Radar.svelte
new file mode 100644
index 0000000..346029f
--- /dev/null
+++ b/frontend/src/routes/zesty/components/Radar.svelte
@@ -0,0 +1,35 @@
+<div class="relative w-64 h-64">
+  <!-- Radar container (invisibile, leggerissimo sfondo) -->
+  <div class="w-full h-full rounded-full bg-transparent border-8 border-cyan-400/10 overflow-hidden ">
+
+    <!-- Sweep beam: leggero, soft -->
+    <div class="absolute inset-0 animate-spin-slow origin-center">
+      <div class="absolute w-2/3 h-full bg-gradient-to-r from-cyan-400 to-transparent opacity-10 rounded-bl-full blur-md"></div>
+    </div>
+
+    <!-- Lancetta centrale -->
+    <div class="absolute inset-0 animate-spin-slower origin-center">
+      <div class="absolute w-2 h-1/2 bg-cyan-400 opacity-80 left-1/2 top-0 transform -translate-x-1/2 rounded-sm"></div>
+    </div>
+  </div>
+
+
+<style>
+  @keyframes spin-slow {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  @keyframes spin-slower {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  .animate-spin-slow {
+    animation: spin-slow 6s linear infinite;
+  }
+
+  .animate-spin-slower {
+    animation: spin-slower 3s linear infinite;
+  }
+</style>