diff --git a/index.html b/index.html
index c6a8c2c..11078e3 100644
--- a/index.html
+++ b/index.html
@@ -7,10 +7,14 @@
   <title id="website_title"></title>
   <link rel="stylesheet" href="styles/main_style.css">
   <link rel="stylesheet" href="styles/sidebar_style.css">
+  <link rel="stylesheet" href="styles/mobile_bar_style.css">
   <link rel="stylesheet" href="styles/projects_style.css">
 </head>
 
 <body>
+  <div id="navbar-mobile">
+
+  </div>
   <aside class="sidebar">
 
     <div id="sidebar-top">
@@ -54,9 +58,7 @@
     <div id="projects-section"></div>
   </div>
 
-  <script src="scripts/main_page.js">
-
-  </script>
+  <script src="scripts/main_page.js"></script>
 
 </body>
 
diff --git a/scripts/main_page.js b/scripts/main_page.js
index 02462d7..e5b719d 100644
--- a/scripts/main_page.js
+++ b/scripts/main_page.js
@@ -85,6 +85,8 @@ async function loadData() {
     const navbar = document.getElementById("navbar");
     const sidebar_top = document.getElementById("sidebar-top-content");
 
+    const navbar_mobile = document.getElementById("navbar-mobile");
+
     const sidebar_top_status = document.createElement("p");
     sidebar_top_status.textContent = data.status;
     sidebar_top.appendChild(sidebar_top_status);
@@ -113,7 +115,7 @@ async function loadData() {
     github_link_introduction.rel = "noopener noreferrer";
     introduction.appendChild(github_link_introduction);
 
-    create_navbar_entry(navbar, data.title_introduction, "introduction", 0);
+    create_navbar_entry(navbar, navbar_mobile, data.title_introduction, "introduction", 0);
 
     const navbar_group = document.createElement("li");
     navbar_group.className = "navbar-group";
@@ -128,7 +130,7 @@ async function loadData() {
         project.setAttribute("data-nav", item.id);
         container.appendChild(project);
 
-        create_navbar_entry(navbar, item.title, item.id, j + 1);
+        create_navbar_entry(navbar, navbar_mobile, item.title, item.id, j + 1);
 
         const header = document.createElement("div");
         header.className = "section-header";
@@ -275,7 +277,7 @@ document.addEventListener("click", (e) => {
     }
 });
 
-function create_navbar_entry(navbar, title, id, j) {
+function create_navbar_entry(navbar, navar_mobile, title, id, j) {
     const navbar_item = document.createElement("li");
     navbar_item.className = "navbar-item";
     navbar.appendChild(navbar_item);
@@ -293,6 +295,20 @@ function create_navbar_entry(navbar, title, id, j) {
     navbar_link.appendChild(text);
     navbar_link.dataset.target = id;
     navbar_item.appendChild(navbar_link);
+
+    create_navbar_entry_mobile(navar_mobile, title, id)
+}
+
+function create_navbar_entry_mobile(navar_mobile, title, id) {
+    const navbar_item = document.createElement("li");
+    navbar_item.className = "navbar-item-mobile";
+    navar_mobile.appendChild(navbar_item);
+
+    const navbar_link = document.createElement("a");
+    navbar_link.className = "nav-link-mobile";
+    navbar_link.href = `#${id}`;
+    navbar_link.textContent = title;
+    navbar_item.appendChild(navbar_link);
 }
 
 function setCookie(name, value, maxAge) {
diff --git a/styles/main_style.css b/styles/main_style.css
index 83c3e9c..7c328b3 100644
--- a/styles/main_style.css
+++ b/styles/main_style.css
@@ -8,6 +8,7 @@
     --serif: Georgia, serif;
     --sans: system-ui, sans-serif;
     --nav-w: 230px;
+    --nav-mobile-w: 100px;
     --font-size: 1rem;
 }
 
diff --git a/styles/mobile_bar_style.css b/styles/mobile_bar_style.css
new file mode 100644
index 0000000..e4f5fbd
--- /dev/null
+++ b/styles/mobile_bar_style.css
@@ -0,0 +1,44 @@
+#navbar-mobile {
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    width: var(--nav-mobile-w);
+    height: 100vh;
+    justify-content: flex-start;
+    align-items: center;
+    border-right: 1px solid var(--border);
+    gap: 10px;
+    background: var(--bg);
+}
+
+@media (min-width: 1001px) {
+    #navbar-mobile {
+        display: none;
+    }
+}
+
+.navbar-item-mobile {
+    width: 100%;
+    height: 80px;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+}
+
+.navbar-item-mobile:hover {
+    background: var(--surface);
+}
+
+.nav-link-mobile {
+    text-align: center;
+    font-size: calc(var(--font-size) - 0.2rem);
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
\ No newline at end of file
diff --git a/styles/projects_style.css b/styles/projects_style.css
index 693a8d4..fd2525e 100644
--- a/styles/projects_style.css
+++ b/styles/projects_style.css
@@ -3,6 +3,13 @@
     --margin-main-content: 100px;
 }
 
+@media (max-width: 1000px) {
+    .main-content {
+        margin-left: var(--nav-mobile-w);
+        --margin-main-content: 10px;
+    }
+}
+
 #introduction {
     padding-top: 100px;
     margin-left: var(--margin-main-content);
diff --git a/styles/sidebar_style.css b/styles/sidebar_style.css
index 5340803..b6f34d8 100644
--- a/styles/sidebar_style.css
+++ b/styles/sidebar_style.css
@@ -14,6 +14,12 @@
     --padding: 30px;
 }
 
+@media (max-width: 1000px) {
+    .sidebar {
+        display: none;
+    }
+}
+
 /* Sidebar Top */
 
 #sidebar-top {
