diff --git a/package.json b/package.json
index 3f038749..93bb9ceb 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.10",
+    "@region-x/components": "^0.1.12",
     "@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 7475c2ab..a3b7baec 100644
--- a/src/components/Elements/Selectors/ChainSelector/index.tsx
+++ b/src/components/Elements/Selectors/ChainSelector/index.tsx
@@ -79,23 +79,23 @@ export const ChainSelector = ({ chain, setChain }: ChainSelectorProps) => {
     },
     ...(enableRegionX(network)
       ? [
-        {
-          icon: (
-            <Image
-              src={RegionX}
-              alt=''
-              style={{
-                width: '28px',
-                height: '28px',
-                marginRight: '0.5rem',
-                borderRadius: '100%',
-              }}
-            />
-          ),
-          label: regionXChain,
-          value: ChainType.REGIONX,
-        },
-      ]
+          {
+            icon: (
+              <Image
+                src={RegionX}
+                alt=''
+                style={{
+                  width: '28px',
+                  height: '28px',
+                  marginRight: '0.5rem',
+                  borderRadius: '100%',
+                }}
+              />
+            ),
+            label: regionXChain,
+            value: ChainType.REGIONX,
+          },
+        ]
       : []),
   ];
   return (
diff --git a/src/components/Regions/Modals/AddTask/index.tsx b/src/components/Regions/Modals/AddTask/index.tsx
index 40254048..3e1638e0 100644
--- a/src/components/Regions/Modals/AddTask/index.tsx
+++ b/src/components/Regions/Modals/AddTask/index.tsx
@@ -1,5 +1,4 @@
 import {
-  Button,
   Dialog,
   DialogActions,
   DialogContent,
@@ -10,10 +9,9 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
+import { Button } from '@region-x/components';
 import { useState } from 'react';
 
-import { ActionButton } from '@/components/Elements';
-
 import { useRelayApi } from '@/contexts/apis';
 import { useTasks } from '@/contexts/tasks';
 import { useToast } from '@/contexts/toast';
@@ -90,10 +88,10 @@ export const AddTaskModal = ({ onClose, ...props }: AddTaskModalProps) => {
         </Stack>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose} variant='outlined'>
+        <Button onClick={onClose} color='dark'>
           Cancel
         </Button>
-        <ActionButton label='Add Task' onClick={onAdd} />
+        <Button onClick={onAdd}>Add Task</Button>
       </DialogActions>
     </Dialog>
   );
diff --git a/src/components/Regions/Modals/Interlace/index.module.scss b/src/components/Regions/Modals/Interlace/index.module.scss
index b91796f4..ee7993e4 100644
--- a/src/components/Regions/Modals/Interlace/index.module.scss
+++ b/src/components/Regions/Modals/Interlace/index.module.scss
@@ -19,16 +19,18 @@
   margin-left: auto;
   margin-right: auto;
   width: 95%;
+  color: var(--greenPrimary);
 }
 
 .circular {
   margin-top: 1rem;
   margin-left: auto;
   margin-right: auto;
+  color: var(--greenPrimary);
 }
 
 .mask {
   width: 100%;
   overflow-x: clip;
   font-size: 12px;
-}
+}
\ No newline at end of file
diff --git a/src/components/Regions/Modals/Interlace/index.tsx b/src/components/Regions/Modals/Interlace/index.tsx
index 1addf829..e41e21aa 100644
--- a/src/components/Regions/Modals/Interlace/index.tsx
+++ b/src/components/Regions/Modals/Interlace/index.tsx
@@ -1,6 +1,5 @@
 import {
   Box,
-  Button,
   CircularProgress,
   Dialog,
   DialogActions,
@@ -11,12 +10,12 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
+import { Button } from '@region-x/components';
 import { maskFromBin, maskFromChunk, maskToBin } from 'coretime-utils';
 import { useEffect, useState } from 'react';
 
 import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic';
 
-import { ProgressButton } from '@/components/Elements';
 import { RegionOverview } from '@/components/Regions';
 
 import { useAccounts } from '@/contexts/account';
@@ -164,15 +163,12 @@ export const InterlaceModal = ({ open, onClose, regionMetadata }: InterlaceModal
         </Paper>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose} variant='outlined'>
+        <Button onClick={onClose} color='dark'>
           Cancel
         </Button>
-        <ProgressButton
-          onClick={onInterlace}
-          loading={working}
-          disabled={activeBits === 1}
-          label='Interlace'
-        />
+        <Button onClick={onInterlace} loading={working} disabled={activeBits === 1}>
+          Interlace
+        </Button>
       </DialogActions>
     </Dialog>
   );
diff --git a/src/components/Regions/Modals/Partition/index.module.scss b/src/components/Regions/Modals/Partition/index.module.scss
index 362d37e6..7809e6fb 100644
--- a/src/components/Regions/Modals/Partition/index.module.scss
+++ b/src/components/Regions/Modals/Partition/index.module.scss
@@ -9,7 +9,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
-  margin: 2rem 0 1rem 0;
+  margin: 1rem 0 1rem 0;
 }
 
 .timeContainer {
@@ -35,7 +35,8 @@
 
 .activeUnitItem {
   border-radius: 1rem;
-  border: 1px solid #e84d68;
+  background-color: var(--greenPrimary);
+  color: white;
 }
 
 .unitItem {
@@ -54,4 +55,4 @@
   margin-left: auto;
   margin-right: auto;
   width: 80%;
-}
+}
\ No newline at end of file
diff --git a/src/components/Regions/Modals/Partition/index.tsx b/src/components/Regions/Modals/Partition/index.tsx
index b9e027d3..76d57636 100644
--- a/src/components/Regions/Modals/Partition/index.tsx
+++ b/src/components/Regions/Modals/Partition/index.tsx
@@ -1,6 +1,5 @@
 import {
   Box,
-  Button,
   Dialog,
   DialogActions,
   DialogContent,
@@ -10,18 +9,18 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
+import { Button } from '@region-x/components';
 import { useEffect, useState } from 'react';
 
 import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic';
 
-import { ProgressButton } from '@/components/Elements';
 import { RegionOverview } from '@/components/Regions';
 
 import { useAccounts } from '@/contexts/account';
 import { useCoretimeApi } from '@/contexts/apis';
 import { useRegions } from '@/contexts/regions';
 import { useToast } from '@/contexts/toast';
-import { DAY, HOUR, MINUTE, RegionMetadata, RELAY_CHAIN_BLOCK_TIME } from '@/models';
+import { DAY, HOUR, RegionMetadata, RELAY_CHAIN_BLOCK_TIME } from '@/models';
 
 import styles from './index.module.scss';
 
@@ -32,11 +31,6 @@ interface PartitionModalProps extends DialogProps {
 
 export const PartitionModal = ({ open, onClose, regionMetadata }: PartitionModalProps) => {
   const timeUnits = [
-    {
-      label: 'Minutes',
-      unit: MINUTE,
-      strUnit: 'minute',
-    },
     {
       label: 'Hours',
       unit: HOUR,
@@ -166,16 +160,19 @@ export const PartitionModal = ({ open, onClose, regionMetadata }: PartitionModal
               valueLabelDisplay='on'
               valueLabelFormat={(v) => `${v} ${timeUnits[unitIdx].strUnit}${v > 1 ? 's' : ''}`}
               size='medium'
+              style={{ color: 'var(--greenPrimary)' }}
               className={styles.timeSlider}
             />
           </Paper>
         </Box>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose} variant='outlined'>
+        <Button onClick={onClose} color='dark'>
           Cancel
         </Button>
-        <ProgressButton onClick={onPartition} loading={working} label='Partition' />
+        <Button onClick={onPartition} loading={working}>
+          Partition
+        </Button>
       </DialogActions>
     </Dialog>
   );
diff --git a/src/components/Regions/Modals/Pooling/index.tsx b/src/components/Regions/Modals/Pooling/index.tsx
index 845c97c4..bf34981b 100644
--- a/src/components/Regions/Modals/Pooling/index.tsx
+++ b/src/components/Regions/Modals/Pooling/index.tsx
@@ -1,23 +1,20 @@
 import {
   Alert,
   Box,
-  Button,
   Dialog,
   DialogActions,
   DialogContent,
   DialogProps,
-  Input,
-  InputAdornment,
   Paper,
   Typography,
   useTheme,
 } from '@mui/material';
+import { Button } from '@region-x/components';
 import { useEffect, useState } from 'react';
 
 import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic';
-import { isValidAddress } from '@/utils/functions';
 
-import { FinalitySelector, ProgressButton } from '@/components/Elements';
+import { AddressInput, FinalitySelector } from '@/components/Elements';
 import { RegionOverview } from '@/components/Regions';
 
 import { useAccounts } from '@/contexts/account';
@@ -124,35 +121,18 @@ export const PoolingModal = ({ open, onClose, regionMetadata }: PoolingModalProp
           </Alert>
           <Box className={styles.optionItem}>
             <Typography className={styles.optionKey}>Payee:</Typography>
-            <Input
-              value={payee}
-              onChange={(e) => setPayee(e.target.value)}
-              fullWidth
-              type='text'
-              placeholder='Address of the payee'
-              endAdornment={
-                <InputAdornment position='end'>
-                  <Button
-                    variant='text'
-                    color='info'
-                    onClick={() => activeAccount && setPayee(activeAccount.address)}
-                  >
-                    Me
-                  </Button>
-                </InputAdornment>
-              }
-              sx={{ height: '3rem' }}
-              error={payee.length > 0 && !isValidAddress(payee)}
-            />
+            <AddressInput address={payee} label='' onChange={setPayee} />
           </Box>
         </Paper>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose} variant='outlined'>
+        <Button onClick={onClose} color='dark'>
           Cancel
         </Button>
 
-        <ProgressButton onClick={onPool} label='Pool' loading={working} />
+        <Button onClick={onPool} loading={working}>
+          Pool
+        </Button>
       </DialogActions>
     </Dialog>
   );
diff --git a/src/components/Regions/Modals/TaskAssign/index.module.scss b/src/components/Regions/Modals/TaskAssign/index.module.scss
index 3d3d5e80..3a348d2f 100644
--- a/src/components/Regions/Modals/TaskAssign/index.module.scss
+++ b/src/components/Regions/Modals/TaskAssign/index.module.scss
@@ -9,7 +9,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
-  margin: 2rem 0 1rem 0;
+  margin: 1rem 0 1rem 0;
 }
 
 .taskWrapper,
@@ -24,4 +24,5 @@
   max-width: 32rem;
   align-items: center;
   margin: 0 auto;
-}
+  background-color: white;
+}
\ No newline at end of file
diff --git a/src/components/Regions/Modals/TaskAssign/index.tsx b/src/components/Regions/Modals/TaskAssign/index.tsx
index a8052d15..f1d1e84f 100644
--- a/src/components/Regions/Modals/TaskAssign/index.tsx
+++ b/src/components/Regions/Modals/TaskAssign/index.tsx
@@ -3,7 +3,6 @@ import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
 import {
   Alert,
   Box,
-  Button,
   Dialog,
   DialogActions,
   DialogContent,
@@ -17,11 +16,12 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
+import { Button } from '@region-x/components';
 import { useEffect, useState } from 'react';
 
 import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic';
 
-import { FinalitySelector, ProgressButton } from '@/components/Elements';
+import { FinalitySelector } from '@/components/Elements';
 import { RegionOverview } from '@/components/Regions';
 
 import { useAccounts } from '@/contexts/account';
@@ -183,15 +183,7 @@ export const TaskAssignModal = ({ open, onClose, regionMetadata }: TaskAssignMod
                 <Typography sx={{ fontWeight: 700, color: theme.palette.common.black }}>
                   Tasks
                 </Typography>
-                <Button
-                  sx={{
-                    color: theme.palette.common.black,
-                    background: '#dcdcdc',
-                    padding: '0.5rem 1rem',
-                    borderRadius: '2rem',
-                  }}
-                  onClick={() => openTaskModal(true)}
-                >
+                <Button color='blueDark' onClick={() => openTaskModal(true)}>
                   Add Task
                 </Button>
               </Stack>
@@ -227,11 +219,13 @@ export const TaskAssignModal = ({ open, onClose, regionMetadata }: TaskAssignMod
         </DialogContent>
 
         <DialogActions>
-          <Button onClick={onClose} variant='outlined'>
+          <Button onClick={onClose} color='dark'>
             Cancel
           </Button>
 
-          <ProgressButton onClick={onAssign} label='Assign' loading={working} />
+          <Button onClick={onAssign} loading={working}>
+            Assign
+          </Button>
         </DialogActions>
       </Dialog>
       {taskModalOpen && <AddTaskModal open onClose={() => openTaskModal(false)} />}
diff --git a/src/components/Regions/Modals/Transfer/index.tsx b/src/components/Regions/Modals/Transfer/index.tsx
index c75ff363..ae9d86c2 100644
--- a/src/components/Regions/Modals/Transfer/index.tsx
+++ b/src/components/Regions/Modals/Transfer/index.tsx
@@ -1,6 +1,5 @@
 import {
   Box,
-  Button,
   Dialog,
   DialogActions,
   DialogContent,
@@ -9,6 +8,7 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
+import { Button } from '@region-x/components';
 import { Region } from 'coretime-utils';
 import { useEffect, useState } from 'react';
 
@@ -17,7 +17,7 @@ import {
   transferRegionOnRegionXChain,
 } from '@/utils/transfers/native';
 
-import { AddressInput, ProgressButton } from '@/components/Elements';
+import { AddressInput } from '@/components/Elements';
 import { RegionOverview } from '@/components/Regions';
 
 import { useAccounts } from '@/contexts/account';
@@ -155,11 +155,13 @@ export const TransferModal = ({ open, onClose, regionMetadata }: TransferModalPr
         </Box>
       </DialogContent>
       <DialogActions className={styles.buttons}>
-        <Button onClick={onClose} variant='outlined'>
+        <Button onClick={onClose} color='dark'>
           Cancel
         </Button>
 
-        <ProgressButton onClick={onTransfer} loading={working} label='Transfer' />
+        <Button onClick={onTransfer} loading={working}>
+          Transfer
+        </Button>
       </DialogActions>
     </Dialog>
   );
diff --git a/src/components/Regions/RegionMetaCard/index.tsx b/src/components/Regions/RegionMetaCard/index.tsx
index db2fb914..5f7643c7 100644
--- a/src/components/Regions/RegionMetaCard/index.tsx
+++ b/src/components/Regions/RegionMetaCard/index.tsx
@@ -1,53 +1,21 @@
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import CheckOutlinedIcon from '@mui/icons-material/CheckOutlined';
-import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
-import ModeOutlinedIcon from '@mui/icons-material/ModeOutlined';
-import {
-  Box,
-  Divider,
-  IconButton,
-  Input,
-  LinearProgress,
-  Link,
-  Paper,
-  Typography,
-  useTheme,
-} from '@mui/material';
-import { clsx } from 'clsx';
+import { RegionCard } from '@region-x/components';
 import { humanizer } from 'humanize-duration';
 import React, { useEffect, useState } from 'react';
 
 import { getRelativeTimeString, timesliceToTimestamp } from '@/utils/functions';
 
-import { SUSBCAN_RELAY_URL } from '@/consts';
 import { useCoretimeApi, useRelayApi } from '@/contexts/apis';
 import { ApiState } from '@/contexts/apis/types';
-import { useNetwork } from '@/contexts/network';
 import { useTasks } from '@/contexts/tasks';
 import { POOLING_TASK_ID, RegionLocation, RegionMetadata } from '@/models';
 
-import { Label } from '../..';
-import { RegionCard } from '@region-x/components';
 
 interface RegionMetaCardProps {
   regionMetadata: RegionMetadata;
-  editable?: boolean;
   active?: boolean;
-  bordered?: boolean;
-  updateName?: (_newName: string) => void;
-}
-
-interface RegionCardInnerProps {
-  regionMetadata: RegionMetadata;
-  editable?: boolean;
-  updateName?: (_newName: string) => void;
 }
 
-export const RegionMetaCard = ({
-  regionMetadata,
-  editable = false,
-  updateName,
-}: RegionCardInnerProps) => {
+export const RegionMetaCard = ({ active, regionMetadata }: RegionMetaCardProps) => {
   const { tasks } = useTasks();
 
   const formatDuration = humanizer({ units: ['w', 'd', 'h'], round: true });
@@ -98,7 +66,7 @@ export const RegionMetaCard = ({
   };
 
   return (
-    <div>
+    <div style={{ width: '450px' }}>
       <RegionCard
         regionData={{
           name: regionMetadata.name || `Region ${regionMetadata.region.getCore()}`,
@@ -112,6 +80,8 @@ export const RegionMetaCard = ({
           duration: formatDuration(endTimestamp - beginTimestamp),
           currentUsage: regionMetadata.currentUsage * 100,
         }}
+        task={`${getTask(taskId)}`}
+        selected={active}
       />
     </div>
   );
diff --git a/src/components/Transfer/transferActions.tsx b/src/components/Transfer/transferActions.tsx
index 4c0833cd..0765188a 100644
--- a/src/components/Transfer/transferActions.tsx
+++ b/src/components/Transfer/transferActions.tsx
@@ -1,5 +1,6 @@
 import ArrowDownward from '@mui/icons-material/ArrowDownwardOutlined';
 import { Box, Paper, Stack } from '@mui/material';
+import { AmountInput, Button } from '@region-x/components';
 import { useRouter } from 'next/router';
 
 import { useCoretimeApi, useRegionXApi, useRelayApi } from '@/contexts/apis';
@@ -11,8 +12,6 @@ import { AssetType, ChainType } from '@/models';
 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 = () => {
@@ -108,10 +107,7 @@ const TransferActions = () => {
           pb: '1rem',
         }}
       >
-        <Button
-          color='dark'
-          onClick={onHome}
-        >
+        <Button color='dark' onClick={onHome}>
           Home
         </Button>
         <Button onClick={onTransfer} loading={working}>
diff --git a/src/pages/regions.tsx b/src/pages/regions.tsx
index 02362335..1f71612f 100644
--- a/src/pages/regions.tsx
+++ b/src/pages/regions.tsx
@@ -121,6 +121,8 @@ const Dashboard = () => {
     );
   }, [regions, listedRegions]);
 
+  console.log(regions);
+
   return (
     <Box
       sx={{
@@ -147,12 +149,10 @@ const Dashboard = () => {
       >
         <Box
           sx={{
-            maxWidth: '50rem',
-            flexGrow: 1,
-            overflowY: 'auto',
+            width: '100%',
             display: 'flex',
-            flexDirection: 'column',
-            gap: '0.75rem',
+            justifyContent: 'flex-start',
+            gap: '2rem',
             '::-webkit-scrollbar': {
               display: 'none',
             },
@@ -174,12 +174,7 @@ const Dashboard = () => {
               {regionsToShow.map((region, index) => (
                 <Box key={index} onClick={() => setCurrentRegionIndex(index)}>
                   {region.status === ISMPRecordStatus.AVAILABLE ? (
-                    <RegionMetaCard
-                      regionMetadata={region}
-                      active={index === currentRegionIndex}
-                      editable
-                      updateName={(name) => updateRegionName(index, name)}
-                    />
+                    <RegionMetaCard regionMetadata={region} active={index === currentRegionIndex} />
                   ) : (
                     <IsmpRegionCard requestAction regionMetadata={region} />
                   )}
diff --git a/styles/_variables.scss b/styles/_variables.scss
index fbbca6e5..6ff0dc61 100644
--- a/styles/_variables.scss
+++ b/styles/_variables.scss
@@ -18,6 +18,7 @@ $blueDark: #1C3FB7;
 $blueLight5: #E1E8FF;
 $white: #fff;
 $black: #000;
+$lightGray: #f4f4f4;
 $gray3: #E5E7EB;
 $gray6: #CED4DA;
 $dark: #111928;
@@ -25,4 +26,4 @@ $dark5: #6B7280;
 $gray5: #CED4DA;
 $greenPrimary: #0CC184;
 $borderGray: #DFE4EA;
-$sliderDisabled: #54596C;
+$sliderDisabled: #54596C;
\ No newline at end of file
diff --git a/styles/global.scss b/styles/global.scss
index 9b42f9c9..e950985c 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -15,9 +15,10 @@
   --dark5: #{$dark5};
   --gray5: #{$gray5};
   --gray3: #{$gray3};
+  --lightGray: #{$lightGray};
   --greenPrimary: #{$greenPrimary};
 }
 
 a {
   color: $greenPrimary;
-}
+}
\ No newline at end of file