diff --git a/Website/app/Features.js b/Website/app/Features.js
new file mode 100644
index 000000000..453f37a50
--- /dev/null
+++ b/Website/app/Features.js
@@ -0,0 +1,60 @@
+import React from "react";
+function Features() {
+  const features = [
+    {
+      title: "It's Free and Open-Source",
+      description:
+        "Drifty is both free and open-source, so, you can bring new features that you wish to have 🎉",
+      icon: "fa-brands fa-osi",
+      color: "text-lime-600",
+    },
+    {
+      title: "Faster Downloading of files",
+      description:
+        "Drifty supports parallel downloading using multiple threads",
+      icon: "fa fa-download",
+      color: "text-sky-400",
+    },
+    {
+      title: "Support for downloading videos from YouTube, Instagram, etc.",
+      description:
+        "Drifty allows downloading videos from popular platforms like YouTube and Instagram with ease.",
+      icon: "fa fa-youtube-play",
+      color: "text-red-600",
+    },
+    {
+      title: "Available both in GUI and CLI mode",
+      description:
+        "Drifty has both CLI and GUI mode. So, it can be used anywhere as CLI or as GUI according to the requirements of the user.",
+      icon: "fa fa-desktop",
+      color: "text-gray-700",
+    },
+  ];
+  return (
+    <div className="py-6 px-12 background bg-gradient-to-r from-cyan-500 to-blue-500 text-white font-sans select-none">
+      <h1 className="text-center mb-6 font-extrabold text-4xl pt-6">
+        Features
+      </h1>
+      <div className="column-1 flex flex-wrap justify-center gap-1">
+        {features.map((feature, index) => (
+          <div
+            key={index}
+            className="m-2 p-4 rounded-md h-max flex flex-col justify-center shadow-lg bg-slate-100 font-bold text-black w-60 hover:-translate-y-1 hover:scale-110 duration-300"
+          >
+            <i
+              className={feature.icon + " self-center mb-5 " + feature.color}
+              aria-hidden="true"
+              style={{ fontSize: "3rem" }}
+            ></i>
+            <h3 className="text-lg mb-1">{feature.title}</h3>
+            <p className="font-normal leading-normal">{feature.description}</p>
+          </div>
+        ))}
+      </div>
+      <div className="text-2xl font-bold flex justify-center my-4">
+        ....and many more!
+      </div>
+    </div>
+  );
+}
+export default Features;
diff --git a/Website/app/page.js b/Website/app/page.js
index 8ad553dca..d923c6420 100644
--- a/Website/app/page.js
+++ b/Website/app/page.js
@@ -1,27 +1,32 @@
-import Header from "./Header"
-import MainSection from "./MainSection"
+import Header from "./Header";
+import MainSection from "./MainSection";
 import Contribute from "./Contribute";
-import Demo from "./Demo"
+import Demo from "./Demo";
 import Footer from "./Footer";
+import Features from "./Features";
 
 export default async function Home() {
-    const data = await getData()
-    return (
-        <>
-            <Header props={"bg-top"}/>
-            <MainSection/>
-            <Contribute props={data}/>
-            <Demo/>
-            <Footer/>
-        </>
-    )
+  const data = await getData();
+  return (
+    <>
+      <Header props={"bg-top"} />
+      <MainSection />
+      <Contribute props={data} />
+      <Features />
+      <Demo />
+      <Footer />
+    </>
+  );
 }
 
-export async function getData(){
-    const res = await fetch('https://api.github.com/repos/SaptarshiSarkar12/Drifty/contributors?per_page=100&page=1', {method:'GET'})
-    const contrib = await res.json();
-    return {
-        contrib,
-        revalidate: 3600
-    }
-}
\ No newline at end of file
+export async function getData() {
+  const res = await fetch(
+    "https://api.github.com/repos/SaptarshiSarkar12/Drifty/contributors?per_page=100&page=1",
+    { method: "GET" }
+  );
+  const contrib = await res.json();
+  return {
+    contrib,
+    revalidate: 3600,
+  };
+}
diff --git a/Website/package-lock.json b/Website/package-lock.json
index ccec39ed5..98c531902 100644
--- a/Website/package-lock.json
+++ b/Website/package-lock.json
@@ -12,6 +12,7 @@
         "autoprefixer": "10.4.16",
         "eslint": "8.50.0",
         "eslint-config-next": "13.5.3",
+        "font-awesome": "^4.7.0",
         "next": "13.5.3",
         "postcss": "8.4.30",
         "react": "18.2.0",
@@ -2033,6 +2034,14 @@
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
+    "node_modules/font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==",
+      "engines": {
+        "node": ">=0.10.3"
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",