diff --git a/src/app/page.tsx b/src/app/page.tsx
index be489a2..2c2a4fd 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,8 +6,59 @@ import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCa
 import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
 import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
 import FooterBase from '@/components/sections/footer/FooterBase';
+import { useState } from 'react';
 
 export default function CreatorDashboard() {
+  const [metrics, setMetrics] = useState([
+    {
+      id: "1",      title: "Total Earnings",      subtitle: "Revenue from all services and products",      category: "Revenue",      value: "$12,450.50",      buttons: [{ text: "View Details", href: "#" }],
+    },
+    {
+      id: "2",      title: "Subscriber Count",      subtitle: "Active engaged community members",      category: "Community",      value: "3,847",      buttons: [{ text: "Manage Subs", href: "#" }],
+    },
+    {
+      id: "3",      title: "Profile Views",      subtitle: "Total visits to your profile this month",      category: "Engagement",      value: "15,230",      buttons: [{ text: "Analyze", href: "#" }],
+    },
+    {
+      id: "4",      title: "Conversion Rate",      subtitle: "Percentage of visitors becoming subscribers",      category: "Growth",      value: "8.4%",      buttons: [{ text: "Optimize", href: "#" }],
+    },
+  ]);
+
+  const [profilePhoto, setProfilePhoto] = useState(
+    "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AeufBStYsT20rVSz6VwZGbgKZJ/a-modern-creator-dashboard-interface-wit-1772965513803-84c53169.png"
+  );
+
+  const [isEditingMetric, setIsEditingMetric] = useState<string | null>(null);
+  const [editValue, setEditValue] = useState("");
+  const [isEditingPhoto, setIsEditingPhoto] = useState(false);
+  const [photoUrl, setPhotoUrl] = useState(profilePhoto);
+
+  const handleMetricEdit = (metricId: string) => {
+    const metric = metrics.find(m => m.id === metricId);
+    if (metric) {
+      setIsEditingMetric(metricId);
+      setEditValue(metric.value);
+    }
+  };
+
+  const handleMetricSave = (metricId: string) => {
+    setMetrics(metrics.map(m => 
+      m.id === metricId ? { ...m, value: editValue } : m
+    ));
+    setIsEditingMetric(null);
+    setEditValue("");
+  };
+
+  const handlePhotoEdit = () => {
+    setIsEditingPhoto(true);
+    setPhotoUrl(profilePhoto);
+  };
+
+  const handlePhotoSave = () => {
+    setProfilePhoto(photoUrl);
+    setIsEditingPhoto(false);
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="icon-arrow"
@@ -32,49 +83,121 @@ export default function CreatorDashboard() {
           ]}
           brandName="CreatorHub"
           button={{
-            text: "Sign In",            href: "#"}}
+            text: "Sign In",            href: "#"
+          }}
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroCarouselLogo
-          logoText="CREATOR DASHBOARD"
-          description="Track your earnings, subscribers, and profile engagement in real-time with advanced analytics and customizable peak usage graphs."
-          buttons={[
-            { text: "View Dashboard", href: "#analytics" },
-            { text: "Learn More", href: "#features" },
-          ]}
-          slides={[
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AeufBStYsT20rVSz6VwZGbgKZJ/a-modern-creator-dashboard-interface-wit-1772965513803-84c53169.png",              imageAlt: "Creator dashboard interface with metrics"},
-          ]}
-          autoplayDelay={5000}
-          showDimOverlay={true}
-        />
+        <div className="relative">
+          <HeroCarouselLogo
+            logoText="CREATOR DASHBOARD"
+            description="Track your earnings, subscribers, and profile engagement in real-time with advanced analytics and customizable peak usage graphs."
+            buttons={[
+              { text: "View Dashboard", href: "#analytics" },
+              { text: "Learn More", href: "#features" },
+            ]}
+            slides={[
+              {
+                imageSrc: profilePhoto,
+                imageAlt: "Creator dashboard interface with metrics"},
+            ]}
+            autoplayDelay={5000}
+            showDimOverlay={true}
+          />
+          <div className="absolute top-4 right-4 z-10">
+            <button
+              onClick={handlePhotoEdit}
+              className="px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 transition"
+            >
+              Edit Photo
+            </button>
+          </div>
+          {isEditingPhoto && (
+            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+              <div className="bg-white p-6 rounded-lg shadow-lg">
+                <h3 className="text-lg font-semibold mb-4">Edit Profile Photo URL</h3>
+                <input
+                  type="text"
+                  value={photoUrl}
+                  onChange={(e) => setPhotoUrl(e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-300 rounded mb-4"
+                  placeholder="Enter photo URL"
+                />
+                <div className="flex gap-2">
+                  <button
+                    onClick={handlePhotoSave}
+                    className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition"
+                  >
+                    Save
+                  </button>
+                  <button
+                    onClick={() => setIsEditingPhoto(false)}
+                    className="px-4 py-2 bg-gray-400 text-white rounded hover:bg-gray-500 transition"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
       </div>
 
       <div id="metrics" data-section="metrics">
         <MetricCardTen
           title="Your Performance Overview"
-          description="Monitor your key metrics at a glance. Real-time data showing your earnings, subscriber growth, and profile engagement."
+          description="Monitor your key metrics at a glance. Real-time data showing your earnings, subscriber growth, and profile engagement. Click any value to edit."
           textboxLayout="default"
           useInvertedBackground={false}
           animationType="slide-up"
-          metrics={[
-            {
-              id: "1",              title: "Total Earnings",              subtitle: "Revenue from all services and products",              category: "Revenue",              value: "$12,450.50",              buttons: [{ text: "View Details", href: "#" }],
-            },
-            {
-              id: "2",              title: "Subscriber Count",              subtitle: "Active engaged community members",              category: "Community",              value: "3,847",              buttons: [{ text: "Manage Subs", href: "#" }],
-            },
-            {
-              id: "3",              title: "Profile Views",              subtitle: "Total visits to your profile this month",              category: "Engagement",              value: "15,230",              buttons: [{ text: "Analyze", href: "#" }],
-            },
-            {
-              id: "4",              title: "Conversion Rate",              subtitle: "Percentage of visitors becoming subscribers",              category: "Growth",              value: "8.4%",              buttons: [{ text: "Optimize", href: "#" }],
-            },
-          ]}
+          metrics={metrics.map(metric => ({
+            ...metric,
+            buttons: [
+              {
+                text: isEditingMetric === metric.id ? "Save" : "Edit",                onClick: () => {
+                  if (isEditingMetric === metric.id) {
+                    handleMetricSave(metric.id);
+                  } else {
+                    handleMetricEdit(metric.id);
+                  }
+                }
+              }
+            ]
+          }))}
         />
+        {isEditingMetric && (
+          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+            <div className="bg-white p-6 rounded-lg shadow-lg">
+              <h3 className="text-lg font-semibold mb-4">Edit Metric Value</h3>
+              <input
+                type="text"
+                value={editValue}
+                onChange={(e) => setEditValue(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded mb-4"
+                placeholder="Enter new value"
+                autoFocus
+              />
+              <div className="flex gap-2">
+                <button
+                  onClick={() => handleMetricSave(isEditingMetric)}
+                  className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition"
+                >
+                  Save
+                </button>
+                <button
+                  onClick={() => {
+                    setIsEditingMetric(null);
+                    setEditValue("");
+                  }}
+                  className="px-4 py-2 bg-gray-400 text-white rounded hover:bg-gray-500 transition"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
 
       <div id="analytics" data-section="analytics">