diff --git a/components/Grid.tsx b/components/Grid.tsx
index 560e5bc..cd48041 100644
--- a/components/Grid.tsx
+++ b/components/Grid.tsx
@@ -5,7 +5,7 @@ import { gridItems } from "@/data";
 const Grid = () => {
   return (
     <>
-      <section id="about">
+      <section>
         <BentoGrid>
           {gridItems.map(
             ({
diff --git a/components/MacBookScroll.tsx b/components/MacBookScroll.tsx
new file mode 100644
index 0000000..30eebb5
--- /dev/null
+++ b/components/MacBookScroll.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { MacbookScroll } from "./ui/macbook-scroll";
+import Link from "next/link";
+
+export function MacbookScrollDemo() {
+  return (
+    <div className="overflow-hidden bg-black-100 w-full">
+      <MacbookScroll
+        title={
+          <h1 className="heading">
+            Learn more <span className="text-purple">About me</span>
+          </h1>
+        }
+        src={`/linear.webp`}
+        showGradient={false}
+      />
+    </div>
+  );
+}
diff --git a/components/TabsDemo.tsx b/components/TabsDemo.tsx
index e7e95f7..df81439 100644
--- a/components/TabsDemo.tsx
+++ b/components/TabsDemo.tsx
@@ -7,9 +7,15 @@ export function TabsDemo() {
       title: "About Me",
       value: "product",
       content: (
-        <div className="w-full overflow-hidden relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-gradient-to-br from-purple-700 to-violet-900">
-          <p>About Me</p>
-          <img src="/about.png" alt="myImg1" />
+        <div
+          id="about"
+          className="w-full overflow-hidden bg-pink-100 relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-gradient-to-br from-purple-700 to-violet-900"
+          style={{
+            boxShadow: "0px 0px 17px 1px #7EC5FF",
+          }}
+        >
+          <p className="mb-8">About Me</p>
+          <img src="/about.png" alt="myImg1" className=" m-auto rounded-2xl" />
         </div>
       ),
     },
@@ -17,9 +23,18 @@ export function TabsDemo() {
       title: "Tech Stack",
       value: "teach stack",
       content: (
-        <div className="w-full overflow-hidden relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-gradient-to-br from-purple-700 to-violet-900">
-          <p>Tech Stack</p>
-          <img src="/my_tech_stack.png" alt="myImg2" />
+        <div
+          className="w-full overflow-hidden bg-pink-100 relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-gradient-to-br from-purple-700 to-violet-900"
+          style={{
+            boxShadow: "0px 0px 17px 1px #7EC5FF",
+          }}
+        >
+          <p className="mb-8">Tech Stack</p>
+          <img
+            src="/my_tech_stack.png"
+            alt="myImg2"
+            className="w-[110%] m-auto rounded-2xl"
+          />
         </div>
       ),
     },
@@ -27,9 +42,18 @@ export function TabsDemo() {
       title: "GitHub Stats",
       value: "github stats",
       content: (
-        <div className="w-full overflow-hidden relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-gradient-to-br from-purple-700 to-violet-900">
-          <p>GitHub Stats</p>
-          <img src="/github_stats.png" alt="myImg3" />
+        <div
+          className="w-full overflow-hidden bg-pink-100 relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-gradient-to-br from-purple-700 to-violet-900"
+          style={{
+            boxShadow: "0px 0px 17px 1px #7EC5FF",
+          }}
+        >
+          <p className="mb-8">GitHub Stats</p>
+          <img
+            src="/github_stats.png"
+            alt="myImg3"
+            className="w-[90%] m-auto rounded-2xl"
+          />
         </div>
       ),
     },
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
index e0e9d9e..fff7268 100644
--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@@ -52,7 +52,7 @@ export const Tabs = ({
             }}
             onMouseEnter={() => setHovering(true)}
             onMouseLeave={() => setHovering(false)}
-            className={cn("relative px-4 py-2 rounded-full", tabClassName)}
+            className={cn("relative px-4 py-3 rounded-full", tabClassName)}
             style={{
               transformStyle: "preserve-3d",
             }}
@@ -100,7 +100,7 @@ export const FadeInDiv = ({
     return tab.value === tabs[0].value;
   };
   return (
-    <div className="relative w-full h-full">
+    <div className="relative w-full h-full" id="about">
       {tabs.map((tab, idx) => (
         <motion.div
           key={tab.value}
diff --git a/public/about.png b/public/about.png
index 23aa54d..3de447d 100644
Binary files a/public/about.png and b/public/about.png differ
diff --git a/public/aboutmylearning.png b/public/aboutmylearning.png
deleted file mode 100644
index 55b2e92..0000000
Binary files a/public/aboutmylearning.png and /dev/null differ
diff --git a/public/aboutmylearning2.png b/public/aboutmylearning2.png
deleted file mode 100644
index 93c6fd3..0000000
Binary files a/public/aboutmylearning2.png and /dev/null differ
diff --git a/public/aboutmylearning3.png b/public/aboutmylearning3.png
deleted file mode 100644
index 1b7a66e..0000000
Binary files a/public/aboutmylearning3.png and /dev/null differ
diff --git a/public/aboutmylearning4.png b/public/aboutmylearning4.png
deleted file mode 100644
index e8da5d8..0000000
Binary files a/public/aboutmylearning4.png and /dev/null differ
diff --git a/public/aboutmylearning5.png b/public/aboutmylearning5.png
deleted file mode 100644
index 734a649..0000000
Binary files a/public/aboutmylearning5.png and /dev/null differ
diff --git a/public/github_stats.png b/public/github_stats.png
index 7b53944..54e54cc 100644
Binary files a/public/github_stats.png and b/public/github_stats.png differ
diff --git a/public/my_tech_stack.png b/public/my_tech_stack.png
index ec50fe8..a2d9abd 100644
Binary files a/public/my_tech_stack.png and b/public/my_tech_stack.png differ
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 86265b7..c679075 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -41,6 +41,9 @@ const config = {
         blue: {
           "100": "#E4ECFF",
         },
+        pink: {
+          "100": "#111f4d",
+        },
         purple: "#CBACF9",
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",