diff --git a/components/Inventors/viewDetails/Drawer.jsx b/components/Inventors/viewDetails/Drawer.jsx
new file mode 100644
index 0000000..ee74dd6
--- /dev/null
+++ b/components/Inventors/viewDetails/Drawer.jsx
@@ -0,0 +1,246 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Button,
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  TransitionChild,
+} from "@headlessui/react";
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import Image from "next/image";
+import ProfileImage from "../../../public/images/demo-pics.png";
+
+export default function LeadDetailsModal({ open, onClose, lead }) {
+  if (!lead) return null;
+
+  const handleAction = (action) => {
+    console.log(`Lead ${action}:`, lead.name);
+    onClose();
+  };
+
+  const renderTextWithLabel = (label, text, fallback) => (
+    <div className="flex text-md gap-1">
+      <p className="text-[#909090]">{label}:</p>
+      <p className="text-gray-800">{text || fallback}</p>
+    </div>
+  );
+
+  const renderLinkWithLabel = (label, url, fallback) => (
+    <div className="flex text-md gap-1">
+      <p className="text-[#909090]">{label}:</p>
+      <p className="text-gray-800">
+        <a
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-blue-600 hover:underline"
+        >
+          {url || fallback}
+        </a>
+      </p>
+    </div>
+  );
+
+  return (
+    <Dialog open={open} onClose={onClose} className="relative z-10">
+      <DialogBackdrop
+        transition
+        className="fixed inset-0 bg-gray-500 bg-opacity-15 transition-opacity duration-500 ease-in-out data-[closed]:opacity-0"
+      />
+      <div className="fixed inset-0 overflow-hidden">
+        <div className="absolute inset-0 overflow-hidden ">
+          <div className="pointer-events-none fixed inset-y-0 right-0 flex w-[65%] pl-10 ">
+            <DialogPanel
+              transition
+              className="pointer-events-auto relative bg-white p-5 transform transition duration-500 ease-in-out data-[closed]:translate-x-full sm:duration-700 w-full"
+            >
+              <TransitionChild>
+                <div className="absolute right-0 top-0 flex pt-4 duration-500 ease-in-out data-[closed]:opacity-0 ">
+                  <button
+                    type="button"
+                    onClick={onClose}
+                    className="relative text-gray-300 mr-5 border-2 rounded-full border-black w-fit hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
+                    aria-label="Close panel"
+                  >
+                    <span className="absolute -inset-2.5" />
+                    <span className="sr-only">Close panel</span>
+                    <XMarkIcon
+                      aria-hidden="true"
+                      className="h-6 w-6 text-black"
+                    />
+                  </button>
+                </div>
+              </TransitionChild>
+              <div className="bg-[#E7F8F5] mt-10">
+                <div className="flex h-full flex-col overflow-y-scroll w-full py-6">
+                  <div className="px-4 sm:px-6 flex gap-3 justify-end">
+                    <Button
+                      onClick={() => handleAction("declined")}
+                      className="border border-destructive text-destructive flex gap-1 py-3 px-5 rounded-md"
+                    >
+                      Decline
+                    </Button>
+                    <Button
+                      onClick={() => handleAction("approved")}
+                      className="bg-[#00977F] text-white flex gap-1 py-3 px-5 rounded-md"
+                    >
+                      Approve
+                    </Button>
+                  </div>
+
+                  <div className="relative py-5 px-10 flex-1 space-y-5">
+                    <div className="bg-white p-5 w-full flex gap-5 items-center rounded-lg">
+                      <Image
+                        src={lead.profileImage || ProfileImage}
+                        width={230}
+                        height={230}
+                        alt={lead.name}
+                        className="rounded-full"
+                        onError={(e) => {
+                          e.target.src = ProfileImage;
+                        }}
+                      />
+                      <div>
+                        <div className="flex items-center gap-3">
+                          <h2 className="text-2xl font-semibold">
+                            {lead.name}
+                          </h2>
+                          <p className="text-gray-500 flex gap-1">
+                            {lead.position || "No Job Title"}
+                            <span className="text-primary">
+                              @ {lead.company || "No Company"}
+                            </span>
+                          </p>
+                        </div>
+                        <div className="flex italic justify-between">
+                          <div className="space-y-1 mt-2">
+                            {renderTextWithLabel(
+                              "Email",
+                              lead.email,
+                              "No Email"
+                            )}
+                            {renderTextWithLabel(
+                              "Phone number",
+                              lead.phone,
+                              "No Phone Number"
+                            )}
+                            {renderTextWithLabel(
+                              "Location",
+                              lead.location,
+                              "No Location"
+                            )}
+                            <div className="flex text-md gap-1 mt-10">
+                              <p className="text-[#909090]">
+                                Areas of Interest:
+                              </p>
+                              <p className="text-gray-800">
+                                {lead.interests || "No Interests"}
+                              </p>
+                            </div>
+                          </div>
+                          <div className="border h-14 border-y-4"></div>
+                          <div className="space-y-1 mt-2">
+                            {renderTextWithLabel(
+                              "Experience",
+                              lead.experience,
+                              "No Experience"
+                            )}
+                            {renderTextWithLabel(
+                              "Primary skill",
+                              lead.primarySkill,
+                              "No Primary Skill"
+                            )}
+                            {renderTextWithLabel(
+                              "Secondary skill",
+                              lead.secondarySkill,
+                              "No Secondary Skill"
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="w-full h-auto bg-white px-6 py-8 rounded-lg">
+                      <div className="flex items-start gap-2 w-[100%]">
+                        <div className="space-y-5 w-[50%]">
+                          <h2 className="font-semibold uppercase text-xl">
+                            Bio/Short Description
+                          </h2>
+                          <p className="italic text-[#6B6B6B]">
+                            {lead.bio || "No bio available"}
+                          </p>
+                        </div>
+                        <div className="border mx-5 h-24 border-y-4"></div>
+                        <div className="w-[50%] pl-5">
+                          <h2 className="text-xl font-semibold mb-4 ">
+                            TECHNOLOGIES/TOOLS
+                          </h2>
+                          <div className="flex flex-wrap gap-7">
+                            {lead.technologies?.length ? (
+                              lead.technologies.map((tech, index) => (
+                                <span
+                                  key={index}
+                                  className="px-4 py-2 bg-[#E0F7F1] rounded-full text-gray-700"
+                                >
+                                  {tech}
+                                </span>
+                              ))
+                            ) : (
+                              <p className="text-gray-500">
+                                No technologies listed
+                              </p>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="w-full h-auto bg-white px-6 py-8 rounded-lg space-y-5">
+                      <h2 className="font-semibold text-xl uppercase">
+                        Contact Info
+                      </h2>
+                      <div className="flex italic justify-between">
+                        <div className="space-y-1 mt-2">
+                          {renderLinkWithLabel(
+                            "Skill Profile URL",
+                            lead.skillProfileURL,
+                            "No URL"
+                          )}
+                          {renderLinkWithLabel(
+                            "Personal website (Portfolio)",
+                            lead.personalWebsite,
+                            "No URL"
+                          )}
+                          {renderLinkWithLabel(
+                            "X (Twitter)",
+                            lead.twitter,
+                            "No Twitter"
+                          )}
+                        </div>
+                        <div className="border mx-5 h-14 border-y-4"></div>
+                        <div className="space-y-1 mt-2">
+                          {renderLinkWithLabel(
+                            "LinkedIn",
+                            lead.linkedin,
+                            "No LinkedIn"
+                          )}
+                          {renderLinkWithLabel(
+                            "Facebook",
+                            lead.facebook,
+                            "No Facebook"
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </DialogPanel>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index 9c74058..41ea46b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "inventors-admin",
       "version": "0.1.0",
       "dependencies": {
+        "@headlessui/react": "^2.1.10",
+        "@heroicons/react": "^2.1.5",
         "next": "14.2.13",
         "react": "^18",
         "react-dom": "^18"
@@ -88,6 +90,87 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz",
+      "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.25",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.25.tgz",
+      "integrity": "sha512-hZOmgN0NTOzOuZxI1oIrDu3Gcl8WViIkvPMpB4xdd4QD6xAMtwgwr3VPoiyH/bLtRcS1cDnhxLSD1NsMJmwh/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.2",
+        "@floating-ui/utils": "^0.2.8",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
+      "license": "MIT"
+    },
+    "node_modules/@headlessui/react": {
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.1.10.tgz",
+      "integrity": "sha512-6mLa2fjMDAFQi+/R10B+zU3edsUk/MDtENB2zHho0lqKU1uzhAfJLUduWds4nCo8wbl3vULtC5rJfZAQ1yqIng==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.16",
+        "@react-aria/focus": "^3.17.1",
+        "@react-aria/interactions": "^3.21.3",
+        "@tanstack/react-virtual": "^3.8.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^18",
+        "react-dom": "^18"
+      }
+    },
+    "node_modules/@heroicons/react": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.5.tgz",
+      "integrity": "sha512-FuzFN+BsHa+7OxbvAERtgBTNeZpUjgM/MIizfVkSCL2/edriN0Hx/DWRCR//aPYwO5QX/YlgLGXk+E3PcfZwjA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -439,6 +522,89 @@
         "node": ">=14"
       }
     },
+    "node_modules/@react-aria/focus": {
+      "version": "3.18.4",
+      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.18.4.tgz",
+      "integrity": "sha512-91J35077w9UNaMK1cpMUEFRkNNz0uZjnSwiyBCFuRdaVuivO53wNC9XtWSDNDdcO5cGy87vfJRVAiyoCn/mjqA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/interactions": "^3.22.4",
+        "@react-aria/utils": "^3.25.3",
+        "@react-types/shared": "^3.25.0",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/interactions": {
+      "version": "3.22.4",
+      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.22.4.tgz",
+      "integrity": "sha512-E0vsgtpItmknq/MJELqYJwib+YN18Qag8nroqwjk1qOnBa9ROIkUhWJerLi1qs5diXq9LHKehZDXRlwPvdEFww==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.6",
+        "@react-aria/utils": "^3.25.3",
+        "@react-types/shared": "^3.25.0",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.6",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.6.tgz",
+      "integrity": "sha512-iLo82l82ilMiVGy342SELjshuWottlb5+VefO3jOQqQRNYnJBFpUSadswDPbRimSgJUZuFwIEYs6AabkP038fA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/utils": {
+      "version": "3.25.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.25.3.tgz",
+      "integrity": "sha512-PR5H/2vaD8fSq0H/UB9inNbc8KDcVmW6fYAfSWkkn+OAdhTTMVKqXXrZuZBWyFfSD5Ze7VN6acr4hrOQm2bmrA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.6",
+        "@react-stately/utils": "^3.10.4",
+        "@react-types/shared": "^3.25.0",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/utils": {
+      "version": "3.10.4",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.4.tgz",
+      "integrity": "sha512-gBEQEIMRh5f60KCm7QKQ2WfvhB2gLUr9b72sqUdIZ2EG+xuPgaIlCBeSicvjmjBvYZwOjoOEnmIkcx2GHp/HWw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-types/shared": {
+      "version": "3.25.0",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.25.0.tgz",
+      "integrity": "sha512-OZSyhzU6vTdW3eV/mz5i6hQwQUhkRs7xwY2d1aqPvTdMe0+2cY7Fwp45PAiwYLEj73i9ro2FxF9qC4DvHGSCgQ==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -465,6 +631,33 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.10.8",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.10.8.tgz",
+      "integrity": "sha512-VbzbVGSsZlQktyLrP5nxE+vE1ZR+U0NFAWPbJLoG2+DKPwd2D7dVICTVIIaYlJqX1ZCEnYDbaOpmMwbsyhBoIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.10.8"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.10.8",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.10.8.tgz",
+      "integrity": "sha512-PBu00mtt95jbKFi6Llk9aik8bnR3tR/oQP1o3TSi+iG//+Q2RTIzCEgKkHG8BB86kxMNW6O8wku+Lmi+QFR6jA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -1137,6 +1330,15 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -4421,6 +4623,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "license": "MIT"
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.13",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.13.tgz",
diff --git a/package.json b/package.json
index 15905c3..6c18788 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@headlessui/react": "^2.1.10",
+    "@heroicons/react": "^2.1.5",
     "next": "14.2.13",
     "react": "^18",
     "react-dom": "^18"
diff --git a/pages/inventors/index.js b/pages/inventors/index.js
index b90de47..f8549eb 100644
--- a/pages/inventors/index.js
+++ b/pages/inventors/index.js
@@ -1,352 +1,366 @@
-import { useState, useEffect } from 'react';
-import { useRouter } from 'next/router';
-import Layout from '@/layouts/main';
+import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
+import Layout from "@/layouts/main";
 
-import { Icon } from '@iconify/react';
-import Image from 'next/image';
-import Button from '@/components/Button';
+import { Icon } from "@iconify/react";
+import Image from "next/image";
+import Button from "@/components/Button";
 
-import { inventorsLeads } from '@/utils/leads';
-import { shortenEmail, shortenPhone } from '@/utils/helpers';
+import { inventorsLeads } from "@/utils/leads";
+import { shortenEmail, shortenPhone } from "@/utils/helpers";
+import ViewLeadDetails from "@/components/Inventors/viewDetails/Drawer";
 
 const tabs = [
-	{ name: 'All', active: true },
-	{ name: 'Approved', active: false },
-	{ name: 'Unapproved', active: false },
-	{ name: 'Declined', active: false },
-	{ name: 'Deactivated', active: false },
+  { name: "All", active: true },
+  { name: "Approved", active: false },
+  { name: "Unapproved", active: false },
+  { name: "Declined", active: false },
+  { name: "Deactivated", active: false },
 ];
 
 const Inventors = () => {
-	const router = useRouter();
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
-	const [selectedLeads, setSelectedLeads] = useState([]);
-	const [searchText, setSearchText] = useState('');
-	const [allLeads, setAllLeads] = useState(inventorsLeads);
-	const [filteredLeads, setFilteredLeads] = useState([]);
+  const handleCloseModal = () => setIsModalOpen(false);
+  const router = useRouter();
+  const [selectedLead, setSelectedLead] = useState(null);
+  const [selectedLeads, setSelectedLeads] = useState([]);
+  const [searchText, setSearchText] = useState("");
+  const [allLeads, setAllLeads] = useState(inventorsLeads);
+  const [filteredLeads, setFilteredLeads] = useState([]);
 
-	const [currentPage, setCurrentPage] = useState(1);
-	const [leadsPerPage, setLeadsPerPage] = useState(5);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [leadsPerPage, setLeadsPerPage] = useState(5);
 
-	const indexOfLastLead = currentPage * leadsPerPage;
-	const indexOfFirstLead = indexOfLastLead - leadsPerPage;
-	const currentLeads = filteredLeads?.slice(indexOfFirstLead, indexOfLastLead);
+  const indexOfLastLead = currentPage * leadsPerPage;
+  const indexOfFirstLead = indexOfLastLead - leadsPerPage;
+  const currentLeads = filteredLeads?.slice(indexOfFirstLead, indexOfLastLead);
+  const handleOpenModal = (id) => {
+    const lead = allLeads.find((lead) => lead.id === id); // Find lead by id
+    setSelectedLead(lead); // Set the lead being viewed
+    setIsModalOpen(true);
+  };
+  const nextPage = () => {
+    if (currentPage < Math.ceil(filteredLeads?.length / leadsPerPage)) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
 
-	const nextPage = () => {
-		if (currentPage < Math.ceil(filteredLeads?.length / leadsPerPage)) {
-			setCurrentPage(currentPage + 1);
-		}
-	};
+  const prevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
 
-	const prevPage = () => {
-		if (currentPage > 1) {
-			setCurrentPage(currentPage - 1);
-		}
-	};
+  useEffect(() => {
+    setFilteredLeads(allLeads);
+  }, [allLeads]);
 
-	useEffect(() => {
-		setFilteredLeads(allLeads);
-	}, [allLeads]);
+  useEffect(() => {
+    if (tabs.some((tab) => tab.active) && searchText === "") {
+      setSelectedLeads([]);
+      const tab = tabs.find((tab) => tab.active);
+      if (tab.name === "All") {
+        setFilteredLeads(allLeads);
+      } else {
+        setFilteredLeads(allLeads.filter((lead) => lead.status === tab.name));
+      }
+    } else if (tabs.some((tab) => tab.active) && searchText !== "") {
+      const tab = tabs.find((tab) => tab.active);
+      if (tab.name === "All") {
+        const filteredLeads = allLeads.filter((lead) =>
+          lead.name.toLowerCase().includes(searchText.toLowerCase())
+        );
+        setFilteredLeads(filteredLeads);
+      } else {
+        const filteredLeads = allLeads.filter(
+          (lead) =>
+            lead.status === tab.name &&
+            lead.name.toLowerCase().includes(searchText.toLowerCase())
+        );
+        setFilteredLeads(filteredLeads);
+      }
+    } else {
+      setFilteredLeads(allLeads);
+    }
+  }, [searchText, allLeads]);
 
-	useEffect(() => {
-		if (tabs.some((tab) => tab.active) && searchText === '') {
-			setSelectedLeads([]);
-			const tab = tabs.find((tab) => tab.active);
-			if (tab.name === 'All') {
-				setFilteredLeads(allLeads);
-			} else {
-				setFilteredLeads(allLeads.filter((lead) => lead.status === tab.name));
-			}
-		} else if (tabs.some((tab) => tab.active) && searchText !== '') {
-			const tab = tabs.find((tab) => tab.active);
-			if (tab.name === 'All') {
-				const filteredLeads = allLeads.filter((lead) =>
-					lead.name.toLowerCase().includes(searchText.toLowerCase())
-				);
-				setFilteredLeads(filteredLeads);
-			} else {
-				const filteredLeads = allLeads.filter(
-					(lead) =>
-						lead.status === tab.name &&
-						lead.name.toLowerCase().includes(searchText.toLowerCase())
-				);
-				setFilteredLeads(filteredLeads);
-			}
-		} else {
-			setFilteredLeads(allLeads);
-		}
-	}, [searchText, allLeads]);
+  const tableHeaders = [
+    {
+      key: "select",
+      content: (
+        <input
+          type="checkbox"
+          className="accent-primaryGreen"
+          checked={
+            filteredLeads?.length > 0 &&
+            selectedLeads.length === filteredLeads?.length
+          }
+          onChange={(e) => {
+            if (e.target.checked) {
+              // Select all leads
+              setSelectedLeads(filteredLeads);
+            } else {
+              // Unselect all leads
+              setSelectedLeads([]);
+            }
+          }}
+        />
+      ),
+    },
+    { key: "name", content: "Name" },
+    { key: "school", content: "School (Alumni)" },
+    { key: "email", content: "Email" },
+    { key: "phone", content: "Phone", className: "hidden lg:block" },
+    { key: "status", content: "Status" },
+    { key: "action", content: "Action" },
+  ];
 
-	const tableHeaders = [
-		{
-			key: 'select',
-			content: (
-				<input
-					type="checkbox"
-					className="accent-primaryGreen"
-					checked={
-						filteredLeads?.length > 0 &&
-						selectedLeads.length === filteredLeads?.length
-					}
-					onChange={(e) => {
-						if (e.target.checked) {
-							// Select all leads
-							setSelectedLeads(filteredLeads);
-						} else {
-							// Unselect all leads
-							setSelectedLeads([]);
-						}
-					}}
-				/>
-			),
-		},
-		{ key: 'name', content: 'Name' },
-		{ key: 'school', content: 'School (Alumni)' },
-		{ key: 'email', content: 'Email' },
-		{ key: 'phone', content: 'Phone', className: 'hidden lg:block' },
-		{ key: 'status', content: 'Status' },
-		{ key: 'action', content: 'Action' },
-	];
+  return (
+    <>
+      {/* Search */}
+      <div className="bg-white rounded-xl p-6 flex items-center justify-between w-full">
+        <input
+          type="search"
+          placeholder="Search lead"
+          value={searchText}
+          onChange={(e) => setSearchText(e.target.value)}
+          className="border-[2px] border-[#E0E6EB] p-3 rounded-lg w-1/4 outline-none text-[#98A4AE]"
+        />
+        <div className="flex gap-4 items-center">
+          <Button
+            mintGreenBtn
+            buttonProps={{
+              onClick: () => setSelectedLeads(filteredLeads),
+              disabled: filteredLeads?.length === selectedLeads.length,
+            }}
+            className="disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {selectedLeads.length > 0
+              ? `Selected (${selectedLeads.length})`
+              : "Select all"}
+          </Button>
+          {selectedLeads.length > 0 ? (
+            <Button dangerButton className={`flex items-center gap-3`}>
+              <Icon icon="bi:trash" className="text-lg" />
+              Deactivate ({selectedLeads.length})
+            </Button>
+          ) : (
+            <Button
+              primaryButton
+              className={`flex items-center gap-3`}
+              buttonProps={{
+                onClick: () => router.push("/inventors/add-new"),
+              }}
+            >
+              <Icon icon="tabler:users" className="text-lg" />
+              Add new
+              <Icon
+                icon="solar:alt-arrow-down-line-duotone"
+                className="text-lg"
+              />
+            </Button>
+          )}
+        </div>
+      </div>
 
-	return (
-		<>
-			{/* Search */}
-			<div className="bg-white rounded-xl p-6 flex items-center justify-between w-full">
-				<input
-					type="search"
-					placeholder="Search lead"
-					value={searchText}
-					onChange={(e) => setSearchText(e.target.value)}
-					className="border-[2px] border-[#E0E6EB] p-3 rounded-lg w-1/4 outline-none text-[#98A4AE]"
-				/>
-				<div className="flex gap-4 items-center">
-					<Button
-						mintGreenBtn
-						buttonProps={{
-							onClick: () => setSelectedLeads(filteredLeads),
-							disabled: filteredLeads?.length === selectedLeads.length,
-						}}
-						className="disabled:opacity-50 disabled:cursor-not-allowed"
-					>
-						{selectedLeads.length > 0
-							? `Selected (${selectedLeads.length})`
-							: 'Select all'}
-					</Button>
-					{selectedLeads.length > 0 ? (
-						<Button dangerButton className={`flex items-center gap-3`}>
-							<Icon icon="bi:trash" className="text-lg" />
-							Deactivate ({selectedLeads.length})
-						</Button>
-					) : (
-						<Button
-							primaryButton
-							className={`flex items-center gap-3`}
-							buttonProps={{
-								onClick: () => router.push('/inventors/add-new'),
-							}}
-						>
-							<Icon icon="tabler:users" className="text-lg" />
-							Add new
-							<Icon
-								icon="solar:alt-arrow-down-line-duotone"
-								className="text-lg"
-							/>
-						</Button>
-					)}
-				</div>
-			</div>
+      {/* Tabs */}
+      <div className="bg-white rounded-tr-xl rounded-tl-xl w-full mt-5">
+        <ul className="flex items-center justify-between">
+          {tabs.map((tab, index) => (
+            <li
+              key={index}
+              className={`${
+                tab.active ? "border-primaryGreen border-b-[3px]" : ""
+              } w-full flex items-center justify-center p-4  cursor-pointer text-[#464646]`}
+              onClick={() => {
+                // Filter leads based on tab
+                if (tab.name === "All") {
+                  setFilteredLeads(allLeads);
+                  tabs.forEach((tab) => (tab.active = false));
+                  tab["active"] = true;
+                  setSelectedLeads([]);
+                  setSearchText("");
+                } else {
+                  setFilteredLeads(
+                    allLeads?.filter((lead) => lead.status === tab.name)
+                  );
+                  tabs.forEach((tab) => (tab.active = false));
+                  tab["active"] = true;
+                  setSelectedLeads([]);
+                  setSearchText("");
+                }
+              }}
+            >
+              {tab.name}
+            </li>
+          ))}
+        </ul>
+      </div>
 
-			{/* Tabs */}
-			<div className="bg-white rounded-tr-xl rounded-tl-xl w-full mt-5">
-				<ul className="flex items-center justify-between">
-					{tabs.map((tab, index) => (
-						<li
-							key={index}
-							className={`${
-								tab.active ? 'border-primaryGreen border-b-[3px]' : ''
-							} w-full flex items-center justify-center p-4  cursor-pointer text-[#464646]`}
-							onClick={() => {
-								// Filter leads based on tab
-								if (tab.name === 'All') {
-									setFilteredLeads(allLeads);
-									tabs.forEach((tab) => (tab.active = false));
-									tab['active'] = true;
-									setSelectedLeads([]);
-									setSearchText('');
-								} else {
-									setFilteredLeads(
-										allLeads?.filter((lead) => lead.status === tab.name)
-									);
-									tabs.forEach((tab) => (tab.active = false));
-									tab['active'] = true;
-									setSelectedLeads([]);
-									setSearchText('');
-								}
-							}}
-						>
-							{tab.name}
-						</li>
-					))}
-				</ul>
-			</div>
+      {currentLeads?.length === 0 && (
+        <div className="h-[600px] w-full flex justify-center items-center">
+          <div className="bg-white rounded-xl p-7 space-y-4 flex justify-center flex-col items-center">
+            <Image
+              src="/images/figma-icon.png"
+              alt="Figma Icon"
+              width={50}
+              height={50}
+              className="mb-3"
+            />
+            <div className="text-center space-y-2">
+              <h3 className="font-semibold text-[#29343D] text-lg">
+                Oops, Nothing to see here, right?
+              </h3>
+              <p className="text-[#98A4AE]">Let’s get your profile set up.</p>
+              <Button primaryButton>Go to profile</Button>
+            </div>
+          </div>
+        </div>
+      )}
 
-			{currentLeads?.length === 0 && (
-				<div className="h-[600px] w-full flex justify-center items-center">
-					<div className="bg-white rounded-xl p-7 space-y-4 flex justify-center flex-col items-center">
-						<Image
-							src="/images/figma-icon.png"
-							alt="Figma Icon"
-							width={50}
-							height={50}
-							className="mb-3"
-						/>
-						<div className="text-center space-y-2">
-							<h3 className="font-semibold text-[#29343D] text-lg">
-								Oops, Nothing to see here, right?
-							</h3>
-							<p className="text-[#98A4AE]">Let’s get your profile set up.</p>
-							<Button primaryButton>Go to profile</Button>
-						</div>
-					</div>
-				</div>
-			)}
+      {currentLeads?.length > 0 && (
+        <>
+          <div className="bg-white rounded-xl p-6 mt-5">
+            <table className="min-w-full">
+              <thead className="text-left text-[#464646] font-normal">
+                <tr className="border-b-[2px] border-[#EFF2F7]">
+                  {tableHeaders.map((header) => (
+                    <th
+                      key={header.key}
+                      className={`py-4 px-5 ${header.className}`}
+                    >
+                      {header.content}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody className="">
+                {currentLeads?.map((lead, index) => (
+                  <tr
+                    key={index}
+                    className={`border-b-[2px]  ${
+                      selectedLeads.some(
+                        (selectedLead) => selectedLead.id === lead.id
+                      )
+                        ? "bg-mintGreen border-white"
+                        : "border-[#EFF2F7]"
+                    }`}
+                  >
+                    <td className="py-4 px-5">
+                      <input
+                        type="checkbox"
+                        className="accent-primaryGreen"
+                        checked={selectedLeads.some(
+                          (selectedLead) => selectedLead.id === lead.id
+                        )}
+                        onChange={(e) => {
+                          if (e.target.checked) {
+                            setSelectedLeads([...selectedLeads, lead]);
+                          } else {
+                            setSelectedLeads(
+                              selectedLeads.filter(
+                                (selectedLead) => selectedLead.id !== lead.id
+                              )
+                            );
+                          }
+                        }}
+                      />
+                    </td>
+                    <td className="py-4 px-5">
+                      <div className="flex items-center gap-3">
+                        <Image
+                          src="/images/profile-icon.png" // Replace with actual image path or dynamic URL if available
+                          alt="Profile Icon"
+                          width={40}
+                          height={40}
+                          className="rounded-full"
+                        />
+                        <div className="">
+                          <p className="font-semibold text-[#464646]">
+                            {lead.name}
+                          </p>
+                          <span className="text-[#B5B5B5] text-sm">
+                            {lead.position}
+                          </span>
+                        </div>
+                      </div>
+                    </td>
+                    <td className="py-4 px-5 text-[#B5B5B5]">
+                      {lead.school + (lead.alumni ? " (Alumni)" : "")}
+                    </td>
+                    <td className="py-4 px-5 text-[#B5B5B5]">
+                      {shortenEmail(lead.email)}
+                    </td>
+                    <td className="py-4 px-5 text-[#B5B5B5] hidden lg:block">
+                      {shortenPhone(lead.phone)}
+                    </td>
+                    <td className="py-4 px-5">
+                      <span
+                        className={`${
+                          lead.status === "Approved"
+                            ? "text-primaryGreen bg-mintGreen"
+                            : lead.status === "Declined"
+                            ? "text-red-500 bg-red-100"
+                            : lead.status === "Deactivated"
+                            ? "text-gray-500 bg-gray-200"
+                            : "text-yellow-500 bg-yellow-100"
+                        } px-4 py-2 rounded-full text-sm`}
+                      >
+                        {lead.status}
+                      </span>
+                    </td>
+                    <td className="py-4 px-5 text-[#B5B5B5]">
+                      <ViewLeadDetails
+                        open={isModalOpen}
+                        onClose={handleCloseModal}
+                        lead={selectedLead}
+                      />
+                      <Icon
+                        onClick={() => handleOpenModal(lead.id)}
+                        icon="ph:eye"
+                        className="text-[#909090] text-lg cursor-pointer"
+                      />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
 
-			{currentLeads?.length > 0 && (
-				<>
-					<div className="bg-white rounded-xl p-6 mt-5">
-						<table className="min-w-full">
-							<thead className="text-left text-[#464646] font-normal">
-								<tr className="border-b-[2px] border-[#EFF2F7]">
-									{tableHeaders.map((header) => (
-										<th
-											key={header.key}
-											className={`py-4 px-5 ${header.className}`}
-										>
-											{header.content}
-										</th>
-									))}
-								</tr>
-							</thead>
-							<tbody className="">
-								{currentLeads?.map((lead, index) => (
-									<tr
-										key={index}
-										className={`border-b-[2px]  ${
-											selectedLeads.some(
-												(selectedLead) => selectedLead.id === lead.id
-											)
-												? 'bg-mintGreen border-white'
-												: 'border-[#EFF2F7]'
-										}`}
-									>
-										<td className="py-4 px-5">
-											<input
-												type="checkbox"
-												className="accent-primaryGreen"
-												checked={selectedLeads.some(
-													(selectedLead) => selectedLead.id === lead.id
-												)}
-												onChange={(e) => {
-													if (e.target.checked) {
-														setSelectedLeads([...selectedLeads, lead]);
-													} else {
-														setSelectedLeads(
-															selectedLeads.filter(
-																(selectedLead) => selectedLead.id !== lead.id
-															)
-														);
-													}
-												}}
-											/>
-										</td>
-										<td className="py-4 px-5">
-											<div className="flex items-center gap-3">
-												<Image
-													src="/images/profile-icon.png" // Replace with actual image path or dynamic URL if available
-													alt="Profile Icon"
-													width={40}
-													height={40}
-													className="rounded-full"
-												/>
-												<div className="">
-													<p className="font-semibold text-[#464646]">
-														{lead.name}
-													</p>
-													<span className="text-[#B5B5B5] text-sm">
-														{lead.position}
-													</span>
-												</div>
-											</div>
-										</td>
-										<td className="py-4 px-5 text-[#B5B5B5]">
-											{lead.school + (lead.alumni ? ' (Alumni)' : '')}
-										</td>
-										<td className="py-4 px-5 text-[#B5B5B5]">
-											{shortenEmail(lead.email)}
-										</td>
-										<td className="py-4 px-5 text-[#B5B5B5] hidden lg:block">
-											{shortenPhone(lead.phone)}
-										</td>
-										<td className="py-4 px-5">
-											<span
-												className={`${
-													lead.status === 'Approved'
-														? 'text-primaryGreen bg-mintGreen'
-														: lead.status === 'Declined'
-														? 'text-red-500 bg-red-100'
-														: lead.status === 'Deactivated'
-														? 'text-gray-500 bg-gray-200'
-														: 'text-yellow-500 bg-yellow-100'
-												} px-4 py-2 rounded-full text-sm`}
-											>
-												{lead.status}
-											</span>
-										</td>
-										<td className="py-4 px-5 text-[#B5B5B5]">
-											<Icon
-												icon="ph:eye"
-												className="text-[#909090] text-lg cursor-pointer"
-											/>
-										</td>
-									</tr>
-								))}
-							</tbody>
-						</table>
-					</div>
-
-					<div className="flex items-center justify-between w-full pt-5 px-5 font-semibold">
-						<p className="text-[#070707]">
-							Page {currentPage} of{' '}
-							{Math.ceil(filteredLeads?.length / leadsPerPage)}
-						</p>
-						<div className="flex gap-4 items-center">
-							<Button
-								className={`disabled:opacity-50 disabled:cursor-not-allowed`}
-								buttonProps={{
-									onClick: prevPage,
-									disabled: currentPage === 1,
-								}}
-							>
-								Prev
-							</Button>
-							<Button
-								className={`disabled:opacity-50 disabled:cursor-not-allowed`}
-								buttonProps={{
-									onClick: nextPage,
-									disabled:
-										currentPage ===
-										Math.ceil(filteredLeads?.length / leadsPerPage),
-								}}
-							>
-								Next
-							</Button>
-						</div>
-					</div>
-				</>
-			)}
+          <div className="flex items-center justify-between w-full pt-5 px-5 font-semibold">
+            <p className="text-[#070707]">
+              Page {currentPage} of{" "}
+              {Math.ceil(filteredLeads?.length / leadsPerPage)}
+            </p>
+            <div className="flex gap-4 items-center">
+              <Button
+                className={`disabled:opacity-50 disabled:cursor-not-allowed`}
+                buttonProps={{
+                  onClick: prevPage,
+                  disabled: currentPage === 1,
+                }}
+              >
+                Prev
+              </Button>
+              <Button
+                className={`disabled:opacity-50 disabled:cursor-not-allowed`}
+                buttonProps={{
+                  onClick: nextPage,
+                  disabled:
+                    currentPage ===
+                    Math.ceil(filteredLeads?.length / leadsPerPage),
+                }}
+              >
+                Next
+              </Button>
+            </div>
+          </div>
+        </>
+      )}
 
-			{/* deactivate leads dialog box */}
-			{/* <div className="absolute top-0 left-0 w-full h-full backdrop-blur-md flex justify-center items-center drop-shadow-xl">
+      {/* deactivate leads dialog box */}
+      {/* <div className="absolute top-0 left-0 w-full h-full backdrop-blur-md flex justify-center items-center drop-shadow-xl">
 				<div className="bg-white rounded-xl p-7 space-y-4 flex justify-center flex-col items-center">
 					<Image
 						src="/images/profile-icon.png"
@@ -377,12 +391,12 @@ const Inventors = () => {
 					</div>
 				</div>
 			</div> */}
-		</>
-	);
+    </>
+  );
 };
 
 export default Inventors;
 
 Inventors.getLayout = function getLayout(page) {
-	return <Layout>{page}</Layout>;
+  return <Layout>{page}</Layout>;
 };
diff --git a/public/images/demo-pics.png b/public/images/demo-pics.png
new file mode 100644
index 0000000..5e353e6
Binary files /dev/null and b/public/images/demo-pics.png differ
diff --git a/tailwind.config.js b/tailwind.config.js
index 46d2ed1..0d0235a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,6 +14,8 @@ module.exports = {
         mintGreen: "var(--mint-green)",
         darkGray: "var(--dark-gray)",
         lightGray: "var(--light-gray)",
+        primary: "#00977F",
+        destructive: "#B42318",
       },
     },
   },
diff --git a/utils/leads.js b/utils/leads.js
index 216ee58..1801244 100644
--- a/utils/leads.js
+++ b/utils/leads.js
@@ -1,68 +1,187 @@
 export const inventorsLeads = [
-	{
-		id: 1,
-		name: 'Happiness Omale',
-		position: 'Social Media Manager',
-		school: 'OAUSTECH',
-		email: 'omalehappiness@gmail.com',
-		phone: '+234 706 765 2134',
-		status: 'Approved',
-		alumni: true,
-	},
-	{
-		id: 2,
-		name: 'Owosupi Kehinde',
-		position: 'Software Engineer',
-		school: 'OAUSTECH',
-		email: 'owosupikehinde@gmail.com',
-		phone: '+234 706 765 2134',
-		status: 'Approved',
-		alumni: true,
-	},
-	{
-		id: 3,
-		name: 'Adesokan Oluwajuwon',
-		position: 'Co-Founder',
-		school: 'OAUSTECH',
-		email: 'adesokanoluwa@gmail.com',
-		phone: '+234 706 765 2134',
-		status: 'Declined',
-		alumni: true,
-	},
-	{
-		id: 4,
-		name: 'Kelvin Doe',
-		school: 'Bells University',
-		email: 'kelvin@gmail.com',
-		phone: '+234 706 765 2134',
-		status: 'Deactivated',
-		alumni: false,
-	},
-	{
-		id: 5,
-		name: 'Owosupi Kehinde',
-		school: 'OAUSTECH',
-		email: 'owosupikehinde@gmail.com',
-		phone: '+234 706 765 2134',
-		status: 'Approved',
-		alumni: true,
-	},
-	{
-		id: 6,
-		name: 'Kelvin Doe',
-		school: 'Bells University',
-		email: 'kelvin@gmail.com',
-		phone: '+234 706 765 2134',
-		status: 'Unapproved',
-		alumni: false,
-	},
-	{
-		id: 7,
-		name: 'Kelvin Doe',
-		school: 'Bells University',
-		email: 'kelvin@gmail.com',
-		phone: '+234 706 765 2134',
-		status: 'Approved',
-		alumni: false,
-	},
+  {
+    id: 1,
+    name: "Happiness Omale",
+    position: "Social Media Manager",
+    school: "OAUSTECH",
+    email: "omalehappiness@gmail.com",
+    phone: "+234 706 765 2134",
+    status: "Approved",
+    alumni: true,
+    location: "Lagos, Nigeria",
+    interests: "Digital Marketing, Content Creation",
+    experience: "5 years in social media management",
+    primarySkill: "Social Media Strategy",
+    secondarySkill: "Content Marketing",
+    bio: "A passionate social media manager with a knack for creating engaging content.",
+    technologies: ["Hootsuite", "Canva", "Google Analytics"],
+    skillProfileURL: "https://www.linkedin.com/in/happiness-omale",
+    personalWebsite: "http://happinessomale.com",
+    twitter: "https://twitter.com/happinessomale",
+    linkedin: "https://www.linkedin.com/in/happinessomale",
+    facebook: "https://www.facebook.com/happinessomale",
+  },
+  {
+    id: 2,
+    name: "Owosupi Kehinde",
+    position: "Software Engineer",
+    school: "OAUSTECH",
+    email: "owosupikehinde@gmail.com",
+    phone: "+234 706 765 2134",
+    status: "Approved",
+    alumni: true,
+    location: "Ibadan, Nigeria",
+    interests: "Web Development, AI",
+    experience: "3 years in software development",
+    primarySkill: "JavaScript",
+    secondarySkill: "React",
+    bio: "A dedicated software engineer with a focus on building scalable web applications.",
+    technologies: ["JavaScript", "React", "Node.js"],
+    skillProfileURL: "https://www.linkedin.com/in/owosupikehinde",
+    personalWebsite: "http://owosupikehinde.com",
+    twitter: "https://twitter.com/owosupikehinde",
+    linkedin: "https://www.linkedin.com/in/owosupikehinde",
+    facebook: "https://www.facebook.com/owosupikehinde",
+  },
+  {
+    id: 3,
+    name: "Adesokan Oluwajuwon",
+    position: "Co-Founder",
+    school: "OAUSTECH",
+    email: "adesokanoluwa@gmail.com",
+    phone: "+234 706 765 2134",
+    status: "Declined",
+    alumni: true,
+    location: "Abuja, Nigeria",
+    interests: "Entrepreneurship, Technology",
+    experience: "2 years as a startup co-founder",
+    primarySkill: "Business Development",
+    secondarySkill: "Strategic Planning",
+    bio: "An aspiring entrepreneur with a passion for technology and innovation.",
+    technologies: ["Startup Methodologies", "Agile", "Market Research"],
+    skillProfileURL: "https://www.linkedin.com/in/adesokanoluwa",
+    personalWebsite: "http://adesokanoluwa.com",
+    twitter: "https://twitter.com/adesokanoluwa",
+    linkedin: "https://www.linkedin.com/in/adesokanoluwa",
+    facebook: "https://www.facebook.com/adesokanoluwa",
+  },
+  {
+    id: 4,
+    name: "Kelvin Doe",
+    position: "Project Manager",
+    school: "Bells University",
+    email: "kelvin@gmail.com",
+    phone: "+234 706 765 2134",
+    status: "Deactivated",
+    alumni: false,
+    location: "Port Harcourt, Nigeria",
+    interests: "Project Management, Leadership",
+    experience: "4 years in project management",
+    primarySkill: "Agile Methodologies",
+    secondarySkill: "Team Leadership",
+    bio: "An experienced project manager skilled in leading teams and delivering projects on time.",
+    technologies: ["Trello", "JIRA", "Microsoft Project"],
+    skillProfileURL: "https://www.linkedin.com/in/kelvindoe",
+    personalWebsite: "http://kelvindoe.com",
+    twitter: "https://twitter.com/kelvindoe",
+    linkedin: "https://www.linkedin.com/in/kelvindoe",
+    facebook: "https://www.facebook.com/kelvindoe",
+  },
+  {
+    id: 5,
+    name: "Owosupi Kehinde",
+    position: "Software Engineer",
+    school: "OAUSTECH",
+    email: "owosupikehinde@gmail.com",
+    phone: "+234 706 765 2134",
+    status: "Approved",
+    alumni: true,
+    location: "Ibadan, Nigeria",
+    interests: "Web Development, AI",
+    experience: "3 years in software development",
+    primarySkill: "JavaScript",
+    secondarySkill: "React",
+    bio: "A dedicated software engineer with a focus on building scalable web applications.",
+    technologies: ["JavaScript", "React", "Node.js"],
+    skillProfileURL: "https://www.linkedin.com/in/owosupikehinde",
+    personalWebsite: "http://owosupikehinde.com",
+    twitter: "https://twitter.com/owosupikehinde",
+    linkedin: "https://www.linkedin.com/in/owosupikehinde",
+    facebook: "https://www.facebook.com/owosupikehinde",
+  },
+  {
+    id: 6,
+    name: "Kelvin Doe",
+    position: "Quality Assurance Engineer",
+    school: "Bells University",
+    email: "kelvin@gmail.com",
+    phone: "+234 706 765 2134",
+    status: "Unapproved",
+    alumni: false,
+    location: "Enugu, Nigeria",
+    interests: "Software Testing, Automation",
+    experience: "2 years in QA",
+    primarySkill: "Automated Testing",
+    secondarySkill: "Performance Testing",
+    bio: "A detail-oriented QA engineer with a passion for ensuring software quality.",
+    technologies: ["Selenium", "JMeter", "Postman"],
+    skillProfileURL: "https://www.linkedin.com/in/kelvindoe",
+    personalWebsite: "http://kelvindoe.com",
+    twitter: "https://twitter.com/kelvindoe",
+    linkedin: "https://www.linkedin.com/in/kelvindoe",
+    facebook: "https://www.facebook.com/kelvindoe",
+  },
+  {
+    id: 7,
+    name: "Kelvin Doe",
+    position: "Systems Analyst",
+    school: "Bells University",
+    email: "kelvin@gmail.com",
+    phone: "+234 706 765 2134",
+    status: "Approved",
+    alumni: false,
+    location: "Owerri, Nigeria",
+    interests: "Systems Design, Data Analysis",
+    experience: "3 years as a systems analyst",
+    primarySkill: "Data Analysis",
+    secondarySkill: "Systems Integration",
+    bio: "A systems analyst with expertise in analyzing and improving IT systems.",
+    technologies: ["SQL", "Python", "Tableau"],
+    skillProfileURL: "https://www.linkedin.com/in/kelvindoe",
+    personalWebsite: "http://kelvindoe.com",
+    twitter: "https://twitter.com/kelvindoe",
+    linkedin: "https://www.linkedin.com/in/kelvindoe",
+    facebook: "https://www.facebook.com/kelvindoe",
+  },
+  // New entry for Temoye Dennis
+  {
+    id: 8,
+    name: "Temoye Dennis",
+    position: "Frontend Developer",
+    school: "OAUSTECH",
+    email: "temoyedennis@gmail.com",
+    phone: "+234 706 765 2134",
+    status: "Approved",
+    alumni: true,
+    location: "Lagos, Nigeria",
+    interests: "Frontend Development, User Experience",
+    experience: "5 years in frontend development",
+    primarySkill: "React",
+    secondarySkill: "Next.js",
+    bio: "A frontend developer and computer engineer with a passion for creating responsive and user-friendly web applications.",
+    technologies: [
+      "React",
+      "Next.js",
+      "Chakra UI",
+      "Tailwind CSS",
+      "Redux",
+      "React Native",
+      "PHP",
+    ],
+    skillProfileURL: "https://www.linkedin.com/in/temoyedennis",
+    personalWebsite: "http://temoyedennis.com",
+    twitter: "https://twitter.com/temoyedennis",
+    linkedin: "https://www.linkedin.com/in/temoyedennis",
+    facebook: "https://www.facebook.com/temoyedennis",
+  },
 ];