diff --git a/frontend/app/about/page.tsx b/frontend/app/about/page.tsx
index b231ac9..17f1c65 100644
--- a/frontend/app/about/page.tsx
+++ b/frontend/app/about/page.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import Header from "@/components/Header";
 import { NumberTicker } from "@/components/NumberTicker";
 import { getRepoDetails } from "@/lib/getRepoDetails";
+import IconCloud from "@/components/ui/icon-cloud";
 
 export const revalidate = 1200 // Invalidate the cache every 20 minutes;
 
@@ -20,7 +21,7 @@ export default async function About() {
 						<p className="my-4 text-base md:text-lg font-bold text-gray-400 sm:mt-8 mb-8">
 							Here are some information about our project. Support us with a{" "}
 						</p>
-						<p className="text-primary-500 bg-gradient-to-r from-cyan-600 to-purple-900 rounded-md text-white px-2 py-1"><a href="https://github.com/Namit2111/bible-verse-finder" target="_blank" rel="noreferrer noopenner">Star ⭐️ on Github</a></p>
+						<p className="text-primary-500 bg-gradient-to-r from-cyan-600 to-purple-900 rounded-md text-white px-2 py-1"><a href="https://github.com/Namit2111/bible-verse-finder" target="_blank" rel="noreferrer noopener">Star ⭐️ on Github</a></p>
 					</div>
 				</div>
 				<div className="relative max-md:overflow-hidden">
@@ -29,7 +30,7 @@ export default async function About() {
 							<path d="M434.095 21.8754C619.918 21.8754 755.509 -33.413 755.509 31.8038C755.509 97.0206 268.41 201.855 82.5876 201.855C-103.234 201.855 82.5876 97.0207 82.5876 31.8039C82.5876 -33.4129 248.273 21.8754 434.095 21.8754Z" fill="url(#b)" />
 							<defs>
 								<linearGradient id="b" x1="0" y1="121.855" x2="8.92305" y2="-28.873" gradientUnits="userSpaceOnUse">
-									<stop offset="0%" style={{stopColor: "var(--color-cyan-500)"}}></stop>
+									<stop offset="0%" style={{ stopColor: "var(--color-cyan-500)" }}></stop>
 									<stop offset="100%" style={{ stopColor: "var(--color-purple-300)" }}></stop>
 								</linearGradient>
 							</defs>
@@ -37,25 +38,93 @@ export default async function About() {
 					</div>
 					<div className="flex justify-evenly items-center flex-wrap mt-32 max-md:mt-14 max-md:gap-3 mb-11">
 						<div className="relative items-center justify-center md:w-2/6 w-11/12">
-								<div className="absolute -inset-px bg-gradient-to-r from-cyan-400 to-cyan-900 rounded-s-2xl max-md:rounded-2xl"></div>
-								<div className="relative px-8 py-6 md:py-12 text-white bg-black/90 border border-transparent rounded-s-2xl max-md:rounded-2xl">
-									<NumberTicker value={repoData.totalContributors} className="text-4xl md:text-6xl text-white" />
-									<p className="text-gray-400 my-4 max-sm:text-xs">Contributors</p>
-								</div>
+							<div className="absolute -inset-px bg-gradient-to-r from-cyan-400 to-cyan-900 rounded-s-2xl max-md:rounded-2xl"></div>
+							<div className="relative px-8 py-6 md:py-12 text-white bg-black/90 border border-transparent rounded-s-2xl max-md:rounded-2xl">
+								<NumberTicker value={repoData.totalContributors} className="text-4xl md:text-6xl text-white" />
+								<p className="text-gray-400 my-4 max-sm:text-xs">Contributors</p>
+							</div>
 						</div>
 						<div className="relative items-center justify-center md:w-2/6 w-11/12">
-								<div className="absolute -inset-px bg-gradient-to-r from-cyan-900 to-purple-800 max-md:rounded-2xl"></div>
-								<div className="relative px-8 py-6 md:py-12 text-white bg-black/90 border border-transparent max-md:rounded-2xl">
-									<NumberTicker value={repoData.totalLinesOfCode} className="text-4xl md:text-6xl text-white" />
-									<p className="text-gray-400 my-4 max-sm:text-xs">Lines of Code</p>
-								</div>	
+							<div className="absolute -inset-px bg-gradient-to-r from-cyan-900 to-purple-800 max-md:rounded-2xl"></div>
+							<div className="relative px-8 py-6 md:py-12 text-white bg-black/90 border border-transparent max-md:rounded-2xl">
+								<NumberTicker value={repoData.totalLinesOfCode} className="text-4xl md:text-6xl text-white" />
+								<p className="text-gray-400 my-4 max-sm:text-xs">Lines of Code</p>
+							</div>
 						</div>
 						<div className="relative items-center justify-center md:w-2/6 w-11/12">
-								<div className="absolute -inset-px bg-gradient-to-r from-cyan-900 to-purple-800 rounded-e-2xl max-md:rounded-2xl"></div>
-								<div className="relative px-8 py-6 md:py-12 text-white bg-black/90 border border-transparent rounded-e-2xl max-md:rounded-2xl">
-									<NumberTicker value={repoData.totalCommits} className="text-4xl md:text-6xl text-white" />
-									<p className="text-gray-400 my-4 max-sm:text-xs">Commits</p>
-								</div>	
+							<div className="absolute -inset-px bg-gradient-to-r from-cyan-900 to-purple-800 rounded-e-2xl max-md:rounded-2xl"></div>
+							<div className="relative px-8 py-6 md:py-12 text-white bg-black/90 border border-transparent rounded-e-2xl max-md:rounded-2xl">
+								<NumberTicker value={repoData.totalCommits} className="text-4xl md:text-6xl text-white" />
+								<p className="text-gray-400 my-4 max-sm:text-xs">Commits</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</section>
+			<section className="px-4 mx-auto relative sm:px-6 lg:px-8 max-w-7xl py-8 max-md:text-center ">
+				<div>
+					<h1 className="text-4xl font-normal text-white max-xs:text-3xl lg:text-5xl xl:text-6xl">
+						Our Techstack
+					</h1>
+					<div className="flex flex-wrap max-md:gap-1 gap-2 items-center max-md:justify-center">
+						<p className="my-4 text-base md:text-lg font-bold text-gray-400 sm:mt-8 mb-8">
+							Here are some information about the techstack we used while developing our project.
+						</p>
+					</div>
+				</div>
+				<div className="relative max-md:overflow-hidden">
+					<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+						<svg width="95vw" height="512" viewBox="20 0 648 202" fill="none" xmlns="http://www.w3.org/2000/svg">
+							<path d="M434.095 21.8754C619.918 21.8754 755.509 -33.413 755.509 31.8038C755.509 97.0206 268.41 201.855 82.5876 201.855C-103.234 201.855 82.5876 97.0207 82.5876 31.8039C82.5876 -33.4129 248.273 21.8754 434.095 21.8754Z" fill="url(#b)" />
+							<defs>
+								<linearGradient id="b" x1="0" y1="121.855" x2="8.92305" y2="-28.873" gradientUnits="userSpaceOnUse">
+									<stop offset="0%" style={{ stopColor: "var(--color-cyan-500)" }}></stop>
+									<stop offset="100%" style={{ stopColor: "var(--color-purple-300)" }}></stop>
+								</linearGradient>
+							</defs>
+						</svg>
+					</div>
+					<div className="flex justify-evenly items-center flex-wrap mt-32 max-md:mt-14 max-md:gap-3 mb-11">
+						<div className="relative items-center justify-center md:w-2/6 w-11/12">
+							<div className="absolute -inset-px bg-gradient-to-r from-cyan-400 to-cyan-900 rounded-s-2xl max-md:rounded-2xl"></div>
+							<div className="relative px-8 py-6 md:py-12 text-white bg-black/85 border border-transparent rounded-s-2xl max-md:rounded-2xl">
+								<h1>Backend</h1>
+								<h2>Languages & Frameworks</h2>
+								<p className="text-gray-400 my-3 max-sm:text-xs">Python Flask</p>
+								<h2>Python Libraries </h2>
+								<p className="text-gray-400 my-1 max-sm:text-xs">Blinker Click Colorama Flask Itsdangerous</p>
+								<p className="text-gray-400 my-1 max-sm:text-xs">Joblib MarkupSafe NLTK NumPy Regex</p>
+								<p className="text-gray-400 my-1 max-sm:text-xs">Scikit-learn SciPy Threadpoolctl TQDM </p>
+								<p className="text-gray-400 my-1 max-sm:text-xs">Pymongo Langchain_community</p>
+								<p className="text-gray-400 my-1 max-sm:text-xs">Langchain_google_genai Fitz Qdrant </p>
+								<p className="text-gray-400 my-1 max-sm:text-xs">Python.ENV Jinja2 GROQ Werkzeug</p>
+							</div>
+						</div>
+						<div className="relative items-center justify-center md:w-2/6 w-11/12 ">
+							<div className="absolute -inset-px bg-gradient-to-r from-cyan-900 to-purple-800 max-md:rounded-2xl"></div>
+							<div className="relative px-8 py-6 md:py-13 text-black/90 bg-black/85 border border-transparent max-md:rounded-2xl">
+								<IconCloud iconSlugs={[
+									'tqdm', 'dotenv', 'langchain', 'numpy', 'regex', 'scikit-learn',
+									'scipy', 'jinja', 'json', 'nextdotjs', 'eslint', 'radixui',
+									'lucide', 'postcss', 'tailwindcss', 'python', 'flask',
+									'html5', 'css3', 'javascript', 'react', 'typescript', 'vercel',
+								]} />
+							</div>
+						</div>
+						<div className="relative items-center justify-center md:w-2/6 w-11/12">
+							<div className="absolute -inset-px bg-gradient-to-r from-cyan-900 to-purple-800 rounded-e-2xl max-md:rounded-2xl"></div>
+							<div className="relative px-8 py-6 md:py-12 text-white bg-black/85 border border-transparent rounded-e-2xl max-md:rounded-2xl ">
+								<h1>Frontend</h1>
+								<h2> Languages & Frameworks </h2>
+								<p className="text-gray-400 my-4 max-sm:text-xs">HTML CSS Python TypeScript Next.js</p>
+								<h2> Libraries & Tools </h2>
+								<p className="text-gray-400 my-3 max-sm:text-xs">
+									React TailwindCSS PostCSS Lucide CLSx </p>
+								<p className="text-gray-400 my-3 max-sm:text-xs">
+									RadixUI ESlint ESlint-config-next</p>
+								<h2> Utilities </h2>
+								<p className="text-gray-400 my-4 max-sm:text-xs">JSON NextResponse Vercel</p>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/frontend/components/ui/icon-cloud.tsx b/frontend/components/ui/icon-cloud.tsx
new file mode 100644
index 0000000..0b55ed1
--- /dev/null
+++ b/frontend/components/ui/icon-cloud.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useTheme } from "next-themes";
+import {
+  Cloud,
+  fetchSimpleIcons,
+  ICloud,
+  renderSimpleIcon,
+  SimpleIcon,
+} from "react-icon-cloud";
+
+export const cloudProps: Omit<ICloud, "children"> = {
+  containerProps: {
+    style: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      width: "88%",
+      paddingTop: 40,
+    },
+  },
+  options: {
+    reverse: true,
+    depth: 1,
+    wheelZoom: false,
+    imageScale: 2,
+    activeCursor: "default",
+    tooltip: "native",
+    initial: [0.1, -0.1],
+    clickToFront: 500,
+    tooltipDelay: 0,
+    outlineColour: "#0000",
+    maxSpeed: 0.04,
+    minSpeed: 0.02,
+    // dragControl: false,
+  },
+};
+
+export const renderCustomIcon = (icon: SimpleIcon, theme: string) => {
+  const bgHex = theme === "light" ? "#f3f2ef" : "#080510";
+  const fallbackHex = theme === "light" ? "#6e6e73" : "#ffffff";
+  const minContrastRatio = theme === "dark" ? 2 : 1.2;
+
+  return renderSimpleIcon({
+    icon,
+    bgHex,
+    fallbackHex,
+    minContrastRatio,
+    size: 42,
+    aProps: {
+      href: undefined,
+      target: undefined,
+      rel: undefined,
+      onClick: (e: any) => e.preventDefault(),
+    },
+  });
+};
+
+export type DynamicCloudProps = {
+  iconSlugs: string[];
+};
+
+type IconData = Awaited<ReturnType<typeof fetchSimpleIcons>>;
+
+export default function IconCloud({ iconSlugs }: DynamicCloudProps) {
+  const [data, setData] = useState<IconData | null>(null);
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    fetchSimpleIcons({ slugs: iconSlugs }).then(setData);
+  }, [iconSlugs]);
+
+  const renderedIcons = useMemo(() => {
+    if (!data) return null;
+
+    return Object.values(data.simpleIcons).map((icon) =>
+      renderCustomIcon(icon, theme || "light"),
+    );
+  }, [data, theme]);
+
+  return (
+    //@ts-expect-error this may throw some errors but we're handling it somewhere else
+    <Cloud {...cloudProps}>
+      <>{renderedIcons}</>
+    </Cloud>
+  );
+}
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9d7c7c1..3f0ffbf 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,8 +14,10 @@
         "framer-motion": "^11.5.6",
         "lucide-react": "^0.445.0",
         "next": "14.2.13",
+        "next-themes": "^0.3.0",
         "react": "^18",
         "react-dom": "^18",
+        "react-icon-cloud": "^4.1.4",
         "tailwind-merge": "^2.5.2",
         "tailwindcss-animate": "^1.0.7"
       },
@@ -41,6 +43,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@csstools/convert-colors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-2.0.0.tgz",
+      "integrity": "sha512-P7BVvddsP2Wl5v3drJ3ArzpdfXMqoZ/oHOV/yFiGFb3JQr9Z9UXZ9tnHAKJsO89lfprR1F9ExW3Yij21EjEBIA==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -3314,6 +3324,15 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz",
+      "integrity": "sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18",
+        "react-dom": "^16.8 || ^17 || ^18"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -3856,6 +3875,20 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-icon-cloud": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/react-icon-cloud/-/react-icon-cloud-4.1.4.tgz",
+      "integrity": "sha512-hc8yGNU98V6ObPdeNIt75M016xGMxbTWqB4l6exo1uwE5bvFU095unMbX2K3YBKYhGKEV3c7fSmq3jD3cRWX+A==",
+      "dependencies": {
+        "@csstools/convert-colors": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 9c74fcf..c089052 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,9 +14,11 @@
     "clsx": "^2.1.1",
     "framer-motion": "^11.5.6",
     "lucide-react": "^0.445.0",
-    "next": "14.2.13",
+    "next": "^15.0.1",
+    "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-icon-cloud": "^4.1.4",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7"
   },
@@ -30,4 +32,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
-}
+}
\ No newline at end of file