diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 8cfa1e4a..5a46634b 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -52,14 +52,14 @@ const preview: Preview = {
     },
   ],
   globalTypes: {
-    darkMode: {
-      description: 'Toggle dark mode',
-      defaultValue: 'dark',
+    theme: {
+      description: 'Theme for the components',
       toolbar: {
-        icon: 'circlehollow',
+        icon: 'paintbrush',
         items: [
-          { value: 'light', right: '☀️', title: 'Light Mode' },
-          { value: 'dark', right: '🌙', title: 'Dark Mode' },
+          { value: 'dark', right: '🌙', title: 'Dark' }, // default
+          { value: 'light', right: '☀️', title: 'Light' },
+          { value: 'system', right: '🖥️', title: 'System' },
         ],
       },
     },
diff --git a/README.md b/README.md
index d7d70ec8..1941e13f 100644
--- a/README.md
+++ b/README.md
@@ -65,6 +65,7 @@ See [docs/chromatic-setup.md](docs/chromatic-setup.md) for more details on our C
 #### Update PR Branches
 
 We provide a GitHub Actions workflow to automatically update open PR branches with the latest changes from `main`. This is useful for:
+
 - Keeping long-running PRs up-to-date
 - Reducing merge conflicts
 - Repository maintenance
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
index 0da552a1..c1c2be72 100644
--- a/components/Header/Header.tsx
+++ b/components/Header/Header.tsx
@@ -6,8 +6,10 @@ import React from 'react'
 import { FaDiscord, FaGithub } from 'react-icons/fa'
 import logoBluePng from '@/src/assets/images/logo_blue.png'
 import { useNextTranslation } from '@/src/hooks/i18n'
+import { themeConfig } from '@/utils/themeConfig'
 import { useFromUrlParam } from '../common/HOC/useFromUrl'
 import LanguageSwitcher from '../common/LanguageSwitcher'
+import ThemeSwitcher from '../common/ThemeSwitcher'
 import ProfileDropdown from './ProfileDropdown'
 
 interface HeaderProps {
@@ -32,9 +34,8 @@ const Header: React.FC<HeaderProps> = ({ isLoggedIn, title }) => {
   return (
     <Navbar
       fluid
-      className="mx-auto p-8"
+      className={`mx-auto p-8 ${themeConfig.header.background}`}
       style={{
-        backgroundColor: 'rgb(17 24 39)',
         paddingLeft: 0,
         paddingRight: 0,
       }}
@@ -47,23 +48,35 @@ const Header: React.FC<HeaderProps> = ({ isLoggedIn, title }) => {
           height={36}
           className="w-6 h-6 mr-3 sm:w-9 sm:h-9 rounded-lg"
         />
-        <span className="self-center text-xl font-semibold text-white whitespace-nowrap">
+        <span
+          className={`self-center text-xl font-semibold whitespace-nowrap ${themeConfig.header.text}`}
+        >
           {t('Comfy Registry')}
         </span>
       </Link>
-      <div className="flex items-center gap-2 bg-gray-900 md:order-2">
+      <div
+        className={`flex items-center gap-2 md:order-2 ${themeConfig.header.background}`}
+      >
         {isLoggedIn ? (
           <ProfileDropdown />
         ) : (
           <>
-            <Button onClick={handleLogIn} color="dark" size="xs">
-              <span className="text-white text-xs md:text-base">
-                {t('Login')}
-              </span>
+            <Button
+              onClick={handleLogIn}
+              size="xs"
+              className={`${themeConfig.button.login} border-0`}
+            >
+              <span className="text-xs md:text-base">{t('Login')}</span>
             </Button>
 
-            <Button onClick={handleSignUp} color="blue" size="xs">
-              <span className="text-xs md:text-base">{t('Signup')}</span>
+            <Button
+              onClick={handleSignUp}
+              size="xs"
+              className={`${themeConfig.button.signup} border-0`}
+            >
+              <span className="text-xs md:text-base text-white">
+                {t('Signup')}
+              </span>
             </Button>
           </>
         )}
@@ -73,16 +86,17 @@ const Header: React.FC<HeaderProps> = ({ isLoggedIn, title }) => {
               ? 'https://docs.comfy.org/zh-CN'
               : 'https://docs.comfy.org/registry/overview'
           }
-          color="blue"
           size="xs"
+          className={`${themeConfig.button.documentation} border-0`}
         >
-          <span className="text-white text-xs md:text-base">
+          <span className="text-xs md:text-base text-white">
             {t('Documentation')}
           </span>
         </Button>
 
         <Badge icon={DiscordIcon} color="gray" href="/discord" size="xs" />
 
+        <ThemeSwitcher />
         {/* place in the most-right to reduce ... when switching language  */}
         <LanguageSwitcher />
       </div>
diff --git a/components/Header/ProfileDropdown.tsx b/components/Header/ProfileDropdown.tsx
index 75806e50..7634e684 100644
--- a/components/Header/ProfileDropdown.tsx
+++ b/components/Header/ProfileDropdown.tsx
@@ -5,6 +5,7 @@ import { HiChevronDown } from 'react-icons/hi'
 import { useGetUser } from '@/src/api/generated'
 import { useNextTranslation } from '@/src/hooks/i18n'
 import { useFirebaseUser } from '@/src/hooks/useFirebaseUser'
+import { themeConfig } from '@/utils/themeConfig'
 import { useLogout } from '../AuthUI/Logout'
 
 export default function ProfileDropdown() {
@@ -13,6 +14,17 @@ export default function ProfileDropdown() {
   const [onSignOut, isSignoutLoading, error] = useLogout()
   const { data: user } = useGetUser()
 
+  // Custom theme for dropdown to match our theme configuration
+  const customDropdownTheme = {
+    floating: {
+      base: `z-10 w-fit rounded divide-y divide-gray-100 shadow focus:outline-none ${themeConfig.dropdown.background} ${themeConfig.dropdown.border}`,
+      content: 'py-1 text-sm',
+      item: {
+        base: `flex items-center justify-start py-2 px-4 text-sm cursor-pointer w-full ${themeConfig.dropdown.item}`,
+      },
+    },
+  }
+
   // // debug
   // return <>{JSON.stringify(useFirebaseUser(), null, 2)}</>
   const [firebaseUser] = useFirebaseUser()
@@ -22,6 +34,7 @@ export default function ProfileDropdown() {
     <Dropdown
       arrowIcon={false}
       inline
+      theme={customDropdownTheme}
       label={
         <div className="flex items-center gap-2">
           <Avatar
diff --git a/components/Search/SearchHit.tsx b/components/Search/SearchHit.tsx
index 4a1fda62..58126937 100644
--- a/components/Search/SearchHit.tsx
+++ b/components/Search/SearchHit.tsx
@@ -38,12 +38,12 @@ const Hit: React.FC<HitProps> = ({ hit }) => {
   )?.filter((e) => (e.matchedWords as string[])?.length)
   return (
     <Link
-      className="flex flex-col bg-gray-800 rounded-lg h-full dark:border-gray-700 p-4 shadow-md"
+      className="flex flex-col bg-gray-100 dark:bg-gray-800 rounded-lg h-full border border-gray-300 dark:border-gray-700 p-4 shadow-md"
       href={`/nodes/${hit.id}`}
       rel="noopener noreferrer"
     >
       <div className="flex flex-col flex-grow">
-        <h6 className="mb-2 text-base font-bold tracking-tight text-white break-words">
+        <h6 className="mb-2 text-base font-bold tracking-tight text-black dark:text-white break-words">
           <Snippet hit={hit} attribute="name" />
         </h6>
 
@@ -51,7 +51,7 @@ const Hit: React.FC<HitProps> = ({ hit }) => {
         <Markdown
           components={{
             p: ({ children }) => (
-              <p className="mb-1 text-xs font-light text-white mt-2 overflow-hidden text-ellipsis line-clamp-2">
+              <p className="mb-1 text-xs font-light text-black dark:text-white mt-2 overflow-hidden text-ellipsis line-clamp-2">
                 {children}
               </p>
             ),
@@ -64,7 +64,7 @@ const Hit: React.FC<HitProps> = ({ hit }) => {
 
         {/* nodes */}
         {hit.comfy_nodes?.length && (
-          <div className="mb-1 text-xs font-light text-white mt-2 flex-row flex gap-2 whitespace-nowrap overflow-hidden overflow-ellipsis">
+          <div className="mb-1 text-xs font-light text-black dark:text-white mt-2 flex-row flex gap-2 whitespace-nowrap overflow-hidden overflow-ellipsis">
             <Tooltip
               content={
                 <pre className="max-w-[20em] max-h-[8em] overflow-auto whitespace-pre-wrap break-all">
@@ -95,7 +95,7 @@ const Hit: React.FC<HitProps> = ({ hit }) => {
       </div>
       {/* meta info */}
       <p
-        className="text-xs font-light text-nowrap mt-2 text-gray-400"
+        className="text-xs font-light text-nowrap mt-2 text-gray-600 dark:text-gray-400"
         dir="ltr"
       >
         <PublisherId publisherId={hit.publisher_id} />
diff --git a/components/common/GenericHeader.tsx b/components/common/GenericHeader.tsx
index 8739934b..9dea974c 100644
--- a/components/common/GenericHeader.tsx
+++ b/components/common/GenericHeader.tsx
@@ -21,10 +21,10 @@ const GenericHeader: React.FC<Props> = ({
 }) => {
   return (
     <>
-      <h1 className="text-xl font-bold leading-tight tracking-tight text-white sm:text-4xl">
+      <h1 className="text-xl font-bold leading-tight tracking-tight text-black dark:text-white sm:text-4xl">
         {title}
       </h1>
-      <p className="pt-2 pb-4 font-light text-gray-500 text-lg dark:text-gray-400">
+      <p className="pt-2 pb-4 font-light text-gray-700 text-lg dark:text-gray-400">
         {subTitle}
       </p>
       <Link href={buttonLink}>
diff --git a/components/common/ThemeSwitcher.tsx b/components/common/ThemeSwitcher.tsx
new file mode 100644
index 00000000..6b017922
--- /dev/null
+++ b/components/common/ThemeSwitcher.tsx
@@ -0,0 +1,92 @@
+import { Dropdown, DropdownItem } from 'flowbite-react'
+import React from 'react'
+import { HiDesktopComputer, HiMoon, HiSun } from 'react-icons/hi'
+import { useNextTranslation } from '@/src/hooks/i18n'
+import { Theme, useTheme } from '@/src/hooks/useTheme'
+
+const ThemeIcon = ({
+  theme,
+  actualTheme,
+}: {
+  theme: Theme
+  actualTheme: 'light' | 'dark'
+}) => {
+  const icons = {
+    auto: <HiDesktopComputer className="w-4 h-4" />,
+    light: <HiSun className="w-4 h-4" />,
+    dark: <HiMoon className="w-4 h-4" />,
+  } satisfies Record<Theme, React.ReactNode>
+
+  if (theme in icons) {
+    return icons[theme]
+  }
+  throw new Error(`Unknown theme: ${theme}`)
+}
+
+export default function ThemeSwitcher() {
+  const { theme, actualTheme, setTheme } = useTheme()
+  const { t } = useNextTranslation()
+
+  const themeOptions: {
+    value: Theme
+    label: string
+    icon: React.ReactNode
+  }[] = [
+    {
+      value: 'auto',
+      label: t('Auto'),
+      icon: <HiDesktopComputer className="w-4 h-4" />,
+    },
+    {
+      value: 'light',
+      label: t('Light'),
+      icon: <HiSun className="w-4 h-4" />,
+    },
+    {
+      value: 'dark',
+      label: t('Dark'),
+      icon: <HiMoon className="w-4 h-4" />,
+    },
+  ]
+
+  const currentOption = themeOptions.find((option) => option.value === theme)
+
+  // Handle double-click to toggle between light and dark themes
+  const handleDoubleClick = () => {
+    if (actualTheme === 'light') {
+      setTheme('dark')
+    } else {
+      setTheme('light')
+    }
+  }
+
+  return (
+    <Dropdown
+      label=""
+      renderTrigger={() => (
+        <button
+          type="button"
+          className="inline-flex items-center justify-center p-2 w-8 h-8 text-sm text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+          aria-label="Toggle theme"
+          onDoubleClick={handleDoubleClick}
+        >
+          <ThemeIcon theme={theme} actualTheme={actualTheme} />
+        </button>
+      )}
+      color="gray"
+      size="xs"
+      dismissOnClick
+    >
+      {themeOptions.map((option) => (
+        <DropdownItem
+          key={option.value}
+          onClick={() => setTheme(option.value)}
+          className={`flex items-center gap-2 ${theme === option.value ? 'font-bold' : ''}`}
+        >
+          {option.icon}
+          {option.label}
+        </DropdownItem>
+      ))}
+    </Dropdown>
+  )
+}
diff --git a/components/common/UnifiedBreadcrumb.tsx b/components/common/UnifiedBreadcrumb.tsx
new file mode 100644
index 00000000..34d05287
--- /dev/null
+++ b/components/common/UnifiedBreadcrumb.tsx
@@ -0,0 +1,92 @@
+import { Breadcrumb } from 'flowbite-react'
+import { useRouter } from 'next/router'
+import React, { FC, SVGProps } from 'react'
+import { HiHome } from 'react-icons/hi'
+import { themeConfig } from '@/utils/themeConfig'
+
+interface BreadcrumbItem {
+  label: string
+  href?: string
+  onClick?: (e: React.MouseEvent) => void
+  icon?: FC<SVGProps<SVGSVGElement>>
+  isActive?: boolean
+}
+
+interface UnifiedBreadcrumbProps {
+  items: BreadcrumbItem[]
+  className?: string
+}
+
+const UnifiedBreadcrumb: React.FC<UnifiedBreadcrumbProps> = ({
+  items,
+  className = '',
+}) => {
+  const router = useRouter()
+
+  return (
+    <Breadcrumb className={`py-4 ${className}`}>
+      {items.map((item, index) => (
+        <Breadcrumb.Item
+          key={index}
+          href={item.href}
+          icon={item.icon}
+          onClick={item.onClick}
+          className={`${themeConfig.breadcrumb.link} ${
+            item.isActive ? 'text-blue-500 dark:text-blue-400' : ''
+          }`}
+        >
+          {item.label}
+        </Breadcrumb.Item>
+      ))}
+    </Breadcrumb>
+  )
+}
+
+export { UnifiedBreadcrumb }
+export default UnifiedBreadcrumb
+
+export const createHomeBreadcrumb = (t: (key: string) => string) => ({
+  label: t('Home'),
+  href: '/',
+  icon: HiHome,
+  onClick: (e: React.MouseEvent) => {
+    e.preventDefault()
+    window.location.href = '/'
+  },
+})
+
+export const createNodesBreadcrumb = (t: (key: string) => string) => ({
+  label: t('Your Nodes'),
+})
+
+export const createAllNodesBreadcrumb = (t: (key: string) => string) => ({
+  label: t('All Nodes'),
+})
+
+export const createNodeDetailBreadcrumb = (nodeId: string) => ({
+  label: nodeId,
+  isActive: true,
+})
+
+export const createPublisherBreadcrumb = (publisherName: string) => ({
+  label: publisherName,
+  isActive: true,
+})
+
+export const createAdminDashboardBreadcrumb = (
+  t: (key: string) => string,
+  isCurrentPage = false
+) => ({
+  label: t('Admin Dashboard'),
+  href: isCurrentPage ? undefined : '/admin',
+  onClick: isCurrentPage
+    ? undefined
+    : (e: React.MouseEvent) => {
+        e.preventDefault()
+        window.location.href = '/admin'
+      },
+})
+
+export const createUnclaimedNodesBreadcrumb = (t: (key: string) => string) => ({
+  label: t('Unclaimed Nodes'),
+})
diff --git a/components/nodes/NodeDetails.tsx b/components/nodes/NodeDetails.tsx
index 66ad713f..31e31b32 100644
--- a/components/nodes/NodeDetails.tsx
+++ b/components/nodes/NodeDetails.tsx
@@ -23,6 +23,7 @@ import {
 } from '@/src/api/generated'
 import nodesLogo from '@/src/assets/images/nodesLogo.svg'
 import { useNextTranslation } from '@/src/hooks/i18n'
+import { themeConfig } from '@/utils/themeConfig'
 import CopyableCodeBlock from '../CodeBlock/CodeBlock'
 import { NodeDeleteModal } from './NodeDeleteModal'
 import { NodeEditModal } from './NodeEditModal'
@@ -209,19 +210,23 @@ const NodeDetails = () => {
     // TODO: show error message and allow navigate back to the list
     return (
       <div className="flex justify-center items-center min-h-[calc(100vh-120px)]">
-        <section className="text-white bg-gray-900 whitespace-nowrap">
+        <section
+          className={`${themeConfig.nodeDetails.text} ${themeConfig.nodeDetails.background} whitespace-nowrap`}
+        >
           <div className="max-w-screen-xl px-4 py-8 mx-auto lg:px-6 lg:py-16">
             <div className="max-w-screen-sm mx-auto text-center">
               <h1 className="mb-4 text-5xl font-extrabold tracking-tight text-primary-600 dark:text-primary-500">
                 {t('Error loading node details')}
               </h1>
               {/* reason */}
-              <p className="mb-4 text-lg font-normal text-gray-400">
+              <p
+                className={`mb-4 text-lg font-normal ${themeConfig.nodeDetails.metaText}`}
+              >
                 {t('Reason')}:{' '}
                 {t('An unexpected error occurred. Please try again later.')}
               </p>
               {process.env.NODE_ENV === 'development' && (
-                <p className="text-sm text-gray-500">
+                <p className={`text-sm ${themeConfig.nodeDetails.metaText}`}>
                   {t('Debug info')}: {error.message}
                 </p>
               )}
@@ -240,7 +245,9 @@ const NodeDetails = () => {
   if (!node) {
     return (
       <div className="flex justify-center items-center min-h-[calc(100vh-120px)]">
-        <section className="text-white bg-gray-900 whitespace-nowrap">
+        <section
+          className={`${themeConfig.nodeDetails.text} ${themeConfig.nodeDetails.background} whitespace-nowrap`}
+        >
           <div className="max-w-screen-xl px-4 py-8 mx-auto lg:px-6 lg:py-16">
             <div className="max-w-screen-sm mx-auto text-center">
               <h1 className="mb-4 text-5xl font-extrabold tracking-tight text-primary-600 dark:text-primary-500">
@@ -256,7 +263,9 @@ const NodeDetails = () => {
   return (
     <>
       {/* TODO(sno): unwrap this div out of fragment in another PR */}
-      <div className="flex flex-wrap justify-between p-8 text-white bg-gray-900 rounded-md lg:flex-nowrap lg:justify-between lg:gap-12">
+      <div
+        className={`flex flex-wrap justify-between p-8 ${themeConfig.nodeDetails.background} ${themeConfig.nodeDetails.text} rounded-md lg:flex-nowrap lg:justify-between lg:gap-12`}
+      >
         <div className="w-full lg:w-1/5 ">
           <Image
             src={node?.icon || nodesLogo}
@@ -272,10 +281,14 @@ const NodeDetails = () => {
             <div className="">
               <div className="flex items-start justify-between">
                 <div>
-                  <h1 className="text-[48px] font-bold">{node.name}</h1>
+                  <h1
+                    className={`text-[48px] font-bold ${themeConfig.nodeDetails.text}`}
+                  >
+                    {node.name}
+                  </h1>
 
                   <p
-                    className="text-[18px] pt-2 text-gray-300 space-x-2"
+                    className={`text-[18px] pt-2 space-x-2 ${themeConfig.nodeDetails.text}`}
                     hidden={isUnclaimed}
                   >
                     {[
@@ -357,7 +370,9 @@ const NodeDetails = () => {
                                     </p>
                                 )} */}
                 {node.downloads != 0 && (
-                  <p className="flex items-center py-2 mt-1 text-xs text-gray-400">
+                  <p
+                    className={`flex items-center py-2 mt-1 text-xs ${themeConfig.nodeDetails.metaText}`}
+                  >
                     <svg
                       className="w-6 h-6"
                       aria-hidden="true"
@@ -408,7 +423,9 @@ const NodeDetails = () => {
               <div className="mt-5 mb-10">
                 <>
                   {isUnclaimed || !nodeVersions?.length ? (
-                    <p className="text-base font-normal text-gray-200">
+                    <p
+                      className={`text-base font-normal ${themeConfig.nodeDetails.text}`}
+                    >
                       {isUnclaimed
                         ? t(
                             "This node can only be installed via git, because it's unclaimed by any publisher"
@@ -441,28 +458,42 @@ const NodeDetails = () => {
                 </>
               </div>
               <div>
-                <h2 className="mb-2 text-lg font-bold">{t('Description')}</h2>
-                <p className="text-base font-normal text-gray-200">
+                <h2
+                  className={`mb-2 text-lg font-bold ${themeConfig.nodeDetails.text}`}
+                >
+                  {t('Description')}
+                </h2>
+                <p
+                  className={`text-base font-normal ${themeConfig.nodeDetails.text}`}
+                >
                   {node.description}
                 </p>
               </div>
               <div className="mt-10" hidden={isUnclaimed}>
-                <h2 className="mb-2 text-lg font-semibold">
+                <h2
+                  className={`mb-2 text-lg font-semibold ${themeConfig.nodeDetails.text}`}
+                >
                   {t('Version history')}
                 </h2>
                 <div className="w-2/3 mt-4 space-y-3 rounded-3xl">
                   {nodeVersions?.map((version, index) => (
                     <div
-                      className=" bg-gray-700 border-gray-500 border p-[32px] rounded-xl "
+                      className={`${themeConfig.nodeDetails.card} ${themeConfig.nodeDetails.cardBorder} border p-[32px] rounded-xl`}
                       key={index}
                     >
-                      <h3 className="text-base font-semibold text-gray-200">
+                      <h3
+                        className={`text-base font-semibold ${themeConfig.nodeDetails.cardText}`}
+                      >
                         {t('Version')} {version.version}
                       </h3>
-                      <p className="mt-3 text-sm font-normal text-gray-400 ">
+                      <p
+                        className={`mt-3 text-sm font-normal ${themeConfig.nodeDetails.metaText}`}
+                      >
                         <FormatRelativeDate date={version.createdAt || ''} />
                       </p>
-                      <div className="flex-grow mt-3 text-base font-normal text-gray-200 line-clamp-2">
+                      <div
+                        className={`flex-grow mt-3 text-base font-normal ${themeConfig.nodeDetails.cardText} line-clamp-2`}
+                      >
                         {version.changelog}
                       </div>
                       <div
diff --git a/components/nodes/NodeList.stories.tsx b/components/nodes/NodeList.stories.tsx
deleted file mode 100644
index fd3ea79d..00000000
--- a/components/nodes/NodeList.stories.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Meta, StoryObj } from '@storybook/nextjs-vite'
-import RegistryStory from '@/src/stories/RegistryStory'
-
-/**
- * Since the actual NodeList component from pages/index.tsx just renders the Registry component
- * that has external dependencies, we'll create a simplified version for Storybook
- */
-const NodeListStory = () => <RegistryStory />
-
-const meta = {
-  title: 'Pages/NodeList',
-  component: NodeListStory,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <div className="bg-gray-900 min-h-screen">
-        <Story />
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof NodeListStory>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {},
-}
diff --git a/components/publisher/CreatePublisherModal.tsx b/components/publisher/CreatePublisherModal.tsx
index 8791b3b2..e50202f1 100644
--- a/components/publisher/CreatePublisherModal.tsx
+++ b/components/publisher/CreatePublisherModal.tsx
@@ -1,9 +1,11 @@
-import { Modal } from 'flowbite-react'
+import { isAxiosError } from 'axios'
+import { Button, Card, Modal, TextInput } from 'flowbite-react'
 import { useRouter } from 'next/router'
-import React from 'react'
+import React, { useState } from 'react'
+import { toast } from 'react-toastify'
 import { useNextTranslation } from 'src/hooks/i18n'
-import { customThemeTModal } from 'utils/comfyTheme'
-import CreatePublisherFormContent from './CreatePublisherFormContent'
+import { customThemeTextInput, customThemeTModal } from 'utils/comfyTheme'
+import { useCreatePublisher, useValidatePublisher } from '@/src/api/generated'
 
 type CreatePublisherModalProps = {
   open: boolean
@@ -18,14 +20,51 @@ const CreatePublisherModal: React.FC<CreatePublisherModalProps> = ({
 }) => {
   const { t } = useNextTranslation()
   const router = useRouter()
+  const [username, setUsername] = useState('')
+  const [displayName, setDisplayName] = useState('')
+  const [publisherValidationError, setPublisherValidationError] = useState('')
 
-  const handleSuccess = (username: string) => {
-    if (onSuccess) {
-      onSuccess()
+  const {
+    data,
+    isLoading: isLoadingValidation,
+    error,
+  } = useValidatePublisher({
+    username: username,
+  })
+  const createPublisherMutation = useCreatePublisher()
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    createPublisherMutation.mutate(
+      {
+        data: {
+          id: username,
+          name: displayName,
+        },
+      },
+      {
+        onError: (error) => {
+          toast.error(t('Could not create publisher. Please try again.'))
+        },
+        onSuccess: () => {
+          toast.success('Publisher created successfully!')
+          if (onSuccess) {
+            onSuccess()
+          } else {
+            router.push(`/publishers/${username}`)
+          }
+        },
+      }
+    )
+  }
+
+  React.useEffect(() => {
+    if (isAxiosError(error)) {
+      setPublisherValidationError(error.response?.data?.message)
     } else {
-      router.push(`/publishers/${username}`)
+      setPublisherValidationError('')
     }
-  }
+  }, [error])
 
   return (
     <Modal
@@ -41,10 +80,80 @@ const CreatePublisherModal: React.FC<CreatePublisherModalProps> = ({
         {t('Create Publisher')}
       </Modal.Header>
       <Modal.Body className="!bg-gray-800">
-        <CreatePublisherFormContent
-          onSuccess={handleSuccess}
-          onCancel={onCloseModal}
-        />
+        <p className="flex justify-center text-sm font-medium text-gray-400 ">
+          {t(
+            'Register a publisher to begin distributing custom nodes on Comfy.'
+          )}
+        </p>
+
+        <form className="mt-4 space-y-4 lg:space-y-6" onSubmit={handleSubmit}>
+          <div>
+            <label className="block mb-1 text-xs font-bold text-white">
+              {t('Username')}
+            </label>
+            <TextInput
+              id="name"
+              placeholder={t('E.g. janedoe55')}
+              required
+              theme={customThemeTextInput}
+              type="text"
+              sizing="sm"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              color={
+                !isLoadingValidation && publisherValidationError
+                  ? 'failure'
+                  : 'success'
+              }
+              helperText={
+                <>
+                  {isLoadingValidation && <>{t('Checking username...')}</>}
+                  {!isLoadingValidation && publisherValidationError && (
+                    <>
+                      <span className="font-medium"></span>{' '}
+                      {publisherValidationError}
+                    </>
+                  )}
+                </>
+              }
+            />
+          </div>
+          <div>
+            <label className="block mb-1 text-xs font-bold text-white">
+              {t('Display Name')}
+            </label>
+            <TextInput
+              sizing="sm"
+              theme={customThemeTextInput}
+              id="displayName"
+              className="border-gray-700 "
+              placeholder={t('E.g. Jane Doe')}
+              required
+              type="text"
+              value={displayName}
+              onChange={(e) => setDisplayName(e.target.value)}
+            />
+          </div>
+
+          <div className="flex center gap-4">
+            <Button
+              type="button"
+              onClick={onCloseModal}
+              color="light"
+              className=" bg-gray-900"
+            >
+              <span className="text-white">{t('Cancel')}</span>
+            </Button>
+            <Button
+              type="submit"
+              color="blue"
+              size="sm"
+              disabled={isLoadingValidation || !!publisherValidationError}
+            >
+              {t('Create')}
+            </Button>
+          </div>
+        </form>
       </Modal.Body>
     </Modal>
   )
diff --git a/components/registry/Registry.stories.tsx b/components/registry/Registry.stories.tsx
deleted file mode 100644
index 6a8aef49..00000000
--- a/components/registry/Registry.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Meta, StoryObj } from '@storybook/nextjs-vite'
-import RegistryStory from '@/src/stories/RegistryStory'
-
-const meta = {
-  title: 'Pages/Registry',
-  component: RegistryStory,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <div className="bg-gray-900 min-h-screen">
-        <Story />
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof RegistryStory>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {},
-}
diff --git a/components/registry/Registry.tsx b/components/registry/Registry.tsx
index 969af9a1..6b029248 100644
--- a/components/registry/Registry.tsx
+++ b/components/registry/Registry.tsx
@@ -21,7 +21,7 @@ type RegistryProps = {}
 const Registry: React.FC<RegistryProps> = ({}) => {
   const { t } = useNextTranslation()
   return (
-    <div className="relative bg-gray-900 mb-12">
+    <div className="relative bg-white dark:bg-gray-900 mb-12">
       <GenericHeader
         title={t('Welcome to ComfyUI Registry')}
         subTitle={t('View nodes or sign in to create and publish your own')}
diff --git a/docs/update-pr-branches.md b/docs/update-pr-branches.md
index 92dfc5d3..4f72c576 100644
--- a/docs/update-pr-branches.md
+++ b/docs/update-pr-branches.md
@@ -18,23 +18,26 @@ The "Update PR Branches to Latest Main" workflow allows maintainers to automatic
 2. Click on "Update PR Branches to Latest Main" workflow
 3. Click the "Run workflow" button
 4. Configure options:
-   - **PR numbers**: Leave empty to update all open PRs, or specify comma-separated PR numbers (e.g., `220,224,226`)
-   - **Dry run**: Check this to see what would be updated without making changes
+    - **PR numbers**: Leave empty to update all open PRs, or specify comma-separated PR numbers (e.g., `220,224,226`)
+    - **Dry run**: Check this to see what would be updated without making changes
 5. Click "Run workflow"
 
 ### Via GitHub CLI
 
 Update all open PRs:
+
 ```bash
 gh workflow run update-pr-branches.yml
 ```
 
 Update specific PRs:
+
 ```bash
 gh workflow run update-pr-branches.yml -f pr_numbers="220,224,226"
 ```
 
 Dry run mode:
+
 ```bash
 gh workflow run update-pr-branches.yml -f dry_run=true
 ```
@@ -58,9 +61,9 @@ If the workflow detects merge conflicts:
 - The merge is aborted automatically
 - A comment is added to the PR noting manual intervention is needed
 - The PR author should:
-  1. Pull latest changes from main
-  2. Resolve conflicts locally
-  3. Push the resolved changes
+    1. Pull latest changes from main
+    2. Resolve conflicts locally
+    3. Push the resolved changes
 
 ## Limitations
 
@@ -80,16 +83,19 @@ If the workflow detects merge conflicts:
 ## Troubleshooting
 
 ### Workflow fails with permission error
+
 - Check that `GITHUB_TOKEN` has write permissions
 - Verify branch protection rules allow GitHub Actions to push
 
 ### PR not updated
+
 - Check workflow logs for specific error messages
 - Verify PR is in OPEN state
 - Ensure branch exists and is accessible
 - Check for merge conflicts reported in comments
 
 ### Push fails
+
 - Branch may have protection rules preventing push
 - PR might be from a forked repository
 - Network issues or rate limiting
@@ -104,16 +110,19 @@ If the workflow detects merge conflicts:
 ## Examples
 
 ### Example 1: Update all open PRs
+
 ```bash
 gh workflow run update-pr-branches.yml
 ```
 
 ### Example 2: Update specific PRs (220, 224, 226)
+
 ```bash
 gh workflow run update-pr-branches.yml -f pr_numbers="220,224,226"
 ```
 
 ### Example 3: Dry run to see what would be updated
+
 ```bash
 gh workflow run update-pr-branches.yml -f dry_run=true
 ```
diff --git a/locales/ar/common.json b/locales/ar/common.json
index 6c1f7e38..533d8d89 100644
--- a/locales/ar/common.json
+++ b/locales/ar/common.json
@@ -26,6 +26,7 @@
   "Are you sure you want to delete this node? This action cannot be undone.": "هل أنت متأكد أنك تريد حذف هذه العقدة؟ لا يمكن التراجع عن هذا الإجراء.",
   "Are you sure you want to delete this version? This action cannot be undone.": "هل أنت متأكد أنك تريد حذف هذا الإصدار؟ لا يمكن التراجع عن هذا الإجراء.",
   "Author": "المؤلف",
+  "Auto": "تلقائي",
   "Back to Node Details": "العودة إلى تفاصيل العقدة",
   "Back to node details": "العودة إلى تفاصيل العقدة",
   "Back to your nodes": "العودة إلى عقدك",
@@ -46,6 +47,7 @@
   "Checking username...": "جارٍ التحقق من اسم المستخدم...",
   "Choose which publisher account to use when claiming this node.": "اختر حساب الناشر الذي تريد استخدامه عند المطالبة بهذه العقدة.",
   "Choose which publisher account you want to use to claim this node.": "اختر حساب الناشر الذي تريد استخدامه للمطالبة بهذه العقدة.",
+  "Choose which publisher account you want to use to claim this node. You must be the owner of the GitHub repository": "اختر حساب الناشر الذي تريد استخدامه للمطالبة بهذه العقدة. يجب أن تكون مالك مستودع GitHub.",
   "Choose which publisher account you want to use to claim this node. You must be the owner of the GitHub repository at": "اختر حساب الناشر الذي تريد استخدامه للمطالبة بهذه العقدة. يجب أن تكون مالك مستودع GitHub في",
   "Claim Node": "مطالبة بالعقدة",
   "Claim Node (WIP)": "مطالبة بالعقدة (قيد العمل)",
@@ -95,6 +97,7 @@
   "Create a new secret key": "إنشاء مفتاح سر جديد",
   "Created": "تم الإنشاء",
   "Current Preempted Comfy Node Names": "أسماء عقد Comfy المحجوزة الحالية",
+  "Dark": "داكن",
   "Debug info": "معلومات التصحيح",
   "Delete": "حذف",
   "Delete Node": "حذف العقدة",
@@ -192,6 +195,7 @@
   "Latest version information not available": "معلومات الإصدارات الأحدث غير متاحة",
   "Latest: {{version}}": "الأحدث: {{version}}",
   "License": "رخصة",
+  "Light": "فاتح",
   "Live": "مباشر",
   "Loading Publisher Selection": "جارٍ تحميل اختيار الناشر",
   "Loading...": "جارٍ التحميل...",
@@ -261,6 +265,7 @@
   "Preempted Comfy Node Names": "أسماء العقد المحجوزة لـ Comfy",
   "Preempted Comfy Node Names Management": "إدارة أسماء العقد المحجوزة لـ Comfy",
   "Preempted Comfy Node Names: List of names that should be treated as the same comfy-node. This helps maintain consistent search results across differently named nodes.": "أسماء العقد المحجوزة لـ Comfy: قائمة بالأسماء التي يجب معاملتها كالعقدة المُريحة نفسها. هذا يساعد في الحفاظ على نتائج بحث متسقة عبر العقد المختلفة الأسماء.",
+  "Preempted ComfyUI Node Names": "أسماء عقد ComfyUI المحجوزة",
   "Preempted Names": "أسماء محجوزة",
   "Preempted comfy node names updated successfully": "تم تحديث أسماء العقد المحجوزة لـ Comfy بنجاح",
   "Press Ctrl+Enter to save": "اضغط Ctrl+Enter للحفظ",
diff --git a/locales/en/common.json b/locales/en/common.json
index 054a2f57..33c793b3 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -14,7 +14,6 @@
   "Admin Dashboard": "Admin Dashboard",
   "Admin Navigation": "Admin Navigation",
   "All": "All",
-  "All Nodes": "All Nodes",
   "All Tags": "All Tags",
   "Already Claimed": "Already Claimed",
   "An unexpected error occurred while claiming the node.": "An unexpected error occurred while claiming the node.",
@@ -26,6 +25,7 @@
   "Are you sure you want to delete this node? This action cannot be undone.": "Are you sure you want to delete this node? This action cannot be undone.",
   "Are you sure you want to delete this version? This action cannot be undone.": "Are you sure you want to delete this version? This action cannot be undone.",
   "Author": "Author",
+  "Auto": "Auto",
   "Back to Node Details": "Back to Node Details",
   "Back to node details": "Back to node details",
   "Back to your nodes": "Back to your nodes",
@@ -46,6 +46,7 @@
   "Checking username...": "Checking username...",
   "Choose which publisher account to use when claiming this node.": "Choose which publisher account to use when claiming this node.",
   "Choose which publisher account you want to use to claim this node.": "Choose which publisher account you want to use to claim this node.",
+  "Choose which publisher account you want to use to claim this node. You must be the owner of the GitHub repository": "Choose which publisher account you want to use to claim this node. You must be the owner of the GitHub repository",
   "Choose which publisher account you want to use to claim this node. You must be the owner of the GitHub repository at": "Choose which publisher account you want to use to claim this node. You must be the owner of the GitHub repository at",
   "Claim Node": "Claim Node",
   "Claim Node (WIP)": "Claim Node (WIP)",
@@ -95,6 +96,7 @@
   "Create a new secret key": "Create a new secret key",
   "Created": "Created",
   "Current Preempted Comfy Node Names": "Current Preempted Comfy Node Names",
+  "Dark": "Dark",
   "Debug info": "Debug info",
   "Delete": "Delete",
   "Delete Node": "Delete Node",
@@ -192,6 +194,7 @@
   "Latest version information not available": "Latest version information not available",
   "Latest: {{version}}": "Latest: {{version}}",
   "License": "License",
+  "Light": "Light",
   "Live": "Live",
   "Loading Publisher Selection": "Loading Publisher Selection",
   "Loading...": "Loading...",
@@ -261,6 +264,7 @@
   "Preempted Comfy Node Names": "Preempted Comfy Node Names",
   "Preempted Comfy Node Names Management": "Preempted Comfy Node Names Management",
   "Preempted Comfy Node Names: List of names that should be treated as the same comfy-node. This helps maintain consistent search results across differently named nodes.": "Preempted Comfy Node Names: List of names that should be treated as the same comfy-node. This helps maintain consistent search results across differently named nodes.",
+  "Preempted ComfyUI Node Names": "Preempted ComfyUI Node Names",
   "Preempted Names": "Preempted Names",
   "Preempted comfy node names updated successfully": "Preempted comfy node names updated successfully",
   "Press Ctrl+Enter to save": "Press Ctrl+Enter to save",
diff --git a/locales/es/common.json b/locales/es/common.json
index ec8f0fbe..7d07901b 100644
--- a/locales/es/common.json
+++ b/locales/es/common.json
@@ -14,7 +14,7 @@
   "Admin Dashboard": "Tablero de Administrador",
   "Admin Navigation": "Navegación de administrador",
   "All": "Todos",
-  "All Nodes": "Todos los Nodos",
+  "All Nodes": "Todos los nodos",
   "All Tags": "Todas las Etiquetas",
   "Already Claimed": "Ya Reclamado",
   "An unexpected error occurred while claiming the node.": "Ocurrió un error inesperado al reclamar el nodo.",
@@ -26,6 +26,7 @@
   "Are you sure you want to delete this node? This action cannot be undone.": "¿Estás seguro de que quieres eliminar este nodo? Esta acción no se puede deshacer.",
   "Are you sure you want to delete this version? This action cannot be undone.": "¿Estás seguro de que quieres eliminar esta versión? Esta acción no puede deshacerse.",
   "Author": "Autor",
+  "Auto": "Auto",
   "Back to Node Details": "Volver a los detalles del nodo",
   "Back to node details": "Volver a los detalles del nodo",
   "Back to your nodes": "Volver a tus nodos",
@@ -46,6 +47,7 @@
   "Checking username...": "Verificando nombre de usuario...",
   "Choose which publisher account to use when claiming this node.": "Elija qué cuenta de editor utilizar al reclamar este nodo.",
   "Choose which publisher account you want to use to claim this node.": "Elija qué cuenta de editor desea utilizar para reclamar este nodo.",
+  "Choose which publisher account you want to use to claim this node. You must be the owner of the GitHub repository": "Elija qué cuenta de editor desea utilizar para reclamar este nodo. Debe ser el propietario del repositorio de GitHub.",
   "Choose which publisher account you want to use to claim this node. You must be the owner of the GitHub repository at": "Elija qué cuenta de editor desea utilizar para reclamar este nodo. Debe ser el propietario del repositorio de GitHub en",
   "Claim Node": "Reclamar Nodo",
   "Claim Node (WIP)": "Reclamar Nodo (WIP)",
@@ -95,6 +97,7 @@
   "Create a new secret key": "Crear una nueva clave secreta",
   "Created": "Creado",
   "Current Preempted Comfy Node Names": "Nombre de nodos comodos previamente reservados",
+  "Dark": "Oscuro",
   "Debug info": "Depuración de información",
   "Delete": "Eliminar",
   "Delete Node": "Eliminar Nodo",
@@ -192,6 +195,7 @@
   "Latest version information not available": "Información de la última versión no disponible",
   "Latest: {{version}}": "Última versión: {{version}}",
   "License": "Licencia",
+  "Light": "Luz",
   "Live": "En Vivo",
   "Loading Publisher Selection": "Cargando selección de editor",
   "Loading...": "Cargando...",
@@ -261,6 +265,7 @@
   "Preempted Comfy Node Names": "Nombres de Nodo Comfy Anticipados",
   "Preempted Comfy Node Names Management": "Gestión de Nombres de Nodos Comfy Preempted",
   "Preempted Comfy Node Names: List of names that should be treated as the same comfy-node. This helps maintain consistent search results across differently named nodes.": "Nombres de nodos Comfy preemtidos: lista de nombres que deben tratarse como el mismo nodo cómodo. Esto ayuda a mantener resultados de búsqueda consistentes en nodos con diferentes nombres.",
+  "Preempted ComfyUI Node Names": "Nombres de Nodo ComfyUI Anticipados",
   "Preempted Names": "Nombres Preemptivos",
   "Preempted comfy node names updated successfully": "Los nombres de los nodos cómodos preasignados se han actualizado correctamente",
   "Press Ctrl+Enter to save": "Presiona Ctrl+Enter para guardar",
diff --git a/locales/fr/common.json b/locales/fr/common.json
index ac3f8dd2..9e724525 100644
--- a/locales/fr/common.json
+++ b/locales/fr/common.json
@@ -26,6 +26,7 @@
   "Are you sure you want to delete this node? This action cannot be undone.": "Êtes-vous sûr de vouloir supprimer ce nœud? Cette action ne peut pas être annulée.",
   "Are you sure you want to delete this version? This action cannot be undone.": "Êtes-vous sûr de vouloir supprimer cette version ? Cette action ne peut pas être annulée.",
   "Author": "Auteur",
+  "Auto": "Auto",
   "Back to Node Details": "Retour aux détails du nœud",
   "Back to node details": "Retour aux détails du nœud",
   "Back to your nodes": "Retour à vos nœuds",
@@ -46,6 +47,7 @@
   "Checking username...": "Vérification du nom d'utilisateur...",
   "Choose which publisher account to use when claiming this node.": "Choisissez quel compte éditeur utiliser lors de la revendication de ce nœud.",
   "Choose which publisher account you want to use to claim this node.": "Choisissez quel compte éditeur vous souhaitez utiliser pour revendiquer ce nœud.",
+  "Choose which publisher account you want to use to claim this node. You must be the owner of the GitHub repository": "Choisissez quel compte éditeur vous souhaitez utiliser pour revendiquer ce nœud. Vous devez être le propriétaire du dépôt GitHub",
   "Choose which publisher account you want to use to claim this node. You must be the owner of the GitHub repository at": "Choisissez quel compte éditeur vous souhaitez utiliser pour revendiquer ce nœud. Vous devez être le propriétaire du dépôt GitHub à",
   "Claim Node": "Revendiquer le Nœud",
   "Claim Node (WIP)": "Revendiquer le Nœud (en cours)",
@@ -95,6 +97,7 @@
   "Create a new secret key": "Créer une nouvelle clé secrète",
   "Created": "Créé",
   "Current Preempted Comfy Node Names": "Noms de nœuds Comfy préemptés actuels",
+  "Dark": "Sombre",
   "Debug info": "Informations de débogage",
   "Delete": "Supprimer",
   "Delete Node": "Supprimer le nœud",
@@ -192,6 +195,7 @@
   "Latest version information not available": "Informations sur la dernière version non disponibles",
   "Latest: {{version}}": "Dernière: {{version}}",
   "License": "Licence",
+  "Light": "Clair",
   "Live": "En direct",
   "Loading Publisher Selection": "Chargement de la sélection de l'éditeur",
   "Loading...": "Chargement...",
@@ -261,6 +265,7 @@
   "Preempted Comfy Node Names": "Noms de Nœuds Comfy Préemptés",
   "Preempted Comfy Node Names Management": "Gestion des noms de nœuds Comfy préemptés",
   "Preempted Comfy Node Names: List of names that should be treated as the same comfy-node. This helps maintain consistent search results across differently named nodes.": "Noms de nœuds Comfy préemptés : Liste de noms qui doivent être traités comme le même nœud Comfy. Cela aide à maintenir des résultats de recherche cohérents parmi des nœuds nommés différemment.",
+  "Preempted ComfyUI Node Names": "Noms de Nœuds ComfyUI Préemptés",
   "Preempted Names": "Noms Préemptés",
   "Preempted comfy node names updated successfully": "Les noms de nœuds comfy préemptés ont été mis à jour avec succès",
   "Press Ctrl+Enter to save": "Appuyez sur Ctrl+Entrée pour enregistrer",
diff --git a/locales/ja/common.json b/locales/ja/common.json
index f6d5b555..2c67800d 100644
--- a/locales/ja/common.json
+++ b/locales/ja/common.json
@@ -26,6 +26,7 @@
   "Are you sure you want to delete this node? This action cannot be undone.": "このノードを削除してもよろしいですか？この操作は取り消すことができません。",
   "Are you sure you want to delete this version? This action cannot be undone.": "このバージョンを削除してもよろしいですか？この操作は元に戻せません。",
   "Author": "作者",
+  "Auto": "自動",
   "Back to Node Details": "ノード詳細に戻る",
   "Back to node details": "ノードの詳細に戻る",
   "Back to your nodes": "あなたのノードへ戻る",
@@ -46,6 +47,7 @@
   "Checking username...": "ユーザー名を確認中...",
   "Choose which publisher account to use when claiming this node.": "このノードを請求する際に使用するパブリッシャーアカウントを選択してください。",
   "Choose which publisher account you want to use to claim this node.": "このノードを請求するために使用したいパブリッシャーアカウントを選択してください。",
+  "Choose which publisher account you want to use to claim this node. You must be the owner of the GitHub repository": "このノードを請求するために使用したいパブリッシャーアカウントを選択してください。あなたはGitHubリポジトリの所有者である必要があります。",
   "Choose which publisher account you want to use to claim this node. You must be the owner of the GitHub repository at": "このノードを請求するために使用したいパブリッシャーアカウントを選択してください。あなたはGitHubリポジトリの所有者である必要があります。",
   "Claim Node": "ノードを請求する",
   "Claim Node (WIP)": "クレームノード（作業中）",
@@ -95,6 +97,7 @@
   "Create a new secret key": "新しい秘密鍵を作成する",
   "Created": "作成済み",
   "Current Preempted Comfy Node Names": "現在の先取りされたComfyノード名",
+  "Dark": "暗い",
   "Debug info": "デバッグ情報",
   "Delete": "削除",
   "Delete Node": "ノードを削除",
@@ -192,6 +195,7 @@
   "Latest version information not available": "最新バージョン情報が利用できません",
   "Latest: {{version}}": "最新: {{version}}",
   "License": "ライセンス",
+  "Light": "ライト",
   "Live": "ライブ",
   "Loading Publisher Selection": "パブリッシャー選択を読み込み中",
   "Loading...": "読み込み中...",
@@ -261,6 +265,7 @@
   "Preempted Comfy Node Names": "先取りされたComfyノード名",
   "Preempted Comfy Node Names Management": "先取りされたComfyノード名の管理",
   "Preempted Comfy Node Names: List of names that should be treated as the same comfy-node. This helps maintain consistent search results across differently named nodes.": "\"先取りされたComfyノード名：同じComfyノードとして扱うべき名前のリスト。これにより、名前が異なるノード間で検索結果の一貫性が保たれます。\"",
+  "Preempted ComfyUI Node Names": "先取りされたComfyUIノード名",
   "Preempted Names": "先取りされた名前",
   "Preempted comfy node names updated successfully": "先取りされたComfyノード名が正常に更新されました",
   "Press Ctrl+Enter to save": "Ctrl+Enter を押して保存",
diff --git a/locales/ko/common.json b/locales/ko/common.json
index 434d8efd..9e4c7978 100644
--- a/locales/ko/common.json
+++ b/locales/ko/common.json
@@ -26,6 +26,7 @@
   "Are you sure you want to delete this node? This action cannot be undone.": "이 노드를 삭제하시겠습니까? 이 작업은 취소할 수 없습니다.",
   "Are you sure you want to delete this version? This action cannot be undone.": "이 버전을 삭제하시겠습니까? 이 작업은 취소할 수 없습니다.",
   "Author": "저자",
+  "Auto": "자동",
   "Back to Node Details": "노드 세부 정보로 돌아가기",
   "Back to node details": "노드 세부 정보로 돌아가기",
   "Back to your nodes": "당신의 노드로 돌아가기",
@@ -46,6 +47,7 @@
   "Checking username...": "사용자 이름 확인 중...",
   "Choose which publisher account to use when claiming this node.": "이 노드를 청구할 때 사용할 발행인 계정을 선택하세요.",
   "Choose which publisher account you want to use to claim this node.": "이 노드를 청구할 때 사용할 발행인 계정을 선택하세요.",
+  "Choose which publisher account you want to use to claim this node. You must be the owner of the GitHub repository": "이 노드를 청구할 때 사용할 발행인 계정을 선택하세요. GitHub 저장소의 소유자여야 합니다.",
   "Choose which publisher account you want to use to claim this node. You must be the owner of the GitHub repository at": "이 노드를 청구할 때 사용할 발행인 계정을 선택하세요. GitHub 저장소의 소유자여야 합니다.",
   "Claim Node": "노드 청구",
   "Claim Node (WIP)": "노드 청구 (작업 진행 중)",
@@ -95,6 +97,7 @@
   "Create a new secret key": "새로운 비밀 키를 생성하세요",
   "Created": "생성됨",
   "Current Preempted Comfy Node Names": "현재 사전 점유된 Comfy 노드 이름",
+  "Dark": "어두운",
   "Debug info": "디버그 정보",
   "Delete": "삭제",
   "Delete Node": "노드 삭제",
@@ -192,6 +195,7 @@
   "Latest version information not available": "최신 버전 정보를 사용할 수 없습니다",
   "Latest: {{version}}": "최신 버전: {{version}}",
   "License": "라이센스",
+  "Light": "라이트",
   "Live": "실시간",
   "Loading Publisher Selection": "게시자 선택 로드 중",
   "Loading...": "로딩 중...",
@@ -261,6 +265,7 @@
   "Preempted Comfy Node Names": "사전 점유된 Comfy 노드 이름",
   "Preempted Comfy Node Names Management": "사전 점유된 Comfy 노드 이름 관리",
   "Preempted Comfy Node Names: List of names that should be treated as the same comfy-node. This helps maintain consistent search results across differently named nodes.": "사전 점유된 Comfy 노드 이름: 같은 comfy-node로 처리해야 하는 이름 목록입니다. 이는 이름이 다른 노드 간에 일관된 검색 결과를 유지하는 데 도움이 됩니다.",
+  "Preempted ComfyUI Node Names": "사전 점유된 ComfyUI 노드 이름",
   "Preempted Names": "사전 점유된 이름",
   "Preempted comfy node names updated successfully": "사전 점유된 Comfy 노드 이름이 성공적으로 업데이트되었습니다",
   "Press Ctrl+Enter to save": "Ctrl+Enter를 눌러 저장",
diff --git a/locales/ru/common.json b/locales/ru/common.json
index 47fa10fb..8a69a4ea 100644
--- a/locales/ru/common.json
+++ b/locales/ru/common.json
@@ -26,6 +26,7 @@
   "Are you sure you want to delete this node? This action cannot be undone.": "Вы уверены, что хотите удалить этот узел? Это действие нельзя отменить.",
   "Are you sure you want to delete this version? This action cannot be undone.": "Вы уверены, что хотите удалить эту версию? Это действие нельзя отменить.",
   "Author": "Автор",
+  "Auto": "Авто",
   "Back to Node Details": "Вернуться к деталям узла",
   "Back to node details": "Вернуться к деталям узла",
   "Back to your nodes": "Вернуться к вашим узлам",
@@ -46,6 +47,7 @@
   "Checking username...": "Проверка имени пользователя...",
   "Choose which publisher account to use when claiming this node.": "Выберите, каким аккаунтом издателя воспользоваться при заявке на этот узел.",
   "Choose which publisher account you want to use to claim this node.": "Выберите, каким аккаунтом издателя вы хотите воспользоваться, чтобы заявить на этот узел.",
+  "Choose which publisher account you want to use to claim this node. You must be the owner of the GitHub repository": "Выберите, каким аккаунтом издателя вы хотите воспользоваться, чтобы заявить на этот узел. Вы должны быть владельцем репозитория GitHub.",
   "Choose which publisher account you want to use to claim this node. You must be the owner of the GitHub repository at": "Выберите, каким аккаунтом издателя вы хотите воспользоваться, чтобы заявить на этот узел. Вы должны быть владельцем репозитория GitHub на",
   "Claim Node": "Заявить на узел",
   "Claim Node (WIP)": "Заявить на узел (в разработке)",
@@ -95,6 +97,7 @@
   "Create a new secret key": "Создать новый секретный ключ",
   "Created": "Создано",
   "Current Preempted Comfy Node Names": "Текущие замещенные имена узлов Comfy",
+  "Dark": "Тёмный",
   "Debug info": "Отладочная информация",
   "Delete": "Удалить",
   "Delete Node": "Удалить узел",
@@ -192,6 +195,7 @@
   "Latest version information not available": "Информация о последней версии недоступна",
   "Latest: {{version}}": "Последняя версия: {{version}}",
   "License": "Лицензия",
+  "Light": "Светлый",
   "Live": "Активный",
   "Loading Publisher Selection": "Загрузка выбора издателя",
   "Loading...": "Загрузка...",
@@ -261,6 +265,7 @@
   "Preempted Comfy Node Names": "Замещенные имена узлов Comfy",
   "Preempted Comfy Node Names Management": "Управление замещенными именами узлов Comfy",
   "Preempted Comfy Node Names: List of names that should be treated as the same comfy-node. This helps maintain consistent search results across differently named nodes.": "Замещенные имена узлов Comfy: Список имен, которые должны рассматриваться как один и тот же comfy-узел. Это помогает поддерживать согласованные результаты поиска для узлов с разными именами.",
+  "Preempted ComfyUI Node Names": "Замещенные имена узлов ComfyUI",
   "Preempted Names": "Замещенные имена",
   "Preempted comfy node names updated successfully": "Замещенные имена узлов comfy успешно обновлены",
   "Press Ctrl+Enter to save": "Нажмите Ctrl+Enter, чтобы сохранить",
diff --git a/locales/tr/common.json b/locales/tr/common.json
index 315aac29..131a38a4 100644
--- a/locales/tr/common.json
+++ b/locales/tr/common.json
@@ -26,6 +26,7 @@
   "Are you sure you want to delete this node? This action cannot be undone.": "Bu düğümü silmek istediğinizden emin misiniz? Bu işlem geri alınamaz.",
   "Are you sure you want to delete this version? This action cannot be undone.": "Bu sürümü silmek istediğinizden emin misiniz? Bu işlem geri alınamaz.",
   "Author": "Yazar",
+  "Auto": "Otomatik",
   "Back to Node Details": "Düğüm Detaylarına Geri Dön",
   "Back to node details": "Düğüm detaylarına geri dön",
   "Back to your nodes": "Sizin Düğümlerinize Geri Dön",
@@ -46,6 +47,7 @@
   "Checking username...": "Kullanıcı adı kontrol ediliyor...",
   "Choose which publisher account to use when claiming this node.": "Bu düğümü sahiplenirken hangi yayıncı hesabını kullanacağınızı seçin.",
   "Choose which publisher account you want to use to claim this node.": "Bu düğümü sahiplenmek için hangi yayıncı hesabını kullanmak istediğinizi seçin.",
+  "Choose which publisher account you want to use to claim this node. You must be the owner of the GitHub repository": "Bu düğümü sahiplenmek için hangi yayıncı hesabını kullanmak istediğinizi seçin. GitHub deposunun sahibi olmalısınız.",
   "Choose which publisher account you want to use to claim this node. You must be the owner of the GitHub repository at": "Bu düğümü sahiplenmek için hangi yayıncı hesabını kullanmak istediğinizi seçin. GitHub deposunun sahibi olmalısınız.",
   "Claim Node": "Düğüm Sahiplen",
   "Claim Node (WIP)": "Düğüm Sahiplen (Çalışma Aşamasında)",
@@ -95,6 +97,7 @@
   "Create a new secret key": "Yeni bir gizli anahtar oluştur",
   "Created": "Oluşturuldu",
   "Current Preempted Comfy Node Names": "Mevcut Öncelikli Comfy Düğüm İsimleri",
+  "Dark": "Koyu",
   "Debug info": "Hata ayıklama bilgisi",
   "Delete": "Sil",
   "Delete Node": "Düğümü Sil",
@@ -192,6 +195,7 @@
   "Latest version information not available": "En son sürüm bilgisi mevcut değil",
   "Latest: {{version}}": "En Son: {{version}}",
   "License": "Lisans",
+  "Light": "Açık",
   "Live": "Canlı",
   "Loading Publisher Selection": "Yayıncı Seçimi Yükleniyor",
   "Loading...": "Yükleniyor...",
@@ -261,6 +265,7 @@
   "Preempted Comfy Node Names": "Öncelikli Comfy Düğüm İsimleri",
   "Preempted Comfy Node Names Management": "Öncelikli Comfy Düğüm İsimleri Yönetimi",
   "Preempted Comfy Node Names: List of names that should be treated as the same comfy-node. This helps maintain consistent search results across differently named nodes.": "Öncelikli Comfy Düğüm İsimleri: Aynı comfy-düğüm olarak kabul edilmesi gereken isimlerin listesi. Bu, farklı İsimlendirilmiş düğümler arasında tutarlı arama sonuçlarını sürdürmeye yardımcı olur.",
+  "Preempted ComfyUI Node Names": "Öncelikli ComfyUI Düğüm İsimleri",
   "Preempted Names": "Öncelikli İsimler",
   "Preempted comfy node names updated successfully": "Öncelikli Comfy düğüm isimleri başarıyla güncellendi",
   "Press Ctrl+Enter to save": "Kaydetmek için Ctrl+Enter tuşlarına basın",
diff --git a/locales/zh/common.json b/locales/zh/common.json
index ed78e239..537bfaed 100644
--- a/locales/zh/common.json
+++ b/locales/zh/common.json
@@ -26,6 +26,7 @@
   "Are you sure you want to delete this node? This action cannot be undone.": "您确定要删除此节点吗？此操作无法撤销。",
   "Are you sure you want to delete this version? This action cannot be undone.": "您确定要删除此版本吗？此操作无法撤销。",
   "Author": "作者",
+  "Auto": "自动",
   "Back to Node Details": "返回节点详情",
   "Back to node details": "返回到节点详情",
   "Back to your nodes": "返回到您的节点",
@@ -46,6 +47,7 @@
   "Checking username...": "正在检查用户名...",
   "Choose which publisher account to use when claiming this node.": "选择在认领此节点时要使用的发布者账户。",
   "Choose which publisher account you want to use to claim this node.": "选择要用来认领此节点的发布者账户。",
+  "Choose which publisher account you want to use to claim this node. You must be the owner of the GitHub repository": "选择要用来认领此节点的发布者账户。您必须是 GitHub 仓库的所有者。",
   "Choose which publisher account you want to use to claim this node. You must be the owner of the GitHub repository at": "选择要用来认领此节点的发布者账户。您必须是 GitHub 仓库的所有者。",
   "Claim Node": "认领节点",
   "Claim Node (WIP)": "认领节点（进行中）",
@@ -95,6 +97,7 @@
   "Create a new secret key": "创建新的密钥",
   "Created": "已创建",
   "Current Preempted Comfy Node Names": "当前预占Comfy节点名称",
+  "Dark": "暗色",
   "Debug info": "调试信息",
   "Delete": "删除",
   "Delete Node": "删除节点",
@@ -192,6 +195,7 @@
   "Latest version information not available": "最新版本信息不可用",
   "Latest: {{version}}": "最新版本：{{version}}",
   "License": "许可证",
+  "Light": "光",
   "Live": "直播",
   "Loading Publisher Selection": "加载发布者选择",
   "Loading...": "加载中...",
@@ -261,6 +265,7 @@
   "Preempted Comfy Node Names": "预占Comfy节点名称",
   "Preempted Comfy Node Names Management": "预占Comfy节点名称管理",
   "Preempted Comfy Node Names: List of names that should be treated as the same comfy-node. This helps maintain consistent search results across differently named nodes.": "预占Comfy节点名称：应视为相同comfy节点的名称列表。这有助于在名字不同的节点之间保持一致的搜索结果。",
+  "Preempted ComfyUI Node Names": "预占ComfyUI节点名称",
   "Preempted Names": "预占名称",
   "Preempted comfy node names updated successfully": "预占Comfy节点名称成功更新",
   "Press Ctrl+Enter to save": "按 Ctrl+Enter 保存",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index cf3cb22d..056d9932 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -6,6 +6,7 @@ import type { AppProps } from 'next/app'
 import { useEffect } from 'react'
 import { AXIOS_INSTANCE } from '@/src/api/mutator/axios-instance'
 import app from '@/src/firebase'
+import { ThemeProvider } from '@/src/hooks/useTheme'
 import FlowBiteThemeProvider from '../components/flowbite-theme'
 import Layout from '../components/layout'
 import '../styles/globals.css'
@@ -111,11 +112,13 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <FlowBiteThemeProvider>
-        <Layout>
-          <Component {...pageProps} />
-        </Layout>
-      </FlowBiteThemeProvider>
+      <ThemeProvider>
+        <FlowBiteThemeProvider>
+          <Layout>
+            <Component {...pageProps} />
+          </Layout>
+        </FlowBiteThemeProvider>
+      </ThemeProvider>
     </QueryClientProvider>
   )
 }
diff --git a/pages/admin/add-unclaimed-node.tsx b/pages/admin/add-unclaimed-node.tsx
index edf38788..0e180503 100644
--- a/pages/admin/add-unclaimed-node.tsx
+++ b/pages/admin/add-unclaimed-node.tsx
@@ -1,7 +1,11 @@
-import { Breadcrumb } from 'flowbite-react'
 import { useRouter } from 'next/router'
-import { HiHome } from 'react-icons/hi'
 import withAdmin from '@/components/common/HOC/authAdmin'
+import {
+  createAdminDashboardBreadcrumb,
+  createHomeBreadcrumb,
+  createUnclaimedNodesBreadcrumb,
+  UnifiedBreadcrumb,
+} from '@/components/common/UnifiedBreadcrumb'
 import { AdminCreateNodeFormModal } from '@/components/nodes/AdminCreateNodeFormModal'
 import { useNextTranslation } from '@/src/hooks/i18n'
 
@@ -10,44 +14,18 @@ export default withAdmin(AddUnclaimedNodePage)
 function AddUnclaimedNodePage() {
   const { t } = useNextTranslation()
   const router = useRouter()
+
+  // Create breadcrumb items
+  const breadcrumbItems = [
+    createHomeBreadcrumb(t),
+    createAdminDashboardBreadcrumb(t),
+    createUnclaimedNodesBreadcrumb(t),
+    { href: '', label: t('Add Unclaimed Node') },
+  ]
+
   return (
     <div className="p-4">
-      <Breadcrumb className="py-4">
-        <Breadcrumb.Item
-          href="/"
-          icon={HiHome}
-          onClick={(e) => {
-            e.preventDefault()
-            router.push('/')
-          }}
-          className="dark"
-        >
-          {t('Home')}
-        </Breadcrumb.Item>
-        <Breadcrumb.Item
-          href="/admin"
-          onClick={(e) => {
-            e.preventDefault()
-            router.push('/admin')
-          }}
-          className="dark"
-        >
-          {t('Admin Dashboard')}
-        </Breadcrumb.Item>
-        <Breadcrumb.Item
-          href="/admin/claim-nodes"
-          onClick={(e) => {
-            e.preventDefault()
-            router.push('/admin/claim-nodes')
-          }}
-          className="dark"
-        >
-          {t('Unclaimed Nodes')}
-        </Breadcrumb.Item>
-        <Breadcrumb.Item className="dark">
-          {t('Add Unclaimed Node')}
-        </Breadcrumb.Item>
-      </Breadcrumb>
+      <UnifiedBreadcrumb items={breadcrumbItems} />
 
       <AdminCreateNodeFormModal open onClose={() => router.push('/admin/')} />
     </div>
diff --git a/pages/admin/claim-nodes.tsx b/pages/admin/claim-nodes.tsx
index b7463ebc..bcf24d18 100644
--- a/pages/admin/claim-nodes.tsx
+++ b/pages/admin/claim-nodes.tsx
@@ -1,15 +1,20 @@
 import { useQueryClient } from '@tanstack/react-query'
-import { Breadcrumb, Button, Spinner } from 'flowbite-react'
+import { Button, Spinner } from 'flowbite-react'
 import { useRouter } from 'next/router'
-import { HiHome, HiPlus } from 'react-icons/hi'
+import { HiPlus } from 'react-icons/hi'
+import { UNCLAIMED_ADMIN_PUBLISHER_ID } from 'src/constants'
 import { CustomPagination } from '@/components/common/CustomPagination'
 import withAdmin from '@/components/common/HOC/authAdmin'
+import UnifiedBreadcrumb, {
+  createAdminDashboardBreadcrumb,
+  createHomeBreadcrumb,
+  createUnclaimedNodesBreadcrumb,
+} from '@/components/common/UnifiedBreadcrumb'
 import UnclaimedNodeCard from '@/components/nodes/UnclaimedNodeCard'
 import {
   getListNodesForPublisherQueryKey,
   useListNodesForPublisherV2,
 } from '@/src/api/generated'
-import { UNCLAIMED_ADMIN_PUBLISHER_ID } from '@/src/constants'
 import { useNextTranslation } from '@/src/hooks/i18n'
 
 export default withAdmin(ClaimNodesPage)
@@ -23,6 +28,12 @@ function ClaimNodesPage() {
     ? parseInt(router.query.page as string, 10)
     : 1
 
+  const breadcrumbItems = [
+    createHomeBreadcrumb(t),
+    createAdminDashboardBreadcrumb(t),
+    createUnclaimedNodesBreadcrumb(t),
+  ]
+
   const handlePageChange = (page: number) => {
     // Update URL with new page parameter
     router.push(
@@ -62,32 +73,7 @@ function ClaimNodesPage() {
   return (
     <div className="p-4">
       <div className="mb-6">
-        <Breadcrumb className="py-4">
-          <Breadcrumb.Item
-            href="/"
-            icon={HiHome}
-            onClick={(e) => {
-              e.preventDefault()
-              router.push('/')
-            }}
-            className="dark"
-          >
-            {t('Home')}
-          </Breadcrumb.Item>
-          <Breadcrumb.Item
-            href="/admin"
-            onClick={(e) => {
-              e.preventDefault()
-              router.push('/admin')
-            }}
-            className="dark"
-          >
-            {t('Admin Dashboard')}
-          </Breadcrumb.Item>
-          <Breadcrumb.Item className="dark">
-            {t('Unclaimed Nodes')}
-          </Breadcrumb.Item>
-        </Breadcrumb>
+        <UnifiedBreadcrumb items={breadcrumbItems} />
 
         <div className="flex justify-between items-center">
           <h1 className="text-2xl font-bold text-gray-200">
diff --git a/pages/admin/index.tsx b/pages/admin/index.tsx
index 9be9c9c1..9204a496 100644
--- a/pages/admin/index.tsx
+++ b/pages/admin/index.tsx
@@ -1,8 +1,6 @@
-import { Breadcrumb } from 'flowbite-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import {
-  HiHome,
   HiOutlineAdjustments,
   HiOutlineClipboardCheck,
   HiOutlineCollection,
@@ -11,6 +9,10 @@ import {
 } from 'react-icons/hi'
 import AdminTreeNavigation from '@/components/admin/AdminTreeNavigation'
 import withAdmin from '@/components/common/HOC/authAdmin'
+import UnifiedBreadcrumb, {
+  createAdminDashboardBreadcrumb,
+  createHomeBreadcrumb,
+} from '@/components/common/UnifiedBreadcrumb'
 import { useNextTranslation } from '@/src/hooks/i18n'
 
 export default withAdmin(AdminDashboard)
@@ -18,16 +20,14 @@ function AdminDashboard() {
   const router = useRouter()
   const { t } = useNextTranslation()
 
+  const breadcrumbItems = [
+    createHomeBreadcrumb(t),
+    createAdminDashboardBreadcrumb(t, true), // 当前页面
+  ]
+
   return (
     <div className="p-4">
-      <Breadcrumb className="py-4">
-        <Breadcrumb.Item href="/" icon={HiHome} className="dark">
-          {t('Home')}
-        </Breadcrumb.Item>
-        <Breadcrumb.Item href="#" className="dark">
-          {t('Admin Dashboard')}
-        </Breadcrumb.Item>
-      </Breadcrumb>
+      <UnifiedBreadcrumb items={breadcrumbItems} />
 
       <h1 className="text-2xl font-bold text-gray-200 mb-6">
         {t('Admin Dashboard')}
diff --git a/pages/admin/node-version-compatibility.tsx b/pages/admin/node-version-compatibility.tsx
index 4c84ed3a..ae121c85 100644
--- a/pages/admin/node-version-compatibility.tsx
+++ b/pages/admin/node-version-compatibility.tsx
@@ -1,7 +1,6 @@
 import { useQueryClient } from '@tanstack/react-query'
 import clsx from 'clsx'
 import {
-  Breadcrumb,
   Button,
   Checkbox,
   Dropdown,
@@ -15,13 +14,17 @@ import {
 import router from 'next/router'
 import DIE, { DIES } from 'phpdie'
 import React, { Suspense, useEffect, useMemo, useState } from 'react'
-import { HiHome } from 'react-icons/hi'
 import { toast } from 'react-toastify'
 import { useAsync, useAsyncFn, useMap } from 'react-use'
 import sflow, { pageFlow } from 'sflow'
 import NodeVersionCompatibilityEditModal from '@/components/admin/NodeVersionCompatibilityEditModal'
 import { CustomPagination } from '@/components/common/CustomPagination'
 import withAdmin from '@/components/common/HOC/authAdmin'
+import {
+  createAdminDashboardBreadcrumb,
+  createHomeBreadcrumb,
+  UnifiedBreadcrumb,
+} from '@/components/common/UnifiedBreadcrumb'
 import { usePage } from '@/components/hooks/usePage'
 import NodeVersionStatusBadge from '@/components/nodes/NodeVersionStatusBadge'
 import {
@@ -60,12 +63,12 @@ function NodeVersionCompatibilityAdmin() {
   const [nodeId, setNodeId] = useSearchParameter<string | undefined>(
     'nodeId',
     (p) => p || undefined,
-    (v) => v || []
+    (v) => v || ''
   )
   const [version, setVersion] = useSearchParameter<string | undefined>(
     'version',
     (p) => p || undefined,
-    (v) => v || []
+    (v) => v || ''
   )
   const [statuses, setStatuses] = useSearchParameter<NodeVersionStatus[]>(
     'status',
@@ -178,35 +181,17 @@ function NodeVersionCompatibilityAdmin() {
       })
     return () => ac.abort()
   }, [])
+
+  // Create breadcrumb items
+  const breadcrumbItems = [
+    createHomeBreadcrumb(t),
+    createAdminDashboardBreadcrumb(t),
+    { href: '', label: t('Node Version Compatibility') },
+  ]
   return (
     <div className="py-4 max-w-full relative dark">
       <div className="py-4">
-        <Breadcrumb>
-          <Breadcrumb.Item
-            href="/"
-            icon={HiHome}
-            onClick={(e) => {
-              e.preventDefault()
-              router.push('/')
-            }}
-            className="dark"
-          >
-            {t('Home')}
-          </Breadcrumb.Item>
-          <Breadcrumb.Item
-            href="/admin"
-            onClick={(e) => {
-              e.preventDefault()
-              router.push('/admin')
-            }}
-            className="dark"
-          >
-            {t('Admin Dashboard')}
-          </Breadcrumb.Item>
-          <Breadcrumb.Item className="dark">
-            {t('Node Version Compatibility')}
-          </Breadcrumb.Item>
-        </Breadcrumb>
+        <UnifiedBreadcrumb items={breadcrumbItems} />
       </div>
 
       <h1 className="text-2xl font-bold mb-4 text-white">
@@ -377,7 +362,7 @@ function DataTable({
       data?.versions?.filter((v) =>
         !version ? true : v.version === version
       ) || [],
-    [data?.versions]
+    [data?.versions, version]
   )
 
   const [editing, setEditing] = useSearchParameter<string>(
diff --git a/pages/admin/nodes.tsx b/pages/admin/nodes.tsx
index 89a7edc2..02793a33 100644
--- a/pages/admin/nodes.tsx
+++ b/pages/admin/nodes.tsx
@@ -1,23 +1,20 @@
 import { useQueryClient } from '@tanstack/react-query'
 import clsx from 'clsx'
-import {
-  Breadcrumb,
-  Button,
-  Label,
-  Modal,
-  Spinner,
-  Table,
-  TextInput,
-} from 'flowbite-react'
+import { Button, Label, Modal, Spinner, Table, TextInput } from 'flowbite-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { omit } from 'rambda'
 import React, { useState } from 'react'
-import { HiHome, HiPencil } from 'react-icons/hi'
+import { HiPencil } from 'react-icons/hi'
 import { MdOpenInNew } from 'react-icons/md'
 import { toast } from 'react-toastify'
 import { CustomPagination } from '@/components/common/CustomPagination'
 import withAdmin from '@/components/common/HOC/authAdmin'
+import {
+  createAdminDashboardBreadcrumb,
+  createHomeBreadcrumb,
+  UnifiedBreadcrumb,
+} from '@/components/common/UnifiedBreadcrumb'
 import {
   Node,
   NodeStatus,
@@ -32,13 +29,17 @@ function NodeList() {
   const router = useRouter()
   const [page, setPage] = React.useState<number>(1)
   const [editingNode, setEditingNode] = useState<Node | null>(null)
-  const [editFormData, setEditFormData] = useState({
-    tags: '',
-    category: '',
-  })
+  const [editFormData, setEditFormData] = useState({ tags: '', category: '' })
   const queryClient = useQueryClient()
   const { data: user } = useGetUser()
 
+  // Create breadcrumb items
+  const breadcrumbItems = [
+    createHomeBreadcrumb(t),
+    createAdminDashboardBreadcrumb(t),
+    { href: '', label: t('Nodes') },
+  ]
+
   // Handle page from URL
   React.useEffect(() => {
     if (router.query.page) {
@@ -232,30 +233,9 @@ function NodeList() {
 
   return (
     <div>
-      <Breadcrumb className="py-4 px-4">
-        <Breadcrumb.Item
-          href="/"
-          icon={HiHome}
-          onClick={(e) => {
-            e.preventDefault()
-            router.push('/')
-          }}
-          className="dark"
-        >
-          {t('Home')}
-        </Breadcrumb.Item>
-        <Breadcrumb.Item
-          href="/admin"
-          onClick={(e) => {
-            e.preventDefault()
-            router.push('/admin')
-          }}
-          className="dark"
-        >
-          {t('Admin Dashboard')}
-        </Breadcrumb.Item>
-        <Breadcrumb.Item className="dark">{t('Manage Nodes')}</Breadcrumb.Item>
-      </Breadcrumb>
+      <div className="py-4 px-4">
+        <UnifiedBreadcrumb items={breadcrumbItems} />
+      </div>
 
       <div className="flex flex-col gap-4 mb-6">
         <h1 className="text-2xl font-bold text-gray-200">
diff --git a/pages/admin/nodeversions.tsx b/pages/admin/nodeversions.tsx
index 9fb9e61e..c1a5c79e 100644
--- a/pages/admin/nodeversions.tsx
+++ b/pages/admin/nodeversions.tsx
@@ -1,7 +1,6 @@
 import { useQueryClient } from '@tanstack/react-query'
 import clsx from 'clsx'
 import {
-  Breadcrumb,
   Button,
   Checkbox,
   Label,
@@ -16,7 +15,7 @@ import pMap from 'p-map'
 import { omit } from 'rambda'
 import React, { useRef, useState } from 'react'
 import { FaGithub } from 'react-icons/fa'
-import { HiBan, HiCheck, HiHome, HiReply } from 'react-icons/hi'
+import { HiBan, HiCheck, HiReply } from 'react-icons/hi'
 import { MdFolderZip, MdOpenInNew } from 'react-icons/md'
 import { toast } from 'react-toastify'
 import { NodeVersionStatusToReadable } from 'src/mapper/nodeversion'
@@ -26,6 +25,11 @@ import {
 } from '@/components/cache-control'
 import { CustomPagination } from '@/components/common/CustomPagination'
 import withAdmin from '@/components/common/HOC/authAdmin'
+import {
+  createAdminDashboardBreadcrumb,
+  createHomeBreadcrumb,
+  UnifiedBreadcrumb,
+} from '@/components/common/UnifiedBreadcrumb'
 import MailtoNodeVersionModal from '@/components/MailtoNodeVersionModal'
 import { NodeStatusBadge } from '@/components/NodeStatusBadge'
 import { NodeStatusReason, zStatusReason } from '@/components/NodeStatusReason'
@@ -55,6 +59,13 @@ function NodeVersionList({}) {
   const { data: user } = useGetUser()
   const lastCheckedRef = useRef<string | null>(null)
 
+  // Create breadcrumb items
+  const breadcrumbItems = [
+    createHomeBreadcrumb(t),
+    createAdminDashboardBreadcrumb(t),
+    { href: '', label: t('Node Versions') },
+  ]
+
   // Contact button, send issues or email to node version publisher
   const [mailtoNv, setMailtoNv] = useState<NodeVersion | null>(null)
 
@@ -747,32 +758,9 @@ function NodeVersionList({}) {
   }
   return (
     <div>
-      <Breadcrumb className="py-4 px-4">
-        <Breadcrumb.Item
-          href="/"
-          icon={HiHome}
-          onClick={(e) => {
-            e.preventDefault()
-            router.push('/')
-          }}
-          className="dark"
-        >
-          {t('Home')}
-        </Breadcrumb.Item>
-        <Breadcrumb.Item
-          href="/admin"
-          onClick={(e) => {
-            e.preventDefault()
-            router.push('/admin')
-          }}
-          className="dark"
-        >
-          {t('Admin Dashboard')}
-        </Breadcrumb.Item>
-        <Breadcrumb.Item className="dark">
-          {t('Review Node Versions')}
-        </Breadcrumb.Item>
-      </Breadcrumb>
+      <div className="py-4 px-4">
+        <UnifiedBreadcrumb items={breadcrumbItems} />
+      </div>
       <BatchOperationBar />
       {/* Batch operation modal */}
       <Modal show={isBatchModalOpen} onClose={() => setIsBatchModalOpen(false)}>
diff --git a/pages/admin/preempted-comfy-node-names.tsx b/pages/admin/preempted-comfy-node-names.tsx
index 7b2a34f7..c7ede0c0 100644
--- a/pages/admin/preempted-comfy-node-names.tsx
+++ b/pages/admin/preempted-comfy-node-names.tsx
@@ -1,12 +1,16 @@
-import { Breadcrumb, Button, Spinner, TextInput } from 'flowbite-react'
+import { Button, Spinner, TextInput } from 'flowbite-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import { HiHome } from 'react-icons/hi'
 import { MdEdit } from 'react-icons/md'
 import { useRouterQuery } from 'src/hooks/useRouterQuery'
 import { CustomPagination } from '@/components/common/CustomPagination'
 import withAdmin from '@/components/common/HOC/authAdmin'
+import {
+  createAdminDashboardBreadcrumb,
+  createHomeBreadcrumb,
+  UnifiedBreadcrumb,
+} from '@/components/common/UnifiedBreadcrumb'
 import { formatDownloadCount } from '@/components/nodes/NodeDetails'
 import PreemptedComfyNodeNamesEditModal from '@/components/nodes/PreemptedComfyNodeNamesEditModal'
 import { Node, useSearchNodes } from '@/src/api/generated'
@@ -24,6 +28,13 @@ function PreemptedComfyNodeNamesAdminPage() {
   const page = Number(query.page || 1)
   const searchQuery = String(query.search || '')
 
+  // Create breadcrumb items
+  const breadcrumbItems = [
+    createHomeBreadcrumb(t),
+    createAdminDashboardBreadcrumb(t),
+    { href: '', label: t('Preempted ComfyUI Node Names') },
+  ]
+
   // Fetch all nodes with pagination - searchQuery being undefined is handled properly
   const { data, isLoading, isError } = useSearchNodes({
     page,
@@ -77,36 +88,11 @@ function PreemptedComfyNodeNamesAdminPage() {
   return (
     <div className="p-4">
       <div className="py-4">
-        <Breadcrumb>
-          <Breadcrumb.Item
-            href="/"
-            icon={HiHome}
-            onClick={(e) => {
-              e.preventDefault()
-              router.push('/')
-            }}
-            className="dark"
-          >
-            {t('Home')}
-          </Breadcrumb.Item>
-          <Breadcrumb.Item
-            href="/admin"
-            onClick={(e) => {
-              e.preventDefault()
-              router.push('/admin')
-            }}
-            className="dark"
-          >
-            {t('Admin Dashboard')}
-          </Breadcrumb.Item>
-          <Breadcrumb.Item className="dark">
-            {t('Preempted Comfy Node Names')}
-          </Breadcrumb.Item>
-        </Breadcrumb>
+        <UnifiedBreadcrumb items={breadcrumbItems} />
       </div>
 
       <h1 className="text-2xl font-bold text-gray-200 mb-6">
-        {t('Preempted Comfy Node Names Management')}
+        {t('Preempted ComfyUI Node Names')}
       </h1>
       {/* Search form */}
       <form className="flex gap-2 items-center mb-6" onSubmit={handleSearch}>
diff --git a/pages/admin/search-ranking.tsx b/pages/admin/search-ranking.tsx
index 3a1fb9bd..c484902e 100644
--- a/pages/admin/search-ranking.tsx
+++ b/pages/admin/search-ranking.tsx
@@ -1,12 +1,16 @@
-import { Breadcrumb, Button, Spinner, TextInput } from 'flowbite-react'
+import { Button, Spinner, TextInput } from 'flowbite-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import { HiHome } from 'react-icons/hi'
 import { MdEdit } from 'react-icons/md'
 import { useRouterQuery } from 'src/hooks/useRouterQuery'
 import { CustomPagination } from '@/components/common/CustomPagination'
 import withAdmin from '@/components/common/HOC/authAdmin'
+import {
+  createAdminDashboardBreadcrumb,
+  createHomeBreadcrumb,
+  UnifiedBreadcrumb,
+} from '@/components/common/UnifiedBreadcrumb'
 import { formatDownloadCount } from '@/components/nodes/NodeDetails'
 import SearchRankingEditModal from '@/components/nodes/SearchRankingEditModal'
 import { Node, useSearchNodes } from '@/src/api/generated'
@@ -24,6 +28,13 @@ function SearchRankingAdminPage() {
   const page = Number(query.page || 1)
   const searchQuery = String(query.search || '')
 
+  // Create breadcrumb items
+  const breadcrumbItems = [
+    createHomeBreadcrumb(t),
+    createAdminDashboardBreadcrumb(t),
+    { href: '', label: t('Search Ranking Management') },
+  ]
+
   // Fetch all nodes with pagination - searchQuery being undefined is handled properly
   const { data, isLoading, isError } = useSearchNodes({
     page,
@@ -77,32 +88,7 @@ function SearchRankingAdminPage() {
   return (
     <div className="p-4">
       <div className="py-4">
-        <Breadcrumb>
-          <Breadcrumb.Item
-            href="/"
-            icon={HiHome}
-            onClick={(e) => {
-              e.preventDefault()
-              router.push('/')
-            }}
-            className="dark"
-          >
-            {t('Home')}
-          </Breadcrumb.Item>
-          <Breadcrumb.Item
-            href="/admin"
-            onClick={(e) => {
-              e.preventDefault()
-              router.push('/admin')
-            }}
-            className="dark"
-          >
-            {t('Admin Dashboard')}
-          </Breadcrumb.Item>
-          <Breadcrumb.Item className="dark">
-            {t('Search Ranking Management')}
-          </Breadcrumb.Item>
-        </Breadcrumb>
+        <UnifiedBreadcrumb items={breadcrumbItems} />
       </div>
 
       <h1 className="text-2xl font-bold text-gray-200 mb-6">
diff --git a/pages/nodes.tsx b/pages/nodes.tsx
index 9b6a53b1..f8afa63c 100644
--- a/pages/nodes.tsx
+++ b/pages/nodes.tsx
@@ -1,7 +1,9 @@
-import { Breadcrumb } from 'flowbite-react'
 import { useRouter } from 'next/router'
-import { HiHome } from 'react-icons/hi'
 import withAuth from '@/components/common/HOC/withAuth'
+import UnifiedBreadcrumb, {
+  createHomeBreadcrumb,
+  createNodesBreadcrumb,
+} from '@/components/common/UnifiedBreadcrumb'
 import { useNextTranslation } from '@/src/hooks/i18n'
 import PublisherListNodes from '../components/publisher/PublisherListNodes'
 
@@ -9,23 +11,11 @@ function PublisherNodeList() {
   const router = useRouter()
   const { t } = useNextTranslation()
 
+  const breadcrumbItems = [createHomeBreadcrumb(t), createNodesBreadcrumb(t)]
+
   return (
     <div className="p-4">
-      <Breadcrumb className="py-4">
-        <Breadcrumb.Item
-          href="/"
-          icon={HiHome}
-          onClick={(e) => {
-            e.preventDefault()
-            router.push('/')
-          }}
-          className="dark"
-        >
-          {t('Home')}
-        </Breadcrumb.Item>
-        <Breadcrumb.Item className="dark">{t('Your Nodes')}</Breadcrumb.Item>
-      </Breadcrumb>
-
+      <UnifiedBreadcrumb items={breadcrumbItems} />
       <PublisherListNodes />
     </div>
   )
diff --git a/pages/nodes/[nodeId].tsx b/pages/nodes/[nodeId].tsx
index 525af5e9..4db21db6 100644
--- a/pages/nodes/[nodeId].tsx
+++ b/pages/nodes/[nodeId].tsx
@@ -1,6 +1,9 @@
-import { Breadcrumb } from 'flowbite-react'
 import { useRouter } from 'next/router'
-import { HiHome } from 'react-icons/hi'
+import UnifiedBreadcrumb, {
+  createAllNodesBreadcrumb,
+  createHomeBreadcrumb,
+  createNodeDetailBreadcrumb,
+} from '@/components/common/UnifiedBreadcrumb'
 import { useNextTranslation } from '@/src/hooks/i18n'
 import NodeDetails from '../../components/nodes/NodeDetails'
 
@@ -9,26 +12,16 @@ const NodeView = () => {
   const { nodeId } = router.query
   const { t } = useNextTranslation()
 
+  const breadcrumbItems = [
+    createHomeBreadcrumb(t),
+    createAllNodesBreadcrumb(t),
+    createNodeDetailBreadcrumb(nodeId as string),
+  ]
+
   return (
     <div className="p-4">
       <div className="py-4">
-        <Breadcrumb>
-          <Breadcrumb.Item
-            href="/"
-            icon={HiHome}
-            onClick={(e) => {
-              e.preventDefault()
-              router.push('/')
-            }}
-            className="dark"
-          >
-            {t('Home')}
-          </Breadcrumb.Item>
-          <Breadcrumb.Item className="dark">{t('All Nodes')}</Breadcrumb.Item>
-          <Breadcrumb.Item className="dark text-blue-500">
-            {nodeId as string}
-          </Breadcrumb.Item>
-        </Breadcrumb>
+        <UnifiedBreadcrumb items={breadcrumbItems} />
       </div>
 
       <NodeDetails />
diff --git a/pages/nodes/[nodeId]/claim.tsx b/pages/nodes/[nodeId]/claim.tsx
index 7573e338..d3d73391 100644
--- a/pages/nodes/[nodeId]/claim.tsx
+++ b/pages/nodes/[nodeId]/claim.tsx
@@ -10,6 +10,7 @@ import { UNCLAIMED_ADMIN_PUBLISHER_ID } from 'src/constants'
 import withAuth from '@/components/common/HOC/withAuth'
 import CreatePublisherModal from '@/components/publisher/CreatePublisherModal'
 import { useNextTranslation } from '@/src/hooks/i18n'
+import { themeConfig } from '@/utils/themeConfig'
 
 export default withAuth(ClaimNodePage)
 
@@ -85,7 +86,7 @@ function ClaimNodePage() {
 
   if (!isUnclaimed) {
     return (
-      <div className="container p-6 mx-auto h-[90vh] text-white">
+      <div className="container p-6 mx-auto h-[90vh] text-gray-900 dark:text-white">
         <Head>
           <title>{t('Already Claimed')} | Comfy Registry</title>
           <meta
@@ -93,11 +94,11 @@ function ClaimNodePage() {
             content={t('This node is already claimed by a publisher.')}
           />
         </Head>
-        <div className="bg-red-800 p-4 rounded-lg">
-          <h2 className="text-xl font-bold">
+        <div className="bg-red-100 dark:bg-red-800 p-4 rounded-lg">
+          <h2 className="text-xl font-bold text-red-900 dark:text-white">
             {t('This node is already claimed')}
           </h2>
-          <p className="mt-2">
+          <p className="mt-2 text-red-800 dark:text-gray-200">
             {t(
               'This node is already owned by a publisher and cannot be claimed.'
             )}
@@ -159,15 +160,18 @@ function ClaimNodePage() {
         </span>
       </div>
 
-      <h1 className="mb-4 text-3xl font-bold text-white">
+      <h1 className="mb-4 text-3xl font-bold text-gray-900 dark:text-white">
         {t('Claim Node: {{nodeName}}', { nodeName: node?.name })}
       </h1>
 
-      <div className="bg-gray-800 p-6 rounded-lg mb-6">
-        <h2 className="text-xl font-bold text-white mb-4">
+      <div className="bg-white dark:bg-gray-800 p-6 rounded-lg mb-6">
+        <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
           {t('Select a Publisher')}
         </h2>
-        <p className="text-gray-300 mb-6">
+        <p className="text-gray-700 dark:text-gray-300 mb-6">
+          {t(
+            'Choose which publisher account you want to use to claim this node. You must be the owner of the GitHub repository'
+          )}
           {node?.repository ? (
             <>
               {t(
@@ -196,15 +200,17 @@ function ClaimNodePage() {
                 key={publisher.id}
                 className={`p-4 rounded-lg cursor-pointer border ${
                   selectedPublisherId === publisher.id
-                    ? 'border-blue-500 bg-gray-700'
-                    : 'border-gray-600 hover:bg-gray-700'
+                    ? 'border-blue-500 bg-blue-50 dark:bg-gray-700'
+                    : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
                 }`}
                 onClick={() => handleSelectPublisher(publisher.id as string)}
               >
-                <h3 className="text-lg font-medium text-white">
+                <h3 className="text-lg font-medium text-gray-900 dark:text-white">
                   {publisher.name}
                 </h3>
-                <p className="text-gray-400">@{publisher.id}</p>
+                <p className="text-gray-600 dark:text-gray-400">
+                  @{publisher.id}
+                </p>
               </div>
             ))}
 
@@ -219,8 +225,8 @@ function ClaimNodePage() {
             </div>
           </div>
         ) : (
-          <div className="bg-gray-700 p-4 rounded-lg">
-            <p className="text-white mb-4">
+          <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
+            <p className="text-gray-900 dark:text-white mb-4">
               {t(
                 "You don't have any publishers yet. Create a publisher first to claim nodes."
               )}
diff --git a/pages/publishers/[publisherId]/claim-my-node.tsx b/pages/publishers/[publisherId]/claim-my-node.tsx
index 6780bc2a..82dc5bde 100644
--- a/pages/publishers/[publisherId]/claim-my-node.tsx
+++ b/pages/publishers/[publisherId]/claim-my-node.tsx
@@ -524,7 +524,7 @@ function ClaimMyNodePage() {
         </Alert>
       )}
 
-      <div className="bg-gray-800 p-6 rounded-lg mb-6">
+      <div className="bg-white dark:bg-gray-800 p-6 rounded-lg mb-6">
         {/* Progress Indicator */}
         <div className="mb-8">
           <div className="flex items-center justify-between mb-2">
diff --git a/pages/publishers/create.tsx b/pages/publishers/create.tsx
index 11652ee1..da1f3f93 100644
--- a/pages/publishers/create.tsx
+++ b/pages/publishers/create.tsx
@@ -1,23 +1,60 @@
-import { Breadcrumb, Card } from 'flowbite-react'
+import { isAxiosError } from 'axios'
+import { Breadcrumb, Button, Card, TextInput } from 'flowbite-react'
 import { useRouter } from 'next/router'
-import React from 'react'
+import React, { useState } from 'react'
 import { HiHome } from 'react-icons/hi'
+import { toast } from 'react-toastify'
+import { customThemeTextInput } from 'utils/comfyTheme'
 import withAuth from '@/components/common/HOC/withAuth'
-import CreatePublisherFormContent from '@/components/publisher/CreatePublisherFormContent'
+import { useCreatePublisher, useValidatePublisher } from '@/src/api/generated'
 import { useNextTranslation } from '@/src/hooks/i18n'
 
 const CreatePublisher = () => {
   const router = useRouter()
   const { t } = useNextTranslation()
 
-  const handleSuccess = (username: string) => {
-    router.push(`/publishers/${username}`)
-  }
+  const [username, setUsername] = useState('')
+  const [displayName, setDisplayName] = useState('')
+  const [publisherValidationError, setPublisherValidationError] = useState('')
+
+  const {
+    data,
+    isLoading: isLoadingValidation,
+    error,
+  } = useValidatePublisher({
+    username: username,
+  })
+  const createPublisherMutation = useCreatePublisher()
 
-  const handleCancel = () => {
-    router.back()
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    createPublisherMutation.mutate(
+      {
+        data: {
+          id: username,
+          name: displayName,
+        },
+      },
+      {
+        onError: (error) => {
+          toast.error(t('Could not create publisher. Please try again.'))
+        },
+        onSuccess: () => {
+          toast.success('Publisher created successfully!')
+          router.push(`/publishers/${username}`)
+        },
+      }
+    )
   }
 
+  React.useEffect(() => {
+    if (isAxiosError(error)) {
+      setPublisherValidationError(error.response?.data?.message)
+    } else {
+      setPublisherValidationError('')
+    }
+  }, [error])
+
   return (
     <div className="p-4">
       <div className="py-4">
@@ -43,11 +80,85 @@ const CreatePublisher = () => {
         <div className="flex items-center justify-center px-0 py-4 mx-auto">
           <div className="w-full mx-auto shadow sm:max-w-lg">
             <Card className="p-2 bg-gray-800 border border-gray-700 md:p-6 rounded-2xl">
-              <CreatePublisherFormContent
-                onSuccess={handleSuccess}
-                onCancel={handleCancel}
-                showTitle={true}
-              />
+              <p className="flex justify-center text-sm font-medium text-gray-400 ">
+                {t(
+                  'Register a publisher to begin distributing custom nodes on Comfy.'
+                )}
+              </p>
+
+              <form
+                className="mt-4 space-y-4 lg:space-y-6"
+                onSubmit={handleSubmit}
+              >
+                <div>
+                  <label className="block mb-1 text-xs font-bold text-white">
+                    {t('Username')}
+                  </label>
+                  <TextInput
+                    id="name"
+                    placeholder={t('E.g. janedoe55')}
+                    required
+                    theme={customThemeTextInput}
+                    type="text"
+                    sizing="sm"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    color={
+                      !isLoadingValidation && publisherValidationError
+                        ? 'failure'
+                        : 'success'
+                    }
+                    helperText={
+                      <>
+                        {isLoadingValidation && (
+                          <>{t('Checking username...')}</>
+                        )}
+                        {!isLoadingValidation && publisherValidationError && (
+                          <>
+                            <span className="font-medium"></span>{' '}
+                            {publisherValidationError}
+                          </>
+                        )}
+                      </>
+                    }
+                  />
+                </div>
+                <div>
+                  <label className="block mb-1 text-xs font-bold text-white">
+                    {t('Display Name')}
+                  </label>
+                  <TextInput
+                    sizing="sm"
+                    theme={customThemeTextInput}
+                    id="displayName"
+                    className="border-gray-700 "
+                    placeholder={t('E.g. Jane Doe')}
+                    required
+                    type="text"
+                    value={displayName}
+                    onChange={(e) => setDisplayName(e.target.value)}
+                  />
+                </div>
+
+                <div className="flex items-center justify-center gap-4">
+                  <Button
+                    type="button"
+                    onClick={() => router.back()}
+                    color="light"
+                    className=" bg-gray-900"
+                  >
+                    <span className="text-white">{t('Cancel')}</span>
+                  </Button>
+                  <Button
+                    type="submit"
+                    color="blue"
+                    size="sm"
+                    disabled={isLoadingValidation || !!publisherValidationError}
+                  >
+                    {t('Create')}
+                  </Button>
+                </div>
+              </form>
             </Card>
           </div>
         </div>
diff --git a/src/hooks/useTheme.tsx b/src/hooks/useTheme.tsx
new file mode 100644
index 00000000..cb6f83d4
--- /dev/null
+++ b/src/hooks/useTheme.tsx
@@ -0,0 +1,93 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
+
+export type Theme = 'light' | 'dark' | 'auto'
+
+interface ThemeContextType {
+  theme: Theme
+  actualTheme: 'light' | 'dark'
+  setTheme: (theme: Theme) => void
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+
+const THEME_STORAGE_KEY = 'comfy-registry-theme'
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>('auto')
+  const [actualTheme, setActualTheme] = useState<'light' | 'dark'>('dark')
+
+  // Get system preference
+  const getSystemTheme = (): 'light' | 'dark' => {
+    if (typeof window === 'undefined') return 'dark'
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light'
+  }
+
+  // Calculate actual theme based on setting
+  const calculateActualTheme = (themeValue: Theme): 'light' | 'dark' => {
+    if (themeValue === 'auto') {
+      return getSystemTheme()
+    }
+    return themeValue
+  }
+
+  // Load theme from localStorage on mount
+  useEffect(() => {
+    const savedTheme = localStorage.getItem(THEME_STORAGE_KEY) as Theme
+    const initialTheme = savedTheme || 'auto'
+    setThemeState(initialTheme)
+    setActualTheme(calculateActualTheme(initialTheme))
+  }, [calculateActualTheme])
+
+  // Listen to system theme changes
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const handleChange = () => {
+      if (theme === 'auto') {
+        setActualTheme(getSystemTheme())
+      }
+    }
+
+    mediaQuery.addEventListener('change', handleChange)
+    return () => mediaQuery.removeEventListener('change', handleChange)
+  }, [theme])
+
+  // Update document class and actual theme when theme changes
+  useEffect(() => {
+    const newActualTheme = calculateActualTheme(theme)
+    setActualTheme(newActualTheme)
+
+    if (typeof document !== 'undefined') {
+      document.documentElement.classList.remove('light', 'dark')
+      document.documentElement.classList.add(newActualTheme)
+    }
+  }, [theme])
+
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme)
+    localStorage.setItem(THEME_STORAGE_KEY, newTheme)
+  }
+
+  return (
+    <ThemeContext.Provider value={{ theme, actualTheme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext)
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+  return context
+}
diff --git a/src/stories/RegistryStory.tsx b/src/stories/RegistryStory.tsx
deleted file mode 100644
index 0a277da6..00000000
--- a/src/stories/RegistryStory.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react'
-import GenericHeader from '@/components/common/GenericHeader'
-
-/**
- * A simplified version of the Registry component for Storybook
- * This avoids dependency issues with Algolia and Next.js router
- */
-const RegistryStory: React.FC = () => {
-  return (
-    <div className="relative mt-8 bg-gray-900 lg:mt-20">
-      <GenericHeader
-        title="Welcome to ComfyUI Registry"
-        subTitle="View nodes or sign in to create and publish your own"
-        buttonText="Get Started"
-        buttonLink="/nodes"
-      />
-
-      <div className="md:w-full w-full mt-5">
-        <header className="header">
-          <div className="header-wrapper wrapper">
-            <div className="search-input-container">
-              <input
-                type="text"
-                className="search-input w-full p-4 rounded bg-gray-800 text-white border border-gray-700"
-                placeholder="Search Nodes (Storybook preview)"
-              />
-            </div>
-          </div>
-        </header>
-
-        <div className="wrapper mt-2 w-full">
-          <div className="p-4 border border-gray-700 rounded mt-4 bg-gray-800 text-white">
-            <h3 className="text-xl font-bold">Example Node</h3>
-            <p className="text-gray-400 mt-2">
-              This is a placeholder for search results that would appear in the
-              actual component.
-            </p>
-          </div>
-          <div className="p-4 border border-gray-700 rounded mt-4 bg-gray-800 text-white">
-            <h3 className="text-xl font-bold">Another Example Node</h3>
-            <p className="text-gray-400 mt-2">
-              In the real application, these would be dynamically loaded from
-              Algolia search.
-            </p>
-            <span>test catch ui change</span>
-          </div>
-        </div>
-
-        <div className="pagination flex justify-center mt-6 mb-8">
-          <button className="px-4 py-2 bg-blue-600 text-white rounded mr-2">
-            Previous
-          </button>
-          <button className="px-4 py-2 bg-blue-600 text-white rounded">
-            Next
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default RegistryStory
diff --git a/styles/globals.css b/styles/globals.css
index f5185895..4abcb106 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -5,7 +5,7 @@
 @tailwind utilities;
 
 body {
-  background-color: rgb(17 24 39);
+  @apply bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white;
 }
 .placeholder-white::placeholder {
   color: white !important;
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 6b3d002d..a8fec67a 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   // important: true,
+  darkMode: 'class',
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',
     './components/**/*.{js,ts,jsx,tsx}',
diff --git a/utils/comfyTheme.tsx b/utils/comfyTheme.tsx
index 18bdf8eb..456070de 100644
--- a/utils/comfyTheme.tsx
+++ b/utils/comfyTheme.tsx
@@ -1,9 +1,11 @@
 import { CustomFlowbiteTheme } from 'flowbite-react'
+import { themeConfig } from './themeConfig'
+
 export const customThemeTModal: CustomFlowbiteTheme = {
   root: {
     base: 'fixed inset-x-0 top-0 z-50 h-screen overflow-y-auto overflow-x-hidden md:inset-0 md:h-full rounded-lg',
     show: {
-      on: 'flex bg-gray-900 bg-opacity-50 bg-opacity-80',
+      on: `flex ${themeConfig.modal.overlay}`,
       off: 'hidden',
     },
     sizes: {
@@ -31,41 +33,40 @@ export const customThemeTModal: CustomFlowbiteTheme = {
     },
   },
   content: {
-    base: 'relative h-full w-full p-4 md:h-auto rounded-2xl bg-gray-800',
-    inner: 'relative flex max-h-[90dvh] flex-col rounded-lg bg-gray-800',
+    base: `relative h-full w-full p-4 md:h-auto rounded-2xl ${themeConfig.modal.content}`,
+    inner: `relative flex max-h-[90dvh] flex-col rounded-lg ${themeConfig.modal.inner}`,
   },
   body: {
-    base: 'flex-1 overflow-auto p-6 bg-gray-800',
+    base: `flex-1 overflow-auto p-6 ${themeConfig.modal.body}`,
     popup: 'pt-0',
   },
   header: {
-    base: 'flex items-start justify-between rounded-t border-b p-5 border-gray-600',
+    base: `flex items-start justify-between rounded-t border-b p-5 ${themeConfig.modal.header.border}`,
     popup: 'border-b-0 p-2',
-    title: 'text-xl font-medium text-gray-900 text-white',
+    title: `text-xl font-medium ${themeConfig.modal.header.title}`,
     close: {
-      base: 'ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 hover:bg-gray-600 hover:text-white',
+      base: `ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm ${themeConfig.modal.close.base}`,
       icon: 'h-5 w-5',
     },
   },
   footer: {
     //@ts-ignore
-    base: 'flex items-center space-x-2 rounded-b border-gray-200 p-6 border-gray-600',
+    base: `flex items-center space-x-2 rounded-b p-6 ${themeConfig.modal.footer.border}`,
     popup: 'border-t',
   },
 }
 export const customThemeTextInput = {
   base: 'flex',
-  addon:
-    'inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-sm text-gray-900',
+  addon: `inline-flex items-center rounded-l-md border border-r-0 px-3 text-sm ${themeConfig.textInput.addon}`,
   field: {
     base: 'relative w-full',
     icon: {
       base: 'pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3',
-      svg: 'h-5 w-5 text-gray-500',
+      svg: `h-5 w-5 ${themeConfig.textInput.icon}`,
     },
     rightIcon: {
       base: 'pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3',
-      svg: 'h-5 w-5 text-gray-500',
+      svg: `h-5 w-5 ${themeConfig.textInput.icon}`,
     },
     input: {
       base: 'block w-full border disabled:cursor-not-allowed disabled:opacity-50',
@@ -75,7 +76,7 @@ export const customThemeTextInput = {
         lg: 'p-4 sm:text-base',
       },
       colors: {
-        gray: 'border-gray-500 bg-gray-600 text-gray-200 focus:border-blue-500 focus:ring-blue-500',
+        gray: themeConfig.textInput.base,
         info: 'border-blue-500 bg-blue-50 text-blue-900 focus:border-blue-500 focus:ring-blue-500',
         failure:
           'border-red-500 bg-red-50 text-red-900 focus:border-red-500 focus:ring-red-500',
@@ -91,17 +92,17 @@ export const customThemeTextInput = {
 export const CustomThemeTextArea = {
   base: 'block w-full rounded-lg border text-sm disabled:cursor-not-allowed disabled:opacity-50',
   colors: {
-    gray: 'border-gray-300 bg-gray-600 text-gray-200 focus:border-blue-500 focus:ring-blue-500 border-gray-600 bg-gray-700 text-white placeholder-gray-400 focus:border-blue-500 focus:ring-blue-500',
-    info: 'border-blue-500 bg-blue-50 text-blue-900 placeholder-blue-700 focus:border-blue-500 focus:ring-blue-500 border-blue-400 bg-blue-100 focus:border-blue-500 focus:ring-blue-500',
+    gray: themeConfig.textArea.base,
+    info: 'border-blue-500 bg-blue-50 text-blue-900 placeholder-blue-700 focus:border-blue-500 focus:ring-blue-500 dark:border-blue-400 dark:bg-blue-100 dark:placeholder-blue-600',
     failure:
-      'border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 border-red-400 bg-red-100 focus:border-red-500 focus:ring-red-500',
+      'border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:placeholder-red-600',
     warning:
-      'border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 focus:border-yellow-500 focus:ring-yellow-500 border-yellow-400 bg-yellow-100 focus:border-yellow-500 focus:ring-yellow-500',
+      'border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 focus:border-yellow-500 focus:ring-yellow-500 dark:border-yellow-400 dark:bg-yellow-100 dark:placeholder-yellow-600',
     success:
-      'border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 border-green-400 bg-green-100 focus:border-green-500 focus:ring-green-500',
+      'border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:placeholder-green-600',
   },
   withShadow: {
-    on: 'shadow-sm shadow-sm-light',
+    on: 'shadow-sm',
     off: '',
   },
 }
@@ -111,25 +112,24 @@ export const CustomThemePagination: CustomFlowbiteTheme = {
   base: '',
   layout: {
     table: {
-      base: 'text-sm text-gray-700 text-gray-400',
-      span: 'font-semibold text-gray-900 text-white',
+      base: themeConfig.pagination.text,
+      span: `font-semibold ${themeConfig.pagination.span}`,
     },
   },
   pages: {
     base: 'xs:mt-0 mt-2 inline-flex items-center -space-x-px',
     showIcon: 'inline-flex',
     previous: {
-      base: 'ml-0 rounded-l-lg border border-gray-300 bg-white px-3 py-2 leading-tight text-gray-500 enabled:hover:bg-gray-100 enabled:hover:text-gray-700 border-gray-700 bg-gray-800 text-gray-400 enabled:hover:bg-gray-700 enabled:hover:text-white',
+      base: `ml-0 rounded-l-lg border px-3 py-2 leading-tight enabled:hover:bg-gray-100 enabled:hover:text-gray-700 ${themeConfig.pagination.button}`,
       icon: 'h-5 w-5',
     },
     next: {
-      base: 'rounded-r-lg border border-gray-300 bg-white px-3 py-2 leading-tight text-gray-500 enabled:hover:bg-gray-100 enabled:hover:text-gray-700 border-gray-700 bg-gray-800 text-gray-400 enabled:hover:bg-gray-700 enabled:hover:text-white',
+      base: `rounded-r-lg border px-3 py-2 leading-tight enabled:hover:bg-gray-100 enabled:hover:text-gray-700 ${themeConfig.pagination.button}`,
       icon: 'h-5 w-5',
     },
     selector: {
-      base: 'w-12 border border-gray-300 bg-white py-2 leading-tight text-gray-500 enabled:hover:bg-gray-100 enabled:hover:text-gray-700 border-gray-700 bg-gray-800 text-gray-400 enabled:hover:bg-gray-700 enabled:hover:text-white',
-      active:
-        'bg-cyan-50 text-cyan-600 hover:bg-cyan-100 hover:text-cyan-700 border-gray-700 bg-gray-700 text-white',
+      base: `w-12 border py-2 leading-tight enabled:hover:bg-gray-100 enabled:hover:text-gray-700 ${themeConfig.pagination.button}`,
+      active: themeConfig.pagination.active,
       disabled: 'cursor-not-allowed opacity-50',
     },
   },
diff --git a/utils/themeConfig.tsx b/utils/themeConfig.tsx
new file mode 100644
index 00000000..4de38e08
--- /dev/null
+++ b/utils/themeConfig.tsx
@@ -0,0 +1,278 @@
+import { CustomFlowbiteTheme } from 'flowbite-react'
+
+// Theme configuration for both light and dark modes
+export const themeConfig = {
+  modal: {
+    overlay: 'bg-gray-900/50 dark:bg-gray-900/80',
+    content: 'bg-white dark:bg-gray-800',
+    inner: 'bg-white dark:bg-gray-200',
+    body: 'bg-white dark:bg-gray-100',
+    header: {
+      border: 'border-gray-200 dark:border-gray-600',
+      title: 'text-black dark:text-white',
+    },
+    close: {
+      base: 'text-black hover:bg-gray-100 hover:text-black dark:hover:bg-gray-600 dark:hover:text-white',
+    },
+    footer: {
+      border: 'border-gray-200 dark:border-gray-600',
+    },
+  },
+  textInput: {
+    base: 'border-gray-300 bg-white text-black dark:border-gray-500 dark:bg-gray-600 dark:text-gray-200 focus:border-blue-500 focus:ring-blue-500',
+    addon:
+      'border-gray-300 bg-white text-black dark:border-gray-500 dark:bg-gray-600 dark:text-gray-200',
+    icon: 'text-black dark:text-gray-400',
+  },
+  textArea: {
+    base: 'border-gray-300 bg-white text-black placeholder-black dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 focus:border-blue-500 focus:ring-blue-500',
+  },
+  pagination: {
+    text: 'text-black dark:text-gray-400',
+    span: 'text-black dark:text-white',
+    button:
+      'border-gray-300 bg-white text-black hover:bg-gray-100 hover:text-black dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white',
+    active:
+      'bg-cyan-50 text-cyan-600 hover:bg-cyan-100 hover:text-cyan-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white',
+  },
+  header: {
+    background: 'bg-white dark:bg-gray-900',
+    text: 'text-black dark:text-white',
+    border: 'border-gray-200 dark:border-gray-700',
+  },
+  navbar: {
+    background: 'bg-white dark:bg-gray-900',
+    item: 'text-black hover:text-gray-700 dark:text-gray-300 dark:hover:text-white',
+  },
+  dropdown: {
+    background: 'bg-white dark:bg-gray-800',
+    item: 'text-black hover:bg-gray-200 hover:text-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white',
+    border: 'border-gray-200 dark:border-gray-600',
+  },
+  body: {
+    background: 'bg-white dark:bg-gray-900',
+    text: 'text-black dark:text-white',
+  },
+  card: {
+    background: 'bg-white dark:bg-gray-800',
+    border: 'border-gray-200 dark:border-gray-700',
+    text: 'text-black dark:text-white',
+  },
+  button: {
+    primary:
+      'bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-500 dark:hover:bg-blue-600',
+    secondary:
+      'bg-white hover:bg-gray-700 text-black hover:text-white dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-white',
+    ghost:
+      'text-black hover:text-white hover:bg-gray-700 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700',
+    login:
+      'bg-gray-100 hover:bg-gray-200 text-black dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white',
+    documentation:
+      'bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-500 dark:hover:bg-blue-600',
+    signup:
+      'bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-500 dark:hover:bg-blue-600',
+  },
+  // Additional component backgrounds
+  content: {
+    primary: 'bg-white dark:bg-gray-800',
+    secondary: 'bg-white dark:bg-gray-700',
+    tertiary: 'bg-white dark:bg-gray-600',
+  },
+  table: {
+    header: 'bg-white dark:bg-gray-800',
+    cell: 'bg-white dark:bg-gray-800',
+    stripe: 'bg-white dark:bg-gray-900',
+  },
+  form: {
+    background: 'bg-white dark:bg-gray-800',
+    border: 'border-gray-200 dark:border-gray-700',
+  },
+  navigation: {
+    background: 'bg-white dark:bg-gray-800',
+    text: 'text-black dark:text-white',
+  },
+  admin: {
+    panel: 'bg-white dark:bg-gray-800',
+    sticky: 'bg-white dark:bg-gray-800',
+  },
+  nodeDetails: {
+    background: 'bg-gray-100 dark:bg-gray-900',
+    text: 'text-black dark:text-white',
+    card: 'bg-gray-200 dark:bg-gray-700',
+    cardBorder: 'border-gray-300 dark:border-gray-500',
+    cardText: 'text-black dark:text-gray-200',
+    metaText: 'text-gray-600 dark:text-gray-400',
+  },
+  breadcrumb: {
+    item: 'text-black hover:text-gray-700 dark:text-gray-300 dark:hover:text-white',
+    link: '!text-black hover:!text-gray-700 dark:!text-gray-300 dark:hover:!text-white no-underline',
+    separator: 'text-gray-500 dark:text-gray-400',
+  },
+}
+
+// Helper function to get theme classes dynamically
+export const getThemeClasses = (path: string) => {
+  const keys = path.split('.')
+  let current: any = themeConfig
+
+  for (const key of keys) {
+    if (current && typeof current === 'object' && key in current) {
+      current = current[key]
+    } else {
+      return ''
+    }
+  }
+
+  return typeof current === 'string' ? current : ''
+}
+
+export const customThemeTModal: CustomFlowbiteTheme = {
+  root: {
+    base: 'fixed inset-x-0 top-0 z-50 h-screen overflow-y-auto overflow-x-hidden md:inset-0 md:h-full rounded-lg',
+    show: {
+      on: `flex ${themeConfig.modal.overlay}`,
+      off: 'hidden',
+    },
+    sizes: {
+      sm: 'max-w-sm',
+      md: 'max-w-md',
+      lg: 'max-w-lg',
+      xl: 'max-w-xl',
+      '2xl': 'max-w-2xl',
+      '3xl': 'max-w-3xl',
+      '4xl': 'max-w-4xl',
+      '5xl': 'max-w-5xl',
+      '6xl': 'max-w-6xl',
+      '7xl': 'max-w-7xl',
+    },
+    positions: {
+      'top-left': 'items-start justify-start',
+      'top-center': 'items-start justify-center',
+      'top-right': 'items-start justify-end',
+      'center-left': 'items-center justify-start',
+      center: 'items-center justify-center',
+      'center-right': 'items-center justify-end',
+      'bottom-right': 'items-end justify-end',
+      'bottom-center': 'items-end justify-center',
+      'bottom-left': 'items-end justify-start',
+    },
+  },
+  content: {
+    base: `relative h-full w-full p-4 md:h-auto rounded-2xl ${themeConfig.modal.content}`,
+    inner: `relative flex max-h-[90dvh] flex-col rounded-lg ${themeConfig.modal.inner}`,
+  },
+  body: {
+    base: `flex-1 overflow-auto p-6 ${themeConfig.modal.body}`,
+    popup: 'pt-0',
+  },
+  header: {
+    base: `flex items-start justify-between rounded-t border-b p-5 ${themeConfig.modal.header.border}`,
+    popup: 'border-b-0 p-2',
+    title: `text-xl font-medium ${themeConfig.modal.header.title}`,
+    close: {
+      base: `ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm ${themeConfig.modal.close.base}`,
+      icon: 'h-5 w-5',
+    },
+  },
+  footer: {
+    //@ts-ignore
+    base: `flex items-center space-x-2 rounded-b p-6 ${themeConfig.modal.footer.border}`,
+    popup: 'border-t',
+  },
+}
+
+export const customThemeTextInput = {
+  base: 'flex',
+  addon: `inline-flex items-center rounded-l-md border border-r-0 px-3 text-sm ${themeConfig.textInput.addon}`,
+  field: {
+    base: 'relative w-full',
+    icon: {
+      base: 'pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3',
+      svg: `h-5 w-5 ${themeConfig.textInput.icon}`,
+    },
+    rightIcon: {
+      base: 'pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3',
+      svg: `h-5 w-5 ${themeConfig.textInput.icon}`,
+    },
+    input: {
+      base: 'block w-full border disabled:cursor-not-allowed disabled:opacity-50',
+      sizes: {
+        sm: 'p-2 sm:text-xs',
+        md: 'p-2.5 text-sm',
+        lg: 'p-4 sm:text-base',
+      },
+      colors: {
+        gray: themeConfig.textInput.base,
+        info: 'border-blue-500 bg-white text-black focus:border-blue-500 focus:ring-blue-500 dark:border-blue-400 dark:bg-blue-100',
+        failure:
+          'border-red-500 bg-white text-black focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100',
+        warning:
+          'border-yellow-500 bg-white text-black focus:border-yellow-500 focus:ring-yellow-500 dark:border-yellow-400 dark:bg-yellow-100',
+        success:
+          'border-green-500 bg-white text-black focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100',
+      },
+    },
+  },
+}
+
+export const CustomThemeTextArea = {
+  base: 'block w-full rounded-lg border text-sm disabled:cursor-not-allowed disabled:opacity-50',
+  colors: {
+    gray: themeConfig.textArea.base,
+    info: 'border-blue-500 bg-white text-black placeholder-black focus:border-blue-500 focus:ring-blue-500 dark:border-blue-400 dark:bg-blue-100 dark:placeholder-blue-600',
+    failure:
+      'border-red-500 bg-white text-black placeholder-black focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:placeholder-red-600',
+    warning:
+      'border-yellow-500 bg-white text-black placeholder-black focus:border-yellow-500 focus:ring-yellow-500 dark:border-yellow-400 dark:bg-yellow-100 dark:placeholder-yellow-600',
+    success:
+      'border-green-500 bg-white text-black placeholder-black focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:placeholder-green-600',
+  },
+  withShadow: {
+    on: 'shadow-sm',
+    off: '',
+  },
+}
+
+export const CustomThemePagination: CustomFlowbiteTheme = {
+  //@ts-ignore
+  base: '',
+  layout: {
+    table: {
+      base: themeConfig.pagination.text,
+      span: `font-semibold ${themeConfig.pagination.span}`,
+    },
+  },
+  pages: {
+    base: 'xs:mt-0 mt-2 inline-flex items-center -space-x-px',
+    showIcon: 'inline-flex',
+    previous: {
+      base: `ml-0 rounded-l-lg border px-3 py-2 leading-tight enabled:hover:bg-gray-100 enabled:hover:text-black ${themeConfig.pagination.button}`,
+      icon: 'h-5 w-5',
+    },
+    next: {
+      base: `rounded-r-lg border px-3 py-2 leading-tight enabled:hover:bg-gray-100 enabled:hover:text-black ${themeConfig.pagination.button}`,
+      icon: 'h-5 w-5',
+    },
+    selector: {
+      base: `w-12 border py-2 leading-tight enabled:hover:bg-gray-100 enabled:hover:text-black ${themeConfig.pagination.button}`,
+      active: themeConfig.pagination.active,
+      disabled: 'cursor-not-allowed opacity-50',
+    },
+  },
+}
+
+export const CustomThemeBreadcrumb = {
+  root: {
+    base: '',
+    list: 'flex items-center',
+  },
+  item: {
+    base: '',
+    chevron: `mx-1 h-4 w-4 ${themeConfig.breadcrumb.separator}`,
+    href: {
+      off: `ml-1 text-sm font-medium ${themeConfig.breadcrumb.item} md:ml-2`,
+      on: `ml-1 text-sm font-medium ${themeConfig.breadcrumb.link} md:ml-2`,
+    },
+    icon: 'mr-2 h-4 w-4',
+  },
+}