diff --git a/images/avatar.png b/images/avatar.png
new file mode 100644
index 0000000..05e8694
Binary files /dev/null and b/images/avatar.png differ
diff --git a/v1/dashboard.html b/v1/dashboard.html
new file mode 100644
index 0000000..4be7255
--- /dev/null
+++ b/v1/dashboard.html
@@ -0,0 +1,136 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Login XPORT</title>
+    <!-- tailwind cdn -->
+    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
+    <!-- alpine cdn -->
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
+    <!-- material Symbols -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
+</head>
+
+<body>
+    <!-- wrapper -->
+    <div class="bg-[#F2F9FF]">
+        <!-- navbar phone, tablet and desktop up start -->
+        <div class="bg-white" x-data="{ open: false }">
+            <div class="flex justify-between py-5 px-4">
+                <a class="block text-teal-600" href="#">
+                    <span class="sr-only">Home</span>
+                    <div class="flex items-center space-x-2">
+                        <img src="../images/logoServer.png" class="mr-3">
+                        <p class="lg:text-lg xl:text-xl text-[#2196F3] font-normal">Port Server</p>
+                    </div>
+                </a>
+                <!-- menu mobile appear -->
+                <div>
+                    <div x-show="open" class="fixed inset-0 bg-black/50 transition-opacity" @click="open = false"></div>
+
+                    <div x-show="open" x-transition
+                        class="fixed bottom-0 left-0 w-full bg-white p-6 rounded-t-[32px] shadow-lg transform transition-transform duration-300 ease-in-out"
+                        x-bind:class="open ? 'translate-y-0' : 'translate-y-full'">
+                        <ul class="space-y-2">
+                            <li>
+                                <a href="#"
+                                    class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium  text-lg">
+                                    <div class="flex items-center space-x-2 gap-2">
+                                        <span class="material-symbols-outlined text-black/87">
+                                            settings
+                                        </span>
+                                        Setting
+                                    </div>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#"
+                                    class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium  text-lg">
+                                    <div class="flex items-center space-x-2 gap-2">
+                                        <span class="material-symbols-outlined text-black/87">
+                                            edit
+                                        </span>
+                                        Assay
+                                        Format
+                                    </div>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#"
+                                    class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium  text-lg">
+                                    <div class="flex items-center space-x-2 gap-2">
+                                        <span class="material-symbols-outlined text-black/87">
+                                            calculate
+                                        </span>
+                                        Assay
+                                        Calculation
+                                    </div>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#"
+                                    class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium  text-lg">
+                                    <div class="flex items-center space-x-2 gap-2">
+                                        <span class="material-symbols-outlined text-black/87">
+                                            online_prediction
+                                        </span>
+                                        Status
+                                    </div>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#"
+                                    class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium  text-lg">
+                                    <div class="flex items-center space-x-2 gap-2">
+                                        <span class="material-symbols-outlined text-black/87">
+                                            person
+                                        </span>
+                                        Akun
+                                    </div>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <!-- menu mobile appear -->
+                <!-- menu large appear -->
+                <nav aria-label="Global" class="hidden lg:block">
+                    <ul class="flex items-center gap-6 text-sm">
+                        <li>
+                            <a class="text-black/87 font-bold transition hover:text-gray-500/75" href="#"> SETTING </a>
+                        </li>
+                        <li>
+                            <a class="text-black/87 font-bold transition hover:text-gray-500/75" href="#"> ASSAY FORMAT
+                            </a>
+                        </li>
+                        <li>
+                            <a class="text-black/87 font-bold transition hover:text-gray-500/75" href="#"> ASSAY CALC
+                            </a>
+                        </li>
+                        <li>
+                            <a class="text-black/87 font-bold transition hover:text-gray-500/75" href="#"> ONLINE </a>
+                        </li>
+                        <li>
+                            <img src="../images/avatar.png" class="mr-3">
+                        </li>
+                    </ul>
+                </nav>
+                <!-- menu large appear -->
+                <button @click="open = true"
+                    class="block rounded-sm bg-white text-[#2196F3] transition hover:text-gray-600/75 lg:hidden">
+                    <span class="sr-only">Toggle menu</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24"
+                        stroke="currentColor" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+        <!-- navbar phone, tablet and desktop up end -->
+    </div>
+    <!-- wrapper -->
+</body>
+
+</html>
\ No newline at end of file
