diff --git a/src/routes/signup/+page.svelte b/src/routes/signup/+page.svelte
index 2dffe4c..1dcf0fd 100644
--- a/src/routes/signup/+page.svelte
+++ b/src/routes/signup/+page.svelte
@@ -1,17 +1,56 @@
 <!-- routes/signup/+page.svelte -->
 <script lang="ts">
   import { enhance } from "$app/forms";
+  import { getRandomQuote } from "$lib";
+  import { onMount } from "svelte";
+  let quote: string = "";
+  onMount(async () => {
+    quote = getRandomQuote();
+  });
 </script>
 
-<h1>Sign up</h1>
-<form method="post" use:enhance>
-  <label for="username">Username</label>
-  <label for="first_name">First Name</label>
-  <input name="first_name" id="first_name" /><br />
-  <label for="last_name">Last Name</label>
-  <input name="last_name" id="last_name" /><br />
-  <input name="username" id="username" /><br />
-  <label for="password">Password</label>
-  <input type="password" name="password" id="password" /><br />
-  <button>Continue</button>
-</form>
+<article class="text-center text-4xl font-extrabold">
+  <h1>Signup</h1>
+</article>
+
+<div class="flex justify-center">
+  <form method="post" use:enhance class="w-full max-w-xs">
+    <label for="username">Username</label>
+    <input
+      name="username"
+      id="username"
+      class="block mb-2 input input-bordered w-full max-w-xs"
+    /><br />
+    <label for="first_name">First Name</label>
+    <input
+      name="first_name"
+      id="first_name"
+      class="block mb-2 input input-bordered w-full max-w-xs"
+    /><br />
+    <label for="last_name">Last Name</label>
+    <input
+      name="last_name"
+      id="last_name"
+      class="block mb-2 input input-bordered w-full max-w-xs"
+    /><br />
+    <label for="password">Password</label>
+    <input
+      type="password"
+      name="password"
+      id="password"
+      class="block mb-2 input input-bordered w-full max-w-xs"
+    /><br />
+    <button class="py-2 px-4 btn btn-primary">Signup</button>
+  </form>
+</div>
+
+<div class="flex justify-center mt-12 mr-25 ml-25">
+  <blockquote class="w-80 text-center text-lg break-words">
+    {#if quote != ""}
+      "{quote}"
+    {/if}
+    <!-- <footer class="text-sm">- Steve Jobs</footer> -->
+  </blockquote>
+</div>
+
+<!-- username first last pass -->