diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
index 5aa23bd..19e2faf 100644
--- a/frontend/src/pages/About.tsx
+++ b/frontend/src/pages/About.tsx
@@ -2,97 +2,188 @@ import React from 'react';
 
 const About: React.FC = () => {
   return (
-    <div className="min-h-screen bg-gray-50 py-8">
-      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="bg-white rounded-lg shadow-lg p-8">
-          <h1 className="text-4xl font-bold text-gray-900 mb-6 text-center">
-            About IdeaVault
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-12">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header Section */}
+        <div className="text-center mb-16">
+          <h1 className="text-5xl md:text-6xl font-extrabold text-gray-900 mb-6">
+            About <span className="text-blue-600">IdeaVault</span>
           </h1>
-          
-          <div className="prose prose-lg mx-auto">
-            <p className="text-xl text-gray-600 mb-6">
-              IdeaVault is an open-source SaaS platform that empowers developers and founders 
-              to license their original software project ideas under a unique 1% attribution model.
-            </p>
+          <p className="text-xl md:text-2xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
+            An open-source SaaS platform that empowers developers and founders 
+            to license their original software project ideas under a unique 1% attribution model.
+          </p>
+        </div>
 
-            <h2 className="text-2xl font-bold text-gray-900 mb-4">Our Mission</h2>
-            <p className="text-gray-600 mb-6">
+        {/* Main Content */}
+        <div className="grid lg:grid-cols-3 gap-8 mb-16">
+          {/* Mission Section */}
+          <div className="lg:col-span-2 bg-white rounded-xl shadow-lg p-8">
+            <h2 className="text-3xl font-bold text-gray-900 mb-6 flex items-center">
+              <span className="w-3 h-8 bg-blue-600 rounded-full mr-4"></span>
+              Our Mission
+            </h2>
+            <p className="text-lg text-gray-600 leading-relaxed">
               We believe that great ideas deserve recognition and fair compensation. Our platform 
               provides a digital timestamp and licensing model for your startup or project idea, 
               ensuring you get credited and compensated when others build upon your innovations.
             </p>
+          </div>
 
-            <h2 className="text-2xl font-bold text-gray-900 mb-4">How It Works</h2>
-            <div className="space-y-4 mb-6">
-              <div className="flex items-start space-x-3">
-                <span className="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-bold">1</span>
-                <div>
-                  <h3 className="font-bold text-gray-900">Submit Your Idea</h3>
-                  <p className="text-gray-600">Register your software project idea with detailed description and implementation concepts.</p>
-                </div>
+          {/* Stats Card */}
+          <div className="bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl shadow-lg p-8 text-white">
+            <h3 className="text-2xl font-bold mb-6">Platform Stats</h3>
+            <div className="space-y-4">
+              <div>
+                <div className="text-3xl font-bold">1%</div>
+                <div className="text-blue-100">Revenue Attribution</div>
               </div>
-              <div className="flex items-start space-x-3">
-                <span className="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-bold">2</span>
-                <div>
-                  <h3 className="font-bold text-gray-900">Get Timestamped Proof</h3>
-                  <p className="text-gray-600">Receive a timestamped certificate with hash verification for legal protection.</p>
-                </div>
+              <div>
+                <div className="text-3xl font-bold">100%</div>
+                <div className="text-blue-100">Open Source</div>
               </div>
-              <div className="flex items-start space-x-3">
-                <span className="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-bold">3</span>
-                <div>
-                  <h3 className="font-bold text-gray-900">Earn Attribution</h3>
-                  <p className="text-gray-600">When someone builds your idea commercially, they must attribute you and share 1% of gross revenue.</p>
-                </div>
+              <div>
+                <div className="text-3xl font-bold">∞</div>
+                <div className="text-blue-100">Ideas Welcome</div>
               </div>
             </div>
+          </div>
+        </div>
+
+        {/* How It Works Section */}
+        <div className="bg-white rounded-xl shadow-lg p-8 mb-16">
+          <h2 className="text-4xl font-bold text-gray-900 mb-12 text-center">
+            How It Works
+          </h2>
+          
+          <div className="grid md:grid-cols-3 gap-8">
+            {[
+              {
+                step: "1",
+                title: "Submit Your Idea",
+                description: "Register your software project idea with detailed description and implementation concepts.",
+                icon: "💡"
+              },
+              {
+                step: "2", 
+                title: "Get Timestamped Proof",
+                description: "Receive a timestamped certificate with hash verification for legal protection.",
+                icon: "🔒"
+              },
+              {
+                step: "3",
+                title: "Earn Attribution", 
+                description: "When someone builds your idea commercially, they must attribute you and share 1% of gross revenue.",
+                icon: "💰"
+              }
+            ].map((item, index) => (
+              <div key={index} className="text-center group">
+                <div className="relative mb-6">
+                  <div className="w-20 h-20 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
+                    {item.step}
+                  </div>
+                  <div className="text-4xl mb-4">{item.icon}</div>
+                </div>
+                <h3 className="text-xl font-bold text-gray-900 mb-3">{item.title}</h3>
+                <p className="text-gray-600 leading-relaxed">{item.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
 
-            <h2 className="text-2xl font-bold text-gray-900 mb-4">The 1% Model</h2>
-            <p className="text-gray-600 mb-6">
+        {/* Features Grid */}
+        <div className="grid lg:grid-cols-2 gap-8 mb-16">
+          {/* 1% Model */}
+          <div className="bg-white rounded-xl shadow-lg p-8">
+            <h2 className="text-3xl font-bold text-gray-900 mb-6 flex items-center">
+              <span className="w-3 h-8 bg-green-500 rounded-full mr-4"></span>
+              The 1% Model
+            </h2>
+            <p className="text-gray-600 leading-relaxed">
               Under our modified MIT-style license, your idea is publicly registered and others 
               must attribute you and share 1% of their revenue if they use it commercially. 
               This creates a fair ecosystem where innovation is rewarded while still encouraging 
               open collaboration.
             </p>
+          </div>
 
-            <h2 className="text-2xl font-bold text-gray-900 mb-4">Technology Stack</h2>
-            <div className="grid md:grid-cols-2 gap-4 mb-6">
-              <div>
-                <h3 className="font-bold text-gray-900 mb-2">Backend</h3>
-                <ul className="text-gray-600 space-y-1">
-                  <li>• TypeScript & Node.js</li>
-                  <li>• Express.js REST API</li>
-                  <li>• MongoDB for data storage</li>
-                  <li>• Redis for caching</li>
-                </ul>
-              </div>
-              <div>
-                <h3 className="font-bold text-gray-900 mb-2">Frontend</h3>
-                <ul className="text-gray-600 space-y-1">
-                  <li>• React.js with TypeScript</li>
-                  <li>• Vite for fast development</li>
-                  <li>• Tailwind CSS for styling</li>
-                  <li>• React Router for navigation</li>
-                </ul>
-              </div>
-            </div>
-
-            <h2 className="text-2xl font-bold text-gray-900 mb-4">Open Source</h2>
-            <p className="text-gray-600 mb-6">
+          {/* Open Source */}
+          <div className="bg-white rounded-xl shadow-lg p-8">
+            <h2 className="text-3xl font-bold text-gray-900 mb-6 flex items-center">
+              <span className="w-3 h-8 bg-purple-500 rounded-full mr-4"></span>
+              Open Source
+            </h2>
+            <p className="text-gray-600 leading-relaxed">
               IdeaVault is proudly open source under the MIT License. We believe in transparency 
               and community-driven development. Contributions are welcome and encouraged!
             </p>
+          </div>
+        </div>
 
+        {/* Technology Stack */}
+        <div className="bg-white rounded-xl shadow-lg p-8 mb-16">
+          <h2 className="text-4xl font-bold text-gray-900 mb-12 text-center">
+            Technology Stack
+          </h2>
+          
+          <div className="grid md:grid-cols-2 gap-12">
             <div className="text-center">
-              <button className="bg-blue-600 text-white px-8 py-3 rounded-lg text-lg font-semibold hover:bg-blue-700 transition">
-                Start Licensing Your Ideas
-              </button>
+              <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-6">
+                BE
+              </div>
+              <h3 className="text-2xl font-bold text-gray-900 mb-6">Backend</h3>
+              <div className="space-y-3">
+                {[
+                  "TypeScript & Node.js",
+                  "Express.js REST API", 
+                  "MongoDB for data storage",
+                  "Redis for caching"
+                ].map((tech, index) => (
+                  <div key={index} className="flex items-center justify-center space-x-2">
+                    <span className="w-2 h-2 bg-green-500 rounded-full"></span>
+                    <span className="text-gray-600">{tech}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+            
+            <div className="text-center">
+              <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-6">
+                FE
+              </div>
+              <h3 className="text-2xl font-bold text-gray-900 mb-6">Frontend</h3>
+              <div className="space-y-3">
+                {[
+                  "React.js with TypeScript",
+                  "Vite for fast development",
+                  "Tailwind CSS for styling", 
+                  "React Router for navigation"
+                ].map((tech, index) => (
+                  <div key={index} className="flex items-center justify-center space-x-2">
+                    <span className="w-2 h-2 bg-blue-500 rounded-full"></span>
+                    <span className="text-gray-600">{tech}</span>
+                  </div>
+                ))}
+              </div>
             </div>
           </div>
         </div>
+
+        {/* Call to Action */}
+        <div className="text-center bg-gradient-to-r from-blue-600 to-blue-700 rounded-xl shadow-lg p-12">
+          <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
+            Ready to License Your Ideas?
+          </h2>
+          <p className="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
+            Join the revolution of fair idea attribution and start protecting your innovations today.
+          </p>
+          <button className="bg-white text-blue-600 px-10 py-4 rounded-lg text-xl font-bold hover:bg-gray-50 transform hover:scale-105 transition-all duration-300 shadow-lg">
+            Start Licensing Your Ideas
+          </button>
+        </div>
       </div>
     </div>
   );
 };
 
-export default About;
+export default About;
\ No newline at end of file