diff --git a/moon/apps/web/components/ClBox/ChecksSection.tsx b/moon/apps/web/components/ClBox/ChecksSection.tsx
index 28659ef23..e932d3ce1 100644
--- a/moon/apps/web/components/ClBox/ChecksSection.tsx
+++ b/moon/apps/web/components/ClBox/ChecksSection.tsx
@@ -69,13 +69,13 @@ const CheckStatus = ({
   return (
     <div className='flex w-full items-center px-3 py-0'>
       {hasFailures ? (
-        <AlertIcon className='mr-3 h-5 w-5 text-yellow-600' />
+        <AlertIcon className='mr-3 h-5 w-5 text-yellow-600 dark:text-yellow-500' />
       ) : (
-        <CheckIcon className='mr-3 h-5 w-5 text-green-700' />
+        <CheckIcon className='mr-3 h-5 w-5 text-green-700 dark:text-green-400' />
       )}
       <div>
         <p className='font-semibold'>{hasFailures ? 'Some checks were not successful' : 'All checks have passed'}</p>
-        <p className='text-sm text-gray-600'>{statusInfo.join(', ')}</p>
+        <p className='text-tertiary text-sm'>{statusInfo.join(', ')}</p>
       </div>
       <div className='ml-auto flex items-center gap-2'>
         {isOutdated && (
@@ -85,8 +85,7 @@ const CheckStatus = ({
               onUpdateBranch()
             }}
             disabled={isUpdating}
-            style={{ backgroundColor: '#f6f8fa' }}
-            className='flex-shrink-0 rounded-md border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50'
+            className='border-primary bg-secondary hover:bg-tertiary text-secondary flex-shrink-0 rounded-md border px-3 py-1.5 text-sm font-medium disabled:cursor-not-allowed disabled:opacity-50'
           >
             {isUpdating ? (
               <span className='flex items-center gap-1.5'>
@@ -106,7 +105,7 @@ const CheckStatus = ({
 
 const CheckGroup = ({ title, checks }: CheckGroupProps) => (
   <div className='mb-2'>
-    <h4 className='px-2 py-1 text-xs font-bold uppercase text-gray-500'>
+    <h4 className='text-tertiary px-2 py-1 text-xs font-bold uppercase'>
       {title} ({checks.length})
     </h4>
     <div>
@@ -141,25 +140,25 @@ const getStatusIcon = (status: AdditionalCheckStatus) => {
 }
 
 const AdditionalCheckItemComponent = ({ check }: AdditionalCheckItemProps) => (
-  <div className='flex items-start border-b border-gray-100 px-2 py-2 last:border-b-0'>
+  <div className='border-primary flex items-start border-b px-2 py-2 last:border-b-0'>
     <div className='mr-3 mt-0.5 flex-shrink-0'>{getStatusIcon(check.result)}</div>
     <div className='min-w-0 flex-1'>
       <div className='flex items-center justify-between'>
-        <h5 className='text-sm font-medium text-gray-900'>{ADDITIONAL_CHECK_LABELS[check.type]}</h5>
+        <h5 className='text-primary text-sm font-medium'>{ADDITIONAL_CHECK_LABELS[check.type]}</h5>
         <span
           className={`rounded-full px-2 py-1 text-xs font-medium ${
             check.result === 'PASSED'
-              ? 'bg-green-100 text-green-800'
+              ? 'bg-green-100 text-green-800 dark:bg-green-950 dark:text-green-200'
               : check.result === 'FAILED'
-                ? 'bg-red-100 text-red-800'
-                : 'bg-gray-100 text-gray-800'
+                ? 'bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-200'
+                : 'bg-secondary text-secondary'
           }`}
         >
           {check.result.toLowerCase()}
         </span>
       </div>
       {check.result === 'FAILED' && (
-        <ul className='mt-1 list-inside list-disc text-sm text-red-600'>
+        <ul className='mt-1 list-inside list-disc text-sm text-red-600 dark:text-red-400'>
           <li className='list-inside'>{check.message}</li>
         </ul>
       )}
@@ -178,7 +177,7 @@ const AdditionalChecksSection = ({ additionalChecks }: AdditionalChecksSectionPr
 
   return (
     <div className='mt-2 border-t pt-2'>
-      <h4 className='mb-2 px-2 py-1 text-xs font-bold uppercase text-gray-500'>
+      <h4 className='text-tertiary mb-2 px-2 py-1 text-xs font-bold uppercase'>
         Additional Checks ({additionalChecks.length})
       </h4>
       <div className='space-y-1'>
@@ -236,7 +235,7 @@ export function ChecksSection({ checks, onStatusChange, additionalChecks, clLink
     <>
       <Collapsible.Root open={open} onOpenChange={setOpen}>
         {/* CheckStatus section */}
-        <Collapsible.Trigger className='flex w-full cursor-pointer rounded-md hover:bg-gray-100'>
+        <Collapsible.Trigger className='hover:bg-tertiary flex w-full cursor-pointer rounded-md'>
           <CheckStatus
             hasFailures={hasFailures}
             failureCount={failureCount}
diff --git a/moon/apps/web/components/ClBox/MergeBox.tsx b/moon/apps/web/components/ClBox/MergeBox.tsx
index c0910834f..0ae9be396 100644
--- a/moon/apps/web/components/ClBox/MergeBox.tsx
+++ b/moon/apps/web/components/ClBox/MergeBox.tsx
@@ -65,13 +65,13 @@ export const MergeBox = React.memo<{ prId: string; status?: string }>(({ prId, s
 
   return (
     <div className='flex'>
-      <FeedMergedIcon size={24} className='ml-1 text-gray-500' />
+      <FeedMergedIcon size={24} className='text-tertiary ml-1' />
       {isReviewerLoading && isAdditionLoading ? (
         <div className='flex h-[400px] items-center justify-center'>
           <LoadingSpinner />
         </div>
       ) : (
-        <div className='ml-3 w-full divide-y rounded-lg border bg-white'>
+        <div className='border-primary bg-primary ml-3 w-full divide-y rounded-lg border'>
           <ReviewerSection required={required} actual={actual} />
           <ChecksSection
             checks={checks}
diff --git a/moon/apps/web/components/ClBox/ReviewerSection.tsx b/moon/apps/web/components/ClBox/ReviewerSection.tsx
index 474afe1fd..7a23aaf4f 100644
--- a/moon/apps/web/components/ClBox/ReviewerSection.tsx
+++ b/moon/apps/web/components/ClBox/ReviewerSection.tsx
@@ -10,7 +10,7 @@ export function ReviewerSection({ required, actual }: ReviewerSectionProps) {
 
   if (isApproved) {
     return (
-      <div className='flex items-center p-3 text-green-700'>
+      <div className='flex items-center p-3 text-green-700 dark:text-green-400'>
         <CheckCircleIcon className='mr-3 h-5 w-5' />
         <div>
           <span className='font-semibold'>All required reviewers have approved</span>
@@ -20,11 +20,11 @@ export function ReviewerSection({ required, actual }: ReviewerSectionProps) {
   }
 
   return (
-    <div className='flex items-center p-3 text-gray-800'>
-      <AlertIcon className='mr-3 h-5 w-5 text-yellow-600' />
+    <div className='text-primary flex items-center p-3'>
+      <AlertIcon className='mr-3 h-5 w-5 text-yellow-600 dark:text-yellow-500' />
       <div>
         <div className='font-semibold'>Review required</div>
-        <div className='ml-auto text-sm text-gray-500'>
+        <div className='text-tertiary ml-auto text-sm'>
           {`At least ${required} reviewer${required > 1 ? 's' : ''} required with write access, now has ${actual}`}
         </div>
       </div>
diff --git a/moon/apps/web/components/ClBox/components/CheckGroup.tsx b/moon/apps/web/components/ClBox/components/CheckGroup.tsx
index c10c47eaf..d9bfe9972 100644
--- a/moon/apps/web/components/ClBox/components/CheckGroup.tsx
+++ b/moon/apps/web/components/ClBox/components/CheckGroup.tsx
@@ -26,18 +26,18 @@ export function CheckGroup({ title, summary, status, children }: CheckGroupProps
   return (
     <div className={`border-l-4 ${color} rounded`}>
       <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>
-        <Collapsible.Trigger className='flex w-full items-center justify-between rounded-t bg-gray-50 p-3'>
+        <Collapsible.Trigger className='bg-secondary flex w-full items-center justify-between rounded-t p-3'>
           <div className='flex items-center'>
-            <h4 className='font-bold text-gray-900'>{title}</h4>
-            <span className='ml-4 text-sm text-gray-600'>{summary}</span>
+            <h4 className='text-primary font-bold'>{title}</h4>
+            <span className='text-tertiary ml-4 text-sm'>{summary}</span>
           </div>
           {isOpen ? (
-            <ArrowUpIcon className='h-5 w-5 text-gray-500' />
+            <ArrowUpIcon className='text-tertiary h-5 w-5' />
           ) : (
-            <ArrowDownIcon className='h-5 w-5 text-gray-500' />
+            <ArrowDownIcon className='text-tertiary h-5 w-5' />
           )}
         </Collapsible.Trigger>
-        <Collapsible.Content className='rounded-b bg-white p-2'>{children}</Collapsible.Content>
+        <Collapsible.Content className='bg-primary rounded-b p-2'>{children}</Collapsible.Content>
       </Collapsible.Root>
     </div>
   )
diff --git a/moon/apps/web/components/ClBox/components/MergeCheckItem.tsx b/moon/apps/web/components/ClBox/components/MergeCheckItem.tsx
index c328074bf..b14a1b95d 100644
--- a/moon/apps/web/components/ClBox/components/MergeCheckItem.tsx
+++ b/moon/apps/web/components/ClBox/components/MergeCheckItem.tsx
@@ -3,23 +3,23 @@ import { AlertIcon, CheckCircleIcon, WarningTriangleIcon } from '@gitmono/ui'
 import { TaskData } from '../types/mergeCheck.config'
 
 const statusMap = {
-  Pending: { Icon: WarningTriangleIcon, className: 'text-yellow-600' },
-  Success: { Icon: CheckCircleIcon, className: 'text-green-600' },
-  Failure: { Icon: AlertIcon, className: 'text-red-600' },
-  Warning: { Icon: WarningTriangleIcon, className: 'text-yellow-600' } // GitHub 通常用黄点表示 in-progress 或 warning
+  Pending: { Icon: WarningTriangleIcon, className: 'text-yellow-600 dark:text-yellow-500' },
+  Success: { Icon: CheckCircleIcon, className: 'text-green-600 dark:text-green-400' },
+  Failure: { Icon: AlertIcon, className: 'text-red-600 dark:text-red-400' },
+  Warning: { Icon: WarningTriangleIcon, className: 'text-yellow-600 dark:text-yellow-500' }
 }
 
 export function MergeCheckItem({ check }: { check: TaskData }) {
   const { Icon, className } = statusMap[check.status]
 
   return (
-    <div className='flex items-center rounded-md p-2 hover:bg-gray-100'>
+    <div className='hover:bg-tertiary flex items-center rounded-md p-2'>
       <Icon className={`h-5 w-5 flex-shrink-0 ${className}`} />
       <div className='ml-3 flex-grow'>
-        <span className='font-semibold text-gray-800'>{check.repo_name}</span>
-        {check.arguments && <span className='ml-2 text-sm text-gray-500'>{check.arguments}</span>}
+        <span className='text-primary font-semibold'>{check.repo_name}</span>
+        {check.arguments && <span className='text-tertiary ml-2 text-sm'>{check.arguments}</span>}
       </div>
-      <button className='text-gray-500 hover:text-gray-800'></button>
+      <button className='text-tertiary hover:text-primary'></button>
     </div>
   )
 }
diff --git a/moon/apps/web/components/ClView/CLComment.tsx b/moon/apps/web/components/ClView/CLComment.tsx
index a95a0f13d..697e461ca 100644
--- a/moon/apps/web/components/ClView/CLComment.tsx
+++ b/moon/apps/web/components/ClView/CLComment.tsx
@@ -45,8 +45,8 @@ const Comment = React.memo<CommentProps>(({ conv, id, whoamI, editorRef }: Comme
   const [refresh, setRefresh] = useAtom(refreshAtom)
 
   return (
-    <div className='overflow-hidden rounded-lg border border-gray-300 bg-white'>
-      <div className='flex items-center justify-between border-b border-gray-300 px-4 py-2'>
+    <div className='border-primary bg-primary overflow-hidden rounded-lg border'>
+      <div className='border-primary flex items-center justify-between border-b px-4 py-2'>
         <div className='flex items-center space-x-3'>
           <div className='cursor-pointer'>
             <ConditionalWrap
@@ -76,7 +76,7 @@ const Comment = React.memo<CommentProps>(({ conv, id, whoamI, editorRef }: Comme
               </UIText>
             </ConditionalWrap>
           </div>
-          <div className='text-sm text-gray-500 hover:text-gray-700'>
+          <div className='text-tertiary hover:text-secondary text-sm'>
             <HandleTime created_at={conv.created_at} />
           </div>
         </div>
diff --git a/moon/apps/web/components/ClView/ConversationTab.tsx b/moon/apps/web/components/ClView/ConversationTab.tsx
index c066fcb78..de14d4a28 100644
--- a/moon/apps/web/components/ClView/ConversationTab.tsx
+++ b/moon/apps/web/components/ClView/ConversationTab.tsx
@@ -192,11 +192,13 @@ export const ConversationTab = React.memo<ConversationTabProps>(
           emptyExtra={
             clDetail &&
             clDetail.status === 'Open' && (
-              <div className='mt-2 text-xs text-gray-900'>
+              <div className='text-primary mt-2 text-xs'>
                 <span>Still in progress? </span>
                 <ConvertToDraftDialog
                   trigger={
-                    <span className='cursor-pointer text-gray-500 underline hover:text-gray-700'>Convert to draft</span>
+                    <span className='text-tertiary hover:text-secondary cursor-pointer underline'>
+                      Convert to draft
+                    </span>
                   }
                   link={clDetail.link}
                 />
@@ -214,12 +216,14 @@ export const ConversationTab = React.memo<ConversationTabProps>(
                   const isApproved = reviewer?.approved ?? false
 
                   return (
-                    <div key={i} className='mb-4 flex items-center gap-2 px-4 text-sm text-gray-500'>
+                    <div key={i} className='text-tertiary mb-4 flex items-center gap-2 px-4 text-sm'>
                       <MemberAvatar size='sm' member={memberMap.get(i)} />
                       <span className='flex-1'>{i}</span>
                       <span
                         className={`ml-2 inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
-                          isApproved ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+                          isApproved
+                            ? 'bg-green-100 text-green-800 dark:bg-green-950 dark:text-green-200'
+                            : 'bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-200'
                         }`}
                       >
                         {isApproved ? 'Approved' : 'Pending'}
@@ -241,7 +245,7 @@ export const ConversationTab = React.memo<ConversationTabProps>(
                             e.stopPropagation()
                             handleDeleteReviewer(i)
                           }}
-                          className='pointer-events-auto cursor-pointer rounded-full border-2 hover:bg-red-800'
+                          className='pointer-events-auto cursor-pointer rounded-full border-2 hover:bg-red-800 hover:text-white'
                         >
                           <TrashIcon />
                         </span>
@@ -250,11 +254,11 @@ export const ConversationTab = React.memo<ConversationTabProps>(
                   )
                 })}
                 {clDetail && clDetail.status === 'Open' && (
-                  <div className='pointer-events-auto mt-2 px-4 text-xs text-gray-900'>
+                  <div className='text-primary pointer-events-auto mt-2 px-4 text-xs'>
                     <span>Still in progress? </span>
                     <ConvertToDraftDialog
                       trigger={
-                        <span className='cursor-pointer text-gray-500 underline hover:text-gray-700'>
+                        <span className='text-tertiary hover:text-secondary cursor-pointer underline'>
                           Convert to draft
                         </span>
                       }
@@ -281,7 +285,7 @@ export const ConversationTab = React.memo<ConversationTabProps>(
             return (
               <>
                 {names.map((i) => (
-                  <div key={i} className='mb-4 flex items-center gap-2 px-4 text-sm text-gray-500'>
+                  <div key={i} className='text-tertiary mb-4 flex items-center gap-2 px-4 text-sm'>
                     <MemberAvatar size='sm' member={memberMap.get(i)} />
                     <span>{i}</span>
                   </div>
@@ -327,7 +331,7 @@ export const ConversationTab = React.memo<ConversationTabProps>(
         <BadgeItem title='Type' items={labels} />
         <BadgeItem title='Projects' items={labels} />
         <BadgeItem title='Milestones' items={labels} />
-        <div className='w-full' style={{ marginTop: '24px' }}>
+        <div className='mt-6 w-full'>
           <WorkWithChatDialog />
         </div>
       </div>
diff --git a/moon/apps/web/components/ClView/ReviewComment.tsx b/moon/apps/web/components/ClView/ReviewComment.tsx
index 03da0793b..aa226e46d 100644
--- a/moon/apps/web/components/ClView/ReviewComment.tsx
+++ b/moon/apps/web/components/ClView/ReviewComment.tsx
@@ -105,20 +105,22 @@ const ReviewComment = React.memo<ReviewCommentProps>(
 
     return (
       <div
-        className={`overflow-hidden rounded-lg border-2 bg-white ${
-          isResolved ? 'border-green-200 bg-green-50' : 'border-blue-200 bg-blue-50'
+        className={`overflow-hidden rounded-lg border-2 ${
+          isResolved
+            ? 'border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950'
+            : 'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950'
         }`}
       >
-        <div className='bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800'>
+        <div className='bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200'>
           📝 Review Comment
           {isResolved && (
-            <span className='ml-2 inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800'>
+            <span className='ml-2 inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900 dark:text-green-200'>
               ✓ Resolved
             </span>
           )}
         </div>
 
-        <div className='flex items-center justify-between border-b border-blue-200 px-4 py-2'>
+        <div className='border-primary flex items-center justify-between border-b px-4 py-2'>
           <div className='flex items-center space-x-3'>
             <div className='cursor-pointer'>
               <ConditionalWrap
@@ -148,7 +150,7 @@ const ReviewComment = React.memo<ReviewCommentProps>(
                 </UIText>
               </ConditionalWrap>
             </div>
-            <div className='text-sm text-gray-500 hover:text-gray-700'>
+            <div className='text-tertiary hover:text-secondary text-sm'>
               <HandleTime created_at={conv.created_at} />
             </div>
           </div>
@@ -158,7 +160,7 @@ const ReviewComment = React.memo<ReviewCommentProps>(
                 size='sm'
                 variant='base'
                 onClick={handleResolve}
-                className='border-green-300 text-green-600 hover:bg-green-50'
+                className='border-green-300 text-green-600 hover:bg-green-50 dark:border-green-700 dark:text-green-400 dark:hover:bg-green-950'
               >
                 Resolve Conversation
               </Button>
diff --git a/moon/apps/web/components/ClView/TimelineItems.tsx b/moon/apps/web/components/ClView/TimelineItems.tsx
index 4b5e99284..72161bd79 100644
--- a/moon/apps/web/components/ClView/TimelineItems.tsx
+++ b/moon/apps/web/components/ClView/TimelineItems.tsx
@@ -1,7 +1,4 @@
 import React, { useMemo } from 'react'
-
-import '@primer/primitives/dist/css/functional/themes/light.css'
-
 import {
   CheckCircleIcon,
   CommentIcon,
@@ -14,6 +11,7 @@ import {
   RepoPushIcon
 } from '@primer/octicons-react'
 import { BaseStyles, ThemeProvider, Timeline } from '@primer/react'
+import { useTheme } from 'next-themes'
 
 import { ConversationItem, ReviewerInfo } from '@gitmono/types/generated'
 
@@ -63,8 +61,10 @@ const TimelineItem = React.memo(({ badge, children, isOver }: TimelineItemProps)
 TimelineItem.displayName = 'TimelineItem'
 
 const TimelineWrapper = React.memo<TimelineWrapperProps>(({ convItems = [] }) => {
+  const { theme } = useTheme()
+
   return (
-    <ThemeProvider>
+    <ThemeProvider colorMode={theme === 'dark' ? 'dark' : 'light'}>
       <BaseStyles>
         <Timeline clipSidebar>
           {convItems?.map((item) => (
@@ -106,38 +106,38 @@ const TimelineItems = React.memo<{
               icon = <CommentIcon />
               children = <CLComment conv={conv} id={id} whoamI={type} editorRef={editorRef} />
             } else {
-              icon = <CheckCircleIcon size={24} className='text-blue-500' />
+              icon = <CheckCircleIcon size={24} className='text-blue-500 dark:text-blue-400' />
               children = <ReviewComment reviewers={reviewers} conv={conv} id={id} whoamI={type} editorRef={editorRef} />
             }
             break
           case 'Approve':
-            icon = <CheckCircleIcon size={24} className='text-green-500' />
+            icon = <CheckCircleIcon size={24} className='text-green-500 dark:text-green-400' />
             children = <ApproveItem conv={conv} />
             break
           case 'Merged':
-            icon = <FeedMergedIcon size={24} className='text-purple-500' />
+            icon = <FeedMergedIcon size={24} className='text-purple-500 dark:text-purple-400' />
             children = <MergedItem conv={conv} />
             isOver = true
             break
           case 'Closed':
-            icon = <FeedPullRequestClosedIcon size={24} className='text-red-600' />
+            icon = <FeedPullRequestClosedIcon size={24} className='text-red-600 dark:text-red-400' />
             children = <CloseItem conv={conv} />
             isOver = true
             break
           case 'Draft':
-            icon = <GitPullRequestDraftIcon size={16} className='text-[#6e7781]' />
+            icon = <GitPullRequestDraftIcon size={16} className='text-tertiary' />
             children = <EditItem conv={conv} />
             break
           case 'Reopen':
-            icon = <FeedPullRequestOpenIcon size={24} className='text-green-500' />
+            icon = <FeedPullRequestOpenIcon size={24} className='text-green-500 dark:text-green-400' />
             children = <ReopenItem conv={conv} />
             break
           case 'Assignee':
-            icon = <PersonIcon size={24} />
+            icon = <PersonIcon size={24} className='text-tertiary' />
             children = <AssigneeItem conv={conv} />
             break
           case 'Label':
-            icon = <FeedTagIcon size={24} className='text-cyan-500' />
+            icon = <FeedTagIcon size={24} className='text-cyan-500 dark:text-cyan-400' />
             children = <LabelItem conv={conv} />
             break
           case 'ForcePush':
diff --git a/moon/apps/web/components/ClView/components/Checks/cpns/Task.tsx b/moon/apps/web/components/ClView/components/Checks/cpns/Task.tsx
index 2e41fa7cc..4cc53059e 100644
--- a/moon/apps/web/components/ClView/components/Checks/cpns/Task.tsx
+++ b/moon/apps/web/components/ClView/components/Checks/cpns/Task.tsx
@@ -70,12 +70,12 @@ export const Task = ({ list, logStatus }: { list: TaskInfoDTO; logStatus: Record
     <>
       <div
         onClick={() => setExtend(!extend)}
-        className='flex w-full cursor-pointer items-center gap-4 border border-t-0 bg-[#fff] pl-4'
+        className='border-primary bg-primary flex w-full cursor-pointer items-center gap-4 border border-t-0 pl-4'
       >
         {extend ? <ChevronRightIcon size={16} /> : <ChevronDownIcon size={16} />}
         <div className='flex flex-col justify-center'>
-          <span className='font-weight fz-[14px] text-[#1f2328]'>{list.task_name}</span>
-          <span className='fz-[12px] font-light text-[#59636e]'>{formatDateTime(list.created_at)}</span>
+          <span className='text-primary font-weight fz-[14px]'>{list.task_name}</span>
+          <span className='text-tertiary fz-[12px] font-light'>{formatDateTime(list.created_at)}</span>
         </div>
         {/* {extend && list} */}
       </div>
@@ -114,7 +114,7 @@ export const TaskItem = ({ build, logStatus }: { build: BuildDTO; logStatus?: Lo
       >
         {/* {identifyStatus(statusMap.get(build.id)?.status || Status.NotFound)} */}
         {identifyStatus(build.status || Status.NotFound)}
-        <span className={`cursor-pointer hover:text-[#1f2328] ${textColor}`}>{build.id}</span>
+        <span className={`hover:text-primary cursor-pointer ${textColor}`}>{build.id}</span>
       </div>
     </>
   )
@@ -123,9 +123,9 @@ export const TaskItem = ({ build, logStatus }: { build: BuildDTO; logStatus?: Lo
 export const identifyStatus = (status: Status[keyof Status]) => {
   switch (status) {
     case Status.Completed:
-      return <CheckIcon size={14} className='text-[#1a7f37]' />
+      return <CheckIcon size={14} className='text-green-700 dark:text-green-400' />
     case Status.Failed:
-      return <XIcon size={14} className='text-[#d53d46]' />
+      return <XIcon size={14} className='text-red-600 dark:text-red-400' />
     case Status.Building:
       return <LoadingSpinner />
     case Status.Pending:
@@ -134,6 +134,6 @@ export const identifyStatus = (status: Status[keyof Status]) => {
       return <LoadingSpinner />
 
     default:
-      return <XIcon size={14} className='text-[#d53d46]' />
+      return <XIcon size={14} className='text-red-600 dark:text-red-400' />
   }
 }
diff --git a/moon/apps/web/components/ClView/components/Checks/index.tsx b/moon/apps/web/components/ClView/components/Checks/index.tsx
index dd70569f5..8d9bb62f8 100644
--- a/moon/apps/web/components/ClView/components/Checks/index.tsx
+++ b/moon/apps/web/components/ClView/components/Checks/index.tsx
@@ -168,13 +168,13 @@ const Checks = ({ cl }: { cl: number }) => {
   // Handle tasks loading state
   if (isTasksLoading) {
     return (
-      <div className='bg-[#f6f8fa]' style={{ height: `calc(100vh - 104px)` }}>
-        <div className='flex h-[60px] items-center border-b bg-white px-4'>
+      <div className='bg-secondary' style={{ height: `calc(100vh - 104px)` }}>
+        <div className='border-primary bg-primary flex h-[60px] items-center border-b px-4'>
           <span>
-            <h2 className='text-bold fz-[14px] text-[#59636e]'>[] tasks status interface</h2>
+            <h2 className='text-tertiary text-bold fz-[14px]'>[] tasks status interface</h2>
           </span>
         </div>
-        <div className='flex h-full items-center justify-center text-gray-500'>
+        <div className='text-tertiary flex h-full items-center justify-center'>
           <div className='flex items-center gap-3'>
             <LoadingSpinner />
             <span>Loading tasks...</span>
@@ -187,13 +187,13 @@ const Checks = ({ cl }: { cl: number }) => {
   // Handle tasks error or empty state
   if (isTasksError) {
     return (
-      <div className='bg-[#f6f8fa]' style={{ height: `calc(100vh - 104px)` }}>
-        <div className='flex h-[60px] items-center border-b bg-white px-4'>
+      <div className='bg-secondary' style={{ height: `calc(100vh - 104px)` }}>
+        <div className='border-primary bg-primary flex h-[60px] items-center border-b px-4'>
           <span>
-            <h2 className='text-bold fz-[14px] text-[#59636e]'>[] tasks status interface</h2>
+            <h2 className='text-tertiary text-bold fz-[14px]'>[] tasks status interface</h2>
           </span>
         </div>
-        <div className='flex h-full items-center justify-center text-red-500'>
+        <div className='flex h-full items-center justify-center text-red-500 dark:text-red-400'>
           <span>Failed to fetch tasks</span>
         </div>
       </div>
@@ -204,13 +204,13 @@ const Checks = ({ cl }: { cl: number }) => {
 
   if (!isTasksLoading && (!tasks || tasks.length === 0 || validTasks.length === 0)) {
     return (
-      <div className='bg-[#f6f8fa]' style={{ height: `calc(100vh - 104px)` }}>
-        <div className='flex h-[60px] items-center border-b bg-white px-4'>
+      <div className='bg-secondary' style={{ height: `calc(100vh - 104px)` }}>
+        <div className='border-primary bg-primary flex h-[60px] items-center border-b px-4'>
           <span>
-            <h2 className='text-bold fz-[14px] text-[#59636e]'>[] tasks status interface</h2>
+            <h2 className='text-tertiary text-bold fz-[14px]'>[] tasks status interface</h2>
           </span>
         </div>
-        <div className='flex h-full items-center justify-center text-gray-500'>
+        <div className='text-tertiary flex h-full items-center justify-center'>
           <span>No tasks available</span>
         </div>
       </div>
@@ -221,7 +221,7 @@ const Checks = ({ cl }: { cl: number }) => {
   const renderLogContent = () => {
     if (!buildid) {
       return (
-        <div className='flex h-full items-center justify-center text-gray-500'>
+        <div className='text-tertiary flex h-full items-center justify-center'>
           <span>Select a build to view logs</span>
         </div>
       )
@@ -232,7 +232,7 @@ const Checks = ({ cl }: { cl: number }) => {
     // If status is undefined or idle, user needs to select a build
     if (!status || status === 'idle') {
       return (
-        <div className='flex h-full items-center justify-center text-gray-500'>
+        <div className='text-tertiary flex h-full items-center justify-center'>
           <span>Select a build to view logs</span>
         </div>
       )
@@ -240,7 +240,7 @@ const Checks = ({ cl }: { cl: number }) => {
 
     if (status === 'loading') {
       return (
-        <div className='flex h-full items-center justify-center text-gray-500'>
+        <div className='text-tertiary flex h-full items-center justify-center'>
           <span>Loading logs...</span>
         </div>
       )
@@ -248,7 +248,7 @@ const Checks = ({ cl }: { cl: number }) => {
 
     if (status === 'error') {
       return (
-        <div className='flex h-full items-center justify-center text-red-500'>
+        <div className='flex h-full items-center justify-center text-red-500 dark:text-red-400'>
           <span>Failed to fetch logs</span>
         </div>
       )
@@ -256,7 +256,7 @@ const Checks = ({ cl }: { cl: number }) => {
 
     if (status === 'empty') {
       return (
-        <div className='flex h-full items-center justify-center text-gray-500'>
+        <div className='text-tertiary flex h-full items-center justify-center'>
           <span>No logs available</span>
         </div>
       )
@@ -272,7 +272,7 @@ const Checks = ({ cl }: { cl: number }) => {
 
     // Fallback: show select prompt
     return (
-      <div className='flex h-full items-center justify-center text-gray-500'>
+      <div className='text-tertiary flex h-full items-center justify-center'>
         <span>Select a build to view logs</span>
       </div>
     )
@@ -280,14 +280,17 @@ const Checks = ({ cl }: { cl: number }) => {
 
   return (
     <>
-      <div className='bg-[#f6f8fa]' style={{ height: `calc(100vh - 104px)` }}>
-        <div className='flex h-[60px] items-center border-b bg-white px-4'>
+      <div className='bg-secondary' style={{ height: `calc(100vh - 104px)` }}>
+        <div className='border-primary bg-primary flex h-[60px] items-center border-b px-4'>
           <span>
-            <h2 className='text-bold fz-[14px] text-[#59636e]'>[] tasks status interface</h2>
+            <h2 className='text-tertiary text-bold fz-[14px]'>[] tasks status interface</h2>
           </span>
         </div>
         <div ref={containerRef} className='flex' style={{ height: `calc(100vh - 164px)` }}>
-          <div className='h-full overflow-y-auto border-r' style={{ width: leftWidth ?? '40%', flexShrink: 0 }}>
+          <div
+            className='border-primary h-full overflow-y-auto border-r'
+            style={{ width: leftWidth ?? '40%', flexShrink: 0 }}
+          >
             {validTasks.map((t) => (
               <Task key={t.task_id} list={t} logStatus={logStatus} />
             ))}
@@ -295,7 +298,7 @@ const Checks = ({ cl }: { cl: number }) => {
           {/* Resizer handle */}
           <div
             onMouseDown={handleMouseDown}
-            className='h-full w-1 flex-shrink-0 cursor-col-resize bg-gray-200 transition-colors hover:bg-blue-400'
+            className='border-primary h-full w-1 flex-shrink-0 cursor-col-resize transition-colors hover:bg-blue-400'
             style={{ backgroundColor: isDragging ? '#60a5fa' : undefined }}
           />
           <div className='flex-1'>{renderLogContent()}</div>
diff --git a/moon/apps/web/components/ClView/filters/DropdownItems.tsx b/moon/apps/web/components/ClView/filters/DropdownItems.tsx
index 613ffa0ca..89f16961e 100644
--- a/moon/apps/web/components/ClView/filters/DropdownItems.tsx
+++ b/moon/apps/web/components/ClView/filters/DropdownItems.tsx
@@ -20,8 +20,8 @@ export const DropdownItemwithAvatar = ({
       )}
     >
       <MemberAvatar size='sm' member={member} />
-      <span className='text-sm font-semibold'>{member.user.display_name}</span>
-      <span className='ml-1 text-xs text-gray-500'>{member.user.username}</span>
+      <span className='text-primary text-sm font-semibold'>{member.user.display_name}</span>
+      <span className='text-tertiary ml-1 text-xs'>{member.user.username}</span>
     </div>
   )
 }
@@ -38,8 +38,8 @@ export const DropdownItemwithLabel = ({ classname, label }: { classname?: string
         className='h-3.5 w-3.5 rounded-full border'
         style={{ backgroundColor: label.color, borderColor: label.color }}
       />
-      <span className='text-sm font-semibold'>{label.name}</span>
-      <span className='ml-1 text-xs text-gray-500'>{label.description}</span>
+      <span className='text-primary text-sm font-semibold'>{label.name}</span>
+      <span className='text-tertiary ml-1 text-xs'>{label.description}</span>
     </div>
   )
 }
diff --git a/moon/apps/web/components/ClView/filters/FilterDropdown.tsx b/moon/apps/web/components/ClView/filters/FilterDropdown.tsx
index 3645988db..b643552a4 100644
--- a/moon/apps/web/components/ClView/filters/FilterDropdown.tsx
+++ b/moon/apps/web/components/ClView/filters/FilterDropdown.tsx
@@ -82,7 +82,7 @@ export function FilterDropdown({
         onOpenChange={handleOpenChange}
         key={name}
         align='end'
-        desktop={{ width: 'w-72 max-h-[50vh] overflow-auto bg-white' }}
+        desktop={{ width: 'w-72 max-h-[50vh] overflow-auto bg-primary' }}
         items={[
           {
             type: 'item',
@@ -115,7 +115,7 @@ export function FilterDropdown({
         align='end'
         open={open}
         onOpenChange={handleOpenChange}
-        desktop={{ width: 'w-72 max-h-[50vh] overflow-auto bg-white' }}
+        desktop={{ width: 'w-72 max-h-[50vh] overflow-auto bg-primary' }}
         items={[
           {
             type: 'item',
diff --git a/moon/apps/web/components/ClView/filters/dropdown/OrderDropdown.tsx b/moon/apps/web/components/ClView/filters/dropdown/OrderDropdown.tsx
index 4c2eff16c..13d6af871 100644
--- a/moon/apps/web/components/ClView/filters/dropdown/OrderDropdown.tsx
+++ b/moon/apps/web/components/ClView/filters/dropdown/OrderDropdown.tsx
@@ -47,7 +47,7 @@ export function OrderDropdown({ sortOptions, timeOptions, currentSort, currentTi
     <DropdownMenu
       key='order'
       align='end'
-      desktop={{ width: 'w-72 max-h-[50vh] overflow-auto bg-white' }}
+      desktop={{ width: 'w-72 max-h-[50vh] overflow-auto bg-primary' }}
       items={[
         {
           type: 'item',
diff --git a/moon/apps/web/components/ClView/filters/dropdown/ReviewDropdown.tsx b/moon/apps/web/components/ClView/filters/dropdown/ReviewDropdown.tsx
index 783925aee..546408081 100644
--- a/moon/apps/web/components/ClView/filters/dropdown/ReviewDropdown.tsx
+++ b/moon/apps/web/components/ClView/filters/dropdown/ReviewDropdown.tsx
@@ -42,7 +42,7 @@ export function ReviewDropdown({ options, value, onChange, onClose }: ReviewDrop
       key='review'
       align='end'
       onOpenChange={handleOpenChange}
-      desktop={{ width: 'w-72 max-h-[50vh] overflow-auto bg-white' }}
+      desktop={{ width: 'w-72 max-h-[50vh] overflow-auto bg-primary' }}
       items={items}
       trigger={
         <Button size='sm' variant={'plain'} tooltipShortcut='Reviews'>
diff --git a/moon/apps/web/components/ClView/index.tsx b/moon/apps/web/components/ClView/index.tsx
index 8c7176811..faf68f433 100644
--- a/moon/apps/web/components/ClView/index.tsx
+++ b/moon/apps/web/components/ClView/index.tsx
@@ -358,8 +358,8 @@ export default function CLView() {
           id='/[org]/cl'
           className={cn('@container', 'max-w-full lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl')}
         >
-          <div className='group flex min-h-[35px] items-center rounded-md border border-gray-300 bg-white px-3 shadow-sm transition-all focus-within:border-blue-500 focus-within:shadow-md focus-within:ring-2 focus-within:ring-blue-100 hover:border-gray-400'>
-            <div className='flex items-center text-gray-400'>
+          <div className='border-primary bg-primary group flex min-h-[35px] items-center rounded-md border px-3 shadow-sm transition-all focus-within:border-blue-500 focus-within:shadow-md focus-within:ring-2 focus-within:ring-blue-100 hover:border-blue-400 dark:focus-within:ring-blue-900'>
+            <div className='text-quaternary flex items-center'>
               <SearchIcon className='h-4 w-4' />
             </div>
 
@@ -368,7 +368,7 @@ export default function CLView() {
               value={searchQuery}
               readOnly
               placeholder='Filter change list by author, labels , assignee, or review...'
-              className='w-full flex-1 border-none bg-transparent text-sm text-gray-400 outline-none ring-0 focus:outline-none focus:ring-0'
+              className='text-secondary placeholder:text-quaternary w-full flex-1 border-none bg-transparent text-sm outline-none ring-0 focus:outline-none focus:ring-0'
             />
 
             {searchQuery && (
@@ -376,7 +376,7 @@ export default function CLView() {
                 onClick={() => {
                   clearAllFilters()
                 }}
-                className='flex items-center justify-center rounded-md p-1 text-gray-400 transition-all hover:bg-gray-100 hover:text-gray-600'
+                className='text-quaternary hover:bg-tertiary hover:text-secondary flex items-center justify-center rounded-md p-1 transition-all'
                 title='Clear search'
               >
                 <XIcon className='h-4 w-4' />
diff --git a/moon/apps/web/components/CodeView/Tags/NewMonoTagDialog.tsx b/moon/apps/web/components/CodeView/Tags/NewMonoTagDialog.tsx
index df0be82a3..ef0c42ef0 100644
--- a/moon/apps/web/components/CodeView/Tags/NewMonoTagDialog.tsx
+++ b/moon/apps/web/components/CodeView/Tags/NewMonoTagDialog.tsx
@@ -18,10 +18,9 @@ import { Dialog } from '@gitmono/ui/Dialog'
 
 import { useCreateMonoTag } from '@/hooks/useCreateMonoTag'
 import { useGetCurrentUser } from '@/hooks/useGetCurrentUser'
+import { useGetLatestCommit } from '@/hooks/useGetLatestCommit'
 import { useGetTreeCommitInfo } from '@/hooks/useGetTreeCommitInfo'
 
-import { useGetLatestCommit } from '../../../hooks/useGetLatestCommit'
-
 interface Props {
   open: boolean
   onOpenChange: (open: boolean) => void
diff --git a/moon/apps/web/components/Issues/IssueSearch.tsx b/moon/apps/web/components/Issues/IssueSearch.tsx
index ff3482928..95224eb13 100644
--- a/moon/apps/web/components/Issues/IssueSearch.tsx
+++ b/moon/apps/web/components/Issues/IssueSearch.tsx
@@ -19,9 +19,9 @@ interface IssueSearchProps {
 export default function IssueSearch({ filterQuery, onClearFilters }: IssueSearchProps) {
   return (
     <>
-      <div className='flex min-h-[35px] items-center gap-2'>
-        <div className='group flex min-h-[35px] flex-1 items-center rounded-md border border-gray-300 bg-white px-3 shadow-sm transition-all focus-within:border-blue-500 focus-within:shadow-md focus-within:ring-2 focus-within:ring-blue-100 hover:border-gray-400'>
-          <div className='flex items-center text-gray-400'>
+      <div className='flex min-h-[35px] items-center gap-2 bg-transparent'>
+        <div className='border-primary bg-primary group flex min-h-[35px] flex-1 items-center rounded-md border px-3 shadow-sm transition-all focus-within:border-blue-500 focus-within:shadow-md focus-within:ring-2 focus-within:ring-blue-100 hover:border-gray-400 dark:focus-within:ring-blue-900/50 dark:hover:border-gray-600'>
+          <div className='text-quaternary flex items-center'>
             <SearchIcon className='w-4' />
           </div>
 
@@ -30,12 +30,12 @@ export default function IssueSearch({ filterQuery, onClearFilters }: IssueSearch
             value={filterQuery || ''}
             readOnly
             placeholder='Filter issues by author, labels, or assignee...'
-            className='w-full flex-1 border-none bg-transparent text-sm text-gray-400 outline-none ring-0 focus:outline-none focus:ring-0'
+            className='text-quaternary placeholder:text-quaternary w-full flex-1 border-none bg-transparent text-sm outline-none ring-0 focus:outline-none focus:ring-0'
           />
           {filterQuery && (
             <button
               onClick={onClearFilters}
-              className='flex items-center justify-center rounded-md p-1 text-gray-400 transition-all hover:bg-gray-200 hover:text-gray-600'
+              className='text-quaternary hover:bg-secondary hover:text-secondary flex items-center justify-center rounded-md p-1 transition-all'
               title='Clear filters'
             >
               <XIcon className='h-4 w-4' />
diff --git a/moon/apps/web/components/Issues/TitleInput.tsx b/moon/apps/web/components/Issues/TitleInput.tsx
index df94d1b26..bc002b1ba 100644
--- a/moon/apps/web/components/Issues/TitleInput.tsx
+++ b/moon/apps/web/components/Issues/TitleInput.tsx
@@ -73,10 +73,10 @@ const TitleInput = ({
         {!isEdit && (
           <>
             <div className='flex w-full items-center justify-between'>
-              <UIText size='text-2xl' weight='font-bold' className='-tracking-[1px] lg:flex'>
+              <UIText size='text-2xl' weight='font-bold' className='text-primary -tracking-[1px] lg:flex'>
                 {`${title || ''}`}
                 <span>&nbsp;</span>
-                <span className='font-light !text-[#59636e]'>${id}</span>
+                <span className='text-tertiary font-light'>${id}</span>
               </UIText>
               <Button
                 onClick={() => {
diff --git a/moon/apps/web/components/Issues/WorkWithChatDialog.tsx b/moon/apps/web/components/Issues/WorkWithChatDialog.tsx
index 52a4fb8f7..671c86003 100644
--- a/moon/apps/web/components/Issues/WorkWithChatDialog.tsx
+++ b/moon/apps/web/components/Issues/WorkWithChatDialog.tsx
@@ -37,35 +37,32 @@ export function WorkWithChatDialog() {
   }
 
   return (
-    <div className='w-full rounded-lg bg-gray-100'>
-      {/* Top Icon and Title - White background */}
-      <div className='mb-0 flex flex-col items-center rounded-t-lg p-4' style={{ backgroundColor: '#ffffff' }}>
-        <div
-          className='mb-3 flex h-16 w-16 items-center justify-center rounded-lg'
-          style={{ backgroundColor: '#52b5f2' }}
-        >
+    <div className='bg-secondary w-full rounded-lg'>
+      {/* Top Icon and Title */}
+      <div className='bg-primary mb-0 flex flex-col items-center rounded-t-lg p-4'>
+        <div className='mb-3 flex h-16 w-16 items-center justify-center rounded-lg bg-[#52b5f2]'>
           <DiscussionClosedIcon size={24} className='text-black' />
         </div>
-        <UIText size='text-lg' weight='font-medium' className='text-gray-700'>
-          Work with <span style={{ color: '#111214' }}>Chat</span>
+        <UIText size='text-lg' weight='font-medium' className='text-secondary'>
+          Work with <span className='text-primary'>Chat</span>
         </UIText>
       </div>
 
       {/* Input box with border and full width */}
-      <div className='w-full rounded-lg border border-gray-300' style={{ backgroundColor: '#f3f4f5' }}>
+      <div className='border-primary bg-tertiary w-full rounded-lg border'>
         {/* @Chat header section with rounded top corners */}
-        <div className='flex items-center gap-2 rounded-t-lg px-3 py-2' style={{ backgroundColor: '#e6e8ea' }}>
+        <div className='bg-secondary flex items-center gap-2 rounded-t-lg px-3 py-2'>
           <div className='flex h-6 w-6 items-center justify-center rounded' style={{ backgroundColor: '#52b5f2' }}>
             <DiscussionClosedIcon size={14} className='text-black' />
           </div>
-          <UIText size='text-sm' weight='font-medium' className='text-gray-700'>
+          <UIText size='text-sm' weight='font-medium' className='text-secondary'>
             @Chat
           </UIText>
           <Button
             variant='plain'
             iconOnly={<BuildIcon style={{ fontSize: 14 }} />}
             accessibilityLabel='Build settings'
-            className='h-5 w-5 p-0 text-gray-600'
+            className='text-tertiary h-5 w-5 p-0'
           />
         </div>
 
@@ -79,11 +76,12 @@ export function WorkWithChatDialog() {
               onFocus={handleFocus}
               onBlur={handleBlur}
               placeholder=''
-              className='w-full resize-none border-0 bg-transparent text-sm focus:outline-none focus:ring-0'
+              className={`w-full resize-none border-0 bg-transparent text-sm focus:outline-none focus:ring-0 ${
+                isShowingHint ? 'text-quaternary' : 'text-primary'
+              }`}
               style={{
                 minHeight: '60px',
-                lineHeight: '1.4',
-                color: isShowingHint ? '#8d9297' : '#374151'
+                lineHeight: '1.4'
               }}
               rows={3}
             />
@@ -97,19 +95,19 @@ export function WorkWithChatDialog() {
                 variant='plain'
                 iconOnly={<MentionIcon size={16} />}
                 accessibilityLabel='Mention'
-                className='h-6 w-6 p-0 text-gray-600 hover:text-gray-800'
+                className='text-tertiary hover:text-primary h-6 w-6 p-0'
               />
               <Button
                 variant='plain'
                 iconOnly={<HashIcon size={16} />}
                 accessibilityLabel='Add hashtag'
-                className='h-6 w-6 p-0 text-gray-600 hover:text-gray-800'
+                className='text-tertiary hover:text-primary h-6 w-6 p-0'
               />
               <Button
                 variant='plain'
                 iconOnly={<ImageIcon size={16} />}
                 accessibilityLabel='Add image'
-                className='h-6 w-6 p-0 text-gray-600 hover:text-gray-800'
+                className='text-tertiary hover:text-primary h-6 w-6 p-0'
               />
             </div>
 
@@ -120,7 +118,7 @@ export function WorkWithChatDialog() {
                 <Button
                   variant='plain'
                   size='sm'
-                  className='h-6 px-2 text-xs text-gray-600'
+                  className='text-tertiary h-6 px-2 text-xs'
                   rightSlot={<ChevronDownIcon size={12} />}
                 >
                   {autoMode}
@@ -133,15 +131,12 @@ export function WorkWithChatDialog() {
                 variant='plain'
                 iconOnly={<SparklesIcon size={16} />}
                 accessibilityLabel='AI assistant'
-                className='h-6 w-6 p-0 text-gray-600 hover:text-gray-800'
+                className='text-tertiary hover:text-primary h-6 w-6 p-0'
               />
 
               {/* Microphone icon */}
-              <div
-                className='flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:opacity-80'
-                style={{ backgroundColor: '#e2e4e7' }}
-              >
-                <MicrophoneIcon size={16} style={{ color: '#45484d' }} />
+              <div className='bg-quaternary hover:bg-tertiary flex h-6 w-6 cursor-pointer items-center justify-center rounded-md'>
+                <MicrophoneIcon size={16} className='text-secondary' />
               </div>
 
               {/* Send button */}
diff --git a/moon/apps/web/components/OrionClient/ClientsTable.tsx b/moon/apps/web/components/OrionClient/ClientsTable.tsx
index ee878236b..76cf467eb 100644
--- a/moon/apps/web/components/OrionClient/ClientsTable.tsx
+++ b/moon/apps/web/components/OrionClient/ClientsTable.tsx
@@ -82,7 +82,7 @@ export function ClientsTable({ clients, isLoading, statusFilter, onStatusChange,
             options={statusOptions}
             onChange={(v) => onStatusChange(v as OrionClientStatus | 'all')}
           >
-            <SelectTrigger className='text-muted-foreground h-auto w-full justify-start gap-1 border-none bg-transparent p-0 text-[11px] font-semibold uppercase shadow-none ring-0 focus:outline-none focus:ring-0'>
+            <SelectTrigger className='text-muted-foreground h-auto w-full justify-start gap-1 !border-none !bg-transparent p-0 text-[11px] font-semibold uppercase !shadow-none ring-0 focus:outline-none focus:ring-0'>
               <SelectValue placeholder='Status' />
             </SelectTrigger>
           </Select>
diff --git a/moon/apps/web/components/QueueView/items.tsx b/moon/apps/web/components/QueueView/items.tsx
index 544766ef1..d2b3f8e9d 100644
--- a/moon/apps/web/components/QueueView/items.tsx
+++ b/moon/apps/web/components/QueueView/items.tsx
@@ -22,15 +22,15 @@ interface QueueItemsListProps {
 const getStatusIcon = (status: QueueStatus) => {
   switch (status) {
     case QueueStatus.Waiting:
-      return <GitPullRequestIcon className='text-[#378f50]' />
+      return <GitPullRequestIcon className='text-[#378f50] dark:text-green-400' />
     case QueueStatus.Testing:
-      return <GitPullRequestIcon className='text-[#2f81f7]' />
+      return <GitPullRequestIcon className='text-[#2f81f7] dark:text-blue-400' />
     case QueueStatus.Merging:
-      return <GitMergeIcon className='text-[#986ee2]' />
+      return <GitMergeIcon className='text-[#986ee2] dark:text-purple-400' />
     case QueueStatus.Merged:
-      return <GitMergeIcon className='text-gray-500' />
+      return <GitMergeIcon className='text-tertiary' />
     case QueueStatus.Failed:
-      return <GitPullRequestClosedIcon className='text-[#d1242f]' />
+      return <GitPullRequestClosedIcon className='text-[#d1242f] dark:text-red-400' />
     default:
       return null
   }
@@ -88,17 +88,17 @@ export const QueueItemsList: React.FC<QueueItemsListProps> = ({ items, stats, is
   }
 
   const header = (
-    <BreadcrumbTitlebarContainer className='justify-between bg-gray-100 pl-3 pr-3'>
+    <BreadcrumbTitlebarContainer className='bg-secondary justify-between pl-3 pr-3'>
       <div className='flex items-center gap-3'>
         <GitPullRequestClosedIcon />
         <span className='p-2 font-medium'>{sortedItems.length} Queued</span>
 
-        {sortedItems.length > 0 && <span className='text-sm text-gray-500'>{stats.failed_count} Failing</span>}
+        {sortedItems.length > 0 && <span className='text-tertiary text-sm'>{stats.failed_count} Failing</span>}
       </div>
 
       <div className='flex items-center gap-2'>
         <button
-          className='rounded-md bg-gray-200 px-2 py-1 text-sm text-gray-700 hover:bg-gray-300 disabled:cursor-not-allowed disabled:opacity-50'
+          className='bg-secondary hover:bg-tertiary text-secondary rounded-md px-2 py-1 text-sm disabled:cursor-not-allowed disabled:opacity-50'
           onClick={handleCancelAllClick}
           disabled={isCancellingAll || cancellableCount === 0}
         >
@@ -116,7 +116,7 @@ export const QueueItemsList: React.FC<QueueItemsListProps> = ({ items, stats, is
             const labels = <ItemLabels item={{ labels: [] } as any} />
 
             const subline = (
-              <div className='mt-1 space-y-1 text-sm text-gray-500'>
+              <div className='text-tertiary mt-1 space-y-1 text-sm'>
                 {queueItem.status !== QueueStatus.Failed && (
                   <div className='flex flex-wrap items-center gap-2'>
                     <span className='font-medium'>{queueItem.status}</span>
@@ -136,7 +136,7 @@ export const QueueItemsList: React.FC<QueueItemsListProps> = ({ items, stats, is
                       {queueItem.retry_count > 0 && <span>• {queueItem.retry_count} retries</span>}
                     </div>
 
-                    <div className='text-sm text-red-500'>
+                    <div className='text-sm text-red-500 dark:text-red-400'>
                       <div
                         className='max-w-md cursor-help truncate leading-snug'
                         title={`${queueItem.error.failure_type}: ${queueItem.error.message}`}
@@ -151,7 +151,7 @@ export const QueueItemsList: React.FC<QueueItemsListProps> = ({ items, stats, is
             )
 
             const right = (
-              <div className='flex items-center gap-4 text-sm text-gray-500'>
+              <div className='text-tertiary flex items-center gap-4 text-sm'>
                 <div className='flex gap-2'>
                   {queueItem.status === QueueStatus.Merging && (
                     <div className='flex items-center pr-5'>
@@ -161,7 +161,7 @@ export const QueueItemsList: React.FC<QueueItemsListProps> = ({ items, stats, is
 
                   {queueItem.status === QueueStatus.Failed && queueItem.retry_count < 3 && (
                     <button
-                      className='rounded-md bg-blue-500 px-2 py-1 text-xs text-white hover:bg-blue-600 disabled:opacity-50'
+                      className='rounded-md bg-blue-500 px-2 py-1 text-xs text-white hover:bg-blue-600 disabled:opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700'
                       onClick={(e) => handleRetry(queueItem.cl_link, e)}
                       disabled={isRetrying}
                     >
@@ -171,7 +171,7 @@ export const QueueItemsList: React.FC<QueueItemsListProps> = ({ items, stats, is
 
                   {queueItem.status !== QueueStatus.Merging && queueItem.status !== QueueStatus.Merged && (
                     <button
-                      className='rounded-md bg-gray-200 px-2 py-1 text-xs text-gray-700 hover:bg-gray-300 disabled:opacity-50'
+                      className='bg-secondary hover:bg-tertiary text-secondary rounded-md px-2 py-1 text-xs disabled:opacity-50'
                       onClick={(e) => handleCancelClick(queueItem.cl_link, e)}
                       disabled={isRemoving}
                     >
diff --git a/moon/apps/web/components/QueueView/stats.tsx b/moon/apps/web/components/QueueView/stats.tsx
index b3084601d..cd9cd1e3f 100644
--- a/moon/apps/web/components/QueueView/stats.tsx
+++ b/moon/apps/web/components/QueueView/stats.tsx
@@ -11,13 +11,13 @@ interface QueueStatsCardProps {
 export const QueueStatsCard: React.FC<QueueStatsCardProps> = ({ stats, isLoading }) => {
   if (isLoading) {
     return (
-      <div className='rounded-lg border border-gray-200 bg-white p-4 shadow-sm'>
+      <div className='border-primary bg-primary rounded-lg border p-4 shadow-sm'>
         <div className='animate-pulse'>
-          <div className='mb-3 h-4 w-32 rounded bg-gray-200'></div>
+          <div className='bg-secondary mb-3 h-4 w-32 rounded'></div>
           <div className='space-y-3'>
-            <div className='h-8 w-full rounded bg-gray-200'></div>
-            <div className='h-8 w-full rounded bg-gray-200'></div>
-            <div className='h-8 w-full rounded bg-gray-200'></div>
+            <div className='bg-secondary h-8 w-full rounded'></div>
+            <div className='bg-secondary h-8 w-full rounded'></div>
+            <div className='bg-secondary h-8 w-full rounded'></div>
           </div>
         </div>
       </div>
@@ -26,74 +26,78 @@ export const QueueStatsCard: React.FC<QueueStatsCardProps> = ({ stats, isLoading
 
   return (
     <div className='flex flex-col gap-3'>
-      <div className='rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition-shadow hover:shadow-md'>
+      <div className='border-primary bg-primary rounded-lg border p-4 shadow-sm transition-shadow hover:shadow-md'>
         <div className='mb-3 flex items-center justify-between'>
-          <span className='text-xs font-semibold tracking-wide text-gray-500'>Merge Count</span>
+          <span className='text-tertiary text-xs font-semibold tracking-wide'>Merge Count</span>
         </div>
 
         <div className='flex items-center gap-3'>
           <div className='flex h-12 w-12 items-center justify-center rounded-full pl-3'>
-            <GitMergeIcon size={20} className='text-gray-600' />
+            <GitMergeIcon size={20} className='text-secondary dark:text-tertiary' />
           </div>
           <div className='flex flex-col pl-3'>
-            <span className='text-2xl font-bold text-gray-900'>{stats.merged_count}</span>
-            <span className='text-xs text-gray-500'>Merged in queue</span>
+            <span className='text-primary text-2xl font-bold'>{stats.merged_count}</span>
+            <span className='text-tertiary text-xs'>Merged in queue</span>
           </div>
         </div>
       </div>
 
       {(stats.waiting_count > 0 || stats.testing_count > 0 || stats.merging_count > 0 || stats.failed_count > 0) && (
-        <div className='rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition-shadow hover:shadow-md'>
+        <div className='border-primary bg-primary rounded-lg border p-4 shadow-sm transition-shadow hover:shadow-md'>
           <div className='space-y-2.5'>
             {/* Merging */}
             {stats.merging_count > 0 && (
-              <div className='group flex items-center justify-between rounded-md p-2 transition-colors hover:bg-purple-50'>
+              <div className='group flex items-center justify-between rounded-md p-2 transition-colors hover:bg-purple-50 dark:hover:bg-purple-950/30'>
                 <div className='flex items-center gap-2.5'>
-                  <div className='flex h-8 w-8 items-center justify-center rounded-full bg-purple-100'>
-                    <GitMergeIcon size={14} className='text-purple-600' />
+                  <div className='flex h-8 w-8 items-center justify-center rounded-full bg-purple-100 dark:bg-purple-900/50'>
+                    <GitMergeIcon size={14} className='text-purple-600 dark:text-purple-400' />
                   </div>
-                  <span className='text-sm font-medium text-gray-700'>Merging</span>
+                  <span className='text-secondary text-sm font-medium'>Merging</span>
                 </div>
-                <span className='text-lg font-semibold text-purple-600'>{stats.merging_count}</span>
+                <span className='text-lg font-semibold text-purple-600 dark:text-purple-400'>
+                  {stats.merging_count}
+                </span>
               </div>
             )}
 
             {/* Waiting */}
             {stats.waiting_count > 0 && (
-              <div className='group flex items-center justify-between rounded-md p-2 transition-colors hover:bg-yellow-50'>
+              <div className='group flex items-center justify-between rounded-md p-2 transition-colors hover:bg-yellow-50 dark:hover:bg-yellow-950/30'>
                 <div className='flex items-center gap-2.5'>
-                  <div className='flex h-8 w-8 items-center justify-center rounded-full bg-yellow-100'>
-                    <ClockIcon size={14} className='text-yellow-600' />
+                  <div className='flex h-8 w-8 items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-900/50'>
+                    <ClockIcon size={14} className='text-yellow-600 dark:text-yellow-400' />
                   </div>
-                  <span className='text-sm font-medium text-gray-700'>Waiting</span>
+                  <span className='text-secondary text-sm font-medium'>Waiting</span>
                 </div>
-                <span className='text-lg font-semibold text-yellow-600'>{stats.waiting_count}</span>
+                <span className='text-lg font-semibold text-yellow-600 dark:text-yellow-400'>
+                  {stats.waiting_count}
+                </span>
               </div>
             )}
 
             {/* Testing */}
             {stats.testing_count > 0 && (
-              <div className='group flex items-center justify-between rounded-md p-2 transition-colors hover:bg-blue-50'>
+              <div className='group flex items-center justify-between rounded-md p-2 transition-colors hover:bg-blue-50 dark:hover:bg-blue-950/30'>
                 <div className='flex items-center gap-2.5'>
-                  <div className='flex h-8 w-8 items-center justify-center rounded-full bg-blue-100'>
-                    <GitPullRequestIcon size={14} className='text-blue-600' />
+                  <div className='flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/50'>
+                    <GitPullRequestIcon size={14} className='text-blue-600 dark:text-blue-400' />
                   </div>
-                  <span className='text-sm font-medium text-gray-700'>Testing</span>
+                  <span className='text-secondary text-sm font-medium'>Testing</span>
                 </div>
-                <span className='text-lg font-semibold text-blue-600'>{stats.testing_count}</span>
+                <span className='text-lg font-semibold text-blue-600 dark:text-blue-400'>{stats.testing_count}</span>
               </div>
             )}
 
             {/* Failed */}
             {stats.failed_count > 0 && (
-              <div className='group flex items-center justify-between rounded-md p-2 transition-colors hover:bg-red-50'>
+              <div className='group flex items-center justify-between rounded-md p-2 transition-colors hover:bg-red-50 dark:hover:bg-red-950/30'>
                 <div className='flex items-center gap-2.5'>
-                  <div className='flex h-8 w-8 items-center justify-center rounded-full bg-red-100'>
-                    <XCircleIcon size={14} className='text-red-600' />
+                  <div className='flex h-8 w-8 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/50'>
+                    <XCircleIcon size={14} className='text-red-600 dark:text-red-400' />
                   </div>
-                  <span className='text-sm font-medium text-gray-700'>Failed</span>
+                  <span className='text-secondary text-sm font-medium'>Failed</span>
                 </div>
-                <span className='text-lg font-semibold text-red-600'>{stats.failed_count}</span>
+                <span className='text-lg font-semibold text-red-600 dark:text-red-400'>{stats.failed_count}</span>
               </div>
             )}
           </div>
diff --git a/moon/apps/web/components/Setting/GPGKeys.tsx b/moon/apps/web/components/Setting/GPGKeys.tsx
index a08938a93..a8b1e9ebb 100644
--- a/moon/apps/web/components/Setting/GPGKeys.tsx
+++ b/moon/apps/web/components/Setting/GPGKeys.tsx
@@ -165,7 +165,7 @@ const GPGKeys = () => {
 
   return (
     <>
-      <div className='border-primary bg-tertiary text-secondary mx-auto max-w-4xl rounded-lg border p-8 font-sans'>
+      <div className='border-primary bg-primary dark:bg-tertiary text-secondary mx-auto max-w-4xl rounded-lg border p-8 font-sans'>
         <header className='flex items-center justify-between pb-4'>
           <h1 className='text-primary text-3xl font-bold'>GPG keys</h1>
           <Button variant='primary' className='bg-[#1f883d]' leftSlot={<PlusIcon />} onClick={() => setOpen(true)}>
diff --git a/moon/apps/web/components/Setting/PersonalToken.tsx b/moon/apps/web/components/Setting/PersonalToken.tsx
index 7c969de47..c691f09b2 100644
--- a/moon/apps/web/components/Setting/PersonalToken.tsx
+++ b/moon/apps/web/components/Setting/PersonalToken.tsx
@@ -75,11 +75,11 @@ const CopySpace = ({ copyText }: { copyText: string }) => {
   }
 
   return (
-    <div className='mb-4'>
-      <code className='border-primary bg-primary flex-1 break-all rounded border px-3 py-2 font-mono text-sm'>
+    <div className='mb-4 flex items-center gap-3'>
+      <code className='border-primary bg-secondary flex-1 break-all rounded border px-3 py-2 font-mono text-sm'>
         {copyText}
       </code>
-      <Button variant='flat' className='ml-3' onClick={() => handleCopy(copyText)}>
+      <Button variant='flat' onClick={() => handleCopy(copyText)}>
         {copied ? 'Copied' : 'Copy'}
       </Button>
     </div>
@@ -105,7 +105,7 @@ const PersonalToken = () => {
   }
 
   return (
-    <div className='border-primary bg-tertiary text-secondary mx-auto mt-8 max-w-4xl rounded-lg border p-8 font-sans'>
+    <div className='border-primary bg-primary dark:bg-tertiary text-secondary mx-auto mt-8 max-w-4xl rounded-lg border p-8 font-sans'>
       <header className='flex items-center justify-between pb-4'>
         <h1 className='text-primary text-3xl font-bold'>Personal tokens</h1>
         <Button
@@ -126,16 +126,20 @@ const PersonalToken = () => {
       </p>
 
       {generated && currentUser && (
-        <div className='mb-8 rounded-md border border-green-200 bg-green-50 p-4'>
-          <p className='text-secondary text-sm'>Your new token has been generated.</p>
-          <div className='mt-2 flex-col items-center'>
-            <span className='text-secondary text-sm'>Username:</span>
-            <CopySpace copyText={currentUser.username} />
-            <span className='text-secondary text-sm'>Token:</span>
-            <CopySpace copyText={generated} />
+        <div className='mb-8 rounded-md border border-green-200 bg-green-50 p-4 dark:border-green-800 dark:bg-green-950'>
+          <p className='text-sm text-green-800 dark:text-green-200'>Your new token has been generated.</p>
+          <div className='mt-3 flex flex-col gap-2'>
+            <div>
+              <span className='text-sm font-medium text-green-700 dark:text-green-300'>Username:</span>
+              <CopySpace copyText={currentUser.username} />
+            </div>
+            <div>
+              <span className='text-sm font-medium text-green-700 dark:text-green-300'>Token:</span>
+              <CopySpace copyText={generated} />
+            </div>
           </div>
-          <p className='text-tertiary mt-2 text-xs'>
-            Make sure to copy your new token now. You won’t be able to see it again.
+          <p className='mt-3 text-xs text-green-600 dark:text-green-400'>
+            Make sure to copy your new token now. You won&apos;t be able to see it again.
           </p>
         </div>
       )}
diff --git a/moon/apps/web/components/Setting/SSHKeys.tsx b/moon/apps/web/components/Setting/SSHKeys.tsx
index 7a93d2c7e..06064feb2 100644
--- a/moon/apps/web/components/Setting/SSHKeys.tsx
+++ b/moon/apps/web/components/Setting/SSHKeys.tsx
@@ -132,7 +132,7 @@ const SSHKeys = () => {
 
   return (
     <>
-      <div className='border-primary bg-tertiary text-secondary mx-auto max-w-4xl rounded-lg border p-8 font-sans'>
+      <div className='border-primary bg-primary dark:bg-tertiary text-secondary mx-auto max-w-4xl rounded-lg border p-8 font-sans'>
         <header className='flex items-center justify-between pb-4'>
           <h1 className='text-primary text-3xl font-bold'>SSH keys</h1>
           <Button variant='primary' className='bg-[#1f883d]' leftSlot={<PlusIcon />} onClick={() => setOpen(true)}>
diff --git a/moon/apps/web/components/Theme/ThemedMarkdown/ThemedMarkdown.module.css b/moon/apps/web/components/Theme/ThemedMarkdown/ThemedMarkdown.module.css
index ddd6a8f06..2be51f448 100644
--- a/moon/apps/web/components/Theme/ThemedMarkdown/ThemedMarkdown.module.css
+++ b/moon/apps/web/components/Theme/ThemedMarkdown/ThemedMarkdown.module.css
@@ -1,11 +1,9 @@
-/* 包装器 */
 .markdownWrapper {
   transition:
     background-color 0.2s ease,
     color 0.2s ease;
 }
 
-/* 基础变量 */
 .markdownBody {
   --base-size-4: 0.25rem;
   --base-size-8: 0.5rem;
@@ -29,7 +27,6 @@
   background-color: var(--bg-primary);
 }
 
-/* 亮色主题 */
 .markdownWrapper[data-theme='light'] .markdownBody {
   color-scheme: light;
   --fgColor-default: #1f2328;
@@ -41,7 +38,6 @@
   --borderColor-muted: rgba(209, 217, 224, 0.7);
 }
 
-/* 深色主题 */
 .markdownWrapper[data-theme='dark'] .markdownBody {
   color-scheme: dark;
   --fgColor-default: #f0f6fc;
@@ -53,7 +49,6 @@
   --borderColor-muted: rgba(61, 68, 77, 0.7);
 }
 
-/* 标题 */
 .markdownBody h1,
 .markdownBody h2,
 .markdownBody h3,
@@ -96,13 +91,11 @@
   color: var(--fgColor-muted);
 }
 
-/* 段落 */
 .markdownBody p {
   margin-top: 0;
   margin-bottom: 10px;
 }
 
-/* 链接 */
 .markdownBody a {
   background-color: transparent;
   color: var(--fgColor-accent);
@@ -113,7 +106,6 @@
   text-decoration: underline;
 }
 
-/* 代码 */
 .markdownBody code,
 .markdownBody tt {
   padding: 0.2em 0.4em;
@@ -122,7 +114,6 @@
   white-space: break-spaces;
   background-color: var(--bgColor-neutral-muted);
   border-radius: 6px;
-  font-family: var(--fontStack-monospace);
 }
 
 .markdownBody pre {
@@ -132,6 +123,7 @@
   line-height: 1.45;
   background-color: var(--bgColor-muted);
   border-radius: 6px;
+  font-family: var(--fontStack-monospace);
   margin-bottom: var(--base-size-16);
 }
 
@@ -144,7 +136,6 @@
   white-space: pre;
 }
 
-/* 列表 */
 .markdownBody ul,
 .markdownBody ol {
   margin-top: 0;
@@ -152,7 +143,6 @@
   padding-left: 2em;
 }
 
-/* 引用 */
 .markdownBody blockquote {
   margin: 0 0 var(--base-size-16) 0;
   padding: 0 1em;
@@ -160,7 +150,6 @@
   border-left: 0.25em solid var(--borderColor-default);
 }
 
-/* 表格 */
 .markdownBody table {
   border-spacing: 0;
   border-collapse: collapse;
@@ -190,14 +179,12 @@
   background-color: var(--bgColor-muted);
 }
 
-/* 图片 */
 .markdownBody img {
   max-width: 100%;
   box-sizing: content-box;
   background-color: var(--bg-primary);
 }
 
-/* 分隔线 */
 .markdownBody hr {
   height: 0.25em;
   padding: 0;
@@ -206,18 +193,15 @@
   border: 0;
 }
 
-/* 粗体 */
 .markdownBody b,
 .markdownBody strong {
   font-weight: var(--base-text-weight-semibold, 600);
 }
 
-/* 斜体 */
 .markdownBody em {
   font-style: italic;
 }
 
-/* 首尾元素边距 */
 .markdownBody > *:first-child {
   margin-top: 0 !important;
 }
diff --git a/moon/apps/web/pages/[org]/cl/[link]/index.tsx b/moon/apps/web/pages/[org]/cl/[link]/index.tsx
index 0dea19e62..75cd8c5b2 100644
--- a/moon/apps/web/pages/[org]/cl/[link]/index.tsx
+++ b/moon/apps/web/pages/[org]/cl/[link]/index.tsx
@@ -9,6 +9,7 @@ import {
 } from '@primer/octicons-react'
 import { BaseStyles, ThemeProvider } from '@primer/react'
 import { useAtom } from 'jotai'
+import { useTheme } from 'next-themes'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { toast } from 'react-hot-toast'
@@ -53,6 +54,7 @@ import { PageWithLayout } from '@/utils/types'
 const CLDetailPage: PageWithLayout<any> = () => {
   const router = useRouter()
   const { link: tempId } = router.query
+  const { theme } = useTheme()
 
   const [item_id] = useAtom(clIdAtom)
 
@@ -280,13 +282,13 @@ const CLDetailPage: PageWithLayout<any> = () => {
           {Icon && <Icon size={16} className='mr-1 text-white' />}
           <span>{label}</span>
         </div>
-        {(clDetail as any)?.path && <span className='text-sm text-gray-500'>{(clDetail as any).path}</span>}
+        {(clDetail as any)?.path && <span className='text-tertiary text-sm'>{(clDetail as any).path}</span>}
       </div>
     )
   }
 
   return (
-    <ThemeProvider>
+    <ThemeProvider colorMode={theme === 'dark' ? 'dark' : 'light'}>
       <BaseStyles>
         <div className='h-screen overflow-auto p-6'>
           {clDetail && (
diff --git a/moon/apps/web/pages/[org]/issue/[link]/index.tsx b/moon/apps/web/pages/[org]/issue/[link]/index.tsx
index d69d4e1aa..4f0638445 100644
--- a/moon/apps/web/pages/[org]/issue/[link]/index.tsx
+++ b/moon/apps/web/pages/[org]/issue/[link]/index.tsx
@@ -1,5 +1,6 @@
 import { BaseStyles, ThemeProvider } from '@primer/react'
 import { GetServerSideProps } from 'next'
+import { useTheme } from 'next-themes'
 
 import IssueDetailPage from '@/components/Issues/IssueDetailPage'
 import { AppLayout } from '@/components/Layout/AppLayout'
@@ -23,9 +24,11 @@ export const getServerSideProps: GetServerSideProps = async ({ query }) => {
 }
 
 const OrganizationIssueDetailPage: PageWithLayout<any> = ({ link }) => {
+  const { theme } = useTheme()
+
   return (
     <>
-      <ThemeProvider>
+      <ThemeProvider colorMode={theme === 'dark' ? 'dark' : 'light'}>
         <BaseStyles>
           <IssueDetailPage link={link} key={link} />
         </BaseStyles>
diff --git a/moon/apps/web/styles/global.css b/moon/apps/web/styles/global.css
index dab6e6975..a991a7f92 100644
--- a/moon/apps/web/styles/global.css
+++ b/moon/apps/web/styles/global.css
@@ -1,3 +1,6 @@
+@import '@primer/primitives/dist/css/functional/themes/light.css';
+@import '@primer/primitives/dist/css/functional/themes/dark.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;