diff --git a/apps/ui-icons/src/DarkMode.tsx b/apps/ui-icons/src/DarkMode.tsx
new file mode 100644
index 00000000000..2fa66b5e62f
--- /dev/null
+++ b/apps/ui-icons/src/DarkMode.tsx
@@ -0,0 +1,23 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { SVGProps } from 'react';
+export default function SvgDarkMode(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            fill="none"
+            viewBox="0 0 24 24"
+            {...props}
+        >
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M11.2201 6.05022C8.27486 6.43251 6 8.95059 6 12C6 15.3137 8.68629 18 12 18C13.3228 18 14.5452 17.5726 15.5374 16.847C12.3735 16.1744 10 13.3644 10 10C10 8.53557 10.4506 7.17445 11.2201 6.05022ZM4 12C4 7.58172 7.58172 4 12 4C12.7961 4 13.3232 4.54031 13.5017 5.12203C13.6694 5.66858 13.5651 6.31196 13.1586 6.79923C12.4347 7.66686 12 8.78135 12 10C12 12.7614 14.2386 15 17 15C17.5389 15 17.9878 15.3043 18.2148 15.716C18.4516 16.1457 18.4678 16.75 18.0604 17.2224C16.5949 18.9217 14.4228 20 12 20C7.58172 20 4 16.4183 4 12Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+}
diff --git a/apps/ui-icons/src/index.ts b/apps/ui-icons/src/index.ts
index 68afd21e7ee..a19892633dd 100644
--- a/apps/ui-icons/src/index.ts
+++ b/apps/ui-icons/src/index.ts
@@ -21,6 +21,7 @@ export { default as Close } from './Close';
 export { default as Copy } from './Copy';
 export { default as Create } from './Create';
 export { default as Dash } from './Dash';
+export { default as DarkMode } from './DarkMode';
 export { default as DataStack } from './DataStack';
 export { default as Delete } from './Delete';
 export { default as DoubleArrowLeft } from './DoubleArrowLeft';
diff --git a/apps/ui-icons/svgs/dark_mode.svg b/apps/ui-icons/svgs/dark_mode.svg
new file mode 100644
index 00000000000..e6b42d17bfc
--- /dev/null
+++ b/apps/ui-icons/svgs/dark_mode.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.2201 6.05022C8.27486 6.43251 6 8.95059 6 12C6 15.3137 8.68629 18 12 18C13.3228 18 14.5452 17.5726 15.5374 16.847C12.3735 16.1744 10 13.3644 10 10C10 8.53557 10.4506 7.17445 11.2201 6.05022ZM4 12C4 7.58172 7.58172 4 12 4C12.7961 4 13.3232 4.54031 13.5017 5.12203C13.6694 5.66858 13.5651 6.31196 13.1586 6.79923C12.4347 7.66686 12 8.78135 12 10C12 12.7614 14.2386 15 17 15C17.5389 15 17.9878 15.3043 18.2148 15.716C18.4516 16.1457 18.4678 16.75 18.0604 17.2224C16.5949 18.9217 14.4228 20 12 20C7.58172 20 4 16.4183 4 12Z" fill="#171D26"/>
+</svg>
diff --git a/apps/wallet/src/ui/app/components/menu/content/MenuLayout.tsx b/apps/wallet/src/ui/app/components/menu/content/MenuLayout.tsx
deleted file mode 100644
index 7d4a0988322..00000000000
--- a/apps/wallet/src/ui/app/components/menu/content/MenuLayout.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright (c) Mysten Labs, Inc.
-// Modifications Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import PageTitle, { type PageTitleProps } from '_src/ui/app/shared/PageTitle';
-import { type ReactNode } from 'react';
-
-export interface MenuLayoutProps extends PageTitleProps {
-    children: ReactNode;
-}
-
-export function MenuLayout({ children, ...pageTitleProps }: MenuLayoutProps) {
-    return (
-        <>
-            <div className="sticky top-0 bg-white py-4">
-                <PageTitle {...pageTitleProps} />
-            </div>
-            <div className="flex flex-1 flex-col justify-items-stretch px-2.5">{children}</div>
-        </>
-    );
-}
diff --git a/apps/wallet/src/ui/app/components/menu/content/MenuListItem.tsx b/apps/wallet/src/ui/app/components/menu/content/MenuListItem.tsx
deleted file mode 100644
index 6a1916bfc1c..00000000000
--- a/apps/wallet/src/ui/app/components/menu/content/MenuListItem.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-// Copyright (c) Mysten Labs, Inc.
-// Modifications Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { ChevronRight16 } from '@iota/icons';
-import clsx from 'clsx';
-import type { MouseEventHandler, ReactNode } from 'react';
-import { Link } from 'react-router-dom';
-
-export interface ItemProps {
-    icon: ReactNode;
-    title: ReactNode;
-    subtitle?: ReactNode;
-    iconAfter?: ReactNode;
-    to?: string;
-    href?: string;
-    onClick?: MouseEventHandler<Element>;
-}
-
-function MenuListItem({
-    icon,
-    title,
-    subtitle,
-    iconAfter,
-    to = '',
-    href = '',
-    onClick,
-}: ItemProps) {
-    const Component = to ? Link : 'div';
-
-    const MenuItemContent = (
-        <>
-            <div className="flex flex-1 basis-3/5 flex-nowrap items-center gap-2 overflow-hidden">
-                <div className="text-steel flex flex-none text-2xl">{icon}</div>
-                <div className="text-gray-90 flex flex-1 text-body font-semibold">{title}</div>
-            </div>
-            {subtitle || iconAfter || to ? (
-                <div
-                    className={clsx(
-                        { 'flex-1 basis-2/5': Boolean(subtitle) },
-                        'flex flex-nowrap items-center justify-end gap-1 overflow-hidden',
-                    )}
-                >
-                    {subtitle ? (
-                        <div className="text-steel-dark group-hover:text-steel-darker text-bodySmall font-medium transition">
-                            {subtitle}
-                        </div>
-                    ) : null}
-                    <div className="text-steel group-hover:text-steel-darker flex flex-none text-base transition">
-                        {iconAfter || (to && <ChevronRight16 />) || null}
-                    </div>
-                </div>
-            ) : null}
-        </>
-    );
-
-    if (href) {
-        return (
-            <a
-                href={href}
-                target="_blank"
-                rel="noreferrer noopener"
-                className="group flex cursor-pointer flex-nowrap items-center gap-5 overflow-hidden px-1 py-4.5 no-underline first:pb-3 first:pt-3 last:pb-3"
-            >
-                {MenuItemContent}
-            </a>
-        );
-    }
-    return (
-        <Component
-            data-testid={title}
-            className="group flex cursor-pointer flex-nowrap items-center gap-5 overflow-hidden px-1 py-5 no-underline first:pb-3 first:pt-3 last:pb-3"
-            to={to}
-            onClick={onClick}
-        >
-            {MenuItemContent}
-        </Component>
-    );
-}
-
-export default MenuListItem;
diff --git a/apps/wallet/src/ui/app/components/menu/content/MoreOptions.tsx b/apps/wallet/src/ui/app/components/menu/content/MoreOptions.tsx
deleted file mode 100644
index 9ecdc1e21a8..00000000000
--- a/apps/wallet/src/ui/app/components/menu/content/MoreOptions.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-// Copyright (c) Mysten Labs, Inc.
-// Modifications Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { Button } from '_app/shared/ButtonUI';
-import { useNextMenuUrl } from '_components';
-// import { ampli } from '_src/shared/analytics/ampli';
-import { persister } from '_src/ui/app/helpers/queryClient';
-import { useBackgroundClient } from '_src/ui/app/hooks/useBackgroundClient';
-import { ConfirmationModal } from '_src/ui/app/shared/ConfirmationModal';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useState } from 'react';
-
-import { MenuLayout } from './MenuLayout';
-
-export function MoreOptions() {
-    const mainMenuUrl = useNextMenuUrl(true, '/');
-    const [isLogoutDialogOpen, setIsLogoutDialogOpen] = useState(false);
-    const backgroundClient = useBackgroundClient();
-    const queryClient = useQueryClient();
-    const logoutMutation = useMutation({
-        mutationKey: ['logout', 'clear wallet'],
-        mutationFn: async () => {
-            // ampli.client.reset();
-            queryClient.cancelQueries();
-            queryClient.clear();
-            await persister.removeClient();
-            await backgroundClient.clearWallet();
-        },
-    });
-    return (
-        <MenuLayout title="More Options" back={mainMenuUrl}>
-            <Button
-                variant="warning"
-                text="Logout"
-                size="narrow"
-                loading={logoutMutation.isPending}
-                disabled={isLogoutDialogOpen}
-                onClick={() => setIsLogoutDialogOpen(true)}
-            />
-            <ConfirmationModal
-                isOpen={isLogoutDialogOpen}
-                confirmText="Logout"
-                confirmStyle="outlineWarning"
-                title="Are you sure you want to Logout?"
-                hint="You will need to set up all your accounts again."
-                onResponse={async (confirmed) => {
-                    setIsLogoutDialogOpen(false);
-                    if (confirmed) {
-                        await logoutMutation.mutateAsync(undefined, {
-                            onSuccess: () => {
-                                window.location.reload();
-                            },
-                        });
-                    }
-                }}
-            />
-        </MenuLayout>
-    );
-}
diff --git a/apps/wallet/src/ui/app/components/menu/content/NetworkSettings.tsx b/apps/wallet/src/ui/app/components/menu/content/NetworkSettings.tsx
index 160dd91c49a..5c33caff7bf 100644
--- a/apps/wallet/src/ui/app/components/menu/content/NetworkSettings.tsx
+++ b/apps/wallet/src/ui/app/components/menu/content/NetworkSettings.tsx
@@ -2,15 +2,15 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { useNextMenuUrl, NetworkSelector } from '_components';
-
-import { MenuLayout } from './MenuLayout';
+import { useNextMenuUrl, NetworkSelector, Overlay } from '_components';
+import { useNavigate } from 'react-router-dom';
 
 export function NetworkSettings() {
+    const navigate = useNavigate();
     const mainMenuUrl = useNextMenuUrl(true, '/');
     return (
-        <MenuLayout title="Network" back={mainMenuUrl}>
+        <Overlay showModal title="Network" closeOverlay={() => navigate(mainMenuUrl)}>
             <NetworkSelector />
-        </MenuLayout>
+        </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 72cb40063fe..ed56f0a26fb 100644
--- a/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx
+++ b/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx
@@ -2,76 +2,167 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { useNextMenuUrl, Loading } from '_components';
+import { useNextMenuUrl, Overlay } from '_components';
 import { useAppSelector } from '_hooks';
 import { getCustomNetwork } from '_src/shared/api-env';
 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';
-import { Link } from '_src/ui/app/shared/Link';
-import { Text } from '_src/ui/app/shared/text';
-import { ArrowUpRight12, Clipboard24, Domain24, LockLocked24, More24 } from '@iota/icons';
 import { getNetwork, Network } from '@iota/iota-sdk/client';
 import Browser from 'webextension-polyfill';
-
-import { MenuLayout } from './MenuLayout';
-import MenuListItem from './MenuListItem';
+import { Link, useNavigate } from 'react-router-dom';
+import { useQueryClient, useMutation } from '@tanstack/react-query';
+import { persister } from '_src/ui/app/helpers/queryClient';
+import { useBackgroundClient } from '_src/ui/app/hooks/useBackgroundClient';
+import { useState } from 'react';
+import { ConfirmationModal } from '_src/ui/app/shared/ConfirmationModal';
+import { DarkMode, Globe, Info, LockLocked, LockUnlocked, Logout } from '@iota/ui-icons';
+import { useActiveAccount } from '_src/ui/app/hooks/useActiveAccount';
+import {
+    Card,
+    CardAction,
+    CardActionType,
+    CardBody,
+    CardImage,
+    CardType,
+    ImageType,
+} from '@iota/apps-ui-kit';
 
 function MenuList() {
+    const navigate = useNavigate();
+    const activeAccount = useActiveAccount();
     const networkUrl = useNextMenuUrl(true, '/network');
     const autoLockUrl = useNextMenuUrl(true, '/auto-lock');
-    const moreOptionsUrl = useNextMenuUrl(true, '/more-options');
     const network = useAppSelector((state) => state.app.network);
     const networkConfig = network === Network.Custom ? getCustomNetwork() : getNetwork(network);
     const version = Browser.runtime.getManifest().version;
     const autoLockInterval = useAutoLockMinutes();
 
+    // Logout
+    const [isLogoutDialogOpen, setIsLogoutDialogOpen] = useState(false);
+    const backgroundClient = useBackgroundClient();
+    const queryClient = useQueryClient();
+    const logoutMutation = useMutation({
+        mutationKey: ['logout', 'clear wallet'],
+        mutationFn: async () => {
+            // ampli.client.reset();
+            queryClient.cancelQueries();
+            queryClient.clear();
+            await persister.removeClient();
+            await backgroundClient.clearWallet();
+        },
+    });
+
+    function handleAutoLockSubtitle(): string {
+        if (autoLockInterval.data === null) {
+            return 'Not set up';
+        }
+        if (typeof autoLockInterval.data === 'number') {
+            return formatAutoLock(autoLockInterval.data);
+        }
+        return '';
+    }
+
+    function onNetworkClick() {
+        navigate(networkUrl);
+    }
+
+    function onAutoLockClick() {
+        navigate(autoLockUrl);
+    }
+
+    function onFAQClick() {
+        window.open(FAQ_LINK, '_blank', 'noopener noreferrer');
+    }
+
+    const autoLockSubtitle = handleAutoLockSubtitle();
+    const MENU_ITEMS = [
+        {
+            title: 'Network',
+            subtitle: networkConfig.name,
+            icon: <Globe />,
+            onClick: onNetworkClick,
+        },
+        {
+            title: 'Auto Lock Profile',
+            subtitle: autoLockSubtitle,
+            icon: activeAccount?.isLocked ? <LockLocked /> : <LockUnlocked />,
+            onClick: onAutoLockClick,
+        },
+        {
+            title: 'FAQ',
+            icon: <Info />,
+            onClick: onFAQClick,
+        },
+        {
+            title: 'Themes',
+            icon: <DarkMode />,
+            onClick: () => {},
+            isDisabled: true,
+        },
+        {
+            title: 'Reset',
+            icon: <Logout />,
+            onClick: () => setIsLogoutDialogOpen(true),
+        },
+    ];
+
     return (
-        <MenuLayout title="Wallet Settings">
-            <div className="divide-gray-45 flex flex-col divide-x-0 divide-y divide-solid">
-                <MenuListItem
-                    to={networkUrl}
-                    icon={<Domain24 />}
-                    title="Network"
-                    subtitle={networkConfig.name}
-                />
-                <MenuListItem
-                    to={autoLockUrl}
-                    icon={<LockLocked24 />}
-                    title="Auto-lock Accounts"
-                    subtitle={
-                        <Loading loading={autoLockInterval?.isPending}>
-                            {autoLockInterval.data === null ? 'Not set up' : null}
-                            {typeof autoLockInterval.data === 'number'
-                                ? formatAutoLock(autoLockInterval.data)
-                                : null}
-                        </Loading>
-                    }
-                />
-                <MenuListItem icon={<Clipboard24 />} title="FAQ" href={FAQ_LINK} />
-                <MenuListItem
-                    icon={<More24 className="text-steel-darker" />}
-                    title="More options"
-                    to={moreOptionsUrl}
-                />
-            </div>
-            <div className="flex-1" />
-            <div className="mt-2.5 flex flex-col items-stretch">
-                <FaucetRequestButton variant="outline" />
-            </div>
-            <div className="mt-3.75 flex flex-col items-center justify-center gap-3.75 px-2.5 no-underline">
-                <Link
-                    href={ToS_LINK}
-                    text="Terms of service"
-                    after={<ArrowUpRight12 />}
-                    color="steelDark"
-                    weight="semibold"
-                />
-                <Text variant="bodySmall" weight="medium" color="steel">
-                    On IOTA Wallet version v{version}
-                </Text>
+        <Overlay showModal title="Settings" closeOverlay={() => navigate('/')}>
+            <div className="flex h-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}
+                        >
+                            <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">
+                                    <span className="text-2xl">{item.icon}</span>
+                                </div>
+                            </CardImage>
+                            <CardBody title={item.title} subtitle={item.subtitle} />
+                            <CardAction type={CardActionType.Link} />
+                        </Card>
+                    ))}
+                    <ConfirmationModal
+                        isOpen={isLogoutDialogOpen}
+                        confirmText="Logout"
+                        confirmStyle="outlineWarning"
+                        title="Are you sure you want to Logout?"
+                        hint="You will need to set up all your accounts again."
+                        onResponse={async (confirmed) => {
+                            setIsLogoutDialogOpen(false);
+                            if (confirmed) {
+                                await logoutMutation.mutateAsync(undefined, {
+                                    onSuccess: () => {
+                                        window.location.reload();
+                                    },
+                                });
+                            }
+                        }}
+                    />
+                </div>
+                <div className="flex flex-col gap-y-lg">
+                    <FaucetRequestButton />
+                    <div className="flex flex-row items-center justify-center gap-x-md">
+                        <span className="text-label-sm text-neutral-40">
+                            IOTA Wallet v{version}
+                        </span>
+                        <Link
+                            to={ToS_LINK}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-label-sm text-primary-30"
+                        >
+                            Terms of Service
+                        </Link>
+                    </div>
+                </div>
             </div>
-        </MenuLayout>
+        </Overlay>
     );
 }
 
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 0c8d1e40fab..114a4591ff2 100644
--- a/apps/wallet/src/ui/app/components/menu/content/index.tsx
+++ b/apps/wallet/src/ui/app/components/menu/content/index.tsx
@@ -13,9 +13,7 @@ import { useOnKeyboardEvent } from '_hooks';
 import { useCallback } from 'react';
 import type { MouseEvent } from 'react';
 import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
-
 import { AutoLockAccounts } from './AutoLockAccounts';
-import { MoreOptions } from './MoreOptions';
 import { NetworkSettings } from './NetworkSettings';
 import WalletSettingsMenuList from './WalletSettingsMenuList';
 
@@ -51,7 +49,6 @@ function MenuContent() {
                         <Route path="/" element={<WalletSettingsMenuList />} />
                         <Route path="/network" element={<NetworkSettings />} />
                         <Route path="/auto-lock" element={<AutoLockAccounts />} />
-                        <Route path="/more-options" element={<MoreOptions />} />
                         <Route path="*" element={<Navigate to={menuHomeUrl} replace={true} />} />
                     </Routes>
                 </MainLocationContext.Provider>
diff --git a/apps/wallet/src/ui/app/shared/faucet/FaucetRequestButton.tsx b/apps/wallet/src/ui/app/shared/faucet/FaucetRequestButton.tsx
index 4b869cebbe1..f3f585bd2a4 100644
--- a/apps/wallet/src/ui/app/shared/faucet/FaucetRequestButton.tsx
+++ b/apps/wallet/src/ui/app/shared/faucet/FaucetRequestButton.tsx
@@ -2,23 +2,17 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Button, type ButtonProps } from '_app/shared/ButtonUI';
 import { useAppSelector } from '_hooks';
 import { getCustomNetwork } from '_src/shared/api-env';
 import { getNetwork } from '@iota/iota-sdk/client';
 import { FaucetRateLimitError } from '@iota/iota-sdk/faucet';
 import { toast } from 'react-hot-toast';
-
 import FaucetMessageInfo from './FaucetMessageInfo';
 import { useFaucetMutation } from './useFaucetMutation';
 import { useFaucetRateLimiter } from './useFaucetRateLimiter';
+import { Button, ButtonType } from '@iota/apps-ui-kit';
 
-export interface FaucetRequestButtonProps {
-    variant?: ButtonProps['variant'];
-    size?: ButtonProps['size'];
-}
-
-function FaucetRequestButton({ variant = 'primary', size = 'narrow' }: FaucetRequestButtonProps) {
+function FaucetRequestButton(): JSX.Element | null {
     const network = useAppSelector(({ app }) => app.network);
     const customRpc = useAppSelector(({ app }) => app.customRpc);
     const networkConfig = customRpc ? getCustomNetwork(customRpc) : getNetwork(network);
@@ -36,8 +30,7 @@ function FaucetRequestButton({ variant = 'primary', size = 'narrow' }: FaucetReq
     return mutation.enabled ? (
         <Button
             data-testid="faucet-request-button"
-            variant={variant}
-            size={size}
+            type={ButtonType.Secondary}
             disabled={isRateLimited}
             onClick={() => {
                 toast.promise(mutation.mutateAsync(), {
@@ -46,8 +39,7 @@ function FaucetRequestButton({ variant = 'primary', size = 'narrow' }: FaucetReq
                     error: (error) => <FaucetMessageInfo error={error.message} />,
                 });
             }}
-            loading={mutation.isMutating}
-            text={`Request ${networkConfig?.name} IOTA Tokens`}
+            text={`Request ${networkConfig?.name} Tokens`}
         />
     ) : null;
 }