diff --git a/app/page.tsx b/app/page.tsx
index 93054e3..f8161b8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,3 +1,4 @@
+import { BackgroundBoxesDemo } from "@/components/BackgroundLast";
 import { StickyScrollRevealDemo } from "@/components/CertificationCall";
 import Grid from "@/components/Grid";
 import Hero from "@/components/Hero";
@@ -18,7 +19,7 @@ export default function Home() {
             { name: "About", link: "#about", icon: <FaUser /> },
             { name: "My Projects", link: "#projects", icon: <FaRProject /> },
             { name: "Services", link: "#services", icon: <FaServicestack /> },
-            { name: "Contact", link: "#", icon: <FaPhone /> },
+            { name: "Contact", link: "#contact", icon: <FaPhone /> },
           ]}
         />
         <Hero />
@@ -27,6 +28,7 @@ export default function Home() {
         <RecentProjects />
         <CardHoverEffectDemo />
         <StickyScrollRevealDemo />
+        <BackgroundBoxesDemo />
       </div>
     </main>
   );
diff --git a/components/BackgroundLast.tsx b/components/BackgroundLast.tsx
new file mode 100644
index 0000000..47704d7
--- /dev/null
+++ b/components/BackgroundLast.tsx
@@ -0,0 +1,72 @@
+"use client";
+import React from "react";
+import { Boxes } from "@/components/ui/background-boxes";
+import { cn } from "@/utils/cn";
+import Link from "next/link";
+
+export function BackgroundBoxesDemo() {
+  return (
+    <div
+      className="h-96 relative w-full overflow-hidden bg-black-100 flex flex-col items-center justify-center mb-20"
+      id="contact"
+    >
+      <div className="absolute inset-0 w-full h-full bg-black-100 z-20 [mask-image:radial-gradient(transparent,white)] pointer-events-none" />
+
+      <Boxes />
+      <h1
+        className={cn("text-4xl relative z-20 font-bold w-[90%] text-center")}
+      >
+        Ready to take <span className="text-purple">your</span> digital presence
+        to the next level?
+      </h1>
+      <p className="text-center mt-2 text-neutral-300 relative z-20">
+        Reach out to me today and let's discuss how I can help you achieve your
+        goals.
+      </p>
+      <Link href="mailto:utsavpatel562@gmail.com">
+        <button className="mt-9 relative inline-flex h-14 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
+          <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
+          <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-slate-950 px-4 py-1 text-sm font-medium text-white backdrop-blur-3xl">
+            Let's get me touch
+          </span>
+        </button>
+      </Link>
+      <div className="mt-5">
+        <Link href="www.linkedin.com/in/utsav-patel-coder">
+          <button className="bg-slate-800 no-underline group rounded-full cursor-pointer mr-3 relative shadow-2xl shadow-zinc-900 p-px text-xs font-semibold leading-6 text-white inline-block">
+            <span className="absolute inset-0 overflow-hidden rounded-full">
+              <span className="absolute inset-0 bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100"></span>
+            </span>
+            <div className="relative flex space-x-2 items-center z-10 rounded-full bg-black-100 py-0.5 px-4 ring-1 ring-white/10 ">
+              <img
+                src="/linkedin1.png"
+                alt="LinkedIn"
+                width={46}
+                height={46}
+                className="p-2"
+              />
+            </div>
+            <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40"></span>
+          </button>
+        </Link>
+        <Link href="https://github.com/utsavpatel562">
+          <button className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs font-semibold leading-6  text-white inline-block">
+            <span className="absolute inset-0 overflow-hidden rounded-full">
+              <span className="absolute inset-0 rounded-md bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100"></span>
+            </span>
+            <div className="relative flex space-x-2 items-center z-10 rounded-full bg-black-100 py-0.5 px-4 ring-1 ring-white/10 ">
+              <img
+                src="/github.png"
+                alt="GitHub"
+                width={46}
+                height={46}
+                className="p-2"
+              />
+            </div>
+            <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40"></span>
+          </button>
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/components/CertificationCall.tsx b/components/CertificationCall.tsx
index 1088215..a6ed4d7 100644
--- a/components/CertificationCall.tsx
+++ b/components/CertificationCall.tsx
@@ -7,7 +7,7 @@ const content = [
   {
     title: "SQL Advanced HackerRank",
     description:
-      "Work together in real time with your team, clients, and stakeholders. Collaborate on documents, share ideas, and make decisions quickly. With our platform, you can streamline your workflow and increase productivity.",
+      "I have earned the SQL Advanced Certification from HackerRank, showcasing my ability to handle complex queries, optimize database performance, and manage large datasets effectively. This certification highlights my advanced skills in SQL and my commitment to continuous learning in database management.",
     content: (
       <div className="h-full w-full bg-[linear-gradient(to_bottom_right,var(--cyan-500),var(--emerald-500))] flex items-center justify-center text-white">
         <Image
@@ -21,9 +21,9 @@ const content = [
     ),
   },
   {
-    title: "Google Analytics Certification",
+    title: "Google Analytics 360",
     description:
-      "See changes as they happen. With our platform, you can track every modification in real time. No more confusion about the latest version of your project. Say goodbye to the chaos of version control and embrace the simplicity of real-time updates.",
+      "I have earned the Google Analytics 360 Certification from Google, showcasing my ability to analyze and optimize digital marketing campaigns. This certification highlights my skills in using advanced tracking, creating custom reports, and leveraging data-driven insights to enhance website performance and marketing ROI.",
     content: (
       <div className="h-full w-full  flex items-center justify-center text-white">
         <Image
@@ -39,7 +39,7 @@ const content = [
   {
     title: "MongoDB for SQL Experts",
     description:
-      "Experience real-time updates and never stress about version control again. Our platform ensures that you're always working on the most recent version of your project, eliminating the need for constant manual updates. Stay in the loop, keep your team aligned, and maintain the flow of your work without any interruptions.",
+      "I have earned the MongoDB for SQL Experts Certification, demonstrating my ability to transition from SQL to MongoDB efficiently. This certification highlights my skills in designing and managing NoSQL databases, understanding document-based data models, and leveraging MongoDB's powerful features to optimize database performance and scalability.",
     content: (
       <div className="h-full w-full bg-[linear-gradient(to_bottom_right,var(--orange-500),var(--yellow-500))] flex items-center justify-center text-white">
         <Image
diff --git a/components/ui/background-boxes.tsx b/components/ui/background-boxes.tsx
new file mode 100644
index 0000000..a50edf4
--- /dev/null
+++ b/components/ui/background-boxes.tsx
@@ -0,0 +1,76 @@
+"use client";
+import React from "react";
+import { motion } from "framer-motion";
+import { cn } from "@/utils/cn";
+
+export const BoxesCore = ({ className, ...rest }: { className?: string }) => {
+  const rows = new Array(150).fill(1);
+  const cols = new Array(100).fill(1);
+  let colors = [
+    "--sky-300",
+    "--pink-300",
+    "--green-300",
+    "--yellow-300",
+    "--red-300",
+    "--purple-300",
+    "--blue-300",
+    "--indigo-300",
+    "--violet-300",
+  ];
+  const getRandomColor = () => {
+    return colors[Math.floor(Math.random() * colors.length)];
+  };
+
+  return (
+    <div
+      style={{
+        transform: `translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)`,
+      }}
+      className={cn(
+        "absolute left-1/4 p-4 -top-1/4 flex  -translate-x-1/2 -translate-y-1/2 w-full h-full z-0 ",
+        className
+      )}
+      {...rest}
+    >
+      {rows.map((_, i) => (
+        <motion.div
+          key={`row` + i}
+          className="w-96 h-8  border-l  border-slate-700 relative"
+        >
+          {cols.map((_, j) => (
+            <motion.div
+              whileHover={{
+                backgroundColor: `var(${getRandomColor()})`,
+                transition: { duration: 0 },
+              }}
+              animate={{
+                transition: { duration: 2 },
+              }}
+              key={`col` + j}
+              className="w-32 h-16  border-r border-t border-slate-700 relative"
+            >
+              {j % 2 === 0 && i % 2 === 0 ? (
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth="1.5"
+                  stroke="currentColor"
+                  className="absolute h-6 w-10 -top-[14px] -left-[22px] text-slate-700 stroke-[1px] pointer-events-none"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M12 6v12m6-6H6"
+                  />
+                </svg>
+              ) : null}
+            </motion.div>
+          ))}
+        </motion.div>
+      ))}
+    </div>
+  );
+};
+
+export const Boxes = React.memo(BoxesCore);
diff --git a/components/ui/sticky-scroll-reveal.tsx b/components/ui/sticky-scroll-reveal.tsx
index 31d15ae..615b1c0 100644
--- a/components/ui/sticky-scroll-reveal.tsx
+++ b/components/ui/sticky-scroll-reveal.tsx
@@ -67,6 +67,7 @@ export const StickyScroll = ({
       style={{
         scrollbarWidth: "thin",
         scrollbarColor: "#63686e #000",
+        boxShadow: "0px 0px 5px 2px rgba(97,97,97,1)",
       }}
     >
       <div className="div relative flex items-start px-4">
@@ -91,7 +92,7 @@ export const StickyScroll = ({
                 animate={{
                   opacity: activeCard === index ? 1 : 0.3,
                 }}
-                className="text-kg text-slate-300 max-w-sm mt-10"
+                className="text-kg text-slate-300 max-w-[500px] mt-10"
               >
                 {item.description}
               </motion.p>
diff --git a/public/github.png b/public/github.png
new file mode 100644
index 0000000..bb67a5a
Binary files /dev/null and b/public/github.png differ
diff --git a/public/linkedin1.png b/public/linkedin1.png
new file mode 100644
index 0000000..861cf90
Binary files /dev/null and b/public/linkedin1.png differ
diff --git a/tailwind.config.ts b/tailwind.config.ts
index c679075..ff39649 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -42,7 +42,7 @@ const config = {
           "100": "#E4ECFF",
         },
         pink: {
-          "100": "#111f4d",
+          "100": "#090030",
         },
         purple: "#CBACF9",
         border: "hsl(var(--border))",