diff --git a/.snapshots/config.json b/.snapshots/config.json
new file mode 100644
index 000000000..dfadca277
--- /dev/null
+++ b/.snapshots/config.json
@@ -0,0 +1,151 @@
+{
+    "excluded_patterns": [
+        ".git",
+        ".gitignore",
+        "gradle",
+        "gradlew",
+        "gradlew.*",
+        "node_modules",
+        ".snapshots",
+        ".idea",
+        ".vscode",
+        "*.log",
+        "*.tmp",
+        "target",
+        "dist",
+        "build",
+        ".DS_Store",
+        "*.bak",
+        "*.swp",
+        "*.swo",
+        "*.lock",
+        "*.iml",
+        "coverage",
+        "*.min.js",
+        "*.min.css",
+        "__pycache__",
+        ".marketing",
+        ".env",
+        ".env.*",
+        "*.jpg",
+        "*.jpeg",
+        "*.png",
+        "*.gif",
+        "*.bmp",
+        "*.tiff",
+        "*.ico",
+        "*.svg",
+        "*.webp",
+        "*.psd",
+        "*.ai",
+        "*.eps",
+        "*.indd",
+        "*.raw",
+        "*.cr2",
+        "*.nef",
+        "*.mp4",
+        "*.mov",
+        "*.avi",
+        "*.wmv",
+        "*.flv",
+        "*.mkv",
+        "*.webm",
+        "*.m4v",
+        "*.wfp",
+        "*.prproj",
+        "*.aep",
+        "*.psb",
+        "*.xcf",
+        "*.sketch",
+        "*.fig",
+        "*.xd",
+        "*.db",
+        "*.sqlite",
+        "*.sqlite3",
+        "*.mdb",
+        "*.accdb",
+        "*.frm",
+        "*.myd",
+        "*.myi",
+        "*.ibd",
+        "*.dbf",
+        "*.rdb",
+        "*.aof",
+        "*.pdb",
+        "*.sdb",
+        "*.s3db",
+        "*.ddb",
+        "*.db-shm",
+        "*.db-wal",
+        "*.sqlitedb",
+        "*.sql.gz",
+        "*.bak.sql",
+        "dump.sql",
+        "dump.rdb",
+        "*.vsix",
+        "*.jar",
+        "*.war",
+        "*.ear",
+        "*.zip",
+        "*.tar",
+        "*.tar.gz",
+        "*.tgz",
+        "*.rar",
+        "*.7z",
+        "*.exe",
+        "*.dll",
+        "*.so",
+        "*.dylib",
+        "*.app",
+        "*.dmg",
+        "*.iso",
+        "*.msi",
+        "*.deb",
+        "*.rpm",
+        "*.apk",
+        "*.aab",
+        "*.ipa",
+        "*.pkg",
+        "*.nupkg",
+        "*.snap",
+        "*.whl",
+        "*.gem",
+        "*.pyc",
+        "*.pyo",
+        "*.pyd",
+        "*.class",
+        "*.o",
+        "*.obj",
+        "*.lib",
+        "*.a",
+        "*.map",
+        ".npmrc"
+    ],
+    "default": {
+        "default_prompt": "Enter your prompt here",
+        "default_include_all_files": false,
+        "default_include_entire_project_structure": true
+    },
+    "included_patterns": [
+        "build.gradle",
+        "settings.gradle",
+        "gradle.properties",
+        "pom.xml",
+        "Makefile",
+        "CMakeLists.txt",
+        "package.json",
+        "requirements.txt",
+        "Pipfile",
+        "Gemfile",
+        "composer.json",
+        ".editorconfig",
+        ".eslintrc.json",
+        ".eslintrc.js",
+        ".prettierrc",
+        ".babelrc",
+        ".dockerignore",
+        ".gitattributes",
+        ".stylelintrc",
+        ".npmrc"
+    ]
+}
\ No newline at end of file
diff --git a/.snapshots/readme.md b/.snapshots/readme.md
new file mode 100644
index 000000000..21fa917db
--- /dev/null
+++ b/.snapshots/readme.md
@@ -0,0 +1,11 @@
+# Snapshots Directory
+
+This directory contains snapshots of your code for AI interactions. Each snapshot is a markdown file that includes relevant code context and project structure information.
+
+## What's included in snapshots?
+- Selected code files and their contents
+- Project structure (if enabled)
+- Your prompt/question for the AI
+
+## Configuration
+You can customize snapshot behavior in `config.json`.
diff --git a/.snapshots/sponsors.md b/.snapshots/sponsors.md
new file mode 100644
index 000000000..2df337f43
--- /dev/null
+++ b/.snapshots/sponsors.md
@@ -0,0 +1,44 @@
+# Thank you for using Snapshots for AI
+
+Thanks for using Snapshots for AI. We hope this tool has helped you solve a problem or two. 
+
+If you would like to support our work, please help us by considering the following offers and requests:
+
+## Ways to Support
+
+### Join the GBTI Network!!! 🙏🙏🙏
+The GBTI Network is a community of developers who are passionate about open source and community-driven development. Members enjoy access to exclussive tools, resources, a private MineCraft server, a listing in our members directory, co-op opportunities and more.
+
+- Support our work by becoming a [GBTI Network member](https://gbti.network/membership/).
+
+### Try out BugHerd 🐛
+BugHerd is a visual feedback and bug-tracking tool designed to streamline website development by enabling users to pin feedback directly onto web pages. This approach facilitates clear communication among clients, designers, developers, and project managers.
+
+- Start your free trial with [BugHerd](https://partners.bugherd.com/55z6c8az8rvr) today.
+
+### Hire Developers from Codeable 👥
+Codeable connects you with top-tier professionals skilled in frameworks and technologies such as Laravel, React, Django, Node, Vue.js, Angular, Ruby on Rails, and Node.js. Don't let the WordPress focus discourage you. Codeable experts do it all.
+
+- Visit [Codeable](https://www.codeable.io/developers/?ref=z8h3e) to hire your next team member. 
+
+### Lead positive reviews on our marketplace listing ⭐⭐⭐⭐⭐
+- Rate us on [VSCode marketplace](https://marketplace.visualstudio.com/items?itemName=GBTI.snapshots-for-ai)
+- Review us on [Cursor marketplace](https://open-vsx.org/extension/GBTI/snapshots-for-ai)
+
+### Star Our GitHub Repository ⭐
+- Star and watch our [repository](https://github.com/gbti-network/vscode-snapshots-for-ai)
+
+### 📡 Stay Connected
+Follow us on your favorite platforms for updates, news, and community discussions:
+- **[Twitter/X](https://twitter.com/gbti_network)**
+- **[GitHub](https://github.com/gbti-network)**
+- **[YouTube](https://www.youtube.com/channel/UCh4FjB6r4oWQW-QFiwqv-UA)**
+- **[Dev.to](https://dev.to/gbti)**
+- **[Daily.dev](https://dly.to/zfCriM6JfRF)**
+- **[Hashnode](https://gbti.hashnode.dev/)**
+- **[Discord Community](https://gbti.network)**
+- **[Reddit Community](https://www.reddit.com/r/GBTI_network)**
+
+---
+
+Thank you for supporting open source software! 🙏
diff --git a/src/components/ecommerce/DemographicCard.tsx b/src/components/ecommerce/DemographicCard.tsx
index f2b552bda..b85d1a4e5 100644
--- a/src/components/ecommerce/DemographicCard.tsx
+++ b/src/components/ecommerce/DemographicCard.tsx
@@ -1,12 +1,57 @@
 "use client";
 import Image from "next/image";
-
 import CountryMap from "./CountryMap";
 import { useState } from "react";
 import { MoreDotIcon } from "@/icons";
 import { Dropdown } from "../ui/dropdown/Dropdown";
 import { DropdownItem } from "../ui/dropdown/DropdownItem";
 
+interface CountryData {
+  name: string;
+  flag: string;
+  customers: number;
+  percentage: number;
+  color: string;
+}
+
+const countryData: CountryData[] = [
+  {
+    name: "United States",
+    flag: "/images/country/country-01.svg",
+    customers: 2379,
+    percentage: 63,
+    color: "bg-brand-500",
+  },
+  {
+    name: "France",
+    flag: "/images/country/country-02.svg",
+    customers: 589,
+    percentage: 16,
+    color: "bg-success-500",
+  },
+  {
+    name: "Germany",
+    flag: "/images/country/country-03.svg",
+    customers: 425,
+    percentage: 11,
+    color: "bg-orange-500",
+  },
+  {
+    name: "Japan",
+    flag: "/images/country/country-04.svg",
+    customers: 287,
+    percentage: 8,
+    color: "bg-blue-light-500",
+  },
+  {
+    name: "Others",
+    flag: "/images/country/country-05.svg",
+    customers: 102,
+    percentage: 2,
+    color: "bg-gray-400",
+  },
+];
+
 export default function DemographicCard() {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -23,10 +68,10 @@ export default function DemographicCard() {
       <div className="flex justify-between">
         <div>
           <h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
-            Customers Demographic
+            Customers by Location
           </h3>
           <p className="mt-1 text-gray-500 text-theme-sm dark:text-gray-400">
-            Number of customer based on country
+            Geographic distribution of your customer base
           </p>
         </div>
 
@@ -43,18 +88,19 @@ export default function DemographicCard() {
               onItemClick={closeDropdown}
               className="flex w-full font-normal text-left text-gray-500 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
             >
-              View More
+              View Details
             </DropdownItem>
             <DropdownItem
               onItemClick={closeDropdown}
               className="flex w-full font-normal text-left text-gray-500 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
             >
-              Delete
+              Export Data
             </DropdownItem>
           </Dropdown>
         </div>
       </div>
-      <div className="px-4 py-6 my-6 overflow-hidden border border-gary-200 rounded-2xl bg-gray-50 dark:border-gray-800 dark:bg-gray-900 sm:px-6">
+
+      <div className="px-4 py-6 my-6 overflow-hidden border border-gray-200 rounded-2xl bg-gray-50 dark:border-gray-800 dark:bg-gray-900 sm:px-6">
         <div
           id="mapOne"
           className="mapOne map-btn -mx-4 -my-6 h-[212px] w-[252px] 2xsm:w-[307px] xsm:w-[358px] sm:-mx-6 md:w-[668px] lg:w-[634px] xl:w-[393px] 2xl:w-[554px]"
@@ -63,68 +109,42 @@ export default function DemographicCard() {
         </div>
       </div>
 
-      <div className="space-y-5">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div className="items-center w-full rounded-full max-w-8">
-              <Image
-                width={48}
-                height={48}
-                src="/images/country/country-01.svg"
-                alt="usa"
-                className="w-full"
-              />
+      <div className="space-y-4">
+        {countryData.map((country, index) => (
+          <div key={index} className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="items-center w-full rounded-full max-w-8">
+                <Image
+                  width={48}
+                  height={48}
+                  src={country.flag}
+                  alt={country.name}
+                  className="w-full"
+                />
+              </div>
+              <div>
+                <p className="font-semibold text-gray-800 text-theme-sm dark:text-white/90">
+                  {country.name}
+                </p>
+                <span className="block text-gray-500 text-theme-xs dark:text-gray-400">
+                  {country.customers.toLocaleString()} Customers
+                </span>
+              </div>
             </div>
-            <div>
-              <p className="font-semibold text-gray-800 text-theme-sm dark:text-white/90">
-                USA
-              </p>
-              <span className="block text-gray-500 text-theme-xs dark:text-gray-400">
-                2,379 Customers
-              </span>
-            </div>
-          </div>
 
-          <div className="flex w-full max-w-[140px] items-center gap-3">
-            <div className="relative block h-2 w-full max-w-[100px] rounded-sm bg-gray-200 dark:bg-gray-800">
-              <div className="absolute left-0 top-0 flex h-full w-[79%] items-center justify-center rounded-sm bg-brand-500 text-xs font-medium text-white"></div>
-            </div>
-            <p className="font-medium text-gray-800 text-theme-sm dark:text-white/90">
-              79%
-            </p>
-          </div>
-        </div>
-
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div className="items-center w-full rounded-full max-w-8">
-              <Image
-                width={48}
-                height={48}
-                className="w-full"
-                src="/images/country/country-02.svg"
-                alt="france"
-              />
-            </div>
-            <div>
-              <p className="font-semibold text-gray-800 text-theme-sm dark:text-white/90">
-                France
+            <div className="flex items-center gap-3">
+              <div className="relative block h-2 w-24 rounded-sm bg-gray-200 dark:bg-gray-800">
+                <div
+                  className={`absolute left-0 top-0 flex h-full items-center justify-center rounded-sm ${country.color} text-xs font-medium text-white`}
+                  style={{ width: `${country.percentage}%` }}
+                ></div>
+              </div>
+              <p className="w-10 text-right font-medium text-gray-800 text-theme-sm dark:text-white/90">
+                {country.percentage}%
               </p>
-              <span className="block text-gray-500 text-theme-xs dark:text-gray-400">
-                589 Customers
-              </span>
             </div>
           </div>
-
-          <div className="flex w-full max-w-[140px] items-center gap-3">
-            <div className="relative block h-2 w-full max-w-[100px] rounded-sm bg-gray-200 dark:bg-gray-800">
-              <div className="absolute left-0 top-0 flex h-full w-[23%] items-center justify-center rounded-sm bg-brand-500 text-xs font-medium text-white"></div>
-            </div>
-            <p className="font-medium text-gray-800 text-theme-sm dark:text-white/90">
-              23%
-            </p>
-          </div>
-        </div>
+        ))}
       </div>
     </div>
   );
diff --git a/src/components/ecommerce/EcommerceMetrics.tsx b/src/components/ecommerce/EcommerceMetrics.tsx
index 58ab6c15d..873dd4e12 100644
--- a/src/components/ecommerce/EcommerceMetrics.tsx
+++ b/src/components/ecommerce/EcommerceMetrics.tsx
@@ -1,56 +1,96 @@
 "use client";
 import React from "react";
 import Badge from "../ui/badge/Badge";
-import { ArrowDownIcon, ArrowUpIcon, BoxIconLine, GroupIcon } from "@/icons";
+import { ArrowDownIcon, ArrowUpIcon, BoxIconLine, GroupIcon, DollarLineIcon, BoltIcon } from "@/icons";
 
-export const EcommerceMetrics = () => {
+interface MetricCardProps {
+  icon: React.ReactNode;
+  iconBgColor: string;
+  iconColor: string;
+  title: string;
+  value: string;
+  trend: "up" | "down";
+  trendValue: string;
+}
+
+const MetricCard: React.FC<MetricCardProps> = ({
+  icon,
+  iconBgColor,
+  iconColor,
+  title,
+  value,
+  trend,
+  trendValue,
+}) => {
   return (
-    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-6">
-      {/* <!-- Metric Item Start --> */}
-      <div className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
-        <div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-xl dark:bg-gray-800">
-          <GroupIcon className="text-gray-800 size-6 dark:text-white/90" />
-        </div>
+    <div className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
+      <div className={`flex items-center justify-center w-12 h-12 rounded-xl ${iconBgColor}`}>
+        <div className={iconColor}>{icon}</div>
+      </div>
 
-        <div className="flex items-end justify-between mt-5">
-          <div>
-            <span className="text-sm text-gray-500 dark:text-gray-400">
-              Customers
-            </span>
-            <h4 className="mt-2 font-bold text-gray-800 text-title-sm dark:text-white/90">
-              3,782
-            </h4>
-          </div>
-          <Badge color="success">
-            <ArrowUpIcon />
-            11.01%
-          </Badge>
+      <div className="flex items-end justify-between mt-5">
+        <div>
+          <span className="text-sm text-gray-500 dark:text-gray-400">
+            {title}
+          </span>
+          <h4 className="mt-2 font-bold text-gray-800 text-title-sm dark:text-white/90">
+            {value}
+          </h4>
         </div>
+        <Badge color={trend === "up" ? "success" : "error"}>
+          {trend === "up" ? <ArrowUpIcon /> : <ArrowDownIcon className={trend === "down" ? "text-error-500" : ""} />}
+          {trendValue}
+        </Badge>
       </div>
-      {/* <!-- Metric Item End --> */}
+    </div>
+  );
+};
 
-      {/* <!-- Metric Item Start --> */}
-      <div className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
-        <div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-xl dark:bg-gray-800">
-          <BoxIconLine className="text-gray-800 dark:text-white/90" />
-        </div>
-        <div className="flex items-end justify-between mt-5">
-          <div>
-            <span className="text-sm text-gray-500 dark:text-gray-400">
-              Orders
-            </span>
-            <h4 className="mt-2 font-bold text-gray-800 text-title-sm dark:text-white/90">
-              5,359
-            </h4>
-          </div>
+export const EcommerceMetrics = () => {
+  const metrics: MetricCardProps[] = [
+    {
+      icon: <GroupIcon className="size-6" />,
+      iconBgColor: "bg-brand-50 dark:bg-brand-500/15",
+      iconColor: "text-brand-500",
+      title: "Total Customers",
+      value: "3,782",
+      trend: "up",
+      trendValue: "11.01%",
+    },
+    {
+      icon: <BoxIconLine className="size-6" />,
+      iconBgColor: "bg-orange-50 dark:bg-orange-500/15",
+      iconColor: "text-orange-500",
+      title: "Total Orders",
+      value: "5,359",
+      trend: "down",
+      trendValue: "9.05%",
+    },
+    {
+      icon: <DollarLineIcon className="size-6" />,
+      iconBgColor: "bg-success-50 dark:bg-success-500/15",
+      iconColor: "text-success-500",
+      title: "Total Revenue",
+      value: "$48,295",
+      trend: "up",
+      trendValue: "15.3%",
+    },
+    {
+      icon: <BoltIcon className="size-6" />,
+      iconBgColor: "bg-blue-light-50 dark:bg-blue-light-500/15",
+      iconColor: "text-blue-light-500",
+      title: "Net Profit",
+      value: "$12,847",
+      trend: "up",
+      trendValue: "8.7%",
+    },
+  ];
 
-          <Badge color="error">
-            <ArrowDownIcon className="text-error-500" />
-            9.05%
-          </Badge>
-        </div>
-      </div>
-      {/* <!-- Metric Item End --> */}
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4 md:gap-6">
+      {metrics.map((metric, index) => (
+        <MetricCard key={index} {...metric} />
+      ))}
     </div>
   );
 };
diff --git a/src/components/ecommerce/MonthlySalesChart.tsx b/src/components/ecommerce/MonthlySalesChart.tsx
index ed387cea1..b92029a93 100644
--- a/src/components/ecommerce/MonthlySalesChart.tsx
+++ b/src/components/ecommerce/MonthlySalesChart.tsx
@@ -109,10 +109,15 @@ export default function MonthlySalesChart() {
 
   return (
     <div className="overflow-hidden rounded-2xl border border-gray-200 bg-white px-5 pt-5 dark:border-gray-800 dark:bg-white/[0.03] sm:px-6 sm:pt-6">
-      <div className="flex items-center justify-between">
-        <h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
-          Monthly Sales
-        </h3>
+      <div className="flex items-start justify-between mb-4">
+        <div>
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
+            Monthly Sales
+          </h3>
+          <p className="mt-1 text-gray-500 text-theme-sm dark:text-gray-400">
+            Sales performance overview by month
+          </p>
+        </div>
 
         <div className="relative inline-block">
           <button onClick={toggleDropdown} className="dropdown-toggle">
@@ -127,13 +132,13 @@ export default function MonthlySalesChart() {
               onItemClick={closeDropdown}
               className="flex w-full font-normal text-left text-gray-500 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
             >
-              View More
+              View Details
             </DropdownItem>
             <DropdownItem
               onItemClick={closeDropdown}
               className="flex w-full font-normal text-left text-gray-500 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
             >
-              Delete
+              Export Data
             </DropdownItem>
           </Dropdown>
         </div>
diff --git a/src/components/ecommerce/MonthlyTarget.tsx b/src/components/ecommerce/MonthlyTarget.tsx
index d4f66db55..9c8620c8c 100644
--- a/src/components/ecommerce/MonthlyTarget.tsx
+++ b/src/components/ecommerce/MonthlyTarget.tsx
@@ -1,13 +1,11 @@
 "use client";
-// import Chart from "react-apexcharts";
 import { ApexOptions } from "apexcharts";
-
 import dynamic from "next/dynamic";
 import { Dropdown } from "../ui/dropdown/Dropdown";
 import { MoreDotIcon } from "@/icons";
 import { useState } from "react";
 import { DropdownItem } from "../ui/dropdown/DropdownItem";
-// Dynamically import the ReactApexChart component
+
 const ReactApexChart = dynamic(() => import("react-apexcharts"), {
   ssr: false,
 });
@@ -19,7 +17,7 @@ export default function MonthlyTarget() {
     chart: {
       fontFamily: "Outfit, sans-serif",
       type: "radialBar",
-      height: 330,
+      height: 280,
       sparkline: {
         enabled: true,
       },
@@ -29,12 +27,12 @@ export default function MonthlyTarget() {
         startAngle: -85,
         endAngle: 85,
         hollow: {
-          size: "80%",
+          size: "75%",
         },
         track: {
           background: "#E4E7EC",
           strokeWidth: "100%",
-          margin: 5, // margin is in pixels
+          margin: 5,
         },
         dataLabels: {
           name: {
@@ -73,15 +71,15 @@ export default function MonthlyTarget() {
   }
 
   return (
-    <div className="rounded-2xl border border-gray-200 bg-gray-100 dark:border-gray-800 dark:bg-white/[0.03]">
-      <div className="px-5 pt-5 bg-white shadow-default rounded-2xl pb-11 dark:bg-gray-900 sm:px-6 sm:pt-6">
+    <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
+      <div className="px-5 pt-5 sm:px-6 sm:pt-6">
         <div className="flex justify-between">
           <div>
             <h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
-              Monthly Target
+              Monthly Performance
             </h3>
             <p className="mt-1 font-normal text-gray-500 text-theme-sm dark:text-gray-400">
-              Target you’ve set for each month
+              Current month revenue goal progress
             </p>
           </div>
           <div className="relative inline-block">
@@ -98,59 +96,45 @@ export default function MonthlyTarget() {
                 onItemClick={closeDropdown}
                 className="flex w-full font-normal text-left text-gray-500 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
               >
-                View More
+                View Details
               </DropdownItem>
               <DropdownItem
                 tag="a"
                 onItemClick={closeDropdown}
                 className="flex w-full font-normal text-left text-gray-500 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
               >
-                Delete
+                Export Report
               </DropdownItem>
             </Dropdown>
           </div>
         </div>
-        <div className="relative ">
-          <div className="max-h-[330px]">
+
+        <div className="relative mt-6">
+          <div className="max-h-[280px] flex justify-center">
             <ReactApexChart
               options={options}
               series={series}
               type="radialBar"
-              height={330}
+              height={280}
             />
           </div>
-
-          <span className="absolute left-1/2 top-full -translate-x-1/2 -translate-y-[95%] rounded-full bg-success-50 px-3 py-1 text-xs font-medium text-success-600 dark:bg-success-500/15 dark:text-success-500">
-            +10%
+          <span className="absolute left-1/2 top-full -translate-x-1/2 -translate-y-[110%] rounded-full bg-success-50 px-3 py-1 text-xs font-medium text-success-600 dark:bg-success-500/15 dark:text-success-500">
+            +12% vs Last Month
           </span>
         </div>
-        <p className="mx-auto mt-10 w-full max-w-[380px] text-center text-sm text-gray-500 sm:text-base">
-          You earn $3287 today, it&apos;s higher than last month. Keep up your
-          good work!
+
+        <p className="mx-auto mt-8 w-full max-w-[380px] text-center text-sm text-gray-500 sm:text-base">
+          You&apos;ve earned <span className="font-semibold text-gray-800 dark:text-white/90">$15,110</span> of your <span className="font-semibold text-gray-800 dark:text-white/90">$20,000</span> monthly goal
         </p>
       </div>
 
-      <div className="flex items-center justify-center gap-5 px-6 py-3.5 sm:gap-8 sm:py-5">
+      <div className="flex items-center justify-center gap-5 px-6 py-5 border-t border-gray-100 dark:border-gray-800 sm:gap-8">
         <div>
           <p className="mb-1 text-center text-gray-500 text-theme-xs dark:text-gray-400 sm:text-sm">
-            Target
+            Monthly Goal
           </p>
           <p className="flex items-center justify-center gap-1 text-base font-semibold text-gray-800 dark:text-white/90 sm:text-lg">
-            $20K
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 16 16"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M7.26816 13.6632C7.4056 13.8192 7.60686 13.9176 7.8311 13.9176C7.83148 13.9176 7.83187 13.9176 7.83226 13.9176C8.02445 13.9178 8.21671 13.8447 8.36339 13.6981L12.3635 9.70076C12.6565 9.40797 12.6567 8.9331 12.3639 8.6401C12.0711 8.34711 11.5962 8.34694 11.3032 8.63973L8.5811 11.36L8.5811 2.5C8.5811 2.08579 8.24531 1.75 7.8311 1.75C7.41688 1.75 7.0811 2.08579 7.0811 2.5L7.0811 11.3556L4.36354 8.63975C4.07055 8.34695 3.59568 8.3471 3.30288 8.64009C3.01008 8.93307 3.01023 9.40794 3.30321 9.70075L7.26816 13.6632Z"
-                fill="#D92D20"
-              />
-            </svg>
+            $20,000
           </p>
         </div>
 
@@ -158,10 +142,10 @@ export default function MonthlyTarget() {
 
         <div>
           <p className="mb-1 text-center text-gray-500 text-theme-xs dark:text-gray-400 sm:text-sm">
-            Revenue
+            Earned This Month
           </p>
-          <p className="flex items-center justify-center gap-1 text-base font-semibold text-gray-800 dark:text-white/90 sm:text-lg">
-            $20K
+          <p className="flex items-center justify-center gap-1 text-base font-semibold text-success-600 dark:text-success-500 sm:text-lg">
+            $15,110
             <svg
               width="16"
               height="16"
@@ -183,24 +167,10 @@ export default function MonthlyTarget() {
 
         <div>
           <p className="mb-1 text-center text-gray-500 text-theme-xs dark:text-gray-400 sm:text-sm">
-            Today
+            Remaining
           </p>
-          <p className="flex items-center justify-center gap-1 text-base font-semibold text-gray-800 dark:text-white/90 sm:text-lg">
-            $20K
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 16 16"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M7.60141 2.33683C7.73885 2.18084 7.9401 2.08243 8.16435 2.08243C8.16475 2.08243 8.16516 2.08243 8.16556 2.08243C8.35773 2.08219 8.54998 2.15535 8.69664 2.30191L12.6968 6.29924C12.9898 6.59203 12.9899 7.0669 12.6971 7.3599C12.4044 7.6529 11.9295 7.65306 11.6365 7.36027L8.91435 4.64004L8.91435 13.5C8.91435 13.9142 8.57856 14.25 8.16435 14.25C7.75013 14.25 7.41435 13.9142 7.41435 13.5L7.41435 4.64442L4.69679 7.36025C4.4038 7.65305 3.92893 7.6529 3.63613 7.35992C3.34333 7.06693 3.34348 6.59206 3.63646 6.29926L7.60141 2.33683Z"
-                fill="#039855"
-              />
-            </svg>
+          <p className="flex items-center justify-center gap-1 text-base font-semibold text-gray-600 dark:text-gray-400 sm:text-lg">
+            $4,890
           </p>
         </div>
       </div>
diff --git a/src/components/ecommerce/RecentOrders.tsx b/src/components/ecommerce/RecentOrders.tsx
index d06a073a9..cf975071b 100644
--- a/src/components/ecommerce/RecentOrders.tsx
+++ b/src/components/ecommerce/RecentOrders.tsx
@@ -182,10 +182,10 @@ export default function RecentOrders() {
                   </div>
                 </TableCell>
                 <TableCell className="py-3 text-gray-500 text-theme-sm dark:text-gray-400">
-                  {product.price}
+                  {product.category}
                 </TableCell>
                 <TableCell className="py-3 text-gray-500 text-theme-sm dark:text-gray-400">
-                  {product.category}
+                  {product.price}
                 </TableCell>
                 <TableCell className="py-3 text-gray-500 text-theme-sm dark:text-gray-400">
                   <Badge
diff --git a/src/components/ecommerce/StatisticsChart.tsx b/src/components/ecommerce/StatisticsChart.tsx
index a88e71be2..6bc7d4f40 100644
--- a/src/components/ecommerce/StatisticsChart.tsx
+++ b/src/components/ecommerce/StatisticsChart.tsx
@@ -151,10 +151,10 @@ export default function StatisticsChart() {
       <div className="flex flex-col gap-5 mb-6 sm:flex-row sm:justify-between">
         <div className="w-full">
           <h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
-            Statistics
+            Sales & Revenue Trends
           </h3>
           <p className="mt-1 text-gray-500 text-theme-sm dark:text-gray-400">
-            Target you've set for each month
+            Monthly performance overview across all channels
           </p>
         </div>
         <div className="flex items-center gap-3 sm:justify-end">