From 06012544b1078c2f878ba3dbc9f2ce8381de1646 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Mon, 22 May 2023 16:39:41 +0700
Subject: [PATCH 1/4] feat(components): refactor color system

---
 src/lib/app-fns/tx/submitProposal.tsx         |   2 +-
 src/lib/app-fns/tx/upload.tsx                 |   2 +-
 src/lib/components/AccordionStepperItem.tsx   |   4 +-
 src/lib/components/AssignMe.tsx               |   2 +-
 src/lib/components/ButtonCard.tsx             |   8 +-
 src/lib/components/ConnectWalletAlert.tsx     |   4 +-
 src/lib/components/ContractSelectSection.tsx  |   2 +-
 src/lib/components/CopyLink.tsx               |   8 +-
 src/lib/components/CustomTab.tsx              |   4 +-
 src/lib/components/DotSeparator.tsx           |   2 +-
 src/lib/components/DotSeperator.tsx           |   2 +-
 src/lib/components/Expedited.tsx              |   4 +-
 src/lib/components/ExplorerLink.tsx           |   6 +-
 src/lib/components/InputWithIcon.tsx          |   2 +-
 src/lib/components/ListSelection.tsx          |  14 +-
 src/lib/components/Loading.tsx                |   2 +-
 src/lib/components/PermissionChip.tsx         |   2 +-
 src/lib/components/PublicDescription.tsx      |   2 +-
 src/lib/components/StickySidebar.tsx          |  14 +-
 src/lib/components/TagSelection.tsx           |  12 +-
 src/lib/components/TokenCard.tsx              |   4 +-
 src/lib/components/TxFilterSelection.tsx      |  10 +-
 .../components/ViewPermissionAddresses.tsx    |   2 +-
 src/lib/components/Wallet.tsx                 |   2 +-
 src/lib/components/action-msg/SingleMsg.tsx   |   2 +-
 src/lib/components/button/AdminButton.tsx     |   8 +-
 src/lib/components/button/BackButton.tsx      |   2 +-
 .../components/button/CustomIconButton.tsx    |   2 +-
 .../components/button/InstantiateButton.tsx   |   2 +-
 .../components/button/NewProposalButton.tsx   |   6 +-
 src/lib/components/button/ShowMoreButton.tsx  |   4 +-
 src/lib/components/copy/Copier.tsx            |   2 +-
 src/lib/components/copy/CopyButton.tsx        |   2 +-
 src/lib/components/dropzone/index.tsx         |   8 +-
 src/lib/components/filter/FilterComponents.ts |   2 +-
 .../components/filter/FilterDropdownItem.tsx  |   4 +-
 src/lib/components/filter/FilterInput.tsx     |   4 +-
 src/lib/components/forms/SelectInput.tsx      |  16 +-
 src/lib/components/icon/UploadIcon.tsx        |   4 +-
 src/lib/components/json/JsonInput.tsx         |   6 +-
 src/lib/components/json/JsonReadOnly.tsx      |   4 +-
 src/lib/components/json/ViewFullMsgButton.tsx |   4 +-
 src/lib/components/links/GitHubLink.tsx       |   4 +-
 src/lib/components/modal/ActionModal.tsx      |   6 +-
 src/lib/components/modal/CodeSnippet.tsx      |   6 +-
 src/lib/components/modal/NoMobile.tsx         |   2 +-
 src/lib/components/modal/RedoModal.tsx        |  10 +-
 .../modal/UnsupportedTokensModal.tsx          |   8 +-
 .../modal/code/CodeDetailsTemplate.tsx        |   2 +-
 src/lib/components/modal/code/SaveNewCode.tsx |   6 +-
 .../modal/contract/AddToOtherList.tsx         |   2 +-
 .../components/modal/contract/ClearAdmin.tsx  |   2 +-
 .../contract/ContractDetailsTemplate.tsx      |   2 +-
 .../modal/contract/SaveNewContract.tsx        |   6 +-
 .../components/modal/list/CreateNewList.tsx   |   2 +-
 .../components/modal/list/EditListName.tsx    |   2 +-
 src/lib/components/pagination/index.tsx       |   2 +-
 src/lib/components/select-code/CodeSelect.tsx |   4 +-
 .../select-code/CodeSelectDrawerButton.tsx    |   6 +-
 .../select-contract/ContractListCard.tsx      |   6 +-
 .../select-contract/SelectContractAdmin.tsx   |   2 +-
 .../SelectContractInstantiator.tsx            |  10 +-
 src/lib/components/state/EmptyState.tsx       |   2 +-
 src/lib/components/state/InvalidState.tsx     |   2 +-
 src/lib/components/state/ZeroState.tsx        |   4 +-
 src/lib/components/stepper/StepperItem.tsx    |   4 +-
 src/lib/components/table/AccordionTx.tsx      |   2 +-
 src/lib/components/table/EditableCell.tsx     |   6 +-
 src/lib/components/table/TableTitle.tsx       |   2 +-
 .../components/table/codes/CodesTableRow.tsx  |   2 +-
 .../table/codes/CodesTableWithWallet.tsx      |   2 +-
 .../table/contracts/ContractsTableRow.tsx     |   2 +-
 .../table/contracts/ContractsTableRowCTA.tsx  |  12 +-
 .../components/table/contracts/EditTags.tsx   |   9 +-
 .../components/table/contracts/TagsCell.tsx   |   2 +-
 .../components/table/proposals/StatusChip.tsx |   6 +-
 src/lib/components/table/tableComponents.ts   |   4 +-
 .../table/transactions/RelationChip.tsx       |   4 +-
 .../transactions/TransactionsTableRow.tsx     |   6 +-
 .../TransactionsTableWithWallet.tsx           |   2 +-
 src/lib/components/tx/TxReceiptRender.tsx     |   2 +-
 src/lib/components/tx/modal/ButtonSection.tsx |   6 +-
 src/lib/components/tx/modal/index.tsx         |   2 +-
 .../upload/components/UploadCard.tsx          |   4 +-
 src/lib/layout/Footer.tsx                     |   8 +-
 src/lib/layout/Header.tsx                     |  10 +-
 src/lib/layout/Searchbar.tsx                  |  10 +-
 src/lib/layout/SubHeader.tsx                  |  12 +-
 src/lib/layout/index.tsx                      |   4 +-
 src/lib/layout/navbar/Collapse.tsx            |  12 +-
 src/lib/layout/navbar/Expand.tsx              |  16 +-
 .../components/ErrorFetching.tsx              |   7 +-
 .../delegations/NonRedelegatableSection.tsx   |   4 +-
 .../components/delegations/RadioCard.tsx      |   2 +-
 .../delegations/RedelegationsSection.tsx      |   2 +-
 .../components/delegations/TotalCard.tsx      |   2 +-
 .../tables/bonded/BondedTableRow.tsx          |   2 +-
 .../redelegation/RedelegationTableRow.tsx     |   4 +-
 src/lib/pages/account-details/index.tsx       |  12 +-
 .../components/BlockDetailsTop.tsx            |   6 +-
 .../components/table/NoContracts.tsx          |   2 +-
 src/lib/pages/code-details/index.tsx          |   4 +-
 src/lib/pages/codes/index.tsx                 |   2 +-
 .../components/CommandSection.tsx             |   4 +-
 .../components/ContractTop.tsx                |   8 +-
 .../components/InstantiateInfo.tsx            |   2 +-
 .../contract-details/components/JsonInfo.tsx  |   6 +-
 .../contract-description/UserContractDesc.tsx |   6 +-
 .../components/contract-description/index.tsx |   2 +-
 src/lib/pages/contract-details/index.tsx      |   2 +-
 src/lib/pages/contract-list/slug.tsx          |   6 +-
 src/lib/pages/deploy/index.tsx                |   4 +-
 src/lib/pages/execute/index.tsx               |   2 +-
 src/lib/pages/faucet/index.tsx                |   2 +-
 .../pages/home/components/PastTransaction.tsx |   4 +-
 src/lib/pages/home/components/QuickMenu.tsx   |  16 +-
 .../home/components/RecentActivities.tsx      |  12 +-
 src/lib/pages/instantiate/completed.tsx       |   2 +-
 .../pages/instantiate/component/Footer.tsx    |   2 +-
 src/lib/pages/instantiate/instantiate.tsx     |   2 +-
 src/lib/pages/network-overview/index.tsx      |  12 +-
 src/lib/pages/not-found/index.tsx             |   2 +-
 src/lib/pages/past-txs/index.tsx              |   2 +-
 .../pages/proposal/components/AssetBox.tsx    |   4 +-
 src/lib/pages/proposal/components/Footer.tsx  |   2 +-
 src/lib/pages/proposal/utils/getAlert.tsx     |   4 +-
 src/lib/pages/proposal/whitelist/index.tsx    |  10 +-
 .../proposals/components/ProposalTextCell.tsx |   2 +-
 .../components/ProposalTypeFilter.tsx         |   2 +-
 .../proposals/table/ProposalTableHeader.tsx   |   2 +-
 .../proposals/table/ProposalTableRow.tsx      |   6 +-
 .../components/BookmarkButton.tsx             |   4 +-
 .../components/DetailHeader.tsx               |   2 +-
 .../components/PublicProjectCard.tsx          |   4 +-
 .../table/account/PublicProjectAccountRow.tsx |   2 +-
 .../table/code/PublicProjectCodeRow.tsx       |   2 +-
 .../contract/PublicProjectContractRow.tsx     |   8 +-
 src/lib/pages/public-project/slug.tsx         |   2 +-
 src/lib/pages/query/index.tsx                 |   2 +-
 .../pages/tx-details/components/TxHeader.tsx  |   2 +-
 .../components/tx-message/EventBox.tsx        |  15 +-
 .../components/tx-message/TxMsgExpand.tsx     |  10 +-
 .../tx-message/msg-receipts/index.tsx         |   2 +-
 .../tx-message/msg-receipts/renderUtils.tsx   |   2 +-
 src/lib/styles/theme/colors.ts                |  23 ++-
 src/lib/styles/theme/components/alert.ts      |  12 +-
 src/lib/styles/theme/components/badge.ts      |   8 +-
 src/lib/styles/theme/components/button.ts     | 138 +++++++++---------
 src/lib/styles/theme/components/drawer.ts     |   2 +-
 src/lib/styles/theme/components/form.ts       |   2 +-
 src/lib/styles/theme/components/input.ts      |  10 +-
 src/lib/styles/theme/components/link.ts       |   2 +-
 src/lib/styles/theme/components/menu.ts       |   8 +-
 src/lib/styles/theme/components/modal.ts      |   2 +-
 src/lib/styles/theme/components/radio.ts      |  14 +-
 src/lib/styles/theme/components/select.ts     |   6 +-
 src/lib/styles/theme/components/spinner.ts    |   4 +-
 src/lib/styles/theme/components/switch.ts     |   2 +-
 src/lib/styles/theme/components/tag.ts        |  26 ++--
 src/lib/styles/theme/components/textarea.ts   |  10 +-
 src/lib/styles/theme/components/tooltip.ts    |   4 +-
 src/lib/utils/codePermission.ts               |   2 +-
 162 files changed, 463 insertions(+), 495 deletions(-)

diff --git a/src/lib/app-fns/tx/submitProposal.tsx b/src/lib/app-fns/tx/submitProposal.tsx
index 95c14a0d8..96ef893c1 100644
--- a/src/lib/app-fns/tx/submitProposal.tsx
+++ b/src/lib/app-fns/tx/submitProposal.tsx
@@ -89,7 +89,7 @@ export const submitProposalTx = ({
           headerIcon: (
             <CustomIcon
               name="submit-proposal-solid"
-              color="pebble.600"
+              color="gray.600"
               boxSize="5"
             />
           ),
diff --git a/src/lib/app-fns/tx/upload.tsx b/src/lib/app-fns/tx/upload.tsx
index 423d72831..5f925a9af 100644
--- a/src/lib/app-fns/tx/upload.tsx
+++ b/src/lib/app-fns/tx/upload.tsx
@@ -95,7 +95,7 @@ export const uploadContractTx = ({
             </>
           ),
           headerIcon: (
-            <CustomIcon name="upload-cloud" boxSize="5" color="pebble.600" />
+            <CustomIcon name="upload-cloud" boxSize="5" color="gray.600" />
           ),
         },
         actionVariant: isMigrate ? "upload-migrate" : "upload",
diff --git a/src/lib/components/AccordionStepperItem.tsx b/src/lib/components/AccordionStepperItem.tsx
index 84ee343d1..ef648cc38 100644
--- a/src/lib/components/AccordionStepperItem.tsx
+++ b/src/lib/components/AccordionStepperItem.tsx
@@ -8,7 +8,7 @@ export const AccordionStepperItem = () => (
       h="31px"
       right="45%"
       bottom="9px"
-      background="pebble.600"
+      background="gray.600"
       position="absolute"
       visibility="hidden"
       zIndex={0}
@@ -18,7 +18,7 @@ export const AccordionStepperItem = () => (
       borderRadius="full"
       h="10px"
       w="10px"
-      borderColor="pebble.600"
+      borderColor="gray.600"
       borderWidth="1px"
       position="relative"
       zIndex={1}
diff --git a/src/lib/components/AssignMe.tsx b/src/lib/components/AssignMe.tsx
index f1bedab86..f452b8fde 100644
--- a/src/lib/components/AssignMe.tsx
+++ b/src/lib/components/AssignMe.tsx
@@ -14,7 +14,7 @@ export const AssignMe = ({ onClick, isDisable = false }: AssginMeProps) => {
     <Text
       textAlign="right"
       mr={3}
-      color={enabled ? "honeydew.main" : "pebble.500"}
+      color={enabled ? "accent.main" : "gray.500"}
       fontWeight="600"
       variant="body3"
       cursor={enabled ? "pointer" : "not-allowed"}
diff --git a/src/lib/components/ButtonCard.tsx b/src/lib/components/ButtonCard.tsx
index 85d5503ec..6237ee595 100644
--- a/src/lib/components/ButtonCard.tsx
+++ b/src/lib/components/ButtonCard.tsx
@@ -24,14 +24,14 @@ export const ButtonCard = ({
     align="center"
     justify="space-between"
     onClick={!disabled ? onClick : undefined}
-    bgColor="pebble.800"
+    bgColor="gray.800"
     borderRadius="8px"
     w="100%"
     cursor="pointer"
-    _hover={{ bgColor: "pebble.700" }}
+    _hover={{ bgColor: "gray.700" }}
     transition="all .25s ease-in-out"
     _disabled={{
-      bgColor: "pebble.900",
+      bgColor: "gray.900",
       cursor: "not-allowed",
     }}
     {...componentProps}
@@ -52,6 +52,6 @@ export const ButtonCard = ({
         description
       )}
     </Stack>
-    <CustomIcon name="chevron-right" color="pebble.600" />
+    <CustomIcon name="chevron-right" color="gray.600" />
   </Flex>
 );
diff --git a/src/lib/components/ConnectWalletAlert.tsx b/src/lib/components/ConnectWalletAlert.tsx
index 57eacf0a5..a4e99b591 100644
--- a/src/lib/components/ConnectWalletAlert.tsx
+++ b/src/lib/components/ConnectWalletAlert.tsx
@@ -35,7 +35,7 @@ export const ConnectWalletAlert = ({
   return !address ? (
     <Alert
       {...alertProps}
-      variant="honeydew"
+      variant="accent"
       alignItems="center"
       justifyContent="space-between"
       py="12px"
@@ -47,7 +47,7 @@ export const ConnectWalletAlert = ({
           <AlertDescription>{subtitle}</AlertDescription>
         </Box>
       </Flex>
-      <Button size="sm" variant="ghost-info" gap={2} onClick={onClickConnect}>
+      <Button size="sm" variant="ghost-accent" gap={2} onClick={onClickConnect}>
         <CustomIcon name="connect" /> Connect Wallet
       </Button>
     </Alert>
diff --git a/src/lib/components/ContractSelectSection.tsx b/src/lib/components/ContractSelectSection.tsx
index 58766bfef..7a7b0b999 100644
--- a/src/lib/components/ContractSelectSection.tsx
+++ b/src/lib/components/ContractSelectSection.tsx
@@ -196,7 +196,7 @@ export const ContractSelectSection = observer(
       <Flex
         mb={style.container}
         borderWidth="thin"
-        borderColor="pebble.800"
+        borderColor="gray.800"
         p="16px"
         borderRadius="8px"
         fontSize="12px"
diff --git a/src/lib/components/CopyLink.tsx b/src/lib/components/CopyLink.tsx
index d2195c9fe..6c56d7d30 100644
--- a/src/lib/components/CopyLink.tsx
+++ b/src/lib/components/CopyLink.tsx
@@ -31,8 +31,8 @@ export const CopyLink = ({ value, amptrackSection, type }: CopyLinkProps) => {
         }}
         _hover={{
           textDecoration: "underline",
-          textDecorationColor: "lilac.light",
-          "& > p": { color: "lilac.light" },
+          textDecorationColor: "secondary.light",
+          "& > p": { color: "secondary.light" },
         }}
         cursor="pointer"
         onMouseEnter={() => setIsHover(true)}
@@ -40,7 +40,7 @@ export const CopyLink = ({ value, amptrackSection, type }: CopyLinkProps) => {
       >
         <Text
           variant="body2"
-          color="lilac.main"
+          color="secondary.main"
           transition="all .25s ease-in-out"
         >
           {value === address ? `${value} (Me)` : value}
@@ -50,7 +50,7 @@ export const CopyLink = ({ value, amptrackSection, type }: CopyLinkProps) => {
           marginLeft={2}
           name="copy"
           boxSize={3}
-          color="pebble.600"
+          color="gray.600"
         />
       </Flex>
     </Tooltip>
diff --git a/src/lib/components/CustomTab.tsx b/src/lib/components/CustomTab.tsx
index 383fdbfea..d3b770ff3 100644
--- a/src/lib/components/CustomTab.tsx
+++ b/src/lib/components/CustomTab.tsx
@@ -23,7 +23,7 @@ export const CustomTab = ({ count, ...restProps }: CustomTabProps) => {
       mb={0}
       sx={{
         "&[aria-selected=true]": {
-          color: "violet.light",
+          color: "primary.light",
         },
       }}
       _active={{
@@ -34,7 +34,7 @@ export const CustomTab = ({ count, ...restProps }: CustomTabProps) => {
       {tabProps.children}
 
       {count !== undefined && (
-        <Badge variant={isSelected ? "violet" : "gray"} ml="6px">
+        <Badge variant={isSelected ? "primary" : "gray"} ml="6px">
           {count}
         </Badge>
       )}
diff --git a/src/lib/components/DotSeparator.tsx b/src/lib/components/DotSeparator.tsx
index 73441a265..1e6778911 100644
--- a/src/lib/components/DotSeparator.tsx
+++ b/src/lib/components/DotSeparator.tsx
@@ -1,5 +1,5 @@
 import { Box } from "@chakra-ui/react";
 
 export const DotSeparator = () => (
-  <Box bg="lilac.darker" borderRadius="50%" w="4px" h="4px" />
+  <Box bg="secondary.darker" borderRadius="50%" w="4px" h="4px" />
 );
diff --git a/src/lib/components/DotSeperator.tsx b/src/lib/components/DotSeperator.tsx
index 73441a265..1e6778911 100644
--- a/src/lib/components/DotSeperator.tsx
+++ b/src/lib/components/DotSeperator.tsx
@@ -1,5 +1,5 @@
 import { Box } from "@chakra-ui/react";
 
 export const DotSeparator = () => (
-  <Box bg="lilac.darker" borderRadius="50%" w="4px" h="4px" />
+  <Box bg="secondary.darker" borderRadius="50%" w="4px" h="4px" />
 );
diff --git a/src/lib/components/Expedited.tsx b/src/lib/components/Expedited.tsx
index 9dac00cd2..50acc297c 100644
--- a/src/lib/components/Expedited.tsx
+++ b/src/lib/components/Expedited.tsx
@@ -25,11 +25,11 @@ export const Expedited = ({ isActiveExpedited }: ExpeditedProps) => (
         name="expedited"
         boxSize="4"
         ml="0"
-        color={isActiveExpedited ? "honeydew.main" : "pebble.400"}
+        color={isActiveExpedited ? "accent.main" : "gray.400"}
       />
       <Text
         variant="body3"
-        color={isActiveExpedited ? "honeydew.main" : "text.dark"}
+        color={isActiveExpedited ? "accent.main" : "text.dark"}
       >
         Expedited
       </Text>
diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx
index 64064b1e4..240de5a3b 100644
--- a/src/lib/components/ExplorerLink.tsx
+++ b/src/lib/components/ExplorerLink.tsx
@@ -111,9 +111,9 @@ const LinkRender = ({
   const textElement = (
     <Text
       variant={textVariant}
-      color="lilac.main"
+      color="secondary.main"
       transition="all .25s ease-in-out"
-      _hover={{ color: "lilac.light" }}
+      _hover={{ color: "secondary.light" }}
       className={isEllipsis ? "ellipsis" : undefined}
       maxW={maxWidth}
       pointerEvents={hrefLink ? "auto" : "none"}
@@ -179,7 +179,7 @@ export const ExplorerLink = ({
       _hover={{
         ...(!readOnly && {
           textDecoration: "underline",
-          textDecorationColor: "lilac.light",
+          textDecorationColor: "secondary.light",
         }),
       }}
       {...componentProps}
diff --git a/src/lib/components/InputWithIcon.tsx b/src/lib/components/InputWithIcon.tsx
index 1cf789a65..13b3337d1 100644
--- a/src/lib/components/InputWithIcon.tsx
+++ b/src/lib/components/InputWithIcon.tsx
@@ -30,7 +30,7 @@ const InputWithIcon = ({
       onClick={action ? () => AmpTrack(AmpEvent.USE_SEARCH_INPUT) : undefined}
     />
     <InputRightElement h="56px" alignItems="center" mr="1">
-      <CustomIcon name="search" color="pebble.600" />
+      <CustomIcon name="search" color="gray.600" />
     </InputRightElement>
   </InputGroup>
 );
diff --git a/src/lib/components/ListSelection.tsx b/src/lib/components/ListSelection.tsx
index 0de9d2e30..03e797a4c 100644
--- a/src/lib/components/ListSelection.tsx
+++ b/src/lib/components/ListSelection.tsx
@@ -46,7 +46,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
       setResult,
       placeholder,
       helperText,
-      labelBgColor = "pebble.900",
+      labelBgColor = "gray.900",
       ...rest
     }: ListSelectionProps,
     ref
@@ -127,7 +127,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
             alignItems="center"
             color="text.main"
             border="1px solid"
-            borderColor="pebble.700"
+            borderColor="gray.700"
             background="none"
             borderRadius="8px"
             maxW="100%"
@@ -144,7 +144,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                     <Tag
                       cursor="pointer"
                       whiteSpace="nowrap"
-                      variant="violet-light"
+                      variant="primary-light"
                       gap={1}
                       mr={1}
                     >
@@ -194,7 +194,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
           {displayOptions && (
             <List
               borderRadius="8px"
-              bg="pebble.800"
+              bg="gray.800"
               px="2"
               py="1"
               mt={0}
@@ -210,7 +210,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                 <ListItem
                   key={option.value}
                   style={listItemProps}
-                  _hover={{ bg: "pebble.700" }}
+                  _hover={{ bg: "gray.700" }}
                   transition="all .25s ease-in-out"
                   onClick={() => selectOptionFromList(option)}
                 >
@@ -221,7 +221,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                         data-label={option.label}
                         mr={2}
                         name="check"
-                        color="pebble.600"
+                        color="gray.600"
                         boxSize="3"
                       />
                     )}
@@ -235,7 +235,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                     <ListItem
                       w="full"
                       style={listItemProps}
-                      _hover={{ bg: "pebble.700" }}
+                      _hover={{ bg: "gray.700" }}
                       transition="all .25s ease-in-out"
                       data-testid="create-option"
                       onClick={() => setEnableOutside(false)}
diff --git a/src/lib/components/Loading.tsx b/src/lib/components/Loading.tsx
index 961308b1e..eeb87be83 100644
--- a/src/lib/components/Loading.tsx
+++ b/src/lib/components/Loading.tsx
@@ -3,7 +3,7 @@ import { Flex, Spinner, Text } from "@chakra-ui/react";
 export const Loading = () => (
   <Flex
     borderY="1px solid"
-    borderColor="pebble.700"
+    borderColor="gray.700"
     width="full"
     py="60px"
     my={12}
diff --git a/src/lib/components/PermissionChip.tsx b/src/lib/components/PermissionChip.tsx
index 740b37bb8..02ed3d920 100644
--- a/src/lib/components/PermissionChip.tsx
+++ b/src/lib/components/PermissionChip.tsx
@@ -31,7 +31,7 @@ export const PermissionChip = ({
   return (
     <Tooltip label={message}>
       <Flex>
-        <Tag size="md" variant={isAllowed ? "honeydew-darker" : "gray"}>
+        <Tag size="md" variant={isAllowed ? "accent-darker" : "gray"}>
           {instantiatePermission}
         </Tag>
       </Flex>
diff --git a/src/lib/components/PublicDescription.tsx b/src/lib/components/PublicDescription.tsx
index 920bb5967..a3266f2df 100644
--- a/src/lib/components/PublicDescription.tsx
+++ b/src/lib/components/PublicDescription.tsx
@@ -30,7 +30,7 @@ export const PublicDescription = ({
   return (
     <Flex
       direction="column"
-      bg="pebble.900"
+      bg="gray.900"
       maxW="100%"
       borderRadius="8px"
       p={4}
diff --git a/src/lib/components/StickySidebar.tsx b/src/lib/components/StickySidebar.tsx
index 12cfb2c39..e7be9107b 100644
--- a/src/lib/components/StickySidebar.tsx
+++ b/src/lib/components/StickySidebar.tsx
@@ -39,7 +39,7 @@ export const StickySidebar = ({
     <Box flex="4" px={8} position="relative" {...boxProps}>
       <Flex position="fixed" width="full">
         <Accordion allowToggle width={96} defaultIndex={[0]}>
-          <AccordionItem borderTop="none" borderColor="pebble.700">
+          <AccordionItem borderTop="none" borderColor="gray.700">
             <AccordionButton py={3} px={0}>
               <Text
                 variant="body2"
@@ -49,13 +49,13 @@ export const StickySidebar = ({
               >
                 {title}
               </Text>
-              <AccordionIcon color="pebble.600" ml="auto" />
+              <AccordionIcon color="gray.600" ml="auto" />
             </AccordionButton>
             <AccordionPanel
               py={3}
               px={0}
               borderTop="1px solid"
-              borderColor="pebble.700"
+              borderColor="gray.700"
             >
               <Text variant="body2" color="text.dark" mb={hasAction ? 3 : 0}>
                 {description}
@@ -69,10 +69,10 @@ export const StickySidebar = ({
                   gap={2}
                   width="fit-content"
                   transition="all 0.25s ease-in-out"
-                  color="lilac.main"
+                  color="secondary.main"
                   _hover={{
-                    color: "lilac.light",
-                    bgColor: "lilac.background",
+                    color: "secondary.light",
+                    bgColor: "secondary.background",
                   }}
                   onClick={() =>
                     navigate({ pathname: "/proposals/store-code" })
@@ -83,7 +83,7 @@ export const StickySidebar = ({
                   </Text>
                   <CustomIcon
                     name="chevron-right"
-                    color="lilac.main"
+                    color="secondary.main"
                     boxSize={3}
                     m={0}
                   />
diff --git a/src/lib/components/TagSelection.tsx b/src/lib/components/TagSelection.tsx
index fd5d3f5c5..ad887b36f 100644
--- a/src/lib/components/TagSelection.tsx
+++ b/src/lib/components/TagSelection.tsx
@@ -141,7 +141,7 @@ export const TagSelection = observer(
               borderRadius="8px"
               maxW="100%"
               border="1px solid"
-              borderColor="pebble.700"
+              borderColor="gray.700"
               overflowX="scroll"
             >
               {result.length > 0 && (
@@ -201,7 +201,7 @@ export const TagSelection = observer(
             {displayOptions && (
               <List
                 borderRadius="8px"
-                bg="pebble.800"
+                bg="gray.800"
                 px="2"
                 py="1"
                 mt={0}
@@ -215,7 +215,7 @@ export const TagSelection = observer(
                 {/* header */}
                 <ListItem
                   p={2}
-                  borderBottomColor="pebble.700"
+                  borderBottomColor="gray.700"
                   borderBottomWidth={noResultAndUncreatable ? "0" : "1px"}
                 >
                   {noResultAndUncreatable ? (
@@ -233,7 +233,7 @@ export const TagSelection = observer(
                   <ListItem
                     key={option}
                     style={listItemProps}
-                    _hover={{ bg: "pebble.700" }}
+                    _hover={{ bg: "gray.700" }}
                     transition="all .25s ease-in-out"
                     onClick={() => selectOptionFromList(option)}
                   >
@@ -246,7 +246,7 @@ export const TagSelection = observer(
                           data-label={option}
                           mr={2}
                           name="check"
-                          color="pebble.600"
+                          color="gray.600"
                           boxSize="3"
                         />
                       )}
@@ -257,7 +257,7 @@ export const TagSelection = observer(
                 {canCreateOption && inputValue && (
                   <ListItem
                     style={listItemProps}
-                    _hover={{ bg: "pebble.700" }}
+                    _hover={{ bg: "gray.700" }}
                     transition="all .25s ease-in-out"
                     data-testid="create-option"
                     onClick={() => createOption()}
diff --git a/src/lib/components/TokenCard.tsx b/src/lib/components/TokenCard.tsx
index 671e72a47..bdf3dcbf1 100644
--- a/src/lib/components/TokenCard.tsx
+++ b/src/lib/components/TokenCard.tsx
@@ -37,7 +37,7 @@ export const TokenCard = ({
         minH="101px"
         gap={2}
         p={3}
-        background="pebble.900"
+        background="gray.900"
         borderRadius="8px"
         {...cardProps}
       >
@@ -45,7 +45,7 @@ export const TokenCard = ({
           gap={1}
           alignItems="center"
           borderBottom="1px solid"
-          borderBottomColor="pebble.700"
+          borderBottomColor="gray.700"
           pb={2}
         >
           <Image
diff --git a/src/lib/components/TxFilterSelection.tsx b/src/lib/components/TxFilterSelection.tsx
index 72e169140..fbc208cc4 100644
--- a/src/lib/components/TxFilterSelection.tsx
+++ b/src/lib/components/TxFilterSelection.tsx
@@ -112,7 +112,7 @@ export const TxFilterSelection = forwardRef<
             background="none"
             borderRadius="8px"
             border="1px solid"
-            borderColor="pebble.700"
+            borderColor="gray.700"
             maxW="100%"
             overflowX="scroll"
           >
@@ -125,7 +125,7 @@ export const TxFilterSelection = forwardRef<
                     key={option}
                   >
                     <Tag
-                      variant="violet-light"
+                      variant="primary-light"
                       gap={1}
                       mr={1}
                       whiteSpace="nowrap"
@@ -178,7 +178,7 @@ export const TxFilterSelection = forwardRef<
           {displayOptions && (
             <List
               borderRadius="8px"
-              bg="pebble.900"
+              bg="gray.900"
               px="2"
               py="1"
               mt={0}
@@ -192,7 +192,7 @@ export const TxFilterSelection = forwardRef<
                 <ListItem
                   key={option}
                   style={listItemProps}
-                  _hover={{ bg: "pebble.800" }}
+                  _hover={{ bg: "gray.800" }}
                   transition="all .25s ease-in-out"
                   onClick={() => selectOption(option)}
                 >
@@ -203,7 +203,7 @@ export const TxFilterSelection = forwardRef<
                       <CustomIcon
                         name="check"
                         data-label={option}
-                        color="pebble.600"
+                        color="gray.600"
                       />
                     )}
                   </Flex>
diff --git a/src/lib/components/ViewPermissionAddresses.tsx b/src/lib/components/ViewPermissionAddresses.tsx
index 96ff89e09..0d24070b2 100644
--- a/src/lib/components/ViewPermissionAddresses.tsx
+++ b/src/lib/components/ViewPermissionAddresses.tsx
@@ -35,7 +35,7 @@ export const ViewPermissionAddresses = ({
         ))}
       {permissionAddresses.length > 1 && (
         <Button
-          variant="ghost-lilac"
+          variant="ghost-secondary"
           onClick={() => {
             AmpTrackExpand(
               viewAll ? "collapse" : "expand",
diff --git a/src/lib/components/Wallet.tsx b/src/lib/components/Wallet.tsx
index 052ce5330..ded48565f 100644
--- a/src/lib/components/Wallet.tsx
+++ b/src/lib/components/Wallet.tsx
@@ -46,7 +46,7 @@ export const WalletSection = () => {
           buttonText={truncate(address)}
           icon="wallet"
           onClick={onClickOpenView}
-          variant="outline-info"
+          variant="outline-accent"
         />
       }
       rejected={<Others buttonText="Reconnect" onClick={onClickConnect} />}
diff --git a/src/lib/components/action-msg/SingleMsg.tsx b/src/lib/components/action-msg/SingleMsg.tsx
index 9f64d38c5..758006a2f 100644
--- a/src/lib/components/action-msg/SingleMsg.tsx
+++ b/src/lib/components/action-msg/SingleMsg.tsx
@@ -68,7 +68,7 @@ export const SingleMsg = ({
           </Text>
           <Tooltip label={`Token ID: ${token.id}`} maxW="240px">
             <Flex cursor="pointer">
-              <CustomIcon name="info-circle" boxSize="3" color="pebble.600" />
+              <CustomIcon name="info-circle" boxSize="3" color="gray.600" />
             </Flex>
           </Tooltip>
           <Copier
diff --git a/src/lib/components/button/AdminButton.tsx b/src/lib/components/button/AdminButton.tsx
index 4393fdeb1..3ec3800e9 100644
--- a/src/lib/components/button/AdminButton.tsx
+++ b/src/lib/components/button/AdminButton.tsx
@@ -34,7 +34,7 @@ export const AdminButton = ({ contractAddress, admin }: AdminButtonProps) => {
       </Tooltip>
       <MenuList>
         <MenuItem
-          icon={<CustomIcon name="migrate" color="pebble.600" />}
+          icon={<CustomIcon name="migrate" color="gray.600" />}
           onClick={() => {
             navigate({
               pathname: "/migrate",
@@ -45,7 +45,7 @@ export const AdminButton = ({ contractAddress, admin }: AdminButtonProps) => {
           Migrate
         </MenuItem>
         <MenuItem
-          icon={<CustomIcon name="admin" color="pebble.600" />}
+          icon={<CustomIcon name="admin" color="gray.600" />}
           onClick={() => {
             navigate({
               pathname: "/admin",
@@ -58,9 +58,7 @@ export const AdminButton = ({ contractAddress, admin }: AdminButtonProps) => {
         <ClearAdminModal
           contractAddress={contractAddress}
           triggerElement={
-            <MenuItem
-              icon={<CustomIcon name="admin-clear" color="pebble.600" />}
-            >
+            <MenuItem icon={<CustomIcon name="admin-clear" color="gray.600" />}>
               Clear Admin
             </MenuItem>
           }
diff --git a/src/lib/components/button/BackButton.tsx b/src/lib/components/button/BackButton.tsx
index dd94808f0..710d28d07 100644
--- a/src/lib/components/button/BackButton.tsx
+++ b/src/lib/components/button/BackButton.tsx
@@ -10,7 +10,7 @@ export const BackButton = (props: ButtonProps) => {
 
   return (
     <Button
-      variant="ghost-lilac"
+      variant="ghost-secondary"
       size="sm"
       mb="8px"
       p="unset"
diff --git a/src/lib/components/button/CustomIconButton.tsx b/src/lib/components/button/CustomIconButton.tsx
index d84899e37..6c1d9fc20 100644
--- a/src/lib/components/button/CustomIconButton.tsx
+++ b/src/lib/components/button/CustomIconButton.tsx
@@ -30,7 +30,7 @@ export const CustomIconButton = ({
       alignItems="center"
       onClick={onClick}
     >
-      <CustomIcon name={icon} boxSize="5" color="pebble.600" />
+      <CustomIcon name={icon} boxSize="5" color="gray.600" />
     </Link>
   </Button>
 );
diff --git a/src/lib/components/button/InstantiateButton.tsx b/src/lib/components/button/InstantiateButton.tsx
index cc6de6f10..2d3c32691 100644
--- a/src/lib/components/button/InstantiateButton.tsx
+++ b/src/lib/components/button/InstantiateButton.tsx
@@ -39,7 +39,7 @@ const getInstantiateButtonProps = (
       icon: (
         <CustomIcon
           name="instantiate"
-          color={isWalletConnected ? "violet.light" : "pebble.600"}
+          color={isWalletConnected ? "primary.light" : "gray.600"}
         />
       ),
     };
diff --git a/src/lib/components/button/NewProposalButton.tsx b/src/lib/components/button/NewProposalButton.tsx
index f232db763..ad5294155 100644
--- a/src/lib/components/button/NewProposalButton.tsx
+++ b/src/lib/components/button/NewProposalButton.tsx
@@ -21,7 +21,7 @@ export const NewProposalButton = () => {
       </MenuButton>
       <MenuList>
         <MenuItem
-          icon={<CustomIcon name="code" color="pebble.600" />}
+          icon={<CustomIcon name="code" color="gray.600" />}
           onClick={() => {
             navigate({
               pathname: "/proposals/store-code",
@@ -31,7 +31,7 @@ export const NewProposalButton = () => {
           To Store Code
         </MenuItem>
         {/* <MenuItem
-          icon={<CustomIcon name="contract-address" color="pebble.600"/>}
+          icon={<CustomIcon name="contract-address" color="gray.600"/>}
           onClick={() => {
             navigate({
               pathname: "/proposals/instantiate",
@@ -46,7 +46,7 @@ export const NewProposalButton = () => {
         >
           <MenuItem
             isDisabled={isTestnet}
-            icon={<CustomIcon name="admin" color="pebble.600" />}
+            icon={<CustomIcon name="admin" color="gray.600" />}
             onClick={() => {
               navigate({
                 pathname: "/proposals/whitelist",
diff --git a/src/lib/components/button/ShowMoreButton.tsx b/src/lib/components/button/ShowMoreButton.tsx
index 77d2cbfc5..ff5da9274 100644
--- a/src/lib/components/button/ShowMoreButton.tsx
+++ b/src/lib/components/button/ShowMoreButton.tsx
@@ -19,12 +19,12 @@ export const ShowMoreButton = ({
     rightIcon={
       <CustomIcon name={toggleShowMore ? "chevron-up" : "chevron-down"} />
     }
-    color="lilac.main"
+    color="secondary.main"
     variant="none"
     w="fit-content"
     onClick={setToggleShowMore}
   >
-    <Text variant="body3" color="lilac.main" fontWeight="700">
+    <Text variant="body3" color="secondary.main" fontWeight="700">
       {toggleShowMore ? showLessText : showMoreText}
     </Text>
   </Button>
diff --git a/src/lib/components/copy/Copier.tsx b/src/lib/components/copy/Copier.tsx
index 773e32d50..f36e7ce58 100644
--- a/src/lib/components/copy/Copier.tsx
+++ b/src/lib/components/copy/Copier.tsx
@@ -35,7 +35,7 @@ export const Copier = ({
         onClick={() => AmpTrackCopier(amptrackSection, type)}
         name="copy"
         boxSize="12px"
-        color="pebble.600"
+        color="gray.600"
       />
     }
   />
diff --git a/src/lib/components/copy/CopyButton.tsx b/src/lib/components/copy/CopyButton.tsx
index 9de15a466..acfa40de4 100644
--- a/src/lib/components/copy/CopyButton.tsx
+++ b/src/lib/components/copy/CopyButton.tsx
@@ -21,7 +21,7 @@ export const CopyButton = ({
   size = "sm",
   copyLabel,
   hasIcon = true,
-  variant = "outline-info",
+  variant = "outline-accent",
   buttonText = "Copy",
   amptrackSection,
   ...buttonProps
diff --git a/src/lib/components/dropzone/index.tsx b/src/lib/components/dropzone/index.tsx
index 793b1870f..e80189009 100644
--- a/src/lib/components/dropzone/index.tsx
+++ b/src/lib/components/dropzone/index.tsx
@@ -31,13 +31,13 @@ export function DropZone({ setFile, ...componentProps }: DropZoneProps) {
   return (
     <Flex
       border="1px dashed"
-      borderColor="pebble.700"
+      borderColor="gray.700"
       w="full"
       p="24px 16px"
       borderRadius="8px"
       align="center"
       direction="column"
-      _hover={{ bg: "pebble.900" }}
+      _hover={{ bg: "gray.900" }}
       transition="all .25s ease-in-out"
       cursor="pointer"
       {...getRootProps()}
@@ -48,9 +48,9 @@ export function DropZone({ setFile, ...componentProps }: DropZoneProps) {
       <Flex my="8px" gap="4px">
         <Text
           variant="body1"
-          color="lilac.main"
+          color="secondary.main"
           transition="all .25s ease-in-out"
-          _hover={{ color: "lilac.light" }}
+          _hover={{ color: "secondary.light" }}
           style={{ textDecoration: "underline" }}
         >
           Click to upload
diff --git a/src/lib/components/filter/FilterComponents.ts b/src/lib/components/filter/FilterComponents.ts
index 8c3cf5d7d..e50dec739 100644
--- a/src/lib/components/filter/FilterComponents.ts
+++ b/src/lib/components/filter/FilterComponents.ts
@@ -3,7 +3,7 @@ import { chakra, List } from "@chakra-ui/react";
 export const DropdownContainer = chakra(List, {
   baseStyle: {
     borderRadius: "8px",
-    bg: "pebble.900",
+    bg: "gray.900",
     px: 2,
     py: 1,
     mt: 0,
diff --git a/src/lib/components/filter/FilterDropdownItem.tsx b/src/lib/components/filter/FilterDropdownItem.tsx
index 977a61e17..40a239d64 100644
--- a/src/lib/components/filter/FilterDropdownItem.tsx
+++ b/src/lib/components/filter/FilterDropdownItem.tsx
@@ -23,13 +23,13 @@ export const FilterDropdownItem = ({
 }: FilterDropdownItemProps) => (
   <ListItem
     style={listItemProps}
-    _hover={{ bg: "pebble.800" }}
+    _hover={{ bg: "gray.800" }}
     transition="all .25s ease-in-out"
     onClick={onSelect}
   >
     <Flex alignItems="center" justifyContent="space-between">
       {filterDropdownComponent}
-      {isOptionSelected && <CustomIcon name="check" color="pebble.600" />}
+      {isOptionSelected && <CustomIcon name="check" color="gray.600" />}
     </Flex>
   </ListItem>
 );
diff --git a/src/lib/components/filter/FilterInput.tsx b/src/lib/components/filter/FilterInput.tsx
index dcbd6a29d..4bf510c32 100644
--- a/src/lib/components/filter/FilterInput.tsx
+++ b/src/lib/components/filter/FilterInput.tsx
@@ -36,7 +36,7 @@ export const FilterInput = ({
       background="none"
       borderRadius="8px"
       border="1px solid"
-      borderColor="pebble.700"
+      borderColor="gray.700"
       overflowX="scroll"
       alignItems="center"
     >
@@ -62,7 +62,7 @@ export const FilterInput = ({
         boxSize="40px"
         right="0px"
         minH="full"
-        color="pebble.600"
+        color="gray.600"
         backgroundColor="background.main"
         onClick={() => setIsDropdown(!isDropdown)}
       />
diff --git a/src/lib/components/forms/SelectInput.tsx b/src/lib/components/forms/SelectInput.tsx
index c6c9fd184..66b3dcac2 100644
--- a/src/lib/components/forms/SelectInput.tsx
+++ b/src/lib/components/forms/SelectInput.tsx
@@ -49,7 +49,7 @@ const SelectItem = ({ children, onSelect, disabled }: SelectItemProps) => (
     cursor="pointer"
     gap={2}
     aria-disabled={disabled}
-    _hover={{ bg: "pebble.800" }}
+    _hover={{ bg: "gray.800" }}
     transition="all .25s ease-in-out"
     _disabled={{ opacity: 0.4, pointerEvents: "none" }}
   >
@@ -97,7 +97,7 @@ export const SelectInput = <T extends string>({
             "&[aria-expanded=true]": {
               "> input": {
                 border: "2px solid",
-                borderColor: "lilac.main",
+                borderColor: "secondary.main",
               },
             },
             "& .form-label": {
@@ -116,7 +116,7 @@ export const SelectInput = <T extends string>({
           <div className="form-label">{formLabel}</div>
           {selectedOption?.icon && (
             <InputLeftElement pointerEvents="none" h="full" ml="1">
-              <CustomIcon name={selectedOption.icon} color="pebble.600" />
+              <CustomIcon name={selectedOption.icon} color="gray.600" />
             </InputLeftElement>
           )}
           <Input
@@ -130,14 +130,14 @@ export const SelectInput = <T extends string>({
             pl={selectedOption?.icon ? 9 : 4}
           />
           <InputRightElement pointerEvents="none" h="full">
-            <CustomIcon name="chevron-down" color="pebble.600" />
+            <CustomIcon name="chevron-down" color="gray.600" />
           </InputRightElement>
         </InputGroup>
       </PopoverTrigger>
       <PopoverContent
         ref={optionRef}
         border="unset"
-        bg="pebble.900"
+        bg="gray.900"
         w={inputRef.current?.clientWidth}
         maxH={`${ITEM_HEIGHT * 4}px`}
         overflow="scroll"
@@ -148,7 +148,7 @@ export const SelectInput = <T extends string>({
         sx={{
           "> div:not(:last-of-type)": {
             borderBottom: hasDivider && "1px solid",
-            borderBottomColor: hasDivider && "pebble.700",
+            borderBottomColor: hasDivider && "gray.700",
           },
         }}
       >
@@ -162,7 +162,7 @@ export const SelectInput = <T extends string>({
             }}
             disabled={disabled}
           >
-            {icon && <CustomIcon name={icon} color="pebble.600" />}
+            {icon && <CustomIcon name={icon} color="gray.600" />}
             {label}
           </SelectItem>
         ))}
@@ -172,7 +172,7 @@ export const SelectInput = <T extends string>({
             h={`${ITEM_HEIGHT}px`}
             align="center"
             borderTop={!hasDivider ? "1px solid" : "none"}
-            borderTopColor="pebble.700"
+            borderTopColor="gray.700"
           >
             {helperTextComponent}
           </Flex>
diff --git a/src/lib/components/icon/UploadIcon.tsx b/src/lib/components/icon/UploadIcon.tsx
index d67584ab3..c959a8c96 100644
--- a/src/lib/components/icon/UploadIcon.tsx
+++ b/src/lib/components/icon/UploadIcon.tsx
@@ -9,10 +9,10 @@ interface UploadIconProps {
 const getVariantStyle = (variant: UploadIconProps["variant"]) => {
   switch (variant) {
     case "muted":
-      return { bgColor: "pebble.700", color: "text.dark" };
+      return { bgColor: "gray.700", color: "text.dark" };
     case "primary":
     default:
-      return { bgColor: "lilac.background", color: "lilac.main" };
+      return { bgColor: "secondary.background", color: "secondary.main" };
   }
 };
 
diff --git a/src/lib/components/json/JsonInput.tsx b/src/lib/components/json/JsonInput.tsx
index 3e9329ba4..4d7a11ae3 100644
--- a/src/lib/components/json/JsonInput.tsx
+++ b/src/lib/components/json/JsonInput.tsx
@@ -109,12 +109,12 @@ const JsonInput = ({
       <Box
         p="16px 12px"
         borderWidth="thin"
-        borderColor="pebble.700"
+        borderColor="gray.700"
         borderRadius="8px"
         position="relative"
         transition="all .25s ease-in-out"
         _hover={{
-          borderColor: "pebble.600",
+          borderColor: "gray.600",
         }}
       >
         <JsonEditor
@@ -140,7 +140,7 @@ const JsonInput = ({
           top="10px"
           right="10px"
           p="4px 10px"
-          variant="outline-info"
+          variant="outline-accent"
           fontSize="12px"
           background="background.main"
           float="right"
diff --git a/src/lib/components/json/JsonReadOnly.tsx b/src/lib/components/json/JsonReadOnly.tsx
index 85df6c504..3fd0be96b 100644
--- a/src/lib/components/json/JsonReadOnly.tsx
+++ b/src/lib/components/json/JsonReadOnly.tsx
@@ -55,11 +55,11 @@ const JsonReadOnly = ({
     <Box
       position="relative"
       borderWidth="thin"
-      borderColor={!isJsonValid ? "error.main" : "pebble.700"}
+      borderColor={!isJsonValid ? "error.main" : "gray.700"}
       borderRadius="8px"
       transition="all .25s ease-in-out"
       _hover={{
-        borderColor: isJsonValid && "pebble.600",
+        borderColor: isJsonValid && "gray.600",
         "& .copy-button-box": { display: "block" },
       }}
       w={fullWidth ? "full" : undefined}
diff --git a/src/lib/components/json/ViewFullMsgButton.tsx b/src/lib/components/json/ViewFullMsgButton.tsx
index a4a0dce1f..1f00e0314 100644
--- a/src/lib/components/json/ViewFullMsgButton.tsx
+++ b/src/lib/components/json/ViewFullMsgButton.tsx
@@ -17,11 +17,11 @@ export const ViewFullMsgButton = ({
     w="full"
     p={3}
     borderTop="1px solid"
-    borderTopColor="pebble.700"
+    borderTopColor="gray.700"
     bg="background.main"
     borderRadius="0 0 8px 8px"
     cursor="pointer"
-    _hover={{ bg: "pebble.900" }}
+    _hover={{ bg: "gray.900" }}
     transition="all .25s ease-in-out"
     onClick={onClick}
     zIndex="docked"
diff --git a/src/lib/components/links/GitHubLink.tsx b/src/lib/components/links/GitHubLink.tsx
index 08f720e13..26472ad7c 100644
--- a/src/lib/components/links/GitHubLink.tsx
+++ b/src/lib/components/links/GitHubLink.tsx
@@ -21,14 +21,14 @@ export const GitHubLink = ({ github }: GitHubLinkProps) => {
         rel="noreferrer noopener"
         style={{ display: "flex" }}
       >
-        <Text color="lilac.main" variant="body2" wordBreak="break-all">
+        <Text color="secondary.main" variant="body2" wordBreak="break-all">
           {org}/{repo}
         </Text>
         <CustomIcon
           name="launch"
           boxSize="12px"
           marginLeft="8px"
-          color="pebble.600"
+          color="gray.600"
         />
       </a>
     </Flex>
diff --git a/src/lib/components/modal/ActionModal.tsx b/src/lib/components/modal/ActionModal.tsx
index 3313d79d5..891454e74 100644
--- a/src/lib/components/modal/ActionModal.tsx
+++ b/src/lib/components/modal/ActionModal.tsx
@@ -41,7 +41,7 @@ export interface ActionModalProps {
 }
 export function ActionModal({
   icon = "edit-solid",
-  iconColor = "pebble.600",
+  iconColor = "gray.600",
   title,
   subtitle,
   trigger,
@@ -89,7 +89,7 @@ export function ActionModal({
         <ModalContent>
           <ModalHeader
             borderBottomWidth={noHeaderBorder ? 0 : 1}
-            borderColor="pebble.700"
+            borderColor="gray.700"
           >
             <Box w="full">
               <Flex alignItems="center" gap="3">
@@ -106,7 +106,7 @@ export function ActionModal({
               <Box>{headerContent}</Box>
             </Box>
           </ModalHeader>
-          {!noCloseButton && <ModalCloseButton color="pebble.600" />}
+          {!noCloseButton && <ModalCloseButton color="gray.600" />}
           <ModalBody>{children}</ModalBody>
           <ModalFooter>
             <Flex w="full" justifyContent="center" gap="2">
diff --git a/src/lib/components/modal/CodeSnippet.tsx b/src/lib/components/modal/CodeSnippet.tsx
index bf2d7f2d9..096507231 100644
--- a/src/lib/components/modal/CodeSnippet.tsx
+++ b/src/lib/components/modal/CodeSnippet.tsx
@@ -191,7 +191,7 @@ execute();
     <>
       <Button
         isDisabled={isDisabled}
-        variant="outline-info"
+        variant="outline-accent"
         size="sm"
         ml="auto"
         gap="1"
@@ -213,10 +213,10 @@ execute();
               Code Snippet
             </Heading>
           </ModalHeader>
-          <ModalCloseButton color="pebble.600" />
+          <ModalCloseButton color="gray.600" />
           <ModalBody px={4} maxH="640px" overflow="scroll">
             <Tabs>
-              <TabList borderBottom="1px solid" borderColor="pebble.700">
+              <TabList borderBottom="1px solid" borderColor="gray.700">
                 {codeSnippets[type].map((item) => (
                   <CustomTab key={`menu-${item.name}`}>{item.name}</CustomTab>
                 ))}
diff --git a/src/lib/components/modal/NoMobile.tsx b/src/lib/components/modal/NoMobile.tsx
index 12ba01427..c491a2910 100644
--- a/src/lib/components/modal/NoMobile.tsx
+++ b/src/lib/components/modal/NoMobile.tsx
@@ -22,7 +22,7 @@ export const NoMobile = () => (
       >
         <CustomIcon
           name="info-circle-solid"
-          color="violet.light"
+          color="primary.light"
           boxSize="10"
         />
         <Heading as="h5" variant="h5" py="4">
diff --git a/src/lib/components/modal/RedoModal.tsx b/src/lib/components/modal/RedoModal.tsx
index ee35d5ba9..14aa46565 100644
--- a/src/lib/components/modal/RedoModal.tsx
+++ b/src/lib/components/modal/RedoModal.tsx
@@ -44,13 +44,13 @@ export const RedoModal = ({ message }: RedoModalProps) => {
         <ModalContent w="640px">
           <ModalHeader>
             <Flex w="full" direction="row" alignItems="center" gap={2} pt={1}>
-              <CustomIcon name="redo" boxSize="5" color="pebble.600" />
+              <CustomIcon name="redo" boxSize="5" color="gray.600" />
               <Heading variant="h5" as="h5">
                 Redo Instantiate
               </Heading>
             </Flex>
           </ModalHeader>
-          <ModalCloseButton color="pebble.600" />
+          <ModalCloseButton color="gray.600" />
           <ModalBody maxH="400px" overflow="overlay">
             <Flex direction="column" gap={5}>
               <Flex direction="row" gap={4}>
@@ -77,7 +77,11 @@ export const RedoModal = ({ message }: RedoModalProps) => {
               justifyContent="end"
               gap="4"
             >
-              <Button cursor="pointer" variant="ghost-lilac" onClick={onClose}>
+              <Button
+                cursor="pointer"
+                variant="ghost-secondary"
+                onClick={onClose}
+              >
                 Cancel
               </Button>
               <Button
diff --git a/src/lib/components/modal/UnsupportedTokensModal.tsx b/src/lib/components/modal/UnsupportedTokensModal.tsx
index 95da42bbd..01f1b8d97 100644
--- a/src/lib/components/modal/UnsupportedTokensModal.tsx
+++ b/src/lib/components/modal/UnsupportedTokensModal.tsx
@@ -66,7 +66,7 @@ const UnsupportedToken = ({ balance }: UnsupportedTokenProps) => {
     <Flex
       className="copier-wrapper"
       borderRadius="8px"
-      bg="pebble.800"
+      bg="gray.800"
       direction="column"
       px={4}
       py={3}
@@ -89,7 +89,7 @@ const UnsupportedToken = ({ balance }: UnsupportedTokenProps) => {
           </Text>
           <Tooltip label={`Token ID: ${balance.id}`} maxW="500px">
             <Flex cursor="pointer" className="info" display="none">
-              <CustomIcon name="info-circle" boxSize="3" color="pebble.600" />
+              <CustomIcon name="info-circle" boxSize="3" color="gray.600" />
             </Flex>
           </Tooltip>
           <Copier
@@ -171,14 +171,14 @@ export const UnsupportedTokensModal = ({
         <ModalContent w="800px">
           <ModalHeader>
             <Flex w="full" direction="row" alignItems="center" gap={2} pt={1}>
-              <CustomIcon name={content.icon} boxSize="5" color="pebble.600" />
+              <CustomIcon name={content.icon} boxSize="5" color="gray.600" />
               <Heading variant="h5" as="h5">
                 Unsupported Assets
               </Heading>
             </Flex>
           </ModalHeader>
 
-          <ModalCloseButton color="pebble.600" />
+          <ModalCloseButton color="gray.600" />
           <ModalBody maxH="400px" overflow="overlay" pb={6}>
             <Flex direction="column" gap={5}>
               {address && (
diff --git a/src/lib/components/modal/code/CodeDetailsTemplate.tsx b/src/lib/components/modal/code/CodeDetailsTemplate.tsx
index 7d9551daa..a5be588a1 100644
--- a/src/lib/components/modal/code/CodeDetailsTemplate.tsx
+++ b/src/lib/components/modal/code/CodeDetailsTemplate.tsx
@@ -119,7 +119,7 @@ export const CodeDetailsTemplateModal = ({
         size="lg"
         helperText="Fill in code name to define its use as a reminder"
         label="Code Name"
-        labelBgColor="pebble.900"
+        labelBgColor="gray.900"
         maxLength={MAX_CODE_NAME_LENGTH}
       />
     </ActionModal>
diff --git a/src/lib/components/modal/code/SaveNewCode.tsx b/src/lib/components/modal/code/SaveNewCode.tsx
index ac7e006bd..757a5de66 100644
--- a/src/lib/components/modal/code/SaveNewCode.tsx
+++ b/src/lib/components/modal/code/SaveNewCode.tsx
@@ -188,7 +188,7 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
           value={codeId}
           onInputChange={setCodeId}
           label="Code ID"
-          labelBgColor="pebble.900"
+          labelBgColor="gray.900"
           status={codeIdStatus}
           placeholder="ex. 1234"
         />
@@ -196,7 +196,7 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
           variant="floating"
           value={uploader}
           label="Uploader"
-          labelBgColor="pebble.900"
+          labelBgColor="gray.900"
           placeholder="Uploader address will display here"
           setInputState={() => {}}
           status={uploaderStatus}
@@ -207,7 +207,7 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
           value={name}
           setInputState={setName}
           label="Code Name"
-          labelBgColor="pebble.900"
+          labelBgColor="gray.900"
           placeholder="Untitled Name"
           helperText="Fill in code name to define its use as a reminder"
           status={nameStatus}
diff --git a/src/lib/components/modal/contract/AddToOtherList.tsx b/src/lib/components/modal/contract/AddToOtherList.tsx
index c6f74ef32..c57535749 100644
--- a/src/lib/components/modal/contract/AddToOtherList.tsx
+++ b/src/lib/components/modal/contract/AddToOtherList.tsx
@@ -72,7 +72,7 @@ export const AddToOtherListModal = observer(
             helperText="Grouping your contracts by adding to your existing list or create
               a new list"
             setResult={setContractLists}
-            labelBgColor="pebble.900"
+            labelBgColor="gray.900"
           />
         </Box>
       </ActionModal>
diff --git a/src/lib/components/modal/contract/ClearAdmin.tsx b/src/lib/components/modal/contract/ClearAdmin.tsx
index 04e10d228..79fe1e5b0 100644
--- a/src/lib/components/modal/contract/ClearAdmin.tsx
+++ b/src/lib/components/modal/contract/ClearAdmin.tsx
@@ -35,7 +35,7 @@ export const ClearAdminModal = ({
       mainAction={proceed}
       mainVariant="error"
       otherBtnTitle="No, keep it"
-      otherVariant="ghost-lilac"
+      otherVariant="ghost-secondary"
     >
       <Text>
         Clearing the admin is a permanent action. You&apos;ll not be able to
diff --git a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx b/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
index c9ddb81ab..c55f272e8 100644
--- a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
+++ b/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
@@ -116,7 +116,7 @@ export const ContractDetailsTemplateModal = ({
         setTagsValue={setTagsValue}
         setContractListsValue={setContractListsValue}
         errors={errors}
-        labelBgColor="pebble.900"
+        labelBgColor="gray.900"
       />
     </ActionModal>
   );
diff --git a/src/lib/components/modal/contract/SaveNewContract.tsx b/src/lib/components/modal/contract/SaveNewContract.tsx
index 84a14411c..5df833fcc 100644
--- a/src/lib/components/modal/contract/SaveNewContract.tsx
+++ b/src/lib/components/modal/contract/SaveNewContract.tsx
@@ -207,7 +207,7 @@ export function SaveNewContractModal({
           variant="floating"
           placeholder={`ex. ${exampleContractAddress}`}
           status={status}
-          labelBgColor="pebble.900"
+          labelBgColor="gray.900"
         />
         <ControllerInput
           name="instantiator"
@@ -215,7 +215,7 @@ export function SaveNewContractModal({
           label="Instantiated by"
           variant="floating"
           isDisabled
-          labelBgColor="pebble.900"
+          labelBgColor="gray.900"
         />
 
         <OffChainForm<SaveNewContractDetail>
@@ -225,7 +225,7 @@ export function SaveNewContractModal({
           setTagsValue={setTagsValue}
           setContractListsValue={setContractListsValue}
           errors={errors}
-          labelBgColor="pebble.900"
+          labelBgColor="gray.900"
         />
       </VStack>
     </ActionModal>
diff --git a/src/lib/components/modal/list/CreateNewList.tsx b/src/lib/components/modal/list/CreateNewList.tsx
index 6d9f1c8e3..bcd0fb548 100644
--- a/src/lib/components/modal/list/CreateNewList.tsx
+++ b/src/lib/components/modal/list/CreateNewList.tsx
@@ -102,7 +102,7 @@ export function CreateNewListModal({
           variant="floating"
           value={listName}
           setInputState={setListName}
-          labelBgColor="pebble.900"
+          labelBgColor="gray.900"
           status={status}
           label="List Name"
         />
diff --git a/src/lib/components/modal/list/EditListName.tsx b/src/lib/components/modal/list/EditListName.tsx
index a46cdbada..6da72c8d4 100644
--- a/src/lib/components/modal/list/EditListName.tsx
+++ b/src/lib/components/modal/list/EditListName.tsx
@@ -87,7 +87,7 @@ export function EditListNameModal({
         variant="floating"
         value={listName}
         setInputState={setListName}
-        labelBgColor="pebble.900"
+        labelBgColor="gray.900"
         status={status}
         label="List Name"
       />
diff --git a/src/lib/components/pagination/index.tsx b/src/lib/components/pagination/index.tsx
index 29655e6d1..86c922cc5 100644
--- a/src/lib/components/pagination/index.tsx
+++ b/src/lib/components/pagination/index.tsx
@@ -77,7 +77,7 @@ export const Pagination = ({
           <option value="20">20</option>
           <option value="50">50</option>
           <option value="100">100</option>
-          <CustomIcon name="chevron-down" color="pebble.600" />
+          <CustomIcon name="chevron-down" color="gray.600" />
         </Select>
         <Text variant="body3" mx="30px">
           {`${offsetData.toLocaleString()} - ${lastDataInPage.toLocaleString()} of ${totalData.toLocaleString()}`}
diff --git a/src/lib/components/select-code/CodeSelect.tsx b/src/lib/components/select-code/CodeSelect.tsx
index ee0c42c17..82f80ce42 100644
--- a/src/lib/components/select-code/CodeSelect.tsx
+++ b/src/lib/components/select-code/CodeSelect.tsx
@@ -32,10 +32,10 @@ export const CodeSelect = ({
         p="16px"
         gap="16px"
         w="100%"
-        bgColor="pebble.900"
+        bgColor="gray.900"
         borderRadius="8px"
         borderWidth="1px"
-        borderColor={isError ? "error.main" : "pebble.700"}
+        borderColor={isError ? "error.main" : "gray.700"}
       >
         <UploadIcon variant={codeId ? "primary" : "muted"} />
         {codeId ? (
diff --git a/src/lib/components/select-code/CodeSelectDrawerButton.tsx b/src/lib/components/select-code/CodeSelectDrawerButton.tsx
index 541056bf1..9a0c5ccbb 100644
--- a/src/lib/components/select-code/CodeSelectDrawerButton.tsx
+++ b/src/lib/components/select-code/CodeSelectDrawerButton.tsx
@@ -88,8 +88,8 @@ export const CodeSelectDrawerButton = ({
       <Drawer isOpen={isOpen} onClose={onClose} placement="bottom">
         <DrawerOverlay />
         <DrawerContent h="80%">
-          <DrawerHeader borderBottom="1px solid" borderColor="pebble.700">
-            <CustomIcon name="code" boxSize="6" color="pebble.600" />
+          <DrawerHeader borderBottom="1px solid" borderColor="gray.700">
+            <CustomIcon name="code" boxSize="6" color="gray.600" />
             <Heading as="h5" variant="h5">
               Select Code ID
             </Heading>
@@ -115,7 +115,7 @@ export const CodeSelectDrawerButton = ({
               />
             </Flex>
             <Tabs px={6}>
-              <TabList borderBottom="1px" borderColor="pebble.800">
+              <TabList borderBottom="1px" borderColor="gray.800">
                 <CustomTab count={storedCodesCount}>My Stored Codes</CustomTab>
                 <CustomTab count={savedCodesCount}>My Saved Codes </CustomTab>
               </TabList>
diff --git a/src/lib/components/select-contract/ContractListCard.tsx b/src/lib/components/select-contract/ContractListCard.tsx
index fb5eb163a..44111e446 100644
--- a/src/lib/components/select-contract/ContractListCard.tsx
+++ b/src/lib/components/select-contract/ContractListCard.tsx
@@ -42,7 +42,7 @@ export const ContractListCard = ({
       <CustomIcon
         name={getListIcon(item.name)}
         boxSize="24px"
-        color="pebble.600"
+        color="gray.600"
       />
       <Flex flexDirection="column" alignItems="start" gap={1}>
         <Flex alignItems="center" gap={2}>
@@ -73,13 +73,13 @@ export const ContractListCard = ({
             as={Button}
             onClick={(e) => e.stopPropagation()}
           >
-            <CustomIcon name="more" color="pebble.600" />
+            <CustomIcon name="more" color="gray.600" />
           </MenuButton>
           <MenuList>
             <EditListNameModal
               list={{ label: item.name, value: item.slug }}
               menuItemProps={{
-                icon: <CustomIcon name="edit" color="pebble.600" />,
+                icon: <CustomIcon name="edit" color="gray.600" />,
                 children: "Edit list name",
               }}
             />
diff --git a/src/lib/components/select-contract/SelectContractAdmin.tsx b/src/lib/components/select-contract/SelectContractAdmin.tsx
index a9b3f3ac4..24ae5320c 100644
--- a/src/lib/components/select-contract/SelectContractAdmin.tsx
+++ b/src/lib/components/select-contract/SelectContractAdmin.tsx
@@ -81,7 +81,7 @@ export const SelectContractAdmin = ({
             <CustomIcon
               name="contract-address-solid"
               boxSize="5"
-              color="pebble.600"
+              color="gray.600"
             />
             <Heading as="h5" variant="h5">
               Select contract which you have permission
diff --git a/src/lib/components/select-contract/SelectContractInstantiator.tsx b/src/lib/components/select-contract/SelectContractInstantiator.tsx
index 3b1160b73..4993b5e7b 100644
--- a/src/lib/components/select-contract/SelectContractInstantiator.tsx
+++ b/src/lib/components/select-contract/SelectContractInstantiator.tsx
@@ -124,7 +124,7 @@ export const SelectContractInstantiator = ({
                 <CustomIcon
                   name="contract-address-solid"
                   boxSize="5"
-                  color="pebble.600"
+                  color="gray.600"
                 />
                 <Heading as="h5" variant="h5">
                   Select Contract
@@ -169,9 +169,9 @@ export const SelectContractInstantiator = ({
                 </Text>
 
                 <Flex my="24px" gap="8px" alignItems="center">
-                  <Divider borderColor="pebble.700" />
+                  <Divider borderColor="gray.700" />
                   <Text variant="body1">OR</Text>
-                  <Divider borderColor="pebble.700" />
+                  <Divider borderColor="gray.700" />
                 </Flex>
 
                 <Heading as="h6" variant="h6" mb={4}>
@@ -181,7 +181,7 @@ export const SelectContractInstantiator = ({
                   contractLists={contractLists}
                   handleListSelect={handleListSelect}
                   isReadOnly
-                  formLabelBgColor="pebble.900"
+                  formLabelBgColor="gray.900"
                 />
               </DrawerBody>
             </>
@@ -193,7 +193,7 @@ export const SelectContractInstantiator = ({
                   boxSize="5"
                   onClick={() => setListSlug("")}
                   cursor="pointer"
-                  color="pebble.600"
+                  color="gray.600"
                 />
                 <Heading as="h5" variant="h5">
                   {contractList.name}
diff --git a/src/lib/components/state/EmptyState.tsx b/src/lib/components/state/EmptyState.tsx
index 1db577db9..349d9eb54 100644
--- a/src/lib/components/state/EmptyState.tsx
+++ b/src/lib/components/state/EmptyState.tsx
@@ -22,7 +22,7 @@ export const EmptyState = ({
     my={12}
     direction="column"
     borderY={withBorder ? "1px solid" : undefined}
-    borderColor="pebble.700"
+    borderColor="gray.700"
   >
     <Flex alignItems="center" flexDir="column" gap="4" width="full">
       {imageVariant && <StateImage imageVariant={imageVariant} />}
diff --git a/src/lib/components/state/InvalidState.tsx b/src/lib/components/state/InvalidState.tsx
index 96316729e..529331dbe 100644
--- a/src/lib/components/state/InvalidState.tsx
+++ b/src/lib/components/state/InvalidState.tsx
@@ -21,7 +21,7 @@ export const InvalidState = ({ title }: InvalidStateProps) => {
       direction="column"
       alignItems="center"
       borderY="1px solid"
-      borderColor="pebble.700"
+      borderColor="gray.700"
       width="full"
       my="24px"
       py="24px"
diff --git a/src/lib/components/state/ZeroState.tsx b/src/lib/components/state/ZeroState.tsx
index 403f42824..e99bc0e53 100644
--- a/src/lib/components/state/ZeroState.tsx
+++ b/src/lib/components/state/ZeroState.tsx
@@ -36,7 +36,7 @@ const ActionSection = ({ list, handleAction }: ActionSectionProps) =>
           list={list}
           buttonProps={{
             variant: "outline-primary",
-            leftIcon: <CustomIcon name="bookmark" color="pebble.600" />,
+            leftIcon: <CustomIcon name="bookmark" color="gray.600" />,
             children: "Save Contract",
             ml: 2,
           }}
@@ -67,7 +67,7 @@ export const ZeroState = ({ list, isReadOnly }: ZeroStateProps) => {
   return (
     <Flex
       borderY="1px solid"
-      borderColor="pebble.700"
+      borderColor="gray.700"
       width="full"
       py="48px"
       direction="column"
diff --git a/src/lib/components/stepper/StepperItem.tsx b/src/lib/components/stepper/StepperItem.tsx
index ca6595324..5d1f4fb26 100644
--- a/src/lib/components/stepper/StepperItem.tsx
+++ b/src/lib/components/stepper/StepperItem.tsx
@@ -21,7 +21,7 @@ const StepLabel = ({
   <Flex
     justify="center"
     align="center"
-    backgroundColor={disabled ? "text.disabled" : "violet.main"}
+    backgroundColor={disabled ? "text.disabled" : "primary.main"}
     width="24px"
     height="24px"
     borderRadius="50%"
@@ -54,7 +54,7 @@ export const StepperItem = ({
           content: '""',
           flex: 1,
           height: "1px",
-          backgroundColor: "pebble.600",
+          backgroundColor: "gray.600",
           marginInlineEnd: "8px",
         },
       }}
diff --git a/src/lib/components/table/AccordionTx.tsx b/src/lib/components/table/AccordionTx.tsx
index 034cae0da..8c88aa6e0 100644
--- a/src/lib/components/table/AccordionTx.tsx
+++ b/src/lib/components/table/AccordionTx.tsx
@@ -48,7 +48,7 @@ export const AccordionTx = ({
       borderBottom="none"
       pl={accordionSpacing}
       gap={3}
-      _hover={{ background: "pebble.800" }}
+      _hover={{ background: "gray.800" }}
       transition="all .25s ease-in-out"
       css={{
         "&:not(:first-of-type) div#before-stepper": {
diff --git a/src/lib/components/table/EditableCell.tsx b/src/lib/components/table/EditableCell.tsx
index 4741c02c5..a30fb48ee 100644
--- a/src/lib/components/table/EditableCell.tsx
+++ b/src/lib/components/table/EditableCell.tsx
@@ -116,7 +116,7 @@ export const EditableCell = ({
             zIndex="sticky"
             top="-32px"
             left="-16px"
-            bg="pebble.800"
+            bg="gray.800"
             p={3}
             borderRadius="8px"
             onClick={(e) => e.stopPropagation()}
@@ -177,7 +177,7 @@ export const EditableCell = ({
                 top="-16px"
                 left="-16px"
                 borderRadius="8px"
-                bg={isReadOnly ? "pebble.700" : "pebble.800"}
+                bg={isReadOnly ? "gray.700" : "gray.800"}
                 whiteSpace="nowrap"
                 p={4}
                 position="absolute"
@@ -204,7 +204,7 @@ export const EditableCell = ({
                 opacity={isHover ? 1 : 0}
                 onClick={handleEdit}
               >
-                <CustomIcon name="edit" color="pebble.600" boxSize="3" />
+                <CustomIcon name="edit" color="gray.600" boxSize="3" />
               </Flex>
             )}
           </Flex>
diff --git a/src/lib/components/table/TableTitle.tsx b/src/lib/components/table/TableTitle.tsx
index 1201c29dc..13f71a786 100644
--- a/src/lib/components/table/TableTitle.tsx
+++ b/src/lib/components/table/TableTitle.tsx
@@ -21,7 +21,7 @@ export const TableTitle = ({
       </Heading>
       <Badge
         textColor={
-          count && typeof count !== "string" ? "text.main" : "pebble.500"
+          count && typeof count !== "string" ? "text.main" : "gray.500"
         }
       >
         {count}
diff --git a/src/lib/components/table/codes/CodesTableRow.tsx b/src/lib/components/table/codes/CodesTableRow.tsx
index 8c008696a..cc2a143d5 100644
--- a/src/lib/components/table/codes/CodesTableRow.tsx
+++ b/src/lib/components/table/codes/CodesTableRow.tsx
@@ -28,7 +28,7 @@ export const CodesTableRow = ({
     <Grid
       templateColumns={templateColumns}
       onClick={() => onRowSelect(codeInfo.id)}
-      _hover={{ bg: "pebble.900" }}
+      _hover={{ bg: "gray.900" }}
       transition="all .25s ease-in-out"
       cursor="pointer"
       minW="min-content"
diff --git a/src/lib/components/table/codes/CodesTableWithWallet.tsx b/src/lib/components/table/codes/CodesTableWithWallet.tsx
index 75d394e14..b05097bd3 100644
--- a/src/lib/components/table/codes/CodesTableWithWallet.tsx
+++ b/src/lib/components/table/codes/CodesTableWithWallet.tsx
@@ -29,7 +29,7 @@ export const CodesTableWithWallet = ({
       direction="column"
       py="48px"
       borderY="1px solid"
-      borderColor="pebble.700"
+      borderColor="gray.700"
     >
       <DisconnectedState text={disconnectedMessage} />
     </Flex>
diff --git a/src/lib/components/table/contracts/ContractsTableRow.tsx b/src/lib/components/table/contracts/ContractsTableRow.tsx
index 3a0c913ed..4c41d2158 100644
--- a/src/lib/components/table/contracts/ContractsTableRow.tsx
+++ b/src/lib/components/table/contracts/ContractsTableRow.tsx
@@ -96,7 +96,7 @@ export const ContractsTableRow = ({
   <Grid
     templateColumns={templateColumns}
     onClick={() => onRowSelect(contractInfo.contractAddress)}
-    _hover={{ bg: "pebble.900" }}
+    _hover={{ bg: "gray.900" }}
     transition="all .25s ease-in-out"
     cursor="pointer"
     minW="min-content"
diff --git a/src/lib/components/table/contracts/ContractsTableRowCTA.tsx b/src/lib/components/table/contracts/ContractsTableRowCTA.tsx
index e0aa0f51b..927f5b25c 100644
--- a/src/lib/components/table/contracts/ContractsTableRowCTA.tsx
+++ b/src/lib/components/table/contracts/ContractsTableRowCTA.tsx
@@ -87,7 +87,7 @@ export const ContractsTableRowCTA = ({
             as={Button}
             onClick={(e) => e.stopPropagation()}
           >
-            <CustomIcon name="more" boxSize="16px" color="pebble.600" />
+            <CustomIcon name="more" boxSize="16px" color="gray.600" />
           </MenuButton>
           <MenuList onClick={(e) => e.stopPropagation()}>
             <EditContractDetailsModal
@@ -95,7 +95,7 @@ export const ContractsTableRowCTA = ({
               triggerElement={
                 <MenuItem
                   icon={
-                    <CustomIcon name="edit" boxSize="16px" color="pebble.600" />
+                    <CustomIcon name="edit" boxSize="16px" color="gray.600" />
                   }
                 >
                   Edit details
@@ -110,7 +110,7 @@ export const ContractsTableRowCTA = ({
                     <CustomIcon
                       name="bookmark"
                       boxSize="16px"
-                      color="pebble.600"
+                      color="gray.600"
                     />
                   }
                 >
@@ -119,9 +119,7 @@ export const ContractsTableRowCTA = ({
               }
             />
             <MenuItem
-              icon={
-                <CustomIcon name="admin" boxSize="16px" color="pebble.600" />
-              }
+              icon={<CustomIcon name="admin" boxSize="16px" color="gray.600" />}
               onClick={() => {
                 navigate({
                   pathname: "/admin",
@@ -140,7 +138,7 @@ export const ContractsTableRowCTA = ({
                     <CustomIcon
                       name="admin-clear"
                       boxSize="16px"
-                      color="pebble.600"
+                      color="gray.600"
                     />
                   }
                   isDisabled={!isAdmin}
diff --git a/src/lib/components/table/contracts/EditTags.tsx b/src/lib/components/table/contracts/EditTags.tsx
index 4dff0a16f..44458db76 100644
--- a/src/lib/components/table/contracts/EditTags.tsx
+++ b/src/lib/components/table/contracts/EditTags.tsx
@@ -31,12 +31,7 @@ export function EditTags({ contractLocalInfo }: EditTagsProps) {
     <ActionModal
       title="Edit Tags"
       trigger={
-        <CustomIcon
-          cursor="pointer"
-          name="edit"
-          color="pebble.600"
-          boxSize="3"
-        />
+        <CustomIcon cursor="pointer" name="edit" color="gray.600" boxSize="3" />
       }
       headerContent={
         <Flex pt="6" gap="36px">
@@ -73,7 +68,7 @@ export function EditTags({ contractLocalInfo }: EditTagsProps) {
             setResult={(selectedOptions: string[]) => {
               setTagResult(selectedOptions);
             }}
-            labelBgColor="pebble.900"
+            labelBgColor="gray.900"
           />
         </Box>
       </FormControl>
diff --git a/src/lib/components/table/contracts/TagsCell.tsx b/src/lib/components/table/contracts/TagsCell.tsx
index d11897217..9d631f600 100644
--- a/src/lib/components/table/contracts/TagsCell.tsx
+++ b/src/lib/components/table/contracts/TagsCell.tsx
@@ -53,7 +53,7 @@ export const TagsCell = ({
 
       {isHover && (
         <Flex
-          bgColor={tags.length > 1 ? "pebble.800" : "inherit"}
+          bgColor={tags.length > 1 ? "gray.800" : "inherit"}
           py={4}
           borderRadius="8px"
           position="absolute"
diff --git a/src/lib/components/table/proposals/StatusChip.tsx b/src/lib/components/table/proposals/StatusChip.tsx
index 9ef3b048c..c9a9082d9 100644
--- a/src/lib/components/table/proposals/StatusChip.tsx
+++ b/src/lib/components/table/proposals/StatusChip.tsx
@@ -10,17 +10,17 @@ const getBgColor = (
 ): CSSProperties["backgroundColor"] => {
   switch (status) {
     case ProposalStatus.DEPOSIT_PERIOD:
-      return "lilac.darker";
+      return "secondary.darker";
     case ProposalStatus.FAILED:
     case ProposalStatus.REJECTED:
       return "error.dark";
     case ProposalStatus.PASSED:
       return "success.dark";
     case ProposalStatus.VOTING_PERIOD:
-      return "violet.dark";
+      return "primary.dark";
     case ProposalStatus.DEPOSIT_FAILED:
     default:
-      return "pebble.700";
+      return "gray.700";
   }
 };
 
diff --git a/src/lib/components/table/tableComponents.ts b/src/lib/components/table/tableComponents.ts
index 96db4acd6..0ad60a249 100644
--- a/src/lib/components/table/tableComponents.ts
+++ b/src/lib/components/table/tableComponents.ts
@@ -22,7 +22,7 @@ const tableHeaderBaseStyle = {
   py: 6,
   px: 4,
   borderBottom: "1px solid",
-  borderColor: "pebble.700",
+  borderColor: "gray.700",
 };
 
 export const TableHeader = chakra(GridItem, {
@@ -45,7 +45,7 @@ const tableRowBaseStyle = {
   display: "flex",
   alignItems: "center",
   borderBottom: "1px solid",
-  borderColor: "pebble.700",
+  borderColor: "gray.700",
 };
 
 export const TableRow = chakra(GridItem, {
diff --git a/src/lib/components/table/transactions/RelationChip.tsx b/src/lib/components/table/transactions/RelationChip.tsx
index f601402e5..4b28333fb 100644
--- a/src/lib/components/table/transactions/RelationChip.tsx
+++ b/src/lib/components/table/transactions/RelationChip.tsx
@@ -12,8 +12,8 @@ export const RelationChip = ({ isSigner }: RelationChipProps) => {
     ? "‘Signer’ or ‘The signing address’ is the account address that signs the transaction."
     : "‘Related' or ‘The related address’ is related to the transaction, even if not signing it; e.g., as a recipient address.";
   const tagBgColor: CSSProperties["backgroundColor"] = isSigner
-    ? "violet.dark"
-    : "pebble.700";
+    ? "primary.dark"
+    : "gray.700";
 
   return (
     <Tooltip label={message}>
diff --git a/src/lib/components/table/transactions/TransactionsTableRow.tsx b/src/lib/components/table/transactions/TransactionsTableRow.tsx
index 789b3ed6a..51034332c 100644
--- a/src/lib/components/table/transactions/TransactionsTableRow.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableRow.tsx
@@ -43,7 +43,7 @@ export const TransactionsTableRow = ({
         className="copier-wrapper"
         templateColumns={templateColumns}
         onClick={isAccordion ? onToggle : undefined}
-        _hover={{ background: "pebble.900" }}
+        _hover={{ background: "gray.900" }}
         transition="all .25s ease-in-out"
         cursor={isAccordion ? "pointer" : "default"}
       >
@@ -64,7 +64,7 @@ export const TransactionsTableRow = ({
               showCopyOnHover
             />
             {transaction.messages.length > 1 && (
-              <Badge variant="lilac" ml="6px">
+              <Badge variant="secondary" ml="6px">
                 {transaction.messages.length}
               </Badge>
             )}
@@ -81,7 +81,7 @@ export const TransactionsTableRow = ({
           <Flex gap={1} flexWrap="wrap">
             <RenderActionMessages transaction={transaction} />
             {transaction.isIbc && (
-              <Tag variant="honeydew-dark" size="sm">
+              <Tag variant="accent-dark" size="sm">
                 IBC
               </Tag>
             )}
diff --git a/src/lib/components/table/transactions/TransactionsTableWithWallet.tsx b/src/lib/components/table/transactions/TransactionsTableWithWallet.tsx
index 1decad832..5ffb776ba 100644
--- a/src/lib/components/table/transactions/TransactionsTableWithWallet.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableWithWallet.tsx
@@ -19,7 +19,7 @@ export const TransactionsTableWithWallet = ({
 }: TransactionsTableWithWalletProps) => {
   const { address } = useWallet();
   return !address ? (
-    <Flex direction="column" py="48px" borderColor="pebble.700">
+    <Flex direction="column" py="48px" borderColor="gray.700">
       <DisconnectedState
         text="to see your past transactions."
         helperText="Past transactions will display here."
diff --git a/src/lib/components/tx/TxReceiptRender.tsx b/src/lib/components/tx/TxReceiptRender.tsx
index c5c35091c..9514c0680 100644
--- a/src/lib/components/tx/TxReceiptRender.tsx
+++ b/src/lib/components/tx/TxReceiptRender.tsx
@@ -52,7 +52,7 @@ const ReceiptRow = ({ title, value, html }: TxReceipt) => (
       <Text
         variant="body2"
         wordBreak="break-word"
-        color={value === null ? "pebble.600" : "text.main"}
+        color={value === null ? "gray.600" : "text.main"}
       >
         {value === null ? String(value) : value}
       </Text>
diff --git a/src/lib/components/tx/modal/ButtonSection.tsx b/src/lib/components/tx/modal/ButtonSection.tsx
index 16a463e97..b54ab9f61 100644
--- a/src/lib/components/tx/modal/ButtonSection.tsx
+++ b/src/lib/components/tx/modal/ButtonSection.tsx
@@ -48,7 +48,7 @@ export const ButtonSection = ({
       return (
         <>
           <Button
-            variant="ghost-lilac"
+            variant="ghost-secondary"
             onClick={() => {
               navigate({ pathname: "/my-codes" });
               onClose?.();
@@ -93,7 +93,7 @@ export const ButtonSection = ({
     case "update-admin":
       return (
         <>
-          <Button variant="ghost-lilac" onClick={openTxExplorer}>
+          <Button variant="ghost-secondary" onClick={openTxExplorer}>
             See Transaction
           </Button>
           <Button
@@ -118,7 +118,7 @@ export const ButtonSection = ({
       return (
         <>
           <Button
-            variant="ghost-lilac"
+            variant="ghost-secondary"
             // TODO: Revisit this when proposal page is live
             onClick={openProposalExplorer}
           >
diff --git a/src/lib/components/tx/modal/index.tsx b/src/lib/components/tx/modal/index.tsx
index f1e019de7..f193f9b48 100644
--- a/src/lib/components/tx/modal/index.tsx
+++ b/src/lib/components/tx/modal/index.tsx
@@ -49,7 +49,7 @@ export const TxModal = ({ result, onClose }: TxModalProps) => {
           {result.receiptInfo.headerIcon}
           {result.receiptInfo.header}
         </ModalHeader>
-        {isUpdateAdminSucceed && <ModalCloseButton color="pebble.600" />}
+        {isUpdateAdminSucceed && <ModalCloseButton color="gray.600" />}
         {(result.receiptInfo.description || result.receipts.length > 0) && (
           <ModalBody>
             {result.receiptInfo.description && (
diff --git a/src/lib/components/upload/components/UploadCard.tsx b/src/lib/components/upload/components/UploadCard.tsx
index d93a6db35..9ad41ccb4 100644
--- a/src/lib/components/upload/components/UploadCard.tsx
+++ b/src/lib/components/upload/components/UploadCard.tsx
@@ -60,10 +60,10 @@ export const UploadCard = ({
         p="16px"
         gap="16px"
         w="full"
-        bgColor="pebble.900"
+        bgColor="gray.900"
         borderRadius="8px"
         border="1px solid"
-        borderColor={isError ? "error.main" : "pebble.900"}
+        borderColor={isError ? "error.main" : "gray.900"}
       >
         <UploadIcon />
         <Flex direction="column">
diff --git a/src/lib/layout/Footer.tsx b/src/lib/layout/Footer.tsx
index 55aaaf573..87fb7e024 100644
--- a/src/lib/layout/Footer.tsx
+++ b/src/lib/layout/Footer.tsx
@@ -53,7 +53,7 @@ const Footer = () => (
           onClick={() => AmpTrackCelatone(item.url)}
         >
           <Button variant="ghost-gray" size="xs" px="1">
-            <CustomIcon name={item.icon} boxSize="5" color="pebble.600" />
+            <CustomIcon name={item.icon} boxSize="5" color="gray.600" />
           </Button>
         </Link>
       ))}
@@ -65,7 +65,7 @@ const Footer = () => (
       >
         <Button variant="ghost-gray" size="xs">
           <Flex gap={1} align="center">
-            <CustomIcon name="feedback" color="pebble.600" />
+            <CustomIcon name="feedback" color="gray.600" />
             <Text variant="body3" color="text.dark">
               Feedback
             </Text>
@@ -98,9 +98,9 @@ const Footer = () => (
             </Text>
             <Text
               variant="body3"
-              color="lilac.main"
+              color="secondary.main"
               transition="all .25s ease-in-out"
-              _hover={{ color: "lilac.light" }}
+              _hover={{ color: "secondary.light" }}
             >
               Alles Labs
             </Text>
diff --git a/src/lib/layout/Header.tsx b/src/lib/layout/Header.tsx
index f5c16aba1..24a1c6b1b 100644
--- a/src/lib/layout/Header.tsx
+++ b/src/lib/layout/Header.tsx
@@ -56,8 +56,8 @@ const Header = () => {
             py="5px"
             borderRadius="8px"
             borderWidth="1px"
-            borderColor="pebble.600"
-            _hover={{ bg: "pebble.700" }}
+            borderColor="gray.600"
+            _hover={{ bg: "gray.700" }}
             transition="all .25s ease-in-out"
             w="170px"
           >
@@ -75,7 +75,7 @@ const Header = () => {
               >
                 {currentChainRecord?.chain.chain_id}
               </Text>
-              <CustomIcon name="chevron-down" color="pebble.600" />
+              <CustomIcon name="chevron-down" color="gray.600" />
             </Flex>
           </MenuButton>
           <MenuList zIndex="dropdown">
@@ -88,7 +88,7 @@ const Header = () => {
                 flexDirection="column"
                 alignItems="flex-start"
                 _hover={{
-                  backgroundColor: "pebble.800",
+                  backgroundColor: "gray.800",
                 }}
                 transition="all .25s ease-in-out"
               >
@@ -102,7 +102,7 @@ const Header = () => {
                     </Text>
                   </Flex>
                   {chainName === currentChainName && (
-                    <CustomIcon name="check" boxSize="3" color="pebble.600" />
+                    <CustomIcon name="check" boxSize="3" color="gray.600" />
                   )}
                 </Flex>
               </MenuItem>
diff --git a/src/lib/layout/Searchbar.tsx b/src/lib/layout/Searchbar.tsx
index ab8bfb3b0..3e71dfae7 100644
--- a/src/lib/layout/Searchbar.tsx
+++ b/src/lib/layout/Searchbar.tsx
@@ -60,7 +60,7 @@ const ResultItem = ({ type, value, handleSelectResult }: ResultItemProps) => {
   const route = type ? getRoute(type) : null;
 
   return (
-    <ListItem p={2} borderBottomColor="pebble.700" bg="pebble.900">
+    <ListItem p={2} borderBottomColor="gray.700" bg="gray.900">
       <Text variant="body2" fontWeight="500" color="text.dark" p="8px">
         {text}
       </Text>
@@ -69,7 +69,7 @@ const ResultItem = ({ type, value, handleSelectResult }: ResultItemProps) => {
           variant="body2"
           p="8px"
           borderRadius="8px"
-          _hover={{ bg: "pebble.800", cursor: "pointer" }}
+          _hover={{ bg: "gray.800", cursor: "pointer" }}
           transition="all 0.25s ease-in-out"
           onClick={() => handleSelectResult(type, true)}
         >
@@ -141,18 +141,18 @@ const Searchbar = () => {
           h="36px"
           onChange={handleSearchChange}
           placeholder={placeholder}
-          focusBorderColor="lilac.main"
+          focusBorderColor="secondary.main"
           onFocus={() => setDisplayResults(keyword.length > 0)}
           onKeyDown={handleOnKeyEnter}
         />
         <InputRightElement pointerEvents="none" h="full">
-          <CustomIcon name="search" color="pebble.600" />
+          <CustomIcon name="search" color="gray.600" />
         </InputRightElement>
       </InputGroup>
       {displayResults && (
         <List
           borderRadius="8px"
-          bg="pebble.900"
+          bg="gray.900"
           position="absolute"
           zIndex="2"
           w="full"
diff --git a/src/lib/layout/SubHeader.tsx b/src/lib/layout/SubHeader.tsx
index c9c4e580f..f962435f7 100644
--- a/src/lib/layout/SubHeader.tsx
+++ b/src/lib/layout/SubHeader.tsx
@@ -21,7 +21,7 @@ const SubHeader = () => {
   const { address } = useWallet();
   const isCurrentPage = useIsCurrentPage();
 
-  const activeColor = "violet.light";
+  const activeColor = "primary.light";
 
   const myPageSlug = `/accounts/${address}`;
 
@@ -55,7 +55,7 @@ const SubHeader = () => {
               <CustomIcon
                 boxSize={3}
                 name={item.icon}
-                color={isCurrentPage(item.slug) ? activeColor : "pebble.600"}
+                color={isCurrentPage(item.slug) ? activeColor : "gray.600"}
               />
               <Text
                 variant="body2"
@@ -78,13 +78,13 @@ const SubHeader = () => {
               h="full"
               borderBottomWidth={2}
               borderColor={
-                isCurrentPage(myPageSlug) ? "lilac.main" : "transparent"
+                isCurrentPage(myPageSlug) ? "secondary.main" : "transparent"
               }
-              _hover={{ borderColor: "lilac.main" }}
+              _hover={{ borderColor: "secondary.main" }}
               transition="all .25s ease-in-out"
             >
-              <CustomIcon boxSize={3} name="admin" color="lilac.main" />
-              <Text variant="body2" fontWeight="600" color="lilac.main">
+              <CustomIcon boxSize={3} name="admin" color="secondary.main" />
+              <Text variant="body2" fontWeight="600" color="secondary.main">
                 My Page
               </Text>
             </Flex>
diff --git a/src/lib/layout/index.tsx b/src/lib/layout/index.tsx
index a74513713..1dd66129d 100644
--- a/src/lib/layout/index.tsx
+++ b/src/lib/layout/index.tsx
@@ -50,10 +50,10 @@ const Layout = ({ children }: LayoutProps) => {
       overflowX="hidden"
       bg="background.main"
     >
-      <GridItem bg="pebble.900" area="header" mb="1">
+      <GridItem bg="gray.900" area="header" mb="1">
         <Header />
       </GridItem>
-      <GridItem bg="pebble.900" area="nav" overflowY="auto">
+      <GridItem bg="gray.900" area="nav" overflowY="auto">
         {mode.navBar}
       </GridItem>
       <GridItem area="main" overflowY="auto" id="content">
diff --git a/src/lib/layout/navbar/Collapse.tsx b/src/lib/layout/navbar/Collapse.tsx
index 204e823b7..49197ce4a 100644
--- a/src/lib/layout/navbar/Collapse.tsx
+++ b/src/lib/layout/navbar/Collapse.tsx
@@ -22,7 +22,7 @@ export const CollapseNavMenu = ({
           minW="fit-content"
           key={item.category}
           borderBottom="1px solid"
-          borderColor="pebble.700"
+          borderColor="gray.700"
           sx={{
             "&:last-of-type": {
               borderBottom: "none",
@@ -36,7 +36,7 @@ export const CollapseNavMenu = ({
               <Tooltip label="Expand" placement="right">
                 <IconButton
                   aria-label="overview"
-                  variant="ghost-info"
+                  variant="ghost-accent"
                   fontSize="24px"
                   height="fit-content"
                   minW="fit-content"
@@ -60,12 +60,12 @@ export const CollapseNavMenu = ({
                   cursor="pointer"
                   p={1}
                   m={2}
-                  _hover={{ bg: "pebble.700", borderRadius: "8px" }}
+                  _hover={{ bg: "gray.700", borderRadius: "8px" }}
                   transition="all .25s ease-in-out"
                   alignItems="center"
                   position="relative"
                   bgColor={
-                    isCurrentPage(submenu.slug) ? "pebble.800" : "transparent"
+                    isCurrentPage(submenu.slug) ? "gray.800" : "transparent"
                   }
                   borderRadius={isCurrentPage(submenu.slug) ? "8px" : "0px"}
                 >
@@ -73,14 +73,14 @@ export const CollapseNavMenu = ({
                     opacity={isCurrentPage(submenu.slug) ? 1 : 0}
                     width="3px"
                     height="16px"
-                    bgColor="violet.light"
+                    bgColor="primary.light"
                     position="absolute"
                     top="8px"
                     borderRadius="2px"
                     left="0px"
                   />
                   {submenu.icon && (
-                    <CustomIcon name={submenu.icon} color="pebble.600" />
+                    <CustomIcon name={submenu.icon} color="gray.600" />
                   )}
                   {submenu.logo && (
                     <Image
diff --git a/src/lib/layout/navbar/Expand.tsx b/src/lib/layout/navbar/Expand.tsx
index 6a71ae1b1..45a8a180c 100644
--- a/src/lib/layout/navbar/Expand.tsx
+++ b/src/lib/layout/navbar/Expand.tsx
@@ -19,7 +19,7 @@ export const ExpandNavMenu = ({
         mb="4"
         key={item.category}
         borderBottom="1px solid"
-        borderColor="pebble.700"
+        borderColor="gray.700"
         sx={{
           "&:last-of-type": {
             borderBottom: "none",
@@ -34,7 +34,7 @@ export const ExpandNavMenu = ({
           </Text>
           {item.category === "Overview" && (
             <Button
-              variant="ghost-info"
+              variant="ghost-accent"
               size="xs"
               iconSpacing={1}
               leftIcon={<CustomIcon name="double-chevron-left" boxSize="3" />}
@@ -46,7 +46,7 @@ export const ExpandNavMenu = ({
           {item.category === "Contracts" && (
             <CreateNewListModal
               buttonProps={{
-                variant: "ghost-info",
+                variant: "ghost-accent",
                 iconSpacing: 1,
                 size: "xs",
                 leftIcon: <CustomIcon name="plus" boxSize="3" />,
@@ -66,28 +66,26 @@ export const ExpandNavMenu = ({
               gap="2"
               p={2}
               cursor="pointer"
-              _hover={{ bg: "pebble.700", borderRadius: "8px" }}
+              _hover={{ bg: "gray.700", borderRadius: "8px" }}
               my="1px"
               transition="all .25s ease-in-out"
               alignItems="center"
               position="relative"
-              bgColor={
-                isCurrentPage(submenu.slug) ? "pebble.800" : "transparent"
-              }
+              bgColor={isCurrentPage(submenu.slug) ? "gray.800" : "transparent"}
               borderRadius={isCurrentPage(submenu.slug) ? "8px" : "0px"}
             >
               <Flex
                 opacity={isCurrentPage(submenu.slug) ? 1 : 0}
                 width="3px"
                 height="20px"
-                bgColor="violet.light"
+                bgColor="primary.light"
                 position="absolute"
                 top="10px"
                 borderRadius="2px"
                 left="0px"
               />
               {submenu.icon && (
-                <CustomIcon name={submenu.icon} color="pebble.600" />
+                <CustomIcon name={submenu.icon} color="gray.600" />
               )}
               {submenu.logo && (
                 <Image
diff --git a/src/lib/pages/account-details/components/ErrorFetching.tsx b/src/lib/pages/account-details/components/ErrorFetching.tsx
index cbca765f2..ce975f05e 100644
--- a/src/lib/pages/account-details/components/ErrorFetching.tsx
+++ b/src/lib/pages/account-details/components/ErrorFetching.tsx
@@ -2,12 +2,7 @@ import { CustomIcon } from "lib/components/icon";
 
 export const ErrorFetching = () => (
   <>
-    <CustomIcon
-      name="alert-circle-solid"
-      color="pebble.600"
-      boxSize={4}
-      mr={3}
-    />
+    <CustomIcon name="alert-circle-solid" color="gray.600" boxSize={4} mr={3} />
     <p>Error fetching data. Please try again later.</p>
   </>
 );
diff --git a/src/lib/pages/account-details/components/delegations/NonRedelegatableSection.tsx b/src/lib/pages/account-details/components/delegations/NonRedelegatableSection.tsx
index 3b4f500f1..1bb68325a 100644
--- a/src/lib/pages/account-details/components/delegations/NonRedelegatableSection.tsx
+++ b/src/lib/pages/account-details/components/delegations/NonRedelegatableSection.tsx
@@ -32,9 +32,9 @@ export const NonRedelegatableSection = ({
     <Box
       px={6}
       py={4}
-      bgColor="pebble.900"
+      bgColor="gray.900"
       border="1px solid"
-      borderColor="pebble.700"
+      borderColor="gray.700"
       borderRadius="8px"
     >
       <Text variant="body2">
diff --git a/src/lib/pages/account-details/components/delegations/RadioCard.tsx b/src/lib/pages/account-details/components/delegations/RadioCard.tsx
index 4c947f3ec..b277f7026 100644
--- a/src/lib/pages/account-details/components/delegations/RadioCard.tsx
+++ b/src/lib/pages/account-details/components/delegations/RadioCard.tsx
@@ -25,7 +25,7 @@ export const RadioCard = ({
     <Radio variant="card" value={value} overflowX="hidden">
       <Flex alignItems="center" gap={2} justifyContent="space-between">
         <Flex direction="column" gap={1}>
-          <Text variant="body2" textColor="pebble.400" fontWeight="500">
+          <Text variant="body2" textColor="gray.400" fontWeight="500">
             {value}
           </Text>
           {isLoading ? (
diff --git a/src/lib/pages/account-details/components/delegations/RedelegationsSection.tsx b/src/lib/pages/account-details/components/delegations/RedelegationsSection.tsx
index 162249385..63fb71857 100644
--- a/src/lib/pages/account-details/components/delegations/RedelegationsSection.tsx
+++ b/src/lib/pages/account-details/components/delegations/RedelegationsSection.tsx
@@ -28,7 +28,7 @@ export const RedelegationsSection = ({
 }: RedelegationsSectionProps) => (
   <Flex direction="column" gap={4} {...props}>
     <Flex gap={3} alignItems="center">
-      <Button variant="ghost-lilac" p={0} onClick={onBack}>
+      <Button variant="ghost-secondary" p={0} onClick={onBack}>
         <CustomIcon name="chevron-left" boxSize={6} />
       </Button>
       <TableTitle
diff --git a/src/lib/pages/account-details/components/delegations/TotalCard.tsx b/src/lib/pages/account-details/components/delegations/TotalCard.tsx
index e43ce0968..7e553b521 100644
--- a/src/lib/pages/account-details/components/delegations/TotalCard.tsx
+++ b/src/lib/pages/account-details/components/delegations/TotalCard.tsx
@@ -33,7 +33,7 @@ export const TotalCard = ({
             {title}
           </Text>
           <Tooltip label={message}>
-            <InfoIcon color="pebble.600" boxSize={3} cursor="pointer" />
+            <InfoIcon color="gray.600" boxSize={3} cursor="pointer" />
           </Tooltip>
         </Flex>
         {!token ? (
diff --git a/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx b/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx
index f2bd9d1f9..1960f8460 100644
--- a/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx
@@ -24,7 +24,7 @@ export const BondedTableRow = ({
 }: BondedTableRowProps) => (
   <Grid
     templateColumns={templateColumns}
-    _hover={{ bg: "pebble.900" }}
+    _hover={{ bg: "gray.900" }}
     transition="all .25s ease-in-out"
     minW="min-content"
   >
diff --git a/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx b/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx
index 2a884f1a3..695bc470c 100644
--- a/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx
+++ b/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx
@@ -18,7 +18,7 @@ export const RedelegationTableRow = ({
 }: RedelegationTableRowProps) => (
   <Grid
     templateColumns={templateColumns}
-    _hover={{ bg: "pebble.900" }}
+    _hover={{ bg: "gray.900" }}
     transition="all .25s ease-in-out"
     minW="min-content"
   >
@@ -26,7 +26,7 @@ export const RedelegationTableRow = ({
       <ValidatorBadge validator={redelegation.srcValidator} />
     </TableRow>
     <TableRow>
-      <CustomIcon name="arrow-right" boxSize={6} color="pebble.600" />
+      <CustomIcon name="arrow-right" boxSize={6} color="gray.600" />
     </TableRow>
     <TableRow>
       <ValidatorBadge validator={redelegation.dstValidator} />
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 4d33d56f0..d235e9f46 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -115,7 +115,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
       {publicInfo?.description && (
         <Flex
           direction="column"
-          bg="pebble.900"
+          bg="gray.900"
           maxW="100%"
           borderRadius="8px"
           py={4}
@@ -124,7 +124,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
           flex="1"
         >
           <Flex alignItems="center" gap={1} minH="32px">
-            <CustomIcon name="website" ml="0" mb="6px" color="pebble.600" />
+            <CustomIcon name="website" ml="0" mb="6px" color="gray.600" />
             <Text variant="body2" fontWeight={500} color="text.dark">
               Public Account Description
             </Text>
@@ -138,7 +138,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
       <Tabs index={tabIndex}>
         <TabList
           borderBottom="1px solid"
-          borderColor="pebble.700"
+          borderColor="gray.700"
           overflowX="scroll"
           id={tableHeaderId}
         >
@@ -198,7 +198,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
               pb={8}
               direction="column"
               borderBottom="1px solid"
-              borderBottomColor="pebble.700"
+              borderBottomColor="gray.700"
             >
               <Text variant="body2" fontWeight="500" color="text.dark">
                 Total Account Value
@@ -219,13 +219,13 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
                 </Heading>
               )}
             </Flex>
-            <Flex borderBottom="1px solid" borderBottomColor="pebble.700">
+            <Flex borderBottom="1px solid" borderBottomColor="gray.700">
               <AssetsSection
                 walletAddress={accountAddress}
                 onViewMore={() => handleTabChange(TabIndex.Assets)}
               />
             </Flex>
-            <Flex borderBottom="1px solid" borderBottomColor="pebble.700">
+            <Flex borderBottom="1px solid" borderBottomColor="gray.700">
               <DelegationsSection
                 walletAddress={accountAddress}
                 onViewMore={() => handleTabChange(TabIndex.Delegations)}
diff --git a/src/lib/pages/block-details/components/BlockDetailsTop.tsx b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
index 6a6802f38..7758e85f3 100644
--- a/src/lib/pages/block-details/components/BlockDetailsTop.tsx
+++ b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
@@ -42,12 +42,12 @@ export const BlockDetailsTop = ({ blockData }: BlockDetailsTopProps) => {
       mb={12}
       pb={12}
       mt={6}
-      borderBottomColor="pebble.700"
+      borderBottomColor="gray.700"
       borderBottomWidth="1px"
     >
       <Flex direction="column" gap={1}>
         <Flex alignItems="center">
-          <CustomIcon name="block" boxSize="5" color="lilac.main" />
+          <CustomIcon name="block" boxSize="5" color="secondary.main" />
           <Heading as="h5" variant="h5" className="ellipsis">
             {blockData.height}
           </Heading>
@@ -64,7 +64,7 @@ export const BlockDetailsTop = ({ blockData }: BlockDetailsTopProps) => {
         </Flex>
         <Flex gap={2} alignItems="center">
           <Flex gap={1} alignItems="center">
-            <CustomIcon name="history" boxSize={3} color="pebble.600" />
+            <CustomIcon name="history" boxSize={3} color="gray.600" />
             <Text variant="body2" color="text.dark">
               {dateFromNow(blockData.timestamp)}
             </Text>
diff --git a/src/lib/pages/code-details/components/table/NoContracts.tsx b/src/lib/pages/code-details/components/table/NoContracts.tsx
index b1e38ad54..dd7859935 100644
--- a/src/lib/pages/code-details/components/table/NoContracts.tsx
+++ b/src/lib/pages/code-details/components/table/NoContracts.tsx
@@ -11,7 +11,7 @@ const DisconnectedState = () => (
     gap="16px"
     py="48px"
     borderY="1px solid"
-    borderColor="pebble.700"
+    borderColor="gray.700"
   >
     <StateImage imageVariant="empty" />
     <Text variant="body1" color="text.dark">
diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx
index 7dd0571b7..7cfa9a131 100644
--- a/src/lib/pages/code-details/index.tsx
+++ b/src/lib/pages/code-details/index.tsx
@@ -112,11 +112,11 @@ const CodeDetailsBody = observer(
             description={publicProject.publicCodeData.description}
             textLine={2}
             icon={
-              <CustomIcon name="website" ml="0" mb="6px" color="pebble.600" />
+              <CustomIcon name="website" ml="0" mb="6px" color="gray.600" />
             }
           />
         )}
-        <Divider borderColor="pebble.700" my={12} />
+        <Divider borderColor="gray.700" my={12} />
         <CodeInfoSection codeData={codeData} chainId={chainId} />
         <CodeContractsTable codeId={codeId} />
       </>
diff --git a/src/lib/pages/codes/index.tsx b/src/lib/pages/codes/index.tsx
index b53fa51a4..9a6d1c1d6 100644
--- a/src/lib/pages/codes/index.tsx
+++ b/src/lib/pages/codes/index.tsx
@@ -74,7 +74,7 @@ const Codes = observer(() => {
         My Codes
       </Heading>
       <Tabs mt={8}>
-        <TabList mb="32px" borderBottom="1px" borderColor="pebble.800">
+        <TabList mb="32px" borderBottom="1px" borderColor="gray.800">
           <CustomTab count={allCodesCount}>All Codes</CustomTab>
           <CustomTab count={storedCodesCount}>My Stored Codes</CustomTab>
           <CustomTab count={savedCodesCount}>My Saved Codes </CustomTab>
diff --git a/src/lib/pages/contract-details/components/CommandSection.tsx b/src/lib/pages/contract-details/components/CommandSection.tsx
index 2692fb389..ae1f0ee79 100644
--- a/src/lib/pages/contract-details/components/CommandSection.tsx
+++ b/src/lib/pages/contract-details/components/CommandSection.tsx
@@ -70,7 +70,7 @@ export const CommandSection = () => {
     <Flex gap={6}>
       <Flex
         direction="column"
-        bg="pebble.900"
+        bg="gray.900"
         p={4}
         borderRadius="8px"
         flex={0.5}
@@ -82,7 +82,7 @@ export const CommandSection = () => {
       </Flex>
       <Flex
         direction="column"
-        bg="pebble.900"
+        bg="gray.900"
         p={4}
         borderRadius="8px"
         flex={0.5}
diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx
index b95ac36b0..dede8dc9a 100644
--- a/src/lib/pages/contract-details/components/ContractTop.tsx
+++ b/src/lib/pages/contract-details/components/ContractTop.tsx
@@ -60,9 +60,9 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
               aria-label="save"
               icon={
                 contractLocalInfo.lists ? (
-                  <CustomIcon name="bookmark-solid" color="violet.light" />
+                  <CustomIcon name="bookmark-solid" color="primary.light" />
                 ) : (
-                  <CustomIcon name="bookmark" color="pebble.600" />
+                  <CustomIcon name="bookmark" color="gray.600" />
                 )
               }
             />
@@ -83,7 +83,7 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
               fontSize="24px"
               variant="none"
               aria-label="save"
-              color="pebble.600"
+              color="gray.600"
               icon={<CustomIcon name="bookmark" />}
             />
           }
@@ -175,7 +175,7 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
                   fontSize="24px"
                   variant="none"
                   aria-label="edit"
-                  color="pebble.600"
+                  color="gray.600"
                   icon={<CustomIcon name="edit" />}
                 />
               }
diff --git a/src/lib/pages/contract-details/components/InstantiateInfo.tsx b/src/lib/pages/contract-details/components/InstantiateInfo.tsx
index 94686318b..847f937f6 100644
--- a/src/lib/pages/contract-details/components/InstantiateInfo.tsx
+++ b/src/lib/pages/contract-details/components/InstantiateInfo.tsx
@@ -161,7 +161,7 @@ export const InstantiateInfo = ({
         </LabelText>
       )}
 
-      <Divider border="1px solid" borderColor="pebble.700" />
+      <Divider border="1px solid" borderColor="gray.700" />
 
       {instantiateInfo &&
         (instantiateInfo.createdHeight ? (
diff --git a/src/lib/pages/contract-details/components/JsonInfo.tsx b/src/lib/pages/contract-details/components/JsonInfo.tsx
index df2987f27..fc45cd90e 100644
--- a/src/lib/pages/contract-details/components/JsonInfo.tsx
+++ b/src/lib/pages/contract-details/components/JsonInfo.tsx
@@ -24,8 +24,8 @@ export const JsonInfo = ({
         align="center"
         p="12px 16px"
         borderRadius="8px"
-        background="pebble.900"
-        _hover={{ backgroundColor: "pebble.800" }}
+        background="gray.900"
+        _hover={{ backgroundColor: "gray.800" }}
         transition="all .25s ease-in-out"
         cursor="pointer"
         onClick={() => setExpand((prev) => !prev)}
@@ -36,7 +36,7 @@ export const JsonInfo = ({
         <CustomIcon
           transition="all .25s ease-in-out"
           name={expand ? "chevron-up" : "chevron-down"}
-          color="pebble.600"
+          color="gray.600"
         />
       </Flex>
       <div
diff --git a/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx b/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx
index 46bf1de76..9ee15990e 100644
--- a/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx
+++ b/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx
@@ -38,8 +38,8 @@ export const UserContractDesc = ({ contractData }: UserContractDescProps) => {
         triggerElement={
           <Button
             size="xs"
-            color="lilac.main"
-            variant="ghost-lilac"
+            color="secondary.main"
+            variant="ghost-secondary"
             leftIcon={<CustomIcon name="edit" boxSize="3" />}
           >
             {description ? "Edit" : "Add Description"}
@@ -59,7 +59,7 @@ export const UserContractDesc = ({ contractData }: UserContractDescProps) => {
   return (
     <Flex
       direction="column"
-      bg="pebble.900"
+      bg="gray.900"
       maxW="100%"
       borderRadius="8px"
       p={4}
diff --git a/src/lib/pages/contract-details/components/contract-description/index.tsx b/src/lib/pages/contract-details/components/contract-description/index.tsx
index 461915302..29a096cd9 100644
--- a/src/lib/pages/contract-details/components/contract-description/index.tsx
+++ b/src/lib/pages/contract-details/components/contract-description/index.tsx
@@ -16,7 +16,7 @@ export const ContractDesc = ({ contractData }: ContractDescProps) => (
         title="Public Contract Description"
         description={contractData.publicProject.publicInfo.description}
         textLine={contractData.contractLocalInfo?.description ? 4 : 2}
-        icon={<CustomIcon name="website" ml="0" mb="6px" color="pebble.600" />}
+        icon={<CustomIcon name="website" ml="0" mb="6px" color="gray.600" />}
       />
     )}
     <UserContractDesc contractData={contractData} />
diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx
index 7906997e1..339ff3e00 100644
--- a/src/lib/pages/contract-details/index.tsx
+++ b/src/lib/pages/contract-details/index.tsx
@@ -92,7 +92,7 @@ const ContractDetailsBody = observer(
           History
         </Heading>
         <Tabs>
-          <TabList borderBottom="1px solid" borderColor="pebble.700">
+          <TabList borderBottom="1px solid" borderColor="gray.700">
             <CustomTab count={tableCounts.transactionsCount}>
               Transactions
             </CustomTab>
diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx
index 2307595d2..417515fc0 100644
--- a/src/lib/pages/contract-list/slug.tsx
+++ b/src/lib/pages/contract-list/slug.tsx
@@ -84,7 +84,7 @@ const ContractsByList = observer(() => {
         w="full"
         spacing="4px"
         separator={
-          <CustomIcon name="chevron-right" boxSize="3" color="pebble.600" />
+          <CustomIcon name="chevron-right" boxSize="3" color="gray.600" />
         }
       >
         <BreadcrumbItem
@@ -144,7 +144,7 @@ const ContractsByList = observer(() => {
           {contractListInfo.isInfoEditable && (
             <Menu>
               <MenuButton h="full" variant="ghost-gray" as={Button}>
-                <CustomIcon name="more" color="pebble.600" />
+                <CustomIcon name="more" color="gray.600" />
               </MenuButton>
               <MenuList>
                 <EditListNameModal
@@ -153,7 +153,7 @@ const ContractsByList = observer(() => {
                     value: contractListInfo.slug,
                   }}
                   menuItemProps={{
-                    icon: <CustomIcon name="edit" color="pebble.600" />,
+                    icon: <CustomIcon name="edit" color="gray.600" />,
                     children: "Edit list name",
                   }}
                   reroute
diff --git a/src/lib/pages/deploy/index.tsx b/src/lib/pages/deploy/index.tsx
index e8a4c9354..66e5a12fd 100644
--- a/src/lib/pages/deploy/index.tsx
+++ b/src/lib/pages/deploy/index.tsx
@@ -39,11 +39,11 @@ const getAlertContent = (
         description: "Your address is allowed to directly upload Wasm files",
       }
     : {
-        variant: "violet",
+        variant: "primary",
         icon: (
           <CustomIcon
             name="info-circle-solid"
-            color="violet.light"
+            color="primary.light"
             boxSize={4}
           />
         ),
diff --git a/src/lib/pages/execute/index.tsx b/src/lib/pages/execute/index.tsx
index 15da38428..503c16d2d 100644
--- a/src/lib/pages/execute/index.tsx
+++ b/src/lib/pages/execute/index.tsx
@@ -92,7 +92,7 @@ const Execute = () => {
         </Heading>
         <Box>
           <Button
-            variant="ghost-lilac"
+            variant="ghost-secondary"
             size="sm"
             p="unset"
             pl="2"
diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx
index b0fe9ad58..50683d299 100644
--- a/src/lib/pages/faucet/index.tsx
+++ b/src/lib/pages/faucet/index.tsx
@@ -161,7 +161,7 @@ const Faucet = () => {
         label="Receiving Address"
         helperAction={
           <Text
-            color="honeydew.main"
+            color="accent.main"
             fontWeight="600"
             variant="body3"
             cursor="pointer"
diff --git a/src/lib/pages/home/components/PastTransaction.tsx b/src/lib/pages/home/components/PastTransaction.tsx
index 088ffd186..b73639cfe 100644
--- a/src/lib/pages/home/components/PastTransaction.tsx
+++ b/src/lib/pages/home/components/PastTransaction.tsx
@@ -22,8 +22,8 @@ export const PastTransaction = () => (
       </Text>
       <AppLink href="/past-txs">
         <Text
-          color="lilac.main"
-          _hover={{ color: "lilac.light" }}
+          color="secondary.main"
+          _hover={{ color: "secondary.light" }}
           transition="all .25s ease-in-out"
         >
           Past Transactions
diff --git a/src/lib/pages/home/components/QuickMenu.tsx b/src/lib/pages/home/components/QuickMenu.tsx
index 641525027..291673740 100644
--- a/src/lib/pages/home/components/QuickMenu.tsx
+++ b/src/lib/pages/home/components/QuickMenu.tsx
@@ -48,7 +48,7 @@ const secondaryMenu: SecondaryMenuType[] = [
 ];
 
 export const QuickMenu = () => (
-  <Flex direction="column" gap={4} bg="pebble.900" p="48px">
+  <Flex direction="column" gap={4} bg="gray.900" p="48px">
     <Heading as="h5" variant="h5">
       Start using Celatone
     </Heading>
@@ -59,7 +59,7 @@ export const QuickMenu = () => (
     <Flex gap={4}>
       <AppLink href="/deploy" style={{ width: "55%" }}>
         <Flex
-          bgGradient="linear(to-tr, violet.main, violet.light)"
+          bgGradient="linear(to-tr, primary.main, primary.light)"
           _hover={{ opacity: "85%" }}
           style={cardProps}
           transition="all .25s ease-in-out"
@@ -83,17 +83,13 @@ export const QuickMenu = () => (
           <AppLink href={`/${item.slug}`} key={item.slug}>
             <Flex
               style={cardProps}
-              _hover={{ bg: "pebble.700" }}
+              _hover={{ bg: "gray.700" }}
               transition="all .25s ease-in-out"
-              bg="pebble.800"
+              bg="gray.800"
               alignItems="center"
             >
               <Flex alignItems="center" gap={3}>
-                <CustomIcon
-                  name={item.icon}
-                  boxSize="24px"
-                  color="pebble.600"
-                />
+                <CustomIcon name={item.icon} boxSize="24px" color="gray.600" />
                 <Box>
                   <Text variant="body1" fontWeight="800">
                     {item.title}
@@ -106,7 +102,7 @@ export const QuickMenu = () => (
               <CustomIcon
                 name="chevron-right"
                 boxSize="24px"
-                color="pebble.600"
+                color="gray.600"
               />
             </Flex>
           </AppLink>
diff --git a/src/lib/pages/home/components/RecentActivities.tsx b/src/lib/pages/home/components/RecentActivities.tsx
index 686e99d85..9a82f9256 100644
--- a/src/lib/pages/home/components/RecentActivities.tsx
+++ b/src/lib/pages/home/components/RecentActivities.tsx
@@ -33,9 +33,9 @@ export const RecentActivities = observer(() => {
               minW="360px"
               cursor="pointer"
               p={6}
-              bg="pebble.900"
+              bg="gray.900"
               borderRadius="8px"
-              _hover={{ bg: "pebble.800" }}
+              _hover={{ bg: "gray.800" }}
               transition="all .25s ease-in-out"
               key={item.type + item.contractAddress + item.timestamp}
               onClick={() =>
@@ -48,9 +48,9 @@ export const RecentActivities = observer(() => {
               <Flex alignItems="center" gap={1}>
                 <CustomIcon
                   name={item.type === "query" ? "query" : "execute"}
-                  color="honeydew.main"
+                  color="accent.main"
                 />
-                <Text variant="body2" color="honeydew.main">
+                <Text variant="body2" color="accent.main">
                   {item.type === "query" ? "Query" : "Execute"}
                 </Text>
               </Flex>
@@ -58,7 +58,7 @@ export const RecentActivities = observer(() => {
                 <Text
                   variant="body3"
                   padding="4px 8px"
-                  backgroundColor="pebble.700"
+                  backgroundColor="gray.700"
                   borderRadius="16px"
                 >
                   {item.action}
@@ -92,7 +92,7 @@ export const RecentActivities = observer(() => {
           px={12}
           borderTopWidth={1}
           borderBottomWidth={1}
-          borderColor="pebble.700"
+          borderColor="gray.700"
           justifyContent="center"
           alignItems="center"
           minH="128px"
diff --git a/src/lib/pages/instantiate/completed.tsx b/src/lib/pages/instantiate/completed.tsx
index c5429d1ce..880c07d6f 100644
--- a/src/lib/pages/instantiate/completed.tsx
+++ b/src/lib/pages/instantiate/completed.tsx
@@ -53,7 +53,7 @@ const Completed = ({ txInfo }: CompletedProps) => {
         gap={6}
         w="full"
         borderBottomWidth={1}
-        borderBottomColor="pebble.700"
+        borderBottomColor="gray.700"
         pb={8}
         my={8}
       >
diff --git a/src/lib/pages/instantiate/component/Footer.tsx b/src/lib/pages/instantiate/component/Footer.tsx
index d2b757ed7..2bc14b8c3 100644
--- a/src/lib/pages/instantiate/component/Footer.tsx
+++ b/src/lib/pages/instantiate/component/Footer.tsx
@@ -14,7 +14,7 @@ export const Footer = ({ onInstantiate, disabled, loading }: FooterProps) => {
   return (
     <Box
       w="full"
-      bg="pebble.900"
+      bg="gray.900"
       h="70px"
       bottom="0"
       position="sticky"
diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
index ddf0510f3..17ac8a9da 100644
--- a/src/lib/pages/instantiate/instantiate.tsx
+++ b/src/lib/pages/instantiate/instantiate.tsx
@@ -320,7 +320,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             error={validateAdmin(watchAdminAddress)}
             helperAction={
               <Text
-                color="honeydew.main"
+                color="accent.main"
                 fontWeight="600"
                 variant="body3"
                 cursor="pointer"
diff --git a/src/lib/pages/network-overview/index.tsx b/src/lib/pages/network-overview/index.tsx
index 15cc56105..3d13cc345 100644
--- a/src/lib/pages/network-overview/index.tsx
+++ b/src/lib/pages/network-overview/index.tsx
@@ -52,9 +52,9 @@ const CardInfo = ({
 }: CardInfoProps) => (
   <Flex
     style={cardProps}
-    _hover={{ bg: "pebble.700" }}
+    _hover={{ bg: "gray.700" }}
     transition="all .25s ease-in-out"
-    bg="pebble.800"
+    bg="gray.800"
     onClick={navigate}
   >
     <Box>
@@ -64,11 +64,7 @@ const CardInfo = ({
         </Text>
         <Tooltip label={tooltip}>
           <Flex cursor="pointer">
-            <CustomIcon
-              name="info-circle-solid"
-              boxSize="3"
-              color="pebble.600"
-            />
+            <CustomIcon name="info-circle-solid" boxSize="3" color="gray.600" />
           </Flex>
         </Tooltip>
       </Flex>
@@ -80,7 +76,7 @@ const CardInfo = ({
         </Heading>
       )}
     </Box>
-    <CustomIcon name="chevron-right" boxSize={5} color="pebble.600" />
+    <CustomIcon name="chevron-right" boxSize={5} color="gray.600" />
   </Flex>
 );
 
diff --git a/src/lib/pages/not-found/index.tsx b/src/lib/pages/not-found/index.tsx
index 601a013f6..a0c3c118b 100644
--- a/src/lib/pages/not-found/index.tsx
+++ b/src/lib/pages/not-found/index.tsx
@@ -17,7 +17,7 @@ const NotFoundPage = () => {
       <BackButton />
       <Flex
         borderY="1px solid"
-        borderColor="pebble.700"
+        borderColor="gray.700"
         justify="center"
         align="center"
         direction="column"
diff --git a/src/lib/pages/past-txs/index.tsx b/src/lib/pages/past-txs/index.tsx
index 27120cac3..44a34e56e 100644
--- a/src/lib/pages/past-txs/index.tsx
+++ b/src/lib/pages/past-txs/index.tsx
@@ -145,7 +145,7 @@ const PastTxs = () => {
             h="full"
           />
           <InputRightElement pointerEvents="none" h="full" mr="1">
-            <CustomIcon name="search" color="pebble.600" />
+            <CustomIcon name="search" color="gray.600" />
           </InputRightElement>
         </InputGroup>
         <Flex gap={3}>
diff --git a/src/lib/pages/proposal/components/AssetBox.tsx b/src/lib/pages/proposal/components/AssetBox.tsx
index 63483d237..9c163f8ab 100644
--- a/src/lib/pages/proposal/components/AssetBox.tsx
+++ b/src/lib/pages/proposal/components/AssetBox.tsx
@@ -35,9 +35,9 @@ export const AssetBox = ({ baseDenom }: { baseDenom: Option<string> }) => {
       padding="16px 12px"
       borderRadius="8px"
       border="1px solid"
-      borderColor="pebble.700"
+      borderColor="gray.700"
       position="relative"
-      color={tokenInfo ? "text.main" : "pebble.600"}
+      color={tokenInfo ? "text.main" : "gray.600"}
     >
       <AssetLabel>Asset</AssetLabel>
       <Flex align="center">
diff --git a/src/lib/pages/proposal/components/Footer.tsx b/src/lib/pages/proposal/components/Footer.tsx
index 67689a4f6..e0b9cab42 100644
--- a/src/lib/pages/proposal/components/Footer.tsx
+++ b/src/lib/pages/proposal/components/Footer.tsx
@@ -17,7 +17,7 @@ export const Footer = ({
     <Grid
       w="full"
       px="48px"
-      bg="pebble.900"
+      bg="gray.900"
       h="70px"
       bottom="0"
       position="sticky"
diff --git a/src/lib/pages/proposal/utils/getAlert.tsx b/src/lib/pages/proposal/utils/getAlert.tsx
index a2a6ada53..8556610fa 100644
--- a/src/lib/pages/proposal/utils/getAlert.tsx
+++ b/src/lib/pages/proposal/utils/getAlert.tsx
@@ -43,10 +43,10 @@ export const getAlert = (
   }
   if (enteredAmount.eq(minVotingDepositAmount)) {
     return {
-      variant: "honeydew",
+      variant: "accent",
       description:
         "The proposal will proceed to voting period immediately after created.",
-      icon: <CustomIcon name="info-circle" color="honeydew.main" boxSize="4" />,
+      icon: <CustomIcon name="info-circle" color="accent.main" boxSize="4" />,
     };
   }
   if (big(minVotingDepositAmount).lt(enteredAmount)) {
diff --git a/src/lib/pages/proposal/whitelist/index.tsx b/src/lib/pages/proposal/whitelist/index.tsx
index 486d94ec7..4e170dbe1 100644
--- a/src/lib/pages/proposal/whitelist/index.tsx
+++ b/src/lib/pages/proposal/whitelist/index.tsx
@@ -236,12 +236,12 @@ const ProposalToWhitelist = () => {
                 mt={12}
                 p={4}
                 gap={6}
-                bgColor="pebble.900"
+                bgColor="gray.900"
                 flexDirection="column"
                 borderRadius="8px"
               >
                 <Flex gap={2} alignItems="center">
-                  <CustomIcon name="proposal-solid" color="pebble.600" />
+                  <CustomIcon name="proposal-solid" color="gray.600" />
                   <Heading as="h6" variant="h6">
                     Fill in Proposal Details
                   </Heading>
@@ -251,7 +251,7 @@ const ProposalToWhitelist = () => {
                   control={control}
                   placeholder="ex. Allow XYZ to store code without proposal"
                   label="Proposal Title"
-                  labelBgColor="pebble.900"
+                  labelBgColor="gray.900"
                   variant="floating"
                   rules={{
                     required: "Proposal Title is required",
@@ -269,7 +269,7 @@ const ProposalToWhitelist = () => {
                   label="Proposal Description"
                   placeholder="Please describe your proposal for whitelist. Include all relevant details such as the project you work on or addresses you want to add to the allow list and the reason for the proposal. The description should be clear and concise to help everyone understand your request."
                   variant="floating"
-                  labelBgColor="pebble.900"
+                  labelBgColor="gray.900"
                   rules={{
                     required: "Proposal Description is required",
                   }}
@@ -374,7 +374,7 @@ const ProposalToWhitelist = () => {
                       cursor="pointer"
                       variant="body3"
                       minW={16}
-                      color="honeydew.main"
+                      color="accent.main"
                       onClick={() => {
                         if (!minDeposit) return;
                         setValue(
diff --git a/src/lib/pages/proposals/components/ProposalTextCell.tsx b/src/lib/pages/proposals/components/ProposalTextCell.tsx
index 84dffff72..b70ae9bef 100644
--- a/src/lib/pages/proposals/components/ProposalTextCell.tsx
+++ b/src/lib/pages/proposals/components/ProposalTextCell.tsx
@@ -36,7 +36,7 @@ export const ProposalTextCell = ({
       position="absolute"
       justify="center"
       borderRadius="8px"
-      bgColor={showName ? "pebble.800" : "undefined"}
+      bgColor={showName ? "gray.800" : "undefined"}
       px={4}
       maxW={showName ? undefined : "full"}
       onMouseOver={() => setIsHoverText(true)}
diff --git a/src/lib/pages/proposals/components/ProposalTypeFilter.tsx b/src/lib/pages/proposals/components/ProposalTypeFilter.tsx
index 2103d104e..65e9d8133 100644
--- a/src/lib/pages/proposals/components/ProposalTypeFilter.tsx
+++ b/src/lib/pages/proposals/components/ProposalTypeFilter.tsx
@@ -131,7 +131,7 @@ export const ProposalTypeFilter = forwardRef<
                 onSelect={() => selectOption(cosmosType)}
               />
             ))}
-            {cosmosTypes.length && <Divider borderColor="pebble.700" />}
+            {cosmosTypes.length && <Divider borderColor="gray.700" />}
 
             {generalTypes.map((generalType) => (
               <FilterDropdownItem
diff --git a/src/lib/pages/proposals/table/ProposalTableHeader.tsx b/src/lib/pages/proposals/table/ProposalTableHeader.tsx
index db4a94c30..973fda428 100644
--- a/src/lib/pages/proposals/table/ProposalTableHeader.tsx
+++ b/src/lib/pages/proposals/table/ProposalTableHeader.tsx
@@ -18,7 +18,7 @@ export const ProposalTableHeader = ({
       <TableHeaderFreeze
         left={columnsWidth && columnsWidth[0]}
         boxShadow={boxShadow}
-        color="pebble.800"
+        color="gray.800"
       >
         <Text color="text.main">Proposal Title/Type</Text>
       </TableHeaderFreeze>
diff --git a/src/lib/pages/proposals/table/ProposalTableRow.tsx b/src/lib/pages/proposals/table/ProposalTableRow.tsx
index c0a430b46..2de771f8a 100644
--- a/src/lib/pages/proposals/table/ProposalTableRow.tsx
+++ b/src/lib/pages/proposals/table/ProposalTableRow.tsx
@@ -36,8 +36,8 @@ export const ProposalTableRow = ({
     proposal.status === ProposalStatus.VOTING_PERIOD;
 
   const hoverBg = (): Option<string> => {
-    if (proposal.isExpedited && isDepositOrVoting) return "violet.background";
-    return isDepositFailed ? undefined : "pebble.900";
+    if (proposal.isExpedited && isDepositOrVoting) return "primary.background";
+    return isDepositFailed ? undefined : "gray.900";
   };
 
   return (
@@ -76,7 +76,7 @@ export const ProposalTableRow = ({
       <TableRowFreeze
         left={columnsWidth && columnsWidth[0]}
         boxShadow={boxShadow}
-        color="pebble.800"
+        color="gray.800"
       >
         <ProposalTextCell
           title={proposal.title}
diff --git a/src/lib/pages/public-project/components/BookmarkButton.tsx b/src/lib/pages/public-project/components/BookmarkButton.tsx
index a1799696b..5301a6b4f 100644
--- a/src/lib/pages/public-project/components/BookmarkButton.tsx
+++ b/src/lib/pages/public-project/components/BookmarkButton.tsx
@@ -54,10 +54,10 @@ const StyledButton = ({
   >
     <CustomIcon
       name={icon}
-      color={icon === "bookmark" ? "pebble.600" : "violet.light"}
+      color={icon === "bookmark" ? "gray.600" : "primary.light"}
     />
     {hasText && (
-      <Text color={icon === "bookmark" ? "text.dark" : "violet.light"}>
+      <Text color={icon === "bookmark" ? "text.dark" : "primary.light"}>
         {actionText}
       </Text>
     )}
diff --git a/src/lib/pages/public-project/components/DetailHeader.tsx b/src/lib/pages/public-project/components/DetailHeader.tsx
index c552cb136..f0338d105 100644
--- a/src/lib/pages/public-project/components/DetailHeader.tsx
+++ b/src/lib/pages/public-project/components/DetailHeader.tsx
@@ -26,7 +26,7 @@ export const DetailHeader = ({ details, slug }: DetailHeaderProps) => (
       w="full"
       spacing={1}
       separator={
-        <CustomIcon name="chevron-right" boxSize="3" color="pebble.600" />
+        <CustomIcon name="chevron-right" boxSize="3" color="gray.600" />
       }
     >
       <BreadcrumbItem
diff --git a/src/lib/pages/public-project/components/PublicProjectCard.tsx b/src/lib/pages/public-project/components/PublicProjectCard.tsx
index 4c9adb44b..97374a625 100644
--- a/src/lib/pages/public-project/components/PublicProjectCard.tsx
+++ b/src/lib/pages/public-project/components/PublicProjectCard.tsx
@@ -32,8 +32,8 @@ export const PublicProjectCard = observer(
         pt={4}
         pb={2}
         alignItems="center"
-        bg="pebble.800"
-        _hover={{ bg: "pebble.700" }}
+        bg="gray.800"
+        _hover={{ bg: "gray.700" }}
         transition="all .25s ease-in-out"
         borderRadius="8px"
         gap={4}
diff --git a/src/lib/pages/public-project/components/table/account/PublicProjectAccountRow.tsx b/src/lib/pages/public-project/components/table/account/PublicProjectAccountRow.tsx
index f244ea36e..c16e631e0 100644
--- a/src/lib/pages/public-project/components/table/account/PublicProjectAccountRow.tsx
+++ b/src/lib/pages/public-project/components/table/account/PublicProjectAccountRow.tsx
@@ -43,7 +43,7 @@ export const PublicProjectAccountRow = ({
     <Grid
       templateColumns={templateColumns}
       onClick={goToDetail}
-      _hover={{ bg: "pebble.900" }}
+      _hover={{ bg: "gray.900" }}
       transition="all .25s ease-in-out"
       cursor="pointer"
       minW="min-content"
diff --git a/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx b/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx
index 3821e1119..adf5da821 100644
--- a/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx
+++ b/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx
@@ -34,7 +34,7 @@ export const PublicProjectCodeRow = ({
     <Grid
       templateColumns={templateColumns}
       onClick={goToCodeDetails}
-      _hover={{ bg: "pebble.900" }}
+      _hover={{ bg: "gray.900" }}
       transition="all .25s ease-in-out"
       cursor="pointer"
       minW="min-content"
diff --git a/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx b/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx
index bbd1b4825..f61ad1b16 100644
--- a/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx
+++ b/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx
@@ -54,7 +54,7 @@ export const PublicProjectContractRow = ({
     <Grid
       templateColumns={templateColumns}
       onClick={goToContractDetails}
-      _hover={{ bg: "pebble.900" }}
+      _hover={{ bg: "gray.900" }}
       transition="all .25s ease-in-out"
       cursor="pointer"
       minW="min-content"
@@ -74,11 +74,7 @@ export const PublicProjectContractRow = ({
         {publicContractInfo.publicInfo.description && (
           <Tooltip label={publicContractInfo.publicInfo.description}>
             <Flex cursor="pointer">
-              <CustomIcon
-                name="info-circle"
-                boxSize="12px"
-                color="pebble.600"
-              />
+              <CustomIcon name="info-circle" boxSize="12px" color="gray.600" />
             </Flex>
           </Tooltip>
         )}
diff --git a/src/lib/pages/public-project/slug.tsx b/src/lib/pages/public-project/slug.tsx
index 6c967f85d..184c2a7df 100644
--- a/src/lib/pages/public-project/slug.tsx
+++ b/src/lib/pages/public-project/slug.tsx
@@ -47,7 +47,7 @@ export const ProjectDetail = () => {
     <PageContainer>
       <DetailHeader details={projectDetail} slug={slug} />
       <Tabs index={tabIndex}>
-        <TabList my={6} borderBottom="1px" borderColor="pebble.800">
+        <TabList my={6} borderBottom="1px" borderColor="gray.800">
           <CustomTab
             count={
               publicCodes.length +
diff --git a/src/lib/pages/query/index.tsx b/src/lib/pages/query/index.tsx
index a76731f12..c84a93edb 100644
--- a/src/lib/pages/query/index.tsx
+++ b/src/lib/pages/query/index.tsx
@@ -100,7 +100,7 @@ const Query = () => {
         </Heading>
         <Box>
           <Button
-            variant="ghost-lilac"
+            variant="ghost-secondary"
             size="sm"
             p="unset"
             pl="2"
diff --git a/src/lib/pages/tx-details/components/TxHeader.tsx b/src/lib/pages/tx-details/components/TxHeader.tsx
index 70b8a7d9b..f744d3660 100644
--- a/src/lib/pages/tx-details/components/TxHeader.tsx
+++ b/src/lib/pages/tx-details/components/TxHeader.tsx
@@ -13,7 +13,7 @@ interface TxHeaderProps extends FlexProps {
 }
 
 const DotSeparator = () => (
-  <Box bg="lilac.darker" borderRadius="50%" w="4px" h="4px" />
+  <Box bg="secondary.darker" borderRadius="50%" w="4px" h="4px" />
 );
 
 export const TxHeader = ({ txData, ...flexProps }: TxHeaderProps) => {
diff --git a/src/lib/pages/tx-details/components/tx-message/EventBox.tsx b/src/lib/pages/tx-details/components/tx-message/EventBox.tsx
index 0c5458a0b..a9eea6e7d 100644
--- a/src/lib/pages/tx-details/components/tx-message/EventBox.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/EventBox.tsx
@@ -106,8 +106,8 @@ export const EventBox = ({ event, msgIndex }: EventBoxProps) => {
       direction="column"
       borderRadius="8px"
       transition="all .25s ease-in-out"
-      backgroundColor="pebble.900"
-      _hover={{ backgroundColor: "pebble.800" }}
+      backgroundColor="gray.900"
+      _hover={{ backgroundColor: "gray.800" }}
     >
       <Flex
         align="center"
@@ -124,17 +124,12 @@ export const EventBox = ({ event, msgIndex }: EventBoxProps) => {
         p={4}
       >
         <Flex fontSize="14px" gap={2} fontWeight={500} align="center">
-          <CustomIcon
-            name="contract-list"
-            boxSize={4}
-            color="pebble.600"
-            m={0}
-          />
+          <CustomIcon name="contract-list" boxSize={4} color="gray.600" m={0} />
           {`[${msgIndex}] ${event.type}`}
         </Flex>
         <CustomIcon
           name="chevron-down"
-          color="pebble.600"
+          color="gray.600"
           boxSize={4}
           transform={expand ? "rotate(180deg)" : "rotate(0)"}
           transition="all .25s ease-in-out"
@@ -147,7 +142,7 @@ export const EventBox = ({ event, msgIndex }: EventBoxProps) => {
         transition="all .25s ease-in-out"
       >
         <Flex direction="column" p={4} pt={0} ref={measuredRef}>
-          <Box mb={4} h="1px" bgColor="pebble.700" />
+          <Box mb={4} h="1px" bgColor="gray.700" />
           <TxReceiptRender
             keyPrefix={msgIndex.toString() + event.type}
             variant="tx-page"
diff --git a/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx b/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
index f83c7b224..270881067 100644
--- a/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
@@ -308,7 +308,7 @@ export const TxMsgExpand = ({
         });
         onClick();
       }}
-      _hover={{ backgroundColor: "pebble.800" }}
+      _hover={{ backgroundColor: "gray.800" }}
       _after={{
         content: '""',
         position: "absolute",
@@ -317,17 +317,17 @@ export const TxMsgExpand = ({
         transform: "translateX(-50%)",
         h: "1px",
         w: "99%",
-        bg: "pebble.700",
+        bg: "gray.700",
       }}
     >
       <Flex align="center" gap={2} fontSize="16px" fontWeight={500}>
-        <CustomIcon name={msgIcon} boxSize={4} color="lilac.main" m={0} />
+        <CustomIcon name={msgIcon} boxSize={4} color="secondary.main" m={0} />
         {content}
-        {isIBC && <Tag variant="honeydew-dark">IBC</Tag>}
+        {isIBC && <Tag variant="accent-dark">IBC</Tag>}
       </Flex>
       <CustomIcon
         name="chevron-down"
-        color="pebble.600"
+        color="gray.600"
         boxSize={4}
         transform={isExpand ? "rotate(180deg)" : "rotate(0)"}
         transition="all .25s ease-in-out"
diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
index 0b332edb1..ddfde0891 100644
--- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
@@ -90,7 +90,7 @@ export const generateReceipts = (
               KB
               <CopyButton
                 value={details.wasm_byte_code}
-                variant="ghost-lilac"
+                variant="ghost-secondary"
                 buttonText="Click to Copy"
                 hasIcon={false}
                 mt={-1}
diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/renderUtils.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/renderUtils.tsx
index c74feca10..a1d9dc4cd 100644
--- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/renderUtils.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/renderUtils.tsx
@@ -35,7 +35,7 @@ export const getCommonReceiptHtml = <T extends HtmlType>({
   switch (true) {
     case value === null:
       return (
-        <Text variant="body2" color="pebble.600">
+        <Text variant="body2" color="gray.600">
           null
         </Text>
       );
diff --git a/src/lib/styles/theme/colors.ts b/src/lib/styles/theme/colors.ts
index d27e476df..62415d67d 100644
--- a/src/lib/styles/theme/colors.ts
+++ b/src/lib/styles/theme/colors.ts
@@ -39,9 +39,6 @@ const extendedColors: BasicColor = {
     dark: "#207966",
     background: "#102E28",
   },
-  info: {
-    main: "#29B6F6",
-  },
   background: {
     main: "#111117",
     overlay: "rgba(17, 17, 23, 0.7)",
@@ -51,7 +48,7 @@ const extendedColors: BasicColor = {
     dark: "#ADADC2",
     disabled: "#8A8AA5",
   },
-  violet: {
+  primary: {
     main: "#5942F3",
     light: "#9793F3",
     lighter: "#DCDBFB",
@@ -59,7 +56,14 @@ const extendedColors: BasicColor = {
     darker: "#292676",
     background: "#181733",
   },
-  honeydew: {
+  secondary: {
+    main: "#D8BEFC",
+    light: "#E8D8FD",
+    dark: "#A28FBD",
+    darker: "#6C5F7E",
+    background: "#36303F",
+  },
+  accent: {
     main: "#C6E141",
     light: "#DDED8D",
     lighter: "#E8F3B3",
@@ -67,14 +71,7 @@ const extendedColors: BasicColor = {
     darker: "#637121",
     background: "#3D470B",
   },
-  lilac: {
-    main: "#D8BEFC",
-    light: "#E8D8FD",
-    dark: "#A28FBD",
-    darker: "#6C5F7E",
-    background: "#36303F",
-  },
-  pebble: {
+  gray: {
     100: "#F7F2FE",
     400: "#ADADC2",
     500: "#8A8AA5",
diff --git a/src/lib/styles/theme/components/alert.ts b/src/lib/styles/theme/components/alert.ts
index f54696b39..5db88f7f2 100644
--- a/src/lib/styles/theme/components/alert.ts
+++ b/src/lib/styles/theme/components/alert.ts
@@ -3,19 +3,19 @@ import type { ColorProps, ComponentStyleConfig } from "@chakra-ui/react";
 const dupStyleKeys = ["title", "container", "description"];
 
 const generateVariantStyle = (
-  variant: "honeydew" | "violet" | "success" | "warning" | "error"
+  variant: "accent" | "primary" | "success" | "warning" | "error"
 ) => {
   let mainColor: ColorProps["color"];
   let bgColor: ColorProps["color"];
   let borderColor: ColorProps["color"];
 
   switch (variant) {
-    case "violet":
+    case "primary":
       mainColor = `${variant}.light`;
       bgColor = `${variant}.background`;
       borderColor = `${variant}.dark`;
       break;
-    case "honeydew":
+    case "accent":
     case "error":
     default:
       mainColor = `${variant}.main`;
@@ -46,7 +46,7 @@ export const Alert: ComponentStyleConfig = {
       letterSpacing: "0.4px",
     },
     container: {
-      bg: "pebble.800",
+      bg: "gray.800",
       border: "1px solid",
       borderRadius: "8px",
     },
@@ -57,8 +57,8 @@ export const Alert: ComponentStyleConfig = {
     },
   },
   variants: {
-    honeydew: generateVariantStyle("honeydew"),
-    violet: generateVariantStyle("violet"),
+    accent: generateVariantStyle("accent"),
+    primary: generateVariantStyle("primary"),
     success: generateVariantStyle("success"),
     warning: generateVariantStyle("warning"),
     error: generateVariantStyle("error"),
diff --git a/src/lib/styles/theme/components/badge.ts b/src/lib/styles/theme/components/badge.ts
index 39cc8433e..efccc613f 100644
--- a/src/lib/styles/theme/components/badge.ts
+++ b/src/lib/styles/theme/components/badge.ts
@@ -12,13 +12,13 @@ export const Badge: ComponentStyleConfig = {
     maxH: "20px",
   },
   variants: {
-    violet: { background: "violet.darker", color: "text.main" },
+    primary: { background: "primary.darker", color: "text.main" },
     gray: {
-      background: "pebble.700",
+      background: "gray.700",
       color: "text.main",
     },
-    lilac: {
-      background: "lilac.main",
+    secondary: {
+      background: "secondary.main",
       color: "background.main",
     },
   },
diff --git a/src/lib/styles/theme/components/button.ts b/src/lib/styles/theme/components/button.ts
index 844e618ea..b2c3c2dcc 100644
--- a/src/lib/styles/theme/components/button.ts
+++ b/src/lib/styles/theme/components/button.ts
@@ -1,19 +1,19 @@
 import type { ComponentStyleConfig } from "@chakra-ui/react";
 import { defineStyle } from "@chakra-ui/react";
 
-const pebble500 = "pebble.500";
-const pebble600 = "pebble.600";
-const pebble700 = "pebble.700";
-const pebble800 = "pebble.800";
-const violetLight = "violet.light";
-const violetDark = "violet.dark";
-const violetBg = "violet.background";
-const honeydewBg = "honeydew.background";
-const honeydewMain = "honeydew.main";
-const honeydewDarker = "honeydew.darker";
+const gray500 = "gray.500";
+const gray600 = "gray.600";
+const gray700 = "gray.700";
+const gray800 = "gray.800";
+const primaryLight = "primary.light";
+const primaryDark = "primary.dark";
+const primaryBg = "primary.background";
+const accentBg = "accent.background";
+const accentMain = "accent.main";
+const accentDarker = "accent.darker";
 const borderDefualt = "1px solid";
 const errorDark = "error.dark";
-const lilacBg = "lilac.background";
+const secondaryBg = "secondary.background";
 
 const generateStyle = ({
   basic,
@@ -72,33 +72,33 @@ export const Button: ComponentStyleConfig = {
   variants: {
     primary: generateStyle({
       basic: {
-        background: "violet.main",
+        background: "primary.main",
         color: "text.main",
         "& span": {
           color: "text.main",
         },
       },
       disabled: {
-        background: violetBg,
-        color: pebble600,
+        background: primaryBg,
+        color: gray600,
         "& span": {
-          color: pebble600,
+          color: gray600,
         },
       },
-      hoverBg: violetDark,
-      activeBg: violetLight,
+      hoverBg: primaryDark,
+      activeBg: primaryLight,
     }),
     "gray-solid": generateStyle({
       basic: {
-        background: pebble800,
+        background: gray800,
         color: "text.main",
       },
       disabled: {
-        background: pebble800,
-        color: pebble500,
+        background: gray800,
+        color: gray500,
       },
-      hoverBg: pebble700,
-      activeBg: pebble700,
+      hoverBg: gray700,
+      activeBg: gray700,
     }),
     error: generateStyle({
       basic: { background: "error.main", color: "black" },
@@ -112,30 +112,30 @@ export const Button: ComponentStyleConfig = {
     "outline-primary": generateStyle({
       basic: {
         border: borderDefualt,
-        borderColor: violetLight,
-        color: violetLight,
+        borderColor: primaryLight,
+        color: primaryLight,
         "> div": {
-          color: violetLight,
+          color: primaryLight,
         },
         "> svg": {
-          color: violetLight,
+          color: primaryLight,
         },
       },
       disabled: {
         border: borderDefualt,
-        borderColor: pebble700,
-        color: pebble600,
+        borderColor: gray700,
+        color: gray600,
         "> svg": {
-          color: pebble600,
+          color: gray600,
         },
       },
-      hoverBg: violetBg,
+      hoverBg: primaryBg,
       activeBg: "transparent",
     }),
     "outline-gray": generateStyle({
       basic: {
         border: borderDefualt,
-        borderColor: pebble600,
+        borderColor: gray600,
         color: "text.dark",
         "> svg": {
           color: "text.dark",
@@ -143,109 +143,109 @@ export const Button: ComponentStyleConfig = {
       },
       disabled: {
         border: borderDefualt,
-        borderColor: pebble700,
-        color: pebble600,
+        borderColor: gray700,
+        color: gray600,
         "> svg": {
-          color: pebble600,
+          color: gray600,
         },
       },
-      hoverBg: pebble700,
+      hoverBg: gray700,
       activeBg: "transparent",
     }),
-    "outline-info": generateStyle({
+    "outline-accent": generateStyle({
       basic: {
         border: borderDefualt,
-        borderColor: honeydewBg,
-        color: honeydewMain,
+        borderColor: accentBg,
+        color: accentMain,
         "> svg": {
-          color: honeydewMain,
+          color: accentMain,
         },
       },
       disabled: {
-        border: honeydewDarker,
-        color: honeydewDarker,
+        border: accentDarker,
+        color: accentDarker,
         "> svg": {
-          color: honeydewDarker,
+          color: accentDarker,
         },
       },
-      hoverBg: honeydewBg,
+      hoverBg: accentBg,
       activeBg: "transparent",
     }),
     "command-button": generateStyle({
       basic: {
         border: borderDefualt,
-        borderColor: honeydewDarker,
+        borderColor: accentDarker,
         color: "text.main",
       },
       disabled: {
-        border: honeydewDarker,
-        color: honeydewDarker,
+        border: accentDarker,
+        color: accentDarker,
       },
-      hoverBg: honeydewBg,
+      hoverBg: accentBg,
       activeBg: "transparent",
     }),
     "ghost-primary": generateStyle({
       basic: {
-        color: violetLight,
+        color: primaryLight,
         "> svg": {
-          color: "violetLight",
+          color: "primaryLight",
         },
       },
       disabled: {
-        color: violetDark,
+        color: primaryDark,
         "> svg": {
-          color: violetDark,
+          color: primaryDark,
         },
       },
-      hoverBg: violetBg,
+      hoverBg: primaryBg,
       activeBg: "transparent",
     }),
-    "ghost-lilac": generateStyle({
+    "ghost-secondary": generateStyle({
       basic: {
-        color: "lilac.main",
+        color: "secondary.main",
         "> svg": {
-          color: "lilac.main",
+          color: "secondary.main",
         },
       },
       disabled: {
-        color: lilacBg,
+        color: secondaryBg,
         "> svg": {
-          color: lilacBg,
+          color: secondaryBg,
         },
       },
-      hoverBg: lilacBg,
+      hoverBg: secondaryBg,
       activeBg: "transparent",
     }),
-    "ghost-info": generateStyle({
+    "ghost-accent": generateStyle({
       basic: {
-        color: honeydewMain,
+        color: accentMain,
         "> svg": {
-          color: honeydewMain,
+          color: accentMain,
         },
       },
       disabled: {
-        color: honeydewBg,
+        color: accentBg,
         "> svg": {
-          color: honeydewBg,
+          color: accentBg,
         },
       },
-      hoverBg: honeydewBg,
+      hoverBg: accentBg,
       activeBg: "transparent",
     }),
     "ghost-gray": generateStyle({
       basic: {
-        color: "pebble.400",
+        color: "gray.400",
         "> svg": {
-          color: "pebble.400",
+          color: "gray.400",
         },
       },
       disabled: {
-        color: pebble500,
+        color: gray500,
         "> svg": {
-          color: pebble500,
+          color: gray500,
         },
       },
-      hoverBg: pebble800,
+      hoverBg: gray800,
       activeBg: "transparent",
     }),
     "ghost-error": generateStyle({
diff --git a/src/lib/styles/theme/components/drawer.ts b/src/lib/styles/theme/components/drawer.ts
index 4cba3159b..d9694c33c 100644
--- a/src/lib/styles/theme/components/drawer.ts
+++ b/src/lib/styles/theme/components/drawer.ts
@@ -22,7 +22,7 @@ const baseStyle = definePartsStyle({
   },
   dialog: {
     borderRadius: "8px",
-    bg: "pebble.900",
+    bg: "gray.900",
   },
   closeButton: {
     top: "14px",
diff --git a/src/lib/styles/theme/components/form.ts b/src/lib/styles/theme/components/form.ts
index e73b0b51a..43c8354d9 100644
--- a/src/lib/styles/theme/components/form.ts
+++ b/src/lib/styles/theme/components/form.ts
@@ -27,7 +27,7 @@ export const Form: ComponentStyleConfig = {
             color: "text.disabled",
           },
           _active: {
-            color: "lilac.main",
+            color: "secondary.main",
           },
           "&.md-label, &.textarea-label": {
             transform: "scale(0.75) translateY(-20px)",
diff --git a/src/lib/styles/theme/components/input.ts b/src/lib/styles/theme/components/input.ts
index e93430c8f..757c6ae8d 100644
--- a/src/lib/styles/theme/components/input.ts
+++ b/src/lib/styles/theme/components/input.ts
@@ -6,18 +6,18 @@ export const Input: ComponentStyleConfig = {
       field: {
         color: "text.main",
         border: "1px solid",
-        borderColor: "pebble.700",
+        borderColor: "gray.700",
         background: "none",
         borderRadius: "8px",
         _hover: {
-          borderColor: "pebble.600",
+          borderColor: "gray.600",
         },
         _focusWithin: {
-          borderColor: "lilac.main",
+          borderColor: "secondary.main",
           borderWidth: "2px",
         },
         _active: {
-          borderColor: "lilac.main",
+          borderColor: "secondary.main",
           borderWidth: "2px",
         },
         _disabled: {
@@ -27,7 +27,7 @@ export const Input: ComponentStyleConfig = {
         _invalid: {
           borderColor: "error.main",
         },
-        _placeholder: { color: "pebble.600" },
+        _placeholder: { color: "gray.600" },
       },
     },
   },
diff --git a/src/lib/styles/theme/components/link.ts b/src/lib/styles/theme/components/link.ts
index b3520858a..cbf398fa6 100644
--- a/src/lib/styles/theme/components/link.ts
+++ b/src/lib/styles/theme/components/link.ts
@@ -2,7 +2,7 @@ import type { ComponentStyleConfig } from "@chakra-ui/react";
 
 export const Link: ComponentStyleConfig = {
   baseStyle: {
-    color: "lilac.main",
+    color: "secondary.main",
     fontSize: "14px",
     "&.ellipsis": {
       whiteSpace: "nowrap",
diff --git a/src/lib/styles/theme/components/menu.ts b/src/lib/styles/theme/components/menu.ts
index 7977ded75..4c524bbfa 100644
--- a/src/lib/styles/theme/components/menu.ts
+++ b/src/lib/styles/theme/components/menu.ts
@@ -9,20 +9,20 @@ const baseStyle = definePartsStyle({
     py: "2",
     borderRadius: "8px",
     border: "none",
-    bg: "pebble.900",
+    bg: "gray.900",
   },
   item: {
     color: "text.main",
     _hover: {
-      bg: "pebble.800",
+      bg: "gray.800",
     },
     _focus: {
-      bg: "pebble.800",
+      bg: "gray.800",
     },
     fontSize: "14px",
   },
   divider: {
-    borderColor: "pebble.700",
+    borderColor: "gray.700",
   },
 });
 
diff --git a/src/lib/styles/theme/components/modal.ts b/src/lib/styles/theme/components/modal.ts
index fc73a935f..1fe2b256a 100644
--- a/src/lib/styles/theme/components/modal.ts
+++ b/src/lib/styles/theme/components/modal.ts
@@ -22,7 +22,7 @@ const baseStyle = definePartsStyle({
   },
   dialog: {
     borderRadius: "8px",
-    bg: "pebble.900",
+    bg: "gray.900",
   },
   closeButton: {
     top: "14px",
diff --git a/src/lib/styles/theme/components/radio.ts b/src/lib/styles/theme/components/radio.ts
index 962f88715..a39618f1f 100644
--- a/src/lib/styles/theme/components/radio.ts
+++ b/src/lib/styles/theme/components/radio.ts
@@ -1,6 +1,6 @@
 import type { ComponentStyleConfig } from "@chakra-ui/react";
 
-const violetLight = "violet.light";
+const primaryLight = "primary.light";
 
 export const Radio: ComponentStyleConfig = {
   baseStyle: {
@@ -13,9 +13,9 @@ export const Radio: ComponentStyleConfig = {
     control: {
       borderColor: "text.dark",
       _checked: {
-        borderColor: violetLight,
+        borderColor: primaryLight,
         background: "transparent",
-        color: violetLight,
+        color: primaryLight,
         _before: {
           w: "10px",
           h: "10px",
@@ -47,12 +47,12 @@ export const Radio: ComponentStyleConfig = {
         py: "12px",
         border: "2px solid",
         borderRadius: "12px",
-        borderColor: "pebble.700",
-        bgColor: "pebble.900",
+        borderColor: "gray.700",
+        bgColor: "gray.900",
         overflowX: "scroll",
         "&[data-checked]": {
-          borderColor: violetLight,
-          bgColor: "violet.background",
+          borderColor: primaryLight,
+          bgColor: "primary.background",
         },
       },
       control: {
diff --git a/src/lib/styles/theme/components/select.ts b/src/lib/styles/theme/components/select.ts
index 6df5f7b41..c52e9843f 100644
--- a/src/lib/styles/theme/components/select.ts
+++ b/src/lib/styles/theme/components/select.ts
@@ -7,18 +7,18 @@ export const Select: ComponentStyleConfig = {
         color: "text.main",
         borderRadius: "8px",
         border: "1px solid",
-        borderColor: "pebble.700",
+        borderColor: "gray.700",
         fontSize: "16px",
         letterSpacing: "0.15px",
         height: "56px",
         bg: "background.main",
         _focus: {
           borderWidth: "2px",
-          borderColor: "lilac.main",
+          borderColor: "secondary.main",
         },
         _active: {
           borderWidth: "2px",
-          borderColor: "lilac.main",
+          borderColor: "secondary.main",
         },
       },
       icon: {
diff --git a/src/lib/styles/theme/components/spinner.ts b/src/lib/styles/theme/components/spinner.ts
index 5e7987565..ee36b3772 100644
--- a/src/lib/styles/theme/components/spinner.ts
+++ b/src/lib/styles/theme/components/spinner.ts
@@ -2,12 +2,12 @@ import type { ComponentStyleConfig } from "@chakra-ui/react";
 
 export const Spinner: ComponentStyleConfig = {
   baseStyle: {
-    color: "pebble.600",
+    color: "gray.600",
     speed: "0.65s",
   },
   variants: {
     primary: {
-      color: "violet.light",
+      color: "primary.light",
     },
     light: {
       color: "text.main",
diff --git a/src/lib/styles/theme/components/switch.ts b/src/lib/styles/theme/components/switch.ts
index e3631f189..566bb80eb 100644
--- a/src/lib/styles/theme/components/switch.ts
+++ b/src/lib/styles/theme/components/switch.ts
@@ -7,7 +7,7 @@ const { definePartsStyle, defineMultiStyleConfig } =
 const baseStyle = definePartsStyle({
   track: {
     _checked: {
-      bg: "violet.main",
+      bg: "primary.main",
     },
   },
 });
diff --git a/src/lib/styles/theme/components/tag.ts b/src/lib/styles/theme/components/tag.ts
index 3d7ddd5c5..b376e313a 100644
--- a/src/lib/styles/theme/components/tag.ts
+++ b/src/lib/styles/theme/components/tag.ts
@@ -4,30 +4,30 @@ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(tagAnatomy.keys);
 
-const honeydewDark = definePartsStyle({
+const accentDark = definePartsStyle({
   container: {
-    bg: "honeydew.dark",
-    color: "pebble.900",
+    bg: "accent.dark",
+    color: "gray.900",
   },
 });
 
-const honeydewDarker = definePartsStyle({
+const accentDarker = definePartsStyle({
   container: {
-    bg: "honeydew.darker",
+    bg: "accent.darker",
     color: "text.main",
   },
 });
 
-const violetLight = definePartsStyle({
+const primaryLight = definePartsStyle({
   container: {
-    bg: "violet.light",
-    color: "pebble.900",
+    bg: "primary.light",
+    color: "gray.900",
   },
 });
 
 const gray = definePartsStyle({
   container: {
-    bg: "pebble.700",
+    bg: "gray.700",
     color: "text.main",
   },
 });
@@ -57,13 +57,13 @@ export const Tag = defineMultiStyleConfig({
     },
   },
   variants: {
-    "violet-light": violetLight,
-    "honeydew-dark": honeydewDark,
-    "honeydew-darker": honeydewDarker,
+    "primary-light": primaryLight,
+    "accent-dark": accentDark,
+    "accent-darker": accentDarker,
     gray,
   },
   defaultProps: {
     size: "md",
-    variant: "honeydew-darker",
+    variant: "accent-darker",
   },
 });
diff --git a/src/lib/styles/theme/components/textarea.ts b/src/lib/styles/theme/components/textarea.ts
index d36af31da..bb5fef261 100644
--- a/src/lib/styles/theme/components/textarea.ts
+++ b/src/lib/styles/theme/components/textarea.ts
@@ -5,20 +5,20 @@ export const Textarea: ComponentStyleConfig = {
     "custom-outline": {
       color: "text.main",
       border: "1px solid",
-      borderColor: "pebble.700",
+      borderColor: "gray.700",
       background: "none",
       borderRadius: "8px",
       p: "16px 12px",
       height: "112px",
       _hover: {
-        borderColor: "pebble.700",
+        borderColor: "gray.700",
       },
       _focusWithin: {
-        borderColor: "lilac.main",
+        borderColor: "secondary.main",
         borderWidth: "2px",
       },
       _active: {
-        borderColor: "lilac.main",
+        borderColor: "secondary.main",
         borderWidth: "2px",
       },
       _disabled: {
@@ -28,7 +28,7 @@ export const Textarea: ComponentStyleConfig = {
       _invalid: {
         borderColor: "error.main",
       },
-      _placeholder: { color: "pebble.600" },
+      _placeholder: { color: "gray.600" },
     },
   },
   defaultProps: {
diff --git a/src/lib/styles/theme/components/tooltip.ts b/src/lib/styles/theme/components/tooltip.ts
index d2b9c7fd8..56185d993 100644
--- a/src/lib/styles/theme/components/tooltip.ts
+++ b/src/lib/styles/theme/components/tooltip.ts
@@ -12,7 +12,7 @@ export const Tooltip: ComponentStyleConfig = {
     fontWeight: 400,
     fontSize: "14px",
     maxW: "280px",
-    bg: "honeydew.darker",
-    [$arrowBg.variable]: "colors.honeydew.darker",
+    bg: "accent.darker",
+    [$arrowBg.variable]: "colors.accent.darker",
   },
 };
diff --git a/src/lib/utils/codePermission.ts b/src/lib/utils/codePermission.ts
index 419ace582..6afb8a039 100644
--- a/src/lib/utils/codePermission.ts
+++ b/src/lib/utils/codePermission.ts
@@ -32,7 +32,7 @@ export const getPermissionHelper = (
     instantiatePermission === AccessConfigPermission.EVERYBODY ||
     (address && permissionAddresses.includes(address))
       ? "success.main"
-      : "info.main";
+      : "text.dark";
 
   return { message: getMessage(), messageColor: getColor() };
 };

From 85ed008fd832a0ed5bf3ffc544c7e874883ea52e Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Mon, 22 May 2023 17:05:13 +0700
Subject: [PATCH 2/4] fix(components): refactor font weight

---
 CHANGELOG.md                                               | 1 +
 src/lib/app-fns/tx/resend.tsx                              | 2 +-
 src/lib/components/AssignMe.tsx                            | 2 +-
 src/lib/components/ContractCmdButton.tsx                   | 2 +-
 src/lib/components/CustomTab.tsx                           | 2 +-
 src/lib/components/ListSelection.tsx                       | 2 +-
 src/lib/components/TagSelection.tsx                        | 2 +-
 src/lib/components/TokenCard.tsx                           | 2 +-
 src/lib/components/TxFilterSelection.tsx                   | 2 +-
 src/lib/components/button/ShowMoreButton.tsx               | 2 +-
 src/lib/components/filter/FilterInput.tsx                  | 2 +-
 src/lib/components/icon/CustomIcon.tsx                     | 2 +-
 src/lib/components/modal/CodeSnippet.tsx                   | 2 +-
 src/lib/components/modal/UnsupportedTokensModal.tsx        | 2 +-
 src/lib/components/modal/contract/AddToOtherList.tsx       | 4 ++--
 .../components/modal/contract/ContractDetailsTemplate.tsx  | 2 +-
 src/lib/components/select-contract/ContractListCard.tsx    | 2 +-
 src/lib/components/state/InvalidState.tsx                  | 7 +------
 src/lib/components/state/ZeroState.tsx                     | 4 ++--
 src/lib/components/table/EditableCell.tsx                  | 4 ++--
 src/lib/components/table/contracts/EditTags.tsx            | 4 ++--
 .../components/table/transactions/TransactionsTableRow.tsx | 1 +
 src/lib/layout/Searchbar.tsx                               | 2 +-
 src/lib/layout/SubHeader.tsx                               | 4 ++--
 src/lib/layout/navbar/Expand.tsx                           | 2 +-
 .../account-details/components/asset/UserAssetInfoCard.tsx | 2 +-
 .../account-details/components/delegations/RadioCard.tsx   | 2 +-
 .../account-details/components/delegations/TotalCard.tsx   | 2 +-
 .../pages/account-details/components/tables/TokenCell.tsx  | 2 +-
 src/lib/pages/account-details/index.tsx                    | 2 +-
 src/lib/pages/contract-list/slug.tsx                       | 6 ++----
 src/lib/pages/faucet/index.tsx                             | 2 +-
 src/lib/pages/home/components/QuickMenu.tsx                | 2 +-
 src/lib/pages/instantiate/instantiate.tsx                  | 2 +-
 src/lib/pages/not-found/index.tsx                          | 7 +++----
 src/lib/pages/proposal/whitelist/index.tsx                 | 2 +-
 src/lib/pages/public-project/components/DetailHeader.tsx   | 2 +-
 .../pages/public-project/components/PublicProjectCard.tsx  | 2 +-
 38 files changed, 46 insertions(+), 52 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f862a2dce..582eca0b5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -41,6 +41,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#352](https://github.com/alleslabs/celatone-frontend/pull/352) Refactor/Abstract styling (color system, font weight and more)
 - [#347](https://github.com/alleslabs/celatone-frontend/pull/347) Move tx table accordion arrow to the front and refactor block txs table
 
 ### Bug fixes
diff --git a/src/lib/app-fns/tx/resend.tsx b/src/lib/app-fns/tx/resend.tsx
index a86bf0065..e9cd21d8f 100644
--- a/src/lib/app-fns/tx/resend.tsx
+++ b/src/lib/app-fns/tx/resend.tsx
@@ -64,7 +64,7 @@ export const resendTx = ({
         receiptInfo: {
           header: "Transaction Completed",
           description: (
-            <Text fontWeight="700">
+            <Text fontWeight={700}>
               Your transaction was successfully resent.
             </Text>
           ),
diff --git a/src/lib/components/AssignMe.tsx b/src/lib/components/AssignMe.tsx
index f452b8fde..5d983049a 100644
--- a/src/lib/components/AssignMe.tsx
+++ b/src/lib/components/AssignMe.tsx
@@ -15,7 +15,7 @@ export const AssignMe = ({ onClick, isDisable = false }: AssginMeProps) => {
       textAlign="right"
       mr={3}
       color={enabled ? "accent.main" : "gray.500"}
-      fontWeight="600"
+      fontWeight={700}
       variant="body3"
       cursor={enabled ? "pointer" : "not-allowed"}
       minW={16}
diff --git a/src/lib/components/ContractCmdButton.tsx b/src/lib/components/ContractCmdButton.tsx
index 5d741f151..d5dfb3c3e 100644
--- a/src/lib/components/ContractCmdButton.tsx
+++ b/src/lib/components/ContractCmdButton.tsx
@@ -14,7 +14,7 @@ export const ContractCmdButton = ({
     height="24px"
     px="10px"
     borderRadius="16px"
-    fontWeight="400"
+    fontWeight={400}
     onClick={onClickCmd}
   >
     {cmd}
diff --git a/src/lib/components/CustomTab.tsx b/src/lib/components/CustomTab.tsx
index d3b770ff3..de89c4d09 100644
--- a/src/lib/components/CustomTab.tsx
+++ b/src/lib/components/CustomTab.tsx
@@ -16,7 +16,7 @@ export const CustomTab = ({ count, ...restProps }: CustomTabProps) => {
       display="flex"
       alignItems="center"
       fontSize="14px"
-      fontWeight="700"
+      fontWeight={700}
       lineHeight="24px"
       letterSpacing="0.4px"
       variant="ghost-gray"
diff --git a/src/lib/components/ListSelection.tsx b/src/lib/components/ListSelection.tsx
index 03e797a4c..cf9b9efcd 100644
--- a/src/lib/components/ListSelection.tsx
+++ b/src/lib/components/ListSelection.tsx
@@ -175,7 +175,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
               position="absolute"
               top={0}
               left={0}
-              fontWeight="400"
+              fontWeight={400}
               color="text.dark"
               bgColor={labelBgColor}
               pointerEvents="none"
diff --git a/src/lib/components/TagSelection.tsx b/src/lib/components/TagSelection.tsx
index ad887b36f..3b9a344a7 100644
--- a/src/lib/components/TagSelection.tsx
+++ b/src/lib/components/TagSelection.tsx
@@ -182,7 +182,7 @@ export const TagSelection = observer(
                 position="absolute"
                 top={0}
                 left={0}
-                fontWeight="400"
+                fontWeight={400}
                 color="text.dark"
                 bgColor={labelBgColor}
                 pointerEvents="none"
diff --git a/src/lib/components/TokenCard.tsx b/src/lib/components/TokenCard.tsx
index bdf3dcbf1..f03db1c44 100644
--- a/src/lib/components/TokenCard.tsx
+++ b/src/lib/components/TokenCard.tsx
@@ -77,7 +77,7 @@ export const TokenCard = ({
         </Flex>
 
         <Flex direction="column">
-          <Text fontWeight="700" variant="body2">
+          <Text fontWeight={700} variant="body2">
             {formatUTokenWithPrecision(amount as U<Token>, precision, false)}
           </Text>
           <Text variant="body3" color="text.dark">
diff --git a/src/lib/components/TxFilterSelection.tsx b/src/lib/components/TxFilterSelection.tsx
index fbc208cc4..44ab688f9 100644
--- a/src/lib/components/TxFilterSelection.tsx
+++ b/src/lib/components/TxFilterSelection.tsx
@@ -159,7 +159,7 @@ export const TxFilterSelection = forwardRef<
               position="absolute"
               top={0}
               left={0}
-              fontWeight="400"
+              fontWeight={400}
               color="text.dark"
               bgColor={labelBgColor}
               pointerEvents="none"
diff --git a/src/lib/components/button/ShowMoreButton.tsx b/src/lib/components/button/ShowMoreButton.tsx
index ff5da9274..a96388e5c 100644
--- a/src/lib/components/button/ShowMoreButton.tsx
+++ b/src/lib/components/button/ShowMoreButton.tsx
@@ -24,7 +24,7 @@ export const ShowMoreButton = ({
     w="fit-content"
     onClick={setToggleShowMore}
   >
-    <Text variant="body3" color="secondary.main" fontWeight="700">
+    <Text variant="body3" color="secondary.main" fontWeight={700}>
       {toggleShowMore ? showLessText : showMoreText}
     </Text>
   </Button>
diff --git a/src/lib/components/filter/FilterInput.tsx b/src/lib/components/filter/FilterInput.tsx
index 4bf510c32..c6c96f07f 100644
--- a/src/lib/components/filter/FilterInput.tsx
+++ b/src/lib/components/filter/FilterInput.tsx
@@ -72,7 +72,7 @@ export const FilterInput = ({
       position="absolute"
       top={0}
       left={0}
-      fontWeight="400"
+      fontWeight={400}
       color="text.dark"
       bgColor="background.main"
       pointerEvents="none"
diff --git a/src/lib/components/icon/CustomIcon.tsx b/src/lib/components/icon/CustomIcon.tsx
index 02019b4ba..3c99d7c80 100644
--- a/src/lib/components/icon/CustomIcon.tsx
+++ b/src/lib/components/icon/CustomIcon.tsx
@@ -970,7 +970,7 @@ export const ICONS = {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M2.08451 7.16513H7.64746V1.56522C4.77078 1.97439 2.48854 4.26415 2.08451 7.16513ZM9.14746 0.599338V8.16513C9.14746 8.44127 8.9236 8.66513 8.64746 8.66513H1.11752C0.794022 8.66513 0.520846 8.41239 0.520846 8.08745C0.520846 3.6213 4.12605 0 8.57235 0C8.89585 0 9.14746 0.274396 9.14746 0.599338ZM11.4485 2.40963C14.3672 3.30016 16.5 6.03164 16.5 9.26543C16.5 13.2304 13.3017 16.4306 9.37338 16.4306C8.24526 16.4306 7.18039 16.1682 6.23456 15.6997L10.8659 11.0477C11.239 10.6729 11.4485 10.1655 11.4485 9.63665V2.40963ZM10.5595 0.683346C14.7614 1.26102 18 4.88593 18 9.26543C18 14.0529 14.136 17.9306 9.37338 17.9306C7.51147 17.9306 5.78615 17.3384 4.37714 16.3275C4.10037 16.1325 4.08239 15.7354 4.32322 15.4935L9.80283 9.98942C9.89612 9.89571 9.94849 9.76887 9.94849 9.63665V1.23936C9.94849 0.903584 10.2289 0.63641 10.5595 0.683346ZM3.42309 15.1999C3.21462 15.4129 2.87674 15.4274 2.66108 15.2252C1.24847 13.9002 0.281568 12.1058 0.00479698 10.0875C-0.0383368 9.75534 0.224055 9.47372 0.558336 9.47372H7.01017H7.05548H7.42168H7.92359C8.36858 9.47372 8.59188 10.0113 8.27782 10.3266L7.92359 10.6822L7.66515 10.9416L7.63317 10.9737L3.42309 15.1999ZM5.51589 10.9737L3.04931 13.4498C2.45716 12.7287 2.00363 11.8901 1.72792 10.9737H5.51589Z"
-        fill="#68688A"
+        fill="currentColor"
       />
     ),
     viewBox: "0 0 18 17.5",
diff --git a/src/lib/components/modal/CodeSnippet.tsx b/src/lib/components/modal/CodeSnippet.tsx
index 096507231..1ff95b059 100644
--- a/src/lib/components/modal/CodeSnippet.tsx
+++ b/src/lib/components/modal/CodeSnippet.tsx
@@ -208,7 +208,7 @@ execute();
         <ModalOverlay />
         <ModalContent w="840px">
           <ModalHeader>
-            <CustomIcon name="code" boxSize="6" />
+            <CustomIcon name="code" boxSize="6" color="gray.600" />
             <Heading as="h5" variant="h5">
               Code Snippet
             </Heading>
diff --git a/src/lib/components/modal/UnsupportedTokensModal.tsx b/src/lib/components/modal/UnsupportedTokensModal.tsx
index 01f1b8d97..7c7b29436 100644
--- a/src/lib/components/modal/UnsupportedTokensModal.tsx
+++ b/src/lib/components/modal/UnsupportedTokensModal.tsx
@@ -183,7 +183,7 @@ export const UnsupportedTokensModal = ({
             <Flex direction="column" gap={5}>
               {address && (
                 <Flex direction="row" gap={4}>
-                  <Text variant="body2" fontWeight="700">
+                  <Text variant="body2" fontWeight={700}>
                     {content.header}
                   </Text>
                   <ExplorerLink value={address} type={addressType} />
diff --git a/src/lib/components/modal/contract/AddToOtherList.tsx b/src/lib/components/modal/contract/AddToOtherList.tsx
index c57535749..7b0616cd1 100644
--- a/src/lib/components/modal/contract/AddToOtherList.tsx
+++ b/src/lib/components/modal/contract/AddToOtherList.tsx
@@ -41,10 +41,10 @@ export const AddToOtherListModal = observer(
         headerContent={
           <Flex pt="6" gap="36px">
             <Flex direction="column" gap="8px">
-              <Text variant="body2" fontWeight="600">
+              <Text variant="body2" fontWeight={500} color="text.dark">
                 Contract Name
               </Text>
-              <Text variant="body2" fontWeight="600">
+              <Text variant="body2" fontWeight={500} color="text.dark">
                 Contract Address
               </Text>
             </Flex>
diff --git a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx b/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
index c55f272e8..612ecb0d8 100644
--- a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
+++ b/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
@@ -92,7 +92,7 @@ export const ContractDetailsTemplateModal = ({
       subtitle={subtitle}
       headerContent={
         <Flex gap={4} alignItems="center" pt="6">
-          <Text variant="body2" fontWeight="600">
+          <Text variant="body2" fontWeight={500} color="text.dark">
             Contract Address
           </Text>
           <ExplorerLink
diff --git a/src/lib/components/select-contract/ContractListCard.tsx b/src/lib/components/select-contract/ContractListCard.tsx
index 44111e446..a460a0300 100644
--- a/src/lib/components/select-contract/ContractListCard.tsx
+++ b/src/lib/components/select-contract/ContractListCard.tsx
@@ -49,7 +49,7 @@ export const ContractListCard = ({
           <Text
             variant="body1"
             textColor={isDisabled ? "text.disabled" : "text.main"}
-            fontWeight="600"
+            fontWeight={700}
             textOverflow="ellipsis"
             overflow="hidden"
           >
diff --git a/src/lib/components/state/InvalidState.tsx b/src/lib/components/state/InvalidState.tsx
index 529331dbe..3e5e5f88c 100644
--- a/src/lib/components/state/InvalidState.tsx
+++ b/src/lib/components/state/InvalidState.tsx
@@ -30,12 +30,7 @@ export const InvalidState = ({ title }: InvalidStateProps) => {
       <Heading as="h5" variant="h5" my="8px">
         {title}
       </Heading>
-      <Text
-        variant="body2"
-        fontWeight="500"
-        color="text.dark"
-        textAlign="center"
-      >
+      <Text variant="body2" color="text.dark" textAlign="center">
         Please double-check your input and make sure you have selected the
         correct network.
       </Text>
diff --git a/src/lib/components/state/ZeroState.tsx b/src/lib/components/state/ZeroState.tsx
index e99bc0e53..32c8b65c1 100644
--- a/src/lib/components/state/ZeroState.tsx
+++ b/src/lib/components/state/ZeroState.tsx
@@ -22,7 +22,7 @@ interface ActionSectionProps {
 const ActionSection = ({ list, handleAction }: ActionSectionProps) =>
   list.value === formatSlugName(INSTANTIATED_LIST_NAME) ? (
     <Button
-      leftIcon={<CustomIcon name="add-new" boxSize="4" color="text.main" />}
+      leftIcon={<CustomIcon name="add-new" boxSize="4" />}
       onClick={handleAction}
     >
       Deploy New Contract
@@ -36,7 +36,7 @@ const ActionSection = ({ list, handleAction }: ActionSectionProps) =>
           list={list}
           buttonProps={{
             variant: "outline-primary",
-            leftIcon: <CustomIcon name="bookmark" color="gray.600" />,
+            leftIcon: <CustomIcon name="bookmark" />,
             children: "Save Contract",
             ml: 2,
           }}
diff --git a/src/lib/components/table/EditableCell.tsx b/src/lib/components/table/EditableCell.tsx
index a30fb48ee..f3ac57eb6 100644
--- a/src/lib/components/table/EditableCell.tsx
+++ b/src/lib/components/table/EditableCell.tsx
@@ -137,10 +137,10 @@ export const EditableCell = ({
                   else if (e.key === "Escape") handleCancel();
                 }}
               />
-              <Button size="sm" onClick={handleSave} variant="ghost-gray">
+              <Button size="sm" onClick={handleSave} variant="ghost">
                 <CustomIcon name="check" color="success.main" />
               </Button>
-              <Button onClick={handleCancel} size="sm" variant="ghost-gray">
+              <Button onClick={handleCancel} size="sm" variant="ghost">
                 <CustomIcon name="close" color="error.light" />
               </Button>
             </Flex>
diff --git a/src/lib/components/table/contracts/EditTags.tsx b/src/lib/components/table/contracts/EditTags.tsx
index 44458db76..5c3812d5e 100644
--- a/src/lib/components/table/contracts/EditTags.tsx
+++ b/src/lib/components/table/contracts/EditTags.tsx
@@ -36,10 +36,10 @@ export function EditTags({ contractLocalInfo }: EditTagsProps) {
       headerContent={
         <Flex pt="6" gap="36px">
           <Flex direction="column" gap="8px">
-            <Text variant="body2" fontWeight="600">
+            <Text variant="body2" fontWeight={500} color="text.dark">
               Contract Name
             </Text>
-            <Text variant="body2" fontWeight="600">
+            <Text variant="body2" fontWeight={500} color="text.dark">
               Contract Address
             </Text>
           </Flex>
diff --git a/src/lib/components/table/transactions/TransactionsTableRow.tsx b/src/lib/components/table/transactions/TransactionsTableRow.tsx
index 51034332c..fb68c42d8 100644
--- a/src/lib/components/table/transactions/TransactionsTableRow.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableRow.tsx
@@ -53,6 +53,7 @@ export const TransactionsTableRow = ({
               name="chevron-down"
               transform={isOpen ? "rotate(0)" : "rotate(-90deg)"}
               transition="all .25s ease-in-out"
+              color="gray.600"
             />
           )}
         </TableRow>
diff --git a/src/lib/layout/Searchbar.tsx b/src/lib/layout/Searchbar.tsx
index 3e71dfae7..43d322aff 100644
--- a/src/lib/layout/Searchbar.tsx
+++ b/src/lib/layout/Searchbar.tsx
@@ -61,7 +61,7 @@ const ResultItem = ({ type, value, handleSelectResult }: ResultItemProps) => {
 
   return (
     <ListItem p={2} borderBottomColor="gray.700" bg="gray.900">
-      <Text variant="body2" fontWeight="500" color="text.dark" p="8px">
+      <Text variant="body2" fontWeight={500} color="text.dark" p="8px">
         {text}
       </Text>
       {route && (
diff --git a/src/lib/layout/SubHeader.tsx b/src/lib/layout/SubHeader.tsx
index f962435f7..cd3418b91 100644
--- a/src/lib/layout/SubHeader.tsx
+++ b/src/lib/layout/SubHeader.tsx
@@ -59,7 +59,7 @@ const SubHeader = () => {
               />
               <Text
                 variant="body2"
-                fontWeight="600"
+                fontWeight={700}
                 color={isCurrentPage(item.slug) ? activeColor : "text.dark"}
               >
                 {item.name}
@@ -84,7 +84,7 @@ const SubHeader = () => {
               transition="all .25s ease-in-out"
             >
               <CustomIcon boxSize={3} name="admin" color="secondary.main" />
-              <Text variant="body2" fontWeight="600" color="secondary.main">
+              <Text variant="body2" fontWeight={700} color="secondary.main">
                 My Page
               </Text>
             </Flex>
diff --git a/src/lib/layout/navbar/Expand.tsx b/src/lib/layout/navbar/Expand.tsx
index 45a8a180c..8c70f6b55 100644
--- a/src/lib/layout/navbar/Expand.tsx
+++ b/src/lib/layout/navbar/Expand.tsx
@@ -29,7 +29,7 @@ export const ExpandNavMenu = ({
         }}
       >
         <Flex justifyContent="space-between" alignItems="center">
-          <Text py="2" variant="body3" fontWeight="600">
+          <Text py="2" variant="body3" fontWeight={700}>
             {item.category}
           </Text>
           {item.category === "Overview" && (
diff --git a/src/lib/pages/account-details/components/asset/UserAssetInfoCard.tsx b/src/lib/pages/account-details/components/asset/UserAssetInfoCard.tsx
index 99a2c8a25..9b2d18089 100644
--- a/src/lib/pages/account-details/components/asset/UserAssetInfoCard.tsx
+++ b/src/lib/pages/account-details/components/asset/UserAssetInfoCard.tsx
@@ -11,7 +11,7 @@ export const UserAssetInfoCard = ({
   value,
 }: UserAssetInfoCardProps) => (
   <Flex direction="column" width="fit-content">
-    <Text variant="body2" fontWeight="500" color="text.dark">
+    <Text variant="body2" fontWeight={500} color="text.dark">
       {helperText}
     </Text>
     <Heading
diff --git a/src/lib/pages/account-details/components/delegations/RadioCard.tsx b/src/lib/pages/account-details/components/delegations/RadioCard.tsx
index b277f7026..86de2ce2e 100644
--- a/src/lib/pages/account-details/components/delegations/RadioCard.tsx
+++ b/src/lib/pages/account-details/components/delegations/RadioCard.tsx
@@ -25,7 +25,7 @@ export const RadioCard = ({
     <Radio variant="card" value={value} overflowX="hidden">
       <Flex alignItems="center" gap={2} justifyContent="space-between">
         <Flex direction="column" gap={1}>
-          <Text variant="body2" textColor="gray.400" fontWeight="500">
+          <Text variant="body2" textColor="gray.400" fontWeight={500}>
             {value}
           </Text>
           {isLoading ? (
diff --git a/src/lib/pages/account-details/components/delegations/TotalCard.tsx b/src/lib/pages/account-details/components/delegations/TotalCard.tsx
index 7e553b521..2cef8663b 100644
--- a/src/lib/pages/account-details/components/delegations/TotalCard.tsx
+++ b/src/lib/pages/account-details/components/delegations/TotalCard.tsx
@@ -29,7 +29,7 @@ export const TotalCard = ({
     ) : (
       <>
         <Flex alignItems="center" gap={1}>
-          <Text variant="body2" fontWeight="500" textColor="text.dark">
+          <Text variant="body2" fontWeight={500} textColor="text.dark">
             {title}
           </Text>
           <Tooltip label={message}>
diff --git a/src/lib/pages/account-details/components/tables/TokenCell.tsx b/src/lib/pages/account-details/components/tables/TokenCell.tsx
index 2c1fdb395..e8200ce1a 100644
--- a/src/lib/pages/account-details/components/tables/TokenCell.tsx
+++ b/src/lib/pages/account-details/components/tables/TokenCell.tsx
@@ -23,7 +23,7 @@ export const TokenCell = ({ token }: TokenCellProps) => (
     />
     <Flex direction="column">
       <Flex gap={1} alignItems="center">
-        <Text variant="body2" fontWeight="700">
+        <Text variant="body2" fontWeight={700}>
           {formatUTokenWithPrecision(token.amount, token.precision || 0)}
         </Text>
         <Text variant="body2">
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index d235e9f46..efd0c8d7e 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -200,7 +200,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
               borderBottom="1px solid"
               borderBottomColor="gray.700"
             >
-              <Text variant="body2" fontWeight="500" color="text.dark">
+              <Text variant="body2" fontWeight={500} color="text.dark">
                 Total Account Value
               </Text>
               {isLoading ? (
diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx
index 417515fc0..a92a67a9a 100644
--- a/src/lib/pages/contract-list/slug.tsx
+++ b/src/lib/pages/contract-list/slug.tsx
@@ -100,7 +100,7 @@ const ContractsByList = observer(() => {
             variant="body2"
             className="ellipsis"
             width="250px"
-            fontWeight="600"
+            fontWeight={700}
             color="text.dark"
           >
             {contractListInfo.name}
@@ -120,9 +120,7 @@ const ContractsByList = observer(() => {
         <Flex gap={2}>
           {isInstantiatedByMe ? (
             <Button
-              leftIcon={
-                <CustomIcon name="add-new" color="text.main" boxSize="16px" />
-              }
+              leftIcon={<CustomIcon name="add-new" boxSize="16px" />}
               onClick={() => navigate({ pathname: "/deploy" })}
             >
               Deploy New Contract
diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx
index 50683d299..e4aeaaa45 100644
--- a/src/lib/pages/faucet/index.tsx
+++ b/src/lib/pages/faucet/index.tsx
@@ -162,7 +162,7 @@ const Faucet = () => {
         helperAction={
           <Text
             color="accent.main"
-            fontWeight="600"
+            fontWeight={700}
             variant="body3"
             cursor="pointer"
             alignSelf="flex-start"
diff --git a/src/lib/pages/home/components/QuickMenu.tsx b/src/lib/pages/home/components/QuickMenu.tsx
index 291673740..b4e0a0fed 100644
--- a/src/lib/pages/home/components/QuickMenu.tsx
+++ b/src/lib/pages/home/components/QuickMenu.tsx
@@ -94,7 +94,7 @@ export const QuickMenu = () => (
                   <Text variant="body1" fontWeight="800">
                     {item.title}
                   </Text>
-                  <Text textDecoration="none" variant="body2">
+                  <Text textDecoration="none" variant="body2" color="text.dark">
                     {item.subtitle}
                   </Text>
                 </Box>
diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
index 17ac8a9da..238c5ea54 100644
--- a/src/lib/pages/instantiate/instantiate.tsx
+++ b/src/lib/pages/instantiate/instantiate.tsx
@@ -321,7 +321,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             helperAction={
               <Text
                 color="accent.main"
-                fontWeight="600"
+                fontWeight={700}
                 variant="body3"
                 cursor="pointer"
                 onClick={() => {
diff --git a/src/lib/pages/not-found/index.tsx b/src/lib/pages/not-found/index.tsx
index a0c3c118b..314aba27a 100644
--- a/src/lib/pages/not-found/index.tsx
+++ b/src/lib/pages/not-found/index.tsx
@@ -22,7 +22,7 @@ const NotFoundPage = () => {
         align="center"
         direction="column"
         gap={2}
-        py={6}
+        py={12}
         mt={6}
       >
         <Image
@@ -30,13 +30,12 @@ const NotFoundPage = () => {
           alt="page not found"
           width="404px"
         />
-        <Heading variant="h5" as="h5" color="text.dark">
+        <Heading variant="h5" as="h5" color="text.main" mt={8}>
           This page is not found
         </Heading>
         <Text
-          color="text.disabled"
+          color="text.dark"
           variant="body2"
-          fontWeight={500}
           textAlign="center"
           lineHeight="24px"
         >
diff --git a/src/lib/pages/proposal/whitelist/index.tsx b/src/lib/pages/proposal/whitelist/index.tsx
index 4e170dbe1..eacdcbf7a 100644
--- a/src/lib/pages/proposal/whitelist/index.tsx
+++ b/src/lib/pages/proposal/whitelist/index.tsx
@@ -370,7 +370,7 @@ const ProposalToWhitelist = () => {
                     <Text
                       textAlign="right"
                       mr={3}
-                      fontWeight="600"
+                      fontWeight={700}
                       cursor="pointer"
                       variant="body3"
                       minW={16}
diff --git a/src/lib/pages/public-project/components/DetailHeader.tsx b/src/lib/pages/public-project/components/DetailHeader.tsx
index f0338d105..630c90ce8 100644
--- a/src/lib/pages/public-project/components/DetailHeader.tsx
+++ b/src/lib/pages/public-project/components/DetailHeader.tsx
@@ -42,7 +42,7 @@ export const DetailHeader = ({ details, slug }: DetailHeaderProps) => (
           variant="body2"
           className="ellipsis"
           width="250px"
-          fontWeight="600"
+          fontWeight={700}
           color="text.dark"
         >
           {details?.name}
diff --git a/src/lib/pages/public-project/components/PublicProjectCard.tsx b/src/lib/pages/public-project/components/PublicProjectCard.tsx
index 97374a625..c7a4590a5 100644
--- a/src/lib/pages/public-project/components/PublicProjectCard.tsx
+++ b/src/lib/pages/public-project/components/PublicProjectCard.tsx
@@ -65,7 +65,7 @@ export const PublicProjectCard = observer(
                 />
                 <Text
                   variant="body1"
-                  fontWeight="600"
+                  fontWeight={700}
                   textOverflow="ellipsis"
                   overflow="hidden"
                   mt="4px"

From 1ec3ac1f14166b139bc45a2660f601181f239f0a Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Mon, 22 May 2023 17:28:40 +0700
Subject: [PATCH 3/4] fix(components): replace color gray 500 with text
 disabled

---
 src/lib/components/AssignMe.tsx         | 2 +-
 src/lib/components/table/TableTitle.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/AssignMe.tsx b/src/lib/components/AssignMe.tsx
index 5d983049a..c2739439a 100644
--- a/src/lib/components/AssignMe.tsx
+++ b/src/lib/components/AssignMe.tsx
@@ -14,7 +14,7 @@ export const AssignMe = ({ onClick, isDisable = false }: AssginMeProps) => {
     <Text
       textAlign="right"
       mr={3}
-      color={enabled ? "accent.main" : "gray.500"}
+      color={enabled ? "accent.main" : "text.disabled"}
       fontWeight={700}
       variant="body3"
       cursor={enabled ? "pointer" : "not-allowed"}
diff --git a/src/lib/components/table/TableTitle.tsx b/src/lib/components/table/TableTitle.tsx
index 13f71a786..97f322230 100644
--- a/src/lib/components/table/TableTitle.tsx
+++ b/src/lib/components/table/TableTitle.tsx
@@ -21,7 +21,7 @@ export const TableTitle = ({
       </Heading>
       <Badge
         textColor={
-          count && typeof count !== "string" ? "text.main" : "gray.500"
+          count && typeof count !== "string" ? "text.main" : "text.disabled"
         }
       >
         {count}

From 181e7ae64544987a5feff41015224054bf67268b Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 23 May 2023 14:24:33 +0700
Subject: [PATCH 4/4] fix(components): fix as comment

---
 src/lib/app-fns/tx/clearAdmin.tsx                  |  2 +-
 src/lib/app-fns/tx/common/catchTxError.tsx         |  2 +-
 src/lib/app-fns/tx/execute.tsx                     |  2 +-
 src/lib/app-fns/tx/resend.tsx                      |  2 +-
 src/lib/app-fns/tx/submitProposal.tsx              |  2 +-
 src/lib/app-fns/tx/upload.tsx                      |  2 +-
 src/lib/components/ButtonCard.tsx                  |  2 +-
 src/lib/components/ConnectWalletAlert.tsx          |  4 ++--
 src/lib/components/ContractCmdButton.tsx           |  1 -
 src/lib/components/ContractSelectSection.tsx       |  4 ++--
 src/lib/components/CustomTab.tsx                   |  2 +-
 src/lib/components/DotSeparator.tsx                |  2 +-
 src/lib/components/DotSeperator.tsx                |  5 -----
 src/lib/components/ErrorMessageRender.tsx          |  2 +-
 src/lib/components/Expedited.tsx                   |  4 ++--
 src/lib/components/ExplorerLink.tsx                |  2 +-
 src/lib/components/InputWithIcon.tsx               |  2 +-
 src/lib/components/ListSelection.tsx               | 12 ++++++------
 src/lib/components/Loading.tsx                     |  4 ++--
 src/lib/components/OffChainForm.tsx                |  2 +-
 src/lib/components/PageContainer.tsx               |  2 +-
 src/lib/components/PublicDescription.tsx           |  2 +-
 src/lib/components/TagSelection.tsx                | 10 +++++-----
 src/lib/components/TokenCard.tsx                   |  4 ++--
 src/lib/components/TxFilterSelection.tsx           |  8 ++++----
 src/lib/components/ViewPermissionAddresses.tsx     |  2 +-
 src/lib/components/WasmPageContainer.tsx           |  2 +-
 src/lib/components/action-msg/SingleMsg.tsx        |  4 ++--
 src/lib/components/button/BackButton.tsx           |  6 +++---
 src/lib/components/button/CustomIconButton.tsx     |  4 ++--
 src/lib/components/button/RedoButton.tsx           |  2 +-
 src/lib/components/button/ShowMoreButton.tsx       |  2 +-
 src/lib/components/copy/Copier.tsx                 |  4 ++--
 src/lib/components/copy/CopyButton.tsx             |  2 +-
 src/lib/components/dropzone/index.tsx              |  2 +-
 src/lib/components/filter/FilterInput.tsx          |  2 +-
 src/lib/components/forms/AssetInput.tsx            |  2 +-
 src/lib/components/forms/FilterByPermission.tsx    |  2 +-
 src/lib/components/forms/SelectInput.tsx           |  2 +-
 src/lib/components/fund/index.tsx                  |  2 +-
 src/lib/components/fund/selectFund.tsx             |  2 +-
 src/lib/components/json/JsonInput.tsx              |  4 ++--
 src/lib/components/json/ViewFullMsgButton.tsx      |  2 +-
 src/lib/components/modal/ActionModal.tsx           |  8 ++++----
 src/lib/components/modal/CodeSnippet.tsx           |  4 ++--
 src/lib/components/modal/NoMobile.tsx              |  6 +++---
 src/lib/components/modal/RedoModal.tsx             |  4 ++--
 .../components/modal/UnsupportedTokensModal.tsx    |  6 +++---
 src/lib/components/modal/code/SaveNewCode.tsx      |  2 +-
 .../components/modal/contract/AddToOtherList.tsx   |  8 ++++----
 .../modal/contract/ContractDetailsTemplate.tsx     |  2 +-
 .../components/modal/contract/SaveNewContract.tsx  |  2 +-
 src/lib/components/pagination/index.tsx            |  2 +-
 src/lib/components/select-code/CodeSelect.tsx      |  4 ++--
 .../select-code/CodeSelectDrawerButton.tsx         |  2 +-
 .../components/select-code/CodeSelectSection.tsx   |  6 +++---
 .../select-contract/ContractListCard.tsx           |  2 +-
 .../select-contract/SelectContractAdmin.tsx        |  6 +++---
 .../select-contract/SelectContractInstantiator.tsx | 14 +++++++-------
 src/lib/components/state/DisconnectedState.tsx     |  6 +++---
 src/lib/components/state/EmptyState.tsx            |  2 +-
 src/lib/components/state/InvalidState.tsx          |  6 +++---
 src/lib/components/state/ZeroState.tsx             |  8 ++++----
 src/lib/components/stepper/StepperItem.tsx         |  2 +-
 src/lib/components/table/EditableCell.tsx          |  2 +-
 .../table/codes/CodesTableWithWallet.tsx           |  7 +------
 src/lib/components/table/contracts/EditTags.tsx    | 10 +++++-----
 src/lib/components/table/proposals/StatusChip.tsx  |  2 +-
 .../table/transactions/TransactionsTableRow.tsx    |  2 +-
 .../transactions/TransactionsTableWithWallet.tsx   |  2 +-
 src/lib/components/tx/modal/ButtonSection.tsx      |  6 +++---
 src/lib/components/tx/modal/index.tsx              |  4 ++--
 src/lib/components/upload/UploadSection.tsx        |  6 +++---
 .../components/upload/components/UploadCard.tsx    |  8 ++++----
 src/lib/components/wallet/WalletConnect.tsx        |  2 +-
 src/lib/layout/Footer.tsx                          |  4 ++--
 src/lib/layout/Header.tsx                          | 10 +++++-----
 src/lib/layout/Searchbar.tsx                       |  4 ++--
 src/lib/layout/index.tsx                           |  2 +-
 src/lib/layout/navbar/Expand.tsx                   | 12 ++++++------
 .../account-details/components/asset/index.tsx     |  2 +-
 src/lib/pages/account-details/index.tsx            |  4 ++--
 src/lib/pages/admin/index.tsx                      | 14 +++++---------
 .../block-details/components/BlockDetailsTop.tsx   |  2 +-
 .../pages/block-details/components/BlockInfo.tsx   |  2 +-
 src/lib/pages/blocks/components/BlocksRow.tsx      |  2 +-
 .../code-details/components/table/NoContracts.tsx  |  6 +++---
 src/lib/pages/code-details/index.tsx               |  4 +---
 .../pages/codes/components/MySavedCodesSection.tsx |  2 +-
 .../codes/components/MyStoredCodesSection.tsx      |  2 +-
 src/lib/pages/codes/index.tsx                      |  6 +++---
 .../contract-details/components/CommandSection.tsx |  2 +-
 .../contract-description/UserContractDesc.tsx      |  4 ++--
 .../components/contract-description/index.tsx      |  2 +-
 src/lib/pages/contract-list/index.tsx              |  2 +-
 src/lib/pages/contract-list/slug.tsx               |  4 ++--
 src/lib/pages/deploy/index.tsx                     |  6 +++---
 src/lib/pages/execute/components/ExecuteArea.tsx   |  8 ++++----
 src/lib/pages/execute/index.tsx                    |  4 ++--
 src/lib/pages/faucet/index.tsx                     |  4 ++--
 src/lib/pages/home/components/QuickMenu.tsx        |  2 +-
 src/lib/pages/home/components/RecentActivities.tsx |  2 +-
 src/lib/pages/home/index.tsx                       |  2 +-
 src/lib/pages/instantiate/completed.tsx            |  2 +-
 .../pages/instantiate/component/FailedModal.tsx    |  8 ++++----
 src/lib/pages/instantiate/instantiate.tsx          |  8 ++++----
 .../pages/migrate/components/MigrateContract.tsx   |  6 +++---
 .../pages/migrate/components/MigrateOptions.tsx    |  4 ++--
 src/lib/pages/migrate/components/UploadNewCode.tsx |  2 +-
 src/lib/pages/migrate/index.tsx                    | 12 ++++++------
 src/lib/pages/network-overview/index.tsx           |  6 +++---
 src/lib/pages/past-txs/index.tsx                   |  2 +-
 src/lib/pages/proposal/components/Footer.tsx       |  2 +-
 src/lib/pages/proposal/utils/getAlert.tsx          |  8 ++++----
 .../proposals/components/ProposalTextCell.tsx      |  2 +-
 .../proposals/components/ProposalTypeFilter.tsx    |  2 +-
 .../pages/public-project/components/AllProject.tsx |  2 +-
 .../public-project/components/DetailHeader.tsx     |  2 +-
 .../components/PublicProjectCard.tsx               |  4 ++--
 src/lib/pages/query/index.tsx                      |  4 ++--
 src/lib/pages/recent-codes/index.tsx               |  2 +-
 src/lib/pages/tx-details/components/TxHeader.tsx   |  2 +-
 src/lib/pages/upload/index.tsx                     |  4 ++--
 123 files changed, 237 insertions(+), 254 deletions(-)
 delete mode 100644 src/lib/components/DotSeperator.tsx

diff --git a/src/lib/app-fns/tx/clearAdmin.tsx b/src/lib/app-fns/tx/clearAdmin.tsx
index 2ffd2d9dc..893b259ee 100644
--- a/src/lib/app-fns/tx/clearAdmin.tsx
+++ b/src/lib/app-fns/tx/clearAdmin.tsx
@@ -70,7 +70,7 @@ export const clearAdminTx = ({
             <CustomIcon
               name="check-circle-solid"
               color="success.main"
-              boxSize="5"
+              boxSize={5}
             />
           ),
         },
diff --git a/src/lib/app-fns/tx/common/catchTxError.tsx b/src/lib/app-fns/tx/common/catchTxError.tsx
index b5b945a4a..c97c07e90 100644
--- a/src/lib/app-fns/tx/common/catchTxError.tsx
+++ b/src/lib/app-fns/tx/common/catchTxError.tsx
@@ -52,7 +52,7 @@ export const catchTxError = (
           <CustomIcon
             name="alert-circle-solid"
             color="error.light"
-            boxSize="5"
+            boxSize={5}
           />
         ),
       },
diff --git a/src/lib/app-fns/tx/execute.tsx b/src/lib/app-fns/tx/execute.tsx
index 61d491f5f..75cf17da6 100644
--- a/src/lib/app-fns/tx/execute.tsx
+++ b/src/lib/app-fns/tx/execute.tsx
@@ -88,7 +88,7 @@ export const executeContractTx = ({
             <CustomIcon
               name="check-circle-solid"
               color="success.main"
-              boxSize="5"
+              boxSize={5}
             />
           ),
         },
diff --git a/src/lib/app-fns/tx/resend.tsx b/src/lib/app-fns/tx/resend.tsx
index e9cd21d8f..5f5140bd7 100644
--- a/src/lib/app-fns/tx/resend.tsx
+++ b/src/lib/app-fns/tx/resend.tsx
@@ -72,7 +72,7 @@ export const resendTx = ({
             <CustomIcon
               name="check-circle-solid"
               color="success.main"
-              boxSize="5"
+              boxSize={5}
             />
           ),
         },
diff --git a/src/lib/app-fns/tx/submitProposal.tsx b/src/lib/app-fns/tx/submitProposal.tsx
index 96ef893c1..25c84353e 100644
--- a/src/lib/app-fns/tx/submitProposal.tsx
+++ b/src/lib/app-fns/tx/submitProposal.tsx
@@ -90,7 +90,7 @@ export const submitProposalTx = ({
             <CustomIcon
               name="submit-proposal-solid"
               color="gray.600"
-              boxSize="5"
+              boxSize={5}
             />
           ),
         },
diff --git a/src/lib/app-fns/tx/upload.tsx b/src/lib/app-fns/tx/upload.tsx
index 5f925a9af..1045c9b76 100644
--- a/src/lib/app-fns/tx/upload.tsx
+++ b/src/lib/app-fns/tx/upload.tsx
@@ -95,7 +95,7 @@ export const uploadContractTx = ({
             </>
           ),
           headerIcon: (
-            <CustomIcon name="upload-cloud" boxSize="5" color="gray.600" />
+            <CustomIcon name="upload-cloud" boxSize={5} color="gray.600" />
           ),
         },
         actionVariant: isMigrate ? "upload-migrate" : "upload",
diff --git a/src/lib/components/ButtonCard.tsx b/src/lib/components/ButtonCard.tsx
index 6237ee595..38d69cefa 100644
--- a/src/lib/components/ButtonCard.tsx
+++ b/src/lib/components/ButtonCard.tsx
@@ -20,7 +20,7 @@ export const ButtonCard = ({
 }: ButtonCardProps) => (
   <Flex
     aria-disabled={disabled}
-    p="24px"
+    p={6}
     align="center"
     justify="space-between"
     onClick={!disabled ? onClick : undefined}
diff --git a/src/lib/components/ConnectWalletAlert.tsx b/src/lib/components/ConnectWalletAlert.tsx
index a4e99b591..967824616 100644
--- a/src/lib/components/ConnectWalletAlert.tsx
+++ b/src/lib/components/ConnectWalletAlert.tsx
@@ -38,10 +38,10 @@ export const ConnectWalletAlert = ({
       variant="accent"
       alignItems="center"
       justifyContent="space-between"
-      py="12px"
+      py={3}
     >
       <Flex gap={2}>
-        <CustomIcon name="wallet-solid" boxSize="4" />
+        <CustomIcon name="wallet-solid" boxSize={4} />
         <Box>
           <AlertTitle>{title}</AlertTitle>
           <AlertDescription>{subtitle}</AlertDescription>
diff --git a/src/lib/components/ContractCmdButton.tsx b/src/lib/components/ContractCmdButton.tsx
index d5dfb3c3e..5d1153244 100644
--- a/src/lib/components/ContractCmdButton.tsx
+++ b/src/lib/components/ContractCmdButton.tsx
@@ -12,7 +12,6 @@ export const ContractCmdButton = ({
     variant="command-button"
     fontSize="12px"
     height="24px"
-    px="10px"
     borderRadius="16px"
     fontWeight={400}
     onClick={onClickCmd}
diff --git a/src/lib/components/ContractSelectSection.tsx b/src/lib/components/ContractSelectSection.tsx
index 7a7b0b999..036da5ab6 100644
--- a/src/lib/components/ContractSelectSection.tsx
+++ b/src/lib/components/ContractSelectSection.tsx
@@ -197,7 +197,7 @@ export const ContractSelectSection = observer(
         mb={style.container}
         borderWidth="thin"
         borderColor="gray.800"
-        p="16px"
+        p={4}
         borderRadius="8px"
         fontSize="12px"
         justify="space-between"
@@ -235,7 +235,7 @@ export const ContractSelectSection = observer(
               label={contractState.label}
             />
           </Flex>
-          <Flex gap="8px" alignItems="center">
+          <Flex gap={2} alignItems="center">
             {mode === "all-lists" && contractState.isValid && (
               <ContractDetailsButton
                 contractAddress={contractAddress}
diff --git a/src/lib/components/CustomTab.tsx b/src/lib/components/CustomTab.tsx
index de89c4d09..7d9f7141e 100644
--- a/src/lib/components/CustomTab.tsx
+++ b/src/lib/components/CustomTab.tsx
@@ -34,7 +34,7 @@ export const CustomTab = ({ count, ...restProps }: CustomTabProps) => {
       {tabProps.children}
 
       {count !== undefined && (
-        <Badge variant={isSelected ? "primary" : "gray"} ml="6px">
+        <Badge variant={isSelected ? "primary" : "gray"} ml={2}>
           {count}
         </Badge>
       )}
diff --git a/src/lib/components/DotSeparator.tsx b/src/lib/components/DotSeparator.tsx
index 1e6778911..0ffeb9d48 100644
--- a/src/lib/components/DotSeparator.tsx
+++ b/src/lib/components/DotSeparator.tsx
@@ -1,5 +1,5 @@
 import { Box } from "@chakra-ui/react";
 
 export const DotSeparator = () => (
-  <Box bg="secondary.darker" borderRadius="50%" w="4px" h="4px" />
+  <Box bg="secondary.darker" borderRadius="50%" w={1} h={1} />
 );
diff --git a/src/lib/components/DotSeperator.tsx b/src/lib/components/DotSeperator.tsx
deleted file mode 100644
index 1e6778911..000000000
--- a/src/lib/components/DotSeperator.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Box } from "@chakra-ui/react";
-
-export const DotSeparator = () => (
-  <Box bg="secondary.darker" borderRadius="50%" w="4px" h="4px" />
-);
diff --git a/src/lib/components/ErrorMessageRender.tsx b/src/lib/components/ErrorMessageRender.tsx
index 7d67ee009..09d1bb997 100644
--- a/src/lib/components/ErrorMessageRender.tsx
+++ b/src/lib/components/ErrorMessageRender.tsx
@@ -12,7 +12,7 @@ export const ErrorMessageRender = ({
   ...restProps
 }: ErrorMessageRenderProps) => (
   <Flex gap={2} {...restProps}>
-    <CustomIcon name="alert-circle-solid" color="error.main" boxSize="3" />
+    <CustomIcon name="alert-circle-solid" color="error.main" boxSize={3} />
     <Text variant="body3" color="error.main">
       {error}
     </Text>
diff --git a/src/lib/components/Expedited.tsx b/src/lib/components/Expedited.tsx
index 50acc297c..e4423319c 100644
--- a/src/lib/components/Expedited.tsx
+++ b/src/lib/components/Expedited.tsx
@@ -23,8 +23,8 @@ export const Expedited = ({ isActiveExpedited }: ExpeditedProps) => (
     <Flex align="center">
       <CustomIcon
         name="expedited"
-        boxSize="4"
-        ml="0"
+        boxSize={4}
+        ml={0}
         color={isActiveExpedited ? "accent.main" : "gray.400"}
       />
       <Text
diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx
index 240de5a3b..1cf9b4e5b 100644
--- a/src/lib/components/ExplorerLink.tsx
+++ b/src/lib/components/ExplorerLink.tsx
@@ -203,7 +203,7 @@ export const ExplorerLink = ({
             value={copyValue || value}
             copyLabel={copyValue ? `${getCopyLabel(type)} Copied!` : undefined}
             display={showCopyOnHover ? "none" : "block"}
-            ml="8px"
+            ml={2}
             amptrackSection={ampCopierSection}
           />
         </>
diff --git a/src/lib/components/InputWithIcon.tsx b/src/lib/components/InputWithIcon.tsx
index 13b3337d1..402cf8f9e 100644
--- a/src/lib/components/InputWithIcon.tsx
+++ b/src/lib/components/InputWithIcon.tsx
@@ -29,7 +29,7 @@ const InputWithIcon = ({
       size={size}
       onClick={action ? () => AmpTrack(AmpEvent.USE_SEARCH_INPUT) : undefined}
     />
-    <InputRightElement h="56px" alignItems="center" mr="1">
+    <InputRightElement h="56px" alignItems="center" mr={1}>
       <CustomIcon name="search" color="gray.600" />
     </InputRightElement>
   </InputGroup>
diff --git a/src/lib/components/ListSelection.tsx b/src/lib/components/ListSelection.tsx
index cf9b9efcd..2edfae202 100644
--- a/src/lib/components/ListSelection.tsx
+++ b/src/lib/components/ListSelection.tsx
@@ -134,7 +134,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
             overflowX="scroll"
           >
             {result.length > 0 && (
-              <Flex alignItems="center" pl="2">
+              <Flex alignItems="center" pl={2}>
                 {[...result].map((option) => (
                   <Flex
                     display="inline-block"
@@ -149,7 +149,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                       mr={1}
                     >
                       {option.label}
-                      <CustomIcon name="close" boxSize="3" />
+                      <CustomIcon name="close" boxSize={3} />
                     </Tag>
                   </Flex>
                 ))}
@@ -195,8 +195,8 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
             <List
               borderRadius="8px"
               bg="gray.800"
-              px="2"
-              py="1"
+              px={2}
+              py={1}
               mt={0}
               position="absolute"
               zIndex="2"
@@ -222,7 +222,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                         mr={2}
                         name="check"
                         color="gray.600"
-                        boxSize="3"
+                        boxSize={3}
                       />
                     )}
                   </Flex>
@@ -241,7 +241,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                       onClick={() => setEnableOutside(false)}
                     >
                       <Flex alignItems="center" gap={2}>
-                        <CustomIcon name="plus" color="text.dark" boxSize="3" />
+                        <CustomIcon name="plus" color="text.dark" boxSize={3} />
                         <Text variant="body2">Create New List </Text>
                       </Flex>
                     </ListItem>
diff --git a/src/lib/components/Loading.tsx b/src/lib/components/Loading.tsx
index eeb87be83..ad137e31c 100644
--- a/src/lib/components/Loading.tsx
+++ b/src/lib/components/Loading.tsx
@@ -5,12 +5,12 @@ export const Loading = () => (
     borderY="1px solid"
     borderColor="gray.700"
     width="full"
-    py="60px"
+    py={15}
     my={12}
     flexDirection="column"
     alignItems="center"
   >
     <Spinner size="xl" />
-    <Text mt="20px">Loading ...</Text>
+    <Text mt={5}>Loading ...</Text>
   </Flex>
 );
diff --git a/src/lib/components/OffChainForm.tsx b/src/lib/components/OffChainForm.tsx
index dc301e854..a1c692525 100644
--- a/src/lib/components/OffChainForm.tsx
+++ b/src/lib/components/OffChainForm.tsx
@@ -39,7 +39,7 @@ export const OffChainForm = <T extends OffchainDetail>({
   errors,
   labelBgColor = "background.main",
 }: OffChainFormProps<T>) => (
-  <VStack gap="16px" w="full">
+  <VStack gap={4} w="full">
     <ControllerInput
       name={"name" as FieldPath<T>}
       control={control}
diff --git a/src/lib/components/PageContainer.tsx b/src/lib/components/PageContainer.tsx
index f4b8cd380..d1130c281 100644
--- a/src/lib/components/PageContainer.tsx
+++ b/src/lib/components/PageContainer.tsx
@@ -6,7 +6,7 @@ type PageContainerProps = {
 };
 
 const PageContainer = ({ children }: PageContainerProps) => (
-  <Box as="main" p="48px" overflowX="hidden" minH="inherit">
+  <Box as="main" p={12} overflowX="hidden" minH="inherit">
     {children}
   </Box>
 );
diff --git a/src/lib/components/PublicDescription.tsx b/src/lib/components/PublicDescription.tsx
index a3266f2df..a84040874 100644
--- a/src/lib/components/PublicDescription.tsx
+++ b/src/lib/components/PublicDescription.tsx
@@ -39,7 +39,7 @@ export const PublicDescription = ({
     >
       <Flex align="center" gap={1} h="32px">
         {icon}
-        <Text variant="body2" fontWeight={500} color="text.dark" mt="1px">
+        <Text variant="body2" fontWeight={500} color="text.dark">
           {title}
         </Text>
       </Flex>
diff --git a/src/lib/components/TagSelection.tsx b/src/lib/components/TagSelection.tsx
index 3b9a344a7..b5c9d62c2 100644
--- a/src/lib/components/TagSelection.tsx
+++ b/src/lib/components/TagSelection.tsx
@@ -145,7 +145,7 @@ export const TagSelection = observer(
               overflowX="scroll"
             >
               {result.length > 0 && (
-                <Flex alignItems="center" pl="2">
+                <Flex alignItems="center" pl={2}>
                   {result.map((option) => (
                     <Flex
                       display="inline-block"
@@ -154,7 +154,7 @@ export const TagSelection = observer(
                     >
                       <Tag gap={1} mr={1} cursor="pointer">
                         {option}
-                        <CustomIcon name="close" boxSize="3" />
+                        <CustomIcon name="close" boxSize={3} />
                       </Tag>
                     </Flex>
                   ))}
@@ -202,8 +202,8 @@ export const TagSelection = observer(
               <List
                 borderRadius="8px"
                 bg="gray.800"
-                px="2"
-                py="1"
+                px={2}
+                py={1}
                 mt={0}
                 position="absolute"
                 zIndex="2"
@@ -247,7 +247,7 @@ export const TagSelection = observer(
                           mr={2}
                           name="check"
                           color="gray.600"
-                          boxSize="3"
+                          boxSize={3}
                         />
                       )}
                     </Flex>
diff --git a/src/lib/components/TokenCard.tsx b/src/lib/components/TokenCard.tsx
index f03db1c44..35b93c4bd 100644
--- a/src/lib/components/TokenCard.tsx
+++ b/src/lib/components/TokenCard.tsx
@@ -63,7 +63,7 @@ export const TokenCard = ({
           >
             {symbol}
           </Text>
-          <Badge variant="gray" ml="6px">
+          <Badge variant="gray" ml={2}>
             {price ? formatPrice(price as USD<number>) : "N/A"}
           </Badge>
           <Copier
@@ -71,7 +71,7 @@ export const TokenCard = ({
             value={id}
             copyLabel="Token ID Copied!"
             display="none"
-            ml="1px"
+            ml={1}
             amptrackSection={amptrackSection}
           />
         </Flex>
diff --git a/src/lib/components/TxFilterSelection.tsx b/src/lib/components/TxFilterSelection.tsx
index 44ab688f9..87941048e 100644
--- a/src/lib/components/TxFilterSelection.tsx
+++ b/src/lib/components/TxFilterSelection.tsx
@@ -117,7 +117,7 @@ export const TxFilterSelection = forwardRef<
             overflowX="scroll"
           >
             {result.length > 0 && (
-              <Flex alignItems="center" pl="2">
+              <Flex alignItems="center" pl={2}>
                 {[...result].reverse().map((option) => (
                   <Flex
                     display="inline-block"
@@ -132,7 +132,7 @@ export const TxFilterSelection = forwardRef<
                       cursor="pointer"
                     >
                       {displayActionValue(option)}
-                      <CustomIcon name="close" boxSize="3" />
+                      <CustomIcon name="close" boxSize={3} />
                     </Tag>
                   </Flex>
                 ))}
@@ -179,8 +179,8 @@ export const TxFilterSelection = forwardRef<
             <List
               borderRadius="8px"
               bg="gray.900"
-              px="2"
-              py="1"
+              px={2}
+              py={1}
               mt={0}
               position="absolute"
               zIndex="2"
diff --git a/src/lib/components/ViewPermissionAddresses.tsx b/src/lib/components/ViewPermissionAddresses.tsx
index 0d24070b2..b3e44d6a6 100644
--- a/src/lib/components/ViewPermissionAddresses.tsx
+++ b/src/lib/components/ViewPermissionAddresses.tsx
@@ -50,7 +50,7 @@ export const ViewPermissionAddresses = ({
           rightIcon={
             <CustomIcon
               name={viewAll ? "chevron-up" : "chevron-down"}
-              boxSize="3"
+              boxSize={3}
             />
           }
         >
diff --git a/src/lib/components/WasmPageContainer.tsx b/src/lib/components/WasmPageContainer.tsx
index 09f24845c..7abf4316a 100644
--- a/src/lib/components/WasmPageContainer.tsx
+++ b/src/lib/components/WasmPageContainer.tsx
@@ -15,7 +15,7 @@ const WasmPageContainer = ({
     align="center"
     width={width}
     mx="auto"
-    py="48px"
+    py={12}
     direction="column"
   >
     {children}
diff --git a/src/lib/components/action-msg/SingleMsg.tsx b/src/lib/components/action-msg/SingleMsg.tsx
index 758006a2f..886fea443 100644
--- a/src/lib/components/action-msg/SingleMsg.tsx
+++ b/src/lib/components/action-msg/SingleMsg.tsx
@@ -68,7 +68,7 @@ export const SingleMsg = ({
           </Text>
           <Tooltip label={`Token ID: ${token.id}`} maxW="240px">
             <Flex cursor="pointer">
-              <CustomIcon name="info-circle" boxSize="3" color="gray.600" />
+              <CustomIcon name="info-circle" boxSize={3} color="gray.600" />
             </Flex>
           </Tooltip>
           <Copier
@@ -76,7 +76,7 @@ export const SingleMsg = ({
             value={token.id}
             copyLabel="Token ID Copied!"
             display="none"
-            ml="4px"
+            ml={1}
           />
         </Flex>
       ))}
diff --git a/src/lib/components/button/BackButton.tsx b/src/lib/components/button/BackButton.tsx
index 710d28d07..9f1cac6ca 100644
--- a/src/lib/components/button/BackButton.tsx
+++ b/src/lib/components/button/BackButton.tsx
@@ -12,16 +12,16 @@ export const BackButton = (props: ButtonProps) => {
     <Button
       variant="ghost-secondary"
       size="sm"
-      mb="8px"
+      mb={2}
       p="unset"
-      pr="2"
+      pr={2}
       onClick={() => {
         AmpTrack(AmpEvent.USE_BACK_BUTTON);
         router.back();
       }}
       {...props}
     >
-      <CustomIcon name="chevron-left" boxSize="3" mr={2} />
+      <CustomIcon name="chevron-left" boxSize={3} mr={2} />
       BACK
     </Button>
   );
diff --git a/src/lib/components/button/CustomIconButton.tsx b/src/lib/components/button/CustomIconButton.tsx
index 6c1d9fc20..45c1192fd 100644
--- a/src/lib/components/button/CustomIconButton.tsx
+++ b/src/lib/components/button/CustomIconButton.tsx
@@ -17,7 +17,7 @@ export const CustomIconButton = ({
   <Button
     variant="ghost-gray"
     size="xs"
-    px="1"
+    px={1}
     minWidth="32px"
     minHeight="32px"
     height="full"
@@ -30,7 +30,7 @@ export const CustomIconButton = ({
       alignItems="center"
       onClick={onClick}
     >
-      <CustomIcon name={icon} boxSize="5" color="gray.600" />
+      <CustomIcon name={icon} boxSize={5} color="gray.600" />
     </Link>
   </Button>
 );
diff --git a/src/lib/components/button/RedoButton.tsx b/src/lib/components/button/RedoButton.tsx
index 2240a8abd..40ecb234c 100644
--- a/src/lib/components/button/RedoButton.tsx
+++ b/src/lib/components/button/RedoButton.tsx
@@ -27,7 +27,7 @@ export const RedoButton = ({ message }: RedoButtonProps) => {
         )
       }
     >
-      <CustomIcon name="redo" boxSize="3" />
+      <CustomIcon name="redo" boxSize={3} />
       Redo
     </Button>
   );
diff --git a/src/lib/components/button/ShowMoreButton.tsx b/src/lib/components/button/ShowMoreButton.tsx
index a96388e5c..7dbab267d 100644
--- a/src/lib/components/button/ShowMoreButton.tsx
+++ b/src/lib/components/button/ShowMoreButton.tsx
@@ -15,7 +15,7 @@ export const ShowMoreButton = ({
   setToggleShowMore,
 }: ShowMoreButtonProps) => (
   <Button
-    p="0"
+    p={0}
     rightIcon={
       <CustomIcon name={toggleShowMore ? "chevron-up" : "chevron-down"} />
     }
diff --git a/src/lib/components/copy/Copier.tsx b/src/lib/components/copy/Copier.tsx
index f36e7ce58..f723b79bb 100644
--- a/src/lib/components/copy/Copier.tsx
+++ b/src/lib/components/copy/Copier.tsx
@@ -10,7 +10,7 @@ interface CopierProps {
   value: string;
   copyLabel?: string;
   display?: LayoutProps["display"];
-  ml?: string;
+  ml?: number;
   amptrackSection?: string;
 }
 
@@ -19,7 +19,7 @@ export const Copier = ({
   value,
   copyLabel,
   display = "block",
-  ml = "8px",
+  ml = 2,
   amptrackSection,
 }: CopierProps) => (
   <CopyTemplate
diff --git a/src/lib/components/copy/CopyButton.tsx b/src/lib/components/copy/CopyButton.tsx
index acfa40de4..944a80434 100644
--- a/src/lib/components/copy/CopyButton.tsx
+++ b/src/lib/components/copy/CopyButton.tsx
@@ -39,7 +39,7 @@ export const CopyButton = ({
         onClick={() =>
           AmpTrack(AmpEvent.USE_COPY_BUTTON, { section: amptrackSection })
         }
-        leftIcon={hasIcon ? <CustomIcon name="copy" boxSize="4" /> : undefined}
+        leftIcon={hasIcon ? <CustomIcon name="copy" boxSize={4} /> : undefined}
         {...buttonProps}
       >
         {buttonText}
diff --git a/src/lib/components/dropzone/index.tsx b/src/lib/components/dropzone/index.tsx
index e80189009..53656e2df 100644
--- a/src/lib/components/dropzone/index.tsx
+++ b/src/lib/components/dropzone/index.tsx
@@ -45,7 +45,7 @@ export function DropZone({ setFile, ...componentProps }: DropZoneProps) {
     >
       <input {...getInputProps()} />
       <UploadIcon />
-      <Flex my="8px" gap="4px">
+      <Flex my={2} gap={1}>
         <Text
           variant="body1"
           color="secondary.main"
diff --git a/src/lib/components/filter/FilterInput.tsx b/src/lib/components/filter/FilterInput.tsx
index c6c96f07f..c80f22093 100644
--- a/src/lib/components/filter/FilterInput.tsx
+++ b/src/lib/components/filter/FilterInput.tsx
@@ -57,7 +57,7 @@ export const FilterInput = ({
       <CustomIcon
         name={isDropdown ? "chevron-up" : "chevron-down"}
         position="absolute"
-        mr="0.5px"
+        mr={1}
         px={3}
         boxSize="40px"
         right="0px"
diff --git a/src/lib/components/forms/AssetInput.tsx b/src/lib/components/forms/AssetInput.tsx
index 6c003556e..a3605f2af 100644
--- a/src/lib/components/forms/AssetInput.tsx
+++ b/src/lib/components/forms/AssetInput.tsx
@@ -27,7 +27,7 @@ export const AssetInput = ({
   assetOptions,
   initialSelected,
 }: AssetInputProps) => (
-  <Grid templateColumns="130px 1fr auto" columnGap="16px" w="full" mb="16px">
+  <Grid templateColumns="130px 1fr auto" columnGap={4} w="full" mb={4}>
     <SelectInput
       formLabel="Asset"
       options={assetOptions}
diff --git a/src/lib/components/forms/FilterByPermission.tsx b/src/lib/components/forms/FilterByPermission.tsx
index 0c776f205..fc24e90a8 100644
--- a/src/lib/components/forms/FilterByPermission.tsx
+++ b/src/lib/components/forms/FilterByPermission.tsx
@@ -44,7 +44,7 @@ export const FilterByPermission = ({
   initialSelected,
   labelBgColor = "background.main",
 }: FilterByPermissionProps) => (
-  <Grid columnGap="16px" w="full" mb="16px" maxW="360px">
+  <Grid columnGap={4} w="full" mb={4} maxW="360px">
     <SelectInput<PermissionFilterValue>
       formLabel="Filter by Instantiate Permission"
       options={options}
diff --git a/src/lib/components/forms/SelectInput.tsx b/src/lib/components/forms/SelectInput.tsx
index 66b3dcac2..7f27bd996 100644
--- a/src/lib/components/forms/SelectInput.tsx
+++ b/src/lib/components/forms/SelectInput.tsx
@@ -115,7 +115,7 @@ export const SelectInput = <T extends string>({
         >
           <div className="form-label">{formLabel}</div>
           {selectedOption?.icon && (
-            <InputLeftElement pointerEvents="none" h="full" ml="1">
+            <InputLeftElement pointerEvents="none" h="full" ml={1}>
               <CustomIcon name={selectedOption.icon} color="gray.600" />
             </InputLeftElement>
           )}
diff --git a/src/lib/components/fund/index.tsx b/src/lib/components/fund/index.tsx
index 1a161a603..a273f6499 100644
--- a/src/lib/components/fund/index.tsx
+++ b/src/lib/components/fund/index.tsx
@@ -73,7 +73,7 @@ export const AttachFund = ({
   attachFundsOption,
 }: AttachFundProps) => (
   <>
-    <Flex mb="20px">
+    <Flex mb={5}>
       <SelectInput
         formLabel="Attach Funds"
         options={attachFundsOptions}
diff --git a/src/lib/components/fund/selectFund.tsx b/src/lib/components/fund/selectFund.tsx
index 98fa9356b..510a7e111 100644
--- a/src/lib/components/fund/selectFund.tsx
+++ b/src/lib/components/fund/selectFund.tsx
@@ -71,7 +71,7 @@ export const SelectFund = ({
       ))}
       <Button
         variant="outline-primary"
-        mt="32px"
+        mt={8}
         mx="auto"
         onClick={() => append({ denom: "", amount: "" })}
         disabled={assetOptions.length === selectedAssets.length}
diff --git a/src/lib/components/json/JsonInput.tsx b/src/lib/components/json/JsonInput.tsx
index 4d7a11ae3..30bcd438f 100644
--- a/src/lib/components/json/JsonInput.tsx
+++ b/src/lib/components/json/JsonInput.tsx
@@ -40,7 +40,7 @@ const getResponse = (jsonState: JsonState) => {
             <CustomIcon
               name="check-circle-solid"
               color="success.main"
-              boxSize="3"
+              boxSize={3}
             />
             Valid JSON Format
           </>
@@ -54,7 +54,7 @@ const getResponse = (jsonState: JsonState) => {
             <CustomIcon
               name="alert-circle-solid"
               color="error.light"
-              boxSize="3"
+              boxSize={3}
             />
             {jsonState.errMsg}
           </>
diff --git a/src/lib/components/json/ViewFullMsgButton.tsx b/src/lib/components/json/ViewFullMsgButton.tsx
index 1f00e0314..4032951f3 100644
--- a/src/lib/components/json/ViewFullMsgButton.tsx
+++ b/src/lib/components/json/ViewFullMsgButton.tsx
@@ -31,7 +31,7 @@ export const ViewFullMsgButton = ({
     </Text>
     <CustomIcon
       name={viewFull ? "chevron-up" : "chevron-down"}
-      boxSize="3"
+      boxSize={3}
       color="text.dark"
     />
   </Flex>
diff --git a/src/lib/components/modal/ActionModal.tsx b/src/lib/components/modal/ActionModal.tsx
index 891454e74..01edb83b5 100644
--- a/src/lib/components/modal/ActionModal.tsx
+++ b/src/lib/components/modal/ActionModal.tsx
@@ -92,14 +92,14 @@ export function ActionModal({
             borderColor="gray.700"
           >
             <Box w="full">
-              <Flex alignItems="center" gap="3">
-                <CustomIcon name={icon} color={iconColor} boxSize="5" />
+              <Flex alignItems="center" gap={3}>
+                <CustomIcon name={icon} color={iconColor} boxSize={5} />
                 <Heading as="h5" variant="h5">
                   {title}
                 </Heading>
               </Flex>
               {subtitle && (
-                <Text variant="body3" color="text.dark" pt="2">
+                <Text variant="body3" color="text.dark" pt={2}>
                   {subtitle}
                 </Text>
               )}
@@ -109,7 +109,7 @@ export function ActionModal({
           {!noCloseButton && <ModalCloseButton color="gray.600" />}
           <ModalBody>{children}</ModalBody>
           <ModalFooter>
-            <Flex w="full" justifyContent="center" gap="2">
+            <Flex w="full" justifyContent="center" gap={2}>
               <Button
                 w="200px"
                 onClick={handleOnMain}
diff --git a/src/lib/components/modal/CodeSnippet.tsx b/src/lib/components/modal/CodeSnippet.tsx
index 1ff95b059..34a4e8e8b 100644
--- a/src/lib/components/modal/CodeSnippet.tsx
+++ b/src/lib/components/modal/CodeSnippet.tsx
@@ -194,7 +194,7 @@ execute();
         variant="outline-accent"
         size="sm"
         ml="auto"
-        gap="1"
+        gap={1}
         onClick={() => {
           AmpTrack(AmpEvent.USE_CONTRACT_SNIPPET);
           onOpen();
@@ -208,7 +208,7 @@ execute();
         <ModalOverlay />
         <ModalContent w="840px">
           <ModalHeader>
-            <CustomIcon name="code" boxSize="6" color="gray.600" />
+            <CustomIcon name="code" boxSize={6} color="gray.600" />
             <Heading as="h5" variant="h5">
               Code Snippet
             </Heading>
diff --git a/src/lib/components/modal/NoMobile.tsx b/src/lib/components/modal/NoMobile.tsx
index c491a2910..6536cbb18 100644
--- a/src/lib/components/modal/NoMobile.tsx
+++ b/src/lib/components/modal/NoMobile.tsx
@@ -17,15 +17,15 @@ export const NoMobile = () => (
         direction="column"
         justify="center"
         align="center"
-        padding="8"
+        p={8}
         textAlign="center"
       >
         <CustomIcon
           name="info-circle-solid"
           color="primary.light"
-          boxSize="10"
+          boxSize={10}
         />
-        <Heading as="h5" variant="h5" py="4">
+        <Heading as="h5" variant="h5" py={1}>
           Sorry, we currently do not support mobile use.
         </Heading>
         <Text variant="body1">
diff --git a/src/lib/components/modal/RedoModal.tsx b/src/lib/components/modal/RedoModal.tsx
index 14aa46565..7d3c6bac7 100644
--- a/src/lib/components/modal/RedoModal.tsx
+++ b/src/lib/components/modal/RedoModal.tsx
@@ -44,7 +44,7 @@ export const RedoModal = ({ message }: RedoModalProps) => {
         <ModalContent w="640px">
           <ModalHeader>
             <Flex w="full" direction="row" alignItems="center" gap={2} pt={1}>
-              <CustomIcon name="redo" boxSize="5" color="gray.600" />
+              <CustomIcon name="redo" boxSize={5} color="gray.600" />
               <Heading variant="h5" as="h5">
                 Redo Instantiate
               </Heading>
@@ -75,7 +75,7 @@ export const RedoModal = ({ message }: RedoModalProps) => {
               direction="row"
               align="center"
               justifyContent="end"
-              gap="4"
+              gap={4}
             >
               <Button
                 cursor="pointer"
diff --git a/src/lib/components/modal/UnsupportedTokensModal.tsx b/src/lib/components/modal/UnsupportedTokensModal.tsx
index 7c7b29436..eabde7fa8 100644
--- a/src/lib/components/modal/UnsupportedTokensModal.tsx
+++ b/src/lib/components/modal/UnsupportedTokensModal.tsx
@@ -89,7 +89,7 @@ const UnsupportedToken = ({ balance }: UnsupportedTokenProps) => {
           </Text>
           <Tooltip label={`Token ID: ${balance.id}`} maxW="500px">
             <Flex cursor="pointer" className="info" display="none">
-              <CustomIcon name="info-circle" boxSize="3" color="gray.600" />
+              <CustomIcon name="info-circle" boxSize={3} color="gray.600" />
             </Flex>
           </Tooltip>
           <Copier
@@ -97,7 +97,7 @@ const UnsupportedToken = ({ balance }: UnsupportedTokenProps) => {
             value={balance.id}
             copyLabel="Token ID Copied!"
             display="none"
-            ml="1px"
+            ml={1}
             amptrackSection="unsupported_token_copy"
           />
         </Flex>
@@ -171,7 +171,7 @@ export const UnsupportedTokensModal = ({
         <ModalContent w="800px">
           <ModalHeader>
             <Flex w="full" direction="row" alignItems="center" gap={2} pt={1}>
-              <CustomIcon name={content.icon} boxSize="5" color="gray.600" />
+              <CustomIcon name={content.icon} boxSize={5} color="gray.600" />
               <Heading variant="h5" as="h5">
                 Unsupported Assets
               </Heading>
diff --git a/src/lib/components/modal/code/SaveNewCode.tsx b/src/lib/components/modal/code/SaveNewCode.tsx
index 757a5de66..ad820d2d3 100644
--- a/src/lib/components/modal/code/SaveNewCode.tsx
+++ b/src/lib/components/modal/code/SaveNewCode.tsx
@@ -181,7 +181,7 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
       otherBtnTitle="Cancel"
       closeOnOverlayClick={false}
     >
-      <FormControl display="flex" flexDir="column" gap="36px">
+      <FormControl display="flex" flexDir="column" gap={9}>
         Save other stored codes to your &ldquo;Saved Codes&rdquo; list
         <NumberInput
           variant="floating"
diff --git a/src/lib/components/modal/contract/AddToOtherList.tsx b/src/lib/components/modal/contract/AddToOtherList.tsx
index 7b0616cd1..aea4f260d 100644
--- a/src/lib/components/modal/contract/AddToOtherList.tsx
+++ b/src/lib/components/modal/contract/AddToOtherList.tsx
@@ -39,8 +39,8 @@ export const AddToOtherListModal = observer(
         title="Add or remove from other lists"
         icon="bookmark-solid"
         headerContent={
-          <Flex pt="6" gap="36px">
-            <Flex direction="column" gap="8px">
+          <Flex pt={6} gap={9}>
+            <Flex direction="column" gap={2}>
               <Text variant="body2" fontWeight={500} color="text.dark">
                 Contract Name
               </Text>
@@ -49,7 +49,7 @@ export const AddToOtherListModal = observer(
               </Text>
             </Flex>
 
-            <Flex direction="column" gap="8px">
+            <Flex direction="column" gap={2}>
               <Text variant="body2">
                 {contractLocalInfo.name ?? contractLocalInfo.label}
               </Text>
@@ -65,7 +65,7 @@ export const AddToOtherListModal = observer(
         mainAction={handleSave}
         otherBtnTitle="Cancel"
       >
-        <Box my="16px">
+        <Box my={4}>
           <ListSelection
             result={contractLists}
             placeholder="Not listed"
diff --git a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx b/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
index 612ecb0d8..b1ae6d43b 100644
--- a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
+++ b/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
@@ -91,7 +91,7 @@ export const ContractDetailsTemplateModal = ({
       title={title}
       subtitle={subtitle}
       headerContent={
-        <Flex gap={4} alignItems="center" pt="6">
+        <Flex gap={4} alignItems="center" pt={6}>
           <Text variant="body2" fontWeight={500} color="text.dark">
             Contract Address
           </Text>
diff --git a/src/lib/components/modal/contract/SaveNewContract.tsx b/src/lib/components/modal/contract/SaveNewContract.tsx
index 5df833fcc..29237ceee 100644
--- a/src/lib/components/modal/contract/SaveNewContract.tsx
+++ b/src/lib/components/modal/contract/SaveNewContract.tsx
@@ -199,7 +199,7 @@ export function SaveNewContractModal({
       otherAction={resetForm}
       closeOnOverlayClick={false}
     >
-      <VStack gap="16px">
+      <VStack gap={4}>
         <ControllerInput
           name="contractAddress"
           control={control}
diff --git a/src/lib/components/pagination/index.tsx b/src/lib/components/pagination/index.tsx
index 86c922cc5..65500edd4 100644
--- a/src/lib/components/pagination/index.tsx
+++ b/src/lib/components/pagination/index.tsx
@@ -79,7 +79,7 @@ export const Pagination = ({
           <option value="100">100</option>
           <CustomIcon name="chevron-down" color="gray.600" />
         </Select>
-        <Text variant="body3" mx="30px">
+        <Text variant="body3" mx={7}>
           {`${offsetData.toLocaleString()} - ${lastDataInPage.toLocaleString()} of ${totalData.toLocaleString()}`}
         </Text>
         <Previous pageSize={pageSize} variant="unstyled" display="flex">
diff --git a/src/lib/components/select-code/CodeSelect.tsx b/src/lib/components/select-code/CodeSelect.tsx
index 82f80ce42..654cc8243 100644
--- a/src/lib/components/select-code/CodeSelect.tsx
+++ b/src/lib/components/select-code/CodeSelect.tsx
@@ -29,8 +29,8 @@ export const CodeSelect = ({
     <Flex direction="column" {...componentProps}>
       <Flex
         align="center"
-        p="16px"
-        gap="16px"
+        p={4}
+        gap={4}
         w="100%"
         bgColor="gray.900"
         borderRadius="8px"
diff --git a/src/lib/components/select-code/CodeSelectDrawerButton.tsx b/src/lib/components/select-code/CodeSelectDrawerButton.tsx
index 9a0c5ccbb..4c86a4b0c 100644
--- a/src/lib/components/select-code/CodeSelectDrawerButton.tsx
+++ b/src/lib/components/select-code/CodeSelectDrawerButton.tsx
@@ -89,7 +89,7 @@ export const CodeSelectDrawerButton = ({
         <DrawerOverlay />
         <DrawerContent h="80%">
           <DrawerHeader borderBottom="1px solid" borderColor="gray.700">
-            <CustomIcon name="code" boxSize="6" color="gray.600" />
+            <CustomIcon name="code" boxSize={6} color="gray.600" />
             <Heading as="h5" variant="h5">
               Select Code ID
             </Heading>
diff --git a/src/lib/components/select-code/CodeSelectSection.tsx b/src/lib/components/select-code/CodeSelectSection.tsx
index 52ab383bb..2a45a2a91 100644
--- a/src/lib/components/select-code/CodeSelectSection.tsx
+++ b/src/lib/components/select-code/CodeSelectSection.tsx
@@ -56,8 +56,8 @@ export const CodeSelectSection = <T extends FieldValues>({
       <form style={{ width: "100%" }}>
         {method === "select-existing" ? (
           <CodeSelect
-            mt="16px"
-            mb="32px"
+            mt={4}
+            mb={8}
             onCodeSelect={onCodeSelect}
             codeId={codeId}
             status={status}
@@ -72,7 +72,7 @@ export const CodeSelectSection = <T extends FieldValues>({
             label="Code ID"
             helperText="Input existing Code ID manually"
             variant="floating"
-            my="32px"
+            my={8}
             rules={{ required: "Code ID is required" }}
           />
         )}
diff --git a/src/lib/components/select-contract/ContractListCard.tsx b/src/lib/components/select-contract/ContractListCard.tsx
index a460a0300..a84547001 100644
--- a/src/lib/components/select-contract/ContractListCard.tsx
+++ b/src/lib/components/select-contract/ContractListCard.tsx
@@ -67,7 +67,7 @@ export const ContractListCard = ({
       {!isReadOnly && (
         <Menu>
           <MenuButton
-            m="0"
+            m={0}
             h="full"
             variant="ghost-gray"
             as={Button}
diff --git a/src/lib/components/select-contract/SelectContractAdmin.tsx b/src/lib/components/select-contract/SelectContractAdmin.tsx
index 24ae5320c..a92f01a74 100644
--- a/src/lib/components/select-contract/SelectContractAdmin.tsx
+++ b/src/lib/components/select-contract/SelectContractAdmin.tsx
@@ -59,8 +59,8 @@ export const SelectContractAdmin = ({
     <>
       <Button
         variant={notSelected ? "primary" : "outline-primary"}
-        py="6px"
-        px="16px"
+        py={1}
+        px={4}
         size="sm"
         onClick={() => {
           AmpTrack(AmpEvent.USE_CONTRACT_MODAL);
@@ -80,7 +80,7 @@ export const SelectContractAdmin = ({
           <DrawerHeader>
             <CustomIcon
               name="contract-address-solid"
-              boxSize="5"
+              boxSize={5}
               color="gray.600"
             />
             <Heading as="h5" variant="h5">
diff --git a/src/lib/components/select-contract/SelectContractInstantiator.tsx b/src/lib/components/select-contract/SelectContractInstantiator.tsx
index 4993b5e7b..f8c5a16f8 100644
--- a/src/lib/components/select-contract/SelectContractInstantiator.tsx
+++ b/src/lib/components/select-contract/SelectContractInstantiator.tsx
@@ -102,9 +102,9 @@ export const SelectContractInstantiator = ({
     <>
       <Button
         variant={notSelected ? "primary" : "outline-primary"}
-        py="6px"
+        py={1}
         size="sm"
-        px="16px"
+        px={4}
         onClick={() => {
           AmpTrack(AmpEvent.USE_CONTRACT_MODAL);
           onOpen();
@@ -123,7 +123,7 @@ export const SelectContractInstantiator = ({
               <DrawerHeader>
                 <CustomIcon
                   name="contract-address-solid"
-                  boxSize="5"
+                  boxSize={5}
                   color="gray.600"
                 />
                 <Heading as="h5" variant="h5">
@@ -132,11 +132,11 @@ export const SelectContractInstantiator = ({
               </DrawerHeader>
               <DrawerCloseButton />
 
-              <DrawerBody p="24px" overflowY="scroll">
+              <DrawerBody p={6} overflowY="scroll">
                 <Heading as="h6" variant="h6" mb={4}>
                   Fill contract address manually
                 </Heading>
-                <Flex gap="8px" alignItems="center">
+                <Flex gap={2} alignItems="center">
                   <Input
                     isInvalid={invalid !== ""}
                     value={searchContract}
@@ -168,7 +168,7 @@ export const SelectContractInstantiator = ({
                   {invalid}
                 </Text>
 
-                <Flex my="24px" gap="8px" alignItems="center">
+                <Flex my={6} gap={2} alignItems="center">
                   <Divider borderColor="gray.700" />
                   <Text variant="body1">OR</Text>
                   <Divider borderColor="gray.700" />
@@ -190,7 +190,7 @@ export const SelectContractInstantiator = ({
               <DrawerHeader>
                 <CustomIcon
                   name="chevron-left"
-                  boxSize="5"
+                  boxSize={5}
                   onClick={() => setListSlug("")}
                   cursor="pointer"
                   color="gray.600"
diff --git a/src/lib/components/state/DisconnectedState.tsx b/src/lib/components/state/DisconnectedState.tsx
index 3f9430fe0..c13e7bef8 100644
--- a/src/lib/components/state/DisconnectedState.tsx
+++ b/src/lib/components/state/DisconnectedState.tsx
@@ -13,11 +13,11 @@ export const DisconnectedState = ({
   text,
   helperText,
 }: DisconnectedStateProps) => (
-  <Flex direction="column" alignItems="center" gap="16px">
+  <Flex direction="column" alignItems="center" gap={4}>
     <StateImage imageVariant="disconnected" />
     <Flex align="center" justify="center">
       <ConnectWalletBtn />
-      <Text variant="body1" color="text.dark" ml="8px">
+      <Text variant="body1" color="text.dark" ml={2}>
         {text}
       </Text>
     </Flex>
@@ -26,7 +26,7 @@ export const DisconnectedState = ({
         variant="body1"
         color="text.dark"
         textAlign="center"
-        mt="16px"
+        mt={4}
         maxW="520px"
         alignSelf="center"
       >
diff --git a/src/lib/components/state/EmptyState.tsx b/src/lib/components/state/EmptyState.tsx
index 349d9eb54..db33a5bac 100644
--- a/src/lib/components/state/EmptyState.tsx
+++ b/src/lib/components/state/EmptyState.tsx
@@ -24,7 +24,7 @@ export const EmptyState = ({
     borderY={withBorder ? "1px solid" : undefined}
     borderColor="gray.700"
   >
-    <Flex alignItems="center" flexDir="column" gap="4" width="full">
+    <Flex alignItems="center" flexDir="column" gap={4} width="full">
       {imageVariant && <StateImage imageVariant={imageVariant} />}
       {heading && (
         <Heading as="h5" variant="h5">
diff --git a/src/lib/components/state/InvalidState.tsx b/src/lib/components/state/InvalidState.tsx
index 3e5e5f88c..f0fd84ee0 100644
--- a/src/lib/components/state/InvalidState.tsx
+++ b/src/lib/components/state/InvalidState.tsx
@@ -23,11 +23,11 @@ export const InvalidState = ({ title }: InvalidStateProps) => {
       borderY="1px solid"
       borderColor="gray.700"
       width="full"
-      my="24px"
-      py="24px"
+      my={6}
+      py={6}
     >
       <StateImage imageVariant="not-found" />
-      <Heading as="h5" variant="h5" my="8px">
+      <Heading as="h5" variant="h5" my={2}>
         {title}
       </Heading>
       <Text variant="body2" color="text.dark" textAlign="center">
diff --git a/src/lib/components/state/ZeroState.tsx b/src/lib/components/state/ZeroState.tsx
index 32c8b65c1..16c5e6e74 100644
--- a/src/lib/components/state/ZeroState.tsx
+++ b/src/lib/components/state/ZeroState.tsx
@@ -22,13 +22,13 @@ interface ActionSectionProps {
 const ActionSection = ({ list, handleAction }: ActionSectionProps) =>
   list.value === formatSlugName(INSTANTIATED_LIST_NAME) ? (
     <Button
-      leftIcon={<CustomIcon name="add-new" boxSize="4" />}
+      leftIcon={<CustomIcon name="add-new" boxSize={4} />}
       onClick={handleAction}
     >
       Deploy New Contract
     </Button>
   ) : (
-    <Flex alignItems="center" gap="4" color="text.dark" direction="column">
+    <Flex alignItems="center" gap={4} color="text.dark" direction="column">
       <Flex align="center">
         Save existing contracts to the list with
         <SaveNewContractModal
@@ -69,11 +69,11 @@ export const ZeroState = ({ list, isReadOnly }: ZeroStateProps) => {
       borderY="1px solid"
       borderColor="gray.700"
       width="full"
-      py="48px"
+      py={12}
       direction="column"
       alignContent="center"
     >
-      <Flex alignItems="center" flexDir="column" gap="4">
+      <Flex alignItems="center" flexDir="column" gap={4}>
         <StateImage imageVariant="empty" />
         <Text color="text.dark">{renderText(list.value)}</Text>
         {!isReadOnly && (
diff --git a/src/lib/components/stepper/StepperItem.tsx b/src/lib/components/stepper/StepperItem.tsx
index 5d1f4fb26..e6ab67010 100644
--- a/src/lib/components/stepper/StepperItem.tsx
+++ b/src/lib/components/stepper/StepperItem.tsx
@@ -27,7 +27,7 @@ const StepLabel = ({
     borderRadius="50%"
   >
     {currentStep > step ? (
-      <CustomIcon name="check" color="text.main" boxSize="3" />
+      <CustomIcon name="check" color="text.main" boxSize={3} />
     ) : (
       <Text variant="body3">{step}</Text>
     )}
diff --git a/src/lib/components/table/EditableCell.tsx b/src/lib/components/table/EditableCell.tsx
index f3ac57eb6..bd8d6a0c3 100644
--- a/src/lib/components/table/EditableCell.tsx
+++ b/src/lib/components/table/EditableCell.tsx
@@ -204,7 +204,7 @@ export const EditableCell = ({
                 opacity={isHover ? 1 : 0}
                 onClick={handleEdit}
               >
-                <CustomIcon name="edit" color="gray.600" boxSize="3" />
+                <CustomIcon name="edit" color="gray.600" boxSize={3} />
               </Flex>
             )}
           </Flex>
diff --git a/src/lib/components/table/codes/CodesTableWithWallet.tsx b/src/lib/components/table/codes/CodesTableWithWallet.tsx
index b05097bd3..13fe5b532 100644
--- a/src/lib/components/table/codes/CodesTableWithWallet.tsx
+++ b/src/lib/components/table/codes/CodesTableWithWallet.tsx
@@ -25,12 +25,7 @@ export const CodesTableWithWallet = ({
 }: CodesTableWithWalletProps) => {
   const { address } = useWallet();
   return !address ? (
-    <Flex
-      direction="column"
-      py="48px"
-      borderY="1px solid"
-      borderColor="gray.700"
-    >
+    <Flex direction="column" py={12} borderY="1px solid" borderColor="gray.700">
       <DisconnectedState text={disconnectedMessage} />
     </Flex>
   ) : (
diff --git a/src/lib/components/table/contracts/EditTags.tsx b/src/lib/components/table/contracts/EditTags.tsx
index 5c3812d5e..2780d9241 100644
--- a/src/lib/components/table/contracts/EditTags.tsx
+++ b/src/lib/components/table/contracts/EditTags.tsx
@@ -31,11 +31,11 @@ export function EditTags({ contractLocalInfo }: EditTagsProps) {
     <ActionModal
       title="Edit Tags"
       trigger={
-        <CustomIcon cursor="pointer" name="edit" color="gray.600" boxSize="3" />
+        <CustomIcon cursor="pointer" name="edit" color="gray.600" boxSize={3} />
       }
       headerContent={
-        <Flex pt="6" gap="36px">
-          <Flex direction="column" gap="8px">
+        <Flex pt={6} gap={9}>
+          <Flex direction="column" gap={2}>
             <Text variant="body2" fontWeight={500} color="text.dark">
               Contract Name
             </Text>
@@ -44,7 +44,7 @@ export function EditTags({ contractLocalInfo }: EditTagsProps) {
             </Text>
           </Flex>
 
-          <Flex direction="column" gap="8px">
+          <Flex direction="column" gap={2}>
             <Text variant="body2">
               {contractLocalInfo.name ?? contractLocalInfo.label}
             </Text>
@@ -60,7 +60,7 @@ export function EditTags({ contractLocalInfo }: EditTagsProps) {
       otherBtnTitle="Cancel"
     >
       <FormControl>
-        <Box my="24px">
+        <Box my={6}>
           <TagSelection
             result={tagResult}
             placeholder="Tags"
diff --git a/src/lib/components/table/proposals/StatusChip.tsx b/src/lib/components/table/proposals/StatusChip.tsx
index c9a9082d9..4e4521396 100644
--- a/src/lib/components/table/proposals/StatusChip.tsx
+++ b/src/lib/components/table/proposals/StatusChip.tsx
@@ -35,7 +35,7 @@ export const StatusChip = ({
   return (
     <Tag bgColor={getBgColor(status)}>
       {formatStatus}
-      {hasCloseBtn && <CustomIcon name="close" boxSize="3" mr={0} />}
+      {hasCloseBtn && <CustomIcon name="close" boxSize={3} mr={0} />}
     </Tag>
   );
 };
diff --git a/src/lib/components/table/transactions/TransactionsTableRow.tsx b/src/lib/components/table/transactions/TransactionsTableRow.tsx
index fb68c42d8..fa3d714dd 100644
--- a/src/lib/components/table/transactions/TransactionsTableRow.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableRow.tsx
@@ -65,7 +65,7 @@ export const TransactionsTableRow = ({
               showCopyOnHover
             />
             {transaction.messages.length > 1 && (
-              <Badge variant="secondary" ml="6px">
+              <Badge variant="secondary" ml={2}>
                 {transaction.messages.length}
               </Badge>
             )}
diff --git a/src/lib/components/table/transactions/TransactionsTableWithWallet.tsx b/src/lib/components/table/transactions/TransactionsTableWithWallet.tsx
index 5ffb776ba..af2eb1f64 100644
--- a/src/lib/components/table/transactions/TransactionsTableWithWallet.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableWithWallet.tsx
@@ -19,7 +19,7 @@ export const TransactionsTableWithWallet = ({
 }: TransactionsTableWithWalletProps) => {
   const { address } = useWallet();
   return !address ? (
-    <Flex direction="column" py="48px" borderColor="gray.700">
+    <Flex direction="column" py={12} borderColor="gray.700">
       <DisconnectedState
         text="to see your past transactions."
         helperText="Past transactions will display here."
diff --git a/src/lib/components/tx/modal/ButtonSection.tsx b/src/lib/components/tx/modal/ButtonSection.tsx
index b54ab9f61..5447154e5 100644
--- a/src/lib/components/tx/modal/ButtonSection.tsx
+++ b/src/lib/components/tx/modal/ButtonSection.tsx
@@ -68,7 +68,7 @@ export const ButtonSection = ({
             }}
           >
             Proceed to instantiate
-            <CustomIcon name="instantiate" boxSize="3" />
+            <CustomIcon name="instantiate" boxSize={3} />
           </Button>
         </>
       );
@@ -86,7 +86,7 @@ export const ButtonSection = ({
           }}
         >
           Proceed to Migrate
-          <CustomIcon name="migrate" boxSize="3" />
+          <CustomIcon name="migrate" boxSize={3} />
         </Button>
       );
     case "migrate":
@@ -103,7 +103,7 @@ export const ButtonSection = ({
             }
           >
             View Contract Details
-            <CustomIcon name="chevron-right" boxSize="3" />
+            <CustomIcon name="chevron-right" boxSize={3} />
           </Button>
         </>
       );
diff --git a/src/lib/components/tx/modal/index.tsx b/src/lib/components/tx/modal/index.tsx
index f193f9b48..87cd73c82 100644
--- a/src/lib/components/tx/modal/index.tsx
+++ b/src/lib/components/tx/modal/index.tsx
@@ -53,14 +53,14 @@ export const TxModal = ({ result, onClose }: TxModalProps) => {
         {(result.receiptInfo.description || result.receipts.length > 0) && (
           <ModalBody>
             {result.receiptInfo.description && (
-              <Text variant="body1" mb="16px">
+              <Text variant="body1" mb={4}>
                 {result.receiptInfo.description}
               </Text>
             )}
             <TxReceiptRender receipts={result.receipts} />
           </ModalBody>
         )}
-        <ModalFooter gap="8px">
+        <ModalFooter gap={2}>
           <ButtonSection
             actionVariant={result.actionVariant}
             onClose={onClose}
diff --git a/src/lib/components/upload/UploadSection.tsx b/src/lib/components/upload/UploadSection.tsx
index 2d18e51a7..5c9c67dce 100644
--- a/src/lib/components/upload/UploadSection.tsx
+++ b/src/lib/components/upload/UploadSection.tsx
@@ -138,7 +138,7 @@ export const UploadSection = ({
         }}
         error={errors.codeDesc && getMaxCodeNameLengthError(codeDesc.length)}
         variant="floating"
-        my="32px"
+        my={8}
       />
       <Flex
         fontSize="14px"
@@ -146,12 +146,12 @@ export const UploadSection = ({
         alignSelf="flex-start"
         alignItems="center"
         display="flex"
-        gap="4px"
+        gap={1}
       >
         <p>Transaction Fee:</p>
         <EstimatedFeeRender estimatedFee={estimatedFee} loading={loading} />
       </Flex>
-      <Flex justify="space-between" w="100%" mt="32px">
+      <Flex justify="space-between" w="100%" mt={8}>
         <Button
           variant="outline-gray"
           w="128px"
diff --git a/src/lib/components/upload/components/UploadCard.tsx b/src/lib/components/upload/components/UploadCard.tsx
index 9ad41ccb4..f531beaf8 100644
--- a/src/lib/components/upload/components/UploadCard.tsx
+++ b/src/lib/components/upload/components/UploadCard.tsx
@@ -57,8 +57,8 @@ export const UploadCard = ({
     <>
       <Flex
         align="center"
-        p="16px"
-        gap="16px"
+        p={4}
+        gap={4}
         w="full"
         bgColor="gray.900"
         borderRadius="8px"
@@ -68,11 +68,11 @@ export const UploadCard = ({
         <UploadIcon />
         <Flex direction="column">
           <Text variant="body1">{file.name}</Text>
-          <Text variant="body2" color="text.dark" display="flex" gap="4px">
+          <Text variant="body2" color="text.dark" display="flex" gap={1}>
             {big(file.size).div(1000).toFixed(0)} KB • {statusText}
           </Text>
         </Flex>
-        <Flex align="center" gap="16px" ml="auto">
+        <Flex align="center" gap={4} ml="auto">
           <CustomIcon
             name="delete"
             color="text.dark"
diff --git a/src/lib/components/wallet/WalletConnect.tsx b/src/lib/components/wallet/WalletConnect.tsx
index 4833b8bcb..eddbb37d2 100644
--- a/src/lib/components/wallet/WalletConnect.tsx
+++ b/src/lib/components/wallet/WalletConnect.tsx
@@ -19,7 +19,7 @@ export const ConnectWalletButton = ({
     isDisabled={isDisabled}
     onClick={onClickConnectBtn}
     variant={variant}
-    gap="1"
+    gap={1}
   >
     <CustomIcon name="connect" />
     {buttonText || "Connect"}
diff --git a/src/lib/layout/Footer.tsx b/src/lib/layout/Footer.tsx
index 87fb7e024..d9cb039f2 100644
--- a/src/lib/layout/Footer.tsx
+++ b/src/lib/layout/Footer.tsx
@@ -52,8 +52,8 @@ const Footer = () => (
           rel="noopener noreferrer"
           onClick={() => AmpTrackCelatone(item.url)}
         >
-          <Button variant="ghost-gray" size="xs" px="1">
-            <CustomIcon name={item.icon} boxSize="5" color="gray.600" />
+          <Button variant="ghost-gray" size="xs" px={1}>
+            <CustomIcon name={item.icon} boxSize={5} color="gray.600" />
           </Button>
         </Link>
       ))}
diff --git a/src/lib/layout/Header.tsx b/src/lib/layout/Header.tsx
index 24a1c6b1b..4220fef1f 100644
--- a/src/lib/layout/Header.tsx
+++ b/src/lib/layout/Header.tsx
@@ -32,7 +32,7 @@ const Header = () => {
       justifyContent="space-between"
       px={6}
       mb={1}
-      gap="24px"
+      gap={6}
     >
       <AppLink href="/">
         <Image
@@ -41,19 +41,19 @@ const Header = () => {
           minWidth="152px"
           width="152px"
           maxWidth="152px"
-          mr="36px"
+          mr={8}
           transition="all 0.25s ease-in-out"
           _hover={{ cursor: "pointer", opacity: 0.85 }}
         />
       </AppLink>
       <Searchbar />
-      <Flex gap="16px">
+      <Flex gap={4}>
         <FaucetBtn />
         <Menu onOpen={() => AmpTrack(AmpEvent.USE_SELECT_NETWORK)}>
           <MenuButton
             pl={4}
             pr={2}
-            py="5px"
+            py={1}
             borderRadius="8px"
             borderWidth="1px"
             borderColor="gray.600"
@@ -102,7 +102,7 @@ const Header = () => {
                     </Text>
                   </Flex>
                   {chainName === currentChainName && (
-                    <CustomIcon name="check" boxSize="3" color="gray.600" />
+                    <CustomIcon name="check" boxSize={3} color="gray.600" />
                   )}
                 </Flex>
               </MenuItem>
diff --git a/src/lib/layout/Searchbar.tsx b/src/lib/layout/Searchbar.tsx
index 43d322aff..2afea1589 100644
--- a/src/lib/layout/Searchbar.tsx
+++ b/src/lib/layout/Searchbar.tsx
@@ -61,13 +61,13 @@ const ResultItem = ({ type, value, handleSelectResult }: ResultItemProps) => {
 
   return (
     <ListItem p={2} borderBottomColor="gray.700" bg="gray.900">
-      <Text variant="body2" fontWeight={500} color="text.dark" p="8px">
+      <Text variant="body2" fontWeight={500} color="text.dark" p={2}>
         {text}
       </Text>
       {route && (
         <Text
           variant="body2"
-          p="8px"
+          p={2}
           borderRadius="8px"
           _hover={{ bg: "gray.800", cursor: "pointer" }}
           transition="all 0.25s ease-in-out"
diff --git a/src/lib/layout/index.tsx b/src/lib/layout/index.tsx
index 1dd66129d..6648990f6 100644
--- a/src/lib/layout/index.tsx
+++ b/src/lib/layout/index.tsx
@@ -50,7 +50,7 @@ const Layout = ({ children }: LayoutProps) => {
       overflowX="hidden"
       bg="background.main"
     >
-      <GridItem bg="gray.900" area="header" mb="1">
+      <GridItem bg="gray.900" area="header" mb={1}>
         <Header />
       </GridItem>
       <GridItem bg="gray.900" area="nav" overflowY="auto">
diff --git a/src/lib/layout/navbar/Expand.tsx b/src/lib/layout/navbar/Expand.tsx
index 8c70f6b55..d2009e2dc 100644
--- a/src/lib/layout/navbar/Expand.tsx
+++ b/src/lib/layout/navbar/Expand.tsx
@@ -15,8 +15,8 @@ export const ExpandNavMenu = ({
   <Box px={4} py={2} overflowY="auto">
     {navMenu.map((item) => (
       <Box
-        pb="4"
-        mb="4"
+        pb={4}
+        mb={4}
         key={item.category}
         borderBottom="1px solid"
         borderColor="gray.700"
@@ -29,7 +29,7 @@ export const ExpandNavMenu = ({
         }}
       >
         <Flex justifyContent="space-between" alignItems="center">
-          <Text py="2" variant="body3" fontWeight={700}>
+          <Text py={2} variant="body3" fontWeight={700}>
             {item.category}
           </Text>
           {item.category === "Overview" && (
@@ -37,7 +37,7 @@ export const ExpandNavMenu = ({
               variant="ghost-accent"
               size="xs"
               iconSpacing={1}
-              leftIcon={<CustomIcon name="double-chevron-left" boxSize="3" />}
+              leftIcon={<CustomIcon name="double-chevron-left" boxSize={3} />}
               onClick={() => setIsExpand(false)}
             >
               HIDE
@@ -49,7 +49,7 @@ export const ExpandNavMenu = ({
                 variant: "ghost-accent",
                 iconSpacing: 1,
                 size: "xs",
-                leftIcon: <CustomIcon name="plus" boxSize="3" />,
+                leftIcon: <CustomIcon name="plus" boxSize={3} />,
                 children: "NEW LIST",
                 onClick: () => AmpTrack(AmpEvent.USE_SIDEBAR),
               }}
@@ -63,7 +63,7 @@ export const ExpandNavMenu = ({
             onClick={() => AmpTrack(AmpEvent.USE_SIDEBAR)}
           >
             <Flex
-              gap="2"
+              gap={2}
               p={2}
               cursor="pointer"
               _hover={{ bg: "gray.700", borderRadius: "8px" }}
diff --git a/src/lib/pages/account-details/components/asset/index.tsx b/src/lib/pages/account-details/components/asset/index.tsx
index a56e2105b..d5db3fc4c 100644
--- a/src/lib/pages/account-details/components/asset/index.tsx
+++ b/src/lib/pages/account-details/components/asset/index.tsx
@@ -75,7 +75,7 @@ export const AssetsSection = ({
         />
       )}
       <Flex justify="space-between" width="full" align="center">
-        <Flex gap="50px">
+        <Flex gap={12}>
           <UserAssetInfoCard
             value={
               totalValue && supportedAssets ? formatPrice(totalValue) : "N/A"
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index efd0c8d7e..edc318364 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -124,12 +124,12 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
           flex="1"
         >
           <Flex alignItems="center" gap={1} minH="32px">
-            <CustomIcon name="website" ml="0" mb="6px" color="gray.600" />
+            <CustomIcon name="website" ml={0} mb={2} color="gray.600" />
             <Text variant="body2" fontWeight={500} color="text.dark">
               Public Account Description
             </Text>
           </Flex>
-          <Text variant="body2" color="text.main" mb="1">
+          <Text variant="body2" color="text.main" mb={1}>
             {publicInfo?.description}
           </Text>
         </Flex>
diff --git a/src/lib/pages/admin/index.tsx b/src/lib/pages/admin/index.tsx
index 386958a34..19e08244a 100644
--- a/src/lib/pages/admin/index.tsx
+++ b/src/lib/pages/admin/index.tsx
@@ -187,11 +187,11 @@ const UpdateAdmin = () => {
 
   return (
     <WasmPageContainer>
-      <Heading as="h5" variant="h5" mb="24px">
+      <Heading as="h5" variant="h5" mb={6}>
         Update Admin
       </Heading>
       <ConnectWalletAlert
-        mb="24px"
+        mb={6}
         subtitle="You need to connect your wallet to perform this action"
       />
       <ContractSelectSection
@@ -205,7 +205,7 @@ const UpdateAdmin = () => {
         helperText="This address will be an admin for the deployed smart contract."
         value={adminAddress}
         setInputState={setAdminAddress}
-        mt="48px"
+        mt={12}
         status={adminFormStatus}
       />
       <Flex
@@ -214,7 +214,7 @@ const UpdateAdmin = () => {
         alignItems="center"
         alignSelf="flex-start"
         gap={1}
-        mt="48px"
+        mt={12}
       >
         <p>Transaction Fee:</p>
         <EstimatedFeeRender estimatedFee={estimatedFee} loading={isFetching} />
@@ -226,11 +226,7 @@ const UpdateAdmin = () => {
           alignSelf="flex-start"
         />
       )}
-      <Button
-        disabled={!estimatedFee || isFetching}
-        onClick={proceed}
-        mt="48px"
-      >
+      <Button disabled={!estimatedFee || isFetching} onClick={proceed} mt={12}>
         Update Admin
       </Button>
     </WasmPageContainer>
diff --git a/src/lib/pages/block-details/components/BlockDetailsTop.tsx b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
index 7758e85f3..73642d3a9 100644
--- a/src/lib/pages/block-details/components/BlockDetailsTop.tsx
+++ b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
@@ -47,7 +47,7 @@ export const BlockDetailsTop = ({ blockData }: BlockDetailsTopProps) => {
     >
       <Flex direction="column" gap={1}>
         <Flex alignItems="center">
-          <CustomIcon name="block" boxSize="5" color="secondary.main" />
+          <CustomIcon name="block" boxSize={5} color="secondary.main" />
           <Heading as="h5" variant="h5" className="ellipsis">
             {blockData.height}
           </Heading>
diff --git a/src/lib/pages/block-details/components/BlockInfo.tsx b/src/lib/pages/block-details/components/BlockInfo.tsx
index 856040996..b4e9a496d 100644
--- a/src/lib/pages/block-details/components/BlockInfo.tsx
+++ b/src/lib/pages/block-details/components/BlockInfo.tsx
@@ -15,7 +15,7 @@ export const BlockInfo = ({ blockData }: BlockInfoProps) => {
       <Heading as="h6" variant="h6" mb={6}>
         Block Information
       </Heading>
-      <Flex gap="64px">
+      <Flex gap={16}>
         <LabelText label="Network">{blockData.network}</LabelText>
         <LabelText label="Gas (Used/Wanted)">
           {`${blockData.gasUsed ? formatInteger(blockData.gasUsed) : 0} / ${
diff --git a/src/lib/pages/blocks/components/BlocksRow.tsx b/src/lib/pages/blocks/components/BlocksRow.tsx
index 39a0ad498..704703fe0 100644
--- a/src/lib/pages/blocks/components/BlocksRow.tsx
+++ b/src/lib/pages/blocks/components/BlocksRow.tsx
@@ -36,7 +36,7 @@ export const BlocksRow = ({ templateColumns, blockData }: BlocksRowProps) => {
       </TableRow>
       <TableRow>
         <Flex direction="column">
-          <Text variant="body2" color="text.dark" mb="2px">
+          <Text variant="body2" color="text.dark">
             {formatUTC(blockData.timestamp)}
           </Text>
           <Text variant="body3" color="text.disabled">
diff --git a/src/lib/pages/code-details/components/table/NoContracts.tsx b/src/lib/pages/code-details/components/table/NoContracts.tsx
index dd7859935..2957eef97 100644
--- a/src/lib/pages/code-details/components/table/NoContracts.tsx
+++ b/src/lib/pages/code-details/components/table/NoContracts.tsx
@@ -8,8 +8,8 @@ const DisconnectedState = () => (
   <Flex
     direction="column"
     alignItems="center"
-    gap="16px"
-    py="48px"
+    gap={4}
+    py={12}
     borderY="1px solid"
     borderColor="gray.700"
   >
@@ -18,7 +18,7 @@ const DisconnectedState = () => (
       No contract instances from this code.
     </Text>
     <Flex align="center" alignItems="center">
-      <Text variant="body1" color="text.dark" mr="8px">
+      <Text variant="body1" color="text.dark" mr={2}>
         In order to instantiate contract from this code, you need to
       </Text>
       <ConnectWalletBtn />
diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx
index 7cfa9a131..9cf3b2c0f 100644
--- a/src/lib/pages/code-details/index.tsx
+++ b/src/lib/pages/code-details/index.tsx
@@ -111,9 +111,7 @@ const CodeDetailsBody = observer(
             title="Public Code Description"
             description={publicProject.publicCodeData.description}
             textLine={2}
-            icon={
-              <CustomIcon name="website" ml="0" mb="6px" color="gray.600" />
-            }
+            icon={<CustomIcon name="website" ml={0} mb={2} color="gray.600" />}
           />
         )}
         <Divider borderColor="gray.700" my={12} />
diff --git a/src/lib/pages/codes/components/MySavedCodesSection.tsx b/src/lib/pages/codes/components/MySavedCodesSection.tsx
index 52bb7e8d8..fdf4e898e 100644
--- a/src/lib/pages/codes/components/MySavedCodesSection.tsx
+++ b/src/lib/pages/codes/components/MySavedCodesSection.tsx
@@ -19,7 +19,7 @@ export const MySavedCodesSection = ({
   isSearching,
 }: MySavedCodesSectionProps) => (
   <Box mb={8}>
-    <HStack alignItems="center" justifyContent="space-between" mb="18px">
+    <HStack alignItems="center" justifyContent="space-between" mb={4}>
       <Heading as="h6" variant="h6">
         My Saved Codes
       </Heading>
diff --git a/src/lib/pages/codes/components/MyStoredCodesSection.tsx b/src/lib/pages/codes/components/MyStoredCodesSection.tsx
index 51c9ccf5c..868e520c4 100644
--- a/src/lib/pages/codes/components/MyStoredCodesSection.tsx
+++ b/src/lib/pages/codes/components/MyStoredCodesSection.tsx
@@ -21,7 +21,7 @@ export const MyStoredCodesSection = ({
   isSearching,
 }: MyStoredCodesSectionProps) => (
   <Box mb={8}>
-    <HStack alignItems="center" justifyContent="space-between" mb="18px">
+    <HStack alignItems="center" justifyContent="space-between" mb={4}>
       <Heading as="h6" variant="h6">
         My Stored Codes
       </Heading>
diff --git a/src/lib/pages/codes/index.tsx b/src/lib/pages/codes/index.tsx
index 9a6d1c1d6..69d76c8b7 100644
--- a/src/lib/pages/codes/index.tsx
+++ b/src/lib/pages/codes/index.tsx
@@ -74,7 +74,7 @@ const Codes = observer(() => {
         My Codes
       </Heading>
       <Tabs mt={8}>
-        <TabList mb="32px" borderBottom="1px" borderColor="gray.800">
+        <TabList mb={8} borderBottom="1px" borderColor="gray.800">
           <CustomTab count={allCodesCount}>All Codes</CustomTab>
           <CustomTab count={storedCodesCount}>My Stored Codes</CustomTab>
           <CustomTab count={savedCodesCount}>My Saved Codes </CustomTab>
@@ -112,7 +112,7 @@ const Codes = observer(() => {
               isSearching={isSearching}
             />
           </TabPanel>
-          <TabPanel p="0px">
+          <TabPanel p={0}>
             <MyStoredCodesSection
               codes={stored}
               isLoading={isStoredCodesLoading}
@@ -121,7 +121,7 @@ const Codes = observer(() => {
               isSearching={isSearching}
             />
           </TabPanel>
-          <TabPanel p="0px">
+          <TabPanel p={0}>
             <MySavedCodesSection
               codes={saved}
               isLoading={isSavedCodesLoading}
diff --git a/src/lib/pages/contract-details/components/CommandSection.tsx b/src/lib/pages/contract-details/components/CommandSection.tsx
index ae1f0ee79..4e3816f5f 100644
--- a/src/lib/pages/contract-details/components/CommandSection.tsx
+++ b/src/lib/pages/contract-details/components/CommandSection.tsx
@@ -33,7 +33,7 @@ export const CommandSection = () => {
         <ButtonGroup
           width="90%"
           flexWrap="wrap"
-          rowGap="8px"
+          rowGap={2}
           sx={{
             "> button": {
               marginInlineStart: "0 !important",
diff --git a/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx b/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx
index 9ee15990e..c8c899691 100644
--- a/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx
+++ b/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx
@@ -40,7 +40,7 @@ export const UserContractDesc = ({ contractData }: UserContractDescProps) => {
             size="xs"
             color="secondary.main"
             variant="ghost-secondary"
-            leftIcon={<CustomIcon name="edit" boxSize="3" />}
+            leftIcon={<CustomIcon name="edit" boxSize={3} />}
           >
             {description ? "Edit" : "Add Description"}
           </Button>
@@ -68,7 +68,7 @@ export const UserContractDesc = ({ contractData }: UserContractDescProps) => {
       role="group"
     >
       <Flex justify="space-between" align="center" h="32px">
-        <Text variant="body2" fontWeight={500} color="text.dark" mt="1px">
+        <Text variant="body2" fontWeight={500} color="text.dark">
           Your Contract Description
         </Text>
         <Box display="none" _groupHover={{ display: "flex" }}>
diff --git a/src/lib/pages/contract-details/components/contract-description/index.tsx b/src/lib/pages/contract-details/components/contract-description/index.tsx
index 29a096cd9..237477a99 100644
--- a/src/lib/pages/contract-details/components/contract-description/index.tsx
+++ b/src/lib/pages/contract-details/components/contract-description/index.tsx
@@ -16,7 +16,7 @@ export const ContractDesc = ({ contractData }: ContractDescProps) => (
         title="Public Contract Description"
         description={contractData.publicProject.publicInfo.description}
         textLine={contractData.contractLocalInfo?.description ? 4 : 2}
-        icon={<CustomIcon name="website" ml="0" mb="6px" color="gray.600" />}
+        icon={<CustomIcon name="website" ml={0} mb={2} color="gray.600" />}
       />
     )}
     <UserContractDesc contractData={contractData} />
diff --git a/src/lib/pages/contract-list/index.tsx b/src/lib/pages/contract-list/index.tsx
index 0cb6895f0..794b1e444 100644
--- a/src/lib/pages/contract-list/index.tsx
+++ b/src/lib/pages/contract-list/index.tsx
@@ -36,7 +36,7 @@ const AllContractListsPage = observer(() => {
           <CreateNewListModal
             buttonProps={{
               variant: "outline-primary",
-              leftIcon: <CustomIcon name="plus" boxSize="3" />,
+              leftIcon: <CustomIcon name="plus" boxSize={3} />,
               children: "Create new list",
             }}
           />
diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx
index a92a67a9a..553a00dfd 100644
--- a/src/lib/pages/contract-list/slug.tsx
+++ b/src/lib/pages/contract-list/slug.tsx
@@ -84,7 +84,7 @@ const ContractsByList = observer(() => {
         w="full"
         spacing="4px"
         separator={
-          <CustomIcon name="chevron-right" boxSize="3" color="gray.600" />
+          <CustomIcon name="chevron-right" boxSize={3} color="gray.600" />
         }
       >
         <BreadcrumbItem
@@ -134,7 +134,7 @@ const ContractsByList = observer(() => {
               }}
               buttonProps={{
                 variant: "outline-primary",
-                leftIcon: <CustomIcon name="bookmark" boxSize="3" />,
+                leftIcon: <CustomIcon name="bookmark" boxSize={3} />,
                 children: "Save Contract",
               }}
             />
diff --git a/src/lib/pages/deploy/index.tsx b/src/lib/pages/deploy/index.tsx
index 66e5a12fd..62bf176b8 100644
--- a/src/lib/pages/deploy/index.tsx
+++ b/src/lib/pages/deploy/index.tsx
@@ -78,7 +78,7 @@ const Deploy = () => {
         DEPLOY NEW CONTRACT
       </Text>
       <Stepper mode="deploy" currentStep={1} />
-      <Heading as="h5" variant="h5" my="48px">
+      <Heading as="h5" variant="h5" my={12}>
         Select Deploy Option
       </Heading>
       <ConnectWalletAlert
@@ -100,7 +100,7 @@ const Deploy = () => {
         }
         disabled={!enableUpload || !address}
         onClick={() => navigate({ pathname: "/upload" })}
-        mb="16px"
+        mb={4}
       />
       <ButtonCard
         title="Use existing Code IDs"
@@ -108,7 +108,7 @@ const Deploy = () => {
         onClick={() => navigate({ pathname: "/instantiate" })}
         disabled={!address}
       />
-      <Flex justify="center" w="100%" mt="32px">
+      <Flex justify="center" w="100%" mt={8}>
         <Button
           onClick={() => {
             router.back();
diff --git a/src/lib/pages/execute/components/ExecuteArea.tsx b/src/lib/pages/execute/components/ExecuteArea.tsx
index f94d7ed42..8e3a1031f 100644
--- a/src/lib/pages/execute/components/ExecuteArea.tsx
+++ b/src/lib/pages/execute/components/ExecuteArea.tsx
@@ -216,14 +216,14 @@ export const ExecuteArea = ({
   return (
     <Box my={4}>
       {contractAddress && (
-        <Text variant="body3" mb="8px">
+        <Text variant="body3" mb={4}>
           Message Suggestions:
         </Text>
       )}
       {cmds.length ? (
         <ButtonGroup
           flexWrap="wrap"
-          rowGap="8px"
+          rowGap={4}
           sx={{
             "> button": {
               marginInlineStart: "0 !important",
@@ -244,12 +244,12 @@ export const ExecuteArea = ({
         </ButtonGroup>
       ) : (
         contractAddress && (
-          <Text mt="8px" variant="body2" color="text.dark">
+          <Text mt={2} variant="body2" color="text.dark">
             No ExecuteMsgs suggestion available
           </Text>
         )
       )}
-      <Flex gap="32px" mt={8} direction={{ sm: "column", lg: "row" }}>
+      <Flex gap={8} mt={8} direction={{ sm: "column", lg: "row" }}>
         <Box w={{ sm: "full", lg: "50%" }}>
           <JsonInput topic="Execute Msg" text={msg} setText={setMsg} />
           {error && <ErrorMessageRender error={error} mb={4} />}
diff --git a/src/lib/pages/execute/index.tsx b/src/lib/pages/execute/index.tsx
index 503c16d2d..296304f56 100644
--- a/src/lib/pages/execute/index.tsx
+++ b/src/lib/pages/execute/index.tsx
@@ -95,11 +95,11 @@ const Execute = () => {
             variant="ghost-secondary"
             size="sm"
             p="unset"
-            pl="2"
+            pl={2}
             onClick={goToQuery}
           >
             Go To Query
-            <CustomIcon name="chevron-right" boxSize="3" />
+            <CustomIcon name="chevron-right" boxSize={3} />
           </Button>
         </Box>
       </Flex>
diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx
index e4aeaaa45..3c0491bc3 100644
--- a/src/lib/pages/faucet/index.tsx
+++ b/src/lib/pages/faucet/index.tsx
@@ -98,7 +98,7 @@ const Faucet = () => {
             <CustomIcon
               name="check-circle-solid"
               color="success.main"
-              boxSize="4"
+              boxSize={4}
               display="flex"
               alignItems="center"
             />
@@ -189,7 +189,7 @@ const Faucet = () => {
           <CustomIcon
             name={STATUS_ICONS[result.status]}
             color={`${result.status}.main`}
-            boxSize="6"
+            boxSize={6}
             display="flex"
             alignItems="center"
           />
diff --git a/src/lib/pages/home/components/QuickMenu.tsx b/src/lib/pages/home/components/QuickMenu.tsx
index b4e0a0fed..d00c14e9b 100644
--- a/src/lib/pages/home/components/QuickMenu.tsx
+++ b/src/lib/pages/home/components/QuickMenu.tsx
@@ -48,7 +48,7 @@ const secondaryMenu: SecondaryMenuType[] = [
 ];
 
 export const QuickMenu = () => (
-  <Flex direction="column" gap={4} bg="gray.900" p="48px">
+  <Flex direction="column" gap={4} bg="gray.900" p={12}>
     <Heading as="h5" variant="h5">
       Start using Celatone
     </Heading>
diff --git a/src/lib/pages/home/components/RecentActivities.tsx b/src/lib/pages/home/components/RecentActivities.tsx
index 9a82f9256..2ce585659 100644
--- a/src/lib/pages/home/components/RecentActivities.tsx
+++ b/src/lib/pages/home/components/RecentActivities.tsx
@@ -54,7 +54,7 @@ export const RecentActivities = observer(() => {
                   {item.type === "query" ? "Query" : "Execute"}
                 </Text>
               </Flex>
-              <Flex alignItems="center" gap="4px">
+              <Flex alignItems="center" gap={1}>
                 <Text
                   variant="body3"
                   padding="4px 8px"
diff --git a/src/lib/pages/home/index.tsx b/src/lib/pages/home/index.tsx
index eab7aa4bd..b49b6c40d 100644
--- a/src/lib/pages/home/index.tsx
+++ b/src/lib/pages/home/index.tsx
@@ -18,7 +18,7 @@ const Home = () => {
   }, [router.isReady]);
 
   return chainConfig.isWasm ? (
-    <Box mx="1">
+    <Box mx={1}>
       <QuickMenu />
       <RecentActivities />
     </Box>
diff --git a/src/lib/pages/instantiate/completed.tsx b/src/lib/pages/instantiate/completed.tsx
index 880c07d6f..2eedd0a29 100644
--- a/src/lib/pages/instantiate/completed.tsx
+++ b/src/lib/pages/instantiate/completed.tsx
@@ -20,7 +20,7 @@ const Completed = ({ txInfo }: CompletedProps) => {
   const txFee = txInfo.events.find((e) => e.type === "tx")?.attributes[0].value;
   return (
     <WasmPageContainer>
-      <CustomIcon name="check-circle-solid" color="success.main" boxSize="12" />
+      <CustomIcon name="check-circle-solid" color="success.main" boxSize={12} />
       <Heading as="h5" variant="h5" mt={3} mb={12}>
         Instantiate Complete!
       </Heading>
diff --git a/src/lib/pages/instantiate/component/FailedModal.tsx b/src/lib/pages/instantiate/component/FailedModal.tsx
index 91a4a23cd..ea1fedf3c 100644
--- a/src/lib/pages/instantiate/component/FailedModal.tsx
+++ b/src/lib/pages/instantiate/component/FailedModal.tsx
@@ -26,11 +26,11 @@ export const FailedModal = ({ errorLog, onClose }: FailedModalProps) => (
     <ModalOverlay />
     <ModalContent w="600px">
       <ModalHeader>
-        <Flex gap="12px" align="center">
+        <Flex gap={3} align="center">
           <CustomIcon
             name="alert-circle-solid"
             color="error.light"
-            boxSize="5"
+            boxSize={5}
           />
           <Heading as="h5" variant="h5">
             Failed to instantiate
@@ -40,12 +40,12 @@ export const FailedModal = ({ errorLog, onClose }: FailedModalProps) => (
       <ModalCloseButton />
       <ModalBody>
         Something went wrong. Here are the error logs.
-        <Box bg="background.main" borderRadius="8px" p="8px" mt="16px">
+        <Box bg="background.main" borderRadius="8px" p={2} mt={4}>
           <Text>{errorLog}</Text>
         </Box>
       </ModalBody>
 
-      <ModalFooter gap="8px">
+      <ModalFooter gap={2}>
         <CopyButton
           value={errorLog}
           size="md"
diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
index 238c5ea54..96e7f59ab 100644
--- a/src/lib/pages/instantiate/instantiate.tsx
+++ b/src/lib/pages/instantiate/instantiate.tsx
@@ -283,7 +283,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
           DEPLOY NEW CONTRACT
         </Text>
         <Stepper mode="deploy" currentStep={2} />
-        <Heading as="h5" variant="h5" my="48px">
+        <Heading as="h5" variant="h5" my={12}>
           Instantiate new contract
         </Heading>
         <ConnectWalletAlert
@@ -307,7 +307,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             label="Label"
             helperText="The contract's label help briefly describe the contract and what it does."
             variant="floating"
-            mb="32px"
+            mb={8}
             rules={{ required: "Label is required" }}
           />
           <ControllerInput
@@ -333,7 +333,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
               </Text>
             }
           />
-          <Heading variant="h6" as="h6" my="32px" alignSelf="flex-start">
+          <Heading variant="h6" as="h6" my={8} alignSelf="flex-start">
             Instantiate Message
           </Heading>
           <JsonInput
@@ -341,7 +341,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             setText={(newVal: string) => setValue("initMsg", newVal)}
             minLines={10}
           />
-          <Heading variant="h6" as="h6" my="32px" alignSelf="flex-start">
+          <Heading variant="h6" as="h6" my={8} alignSelf="flex-start">
             Send asset to contract
           </Heading>
           <AttachFund
diff --git a/src/lib/pages/migrate/components/MigrateContract.tsx b/src/lib/pages/migrate/components/MigrateContract.tsx
index ef7cf6ea3..9662fc63b 100644
--- a/src/lib/pages/migrate/components/MigrateContract.tsx
+++ b/src/lib/pages/migrate/components/MigrateContract.tsx
@@ -182,7 +182,7 @@ export const MigrateContract = ({
         <Flex gap={2} mb={4}>
           <CustomIcon
             name="alert-circle-solid"
-            boxSize="3"
+            boxSize={3}
             color="error.main"
           />
           <Text variant="body3" color="error.main">
@@ -196,7 +196,7 @@ export const MigrateContract = ({
         alignSelf="flex-start"
         alignItems="center"
         display="flex"
-        gap="4px"
+        gap={1}
       >
         <p>Transaction Fee:</p>
         <EstimatedFeeRender
@@ -204,7 +204,7 @@ export const MigrateContract = ({
           loading={isSimulating}
         />
       </Flex>
-      <Flex justify="space-between" w="100%" mt="32px">
+      <Flex justify="space-between" w="100%" mt={8}>
         <Button
           variant="outline-gray"
           w="128px"
diff --git a/src/lib/pages/migrate/components/MigrateOptions.tsx b/src/lib/pages/migrate/components/MigrateOptions.tsx
index deda2ab80..aa17a1c2d 100644
--- a/src/lib/pages/migrate/components/MigrateOptions.tsx
+++ b/src/lib/pages/migrate/components/MigrateOptions.tsx
@@ -14,7 +14,7 @@ export const MigrateOptions = ({
   existHandler,
 }: MigrateOptionsProps) => (
   <>
-    <Heading as="h5" variant="h5" mb="24px" textAlign="center">
+    <Heading as="h5" variant="h5" mb={6} textAlign="center">
       Migrate Options
     </Heading>
     <ButtonCard
@@ -22,7 +22,7 @@ export const MigrateOptions = ({
       title="Upload new WASM File"
       description="Deploy contract by uploading new Wasm file"
       onClick={uploadHandler}
-      mb="16px"
+      mb={4}
     />
     <ButtonCard
       disabled={!isAdmin}
diff --git a/src/lib/pages/migrate/components/UploadNewCode.tsx b/src/lib/pages/migrate/components/UploadNewCode.tsx
index ad080ae04..fd13b68bc 100644
--- a/src/lib/pages/migrate/components/UploadNewCode.tsx
+++ b/src/lib/pages/migrate/components/UploadNewCode.tsx
@@ -8,7 +8,7 @@ interface UploadNewCodeProps {
 
 export const UploadNewCode = ({ handleBack }: UploadNewCodeProps) => (
   <>
-    <Heading as="h6" variant="h6" mb="24px">
+    <Heading as="h6" variant="h6" mb={6}>
       Migrate to new code
     </Heading>
     <UploadSection handleBack={handleBack} isMigrate />
diff --git a/src/lib/pages/migrate/index.tsx b/src/lib/pages/migrate/index.tsx
index a72b8fff7..6ade71145 100644
--- a/src/lib/pages/migrate/index.tsx
+++ b/src/lib/pages/migrate/index.tsx
@@ -131,7 +131,7 @@ const Migrate = () => {
   return (
     <WasmPageContainer>
       {firstStep ? (
-        <Box w="full" mb="24px">
+        <Box w="full" mb={6}>
           <Text
             variant="body1"
             color="text.dark"
@@ -142,20 +142,20 @@ const Migrate = () => {
             MIGRATE CONTRACT
           </Text>
           <Stepper mode="migrate" currentStep={1} />
-          <Heading as="h5" variant="h5" textAlign="center" mt="48px">
+          <Heading as="h5" variant="h5" textAlign="center" mt={12}>
             Migrate Contract
           </Heading>
         </Box>
       ) : (
-        <Box w="full" mb="48px">
-          <Heading as="h5" variant="h5" textAlign="center" my="12px">
+        <Box w="full" mb={12}>
+          <Heading as="h5" variant="h5" textAlign="center" my={3}>
             Migrate Contract
           </Heading>
           <Stepper mode="migrate" currentStep={2} />
         </Box>
       )}
       <ConnectWalletAlert
-        mb="24px"
+        mb={6}
         subtitle="You need to connect your wallet to perform this action"
       />
       {/* Select Migrate Contract modal */}
@@ -164,7 +164,7 @@ const Migrate = () => {
         contractAddress={contractAddress}
         onContractSelect={onContractSelect}
       />
-      <Box mt="48px" w="full">
+      <Box mt={12} w="full">
         {renderBody()}
       </Box>
     </WasmPageContainer>
diff --git a/src/lib/pages/network-overview/index.tsx b/src/lib/pages/network-overview/index.tsx
index 3d13cc345..826e0b602 100644
--- a/src/lib/pages/network-overview/index.tsx
+++ b/src/lib/pages/network-overview/index.tsx
@@ -64,7 +64,7 @@ const CardInfo = ({
         </Text>
         <Tooltip label={tooltip}>
           <Flex cursor="pointer">
-            <CustomIcon name="info-circle-solid" boxSize="3" color="gray.600" />
+            <CustomIcon name="info-circle-solid" boxSize={3} color="gray.600" />
           </Flex>
         </Tooltip>
       </Flex>
@@ -134,7 +134,7 @@ const NetworkOverview = () => {
           </Text>
         )}
       </Flex>
-      <Flex gap={4} mb="64px">
+      <Flex gap={4} mb={16}>
         <CardInfo
           title={txInfo.title}
           tooltip={txInfo.tooltip}
@@ -159,7 +159,7 @@ const NetworkOverview = () => {
         {txsCount && txsCount > 5 && <ViewMore onClick={toTxs} />}
       </Box>
 
-      <Box mt="84px">
+      <Box mt={16}>
         <Heading as="h5" variant="h5" mb={5}>
           Recent Blocks
         </Heading>
diff --git a/src/lib/pages/past-txs/index.tsx b/src/lib/pages/past-txs/index.tsx
index 44a34e56e..1050c0e83 100644
--- a/src/lib/pages/past-txs/index.tsx
+++ b/src/lib/pages/past-txs/index.tsx
@@ -144,7 +144,7 @@ const PastTxs = () => {
             placeholder="Search with transaction hash or contract address"
             h="full"
           />
-          <InputRightElement pointerEvents="none" h="full" mr="1">
+          <InputRightElement pointerEvents="none" h="full" mr={1}>
             <CustomIcon name="search" color="gray.600" />
           </InputRightElement>
         </InputGroup>
diff --git a/src/lib/pages/proposal/components/Footer.tsx b/src/lib/pages/proposal/components/Footer.tsx
index e0b9cab42..bd8e44f9f 100644
--- a/src/lib/pages/proposal/components/Footer.tsx
+++ b/src/lib/pages/proposal/components/Footer.tsx
@@ -16,7 +16,7 @@ export const Footer = ({
   return (
     <Grid
       w="full"
-      px="48px"
+      px={12}
       bg="gray.900"
       h="70px"
       bottom="0"
diff --git a/src/lib/pages/proposal/utils/getAlert.tsx b/src/lib/pages/proposal/utils/getAlert.tsx
index 8556610fa..2fe212b52 100644
--- a/src/lib/pages/proposal/utils/getAlert.tsx
+++ b/src/lib/pages/proposal/utils/getAlert.tsx
@@ -28,7 +28,7 @@ export const getAlert = (
     return {
       variant: "error",
       description: `${minDepositAmount} ${denom} is required to enter the deposit period.`,
-      icon: <CustomIcon name="alert-circle" color="error.main" boxSize="4" />,
+      icon: <CustomIcon name="alert-circle" color="error.main" boxSize={4} />,
     };
   }
   if (enteredAmount.lt(minVotingDepositAmount)) {
@@ -38,7 +38,7 @@ export const getAlert = (
         big(minVotingDepositAmount).sub(enteredAmount),
         "NaN"
       )} more ${denom} is required to enter the voting period. If you proceed with this amount without further deposit after 7 days, The chain will remove your proposal with no fund return.`,
-      icon: <CustomIcon name="alert-circle" color="warning.main" boxSize="4" />,
+      icon: <CustomIcon name="alert-circle" color="warning.main" boxSize={4} />,
     };
   }
   if (enteredAmount.eq(minVotingDepositAmount)) {
@@ -46,7 +46,7 @@ export const getAlert = (
       variant: "accent",
       description:
         "The proposal will proceed to voting period immediately after created.",
-      icon: <CustomIcon name="info-circle" color="accent.main" boxSize="4" />,
+      icon: <CustomIcon name="info-circle" color="accent.main" boxSize={4} />,
     };
   }
   if (big(minVotingDepositAmount).lt(enteredAmount)) {
@@ -54,7 +54,7 @@ export const getAlert = (
       variant: "warning",
       description: `You’re depositing more than the minimum requirement, the proposal will proceed to voting immediately after creation. To prevent fund loss if not passing the quorum, deposit equal to the minimum requirement.
 `,
-      icon: <CustomIcon name="alert-circle" color="warning.main" boxSize="4" />,
+      icon: <CustomIcon name="alert-circle" color="warning.main" boxSize={4} />,
     };
   }
   return defaultAlertProps;
diff --git a/src/lib/pages/proposals/components/ProposalTextCell.tsx b/src/lib/pages/proposals/components/ProposalTextCell.tsx
index b70ae9bef..cea121fd6 100644
--- a/src/lib/pages/proposals/components/ProposalTextCell.tsx
+++ b/src/lib/pages/proposals/components/ProposalTextCell.tsx
@@ -1,7 +1,7 @@
 import { Text, Flex } from "@chakra-ui/react";
 import { useRef, useState } from "react";
 
-import { DotSeparator } from "lib/components/DotSeperator";
+import { DotSeparator } from "lib/components/DotSeparator";
 import { Expedited } from "lib/components/Expedited";
 
 interface ProposalTextCellProps {
diff --git a/src/lib/pages/proposals/components/ProposalTypeFilter.tsx b/src/lib/pages/proposals/components/ProposalTypeFilter.tsx
index 65e9d8133..37d725355 100644
--- a/src/lib/pages/proposals/components/ProposalTypeFilter.tsx
+++ b/src/lib/pages/proposals/components/ProposalTypeFilter.tsx
@@ -111,7 +111,7 @@ export const ProposalTypeFilter = forwardRef<
                   chipComponent={
                     <Tag>
                       {option}
-                      <CustomIcon name="close" boxSize="3" mr={0} />
+                      <CustomIcon name="close" boxSize={3} mr={0} />
                     </Tag>
                   }
                   onSelect={() => selectOption(option)}
diff --git a/src/lib/pages/public-project/components/AllProject.tsx b/src/lib/pages/public-project/components/AllProject.tsx
index 06516c4a0..20798e906 100644
--- a/src/lib/pages/public-project/components/AllProject.tsx
+++ b/src/lib/pages/public-project/components/AllProject.tsx
@@ -92,7 +92,7 @@ export const AllProject = observer(() => {
           ))}
         </SimpleGrid>
       )}
-      <Flex justifyContent="center" gap="2" w="100%" mt="64px">
+      <Flex justifyContent="center" gap={2} w="100%" mt={16}>
         <Text color="text.dark" variant="body2">
           Want your project here?
         </Text>
diff --git a/src/lib/pages/public-project/components/DetailHeader.tsx b/src/lib/pages/public-project/components/DetailHeader.tsx
index 630c90ce8..09ef4f01b 100644
--- a/src/lib/pages/public-project/components/DetailHeader.tsx
+++ b/src/lib/pages/public-project/components/DetailHeader.tsx
@@ -26,7 +26,7 @@ export const DetailHeader = ({ details, slug }: DetailHeaderProps) => (
       w="full"
       spacing={1}
       separator={
-        <CustomIcon name="chevron-right" boxSize="3" color="gray.600" />
+        <CustomIcon name="chevron-right" boxSize={3} color="gray.600" />
       }
     >
       <BreadcrumbItem
diff --git a/src/lib/pages/public-project/components/PublicProjectCard.tsx b/src/lib/pages/public-project/components/PublicProjectCard.tsx
index c7a4590a5..23239b357 100644
--- a/src/lib/pages/public-project/components/PublicProjectCard.tsx
+++ b/src/lib/pages/public-project/components/PublicProjectCard.tsx
@@ -55,7 +55,7 @@ export const PublicProjectCard = observer(
               w="full"
               alignItems="flex-start"
             >
-              <Flex gap={2} pr="1">
+              <Flex gap={2} pr={1}>
                 <Image
                   src={item.logo}
                   borderRadius="full"
@@ -68,7 +68,7 @@ export const PublicProjectCard = observer(
                   fontWeight={700}
                   textOverflow="ellipsis"
                   overflow="hidden"
-                  mt="4px"
+                  mt={1}
                 >
                   {item.name}
                 </Text>
diff --git a/src/lib/pages/query/index.tsx b/src/lib/pages/query/index.tsx
index c84a93edb..ff880a2de 100644
--- a/src/lib/pages/query/index.tsx
+++ b/src/lib/pages/query/index.tsx
@@ -103,11 +103,11 @@ const Query = () => {
             variant="ghost-secondary"
             size="sm"
             p="unset"
-            pl="2"
+            pl={2}
             onClick={goToExecute}
           >
             Go To Execute
-            <CustomIcon name="chevron-right" boxSize="3" />
+            <CustomIcon name="chevron-right" boxSize={3} />
           </Button>
         </Box>
       </Flex>
diff --git a/src/lib/pages/recent-codes/index.tsx b/src/lib/pages/recent-codes/index.tsx
index 75e615f73..e3db87bfa 100644
--- a/src/lib/pages/recent-codes/index.tsx
+++ b/src/lib/pages/recent-codes/index.tsx
@@ -50,7 +50,7 @@ const RecentCodes = observer(() => {
 
   return (
     <PageContainer>
-      <Box pb="48px">
+      <Box pb={12}>
         <Heading
           variant="h5"
           as="h5"
diff --git a/src/lib/pages/tx-details/components/TxHeader.tsx b/src/lib/pages/tx-details/components/TxHeader.tsx
index f744d3660..1b996d520 100644
--- a/src/lib/pages/tx-details/components/TxHeader.tsx
+++ b/src/lib/pages/tx-details/components/TxHeader.tsx
@@ -13,7 +13,7 @@ interface TxHeaderProps extends FlexProps {
 }
 
 const DotSeparator = () => (
-  <Box bg="secondary.darker" borderRadius="50%" w="4px" h="4px" />
+  <Box bg="secondary.darker" borderRadius="50%" w={1} h={1} />
 );
 
 export const TxHeader = ({ txData, ...flexProps }: TxHeaderProps) => {
diff --git a/src/lib/pages/upload/index.tsx b/src/lib/pages/upload/index.tsx
index d98c669a3..fe9517389 100644
--- a/src/lib/pages/upload/index.tsx
+++ b/src/lib/pages/upload/index.tsx
@@ -21,12 +21,12 @@ const Upload = () => {
         DEPLOY NEW CONTRACT
       </Text>
       <Stepper mode="deploy" currentStep={1} />
-      <Heading as="h5" variant="h5" my="48px">
+      <Heading as="h5" variant="h5" my={12}>
         Upload Wasm file
       </Heading>
       <ConnectWalletAlert
         subtitle="You need to connect your wallet first"
-        mb="48px"
+        mb={12}
       />
       <UploadSection handleBack={() => router.back()} />
     </WasmPageContainer>