diff --git a/frontend/index.html b/frontend/index.html
index bfcb7f2..a9a0a82 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/requirements-icon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Keycloak Auth App</title>
+    <title>Requirements Periodic Table</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/public/requirements-icon.svg b/frontend/public/requirements-icon.svg
new file mode 100644
index 0000000..784e3f9
--- /dev/null
+++ b/frontend/public/requirements-icon.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#4f46e5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/>
+  <rect x="9" y="3" width="6" height="4" rx="1"/>
+  <path d="M9 12l2 2 4-4"/>
+</svg>
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index d2b814b..e573227 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -17,7 +17,7 @@ export default function Layout({ children }: LayoutProps) {
       <footer className="border-t border-gray-200 bg-white py-6">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <p className="text-center text-sm text-gray-500">
-            &copy; {new Date().getFullYear()} Keycloak Auth App. All rights
+            &copy; {new Date().getFullYear()} Requirements Periodic Table. All rights
             reserved.
           </p>
         </div>
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 73e7227..8c3c43c 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -20,14 +20,14 @@ export default function Navbar() {
                 viewBox="0 0 24 24"
                 stroke="currentColor"
                 strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
               >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-                />
+                <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" />
+                <rect x="9" y="3" width="6" height="4" rx="1" />
+                <path d="M9 12l2 2 4-4" />
               </svg>
-              <span>Auth App</span>
+              <span>Requirements Periodic Table</span>
             </Link>
           </div>
 
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 5494819..52dea4c 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -14,23 +14,38 @@ export default function HomePage() {
   return (
     <div className="flex min-h-[60vh] flex-col items-center justify-center">
       <div className="text-center">
-        <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">
-          Welcome to{' '}
-          <span className="text-primary-600">Keycloak Auth</span>
+        {/* Icon */}
+        <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-primary-100">
+          <svg
+            className="h-12 w-12 text-primary-600"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" />
+            <rect x="9" y="3" width="6" height="4" rx="1" />
+            <path d="M9 12l2 2 4-4" />
+          </svg>
+        </div>
+
+        <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+          Requirements Periodic Table
         </h1>
-        <p className="mx-auto mt-6 max-w-2xl text-lg text-gray-600">
-          A secure authentication system powered by Keycloak and FastAPI. Login
-          with your Keycloak credentials to access protected resources.
+        <p className="mx-auto mt-4 max-w-md text-lg text-gray-600">
+          Manage and track your project requirements.
         </p>
 
-        {!isAuthenticated && (
-          <div className="mt-10">
+        <div className="mt-8">
+          {!isAuthenticated ? (
             <button
               onClick={login}
-              className="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-8 py-4 text-lg font-semibold text-white shadow-lg transition-all hover:bg-primary-700 hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-primary-300"
+              className="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-8 py-3 text-lg font-semibold text-white shadow-lg transition-all hover:bg-primary-700 hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-primary-300"
             >
               <svg
-                className="h-6 w-6"
+                className="h-5 w-5"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -42,108 +57,16 @@ export default function HomePage() {
                   d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
                 />
               </svg>
-              Login with Keycloak
+              Login
             </button>
-          </div>
-        )}
-
-        {isAuthenticated && (
-          <div className="mt-10">
+          ) : (
             <a
               href="/dashboard"
-              className="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-8 py-4 text-lg font-semibold text-white shadow-lg transition-all hover:bg-primary-700 hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-primary-300"
+              className="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-8 py-3 text-lg font-semibold text-white shadow-lg transition-all hover:bg-primary-700 hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-primary-300"
             >
-              <svg
-                className="h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                strokeWidth={2}
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
-                />
-              </svg>
               Go to Dashboard
             </a>
-          </div>
-        )}
-      </div>
-
-      {/* Features Section */}
-      <div className="mt-20 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
-        <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
-          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary-100">
-            <svg
-              className="h-6 w-6 text-primary-600"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2}
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-              />
-            </svg>
-          </div>
-          <h3 className="mb-2 text-lg font-semibold text-gray-900">
-            Secure Authentication
-          </h3>
-          <p className="text-gray-600">
-            HTTP-only cookies protect your tokens from XSS attacks.
-          </p>
-        </div>
-
-        <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
-          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary-100">
-            <svg
-              className="h-6 w-6 text-primary-600"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2}
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
-              />
-            </svg>
-          </div>
-          <h3 className="mb-2 text-lg font-semibold text-gray-900">
-            Keycloak Integration
-          </h3>
-          <p className="text-gray-600">
-            Enterprise-grade identity management with Keycloak SSO.
-          </p>
-        </div>
-
-        <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
-          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary-100">
-            <svg
-              className="h-6 w-6 text-primary-600"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2}
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M13 10V3L4 14h7v7l9-11h-7z"
-              />
-            </svg>
-          </div>
-          <h3 className="mb-2 text-lg font-semibold text-gray-900">
-            FastAPI Backend
-          </h3>
-          <p className="text-gray-600">
-            High-performance Python backend with automatic API documentation.
-          </p>
+          )}
         </div>
       </div>
     </div>
