diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index d44c956..04e851e 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,4 +1,3 @@
-<!-- routes/login/+page.svelte -->
 <script lang="ts">
   import { enhance } from "$app/forms";
   import { goto } from "$app/navigation";
@@ -7,9 +6,12 @@
   import { onMount } from "svelte";
   let quote: string = "";
   let errors: { message?: string } = {};
+  let backgroundImageUrl = "https://source.unsplash.com/random/?mountains";
+
   onMount(async () => {
     quote = getRandomQuote();
   });
+
   const handleSubmit: SubmitFunction = async ({ formData, action, cancel }) => {
     const response = await fetch(action, {
       method: "POST",
@@ -31,42 +33,49 @@
   };
 </script>
 
-<article class="text-center text-4xl font-extrabold">
-  <h1>Sign in</h1>
-</article>
+<div
+  class="min-h-screen bg-no-repeat bg-cover flex items-center justify-center"
+  style="background-image: url('{backgroundImageUrl}')"
+>
+  <div class="card card-compact w-96 bg-base-100 shadow-xl p-6">
+    <article class="text-center text-4xl font-extrabold">
+      <h1>Sign in</h1>
+    </article>
 
-<div class="flex justify-center">
-  <form method="post" use:enhance={handleSubmit} 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="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">Login</button>
-  </form>
-</div>
+    <div class="flex justify-center">
+      <form method="post" use:enhance={handleSubmit} 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="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">Login</button>
+      </form>
+    </div>
 
-{#if errors.message}
-  <div class="text-center text-error mt-4">
-    {errors.message}
-  </div>
-{/if}
-
-<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 errors.message}
+      <div class="text-center text-error mt-4">
+        {errors.message}
+      </div>
     {/if}
-    <!-- <footer class="text-sm">- Steve Jobs</footer> -->
-  </blockquote>
+
+    <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>
+  </div>
 </div>
 
 <svelte:head>
diff --git a/src/routes/signup/+page.svelte b/src/routes/signup/+page.svelte
index c3cfdc0..f650350 100644
--- a/src/routes/signup/+page.svelte
+++ b/src/routes/signup/+page.svelte
@@ -3,54 +3,64 @@
   import { enhance } from "$app/forms";
   import { getRandomQuote } from "$lib";
   import { onMount } from "svelte";
+
+  let backgroundImageUrl = "https://source.unsplash.com/random/?mountains";
+
   let quote: string = "";
   onMount(async () => {
     quote = getRandomQuote();
   });
 </script>
 
-<article class="text-center text-4xl font-extrabold">
-  <h1>Signup</h1>
-</article>
+<div
+  class="min-h-screen bg-no-repeat bg-cover flex items-center justify-center"
+  style="background-image: url('{backgroundImageUrl}')"
+>
+  <div class="card card-compact w-96 bg-base-100 shadow-xl p-6">
+    <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">
+      <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 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>
+  </div>
 </div>
 
 <!-- username first last pass -->