diff --git a/docs/app/components/AllComponents.vue b/docs/app/components/AllComponents.vue
index 7f8985ce..ce8a6cc6 100644
--- a/docs/app/components/AllComponents.vue
+++ b/docs/app/components/AllComponents.vue
@@ -1,5 +1,25 @@
 <template>
   <div class="flex gap-4 flex-wrap mx-4">
+    <ShowComponent is-new>
+      <template #component>
+        <div class="flex w-48 relative">
+          <div class="flex gap-4 flex-wrap mx-4 w-full h-24">
+            <PUCompare with-dark-mode>
+              <PUButton
+                flavor="normal"
+                shape="rounded"
+              >
+                Click me!
+              </PUButton>
+            </PUCompare>
+          </div>
+        </div>
+      </template>
+      <template #component-name>
+        <a href="/docs/components/pu-compare">PUCompare</a>
+      </template>
+    </ShowComponent>
+
     <ShowComponent is-new>
       <template #component>
         <div class="flex w-48 relative">
diff --git a/docs/app/components/AsideMenu.vue b/docs/app/components/AsideMenu.vue
index 25af22b8..d388db62 100644
--- a/docs/app/components/AsideMenu.vue
+++ b/docs/app/components/AsideMenu.vue
@@ -27,10 +27,24 @@ const items: Items[] = [
     links: [
       { name: 'PUAccordion', link: '/docs/components/pu-accordion' },
       { name: 'PUAvatar', link: '/docs/components/pu-avatar', new: true },
+      { name: 'PUAudio', link: '/docs/components/pu-audio', new: true },
+      // { name: 'PUChip', link: '/docs/components/pu-chip' },
+      // { name: 'PUCollapsible', link: '/docs/components/pu-collapsible' },
+      // { name: 'PUDataTable', link: '/docs/components/pu-data-table', new: true },
+      // { name: 'PUDropdown', link: '/docs/components/pu-dropdown' },
+      // { name: 'PUInputNumber', link: '/docs/components/pu-input-number' },
+      // { name: 'PUList', link: '/docs/components/pu-list' },
+      // { name: 'PUMenu', link: '/docs/components/pu-menu' },
+      // { name: 'PUPagination', link: '/docs/components/pu-pagination' },
+      // { name: 'PURating', link: '/docs/components/pu-rating' },
+      // { name: 'PUSearch', link: '/docs/components/pu-search' },
+      // { name: 'PUSelectGroup', link: '/docs/components/pu-select-group' },
+
       { name: 'PUBadge', link: '/docs/components/pu-badge' },
       { name: 'PUButtonIcon', link: '/docs/components/pu-button-icon' },
       { name: 'PUButton', link: '/docs/components/pu-button' },
       { name: 'PUCheckbox', link: '/docs/components/pu-checkbox' },
+      { name: 'PUCompare', link: '/docs/components/pu-compare', new: true },
       { name: 'PUDatePicker', link: '/docs/components/pu-datepicker', new: true },
       { name: 'PUInput', link: '/docs/components/pu-input' },
       { name: 'PUModal', link: '/docs/components/pu-modal' },
diff --git a/docs/app/components/CodeBlock.vue b/docs/app/components/CodeBlock.vue
index 306f62bd..decf414c 100644
--- a/docs/app/components/CodeBlock.vue
+++ b/docs/app/components/CodeBlock.vue
@@ -15,12 +15,23 @@
         {{ tab.label }}
       </PUButton>
     </div>
-    <div class="p-6 bg-gradient-to-b from-white to-gray-50 rounded-xl shadow-lg h-auto">
+    <div class="p-6  rounded-xl shadow-lg h-auto">
       <div
         v-if="activeTab === 'Preview'"
-        class="w-full h-full flex justify-center items-center gap-2"
+        class="w-full h-full flex justify-center flex-wrap items-center gap-2 p-4 "
       >
         <slot name="preview" />
+        <div
+          v-if="compare"
+          class="flex gap-4 flex-wrap justify-between mx-4 min-h-[200px] w-full lg:w-1/2"
+        >
+          <PUCompare
+            with-dark-mode
+            with-icon
+          >
+            <slot name="preview" />
+          </PUCompare>
+        </div>
       </div>
       <div v-else>
         <CodeBox
@@ -37,6 +48,14 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
+defineProps(
+  {
+    compare: {
+      type: Boolean,
+      default: true,
+    },
+  },
+)
 const tabs = [
   { label: 'Preview' },
   { label: 'Code' },
diff --git a/docs/app/components/HeaderUi.vue b/docs/app/components/HeaderUi.vue
index dedb57b3..e7d76181 100644
--- a/docs/app/components/HeaderUi.vue
+++ b/docs/app/components/HeaderUi.vue
@@ -18,8 +18,18 @@
         id="nav-mobile"
         class="right hide-on-med-and-down flex gap-4 mt-4"
       >
-        <li><a href="/docs"><PUButton flavor="outlined">Docs</PUButton></a></li>
-        <li><a href="https://github.com/paper-kit/nuxt"><PUButton flavor="outlined">Github</PUButton></a></li>
+        <li>
+          <a href="/docs"><PUButton
+            flavor="outlined"
+            icon-right="file-alt"
+          >docs</PUButton></a>
+        </li>
+        <li>
+          <a href="https://github.com/paper-kit/nuxt"><PUButton
+            flavor="outlined"
+            icon-right="github-alt"
+          >github</PUButton></a>
+        </li>
       </ul>
     </div>
   </div>
diff --git a/docs/app/components/ShowComponent.vue b/docs/app/components/ShowComponent.vue
index dc3ac08d..48baecca 100644
--- a/docs/app/components/ShowComponent.vue
+++ b/docs/app/components/ShowComponent.vue
@@ -1,15 +1,17 @@
 <template>
-  <div class="border-2 border-primary-light-500 rounded-lg w-72 h-48 hover:scale-110 transition-all duration-300 relative">
-    <div class="absolute top-2 right-2">
+  <div
+    class="border-2 border-primary-light-500 rounded-lg w-72 h-48 hover:scale-110 transition-all duration-300 relative"
+  >
+    <div class="absolute top-2 right-2 cursor-pointer dark:text-primary-light-50">
       <PUIcon
         v-if="isNew"
-        name="star"
+        name="star-solid"
       />
     </div>
-    <div class="component-example p-4 flex justify-center items-center h-36 ">
+    <div class="component-example p-4 flex justify-center items-center h-36 dark:bg-primary-light-500">
       <slot name="component" />
     </div>
-    <div class="component-name text-lg font-bold flex h-12 justify-center items-center w-full border-t-2 border-primary-light-500">
+    <div class="component-name text-lg font-bold flex h-12 gap-4 justify-center items-center w-full border-t-2 border-primary-light-500">
       <slot name="component-name" />
     </div>
   </div>
diff --git a/docs/app/components/paper/ShowAccordion.vue b/docs/app/components/paper/ShowAccordion.vue
index 0eb908a1..e4868155 100644
--- a/docs/app/components/paper/ShowAccordion.vue
+++ b/docs/app/components/paper/ShowAccordion.vue
@@ -20,7 +20,7 @@
         <div class="w-72">
           <PUAccordion :items="demoItems">
             <template #content>
-              <div class="p-4 bg-gray-50 rounded">
+              <div class="p-4 bg-gray-50 rounded dark:text-primary-light-500">
                 Custom content area with additional styling
               </div>
             </template>
@@ -39,7 +39,7 @@
             class="w-full"
           >
             <template #header="{ item, isOpen }">
-              <h3 :class="{ 'text-[#E12B56]': isOpen, 'text-gray-800': !isOpen }">
+              <h3 :class="{ 'text-[#E12B56]': isOpen, 'text-gray-800 dark:text-white': !isOpen }">
                 {{ item.title }}
               </h3>
             </template>
diff --git a/docs/app/components/paper/ShowCompare.vue b/docs/app/components/paper/ShowCompare.vue
new file mode 100644
index 00000000..12f013ab
--- /dev/null
+++ b/docs/app/components/paper/ShowCompare.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="compare-demo">
+    <CodeBlock
+      v-if="type === 'default'"
+      :compare="false"
+    >
+      <template #preview>
+        <PUCompare
+          class="h-36"
+          :with-dark-mode="false"
+        >
+          <template #left>
+            Before
+          </template>
+          <template #right>
+            After
+          </template>
+        </PUCompare>
+      </template>
+      <template #code>
+        <slot name="code" />
+      </template>
+    </CodeBlock>
+
+    <CodeBlock
+      v-if="type === 'dark-mode'"
+      :compare="false"
+    >
+      <template #preview>
+        <PUCompare
+          with-dark-mode
+          class="h-36"
+        >
+          <span class="text-xl text-primary-light-500 dark:text-white">
+            Light/Dark Comparison
+          </span>
+        </PUCompare>
+      </template>
+      <template #code>
+        <slot name="code" />
+      </template>
+    </CodeBlock>
+
+    <CodeBlock
+      v-if="type === 'with-icon'"
+      :compare="false"
+    >
+      <template #preview>
+        <PUCompare
+          with-icon
+          class="h-36"
+          with-dark-mode
+        >
+          <span class="text-xl text-primary-light-500 dark:text-white mt-10">
+            Light/Dark Comparison
+          </span>
+        </PUCompare>
+      </template>
+      <template #code>
+        <slot name="code" />
+      </template>
+    </CodeBlock>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  type: 'default' | 'dark-mode' | 'with-icon'
+}>()
+</script>
diff --git a/docs/app/components/paper/ShowDatepicker.vue b/docs/app/components/paper/ShowDatepicker.vue
index 41918f5d..f84eb068 100644
--- a/docs/app/components/paper/ShowDatepicker.vue
+++ b/docs/app/components/paper/ShowDatepicker.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="datepicker-demo">
-    <CodeBlock v-if="type === 'default'">
+    <CodeBlock
+      v-if="type === 'default'"
+    >
       <template #preview>
         <PUDatePicker v-model="selectedDate" />
       </template>
@@ -9,7 +11,9 @@
       </template>
     </CodeBlock>
 
-    <CodeBlock v-if="type === 'always-open'">
+    <CodeBlock
+      v-if="type === 'always-open'"
+    >
       <template #preview>
         <PUDatePicker
           v-model="selectedDate"
@@ -21,7 +25,10 @@
       </template>
     </CodeBlock>
 
-    <CodeBlock v-if="type === 'disabled-dates'">
+    <CodeBlock
+      v-if="type === 'disabled-dates'"
+      :compare="false"
+    >
       <template #preview>
         <PUDatePicker
           v-model="selectedDate"
@@ -33,7 +40,10 @@
       </template>
     </CodeBlock>
 
-    <CodeBlock v-if="type === 'disabled-range'">
+    <CodeBlock
+      v-if="type === 'disabled-range'"
+      :compare="false"
+    >
       <template #preview>
         <PUDatePicker
           v-model="selectedDate"
diff --git a/docs/app/components/paper/ShowInput.vue b/docs/app/components/paper/ShowInput.vue
index 919ef7a8..5ff710ac 100644
--- a/docs/app/components/paper/ShowInput.vue
+++ b/docs/app/components/paper/ShowInput.vue
@@ -17,7 +17,7 @@
         <PUInput
           v-model="searchValue"
           icon-left="search"
-          icon-right="cancel"
+          icon-right="close-x-exit"
           placeholder="Search..."
         />
       </template>
diff --git a/docs/app/components/paper/ShowModal.vue b/docs/app/components/paper/ShowModal.vue
index 238ab2de..9a8c826d 100644
--- a/docs/app/components/paper/ShowModal.vue
+++ b/docs/app/components/paper/ShowModal.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="modal-demo">
-    <CodeBlock v-if="type === 'default'">
+    <CodeBlock
+      v-if="type === 'default'"
+      :compare="false"
+    >
       <template #preview>
         <PUButton @click="show">
           show
@@ -27,7 +30,10 @@
         <slot name="code" />
       </template>
     </CodeBlock>
-    <CodeBlock v-else>
+    <CodeBlock
+      v-else
+      :compare="false"
+    >
       <template #preview>
         <PUButton @click="show">
           show
diff --git a/docs/app/components/paper/ShowSelect.vue b/docs/app/components/paper/ShowSelect.vue
index b9e84a37..ab81a1f8 100644
--- a/docs/app/components/paper/ShowSelect.vue
+++ b/docs/app/components/paper/ShowSelect.vue
@@ -27,7 +27,7 @@
 
     <CodeBlock v-if="type === 'sizes'">
       <template #preview>
-        <div class="flex gap-2">
+        <div class="flex gap-2 w-1/2">
           <PUSelect
             v-model="smallValue"
             size="small"
@@ -59,7 +59,7 @@
     </CodeBlock>
     <CodeBlock v-if="type === 'with-label'">
       <template #preview>
-        <div class="flex flex-col">
+        <div class="flex flex-col w-1/3">
           <PULabel id="label">
             with label
           </PULabel>
diff --git a/docs/content/docs/components/pu-accordion.md b/docs/content/docs/components/pu-accordion.md
index e1f9e2ec..affda33a 100644
--- a/docs/content/docs/components/pu-accordion.md
+++ b/docs/content/docs/components/pu-accordion.md
@@ -58,7 +58,7 @@ Basic Usage
 <template>
   <PUAccordion :items="items">
     <template #content="{ item }">
-      <div class="custom-content">
+      <div class="p-4 bg-gray-50 rounded dark:text-primary-light-500">
         <PUIcon name="info" />
         {{ item.content }}
       </div>
diff --git a/docs/content/docs/components/pu-compare.md b/docs/content/docs/components/pu-compare.md
new file mode 100644
index 00000000..12afa458
--- /dev/null
+++ b/docs/content/docs/components/pu-compare.md
@@ -0,0 +1,148 @@
+::doc-topic
+#title
+PU-Compare Component
+#description
+An interactive comparison slider component for visualizing differences between two states
+::
+
+::doc-topic
+#title
+Usage
+#description
+Basic Usage
+::
+::paper-show-compare{type="default"}
+#code
+```html
+<template>
+  <PUCompare>
+    <template #left>
+        Before
+    </template>
+    <template #right>
+      After
+    </template>
+  </PUCompare>
+</template>
+```
+::
+
+::doc-topic
+#description
+### Dark Mode Comparison
+::
+::paper-show-compare{type="dark-mode"}
+#code
+```html
+<template>
+  <PUCompare with-dark-mode>
+    <div class="p-4">
+      <span class="text-xl text-primary-light-500 dark:text-white">
+        Light/Dark Comparison
+      </span>
+    </div>
+  </PUCompare>
+</template>
+```
+::
+
+::doc-topic
+#description
+### With Custom Handle
+::
+::paper-show-compare{type="with-icon"}
+#code
+```html
+<template>
+  <PUCompare with-icon with-dark-mode>
+    <span class="text-xl text-primary-light-500 dark:text-white">
+      Light/Dark Comparison
+    </span>
+  </PUCompare>
+</template>
+```
+::
+
+::doc-topic
+#title
+## Props
+::
+::doc-table
+---
+headers: ['Prop', 'Type', 'Default', 'Description']
+rows:
+  - - 'ariaLabel'
+    - 'string'
+    - 'undefined'
+    - 'Accessibility label for screen readers'
+  - - 'ariaLabelledby'
+    - 'string'
+    - 'undefined'
+    - 'ID reference for accessibility label'
+  - - 'withDarkMode'
+    - 'boolean'
+    - 'false'
+    - 'Show dark/light mode comparison UI'
+  - - 'withIcon'
+    - 'boolean'
+    - 'false'
+    - 'Display chevron icons on slider handle'
+---
+::
+
+::doc-topic
+#title
+## Features
+#description
+- Interactive comparison slider
+- Accessible ARIA labels
+- Dark/light mode comparison
+- Customizable handle
+- Flexible content slots
+- Responsive design
+::
+
+::doc-topic
+#title
+## Styling
+#description
+- Base styling with Tailwind:
+::code-box{header="Core Structure" type="css" copy}
+```css
+  .compare-container {
+    @apply relative w-full max-w-lg border-2 border-primary-light-500 
+          rounded-lg shadow-lg overflow-hidden;
+  }
+
+  .slider-handle {
+    @apply absolute top-0 bottom-0 border border-primary-light-500;
+  }
+```
+::
+- Dark mode styling:
+::code-box{header="Dark Mode" type="css" copy}
+```css
+  .dark-mode-overlay {
+    @apply dark bg-primary-light-500;
+  }
+```
+::
+
+::doc-topic
+#title
+## Accessibility
+#description
+- Use `ariaLabel` or `ariaLabelledby` for screen reader support
+- Keyboard navigable
+- High contrast colors
+- Semantic HTML structure
+::
+
+::doc-topic
+#title
+## Dependencies
+#description
+- `PUIcon` for handle icons
+- Tailwind CSS for styling
+- Vue 3 Composition API
+::
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 91a65ad2..8d01ad76 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -27,4 +27,9 @@ export default defineNuxtConfig({
   },
 
   compatibilityDate: '2024-04-03',
+  tailwindcss: {
+    config: {
+      darkMode: 'class',
+    },
+  },
 })
diff --git a/src/runtime/components/PUAccordion.vue b/src/runtime/components/PUAccordion.vue
index f0bb6134..b7b0c1bc 100644
--- a/src/runtime/components/PUAccordion.vue
+++ b/src/runtime/components/PUAccordion.vue
@@ -65,8 +65,8 @@ const toggle = (index: number) => {
 
 <style scoped>
 .accordion {
-  @apply p-1 bg-white shadow-sm;
-  @apply border-2 border-primary-light-500 rounded-lg;
+  @apply p-1 bg-white dark:bg-primary-light-500 shadow-sm;
+  @apply border-2 border-primary-light-500 dark:border-white rounded-lg;
   @apply text-base;
 }
 
@@ -79,19 +79,19 @@ const toggle = (index: number) => {
 }
 
 .default-header {
-  @apply text-gray-800 text-lg;
+  @apply text-gray-800 dark:text-white text-lg;
 }
 
 .icon {
-  @apply transform transition-transform duration-200;
+  @apply transform transition-transform duration-200 dark:text-white;;
 }
 
 .accordion-content {
-  @apply p-2 text-gray-700 text-base;
+  @apply p-2 text-gray-700 dark:text-gray-50 text-base;
 }
 
 .divider {
-  @apply border-t border-primary-light-500/10 my-2;
+  @apply border-t border-primary-light-500/10 dark:border-white/50 my-2;
 }
 
 /* Transitions */
diff --git a/src/runtime/components/PUAudio.vue b/src/runtime/components/PUAudio.vue
index a5f96068..84cdfc66 100644
--- a/src/runtime/components/PUAudio.vue
+++ b/src/runtime/components/PUAudio.vue
@@ -66,7 +66,7 @@ watch(isMuted, (newVal) => {
 </script>
 
 <template>
-  <div class="relative w-full max-w-lg border-2 border-primary-light-500 rounded-lg shadow-lg p-4 flex items-center gap-3 bg-white">
+  <div class="relative w-full max-w-lg border-2 border-primary-light-500 dark:border-white rounded-lg shadow-lg p-4 flex items-center gap-3 bg-white dark:bg-primary-light-500">
     <audio
       ref="audioRef"
       :src="src"
@@ -76,32 +76,32 @@ watch(isMuted, (newVal) => {
     <button @click="togglePlay">
       <PUIcon
         :name="isPlaying ? 'pause' : 'play'"
-        class="w-8 h-8 text-primary-light-500"
+        class="w-8 h-8 text-primary-light-500 dark:text-white"
       />
     </button>
 
     <input
       type="range"
-      class="flex-1 accent-primary-light-500"
+      class="flex-1 accent-primary-light-500 dark:accent-white"
       min="0"
       :max="duration"
       :value="currentTime"
       @input="seek"
     >
 
-    <span class="text-md font-bold text-primary-light-600 font-patrick">
+    <span class="text-md font-bold text-primary-light-600 dark:text-gray-50 font-patrick">
       {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
     </span>
 
     <button @click="toggleMute">
       <PUIcon
         :name="isMuted ? 'volume-mute' : 'volume'"
-        class="w-6 h-6 text-primary-light-500"
+        class="w-6 h-6 text-primary-light-500 dark:text-white"
       />
     </button>
     <input
       type="range"
-      class="w-16 accent-primary-light-500"
+      class="w-16 accent-primary-light-500 dark:accent-white"
       min="0"
       max="1"
       step="0.1"
diff --git a/src/runtime/components/PUAvatar.vue b/src/runtime/components/PUAvatar.vue
index a40e22b0..d32e9f43 100644
--- a/src/runtime/components/PUAvatar.vue
+++ b/src/runtime/components/PUAvatar.vue
@@ -67,6 +67,6 @@ const shapeClass = computed(() => {
 
 <style scoped>
 div {
-  border: 2px solid black;
+  @apply border-2 border-primary-light-500 dark:border-primary-dark-500
 }
 </style>
diff --git a/src/runtime/components/PUBadge.vue b/src/runtime/components/PUBadge.vue
index 5622f4e5..1b5b9846 100644
--- a/src/runtime/components/PUBadge.vue
+++ b/src/runtime/components/PUBadge.vue
@@ -22,9 +22,9 @@ const props = defineProps<{
 }>()
 
 const severityColors = {
-  primary: 'border-primary-light-500 bg-primary-light-500 text-primary-dark-50',
-  secondary: 'border-primary-light-200 bg-primary-light-200 text-primary-light-500',
-  ghost: 'bg-transparent text-primary-light-500',
+  primary: 'border-primary-light-500 dark:bg-gray-50 dark:text-primary-light-500 dark:border-white bg-primary-light-500 text-primary-dark-50',
+  secondary: 'border-primary-light-200 dark:text-white dark:bg-primary-light-400 dark:border-primary-light-400 bg-primary-light-200 text-primary-light-500',
+  ghost: 'bg-transparent text-primary-light-500 dark:text-white',
 }
 
 const badgeClass = severityColors[props.severity || 'primary']
diff --git a/src/runtime/components/PUButton.vue b/src/runtime/components/PUButton.vue
index 947cd1da..276c507d 100644
--- a/src/runtime/components/PUButton.vue
+++ b/src/runtime/components/PUButton.vue
@@ -74,15 +74,15 @@ buttonClass.value.push(
 }
 
 .pu-button.pu-button--normal {
-  @apply bg-primary-light-500 rounded-lg  text-primary-light-50;
+  @apply bg-primary-light-500 rounded-lg  text-primary-light-50 dark:bg-primary-light-50 dark:text-primary-light-500;
 }
 
 .pu-button.pu-button--outlined {
-  @apply bg-transparent border-2 border-primary-light-500 text-primary-light-500;
+  @apply bg-transparent border-2 border-primary-light-500 text-primary-light-500 dark:border-primary-light-50 dark:text-primary-light-50;
 }
 
 .pu-button.pu-button--ghost {
-  @apply bg-transparent text-primary-light-500 border-transparent shadow-none;
+  @apply bg-transparent text-primary-light-500 border-transparent shadow-none dark:text-primary-light-50 dark:border-transparent dark:shadow-white/20;
 }
 
 .pu-button.pu-button--small {
diff --git a/src/runtime/components/PUButtonIcon.vue b/src/runtime/components/PUButtonIcon.vue
index f0474701..29d4ad76 100644
--- a/src/runtime/components/PUButtonIcon.vue
+++ b/src/runtime/components/PUButtonIcon.vue
@@ -58,15 +58,15 @@ buttonIconClass.push(
 }
 
 .pu-button-icon.pu-button-icon--normal {
-  @apply bg-primary-light-500 border-2 rounded-lg  text-primary-light-50;
+  @apply bg-primary-light-500 border-2 rounded-lg  text-primary-light-50 dark:bg-primary-light-50 dark:text-primary-light-500;
 }
 
 .pu-button-icon.pu-button-icon--outlined {
-  @apply bg-transparent border-2 border-primary-light-500 text-primary-light-500;
+  @apply bg-transparent border-2 border-primary-light-500 text-primary-light-500 dark:border-primary-light-50 dark:text-primary-light-50;
 }
 
 .pu-button-icon.pu-button-icon--ghost {
-  @apply bg-transparent border-2 text-primary-light-500 border-transparent;
+  @apply bg-transparent border-2 text-primary-light-500 border-transparent dark:text-primary-light-50 dark:border-transparent dark:shadow-white/20;
 }
 
 .pu-button-icon.pu-button-icon--small {
diff --git a/src/runtime/components/PUCheckbox.vue b/src/runtime/components/PUCheckbox.vue
index b55f6736..d3f1ba3f 100644
--- a/src/runtime/components/PUCheckbox.vue
+++ b/src/runtime/components/PUCheckbox.vue
@@ -32,13 +32,13 @@ const toggleState = () => {
 
 const currentState = computed(() => {
   return props.modelValue
-    ? { icon: 'check', style: 'bg-primary-light-500 text-white' }
+    ? { icon: 'check', style: 'bg-primary-light-500 dark:bg-white dark:text-primary-light-500 text-white' }
     : { icon: '', style: 'border-primary-light-500' }
 })
 
 const checkboxStyle = computed(() => {
   if (props.flavor === 'outlined') {
-    return 'bg-transparent border-primary-light-500'
+    return 'bg-transparent border-primary-light-500 text-primary-light-500 dark:text-white'
   }
   return props.disabled
     ? 'bg-primary-light-100 border-primary-light-300 text-primary-light-400'
@@ -55,7 +55,7 @@ const checkboxStyle = computed(() => {
       @click="toggleState"
     >
       <div
-        class="flex items-center justify-center w-5 h-5 border-2 border-primary-light-500  rounded transition-all"
+        class="flex items-center justify-center w-5 h-5 border-2 border-primary-light-500 dark:border-white  rounded transition-all"
         :class="[checkboxStyle, { 'active:animate-bounce': !disabled, 'border-primary-light-300': disabled }]"
       >
         <PUIcon
@@ -64,7 +64,7 @@ const checkboxStyle = computed(() => {
         />
       </div>
       <span
-        class="transition-opacity text-primary-light-500 select-none"
+        class="transition-opacity text-primary-light-500 dark:text-white select-none"
         :class="{
           'text-primary-light-400': disabled,
           'line-through': strikeOnFalse && !modelValue,
@@ -77,7 +77,7 @@ const checkboxStyle = computed(() => {
     </div>
     <div
       v-else
-      class="flex items-center justify-center w-5 h-5 border-2 border-primary-light-500 rounded transition-all"
+      class="flex items-center justify-center w-5 h-5 border-2 border-primary-light-500 dark:border-white rounded transition-all"
       :class="[checkboxStyle, { 'cursor-pointer active:animate-bounce': !disabled, 'cursor-not-allowed': disabled, 'border-primary-light-300': disabled }]"
       @click="toggleState"
     >
diff --git a/src/runtime/components/PUCompare.vue b/src/runtime/components/PUCompare.vue
new file mode 100644
index 00000000..7fa3f2c6
--- /dev/null
+++ b/src/runtime/components/PUCompare.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+  ariaLabel?: string
+  ariaLabelledby?: string
+  withDarkMode?: boolean
+  withIcon?: boolean
+}>()
+
+const sliderValue = ref(50)
+
+const updateSlider = (event: Event) => {
+  sliderValue.value = (event.target as HTMLInputElement).valueAsNumber
+}
+</script>
+
+<template>
+  <div
+    class="relative w-full max-w-lg border-2 border-primary-light-500 rounded-lg shadow-lg overflow-hidden"
+    :aria-labelledby="ariaLabelledby"
+    :aria-label="ariaLabel"
+  >
+    <div
+      v-if="withDarkMode"
+      class="absolute -z-20 inset-0 flex items-center justify-center pointer-events-none bg-white dark:bg-primary-light-500"
+    >
+      <div
+        class="absolute top-1 right-1 text-primary-light-500 font-patrick"
+      >
+        <PUIcon name="brightness" />
+      </div>
+      <slot />
+    </div>
+
+    <div
+      v-if="withDarkMode"
+      class="absolute -z-20 inset-0 flex items-center justify-center overflow-hidden  "
+      :class="{ 'dark bg-primary-light-500': withDarkMode }"
+      :style="{ clipPath: `inset(0 ${100 - sliderValue}% 0 0)` }"
+    >
+      <div
+        class="absolute top-1 left-1 text-white font-patrick"
+      >
+        <PUIcon name="moon" />
+      </div>
+      <slot />
+    </div>
+
+    <div
+      v-if="!withDarkMode"
+      class="absolute -z-20 inset-0 flex items-center justify-center pointer-events-none bg-white dark:bg-primary-light-500"
+    >
+      <slot name="right" />
+    </div>
+
+    <div
+      v-if="!withDarkMode"
+      class="absolute -z-20 inset-0 flex items-center justify-center overflow-hidden bg-white"
+      :style="{ clipPath: `inset(0 ${100 - sliderValue}% 0 0)` }"
+    >
+      <slot name="left" />
+    </div>
+
+    <input
+      v-model="sliderValue"
+      type="range"
+      min="0"
+      max="100"
+      class="absolute inset-0 w-full h-full opacity-0 cursor-ew-resize"
+      @input="updateSlider"
+    >
+
+    <div
+      class="absolute top-0 bottom-0 border border-primary-light-500"
+      :style="{ left: sliderValue + '%' }"
+    >
+      <div
+        v-if="withIcon"
+        class="absolute -z-10 top-1/2 text-xs -translate-y-1/2 -translate-x-1/2 rounded-full  bg-slate-500/20 border border-slate-500/80 text-slate-500  flex items-center gap-1 shadow-md"
+      >
+        <PUIcon name="chevron-left" />
+        <PUIcon name="chevron-right" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+input[type="range"] {
+  @apply absolute top-0 left-0 w-full h-full opacity-0 cursor-ew-resize;
+}
+</style>
diff --git a/src/runtime/components/PUDatePicker.vue b/src/runtime/components/PUDatePicker.vue
index 3eada3b7..90b53119 100644
--- a/src/runtime/components/PUDatePicker.vue
+++ b/src/runtime/components/PUDatePicker.vue
@@ -7,20 +7,20 @@
         :disabled
         :value="formattedDate"
         readonly
-        class="datepicker-input w-full border-2 border-primary-light-500 rounded-lg pl-10 py-2"
+        class="datepicker-input w-full border-2 border-primary-light-500 dark:border-white bg-transparent dark:text-white rounded-lg pl-10 py-2"
         @focus="isOpen = true"
       >
       <PUIcon
         v-if="!alwaysOpen"
         name="calender"
-        class="absolute left-3 top-1/2 -translate-y-1/2 text-primary-light-500 cursor-pointer"
+        class="absolute left-3 top-1/2 -translate-y-1/2 text-primary-light-500 dark:text-white cursor-pointer"
         @click="isOpen = true"
       />
     </div>
     <PUTooltip
       v-if="isOpen || alwaysOpen"
       :positions="alwaysOpen ? [] : ['top-left']"
-      class="datepicker-container w-full p-4 "
+      class="datepicker-container w-full p-4"
     >
       <div class="datepicker-header min-w-full">
         <button @click="prevMonth">
@@ -42,13 +42,13 @@
         <span
           v-for="n in startOffset"
           :key="'empty-' + n"
-          class="empty bg-primary-light-50"
+          class="empty bg-primary-light-50 dark:bg-primary-light-400/20"
         />
         <button
           v-for="day in daysInMonth"
           :key="day"
           :class="{ selected: isSelected(day), disabled: isDisabled(day) }"
-          class="hover:bg-primary-light-100"
+          class="hover:bg-primary-light-100 dark:hover:bg-primary-light-400"
           @click="selectDate(day)"
         >
           {{ day }}
@@ -184,7 +184,7 @@ const nextMonth = () => {
 }
 
 .datepicker-days button.selected {
-  @apply bg-primary-light-500 text-white;
+  @apply bg-primary-light-500 text-white dark:bg-white dark:text-primary-light-500;
 }
 
 .datepicker-days button.disabled {
diff --git a/src/runtime/components/PUIcon.vue b/src/runtime/components/PUIcon.vue
index 591a6ac2..7e3c0d50 100644
--- a/src/runtime/components/PUIcon.vue
+++ b/src/runtime/components/PUIcon.vue
@@ -2163,6 +2163,11 @@ const iconPaths: Record<string, {
       d: 'M15 14H9C8.73479 14 8.48043 14.1054 8.2929 14.2929C8.10536 14.4804 8 14.7348 8 15C8 15.2652 8.10536 15.5196 8.2929 15.7071C8.48043 15.8946 8.73479 16 9 16H15C15.2652 16 15.5196 15.8946 15.7071 15.7071C15.8946 15.5196 16 15.2652 16 15C16 14.7348 15.8946 14.4804 15.7071 14.2929C15.5196 14.1054 15.2652 14 15 14ZM9.08 12.21L10.58 10.71C10.6737 10.617 10.7481 10.5064 10.7989 10.3846C10.8497 10.2627 10.8758 10.132 10.8758 10C10.8758 9.86799 10.8497 9.73728 10.7989 9.61542C10.7481 9.49356 10.6737 9.38296 10.58 9.29L9.08 7.79C8.8917 7.6017 8.63631 7.49591 8.37 7.49591C8.1037 7.49591 7.84831 7.6017 7.66 7.79C7.4717 7.9783 7.36591 8.2337 7.36591 8.5C7.36591 8.7663 7.4717 9.0217 7.66 9.21L8.46 10L7.66 10.79C7.56628 10.883 7.49188 10.9936 7.44111 11.1154C7.39034 11.2373 7.36421 11.368 7.36421 11.5C7.36421 11.632 7.39034 11.7627 7.44111 11.8846C7.49188 12.0064 7.56628 12.117 7.66 12.21C7.75344 12.3027 7.86426 12.376 7.9861 12.4258C8.10794 12.4755 8.2384 12.5008 8.37 12.5C8.50161 12.5008 8.63207 12.4755 8.75391 12.4258C8.87575 12.376 8.98656 12.3027 9.08 12.21ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20ZM16.58 7.79C16.487 7.69627 16.3764 7.62188 16.2546 7.57111C16.1327 7.52034 16.002 7.4942 15.87 7.4942C15.738 7.4942 15.6073 7.52034 15.4854 7.57111C15.3636 7.62188 15.253 7.69627 15.16 7.79L13.66 9.29C13.5663 9.38296 13.4919 9.49356 13.4411 9.61542C13.3903 9.73728 13.3642 9.86799 13.3642 10C13.3642 10.132 13.3903 10.2627 13.4411 10.3846C13.4919 10.5064 13.5663 10.617 13.66 10.71L15.16 12.21C15.2534 12.3027 15.3643 12.376 15.4861 12.4258C15.6079 12.4755 15.7384 12.5008 15.87 12.5C16.0016 12.5008 16.1321 12.4755 16.2539 12.4258C16.3757 12.376 16.4866 12.3027 16.58 12.21C16.6737 12.117 16.7481 12.0064 16.7989 11.8846C16.8497 11.7627 16.8758 11.632 16.8758 11.5C16.8758 11.368 16.8497 11.2373 16.7989 11.1154C16.7481 10.9936 16.6737 10.883 16.58 10.79L15.79 10L16.58 9.21C16.6737 9.11704 16.7481 9.00644 16.7989 8.88458C16.8497 8.76272 16.8758 8.63201 16.8758 8.5C16.8758 8.36799 16.8497 8.23728 16.7989 8.11542C16.7481 7.99356 16.6737 7.88296 16.58 7.79Z',
     },
   ],
+  'star-solid': [
+    {
+      d: 'M10.8575 2.55485C11.2144 1.4444 12.7856 1.4444 13.1425 2.55486L15.0689 8.54915H21.3393C22.4986 8.54915 22.984 10.03 22.0497 10.7163L16.9656 14.4509L18.9006 20.4718C19.2566 21.5797 17.9856 22.495 17.0477 21.8061L12 18.0983L6.95229 21.8061C6.01442 22.495 4.74339 21.5797 5.09944 20.4718L7.03444 14.4509L1.95028 10.7163C1.01597 10.03 1.5014 8.54915 2.66068 8.54915H8.93112L10.8575 2.55485Z',
+    },
+  ],
   'star-half-alt': [
     {
       d: 'M12 18.0982L6.9523 21.806C6.01443 22.4949 4.74339 21.5796 5.09945 20.4717L7.03445 14.4508L1.95028 10.7162C1.01598 10.0299 1.5014 8.54906 2.66068 8.54906H8.93112L10.8576 2.55476C11.2144 1.44431 12.7856 1.44431 13.1425 2.55477L15.0689 8.54906H21.3393C22.4986 8.54906 22.984 10.0299 22.0497 10.7162L16.9656 14.4508L18.9006 20.4717C19.2566 21.5796 17.9856 22.4949 17.0477 21.806L12 18.0982ZM13.6109 10.5491H18.8989L14.6208 13.6915L16.2406 18.7315L12 15.6166V5.5366L13.6109 10.5491Z',
diff --git a/src/runtime/components/PUInput.vue b/src/runtime/components/PUInput.vue
index 7e4a09a0..c1f62a9e 100644
--- a/src/runtime/components/PUInput.vue
+++ b/src/runtime/components/PUInput.vue
@@ -68,12 +68,12 @@ const handleBlur = () => {
 <style scoped>
 .pu-input {
   @apply relative  flex items-center  gap-2 w-full p-2;
-  @apply border-2 border-primary-light-500 rounded-lg;
+  @apply border-2 border-primary-light-500 dark:border-white rounded-lg bg-transparent dark:text-white;
   @apply transition-all duration-150 ease-in-out;
 }
 
 .pu-input--default {
-  @apply text-gray-800 text-base w-full;
+  @apply text-primary-light-500 dark:text-white text-base w-full bg-transparent;
   @apply focus:outline-none;
 }
 
diff --git a/src/runtime/components/PULabel.vue b/src/runtime/components/PULabel.vue
index 01c10c6d..4297852c 100644
--- a/src/runtime/components/PULabel.vue
+++ b/src/runtime/components/PULabel.vue
@@ -12,6 +12,6 @@ defineProps<{ id: string }>()
 
 <style scoped>
 .pu-label {
-  @apply text-primary-light-500 text-base uppercase w-full;
+  @apply text-primary-light-500 dark:text-white text-base uppercase w-full;
 }
 </style>
diff --git a/src/runtime/components/PUProgress.vue b/src/runtime/components/PUProgress.vue
index 868d917a..4fd08c7a 100644
--- a/src/runtime/components/PUProgress.vue
+++ b/src/runtime/components/PUProgress.vue
@@ -9,7 +9,7 @@
       class="transform -rotate-90"
     >
       <circle
-        class="text-gray-300 stroke-current"
+        class="text-gray-300 stroke-current dark:text-gray-600"
         cx="50"
         cy="50"
         r="45"
@@ -17,7 +17,7 @@
         fill="none"
       />
       <circle
-        class="text-primary-light-500 stroke-current transition-all duration-300"
+        class="text-primary-light-500 stroke-current transition-all duration-300 dark:text-primary-light-50"
         cx="50"
         cy="50"
         r="45"
@@ -30,22 +30,22 @@
 
     <div
       v-else-if="mode === 'horizontal'"
-      class="w-full bg-gray-200 rounded-lg overflow-hidden"
+      class="w-full bg-gray-200 rounded-lg overflow-hidden dark:bg-gray-600"
       :style="{ height: sizeMap.horizontal + 'px' }"
     >
       <div
-        class="h-full bg-primary-light-500 transition-all duration-300"
+        class="h-full bg-primary-light-500 dark:bg-primary-light-50 transition-all duration-300"
         :style="{ width: `${progress}%` }"
       />
     </div>
 
     <div
       v-else
-      class="bg-gray-200 rounded-lg overflow-hidden rotate-180"
+      class="bg-gray-200 rounded-lg overflow-hidden rotate-180 dark:bg-gray-600"
       :style="{ width: sizeMap.vertical + 'px', height: '100px' }"
     >
       <div
-        class="bg-primary-light-500 transition-all duration-300"
+        class="bg-primary-light-500 transition-all duration-300 dark:bg-primary-light-50"
         :style="{ height: `${progress}%` }"
       />
     </div>
diff --git a/src/runtime/components/PURadio.vue b/src/runtime/components/PURadio.vue
index e455e90f..3fb7a710 100644
--- a/src/runtime/components/PURadio.vue
+++ b/src/runtime/components/PURadio.vue
@@ -23,10 +23,7 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:modelValue'])
 
-const isActive = computed(() => {
-  // Correção: Sempre compara modelValue com value (para uso sem options)
-  return props.modelValue === props.value
-})
+const isActive = computed(() => props.modelValue === props.value)
 
 const updateValue = (value: string | number | boolean) => {
   if (!props.disabled && value !== undefined) {
@@ -35,7 +32,10 @@ const updateValue = (value: string | number | boolean) => {
 }
 
 const getRadioClasses = (active: boolean) => {
-  const classes = ['flex items-center gap-2 group transition-all']
+  const classes = [
+    'flex items-center gap-2 group transition-all',
+    'dark:bg-transparent', // Background para o modo dark
+  ]
 
   if (props.disabled) {
     classes.push('cursor-not-allowed opacity-50')
@@ -48,12 +48,15 @@ const getRadioClasses = (active: boolean) => {
     classes.push('p-2 rounded-lg border-2')
 
     if (active) {
-      classes.push('border-primary-light-600')
+      classes.push('border-primary-light-600 dark:border-white')
       if (props.flavor === 'outlined') classes.push('font-bold')
       if (props.flavor === 'box') classes.push('font-bold')
     }
     else {
-      classes.push('border-primary-light-300 hover:border-primary-light-400')
+      classes.push(
+        'border-primary-light-300 hover:border-primary-light-400',
+        'dark:border-primary-light-400 dark:hover:border-primary-light-300',
+      )
     }
   }
 
@@ -61,18 +64,28 @@ const getRadioClasses = (active: boolean) => {
 }
 
 const getRadioCircleClasses = (active: boolean) => {
-  const classes = ['w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all']
+  const classes = [
+    'w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all',
+  ]
 
   if (props.flavor === 'outlined') {
-    classes.push(active ? 'border-primary-light-600 bg-primary-light-100' : 'border-primary-light-300')
+    classes.push(
+      active
+        ? 'border-primary-light-600 bg-white dark:border-white dark:bg-primary-light-600'
+        : 'border-primary-light-300 dark:border-primary-light-300',
+    )
   }
   else if (props.flavor === 'normal') {
-    classes.push(active ? 'border-primary-light-600 bg-primary-light-600' : 'border-primary-light-300 bg-white')
+    classes.push(
+      active
+        ? 'border-primary-light-600 bg-primary-light-600 dark:border-white dark:bg-primary-light-500'
+        : 'border-primary-light-300 bg-white dark:border-white dark:bg-primary-light-600',
+    )
   }
 
   if (props.disabled) {
-    classes.push('border-primary-light-200')
-    if (props.flavor === 'normal') classes.push('bg-gray-100')
+    classes.push('border-primary-light-200 dark:border-primary-light-500')
+    if (props.flavor === 'normal') classes.push('bg-gray-100 dark:bg-gray-700')
   }
 
   return classes
@@ -80,8 +93,8 @@ const getRadioCircleClasses = (active: boolean) => {
 
 const getDotClasses = computed(() => {
   return props.flavor === 'outlined'
-    ? 'w-2 h-2 rounded-full bg-primary-light-600'
-    : 'w-2 h-2 rounded-full bg-white'
+    ? 'w-2 h-2 rounded-full bg-primary-light-600 dark:bg-white'
+    : 'w-2 h-2 rounded-full bg-white dark:bg-white'
 })
 </script>
 
@@ -107,7 +120,7 @@ const getDotClasses = computed(() => {
         />
       </div>
       <span
-        class="text-primary-light-600 select-none"
+        class="text-primary-light-600 dark:text-white select-none"
         :class="{
           'font-bold': modelValue === option.value,
           'group-hover:opacity-80': !disabled,
@@ -135,7 +148,7 @@ const getDotClasses = computed(() => {
     </div>
     <span
       v-if="label"
-      class="text-primary-light-600 select-none"
+      class="text-primary-light-600 dark:text-white select-none"
       :class="{
         'font-bold': isActive,
         'group-hover:opacity-80': !disabled,
diff --git a/src/runtime/components/PUSelect.vue b/src/runtime/components/PUSelect.vue
index aa0744bc..7fb79209 100644
--- a/src/runtime/components/PUSelect.vue
+++ b/src/runtime/components/PUSelect.vue
@@ -37,6 +37,8 @@ const handleChange = (event: Event) => {
   <div class="relative w-full font-patrick">
     <select
       :id="id"
+      :class="`py-2 ${size === 'small' ? 'text-sm' : 'text-base'}`"
+      :placeholder="placeholder"
       class="appearance-none cursor-pointer border rounded-lg px-4 py-2 text-primary-light-500 bg-white focus:outline-none ring-2 ring-primary-light-500 w-full"
       :value="selectedValue"
       @change="handleChange"
@@ -57,7 +59,10 @@ const handleChange = (event: Event) => {
         {{ option.label }}
       </option>
     </select>
-    <span class="absolute inset-y-0 right-2 flex items-center pr-2 pointer-events-none">
+    <span
+      :class="`text-${size === 'small' ? 'sm ' : 'base'} text-primary-light-500`"
+      class="absolute inset-y-0 right-2 flex items-center pr-2 pointer-events-none"
+    >
       <PUIcon
         name="chevron-down"
         custom-class="text-primary-light-500"
diff --git a/src/runtime/components/PUSwitch.vue b/src/runtime/components/PUSwitch.vue
index 7498fe37..4c1acc8d 100644
--- a/src/runtime/components/PUSwitch.vue
+++ b/src/runtime/components/PUSwitch.vue
@@ -32,7 +32,7 @@ const switchClasses = computed(() => {
   }
   const bgColors = {
     normal: {
-      active: 'bg-primary-light-500',
+      active: 'bg-primary-light-500 dark:bg-white',
       inactive: 'bg-primary-light-300',
     },
     outlined: {
@@ -50,7 +50,7 @@ const switchClasses = computed(() => {
 })
 
 const thumbClasses = computed(() => {
-  const base = 'absolute bg-white rounded-full shadow-sm transform transition-transform duration-300'
+  const base = 'absolute bg-white rounded-full shadow-sm transform transition-transform duration-300 dark:bg-primary-light-500 dark:border-white'
   const sizes = {
     full: 'w-4 h-4 top-1',
     mid: 'w-5 h-5 -top-1 border border-2 border-primary-light-500', // Thumb maior e posicionado acima do container
@@ -81,7 +81,7 @@ const thumbClasses = computed(() => {
       </div>
       <span
         v-if="label"
-        class="text-primary-light-500 transition-opacity select-none"
+        class="text-primary-light-500 transition-opacity select-none dark:text-primary-light-50"
         :class="{
           'text-primary-light-400': disabled,
           'group-hover:opacity-80': !disabled,
diff --git a/src/runtime/components/PUTable.vue b/src/runtime/components/PUTable.vue
index 829eae84..973a399a 100644
--- a/src/runtime/components/PUTable.vue
+++ b/src/runtime/components/PUTable.vue
@@ -77,14 +77,14 @@ const setSort = (key: string) => {
       </div>
     </div>
 
-    <table class="w-full border-collapse border-2 border-primary-light-500 font-patrick">
+    <table class="w-full border-collapse border-2 border-primary-light-500 font-patrick dark:bg-primary-light-800 dark:text-primary-dark-500">
       <thead>
-        <tr class="bg-primary-light-500/10 text-primary-light-500 text-left">
+        <tr class="bg-primary-light-500/10 text-primary-light-500 text-left dark:bg-primary-light-400 dark:text-primary-light-50">
           <th
             v-for="header in headers"
             v-show="!hiddenColumns?.includes(header.key)"
             :key="header.key"
-            class="border p-2 border-primary-light-500 cursor-pointer"
+            class="border p-2 border-primary-light-500 cursor-pointer "
             @click="sortable ? setSort(header.key) : null"
           >
             {{ header.label }}
@@ -112,7 +112,7 @@ const setSort = (key: string) => {
             v-for="header in headers"
             v-show="!hiddenColumns?.includes(header.key)"
             :key="header.key"
-            class="border p-2 border-primary-light-500"
+            class="border p-2 border-primary-light-500 dark:text-primary-light-50"
           >
             <slot
               :name="`cell-${header.key}`"
@@ -138,7 +138,7 @@ const setSort = (key: string) => {
       >
         Previous
       </PUButton>
-      <span>Page {{ currentPage }} of {{ totalPages }}</span>
+      <span class="text-primary-light-500 dark:text-primary-light-50">Page {{ currentPage }} of {{ totalPages }}</span>
       <PUButton
         key="table-next"
         flavor="outlined"
diff --git a/src/runtime/components/PUTooltip.vue b/src/runtime/components/PUTooltip.vue
index 54a58e23..92858d7b 100644
--- a/src/runtime/components/PUTooltip.vue
+++ b/src/runtime/components/PUTooltip.vue
@@ -42,18 +42,18 @@ const positionClass = ref({
 
 <style scoped>
 .pu-tooltip {
-  @apply relative border-2 border-primary-light-500 bg-white rounded-lg text-center p-6 w-full h-full shadow-lg shadow-primary-light-500/20;
+  @apply relative border-2 border-primary-light-500 dark:border-white bg-white dark:bg-primary-light-500 rounded-lg text-primary-light-500 dark:text-white text-center p-6 w-full h-full shadow-lg shadow-primary-light-500/20;
 }
 
 .tooltip-arrow {
-  @apply absolute  w-6 h-6 bg-white transform  z-10 rounded-sm;
+  @apply absolute  w-6 h-6 bg-white dark:bg-primary-light-500 transform  z-10 rounded-sm;
   border: 2px solid black;
   border-color: inherit;
 }
 
 .tooltip-arrow::before {
   content: '';
-  @apply absolute -mt-[22px] -ml-[22px] w-[39px] h-[39px] transform rotate-[135deg] bg-white ;
+  @apply absolute -mt-[22px] -ml-[22px] w-[39px] h-[39px] transform rotate-[135deg] bg-white dark:bg-primary-light-500; ;
   inset: 0;
   clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
   z-index: 1;