diff --git a/src/App.tsx b/src/App.tsx
index 24c8eeb..635e51c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,24 @@
-import React from 'react'
+import { useState } from 'react'
 
 function App() {
+  const [count, setCount] = useState(0)
+
   return (
-    <div className="min-h-screen bg-gray-100">
-      <h1 className="text-3xl font-bold text-center pt-10">
-        Hello Vite + React + Tailwind!
-      </h1>
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-8">Vite + React + Tailwind</h1>
+        <div className="bg-white p-8 rounded-lg shadow-lg">
+          <button
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+            onClick={() => setCount((count) => count + 1)}
+          >
+            count is {count}
+          </button>
+          <p className="mt-4 text-gray-600">
+            Edit <code className="bg-gray-100 px-2 py-1 rounded">src/App.tsx</code> and save to test HMR
+          </p>
+        </div>
+      </div>
     </div>
   )
 }