diff --git a/src/assets/base.css b/src/assets/base.css
index e17ac51..dc5ceab 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,10 +1,10 @@
 :root {
-  --bg-color: #424242;
+  --bg-color: #353535;
   --text-color: #bdbdbd;
-  --font-family: Arial, Helvetica, sans-serif;
+  --font-family: "sourcesanspro";
   --titlebar-color: #212121;
-  --bottomnav-color: #757575;
-  --bottomnav-icon-color: #dedede;
+  --bottomnav-color: #555555;
+  --bottomnav-icon-color: #c7c7c7;
   --bottomnav-icon-active-color: #456c47;
   --bottomnav-active-color: #7ca74b;
 }
diff --git a/src/components/bottom-navbar.vue b/src/components/bottom-navbar.vue
index 5798a35..81cb992 100644
--- a/src/components/bottom-navbar.vue
+++ b/src/components/bottom-navbar.vue
@@ -64,7 +64,7 @@ import { RouterLink } from "vue-router";
 }
 
 .entry * {
-  color: var(--icon-color);
+  color: var(--bottomnav-icon-color);
 }
 
 a {
diff --git a/src/views/SubstitutionView.vue b/src/views/SubstitutionView.vue
index fc92479..ab78686 100644
--- a/src/views/SubstitutionView.vue
+++ b/src/views/SubstitutionView.vue
@@ -70,9 +70,9 @@ function getText(substitution) {
   min-height: 35px;
   border-radius: 11px;
   margin: 10px 0px;
-  padding: 10px;
+  padding: 10px 15px;
   grid-template-columns: max-content auto;
-  gap: 10px;
+  gap: 15px;
 }
 
 .hour {
@@ -91,11 +91,11 @@ function getText(substitution) {
   font-size: 18px;
   display: flex;
   align-items: center;
-  font-weight: 100;
   word-wrap: break-word;
 }
 
 .notes {
   font-size: 13px;
+  font-weight: 100;
 }
 </style>
diff --git a/src/views/TimetableView.vue b/src/views/TimetableView.vue
index dda9e8e..c7ae0bf 100644
--- a/src/views/TimetableView.vue
+++ b/src/views/TimetableView.vue
@@ -33,6 +33,7 @@ const timetableDay = ref(0);
 
 .title {
   font-size: 18px;
+  text-align: center;
 }
 
 .lesson {
@@ -41,9 +42,9 @@ const timetableDay = ref(0);
   height: 60px;
   border-radius: 11px;
   margin: 10px 0px;
-  padding: 10px;
+  padding: 10px 15px;
   grid-template-columns: max-content max-content;
-  gap: 10px;
+  gap: 15px;
 }
 
 .hour {