diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0adfa6c..1d130df 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,13 +1,28 @@
-import Image from "next/image";
-import styles from "./page.module.css";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
 
 export default function Home() {
   return (
-    <main className={styles.main}>
-      Hello
-      <h1 className="text-3xl font-black underline">
-        Hello world!
-      </h1>
-    </main>
+    <main className="flex flex-col items-center justify-around h-60 w-26">
+      < div >
+        <h1 className="text-3xl font-black">
+          Welcome to Subman
+        </h1>
+      </div >
+      <div>
+        <p className="mb-6">
+          This app is for demonstration purposes only. Data is reset periodically.
+        </p>
+        <p>
+          USERNAME: demo@demo.demo
+        </p>
+        <p>
+          PASSWORD: password
+        </p>
+      </div>
+      <Button className="mt-6">
+        <Link href="/login">Log in</Link>
+      </Button>
+    </main >
   );
 }
diff --git a/src/app/tailwind.css b/src/app/tailwind.css
index 5fa7dd6..fc0dd5b 100644
--- a/src/app/tailwind.css
+++ b/src/app/tailwind.css
@@ -781,6 +781,10 @@ body {
   margin-top: 1.5rem;
 }
 
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
 .block {
   display: block;
 }
@@ -883,6 +887,10 @@ body {
   height: 100vh;
 }
 
+.h-60 {
+  height: 15rem;
+}
+
 .max-h-96 {
   max-height: 24rem;
 }
@@ -968,6 +976,14 @@ body {
   width: 100vw;
 }
 
+.w-14 {
+  width: 3.5rem;
+}
+
+.w-20 {
+  width: 5rem;
+}
+
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -1125,6 +1141,10 @@ body {
   justify-content: space-around;
 }
 
+.justify-items-center {
+  justify-items: center;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }