diff --git a/public/img/blobs.png b/public/img/blobs.png
new file mode 100644
index 0000000..31a5d78
Binary files /dev/null and b/public/img/blobs.png differ
diff --git a/src/components/footer.jsx b/src/components/footer.jsx
deleted file mode 100644
index 8a973dd..0000000
--- a/src/components/footer.jsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from "react";
-
-const data = [
-    {
-        link: "Mission statement",
-        goto: "/mission/"
-    },
-    {
-        link: "Team",
-        goto: "/team/"
-    },
-    {
-        link: "Open Source",
-        goto: "https://github.com/rhino-linux"
-    },
-    {
-        link: "Branding",
-        goto: "/brand/"
-    }
-]
-
-
-function GetYear() {
-    return new Date().getFullYear();
-}
-
-function Footer() {
-    return (
-        <div className="w-full bg-site-300 lg:p-8 p-4">
-            <div className="text-center flex flex-wrap justify-center">
-                <p className="text-white text-xl">&copy; {GetYear()} Rhino Linux</p>
-            </div>
-            <span className="">
-                <div className="flex flex-wrap justify-center">
-                    {data.map((item) => (
-                        <p className="text-white text-xl p-4 pb-0 hover:text-rhino-purple transition-all underline" key={item.link}>
-                            <a href={item.goto}>{item.link}</a>
-                        </p>
-                    ))}
-                </div>
-            </span>
-        </div>
-    )
-}
-
-export default Footer;
\ No newline at end of file
diff --git a/src/components/hero.jsx b/src/components/hero.jsx
new file mode 100644
index 0000000..8204163
--- /dev/null
+++ b/src/components/hero.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import NavBar from './navbar';
+
+function Hero() {
+    return(
+        <section className="bg-hero-pattern bg-no-repeat bg-center-x bg-center-y bg-cover">
+            <div className="bg-overlay w-full h-auto">
+            <NavBar />
+            <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-12">
+                <h1 class="mb-4 text-4xl tracking-tight leading-none text-white font-bold md:text-5xl lg:text-6xl">Ubuntu based, rolling release.</h1>
+                <p class="mb-8 text-lg font-normal lg:text-xl sm:px-16 xl:px-48 text-white">Rhino Linux is a rolling release Ubuntu-based distribution with Pacstall & XFCE at its core.
+                </p>
+                <div class="flex flex-col mb-8 lg:mb-16 space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4">
+                    <a href="download" class="inline-flex justify-center items-center py-3 px-5 text-base text-center rounded-lg bg-rhino-purple hover:scale-105 text-white transition-all text-lg">
+                        Download
+                    </a>  
+
+                    <a href="#learn" class="inline-flex justify-center items-center py-3 px-5 text-base text-center text-white  transition-all text-lg">
+                        Learn more
+                        <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                    </a>
+                </div>
+            </div>
+            </div>
+        </section>
+    );
+}
+
+export default Hero;
\ No newline at end of file
diff --git a/src/components/home/desktop.jsx b/src/components/home/desktop.jsx
deleted file mode 100644
index 1c4601f..0000000
--- a/src/components/home/desktop.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react";
-
-const data = [
-    {
-        title: "Adaptive, to any workflow.",
-        description: "Whether you prefer the traditional floating windows, or are a fanatic of tiling window managers, Unicorn is perfect for you. With optional auto-tiling you can easily toggle between floating and tiling at the press of a button.",
-        image: "../img/home/unicorn/tiling.webp"
-    },
-    {
-        title: "A brand new dashboard.",
-        description: "You can switch between virtual desktops with ease. We have loaded in Xfdashboard, with many minor tweaks and improvements. Xfdashboard brings a gnome-shell like virtual desktop and èxpose built right into XFCE.",
-        image: "../img/home/unicorn/xfdashboard.webp"
-    },
-
-]
-
-function Desktop() {
-    return (
-      <div className="w-full bg-site-300 lg:p-8 p-4">
-        <h1 className="text-white text-5xl text-center">Enjoy an adaptive desktop.</h1>
-        <p className="lg:w-[70%] m-auto text-white text-xl pb-4 text-center pt-4">Rhino Linux comes preinstalled with its own in-house desktop experience, Unicorn, a custom built XFCE desktop experience combining the best of the traditional and modern takes on the Desktop.</p>
-        <div className="lg:w-[75%] m-auto w-[95%] lg:grid lg:grid-cols-2 gap-8">
-          {data.map((item, index) => (
-            <div key={index} className="">
-              <img src={item.image ? item.image : "https://via.placeholder.com/150.png"} alt={item.title} className="w-full h-auto object-cover rounded-lg" />
-              <h1 className="text-white text-2xl mt-4">{item.title}</h1>
-              <p className="text-white mt-2">{item.description}</p>
-            </div>
-          ))}
-        </div>
-        <h1 className="text-center text-xl text-rhino-purple underline py-4 pt-8"><a href="/unicorn/">Learn more about the Unicorn Desktop →</a></h1>
-      </div>
-    );
-}
-
-export default Desktop;
\ No newline at end of file
diff --git a/src/components/home/developers.jsx b/src/components/home/developers.jsx
deleted file mode 100644
index fc0bdc7..0000000
--- a/src/components/home/developers.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from "react";
-
-const data = [
-    {
-        title: "Perfect for developers",
-        paragraphs: [
-            "Developers will fall in love with our vast software repositories which are always up-to-date. User-repositories such as Pacstall can help provide development libraries that are critical for your project. With codium preinstalled on your system you can begin doing what you do best, instantly.",
-
-            "Developers will fall in love with our vast software repositories which are always up-to-date. User-repositories such as Pacstall can help provide development libraries that are critical for your project. With codium preinstalled on your system you can begin doing what you do best, instantly."
-        ],
-        image: "/img/home/developers.webp",
-        link: {
-            text: "Learn more about how Rhino Linux can help you develop →",
-            url: "/developers/"
-        }
-    }
-]
-
-function Developers() {
-    return (
-        <div className="lg:w-[75%] w-[95%] py-4 m-auto">
-            {data.map((post, index) => (
-                <div key={index} className="lg:grid lg:grid-cols-2 m-auto gap-8">
-                    <div>
-                        <h1 className="text-5xl text-white pt-4 text-center">{post.title}</h1>
-                        {post.paragraphs.map((paragraph, index) => (
-                            <p key={index} className="text-white text-xl py-4">
-                                {paragraph}
-                            </p>
-                        ))}
-                    </div>
-                    <div>
-                        <img src={post.image} alt="Image" className="w-full rounded-lg" />
-                    </div>
-                </div>
-            ))}
-            <h1 className="text-center text-xl text-rhino-purple underline py-4">
-                <a href={data[0].link.url}>{data[0].link.text}</a>
-            </h1>
-        </div>
-    );
-}
-
-export default Developers;
\ No newline at end of file
diff --git a/src/components/home/hero.jsx b/src/components/home/hero.jsx
deleted file mode 100644
index d4c1ca7..0000000
--- a/src/components/home/hero.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-import Link from "next/link";
-
-function Hero() {
-    return (
-        <div className="lg:w-[90%] w-full m-auto">
-            <div className="text-center">
-                <h1 className="lg:text-6xl text-4xl text-rhino-purple font-bold pt-4 p-2">
-                   Rhino Linux
-                </h1>
-                <h2 className="text-white font-lighter lg:text-3xl text-2xl p-2">
-                    The rolling release, Ubuntu-based distribution made <span className="text-rhino-purple"><i>by developers, for developers.</i></span>
-                </h2>
-            </div>
-            <img src="/img/home/image.png" className=" lg:w-[65%] hover:scale-[102%] transition-all w-[95%] h-full pt-0 mx-auto rounded-lg" />
-            <div className="flex flex-wrap justify-center mt-4 w-[70%] mx-auto pb-8">
-        <Link href="#learn" className="m-2 hover:scale-110 transition-all">
-            <span className="rounded-lg p-2 bg-rhino-purple text-white text-2xl text-center block">
-                Learn More
-            </span>
-        </Link>
-        <Link href="/download/" className="m-2 hover:scale-110 transition-all">
-            <span className="rounded-lg p-2 bg-rhino-purple text-white text-2xl text-center block">
-                Download
-            </span>
-        </Link>
-    </div>
-</div>
-    );
-}
-
-export default Hero;
diff --git a/src/components/home/latest.jsx b/src/components/home/latest.jsx
deleted file mode 100644
index 98c7aa1..0000000
--- a/src/components/home/latest.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-import posts from "../../items/posts";
-
-function Latest() {
-    const latestPost = posts && posts.length > 0 ? posts[0] : null;
-    const latestPostTitle = latestPost ? latestPost.title : "No posts available";
-    const latestPostContent = latestPost && latestPost.content.length > 0 ? latestPost.content[0] : "No content available";
-
-    return (
-        <div className="w-full bg-site-300 text-center lg:p-8">
-            <div className="lg:w-[80%] w-[95%] mx-auto">
-                <h1 className="text-5xl text-white py-4">
-                    Latest news
-                </h1>
-                <h2 className="text-3xl text-white py-2 font-bold">{latestPostTitle}</h2>
-                <p className="text-xl text-white">{latestPostContent}</p>
-                <p className="text-xl py-4">
-                    <a href="/news/" className="text-rhino-purple underline">
-                        Read the announcement →
-                    </a>
-                </p>
-            </div>
-        </div>
-    );
-}
-
-export default Latest;
diff --git a/src/components/home/packages.jsx b/src/components/home/packages.jsx
deleted file mode 100644
index 1e1d260..0000000
--- a/src/components/home/packages.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from "react";
-
-const data = [
-    {
-        title: "Control your packages",
-        paragraphs: [
-            "Our flagship package management wrapper, rhino-pkg, makes life easy by allowing for you to install, remove and update applications across all package managers and repositories. With easy to understand syntax, and our handy guide, you will have all of your favourite apps in seconds.",
-
-            "Our flagship package management wrapper, rhino-pkg, makes life easy by allows for you to install, remove and update applications across all package managers and repositories. With easy to understand syntax, and our handy guide, you will have all of your favourite apps in seconds.", // Add paragraph about Pacstall here
-        ],
-        image: "/img/home/rhino-pkg.webp",
-        link: {
-            text: "Learn more about rhino-pkg →",
-            url: "#"
-        },
-    }
-]
-
-function Packages() {
-    return (
-        <div className="lg:w-[75%] w-[95%] pt-4 m-auto pb-4">
-            {data.map((post, index) => (
-                <div key={index} className="lg:grid lg:grid-cols-2 m-auto gap-8">
-                    <div>
-                        <h1 className="text-5xl text-white pt-4 text-center">{post.title}</h1>
-                        {post.paragraphs.map((paragraph, index) => (
-                            <p key={index} className="text-white text-xl py-4">
-                                {paragraph}
-                            </p>
-                        ))}
-                    </div>
-                    <div>
-                        <img src={post.image} alt="Image" className="w-full" />
-                    </div>
-                </div>
-            ))}
-            <h1 className="text-center text-xl text-rhino-purple underline py-4">
-                <a href={data[0].link.url}>{data[0].link.text}</a>
-            </h1>
-        </div>
-    );
-}
-
-export default Packages;
\ No newline at end of file
diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx
index ef08a98..f0bece2 100644
--- a/src/components/navbar.jsx
+++ b/src/components/navbar.jsx
@@ -42,10 +42,10 @@ const baritems = [
 function NavBar() {
     return (
         <div>
-            <nav className="bg-site-300 w-[100%] flex items-center justify-between">
+            <nav className=" w-[100%] m-auto flex items-center justify-between">
                 <div className="px-2">
                     <a href="../">
-                        <img src="/img/logo.png" alt="" className="lg:w-[4%] md:w-[10%] w-[20%] rounded-full" />
+                        <img src="/img/logo.png" alt="" className="lg:w-[4%] md:w-[10%] w-[20%]" />
                     </a>
                 </div>
                 <div
@@ -55,10 +55,9 @@ function NavBar() {
                     <h1 className="text-3xl text-white">≡</h1>
                 </div>
             </nav>
-            <div className="bg-site-300 hidden transition-all w-[100%] p-2" id="mega-menu">
-                <hr className="bg-off-white mb-4" />
+            <div className=" hidden transition-all w-[100%] p-2" id="mega-menu">
                 <div className="w-[100%] m-auto">
-                    <div className="text-2xl">
+                    <div className="text-2xl bg-site-300 rounded-lg p-8">
                         {baritems.map((item) => (
                             <li className="list-none p-4" key={item.link}>
                                 <Link href={item.link}>
@@ -68,7 +67,7 @@ function NavBar() {
                         ))}
                     </div>
                 </div>
-                <hr className="bg-off-white mb-2" />
+
             </div>
         </div>
     );
diff --git a/src/components/news/hero.jsx b/src/components/news/hero.jsx
deleted file mode 100644
index 23c6497..0000000
--- a/src/components/news/hero.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-
-function Hero() {
-    return(
-        <div className="lg:w-[90%] w-full m-auto">
-            <div className="text-center">
-                <h1 className="lg:text-6xl text-4xl text-rhino-purple font-bold pt-4 p-2">
-                   News Feed
-                </h1>
-                <h2 className="text-white font-lighter lg:text-3xl text-2xl p-2">
-                    Find news relating to Rhino Linux & its development
-                </h2>
-            </div>
-        </div>
-    )
-}
-
-export default Hero;
\ No newline at end of file
diff --git a/src/components/news/posts.jsx b/src/components/news/posts.jsx
deleted file mode 100644
index ad5030f..0000000
--- a/src/components/news/posts.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import posts from '../../items/posts';
-
-function Posts() {
-    return (
-        <div className="w-full p-4 m-auto">
-            <div className="p-4 md:w-[65%] m-auto bg-site-300 rounded-lg">
-            {posts.map((post, index) => {
-                return (
-                    <div key={index} className="p-4" id={post.date}>
-                        <h1 className="text-5xl my-2 text-center text-white">
-                            {post.title}
-                        </h1>
-                        {post.banner && <img src={post.banner} alt="Post Banner" className="w-full" />}
-                        <p className="text-white my-2 text-sm">
-                            Posted: {post.date}
-                        </p>
-                        {post.content.map((paragraph, index) => {
-                            return (
-                                <p key={index} className="text-white my-2 text-lg">
-                                    {paragraph}
-                                </p>
-                            );
-                        })}
-                        <button
-                            onClick={() => {
-                                const postLink = window.location.href + `#${post.date}`;
-                                navigator.clipboard.writeText(postLink);
-                                alert('Post link copied to clipboard!');
-                            }}
-                            className="bg-rhino-purple hover:bg-blue-700 text-white py-2 px-4 rounded-lg"
-                        >
-                            Copy post link
-                        </button>
-                    </div>
-                );
-            })}
-            </div>
-        </div>
-    );
-}
-
-export default Posts;
\ No newline at end of file
diff --git a/src/components/unicorn.jsx b/src/components/unicorn.jsx
new file mode 100644
index 0000000..5ed2971
--- /dev/null
+++ b/src/components/unicorn.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+function Unicorn() {
+    <div className="w-full p-8 md:p-16 lg:p-24">
+        <div className="grid grid-cols-2 gap-4">
+            <div>
+                <h1 className="text-xl text-rhino-purple">
+
+                </h1>
+            </div>
+        </div>
+    </div>
+}
+
+export default Unicorn;
\ No newline at end of file
diff --git a/src/components/unicorn/hero.jsx b/src/components/unicorn/hero.jsx
deleted file mode 100644
index f889a62..0000000
--- a/src/components/unicorn/hero.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-
-function Hero() {
-    return(
-        <div className="w-full p-4 lg:p-8">
-            <div className="lg:grid lg:grid-cols-2 lg:gap-4">
-                <div className="flex items-center justify-center">
-                    <h1 className="text-6xl text-center">A desktop perfect for the power user.</h1>
-                </div>
-                <div className="relative overflow-hidden">
-                    <img src="/img/home/image.png" className="w-[150%] lg:w-[200%] object-cover lg:object-left rounded-[0.65em] shadow-lg" />
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default Hero;
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index e97cd56..c0dcb8d 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,22 +1,10 @@
 import React from "react";
-import Menu from "../components/navbar";
-import Hero from "../components/home/hero";
-import Latest from "../components/home/latest";
-import Developers from "../components/home/developers";
-import Desktop from "../components/home/desktop";
-import Packages from "../components/home/packages";
-import Footer from "../components/footer";
+import Hero from "../components/hero";
 
 export default function Home() {
   return (
     <main>
-      <Menu />
       <Hero />
-      <Latest />
-      <Developers />
-      <Desktop />
-      <Packages />
-      <Footer />
     </main>
   );
 }
diff --git a/src/pages/unicorn.jsx b/src/pages/unicorn.jsx
deleted file mode 100644
index 9459561..0000000
--- a/src/pages/unicorn.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-import Menu from "../components/navbar";
-import Hero from "../components/unicorn/hero";
-
-export default function Home() {
-    return(
-        <main>
-            <Menu />
-            <Hero />
-        </main>
-    );
-};
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index d04abf2..dff9daf 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,10 +12,14 @@ module.exports = {
         "off-white": "#fefefe",
         "rhino-purple": "#8d7be4",
         "site-300": "#231e37",
+        "overlay": "rgba(15, 0, 20, 0.4)",
       },
       boxShadow: {
         'bxs': "0 0 10px #8d7be4",
-      }
+      },
+      backgroundImage: {
+        'hero-pattern': "url('/img/blobs.png')",
+      },
     },
   },
   plugins: [],