diff --git a/src/app.css b/src/app.css
index a28ea1d..61f876c 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,5 +1,6 @@
 @import './styles/base.css';
 @import './styles/publications.css';
+@import './styles/visualize.css';
 
 @layer components {
   /* General */
diff --git a/src/lib/navigator/EventNetwork/Legend.svelte b/src/lib/navigator/EventNetwork/Legend.svelte
index 31661d8..7d27ffa 100644
--- a/src/lib/navigator/EventNetwork/Legend.svelte
+++ b/src/lib/navigator/EventNetwork/Legend.svelte
@@ -28,30 +28,3 @@
     </li>
   </ul>
 </div>
-
-<style>
-  .legend-list {
-    @apply list-disc pl-5 space-y-2 text-gray-800 dark:text-gray-300;
-  }
-
-  .legend-item {
-    @apply flex items-center;
-  }
-
-  .legend-icon {
-    @apply relative w-6 h-6 mr-2;
-  }
-
-  .legend-circle {
-    @apply absolute inset-0 rounded-full border-2 border-black;
-  }
-
-  .legend-circle.content {
-    @apply bg-gray-700 dark:bg-gray-300;
-    background-color: #d6c1a8;
-  }
-
-  .legend-letter {
-    @apply absolute inset-0 flex items-center justify-center text-black text-xs;
-  }
-</style>
\ No newline at end of file
diff --git a/src/styles/visualize.css b/src/styles/visualize.css
new file mode 100644
index 0000000..59360c9
--- /dev/null
+++ b/src/styles/visualize.css
@@ -0,0 +1,26 @@
+@layer components {
+    .legend-list {
+        @apply list-disc pl-5 space-y-2 text-gray-800 dark:text-gray-300;
+    }
+
+    .legend-item {
+        @apply flex items-center;
+    }
+
+    .legend-icon {
+        @apply relative w-6 h-6 mr-2;
+    }
+
+    .legend-circle {
+        @apply absolute inset-0 rounded-full border-2 border-black;
+    }
+
+    .legend-circle.content {
+        @apply bg-gray-700 dark:bg-gray-300;
+        background-color: #d6c1a8;
+    }
+
+    .legend-letter {
+        @apply absolute inset-0 flex items-center justify-center text-black text-xs;
+    }
+}