diff --git a/README.md b/README.md
index 9fdc27cd..5081990d 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/pages/admin/add-unclaimed-node.tsx b/app/admin/add-unclaimed-node/page.tsx
similarity index 85%
rename from pages/admin/add-unclaimed-node.tsx
rename to app/admin/add-unclaimed-node/page.tsx
index edf38788..a9046960 100644
--- a/pages/admin/add-unclaimed-node.tsx
+++ b/app/admin/add-unclaimed-node/page.tsx
@@ -1,12 +1,11 @@
+'use client'
 import { Breadcrumb } from 'flowbite-react'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import { HiHome } from 'react-icons/hi'
 import withAdmin from '@/components/common/HOC/authAdmin'
 import { AdminCreateNodeFormModal } from '@/components/nodes/AdminCreateNodeFormModal'
 import { useNextTranslation } from '@/src/hooks/i18n'
 
-export default withAdmin(AddUnclaimedNodePage)
-
 function AddUnclaimedNodePage() {
   const { t } = useNextTranslation()
   const router = useRouter()
@@ -53,3 +52,9 @@ function AddUnclaimedNodePage() {
     </div>
   )
 }
+
+// TODO: Re-enable withAdmin after migrating HOC to App Router
+// const Wrapped = withAdmin(AddUnclaimedNodePage)
+export default AddUnclaimedNodePage
+
+export const dynamic = 'force-dynamic'
diff --git a/pages/admin/claim-nodes.tsx b/app/admin/claim-nodes/page.tsx
similarity index 87%
rename from pages/admin/claim-nodes.tsx
rename to app/admin/claim-nodes/page.tsx
index b7463ebc..b3cc1d76 100644
--- a/pages/admin/claim-nodes.tsx
+++ b/app/admin/claim-nodes/page.tsx
@@ -1,6 +1,7 @@
+'use client'
 import { useQueryClient } from '@tanstack/react-query'
 import { Breadcrumb, Button, Spinner } from 'flowbite-react'
-import { useRouter } from 'next/router'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { HiHome, HiPlus } from 'react-icons/hi'
 import { CustomPagination } from '@/components/common/CustomPagination'
 import withAdmin from '@/components/common/HOC/authAdmin'
@@ -12,27 +13,26 @@ import {
 import { UNCLAIMED_ADMIN_PUBLISHER_ID } from '@/src/constants'
 import { useNextTranslation } from '@/src/hooks/i18n'
 
-export default withAdmin(ClaimNodesPage)
 function ClaimNodesPage() {
   const { t } = useNextTranslation()
   const router = useRouter()
+  const searchParams = useSearchParams()
   const queryClient = useQueryClient()
   const pageSize = 36
+
   // Get page from URL query params, defaulting to 1
-  const currentPage = router.query.page
-    ? parseInt(router.query.page as string, 10)
+  const currentPage = searchParams?.get('page')
+    ? parseInt(searchParams?.get('page')!, 10)
     : 1
 
   const handlePageChange = (page: number) => {
     // Update URL with new page parameter
-    router.push(
-      { pathname: router.pathname, query: { ...router.query, page } },
-      undefined,
-      { shallow: true }
-    )
+    const params = new URLSearchParams(searchParams?.toString())
+    params.set('page', page.toString())
+    router.push(`/admin/claim-nodes?${params.toString()}`)
   }
 
-  // Use the page from router.query for the API call
+  // Use the page from searchParams for the API call
   const { data, isError, isLoading } = useListNodesForPublisherV2(
     UNCLAIMED_ADMIN_PUBLISHER_ID,
     { page: currentPage, limit: pageSize }
@@ -147,3 +147,10 @@ function ClaimNodesPage() {
     </div>
   )
 }
+
+// TODO: Re-enable withAdmin after migrating HOC to App Router
+// const Wrapped = withAdmin(ClaimNodesPage)
+
+export default ClaimNodesPage
+
+export const dynamic = 'force-dynamic'
diff --git a/pages/admin/node-version-compatibility.tsx b/app/admin/node-version-compatibility/page.tsx
similarity index 98%
rename from pages/admin/node-version-compatibility.tsx
rename to app/admin/node-version-compatibility/page.tsx
index 4c84ed3a..8b6c14be 100644
--- a/pages/admin/node-version-compatibility.tsx
+++ b/app/admin/node-version-compatibility/page.tsx
@@ -1,3 +1,4 @@
+'use client'
 import { useQueryClient } from '@tanstack/react-query'
 import clsx from 'clsx'
 import {
@@ -12,7 +13,7 @@ import {
   TextInput,
   Tooltip,
 } from 'flowbite-react'
-import router from 'next/router'
+import { useRouter } from 'next/navigation'
 import DIE, { DIES } from 'phpdie'
 import React, { Suspense, useEffect, useMemo, useState } from 'react'
 import { HiHome } from 'react-icons/hi'
@@ -50,10 +51,9 @@ import { useSearchParameter } from '@/src/hooks/useSearchParameter'
 import { NodeVersionStatusToReadable } from '@/src/mapper/nodeversion'
 
 // This page allows admins to update node version compatibility fields
-export default withAdmin(NodeVersionCompatibilityAdmin)
-
 function NodeVersionCompatibilityAdmin() {
   const { t } = useNextTranslation()
+  const router = useRouter()
   const [_page, setPage] = usePage()
 
   // search
@@ -636,3 +636,10 @@ function isNodeCompatibilityInfoOutdated(node: Node | null) {
     false
   )
 }
+
+// TODO: Re-enable withAdmin after migrating HOC to App Router
+// const Wrapped = withAdmin(NodeVersionCompatibilityAdmin)
+
+export default NodeVersionCompatibilityAdmin
+
+export const dynamic = 'force-dynamic'
diff --git a/pages/admin/nodes.tsx b/app/admin/nodes/page.tsx
similarity index 92%
rename from pages/admin/nodes.tsx
rename to app/admin/nodes/page.tsx
index 8dfcf1bf..0697aa3f 100644
--- a/pages/admin/nodes.tsx
+++ b/app/admin/nodes/page.tsx
@@ -1,3 +1,4 @@
+'use client'
 import { useQueryClient } from '@tanstack/react-query'
 import clsx from 'clsx'
 import {
@@ -10,9 +11,9 @@ import {
   TextInput,
 } from 'flowbite-react'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { omit } from 'rambda'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { HiHome, HiOutlineX, HiPencil } from 'react-icons/hi'
 import { MdOpenInNew } from 'react-icons/md'
 import { toast } from 'react-toastify'
@@ -32,6 +33,7 @@ import { useNextTranslation } from '@/src/hooks/i18n'
 function NodeList() {
   const { t } = useNextTranslation()
   const router = useRouter()
+  const searchParams = useSearchParams()
   const [page, setPage] = React.useState<number>(1)
   const [editingNode, setEditingNode] = useState<Node | null>(null)
   const [editFormData, setEditFormData] = useState({
@@ -44,10 +46,11 @@ function NodeList() {
 
   // Handle page from URL
   React.useEffect(() => {
-    if (router.query.page) {
-      setPage(parseInt(router.query.page as string))
+    const pageParam = searchParams?.get('page')
+    if (pageParam) {
+      setPage(parseInt(pageParam))
     }
-  }, [router.query.page])
+  }, [searchParams])
 
   // Status filter functionality
   const statusFlags = {
@@ -73,7 +76,7 @@ function NodeList() {
   const allStatuses = [...Object.values(statusFlags)].sort()
 
   const defaultSelectedStatuses = [
-    (router.query as any)?.status ?? Object.keys(statusFlags),
+    searchParams?.get('status') ?? Object.keys(statusFlags),
   ]
     .flat()
     .map((status) => statusFlags[status])
@@ -91,29 +94,28 @@ function NodeList() {
     const checkedAll =
       allStatuses.join(',').toString() ===
       [...statuses].sort().join(',').toString()
-    const searchParams = checkedAll
-      ? undefined
-      : ({
-          status: Object.entries(statusFlags)
-            .filter(([status, s]) => statuses.includes(s))
-            .map(([status]) => status),
-        } as any)
-    const search = new URLSearchParams({
-      ...(omit('status')(router.query) as object),
-      ...searchParams,
-    })
-      .toString()
-      .replace(/^(?!$)/, '?')
-    const hash = router.asPath.split('#')[1]
-      ? `#${router.asPath.split('#')[1]}`
-      : ''
-    router.push(`${router.pathname}${search}${hash}`)
+
+    const params = new URLSearchParams(searchParams?.toString())
+
+    if (!checkedAll) {
+      // Remove existing status params
+      params.delete('status')
+      // Add new status params
+      Object.entries(statusFlags)
+        .filter(([status, s]) => statuses.includes(s))
+        .forEach(([status]) => {
+          params.append('status', status)
+        })
+    } else {
+      params.delete('status')
+    }
+
+    const hash = window.location.hash
+    router.push(`/admin/nodes?${params.toString()}${hash}`)
   }
 
   // Search filter
-  const queryForNodeId = Array.isArray(router.query.nodeId)
-    ? router.query.nodeId[0]
-    : router.query.nodeId
+  const queryForNodeId = searchParams?.get('nodeId')
 
   const getAllNodesQuery = useListAllNodes({
     page: page,
@@ -163,14 +165,9 @@ function NodeList() {
 
   const handlePageChange = (newPage: number) => {
     setPage(newPage)
-    router.push(
-      {
-        pathname: router.pathname,
-        query: { ...router.query, page: newPage },
-      },
-      undefined,
-      { shallow: true }
-    )
+    const params = new URLSearchParams(searchParams?.toString())
+    params.set('page', newPage.toString())
+    router.push(`/admin/nodes?${params.toString()}`)
   }
 
   const openEditModal = (node: Node) => {
@@ -305,16 +302,16 @@ function NodeList() {
               'filter-node-id'
             ) as HTMLInputElement
             const nodeId = inputElement.value.trim()
-            const searchParams = new URLSearchParams({
-              ...(omit(['nodeId'])(router.query) as object),
-              ...(nodeId ? { nodeId } : {}),
-            })
-              .toString()
-              .replace(/^(?!$)/, '?')
-            const hash = router.asPath.split('#')[1]
-              ? `#${router.asPath.split('#')[1]}`
-              : ''
-            router.push(router.pathname + searchParams + hash)
+            const params = new URLSearchParams(searchParams?.toString())
+
+            if (nodeId) {
+              params.set('nodeId', nodeId)
+            } else {
+              params.delete('nodeId')
+            }
+
+            const hash = window.location.hash
+            router.push(`/admin/nodes?${params.toString()}${hash}`)
           }}
         >
           <TextInput
@@ -656,4 +653,9 @@ function NodeList() {
   )
 }
 
-export default withAdmin(NodeList)
+// TODO: Re-enable withAdmin after migrating HOC to App Router
+// const Wrapped = withAdmin(NodeList)
+
+export default NodeList
+
+export const dynamic = 'force-dynamic'
diff --git a/pages/admin/nodeversions.tsx b/app/admin/nodeversions/page.tsx
similarity index 86%
rename from pages/admin/nodeversions.tsx
rename to app/admin/nodeversions/page.tsx
index 9fb9e61e..413c5ed8 100644
--- a/pages/admin/nodeversions.tsx
+++ b/app/admin/nodeversions/page.tsx
@@ -1,3 +1,4 @@
+'use client'
 import { useQueryClient } from '@tanstack/react-query'
 import clsx from 'clsx'
 import {
@@ -11,7 +12,7 @@ import {
   Tooltip,
 } from 'flowbite-react'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
+import { useRouter, useSearchParams } from 'next/navigation'
 import pMap from 'p-map'
 import { omit } from 'rambda'
 import React, { useRef, useState } from 'react'
@@ -45,6 +46,7 @@ import { generateBatchId } from '@/utils/batchUtils'
 function NodeVersionList({}) {
   const { t } = useNextTranslation()
   const router = useRouter()
+  const searchParams = useSearchParams()
   const [page, setPage] = React.useState<number>(1)
   const [selectedVersions, setSelectedVersions] = useState<{
     [key: string]: boolean
@@ -58,12 +60,13 @@ function NodeVersionList({}) {
   // Contact button, send issues or email to node version publisher
   const [mailtoNv, setMailtoNv] = useState<NodeVersion | null>(null)
 
-  // todo: optimize this, use fallback value instead of useEffect
+  // Handle page from URL
   React.useEffect(() => {
-    if (router.query.page) {
-      setPage(parseInt(router.query.page as string))
+    const pageParam = searchParams?.get('page')
+    if (pageParam) {
+      setPage(parseInt(pageParam))
     }
-  }, [router.query.page])
+  }, [searchParams])
 
   // allows filter by search param like /admin/nodeversions?filter=flagged&filter=pending
   const flags = {
@@ -72,7 +75,8 @@ function NodeVersionList({}) {
     deleted: NodeVersionStatus.NodeVersionStatusDeleted,
     pending: NodeVersionStatus.NodeVersionStatusPending,
     active: NodeVersionStatus.NodeVersionStatusActive,
-  } satisfies Record<string, NodeVersionStatus> // 'satisfies' requires latest typescript
+  } satisfies Record<string, NodeVersionStatus>
+
   const flagColors = {
     all: 'success',
     flagged: 'warning',
@@ -92,7 +96,7 @@ function NodeVersionList({}) {
   const allFlags = [...Object.values(flags)].sort()
 
   const defaultSelectedStatus = [
-    (router.query as any)?.filter ?? Object.keys(flags),
+    searchParams?.get('filter') ?? Object.keys(flags),
   ]
     .flat()
     .map((flag) => flags[flag])
@@ -106,32 +110,30 @@ function NodeVersionList({}) {
 
     const checkedAll =
       allFlags.join(',').toString() === [...status].sort().join(',').toString()
-    const searchParams = checkedAll
-      ? undefined
-      : ({
-          filter: Object.entries(flags)
-            .filter(([flag, s]) => status.includes(s))
-            .map(([flag]) => flag),
-        } as any)
-    const search = new URLSearchParams({
-      ...(omit('filter')(router.query) as object),
-      ...searchParams,
-    })
-      .toString()
-      .replace(/^(?!$)/, '?')
-    const hash = router.asPath.split('#')[1]
-      ? `#${router.asPath.split('#')[1]}`
-      : ''
-    router.push(`${router.pathname}${search}${hash}`)
+
+    const params = new URLSearchParams(searchParams?.toString())
+
+    if (!checkedAll) {
+      params.delete('filter')
+      Object.entries(flags)
+        .filter(([flag, s]) => status.includes(s))
+        .forEach(([flag]) => {
+          params.append('filter', flag)
+        })
+    } else {
+      params.delete('filter')
+    }
+
+    const hash = window.location.hash
+    router.push(`/admin/nodeversions?${params.toString()}${hash}`)
   }
 
   const [isAdminCreateNodeModalOpen, setIsAdminCreateNodeModalOpen] =
     useState(false)
 
-  const queryForNodeId = Array.isArray(router.query.nodeId)
-    ? router.query.nodeId[0]
-    : router.query.nodeId
-  const queryForStatusReason = router.query.statusReason as string
+  const queryForNodeId = searchParams?.get('nodeId')
+  const queryForStatusReason = searchParams?.get('statusReason')
+  const queryForVersion = searchParams?.get('version')
 
   const getAllNodeVersionsQuery = useListAllNodeVersions({
     page: page,
@@ -142,9 +144,6 @@ function NodeVersionList({}) {
     nodeId: queryForNodeId || undefined,
   })
 
-  // todo: also implement this in the backend
-  const queryForVersion = router.query.version as string
-
   const versions =
     (getAllNodeVersionsQuery.data?.versions || [])?.filter((nv) => {
       if (queryForVersion) return nv.version === queryForVersion
@@ -169,15 +168,15 @@ function NodeVersionList({}) {
     nodeVersion: NodeVersion
     status: NodeVersionStatus
     message: string
-    batchId?: string // Optional batchId for batch operations
+    batchId?: string
   }) {
     // parse previous status reason with fallbacks
     const prevStatusReasonJson = parseJsonSafe(nv.status_reason).data
     const prevStatusReason = zStatusReason.safeParse(prevStatusReasonJson).data
     const previousHistory = prevStatusReason?.statusHistory ?? []
-    const previousStatus = nv.status ?? 'Unknown Status' // should not happen
-    const previousMessage = prevStatusReason?.message ?? nv.status_reason ?? '' // use raw msg if fail to parse json
-    const previousBy = prevStatusReason?.by ?? 'admin@comfy.org' // unknown admin
+    const previousStatus = nv.status ?? 'Unknown Status'
+    const previousMessage = prevStatusReason?.message ?? nv.status_reason ?? ''
+    const previousBy = prevStatusReason?.by ?? 'admin@comfy.org'
 
     // concat history
     const statusHistory = [
@@ -188,14 +187,13 @@ function NodeVersionList({}) {
         by: previousBy,
       },
     ]
-    // console.log('History', statusHistory)
 
     // updated status reason, with history and optionally batchId
     const reason = zStatusReason.parse({
       message,
-      by: user?.email ?? 'admin@comfy.org', // if user is not loaded, use 'Admin'
+      by: user?.email ?? 'admin@comfy.org',
       statusHistory,
-      ...(batchId ? { batchId } : {}), // Include batchId if provided
+      ...(batchId ? { batchId } : {}),
     })
     await updateNodeVersionMutation.mutateAsync(
       {
@@ -244,9 +242,9 @@ function NodeVersionList({}) {
     const prevStatusReasonJson = parseJsonSafe(nv.status_reason).data
     const prevStatusReason = zStatusReason.safeParse(prevStatusReasonJson).data
     const previousHistory = prevStatusReason?.statusHistory ?? []
-    const previousStatus = nv.status ?? 'Unknown Status' // should not happen
-    const previousMessage = prevStatusReason?.message ?? nv.status_reason ?? '' // use raw msg if fail to parse json
-    const previousBy = prevStatusReason?.by ?? 'admin@comfy.org' // unknown admin
+    const previousStatus = nv.status ?? 'Unknown Status'
+    const previousMessage = prevStatusReason?.message ?? nv.status_reason ?? ''
+    const previousBy = prevStatusReason?.by ?? 'admin@comfy.org'
 
     // concat history
     const statusHistory = [
@@ -263,7 +261,7 @@ function NodeVersionList({}) {
       message,
       by: user?.email ?? 'admin@comfy.org',
       statusHistory,
-      batchId, // Include the batchId for future undo-a-batch functionality
+      batchId,
     })
 
     await updateNodeVersionMutation.mutateAsync(
@@ -302,9 +300,9 @@ function NodeVersionList({}) {
     const prevStatusReasonJson = parseJsonSafe(nv.status_reason).data
     const prevStatusReason = zStatusReason.safeParse(prevStatusReasonJson).data
     const previousHistory = prevStatusReason?.statusHistory ?? []
-    const previousStatus = nv.status ?? 'Unknown Status' // should not happen
-    const previousMessage = prevStatusReason?.message ?? nv.status_reason ?? '' // use raw msg if fail to parse json
-    const previousBy = prevStatusReason?.by ?? 'admin@comfy.org' // unknown admin
+    const previousStatus = nv.status ?? 'Unknown Status'
+    const previousMessage = prevStatusReason?.message ?? nv.status_reason ?? ''
+    const previousBy = prevStatusReason?.by ?? 'admin@comfy.org'
 
     // concat history
     const statusHistory = [
@@ -321,7 +319,7 @@ function NodeVersionList({}) {
       message,
       by: user?.email ?? 'admin@comfy.org',
       statusHistory,
-      batchId, // Include the batchId for future undo-a-batch functionality
+      batchId,
     })
 
     await updateNodeVersionMutation.mutateAsync(
@@ -378,7 +376,7 @@ function NodeVersionList({}) {
       nodeVersion: nv,
       status: NodeVersionStatus.NodeVersionStatusActive,
       message,
-      batchId, // Pass batchId to onReview if provided
+      batchId,
     })
     toast.success(
       t('{{id}}@{{version}} Approved', {
@@ -387,6 +385,7 @@ function NodeVersionList({}) {
       })
     )
   }
+
   const onReject = async (
     nv: NodeVersion,
     message?: string | null,
@@ -408,7 +407,7 @@ function NodeVersionList({}) {
       nodeVersion: nv,
       status: NodeVersionStatus.NodeVersionStatusBanned,
       message,
-      batchId, // Pass batchId to onReview if provided
+      batchId,
     })
     toast.success(
       t('{{id}}@{{version}} Rejected', {
@@ -417,6 +416,7 @@ function NodeVersionList({}) {
       })
     )
   }
+
   const checkIsUndoable = (nv: NodeVersion) =>
     !!zStatusReason.safeParse(parseJsonSafe(nv.status_reason).data).data
       ?.statusHistory?.length
@@ -442,51 +442,6 @@ function NodeVersionList({}) {
       )
       return
     }
-
-    // todo: search for this batchId and get a list of nodeVersions
-    //
-    // and show the list for confirmation
-    //
-    // and undo all of them
-
-    // // Ask for confirmation
-    // if (
-    //     !confirm(
-    //         `Do you want to undo the entire batch with ID: ${statusReason.batchId}?`
-    //     )
-    // ) {
-    //     return
-    // }
-
-    // const batchId = statusReason.batchId
-
-    // // Find all node versions in the current view that have the same batch ID
-    // const batchNodes = versions.filter((v) => {
-    //     const vStatusReason = zStatusReason.safeParse(
-    //         parseJsonSafe(v.status_reason).data
-    //     ).data
-    //     return vStatusReason?.batchId === batchId
-    // })
-
-    // if (batchNodes.length === 0) {
-    //     toast.error(`No nodes found with batch ID: ${batchId}`)
-    //     return
-    // }
-
-    // toast.info(
-    //     `Undoing batch with ID: ${batchId} (${batchNodes.length} nodes)`
-    // )
-
-    // // Process all items in the batch using the undo function
-    // await pMap(
-    //     batchNodes,
-    //     async (nodeVersion) => {
-    //         await onUndo(nodeVersion)
-    //     },
-    //     { concurrency: 5, stopOnError: false }
-    // )
-
-    // toast.success(`Successfully undid batch with ID: ${batchId}`)
   }
 
   const onUndo = async (nv: NodeVersion) => {
@@ -502,7 +457,7 @@ function NodeVersionList({}) {
       )
 
     const prevStatus = statusHistory[statusHistory.length - 1].status
-    const by = user?.email // the user who clicked undo
+    const by = user?.email
     if (!by) {
       toast.error(t('Unable to get user email, please reload and try again'))
       return
@@ -569,7 +524,6 @@ function NodeVersionList({}) {
       return
     }
 
-    // setBatchAction('')
     setIsBatchModalOpen(true)
   }
 
@@ -648,14 +602,9 @@ function NodeVersionList({}) {
 
   const handlePageChange = (newPage: number) => {
     setPage(newPage)
-    router.push(
-      {
-        pathname: router.pathname,
-        query: { ...router.query, page: newPage },
-      },
-      undefined,
-      { shallow: true }
-    )
+    const params = new URLSearchParams(searchParams?.toString())
+    params.set('page', newPage.toString())
+    router.push(`/admin/nodeversions?${params.toString()}`)
   }
 
   const BatchOperationBar = () => {
@@ -850,17 +799,22 @@ function NodeVersionList({}) {
               'filter-node-version'
             ) as HTMLInputElement
             const [nodeId, version] = inputElement.value.split('@')
-            const searchParams = new URLSearchParams({
-              ...(omit(['nodeId', 'version'])(router.query) as object),
-              ...(nodeId ? { nodeId } : {}),
-              ...(version ? { version } : {}),
-            })
-              .toString()
-              .replace(/^(?!$)/, '?')
-            const hash = router.asPath.split('#')[1]
-              ? `#${router.asPath.split('#')[1]}`
-              : ''
-            router.push(router.pathname + searchParams + hash)
+            const params = new URLSearchParams(searchParams?.toString())
+
+            if (nodeId) {
+              params.set('nodeId', nodeId)
+            } else {
+              params.delete('nodeId')
+            }
+
+            if (version) {
+              params.set('version', version)
+            } else {
+              params.delete('version')
+            }
+
+            const hash = window.location.hash
+            router.push(`/admin/nodeversions?${params.toString()}${hash}`)
           }}
         >
           <TextInput
@@ -885,16 +839,16 @@ function NodeVersionList({}) {
               'filter-status-reason'
             ) as HTMLInputElement
             const statusReason = inputElement.value.trim()
-            const searchParams = new URLSearchParams({
-              ...(omit(['statusReason'])(router.query) as object),
-              ...(statusReason ? { statusReason } : {}),
-            })
-              .toString()
-              .replace(/^(?!$)/, '?')
-            const hash = router.asPath.split('#')[1]
-              ? `#${router.asPath.split('#')[1]}`
-              : ''
-            router.push(router.pathname + searchParams + hash)
+            const params = new URLSearchParams(searchParams?.toString())
+
+            if (statusReason) {
+              params.set('statusReason', statusReason)
+            } else {
+              params.delete('statusReason')
+            }
+
+            const hash = window.location.hash
+            router.push(`/admin/nodeversions?${params.toString()}${hash}`)
           }}
         >
           <TextInput
@@ -912,7 +866,6 @@ function NodeVersionList({}) {
                 : 'gray'
             }
             className={clsx({
-              // use tailwind add a filter set bright 50% if not selected
               'brightness-50': !(
                 selectedStatus.length >= Object.keys(flags).length
               ),
@@ -931,7 +884,6 @@ function NodeVersionList({}) {
               key={flag}
               color={flagColors[flag]}
               className={clsx({
-                // use tailwind add a filter set bright 50% if not selected
                 'brightness-50': !selectedStatus.includes(status),
                 'hover:brightness-100': !selectedStatus.includes(status),
                 'transition-all duration-200': true,
@@ -1026,9 +978,6 @@ function NodeVersionList({}) {
                 <Label
                   htmlFor={`checkbox-${nv.id}`}
                   className="text-[24px] text-gray-300 flex gap-2 items-center"
-                  // onMouseDown={(e) =>
-                  //     e.shiftKey && e.preventDefault()
-                  // }
                 >
                   {nv.node_id}
 
@@ -1134,4 +1083,9 @@ function NodeVersionList({}) {
   )
 }
 
-export default withAdmin(NodeVersionList)
+// TODO: Re-enable withAdmin after migrating HOC to App Router
+// const Wrapped = withAdmin(NodeVersionList)
+
+export default NodeVersionList
+
+export const dynamic = 'force-dynamic'
diff --git a/pages/admin/index.tsx b/app/admin/page.tsx
similarity index 93%
rename from pages/admin/index.tsx
rename to app/admin/page.tsx
index 9be9c9c1..22e95b79 100644
--- a/pages/admin/index.tsx
+++ b/app/admin/page.tsx
@@ -1,21 +1,18 @@
+'use client'
+
 import { Breadcrumb } from 'flowbite-react'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
 import {
   HiHome,
   HiOutlineAdjustments,
   HiOutlineClipboardCheck,
   HiOutlineCollection,
-  HiOutlineDuplicate,
-  HiOutlineSupport,
 } from 'react-icons/hi'
 import AdminTreeNavigation from '@/components/admin/AdminTreeNavigation'
 import withAdmin from '@/components/common/HOC/authAdmin'
 import { useNextTranslation } from '@/src/hooks/i18n'
 
-export default withAdmin(AdminDashboard)
 function AdminDashboard() {
-  const router = useRouter()
   const { t } = useNextTranslation()
 
   return (
@@ -79,3 +76,11 @@ function AdminDashboard() {
     </div>
   )
 }
+
+const WrappedAdminDashboard = withAdmin(AdminDashboard)
+
+export default function Page() {
+  return <WrappedAdminDashboard />
+}
+
+export const dynamic = 'force-dynamic'
diff --git a/pages/admin/preempted-comfy-node-names.tsx b/app/admin/preempted-comfy-node-names/page.tsx
similarity index 95%
rename from pages/admin/preempted-comfy-node-names.tsx
rename to app/admin/preempted-comfy-node-names/page.tsx
index 7b2a34f7..124715cf 100644
--- a/pages/admin/preempted-comfy-node-names.tsx
+++ b/app/admin/preempted-comfy-node-names/page.tsx
@@ -1,10 +1,11 @@
+'use client'
 import { Breadcrumb, Button, Spinner, TextInput } from 'flowbite-react'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 import { HiHome } from 'react-icons/hi'
 import { MdEdit } from 'react-icons/md'
-import { useRouterQuery } from 'src/hooks/useRouterQuery'
+import { useRouterQuery } from 'src/hooks/useRouterQuery.app'
 import { CustomPagination } from '@/components/common/CustomPagination'
 import withAdmin from '@/components/common/HOC/authAdmin'
 import { formatDownloadCount } from '@/components/nodes/NodeDetails'
@@ -211,4 +212,9 @@ function PreemptedComfyNodeNamesAdminPage() {
   )
 }
 
-export default withAdmin(PreemptedComfyNodeNamesAdminPage)
+// TODO: Re-enable withAdmin after migrating HOC to App Router
+// const Wrapped = withAdmin(PreemptedComfyNodeNamesAdminPage)
+
+export default PreemptedComfyNodeNamesAdminPage
+
+export const dynamic = 'force-dynamic'
diff --git a/pages/admin/search-ranking.tsx b/app/admin/search-ranking/page.tsx
similarity index 95%
rename from pages/admin/search-ranking.tsx
rename to app/admin/search-ranking/page.tsx
index 3a1fb9bd..00890fd6 100644
--- a/pages/admin/search-ranking.tsx
+++ b/app/admin/search-ranking/page.tsx
@@ -1,10 +1,11 @@
+'use client'
 import { Breadcrumb, Button, Spinner, TextInput } from 'flowbite-react'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 import { HiHome } from 'react-icons/hi'
 import { MdEdit } from 'react-icons/md'
-import { useRouterQuery } from 'src/hooks/useRouterQuery'
+import { useRouterQuery } from 'src/hooks/useRouterQuery.app'
 import { CustomPagination } from '@/components/common/CustomPagination'
 import withAdmin from '@/components/common/HOC/authAdmin'
 import { formatDownloadCount } from '@/components/nodes/NodeDetails'
@@ -207,4 +208,9 @@ function SearchRankingAdminPage() {
   )
 }
 
-export default withAdmin(SearchRankingAdminPage)
+// TODO: Re-enable withAdmin after migrating HOC to App Router
+// const Wrapped = withAdmin(SearchRankingAdminPage)
+
+export default SearchRankingAdminPage
+
+export const dynamic = 'force-dynamic'
diff --git a/app/auth/login/page.tsx b/app/auth/login/page.tsx
new file mode 100644
index 00000000..8fcc2543
--- /dev/null
+++ b/app/auth/login/page.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import SignIn from '@/components/AuthUI/AuthUI'
+
+export default function SignInPage() {
+  return <SignIn />
+}
diff --git a/app/auth/logout/page.tsx b/app/auth/logout/page.tsx
new file mode 100644
index 00000000..aee76c95
--- /dev/null
+++ b/app/auth/logout/page.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import Logout from '@/components/AuthUI/Logout'
+
+export default function LogoutPage() {
+  return <Logout />
+}
diff --git a/app/auth/signup/page.tsx b/app/auth/signup/page.tsx
new file mode 100644
index 00000000..7594f580
--- /dev/null
+++ b/app/auth/signup/page.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import SignIn from '@/components/AuthUI/AuthUI'
+
+export default function SignUpPage() {
+  return <SignIn />
+}
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 00000000..a07231f8
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,32 @@
+import { Metadata } from 'next'
+import { Providers } from './providers'
+import '../styles/globals.css'
+
+export const metadata: Metadata = {
+  title: 'ComfyUI Registry',
+  description: 'Discover and install ComfyUI custom nodes.',
+  icons: {
+    icon: '/favicon.ico',
+  },
+}
+
+export const dynamic = 'force-dynamic'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  // TODO: Re-implement i18n configuration for App Router
+  // For now, default to 'en' locale and 'ltr' direction
+  const locale = 'en'
+  const dir = 'ltr'
+
+  return (
+    <html lang={locale} dir={dir}>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}
diff --git a/pages/nodes/[nodeId]/claim.tsx b/app/nodes/[nodeId]/claim/page.tsx
similarity index 96%
rename from pages/nodes/[nodeId]/claim.tsx
rename to app/nodes/[nodeId]/claim/page.tsx
index 7573e338..7bf6e85a 100644
--- a/pages/nodes/[nodeId]/claim.tsx
+++ b/app/nodes/[nodeId]/claim/page.tsx
@@ -1,7 +1,8 @@
+'use client'
 import { Button, Spinner } from 'flowbite-react'
 import Head from 'next/head'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
+import { useParams, useRouter } from 'next/navigation'
 import { useState } from 'react'
 import { toast } from 'react-toastify'
 import analytic from 'src/analytic/analytic'
@@ -11,12 +12,11 @@ import withAuth from '@/components/common/HOC/withAuth'
 import CreatePublisherModal from '@/components/publisher/CreatePublisherModal'
 import { useNextTranslation } from '@/src/hooks/i18n'
 
-export default withAuth(ClaimNodePage)
-
 function ClaimNodePage() {
   const { t } = useNextTranslation()
   const router = useRouter()
-  const { nodeId } = router.query
+  const params = useParams()
+  const nodeId = params?.nodeId as string
   const [selectedPublisherId, setSelectedPublisherId] = useState<string | null>(
     null
   )
@@ -24,7 +24,7 @@ function ClaimNodePage() {
     useState(false)
 
   // Get the node details
-  const { data: node, isLoading: nodeLoading } = useGetNode(nodeId as string)
+  const { data: node, isLoading: nodeLoading } = useGetNode(nodeId)
 
   // Get user's publishers
   const {
@@ -241,3 +241,7 @@ function ClaimNodePage() {
     </div>
   )
 }
+
+// TODO: Re-enable withAuth after migrating HOC to App Router
+// export default withAuth(ClaimNodePage)
+export default ClaimNodePage
diff --git a/pages/nodes/[nodeId].tsx b/app/nodes/[nodeId]/page.tsx
similarity index 76%
rename from pages/nodes/[nodeId].tsx
rename to app/nodes/[nodeId]/page.tsx
index 525af5e9..4f240134 100644
--- a/pages/nodes/[nodeId].tsx
+++ b/app/nodes/[nodeId]/page.tsx
@@ -1,12 +1,14 @@
+'use client'
 import { Breadcrumb } from 'flowbite-react'
-import { useRouter } from 'next/router'
+import { useParams, useRouter } from 'next/navigation'
 import { HiHome } from 'react-icons/hi'
+import NodeDetails from '@/components/nodes/NodeDetails'
 import { useNextTranslation } from '@/src/hooks/i18n'
-import NodeDetails from '../../components/nodes/NodeDetails'
 
-const NodeView = () => {
+export default function NodeView() {
   const router = useRouter()
-  const { nodeId } = router.query
+  const params = useParams()
+  const nodeId = params?.nodeId as string
   const { t } = useNextTranslation()
 
   return (
@@ -26,7 +28,7 @@ const NodeView = () => {
           </Breadcrumb.Item>
           <Breadcrumb.Item className="dark">{t('All Nodes')}</Breadcrumb.Item>
           <Breadcrumb.Item className="dark text-blue-500">
-            {nodeId as string}
+            {nodeId}
           </Breadcrumb.Item>
         </Breadcrumb>
       </div>
@@ -35,5 +37,3 @@ const NodeView = () => {
     </div>
   )
 }
-
-export default NodeView
diff --git a/app/nodes/page.tsx b/app/nodes/page.tsx
new file mode 100644
index 00000000..431ca841
--- /dev/null
+++ b/app/nodes/page.tsx
@@ -0,0 +1,5 @@
+import Registry from '@/components/registry/Registry'
+
+export default function NodeList() {
+  return <Registry />
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 00000000..722108e4
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,5 @@
+import Registry from '@/components/registry/Registry'
+
+export default function Home() {
+  return <Registry />
+}
diff --git a/app/providers.tsx b/app/providers.tsx
new file mode 100644
index 00000000..86d529d8
--- /dev/null
+++ b/app/providers.tsx
@@ -0,0 +1,126 @@
+'use client'
+
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { persistQueryClient } from '@tanstack/react-query-persist-client'
+import { AxiosResponse } from 'axios'
+import { getAuth } from 'firebase/auth'
+import { ThemeModeScript } from 'flowbite-react'
+import { useEffect, useState } from 'react'
+import { ToastContainer } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+import { DIE } from 'phpdie'
+import FlowBiteThemeProvider from '@/components/flowbite-theme'
+import Layout from '@/components/layout'
+import { AXIOS_INSTANCE } from '@/src/api/mutator/axios-instance'
+import app from '@/src/firebase'
+
+// Add an interceptor to attach the Firebase JWT token to every request
+AXIOS_INSTANCE.interceptors.request.use(async (config) => {
+  const auth = getAuth(app)
+  const user = auth.currentUser
+  if (user) {
+    const token = await user.getIdToken()
+    sessionStorage.setItem('idToken', token)
+    config.headers.Authorization = `Bearer ${token}`
+  } else {
+    const cachedIdtoken = sessionStorage.getItem('idToken') ?? ''
+    if (cachedIdtoken) config.headers.Authorization = `Bearer ${cachedIdtoken}`
+  }
+  return config
+})
+
+const createQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: (failureCount, error: any) => {
+          // Don't retry on 404s
+          if (error?.response?.status === 404) return false
+
+          // Retry up to 3 times for other errors
+          return failureCount < 3
+        },
+        staleTime: 0, // set to 0 to always query fresh data when page refreshed, and render staled data while requesting (swr)
+        gcTime: 86400e3,
+      },
+    },
+  })
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(() => createQueryClient())
+
+  useEffect(() => {
+    // General localStorage cache invalidation for all endpoints
+    // This interceptor ensures users always have the latest data after edit.
+    const responseInterceptor = AXIOS_INSTANCE.interceptors.response.use(
+      function onSuccess(response: AxiosResponse) {
+        const req = response.config
+        if (!req.url) return response
+
+        const baseURL =
+          req.baseURL ??
+          globalThis.location.origin ??
+          DIE('Remember to fill window.location when testing axios')
+        const pathname = new URL(req.url, baseURL).pathname
+
+        const isCreateMethod = ['POST'].includes(
+          req.method!.toUpperCase() ?? ''
+        )
+        const isEditMethod = ['PUT', 'PATCH', 'DELETE'].includes(
+          req.method!.toUpperCase() ?? ''
+        )
+
+        if (isCreateMethod) {
+          queryClient.invalidateQueries({ queryKey: [pathname] })
+        }
+        if (isEditMethod) {
+          queryClient.invalidateQueries({ queryKey: [pathname] })
+          queryClient.invalidateQueries({
+            queryKey: [pathname.split('/').slice(0, -1).join('/')],
+          })
+        }
+        return response
+      },
+      (error) => {
+        return Promise.reject(error)
+      }
+    )
+
+    // Persist query client
+    const [unsubscribe] = persistQueryClient({
+      queryClient: queryClient as any,
+      persister: createSyncStoragePersister({
+        storage: window.localStorage,
+        key: 'comfy-registry-cache',
+      }),
+      // Only persist queries with these query keys
+      dehydrateOptions: {
+        shouldDehydrateQuery: ({ queryKey, state }) => {
+          // Don't persist pending queries as they can't be properly restored
+          if (state.status === 'pending') return false
+
+          // Persist all queries in localStorage, share across tabs
+          return true
+        },
+      },
+      maxAge: 86400e3, // 1 day in milliseconds
+      buster: process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA ?? 'v1',
+    })
+
+    return () => {
+      AXIOS_INSTANCE.interceptors.response.eject(responseInterceptor)
+      unsubscribe()
+    }
+  }, [queryClient])
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeModeScript />
+      <FlowBiteThemeProvider>
+        <Layout>{children}</Layout>
+        <ToastContainer />
+      </FlowBiteThemeProvider>
+    </QueryClientProvider>
+  )
+}
diff --git a/pages/publishers/[publisherId]/claim-my-node.tsx b/app/publishers/[publisherId]/claim-my-node/page.tsx
similarity index 95%
rename from pages/publishers/[publisherId]/claim-my-node.tsx
rename to app/publishers/[publisherId]/claim-my-node/page.tsx
index 6780bc2a..05490cb3 100644
--- a/pages/publishers/[publisherId]/claim-my-node.tsx
+++ b/app/publishers/[publisherId]/claim-my-node/page.tsx
@@ -1,3 +1,4 @@
+'use client'
 /**
  * Claim My Node Page
  * This page allows a publisher to claim ownership of an unclaimed node by verifying
@@ -7,10 +8,9 @@
  */
 
 import { useQueryClient } from '@tanstack/react-query'
-import { AxiosError } from 'axios'
 import { Alert, Button, Spinner } from 'flowbite-react'
 import Head from 'next/head'
-import { useRouter } from 'next/router'
+import { useParams, useRouter, useSearchParams } from 'next/navigation'
 import { Octokit } from 'octokit'
 import { useCallback, useEffect, useState } from 'react'
 import { FaGithub } from 'react-icons/fa'
@@ -18,10 +18,7 @@ import { HiCheckCircle, HiChevronLeft, HiLocationMarker } from 'react-icons/hi'
 import { toast } from 'react-toastify'
 import analytic from 'src/analytic/analytic'
 import {
-  getGetNodeQueryKey,
-  getGetNodeQueryOptions,
   getListNodesForPublisherV2QueryKey,
-  getListNodesForPublisherV2QueryOptions,
   getSearchNodesQueryKey,
   useClaimMyNode,
   useGetNode,
@@ -52,8 +49,13 @@ type ClaimStage =
 function ClaimMyNodePage() {
   const { t } = useNextTranslation()
   const router = useRouter()
+  const params = useParams()
+  const searchParams = useSearchParams()
   const qc = useQueryClient()
-  const { publisherId, nodeId } = router.query
+
+  const publisherId = params?.publisherId as string
+  const nodeId = searchParams?.get('nodeId') as string
+
   const [currentStage, setCurrentStage] =
     useState<ClaimStage>('info_confirmation')
   const [isVerifying, setIsVerifying] = useState(false)
@@ -68,12 +70,12 @@ function ClaimMyNodePage() {
 
   // Get the node, claiming publisher, and current user
   const { data: node, isLoading: nodeLoading } = useGetNode(
-    nodeId as string,
+    nodeId,
     {},
     { query: { enabled: !!nodeId } }
   )
   const { data: publisherToClaim, isLoading: publisherLoading } =
-    useGetPublisher(publisherId as string, {
+    useGetPublisher(publisherId, {
       query: { enabled: !!publisherId },
     })
   const { data: user, isLoading: userLoading } = useGetUser()
@@ -99,7 +101,7 @@ function ClaimMyNodePage() {
         // then other users can see the new node by refetch
         qc.prefetchQuery(
           shouldInvalidate.getGetNodeQueryOptions(
-            nodeId as string,
+            nodeId,
             undefined,
             INVALIDATE_CACHE_OPTION
           )
@@ -115,7 +117,7 @@ function ClaimMyNodePage() {
           // Unclaimed nodes list (node removed from @UNCLAIMED_ADMIN_PUBLISHER_ID)
           getListNodesForPublisherV2QueryKey(UNCLAIMED_ADMIN_PUBLISHER_ID),
           // New publisher's nodes list as it may include the newly claimed node
-          getListNodesForPublisherV2QueryKey(publisherId as string),
+          getListNodesForPublisherV2QueryKey(publisherId),
           // Search results which might include this node
           getSearchNodesQueryKey().slice(0, 1),
         ].forEach((queryKey) => {
@@ -297,8 +299,7 @@ function ClaimMyNodePage() {
     }
 
     // Check if we have a nodeId in the query params
-    const nodeIdParam = (router.query.nodeId as string) || (nodeId as string)
-    if (!nodeIdParam) {
+    if (!nodeId) {
       setError(t('Node ID is required for claiming.'))
       return
     }
@@ -321,8 +322,7 @@ function ClaimMyNodePage() {
     const [, owner, repo] = repoMatch
 
     // Check for GitHub token in the URL (OAuth callback)
-    const urlParams = new URLSearchParams(window.location.search)
-    const token = urlParams.get('token')
+    const token = searchParams?.get('token')
 
     if (token) {
       // If token is in URL, we've completed OAuth flow
@@ -333,13 +333,13 @@ function ClaimMyNodePage() {
 
       // Verify repository permissions with the token
       setIsVerifying(true)
-      verifyRepoPermissions(token, owner, repo, nodeIdParam)
+      verifyRepoPermissions(token, owner, repo, nodeId)
         .then((result) => {
           if (result.hasPermission) {
             setIsVerified(true)
             setCurrentStage('claim_node')
             analytic.track('GitHub Verification Success', {
-              nodeId: nodeIdParam,
+              nodeId,
               publisherId,
               githubUsername: result.userInfo?.username,
               hasAdminPermission: true,
@@ -350,7 +350,7 @@ function ClaimMyNodePage() {
               t('Unable to verify repository permissions. Please try again.')
             setError(errorMsg)
             analytic.track('GitHub Verification Failed', {
-              nodeId: nodeIdParam,
+              nodeId,
               publisherId,
               githubUsername: result.userInfo?.username,
               reason: 'No admin permission',
@@ -365,7 +365,7 @@ function ClaimMyNodePage() {
           )
           setError(errorMsg)
           analytic.track('GitHub Verification Error', {
-            nodeId: nodeIdParam,
+            nodeId,
             publisherId,
             reason: err.message,
           })
@@ -375,11 +375,12 @@ function ClaimMyNodePage() {
         })
 
       // Clean up URL by removing only the token parameter while preserving other query params
-      urlParams.delete('token')
-      const newSearch = urlParams.toString()
+      const newParams = new URLSearchParams(searchParams?.toString())
+      newParams.delete('token')
+      const newSearch = newParams.toString()
       const newUrl =
         window.location.pathname + (newSearch ? `?${newSearch}` : '')
-      router.replace(newUrl, undefined, { shallow: true })
+      router.replace(newUrl)
     }
   }, [
     node,
@@ -387,7 +388,7 @@ function ClaimMyNodePage() {
     user,
     nodeId,
     publisherId,
-    router.query,
+    searchParams,
     githubUsername,
     currentStage,
     router,
@@ -434,16 +435,15 @@ function ClaimMyNodePage() {
       return
     }
 
-    const nodeIdParam = (router.query.nodeId as string) || (nodeId as string)
-    if (!nodeIdParam) {
+    if (!nodeId) {
       toast.error(t('Node ID is required for claiming.'))
       return
     }
 
     // Call the mutation function with the required parameters
     claimNode({
-      publisherId: publisherId as string,
-      nodeId: nodeIdParam,
+      publisherId,
+      nodeId,
       data: { GH_TOKEN: githubToken },
     })
   }
@@ -636,9 +636,7 @@ function ClaimMyNodePage() {
                 <div className="flex items-start">
                   <span className="text-gray-400 w-32 ">{t('Node')}:</span>
                   <NodeSpan
-                    nodeId={
-                      (router.query.nodeId as string) || (nodeId as string)
-                    }
+                    nodeId={nodeId}
                     nodeName={node?.name}
                     className="text-white"
                   />
@@ -658,7 +656,7 @@ function ClaimMyNodePage() {
                   </span>
                   <span className="mx-1 text-gray-500">&rarr;</span>
                   <PublisherSpan
-                    publisherId={publisherId as string}
+                    publisherId={publisherId}
                     publisherName={publisherToClaim?.name}
                     className="text-white font-bold"
                   />
@@ -823,4 +821,6 @@ function ClaimMyNodePage() {
   )
 }
 
-export default withAuth(ClaimMyNodePage)
+// TODO: Re-enable withAuth after migrating HOC to App Router
+// export default withAuth(ClaimMyNodePage)
+export default ClaimMyNodePage
diff --git a/pages/publishers/[publisherId]/nodes/[nodeId].tsx b/app/publishers/[publisherId]/nodes/[nodeId]/page.tsx
similarity index 73%
rename from pages/publishers/[publisherId]/nodes/[nodeId].tsx
rename to app/publishers/[publisherId]/nodes/[nodeId]/page.tsx
index 0e0aa72c..ca9d8904 100644
--- a/pages/publishers/[publisherId]/nodes/[nodeId].tsx
+++ b/app/publishers/[publisherId]/nodes/[nodeId]/page.tsx
@@ -1,14 +1,17 @@
+'use client'
 import { Breadcrumb } from 'flowbite-react'
-import { useRouter } from 'next/router'
+import { useParams, useRouter } from 'next/navigation'
 import { HiHome } from 'react-icons/hi'
 import NodeDetails from '@/components/nodes/NodeDetails'
 import { useGetPublisher } from '@/src/api/generated'
 import { useNextTranslation } from '@/src/hooks/i18n'
 
-const NodeView = () => {
+export default function NodeView() {
   const router = useRouter()
-  const { publisherId, nodeId } = router.query
-  const { data: publisher } = useGetPublisher(publisherId as string)
+  const params = useParams()
+  const publisherId = params?.publisherId as string
+  const nodeId = params?.nodeId as string
+  const { data: publisher } = useGetPublisher(publisherId)
   const { t } = useNextTranslation()
 
   return (
@@ -35,14 +38,10 @@ const NodeView = () => {
         >
           {publisher?.name || publisherId}
         </Breadcrumb.Item>
-        <Breadcrumb.Item className="text-blue-500">
-          {nodeId as string}
-        </Breadcrumb.Item>
+        <Breadcrumb.Item className="text-blue-500">{nodeId}</Breadcrumb.Item>
       </Breadcrumb>
 
       <NodeDetails />
     </div>
   )
 }
-
-export default NodeView
diff --git a/pages/publishers/[publisherId]/index.tsx b/app/publishers/[publisherId]/page.tsx
similarity index 81%
rename from pages/publishers/[publisherId]/index.tsx
rename to app/publishers/[publisherId]/page.tsx
index be2fb402..3a931ab0 100644
--- a/pages/publishers/[publisherId]/index.tsx
+++ b/app/publishers/[publisherId]/page.tsx
@@ -1,5 +1,6 @@
+'use client'
 import { Breadcrumb, Spinner } from 'flowbite-react'
-import { useRouter } from 'next/router'
+import { useParams, useRouter } from 'next/navigation'
 import { HiHome } from 'react-icons/hi'
 import withAuth from '@/components/common/HOC/withAuth'
 import PublisherDetail from '@/components/publisher/PublisherDetail'
@@ -8,9 +9,10 @@ import { useNextTranslation } from '@/src/hooks/i18n'
 
 function PublisherDetails() {
   const router = useRouter()
-  const { publisherId } = router.query
+  const params = useParams()
+  const publisherId = params?.publisherId as string
   const { t } = useNextTranslation()
-  const { data, isError, isLoading } = useGetPublisher(publisherId as string)
+  const { data, isError, isLoading } = useGetPublisher(publisherId)
 
   if (isLoading) {
     return (
@@ -50,4 +52,6 @@ function PublisherDetails() {
   )
 }
 
-export default withAuth(PublisherDetails)
+// TODO: Re-enable withAuth after migrating HOC to App Router
+// export default withAuth(PublisherDetails)
+export default PublisherDetails
diff --git a/pages/publishers/create.tsx b/app/publishers/create/page.tsx
similarity index 89%
rename from pages/publishers/create.tsx
rename to app/publishers/create/page.tsx
index 30d679a1..aa5429e2 100644
--- a/pages/publishers/create.tsx
+++ b/app/publishers/create/page.tsx
@@ -1,5 +1,6 @@
+'use client'
 import { Breadcrumb, Card } from 'flowbite-react'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import React from 'react'
 import { HiHome } from 'react-icons/hi'
 import withAuth from '@/components/common/HOC/withAuth'
@@ -55,4 +56,6 @@ const CreatePublisher = () => {
   )
 }
 
-export default withAuth(CreatePublisher)
+// TODO: Re-enable withAuth after migrating HOC to App Router
+// export default withAuth(CreatePublisher)
+export default CreatePublisher
diff --git a/bun.lock b/bun.lock
index b409d0d4..f2cdd6de 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "comfy-org-registry-web",
diff --git a/components/AuthUI/AuthUI.tsx b/components/AuthUI/AuthUI.tsx
index 3b4b289c..c302b0ea 100644
--- a/components/AuthUI/AuthUI.tsx
+++ b/components/AuthUI/AuthUI.tsx
@@ -1,3 +1,4 @@
+'use client'
 import { getAuth, signInWithEmailAndPassword } from 'firebase/auth'
 import { Button, Card, Label, TextInput } from 'flowbite-react'
 import Image from 'next/image'
diff --git a/components/AuthUI/Logout.tsx b/components/AuthUI/Logout.tsx
index 7926852c..3362a6ab 100644
--- a/components/AuthUI/Logout.tsx
+++ b/components/AuthUI/Logout.tsx
@@ -1,3 +1,4 @@
+'use client'
 import { useQueryClient } from '@tanstack/react-query'
 import { getAuth } from 'firebase/auth'
 import { Button } from 'flowbite-react'
diff --git a/components/pages/MockFeaturedPage.stories.tsx b/components/pages/MockFeaturedPage.stories.tsx
deleted file mode 100644
index 0831b0ea..00000000
--- a/components/pages/MockFeaturedPage.stories.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { Meta, StoryObj } from '@storybook/nextjs-vite'
-import Container from '@/components/common/Container'
-import GenericHeader from '@/components/common/GenericHeader'
-import NodesCard from '@/components/nodes/NodesCard'
-
-const PageLayout = () => {
-  // Sample data for nodes
-  const sampleNodes = [
-    {
-      id: 'node-1',
-      name: 'Image Upscaler',
-      description: 'A node that upscales images using AI technology',
-      icon: 'https://picsum.photos/200/200',
-      downloads: 2500,
-      rating: 4.5,
-    },
-    {
-      id: 'node-2',
-      name: 'Text Generator',
-      description:
-        'Generates text based on prompts using advanced language models',
-      icon: 'https://picsum.photos/200/200',
-      downloads: 1800,
-      rating: 4.2,
-    },
-    {
-      id: 'node-3',
-      name: 'Color Palette Generator',
-      description:
-        'Creates harmonious color palettes from images or base colors',
-      icon: 'https://picsum.photos/200/200',
-      downloads: 1200,
-      rating: 3.9,
-    },
-  ]
-
-  return (
-    <div className="bg-gray-900 min-h-screen">
-      <Container>
-        <div className="pt-8">
-          <GenericHeader
-            title="Featured Nodes"
-            subTitle="Discover popular nodes for your workflow"
-            buttonText="View All"
-            buttonLink="/nodes"
-          />
-
-          <div className="mt-8">
-            <h2 className="text-xl font-bold text-white mb-4">Popular Nodes</h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {sampleNodes.map((node) => (
-                <NodesCard
-                  key={node.id}
-                  node={node}
-                  buttonLink={`/nodes/${node.id}`}
-                />
-              ))}
-            </div>
-          </div>
-
-          <div className="mt-12 bg-gray-800 p-6 rounded-lg">
-            <h2 className="text-xl font-bold text-white mb-4">Get Started</h2>
-            <p className="text-gray-300 mb-4">
-              Create your own nodes and share them with the community. Join the
-              growing ecosystem of developers creating amazing tools for Comfy.
-            </p>
-            <div className="flex gap-4">
-              <button className="bg-blue-600 text-white px-4 py-2 rounded-lg">
-                Create a Node
-              </button>
-              <button className="bg-gray-700 text-white px-4 py-2 rounded-lg">
-                Learn More
-              </button>
-            </div>
-          </div>
-        </div>
-      </Container>
-    </div>
-  )
-}
-
-const meta: Meta<typeof PageLayout> = {
-  title: 'Pages/Mock/FeaturedNodesPage',
-  component: PageLayout,
-  parameters: {
-    layout: 'fullscreen',
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof PageLayout>
-
-export const Default: Story = {}
diff --git a/components/pages/claim-node/ClaimMyNodePage.stories.tsx b/components/pages/claim-node/ClaimMyNodePage.stories.tsx
deleted file mode 100644
index b3e2f9ef..00000000
--- a/components/pages/claim-node/ClaimMyNodePage.stories.tsx
+++ /dev/null
@@ -1,241 +0,0 @@
-import { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { fn } from '@storybook/test'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { User as FirebaseUser } from 'firebase/auth'
-import { HttpResponse, http } from 'msw'
-import ClaimMyNodePage from '@/pages/publishers/[publisherId]/claim-my-node'
-import { Node, Publisher, User } from '@/src/api/generated'
-import { UNCLAIMED_ADMIN_PUBLISHER_ID } from '@/src/constants'
-import { useFirebaseUser } from '@/src/hooks/useFirebaseUser.mock'
-import { CAPI } from '@/src/mocks/apibase'
-
-// Mock next/router
-const mockRouter = {
-  pathname: '/publishers/[publisherId]/claim-my-node',
-  route: '/publishers/[publisherId]/claim-my-node',
-  query: {
-    publisherId: 'publisher-1',
-    nodeId: 'sample-node-1',
-  },
-  asPath: '/publishers/publisher-1/claim-my-node?nodeId=sample-node-1',
-  push: fn(),
-  replace: fn(),
-  reload: fn(),
-  back: fn(),
-  prefetch: fn(),
-  beforePopState: fn(),
-  events: {
-    on: fn(),
-    off: fn(),
-    emit: fn(),
-  },
-  isFallback: false,
-  isLocaleDomain: false,
-  isPreview: false,
-  isReady: true,
-  defaultLocale: 'en',
-  domainLocales: [],
-  locales: ['en'],
-  locale: 'en',
-  basePath: '',
-}
-
-// Sample data
-const sampleNode: Node = {
-  id: 'sample-node-1',
-  name: 'Sample Custom Node',
-  description: 'A sample ComfyUI custom node for testing purposes',
-  icon: 'https://via.placeholder.com/200',
-  downloads: 1250,
-  rating: 4.5,
-  repository: 'https://github.com/sample-user/sample-comfy-node',
-  publisher: {
-    id: UNCLAIMED_ADMIN_PUBLISHER_ID,
-    name: 'Unclaimed Admin',
-  },
-}
-
-const samplePublisher: Publisher = {
-  id: 'publisher-1',
-  name: 'My Publisher',
-  description: 'My primary publisher account',
-}
-
-const sampleUser: User = {
-  id: 'user-1',
-  name: 'Sample User',
-  email: 'user@example.com',
-}
-
-// Mock Firebase user data
-const mockFirebaseUser = {
-  uid: 'firebase-user-123',
-  email: 'user@example.com',
-  displayName: 'Sample User',
-  photoURL: 'https://picsum.photos/40/40',
-  emailVerified: true,
-  isAnonymous: false,
-  metadata: {},
-  providerData: [],
-  refreshToken: '',
-  tenantId: null,
-  delete: async () => undefined,
-  getIdToken: async () => '',
-  getIdTokenResult: async () => ({}) as any,
-  reload: async () => undefined,
-  toJSON: () => ({}),
-  phoneNumber: null,
-  providerId: 'google',
-} satisfies FirebaseUser
-
-// MSW handlers for different scenarios
-const createHandlers = (
-  scenario: 'default' | 'loading' | 'without-repository' | 'already-claimed'
-) => {
-  const baseHandlers = [
-    // User endpoint
-    http.get(CAPI('/users'), () => {
-      return HttpResponse.json(sampleUser)
-    }),
-
-    // Publisher endpoint
-    http.get(CAPI('/publishers/publisher-1'), () => {
-      return HttpResponse.json(samplePublisher)
-    }),
-
-    // Claim node endpoint
-    http.post(
-      CAPI('/publishers/publisher-1/nodes/sample-node-1/claim-my-node'),
-      () => {
-        return HttpResponse.json({ success: true })
-      }
-    ),
-  ]
-
-  // Node endpoint - varies by scenario
-  const nodeHandler = (() => {
-    switch (scenario) {
-      case 'loading':
-        return http.get(CAPI('/nodes/sample-node-1'), () => {
-          return new Promise(() => {}) // Never resolves to simulate loading
-        })
-      case 'without-repository':
-        return http.get(CAPI('/nodes/sample-node-1'), () => {
-          return HttpResponse.json({
-            ...sampleNode,
-            repository: undefined,
-          })
-        })
-      case 'already-claimed':
-        return http.get(CAPI('/nodes/sample-node-1'), () => {
-          return HttpResponse.json({
-            ...sampleNode,
-            publisher: {
-              id: 'existing-publisher',
-              name: 'Existing Publisher',
-            },
-          })
-        })
-      default:
-        return http.get(CAPI('/nodes/sample-node-1'), () => {
-          return HttpResponse.json(sampleNode)
-        })
-    }
-  })()
-
-  return [nodeHandler, ...baseHandlers]
-}
-
-const meta: Meta<typeof ClaimMyNodePage> = {
-  title: 'Pages/ClaimMyNodePage',
-  component: ClaimMyNodePage,
-  parameters: {
-    layout: 'fullscreen',
-    backgrounds: { default: 'dark' },
-    nextjs: {
-      router: mockRouter,
-    },
-  },
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => {
-      const queryClient = new QueryClient({
-        defaultOptions: {
-          queries: {
-            retry: false,
-            staleTime: 0,
-          },
-        },
-      })
-
-      return (
-        <QueryClientProvider client={queryClient}>
-          <Story />
-        </QueryClientProvider>
-      )
-    },
-  ],
-}
-
-export default meta
-type Story = StoryObj<typeof ClaimMyNodePage>
-
-export const InitialStage: Story = {
-  parameters: {
-    msw: {
-      handlers: createHandlers('default'),
-    },
-  },
-  beforeEach: () => {
-    // Mock Firebase user as logged in
-    useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
-  },
-}
-
-export const Loading: Story = {
-  parameters: {
-    msw: {
-      handlers: createHandlers('loading'),
-    },
-  },
-  beforeEach: () => {
-    // Mock Firebase user as logged in
-    useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
-  },
-}
-
-export const WithoutRepository: Story = {
-  parameters: {
-    msw: {
-      handlers: createHandlers('without-repository'),
-    },
-  },
-  beforeEach: () => {
-    // Mock Firebase user as logged in
-    useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
-  },
-}
-
-export const AlreadyClaimed: Story = {
-  parameters: {
-    msw: {
-      handlers: createHandlers('already-claimed'),
-    },
-  },
-  beforeEach: () => {
-    // Mock Firebase user as logged in
-    useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
-  },
-}
-
-export const NotLoggedIn: Story = {
-  parameters: {
-    msw: {
-      handlers: createHandlers('default'),
-    },
-  },
-  beforeEach: () => {
-    // Mock Firebase user as not logged in
-    useFirebaseUser.mockReturnValue([null, false, undefined])
-  },
-}
diff --git a/components/pages/claim-node/ClaimNodePage.stories.tsx b/components/pages/claim-node/ClaimNodePage.stories.tsx
deleted file mode 100644
index ecc9ab24..00000000
--- a/components/pages/claim-node/ClaimNodePage.stories.tsx
+++ /dev/null
@@ -1,318 +0,0 @@
-import { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { User as FirebaseUser } from 'firebase/auth'
-import { HttpResponse, http } from 'msw'
-import ClaimNodePage from '@/pages/nodes/[nodeId]/claim'
-import { Node, Publisher } from '@/src/api/generated'
-import { UNCLAIMED_ADMIN_PUBLISHER_ID } from '@/src/constants'
-import { useFirebaseUser } from '@/src/hooks/useFirebaseUser.mock'
-
-const meta: Meta<typeof ClaimNodePage> = {
-  title: 'Pages/ClaimNodePage',
-  component: ClaimNodePage,
-  parameters: {
-    layout: 'fullscreen',
-    backgrounds: { default: 'dark' },
-    nextjs: {
-      appDirectory: false,
-      navigation: {
-        pathname: '/nodes/sample-node-1/claim',
-        query: { nodeId: 'sample-node-1' },
-        push: () => {},
-        replace: () => {},
-        back: () => {},
-      },
-      router: {
-        pathname: '/nodes/[nodeId]/claim',
-        route: '/nodes/[nodeId]/claim',
-        query: { nodeId: 'sample-node-1' },
-        asPath: '/nodes/sample-node-1/claim',
-        push: () => Promise.resolve(true),
-        replace: () => Promise.resolve(true),
-        reload: () => {},
-        back: () => {},
-        prefetch: () => Promise.resolve(),
-        beforePopState: () => {},
-        events: {
-          on: () => {},
-          off: () => {},
-          emit: () => {},
-        },
-        isFallback: false,
-        isLocaleDomain: false,
-        isPreview: false,
-        isReady: true,
-        defaultLocale: 'en',
-        domainLocales: [],
-        locales: ['en'],
-        locale: 'en',
-        basePath: '',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => {
-      const queryClient = new QueryClient({
-        defaultOptions: {
-          queries: {
-            retry: false,
-          },
-        },
-      })
-      return (
-        <QueryClientProvider client={queryClient}>
-          <Story />
-        </QueryClientProvider>
-      )
-    },
-  ],
-}
-
-export default meta
-type Story = StoryObj<typeof ClaimNodePage>
-
-// Sample data
-const sampleUnclaimedNode: Node = {
-  id: 'sample-node-1',
-  name: 'Sample Custom Node',
-  description: 'A sample ComfyUI custom node for testing purposes',
-  icon: 'https://via.placeholder.com/200',
-  downloads: 1250,
-  repository: 'https://github.com/sample-user/sample-comfy-node',
-  publisher: {
-    id: UNCLAIMED_ADMIN_PUBLISHER_ID,
-    name: 'Unclaimed Admin',
-  },
-}
-
-const sampleClaimedNode: Node = {
-  ...sampleUnclaimedNode,
-  id: 'claimed-node-1',
-  name: 'Already Claimed Node',
-  publisher: {
-    id: 'existing-publisher',
-    name: 'Existing Publisher',
-  },
-}
-
-const sampleNodeWithoutRepository: Node = {
-  ...sampleUnclaimedNode,
-  repository: undefined,
-}
-
-const samplePublishers: Publisher[] = [
-  {
-    id: 'publisher-1',
-    name: 'My First Publisher',
-    description: 'My primary publisher account',
-  },
-  {
-    id: 'publisher-2',
-    name: 'Secondary Publisher',
-    description: 'Alternative publisher account',
-  },
-]
-
-// Mock Firebase user data
-const mockFirebaseUser = {
-  uid: 'firebase-user-123',
-  email: 'user@example.com',
-  displayName: 'Test User',
-  photoURL: 'https://picsum.photos/40/40',
-  emailVerified: true,
-  isAnonymous: false,
-  metadata: {},
-  providerData: [],
-  refreshToken: '',
-  tenantId: null,
-  delete: async () => undefined,
-  getIdToken: async () => '',
-  getIdTokenResult: async () => ({}) as any,
-  reload: async () => undefined,
-  toJSON: () => ({}),
-  phoneNumber: null,
-  providerId: 'google',
-} satisfies FirebaseUser
-
-export const WithPublishers: Story = {
-  parameters: {
-    msw: {
-      handlers: [
-        http.get('*/nodes/sample-node-1', () => {
-          return HttpResponse.json(sampleUnclaimedNode)
-        }),
-        http.get('*/users/publishers', () => {
-          return HttpResponse.json(samplePublishers)
-        }),
-      ],
-    },
-  },
-  beforeEach: () => {
-    // Mock Firebase user as logged in
-    useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
-  },
-}
-
-export const WithoutPublishers: Story = {
-  parameters: {
-    msw: {
-      handlers: [
-        http.get('*/nodes/sample-node-1', () => {
-          return HttpResponse.json(sampleUnclaimedNode)
-        }),
-        http.get('*/users/publishers', () => {
-          return HttpResponse.json([])
-        }),
-      ],
-    },
-  },
-  beforeEach: () => {
-    // Mock Firebase user as logged in but no publishers
-    useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
-  },
-}
-
-export const AlreadyClaimed: Story = {
-  parameters: {
-    msw: {
-      handlers: [
-        http.get('*/nodes/sample-node-1', () => {
-          return HttpResponse.json(sampleClaimedNode)
-        }),
-        http.get('*/users/publishers', () => {
-          return HttpResponse.json(samplePublishers)
-        }),
-      ],
-    },
-  },
-  beforeEach: () => {
-    // Mock Firebase user as logged in
-    useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
-  },
-}
-
-export const Loading: Story = {
-  parameters: {
-    msw: {
-      handlers: [
-        http.get('*/nodes/sample-node-1', () => {
-          return new Promise((resolve) => {
-            setTimeout(() => {
-              resolve(HttpResponse.json(sampleUnclaimedNode))
-            }, 2000)
-          })
-        }),
-        http.get('*/users/publishers', () => {
-          return new Promise((resolve) => {
-            setTimeout(() => {
-              resolve(HttpResponse.json(samplePublishers))
-            }, 1500)
-          })
-        }),
-      ],
-    },
-  },
-  beforeEach: () => {
-    // Mock Firebase user as logged in
-    useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
-  },
-}
-
-export const WithoutRepository: Story = {
-  parameters: {
-    msw: {
-      handlers: [
-        http.get('*/nodes/sample-node-1', () => {
-          return HttpResponse.json(sampleNodeWithoutRepository)
-        }),
-        http.get('*/users/publishers', () => {
-          return HttpResponse.json(samplePublishers)
-        }),
-      ],
-    },
-  },
-  beforeEach: () => {
-    // Mock Firebase user as logged in
-    useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
-  },
-}
-
-export const NodeError: Story = {
-  parameters: {
-    msw: {
-      handlers: [
-        http.get('*/nodes/sample-node-1', () => {
-          return HttpResponse.json({ error: 'Node not found' }, { status: 404 })
-        }),
-        http.get('*/users/publishers', () => {
-          return HttpResponse.json(samplePublishers)
-        }),
-      ],
-    },
-  },
-  beforeEach: () => {
-    // Mock Firebase user as logged in
-    useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
-  },
-}
-
-export const PublishersError: Story = {
-  parameters: {
-    msw: {
-      handlers: [
-        http.get('*/nodes/sample-node-1', () => {
-          return HttpResponse.json(sampleUnclaimedNode)
-        }),
-        http.get('*/users/publishers', () => {
-          return HttpResponse.json(
-            { error: 'Failed to load publishers' },
-            { status: 500 }
-          )
-        }),
-      ],
-    },
-  },
-  beforeEach: () => {
-    // Mock Firebase user as logged in
-    useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
-  },
-}
-
-export const SinglePublisher: Story = {
-  parameters: {
-    msw: {
-      handlers: [
-        http.get('*/nodes/sample-node-1', () => {
-          return HttpResponse.json(sampleUnclaimedNode)
-        }),
-        http.get('*/users/publishers', () => {
-          return HttpResponse.json([samplePublishers[0]])
-        }),
-      ],
-    },
-  },
-  beforeEach: () => {
-    // Mock Firebase user as logged in
-    useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
-  },
-}
-
-export const LoggedOut: Story = {
-  parameters: {
-    msw: {
-      handlers: [
-        http.get('*/nodes/sample-node-1', () => {
-          return HttpResponse.json(sampleUnclaimedNode)
-        }),
-        http.get('*/users/publishers', () => {
-          return HttpResponse.json({ error: 'Unauthorized' }, { status: 401 })
-        }),
-      ],
-    },
-  },
-  beforeEach: () => {
-    // Mock Firebase user as logged out
-    useFirebaseUser.mockReturnValue([null, false, undefined])
-  },
-}
diff --git a/components/pages/create.stories.tsx b/components/pages/create.stories.tsx
deleted file mode 100644
index 2e656012..00000000
--- a/components/pages/create.stories.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { Breadcrumb, Card } from 'flowbite-react'
-import { HiHome } from 'react-icons/hi'
-import CreatePublisherFormContent from '@/components/publisher/CreatePublisherFormContent'
-
-const CreatePublisherPageLayout = () => {
-  const handleSuccess = (username: string) => {
-    console.log('Publisher created successfully:', username)
-    // In a real scenario, this would navigate to the publisher page
-  }
-
-  const handleCancel = () => {
-    console.log('Create publisher cancelled')
-    // In a real scenario, this would navigate back
-  }
-
-  return (
-    <div className="p-4 bg-gray-900 min-h-screen">
-      <div className="py-4">
-        <Breadcrumb>
-          <Breadcrumb.Item
-            href="/"
-            icon={HiHome}
-            onClick={(e) => {
-              e.preventDefault()
-              console.log('Navigate to home')
-            }}
-            className="dark"
-          >
-            Home
-          </Breadcrumb.Item>
-          <Breadcrumb.Item className="dark">Create Publisher</Breadcrumb.Item>
-        </Breadcrumb>
-      </div>
-
-      <section className="p-0">
-        <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}
-              />
-            </Card>
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}
-
-const meta: Meta<typeof CreatePublisherPageLayout> = {
-  title: 'Pages/Publishers/CreatePublisherPage',
-  component: CreatePublisherPageLayout,
-  parameters: {
-    layout: 'fullscreen',
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof CreatePublisherPageLayout>
-
-export const Default: Story = {}
diff --git a/components/registry/Registry.tsx b/components/registry/Registry.tsx
index 969af9a1..1934db6d 100644
--- a/components/registry/Registry.tsx
+++ b/components/registry/Registry.tsx
@@ -1,4 +1,8 @@
+'use client'
 import algoliasearch from 'algoliasearch/lite'
+// TODO: Migrate to App Router compatible routing solution
+// Currently using Pages Router API for Algolia InstantSearch routing during incremental migration
+// This works in 'use client' components but should be migrated to use react-instantsearch-nextjs
 import singletonRouter from 'next/router'
 import React from 'react'
 import { Configure, Hits, InstantSearch } from 'react-instantsearch'
diff --git a/next.config.ts b/next.config.ts
index c60c8220..94dab8eb 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -13,11 +13,6 @@ const withMDX = mdx({
 
 const conf: NextConfig = {
   reactStrictMode: true,
-  // this part is exclusive for Pages Routers,please do not correct these codes
-  i18n: {
-    locales: SUPPORTED_LANGUAGES,
-    defaultLocale: 'en',
-  },
 
   // Append the default value with md extensions
   pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
diff --git a/pages/auth/login.tsx b/pages/auth/login.tsx
deleted file mode 100644
index 7a397eab..00000000
--- a/pages/auth/login.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import SignIn from '../../components/AuthUI/AuthUI'
-
-const SignInPage: React.FC = () => {
-  return (
-    <>
-      <SignIn />
-    </>
-  )
-}
-export default SignInPage
diff --git a/pages/auth/logout.tsx b/pages/auth/logout.tsx
deleted file mode 100644
index 94dfb36c..00000000
--- a/pages/auth/logout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import Logout from '../../components/AuthUI/Logout'
-
-const LogoutPage: React.FC = () => {
-  return (
-    <>
-      <Logout />
-    </>
-  )
-}
-export default LogoutPage
diff --git a/pages/auth/signup.tsx b/pages/auth/signup.tsx
deleted file mode 100644
index b7d76aea..00000000
--- a/pages/auth/signup.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import SignIn from '../../components/AuthUI/AuthUI'
-
-const SignUpPage: React.FC = () => {
-  return (
-    <>
-      <SignIn />
-    </>
-  )
-}
-export default SignUpPage
diff --git a/pages/index.tsx b/pages/index.tsx
deleted file mode 100644
index de71470e..00000000
--- a/pages/index.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import Registry from '../components/registry/Registry'
-
-function NodeList() {
-  return <Registry />
-}
-
-export default NodeList
diff --git a/pages/nodes.tsx b/pages/nodes.tsx
deleted file mode 100644
index 9b6a53b1..00000000
--- a/pages/nodes.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Breadcrumb } from 'flowbite-react'
-import { useRouter } from 'next/router'
-import { HiHome } from 'react-icons/hi'
-import withAuth from '@/components/common/HOC/withAuth'
-import { useNextTranslation } from '@/src/hooks/i18n'
-import PublisherListNodes from '../components/publisher/PublisherListNodes'
-
-function PublisherNodeList() {
-  const router = useRouter()
-  const { t } = useNextTranslation()
-
-  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>
-
-      <PublisherListNodes />
-    </div>
-  )
-}
-
-export default withAuth(PublisherNodeList)
diff --git a/src/hooks/useRouterQuery.app.ts b/src/hooks/useRouterQuery.app.ts
new file mode 100644
index 00000000..d252c3da
--- /dev/null
+++ b/src/hooks/useRouterQuery.app.ts
@@ -0,0 +1,85 @@
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import { filter, omit } from 'rambda'
+import { useCallback, useMemo } from 'react'
+
+/**
+ * A hook to easily access and update URL query parameters (App Router version)
+ *
+ * @returns [query, updateQuery] - Current query object and a function to update it
+ *
+ * @example
+ * // Access query parameters
+ * const [query, updateQuery] = useRouterQuery()
+ * const page = Number(query.page) || 1
+ * const search = query.search as string || ''
+ *
+ * // Update query parameters (preserves existing parameters)
+ * updateQuery({ page: 2 })
+ *
+ * // Replace all query parameters
+ * updateQuery({ newParam: 'value' }, true)
+ *
+ * // Remove a parameter by setting it to null or undefined
+ * updateQuery({ existingParam: null })
+ */
+export function useRouterQuery<
+  T extends Record<string, any> = Record<string, string | string[]>,
+>() {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  // Convert URLSearchParams to object (memoized to avoid recreation)
+  const query = useMemo(
+    () => Object.fromEntries(searchParams?.entries() ?? []) as T,
+    [searchParams]
+  )
+
+  /**
+   * Update query parameters
+   *
+   * @param newParams - New parameters to add or update
+   * @param replace - Whether to replace all existing parameters (default: false)
+   *
+   * @remarks
+   * - Parameters with null or undefined values will be omitted from the query
+   * - This can be used to remove existing parameters by setting them to null
+   */
+  const updateQuery = useCallback(
+    (newParams: Partial<T>, replace = false) => {
+      // Get current query from searchParams to avoid stale closures
+      const currentQuery = Object.fromEntries(
+        searchParams?.entries() ?? []
+      ) as T
+
+      // Filter out null and undefined values
+      const filteredParams = filter((e) => e != null, newParams)
+
+      // Prepare the final query object
+      const finalQuery = replace
+        ? filteredParams
+        : {
+            ...omit(Object.keys(newParams), currentQuery),
+            ...filteredParams,
+          }
+
+      // Build new URL search params
+      const params = new URLSearchParams()
+      Object.entries(finalQuery).forEach(([key, value]) => {
+        if (value !== null && value !== undefined) {
+          params.set(key, String(value))
+        }
+      })
+
+      // Navigate to new URL with updated query params
+      const newUrl = params.toString()
+        ? `${pathname}?${params.toString()}`
+        : pathname
+
+      router.push(newUrl ?? '/')
+    },
+    [router, pathname, searchParams]
+  )
+
+  return [query, updateQuery] as const
+}