diff --git a/package-lock.json b/package-lock.json
index 15e7349..0914d2c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,8 @@
         "express-session": "^1.17.3",
         "mongoose": "^7.4.5",
         "multer": "^1.4.5-lts.1",
-        "path": "^0.12.7"
+        "path": "^0.12.7",
+        "zlib": "^1.0.5"
       },
       "devDependencies": {
         "nodemon": "^3.0.1"
@@ -3393,6 +3394,15 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    },
+    "node_modules/zlib": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/zlib/-/zlib-1.0.5.tgz",
+      "integrity": "sha512-40fpE2II+Cd3k8HWTWONfeKE2jL+P42iWJ1zzps5W51qcTsOUKM5Q5m2PFb0CLxlmFAaUuUdJGc3OfZy947v0w==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=0.2.0"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 95a2b8b..6b1ec93 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
     "express-session": "^1.17.3",
     "mongoose": "^7.4.5",
     "multer": "^1.4.5-lts.1",
-    "path": "^0.12.7"
+    "path": "^0.12.7",
+    "zlib": "^1.0.5"
   },
   "devDependencies": {
     "nodemon": "^3.0.1"
diff --git a/routes/Admin/dashboard.js b/routes/Admin/dashboard.js
index f1f184e..072462e 100644
--- a/routes/Admin/dashboard.js
+++ b/routes/Admin/dashboard.js
@@ -3,16 +3,52 @@ const { MongoClient } = require("mongodb");
 const router = express.Router();
 const bcrypt = require("bcrypt");
 const { connect, getCollection } = require("../../db");
+const { ObjectId } = require("mongodb");
 
 (async () => {
   try {
     // Get a reference to the users collection
     const userCollection = await getCollection("users");
-    router.get("/dashboard", (req, res) => {
+    const productCollection = await getCollection("products");
+    router.get("/dashboard/users", async (req, res) => {
       if (req.session.isAuthenticated && req.session.role == "admin") {
         const username = req.session.username;
-        // Access session data here, e.g., username
-        res.send(`<h1>ADMIN DASHBOARD</h1>`);
+        const users = await userCollection.find({}).toArray();
+        const visitors = users.filter((user) => user.role === "visitor");
+        res.render("adminVisitors", { visitors: visitors });
+        //res.render("dashboard", { username });
+      } else {
+        // Redirect or handle unauthenticated access
+        res.redirect("/login");
+      }
+    });
+    router.get("/dashboard/company", async (req, res) => {
+      if (req.session.isAuthenticated && req.session.role == "admin") {
+        const username = req.session.username;
+        const users = await userCollection.find({}).toArray();
+        const visitors = users.filter((user) => user.role === "company");
+        res.render("adminCompany", { visitors: visitors });
+        //res.render("dashboard", { username });
+      } else {
+        // Redirect or handle unauthenticated access
+        res.redirect("/login");
+      }
+    });
+    router.get("/dashboard/products", async (req, res) => {
+      if (req.session.isAuthenticated && req.session.role == "admin") {
+        const username = req.session.username;
+        const products = await productCollection.find({}).toArray();
+
+        for (let product of products) {
+          const user = await userCollection.findOne({
+            _id: new ObjectId(product.createdBy),
+          });
+          if (user) {
+            product.CreatedByUser = user.name;
+          }
+        }
+        console.log(products);
+        res.render("adminProducts", { products: products });
         //res.render("dashboard", { username });
       } else {
         // Redirect or handle unauthenticated access
@@ -23,3 +59,8 @@ const { connect, getCollection } = require("../../db");
   }
 })();
 module.exports = router;
+//  <!-- <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
+//                 <p class="text-sm leading-6 text-white">Co-Founder / CEO</p>
+//                 <p class="mt-1 text-xs leading-5 text-white">Last seen <time datetime="2023-01-23T13:23Z">3h
+//                         ago</time></p>
+//             </div> -->
diff --git a/routes/Company/company.js b/routes/Company/company.js
new file mode 100644
index 0000000..003e6f9
--- /dev/null
+++ b/routes/Company/company.js
@@ -0,0 +1,50 @@
+const express = require("express");
+const { MongoClient } = require("mongodb");
+const router = express.Router();
+const bcrypt = require("bcrypt");
+const { connect, getCollection } = require("../../db");
+const { ObjectId } = require("mongodb");
+
+(async () => {
+  try {
+    const userCollection = await getCollection("users");
+    const productsCollection = await getCollection("products");
+    router.get("/company/:id", async (req, res) => {
+      try {
+        const company = await userCollection.findOne({
+          _id: new ObjectId(req.params.id),
+        });
+
+        const products = await productsCollection
+          .find({
+            createdBy: req.params.id,
+          })
+          .toArray();
+        // console.log(products, company);
+        let loggedInUser = await userCollection.findOne({
+          _id: new ObjectId(req.session.username),
+        });
+        let cartItemCount = 0;
+        if (req.session.role == "visitor") {
+          cartItemCount = loggedInUser.cart.length;
+        }
+
+        res.render("company", {
+          loggedIn: req.session.username ? true : false,
+          user: req.session,
+          products: products,
+          company: company,
+          logo: loggedInUser,
+          cartCount: cartItemCount,
+        });
+      } catch (error) {
+        res.status(500).send({ message: "Server error" });
+      }
+    });
+  } finally {
+    // Ensures that the client will close when you finish/error
+    // await client.close();
+  }
+})();
+
+module.exports = router;
diff --git a/routes/Company/coverPicture.js b/routes/Company/coverPicture.js
index d9af84c..fcec06b 100644
--- a/routes/Company/coverPicture.js
+++ b/routes/Company/coverPicture.js
@@ -1,10 +1,9 @@
 const express = require("express");
-const { MongoClient } = require("mongodb");
 const router = express.Router();
-const bcrypt = require("bcrypt");
-const { connect, getCollection } = require("../../db");
+const { getCollection } = require("../../db");
 const { ObjectId } = require("mongodb");
 const multer = require("multer");
+const fs = require("fs");
 
 const storage = multer.diskStorage({
   destination: function (req, file, cb) {
@@ -32,17 +31,16 @@ const upload = multer({ storage: storage });
       // Assuming 'cover' is the name of the form field in your client-side form
       const coverImage = req.file.path; // get the path of the uploaded file
 
-      // Update the user document with the cover image path
       const result = await userCollection.updateOne(
         { _id: new ObjectId(id) },
         { $set: { cover: coverImage } }
       );
-
-      if (result.modifiedCount === 1) {
-        res.redirect(`/cover/${id}`);
-      } else {
-        res.status(500).send({ message: "Failed to upload cover image" });
-      }
+      res.redirect(`/cover/${id}`);
+      // if (result.modifiedCount === 1) {
+      //
+      // } else {
+      //   res.status(500).send({ message: "Failed to upload cover image" });
+      // }
     });
 
     router.get("/cover/:id", async (req, res) => {
diff --git a/routes/Company/logo.js b/routes/Company/logo.js
index 56c3071..8e3f070 100644
--- a/routes/Company/logo.js
+++ b/routes/Company/logo.js
@@ -1,10 +1,10 @@
 const express = require("express");
-const { MongoClient } = require("mongodb");
 const router = express.Router();
-const bcrypt = require("bcrypt");
-const { connect, getCollection } = require("../../db");
+const { getCollection } = require("../../db");
 const { ObjectId } = require("mongodb");
 const multer = require("multer");
+const fs = require("fs");
+const zlib = require("zlib");
 
 const storage = multer.diskStorage({
   destination: function (req, file, cb) {
@@ -32,27 +32,25 @@ const upload = multer({ storage: storage });
       // Assuming 'cover' is the name of the form field in your client-side form
       const logoImage = req.file.path; // get the path of the uploaded file
 
-      // Update the user document with the cover image path
+      // Convert image to base64
+      // const logoImageBase64 = fs.readFileSync(logoImage, {
+      //   encoding: "base64",
+      // });
+      // const compressedImage = zlib
+      //   .deflateSync(Buffer.from(logoImageBase64))
+      //   .toString("base64");
       const result = await userCollection.updateOne(
         { _id: new ObjectId(id) },
         { $set: { logo: logoImage } }
       );
-
-      if (result.modifiedCount === 1) {
-        res.redirect(`/logo/${id}`);
-      } else {
-        res.status(500).send({ message: "Failed to upload Logo image" });
-      }
+      res.redirect(`/logo/${id}`);
     });
 
     router.get("/logo/:id", async (req, res) => {
-      // Redirect to /
-      // Get the user id from the request parameters
       const id = req.params.id;
       let idString = id.toString();
       const user = await userCollection.findOne({ _id: new ObjectId(id) });
       user._id = idString;
-      // Render the 'cover' view and pass the user data and id to it
       res.render("company/logo", { user: user });
     });
   } finally {
diff --git a/routes/Mutual/landing.js b/routes/Mutual/landing.js
index 3c70123..9916f0c 100644
--- a/routes/Mutual/landing.js
+++ b/routes/Mutual/landing.js
@@ -5,6 +5,7 @@ const bcrypt = require("bcrypt");
 const { connect, getCollection } = require("../../db");
 const { ObjectId } = require("mongodb");
 const multer = require("multer");
+const zlib = require("zlib");
 
 const storage = multer.diskStorage({
   destination: function (req, file, cb) {
@@ -23,10 +24,15 @@ const upload = multer({ storage: storage });
     const productsCollection = await getCollection("products");
     router.get("/", async (req, res) => {
       const products = await productsCollection.find().toArray();
-      const users = await userCollection.find({}, { cover: 1 }).toArray();
+      const companyUsers = await userCollection.find({}).toArray();
+      const companies = companyUsers.filter((user) => user.role === "company");
+      const users = await userCollection
+        .find({}, { cover: 1, logo: 1 })
+        .toArray();
       const covers = users
         .filter((user) => user.cover)
         .map((user) => user.cover);
+      const logos = users.filter((user) => user.logo).map((user) => user.logo);
       let loggedInUser = await userCollection.findOne({
         _id: new ObjectId(req.session.username),
       });
@@ -35,11 +41,11 @@ const upload = multer({ storage: storage });
         cartItemCount = loggedInUser.cart.length;
       }
 
-      console.log(loggedInUser);
       res.render("landing", {
         loggedIn: req.session.username ? true : false,
         user: req.session,
-        products: products,
+        companies: companies,
+        logos: logos,
         covers: covers,
         logo: loggedInUser,
         cartCount: cartItemCount,
diff --git a/routes/Visitor/addtocart.js b/routes/Visitor/addtocart.js
index f9192de..d99d0cd 100644
--- a/routes/Visitor/addtocart.js
+++ b/routes/Visitor/addtocart.js
@@ -22,6 +22,8 @@ const { ObjectId } = require("mongodb");
       const user = await userCollection.findOne({ _id: userId });
       if (!user) {
         return res.status(404).send({ message: "User not found" });
+      } else if (user.role != "visitor") {
+        return res.status(404).send({ message: "User is not a Visitor" });
       }
 
       // Initialize cart if it does not exist
diff --git a/server.js b/server.js
index 1d96642..f55ef75 100644
--- a/server.js
+++ b/server.js
@@ -17,6 +17,7 @@ const coverRouter = require("./routes/Company/coverPicture");
 const logoRouter = require("./routes/Company/logo");
 const productRouter = require("./routes/Mutual/product");
 const productsRouter = require("./routes/Company/products");
+const companyRouter = require("./routes/Company/company");
 const createproductsRouter = require("./routes/Company/createproduct");
 const editproductsRouter = require("./routes/Company/editproduct");
 const deleteproductsRouter = require("./routes/Company/deleteproduct");
@@ -83,6 +84,7 @@ app.use(logoRouter);
 app.use(productsRouter);
 
 app.use(productRouter);
+app.use(companyRouter);
 
 app.use(cartRouter);
 
@@ -129,5 +131,5 @@ app.use(contactusRouter);
 app.use(logoutRouter);
 
 app.listen(7000, () => {
-  console.log("Server listening on port 7000");
+  console.log("Server listening on port http://localhost:7000");
 });
diff --git a/uploads/61p6R+WqedL._SX522_.jpg b/uploads/61p6R+WqedL._SX522_.jpg
deleted file mode 100644
index 67ce446..0000000
Binary files a/uploads/61p6R+WqedL._SX522_.jpg and /dev/null differ
diff --git a/uploads/61q-bIO7ecL._SX522_.jpg b/uploads/61q-bIO7ecL._SX522_.jpg
deleted file mode 100644
index 6b3c939..0000000
Binary files a/uploads/61q-bIO7ecL._SX522_.jpg and /dev/null differ
diff --git a/uploads/811aBK9bUFL._SX522_.jpg b/uploads/811aBK9bUFL._SX522_.jpg
deleted file mode 100644
index 89cd9e4..0000000
Binary files a/uploads/811aBK9bUFL._SX522_.jpg and /dev/null differ
diff --git a/uploads/Acxiom.png b/uploads/Acxiom.png
deleted file mode 100644
index dd92941..0000000
Binary files a/uploads/Acxiom.png and /dev/null differ
diff --git a/uploads/COVERPCSLIDE.png b/uploads/COVERPCSLIDE.png
deleted file mode 100644
index 249761f..0000000
Binary files a/uploads/COVERPCSLIDE.png and /dev/null differ
diff --git a/uploads/Cover_64f2c6ca44233e3c20d52f58.jpeg b/uploads/Cover_64f2c6ca44233e3c20d52f58.jpeg
new file mode 100644
index 0000000..9fbc9f4
Binary files /dev/null and b/uploads/Cover_64f2c6ca44233e3c20d52f58.jpeg differ
diff --git a/uploads/Cover_65112b86fe52d3973e892b51.jpeg b/uploads/Cover_65112b86fe52d3973e892b51.jpeg
new file mode 100644
index 0000000..2620b03
Binary files /dev/null and b/uploads/Cover_65112b86fe52d3973e892b51.jpeg differ
diff --git a/uploads/Logo_64f2c6ca44233e3c20d52f58.jpeg b/uploads/Logo_64f2c6ca44233e3c20d52f58.jpeg
new file mode 100644
index 0000000..ed784ac
Binary files /dev/null and b/uploads/Logo_64f2c6ca44233e3c20d52f58.jpeg differ
diff --git a/uploads/Logo_65112b86fe52d3973e892b51.jpeg b/uploads/Logo_65112b86fe52d3973e892b51.jpeg
new file mode 100644
index 0000000..208246b
Binary files /dev/null and b/uploads/Logo_65112b86fe52d3973e892b51.jpeg differ
diff --git a/uploads/Sign2.jpg b/uploads/Sign2.jpg
deleted file mode 100644
index 17127e5..0000000
Binary files a/uploads/Sign2.jpg and /dev/null differ
diff --git a/uploads/image 1.jpg b/uploads/image 1.jpg
deleted file mode 100644
index 76b054e..0000000
Binary files a/uploads/image 1.jpg and /dev/null differ
diff --git a/uploads/photo-1682687982470-8f1b0e79151a.jpeg b/uploads/photo-1682687982470-8f1b0e79151a.jpeg
deleted file mode 100644
index 4c6ca76..0000000
Binary files a/uploads/photo-1682687982470-8f1b0e79151a.jpeg and /dev/null differ
diff --git a/uploads/photo-1682695796954-bad0d0f59ff1.jpeg b/uploads/photo-1682695796954-bad0d0f59ff1.jpeg
deleted file mode 100644
index aa5c222..0000000
Binary files a/uploads/photo-1682695796954-bad0d0f59ff1.jpeg and /dev/null differ
diff --git a/uploads/photo-1683009427479-c7e36bbb7bca.jpeg b/uploads/photo-1683009427479-c7e36bbb7bca.jpeg
deleted file mode 100644
index 3015b78..0000000
Binary files a/uploads/photo-1683009427479-c7e36bbb7bca.jpeg and /dev/null differ
diff --git a/uploads/premium_photo-1680127401632-dcc0f571d4b9.jpeg b/uploads/premium_photo-1680127401632-dcc0f571d4b9.jpeg
deleted file mode 100644
index b86bf37..0000000
Binary files a/uploads/premium_photo-1680127401632-dcc0f571d4b9.jpeg and /dev/null differ
diff --git a/uploads/programming-css-html-code-wallpaper-c920a8cd218a4dcb26f728ff90a1366d.jpg b/uploads/programming-css-html-code-wallpaper-c920a8cd218a4dcb26f728ff90a1366d.jpg
deleted file mode 100644
index bd116db..0000000
Binary files a/uploads/programming-css-html-code-wallpaper-c920a8cd218a4dcb26f728ff90a1366d.jpg and /dev/null differ
diff --git a/uploads/quote-hello-world-computer-hd-wallpaper-e9e0288df18a2debe69758bf7051b64d.jpg b/uploads/quote-hello-world-computer-hd-wallpaper-e9e0288df18a2debe69758bf7051b64d.jpg
deleted file mode 100644
index e307276..0000000
Binary files a/uploads/quote-hello-world-computer-hd-wallpaper-e9e0288df18a2debe69758bf7051b64d.jpg and /dev/null differ
diff --git a/uploads/tree-736885_1280.jpg b/uploads/tree-736885_1280.jpg
new file mode 100644
index 0000000..4c3aeaf
Binary files /dev/null and b/uploads/tree-736885_1280.jpg differ
diff --git a/uploads/urgentbacups.jpg b/uploads/urgentbacups.jpg
deleted file mode 100644
index 1a01b89..0000000
Binary files a/uploads/urgentbacups.jpg and /dev/null differ
diff --git a/uploads/vardagen-cooks-knife-dark-grey__0710384_pe727512_s5.jpg b/uploads/vardagen-cooks-knife-dark-grey__0710384_pe727512_s5.jpg
deleted file mode 100644
index fb12ddd..0000000
Binary files a/uploads/vardagen-cooks-knife-dark-grey__0710384_pe727512_s5.jpg and /dev/null differ
diff --git a/views/adminCompany.ejs b/views/adminCompany.ejs
new file mode 100644
index 0000000..58ef8ac
--- /dev/null
+++ b/views/adminCompany.ejs
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <style>
+        body {
+            background-color: #374151;
+            padding: 1rem;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Dashboard</h1>
+    <p>All Users
+    <ul role="list" class="divide-y divide-gray-100">
+        <% visitors.forEach(visitor=> { %>
+            <li class="flex justify-between gap-x-6 py-5">
+                <div class="flex min-w-0 gap-x-4">
+                    <img class="h-12 w-12 flex-none rounded-full bg-gray-50"
+                        src="<%= visitor.logo ? '/' + visitor.logo : 'https://static.vecteezy.com/system/resources/previews/019/896/008/original/male-user-avatar-icon-in-flat-design-style-person-signs-illustration-png.png' %>"
+                        alt="">
+                    <div class="min-w-0 flex-auto">
+                        <p class="text-sm font-semibold leading-6 text-white">
+                            <%= visitor.name %>
+                        </p>
+                        <p class="mt-1 truncate text-xs leading-5 text-white">
+                            <%= visitor.email %>
+                        </p>
+                    </div>
+                </div>
+            </li>
+            <% }); %>
+    </ul>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/views/adminProducts.ejs b/views/adminProducts.ejs
new file mode 100644
index 0000000..fb53b4c
--- /dev/null
+++ b/views/adminProducts.ejs
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <style>
+        body {
+            background-color: #374151;
+            padding: 1rem;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Dashboard</h1>
+    <p>All Users
+    <ul role="list" class="divide-y divide-gray-100">
+        <% products.forEach(visitor=> { %>
+            <li class="flex justify-between gap-x-6 py-5">
+                <div class="flex min-w-0 gap-x-4">
+                    <img class="h-12 w-12 flex-none rounded-full bg-gray-50"
+                        src="<%= visitor.logo1 ? '/' + visitor.logo1 : 'https://static.vecteezy.com/system/resources/previews/019/896/008/original/male-user-avatar-icon-in-flat-design-style-person-signs-illustration-png.png' %>"
+                        alt="">
+                    <div class="min-w-0 flex-auto">
+                        <p class="text-sm font-semibold leading-6 text-white">
+                            <%= visitor.name %>
+                        </p>
+                        <p class="mt-1 truncate text-xs leading-5 text-white">
+                            <a href="../company/<%= visitor.createdBy %>">
+                                <%= visitor.CreatedByUser %>
+                            </a>
+                        </p>
+                        <p class="mt-1 truncate text-xs leading-5 text-white">
+                            Price : <%= visitor.price %>
+                        </p>
+                    </div>
+                </div>
+            </li>
+            <% }); %>
+    </ul>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/views/adminVisitors.ejs b/views/adminVisitors.ejs
new file mode 100644
index 0000000..58ef8ac
--- /dev/null
+++ b/views/adminVisitors.ejs
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <style>
+        body {
+            background-color: #374151;
+            padding: 1rem;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Dashboard</h1>
+    <p>All Users
+    <ul role="list" class="divide-y divide-gray-100">
+        <% visitors.forEach(visitor=> { %>
+            <li class="flex justify-between gap-x-6 py-5">
+                <div class="flex min-w-0 gap-x-4">
+                    <img class="h-12 w-12 flex-none rounded-full bg-gray-50"
+                        src="<%= visitor.logo ? '/' + visitor.logo : 'https://static.vecteezy.com/system/resources/previews/019/896/008/original/male-user-avatar-icon-in-flat-design-style-person-signs-illustration-png.png' %>"
+                        alt="">
+                    <div class="min-w-0 flex-auto">
+                        <p class="text-sm font-semibold leading-6 text-white">
+                            <%= visitor.name %>
+                        </p>
+                        <p class="mt-1 truncate text-xs leading-5 text-white">
+                            <%= visitor.email %>
+                        </p>
+                    </div>
+                </div>
+            </li>
+            <% }); %>
+    </ul>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/views/company.ejs b/views/company.ejs
new file mode 100644
index 0000000..9275107
--- /dev/null
+++ b/views/company.ejs
@@ -0,0 +1,404 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.0.1/tailwind.min.css" rel="stylesheet">
+    <style>
+        body {
+            padding: 1rem;
+            background-color: #374151;
+        }
+
+        input {
+            border: none
+        }
+
+        .main {
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            font-family: sans-serif;
+        }
+
+        .topWrapper {
+            width: 95vw;
+            overflow: hidden;
+        }
+
+        .coverPicture {
+            width: 100%;
+
+            display: block;
+            border-radius: 10px;
+        }
+
+        .logoPicure {
+            position: relative;
+            width: 150px;
+            height: 150px;
+            bottom: 5rem;
+            left: 1rem;
+            border-radius: 100%;
+        }
+
+        .companyName,
+        .companyBio,
+        .companyType,
+        .hr2,
+        #productBtn,
+        #servicesBtn {
+            position: relative !important;
+            bottom: 5rem !important;
+
+        }
+
+        .companyName,
+        .companyBio {
+            color: white;
+        }
+
+        .companyType {
+            color: rgb(175, 174, 173);
+        }
+
+        .bottomWrapper {
+            width: 95vw;
+        }
+
+        #productBtn,
+        #servicesBtn {
+            background-color: white;
+            padding: 0.5rem 1rem;
+            border-radius: 10px;
+        }
+
+        .companyName {
+            font-size: 3rem;
+        }
+
+        .bottomWrapper {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-wrap: wrap;
+            width: 95vw;
+        }
+
+        .insideP {
+            width: 25rem;
+            height: 35rem;
+        }
+    </style>
+
+</head>
+
+<body>
+    <nav class="bg-gray-800">
+        <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+            <div class="relative flex h-16 items-center justify-between">
+                <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
+                    <!-- Mobile menu button-->
+                    <button type="button"
+                        class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+                        aria-controls="mobile-menu" aria-expanded="false">
+                        <span id="menuToggle" class="absolute -inset-0.5"></span>
+                        <script>
+                            document.getElementById("menuToggle").addEventListener("click", () => {
+                                document.getElementById("mobileMenu").classList.toggle("show")
+                            })
+                        </script>
+                        <style>
+                            #mobileMenu,
+                            #profiledropdown {
+                                height: 0;
+                                margin: 0;
+                                padding: 0;
+                                overflow: hidden;
+                            }
+
+                            .show {
+                                height: auto !important;
+
+                                transition: all 1s ease-out;
+                            }
+                        </style>
+                        <span class="sr-only">Open main menu</span>
+                        <!--
+                Icon when menu is closed.
+    
+                Menu open: "hidden", Menu closed: "block"
+              -->
+                        <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" aria-hidden="true">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+                        </svg>
+                        <!--
+                Icon when menu is open.
+    
+                Menu open: "block", Menu closed: "hidden"
+              -->
+                        <svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" aria-hidden="true">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+                <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
+                    <div class="flex flex-shrink-0 items-center">
+                        <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
+                            alt="Your Company">
+                    </div>
+                    <div class="hidden sm:ml-6 sm:block">
+                        <div class="flex space-x-4">
+                            <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+                            <a href="/"
+                                class=" bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium aria-current="
+                                page">Home</a>
+                            <a href="/services"
+                                class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Services</a>
+                            <a href="/career"
+                                class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Career</a>
+                            <a href="/aboutus"
+                                class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium"">About Us</a>
+              <a href=" /contactus"
+                                class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Contact
+                                Us</a>
+
+                            <% if (loggedIn) { %>
+                                <a href="/logout"
+                                    class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Log
+                                    Out</a>
+                                <% } else { %>
+                                    <a href="/login"
+                                        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Log
+                                        In</a>
+                                    <a href="/signupSelect"
+                                        class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Sign
+                                        Up</a>
+                                    <% } %>
+
+
+
+                        </div>
+                    </div>
+                </div>
+                <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+                    <% if (user.role !=undefined ) { %>
+                        <li
+                            class="font-sans block mt-4 lg:inline-block lg:mt-0 lg:ml-6 align-middle text-black hover:text-gray-700">
+                            <a href="/cart/<%= user.username %>" role="button" class="relative flex">
+                                <svg class="flex-1 w-8 h-8 fill-current" viewbox="0 0 24 24">
+                                    <path
+                                        d="M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z" />
+                                </svg>
+                                <span
+                                    class="absolute right-0 top-0 rounded-full bg-red-600 w-4 h-4 top right p-0 m-0 text-white font-mono text-sm  leading-tight text-center">
+                                    <%= cartCount %>
+                                </span>
+                            </a>
+                        </li>
+                        <% }%> <!-- Profile dropdown -->
+                            <% if (loggedIn) { %>
+                                <div class="relative ml-3">
+                                    <div>
+                                        <button type="button"
+                                            class="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
+                                            id="user-menu-button" aria-expanded="false" aria-haspopup="true">
+                                            <span class="absolute -inset-1.5"></span>
+                                            <!-- <span class="sr-only">Open user menu</span> -->
+                                            <img class="h-10 w-10 rounded-full"
+                                                src="../<%= logo.logo ? '' + logo.logo : 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80' %>"
+                                                alt="">
+                                        </button>
+                                    </div>
+
+                                    <script>
+                                        document.getElementById("user-menu-button").addEventListener("click", () => {
+                                            document.getElementById("profiledropdown").classList.toggle("show")
+                                        })
+                                    </script>
+                                    <div id="profiledropdown"
+                                        class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+                                        role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button"
+                                        tabindex="-1">
+                                        <!-- Active: "bg-gray-100", Not Active: "" -->
+                                        <% if (user.role=="company" ) { %>
+                                            <a href="/profile/<%= user.username %>"
+                                                class="block px-4 py-2 text-sm text-gray-700" role="menuitem"
+                                                tabindex="-1" id="user-menu-item-0">Company Details</a>
+                                            <a href="/cover/<%= user.username %>"
+                                                class="block px-4 py-2 text-sm text-gray-700" role="menuitem"
+                                                tabindex="-1" id="user-menu-item-1">Cover Picture</a>
+                                            <a href="/logo/<%= user.username %>"
+                                                class="block px-4 py-2 text-sm text-gray-700" role="menuitem"
+                                                tabindex="-1" id="user-menu-item-2">Logo</a>
+                                            <a href="/products/<%= user.username %>"
+                                                class="block px-4 py-2 text-sm text-gray-700" role="menuitem"
+                                                tabindex="-1" id="user-menu-item-3">My Products</a>
+                                            <% } else if(user.role=="visitor" ) { %>
+                                                <a href="/profile/<%= user.username %>"
+                                                    class="block px-4 py-2 text-sm text-gray-700" role="menuitem"
+                                                    tabindex="-1" id="user-menu-item-0">Profile</a>
+                                                <a href="/cart/<%= user.username %>"
+                                                    class="block px-4 py-2 text-sm text-gray-700" role="menuitem"
+                                                    tabindex="-1" id="user-menu-item-1">My Cart</a>
+                                                <% } else{%>
+                                                    <a href="/profile/<%= user.username %>"
+                                                        class="block px-4 py-2 text-sm text-gray-700" role="menuitem"
+                                                        tabindex="-1" id="user-menu-item-0">Admin Profile</a>
+                                                    <a href="/dashboard/users"
+                                                        class="block px-4 py-2 text-sm text-gray-700" role="menuitem"
+                                                        tabindex="-1" id="user-menu-item-0">All Users</a>
+                                                    <% } %>
+
+
+                                    </div>
+                                </div>
+                                <% } else { %>
+
+                                    <% } %>
+
+
+
+                </div>
+            </div>
+        </div>
+        </div>
+
+        <!-- Mobile menu, show/hide based on menu state. -->
+        <div class="sm:hidden" id="mobile-menu">
+            <div id="mobileMenu" class="space-y-1 px-2 pb-3 pt-2 ">
+                <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+                <a href="/" class="bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium"
+                    aria-current="page">Home</a>
+                <a href="/services"
+                    class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Services</a>
+                <a href="/career"
+                    class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Career</a>
+                <a href="/aboutus"
+                    class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">About
+                    Us</a>
+                <a href="/contactus"
+                    class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Contact
+                    Us</a>
+                <% if (loggedIn) { %>
+                    <a href="/logout"
+                        class="text-white bg-red-700 hover:bg-red-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Log
+                        Out</a>
+                    <% } else { %>
+                        <a href="/signupSelect"
+                            class="text-white bg-green-700 hover:bg-green-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Sign
+                            Up</a>
+                        <a href="/login"
+                            class="text-white bg-blue-700 hover:bg-blue-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Log
+                            In</a>
+                        <% } %>
+
+
+
+
+            </div>
+        </div>
+    </nav>
+    <div class="main">
+        <div class="topWrapper">
+            <img src="../<%=company.cover %>" class="coverPicture " alt="">
+            <img src="../<%=company.logo %>" class="logoPicure" alt="">
+            <h1 class="companyName">
+                <%=company.companyName %>
+            </h1>
+            <p class="companyBio">
+                <%=company.bio %>
+                    Bio
+            </p>
+            <p class="companyType">
+                <%=company.companyType%>
+                    CompanyType
+            </p>
+            <HR class="hr2">
+            </HR>
+            <button id="productBtn">Products</button>
+            <button id="servicesBtn">Services</button>
+        </div>
+
+        <div class="bottomWrapper">
+            <% if (!products || products.length===0) { %>
+                <h1 class="text-lg font-medium text-white m-10">You Have No Products</h1>
+                <% } else { %>
+                    <% products.forEach(function(product) { %>
+                        <a class="companyP" href="/product/<%= product._id %>">
+                            <div class="py-6 px-3 insideP">
+                                <div class="bg-white shadow-xl rounded-lg overflow-hidden">
+                                    <div class="bg-cover bg-center h-56 p-4" style="background-image: url('')">
+                                        <img style="width: 100%;"
+                                            src="<%= product.logo1 ? '/' + product.logo1 : 'https://i.ibb.co/kSZwvxX/addLogo.png' %>"
+                                            alt="">
+                                    </div>
+                                    <div class="p-4">
+                                        <p class="uppercase tracking-wide text-sm font-bold text-gray-700">
+                                            <%=product.name%>
+                                        </p>
+                                        <p class="text-3xl text-gray-900">
+                                            ₹<%=product.offer%>
+                                        </p>
+                                        <p class="text-gray-700" style="text-decoration: line-through;">₹
+                                            <%=product.price%>
+                                        </p>
+                                    </div>
+                                    <!-- <div class="flex p-4 border-t border-gray-300 text-gray-700">
+                                        <div class="flex-1 inline-flex items-center">
+                                            <svg class="h-6 w-6 text-gray-600 fill-current mr-3"
+                                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                                <path
+                                                    d="M0 16L3 5V1a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v4l3 11v5a1 1 0 0 1-1 1v2h-1v-2H2v2H1v-2a1 1 0 0 1-1-1v-5zM19 5h1V1H4v4h1V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h2V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1zm0 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V6h-2v2a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6H3.76L1.04 16h21.92L20.24 6H19zM1 17v4h22v-4H1zM6 4v4h4V4H6zm8 0v4h4V4h-4z">
+                                                </path>
+                                            </svg>
+                                            <p><span class="text-gray-900 font-bold">3</span> Bedrooms</p>
+                                        </div>
+                                        <div class="flex-1 inline-flex items-center">
+                                            <svg class="h-6 w-6 text-gray-600 fill-current mr-3"
+                                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                                <path fill-rule="evenodd"
+                                                    d="M17.03 21H7.97a4 4 0 0 1-1.3-.22l-1.22 2.44-.9-.44 1.22-2.44a4 4 0 0 1-1.38-1.55L.5 11h7.56a4 4 0 0 1 1.78.42l2.32 1.16a4 4 0 0 0 1.78.42h9.56l-2.9 5.79a4 4 0 0 1-1.37 1.55l1.22 2.44-.9.44-1.22-2.44a4 4 0 0 1-1.3.22zM21 11h2.5a.5.5 0 1 1 0 1h-9.06a4.5 4.5 0 0 1-2-.48l-2.32-1.15A3.5 3.5 0 0 0 8.56 10H.5a.5.5 0 0 1 0-1h8.06c.7 0 1.38.16 2 .48l2.32 1.15a3.5 3.5 0 0 0 1.56.37H20V2a1 1 0 0 0-1.74-.67c.64.97.53 2.29-.32 3.14l-.35.36-3.54-3.54.35-.35a2.5 2.5 0 0 1 3.15-.32A2 2 0 0 1 21 2v9zm-5.48-9.65l2 2a1.5 1.5 0 0 0-2-2zm-10.23 17A3 3 0 0 0 7.97 20h9.06a3 3 0 0 0 2.68-1.66L21.88 14h-7.94a5 5 0 0 1-2.23-.53L9.4 12.32A3 3 0 0 0 8.06 12H2.12l3.17 6.34z">
+                                                </path>
+                                            </svg>
+                                            <p><span class="text-gray-900 font-bold">2</span> Bathrooms</p>
+                                        </div>
+                                    </div> -->
+                                    <div class="px-4 pt-3 pb-4 border-t border-gray-300 bg-gray-100">
+                                        <div class="text-xs uppercase font-bold text-gray-600 tracking-wide">Owner
+                                        </div>
+                                        <div class="flex items-center pt-2">
+                                            <div class="bg-cover bg-center w-10 h-10 rounded-full mr-3"
+                                                style="background-image: url(https://images.unsplash.com/photo-1500522144261-ea64433bbe27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80)">
+                                            </div>
+                                            <div>
+                                                <p class="font-bold text-gray-900">
+                                                    <%=company.name %>
+                                                </p>
+                                                <p class="text-sm text-gray-700">
+                                                    <%=company.phone %>
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </a>
+
+                        <% }); %>
+                            <% } %>
+
+
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/views/company/cover.ejs b/views/company/cover.ejs
index 8949540..434890c 100644
--- a/views/company/cover.ejs
+++ b/views/company/cover.ejs
@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Your Title</title>
   <!-- Include Tailwind CSS via CDN -->
+  <link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
   <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
   <style>
     body {
@@ -156,19 +157,77 @@
   </nav>
 
   <div class="container mx-auto px-4 ">
-    <img src="../<%= user.cover %>" alt="coveralt" class="w-full object-cover mt-4 rounded">
-    <form action="/cover/<%= user._id %>" method="post" enctype="multipart/form-data"
-      class=" bg-gray-800 flex flex-wrap justify-between mt-4 mx-0 rounded">
+    <img id="image" src="../<%= user.cover %>" alt="coveralt" class="w-2/3 object-cover mt-4 mx-auto  rounded">
+    <div class=" bg-gray-800 flex flex-wrap justify-between mt-4 mx-0 rounded">
       <div>
-        <input type="file" name="cover"
+        <input type="file" name="cover" id="imageInput"
           class="bg-gray-900  border py-3 my-2 mx-3 px-5 text-grey-darkest text-white rounded hover:bg-gray-700" />
       </div>
       <div>
-        <input type="submit" id="uploadbtn" value="Upload"
+        <input type="submit" id="uploadBtn" value="Upload"
           class="bg-gray-900 text-white font-bold py-3 px-5 my-2 mx-3 hover:bg-gray-700 rounded" />
       </div>
-    </form>
+    </div>
+    <script>
+      let image = document.getElementById("image");
+      let cropper;
+
+      document.getElementById("imageInput").addEventListener("change", function (e) {
+        let files = e.target.files;
+        let done = function (url) {
+          image.src = url;
+          if (cropper) cropper.destroy();
+          cropper = new Cropper(image, { aspectRatio: 16 / 4 });
+        };
+        let reader;
+        let file;
+        let url;
+
+        if (files && files.length > 0) {
+          file = files[0];
+
+          if (url) {
+            done(URL.createObjectURL(file));
+          } else if (FileReader) {
+            reader = new FileReader();
+            reader.onload = function (e) {
+              done(reader.result);
+            };
+            reader.readAsDataURL(file);
+            console.log(file);
+            document.getElementById("uploadBtn").addEventListener("click", (e) => {
+              // e.preventDefault()
+              let croppedImage = cropper.getCroppedCanvas({
+                width: 1000
+              });
+              // Convert the canvas to a blob
+              croppedImage.toBlob((blob) => {
+                let url = "/cover/<%= user._id %>";
+                let formData = new FormData();
+                blob.name = 'Cover_<%= user._id %>.jpeg';
+                formData.append('cover', blob, 'Cover_<%= user._id %>.jpeg');
+                fetch(url, {
+                  method: "POST",
+                  body: formData
+                })
+                  .then(response => { window.location.reload(); })
+                  .then(result => {
+                    console.log('Success:', result);
+                  })
+                  .catch(error => {
+                    console.error('Error:', error);
+                  });
+              }, 'image/jpeg');
+            });
+          }
+        }
+      });
+
+
+    </script>
+
   </div>
 </body>
+<script src="https://unpkg.com/cropperjs"></script>
 
 </html>
\ No newline at end of file
diff --git a/views/company/logo.ejs b/views/company/logo.ejs
index 4a1359a..e39abd7 100644
--- a/views/company/logo.ejs
+++ b/views/company/logo.ejs
@@ -7,8 +7,11 @@
   <title>Your Title</title>
   <!-- Include Tailwind CSS via CDN -->
   <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
+
   <style>
     body {
+      padding: 1rem;
       background-color: #111827;
     }
 
@@ -84,7 +87,7 @@
                 py-2 text-sm font-medium">Profile</a>
               <a href="/cover/<%= user._id %>"
                 class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Cover
-                PIcture</a>
+                Picture</a>
               <a href="/logo/<%= user._id %>"
                 class=" bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium aria-current=" page">Logo</a>
               <a href="/products/<%= user._id %>"
@@ -156,19 +159,77 @@
   </nav>
 
   <div class="container mx-auto px-4 ">
-    <img src="../<%= user.logo %>" alt="logoalt" class="w-full object-cover mt-4 rounded">
-    <form action="/logo/<%= user._id %>" method="post" enctype="multipart/form-data"
-      class=" bg-gray-800 flex flex-wrap justify-between mt-4 mx-0 rounded">
+    <img id="image" src="../<%= user.logo %>" alt="logoalt" class="w-1/4 object-cover mt-4 mx-auto rounded">
+    <div class=" bg-gray-800 flex flex-wrap justify-between mt-4 mx-0 rounded">
       <div>
-        <input type="file" name="logo"
+        <input type="file" name="logo" id="imageInput"
           class="bg-gray-900  border py-3 my-2 mx-3 px-5 text-grey-darkest text-white rounded hover:bg-gray-700" />
       </div>
       <div>
-        <input type="submit" id="uploadbtn" value="Upload"
+        <input type="submit" id="uploadBtn" value="Upload"
           class="bg-gray-900 text-white font-bold py-3 px-5 my-2 mx-3 hover:bg-gray-700 rounded" />
       </div>
-    </form>
+    </div>
+    <script>
+      let image = document.getElementById("image");
+      let cropper;
+
+      document.getElementById("imageInput").addEventListener("change", function (e) {
+        let files = e.target.files;
+        let done = function (url) {
+          image.src = url;
+          if (cropper) cropper.destroy();
+          cropper = new Cropper(image, { aspectRatio: 1 / 1 });
+        };
+        let reader;
+        let file;
+        let url;
+
+        if (files && files.length > 0) {
+          file = files[0];
+
+          if (url) {
+            done(URL.createObjectURL(file));
+          } else if (FileReader) {
+            reader = new FileReader();
+            reader.onload = function (e) {
+              done(reader.result);
+            };
+            reader.readAsDataURL(file);
+            console.log(file);
+            document.getElementById("uploadBtn").addEventListener("click", (e) => {
+              // e.preventDefault()
+              let croppedImage = cropper.getCroppedCanvas({
+                width: 500
+              });
+              // Convert the canvas to a blob
+              croppedImage.toBlob((blob) => {
+                let url = "/logo/<%= user._id %>";
+                let formData = new FormData();
+                blob.name = 'Logo_<%= user._id %>.jpeg'
+                formData.append('logo', blob, 'Logo_<%= user._id %>.jpeg');
+                fetch(url, {
+                  method: "POST",
+                  body: formData
+                })
+                  .then(response => { window.location.reload(); })
+                  .then(result => {
+                    console.log('Success:', result);
+                  })
+                  .catch(error => {
+                    console.error('Error:', error);
+                  });
+              }, 'image/jpeg');
+            });
+          }
+        }
+      });
+
+
+    </script>
+
   </div>
 </body>
+<script src="https://unpkg.com/cropperjs"></script>
 
 </html>
\ No newline at end of file
diff --git a/views/landing.ejs b/views/landing.ejs
index c30c455..507e85d 100644
--- a/views/landing.ejs
+++ b/views/landing.ejs
@@ -9,6 +9,7 @@
   <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
   <style>
     body {
+      padding: 1rem;
       background-color: #374151;
     }
 
@@ -23,7 +24,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      height: 40vh;
+      /* height: 30vh; */
       overflow: hidden;
     }
   </style>
@@ -115,7 +116,7 @@
           </div>
         </div>
         <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
-          <% if (user.role=="visitor" ) { %>
+          <% if (user.role==="visitor" ) { %>
             <li
               class="font-sans block mt-4 lg:inline-block lg:mt-0 lg:ml-6 align-middle text-black hover:text-gray-700">
               <a href="/cart/<%= user.username %>" role="button" class="relative flex">
@@ -139,7 +140,7 @@
                       <span class="absolute -inset-1.5"></span>
                       <span class="sr-only">Open user menu</span>
                       <img class="h-10 w-10 rounded-full"
-                        src="<%= logo.logo ? '/' + logo.logo : 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80' %>"
+                        src="../<%= logo.logo ? '' + logo.logo : 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80' %>"
                         alt="">
                     </button>
                   </div>
@@ -162,12 +163,17 @@
                         tabindex="-1" id="user-menu-item-2">Logo</a>
                       <a href="/products/<%= user.username %>" class="block px-4 py-2 text-sm text-gray-700"
                         role="menuitem" tabindex="-1" id="user-menu-item-3">My Products</a>
-                      <% } else { %>
+                      <% } else if(user.role=="visitor" ) { %>
                         <a href="/profile/<%= user.username %>" class="block px-4 py-2 text-sm text-gray-700"
                           role="menuitem" tabindex="-1" id="user-menu-item-0">Profile</a>
                         <a href="/cart/<%= user.username %>" class="block px-4 py-2 text-sm text-gray-700"
                           role="menuitem" tabindex="-1" id="user-menu-item-1">My Cart</a>
-                        <% } %>
+                        <% } else{%>
+                          <a href="/profile/<%= user.username %>" class="block px-4 py-2 text-sm text-gray-700"
+                            role="menuitem" tabindex="-1" id="user-menu-item-0">Admin Profile</a>
+                          <a href="/dashboard/users" class="block px-4 py-2 text-sm text-gray-700" role="menuitem"
+                            tabindex="-1" id="user-menu-item-0">All Users</a>
+                          <% } %>
 
 
                   </div>
@@ -221,14 +227,14 @@
   <div id="coverContainer">
     <% if(covers.length> 0) { %>
       <% covers.forEach(function(cover, index) { %>
-        <img class="coverSlideShow" src="<%= cover %>" alt="Cover image"
-          style="display: <%= index === 0 ? 'block' : 'none' %>">
+        <img class="coverSlideShow" src="../<%= cover %>" alt="Cover image" style='display: <%=index===0 ? ' block'
+          : 'none' %>'>
+
         <% }); %>
           <% } else { %>
             <img src="/uploads/COVERPCSLIDE.png" alt="Default image">
             <% } %>
   </div>
-
   <script>
     let currentCoverIndex = 0;
     const covers = document.querySelectorAll(".coverSlideShow");
@@ -239,60 +245,113 @@
       covers[currentCoverIndex].style.display = 'block';
     }, 3000);
   </script>
+  <style>
+    .marquee {
+      overflow: hidden;
+      margin: 1rem;
+    }
+
+    .marquee-content {
+      display: flex;
+      animation: scrolling 10s linear infinite;
+    }
+
+    .marquee-item {
+      flex: 0 0 8vw;
+      margin: 0 1vw;
+      /*   flex: 0 0 20vw; */
+      /*   margin: 0 2vw; */
+    }
+
+    .marquee-item img {
+      display: block;
+      width: 100%;
+      border-radius: 100%;
+      /*   padding: 0 20px; */
+    }
+
+    @keyframes scrolling {
+      0% {
+        transform: translateX(0);
+      }
 
+      100% {
+        transform: translatex(144vw);
+      }
+    }
+  </style>
+  <div class="marquee">
+    <div class="marquee-content">
+      <% if(logos.length> 0) { %>
+        <% logos.forEach(function(logo, index) { %>
+          <div class="marquee-item">
+            <img src="../<%= logo %>" alt="">
+          </div>
+          <% }); %>
+            <% } else { %>
+              <img src="/uploads/COVERPCSLIDE.png" alt="Default image">
+              <% } %>
+    </div>
+  </div>
   <div class="bg-gray-700 m-0">
     <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
 
-      <h2 class=" h-10 text-lg font-medium text-white">All Products</h2>
-
-      <div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+      <h2 class=" h-10 text-lg font-medium text-white">All companies</h2>
+      <div class="container my-12 mx-auto px-4 md:px-12">
+        <div class="flex flex-wrap -mx-1 lg:-mx-4">
+          <% if (!companies || companies.length===0) { %>
+            <h1 class="text-lg font-medium text-white m-10">You Have No companies</h1>
+            <% } else { %>
+              <% companies.forEach(function(company) { %>
+                <!-- Column -->
+                <div class="my-1 px-1 w-full md:w-1/4 lg:my-4 lg:px-4 lg:w-1/4 ">
+
+                  <!-- Article -->
+                  <article class="overflow-hidden rounded-lg shadow-lg bg-gray-200">
+
+                    <a href="/company/<%= company._id %>">
+                      <img alt="Placeholder" class="block h-auto w-full"
+                        src="../<%= company.logo ? '' + company.logo : 'https://i.ibb.co/kSZwvxX/addLogo.png' %>">
+                    </a>
+
+                    <header class="flex items-center justify-between leading-tight p-2 md:p-4">
+                      <h1 class="text-lg">
+                        <a class="no-underline hover:underline text-gray-700" href="/company/<%= company._id %>">
+                          <%= company.companyName %>
+                        </a>
+                      </h1>
+                      <!-- <p class="text-white text-sm">
+                        <%= company.phone %>
+                      </p> -->
+                    </header>
+                    <HR>
+                    <footer class="flex items-center justify-between leading-none p-2 md:p-4">
+                      <a class="flex items-center no-underline hover:underline text-gray-700"
+                        href="/company/<%= company._id %>">
+                        <img alt="Placeholder" class="block rounded-full" src="https://picsum.photos/32/32/?random">
+                        <p class="ml-2 text-sm">
+                          Owner: <%= company.name %>
+                        </p>
+                      </a>
+                      <a class="no-underline text-grey-darker hover:text-red-dark" href="/company/<%= company._id %>">
+                        <span class="hidden">Like</span>
+                        <i class="fa fa-heart"></i>
+                      </a>
+                    </footer>
+
+                  </article>
+                  <!-- END Article -->
 
 
-        <!-- <% products.forEach(function(product) { %>
-              <a href="/product/<%= user._id %>/<%= product._id %>" class="group">
-                <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7">
-                  <img src="../<%= product.logo %>" alt="Tall slender porcelain bottle with natural clay textured body and cork stopper." class="h-full w-full object-cover object-center group-hover:opacity-75">
                 </div>
-                <h3 class="mt-4 text-sm text-white"><%= product.name %></h3>
-                <p class="mt-1 text-lg font-medium text-white">Slogan: <%= product.slogan %></p>
-                <p class="mt-1 text-lg font-medium text-white">Website: <%= product.websitelink %></p>
-                <p class="mt-1 text-lg font-medium text-white">Address: <%= product.address %></p>
-                <p class="mt-1 text-lg font-medium text-white">Description: <%= product.discription %></p>
-              </a>
-            <% }); %>
-             -->
-        <% if (!products || products.length===0) { %>
-          <h1 class="text-lg font-medium text-white m-10">You Have No Products</h1>
-          <% } else { %>
-            <% products.forEach(function(product) { %>
-              <div class="group">
-                <a href="/product/<%= product._id %>" class="group">
-                  <div
-                    class="flex justify-center aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-700 border-4 border-gray-800 xl:aspect-h-8 xl:aspect-w-7">
-                    <img id="productimage"
-                      src="<%= product.logo1 ? '/' + product.logo1 : 'https://i.ibb.co/kSZwvxX/addLogo.png' %>"
-                      alt="LOGO/Thumbnail">
+                <% }); %>
+                  <% } %>
+        </div>
+        <!-- END Column -->
 
-                  </div>
-                  <h3 class="mt-4 text-sm text-white">
-                    <%= product.name %>
-                  </h3>
-                  <p class="mt-1 text-lg font-medium text-white">Slogan: <%= product.slogan %>
-                  </p>
-                  <p class="mt-1 text-lg font-medium text-white">Website: <%= product.websitelink %>
-                  </p>
-                  <p class="mt-1 text-lg font-medium text-white">Address: <%= product.address %>
-                  </p>
-                  <p class="mt-1 text-lg font-medium text-white">Description: <%= product.discription %>
-                  </p>
-                </a>
-
-              </div>
-
-              <% }); %>
-                <% } %>
 
       </div>
+
     </div>
   </div>
 </body>
diff --git a/views/product.ejs b/views/product.ejs
index 4439633..6e4dd9d 100644
--- a/views/product.ejs
+++ b/views/product.ejs
@@ -1,200 +1,245 @@
 <!DOCTYPE html>
-      <html lang="en">
-      <head>
-          <meta charset="UTF-8">
-          <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          <title>Product</title>
-          <!-- Include Tailwind CSS via CDN -->
-          <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
-          <style>
-         body{
-          background-color: #374151;
-   }
-          input{
-            border:none
-          }
-          .mainPictureContainer{
-  
-  overflow:hidden;
-}
-         
-         
-          </style>
-          <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js"></script>
-      </head>
-      <body>
-      <nav class="bg-gray-800">
-  <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
-    <div class="relative flex h-16 items-center justify-between">
-      <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
-        <!-- Mobile menu button-->
-        <button type="button" class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
-          <span id="menuToggle" class="absolute -inset-0.5"></span>
-          <script>
-            document.getElementById("menuToggle").addEventListener("click",()=>{
-            document.getElementById("mobileMenu").classList.toggle("show")
-            })
-          </script>
-          <style>
-            #mobileMenu ,#profiledropdown{
-              height: 0;
-              margin: 0;
-              padding: 0;
-              overflow: hidden;
-            }
-            .show{
-             height: auto !important; 
-             
-             transition: all 1s ease-out;
-            }
-          </style>
-          <span class="sr-only">Open main menu</span>
-          <!--
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Product</title>
+  <!-- Include Tailwind CSS via CDN -->
+  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+  <style>
+    body {
+      background-color: #374151;
+    }
+
+    input {
+      border: none
+    }
+
+    .mainPictureContainer {
+
+      overflow: hidden;
+    }
+  </style>
+  <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js"></script>
+</head>
+
+<body>
+  <nav class="bg-gray-800">
+    <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+      <div class="relative flex h-16 items-center justify-between">
+        <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
+          <!-- Mobile menu button-->
+          <button type="button"
+            class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+            aria-controls="mobile-menu" aria-expanded="false">
+            <span id="menuToggle" class="absolute -inset-0.5"></span>
+            <script>
+              document.getElementById("menuToggle").addEventListener("click", () => {
+                document.getElementById("mobileMenu").classList.toggle("show")
+              })
+            </script>
+            <style>
+              #mobileMenu,
+              #profiledropdown {
+                height: 0;
+                margin: 0;
+                padding: 0;
+                overflow: hidden;
+              }
+
+              .show {
+                height: auto !important;
+
+                transition: all 1s ease-out;
+              }
+            </style>
+            <span class="sr-only">Open main menu</span>
+            <!--
             Icon when menu is closed.
 
             Menu open: "hidden", Menu closed: "block"
           -->
-          <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-          </svg>
-          <!--
+            <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+              aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+            </svg>
+            <!--
             Icon when menu is open.
 
             Menu open: "block", Menu closed: "hidden"
           -->
-          <svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
-      </div>
-      <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
-        <div class="flex flex-shrink-0 items-center">
-          <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
+            <svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+              aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
         </div>
-        <div class="hidden sm:ml-6 sm:block">
-          <div class="flex space-x-4">
-            <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
-            <a href="/" class=" bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium aria-current="page">Home</a>
-            <a href="/services" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Services</a>
-            <a href="/career" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Career</a>
-            <a href="/aboutus" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium"">About Us</a>
-          <a href="/contactus" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Contact Us</a>
+        <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
+          <div class="flex flex-shrink-0 items-center">
+            <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
+              alt="Your Company">
+          </div>
+          <div class="hidden sm:ml-6 sm:block">
+            <div class="flex space-x-4">
+              <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+              <a href="/" class=" bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium aria-current="
+                page">Home</a>
+              <a href="/services"
+                class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Services</a>
+              <a href="/career"
+                class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Career</a>
+              <a href="/aboutus"
+                class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium"">About Us</a>
+          <a href=" /contactus"
+                class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Contact
+                Us</a>
 
+            </div>
           </div>
         </div>
-      </div>
-      <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
- <!-- Profile dropdown -->
-        
+        <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+          <!-- Profile dropdown -->
+
+
+
 
-          
-          
         </div>
       </div>
     </div>
-  </div> 
-
-  <!-- Mobile menu, show/hide based on menu state. -->
-  <div class="sm:hidden" id="mobile-menu">
-    <div id="mobileMenu" class="space-y-1 px-2 pb-3 pt-2 ">
-      <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
-      <a href="/" class="bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium" aria-current="page">Home</a>
-      <a href="/services" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Services</a>
-      <a href="/career" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Career</a>
-      <a href="/aboutus" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">About Us</a>
-      <a href="/contactus" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Contact Us</a>
-      
-      
     </div>
-  </div>
-      </nav>
-      
-      <div class="antialiased">
-        <div class="py-6">
-          <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-6">
-            <div class="flex flex-col md:flex-row -mx-4">
-              <div class="md:flex-1 px-4">
-                <div x-data="{ image: 1 }" x-cloak>
-                  <div class="h-64 md:h-80 rounded-lg bg-gray-100 mb-4">
-                    <div x-show="image === 1" class="mainPictureContainer h-64 md:h-80 rounded-lg bg-gray-100 mb-4 flex items-center justify-center">
-        <!--               <span class="text-5xl">1</span> -->
-                      <img class="rounded-lg" src="<%= product.logo1 ? '/' + product.logo1 : 'https://i.ibb.co/kSZwvxX/addLogo.png' %>"  >
-                    </div>
-        
-                    <div x-show="image === 2" class="mainPictureContainer h-64 md:h-80 rounded-lg bg-gray-100 mb-4 flex items-center justify-center">
-        <img class="rounded-lg" src="<%= product.logo2 ? '/' + product.logo2 : 'https://i.ibb.co/kSZwvxX/addLogo.png' %>">
-                    </div>
-        
-                    <div x-show="image === 3" class="mainPictureContainer h-64 md:h-80 rounded-lg bg-gray-100 mb-4 flex items-center justify-center">
-                        <img class="rounded-lg" src="<%= product.logo3 ? '/' + product.logo3 : 'https://i.ibb.co/kSZwvxX/addLogo.png' %>">
-                    </div>
-                  </div>
-        
-                  <div class="flex -mx-2 mb-4">
-                    <template x-for="i in 3">
-                      <div class="flex-1 px-2">
-                        <button x-on:click="image = i" :class="{ 'ring-2 ring-indigo-300 ring-inset': image === i }" class="focus:outline-none w-full rounded-lg h-24 md:h-32 bg-gray-100 flex items-center justify-center">
-                          <span x-text="i" class="text-2xl"></span>
-                        </button>
-                      </div>
-                    </template>
-                  </div>
+
+    <!-- Mobile menu, show/hide based on menu state. -->
+    <div class="sm:hidden" id="mobile-menu">
+      <div id="mobileMenu" class="space-y-1 px-2 pb-3 pt-2 ">
+        <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+        <a href="/" class="bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium"
+          aria-current="page">Home</a>
+        <a href="/services"
+          class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Services</a>
+        <a href="/career"
+          class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Career</a>
+        <a href="/aboutus"
+          class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">About
+          Us</a>
+        <a href="/contactus"
+          class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Contact
+          Us</a>
+
+
+      </div>
+    </div>
+  </nav>
+
+  <div class="antialiased">
+    <div class="py-6">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-6">
+        <div class="flex flex-col md:flex-row -mx-4">
+          <div class="md:flex-1 px-4">
+            <div x-data="{ image: 1 }" x-cloak>
+              <div class="h-64 md:h-80 rounded-lg bg-gray-100 mb-4">
+                <div x-show="image === 1"
+                  class="mainPictureContainer h-64 md:h-80 rounded-lg bg-gray-100 mb-4 flex items-center justify-center">
+                  <!--               <span class="text-5xl">1</span> -->
+                  <img class="rounded-lg"
+                    src="<%= product.logo1 ? '/' + product.logo1 : 'https://i.ibb.co/kSZwvxX/addLogo.png' %>">
                 </div>
-              </div>
-              <div class="md:flex-1 px-4">
-                <h2 class="mb-2 leading-tight tracking-tight font-bold text-white text-2xl md:text-3xl"><%= product.name %></h2>
-                <p class="text-white text-sm">By <p class="text-yellow-600 hover:underline"><%= createdBy.name %></p></p>
-                <div class="flex items-center space-x-4 my-4">
-                  <div>
-                    <div class="rounded-lg bg-gray-100 flex py-2 px-3">
-                      <span class="text-indigo-400 mr-1 mt-1">₹</span>
-                      <span class="font-bold text-indigo-600 text-3xl"><%= product.offer %></span>
-                    </div>
-                  </div>
-                  <div class="flex-1">
-                    <p style="text-decoration: line-through;" class="text-green-500 text-xl font-semibold">₹<%= product.price %></p>
-                  
-                    <p class="text-gray-400 text-sm">Inclusive of all Taxes.</p>
-                   
-                  </div>
-                  <button class="h-14 px-6 py-2 font-semibold rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white" id="add-to-cart-button" data-product-id=<%= product._id %>>Add To Cart</button>
+
+                <div x-show="image === 2"
+                  class="mainPictureContainer h-64 md:h-80 rounded-lg bg-gray-100 mb-4 flex items-center justify-center">
+                  <img class="rounded-lg"
+                    src="<%= product.logo2 ? '/' + product.logo2 : 'https://i.ibb.co/kSZwvxX/addLogo.png' %>">
                 </div>
-                <div class="flex items-center space-x-4 my-4">
-                  <div>
-                    <p class="mt-1 text-lg font-medium text-white">Slogan: <%= product.slogan %></p>
-                  <p class="mt-1 text-lg font-medium text-white">Website: <%= product.websitelink %></p>
-                  <p class="mt-1 text-lg font-medium text-white">Address: <%= product.address %></p>
-                  <p class="mt-1 text-lg font-medium text-white">Description: <%= product.discription %></p>
+
+                <div x-show="image === 3"
+                  class="mainPictureContainer h-64 md:h-80 rounded-lg bg-gray-100 mb-4 flex items-center justify-center">
+                  <img class="rounded-lg"
+                    src="<%= product.logo3 ? '/' + product.logo3 : 'https://i.ibb.co/kSZwvxX/addLogo.png' %>">
+                </div>
+              </div>
+
+              <div class="flex -mx-2 mb-4">
+                <template x-for="i in 3">
+                  <div class="flex-1 px-2">
+                    <button x-on:click="image = i" :class="{ 'ring-2 ring-indigo-300 ring-inset': image === i }"
+                      class="focus:outline-none w-full rounded-lg h-24 md:h-32 bg-gray-100 flex items-center justify-center">
+                      <span x-text="i" class="text-2xl"></span>
+                    </button>
                   </div>
-                  
-                <div class="flex py-4 space-x-4">
-                 
-                  <script>
-                    document.getElementById('add-to-cart-button').addEventListener('click', function(event) {
-  const productId = event.target.getAttribute('data-product-id');
-  
-  fetch(`/add-to-cart/${productId}`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json'
-    }
-  })
-  .then(response => response.json())
-  .then(data => {
-    if (data.message) {
-      alert(data.message);
-    }
-  })
-  .catch((error) => {
-    console.error('Error:', error);
-  });
-});
-                  </script>
+                </template>
+              </div>
+            </div>
+          </div>
+          <div class="md:flex-1 px-4">
+            <h2 class="mb-2 leading-tight tracking-tight font-bold text-white text-2xl md:text-3xl">
+              <%= product.name %>
+            </h2>
+            <p class="text-white text-sm">By
+            <p class="text-yellow-600 hover:underline">
+              <%= createdBy.name %>
+            </p>
+            </p>
+            <div class="flex items-center space-x-4 my-4">
+              <div>
+                <div class="rounded-lg bg-gray-100 flex py-2 px-3">
+                  <span class="text-indigo-400 mr-1 mt-1">₹</span>
+                  <span class="font-bold text-indigo-600 text-3xl">
+                    <%= product.offer %>
+                  </span>
                 </div>
               </div>
+              <div class="flex-1">
+                <p style="text-decoration: line-through;" class="text-green-500 text-xl font-semibold">₹<%=
+                    product.price %>
+                </p>
+
+                <p class="text-gray-400 text-sm">Inclusive of all Taxes.</p>
+
+              </div>
+              <button class="h-14 px-6 py-2 font-semibold rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white"
+                id="add-to-cart-button" data-product-id=<%=product._id %>>Add To Cart</button>
+            </div>
+            <div class="flex items-center space-x-4 my-4">
+              <div>
+                <p class="mt-1 text-lg font-medium text-white">Slogan: <%= product.slogan %>
+                </p>
+                <p class="mt-1 text-lg font-medium text-white">Website: <%= product.websitelink %>
+                </p>
+                <p class="mt-1 text-lg font-medium text-white">Address: <%= product.address %>
+                </p>
+                <p class="mt-1 text-lg font-medium text-white">Description: <%= product.discription %>
+                </p>
+              </div>
+
+              <div class="flex py-4 space-x-4">
+
+                <script>
+                  document.getElementById('add-to-cart-button').addEventListener('click', function (event) {
+                    const productId = event.target.getAttribute('data-product-id');
+
+                    fetch(`/add-to-cart/${productId}`, {
+                      method: 'POST',
+                      headers: {
+                        'Content-Type': 'application/json'
+                      }
+                    })
+                      .then(response => response.json())
+                      .then(data => {
+                        if (data.message) {
+                          alert(data.message);
+                        }
+                      })
+                      .catch((error) => {
+                        console.error('Error:', error);
+                      });
+                  });
+                </script>
+              </div>
             </div>
           </div>
         </div>
-          </div>
-      </body>
-      </html>
\ No newline at end of file
+      </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file