diff --git a/apps/core/src/components/coin/CoinIcon.tsx b/apps/core/src/components/coin/CoinIcon.tsx
index 8dfd50ca5aa..f93a12baf64 100644
--- a/apps/core/src/components/coin/CoinIcon.tsx
+++ b/apps/core/src/components/coin/CoinIcon.tsx
@@ -18,7 +18,7 @@ interface NonIotaCoinProps {
 function NonIotaCoin({ coinType, size = ImageIconSize.Full, rounded }: NonIotaCoinProps) {
     const { data: coinMeta } = useCoinMetadata(coinType);
     return (
-        <div className="flex h-full w-full items-center justify-center rounded-full bg-neutral-96 dark:bg-neutral-92">
+        <div className="flex h-full w-full items-center justify-center rounded-full bg-neutral-96 dark:bg-neutral-12">
             <ImageIcon
                 src={coinMeta?.iconUrl}
                 label={coinMeta?.name || coinType}
@@ -47,7 +47,7 @@ export function CoinIcon({
 
     return coinType === IOTA_TYPE_ARG ? (
         <Component {...coinWrapperProps}>
-            <div className={cx(size, 'text-neutral-10')}>
+            <div className={cx(size, 'text-neutral-10 dark:text-neutral-92')}>
                 <IotaLogoMark className="h-full w-full" />
             </div>
         </Component>
diff --git a/apps/core/src/components/coin/CoinItem.tsx b/apps/core/src/components/coin/CoinItem.tsx
index a7d82afe1ba..8e2062efa26 100644
--- a/apps/core/src/components/coin/CoinItem.tsx
+++ b/apps/core/src/components/coin/CoinItem.tsx
@@ -39,13 +39,8 @@ export function CoinItem({
     return (
         <Card type={CardType.Default} onClick={onClick}>
             <CardImage type={ImageType.BgTransparent}>
-                <div className="flex h-10 w-10 items-center justify-center rounded-full">
-                    <CoinIcon
-                        coinType={coinType}
-                        rounded
-                        size={ImageIconSize.Small}
-                        hasCoinWrapper
-                    />
+                <div className="flex h-10 w-10 items-center justify-center rounded-full border border-shader-neutral-light-8 text-neutral-10 dark:text-neutral-92">
+                    <CoinIcon coinType={coinType} rounded size={ImageIconSize.Small} />
                 </div>
             </CardImage>
             <CardBody
diff --git a/apps/core/src/components/coin/CoinSelector.tsx b/apps/core/src/components/coin/CoinSelector.tsx
index 3f2f568811c..134ec370a24 100644
--- a/apps/core/src/components/coin/CoinSelector.tsx
+++ b/apps/core/src/components/coin/CoinSelector.tsx
@@ -66,7 +66,7 @@ function CoinSelectOption({
                         hasCoinWrapper={hasCoinWrapper}
                     />
                 </div>
-                <span className="text-body-lg text-neutral-10">
+                <span className="text-body-lg text-neutral-10 dark:text-neutral-92">
                     {isIota ? (coinMeta?.name || '').toUpperCase() : coinMeta?.name || symbol}
                 </span>
             </div>
diff --git a/apps/core/src/components/icon/ImageIcon.tsx b/apps/core/src/components/icon/ImageIcon.tsx
index 6b58dbf715a..3f1e76a6d31 100644
--- a/apps/core/src/components/icon/ImageIcon.tsx
+++ b/apps/core/src/components/icon/ImageIcon.tsx
@@ -42,9 +42,8 @@ function FallBackAvatar({ str, rounded, size = ImageIconSize.Large }: FallBackAv
     return (
         <div
             className={cn(
-                'flex items-center justify-center bg-neutral-96 bg-gradient-to-r capitalize text-neutral-10 dark:bg-neutral-92 dark:text-primary-100',
-                { 'rounded-full': rounded, 'rounded-lg': !rounded },
-                size,
+                'flex h-full w-full items-center justify-center bg-neutral-96 bg-gradient-to-r capitalize text-neutral-10 dark:bg-neutral-12 dark:text-neutral-92',
+                { 'rounded-full': rounded },
                 generateTextSize(size),
             )}
         >
diff --git a/apps/core/src/components/index.ts b/apps/core/src/components/index.ts
index 0a8093eeadb..a2aa837dfc6 100644
--- a/apps/core/src/components/index.ts
+++ b/apps/core/src/components/index.ts
@@ -1,9 +1,9 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export * from './KioskClientProvider';
-
 export * from './coin';
 export * from './icon';
 export * from './Inputs';
 export * from './QR';
+
+export * from './providers';
diff --git a/apps/core/src/components/KioskClientProvider.tsx b/apps/core/src/components/providers/KioskClientProvider.tsx
similarity index 100%
rename from apps/core/src/components/KioskClientProvider.tsx
rename to apps/core/src/components/providers/KioskClientProvider.tsx
diff --git a/apps/core/src/components/providers/ThemeProvider.tsx b/apps/core/src/components/providers/ThemeProvider.tsx
new file mode 100644
index 00000000000..43a65cfa558
--- /dev/null
+++ b/apps/core/src/components/providers/ThemeProvider.tsx
@@ -0,0 +1,51 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { PropsWithChildren, useState, useEffect, useCallback } from 'react';
+import { Theme } from '../../enums';
+import { ThemeContext } from '../../contexts';
+
+interface ThemeProviderProps {
+    appId: string;
+}
+
+export function ThemeProvider({ children, appId }: PropsWithChildren<ThemeProviderProps>) {
+    const storageKey = `theme_${appId}`;
+
+    const getSystemTheme = () =>
+        window.matchMedia('(prefers-color-scheme: dark)').matches ? Theme.Dark : Theme.Light;
+
+    const getInitialTheme = () => {
+        if (typeof window === 'undefined') {
+            return Theme.System;
+        } else {
+            const storedTheme = localStorage?.getItem(storageKey);
+            return storedTheme ? (storedTheme as Theme) : Theme.System;
+        }
+    };
+
+    const [theme, setTheme] = useState<Theme>(getInitialTheme);
+
+    const applyTheme = useCallback((currentTheme: Theme) => {
+        const selectedTheme = currentTheme === Theme.System ? getSystemTheme() : currentTheme;
+        const documentElement = document.documentElement.classList;
+        documentElement.toggle(Theme.Dark, selectedTheme === Theme.Dark);
+        documentElement.toggle(Theme.Light, selectedTheme === Theme.Light);
+    }, []);
+
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+
+        localStorage.setItem(storageKey, theme);
+        applyTheme(theme);
+
+        if (theme === Theme.System) {
+            const systemTheme = window.matchMedia('(prefers-color-scheme: dark)');
+            const handleSystemThemeChange = () => applyTheme(Theme.System);
+            systemTheme.addEventListener('change', handleSystemThemeChange);
+            return () => systemTheme.removeEventListener('change', handleSystemThemeChange);
+        }
+    }, [theme, applyTheme, storageKey]);
+
+    return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>;
+}
diff --git a/apps/core/src/components/providers/index.ts b/apps/core/src/components/providers/index.ts
new file mode 100644
index 00000000000..5bbf1329e64
--- /dev/null
+++ b/apps/core/src/components/providers/index.ts
@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './KioskClientProvider';
+export * from './ThemeProvider';
diff --git a/apps/core/src/contexts/ThemeContext.tsx b/apps/core/src/contexts/ThemeContext.tsx
new file mode 100644
index 00000000000..3406e50d5c1
--- /dev/null
+++ b/apps/core/src/contexts/ThemeContext.tsx
@@ -0,0 +1,15 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { createContext } from 'react';
+import { Theme } from '../enums';
+
+export interface ThemeContextType {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+}
+
+export const ThemeContext = createContext<ThemeContextType>({
+    theme: Theme.Light,
+    setTheme: () => {},
+});
diff --git a/apps/core/src/contexts/index.ts b/apps/core/src/contexts/index.ts
new file mode 100644
index 00000000000..c592171afa8
--- /dev/null
+++ b/apps/core/src/contexts/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './ThemeContext';
diff --git a/apps/core/src/enums/ExplorerLinkType.ts b/apps/core/src/enums/explorer-link-type.enums.ts
similarity index 100%
rename from apps/core/src/enums/ExplorerLinkType.ts
rename to apps/core/src/enums/explorer-link-type.enums.ts
diff --git a/apps/core/src/enums/index.ts b/apps/core/src/enums/index.ts
index 6dcfd1bcf7b..7c01aed335d 100644
--- a/apps/core/src/enums/index.ts
+++ b/apps/core/src/enums/index.ts
@@ -1,4 +1,5 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export * from './ExplorerLinkType';
+export * from './theme.enums';
+export * from './explorer-link-type.enums';
diff --git a/apps/core/src/enums/theme.enums.ts b/apps/core/src/enums/theme.enums.ts
new file mode 100644
index 00000000000..2df40a61af4
--- /dev/null
+++ b/apps/core/src/enums/theme.enums.ts
@@ -0,0 +1,8 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum Theme {
+    Light = 'light',
+    Dark = 'dark',
+    System = 'system',
+}
diff --git a/apps/core/src/hooks/index.ts b/apps/core/src/hooks/index.ts
index 544c59c8a30..2ffa7f95688 100644
--- a/apps/core/src/hooks/index.ts
+++ b/apps/core/src/hooks/index.ts
@@ -41,5 +41,6 @@ export * from './useGasBudgetEstimation';
 export * from './useTransactionData';
 export * from './useGetStakingValidatorDetails';
 export * from './useCursorPagination';
+export * from './useTheme';
 
 export * from './stake';
diff --git a/apps/core/src/hooks/useTheme.ts b/apps/core/src/hooks/useTheme.ts
new file mode 100644
index 00000000000..72cddc121c3
--- /dev/null
+++ b/apps/core/src/hooks/useTheme.ts
@@ -0,0 +1,12 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+import { useContext } from 'react';
+import { ThemeContext, ThemeContextType } from '../contexts';
+
+export const useTheme = (): ThemeContextType => {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+};
diff --git a/apps/core/src/index.ts b/apps/core/src/index.ts
index 6d113bf483b..a9aadd0b1e5 100644
--- a/apps/core/src/index.ts
+++ b/apps/core/src/index.ts
@@ -8,4 +8,6 @@ export * from './components';
 export * from './utils';
 export * from './hooks';
 export * from './constants';
+export * from './contexts';
+export * from './enums';
 export * from './forms';
diff --git a/apps/wallet-dashboard/app/(protected)/layout.tsx b/apps/wallet-dashboard/app/(protected)/layout.tsx
index 85e1eaff028..79f7a084546 100644
--- a/apps/wallet-dashboard/app/(protected)/layout.tsx
+++ b/apps/wallet-dashboard/app/(protected)/layout.tsx
@@ -6,10 +6,15 @@ import { Notifications } from '@/components/index';
 import React, { type PropsWithChildren } from 'react';
 import { Button } from '@iota/apps-ui-kit';
 import { Sidebar, TopNav } from './components';
-import { useTheme } from '@/contexts';
+import { Theme, useTheme } from '@iota/core';
 
 function DashboardLayout({ children }: PropsWithChildren): JSX.Element {
-    const { theme, toggleTheme } = useTheme();
+    const { theme, setTheme } = useTheme();
+
+    const toggleTheme = () => {
+        const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;
+        setTheme(newTheme);
+    };
 
     return (
         <div className="h-full">
diff --git a/apps/wallet-dashboard/app/page.tsx b/apps/wallet-dashboard/app/page.tsx
index 38001d4b184..7626f88bb2c 100644
--- a/apps/wallet-dashboard/app/page.tsx
+++ b/apps/wallet-dashboard/app/page.tsx
@@ -8,12 +8,18 @@ import { useEffect } from 'react';
 import { redirect } from 'next/navigation';
 import { IotaLogoWeb } from '@iota/ui-icons';
 import { HOMEPAGE_ROUTE } from '@/lib/constants/routes.constants';
+import { Theme, useTheme } from '@iota/core';
 
 function HomeDashboardPage(): JSX.Element {
+    const { theme } = useTheme();
     const { connectionStatus } = useCurrentWallet();
     const account = useCurrentAccount();
 
     const CURRENT_YEAR = new Date().getFullYear();
+    const videoSrc =
+        theme === Theme.Dark
+            ? 'https://files.iota.org/media/tooling/wallet-dashboard-welcome-dark.mp4'
+            : 'https://files.iota.org/media/tooling/wallet-dashboard-welcome-light.mp4';
 
     useEffect(() => {
         if (connectionStatus === 'connected' && account) {
@@ -23,18 +29,15 @@ function HomeDashboardPage(): JSX.Element {
 
     return (
         <main className="flex h-screen">
-            <div className="hidden sm:flex md:w-1/4">
+            <div className="relative hidden sm:flex md:w-1/3">
                 <video
                     autoPlay
                     muted
                     loop
-                    className="h-full w-full object-cover"
+                    className="absolute right-0 top-0 h-full w-full min-w-fit object-cover"
                     disableRemotePlayback
                 >
-                    <source
-                        src="https://files.iota.org/media/tooling/wallet-dashboard-welcome.mp4"
-                        type="video/mp4"
-                    />
+                    <source src={videoSrc} type="video/mp4" />
                 </video>
             </div>
             <div className="flex h-full w-full flex-col items-center justify-between p-md sm:p-2xl">
@@ -42,12 +45,14 @@ function HomeDashboardPage(): JSX.Element {
                 <div className="flex max-w-sm flex-col items-center gap-8 text-center">
                     <div className="flex flex-col items-center gap-4">
                         <span className="text-headline-sm text-neutral-40">Welcome to</span>
-                        <h1 className="text-display-lg text-neutral-10">IOTA Wallet</h1>
+                        <h1 className="text-display-lg text-neutral-10 dark:text-neutral-100">
+                            IOTA Wallet
+                        </h1>
                         <span className="text-title-lg text-neutral-40">
                             Connecting you to the decentralized web and IOTA network
                         </span>
                     </div>
-                    <div className="[&_button]:!bg-neutral-90">
+                    <div className="[&_button]:!bg-neutral-90 [&_button]:dark:!bg-neutral-20">
                         <ConnectButton connectText="Connect" />
                     </div>
                 </div>
diff --git a/apps/wallet-dashboard/components/staking-overview/StartStaking.tsx b/apps/wallet-dashboard/components/staking-overview/StartStaking.tsx
index dd28cca199c..5190cc06867 100644
--- a/apps/wallet-dashboard/components/staking-overview/StartStaking.tsx
+++ b/apps/wallet-dashboard/components/staking-overview/StartStaking.tsx
@@ -2,9 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Button, ButtonSize, ButtonType, Panel } from '@iota/apps-ui-kit';
-import { Theme, useTheme } from '@/contexts';
 import { useState } from 'react';
 import { StakeDialog } from '../Dialogs';
+import { Theme, useTheme } from '@iota/core';
 
 export function StartStaking() {
     const { theme } = useTheme();
diff --git a/apps/wallet-dashboard/contexts/ThemeContext.tsx b/apps/wallet-dashboard/contexts/ThemeContext.tsx
deleted file mode 100644
index 2de1469e42e..00000000000
--- a/apps/wallet-dashboard/contexts/ThemeContext.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
-
-export enum Theme {
-    Light = 'light',
-    Dark = 'dark',
-}
-
-interface ThemeContextType {
-    theme: Theme;
-    toggleTheme: () => void;
-}
-
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
-
-export const ThemeProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-    const [theme, setTheme] = useState<Theme.Light | Theme.Dark>(Theme.Light);
-
-    useEffect(() => {
-        document.documentElement.classList.toggle(Theme.Dark, theme === Theme.Dark);
-    }, [theme]);
-
-    const toggleTheme = () => {
-        setTheme((prevTheme) => (prevTheme === Theme.Dark ? Theme.Light : Theme.Dark));
-    };
-
-    return <ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>;
-};
-
-export const useTheme = (): ThemeContextType => {
-    const context = useContext(ThemeContext);
-    if (!context) {
-        throw new Error('useTheme must be used within a ThemeProvider');
-    }
-    return context;
-};
diff --git a/apps/wallet-dashboard/contexts/index.ts b/apps/wallet-dashboard/contexts/index.ts
index fa0a87e74c4..d356e2485ed 100644
--- a/apps/wallet-dashboard/contexts/index.ts
+++ b/apps/wallet-dashboard/contexts/index.ts
@@ -2,4 +2,3 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './PopupContext';
-export * from './ThemeContext';
diff --git a/apps/wallet-dashboard/providers/AppProviders.tsx b/apps/wallet-dashboard/providers/AppProviders.tsx
index 48561b1ff27..1cdcf6da752 100644
--- a/apps/wallet-dashboard/providers/AppProviders.tsx
+++ b/apps/wallet-dashboard/providers/AppProviders.tsx
@@ -12,7 +12,7 @@ import { useState } from 'react';
 import { growthbook } from '@/lib/utils';
 import { Popup } from '@/components/Popup';
 import { Toaster } from 'react-hot-toast';
-import { ThemeProvider } from '@/contexts';
+import { ThemeProvider } from '@iota/core';
 
 growthbook.init();
 
@@ -36,7 +36,7 @@ export function AppProviders({ children }: React.PropsWithChildren) {
                             },
                         ]}
                     >
-                        <ThemeProvider>
+                        <ThemeProvider appId="dashboard">
                             <PopupProvider>
                                 {children}
                                 <Toaster
diff --git a/apps/wallet/src/ui/app/components/DAppPermissionList.tsx b/apps/wallet/src/ui/app/components/DAppPermissionList.tsx
index 3f5d4b33d6c..b565f9aff18 100644
--- a/apps/wallet/src/ui/app/components/DAppPermissionList.tsx
+++ b/apps/wallet/src/ui/app/components/DAppPermissionList.tsx
@@ -20,7 +20,7 @@ export function DAppPermissionList({ permissions }: DAppPermissionListProps) {
             {permissions.map((permissionKey) => (
                 <SummaryListItem
                     key={permissionKey}
-                    icon={<Checkmark className="h-5 w-5 text-neutral-10" />}
+                    icon={<Checkmark className="h-5 w-5 text-neutral-10 dark:text-neutral-92" />}
                     text={PERMISSION_TYPE_TO_TEXT[permissionKey]}
                 />
             ))}
diff --git a/apps/wallet/src/ui/app/components/NoData.tsx b/apps/wallet/src/ui/app/components/NoData.tsx
index 4c943d9ab68..c8052f55236 100644
--- a/apps/wallet/src/ui/app/components/NoData.tsx
+++ b/apps/wallet/src/ui/app/components/NoData.tsx
@@ -1,15 +1,19 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { Theme, useTheme } from '@iota/core';
 import NoDataImage from '_assets/images/no_data.svg';
+import NoDataDarkImage from '_assets/images/no_data_darkmode.svg';
 interface NoDataProps {
     message: string;
 }
 
 export function NoData({ message }: NoDataProps) {
+    const { theme } = useTheme();
+
     return (
         <div className="flex h-full flex-col items-center justify-center gap-md text-center">
-            <NoDataImage />
+            {theme === Theme.Dark ? <NoDataDarkImage /> : <NoDataImage />}
             <span className="text-label-lg text-neutral-60">{message}</span>
         </div>
     );
diff --git a/apps/wallet/src/ui/app/components/Overlay.tsx b/apps/wallet/src/ui/app/components/Overlay.tsx
index 73e523e38cd..69a027a87ea 100644
--- a/apps/wallet/src/ui/app/components/Overlay.tsx
+++ b/apps/wallet/src/ui/app/components/Overlay.tsx
@@ -15,7 +15,7 @@ interface OverlayProps {
     closeOverlay?: () => void;
     closeIcon?: ReactNode | null;
     setShowModal?: (showModal: boolean) => void;
-    background?: 'bg-neutral-100';
+    background?: 'bg-neutral-100 dark:bg-neutral-6';
     titleCentered?: boolean;
     showBackButton?: boolean;
     onBack?: () => void;
@@ -58,7 +58,7 @@ export function Overlay({
                         testId="overlay-title"
                     />
                 )}
-                <div className="flex w-full flex-1 flex-col overflow-hidden bg-neutral-100 p-md">
+                <div className="flex w-full flex-1 flex-col overflow-hidden bg-neutral-100 p-md dark:bg-neutral-6">
                     {children}
                 </div>
             </div>
diff --git a/apps/wallet/src/ui/app/components/PageTemplate.tsx b/apps/wallet/src/ui/app/components/PageTemplate.tsx
index 3648ff6732c..53fe44848bf 100644
--- a/apps/wallet/src/ui/app/components/PageTemplate.tsx
+++ b/apps/wallet/src/ui/app/components/PageTemplate.tsx
@@ -33,7 +33,7 @@ export function PageTemplate({
                     onClose={onClose}
                 />
             )}
-            <div className="w-full flex-1 overflow-y-auto overflow-x-hidden bg-neutral-100 p-md">
+            <div className="w-full flex-1 overflow-y-auto overflow-x-hidden bg-neutral-100 p-md dark:bg-neutral-6">
                 {children}
             </div>
         </div>
diff --git a/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx b/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx
index 842e31ac7f2..2b433c7e41d 100644
--- a/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx
+++ b/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx
@@ -68,7 +68,7 @@ export function PasswordInputDialog({
             {({ isSubmitting, isValid, errors }) => (
                 <Form
                     className={classNames('flex flex-1 flex-col flex-nowrap items-center gap-7.5', {
-                        'bg-white': background,
+                        'bg-neutral-100 dark:bg-neutral-6': background,
                         'px-5 pt-10': spacing,
                     })}
                 >
diff --git a/apps/wallet/src/ui/app/components/SummaryCard.tsx b/apps/wallet/src/ui/app/components/SummaryCard.tsx
index 936c7f48d85..deb53bc7f2f 100644
--- a/apps/wallet/src/ui/app/components/SummaryCard.tsx
+++ b/apps/wallet/src/ui/app/components/SummaryCard.tsx
@@ -13,7 +13,7 @@ export interface SummaryCardProps {
 
 export function SummaryCard({ body, header, footer }: SummaryCardProps) {
     return (
-        <div className="flex w-full flex-col flex-nowrap gap-xs rounded-xl bg-neutral-96 pb-md">
+        <div className="flex w-full flex-col flex-nowrap gap-xs rounded-xl bg-neutral-96 pb-md dark:bg-neutral-12">
             {header ? (
                 <div className="flex h-[56px] items-center">
                     <Title title={header} size={TitleSize.Small} />
diff --git a/apps/wallet/src/ui/app/components/SummaryListItem.tsx b/apps/wallet/src/ui/app/components/SummaryListItem.tsx
index d849b71a534..6945484a79c 100644
--- a/apps/wallet/src/ui/app/components/SummaryListItem.tsx
+++ b/apps/wallet/src/ui/app/components/SummaryListItem.tsx
@@ -10,7 +10,7 @@ export function SummaryListItem({ icon, text }: SummaryListItemProps) {
     return (
         <div className="flex flex-row items-center gap-x-sm">
             {icon}
-            <span className="text-body-md text-neutral-40">{text}</span>
+            <span className="text-body-md text-neutral-40 dark:text-neutral-60">{text}</span>
         </div>
     );
 }
diff --git a/apps/wallet/src/ui/app/components/SummaryPanel.tsx b/apps/wallet/src/ui/app/components/SummaryPanel.tsx
index c16c3f743b0..b3f098f474b 100644
--- a/apps/wallet/src/ui/app/components/SummaryPanel.tsx
+++ b/apps/wallet/src/ui/app/components/SummaryPanel.tsx
@@ -11,7 +11,7 @@ interface SummaryPanelProps {
 
 export function SummaryPanel({ title, body }: SummaryPanelProps) {
     return (
-        <div className="flex flex-col rounded-xl bg-neutral-96 pb-md">
+        <div className="flex flex-col rounded-xl bg-neutral-96 pb-md dark:bg-neutral-12">
             <div className="flex flex-col gap-y-xs">
                 <div className="py-2.5">
                     <Title size={TitleSize.Small} title={title} />
diff --git a/apps/wallet/src/ui/app/components/accounts/AccountItem.tsx b/apps/wallet/src/ui/app/components/accounts/AccountItem.tsx
index 518174b8cd0..544da756927 100644
--- a/apps/wallet/src/ui/app/components/accounts/AccountItem.tsx
+++ b/apps/wallet/src/ui/app/components/accounts/AccountItem.tsx
@@ -67,7 +67,7 @@ function AccountAvatar({ isLocked, icon }: { isLocked?: boolean; icon?: ReactNod
             className={cn(
                 'flex h-10 w-10 items-center justify-center rounded-full [&_svg]:h-5 [&_svg]:w-5 ',
                 isLocked
-                    ? 'bg-neutral-96 [&_svg]:text-neutral-10'
+                    ? 'bg-neutral-96 dark:bg-neutral-12 [&_svg]:text-neutral-10 [&_svg]:dark:text-neutral-92'
                     : 'bg-primary-30 [&_svg]:text-white',
             )}
         >
diff --git a/apps/wallet/src/ui/app/components/accounts/ImportRecoveryPhraseForm.tsx b/apps/wallet/src/ui/app/components/accounts/ImportRecoveryPhraseForm.tsx
index ef3d2620d80..4afa2038447 100644
--- a/apps/wallet/src/ui/app/components/accounts/ImportRecoveryPhraseForm.tsx
+++ b/apps/wallet/src/ui/app/components/accounts/ImportRecoveryPhraseForm.tsx
@@ -124,7 +124,7 @@ export function ImportRecoveryPhraseForm({
                 })}
             </div>
 
-            <div className="sticky bottom-0 left-0 flex flex-col gap-2.5 bg-neutral-100 pt-sm">
+            <div className="sticky bottom-0 left-0 flex flex-col gap-2.5 bg-neutral-100 pt-sm dark:bg-neutral-6">
                 {touchedFields.recoveryPhrase && errors.recoveryPhrase && (
                     <InfoBox
                         type={InfoBoxType.Default}
diff --git a/apps/wallet/src/ui/app/components/error-boundary/index.tsx b/apps/wallet/src/ui/app/components/error-boundary/index.tsx
index b68d08ccdab..e450622a9cf 100644
--- a/apps/wallet/src/ui/app/components/error-boundary/index.tsx
+++ b/apps/wallet/src/ui/app/components/error-boundary/index.tsx
@@ -11,7 +11,7 @@ import { useLocation } from 'react-router-dom';
 
 function Fallback({ error }: FallbackProps) {
     return (
-        <div className="flex h-full w-full items-center justify-center p-2">
+        <div className="flex h-full w-full items-center justify-center p-2 [&_div]:w-full">
             <InfoBox
                 title="Something went wrong"
                 supportingText={error?.message ?? 'An error occurred'}
diff --git a/apps/wallet/src/ui/app/components/iota-apps/DisconnectApp.tsx b/apps/wallet/src/ui/app/components/iota-apps/DisconnectApp.tsx
index 292389bfe0a..a2ba2745704 100644
--- a/apps/wallet/src/ui/app/components/iota-apps/DisconnectApp.tsx
+++ b/apps/wallet/src/ui/app/components/iota-apps/DisconnectApp.tsx
@@ -103,7 +103,9 @@ function DisconnectApp({
                                 />
                             ) : (
                                 <SummaryListItem
-                                    icon={<CircleEmitter className="h-5 w-5 text-neutral-10" />}
+                                    icon={
+                                        <CircleEmitter className="h-5 w-5 text-neutral-10 dark:text-neutral-92" />
+                                    }
                                     text={
                                         connectedAccounts[0]
                                             ? formatAddress(connectedAccounts[0])
diff --git a/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx b/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx
index aa4c2dc7e4b..d6db449aaa4 100644
--- a/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx
+++ b/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx
@@ -54,10 +54,10 @@ interface ListViewProps {
 
 function ListView({ name, icon, description, tags }: ListViewProps) {
     return (
-        <div className="item-center box-border flex gap-sm rounded-2xl bg-neutral-100 p-sm hover:bg-shader-primary-dark-12">
+        <div className="item-center box-border flex gap-sm rounded-2xl bg-neutral-100 p-sm hover:bg-shader-primary-dark-12 dark:bg-neutral-6">
             <ImageIcon src={icon || null} label={name} fallback={name} />
             <div className="flex flex-col justify-center gap-sm">
-                <span className="text-label-md text-neutral-10">{name}</span>
+                <span className="text-label-md text-neutral-10 dark:text-neutral-92">{name}</span>
                 <span className="text-body-sm text-neutral-40">{description}</span>
                 {tags?.length && (
                     <div className="flex flex-wrap gap-xxs">
diff --git a/apps/wallet/src/ui/app/components/iota-apps/IotaAppEmpty.tsx b/apps/wallet/src/ui/app/components/iota-apps/IotaAppEmpty.tsx
index 4dc7b6021d8..094721b1587 100644
--- a/apps/wallet/src/ui/app/components/iota-apps/IotaAppEmpty.tsx
+++ b/apps/wallet/src/ui/app/components/iota-apps/IotaAppEmpty.tsx
@@ -9,7 +9,7 @@ const appEmptyStyle = cva(['flex gap-3 p-lg h-28'], {
     variants: {
         displayType: {
             full: 'w-full',
-            card: 'bg-neutral-100 flex flex-col p-lg w-full rounded-2xl h-32 box-border w-full rounded-2xl border border-solid border-shader-primary-dark',
+            card: 'bg-neutral-100 dark:bg-neutral-6 flex flex-col p-lg w-full rounded-2xl h-32 box-border w-full rounded-2xl border border-solid border-shader-primary-dark',
         },
     },
     defaultVariants: {
diff --git a/apps/wallet/src/ui/app/components/ledger/ConnectLedgerModal.tsx b/apps/wallet/src/ui/app/components/ledger/ConnectLedgerModal.tsx
index 9b0020b1185..ae47a317ea1 100644
--- a/apps/wallet/src/ui/app/components/ledger/ConnectLedgerModal.tsx
+++ b/apps/wallet/src/ui/app/components/ledger/ConnectLedgerModal.tsx
@@ -55,7 +55,7 @@ export function ConnectLedgerModal({ onClose, onConfirm, onError }: ConnectLedge
                             <Link
                                 to="https://support.ledger.com/article/360011633353-zd"
                                 onClick={() => ampli.viewedLedgerTutorial()}
-                                className="text-body-lg text-primary-30 no-underline"
+                                className="text-body-lg text-primary-30 no-underline dark:text-primary-80"
                                 target="_blank"
                                 rel="noreferrer"
                             >
@@ -91,10 +91,11 @@ function LedgerLogo() {
             height="82"
             viewBox="0 0 244 82"
             fill="none"
+            className="text-neutral-10 dark:text-neutral-92"
         >
             <path
                 d="M208.725 76.3995V81.4987H244V58.5003H238.86V76.3995H208.725ZM208.725 0.5V5.59948H238.86V23.4997H244V0.5H208.725ZM190.534 39.9502V28.1006H198.597C202.528 28.1006 203.939 29.4003 203.939 32.9508V35.0504C203.939 38.7002 202.578 39.9502 198.597 39.9502H190.534ZM203.333 42.0498C207.012 41.0999 209.581 37.6994 209.581 33.6503C209.581 31.1005 208.574 28.8001 206.659 26.9498C204.24 24.6493 201.014 23.4997 196.833 23.4997H185.494V58.4991H190.534V44.5499H198.093C201.973 44.5499 203.536 46.1497 203.536 50.1504V58.5003H208.675V50.9503C208.675 45.4503 207.365 43.3507 203.333 42.7505V42.0498ZM160.904 43.1994H176.425V38.5997H160.904V28.0994H177.936V23.4997H155.763V58.4991H178.692V53.8994H160.904V43.1994ZM144.021 45.0497V47.4494C144.021 52.4993 142.157 54.1498 137.471 54.1498H136.363C131.675 54.1498 129.408 52.6493 129.408 45.6995V36.2993C129.408 29.2999 131.776 27.849 136.463 27.849H137.47C142.055 27.849 143.517 29.5491 143.567 34.2493H149.11C148.607 27.3492 143.971 23 137.016 23C133.64 23 130.818 24.0503 128.702 26.0495C125.527 28.9998 123.763 34 123.763 40.9994C123.763 47.7495 125.276 52.7497 128.399 55.8489C130.515 57.8989 133.439 58.9988 136.311 58.9988C139.335 58.9988 142.107 57.7984 143.517 55.1991H144.222V58.4991H148.858V40.45H135.201V45.0497H144.021ZM99.5765 28.0994H105.07C110.261 28.0994 113.083 29.3991 113.083 36.3997V45.5991C113.083 52.5985 110.261 53.8994 105.07 53.8994H99.5765V28.0994ZM105.522 58.5003C115.148 58.5003 118.725 51.2504 118.725 41.0006C118.725 30.6007 114.895 23.5009 105.421 23.5009H94.536V58.5003H105.522ZM70.1978 43.1994H85.7189V38.5997H70.1978V28.0994H87.23V23.4997H65.0566V58.4991H87.9862V53.8994H70.1978V43.1994ZM40.4664 23.4997H35.3268V58.4991H58.5074V53.8994H40.4664V23.4997ZM0.000976562 58.5003V81.5H35.2756V76.3995H5.14057V58.5003H0.000976562ZM0.000976562 0.5V23.4997H5.14057V5.59948H35.2756V0.5H0.000976562Z"
-                fill="#171D26"
+                fill="currentColor"
             />
         </svg>
     );
diff --git a/apps/wallet/src/ui/app/components/menu/content/ThemeSettings.tsx b/apps/wallet/src/ui/app/components/menu/content/ThemeSettings.tsx
new file mode 100644
index 00000000000..42b14994da6
--- /dev/null
+++ b/apps/wallet/src/ui/app/components/menu/content/ThemeSettings.tsx
@@ -0,0 +1,29 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { RadioButton } from '@iota/apps-ui-kit';
+import { Theme, useTheme } from '@iota/core';
+import { Overlay } from '_components';
+import { useNavigate } from 'react-router-dom';
+
+export function ThemeSettings() {
+    const { theme, setTheme } = useTheme();
+
+    const navigate = useNavigate();
+
+    return (
+        <Overlay showModal title="Theme" closeOverlay={() => navigate('/')} showBackButton>
+            <div className="flex w-full flex-col">
+                {Object.entries(Theme).map(([key, value]) => (
+                    <div className="px-md" key={value}>
+                        <RadioButton
+                            label={key}
+                            isChecked={theme === value}
+                            onChange={() => setTheme(value)}
+                        />
+                    </div>
+                ))}
+            </div>
+        </Overlay>
+    );
+}
diff --git a/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx b/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx
index c325f3b7df8..51ab79d6a45 100644
--- a/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx
+++ b/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx
@@ -4,7 +4,6 @@
 
 import { useNextMenuUrl, Overlay } from '_components';
 import { useAppSelector } from '_hooks';
-import { getCustomNetwork } from '@iota/core';
 import { FAQ_LINK, ToS_LINK } from '_src/shared/constants';
 import { formatAutoLock, useAutoLockMinutes } from '_src/ui/app/hooks/useAutoLockMinutes';
 import FaucetRequestButton from '_src/ui/app/shared/faucet/FaucetRequestButton';
@@ -29,12 +28,15 @@ import {
     ImageType,
 } from '@iota/apps-ui-kit';
 import { ampli } from '_src/shared/analytics/ampli';
+import { useTheme, getCustomNetwork } from '@iota/core';
 
 function MenuList() {
+    const { theme } = useTheme();
     const navigate = useNavigate();
     const activeAccount = useActiveAccount();
     const networkUrl = useNextMenuUrl(true, '/network');
     const autoLockUrl = useNextMenuUrl(true, '/auto-lock');
+    const themeUrl = useNextMenuUrl(true, '/theme');
     const network = useAppSelector((state) => state.app.network);
     const networkConfig = network === Network.Custom ? getCustomNetwork() : getNetwork(network);
     const version = Browser.runtime.getManifest().version;
@@ -73,11 +75,16 @@ function MenuList() {
         navigate(autoLockUrl);
     }
 
+    function onThemeClick() {
+        navigate(themeUrl);
+    }
+
     function onFAQClick() {
         window.open(FAQ_LINK, '_blank', 'noopener noreferrer');
     }
 
     const autoLockSubtitle = handleAutoLockSubtitle();
+    const themeSubtitle = theme.charAt(0).toUpperCase() + theme.slice(1);
     const MENU_ITEMS = [
         {
             title: 'Network',
@@ -99,8 +106,8 @@ function MenuList() {
         {
             title: 'Themes',
             icon: <DarkMode />,
-            onClick: () => {},
-            isDisabled: true,
+            subtitle: themeSubtitle,
+            onClick: onThemeClick,
         },
         {
             title: 'Reset',
@@ -114,14 +121,9 @@ function MenuList() {
             <div className="flex h-full w-full flex-col justify-between">
                 <div className="flex flex-col">
                     {MENU_ITEMS.map((item, index) => (
-                        <Card
-                            key={index}
-                            type={CardType.Default}
-                            onClick={item.onClick}
-                            isDisabled={item.isDisabled}
-                        >
+                        <Card key={index} type={CardType.Default} onClick={item.onClick}>
                             <CardImage type={ImageType.BgSolid}>
-                                <div className="flex h-10 w-10 items-center justify-center rounded-full  text-neutral-10 [&_svg]:h-5 [&_svg]:w-5">
+                                <div className="flex h-10 w-10 items-center justify-center rounded-full  text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5">
                                     <span className="text-2xl">{item.icon}</span>
                                 </div>
                             </CardImage>
diff --git a/apps/wallet/src/ui/app/components/menu/content/index.tsx b/apps/wallet/src/ui/app/components/menu/content/index.tsx
index 114a4591ff2..ef5b55515fd 100644
--- a/apps/wallet/src/ui/app/components/menu/content/index.tsx
+++ b/apps/wallet/src/ui/app/components/menu/content/index.tsx
@@ -16,6 +16,7 @@ import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-
 import { AutoLockAccounts } from './AutoLockAccounts';
 import { NetworkSettings } from './NetworkSettings';
 import WalletSettingsMenuList from './WalletSettingsMenuList';
+import { ThemeSettings } from './ThemeSettings';
 
 const CLOSE_KEY_CODES: string[] = ['Escape'];
 
@@ -42,13 +43,14 @@ function MenuContent() {
     }
 
     return (
-        <div className="absolute inset-0 z-50 flex flex-col justify-items-stretch overflow-y-auto rounded-t-xl bg-white px-2.5 pb-8">
+        <div className="absolute inset-0 z-50 flex flex-col justify-items-stretch overflow-y-auto rounded-t-xl bg-neutral-100 px-2.5 pb-8 dark:bg-neutral-6">
             <ErrorBoundary>
                 <MainLocationContext.Provider value={mainLocation}>
                     <Routes location={menuUrl || ''}>
                         <Route path="/" element={<WalletSettingsMenuList />} />
                         <Route path="/network" element={<NetworkSettings />} />
                         <Route path="/auto-lock" element={<AutoLockAccounts />} />
+                        <Route path="/theme" element={<ThemeSettings />} />
                         <Route path="*" element={<Navigate to={menuHomeUrl} replace={true} />} />
                     </Routes>
                 </MainLocationContext.Provider>
diff --git a/apps/wallet/src/ui/app/components/navigation/index.tsx b/apps/wallet/src/ui/app/components/navigation/index.tsx
index 04a8230e317..17abcb0d65e 100644
--- a/apps/wallet/src/ui/app/components/navigation/index.tsx
+++ b/apps/wallet/src/ui/app/components/navigation/index.tsx
@@ -48,7 +48,7 @@ export function Navigation() {
     }
 
     return (
-        <div className="sticky bottom-0 w-full shrink-0 border-b-0 bg-white">
+        <div className="sticky bottom-0 w-full shrink-0 border-b-0 bg-neutral-100 dark:bg-neutral-6">
             <Navbar items={NAVBAR_ITEMS} activeId={activeId} onClickItem={handleItemClick} />
         </div>
     );
diff --git a/apps/wallet/src/ui/app/components/nft-display/index.tsx b/apps/wallet/src/ui/app/components/nft-display/index.tsx
index d5038c40c7d..dec1953fc94 100644
--- a/apps/wallet/src/ui/app/components/nft-display/index.tsx
+++ b/apps/wallet/src/ui/app/components/nft-display/index.tsx
@@ -65,7 +65,11 @@ export function NFTDisplayCard({
                             onIconClick={onIconClick}
                         />
                     )}
-                    {wideView && <span className="text-title-lg text-neutral-10">{nftName}</span>}
+                    {wideView && (
+                        <span className="text-title-lg text-neutral-10 dark:text-neutral-92">
+                            {nftName}
+                        </span>
+                    )}
                 </div>
             </Loading>
         </div>
diff --git a/apps/wallet/src/ui/app/components/receipt-card/TxnAmount.tsx b/apps/wallet/src/ui/app/components/receipt-card/TxnAmount.tsx
index a993b4657ca..912937bde97 100644
--- a/apps/wallet/src/ui/app/components/receipt-card/TxnAmount.tsx
+++ b/apps/wallet/src/ui/app/components/receipt-card/TxnAmount.tsx
@@ -28,7 +28,7 @@ export function TxnAmount({ amount, coinType, subtitle, approximation }: TxnAmou
     return Number(amount) !== 0 ? (
         <Card type={CardType.Filled}>
             <CardImage type={ImageType.BgSolid}>
-                <div className="h-10 w-10 items-center justify-center rounded-full border border-shader-neutral-light-8 text-neutral-10">
+                <div className="h-10 w-10 items-center justify-center rounded-full border border-shader-neutral-light-8 text-neutral-10 dark:text-neutral-92">
                     <CoinIcon coinType={coinType} size={ImageIconSize.Full} rounded />
                 </div>
             </CardImage>
diff --git a/apps/wallet/src/ui/app/components/user-approve-container/index.tsx b/apps/wallet/src/ui/app/components/user-approve-container/index.tsx
index 3ab12353295..3a994d63f6b 100644
--- a/apps/wallet/src/ui/app/components/user-approve-container/index.tsx
+++ b/apps/wallet/src/ui/app/components/user-approve-container/index.tsx
@@ -71,7 +71,7 @@ export function UserApproveContainer({
             </div>
             <div className="sticky bottom-0 z-10">
                 <div
-                    className={cn('flex items-center bg-white p-md pt-sm', {
+                    className={cn('flex items-center bg-neutral-100 p-md pt-sm dark:bg-neutral-6', {
                         'flex-row-reverse': isWarning,
                     })}
                 >
diff --git a/apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx b/apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx
index 53192a4ac0c..3c0d667ddc0 100644
--- a/apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx
+++ b/apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx
@@ -48,7 +48,7 @@ export function BackupMnemonicPage() {
             <Loading loading={isPending}>
                 <div className="flex h-full flex-col items-center justify-between">
                     <div className="flex flex-col gap-md">
-                        <h3 className="text-center text-headline-lg text-neutral-10">
+                        <h3 className="text-center text-headline-lg text-neutral-10 dark:text-neutral-92">
                             Wallet Created Successfully!
                         </h3>
                         <InfoBox
diff --git a/apps/wallet/src/ui/app/pages/accounts/ImportLedgerAccountsPage.tsx b/apps/wallet/src/ui/app/pages/accounts/ImportLedgerAccountsPage.tsx
index d0c166322d3..92b8dcdce92 100644
--- a/apps/wallet/src/ui/app/pages/accounts/ImportLedgerAccountsPage.tsx
+++ b/apps/wallet/src/ui/app/pages/accounts/ImportLedgerAccountsPage.tsx
@@ -142,7 +142,9 @@ function LedgerViewLoading() {
     return (
         <div className="flex h-full w-full flex-row items-center justify-center gap-x-sm">
             <LoadingIndicator />
-            <span className="text-title-lg text-neutral-10">Looking for Accounts...</span>
+            <span className="text-title-lg text-neutral-10 dark:text-neutral-92">
+                Looking for Accounts...
+            </span>
         </div>
     );
 }
@@ -151,7 +153,9 @@ function LedgerViewAllAccountsImported() {
     return (
         <div className="flex h-full w-full flex-row items-center justify-center gap-x-sm [&_svg]:h-6 [&_svg]:w-6">
             <CheckmarkFilled className="text-primary-30" />
-            <span className="text-title-lg text-neutral-10">Imported all Ledger Accounts</span>
+            <span className="text-title-lg text-neutral-10 dark:text-neutral-92">
+                Imported all Ledger Accounts
+            </span>
         </div>
     );
 }
diff --git a/apps/wallet/src/ui/app/pages/accounts/ImportPassphrasePage.tsx b/apps/wallet/src/ui/app/pages/accounts/ImportPassphrasePage.tsx
index 7f982d4ea32..6a3a60a2f6e 100644
--- a/apps/wallet/src/ui/app/pages/accounts/ImportPassphrasePage.tsx
+++ b/apps/wallet/src/ui/app/pages/accounts/ImportPassphrasePage.tsx
@@ -36,7 +36,7 @@ export function ImportPassphrasePage() {
         );
     }
 
-    const BUTTON_ICON_CLASSES = 'w-5 h-5 text-neutral-10';
+    const BUTTON_ICON_CLASSES = 'w-5 h-5 text-neutral-10 dark:text-neutral-92';
     return (
         <PageTemplate title="Import Mnemonic" isTitleCentered showBackButton>
             <div className="flex h-full flex-col gap-md">
diff --git a/apps/wallet/src/ui/app/pages/accounts/WelcomePage.tsx b/apps/wallet/src/ui/app/pages/accounts/WelcomePage.tsx
index d2b5bcad7e8..a9ac8919e66 100644
--- a/apps/wallet/src/ui/app/pages/accounts/WelcomePage.tsx
+++ b/apps/wallet/src/ui/app/pages/accounts/WelcomePage.tsx
@@ -22,12 +22,14 @@ export function WelcomePage() {
 
     return (
         <Loading loading={isInitializedLoading || isFullscreenGuardLoading}>
-            <div className="flex h-full w-full flex-col items-center justify-between bg-white px-md py-2xl shadow-wallet-content">
+            <div className="flex h-full w-full flex-col items-center justify-between bg-neutral-100 px-md py-2xl shadow-wallet-content dark:bg-neutral-6">
                 <IotaLogoWeb width={130} height={32} />
                 <div className="flex flex-col items-center gap-8 text-center">
                     <div className="flex flex-col items-center gap-4">
                         <span className="text-headline-sm text-neutral-40">Welcome to</span>
-                        <h1 className="text-display-lg text-neutral-10">IOTA Wallet</h1>
+                        <h1 className="text-display-lg text-neutral-10 dark:text-neutral-92">
+                            IOTA Wallet
+                        </h1>
                         <span className="text-title-lg text-neutral-40">
                             Your Gateway to the IOTA Ecosystem
                         </span>
diff --git a/apps/wallet/src/ui/app/pages/accounts/forgot-password/RecoverManyPage.tsx b/apps/wallet/src/ui/app/pages/accounts/forgot-password/RecoverManyPage.tsx
index a7528e4814c..61ae8475f46 100644
--- a/apps/wallet/src/ui/app/pages/accounts/forgot-password/RecoverManyPage.tsx
+++ b/apps/wallet/src/ui/app/pages/accounts/forgot-password/RecoverManyPage.tsx
@@ -125,7 +125,7 @@ export function RecoverManyPage() {
                         }
                         setRecoverInfo(null);
                     }}
-                    background="bg-neutral-100"
+                    background="bg-neutral-100 dark:bg-neutral-6"
                 >
                     <div className="flex h-full w-full flex-col flex-nowrap gap-4 text-center">
                         {recoverInfo?.type === AccountSourceType.Mnemonic ? (
diff --git a/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroup.tsx b/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroup.tsx
index b8877caba83..b6cd64ae3b6 100644
--- a/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroup.tsx
+++ b/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroup.tsx
@@ -113,13 +113,15 @@ export function AccountGroup({
                         <div className="flex items-center gap-1">
                             <TriangleDown
                                 className={clsx(
-                                    'h-5 w-5 text-neutral-60',
+                                    'h-5 w-5 text-neutral-10 dark:text-neutral-92',
                                     isOpen
                                         ? 'rotate-0 transition-transform ease-linear'
                                         : '-rotate-90 transition-transform ease-linear',
                                 )}
                             />
-                            <div className="text-title-md">{getGroupTitle(accounts[0])}</div>
+                            <div className="text-title-md text-neutral-10 dark:text-neutral-92">
+                                {getGroupTitle(accounts[0])}
+                            </div>
                         </div>
                         <div className="flex items-center gap-1">
                             {(isMnemonicDerivedGroup || isSeedDerivedGroup) && accountSource ? (
@@ -127,7 +129,9 @@ export function AccountGroup({
                                     size={ButtonSize.Small}
                                     type={ButtonType.Ghost}
                                     onClick={handleAdd}
-                                    icon={<Add className="h-5 w-5 text-neutral-10" />}
+                                    icon={
+                                        <Add className="h-5 w-5 text-neutral-10 dark:text-neutral-92" />
+                                    }
                                 />
                             ) : null}
                             {showMoreButton && (
@@ -139,7 +143,9 @@ export function AccountGroup({
                                             e.stopPropagation();
                                             setDropdownOpen(true);
                                         }}
-                                        icon={<MoreHoriz className="h-5 w-5 text-neutral-10" />}
+                                        icon={
+                                            <MoreHoriz className="h-5 w-5 text-neutral-10 dark:text-neutral-92" />
+                                        }
                                     />
                                 </div>
                             )}
@@ -161,7 +167,7 @@ export function AccountGroup({
                 ))}
             </Collapsible>
             <div
-                className={`absolute right-3 top-3 z-[100] bg-white ${isDropdownOpen ? '' : 'hidden'}`}
+                className={`absolute right-3 top-3 z-[100] rounded-lg bg-neutral-100 shadow-md dark:bg-neutral-6 ${isDropdownOpen ? '' : 'hidden'}`}
             >
                 <OutsideClickHandler onOutsideClick={() => setDropdownOpen(false)}>
                     <Dropdown>
diff --git a/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroupItem.tsx b/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroupItem.tsx
index 2f0269bdc4a..6762b389280 100644
--- a/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroupItem.tsx
+++ b/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroupItem.tsx
@@ -150,7 +150,7 @@ export function AccountGroupItem({
                             top: dropdownPosition.y,
                         }}
                         className={clsx(
-                            `absolute right-0 z-[99] rounded-lg bg-white`,
+                            `absolute right-0 z-[99] rounded-lg bg-neutral-100 shadow-md dark:bg-neutral-6`,
                             showDropdownOptionsBottom ? '-translate-y-full' : '',
                         )}
                     >
@@ -198,7 +198,7 @@ function AccountAvatar({ account }: { account: SerializedUIAccount }) {
     }
     return (
         <div
-            className={`flex h-8 w-8 items-center justify-center rounded-full [&_svg]:h-5 [&_svg]:w-5 [&_svg]:text-white ${account.isLocked ? 'bg-neutral-80' : 'bg-primary-30'}`}
+            className={`flex h-8 w-8 items-center justify-center rounded-full [&_svg]:h-5 [&_svg]:w-5 [&_svg]:text-neutral-100 ${account.isLocked ? 'bg-neutral-90 dark:bg-neutral-20 [&_svg]:dark:text-neutral-50' : 'bg-primary-30 '}`}
         >
             {logo}
         </div>
diff --git a/apps/wallet/src/ui/app/pages/home/assets/HiddenAssetsProvider.tsx b/apps/wallet/src/ui/app/pages/home/assets/HiddenAssetsProvider.tsx
index 7e01a7c3ebd..ff94f428a74 100644
--- a/apps/wallet/src/ui/app/pages/home/assets/HiddenAssetsProvider.tsx
+++ b/apps/wallet/src/ui/app/pages/home/assets/HiddenAssetsProvider.tsx
@@ -188,7 +188,7 @@ function MovedAssetNotification({ t, destination, onUndo }: MovedAssetNotificati
             className="flex w-full flex-row items-baseline gap-x-xxs"
             onClick={() => toast.dismiss(t.id)}
         >
-            <ButtonUnstyled className="text-body-sm text-neutral-12">
+            <ButtonUnstyled className="text-body-sm text-neutral-12 dark:text-neutral-92">
                 Moved to {destination}
             </ButtonUnstyled>
             <ButtonUnstyled
@@ -196,7 +196,7 @@ function MovedAssetNotification({ t, destination, onUndo }: MovedAssetNotificati
                     onUndo();
                     toast.dismiss(t.id);
                 }}
-                className="ml-auto mr-sm text-body-sm text-neutral-12"
+                className="ml-auto mr-sm text-body-sm text-neutral-12 dark:text-neutral-92"
             >
                 UNDO
             </ButtonUnstyled>
diff --git a/apps/wallet/src/ui/app/pages/home/nft-details/index.tsx b/apps/wallet/src/ui/app/pages/home/nft-details/index.tsx
index 00792a40e54..ab9508a19f0 100644
--- a/apps/wallet/src/ui/app/pages/home/nft-details/index.tsx
+++ b/apps/wallet/src/ui/app/pages/home/nft-details/index.tsx
@@ -125,7 +125,7 @@ function NFTDetailsPage() {
                                     </div>
                                     <div className="flex flex-col gap-md">
                                         <div className="flex flex-col gap-xxxs">
-                                            <span className="text-title-lg text-neutral-10">
+                                            <span className="text-title-lg text-neutral-10 dark:text-neutral-92">
                                                 {nftDisplayData?.name}
                                             </span>
                                             {nftDisplayData?.description ? (
diff --git a/apps/wallet/src/ui/app/pages/home/tokens/TokenStakingOverview.tsx b/apps/wallet/src/ui/app/pages/home/tokens/TokenStakingOverview.tsx
index 15c72d92bb1..1c164c4a9d6 100644
--- a/apps/wallet/src/ui/app/pages/home/tokens/TokenStakingOverview.tsx
+++ b/apps/wallet/src/ui/app/pages/home/tokens/TokenStakingOverview.tsx
@@ -59,7 +59,7 @@ export function TokenStakingOverview({
     return (
         <Card type={CardType.Filled} onClick={handleOnClick} isDisabled={disabled}>
             <CardImage shape={ImageShape.SquareRounded}>
-                <Stake className="h-5 w-5 text-primary-20" />
+                <Stake className="h-5 w-5 text-primary-20 dark:text-primary-90" />
             </CardImage>
             <CardBody
                 title={
diff --git a/apps/wallet/src/ui/app/pages/home/tokens/coin-balance/index.tsx b/apps/wallet/src/ui/app/pages/home/tokens/coin-balance/index.tsx
index d2bd29199a7..75aecdf86ca 100644
--- a/apps/wallet/src/ui/app/pages/home/tokens/coin-balance/index.tsx
+++ b/apps/wallet/src/ui/app/pages/home/tokens/coin-balance/index.tsx
@@ -42,7 +42,10 @@ export function CoinBalance({ amount: walletBalance, type }: CoinProps) {
     return (
         <>
             <div className="flex items-baseline gap-0.5">
-                <div className="text-headline-lg text-neutral-10" data-testid="coin-balance">
+                <div
+                    className="text-headline-lg text-neutral-10 dark:text-neutral-92"
+                    data-testid="coin-balance"
+                >
                     {formatted}
                 </div>
                 <div className="text-label-md text-neutral-40">{symbol}</div>
diff --git a/apps/wallet/src/ui/app/pages/home/tokens/icon-link/index.tsx b/apps/wallet/src/ui/app/pages/home/tokens/icon-link/index.tsx
index 272284b6d49..2b3d21fca68 100644
--- a/apps/wallet/src/ui/app/pages/home/tokens/icon-link/index.tsx
+++ b/apps/wallet/src/ui/app/pages/home/tokens/icon-link/index.tsx
@@ -23,7 +23,12 @@ function IconLink({ to, icon, disabled = false, text }: IconLinkProps) {
             tabIndex={disabled ? -1 : undefined}
         >
             <div className={cl(disabled ? 'text-gray-60' : 'text-hero-dark')}>{icon}</div>
-            <span className={cl('text-body-sm', disabled ? 'opacity-60' : 'text-neutral-10')}>
+            <span
+                className={cl(
+                    'text-body-sm',
+                    disabled ? 'opacity-60' : 'text-neutral-10 dark:text-neutral-92',
+                )}
+            >
                 {text}
             </span>
         </Link>
diff --git a/apps/wallet/src/ui/app/pages/restricted/index.tsx b/apps/wallet/src/ui/app/pages/restricted/index.tsx
index b794fdeced2..8571e51a6c5 100644
--- a/apps/wallet/src/ui/app/pages/restricted/index.tsx
+++ b/apps/wallet/src/ui/app/pages/restricted/index.tsx
@@ -13,7 +13,7 @@ export function RestrictedPage() {
 
     return (
         <PageMainLayout>
-            <div className="flex h-full w-full flex-col items-center justify-between bg-white px-md py-2xl shadow-wallet-content">
+            <div className="flex h-full w-full flex-col items-center justify-between bg-neutral-100 px-md py-2xl shadow-wallet-content dark:bg-neutral-6">
                 <IotaLogoWeb width={130} height={32} />
                 <div className="flex flex-col items-center text-center">
                     <span className="text-title-lg text-neutral-40">
diff --git a/apps/wallet/src/ui/app/shared/ButtonConnectedTo.tsx b/apps/wallet/src/ui/app/shared/ButtonConnectedTo.tsx
index 29e5c03cf4a..c26f80bed6c 100644
--- a/apps/wallet/src/ui/app/shared/ButtonConnectedTo.tsx
+++ b/apps/wallet/src/ui/app/shared/ButtonConnectedTo.tsx
@@ -19,7 +19,7 @@ export const ButtonConnectedTo = forwardRef<HTMLButtonElement, ButtonConnectedTo
             <button
                 {...rest}
                 ref={ref}
-                className="flex max-w-28 cursor-pointer flex-row items-center gap-1 rounded-full bg-neutral-96 p-xxxs pr-xs hover:bg-neutral-92"
+                className="flex max-w-28 cursor-pointer flex-row items-center gap-1 rounded-full bg-neutral-96 p-xxxs pr-xs hover:bg-neutral-92 dark:bg-neutral-12"
             >
                 <div className="flex rounded-full bg-neutral-50 p-xxxs text-neutral-100">
                     {iconBefore}
diff --git a/apps/wallet/src/ui/app/shared/card-layout/index.tsx b/apps/wallet/src/ui/app/shared/card-layout/index.tsx
index 55ab6622f49..c77416b4082 100644
--- a/apps/wallet/src/ui/app/shared/card-layout/index.tsx
+++ b/apps/wallet/src/ui/app/shared/card-layout/index.tsx
@@ -35,7 +35,9 @@ export function CardLayout({ children, title, subtitle, headerCaption, icon }: C
             ) : null}
             {subtitle ? (
                 <div className="mb-md text-center">
-                    <span className="text-label-md text-neutral-10">{subtitle}</span>
+                    <span className="text-label-md text-neutral-10 dark:text-neutral-92">
+                        {subtitle}
+                    </span>
                 </div>
             ) : null}
             {children}
diff --git a/apps/wallet/src/ui/app/shared/dapp-status/index.tsx b/apps/wallet/src/ui/app/shared/dapp-status/index.tsx
index dd6901acbb8..42cb18e8598 100644
--- a/apps/wallet/src/ui/app/shared/dapp-status/index.tsx
+++ b/apps/wallet/src/ui/app/shared/dapp-status/index.tsx
@@ -103,7 +103,7 @@ function DappStatus() {
                             duration: 0.3,
                             ease: 'anticipate',
                         }}
-                        className="absolute right-6 top-[48px] z-50 max-w-72 rounded-2xl bg-neutral-96 p-sm shadow-xl"
+                        className="absolute right-6 top-[48px] z-50 max-w-72 rounded-2xl bg-neutral-96 p-sm shadow-xl dark:bg-neutral-12"
                         style={{ top: y || 0, left: x || 0 }}
                         {...getFloatingProps()}
                         ref={refs.setFloating}
@@ -123,7 +123,7 @@ function DappStatus() {
                                     <span className="text-label-md text-neutral-40">
                                         Connected to
                                     </span>
-                                    <div className="break-all text-body-sm text-neutral-10">
+                                    <div className="break-all text-body-sm text-neutral-10 dark:text-neutral-92">
                                         {activeOrigin}
                                     </div>
                                 </div>
diff --git a/apps/wallet/src/ui/app/shared/header/Header.tsx b/apps/wallet/src/ui/app/shared/header/Header.tsx
index 3ee58883a15..e93445edcc2 100644
--- a/apps/wallet/src/ui/app/shared/header/Header.tsx
+++ b/apps/wallet/src/ui/app/shared/header/Header.tsx
@@ -18,7 +18,7 @@ interface HeaderProps {
  */
 export function Header({ network, leftContent, middleContent, rightContent }: HeaderProps) {
     return (
-        <header className="flex flex-row items-center justify-between bg-neutral-100 px-md py-xs">
+        <header className="flex flex-row items-center justify-between bg-neutral-100 px-md py-xs dark:bg-neutral-6">
             {leftContent && <div>{leftContent}</div>}
             {middleContent && <div className="overflow-hidden">{middleContent}</div>}
             {rightContent && <div>{rightContent}</div>}
diff --git a/apps/wallet/src/ui/app/shared/page-main-layout/PageMainLayout.tsx b/apps/wallet/src/ui/app/shared/page-main-layout/PageMainLayout.tsx
index 6b725d2b75a..9896be915fb 100644
--- a/apps/wallet/src/ui/app/shared/page-main-layout/PageMainLayout.tsx
+++ b/apps/wallet/src/ui/app/shared/page-main-layout/PageMainLayout.tsx
@@ -64,7 +64,7 @@ export function PageMainLayout({
                 />
             ) : null}
             <div className="relative flex flex-grow flex-col flex-nowrap overflow-hidden">
-                <div className="flex flex-grow flex-col flex-nowrap overflow-y-auto overflow-x-hidden bg-neutral-100">
+                <div className="flex flex-grow flex-col flex-nowrap overflow-y-auto overflow-x-hidden bg-neutral-100 dark:bg-neutral-6">
                     <main
                         className={cn('flex w-full flex-grow flex-col', {
                             'p-5': bottomNavEnabled && isHomePage,
@@ -109,7 +109,9 @@ function LeftContent({
             >
                 {isLedgerAccount ? <Ledger /> : <IotaLogoMark />}
             </div>
-            <span className="shrink-0 text-title-sm text-neutral-10">{accountName}</span>
+            <span className="shrink-0 text-title-sm text-neutral-10 dark:text-neutral-92">
+                {accountName}
+            </span>
         </Link>
     );
 }
diff --git a/apps/wallet/src/ui/app/staking/validators/StatsDetail.tsx b/apps/wallet/src/ui/app/staking/validators/StatsDetail.tsx
index 8a33d355cec..ba8a478c00e 100644
--- a/apps/wallet/src/ui/app/staking/validators/StatsDetail.tsx
+++ b/apps/wallet/src/ui/app/staking/validators/StatsDetail.tsx
@@ -14,12 +14,16 @@ export function StatsDetail({ balance, title }: DisplayStatsProps) {
     const [formatted, symbol] = useFormatCoin(balance, IOTA_TYPE_ARG);
 
     return (
-        <div className="flex h-[96px] flex-1 flex-col justify-between rounded-xl bg-neutral-96 p-md">
-            <div className="text-label-sm text-neutral-10">{title}</div>
+        <div className="flex h-[96px] flex-1 flex-col justify-between rounded-xl bg-neutral-96 p-md dark:bg-neutral-12">
+            <div className="text-label-sm text-neutral-10 dark:text-neutral-92">{title}</div>
 
             <div className="flex items-baseline gap-xxs">
-                <div className="text-title-md text-neutral-10">{formatted}</div>
-                <div className="text-label-md text-neutral-10 opacity-40">{symbol}</div>
+                <div className="text-title-md text-neutral-10 dark:text-neutral-92">
+                    {formatted}
+                </div>
+                <div className="text-label-md text-neutral-10 opacity-40 dark:text-neutral-92">
+                    {symbol}
+                </div>
             </div>
         </div>
     );
diff --git a/apps/wallet/src/ui/assets/images/no_data.svg b/apps/wallet/src/ui/assets/images/no_data.svg
index fcc781d2e8e..388b9a8f428 100644
--- a/apps/wallet/src/ui/assets/images/no_data.svg
+++ b/apps/wallet/src/ui/assets/images/no_data.svg
@@ -1,4 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="180" height="120" viewBox="0 0 180 120" fill="none">
-<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M45.4626 51.4023L56.7293 93.4501L134.537 72.6016L123.27 30.5538L45.4626 51.4023ZM35.6474 37.5011C30.2674 38.9427 27.0746 44.4727 28.5162 49.8527L42.8281 103.265C44.2697 108.645 49.7996 111.838 55.1796 110.397L144.352 86.5028C149.732 85.0612 152.925 79.5312 151.484 74.1512L137.172 20.7386C135.73 15.3585 130.2 12.1658 124.82 13.6074L35.6474 37.5011Z" fill="#DDE4F0"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M43.209 24.0059C37.5707 24.0059 33 28.6024 33 34.2725V90.7392C33 96.4093 37.5707 101.006 43.209 101.006H136.791C142.429 101.006 147 96.4093 147 90.7392V34.2725C147 28.6024 142.429 24.0059 136.791 24.0059H43.209ZM66.6045 55.6614C63.0806 55.6614 60.2239 58.5343 60.2239 62.0781C60.2239 65.6219 63.0806 68.4947 66.6045 68.4947C70.1284 68.4947 72.9851 65.6219 72.9851 62.0781C72.9851 58.5343 70.1284 55.6614 66.6045 55.6614ZM83.194 62.0781C83.194 58.5343 86.0507 55.6614 89.5746 55.6614C93.0985 55.6614 95.9552 58.5343 95.9552 62.0781C95.9552 65.6219 93.0985 68.4947 89.5746 68.4947C86.0507 68.4947 83.194 65.6219 83.194 62.0781ZM112.545 55.6614C109.021 55.6614 106.164 58.5343 106.164 62.0781C106.164 65.6219 109.021 68.4947 112.545 68.4947C116.069 68.4947 118.925 65.6219 118.925 62.0781C118.925 58.5343 116.069 55.6614 112.545 55.6614Z" fill="#DDE4F0"/>
+  <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd"
+    d="M45.4626 51.4023L56.7293 93.4501L134.537 72.6016L123.27 30.5538L45.4626 51.4023ZM35.6474 37.5011C30.2674 38.9427 27.0746 44.4727 28.5162 49.8527L42.8281 103.265C44.2697 108.645 49.7996 111.838 55.1796 110.397L144.352 86.5028C149.732 85.0612 152.925 79.5312 151.484 74.1512L137.172 20.7386C135.73 15.3585 130.2 12.1658 124.82 13.6074L35.6474 37.5011Z"
+    fill="#DDE4F0" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M43.209 24.0059C37.5707 24.0059 33 28.6024 33 34.2725V90.7392C33 96.4093 37.5707 101.006 43.209 101.006H136.791C142.429 101.006 147 96.4093 147 90.7392V34.2725C147 28.6024 142.429 24.0059 136.791 24.0059H43.209ZM66.6045 55.6614C63.0806 55.6614 60.2239 58.5343 60.2239 62.0781C60.2239 65.6219 63.0806 68.4947 66.6045 68.4947C70.1284 68.4947 72.9851 65.6219 72.9851 62.0781C72.9851 58.5343 70.1284 55.6614 66.6045 55.6614ZM83.194 62.0781C83.194 58.5343 86.0507 55.6614 89.5746 55.6614C93.0985 55.6614 95.9552 58.5343 95.9552 62.0781C95.9552 65.6219 93.0985 68.4947 89.5746 68.4947C86.0507 68.4947 83.194 65.6219 83.194 62.0781ZM112.545 55.6614C109.021 55.6614 106.164 58.5343 106.164 62.0781C106.164 65.6219 109.021 68.4947 112.545 68.4947C116.069 68.4947 118.925 65.6219 118.925 62.0781C118.925 58.5343 116.069 55.6614 112.545 55.6614Z"
+    fill="#DDE4F0" />
 </svg>
\ No newline at end of file
diff --git a/apps/wallet/src/ui/assets/images/no_data_darkmode.svg b/apps/wallet/src/ui/assets/images/no_data_darkmode.svg
new file mode 100644
index 00000000000..c3502ecf4c6
--- /dev/null
+++ b/apps/wallet/src/ui/assets/images/no_data_darkmode.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="180" height="120" viewBox="0 0 180 120" fill="none">
+  <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd"
+    d="M45.5566 49.4053L56.8233 91.4531L134.631 70.6045L123.364 28.5567L45.5566 49.4053ZM35.7414 35.5041C30.3614 36.9456 27.1686 42.4756 28.6102 47.8556L42.9221 101.268C44.3636 106.648 49.8936 109.841 55.2736 108.399L144.446 84.5057C149.826 83.0642 153.019 77.5342 151.578 72.1542L137.266 18.7415C135.824 13.3615 130.294 10.1687 124.914 11.6103L35.7414 35.5041Z"
+    fill="#253041" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M43.3027 22.0088C37.6645 22.0088 33.0938 26.6053 33.0938 32.2755V88.7421C33.0938 94.4122 37.6645 99.0088 43.3027 99.0088H136.885C142.523 99.0088 147.094 94.4122 147.094 88.7421V32.2755C147.094 26.6053 142.523 22.0088 136.885 22.0088H43.3027ZM66.6982 53.6643C63.1743 53.6643 60.3176 56.5372 60.3176 60.081C60.3176 63.6248 63.1743 66.4977 66.6982 66.4977C70.2221 66.4977 73.0788 63.6248 73.0788 60.081C73.0788 56.5372 70.2221 53.6643 66.6982 53.6643ZM83.2878 60.081C83.2878 56.5372 86.1445 53.6643 89.6684 53.6643C93.1923 53.6643 96.049 56.5372 96.049 60.081C96.049 63.6248 93.1923 66.4977 89.6684 66.4977C86.1445 66.4977 83.2878 63.6248 83.2878 60.081ZM112.639 53.6643C109.115 53.6643 106.258 56.5372 106.258 60.081C106.258 63.6248 109.115 66.4977 112.639 66.4977C116.162 66.4977 119.019 63.6248 119.019 60.081C119.019 56.5372 116.162 53.6643 112.639 53.6643Z"
+    fill="#253041" />
+</svg>
\ No newline at end of file
diff --git a/apps/wallet/src/ui/index.tsx b/apps/wallet/src/ui/index.tsx
index 49dff3a6b7d..8598908f346 100644
--- a/apps/wallet/src/ui/index.tsx
+++ b/apps/wallet/src/ui/index.tsx
@@ -13,7 +13,7 @@ import { setAttributes } from '_src/shared/experimentation/features';
 import initSentry from '_src/ui/app/helpers/sentry';
 import store from '_store';
 import { thunkExtras } from '_store/thunk-extras';
-import { KioskClientProvider } from '@iota/core';
+import { KioskClientProvider, ThemeProvider } from '@iota/core';
 import { GrowthBookProvider } from '@growthbook/growthbook-react';
 import { IotaClientProvider } from '@iota/dapp-kit';
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
@@ -96,20 +96,22 @@ function AppWrapper() {
                             >
                                 <KioskClientProvider>
                                     <AccountsFormProvider>
-                                        <UnlockAccountProvider>
-                                            <div
-                                                className={cn(
-                                                    'relative flex h-screen max-h-popup-height min-h-popup-minimum w-popup-width flex-col flex-nowrap items-center justify-center overflow-hidden',
-                                                    isFullscreen && 'rounded-xl shadow-lg',
-                                                )}
-                                            >
-                                                <ErrorBoundary>
-                                                    <App />
-                                                </ErrorBoundary>
-                                                <div id="overlay-portal-container"></div>
-                                                <div id="toaster-portal-container"></div>
-                                            </div>
-                                        </UnlockAccountProvider>
+                                        <ThemeProvider appId="wallet">
+                                            <UnlockAccountProvider>
+                                                <div
+                                                    className={cn(
+                                                        'relative flex h-screen max-h-popup-height min-h-popup-minimum w-popup-width flex-col flex-nowrap items-center justify-center overflow-hidden',
+                                                        isFullscreen && 'rounded-xl shadow-lg',
+                                                    )}
+                                                >
+                                                    <ErrorBoundary>
+                                                        <App />
+                                                    </ErrorBoundary>
+                                                    <div id="overlay-portal-container"></div>
+                                                    <div id="toaster-portal-container"></div>
+                                                </div>
+                                            </UnlockAccountProvider>
+                                        </ThemeProvider>
                                     </AccountsFormProvider>
                                 </KioskClientProvider>
                             </IotaClientProvider>
diff --git a/apps/wallet/src/ui/styles/global.scss b/apps/wallet/src/ui/styles/global.scss
index 7b0ad608988..61d13ed2261 100644
--- a/apps/wallet/src/ui/styles/global.scss
+++ b/apps/wallet/src/ui/styles/global.scss
@@ -61,7 +61,7 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    @apply rounded-xl bg-neutral-100;
+    @apply rounded-xl bg-neutral-100 dark:bg-neutral-6;
 }
 
 * {