diff --git a/public/img/bg-3.jpg b/public/img/bg-3.jpg
new file mode 100644
index 0000000..067c8f8
Binary files /dev/null and b/public/img/bg-3.jpg differ
diff --git a/src/pages/login1.astro b/src/pages/login1.astro
index 3faaf6a..96ceb55 100644
--- a/src/pages/login1.astro
+++ b/src/pages/login1.astro
@@ -1,7 +1,7 @@
 <main>
     <div class="bg-[url(/img/bg-image.jpg)] bg-cover bg-center h-screen">
         <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-            <div class="container mx-auto px-4 max-w-lg py-6 bg-[#00000080] rounded-lg">
+            <div class="container mx-auto px-4 max-w-lg py-6 bg-[#00000080] rounded-lg shadow-[0px 0px 10px 0px] shadow-[#FFF]">
                 <div class="flex flex-col space-y-3 ">
                     <p class="text-2xl font-bold text-[#FFF] ">Welcome Back</p>
                     <p class="text-lg text-[#fff]">Enter your email and password to access your account</p>
diff --git a/src/pages/test.astro b/src/pages/test.astro
index 9b68d33..ec4b57c 100644
--- a/src/pages/test.astro
+++ b/src/pages/test.astro
@@ -1,20 +1,133 @@
-<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
-    <div class="h-[200px] text-center bg-[#f59e0b]">
-        Grid - 1
-    </div>
-    <div class="h-[200px] text-center bg-[#84cc16]">
-        Grid - 2
-    </div>
-    <div class="h-[200px] text-center bg-[#84cc16]">
-        Grid - 3
-    </div>
-    <div class="h-[200px] text-center bg-[#4f46e5]">
-        Grid - 4
-    </div>
-    <div class="h-[200px] text-center bg-[#db2777]">
-        Grid - 5
-    </div>
-    <div class="h-[200px] text-center bg-[#b91c1c]">
-        Grid - 6
+<div
+    class="bg-gradient-to-r from-blue-800 to-blue-600 
+    flex items-center justify-center min-h-screen">
+    <div 
+        class="bg-gray-800 shadow-lg rounded-lg p-6 max-w-sm">
+        <div
+            class="mb-4 text-white text-center text-3xl font-semibold">
+            Calculator
+        </div>
+        <div class="mb-4">
+            <input
+            id="display"
+            class="w-full p-4 text-right bg-black text-green-400 rounded-lg text-3xl"
+            disabled
+            type="text">
+        </div>
+        <div 
+            class="grid grid-cols-4 gap-4">
+            <button
+                class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
+                text-black"
+                    onclick="appendNumber('7')">7
+                </button>
+                <button
+                class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
+                text-black"
+                    onclick="appendNumber('8')">8
+                </button>
+                <button
+                class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
+                text-black"
+                    onclick="appendNumber('9')">9
+                </button>
+                <button
+                class="bg-red-500 p-4 rounded-lg text-xl font-semibold
+                text-black"
+                    onclick="clearDisplay()">C
+                </button>
+                <button
+                class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
+                text-black"
+                    onclick="appendNumber('4')">4
+                </button>
+                <button
+                class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
+                text-black"
+                    onclick="appendNumber('5')">5
+                </button>
+                <button
+                class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
+                text-black"
+                    onclick="appendNumber('6')">6
+                </button>
+                <button
+                class="bg-orange-500 p-4 rounded-lg text-xl font-semibold
+                text-black"
+                    onclick="appendOperator('+')">+
+                </button>
+                <button
+                class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
+                text-black"
+                    onclick="appendNumber('1')">1
+                </button>
+                <button
+                class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
+                text-black"
+                    onclick="appendNumber('2')">2
+                </button>
+                <button
+                class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
+                text-black"
+                    onclick="appendNumber('3')">3
+                </button>
+                <button
+                class="bg-orange-500 p-4 rounded-lg text-xl font-semibold
+                text-black"
+                    onclick="appendOperator('-')">-
+                </button>
+                <button
+                class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
+                text-black"
+                    onclick="appendNumber('0')">0
+                </button>
+                <button
+                class="bg-gray-200 p-4 rounded-lg text-xl font-semibold
+                text-black"
+                    onclick="appendNumber('.')">.
+                </button>
+                <button
+                class="bg-green-500 p-4 rounded-lg text-xl font-semibold
+                text-black"
+                    onclick="calculate()">=
+                </button>
+                <button
+                class="bg-orange-500 p-4 rounded-lg text-xl font-semibold
+                text-black"
+                    onclick="appendOperator('*')">*
+                </button>
+
+                <button
+                class="col-span-4 bg-orange-500 p-4 rounded-lg text-xl font-semibold
+                text-black"
+                    onclick="appendOperator('/')">
+                    &#247;
+                </button>
+        </div>
     </div>
 </div>
+<script is:inline>
+    let displayValue = '';
+
+    function appendNumber(number){
+        displayValue += number;
+        document.getElementById('display').value = displayValue;
+    }
+    function appendOperator(operator){
+        displayValue += operator;
+        document.getElementById('display').value = displayValue;
+    }
+
+    function clearDisplay(){
+        displayValue = '';
+        document.getElementById('display').value = '';
+    }
+    function calculate(){
+        try{
+            displayValue = eval(displayValue);
+            document.getElementById('display').value = displayValue;
+        } catch (error){
+            document.getElementById('display').value = 'Error';
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/pages/test2.astro b/src/pages/test2.astro
index cbb1cbd..703335a 100644
--- a/src/pages/test2.astro
+++ b/src/pages/test2.astro
@@ -1,15 +1,85 @@
-<div>
-    <button onclick="fetchData()">Fetch Data</button>
+<div class="flex items-center justify-center min-h-screen bg-gray-900">
+  <div 
+    class="clock-container relative">
+    <div class="ring"></div>
+    <div 
+      id="time"
+      class="clock-text glow"></div>
+  </div>
 </div>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">
 <script is:inline>
-    function fetchData(){
-        fetch(`https://dummy.restapiexample.com/api/v1/employees`)
-        .then(response => response.json())
-        .then(data => {
-            console.log(data)
-        })
-        .catch(error => {
-            console.error(error)
-        })
+  function updateClock(){
+    const timeElement = document.getElementById('time');
+    const now = new Date();
+    let hours = now.getHours();
+    let minutes = now.getMinutes();
+    let seconds = now.getSeconds();
+
+    hours = hours < 10 ? '0' + hours : hours;
+    minutes = minutes < 10 ? '0' + minutes : minutes;
+    seconds = seconds < 10 ? '0' + seconds : seconds;
+
+    timeElement.innerHTML = `${hours}:${minutes}:${seconds}`;
+  }
+  setInterval(updateClock, 1000);
+  updateClock();
+</script>
+<style>
+  .clock-container {
+    background: radial-gradient(circle at 50%, #ff4081, #d500f9);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    border-radius: 1rem;
+    padding: 2rem;
+    width: 350px;
+    height: 150px;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .clock-text {
+    font-family: 'Roboto', sans-serif;
+    color: #ffffff;
+    font-size: 4rem;
+    letter-spacing: 0.1em;
+    text-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
+  }
+  .glow {
+    animation: glow 1.5s infinite alternate;
+  }
+  @keyframes glow {
+    from {
+      text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
     }
-</script>
\ No newline at end of file
+    to {
+      text-shadow: 0 0 25px rgba(255, 255, 255, 1);
+    }
+  }
+  .ring {
+    position: absolute;
+    border: 2px solid rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    width: 120%;
+    height: 120%;
+    top: -10%;
+    left: -10%;
+    z-index: 0;
+    animation: ring 2s linear infinite;
+  }
+  @keyframes ring {
+    0% {
+      transform: scale(0.8);
+      opacity: 0.6;
+    }
+    50% {
+      transform: scale(1.1);
+      opacity: 0.3;
+    }
+    100% {
+      transform: scale(0.8);
+      opacity: 0.6;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/test3.astro b/src/pages/test3.astro
new file mode 100644
index 0000000..237d3ae
--- /dev/null
+++ b/src/pages/test3.astro
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dark Themed Login Page</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        body {
+            background: url('/img/bg-3.jpg') no-repeat center center;
+            background-size: cover;
+        }
+    </style>
+</head>
+<body class="min-h-screen bg-black  bg-opacity-80 flex justify-center items-center">
+
+    <div class="bg-gray-900/60  bg-opacity-90 shadow-lg rounded-lg w-full max-w-md p-8">
+        <h2 class="text-3xl font-bold text-center text-white mb-6">Welcome Back</h2>
+
+        <div class="flex justify-center mb-8">
+            <img src="https://via.placeholder.com/80" alt="Login Icon" class="w-20 h-20 rounded-full border-4 border-gray-700 shadow-lg">
+        </div>
+
+        <form>
+            <div class="mb-4">
+                <label for="email" class="block text-gray-300 font-medium mb-2">Email</label>
+                <input type="email" id="email" class="bg-transparent w-full px-4 py-2 bg-gray-800 text-gray-300 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-400" placeholder="Enter your email">
+            </div>
+            <div class="mb-6">
+                <label for="password" class="block text-gray-300 font-medium mb-2">Password</label>
+                <input type="password" id="password" class="bg-transparent w-full px-4 py-2 bg-gray-800 text-gray-300 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-400" placeholder="Enter your password">
+            </div>
+            <button class="w-full bg-teal-500 hover:bg-teal-600 text-white font-bold py-2 rounded-lg transition-all duration-200">Login</button>
+        </form>
+
+        <p class="text-center text-gray-400 mt-4">Don't have an account? 
+            <a href="#" class="text-teal-400 hover:underline">Sign up</a>
+        </p>
+    </div>
+
+</body>
+</html>