diff --git a/apps/landing/src/app/(detail)/components/[component]/page.tsx b/apps/landing/src/app/(detail)/components/[component]/page.tsx
index a0e41579..c7b074db 100644
--- a/apps/landing/src/app/(detail)/components/[component]/page.tsx
+++ b/apps/landing/src/app/(detail)/components/[component]/page.tsx
@@ -6,6 +6,7 @@ import { CustomH6 } from '@/components/mdx/components/CustomH6'
 import { CustomParagraph } from '@/components/mdx/components/CustomParagraph'
 import { CustomPre } from '@/components/mdx/components/CustomPre'
 import { CustomStrong } from '@/components/mdx/components/CustomStrong'
+import { COMPONENT_GROUPS } from '@/constants'
 import { getDemos } from '@/utils/get-demos'
 
 import MdxCard from '../MdxCard'
@@ -37,35 +38,11 @@ export const generateMetadata = async ({
 }
 
 export const generateStaticParams = async () => {
-  return [
-    'button',
-    'input',
-    'uploader',
-    'toggle',
-    'tooltip',
-    'textarea',
-    'textbox',
-    'theme-button',
-    'snackbar',
-    'stepper',
-    'tab',
-    'search',
-    'select',
-    'slider',
-    'pagination',
-    'progress-bar',
-    'radio',
-    'header',
-    'label',
-    'menu',
-    'dropdown',
-    'footer',
-    'color-picker',
-    'confirm',
-    'date-picker',
-    'checkbox',
-    'bottom-sheet',
-  ].map((component) => ({ component }))
+  return Object.values(COMPONENT_GROUPS)
+    .flat()
+    .map((component) => ({
+      component,
+    }))
 }
 
 export default async function Page({
diff --git a/apps/landing/src/app/(detail)/components/overview/page.tsx b/apps/landing/src/app/(detail)/components/overview/page.tsx
index 488d27bf..4925b571 100644
--- a/apps/landing/src/app/(detail)/components/overview/page.tsx
+++ b/apps/landing/src/app/(detail)/components/overview/page.tsx
@@ -1,7 +1,8 @@
 import { Center, css, Flex, Grid, Text, VStack } from '@devup-ui/react'
 import Link from 'next/link'
 
-import * as Icons from '@/components/icons/components'
+import { Icons } from '@/components/icons/components'
+import { COMPONENT_GROUPS } from '@/constants'
 
 import Card from '../Card'
 
@@ -33,363 +34,49 @@ export default function Page() {
             'repeat(5, 1fr)',
           ]}
         >
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/button"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconButtonComponent className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Button
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/text-box"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconTextBoxComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Text box
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/text-area"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconTextAreaComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Text area
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/dropdown"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconDropdownComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Dropdown
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/radio"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconRadioComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Radio
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/checkbox"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconCheckboxComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Checkbox
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/stepper"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconStepperComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Stepper
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/toggle"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconToggleComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Toggle
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/slider"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconSliderComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Slider
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/date-picker"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconDatePickerComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Date picker
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/color-picker"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconColorPickerComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Color picker
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/uploader"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconUploaderComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Uploader
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/pagination"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconPagination className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Pagination
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/progress-bar"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconProgressBar className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Progress bar
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/search"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconSearchComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Search
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/select"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconSelectComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Select
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/label"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconLabelComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Label
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
+          {COMPONENT_GROUPS.Form.map((component) => {
+            const Icon =
+              Icons[
+                `Icon${component
+                  .split('-')
+                  .map((item) => item.charAt(0).toUpperCase() + item.slice(1))
+                  .join('')}Comp`
+              ]
+            return (
+              <Link
+                key={component}
+                className={css({ textDecoration: 'none' })}
+                href={`/components/${component}`}
+              >
+                <Card>
+                  <Center h="140px">
+                    <Icon className={css({ w: '100%' })} />
+                  </Center>
+                  <Flex
+                    alignItems="center"
+                    borderTop="1px solid $border"
+                    gap="10px"
+                    px="16px"
+                    py="12px"
+                  >
+                    <Text
+                      color="$text"
+                      textAlign="right"
+                      typography="buttonSmid"
+                    >
+                      {component
+                        .split('-')
+                        .map(
+                          (item) =>
+                            item.charAt(0).toUpperCase() + item.slice(1),
+                        )
+                        .join(' ')}
+                    </Text>
+                  </Flex>
+                </Card>
+              </Link>
+            )
+          })}
         </Grid>
       </VStack>
       <VStack gap="16px" overflow="visible" py="30px">
@@ -407,174 +94,49 @@ export default function Page() {
           ]}
           overflow="visible"
         >
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/footer"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconFooterComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Footer
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/tooltip"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconTooltipComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Tooltip
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/tab"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconTabComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Tab
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/menu"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconMenuComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Menu
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/header"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconHeaderComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Header
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/confirm"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconConfirmComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Confirm
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/snackbar"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconSnackbarComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Snackbar
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/bottom-sheet"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconBottomSheetComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Bottom sheet
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
+          {COMPONENT_GROUPS.Layout.map((component) => {
+            const Icon =
+              Icons[
+                `Icon${component
+                  .split('-')
+                  .map((item) => item.charAt(0).toUpperCase() + item.slice(1))
+                  .join('')}Comp`
+              ]
+            return (
+              <Link
+                key={component}
+                className={css({ textDecoration: 'none' })}
+                href={`/components/${component}`}
+              >
+                <Card>
+                  <Center h="140px">
+                    <Icon className={css({ w: '100%' })} />
+                  </Center>
+                  <Flex
+                    alignItems="center"
+                    borderTop="1px solid $border"
+                    gap="10px"
+                    px="16px"
+                    py="12px"
+                  >
+                    <Text
+                      color="$text"
+                      textAlign="right"
+                      typography="buttonSmid"
+                    >
+                      {component
+                        .split('-')
+                        .map(
+                          (item) =>
+                            item.charAt(0).toUpperCase() + item.slice(1),
+                        )
+                        .join(' ')}
+                    </Text>
+                  </Flex>
+                </Card>
+              </Link>
+            )
+          })}
         </Grid>
       </VStack>
       <VStack gap="16px" overflow="visible" py="30px">
@@ -592,27 +154,49 @@ export default function Page() {
           ]}
           overflow="visible"
         >
-          <Link
-            className={css({ textDecoration: 'none' })}
-            href="/components/theme-button"
-          >
-            <Card>
-              <Center h="140px">
-                <Icons.IconThemeButtonComp className={css({ w: '100%' })} />
-              </Center>
-              <Flex
-                alignItems="center"
-                borderTop="1px solid $border"
-                gap="10px"
-                px="16px"
-                py="12px"
-              >
-                <Text color="$text" textAlign="right" typography="buttonSmid">
-                  Theme Button
-                </Text>
-              </Flex>
-            </Card>
-          </Link>
+          {COMPONENT_GROUPS.Theme.map((component) => {
+            const Icon =
+              Icons[
+                `Icon${component
+                  .split('-')
+                  .map((item) => item.charAt(0).toUpperCase() + item.slice(1))
+                  .join('')}Comp`
+              ]
+            return (
+              <Link
+                key={component}
+                className={css({ textDecoration: 'none' })}
+                href={`/components/${component}`}
+              >
+                <Card>
+                  <Center h="140px">
+                    <Icon className={css({ w: '100%' })} />
+                  </Center>
+                  <Flex
+                    alignItems="center"
+                    borderTop="1px solid $border"
+                    gap="10px"
+                    px="16px"
+                    py="12px"
+                  >
+                    <Text
+                      color="$text"
+                      textAlign="right"
+                      typography="buttonSmid"
+                    >
+                      {component
+                        .split('-')
+                        .map(
+                          (item) =>
+                            item.charAt(0).toUpperCase() + item.slice(1),
+                        )
+                        .join(' ')}
+                    </Text>
+                  </Flex>
+                </Card>
+              </Link>
+            )
+          })}
         </Grid>
       </VStack>
     </VStack>
diff --git a/apps/landing/src/components/Header/MobMenu.tsx b/apps/landing/src/components/Header/MobMenu.tsx
index 0189543e..32619e02 100644
--- a/apps/landing/src/components/Header/MobMenu.tsx
+++ b/apps/landing/src/components/Header/MobMenu.tsx
@@ -59,6 +59,7 @@ export function MobMenu() {
             textDecoration: 'none',
           })}
           href="/storybook/index.html"
+          prefetch={false}
         >
           <Flex alignItems="center" gap="4px" py="10px">
             <Text color="$title" textAlign="right" typography="buttonM">
diff --git a/apps/landing/src/components/Header/index.tsx b/apps/landing/src/components/Header/index.tsx
index 9ffb3ad5..402721d2 100644
--- a/apps/landing/src/components/Header/index.tsx
+++ b/apps/landing/src/components/Header/index.tsx
@@ -126,6 +126,7 @@ export function Header() {
               alignItems: 'center',
             })}
             href="/storybook/index.html"
+            prefetch={false}
             role="group"
           >
             <Menu keyword="storybook">Storybook</Menu>
diff --git a/apps/landing/src/components/icons/components/IconButtonComponent.tsx b/apps/landing/src/components/icons/components/IconButtonComp.tsx
similarity index 99%
rename from apps/landing/src/components/icons/components/IconButtonComponent.tsx
rename to apps/landing/src/components/icons/components/IconButtonComp.tsx
index 7d0a2b62..3c554d16 100644
--- a/apps/landing/src/components/icons/components/IconButtonComponent.tsx
+++ b/apps/landing/src/components/icons/components/IconButtonComp.tsx
@@ -3,7 +3,7 @@
 import { css, useTheme } from '@devup-ui/react'
 import { SVGProps } from 'react'
 
-export default function IconButtonComponent({
+export default function IconButtonComp({
   className,
   ...props
 }: SVGProps<SVGSVGElement>) {
diff --git a/apps/landing/src/components/icons/components/IconPagination.tsx b/apps/landing/src/components/icons/components/IconPaginationComp.tsx
similarity index 98%
rename from apps/landing/src/components/icons/components/IconPagination.tsx
rename to apps/landing/src/components/icons/components/IconPaginationComp.tsx
index 6eca1f17..61c78dae 100644
--- a/apps/landing/src/components/icons/components/IconPagination.tsx
+++ b/apps/landing/src/components/icons/components/IconPaginationComp.tsx
@@ -3,7 +3,7 @@
 import { css, useTheme } from '@devup-ui/react'
 import { SVGProps } from 'react'
 
-export default function IconPagination({
+export default function IconPaginationComp({
   className,
   ...props
 }: SVGProps<SVGSVGElement>) {
diff --git a/apps/landing/src/components/icons/components/IconProgressBar.tsx b/apps/landing/src/components/icons/components/IconProgressBarComp.tsx
similarity index 98%
rename from apps/landing/src/components/icons/components/IconProgressBar.tsx
rename to apps/landing/src/components/icons/components/IconProgressBarComp.tsx
index cc8b98ec..ccf2f898 100644
--- a/apps/landing/src/components/icons/components/IconProgressBar.tsx
+++ b/apps/landing/src/components/icons/components/IconProgressBarComp.tsx
@@ -3,7 +3,7 @@
 import { css, useTheme } from '@devup-ui/react'
 import { SVGProps } from 'react'
 
-export default function IconProgressBar({
+export default function IconProgressBarComp({
   className,
   ...props
 }: SVGProps<SVGSVGElement>) {
diff --git a/apps/landing/src/components/icons/components/IconTextAreaComp.tsx b/apps/landing/src/components/icons/components/IconTextareaComp.tsx
similarity index 99%
rename from apps/landing/src/components/icons/components/IconTextAreaComp.tsx
rename to apps/landing/src/components/icons/components/IconTextareaComp.tsx
index 5eb28586..6dd4f274 100644
--- a/apps/landing/src/components/icons/components/IconTextAreaComp.tsx
+++ b/apps/landing/src/components/icons/components/IconTextareaComp.tsx
@@ -3,7 +3,7 @@
 import { useTheme } from '@devup-ui/react'
 import { SVGProps } from 'react'
 
-export default function IconTextAreaComp({
+export default function IconTextareaComp({
   className,
   ...props
 }: {
diff --git a/apps/landing/src/components/icons/components/IconTextBoxComp.tsx b/apps/landing/src/components/icons/components/IconTextboxComp.tsx
similarity index 99%
rename from apps/landing/src/components/icons/components/IconTextBoxComp.tsx
rename to apps/landing/src/components/icons/components/IconTextboxComp.tsx
index e7b9a6aa..c533b381 100644
--- a/apps/landing/src/components/icons/components/IconTextBoxComp.tsx
+++ b/apps/landing/src/components/icons/components/IconTextboxComp.tsx
@@ -3,7 +3,7 @@
 import { css, useTheme } from '@devup-ui/react'
 import { SVGProps } from 'react'
 
-export default function IconTextBoxComp({
+export default function IconTextboxComp({
   className,
   ...props
 }: SVGProps<SVGSVGElement>) {
diff --git a/apps/landing/src/components/icons/components/index.ts b/apps/landing/src/components/icons/components/index.ts
index d49d60e1..68ef90d0 100644
--- a/apps/landing/src/components/icons/components/index.ts
+++ b/apps/landing/src/components/icons/components/index.ts
@@ -1,5 +1,7 @@
+import { SVGProps } from 'react'
+
 import IconBottomSheetComp from '@/components/icons/components/IconBottomSheetComp'
-import IconButtonComponent from '@/components/icons/components/IconButtonComponent'
+import IconButtonComp from '@/components/icons/components/IconButtonComp'
 import IconCheckboxComp from '@/components/icons/components/IconCheckboxComp'
 import IconColorPickerComp from '@/components/icons/components/IconColorPickerComp'
 import IconConfirmComp from '@/components/icons/components/IconConfirmComp'
@@ -9,8 +11,8 @@ import IconFooterComp from '@/components/icons/components/IconFooterComp'
 import IconHeaderComp from '@/components/icons/components/IconHeaderComp'
 import IconLabelComp from '@/components/icons/components/IconLabelComp'
 import IconMenuComp from '@/components/icons/components/IconMenuComp'
-import IconPagination from '@/components/icons/components/IconPagination'
-import IconProgressBar from '@/components/icons/components/IconProgressBar'
+import IconPaginationComp from '@/components/icons/components/IconPaginationComp'
+import IconProgressBarComp from '@/components/icons/components/IconProgressBarComp'
 import IconRadioComp from '@/components/icons/components/IconRadioComp'
 import IconSearchComp from '@/components/icons/components/IconSearchComp'
 import IconSelectComp from '@/components/icons/components/IconSelectComp'
@@ -18,16 +20,19 @@ import IconSliderComp from '@/components/icons/components/IconSliderComp'
 import IconSnackbarComp from '@/components/icons/components/IconSnackbarComp'
 import IconStepperComp from '@/components/icons/components/IconStepperComp'
 import IconTabComp from '@/components/icons/components/IconTabComp'
-import IconTextAreaComp from '@/components/icons/components/IconTextAreaComp'
-import IconTextBoxComp from '@/components/icons/components/IconTextBoxComp'
+import IconTextareaComp from '@/components/icons/components/IconTextareaComp'
+import IconTextboxComp from '@/components/icons/components/IconTextboxComp'
 import IconThemeButtonComp from '@/components/icons/components/IconThemeButtonComp'
 import IconToggleComp from '@/components/icons/components/IconToggleComp'
 import IconTooltipComp from '@/components/icons/components/IconTooltipComp'
 import IconUploaderComp from '@/components/icons/components/IconUploaderComp'
 
-export {
+export const Icons: Record<
+  string,
+  React.ComponentType<SVGProps<SVGSVGElement>>
+> = {
   IconBottomSheetComp,
-  IconButtonComponent,
+  IconButtonComp,
   IconCheckboxComp,
   IconColorPickerComp,
   IconConfirmComp,
@@ -37,8 +42,8 @@ export {
   IconHeaderComp,
   IconLabelComp,
   IconMenuComp,
-  IconPagination,
-  IconProgressBar,
+  IconPaginationComp,
+  IconProgressBarComp,
   IconRadioComp,
   IconSearchComp,
   IconSelectComp,
@@ -46,8 +51,8 @@ export {
   IconSnackbarComp,
   IconStepperComp,
   IconTabComp,
-  IconTextAreaComp,
-  IconTextBoxComp,
+  IconTextareaComp,
+  IconTextboxComp,
   IconThemeButtonComp,
   IconToggleComp,
   IconTooltipComp,
diff --git a/apps/landing/src/constants/index.ts b/apps/landing/src/constants/index.ts
new file mode 100644
index 00000000..b93c764b
--- /dev/null
+++ b/apps/landing/src/constants/index.ts
@@ -0,0 +1,32 @@
+export const COMPONENT_GROUPS = {
+  Form: [
+    'button',
+    'textbox',
+    'textarea',
+    'dropdown',
+    'radio',
+    'checkbox',
+    'stepper',
+    'toggle',
+    'slider',
+    'date-picker',
+    'color-picker',
+    'uploader',
+    'pagination',
+    'progress-bar',
+    'search',
+    'select',
+    'label',
+  ],
+  Layout: [
+    'footer',
+    'tooltip',
+    'tab',
+    'menu',
+    'header',
+    'confirm',
+    'snackbar',
+    'bottom-sheet',
+  ],
+  Theme: ['theme-button'],
+}