diff --git a/public/themes.webp b/public/themes.webp
new file mode 100644
index 0000000..af1d3b4
Binary files /dev/null and b/public/themes.webp differ
diff --git a/src/app/globals.css b/src/app/globals.css
index fd93773..28eb341 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -41,7 +41,7 @@
       --color-two: #fe8bbb;
       --color-three: #9e7aff;
 
-      --surface: rgb(235, 235, 235);
+      --surface: rgb(245, 245, 245);
 
       /*
     --color-one: #37ecba;
diff --git a/src/components/features.tsx b/src/components/features.tsx
index f6129d7..960c6a5 100644
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -9,6 +9,7 @@ import {
   EyeOffIcon,
   Github,
   HeartHandshake,
+  HeartPulseIcon,
   HomeIcon,
   RabbitIcon,
   ShieldAlertIcon,
@@ -44,6 +45,8 @@ import {
 } from './ui/table';
 import React, { useState } from 'react';
 import { ny } from '@/lib/utils';
+import ThemeCard from './theme-card';
+import { getAllThemes, ZenTheme } from '@/lib/themes';
 
 function Checkmark() {
   return (
@@ -70,10 +73,10 @@ export default function Features() {
       setFeature((feature) => (feature + 1) % 3);
     }, 3000);
     return () => clearInterval(interval);
-  });
+  }, []);
   return (
     <section className="flex-col w-full" id="features">
-      <div className='w-full md:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-10 shadow'>
+      <div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-10 shadow'>
         <div className='p-16 lg:w-1/2 flex flex-col justify-center'>
           <h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Built for simplicity</h1>
           <p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser is designed to be simple and easy to use. It's built with the user in mind, so you can focus on what matters most.</p>
@@ -94,7 +97,7 @@ export default function Features() {
         </div>
         <img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-1.png" alt="Zen Browser" className="rounded-md lg:w-1/2" />
       </div>
-      <div className='w-full md:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
+      <div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md lg:mx-auto bg-surface mt-36 shadow'>
         <img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-2.png" alt="Zen Browser" className="rounded-md lg:w-1/2" />
         <div className='p-16 lg:w-1/2 flex flex-col justify-center'>
           <h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Split Views</h1>
@@ -104,7 +107,7 @@ export default function Features() {
           </div>
         </div>
       </div>
-      <div className='w-full md:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
+      <div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
         <div className='p-16 lg:w-1/2 flex flex-col justify-center'>
           <h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Sidebar</h1>
           <p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser has a built-in sidebar that lets you quickly access your favorite websites, bookmarks, and more. It's the perfect way to stay organized.</p>
@@ -125,7 +128,7 @@ export default function Features() {
         </div>
         <img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-3.png" alt="Zen Browser" className="rounded-md lg:w-1/2" />
       </div>
-      <div className='w-full md:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
+      <div className='w-full md:w-5/6 lg:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
         <img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-4.jpg" alt="Zen Browser" className="rounded-md lg:w-1/2" />
         <div className='p-16 lg:w-1/2 flex flex-col justify-center'>
           <h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Introducing Compact Mode</h1>
@@ -135,7 +138,52 @@ export default function Features() {
           </div>
         </div>
       </div>
-      <div className='w-full md:w-3/4 p-5 lg:p-12 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
+      <div className='w-full md:w-5/6 lg:w-3/4 p-5 lg:p-12 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
+        <div className="flex p-16 lg:w-1/2 flex-col justify-center">
+          <h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Better tab management</h3>
+          <p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Better tab management helps you stay organized and focused, reducing clutter and enhancing productivity</p>
+          <div className='w-full mt-8'>
+            <div className='flex items-center'>
+              <Checkmark />
+              <p className='ml-2 text-gray-600 dark:text-gray-300'>Workspaces</p>
+            </div>
+            <div className='flex items-center mt-4'>
+              <Checkmark />
+              <p className='ml-2 text-gray-600 dark:text-gray-300'>Fast profile switcher</p>
+            </div>
+            <div className='flex items-center mt-4'>
+              <Checkmark />
+              <p className='ml-2 text-gray-600 dark:text-gray-300'>Container Tabs</p>
+            </div>
+            <div className='flex items-center mt-4'>
+              <Question />
+              <p className='ml-2 text-gray-600 dark:text-gray-300'>Tab Groups (Comming Soon)</p>
+            </div>
+          </div>
+        </div>
+        <div className="border-t lg:border-t-0 lg:border-l h-[1px] lg:h-[unset] lg:w-[1px] mx-2"></div>
+        <div className="flex p-16 lg:w-1/2 flex-col">
+          <h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Security And Privacy is <span className='text-purple-500 font-bold'>important</span> to us</h3>
+          <p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>
+            Zen is based on Firefox, ensuring that your browsing experience prioritizes security and privacy. With advanced tracking protection and minimal data collection, Zen keeps your online activity safe and secure, giving you peace of mind as you explore the web.
+          </p>
+          <div className="relative">
+            <Button className='mt-8' variant="ghost" onClick={() => window.open('/download', '_blank')}>Security in zen <ExternalLinkIcon className='opacity-50 h-4 w-4 ml-4' /></Button>
+            <Button className='mt-8' variant="ghost" onClick={() => window.open('/privacy-policy', '_blank')}>Your Privacy <ExternalLinkIcon className='opacity-50 h-4 w-4 ml-4' /></Button>        
+          </div>
+        </div>
+      </div>
+      <div className='w-full md:w-5/6 lg:w-3/4 p-5 lg:p-12 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
+        <div className="flex p-16 lg:w-1/2 flex-col justify-center">
+          <h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Your Browser, your way</h3>
+          <p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>With Zen's Theme Store, you can customize your browsing experience to reflect your unique style and preferences. Choose from a wide array of themes, colors, and layouts to make Zen truly your own, transforming your browser into a personalized digital space.</p>
+          <div className="relative">
+            <Button className='mt-8' onClick={() => window.open('/themes', '_self')}>View Theme Store</Button>
+          </div>
+        </div>
+        <img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/themes.webp" alt="Zen Browser" className="rounded-md lg:w-1/2" />
+      </div>
+      <div className='w-full md:w-5/6 lg:w-3/4 p-5 lg:p-12 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
         <div className="flex p-16 lg:w-1/2 flex-col justify-center">
           <h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Convinced?</h3>
           <p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Download Zen Browser now and experience the future of browsing.</p>
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 69507b2..6973c57 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -42,17 +42,17 @@ export default function Header() {
           <br className="hidden md:block" /> We care about your experience, not
           your data.
         </p>
-        <div className="flex justify-center w-full">
+        <div className="flex flex-col md:flex-row justify-center w-full">
           <a href="/download">
           <Button
-            className="animate-fade-in -translate-y-4 gap-1 rounded-lg text-white opacity-0 ease-in-out [--animation-delay:600ms] dark:text-black"
+            className="animate-fade-in -translate-y-4 gap-1 text-white opacity-0 ease-in-out [--animation-delay:600ms] dark:text-black"
           >
             <span>Download Zen Now </span>
             <ArrowRightIcon className="ml-1 size-4 transition-transform duration-300 ease-in-out group-hover:translate-x-1" />
           </Button>
           </a>
           <a href="#features" className="animate-fade-up -translate-y-4 opacity-0 [--animation-delay:800ms]">
-            <Button variant="ghost" className="ml-4">
+            <Button variant="ghost" className="mt-4 md:mt-0 md:ml-4">
               Start Exploring <ChevronDown className="ml-1 size-4" />
             </Button>
           </a>
diff --git a/src/components/theme-card.tsx b/src/components/theme-card.tsx
index 66ab418..f4f5a7b 100644
--- a/src/components/theme-card.tsx
+++ b/src/components/theme-card.tsx
@@ -2,14 +2,17 @@ import Image from "next/image";
 import { getThemeAuthorLink, ZenTheme } from "@/lib/themes";
 import styled from "styled-components";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";import { Button } from "./ui/button";
+import { ny } from "@/lib/utils";
 
 const ThemeCardWrapper = styled.div`
 `;
 
 export default function ThemeCard({
-  theme
+  theme,
+  className
 }: {
   theme: ZenTheme;
+  className?: string;
 }) {
 
   const maxNameLen = 50;
@@ -19,7 +22,7 @@ export default function ThemeCard({
     <ThemeCardWrapper onClick={(event) => {
       if (event.target instanceof HTMLAnchorElement) return;
       window.open(`/themes/${theme.id}`, "_self");
-    }} className="flex flex-col justify-start p-5 rounded-lg shadow-sm bg-muted dark:bg-muted/50 border border-grey-900 dark:border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-muted/100 hover:border-blue-500 cursor-pointer select-none ">
+    }} className={ny("flex flex-col justify-start p-5 rounded-lg shadow-sm bg-muted dark:bg-muted/50 border border-grey-900 dark:border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-muted/100 hover:border-blue-500 cursor-pointer select-none ", className)}>
       <img src={theme.image} alt={theme.name} width={500} height={500}
       className="w-full h-32 object-cover rounded-lg border shadow" />
       <h2 className="text-xl font-bold mt-4 overflow-ellipsis text-start">{theme.name.substring(0, maxNameLen).trim() + (theme.name.length > maxNameLen ? "..." : "")}</h2>