1 files changed, 40 insertions, 11 deletions

diff --git a/fe/src/lib/Layout.svelte b/fe/src/lib/Layout.svelte
index 2728dd3..26630d2 100644
--- a/fe/src/lib/Layout.svelte
+++ b/fe/src/lib/Layout.svelte
@@ -1,6 +1,6 @@
 <script>
     import { authenticated, token, user, preferences } from "../stores/auth";
-    import PreferencesForm from "./PreferencesForm.svelte";
+    import { PreferencesForm, AddForm } from "./forms";
     import { addFormOpen } from "../stores/forms";
 
     const logout = () => { 
@@ -30,9 +30,18 @@
                 <h1>Water</h1>
             </div>
             <div>
-                <button on:click={showAddDialog}>Log Water</button>
-                <button on:click={showPreferencesDialog}>Preference</button>
-                <button on:click={logout}>Logout</button>
+                <button on:click={showAddDialog}>
+                    <span class="btn-icon">➕</span>
+                    <span class="btn-content">Log Water</span>
+                </button>
+                <button on:click={showPreferencesDialog}>
+                    <span class="btn-icon">⚙</span>
+                    <span class="btn-content">Preference</span>
+                </button>
+                <button on:click={logout}>
+                    <span class="btn-icon">🔒</span>
+                    <span class="btn-content">Logout</span>
+                </button>
             </div>
         </nav>
         <PreferencesForm open={preferenceFormOpen} on:close={closePreferenceDialog} />
@@ -43,17 +52,30 @@
 </div>
 
 <style>
-    .layout {
-        height: 100vh;
-    }
-
     nav {
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
         height: 64px;
-        padding: 0 2em;
+        padding: 1em 0;
+    }
+
+    nav div button {
+        margin: 0 .5em;
+    }
+
+    nav div button:first-child {
+        margin-left: 0;
+    }
+
+    nav div button:last-child {
+        margin-right: 0;
+    }
+
+
+    nav .btn-content {
+        display: none;
     }
 
     nav div {
@@ -66,9 +88,16 @@
 
     #content {
         display: flex;
-        flex-direction: row;
+        flex-direction: column;
         justify-content: center;
         gap: 2em;
-        margin-top: 4em;
+        margin-top: 1em;
+    }
+
+    @media (min-width: 916px) {
+        nav .btn-content {
+            display: inline;
+            margin-left: 1em;
+        }
     }
 </style>