diff --git a/package-lock.json b/package-lock.json
index 6789ddf..94f7b80 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "@ckeditor/ckeditor5-paragraph": "^37.1.0",
         "@ckeditor/ckeditor5-theme-lark": "^37.1.0",
         "@ckeditor/vite-plugin-ckeditor5": "^0.1.1",
+        "@fontsource/source-sans-pro": "^4.5.11",
         "@fortawesome/fontawesome-free": "^6.4.0",
         "@types/marked": "^4.0.8",
         "@vueuse/components": "^10.1.0",
@@ -1230,6 +1231,11 @@
       "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.9.0.tgz",
       "integrity": "sha512-BpiZLBWdLFw+qFel9p3Zs1jD6QmH7Ii4aTDu6+vx8ShdidChZUXqDhYJly4ZjSgQh54miXbBgBrk0S+jTIh/Qg=="
     },
+    "node_modules/@fontsource/source-sans-pro": {
+      "version": "4.5.11",
+      "resolved": "https://registry.npmjs.org/@fontsource/source-sans-pro/-/source-sans-pro-4.5.11.tgz",
+      "integrity": "sha512-f7iw44q1EjBv3MNcHCGAgrW/QVyweaEouFsJzykPhTOGnZFSwFJRISToXornOmuAy7xUUGiVdqOLiykgZoYB8A=="
+    },
     "node_modules/@fortawesome/fontawesome-free": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.0.tgz",
@@ -4426,6 +4432,11 @@
       "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.9.0.tgz",
       "integrity": "sha512-BpiZLBWdLFw+qFel9p3Zs1jD6QmH7Ii4aTDu6+vx8ShdidChZUXqDhYJly4ZjSgQh54miXbBgBrk0S+jTIh/Qg=="
     },
+    "@fontsource/source-sans-pro": {
+      "version": "4.5.11",
+      "resolved": "https://registry.npmjs.org/@fontsource/source-sans-pro/-/source-sans-pro-4.5.11.tgz",
+      "integrity": "sha512-f7iw44q1EjBv3MNcHCGAgrW/QVyweaEouFsJzykPhTOGnZFSwFJRISToXornOmuAy7xUUGiVdqOLiykgZoYB8A=="
+    },
     "@fortawesome/fontawesome-free": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.0.tgz",
diff --git a/package.json b/package.json
index 082e082..24cd735 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@ckeditor/ckeditor5-paragraph": "^37.1.0",
     "@ckeditor/ckeditor5-theme-lark": "^37.1.0",
     "@ckeditor/vite-plugin-ckeditor5": "^0.1.1",
+    "@fontsource/source-sans-pro": "^4.5.11",
     "@fortawesome/fontawesome-free": "^6.4.0",
     "@types/marked": "^4.0.8",
     "@vueuse/components": "^10.1.0",
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index ed3ede7..810b7c4 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -10,11 +10,14 @@ const props = defineProps<{
 const emit = defineEmits<{
   toggleSideBar: []
 }>()
-</script> 
+</script>
 <template>
   <div class="absolute left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
     <div class="w-in mx-auto flex w-full max-w-app items-center py-2.5 text-white">
-      <div class="flex pl-3 items-center" :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'">
+      <div
+        class="flex items-center pl-3"
+        :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'"
+      >
         <Hamburger
           :side-bar-collapsed="props.sideBarCollapsed"
           @toggle-side-bar="emit('toggleSideBar')"
@@ -28,12 +31,12 @@ const emit = defineEmits<{
       <div class="flex h-full flex-1 flex-row items-center gap-2 pl-5 pr-3">
         <SearchBar />
         <button
-          class="btn-outline btn-sm btn h-full text-white"
+          class="btn-outline btn-sm btn text-white py-1"
           @click="addNote('Untitled new note', '', true)"
         >
           <i class="fas fa-plus-circle text-[1.1rem]" />
         </button>
-        <button class="btn-outline btn-sm btn h-full text-white">Sign in</button>
+        <button class="btn-outline btn-sm btn text-white py-1">Sign in</button>
       </div>
     </div>
   </div>
diff --git a/src/style.scss b/src/style.scss
index eeca475..198558b 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import '@fontsource/source-sans-pro';
 
 body,
 body > div,
@@ -9,6 +10,8 @@ html {
 }
 
 body {
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: 110%;
   overflow-y: auto;
 }
 
@@ -20,7 +23,7 @@ body {
   line-height: 2rem;
   ol,
   ul {
-    @apply ps-8 my-2;
+    @apply my-2 ps-8;
   }
   ol {
     @apply list-decimal;