diff --git a/.changeset/many-apples-sneeze.md b/.changeset/many-apples-sneeze.md
new file mode 100644
index 00000000..5c1f02ea
--- /dev/null
+++ b/.changeset/many-apples-sneeze.md
@@ -0,0 +1,5 @@
+---
+'@rosen-bridge/watcher-app': patch
+---
+
+Update the modules to utilize named exports, enhancing maintainability and aligning with our policy to ensure greater consistency
diff --git a/apps/watcher/app/(home)/@actions/page.tsx b/apps/watcher/app/(home)/@actions/page.tsx
index 0f270cf2..32ade1f0 100644
--- a/apps/watcher/app/(home)/@actions/page.tsx
+++ b/apps/watcher/app/(home)/@actions/page.tsx
@@ -9,7 +9,7 @@ import {
 } from '@rosen-bridge/icons';
 import { FullCard, SvgIcon } from '@rosen-bridge/ui-kit';
 
-import HomeActionButton from '@/_components/HomeActionButton';
+import { HomeActionButton } from '@/_components/HomeActionButton';
 
 const Actions = () => {
   return (
diff --git a/apps/watcher/app/(home)/@address/AddressSkeleton.tsx b/apps/watcher/app/(home)/@address/AddressSkeleton.tsx
index 16a0fd3b..db410edd 100644
--- a/apps/watcher/app/(home)/@address/AddressSkeleton.tsx
+++ b/apps/watcher/app/(home)/@address/AddressSkeleton.tsx
@@ -3,8 +3,6 @@ import { Skeleton } from '@rosen-bridge/ui-kit';
 /**
  * render a skeleton element for address section of home page
  */
-const AddressSkeleton = () => (
+export const AddressSkeleton = () => (
   <Skeleton animation="wave" height={60} width="100%" />
 );
-
-export default AddressSkeleton;
diff --git a/apps/watcher/app/(home)/@address/CopyButton.tsx b/apps/watcher/app/(home)/@address/CopyButton.tsx
index cf3c49b8..74d467a9 100644
--- a/apps/watcher/app/(home)/@address/CopyButton.tsx
+++ b/apps/watcher/app/(home)/@address/CopyButton.tsx
@@ -17,7 +17,7 @@ interface CopyButtonProps {
  *
  * @param address
  */
-const CopyButton = ({ address }: CopyButtonProps) => {
+export const CopyButton = ({ address }: CopyButtonProps) => {
   const [open, setOpen] = React.useState(false);
 
   const handleClose = (
@@ -43,5 +43,3 @@ const CopyButton = ({ address }: CopyButtonProps) => {
     </>
   );
 };
-
-export default CopyButton;
diff --git a/apps/watcher/app/(home)/@address/QrCodeButton.tsx b/apps/watcher/app/(home)/@address/QrCodeButton.tsx
index bd0ccc27..9b4f0fa4 100644
--- a/apps/watcher/app/(home)/@address/QrCodeButton.tsx
+++ b/apps/watcher/app/(home)/@address/QrCodeButton.tsx
@@ -11,7 +11,7 @@ interface QrCodeButtonProps {
  * provided address when clicked
  * @param address
  */
-const QrCodeButton = ({ address }: QrCodeButtonProps) => {
+export const QrCodeButton = ({ address }: QrCodeButtonProps) => {
   const [open, setOpen] = React.useState(false);
 
   const handleOpen = () => setOpen(true);
@@ -28,5 +28,3 @@ const QrCodeButton = ({ address }: QrCodeButtonProps) => {
     </>
   );
 };
-
-export default QrCodeButton;
diff --git a/apps/watcher/app/(home)/@address/page.tsx b/apps/watcher/app/(home)/@address/page.tsx
index d694e240..fbfc5857 100644
--- a/apps/watcher/app/(home)/@address/page.tsx
+++ b/apps/watcher/app/(home)/@address/page.tsx
@@ -6,9 +6,9 @@ import useSWR from 'swr';
 import { Box, Card, FullCard, Grid, Typography } from '@rosen-bridge/ui-kit';
 import { fetcher } from '@rosen-ui/swr-helpers';
 
-import AddressSkeleton from './AddressSkeleton';
-import CopyButton from './CopyButton';
-import QrCodeButton from './QrCodeButton';
+import { AddressSkeleton } from './AddressSkeleton';
+import { CopyButton } from './CopyButton';
+import { QrCodeButton } from './QrCodeButton';
 
 import { ApiInfoResponse } from '@/_types/api';
 
diff --git a/apps/watcher/app/(home)/@infoWidgets/InfoWidgetCard.tsx b/apps/watcher/app/(home)/@infoWidgets/InfoWidgetCard.tsx
index 1a12ab33..b9f3b4e0 100644
--- a/apps/watcher/app/(home)/@infoWidgets/InfoWidgetCard.tsx
+++ b/apps/watcher/app/(home)/@infoWidgets/InfoWidgetCard.tsx
@@ -85,7 +85,7 @@ interface InfoWidgetCardProps {
  * @param unit
  * @param value
  */
-const InfoWidgetCard = ({
+export const InfoWidgetCard = ({
   color = 'secondary',
   icon,
   isLoading,
@@ -125,5 +125,3 @@ const InfoWidgetCard = ({
     </InfoWidgetCardBase>
   );
 };
-
-export default InfoWidgetCard;
diff --git a/apps/watcher/app/(home)/@infoWidgets/page.tsx b/apps/watcher/app/(home)/@infoWidgets/page.tsx
index 30d9aef1..a1b5bfaf 100644
--- a/apps/watcher/app/(home)/@infoWidgets/page.tsx
+++ b/apps/watcher/app/(home)/@infoWidgets/page.tsx
@@ -10,17 +10,17 @@ import {
   ShieldExclamation,
   Wallet,
 } from '@rosen-bridge/icons';
-import { Box, Grid, SvgIcon, Typography } from '@rosen-bridge/ui-kit';
+import { Box, Grid, SvgIcon } from '@rosen-bridge/ui-kit';
 import { healthStatusColorMap } from '@rosen-ui/constants';
 import { fetcher } from '@rosen-ui/swr-helpers';
 import { AugmentedPalette } from '@rosen-ui/types';
 import { getDecimalString } from '@rosen-ui/utils';
 
-import InfoWidgetCard from './InfoWidgetCard';
+import { InfoWidgetCard } from './InfoWidgetCard';
 
-import useRsnToken from '@/_hooks/useRsnToken';
-import useERsnToken from '@/_hooks/useERsnToken';
-import useToken from '@/_hooks/useToken';
+import { useRsnToken } from '@/_hooks/useRsnToken';
+import { useERsnToken } from '@/_hooks/useERsnToken';
+import { useToken } from '@/_hooks/useToken';
 
 import { ApiInfoResponse } from '@/_types/api';
 
diff --git a/apps/watcher/app/(home)/@revenue/PeriodSelect.tsx b/apps/watcher/app/(home)/@revenue/PeriodSelect.tsx
index da1c173e..15c80449 100644
--- a/apps/watcher/app/(home)/@revenue/PeriodSelect.tsx
+++ b/apps/watcher/app/(home)/@revenue/PeriodSelect.tsx
@@ -15,7 +15,7 @@ interface PeriodSelectProps {
  * @param period
  * @param setPeriod
  */
-const PeriodSelect = ({ period, setPeriod }: PeriodSelectProps) => {
+export const PeriodSelect = ({ period, setPeriod }: PeriodSelectProps) => {
   const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(
     null,
   );
@@ -84,5 +84,3 @@ const PeriodSelect = ({ period, setPeriod }: PeriodSelectProps) => {
     </Box>
   );
 };
-
-export default PeriodSelect;
diff --git a/apps/watcher/app/(home)/@revenue/RevenueChart.tsx b/apps/watcher/app/(home)/@revenue/RevenueChart.tsx
index 6e06135f..35de5e84 100644
--- a/apps/watcher/app/(home)/@revenue/RevenueChart.tsx
+++ b/apps/watcher/app/(home)/@revenue/RevenueChart.tsx
@@ -63,7 +63,7 @@ interface RevenueChartProps {
  * @param period
  * @param data
  */
-const RevenueChart = ({ period, data }: RevenueChartProps) => {
+export const RevenueChart = ({ period, data }: RevenueChartProps) => {
   const theme = useTheme();
 
   const reversedData = useMemo(
@@ -138,5 +138,3 @@ const RevenueChart = ({ period, data }: RevenueChartProps) => {
     />
   );
 };
-
-export default RevenueChart;
diff --git a/apps/watcher/app/(home)/@revenue/RevenueChartSkeleton.tsx b/apps/watcher/app/(home)/@revenue/RevenueChartSkeleton.tsx
index a11533c2..6b2cbc49 100644
--- a/apps/watcher/app/(home)/@revenue/RevenueChartSkeleton.tsx
+++ b/apps/watcher/app/(home)/@revenue/RevenueChartSkeleton.tsx
@@ -3,8 +3,6 @@ import { Skeleton } from '@rosen-bridge/ui-kit';
 /**
  * render a skeleton element for `RevenueChart`
  */
-const RevenueChartSkeleton = () => (
+export const RevenueChartSkeleton = () => (
   <Skeleton animation="wave" height={240} width="100%" />
 );
-
-export default RevenueChartSkeleton;
diff --git a/apps/watcher/app/(home)/@revenue/page.tsx b/apps/watcher/app/(home)/@revenue/page.tsx
index d2f97d58..dc63f6a5 100644
--- a/apps/watcher/app/(home)/@revenue/page.tsx
+++ b/apps/watcher/app/(home)/@revenue/page.tsx
@@ -8,8 +8,8 @@ import { FullCard } from '@rosen-bridge/ui-kit';
 import { fetcher } from '@rosen-ui/swr-helpers';
 import { ChartPeriod } from '@rosen-ui/types';
 
-import PeriodSelect from './PeriodSelect';
-import RevenueChartSkeleton from './RevenueChartSkeleton';
+import { PeriodSelect } from './PeriodSelect';
+import { RevenueChartSkeleton } from './RevenueChartSkeleton';
 
 import { ApiRevenueChartResponse } from '@/_types/api';
 
@@ -17,7 +17,10 @@ import { ApiRevenueChartResponse } from '@/_types/api';
  * This is required because revenue chart cannot be pre-rendered in next and
  * throws an error
  */
-const RevenueChart = dynamic(() => import('./RevenueChart'), { ssr: false });
+const RevenueChart = dynamic(
+  () => import('./RevenueChart').then((mod) => mod.RevenueChart),
+  { ssr: false },
+);
 
 const Revenue = () => {
   const [period, setPeriod] = useState<ChartPeriod>('week');
diff --git a/apps/watcher/app/App.tsx b/apps/watcher/app/App.tsx
index 3c7f2de4..46587b8c 100644
--- a/apps/watcher/app/App.tsx
+++ b/apps/watcher/app/App.tsx
@@ -19,12 +19,12 @@ import {
 import { ApiKeyContextProvider } from '@rosen-bridge/shared-contexts';
 
 import { SideBar } from './SideBar';
-import Toolbar from './Toolbar';
+import { Toolbar } from './Toolbar';
 
 import { theme } from './_theme/theme';
 
-import mockedData from './_mock/mockedData';
-import useInfo from './_hooks/useInfo';
+import { mockedData } from './_mock/mockedData';
+import { useInfo } from './_hooks/useInfo';
 import { upperFirst } from 'lodash-es';
 
 const Root = styled('div')(({ theme }) => ({
@@ -72,7 +72,7 @@ interface AppProps {
   children?: React.ReactNode;
 }
 
-const App = ({ children }: AppProps) => {
+export const App = ({ children }: AppProps) => {
   const { data: info } = useInfo();
 
   /**
@@ -126,5 +126,3 @@ const App = ({ children }: AppProps) => {
     </NoSsr>
   );
 };
-
-export default App;
diff --git a/apps/watcher/app/SideBar.tsx b/apps/watcher/app/SideBar.tsx
index ffd16161..d7efb578 100644
--- a/apps/watcher/app/SideBar.tsx
+++ b/apps/watcher/app/SideBar.tsx
@@ -10,7 +10,7 @@ import {
 } from '@rosen-bridge/icons';
 import { AppBar, AppLogo } from '@rosen-bridge/ui-kit';
 
-import useInfo from './_hooks/useInfo';
+import { useInfo } from './_hooks/useInfo';
 
 import packageJson from '../package.json';
 
diff --git a/apps/watcher/app/Toolbar.tsx b/apps/watcher/app/Toolbar.tsx
index 7d480dca..beeea818 100644
--- a/apps/watcher/app/Toolbar.tsx
+++ b/apps/watcher/app/Toolbar.tsx
@@ -20,7 +20,7 @@ const pageTitleMap: Record<string, string> = {
 /**
  * render toolbar containing page title and some actions
  */
-const Toolbar = () => {
+export const Toolbar = () => {
   const page = useSelectedLayoutSegment();
 
   return (
@@ -35,5 +35,3 @@ const Toolbar = () => {
     />
   );
 };
-
-export default Toolbar;
diff --git a/apps/watcher/app/_components/HomeActionButton.tsx b/apps/watcher/app/_components/HomeActionButton.tsx
index e005e4e1..1bba0355 100644
--- a/apps/watcher/app/_components/HomeActionButton.tsx
+++ b/apps/watcher/app/_components/HomeActionButton.tsx
@@ -48,7 +48,7 @@ interface HomeActionButtonProps {
  * @param action
  * @param disabled
  */
-const HomeActionButton = ({
+export const HomeActionButton = ({
   label,
   icon,
   action,
@@ -66,5 +66,3 @@ const HomeActionButton = ({
     </HomeActionButtonBase>
   );
 };
-
-export default HomeActionButton;
diff --git a/apps/watcher/app/_hooks/useERsnToken.ts b/apps/watcher/app/_hooks/useERsnToken.ts
index 010fa456..628420ba 100644
--- a/apps/watcher/app/_hooks/useERsnToken.ts
+++ b/apps/watcher/app/_hooks/useERsnToken.ts
@@ -2,14 +2,14 @@ import useSWR from 'swr';
 
 import { fetcher } from '@rosen-ui/swr-helpers';
 
-import useToken from './useToken';
+import { useToken } from './useToken';
 
 import { ApiInfoResponse } from '@/_types/api';
 
 /**
  * fetch ersn token info (if present)
  */
-const useERsnToken = () => {
+export const useERsnToken = () => {
   const { data: info, isLoading: isInfoLoading } = useSWR<ApiInfoResponse>(
     '/info',
     fetcher,
@@ -24,5 +24,3 @@ const useERsnToken = () => {
     isLoading: isInfoLoading || isERsnInfoLoading,
   };
 };
-
-export default useERsnToken;
diff --git a/apps/watcher/app/_hooks/useInfo.ts b/apps/watcher/app/_hooks/useInfo.ts
index d9605c9f..5ef120a8 100644
--- a/apps/watcher/app/_hooks/useInfo.ts
+++ b/apps/watcher/app/_hooks/useInfo.ts
@@ -6,6 +6,4 @@ import { ApiInfoResponse } from '@/_types/api';
 /**
  * wrap useSWR for fetching info api
  */
-const useInfo = () => useSWR<ApiInfoResponse>('/info', fetcher);
-
-export default useInfo;
+export const useInfo = () => useSWR<ApiInfoResponse>('/info', fetcher);
diff --git a/apps/watcher/app/_hooks/useRsnToken.ts b/apps/watcher/app/_hooks/useRsnToken.ts
index ad5d798a..3a117a5e 100644
--- a/apps/watcher/app/_hooks/useRsnToken.ts
+++ b/apps/watcher/app/_hooks/useRsnToken.ts
@@ -2,14 +2,14 @@ import useSWR from 'swr';
 
 import { fetcher } from '@rosen-ui/swr-helpers';
 
-import useToken from './useToken';
+import { useToken } from './useToken';
 
 import { ApiInfoResponse } from '@/_types/api';
 
 /**
  * fetch rsn token info (if present)
  */
-const useRsnToken = () => {
+export const useRsnToken = () => {
   const { data: info, isLoading: isInfoLoading } = useSWR<ApiInfoResponse>(
     '/info',
     fetcher,
@@ -24,5 +24,3 @@ const useRsnToken = () => {
     isLoading: isInfoLoading || isRsnInfoLoading,
   };
 };
-
-export default useRsnToken;
diff --git a/apps/watcher/app/_hooks/useToken.ts b/apps/watcher/app/_hooks/useToken.ts
index 29eb51bc..4f59cbbe 100644
--- a/apps/watcher/app/_hooks/useToken.ts
+++ b/apps/watcher/app/_hooks/useToken.ts
@@ -7,7 +7,7 @@ import { ApiAddressAssetsResponse } from '@/_types/api';
 /**
  * fetch a token info (if present)
  */
-const useToken = (tokenId: string | undefined) => {
+export const useToken = (tokenId: string | undefined) => {
   const { data, isLoading } = useSWR<ApiAddressAssetsResponse>(
     tokenId
       ? [
@@ -25,5 +25,3 @@ const useToken = (tokenId: string | undefined) => {
     isLoading,
   };
 };
-
-export default useToken;
diff --git a/apps/watcher/app/_mock/mockedData.ts b/apps/watcher/app/_mock/mockedData.ts
index eea5aa6f..49e443f8 100644
--- a/apps/watcher/app/_mock/mockedData.ts
+++ b/apps/watcher/app/_mock/mockedData.ts
@@ -386,7 +386,7 @@ const events: ApiEventResponse = {
   items: generateEventRecords(100),
 };
 
-const mockedData: SWRConfigProps['fakeData'] = {
+export const mockedData: SWRConfigProps['fakeData'] = {
   withStringKeys: {
     '/info': info,
     '/health/status': healthStatus,
@@ -429,5 +429,3 @@ const mockedData: SWRConfigProps['fakeData'] = {
     },
   },
 };
-
-export default mockedData;
diff --git a/apps/watcher/app/actions/@form/lock/page.tsx b/apps/watcher/app/actions/@form/lock/page.tsx
index f705dd2a..691d3c8d 100644
--- a/apps/watcher/app/actions/@form/lock/page.tsx
+++ b/apps/watcher/app/actions/@form/lock/page.tsx
@@ -22,16 +22,17 @@ import {
   getTxURL,
 } from '@rosen-ui/utils';
 
-import ConfirmationModal from '../../ConfirmationModal';
-import TokenAmountTextField, {
+import { ConfirmationModal } from '../../ConfirmationModal';
+import {
+  TokenAmountTextField,
   TokenAmountCompatibleFormSchema,
 } from '../../TokenAmountTextField';
 
 import { Alert } from '@rosen-bridge/icons';
 
 import { useApiKey } from '@rosen-bridge/shared-contexts';
-import useRsnToken from '@/_hooks/useRsnToken';
-import useToken from '@/_hooks/useToken';
+import { useRsnToken } from '@/_hooks/useRsnToken';
+import { useToken } from '@/_hooks/useToken';
 
 import {
   ApiPermitRequestBody,
diff --git a/apps/watcher/app/actions/@form/unlock/page.tsx b/apps/watcher/app/actions/@form/unlock/page.tsx
index f8b3860b..e11ee6cb 100644
--- a/apps/watcher/app/actions/@form/unlock/page.tsx
+++ b/apps/watcher/app/actions/@form/unlock/page.tsx
@@ -20,13 +20,14 @@ import { getNonDecimalString } from '@rosen-ui/utils';
 
 import { Alert } from '@rosen-bridge/icons';
 
-import ConfirmationModal from '../../ConfirmationModal';
-import TokenAmountTextField, {
+import { ConfirmationModal } from '../../ConfirmationModal';
+import {
+  TokenAmountTextField,
   TokenAmountCompatibleFormSchema,
 } from '../../TokenAmountTextField';
 
 import { useApiKey } from '@rosen-bridge/shared-contexts';
-import useRsnToken from '@/_hooks/useRsnToken';
+import { useRsnToken } from '@/_hooks/useRsnToken';
 
 import {
   ApiInfoResponse,
diff --git a/apps/watcher/app/actions/@form/withdraw/page.tsx b/apps/watcher/app/actions/@form/withdraw/page.tsx
index 10a27858..9233bcb2 100644
--- a/apps/watcher/app/actions/@form/withdraw/page.tsx
+++ b/apps/watcher/app/actions/@form/withdraw/page.tsx
@@ -30,12 +30,13 @@ import { getNonDecimalString } from '@rosen-ui/utils';
 
 import { Alert } from '@rosen-bridge/icons';
 
-import ConfirmationModal from '../../ConfirmationModal';
-import TokenAmountTextField, {
+import { ConfirmationModal } from '../../ConfirmationModal';
+import {
+  TokenAmountTextField,
   TokenAmountCompatibleFormSchema,
 } from '../../TokenAmountTextField';
 
-import useToken from '@/_hooks/useToken';
+import { useToken } from '@/_hooks/useToken';
 import { useApiKey } from '@rosen-bridge/shared-contexts';
 
 import {
diff --git a/apps/watcher/app/actions/@text/lock/page.tsx b/apps/watcher/app/actions/@text/lock/page.tsx
index d6da2d29..84b282bc 100644
--- a/apps/watcher/app/actions/@text/lock/page.tsx
+++ b/apps/watcher/app/actions/@text/lock/page.tsx
@@ -7,10 +7,10 @@ import { CircularProgress, Typography } from '@rosen-bridge/ui-kit';
 import { fetcher } from '@rosen-ui/swr-helpers';
 import { getDecimalString } from '@rosen-ui/utils';
 
-import ActionText from '../../ActionText';
+import { ActionText } from '../../ActionText';
 
-import useToken from '@/_hooks/useToken';
-import useRsnToken from '@/_hooks/useRsnToken';
+import { useToken } from '@/_hooks/useToken';
+import { useRsnToken } from '@/_hooks/useRsnToken';
 
 import { ApiInfoResponse } from '@/_types/api';
 
diff --git a/apps/watcher/app/actions/@text/unlock/page.tsx b/apps/watcher/app/actions/@text/unlock/page.tsx
index 256770c7..cc33d5d8 100644
--- a/apps/watcher/app/actions/@text/unlock/page.tsx
+++ b/apps/watcher/app/actions/@text/unlock/page.tsx
@@ -6,7 +6,7 @@ import useSWR from 'swr';
 import { Typography } from '@rosen-bridge/ui-kit';
 import { fetcher } from '@rosen-ui/swr-helpers';
 
-import ActionText from '../../ActionText';
+import { ActionText } from '../../ActionText';
 
 import { ApiInfoResponse } from '@/_types/api';
 
diff --git a/apps/watcher/app/actions/@text/withdraw/page.tsx b/apps/watcher/app/actions/@text/withdraw/page.tsx
index 446c20ce..78c3d7f1 100644
--- a/apps/watcher/app/actions/@text/withdraw/page.tsx
+++ b/apps/watcher/app/actions/@text/withdraw/page.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import { Typography } from '@rosen-bridge/ui-kit';
 
-import ActionText from '../../ActionText';
+import { ActionText } from '../../ActionText';
 
 const WithdrawalText = () => {
   return (
diff --git a/apps/watcher/app/actions/ActionText.tsx b/apps/watcher/app/actions/ActionText.tsx
index 3f20a063..35a0113b 100644
--- a/apps/watcher/app/actions/ActionText.tsx
+++ b/apps/watcher/app/actions/ActionText.tsx
@@ -10,7 +10,7 @@ interface ActionText {
  * render a card showing some text to be used in actions page
  * @param children
  */
-const ActionText = ({ title, children }: ActionText) => (
+export const ActionText = ({ title, children }: ActionText) => (
   <FullCard
     title={title}
     backgroundColor="divider"
@@ -19,5 +19,3 @@ const ActionText = ({ title, children }: ActionText) => (
     {children}
   </FullCard>
 );
-
-export default ActionText;
diff --git a/apps/watcher/app/actions/ConfirmationModal.tsx b/apps/watcher/app/actions/ConfirmationModal.tsx
index 6566b13d..2e37fd65 100644
--- a/apps/watcher/app/actions/ConfirmationModal.tsx
+++ b/apps/watcher/app/actions/ConfirmationModal.tsx
@@ -27,7 +27,7 @@ interface ConfirmationModalProps {
  * @param onConfirm
  * @param handleClose
  */
-const ConfirmationModal = ({
+export const ConfirmationModal = ({
   open,
   title,
   content,
@@ -66,5 +66,3 @@ const ConfirmationModal = ({
     </Dialog>
   );
 };
-
-export default ConfirmationModal;
diff --git a/apps/watcher/app/actions/ToggleButton.tsx b/apps/watcher/app/actions/ToggleButton.tsx
index 8bf648c3..00ddf505 100644
--- a/apps/watcher/app/actions/ToggleButton.tsx
+++ b/apps/watcher/app/actions/ToggleButton.tsx
@@ -43,7 +43,7 @@ interface CustomToggleButtonProps extends ToggleButtonProps {
  * @param label
  * @param icon
  */
-const ToggleButton = ({
+export const ToggleButton = ({
   label,
   icon,
   ...restProps
@@ -54,5 +54,3 @@ const ToggleButton = ({
     </ToggleButtonBase>
   );
 };
-
-export default ToggleButton;
diff --git a/apps/watcher/app/actions/TokenAmountTextField.tsx b/apps/watcher/app/actions/TokenAmountTextField.tsx
index f07b0de0..7e6a9109 100644
--- a/apps/watcher/app/actions/TokenAmountTextField.tsx
+++ b/apps/watcher/app/actions/TokenAmountTextField.tsx
@@ -31,7 +31,7 @@ interface TokenAmountTextFieldProps {
  * @param loading
  * @param token
  */
-const TokenAmountTextField = ({
+export const TokenAmountTextField = ({
   disabled,
   loading,
   token,
@@ -124,5 +124,3 @@ const TokenAmountTextField = ({
     />
   );
 };
-
-export default TokenAmountTextField;
diff --git a/apps/watcher/app/actions/layout.tsx b/apps/watcher/app/actions/layout.tsx
index f269e6b1..2689286a 100644
--- a/apps/watcher/app/actions/layout.tsx
+++ b/apps/watcher/app/actions/layout.tsx
@@ -18,7 +18,7 @@ import {
   Grid,
 } from '@rosen-bridge/ui-kit';
 
-import ToggleButton from './ToggleButton';
+import { ToggleButton } from './ToggleButton';
 
 import { LayoutProps } from '@rosen-ui/types';
 
diff --git a/apps/watcher/app/events/TableSkeleton.tsx b/apps/watcher/app/events/TableSkeleton.tsx
index 0a760bc4..174cc526 100644
--- a/apps/watcher/app/events/TableSkeleton.tsx
+++ b/apps/watcher/app/events/TableSkeleton.tsx
@@ -13,7 +13,7 @@ interface TableSkeletonProps {
   numberOfItems: number;
 }
 
-const TableSkeleton: FC<TableSkeletonProps> = (props) => {
+export const TableSkeleton: FC<TableSkeletonProps> = (props) => {
   const renderMobileRow = useCallback(
     () => (
       <TableRow>
@@ -65,5 +65,3 @@ const TableSkeleton: FC<TableSkeletonProps> = (props) => {
     />
   );
 };
-
-export default TableSkeleton;
diff --git a/apps/watcher/app/events/page.tsx b/apps/watcher/app/events/page.tsx
index 93c16088..a16fbe3f 100644
--- a/apps/watcher/app/events/page.tsx
+++ b/apps/watcher/app/events/page.tsx
@@ -9,7 +9,7 @@ import {
 } from '@rosen-bridge/ui-kit';
 
 import { MobileRow, TabletRow, mobileHeader, tabletHeader } from './TableRow';
-import TableSkeleton from './TableSkeleton';
+import { TableSkeleton } from './TableSkeleton';
 
 import { ApiEventResponse, Event } from '@/_types/api';
 
diff --git a/apps/watcher/app/layout.tsx b/apps/watcher/app/layout.tsx
index ccc79593..8f99e1ed 100644
--- a/apps/watcher/app/layout.tsx
+++ b/apps/watcher/app/layout.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import App from './App';
+import { App } from './App';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
diff --git a/apps/watcher/app/observations/TableSkeleton.tsx b/apps/watcher/app/observations/TableSkeleton.tsx
index 0a760bc4..174cc526 100644
--- a/apps/watcher/app/observations/TableSkeleton.tsx
+++ b/apps/watcher/app/observations/TableSkeleton.tsx
@@ -13,7 +13,7 @@ interface TableSkeletonProps {
   numberOfItems: number;
 }
 
-const TableSkeleton: FC<TableSkeletonProps> = (props) => {
+export const TableSkeleton: FC<TableSkeletonProps> = (props) => {
   const renderMobileRow = useCallback(
     () => (
       <TableRow>
@@ -65,5 +65,3 @@ const TableSkeleton: FC<TableSkeletonProps> = (props) => {
     />
   );
 };
-
-export default TableSkeleton;
diff --git a/apps/watcher/app/observations/page.tsx b/apps/watcher/app/observations/page.tsx
index 0edc103c..1bbec09e 100644
--- a/apps/watcher/app/observations/page.tsx
+++ b/apps/watcher/app/observations/page.tsx
@@ -9,7 +9,7 @@ import {
 } from '@rosen-bridge/ui-kit';
 
 import { MobileRow, TabletRow, mobileHeader, tabletHeader } from './TableRow';
-import TableSkeleton from './TableSkeleton';
+import { TableSkeleton } from './TableSkeleton';
 
 import { ApiObservationResponse, Observation } from '@/_types/api';
 
diff --git a/apps/watcher/app/revenues/TableRow.tsx b/apps/watcher/app/revenues/TableRow.tsx
index 22d97c41..53f9fa15 100644
--- a/apps/watcher/app/revenues/TableRow.tsx
+++ b/apps/watcher/app/revenues/TableRow.tsx
@@ -5,10 +5,10 @@ import { getDecimalString } from '@rosen-ui/utils';
 
 import { AngleDown, AngleUp } from '@rosen-bridge/icons';
 
-import useRsnToken from '@/_hooks/useRsnToken';
+import { useRsnToken } from '@/_hooks/useRsnToken';
 
 import { Revenue } from '@/_types/api';
-import useERsnToken from '@/_hooks/useERsnToken';
+import { useERsnToken } from '@/_hooks/useERsnToken';
 
 interface RowProps extends Revenue {
   isLoading?: boolean;
diff --git a/apps/watcher/app/revenues/TableSkeleton.tsx b/apps/watcher/app/revenues/TableSkeleton.tsx
index 0a760bc4..174cc526 100644
--- a/apps/watcher/app/revenues/TableSkeleton.tsx
+++ b/apps/watcher/app/revenues/TableSkeleton.tsx
@@ -13,7 +13,7 @@ interface TableSkeletonProps {
   numberOfItems: number;
 }
 
-const TableSkeleton: FC<TableSkeletonProps> = (props) => {
+export const TableSkeleton: FC<TableSkeletonProps> = (props) => {
   const renderMobileRow = useCallback(
     () => (
       <TableRow>
@@ -65,5 +65,3 @@ const TableSkeleton: FC<TableSkeletonProps> = (props) => {
     />
   );
 };
-
-export default TableSkeleton;
diff --git a/apps/watcher/app/revenues/page.tsx b/apps/watcher/app/revenues/page.tsx
index c49c80ac..4bdf4854 100644
--- a/apps/watcher/app/revenues/page.tsx
+++ b/apps/watcher/app/revenues/page.tsx
@@ -9,7 +9,7 @@ import {
 } from '@rosen-bridge/ui-kit';
 
 import { MobileRow, TabletRow, mobileHeader, tabletHeader } from './TableRow';
-import TableSkeleton from './TableSkeleton';
+import { TableSkeleton } from './TableSkeleton';
 
 import { ApiRevenueResponse, Revenue } from '@/_types/api';