From 2b8cc8cf02532609e730ef1faa6d218046f01f80 Mon Sep 17 00:00:00 2001
From: BuddyLongLegs <anurag10jain@gmail.com>
Date: Mon, 3 Jul 2023 18:22:20 +0530
Subject: [PATCH] Fixed several bugs

---
 components/elements/Alert/index.js            |  11 +-
 components/elements/Appbar/index.js           | 349 ++++++++--------
 components/elements/Form/index.js             |  51 +--
 components/elements/FormInput/index.js        | 273 ++++++-------
 components/sections/Feature/index.js          | 254 ++++++------
 components/sections/Responses/index.js        | 365 ++++++++---------
 components/sections/SingleFileUpload/index.js | 383 ++++++++----------
 components/utils/API/index.js                 | 138 ++++---
 package-lock.json                             |  45 ++
 package.json                                  |   1 +
 pages/_app.js                                 | 139 +++----
 pages/dashboard/index.js                      | 283 ++++++-------
 .../dashboard/project/[id]/[formid]/index.js  | 239 ++++++-----
 pages/dashboard/project/[id]/index.js         | 223 +++++-----
 pages/dashboard/project/[id]/newform/index.js | 255 ++++++------
 .../dashboard/project/[id]/settings/index.js  |   6 +-
 pages/dashboard/project/newproject/index.js   |  19 +-
 styles/globals.css                            |  60 ++-
 18 files changed, 1548 insertions(+), 1546 deletions(-)

diff --git a/components/elements/Alert/index.js b/components/elements/Alert/index.js
index 5cccf76..fc0f14d 100644
--- a/components/elements/Alert/index.js
+++ b/components/elements/Alert/index.js
@@ -1,16 +1,11 @@
-import React from 'react';
+import React from "react";
 function alert(props) {
   let [open, setOpen] = React.useState(true);
   if (!open) return null;
   return (
-    <div
-      id="alert-1"
-      className="flex p-4 bg-yellow-300 dark:bg-yellow-200"
-      role="alert"
-    >
+    <div id="alert-1" className="flex p-4 py-8 bg-yellow-300 dark:bg-yellow-200 fixed z-[1000] w-full" role="alert">
       <div className="ml-3 text-sm font-medium text-yellow-700 dark:text-yellow-800">
-        <strong>Alpha Alert</strong> SaveMyForm is still in alpha phase, things
-        may break, please handle us with care.
+        <strong>Alpha Alert</strong> SaveMyForm is still in alpha phase, things may break, please handle us with care.
       </div>
       <button
         type="button"
diff --git a/components/elements/Appbar/index.js b/components/elements/Appbar/index.js
index 59b136a..e397cff 100644
--- a/components/elements/Appbar/index.js
+++ b/components/elements/Appbar/index.js
@@ -13,193 +13,192 @@ import { useRef } from "react";
 import { CgProfile } from "react-icons/cg";
 import { BiLogOut } from "react-icons/bi";
 export default function index() {
-    const items = [
-        {
-            key: "1",
-            label: (
-                <Link onClick={() => router.push("/settings")}>
-                    <span className="text-green-700 font-semibold">
-                        {" "}
-                        Profile
-                    </span>
-                </Link>
-            ),
-            icon: <CgProfile className="text-green-700" />,
-        },
-        {
-            key: "2",
-            danger: true,
-            label: (
-                <Popconfirm
-                    placement="leftTop"
-                    title="Are you sure you want to Log Out?"
-                    // description="Are you sure? You want to delete this task"
-                    onConfirm={() => {
-                        removeLS("secret");
-                        router.push("/");
-                        setIsLoggedIn(false);
-                    }}
-                    okText="Yes"
-                    cancelText="No"
-                >
-                    logout
-                </Popconfirm>
-            ),
-            icon: <BiLogOut />,
-        },
-    ];
-    const { isLoggedIn, setIsLoggedIn } = useContext(UserContext);
-    const { active, setActive } = useContext(AppbarContext);
-    const router = useRouter();
-    const collapseItems = ["Home", "Dashboard", "Documentation", "FAQ"];
-    const [openCollapse, setOpenCollapse] = useState(false);
-    const navbarToggleRef = useRef();
+  const items = [
+    {
+      key: "1",
+      label: (
+        <Link onClick={() => router.push("/settings")}>
+          <span className="text-green-700 font-semibold"> Profile</span>
+        </Link>
+      ),
+      icon: <CgProfile className="text-green-700" />,
+    },
+    {
+      key: "2",
+      danger: true,
+      label: (
+        <Popconfirm
+          placement="leftTop"
+          title="Are you sure you want to Log Out?"
+          // description="Are you sure? You want to delete this task"
+          onConfirm={() => {
+            removeLS("secret");
+            router.push("/");
+            setIsLoggedIn(false);
+          }}
+          okText="Yes"
+          cancelText="No"
+        >
+          logout
+        </Popconfirm>
+      ),
+      icon: <BiLogOut />,
+    },
+  ];
+  const { isLoggedIn, setIsLoggedIn } = useContext(UserContext);
+  const { active, setActive } = useContext(AppbarContext);
+  const router = useRouter();
+  const collapseItems = ["Home", "Dashboard", "Documentation", "FAQ"];
+  const [openCollapse, setOpenCollapse] = useState(false);
+  const navbarToggleRef = useRef();
 
-    return (
-        <Navbar variant="sticky" className="w-full opacity-100 bg-[#FFFFFF]">
-            <Navbar.Toggle
-                showIn={"sm"}
-                aria-label="toggle navigation"
-                className="mx-2 fill-[#00FF00]"
-                onChange={(isSelected) => setOpenCollapse(isSelected)}
-                ref={navbarToggleRef}
-            />
-            <Navbar.Brand>
-                <Link onClick={() => router.push("/")}>
-                    <Image src={Logo} className="h-16 w-16 mr-4" alt="Logo" />
-                </Link>
-                <Link onClick={() => router.push("/")}>
-                    <Text b color="#001E2B" hideIn="xs" className="text-2xl">
-                        SaveMyForm
-                    </Text>
-                </Link>
-            </Navbar.Brand>
-            <Navbar.Content
-                activeColor={"success"}
-                hideIn="sm"
-                variant={"default"}
+  return (
+    <Navbar variant="sticky" className="w-full opacity-100 bg-[#FFFFFF]">
+      <Navbar.Toggle
+        showIn={"sm"}
+        aria-label="toggle navigation"
+        className="mx-2 fill-[#00FF00]"
+        onChange={(isSelected) => setOpenCollapse(isSelected)}
+        ref={navbarToggleRef}
+      />
+      <Navbar.Brand>
+        <Link onClick={() => router.push("/")}>
+          <Image src={Logo} className="h-16 w-16 mr-4" alt="Logo" />
+        </Link>
+        <Link onClick={() => router.push("/")}>
+          <Text b color="#001E2B" hideIn="xs" className="text-2xl">
+            SaveMyForm
+          </Text>
+        </Link>
+      </Navbar.Brand>
+      <Navbar.Content activeColor={"success"} hideIn="sm" variant={"default"}>
+        <Navbar.Link
+          isActive={active.home}
+          onClick={() => {
+            router.push("/");
+          }}
+          className="hover:text-[#116148] text-lg font-semibold"
+        >
+          Home
+        </Navbar.Link>
+        <Navbar.Link
+          isActive={active.dashboard}
+          onClick={() => {
+            router.push("/dashboard");
+          }}
+          className="hover:text-[#116148] text-lg font-semibold"
+        >
+          Dashboard
+        </Navbar.Link>
+        <Navbar.Link
+          isActive={active.documentation}
+          onClick={() => {
+            router.push("/documentation");
+          }}
+          className="hover:text-[#116148] text-lg font-semibold"
+        >
+          Documentation
+        </Navbar.Link>
+        <Navbar.Link
+          isActive={active.faq}
+          onClick={() => {
+            router.push("/faq");
+          }}
+          className="hover:text-[#116148] text-lg font-semibold"
+        >
+          FAQs
+        </Navbar.Link>
+      </Navbar.Content>
+      <Navbar.Content>
+        {!isLoggedIn ? (
+          <>
+            <Button
+              flat
+              auto
+              color="transparent"
+              className="text-lg font-semibold cursor-pointer hover:text-[#00694B] hover:bg-[#DEF7E5] rounded-md"
+              onClick={() => router.push("/signin")}
             >
-                <Navbar.Link
-                    isActive={active.home}
-                    onClick={() => {
-                        router.push("/");
-                    }}
-                    className="hover:text-[#116148] text-lg font-semibold"
-                >
-                    Home
-                </Navbar.Link>
-                <Navbar.Link
-                    isActive={active.dashboard}
-                    onClick={() => {
-                        router.push("/dashboard");
-                    }}
-                    className="hover:text-[#116148] text-lg font-semibold"
-                >
-                    Dashboard
-                </Navbar.Link>
-                <Navbar.Link
-                    isActive={active.documentation}
-                    onClick={() => {
-                        router.push("/documentation");
-                    }}
-                    className="hover:text-[#116148] text-lg font-semibold"
-                >
-                    Documentation
-                </Navbar.Link>
-                <Navbar.Link
-                    isActive={active.faq}
-                    onClick={() => {
-                        router.push("/faq");
-                    }}
-                    className="hover:text-[#116148] text-lg font-semibold"
-                >
-                    FAQs
-                </Navbar.Link>
-            </Navbar.Content>
-            <Navbar.Content>
-                {!isLoggedIn ? (
-                    <>
-                        <Button
-                            flat
-                            auto
-                            color="transparent"
-                            className="text-lg font-semibold cursor-pointer hover:text-[#00694B] hover:bg-[#DEF7E5] rounded-md"
-                            onClick={() => router.push("/signin")}
-                        >
-                            Login
-                        </Button>
-                        <Button
-                            auto
-                            flat
-                            bordered
-                            color={"#001E2B"}
-                            className="bg-[#01EC64] border-[#001E2B] text-[#001E2B] hover:bg-[#11FC74] rounded-md text-lg font-bold"
-                            onClick={() => router.push("/signup")}
-                        >
-                            Sign Up
-                        </Button>
-                    </>
-                ) : (
-                    <>
-                        <Dropdown
-                            menu={{
-                                items,
-                            }}
-                        >
-                            <a onClick={(e) => e.preventDefault()}>
-                                <Space className="font-semibold text-lg flex justify-between items-center">
-                                    My Account
-                                    <DownOutlined className="text-lg mb-1" />
-                                </Space>
-                            </a>
-                        </Dropdown>
-                        {/* <Popconfirm
-              placement="leftTop"
+              Login
+            </Button>
+            <Button
+              auto
+              flat
+              bordered
+              color={"#001E2B"}
+              className="bg-[#01EC64] border-[#001E2B] text-[#001E2B] hover:bg-[#11FC74] rounded-md text-lg font-bold"
+              onClick={() => router.push("/signup")}
+            >
+              Sign Up
+            </Button>
+          </>
+        ) : (
+          <>
+            <Dropdown
+              menu={{
+                items,
+              }}
+              className="flex md:hidden"
+            >
+              <a onClick={(e) => e.preventDefault()}>
+                <Space className="font-semibold text-lg flex justify-between items-center">
+                  My Account
+                  <DownOutlined className="text-lg mb-1" />
+                </Space>
+              </a>
+            </Dropdown>
+            <Link onClick={() => router.push("/settings")} className="hidden md:block">
+              <Button
+                flat
+                auto
+                color="transparent"
+                className="text-lg font-semibold cursor-pointer hover:text-[#00694B] hover:bg-[#DEF7E5] rounded-md"
+              >
+                My Account
+              </Button>
+            </Link>
+            <Popconfirm
+              placement="bottomRight"
               title="Are you sure you want to Log Out?"
-              // description="Are you sure? You want to delete this task"
               onConfirm={() => {
-                removeLS('secret');
-                router.push('/');
+                removeLS("secret");
+                router.push("/");
                 setIsLoggedIn(false);
               }}
               okText="Yes"
               cancelText="No"
+              className="hidden md:block"
             >
               <Button
                 auto
                 flat
-                bordered
-                color={'danger'}
-                className="border-red-500 text-red-500 hover:bg-red-500 hover:text-[#FFF]  rounded-md text-lg"
+                className="text-lg font-semibold cursor-pointer hover:bg-[#FEEBE5] text-[#960606]"
+                color={"#970606"}
               >
-                Log Out
+                Logout
               </Button>
-            </Popconfirm> */}
-                    </>
-                )}
-            </Navbar.Content>
-            <Navbar.Collapse className="text-[#00694B]">
-                {collapseItems.map((item, index) => (
-                    <Navbar.CollapseItem key={item}>
-                        <div
-                            css={{
-                                minWidth: "100%",
-                            }}
-                            onClick={() => {
-                                router.push(
-                                    item.toLowerCase() === "home"
-                                        ? "/"
-                                        : `/${item.toLowerCase()}`
-                                );
-                                openCollapse && navbarToggleRef.current.click();
-                            }}
-                            className="hover:text-[#00694B] duration-75 text-left"
-                        >
-                            {item}
-                        </div>
-                    </Navbar.CollapseItem>
-                ))}
-            </Navbar.Collapse>
-        </Navbar>
-    );
+            </Popconfirm>
+          </>
+        )}
+      </Navbar.Content>
+      <Navbar.Collapse className="text-[#00694B]">
+        {collapseItems.map((item, index) => (
+          <Navbar.CollapseItem key={item}>
+            <div
+              css={{
+                minWidth: "100%",
+              }}
+              onClick={() => {
+                router.push(item.toLowerCase() === "home" ? "/" : `/${item.toLowerCase()}`);
+                openCollapse && navbarToggleRef.current.click();
+              }}
+              className="hover:text-[#00694B] duration-75 text-left"
+            >
+              {item}
+            </div>
+          </Navbar.CollapseItem>
+        ))}
+      </Navbar.Collapse>
+    </Navbar>
+  );
 }
diff --git a/components/elements/Form/index.js b/components/elements/Form/index.js
index 642c0f6..4492174 100644
--- a/components/elements/Form/index.js
+++ b/components/elements/Form/index.js
@@ -5,37 +5,26 @@ import React from "react";
 import moment from "moment";
 import Link from "next/link";
 export default function Form(props) {
-    return (
-        <Link href={`/dashboard/project/${props.projectId}/${props.id}`}>
-            <div
-                className="bg-[#FFFEFE] shadow-[0px_4px_8px_rgba(0,0,0,0.25)] h-[158px] w-full cursor-pointer
+  return (
+    <Link href={`/dashboard/project/${props.projectId}/${props.id}`}>
+      <div
+        className="bg-[#FFFEFE] shadow-[0px_4px_8px_rgba(0,0,0,0.25)] h-[158px] w-full cursor-pointer
         flex justify-center flex-col items-center hover:bg-[#DEF7E5] transition-all duration-200 my-3 rounded-lg
         "
-            >
-                <div className="h-1/2 w-full p-5 pl-6 text-xs flex items-baseline justify-between">
-                    <div className="flex-row md:flex items-baseline">
-                        <div className="text-2xl font-bold ">
-                            {props.formName}
-                        </div>
-                        <div className="text-xs font-medium ml-0 mt-2 md:mt-0 md:ml-2 w-36 text-[#116149] flex items-baseline ">
-                            <span className="pb-4">
-                                {moment(props.createdAt).fromNow()}
-                            </span>
-                            <button>
-                                <Image
-                                    src={clock}
-                                    className="w-3 h-3 ml-1"
-                                    alt="clock"
-                                />
-                            </button>
-                        </div>
-                    </div>
-                    <Image src={menu} className="float-right" alt="menu" />
-                </div>
-                <div className="h-1/2 w-full p-5 pl-6 text-2xs flex items-end text-[#116149] font-medium">
-                    <div>{props.totalSubmissions} Submissions</div>
-                </div>
-            </div>
-        </Link>
-    );
+      >
+        <div className="h-1/2 w-full p-5 pl-6 text-xs flex items-baseline justify-between">
+          <div className="flex-row md:flex items-baseline">
+            <div className="text-2xl font-bold ">{props.formName}</div>
+          </div>
+          <Image src={menu} className="float-right" alt="menu" />
+        </div>
+        <div className="w-full p-5 pl-6 text-2xs flex items-baseline text-[#116149] font-medium">
+          <span>{moment(props.createdAt).fromNow()}</span>
+          <button>
+            <Image src={clock} className="w-3 h-3 ml-1" alt="clock" />
+          </button>
+        </div>
+      </div>
+    </Link>
+  );
 }
diff --git a/components/elements/FormInput/index.js b/components/elements/FormInput/index.js
index ef94f7a..bff0e19 100644
--- a/components/elements/FormInput/index.js
+++ b/components/elements/FormInput/index.js
@@ -1,141 +1,118 @@
 import React from "react";
-import {
-    Input,
-    Checkbox,
-    Dropdown,
-    Button,
-    Space,
-    Select,
-    message,
-} from "antd";
+import { Input, Checkbox, Dropdown, Button, Space, Select, message } from "antd";
 import { AiOutlineDown, AiOutlinePlus, AiOutlineClose } from "react-icons/ai";
 import CustomParameter from "../CustomParameterInput";
 export default function FormInput({ fields, setFields, hasFileField }) {
-    const options = [
-        { label: "checkbox", value: "checkbox" },
-        { label: "color", value: "color" },
-        { label: "date", value: "date" },
-        { label: "datetime-local", value: "datetime-local" },
-        { label: "email", value: "email" },
-        { label: "file", value: "file" },
-        { label: "hidden", value: "hidden" },
-        { label: "image", value: "image" },
-        { label: "month", value: "month" },
-        { label: "number", value: "number" },
-        { label: "password", value: "password" },
-        { label: "radio", value: "radio" },
-        { label: "range", value: "range" },
-        { label: "reset", value: "reset" },
-        { label: "search", value: "search" },
-        { label: "tel", value: "tel" },
-        { label: "text", value: "text" },
-        { label: "time", value: "time" },
-        { label: "url", value: "url" },
-        { label: "week", value: "week" },
-    ];
-    const menuProps = {
-        options,
-        onClick: handleMenuClick,
-    };
-    const handleMenuClick = (e) => {};
-    const addField = () => {
-        if (fields.length < 10) {
-            setFields([...fields, { name: "", isRequired: false }]);
-        } else {
-            message.error("You cannot add more than 10 fields");
-        }
-    };
-    const handleRemove = (i) => {
-        if (fields.length > 1) {
-            setFields((prev) => {
-                let nFields = [...prev];
-                nFields.splice(i, 1);
-                return nFields;
-            });
-        } else {
-            message.error("At least 1 field is required");
-        }
-    };
-    return (
-        <>
-            <div className="rounded-lg  border-solid border-2 border-[#01684a] p-4 flex flex-col gap-2">
-                <div className="text-lg text-[#01684a] font-bold">
-                    Add Fields to your Form
+  const options = [
+    { label: "checkbox", value: "checkbox" },
+    { label: "color", value: "color" },
+    { label: "date", value: "date" },
+    { label: "datetime-local", value: "datetime-local" },
+    { label: "email", value: "email" },
+    { label: "file", value: "file" },
+    { label: "hidden", value: "hidden" },
+    { label: "image", value: "image" },
+    { label: "month", value: "month" },
+    { label: "number", value: "number" },
+    { label: "password", value: "password" },
+    { label: "radio", value: "radio" },
+    { label: "range", value: "range" },
+    { label: "reset", value: "reset" },
+    { label: "search", value: "search" },
+    { label: "tel", value: "tel" },
+    { label: "text", value: "text" },
+    { label: "time", value: "time" },
+    { label: "url", value: "url" },
+    { label: "week", value: "week" },
+  ];
+  const menuProps = {
+    options,
+    onClick: handleMenuClick,
+  };
+  const handleMenuClick = (e) => {};
+  const addField = () => {
+    if (fields.length < 10) {
+      setFields([...fields, { name: "", isRequired: false }]);
+    } else {
+      message.error("You cannot add more than 10 fields");
+    }
+  };
+  const handleRemove = (i) => {
+    if (fields.length > 1) {
+      setFields((prev) => {
+        let nFields = [...prev];
+        nFields.splice(i, 1);
+        return nFields;
+      });
+    } else {
+      message.error("At least 1 field is required");
+    }
+  };
+  return (
+    <>
+      <div className="rounded-lg  border-solid border-2 border-[#01684a] p-4 flex flex-col gap-2">
+        <div className="text-lg text-[#01684a] font-bold">Add Fields to your Form</div>
+        {fields.map((field, i) => (
+          <div className="flex flex-col gap-4" key={i}>
+            <div className="border-2 rounded-lg p-4 flex flex-col gap-2">
+              <div className="flex flex-row justify-around gap-4 items-center">
+                <div className="w-2/3">
+                  <Select
+                    mode="single"
+                    tokenSeparators={[","]}
+                    style={{ width: "100%" }}
+                    options={
+                      hasFileField
+                        ? options.filter((option) => option.label !== "file" && option.label !== "image")
+                        : options
+                    }
+                    showArrow={true}
+                    placeholder="Select Field Type"
+                    size="large"
+                    maxTagCount={1}
+                    value={field.type}
+                    onChange={(e) =>
+                      setFields((prev) => {
+                        let nFields = [...prev];
+                        nFields[i].type = e;
+                        return nFields;
+                      })
+                    }
+                  />
                 </div>
-                {fields.map((field, i) => (
-                    <div className="flex flex-col gap-4">
-                        <div className="border-2 rounded-lg p-4 flex flex-col gap-2">
-                            <div className="flex flex-row justify-around gap-4 items-center">
-                                <div className="w-2/3">
-                                    <Select
-                                        mode="single"
-                                        tokenSeparators={[","]}
-                                        style={{ width: "100%" }}
-                                        options={
-                                            hasFileField
-                                                ? options.filter(
-                                                      (option) =>
-                                                          option.label !==
-                                                              "file" &&
-                                                          option.label !==
-                                                              "image"
-                                                  )
-                                                : options
-                                        }
-                                        showArrow={true}
-                                        placeholder="Select Field Type"
-                                        size="large"
-                                        maxTagCount={1}
-                                        value={field.type}
-                                        onChange={(e) =>
-                                            setFields((prev) => {
-                                                let nFields = [...prev];
-                                                nFields[i].type = e;
-                                                return nFields;
-                                            })
-                                        }
-                                    />
-                                </div>
-                                <div className="w-full">
-                                    <Input
-                                        placeholder="Field Name (as per HTML)"
-                                        className="rounded-lg "
-                                        value={field.name}
-                                        onChange={(e) =>
-                                            setFields((prev) => {
-                                                let nFields = [...prev];
-                                                nFields[i].name =
-                                                    e.target.value;
-                                                return nFields;
-                                            })
-                                        }
-                                    />
-                                </div>
-                                <div>
-                                    <Checkbox
-                                        checked={field.isRequired}
-                                        onChange={(e) =>
-                                            setFields((prev) => {
-                                                let nFields = [...prev];
-                                                nFields[i].isRequired =
-                                                    e.target.checked;
-                                                return nFields;
-                                            })
-                                        }
-                                    >
-                                        Required
-                                    </Checkbox>
-                                </div>
-                                <div onClick={() => handleRemove(i)}>
-                                    <AiOutlineClose
-                                        size={20}
-                                        strokeWidth={12}
-                                        className="cursor-pointer"
-                                        fill="#970606"
-                                    />
-                                </div>
-                            </div>
-                            {/* <div className="flex flex-col gap-2">
+                <div className="w-full">
+                  <Input
+                    placeholder="Field Name (as per HTML)"
+                    className="rounded-lg "
+                    value={field.name}
+                    onChange={(e) =>
+                      setFields((prev) => {
+                        let nFields = [...prev];
+                        nFields[i].name = e.target.value;
+                        return nFields;
+                      })
+                    }
+                  />
+                </div>
+                <div>
+                  <Checkbox
+                    checked={field.isRequired}
+                    onChange={(e) =>
+                      setFields((prev) => {
+                        let nFields = [...prev];
+                        nFields[i].isRequired = e.target.checked;
+                        return nFields;
+                      })
+                    }
+                  >
+                    Required
+                  </Checkbox>
+                </div>
+                <div onClick={() => handleRemove(i)}>
+                  <AiOutlineClose size={20} strokeWidth={12} className="cursor-pointer" fill="#970606" />
+                </div>
+              </div>
+              {/* <div className="flex flex-col gap-2">
            <CustomParameter />
          </div>
          <div className="self-end">
@@ -146,20 +123,20 @@ export default function FormInput({ fields, setFields, hasFileField }) {
              </Space>
            </button>
          </div> */}
-                        </div>
-                    </div>
-                ))}
-                <button
-                    className="rounded-lg bg-[#DEF7E5] text-[#023430] font-semibold p-2 w-32"
-                    onClick={addField}
-                    type="button"
-                >
-                    <Space>
-                        <AiOutlinePlus size={16} strokeWidth={12} />
-                        New Field
-                    </Space>
-                </button>
             </div>
-        </>
-    );
+          </div>
+        ))}
+        <button
+          className="rounded-lg bg-[#DEF7E5] text-[#023430] font-semibold p-2 w-32"
+          onClick={addField}
+          type="button"
+        >
+          <Space>
+            <AiOutlinePlus size={16} strokeWidth={12} />
+            New Field
+          </Space>
+        </button>
+      </div>
+    </>
+  );
 }
diff --git a/components/sections/Feature/index.js b/components/sections/Feature/index.js
index 60788d2..e8ce555 100644
--- a/components/sections/Feature/index.js
+++ b/components/sections/Feature/index.js
@@ -3,145 +3,127 @@ import templateCode from "../../../assets/images/illustrations/templateCode.png"
 import Image from "next/image";
 import { useInView } from "react-intersection-observer";
 const feature = () => {
-    const { ref: text, inView: textVisible } = useInView({
-        triggerOnce: true,
-        rootMargin: "300px",
-    });
-    const { ref: code, inView: codeVisible } = useInView({
-        triggerOnce: true,
-        rootMargin: "300px",
-    });
-    const { ref: circle1, inView: circle1Visible } = useInView({
-        triggerOnce: true,
-        rootMargin: "300px",
-    });
-    const { ref: circle2, inView: circle2Visible } = useInView({
-        triggerOnce: true,
-        rootMargin: "300px",
-    });
-    const { ref: circle3, inView: circle3Visible } = useInView({
-        triggerOnce: true,
-        rootMargin: "300px",
-    });
-    return (
-        <>
-            <div className="relative min-h-[110vh] h-fit w-full">
-                <svg
-                    className="max-600:hidden"
-                    width="100vw"
-                    height="110vh"
-                    viewBox="0 0 1728 982"
-                    fill="none"
-                    preserveAspectRatio="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <path
-                        d="M467.106 0H1497.77H2186.85V981.501H-80L-68.7965 259.247C-68.7965 259.247 -63.0131 251.419 -54.8447 240.446C-72.5223 254.119 -58.5238 220.888 35.7699 130.611C172.196 -0.00463867 332.513 5.00678 467.106 0Z"
-                        fill="url(#paint0_linear_554_103)"
-                    />
-                    <path
-                        d="M467.106 0H1497.77H2186.85V981.501H-80L-68.7965 259.247C-68.7965 259.247 -63.0131 251.419 -54.8447 240.446C-72.5223 254.119 -58.5238 220.888 35.7699 130.611C172.196 -0.00463867 332.513 5.00678 467.106 0Z"
-                        fill="url(#paint1_linear_554_103)"
-                    />
-                    <defs>
-                        <linearGradient
-                            id="paint0_linear_554_103"
-                            x1="308.882"
-                            y1="128.832"
-                            x2="1723.83"
-                            y2="1595.72"
-                            gradientUnits="userSpaceOnUse"
-                        >
-                            <stop offset="0.0999588" stopColor="#001E2B" />
-                            <stop offset="0.629293" />
-                        </linearGradient>
-                        <linearGradient
-                            id="paint1_linear_554_103"
-                            x1="308.882"
-                            y1="128.832"
-                            x2="1723.83"
-                            y2="1595.72"
-                            gradientUnits="userSpaceOnUse"
-                        >
-                            <stop offset="0.0999588" stopColor="#001E2B" />
-                            <stop offset="0.629293" />
-                        </linearGradient>
-                    </defs>
-                </svg>
-                <div
-                    ref={code}
-                    className={`reveal-bottom  ${
-                        codeVisible ? "active-reveal" : "opacity-0"
-                    } mt-0 absolute max-600:top-4 top-[30vh] right-[15%] z-10 h-[20vw] w-[20vw] min-w-[400px] min-h-[400px] 
+  const { ref: text, inView: textVisible } = useInView({
+    triggerOnce: true,
+    rootMargin: "300px",
+  });
+  const { ref: code, inView: codeVisible } = useInView({
+    triggerOnce: true,
+    rootMargin: "300px",
+  });
+  const { ref: circle1, inView: circle1Visible } = useInView({
+    triggerOnce: true,
+    rootMargin: "300px",
+  });
+  const { ref: circle2, inView: circle2Visible } = useInView({
+    triggerOnce: true,
+    rootMargin: "300px",
+  });
+  const { ref: circle3, inView: circle3Visible } = useInView({
+    triggerOnce: true,
+    rootMargin: "300px",
+  });
+  return (
+    <>
+      <div className="relative min-h-[110vh] h-fit w-full">
+        <svg
+          className="max-600:hidden"
+          width="100vw"
+          height="110vh"
+          viewBox="0 0 1728 982"
+          fill="none"
+          preserveAspectRatio="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M467.106 0H1497.77H2186.85V981.501H-80L-68.7965 259.247C-68.7965 259.247 -63.0131 251.419 -54.8447 240.446C-72.5223 254.119 -58.5238 220.888 35.7699 130.611C172.196 -0.00463867 332.513 5.00678 467.106 0Z"
+            fill="url(#paint0_linear_554_103)"
+          />
+          <path
+            d="M467.106 0H1497.77H2186.85V981.501H-80L-68.7965 259.247C-68.7965 259.247 -63.0131 251.419 -54.8447 240.446C-72.5223 254.119 -58.5238 220.888 35.7699 130.611C172.196 -0.00463867 332.513 5.00678 467.106 0Z"
+            fill="url(#paint1_linear_554_103)"
+          />
+          <defs>
+            <linearGradient
+              id="paint0_linear_554_103"
+              x1="308.882"
+              y1="128.832"
+              x2="1723.83"
+              y2="1595.72"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset="0.0999588" stopColor="#001E2B" />
+              <stop offset="0.629293" />
+            </linearGradient>
+            <linearGradient
+              id="paint1_linear_554_103"
+              x1="308.882"
+              y1="128.832"
+              x2="1723.83"
+              y2="1595.72"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset="0.0999588" stopColor="#001E2B" />
+              <stop offset="0.629293" />
+            </linearGradient>
+          </defs>
+        </svg>
+        <div
+          ref={code}
+          className={`reveal-bottom  ${
+            codeVisible ? "active-reveal" : "opacity-0"
+          } mt-0 absolute max-600:top-4 top-[30vh] right-[15%] z-10 h-[20vw] w-[20vw] min-w-[400px] min-h-[400px] 
            max-xl:right-16 md:min-w-[300px] md:min-h[300px]  600:min-w-[200px] 600:min-h[200px] max-md:right-8 max-600:w-[80vw] max-600:min-h-[80vw] max-600:min-w-[80vw] max-600:h-[80vw] max-600:left-[5vw]`}
+        >
+          <Image src={templateCode} alt={"templateCode"} preserveAspectRatio="none" />
+        </div>
+        <div className="absolute max-600:relative max-600:min-h-[120vh] max-600:h-fit top-0 max-600:bg-[#001E2B] flex justify-center h-[100vh]">
+          <div className={`h-[100vh] w-[60vw] min-w-[0] max-600:min-w-full max-600:w-[100vw]`}>
+            <div className="max-600:absolute max-600:top-0 max-600:w-full max-600:ml-0 max-600:pl-6 max-600:left-0 absolute flex justify-center left-[100px] top-0 w-[50%] h-[100%] max-md:justify-start max-md:ml-6">
+              <div
+                ref={text}
+                className={`reveal-bottom ${
+                  textVisible ? "active-reveal" : "opacity-0"
+                } max-600:absolute max-600:top-[60vw] leading-normal max-600:w-[85vw] max-600:h-fit z-10 w-[60%] h-[60%] mt-[22vh]  text-[#FFFFFF] max-xl:w-[80%]`}
+              >
+                <h5
+                  className={`max-600:hidden leading-normal  font-semibold text-6xl text-[#FFFFFF] max-lg:text-5xl max-md:text-4xl`}
                 >
-                    <Image
-                        src={templateCode}
-                        alt={"templateCode"}
-                        preserveAspectRatio="none"
-                    />
-                </div>
-                <div className="absolute max-600:relative max-600:min-h-[120vh] max-600:h-fit top-0 max-600:bg-[#001E2B] flex justify-center h-[100vh]">
-                    <div
-                        className={`h-[100vh] w-[60vw] min-w-[0] max-600:min-w-full max-600:w-[100vw]`}
-                    >
-                        <div className="max-600:absolute max-600:top-0 max-600:w-full max-600:ml-0 max-600:pl-6 max-600:left-0 absolute flex justify-center left-[100px] top-0 w-[50%] h-[100%] max-md:justify-start max-md:ml-6">
-                            <div
-                                ref={text}
-                                className={`reveal-bottom ${
-                                    textVisible ? "active-reveal" : "opacity-0"
-                                } max-600:absolute max-600:top-[60vw] leading-normal max-600:w-[85vw] max-600:h-fit z-10 w-[60%] h-[60%] mt-[22vh] font-sans text-[#FFFFFF] max-xl:w-[80%]`}
-                            >
-                                <h5
-                                    className={`max-600:hidden leading-normal  font-semibold text-6xl text-[#FFFFFF] max-lg:text-5xl max-md:text-4xl`}
-                                >
-                                    <span className="text-[#01EC64]">JSON</span>{" "}
-                                    Schema
-                                    <br />
-                                    Validation
-                                </h5>
-                                <h5 className="600:hidden leading-normal  font-semibold text-3xl text-[#FFFFFF]">
-                                    <span className="text-[#01EC64]">JSON</span>{" "}
-                                    Schema Validation
-                                </h5>
-                                <p className="max-600:w-full leading-normal   max-600:mt-4 mt-16 font-normal text-2xl w-[300px] max-md:text-xl">
-                                    Our JSON Schema Validation is like a
-                                    vigilant guardian that meticulously checks
-                                    every piece of data against predefined
-                                    rules, ensuring that it perfectly aligns
-                                    with your specified schema.
-                                    {/* Gone are the
-                                    days of frustrating data mismatches and
-                                    compatibility issues. With our cutting-edge
-                                    validation system, you can rest assured that
-                                    your data is always in its optimal form,
-                                    meeting all the necessary requirements
-                                    effortlessly. */}
-                                </p>
-                            </div>
-                        </div>
-                        <div
-                            ref={circle1}
-                            className={`reveal-bottom ${
-                                circle1Visible ? "active-reveal" : "opacity-0"
-                            } max-600:hidden absolute right-[30vw] top-[10vh] homeCircleColor w-[18vw] h-[18vw] rounded-full min-w-[200px] min-h-[200px] 
+                  <span className="text-[#01EC64]">JSON</span> Schema
+                  <br />
+                  Validation
+                </h5>
+                <h5 className="600:hidden leading-normal  font-semibold text-3xl text-[#FFFFFF]">
+                  <span className="text-[#01EC64]">JSON</span> Schema Validation
+                </h5>
+                <p className="max-600:w-full leading-normal   max-600:mt-4 mt-16 font-normal text-2xl w-[300px] max-md:text-xl">
+                  Our JSON Schema Validation is like a vigilant guardian that meticulously checks every piece of data
+                  against predefined rules, ensuring that it perfectly aligns with your specified schema.
+                </p>
+              </div>
+            </div>
+            <div
+              ref={circle1}
+              className={`reveal-bottom ${
+                circle1Visible ? "active-reveal" : "opacity-0"
+              } max-600:hidden absolute right-[30vw] top-[10vh] homeCircleColor w-[18vw] h-[18vw] rounded-full min-w-[200px] min-h-[200px] 
                 min-[600px]:top-[22%] min-[600px]:right-[25%] md:right-[30%] lg:right-[-18%] md:top-[20%] xl:top-[10%] min-[600px]:min-w-[100px] max-md:top-[38vw] max-md:right-[25vw] max-md:min-w-[130px] max-md:min-h-[130px] min-[600px]:min-h-[100px] `}
-                        ></div>
-                        <div
-                            ref={circle2}
-                            className={`max-600:right-8 max-600:top-64 absolute xl:right-[-55%] top-[65vh] homeCircleColor w-[14vw] h-[14vw] rounded-full max-md:min-w-[100px] max-md:min-h-[100px] min-w-[200px] min-h-[200px] 
+            ></div>
+            <div
+              ref={circle2}
+              className={`max-600:right-8 max-600:top-64 absolute xl:right-[-55%] top-[65vh] homeCircleColor w-[14vw] h-[14vw] rounded-full max-md:min-w-[100px] max-md:min-h-[100px] min-w-[200px] min-h-[200px] 
                min-[600px]:right-[0%] max-md:top-[40%] sm:right-0  min-[600px]:min-w-[100px] min-[600px]:min-h-[100px] md:top-[50%] `}
-                        ></div>
-                        <div
-                            ref={circle3}
-                            className={`reveal-bottom ${
-                                circle3Visible ? "active-reveal" : "opacity-0"
-                            } max-600:top-4 max-600:right-28 max-600:w-[100px] max-600:h-[100px] absolute right-[-45%] top-[22vh] homeCircleColor w-[5vw] h-[5vw] rounded-full min-w-[75px] min-h-[75px] max-xl:right-[3%] max-xl:top-[26vh]`}
-                        ></div>
-                    </div>
-                </div>
-            </div>
-        </>
-    );
+            ></div>
+            <div
+              ref={circle3}
+              className={`reveal-bottom ${
+                circle3Visible ? "active-reveal" : "opacity-0"
+              } max-600:top-4 max-600:right-28 max-600:w-[100px] max-600:h-[100px] absolute right-[-45%] top-[22vh] homeCircleColor w-[5vw] h-[5vw] rounded-full min-w-[75px] min-h-[75px] max-xl:right-[3%] max-xl:top-[26vh]`}
+            ></div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
 };
 export default feature;
diff --git a/components/sections/Responses/index.js b/components/sections/Responses/index.js
index 3ef4de8..bada3f9 100644
--- a/components/sections/Responses/index.js
+++ b/components/sections/Responses/index.js
@@ -1,207 +1,182 @@
 import React from "react";
 import { useInView } from "react-intersection-observer";
 const responses = () => {
-    const { ref: circle1, inView: circle1Visible } = useInView({
-        triggerOnce: true,
-        rootMargin: "300px",
-    });
-    const { ref: circle2, inView: circle2Visible } = useInView({
-        triggerOnce: true,
-        rootMargin: "300px",
-    });
-    const { ref: docImg, inView: docImgVisible } = useInView({
-        triggerOnce: true,
-        rootMargin: "300px",
-    });
-    const { ref: text, inView: textVisible } = useInView({
-        triggerOnce: true,
-        rootMargin: "300px",
-    });
-    return (
-        <>
-            <div className=" h-[100vh] relative max-600:bg-[#001E2B]">
-                <svg
-                    className=" z-0 h-[100vh] w-[48.58%] max-600:hidden -mt-[5px] "
-                    preserveAspectRatio="none"
-                    width="100%"
-                    height="100%"
-                    viewBox="0 0 831 1006"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <path
-                        d="M509.514 650.312C413.511 847.371 177.188 772.116 0 1006V0.000106758L822 0C831 150 621.596 153.921 589.385 337.02C557.173 520.119 522.716 622.173 509.514 650.312Z"
-                        fill="url(#paint0_linear_759_98)"
-                    />
-                    <defs>
-                        <linearGradient
-                            id="paint0_linear_759_98"
-                            x1="-395.268"
-                            y1="-84.2207"
-                            x2="634.578"
-                            y2="826.778"
-                            gradientUnits="userSpaceOnUse"
-                        >
-                            <stop stopColor="#001E2B" />
-                            <stop offset="0.772793" />
-                        </linearGradient>
-                    </defs>
-                </svg>
+  const { ref: circle1, inView: circle1Visible } = useInView({
+    triggerOnce: true,
+    rootMargin: "300px",
+  });
+  const { ref: circle2, inView: circle2Visible } = useInView({
+    triggerOnce: true,
+    rootMargin: "300px",
+  });
+  const { ref: docImg, inView: docImgVisible } = useInView({
+    triggerOnce: true,
+    rootMargin: "300px",
+  });
+  const { ref: text, inView: textVisible } = useInView({
+    triggerOnce: true,
+    rootMargin: "300px",
+  });
+  return (
+    <>
+      <div className=" h-[100vh] relative max-600:bg-[#001E2B]">
+        <svg
+          className=" z-0 h-[100vh] w-[48.58%] max-600:hidden -mt-[5px] "
+          preserveAspectRatio="none"
+          width="100%"
+          height="100%"
+          viewBox="0 0 831 1006"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M509.514 650.312C413.511 847.371 177.188 772.116 0 1006V0.000106758L822 0C831 150 621.596 153.921 589.385 337.02C557.173 520.119 522.716 622.173 509.514 650.312Z"
+            fill="url(#paint0_linear_759_98)"
+          />
+          <defs>
+            <linearGradient
+              id="paint0_linear_759_98"
+              x1="-395.268"
+              y1="-84.2207"
+              x2="634.578"
+              y2="826.778"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="#001E2B" />
+              <stop offset="0.772793" />
+            </linearGradient>
+          </defs>
+        </svg>
 
-                <div
-                    ref={circle1}
-                    className={`reveal-bottom ${
-                        circle1Visible ? "active-reveal" : ""
-                    } max-600:float-right max-600:top-[18vh] max-600:mt-4 max-600:ml-4 max-600:right-8 max-600:left-auto max-600:w-[130px] max-600:h-[130px] absolute left-[10vw] top-[-5vw] homeCircleColor rounded-full w-[10vw] h-[10vw]
+        <div
+          ref={circle1}
+          className={`reveal-bottom ${
+            circle1Visible ? "active-reveal" : ""
+          } max-600:float-right max-600:top-[18vh] max-600:mt-4 max-600:ml-4 max-600:right-8 max-600:left-auto max-600:w-[130px] max-600:h-[130px] absolute left-[10vw] top-[-5vw] homeCircleColor rounded-full w-[10vw] h-[10vw]
           `}
-                ></div>
-                <div
-                    ref={circle2}
-                    className={`reveal-bottom ${
-                        circle2Visible ? "active-reveal" : ""
-                    } max-800:hidden absolute left-[5vw] top-[23vh] homeCircleColor2 w-[5vw] h-[5vw] rounded-full`}
-                ></div>
+        ></div>
+        <div
+          ref={circle2}
+          className={`reveal-bottom ${
+            circle2Visible ? "active-reveal" : ""
+          } max-800:hidden absolute left-[5vw] top-[23vh] homeCircleColor2 w-[5vw] h-[5vw] rounded-full`}
+        ></div>
 
-                <svg
-                    ref={docImg}
-                    className={`reveal-bottom ${
-                        docImgVisible ? "active-reveal" : ""
-                    } max-600:hidden max-600:-left-8 max-600:h-[300px] max-600:w-[300px] sm:top-[45vh] md:top-[40vh] lg:top-[30vh] xl:top-[30vh] 2xl:top-[15vh] absolute top-[12vh] left-[10vw] z-10 h-[25vw] w-[25vw]`}
-                    width="100%"
-                    height="100%"
-                    viewBox="0 0 385 489"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <path
-                        d="M115.137 39.8581L274.986 3.90716C287.56 4.14263 293.36 12.4103 294.689 16.5148L380.841 407.889C382.882 418.528 375.292 424.259 371.242 425.795L108.53 484.881C95.6422 482.38 91.1619 476.039 90.5328 473.181L23.6115 169.171L115.137 39.8581Z"
-                        fill="#116148"
-                    />
-                    <g filter="url(#filter0_d_759_106)">
-                        <path
-                            d="M133.675 127.734L114.417 40.249L23.4231 169.514L122.202 148.182C133.092 143.469 134.388 132.586 133.675 127.734Z"
-                            fill="#12AB51"
-                        />
-                    </g>
-                    <g clipPath="url(#clip0_759_106)">
-                        <path
-                            d="M167.63 320.421C155.96 323.003 145.047 320.851 134.891 313.964C124.73 307.079 118.286 297.342 115.56 284.752C113.223 273.961 114.155 263.679 118.355 253.907C122.555 244.134 129.273 236.994 138.51 232.486C138.533 222.043 141.931 211.36 148.705 200.438C155.478 189.517 163.802 182.963 173.676 180.779C177.908 179.842 181.884 180.665 185.604 183.246C189.319 185.834 191.671 189.41 192.66 193.976L203.535 244.195L208.887 235.4C209.968 233.566 211.568 232.415 213.686 231.946C215.8 231.478 217.806 231.904 219.704 233.224C221.444 234.434 222.569 236.215 223.078 238.567C223.587 240.918 223.301 243.011 222.22 244.845L206.888 270.853C206.298 271.853 205.592 272.624 204.768 273.166C203.946 273.713 203.022 274.101 201.996 274.328C200.97 274.554 199.971 274.593 198.998 274.443C198.026 274.298 197.065 273.896 196.116 273.236L171.437 256.08C169.697 254.871 168.548 253.13 167.992 250.858C167.432 248.593 167.741 246.46 168.92 244.459C170.002 242.626 171.591 241.439 173.689 240.899C175.793 240.364 177.779 240.687 179.648 241.869L188.146 247.6L177.271 197.38C167.944 201.473 161.479 208.23 157.874 217.65C154.271 227.076 153.413 236.147 155.301 244.863L151.453 245.714C144.015 247.36 138.282 251.6 134.252 258.436C130.222 265.271 129.076 272.701 130.814 280.725C132.551 288.749 136.663 295.016 143.149 299.524C149.635 304.033 156.597 305.465 164.035 303.82L256.369 283.392C261.755 282.2 265.873 279.187 268.724 274.352C271.574 269.517 272.37 264.195 271.112 258.384C269.853 252.574 266.93 248.074 262.343 244.885C257.755 241.695 252.768 240.696 247.382 241.888L235.84 244.442L232.245 227.84C230.807 221.199 228.056 215.319 223.991 210.199C219.927 205.085 215.152 201.032 209.667 198.042L205.488 178.742C216.026 181.485 225.079 186.986 232.646 195.245C240.212 203.499 245.208 213.229 247.634 224.435C256.723 223.585 264.957 226.074 272.336 231.905C279.712 237.742 284.434 245.434 286.501 254.98C288.747 265.355 287.292 274.921 282.136 283.676C276.973 292.426 269.582 297.865 259.964 299.993L167.63 320.421Z"
-                            fill="white"
-                        />
-                    </g>
-                    <defs>
-                        <filter
-                            id="filter0_d_759_106"
-                            x="23.4231"
-                            y="40.249"
-                            width="118.412"
-                            height="137.265"
-                            filterUnits="userSpaceOnUse"
-                            colorInterpolationFilters="sRGB"
-                        >
-                            <feFlood
-                                floodOpacity="0"
-                                result="BackgroundImageFix"
-                            />
-                            <feColorMatrix
-                                in="SourceAlpha"
-                                type="matrix"
-                                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                                result="hardAlpha"
-                            />
-                            <feOffset dx="4" dy="4" />
-                            <feGaussianBlur stdDeviation="2" />
-                            <feComposite in2="hardAlpha" operator="out" />
-                            <feColorMatrix
-                                type="matrix"
-                                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
-                            />
-                            <feBlend
-                                mode="normal"
-                                in2="BackgroundImageFix"
-                                result="effect1_dropShadow_759_106"
-                            />
-                            <feBlend
-                                mode="normal"
-                                in="SourceGraphic"
-                                in2="effect1_dropShadow_759_106"
-                                result="shape"
-                            />
-                        </filter>
-                        <clipPath id="clip0_759_106">
-                            <rect
-                                width="189.133"
-                                height="203.835"
-                                fill="white"
-                                transform="matrix(0.97639 -0.216014 0.211634 0.977349 81.6676 165.471)"
-                            />
-                        </clipPath>
-                    </defs>
-                </svg>
+        <svg
+          ref={docImg}
+          className={`reveal-bottom ${
+            docImgVisible ? "active-reveal" : ""
+          } max-600:hidden max-600:-left-8 max-600:h-[300px] max-600:w-[300px] sm:top-[45vh] md:top-[40vh] lg:top-[30vh] xl:top-[30vh] 2xl:top-[15vh] absolute top-[12vh] left-[10vw] z-10 h-[25vw] w-[25vw]`}
+          width="100%"
+          height="100%"
+          viewBox="0 0 385 489"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M115.137 39.8581L274.986 3.90716C287.56 4.14263 293.36 12.4103 294.689 16.5148L380.841 407.889C382.882 418.528 375.292 424.259 371.242 425.795L108.53 484.881C95.6422 482.38 91.1619 476.039 90.5328 473.181L23.6115 169.171L115.137 39.8581Z"
+            fill="#116148"
+          />
+          <g filter="url(#filter0_d_759_106)">
+            <path
+              d="M133.675 127.734L114.417 40.249L23.4231 169.514L122.202 148.182C133.092 143.469 134.388 132.586 133.675 127.734Z"
+              fill="#12AB51"
+            />
+          </g>
+          <g clipPath="url(#clip0_759_106)">
+            <path
+              d="M167.63 320.421C155.96 323.003 145.047 320.851 134.891 313.964C124.73 307.079 118.286 297.342 115.56 284.752C113.223 273.961 114.155 263.679 118.355 253.907C122.555 244.134 129.273 236.994 138.51 232.486C138.533 222.043 141.931 211.36 148.705 200.438C155.478 189.517 163.802 182.963 173.676 180.779C177.908 179.842 181.884 180.665 185.604 183.246C189.319 185.834 191.671 189.41 192.66 193.976L203.535 244.195L208.887 235.4C209.968 233.566 211.568 232.415 213.686 231.946C215.8 231.478 217.806 231.904 219.704 233.224C221.444 234.434 222.569 236.215 223.078 238.567C223.587 240.918 223.301 243.011 222.22 244.845L206.888 270.853C206.298 271.853 205.592 272.624 204.768 273.166C203.946 273.713 203.022 274.101 201.996 274.328C200.97 274.554 199.971 274.593 198.998 274.443C198.026 274.298 197.065 273.896 196.116 273.236L171.437 256.08C169.697 254.871 168.548 253.13 167.992 250.858C167.432 248.593 167.741 246.46 168.92 244.459C170.002 242.626 171.591 241.439 173.689 240.899C175.793 240.364 177.779 240.687 179.648 241.869L188.146 247.6L177.271 197.38C167.944 201.473 161.479 208.23 157.874 217.65C154.271 227.076 153.413 236.147 155.301 244.863L151.453 245.714C144.015 247.36 138.282 251.6 134.252 258.436C130.222 265.271 129.076 272.701 130.814 280.725C132.551 288.749 136.663 295.016 143.149 299.524C149.635 304.033 156.597 305.465 164.035 303.82L256.369 283.392C261.755 282.2 265.873 279.187 268.724 274.352C271.574 269.517 272.37 264.195 271.112 258.384C269.853 252.574 266.93 248.074 262.343 244.885C257.755 241.695 252.768 240.696 247.382 241.888L235.84 244.442L232.245 227.84C230.807 221.199 228.056 215.319 223.991 210.199C219.927 205.085 215.152 201.032 209.667 198.042L205.488 178.742C216.026 181.485 225.079 186.986 232.646 195.245C240.212 203.499 245.208 213.229 247.634 224.435C256.723 223.585 264.957 226.074 272.336 231.905C279.712 237.742 284.434 245.434 286.501 254.98C288.747 265.355 287.292 274.921 282.136 283.676C276.973 292.426 269.582 297.865 259.964 299.993L167.63 320.421Z"
+              fill="white"
+            />
+          </g>
+          <defs>
+            <filter
+              id="filter0_d_759_106"
+              x="23.4231"
+              y="40.249"
+              width="118.412"
+              height="137.265"
+              filterUnits="userSpaceOnUse"
+              colorInterpolationFilters="sRGB"
+            >
+              <feFlood floodOpacity="0" result="BackgroundImageFix" />
+              <feColorMatrix
+                in="SourceAlpha"
+                type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                result="hardAlpha"
+              />
+              <feOffset dx="4" dy="4" />
+              <feGaussianBlur stdDeviation="2" />
+              <feComposite in2="hardAlpha" operator="out" />
+              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_759_106" />
+              <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_759_106" result="shape" />
+            </filter>
+            <clipPath id="clip0_759_106">
+              <rect
+                width="189.133"
+                height="203.835"
+                fill="white"
+                transform="matrix(0.97639 -0.216014 0.211634 0.977349 81.6676 165.471)"
+              />
+            </clipPath>
+          </defs>
+        </svg>
 
-                <div className=" max-600:w-[90vw] max-600:top-[50vh] max-600:translate-y-[-40%] max-600:left-0 max-600:mx-8 absolute top-0 left-[40vw] inline-block w-[60vw] h-[100vh]">
-                    <div
-                        ref={text}
-                        className={`reveal-bottom ${
-                            textVisible ? "active-reveal" : ""
-                        } max-600:pr-8 max-600:top-0 max-600:w-[90vw] absolute top-[calc(46vh-10vw)] left-0 h-[400px] w-[50vw] max-800:w-[54vw]`}
-                    >
-                        <div className=" max-600:text-2xl max-600:text-[#FFFFFF] max-800:text-3xl text-[52px] font-bold font-sans max-1140:text-4xl">
-                            Save{" "}
-                            <span className="text-[#116148] max-600:text-[#01EC64]">
-                                1000
-                            </span>{" "}
-                            form responses for{" "}
-                            <span className="text-[#116148] max-600:text-[#01EC64]">
-                                30
-                            </span>{" "}
-                            days !
-                        </div>
+        <div className=" max-600:w-[90vw] max-600:top-[50vh] max-600:translate-y-[-40%] max-600:left-0 max-600:mx-8 absolute top-0 left-[40vw] inline-block w-[60vw] h-[100vh]">
+          <div
+            ref={text}
+            className={`reveal-bottom ${
+              textVisible ? "active-reveal" : ""
+            } max-600:pr-8 max-600:top-0 max-600:w-[90vw] absolute top-[calc(46vh-10vw)] left-0 h-[400px] w-[50vw] max-800:w-[54vw]`}
+          >
+            <div className=" max-600:text-2xl max-600:text-[#FFFFFF] max-800:text-3xl text-[52px] font-bold max-1140:text-4xl">
+              Save <span className="text-[#116148] max-600:text-[#01EC64]">1000</span> form responses for{" "}
+              <span className="text-[#116148] max-600:text-[#01EC64]">30</span> days !
+            </div>
 
-                        <div className="max-600:mt-16 max-600:text-[#FFFFFF] max-600:w-[80vw] max-600:text-lg max-800:text-base text-[#116148] w-[75%] font-medium font-sans text-xl max-1140:text-lg max-1140:mt-2">
-                            Our exceptional capability to save 1000 form
-                            responses ensures that you can capture and retain
-                            valuable user data like never before. Whether you're
-                            running a high-demand survey, managing event
-                            registrations, or receiving a surge of feedback, our
-                            feature empowers you to effortlessly handle large
-                            volumes of responses without skipping a beat.
-                        </div>
-                    </div>
-                    <div className="max-600:hidden z-0 absolute right-0 bottom-[calc(23vh-3px)] w-[10vw] h-[55vh]">
-                        <svg
-                            width="100%"
-                            height="100%"
-                            preserveAspectRatio="none"
-                            viewBox="0 0 184 622"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                        >
-                            <path
-                                d="M15.8336 523C14.5004 554.2 4.72236 602 0 622C27.7236 616.922 114.397 484.414 114.397 484.414C114.397 484.414 183.665 366.98 205 340.481V0C130.456 77.3074 76.6904 189.555 55.0001 246C14.5275 351.322 17.5001 484 15.8336 523Z"
-                                fill="#00694B"
-                            />
-                        </svg>
-                    </div>
-                    <div className="max-600:hidden z-10 absolute right-0 bottom-0 inline-block w-[35vw] h-[57vh]">
-                        <svg
-                            width="100%"
-                            height="100%"
-                            preserveAspectRatio="none"
-                            viewBox="0 0 510 486"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                        >
-                            <path
-                                d="M310.484 322.183C204.115 416.773 85.4788 444.243 0 486H542V0.0553161H537.023C515.174 -4.07452 420.755 224.122 310.484 322.183Z"
-                                fill="#01EC64"
-                            />
-                        </svg>
-                    </div>
-                </div>
+            <div className="max-600:mt-16 max-600:text-[#FFFFFF] max-600:w-[80vw] max-600:text-lg max-800:text-base text-[#116148] w-[75%] font-medium  text-xl max-1140:text-lg max-1140:mt-2">
+              Our exceptional capability to save 1000 form responses ensures that you can capture and retain valuable
+              user data like never before. Whether you're running a high-demand survey, managing event registrations, or
+              receiving a surge of feedback, our feature empowers you to effortlessly handle large volumes of responses
+              without skipping a beat.
             </div>
-        </>
-    );
+          </div>
+          <div className="max-600:hidden z-0 absolute right-0 bottom-[calc(23vh-3px)] w-[10vw] h-[55vh]">
+            <svg
+              width="100%"
+              height="100%"
+              preserveAspectRatio="none"
+              viewBox="0 0 184 622"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.8336 523C14.5004 554.2 4.72236 602 0 622C27.7236 616.922 114.397 484.414 114.397 484.414C114.397 484.414 183.665 366.98 205 340.481V0C130.456 77.3074 76.6904 189.555 55.0001 246C14.5275 351.322 17.5001 484 15.8336 523Z"
+                fill="#00694B"
+              />
+            </svg>
+          </div>
+          <div className="max-600:hidden z-10 absolute right-0 bottom-0 inline-block w-[35vw] h-[57vh]">
+            <svg
+              width="100%"
+              height="100%"
+              preserveAspectRatio="none"
+              viewBox="0 0 510 486"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M310.484 322.183C204.115 416.773 85.4788 444.243 0 486H542V0.0553161H537.023C515.174 -4.07452 420.755 224.122 310.484 322.183Z"
+                fill="#01EC64"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </>
+  );
 };
 
 export default responses;
diff --git a/components/sections/SingleFileUpload/index.js b/components/sections/SingleFileUpload/index.js
index 4db8884..1ebfdf5 100644
--- a/components/sections/SingleFileUpload/index.js
+++ b/components/sections/SingleFileUpload/index.js
@@ -1,213 +1,188 @@
 import React from "react";
 import { useInView } from "react-intersection-observer";
 const SingleFileUpload = () => {
-    const { ref: docImg, inView: docImgVisible } = useInView({
-        triggerOnce: true,
-        rootMargin: "300px",
-    });
-    const { ref: text, inView: textVisible } = useInView({
-        triggerOnce: true,
-        rootMargin: "300px",
-    });
-    return (
-        <>
-            <div className="max-600:h-[80vh] h-[100vh] relative bg-[#01EC64] max-600:bg-[#01694b]">
-                <svg
-                    className="absolute -bottom-[210px] left-0 600:hidden"
-                    width="111"
-                    height="260"
-                    viewBox="0 0 111 260"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <path
-                        d="M-40 3.06388C-15.7672 0.172317 47.2144 0.415924 91.7985 40.8607C151.056 94.6169 47.8532 184.829 -40 258.5"
-                        stroke="#01EC64"
-                        strokeWidth="3"
-                    />
-                </svg>
+  const { ref: docImg, inView: docImgVisible } = useInView({
+    triggerOnce: true,
+    rootMargin: "300px",
+  });
+  const { ref: text, inView: textVisible } = useInView({
+    triggerOnce: true,
+    rootMargin: "300px",
+  });
+  return (
+    <>
+      <div className="max-600:h-[80vh] h-[100vh] relative bg-[#01EC64] max-600:bg-[#01694b]">
+        <svg
+          className="absolute -bottom-[210px] left-0 600:hidden"
+          width="111"
+          height="260"
+          viewBox="0 0 111 260"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M-40 3.06388C-15.7672 0.172317 47.2144 0.415924 91.7985 40.8607C151.056 94.6169 47.8532 184.829 -40 258.5"
+            stroke="#01EC64"
+            strokeWidth="3"
+          />
+        </svg>
 
-                <svg
-                    className="absolute bottom-0 right-0 max-600:hidden"
-                    width="10vw"
-                    height="15vw"
-                    viewBox="0 0 168 410"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <path
-                        d="M186.744 3.51516C158.711 -0.860423 85.8514 -0.491787 34.2749 60.7103C-34.2766 142.056 12.0326 297.507 113.664 408.987"
-                        stroke="#01EC64"
-                        strokeWidth="3"
-                    />
-                </svg>
-                <svg
-                    className="absolute top-0 right-0 max-600:h-[30vh] max-600:w-[30vw]"
-                    width="25vw"
-                    height="20vw"
-                    preserveAspectRatio="none"
-                    viewBox="0 0 288 411"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <path
-                        d="M89.8348 1.1963C59.2167 33.1675 -8.65659 124.986 4.04639 235.269C20.9302 381.848 219.267 439.178 425.587 394.323"
-                        stroke="#01EC64"
-                        strokeWidth="3"
-                    />
-                </svg>
-                <svg
-                    className="max-600:hidden"
-                    width="100%"
-                    height="100%"
-                    preserveAspectRatio="none"
-                    viewBox="0 0 1728 1024"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <path
-                        d="M0 0H1628C1683.23 0 1728 44.7715 1728 100V924C1728 979.228 1683.23 1024 1628 1024H0V0Z"
-                        fill="url(#paint0_linear_837_143)"
-                    />
-                    <defs>
-                        <linearGradient
-                            id="paint0_linear_837_143"
-                            x1="0"
-                            y1="0"
-                            x2="1307.99"
-                            y2="1185.24"
-                            gradientUnits="userSpaceOnUse"
-                        >
-                            <stop offset="0.348527" stopColor="#001E2B" />
-                            <stop offset="0.866562" />
-                        </linearGradient>
-                    </defs>
-                </svg>
-                <div className="absolute left-0 top-0 w-[28vw] h-[100vh] max-600:hidden">
-                    <svg
-                        width="100%"
-                        height="100%"
-                        preserveAspectRatio="none"
-                        viewBox="0 0 534 942"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                    >
-                        <ellipse
-                            cx="-62.7374"
-                            cy="470.863"
-                            rx="596.263"
-                            ry="470.863"
-                            fill="#01EC64"
-                        />
-                    </svg>
-                </div>
-                <div className="absolute top-0 left-0 w-[30vw] h-[80vh] max-600:hidden">
-                    <svg
-                        width="100%"
-                        height="100%"
-                        preserveAspectRatio="none"
-                        viewBox="0 0 659 944"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                    >
-                        <path
-                            d="M0 5.83374C103.454 -4.58614 372.335 -3.70828 562.673 142.036C815.656 335.749 522.816 677.049 147.754 942.526"
-                            stroke="#01EC64"
-                            strokeWidth="3"
-                        />
-                    </svg>
-                </div>
-                <svg
-                    ref={docImg}
-                    className={`reveal-bottom ${
-                        docImgVisible ? "active-reveal" : ""
-                    } max-600:hidden max-800:-left-8 max-800:h-[300px] max-800:w-[300px] absolute top-[25vh] left-[10vw] z-10 h-[25vw] w-[25vw]`}
-                    width="100%"
-                    height="100%"
-                    viewBox="0 0 473 550"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <path
-                        d="M229.915 41.3936L425.569 69.241C439.743 74.4688 443.043 84.9699 442.921 89.5671L385.339 511.83C383.432 523.189 372.545 525.856 367.339 525.77L45.7824 480.003C32.1503 472.405 29.5833 464.338 30.0038 461.255L74.7323 133.252L229.915 41.3936Z"
-                        fill="#116148"
-                    />
-                    <g filter="url(#filter0_d_837_146)">
-                        <path
-                            d="M216.07 135.884L228.942 41.4951L74.3822 133.516L194.936 151.602C209.164 151.254 214.954 140.978 216.07 135.884Z"
-                            fill="#12AB51"
-                        />
-                    </g>
-                    <path
-                        d="M296.108 337.042L293.021 367.327L160.195 339.044L163.282 308.759L141.144 304.045L138.058 334.33C136.926 345.435 145.962 356.641 158.138 359.234L290.964 387.517C303.14 390.11 314.027 383.146 315.159 372.041L318.246 341.756L296.108 337.042ZM180.524 250.546L194.68 268.103L226.003 248.163L217.597 330.639L239.735 335.353L248.14 252.876L274.154 285.026L291.212 274.115L241.012 211.856L180.524 250.546Z"
-                        fill="white"
-                    />
-                    <defs>
-                        <filter
-                            id="filter0_d_837_146"
-                            x="74.3822"
-                            y="41.4951"
-                            width="162.56"
-                            height="118.106"
-                            filterUnits="userSpaceOnUse"
-                            colorInterpolationFilters="sRGB"
-                        >
-                            <feFlood
-                                floodOpacity="0"
-                                result="BackgroundImageFix"
-                            />
-                            <feColorMatrix
-                                in="SourceAlpha"
-                                type="matrix"
-                                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                                result="hardAlpha"
-                            />
-                            <feOffset dx="4" dy="4" />
-                            <feGaussianBlur stdDeviation="2" />
-                            <feComposite in2="hardAlpha" operator="out" />
-                            <feColorMatrix
-                                type="matrix"
-                                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
-                            />
-                            <feBlend
-                                mode="normal"
-                                in2="BackgroundImageFix"
-                                result="effect1_dropShadow_837_146"
-                            />
-                            <feBlend
-                                mode="normal"
-                                in="SourceGraphic"
-                                in2="effect1_dropShadow_837_146"
-                                result="shape"
-                            />
-                        </filter>
-                    </defs>
-                </svg>
+        <svg
+          className="absolute bottom-0 right-0 max-600:hidden"
+          width="10vw"
+          height="15vw"
+          viewBox="0 0 168 410"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M186.744 3.51516C158.711 -0.860423 85.8514 -0.491787 34.2749 60.7103C-34.2766 142.056 12.0326 297.507 113.664 408.987"
+            stroke="#01EC64"
+            strokeWidth="3"
+          />
+        </svg>
+        <svg
+          className="absolute top-0 right-0 max-600:h-[30vh] max-600:w-[30vw]"
+          width="25vw"
+          height="20vw"
+          preserveAspectRatio="none"
+          viewBox="0 0 288 411"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M89.8348 1.1963C59.2167 33.1675 -8.65659 124.986 4.04639 235.269C20.9302 381.848 219.267 439.178 425.587 394.323"
+            stroke="#01EC64"
+            strokeWidth="3"
+          />
+        </svg>
+        <svg
+          className="max-600:hidden"
+          width="100%"
+          height="100%"
+          preserveAspectRatio="none"
+          viewBox="0 0 1728 1024"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 0H1628C1683.23 0 1728 44.7715 1728 100V924C1728 979.228 1683.23 1024 1628 1024H0V0Z"
+            fill="url(#paint0_linear_837_143)"
+          />
+          <defs>
+            <linearGradient
+              id="paint0_linear_837_143"
+              x1="0"
+              y1="0"
+              x2="1307.99"
+              y2="1185.24"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset="0.348527" stopColor="#001E2B" />
+              <stop offset="0.866562" />
+            </linearGradient>
+          </defs>
+        </svg>
+        <div className="absolute left-0 top-0 w-[28vw] h-[100vh] max-600:hidden">
+          <svg
+            width="100%"
+            height="100%"
+            preserveAspectRatio="none"
+            viewBox="0 0 534 942"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <ellipse cx="-62.7374" cy="470.863" rx="596.263" ry="470.863" fill="#01EC64" />
+          </svg>
+        </div>
+        <div className="absolute top-0 left-0 w-[30vw] h-[80vh] max-600:hidden">
+          <svg
+            width="100%"
+            height="100%"
+            preserveAspectRatio="none"
+            viewBox="0 0 659 944"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0 5.83374C103.454 -4.58614 372.335 -3.70828 562.673 142.036C815.656 335.749 522.816 677.049 147.754 942.526"
+              stroke="#01EC64"
+              strokeWidth="3"
+            />
+          </svg>
+        </div>
+        <svg
+          ref={docImg}
+          className={`reveal-bottom ${
+            docImgVisible ? "active-reveal" : ""
+          } max-600:hidden max-800:-left-8 max-800:h-[300px] max-800:w-[300px] absolute top-[25vh] left-[10vw] z-10 h-[25vw] w-[25vw]`}
+          width="100%"
+          height="100%"
+          viewBox="0 0 473 550"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M229.915 41.3936L425.569 69.241C439.743 74.4688 443.043 84.9699 442.921 89.5671L385.339 511.83C383.432 523.189 372.545 525.856 367.339 525.77L45.7824 480.003C32.1503 472.405 29.5833 464.338 30.0038 461.255L74.7323 133.252L229.915 41.3936Z"
+            fill="#116148"
+          />
+          <g filter="url(#filter0_d_837_146)">
+            <path
+              d="M216.07 135.884L228.942 41.4951L74.3822 133.516L194.936 151.602C209.164 151.254 214.954 140.978 216.07 135.884Z"
+              fill="#12AB51"
+            />
+          </g>
+          <path
+            d="M296.108 337.042L293.021 367.327L160.195 339.044L163.282 308.759L141.144 304.045L138.058 334.33C136.926 345.435 145.962 356.641 158.138 359.234L290.964 387.517C303.14 390.11 314.027 383.146 315.159 372.041L318.246 341.756L296.108 337.042ZM180.524 250.546L194.68 268.103L226.003 248.163L217.597 330.639L239.735 335.353L248.14 252.876L274.154 285.026L291.212 274.115L241.012 211.856L180.524 250.546Z"
+            fill="white"
+          />
+          <defs>
+            <filter
+              id="filter0_d_837_146"
+              x="74.3822"
+              y="41.4951"
+              width="162.56"
+              height="118.106"
+              filterUnits="userSpaceOnUse"
+              colorInterpolationFilters="sRGB"
+            >
+              <feFlood floodOpacity="0" result="BackgroundImageFix" />
+              <feColorMatrix
+                in="SourceAlpha"
+                type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                result="hardAlpha"
+              />
+              <feOffset dx="4" dy="4" />
+              <feGaussianBlur stdDeviation="2" />
+              <feComposite in2="hardAlpha" operator="out" />
+              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_837_146" />
+              <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_837_146" result="shape" />
+            </filter>
+          </defs>
+        </svg>
 
-                <div className=" max-600:w-[90vw] max-600:top-[50vh] max-600:translate-y-[-40%] max-600:left-0 max-600:mx-8 absolute top-0 left-[40vw] inline-block w-[60vw] h-[100vh]">
-                    <div
-                        ref={text}
-                        className={`reveal-bottom ${
-                            textVisible ? "active-reveal" : ""
-                        } max-600:pr-8 max-600:top-0 max-600:w-[90vw] absolute top-[calc(40vh-10vw)] left-0 h-[400px] w-[52vw] max-800:w-[54vw]`}
-                    >
-                        <div className=" max-600:w-[60vw] max-600:text-3xl text-[#FFFFFF] max-800:text-3xl text-[52px] w-[40vw] font-bold font-sans max-1140:text-4xl">
-                            Single file upload allowed!
-                        </div>
+        <div className=" max-600:w-[90vw] max-600:top-[50vh] max-600:translate-y-[-40%] max-600:left-0 max-600:mx-8 absolute top-0 left-[40vw] inline-block w-[60vw] h-[100vh]">
+          <div
+            ref={text}
+            className={`reveal-bottom ${
+              textVisible ? "active-reveal" : ""
+            } max-600:pr-8 max-600:top-0 max-600:w-[90vw] absolute top-[calc(40vh-10vw)] left-0 h-[400px] w-[52vw] max-800:w-[54vw]`}
+          >
+            <div className=" max-600:w-[60vw] max-600:text-3xl text-[#FFFFFF] max-800:text-3xl text-[52px] w-[40vw] font-bold  max-1140:text-4xl">
+              Single file upload allowed!
+            </div>
 
-                        <div className="max-600:mt-16 max-600:w-[80vw] max-600:text-lg max-800:text-base text-[#FFFFFF] w-[75%] font-medium font-sans text-xl max-1140:text-lg mt-8">
-                            Our feature empowers you to effortlessly upload a
-                            variety of file formats, whether it's documents,
-                            images, videos, or more. No more hassle of separate
-                            upload forms or convoluted sharing methods. With a
-                            few clicks, you can securely transfer your files to
-                            the intended recipients in a swift and efficient
-                            manner.
-                        </div>
-                    </div>
-                </div>
+            <div className="max-600:mt-16 max-600:w-[80vw] max-600:text-lg max-800:text-base text-[#FFFFFF] w-[75%] font-medium  text-xl max-1140:text-lg mt-8">
+              Our feature empowers you to effortlessly upload a variety of file formats, whether it's documents, images,
+              videos, or more. No more hassle of separate upload forms or convoluted sharing methods. With a few clicks,
+              you can securely transfer your files to the intended recipients in a swift and efficient manner.
             </div>
-        </>
-    );
+          </div>
+        </div>
+      </div>
+    </>
+  );
 };
 export default SingleFileUpload;
diff --git a/components/utils/API/index.js b/components/utils/API/index.js
index 375b569..1c3329f 100644
--- a/components/utils/API/index.js
+++ b/components/utils/API/index.js
@@ -2,100 +2,98 @@ import axios from "axios";
 import { getLS, removeLS } from "../LocalStorage/index";
 
 const API_URL =
-    process.env.NEXT_PUBLIC_ENVIORNMENT === "prod"
-        ? "https://api.savemyform.tk"
-        : "https://dev-api.savemyform.tk";
+  process.env.NEXT_PUBLIC_ENVIORNMENT === "prod"
+    ? "https://api.savemyform.tk"
+    : process.env.NEXT_PUBLIC_ENVIORNMENT === "pro-dev"
+    ? "http://localhost:8080"
+    : "https://dev-api.savemyform.tk";
 
 const getAccessToken = () => {
-    return getLS("secret");
+  return getLS("secret");
 };
 
 const getHeaders = (token) => {
-    if (!token) token = getAccessToken();
-    if (token) {
-        return {
-            headers: {
-                Accept: "application/json",
-                Authorization: `Bearer ${token}`,
-            },
-        };
-    }
+  if (!token) token = getAccessToken();
+  if (token) {
     return {
-        headers: {
-            Accept: "application/json",
-        },
+      headers: {
+        Accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      },
     };
+  }
+  return {
+    headers: {
+      Accept: "application/json",
+    },
+  };
 };
 
 const post = async (endpoint, body, token = null, form = false) => {
-    let options = getHeaders(token);
-    if (form) {
-        options.headers["Content-Type"] = "multipart/form-data";
-    }
-    try {
-        const response = await axios.post(API_URL + endpoint, body, options);
-        return response;
-    } catch (err) {
-        console.error(err?.response?.data || err);
-        if (err?.response?.status === 401) {
-            console.log("Wrong password");
-            removeLS("secret");
-        } else if (err?.response?.status === 404) {
-            console.log("404 Error");
-            removeLS("secret");
-        }
-        return err?.response?.data || err;
+  let options = getHeaders(token);
+  if (form) {
+    options.headers["Content-Type"] = "multipart/form-data";
+  }
+  try {
+    const response = await axios.post(API_URL + endpoint, body, options);
+    return response;
+  } catch (err) {
+    console.error(err?.response?.data || err);
+    if (err?.response?.status === 401) {
+      console.log("Wrong password");
+      removeLS("secret");
+    } else if (err?.response?.status === 404) {
+      console.log("404 Error");
+      removeLS("secret");
     }
+    return err?.response?.data || err;
+  }
 };
 
 const get = async (endpoint, token = null) => {
-    try {
-        const response = await axios.get(API_URL + endpoint, getHeaders(token));
-        return response;
-    } catch (err) {
-        console.error(err?.response?.data || err);
-        if (err?.response?.status === 401) {
-            console.log("Wrong password");
-            removeLS("secret");
-        }
-        return err?.response?.data || err;
+  try {
+    const response = await axios.get(API_URL + endpoint, getHeaders(token));
+    return response;
+  } catch (err) {
+    console.error(err?.response?.data || err);
+    if (err?.response?.status === 401) {
+      console.log("Wrong password");
+      removeLS("secret");
     }
+    return err?.response?.data || err;
+  }
 };
 
 const patch = async (endpoint, body, token = null) => {
-    try {
-        const response = await axios.patch(
-            API_URL + endpoint,
-            body,
-            getHeaders(token)
-        );
-        return response.data;
-    } catch (err) {
-        console.error(err?.response?.data || err);
-        if (err?.response?.status === 401) {
-            console.log("Wrong password");
-            removeLS("secret");
-        }
-        return err?.response?.data || err;
+  try {
+    const response = await axios.patch(API_URL + endpoint, body, getHeaders(token));
+    return response.data;
+  } catch (err) {
+    console.error(err?.response?.data || err);
+    if (err?.response?.status === 401) {
+      console.log("Wrong password");
+      removeLS("secret");
     }
+    return err?.response?.data || err;
+  }
 };
 
 const remove = async (endpoint, body, token = null) => {
-    try {
-        let conf = getHeaders(token);
-        conf["data"] = body;
-        const response = await axios.delete(API_URL + endpoint, conf);
-        return response.data;
-    } catch (err) {
-        console.log(err);
+  try {
+    let conf = getHeaders(token);
+    conf["data"] = body;
+    const response = await axios.delete(API_URL + endpoint, conf);
+    return response.data;
+  } catch (err) {
+    console.log(err);
 
-        console.error(err?.response?.data || err);
-        if (err?.response?.status === 401) {
-            console.log("Wrong password");
-            removeLS("secret");
-        }
-        return err?.response?.data || err;
+    console.error(err?.response?.data || err);
+    if (err?.response?.status === 401) {
+      console.log("Wrong password");
+      removeLS("secret");
     }
+    return err?.response?.data || err;
+  }
 };
 
 export { getAccessToken, post, get, patch, remove, API_URL };
diff --git a/package-lock.json b/package-lock.json
index 75c0af5..fec433f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "flowbite": "^1.5.5",
         "moment": "^2.29.4",
         "next": "13.0.6",
+        "nextjs-progressbar": "^0.0.16",
         "nextra": "^2.0.3",
         "nextra-theme-docs": "^2.0.3",
         "react": "18.2.0",
@@ -4355,6 +4356,11 @@
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.31.tgz",
       "integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA=="
     },
+    "node_modules/@types/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A=="
+    },
     "node_modules/@types/parse5": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz",
@@ -8968,6 +8974,20 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/nextjs-progressbar": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/nextjs-progressbar/-/nextjs-progressbar-0.0.16.tgz",
+      "integrity": "sha512-GV0fD38EMD3vSDCmkq+tObmoup6QA91a6a9MxGuhJZuRk/9TNsrHGnIQQQ/sggkMkXuT4fBgF6jRjFwScDT3zA==",
+      "dependencies": {
+        "@types/nprogress": "^0.2.0",
+        "nprogress": "^0.2.0",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "next": ">= 6.0.0",
+        "react": ">= 16.0.0"
+      }
+    },
     "node_modules/nextra": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/nextra/-/nextra-2.0.3.tgz",
@@ -9064,6 +9084,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -15037,6 +15062,11 @@
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.31.tgz",
       "integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA=="
     },
+    "@types/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A=="
+    },
     "@types/parse5": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz",
@@ -18277,6 +18307,16 @@
       "integrity": "sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==",
       "requires": {}
     },
+    "nextjs-progressbar": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/nextjs-progressbar/-/nextjs-progressbar-0.0.16.tgz",
+      "integrity": "sha512-GV0fD38EMD3vSDCmkq+tObmoup6QA91a6a9MxGuhJZuRk/9TNsrHGnIQQQ/sggkMkXuT4fBgF6jRjFwScDT3zA==",
+      "requires": {
+        "@types/nprogress": "^0.2.0",
+        "nprogress": "^0.2.0",
+        "prop-types": "^15.8.1"
+      }
+    },
     "nextra": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/nextra/-/nextra-2.0.3.tgz",
@@ -18353,6 +18393,11 @@
         }
       }
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
diff --git a/package.json b/package.json
index 4450cae..0224c56 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "flowbite": "^1.5.5",
     "moment": "^2.29.4",
     "next": "13.0.6",
+    "nextjs-progressbar": "^0.0.16",
     "nextra": "^2.0.3",
     "nextra-theme-docs": "^2.0.3",
     "react": "18.2.0",
diff --git a/pages/_app.js b/pages/_app.js
index 115a306..b42fe34 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,90 +1,85 @@
 import "../styles/globals.css";
+import React, { useState, useEffect } from "react";
 import { NextUIProvider } from "@nextui-org/react";
+import NextNProgress from "nextjs-progressbar";
+import { GoogleReCaptchaProvider } from "react-google-recaptcha-v3";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { QueryClient, QueryClientProvider, Hydrate } from "@tanstack/react-query";
+
 import Appbar from "../components/elements/Appbar/index";
 import Alert from "../components/elements/Alert";
-import { GoogleReCaptchaProvider } from "react-google-recaptcha-v3";
 import { UserContext, AppbarContext } from "../components/context";
-import React, { useState, useEffect } from "react";
 import { existsLS, getLS, removeLS } from "../components/utils/LocalStorage";
-import {
-    QueryClient,
-    QueryClientProvider,
-    Hydrate,
-} from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { get } from "../components/utils/API";
 
 const queryClient = new QueryClient();
 
 function MyApp({ Component, pageProps }) {
-    const [isLoggedIn, setIsLoggedIn] = useState(false),
-        [user, setUser] = useState(null),
-        [active, setActive] = useState({
-            home: false,
-            dashboard: false,
-            faq: false,
-            documentation: false,
-        }),
-        [loading, setLoading] = useState(true);
+  const [isLoggedIn, setIsLoggedIn] = useState(false),
+    [user, setUser] = useState(null),
+    [active, setActive] = useState({
+      home: false,
+      dashboard: false,
+      faq: false,
+      documentation: false,
+    }),
+    [loading, setLoading] = useState(true);
 
-    useEffect(() => {
-        setIsLoggedIn(existsLS("secret"));
-        if (getLS("secret")) {
-            get("/user/self")
-                .then((res) => {
-                    setUser(res.data.data);
-                })
-                .catch((err) => {
-                    if (err?.response?.status === 401) {
-                        setIsLoggedIn(false);
-                        removeLS("secret");
-                    } else {
-                        console.log(err?.response?.message);
-                    }
-                });
-        }
-        setLoading(false);
-    }, []);
-    if (loading) {
-        return (
-            <div className="grid h-screen place-content-center">
-                <div className="flex items-center gap-2">
-                    <span className="h-10 w-10 block rounded-full border-4 border-t-blue-700 animate-spin"></span>
-                    Loading...
-                </div>
-            </div>
-        );
+  useEffect(() => {
+    setIsLoggedIn(existsLS("secret"));
+    if (getLS("secret")) {
+      get("/user/self")
+        .then((res) => {
+          setUser(res.data.data);
+        })
+        .catch((err) => {
+          if (err?.response?.status === 401) {
+            setIsLoggedIn(false);
+            removeLS("secret");
+          } else {
+            console.log(err?.response?.message);
+          }
+        });
     }
+    setLoading(false);
+  }, []);
+  if (loading) {
     return (
-        <QueryClientProvider client={queryClient}>
-            <Hydrate state={pageProps.dehydratedState}>
-                <GoogleReCaptchaProvider
-                    reCaptchaKey={"6LcZo3cjAAAAAPEshUhFpjSOLdDaTQEbSoEwwB67"}
-                    scriptProps={{
-                        async: false,
-                        defer: true,
-                        appendTo: "body",
-                        nonce: undefined,
-                    }}
-                >
-                    <NextUIProvider>
-                        <UserContext.Provider
-                            value={{ isLoggedIn, setIsLoggedIn, user, setUser }}
-                        >
-                            <AppbarContext.Provider
-                                value={{ active, setActive }}
-                            >
-                                <Alert />
-                                <Appbar />
-                                <Component {...pageProps} />
-                                <ReactQueryDevtools />
-                            </AppbarContext.Provider>
-                        </UserContext.Provider>
-                    </NextUIProvider>
-                </GoogleReCaptchaProvider>
-            </Hydrate>
-        </QueryClientProvider>
+      <div className="grid h-screen place-content-center">
+        <div className="flex items-center gap-2">
+          <span className="h-10 w-10 block rounded-full border-4 border-t-blue-700 animate-spin"></span>
+          Loading...
+        </div>
+      </div>
     );
+  }
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Hydrate state={pageProps.dehydratedState}>
+        <GoogleReCaptchaProvider
+          reCaptchaKey={"6LcZo3cjAAAAAPEshUhFpjSOLdDaTQEbSoEwwB67"}
+          scriptProps={{
+            async: false,
+            defer: true,
+            appendTo: "body",
+            nonce: undefined,
+          }}
+        >
+          <NextUIProvider>
+            <UserContext.Provider value={{ isLoggedIn, setIsLoggedIn, user, setUser }}>
+              <AppbarContext.Provider value={{ active, setActive }}>
+                <NextNProgress color="#00694B" />
+                <Alert />
+                <Appbar />
+                <Component {...pageProps} />
+                <ReactQueryDevtools />
+              </AppbarContext.Provider>
+            </UserContext.Provider>
+          </NextUIProvider>
+        </GoogleReCaptchaProvider>
+      </Hydrate>
+    </QueryClientProvider>
+  );
 }
 
 export default MyApp;
diff --git a/pages/dashboard/index.js b/pages/dashboard/index.js
index 4e11233..57250d8 100644
--- a/pages/dashboard/index.js
+++ b/pages/dashboard/index.js
@@ -1,174 +1,157 @@
 import React, { useEffect, useContext } from "react";
-import { get } from "../../components/utils/API/index.js";
+import { useQuery, QueryClient, dehydrate } from "@tanstack/react-query";
 import { useRouter } from "next/router";
+import Image from "next/image";
+import Link from "next/link";
+
+import { get } from "../../components/utils/API/index.js";
 import { AppbarContext, UserContext } from "../../components/context";
-import { useQuery, QueryClient, dehydrate } from "@tanstack/react-query";
 import Loader from "../../components/elements/Loader";
 import ProjectCard from "../../components/elements/ProjectCard";
 import Icon from "../../assets/svgs/iconDash.svg";
-import Image from "next/image";
 import Footer from "../../components/elements/Footer";
-import Link from "next/link";
 import { PlusOutlined } from "@ant-design/icons";
 import SEO from "../../components/utils/SEO";
+import DashboardVector from "../../assets/svgs/dashboardsVector.svg";
+
 async function getUserDashboard() {
-    return await get("/user/dashboard").then((data) => {
-        data?.data?.data?.projects.forEach((date) => {
-            let iostr = date.date_created;
-            let tempDate = new Date(iostr).toDateString().slice(4);
-            date.date_created = tempDate.slice(0, 6) + "," + tempDate.slice(6);
-        });
-        return data?.data?.data;
+  return await get("/user/dashboard").then((data) => {
+    data?.data?.data?.projects.forEach((date) => {
+      let iostr = date.date_created;
+      let tempDate = new Date(iostr).toDateString().slice(4);
+      date.date_created = tempDate.slice(0, 6) + "," + tempDate.slice(6);
     });
+    return data?.data?.data;
+  });
 }
 export default function Dashboard() {
-    const router = useRouter();
-    const { setActive } = useContext(AppbarContext);
-    let { isLoggedIn, user } = useContext(UserContext);
-    const userQuery = useQuery({
-        queryKey: ["userData"],
-        queryFn: getUserDashboard,
-        staleTime: 10 * 60 * 1000,
-    });
+  const router = useRouter();
+  const { setActive } = useContext(AppbarContext);
+  let { isLoggedIn, user } = useContext(UserContext);
+  const userQuery = useQuery({
+    queryKey: ["userData"],
+    queryFn: getUserDashboard,
+    staleTime: 10 * 60 * 1000,
+  });
 
-    useEffect(() => {
-        if (!isLoggedIn) {
-            setActive({
-                home: false,
-                dashboard: false,
-                documentation: false,
-                faq: false,
-            });
-            router.push("/signin");
-        }
-        setActive({
-            home: false,
-            dashboard: true,
-            documentation: false,
-            faq: false,
-        });
-        if (user && user.verified === false) {
-            setActive({
-                home: false,
-                dashboard: false,
-                documentation: false,
-                faq: false,
-            });
-            router.push("/verify");
-        }
-    }, [user]);
-    if (userQuery?.isLoading) return <Loader />;
-    if (userQuery?.isSuccess) {
-        return (
-            <>
-                <SEO
-                    title="SaveMyForm | Dashboard"
-                    desc={`Dashboard of ${user.name}. SaveMyForm is a platform where yoy save your form data now
+  useEffect(() => {
+    if (!isLoggedIn) {
+      setActive({
+        home: false,
+        dashboard: false,
+        documentation: false,
+        faq: false,
+      });
+      router.push("/signin");
+    }
+    setActive({
+      home: false,
+      dashboard: true,
+      documentation: false,
+      faq: false,
+    });
+    if (user && user.verified === false) {
+      setActive({
+        home: false,
+        dashboard: false,
+        documentation: false,
+        faq: false,
+      });
+      router.push("/verify");
+    }
+  }, [user]);
+  if (userQuery?.isLoading) return <Loader />;
+  if (userQuery?.isSuccess) {
+    return (
+      <>
+        <SEO
+          title="SaveMyForm | Dashboard"
+          desc={`Dashboard of ${user.name}. 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="flex-col flex items-center border-0 border-yellow-500 font-[Poppins]">
-                    <svg
-                        width="100%"
-                        height="300"
-                        viewBox="0 0 1728 461"
-                        fill="none"
-                        preserveAspectRatio="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                    >
-                        <rect
-                            x="0.5"
-                            y="0.5"
-                            width="1727"
-                            height="460"
-                            fill="#023430"
-                            stroke="black"
-                        />
-                    </svg>
-                    <div
-                        className=" w-[clamp(200px,60%,900px)] project_cards relative top-[-150px] outline-[black]
-             flex flex-col 
+        />
+        <div className="flex-col flex items-center border-0 border-yellow-500 font-[Poppins]">
+          <div className="absolute z-0 w-full h-80 bg-[#023430]">
+            <Image
+              src={DashboardVector.src}
+              height={320}
+              width={654}
+              alt="Dashboard Vector"
+              className="ml-auto object-cover h-full"
+            />
+          </div>
+          <div
+            className="z-10 w-[clamp(200px,60%,900px)] project_cards outline-[black]
+             flex flex-col mt-28
             "
-                    >
-                        <div className="text-xl font-bold md:m-2 mb-2 text-[#DEF7E5] text-center md:pl-8 md:text-start">
-                            Your Projects
-                        </div>
-                        <div className="grid gap-2 grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(240px,1fr))]">
-                            <Link href="/dashboard/project/newproject">
-                                <div
-                                    className="bg-[#FFFEFE] shadow-[0px_4px_8px_rgba(0,0,0,0.25)] h-[180px] w-full cursor-pointer rounded-[12px]
+          >
+            <div className="text-xl font-bold md:m-2 mb-2 text-[#DEF7E5] text-center md:pl-8 md:text-start">
+              Your Projects
+            </div>
+            <div className="grid gap-2 grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(240px,1fr))]">
+              <Link href="/dashboard/project/newproject">
+                <div
+                  className="bg-[#FFFEFE] shadow-[0px_4px_8px_rgba(0,0,0,0.25)] h-[180px] w-full cursor-pointer rounded-[12px]
         flex justify-center flex-col items-center hover:bg-[#DEF7E5] transition-all duration-200
         "
-                                >
-                                    <div>
-                                        <PlusOutlined className="text-[30px]" />
-                                    </div>
-                                    <div className="select-none text-base text-[#023430] font-semibold">
-                                        Create a Project
-                                    </div>
-                                </div>
-                            </Link>
-                            {userQuery.isRefetching ? (
-                                <div className=" relative min-h-[40vh]">
-                                    <Loader />
-                                </div>
-                            ) : (
-                                userQuery.data.projects &&
-                                userQuery.data.projects.length > 0 &&
-                                userQuery.data.projects.map((project, i) => (
-                                    <ProjectCard
-                                        key={i}
-                                        id={project?.id}
-                                        formName={project?.name}
-                                        totalForms={project?.form_count}
-                                        allowedOrigins={
-                                            project?.allowed_origins
-                                        }
-                                        creationDate={project?.date_created}
-                                    />
-                                ))
-                            )}
-                        </div>
-                    </div>
-                    <div className="mb-5 mt-[-100px] md:w-[clamp(0px,65%,900px)] w-[70%] flex flex-col md:flex-row">
-                        <div className="border-[#001E2B] border-[1px] rounded-[12px] flex md:w-[65%] flex-col md:flex-row">
-                            <div className=" md:w-[85%] flex flex-col justify-center p-2">
-                                <div className="m-2 text-xl font-bold">
-                                    Projects represent your website
-                                </div>
-                                <div className="m-1 ml-2 text-sm text-[#001E2B99]">
-                                    A project may contain multiple forms and
-                                    those forms share the same domain name and
-                                    reCaptcha details.
-                                </div>
-                                <div className="ml-2 m-2">Learn More</div>
-                            </div>
-                            <div className="md:w-[70%] md:flex justify-center items-center hidden mb-[-20px]">
-                                <Image src={Icon} alt="icon" />
-                            </div>
-                        </div>
-                        <div className="border-[#001E2B] p-3 border-[1px] mt-5 md:mt-0 rounded-[12px] flex flex-col items-center justify-between md:w-[30%] md:ml-auto ">
-                            <div className="text-xl mb-[80px] font-bold">
-                                You can create upto 6 Projects.
-                            </div>
-                            <div className="text-[#001E2B99]">
-                                We are working to provide you more
-                            </div>
-                        </div>
-                    </div>
-                    <Footer />
+                >
+                  <div>
+                    <PlusOutlined className="text-[30px]" />
+                  </div>
+                  <div className="select-none text-base text-[#023430] font-semibold">Create a Project</div>
                 </div>
-            </>
-        );
-    }
+              </Link>
+              {userQuery.isRefetching ? (
+                <div className=" relative min-h-[40vh]">
+                  <Loader />
+                </div>
+              ) : (
+                userQuery.data.projects &&
+                userQuery.data.projects.length > 0 &&
+                userQuery.data.projects.map((project, i) => (
+                  <ProjectCard
+                    key={i}
+                    id={project?.id}
+                    formName={project?.name}
+                    totalForms={project?.form_count}
+                    allowedOrigins={project?.allowed_origins}
+                    creationDate={project?.date_created}
+                  />
+                ))
+              )}
+            </div>
+          </div>
+          <div className="z-10 mb-5 mt-12 md:w-[clamp(0px,65%,900px)] w-[70%] flex flex-col md:flex-row">
+            <div className="border-[#001E2B] border-[1px] rounded-[12px] flex md:w-[65%] flex-col md:flex-row">
+              <div className=" md:w-[85%] flex flex-col justify-center p-2">
+                <div className="m-2 text-xl font-bold">Projects represent your website</div>
+                <div className="m-1 ml-2 text-sm text-[#001E2B99]">
+                  A project may contain multiple forms and those forms share the same domain name and reCaptcha details.
+                </div>
+                <div className="ml-2 m-2">Learn More</div>
+              </div>
+              <div className="md:w-[70%] md:flex justify-center items-center hidden mb-[-20px]">
+                <Image src={Icon} alt="icon" />
+              </div>
+            </div>
+            <div className="border-[#001E2B] p-3 border-[1px] mt-5 md:mt-0 rounded-[12px] flex flex-col items-center justify-between md:w-[30%] md:ml-auto ">
+              <div className="text-xl mb-[80px] font-bold">You can create upto 6 Projects.</div>
+              <div className="text-[#001E2B99]">We are working to provide you more</div>
+            </div>
+          </div>
+          <Footer />
+        </div>
+      </>
+    );
+  }
 }
 
 export async function getServerSideProps() {
-    const queryClient = new QueryClient();
-    await queryClient.fetchQuery(["userData"], getUserDashboard);
-    return {
-        props: {
-            dehydratedState: dehydrate(queryClient),
-        },
-    };
+  const queryClient = new QueryClient();
+  await queryClient.fetchQuery(["userData"], getUserDashboard);
+  return {
+    props: {
+      dehydratedState: dehydrate(queryClient),
+    },
+  };
 }
diff --git a/pages/dashboard/project/[id]/[formid]/index.js b/pages/dashboard/project/[id]/[formid]/index.js
index 3d3aeeb..36c14ae 100644
--- a/pages/dashboard/project/[id]/[formid]/index.js
+++ b/pages/dashboard/project/[id]/[formid]/index.js
@@ -1,124 +1,139 @@
 import React, { useState, useContext, useEffect } from "react";
-import { Typography, Col, Row, Button, Input, Modal, message } from "antd";
-import { PlusOutlined } from "@ant-design/icons";
-import { get, remove } from "../../../../../components/utils/API";
-import { useGoogleReCaptcha } from "react-google-recaptcha-v3";
+import Image from "next/image";
 import { useRouter } from "next/router";
-import { useWindowSize } from "../../../../../components/utils/hooks/useWindowSize";
-import {
-    useQuery,
-    dehydrate,
-    QueryClient,
-    useQueryClient,
-} from "@tanstack/react-query";
+import { useQuery, dehydrate, QueryClient, useQueryClient } from "@tanstack/react-query";
+import { BiSortAlt2 } from "react-icons/bi";
+import { Modal, Button, Input, Space } from "antd";
+
+import { get, remove } from "../../../../../components/utils/API";
 import { AppbarContext, UserContext } from "../../../../../components/context";
-import Loader from "../../../../../components/elements/Loader";
-import Form from "../../../../../components/elements/Form";
 import Footer from "../../../../../components/elements/Footer";
-import Link from "next/link";
-import { BiSortAlt2 } from "react-icons/bi";
 import FormResponse from "../../../../../components/elements/FormResponse";
 import DashboardVector from "../../../../../assets/svgs/dashboardsVector.svg";
-import Image from "next/image";
 import SEO from "../../../../../components/utils/SEO";
+import { MdOutlineContentCopy } from "react-icons/md";
+
 export default function FormDashboard() {
-    const router = useRouter();
-    const { formid } = router.query;
-    const { setActive } = useContext(AppbarContext);
-    let { isLoggedIn, user } = useContext(UserContext);
-    const [form, setForm] = useState(null);
-    const getFormDashboard = async () => {
-        const res = await get(`/form/dashboard/${formid}`);
-        const data = res?.data?.data[0];
-        setForm(data);
-    };
-    useEffect(() => {
-        if (!isLoggedIn) {
-            setActive({
-                home: false,
-                dashboard: false,
-                documentation: false,
-                faq: false,
-            });
-            router.push("/signin");
-        }
-        setActive({
-            home: false,
-            dashboard: true,
-            documentation: false,
-            faq: false,
-        });
-    }, [user]);
-    useEffect(() => {
-        if (formid) getFormDashboard();
-    }, [formid]);
-    return (
-        <>
-            <SEO
-                title="SaveMyForm | Form Dashboard"
-                desc={`Form Dashboard .SaveMyForm is a platform where yoy save your form data now
+  const router = useRouter();
+  const { formid, isNew, submissionLink } = router.query;
+  const { setActive } = useContext(AppbarContext);
+  let { isLoggedIn, user } = useContext(UserContext);
+  const [form, setForm] = useState(null);
+  const [newFormSubmissionLinkModalOpen, setNewFormSubmissionLinkModalOpen] = useState(false);
+
+  const getFormDashboard = async () => {
+    const res = await get(`/form/dashboard/${formid}`);
+    const data = res?.data?.data;
+    setForm(data);
+  };
+
+  const copySubmissionLink = () => {
+    navigator.clipboard.writeText(submissionLink);
+  };
+  useEffect(() => {
+    if (!isLoggedIn) {
+      setActive({
+        home: false,
+        dashboard: false,
+        documentation: false,
+        faq: false,
+      });
+      router.push("/signin");
+    }
+    setActive({
+      home: false,
+      dashboard: true,
+      documentation: false,
+      faq: false,
+    });
+  }, [user]);
+  useEffect(() => {
+    if (formid) getFormDashboard();
+  }, [formid]);
+  useEffect(() => {
+    if (isNew && submissionLink) setNewFormSubmissionLinkModalOpen(true);
+  }, [isNew, submissionLink]);
+  return (
+    <>
+      <SEO
+        title="SaveMyForm | Form Dashboard"
+        desc={`Form Dashboard .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="absolute w-full h-96 bg-[#023430] top-0 z-0">
-                    <Image
-                        src={DashboardVector.src}
-                        height={384}
-                        width={786}
-                        alt="Dashboard Vector"
-                        className="ml-auto object-cover h-full"
-                    />
-                </div>
-                <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">
-                            <h1 className=" text-[#DEF7E5] font-bold text-5xl">
-                                {form?.name}
-                            </h1>
-                            <button className="text-[#DEF7E5]  h-[31px] px-2 rounded-lg border-2 border-[#DEF7E5] ">
-                                Manage
-                            </button>
-                        </div>
-                        <div>
-                            <div className=" text-[#DEF7E5] font-base text-xl">
-                                {form?.project?.name}
-                            </div>
-                        </div>
-                    </div>
-                    <div className="flex flex-col gap-4 shadow-[0_4px_4px_0px_#00000040] rounded-lg p-8 bg-[#ffffff]">
-                        <div className="flex flex-row items-center  justify-between">
-                            <div className=" text-[#016749] font-bold text-5xl">
-                                {"45"}{" "}
-                                <span className="text-[#01684a] font-medium tracking-wide text-xl">
-                                    Responses
-                                </span>
-                            </div>
-                            <div className="flex flex-row gap-2 items-center">
-                                <BiSortAlt2 fill="#00694b" size={24} />
-                                <span className="text-[#00694b] font-medium tracking-wide text-xl">
-                                    Latest
-                                </span>
-                            </div>
-                        </div>
-                        <div className="flex flex-col gap-4">
-                            <FormResponse />
-                            <FormResponse />
-                            <FormResponse />
-                            <FormResponse />
-                        </div>
-                        <div className="flex flex-row items-center gap-2 justify-center">
-                            <button className="shadow-[0px_4px_8px_rgba(0,0,0,0.25)] rounded-lg bg-green-300 p-2 w-32">
-                                Prev
-                            </button>
-                            <button className="shadow-[0px_4px_8px_rgba(0,0,0,0.25)] rounded-lg bg-green-300 p-2 w-32">
-                                Next
-                            </button>
-                        </div>
-                    </div>
-                </div>
+      />
+      <div className="grid place-items-center w-screen relative">
+        <div className="absolute w-full h-96 bg-[#023430] top-0 z-0">
+          <Image
+            src={DashboardVector.src}
+            height={384}
+            width={786}
+            alt="Dashboard Vector"
+            className="ml-auto object-cover h-full"
+          />
+        </div>
+        <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">
+              <h1 className=" text-[#DEF7E5] font-bold text-5xl">{form?.name}</h1>
+              {form?.is_owner && (
+                <button className="text-[#DEF7E5]  h-[31px] px-2 rounded-lg border-2 border-[#DEF7E5] ">Manage</button>
+              )}
+            </div>
+            <div>
+              <div className=" text-[#DEF7E5] font-base text-xl">{form?.project?.name}</div>
+            </div>
+          </div>
+          <div className="flex flex-col gap-4 shadow-[0_4px_4px_0px_#00000040] rounded-lg p-8 bg-[#ffffff]">
+            <div className="flex flex-row items-center  justify-between">
+              <div className=" text-[#016749] font-bold text-5xl">
+                {"45"} <span className="text-[#01684a] font-medium tracking-wide text-xl">Responses</span>
+              </div>
+              <div className="flex flex-row gap-2 items-center">
+                <BiSortAlt2 fill="#00694b" size={24} />
+                <span className="text-[#00694b] font-medium tracking-wide text-xl">Latest</span>
+              </div>
+            </div>
+            <div className="flex flex-col gap-4">
+              <FormResponse />
+              <FormResponse />
+              <FormResponse />
+              <FormResponse />
+            </div>
+            <div className="flex flex-row items-center gap-2 justify-center">
+              <button className="shadow-[0px_4px_8px_rgba(0,0,0,0.25)] rounded-lg bg-[#DEF7E5] p-2 w-32">Prev</button>
+              <button className="shadow-[0px_4px_8px_rgba(0,0,0,0.25)] rounded-lg bg-[#DEF7E5] p-2 w-32">Next</button>
             </div>
-            <Footer />
-        </>
-    );
+          </div>
+        </div>
+      </div>
+      <Modal
+        open={newFormSubmissionLinkModalOpen}
+        centered
+        closable={false}
+        footer={[
+          <Button
+            type="primary"
+            onClick={() => {
+              setNewFormSubmissionLinkModalOpen(false);
+              router.replace(router.asPath.split("?")[0], undefined, { shallow: true });
+            }}
+          >
+            Ok
+          </Button>,
+        ]}
+      >
+        <h3 className="font-semibold text-xl">Submission Link</h3>
+        <p className="leading-5">
+          Here is your form submission link, send POST request to this link to store your form submission
+        </p>
+        <Space.Compact style={{ width: "100%", marginTop: 16 }}>
+          <Input defaultValue={submissionLink} disabled className="h-8 border-gray-300 rounded-l-lg" />
+          <Button onClick={copySubmissionLink}>
+            <MdOutlineContentCopy />
+          </Button>
+        </Space.Compact>
+      </Modal>
+      <Footer />
+    </>
+  );
 }
diff --git a/pages/dashboard/project/[id]/index.js b/pages/dashboard/project/[id]/index.js
index e33a5e2..1b07a81 100644
--- a/pages/dashboard/project/[id]/index.js
+++ b/pages/dashboard/project/[id]/index.js
@@ -10,124 +10,129 @@ import Link from "next/link";
 import SEO from "../../../../components/utils/SEO";
 import DashboardVector from "../../../../assets/svgs/dashboardsVector.svg";
 import Image from "next/image";
+
 async function getProjectData(id) {
-    return await get(`/project/dashboard/${id}`).then((data) => {
-        data?.data?.data?.forms?.forEach((form) => {
-            let iostr = form.date_created;
-            let iostr2 = form.last_updated;
-            let tempDate = new Date(iostr).toDateString().slice(4);
-            let tempDate2 = new Date(iostr2).toDateString().slice(4);
-            form.date_created = tempDate.slice(0, 6) + "," + tempDate.slice(6);
-            form.last_updated =
-                tempDate2.slice(0, 6) + "," + tempDate2.slice(6);
-        });
-        return data?.data?.data;
+  return await get(`/project/dashboard/${id}`).then((data) => {
+    data?.data?.data?.forms?.forEach((form) => {
+      let iostr = form.date_created;
+      let iostr2 = form.last_updated;
+      let tempDate = new Date(iostr).toDateString().slice(4);
+      let tempDate2 = new Date(iostr2).toDateString().slice(4);
+      form.date_created = tempDate.slice(0, 6) + "," + tempDate.slice(6);
+      form.last_updated = tempDate2.slice(0, 6) + "," + tempDate2.slice(6);
     });
+    return data?.data?.data;
+  });
 }
 
 export default function Project({ id }) {
-    const { setActive } = useContext(AppbarContext);
-    let { isLoggedIn, user } = useContext(UserContext);
-    useEffect(() => {
-        if (!isLoggedIn) {
-            setActive({
-                home: false,
-                dashboard: false,
-                documentation: false,
-                faq: false,
-            });
-            router.push("/signin");
-        }
-        setActive({
-            home: false,
-            dashboard: true,
-            documentation: false,
-            faq: false,
-        });
-    }, [user]);
-    const projectQuery = useQuery({
-        queryKey: ["projectData", id],
-        queryFn: () => {
-            return getProjectData(id);
-        },
-        staleTime: 10 * 60 * 1000,
+  const { setActive } = useContext(AppbarContext);
+  let { isLoggedIn, user } = useContext(UserContext);
+  useEffect(() => {
+    if (!isLoggedIn) {
+      setActive({
+        home: false,
+        dashboard: false,
+        documentation: false,
+        faq: false,
+      });
+      router.push("/signin");
+    }
+    setActive({
+      home: false,
+      dashboard: true,
+      documentation: false,
+      faq: false,
     });
-    if (projectQuery?.isLoading) return <Loader />;
-    if (projectQuery?.isSuccess) {
-        return (
-            <>
-                <SEO
-                    title={`SaveMyForm | Project | ${projectQuery?.data?.name}`}
-                    desc={`Dashboard of project ${projectQuery?.data?.name}. SaveMyForm is a platform where yoy save your form data now
+  }, [user]);
+  const projectQuery = useQuery({
+    queryKey: ["projectData", id],
+    queryFn: () => {
+      return getProjectData(id);
+    },
+    staleTime: 10 * 60 * 1000,
+  });
+  if (projectQuery?.isLoading) return <Loader />;
+  if (projectQuery?.isSuccess) {
+    return (
+      <>
+        <SEO
+          title={`SaveMyForm | Project | ${projectQuery?.data?.name}`}
+          desc={`Dashboard of project ${projectQuery?.data?.name}. 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="absolute w-full h-96 bg-[#023430] top-0 z-0">
-                        <Image
-                            src={DashboardVector.src}
-                            height={384}
-                            width={786}
-                            alt="Dashboard Vector"
-                            className="ml-auto object-cover h-full"
-                        />
-                    </div>
-                    <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">
-                                <h1 className=" text-[#DEF7E5] font-bold text-5xl">
-                                    {projectQuery?.data?.name}
-                                </h1>
-                                {projectQuery?.data?.is_owner && (
-                                    <Link
-                                        href={`/dashboard/project/${projectQuery?.data?.id}/settings`}
-                                    >
-                                        <button className="text-[#DEF7E5]  h-[31px] px-2 rounded-lg border-2 border-[#DEF7E5] ">
-                                            Manage
-                                        </button>
-                                    </Link>
-                                )}
-                            </div>
-                            <div className="self-end">
-                                <Link href={`/dashboard/project/${id}/newform`}>
-                                    <button className="rounded-lg bg-[#DEF7E5] text-[#023430] font-semibold p-1 px-2 ">
-                                        <div className="flex flex-row items-center gap-2">
-                                            <PlusOutlined
-                                                size={16}
-                                                strokeWidth={12}
-                                            />
-                                            Create New Form
-                                        </div>
-                                    </button>
-                                </Link>
-                            </div>
-                        </div>
-                        <div className="flex flex-col gap-4 ] rounded-lg py-8 ">
-                            <div className="flex flex-col gap-4">
-                                {projectQuery.data.forms.map((form) => (
-                                    <Form
-                                        createdAt={form.date_created}
-                                        formName={form.name}
-                                        id={form.id}
-                                        projectId={projectQuery.data.id}
-                                    />
-                                ))}
-                            </div>
-                        </div>
-                    </div>
+        />
+        <div className="grid place-items-center w-screen relative">
+          <div className="absolute w-full h-96 bg-[#023430] top-0 z-0">
+            <Image
+              src={DashboardVector.src}
+              height={384}
+              width={786}
+              alt="Dashboard Vector"
+              className="ml-auto object-cover h-full"
+            />
+          </div>
+          <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">
+                <h1 className=" text-[#DEF7E5] font-bold text-5xl">{projectQuery?.data?.name}</h1>
+                {projectQuery?.data?.is_owner && (
+                  <Link href={`/dashboard/project/${projectQuery?.data?.id}/settings`} className="h-full">
+                    <button className="text-[#DEF7E5] h-[31px] mt-1 px-2 rounded-lg border-2 border-[#DEF7E5] ">
+                      Manage
+                    </button>
+                  </Link>
+                )}
+              </div>
+              {projectQuery.data.forms.length !== 0 && (
+                <div className="self-end">
+                  <Link href={`/dashboard/project/${id}/newform`}>
+                    <button className="rounded-lg bg-[#DEF7E5] text-[#023430] font-semibold p-1 px-2 ">
+                      <div className="flex flex-row items-center gap-2">
+                        <PlusOutlined size={16} strokeWidth={12} />
+                        Create New Form
+                      </div>
+                    </button>
+                  </Link>
                 </div>
-                <Footer />
-            </>
-        );
-    }
+              )}
+            </div>
+            <div className="flex flex-col gap-4 rounded-lg py-8 ">
+              <div className="flex flex-col gap-4">
+                {projectQuery.data.forms.length === 0 && (
+                  <Link
+                    href={`/dashboard/project/${id}/newform`}
+                    className="bg-[#FFFEFE] shadow-[0px_4px_8px_rgba(0,0,0,0.25)] p-8 w-full cursor-pointer
+                                flex justify-center flex-col items-center hover:bg-[#DEF7E5] transition-all duration-200 my-3 rounded-lg"
+                  >
+                    <p className="text-xl text-semibold text-center">Create your first Form</p>
+                  </Link>
+                )}
+                {projectQuery.data.forms.map((form, i) => (
+                  <Form
+                    key={i}
+                    createdAt={form.date_created}
+                    formName={form.name}
+                    id={form.id}
+                    projectId={projectQuery.data.id}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+        <Footer />
+      </>
+    );
+  }
 }
 export async function getServerSideProps({ params: { id } }) {
-    const queryClient = new QueryClient();
-    await queryClient.fetchQuery(["projectData", id], getProjectData);
-    return {
-        props: {
-            dehydratedState: dehydrate(queryClient),
-            id,
-        },
-    };
+  const queryClient = new QueryClient();
+  await queryClient.fetchQuery(["projectData", id], getProjectData);
+  return {
+    props: {
+      dehydratedState: dehydrate(queryClient),
+      id,
+    },
+  };
 }
diff --git a/pages/dashboard/project/[id]/newform/index.js b/pages/dashboard/project/[id]/newform/index.js
index 9f1b0bb..7dff681 100644
--- a/pages/dashboard/project/[id]/newform/index.js
+++ b/pages/dashboard/project/[id]/newform/index.js
@@ -1,137 +1,164 @@
 import React, { useState, useRef, useContext, useEffect, useMemo } from "react";
 import Image from "next/image";
+import { Input, Checkbox, message } from "antd";
+import { useQuery, dehydrate, QueryClient } from "@tanstack/react-query";
+
 import DashboardVector from "../../../../../assets/svgs/dashboardsVector.svg";
-import { Input, Space, Checkbox, message } from "antd";
 import FormInput from "../../../../../components/elements/FormInput";
 import Footer from "../../../../../components/elements/Footer";
 import createJSONSchema from "../../../../../components/utils/JSONSchema";
 import { useRouter } from "next/router";
 import { AppbarContext, UserContext } from "../../../../../components/context";
-import { post, API_URL } from "../../../../../components/utils/API";
+import { get, post, API_URL } from "../../../../../components/utils/API";
+import Loader from "../../../../../components/elements/Loader";
 import SEO from "../../../../../components/utils/SEO";
-export default function NewForm() {
-    const { setActive } = useContext(AppbarContext);
-    let { isLoggedIn, user } = useContext(UserContext);
 
-    let [fields, setFields] = useState([{ name: "", isRequired: false }]);
+async function getProjectData(id) {
+  if (id)
+    return await get(`/project/dashboard/${id}`).then((data) => {
+      data?.data?.data?.forms?.forEach((form) => {
+        let iostr = form.date_created;
+        let iostr2 = form.last_updated;
+        let tempDate = new Date(iostr).toDateString().slice(4);
+        let tempDate2 = new Date(iostr2).toDateString().slice(4);
+        form.date_created = tempDate.slice(0, 6) + "," + tempDate.slice(6);
+        form.last_updated = tempDate2.slice(0, 6) + "," + tempDate2.slice(6);
+      });
+      return data?.data?.data;
+    });
+  return null;
+}
+
+export default function NewForm() {
+  const { setActive } = useContext(AppbarContext);
+  let { isLoggedIn, user } = useContext(UserContext);
 
-    const router = useRouter();
-    const { id } = router.query;
-    const formName = useRef(null),
-        reCAPTCHA = useRef(null);
+  let [fields, setFields] = useState([{ name: "", isRequired: false }]);
 
-    const hasFileField = useMemo(
-        () =>
-            fields.some(
-                (field) => field.type === "image" || field.type === "file"
-            ),
-        [fields]
-    );
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        try {
-            const name = formName.current.input.value;
-            const hasRecaptcha = reCAPTCHA.current.input.checked;
-            const schema = createJSONSchema(fields);
-            const body = {
-                name,
-                schema,
-                hasRecaptcha,
-                hasFileField,
-                hostUrl: API_URL,
-            };
-            const response = await post(`/form/new/${id}`, body);
-            if (response.status === "Inserted") {
-                message.success("Form Created Successfully");
-                router.replace(`/dashboard/project/${id}/${response.data.id}`);
-            }
-        } catch (err) {
-            message.error("Error in creating form");
-        }
-    };
+  const router = useRouter();
+  const { id } = router.query;
+  const formName = useRef(null),
+    reCAPTCHA = useRef(null);
 
-    useEffect(() => {
-        if (!isLoggedIn) {
-            setActive({
-                home: false,
-                dashboard: false,
-                documentation: false,
-                faq: false,
-            });
-            router.push("/signin");
-        }
-        setActive({
-            home: false,
-            dashboard: true,
-            documentation: false,
-            faq: false,
+  const hasFileField = useMemo(() => fields.some((field) => field.type === "image" || field.type === "file"), [fields]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const name = formName.current.input.value;
+      const hasRecaptcha = reCAPTCHA.current.input.checked;
+      const schema = createJSONSchema(fields);
+      const body = {
+        name,
+        schema,
+        hasRecaptcha,
+        hasFileField,
+        hostUrl: API_URL,
+      };
+      const response = await post(`/form/new/${id}`, body);
+      if (response.status === 201) {
+        message.success("Form created successfully");
+        router.push({
+          pathname: `/dashboard/project/${id}/${response.data.data.id}`,
+          query: { isNew: true, submissionLink: response.data.data.submisssionUrl },
         });
-    }, [user]);
+      } else message.error(response.data.error);
+    } catch (err) {
+      message.error("Error in creating form");
+    }
+  };
 
+  const handleCancel = async () => {
+    router.back();
+  };
+
+  useEffect(() => {
+    if (!isLoggedIn) {
+      setActive({
+        home: false,
+        dashboard: false,
+        documentation: false,
+        faq: false,
+      });
+      router.push("/signin");
+    }
+    setActive({
+      home: false,
+      dashboard: true,
+      documentation: false,
+      faq: false,
+    });
+  }, [user]);
+
+  const projectQuery = useQuery({
+    queryKey: ["projectData", id],
+    queryFn: () => {
+      return getProjectData(id);
+    },
+    staleTime: 10 * 60 * 1000,
+  });
+  if (projectQuery?.isLoading) return <Loader />;
+  if (projectQuery?.isSuccess)
     return (
-        <>
-            <SEO
-                title="SaveMyForm | NewForm"
-                desc={`Create New Form on SaveMyForm. SaveMyForm is a platform where yoy save your form data now
+      <>
+        <SEO
+          title="SaveMyForm | NewForm"
+          desc={`Create New Form on 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="absolute w-full h-96 bg-[#023430] top-0 z-0">
+            <Image
+              src={DashboardVector.src}
+              height={384}
+              width={786}
+              alt="Dashboard Vector"
+              className="ml-auto object-cover h-full"
             />
-            <div className="grid place-items-center w-screen relative">
-                <div className="absolute w-full h-96 bg-[#023430] top-0 z-0">
-                    <Image
-                        src={DashboardVector.src}
-                        height={384}
-                        width={786}
-                        alt="Dashboard Vector"
-                        className="ml-auto object-cover h-full"
-                    />
+          </div>
+          <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">
+                <h1 className=" text-[#DEF7E5] font-bold text-5xl">{"New Form"}</h1>
+              </div>
+              <div>
+                <div className=" text-[#DEF7E5] font-base text-xl">{projectQuery.data?.name}</div>
+              </div>
+            </div>
+            <form onSubmit={handleSubmit}>
+              <div className="flex flex-col gap-8 shadow-[0_4px_4px_0px_#00000040] rounded-lg p-8 bg-[#ffffff]">
+                <div>
+                  <Input
+                    placeholder="Form Name"
+                    className="rounded-lg border-solid border-2 border-[#01684a]"
+                    ref={formName}
+                  />
                 </div>
-                <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">
-                            <h1 className=" text-[#DEF7E5] font-bold text-5xl">
-                                {"New Form"}
-                            </h1>
-                        </div>
-                        <div>
-                            {/* <div className=" text-[#DEF7E5] font-base text-xl">
-                                {"Project1"}
-                            </div> */}
-                        </div>
-                    </div>
-                    <form onSubmit={handleSubmit}>
-                        <div className="flex flex-col gap-8 shadow-[0_4px_4px_0px_#00000040] rounded-lg p-8 bg-[#ffffff]">
-                            <div>
-                                <Input
-                                    placeholder="Form Name"
-                                    className="rounded-lg border-solid border-2 border-[#01684a]"
-                                    ref={formName}
-                                />
-                            </div>
-                            <FormInput
-                                fields={fields}
-                                setFields={setFields}
-                                hasFileField={hasFileField}
-                            />
-                            <div className="flex flex-row gap-2">
-                                <Checkbox ref={reCAPTCHA} />
-                                <div className="text-lg text-[#01684a] font-bold">
-                                    has reCAPTCHA Validation ?
-                                </div>
-                            </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-green-300 p-2 w-32">
-                                    Submit
-                                </button>
-                                <button className="shadow-[0px_4px_8px_rgba(0,0,0,0.25)] text-lg  rounded-lg bg-white p-2 w-32">
-                                    Cancel
-                                </button>
-                            </div>
-                        </div>
-                    </form>
+                <FormInput fields={fields} setFields={setFields} hasFileField={hasFileField} />
+                <div className="flex flex-row gap-2">
+                  <Checkbox ref={reCAPTCHA} />
+                  <div className="text-lg text-[#01684a] font-bold">has reCAPTCHA Validation ?</div>
                 </div>
-            </div>
-            <Footer />
-        </>
+                <div className="flex flex-row gap-2">
+                  <button
+                    className="shadow-[0px_4px_8px_rgba(0,0,0,0.25)] text-md rounded-lg bg-[#DEF7E5] p-2 w-32"
+                    onClick={handleSubmit}
+                    disabled={projectQuery.data?.forms?.length >= 5}
+                  >
+                    Submit
+                  </button>
+                  <button
+                    className="shadow-[0px_4px_8px_rgba(0,0,0,0.25)] text-md rounded-lg bg-white p-2 w-32"
+                    onClick={handleCancel}
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+        <Footer />
+      </>
     );
 }
diff --git a/pages/dashboard/project/[id]/settings/index.js b/pages/dashboard/project/[id]/settings/index.js
index a84b962..6f9cbee 100644
--- a/pages/dashboard/project/[id]/settings/index.js
+++ b/pages/dashboard/project/[id]/settings/index.js
@@ -227,7 +227,7 @@ export default function editProject({ id }) {
                   <h1 className="text-[#116149] font-bold text-[24px]">Allowed Domains</h1>
                   <div className="flex justify-between w-24  md:w-28 items-center">
                     <button
-                      className="bg-green-300 text-green-700 py-0.5  px-2 rounded-md flex justify-center items-center font-semibold"
+                      className="bg-[#DEF7E5] text-green-700 py-0.5  px-2 rounded-md flex justify-center items-center font-semibold"
                       onClick={() => handleAddDomain()}
                     >
                       <AiOutlinePlus className="mr-1" />
@@ -266,7 +266,7 @@ export default function editProject({ id }) {
                   <h1 className="text-[#116149] font-bold text-[24px]">Collaborators</h1>
                   <div className="flex justify-between w-24  md:w-28 items-center">
                     <button
-                      className="bg-green-300 text-green-700 py-0.5  px-2 rounded-md flex justify-center items-center font-semibold"
+                      className="bg-[#DEF7E5] text-green-700 py-0.5  px-2 rounded-md flex justify-center items-center font-semibold"
                       onClick={() => {
                         handleAddCollab();
                       }}
@@ -306,7 +306,7 @@ export default function editProject({ id }) {
             </div>
             <div className="mt-8 w-72 flex justify-between">
               <button
-                className="shadow-[0px_4px_8px_rgba(0,0,0,0.25)] rounded-lg bg-green-300 p-2 w-32"
+                className="shadow-[0px_4px_8px_rgba(0,0,0,0.25)] rounded-lg bg-[#DEF7E5] p-2 w-32"
                 onClick={handleSave}
               >
                 Save
diff --git a/pages/dashboard/project/newproject/index.js b/pages/dashboard/project/newproject/index.js
index 5597e3e..542e2d5 100644
--- a/pages/dashboard/project/newproject/index.js
+++ b/pages/dashboard/project/newproject/index.js
@@ -3,6 +3,7 @@ import Footer from "../../../../components/elements/Footer";
 import { Input } from "antd";
 import { Switch, Space } from "antd";
 import Image from "next/image";
+import { Loading } from "@nextui-org/react";
 import { AiOutlinePlus, AiOutlineClose } from "react-icons/ai";
 import { message } from "antd";
 import { post } from "../../../../components/utils/API";
@@ -10,13 +11,17 @@ import { useRouter } from "next/router";
 import { useGoogleReCaptcha } from "react-google-recaptcha-v3";
 import SEO from "../../../../components/utils/SEO";
 import DashboardVector from "../../../../assets/svgs/dashboardsVector.svg";
+import { useQueryClient } from "@tanstack/react-query";
+
 export default function NewProject() {
+  let queryClient = useQueryClient();
   const { executeRecaptcha } = useGoogleReCaptcha();
   const router = useRouter();
   const [state, setState] = useState(false);
   const [projectName, setProjectName] = useState(null);
   const [recaptchaKey, setReCaptchaKey] = useState(null);
   const [recaptchaSecret, setReCaptchaSecret] = useState(null);
+  const [loading, setLoading] = useState(false);
   const [domain, setDomain] = useState([""]);
   const onChange = (checked) => {
     setState(checked);
@@ -24,6 +29,7 @@ export default function NewProject() {
   const success = () => {
     message.success("Project Successfully saved");
     router.push("/dashboard");
+    queryClient.invalidateQueries(["userData"]);
   };
   const addDomain = () => {
     if (domain.length < 3) {
@@ -53,6 +59,7 @@ export default function NewProject() {
       message.error("Recaptcha Failed");
       return;
     }
+    setLoading(true);
     const res = await post("/project/new", {
       name: projectName,
       hasRecaptcha: state,
@@ -61,14 +68,11 @@ export default function NewProject() {
       allowedOrigins: domain,
       recaptcha_token: token,
     });
+    setLoading(false);
     res.status === "error" ? message.error(res.error) : success();
   };
   const handleCancel = async () => {
-    setProjectName(null);
-    setReCaptchaKey(null);
-    setReCaptchaSecret(null);
-    setState(false);
-    setDomain([""]);
+    router.back();
   };
   return (
     <>
@@ -173,10 +177,11 @@ export default function NewProject() {
             </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-green-300 p-2 w-32"
+                className="shadow-[0px_4px_8px_rgba(0,0,0,0.25)] text-lg rounded-lg bg-[#DEF7E5] p-2 w-32"
                 onClick={handleSubmit}
+                disabled={loading}
               >
-                Submit
+                {loading ? <Loading color="success" size="sm" /> : "Save"}
               </button>
               <button
                 className="shadow-[0px_4px_8px_rgba(0,0,0,0.25)] text-lg  rounded-lg bg-white p-2 w-32"
diff --git a/styles/globals.css b/styles/globals.css
index 863236b..06a6ce2 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -5,12 +5,13 @@
 @tailwind components;
 @tailwind utilities;
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap");
+
 html,
 body {
   padding: 0;
   margin: 0;
   font-family: Inter, sans-serif;
-  overscroll-behavior:none;
+  overscroll-behavior: none;
 }
 
 a {
@@ -20,7 +21,9 @@ a {
 
 * {
   box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
 }
+
 .faq_header {
   cursor: pointer;
   width: 700px;
@@ -32,6 +35,7 @@ a {
   padding-bottom: 0px;
   position: relative;
 }
+
 .faq_header::before {
   content: "+";
   font-weight: 100;
@@ -43,6 +47,7 @@ a {
   transform: rotate(var(--angle, 0deg)) scale(2.4);
   transition: transform 0.2s ease;
 }
+
 .faq_header h1 {
   padding-left: 30px;
   padding-bottom: 20px;
@@ -50,6 +55,7 @@ a {
   font-size: 24px;
   color: #00694b;
 }
+
 .faq_container {
   font-family: "Inter", sans-serif;
   width: 100vw;
@@ -60,6 +66,7 @@ a {
   top: 100px;
   margin: 15px 0px;
 }
+
 .faq_details {
   font-size: 14px;
   overflow: hidden;
@@ -96,6 +103,7 @@ a {
   color: white;
   position: relative;
 }
+
 .figma_ellipse {
   height: 200px;
   width: 200px;
@@ -104,6 +112,7 @@ a {
   left: 40%;
   top: 100px;
 }
+
 .figma_ellipse2 {
   height: 16vw;
   width: 16vw;
@@ -112,6 +121,7 @@ a {
   left: clamp(10px, 5%, 100px);
   top: 20vw;
 }
+
 .figma_vector {
   width: 500px;
   position: absolute;
@@ -131,6 +141,7 @@ a {
   top: clamp(10px, 20%, 150px);
   width: 678px;
 }
+
 .dyfr_text1 {
   font-family: "Poppins";
   font-style: normal;
@@ -139,6 +150,7 @@ a {
   color: #fffefe;
   margin-bottom: 30px;
 }
+
 .dyfr_text2 {
   font-family: "Poppins";
   font-style: normal;
@@ -149,6 +161,7 @@ a {
   color: #fffefe;
   margin-bottom: 30px;
 }
+
 .dyfr_text3 {
   font-family: "Poppins";
   font-style: normal;
@@ -159,18 +172,15 @@ a {
 }
 
 .homeCircleColor {
-  background: linear-gradient(
-    158deg,
-    #01ec64 14.39%,
-    rgba(217, 217, 217, 0) 90.67%
-  );
+  background: linear-gradient(158deg,
+      #01ec64 14.39%,
+      rgba(217, 217, 217, 0) 90.67%);
 }
+
 .homeCircleColor2 {
-  background: linear-gradient(
-    153.43deg,
-    #01ec64 -16.67%,
-    rgba(217, 217, 217, 0) 66.67%
-  );
+  background: linear-gradient(153.43deg,
+      #01ec64 -16.67%,
+      rgba(217, 217, 217, 0) 66.67%);
 }
 
 .reveal-bottom {
@@ -178,44 +188,54 @@ a {
   /* opacity: 0; */
   transition: opacity, transform 0.4s ease !important;
 }
+
 .nextui-collapse-title {
   color: #00694b !important;
 }
+
 .ant-popover-inner {
   box-shadow: 0px 4px 4px rgb(0, 0, 0, 0.25);
 }
+
 .ant-popover-inner-content .ant-btn-primary {
   color: red;
   background-color: transparent;
   border-color: red;
 }
+
 .ant-popover-inner-content .ant-btn-primary:hover {
   color: white;
   background-color: red;
   border-color: red;
 }
+
 .ant-popover-inner-content .ant-btn-default {
   color: green;
   border-color: green;
   /* background-color: blue; */
 }
+
 .ant-popover-inner-content .ant-btn-default:hover {
   color: white;
   border-color: green;
   background-color: green;
 }
+
 .reveal-bottom.active-reveal {
   transform: translateY(0px);
   opacity: 1 !important;
 }
+
 @media screen and (max-width: 1280px) {
   .figma_vector {
     right: 10px;
   }
+
   .text_container {
     left: 60px;
   }
 }
+
 @media screen and (max-width: 1024px) {
   .text_container {
     width: unset;
@@ -228,61 +248,74 @@ a {
     margin-bottom: 10px;
     width: 500px;
   }
+
   .dyfr_text2 {
     font-size: 18px;
     margin-bottom: 10px;
     width: 400px;
     line-height: unset;
   }
+
   .dyfr_text3 {
     font-size: 18px;
   }
+
   .figma_vector {
     width: 350px;
     top: unset;
   }
 }
+
 @media screen and (max-width: 799px) {
   .text_container {
     left: 30px;
   }
+
   .dyfr_text1 {
     font-size: 30px;
     width: 400px;
   }
+
   .dyfr_text2 {
     font-size: 15px;
     width: 330px;
     line-height: unset;
   }
+
   .dyfr_text3 {
     font-size: 15px;
     width: 330px;
   }
+
   .figma_vector {
     width: 250px;
     top: unset;
   }
 }
+
 @media screen and (max-width: 599px) {
   .dyfr_background {
     background: #001e2b;
   }
+
   .figma_ellipse {
     height: 120px;
     width: 120px;
     left: 5%;
     top: 50px;
   }
+
   .figma_vector {
     width: calc(20vh + 40vw);
     position: absolute;
     right: unset;
     top: 90px;
   }
+
   .figma_ellipse2 {
     display: none;
   }
+
   .text_container {
     width: 90%;
     top: unset;
@@ -291,21 +324,24 @@ a {
 
     /* height: 300px; */
   }
+
   .dyfr_text1 {
     font-weight: 600;
     font-size: 4vh;
     margin-bottom: 10px;
     line-height: unset;
   }
+
   .dyfr_text2 {
     font-size: 2vh;
     width: auto;
     margin-bottom: 10px;
     line-height: unset;
   }
+
   .dyfr_text3 {
     font-size: 2vh;
     width: auto;
     line-height: unset;
   }
-}
+}
\ No newline at end of file