diff --git a/components/GridItems/Certificate.tsx b/components/GridItems/Certificate.tsx
index 5678b3a..b8e23e1 100644
--- a/components/GridItems/Certificate.tsx
+++ b/components/GridItems/Certificate.tsx
@@ -1,7 +1,7 @@
-import { CombinedInterfaces, LanguageItem } from "@/components/Types";
+import { CombinedInterfaces } from "@/components/Types";
 import { motion } from "framer-motion";
 
-const Certificates = ({ item }: { item: CombinedInterfaces }) => {
+const Certificates = ({ item, handleClick }: { item: CombinedInterfaces, handleClick?: () => {} }) => {
   return (
     <motion.div
       className="w-full h-full relative flex items-end"
@@ -22,7 +22,11 @@ const Certificates = ({ item }: { item: CombinedInterfaces }) => {
                     className="relative inline-block"
                     whileHover={{ scale: 1.1 }}
                   >
-                    <div className="px-2 py-1 text-sm font-medium bg-white rounded-lg dark:bg-neutral-900 cursor-pointer">
+                    {/* TODO: handleclick to redirection */}
+                    <div
+                      className="px-2 py-1 text-sm font-medium bg-white rounded-lg dark:bg-neutral-900 cursor-pointer"
+                      onClick={handleClick}
+                    >
                       {language.title}
                       <motion.span
                         className="absolute top-0 left-0 bg-white rounded-full opacity-50"
diff --git a/components/GridItems/Languages.tsx b/components/GridItems/Languages.tsx
index ec8df1e..502f85f 100644
--- a/components/GridItems/Languages.tsx
+++ b/components/GridItems/Languages.tsx
@@ -7,12 +7,12 @@ import { useState } from "react";
 const Languages = ({ item }: { item: CombinedInterfaces }) => {
   const [image, setImage] = useState(item.image);
   const [gradient, setGradient] = useState(true);
-  
+
   const setTheImage = (imageItem: LanguageItem | string) => {
     if (typeof imageItem === "object") {
       const title = imageItem.title;
       const languageImage = imageItem.languageImage;
-      
+
       if (Object.values(LanguageTitle).includes(title as LanguageTitle)) {
         setImage(languageImage);
       } else {
@@ -27,20 +27,14 @@ const Languages = ({ item }: { item: CombinedInterfaces }) => {
   const setCode = (language: LanguageItem) => {
     let codeText = "";
     switch (language.title) {
-      case LanguageTitle.Typescript:
-        codeText = LanguageCode.JavascriptHelloWorld;
-        break;
-      case LanguageTitle.Django:
-        codeText = LanguageCode.DjangoHelloWorld;
+      case LanguageTitle.TyAndPy:
+        codeText = LanguageCode.TyPy;
         break;
-      case LanguageTitle.Nodejs:
-        codeText = LanguageCode.NodejsHelloWorld;
+      case LanguageTitle.Coffee:
+        codeText = LanguageCode.Cofee;
         break;
-      case LanguageTitle.Python:
-        codeText = LanguageCode.PythonHelloWorld;
-        break;
-      case LanguageTitle.YAML:
-        codeText = LanguageCode.YAMLHelloWorld;
+      case LanguageTitle.Github:
+        codeText = LanguageCode.Github;
         break;
       case LanguageTitle.JACKIE:
         codeText = LanguageCode.JackieHelloWorld;
@@ -72,33 +66,20 @@ const Languages = ({ item }: { item: CombinedInterfaces }) => {
     >
       <div className="flex flex-col w-full h-full overflow-hidden rounded-3xl">
         {displayText.length > 0 && (
-          <div className="flex items-center w-full h-full overflow-hidden p-8 justify-center align-center mt-56">
+          <div className="flex items-start w-full h-full overflow-hidden p-8 justify-start align-center">
             <motion.div
-              className="z-10 bg-white dark:bg-neutral-900 flex items-start p-2 text-sm font-medium text-black dark:text-white h-full rounded-lg w-full"
+              className="z-10 bg-white dark:bg-neutral-900 flex items-start p-3 text-sm font-medium text-black dark:text-white h-16 rounded-lg w-full"
               initial={{ opacity: 0.5 }}
               animate={{ opacity: 0.9 }}
-              style={{ whiteSpace: 'pre' }}
+              style={{ whiteSpace: "pre" }}
             >
-              <motion.span
-                className="typing-text"
-                animate={{
-                  opacity: [0, 1, 1, 1, 0],
-                  transition: {
-                    duration: 2,
-                    times: [0, 0.25, 0.5, 0.75, 1],
-                    repeat: Infinity,
-                    repeatDelay: 1,
-                  },
-                }}
-              >
-                {displayText}
-              </motion.span>
+              <motion.span className="typing-text">{displayText}</motion.span>
             </motion.div>
           </div>
         )}
         <div className="flex flex-col items-end justify-end w-full h-full overflow-hidden rounded-3xl p-1">
           {/* Overlay */}
-          <div className="absolute inset-0 z-10 bg-gradient-to-b from-transparent via-neutral-950/60 to-neutral-950/90" />
+          <div className="absolute inset-0 z-10 bg-gradient-to-b from-transparent via-neutral-950/30 to-neutral-950/30" />
           {/* Image */}
           <Image
             className={`z-0 object-cover object-center w-full h-full`}
@@ -109,7 +90,9 @@ const Languages = ({ item }: { item: CombinedInterfaces }) => {
 
           {/* Content */}
           <div className="relative z-20 w-full p-4 space-y-3 md:p-8">
-            <div className="text-sm font-medium text-white">{item.title}</div>
+            <div className="text-sm font-medium text-white mb-72">
+              {item.title}
+            </div>
             <div className="flex flex-wrap items-center gap-3">
               {item.languages?.map((language, index) => {
                 return (
diff --git a/components/GridItems/Timeline.tsx b/components/GridItems/Timeline.tsx
new file mode 100644
index 0000000..042f153
--- /dev/null
+++ b/components/GridItems/Timeline.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+interface ExperienceItem {
+  title: string;
+  details: string[];
+  type: 'lor' | 'hackathon' | 'certificate' | string;
+}
+
+interface TimelineItemProps {
+  item: ExperienceItem;
+  index: number;
+}
+
+const TimelineItem: React.FC<TimelineItemProps> = ({ item, index }) => {
+  const isEven = index % 2 === 0;
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 50 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5, delay: index * 0.1 }}
+      className={`flex ${isEven ? 'justify-start' : 'justify-end'} mb-8`}
+    >
+      <div className={`w-5/12 ${isEven ? 'pr-8' : 'pl-8'}`}>
+        <motion.div
+          whileHover={{ scale: 1.03 }}
+          className="bg-gradient-to-br from-purple-600 to-pink-500 p-6 rounded-xl shadow-lg"
+        >
+          <h3 className="text-xl font-bold text-white mb-2">{item.title}</h3>
+          <ul className="space-y-2">
+            {item.details.map((detail, idx) => (
+              <li key={idx} className="text-white text-sm bg-black bg-opacity-20 rounded-lg p-2">
+                {detail}
+              </li>
+            ))}
+          </ul>
+        </motion.div>
+      </div>
+    </motion.div>
+  );
+};
+
+interface ImprovedTimelineProps {
+  experienceItems: ExperienceItem[];
+}
+
+const ImprovedTimeline: React.FC<ImprovedTimelineProps> = ({ experienceItems }) => {
+  return (
+    <div className="container mx-auto px-4 py-16">
+      <div className="relative">
+        <div className="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-purple-500 to-pink-500"></div>
+        {experienceItems.map((item, index) => (
+          <TimelineItem key={`${item.title}-${index}`} item={item} index={index} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ImprovedTimeline;
\ No newline at end of file
diff --git a/components/LeftPanel/index.tsx b/components/LeftPanel/index.tsx
index c8feb84..0174509 100644
--- a/components/LeftPanel/index.tsx
+++ b/components/LeftPanel/index.tsx
@@ -22,7 +22,7 @@ const LeftPanel = ({ clickedCategory, handleInteraction }: LeftPanelProps) => {
           <MiniButton
             buttonText={LeftPanelOptions.ABOUT}
             category={IconTypes.SEARCH}
-            href={`#${LeftPanelOptions.ABOUT}`}
+            href={`#`}
             clickedCategory={clickedCategory}
             setClicked={setClicked}
             clicked={clicked}
@@ -30,7 +30,7 @@ const LeftPanel = ({ clickedCategory, handleInteraction }: LeftPanelProps) => {
           <MiniButton
             buttonText={LeftPanelOptions.EXPERIENCE}
             category={IconTypes.ALBUM}
-            href={`#${LeftPanelOptions.EXPERIENCE}`}
+            href={`#`}
             clickedCategory={clickedCategory}
             setClicked={setClicked}
             clicked={clicked}
@@ -38,7 +38,7 @@ const LeftPanel = ({ clickedCategory, handleInteraction }: LeftPanelProps) => {
           <MiniButton
             buttonText={LeftPanelOptions.ACHIEVEMENTS}
             category={IconTypes.MEDAL}
-            href={`#${LeftPanelOptions.ACHIEVEMENTS}`}
+            href={`#`}
             clickedCategory={clickedCategory}
             setClicked={setClicked}
             clicked={clicked}
@@ -46,7 +46,7 @@ const LeftPanel = ({ clickedCategory, handleInteraction }: LeftPanelProps) => {
           <MiniButton
             buttonText={LeftPanelOptions.PROJECTS}
             category={IconTypes.PROJECTS}
-            href={`#${LeftPanelOptions.PROJECTS}`}
+            href={`#`}
             clickedCategory={clickedCategory}
             setClicked={setClicked}
             clicked={clicked}
@@ -54,11 +54,14 @@ const LeftPanel = ({ clickedCategory, handleInteraction }: LeftPanelProps) => {
         </div>
 
         <div
-          className="hidden mt-6 xl:flex"
+          className="hidden mt-6 xl:flex cursor-pointer relative group"
           onClick={handleInteraction}
           onTouchStart={handleInteraction}
         >
-          <Footer/>
+          <Footer />
+          <span className="absolute top-full left-1/2 transform -translate-x-1/2 mt-2 px-2 py-1 bg-gray-800 text-white text-sm rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+            Hidden element... SSSHHHHH...🤫
+          </span>
         </div>
       </div>
     </div>
diff --git a/components/RightPanel/index.tsx b/components/RightPanel/index.tsx
index b8d393f..9913261 100644
--- a/components/RightPanel/index.tsx
+++ b/components/RightPanel/index.tsx
@@ -70,39 +70,112 @@ const RightPanel = ({ section }: { section: string }) => {
       )}
       {section === LeftPanelOptions.EXPERIENCE && (
         <>
-          <div
-            ref={scope}
-            className="w-full grid-cols-4 xl:gap-10 gap-6 xl:py-10 py-6 xl:px-2 xl:overflow-y-auto auto-rows-[75px]"
-          >
-            <div className="mb-4 ml-4 mt-4 flex items-center border-neutral-100 dark:border-neutral-800 cursor-pointer">
-              <motion.div whileHover={{ scale: 1.1 }}>
-                <div className="shadow-md text-center justify-center w-full px-4 py-2 text-sm font-medium border border-neutral-100 dark:border-neutral-800 flex items-center gap-1 rounded-lg p-1">
-                  {returnCategory(IconTypes.ALBUM)}
-                  {LeftPanelOptions.EXPERIENCE}
+          <div className="relative">
+            {/* Mobile Screens */}
+            <div className="block xl:hidden">
+              <div
+                ref={scope}
+                className="w-full grid-cols-4 gap-6 py-6 px-2 overflow-y-auto auto-rows-[75px]"
+              >
+                <div className="mb-4 ml-4 mt-4 flex items-center border-neutral-100 dark:border-neutral-800 cursor-pointer">
+                  <motion.div whileHover={{ scale: 1.1 }}>
+                    <div className="shadow-md text-center justify-center w-full px-4 py-2 text-sm font-medium border border-neutral-100 dark:border-neutral-800 flex items-center gap-1 rounded-lg p-1">
+                      {returnCategory(IconTypes.ALBUM)}
+                      {LeftPanelOptions.EXPERIENCE}
+                    </div>
+                  </motion.div>
                 </div>
-              </motion.div>
+                <div className="w-full grid-cols-4 gap-6 py-4 px-2 overflow-y-auto auto-rows-[75px]">
+                  {siteConfig.experienceItems.map((item, index) => (
+                    <div className="mb-8" key={item.title + item.type + index}>
+                      <GridItem
+                        key={item.title + item.type + index}
+                        size={item.layout}
+                      >
+                        {item.type === "certificate" ? (
+                          <Certificates item={item} />
+                        ) : (
+                          <div>Need to create new component type.</div>
+                        )}
+                      </GridItem>
+                    </div>
+                  ))}
+                </div>
+              </div>
             </div>
-            <div className="w-full grid-cols-4 xl:gap-8 gap-6 xl:py-6 py-4 xl:px-2 xl:overflow-y-auto auto-rows-[75px]">
-              {siteConfig.experienceItems.map((item, index) => {
-                return (
-                  <div className="mb-8" key={item.title + item.type + index}>
-                    <GridItem
-                      key={item.title + item.type + index}
-                      size={item.layout}
+
+            {/* Desktop Screens */}
+            <div className="hidden xl:block w-full overflow-y-auto py-10 relative">
+            <div className="absolute inset-0 left-1/2 transform -translate-x-1/2 w-1 bg-gray-300 dark:bg-neutral-800 z-0" style={{height:"110vh"}}></div>
+              <div className="space-y-20 px-8">
+                <div className="ml-4 mt-2 flex items-center border-neutral-100 dark:border-neutral-800 cursor-pointer" style={{marginBottom: "-4rem"}}>
+                  <motion.div whileHover={{ scale: 1.1 }}>
+                    <div className="shadow-md text-center justify-center w-full px-4 py-2 text-sm font-medium border border-neutral-100 dark:border-neutral-800 flex items-center gap-1 rounded-lg p-1">
+                      {returnCategory(IconTypes.ALBUM)}
+                      {LeftPanelOptions.EXPERIENCE}
+                    </div>
+                  </motion.div>
+                </div>
+                {siteConfig.experienceItems.map((item, index) => (
+                  <div
+                    key={item.title + item.type + index}
+                    className={`relative flex ${
+                      index % 2 === 0 ? "justify-start" : "justify-end"
+                    }`}
+                  >
+                    {/* Circle Indicator */}
+                    <div
+                      className={`absolute left-1/2 transform -translate-x-1/2 w-6 h-2 rounded-full bg-transparent border-4 border-blue-500 z-10 ${
+                        index % 2 === 0 ? "top-1/2" : "bottom-1/2"
+                      }`}
+                      style={{
+                        boxShadow: `0 0 10px rgba(59, 130, 246, 0.6)`,
+                      }}
+                    ></div>
+                    {/* Content Block */}
+                    <div
+                      className={`relative w-1/2 ${
+                        index % 2 === 0 ? "pl-8 text-left" : "pr-8 text-right"
+                      }`}// side margins
+                      style={{
+                        marginLeft: index % 2 === 0 ? "-2rem": "2rem",
+                        marginRight: index % 2 === 0 ? "2rem": "-2rem",
+                        marginBottom: "-9rem"
+                      }} 
                     >
-                      {item.type === "lor" ? (
-                        <Social item={item} />
-                      ) : item.type === "hackathon" ? (
-                        <Mentor item={item} />
-                      ) : item.type === "certificate" ? (
-                        <Certificates item={item} />
-                      ) : (
-                        <div>Need to create new component type.</div>
-                      )}
-                    </GridItem>
+                      <motion.div>
+                        <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg shadow-md border border-neutral-100 dark:border-neutral-800">
+                          {item.type === "certificate" ? (
+                            <Certificates item={item} />
+                          ) : (
+                            <div>Need to create new component type.</div>
+                          )}
+                        </div>
+                      </motion.div>
+                    </div>
+                    {/* For info */}
+                    {/* <div
+                      className={`relative w-1/2 ${
+                        index % 2 === 0 ? "pl-8 text-left" : "pr-8 text-right"
+                      }`}
+                      style={{
+                        marginLeft: index % 2 === 0 ? "2rem" : "0rem",
+                        marginRight: index % 2 === 0 ? "0rem" : "0rem",
+                      }} // side margins
+                    >
+                      <motion.div>
+                        <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg shadow-md border border-neutral-100 dark:border-neutral-800">
+                          {item.type === "certificate" ? (
+                            <Certificates item={item} />
+                          ) : (
+                            <div>Need to create new component type.</div>
+                          )}
+                        </div>
+                      </motion.div>
+                    </div> */}
                   </div>
-                );
-              })}
+                ))}
+              </div>
             </div>
           </div>
         </>
@@ -129,11 +202,7 @@ const RightPanel = ({ section }: { section: string }) => {
                       key={item.title + item.type + index}
                       size={item.layout}
                     >
-                      {item.type === "lor" ? (
-                        <Social item={item} />
-                      ) : item.type === "hackathon" ? (
-                        <Mentor item={item} />
-                      ) : item.type === "certificate" ? (
+                      {item.type === "certificate" ? (
                         <Certificates item={item} />
                       ) : (
                         <div>Need to create new component type.</div>
@@ -168,11 +237,7 @@ const RightPanel = ({ section }: { section: string }) => {
                       key={item.title + item.type + index}
                       size={item.layout}
                     >
-                      {item.type === "lor" ? (
-                        <Social item={item} />
-                      ) : item.type === "hackathon" ? (
-                        <Mentor item={item} />
-                      ) : item.type === "certificate" ? (
+                      {item.type === "certificate" ? (
                         <Certificates item={item} />
                       ) : (
                         <div>Need to create new component type.</div>
@@ -193,7 +258,7 @@ const RightPanel = ({ section }: { section: string }) => {
             className="w-full grid-cols-4 xl:gap-10 gap-6 xl:py-10 py-6 xl:px-2 xl:overflow-y-auto auto-rows-[75px]"
           >
             <div className="mb-4 ml-4 mt-4 flex items-center border-neutral-100 dark:border-neutral-800 cursor-pointer">
-              <motion.div whileHover={{ scale: 1.1 }}>
+              <motion.div whileHover={{ scale: 1.03 }}>
                 <div className="shadow-md text-center justify-center w-full px-4 py-2 text-sm font-medium border border-neutral-100 dark:border-neutral-800 flex items-center gap-1 rounded-lg p-1">
                   {returnCategory(IconTypes.SEARCH)}
                   {LeftPanelOptions.EASTEREGG}
@@ -204,7 +269,6 @@ const RightPanel = ({ section }: { section: string }) => {
           </div>
         </>
       )}
-
     </>
   );
 };
diff --git a/components/Types/enum.tsx b/components/Types/enum.tsx
index 6e0698b..8388017 100644
--- a/components/Types/enum.tsx
+++ b/components/Types/enum.tsx
@@ -11,7 +11,7 @@ export enum LeftPanelOptions {
   EXPERIENCE = "Experience",
   ACHIEVEMENTS = "Achievements",
   PROJECTS = "Projects",
-  EASTEREGG = "EasterEgg"
+  EASTEREGG = "No dude, it is supposed to be hidden!! Means, a place that nobody finds out my favourite song??... Oh Jeez, now don't turn that volume up.. You dare",
 }
 
 export enum LanguageTitle {
@@ -22,9 +22,18 @@ export enum LanguageTitle {
   Django = "Django",
   YAML = "YAML",
   JACKIE = "Jackie Chan Movies",
+  TyAndPy = "Ty & Py",
+  Coffee = "Coffee",
+  Github = "Github",
 }
 
 export enum LanguageCode {
+  TyPy = `Typescript and Python...
+Lovely combo pack of katana swords ⚔️`,
+  Cofee = `Mornings are not fulfilled without... 
+Wait, Mornings... Afternoon... Evenings... Nights... Um.. Whatever ☕`,
+  Github = `A multiverse where every text change is sacred, and greeted 
+warmly with forks, and sometimes mercilessly squashed ⭐`,
   JavascriptHelloWorld = `const greetWithDelay = ms:number => 
   new Promise(resolve => setTimeout(
   () => resolve("Hello, World!"), ms));
@@ -41,6 +50,6 @@ export enum LanguageCode {
   def hello_world(request):
       return HttpResponse("Hello, World!")`,
   YAMLHelloWorld = `message: "Hello, World!"`,
-  JackieHelloWorld = `Born in Hong Kong, Already a Dragon :)
-  He is/was/will always the legend... <3`,
+  JackieHelloWorld = `Hong Kong Dude, Love the humour :)
+He is YU and I am ME, But YU is blind 🤸`,
 }
diff --git a/config/site-config.ts b/config/site-config.ts
index 2963ec0..c272c72 100644
--- a/config/site-config.ts
+++ b/config/site-config.ts
@@ -32,27 +32,27 @@ const ProjItems: ProjectItemInterface[] = [
   {
     layout: "2x4",
     type: "certificate",
-    title: "Portfolio you are looking at :P",
+    title: "Decentralized Drive",
     image: "/background.jpg",
     languages: [
       {
-        title: "Bento style",
+        title: "Solidity",
         link: "#",
         languageImage: "/name.jpg"
       },
       {
-        title: "Easter Egg",
+        title: "Next.js",
         link: "#",
         languageImage: "/name.jpg"
       },
       {
-        title: "Responsive screen grid architecture",
+        title: "Tailwind + TSX",
         link: "#",
         languageImage: "/name.jpg"
       },
       {
-        title: "Vite + Tailwind + Firebase + TSX",
-        link: "#",
+        title: "Hardhat",
+        link: "/google.com",
         languageImage: "/name.jpg"
       }
     ],
@@ -358,24 +358,24 @@ const GridItems: GridItemInterface[] = [
     image: "/background.jpg",
     languages: [
       {
-        title: "Typescript",
+        title: "Ty & Py",
         link: "#",
-        languageImage: "/typescript.jpg"
+        languageImage: "/pyty.jpg"
       },
       {
-        title: "Python",
+        title: "Coffee",
         link: "#",
-        languageImage: "/python.jpg"
+        languageImage: "/coffee.jpg"
       },
       {
-        title: "Node.js",
+        title: "Jackie Chan Movies",
         link: "#",
-        languageImage: "/nodejs.jpg"
+        languageImage: "/jackie.jpg"
       },
       {
-        title: "Jackie Chan Movies",
+        title: "Github",
         link: "#",
-        languageImage: "/jackie.jpg"
+        languageImage: "/gh.jpg"
       },
     ],
   },
diff --git a/package.json b/package.json
index b5dbc63..e570c98 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "btkcodedev-portfolio",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/public/coffee.jpg b/public/coffee.jpg
new file mode 100644
index 0000000..e1e297f
Binary files /dev/null and b/public/coffee.jpg differ
diff --git a/public/gh.jpg b/public/gh.jpg
new file mode 100644
index 0000000..9e90aa0
Binary files /dev/null and b/public/gh.jpg differ
diff --git a/public/pyty.jpg b/public/pyty.jpg
new file mode 100644
index 0000000..87e8082
Binary files /dev/null and b/public/pyty.jpg differ