Index: assets/styling/main.css
===================================================================
--- assets/styling/main.css	(revision 5a5d88cc21b30e73f864fb93d6d39d6b98faf99a)
+++ assets/styling/main.css	(revision 0cda1a7dfdf008066a1e095008e1f3367be49970)
@@ -4,4 +4,5 @@
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     margin: 20px;
+    padding-bottom: 64px;
 }
 
Index: assets/styling/navbar.css
===================================================================
--- assets/styling/navbar.css	(revision 5a5d88cc21b30e73f864fb93d6d39d6b98faf99a)
+++ assets/styling/navbar.css	(revision 0cda1a7dfdf008066a1e095008e1f3367be49970)
@@ -1,5 +1,42 @@
 #navbar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 64px;
   display: flex;
-  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0 16px;
+  border-top: 1px solid #ddd;
+}
+
+.nav-item {
+  flex: 1;
+  text-align: center;
+  color: #f60000;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+.fab-container {
+  position: relative;
+  top: -24px;
+  /* lifts the circle above the bar */
+}
+
+.fab {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: none;
+  background: #4CAF50;
+  /* green circle */
+  color: #fff;
+  font-size: 28px;
+  line-height: 56px;
+  text-align: center;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
 }
 
Index: src/views/navbar.rs
===================================================================
--- src/views/navbar.rs	(revision 5a5d88cc21b30e73f864fb93d6d39d6b98faf99a)
+++ src/views/navbar.rs	(revision 0cda1a7dfdf008066a1e095008e1f3367be49970)
@@ -12,21 +12,21 @@
 pub fn Navbar() -> Element {
     rsx! {
-        document::Link { rel: "stylesheet", href: NAVBAR_CSS }
-
-        div {
-            id: "navbar",
-            Link {
-                to: Route::Home {},
-                "Home"
-            }
-            Link {
-                to: Route::Blog { id: 1 },
-                "Blog"
-            }
-        }
-
         // The `Outlet` component is used to render the next component inside the layout. In this case, it will render either
         // the [`Home`] or [`Blog`] component depending on the current route.
         Outlet::<Route> {}
+
+        document::Link { rel: "stylesheet", href: NAVBAR_CSS }
+
+        div { id: "navbar",
+            Link { id: "navbar-item", to: Route::Home {}, "Home" }
+            Link { id: "navbar-item", to: Route::Blog { id: 1 }, "Blog" }
+
+            div { class: "fab-container",
+                button { class: "fab", "+" }
+            }
+
+            Link { id: "navbar-item", to: Route::Home {}, "Home" }
+            Link { id: "navbar-item", to: Route::Blog { id: 1 }, "Blog" }
+        }
     }
 }