diff --git a/todo/package-lock.json b/todo/package-lock.json
index d239ba6..3dda42d 100644
--- a/todo/package-lock.json
+++ b/todo/package-lock.json
@@ -8,6 +8,9 @@
       "name": "todo",
       "version": "1.0.0",
       "license": "ISC",
+      "dependencies": {
+        "date-fns": "^3.0.6"
+      },
       "devDependencies": {
         "css-loader": "^6.8.1",
         "html-webpack-plugin": "^5.5.4",
@@ -1071,6 +1074,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/date-fns": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.0.6.tgz",
+      "integrity": "sha512-W+G99rycpKMMF2/YD064b2lE7jJGUe+EjOES7Q8BIGY8sbNdbgcs9XFTZwvzc9Jx1f3k7LB7gZaZa7f8Agzljg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
diff --git a/todo/package.json b/todo/package.json
index f8de70a..9137bc3 100644
--- a/todo/package.json
+++ b/todo/package.json
@@ -20,5 +20,8 @@
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
+  },
+  "dependencies": {
+    "date-fns": "^3.0.6"
   }
 }
diff --git a/todo/src/components/navbar.js b/todo/src/components/navbar.js
new file mode 100644
index 0000000..3703b4f
--- /dev/null
+++ b/todo/src/components/navbar.js
@@ -0,0 +1,38 @@
+function navbar(projects) {
+    let nav = document.createElement('nav');
+    nav.classList.add('nav');
+
+    let projectsDiv = projectButtons(projects);
+    let addProjectBtn = addProject();
+
+    nav.appendChild(projectsDiv);
+    nav.appendChild(addProjectBtn);
+    
+    return nav;
+}
+
+function projectButtons(projects) {
+    let projectsDiv = document.createElement('div');
+    projectsDiv.classList.add(['projects']);
+
+    projects.forEach(e => {
+        if (e.name !== 'default') {
+            let btn = document.createElement('button');
+            btn.classList.add(['btn', 'project-btn']);
+            btn.textContent = e.name; 
+            projectsDiv.append(btn);
+        };
+    });
+    return projectsDiv;
+}
+
+function addProject() {
+    let btn = document.createElement('button');
+    btn.classList.add(['btn', 'add-project']);
+    btn.textContent = 'New Project';
+    return btn;
+
+}
+
+
+export { navbar };
diff --git a/todo/src/components/todo.js b/todo/src/components/todo.js
index 198f09f..10a0c30 100644
--- a/todo/src/components/todo.js
+++ b/todo/src/components/todo.js
@@ -85,10 +85,10 @@ class todoHandler {
     } 
 
     getProjects () {
-        return this.projects.map(item => item.name);
+        return this.projects;
     }
 
-    delProject = name => {
+    delProject(name) {
         let index = this.projects.findIndex(proj => proj.name === name);
         let tempArr = this.projects.filter(item => {
             if (item !== this.projects[index] || name === 'default' ){
diff --git a/todo/src/index.js b/todo/src/index.js
index cd90e47..9c9fffc 100644
--- a/todo/src/index.js
+++ b/todo/src/index.js
@@ -1,7 +1,9 @@
+import { navbar } from "./components/navbar";
 import { todoHandler } from "./components/todo";
 import { save, load } from "./components/storage";
 
-let todos; let data = load();
+let todos; 
+let data = load();
 
 // if there's local data save it in the array 
 if (data) {
@@ -15,6 +17,10 @@ if (data) {
 todos.addProject('job');
 todos.addTodo('default', 'test default 2', 'some stuff', 'today', 5);
 todos.addTodo('default', 'default 2', 'some stuff', 'today', 5);
+
+
+document.body.appendChild(navbar(todos.getProjects()));
+
 // todos.addTodo('chores', 'choretest', 'some stuff', 'today', 5);
 // todos.delProject('de');
 // todos.editTodo('default', 'test', 'stuffing', 'tomorrow', 4);