diff --git a/backend/.gitignore b/backend/.gitignore
index 7af7f04..c814572 100644
--- a/backend/.gitignore
+++ b/backend/.gitignore
@@ -1,2 +1,3 @@
 /node_modules
-.env
\ No newline at end of file
+.env
+.vercel
diff --git a/backend/controllers/auth.js b/backend/controllers/auth.js
index b4249ef..38edf3f 100644
--- a/backend/controllers/auth.js
+++ b/backend/controllers/auth.js
@@ -6,7 +6,7 @@ const client = require("../configs/redis");
 const NodeRSA = require("node-rsa");
 const nodemailer = require("nodemailer");
 const key = new NodeRSA({ b: 1024 });
-const URL = "http://localhost:3300";
+const URL = "https://passman-backend-seven.vercel.app";
 
 // generating accessToken
 const accessTokenGenerator = (user) => {
diff --git a/backend/index.js b/backend/index.js
index 60b8a1d..231e3f5 100644
--- a/backend/index.js
+++ b/backend/index.js
@@ -15,7 +15,7 @@ app.use(express.json());
 app.use(
   cors({
     credentials: true,
-    origin: "http://localhost:3000",
+    origin: "https://passmannn.vercel.app",
   })
 );
 
@@ -23,6 +23,10 @@ app.use("/auth", authRoutes);
 app.use("/pass", passRoutes);
 // app.use("/key", keyRoutes);
 
+app.get("/", (req, res) => {
+  res.send("Backend is running");
+});
+
 const PORT = process.env.PORT || 3300;
 
 mongoose.set("strictQuery", false);
diff --git a/backend/vercel.json b/backend/vercel.json
new file mode 100644
index 0000000..500b4da
--- /dev/null
+++ b/backend/vercel.json
@@ -0,0 +1,20 @@
+{
+  "version": 2,
+  "builds": [
+    {
+      "src": "index.js",
+      "use": "@vercel/node"
+    }
+  ],
+  "routes": [
+    {
+      "src": "/(.*)",
+      "dest": "/index.js"
+    }
+  ],
+  "env": {
+    "DB_URL": "mongodb+srv://yushmanth:S77SdrxaewVbNwjf@cluster0.a3z65xb.mongodb.net/?retryWrites=true&w=majority",
+    "JWT_ACCESS_KEY": "hello world",
+    "JWT_REFRESH_KEY": "HKJSHJDHSAJK ASHKJHSDJKA"
+  }
+}
\ No newline at end of file
diff --git a/frontend/.gitignore b/frontend/.gitignore
index 4d29575..0846f83 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.vercel
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c7a0f71..ec3f0db 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,8 @@
       "name": "router-app",
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -15,11 +17,14 @@
         "axios": "^1.3.2",
         "buffer": "^6.0.3",
         "jwt-decode": "^3.1.2",
+        "lucide-react": "^0.446.0",
         "node-rsa": "^1.1.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^5.3.0",
         "react-router-dom": "^6.8.1",
         "react-scripts": "5.0.1",
+        "react-toastify": "^10.0.5",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
@@ -2202,6 +2207,53 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
+      "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+      "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -5749,6 +5801,15 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -11895,6 +11956,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.446.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.446.0.tgz",
+      "integrity": "sha512-BU7gy8MfBMqvEdDPH79VhOXSEgyG8TSPOKWaExWGCQVqnGH7wGgDngPbofu+KdtVjPQBWbEmnfMTq90CTiiDRg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
@@ -14401,6 +14471,15 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -14516,6 +14595,19 @@
         }
       }
     },
+    "node_modules/react-toastify": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
+      "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 6b63066..da34e80 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -10,11 +12,14 @@
     "axios": "^1.3.2",
     "buffer": "^6.0.3",
     "jwt-decode": "^3.1.2",
+    "lucide-react": "^0.446.0",
     "node-rsa": "^1.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.3.0",
     "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",
+    "react-toastify": "^10.0.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/frontend/public/comp_1.gif b/frontend/public/comp_1.gif
deleted file mode 100644
index 9c9774b..0000000
Binary files a/frontend/public/comp_1.gif and /dev/null differ
diff --git a/frontend/public/hero-vector.png b/frontend/public/hero-vector.png
new file mode 100644
index 0000000..1fe3d45
Binary files /dev/null and b/frontend/public/hero-vector.png differ
diff --git a/frontend/public/index.html b/frontend/public/index.html
index e073fed..aa069f2 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -28,9 +28,6 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="spinner" class="con">
-      <img style="max-width: 30%; height: auto" src="comp_1.gif" />
-    </div>
     <div id="root"></div>
     <!--
       This HTML file is a template.
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 4bb3703..863d92e 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -7,15 +7,17 @@ import {
   Navigate,
 } from "react-router-dom";
 import Home from "./pages/home";
-import AddPassword from "./pages/appPassword";
+import AddPassword from "./pages/addPassword";
 import PrivateKey from "./pages/privateKey";
 import Signin from "./pages/signin";
 import SignUp from "./pages/signup";
 import AllPasswords from "./pages/allPassword";
 import { useEffect, useState } from "react";
-import ProtectedRoute from "./utils/ProtectedRoutes";
+// import ProtectedRoute from "./utils/ProtectedRoutes";
 import EditPassword from "./pages/editPassword";
 import LandingPage from "./pages/landingPage";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css"; // Import the CSS
 
 function App() {
   const [loading, setLoading] = useState(true);
@@ -35,6 +37,18 @@ function App() {
   return (
     <BrowserRouter>
       <main>
+         <ToastContainer 
+          position="top-right"
+          autoClose={5000}
+          hideProgressBar={false}
+          newestOnTop={false}
+          closeOnClick
+          rtl={false}
+          pauseOnFocusLoss
+          draggable
+          pauseOnHover
+          theme="colored"
+        />
         <Routes>
           <Route exact path="/" element={<LandingPage />} />
           <Route
@@ -54,46 +68,46 @@ function App() {
           <Route
             path="/home"
             element={
-              <ProtectedRoute>
+              // <ProtectedRoute>
                 <Home />
-              </ProtectedRoute>
+              // </ProtectedRoute>
             }
           />
           <Route
             path="/privateKey"
             element={
-              <ProtectedRoute>
+              // <ProtectedRoute>
                 <PrivateKey
                   setPrivateKey={setPrivateKey}
                   privateKey={privateKey}
                 />
-              </ProtectedRoute>
+              // </ProtectedRoute>
             }
           />
           <Route
             path="/addPassword"
             element={
-              <ProtectedRoute>
+              // <ProtectedRoute>
                 <AddPassword />
-              </ProtectedRoute>
+              // </ProtectedRoute>
             }
           />
 
           <Route
             path="/editPassword"
             element={
-              <ProtectedRoute>
+              // <ProtectedRoute>
                 <EditPassword privateKey={privateKey} />
-              </ProtectedRoute>
+              // </ProtectedRoute>
             }
           />
 
           <Route
             path="/allPasswords"
             element={
-              <ProtectedRoute>
+              // <ProtectedRoute>
                 <AllPasswords privateKey={privateKey} />
-              </ProtectedRoute>
+              // </ProtectedRoute>
             }
           />
         </Routes>
diff --git a/frontend/src/components/Popup.js b/frontend/src/components/Popup.js
index 9035f77..10fdf1b 100644
--- a/frontend/src/components/Popup.js
+++ b/frontend/src/components/Popup.js
@@ -1,20 +1,18 @@
-import React from "react";
-import { useState } from "react";
+import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
-export default function Modal(props) {
+
+export default function Modal({ handleSignup, privateKey }) {
   const [showModal, setShowModal] = useState(false);
-  const { handleSignup, privateKey } = props;
-  const accessToken = sessionStorage.getItem("access");
   const navigate = useNavigate();
 
   const handleCont = () => {
     setShowModal(false);
     navigate("/home");
   };
-  const onclickSigup = () => {
-    try {
-      handleSignup();
 
+  const onclickSignup = async () => {
+    try {
+      await handleSignup();
       setShowModal(true);
     } catch (err) {
       console.log(err);
@@ -24,55 +22,45 @@ export default function Modal(props) {
   return (
     <>
       <button
-        className="mt-2 w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-600"
+        className="w-full py-3 px-4 text-black bg-white rounded-md transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:ring-offset-2 focus:ring-offset-black"
         type="button"
-        onClick={onclickSigup}
+        onClick={onclickSignup}
       >
-        Signup
+        Sign up
       </button>
-      {showModal ? (
+      {showModal && (
         <>
-          <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
-            <div className="relative w-auto my-6 mx-auto max-w-3xl">
-              {/*content*/}
-              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
-                {/*header*/}
-                <div className=" flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t">
-                  <h3 className="text-3xl">Your Private Key</h3>
-                  <button
-                    className="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
-                    onClick={() => setShowModal(false)}
-                  >
-                    <span className="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
-                      ×
-                    </span>
-                  </button>
-                </div>
-                {/*body*/}
-                <div className="relative p-6 flex-auto">
-                  <div className="my-4 text-slate-500 text-lg leading-relaxed">
-                    Your Private Key is
-                    <p id="privatekeyPopup">{privateKey}</p>
-                    <br />
-                    <p>
-                      Store this private key to access your stored passwords.
-                      This private key can't be recovered later on so we suggest
-                      you to store it somewhere safe.
-                    </p>
+          <div className="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+            <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+              <div className="fixed inset-0 bg-gray-900 bg-opacity-75 transition-opacity backdrop-blur-sm" aria-hidden="true"></div>
+              <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+              <div className="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full animate-modal-appear">
+                <div className="bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <h3 className="text-2xl leading-6 font-semibold text-white mb-4" id="modal-title">
+                        Your Private Key
+                      </h3>
+                      <div className="mt-2">
+                        <p className="text-gray-300 text-lg mb-4">
+                          Your Private Key is:
+                        </p>
+                        <p id="privatekeyPopup" className="text-cyan-400 font-mono break-all my-2 p-3 bg-gray-700 rounded-md">
+                          {privateKey}
+                        </p>
+                        <p className="text-gray-300 mt-4">
+                          Store this private key to access your stored passwords.
+                          This private key can't be recovered later on, so we suggest
+                          you store it somewhere safe.
+                        </p>
+                      </div>
+                    </div>
                   </div>
                 </div>
-                {/*footer*/}
-                <div className="flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b">
-                  {/* <button
-                    className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
-                    type="button"
-                    onClick={() => setShowModal(false)}
-                  >
-                    Close
-                  </button> */}
+                <div className="bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                   <button
-                    className="bg-blue-500 text-white active:bg-blue-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                     type="button"
+                    className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-white text-base font-medium text-black hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-400 sm:ml-3 sm:w-auto sm:text-sm transition-colors duration-200"
                     onClick={handleCont}
                   >
                     Continue
@@ -81,9 +69,8 @@ export default function Modal(props) {
               </div>
             </div>
           </div>
-          <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
         </>
-      ) : null}
+      )}
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/cards.js b/frontend/src/components/cards.js
index 8a93164..115b532 100644
--- a/frontend/src/components/cards.js
+++ b/frontend/src/components/cards.js
@@ -1,7 +1,8 @@
-import axios from "axios";
 import React, { useState } from "react";
+import axios from "axios";
 import jwt_decode from "jwt-decode";
 import { useNavigate } from "react-router-dom";
+
 export default function CardComponent(props) {
   const {
     email,
@@ -12,12 +13,14 @@ export default function CardComponent(props) {
     _id: id,
   } = props.passwordDetailes;
   const { privateKey } = props;
-  const URL = "http://localhost:3300";
+  const URL = "https://passman-backend-seven.vercel.app";
   const accessToken = sessionStorage.getItem("access");
   const [Password, setPassword] = useState("*********");
+  const Navigate = useNavigate();
+  
   axios.defaults.headers.common["authorization"] = "Bearer " + accessToken;
   const reqData = { privateKey };
-  const Navigate = useNavigate();
+  
   const axiosJWT = axios.create();
 
   const handleViewPass = (passId) => {
@@ -35,6 +38,7 @@ export default function CardComponent(props) {
         alert("Invalid private key");
       });
   };
+
   const handleEditPass = (passId) => {
     Navigate(`/editPassword?id=${passId}`);
   };
@@ -47,7 +51,6 @@ export default function CardComponent(props) {
         if (!accessToken) {
           console.log("User unauthorised");
         } else {
-          // console.log(accessToken, "hello");
           sessionStorage.setItem("access", accessToken);
         }
       })
@@ -59,10 +62,9 @@ export default function CardComponent(props) {
   axiosJWT.interceptors.request.use(
     async (config) => {
       let currentDate = new Date();
-      // console.log(sessionStorage.getItem("access"));
       const decodedToken = jwt_decode(sessionStorage.getItem("access"));
       if (decodedToken.exp * 1000 < currentDate.getTime()) {
-        const data = await newTokenGenerator();
+        await newTokenGenerator();
         config.headers["authorization"] =
           "Bearer " + sessionStorage.getItem("access");
       }
@@ -74,47 +76,44 @@ export default function CardComponent(props) {
   );
 
   return (
-    <>
-      <div className="rounded-lg shadow-md lg:max-w-sm" id={id}>
-        <div className="p-8 w-full">
-          <div className="flex ">
-            <svg
-              class="fill-current text-gray-500 w-3 h-3 mr-2 mt-2"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
-            >
-              <path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z" />
-            </svg>
-            <h4 className=" ml-2 text-xl font-semibold tracking-tight text-blue-600">
-              {siteTitle}
-            </h4>
-          </div>
-          <p class="mt-8 mb-4 text-gray-700 text-base">
-            Site URL: {websiteURL}
-          </p>
-          <p class=" text-gray-700 text-base">Username: {userName}</p>
-          <p class="mb-4 text-gray-700 text-base">Password: {Password}</p>
-          <div className="flex justify-end">
-            <button
-              onClick={() => {
-                handleEditPass(id);
-              }}
-              className="px-4 py-2 mr-2 text-sm text-blue-100 bg-blue-500 rounded shadow"
-            >
-              Edit Password
-            </button>
-
-            <button
-              onClick={() => {
-                handleViewPass(id);
-              }}
-              className="px-4 py-2 text-sm text-blue-100 bg-blue-500 rounded shadow"
-            >
-              View Password
-            </button>
-          </div>
+    <div className="bg-black text-white rounded-lg shadow-md lg:max-w-sm border border-gray-800" id={id}>
+      <div className="p-6 w-full">
+        <div className="flex items-center mb-4">
+          <svg
+            className="fill-current text-gray-400 w-4 h-4 mr-2"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+          >
+            <path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z" />
+          </svg>
+          <h4 className="text-xl font-semibold tracking-tight text-blue-400">
+            {siteTitle}
+          </h4>
+        </div>
+        <p className="mb-2 text-gray-300 text-sm">
+          Site URL: <span className="text-white">{websiteURL}</span>
+        </p>
+        <p className="mb-2 text-gray-300 text-sm">
+          Username: <span className="text-white">{userName}</span>
+        </p>
+        <p className="mb-4 text-gray-300 text-sm">
+          Password: <span className="text-white">{Password}</span>
+        </p>
+        <div className="flex justify-end space-x-2">
+          <button
+            onClick={() => handleEditPass(id)}
+            className="px-4 py-2 text-sm text-black bg-blue-400 rounded shadow hover:bg-blue-500 transition duration-300"
+          >
+            Edit Password
+          </button>
+          <button
+            onClick={() => handleViewPass(id)}
+            className="px-4 py-2 text-sm text-black bg-blue-400 rounded shadow hover:bg-blue-500 transition duration-300"
+          >
+            View Password
+          </button>
         </div>
       </div>
-    </>
+    </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/footer.js b/frontend/src/components/footer.js
index 19d6746..00107fe 100644
--- a/frontend/src/components/footer.js
+++ b/frontend/src/components/footer.js
@@ -1,10 +1,61 @@
+import React from "react";
+
 export default function Footer() {
   return (
     <div>
-      <footer className="p-4 bg-blue-500 shadow md:flex md:items-center md:justify-between md:p-6">
-        <span className="text-sm sm:text-center text-white">
-          © 2023 PassMan™. All Rights Reserved.
-        </span>
+      <footer className="p-4 bg-black shadow md:flex md:items-center md:justify-between md:p-6">
+        <div className="flex flex-col md:flex-row items-center justify-between w-full">
+          <span className="text-sm text-white sm:text-center mb-4 md:mb-0">
+            © 2023 PassMan™. All Rights Reserved.
+          </span>
+
+          
+
+          <div className="flex space-x-6">
+            <a
+              href="#"
+              className="text-white hover:text-gray-400"
+              aria-label="Facebook"
+            >
+              <svg
+                className="w-5 h-5"
+                fill="currentColor"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+              >
+                <path d="M22.675 0h-21.35C.595 0 0 .594 0 1.326v21.348C0 23.406.595 24 1.325 24h11.497v-9.294H9.688v-3.622h3.134V8.413c0-3.1 1.893-4.788 4.657-4.788 1.325 0 2.464.099 2.796.143v3.24h-1.918c-1.504 0-1.794.715-1.794 1.762v2.31h3.587l-.467 3.622h-3.12V24h6.116C23.406 24 24 23.406 24 22.674V1.326C24 .595 23.406 0 22.675 0z" />
+              </svg>
+            </a>
+            <a
+              href="#"
+              className="text-white hover:text-gray-400"
+              aria-label="Twitter"
+            >
+              <svg
+                className="w-5 h-5"
+                fill="currentColor"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+              >
+                <path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.608 1.794-1.574 2.163-2.723-.949.555-2.001.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.917 2.2-4.917 4.917 0 .39.045.765.13 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.733-.666 1.581-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.229-.616v.062c0 2.385 1.693 4.374 3.946 4.827-.413.112-.849.171-1.296.171-.314 0-.621-.03-.921-.086.623 1.944 2.432 3.362 4.576 3.403-1.676 1.313-3.791 2.097-6.088 2.097-.395 0-.786-.023-1.17-.067 2.176 1.396 4.764 2.209 7.548 2.209 9.056 0 14.004-7.498 14.004-13.986 0-.21 0-.423-.016-.633.961-.695 1.8-1.562 2.46-2.549z" />
+              </svg>
+            </a>
+            <a
+              href="#"
+              className="text-white hover:text-gray-400"
+              aria-label="LinkedIn"
+            >
+              <svg
+                className="w-5 h-5"
+                fill="currentColor"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+              >
+                <path d="M19 0h-14c-2.75 0-5 2.25-5 5v14c0 2.75 2.25 5 5 5h14c2.75 0 5-2.25 5-5v-14c0-2.75-2.25-5-5-5zm-11.5 20h-3v-11h3v11zm-1.5-12.4c-.966 0-1.75-.784-1.75-1.75s.784-1.75 1.75-1.75c.966 0 1.75.784 1.75 1.75s-.784 1.75-1.75 1.75zm13.5 12.4h-3v-5.5c0-1.104-.896-2-2-2h-1c-1.104 0-2 .896-2 2v5.5h-3v-11h3v1.5h.021c.271-.428.674-.868 1.479-.868 1.188 0 2.5 1.072 2.5 3.5v6.868z" />
+              </svg>
+            </a>
+          </div>
+        </div>
       </footer>
     </div>
   );
diff --git a/frontend/src/components/navbar.js b/frontend/src/components/navbar.js
index fbcaec1..0cb354a 100644
--- a/frontend/src/components/navbar.js
+++ b/frontend/src/components/navbar.js
@@ -1,7 +1,9 @@
+import React, { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 
 export default function Navbar() {
   const navigate = useNavigate();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   const handleLogout = () => {
     sessionStorage.removeItem("access");
@@ -9,79 +11,57 @@ export default function Navbar() {
   };
 
   return (
-    <nav className="bg-white px-2 sm:px-4 py-2.5 fixed w-full z-20 top-0 left-0 border-b border-gray-200">
+    <nav className="bg-black px-2 sm:px-4 py-2.5 fixed w-full z-20 top-0 left-0 border-b border-gray-800">
       <div className="container flex flex-wrap items-center justify-between mx-auto">
         <Link to="/home" className="flex items-center">
           <img
             src="https://flowbite.com/docs/images/logo.svg"
             className="h-6 mr-3 sm:h-9"
             alt="Flowbite Logo"
-          ></img>
-          <span className="self-center text-xl text-gray-500 font-semibold whitespace-nowrap">
+          />
+          <span className="self-center text-xl text-white font-semibold whitespace-nowrap">
             PassMan
           </span>
         </Link>
         <div className="flex md:order-2">
           <button
             onClick={handleLogout}
-            className="text-white bg-blue-500 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0"
+            className="text-black bg-white hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0"
           >
             Logout
           </button>
           <button
-            data-collapse-toggle="navbar-sticky"
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
             type="button"
-            className="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200"
+            className="inline-flex items-center p-2 text-sm text-gray-400 rounded-lg md:hidden hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600"
             aria-controls="navbar-sticky"
-            aria-expanded="false"
+            aria-expanded={isMenuOpen}
           >
-            <path
-              fillRule="evenodd"
-              d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-              clipRule="evenodd"
-            ></path>
+            <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path fillRule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd"></path>
+            </svg>
           </button>
         </div>
         <div
-          className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
+          className={`${
+            isMenuOpen ? "block" : "hidden"
+          } items-center justify-between w-full md:flex md:w-auto md:order-1`}
           id="navbar-sticky"
         >
-          <ul className="flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white">
-            <li>
-              <Link
-                to="/home"
-                className="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0"
-              >
-                Home
-              </Link>
-            </li>
-            <li>
-              <Link
-                to="/allPasswords"
-                className="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0"
-              >
-                All Passwords
-              </Link>
-            </li>
-            <li>
-              <Link
-                to="/addPassword"
-                className="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0"
-              >
-                Add Password
-              </Link>
-            </li>
-            <li>
-              <Link
-                to="/privateKey"
-                className="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0"
-              >
-                Private Key
-              </Link>
-            </li>
+          <ul className="flex flex-col p-4 mt-4 border border-gray-700 rounded-lg bg-gray-800 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-black">
+            {["Home", "All Passwords", "Add Password", "Private Key"].map((item, index) => (
+              <li key={index}>
+                <Link
+                  to={item === "Home" ? "/home" : `/${item.toLowerCase().replace(" ", "")}`}
+                  className="block py-2 pl-3 pr-4 text-gray-300 rounded hover:bg-gray-700 md:hover:bg-transparent md:hover:text-white md:p-0"
+                >
+                  {item}
+                </Link>
+              </li>
+            ))}
           </ul>
         </div>
       </div>
     </nav>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/testimonials.js b/frontend/src/components/testimonials.js
index abb96ab..13d7d91 100644
--- a/frontend/src/components/testimonials.js
+++ b/frontend/src/components/testimonials.js
@@ -1,319 +1,92 @@
+import React from "react";
+
 export default function TestimonialSection() {
   return (
-    <div>
-      <div className="bg-white pt-16 pb-12">
-        <div class="container my-24 px-6 mx-auto">
-          <section class="mb-32 text-gray-800 text-center md:mb-12">
-            <h2 class="text-3xl font-bold mb-12">Testimonials</h2>
+    <div className="bg-gray-900 pt-16 pb-12">
+      <div className="container my-24 px-12 mx-auto">
+        <section className="mb-32 text-gray-300 text-center md:mb-12">
+          <h2 className="text-3xl font-bold mb-12 text-white">Testimonials</h2>
 
-            <div class="grid md:grid-cols-3 gap-x-6  lg:gap-x-12">
-              <div class="mb-12 md:mb-0">
-                <div class="flex justify-center mb-6">
+          {/* Center the testimonials on mobile */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-x-6 lg:gap-x-12 text-center">
+            {[
+              {
+                name: "Joey Tribbiani",
+                role: "Web Developer",
+                image:
+                  "https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg",
+                comment:
+                  "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.",
+                rating: 4.5,
+              },
+              {
+                name: "Rachel Green",
+                role: "Graphic Designer",
+                image:
+                  "https://mdbootstrap.com/img/Photos/Avatars/img%20(2).jpg",
+                comment:
+                  "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid commodi.",
+                rating: 5,
+              },
+              {
+                name: "Chandler Bing",
+                role: "UI/UX Designer",
+                image:
+                  "https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg",
+                comment:
+                  "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.",
+                rating: 4,
+              },
+            ].map((testimonial, index) => (
+              <div
+                key={index}
+                className="mb-12 md:mb-0 flex flex-col items-center"
+              >
+                <div className="flex justify-center mb-6">
                   <img
-                    src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg"
-                    class="rounded-full shadow-lg w-32"
+                    src={testimonial.image}
+                    className="rounded-full shadow-lg w-32"
+                    alt={testimonial.name}
                   />
                 </div>
-                <h5 class="text-lg font-bold mb-4">Joey Tribbiani</h5>
-                <h6 class="font-medium text-blue-600 mb-4">Web Developer</h6>
-                <p class="mb-4">
-                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod
-                  eos id officiis hic tenetur quae quaerat ad velit ab hic
-                  tenetur.
-                </p>
-                <ul class="flex justify-center mb-0">
-                  <li>
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      data-prefix="fas"
-                      data-icon="star"
-                      class="w-4 text-yellow-500"
-                      role="img"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 576 512"
-                    >
-                      <path
-                        fill="currentColor"
-                        d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                      ></path>
-                    </svg>
-                  </li>
-                  <li>
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      data-prefix="fas"
-                      data-icon="star"
-                      class="w-4 text-yellow-500"
-                      role="img"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 576 512"
-                    >
-                      <path
-                        fill="currentColor"
-                        d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                      ></path>
-                    </svg>
-                  </li>
-                  <li>
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      data-prefix="fas"
-                      data-icon="star"
-                      class="w-4 text-yellow-500"
-                      role="img"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 576 512"
-                    >
-                      <path
-                        fill="currentColor"
-                        d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                      ></path>
-                    </svg>
-                  </li>
-                  <li>
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      data-prefix="fas"
-                      data-icon="star"
-                      class="w-4 text-yellow-500"
-                      role="img"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 576 512"
-                    >
-                      <path
-                        fill="currentColor"
-                        d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                      ></path>
-                    </svg>
-                  </li>
-                  <li>
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      data-prefix="fas"
-                      data-icon="star-half-alt"
-                      class="w-4 text-yellow-500"
-                      role="img"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 536 512"
-                    >
-                      <path
-                        fill="currentColor"
-                        d="M508.55 171.51L362.18 150.2 296.77 17.81C290.89 5.98 279.42 0 267.95 0c-11.4 0-22.79 5.9-28.69 17.81l-65.43 132.38-146.38 21.29c-26.25 3.8-36.77 36.09-17.74 54.59l105.89 103-25.06 145.48C86.98 495.33 103.57 512 122.15 512c4.93 0 10-1.17 14.87-3.75l130.95-68.68 130.94 68.7c4.86 2.55 9.92 3.71 14.83 3.71 18.6 0 35.22-16.61 31.66-37.4l-25.03-145.49 105.91-102.98c19.04-18.5 8.52-50.8-17.73-54.6zm-121.74 123.2l-18.12 17.62 4.28 24.88 19.52 113.45-102.13-53.59-22.38-11.74.03-317.19 51.03 103.29 11.18 22.63 25.01 3.64 114.23 16.63-82.65 80.38z"
-                      ></path>
-                    </svg>
-                  </li>
-                </ul>
-              </div>
-              <div class="mb-12 md:mb-0">
-                <div class="flex justify-center mb-6">
-                  <img
-                    src="https://mdbootstrap.com/img/Photos/Avatars/img%20(2).jpg"
-                    class="rounded-full shadow-lg w-32"
-                  />
-                </div>
-                <h5 class="text-lg font-bold mb-4">Rachel Green</h5>
-                <h6 class="font-medium text-blue-600 mb-4">Graphic Designer</h6>
-                <p class="mb-4">
-                  Ut enim ad minima veniam, quis nostrum exercitationem ullam
-                  corporis suscipit laboriosam, nisi ut aliquid commodi.
-                </p>
-                <ul class="flex justify-center mb-0">
-                  <li>
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      data-prefix="fas"
-                      data-icon="star"
-                      class="w-4 text-yellow-500"
-                      role="img"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 576 512"
-                    >
-                      <path
-                        fill="currentColor"
-                        d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                      ></path>
-                    </svg>
-                  </li>
-                  <li>
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      data-prefix="fas"
-                      data-icon="star"
-                      class="w-4 text-yellow-500"
-                      role="img"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 576 512"
-                    >
-                      <path
-                        fill="currentColor"
-                        d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                      ></path>
-                    </svg>
-                  </li>
-                  <li>
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      data-prefix="fas"
-                      data-icon="star"
-                      class="w-4 text-yellow-500"
-                      role="img"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 576 512"
-                    >
-                      <path
-                        fill="currentColor"
-                        d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                      ></path>
-                    </svg>
-                  </li>
-                  <li>
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      data-prefix="fas"
-                      data-icon="star"
-                      class="w-4 text-yellow-500"
-                      role="img"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 576 512"
-                    >
-                      <path
-                        fill="currentColor"
-                        d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                      ></path>
-                    </svg>
-                  </li>
-                  <li>
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      data-prefix="fas"
-                      data-icon="star"
-                      class="w-4 text-yellow-500"
-                      role="img"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 576 512"
-                    >
-                      <path
-                        fill="currentColor"
-                        d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                      ></path>
-                    </svg>
-                  </li>
-                </ul>
-              </div>
-              <div class="mb-0">
-                <div class="flex justify-center mb-6">
-                  <img
-                    src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg"
-                    class="rounded-full shadow-lg w-32"
-                  />
-                </div>
-                <h5 class="text-lg font-bold mb-4">Chandler Bing</h5>
-                <h6 class="font-medium text-blue-600 mb-4">UI/UX Designer</h6>
-                <p class="mb-4">
-                  At vero eos et accusamus et iusto odio dignissimos ducimus qui
-                  blanditiis praesentium voluptatum deleniti atque corrupti.
-                </p>
-                <ul class="flex justify-center mb-0">
-                  <li>
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      data-prefix="fas"
-                      data-icon="star"
-                      class="w-4 text-yellow-500"
-                      role="img"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 576 512"
-                    >
-                      <path
-                        fill="currentColor"
-                        d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                      ></path>
-                    </svg>
-                  </li>
-                  <li>
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      data-prefix="fas"
-                      data-icon="star"
-                      class="w-4 text-yellow-500"
-                      role="img"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 576 512"
-                    >
-                      <path
-                        fill="currentColor"
-                        d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                      ></path>
-                    </svg>
-                  </li>
-                  <li>
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      data-prefix="fas"
-                      data-icon="star"
-                      class="w-4 text-yellow-500"
-                      role="img"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 576 512"
-                    >
-                      <path
-                        fill="currentColor"
-                        d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                      ></path>
-                    </svg>
-                  </li>
-                  <li>
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      data-prefix="fas"
-                      data-icon="star"
-                      class="w-4 text-yellow-500"
-                      role="img"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 576 512"
-                    >
-                      <path
-                        fill="currentColor"
-                        d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
-                      ></path>
-                    </svg>
-                  </li>
-                  <li>
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      data-prefix="far"
-                      data-icon="star"
-                      class="w-4 text-yellow-500"
-                      role="img"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 576 512"
-                    >
-                      <path
-                        fill="currentColor"
-                        d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
-                      ></path>
-                    </svg>
-                  </li>
+
+                <h5 className="text-lg font-bold mb-4 text-white">
+                  {testimonial.name}
+                </h5>
+                <h6 className="font-medium mb-4">
+                  {testimonial.role}
+                </h6>
+                <p className="mb-4">{testimonial.comment}</p>
+
+                <ul className="flex justify-center mb-0">
+                  {[...Array(5)].map((_, i) => (
+                    <li key={i}>
+                      <svg
+                        aria-hidden="true"
+                        focusable="false"
+                        data-prefix="fas"
+                        data-icon="star"
+                        className={`w-4 ${
+                          i < Math.floor(testimonial.rating)
+                            ? "text-yellow-500"
+                            : "text-gray-600"
+                        }`}
+                        role="img"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 576 512"
+                      >
+                        <path
+                          fill="currentColor"
+                          d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+                        ></path>
+                      </svg>
+                    </li>
+                  ))}
                 </ul>
               </div>
-            </div>
-          </section>
-        </div>
+            ))}
+          </div>
+        </section>
       </div>
     </div>
   );
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f4333fd..998f856 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -244,6 +244,7 @@ body {
   }
 
   .grid {
+    margin: 0 auto ;
     grid-template-columns: 1fr;
     margin-bottom: 120px;
     max-width: 320px;
diff --git a/frontend/src/pages/addPassword.js b/frontend/src/pages/addPassword.js
new file mode 100644
index 0000000..102ee2e
--- /dev/null
+++ b/frontend/src/pages/addPassword.js
@@ -0,0 +1,201 @@
+import React, { useState, useEffect } from "react";
+import Navbar from "../components/navbar";
+import { useNavigate } from "react-router-dom";
+import axios from "axios";
+import jwt_decode from "jwt-decode";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+
+const AddPassword = () => {
+  const URL = "https://passman-backend-seven.vercel.app";
+  const [passDetails, setPassDetails] = useState({
+    websiteURL: "",
+    Title: "",
+    username: "",
+    password: "",
+    confirm_password: "",
+  });
+  const navigate = useNavigate();
+  const accessToken = sessionStorage.getItem("access");
+  axios.defaults.withCredentials = true;
+  axios.defaults.headers.common["authorization"] = "Bearer " + accessToken;
+
+  const [isVisible, setIsVisible] = useState(false);
+  const [isVisible2, setIsVisible2] = useState(false);
+
+  const axiosJWT = axios.create();
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setPassDetails((prevDetails) => ({
+      ...prevDetails,
+      [name]: value,
+    }));
+  };
+
+  const handleAddPassword = async (e) => {
+    e.preventDefault();
+    if (passDetails.confirm_password === passDetails.password) {
+      try {
+        const response = await axiosJWT.post(`${URL}/pass/addPass`, passDetails);
+        console.log(response.data);
+        if (response.data.msg === "password stored") {
+          navigate("/allPasswords");
+        }
+      } catch (err) {
+        console.log(err);
+      }
+    } else {
+      alert("Passwords do not match");
+    }
+  };
+
+  const newTokenGenerator = async () => {
+    try {
+      const response = await axios.post(`${URL}/auth/refresh-token`);
+      const { accessToken } = response.data;
+      if (accessToken) {
+        sessionStorage.setItem("access", accessToken);
+      } else {
+        console.log("User unauthorized");
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  useEffect(() => {
+    const axiosRequestInterceptor = axiosJWT.interceptors.request.use(
+      async (config) => {
+        const currentDate = new Date();
+        const decodedToken = jwt_decode(sessionStorage.getItem("access"));
+        if (decodedToken.exp * 1000 < currentDate.getTime()) {
+          await newTokenGenerator();
+        }
+        config.headers["authorization"] = "Bearer " + sessionStorage.getItem("access");
+        return config;
+      },
+      (error) => Promise.reject(error)
+    );
+
+    return () => {
+      axiosJWT.interceptors.request.eject(axiosRequestInterceptor);
+    };
+  }, []);
+
+  return (
+    <div className="min-h-screen w-full bg-black text-white">
+      <Navbar />
+      <div className="container mx-auto px-4 pt-28 pb-8">
+        <form onSubmit={handleAddPassword} className="max-w-2xl">
+          <h1 className="text-3xl font-bold mb-8">Add New Password</h1>
+          <div className="mb-6">
+            <label htmlFor="websiteURL" className="block mb-2 text-sm font-medium text-gray-300">
+              Website URL
+            </label>
+            <input
+              type="text"
+              id="websiteURL"
+              name="websiteURL"
+              value={passDetails.websiteURL}
+              onChange={handleChange}
+              className="bg-gray-800 border border-gray-600 text-gray-300 text-sm rounded-lg block w-full p-2.5 focus:outline-none focus:ring focus:ring-blue-500"
+              placeholder="Ex: passman.com"
+              required
+            />
+          </div>
+          <div className="mb-6">
+            <label htmlFor="Title" className="block mb-2 text-sm font-medium text-gray-300">
+              Title
+            </label>
+            <input
+              type="text"
+              id="Title"
+              name="Title"
+              value={passDetails.Title}
+              onChange={handleChange}
+              className="bg-gray-800 border border-gray-600 text-gray-300 text-sm rounded-lg block w-full p-2.5 focus:outline-none focus:ring focus:ring-blue-500"
+              placeholder="Ex: PassMan"
+              required
+            />
+          </div>
+          <div className="mb-6">
+            <label htmlFor="username" className="block mb-2 text-sm font-medium text-gray-300">
+              Username
+            </label>
+            <input
+              type="text"
+              id="username"
+              name="username"
+              value={passDetails.username}
+              onChange={handleChange}
+              className="bg-gray-800 border border-gray-600 text-gray-300 text-sm rounded-lg block w-full p-2.5 focus:outline-none focus:ring focus:ring-blue-500"
+              placeholder="Ex: Pass@Man"
+              required
+            />
+          </div>
+          <div className="mb-6 relative">
+            <label htmlFor="password" className="block mb-2 text-sm font-medium text-gray-300">
+              Password
+            </label>
+            <input
+              type={isVisible2 ? "text" : "password"}
+              id="password"
+              name="password"
+              value={passDetails.password}
+              onChange={handleChange}
+              className="bg-gray-800 border border-gray-600 text-gray-300 text-sm rounded-lg block w-full p-2.5 focus:outline-none focus:ring focus:ring-blue-500"
+              placeholder="•••••••••"
+              required
+            />
+            <FontAwesomeIcon
+              icon={isVisible2 ? faEyeSlash : faEye}
+              onClick={() => setIsVisible2(!isVisible2)}
+              className="absolute top-10 right-4 cursor-pointer text-gray-400"
+            />
+          </div>
+          <div className="mb-6 relative">
+            <label htmlFor="confirm_password" className="block mb-2 text-sm font-medium text-gray-300">
+              Confirm Password
+            </label>
+            <input
+              type={isVisible ? "text" : "password"}
+              id="confirm_password"
+              name="confirm_password"
+              value={passDetails.confirm_password}
+              onChange={handleChange}
+              className="bg-gray-800 border border-gray-600 text-gray-300 text-sm rounded-lg block w-full p-2.5 focus:outline-none focus:ring focus:ring-blue-500"
+              placeholder="•••••••••"
+              required
+            />
+            <FontAwesomeIcon
+              icon={isVisible ? faEyeSlash : faEye}
+              onClick={() => setIsVisible(!isVisible)}
+              className="absolute top-10 right-4 cursor-pointer text-gray-400"
+            />
+          </div>
+          <div className="mb-6">
+            <label className="flex items-center text-sm font-medium text-gray-300">
+              <input
+                type="checkbox"
+                className="mr-2 w-4 h-4 text-blue-500 border-gray-600 focus:ring-blue-500 focus:ring-2"
+                required
+              />
+              I agree to the terms and conditions
+            </label>
+          </div>
+          <div>
+            <button
+              type="submit"
+              className="text-black bg-white hover:bg-gray-300 focus:ring-4 focus:outline-none focus:ring-blue-500 font-medium rounded-lg text-sm px-5 py-2.5 transition"
+            >
+              Add Password
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default AddPassword;
\ No newline at end of file
diff --git a/frontend/src/pages/allPassword.js b/frontend/src/pages/allPassword.js
index 6ca49f4..424e6c0 100644
--- a/frontend/src/pages/allPassword.js
+++ b/frontend/src/pages/allPassword.js
@@ -1,54 +1,48 @@
 import React, { useEffect, useState } from "react";
-import Navbar from "../components/navbar";
-import CardComponent from "../components/cards";
-import { Link } from "react-router-dom";
 import axios from "axios";
 import jwt_decode from "jwt-decode";
+import { FaLock } from "react-icons/fa";
+import Navbar from "../components/navbar";
+import CardComponent from "../components/cards";
 
-const AllPasswords = (props) => {
-  const URL = "http://localhost:3300";
+const URL = "https://passman-backend-seven.vercel.app";
+
+const AllPasswords = ({ privateKey }) => {
+  const [passwords, setPasswords] = useState([]);
   const accessToken = sessionStorage.getItem("access");
-  const { privateKey } = props;
-  const [Passwords, setPasswords] = useState([]);
   axios.defaults.withCredentials = true;
   axios.defaults.headers.common["authorization"] = "Bearer " + accessToken;
-
   const axiosJWT = axios.create();
 
   useEffect(() => {
     async function fetchData() {
-      await axiosJWT
-        .get(`${URL}/pass/getallpass`)
-        .then((response) => {
-          setPasswords(response.data);
-        })
-        .catch((err) => {
-          console.log(err);
-          if (err.response.data.msg === "jwt expired") {
-            alert("User logged out");
-            sessionStorage.removeItem("access");
-            window.location.reload(false);
-          }
-        });
+      try {
+        const response = await axiosJWT.get(`${URL}/pass/getallpass`);
+        setPasswords(response.data);
+      } catch (err) {
+        console.error(err);
+        if (err.response?.data?.msg === "jwt expired") {
+          alert("User logged out");
+          sessionStorage.removeItem("access");
+          window.location.reload(false);
+        }
+      }
     }
     fetchData();
   }, []);
 
   const newTokenGenerator = async () => {
-    await axios
-      .post(`${URL}/auth/refresh-token`)
-      .then((response) => {
-        const { accessToken } = response.data;
-        if (!accessToken) {
-          console.log("User unauthorised");
-        } else {
-          console.log(accessToken);
-          sessionStorage.setItem("access", accessToken);
-        }
-      })
-      .catch((err) => {
-        console.log(err);
-      });
+    try {
+      const response = await axios.post(`${URL}/auth/refresh-token`);
+      const { accessToken } = response.data;
+      if (!accessToken) {
+        console.log("User unauthorized");
+      } else {
+        sessionStorage.setItem("access", accessToken);
+      }
+    } catch (err) {
+      console.error(err);
+    }
   };
 
   axiosJWT.interceptors.request.use(
@@ -56,9 +50,8 @@ const AllPasswords = (props) => {
       let currentDate = new Date();
       const decodedToken = jwt_decode(sessionStorage.getItem("access"));
       if (decodedToken.exp * 1000 < currentDate.getTime()) {
-        const data = await newTokenGenerator();
-        config.headers["authorization"] =
-          "Bearer " + sessionStorage.getItem("access");
+        await newTokenGenerator();
+        config.headers["authorization"] = "Bearer " + sessionStorage.getItem("access");
       }
       return config;
     },
@@ -68,49 +61,31 @@ const AllPasswords = (props) => {
   );
 
   return (
-    <div className="bg-white">
-      <div className="flex justify-center">
-        <Navbar className="" />
-      </div>
-      <div className="flex justify-center">
-        {/* <button
-          type="button"
-          class="mt-32  text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        >
-          <svg
-            aria-hidden="true"
-            class="w-5 h-5 mr-2 -ml-1"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
-          </svg>
-          Add New Password
-        </button> */}
-      </div>
-      <div className="mt-8 p-16 grid grid-rows-3 grid-flow-row gap-16">
-        {Passwords.map((pass, i) => {
-          return (
-            <CardComponent
-              key={i}
-              passwordDetailes={pass}
-              privateKey={privateKey}
-            />
-          );
-        })}
-      </div>
-      <div>
-        <Link
-          class="fixed z-90 bottom-10 right-8 bg-blue-600 w-20 h-20 rounded-full drop-shadow-lg flex justify-center items-center text-white text-4xl hover:bg-blue-700 hover:drop-shadow-2xl duration-300"
-          href="/addPassword"
-        >
-          {" "}
-          +
-        </Link>
+    <div className="min-h-screen bg-black text-white">
+      <Navbar />
+      <div className="container mx-auto px-4 pt-28 pb-8">
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="text-3xl font-bold text-white">Your Passwords</h1>
+        </div>
+        {passwords.length === 0 ? (
+          <div className="text-center py-60">
+            <FaLock className="text-4xl mx-auto mb-4 text-gray-500" />
+            <p className="text-lg text-gray-400">No passwords saved yet. Add your first password to get started!</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {passwords.map((pass, i) => (
+              <CardComponent
+                key={i}
+                passwordDetailes={pass}
+                privateKey={privateKey}
+              />
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );
 };
 
-export default AllPasswords;
+export default AllPasswords;
\ No newline at end of file
diff --git a/frontend/src/pages/appPassword.js b/frontend/src/pages/appPassword.js
deleted file mode 100644
index e7ce6bd..0000000
--- a/frontend/src/pages/appPassword.js
+++ /dev/null
@@ -1,294 +0,0 @@
-import React, { useState } from "react";
-import Navbar from "../components/navbar";
-import { useNavigate } from "react-router-dom";
-import axios from "axios";
-import jwt_decode from "jwt-decode";
-
-const AddPassword = () => {
-  const URL = "http://localhost:3300";
-  const [passDetailes, setPassDetailes] = useState({});
-  const navigate = useNavigate();
-  const accessToken = sessionStorage.getItem("access");
-  axios.defaults.withCredentials = true;
-  axios.defaults.headers.common["authorization"] = "Bearer " + accessToken;
-  const [isVisible, setIsVisible] = useState(false);
-  const [isVisible2, setIsVisible2] = useState(false);
-
-  const axiosJWT = axios.create();
-
-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    setPassDetailes({
-      ...passDetailes,
-      [name]: value,
-    });
-  };
-
-  const handleAddPassword = async (e) => {
-    e.preventDefault();
-    if (passDetailes.confirm_password === passDetailes.password) {
-      await axiosJWT
-        .post(`${URL}/pass/addPass`, passDetailes)
-        .then((response) => {
-          console.log(response.data);
-          if (response.data.msg === "password stored") {
-            navigate("/allPasswords");
-          }
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    } else {
-      alert("Passwords not same");
-    }
-  };
-
-  const newTokenGenerator = async () => {
-    await axios
-      .post(`${URL}/auth/refresh-token`)
-      .then((response) => {
-        const { accessToken } = response.data;
-        if (!accessToken) {
-          console.log("User unauthorised");
-        } else {
-          console.log(accessToken);
-          sessionStorage.setItem("access", accessToken);
-        }
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
-
-  axiosJWT.interceptors.request.use(
-    async (config) => {
-      let currentDate = new Date();
-      const decodedToken = jwt_decode(sessionStorage.getItem("access"));
-      if (decodedToken.exp * 1000 < currentDate.getTime()) {
-        const data = await newTokenGenerator();
-        config.headers["authorization"] =
-          "Bearer " + sessionStorage.getItem("access");
-      }
-      return config;
-    },
-    (error) => {
-      return Promise.reject(error);
-    }
-  );
-
-  return (
-    <div className="h-screen bg-white">
-      <Navbar className="" />
-      <form onSubmit={handleAddPassword}>
-        <div
-          className="bg-white p-8
-        "
-        >
-          <div class=" mt-20 mb-6">
-            <label
-              for="email"
-              class="block mb-2 ml-1 text-sm font-medium text-gray-900"
-            >
-              Site address
-            </label>
-            <input
-              type="text"
-              id="email"
-              name="websiteURL"
-              value={passDetailes.websiteURL}
-              onChange={handleChange}
-              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
-              placeholder="Ex: passman.com"
-              required
-            />
-          </div>
-          <div class="mb-6">
-            <label
-              for="Title"
-              class="block mb-2 ml-1 text-sm font-medium text-gray-900 "
-            >
-              Site Title
-            </label>
-            <input
-              type="text"
-              id="Title"
-              name="Title"
-              value={passDetailes.Title}
-              onChange={handleChange}
-              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-              placeholder="Ex: PassMan"
-              required
-            />
-          </div>
-
-          <div class="mb-6">
-            <label
-              for="username"
-              class="block mb-2 ml-1 text-sm font-medium text-gray-900 "
-            >
-              Username
-            </label>
-            <input
-              type="text"
-              id="username"
-              name="username"
-              value={passDetailes.username}
-              onChange={handleChange}
-              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-              placeholder="Ex: Pass@Man"
-              required
-            />
-          </div>
-          <div class="mb-6">
-            <label
-              for="password"
-              class="block mb-2 ml-1 text-sm font-medium text-gray-900 "
-            >
-              Password
-            </label>
-            <input
-              type={isVisible2 ? "text" : "password"}
-              id="password"
-              name="password"
-              value={passDetailes.password}
-              onChange={handleChange}
-              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-              placeholder="•••••••••"
-              required
-            />
-            <p
-              onClick={() => {
-                isVisible2 ? setIsVisible2(false) : setIsVisible2(true);
-              }}
-            >
-              {isVisible2 ? (
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  strokeWidth={1.5}
-                  stroke="currentColor"
-                  className="w-6 h-6"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
-                  />
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                  />
-                </svg>
-              ) : (
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  strokeWidth={1.5}
-                  stroke="currentColor"
-                  className="w-6 h-6"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
-                  />
-                </svg>
-              )}
-            </p>
-          </div>
-          <div class="mb-6">
-            <label
-              for="confirm_password"
-              class="block mb-2 ml-1 text-sm font-medium text-gray-900 "
-            >
-              Confirm password
-            </label>
-            <input
-              type={isVisible ? "text" : "password"}
-              id="confirm_password"
-              name="confirm_password"
-              value={passDetailes.confirm_password}
-              onChange={handleChange}
-              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
-              placeholder="•••••••••"
-              required
-            />
-            <p
-              onClick={() => {
-                isVisible ? setIsVisible(false) : setIsVisible(true);
-              }}
-            >
-              {isVisible ? (
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  strokeWidth={1.5}
-                  stroke="currentColor"
-                  className="w-6 h-6"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
-                  />
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                  />
-                </svg>
-              ) : (
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  strokeWidth={1.5}
-                  stroke="currentColor"
-                  className="w-6 h-6"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
-                  />
-                </svg>
-              )}
-            </p>
-          </div>
-
-          <div class="flex items-start mb-6">
-            <div class="flex items-center h-5">
-              <input
-                id="remember"
-                type="checkbox"
-                value=""
-                class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 "
-                required
-              />
-            </div>
-
-            <label
-              for="remember"
-              class="ml-2 text-sm font-medium text-gray-900 "
-            >
-              I agree with the terms and conditions.
-            </label>
-          </div>
-          <div className="flex justify-end">
-            <button
-              type="submit"
-              className="text-white flex flex-col sm:text-center justify-end bg-blue-500 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center "
-            >
-              Add
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-  );
-};
-export default AddPassword;
diff --git a/frontend/src/pages/editPassword.js b/frontend/src/pages/editPassword.js
index 0b2667e..228982f 100644
--- a/frontend/src/pages/editPassword.js
+++ b/frontend/src/pages/editPassword.js
@@ -5,7 +5,7 @@ import axios from "axios";
 import jwt_decode from "jwt-decode";
 
 const EditPassword = (props) => {
-  const URL = "http://localhost:3300";
+  const URL = "https://passman-backend-seven.vercel.app";
   const [passDetailes, setPassDetailes] = useState({});
   const navigate = useNavigate();
   const accessToken = sessionStorage.getItem("access");
@@ -249,7 +249,7 @@ const EditPassword = (props) => {
               name="confirm_password"
               value={passDetailes.confirm_password}
               onChange={handleChange}
-              class="block bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
+              class="block bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 "
               placeholder="•••••••••"
               required
             />
diff --git a/frontend/src/pages/home.js b/frontend/src/pages/home.js
index ff12b5a..c082174 100644
--- a/frontend/src/pages/home.js
+++ b/frontend/src/pages/home.js
@@ -2,71 +2,92 @@ import React from "react";
 import Footer from "../components/footer";
 import Navbar from "../components/navbar";
 import TestimonialSection from "../components/testimonials";
+import { Link } from "react-router-dom";
 
 const Home = () => {
   return (
-    <div>
-      <Navbar className="" />
-
-      <div className="bg-white h-screen flex flex-row">
-        <div className="w-1/2">
-          <h1 className="text-gray-800 mt-24    pt-56 pl-16 pb-4 text-6xl">
+    <div className="bg-black text-white flex flex-col min-h-screen">
+      <Navbar />
+      
+      {/* Hero Section */}
+      <section className="flex flex-col lg:flex-row items-center justify-center lg:justify-between px-4 lg:px-6 py-12 lg:py-24 min-h-[calc(100vh-64px)] container mx-auto">
+        {/* Mobile Image (hidden on larger screens) */}
+        <div className="lg:hidden mb-8">
+          <img
+            src="/hero-vector.png"
+            alt="Secure Password Management"
+            className="max-w-[300px] sm:max-w-[350px] h-auto mx-auto"
+          />
+        </div>
+        
+        {/* Text Content */}
+        <div className="w-full lg:w-1/2 text-center lg:text-left mb-8 lg:mb-0">
+          <h1 className="text-4xl sm:text-5xl lg:text-7xl font-extrabold mb-6">
             PassMan
           </h1>
-          <h3 className="text-gray-700 text-2xl pl-16">
+          <p className="text-gray-300 text-lg sm:text-xl lg:text-2xl mb-8">
             Keep all of your login information safe and secure with our
             state-of-the-art password manager.
-          </h3>
+          </p>
+          <Link
+            className="text-black bg-white hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-300 font-semibold rounded-lg text-sm px-5 py-2.5 text-center"
+          >
+            Add Password
+          </Link>
         </div>
-
-        {/* <div className="bg-white w-1/2">
-          <h1 className="text-gray-800 w-1/2 mt-20 pt-56 pl-16">Hi</h1>
+        
+        {/* Desktop Image (hidden on mobile) */}
+        <div className="hidden lg:flex lg:w-2/5 justify-center">
           <img
-            className="h-48 w-48 mt-20 pt-56 pl-16"
-            src="https://static.vecteezy.com/system/resources/previews/002/223/429/non_2x/banner-design-of-mobile-security-system-with-password-and-smart-protection-technology-illustration-concept-be-used-for-landing-page-template-ui-ux-web-mobile-app-poster-banner-website-free-vector.jpg"
-            alt=""
-            width={500}
-            height={500}
+            src="/hero-vector.png"
+            alt="Secure Password Management"
+            className="max-w-md lg:max-w-full h-auto"
           />
-        </div> */}
-      </div>
-      <div
-        className="bg-white text-gray-600 p-4
-      "
-      >
-        <h1 className="text-center mb-8 text-blue-500 text-4xl font-bold">
-          Why should you use our Password Manager ?
-        </h1>
-        <ul>
-          <li className="list-disc ml-8 ">
-            <span className="font-extrabold text-black">Improved security</span>
-            : Password managers store passwords in an encrypted form, making it
-            much more difficult for hackers to steal them.
-          </li>
-          <li className="list-disc ml-8">
-            <span className="font-extrabold text-black">Convenience</span>:
-            Password managers can automatically generate and store strong,
-            unique passwords, eliminating the need to remember multiple
-            passwords.
-          </li>
-          <li className="list-disc ml-8">
-            <span className="font-extrabold text-black">Peace of mind</span>: By
-            using a password manager, users can ensure that their sensitive
-            information is protected and easily accessible, reducing stress and
-            anxiety about password security.
-          </li>
-          <li className="list-disc ml-8">
-            <span className="font-extrabold text-black">Time-saving</span>:
-            Password managers can automatically log users into websites and
-            applications, saving time and hassle compared to manually entering
-            passwords every time.
-          </li>
-        </ul>
-      </div>
+        </div>
+      </section>
+
+      {/* Why Choose Us Section */}
+      <section className="py-16 bg-black">
+        <div className="max-w-7xl mx-auto px-12 sm:px-6 text-center">
+          <h2 className="text-3xl sm:text-4xl font-bold mb-12">
+            Why Choose PassMan?
+          </h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {[
+              {
+                title: "Improved Security",
+                description: "We encrypt your passwords, making them virtually impossible for hackers to steal."
+              },
+              {
+                title: "Convenience",
+                description: "Manage all your passwords in one place, so you never have to remember multiple passwords again."
+              },
+              {
+                title: "Peace of Mind",
+                description: "Know that your sensitive information is stored securely and easily accessible when needed."
+              },
+              {
+                title: "Time-Saving",
+                description: "Automatically log into websites and apps without entering passwords every time."
+              }
+            ].map((item, index) => (
+              <div key={index} className="p-6 bg-gray-700 rounded-lg shadow-lg transform hover:scale-105 transition duration-300">
+                <h3 className="text-xl font-semibold mb-4">
+                  {item.title}
+                </h3>
+                <p className="text-gray-400">
+                  {item.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
       <TestimonialSection />
       <Footer />
     </div>
   );
 };
 
-export default Home;
+export default Home;
\ No newline at end of file
diff --git a/frontend/src/pages/landingPage.js b/frontend/src/pages/landingPage.js
index 55ead66..7e13fe2 100644
--- a/frontend/src/pages/landingPage.js
+++ b/frontend/src/pages/landingPage.js
@@ -3,31 +3,31 @@ import NavBar from "../components/NavbarLP";
 
 const LandingPage = () => {
   return (
-    <div className="App">
+    <div className="App bg-black min-h-screen flex flex-col">
       <NavBar />
-
-      <main className="bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-cyan-400 via-black to-black min-h-screen flex flex-col justify-center items-center">
-        <div className="">
-          <div className="text-white ">
-            <h1 className="text-6xl font-medium">The Simple Way</h1>
-            <h3 className="text-3xl mt-2">to store your Passwords</h3>
-            <p className="mt-8">
-              Keep all of your login information safe and secure <br /> with our
-              state-of-the-art password manager.
-            </p>
-            <div className="mt-8 hover:scale-150 transition duration-500">
-              <Link
-                to="/signup"
-                className="px-4 py-2 text-sm text-gray-800 bg-white rounded-3xl shadow hover:bg-gray-100 "
-              >
-                Get Started
-              </Link>
-            </div>
-          </div>
+      <main className="flex-grow flex flex-col justify-center items-center px-4 sm:px-6 lg:px-8 relative overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-t from-cyan-400 via-cyan-900 to-transparent opacity-50" style={{ top: '50%' }}></div>
+        <div className="text-center relative z-10">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl font-medium text-white leading-tight mb-2">
+            The Simple Way
+          </h1>
+          <h3 className="text-xl sm:text-2xl md:text-3xl text-white mb-6">
+            to store your Passwords
+          </h3>
+          <p className="text-white text-sm sm:text-base max-w-lg mx-auto mb-8">
+            Keep all of your login information safe and secure
+            with our state-of-the-art password manager.
+          </p>
+          <Link
+            to="/signup"
+            className="inline-block px-6 py-3 text-sm sm:text-base text-gray-800 bg-white rounded-full shadow hover:bg-gray-100 transition duration-300 ease-in-out transform hover:scale-105"
+          >
+            Get Started
+          </Link>
         </div>
       </main>
     </div>
   );
 };
 
-export default LandingPage;
+export default LandingPage;
\ No newline at end of file
diff --git a/frontend/src/pages/privateKey.js b/frontend/src/pages/privateKey.js
index 3c81807..3dce421 100644
--- a/frontend/src/pages/privateKey.js
+++ b/frontend/src/pages/privateKey.js
@@ -1,16 +1,18 @@
+import React from "react";
 import axios from "axios";
 import { Link, useNavigate } from "react-router-dom";
-import { useState } from "react";
 import jwt_decode from "jwt-decode";
+import Navbar from "../components/navbar";
+import { FaLock } from "react-icons/fa";
+
+const URL = "https://passman-backend-seven.vercel.app";
 
 export default function PrivateKey(props) {
-  const URL = "http://localhost:3300";
   const { setPrivateKey, privateKey } = props;
   const accessToken = sessionStorage.getItem("access");
   axios.defaults.withCredentials = true;
   axios.defaults.headers.common["authorization"] = "Bearer " + accessToken;
   const navigate = useNavigate();
-
   const axiosJWT = axios.create();
 
   const checkPrivate = async () => {
@@ -25,20 +27,18 @@ export default function PrivateKey(props) {
   };
 
   const newTokenGenerator = async () => {
-    await axios
-      .post(`${URL}/auth/refresh-token`)
-      .then((response) => {
-        const { accessToken } = response.data;
-        if (!accessToken) {
-          console.log("User unauthorised");
-        } else {
-          console.log(accessToken);
-          sessionStorage.setItem("access", accessToken);
-        }
-      })
-      .catch((err) => {
-        console.log(err);
-      });
+    try {
+      const response = await axios.post(`${URL}/auth/refresh-token`);
+      const { accessToken } = response.data;
+      if (!accessToken) {
+        console.log("User unauthorised");
+      } else {
+        console.log(accessToken);
+        sessionStorage.setItem("access", accessToken);
+      }
+    } catch (err) {
+      console.log(err);
+    }
   };
 
   axiosJWT.interceptors.request.use(
@@ -46,9 +46,8 @@ export default function PrivateKey(props) {
       let currentDate = new Date();
       const decodedToken = jwt_decode(sessionStorage.getItem("access"));
       if (decodedToken.exp * 1000 < currentDate.getTime()) {
-        const data = await newTokenGenerator();
-        config.headers["authorization"] =
-          "Bearer " + sessionStorage.getItem("access");
+        await newTokenGenerator();
+        config.headers["authorization"] = "Bearer " + sessionStorage.getItem("access");
       }
       return config;
     },
@@ -58,44 +57,49 @@ export default function PrivateKey(props) {
   );
 
   return (
-    <div className="relative flex flex-col justify-center min-h-screen overflow-hidden">
-      <div className="w-full p-6 m-auto bg-white rounded-md shadow-md lg:max-w-xl">
-        <h1 className="text-3xl font-semibold text-center text-blue-500">
-          Hang In There! <br />
-          Enter your Private Key!
-        </h1>
-        <form className="mt-6">
-          <div className="mb-2">
+    <div className="min-h-screen bg-black text-white">
+      <Navbar />
+      <div className="container mx-auto px-4 pt-32 pb-8">
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="text-2xl font-bold text-white">Your Private Key</h1>
+        </div>
+        <div className="bg-gray-800 rounded-lg p-6 shadow-lg">
+          <div className="flex items-center mb-6">
+            <FaLock className="text-4xl text-gray-500 mr-4" />
+            <p className="text-lg text-gray-300">
+              Please enter your private key to access your passwords.
+            </p>
+          </div>
+          <div className="mb-6">
             <label
-              // for="password"
-              className="block text-sm font-semibold text-gray-800"
+              htmlFor="privateKey"
+              className="block mb-2 text-sm font-medium text-gray-300"
             >
               Private Key
             </label>
             <input
+              id="privateKey"
               name="privateKey"
               value={privateKey}
               onChange={handleChange}
               type="password"
-              className="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-blue-400 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
+              className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="Enter your private key"
             />
           </div>
-
-          <div className="mt-6" onClick={checkPrivate}>
-            <Link className="w-full flex justify-center px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
+          <div className="flex justify-between items-center">
+            <button
+              onClick={checkPrivate}
+              className="bg-white hover:bg-gray-300 text-black px-4 py-2 rounded-lg text-sm font-medium transition-all"
+            >
               Continue
+            </button>
+            <Link to="/signup" className="text-blue-400 hover:underline text-sm">
+              Don't have an account? Sign Up
             </Link>
           </div>
-        </form>
-
-        <p className="mt-8 text-xs font-light text-center text-gray-700">
-          {" "}
-          Dont have an account?{" "}
-          <Link className="font-medium text-blue-600 hover:underline">
-            Sign Up
-          </Link>
-        </p>
+        </div>
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/pages/signin.js b/frontend/src/pages/signin.js
index 2b545f9..aa8abf5 100644
--- a/frontend/src/pages/signin.js
+++ b/frontend/src/pages/signin.js
@@ -1,154 +1,168 @@
 import React, { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import axios from "axios";
+import { Mail, Lock } from "lucide-react";
+import { toast } from "react-toastify";
 
-export default function Signin(props) {
-  const URL = "http://localhost:3300";
+export default function Signin({ setAccessToken }) {
+  const URL = "https://passman-backend-seven.vercel.app";
   const [user, setUser] = useState({ email: "", password: "" });
-  const [tokens, setTokens] = useState({});
-  const [isTokenPresent, setIsTokenPresent] = useState(false);
   const navigate = useNavigate();
   axios.defaults.withCredentials = true;
-  const { setAccessToken } = props;
 
   const handleChange = (e) => {
     const { name, value } = e.target;
-    setUser({
-      ...user,
-      [name]: value,
-    });
+    setUser({ ...user, [name]: value });
   };
 
   const handleSignin = async (e) => {
     e.preventDefault();
-    await axios
-      .post(`${URL}/auth/signin`, user)
-      .then((response) => {
-        if (response.data.accessToken) {
-          setTokens(response.data);
-          setIsTokenPresent(true);
-          sessionStorage.setItem("access", response.data.accessToken);
-          setAccessToken(response.data.accessToken);
-          navigate("/privateKey");
+
+    if (!user.email || !user.password) {
+      toast.warn("Please fill in all fields.", {
+        position: "top-right",
+        autoClose: 3000,
+      });
+      return;
+    }
+
+    try {
+      console.log("Attempting to sign in with:", user);
+      const loadingToastId = toast.info("Signing in...", {
+        position: "top-right",
+        closeButton: false,
+        draggable: false,
+        autoClose: 3000,
+      });
+
+      const response = await axios.post(`${URL}/auth/signin`, user);
+      console.log("Sign-in response:", response);
+      toast.dismiss(loadingToastId);
+
+      if (response.data.accessToken) {
+        sessionStorage.setItem("access", response.data.accessToken);
+        setAccessToken(response.data.accessToken);
+        toast.success("Successfully signed in!", {
+          position: "top-right",
+          autoClose: 3000,
+        });
+        navigate("/privateKey");
+      } else if (response.data.msg && response.data.msg.errors) {
+        // Handle validation errors
+        response.data.msg.errors.forEach((error) => {
+          console.log("Displaying error toast:", error.msg);
+          toast.error(error.msg, {
+            position: "top-right",
+            autoClose: 3000,
+          });
+        });
+      } else {
+        console.log("Unexpected response:", response.data);
+        toast.error("An unexpected error occurred.", {
+          position: "top-right",
+          autoClose: 3000,
+        });
+      }
+    } catch (err) {
+      console.error("Error during sign-in:", err);
+
+      toast.dismiss();
+      
+      if (err.response) {
+        console.log("Server responded with an error status:", err.response.status);
+        console.log("Error data:", err.response.data);
+        
+        const { data } = err.response;
+        
+        if (data && data.msg && typeof data.msg === 'string') {
+          // Handle general error message
+          console.log("Displaying error toast:", data.msg);
+          toast.error(data.msg, {
+            position: "top-right",
+            autoClose: 3000,
+          });
         } else {
-          console.log(response.data);
+          // Fallback error message
+          console.log("Displaying fallback error toast");
+          toast.error("An error occurred. Please try again.", {
+            position: "top-right",
+            autoClose: 3000,
+          });
         }
-      })
-      .catch((err) => {
-        console.log(err);
-        setIsTokenPresent(false);
-      });
+      } else if (err.request) {
+        // Request was made but no response received
+        console.log("No response received:", err.request);
+        toast.error("No response from the server. Please check your connection.", {
+          position: "top-right",
+          autoClose: 3000,
+        });
+      } else {
+        // Something happened in setting up the request that triggered an Error
+        console.log("Error", err.message);
+        toast.error("An unexpected error occurred.", {
+          position: "top-right",
+          autoClose: 3000,
+        });
+      }
+    }
   };
-
   return (
-    <>
-      {/* <main className="bg-white flex flex-col items-center justify-center min-h-screen w-full text-center px-20 ">
-        <div className="rounded-2xl flex w-2/3 max-w-4xl">
-          <div className=" bg-slate-400 w-3/5 p-5 rounded-tl-2xl rounded-bl-2xl ">
-            <div className="py-10">
-              <h1 className="text-3xl font-bold mb-2 ">Login</h1>
-            </div>
-            <div className="mb-6">
+    <div className="min-h-screen bg-black text-white flex flex-col justify-center px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full mx-auto space-y-8">
+        <div className="text-center">
+          <h2 className="mt-6 text-4xl font-extrabold">Welcome Back</h2>
+          <p className="mt-2 text-sm text-gray-400">Sign in to your account</p>
+        </div>
+        <form className="mt-8 space-y-6" onSubmit={handleSignin}>
+          <div className="space-y-4">
+            <div className="relative">
+              <Mail className="absolute top-3 left-3 h-5 w-5 text-gray-400" />
               <input
-                type="text"
+                id="email"
                 name="email"
+                type="email"
+                required
+                className="w-full pl-10 pr-3 py-2 text-white bg-gray-800 border-b-2 border-gray-700 focus:border-blue-500 focus:outline-none focus:ring-0 transition duration-300"
+                placeholder="Email address"
                 value={user.email}
                 onChange={handleChange}
-                id="large-input1"
-                className="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
               />
             </div>
-            <div className="mb-6">
+            <div className="relative">
+              <Lock className="absolute top-3 left-3 h-5 w-5 text-gray-400" />
               <input
+                id="password"
                 name="password"
+                type="password"
+                required
+                className="w-full pl-10 pr-3 py-2 text-white bg-gray-800 border-b-2 border-gray-700 focus:border-blue-500 focus:outline-none focus:ring-0 transition duration-300"
+                placeholder="Password"
                 value={user.password}
                 onChange={handleChange}
-                type="password"
-                id="large-input2"
-                className="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
               />
             </div>
-            <button onClick={handleSignin}>
-              <Link
-                // to="/"
-                className="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded"
-              >
-                Sign In
-              </Link>
-            </button>
+          </div>
 
-            <p className="text-lg mb-4 mt-6"> Not an User? SignUp instead!</p>
-            <Link
-              to="/signup"
-              className="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded"
+          <div>
+            <button
+              type="submit"
+              className="w-full py-3 px-4 text-black bg-white rounded-md transition "
             >
-              Sign Up
-            </Link>
-          </div>
-          <div className=" bg-red-200 w-3/5 p-5 rounded-tr-2xl rounded-br-2xl py-36 px-12">
-            <h1 className="text-3xl font-bold mb-2 text-black">Hey There!</h1>
-            <div className="border-2 w-24 border-green-500 inline-block mb-2 "></div>
-            <p className="text-lg mb-8 text-black ">
-              Say goodbye to forgotten passwords and hello to secure, easy login
-              with our password manager.
-            </p>
+              Sign in
+            </button>
           </div>
-        </div>
-      </main> */}
-      <div className="relative flex flex-col justify-center min-h-screen overflow-hidden ">
-        <div className="w-full p-6 m-auto bg-white rounded-md shadow-xl lg:max-w-xl">
-          <h1 className="text-3xl text-blue-500 ">Welcome Back!</h1>
-          <form className="mt-6" onSubmit={handleSignin}>
-            <div className="mb-2">
-              <label for="email" className=" text-sm text-gray-800">
-                Email
-              </label>
-              <input
-                type="text"
-                name="email"
-                value={user.email}
-                onChange={handleChange}
-                id="large-input1"
-                className=" w-full px-4 py-2 mt-2 text-blue-500 bg-white border rounded-md focus:border-blue-400 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
-              />
-            </div>
-            <div className="mb-2">
-              <label for="password" className=" text-sm text-gray-800">
-                Password
-              </label>
-              <input
-                name="password"
-                value={user.password}
-                onChange={handleChange}
-                type="password"
-                id="large-input2"
-                className="block w-full px-4 py-2 mt-2 text-blue-500 bg-white border rounded-md focus:border-blue-400 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
-              />
-            </div>
+        </form>
 
-            <div className="mt-6">
-              <button
-                type="submit"
-                // onClick={handleSignin}
-                className="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-600"
-              >
-                Login
-              </button>
-            </div>
-          </form>
-
-          <p className="mt-8 text-xs font-light text-center text-gray-700">
-            {" "}
-            Don't have an account?{" "}
-            <Link
-              to="/signup"
-              className="font-medium text-blue-500 hover:underline"
-            >
-              Sign up
-            </Link>
-          </p>
-        </div>
+        <p className="mt-4 text-sm text-center text-gray-400">
+          Not a member?{" "}
+          <Link
+            to="/signup"
+            className="font-medium text-cyan-400 hover:text-blue-400 transition duration-300"
+          >
+            Sign up now
+          </Link>
+        </p>
       </div>
-    </>
+    </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/pages/signup.js b/frontend/src/pages/signup.js
index 4c048ad..a881ef4 100644
--- a/frontend/src/pages/signup.js
+++ b/frontend/src/pages/signup.js
@@ -1,13 +1,15 @@
-import axios from "axios";
+import React, { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { useState } from "react";
+import axios from "axios";
+import { Mail, Lock, User } from "lucide-react";
 import Modal from "../components/Popup";
+import { toast } from "react-toastify";
 
-const SignUp = (props) => {
-  const URL = "http://localhost:3300";
+export default function SignUp({ setAccessToken, setPrivateKey, privateKey }) {
+  const URL = "https://passman-backend-seven.vercel.app";
   const [user, setUser] = useState({ email: "", name: "", password: "" });
   const navigate = useNavigate();
-  const { setAccessToken, setPrivateKey, privateKey } = props;
+  axios.defaults.withCredentials = true;
 
   const handleChange = (e) => {
     const { name, value } = e.target;
@@ -17,167 +19,197 @@ const SignUp = (props) => {
     });
   };
 
-  const handleSignup = async () => {
-    await axios
-      .post(`${URL}/auth/signup`, user)
-      .then((response) => {
-        if (response.data.accessToken) {
-          setAccessToken(response.data.accessToken);
-          sessionStorage.setItem("access", response.data.accessToken);
-          const xyw = response.data.privateKey;
-          console.log({ xyw });
-          // alert(response.data.privateKey);
-          setPrivateKey(xyw);
-          // navigate("/home");
+  const handleSignup = async (e) => {
+    e.preventDefault();
+
+    if (!user.email || !user.name || !user.password) {
+      toast.warn("Please fill in all fields.", {
+        position: "top-right",
+        autoClose: 3000,
+      });
+      return;
+    }
+
+    if (user.password.length < 6) {
+      toast.error("Password must be at least 6 characters long.", {
+        position: "top-right",
+        autoClose: 3000,
+      });
+      return;
+    }
+
+    try {
+      console.log("Attempting to sign up with:", user);
+      const loadingToastId = toast.info("Signing up...", {
+        position: "top-right",
+        closeButton: false,
+        draggable: false,
+        autoClose: 3000,
+      });
+
+      const response = await axios.post(`${URL}/auth/signup`, user);
+      console.log("Sign-up response:", response);
+      toast.dismiss(loadingToastId);
+
+      if (response.data.accessToken) {
+        setAccessToken(response.data.accessToken);
+        sessionStorage.setItem("access", response.data.accessToken);
+        const xyw = response.data.privateKey;
+        console.log({ xyw });
+        setPrivateKey(xyw);
+        toast.success("Successfully signed up!", {
+          position: "top-right",
+          autoClose: 3000,
+        });
+        // You can now show the Modal with the private key
+      } else if (response.data.message === "user already exists") {
+        console.log("User already exists");
+        toast.error("User already exists. Please sign in or use a different email.", {
+          position: "top-right",
+          autoClose: 3000,
+        });
+      } else {
+        console.log("Unexpected response:", response.data);
+        toast.error("An unexpected error occurred.", {
+          position: "top-right",
+          autoClose: 3000,
+        });
+      }
+    } catch (err) {
+      console.error("Error during sign-up:", err);
+
+      toast.dismiss();
+      
+      if (err.response) {
+        console.log("Server responded with an error status:", err.response.status);
+        console.log("Error data:", err.response.data);
+        
+        const { data } = err.response;
+        
+        if (data && data.errors && Array.isArray(data.errors)) {
+          // Handle validation errors
+          data.errors.forEach((error) => {
+            console.log("Displaying error toast:", error.msg);
+            toast.error(error.msg, {
+              position: "top-right",
+              autoClose: 3000,
+            });
+          });
+        } else if (data && data.message) {
+          // Handle general error message
+          console.log("Displaying error toast:", data.message);
+          toast.error(data.message, {
+            position: "top-right",
+            autoClose: 3000,
+          });
         } else {
-          console.log(response.data);
+          // Fallback error message
+          console.log("Displaying fallback error toast");
+          toast.error("An error occurred. Please try again.", {
+            position: "top-right",
+            autoClose: 3000,
+          });
         }
-      })
-      .catch((err) => {
-        console.log(err);
-      });
+      } else if (err.request) {
+        // Request was made but no response received
+        console.log("No response received:", err.request);
+        toast.error("No response from the server. Please check your connection.", {
+          position: "top-right",
+          autoClose: 3000,
+        });
+      } else {
+        // Something happened in setting up the request that triggered an Error
+        console.log("Error", err.message);
+        toast.error("An unexpected error occurred.", {
+          position: "top-right",
+          autoClose: 3000,
+        });
+      }
+    }
   };
 
   return (
-    <>
-      {/* <main className="flex flex-col items-center justify-center min-h-screen w-full text-center ">
-        <div className="flex ml-48">
-          <div className=" bg-white w-2/5 p-5 rounded-tl-2xl rounded-bl-2xl py-36 px-12">
-            <h1 className="text-3xl font-bold mb-2 text-black">Hey There!</h1>
-            <div className="border-2 w-24 border-green-500 inline-block mb-2 "></div>
-            <p className="text-lg mb-8 text-black ">
-              Say goodbye to forgotten passwords and hello to secure, easy login
-              with our password manager.
-            </p>
-          </div>
-          <div className="rounded-2xl flex w-2/3 max-w-4xl">
-            <div className=" bg-slate-400 w-3/5 p-5 rounded-tr-2xl rounded-br-2xl ">
-              <div className="py-10">
-                <h1 className="text-3xl font-bold mb-2 ">SignUp</h1>
-              </div>
-              <div className="mb-6">
-                <input
-                  type="text"
-                  id="large-input1"
-                  name="email"
-                  value={user.email}
-                  onChange={handleChange}
-                  className="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                />
-              </div>
-              <div className="mb-6">
-                <input
-                  type="text"
-                  id="large-input2"
-                  name="name"
-                  value={user.name}
-                  onChange={handleChange}
-                  className="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                />
-              </div>
-              <div className="mb-6">
-                <input
-                  type="password"
-                  id="large-input3"
-                  name="password"
-                  value={user.password}
-                  onChange={handleChange}
-                  className="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                />
-              </div>
-              <button onClick={handleSignup}>
-                <Link className="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">
-                  SignUp
-                </Link>
-              </button>
-
-              <p className="text-lg mb-4 mt-6">
-                {" "}
-                Already an User? Sign In instead!
-              </p>
-              <Link
-                href="/signin"
-                className="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded"
-              >
-                Sign In
-              </Link>
-            </div>
-          </div>
+    <div className="min-h-screen bg-black text-white flex flex-col justify-center px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full mx-auto space-y-8">
+        <div className="text-center">
+          <h2 className="mt-6 text-4xl font-extrabold">Create Account</h2>
+          <p className="mt-2 text-sm text-gray-400">Sign up to get started</p>
         </div>
-      </main> */}
-      <div className="relative flex flex-col justify-center min-h-screen overflow-hidden ">
-        <div className="w-full p-6 m-auto bg-white rounded-md shadow-xl lg:max-w-xl">
-          <h1 className="text-3xl text-blue-500 ">
-            Nice to see you here at PassMan!
-          </h1>
-          <form className="mt-6">
-            <div className="mb-2">
-              <label for="email" className=" text-sm text-gray-800">
-                UserName
-              </label>
+        <form className="mt-8 space-y-6" onSubmit={handleSignup}>
+          <div className="space-y-4">
+            <div className="relative">
+              <User className="absolute top-3 left-3 h-5 w-5 text-gray-400" />
               <input
-                type="text"
-                id="large-input2"
+                id="name"
                 name="name"
+                type="text"
+                required
+                className="w-full pl-10 pr-3 py-2 text-white bg-gray-800 border-b-2 border-gray-700 focus:border-blue-500 focus:outline-none focus:ring-0 transition duration-300"
+                placeholder="Username"
                 value={user.name}
                 onChange={handleChange}
-                className=" w-full px-4 py-2 mt-2 text-blue-500 bg-white border rounded-md focus:border-blue-400 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
               />
             </div>
-            <div className="mb-2">
-              <label for="email" className=" text-sm text-gray-800">
-                Email
-              </label>
+            <div className="relative">
+              <Mail className="absolute top-3 left-3 h-5 w-5 text-gray-400" />
               <input
-                type="text"
-                id="large-input1"
+                id="email"
                 name="email"
+                type="email"
+                required
+                className="w-full pl-10 pr-3 py-2 text-white bg-gray-800 border-b-2 border-gray-700 focus:border-blue-500 focus:outline-none focus:ring-0 transition duration-300"
+                placeholder="Email address"
                 value={user.email}
                 onChange={handleChange}
-                className=" w-full px-4 py-2 mt-2 text-blue-500 bg-white border rounded-md focus:border-blue-400 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
               />
             </div>
-
-            <div className="mb-2">
-              <label for="password" className=" text-sm text-gray-800">
-                Password
-              </label>
+            <div className="relative">
+              <Lock className="absolute top-3 left-3 h-5 w-5 text-gray-400" />
               <input
-                type="password"
-                id="large-input3"
+                id="password"
                 name="password"
+                type="password"
+                required
+                className="w-full pl-10 pr-3 py-2 text-white bg-gray-800 border-b-2 border-gray-700 focus:outline-none focus:ring-0 transition duration-300"
+                placeholder="Password"
                 value={user.password}
                 onChange={handleChange}
-                className="block w-full px-4 py-2 mt-2 text-blue-500 bg-white border rounded-md focus:border-blue-400 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
               />
             </div>
+          </div>
 
-            <div className="mt-6">
-              {/* <button
-                onClick={handleSignup}
-                className="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-600"
-              >
-                <Link to="/" />
-                SignUp
-              </button> */}
-              <Modal privateKey={privateKey} handleSignup={handleSignup} />
-            </div>
-          </form>
-
-          <p className="mt-8 text-xs font-light text-center text-gray-700">
-            {" "}
-            Aleady have an account?{" "}
-            <Link
-              to="/signin"
-              className="font-medium text-blue-500 hover:underline"
+          <div>
+            <button
+              type="submit"
+              className="w-full py-3 px-4 text-black bg-white rounded-md transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2"
             >
-              Sign In
-            </Link>
-          </p>
-        </div>
+              Sign Up
+            </button>
+          </div>
+        </form>
+
+        <p className="mt-4 text-sm text-center text-gray-400">
+          Already have an account?{" "}
+          <Link
+            to="/signin"
+            className="font-medium text-cyan-400 transition duration-300"
+          >
+            Sign in
+          </Link>
+        </p>
       </div>
-    </>
-  );
-};
+      {privateKey && (
+          <Modal privateKey={privateKey} handleSignup={handleSignup}>
+            <button
+              type="submit"
+              className="w-full py-3 px-4 text-black bg-white rounded-md transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2"
+            >
+              Sign Up
+            </button>
+           
 
-export default SignUp;
+            </Modal>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 19973dd..d2e7961 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -2,7 +2,17 @@
 module.exports = {
   content: ["./src/**/*.{html,js}"],
   theme: {
-    extend: {},
+    extend: {
+      keyframes: {
+        'modal-appear': {
+          '0%': { opacity: '0', transform: 'scale(0.95)' },
+          '100%': { opacity: '1', transform: 'scale(1)' }
+        }
+      },
+      animation: {
+        'modal-appear': 'modal-appear 0.3s ease-out'
+      }
+    }
   },
   plugins: [],
 };