diff --git a/app/App.tsx b/app/App.tsx
index 0a7d542..1f76cfc 100644
--- a/app/App.tsx
+++ b/app/App.tsx
@@ -1,9 +1,9 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import {Navbar, NavbarBrand, NavbarMenuToggle, NavbarMenuItem, NavbarMenu, NavbarContent, NavbarItem, Link, Button, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, slider} from "@nextui-org/react";
+import {Navbar, NavbarBrand, NavbarMenuToggle, NavbarMenuItem, NavbarMenu, NavbarContent, NavbarItem, Link, Button, Dropdown,Image, DropdownTrigger, DropdownMenu, DropdownItem, slider, Card, CardFooter} from "@nextui-org/react";
 import { ChevronDown } from "@/public/assets/ChevronDown";
 import { ImDeviantart, ImDownload, ImHammer, ImNewspaper } from "react-icons/im";
-import Image from "next/image";
+// import Image from "next/image";
 import Footer from "@/components/ui/footer";
 import { useTheme } from "next-themes";
 import ThemeSwitcher from "@/components/ui/ThemeSwitcher";
@@ -17,7 +17,6 @@ export default function App() {
     dev: <ImDeviantart />,
     slide: <ImNewspaper />,
     download: <ImDownload />
-
   }
 
   const menuItems = [
@@ -46,7 +45,7 @@ export default function App() {
 
   return (
     <><div>
-      <div className="fixed top-0 left-0 right-0 z-50 bg-background/70 backdrop-blur-lg">
+      <div className="fixed top-0 left-0 right-0 z-50 bg-background/70 backdrop-blur-lg scroll-smooth scrollbar-hide">
       <Navbar
         isBordered
         isMenuOpen={isMenuOpen}
@@ -108,8 +107,6 @@ export default function App() {
           </NavbarItem>
         </NavbarContent>
 
-        
-
         <NavbarContent justify="end">
           <NavbarItem className="hidden lg:flex">
             <Link href="#">Login</Link>
@@ -142,7 +139,7 @@ export default function App() {
       </div>
       
     </div>
-    <div className={`min-h-screen ${darkMode ? "bg-black text-white " : "bg-white text-black"} `}  >
+    <div className={`min-h-screen ${darkMode ? "bg-black text-white " : "bg-white text-black"}  font-sans`}  >
       <div className="flex flex-col lg:flex-row items-center justify-between px-20 py-20 my-40  ">
         <div className="max-w-xl mb-10 lg:mb-0">
           <h1 className="text-7xl font-medium leading-tight mb-6">
@@ -166,62 +163,95 @@ export default function App() {
         </div>
       </div>
 
-      <div className={` ${darkMode ? "bg-black text-white " : "bg-white text-black"} py-20  `}>
+      <div className={` ${darkMode ? " text-white " : " text-black"} py-20 mx-10 `}>
       <div className="flex justify-center text-2xl m-4 pb-14">
-            Contributions
+            Features
           </div>
-        <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
-          
-          <div className={` ${darkMode ? "bg-neutral-900 text-white " : "bg-white text-neutral-900"} shadow-2xl rounded-lg p-6 text-center `}>
-            <h3 className="text-xl font-semibold mb-4">Hi Chef</h3>
-            <div className="flex justify-center">
-            {/* <div className=" h-6 w-6 rounded-full bg-gradient-to-r from-green-400 to-yellow-400 p-8 my-6">
-            </div> */}
-            <Image
-              src="/profile-1.webp"
-              alt="Prototype 1"
-              width={300}
-              height={300}
-              className="mx-auto mb-4 w-24 h-24 object-cover rounded-full"
-            />
-            </div>
+        <div className="max-w-8xl max-h-full mx-auto grid grid-cols-1 md:grid-cols-3 gap-10 ">
+        <div className={` ${darkMode ? " text-white " : " text-neutral-900"} bg-none  shadow-2xl rounded-lg  text-center`}>
             
-            <div>Your friends are cooking</div>
+            <Card
+              isFooterBlurred
+              radius="lg"
+              className="border-none"
+            >
+              <Image
+                alt="Woman listing to music"
+                className=" object-fill w-full h-full"
+                height={370}
+                src="five.webp"
+                width={500}
+              />
+              <CardFooter className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10 transition-all duration-300 ease-in-out hover:bg-black/50 hover:scale-105 ">
+
+              <p className="font-medium text-justify text-black " >Live Collaboration</p>
+                <Button className="text-tiny text-white bg-black/60" variant="flat" color="default" radius="lg" size="sm">
+                  Notify me
+                </Button>
+              </CardFooter>
+            </Card>
           </div>
-          <div className={` ${darkMode ? "bg-neutral-900 text-white " : "bg-white text-neutral-900"}   shadow-2xl rounded-lg p-6 text-center`}>
-            <h3 className="text-xl font-semibold mb-4">Yasmin</h3>
-            {/* <div className="h-6 w-6 rounded-full bg-gradient-to-r from-green-400 to-yellow-400 p-8 m-3">
-            </div> */}
-            <div className="flex justify-center">
-            {/* <div className=" h-6 w-6 rounded-full bg-gradient-to-r from-green-400 to-yellow-400 p-8 my-6">
-            </div> */}
-            <Image
-              src="/profile-2.webp"
-              alt="Prototype 1"
-              width={300}
-              height={300}
-              className="mx-auto mb-4 w-24 h-24 object-cover rounded-full"
-            />
-            </div>
-            <div>Tomato Habanero Salsa</div>
+          <div className={`  bg-none shadow-2xl rounded-lg  text-center`}>
+            
+            <Card
+              isFooterBlurred
+              radius="lg"
+              className="border-none"
+            >
+              <Image
+                alt="Woman listing to music"
+                className="object-cover w-full h-full"
+                height={370}
+                src="four.webp"
+                width={500}
+              />
+              <CardFooter className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10 transition-all duration-300 ease-in-out hover:bg-black/50 hover:scale-105">
+              
+                <p className=" font-light text-white text-justify">Real-Time Updates</p>
+                <Button className="text-tiny text-white bg-black/20" variant="flat" color="default" radius="lg" size="sm">
+                  <a href="/workspace">
+                  Notify me
+                  </a>
+                </Button>
+              </CardFooter>
+            </Card>
           </div>
-          <div className={` ${darkMode ? "bg-neutral-900 text-white " : "bg-white text-neutral-900"}  shadow-2xl rounded-lg p-6 text-center`}>
-            <h3 className="text-xl font-semibold mb-4">Francis</h3>
-            {/* <div className="h-6 w-6 rounded-full bg-gradient-to-r from-green-400 to-yellow-400 p-8 m-3">
-            </div> */}
-            <div className="flex justify-center">
-            {/* <div className=" h-6 w-6 rounded-full bg-gradient-to-r from-green-400 to-yellow-400 p-8 my-6">
-            </div> */}
-            <Image
-              src="/profile-3.webp"
-              alt="Prototype 1"
-              width={300}
-              height={300}
-              className="mx-auto mb-4 w-24 h-24 object-cover rounded-full"
-            />
-            </div>
-            <div>In progress...</div>
+          
+          <div className={` ${darkMode ? " text-white " : " text-neutral-900"} bg-none shadow-2xl rounded-lg  text-center`}>
+            
+            <Card
+              isFooterBlurred
+              radius="lg"
+              className="border-none"
+            >
+              <Image
+                alt="Woman listing to music"
+                className="  object-cover w-full h-full"
+                height={370}
+                src="two.webp"
+                width={500}
+              />
+              <CardFooter className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10 transition-all duration-300 ease-in-out hover:bg-black/50 hover:scale-105">
+              
+              
+                  <p className="text-white text-md font-sans">Text Addition</p>
+                  {/* <p className="text-black text-tiny">Add text to designs and adjust font size, weight, and style.</p> */}
+                
+                <Button  color="default" className="  text-tiny font-sans text-white bg-black/60" variant="flat"  radius="lg" size="sm">
+                  Notify Me
+                </Button>
+              </CardFooter>
+              {/* <CardFooter className="absolute bg-white/30 bottom-0 border-t-1 border-zinc-100/50 z-10 justify-between">
+                <div>
+                  <p className="text-black">Text Addition</p>
+                </div>
+                <Button radius="full" color="default" className=" shadow-lg text-tiny text-white bg-black/60">
+                  Notify Me
+                </Button>
+              </CardFooter> */}
+            </Card>
           </div>
+          
         </div>
       </div>
 
diff --git a/public/download.png b/public/download.png
new file mode 100644
index 0000000..1c83d69
Binary files /dev/null and b/public/download.png differ
diff --git a/public/download1.png b/public/download1.png
new file mode 100644
index 0000000..ae0122c
Binary files /dev/null and b/public/download1.png differ
diff --git a/public/download1.webp b/public/download1.webp
new file mode 100644
index 0000000..be43490
Binary files /dev/null and b/public/download1.webp differ
diff --git a/public/download2.png b/public/download2.png
new file mode 100644
index 0000000..8d07414
Binary files /dev/null and b/public/download2.png differ
diff --git a/public/five.webp b/public/five.webp
new file mode 100644
index 0000000..7e50db5
Binary files /dev/null and b/public/five.webp differ
diff --git a/public/four.webp b/public/four.webp
new file mode 100644
index 0000000..b9e1cf4
Binary files /dev/null and b/public/four.webp differ
diff --git a/public/one.webp b/public/one.webp
new file mode 100644
index 0000000..4c8a4db
Binary files /dev/null and b/public/one.webp differ
diff --git a/public/profile-1.webp b/public/profile-1.webp
deleted file mode 100644
index b14d4a0..0000000
Binary files a/public/profile-1.webp and /dev/null differ
diff --git a/public/profile-2.webp b/public/profile-2.webp
deleted file mode 100644
index 780887c..0000000
Binary files a/public/profile-2.webp and /dev/null differ
diff --git a/public/profile-3.webp b/public/profile-3.webp
deleted file mode 100644
index 2e227dd..0000000
Binary files a/public/profile-3.webp and /dev/null differ
diff --git a/public/three.webp b/public/three.webp
new file mode 100644
index 0000000..e7b7e12
Binary files /dev/null and b/public/three.webp differ
diff --git a/public/two.webp b/public/two.webp
new file mode 100644
index 0000000..18cf1c3
Binary files /dev/null and b/public/two.webp differ
diff --git a/public/vercel.svg b/public/vercel.svg
deleted file mode 100644
index d2f8422..0000000
--- a/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file