diff --git a/apps/gateway-ui/src/components/Input.tsx b/apps/gateway-ui/src/components/Input.tsx
deleted file mode 100644
index be6265735..000000000
--- a/apps/gateway-ui/src/components/Input.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import { InputGroup, Text, Input as CustomInput } from '@chakra-ui/react';
-
-export type InputProps = {
-  labelName: string;
-  placeHolder: string;
-  value: string | number;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  name?: string;
-};
-
-export const Input = (input: InputProps) => {
-  return (
-    <InputGroup flexDir='column'>
-      <Text
-        fontSize='16px'
-        color='#2d2d2d'
-        opacity={'85%'}
-        fontWeight='500'
-        mb='4px'
-      >
-        {input.labelName}
-      </Text>
-      <CustomInput
-        value={input.value}
-        onChange={input.onChange}
-        placeholder={input.placeHolder}
-        height='48px'
-        _placeholder={{ color: '#2d2d2d', opacity: '50%' }}
-        name={input.name}
-      />
-    </InputGroup>
-  );
-};
diff --git a/apps/gateway-ui/src/components/index.tsx b/apps/gateway-ui/src/components/index.tsx
index 34f4e0aa3..d68d779b3 100644
--- a/apps/gateway-ui/src/components/index.tsx
+++ b/apps/gateway-ui/src/components/index.tsx
@@ -2,7 +2,6 @@ export { GatewayCard } from './GatewayCard';
 export { WithdrawCard } from './WithdrawCard';
 export { FederationCard } from './FederationCard';
 export { Header } from './Header';
-export { Input } from './Input';
 export { ConnectFederation } from './ConnectFederation';
 export { TabHeader } from './TabHeader';
 export { InfoCard } from './InfoCard';
diff --git a/apps/guardian-ui/src/admin/FederationAdmin.tsx b/apps/guardian-ui/src/admin/FederationAdmin.tsx
index 4c11f5bd8..cedc338f1 100644
--- a/apps/guardian-ui/src/admin/FederationAdmin.tsx
+++ b/apps/guardian-ui/src/admin/FederationAdmin.tsx
@@ -13,6 +13,7 @@ import {
   Box,
   Icon,
   Text,
+  useTheme,
 } from '@chakra-ui/react';
 import { CopyInput } from '@fedimint/ui';
 import { useTranslation } from '@fedimint/utils';
@@ -37,6 +38,7 @@ interface PeerData {
 }
 
 export const FederationAdmin: React.FC = () => {
+  const theme = useTheme();
   const { api } = useAdminContext();
   const [versions, setVersions] = useState<Versions>();
   const [epochCount, setEpochCount] = useState<number>();
@@ -75,19 +77,19 @@ export const FederationAdmin: React.FC = () => {
     }
   }, [config, api]);
 
-  const [guardiansStatusText, statusColor] = useMemo(() => {
+  const [guardiansStatusText, statusType] = useMemo(() => {
     const online = status?.federation ? status.federation.peers_online + 1 : 1;
     const offline = status?.federation ? status.federation.peers_offline : 0;
     const totalPeers = online + offline;
     const onlinePercentage = online / totalPeers;
-    const statusColor: 'green' | 'yellow' | 'red' =
+    const statusType: 'success' | 'warning' | 'error' =
       onlinePercentage === 1
-        ? 'green'
+        ? 'success'
         : onlinePercentage >= 2 / 3
-        ? 'yellow'
-        : 'red';
+        ? 'warning'
+        : 'error';
     const guardiansStatusText = `${online} / ${totalPeers}`;
-    return [guardiansStatusText, statusColor];
+    return [guardiansStatusText, statusType];
   }, [status]);
 
   const data = useMemo(() => {
@@ -124,7 +126,6 @@ export const FederationAdmin: React.FC = () => {
         <Flex>
           <Box>
             <Text
-              color='#111827'
               fontSize='24px'
               fontWeight='600'
               lineHeight='32px'
@@ -132,27 +133,37 @@ export const FederationAdmin: React.FC = () => {
             >
               {config?.client_config.meta.federation_name}
             </Text>
-            <Text color='#111827' fontSize='14px' lineHeight='32px'>
+            <Text fontSize='14px' lineHeight='32px'>
               {t('federation-dashboard.placeholder-fed-description')}
             </Text>
             <Flex gap='12px' mt='13px'>
               <Pill
                 text='Guardians'
-                status={`${guardiansStatusText}`}
-                color={statusColor}
+                status={guardiansStatusText}
+                type={statusType}
               />
-              <Pill text='Server' status='Healthy' color='green' />
-              <Pill text='Uptime' status='100%' color='green' />
+              <Pill text='Server' status='Healthy' type='success' />
+              <Pill text='Uptime' status='100%' type='success' />
             </Flex>
             <Box mt='38px'>
-              <Text mb='6px' fontSize='14px' fontWeight='500' color='#344054'>
+              <Text
+                mb='6px'
+                fontSize='14px'
+                fontWeight='500'
+                color={theme.colors.gray[700]}
+              >
                 {t('federation-dashboard.invite-members')}
               </Text>
               <CopyInput
                 value={inviteCode}
                 buttonLeftIcon={<Icon as={CopyIcon} />}
               />
-              <Text mt='6px' mb='25px' fontSize='14px' color='#6B7280'>
+              <Text
+                mt='6px'
+                mb='25px'
+                fontSize='14px'
+                color={theme.colors.gray[500]}
+              >
                 {t('federation-dashboard.invite-members-prompt')}
               </Text>
             </Box>
diff --git a/apps/guardian-ui/src/components/Epochs.tsx b/apps/guardian-ui/src/components/Epochs.tsx
index 694861b59..fd0596da1 100644
--- a/apps/guardian-ui/src/components/Epochs.tsx
+++ b/apps/guardian-ui/src/components/Epochs.tsx
@@ -31,7 +31,7 @@ const Epoch: FC<EpochProps> = ({ epochCount, pegin, pegout, gatewayTrxs }) => {
         pt='4px'
         pb='8px'
         fontWeight='semibold'
-        color='#059669'
+        color={theme.colors.success[500]}
         fontSize='md'
       >
         #{epochCount}
diff --git a/apps/guardian-ui/src/components/Pill.tsx b/apps/guardian-ui/src/components/Pill.tsx
index 37ae16e9d..e51b2c2b8 100644
--- a/apps/guardian-ui/src/components/Pill.tsx
+++ b/apps/guardian-ui/src/components/Pill.tsx
@@ -1,48 +1,37 @@
 import React, { FC } from 'react';
-import { Flex, Box, Text, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Box, Text, useColorModeValue, useTheme } from '@chakra-ui/react';
 
 interface PillProp {
   text: string;
   status: string;
-  color?: 'green' | 'red' | 'yellow';
+  type?: 'error' | 'warning' | 'success';
 }
 
 // Have to update pill color based on quorum.
-export const Pill: FC<PillProp> = ({ text, status, color }) => {
-  const greenBgColor = useColorModeValue('#34D399', '#065F46');
-  const greenTextColor = useColorModeValue('#065F46', '#34D399');
-  const redBgColor = useColorModeValue('#F87171', '#991B1B');
-  const redTextColor = useColorModeValue('#991B1B', '#F87171');
-  const yellowBgColor = useColorModeValue('#FBBF24', '#B45309');
-  const yellowTextColor = useColorModeValue('#B45309', '#FBBF24');
-  const defaultBgColor = useColorModeValue('#D1FAE5', '#065F46');
-  const defaultTextColor = useColorModeValue('#065F46', '#D1FAE5');
-  const colors = () => {
-    switch (color) {
-      case 'green':
-        return { bgColor: greenBgColor, textColor: greenTextColor };
-      case 'red':
-        return { bgColor: redBgColor, textColor: redTextColor };
-      case 'yellow':
-        return { bgColor: yellowBgColor, textColor: yellowTextColor };
-      default:
-        return { bgColor: defaultBgColor, textColor: defaultTextColor };
-    }
-  };
-  const { bgColor, textColor } = colors();
+export const Pill: FC<PillProp> = ({ text, status, type }) => {
+  const theme = useTheme();
+  const color = theme.colors[type || 'gray'];
+  const labelColor = useColorModeValue(
+    theme.colors.gray[500],
+    theme.colors.gray[400]
+  );
+  const bgColor = useColorModeValue(type ? color[50] : color[100], color[700]);
+  const textColor = useColorModeValue(color[700], color[200]);
+  const dotColor = useColorModeValue(color[500], color[400]);
   return (
     <Flex gap='8px' alignItems='center'>
-      <Text color={defaultTextColor} lineHeight='27px' fontSize='14px'>
+      <Text color={labelColor} lineHeight='20px' fontSize='14px'>
         {text}
       </Text>
       <Flex
+        h='22px'
+        p='0 8px'
         gap='6px'
-        p='2px 10px'
-        borderRadius='32px'
+        borderRadius='10px'
         alignItems='center'
         bgColor={bgColor}
       >
-        <Box bgColor={textColor} h='8px' w='8px' borderRadius='32px'></Box>
+        <Box bgColor={dotColor} h='6px' w='6px' borderRadius='100%' />
         <Text
           color={textColor}
           fontSize='12px'
diff --git a/apps/guardian-ui/src/components/SetupProgress.tsx b/apps/guardian-ui/src/components/SetupProgress.tsx
index 708d7c0fc..b79c70fc1 100644
--- a/apps/guardian-ui/src/components/SetupProgress.tsx
+++ b/apps/guardian-ui/src/components/SetupProgress.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Center, Flex, Text } from '@chakra-ui/react';
+import { Box, Center, Flex, Text, useTheme } from '@chakra-ui/react';
 import { ReactComponent as CheckIcon } from '../assets/svgs/white-check.svg';
 import { StepState } from '../setup/types';
 
@@ -10,6 +10,8 @@ interface StepProps {
 }
 
 const Step: React.FC<StepProps> = ({ text, state, margin = '-48px' }) => {
+  const theme = useTheme();
+
   const colorState = (
     inActiveColor: string,
     activeColor: string,
@@ -33,20 +35,32 @@ const Step: React.FC<StepProps> = ({ text, state, margin = '-48px' }) => {
         <Box
           w='100%'
           h='2px'
-          bgColor={state === StepState.InActive ? '#EAECF0' : '#1570ef'}
+          bgColor={
+            state === StepState.InActive
+              ? theme.colors.gray[200]
+              : theme.colors.blue[600]
+          }
         ></Box>
         <Flex>
           <Center
             borderRadius={'50%'}
             h={state === StepState.Active ? '36px' : '24px'}
             w={state === StepState.Active ? '36px' : '24px'}
-            bgColor={colorState('transparent', '#EFF8FF', 'transparent')}
+            bgColor={colorState(
+              'transparent',
+              theme.colors.blue[50],
+              'transparent'
+            )}
           >
             <Center
               borderRadius='50%'
               h='24px'
               w='24px'
-              bgColor={colorState('#F2F4F7', '#1570ef', '#1570ef')}
+              bgColor={colorState(
+                theme.colors.gray[100],
+                theme.colors.blue[600],
+                theme.colors.blue[600]
+              )}
             >
               {state === StepState.Completed ? (
                 <CheckIcon />
@@ -66,7 +80,11 @@ const Step: React.FC<StepProps> = ({ text, state, margin = '-48px' }) => {
         textTransform='capitalize'
         fontWeight='600'
         fontSize='14px'
-        color={colorState('#344054', '#1570ef', '#1570ef')}
+        color={colorState(
+          theme.colors.gray[700],
+          theme.colors.blue[600],
+          theme.colors.blue[600]
+        )}
         whiteSpace='nowrap'
         mr={margin}
       >
@@ -77,6 +95,8 @@ const Step: React.FC<StepProps> = ({ text, state, margin = '-48px' }) => {
 };
 
 const InitialStep: React.FC<Pick<StepProps, 'state'>> = ({ state }) => {
+  const theme = useTheme();
+
   return (
     <Flex
       flexDir='column'
@@ -89,9 +109,14 @@ const InitialStep: React.FC<Pick<StepProps, 'state'>> = ({ state }) => {
           borderRadius='50%'
           h={state === StepState.Active ? '36px' : '24px'}
           w={state === StepState.Active ? '36px' : '24px'}
-          bgColor='#EFF8FF'
+          bgColor={theme.colors.blue[50]}
         >
-          <Center borderRadius='50%' h='24px' w='24px' bgColor='#1570EF'>
+          <Center
+            borderRadius='50%'
+            h='24px'
+            w='24px'
+            bgColor={theme.colors.blue[600]}
+          >
             {state === StepState.Completed ? (
               <CheckIcon />
             ) : (
@@ -109,7 +134,11 @@ const InitialStep: React.FC<Pick<StepProps, 'state'>> = ({ state }) => {
         textTransform='capitalize'
         fontWeight='600'
         fontSize='14px'
-        color={state === StepState.InActive ? '#344054' : '#1570ef'}
+        color={
+          state === StepState.InActive
+            ? theme.colors.gray[700]
+            : theme.colors.blue[600]
+        }
         whiteSpace='nowrap'
         mr='-42px'
       >
diff --git a/apps/guardian-ui/src/components/SideBar.tsx b/apps/guardian-ui/src/components/SideBar.tsx
deleted file mode 100644
index 65a7de0fd..000000000
--- a/apps/guardian-ui/src/components/SideBar.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import React, { FC, memo } from 'react';
-import { Box, Flex, Image, Stack, Text } from '@chakra-ui/react';
-import { ReactComponent as HomeIcon } from '../assets/svgs/home.svg';
-import { ReactComponent as GuardianIcon } from '../assets/svgs/guardians.svg';
-import { ReactComponent as ModulesIcon } from '../assets/svgs/modules.svg';
-import { ReactComponent as SettingsIcon } from '../assets/svgs/settings.svg';
-import { ReactComponent as AccountIcon } from '../assets/svgs/account.svg';
-import Logo from '../assets/images/Fedimint-Full.png';
-
-export interface SiderBarItemProps {
-  navText: string;
-  onClick?: () => void;
-  icon?: React.ReactElement<
-    React.SVGProps<SVGSVGElement> & {
-      title?: string | undefined;
-    }
-  >;
-  navTextAmount?: number;
-  color?: string;
-  heading?: boolean;
-}
-
-const SiderBarItem: FC<SiderBarItemProps> = ({
-  navText,
-  onClick,
-  icon,
-  navTextAmount,
-  color = '#4B5563',
-  heading,
-}) => {
-  return (
-    <Flex
-      _hover={{ bgColor: heading ? 'transparent' : '#F3F4F6' }}
-      cursor='pointer'
-      onClick={onClick}
-      p='0px 12px 0px 8px'
-      h='40px'
-      borderRadius='6px'
-      justifyContent='space-between'
-      alignItems='center'
-      color='#4B5563'
-    >
-      <Flex gap='12px' alignItems='center'>
-        <>{icon}</>
-        <Text
-          fontSize={heading ? '12px' : '14px'}
-          fontWeight={heading ? '600' : '500'}
-          lineHeight='20px'
-          color={color}
-        >
-          {navText}
-        </Text>
-      </Flex>
-      {navTextAmount && (
-        <Text
-          fontSize='12px'
-          fontWeight='500'
-          lineHeight='20px'
-          p='2px 12px'
-          color='#4B5563'
-          bgColor='#F3F4F6'
-          borderRadius='10px'
-        >
-          {navTextAmount}
-        </Text>
-      )}
-    </Flex>
-  );
-};
-
-export const Divider = memo(function Divider(): JSX.Element {
-  return <Box bgColor='#E5E7EB' height='1px'></Box>;
-});
-
-export const SideBar: FC = () => {
-  return (
-    <Flex
-      borderRight='1px solid #E5E7EB'
-      flexDir='column'
-      w='256px'
-      height='100vh'
-      alignItems='flex-start'
-    >
-      <Flex w='100%' p='0px 8px' pt='8px' flexDir='column'>
-        <Stack spacing='16px'>
-          <Box h='52px' p='12px 16px'>
-            <Image
-              src={Logo}
-              alt='Fedimint Logo'
-              boxSize='200px'
-              h='28px'
-              w='122px'
-            />
-          </Box>
-          <Stack spacing='4px'>
-            <SiderBarItem navText='Dashboard' icon={<HomeIcon />} />
-            <SiderBarItem
-              navText='Guardians'
-              icon={<GuardianIcon />}
-              navTextAmount={8}
-            />
-            <SiderBarItem
-              navText='Modules'
-              icon={<ModulesIcon />}
-              navTextAmount={3}
-            />
-            <SiderBarItem navText='Settings' icon={<SettingsIcon />} />
-          </Stack>
-          <Divider />
-          <SiderBarItem navText='My account' icon={<AccountIcon />} />
-          <Divider />
-          <Stack spacing='4px'>
-            <SiderBarItem navText='RESOURCES' color='#A1A1A1' heading={true} />
-            <SiderBarItem navText='Fedimint guide' />
-            <SiderBarItem navText='FAQs' />
-          </Stack>
-          <Divider />
-          <Stack spacing='4px'>
-            <SiderBarItem
-              navText='FEDERATION INFO'
-              color='#A1A1A1'
-              heading={true}
-            />
-            <SiderBarItem navText='API version 1.0' />
-            <SiderBarItem navText='Consensus version 1.0' />
-          </Stack>
-        </Stack>
-      </Flex>
-    </Flex>
-  );
-};
diff --git a/packages/ui/src/Table.tsx b/packages/ui/src/Table.tsx
index 57d3240cd..0e3ea8e76 100644
--- a/packages/ui/src/Table.tsx
+++ b/packages/ui/src/Table.tsx
@@ -75,7 +75,7 @@ export function Table<T extends string>({
                   key={column.key}
                   width={column.width}
                   borderBottom={border}
-                  bg='#F9FAFB'
+                  bg={theme.colors.gray[50]}
                 >
                   {column.heading}
                 </Th>
diff --git a/packages/ui/src/theme.tsx b/packages/ui/src/theme.tsx
index b211b0ef6..9a75a8806 100644
--- a/packages/ui/src/theme.tsx
+++ b/packages/ui/src/theme.tsx
@@ -34,6 +34,45 @@ export const palette = {
     800: '#1849A9',
     900: '#194185',
   },
+  red: {
+    25: '#FFFBFA',
+    50: '#FEF3F2',
+    100: '#FEE4E2',
+    200: '#FECDCA',
+    300: '#FDA29B',
+    400: '#F97066',
+    500: '#F04438',
+    600: '#D92D20',
+    700: '#B42318',
+    800: '#912018',
+    900: '#7A271A',
+  },
+  yellow: {
+    25: '#FFFCF5',
+    50: '#FFFAEB',
+    100: '#FEF0C7',
+    200: '#FEDF89',
+    300: '#FEC84B',
+    400: '#FDB022',
+    500: '#F79009',
+    600: '#DC6803',
+    700: '#B54708',
+    800: '#93370D',
+    900: '#7A2E0E',
+  },
+  green: {
+    25: '#F6FEF9',
+    50: '#ECFDF3',
+    100: '#D1FADF',
+    200: '#A6F4C5',
+    300: '#6CE9A6',
+    400: '#32D583',
+    500: '#12B76A',
+    600: '#039855',
+    700: '#027A48',
+    800: '#05603A',
+    900: '#054F31',
+  },
 };
 
 const shadows = {
@@ -49,6 +88,10 @@ const shadows = {
 
 export const colors = {
   ...palette,
+  // Aliases
+  error: palette.red,
+  warning: palette.yellow,
+  success: palette.green,
   text: {
     primary: palette.gray[900],
     secondary: palette.gray[600],