diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
index 61c8d57dc..244e14f18 100644
--- a/components/Header/Header.tsx
+++ b/components/Header/Header.tsx
@@ -14,7 +14,7 @@ export const Header: FC = () => {
 
   return (
     <header className="fixed top-0 left-0 z-30 row-start-1 row-end-2 flex h-[76px] w-screen items-center justify-between bg-light-primary dark:bg-dark">
-      <div className="bg-[rgba(255,255,255,0.3)] h-full w-fit flex-none px-6 py-4 dark:bg-dark lg:w-[290px]">
+      <div className="bg-light-primary h-full w-fit flex-none px-6 py-4 dark:bg-dark lg:w-[290px]">
         <Link href="/" aria-label="LinksHub Logo">
           <Logo className="text-3xl" />
         </Link>
diff --git a/components/ThemeToggler/themeToggler.tsx b/components/ThemeToggler/themeToggler.tsx
index 850abee07..21a8cbf66 100644
--- a/components/ThemeToggler/themeToggler.tsx
+++ b/components/ThemeToggler/themeToggler.tsx
@@ -1,21 +1,22 @@
-import { useState, useEffect } from 'react'
-import { useTheme } from 'next-themes'
-import { HiSun, HiMoon } from 'react-icons/hi'
+import { useState, useEffect } from 'react';
+import { useTheme } from 'next-themes';
+import { HiSun, HiMoon } from 'react-icons/hi';
+import { Helmet, HelmetProvider } from 'react-helmet-async';
 
 export function ThemeToggler() {
-  const { resolvedTheme, setTheme } = useTheme()
-  const [mounted, setMounted] = useState(false)
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    setMounted(true)
-  }, [])
+    setMounted(true);
+  }, []);
 
   if (!mounted) {
-    return null
+    return null;
   }
 
   const handleThemeToggle = () => {
-    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
   }
 
   const iconProps = {
@@ -23,23 +24,36 @@ export function ThemeToggler() {
     size: '1.5rem',
   }
 
+  const themeColor = resolvedTheme === 'dark' ? '#0F172A' : '#F5F3FF';
+
   return (
-    <button
-      onClick={handleThemeToggle}
-      title={`Toggle dark mode (current state: ${resolvedTheme})`}
-      aria-label="Toggle dark mode"
-    >
-      {resolvedTheme === 'dark' ? (
-        <HiSun
-          {...iconProps}
-          className="text-light-primary hover:text-theme-primary transition duration-300 ease-in-out"
-        />
-      ) : (
-        <HiMoon
-          {...iconProps}
-          className="text-text-secondary hover:text-theme-primary transition duration-300 ease-in-out"
+    <HelmetProvider>
+      <Helmet>
+        <meta name="theme-color" content={themeColor} />
+        <meta name="msapplication-navbutton-color" content={themeColor} />
+        <meta name="msapplication-TileColor" content={themeColor} />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta
+          name="apple-mobile-web-app-status-bar-style"
+          content={themeColor}
         />
-      )}
-    </button>
-  )
+      </Helmet>
+      <button
+        onClick={handleThemeToggle}
+        title={`Toggle dark mode (current state: ${resolvedTheme})`}
+      >
+        {resolvedTheme === 'dark' ? (
+          <HiSun
+            {...iconProps}
+            className="text-light-primary hover:text-theme-primary transition duration-300 ease-in-out"
+          />
+        ) : (
+          <HiMoon
+            {...iconProps}
+            className="text-text-secondary hover:text-theme-primary transition duration-300 ease-in-out"
+          />
+        )}
+      </button>
+    </HelmetProvider>
+  );
 }
diff --git a/package.json b/package.json
index c7a3b7f46..77e089fcf 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "react": "18.2.0",
     "react-autosuggest": "^10.1.0",
     "react-dom": "18.2.0",
+    "react-helmet-async": "^1.3.0",
     "react-icons": "^4.8.0",
     "react-spinners": "^0.13.8",
     "react-tooltip": "^5.20.0",
diff --git a/pages/[subcategory]/index.tsx b/pages/[subcategory]/index.tsx
index 55cc006f6..2c64e8ea2 100644
--- a/pages/[subcategory]/index.tsx
+++ b/pages/[subcategory]/index.tsx
@@ -27,7 +27,6 @@ const SubCategory = () => {
     <>
       <Head>
         <title>{title}</title>
-        <meta name="theme-color" content="#202c46" />
         <meta name="title" content="LinksHub" />
         <meta
           name="description"
diff --git a/pages/index.tsx b/pages/index.tsx
index aeab8cc19..c6567a872 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -21,7 +21,6 @@ export default function Home() {
           content="LinksHub is the ultimate hub of ready-to-use tech resources. Discover free tools and libraries to streamline your development process and build better projects."
         />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="theme-color" content="#202c46" />
         <meta
           name="keywords"
           content="LinksHub, developers, free resources, tools, software, libraries, frameworks, applications, websites"
diff --git a/pages/search.tsx b/pages/search.tsx
index 1da0074bc..b169b118e 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -44,7 +44,6 @@ const Search = () => {
     <>
       <Head>
         <title>{title}</title>
-        <meta name="theme-color" content="#202c46" />
         <meta name="title" content={title} />
         <meta
           name="description"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 539b44289..7eddc87e2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,8 @@
-lockfileVersion: '6.1'
+lockfileVersion: '6.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
 
 dependencies:
   '@next/font':
@@ -55,6 +59,9 @@ dependencies:
   react-dom:
     specifier: 18.2.0
     version: 18.2.0(react@18.2.0)
+  react-helmet-async:
+    specifier: ^1.3.0
+    version: 1.3.0(react-dom@18.2.0)(react@18.2.0)
   react-icons:
     specifier: ^4.8.0
     version: 4.8.0(react@18.2.0)
@@ -1548,6 +1555,12 @@ packages:
       side-channel: 1.0.4
     dev: false
 
+  /invariant@2.2.4:
+    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
   /is-arguments@1.1.1:
     resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
     engines: {node: '>= 0.4'}
@@ -2212,6 +2225,25 @@ packages:
       scheduler: 0.23.0
     dev: false
 
+  /react-fast-compare@3.2.2:
+    resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
+    dev: false
+
+  /react-helmet-async@1.3.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==}
+    peerDependencies:
+      react: ^16.6.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@babel/runtime': 7.21.0
+      invariant: 2.2.4
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-fast-compare: 3.2.2
+      shallowequal: 1.1.0
+    dev: false
+
   /react-icons@4.8.0(react@18.2.0):
     resolution: {integrity: sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==}
     peerDependencies:
@@ -2363,6 +2395,10 @@ packages:
     resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==}
     dev: false
 
+  /shallowequal@1.1.0:
+    resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==}
+    dev: false
+
   /shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -2736,7 +2772,3 @@ packages:
   /zod@3.21.4:
     resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
     dev: false
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false