diff --git a/models/Vendor.js b/models/Vendor.js
index f4eb7d9..d9a2f38 100644
--- a/models/Vendor.js
+++ b/models/Vendor.js
@@ -33,6 +33,11 @@ const VendorSchema = new mongoose.Schema({
         type: String, 
         required:true
     },
+    userId: {
+        type: mongoose.Schema.Types.ObjectId,
+        ref: 'User',
+        required: true
+    }
 }, {timestamps: true});
 
 mongoose.models = {}
diff --git a/pages/_app.js b/pages/_app.js
index 881a549..d20eeee 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -4,14 +4,14 @@ import {SessionProvider} from 'next-auth/react';
 
 function MyApp({ Component, pageProps, session }) {
   return (
-    <>
+    <div className='bg-[#BEFEA8] min-w-full min-h-screen'>
       <SessionProvider session={session}>
-        <div className='flex flex-col gap-5 mb-7'>
+        <div className='flex flex-col gap-5 w-full h-full'>
           <Navbar />
           <Component {...pageProps} />
         </div>
       </SessionProvider>
-    </>
+    </div>
   );
 }
 
diff --git a/pages/api/addVendors.js b/pages/api/addVendors.js
index b050524..ef13ff0 100644
--- a/pages/api/addVendors.js
+++ b/pages/api/addVendors.js
@@ -3,7 +3,6 @@ import connectDb from '../../middleware/mongoose';
 
 const handler = async (req, res) => {
     if(req.method == 'POST'){
-        // console.log(req.body);
         let v = new Vendor(req.body);
         await v.save();
         res.status(200).json({ success: "success" })
diff --git a/pages/api/auth/[...nextauth].js b/pages/api/auth/[...nextauth].js
index 6d2f832..d0a23bd 100644
--- a/pages/api/auth/[...nextauth].js
+++ b/pages/api/auth/[...nextauth].js
@@ -1,12 +1,40 @@
-import NextAuth from 'next-auth/next'
-import GoogleProvider from 'next-auth/providers/google'
+import NextAuth from 'next-auth';
+import connectDb from '../../../middleware/mongoose';
+import GoogleProvider from 'next-auth/providers/google';
+import User from '../../../models/User';
 
 export default NextAuth({
     providers: [
         GoogleProvider({
             clientId: process.env.GOOGLE_CLIENT_ID,
-            clientSecret: process.env.GOOGLE_CLIENT_SECRET
+            clientSecret: process.env.GOOGLE_CLIENT_SECRET,
         }),
     ],
-    secret: process.env.JWT_SECRET
+    secret: process.env.JWT_SECRET,
+    callbacks: {
+        async jwt({ token, account, profile }) {
+            await connectDb();
+    
+            if (account && profile) {
+                let existingUser = await User.findOne({ email: profile.email });
+    
+                if (!existingUser) {
+                    existingUser = new User({
+                        name: profile.name,
+                        email: profile.email,
+                    });
+                    await existingUser.save();
+                }
+    
+                token.userId = existingUser._id;
+            }
+    
+            return token;
+        },
+        async session({ session, token }) {
+            session.userId = token.userId;
+            return session;
+        },
+    },
+    
 });
\ No newline at end of file
diff --git a/pages/api/getVendors.js b/pages/api/getVendors.js
index a18415b..bca1987 100644
--- a/pages/api/getVendors.js
+++ b/pages/api/getVendors.js
@@ -3,11 +3,16 @@ import connectDb from "../../middleware/mongoose";
 
 const handler = async (req, res) => {
   if (req.method == "GET") {
-    let vendors = await Vendor.find();
-    res.status(200).json({ vendors });
+    try {
+      let vendors = await Vendor.find({ userId: req.query.userId });
+      res.status(200).json({ vendors });
+    } catch (error) {
+      res.status(500).json({ error: "Error fetching vendors" });
+    }
   } else {
     res.status(400).json({ error: "This method is not allowed" });
   }
 };
 
 export default connectDb(handler);
+
diff --git a/pages/index.js b/pages/index.js
index ff14b56..5cc81a8 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,10 +5,10 @@ import "react-toastify/dist/ReactToastify.css";
 import EditVendorModal from "../components/EditVendorModal";
 import VendorCard from "../components/VendorCard";
 import DeleteVendorModal from "../components/DeleteVendorModal";
+import { useSession } from "next-auth/react";
 
 var updatedDetailsOfVendors = [];
 const Index = () => {
-  // console.log(vendors);
   const [vendors, setVendors] = useState([]);
   const [_id, setId] = useState("");
   const [name, setName] = useState("");
@@ -23,19 +23,23 @@ const Index = () => {
   // Pagination
   const [totalVendors, setTotalVendors] = useState(vendors.length);
   const [currentPage, setCurrentPage] = useState(1);
-  const [vendorsPerPage] = useState(10);
+  const [vendorsPerPage] = useState(6);
 
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
   const [vendorToBeDelete, setVendorToBeDelete] = useState("");
 
+  const { data: session } = useSession();
+  const userId = session?.userId;
+
   useEffect(() => {
+    if(!userId) return;
     fetchVendors();
-  }, []);
+  }, [userId]);
 
   // Get Request
   const fetchVendors = async () => {
     try {
-      const response = await fetch("/api/getVendors", {
+      const response = await fetch(`/api/getVendors?userId=${userId}`, {
         method: "GET",
       });
 
@@ -77,40 +81,39 @@ const Index = () => {
 
   const paginate = (pageNumber) => setCurrentPage(pageNumber);
   return (
-    <div className="position-relative">
-      <VendorCard
-        editFun={editFun}
-        currentVendors={currentVendors}
-        setOpenDeleteModal={setOpenDeleteModal}
-        setVendorToBeDelete={setVendorToBeDelete}
-      />
-
-      {showEditVendorModal && (
-        <EditVendorModal
-          _id={_id}
-          accNo={accNo}
-          setAccNo={setAccNo}
-          address1={address1}
-          setAddress1={setAddress1}
-          address2={address2}
-          setAddress2={setAddress2}
-          bankName={bankName}
-          setBankName={setBankName}
-          city={city}
-          setCity={setCity}
-          country={country}
-          setCountry={setCountry}
-          name={name}
-          setName={setName}
-          zipCode={zipCode}
-          setZipCode={setZipCode}
-          updatedDetailsOfVendors={updatedDetailsOfVendors}
-          setShowEditVendorModal={setShowEditVendorModal}
-          fetchVendors={fetchVendors}
+    <div className="relative flex flex-col min-h-full">
+        <VendorCard
+          editFun={editFun}
+          currentVendors={currentVendors}
+          setOpenDeleteModal={setOpenDeleteModal}
+          setVendorToBeDelete={setVendorToBeDelete}
         />
-      )}
 
-      <div className="flex justify-center absolute bottom-0 w-full z-[-10]">
+      <EditVendorModal
+        showEditVendorModal={showEditVendorModal}
+        _id={_id}
+        accNo={accNo}
+        setAccNo={setAccNo}
+        address1={address1}
+        setAddress1={setAddress1}
+        address2={address2}
+        setAddress2={setAddress2}
+        bankName={bankName}
+        setBankName={setBankName}
+        city={city}
+        setCity={setCity}
+        country={country}
+        setCountry={setCountry}
+        name={name}
+        setName={setName}
+        zipCode={zipCode}
+        setZipCode={setZipCode}
+        updatedDetailsOfVendors={updatedDetailsOfVendors}
+        setShowEditVendorModal={setShowEditVendorModal}
+        fetchVendors={fetchVendors}
+      />
+
+      <div className="flex justify-center w-full mt-5">
         <Pagination
           vendorsPerPage={vendorsPerPage}
           totalVendors={totalVendors}
diff --git a/pages/vendor.js b/pages/vendor.js
index 6b1cc77..554fd78 100644
--- a/pages/vendor.js
+++ b/pages/vendor.js
@@ -1,4 +1,4 @@
-import VendorComp from "../components/Vendor";
+import VendorComp from "../components/AddVendor";
 
 const Vendor = () => {
     return (