diff --git a/packages/i18n/locales/en/settings.json b/packages/i18n/locales/en/settings.json
index 18202fa6..0cd87639 100644
--- a/packages/i18n/locales/en/settings.json
+++ b/packages/i18n/locales/en/settings.json
@@ -42,7 +42,7 @@
   "networkInputNameDescription": "Provide the name of the network",
   "networkInputNameLabel": "Name",
   "networkInputNamePlaceholder": "Network name",
-  "networkInputTypeDescription": "You can't change the type of network after you created it.",
+  "networkInputTypeDescription": "You cannot change the type of network after you created it.",
   "networkInputTypeLabel": "Network",
   "networkPageAddTitle": "Add Network",
   "networkPageEditTitle": "Edit network",
@@ -61,7 +61,7 @@
   "pageWalletName": "Wallets",
   "themeDark": "Dark",
   "themeLight": "Light",
-  "walletAddAccountDeriveDescription": "Derive an account from the Wallet's mnemonic",
+  "walletAddAccountDeriveDescription": "Derive an account from the Wallet's mnemonic",
   "walletAddAccountDeriveTitle": "Derive an account",
   "walletAddAccountImportDescription": "Import an account from a base58 secret key or byte array",
   "walletAddAccountImportLabel": "Enter secret key (base58 or byte array)",
diff --git a/packages/i18n/src/resources.d.ts b/packages/i18n/src/resources.d.ts
index 27e4ced7..58cd5271 100644
--- a/packages/i18n/src/resources.d.ts
+++ b/packages/i18n/src/resources.d.ts
@@ -106,7 +106,7 @@ interface Resources {
     networkInputNameDescription: 'Provide the name of the network'
     networkInputNameLabel: 'Name'
     networkInputNamePlaceholder: 'Network name'
-    networkInputTypeDescription: 'You can't change the type of network after you created it.'
+    networkInputTypeDescription: 'You cannot change the type of network after you created it.'
     networkInputTypeLabel: 'Network'
     networkPageAddTitle: 'Add Network'
     networkPageEditTitle: 'Edit network'
@@ -125,7 +125,7 @@ interface Resources {
     pageWalletName: 'Wallets'
     themeDark: 'Dark'
     themeLight: 'Light'
-    walletAddAccountDeriveDescription: 'Derive an account from the Wallet's mnemonic'
+    walletAddAccountDeriveDescription: "Derive an account from the Wallet's mnemonic"
     walletAddAccountDeriveTitle: 'Derive an account'
     walletAddAccountImportDescription: 'Import an account from a base58 secret key or byte array'
     walletAddAccountImportLabel: 'Enter secret key (base58 or byte array)'
diff --git a/packages/settings/src/settings-feature-general-danger-delete-database.tsx b/packages/settings/src/settings-feature-general-danger-delete-database.tsx
index d2bf424b..8b384783 100644
--- a/packages/settings/src/settings-feature-general-danger-delete-database.tsx
+++ b/packages/settings/src/settings-feature-general-danger-delete-database.tsx
@@ -13,7 +13,7 @@ export function SettingsFeatureGeneralDangerDeleteDatabase() {
   const navigate = useNavigate()
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-2 md:space-y-6">
       <div className="flex items-start gap-3">
         <Checkbox checked={accept} id={acceptId} onCheckedChange={() => setAccept((prev) => !prev)} />
         <div className="grid gap-2">
diff --git a/packages/settings/src/settings-feature-general.tsx b/packages/settings/src/settings-feature-general.tsx
index 29f9af05..0e855e14 100644
--- a/packages/settings/src/settings-feature-general.tsx
+++ b/packages/settings/src/settings-feature-general.tsx
@@ -13,8 +13,12 @@ export function SettingsFeatureGeneral() {
   const { t } = useTranslation('settings')
   const page = useSettingsPage({ pageId: 'general' })
   return (
-    <div className="space-y-4">
-      <UiCard contentProps={{ className: 'grid gap-4 space-y-4' }} description={page.description} title={page.name}>
+    <div className="space-y-2 md:space-y-4">
+      <UiCard
+        contentProps={{ className: 'space-y-2 md:space-y-6 md:py-2' }}
+        description={page.description}
+        title={page.name}
+      >
         <SettingsFeatureGeneralLanguage />
         <SettingsFeatureGeneralTheme />
         <SettingsFeatureGeneralApiEndpoint />
diff --git a/packages/settings/src/settings-feature-wallet-add-account.tsx b/packages/settings/src/settings-feature-wallet-add-account.tsx
index b1f6dbc7..421167e6 100644
--- a/packages/settings/src/settings-feature-wallet-add-account.tsx
+++ b/packages/settings/src/settings-feature-wallet-add-account.tsx
@@ -84,7 +84,7 @@ export function SettingsFeatureWalletAddAccount() {
       description={t(($) => $.walletPageAddAccountDescription)}
       title={<SettingsUiWalletItem item={item} />}
     >
-      <div className="space-y-6">
+      <div className="space-y-2 md:space-y-6">
         <Item variant="outline">
           <ItemMedia variant="icon">
             <AccountUiIcon type="Derived" />
diff --git a/packages/settings/src/settings-feature-wallet-details.tsx b/packages/settings/src/settings-feature-wallet-details.tsx
index 9f57f5ec..49757deb 100644
--- a/packages/settings/src/settings-feature-wallet-details.tsx
+++ b/packages/settings/src/settings-feature-wallet-details.tsx
@@ -7,13 +7,14 @@ import { UiError } from '@workspace/ui/components/ui-error'
 import { UiIcon } from '@workspace/ui/components/ui-icon'
 import { UiLoader } from '@workspace/ui/components/ui-loader'
 import { UiNotFound } from '@workspace/ui/components/ui-not-found'
-import { Link, useParams } from 'react-router'
+import { Link, useLocation, useParams } from 'react-router'
 import { useSortAccounts } from './data-access/use-sort-accounts.tsx'
 import { SettingsUiAccountTable } from './ui/settings-ui-account-table.tsx'
 import { SettingsUiWalletItem } from './ui/settings-ui-wallet-item.tsx'
 
 export function SettingsFeatureWalletDetails() {
   const { t } = useTranslation('settings')
+  const { pathname: from } = useLocation()
   const { walletId } = useParams() as { walletId: string }
   const { data: item, error, isError, isLoading } = useWalletFindUnique({ id: walletId })
   const accounts = useAccountLive({ walletId })
@@ -33,15 +34,16 @@ export function SettingsFeatureWalletDetails() {
     <UiCard
       backButtonTo="/settings/wallets"
       title={
-        <div className="flex w-full items-center justify-between">
-          <SettingsUiWalletItem item={item} />
+        <div className="flex w-full items-center justify-between whitespace-nowrap">
           <div className="flex items-center gap-2">
-            <Button asChild title={t(($) => $.actionEditWallet)} variant="outline">
-              <Link to={`./edit`}>
+            <SettingsUiWalletItem item={item} />
+            <Button asChild size="icon" title={t(($) => $.actionEditWallet)} variant="ghost">
+              <Link state={{ from }} to={`./edit`}>
                 <UiIcon className="size-4" icon="edit" />
-                {t(($) => $.actionEditWallet)}
               </Link>
             </Button>
+          </div>
+          <div className="flex items-center gap-2">
             <Button asChild title={t(($) => $.actionEditWalletMessage)} variant="outline">
               <Link to={`./add`}>
                 <UiIcon className="size-4" icon="add" />
@@ -52,7 +54,7 @@ export function SettingsFeatureWalletDetails() {
         </div>
       }
     >
-      <div className="space-y-6">
+      <div className="space-y-2 md:space-y-6">
         <SettingsUiAccountTable items={sorted} />
       </div>
     </UiCard>
diff --git a/packages/settings/src/settings-feature-wallet-generate.tsx b/packages/settings/src/settings-feature-wallet-generate.tsx
index d81ea40c..fdd92641 100644
--- a/packages/settings/src/settings-feature-wallet-generate.tsx
+++ b/packages/settings/src/settings-feature-wallet-generate.tsx
@@ -19,7 +19,7 @@ export function SettingsFeatureWalletGenerate() {
   return (
     <UiCard
       backButtonTo="/settings/wallets/create"
-      contentProps={{ className: 'grid gap-6' }}
+      contentProps={{ className: 'space-y-2 md:space-y-6' }}
       title={t(($) => $.walletPageGenerateTitle)}
     >
       <SettingsUiWalletMnemonicStrength setStrength={setStrength} strength={strength} />
diff --git a/packages/settings/src/settings-feature-wallet-list.tsx b/packages/settings/src/settings-feature-wallet-list.tsx
index ee651ff6..bb1bb4a3 100644
--- a/packages/settings/src/settings-feature-wallet-list.tsx
+++ b/packages/settings/src/settings-feature-wallet-list.tsx
@@ -1,3 +1,4 @@
+import { useSetting } from '@workspace/db-react/use-setting'
 import { useWalletDelete } from '@workspace/db-react/use-wallet-delete'
 import { useTranslation } from '@workspace/i18n'
 import { Button } from '@workspace/ui/components/button'
@@ -17,8 +18,8 @@ export function SettingsFeatureWalletList() {
     onError: () => toastError('Error deleting wallet'),
     onSuccess: () => toastSuccess('Wallet deleted'),
   })
-  const { wallets, active } = useActiveWallet()
-
+  const { wallets } = useActiveWallet()
+  const [activeId] = useSetting('activeWalletId')
   return wallets.length ? (
     <UiCard
       action={
@@ -30,7 +31,7 @@ export function SettingsFeatureWalletList() {
       title={page.name}
     >
       <SettingsUiWalletList
-        active={active}
+        activeId={activeId}
         deleteItem={(input) => deleteMutation.mutateAsync({ id: input.id })}
         items={wallets}
       />
diff --git a/packages/settings/src/settings-feature-wallet-update.tsx b/packages/settings/src/settings-feature-wallet-update.tsx
index de5a2833..a4962978 100644
--- a/packages/settings/src/settings-feature-wallet-update.tsx
+++ b/packages/settings/src/settings-feature-wallet-update.tsx
@@ -5,13 +5,15 @@ import { UiCard } from '@workspace/ui/components/ui-card'
 import { UiError } from '@workspace/ui/components/ui-error'
 import { UiLoader } from '@workspace/ui/components/ui-loader'
 import { UiNotFound } from '@workspace/ui/components/ui-not-found'
-import { useNavigate, useParams } from 'react-router'
+import { useLocation, useNavigate, useParams } from 'react-router'
 import { SettingsUiWalletFormUpdate } from './ui/settings-ui-wallet-form-update.tsx'
 
 export function SettingsFeatureWalletUpdate() {
   const { t } = useTranslation('settings')
   const navigate = useNavigate()
   const { walletId } = useParams() as { walletId: string }
+  const { state } = useLocation()
+  const from = state?.from ?? `/settings/wallets/${walletId}`
   const updateMutation = useWalletUpdate()
   const { data: item, error, isError, isLoading } = useWalletFindUnique({ id: walletId })
 
@@ -26,12 +28,12 @@ export function SettingsFeatureWalletUpdate() {
   }
 
   return (
-    <UiCard backButtonTo={`/settings/wallets/${item.id}`} title={t(($) => $.walletPageEditTitle)}>
+    <UiCard backButtonTo={from} title={t(($) => $.walletPageEditTitle)}>
       <SettingsUiWalletFormUpdate
         item={item}
         submit={async (input) =>
           await updateMutation.mutateAsync({ id: item.id, input }).then(() => {
-            navigate(`/settings/wallets/${item.id}`)
+            navigate(from)
           })
         }
       />
diff --git a/packages/settings/src/ui/settings-ui-network-form-create.tsx b/packages/settings/src/ui/settings-ui-network-form-create.tsx
index e8892add..fc688499 100644
--- a/packages/settings/src/ui/settings-ui-network-form-create.tsx
+++ b/packages/settings/src/ui/settings-ui-network-form-create.tsx
@@ -28,7 +28,7 @@ export function SettingsUiNetworkFormCreate({ submit }: { submit: (input: Networ
 
   return (
     <Form {...form}>
-      <form className="flex flex-col gap-6" onSubmit={form.handleSubmit((input) => submit(input))}>
+      <form className="space-y-2 md:space-y-6" onSubmit={form.handleSubmit((input) => submit(input))}>
         <FormField
           control={form.control}
           name="type"
diff --git a/packages/settings/src/ui/settings-ui-network-form-update.tsx b/packages/settings/src/ui/settings-ui-network-form-update.tsx
index 6cf1698f..7bf754ea 100644
--- a/packages/settings/src/ui/settings-ui-network-form-update.tsx
+++ b/packages/settings/src/ui/settings-ui-network-form-update.tsx
@@ -34,7 +34,7 @@ export function SettingsUiNetworkFormUpdate({
 
   return (
     <Form {...form}>
-      <form className="flex flex-col gap-6" onSubmit={form.handleSubmit((input) => submit(input))}>
+      <form className="flex flex-col space-y-2 md:space-y-6" onSubmit={form.handleSubmit((input) => submit(input))}>
         <FormItem className="flex w-full flex-col gap-2 py-1">
           <FormLabel>{t(($) => $.networkInputTypeLabel)}</FormLabel>
           <FormControl>
diff --git a/packages/settings/src/ui/settings-ui-network-item.tsx b/packages/settings/src/ui/settings-ui-network-item.tsx
new file mode 100644
index 00000000..ea199d63
--- /dev/null
+++ b/packages/settings/src/ui/settings-ui-network-item.tsx
@@ -0,0 +1,12 @@
+import type { Network } from '@workspace/db/network/network'
+
+import { UiAvatar } from '@workspace/ui/components/ui-avatar'
+
+export function SettingsUiNetworkItem({ item }: { item: Network }) {
+  return (
+    <div className="flex items-center gap-2 whitespace-nowrap">
+      <UiAvatar label={item.name} />
+      {item.name}
+    </div>
+  )
+}
diff --git a/packages/settings/src/ui/settings-ui-network-list-item.tsx b/packages/settings/src/ui/settings-ui-network-list-item.tsx
new file mode 100644
index 00000000..2bb374a4
--- /dev/null
+++ b/packages/settings/src/ui/settings-ui-network-list-item.tsx
@@ -0,0 +1,54 @@
+import type { Network } from '@workspace/db/network/network'
+import { useTranslation } from '@workspace/i18n'
+import { Button } from '@workspace/ui/components/button'
+import { Item, ItemActions, ItemContent, ItemTitle } from '@workspace/ui/components/item'
+import { UiConfirm } from '@workspace/ui/components/ui-confirm'
+import { UiIcon } from '@workspace/ui/components/ui-icon'
+import { Link } from 'react-router'
+import { SettingsUiNetworkItem } from './settings-ui-network-item.tsx'
+
+export function SettingsUiNetworkListItem({
+  activeId,
+  deleteItem,
+  item,
+}: {
+  activeId: null | string
+  deleteItem: (item: Network) => Promise<void>
+  item: Network
+}) {
+  const { t } = useTranslation('settings')
+  return (
+    <Item
+      className="flex-row items-center items-stretch"
+      key={item.id}
+      role="listitem"
+      variant={activeId === item.id ? 'muted' : 'outline'}
+    >
+      <ItemContent className="flex justify-center">
+        <ItemTitle>
+          <Link to={`./${item.id}`}>
+            <SettingsUiNetworkItem item={item} />
+          </Link>
+        </ItemTitle>
+      </ItemContent>
+      <ItemActions>
+        <Button asChild size="icon" title={t(($) => $.actionEdit)} variant="outline">
+          <Link to={`./${item.id}`}>
+            <UiIcon className="size-4" icon="edit" />
+          </Link>
+        </Button>
+        <UiConfirm
+          action={async () => await deleteItem(item)}
+          actionLabel="Delete"
+          actionVariant="destructive"
+          description="This action cannot be reversed."
+          title="Are you sure you want to delete this network?"
+        >
+          <Button size="icon" title={t(($) => $.actionDelete)} variant="outline">
+            <UiIcon className="size-4 text-red-500" icon="delete" />
+          </Button>
+        </UiConfirm>
+      </ItemActions>
+    </Item>
+  )
+}
diff --git a/packages/settings/src/ui/settings-ui-network-list.tsx b/packages/settings/src/ui/settings-ui-network-list.tsx
index f9785b5b..b1426d4c 100644
--- a/packages/settings/src/ui/settings-ui-network-list.tsx
+++ b/packages/settings/src/ui/settings-ui-network-list.tsx
@@ -1,10 +1,7 @@
 import type { Network } from '@workspace/db/network/network'
-import { useTranslation } from '@workspace/i18n'
-import { Button } from '@workspace/ui/components/button'
-import { Item, ItemActions, ItemContent, ItemGroup, ItemTitle } from '@workspace/ui/components/item'
-import { UiConfirm } from '@workspace/ui/components/ui-confirm'
-import { UiIcon } from '@workspace/ui/components/ui-icon'
-import { Link } from 'react-router'
+
+import { ItemGroup } from '@workspace/ui/components/item'
+import { SettingsUiNetworkListItem } from './settings-ui-network-list-item.tsx'
 
 export function SettingsUiNetworkList({
   activeId,
@@ -15,40 +12,10 @@ export function SettingsUiNetworkList({
   deleteItem: (item: Network) => Promise<void>
   items: Network[]
 }) {
-  const { t } = useTranslation('settings')
   return (
     <ItemGroup className="gap-2 md:gap-4">
       {items.map((item) => (
-        <Item
-          className="flex-row items-center items-stretch"
-          key={item.id}
-          role="listitem"
-          variant={activeId === item.id ? 'muted' : 'outline'}
-        >
-          <ItemContent>
-            <ItemTitle className="line-clamp-1">
-              <Link to={`./${item.id}`}>{item.name}</Link>
-            </ItemTitle>
-          </ItemContent>
-          <ItemActions>
-            <Button asChild size="icon" title={t(($) => $.actionEdit)} variant="outline">
-              <Link to={`./${item.id}`}>
-                <UiIcon className="size-4" icon="edit" />
-              </Link>
-            </Button>
-            <UiConfirm
-              action={async () => await deleteItem(item)}
-              actionLabel="Delete"
-              actionVariant="destructive"
-              description="This action cannot be reversed."
-              title="Are you sure you want to delete this network?"
-            >
-              <Button size="icon" title={t(($) => $.actionDelete)} variant="outline">
-                <UiIcon className="size-4 text-red-500" icon="delete" />
-              </Button>
-            </UiConfirm>
-          </ItemActions>
-        </Item>
+        <SettingsUiNetworkListItem activeId={activeId} deleteItem={deleteItem} item={item} key={item.id} />
       ))}
     </ItemGroup>
   )
diff --git a/packages/settings/src/ui/settings-ui-wallet-create-options.tsx b/packages/settings/src/ui/settings-ui-wallet-create-options.tsx
index c6e778d2..737b73c4 100644
--- a/packages/settings/src/ui/settings-ui-wallet-create-options.tsx
+++ b/packages/settings/src/ui/settings-ui-wallet-create-options.tsx
@@ -6,7 +6,7 @@ import { SettingsUiWalletCreateLink } from './settings-ui-wallet-create-link.tsx
 export function SettingsUiWalletCreateOptions() {
   const { t } = useTranslation('settings')
   return (
-    <div className="grid gap-4">
+    <div className="space-y-2 md:space-y-6">
       <SettingsUiWalletCreateHeader icon="mnemonic" label={t(($) => $.walletCreateHeaderSeed)} />
       <SettingsUiWalletCreateLink
         description={t(($) => $.walletCreateGenerateDescription)}
diff --git a/packages/settings/src/ui/settings-ui-wallet-form-generate.tsx b/packages/settings/src/ui/settings-ui-wallet-form-generate.tsx
index e3baeeee..81de737b 100644
--- a/packages/settings/src/ui/settings-ui-wallet-form-generate.tsx
+++ b/packages/settings/src/ui/settings-ui-wallet-form-generate.tsx
@@ -38,7 +38,7 @@ export function SettingsUiWalletFormGenerate({
 
   return (
     <Form {...form}>
-      <form className="flex flex-col gap-6" onSubmit={form.handleSubmit((input) => submit(input))}>
+      <form className="space-y-2 md:space-y-6" onSubmit={form.handleSubmit((input) => submit(input))}>
         <FormField
           control={form.control}
           name="name"
diff --git a/packages/settings/src/ui/settings-ui-wallet-form-import.tsx b/packages/settings/src/ui/settings-ui-wallet-form-import.tsx
index c49adce8..a1f35017 100644
--- a/packages/settings/src/ui/settings-ui-wallet-form-import.tsx
+++ b/packages/settings/src/ui/settings-ui-wallet-form-import.tsx
@@ -41,7 +41,7 @@ export function SettingsUiWalletFormImport({
 
   return (
     <Form {...form}>
-      <form className="flex flex-col gap-6" onSubmit={form.handleSubmit((input) => submit(input, redirect))}>
+      <form className="space-y-2 md:space-y-6" onSubmit={form.handleSubmit((input) => submit(input, redirect))}>
         <FormField
           control={form.control}
           name="name"
diff --git a/packages/settings/src/ui/settings-ui-wallet-form-update.tsx b/packages/settings/src/ui/settings-ui-wallet-form-update.tsx
index e5b749dd..dcf22d7d 100644
--- a/packages/settings/src/ui/settings-ui-wallet-form-update.tsx
+++ b/packages/settings/src/ui/settings-ui-wallet-form-update.tsx
@@ -31,7 +31,7 @@ export function SettingsUiWalletFormUpdate({
 
   return (
     <Form {...form}>
-      <form className="flex flex-col gap-6" onSubmit={form.handleSubmit((input) => submit(input))}>
+      <form className="space-y-2 md:space-y-6" onSubmit={form.handleSubmit((input) => submit(input))}>
         <FormField
           control={form.control}
           name="name"
diff --git a/packages/settings/src/ui/settings-ui-wallet-item.tsx b/packages/settings/src/ui/settings-ui-wallet-item.tsx
index 90637d37..3654cfc7 100644
--- a/packages/settings/src/ui/settings-ui-wallet-item.tsx
+++ b/packages/settings/src/ui/settings-ui-wallet-item.tsx
@@ -4,7 +4,7 @@ import { UiAvatar } from '@workspace/ui/components/ui-avatar'
 
 export function SettingsUiWalletItem({ item }: { item: Wallet }) {
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex items-center gap-2 whitespace-nowrap">
       <UiAvatar label={item.name} />
       {item.name}
     </div>
diff --git a/packages/settings/src/ui/settings-ui-wallet-list-item.tsx b/packages/settings/src/ui/settings-ui-wallet-list-item.tsx
index adc98904..10fb69f2 100644
--- a/packages/settings/src/ui/settings-ui-wallet-list-item.tsx
+++ b/packages/settings/src/ui/settings-ui-wallet-list-item.tsx
@@ -4,24 +4,25 @@ import { Button } from '@workspace/ui/components/button'
 import { Item, ItemActions, ItemContent, ItemTitle } from '@workspace/ui/components/item'
 import { UiConfirm } from '@workspace/ui/components/ui-confirm'
 import { UiIcon } from '@workspace/ui/components/ui-icon'
-import { Link } from 'react-router'
+import { Link, useLocation } from 'react-router'
 import { SettingsUiExportWalletMnemonic } from './settings-ui-export-wallet-mnemonic.tsx'
 import { SettingsUiWalletItem } from './settings-ui-wallet-item.tsx'
 
 export function SettingsUiWalletListItem({
-  active,
+  activeId,
   deleteItem,
   item,
 }: {
-  active: Wallet | null
+  activeId: null | string
   deleteItem: (item: Wallet) => Promise<void>
   item: Wallet
 }) {
+  const { pathname: from } = useLocation()
   const { t } = useTranslation('settings')
   return (
-    <Item key={item.id} role="listitem" variant={active?.id === item.id ? 'muted' : 'outline'}>
+    <Item key={item.id} role="listitem" variant={activeId === item.id ? 'muted' : 'outline'}>
       <ItemContent>
-        <ItemTitle className="line-clamp-1">
+        <ItemTitle>
           <Link to={`./${item.id}`}>
             <SettingsUiWalletItem item={item} />
           </Link>
@@ -30,7 +31,7 @@ export function SettingsUiWalletListItem({
       <ItemActions>
         <SettingsUiExportWalletMnemonic wallet={item} />
         <Button asChild size="icon" title={t(($) => $.actionEdit)} variant="outline">
-          <Link to={`./${item.id}/edit`}>
+          <Link state={{ from }} to={`./${item.id}/edit`}>
             <UiIcon className="size-4" icon="edit" />
           </Link>
         </Button>
diff --git a/packages/settings/src/ui/settings-ui-wallet-list.tsx b/packages/settings/src/ui/settings-ui-wallet-list.tsx
index caefb2af..c935b3da 100644
--- a/packages/settings/src/ui/settings-ui-wallet-list.tsx
+++ b/packages/settings/src/ui/settings-ui-wallet-list.tsx
@@ -2,22 +2,21 @@ import type { Account } from '@workspace/db/account/account'
 import type { Wallet } from '@workspace/db/wallet/wallet'
 
 import { ItemGroup } from '@workspace/ui/components/item'
-
 import { SettingsUiWalletListItem } from './settings-ui-wallet-list-item.tsx'
 
 export function SettingsUiWalletList({
-  active,
+  activeId,
   deleteItem,
   items,
 }: {
-  active: Wallet | null
+  activeId: null | string
   deleteItem: (item: Wallet) => Promise<void>
   items: Array<{ accounts?: Account[] } & Wallet>
 }) {
   return (
     <ItemGroup className="gap-2 md:gap-4">
       {items.map((item) => (
-        <SettingsUiWalletListItem active={active} deleteItem={deleteItem} item={item} key={item.id} />
+        <SettingsUiWalletListItem activeId={activeId} deleteItem={deleteItem} item={item} key={item.id} />
       ))}
     </ItemGroup>
   )
diff --git a/packages/shell/src/ui/shell-ui-layout.tsx b/packages/shell/src/ui/shell-ui-layout.tsx
index a60aee53..425b11dd 100644
--- a/packages/shell/src/ui/shell-ui-layout.tsx
+++ b/packages/shell/src/ui/shell-ui-layout.tsx
@@ -34,7 +34,7 @@ export function ShellUiLayout({ browser, context }: ShellFeatureProps) {
     <div className="flex h-full flex-col items-stretch justify-between">
       <ShellUiWarningExperimental />
       <ShellUiCommandMenu />
-      <header className="flex items-center justify-between bg-secondary/50">
+      <header className="flex items-center justify-between bg-secondary/30">
         <ShellUiMenu />
         <div className="pr-2">
           <ShellUiMenuActions browser={browser} context={context} />
@@ -43,12 +43,12 @@ export function ShellUiLayout({ browser, context }: ShellFeatureProps) {
       <main className="flex-1 overflow-y-auto p-1 md:p-2 lg:p-4">
         <Outlet />
       </main>
-      <footer className="flex items-center justify-between bg-secondary/50">
+      <footer className="flex items-center justify-between bg-secondary/30">
         {links.map(({ icon, label, to }) => (
           <NavLink
             className={({ isActive }) =>
               cn('flex flex-1 flex-col items-center gap-1 truncate pt-2 pb-1 text-xs md:gap-2 md:text-md', {
-                'bg-secondary/60 font-semibold': isActive,
+                'bg-secondary/50 font-semibold': isActive,
               })
             }
             key={to}