diff --git a/src/Theme/Theme.stories.tsx b/src/Theme/Theme.stories.tsx
index 6ccd7d7c..0726e0e8 100644
--- a/src/Theme/Theme.stories.tsx
+++ b/src/Theme/Theme.stories.tsx
@@ -2,9 +2,10 @@ import React from 'react'
 import { Story, Meta } from '@storybook/react'
 
 import Theme, { ThemeProps } from '.'
-import Button from '../Button'
+import ThemeItem from './ThemeItem'
+
 import { DEFAULT_THEMES } from '../defaultThemes'
-import { toTitleCase } from '../utils'
+import { useTheme } from './useTheme'
 
 export default {
   title: 'Utils/Theme',
@@ -12,23 +13,100 @@ export default {
 } as Meta
 
 export const Default: Story<ThemeProps> = (args) => {
+  const { theme, setTheme } = useTheme()
+
   return (
-    <div className="flex flex-col gap-y-4">
-      {DEFAULT_THEMES.map((theme) => (
-        <Theme
-          key={`theme.${theme}`}
-          dataTheme={theme}
-          className="p-8 bg-neutral rounded-2xl"
+    <div>
+      <h4 className="mb-4">Current Theme: {theme}</h4>
+      <div className="flex flex-wrap gap-4">
+        {DEFAULT_THEMES.map((t, i) => (
+          <ThemeItem
+            key={`theme_${t}_#${i}`}
+            dataTheme={t}
+            role="button"
+            aria-label="Theme select"
+            aria-pressed={t === theme}
+            selected={t === theme}
+            tabIndex={0}
+            onClick={() => {
+              document
+                .getElementsByTagName('html')[0]
+                .setAttribute('data-theme', t)
+              window.localStorage.setItem('sb-react-daisyui-preview-theme', t)
+              setTheme(t)
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+Default.args = {}
+
+export const NestedThemes: Story<ThemeProps> = (args) => {
+  const { theme, setTheme } = useTheme()
+
+  const renderNestedThemes = (themes: readonly string[]) => {
+    const nodes: React.ReactNode[] = []
+
+    for (let i = 0; i < themes.length; i += 2) {
+      nodes.push(
+        <ThemeItem
+          key={`theme_${themes[i]}_#${i}`}
+          dataTheme={themes[i]}
+          role="button"
+          aria-label="Theme select"
+          aria-pressed={themes[i] === theme}
+          selected={themes[i] === theme}
+          tabIndex={0}
+          onClick={(e) => {
+            e.stopPropagation()
+
+            document
+              .getElementsByTagName('html')[0]
+              .setAttribute('data-theme', themes[i])
+            window.localStorage.setItem(
+              'sb-react-daisyui-preview-theme',
+              themes[i]
+            )
+            setTheme(themes[i])
+          }}
         >
-          <h2 className="text-xl font-semibold mb-4">{toTitleCase(theme)}</h2>
-          <div className="flex gap-x-2">
-            <Button>Default</Button>
-            <Button color="primary">Primary</Button>
-            <Button color="secondary">Secondary</Button>
-            <Button color="accent">Accent</Button>
-          </div>
-        </Theme>
-      ))}
+          <ThemeItem
+            key={`theme_${themes[i + 1]}_#${i + 1}`}
+            dataTheme={themes[i + 1]}
+            role="button"
+            aria-label="Theme select"
+            aria-pressed={themes[i + 1] === theme}
+            selected={themes[i + 1] === theme}
+            tabIndex={0}
+            onClick={(e) => {
+              e.stopPropagation()
+
+              document
+                .getElementsByTagName('html')[0]
+                .setAttribute('data-theme', themes[i + 1])
+              window.localStorage.setItem(
+                'sb-react-daisyui-preview-theme',
+                themes[i + 1]
+              )
+              setTheme(themes[i + 1])
+            }}
+          />
+        </ThemeItem>
+      )
+    }
+
+    return <div className="flex flex-wrap gap-4">{nodes}</div>
+  }
+
+  return (
+    <div>
+      <h4 className="mb-4">Current Theme: {theme}</h4>
+      <div className="flex flex-col gap-y-4">
+        {renderNestedThemes(DEFAULT_THEMES)}
+      </div>
     </div>
   )
 }
+NestedThemes.args = {}
diff --git a/src/Theme/ThemeItem.tsx b/src/Theme/ThemeItem.tsx
new file mode 100644
index 00000000..d2b387b5
--- /dev/null
+++ b/src/Theme/ThemeItem.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import clsx from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export type ThemeItemProps = React.HTMLAttributes<HTMLDivElement> & {
+  dataTheme: string
+  selected?: boolean
+}
+
+const ThemeItem = ({
+  selected,
+  children,
+  dataTheme,
+  className,
+  ...props
+}: ThemeItemProps) => {
+  const classes = twMerge(
+    className,
+    'border-base-content/20 hover:border-base-content/40 outline-base-content\
+        overflow-hidden rounded-lg border outline-2 outline-offset-2',
+    clsx({
+      outline: selected,
+    })
+  )
+
+  return (
+    <div {...props} data-theme={dataTheme} className={classes}>
+      <div className="bg-base-100 text-base-content w-full cursor-pointer font-sans">
+        <div className="grid grid-cols-5 grid-rows-3">
+          <div className="bg-base-200 col-start-1 row-span-2 row-start-1" />
+          <div className="bg-base-300 col-start-1 row-start-3" />
+          <div className="bg-base-100 col-span-4 col-start-2 row-span-3 row-start-1 flex flex-col gap-1 p-2">
+            <div className="font-bold">{dataTheme}</div>
+            <div className="flex flex-wrap gap-1">
+              <div className="bg-primary flex aspect-square w-5 items-center justify-center rounded lg:w-6">
+                <div className="text-primary-content text-sm font-bold">A</div>
+              </div>
+
+              <div className="bg-secondary flex aspect-square w-5 items-center justify-center rounded lg:w-6">
+                <div className="text-primary-content text-sm font-bold">A</div>
+              </div>
+
+              <div className="bg-accent flex aspect-square w-5 items-center justify-center rounded lg:w-6">
+                <div className="text-primary-content text-sm font-bold">A</div>
+              </div>
+
+              <div className="bg-neutral flex aspect-square w-5 items-center justify-center rounded lg:w-6">
+                <div className="text-primary-content text-sm font-bold">A</div>
+              </div>
+            </div>
+            {children && <div className="my-2">{children}</div>}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ThemeItem