diff --git a/images/bgCoverLoginMdUp.jpeg b/images/bgCoverLoginMdUp.jpeg
new file mode 100644
index 0000000..5aa5571
Binary files /dev/null and b/images/bgCoverLoginMdUp.jpeg differ
diff --git a/images/loginBgPhone.png b/images/loginBgPhone.png
new file mode 100644
index 0000000..9393802
Binary files /dev/null and b/images/loginBgPhone.png differ
diff --git a/images/logo.png b/images/logo.png
new file mode 100644
index 0000000..3d175e9
Binary files /dev/null and b/images/logo.png differ
diff --git a/images/logoServer.png b/images/logoServer.png
new file mode 100644
index 0000000..9ebfc5f
Binary files /dev/null and b/images/logoServer.png differ
diff --git a/images/xloginbg.png b/images/xloginbg.png
new file mode 100644
index 0000000..cdeadf6
Binary files /dev/null and b/images/xloginbg.png differ
diff --git a/v1/index.html b/v1/index.html
index 7e38f68..753c3c6 100644
--- a/v1/index.html
+++ b/v1/index.html
@@ -1,15 +1,133 @@
 <!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>
-  </head>
-  <body>
-    <h1 class="text-3xl">Setting Project Awal</h1>
-  </body>
+
+<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>
+</head>
+
+<body>
+  <!-- wrapper -->
+  <div class=" lg:bg-white shadow-lg">
+    <!-- Screen phone & tablet start-->
+    <div class="relative w-full
+      bg-cover bg-center h-screen
+      lg:hidden">
+      <img src="../images/loginBgPhone.png" class="w-full h-full object-cover">
+      <!-- logo & title start -->
+      <img src="../images/logoServer.png" class="absolute top-28 left-1/2 mt-10 
+        transform -translate-x-1/2 object-contain
+        mb-3" />
+      <div class="absolute top-32 left-1/2 mt-21
+        transform -translate-x-1/2 object-contain">
+        <h2 class="text-3xl font-bold text-white">Log in to your</h2>
+        <h2 class="text-3xl font-bold text-white text-center">Account</h2>
+      </div>
+      <!-- logo & title end -->
+      <!-- inputan username -->
+      <div class="absolute top-77 w-full object-contain px-10 mt-2">
+        <input class="shadow appearance-none rounded-xl border-[#D9D9D9] w-full h-16 py-2 px-3 text-gray-700 leading-tight
+      outline-[#D9D9D9] bg-white
+      focus:outline-[#2196F3] focus:shadow-outline" id="username" type="text" placeholder="Username">
+      </div>
+      <!-- inputan password -->
+      <div class="absolute top-98 w-full object-contain px-10 mt-2">
+        <input class="shadow appearance-none rounded-xl border-[#D9D9D9] w-full h-16 py-2 px-3 text-gray-700 leading-tight 
+        outline-[#D9D9D9] bg-white
+        focus:outline-[#2196F3] focus:shadow-outline" id="password" type="password" placeholder="Password">
+      </div>
+      <!-- remember me & password -->
+      <div class="absolute top-120 flex justify-between w-full object-contain px-10 mt-2">
+        <div class="flex items-center space-x-2">
+          <input type="checkbox" class="size-4" /> <label
+            class="lg:text-[1.9vh] xl:text-[2vh] 2xl:text-[1.8vh] text-[#6C7278] font-medium text-center">Remember
+            me</label>
+        </div>
+        <div>
+          <a href="#"
+            class="lg:text-[1.9vh] xl:text-[2vh] 2xl:text-[1.8vh] text-[#2196F3] font-semibold items-end">Forgot
+            Password ?</a>
+        </div>
+      </div>
+      <!-- btn login -->
+      <div class="absolute top-140 flex justify-between w-full object-contain px-10 mt-2">
+        <button
+          class="w-full h-16 bg-[#1D61E7] hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-xl focus:outline-none focus:shadow-outline"
+          type="button">
+          Login
+        </button>
+      </div>
+    </div>
+    <!-- Screen hone & tablet end -->
+    <!-- Screen lg up start -->
+    <div class="hidden lg:grid grid-cols-2 h-screen">
+      <!-- kiri -->
+      <div class="bg-[#F0F2F5] shadow-lg text-center">
+        <!-- wrapper box -->
+        <div class="mt-14">
+          <!-- paling luar -->
+          <!-- logo start -->
+          <div class="mt-3 ml-14 flex items-center space-x-2">
+            <img src="../images/logoServer.png" class="mr-3">
+            <p class="lg:text-[2.5vh] xl:text-[3vh] text-[#2196F3] font-normal">Port Server</p>
+          </div>
+          <!-- logo end -->
+          <!-- form login start -->
+          <div class="lg:px-24 lg:py-12 xl:px-32 xl:py-16 2xl:px-40 2xl:py-16">
+            <!-- welcome text -->
+            <h2 class="lg:text-[4vh] xl:text-[5vh] 2xl:text-[6vh] font-semibold mb-2">Welcome Back</h2>
+            <!-- Log in into your account -->
+            <p class="lg:text-[2vh] xl:text-[2.5vh] font-normal mb-16">Log in into your account</p>
+
+            <!-- inputan username -->
+            <div class="mb-9">
+              <input class="shadow appearance-none rounded-xl border-[#D9D9D9] w-full h-16 py-2 px-3 text-gray-700 leading-tight
+                  outline-[#D9D9D9] bg-white
+                  focus:outline-blue-400 focus:shadow-outline" id="username" type="text" placeholder="Username">
+            </div>
+            <!-- inputan password -->
+            <div class="mb-4">
+              <input class="shadow appearance-none rounded-xl border-[#D9D9D9] w-full h-16 py-2 px-3 text-gray-700 leading-tight 
+                  outline-[#D9D9D9] bg-white
+                  focus:outline-blue-400 focus:shadow-outline" id="password" type="password" placeholder="Password">
+            </div>
+            <!-- remember me -->
+            <div class="mb-16 flex justify-between">
+              <div class="flex items-center space-x-2">
+                <input type="checkbox" class="size-4" /> <label
+                  class="lg:text-[1.9vh] xl:text-[2vh] 2xl:text-[1.8vh] text-[#6C7278] font-medium text-center">Remember
+                  me</label>
+              </div>
+              <div>
+                <a href="#"
+                  class="lg:text-[1.9vh] xl:text-[2vh] 2xl:text-[1.8vh] text-[#2196F3] font-semibold items-end">Forgot
+                  Password ?</a>
+              </div>
+
+            </div>
+            <!-- button login -->
+            <button
+              class="w-full h-16 bg-[#2196F3] hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-xl focus:outline-none focus:shadow-outline"
+              type="button">
+              Login
+            </button>
+
+          </div>
+          <!-- form login end -->
+        </div>
+      </div>
+      <!-- kanan -->
+      <div class="hidden lg:inline-block bg-orange-400 ">
+        <img class="object-cover h-full" src="../images/xloginbg.png" />
+      </div>
+    </div>
+    <!-- Screnn lg up end -->
+  </div>
+</body>
+
 </html>
\ No newline at end of file
