diff --git a/src/lib/navbar.svelte b/src/lib/navbar.svelte
index 2975d43..9db0d18 100644
--- a/src/lib/navbar.svelte
+++ b/src/lib/navbar.svelte
@@ -1,23 +1,25 @@
 <script lang="ts">
 	import { NavbarObject } from "../classes/NavObject";
-  import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, DarkMode } from 'flowbite-svelte';
+	import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, DarkMode } from 'flowbite-svelte';
 	export let navobjs: NavbarObject[] = [new NavbarObject('#', 'No nav elements provided')];
 	export let pageTitle: string = "Default Title";
-	export let togleDarkModeButton: boolean = true;
+	export let toggleDarkModeButton: boolean = true;
 </script>
-<Navbar let:hidden let:toggle color="form">
-  <NavBrand href="/">
-    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+<Navbar let:hidden let:toggle color="form" navDivClass="mx-auto flex flex-wrap justify-around items-center">
+	<NavBrand href="/">
+    	<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
 			{ pageTitle.toUpperCase() }
 		</span>
-  </NavBrand>
-  <NavHamburger on:click={toggle} />
-  <NavUl {hidden}>
-		{#each navobjs as navElem}
-			<NavLi href="{ navElem.link }">{ navElem.text }</NavLi>
-		{/each}
-  </NavUl>
-	{#if togleDarkModeButton}
-		<DarkMode class='p-0' />
-	{/if}
+	</NavBrand>
+	<NavHamburger on:click={toggle} />
+	<div class="flex">
+		<NavUl {hidden}>
+			{#each navobjs as navElem}
+				<NavLi href="{ navElem.link }">{ navElem.text }</NavLi>
+			{/each}
+		</NavUl>
+		{#if toggleDarkModeButton}
+			<DarkMode class='p-0' />
+		{/if}
+	</div>
 </Navbar>