diff --git a/README.md b/README.md
index 68ce041..088b3d9 100644
Binary files a/README.md and b/README.md differ
diff --git a/client/public/components/components.js b/client/public/components/components.js
index a6c3b0a..9939365 100644
--- a/client/public/components/components.js
+++ b/client/public/components/components.js
@@ -8,7 +8,9 @@ class Component extends HTMLElement {
     }
 }
 
-// some not-so-scalable way to load all the components
+// other components with behaviour go here
+
+// some not-so-scalable way to load all the generic template-like components
 async function loadComponents() {
     // because of "sECuRItY" i can't simply just find everything in the components folder
     // there is a way to sideload this with express and have it do all that stuff
@@ -17,10 +19,12 @@ async function loadComponents() {
         'navbar'
     ];
     for (let i = 0; i < components.length; i++) {
-        const path = `./components/${components[i]}.html`;
+        const path = `./components/${components[i]}/${components[i]}.html`;
         const component = await sideLoad(path);
-        const stylePath = `./components/${components[i]}.css`;
+        const stylePath = `./components/${components[i]}/${components[i]}.css`;
         const styleComponent = await sideLoad(stylePath);
+        const scriptPath = `./components/${components[i]}/${components[i]}.js`;
+        const scriptComponent = await sideLoad(scriptPath);
 
         const Template = class extends Component {
             constructor() {
@@ -31,6 +35,11 @@ async function loadComponents() {
 
                 shadow.innerHTML = component;
                 
+                const script = document.createElement('script');
+                script.text = scriptComponent;
+                shadow.appendChild(script);
+                
+                // always assume global.css is the first css file
                 const style = document.createElement('style');
                 style.textContent = styleComponent;
                 shadow.appendChild(style);
diff --git a/client/public/components/navbar.css b/client/public/components/navbar.css
deleted file mode 100644
index e1a7fc7..0000000
--- a/client/public/components/navbar.css
+++ /dev/null
@@ -1,5 +0,0 @@
-h1 {
-    font-size: 1.5em;
-    color: rgb(214, 114, 114);
-    margin: 0;
-}
\ No newline at end of file
diff --git a/client/public/components/navbar.html b/client/public/components/navbar.html
deleted file mode 100644
index a602c42..0000000
--- a/client/public/components/navbar.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<!-- Basic NavBar template that uses logo.svg -->
-<h1>lol</h1>
\ No newline at end of file
diff --git a/client/public/components/navbar/navbar.css b/client/public/components/navbar/navbar.css
new file mode 100644
index 0000000..b63618f
--- /dev/null
+++ b/client/public/components/navbar/navbar.css
@@ -0,0 +1,25 @@
+.tl-nav-bar {
+    display: flex;
+    font-family: 'Londrina Solid', cursive;
+    flex-direction: row;
+    justify-content: center;
+    align-items: baseline;
+    align-content: center;
+    flex-wrap: nowrap;
+    width: 100%;
+    height: 10%;
+    background-color: #4A6C6F;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+};
+
+.tl-nav-item {
+    display: flex;
+    font-size: 150%;
+    flex-grow: 2;
+};
+
+.nav-bar-logo {
+    display: flex;
+    flex-shrink: 3;
+    order: -1;
+};
diff --git a/client/public/components/navbar/navbar.html b/client/public/components/navbar/navbar.html
new file mode 100644
index 0000000..d5a774b
--- /dev/null
+++ b/client/public/components/navbar/navbar.html
@@ -0,0 +1,25 @@
+<!-- Basic NavBar template that uses logo.svg -->
+<div class="tl-nav-bar">
+    <div class="tl-nav-item">
+        <img class="nav-bar-logo" src="/res/logo.svg" alt="LegoLog Logo">
+    </div>
+    <div class="tl-nav-item">
+        New
+    </div>
+    <div class="tl-nav-item">
+        Offers
+    </div>
+    <div class="tl-nav-item">
+        Bricks
+    </div>
+    <div class="tl-nav-item">
+        Our Sets
+    </div>
+    <div class="tl-nav-item">
+        My Sets
+    </div>
+    <div class="tl-nav-item tl-nav-right">
+        My Account
+        <div class="nested-nav-item"></div>
+    </div>
+</div> <!-- end of nav-bar -->
diff --git a/client/public/components/navbar/navbar.js b/client/public/components/navbar/navbar.js
new file mode 100644
index 0000000..e69de29
diff --git a/client/public/global.css b/client/public/global.css
new file mode 100644
index 0000000..d481d3b
--- /dev/null
+++ b/client/public/global.css
@@ -0,0 +1,14 @@
+body {
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #333;
+    background-color: rgb(241, 241, 241);
+}
+
+.text {
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+    color: #333;
+    line-height: 1.5;
+}
diff --git a/client/public/index.html b/client/public/index.html
index d51e4e5..5660b4b 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -1,7 +1,10 @@
 <html>
 <head>
 	<title>LegoLog Home!</title>
-	<script src="components/components.js"></script>
+	<link rel="stylesheet" type="text/css" href="global.css">
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Londrina+Solid&display=swap" rel="stylesheet">	<script src="components/components.js"></script>
 </head>
 <body>
 	<navbar-component></navbar-component>
diff --git a/src/routes/server.js b/src/routes/server.js
index b1c3008..a458cbc 100644
--- a/src/routes/server.js
+++ b/src/routes/server.js
@@ -21,8 +21,6 @@ function listen(port) {
     app.use(logRequest);
 
     app.use(express.static('client/public/'));
-
-    app.get('/', (req, res) => { res.end('lol') })
 }
 
 module.exports = {