diff --git a/src/app.html b/src/app.html
index 40d2843..a872b5e 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="light">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
@@ -25,7 +25,7 @@
   along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
   -->
-  <body data-sveltekit-preload-data="hover">
+  <body data-sveltekit-preload-data="hover" class="h-screen">
     <div style="display: contents">%sveltekit.body%</div>
   </body>
 </html>
diff --git a/src/lib/components/message.svelte b/src/lib/components/message.svelte
index 3e80b0c..84cadba 100644
--- a/src/lib/components/message.svelte
+++ b/src/lib/components/message.svelte
@@ -5,12 +5,12 @@
 
 <div class="w-full hover:bg-base-300 bg-base-200 flex py-2">
   <div class="avatar mx-2">
-    <div class="w-12 rounded">
+    <div class="w-12 h-12 rounded">
       <img src={imageSrc} alt="Profile image for {user}" />
     </div>
   </div>
   <div class="flex-col">
     <p class="font-bold">{user}</p>
-    <p>{message}</p>
+    <p class="flex-wrap">{message}</p>
   </div>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7a0f7d3..86699a9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -36,27 +36,18 @@
   });
 </script>
 
-<main class="grid grid-cols-2 h-screen w-full">
-  <div class="relative h-full w-full">
-    <div class="h-fit col-span-1 w-10/12 abs-centered">
-      <div class="flex">
-        <span><span class="text-svelte">SV</span>Chat</span>
-        <span class="ml-auto">Logged in as <span class="font-bold">{user}</span></span>
-      </div>
-      <form class="my-1 flex" on:submit={sendMessage}>
-        <input type="text" placeholder="Type here" class="input input-bordered w-1/2 mr-1" bind:value={msg} />
-        <button class="btn w-1/2" type="submit">Send Message</button>
-      </form>
-      <button
-        class="btn w-full"
-        on:click={() => {
-          log = [];
-        }}>Clear Messages</button>
+<main class="h-full flex flex-col">
+  <div class="flex-grow flex-auto overflow-y-scroll mx-2 mt-2 mb-1 rounded-lg bg-base-200 border-2 border-primary">
+    <div class="w-full">
+      <h1 class="text-center text-base-content text-2xl"><span class="text-primary">SV</span>Chat</h1>
+      <hr class="w-11/12 border-primary border-1 mx-auto" />
     </div>
-  </div>
-  <div class="col-span-1 overflow-scroll bg-base-200 m-4 rounded-lg">
     {#each log as message}
       <Message imageSrc={message.imageSrc} user={message.user} message={message.message} />
     {/each}
   </div>
+  <form class="flex mb-2 mx-2 mt-1" on:submit={sendMessage}>
+    <input type="text" placeholder="Type here" class="input input-secondary w-3/4 mr-1 border-2" bind:value={msg} />
+    <button class="btn w-1/4 btn-primary" type="submit">Send Message</button>
+  </form>
 </main>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 3b4b674..a241d74 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -5,8 +5,42 @@ export default {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   plugins: [daisyui],
   theme: {
-    colors: {
-      svelte: '#FF3E00',
+    fontSize: {
+      sm: '0.750rem',
+      base: '1rem',
+      xl: '1.333rem',
+      '2xl': '1.777rem',
+      '3xl': '2.369rem',
+      '4xl': '3.158rem',
+      '5xl': '4.210rem',
+    },
+    fontFamily: {
+      heading: 'IBM Plex Sans',
+      body: 'IBM Plex Sans',
+    },
+    fontWeight: {
+      normal: '400',
+      bold: '700',
     },
   },
+  daisyui: {
+    themes: [
+      {
+        light: {
+          primary: '#2083df',
+          secondary: '#a78aef',
+          accent: '#a854e8',
+          neutral: '#081e45',
+          'base-100': '#f6f9fe',
+        },
+        dark: {
+          primary: '#2083df',
+          secondary: '#2c1075',
+          accent: '#6b17ab',
+          neutral: '#081e45',
+          'base-100': '#010409',
+        },
+      },
+    ],
+  },
 } satisfies Config;
