diff --git a/src/App.vue b/src/App.vue
index 4b66f3f787f28dacf71d1560ce0f758369721568..acde7ceff4a02b6593d47945140a9822c46abaa3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@
     <LoadingIndicator />
     <main>
       <div class="mr-0 d-flex">
-        <SidebarMenu class="pr-2" />
+        <SidebarMenu class="mr-2" />
         <div class="container-fluid px-5">
           <Pilot />
           <Maintenance />
@@ -82,6 +82,11 @@ export default defineComponent({
   margin-bottom: 10px;
   height: 1px;
   width: 100%;
-  border-top: 1px solid #bebbbb;
+  border-top: 1px solid var(--light);
+}
+
+#card-deck {
+  /* Used to align the cards' and container's left edges */
+  margin: 0em -0.5em;
 }
 </style>
diff --git a/src/assets/css/_custom.css b/src/assets/css/_custom.css
new file mode 100644
index 0000000000000000000000000000000000000000..b4bb2390b0dbb343dc1e7a9b04ac96ac6d948f84
--- /dev/null
+++ b/src/assets/css/_custom.css
@@ -0,0 +1,7 @@
+:root {
+  --navbar-height: 2.5rem;
+  --loading-indicator-height: 3px;
+  --loading-indicator-margin: 1rem;
+  --sidebar-offset-top: calc(var(--navbar-height) + var(--loading-indicator-height) + var(--loading-indicator-margin));
+  --sidebar-height: calc(100vh - var(--navbar-height) - calc(var(--loading-indicator-height) + var(--loading-indicator-margin)))
+}
\ No newline at end of file
diff --git a/src/components/elements/LoadingIndicator.vue b/src/components/elements/LoadingIndicator.vue
index ab33c3ba8b77a759b1d59862f74cce9e49d23acd..cd544d1231244e0a159f67a7480c20ac9f4025c5 100644
--- a/src/components/elements/LoadingIndicator.vue
+++ b/src/components/elements/LoadingIndicator.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="loading-indicator">
+  <div>
     <div v-if="show" class="indicator indicator-active" />
     <div v-else class="indicator bg-light" />
   </div>
@@ -47,8 +47,9 @@ export default defineComponent({
 .indicator {
   position: relative;
   width: 100%;
-  height: 3px;
-  margin-bottom: 1rem;
+  /* Heights defined as variables in "@/assets/css/_custom.css" */
+  height: var(--loading-indicator-height);
+  margin-bottom: var(--loading-indicator-margin);
 }
 .indicator-active {
   background-color: #e9ecef;
@@ -57,7 +58,7 @@ export default defineComponent({
   width: 40%;
   content: "";
   position: absolute;
-  background-color: #00549f;
+  background-color: var(--primary);
   top: 0;
   left: 0;
   bottom: 0;
diff --git a/src/components/elements/SidebarMenu.vue b/src/components/elements/SidebarMenu.vue
index 05b75f9074146b47eb0a1f0fe623b5078f3aee30..aa057be2e5b735aef501c3d2035c7e440df8342e 100644
--- a/src/components/elements/SidebarMenu.vue
+++ b/src/components/elements/SidebarMenu.vue
@@ -184,6 +184,7 @@ export default defineComponent({
                       class: "vsm--badge_default",
                     }
                   : undefined,
+                exactPath: true,
               };
             }) as Array<SidebarItem>,
           },
@@ -291,10 +292,18 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import "/src/assets/scss/_custom.scss";
 
+.v-sidebar-menu {
+  height: var(--sidebar-height);
+  border-radius: 0rem 0.25rem 0.25rem 0rem;
+  background: $light;
+}
+.v-sidebar-menu ::v-deep .vsm--toggle-btn {
+  border-radius: 0rem 0rem 0.25rem 0rem;
+  background-color: var(--secondary);
+}
 .v-sidebar-menu.vsm_expanded {
   overflow-y: auto;
   overflow-x: hidden;
-  max-height: calc(100vh - 50px - 30px);
 }
 .v-sidebar-menu ::v-deep .vsm--badge {
   background-color: #ffc107;
@@ -336,4 +345,9 @@ export default defineComponent({
   box-shadow: 3px 0px 0px 0px $primary inset;
   -webkit-box-shadow: 3px 0px 0px 0px $primary inset;
 }
+.v-sidebar-menu ::v-deep .vsm--link_level-2.vsm--link_active {
+  // Use this to edit the second level element when active
+  background-color: var(--primary);
+  color: $white;
+}
 </style>
diff --git a/src/main.ts b/src/main.ts
index d0c80729d41a2355ceca4fe8468696a3fb79836a..cf19bfb63a673e34236cae07d7a94f4e782f348f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -16,6 +16,7 @@ import "@/plugins/bootstrap-vue";
 
 /* Corporate Design */
 import "@/assets/scss/_custom.scss";
+import "@/assets/css/_custom.css";
 
 /* Other */
 import App from "@/App.vue";
diff --git a/src/modules/project/pages/ListProjects.vue b/src/modules/project/pages/ListProjects.vue
index cdd0ee2d84fbbb32c00a9289a8a441c2b94b74aa..7b6427c863581ef140fb10347cb9741c97acfab1 100644
--- a/src/modules/project/pages/ListProjects.vue
+++ b/src/modules/project/pages/ListProjects.vue
@@ -2,7 +2,7 @@
   <div id="project">
     <CoscineHeadline :headline="$tc('page.listProjects.title', 0)" />
     <div class="list">
-      <b-card-group deck>
+      <b-card-group id="card-deck" deck>
         <CoscineCard
           :title="$t('page.listProjects.addProject')"
           type="create"
diff --git a/src/modules/project/pages/ProjectPage.vue b/src/modules/project/pages/ProjectPage.vue
index 59ec546affa653b23a015bad36019931dcc0552b..a4ba4dd35de8a641c5ea4f301dae171e06cd94f6 100644
--- a/src/modules/project/pages/ProjectPage.vue
+++ b/src/modules/project/pages/ProjectPage.vue
@@ -6,7 +6,7 @@
         <CoscineHeadline :headline="$tc('page.project.resource', 2)" />
 
         <div class="list">
-          <b-card-group deck>
+          <b-card-group id="card-deck" deck>
             <CoscineCard
               :title="$t('page.project.addResource')"
               type="create"
@@ -49,7 +49,7 @@
       <CoscineHeadline :headline="$tc('page.project.subProject', 0)" />
 
       <div class="list">
-        <b-card-group deck>
+        <b-card-group id="card-deck" deck>
           <CoscineCard
             :title="$t('page.listProjects.addProject')"
             type="create"