diff --git a/.eslintrc.js b/.eslintrc.js
index f36ff8c..d02edce 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -10,7 +10,8 @@ module.exports = {
     defineEmits: true,
     defineProps: true,
     __APP_ENV__: true,
-    __basedir: true
+    __basedir: true,
+    __tailwindCSSTaxonPagesConfigPath: true
   },
   rules: {
     'vue/no-v-html': 'off'
diff --git a/config/header.yml b/config/header.yml
index 9c9aa06..977c427 100644
--- a/config/header.yml
+++ b/config/header.yml
@@ -1,8 +1,6 @@
 ---
   header_logo_url: https://i.ibb.co/5n5jMWL/SiteLogo.jpg
   header_logo_text: Orthoptera Species File
-  header_class: bg-[#89a741]
-  header_link_class: text-white 
   header_links:
     - label: Home
       link: /
diff --git a/config/vendor/tailwind.config.js b/config/vendor/tailwind.config.js
index e56c9cb..5e5c87d 100644
--- a/config/vendor/tailwind.config.js
+++ b/config/vendor/tailwind.config.js
@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    require(__basedir + '/tailwind.config.js')
+    require(__tailwindCSSTaxonPagesConfigPath)
   ]
 }
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 5eb6aba..b3b853e 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -2,25 +2,3 @@
 @import 'leaflet/dist/leaflet.css';
 @import '@/assets/css/leaflet.css';
 @import '@/assets/css/webkit.css';
-
-* {
-  box-sizing: content-box;
-}
-
-body {
-  background-color: #f5f7fb;
-  @apply 
-    font-main
-    dark:bg-slate-900
-    dark:text-slate-400;
-}
-
-a {
-  @apply 
-    text-primary-500
-    hover:text-gray-900;
-}
-
-.dark {
-  color-scheme: dark;
-}
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
index b5c61c9..dc6e7c3 100644
--- a/src/assets/css/tailwind.css
+++ b/src/assets/css/tailwind.css
@@ -1,3 +1,54 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --color-primary: 137, 167, 65;
+    --color-primary-content: 255, 255, 255;
+
+    --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-200: 226, 232, 240;
+    --color-base-300: 203, 213, 225;
+    --color-base-content: 0, 0, 0;
+  }
+
+  .dark {
+    --color-primary: 14, 165, 233;
+    --color-primary-content: 255, 255, 255;
+    
+    --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-200: 30, 41, 59;
+    --color-base-300: 30, 41, 59;
+    --color-base-content: 255, 255, 255;
+  }
+
+  * {
+    box-sizing: content-box;
+  }
+  
+  body {
+    @apply 
+      font-main
+      bg-base-100
+      dark:text-slate-400;
+  }
+  
+  a {
+    @apply 
+      text-secondary-color;
+      hover:text-gray-900;
+  }
+  
+  .dark {
+    color-scheme: dark;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Autocomplete/Autocomplete.global.vue b/src/components/Autocomplete/Autocomplete.global.vue
index 2ddb645..8007f47 100644
--- a/src/components/Autocomplete/Autocomplete.global.vue
+++ b/src/components/Autocomplete/Autocomplete.global.vue
@@ -9,18 +9,7 @@
       w-fit"
   >
     <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-      <svg
-        class="w-5 h-5 text-gray-500"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-          clip-rule="evenodd"
-        />
-      </svg>
+      <IconSearch class="w-5 h-5 text-gray-500" />
     </div>
     <input
       v-model="typed"
@@ -30,12 +19,11 @@
         block
         box-border
         min-w-full
-        p-2
+        p-1.5
         pl-10
         text-gray-900
-        bg-gray-50
         dark:bg-slate-800
-        rounded-md
+        rounded
         border
         sm:text-sm
         dark:text-white
diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index 0be059b..81a217b 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -5,53 +5,38 @@
       :key="item.id"
       class="inline-flex items-center"
     >
-      <svg
+      <IconArrowRight
         v-if="index"
-        class="w-4 h-4 text-gray-400"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-          clip-rule="evenodd"
-        />
-      </svg>
+        class="w-3 h-3 mr-0.5 ml-0.5 opacity-50" 
+      />
       <router-link 
         v-if="item.length === 1"
-        class="inline-flex items-center text-sm text-accent-100 hover:text-gray-900 dark:hover:text-gray-500 text-primary-500"
+        class="
+          inline-flex 
+          items-center 
+          text-sm 
+          text-accent-100 
+          hover:text-gray-900 
+          dark:hover:text-gray-500 
+          text-secondary-color
+        "
         :to="{ name: 'otus-id', params: { id: item[0].id } }"
       >
         {{ key }}
       </router-link>
-      <breadcrumb-dropdown 
+      <BreadcrumbDropdown
         v-else 
         :list="item.map(o => ({ ...o, name: o.name || key }))"
       >
         {{ key }}
-      </breadcrumb-dropdown>
+      </BreadcrumbDropdown>
     </li>
 
     <li 
-      class="inline-flex items-center ml-0"
+      class="inline-flex items-center ml-0 text-sm"
     >
-      <svg
-        class="w-4 h-4 text-gray-400"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-          clip-rule="evenodd"
-        />
-      </svg>
-      <span
-        class="text-sm"
-        v-html="current.name_string"
-      />
+      <IconArrowRight class="w-3 h-3 mr-0.5 ml-0.5 opacity-50" />
+      <span v-html="current.name_string" />
     </li>
   </ul>
 </template>
diff --git a/src/components/Button/ButtonExpand.global.vue b/src/components/Button/ButtonExpand.global.vue
index 8cea3e8..ce52574 100644
--- a/src/components/Button/ButtonExpand.global.vue
+++ b/src/components/Button/ButtonExpand.global.vue
@@ -3,20 +3,20 @@
     type="button"
     class="
       button-expand
-      bg-white
-      dark:text-gray-400
-      dark:bg-gray-900 border
-      border-black
-      w-[14px]
-      h-[14px]
-      min-w-[14px]
-      min-h-[14px]
-      rounded
-      leading-3"
+      bg-base-0
+      text-secondary-color
+      w-5
+      h-5"
     @click="isExpanded = !isExpanded"
   >
-    <span v-if="isExpanded">-</span>
-    <span v-else>+</span>
+    <IconMinusCircle
+      v-if="isExpanded" 
+      class="w-5 h-5"
+    />
+    <IconPlusCircle
+      v-else
+      class="w-5 h-5"
+    />
   </button>
 </template>
 
diff --git a/src/components/Card/VCard.global.vue b/src/components/Card/VCard.global.vue
index 3d0b5b2..6018470 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 dark:border-slate-700 bg-white print:shadow-none print:border-0 dark:bg-slate-800 rounded">
+  <div class="border-1 card border-base-2 bg-base-0 print:shadow-none print:border-0 rounded">
     <slot />
   </div>
 </template>
diff --git a/src/components/Card/VCardContent.global.vue b/src/components/Card/VCardContent.global.vue
index 567c111..a07e30b 100644
--- a/src/components/Card/VCardContent.global.vue
+++ b/src/components/Card/VCardContent.global.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 pl-5 pr-5 dark:text-slate-400 text-slate-800">
+  <div class="p-4 pl-5 pr-5">
     <slot />
   </div>
 </template>
\ No newline at end of file
diff --git a/src/components/Card/VCardHeader.global.vue b/src/components/Card/VCardHeader.global.vue
index 300e6f5..9be31cb 100644
--- a/src/components/Card/VCardHeader.global.vue
+++ b/src/components/Card/VCardHeader.global.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 pl-5 pr-5 text dark:text-slate-200 border-b font-medium dark:border-b-slate-700">
+  <div class="p-4 pl-5 pr-5 border-b font-medium border-base-200">
     <slot />
   </div>
 </template>
\ No newline at end of file
diff --git a/src/components/Gallery/GalleryImage.global.vue b/src/components/Gallery/GalleryImage.global.vue
index 9ae0543..ad88089 100644
--- a/src/components/Gallery/GalleryImage.global.vue
+++ b/src/components/Gallery/GalleryImage.global.vue
@@ -6,9 +6,9 @@
         justify-center 
         border
         print:hidden
-        bg-white  
-        dark:bg-slate-800 
-        dark:border-slate-600"
+        bg-base-0
+        border-base-200
+      "
     >
       <div class="h-80 max-h-80 flex items-center justify-center">
         <img
diff --git a/src/components/Gallery/GalleryThumbnail.vue b/src/components/Gallery/GalleryThumbnail.vue
index d50931f..dabc430 100644
--- a/src/components/Gallery/GalleryThumbnail.vue
+++ b/src/components/Gallery/GalleryThumbnail.vue
@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="bg-white dark:bg-gray-800 flex flex-col justify-center cursor-pointer w-24 max-h-20 h-20 dark:border-gray-600 rounded-md border-2"
+    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"
     :title="title"
   >
     <img 
diff --git a/src/components/Gallery/GalleryThumbnailList.vue b/src/components/Gallery/GalleryThumbnailList.vue
index d814a3a..4e72dd2 100644
--- a/src/components/Gallery/GalleryThumbnailList.vue
+++ b/src/components/Gallery/GalleryThumbnailList.vue
@@ -9,7 +9,7 @@
     >
       <GalleryThumbnail
         :image="image"
-        :class="{ 'border-2 border-primary-500 dark:border-primary-500': current === index }"
+        :class="{ 'border-2 border-secondary-color': current === index }"
         :title="image.depictions.map(d => d.label).join(';')"
         @click="emit('selectIndex', index)"
       />
diff --git a/src/components/Icon/IconArrowDown.global.vue b/src/components/Icon/IconArrowDown.global.vue
new file mode 100644
index 0000000..4bebc07
--- /dev/null
+++ b/src/components/Icon/IconArrowDown.global.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M19 9l-7 7-7-7"
+    />
+  </svg>
+</template>
+
+<script setup>
+</script>
diff --git a/src/components/Icon/IconArrowLeft.global.vue b/src/components/Icon/IconArrowLeft.global.vue
new file mode 100644
index 0000000..5d9246e
--- /dev/null
+++ b/src/components/Icon/IconArrowLeft.global.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <path
+      class="drop-shadow"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M15 19l-7-7 7-7"
+    />
+  </svg>
+</template>
+
+<script setup>
+</script>
\ No newline at end of file
diff --git a/src/components/Icon/IconArrowRight.global.vue b/src/components/Icon/IconArrowRight.global.vue
new file mode 100644
index 0000000..5a96841
--- /dev/null
+++ b/src/components/Icon/IconArrowRight.global.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <path
+      class="drop-shadow"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M9 5l7 7-7 7"
+    />
+  </svg>
+</template>
+
+<script setup>
+</script>
\ No newline at end of file
diff --git a/src/components/Icon/IconMinusCircle.global.vue b/src/components/Icon/IconMinusCircle.global.vue
new file mode 100644
index 0000000..4a255a8
--- /dev/null
+++ b/src/components/Icon/IconMinusCircle.global.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+    />
+  </svg>
+</template>
+
+<script setup>
+</script>
\ No newline at end of file
diff --git a/src/components/Icon/IconPlusCircle.global.vue b/src/components/Icon/IconPlusCircle.global.vue
new file mode 100644
index 0000000..bb49aad
--- /dev/null
+++ b/src/components/Icon/IconPlusCircle.global.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg 
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <path 
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+    />
+  </svg>
+</template>
+
+<script setup>
+</script>
\ No newline at end of file
diff --git a/src/components/Icon/IconSearch.global.vue b/src/components/Icon/IconSearch.global.vue
new file mode 100644
index 0000000..eb823d8
--- /dev/null
+++ b/src/components/Icon/IconSearch.global.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg 
+    xmlns="http://www.w3.org/2000/svg"
+    class="w-5 h-5 text-gray-500"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+    />
+  </svg>
+</template>
+
+<script setup>
+</script>
diff --git a/src/components/ImageViewer/ControlImageNext.vue b/src/components/ImageViewer/ControlImageNext.vue
index c0bb3d7..7d2193e 100644
--- a/src/components/ImageViewer/ControlImageNext.vue
+++ b/src/components/ImageViewer/ControlImageNext.vue
@@ -1,23 +1,9 @@
 <template>
   <button
     type="button"
-    class="p-2 text-black cursor-pointer dark:text-white opacity-50 bg-black"
+    class="p-2 cursor-pointer opacity-50 bg-base-content text-base-0"
   >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="h-8 w-8"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="white"
-      stroke-width="2"
-    >
-      <path
-        class="drop-shadow"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M9 5l7 7-7 7"
-      />
-    </svg>
+    <IconArrowRight class="h-8 w-8" />
   </button>
 </template>
 
diff --git a/src/components/ImageViewer/ControlImagePrevious.vue b/src/components/ImageViewer/ControlImagePrevious.vue
index 5363911..a39a612 100644
--- a/src/components/ImageViewer/ControlImagePrevious.vue
+++ b/src/components/ImageViewer/ControlImagePrevious.vue
@@ -1,23 +1,9 @@
 <template>
   <button
     type="button"
-    class="p-2 text-black cursor-pointer dark:text-white opacity-50 bg-black"
+    class="p-2 cursor-pointer opacity-50 bg-base-content text-base-0"
   >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="h-8 w-8"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="white"
-      stroke-width="2"
-    >
-      <path
-        class="drop-shadow"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M15 19l-7-7 7-7"
-      />
-    </svg>
+    <IconArrowLeft class="h-8 w-8" />
   </button>
 </template>
 <script setup>
diff --git a/src/components/ImageViewer/ImageToolbar.vue b/src/components/ImageViewer/ImageToolbar.vue
index 474b484..b2bf11a 100644
--- a/src/components/ImageViewer/ImageToolbar.vue
+++ b/src/components/ImageViewer/ImageToolbar.vue
@@ -5,7 +5,7 @@
     </div>
     <button
       type="button"
-      class="p-2 cursor-pointer text-black dark:text-white opacity-50"
+      class="p-2 cursor-pointer opacity-50 text-base-content"
     >
       <IconClose />
     </button>
diff --git a/src/components/ImageViewer/ImageViewer.global.vue b/src/components/ImageViewer/ImageViewer.global.vue
index dd385c7..041a85e 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 bg-white overflow-y-hidden overflow-x-hidden w-full top-0 left-0 flex flex-col items-center justify-center backdrop-blur-md dark:bg-black"
+    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"
     @click="emit('close')"
   >
     <div 
@@ -31,8 +31,7 @@
     <div class="bottom-0 fixed max-w-full w-full">
       <div 
         class="
-        text-black
-        dark:text-white
+        text-base-content
         text-sm
         attributions
         p-6
@@ -41,7 +40,6 @@
         justify-between
         flex-col
         text-center
-        dark:[text-shadow:0_1px_5px_rgba(0,0,0,1)]
       "
       >
         <ImageDepictions
diff --git a/src/components/Layout/LayoutFooter.vue b/src/components/Layout/LayoutFooter.vue
index 09af82d..118fa65 100644
--- a/src/components/Layout/LayoutFooter.vue
+++ b/src/components/Layout/LayoutFooter.vue
@@ -7,7 +7,7 @@
         <span v-if="project_url">
           &lt;
           <a
-            class="text-primary-500"
+            class="text-secondary-color"
             :href="project_url"
           >
             {{ project_url }} 
diff --git a/src/components/Layout/LayoutHeader.vue b/src/components/Layout/LayoutHeader.vue
index 304abc2..71eb2fe 100644
--- a/src/components/Layout/LayoutHeader.vue
+++ b/src/components/Layout/LayoutHeader.vue
@@ -1,8 +1,8 @@
 <template>
   <div 
     class="
-      bg-white
-      border-gray-200
+      bg-header
+      border-base-200
       px-2
       sm:px-4
       py-2.5
@@ -14,14 +14,14 @@
       h-9
       align-middle
       flex
-      items-center"
-    :class="header_class"
+      items-center
+      bg-primary-color
+    "
   >
-    <div class="container flex flex-wrap justify-between items-center mx-auto dark:text-slate-200 font-medium">
+    <div class="container flex flex-wrap justify-between items-center mx-auto font-medium text-secondary-content">
       <a
         href="/"
-        class="flex items-center"
-        :class="header_link_class"
+        class="flex items-center text-primary-content"
       >
         <img
           v-if="header_logo_url"
@@ -66,7 +66,7 @@
         </svg>
       </button>
       <div class="relative hidden lg:flex items-center ml-auto">
-        <nav class="text-sm leading-6 font-semibold text-slate-700 dark:text-slate-200">
+        <nav class="text-sm leading-6 font-semibold">
           <ul class="flex space-x-8">
             <li
               v-for="(item, index) in header_links"
@@ -74,8 +74,7 @@
             >
               <router-link
                 :to="item.link"
-                class="hover:text-sky-500 dark:hover:text-sky-400"
-                :class="header_link_class"
+                class="hover:text-primary-content text-primary-content"
               >
                 {{ item.label }}
               </router-link>
@@ -84,7 +83,7 @@
         </nav>
 
         <div class="flex items-center border-l border-slate-200 ml-6 pl-6 dark:border-slate-800">
-          <SwitchTheme />
+          <SwitchTheme class="text-primary-content" />
         </div>
       </div>
     </div>
@@ -95,7 +94,6 @@
 import SwitchTheme from '../SwitchTheme.vue'
 
 const {
-  header_class,
   header_link_class,
   header_links,
   header_logo_text,
diff --git a/src/components/SwitchTheme.vue b/src/components/SwitchTheme.vue
index 2a9f486..914bc43 100644
--- a/src/components/SwitchTheme.vue
+++ b/src/components/SwitchTheme.vue
@@ -1,10 +1,10 @@
 <template>
   <button
-    v-if="themeMode === themeModes.dark"
     type="button"
-    @click="themeMode = themeModes.light"
+    @click="toggleTheme"
   >
     <svg
+      v-if="themeMode === themeModes.dark"
       xmlns="http://www.w3.org/2000/svg"
       class="h-6 w-6"
       fill="none"
@@ -18,17 +18,11 @@
         d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
       />
     </svg>
-  </button>
 
-  <button
-    v-else
-    type="button"
-    @click="themeMode = themeModes.dark"
-  >
     <svg
+      v-else
       xmlns="http://www.w3.org/2000/svg"
-      class="h-6 w-6 text-slate-400 hover:text-primary-500 dark:hover:text-slate-300"
-      :class="header_link_class"
+      class="h-6 w-6"
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"
@@ -46,10 +40,6 @@
 <script setup>
 import { watch, ref } from 'vue'
 
-const {
-  header_link_class
-} = __APP_ENV__
-
 const themeModes = {
   dark: 'dark',
   light: 'light'
@@ -75,4 +65,12 @@ watch(
   { immediate: true }
 )
 
+const toggleTheme = () => {
+  if (themeMode.value === themeModes.dark) {
+    themeMode.value = themeModes.light
+  } else {
+    themeMode.value = themeModes.dark
+  }
+}
+
 </script>
\ No newline at end of file
diff --git a/src/components/TreeView.vue b/src/components/TreeView.vue
index affeb5d..f8b83b3 100644
--- a/src/components/TreeView.vue
+++ b/src/components/TreeView.vue
@@ -6,6 +6,7 @@
     <button-expand
       v-if="!taxonomy.leaf_node"
       v-model="isTreeVisible"
+      class="absolute -left-2.5"
     />
     <router-link 
       class="text-primary-500"
@@ -87,7 +88,7 @@ const loadDescendants = () => {
   li {
     position: relative;
     margin: 0;
-    padding: 0px 7px;
+    padding: 0px 6px;
     border-left:1px solid rgb(100,100,100);
   }
 
@@ -104,19 +105,12 @@ const loadDescendants = () => {
     border-bottom:1px solid rgb(100,100,100);
     content:"";
     display:inline-block;
-    left:-7px;
+    left:-6px;
   }
 
   li:last-child:before {
     border-left:1px solid rgb(100,100,100);   
   }
-
-  .button-expand {
-    position: absolute;
-    top: 2px;
-    left: -9px;
-  }
-
 }
 
 </style>
\ No newline at end of file
diff --git a/src/modules/otus/components/Citation/CitationRow.vue b/src/modules/otus/components/Citation/CitationRow.vue
index 05e742d..2228fc3 100644
--- a/src/modules/otus/components/Citation/CitationRow.vue
+++ b/src/modules/otus/components/Citation/CitationRow.vue
@@ -1,39 +1,20 @@
 <template>
   <li>
-    <ButtonExpand
-      v-if="false"
-      v-model="isExpanded"
-      class="mr-2"
-    />
-    <div>
-      <svg 
+    <div 
+      class="h-5 w-5 text-secondary-color opacity-60 mr-2 cursor-pointer"
+      @click="isExpanded = !isExpanded"
+    >
+      <IconArrowRight 
         v-if="!isExpanded"
-        xmlns="http://www.w3.org/2000/svg" 
-        class="h-6 w-6 text-primary-700 opacity-60 mr-2"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-        stroke-width="2"
-        @click="isExpanded = !isExpanded"
-      >
-        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
-      </svg>
-
-      <svg
+        class="h-5 w-5"
+      />
+      <IconArrowDown
         v-else
-        xmlns="http://www.w3.org/2000/svg" 
-        class="h-6 w-6 text-primary-700 opacity-60 mr-2" 
-        fill="none" 
-        viewBox="0 0 24 24" 
-        stroke="currentColor"
-        stroke-width="2"
-        @click="isExpanded = !isExpanded"
-      >
-        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
-      </svg>
+        class="h-5 w-5"
+      />
     </div>
  
-    <div class="pt-0.5">
+    <div>
       <div v-if="isExpanded">
         <span v-html="citation.source.label" />
         <span v-if="citation.pages">
diff --git a/src/modules/otus/components/Content/Content.vue b/src/modules/otus/components/Content/Content.vue
index 4b628a8..a4a512e 100644
--- a/src/modules/otus/components/Content/Content.vue
+++ b/src/modules/otus/components/Content/Content.vue
@@ -1,19 +1,12 @@
 <template>
   <VCard>
-    <VCardHeader>
-      <h1 class="text-md">
-        Content
-      </h1>
-    </VCardHeader>
-    <VCardContent class="text-sm">
-      <ContentTopic
-        v-for="(text, title) in contentList"
-        :key="title"
-        class="mb-6 last:mb-0"
-        :title="title"
-        :text-list="text"
-      />
-    </VCardContent>
+    <ContentTopic
+      v-for="(text, title) in contentList"
+      :key="title"
+      class="last:mb-0"
+      :title="title"
+      :text-list="text"
+    />
   </VCard>
 </template>
 
diff --git a/src/modules/otus/components/Content/ContentTopic.vue b/src/modules/otus/components/Content/ContentTopic.vue
index 2838c9f..2651d35 100644
--- a/src/modules/otus/components/Content/ContentTopic.vue
+++ b/src/modules/otus/components/Content/ContentTopic.vue
@@ -1,17 +1,16 @@
 <template>
-  <div>
-    <h2 class="text-sm font-medium flex">
-      <IconDocument class="h-4 w-4 mr-1" />
-      {{ title }}
-    </h2>
+  <VCardHeader class="border-t border-base-200 first:border-t-0">
+    {{ title }}
+  </VCardHeader>
+  <VCardContent>
     <ul 
       v-for="(text, index) in textList"
       :key="index"
-      class="pt-1 pl-5"
+      class="pt-1 text-sm "
     >
       <li v-html="text" />
     </ul>
-  </div>
+  </VCardContent>
 </template>
 
 <script setup>
diff --git a/src/modules/otus/components/Descendants.vue b/src/modules/otus/components/Descendants.vue
index 77a59fe..1b45231 100644
--- a/src/modules/otus/components/Descendants.vue
+++ b/src/modules/otus/components/Descendants.vue
@@ -6,7 +6,7 @@
       </h1>
     </VCardHeader>
     <VCardContent class="text-sm">
-      <ul class="tree">
+      <ul class="tree ml-2">
         <TreeView
           v-if="taxonomy && (taxonomy.nomenclatural_synonyms.length || taxonomy.descendants.length)"
           :taxonomy="taxonomy" 
diff --git a/src/modules/otus/components/TaxaInfo.vue b/src/modules/otus/components/TaxaInfo.vue
index ace3efd..0a99baa 100644
--- a/src/modules/otus/components/TaxaInfo.vue
+++ b/src/modules/otus/components/TaxaInfo.vue
@@ -1,12 +1,12 @@
 <template>
   <div :class="{ invisible: !taxon.id }">
-    <h2 class="text-1xl text-gray-700 capitalize dark:text-gray-400">
+    <h2 class="text-1xl capitalize">
       {{ taxon.rank || taxon.type }}
     </h2>
     <h1 class="text-xl dark:text-gray-100">
       <span v-html="taxonNameString" />
     </h1>
-    <h2 class="text-1xl text-gray-700 dark:text-gray-200">
+    <h2 class="text-1xl">
       <CommonNames :otu-id="props.otuId" />
     </h2>
   </div>
diff --git a/src/modules/otus/views/Index.vue b/src/modules/otus/views/Index.vue
index 3212b92..445cd26 100644
--- a/src/modules/otus/views/Index.vue
+++ b/src/modules/otus/views/Index.vue
@@ -2,11 +2,10 @@
   <div>
     <div 
       class="
-      bg-white
-      dark:bg-slate-900
-      dark:text-slate-400
-      dark:border-b-slate-800
-        border-b 
+        bg-base-0
+
+        border-b
+        border-base-200
         pl-4 
         pr-4"
     >
diff --git a/src/modules/otus/views/Overview.vue b/src/modules/otus/views/Overview.vue
index d76a59f..c5aa368 100644
--- a/src/modules/otus/views/Overview.vue
+++ b/src/modules/otus/views/Overview.vue
@@ -56,8 +56,8 @@ const componentsLayout = {
   ],
   right: [
     { component: OtuMap },
-    { component: OtuContent },
     { component: OtuDescendants },
+    { component: OtuContent }
   ]
 }
 
diff --git a/src/utils/globalVars.js b/src/utils/globalVars.js
new file mode 100644
index 0000000..cff0121
--- /dev/null
+++ b/src/utils/globalVars.js
@@ -0,0 +1,2 @@
+global.__basedir = process.env.PWD
+global.__tailwindCSSTaxonPagesConfigPath = process.env.PWD + '/tailwind.config.js'
diff --git a/tailwind.config.js b/tailwind.config.js
index f834c20..efce8d9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,11 @@
-const colors = require('tailwindcss/colors')
+function withOpacity(variableName) {
+  return ({ opacityValue }) => {
+    if (opacityValue !== undefined) {
+      return `rgba(var(${variableName}), ${opacityValue})`
+    }
+    return `rgb(var(${variableName}))`
+  }
+}
 
 module.exports = {
   content: [
@@ -16,27 +23,39 @@ module.exports = {
         main: ['-apple-system','BlinkMacSystemFont','San Francisco','Segoe UI','Roboto','Helvetica Neue','sans-serif']
       },
       colors: {
-        'primary': colors.sky,
-        'secondary-2': colors.cyan,
-        'secondary-3': colors.indigo,
-        'secondary-4': colors.green,
-        'secondary-5': colors.lime
+        base: {
+          0: withOpacity('--color-base-0'),
+          100: withOpacity('--color-base-100'),
+          200: withOpacity('--color-base-200'),
+          300: withOpacity('--color-base-300'),
+          content: withOpacity('--color-base-content')
+        },
+
+        primary: {
+          color: withOpacity('--color-primary'),
+          content: withOpacity('--color-secondary-content')
+        },
+
+        secondary: {
+          color: withOpacity('--color-secondary'),
+          content: withOpacity('--color-secondary-content')
+        }
       },
       typography: ({ theme }) => ({
         DEFAULT: {
           css: {
-            '--tw-prose-links': theme('colors.primary[500]'),
+            '--tw-prose-links': theme('colors.secondary.color'),
           },
         },
         invert: {
           css: {
-            '--tw-prose-links': theme('colors.primary[500]'),
+            '--tw-prose-links': theme('colors.secondary.color'),
           }
         }
       }),
 
       screens: {
-        'print': {'raw': 'print'}
+        'print': { 'raw': 'print' }
       }
     }
   },
diff --git a/vite.config.js b/vite.config.js
index 51b4999..be7d4d5 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,8 +5,7 @@ import htmlPlugin from './src/plugins/htmlPlugin.js'
 import Vue from '@vitejs/plugin-vue'
 import Markdown from 'vite-plugin-md'
 import Pages from 'vite-plugin-pages'
-
-global.__basedir = process.env.PWD
+import './src/utils/globalVars'
 
 export default () => {
   const configuration = loadConfiguration(__dirname)