diff --git a/src/CONSTANTS.tsx b/src/CONSTANTS.tsx
index a9bfb11..8d9d5b1 100644
--- a/src/CONSTANTS.tsx
+++ b/src/CONSTANTS.tsx
@@ -226,26 +226,32 @@ export const TimelineData: TimelineCardProps[] = [
 export const ThemeIconsData: ThemeIconsProps[] = [
   {
     color: "themeBlue",
+    metaColor: "#0954BD",
     theme: blueTheme,
   },
   {
     color: "themeRed",
+    metaColor: "#E10202",
     theme: redTheme,
   },
   {
     color: "themeGreen",
+    metaColor: "#11C402",
     theme: greenTheme,
   },
   {
     color: "themeViolet",
+    metaColor: "#8406C3",
     theme: violetTheme,
   },
   {
     color: "themeOrange",
+    metaColor: "#C44201",
     theme: orangeTheme,
   },
   {
     color: "themeYellow",
+    metaColor: "#DBBA03",
     theme: yellowTheme,
   },
 ];
diff --git a/src/TYPES.ts b/src/TYPES.ts
index da42e37..75e06c1 100644
--- a/src/TYPES.ts
+++ b/src/TYPES.ts
@@ -17,7 +17,7 @@ export type ScrollContextFunctions = {
 
 export type ScrollContextProps = ScrollContextRefs & ScrollContextFunctions;
 
-export type ThemeFunction = (config: ThemeConfig) => void;
+export type ThemeFunction = (config: ThemeConfig, metaColor: string) => void;
 
 export type ThemeContextProps = {
   theme: ThemeConfig;
@@ -26,6 +26,7 @@ export type ThemeContextProps = {
 export type ThemeIconsProps = {
   color: string;
   theme: ThemeConfig;
+  metaColor: string;
 };
 
 export interface ContextProviderProps {
diff --git a/src/components/HomePage/IconButtonComp.tsx b/src/components/HomePage/IconButtonComp.tsx
index bc870f2..38cf219 100644
--- a/src/components/HomePage/IconButtonComp.tsx
+++ b/src/components/HomePage/IconButtonComp.tsx
@@ -22,7 +22,7 @@ const IconButtonHome = ({ label, icon, onClick, tooltip, delay }: SocialBtnType)
   return (
     <Tooltip
       bg={"text"}
-      color={"darker"}
+      color={"light"}
       fontFamily={"Poppins"}
       fontWeight={"600"}
       letterSpacing={"1.4px"}
@@ -41,7 +41,7 @@ const IconButtonHome = ({ label, icon, onClick, tooltip, delay }: SocialBtnType)
         animation={isIntersecting ? `${fadeTop} 1s ease-in-out ${delay} forwards` : "none"}
         shadow={"dark-lg"}
         transition={"700ms"}
-        _hover={{ bgColor: "darker", color: "text" }}
+        _hover={{ bgColor: "light", color: "text" }}
         border={"2px solid"}
         borderColor={"transparent"}
         _active={{ opacity: "0.5", transform: "translateY(5px)" }}
diff --git a/src/components/Navbar/DesktopNav.tsx b/src/components/Navbar/DesktopNav.tsx
index 96301b5..ec5ad69 100644
--- a/src/components/Navbar/DesktopNav.tsx
+++ b/src/components/Navbar/DesktopNav.tsx
@@ -21,7 +21,7 @@ const DesktopNav = ({ buttonData }: Props) => {
       top={"0px"}
       left={"0px"}
       w={"100%"}
-      bgColor={"primary"}
+      bgColor={"transparent"}
       color={"text"}
       gap={"2"}
       py={3}
diff --git a/src/components/ThemesComponent/ThemeContainer.tsx b/src/components/ThemesComponent/ThemeContainer.tsx
index 30ff648..3ab952e 100644
--- a/src/components/ThemesComponent/ThemeContainer.tsx
+++ b/src/components/ThemesComponent/ThemeContainer.tsx
@@ -23,7 +23,7 @@ const ThemeContainer = () => {
             icon={<BiSolidColor style={{ color: "#fff" }} />}
             fontSize={"32px"}
             rounded={"full"}
-            onClick={() => handleTheme(icon.theme)}
+            onClick={() => handleTheme(icon.theme, icon.metaColor)}
             _active={{ opacity: "0.5", transform: "translateY(5px)" }}
             bgColor={icon.color}
             _hover={{}}
diff --git a/src/contexts/ThemeProvider.tsx b/src/contexts/ThemeProvider.tsx
index 7b13cd1..ad6ed7e 100644
--- a/src/contexts/ThemeProvider.tsx
+++ b/src/contexts/ThemeProvider.tsx
@@ -2,6 +2,7 @@ import { createContext, useEffect, useState } from "react";
 import { ContextProviderProps, ThemeContextProps, ThemeFunction } from "../TYPES";
 import { ChakraProvider, ThemeConfig } from "@chakra-ui/react";
 import { blueTheme } from "../themes/BlueTheme";
+import changeThemeMeta from "../helpers/MobileChromeTheme";
 
 const ThemeContext = createContext<ThemeContextProps | undefined>(undefined);
 
@@ -12,8 +13,9 @@ const ThemeContextProvider: React.FC<ContextProviderProps> = ({ children }) => {
     setTheme(blueTheme);
   }, []);
 
-  const handleTheme: ThemeFunction = (config) => {
+  const handleTheme: ThemeFunction = (config, metaColor) => {
     setTheme(config);
+    changeThemeMeta(metaColor);
   };
 
   return (