diff --git a/src/assets/create_new_entry_button.svg b/src/assets/create_new_entry_button.svg
new file mode 100644
index 0000000..12a17bf
--- /dev/null
+++ b/src/assets/create_new_entry_button.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 12.998H13V18.998H11V12.998H5V10.998H11V4.99805H13V10.998H19V12.998Z" fill="#4A571A"/>
+</svg>
diff --git a/src/assets/mdi_text.svg b/src/assets/mdi_text.svg
new file mode 100644
index 0000000..d1a68e6
--- /dev/null
+++ b/src/assets/mdi_text.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.5 7V9.33333H3.5V7H24.5ZM3.5 21H14V18.6667H3.5V21ZM3.5 15.1667H24.5V12.8333H3.5V15.1667Z" fill="#4A571A"/>
+</svg>
diff --git a/src/lib/components/buttons/CreateJournalEntryButton.svelte b/src/lib/components/buttons/CreateJournalEntryButton.svelte
new file mode 100644
index 0000000..1dec0ad
--- /dev/null
+++ b/src/lib/components/buttons/CreateJournalEntryButton.svelte
@@ -0,0 +1,3 @@
+<button>
+    <img src="/src/assets/create_new_entry_button.svg" alt="Create new entry">
+</button>
\ No newline at end of file
diff --git a/src/lib/components/buttons/SidebarToggle.svelte b/src/lib/components/buttons/SidebarToggle.svelte
index e69de29..7f1811d 100644
--- a/src/lib/components/buttons/SidebarToggle.svelte
+++ b/src/lib/components/buttons/SidebarToggle.svelte
@@ -0,0 +1,9 @@
+<script>
+    let { onSidebarToggleClick } = $props();
+</script>
+
+<button
+    class="pajamas--hamburger"
+    aria-label="Menu Button"
+    onclick={onSidebarToggleClick}
+></button>
diff --git a/src/lib/components/entry/EntryToolbar.svelte b/src/lib/components/entry/EntryToolbar.svelte
new file mode 100644
index 0000000..091d50f
--- /dev/null
+++ b/src/lib/components/entry/EntryToolbar.svelte
@@ -0,0 +1,12 @@
+<script>
+    import FontSelector from "./FontSelector.svelte";
+    import TextAlignSelector from "./TextAlignSelector.svelte";
+    import TextTypeSelector from "./TextTypeSelector.svelte";
+
+</script>
+
+<section class="entry-toolbar">
+    <TextTypeSelector/>
+    <TextAlignSelector/>
+    <FontSelector/>
+</section>
\ No newline at end of file
diff --git a/src/lib/components/entry/FontSelector.svelte b/src/lib/components/entry/FontSelector.svelte
new file mode 100644
index 0000000..139597f
--- /dev/null
+++ b/src/lib/components/entry/FontSelector.svelte
@@ -0,0 +1,2 @@
+
+
diff --git a/src/lib/components/entry/TextAlignSelector.svelte b/src/lib/components/entry/TextAlignSelector.svelte
new file mode 100644
index 0000000..4919b9c
--- /dev/null
+++ b/src/lib/components/entry/TextAlignSelector.svelte
@@ -0,0 +1,3 @@
+<button class="text-align-selector">
+    <img src='/src/assets/mdi_text.svg' alt="text-align-icon">
+</button>
\ No newline at end of file
diff --git a/src/lib/components/entry/TextTypeSelector.svelte b/src/lib/components/entry/TextTypeSelector.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/journal/EntrySidebar.svelte b/src/lib/components/journal/EntrySidebar.svelte
index 800ca4a..4e3e105 100644
--- a/src/lib/components/journal/EntrySidebar.svelte
+++ b/src/lib/components/journal/EntrySidebar.svelte
@@ -6,24 +6,43 @@ https://svelte.dev/docs/svelte/bind
 <script lang="ts">
     import type { EntrySidebarProps } from '$lib/types/journal.types';
     import EntrySidebarItem from './EntrySidebarItem.svelte';
+    import { page } from '$app/stores';
+    import CreateJournalEntryButton from '../buttons/CreateJournalEntryButton.svelte';
 
     // let { entries }: EntrySidebarProps = $props();
 </script>
 
 <section class="entry-sidebar">
-    <!-- {#each entries as entry}
+    <CreateJournalEntryButton/>
+    <!-- {#each entries as entry (entry._id)}
         <EntrySidebarItem
-            entryDate={entry.entryDate}
-            createdAt={entry.createdAt}
-            updatedAt={entry.updatedAt}
+            title={entry.title}
+            journalID={entry.journal}
+            entryID={entry._id}
         />
     {/each} -->
 
-    <EntrySidebarItem title="my first entry! ^o^" />
+    <EntrySidebarItem
+        title="my first entry! ^o^"
+        journalID={$page['params']['journal']}
+        entryID="1"
+    />
 
-    <EntrySidebarItem title="my second entry! ^o^" />
+    <EntrySidebarItem
+        title="my second entry! ^o^"
+        journalID={$page['params']['journal']}
+        entryID="2"
+    />
 
-    <EntrySidebarItem title="my third entry! ^o^" />
+    <EntrySidebarItem
+        title="my third entry! ^o^"
+        journalID={$page['params']['journal']}
+        entryID="3"
+    />
 
-    <EntrySidebarItem title="my fourth entry! ^o^" />
+    <EntrySidebarItem
+        title="my fourth entry! ^o^"
+        journalID={$page['params']['journal']}
+        entryID="4"
+    />
 </section>
diff --git a/src/lib/components/journal/EntrySidebarItem.svelte b/src/lib/components/journal/EntrySidebarItem.svelte
index af53637..352b737 100644
--- a/src/lib/components/journal/EntrySidebarItem.svelte
+++ b/src/lib/components/journal/EntrySidebarItem.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
     import type { EntrySidebarItemProps } from '$lib/types/journal.types';
+    import { goto } from '$app/navigation';
 
-    let { title }: EntrySidebarItemProps = $props();
+    let { title, entryID, journalID }: EntrySidebarItemProps = $props();
 </script>
 
-<button class="entry-sidebar-item">
+<button
+    class="entry-sidebar-item"
+    onclick={async () => {
+        await goto(`/journals/${journalID}/${entryID}`);
+    }}
+>
     <h3>{title}</h3>
-    <!-- <h2>{entryDate}</h2>
-    <p>Created {createdAt}</p>
-    <p>Last updated {updatedAt}</p> -->
 </button>
diff --git a/src/lib/components/nav/InitialUserNav.svelte b/src/lib/components/nav/InitialUserNav.svelte
index 81c1c78..1d4a64e 100644
--- a/src/lib/components/nav/InitialUserNav.svelte
+++ b/src/lib/components/nav/InitialUserNav.svelte
@@ -2,9 +2,6 @@
     import PrimaryButton from '../buttons/PrimaryButton.svelte';
 </script>
 
-<!-- <button>
-    <div class="pajamas--hamburger"></div>
-</button> -->
 <button onclick={() => (window.location.href = '/')}>
     <h1 class="navbar__logo">Jurnl</h1>
 </button>
diff --git a/src/lib/components/nav/JournalsNav.svelte b/src/lib/components/nav/JournalsNav.svelte
new file mode 100644
index 0000000..da6e17f
--- /dev/null
+++ b/src/lib/components/nav/JournalsNav.svelte
@@ -0,0 +1,10 @@
+<script>
+    import SidebarToggle from '../buttons/SidebarToggle.svelte';
+
+    let { onSidebarToggleClick } = $props();
+</script>
+
+<SidebarToggle {onSidebarToggleClick} />
+<button onclick={() => (window.location.href = '/')}>
+    <h1 class="navbar__logo">Jurnl</h1>
+</button>
diff --git a/src/lib/types/journal.types.ts b/src/lib/types/journal.types.ts
index 0b3d00f..18195db 100644
--- a/src/lib/types/journal.types.ts
+++ b/src/lib/types/journal.types.ts
@@ -1,12 +1,14 @@
-import type { IEntry } from '$lib/server/database/schemas';
+import type { IEntrySerializable } from '$lib/server/database/schemas';
 
 export interface EntrySidebarProps {
-    entries: IEntry[];
+    entries: IEntrySerializable[];
 }
 
 export interface EntrySidebarItemProps {
     entryDate?: Date;
     title: string;
+    entryID: string;
+    journalID: string;
     createdAt?: Date;
     updatedAt?: Date;
 }
diff --git a/src/routes/+layout.server.ts b/src/routes/(home)/+layout.server.ts
similarity index 73%
rename from src/routes/+layout.server.ts
rename to src/routes/(home)/+layout.server.ts
index 1e64dc1..9fdd61b 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/(home)/+layout.server.ts
@@ -1,4 +1,4 @@
-import type { LayoutServerLoad } from './$types';
+import type { LayoutServerLoad } from '../$types';
 
 export const load: LayoutServerLoad = async ({ locals }) => {
     return {
diff --git a/src/routes/+layout.svelte b/src/routes/(home)/+layout.svelte
similarity index 86%
rename from src/routes/+layout.svelte
rename to src/routes/(home)/+layout.svelte
index 43dd0f1..b46b6ac 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/(home)/+layout.svelte
@@ -1,6 +1,6 @@
-<script lang="ts" >
-    import '../app.css';
-    import type {LayoutProps} from './$types';
+<script lang="ts">
+    import '../../app.css';
+    import type { LayoutProps } from './$types';
     import NormalNav from '$lib/components/nav/NormalNav.svelte';
     import InitialUserNav from '$lib/components/nav/InitialUserNav.svelte';
 
@@ -26,9 +26,7 @@
     </main>
 
     <footer class="layout__footer">
-        <h1 class="title">
-            Jurnl
-        </h1>
+        <h1 class="title">Jurnl</h1>
         <div class="column">
             <h4 class="header">Jurnl</h4>
             <p class="item">FAQs</p>
@@ -39,6 +37,5 @@
             <p class="item">Terms and Condition</p>
             <p class="item">Privacy Policies</p>
         </div>
-        
     </footer>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/(home)/+page.svelte
similarity index 99%
rename from src/routes/+page.svelte
rename to src/routes/(home)/+page.svelte
index 6957419..0eaf954 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/(home)/+page.svelte
@@ -27,4 +27,4 @@ import type { LayoutProps } from './$types';
     <div class="cta-title">
         <PrimaryButton text="Sign Up for an Account" onClick={() => (window.location.href = '/auth/register')}/>
     </div>
-</main>
\ No newline at end of file
+</main>
diff --git a/src/routes/(journals)/journals/+layout.svelte b/src/routes/(journals)/journals/+layout.svelte
new file mode 100644
index 0000000..b6f9a20
--- /dev/null
+++ b/src/routes/(journals)/journals/+layout.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+    import EntrySidebar from '$lib/components/journal/EntrySidebar.svelte';
+    import JournalsNav from '$lib/components/nav/JournalsNav.svelte';
+    import type { LayoutProps } from './$types';
+
+    let { data, children }: LayoutProps = $props();
+    let showSidebar = $state(false);
+
+    function toggleSidebar() {
+        showSidebar = !showSidebar;
+    }
+</script>
+
+<!--
+Sidebar code written referencing team member Dillon's HW3 code:
+https://github.com/4Clover/hw3-app/blob/b75d728cd6b5dddf95c3e6fbde131630041abea5/frontend/src/routes/%2Bpage.svelte#L552C5-L562C6
+https://github.com/4Clover/hw3-app/blob/b75d728cd6b5dddf95c3e6fbde131630041abea5/frontend/src/routes/%2Bpage.svelte#L86
+-->
+<div class="journals-layout">
+    <header>
+        <nav class="navbar">
+            <div class="navbar__container">
+                <JournalsNav onSidebarToggleClick={toggleSidebar} />
+            </div>
+        </nav>
+    </header>
+
+    <main class="journals-layout__content">
+        {@render children()}
+    </main>
+    {#if showSidebar}
+        <div
+            class="journals-layout__modal__overlay"
+            aria-modal="true"
+            role="dialog"
+            onclick={toggleSidebar}
+        >
+            <section class="journals-layout__modal">
+                <EntrySidebar />
+            </section>
+        </div>
+    {/if}
+</div>
diff --git a/src/routes/journals/+page.svelte b/src/routes/(journals)/journals/+page.svelte
similarity index 100%
rename from src/routes/journals/+page.svelte
rename to src/routes/(journals)/journals/+page.svelte
diff --git a/src/routes/journals/[journal]/+page.server.ts b/src/routes/(journals)/journals/[journal]/+page.server.ts
similarity index 100%
rename from src/routes/journals/[journal]/+page.server.ts
rename to src/routes/(journals)/journals/[journal]/+page.server.ts
diff --git a/src/routes/journals/[journal]/+page.svelte b/src/routes/(journals)/journals/[journal]/+page.svelte
similarity index 83%
rename from src/routes/journals/[journal]/+page.svelte
rename to src/routes/(journals)/journals/[journal]/+page.svelte
index e8473d9..d8c392d 100644
--- a/src/routes/journals/[journal]/+page.svelte
+++ b/src/routes/(journals)/journals/[journal]/+page.svelte
@@ -6,7 +6,6 @@ https://svelte.dev/docs/svelte/bind
 
 <script lang="ts">
     import { page } from '$app/stores';
-    import EntrySidebar from '$lib/components/journal/EntrySidebar.svelte';
     import JournalCover from '$lib/components/journal/JournalCover.svelte';
 </script>
 
@@ -15,6 +14,5 @@ https://svelte.dev/docs/svelte/bind
     {JSON.stringify($page, null, 2)}
 </pre> -->
 <section class="journal-page-content">
-    <EntrySidebar />
     <JournalCover />
 </section>
diff --git a/src/routes/(journals)/journals/[journal]/[entry]/+page.svelte b/src/routes/(journals)/journals/[journal]/[entry]/+page.svelte
new file mode 100644
index 0000000..5d6d3cf
--- /dev/null
+++ b/src/routes/(journals)/journals/[journal]/[entry]/+page.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import EntryToolbar from '$lib/components/entry/EntryToolbar.svelte';
+    import '../../../../../styles/main.scss';
+</script>
+
+
+<pre>
+    {JSON.stringify($page, null, 2)}
+</pre> 
+
+
+<!-- <EntryToolbar/> -->
\ No newline at end of file
diff --git a/src/routes/journals/shared/+page.svelte b/src/routes/(journals)/journals/shared/+page.svelte
similarity index 100%
rename from src/routes/journals/shared/+page.svelte
rename to src/routes/(journals)/journals/shared/+page.svelte
diff --git a/src/routes/feed/+page.svelte b/src/routes/(social)/feed/+page.svelte
similarity index 100%
rename from src/routes/feed/+page.svelte
rename to src/routes/(social)/feed/+page.svelte
diff --git a/src/routes/landing/+page.server.ts b/src/routes/(social)/landing/+page.server.ts
similarity index 86%
rename from src/routes/landing/+page.server.ts
rename to src/routes/(social)/landing/+page.server.ts
index 2f252f4..ff06ed0 100644
--- a/src/routes/landing/+page.server.ts
+++ b/src/routes/(social)/landing/+page.server.ts
@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
-import type { PageServerLoad } from '../landing/$types';
+import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ locals, url }) => {
     if (!locals.user) {
@@ -15,6 +15,6 @@ export const load: PageServerLoad = async ({ locals, url }) => {
     //logged in, allow access and pass user data to the page
     // use user data to get bio and stuff
     return {
-        user: locals.user
+        user: locals.user,
     };
-};
\ No newline at end of file
+};
diff --git a/src/routes/landing/+page.svelte b/src/routes/(social)/landing/+page.svelte
similarity index 100%
rename from src/routes/landing/+page.svelte
rename to src/routes/(social)/landing/+page.svelte
diff --git a/src/routes/api/journalentry/[id]/+server.ts b/src/routes/api/entry/[id]/+server.ts
similarity index 100%
rename from src/routes/api/journalentry/[id]/+server.ts
rename to src/routes/api/entry/[id]/+server.ts
diff --git a/src/routes/journals/[journal]/[entry]/+page.svelte b/src/routes/journals/[journal]/[entry]/+page.svelte
deleted file mode 100644
index 6d664bf..0000000
--- a/src/routes/journals/[journal]/[entry]/+page.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-</script>
-
-<h1>Entry</h1>
-<pre>
-    {JSON.stringify($page, null, 2)}
-</pre>
diff --git a/src/styles/_buttons.scss b/src/styles/_buttons.scss
index 56a9fc4..8dbc5ca 100644
--- a/src/styles/_buttons.scss
+++ b/src/styles/_buttons.scss
@@ -88,3 +88,7 @@ button {
     margin-right: 0;
     padding: 0.5rem 0 0.5rem 0rem;
 }
+
+.text-align-selector:hover {
+background-color: variables.$beige
+}
diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index 85133ef..2d37d48 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -72,6 +72,7 @@
 .journal-page-content {
     display: flex;
     flex-direction: row;
+    justify-content: flex-start;
     align-items: center;
 }
 
@@ -79,7 +80,8 @@
     width: 29rem;
     height: 38.313rem;
     background-image: url(../assets/journal_book.png);
-    margin-left: 25rem;
+    margin: auto;
+    margin-top: 5rem;
 }
 
 .journal-menu {
@@ -91,10 +93,8 @@
     width: 18.8rem;
     height: 7.31rem;
     padding: 0.188rem;
-    position: absolute;
-    top: 25rem;
-    left: 52rem;
     margin: auto;
+    margin-top: 15rem;
     z-index: 20;
 }
 
@@ -151,7 +151,17 @@
 .entry-sidebar-item {
     width: 18.75rem;
     height: 3.563rem;
-    background-color: variables.$baby-blue
+    background-color: variables.$baby-blue;
+}
+
+.entry-toolbar {
+    width: 100%;
+    height: 3.06rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    background-color: variables.$light-brown;
 }
 
 .feed-item {
@@ -178,8 +188,7 @@
     }
     &__button {
         width: 40%;
-        margin:0;
-
+        margin: 0;
     }
 }
 
@@ -216,7 +225,7 @@
 
 .manage-friend {
     display: flex;
-    flex-direction: row; 
+    flex-direction: row;
     justify-content: space-between;
     align-items: center;
     gap: 0.5rem;
@@ -275,4 +284,4 @@
         padding-inline: 2.5rem;
         align-items: center;
     }
-}
\ No newline at end of file
+}
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
index 23022c7..c799ce3 100644
--- a/src/styles/_layout.scss
+++ b/src/styles/_layout.scss
@@ -1,12 +1,12 @@
 @use 'variables';
 
 .layout {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
 
     &__content {
-        flex: 1; 
+        flex: 1;
         padding: 4rem;
     }
 
@@ -25,13 +25,13 @@
             width: 30%;
             text-align: left;
             .item {
-                padding: 0.5rem 0rem 0.5rem 0rem
+                padding: 0.5rem 0rem 0.5rem 0rem;
             }
             .header {
-                padding: 1rem 0 1rem 0rem
+                padding: 1rem 0 1rem 0rem;
             }
         }
-  }
+    }
 }
 
 .cta-section {
@@ -51,7 +51,6 @@
     &__text {
         width: 40%;
     }
-
 }
 
 .cta-title {
@@ -60,4 +59,34 @@
     text-align: center;
     align-items: center;
     padding: 3rem;
-}
\ No newline at end of file
+}
+
+.journals-layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+
+    &__modal {
+        position: fixed;
+        top: 6.875rem;
+        left: 0;
+        z-index: 20;
+
+        &__overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 10;
+            background-color: rgba(0, 0, 0, 0.5);
+        }
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        z-index: 0;
+    }
+}
diff --git a/src/styles/_navbar.scss b/src/styles/_navbar.scss
index aa2531f..ad9ef10 100644
--- a/src/styles/_navbar.scss
+++ b/src/styles/_navbar.scss
@@ -21,6 +21,10 @@
     margin-right: auto;
 }
 
+.pajamas--hamburger:hover {
+    background-color: #dae0b6;
+}
+
 body {
     font-family: Arial, sans-serif;
     background-color: variables.$off-white;
@@ -29,7 +33,7 @@ body {
 .navbar {
     background-color: variables.$sage;
     padding: 0.5rem;
-    height: 110px;
+    height: 6.875rem;
 
     &__container {
         max-width: 97%;