diff --git a/src/api/project/project-featured.js b/src/api/project/project-featured.js
new file mode 100644
index 0000000..ecce4fa
--- /dev/null
+++ b/src/api/project/project-featured.js
@@ -0,0 +1,19 @@
+export default async function ProjectFeatured() {
+  try {
+    const res = await fetch(process.env.NEXT_PUBLIC_HOST + "/" + process.env.NEXT_PUBLIC_VERSION + "/project/featured/project", {
+      method: 'GET',
+      headers: {
+        'Accept': '*/*',
+        'Content-Type': 'application/json',
+      },
+    }).then((res) => res.json());
+    
+    if (res.status === 200) {
+      return {status: "200", data: res.data};
+    } else {
+      return {status: "err"};
+    }
+  } catch {
+    return {status: "err"};
+  }
+};
\ No newline at end of file
diff --git a/src/app/Credits.js b/src/app/Credits.js
index 9e1a4ce..a896496 100644
--- a/src/app/Credits.js
+++ b/src/app/Credits.js
@@ -9,7 +9,7 @@ export default function Credits() {
         <h4 className={`${font.Clash_display_d4bold} text-white`}>Meet the masterminds</h4>
         <div className="px-2 py-1">
           <Link href="/credits">
-            <button className={`${font.Clash_display_h3bold} text-white xl:px-8 xl:py-4 bg-gradient-to-b from-cyan-400 to-sky-500 rounded-xl lg:px-6 lg:py-3 md:px-4 md:py-2 sm:px-4 sm:py-2 ss:px-4 ss:py-2`}>Open Credits</button>
+            <button className={`${font.Clash_display_h3bold} text-white xl:px-8 xl:py-4 bg-gradient-to-b from-cyan-400 to-sky-500 rounded-xl ss:px-6 ss:py-3`}>Open Credits</button>
           </Link>
         </div>
       </div>
diff --git a/src/app/Faqs.js b/src/app/Faqs.js
index ce87642..c1c1e7e 100644
--- a/src/app/Faqs.js
+++ b/src/app/Faqs.js
@@ -39,8 +39,8 @@ export default function Faqs() {
   ]
 
   return (
-    <div className="p-24" id="faqs">
-      <h4 className={`${font.Clash_display_d4bold} text-white text-center mb-12`}>FAQS</h4>
+    <div className="md:p-24 px-4 pb-16" id="faqs">
+      <h4 className={`${font.Clash_display_d4bold} text-white text-center md:mb-12 mb-6`}>FAQS</h4>
       <div>
         {content.map((item, index) => (
           <div key={index}>
@@ -51,9 +51,14 @@ export default function Faqs() {
               </div>
             </div>
             {activeIndices.includes(index) && (
-              <div className={`${font.Satoshi_b1regular} text-slate-400 px-8 pb-8 select-none`}>
-                {item.desc}
-              </div>
+              <>
+                <div className={`${font.Satoshi_b1regular} text-slate-400 px-8 pb-8 select-none hidden md:block`}>
+                  {item.desc}
+                </div>
+                <div className={`${font.Satoshi_b4regular} text-slate-400 px-8 pb-8 select-none block md:hidden`}>
+                  {item.desc}
+                </div>
+              </>
             )}
             <hr />
           </div>
diff --git a/src/app/Featured.js b/src/app/Featured.js
index ef5984c..2bd11e1 100644
--- a/src/app/Featured.js
+++ b/src/app/Featured.js
@@ -1,27 +1,50 @@
+"use client";
+
+import Link from 'next/link';
 import Image from 'next/image';
+import { useEffect, useState } from 'react';
 
 import { featured } from './dummy';
 
+import ProjectFeatured from '@/api/project/project-featured';
+
 export default function Featured({ styles }) {
+
+  const [featuredData, setFeaturedData] = useState([]);
+
+  const getFeaturedProject = async () => {
+    const res = await ProjectFeatured();
+
+    if (res.status === "200") {
+      setFeaturedData(res.data);
+    }
+  }
+
+  useEffect(() => {
+    getFeaturedProject();
+  }, []);
+
   return (
     <div className="py-24 bg-gradient-to-b from-slate-950 to-slate-900 flex flex-col xl:gap-24 relative lg:gap-20 md:gap-20 sm:gap-12 ss:gap-12">
       <div className="xl:px-24 lg:px-20 md:px-16 sm:px-12 ss:px-8">
-        <Image src="/images/Featured/FeaturedTitle.png" width={1250} height={88} className="w-full" />
+        <Image src="/images/Featured/FeaturedTitle.png" alt="title" width={1250} height={88} className="w-full" />
       </div>
       <div className={`overflow-x-auto ${styles.featuredGallery}`}>
         <div className="flex w-fit gap-8 xl:px-24 lg:px-20 md:px-16 sm:px-12 ss:px-8">
           {
-            featured.map((element, index) => (
+            (featuredData.length !== 0) && featuredData.map((element, index) => (
               <div className="flex gap-8" key={index}>
-                <div className="relative xl:w-[600px] xl:h-[400px] lg:w-[450px] lg:h-[300px] md:w-[420px] md:h-[280px] sm:w-[600px] sm:h-[400px] ss:w-[300px] ss:h-[220px]">
-                  <Image src={element.thumbnail} alt="thumbnail" className="w-full h-full rounded-xl" />
-                  <div className="absolute top-0 w-full h-full bg-slate-950/50 rounded-xl flex justify-center items-center">
-                    <Image src={element.logo} alt="logo" className="w-[140px]" />
+                <Link href={"/project/" + element.id}>
+                  <div className="relative xl:w-[600px] xl:h-[400px] lg:w-[450px] lg:h-[300px] md:w-[420px] md:h-[280px] sm:w-[600px] sm:h-[400px] ss:w-[300px] ss:h-[220px] border-solid border-[1px] border-slate-700 rounded-xl">
+                    <Image src={process.env.NEXT_PUBLIC_HOST + "/" + process.env.NEXT_PUBLIC_VERSION + element.thumbnail.data} width={480} height={240} alt="thumbnail" className="w-full h-full rounded-xl object-cover" loading='eager' />
+                    <div className="absolute top-0 w-full h-full bg-slate-950/50 rounded-xl flex justify-center items-center">
+                      <Image src={process.env.NEXT_PUBLIC_HOST + "/" + process.env.NEXT_PUBLIC_VERSION + element.logo} width={240} height={240} alt="logo" className="md:w-[140px] md:h-[140px] w-[100px] h-[100px] rounded-full" loading='eager' />
+                    </div>
                   </div>
-                </div>
+                </Link>
                 {
-                  index != featured.length - 1 ? (
-                    <div className="w-60 xl:h-[400px] bg-gradient-to-br from-slate-800/20 to-slate-900/20 border-solid border-[1px] border-slate-700 rounded-xl lg:h-[300px] md:h-[280px] sm:h-[400px] ss:h-[220px]"></div>
+                  index != featuredData.length - 1 ? (
+                    <div className="md:w-60 w-20 xl:h-[400px] bg-gradient-to-br from-slate-800/20 to-slate-900/20 border-solid border-[1px] border-slate-700 rounded-xl lg:h-[300px] md:h-[280px] sm:h-[400px] ss:h-[220px]"></div>
                   ) : (
                     <></>
                   )
diff --git a/src/app/Header.js b/src/app/Header.js
index 832fff8..2ca7f64 100644
--- a/src/app/Header.js
+++ b/src/app/Header.js
@@ -14,22 +14,27 @@ export default function Header() {
   }
 
   return (
-		<div className="w-full bg-slate-950/60 xl:px-24 lg:px-24 md:px-24 sm:px-16 ss:px-8 py-6 border-b-[1px] border-b-solid border-b-slate-700 fixed top-0 z-[2]">
+		<div className="w-full bg-slate-950/60 md:px-24 sm:px-16 ss:px-4 py-6 border-b-[1px] border-b-solid border-b-slate-700 fixed top-0 z-[2]">
 			<div className="flex justify-between">
 				<div className="flex items-center cursor-pointer" onClick={() => scrollToSection("main")}>
-					<Image src={LogoTitle} className="w-72 pr-8 border-r-[1px] border-r-solid border-r-slate-700" />
+					<Image
+            src={LogoTitle}
+            alt="sersow=logo"
+            className="sm:w-72 sm:h-auto ss:w-auto ss:h-6 pr-8 sm:border-r-[1px] sm:border-r-solid sm:border-r-slate-700"
+          />
 				</div>
-        <div className="flex xl:gap-4 lg:gap-4 md:gap-4 sm:gap-2 ss:gap-2 items-center">
-          <button className="flex items-center gap-2 xl:px-6 lg:px-6 md:px-6 sm:px-6 ss:px-4 xl:py-3 lg:py-3 md:py-3 sm:py-2 ss:py-1" onClick={() => scrollToSection("faqs")}>
+        <div className="flex md:gap-4 sm:gap-2 items-center">
+          <button className="flex items-center gap-2 sm:px-6 ss:px-4 md:py-3 sm:py-2 ss:hidden sm:block" onClick={() => scrollToSection("faqs")}>
             <h4 className={`${font.Satoshi_b2medium} text-white`}>FAQ</h4>
           </button>
-          <button className="flex items-center gap-2 xl:px-6 lg:px-6 md:px-6 sm:px-6 ss:px-4 xl:py-3 lg:py-3 md:py-3 sm:py-2 ss:py-1" onClick={() => scrollToSection("credits")}>
+          <button className="flex items-center gap-2 sm:px-6 ss:px-4 md:py-3 sm:py-2 ss:hidden sm:block" onClick={() => scrollToSection("credits")}>
             <h4 className={`${font.Satoshi_b2medium} text-white`}>Credits</h4>
           </button>
-          <div className="xl:px-2 lg:px-2 md:px-2 sm:px-2 ss:px-1 py-1">
+          <div className="px-2 py-1">
             <Link href="/register">
-              <button className="flex items-center gap-2 xl:px-6 lg:px-6 md:px-6 sm:px-6 ss:px-4 xl:py-3 lg:py-3 md:py-3 sm:py-2 ss:py-1 bg-gradient-to-b from-purple-500 to to-violet-600 rounded-xl hover:drop-shadow-[0px_0px_4px_rgba(168,85,247,0.4)] transition-all">
-                <h4 className={`${font.Satoshi_b2medium} text-white`}>Register</h4>
+              <button className="flex items-center gap-2 ss:px-6 md:py-3 ss:py-2 bg-gradient-to-b from-purple-500 to to-violet-600 rounded-xl hover:drop-shadow-[0px_0px_4px_rgba(168,85,247,0.4)] transition-all">
+                <h4 className={`${font.Satoshi_b2medium} text-white hidden sm:block`}>Register</h4>
+                <h4 className={`${font.Satoshi_c2bold} text-white block sm:hidden`}>Register</h4>
               </button>
             </Link>
           </div>
diff --git a/src/app/Join.js b/src/app/Join.js
index 58c4480..bba4f9c 100644
--- a/src/app/Join.js
+++ b/src/app/Join.js
@@ -7,7 +7,7 @@ import UpiWhite from "../../public/images/Join/UpiWhite.svg";
 export default function Join() {
   return (
     <div className="bg-slate-900 xl:py-12 flex flex-col items-center gap-12 border-solid border-y-[1px] border-y-slate-700 lg:py-8 md:py-8 sm:py-10 ss:py-8">
-      <Image src={UpiWhite} alt="UPI LOGO" className="xl:w-48 xl:h-48 lg:w-40 lg:h-40 md:w-36 md:h-36 sm:w-44 sm:h-44 ss:w-36 ss:h-36" />
+      <Image src={UpiWhite} alt="UPI LOGO" className="xl:w-48 xl:h-48 lg:w-40 lg:h-40 md:w-36 md:h-36 sm:w-40 sm:h-40 ss:w-32 ss:h-32" />
       <div className="flex flex-col w-full items-center text-center gap-8">
         <div>
           <h1 className={`${font.Clash_display_h1medium} text-white`}>if you have upi.edu account</h1>
@@ -15,7 +15,7 @@ export default function Join() {
         </div>
         <div className="px-2 py-1">
           <Link href="login">
-            <button className={`${font.Clash_display_h3bold} text-white xl:px-8 xl:py-4 bg-gradient-to-b from-pink-500 to-violet-600 rounded-xl lg:px-6 lg:py-3 md:px-4 md:py-2 sm:px-5 sm:py-1 ss:px-4 ss:py-2 `}>Log In</button>
+            <button className={`${font.Clash_display_h3bold} text-white xl:px-8 xl:py-4 bg-gradient-to-b from-pink-500 to-violet-600 rounded-xl lg:px-6 lg:py-3 ss:px-4 ss:py-2 `}>Log In</button>
           </Link>
         </div>
       </div>
diff --git a/src/app/Main.js b/src/app/Main.js
index 491ebeb..526b698 100644
--- a/src/app/Main.js
+++ b/src/app/Main.js
@@ -6,16 +6,22 @@ import font from "./font.module.css";
 export default function Main() {
   return (
     <div className="relative w-full" id="main">
-      <Image src="/images/GalaxyBackground.png" width={1280} height={910} className="xl:w-screen xl:h-auto xl:object-contain lg:w-screen lg:h-auto lg:object-contain md:w-screen md:h-auto md:object-contain sm:w-auto sm:h-[1280px] sm:object-cover ss:w-auto ss:h-[700px] ss:object-cover" />
+      <Image
+        src="/images/GalaxyBackground.png"
+        alt="main-background"
+        width={1280}
+        height={910}
+        className="md:w-screen md:h-auto md:object-contain ss:w-auto ss:h-screen ss:object-cover" />
       <div className="w-full h-full bg-Gradient1 absolute top-0">
-        <div className="flex flex-col h-full w-full xl:items-start lg:items-start md:items-start xl:text-start lg:text-start md:text-start justify-end absolute xl:gap-24 xl:py-20 xl:-top-[36vh] xl:left-24 xl:translate-x-0 lg:gap-20 lg:py-16 lg:-top-[18vh] lg:left-20 lg:translate-x-0 md:gap-10 md:py-12 md:-top-[25vh] md:left-16 md:translate-x-0 sm:gap-12 sm:py-10 sm:-top-[56vh] sm:left-[50%] sm:translate-x-[-50%] sm:items-center sm:text-center ss:gap-10 ss:py-10 ss:-top-[25vh] ss:left-[50%] ss:translate-x-[-50%] ss:items-center ss:text-center">
+        <div className="flex flex-col h-full w-full xl:items-start lg:items-start md:items-start xl:text-start lg:text-start md:text-start justify-end absolute xl:gap-24 xl:py-20 xl:-top-[36vh] xl:left-24 xl:translate-x-0 lg:gap-20 lg:py-16 lg:-top-[18vh] lg:left-20 lg:translate-x-0 md:gap-10 md:py-12 md:-top-[25vh] md:left-16 md:translate-x-0 sm:items-center sm:text-center ss:gap-10 ss:py-10 ss:-top-[25vh] ss:left-[50%] ss:translate-x-[-50%] ss:items-center ss:text-center">
           <div>
-            <h1 className={`${font.Clash_display_d4bold} text-white`}>Howdy Savvy!</h1>
-            <p className={`${font.Clash_display_h5regular} text-white`}>Discover enormous projects at our showcase</p>
+            <h1 className={`${font.Clash_display_d4bold} text-white drop-shadow-md`}>Howdy Savvy!</h1>
+            <p className={`${font.Clash_display_h5regular} text-white drop-shadow-md`}>Discover enormous projects at our showcase</p>
           </div>
           <Link href="/discover">
-            <button className="w-fit xl:px-12 xl:py-6 border-[1px] border-solid border-slate-300 rounded-xl lg:px-10 lg:py-6 md:px-8 md:py-4 sm:px-6 sm:py-3 ss:px-4 ss:py-2"> 
-              <h4 className={`${font.Clash_display_h5bold} text-white`}>DISCOVER</h4>
+            <button className="w-fit xl:px-12 xl:py-6 border-[1px] border-solid border-slate-300 rounded-xl lg:px-10 lg:py-6 md:px-8 md:py-4 ss:px-6 ss:py-3"> 
+              <h4 className={`${font.Clash_display_h5bold} text-white hidden md:block`}>DISCOVER</h4>
+              <h4 className={`${font.Clash_display_h6bold} text-white block md:hidden`}>DISCOVER</h4>
             </button>
           </Link>
         </div>
diff --git a/src/components/static/Footer.js b/src/components/static/Footer.js
index 8726ba7..fb25451 100644
--- a/src/components/static/Footer.js
+++ b/src/components/static/Footer.js
@@ -14,8 +14,9 @@ export default function Footer({ transparent }) {
         <div className="flex">
           <div className="flex xl:gap-2 lg:gap-2 md:gap-2 sm:gap-2 ss:gap- items-center">
             <Link href="/credits">
-              <button className="flex items-center h-fit xl:px-9 lg:px-9 md:px-9 sm:px-9 ss:px-4 xl:py-3 lg:py-3 md:py-3 sm:py-2 ss:py-1  border-solid rounded-xl bg-gradient-to-b from-[#22D3EE] to-[#0EA5E9] transition ease-out delay-100 hover:to-[#22D3EE] hover:shadow-[0px_0px_12px_.5px_#22d3ee] active:shadow-[0_0_0_0] active:scale-[.92] active:from-[rgb(6 182 212)] active:to-[rgb(6 182 212)] active:delay-150">
-                <h4 className={`${font.Satoshi_b2bold} text-white`}>Credits</h4>
+              <button className="flex items-center h-fit md:px-9 ss:px-4 md:py-3 ss:py-2 border-solid rounded-xl bg-gradient-to-b from-[#22D3EE] to-[#0EA5E9] transition ease-out delay-100 hover:to-[#22D3EE] hover:shadow-[0px_0px_12px_.5px_#22d3ee] active:shadow-[0_0_0_0] active:scale-[.92] active:from-[rgb(6 182 212)] active:to-[rgb(6 182 212)] active:delay-150">
+                <h4 className={`${font.Satoshi_b2bold} text-white hidden md:block`}>Credits</h4>
+                <h4 className={`${font.Satoshi_c2bold} text-white block md:hidden`}>Credits</h4>
               </button>
             </Link>
           </div>