diff --git a/package.json b/package.json
index 4e8c0f3a..3f038749 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "@polkadot/ui-keyring": "3.6.6",
     "@polkadot/util": "12.6.2",
     "@polkadot/util-crypto": "^12.6.2",
-    "@region-x/components": "^0.1.9",
+    "@region-x/components": "^0.1.10",
     "@types/humanize-duration": "^3.27.3",
     "@vercel/analytics": "^1.2.2",
     "apexcharts": "^3.49.1",
diff --git a/src/components/Elements/Selectors/ChainSelector/index.tsx b/src/components/Elements/Selectors/ChainSelector/index.tsx
index fe2e4750..7475c2ab 100644
--- a/src/components/Elements/Selectors/ChainSelector/index.tsx
+++ b/src/components/Elements/Selectors/ChainSelector/index.tsx
@@ -1,19 +1,10 @@
-import {
-  Box,
-  CircularProgress,
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
-  Typography,
-} from '@mui/material';
+import { FormControl } from '@mui/material';
+import { Select } from '@region-x/components';
 import Image from 'next/image';
 
 import { useCoretimeApi, useRegionXApi, useRelayApi } from '@/contexts/apis';
 import { ChainType, NetworkType } from '@/models';
 
-import styles from './index.module.scss';
-
 interface ChainSelectorProps {
   chain: ChainType;
   setChain: (_: ChainType) => void;
@@ -52,65 +43,68 @@ const relayIcons = {
 
 export const ChainSelector = ({ chain, setChain }: ChainSelectorProps) => {
   const { network } = useNetwork();
+
   const {
-    state: { name: coretimeChain, isApiReady: isCoretimeReady },
+    state: { name: coretimeChain },
   } = useCoretimeApi();
   const {
-    state: { name: relayChain, isApiReady: isRelayReady },
+    state: { name: relayChain },
   } = useRelayApi();
-
   const {
-    state: { name: regionXChain, isApiReady: isRegionXReady },
+    state: { name: regionXChain },
   } = useRegionXApi();
 
   const menuItems = [
     {
-      icon: relayIcons[network],
+      icon: (
+        <Image
+          src={relayIcons[network]}
+          alt=''
+          style={{ width: '28px', height: '28px', marginRight: '0.5rem', borderRadius: '100%' }}
+        />
+      ),
       label: relayChain,
       value: ChainType.RELAY,
-      loading: !isRelayReady,
     },
     {
-      icon: coretimeIcons[network],
+      icon: (
+        <Image
+          src={coretimeIcons[network]}
+          alt=''
+          style={{ width: '28px', height: '28px', marginRight: '0.5rem', borderRadius: '100%' }}
+        />
+      ),
       label: coretimeChain,
       value: ChainType.CORETIME,
-      loading: !isCoretimeReady,
     },
     ...(enableRegionX(network)
       ? [
-          {
-            icon: RegionX,
-            label: regionXChain,
-            value: ChainType.REGIONX,
-            loading: isRegionXReady,
-          },
-        ]
+        {
+          icon: (
+            <Image
+              src={RegionX}
+              alt=''
+              style={{
+                width: '28px',
+                height: '28px',
+                marginRight: '0.5rem',
+                borderRadius: '100%',
+              }}
+            />
+          ),
+          label: regionXChain,
+          value: ChainType.REGIONX,
+        },
+      ]
       : []),
   ];
   return (
     <FormControl fullWidth>
-      <InputLabel id='origin-selector-label'>Chain</InputLabel>
       <Select
-        labelId='origin-selector-label'
-        id='origin-selector'
-        value={chain}
-        label='Origin'
-        sx={{ borderRadius: '1rem' }}
-        onChange={(e) => setChain(e.target.value as ChainType)}
-      >
-        {menuItems.map(({ icon, label, value, loading }, index) => (
-          <MenuItem value={value} key={index}>
-            <Box className={styles.chainItem}>
-              <Image src={icon} alt='icon' className={styles.icon} />
-              {loading ? (
-                <CircularProgress size='1.5rem' />
-              ) : (
-                <Typography className={styles.label}>{label}</Typography>
-              )}
-            </Box>
-          </MenuItem>
-        ))}
-      </Select>
+        options={menuItems}
+        selectedValue={chain}
+        onChange={(c) => setChain(c || ChainType.RELAY)}
+      />
     </FormControl>
   );
 };
diff --git a/src/components/Regions/RegionMetaCard/index.module.scss b/src/components/Regions/RegionMetaCard/index.module.scss
deleted file mode 100644
index 3844ef84..00000000
--- a/src/components/Regions/RegionMetaCard/index.module.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-.container {
-  display: flex;
-  gap: 1.5rem;
-  border-radius: 0.5rem;
-  max-width: 50rem;
-  padding: 1.5rem 2rem;
-}
-
-// .container:hover {
-//   border: 1px dashed;
-//   transition-duration: 300ms;
-// }
-
-.active {
-  border: 1px solid;
-  transition-duration: 300ms;
-}
-
-.active:hover {
-  border: 1px solid;
-}
-
-.duration {
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 2px;
-  padding: 0.5rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.75rem;
-  line-height: 1;
-  width: fit-content;
-}
-
-.regionInfo {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  min-width: 16rem;
-}
diff --git a/src/components/Regions/RegionMetaCard/index.tsx b/src/components/Regions/RegionMetaCard/index.tsx
index 5d099813..db2fb914 100644
--- a/src/components/Regions/RegionMetaCard/index.tsx
+++ b/src/components/Regions/RegionMetaCard/index.tsx
@@ -26,8 +26,8 @@ import { useNetwork } from '@/contexts/network';
 import { useTasks } from '@/contexts/tasks';
 import { POOLING_TASK_ID, RegionLocation, RegionMetadata } from '@/models';
 
-import styles from './index.module.scss';
 import { Label } from '../..';
+import { RegionCard } from '@region-x/components';
 
 interface RegionMetaCardProps {
   regionMetadata: RegionMetadata;
@@ -37,43 +37,13 @@ interface RegionMetaCardProps {
   updateName?: (_newName: string) => void;
 }
 
-export const RegionMetaCard = ({
-  regionMetadata,
-  active = false,
-  editable = false,
-  bordered = true,
-  updateName,
-}: RegionMetaCardProps) => {
-  return (
-    <>
-      {bordered ? (
-        <Paper className={clsx(styles.container, active ? styles.active : '')}>
-          <RegionCardInner
-            regionMetadata={regionMetadata}
-            editable={editable}
-            updateName={updateName}
-          />
-        </Paper>
-      ) : (
-        <div className={clsx(styles.container, active ? styles.active : '')}>
-          <RegionCardInner
-            regionMetadata={regionMetadata}
-            editable={editable}
-            updateName={updateName}
-          />
-        </div>
-      )}
-    </>
-  );
-};
-
 interface RegionCardInnerProps {
   regionMetadata: RegionMetadata;
   editable?: boolean;
   updateName?: (_newName: string) => void;
 }
 
-const RegionCardInner = ({
+export const RegionMetaCard = ({
   regionMetadata,
   editable = false,
   updateName,
@@ -81,17 +51,11 @@ const RegionCardInner = ({
   const { tasks } = useTasks();
 
   const formatDuration = humanizer({ units: ['w', 'd', 'h'], round: true });
-  const { region, taskId, location, currentUsage, consumed, coreOccupancy } = regionMetadata;
-  const theme = useTheme();
-
-  const [isEdit, setEdit] = useState(false);
-  const [name, setName] = useState('');
+  const { region, taskId, location } = regionMetadata;
 
   const [beginTimestamp, setBeginTimestamp] = useState(0);
   const [endTimestamp, setEndTimestamp] = useState(0);
 
-  const { network } = useNetwork();
-
   const {
     state: { api, apiState },
   } = useRelayApi();
@@ -113,40 +77,6 @@ const RegionCardInner = ({
     fetchTimestamps();
   }, [api, apiState, region, timeslicePeriod]);
 
-  const progress = [
-    {
-      label: 'Core Occupancy',
-      value: coreOccupancy ?? 0,
-      color: 'success',
-    },
-    {
-      label: 'Consumed',
-      value: consumed ?? 0,
-      color: 'warning',
-    },
-    {
-      label: 'Current Usage',
-      value: currentUsage,
-      color: 'primary',
-    },
-  ];
-
-  const onEdit = () => {
-    setEdit(true);
-    setName(regionMetadata.name ?? '');
-  };
-
-  const onSave = () => {
-    setEdit(false);
-    setName('');
-    updateName && updateName(name);
-  };
-
-  const onCancel = () => {
-    setEdit(false);
-    setName('');
-  };
-
   const locationToLabel = (location: RegionLocation): string => {
     if (location === RegionLocation.REGIONX_CHAIN) {
       return 'RegionX Chain';
@@ -168,121 +98,21 @@ const RegionCardInner = ({
   };
 
   return (
-    <>
-      <div className={styles.regionInfo}>
-        <div
-          className={styles.duration}
-          style={{
-            borderColor: theme.palette.grey[200],
-            color: theme.palette.grey[200],
-          }}
-        >
-          <AccessTimeIcon sx={{ fontSize: '1.25em' }} />
-          {`Duration: ${formatDuration(endTimestamp - beginTimestamp)}`}
-        </div>
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            height: '2rem',
-          }}
-        >
-          {editable && isEdit ? (
-            <Input value={name} onChange={(e) => setName(e.target.value)} size='small' />
-          ) : (
-            <Typography variant='subtitle2'>{regionMetadata.name}</Typography>
-          )}
-          {isEdit ? (
-            <Box style={{ display: 'flex', gap: '0.5rem' }}>
-              <IconButton onClick={onSave} sx={{ px: 0, py: '4px' }}>
-                <CheckOutlinedIcon sx={{ fontSize: '0.7em' }} />
-              </IconButton>
-              <IconButton onClick={onCancel} sx={{ px: 0, py: '4px' }}>
-                <CloseOutlinedIcon sx={{ fontSize: '0.7em' }} />
-              </IconButton>
-            </Box>
-          ) : editable ? (
-            <Box>
-              <IconButton onClick={onEdit}>
-                <ModeOutlinedIcon sx={{ fontSize: '0.7em' }} />
-              </IconButton>
-            </Box>
-          ) : (
-            <></>
-          )}
-        </Box>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '0.5rem',
-            color: theme.palette.grey[200],
-          }}
-        >
-          <Typography variant='h2'>{`Core Index: #${region.getCore()}`}</Typography>
-          <Typography variant='h2'>Begin: {getRelativeTimeString(beginTimestamp)}</Typography>
-          <Typography variant='h2'>End: {getRelativeTimeString(endTimestamp)}</Typography>
-        </Box>
-        <Box sx={{ display: 'flex', gap: '1rem' }}>
-          <Label
-            text={region.getPaid() ? 'Renewable' : 'Non-Renewable'}
-            color='primary'
-            width='9rem'
-          />
-          <Label text={locationToLabel(location)} color='success' width='9rem' />
-        </Box>
-      </div>
-      <Divider orientation='vertical' flexItem />
-      <Box sx={{ color: theme.palette.grey[200] }}>
-        <Link
-          sx={{ textDecoration: 'none' }}
-          rel='noopener noreferrer'
-          target='_blank'
-          onClick={(e) => !taskId && e.preventDefault()}
-          href={`${SUSBCAN_RELAY_URL[network]}/parachain/${taskId}`}
-        >
-          <Typography variant='subtitle2'>
-            {`Task: ${getTask(taskId)} ${taskId ? '#' + taskId : ''}`}
-          </Typography>
-        </Link>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '1.5rem',
-            mt: '2rem',
-          }}
-        >
-          {progress.map(({ label, value, color }, index) => (
-            <Box key={index} sx={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-              <LinearProgress
-                value={value * 100}
-                valueBuffer={100}
-                sx={{
-                  width: '8rem',
-                  height: '0.8em',
-                }}
-                variant='buffer'
-                color={color as 'warning' | 'success' | 'info'}
-              />
-              <Typography
-                variant='h2'
-                sx={{
-                  color: theme.palette.text.primary,
-                  width: '3rem',
-                  fontWeight: 400,
-                }}
-              >
-                {`${(value * 100).toFixed(2)}%`}
-              </Typography>
-              <Typography variant='h2' sx={{ fontWeight: 400 }}>
-                {label}
-              </Typography>
-            </Box>
-          ))}
-        </Box>
-      </Box>
-    </>
+    <div>
+      <RegionCard
+        regionData={{
+          name: regionMetadata.name || `Region ${regionMetadata.region.getCore()}`,
+          regionStart: getRelativeTimeString(beginTimestamp),
+          regionEnd: getRelativeTimeString(endTimestamp),
+          coreIndex: region.getCore(),
+          consumed: regionMetadata.consumed,
+          chainLabel: locationToLabel(location),
+          chainColor: location === RegionLocation.CORETIME_CHAIN ? 'purpleDark' : 'blueDark',
+          coreOcupaccy: regionMetadata.coreOccupancy * 100,
+          duration: formatDuration(endTimestamp - beginTimestamp),
+          currentUsage: regionMetadata.currentUsage * 100,
+        }}
+      />
+    </div>
   );
 };
diff --git a/src/components/Transfer/transferActions.tsx b/src/components/Transfer/transferActions.tsx
index 9c6cca38..4c0833cd 100644
--- a/src/components/Transfer/transferActions.tsx
+++ b/src/components/Transfer/transferActions.tsx
@@ -1,13 +1,7 @@
 import ArrowDownward from '@mui/icons-material/ArrowDownwardOutlined';
-import { Box, Button, Paper, Stack } from '@mui/material';
+import { Box, Paper, Stack } from '@mui/material';
 import { useRouter } from 'next/router';
 
-import theme from '@/utils/muiTheme';
-
-import { ProgressButton } from '@/components/Elements/Buttons/ProgressButton';
-import { AddressInput } from '@/components/Elements/Inputs/AddressInput';
-import { AmountInput } from '@/components/Elements/Inputs/AmountInput';
-
 import { useCoretimeApi, useRegionXApi, useRelayApi } from '@/contexts/apis';
 import { useBalances } from '@/contexts/balance';
 import { useNetwork } from '@/contexts/network';
@@ -18,6 +12,9 @@ import { assetType } from './common';
 import { useTransferState } from './contexts/transferState';
 import { useTransferHandlers } from './hooks/useTransferHandlers';
 
+import { AmountInput, Button } from '@region-x/components';
+import { AddressInput } from '../Elements';
+
 const TransferActions = () => {
   const { transferAmount, handleTransfer, working, newOwner, setNewOwner, setTransferAmount } =
     useTransferHandlers();
@@ -82,7 +79,7 @@ const TransferActions = () => {
       <Paper
         sx={{
           padding: '2rem',
-          borderRadius: '2rem',
+          borderRadius: '0.5rem',
           mt: '2rem',
           boxShadow: 'none',
         }}
@@ -95,9 +92,9 @@ const TransferActions = () => {
           destinationChain !== ChainType.NONE && (
             <Stack margin='2em 0' direction='column' gap={1}>
               <AmountInput
-                setAmount={setTransferAmount}
-                currency={symbol}
-                caption='Transfer amount'
+                // setAmount={setTransferAmount}
+                currencyOptions={[{ value: symbol, label: symbol, icon: <img /> }]}
+                label='Transfer amount'
               />
             </Stack>
           )}
@@ -112,17 +109,14 @@ const TransferActions = () => {
         }}
       >
         <Button
-          variant='outlined'
-          sx={{
-            borderRadius: 100,
-            bgcolor: theme.palette.common.white,
-            textTransform: 'capitalize',
-          }}
+          color='dark'
           onClick={onHome}
         >
-          &lt; Home
+          Home
+        </Button>
+        <Button onClick={onTransfer} loading={working}>
+          Transfer
         </Button>
-        <ProgressButton label='Transfer' onClick={onTransfer} loading={working} />
       </Box>
     </Box>
   );
diff --git a/src/components/Transfer/transferForm.tsx b/src/components/Transfer/transferForm.tsx
index 2da8d073..ef7add51 100644
--- a/src/components/Transfer/transferForm.tsx
+++ b/src/components/Transfer/transferForm.tsx
@@ -33,7 +33,7 @@ const TransferForm = () => {
       <Paper
         sx={{
           padding: '2rem',
-          borderRadius: '2rem',
+          borderRadius: '0.5rem',
           mb: '2rem',
           boxShadow: 'none',
         }}