diff --git a/apps/gateway-ui/src/components/BalanceTab.tsx b/apps/gateway-ui/src/components/BalanceTab.tsx
deleted file mode 100644
index 6959c3f86..000000000
--- a/apps/gateway-ui/src/components/BalanceTab.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import { Box, Flex, Text, useTheme } from '@chakra-ui/react';
-import { useTranslation } from '@fedimint/utils';
-import { GatewayCard } from '.';
-
-interface BalanceTabProps {
-  balance_msat: number;
-}
-
-export const BalanceTab = React.memo(function BalanceTab(
-  props: BalanceTabProps
-): JSX.Element {
-  const { t } = useTranslation();
-  const { balance_msat } = props;
-  const theme = useTheme();
-
-  return (
-    <Box w='100%'>
-      <GatewayCard>
-        <Box>
-          <Text
-            fontSize='lg'
-            fontWeight='600'
-            color={theme.colors.gray[900]}
-            fontFamily={theme.fonts.body}
-          >
-            {t('balance-tab.tab_header')}
-          </Text>
-          <Text
-            fontSize='sm'
-            color={theme.colors.gray[600]}
-            fontFamily={theme.fonts.body}
-            pt='4px'
-          >
-            {t('balance-tab.sentence')}
-          </Text>
-        </Box>
-        <Flex>
-          <Text
-            fontSize='24px'
-            fontWeight='600'
-            color={theme.colors.gray[800]}
-            fontFamily={theme.fonts.body}
-          >
-            {balance_msat}
-          </Text>
-        </Flex>
-      </GatewayCard>
-    </Box>
-  );
-});
diff --git a/apps/gateway-ui/src/components/DepositTab.tsx b/apps/gateway-ui/src/components/DepositTab.tsx
deleted file mode 100644
index 25664e1f2..000000000
--- a/apps/gateway-ui/src/components/DepositTab.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  Text,
-  Flex,
-  useTheme,
-  Stack,
-  Link,
-  Box,
-  useClipboard,
-} from '@chakra-ui/react';
-import { ApiContext } from '../ApiProvider';
-import { QRCodeSVG } from 'qrcode.react';
-import { useTranslation } from '@fedimint/utils';
-import { GatewayCard } from './GatewayCard';
-import { ReactComponent as CopyIcon } from '../assets/svgs/copy.svg';
-import { ReactComponent as LinkIcon } from '../assets/svgs/linkIcon.svg';
-
-export interface DepositTabProps {
-  federationId: string;
-}
-
-export const DepositTab = React.memo(function DepositTab({
-  federationId,
-}: DepositTabProps): JSX.Element {
-  const { t } = useTranslation();
-  const { gateway } = React.useContext(ApiContext);
-  const [address, setAddress] = useState<string>('');
-  const [error, setError] = useState<string>('');
-  const theme = useTheme();
-  const { onCopy, hasCopied } = useClipboard(address);
-
-  useEffect(() => {
-    !address &&
-      gateway
-        .fetchAddress(federationId)
-        .then((newAddress) => {
-          setAddress(newAddress);
-          setError('');
-        })
-        .catch(({ message, error }) => {
-          console.error(error);
-          setError(message);
-        });
-  }, [address, federationId, gateway]);
-
-  return (
-    <GatewayCard>
-      <Stack spacing='12px'>
-        <Text
-          fontSize='lg'
-          fontWeight='600'
-          color={theme.colors.gray[900]}
-          fontFamily={theme.fonts.body}
-        >
-          {t('deposit-tab.tab_header')}
-        </Text>
-        <Text
-          fontSize='md'
-          color={theme.colors.gray[600]}
-          fontFamily={theme.fonts.body}
-        >
-          {t('deposit-tab.sentence-one')}
-        </Text>
-        <Stack spacing='24px'>
-          <Flex gap='4px' alignItems='flex-start'>
-            {address ? (
-              <Text
-                fontSize='md'
-                color={theme.colors.gray[900]}
-                fontFamily={theme.fonts.body}
-                overflowWrap='break-word'
-                wordBreak='break-word'
-                cursor='pointer'
-                onClick={onCopy}
-              >
-                {address}
-              </Text>
-            ) : (
-              <Text
-                fontSize='md'
-                color={theme.colors.red}
-                fontFamily={theme.fonts.body}
-              >
-                {error}
-              </Text>
-            )}
-            <Box>
-              {hasCopied ? (
-                <Text
-                  fontSize='xs'
-                  fontWeight='semibold'
-                  color={theme.colors.gray[900]}
-                  bgColor={theme.colors.gray[25]}
-                  fontFamily={theme.fonts.body}
-                  onClick={onCopy}
-                  p='4px 12px'
-                  borderRadius='16px'
-                  border={`1px solid ${theme.colors.gray[400]}`}
-                >
-                  {t('common.copied')}
-                </Text>
-              ) : (
-                <CopyIcon
-                  color={theme.colors.gray[900]}
-                  height='20px'
-                  width='20px'
-                  onClick={onCopy}
-                  cursor='pointer'
-                />
-              )}
-            </Box>
-          </Flex>
-          <Box>
-            {address && (
-              <QRCodeSVG height='200px' width='200px' value={address} />
-            )}
-          </Box>
-        </Stack>
-        <Flex gap='4px'>
-          <Link
-            fontSize='md'
-            color={theme.colors.blue[600]}
-            fontFamily={theme.fonts.body}
-            _hover={{ textDecoration: 'underline' }}
-            transition={`text-decoration 1s ease-in-out`}
-            href={`https://mempool.space/address/${address}`}
-            target='_blank'
-            rel='noreferrer'
-            w='fit-content'
-          >
-            {t('deposit-tab.mempool_deposit_link_text')}
-          </Link>
-          <LinkIcon color={theme.colors.blue[600]} />
-        </Flex>
-      </Stack>
-    </GatewayCard>
-  );
-});
diff --git a/apps/gateway-ui/src/components/FederationCard.tsx b/apps/gateway-ui/src/components/FederationCard.tsx
index dadb258e5..78e8697f8 100644
--- a/apps/gateway-ui/src/components/FederationCard.tsx
+++ b/apps/gateway-ui/src/components/FederationCard.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import { Flex, Stack, useTheme, Heading } from '@chakra-ui/react';
 import { Federation } from '../types';
-import { InfoTab, DepositTab, BalanceTab } from '.';
-import { WithdrawTab } from './WithdrawTab';
+import { InfoCard, DepositCard, BalanceCard, WithdrawCard } from '.';
 
 interface FederationCardProps {
   federation: Federation;
@@ -25,12 +24,12 @@ export const FederationCard = (props: FederationCardProps): JSX.Element => {
           Human Action Coalition
         </Heading>
         <Flex gap='24px' flexDir={{ base: 'column', sm: 'column', md: 'row' }}>
-          <BalanceTab balance_msat={balance_msat} />
-          <InfoTab nodeId={federation_id} nodeLink={federation_id} />
+          <BalanceCard balance_msat={balance_msat} />
+          <InfoCard nodeId={federation_id} nodeLink={federation_id} />
         </Flex>
         <Flex gap='24px' flexDir={{ base: 'column', sm: 'column', md: 'row' }}>
-          <DepositTab federationId={federation_id} />
-          <WithdrawTab federationId={federation_id} />
+          <DepositCard federationId={federation_id} />
+          <WithdrawCard federationId={federation_id} />
         </Flex>
       </Stack>
     </>
diff --git a/apps/gateway-ui/src/components/InfoTab.tsx b/apps/gateway-ui/src/components/InfoTab.tsx
deleted file mode 100644
index bf03e35b9..000000000
--- a/apps/gateway-ui/src/components/InfoTab.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from 'react';
-import {
-  Text,
-  useTheme,
-  Flex,
-  Link,
-  Box,
-  useClipboard,
-} from '@chakra-ui/react';
-import { useTranslation } from '@fedimint/utils';
-import { GatewayCard } from '.';
-import { ReactComponent as CopyIcon } from '../assets/svgs/copy.svg';
-import { ReactComponent as LinkIcon } from '../assets/svgs/linkIcon.svg';
-
-interface InfoTabProps {
-  nodeId: string;
-  nodeLink: string;
-}
-
-export const InfoTab = React.memo(function InfoTab(
-  props: InfoTabProps
-): JSX.Element {
-  const { t } = useTranslation();
-  const { nodeId, nodeLink } = props;
-  const theme = useTheme();
-  const { onCopy, hasCopied } = useClipboard(nodeId);
-
-  return (
-    <GatewayCard>
-      <Text
-        fontSize='lg'
-        fontWeight='600'
-        color={theme.colors.gray[900]}
-        fontFamily={theme.fonts.body}
-      >
-        {t('info-tab.tab_header')}
-      </Text>
-      <Flex gap='8px'>
-        <Text
-          fontSize='md'
-          color={theme.colors.gray[900]}
-          fontFamily={theme.fonts.body}
-          overflowWrap='break-word'
-          wordBreak='break-word'
-          cursor='pointer'
-          onClick={onCopy}
-        >
-          {nodeId}
-        </Text>
-        <Box>
-          {hasCopied ? (
-            <Text
-              fontSize='xs'
-              fontWeight='semibold'
-              color={theme.colors.gray[900]}
-              bgColor={theme.colors.gray[25]}
-              fontFamily={theme.fonts.body}
-              onClick={onCopy}
-              p='4px 12px'
-              borderRadius='16px'
-              border={`1px solid ${theme.colors.gray[400]}`}
-            >
-              {t('common.copied')}
-            </Text>
-          ) : (
-            <CopyIcon
-              color={theme.colors.gray[900]}
-              height='20px'
-              width='20px'
-              onClick={onCopy}
-              cursor='pointer'
-            />
-          )}
-        </Box>
-      </Flex>
-      <Flex gap='4px'>
-        <Link
-          fontSize='md'
-          color={theme.colors.blue[600]}
-          fontFamily={theme.fonts.body}
-          _hover={{ textDecoration: 'underline' }}
-          transition={`text-decoration 1s ease-in-out`}
-          href={`https://amboss.space/node/${nodeLink}`}
-          target='_blank'
-          rel='noreferrer'
-          w='fit-content'
-        >
-          {t('info-tab.amboss_node_link_text')}
-        </Link>
-        <LinkIcon color={theme.colors.blue[600]} />
-      </Flex>
-    </GatewayCard>
-  );
-});
diff --git a/apps/gateway-ui/src/components/WithdrawTab.tsx b/apps/gateway-ui/src/components/WithdrawTab.tsx
deleted file mode 100644
index ab3cc8dd5..000000000
--- a/apps/gateway-ui/src/components/WithdrawTab.tsx
+++ /dev/null
@@ -1,291 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import {
-  Box,
-  Button,
-  Input,
-  InputGroup,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Stack,
-  Text,
-  VStack,
-  useTheme,
-} from '@chakra-ui/react';
-import { ApiContext } from '../ApiProvider';
-import { useTranslation } from '@fedimint/utils';
-import { GatewayCard } from '.';
-
-interface WithdrawObject {
-  amount: number;
-  address: string;
-}
-
-export interface WithdrawTabProps {
-  federationId: string;
-}
-
-const truncateStringFormat = (arg: string): string => {
-  return `${arg.substring(0, 15)}......${arg.substring(
-    arg.length,
-    arg.length - 15
-  )}`;
-};
-
-export const WithdrawTab = React.memo(function WithdrawTab({
-  federationId,
-}: WithdrawTabProps): JSX.Element {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const { gateway } = React.useContext(ApiContext);
-  const [withdrawObject, setWithdrawObject] = useState<WithdrawObject>({
-    amount: 0,
-    address: '',
-  });
-  const [error, setError] = useState<string>('');
-  const [modalState, setModalState] = useState<boolean>(false);
-  const { amount, address } = withdrawObject;
-
-  const handleInputChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      event.preventDefault();
-      const { value, name } = event.target;
-      // FIXME this is a hack
-      if (name === 'amount') {
-        setWithdrawObject((prevState) => ({
-          ...prevState,
-          [name]: parseInt(value),
-        }));
-      } else {
-        setWithdrawObject((prevState) => ({ ...prevState, [name]: value }));
-      }
-    },
-    []
-  );
-
-  const createWithdrawal = () => {
-    if (!amount && amount === 0 && typeof amount === 'number') {
-      setError(`${t('withdraw-tab.error-amount')}`);
-      return;
-    }
-    if (!address) {
-      setError(`${t('withdraw-tab.error-address')}`);
-      return;
-    }
-    // TODO: address validation
-    setError('');
-    setModalState(true);
-  };
-
-  const startWithdrawal = () => {
-    gateway
-      .requestWithdrawal(federationId, amount, address)
-      .then((txId) => {
-        // FIXME: show this in a better way
-        alert(`${t('withdraw-tab.your-transaction')} ${txId}`);
-        setWithdrawObject({ ...withdrawObject, amount: 0, address: '' });
-        setModalState(false);
-      })
-      .catch(({ error }) => {
-        console.error(error);
-        setError(`${t('withdraw-tab.error-request')}`);
-      });
-  };
-
-  return (
-    <Box w='100%'>
-      <GatewayCard>
-        <Stack spacing='4px' h='100%'>
-          <Text
-            fontSize='lg'
-            fontWeight='600'
-            color={theme.colors.gray[900]}
-            fontFamily={theme.fonts.body}
-          >
-            {t('withdraw-tab.tab-header')}
-          </Text>
-          <Text
-            fontSize='md'
-            color={theme.colors.gray[600]}
-            fontFamily={theme.fonts.body}
-          >
-            {t('withdraw-tab.total_bitcoin')} {withdrawObject.amount / 100000}{' '}
-            {t('common.btc')}
-          </Text>
-          <Text
-            cursor='pointer'
-            fontSize='sm'
-            color={theme.colors.blue[600]}
-            fontFamily={theme.fonts.body}
-          >
-            {t('withdraw-tab.withdraw_all')}
-          </Text>
-        </Stack>
-        <Stack spacing='20px'>
-          <InputGroup flexDir='column'>
-            <Text
-              fontSize='sm'
-              fontWeight='500'
-              color={theme.colors.gray[700]}
-              fontFamily={theme.fonts.body}
-              pb='6px'
-            >
-              {t('common.amount')}
-            </Text>
-            <Input
-              height='44px'
-              p='14px'
-              border={`1px solid ${theme.colors.gray[300]}`}
-              bgColor={theme.colors.white}
-              boxShadow={theme.shadows.xs}
-              borderRadius='8px'
-              w='100%'
-              placeholder={t('withdraw-tab.amount-placeholder')}
-              // FIXME: this is a hack
-              value={withdrawObject.amount.toString()}
-              onChange={(e) => handleInputChange(e)}
-              name='amount'
-            />
-          </InputGroup>
-          <InputGroup flexDir='column'>
-            <Text
-              fontSize='sm'
-              fontWeight='500'
-              color={theme.colors.gray[700]}
-              fontFamily={theme.fonts.body}
-              pb='6px'
-            >
-              {t('common.address')}
-            </Text>
-            <Input
-              height='44px'
-              p='14px'
-              border={`1px solid ${theme.colors.gray[300]}`}
-              bgColor={theme.colors.white}
-              boxShadow={theme.shadows.xs}
-              borderRadius='8px'
-              w='100%'
-              placeholder={t('withdraw-tab.address-placeholder')}
-              value={withdrawObject.address}
-              onChange={(e) => handleInputChange(e)}
-              name='address'
-            />
-          </InputGroup>
-
-          {error && (
-            <Box>
-              <Text textAlign='center' color='red' fontSize='14'>
-                {t('withdraw-tab.error')}: {error}
-              </Text>
-            </Box>
-          )}
-
-          <Button
-            borderRadius='8px'
-            maxW='145px'
-            isDisabled={!address}
-            fontSize='sm'
-            onClick={createWithdrawal}
-          >
-            {t('withdraw-tab.tab-header')}
-          </Button>
-        </Stack>
-      </GatewayCard>
-
-      {modalState && (
-        <ConfirmWithdrawModal
-          open={modalState}
-          txRequest={{ amount, address }}
-          onModalClickCallback={() => {
-            setModalState(false);
-          }}
-          onCloseClickCallback={() => {
-            setModalState(false);
-          }}
-          startWithdrawalCallback={startWithdrawal}
-        />
-      )}
-    </Box>
-  );
-});
-
-export interface ConfirmWithdrawModalProps {
-  open: boolean;
-  txRequest: {
-    amount: number;
-    address: string;
-  };
-  onModalClickCallback: () => void;
-  onCloseClickCallback: () => void;
-  startWithdrawalCallback: () => void;
-}
-
-const ConfirmWithdrawModal = (
-  props: ConfirmWithdrawModalProps
-): JSX.Element => {
-  const { t } = useTranslation();
-  const { open, txRequest, onModalClickCallback, startWithdrawalCallback } =
-    props;
-
-  return (
-    <div>
-      <>
-        <Modal onClose={onModalClickCallback} isOpen={open} isCentered>
-          <ModalOverlay />
-          <ModalContent>
-            <ModalHeader>{t('withdraw-tab.confirm-withdraw')}</ModalHeader>
-            <ModalCloseButton />
-            <ModalBody>
-              <VStack alignItems='flex-start' justifyContent='space-between'>
-                <Box>
-                  <Text>{t('common.amount')}:</Text>
-                  <Text>
-                    {txRequest.amount} {t('common.sats')}
-                  </Text>
-                </Box>
-                <Text>{t('withdraw-tab.to')}</Text>
-                <Box>
-                  <Text>{t('common.address')}:</Text>
-                  <Text>{truncateStringFormat(txRequest.address)}</Text>
-                </Box>
-              </VStack>
-            </ModalBody>
-            <ModalFooter>
-              <Button
-                onClick={() => {
-                  if (startWithdrawalCallback) {
-                    startWithdrawalCallback();
-                  }
-                }}
-                fontSize={{ base: '12px', md: '13px', lg: '16px' }}
-                p={{ base: '10px', md: '13px', lg: '16px' }}
-              >
-                {t('common.confirm')}
-              </Button>
-            </ModalFooter>
-          </ModalContent>
-        </Modal>
-      </>
-    </div>
-  );
-};
-
-export interface TransactionViewProps {
-  amount: number;
-  address: string;
-  txId: string;
-  confirmationsRequired: number;
-  federationId?: string;
-}
-
-export interface TransactionInfoProps {
-  title: string;
-  detail?: string | number;
-  children?: React.ReactNode;
-  onClick?: () => void;
-  color?: string;
-}