diff --git a/pages/settings/index.js b/pages/settings/index.js
index 05ef423..353f392 100644
--- a/pages/settings/index.js
+++ b/pages/settings/index.js
@@ -5,7 +5,9 @@ import { UserContext } from "../../components/context";
 import { useContext } from "react";
 import { useGoogleReCaptcha } from "react-google-recaptcha-v3";
 import { useQueryClient } from "@tanstack/react-query";
-
+import Avatar from "../../components/elements/Avatar";
+import SEO from "../../components/utils/SEO";
+import Footer from "../../components/elements/Footer";
 const Settings = () => {
     const queryClient = useQueryClient();
     const { executeRecaptcha } = useGoogleReCaptcha();
@@ -107,127 +109,150 @@ const Settings = () => {
     return (
         <>
             {contextHolder}
-            <div className="h-24 w-24 bg-[#B1FE04] mt-8 rounded-full mx-auto "></div>
-            <div className="mt-8 pl-2 flex rounded-lg h-10 w-[90%] ml-auto mr-auto max-w-5xl bg-[#FFFEFE] shadow-[0_3px_4px_0px_#00000040] border-[1px]">
-                <div
-                    className={`${
-                        passwordTab ? "" : " border-b-[2px]"
-                    } hover:bg-[#f4f4f4] border-black cursor-pointer w-20 flex justify-center items-center ml-2`}
-                    onClick={() => {
-                        setPasswordTab(false);
-                    }}
-                >
-                    Account
-                </div>
-                <div
-                    className={`
-        ${!passwordTab ? "" : "border-b-[2px]"}
-        hover:bg-[#f4f4f4] border-black
-        cursor-pointer w-20 flex justify-center items-center ml-2`}
-                    onClick={() => {
-                        setPasswordTab(true);
-                    }}
-                >
-                    Password
-                </div>
-            </div>
-            <div className="max-w-5xl w-[90%] rounded-lg bg-[#FFFEFE] mx-auto mt-2 mb-8 shadow-[0_3px_4px_0px_#00000040] border-[1px]">
-                <div className={`max-w-lg p-4 mx-auto `}>
-                    <Input
-                        placeholder="Name"
-                        className={`${
-                            passwordTab ? "hidden" : "block"
-                        } mt-12 py-1 px-2 border-2 border-[#C2C8CB] text-xl font-inter font-medium rounded-lg`}
-                        onChange={(e) => {
-                            setName(e.target.value);
-                        }}
-                        value={name}
-                    />
-                    <Input
-                        placeholder="Email Address"
-                        className={`${
-                            passwordTab ? "hidden" : "block"
-                        } mt-12 py-1 px-2 border-2 border-[#C2C8CB] text-xl font-inter font-medium rounded-lg`}
-                        onChange={(e) => {
-                            setEmail(e.target.value);
-                        }}
-                        value={email}
-                    />
+            <SEO
+                title={`SaveMyForm | ${name?.toUpperCase()}`}
+                desc={`Profile page of ${name}. SaveMyForm. SaveMyForm is a platform where yoy save your form data now
+                easily and securely.No need to create a Backend for collecting
+                form responses on your application`}
+            />
+            <div className="grid place-items-center w-screen relative">
+                <div className="flex flex-col gap-8 lg:w-1/2 w-5/6 z-20 mt-16">
+                    <div className="flex flex-col gap-2 ">
+                        <div className="flex flex-row gap-2 items-center justify-center">
+                            <div className="h-32 w-32  rounded-full border-solid p-2 bg-[#fbeefc]">
+                                <Avatar seed={name} />
+                            </div>
+                        </div>
+                    </div>
+                    <div className="flex flex-col gap-8 shadow-[0_4px_4px_0px_fbeefc] rounded-lg p-8 bg-[#ffffff]">
+                        <div className="flex flex-row items-center gap-8 bg-[#fbeefc]  rounded-lg px-4 pl-0">
+                            <div
+                                className="cursor-pointer text-lg font-semibold hover:bg-[#EEA5F4] hover:rounded-l-lg p-4 "
+                                onClick={() => {
+                                    setPasswordTab(false);
+                                }}
+                            >
+                                Account
+                            </div>
+
+                            <div
+                                className="cursor-pointer text-lg font-semibold hover:bg-[#EEA5F4] p-4 "
+                                onClick={() => {
+                                    setPasswordTab(true);
+                                }}
+                            >
+                                Password
+                            </div>
+                        </div>
+                        {!passwordTab && (
+                            <div>
+                                <Input
+                                    placeholder="Name"
+                                    className={`${
+                                        passwordTab ? "hidden" : "block"
+                                    } rounded-lg border-solid border-2 border-[#01684a]`}
+                                    onChange={(e) => {
+                                        setName(e.target.value);
+                                    }}
+                                    value={name}
+                                    size="large"
+                                />
+                            </div>
+                        )}
+                        {!passwordTab && (
+                            <div>
+                                <Input
+                                    placeholder="Email Address"
+                                    className={`${
+                                        passwordTab ? "hidden" : "block"
+                                    } rounded-lg border-solid border-2 border-[#01684a]`}
+                                    onChange={(e) => {
+                                        setEmail(e.target.value);
+                                    }}
+                                    value={email}
+                                    size="large"
+                                />
+                            </div>
+                        )}
 
-                    {passwordTab && (
-                        <Input.Password
-                            className={`mt-12 border-2 border-[#C2C8CB] text-xl font-inter font-medium rounded-lg`}
-                            placeholder="Old Password"
-                            visibilityToggle={{
-                                visible: oldPasswordVisible,
-                                onVisibleChange: setOldPasswordVisible,
-                            }}
-                            onChange={(e) => {
-                                setOldPassword(e.target.value);
-                            }}
-                            value={oldPassword}
-                        />
-                    )}
-                    {passwordTab && (
-                        <Input.Password
-                            className="mt-12 border-2 border-[#C2C8CB] text-xl font-inter font-medium rounded-lg"
-                            placeholder="New Password"
-                            visibilityToggle={{
-                                visible: newPasswordVisible,
-                                onVisibleChange: setNewPasswordVisible,
-                            }}
-                            onChange={(e) => {
-                                setNewPassword(e.target.value);
-                            }}
-                            value={newPassword}
-                        />
-                    )}
-                    {passwordTab && (
-                        <Input.Password
-                            className="mt-12 mb-8 border-2 border-[#C2C8CB] text-xl font-inter font-medium rounded-lg"
-                            placeholder="Confirm Password"
-                            visibilityToggle={{
-                                visible: confirmPasswordVisible,
-                                onVisibleChange: setConfirmPasswordVisible,
-                            }}
-                            onChange={(e) => {
-                                setConfPassword(e.target.value);
-                            }}
-                            value={confPassword}
-                        />
-                    )}
-                    {passwordTab && errorBool && (
-                        <div
-                            className="error-message"
-                            style={{ textAlign: "center", color: "red" }}
-                        >
-                            {errorMessage}
+                        {passwordTab && (
+                            <div>
+                                <Input.Password
+                                    className={`rounded-lg border-solid border-2 border-[#01684a]`}
+                                    placeholder="Old Password"
+                                    visibilityToggle={{
+                                        visible: oldPasswordVisible,
+                                        onVisibleChange: setOldPasswordVisible,
+                                    }}
+                                    onChange={(e) => {
+                                        setOldPassword(e.target.value);
+                                    }}
+                                    value={oldPassword}
+                                    size="large"
+                                />
+                            </div>
+                        )}
+                        {passwordTab && (
+                            <div>
+                                <Input.Password
+                                    className="rounded-lg border-solid border-2 border-[#01684a]"
+                                    placeholder="New Password"
+                                    visibilityToggle={{
+                                        visible: newPasswordVisible,
+                                        onVisibleChange: setNewPasswordVisible,
+                                    }}
+                                    onChange={(e) => {
+                                        setNewPassword(e.target.value);
+                                    }}
+                                    value={newPassword}
+                                    size="large"
+                                />
+                            </div>
+                        )}
+                        {passwordTab && (
+                            <div>
+                                <Input.Password
+                                    className="rounded-lg border-solid border-2 border-[#01684a]"
+                                    placeholder="Confirm Password"
+                                    visibilityToggle={{
+                                        visible: confirmPasswordVisible,
+                                        onVisibleChange:
+                                            setConfirmPasswordVisible,
+                                    }}
+                                    onChange={(e) => {
+                                        setConfPassword(e.target.value);
+                                    }}
+                                    value={confPassword}
+                                    size="large"
+                                />
+                            </div>
+                        )}
+                        <div className="flex flex-row gap-2">
+                            <button
+                                className="shadow-[0px_4px_8px_rgba(0,0,0,0.25)] text-lg  rounded-lg bg-[#fbeefc] p-2 w-32"
+                                onClick={() => {
+                                    {
+                                        passwordTab
+                                            ? validatePasswords()
+                                            : updateUser();
+                                    }
+                                }}
+                            >
+                                Save
+                            </button>
+                            <button
+                                className="shadow-[0px_4px_8px_rgba(0,0,0,0.25)] text-lg  rounded-lg bg-white p-2 w-32"
+                                onClick={() => {
+                                    reset();
+                                }}
+                            >
+                                Cancel
+                            </button>
                         </div>
-                    )}
+                    </div>
                 </div>
             </div>
-            <div className="max-w-5xl w-[90%] ml-auto mr-auto">
-                <Button
-                    type="primary"
-                    className="mr-4 w-[8rem] h-10 rounded-lg font-inter font-medium text-lg text-center hover:border-green-300 shadow-md mb-8 hover:scale-105"
-                    onClick={() => {
-                        {
-                            passwordTab ? validatePasswords() : updateUser(); // when user is saving name and email
-                        }
-                    }}
-                >
-                    Save
-                </Button>
-                <Button
-                    type="default"
-                    className="mr-8 w-[8rem] h-10 rounded-lg font-inter font-medium text-lg text-center border-1 border-[#7FB3A4] text-[#00694B] hover:border-green-300 shadow-md mb-8 hover:scale-105"
-                    onClick={() => {
-                        reset();
-                    }}
-                >
-                    Cancel
-                </Button>
-            </div>
+            <Footer />
         </>
     );
 };