diff --git a/src/components/Footer.js b/src/components/Footer.js
index e8e2f55..7d094c0 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -8,16 +8,20 @@ const Footer = () => {
       <Layout className="py-8 flex items-center justify-between lg:flex-col lg:py-16">
         <span>{new Date().getFullYear()} &copy; All Rights Reserved.</span>
         <div className="flex items-center lg:py-2">
-          Build with <span className="text-primary dark:text-primaryDark text-2xl px-1">&#9825;</span>{" "}
+          Build with{" "}
+          <span className="text-primary dark:text-primaryDark text-2xl px-1">
+            &#9825;
+          </span>{" "}
           by&nbsp;
-          <a className="underline underline-offset-2" href="https://wa.me/+8801830018193/?text=Hello A SI F!" target="_blank">
+          <a
+            className="underline underline-offset-2"
+            href="https://wa.me/+8801830018193/?text=Hello A SI F!"
+            target="_blank"
+          >
             Muhammad A SI F
           </a>
         </div>
-        <Link
-          href={"https://t.me/muhammadasif_wd"}
-          target="_blank"
-        >
+        <Link href={"https://t.me/muhammadasif_wd"} target="_blank">
           Message on (Telegram)
         </Link>
       </Layout>
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 58b18e5..1d3b627 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -165,7 +165,7 @@ const NavBar = () => {
           initial={{ scale: 0, opacity: 0, x: "-50%", y: "-50%" }}
           animate={{ scale: 1, opacity: 1 }}
         >
-          <div className="lg:bg-dark -mt-20 rounded-full w-20 h-20 mx-auto my-auto">
+          <div className="lg:bg-white dark:bg-dark -mt-20 rounded-full w-20 h-20 mx-auto my-auto">
             <Logo mode={mode} toggle={handleClick} />
           </div>
           <nav className="flex items-center flex-col justify-center my-2">
diff --git a/src/pages/_document.js b/src/pages/_document.js
index 4d9b95d..6bfd63c 100644
--- a/src/pages/_document.js
+++ b/src/pages/_document.js
@@ -5,15 +5,42 @@ export default function Document() {
   return (
     <Html lang="en">
       <Head>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
-        <meta name="description" content="I'm Muhammad Asif, a seasoned full-stack web developer specializing in web design, web development, and converting Figma designs to React and Next.js. Let's turn your vision into digital reality." />
-        <meta name="keywords" content="Figma to React, PSD to React, PDF to React, JPG to React, WordPress to React, CMS to React, Performant Web, React Next, TypeScript Tailwind, MERN Stack, React Web Applications, Next.js Node.js" />
-        <meta name="author" content="Muhammad Asif" />
-        <meta name="keywords" content="Muhammad Asif, muhammadasif-wd, muhammadasif.wd, Muhammad, Asif, MERN stack developer, MongoDB, Mongoose, Express, React, Next.js, Typescript, Node.js, web development, mobile app development, user-centered design" />
-        <meta name="keywords" content="Muhammad Asif, muhammadasif-wd, web development, MERN stack developer, MongoDB, Mongoose, Express, React, Next.js, Typescript, Node.js, mobile app development, user-centered design, SEO strategy, Google ranking, first page, on-page optimization, page speed, backlinks, local SEO, schema markup, user experience, analytics, social signals, responsive design, quality content" />
-        <meta name="keywords" content="Muhammad Asif portfolio, web developer, MERN stack, MongoDB, Express, React, Next.js, Typescript, Node.js, mobile app development, user-centered design, SEO strategy, Google ranking, on-page optimization, page speed, backlinks, local SEO, schema markup, user experience, analytics, social signals, responsive design, quality content, keyword research" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta
+          name="google-site-verification"
+          content="D2vuzXd_0-8Nl5ykCrGWu4C6ocVJ_EFZwNQXyCaGXi0"
+        />
+        <meta name="title" content="Muhammad A SI F" />
+        <meta
+          name="description"
+          content="I'm Muhammad Asif, a highly skilled MERN stack developer with expertise in MongoDB, Mongoose, Express, React, Next.js, Typescript, and Node.js. I bring a commitment to design excellence and user-centered thinking to every project. Let's work together!"
+        />
+
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content="https://muhammadasif.vercel.app/" />
+        <meta property="og:title" content="Muhammad A SI F" />
+        <meta
+          property="og:description"
+          content="I'm Muhammad Asif, a highly skilled MERN stack developer with expertise in MongoDB, Mongoose, Express, React, Next.js, Typescript, and Node.js. I bring a commitment to design excellence and user-centered thinking to every project. Let's work together!"
+        />
+        <meta
+          property="og:image"
+          content="https://muhammadasif.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmuhammadasif_profetional_image.b1dbfd92.png&w=640&q=75"
+        />
+
+        <meta property="twitter:card" content="summary_large_image" />
+        <meta
+          property="twitter:url"
+          content="https://muhammadasif.vercel.app/"
+        />
+        <meta property="twitter:title" content="Muhammad A SI F" />
+        <meta
+          property="twitter:description"
+          content="I'm Muhammad Asif, a highly skilled MERN stack developer with expertise in MongoDB, Mongoose, Express, React, Next.js, Typescript, and Node.js. I bring a commitment to design excellence and user-centered thinking to every project. Let's work together!"
+        />
+        <meta
+          property="twitter:image"
+          content="https://muhammadasif.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmuhammadasif_profetional_image.b1dbfd92.png&w=640&q=75"
+        />
       </Head>
       <body>
         <Script id="theme-switcher" strategy="beforeInteractive">
diff --git a/src/pages/about/index.js b/src/pages/about/index.js
index 564f53c..83fc427 100644
--- a/src/pages/about/index.js
+++ b/src/pages/about/index.js
@@ -69,7 +69,6 @@ const About = () => {
       <Head>
         <title>Muhammad A SI F | About</title>
         <meta name="title" content="Muhammad A SI F | About" />
-        <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta
           name="description"
diff --git a/src/pages/index.js b/src/pages/index.js
index 08f1b06..14c249d 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -16,7 +16,6 @@ export default function Home() {
     <>
       <Head>
         <title>Muhammad A SI F</title>
-        <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta
           name="google-site-verification"
diff --git a/src/styles/globals.css b/src/styles/globals.css
index bb63e18..24c23e8 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -47,4 +47,4 @@ body {
   width: 100%;
   height: 100%;
   object-fit: cover;
-}
\ No newline at end of file
+}
