diff --git a/components/about/Intro.tsx b/components/about/Intro.tsx
index 1c99f18..bd86db0 100644
--- a/components/about/Intro.tsx
+++ b/components/about/Intro.tsx
@@ -31,7 +31,7 @@ const AboutIntro = () => {
         </Link>
       </div>
       <div className="mx-auto mt-8 flex items-center justify-center gap-8">
-        <div className="h-full max-h-[160px] w-full max-w-[160px] overflow-hidden rounded-full border-2 border-black shadow-3d-small-reverse transition-all duration-300 hover:shadow-3d-reverse md:absolute md:top-1/3 md:-left-12 md:max-h-[200px] md:max-w-[200px] md:-translate-y-1/2 lg:left-4">
+        <div className="h-full max-h-[160px] w-full max-w-[160px] overflow-hidden rounded-full border-2 border-black shadow-3d-small-reverse transition-all duration-300 hover:shadow-3d-reverse md:absolute md:top-1/3 md:-left-12 md:max-h-[200px] md:max-w-[200px] md:-translate-y-1/2 lg:left-4 lg:top-[44%]">
           <Image
             src={IMAGE_SOURCE.ART_IMAGE}
             alt="(～￣▽￣)～"
@@ -40,7 +40,7 @@ const AboutIntro = () => {
             className="h-auto w-full object-contain"
           />
         </div>
-        <div className="h-full max-h-[160px] w-full max-w-[160px] overflow-hidden rounded-full border-2 border-black shadow-3d-small transition-all duration-300 hover:shadow-3d md:absolute md:top-1/4 md:-right-12 md:max-h-[200px] md:max-w-[200px] md:-translate-y-1/2 lg:right-4">
+        <div className="h-full max-h-[160px] w-full max-w-[160px] overflow-hidden rounded-full border-2 border-black shadow-3d-small transition-all duration-300 hover:shadow-3d md:absolute md:top-1/4 md:-right-12 md:max-h-[200px] md:max-w-[200px] md:-translate-y-1/2 lg:right-4 lg:top-[33%]">
           <Image
             src={IMAGE_SOURCE.PROFILE_IMAGE}
             alt="(～￣▽￣)～"
diff --git a/components/about/Resume.tsx b/components/about/Resume.tsx
index 629d4c0..aebdfba 100644
--- a/components/about/Resume.tsx
+++ b/components/about/Resume.tsx
@@ -36,7 +36,13 @@ const ResumeCard: React.FC<ResumeCardDataType> = ({
           />
         </Link>
         <div className="md:max-w-sm lg:max-w-lg">
-          <h3 className="mt-4 text-xl font-bold lg:text-2xl">{position}</h3>
+          <h3 className="mt-4 text-xl font-bold lg:text-2xl">{position},</h3>
+          <Link
+            href={website}
+            className="text-lg font-semibold underline-offset-2 transition-all duration-300 hover:text-portfolio-accent hover:underline"
+          >
+            {company}
+          </Link>
           <p className="mt-4 font-[Montserrat] text-sm font-semibold text-themes-txt_secondary lg:text-base">
             {description}
           </p>
@@ -57,7 +63,7 @@ const ResumeCard: React.FC<ResumeCardDataType> = ({
 
 const Resume = () => {
   return (
-    <div className="mx-auto mt-20 max-w-7xl px-5">
+    <div className="mx-auto my-20 max-w-7xl px-5">
       <h2 className="text-center text-3xl font-bold">
         Take a look at my{" "}
         <span className="leading-ti bg-portfolio-main px-1">resume</span>
diff --git a/components/landing/About.tsx b/components/landing/About.tsx
index b1d2ad5..338ac98 100644
--- a/components/landing/About.tsx
+++ b/components/landing/About.tsx
@@ -29,7 +29,7 @@ const About = () => {
       initial={{ opacity: 0, y: 20 }}
       whileInView={{ opacity: 1, y: 0 }}
       transition={{ delay: 0.4, type: "spring" }}
-      className="mx-auto mt-20 grid min-h-screen max-w-7xl scroll-mt-20 grid-cols-1 gap-16 px-5 text-center lg:mt-0 lg:grid-cols-2 lg:text-left"
+      className="mx-auto mt-20 grid min-h-screen max-w-7xl scroll-mt-20 grid-cols-1 gap-16 px-5 text-center lg:grid-cols-2 lg:text-left xl:mt-5"
     >
       <div className="order-last flex w-full items-center justify-center lg:order-none">
         <div className="h-full max-h-[32rem] w-full max-w-lg overflow-hidden rounded-full shadow-3d transition-all duration-300 hover:shadow-3d-hover">
diff --git a/components/landing/Experience.tsx b/components/landing/Experience.tsx
index c45af17..ca86d6d 100644
--- a/components/landing/Experience.tsx
+++ b/components/landing/Experience.tsx
@@ -41,7 +41,13 @@ const ExperienceCard: React.FC<ExperienceDataType> = ({
       </div>
       <hr className="border-2 border-b-black" />
       <div className="px-10 py-5">
-        <h3 className="text-2xl font-semibold">{position}</h3>
+        <h3 className="text-2xl font-semibold">{position},</h3>
+        <Link
+          href={website}
+          className="text-lg font-semibold underline-offset-2 transition-all duration-300 hover:text-portfolio-accent hover:underline"
+        >
+          {company}
+        </Link>
         <p className="mt-4 font-semibold text-themes-txt_secondary">
           {description}
         </p>
diff --git a/components/landing/Intro.tsx b/components/landing/Intro.tsx
index 1cb958c..ef1f5c9 100644
--- a/components/landing/Intro.tsx
+++ b/components/landing/Intro.tsx
@@ -30,16 +30,18 @@ const Intro = () => {
       <div className="mx-auto flex w-full max-w-lg flex-col justify-center text-center md:max-w-[640px] md:text-left">
         <h1 className="text-3xl font-semibold sm:text-4xl md:text-7xl">
           I&apos;m{" "}
-          <span className="whitespace-nowrap bg-portfolio-main px-1 text-white">
+          <span className="whitespace-nowrap bg-portfolio-main px-1 leading-tight text-white">
             Kunal Keshan
           </span>
           ,
-          <div className="mt-4">
+          <div className="mt-4 leading-tight">
             a <Typewriter options={typewriterOptions} />
           </div>
           <div className="mt-4">
             from{" "}
-            <span className="bg-portfolio-accent px-1 text-white">Chennai</span>
+            <span className="bg-portfolio-accent px-1 leading-tight text-white">
+              Chennai
+            </span>
           </div>
         </h1>
         <h2 className="mt-4 font-[Montserrat] font-semibold text-themes-txt_secondary md:text-lg">
diff --git a/components/landing/Portfolio.tsx b/components/landing/Portfolio.tsx
index e9f166b..10d256b 100644
--- a/components/landing/Portfolio.tsx
+++ b/components/landing/Portfolio.tsx
@@ -104,7 +104,7 @@ const Portfolio: React.FC<{ showTill?: number }> = ({ showTill }) => {
       initial={{ opacity: 0, y: 20 }}
       whileInView={{ opacity: 1, y: 0 }}
       transition={{ delay: 0.4, type: "spring" }}
-      className="mx-auto mt-20 min-h-screen max-w-7xl px-5 lg:mt-0"
+      className="mx-auto mt-20 min-h-screen max-w-7xl px-5 xl:mt-5"
     >
       <h2 className="group relative mx-auto max-w-[26ch] text-center text-5xl font-semibold">
         Some fine additions to my{" "}
diff --git a/components/landing/Services.tsx b/components/landing/Services.tsx
index 5208f98..32f8bb8 100644
--- a/components/landing/Services.tsx
+++ b/components/landing/Services.tsx
@@ -18,10 +18,7 @@ const ServiceCard: React.FC<ServiceDataType> = ({
   description,
 }) => {
   return (
-    <Link
-      href="/#services"
-      className="group min-h-[460px] w-full overflow-hidden rounded-xl border-3 border-black transition-all duration-300 hover:-translate-y-2 hover:shadow-3d"
-    >
+    <div className="group min-h-[460px] w-full overflow-hidden rounded-xl border-3 border-black transition-all duration-300 hover:-translate-y-2 hover:shadow-3d">
       <div className="flex min-h-[240px] w-full items-center justify-center bg-themes-bg_secondary">
         <Image
           src={image}
@@ -35,7 +32,7 @@ const ServiceCard: React.FC<ServiceDataType> = ({
         <h3 className="text-2xl font-semibold">{title}</h3>
         <p className="mt-4 text-justify text-sm">{description}</p>
       </div>
-    </Link>
+    </div>
   );
 };
 
diff --git a/components/landing/Testimonials.tsx b/components/landing/Testimonials.tsx
index 8a92132..85c771e 100644
--- a/components/landing/Testimonials.tsx
+++ b/components/landing/Testimonials.tsx
@@ -8,6 +8,7 @@ import { FaArrowLeft, FaArrowRight, FaQuoteLeft } from "react-icons/fa";
 import MemeTooltip from "../reusable/MemeTooltip";
 import TRIBUTES from "../../data/tributes";
 import Image from "next/image";
+import Link from "next/link";
 
 const TributesWithTestimonials = TRIBUTES.filter(
   (tribute) => tribute.testimonial !== undefined
@@ -15,12 +16,26 @@ const TributesWithTestimonials = TRIBUTES.filter(
 
 type TributeDataType = typeof TRIBUTES[number];
 
-const TestimonialCard: React.FC<TributeDataType> = ({
-  testimonial,
+const TestimonialName: React.FC<TributeDataType> = ({
   name,
-  company,
-  image,
+  slug,
+  feature,
 }) => {
+  return feature ? (
+    <Link
+      href={`/tributes/${slug}`}
+      className="text-lg font-semibold text-portfolio-accent text-opacity-80 underline-offset-2 transition-all duration-300 hover:text-opacity-100 hover:underline"
+    >
+      {name}
+    </Link>
+  ) : (
+    <p className="text-lg font-semibold">{name}</p>
+  );
+};
+
+const TestimonialCard: React.FC<TributeDataType> = (props) => {
+  const { testimonial, name, company, image } = props;
+
   return (
     <div className="relative mx-auto mt-12 flex min-h-[400px] max-w-4xl flex-col rounded-xl border-3 border-black p-10 font-[Montserrat] lg:pr-72">
       <div className="absolute -top-10 rounded-full bg-black p-5 text-3xl text-white">
@@ -32,7 +47,7 @@ const TestimonialCard: React.FC<TributeDataType> = ({
         </p>
         <div className="mt-4 flex w-full items-center justify-between lg:max-w-md">
           <div className="flex flex-col gap-2">
-            <p className="text-lg font-semibold">{name}</p>
+            <TestimonialName {...props} />
             <p>
               {company.position} at {company.name}
             </p>
diff --git a/components/layouts/Footer.tsx b/components/layouts/Footer.tsx
index 12b3b56..1eafe2d 100644
--- a/components/layouts/Footer.tsx
+++ b/components/layouts/Footer.tsx
@@ -25,6 +25,10 @@ const Footer = () => {
       name: "Contact",
       url: "/contact",
     },
+    {
+      name: "Resume",
+      url: "/resume",
+    },
     {
       name: "Links",
       url: "/links",
diff --git a/components/layouts/Navbar.tsx b/components/layouts/Navbar.tsx
index 595f1e8..9309905 100644
--- a/components/layouts/Navbar.tsx
+++ b/components/layouts/Navbar.tsx
@@ -41,7 +41,7 @@ const Navbar = () => {
       whileInView={{ opacity: 1, y: 0 }}
       transition={{ delay: 0.2, type: "spring" }}
     >
-      <div className="mx-auto flex w-full max-w-3xl items-center justify-between rounded-xl border-2 border-black bg-white py-3 px-4 shadow-3d">
+      <div className="z-50 mx-auto flex w-full max-w-3xl items-center justify-between rounded-xl border-2 border-black bg-white py-3 px-4 shadow-3d">
         <Link
           href="/"
           className="h-12 w-12 overflow-hidden rounded-full transition-all duration-300 hover:scale-95"
@@ -54,7 +54,7 @@ const Navbar = () => {
             className="h-full w-full object-cover"
           />
         </Link>
-        <ul className="hidden gap-6 text-[18px] font-semibold md:flex">
+        <ul className="z-50 hidden gap-6 text-[18px] font-semibold md:flex">
           {navOptions.map((option, index) => (
             <li
               key={index}
diff --git a/components/reusable/MemeTooltip.tsx b/components/reusable/MemeTooltip.tsx
index 42f4354..12ce5ac 100644
--- a/components/reusable/MemeTooltip.tsx
+++ b/components/reusable/MemeTooltip.tsx
@@ -14,7 +14,7 @@ interface MemeTooltipProps {
 const MemeTooltip: React.FC<MemeTooltipProps> = ({ image }) => {
   return (
     <div
-      className="absolute -top-36 left-1/2 h-40 w-40 -translate-x-1/2 bg-contain bg-no-repeat opacity-0 transition-all duration-300 group-hover:opacity-100"
+      className="absolute -top-36 left-1/2 hidden h-40 w-40 -translate-x-1/2 bg-contain bg-no-repeat opacity-0 transition-all duration-300 group-hover:opacity-100"
       style={{
         backgroundImage: `url('${image}')`,
       }}
diff --git a/data/skills.ts b/data/skills.ts
index 3e54785..d0ac50c 100644
--- a/data/skills.ts
+++ b/data/skills.ts
@@ -27,7 +27,7 @@ const SKILLS: Skill[] = [
   {
     name: "Next.js",
     image:
-      "https://res.cloudinary.com/kunalkeshan/image/upload/v1675439306/Portfolio/skills/next_ompczl.svg",
+      "https://res.cloudinary.com/kunalkeshan/image/upload/v1675740659/Portfolio/skills/nextjs_uc4a9b.png",
   },
   {
     name: "React.js",
diff --git a/data/tributes.ts b/data/tributes.ts
index a8b397f..5924aab 100644
--- a/data/tributes.ts
+++ b/data/tributes.ts
@@ -7,11 +7,12 @@ interface Tribute {
   website: string;
   image: string;
   testimonial?: string;
-  socials: {
-    linkedin: string;
-    twitter: string;
-    instagram: string;
-    youtube: string;
+  socials?: {
+    linkedin?: string;
+    twitter?: string;
+    instagram?: string;
+    youtube?: string;
+    github?: string;
   };
   company: {
     name: string;
@@ -20,6 +21,9 @@ interface Tribute {
     website: string;
     logo: string;
   };
+  feature?: boolean;
+  slug?: string;
+  intro?: string;
 }
 
 // Tributes Container
@@ -33,8 +37,8 @@ const TRIBUTES: Tribute[] = [
       "Kunal is an innovative and strategic thinker, constantly seeking new and creative solutions to the challenges faced. He has a keen understanding of the market and a strong sense of what it takes to build a successful product. He was able to build a strong and effective team, and his leadership skills inspired and motivated everyone to perform at their best.\n Kunal is a hard worker and always goes the extra mile to ensure that his work is of the highest quality. His commitment to excellence was evident in every project he tackled, and he was always eager to share his knowledge and expertise with others.",
     socials: {
       linkedin: "https://www.linkedin.com/in/kumarrohan9724/",
-      twitter: "",
-      instagram: "",
+      twitter: "https://twitter.com/kumarrohan9724",
+      instagram: "https://www.instagram.com/kumarrohan9724/",
       youtube: "",
     },
     company: {
@@ -44,17 +48,21 @@ const TRIBUTES: Tribute[] = [
       website: "https://rentyaar.com",
       logo: "https://res.cloudinary.com/kunalkeshan/image/upload/v1675447141/Portfolio/experience/RENT_YAAR_4_mbi5ek.png",
     },
+    feature: true,
+    slug: "rohan-kumar",
+    intro:
+      "Rohan Kumar, a natural leader, charming person, and visionary entrepreneur. Founder of Rentyaar and The Starterseed, changing students' lives for the better.",
   },
   {
     name: "GS Thina",
-    website: "https://www.linkedin.com/in/gsthina/",
+    website: "https://gsthina.me",
     image:
       "https://res.cloudinary.com/kunalkeshan/image/upload/v1675464441/Portfolio/tributes/gs_thina_n80sqg.jpg",
     socials: {
       linkedin: "https://www.linkedin.com/in/gsthina/",
-      twitter: "",
-      instagram: "",
-      youtube: "",
+      twitter: "https://twitter.com/gsthina_me",
+      instagram: "https://www.instagram.com/gsthina.mentor/",
+      youtube: "https://www.youtube.com/@gsthina",
     },
     company: {
       name: "Think-Digital",
@@ -63,6 +71,25 @@ const TRIBUTES: Tribute[] = [
       website: "https://think-digital.com",
       logo: "https://res.cloudinary.com/kunalkeshan/image/upload/v1675428847/Portfolio/experience/think_digital_logo_txo2sk.png",
     },
+    feature: true,
+    slug: "gsthina",
+    intro:
+      "GS Thina, the mentor who empowers college students with skills and industry exposure to reach their full potential 🚀",
+  },
+  {
+    name: "Raman Shekhawat",
+    website: "https://www.linkedin.com/in/raman-shekhawat-1013381ba/",
+    image:
+      "https://res.cloudinary.com/kunalkeshan/image/upload/v1675741966/Portfolio/tributes/Raman_Shekhawat_yzqbis.jpg",
+    testimonial:
+      "Having started college life with a friend like Kunal Keshan makes me the perfect person to help you understand him. He is one of the most valuable assets in the developer community. With a dash of hard work and creativity, this fellow has crossed all limits of productivity. Not only will he help you develop your product with perfection, but also with efforts beyond your expectations. Talking about his teamwork, Kunal has an ear for every voice. He is a good listener and believes in empathy. All in all, he is a perfect package you would not want to miss out on while building your team.",
+    company: {
+      name: "Think-Digital",
+      description: "",
+      position: "Web Developer",
+      website: "https://think-digital.com",
+      logo: "https://res.cloudinary.com/kunalkeshan/image/upload/v1675428847/Portfolio/experience/think_digital_logo_txo2sk.png",
+    },
   },
 ];
 
diff --git a/layouts/PublicLayout.tsx b/layouts/PublicLayout.tsx
index e40aee4..4f5cb5e 100644
--- a/layouts/PublicLayout.tsx
+++ b/layouts/PublicLayout.tsx
@@ -12,7 +12,7 @@ import Headroom from "react-headroom";
 const PublicLayout: NextPage<PropsWithChildren> = ({ children }) => {
   return (
     <>
-      <Headroom>
+      <Headroom className="z-50">
         <Navbar />
       </Headroom>
       <main className="w-full">{children}</main>
diff --git a/package.json b/package.json
index 2031014..550d69b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kunalkeshan-dev",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/pages/resume.tsx b/pages/resume.tsx
index a58c378..8827284 100644
--- a/pages/resume.tsx
+++ b/pages/resume.tsx
@@ -7,6 +7,7 @@ import React from "react";
 import Head from "next/head";
 import PublicLayout from "../layouts/PublicLayout";
 import WorkInProgress from "../components/reusable/WorkInProgress";
+import Resume from "../components/about/Resume";
 
 const ResumePage = () => {
   return (
@@ -15,7 +16,7 @@ const ResumePage = () => {
         <title>Resume | Kunal Keshan</title>
       </Head>
       <PublicLayout>
-        <WorkInProgress />
+        <Resume />
       </PublicLayout>
     </>
   );
diff --git a/pages/tributes/[tributeSlug]/index.tsx b/pages/tributes/[tributeSlug]/index.tsx
new file mode 100644
index 0000000..3ec79d0
--- /dev/null
+++ b/pages/tributes/[tributeSlug]/index.tsx
@@ -0,0 +1,67 @@
+/**
+ * Tributes Page
+ */
+
+// Dependencies
+import React from "react";
+import Head from "next/head";
+import PublicLayout from "../../../layouts/PublicLayout";
+import WorkInProgress from "../../../components/reusable/WorkInProgress";
+import { motion } from "framer-motion";
+import TRIBUTES from "../../../data/tributes";
+import {
+  GetServerSideProps,
+  InferGetServerSidePropsType,
+  NextPage,
+} from "next";
+
+const IndividualTributePage: NextPage<
+  InferGetServerSidePropsType<typeof getServerSideProps>
+> = ({ tribute }) => {
+  const { name } = tribute;
+
+  return (
+    <>
+      <Head>
+        <title>{name}</title>
+      </Head>
+      <PublicLayout>
+        <motion.section
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.4, type: "spring" }}
+          className="mx-auto mt-10 mb-20 max-w-7xl px-5"
+        >
+          <WorkInProgress />
+        </motion.section>
+      </PublicLayout>
+    </>
+  );
+};
+
+export default IndividualTributePage;
+
+type Tribute = typeof TRIBUTES[number];
+
+export const getServerSideProps: GetServerSideProps<{
+  tribute: Tribute;
+}> = async (context) => {
+  const { tributeSlug } = context.query;
+
+  const tribute = TRIBUTES.find(
+    (trib) => trib.slug === tributeSlug && trib.feature
+  );
+
+  if (!tribute) {
+    return {
+      redirect: {
+        destination: "/projects",
+        permanent: false,
+      },
+    };
+  }
+
+  return {
+    props: { tribute },
+  };
+};
diff --git a/pages/tributes/index.tsx b/pages/tributes/index.tsx
index 1ea1193..cbe5096 100644
--- a/pages/tributes/index.tsx
+++ b/pages/tributes/index.tsx
@@ -6,8 +6,120 @@
 import React from "react";
 import Head from "next/head";
 import PublicLayout from "../../layouts/PublicLayout";
-import WorkInProgress from "../../components/reusable/WorkInProgress";
 import { motion } from "framer-motion";
+import TRIBUTES from "../../data/tributes";
+import Link from "next/link";
+import Image from "next/image";
+import {
+  FaInstagram,
+  FaTwitter,
+  FaGlobe,
+  FaLinkedin,
+  FaYoutube,
+} from "react-icons/fa";
+
+const TributeIndividuals = TRIBUTES.filter((tribute) => tribute.feature);
+
+type TributeDataType = typeof TRIBUTES[number];
+
+const TributeCard: React.FC<TributeDataType> = ({
+  slug,
+  name,
+  company,
+  image,
+  intro,
+  socials,
+  website,
+}) => {
+  const socialsInfo = [
+    {
+      name: "Website",
+      Icon: FaGlobe,
+      url: website,
+    },
+    {
+      name: "LinkedIn",
+      Icon: FaLinkedin,
+      url: socials!.linkedin,
+    },
+    {
+      name: "Instagram",
+      Icon: FaInstagram,
+      url: socials!.instagram,
+    },
+    {
+      name: "Twitter",
+      Icon: FaTwitter,
+      url: socials!.twitter,
+    },
+    {
+      name: "YouTube",
+      Icon: FaYoutube,
+      url: socials!.youtube,
+    },
+  ];
+
+  return (
+    <li className="z-10 flex w-full flex-col gap-4 rounded-xl border-3 border-black bg-white px-10 py-5 shadow-3d">
+      <div className="relative z-20 mx-auto flex w-full items-center justify-center">
+        <Link
+          href={`/tributes/${slug}`}
+          className="flex h-full max-h-[200px] max-w-[200px] items-center justify-center overflow-hidden rounded-full border-2 border-black bg-white shadow-3d-small-reverse transition-all duration-300 hover:-translate-y-1 hover:shadow-3d-reverse"
+        >
+          <Image
+            src={image}
+            width={100}
+            height={100}
+            alt={name}
+            className="h-auto w-full object-contain"
+          ></Image>
+        </Link>
+        <Link
+          href={`/tributes/${slug}`}
+          className="absolute bottom-0 right-[40px] -z-10 flex h-full max-h-[80px] max-w-[80px] items-center justify-center overflow-hidden rounded-full border-2 border-black bg-white shadow-3d-small transition-all duration-300 hover:z-0 hover:-translate-y-1 hover:shadow-3d"
+        >
+          <Image
+            src={company.logo}
+            width={100}
+            height={100}
+            alt={company.name}
+            className="h-auto w-full object-contain"
+          ></Image>
+        </Link>
+      </div>
+      <h2 className="text-center text-lg font-bold md:text-xl">
+        {name}{" "}
+        <div className="text-base md:text-lg">
+          {company.position} @{company.name}
+        </div>
+      </h2>
+      <p className="my-4 text-justify font-[Montserrat] text-sm font-semibold md:text-base">
+        {intro}
+      </p>
+      <Link
+        href={`/tributes/${slug}`}
+        className="mt-auto block w-full rounded-lg bg-themes-txt_primary px-8 py-4 text-center font-bold text-themes-bg_primary transition-all duration-300 hover:-translate-y-1 hover:bg-portfolio-accent"
+      >
+        Learn more
+      </Link>
+      <div className="mt-4 flex flex-wrap gap-4">
+        {socialsInfo.map(
+          (social, index) =>
+            social.url && (
+              <Link
+                href={social.url}
+                key={index}
+                target="_blank"
+                className="rounded-full border-2 border-portfolio-accent bg-portfolio-accent bg-opacity-80 p-2 text-xl text-white shadow-3d-small transition-all duration-300 hover:-translate-y-1 hover:bg-opacity-100 hover:shadow-3d"
+              >
+                <social.Icon />
+              </Link>
+            )
+        )}
+      </div>
+    </li>
+  );
+};
 
 const TributesPage = () => {
   return (
@@ -22,7 +134,25 @@ const TributesPage = () => {
           transition={{ delay: 0.4, type: "spring" }}
           className="mx-auto mt-10 mb-20 max-w-7xl px-5"
         >
-          <WorkInProgress />
+          <h1 className="text-center text-3xl font-bold md:text-5xl">
+            My Tribute to those{" "}
+            <span className="bg-portfolio-main px-1 leading-tight">
+              who shaped
+            </span>{" "}
+            who I am today
+          </h1>
+          <p className="mt-4 text-center font-[Montserrat] text-base font-semibold text-themes-txt_secondary md:text-lg">
+            I&apos;ve been fortunate to have had many amazing individuals cross
+            paths with me and play a crucial role in my growth and shaping me
+            into who I am today. This page is my tribute to those who have made
+            a lasting impact on my life and inspired me to keep pushing forward.
+            Join me as I take a walk down memory lane and share my story.
+          </p>
+          <ul className="mt-8 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+            {TributeIndividuals.map((tribute, index) => (
+              <TributeCard key={index} {...tribute} />
+            ))}
+          </ul>
         </motion.section>
       </PublicLayout>
     </>