diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index b3b853e..dcc497f 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,500;0,900;1,100;1,400&display=swap');
 @import '@/assets/css/tailwind.css';
 @import 'leaflet/dist/leaflet.css';
 @import '@/assets/css/leaflet.css';
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
index dc6e7c3..8784bcd 100644
--- a/src/assets/css/tailwind.css
+++ b/src/assets/css/tailwind.css
@@ -10,8 +10,8 @@
     --color-secondary: 14, 165, 233;
     --color-secondary-content: 255, 255, 255;
 
-    --color-base-0: 255, 255, 255;
-    --color-base-100: 245, 247, 251;
+    --color-base-foreground: 255, 255, 255;
+    --color-base-background: 245, 247, 251;
     --color-base-200: 226, 232, 240;
     --color-base-300: 203, 213, 225;
     --color-base-content: 0, 0, 0;
@@ -24,8 +24,8 @@
     --color-secondary: 14, 165, 233;
     --color-secondary-content: 255, 255, 255;
 
-    --color-base-0: 17,24,39;
-    --color-base-100: 15, 23, 42;
+    --color-base-background: 17,24,39;
+    --color-base-foreground: 15, 23, 42;
     --color-base-200: 30, 41, 59;
     --color-base-300: 30, 41, 59;
     --color-base-content: 255, 255, 255;
@@ -38,7 +38,7 @@
   body {
     @apply 
       font-main
-      bg-base-100
+      bg-base-background
       dark:text-slate-400;
   }
   
@@ -51,4 +51,4 @@
   .dark {
     color-scheme: dark;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Button/ButtonExpand.global.vue b/src/components/Button/ButtonExpand.global.vue
index ce52574..a4300d9 100644
--- a/src/components/Button/ButtonExpand.global.vue
+++ b/src/components/Button/ButtonExpand.global.vue
@@ -3,7 +3,7 @@
     type="button"
     class="
       button-expand
-      bg-base-0
+      bg-base-foreground
       text-secondary-color
       w-5
       h-5"
diff --git a/src/components/Card/VCard.global.vue b/src/components/Card/VCard.global.vue
index 6018470..a3b1315 100644
--- a/src/components/Card/VCard.global.vue
+++ b/src/components/Card/VCard.global.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="border-1 card border-base-2 bg-base-0 print:shadow-none print:border-0 rounded">
+  <div class="border-1 card border-base-200 bg-base-foreground print:shadow-none print:border-0 rounded">
     <slot />
   </div>
 </template>
diff --git a/src/components/Gallery/GalleryThumbnail.vue b/src/components/Gallery/GalleryThumbnail.vue
index dabc430..4362227 100644
--- a/src/components/Gallery/GalleryThumbnail.vue
+++ b/src/components/Gallery/GalleryThumbnail.vue
@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="bg-base-0 flex flex-col justify-center cursor-pointer w-24 max-h-20 h-20 border-base-200 rounded-md border-2"
+    class="bg-base-background flex flex-col justify-center cursor-pointer w-24 max-h-20 h-20 border-base-200 rounded-md border"
     :title="title"
   >
     <img 
diff --git a/src/components/Gallery/GalleryThumbnailList.vue b/src/components/Gallery/GalleryThumbnailList.vue
index 4e72dd2..540ef3b 100644
--- a/src/components/Gallery/GalleryThumbnailList.vue
+++ b/src/components/Gallery/GalleryThumbnailList.vue
@@ -9,7 +9,7 @@
     >
       <GalleryThumbnail
         :image="image"
-        :class="{ 'border-2 border-secondary-color': current === index }"
+        :class="{ 'border border-secondary-color': current === index }"
         :title="image.depictions.map(d => d.label).join(';')"
         @click="emit('selectIndex', index)"
       />
diff --git a/src/components/ImageViewer/ControlImageNext.vue b/src/components/ImageViewer/ControlImageNext.vue
index 7d2193e..85cede6 100644
--- a/src/components/ImageViewer/ControlImageNext.vue
+++ b/src/components/ImageViewer/ControlImageNext.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     type="button"
-    class="p-2 cursor-pointer opacity-50 bg-base-content text-base-0"
+    class="p-2 cursor-pointer opacity-50 bg-base-content text-base-background"
   >
     <IconArrowRight class="h-8 w-8" />
   </button>
diff --git a/src/components/ImageViewer/ControlImagePrevious.vue b/src/components/ImageViewer/ControlImagePrevious.vue
index a39a612..4ceeee6 100644
--- a/src/components/ImageViewer/ControlImagePrevious.vue
+++ b/src/components/ImageViewer/ControlImagePrevious.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     type="button"
-    class="p-2 cursor-pointer opacity-50 bg-base-content text-base-0"
+    class="p-2 cursor-pointer opacity-50 bg-base-content text-base-background"
   >
     <IconArrowLeft class="h-8 w-8" />
   </button>
diff --git a/src/components/ImageViewer/ImageViewer.global.vue b/src/components/ImageViewer/ImageViewer.global.vue
index 041a85e..4c9ff43 100644
--- a/src/components/ImageViewer/ImageViewer.global.vue
+++ b/src/components/ImageViewer/ImageViewer.global.vue
@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="fixed z-[10000] h-full overflow-y-hidden overflow-x-hidden w-full top-0 left-0 flex flex-col items-center justify-center backdrop-blur-md bg-base-0"
+    class="fixed z-[10000] h-full overflow-y-hidden overflow-x-hidden w-full top-0 left-0 flex flex-col items-center justify-center backdrop-blur-md bg-base-foreground"
     @click="emit('close')"
   >
     <div 
diff --git a/src/modules/otus/views/Index.vue b/src/modules/otus/views/Index.vue
index 445cd26..e2f180d 100644
--- a/src/modules/otus/views/Index.vue
+++ b/src/modules/otus/views/Index.vue
@@ -2,8 +2,7 @@
   <div>
     <div 
       class="
-        bg-base-0
-
+        bg-base-foreground
         border-b
         border-base-200
         pl-4 
diff --git a/src/modules/otus/views/Overview.vue b/src/modules/otus/views/Overview.vue
index c5aa368..898dbe6 100644
--- a/src/modules/otus/views/Overview.vue
+++ b/src/modules/otus/views/Overview.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-      <div class="grid grid-cols-1 gap-4 auto-rows-min">
+    <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+      <div class="grid grid-cols-1 gap-3 auto-rows-min">
         <template
           v-for="({ component, available }) in componentsLayout.left"
           :key="component"
@@ -14,7 +14,7 @@
           />
         </template>
       </div>
-      <div class="grid grid-cols-1 auto-rows-min gap-4">
+      <div class="grid grid-cols-1 auto-rows-min gap-3">
         <template
           v-for="({ component, available }) in componentsLayout.right"
           :key="component"
diff --git a/tailwind.config.js b/tailwind.config.js
index efce8d9..b126541 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,12 +20,12 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        main: ['-apple-system','BlinkMacSystemFont','San Francisco','Segoe UI','Roboto','Helvetica Neue','sans-serif']
+        main: ['Roboto','sans-serif']
       },
       colors: {
         base: {
-          0: withOpacity('--color-base-0'),
-          100: withOpacity('--color-base-100'),
+          background: withOpacity('--color-base-background'),
+          foreground: withOpacity('--color-base-foreground'),
           200: withOpacity('--color-base-200'),
           300: withOpacity('--color-base-300'),
           content: withOpacity('--color-base-content')