diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index e122d5d..814a04a 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -2,11 +2,11 @@
 
 <template>
   <footer class="footer w-full text-center py-4">
-    <p class="text-gray-900 dark:text-white text-sm flex justify-center items-center gap-2">
+    <p class="text-stone-800 dark:text-white text-sm flex justify-center items-center gap-2">
       <a
         href="https://heristop.github.io/about"
         target="_blank"
-        class="text-gray-700 dark:text-gray-400 hover:text-gray-400 dark:hover:text-gray-500 transition-colors duration-300 font-bold"
+        class="text-stone-700 dark:text-stone-400 hover:text-stone-400 dark:hover:text-stone-500 transition-colors duration-300 font-bold"
       >@heristop</a>
     </p>
   </footer>
diff --git a/app/components/ConfigDrawer.vue b/app/components/ConfigDrawer.vue
index 20c7063..c14ff81 100644
--- a/app/components/ConfigDrawer.vue
+++ b/app/components/ConfigDrawer.vue
@@ -39,11 +39,11 @@ onMounted(() => {
   <transition name="slide-fade">
     <div
       v-if="isPositioned"
-      class="fixed top-0 right-0 bg-opacity-80 bg-neutral-800 text-white rounded-l-md shadow-lg space-y-4 text-sm border-white border-opacity-20 border-2 z-50"
+      class="fixed top-0 right-0 bg-opacity-80 bg-stone-800 text-white rounded-l-md shadow-lg space-y-4 text-sm border-white border-opacity-20 border-2 z-50"
       :style="{ width: drawerMinimized ? '40px' : `${size.width}px`, height: drawerMinimized ? 'auto' : '100vh' }"
     >
       <div
-        class="header flex justify-between items-center rounded-l-md bg-neutral-800 px-2 py-1"
+        class="header flex justify-between items-center rounded-l-md bg-stone-800 px-2 py-1"
       >
         <h2
           v-if="!drawerMinimized"
@@ -86,16 +86,20 @@ onMounted(() => {
           <div class="flex items-center justify-between space-x-2 mb-3">
             <TButton
               :is-active="store.display === 'name'"
+              size="sm"
+              class="w-full"
               @click="setDisplay('name')"
             >
-              name
+              Name
             </TButton>
 
             <TButton
               :is-active="store.display === 'key'"
+              size="sm"
+              class="w-full"
               @click="setDisplay('key')"
             >
-              key
+              Key
             </TButton>
           </div>
         </div>
@@ -126,11 +130,12 @@ onMounted(() => {
           <div class="flex items-center justify-between space-x-2 mb-3">
             <TButton
               :is-active="false"
-              class="border-red-600 bg-red-700 hover:bg-red-600"
+              size="sm"
+              class="w-full"
               aria-label="reset"
               @click="resetConfiguration"
             >
-              reset
+              Reset
             </TButton>
           </div>
         </div>
diff --git a/app/components/StatusManager.vue b/app/components/StatusManager.vue
index 2fbc64c..ed87ec4 100644
--- a/app/components/StatusManager.vue
+++ b/app/components/StatusManager.vue
@@ -67,18 +67,18 @@ function getNextColor() {
   <div
     v-for="(status, index) in statuses"
     :key="index"
-    class="flex items-center space-x-2 space-y-2 align-middle status-item text-neutral-800"
+    class="flex items-center space-x-2 space-y-2 align-middle status-item text-stone-800"
     :draggable="!inputFocused"
     @dragstart="startStatusDrag($event, index)"
     @dragover.prevent
     @drop="dropStatus($event, index)"
   >
-    <div class="text-neutral-400 w-20 text-xs">
+    <div class="text-stone-400 w-20 text-xs">
       {{ index + 1 }}.
     </div>
     <input
       v-model="status.name"
-      class="p-1 font-semibold rounded-sm w-full placeholder:text-neutral-300 text-xs"
+      class="p-1 font-semibold rounded-sm w-full placeholder:text-stone-300 text-xs"
       placeholder="status"
       @focus="disableStatusDrag"
       @blur="enableStatusDrag"
@@ -86,27 +86,27 @@ function getNextColor() {
     <input
       v-model="status.color"
       :style="{ backgroundColor: isValidColor(status.color) ? status.color : '#FFFFFF', color: isValidColor(status.color) ? getTextColor(status.color) : '#000000' }"
-      class="p-1 font-semibold rounded-sm w-full placeholder:text-neutral-300 text-xs"
+      class="p-1 font-semibold rounded-sm w-full placeholder:text-stone-300 text-xs"
       placeholder="color"
       @focus="disableStatusDrag"
       @blur="enableStatusDrag"
     >
     <button
       :disabled="statuses.length <= 1"
-      class="text-neutral-200 font-semibold w-[200px] disabled:text-neutral-500 text-xs"
+      class="text-stone-200 font-semibold w-[200px] disabled:text-stone-500 text-xs"
       @click="removeStatus(index)"
     >
       remove
     </button>
   </div>
 
-  <div class="flex items-center space-x-2 space-y-2 align-middle status-item text-neutral-600 mb-6">
-    <div class="text-neutral-400 w-20 text-sm">
+  <div class="flex items-center space-x-2 space-y-2 align-middle status-item text-stone-600 mb-6">
+    <div class="text-stone-400 w-20 text-sm">
       {{ statuses.length + 1 }}.
     </div>
     <input
       v-model="newStatus.name"
-      class="p-1 font-semibold rounded-sm w-full placeholder:text-neutral-400 text-xs"
+      class="p-1 font-semibold rounded-sm w-full placeholder:text-stone-400 text-xs"
       placeholder="status"
       @focus="disableStatusDrag"
       @blur="enableStatusDrag"
@@ -114,14 +114,14 @@ function getNextColor() {
     <input
       v-model="newStatus.color"
       :style="{ backgroundColor: isValidColor(newStatus.color) ? newStatus.color : '#FFFFFF', color: isValidColor(newStatus.color) ? getTextColor(newStatus.color) : '#000000' }"
-      class="p-1 font-semibold rounded-sm w-full placeholder:text-neutral-400 text-xs"
+      class="p-1 font-semibold rounded-sm w-full placeholder:text-stone-400 text-xs"
       :placeholder="getNextColor()"
       @focus="disableStatusDrag"
       @blur="enableStatusDrag"
     >
     <button
       :disabled="!newStatus.name || !newStatus.color"
-      class="text-neutral-200 font-semibold w-[200px] disabled:text-neutral-500 text-xs"
+      class="text-stone-200 font-semibold w-[200px] disabled:text-stone-500 text-xs"
       @click="addNewStatus"
     >
       add
diff --git a/app/components/UploadDownload.vue b/app/components/UploadDownload.vue
index 318a128..c0046eb 100644
--- a/app/components/UploadDownload.vue
+++ b/app/components/UploadDownload.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import TButton from './ui/TButton.vue'
 import { useConfig } from '~/composables/config'
 import { useStore } from '~/composables/store'
 
@@ -16,19 +17,21 @@ const { fileInput, loadFromFile, saveToFile } = useConfig()
     @change="loadFromFile"
   >
   <div class="flex items-center justify-between space-x-2 mb-3">
-    <button
-      class="flex-1 font-semibold border-2 border-neutral-600 text-white px-2 py-1 rounded-md transition duration-300 bg-neutral-900 hover:bg-neutral-600"
+    <TButton
+      size="sm"
+      class="w-full py-1"
       @click="($refs.fileInput as HTMLInputElement).click()"
     >
-      upload
-    </button>
+      Upload
+    </TButton>
 
-    <button
-      class="flex-1 font-semibold border-2 border-neutral-600 text-white px-2 py-1 disabled:cursor-not-allowed rounded-md transition duration-300 bg-neutral-900 hover:bg-neutral-600"
+    <TButton
+      size="sm"
+      class="w-full py-1"
       :disabled="!store.configLoaded"
       @click="saveToFile"
     >
-      save
-    </button>
+      Save
+    </TButton>
   </div>
 </template>
diff --git a/app/components/ViewportSettings.vue b/app/components/ViewportSettings.vue
index 886e683..92d3a41 100644
--- a/app/components/ViewportSettings.vue
+++ b/app/components/ViewportSettings.vue
@@ -42,10 +42,12 @@ const captureTreeMap = () => {
     <TButton
       :is-active="false"
       :disabled="!store.configLoaded"
+      size="sm"
+      class="w-full"
       @click="captureTreeMap"
     >
       <svg
-        class="w-5 h-5 text-white"
+        class="w-4 h-4 mr-2"
         aria-hidden="true"
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
@@ -64,13 +66,13 @@ const captureTreeMap = () => {
           d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
         />
       </svg>
-      <span class="text-sm">capture</span>
+      Capture
     </TButton>
   </div>
 
   <div class="flex items-center space-x-4 mb-4 px-2">
     <div class="flex flex-col items-start space-y-2">
-      <span class="text-xs font-bold">Width</span>
+      <span class="text-xs font-bold text-stone-200">Width</span>
       <input
         v-model="minWidth"
         type="range"
@@ -80,7 +82,7 @@ const captureTreeMap = () => {
       >
     </div>
     <div class="flex flex-col items-start space-y-2">
-      <span class="text-xs font-bold">Height</span>
+      <span class="text-xs font-bold text-stone-200">Height</span>
       <input
         v-model="minHeight"
         type="range"
diff --git a/app/components/ui/TButton.vue b/app/components/ui/TButton.vue
index d235db9..f2acbcc 100644
--- a/app/components/ui/TButton.vue
+++ b/app/components/ui/TButton.vue
@@ -1,6 +1,10 @@
 <template>
   <button
-    :class="[isActive ? 'bg-neutral-600' : 'bg-neutral-900', 'flex w-full shadow-md items-center justify-center font-semibold border-2 border-neutral-600 text-white px-2 py-1 rounded-md transition duration-300 hover:bg-neutral-600']"
+    :class="[
+      isActive ? 'text-stone-600 bg-stone-300 dark:bg-stone-300' : 'bg-stone-400 dark:bg-stone-100 text-white',
+      size === 'sm' ? 'px-2 py-[0.4rem] text-xs' : size === 'md' ? 'px-4 py-[0.4rem] text-sm' : 'px-6 py-3 text-base',
+      'flex text-sm shadow items-center justify-center font-semibold border-2 border-opacity-45 hover:border-opacity-25 border-stone-300 hover:text-stone-600 dark:text-stone-600 rounded-md transition duration-300 hover:border-stone-400 hover:bg-stone-300 dark:hover:bg-stone-300',
+    ]"
     @click="$emit('click')"
   >
     <slot />
@@ -10,8 +14,10 @@
 <script setup lang="ts">
 withDefaults(defineProps<{
   isActive: boolean
+  size: 'sm' | 'md' | 'lg'
 }>(), {
   isActive: false,
+  size: 'md',
 })
 
 defineEmits(['click'])
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 325f52a..9f05244 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -36,7 +36,7 @@ onUnmounted(() => {
 <template>
   <div
     ref="container"
-    :class="['w-full', useFullHeight ? 'h-full' : 'h-screen', 'bg-neutral-600', 'text-white']"
+    :class="['w-full', useFullHeight ? 'h-full' : 'h-screen', 'bg-stone-600', 'text-white']"
   >
     <slot />
   </div>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 557c1f5..42307f3 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -65,6 +65,14 @@ const toggleDarkMode = () => {
   }
 }
 
+const openGitHub = () => {
+  window.open('https://github.com/heristop/tree-pulse', '_blank')
+}
+
+const openStackBlitz = () => {
+  window.open('https://stackblitz.com/~/github.com/heristop/tree-pulse', '_blank')
+}
+
 const observeSections = () => {
   const sections = document.querySelectorAll('.section')
   const observer = new IntersectionObserver(
@@ -86,6 +94,13 @@ const observeSections = () => {
   })
 }
 
+const scrollToSection = (sectionId: string) => {
+  const section = document.getElementById(sectionId)
+  if (section) {
+    section.scrollIntoView({ behavior: 'smooth' })
+  }
+}
+
 onMounted(() => {
   if (store.darkMode) {
     document.documentElement.classList.add('dark')
@@ -105,10 +120,10 @@ onMounted(() => {
 <template>
   <div
     :class="{ dark: darkMode }"
-    class="relative w-full min-h-screen overflow-auto bg-neutral-50 dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50"
+    class="relative w-full min-h-screen overflow-auto bg-stone-50 dark:bg-stone-900 text-stone-900 dark:text-stone-50"
   >
     <button
-      class="fixed top-4 right-4 p-2 bg-neutral-200 dark:bg-neutral-700 text-neutral-900 dark:text-neutral-50 rounded z-50"
+      class="fixed top-4 right-4 p-2 bg-stone-200 dark:bg-stone-700 text-stone-900 dark:text-stone-50 rounded z-50"
       aria-label="dark mode"
       @click="toggleDarkMode"
     >
@@ -163,7 +178,7 @@ onMounted(() => {
       <div class="bg-lime-300 dark:bg-lime-700 rounded-lg opacity-30" />
     </div>
 
-    <div class="absolute h-full inset-0 z-10 bg-neutral-300 dark:bg-neutral-900 opacity-80 dark:opacity-90" />
+    <div class="absolute h-full inset-0 z-10 bg-stone-300 dark:bg-stone-800 opacity-80 dark:opacity-90" />
 
     <div
       v-if="!isLoading"
@@ -174,21 +189,70 @@ onMounted(() => {
         appear
       >
         <section class="text-center space-y-6">
-          <h1 class="text-4xl font-semibold drop-shadow-lg bg-clip-text text-transparent bg-gradient-to-r from-red-400 via-blue-400 to-green-500 dark:from-red-300 dark:via-blue-300 dark:to-green-300">
+          <h1 class="text-4xl font-semibold drop-shadow-lg bg-clip-text text-transparent bg-gradient-to-r from-[#DD5E89] to-[#F7BB97]">
             Welcome to TreePulse!
           </h1>
 
-          <h2 class="text-lg text-neutral-600 dark:text-neutral-300 max-w-3xl mx-auto">
+          <div class="text-lg text-stone-600 dark:text-stone-300 max-w-3xl mx-auto">
             It looks like you haven't loaded any configuration yet. Click one of the buttons below to load sample data and see TreePulse in action!
-          </h2>
+          </div>
+
+          <div class="flex justify-center space-x-4 p-6">
+            <TButton
+              aria-label="View on GitHub"
+              :is-active="false"
+              @click="openGitHub"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                aria-hidden="true"
+                role="img"
+                class="icon flex-shrink-0 h-5 w-5 mr-2"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+                />
+              </svg>
+              <span>View on GitHub</span>
+            </TButton>
+
+            <TButton
+              aria-label="Edit on StackBlitz"
+              :is-active="false"
+              @click="openStackBlitz"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                aria-hidden="true"
+                role="img"
+                class="icon flex-shrink-0 h-5 w-5 mr-2"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M12 0L1.75 6v12L12 24l10.25-6V6zm-1.775 18l1.08-4.657l-2.428-2.397L13.79 6l-1.082 4.665l2.414 2.384z"
+                />
+              </svg>
+              <span>Edit on StackBlitz</span>
+            </TButton>
+          </div>
 
           <div class="mt-8 animate-bounce">
             <svg
-              class="w-6 h-6 mx-auto"
+              class="w-6 h-6 mx-auto cursor-pointer text-stone-600 dark:text-stone-400"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
+              @click="scrollToSection('section-to-fade')"
             >
               <path
                 stroke-linecap="round"
@@ -212,29 +276,28 @@ onMounted(() => {
           class="min-h-screen section"
         >
           <div class="relative z-20 flex flex-col justify-center items-center min-h-60 space-y-8 p-6 max-w-6xl mx-auto">
-            <h3 class="text-md font-bold">
+            <h2 class="text-lg font-bold drop-shadow-lg bg-clip-text text-transparent bg-gradient-to-r from-stone-700 to-stone-500 dark:from-stone-400 dark:to-stone-200">
               Load Sample Data
-            </h3>
+            </h2>
 
             <div class="flex flex-col w-full md:w-fit md:flex-row md:space-x-4 text-center space-y-6 md:space-y-0">
               <TButton
-                class="bg-neutral-900 dark:bg-neutral-200 px-6 py-2 min-w-fit hover:bg-neutral-800 dark:hover:bg-neutral-300 text-sm dark:text-black"
                 aria-label="Load Project Migration Data"
                 :is-active="false"
                 @click="loadConfigFromApi('project-migration')"
               >
                 Project Migration
               </TButton>
+
               <TButton
-                class="bg-neutral-900 dark:bg-neutral-200 px-6 py-2 min-w-fit hover:bg-neutral-800 dark:hover:bg-neutral-300 text-sm dark:text-black"
                 aria-label="Load Bug Tracking Data"
                 :is-active="false"
                 @click="loadConfigFromApi('bug-tracking')"
               >
                 Bug Tracking
               </TButton>
+
               <TButton
-                class="bg-neutral-900 dark:bg-neutral-200 px-6 py-2 min-w-fit hover:bg-neutral-800 dark:hover:bg-neutral-300 text-sm dark:text-black"
                 aria-label="Load Recruitment Data"
                 :is-active="false"
                 @click="loadConfigFromApi('recruitment')"
@@ -245,9 +308,9 @@ onMounted(() => {
           </div>
 
           <div class="relative z-20 flex flex-col justify-center items-center min-h-60 space-y-8 p-6 max-w-6xl mx-auto">
-            <h3 class="text-md font-bold">
+            <h2 class="text-lg font-bold drop-shadow-lg bg-clip-text text-transparent bg-gradient-to-r from-stone-700 to-stone-500 dark:from-stone-400 dark:to-stone-200">
               Load Configuration
-            </h3>
+            </h2>
 
             <input
               ref="fileInput"
@@ -259,11 +322,28 @@ onMounted(() => {
 
             <div class="flex flex-col w-full md:w-fit md:flex-row md:space-x-4 space-y-6 md:space-y-0">
               <TButton
-                class="bg-neutral-900 dark:bg-neutral-200 px-6 py-2 min-w-fit hover:bg-neutral-800 dark:hover:bg-neutral-300 text-sm dark:text-black"
                 aria-label="Upload File"
                 :is-active="false"
                 @click="($refs.fileInput as HTMLInputElement).click()"
               >
+                <svg
+                  class="w-5 h-5 mx-auto cursor-pointer dark:text-stone-600 text-stone-100 mr-2"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 5v9m-5 0H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2M8 9l4-5 4 5m1 8h.01"
+                  />
+                </svg>
+
                 Upload File
               </TButton>
             </div>
@@ -272,10 +352,9 @@ onMounted(() => {
               <input
                 v-model="url"
                 placeholder="https://"
-                class="bg-neutral-200 text-neutral-900 dark:bg-neutral-700 dark:text-white px-4 py-2 rounded-md text-sm w-full md:w-2/3"
+                class="bg-stone-200 text-stone-900 dark:bg-stone-700 dark:text-white px-4 py-2 rounded-md text-sm w-full md:w-2/3"
               >
               <TButton
-                class="bg-neutral-900 dark:bg-neutral-200 px-6 py-2 w-full md:w-1/3 hover:bg-neutral-800 dark:hover:bg-neutral-300 text-sm dark:text-black disabled:cursor-not-allowed"
                 aria-label="Load Configuration from URL"
                 :is-active="false"
                 :disabled="!url"
@@ -287,17 +366,26 @@ onMounted(() => {
           </div>
 
           <div class="relative z-20 flex flex-col justify-center items-center min-h-60 space-y-8 p-6 max-w-6xl mx-auto">
-            <h3 class="text-md font-bold">
+            <h2 class="text-lg font-bold drop-shadow-lg bg-clip-text text-transparent bg-gradient-to-r from-stone-700 to-stone-500 dark:from-stone-400 dark:to-stone-200">
               Load Custom Configuration
-            </h3>
+            </h2>
+
+            <div class="bg-stone-200 text-stone-900 dark:bg-stone-700 dark:text-white p-4 rounded-md text-sm max-w-3xl">
+              <label
+                for="sample-config"
+                class="block text-sm font-medium text-stone-900 dark:text-stone-50"
+              >
+                Sample Configuration
+              </label>
 
-            <div class="bg-neutral-200 text-neutral-900 dark:bg-neutral-700 dark:text-white p-4 rounded-md text-sm max-w-3xl">
               <textarea
+                id="sample-config"
                 v-model="sample"
-                class="w-full h-60 bg-neutral-200 text-sm p-2 dark:bg-neutral-700 dark:text-white"
+                class="w-full h-60 text-stone-500 bg-stone-200 text-sm p-2 dark:bg-stone-700 dark:text-stone-300 mt-1"
+                aria-label="Sample Configuration"
               />
 
-              <p class="text-neutral-600 mt-4 dark:text-neutral-300">
+              <p class="text-stone-600 mt-4 dark:text-stone-300">
                 <strong>key:</strong> Unique identifier for the section or task<br>
                 <strong>name:</strong> Name of the section or task<br>
                 <strong>status:</strong> Current status of the section or task<br>
@@ -305,7 +393,7 @@ onMounted(() => {
               </p>
 
               <TButton
-                class="bg-neutral-900 dark:bg-neutral-200 px-6 py-2 min-w-fit hover:bg-neutral-800 dark:hover:bg-neutral-300 text-sm mt-4 dark:text-black"
+                class="w-full mt-4"
                 aria-label="Load Sample Data"
                 :is-active="false"
                 @click="loadConfigFromUserInput"