diff --git a/apps/explorer/src/components/footer/Footer.tsx b/apps/explorer/src/components/footer/Footer.tsx
index 8779d6cc52f..93a2f629ed1 100644
--- a/apps/explorer/src/components/footer/Footer.tsx
+++ b/apps/explorer/src/components/footer/Footer.tsx
@@ -28,7 +28,7 @@ function FooterLinks(): JSX.Element {
     );
 }
 
-function Footer(): JSX.Element {
+export function Footer(): JSX.Element {
     return (
         <footer className="sticky top-[100%] bg-neutral-96 px-5 py-10 md:px-10 md:py-14 dark:bg-neutral-10">
             <nav className="container flex flex-col justify-center gap-md md:gap-lg">
@@ -55,5 +55,3 @@ function Footer(): JSX.Element {
         </footer>
     );
 }
-
-export default Footer;
diff --git a/apps/explorer/src/components/header/Header.tsx b/apps/explorer/src/components/header/Header.tsx
index a2f95b165d5..9d1d428f7cd 100644
--- a/apps/explorer/src/components/header/Header.tsx
+++ b/apps/explorer/src/components/header/Header.tsx
@@ -3,12 +3,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { NetworkSelector } from '../network';
-import Search from '../search/Search';
+import { Search } from '../search';
 import { LinkWithQuery } from '~/components/ui';
 import { ThemedIotaLogo } from '~/components';
 import { ThemeSwitcher } from '@iota/core';
 
-function Header(): JSX.Element {
+export function Header(): JSX.Element {
     return (
         <header className="flex h-header justify-center overflow-visible backdrop-blur-lg">
             <div className="container flex h-full flex-1 items-center justify-between gap-5">
@@ -30,5 +30,3 @@ function Header(): JSX.Element {
         </header>
     );
 }
-
-export default Header;
diff --git a/apps/explorer/src/components/layout/PageLayout.tsx b/apps/explorer/src/components/layout/PageLayout.tsx
index 8b8192d799e..81de420252f 100644
--- a/apps/explorer/src/components/layout/PageLayout.tsx
+++ b/apps/explorer/src/components/layout/PageLayout.tsx
@@ -7,8 +7,8 @@ import { useAppsBackend, Feature } from '@iota/core';
 import { Network } from '@iota/iota-sdk/client';
 import { useQuery } from '@tanstack/react-query';
 import { type ReactNode, useRef } from 'react';
-import Footer from '../footer/Footer';
-import Header from '../header/Header';
+import { Footer } from '../footer';
+import { Header } from '../header';
 import { useNetworkContext } from '~/contexts';
 import { InfoBox, InfoBoxStyle, InfoBoxType, LoadingIndicator } from '@iota/apps-ui-kit';
 import { Info } from '@iota/ui-icons';
diff --git a/apps/explorer/src/components/owned-coins/CoinItem.tsx b/apps/explorer/src/components/owned-coins/CoinItem.tsx
index d745b9202c3..c06e2d6def5 100644
--- a/apps/explorer/src/components/owned-coins/CoinItem.tsx
+++ b/apps/explorer/src/components/owned-coins/CoinItem.tsx
@@ -12,7 +12,7 @@ interface CoinItemProps {
     coin: CoinStruct;
 }
 
-export default function CoinItem({ coin }: CoinItemProps): JSX.Element {
+export function CoinItem({ coin }: CoinItemProps): JSX.Element {
     const [formattedBalance, symbol] = useFormatCoin(coin.balance, coin.coinType);
     return (
         <KeyValueInfo
diff --git a/apps/explorer/src/components/owned-coins/OwnedCoinView.tsx b/apps/explorer/src/components/owned-coins/OwnedCoinView.tsx
index d2a53c74e03..0e01a6834bd 100644
--- a/apps/explorer/src/components/owned-coins/OwnedCoinView.tsx
+++ b/apps/explorer/src/components/owned-coins/OwnedCoinView.tsx
@@ -7,7 +7,7 @@ import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import clsx from 'clsx';
 import { useState } from 'react';
 import { type CoinBalanceVerified } from './OwnedCoins';
-import CoinsPanel from './OwnedCoinsPanel';
+import { CoinsPanel } from './OwnedCoinsPanel';
 import {
     Card,
     CardAction,
@@ -24,7 +24,7 @@ type OwnedCoinViewProps = {
     id: string;
 };
 
-export default function OwnedCoinView({ coin, id }: OwnedCoinViewProps): JSX.Element {
+export function OwnedCoinView({ coin, id }: OwnedCoinViewProps): JSX.Element {
     const isIotaCoin = coin.coinType === IOTA_TYPE_ARG;
     const [areCoinDetailsOpen, setAreCoinDetailsOpen] = useState<boolean>(isIotaCoin);
     const [formattedTotalBalance, symbol] = useFormatCoin(coin.totalBalance, coin.coinType);
diff --git a/apps/explorer/src/components/owned-coins/OwnedCoins.tsx b/apps/explorer/src/components/owned-coins/OwnedCoins.tsx
index 619fd8e9864..e6f4d2059d6 100644
--- a/apps/explorer/src/components/owned-coins/OwnedCoins.tsx
+++ b/apps/explorer/src/components/owned-coins/OwnedCoins.tsx
@@ -9,7 +9,7 @@ import { useNetwork } from '~/hooks';
 import { normalizeIotaAddress } from '@iota/iota-sdk/utils';
 import { FilterList, Warning } from '@iota/ui-icons';
 import { useMemo, useState } from 'react';
-import OwnedCoinView from './OwnedCoinView';
+import { OwnedCoinView } from './OwnedCoinView';
 import {
     Button,
     ButtonType,
diff --git a/apps/explorer/src/components/owned-coins/OwnedCoinsPanel.tsx b/apps/explorer/src/components/owned-coins/OwnedCoinsPanel.tsx
index 2f2895ab885..5d9fd09d144 100644
--- a/apps/explorer/src/components/owned-coins/OwnedCoinsPanel.tsx
+++ b/apps/explorer/src/components/owned-coins/OwnedCoinsPanel.tsx
@@ -5,7 +5,7 @@
 import { useElementDimensions, useGetCoins, useOnScreen } from '@iota/core';
 import clsx from 'clsx';
 import { useEffect, useRef } from 'react';
-import CoinItem from './CoinItem';
+import { CoinItem } from './CoinItem';
 import { LoadingIndicator } from '@iota/apps-ui-kit';
 
 const MIN_CONTAINER_WIDTH_SIZE = 500;
@@ -15,7 +15,7 @@ type CoinsPanelProps = {
     id: string;
 };
 
-export default function CoinsPanel({ coinType, id }: CoinsPanelProps): JSX.Element {
+export function CoinsPanel({ coinType, id }: CoinsPanelProps): JSX.Element {
     const containerRef = useRef(null);
     const coinsSectionRef = useRef(null);
     const { isIntersecting } = useOnScreen(containerRef);
diff --git a/apps/explorer/src/components/search/Search.tsx b/apps/explorer/src/components/search/Search.tsx
index d2a0f41eebf..61a5bfaa2d4 100644
--- a/apps/explorer/src/components/search/Search.tsx
+++ b/apps/explorer/src/components/search/Search.tsx
@@ -10,7 +10,7 @@ import { useDebouncedValue } from '~/hooks/useDebouncedValue';
 import { useSearch } from '~/hooks/useSearch';
 import { ampli } from '~/lib/utils';
 
-function Search(): JSX.Element {
+export function Search(): JSX.Element {
     const [query, setQuery] = useState('');
     const debouncedQuery = useDebouncedValue(query);
     const { isPending, data: results } = useSearch(debouncedQuery);
@@ -58,5 +58,3 @@ function Search(): JSX.Element {
         />
     );
 }
-
-export default Search;
diff --git a/apps/explorer/src/components/ui/image/Image.tsx b/apps/explorer/src/components/ui/image/Image.tsx
index 63e18775839..0f277a86298 100644
--- a/apps/explorer/src/components/ui/image/Image.tsx
+++ b/apps/explorer/src/components/ui/image/Image.tsx
@@ -8,8 +8,7 @@ import { cva, cx, type VariantProps } from 'class-variance-authority';
 import clsx from 'clsx';
 import { useAnimate } from 'framer-motion';
 import { type ImgHTMLAttributes, useEffect, useState } from 'react';
-
-import useImage from '~/hooks/useImage';
+import { useImage } from '~/hooks';
 import { ImageVisibility } from '~/lib/enums';
 
 const imageStyles = cva(null, {
diff --git a/apps/explorer/src/hooks/useImage.ts b/apps/explorer/src/hooks/useImage.ts
index f750e4ac715..50018b6568f 100644
--- a/apps/explorer/src/hooks/useImage.ts
+++ b/apps/explorer/src/hooks/useImage.ts
@@ -47,5 +47,3 @@ export function useImage({ src = '', moderate = true }: UseImageProps) {
 
     return { moderation, url: formatted, status, ref };
 }
-
-export default useImage;
diff --git a/apps/explorer/src/pages/address-result/AddressResult.tsx b/apps/explorer/src/pages/address-result/AddressResult.tsx
index 32808a8d796..7f55716dbaf 100644
--- a/apps/explorer/src/pages/address-result/AddressResult.tsx
+++ b/apps/explorer/src/pages/address-result/AddressResult.tsx
@@ -47,7 +47,7 @@ function AddressResult({ address }: { address: string }): JSX.Element {
     );
 }
 
-export default function AddressResultPage(): JSX.Element {
+export function AddressResultPage(): JSX.Element {
     const { id } = useParams();
 
     return (
diff --git a/apps/explorer/src/pages/checkpoints/CheckpointDetail.tsx b/apps/explorer/src/pages/checkpoints/CheckpointDetail.tsx
index 7b23c9054b1..454232d3591 100644
--- a/apps/explorer/src/pages/checkpoints/CheckpointDetail.tsx
+++ b/apps/explorer/src/pages/checkpoints/CheckpointDetail.tsx
@@ -37,7 +37,7 @@ enum NestedTabs {
     Aggregated = 'aggregated',
 }
 
-export default function CheckpointDetail(): JSX.Element {
+export function CheckpointDetail(): JSX.Element {
     const [activeFeesTabId, setActiveFeesTabId] = useState(FeesTabs.GasAndStorageFees);
     const [activeDetailsTabId, setActiveDetailsTabId] = useState(DetailsTabs.Details);
     const [activeNestedTabId, setActiveNestedTabId] = useState(NestedTabs.Aggregated);
diff --git a/apps/explorer/src/pages/epochs/EpochDetail.tsx b/apps/explorer/src/pages/epochs/EpochDetail.tsx
index cf6b074838d..35c091262d2 100644
--- a/apps/explorer/src/pages/epochs/EpochDetail.tsx
+++ b/apps/explorer/src/pages/epochs/EpochDetail.tsx
@@ -35,7 +35,7 @@ enum EpochTabs {
     Validators = 'validators',
 }
 
-export default function EpochDetail() {
+export function EpochDetail() {
     const [activeTabId, setActiveTabId] = useState(EpochTabs.Checkpoints);
     const { id } = useParams();
     const enhancedRpc = useEnhancedRpcClient();
diff --git a/apps/explorer/src/pages/home/Home.tsx b/apps/explorer/src/pages/home/Home.tsx
index 1cee4ba88ab..d89625da7b0 100644
--- a/apps/explorer/src/pages/home/Home.tsx
+++ b/apps/explorer/src/pages/home/Home.tsx
@@ -21,7 +21,7 @@ import { useNetwork } from '~/hooks';
 
 const TRANSACTIONS_LIMIT = 15;
 
-function Home(): JSX.Element {
+export function Home(): JSX.Element {
     const [network] = useNetwork();
     const isIotaTokenCardEnabled = network === Network.Mainnet;
     return (
@@ -77,5 +77,3 @@ function Home(): JSX.Element {
         />
     );
 }
-
-export default Home;
diff --git a/apps/explorer/src/pages/index.tsx b/apps/explorer/src/pages/index.tsx
index c1e40edb438..d2bd6722775 100644
--- a/apps/explorer/src/pages/index.tsx
+++ b/apps/explorer/src/pages/index.tsx
@@ -4,13 +4,13 @@
 
 import { wrapCreateBrowserRouter } from '@sentry/react';
 import { createBrowserRouter, Navigate, useLocation, useParams } from 'react-router-dom';
-import AddressResult from './address-result/AddressResult';
-import CheckpointDetail from './checkpoints/CheckpointDetail';
-import EpochDetail from './epochs/EpochDetail';
-import Home from './home/Home';
+import { AddressResultPage } from './address-result/AddressResult';
+import { CheckpointDetail } from './checkpoints/CheckpointDetail';
+import { EpochDetail } from './epochs/EpochDetail';
+import { Home } from './home/Home';
 import { ObjectResult } from './object-result/ObjectResult';
 import { Recent } from './recent';
-import TransactionResult from './transaction-result/TransactionResult';
+import { TransactionResult } from './transaction-result/TransactionResult';
 import { ValidatorDetails } from './validator/ValidatorDetails';
 import { ValidatorPageResult } from './validators/Validators';
 import { Layout } from '~/components';
@@ -39,7 +39,7 @@ export const router = sentryCreateBrowserRouter([
             { path: 'epoch/current', element: <EpochDetail /> },
             { path: 'txblock/:id', element: <TransactionResult /> },
             { path: 'epoch/:id', element: <EpochDetail /> },
-            { path: 'address/:id', element: <AddressResult /> },
+            { path: 'address/:id', element: <AddressResultPage /> },
             { path: 'validators', element: <ValidatorPageResult /> },
             { path: 'validator/:id', element: <ValidatorDetails /> },
         ],
diff --git a/apps/explorer/src/pages/object-result/ObjectResult.tsx b/apps/explorer/src/pages/object-result/ObjectResult.tsx
index 147ba0fc4d5..b933c96f1e2 100644
--- a/apps/explorer/src/pages/object-result/ObjectResult.tsx
+++ b/apps/explorer/src/pages/object-result/ObjectResult.tsx
@@ -8,8 +8,7 @@ import { ErrorBoundary, PageLayout } from '~/components';
 import { PageHeader } from '~/components/ui';
 import { ObjectView } from '~/pages/object-result/views/ObjectView';
 import { translate, type DataType } from './ObjectResultType';
-import PkgView from './views/PkgView';
-import { TokenView } from './views/TokenView';
+import { PkgView, TokenView } from './views';
 import { InfoBox, InfoBoxStyle, InfoBoxType, LoadingIndicator } from '@iota/apps-ui-kit';
 import { Warning } from '@iota/ui-icons';
 
diff --git a/apps/explorer/src/pages/object-result/views/PkgView.tsx b/apps/explorer/src/pages/object-result/views/PkgView.tsx
index 7710894489a..56beb84b038 100644
--- a/apps/explorer/src/pages/object-result/views/PkgView.tsx
+++ b/apps/explorer/src/pages/object-result/views/PkgView.tsx
@@ -39,7 +39,7 @@ interface PkgViewProps {
     data: DataType;
 }
 
-function PkgView({ data }: PkgViewProps): JSX.Element {
+export function PkgView({ data }: PkgViewProps): JSX.Element {
     const [selectedSplitPanelOrientation, setSplitPanelOrientation] = useState(
         SPLIT_PANELS_ORIENTATION[1].value,
     );
@@ -145,5 +145,3 @@ function PkgView({ data }: PkgViewProps): JSX.Element {
         </div>
     );
 }
-
-export default PkgView;
diff --git a/apps/explorer/src/pages/object-result/views/index.ts b/apps/explorer/src/pages/object-result/views/index.ts
new file mode 100644
index 00000000000..08b740d5988
--- /dev/null
+++ b/apps/explorer/src/pages/object-result/views/index.ts
@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './PkgView';
+export * from './TokenView';
diff --git a/apps/explorer/src/pages/transaction-result/TransactionResult.tsx b/apps/explorer/src/pages/transaction-result/TransactionResult.tsx
index 2abdd1770a9..62e6cf4ab45 100644
--- a/apps/explorer/src/pages/transaction-result/TransactionResult.tsx
+++ b/apps/explorer/src/pages/transaction-result/TransactionResult.tsx
@@ -40,7 +40,7 @@ function TransactionResultPageHeader({
     );
 }
 
-export default function TransactionResult(): JSX.Element {
+export function TransactionResult(): JSX.Element {
     const { id } = useParams();
     const {
         isPending,
diff --git a/apps/ui-kit/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx b/apps/ui-kit/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx
index d15da2af5de..0b7ece824cf 100644
--- a/apps/ui-kit/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx
+++ b/apps/ui-kit/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx
@@ -154,5 +154,3 @@ export function KeyValueInfo({
         </div>
     );
 }
-
-export default KeyValueInfo;
diff --git a/apps/wallet-dashboard/components/AmountBox.tsx b/apps/wallet-dashboard/components/AmountBox.tsx
index 8db7bb609d0..a59926b1357 100644
--- a/apps/wallet-dashboard/components/AmountBox.tsx
+++ b/apps/wallet-dashboard/components/AmountBox.tsx
@@ -8,7 +8,7 @@ interface AmountBoxProps {
     amount: string;
 }
 
-function AmountBox({ title, amount }: AmountBoxProps): JSX.Element {
+export function AmountBox({ title, amount }: AmountBoxProps): JSX.Element {
     return (
         <div className="flex items-center justify-center gap-4 pt-12">
             <Box title={title}>
@@ -17,5 +17,3 @@ function AmountBox({ title, amount }: AmountBoxProps): JSX.Element {
         </div>
     );
 }
-
-export default AmountBox;
diff --git a/apps/wallet-dashboard/components/Box.tsx b/apps/wallet-dashboard/components/Box.tsx
index 3b9b285ea6e..cf2df3ae976 100644
--- a/apps/wallet-dashboard/components/Box.tsx
+++ b/apps/wallet-dashboard/components/Box.tsx
@@ -8,7 +8,7 @@ interface BoxProps {
     title?: string;
 }
 
-function Box({ children, title }: BoxProps): JSX.Element {
+export function Box({ children, title }: BoxProps): JSX.Element {
     return (
         <div className="flex flex-col items-center gap-2 rounded-lg border border-white p-4">
             {title && <h2>{title}</h2>}
@@ -16,5 +16,3 @@ function Box({ children, title }: BoxProps): JSX.Element {
         </div>
     );
 }
-
-export default Box;
diff --git a/apps/wallet-dashboard/components/Buttons/Button.tsx b/apps/wallet-dashboard/components/Buttons/Button.tsx
index b15149e1201..78c21b256f2 100644
--- a/apps/wallet-dashboard/components/Buttons/Button.tsx
+++ b/apps/wallet-dashboard/components/Buttons/Button.tsx
@@ -9,7 +9,7 @@ interface ButtonProps {
     disabled?: boolean;
 }
 
-function Button({ onClick, children, disabled }: ButtonProps): JSX.Element {
+export function Button({ onClick, children, disabled }: ButtonProps): JSX.Element {
     return (
         <button
             onClick={onClick}
@@ -20,5 +20,3 @@ function Button({ onClick, children, disabled }: ButtonProps): JSX.Element {
         </button>
     );
 }
-
-export default Button;
diff --git a/apps/wallet-dashboard/components/Buttons/index.ts b/apps/wallet-dashboard/components/Buttons/index.ts
index ecd1cf7a7ce..0ecf88b8b19 100644
--- a/apps/wallet-dashboard/components/Buttons/index.ts
+++ b/apps/wallet-dashboard/components/Buttons/index.ts
@@ -1,4 +1,4 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export { default as Button } from './Button';
+export * from './Button';
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountDialogLayout.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountDialogLayout.tsx
index 9ec233b1838..c199cc83564 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountDialogLayout.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountDialogLayout.tsx
@@ -25,7 +25,7 @@ import { Validator } from './Validator';
 import { StakedInfo } from './StakedInfo';
 import { DialogLayout, DialogLayoutBody, DialogLayoutFooter } from '../../layout';
 
-export interface FormValues {
+interface FormValues {
     amount: string;
 }
 
@@ -43,7 +43,7 @@ interface EnterAmountDialogLayoutProps {
     gasBudget?: string | number | null;
 }
 
-function EnterAmountDialogLayout({
+export function EnterAmountDialogLayout({
     selectedValidator,
     gasBudget,
     senderAddress,
@@ -162,5 +162,3 @@ function EnterAmountDialogLayout({
         </DialogLayout>
     );
 }
-
-export default EnterAmountDialogLayout;
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountView.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountView.tsx
index 58509774bc3..df34179d791 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountView.tsx
@@ -7,7 +7,7 @@ import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import { useFormikContext } from 'formik';
 import { useSignAndExecuteTransaction } from '@iota/dapp-kit';
 import { useNewStakeTransaction } from '@/hooks';
-import EnterAmountDialogLayout from './EnterAmountDialogLayout';
+import { EnterAmountDialogLayout } from './EnterAmountDialogLayout';
 import toast from 'react-hot-toast';
 
 export interface FormValues {
@@ -24,7 +24,7 @@ interface EnterAmountViewProps {
     onSuccess: (digest: string) => void;
 }
 
-function EnterAmountView({
+export function EnterAmountView({
     selectedValidator,
     onBack,
     handleClose,
@@ -99,5 +99,3 @@ function EnterAmountView({
         />
     );
 }
-
-export default EnterAmountView;
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterTimelockedAmountView.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterTimelockedAmountView.tsx
index b1e206dac35..eed212e8c8c 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterTimelockedAmountView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/views/EnterTimelockedAmountView.tsx
@@ -14,10 +14,10 @@ import { useFormikContext } from 'formik';
 import { useSignAndExecuteTransaction } from '@iota/dapp-kit';
 import { useGetCurrentEpochStartTimestamp, useNewStakeTimelockedTransaction } from '@/hooks';
 import { prepareObjectsForTimelockedStakingTransaction } from '@/lib/utils';
-import EnterAmountDialogLayout from './EnterAmountDialogLayout';
+import { EnterAmountDialogLayout } from './EnterAmountDialogLayout';
 import toast from 'react-hot-toast';
 
-export interface FormValues {
+interface FormValues {
     amount: string;
 }
 
@@ -31,7 +31,7 @@ interface EnterTimelockedAmountViewProps {
     onSuccess: (digest: string) => void;
 }
 
-function EnterTimelockedAmountView({
+export function EnterTimelockedAmountView({
     selectedValidator,
     maxStakableTimelockedAmount,
     amountWithoutDecimals,
@@ -119,5 +119,3 @@ function EnterTimelockedAmountView({
         />
     );
 }
-
-export default EnterTimelockedAmountView;
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/SelectValidatorView.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/views/SelectValidatorView.tsx
index 626cbf05990..76619d8329c 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/views/SelectValidatorView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/views/SelectValidatorView.tsx
@@ -15,7 +15,7 @@ interface SelectValidatorViewProps {
     handleClose: () => void;
 }
 
-function SelectValidatorView({
+export function SelectValidatorView({
     validators,
     onSelect,
     onNext,
@@ -52,5 +52,3 @@ function SelectValidatorView({
         </DialogLayout>
     );
 }
-
-export default SelectValidatorView;
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/index.ts b/apps/wallet-dashboard/components/Dialogs/Staking/views/index.ts
index 5a0ffed2be6..fcddce54bca 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/views/index.ts
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/views/index.ts
@@ -1,8 +1,8 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export { default as EnterAmountView } from './EnterAmountView';
-export { default as EnterTimelockedAmountView } from './EnterTimelockedAmountView';
-export { default as EnterAmountDialogLayout } from './EnterAmountDialogLayout';
-export { default as SelectValidatorView } from './SelectValidatorView';
+export * from './EnterAmountView';
+export * from './EnterTimelockedAmountView';
+export * from './EnterAmountDialogLayout';
+export * from './SelectValidatorView';
 export * from './DetailsView';
diff --git a/apps/wallet-dashboard/components/ExternalImage.tsx b/apps/wallet-dashboard/components/ExternalImage.tsx
index 8e23c5a8d08..8f582018f15 100644
--- a/apps/wallet-dashboard/components/ExternalImage.tsx
+++ b/apps/wallet-dashboard/components/ExternalImage.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export default function ExternalImage({
+export function ExternalImage({
     ...imageProps
 }: React.ImgHTMLAttributes<HTMLImageElement>): JSX.Element {
     // eslint-disable-next-line @next/next/no-img-element
diff --git a/apps/wallet-dashboard/components/Input.tsx b/apps/wallet-dashboard/components/Input.tsx
index 40463e507ce..958fb46adc3 100644
--- a/apps/wallet-dashboard/components/Input.tsx
+++ b/apps/wallet-dashboard/components/Input.tsx
@@ -12,7 +12,7 @@ interface InputProps {
     error?: string;
 }
 
-function Input({
+export function Input({
     label,
     value,
     onChange,
@@ -34,5 +34,3 @@ function Input({
         </div>
     );
 }
-
-export default Input;
diff --git a/apps/wallet-dashboard/components/RouteLink.tsx b/apps/wallet-dashboard/components/RouteLink.tsx
index f4395dcd421..9b6cc785785 100644
--- a/apps/wallet-dashboard/components/RouteLink.tsx
+++ b/apps/wallet-dashboard/components/RouteLink.tsx
@@ -12,7 +12,7 @@ interface RouteLinkProps {
     path: string;
 }
 
-function RouteLink({ title, path }: RouteLinkProps): JSX.Element {
+export function RouteLink({ title, path }: RouteLinkProps): JSX.Element {
     const currentPath = usePathname();
 
     const isActive = currentPath && (path === currentPath || path.startsWith(currentPath));
@@ -29,5 +29,3 @@ function RouteLink({ title, path }: RouteLinkProps): JSX.Element {
         </Link>
     );
 }
-
-export default RouteLink;
diff --git a/apps/wallet-dashboard/components/VirtualList.tsx b/apps/wallet-dashboard/components/VirtualList.tsx
index 58dc598a364..072485e7c72 100644
--- a/apps/wallet-dashboard/components/VirtualList.tsx
+++ b/apps/wallet-dashboard/components/VirtualList.tsx
@@ -19,7 +19,7 @@ interface VirtualListProps<T> {
     overflowClassName?: string;
 }
 
-function VirtualList<T>({
+export function VirtualList<T>({
     items,
     hasNextPage = false,
     isFetchingNextPage = false,
@@ -98,5 +98,3 @@ function VirtualList<T>({
         </div>
     );
 }
-
-export default VirtualList;
diff --git a/apps/wallet-dashboard/components/coins/MyCoins.tsx b/apps/wallet-dashboard/components/coins/MyCoins.tsx
index 411d7cdc702..2e1b6f3f84c 100644
--- a/apps/wallet-dashboard/components/coins/MyCoins.tsx
+++ b/apps/wallet-dashboard/components/coins/MyCoins.tsx
@@ -42,7 +42,7 @@ const TOKEN_CATEGORIES = [
     },
 ];
 
-function MyCoins(): React.JSX.Element {
+export function MyCoins(): React.JSX.Element {
     const [selectedTokenCategory, setSelectedTokenCategory] = useState(TokenCategory.All);
     const [isSendTokenDialogOpen, setIsSendTokenDialogOpen] = useState(false);
     const [selectedCoin, setSelectedCoin] = useState<CoinBalance>();
@@ -138,5 +138,3 @@ function MyCoins(): React.JSX.Element {
         </Panel>
     );
 }
-
-export default MyCoins;
diff --git a/apps/wallet-dashboard/components/coins/index.ts b/apps/wallet-dashboard/components/coins/index.ts
index 2ff5894ab77..1bdbadc6356 100644
--- a/apps/wallet-dashboard/components/coins/index.ts
+++ b/apps/wallet-dashboard/components/coins/index.ts
@@ -1,4 +1,4 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export { default as MyCoins } from './MyCoins';
+export * from './MyCoins';
diff --git a/apps/wallet-dashboard/components/index.ts b/apps/wallet-dashboard/components/index.ts
index a20f84675b6..977211a1057 100644
--- a/apps/wallet-dashboard/components/index.ts
+++ b/apps/wallet-dashboard/components/index.ts
@@ -1,12 +1,12 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export { default as RouteLink } from './RouteLink';
-export { default as Box } from './Box';
-export { default as AmountBox } from './AmountBox';
-export { default as Input } from './Input';
-export { default as VirtualList } from './VirtualList';
-export { default as ExternalImage } from './ExternalImage';
+export * from './RouteLink';
+export * from './Box';
+export * from './AmountBox';
+export * from './Input';
+export * from './VirtualList';
+export * from './ExternalImage';
 export * from './PageSizeSelector';
 export * from './PaginationOptions';
 
diff --git a/apps/wallet-dashboard/components/migration/MigrationObjectsPanel.tsx b/apps/wallet-dashboard/components/migration/MigrationObjectsPanel.tsx
index a3864b329cf..348ccd6b02b 100644
--- a/apps/wallet-dashboard/components/migration/MigrationObjectsPanel.tsx
+++ b/apps/wallet-dashboard/components/migration/MigrationObjectsPanel.tsx
@@ -24,7 +24,7 @@ import { Close, Warning } from '@iota/ui-icons';
 import clsx from 'clsx';
 import { useState } from 'react';
 import { MigrationObjectDetailsCard } from './migration-object-details-card';
-import VirtualList from '../VirtualList';
+import { VirtualList } from '../VirtualList';
 import { filterMigrationObjects } from '@/lib/utils';
 import { MigrationObjectLoading } from './MigrationObjectLoading';
 
diff --git a/apps/wallet-dashboard/components/transactions/TransactionAmount.tsx b/apps/wallet-dashboard/components/transactions/TransactionAmount.tsx
index 498ebc19522..b04e409d977 100644
--- a/apps/wallet-dashboard/components/transactions/TransactionAmount.tsx
+++ b/apps/wallet-dashboard/components/transactions/TransactionAmount.tsx
@@ -11,7 +11,7 @@ interface TransactionAmountProps {
     approximation?: boolean;
 }
 
-export default function TransactionAmount({
+export function TransactionAmount({
     amount,
     coinType,
     label,
diff --git a/apps/wallet-dashboard/components/transactions/TransactionIcon.tsx b/apps/wallet-dashboard/components/transactions/TransactionIcon.tsx
index 8e04e154f13..4acde307d43 100644
--- a/apps/wallet-dashboard/components/transactions/TransactionIcon.tsx
+++ b/apps/wallet-dashboard/components/transactions/TransactionIcon.tsx
@@ -26,7 +26,6 @@ interface TransactionIconProps {
     variant: keyof typeof icons;
 }
 
-function TransactionIcon({ txnFailed, variant }: TransactionIconProps) {
+export function TransactionIcon({ txnFailed, variant }: TransactionIconProps) {
     return <div className="[&_svg]:h-5 [&_svg]:w-5">{icons[txnFailed ? 'Failed' : variant]}</div>;
 }
-export default TransactionIcon;
diff --git a/apps/wallet-dashboard/components/transactions/TransactionSummary.tsx b/apps/wallet-dashboard/components/transactions/TransactionSummary.tsx
index 6cca89942ca..c76614db006 100644
--- a/apps/wallet-dashboard/components/transactions/TransactionSummary.tsx
+++ b/apps/wallet-dashboard/components/transactions/TransactionSummary.tsx
@@ -13,7 +13,7 @@ interface TransactionSummaryProps {
     showGasSummary?: boolean;
 }
 
-export default function TransactionSummary({
+export function TransactionSummary({
     summary,
     isLoading,
     isError,
diff --git a/apps/wallet-dashboard/components/transactions/TransactionTile.tsx b/apps/wallet-dashboard/components/transactions/TransactionTile.tsx
index 0c76c27ceb1..1f06f8dfab9 100644
--- a/apps/wallet-dashboard/components/transactions/TransactionTile.tsx
+++ b/apps/wallet-dashboard/components/transactions/TransactionTile.tsx
@@ -4,7 +4,7 @@
 'use client';
 
 import React, { useState } from 'react';
-import TransactionIcon from './TransactionIcon';
+import { TransactionIcon } from './TransactionIcon';
 import formatTimestamp from '@/lib/utils/time';
 import { ExtendedTransaction, TransactionState } from '@/lib/interfaces';
 import {
diff --git a/apps/wallet-dashboard/components/transactions/TransactionsList.tsx b/apps/wallet-dashboard/components/transactions/TransactionsList.tsx
index 526329aed43..65701bd8521 100644
--- a/apps/wallet-dashboard/components/transactions/TransactionsList.tsx
+++ b/apps/wallet-dashboard/components/transactions/TransactionsList.tsx
@@ -8,7 +8,7 @@ import { useQueryTransactionsByAddress } from '@iota/core';
 import { getExtendedTransaction } from '@/lib/utils/transaction';
 import { IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
 
-function TransactionsList() {
+export function TransactionsList() {
     const currentAccount = useCurrentAccount();
     const { data: transactions, error } = useQueryTransactionsByAddress(currentAccount?.address);
 
@@ -23,5 +23,3 @@ function TransactionsList() {
 
     return <VirtualList items={transactions || []} estimateSize={() => 60} render={virtualItem} />;
 }
-
-export default TransactionsList;
diff --git a/apps/wallet-dashboard/components/transactions/TransactionsOverview.tsx b/apps/wallet-dashboard/components/transactions/TransactionsOverview.tsx
index fcaf74eddaa..e01628377bc 100644
--- a/apps/wallet-dashboard/components/transactions/TransactionsOverview.tsx
+++ b/apps/wallet-dashboard/components/transactions/TransactionsOverview.tsx
@@ -3,9 +3,9 @@
 'use client';
 
 import { Panel, Title } from '@iota/apps-ui-kit';
-import TransactionsList from './TransactionsList';
+import { TransactionsList } from './TransactionsList';
 
-function TransactionsOverview() {
+export function TransactionsOverview() {
     return (
         <Panel>
             <Title title="Activity" />
@@ -15,5 +15,3 @@ function TransactionsOverview() {
         </Panel>
     );
 }
-
-export default TransactionsOverview;
diff --git a/apps/wallet-dashboard/components/transactions/index.ts b/apps/wallet-dashboard/components/transactions/index.ts
index 1dc714be773..163627a5922 100644
--- a/apps/wallet-dashboard/components/transactions/index.ts
+++ b/apps/wallet-dashboard/components/transactions/index.ts
@@ -1,9 +1,9 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export { default as TransactionAmount } from './TransactionAmount';
-export { default as TransactionSummary } from './TransactionSummary';
+export * from './TransactionAmount';
+export * from './TransactionSummary';
 export * from './TransactionTile';
-export { default as TransactionIcon } from './TransactionIcon';
-export { default as TransactionsList } from './TransactionsList';
-export { default as TransactionsOverview } from './TransactionsOverview';
+export * from './TransactionIcon';
+export * from './TransactionsList';
+export * from './TransactionsOverview';
diff --git a/apps/wallet/src/ui/app/ApiProvider.ts b/apps/wallet/src/ui/app/ApiProvider.ts
index 578a0c9418f..188dafd82f8 100644
--- a/apps/wallet/src/ui/app/ApiProvider.ts
+++ b/apps/wallet/src/ui/app/ApiProvider.ts
@@ -17,7 +17,7 @@ const ACCOUNT_TYPES_WITH_BACKGROUND_SIGNER: AccountType[] = [
     AccountType.PrivateKeyDerived,
 ];
 
-export default class ApiProvider {
+class ApiProvider {
     private _apiFullNodeProvider?: IotaClient;
     private _signerByAddress: Map<string, WalletSigner> = new Map();
     network = getDefaultNetwork();
diff --git a/apps/wallet/src/ui/app/components/ExplorerLinkHelper.tsx b/apps/wallet/src/ui/app/components/ExplorerLinkHelper.tsx
index bbc381a0e44..19b5c696113 100644
--- a/apps/wallet/src/ui/app/components/ExplorerLinkHelper.tsx
+++ b/apps/wallet/src/ui/app/components/ExplorerLinkHelper.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { RenderExplorerLinkProps } from '@iota/core';
-import ExplorerLink from './explorer-link';
+import { ExplorerLink } from './explorer-link';
 
 export function ExplorerLinkHelper({ children, ...linkProps }: RenderExplorerLinkProps) {
     return <ExplorerLink {...linkProps}>{children}</ExplorerLink>;
diff --git a/apps/wallet/src/ui/app/components/explorer-link/index.tsx b/apps/wallet/src/ui/app/components/explorer-link/index.tsx
index 0ce305b1087..c4fa8fe0401 100644
--- a/apps/wallet/src/ui/app/components/explorer-link/index.tsx
+++ b/apps/wallet/src/ui/app/components/explorer-link/index.tsx
@@ -45,5 +45,3 @@ export function ExplorerLink({
 }
 
 export { ExplorerLinkType };
-
-export default ExplorerLink;
diff --git a/apps/wallet/src/ui/app/components/external-link/index.tsx b/apps/wallet/src/ui/app/components/external-link/index.tsx
index 52e73eb0ad2..2f09c645521 100644
--- a/apps/wallet/src/ui/app/components/external-link/index.tsx
+++ b/apps/wallet/src/ui/app/components/external-link/index.tsx
@@ -2,7 +2,6 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { memo } from 'react';
 import type { ReactNode } from 'react';
 
 export interface ExternalLinkProps {
@@ -27,5 +26,3 @@ export function ExternalLink({ href, className, children, title, onClick }: Exte
         </a>
     );
 }
-
-export default memo(ExternalLink);
diff --git a/apps/wallet/src/ui/app/components/filters-tags/index.tsx b/apps/wallet/src/ui/app/components/filters-tags/index.tsx
index 09fc2b21dbe..d3499467842 100644
--- a/apps/wallet/src/ui/app/components/filters-tags/index.tsx
+++ b/apps/wallet/src/ui/app/components/filters-tags/index.tsx
@@ -23,7 +23,7 @@ interface FiltersPortalProps {
     callback?: (tag: Tag) => void;
 }
 
-function FiltersPortal({ tags, callback, firstLastMargin }: FiltersPortalProps) {
+function FiltersPortalComponent({ tags, callback, firstLastMargin }: FiltersPortalProps) {
     const [element, setElement] = useState<HTMLElement | null>(null);
 
     useEffect(() => {
@@ -65,4 +65,4 @@ function FiltersPortal({ tags, callback, firstLastMargin }: FiltersPortalProps)
     );
 }
 
-export default memo(FiltersPortal);
+export const FiltersPortal = memo(FiltersPortalComponent);
diff --git a/apps/wallet/src/ui/app/components/index.ts b/apps/wallet/src/ui/app/components/index.ts
index 978c70b11b4..6166f65e8f4 100644
--- a/apps/wallet/src/ui/app/components/index.ts
+++ b/apps/wallet/src/ui/app/components/index.ts
@@ -31,4 +31,4 @@ export * from './receipt-card';
 export * from './receipt-card/TxnAmount';
 export * from './transactions-card';
 export * from './user-approve-container';
-export { default as FiltersPortal } from './filters-tags';
+export * from './filters-tags';
diff --git a/apps/wallet/src/ui/app/components/iota-apps/AppsPlayGround.tsx b/apps/wallet/src/ui/app/components/iota-apps/AppsPlayGround.tsx
new file mode 100644
index 00000000000..f1df03055db
--- /dev/null
+++ b/apps/wallet/src/ui/app/components/iota-apps/AppsPlayGround.tsx
@@ -0,0 +1,75 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useAppSelector } from '_hooks';
+import { Feature } from '@iota/core';
+import { prepareLinkToCompare } from '_src/shared/utils';
+import { useFeature } from '@growthbook/growthbook-react';
+import { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import { permissionsSelectors } from '../../redux/slices/permissions';
+import { AppsPageBanner } from './Banner';
+import { IotaApp, type DAppEntry } from './IotaApp';
+import { IotaAppEmpty } from './IotaAppEmpty';
+import { InfoBox, InfoBoxStyle, InfoBoxType, Header } from '@iota/apps-ui-kit';
+import { Info } from '@iota/ui-icons';
+
+export function AppsPlayGround() {
+    const ecosystemApps = useFeature<DAppEntry[]>(Feature.WalletDapps).value;
+    const { tagName } = useParams();
+
+    const filteredEcosystemApps = useMemo(() => {
+        if (!ecosystemApps) {
+            return [];
+        } else if (tagName) {
+            return ecosystemApps.filter((app) => app.tags.includes(tagName));
+        }
+        return ecosystemApps;
+    }, [ecosystemApps, tagName]);
+
+    const allPermissions = useAppSelector(permissionsSelectors.selectAll);
+    const linkToPermissionID = useMemo(() => {
+        const map = new Map<string, string>();
+        for (const aPermission of allPermissions) {
+            map.set(prepareLinkToCompare(aPermission.origin), aPermission.id);
+            if (aPermission.pagelink) {
+                map.set(prepareLinkToCompare(aPermission.pagelink), aPermission.id);
+            }
+        }
+        return map;
+    }, [allPermissions]);
+
+    return (
+        <>
+            <Header titleCentered title="IOTA Apps" />
+            <AppsPageBanner />
+
+            {filteredEcosystemApps?.length ? (
+                <InfoBox
+                    type={InfoBoxType.Default}
+                    icon={<Info />}
+                    style={InfoBoxStyle.Elevated}
+                    supportingText="Apps below are actively curated but do not indicate any endorsement or
+                        relationship with IOTA Wallet. Please DYOR."
+                />
+            ) : null}
+
+            {filteredEcosystemApps?.length ? (
+                <div className="mt-md flex flex-col gap-sm">
+                    {filteredEcosystemApps.map((app) => (
+                        <IotaApp
+                            key={app.link}
+                            {...app}
+                            permissionID={linkToPermissionID.get(prepareLinkToCompare(app.link))}
+                            displayType="full"
+                            openAppSite
+                        />
+                    ))}
+                </div>
+            ) : (
+                <IotaAppEmpty displayType="full" />
+            )}
+        </>
+    );
+}
diff --git a/apps/wallet/src/ui/app/components/iota-apps/ConnectedAppsCard.tsx b/apps/wallet/src/ui/app/components/iota-apps/ConnectedAppsCard.tsx
index efce9ba05ea..ad89f4dc3b7 100644
--- a/apps/wallet/src/ui/app/components/iota-apps/ConnectedAppsCard.tsx
+++ b/apps/wallet/src/ui/app/components/iota-apps/ConnectedAppsCard.tsx
@@ -15,7 +15,7 @@ import { permissionsSelectors } from '../../redux/slices/permissions';
 import { Loading, NoData, PageTemplate } from '_components';
 import { type DAppEntry, IotaApp } from './IotaApp';
 
-function ConnectedDapps() {
+export function ConnectedAppsCard() {
     const backgroundClient = useBackgroundClient();
     useEffect(() => {
         backgroundClient.sendGetPermissionRequests();
@@ -86,5 +86,3 @@ function ConnectedDapps() {
         </PageTemplate>
     );
 }
-
-export default ConnectedDapps;
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 94d7a46fcdc..9f99cc784e0 100644
--- a/apps/wallet/src/ui/app/components/iota-apps/DisconnectApp.tsx
+++ b/apps/wallet/src/ui/app/components/iota-apps/DisconnectApp.tsx
@@ -25,7 +25,7 @@ export interface DisconnectAppProps extends Omit<DAppEntry, 'description' | 'tag
     setShowDisconnectApp: (showModal: boolean) => void;
 }
 
-function DisconnectApp({
+export function DisconnectApp({
     name,
     icon,
     link,
@@ -132,5 +132,3 @@ function DisconnectApp({
         </Overlay>
     );
 }
-
-export default DisconnectApp;
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 d6db449aaa4..0df8593611d 100644
--- a/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx
+++ b/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx
@@ -8,8 +8,7 @@ import { ampli } from '_src/shared/analytics/ampli';
 import { getDAppUrl } from '_src/shared/utils';
 import { useState } from 'react';
 import { Card, CardImage, CardBody, ImageShape, Badge, BadgeType } from '@iota/apps-ui-kit';
-
-import DisconnectApp from './DisconnectApp';
+import { DisconnectApp } from './DisconnectApp';
 
 export type DAppEntry = {
     name: string;
diff --git a/apps/wallet/src/ui/app/components/iota-apps/index.tsx b/apps/wallet/src/ui/app/components/iota-apps/index.tsx
index 8633641c5ed..c61a0d75d35 100644
--- a/apps/wallet/src/ui/app/components/iota-apps/index.tsx
+++ b/apps/wallet/src/ui/app/components/iota-apps/index.tsx
@@ -1,78 +1,5 @@
-// Copyright (c) Mysten Labs, Inc.
-// Modifications Copyright (c) 2024 IOTA Stiftung
+// Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { useAppSelector } from '_hooks';
-import { Feature } from '@iota/core';
-import { prepareLinkToCompare } from '_src/shared/utils';
-import { useFeature } from '@growthbook/growthbook-react';
-import { useMemo } from 'react';
-import { useParams } from 'react-router-dom';
-import { permissionsSelectors } from '../../redux/slices/permissions';
-import { AppsPageBanner } from './Banner';
-import { IotaApp, type DAppEntry } from './IotaApp';
-import { IotaAppEmpty } from './IotaAppEmpty';
-import { InfoBox, InfoBoxStyle, InfoBoxType, Header } from '@iota/apps-ui-kit';
-import { Info } from '@iota/ui-icons';
-
-export function AppsPlayGround() {
-    const ecosystemApps = useFeature<DAppEntry[]>(Feature.WalletDapps).value;
-    const { tagName } = useParams();
-
-    const filteredEcosystemApps = useMemo(() => {
-        if (!ecosystemApps) {
-            return [];
-        } else if (tagName) {
-            return ecosystemApps.filter((app) => app.tags.includes(tagName));
-        }
-        return ecosystemApps;
-    }, [ecosystemApps, tagName]);
-
-    const allPermissions = useAppSelector(permissionsSelectors.selectAll);
-    const linkToPermissionID = useMemo(() => {
-        const map = new Map<string, string>();
-        for (const aPermission of allPermissions) {
-            map.set(prepareLinkToCompare(aPermission.origin), aPermission.id);
-            if (aPermission.pagelink) {
-                map.set(prepareLinkToCompare(aPermission.pagelink), aPermission.id);
-            }
-        }
-        return map;
-    }, [allPermissions]);
-
-    return (
-        <>
-            <Header titleCentered title="IOTA Apps" />
-            <AppsPageBanner />
-
-            {filteredEcosystemApps?.length ? (
-                <InfoBox
-                    type={InfoBoxType.Default}
-                    icon={<Info />}
-                    style={InfoBoxStyle.Elevated}
-                    supportingText="Apps below are actively curated but do not indicate any endorsement or
-                        relationship with IOTA Wallet. Please DYOR."
-                />
-            ) : null}
-
-            {filteredEcosystemApps?.length ? (
-                <div className="mt-md flex flex-col gap-sm">
-                    {filteredEcosystemApps.map((app) => (
-                        <IotaApp
-                            key={app.link}
-                            {...app}
-                            permissionID={linkToPermissionID.get(prepareLinkToCompare(app.link))}
-                            displayType="full"
-                            openAppSite
-                        />
-                    ))}
-                </div>
-            ) : (
-                <IotaAppEmpty displayType="full" />
-            )}
-        </>
-    );
-}
-
-export default AppsPlayGround;
-export { default as ConnectedAppsCard } from './ConnectedAppsCard';
+export * from './AppsPlayGround';
+export * from './ConnectedAppsCard';
diff --git a/apps/wallet/src/ui/app/components/loading/index.tsx b/apps/wallet/src/ui/app/components/loading/index.tsx
index 3ca75bb0db4..98e689aec31 100644
--- a/apps/wallet/src/ui/app/components/loading/index.tsx
+++ b/apps/wallet/src/ui/app/components/loading/index.tsx
@@ -19,5 +19,3 @@ export function Loading({ loading, children, ...indicatorProps }: LoadingProps)
         <>{children}</>
     );
 }
-
-export default Loading;
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 d2a5da8f49c..11ea570f723 100644
--- a/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx
+++ b/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx
@@ -6,7 +6,7 @@ import { useNextMenuUrl, Overlay } from '_components';
 import { useAppSelector } from '_hooks';
 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 { FaucetRequestButton } from '_src/ui/app/shared/faucet/FaucetRequestButton';
 import { getNetwork, Network } from '@iota/iota-sdk/client';
 import Browser from 'webextension-polyfill';
 import { Link, useNavigate } from 'react-router-dom';
@@ -30,7 +30,7 @@ import {
 import { ampli } from '_src/shared/analytics/ampli';
 import { useTheme, getCustomNetwork } from '@iota/core';
 
-function MenuList() {
+export function MenuList() {
     const { themePreference } = useTheme();
     const navigate = useNavigate();
     const activeAccount = useActiveAccount();
@@ -169,5 +169,3 @@ function MenuList() {
         </Overlay>
     );
 }
-
-export default MenuList;
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 ef5b55515fd..beddd857700 100644
--- a/apps/wallet/src/ui/app/components/menu/content/index.tsx
+++ b/apps/wallet/src/ui/app/components/menu/content/index.tsx
@@ -15,12 +15,12 @@ import type { MouseEvent } from 'react';
 import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import { AutoLockAccounts } from './AutoLockAccounts';
 import { NetworkSettings } from './NetworkSettings';
-import WalletSettingsMenuList from './WalletSettingsMenuList';
+import { MenuList } from './WalletSettingsMenuList';
 import { ThemeSettings } from './ThemeSettings';
 
 const CLOSE_KEY_CODES: string[] = ['Escape'];
 
-function MenuContent() {
+export function MenuContent() {
     const mainLocation = useLocation();
     const isOpen = useMenuIsOpen();
     const menuUrl = useMenuUrl();
@@ -47,7 +47,7 @@ function MenuContent() {
             <ErrorBoundary>
                 <MainLocationContext.Provider value={mainLocation}>
                     <Routes location={menuUrl || ''}>
-                        <Route path="/" element={<WalletSettingsMenuList />} />
+                        <Route path="/" element={<MenuList />} />
                         <Route path="/network" element={<NetworkSettings />} />
                         <Route path="/auto-lock" element={<AutoLockAccounts />} />
                         <Route path="/theme" element={<ThemeSettings />} />
@@ -58,5 +58,3 @@ function MenuContent() {
         </div>
     );
 }
-
-export default MenuContent;
diff --git a/apps/wallet/src/ui/app/components/menu/index.tsx b/apps/wallet/src/ui/app/components/menu/index.tsx
index 1daa5025de8..2e2817233f6 100644
--- a/apps/wallet/src/ui/app/components/menu/index.tsx
+++ b/apps/wallet/src/ui/app/components/menu/index.tsx
@@ -2,6 +2,6 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export { default as MenuContent } from './content';
+export * from './content';
 export * from './hooks';
 export * from './button/WalletSettingsButton';
diff --git a/apps/wallet/src/ui/app/components/network-selector/index.tsx b/apps/wallet/src/ui/app/components/network-selector/index.tsx
index 3bbeb7a7b8c..bc4c1cbda1d 100644
--- a/apps/wallet/src/ui/app/components/network-selector/index.tsx
+++ b/apps/wallet/src/ui/app/components/network-selector/index.tsx
@@ -90,5 +90,3 @@ export function NetworkSelector() {
         </div>
     );
 }
-
-export default NetworkSelector;
diff --git a/apps/wallet/src/ui/app/components/receipt-card/index.tsx b/apps/wallet/src/ui/app/components/receipt-card/index.tsx
index 3bba1a45a7f..b89482df717 100644
--- a/apps/wallet/src/ui/app/components/receipt-card/index.tsx
+++ b/apps/wallet/src/ui/app/components/receipt-card/index.tsx
@@ -14,7 +14,7 @@ import { type IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
 import { CardType } from '@iota/apps-ui-kit';
 import { ValidatorLogo } from '../../staking/validators/ValidatorLogo';
 import { ExplorerLinkHelper } from '../ExplorerLinkHelper';
-import ExplorerLink from '../explorer-link';
+import { ExplorerLink } from '../explorer-link';
 
 interface ReceiptCardProps {
     txn: IotaTransactionBlockResponse;
diff --git a/apps/wallet/src/ui/app/index.tsx b/apps/wallet/src/ui/app/index.tsx
index 77f06c3f03d..5203194cb24 100644
--- a/apps/wallet/src/ui/app/index.tsx
+++ b/apps/wallet/src/ui/app/index.tsx
@@ -37,7 +37,8 @@ import { ManageAccountsPage } from './pages/accounts/manage/ManageAccountsPage';
 import { ProtectAccountPage } from './pages/accounts/ProtectAccountPage';
 import { WelcomePage } from './pages/accounts/WelcomePage';
 import { ApprovalRequestPage } from './pages/approval-request';
-import HomePage, {
+import {
+    HomePage,
     AppsPage,
     AssetsPage,
     CoinsSelectorPage,
@@ -48,9 +49,9 @@ import HomePage, {
     TransactionBlocksPage,
     TransferCoinPage,
 } from './pages/home';
-import TokenDetailsPage from './pages/home/tokens/TokenDetailsPage';
+import { TokenDetailsPage } from './pages/home/tokens/TokenDetailsPage';
 import { RestrictedPage } from './pages/restricted';
-import SiteConnectPage from './pages/site-connect';
+import { SiteConnectPage } from './pages/site-connect';
 import { AppType } from './redux/slices/app/AppType';
 import { StakingPage } from './staking/home';
 import { StorageMigrationPage } from './pages/StorageMigrationPage';
@@ -68,7 +69,7 @@ const HIDDEN_MENU_PATHS = [
 
 const NOTIFY_USER_ACTIVE_INTERVAL = 5 * 1000; // 5 seconds
 
-const App = () => {
+export function App() {
     const dispatch = useAppDispatch();
     const isPopup = useAppSelector((state) => state.app.appType === AppType.Popup);
     useEffect(() => {
@@ -215,6 +216,4 @@ const App = () => {
             </Route>
         </Routes>
     );
-};
-
-export default App;
+}
diff --git a/apps/wallet/src/ui/app/pages/home/apps/index.tsx b/apps/wallet/src/ui/app/pages/home/apps/index.tsx
index fb20b27115f..f3c065e5e1b 100644
--- a/apps/wallet/src/ui/app/pages/home/apps/index.tsx
+++ b/apps/wallet/src/ui/app/pages/home/apps/index.tsx
@@ -19,7 +19,7 @@ type FilterTag = {
     link: string;
 };
 
-function AppsPage() {
+export function AppsPage() {
     const navigate = useNavigate();
 
     const DEFAULT_FILTER_TAGS: FilterTag[] = [
@@ -83,5 +83,3 @@ function AppsPage() {
         </div>
     );
 }
-
-export default AppsPage;
diff --git a/apps/wallet/src/ui/app/pages/home/assets/index.tsx b/apps/wallet/src/ui/app/pages/home/assets/index.tsx
index 9f224ecd1ec..e26f9407b3b 100644
--- a/apps/wallet/src/ui/app/pages/home/assets/index.tsx
+++ b/apps/wallet/src/ui/app/pages/home/assets/index.tsx
@@ -7,7 +7,7 @@ import { Route, Routes } from 'react-router-dom';
 import { NftsPage } from '..';
 import { HiddenAssetsProvider } from './HiddenAssetsProvider';
 
-function AssetsPage() {
+export function AssetsPage() {
     if (useUnlockedGuard()) {
         return null;
     }
@@ -19,5 +19,3 @@ function AssetsPage() {
         </HiddenAssetsProvider>
     );
 }
-
-export default AssetsPage;
diff --git a/apps/wallet/src/ui/app/pages/home/index.tsx b/apps/wallet/src/ui/app/pages/home/index.tsx
index 4ce600b17c8..f43925680c8 100644
--- a/apps/wallet/src/ui/app/pages/home/index.tsx
+++ b/apps/wallet/src/ui/app/pages/home/index.tsx
@@ -11,7 +11,7 @@ interface HomePageProps {
     disableNavigation?: boolean;
 }
 
-const HomePage = ({ disableNavigation }: HomePageProps) => {
+export function HomePage({ disableNavigation }: HomePageProps) {
     const initChecking = useInitializedGuard(true);
     const guardChecking = initChecking;
 
@@ -27,17 +27,16 @@ const HomePage = ({ disableNavigation }: HomePageProps) => {
             </PageMainLayout>
         </Loading>
     );
-};
+}
 
-export default HomePage;
-export { default as NftsPage } from './nfts';
-export { default as AssetsPage } from './assets';
-export { default as TokensPage } from './tokens';
-export { default as TransactionBlocksPage } from './transactions';
-export { default as TransferCoinPage } from './transfer-coin';
-export { default as NFTDetailsPage } from './nft-details';
-export { default as KioskDetailsPage } from './kiosk-details';
-export { default as NftTransferPage } from './nft-transfer';
-export { default as ReceiptPage } from './receipt';
-export { default as CoinsSelectorPage } from './transfer-coin/CoinSelector';
-export { default as AppsPage } from './apps';
+export * from './nfts';
+export * from './assets';
+export * from './tokens';
+export * from './transactions';
+export * from './transfer-coin';
+export * from './nft-details';
+export * from './kiosk-details';
+export * from './nft-transfer';
+export * from './receipt';
+export * from './transfer-coin/CoinSelector';
+export * from './apps';
diff --git a/apps/wallet/src/ui/app/pages/home/interstitial/index.tsx b/apps/wallet/src/ui/app/pages/home/interstitial/index.tsx
index b435f4d650e..d4d0754d396 100644
--- a/apps/wallet/src/ui/app/pages/home/interstitial/index.tsx
+++ b/apps/wallet/src/ui/app/pages/home/interstitial/index.tsx
@@ -23,7 +23,13 @@ interface InterstitialProps extends InterstitialConfig {
 
 const setInterstitialDismissed = (dismissKey: string) => localStorage.setItem(dismissKey, 'true');
 
-function Interstitial({ enabled, dismissKey, imageUrl, bannerUrl, onClose }: InterstitialProps) {
+export function Interstitial({
+    enabled,
+    dismissKey,
+    imageUrl,
+    bannerUrl,
+    onClose,
+}: InterstitialProps) {
     const navigate = useNavigate();
 
     useEffect(() => {
@@ -68,5 +74,3 @@ function Interstitial({ enabled, dismissKey, imageUrl, bannerUrl, onClose }: Int
         </Portal>
     );
 }
-
-export default Interstitial;
diff --git a/apps/wallet/src/ui/app/pages/home/kiosk-details/index.tsx b/apps/wallet/src/ui/app/pages/home/kiosk-details/index.tsx
index 8d02c1ea8da..8e1c247f89e 100644
--- a/apps/wallet/src/ui/app/pages/home/kiosk-details/index.tsx
+++ b/apps/wallet/src/ui/app/pages/home/kiosk-details/index.tsx
@@ -18,7 +18,7 @@ import { Link, useSearchParams, useNavigate } from 'react-router-dom';
 import cl from 'clsx';
 import { KeyValueInfo } from '@iota/apps-ui-kit';
 
-function KioskDetailsPage() {
+export function KioskDetailsPage() {
     const navigate = useNavigate();
     const [searchParams] = useSearchParams();
     const kioskId = searchParams.get('kioskId');
@@ -92,5 +92,3 @@ function KioskDetailsPage() {
         </PageTemplate>
     );
 }
-
-export default KioskDetailsPage;
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 062577a10b1..653be32faae 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
@@ -11,7 +11,7 @@ import cl from 'clsx';
 import { Link, Navigate, useNavigate, useSearchParams } from 'react-router-dom';
 import { Button, ButtonType, KeyValueInfo } from '@iota/apps-ui-kit';
 
-function NFTDetailsPage() {
+export function NFTDetailsPage() {
     const navigate = useNavigate();
     const [searchParams] = useSearchParams();
     const nftId = searchParams.get('objectId');
@@ -211,5 +211,3 @@ function NFTDetailsPage() {
         </PageTemplate>
     );
 }
-
-export default NFTDetailsPage;
diff --git a/apps/wallet/src/ui/app/pages/home/nft-transfer/index.tsx b/apps/wallet/src/ui/app/pages/home/nft-transfer/index.tsx
index 8d4c920ec38..40170150931 100644
--- a/apps/wallet/src/ui/app/pages/home/nft-transfer/index.tsx
+++ b/apps/wallet/src/ui/app/pages/home/nft-transfer/index.tsx
@@ -9,7 +9,7 @@ import { Navigate, useNavigate, useParams } from 'react-router-dom';
 import { TransferNFTForm } from './TransferNFTForm';
 import { useOwnedNFT, useIsAssetTransferable } from '@iota/core';
 
-function NftTransferPage() {
+export function NftTransferPage() {
     const { nftId } = useParams();
     const address = useActiveAddress();
     // verify that the nft is owned by the user and is transferable
@@ -38,5 +38,3 @@ function NftTransferPage() {
         </Overlay>
     );
 }
-
-export default NftTransferPage;
diff --git a/apps/wallet/src/ui/app/pages/home/nfts/HiddenAsset.tsx b/apps/wallet/src/ui/app/pages/home/nfts/HiddenAsset.tsx
index 92ac60bc862..58ffb29a897 100644
--- a/apps/wallet/src/ui/app/pages/home/nfts/HiddenAsset.tsx
+++ b/apps/wallet/src/ui/app/pages/home/nfts/HiddenAsset.tsx
@@ -38,7 +38,7 @@ export interface HiddenAssetProps {
         | undefined;
 }
 
-export default function HiddenAsset(item: HiddenAssetProps) {
+export function HiddenAsset(item: HiddenAssetProps) {
     const { showAsset } = useHiddenAssets();
     const kioskClient = useKioskClient();
     const navigate = useNavigate();
diff --git a/apps/wallet/src/ui/app/pages/home/nfts/HiddenAssets.tsx b/apps/wallet/src/ui/app/pages/home/nfts/HiddenAssets.tsx
index abab72eadb2..d01346c3c9a 100644
--- a/apps/wallet/src/ui/app/pages/home/nfts/HiddenAssets.tsx
+++ b/apps/wallet/src/ui/app/pages/home/nfts/HiddenAssets.tsx
@@ -2,13 +2,13 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import HiddenAsset, { type HiddenAssetProps } from './HiddenAsset';
+import { HiddenAsset, type HiddenAssetProps } from './HiddenAsset';
 
 interface HiddenAssetsProps {
     items: HiddenAssetProps[];
 }
 
-export default function HiddenAssets({ items }: HiddenAssetsProps) {
+export function HiddenAssets({ items }: HiddenAssetsProps) {
     return (
         <div className="flex w-full flex-col overflow-y-auto">
             {items?.map((object) => <HiddenAsset key={object.data!.objectId} {...object} />)}
diff --git a/apps/wallet/src/ui/app/pages/home/nfts/NonVisualAssets.tsx b/apps/wallet/src/ui/app/pages/home/nfts/NonVisualAssets.tsx
index 025f2000a98..9f1339e7d55 100644
--- a/apps/wallet/src/ui/app/pages/home/nfts/NonVisualAssets.tsx
+++ b/apps/wallet/src/ui/app/pages/home/nfts/NonVisualAssets.tsx
@@ -12,7 +12,7 @@ interface NonVisualAssetsProps {
     items: IotaObjectData[];
 }
 
-export default function NonVisualAssets({ items }: NonVisualAssetsProps) {
+export function NonVisualAssets({ items }: NonVisualAssetsProps) {
     return (
         <div className="flex w-full flex-1 flex-col items-center gap-4">
             {items?.length ? (
diff --git a/apps/wallet/src/ui/app/pages/home/nfts/VisualAssets.tsx b/apps/wallet/src/ui/app/pages/home/nfts/VisualAssets.tsx
index ce05c7e594a..c4e1e046bc5 100644
--- a/apps/wallet/src/ui/app/pages/home/nfts/VisualAssets.tsx
+++ b/apps/wallet/src/ui/app/pages/home/nfts/VisualAssets.tsx
@@ -15,7 +15,7 @@ interface VisualAssetsProps {
     items: IotaObjectData[];
 }
 
-export default function VisualAssets({ items }: VisualAssetsProps) {
+export function VisualAssets({ items }: VisualAssetsProps) {
     const { hideAsset } = useHiddenAssets();
     const kioskClient = useKioskClient();
 
diff --git a/apps/wallet/src/ui/app/pages/home/nfts/index.tsx b/apps/wallet/src/ui/app/pages/home/nfts/index.tsx
index a6af83c0ec0..30d5af7b648 100644
--- a/apps/wallet/src/ui/app/pages/home/nfts/index.tsx
+++ b/apps/wallet/src/ui/app/pages/home/nfts/index.tsx
@@ -15,9 +15,9 @@ import { useActiveAddress } from '_app/hooks/useActiveAddress';
 import { Loading, NoData, PageTemplate } from '_components';
 import { useGetNFTs } from '_src/ui/app/hooks/useGetNFTs';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import HiddenAssets from './HiddenAssets';
-import NonVisualAssets from './NonVisualAssets';
-import VisualAssets from './VisualAssets';
+import { HiddenAssets } from './HiddenAssets';
+import { NonVisualAssets } from './NonVisualAssets';
+import { VisualAssets } from './VisualAssets';
 import { Warning } from '@iota/ui-icons';
 import { useOnScreen } from '@iota/core';
 
@@ -42,7 +42,7 @@ const ASSET_CATEGORIES = [
     },
 ];
 
-function NftsPage() {
+export function NftsPage() {
     const [selectedAssetCategory, setSelectedAssetCategory] = useState<AssetCategory | null>(null);
     const observerElem = useRef<HTMLDivElement | null>(null);
     const { isIntersecting } = useOnScreen(observerElem);
@@ -201,5 +201,3 @@ function NftsPage() {
         </PageTemplate>
     );
 }
-
-export default NftsPage;
diff --git a/apps/wallet/src/ui/app/pages/home/receipt/index.tsx b/apps/wallet/src/ui/app/pages/home/receipt/index.tsx
index 0d82f3f2a28..94d4fc614d9 100644
--- a/apps/wallet/src/ui/app/pages/home/receipt/index.tsx
+++ b/apps/wallet/src/ui/app/pages/home/receipt/index.tsx
@@ -12,7 +12,7 @@ import { InfoBox, InfoBoxType, InfoBoxStyle } from '@iota/apps-ui-kit';
 import type { IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
 import { useGetTransaction } from '@iota/core';
 
-function ReceiptPage() {
+export function ReceiptPage() {
     const location = useLocation();
     const [searchParams] = useSearchParams();
     const [showModal, setShowModal] = useState(true);
@@ -82,5 +82,3 @@ function ReceiptPage() {
         </Loading>
     );
 }
-
-export default ReceiptPage;
diff --git a/apps/wallet/src/ui/app/pages/home/tokens/TokenDetailsPage.tsx b/apps/wallet/src/ui/app/pages/home/tokens/TokenDetailsPage.tsx
index 66083ed5272..cbf8ff70e02 100644
--- a/apps/wallet/src/ui/app/pages/home/tokens/TokenDetailsPage.tsx
+++ b/apps/wallet/src/ui/app/pages/home/tokens/TokenDetailsPage.tsx
@@ -2,10 +2,8 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import TokenDetails from './TokensDetails';
+import { TokenDetails } from './TokensDetails';
 
-function TokenDetailsPage() {
+export function TokenDetailsPage() {
     return <TokenDetails />;
 }
-
-export default TokenDetailsPage;
diff --git a/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx b/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx
index 064184e9f31..7eaf215b576 100644
--- a/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx
+++ b/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx
@@ -5,7 +5,7 @@
 import { ExplorerLinkType, Loading, UnlockAccountButton } from '_components';
 import { useAppSelector, useCoinsReFetchingConfig } from '_hooks';
 import { useActiveAccount } from '_src/ui/app/hooks/useActiveAccount';
-import FaucetRequestButton from '_src/ui/app/shared/faucet/FaucetRequestButton';
+import { FaucetRequestButton } from '_src/ui/app/shared/faucet/FaucetRequestButton';
 import { useFeature } from '@growthbook/growthbook-react';
 import { toast } from 'react-hot-toast';
 import {
@@ -32,7 +32,7 @@ import { formatAddress, IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { ArrowBottomLeft, Info, Send } from '@iota/ui-icons';
-import Interstitial, { type InterstitialConfig } from '../interstitial';
+import { Interstitial, type InterstitialConfig } from '../interstitial';
 import { CoinBalance } from './coin-balance';
 import { TokenStakingOverview } from './TokenStakingOverview';
 import { useNavigate } from 'react-router-dom';
@@ -44,7 +44,7 @@ interface TokenDetailsProps {
     coinType?: string;
 }
 
-function TokenDetails({ coinType }: TokenDetailsProps) {
+export function TokenDetails({ coinType }: TokenDetailsProps) {
     const [dialogReceiveOpen, setDialogReceiveOpen] = useState(false);
     const navigate = useNavigate();
     const [interstitialDismissed, setInterstitialDismissed] = useState<boolean>(false);
@@ -234,5 +234,3 @@ function TokenDetails({ coinType }: TokenDetailsProps) {
         </>
     );
 }
-
-export default TokenDetails;
diff --git a/apps/wallet/src/ui/app/pages/home/tokens/TokensStackIcon.tsx b/apps/wallet/src/ui/app/pages/home/tokens/TokensStackIcon.tsx
index 836b8fd3cbe..e140d51c64c 100644
--- a/apps/wallet/src/ui/app/pages/home/tokens/TokensStackIcon.tsx
+++ b/apps/wallet/src/ui/app/pages/home/tokens/TokensStackIcon.tsx
@@ -37,4 +37,3 @@ export const SvgIotaTokensStack = (props: SVGProps<SVGSVGElement>) => (
         </defs>
     </svg>
 );
-export default SvgIotaTokensStack;
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 2b3d21fca68..e2ea9b847e6 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
@@ -15,7 +15,7 @@ export interface IconLinkProps {
     text: string;
 }
 
-function IconLink({ to, icon, disabled = false, text }: IconLinkProps) {
+function IconLinkComponent({ to, icon, disabled = false, text }: IconLinkProps) {
     return (
         <Link
             to={to}
@@ -35,4 +35,4 @@ function IconLink({ to, icon, disabled = false, text }: IconLinkProps) {
     );
 }
 
-export default memo(IconLink);
+export const IconLink = memo(IconLinkComponent);
diff --git a/apps/wallet/src/ui/app/pages/home/tokens/index.tsx b/apps/wallet/src/ui/app/pages/home/tokens/index.tsx
index 98dd57694ab..f7dd11c7d51 100644
--- a/apps/wallet/src/ui/app/pages/home/tokens/index.tsx
+++ b/apps/wallet/src/ui/app/pages/home/tokens/index.tsx
@@ -3,11 +3,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Route, Routes } from 'react-router-dom';
+import { TokenDetailsPage } from './TokenDetailsPage';
+import { TokenDetails } from './TokensDetails';
 
-import TokenDetailsPage from './TokenDetailsPage';
-import TokenDetails from './TokensDetails';
-
-function TokensPage() {
+export function TokensPage() {
     return (
         <Routes>
             <Route path="/" element={<TokenDetails />} />
@@ -15,5 +14,3 @@ function TokensPage() {
         </Routes>
     );
 }
-
-export default TokensPage;
diff --git a/apps/wallet/src/ui/app/pages/home/transactions/index.tsx b/apps/wallet/src/ui/app/pages/home/transactions/index.tsx
index 409d1db7824..133f40d117a 100644
--- a/apps/wallet/src/ui/app/pages/home/transactions/index.tsx
+++ b/apps/wallet/src/ui/app/pages/home/transactions/index.tsx
@@ -8,7 +8,7 @@ import { Navigate, useParams } from 'react-router-dom';
 import { CompletedTransactions } from './CompletedTransactions';
 import { PageTemplate } from '_src/ui/app/components';
 
-function TransactionBlocksPage() {
+export function TransactionBlocksPage() {
     const activeAccount = useActiveAccount();
     const { status } = useParams();
     const isPendingTransactions = status === 'pending';
@@ -26,5 +26,3 @@ function TransactionBlocksPage() {
         </PageTemplate>
     );
 }
-
-export default TransactionBlocksPage;
diff --git a/apps/wallet/src/ui/app/pages/home/transfer-coin/CoinSelector.tsx b/apps/wallet/src/ui/app/pages/home/transfer-coin/CoinSelector.tsx
index d94b31d6634..88d0be48ec8 100644
--- a/apps/wallet/src/ui/app/pages/home/transfer-coin/CoinSelector.tsx
+++ b/apps/wallet/src/ui/app/pages/home/transfer-coin/CoinSelector.tsx
@@ -7,7 +7,7 @@ import { useUnlockedGuard } from '_src/ui/app/hooks/useUnlockedGuard';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
-function CoinsSelectorPage() {
+export function CoinsSelectorPage() {
     const [searchParams] = useSearchParams();
     const coinType = searchParams.get('type') || IOTA_TYPE_ARG;
     const navigate = useNavigate();
@@ -32,5 +32,3 @@ function CoinsSelectorPage() {
         </Overlay>
     );
 }
-
-export default CoinsSelectorPage;
diff --git a/apps/wallet/src/ui/app/pages/home/transfer-coin/index.tsx b/apps/wallet/src/ui/app/pages/home/transfer-coin/index.tsx
index f4e3a2555c1..8eda834f54f 100644
--- a/apps/wallet/src/ui/app/pages/home/transfer-coin/index.tsx
+++ b/apps/wallet/src/ui/app/pages/home/transfer-coin/index.tsx
@@ -29,7 +29,7 @@ import { Loader } from '@iota/ui-icons';
 import { useIotaClientQuery } from '@iota/dapp-kit';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 
-function TransferCoinPage() {
+export function TransferCoinPage() {
     const [searchParams] = useSearchParams();
     const selectedCoinType = searchParams.get('type');
     const [showTransactionPreview, setShowTransactionPreview] = useState<boolean>(false);
@@ -206,5 +206,3 @@ function TransferCoinPage() {
         </Overlay>
     );
 }
-
-export default TransferCoinPage;
diff --git a/apps/wallet/src/ui/app/pages/site-connect/index.tsx b/apps/wallet/src/ui/app/pages/site-connect/index.tsx
index 74238e2ab93..fa8738150af 100644
--- a/apps/wallet/src/ui/app/pages/site-connect/index.tsx
+++ b/apps/wallet/src/ui/app/pages/site-connect/index.tsx
@@ -22,7 +22,7 @@ import { PageMainLayoutTitle } from '../../shared/page-main-layout/PageMainLayou
 import { InfoBox, InfoBoxStyle, InfoBoxType } from '@iota/apps-ui-kit';
 import { Warning, Info } from '@iota/ui-icons';
 
-function SiteConnectPage() {
+export function SiteConnectPage() {
     const { requestID } = useParams();
     const permissionsInitialized = useAppSelector(({ permissions }) => permissions.initialized);
     const loading = !permissionsInitialized;
@@ -177,5 +177,3 @@ function SiteConnectPage() {
         </Loading>
     );
 }
-
-export default SiteConnectPage;
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 42cb18e8598..6a21bfc6e22 100644
--- a/apps/wallet/src/ui/app/shared/dapp-status/index.tsx
+++ b/apps/wallet/src/ui/app/shared/dapp-status/index.tsx
@@ -15,7 +15,7 @@ import { appDisconnect } from './actions';
 import { Link } from '@iota/ui-icons';
 import { Button, ButtonSize, ButtonType } from '@iota/apps-ui-kit';
 
-function DappStatus() {
+function DappStatusComponent() {
     const dispatch = useAppDispatch();
     const activeOriginUrl = useAppSelector(({ app }) => app.activeOrigin);
     const activeOrigin = useMemo(() => {
@@ -147,4 +147,4 @@ function DappStatus() {
     );
 }
 
-export default memo(DappStatus);
+export const DappStatus = memo(DappStatusComponent);
diff --git a/apps/wallet/src/ui/app/shared/faucet/FaucetMessageInfo.tsx b/apps/wallet/src/ui/app/shared/faucet/FaucetMessageInfo.tsx
index ffdd417b5b3..460f56b5340 100644
--- a/apps/wallet/src/ui/app/shared/faucet/FaucetMessageInfo.tsx
+++ b/apps/wallet/src/ui/app/shared/faucet/FaucetMessageInfo.tsx
@@ -11,7 +11,7 @@ export interface FaucetMessageInfoProps {
     totalReceived?: number | null;
 }
 
-function FaucetMessageInfo({
+export function FaucetMessageInfo({
     error = null,
     loading = false,
     totalReceived = null,
@@ -30,5 +30,3 @@ function FaucetMessageInfo({
         <>{`${totalReceived ? `${coinsReceivedFormatted} ` : ''}${coinsReceivedSymbol} requested`}</>
     );
 }
-
-export default FaucetMessageInfo;
diff --git a/apps/wallet/src/ui/app/shared/faucet/FaucetRequestButton.tsx b/apps/wallet/src/ui/app/shared/faucet/FaucetRequestButton.tsx
index fd8326069b2..0cd90bf29c0 100644
--- a/apps/wallet/src/ui/app/shared/faucet/FaucetRequestButton.tsx
+++ b/apps/wallet/src/ui/app/shared/faucet/FaucetRequestButton.tsx
@@ -10,9 +10,9 @@ import { toast } from 'react-hot-toast';
 import { useFaucetMutation } from './useFaucetMutation';
 import { useFaucetRateLimiter } from './useFaucetRateLimiter';
 import { Button, ButtonType } from '@iota/apps-ui-kit';
-import FaucetMessageInfo from './FaucetMessageInfo';
+import { FaucetMessageInfo } from './FaucetMessageInfo';
 
-function FaucetRequestButton(): JSX.Element | null {
+export function FaucetRequestButton(): JSX.Element | null {
     const network = useAppSelector(({ app }) => app.network);
     const customRpc = useAppSelector(({ app }) => app.customRpc);
     const networkConfig = customRpc ? getCustomNetwork(customRpc) : getNetwork(network);
@@ -50,5 +50,3 @@ function FaucetRequestButton(): JSX.Element | null {
         />
     ) : null;
 }
-
-export default FaucetRequestButton;
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 9896be915fb..28be9deb7e8 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
@@ -7,7 +7,7 @@ import cn from 'clsx';
 import { createContext, type ReactNode, useState } from 'react';
 import { useAppSelector } from '../../hooks';
 import { AppType } from '../../redux/slices/app/AppType';
-import DappStatus from '../dapp-status';
+import { DappStatus } from '../dapp-status';
 import { Header } from '../header/Header';
 import { Toaster } from '../toaster';
 import { IotaLogoMark, Ledger } from '@iota/ui-icons';
diff --git a/apps/wallet/src/ui/app/staking/home/index.tsx b/apps/wallet/src/ui/app/staking/home/index.tsx
index 1dd9407de84..69c09b97783 100644
--- a/apps/wallet/src/ui/app/staking/home/index.tsx
+++ b/apps/wallet/src/ui/app/staking/home/index.tsx
@@ -6,7 +6,7 @@ import { Route, Routes } from 'react-router-dom';
 
 import { useUnlockedGuard } from '../../hooks/useUnlockedGuard';
 import { DelegationDetail } from '../delegation-detail';
-import StakePage from '../stake';
+import { StakePage } from '../stake';
 import { Validators } from '../validators';
 
 export function StakingPage() {
diff --git a/apps/wallet/src/ui/app/staking/stake/StakeForm.tsx b/apps/wallet/src/ui/app/staking/stake/StakeForm.tsx
index 093991e6f33..fafa3a91a04 100644
--- a/apps/wallet/src/ui/app/staking/stake/StakeForm.tsx
+++ b/apps/wallet/src/ui/app/staking/stake/StakeForm.tsx
@@ -28,7 +28,12 @@ export interface StakeFromProps {
     epoch?: string | number;
 }
 
-function StakeForm({ validatorAddress, coinBalance, coinType, epoch }: StakeFromProps) {
+export function StakeFormComponent({
+    validatorAddress,
+    coinBalance,
+    coinType,
+    epoch,
+}: StakeFromProps) {
     const { values, setFieldValue } = useFormikContext<FormValues>();
     const activeAddress = useActiveAddress();
     const { data: metadata } = useCoinMetadata(coinType);
@@ -117,4 +122,4 @@ function StakeForm({ validatorAddress, coinBalance, coinType, epoch }: StakeFrom
     );
 }
 
-export default memo(StakeForm);
+export const StakeForm = memo(StakeFormComponent);
diff --git a/apps/wallet/src/ui/app/staking/stake/StakingCard.tsx b/apps/wallet/src/ui/app/staking/stake/StakingCard.tsx
index a4f94a5de47..b3890480c5b 100644
--- a/apps/wallet/src/ui/app/staking/stake/StakingCard.tsx
+++ b/apps/wallet/src/ui/app/staking/stake/StakingCard.tsx
@@ -32,7 +32,7 @@ import { getSignerOperationErrorMessage } from '../../helpers/errorMessages';
 import { useActiveAccount } from '../../hooks/useActiveAccount';
 import { useSigner } from '../../hooks/useSigner';
 import { getDelegationDataByStakeId } from '../getDelegationByStakeId';
-import StakeForm from './StakeForm';
+import { StakeForm } from './StakeForm';
 import { UnStakeForm } from './UnstakeForm';
 import { ValidatorFormDetail } from './ValidatorFormDetail';
 import {
@@ -52,7 +52,7 @@ const INITIAL_VALUES = {
 
 export type FormValues = typeof INITIAL_VALUES;
 
-function StakingCard() {
+export function StakingCard() {
     const coinType = IOTA_TYPE_ARG;
     const activeAccount = useActiveAccount();
     const accountAddress = activeAccount?.address;
@@ -347,5 +347,3 @@ function StakingCard() {
         </div>
     );
 }
-
-export default StakingCard;
diff --git a/apps/wallet/src/ui/app/staking/stake/index.tsx b/apps/wallet/src/ui/app/staking/stake/index.tsx
index 4add0478403..60770068945 100644
--- a/apps/wallet/src/ui/app/staking/stake/index.tsx
+++ b/apps/wallet/src/ui/app/staking/stake/index.tsx
@@ -6,9 +6,9 @@ import { Overlay } from '_components';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import { SelectValidatorCard } from '../validators/SelectValidatorCard';
-import StakingCard from './StakingCard';
+import { StakingCard } from './StakingCard';
 
-function StakePage() {
+export function StakePage() {
     const [searchParams] = useSearchParams();
     const validatorAddress = searchParams.get('address');
     const unstake = searchParams.get('unstake') === 'true';
@@ -27,5 +27,3 @@ function StakePage() {
         </Overlay>
     );
 }
-
-export default StakePage;
diff --git a/apps/wallet/src/ui/index.tsx b/apps/wallet/src/ui/index.tsx
index f3ef312b1c3..90c43f75e57 100644
--- a/apps/wallet/src/ui/index.tsx
+++ b/apps/wallet/src/ui/index.tsx
@@ -22,8 +22,7 @@ import { Fragment, StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { HashRouter } from 'react-router-dom';
-
-import App from './app';
+import { App } from './app';
 import { walletApiProvider } from './app/ApiProvider';
 import { AccountsFormProvider } from './app/components/accounts/AccountsFormContext';
 import { UnlockAccountProvider } from './app/components/accounts/UnlockAccountContext';