diff --git a/client/public/tokenomics.png b/client/public/tokenomics.png
new file mode 100644
index 0000000..324f769
Binary files /dev/null and b/client/public/tokenomics.png differ
diff --git a/client/src/components/tokenomics.tsx b/client/src/components/tokenomics.tsx
index eb4a16d..8cef0f8 100644
--- a/client/src/components/tokenomics.tsx
+++ b/client/src/components/tokenomics.tsx
@@ -19,72 +19,58 @@ const vestingData = [
 
 const Tokenomics: React.FC = () => {
   return (
-    <div id="tokenomics" className="grid md:grid-cols-2 gap-10 items-center justify-center p-10 w-full">
-      {/* Animated Pie Chart */}
-      <motion.div
-        initial={{ opacity: 0, scale: 0.8 }}
-        animate={{ opacity: 1, scale: 1 }}
-        transition={{ duration: 0.8 }}
-        className="flex justify-center"
-      >
-        <ResponsiveContainer width={600} height={600}>
-          <PieChart>
-            <Pie
-              data={data}
-              cx="50%"
-              cy="50%"
-              innerRadius={120}
-              outerRadius={180}
-              fill="#8884d8"
-              paddingAngle={5}
-              dataKey="value"
-              className="w-full h-full"
-            >
-              {data.map((entry, index) => (
-                <Cell key={`cell-${index}`} fill={entry.color} />
-              ))}
-            </Pie>
-          </PieChart>
-        </ResponsiveContainer>
-      </motion.div>
+    <div className="container mx-auto">
+      <div id="tokenomics" className="grid grid-cols-1 gap-10 items-center justify-center p-10 w-full">
+        {/* Animated Pie Chart */}
+        <h2 className="text-4xl text-center font-orbitron font-bold mb-4">Tokenomics</h2>
+        <motion.div
+          initial={{ opacity: 0, scale: 0.8 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.8 }}
+          className="flex justify-center"
+        >
 
-      {/* Tokenomics Info */}
-      <motion.div
-        initial={{ opacity: 0, x: 50 }}
-        animate={{ opacity: 1, x: 0 }}
-        transition={{ duration: 0.8 }}
-        className="text-left"
-      >
-        <h2 className="text-4xl font-orbitron font-bold mb-4">Tokenomics</h2>
-        <p className="text-gray-500 mb-4">
-          Transparent Allocation – Designed for Growth and Sustainability
-        </p>
+          <img src={'/tokenomics.png'} alt="tokenomics" className="bg-cover scale-90 hover:scale-95 transition-all duration-300" />
+        </motion.div>
 
-        <div className="mb-6 space-y-2">
-          {data.map((item, index) => (
-            <div key={index} className="flex items-center">
-              <div
-                className="w-4 h-4 rounded mr-2"
-                style={{ backgroundColor: item.color }}
-              ></div>
-              <p className="text-lg">{item.name} ({item.value}%)</p>
-            </div>
-          ))}
-        </div>
+        {/* Tokenomics Info */}
+        {/* <motion.div
+          initial={{ opacity: 0, x: 50 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.8 }}
+          className="text-left"
+        >
+          <h2 className="text-4xl font-orbitron font-bold mb-4">Tokenomics</h2>
+          <p className="text-gray-500 mb-4">
+            Transparent Allocation – Designed for Growth and Sustainability
+          </p>
 
-        <h3 className="text-xl font-semibold mb-3">Vesting Plan</h3>
-        <div className="space-y-2">
-          {vestingData.map((item, index) => (
-            <div key={index} className="flex items-center">
-              <div
-                className="w-4 h-4 rounded mr-2"
-                style={{ backgroundColor: item.color }}
-              ></div>
-              <p className="text-lg">{item.name}</p>
-            </div>
-          ))}
-        </div>
-      </motion.div>
+          <div className="mb-6 space-y-2">
+            {data.map((item, index) => (
+              <div key={index} className="flex items-center">
+                <div
+                  className="w-4 h-4 rounded mr-2"
+                  style={{ backgroundColor: item.color }}
+                ></div>
+                <p className="text-lg">{item.name} ({item.value}%)</p>
+              </div>
+            ))}
+          </div>
+
+          <h3 className="text-xl font-semibold mb-3">Vesting Plan</h3>
+          <div className="space-y-2">
+            {vestingData.map((item, index) => (
+              <div key={index} className="flex items-center">
+                <div
+                  className="w-4 h-4 rounded mr-2"
+                  style={{ backgroundColor: item.color }}
+                ></div>
+                <p className="text-lg">{item.name}</p>
+              </div>
+            ))}
+          </div>
+        </motion.div> */}
+      </div>
     </div>
   );
 };