diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..e69de29
diff --git a/server/package-lock.json b/server/package-lock.json
index 8401c61..213d550 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@ant-design/nextjs-registry": "^1.0.1",
+        "@heroicons/react": "^2.1.5",
         "@radix-ui/react-alert-dialog": "^1.1.1",
         "@radix-ui/react-dialog": "^1.1.1",
         "@radix-ui/react-scroll-area": "^1.1.0",
@@ -2037,6 +2038,14 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.5.tgz",
+      "integrity": "sha512-FuzFN+BsHa+7OxbvAERtgBTNeZpUjgM/MIizfVkSCL2/edriN0Hx/DWRCR//aPYwO5QX/YlgLGXk+E3PcfZwjA==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "dev": true,
@@ -2850,6 +2859,28 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.0.tgz",
+      "integrity": "sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-portal": {
       "version": "1.1.1",
       "license": "MIT",
diff --git a/server/public/log-file.png b/server/public/log-file.png
new file mode 100644
index 0000000..a09390d
Binary files /dev/null and b/server/public/log-file.png differ
diff --git a/server/public/login.png b/server/public/login.png
new file mode 100644
index 0000000..8136d51
Binary files /dev/null and b/server/public/login.png differ
diff --git a/server/src/app/index.css b/server/src/app/index.css
index bc0ea3d..cb26e68 100644
--- a/server/src/app/index.css
+++ b/server/src/app/index.css
@@ -1,69 +1,5 @@
+/* Tailwind CSS styles for the login page */
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
\ No newline at end of file
diff --git a/server/src/app/login/page.tsx b/server/src/app/login/page.tsx
index 3e89d56..6f661b7 100644
--- a/server/src/app/login/page.tsx
+++ b/server/src/app/login/page.tsx
@@ -1,8 +1,10 @@
-import { Button, Input } from "antd";
-import FormItem from "antd/es/form/FormItem";
-import Title from "antd/es/typography/Title";
+import React from 'react';
+import Image from 'next/image';
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
 
-export default function LoginPage() {
+const LoginPage = () => {
     return (
         <div className="p-2 w-[500px]">
             <Title level={2}>Login</Title>
diff --git a/server/src/app/page.tsx b/server/src/app/page.tsx
index c9fd968..41e7085 100644
--- a/server/src/app/page.tsx
+++ b/server/src/app/page.tsx
@@ -22,4 +22,4 @@ export default async function Home() {
       <TaskCalendar />
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/server/src/app/reset-password/page.tsx b/server/src/app/reset-password/page.tsx
new file mode 100644
index 0000000..eb6b2e9
--- /dev/null
+++ b/server/src/app/reset-password/page.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import Image from 'next/image';
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ChevronLeftIcon } from '@heroicons/react/24/outline'; // Import the back icon
+
+const ResetPasswordPage = () => {
+    return (
+        <div className="h-screen flex flex-col md:flex-row bg-white">
+            {/* Left Column with Image */}
+            <div className="relative w-full md:w-1/2 flex items-center justify-center bg-white p-4 md:p-8">
+                {/* Back Icon */}
+                <div className="absolute top-4 left-4">
+                    <button className="p-2 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none">
+                        <ChevronLeftIcon className="h-6 w-6 text-gray-800" />
+                    </button>
+                </div>
+                
+                <Image
+                    src="/login.png" 
+                    alt="Login"
+                    width={370} 
+                    height={50} 
+                    className="object-cover rounded-lg border border-black"
+                />
+                
+                {/* Text Overlay */}
+                <div className="absolute text-center font-bold" style={{ color: '#004AAD', top: '20%', fontSize: '8vw' }}>
+                    <p className="text-lg">
+                        Enhance record-keeping <br />
+                        with the seamless <br />
+                        Modern Digital Logbook.
+                    </p>
+                </div>
+            </div>
+
+            {/* Right Column with Reset Password Form */}
+            <div className="w-full md:w-1/2 flex items-center justify-center bg-white p-4 md:p-8">
+                <Card className="shadow-lg rounded-lg p-6 md:p-8 max-w-md w-full border border-black">
+                    
+                    <div className="flex justify-center mb-4">
+                        <Image
+                            src="/log-file.png" 
+                            width={40} 
+                            height={40} 
+                        />
+                    </div>
+                    <CardHeader>
+                        <CardTitle className="text-2xl font-semibold text-center">
+                            Reset Password
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <form className="flex flex-col" action="/auth/reset-password" method="post">
+                            <div className="mb-4">
+                                <Label className="block text-sm font-medium text-gray-700">
+                                    Current Password
+                                </Label>
+                                <Input
+                                    name="currentPassword"
+                                    placeholder="Enter your current password"
+                                    type="password"
+                                    required
+                                    className="mt-1 block w-full"
+                                />
+                            </div>
+                            <div className="mb-4">
+                                <Label className="block text-sm font-medium text-gray-700">
+                                    New Password
+                                </Label>
+                                <Input
+                                    name="newPassword"
+                                    placeholder="Enter your new password"
+                                    type="password"
+                                    required
+                                    className="mt-1 block w-full"
+                                />
+                            </div>
+                            <div className="mb-4">
+                                <Label className="block text-sm font-medium text-gray-700">
+                                    Confirm New Password
+                                </Label>
+                                <Input
+                                    name="confirmNewPassword"
+                                    placeholder="Confirm your new password"
+                                    type="password"
+                                    required
+                                    className="mt-1 block w-full"
+                                />
+                            </div>
+                            <div className="flex justify-center">
+                                <Button
+                                    type="submit"
+                                    className="w-full py-2 rounded-md bg-[#0000FF] text-white hover:bg-[#0000CC]"
+                                >
+                                    Reset Password
+                                </Button>
+                            </div>
+                        </form>
+                    </CardContent>
+                </Card>
+            </div>
+        </div>
+    );
+};
+
+export default ResetPasswordPage;
diff --git a/server/src/components/ui/card.tsx b/server/src/components/ui/card.tsx
new file mode 100644
index 0000000..afa13ec
--- /dev/null
+++ b/server/src/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/server/src/components/ui/label.tsx b/server/src/components/ui/label.tsx
new file mode 100644
index 0000000..5341821
--- /dev/null
+++ b/server/src/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }