diff --git a/src/modules/playground/components/Demo/Demo.tsx b/src/modules/playground/components/Demo/root.tsx
similarity index 98%
rename from src/modules/playground/components/Demo/Demo.tsx
rename to src/modules/playground/components/Demo/root.tsx
index b378690..2b304c8 100644
--- a/src/modules/playground/components/Demo/Demo.tsx
+++ b/src/modules/playground/components/Demo/root.tsx
@@ -34,7 +34,7 @@ import { DemoDaisyAlert } from './daisy/demo-daisy-alert'
 import { DemoDaisyAvatar } from './daisy/demo-daisy-avatar'
 import { DemoDaisyBadge } from './daisy/demo-daisy-badge'
 
-export function Demo() {
+export function DemoContainer() {
   return (
     <section className="grid h-full grid-cols-1 gap-5 xl:grid-cols-2">
       <div className="flex flex-col space-y-5 p-5">
diff --git a/src/modules/playground/pages/page.tsx b/src/modules/playground/pages/page.tsx
index 0c91ab6..90ecbce 100644
--- a/src/modules/playground/pages/page.tsx
+++ b/src/modules/playground/pages/page.tsx
@@ -1,10 +1,10 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import { Button, Tab, TabList, TabPanel, Tabs } from 'react-aria-components'
 import { twJoin } from 'tailwind-merge'
-import { Demo } from '#playground/components/demo/demo'
 import { For } from '#shared/components/for/for'
 import { modes, themes } from '#shared/constants/theme.constant'
 import { useColorMode } from '#shared/hooks/use-color-mode.hook'
+import { DemoContainer } from '#playground/components/demo/root'
 
 export function PlaygroundPage() {
   const [, setTheme] = useColorMode({
@@ -60,7 +60,7 @@ export function PlaygroundPage() {
         </TabList>
 
         <TabPanel id="demo" className="h-full w-full">
-          <Demo />
+          <DemoContainer />
         </TabPanel>
 
         <TabPanel id="playground" className="h-full w-full">