diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4ab91ca..f8737ef 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,26 +5,28 @@ import {  SignIn, SignOut } from 'auth-astro/components';
 import KarKarCarAuth from "../components/KarKarCarAuth.astro"
 // 1. Import any dependencies (Full support for JavaScript/TypeScript)
 
-import { getUser, type KarKarCarSession } from "../api/index.ts"
+import { getUser, type KarKarCarSession } from "../api/index"
 import UserInfo from "../components/UserInfo.astro"
 import config  from 'auth:config'
 
-
-
 const session = await getUser(Astro.request, config);
 
 ---
 <Layout>
-	<UserInfo session={session} />
-	<KarKarCarAuth>
-		{(session: KarKarCarSession) => (
-		  <>
-			{session ? 
-				<SignOut class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-200 font-medium">Logout</SignOut>
-			:
-				<SignIn provider="keycloak" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium">Login</SignIn>
-			}
-		  </>
-		)}
-	</KarKarCarAuth>
+	<div class="min-h-screen grid place-items-center">
+		<div class="grid gap-6 text-center">
+			<UserInfo session={session} />
+			<KarKarCarAuth>
+				{(session: KarKarCarSession) => (
+					<>
+						{session ? 
+							<SignOut class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-200 font-medium">Logout</SignOut>
+						:
+							<SignIn provider="keycloak" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium">Login</SignIn>
+						}
+					</>
+				)}
+			</KarKarCarAuth>
+		</div>
+	</div>
 </Layout>
\ No newline at end of file