diff --git a/src/app/globals.css b/src/app/globals.css
index a8144b6..5fcf6dc 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -76,6 +76,13 @@ body {
     --sidebar-border: 240 3.7% 15.9%;
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
+  .centered-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 100vw;
+  }
 }
 
 @layer base {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..06f1a19
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,21 @@
+import { ClerkProvider } from '@clerk/nextjs'
+import './globals.css'
+import { HTMLAttributes } from 'react';
+
+export default function RootLayout({
+  children,
+  style
+}: {
+  children: React.ReactNode;
+  style?: HTMLAttributes<HTMLDivElement>['style'];
+}) {
+  return (
+    <ClerkProvider>
+      <html lang="en" style={style}>
+        <body className="centered-content">
+          {children}
+        </body>
+      </html>
+    </ClerkProvider>
+  )
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..1cff04d
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,13 @@
+import RootLayout from './layout'
+import SignupPage from './signup/page'
+
+export default function Home() {
+  return (
+    <RootLayout>
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
+        <h1 style={{ fontSize: 64, marginBottom: 20 }}>Welcome to Hoya</h1>
+        <SignupPage />
+      </div>
+    </RootLayout>
+  )
+}
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
new file mode 100644
index 0000000..c30f30a
--- /dev/null
+++ b/src/app/signup/page.tsx
@@ -0,0 +1,14 @@
+import {
+    SignInButton,
+    SignedIn,
+    SignedOut,
+    UserButton
+  } from '@clerk/nextjs'
+  
+  export default function SignupPage() {
+    return (
+      <SignedOut>
+        <SignInButton />
+      </SignedOut>
+    )
+  }
\ No newline at end of file
