diff --git a/components/Author/AuthorProfile.tsx b/components/Author/AuthorProfile.tsx
index 9a3d429..8a7a638 100644
--- a/components/Author/AuthorProfile.tsx
+++ b/components/Author/AuthorProfile.tsx
@@ -5,8 +5,7 @@ import { SocialIcon } from 'react-social-icons'
 import BlogCard from '../blog/BlogCard'
 import Image from 'next/image'
 import { Cards } from 'nextra/components'
-import { Blog } from '@/components/CardIcons/Blog'
-import { OurAuthors } from '@/components/CardIcons/OurAuthors'
+import { OurAuthors, Blog } from '@/components/CardIcons'
 
 //TODO: Fix Mobile view to better handle more than 4 socials;
 //TODO: Better fallback social icon (the default one is the "share" icon)
diff --git a/components/CardIcons/AboutLogo.tsx b/components/CardIcons/AboutLogo.tsx
index 33dccfa..4b6f660 100644
--- a/components/CardIcons/AboutLogo.tsx
+++ b/components/CardIcons/AboutLogo.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image'
 
-export function Logo() {
+export default function Logo() {
   return (
     <>
       <div className="flex gap-2 items-center">
diff --git a/components/CardIcons/Blog.tsx b/components/CardIcons/Blog.tsx
index edbc4fa..583ef98 100644
--- a/components/CardIcons/Blog.tsx
+++ b/components/CardIcons/Blog.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image'
 
-export function Blog() {
+export default function Blog() {
   return (
     <>
       <div className="flex gap-2 items-center">
diff --git a/components/CardIcons/Changelog.tsx b/components/CardIcons/Changelog.tsx
index d905fcc..68fa7f6 100644
--- a/components/CardIcons/Changelog.tsx
+++ b/components/CardIcons/Changelog.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image'
 
-export function Changelog() {
+export default function Changelog() {
   return (
     <>
       <div className="flex gap-2 items-center">
diff --git a/components/CardIcons/CustomEndpoints.tsx b/components/CardIcons/CustomEndpoints.tsx
index a2e5246..a8b953f 100644
--- a/components/CardIcons/CustomEndpoints.tsx
+++ b/components/CardIcons/CustomEndpoints.tsx
@@ -1,6 +1,6 @@
 // import Image from 'next/image'
 
-export function CustomEndpoints() {
+export default function CustomEndpoints() {
   return (
     <>
       <div className="flex gap-2 items-center">
diff --git a/components/CardIcons/Features.tsx b/components/CardIcons/Features.tsx
new file mode 100644
index 0000000..f0a5d7f
--- /dev/null
+++ b/components/CardIcons/Features.tsx
@@ -0,0 +1,34 @@
+import Image from 'next/image'
+
+export default function Features() {
+  return (
+    <>
+      <div className="flex gap-2 items-center">
+        {/* Image */}
+        <Image src="/images/cards/sparkles.svg" alt="Features Logo" width={30} height={30} />
+        {/* Text */}
+        <span className="ml-2 text-lg font-bold text-gray-600 dark:text-gray-300">Features</span>
+        {/* CSS for hover effect */}
+        <style jsx>{`
+          div {
+            padding: 0.5rem 0.5rem 0.5rem 0;
+            mask-image: linear-gradient(
+              60deg,
+              #bba0ff 25%,
+              rgba(187, 160, 255, 0.2) 50%,
+              #bba0ff 75%
+            );
+            mask-size: 400%;
+            mask-position: 0%;
+          }
+          div:hover {
+            mask-position: 100%;
+            transition:
+              mask-position 1s ease,
+              -webkit-mask-position 1s ease;
+          }
+        `}</style>
+      </div>
+    </>
+  )
+}
diff --git a/components/CardIcons/OurAuthors.tsx b/components/CardIcons/OurAuthors.tsx
index b169fac..106d1e5 100644
--- a/components/CardIcons/OurAuthors.tsx
+++ b/components/CardIcons/OurAuthors.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image'
 
-export function OurAuthors() {
+export default function OurAuthors() {
   return (
     <>
       <div className="flex gap-2 items-center">
diff --git a/components/CardIcons/QuickStartLocal.tsx b/components/CardIcons/QuickStartLocal.tsx
index f3fe901..5c3b4c4 100644
--- a/components/CardIcons/QuickStartLocal.tsx
+++ b/components/CardIcons/QuickStartLocal.tsx
@@ -1,6 +1,6 @@
 // import Image from 'next/image'
 
-export function QuickStartLocal() {
+export default function QuickStartLocal() {
   return (
     <>
       <div className="flex gap-2 items-center">
diff --git a/components/CardIcons/Roadmap.tsx b/components/CardIcons/Roadmap.tsx
index 0c73856..13b6593 100644
--- a/components/CardIcons/Roadmap.tsx
+++ b/components/CardIcons/Roadmap.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image'
 
-export function Roadmap() {
+export default function Roadmap() {
   return (
     <>
       <div className="flex gap-2 items-center">
diff --git a/components/CardIcons/ToolKit.tsx b/components/CardIcons/ToolKit.tsx
index a65aed3..0ae3ba2 100644
--- a/components/CardIcons/ToolKit.tsx
+++ b/components/CardIcons/ToolKit.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image'
 
-export function ToolKit() {
+export default function ToolKit() {
   return (
     <>
       <div className="flex gap-2 items-center">
diff --git a/components/CardIcons/index.ts b/components/CardIcons/index.ts
new file mode 100644
index 0000000..cbf852e
--- /dev/null
+++ b/components/CardIcons/index.ts
@@ -0,0 +1,9 @@
+export { default as OurAuthors } from './OurAuthors'
+export { default as QuickStartLocal } from './QuickStartLocal'
+export { default as Roadmap } from './Roadmap'
+export { default as ToolKit } from './ToolKit'
+export { default as Logo } from './AboutLogo'
+export { default as Blog } from './Blog'
+export { default as Changelog } from './Changelog'
+export { default as CustomEndpoints } from './CustomEndpoints'
+export { default as Features } from './Features'
diff --git a/components/FooterMenu.tsx b/components/FooterMenu.tsx
index df80e87..cd376d8 100644
--- a/components/FooterMenu.tsx
+++ b/components/FooterMenu.tsx
@@ -53,6 +53,15 @@ const menuItems: {
       },
     ],
   },
+  {
+    heading: 'Features',
+    items: [
+      {
+        name: 'Features',
+        href: '/features',
+      },
+    ],
+  },
   {
     heading: 'Blog',
     items: [
diff --git a/pages/authors/index.mdx b/pages/authors/index.mdx
index 31a8c1a..b1d4d8d 100644
--- a/pages/authors/index.mdx
+++ b/pages/authors/index.mdx
@@ -7,7 +7,7 @@ import AuthorPage from '@/components/Author/AuthorPage'
 
 <AuthorPage />
 
-import { Blog } from '@/components/CardIcons/Blog'
+import { Blog } from '@/components/CardIcons'
 
 <Cards num={3}>
 <Cards.Card icon="📰&nbsp;&ensp;" title="Blog" href="/blog" />
diff --git a/pages/docs/index.mdx b/pages/docs/index.mdx
index 5aa0efd..06cf257 100644
--- a/pages/docs/index.mdx
+++ b/pages/docs/index.mdx
@@ -2,14 +2,16 @@
 title: Get Started
 ---
 
-import { QuickStartLocal } from '@/components/CardIcons/QuickStartLocal'
-import { CustomEndpoints } from '@/components/CardIcons/CustomEndpoints'
-import { Logo } from '@/components/CardIcons/AboutLogo'
-import { ToolKit } from '@/components/CardIcons/ToolKit'
-import { Changelog } from '@/components/CardIcons/Changelog'
-import { Roadmap } from '@/components/CardIcons/Roadmap'
-import { Blog } from '@/components/CardIcons/Blog'
-import { OurAuthors } from '@/components/CardIcons/OurAuthors'
+import {
+  QuickStartLocal,
+  CustomEndpoints,
+  Logo,
+  ToolKit,
+  Changelog,
+  Roadmap,
+  Features,
+  OurAuthors,
+} from '@/components/CardIcons'
 
 # Get Started
 
@@ -18,7 +20,12 @@ import { OurAuthors } from '@/components/CardIcons/OurAuthors'
 <div>
   <Cards num={2}>
     <Cards.Card title="" href="/docs/quick_start/local_setup" icon={<QuickStartLocal />} image />
-    <Cards.Card title="" href="/docs/quick_start/custom_endpoints" icon={<CustomEndpoints />} image />
+    <Cards.Card
+      title=""
+      href="/docs/quick_start/custom_endpoints"
+      icon={<CustomEndpoints />}
+      image
+    />
   </Cards>
 </div>
 
@@ -53,7 +60,7 @@ import { OurAuthors } from '@/components/CardIcons/OurAuthors'
     <Cards.Card title="" href="/changelog" icon={<Changelog />} image />
     <Cards.Card title="" href="/blog/2024-02-19_2024_roadmap" icon={<Roadmap />} image />
     <Cards.Card title="" href="/toolkit" icon={<ToolKit />} image />
-    <Cards.Card title="" href="/blog" icon={<Blog />} image />
+    <Cards.Card title="" href="/features" icon={<Features />} image />
     <Cards.Card title="" href="/authors" icon={<OurAuthors />} image />
   </Cards>
 </div>
diff --git a/pages/features.mdx b/pages/features.mdx
new file mode 100644
index 0000000..e69de29
diff --git a/public/images/cards/sparkles.svg b/public/images/cards/sparkles.svg
new file mode 100644
index 0000000..40d195f
--- /dev/null
+++ b/public/images/cards/sparkles.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+
+<svg width="800px" height="800px" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
+    class="iconify iconify--twemoji" preserveAspectRatio="xMidYMid meet">
+    <path fill="#FFAC33"
+        d="M34.347 16.893l-8.899-3.294l-3.323-10.891a1 1 0 0 0-1.912 0l-3.322 10.891l-8.9 3.294a1 1 0 0 0 0 1.876l8.895 3.293l3.324 11.223a1 1 0 0 0 1.918-.001l3.324-11.223l8.896-3.293a.998.998 0 0 0-.001-1.875z"></path>
+    <path fill="#FFCC4D"
+        d="M14.347 27.894l-2.314-.856l-.9-3.3a.998.998 0 0 0-1.929-.001l-.9 3.3l-2.313.856a1 1 0 0 0 0 1.876l2.301.853l.907 3.622a1 1 0 0 0 1.94-.001l.907-3.622l2.301-.853a.997.997 0 0 0 0-1.874zM10.009 6.231l-2.364-.875l-.876-2.365a.999.999 0 0 0-1.876 0l-.875 2.365l-2.365.875a1 1 0 0 0 0 1.876l2.365.875l.875 2.365a1 1 0 0 0 1.876 0l.875-2.365l2.365-.875a1 1 0 0 0 0-1.876z"></path>
+</svg>
\ No newline at end of file