diff --git a/client/package-lock.json b/client/package-lock.json
index 3de2066..62002c9 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -45,7 +45,7 @@
         "react-dom": "^18.2.0",
         "react-google-recaptcha": "^3.1.0",
         "react-hot-toast": "^2.4.1",
-        "react-icons": "^5.0.1",
+        "react-icons": "^5.3.0",
         "react-phone-input-2": "^2.15.1",
         "react-phone-number-input": "^3.3.10",
         "react-quill": "^2.0.0",
@@ -6517,7 +6517,8 @@
     },
     "node_modules/react-icons": {
       "version": "5.3.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
       "peerDependencies": {
         "react": "*"
       }
diff --git a/client/package.json b/client/package.json
index d4a1f73..55fb2f1 100644
--- a/client/package.json
+++ b/client/package.json
@@ -47,7 +47,7 @@
     "react-dom": "^18.2.0",
     "react-google-recaptcha": "^3.1.0",
     "react-hot-toast": "^2.4.1",
-    "react-icons": "^5.0.1",
+    "react-icons": "^5.3.0",
     "react-phone-input-2": "^2.15.1",
     "react-phone-number-input": "^3.3.10",
     "react-quill": "^2.0.0",
diff --git a/client/src/component/Dashboard.jsx b/client/src/component/Dashboard.jsx
index d80c97c..d738d21 100644
--- a/client/src/component/Dashboard.jsx
+++ b/client/src/component/Dashboard.jsx
@@ -1,103 +1,183 @@
 // import React from 'react';
-import PropTypes from "prop-types";
-
-
+import { FaUsers, FaMicroblog } from 'react-icons/fa';
+import { PiEyesDuotone } from 'react-icons/pi';
 
-const InsightCard = ({ icon, title, count, progress, color }) => (
-  <div className="bg-white shadow-md rounded-lg p-6 transition-shadow duration-300 hover:shadow-lg">
-    <div className="flex items-center justify-between">
-      <span className={`material-symbols-sharp text-4xl ${color} text-white p-2 rounded-full`}>
-        {icon}
-      </span>
-      <div className="text-right">
-        <h3 className="text-lg font-medium text-gray-700">{title}</h3>
-        <h1 className="text-2xl font-bold text-gray-800">{count}</h1>
-      </div>
-    </div>
-    <div className="mt-4 relative">
-      <div className="progress-circle relative w-16 h-16">
-        <svg className="absolute inset-0" viewBox="0 0 100 100">
-          <circle cx="50" cy="50" r="30" className="text-gray-200" strokeWidth="5" />
-          <circle
-            cx="50"
-            cy="50"
-            r="30"
-            className="text-blue-500"
-            strokeWidth="5"
-            strokeDasharray="150"
-            strokeDashoffset="calc(150 - (150 * 0.8))"
-          />
-        </svg>
-        <div className="absolute inset-0 flex items-center justify-center text-gray-800 text-sm">
-          {progress}
-        </div>
-      </div>
-    </div>
-    <small className="block text-gray-500 mt-2">Last 24 Hours</small>
-  </div>
-);
-
-const PostCard = ({ post }) => (
-  <div className="bg-white shadow-md rounded-lg p-4">
-    <h3 className="text-lg font-semibold text-gray-800">{post.title}</h3>
-    <p className="text-gray-600">{post.content}</p>
-    <small className="text-gray-400">{post.date}</small>
-  </div>
-);
+import PropTypes from "prop-types";
 
-const Dashboard = () => {
-    const posts=[
-        {id:1,title:"title1"},
-    ]
-  // Placeholder data; replace with actual data from backend if needed.
-  const insightsData = [
-    { icon: 'trending_up', title: 'Total Views', count: '100', progress: '80%', color: 'bg-coral' },
-    { icon: 'local_mall', title: 'New Users', count: '323', progress: '50%', color: 'bg-red-400' },
-    { icon: 'stacked_line_chart', title: 'Total Posts', count: '12', progress: '90%', color: 'bg-green-400' },
+const Dashboard = ({ mode }) => {
+  const isDarkMode = mode === 'dark';
+  const blogs = [
+    { id: 1, title: 'Understanding React', author: 'John Doe', category: 'Web Development' },
+    { id: 2, title: 'CSS Tips and Tricks', author: 'Jane Smith', category: 'Design' },
+    { id: 3, title: 'JavaScript Basics', author: 'Alice Johnson', category: 'Programming' },
   ];
 
+  const handleDelete = (id) => {
+    console.log(`Blog with id ${id} deleted`);
+  };
+
   return (
-    <div className="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-4">
+    <div
+      className={`container mt-20 mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-4 ${
+        isDarkMode ? 'bg-gray-900 text-gray-100' : 'bg-white text-gray-800'
+      }`}
+    >
       {/* Header */}
       <header className="col-span-full">
-        <h1 className="text-4xl font-bold text-gray-800 mb-4">Dashboard</h1>
-        <input type="date" className="p-2 border rounded-md text-gray-600" />
+        <h1 className="text-[72px] font-bold mb-4">Dashboard</h1>
       </header>
 
       {/* Insights */}
       <section className="col-span-full grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-        {insightsData.map((item, index) => (
-          <InsightCard key={index} icon={item.icon} title={item.title} count={item.count} progress={item.progress} color={item.color} />
-        ))}
+        <div
+          className={`shadow-md rounded-lg p-6 transition-shadow duration-300 hover:shadow-lg ${
+            isDarkMode ? 'bg-gray-800 text-white' : 'bg-white text-gray-800'
+          }`}
+        >
+          <div className="flex items-center justify-between">
+            <span className="material-symbols-sharp text-4xl bg-coral text-white p-2 rounded-full">
+              <PiEyesDuotone />
+            </span>
+            <div className="text-right">
+              <h3 className="text-lg font-medium">Total Views</h3>
+              <h1 className="text-2xl font-bold">100</h1>
+            </div>
+          </div>
+          <div className="mt-4 relative">
+            <div className="progress-circle relative w-16 h-16">
+              <svg className="absolute inset-0" viewBox="0 0 100 100">
+                <circle cx="50" cy="50" r="30" className="text-gray-200" strokeWidth="5" />
+                <circle
+                  cx="50"
+                  cy="50"
+                  r="30"
+                  className="text-blue-500"
+                  strokeWidth="5"
+                  strokeDasharray="150"
+                  strokeDashoffset="calc(150 - (150 * 0.8))"
+                />
+              </svg>
+              <div className="absolute inset-0 flex items-center justify-center text-gray-800 text-sm">
+                80%
+              </div>
+            </div>
+          </div>
+          <small className="block text-gray-500 mt-2">Last 24 Hours</small>
+        </div>
+
+        <div
+          className={`shadow-md rounded-lg p-6 transition-shadow duration-300 hover:shadow-lg ${
+            isDarkMode ? 'bg-gray-800 text-white' : 'bg-white text-gray-800'
+          }`}
+        >
+          <div className="flex items-center justify-between">
+            <span className="material-symbols-sharp text-4xl bg-red-400 text-white p-2 rounded-full">
+              <FaUsers />
+            </span>
+            <div className="text-right">
+              <h3 className="text-lg font-medium">New Users</h3>
+              <h1 className="text-2xl font-bold">323</h1>
+            </div>
+          </div>
+          <div className="mt-4 relative">
+            <div className="progress-circle relative w-16 h-16">
+              <svg className="absolute inset-0" viewBox="0 0 100 100">
+                <circle cx="50" cy="50" r="30" className="text-gray-200" strokeWidth="5" />
+                <circle
+                  cx="50"
+                  cy="50"
+                  r="30"
+                  className="text-blue-500"
+                  strokeWidth="5"
+                  strokeDasharray="150"
+                  strokeDashoffset="calc(150 - (150 * 0.5))"
+                />
+              </svg>
+              <div className="absolute inset-0 flex items-center justify-center text-gray-800 text-sm">
+                50%
+              </div>
+            </div>
+          </div>
+          <small className="block text-gray-500 mt-2">Last 24 Hours</small>
+        </div>
+
+        <div
+          className={`shadow-md rounded-lg p-6 transition-shadow duration-300 hover:shadow-lg ${
+            isDarkMode ? 'bg-gray-800 text-white' : 'bg-white text-gray-800'
+          }`}
+        >
+          <div className="flex items-center justify-between">
+            <span className="material-symbols-sharp text-4xl bg-green-400 text-white p-2 rounded-full">
+              <FaMicroblog />
+            </span>
+            <div className="text-right">
+              <h3 className="text-lg font-medium">Total Posts</h3>
+              <h1 className="text-2xl font-bold">12</h1>
+            </div>
+          </div>
+          <div className="mt-4 relative">
+            <div className="progress-circle relative w-16 h-16">
+              <svg className="absolute inset-0" viewBox="0 0 100 100">
+                <circle cx="50" cy="50" r="30" className="text-gray-200" strokeWidth="5" />
+                <circle
+                  cx="50"
+                  cy="50"
+                  r="30"
+                  className="text-blue-500"
+                  strokeWidth="5"
+                  strokeDasharray="150"
+                  strokeDashoffset="calc(150 - (150 * 0.9))"
+                />
+              </svg>
+              <div className="absolute inset-0 flex items-center justify-center text-gray-800 text-sm">
+                90%
+              </div>
+            </div>
+          </div>
+          <small className="block text-gray-500 mt-2">Last 24 Hours</small>
+        </div>
       </section>
 
-      {/* Recent Posts */}
+      {/* Blog Table */}
       <section className="col-span-full mt-6">
-        <h2 className="text-2xl font-semibold text-gray-800 mb-4">Recent Posts</h2>
-        <div className="space-y-4">
-          {posts && posts.length > 0 ? (
-            posts.map((post, index) => <PostCard key={index} post={post} />)
-          ) : (
-            <p className="text-gray-600">No posts available.</p>
-          )}
-        </div>
-        <a href="#" className="text-blue-500 mt-4 inline-block">Show All</a>
+        <h2 className="text-2xl font-semibold mb-4">Blog Posts</h2>
+        <table
+          className={`min-w-full border ${isDarkMode ? 'bg-gray-800 border-gray-600' : 'bg-white border-gray-200'}`}
+        >
+          <thead>
+            <tr>
+              <th className="px-4 py-2 border-b">Title</th>
+              <th className="px-4 py-2 border-b">Author</th>
+              <th className="px-4 py-2 border-b">Category</th>
+              <th className="px-4 py-2 border-b">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {blogs.map((blog) => (
+              <tr key={blog.id} className={isDarkMode ? 'text-gray-200' : 'text-gray-700'}>
+                <td className="px-4 py-2 border-b">{blog.title}</td>
+                <td className="px-4 py-2 border-b">{blog.author}</td>
+                <td className="px-4 py-2 border-b">{blog.category}</td>
+                <td className="px-4 py-2 border-b">
+                  <button
+                    className={`px-3 py-1 rounded ${isDarkMode ? 'bg-red-600' : 'bg-red-500'} text-white`}
+                    onClick={() => handleDelete(blog.id)}
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <a href="#" className={`text-blue-500 mt-4 inline-block ${isDarkMode ? 'text-blue-300' : ''}`}>
+          Show All
+        </a>
       </section>
     </div>
   );
 };
-PostCard.propTypes = {
-    post: PropTypes.string.isRequired,
-};
 Dashboard.propTypes = {
-    post: PropTypes.string.isRequired,
-};
-InsightCard.propTypes = {
-    post: PropTypes.string.isRequired,
-    icon: PropTypes.string.isRequired, 
-    title: PropTypes.string.isRequired, 
-    count: PropTypes.string.isRequired,
-    progress: PropTypes.string.isRequired, 
-    color: PropTypes.string.isRequired
+  mode: PropTypes.string, // Function to notify parent about profile update
 };
 export default Dashboard;