From 130ce79f17cce9ff17e35f775e471cfc1b9d678d Mon Sep 17 00:00:00 2001
From: Ruben <rubensenpai11@gmail.com>
Date: Mon, 24 Mar 2025 21:11:06 +0100
Subject: [PATCH 1/3] chore: index for icons

---
 .../icons/{Icons.svg => archives.svg}         |  0
 .../icons/{Path.svg => arrowLeft.svg}         |  0
 .../icons/{Path (1).svg => arrowRight.svg}    |  0
 .../icons/{Group.svg => checked.svg}          |  0
 .../icons/{Group (1).svg => cross.svg}        |  0
 src/app/components/icons/index.ts             | 78 +++++++++++++++++++
 .../{Icons (1).svg => notifications.svg}      |  0
 7 files changed, 78 insertions(+)
 rename src/app/components/icons/{Icons.svg => archives.svg} (100%)
 rename src/app/components/icons/{Path.svg => arrowLeft.svg} (100%)
 rename src/app/components/icons/{Path (1).svg => arrowRight.svg} (100%)
 rename src/app/components/icons/{Group.svg => checked.svg} (100%)
 rename src/app/components/icons/{Group (1).svg => cross.svg} (100%)
 create mode 100644 src/app/components/icons/index.ts
 rename src/app/components/icons/{Icons (1).svg => notifications.svg} (100%)

diff --git a/src/app/components/icons/Icons.svg b/src/app/components/icons/archives.svg
similarity index 100%
rename from src/app/components/icons/Icons.svg
rename to src/app/components/icons/archives.svg
diff --git a/src/app/components/icons/Path.svg b/src/app/components/icons/arrowLeft.svg
similarity index 100%
rename from src/app/components/icons/Path.svg
rename to src/app/components/icons/arrowLeft.svg
diff --git a/src/app/components/icons/Path (1).svg b/src/app/components/icons/arrowRight.svg
similarity index 100%
rename from src/app/components/icons/Path (1).svg
rename to src/app/components/icons/arrowRight.svg
diff --git a/src/app/components/icons/Group.svg b/src/app/components/icons/checked.svg
similarity index 100%
rename from src/app/components/icons/Group.svg
rename to src/app/components/icons/checked.svg
diff --git a/src/app/components/icons/Group (1).svg b/src/app/components/icons/cross.svg
similarity index 100%
rename from src/app/components/icons/Group (1).svg
rename to src/app/components/icons/cross.svg
diff --git a/src/app/components/icons/index.ts b/src/app/components/icons/index.ts
new file mode 100644
index 0000000..e10d68c
--- /dev/null
+++ b/src/app/components/icons/index.ts
@@ -0,0 +1,78 @@
+import addIcon from "./add.svg"
+import calendarIcon from "./Calendar Mark.svg"
+import docummentTextIcon from "./document-text.svg"
+import folderIcon from "./Document.svg"
+import editIcon from "./edit-2.svg"
+import gridIcon from "./element-3-white.svg"
+import gridBlueIcon from "./element-3.svg"
+import profilePicture from "./Ellipse 2.svg"
+import eyeIcon from "./eye.svg"
+import eyeSlashIcon from "./eye-slash.svg"
+import checkboxchedIcon from "./checked.svg"
+import crossIcon from "./cross.svg"
+import addBlueIcon from "./icon-add.svg"
+import archivesIcon from "./archives.svg"
+import notificationsIcon from "./notifications.svg"
+import timerIcon from "./Line Duotone.svg"
+import logo from "./Logo Private Docs@2x.svg"
+import logoutRed from "./logout-red.svg"
+import maximizeIcon from "./maximize-3.svg"
+import menuIcon from "./Menu Dots.svg"
+import messagesIcon from "./message.svg"
+import homeIcon from "./NavItem.svg"
+import arrowLeft from "./arrowLeft.svg"
+import arrowRight from "./arrowLeft.svg"
+import filesIcon from "./ph_files.svg"
+import pdfIcon from "./prime_file-pdf.svg"
+import wordIcon from "./prime_file-word.svg"
+import userIcon from "./profile.svg"
+import userGroup from "./profile-2user.svg"
+import userGroupBlue from "./profile-2user-blue.svg"
+import rectanagle from "./Rectangle.svg"
+import searchIcon from "./Search.svg"
+import settingsIcon from "./setting-2.svg"
+import filterIcon from "./setting-3.svg"
+import shareIcon from "./share.svg"
+import starIcon from "./star.svg"
+import arrowUp from "./Vector.svg"
+
+
+export const icons = {
+  addIcon,
+  calendarIcon,
+  docummentTextIcon,
+  folderIcon,
+  editIcon,
+  gridIcon,
+  gridBlueIcon,
+  profilePicture,
+  eyeIcon,
+  eyeSlashIcon,
+  checkboxchedIcon,
+  crossIcon,
+  addBlueIcon,
+  archivesIcon,
+  notificationsIcon,
+  timerIcon,
+  logo,
+  logoutRed,
+  maximizeIcon,
+  menuIcon,
+  messagesIcon,
+  homeIcon,
+  arrowLeft,
+  arrowRight,
+  filesIcon,
+  pdfIcon,
+  wordIcon,
+  userIcon,
+  userGroup,
+  userGroupBlue,
+  rectanagle,
+  searchIcon,
+  settingsIcon,
+  filterIcon,
+  shareIcon,
+  starIcon,
+  arrowUp
+}
\ No newline at end of file
diff --git a/src/app/components/icons/Icons (1).svg b/src/app/components/icons/notifications.svg
similarity index 100%
rename from src/app/components/icons/Icons (1).svg
rename to src/app/components/icons/notifications.svg

From be8e360eb21daacaf8febb18d4cbe78efdf44d40 Mon Sep 17 00:00:00 2001
From: "Orace.A" <orace@intside.com>
Date: Mon, 24 Mar 2025 23:53:55 +0100
Subject: [PATCH 2/3] feat: init default components and feat: implementating
 login page

---
 src/app/(auth)/layout.tsx             | 12 ++++
 src/app/(auth)/login/page.tsx         | 27 ++++++++
 src/app/globals.css                   | 28 ++++++++
 src/components/floatingLabelInput.tsx | 94 +++++++++++++++++++++++++++
 src/components/form/form.tsx          | 31 +++++++++
 src/components/header.tsx             | 17 +++++
 src/components/table/table.tsx        |  5 ++
 src/types/index.ts                    | 19 ++++++
 8 files changed, 233 insertions(+)
 create mode 100644 src/app/(auth)/layout.tsx
 create mode 100644 src/app/(auth)/login/page.tsx
 create mode 100644 src/components/floatingLabelInput.tsx
 create mode 100644 src/components/form/form.tsx
 create mode 100644 src/components/header.tsx
 create mode 100644 src/components/table/table.tsx
 create mode 100644 src/types/index.ts

diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx
new file mode 100644
index 0000000..dc8cace
--- /dev/null
+++ b/src/app/(auth)/layout.tsx
@@ -0,0 +1,12 @@
+import Header from "#/components/header";
+
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+    return(
+        <div className="flex flex-col min-h-screen">
+            <Header /> 
+            <div className="flex flex-1 justify-center items-center">
+                {children}
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
new file mode 100644
index 0000000..8fa888f
--- /dev/null
+++ b/src/app/(auth)/login/page.tsx
@@ -0,0 +1,27 @@
+import Form from "#/components/form/form"
+
+export default function LoginPage() {
+    return(
+        <div>
+            <Form
+                className="bg-white p-2 w-[28rem]"
+                fields={[
+                    {
+                        label: "Email",
+                        name: "email",
+                        type: "email",
+                        placeholder: "Entrer votre email"
+                    },
+                    {
+                        label: "Password",
+                        name: "password", 
+                        type: "password",
+                        placeholder: "Enter votre mot de passe"
+                    }
+                ]}
+                submit={undefined} 
+                child={<button type="submit">Login</button>}
+             />
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index a2dc41e..744cca3 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 
+
 :root {
   --background: #ffffff;
   --foreground: #171717;
@@ -24,3 +25,30 @@ body {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+.input-form {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #d1d5dc;
+  border-radius: 9999px;
+
+  &:focus {
+    outline-color: none;
+  }
+}
+
+.input-label {
+  position: absolute;
+  left: 12px;
+  top: -0.45rem;
+  background-color: white;
+  padding-inline: 4px;
+  z-index: 1;
+}
+
+.btn-floating {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+}
\ No newline at end of file
diff --git a/src/components/floatingLabelInput.tsx b/src/components/floatingLabelInput.tsx
new file mode 100644
index 0000000..63cd2d0
--- /dev/null
+++ b/src/components/floatingLabelInput.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import { FloatingLabelInputProps } from '#/types';
+import React, { useState } from 'react';
+
+
+
+export default function FloatingLabelInput({ 
+  label, 
+  placeholder, 
+  type, 
+  options,
+  button,
+  showPasswordToggle = false,
+  name,
+  defaultValue
+}: FloatingLabelInputProps) {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const renderInput = () => {
+    switch(type) {
+      case 'select':
+        return (
+          <div className="relative w-full">
+            <select 
+              className="input-form focus:ring-2 focus:ring-blue-500"
+              required
+              name={name}
+              defaultValue={defaultValue}
+            >
+              {options?.map((option, index) => (
+                <option key={index} value={option}>{option}</option>
+              ))}
+            </select>
+            {button && <div className="btn-floating">{button}</div>}
+          </div>
+        );
+      
+      case 'password':
+        return (
+          <div className="relative w-full">
+            <input
+              name={name}
+              type={showPassword ? "text" : "password"}
+              placeholder={placeholder}
+              className="input-form focus:ring-2 focus:ring-blue-500 pr-10"
+              defaultValue={defaultValue}
+              required
+            />
+            {/* {showPasswordToggle && (
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="btn-floating text-gray-500 hover:text-gray-700 focus:outline-none"
+              >
+                {showPassword ? (
+                  <EyeClosedIcon size={20} />
+                ) : (
+                  <EyeOpenIcon size={20} />
+                )}
+              </button>
+            )} */}
+          </div>
+        );
+      
+      default:
+        return (
+          <div className="relative w-full">
+            <input
+              type={type}
+              placeholder={placeholder}
+              className="input-form focus:ring-2 focus:ring-blue-500"
+              required
+              name={name}
+              defaultValue={defaultValue}
+            />
+            {button && <div className="absolute right-0 top-1/2 transform -translate-y-1/2">{button}</div>}
+          </div>
+        );
+    }
+  };
+
+  return (
+    <div className="relative mb-9">
+      <label 
+        htmlFor={name}
+        className="input-label text-gray-400 text-sm"
+      >
+        {label}
+      </label>
+      {renderInput()}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx
new file mode 100644
index 0000000..abfb5f7
--- /dev/null
+++ b/src/components/form/form.tsx
@@ -0,0 +1,31 @@
+import FloatingLabelInput from "../floatingLabelInput"
+import { FormProps } from "#/types"
+
+export default function Form({
+    fields,
+    submit,
+    className,
+    child
+} : FormProps) {
+    return (
+        <form className={className} onSubmit={submit}>
+            {
+                fields.map((item, index) => (
+                    <FloatingLabelInput 
+                        key={index}
+                        label={item.label} 
+                        name={item.name} 
+                        type={item.type} 
+                        button={item.button}
+                        defaultValue={item.defaultValue}
+                        options={item.options}
+                        placeholder={item.placeholder}
+                        showPasswordToggle={item.showPasswordToggle}
+                    />
+                ))
+            }
+            {child}
+        </form>
+
+    )
+}
\ No newline at end of file
diff --git a/src/components/header.tsx b/src/components/header.tsx
new file mode 100644
index 0000000..e76f5de
--- /dev/null
+++ b/src/components/header.tsx
@@ -0,0 +1,17 @@
+import Image from "next/image";
+
+export default function Header() {
+    return(
+        <div className="w-full bg-white shadow-md py-4">
+            <div className="container mx-auto text-center flex items-center justify-center">
+                <Image 
+                    src="/file.svg"
+                    alt="Private Docs"
+                    width={100}
+                    height={100}
+                    className="text-red-500 h-auto"
+                />
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
new file mode 100644
index 0000000..914c8b8
--- /dev/null
+++ b/src/components/table/table.tsx
@@ -0,0 +1,5 @@
+export default function Table() {
+    return(
+        <></>
+    )
+}
\ No newline at end of file
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..f84ed64
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,19 @@
+import { FormEventHandler, ReactNode } from "react";
+
+export interface FloatingLabelInputProps {
+    label: string;
+    placeholder?: string;
+    type: 'text' | 'password' | 'select' | 'email' | 'number';
+    options?: string[];
+    button?: React.ReactNode;
+    showPasswordToggle?: boolean;
+    name: string;
+    defaultValue?: string;
+}
+
+export interface FormProps {
+    fields: FloatingLabelInputProps[],
+    submit: FormEventHandler<HTMLFormElement> | undefined,
+    className: string,
+    child: ReactNode
+}
\ No newline at end of file

From 3d944825ee1a81bf49b99b4081b7e1d68ce4c865 Mon Sep 17 00:00:00 2001
From: "Orace.A" <orace@intside.com>
Date: Tue, 25 Mar 2025 14:40:49 +0100
Subject: [PATCH 3/3] feat: implementing nextauth config

---
 package.json                                  |   2 +
 pnpm-lock.yaml                                | 136 ++++++++++++++++++
 src/app/(auth)/layout.tsx                     |   2 +-
 src/app/(auth)/login/page.tsx                 |   5 +-
 src/app/api/auth/[...nextauth]/route.ts       |  47 ++++++
 src/app/globals.css                           |   8 ++
 .../icons/Calendar Mark.svg                   |   0
 .../components => assets}/icons/Document.svg  |   0
 .../components => assets}/icons/Ellipse 2.svg |   0
 .../cross.svg => assets/icons/Group (1).svg}  |   0
 .../checked.svg => assets/icons/Group.svg}    |   0
 .../icons/Icons (1).svg}                      |   0
 .../archives.svg => assets/icons/Icons.svg}   |   0
 .../icons/Line Duotone.svg                    |   0
 .../icons/Logo Private Docs@2x.svg            |   0
 .../components => assets}/icons/Menu Dots.svg |   0
 .../components => assets}/icons/NavItem.svg   |   0
 .../icons/Path (1).svg}                       |   0
 .../arrowLeft.svg => assets/icons/Path.svg}   |   0
 .../components => assets}/icons/Rectangle.svg |   0
 .../components => assets}/icons/Search.svg    |   0
 .../components => assets}/icons/Vector.svg    |   0
 src/{app/components => assets}/icons/add.svg  |   0
 src/assets/icons/archives.svg                 |   5 +
 src/assets/icons/arrowLeft.svg                |   3 +
 src/assets/icons/arrowRight.svg               |   3 +
 src/assets/icons/checked.svg                  |   3 +
 src/assets/icons/cross.svg                    |   3 +
 .../icons/document-text.svg                   |   0
 .../components => assets}/icons/edit-2.svg    |   0
 .../icons/element-3-white.svg                 |   0
 .../components => assets}/icons/element-3.svg |   0
 .../components => assets}/icons/eye-slash.svg |   0
 src/{app/components => assets}/icons/eye.svg  |   0
 .../components => assets}/icons/icon-add.svg  |   0
 src/{app/components => assets}/icons/index.ts |   0
 .../icons/logout-red.svg                      |   0
 .../icons/maximize-3.svg                      |   0
 .../components => assets}/icons/message.svg   |   0
 src/assets/icons/notifications.svg            |   5 +
 .../components => assets}/icons/ph_files.svg  |   0
 .../icons/prime_file-pdf.svg                  |   0
 .../icons/prime_file-word.svg                 |   0
 .../icons/profile-2user-blue.svg              |   0
 .../icons/profile-2user.svg                   |   0
 .../components => assets}/icons/profile.svg   |   0
 .../components => assets}/icons/setting-2.svg |   0
 .../components => assets}/icons/setting-3.svg |   0
 .../components => assets}/icons/share.svg     |   0
 src/{app/components => assets}/icons/star.svg |   0
 src/components/form/form.tsx                  |  40 +++---
 src/types/index.ts                            |   1 +
 52 files changed, 244 insertions(+), 19 deletions(-)
 create mode 100644 src/app/api/auth/[...nextauth]/route.ts
 rename src/{app/components => assets}/icons/Calendar Mark.svg (100%)
 rename src/{app/components => assets}/icons/Document.svg (100%)
 rename src/{app/components => assets}/icons/Ellipse 2.svg (100%)
 rename src/{app/components/icons/cross.svg => assets/icons/Group (1).svg} (100%)
 rename src/{app/components/icons/checked.svg => assets/icons/Group.svg} (100%)
 rename src/{app/components/icons/notifications.svg => assets/icons/Icons (1).svg} (100%)
 rename src/{app/components/icons/archives.svg => assets/icons/Icons.svg} (100%)
 rename src/{app/components => assets}/icons/Line Duotone.svg (100%)
 rename src/{app/components => assets}/icons/Logo Private Docs@2x.svg (100%)
 rename src/{app/components => assets}/icons/Menu Dots.svg (100%)
 rename src/{app/components => assets}/icons/NavItem.svg (100%)
 rename src/{app/components/icons/arrowRight.svg => assets/icons/Path (1).svg} (100%)
 rename src/{app/components/icons/arrowLeft.svg => assets/icons/Path.svg} (100%)
 rename src/{app/components => assets}/icons/Rectangle.svg (100%)
 rename src/{app/components => assets}/icons/Search.svg (100%)
 rename src/{app/components => assets}/icons/Vector.svg (100%)
 rename src/{app/components => assets}/icons/add.svg (100%)
 create mode 100644 src/assets/icons/archives.svg
 create mode 100644 src/assets/icons/arrowLeft.svg
 create mode 100644 src/assets/icons/arrowRight.svg
 create mode 100644 src/assets/icons/checked.svg
 create mode 100644 src/assets/icons/cross.svg
 rename src/{app/components => assets}/icons/document-text.svg (100%)
 rename src/{app/components => assets}/icons/edit-2.svg (100%)
 rename src/{app/components => assets}/icons/element-3-white.svg (100%)
 rename src/{app/components => assets}/icons/element-3.svg (100%)
 rename src/{app/components => assets}/icons/eye-slash.svg (100%)
 rename src/{app/components => assets}/icons/eye.svg (100%)
 rename src/{app/components => assets}/icons/icon-add.svg (100%)
 rename src/{app/components => assets}/icons/index.ts (100%)
 rename src/{app/components => assets}/icons/logout-red.svg (100%)
 rename src/{app/components => assets}/icons/maximize-3.svg (100%)
 rename src/{app/components => assets}/icons/message.svg (100%)
 create mode 100644 src/assets/icons/notifications.svg
 rename src/{app/components => assets}/icons/ph_files.svg (100%)
 rename src/{app/components => assets}/icons/prime_file-pdf.svg (100%)
 rename src/{app/components => assets}/icons/prime_file-word.svg (100%)
 rename src/{app/components => assets}/icons/profile-2user-blue.svg (100%)
 rename src/{app/components => assets}/icons/profile-2user.svg (100%)
 rename src/{app/components => assets}/icons/profile.svg (100%)
 rename src/{app/components => assets}/icons/setting-2.svg (100%)
 rename src/{app/components => assets}/icons/setting-3.svg (100%)
 rename src/{app/components => assets}/icons/share.svg (100%)
 rename src/{app/components => assets}/icons/star.svg (100%)

diff --git a/package.json b/package.json
index d1f7d46..43dde4d 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,9 @@
   "dependencies": {
     "@tanstack/react-query": "^5.69.0",
     "axios": "^1.8.4",
+    "jwt-decode": "^4.0.0",
     "next": "15.2.3",
+    "next-auth": "^4.24.11",
     "nextjs-toploader": "^3.8.15",
     "nuqs": "^2.4.1",
     "react": "^19.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 00e6259..205c184 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,9 +14,15 @@ importers:
       axios:
         specifier: ^1.8.4
         version: 1.8.4
+      jwt-decode:
+        specifier: ^4.0.0
+        version: 4.0.0
       next:
         specifier: 15.2.3
         version: 15.2.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.86.0)
+      next-auth:
+        specifier: ^4.24.11
+        version: 4.24.11(next@15.2.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.86.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       nextjs-toploader:
         specifier: ^3.8.15
         version: 3.8.15(next@15.2.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.86.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -73,6 +79,10 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
+  '@babel/runtime@7.27.0':
+    resolution: {integrity: sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==}
+    engines: {node: '>=6.9.0'}
+
   '@emnapi/core@1.3.1':
     resolution: {integrity: sha512-pVGjBIt1Y6gg3EJN8jTcfpP/+uuRksIo055oE/OBkDNcjZqVbfkWCksG1Jp4yZnj3iKWyWX8fdG/j6UDYPbFog==}
 
@@ -318,6 +328,9 @@ packages:
     resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
     engines: {node: '>=12.4.0'}
 
+  '@panva/hkdf@1.2.1':
+    resolution: {integrity: sha512-6oclG6Y3PiDFcoyk8srjLfVKyMfVCKJ27JwNPViuXziFpmdz+MZnZN/aKY0JGXgYuO/VghU0jcOAZgWXZ1Dmrw==}
+
   '@parcel/watcher-android-arm64@2.5.1':
     resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
     engines: {node: '>= 10.0.0'}
@@ -770,6 +783,10 @@ packages:
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+    engines: {node: '>= 0.6'}
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -1277,6 +1294,9 @@ packages:
     resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
 
+  jose@4.15.9:
+    resolution: {integrity: sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -1301,6 +1321,10 @@ packages:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
 
+  jwt-decode@4.0.0:
+    resolution: {integrity: sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==}
+    engines: {node: '>=18'}
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -1390,6 +1414,10 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
+  lru-cache@6.0.0:
+    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
+    engines: {node: '>=10'}
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -1434,6 +1462,20 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  next-auth@4.24.11:
+    resolution: {integrity: sha512-pCFXzIDQX7xmHFs4KVH4luCjaCbuPRtZ9oBUjUhOk84mZ9WVPf94n87TxYI4rSRf9HmfHEF8Yep3JrYDVOo3Cw==}
+    peerDependencies:
+      '@auth/core': 0.34.2
+      next: ^12.2.5 || ^13 || ^14 || ^15
+      nodemailer: ^6.6.5
+      react: ^17.0.2 || ^18 || ^19
+      react-dom: ^17.0.2 || ^18 || ^19
+    peerDependenciesMeta:
+      '@auth/core':
+        optional: true
+      nodemailer:
+        optional: true
+
   next@15.2.3:
     resolution: {integrity: sha512-x6eDkZxk2rPpu46E1ZVUWIBhYCLszmUY6fvHBFcbzJ9dD+qRX6vcHusaqqDlnY+VngKzKbAiG2iRCkPbmi8f7w==}
     engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
@@ -1486,10 +1528,17 @@ packages:
       react-router-dom:
         optional: true
 
+  oauth@0.9.15:
+    resolution: {integrity: sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA==}
+
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
 
+  object-hash@2.2.0:
+    resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==}
+    engines: {node: '>= 6'}
+
   object-inspect@1.13.4:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
@@ -1518,6 +1567,13 @@ packages:
     resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
     engines: {node: '>= 0.4'}
 
+  oidc-token-hash@5.1.0:
+    resolution: {integrity: sha512-y0W+X7Ppo7oZX6eovsRkuzcSM40Bicg2JEJkDJ4irIt1wsYAP5MLSNv+QAogO8xivMffw/9OvV3um1pxXgt1uA==}
+    engines: {node: ^10.13.0 || >=12.0.0}
+
+  openid-client@5.7.1:
+    resolution: {integrity: sha512-jDBPgSVfTnkIh71Hg9pRvtJc6wTwqjRkN88+gCFtYWrlP4Yx2Dsrow8uPi3qLr/aeymPF3o2+dS+wOpglK04ew==}
+
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
@@ -1572,10 +1628,21 @@ packages:
     resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
     engines: {node: ^10 || ^12 || >=14}
 
+  preact-render-to-string@5.2.6:
+    resolution: {integrity: sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==}
+    peerDependencies:
+      preact: '>=10'
+
+  preact@10.26.4:
+    resolution: {integrity: sha512-KJhO7LBFTjP71d83trW+Ilnjbo+ySsaAgCfXOXUlmGzJ4ygYPWmysm77yg4emwfmoz3b22yvH5IsVFHbhUaH5w==}
+
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  pretty-format@3.8.0:
+    resolution: {integrity: sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==}
+
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
@@ -1615,6 +1682,9 @@ packages:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
 
+  regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+
   regexp.prototype.flags@1.5.4:
     resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
     engines: {node: '>= 0.4'}
@@ -1842,6 +1912,10 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  uuid@8.3.2:
+    resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
+    hasBin: true
+
   which-boxed-primitive@1.1.1:
     resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
     engines: {node: '>= 0.4'}
@@ -1867,6 +1941,9 @@ packages:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
 
+  yallist@4.0.0:
+    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
@@ -1878,6 +1955,10 @@ snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
 
+  '@babel/runtime@7.27.0':
+    dependencies:
+      regenerator-runtime: 0.14.1
+
   '@emnapi/core@1.3.1':
     dependencies:
       '@emnapi/wasi-threads': 1.0.1
@@ -2077,6 +2158,8 @@ snapshots:
 
   '@nolyfill/is-core-module@1.0.39': {}
 
+  '@panva/hkdf@1.2.1': {}
+
   '@parcel/watcher-android-arm64@2.5.1':
     optional: true
 
@@ -2535,6 +2618,8 @@ snapshots:
 
   concat-map@0.0.1: {}
 
+  cookie@0.7.2: {}
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -3197,6 +3282,8 @@ snapshots:
 
   jiti@2.4.2: {}
 
+  jose@4.15.9: {}
+
   js-tokens@4.0.0: {}
 
   js-yaml@4.1.0:
@@ -3220,6 +3307,8 @@ snapshots:
       object.assign: 4.1.7
       object.values: 1.2.1
 
+  jwt-decode@4.0.0: {}
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
@@ -3290,6 +3379,10 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
+  lru-cache@6.0.0:
+    dependencies:
+      yallist: 4.0.0
+
   math-intrinsics@1.1.0: {}
 
   merge2@1.4.1: {}
@@ -3323,6 +3416,21 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
+  next-auth@4.24.11(next@15.2.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.86.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      '@babel/runtime': 7.27.0
+      '@panva/hkdf': 1.2.1
+      cookie: 0.7.2
+      jose: 4.15.9
+      next: 15.2.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.86.0)
+      oauth: 0.9.15
+      openid-client: 5.7.1
+      preact: 10.26.4
+      preact-render-to-string: 5.2.6(preact@10.26.4)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      uuid: 8.3.2
+
   next@15.2.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.86.0):
     dependencies:
       '@next/env': 15.2.3
@@ -3369,8 +3477,12 @@ snapshots:
     optionalDependencies:
       next: 15.2.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.86.0)
 
+  oauth@0.9.15: {}
+
   object-assign@4.1.1: {}
 
+  object-hash@2.2.0: {}
+
   object-inspect@1.13.4: {}
 
   object-keys@1.1.1: {}
@@ -3411,6 +3523,15 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
+  oidc-token-hash@5.1.0: {}
+
+  openid-client@5.7.1:
+    dependencies:
+      jose: 4.15.9
+      lru-cache: 6.0.0
+      object-hash: 2.2.0
+      oidc-token-hash: 5.1.0
+
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
@@ -3464,8 +3585,17 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  preact-render-to-string@5.2.6(preact@10.26.4):
+    dependencies:
+      preact: 10.26.4
+      pretty-format: 3.8.0
+
+  preact@10.26.4: {}
+
   prelude-ls@1.2.1: {}
 
+  pretty-format@3.8.0: {}
+
   prop-types@15.8.1:
     dependencies:
       loose-envify: 1.4.0
@@ -3504,6 +3634,8 @@ snapshots:
       get-proto: 1.0.1
       which-builtin-type: 1.2.1
 
+  regenerator-runtime@0.14.1: {}
+
   regexp.prototype.flags@1.5.4:
     dependencies:
       call-bind: 1.0.8
@@ -3819,6 +3951,8 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  uuid@8.3.2: {}
+
   which-boxed-primitive@1.1.1:
     dependencies:
       is-bigint: 1.1.0
@@ -3866,6 +4000,8 @@ snapshots:
 
   word-wrap@1.2.5: {}
 
+  yallist@4.0.0: {}
+
   yocto-queue@0.1.0: {}
 
   zod@3.24.2: {}
diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx
index dc8cace..a38e345 100644
--- a/src/app/(auth)/layout.tsx
+++ b/src/app/(auth)/layout.tsx
@@ -4,7 +4,7 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
     return(
         <div className="flex flex-col min-h-screen">
             <Header /> 
-            <div className="flex flex-1 justify-center items-center">
+            <div className="flex flex-1 justify-center items-center bg-blue-100">
                 {children}
             </div>
         </div>
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
index 8fa888f..bb0ce8a 100644
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -4,7 +4,8 @@ export default function LoginPage() {
     return(
         <div>
             <Form
-                className="bg-white p-2 w-[28rem]"
+                title="Connexion"
+                className="bg-white p-10 shadow-2xl w-3/4 lg:w-lg"
                 fields={[
                     {
                         label: "Email",
@@ -20,7 +21,7 @@ export default function LoginPage() {
                     }
                 ]}
                 submit={undefined} 
-                child={<button type="submit">Login</button>}
+                child={<button type="submit" className="btn-auth">Connexion</button>}
              />
         </div>
     )
diff --git a/src/app/api/auth/[...nextauth]/route.ts b/src/app/api/auth/[...nextauth]/route.ts
new file mode 100644
index 0000000..80aa1f1
--- /dev/null
+++ b/src/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1,47 @@
+import NextAuth, { User } from "next-auth";
+import Credentials from "next-auth/providers/credentials";
+import axios, { AxiosError } from "axios";
+import { jwtDecode } from "jwt-decode";
+
+const handler = NextAuth({
+    providers: [
+        Credentials({
+            credentials: {
+                email: {},
+                password: {},
+            },
+            async authorize(credentials) {
+                let user: User | null = null;
+
+                const response = axios({
+                    method: 'post',
+                    url: 'private-docs-api.intside.co/users/login/',
+                    data: {
+                        email: credentials?.email,
+                        password: credentials?.password,
+                    } 
+                  })
+                  .then(function (response: any) {
+                    const { user_id } = jwtDecode(response.access_token) as {
+                        user_id: string;
+                    };
+
+
+
+                  })
+                  .catch(function (error) {
+                    if (error instanceof AxiosError) {
+                        if (error.status === 401) {
+                          throw new Error("Email ou mot de passe incorrect");
+                        } else {
+                          throw new Error(error.message, error);
+                        }
+                      }
+                      throw new Error("Une erreur est survenue");
+                  });
+            },
+        })
+    ]
+});
+
+export { handler as GET, handler as POST };
diff --git a/src/app/globals.css b/src/app/globals.css
index 744cca3..c20f360 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -51,4 +51,12 @@ body {
   right: 12px;
   top: 50%;
   transform: translateY(-50%);
+}
+
+.btn-auth {
+  border-radius: 9999px;
+  background-color: #246BFD;
+  color: white;
+  width: 100%;
+  padding: 8px;
 }
\ No newline at end of file
diff --git a/src/app/components/icons/Calendar Mark.svg b/src/assets/icons/Calendar Mark.svg
similarity index 100%
rename from src/app/components/icons/Calendar Mark.svg
rename to src/assets/icons/Calendar Mark.svg
diff --git a/src/app/components/icons/Document.svg b/src/assets/icons/Document.svg
similarity index 100%
rename from src/app/components/icons/Document.svg
rename to src/assets/icons/Document.svg
diff --git a/src/app/components/icons/Ellipse 2.svg b/src/assets/icons/Ellipse 2.svg
similarity index 100%
rename from src/app/components/icons/Ellipse 2.svg
rename to src/assets/icons/Ellipse 2.svg
diff --git a/src/app/components/icons/cross.svg b/src/assets/icons/Group (1).svg
similarity index 100%
rename from src/app/components/icons/cross.svg
rename to src/assets/icons/Group (1).svg
diff --git a/src/app/components/icons/checked.svg b/src/assets/icons/Group.svg
similarity index 100%
rename from src/app/components/icons/checked.svg
rename to src/assets/icons/Group.svg
diff --git a/src/app/components/icons/notifications.svg b/src/assets/icons/Icons (1).svg
similarity index 100%
rename from src/app/components/icons/notifications.svg
rename to src/assets/icons/Icons (1).svg
diff --git a/src/app/components/icons/archives.svg b/src/assets/icons/Icons.svg
similarity index 100%
rename from src/app/components/icons/archives.svg
rename to src/assets/icons/Icons.svg
diff --git a/src/app/components/icons/Line Duotone.svg b/src/assets/icons/Line Duotone.svg
similarity index 100%
rename from src/app/components/icons/Line Duotone.svg
rename to src/assets/icons/Line Duotone.svg
diff --git a/src/app/components/icons/Logo Private Docs@2x.svg b/src/assets/icons/Logo Private Docs@2x.svg
similarity index 100%
rename from src/app/components/icons/Logo Private Docs@2x.svg
rename to src/assets/icons/Logo Private Docs@2x.svg
diff --git a/src/app/components/icons/Menu Dots.svg b/src/assets/icons/Menu Dots.svg
similarity index 100%
rename from src/app/components/icons/Menu Dots.svg
rename to src/assets/icons/Menu Dots.svg
diff --git a/src/app/components/icons/NavItem.svg b/src/assets/icons/NavItem.svg
similarity index 100%
rename from src/app/components/icons/NavItem.svg
rename to src/assets/icons/NavItem.svg
diff --git a/src/app/components/icons/arrowRight.svg b/src/assets/icons/Path (1).svg
similarity index 100%
rename from src/app/components/icons/arrowRight.svg
rename to src/assets/icons/Path (1).svg
diff --git a/src/app/components/icons/arrowLeft.svg b/src/assets/icons/Path.svg
similarity index 100%
rename from src/app/components/icons/arrowLeft.svg
rename to src/assets/icons/Path.svg
diff --git a/src/app/components/icons/Rectangle.svg b/src/assets/icons/Rectangle.svg
similarity index 100%
rename from src/app/components/icons/Rectangle.svg
rename to src/assets/icons/Rectangle.svg
diff --git a/src/app/components/icons/Search.svg b/src/assets/icons/Search.svg
similarity index 100%
rename from src/app/components/icons/Search.svg
rename to src/assets/icons/Search.svg
diff --git a/src/app/components/icons/Vector.svg b/src/assets/icons/Vector.svg
similarity index 100%
rename from src/app/components/icons/Vector.svg
rename to src/assets/icons/Vector.svg
diff --git a/src/app/components/icons/add.svg b/src/assets/icons/add.svg
similarity index 100%
rename from src/app/components/icons/add.svg
rename to src/assets/icons/add.svg
diff --git a/src/assets/icons/archives.svg b/src/assets/icons/archives.svg
new file mode 100644
index 0000000..f41aee2
--- /dev/null
+++ b/src/assets/icons/archives.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5 10.72V19.5C19.5 21.5 19 22.5 16.5 22.5H7.5C5 22.5 4.5 21.5 4.5 19.5V10.72" stroke="#9FA8BC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 2.5H19C21 2.5 22 3.5 22 5.5V7.5C22 9.5 21 10.5 19 10.5H5C3 10.5 2 9.5 2 7.5V5.5C2 3.5 3 2.5 5 2.5Z" stroke="#9FA8BC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.1799 14.5H13.8199" stroke="#9FA8BC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/arrowLeft.svg b/src/assets/icons/arrowLeft.svg
new file mode 100644
index 0000000..c96f41d
--- /dev/null
+++ b/src/assets/icons/arrowLeft.svg
@@ -0,0 +1,3 @@
+<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 11L1 6L6 1" stroke="#9FA8BC" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/arrowRight.svg b/src/assets/icons/arrowRight.svg
new file mode 100644
index 0000000..d7902a7
--- /dev/null
+++ b/src/assets/icons/arrowRight.svg
@@ -0,0 +1,3 @@
+<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 11L6 6L1 1" stroke="#9FA8BC" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/checked.svg b/src/assets/icons/checked.svg
new file mode 100644
index 0000000..d303580
--- /dev/null
+++ b/src/assets/icons/checked.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 3C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 4.46957 20.7893 3.96086 20.4142 3.58579C20.0391 3.21071 19.5304 3 19 3H5ZM16.95 9.796C17.1376 9.60849 17.2431 9.35412 17.2432 9.08885C17.2433 8.82358 17.138 8.56914 16.9505 8.3815C16.763 8.19386 16.5086 8.08839 16.2434 8.0883C15.9781 8.0882 15.7236 8.19349 15.536 8.381L10.586 13.331L8.465 11.21C8.37216 11.1171 8.26192 11.0434 8.14059 10.9931C8.01926 10.9428 7.8892 10.9168 7.75785 10.9168C7.49258 10.9167 7.23814 11.022 7.0505 11.2095C6.86286 11.397 6.75739 11.6514 6.7573 11.9166C6.7572 12.1819 6.86249 12.4364 7.05 12.624L9.808 15.382C9.91015 15.4842 10.0314 15.5653 10.1649 15.6206C10.2984 15.6759 10.4415 15.7044 10.586 15.7044C10.7305 15.7044 10.8736 15.6759 11.0071 15.6206C11.1406 15.5653 11.2618 15.4842 11.364 15.382L16.95 9.796Z" fill="#246BFD"/>
+</svg>
diff --git a/src/assets/icons/cross.svg b/src/assets/icons/cross.svg
new file mode 100644
index 0000000..c68ba12
--- /dev/null
+++ b/src/assets/icons/cross.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0091 12.1536L15.3973 17.5357C15.6833 17.8213 16.0711 17.9818 16.4754 17.9818C16.8797 17.9818 17.2675 17.8213 17.5535 17.5357C17.8394 17.2501 18 16.8628 18 16.4589C18 16.055 17.8394 15.6677 17.5535 15.3821L12.1632 10L17.5524 4.61791C17.6939 4.4765 17.8062 4.30863 17.8827 4.12389C17.9593 3.93916 17.9987 3.74117 17.9986 3.54123C17.9986 3.34129 17.9591 3.14332 17.8825 2.95862C17.8058 2.77392 17.6935 2.60611 17.5519 2.46476C17.4104 2.32342 17.2423 2.21131 17.0574 2.13484C16.8724 2.05837 16.6742 2.01904 16.474 2.01909C16.2739 2.01914 16.0757 2.05856 15.8908 2.13512C15.7058 2.21167 15.5378 2.32386 15.3963 2.46527L10.0091 7.84736L4.62088 2.46527C4.48035 2.31981 4.31223 2.20375 4.12632 2.12388C3.94041 2.04401 3.74044 2.00192 3.53807 2.00006C3.3357 1.99821 3.13499 2.03664 2.94764 2.1131C2.7603 2.18955 2.59008 2.30251 2.44691 2.44539C2.30374 2.58826 2.19049 2.75818 2.11377 2.94524C2.03705 3.13229 1.99839 3.33274 2.00005 3.53488C2.00171 3.73702 2.04366 3.9368 2.12345 4.12258C2.20324 4.30835 2.31927 4.47639 2.46477 4.61689L7.85504 10L2.46579 15.3831C2.32028 15.5236 2.20426 15.6917 2.12447 15.8774C2.04468 16.0632 2.00273 16.263 2.00107 16.4651C1.9994 16.6673 2.03806 16.8677 2.11478 17.0548C2.19151 17.2418 2.30476 17.4117 2.44793 17.5546C2.5911 17.6975 2.76132 17.8104 2.94866 17.8869C3.136 17.9634 3.33671 18.0018 3.53908 17.9999C3.74145 17.9981 3.94142 17.956 4.12733 17.8761C4.31324 17.7963 4.48137 17.6802 4.62189 17.5347L10.0091 12.1536Z" fill="#9FA8BC"/>
+</svg>
diff --git a/src/app/components/icons/document-text.svg b/src/assets/icons/document-text.svg
similarity index 100%
rename from src/app/components/icons/document-text.svg
rename to src/assets/icons/document-text.svg
diff --git a/src/app/components/icons/edit-2.svg b/src/assets/icons/edit-2.svg
similarity index 100%
rename from src/app/components/icons/edit-2.svg
rename to src/assets/icons/edit-2.svg
diff --git a/src/app/components/icons/element-3-white.svg b/src/assets/icons/element-3-white.svg
similarity index 100%
rename from src/app/components/icons/element-3-white.svg
rename to src/assets/icons/element-3-white.svg
diff --git a/src/app/components/icons/element-3.svg b/src/assets/icons/element-3.svg
similarity index 100%
rename from src/app/components/icons/element-3.svg
rename to src/assets/icons/element-3.svg
diff --git a/src/app/components/icons/eye-slash.svg b/src/assets/icons/eye-slash.svg
similarity index 100%
rename from src/app/components/icons/eye-slash.svg
rename to src/assets/icons/eye-slash.svg
diff --git a/src/app/components/icons/eye.svg b/src/assets/icons/eye.svg
similarity index 100%
rename from src/app/components/icons/eye.svg
rename to src/assets/icons/eye.svg
diff --git a/src/app/components/icons/icon-add.svg b/src/assets/icons/icon-add.svg
similarity index 100%
rename from src/app/components/icons/icon-add.svg
rename to src/assets/icons/icon-add.svg
diff --git a/src/app/components/icons/index.ts b/src/assets/icons/index.ts
similarity index 100%
rename from src/app/components/icons/index.ts
rename to src/assets/icons/index.ts
diff --git a/src/app/components/icons/logout-red.svg b/src/assets/icons/logout-red.svg
similarity index 100%
rename from src/app/components/icons/logout-red.svg
rename to src/assets/icons/logout-red.svg
diff --git a/src/app/components/icons/maximize-3.svg b/src/assets/icons/maximize-3.svg
similarity index 100%
rename from src/app/components/icons/maximize-3.svg
rename to src/assets/icons/maximize-3.svg
diff --git a/src/app/components/icons/message.svg b/src/assets/icons/message.svg
similarity index 100%
rename from src/app/components/icons/message.svg
rename to src/assets/icons/message.svg
diff --git a/src/assets/icons/notifications.svg b/src/assets/icons/notifications.svg
new file mode 100644
index 0000000..8e3f7c1
--- /dev/null
+++ b/src/assets/icons/notifications.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 9C11.59 9 11.25 8.71843 11.25 8.37888V5.62112C11.25 5.28157 11.59 5 12 5C12.41 5 12.75 5.28157 12.75 5.62112V8.37888C12.75 8.72671 12.41 9 12 9Z" fill="#9FA8BC"/>
+<path d="M12.0161 19.6454C9.61036 19.6454 7.21398 19.2668 4.92949 18.5096C4.08097 18.2326 3.43758 17.6324 3.15785 16.8753C2.87811 16.1181 2.97136 15.2502 3.42825 14.493L4.61246 12.5355C4.87354 12.1015 5.10666 11.289 5.10666 10.7811V8.84208C5.10666 5.06555 8.20237 2 12.0161 2C15.8298 2 18.9255 5.06555 18.9255 8.84208V10.7811C18.9255 11.2797 19.1586 12.1015 19.4197 12.5355L20.6039 14.493C21.0421 15.2132 21.1167 16.072 20.8277 16.8568C20.5386 17.6417 19.9046 18.2419 19.1027 18.5096C16.8182 19.276 14.4218 19.6454 12.0161 19.6454ZM12.0161 3.39427C8.9763 3.39427 6.50532 5.84117 6.50532 8.85131V10.7904C6.50532 11.5383 6.20694 12.6186 5.81531 13.2557L4.63111 15.2225C4.38867 15.6195 4.33273 16.0443 4.47259 16.4136C4.61246 16.783 4.92949 17.06 5.37706 17.2077C9.66631 18.6204 14.3845 18.6204 18.6737 17.2077C19.0747 17.0784 19.3824 16.783 19.5223 16.3951C19.6714 16.0073 19.6248 15.5826 19.4104 15.2225L18.2262 13.265C17.8345 12.6278 17.5361 11.5475 17.5361 10.7996V8.86055C17.5268 5.84117 15.0558 3.39427 12.0161 3.39427Z" fill="#9FA8BC"/>
+<path d="M12 22C10.951 22 9.92157 21.5937 9.17647 20.8919C8.43137 20.1902 8 19.2207 8 18.2327H9.47059C9.47059 18.8605 9.7451 19.47 10.2157 19.9132C10.6863 20.3564 11.3333 20.6149 12 20.6149C13.3922 20.6149 14.5294 19.5438 14.5294 18.2327H16C16 20.3102 14.2059 22 12 22Z" fill="#9FA8BC"/>
+</svg>
diff --git a/src/app/components/icons/ph_files.svg b/src/assets/icons/ph_files.svg
similarity index 100%
rename from src/app/components/icons/ph_files.svg
rename to src/assets/icons/ph_files.svg
diff --git a/src/app/components/icons/prime_file-pdf.svg b/src/assets/icons/prime_file-pdf.svg
similarity index 100%
rename from src/app/components/icons/prime_file-pdf.svg
rename to src/assets/icons/prime_file-pdf.svg
diff --git a/src/app/components/icons/prime_file-word.svg b/src/assets/icons/prime_file-word.svg
similarity index 100%
rename from src/app/components/icons/prime_file-word.svg
rename to src/assets/icons/prime_file-word.svg
diff --git a/src/app/components/icons/profile-2user-blue.svg b/src/assets/icons/profile-2user-blue.svg
similarity index 100%
rename from src/app/components/icons/profile-2user-blue.svg
rename to src/assets/icons/profile-2user-blue.svg
diff --git a/src/app/components/icons/profile-2user.svg b/src/assets/icons/profile-2user.svg
similarity index 100%
rename from src/app/components/icons/profile-2user.svg
rename to src/assets/icons/profile-2user.svg
diff --git a/src/app/components/icons/profile.svg b/src/assets/icons/profile.svg
similarity index 100%
rename from src/app/components/icons/profile.svg
rename to src/assets/icons/profile.svg
diff --git a/src/app/components/icons/setting-2.svg b/src/assets/icons/setting-2.svg
similarity index 100%
rename from src/app/components/icons/setting-2.svg
rename to src/assets/icons/setting-2.svg
diff --git a/src/app/components/icons/setting-3.svg b/src/assets/icons/setting-3.svg
similarity index 100%
rename from src/app/components/icons/setting-3.svg
rename to src/assets/icons/setting-3.svg
diff --git a/src/app/components/icons/share.svg b/src/assets/icons/share.svg
similarity index 100%
rename from src/app/components/icons/share.svg
rename to src/assets/icons/share.svg
diff --git a/src/app/components/icons/star.svg b/src/assets/icons/star.svg
similarity index 100%
rename from src/app/components/icons/star.svg
rename to src/assets/icons/star.svg
diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx
index abfb5f7..39d058f 100644
--- a/src/components/form/form.tsx
+++ b/src/components/form/form.tsx
@@ -5,25 +5,33 @@ export default function Form({
     fields,
     submit,
     className,
-    child
+    child,
+    title
 } : FormProps) {
     return (
         <form className={className} onSubmit={submit}>
-            {
-                fields.map((item, index) => (
-                    <FloatingLabelInput 
-                        key={index}
-                        label={item.label} 
-                        name={item.name} 
-                        type={item.type} 
-                        button={item.button}
-                        defaultValue={item.defaultValue}
-                        options={item.options}
-                        placeholder={item.placeholder}
-                        showPasswordToggle={item.showPasswordToggle}
-                    />
-                ))
-            }
+            <div className="flex justify-center text-black">
+                <p className="text-3xl font-bold">{title}</p>
+            </div>
+
+            <div className="gap-2 mt-2">
+
+                {
+                    fields.map((item, index) => (
+                        <FloatingLabelInput 
+                            key={index}
+                            label={item.label} 
+                            name={item.name} 
+                            type={item.type} 
+                            button={item.button}
+                            defaultValue={item.defaultValue}
+                            options={item.options}
+                            placeholder={item.placeholder}
+                            showPasswordToggle={item.showPasswordToggle}
+                        />
+                    ))
+                }
+            </div>
             {child}
         </form>
 
diff --git a/src/types/index.ts b/src/types/index.ts
index f84ed64..005829e 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -12,6 +12,7 @@ export interface FloatingLabelInputProps {
 }
 
 export interface FormProps {
+    title?: string,
     fields: FloatingLabelInputProps[],
     submit: FormEventHandler<HTMLFormElement> | undefined,
     className: string,