diff --git a/package-lock.json b/package-lock.json
index 6b29d14..e229ab1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "prettier": "^3.4.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-helmet": "^6.1.0",
         "react-router-dom": "^6.27.0",
         "sitemap": "^8.0.0"
       },
@@ -3712,7 +3713,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4186,7 +4186,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -4246,11 +4245,31 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-refresh": {
       "version": "0.14.2",
@@ -4291,6 +4310,15 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index d1854c8..904197c 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "prettier": "^3.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-helmet": "^6.1.0",
     "react-router-dom": "^6.27.0",
     "sitemap": "^8.0.0"
   },
diff --git a/src/metadata.jsx b/src/metadata.jsx
index a45adb8..4f84266 100644
--- a/src/metadata.jsx
+++ b/src/metadata.jsx
@@ -1,56 +1,89 @@
-import React from 'react'
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import PropTypes from 'prop-types';
 
-const Metadata = () => {
+const Metadata = ({
+  title,
+  description,
+  keywords,
+  author,
+  robots,
+  url,
+  image,
+  twitterHandle,
+  themeColor,
+  canonical,
+}) => {
   return (
-    <>
-      <title>ChaosWeb</title>
-      <meta
-        name='description'
-        content='Welcome to ChaosWeb — a web design experiment where nothing behaves as it should, and everything is delightfully out of order! Explore unpredictable navigation, bizarre sliders, and a world where scrolling defies gravity.'
-      />
-      <meta
-        name='keywords'
-        content='web design, chaos, experiment, unpredictable, navigation, sliders'
-      />
-      <meta name='author' content='Your Name' />
-      <meta name='robots' content='index, follow' />
+    <Helmet>
+      {/* Standard Meta Tags */}
+      <title>{title}</title>
+      <meta name='description' content={description} />
+      <meta name='keywords' content={keywords} />
+      <meta name='author' content={author} />
+      <meta name='robots' content={robots} />
       <meta name='viewport' content='width=device-width, initial-scale=1.0' />
-      <link rel='canonical' href='https://chaosweb.vercel.app' />
+      {canonical && <link rel='canonical' href={canonical} />}
 
+      {/* Open Graph Meta Tags */}
       <meta property='og:type' content='website' />
-      <meta property='og:title' content='ChaosWeb' />
-      <meta
-        property='og:description'
-        content='A web design experiment where nothing behaves as it should!'
-      />
-      <meta property='og:image' content='URL_TO_IMAGE' />
-      <meta property='og:url' content='https://chaosweb.vercel.app' />
-      <meta property='og:site_name' content='ChaosWeb' />
+      <meta property='og:title' content={title} />
+      <meta property='og:description' content={description} />
+      {image && <meta property='og:image' content={image} />}
+      <meta property='og:url' content={url} />
+      <meta property='og:site_name' content={title} />
       <meta property='og:locale' content='en_US' />
 
+      {/* Twitter Card Meta Tags */}
       <meta name='twitter:card' content='summary_large_image' />
-      <meta name='twitter:title' content='ChaosWeb' />
-      <meta
-        name='twitter:description'
-        content='A web design experiment where nothing behaves as it should!'
-      />
-      <meta name='twitter:image' content='URL_TO_IMAGE' />
-      <meta name='twitter:site' content='@YourTwitterHandle' />
-      <meta name='twitter:creator' content='@YourTwitterHandle' />
-
-      <meta name='theme-color' content='#ffffff' />
-      <meta name='apple-mobile-web-app-title' content='ChaosWeb' />
-      <meta name='application-name' content='ChaosWeb' />
-      <meta name='msapplication-TileColor' content='#ffffff' />
-      <meta name='msapplication-config' content='/browserconfig.xml' />
-      <meta name='apple-mobile-web-app-status-bar-style' content='default' />
+      <meta name='twitter:title' content={title} />
+      <meta name='twitter:description' content={description} />
+      {image && <meta name='twitter:image' content={image} />}
+      {twitterHandle && <meta name='twitter:site' content={twitterHandle} />}
+      {twitterHandle && <meta name='twitter:creator' content={twitterHandle} />}
 
+      {/* Progressive Web App (PWA) Meta Tags */}
+      <meta name='theme-color' content={themeColor} />
       <link rel='icon' href='/favicon.ico' sizes='any' />
       <link rel='icon' href='/favicon.svg' type='image/svg+xml' />
       <link rel='apple-touch-icon' href='/apple-touch-icon.png' />
       <link rel='manifest' href='/manifest.json' />
-    </>
-  )
-}
+      <meta name='apple-mobile-web-app-title' content={title} />
+      <meta name='application-name' content={title} />
+      <meta name='msapplication-TileColor' content={themeColor} />
+      {canonical && <meta name='msapplication-config' content='/browserconfig.xml' />}
+      <meta name='apple-mobile-web-app-status-bar-style' content='default' />
+    </Helmet>
+  );
+};
+
+// Define default props
+Metadata.defaultProps = {
+  title: 'ChaosWeb',
+  description:
+    'Welcome to ChaosWeb — a web design experiment where nothing behaves as it should, and everything is delightfully out of order! Explore unpredictable navigation, bizarre sliders, and a world where scrolling defies gravity.',
+  keywords: 'web design, chaos, experiment, unpredictable, navigation, sliders',
+  author: 'Your Name',
+  robots: 'index, follow',
+  url: 'https://chaosweb.vercel.app',
+  image: 'https://chaosweb.vercel.app/og-image.jpg', // Replace with your actual image URL
+  twitterHandle: '@YourTwitterHandle', // Replace with your actual Twitter handle
+  themeColor: '#ffffff',
+  canonical: 'https://chaosweb.vercel.app',
+};
+
+// Define prop types for better type checking
+Metadata.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  keywords: PropTypes.string,
+  author: PropTypes.string,
+  robots: PropTypes.string,
+  url: PropTypes.string,
+  image: PropTypes.string,
+  twitterHandle: PropTypes.string,
+  themeColor: PropTypes.string,
+  canonical: PropTypes.string,
+};
 
-export default Metadata
+export default Metadata;
\ No newline at end of file