diff --git a/src/App.tsx b/src/App.tsx
index 9db3e0c..2668cdf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,29 +1,24 @@
-import { useState } from "react";
 import ReclaimDemo from "./components/Reclaim";
 import { Shield } from "lucide-react";
 
 function App() {
   return (
-    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white">
-      <div className="max-w-7xl mx-auto px-4 py-8">
+    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white p-4">
+      <div className="max-w-7xl mx-auto">
         {/* Header */}
-        <div className="text-center mb-12">
+        <div className="text-center mb-8">
           <div className="flex items-center justify-center gap-3 mb-4">
-            <Shield className="w-10 h-10 text-blue-600" />
+            <Shield className="w-10 h-10 text-blue-700" />
             <h1 className="text-4xl font-bold text-gray-900">HandleCheck</h1>
           </div>
           <p className="text-gray-600 text-lg max-w-2xl mx-auto">
             Verify social media accounts instantly with our secure verification
-            system. Quick, reliable, and trustworthy.
+            system
           </p>
         </div>
 
         {/* Main Content */}
-        <div className="max-w-2xl mx-auto">
-          <div className="bg-white rounded-2xl shadow-xl overflow-hidden">
-            <ReclaimDemo onProofReceived={(proof) => console.log(proof)} />
-          </div>
-        </div>
+        <ReclaimDemo onProofReceived={(proof) => console.log(proof)} />
 
         {/* Footer */}
         <footer className="mt-16 text-center text-sm text-gray-500">