diff --git a/.gitignore b/.gitignore
index 549e00a..b6d3320 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,3 +31,10 @@ build/
 
 ### VS Code ###
 .vscode/
+.history/
+
+### macOS ### 
+*.DS_Store
+
+### Database files ###
+*.db
diff --git a/src/main/resources/application.yaml b/src/main/resources/config/application.yaml
similarity index 100%
rename from src/main/resources/application.yaml
rename to src/main/resources/config/application.yaml
diff --git a/src/main/resources/production.yaml b/src/main/resources/config/production.yaml
similarity index 100%
rename from src/main/resources/production.yaml
rename to src/main/resources/config/production.yaml
diff --git a/src/main/resources/static/style/core/footer.css b/src/main/resources/static/css/core/footer.css
similarity index 100%
rename from src/main/resources/static/style/core/footer.css
rename to src/main/resources/static/css/core/footer.css
diff --git a/src/main/resources/static/style/core/header.css b/src/main/resources/static/css/core/header.css
similarity index 100%
rename from src/main/resources/static/style/core/header.css
rename to src/main/resources/static/css/core/header.css
diff --git a/src/main/resources/fetchSecondarySkills.js b/src/main/resources/static/css/core/navigation.css
similarity index 100%
rename from src/main/resources/fetchSecondarySkills.js
rename to src/main/resources/static/css/core/navigation.css
diff --git a/src/main/resources/static/style/core/style.css b/src/main/resources/static/css/core/style.css
similarity index 100%
rename from src/main/resources/static/style/core/style.css
rename to src/main/resources/static/css/core/style.css
diff --git a/src/main/resources/static/style/projects/projects.css b/src/main/resources/static/css/projects/projects.css
similarity index 100%
rename from src/main/resources/static/style/projects/projects.css
rename to src/main/resources/static/css/projects/projects.css
diff --git a/src/main/resources/static/style/skills/skills.css b/src/main/resources/static/css/skills/skills.css
similarity index 100%
rename from src/main/resources/static/style/skills/skills.css
rename to src/main/resources/static/css/skills/skills.css
diff --git a/src/main/resources/static/js/skills/fetchSecondarySkills.js b/src/main/resources/static/js/skills/fetchSecondarySkills.js
new file mode 100644
index 0000000..57d786d
--- /dev/null
+++ b/src/main/resources/static/js/skills/fetchSecondarySkills.js
@@ -0,0 +1,18 @@
+document.getElementById("primarySkill").addEventListener("change", function () {
+  var primarySkillId = this.value;
+  fetch("/skills/secondary-skills?primarySkillId=" + primarySkillId)
+    .then((response) => response.json())
+    .then((data) => {
+      console.log("Fetch response data:", data);
+      var secondarySkillSelect = document.getElementById("secondarySkill");
+      secondarySkillSelect.innerHTML =
+        '<option value="" disabled selected>Select a secondary skill</option>';
+      data.forEach(function (secondarySkill) {
+        var option = document.createElement("option");
+        option.value = secondarySkill.ssid;
+        option.text = secondarySkill.description;
+        secondarySkillSelect.add(option);
+      });
+    })
+    .catch((error) => console.error("Error fetching secondary skills:", error));
+});
diff --git a/src/main/resources/static/style/notes/notes.css b/src/main/resources/static/style/notes/notes.css
deleted file mode 100644
index e116ab0..0000000
--- a/src/main/resources/static/style/notes/notes.css
+++ /dev/null
@@ -1 +0,0 @@
-/* Placeholder */
diff --git a/src/main/resources/templates/core/_header.html b/src/main/resources/templates/core/_header.html
index 9bf1376..45598ec 100644
--- a/src/main/resources/templates/core/_header.html
+++ b/src/main/resources/templates/core/_header.html
@@ -5,26 +5,9 @@
         <img src="/assets/inter-brand.svg" alt="INTER Logo" class="svg-logo" />
       </div>
       <div class="col-md-6">
-        <nav>
-          <ul class="nav justify-content-end">
-            <li class="nav-item">
-              <a
-                class="nav-link"
-                th:href="@{/projects}"
-                th:classappend="${activePage == 'projects' ? 'active' : ''}"
-                >Projekte</a
-              >
-            </li>
-            <li class="nav-item">
-              <a
-                class="nav-link"
-                th:href="@{/skills}"
-                th:classappend="${activePage == 'profile' ? 'active' : ''}"
-                >Skills</a
-              >
-            </li>
-          </ul>
-        </nav>
+        <div
+          th:replace="~{/core/_navigation :: navigation(activePage=${activePage})}"
+        ></div>
       </div>
     </div>
   </div>
diff --git a/src/main/resources/templates/core/_navigation.html b/src/main/resources/templates/core/_navigation.html
new file mode 100644
index 0000000..3b8a040
--- /dev/null
+++ b/src/main/resources/templates/core/_navigation.html
@@ -0,0 +1,20 @@
+<nav>
+  <ul class="nav justify-content-end">
+    <li class="nav-item">
+      <a
+        class="nav-link"
+        th:href="@{/projects}"
+        th:classappend="${activePage == 'projects' ? 'active' : ''}"
+        >Projekte</a
+      >
+    </li>
+    <li class="nav-item">
+      <a
+        class="nav-link"
+        th:href="@{/skills}"
+        th:classappend="${activePage == 'profile' ? 'active' : ''}"
+        >Skills</a
+      >
+    </li>
+  </ul>
+</nav>
diff --git a/src/main/resources/static/scripts/core/placeholder.js b/src/main/resources/templates/core/home.html
similarity index 100%
rename from src/main/resources/static/scripts/core/placeholder.js
rename to src/main/resources/templates/core/home.html
diff --git a/src/main/resources/templates/notes/notes.html b/src/main/resources/templates/notes/notes.html
deleted file mode 100644
index fee73df..0000000
--- a/src/main/resources/templates/notes/notes.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
-  <head>
-    <div th:replace="~{/core/_metadata :: metadata}"></div>
-    <title>My Skill Management System</title>
-    <link rel="stylesheet" href="style/notes/notes.css" />
-  </head>
-  <body>
-    <div class="wrapper">
-      <div th:replace="~{/core/_header :: header(activePage=${notes})}"></div>
-      <div class="content container mt-4"></div>
-      <div th:replace="~{/core/_footer :: footer}"></div>
-    </div>
-  </body>
-</html>
diff --git a/src/main/resources/templates/projects/projects-create.html b/src/main/resources/templates/pages/projects/projects-create.html
similarity index 88%
rename from src/main/resources/templates/projects/projects-create.html
rename to src/main/resources/templates/pages/projects/projects-create.html
index c5a51cf..75c6a71 100644
--- a/src/main/resources/templates/projects/projects-create.html
+++ b/src/main/resources/templates/pages/projects/projects-create.html
@@ -3,10 +3,10 @@
   <head>
     <div th:replace="~{/core/_metadata :: metadata}"></div>
     <title>Create Project</title>
-    <link rel="stylesheet" href="/style/projects/projects.css" />
-    <link rel="stylesheet" href="/style/core/style.css" />
-    <link rel="stylesheet" href="/style/core/header.css" />
-    <link rel="stylesheet" href="/style/core/footer.css" />
+    <link rel="stylesheet" href="/css/projects/projects.css" />
+    <link rel="stylesheet" href="/css/core/style.css" />
+    <link rel="stylesheet" href="/css/core/header.css" />
+    <link rel="stylesheet" href="/css/core/footer.css" />
   </head>
   <body>
     <div class="wrapper">
diff --git a/src/main/resources/templates/projects/projects.html b/src/main/resources/templates/pages/projects/projects.html
similarity index 96%
rename from src/main/resources/templates/projects/projects.html
rename to src/main/resources/templates/pages/projects/projects.html
index 76a5c8c..67205e4 100644
--- a/src/main/resources/templates/projects/projects.html
+++ b/src/main/resources/templates/pages/projects/projects.html
@@ -3,7 +3,7 @@
   <head>
     <div th:replace="~{/core/_metadata :: metadata}"></div>
     <title>Projects</title>
-    <link rel="stylesheet" href="/style/projects/projects.css" />
+    <link rel="stylesheet" href="/css/projects/projects.css" />
   </head>
   <body>
     <div class="wrapper">
diff --git a/src/main/resources/templates/skills/skills-add.html b/src/main/resources/templates/pages/skills/skills-add.html
similarity index 63%
rename from src/main/resources/templates/skills/skills-add.html
rename to src/main/resources/templates/pages/skills/skills-add.html
index 1939e5d..7b358d4 100644
--- a/src/main/resources/templates/skills/skills-add.html
+++ b/src/main/resources/templates/pages/skills/skills-add.html
@@ -3,10 +3,10 @@
   <head>
     <div th:replace="~{/core/_metadata :: metadata}"></div>
     <title>Add Skill</title>
-    <link rel="stylesheet" href="/style/skills/skills.css" />
-    <link rel="stylesheet" href="/style/core/style.css" />
-    <link rel="stylesheet" href="/style/core/header.css" />
-    <link rel="stylesheet" href="/style/core/footer.css" />
+    <link rel="stylesheet" href="/css/skills/skills.css" />
+    <link rel="stylesheet" href="/css/core/style.css" />
+    <link rel="stylesheet" href="/css/core/header.css" />
+    <link rel="stylesheet" href="/css/core/footer.css" />
   </head>
   <body>
     <div class="wrapper">
@@ -69,30 +69,6 @@
       </div>
       <div th:replace="~{/core/_footer :: footer}"></div>
     </div>
-    <script>
-      document
-        .getElementById("primarySkill")
-        .addEventListener("change", function () {
-          var primarySkillId = this.value;
-          fetch("/skills/secondary-skills?primarySkillId=" + primarySkillId)
-            .then((response) => response.json())
-            .then((data) => {
-              console.log("Fetch response data:", data);
-              var secondarySkillSelect =
-                document.getElementById("secondarySkill");
-              secondarySkillSelect.innerHTML =
-                '<option value="" disabled selected>Select a secondary skill</option>';
-              data.forEach(function (secondarySkill) {
-                var option = document.createElement("option");
-                option.value = secondarySkill.ssid;
-                option.text = secondarySkill.description;
-                secondarySkillSelect.add(option);
-              });
-            })
-            .catch((error) =>
-              console.error("Error fetching secondary skills:", error)
-            );
-        });
-    </script>
+    <script src="/js/skills/skills.js"></script>
   </body>
 </html>
diff --git a/src/main/resources/templates/skills/skills-create.html b/src/main/resources/templates/pages/skills/skills-create.html
similarity index 86%
rename from src/main/resources/templates/skills/skills-create.html
rename to src/main/resources/templates/pages/skills/skills-create.html
index eaeaf56..13a5716 100644
--- a/src/main/resources/templates/skills/skills-create.html
+++ b/src/main/resources/templates/pages/skills/skills-create.html
@@ -3,10 +3,10 @@
   <head>
     <div th:replace="~{/core/_metadata :: metadata}"></div>
     <title>Create Skill</title>
-    <link rel="stylesheet" href="/style/skills/skills.css" />
-    <link rel="stylesheet" href="/style/core/style.css" />
-    <link rel="stylesheet" href="/style/core/header.css" />
-    <link rel="stylesheet" href="/style/core/footer.css" />
+    <link rel="stylesheet" href="/css/skills/skills.css" />
+    <link rel="stylesheet" href="/css/core/style.css" />
+    <link rel="stylesheet" href="/css/core/header.css" />
+    <link rel="stylesheet" href="/css/core/footer.css" />
   </head>
   <body>
     <div class="wrapper">
diff --git a/src/main/resources/templates/skills/skills.html b/src/main/resources/templates/pages/skills/skills.html
similarity index 96%
rename from src/main/resources/templates/skills/skills.html
rename to src/main/resources/templates/pages/skills/skills.html
index 673784c..d688b9c 100644
--- a/src/main/resources/templates/skills/skills.html
+++ b/src/main/resources/templates/pages/skills/skills.html
@@ -3,8 +3,8 @@
   <head>
     <div th:replace="~{/core/_metadata :: metadata}"></div>
     <title>Skills</title>
-    <link rel="stylesheet" href="/style/skills/skills.css" />
-    <link rel="stylesheet" href="/style/core/style.css" />
+    <link rel="stylesheet" href="/css/skills/skills.css" />
+    <link rel="stylesheet" href="/css/core/style.css" />
   </head>
   <body>
     <div class="wrapper">