diff --git a/.eslintrc.json b/.eslintrc.json
index dfd8a924..27166b89 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,5 +1,10 @@
 {
-    "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/recommended"
+    ],
+    "plugins": ["react"],
     "rules": {
         "semi": "error",
         "no-multiple-empty-lines": "error",
@@ -21,6 +26,13 @@
         "@typescript-eslint/no-inferrable-types": "off",
         "@typescript-eslint/no-non-null-assertion": "off",
         "@typescript-eslint/consistent-type-imports": "error",
-        "@typescript-eslint/no-explicit-any": "warn"
+        "@typescript-eslint/no-explicit-any": "warn",
+        "react/prop-types": "off",
+        "react/react-in-jsx-scope": "off"
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
     }
 }
diff --git a/src/components/Atoms/Address/Address.tsx b/src/components/Atoms/Address/Address.tsx
index de7cdbfd..7d192a0b 100644
--- a/src/components/Atoms/Address/Address.tsx
+++ b/src/components/Atoms/Address/Address.tsx
@@ -11,9 +11,9 @@ export const Address: React.FC<AddressProps> = ({ address }) => {
                 onClick={() => copyToClipboard(address)}
             >
                 <IconWrapper
-                    iconClassName="content_copy"
-                    iconSize="text-sm"
-                    className="text-secondary dark:text-secondary"
+                    icon_class_name="content_copy"
+                    icon_size="text-sm"
+                    class_name="text-secondary dark:text-secondary"
                 />
             </button>
         </div>
diff --git a/src/components/Atoms/AddressAvatar/AddressAvatar.tsx b/src/components/Atoms/AddressAvatar/AddressAvatar.tsx
index 49e0254c..410376cb 100644
--- a/src/components/Atoms/AddressAvatar/AddressAvatar.tsx
+++ b/src/components/Atoms/AddressAvatar/AddressAvatar.tsx
@@ -12,7 +12,7 @@ export const AddressAvatar: React.FC<AddressAvatarProps> = ({
     size,
     fallback,
     rounded = false,
-    className,
+    class_name,
 }) => {
     const SRC = useMemo<string>(() => {
         switch (type) {
@@ -57,7 +57,7 @@ export const AddressAvatar: React.FC<AddressAvatarProps> = ({
     return (
         <Avatar
             className={`${SIZE_CLASS} ${rounded ? "rounded-full" : "rounded"} ${
-                className || ""
+                class_name || ""
             }`}
         >
             <AvatarImage style={BG_COLOR} src={SRC} />
diff --git a/src/components/Atoms/CopyImage/CopyImage.tsx b/src/components/Atoms/CopyImage/CopyImage.tsx
index 533855a6..e08a439f 100644
--- a/src/components/Atoms/CopyImage/CopyImage.tsx
+++ b/src/components/Atoms/CopyImage/CopyImage.tsx
@@ -8,15 +8,15 @@ export const CopyImage: React.FC<CopyImageProps> = ({ url }) => {
 
     return copied ? (
         <IconWrapper
-            iconClassName="done"
-            iconSize="text-sm text-secondary dark:text-secondary"
+            icon_class_name="done"
+            icon_size="text-sm text-secondary dark:text-secondary"
         />
     ) : (
         <IconWrapper
-            iconClassName="content_copy"
-            iconSize="text-sm text-text-color-900 dark:text-text-color-50"
-            className="cursor-pointer"
-            onClick={() => {
+            icon_class_name="content_copy"
+            icon_size="text-sm text-text-color-900 dark:text-text-color-50"
+            class_name="cursor-pointer"
+            on_click={() => {
                 showCopied(true);
                 setTimeout(() => {
                     showCopied(false);
diff --git a/src/components/Atoms/IconWrapper/IconWrapper.tsx b/src/components/Atoms/IconWrapper/IconWrapper.tsx
index ad267553..85bea7dc 100644
--- a/src/components/Atoms/IconWrapper/IconWrapper.tsx
+++ b/src/components/Atoms/IconWrapper/IconWrapper.tsx
@@ -1,24 +1,24 @@
 import { type IconWrapperPropsType } from "@/utils/types/atoms.types";
 
 export const IconWrapper: React.FC<IconWrapperPropsType> = ({
-    className,
-    iconClassName,
-    onClick,
-    iconSize,
-    iconType,
+    class_name,
+    icon_class_name,
+    on_click,
+    icon_size,
+    icon_type,
 }) => {
     return (
         <div
             role={"presentation"}
-            className={`flex items-center justify-center ${className ?? ""}`}
-            onClick={onClick}
+            className={`flex items-center justify-center ${class_name ?? ""}`}
+            onClick={on_click}
         >
             <span
-                className={`material-symbols-${iconType || "outlined"} ${
-                    iconSize || ""
+                className={`material-symbols-${icon_type || "outlined"} ${
+                    icon_size || ""
                 }`}
             >
-                {iconClassName}
+                {icon_class_name}
             </span>
         </div>
     );
diff --git a/src/components/Atoms/TokenAvatar/TokenAvatar.stories.tsx b/src/components/Atoms/TokenAvatar/TokenAvatar.stories.tsx
index e4f25dde..4c76c86d 100644
--- a/src/components/Atoms/TokenAvatar/TokenAvatar.stories.tsx
+++ b/src/components/Atoms/TokenAvatar/TokenAvatar.stories.tsx
@@ -20,63 +20,63 @@ export const TokenAvatarDisplay: Story = {
             <>
                 <div className="m-1">
                     <TokenAvatar
-                        tokenUrl="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
+                        token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.MEDIUM}
                     />
                 </div>
                 <div className="m-1 mt-20 flex gap-1">
                     <TokenAvatar
-                        tokenUrl="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
+                        token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.EXTRA_EXTRA_SMALL}
                     />
 
                     <TokenAvatar
-                        tokenUrl="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
+                        token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.EXTRA_SMALL}
                     />
                     <TokenAvatar
-                        tokenUrl="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
+                        token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.SMALL}
                     />
                     <TokenAvatar
-                        tokenUrl="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
+                        token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.MEDIUM}
                     />
                     <TokenAvatar
-                        tokenUrl="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
+                        token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.LARGE}
                     />
                 </div>
                 <div className="m-1 mt-20 flex gap-3">
                     <TokenAvatar
-                        tokenUrl="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
+                        token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.EXTRA_SMALL}
-                        chainColor={"grey"}
-                        subUrl={
+                        chain_color={"grey"}
+                        sub_url={
                             "https://www.datocms-assets.com/86369/1699425239-uniswap.jpg"
                         }
                     />
                     <TokenAvatar
-                        tokenUrl="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
+                        token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.SMALL}
-                        chainColor={"grey"}
-                        subUrl={
+                        chain_color={"grey"}
+                        sub_url={
                             "https://www.datocms-assets.com/86369/1699425239-uniswap.jpg"
                         }
                     />
                     <TokenAvatar
-                        tokenUrl="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
+                        token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.MEDIUM}
-                        chainColor={"grey"}
-                        subUrl={
+                        chain_color={"grey"}
+                        sub_url={
                             "https://www.datocms-assets.com/86369/1699425239-uniswap.jpg"
                         }
                     />
                     <TokenAvatar
-                        tokenUrl="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
+                        token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.LARGE}
-                        chainColor={"grey"}
-                        subUrl={
+                        chain_color={"grey"}
+                        sub_url={
                             "https://www.datocms-assets.com/86369/1699425239-uniswap.jpg"
                         }
                     />
diff --git a/src/components/Atoms/TokenAvatar/TokenAvatar.tsx b/src/components/Atoms/TokenAvatar/TokenAvatar.tsx
index 907d6437..a1bf3d94 100644
--- a/src/components/Atoms/TokenAvatar/TokenAvatar.tsx
+++ b/src/components/Atoms/TokenAvatar/TokenAvatar.tsx
@@ -3,11 +3,11 @@ import { type TokenAvatarProps } from "@/utils/types/atoms.types";
 import { GRK_SIZES } from "@/utils/constants/shared.constants";
 
 export const TokenAvatar: React.FC<TokenAvatarProps> = ({
-    tokenUrl,
-    subUrl,
+    token_url,
+    sub_url,
     size,
-    isChainLogo = false,
-    chainColor,
+    is_chain_logo = false,
+    chain_color,
 }) => {
     const ref = useRef<HTMLDivElement>(null);
 
@@ -46,10 +46,10 @@ export const TokenAvatar: React.FC<TokenAvatarProps> = ({
     }, [size]);
 
     useEffect(() => {
-        if (isChainLogo) {
+        if (is_chain_logo) {
             (async () => {
                 const response = await fetch(
-                    tokenUrl ?? "https://goldrush.vercel.app/icons/token.svg"
+                    token_url ?? "https://goldrush.vercel.app/icons/token.svg"
                 );
                 const data = await response.text();
 
@@ -78,17 +78,17 @@ export const TokenAvatar: React.FC<TokenAvatarProps> = ({
                 }
             })();
         }
-    }, [tokenUrl, SIZE_CLASS]);
+    }, [token_url, SIZE_CLASS]);
 
-    return isChainLogo ? (
+    return is_chain_logo ? (
         <div ref={ref} className={SIZE_CLASS} />
     ) : (
         <div
             className={`${SIZE_CLASS} relative rounded-[100%]`}
-            style={{ background: chainColor ?? "", padding: "2px" }}
+            style={{ background: chain_color ?? "", padding: "2px" }}
         >
             <img
-                src={tokenUrl ?? "https://goldrush.vercel.app/icons/token.svg"}
+                src={token_url ?? "https://goldrush.vercel.app/icons/token.svg"}
                 alt="Token Image"
                 style={{ background: "#fff" }}
                 className={`h-full w-full rounded-[100%] p-0.5`}
@@ -97,12 +97,12 @@ export const TokenAvatar: React.FC<TokenAvatarProps> = ({
                         "https://goldrush.vercel.app/icons/token.svg";
                 }}
             />
-            {subUrl && (
+            {sub_url && (
                 <img
-                    src={subUrl}
+                    src={sub_url}
                     alt="Token Image"
                     style={{
-                        background: chainColor ? chainColor : "grey",
+                        background: chain_color ? chain_color : "grey",
                         padding: "1px",
                     }}
                     className={`${SUB_SIZE} absolute -bottom-2 -left-3 rounded-[100%] p-0.5`}
diff --git a/src/components/Molecules/AccountCardView/AccountCardView.tsx b/src/components/Molecules/AccountCardView/AccountCardView.tsx
index 23aac3bd..28080ceb 100644
--- a/src/components/Molecules/AccountCardView/AccountCardView.tsx
+++ b/src/components/Molecules/AccountCardView/AccountCardView.tsx
@@ -54,16 +54,16 @@ export const AccountCardView: React.FC<AccountCardViewProps> = ({
                         >
                             {showCopy ? (
                                 <IconWrapper
-                                    iconClassName="done"
-                                    iconSize="text-sm"
-                                    className="text-secondary dark:text-secondary"
+                                    icon_class_name="done"
+                                    icon_size="text-sm"
+                                    class_name="text-secondary dark:text-secondary"
                                 />
                             ) : (
                                 <IconWrapper
-                                    iconClassName="content_copy"
-                                    iconSize="text-sm"
-                                    className="text-secondary dark:text-secondary"
-                                    onClick={() => handleCopyClick()}
+                                    icon_class_name="content_copy"
+                                    icon_size="text-sm"
+                                    class_name="text-secondary dark:text-secondary"
+                                    on_click={() => handleCopyClick()}
                                 />
                             )}
                         </div>
@@ -72,9 +72,9 @@ export const AccountCardView: React.FC<AccountCardViewProps> = ({
                                 <DialogTrigger>
                                     <div className="h-5 w-5 items-center justify-center rounded-full">
                                         <IconWrapper
-                                            iconClassName="qr_code_2"
-                                            iconSize="text-sm pt-1"
-                                            className="text-secondary dark:text-secondary"
+                                            icon_class_name="qr_code_2"
+                                            icon_size="text-sm pt-1"
+                                            class_name="text-secondary dark:text-secondary"
                                         />
                                     </div>
                                 </DialogTrigger>
diff --git a/src/components/Molecules/NFTs/NFTFloorPriceView/NFTFloorPriceView.tsx b/src/components/Molecules/NFTs/NFTFloorPriceView/NFTFloorPriceView.tsx
index 57d9339b..0e8bd632 100644
--- a/src/components/Molecules/NFTs/NFTFloorPriceView/NFTFloorPriceView.tsx
+++ b/src/components/Molecules/NFTs/NFTFloorPriceView/NFTFloorPriceView.tsx
@@ -4,7 +4,10 @@ import { Button } from "@/components/ui/button";
 import { LineChart } from "@tremor/react";
 import { rootColor, timestampParser } from "@/utils/functions";
 import { TypographyH4 } from "@/components/ui/typography";
-import { calculatePrettyBalance, prettifyCurrency } from "@covalenthq/client-sdk";
+import {
+    calculatePrettyBalance,
+    prettifyCurrency,
+} from "@covalenthq/client-sdk";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
     CURRENCY,
diff --git a/src/components/Organisms/NFTs/NFTWalletCollectionView/NFTWalletCollectionView.tsx b/src/components/Organisms/NFTs/NFTWalletCollectionView/NFTWalletCollectionView.tsx
index e7d59d52..711d8d65 100644
--- a/src/components/Organisms/NFTs/NFTWalletCollectionView/NFTWalletCollectionView.tsx
+++ b/src/components/Organisms/NFTs/NFTWalletCollectionView/NFTWalletCollectionView.tsx
@@ -1,6 +1,9 @@
 import { GRK_SIZES } from "@/utils/constants/shared.constants";
 import { type Option, Some, None } from "@/utils/option";
-import { prettifyCurrency, type NftTokenContractBalanceItem } from "@covalenthq/client-sdk";
+import {
+    prettifyCurrency,
+    type NftTokenContractBalanceItem,
+} from "@covalenthq/client-sdk";
 import { useEffect, useState } from "react";
 import {
     Card,
@@ -62,11 +65,24 @@ export const NFTWalletCollectionView: React.FC<
                                     >
                                         <CardContent>
                                             <img
-                                                className={`block h-[10rem] w-full rounded-t ${it.external_data ? "object-cover" : "p-2"}`}
-                                                src={it.external_data ? it.external_data.image_512 : "https://www.datocms-assets.com/86369/1685489960-nft.svg"}
+                                                className={`block h-[10rem] w-full rounded-t ${
+                                                    it.external_data
+                                                        ? "object-cover"
+                                                        : "p-2"
+                                                }`}
+                                                src={
+                                                    it.external_data
+                                                        ? it.external_data
+                                                              .image_512
+                                                        : "https://www.datocms-assets.com/86369/1685489960-nft.svg"
+                                                }
                                                 onError={(e) => {
-                                                    e.currentTarget.classList.remove("object-cover");
-                                                    e.currentTarget.classList.add("p-2");
+                                                    e.currentTarget.classList.remove(
+                                                        "object-cover"
+                                                    );
+                                                    e.currentTarget.classList.add(
+                                                        "p-2"
+                                                    );
                                                     e.currentTarget.src =
                                                         "https://www.datocms-assets.com/86369/1685489960-nft.svg";
                                                 }}
@@ -122,7 +138,14 @@ export const NFTWalletCollectionView: React.FC<
                                                 )
                                             );
                                             return (
-                                                <span>{prettifyCurrency(s, 2, "USD", true)}</span>
+                                                <span>
+                                                    {prettifyCurrency(
+                                                        s,
+                                                        2,
+                                                        "USD",
+                                                        true
+                                                    )}
+                                                </span>
                                             );
                                         },
                                     })}
diff --git a/src/components/Organisms/NFTs/NFTWalletTokenListView/NFTWalletTokenListView.tsx b/src/components/Organisms/NFTs/NFTWalletTokenListView/NFTWalletTokenListView.tsx
index 7c1f00bc..2eb05f6c 100644
--- a/src/components/Organisms/NFTs/NFTWalletTokenListView/NFTWalletTokenListView.tsx
+++ b/src/components/Organisms/NFTs/NFTWalletTokenListView/NFTWalletTokenListView.tsx
@@ -1,6 +1,9 @@
 import { GRK_SIZES } from "@/utils/constants/shared.constants";
 import { type Option, Some, None } from "@/utils/option";
-import { prettifyCurrency, type NftTokenContractBalanceItem } from "@covalenthq/client-sdk";
+import {
+    prettifyCurrency,
+    type NftTokenContractBalanceItem,
+} from "@covalenthq/client-sdk";
 import { useEffect, useState } from "react";
 import {
     Card,
@@ -58,11 +61,23 @@ export const NFTWalletTokenListView: React.FC<NFTWalletTokenListViewProps> = ({
                             <Card className="w-[230px] rounded border">
                                 <CardContent>
                                     <img
-                                        className={`block h-[10rem] w-full rounded-t ${it.external_data ? "object-cover" : "p-2"}`}
-                                        src={it.external_data ? it.external_data.image_512 : "https://www.datocms-assets.com/86369/1685489960-nft.svg"}
+                                        className={`block h-[10rem] w-full rounded-t ${
+                                            it.external_data
+                                                ? "object-cover"
+                                                : "p-2"
+                                        }`}
+                                        src={
+                                            it.external_data
+                                                ? it.external_data.image_512
+                                                : "https://www.datocms-assets.com/86369/1685489960-nft.svg"
+                                        }
                                         onError={(e) => {
-                                            e.currentTarget.classList.remove("object-cover");
-                                            e.currentTarget.classList.add("p-2");
+                                            e.currentTarget.classList.remove(
+                                                "object-cover"
+                                            );
+                                            e.currentTarget.classList.add(
+                                                "p-2"
+                                            );
                                             e.currentTarget.src =
                                                 "https://www.datocms-assets.com/86369/1685489960-nft.svg";
                                         }}
@@ -111,7 +126,14 @@ export const NFTWalletTokenListView: React.FC<NFTWalletTokenListViewProps> = ({
                                                 )
                                             );
                                             return (
-                                                <span>{prettifyCurrency(s, 2, "USD", true)}</span>
+                                                <span>
+                                                    {prettifyCurrency(
+                                                        s,
+                                                        2,
+                                                        "USD",
+                                                        true
+                                                    )}
+                                                </span>
                                             );
                                         },
                                     })}
diff --git a/src/components/Organisms/TokenBalances/AddressActivityListView/AddressActivityListView.tsx b/src/components/Organisms/TokenBalances/AddressActivityListView/AddressActivityListView.tsx
index ca0b26e0..04efba65 100644
--- a/src/components/Organisms/TokenBalances/AddressActivityListView/AddressActivityListView.tsx
+++ b/src/components/Organisms/TokenBalances/AddressActivityListView/AddressActivityListView.tsx
@@ -1,7 +1,5 @@
 import { type Option, None, Some } from "@/utils/option";
-import {
-    type ChainActivityEvent,
-} from "@covalenthq/client-sdk";
+import { type ChainActivityEvent } from "@covalenthq/client-sdk";
 import {
     type ColumnDef,
     type SortingState,
@@ -65,8 +63,8 @@ const columns: ColumnDef<ChainActivityEvent>[] = [
             return (
                 <div className="flex items-center gap-x-1 ">
                     <TokenAvatar
-                        isChainLogo={true}
-                        tokenUrl={row.original.logo_url}
+                        is_chain_logo={true}
+                        token_url={row.original.logo_url}
                         size={GRK_SIZES.EXTRA_EXTRA_SMALL}
                     />
                     {row.getValue("label")}
@@ -107,7 +105,7 @@ const columns: ColumnDef<ChainActivityEvent>[] = [
                     {t ? (
                         ""
                     ) : (
-                        <IconWrapper iconClassName="playlist_add_check" />
+                        <IconWrapper icon_class_name="playlist_add_check" />
                     )}
                 </div>
             );
@@ -303,10 +301,10 @@ export const AddressActivityListView: React.FC<
                                         {header.isPlaceholder
                                             ? null
                                             : flexRender(
-                                                header.column.columnDef
-                                                    .header,
-                                                header.getContext()
-                                            )}
+                                                  header.column.columnDef
+                                                      .header,
+                                                  header.getContext()
+                                              )}
                                     </TableHead>
                                 );
                             })}
diff --git a/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.tsx b/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.tsx
index dd053cf1..8b9725f3 100644
--- a/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.tsx
+++ b/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.tsx
@@ -3,7 +3,7 @@ import {
     type BalanceItem,
     type ChainItem,
     calculatePrettyBalance,
-    prettifyCurrency
+    prettifyCurrency,
 } from "@covalenthq/client-sdk";
 import { useEffect, useState } from "react";
 import {
@@ -199,9 +199,9 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
                             <div className="flex items-center gap-3 ">
                                 <TokenAvatar
                                     size={GRK_SIZES.EXTRA_SMALL}
-                                    chainColor={chainColor}
-                                    subUrl={protocol_url}
-                                    tokenUrl={row.original.logo_url}
+                                    chain_color={chainColor}
+                                    sub_url={protocol_url}
+                                    token_url={row.original.logo_url}
                                 />
                                 <div className="flex flex-col">
                                     <div style={{ color: chainColor }}>
@@ -233,7 +233,12 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
                 return (
                     <div className="text-right">
                         {" "}
-                        {prettifyCurrency(row.getValue("quote_rate"), 2, "USD", true)}{" "}
+                        {prettifyCurrency(
+                            row.getValue("quote_rate"),
+                            2,
+                            "USD",
+                            true
+                        )}{" "}
                     </div>
                 );
             },
@@ -320,22 +325,22 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
                             <DropdownMenuTrigger asChild>
                                 <Button variant="ghost" className="ml-auto  ">
                                     <span className="sr-only">Open menu</span>
-                                    <IconWrapper iconClassName="expand_more" />
+                                    <IconWrapper icon_class_name="expand_more" />
                                 </Button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
                                 <DropdownMenuLabel>Actions</DropdownMenuLabel>
                                 <DropdownMenuItem>
                                     <IconWrapper
-                                        iconClassName="swap_horiz"
-                                        className="mr-2"
+                                        icon_class_name="swap_horiz"
+                                        class_name="mr-2"
                                     />{" "}
                                     View Transfer History
                                 </DropdownMenuItem>
                                 <DropdownMenuItem>
                                     <IconWrapper
-                                        iconClassName="swap_calls"
-                                        className="mr-2"
+                                        icon_class_name="swap_calls"
+                                        class_name="mr-2"
                                     />{" "}
                                     Swap {row.original.contract_ticker_symbol}
                                 </DropdownMenuItem>
@@ -343,8 +348,8 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
                                 <DropdownMenuLabel>
                                     <div className="flex">
                                         <IconWrapper
-                                            iconClassName="history"
-                                            className="mr-2"
+                                            icon_class_name="history"
+                                            class_name="mr-2"
                                         />
                                         {row.original.last_transferred_at
                                             ? `Last transfered ${timestampParser(
@@ -427,9 +432,9 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
                             <div className="flex items-center gap-3">
                                 <TokenAvatar
                                     size={GRK_SIZES.EXTRA_SMALL}
-                                    chainColor={chainColor}
-                                    subUrl={protocol_url}
-                                    tokenUrl={row.original.logo_url}
+                                    chain_color={chainColor}
+                                    sub_url={protocol_url}
+                                    token_url={row.original.logo_url}
                                 />
                                 <div className="flex flex-col gap-1">
                                     <div style={{ color: chainColor }}>
@@ -488,22 +493,22 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
                             <DropdownMenuTrigger asChild>
                                 <Button variant="ghost" className="ml-auto  ">
                                     <span className="sr-only">Open menu</span>
-                                    <IconWrapper iconClassName="expand_more" />
+                                    <IconWrapper icon_class_name="expand_more" />
                                 </Button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
                                 <DropdownMenuLabel>Actions</DropdownMenuLabel>
                                 <DropdownMenuItem>
                                     <IconWrapper
-                                        iconClassName="swap_horiz"
-                                        className="mr-2"
+                                        icon_class_name="swap_horiz"
+                                        class_name="mr-2"
                                     />{" "}
                                     View Transfer History
                                 </DropdownMenuItem>
                                 <DropdownMenuItem>
                                     <IconWrapper
-                                        iconClassName="swap_calls"
-                                        className="mr-2"
+                                        icon_class_name="swap_calls"
+                                        class_name="mr-2"
                                     />{" "}
                                     Swap {row.original.contract_ticker_symbol}
                                 </DropdownMenuItem>
@@ -511,8 +516,8 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
                                 <DropdownMenuLabel>
                                     <div className="flex">
                                         <IconWrapper
-                                            iconClassName="history"
-                                            className="mr-2"
+                                            icon_class_name="history"
+                                            class_name="mr-2"
                                         />
                                         {row.original.last_transferred_at
                                             ? `Last transfered ${timestampParser(
@@ -620,7 +625,9 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
             <div className="flex flex-wrap place-content-between gap-2">
                 <AccountCardView address={address} />
                 <div className="w-full rounded border p-2 md:w-min lg:w-min">
-                    <h2 className="text-base font-semibold  text-secondary ">Total Quote</h2>
+                    <h2 className="text-base font-semibold  text-secondary ">
+                        Total Quote
+                    </h2>
                     <div className="flex items-end gap-2">
                         <span className="text-xl">
                             {filterResult.match({
@@ -629,7 +636,16 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
                                 ),
                                 Some: (result) => {
                                     const s = sum(result.map((x) => x.quote));
-                                    return <span>{prettifyCurrency(s, 2, "USD", true)}</span>;
+                                    return (
+                                        <span>
+                                            {prettifyCurrency(
+                                                s,
+                                                2,
+                                                "USD",
+                                                true
+                                            )}
+                                        </span>
+                                    );
                                 },
                             })}
                         </span>
diff --git a/src/components/Organisms/TokenBalances/TokenTransfersListView/TokenTransfersListView.tsx b/src/components/Organisms/TokenBalances/TokenTransfersListView/TokenTransfersListView.tsx
index 22bd20d8..3085a49d 100644
--- a/src/components/Organisms/TokenBalances/TokenTransfersListView/TokenTransfersListView.tsx
+++ b/src/components/Organisms/TokenBalances/TokenTransfersListView/TokenTransfersListView.tsx
@@ -30,7 +30,7 @@ import { TokenAvatar } from "../../../Atoms/TokenAvatar/TokenAvatar";
 import {
     timestampParser,
     truncate,
-    calculateTimeSeriesGroup
+    calculateTimeSeriesGroup,
 } from "@/utils/functions";
 import { Badge } from "@/components/ui/badge";
 import { AccountCardView } from "@/components/Molecules/AccountCardView/AccountCardView";
@@ -170,7 +170,12 @@ const columns: ColumnDef<BlockTransactionWithContractTransfers>[] = [
         cell: ({ row }) => {
             return (
                 <div className="text-right">
-                    {prettifyCurrency(row.original.transfers[0].delta_quote, 2, "USD", true)}
+                    {prettifyCurrency(
+                        row.original.transfers[0].delta_quote,
+                        2,
+                        "USD",
+                        true
+                    )}
                 </div>
             );
         },
@@ -184,9 +189,9 @@ const columns: ColumnDef<BlockTransactionWithContractTransfers>[] = [
                 <a className="flex items-center gap-x-2" target="_blank" rel="noopener noreferrer" href={row.original.transfers[0].explorers[0].url}>
                     {truncate(txHash)}
                     <IconWrapper
-                        iconClassName="open_in_new"
-                        className="h-3 w-3"
-                        iconSize="text-sm text-black dark:text-white"
+                        icon_class_name="open_in_new"
+                        class_name="h-3 w-3"
+                        icon_size="text-sm text-black dark:text-white"
                     />
                 </a>
             );
@@ -481,8 +486,8 @@ export const TokenTransfersListView: React.FC<TokenTransfersListViewProps> = ({
                                                 return (
                                                     <>
                                                         <TokenAvatar
-                                                            isChainLogo
-                                                            tokenUrl={
+                                                            is_chain_logo
+                                                            token_url={
                                                                 chain?.logo_url
                                                             }
                                                             size={
@@ -518,7 +523,7 @@ export const TokenTransfersListView: React.FC<TokenTransfersListViewProps> = ({
                                         return (
                                             <>
                                                 <TokenAvatar
-                                                    tokenUrl={result.logo_url}
+                                                    token_url={result.logo_url}
                                                     size={
                                                         GRK_SIZES.EXTRA_EXTRA_SMALL
                                                     }
diff --git a/src/components/ui/tableHeaderSorting.tsx b/src/components/ui/tableHeaderSorting.tsx
index 8dff9932..3b386175 100644
--- a/src/components/ui/tableHeaderSorting.tsx
+++ b/src/components/ui/tableHeaderSorting.tsx
@@ -31,9 +31,9 @@ export const TableHeaderSorting = ({
         >
             {header_name}
             <IconWrapper
-                iconSize={sortedIcon === "sort" ? "text-base" : ""}
-                className="transition-all "
-                iconClassName={sortedIcon}
+                icon_size={sortedIcon === "sort" ? "text-base" : ""}
+                class_name="transition-all "
+                icon_class_name={sortedIcon}
             />
         </div>
     );
diff --git a/src/utils/types/atoms.types.ts b/src/utils/types/atoms.types.ts
index 989796dd..3c121499 100644
--- a/src/utils/types/atoms.types.ts
+++ b/src/utils/types/atoms.types.ts
@@ -10,20 +10,7 @@ export interface AddressAvatarProps {
     size: GRK_SIZES;
     rounded?: boolean;
     fallback?: string;
-    className?: string;
-}
-
-export interface AvatarGroupProps {
-    groupClassName?: string;
-    iconClassName?: string;
-    titleClassName?: string;
-    title?: string;
-    chainText?: string;
-    show?: number;
-    isCountShown?: boolean;
-    iconList?: Array<{ url: string; bgColor: string }>;
-    fallbackTitle?: Array<string>;
-    rounded?: boolean;
+    class_name?: string;
 }
 
 export interface BalancePriceDeltaProps {
@@ -36,30 +23,11 @@ export interface CopyImageProps {
 }
 
 export interface IconWrapperPropsType {
-    //   icon: string;
-    //   alt: string;
-    className?: string;
-    iconClassName?: string;
-    onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
-    iconSize?: string;
-    iconType?: string;
-}
-
-export interface MultiSelectDropDownProps {
-    className?: string;
-    label?: React.ReactNode;
-    search?: React.ReactNode;
-    childrenClassName?: string;
-    arrowClassName?: string;
-    menuClassName?: string;
-    isOpen?: boolean;
-    handleOpen?: (val: boolean) => void;
-    showBalance?: boolean;
-    chainsList?: any;
-    chainsBalances?: any;
-    searchPlaceholder?: string;
-    address?: string;
-    position?: "left" | "right";
+    class_name?: string;
+    icon_class_name?: string;
+    on_click?: (e?: React.MouseEvent<HTMLDivElement>) => void;
+    icon_size?: string;
+    icon_type?: string;
 }
 
 export interface NetPriceDeltaProps {
@@ -67,27 +35,10 @@ export interface NetPriceDeltaProps {
     denominator: number;
 }
 
-export interface SelectDropDownProps {
-    className?: string;
-    label?: React.ReactNode;
-    search?: React.ReactNode;
-    childrenClassName?: string;
-    arrowClassName?: string;
-    menuClassName?: string;
-    isOpen?: boolean;
-    handleOpen?: (val: boolean) => void;
-    showBalance?: boolean;
-    chainsList?: any;
-    chainsBalances?: any;
-    searchPlaceholder?: string;
-    address?: string;
-    position?: "left" | "right";
-}
-
 export interface TokenAvatarProps {
-    tokenUrl?: string | null;
-    subUrl?: string | null;
+    token_url?: string | null;
+    sub_url?: string | null;
     size: GRK_SIZES;
-    isChainLogo?: boolean;
-    chainColor?: string | null;
+    is_chain_logo?: boolean;
+    chain_color?: string | null;
 }