diff --git a/src/public/assets/css/styles.css b/src/public/assets/css/styles.css
new file mode 100644
index 0000000..8811cad
--- /dev/null
+++ b/src/public/assets/css/styles.css
@@ -0,0 +1,115 @@
+/* used to prevent ui flicker before vuejs loads */
+[v-cloak] {
+    display: none;
+}
+
+.icon-longfast {
+    background-color: #009016;
+    border-radius: 25px;
+    border: 1px solid #2C2D3C;
+}
+
+.icon-mediumfast {
+    background-color: #326be7; 
+    border-radius: 25px;
+    border: 1px solid #2C2D3C;
+}
+
+.icon-shortslow {
+    background-color: #0077e6;
+    border-radius: 25px;
+    border: 1px solid #2C2D3C;
+}
+
+.icon-mqtt-connected {
+    background-color: #2563eb; /* Change to use same color as disconnected // #16a34a; */
+    border-radius: 25px;
+    border: 1px solid #2C2D3C;
+}
+
+.icon-mqtt-disconnected {
+    background-color: #2563eb;
+    border-radius: 25px;
+    border: 1px solid #2C2D3C;
+}
+
+.icon-offline {
+    background-color: #e2286c;
+    border-radius: 25px;
+    border: 1px solid #2C2D3C;
+}
+
+.icon-position-history {
+    background-color: #a855f7;
+    border-radius: 25px;
+    border: 1px solid #2C2D3C;
+}
+
+.icon-traceroute-start {
+    background-color: #16a34a; /* green */
+    border-radius: 25px;
+    border: 1px solid #2C2D3C;
+}
+
+.icon-traceroute-end {
+    background-color: #dc2626; /* red */
+    border-radius: 25px;
+    border: 1px solid #2C2D3C;
+}
+
+.waypoint-label {
+    font-size: 26px;
+    background-color: transparent;
+}
+
+.link {
+    color: #2563eb;
+}
+
+.link:hover {
+    text-decoration: underline;
+}
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.tooltip .tooltip-text {
+    visibility: hidden;
+    width: 80px;
+    background-color: black;
+    color: #fff;
+    text-align: center;
+    padding: 4px 0;
+    border-radius: 6px;
+    position: absolute;
+    z-index: 10000;
+    top: 100%;
+    left: 50%;
+    margin-top: 8px;
+    margin-left: -40px; /* Use half of the width (120/2 = 60), to center the tooltip */
+}
+
+.tooltip .tooltip-text::after {
+    content: " ";
+    position: absolute;
+    bottom: 100%;  /* At the top of the tooltip */
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent black transparent;
+}
+
+.tooltip:hover .tooltip-text {
+    visibility: visible;
+}
+
+.z-search {
+    z-index: 1001;
+}
+
+.z-sidebar {
+    z-index: 1002;
+}
\ No newline at end of file
diff --git a/src/public/index.html b/src/public/index.html
index 46f5858..cd307b6 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -48,125 +48,8 @@
     <script src="assets/js/chart.js@4.4.2/dist/chart.umd.js"></script>
     <script src="assets/js/chartjs-adapter-moment/chartjs-adapter-moment.js"></script>
 
-    <style>
-
-        /* used to prevent ui flicker before vuejs loads */
-        [v-cloak] {
-            display: none;
-        }
-
-        .icon-longfast {
-            background-color: #009016;
-            border-radius: 25px;
-            border: 1px solid #2C2D3C;
-        }
-
-        .icon-mediumfast {
-            background-color: #326be7; 
-            border-radius: 25px;
-            border: 1px solid #2C2D3C;
-        }
-
-        .icon-shortslow {
-            background-color: #0077e6;
-            border-radius: 25px;
-            border: 1px solid #2C2D3C;
-        }
-
-        .icon-mqtt-connected {
-            background-color: #2563eb; /* Change to use same color as disconnected // #16a34a; */
-            border-radius: 25px;
-            border: 1px solid #2C2D3C;
-        }
-
-        .icon-mqtt-disconnected {
-            background-color: #2563eb;
-            border-radius: 25px;
-            border: 1px solid #2C2D3C;
-        }
-
-        .icon-offline {
-            background-color: #e2286c;
-            border-radius: 25px;
-            border: 1px solid #2C2D3C;
-        }
-
-        .icon-position-history {
-            background-color: #a855f7;
-            border-radius: 25px;
-            border: 1px solid #2C2D3C;
-        }
-
-        .icon-traceroute-start {
-            background-color: #16a34a; /* green */
-            border-radius: 25px;
-            border: 1px solid #2C2D3C;
-        }
-
-        .icon-traceroute-end {
-            background-color: #dc2626; /* red */
-            border-radius: 25px;
-            border: 1px solid #2C2D3C;
-        }
-
-        .waypoint-label {
-            font-size: 26px;
-            background-color: transparent;
-        }
-
-        .link {
-            color: #2563eb;
-        }
-
-        .link:hover {
-            text-decoration: underline;
-        }
-
-        .tooltip {
-            position: relative;
-            display: inline-block;
-        }
-
-        .tooltip .tooltip-text {
-            visibility: hidden;
-            width: 80px;
-            background-color: black;
-            color: #fff;
-            text-align: center;
-            padding: 4px 0;
-            border-radius: 6px;
-            position: absolute;
-            z-index: 10000;
-            top: 100%;
-            left: 50%;
-            margin-top: 8px;
-            margin-left: -40px; /* Use half of the width (120/2 = 60), to center the tooltip */
-        }
-
-        .tooltip .tooltip-text::after {
-            content: " ";
-            position: absolute;
-            bottom: 100%;  /* At the top of the tooltip */
-            left: 50%;
-            margin-left: -5px;
-            border-width: 5px;
-            border-style: solid;
-            border-color: transparent transparent black transparent;
-        }
-
-        .tooltip:hover .tooltip-text {
-            visibility: visible;
-        }
-
-        .z-search {
-            z-index: 1001;
-        }
-
-        .z-sidebar {
-            z-index: 1002;
-        }
-
-    </style>
+    <!-- map css style -->
+    <link rel="stylesheet" href="assets/css/styles.css"/>
 
 </head>
 <body class="h-full bg-gray-200">