diff --git a/src/components/Flex.tsx b/src/components/Flex.tsx
index 4ea6ba04..f91e119f 100644
--- a/src/components/Flex.tsx
+++ b/src/components/Flex.tsx
@@ -2,14 +2,14 @@ import styled from "@emotion/styled";
 
 import { media } from "@themes/breakpoints";
 
-export interface IFlexProps {
+export interface FlexProps {
   justifyContent?: "start" | "flex-end" | "space-around" | "space-between" | "center";
   alignItems?: "start" | "end" | "center" | "inherit" | "unset" | "flex-end" | "flex-start" | "baseline";
   crossAxisSize?: "min" | "max";
   mainAxisSize?: "fit-content" | "stretch";
 }
 
-export const Row = styled.div<IFlexProps>`
+export const Row = styled.div<FlexProps>`
   display: flex;
   flex-direction: row;
   justify-content: ${({ justifyContent }) => justifyContent ?? "start"};
@@ -18,7 +18,7 @@ export const Row = styled.div<IFlexProps>`
   width: ${({ mainAxisSize }) => (mainAxisSize === "fit-content" ? "fit-content" : "100%")};
 `;
 
-export const Column = styled.div<IFlexProps>`
+export const Column = styled.div<FlexProps>`
   display: flex;
   flex-direction: column;
   justify-content: ${({ justifyContent }) => justifyContent ?? "start"};
diff --git a/src/components/Header/MobileMenu.tsx b/src/components/Header/MobileMenu.tsx
index 157903c8..c14efdb5 100644
--- a/src/components/Header/MobileMenu.tsx
+++ b/src/components/Header/MobileMenu.tsx
@@ -12,14 +12,14 @@ import { SmartFlex } from "../SmartFlex";
 import { MenuNav } from "./MenuNav";
 import WalletAddressButton from "./WalletAddressButton";
 
-interface IProps {
+interface MobileMenuProps {
   isOpen: boolean;
   onAccountClick: () => void;
   onWalletConnect: () => void;
   onClose: () => void;
 }
 
-const MobileMenu: React.FC<IProps> = observer(({ isOpen, onAccountClick, onWalletConnect, onClose }) => {
+const MobileMenu: React.FC<MobileMenuProps> = observer(({ isOpen, onAccountClick, onWalletConnect, onClose }) => {
   const { accountStore } = useStores();
 
   const handleAccountClick = () => {
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 1c322133..c989f3a2 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -1,7 +1,7 @@
 import React, { ChangeEvent } from "react";
 import styled from "@emotion/styled";
 
-interface IProps
+interface InputProps
   extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "onChange"> {
   value?: string;
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
@@ -28,7 +28,7 @@ const Root = styled.div`
   }
 `;
 
-const Input: React.FC<IProps> = ({ value, onChange, placeholder, disabled, ...rest }) => {
+const Input: React.FC<InputProps> = ({ value, onChange, placeholder, disabled, ...rest }) => {
   return (
     <>
       <Root {...rest}>
diff --git a/src/components/MenuOverlay.tsx b/src/components/MenuOverlay.tsx
index 7810161f..ff398307 100644
--- a/src/components/MenuOverlay.tsx
+++ b/src/components/MenuOverlay.tsx
@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
 
 import { SmartFlex } from "./SmartFlex";
 
-interface IProps {
+interface MenuOverlayProps {
   isOpen: boolean;
   top?: number;
   offsetTop?: number;
@@ -11,7 +11,7 @@ interface IProps {
   children?: React.ReactNode;
 }
 
-const MenuOverlay: React.FC<IProps> = ({ isOpen, children, top = 0, offsetTop = 0, zIndex = 200 }) => {
+const MenuOverlay: React.FC<MenuOverlayProps> = ({ isOpen, children, top = 0, offsetTop = 0, zIndex = 200 }) => {
   const fullOffset = top + offsetTop;
 
   useLayoutEffect(() => {
diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
index d82273c1..e0f01372 100644
--- a/src/components/SearchInput.tsx
+++ b/src/components/SearchInput.tsx
@@ -8,14 +8,14 @@ import search from "@assets/icons/search.svg";
 
 import Input from "./Input";
 
-interface IProps {
+interface WrapProps {
   value: string;
   onChange: (v: string) => void;
   placeholder?: string;
   variant?: "default" | "transparent";
 }
 
-const Wrap = styled.div<{ variant: IProps["variant"] }>`
+const Wrap = styled.div<{ variant: WrapProps["variant"] }>`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -58,7 +58,7 @@ const Wrap = styled.div<{ variant: IProps["variant"] }>`
   }}
 `;
 
-const SearchInput: React.FC<IProps> = ({ value, onChange, placeholder, variant = "default" }) => {
+const SearchInput: React.FC<WrapProps> = ({ value, onChange, placeholder, variant = "default" }) => {
   return (
     <Wrap variant={variant}>
       <img alt="search" src={search} width={24} />
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 5310ed96..e448ceb3 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -10,24 +10,24 @@ import { Column } from "./Flex";
 import Text, { TEXT_TYPES_MAP } from "./Text";
 import Tooltip from "./Tooltip";
 
-interface IOption<T = string> {
+interface SelectOption<T = string> {
   key: T;
   title: string | JSX.Element;
   value?: string | number;
   disabled?: boolean;
 }
 
-interface IProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
-  options: IOption<T>[];
+interface SelectProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  options: SelectOption<T>[];
   selected?: T;
-  onSelect: (option: IOption<T>, index: number) => void;
+  onSelect: (option: SelectOption<T>, index: number) => void;
   label?: string;
 }
 
-const Select = <T,>({ options, selected, onSelect, label, ...rest }: IProps<T>) => {
+const Select = <T,>({ options, selected, onSelect, label, ...rest }: SelectProps<T>) => {
   const [isVisible, setIsVisible] = useState(false);
   const selectedOption = options.find(({ key }) => selected === key);
-  const handleSelectClick = (v: IOption<T>, index: number) => {
+  const handleSelectClick = (v: SelectOption<T>, index: number) => {
     onSelect(v, index);
     setIsVisible(false);
   };
diff --git a/src/components/SelectAssets/AssetBlock.tsx b/src/components/SelectAssets/AssetBlock.tsx
index dfeb7ca1..cec99ae1 100644
--- a/src/components/SelectAssets/AssetBlock.tsx
+++ b/src/components/SelectAssets/AssetBlock.tsx
@@ -13,7 +13,7 @@ import BN from "@utils/BN";
 
 import { AssetBlockData } from "./SelectAssetsInput";
 
-export interface IAssetBlock {
+export interface AssetBlockProps {
   options: {
     showBalance?: "balance" | "walletBalance" | "contractBalance";
     showNullBalance?: boolean;
@@ -24,7 +24,7 @@ export interface IAssetBlock {
   type?: "rounded" | "square";
 }
 
-const AssetBlock: React.FC<IAssetBlock> = observer(
+const AssetBlock: React.FC<AssetBlockProps> = observer(
   ({
     styleToken,
     options: { showBalance = "balance", showNullBalance = true, isShowBalance = true },
diff --git a/src/components/SelectAssets/SelectAssetsInput.tsx b/src/components/SelectAssets/SelectAssetsInput.tsx
index 18589c10..7eef2356 100644
--- a/src/components/SelectAssets/SelectAssetsInput.tsx
+++ b/src/components/SelectAssets/SelectAssetsInput.tsx
@@ -3,7 +3,7 @@ import { useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 
 import Button from "@components/Button";
-import { IAssetBlock } from "@components/SelectAssets/AssetBlock";
+import { AssetBlockProps } from "@components/SelectAssets/AssetBlock";
 import { SmartFlex } from "@components/SmartFlex";
 import { BigNumberInput } from "@components/TokenInput/BigNumberInput";
 
@@ -32,7 +32,7 @@ interface IProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
   onChangeValue: (value: BN) => void;
   label?: string;
   dataAssets: AssetBlockData[];
-  showBalance: IAssetBlock["options"]["showBalance"];
+  showBalance: AssetBlockProps["options"]["showBalance"];
   amount: BN;
   decimals?: number;
 }
diff --git a/src/components/SizedBox.tsx b/src/components/SizedBox.tsx
index e4cc9f83..792dbf10 100644
--- a/src/components/SizedBox.tsx
+++ b/src/components/SizedBox.tsx
@@ -1,9 +1,9 @@
 import React, { HTMLAttributes } from "react";
-interface IProps extends HTMLAttributes<HTMLDivElement> {
+interface SizedBoxProps extends HTMLAttributes<HTMLDivElement> {
   width?: number;
   height?: number;
 }
-const SizedBox: React.FunctionComponent<IProps> = ({ width, height, style, ...rest }) => (
+const SizedBox: React.FunctionComponent<SizedBoxProps> = ({ width, height, style, ...rest }) => (
   <div style={{ width, height, display: "flex", flex: "0 0 auto", ...style }} {...rest} />
 );
 
diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx
index 18d9c117..22e6bcb7 100644
--- a/src/components/Slider.tsx
+++ b/src/components/Slider.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "@emotion/styled";
-import RCSlider, { SliderProps } from "rc-slider";
+import RCSlider, { SliderProps as RcSliderProps } from "rc-slider";
 
 import { Row } from "@components/Flex";
 import { TEXT_TYPES_MAP } from "@components/Text";
@@ -8,13 +8,13 @@ import { media } from "@themes/breakpoints";
 
 import "rc-slider/assets/index.css";
 
-interface IProps {
+interface SliderProps {
   percent?: number;
   symbol?: string;
   fixSize?: number;
 }
 
-const Slider: React.FC<SliderProps & IProps> = (props) => (
+const Slider: React.FC<SliderProps & RcSliderProps> = (props) => (
   <Root>
     <DotsContainer>
       {Array.from({ length: 10 }, (_, i) => (
@@ -69,7 +69,7 @@ const Root = styled.div`
   }
 `;
 
-const StyledSlider = styled(RCSlider)<IProps>`
+const StyledSlider = styled(RCSlider)<SliderProps>`
   padding: 0;
 
   .rc-slider-rail {
diff --git a/src/components/Tab.tsx b/src/components/Tab.tsx
index 10c9e014..546f5370 100644
--- a/src/components/Tab.tsx
+++ b/src/components/Tab.tsx
@@ -2,12 +2,12 @@ import styled from "@emotion/styled";
 
 import Text from "@components/Text";
 
-interface IProps {
+interface TabProps {
   active?: boolean;
   disabled?: boolean;
 }
 
-const Tab = styled(Text)<IProps>`
+const Tab = styled(Text)<TabProps>`
   display: flex;
   height: 34px;
   align-items: center;
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index 10647684..c30b9072 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -8,7 +8,7 @@ import Text, { TEXT_TYPES_MAP } from "@components/Text";
 import { SmartFlex } from "./SmartFlex";
 import Tooltip from "./Tooltip";
 
-interface IProps {
+interface TableProps {
   columns: ColumnDef<any, any>[];
   data: any[];
   fitContent?: boolean;
@@ -16,7 +16,7 @@ interface IProps {
   loading?: boolean;
 }
 
-const Table: React.FC<IProps> = observer(({ columns, data, fitContent, withHover, loading, ...rest }) => {
+const Table: React.FC<TableProps> = observer(({ columns, data, fitContent, withHover, loading, ...rest }) => {
   const table = useReactTable({
     columns,
     data,
diff --git a/src/components/Text.tsx b/src/components/Text.tsx
index e49ea606..0bcc752d 100644
--- a/src/components/Text.tsx
+++ b/src/components/Text.tsx
@@ -156,7 +156,7 @@ export const TEXT_TYPES_MAP = {
 
 type TEXT_TYPES = keyof typeof TEXT_TYPES_MAP;
 
-interface IProps {
+interface TextProps {
   type?: TEXT_TYPES;
   uppercase?: boolean;
   primary?: boolean;
@@ -169,7 +169,7 @@ interface IProps {
   attention?: boolean;
 }
 
-const Text = styled.div<IProps>`
+const Text = styled.div<TextProps>`
   white-space: ${({ nowrap }) => (nowrap ? "nowrap" : "normal")};
   ${({ attention, primary, secondary, greenLight, disabled, theme, color }) =>
     (() => {
diff --git a/src/components/TokenInput/AmountInput.tsx b/src/components/TokenInput/AmountInput.tsx
index 856b694e..1490de03 100644
--- a/src/components/TokenInput/AmountInput.tsx
+++ b/src/components/TokenInput/AmountInput.tsx
@@ -1,15 +1,15 @@
 import React from "react";
 import styled from "@emotion/styled";
 
-type TProps = React.InputHTMLAttributes<HTMLInputElement> & {
+type AmountInputProps = {
   small?: boolean;
   onWheel?: React.WheelEventHandler<HTMLInputElement>;
   onBlur?: React.FocusEventHandler<HTMLInputElement>;
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   inputRef?: React.RefObject<HTMLInputElement>;
-};
+} & React.InputHTMLAttributes<HTMLInputElement>;
 
-const AmountInput: React.FC<TProps> = ({ onWheel, inputRef, ...props }) => (
+const AmountInput: React.FC<AmountInputProps> = ({ onWheel, inputRef, ...props }) => (
   <Root
     {...props}
     ref={inputRef}
diff --git a/src/components/TokenInput/TokenInput.tsx b/src/components/TokenInput/TokenInput.tsx
index 4e941555..19e8319a 100644
--- a/src/components/TokenInput/TokenInput.tsx
+++ b/src/components/TokenInput/TokenInput.tsx
@@ -13,7 +13,7 @@ import { FuelNetwork } from "@blockchain";
 import AmountInput from "./AmountInput";
 import { BigNumberInput } from "./BigNumberInput";
 
-interface IProps {
+interface TokenInputProps {
   assetId?: string;
   decimals: number;
   displayDecimals?: number;
@@ -32,7 +32,7 @@ interface IProps {
   isShowMax?: boolean;
 }
 
-const TokenInput: React.FC<IProps> = observer((props) => {
+const TokenInput: React.FC<TokenInputProps> = observer((props) => {
   const bcNetwork = FuelNetwork.getInstance();
 
   const [focused, setFocused] = useState(false);
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 3a442141..55bbc2db 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -4,7 +4,7 @@ import { usePopperTooltip } from "react-popper-tooltip";
 import { Config } from "react-popper-tooltip/dist/types";
 import styled from "@emotion/styled";
 
-interface IProps {
+interface TooltipProps {
   content: string | JSX.Element;
   config?: Config;
   fixed?: boolean;
@@ -13,7 +13,7 @@ interface IProps {
   children: React.ReactNode;
 }
 
-const Tooltip: React.FC<IProps> = ({ containerStyles, rootStyles, children, content, config }) => {
+const Tooltip: React.FC<TooltipProps> = ({ containerStyles, rootStyles, children, content, config }) => {
   const { getTooltipProps, setTooltipRef, setTriggerRef, triggerRef, visible } = usePopperTooltip({
     ...config,
   });
diff --git a/src/hooks/useMedia.ts b/src/hooks/useMedia.ts
index 3467837f..ae0d651f 100644
--- a/src/hooks/useMedia.ts
+++ b/src/hooks/useMedia.ts
@@ -2,14 +2,14 @@ import { breakpoints, BreakPointTypes } from "@themes/breakpoints";
 
 import { useWindowSize } from "./useWindowSize";
 
-type TMediaBreakpoints = Record<BreakPointTypes, boolean>;
-export interface IMedia extends TMediaBreakpoints {
+type MediaBreakpoints = Record<BreakPointTypes, boolean>;
+export interface Media extends MediaBreakpoints {
   currentMedia: BreakPointTypes;
 }
 
-export const useMedia = (): IMedia => {
+export const useMedia = (): Media => {
   const { width } = useWindowSize();
-  const media: TMediaBreakpoints = {
+  const media: MediaBreakpoints = {
     mobile: width <= breakpoints.mobile,
     desktop: width > breakpoints.mobile,
   };
diff --git a/src/screens/Assets/ActionModal.tsx b/src/screens/Assets/ActionModal.tsx
index 44be95e0..1f826eec 100644
--- a/src/screens/Assets/ActionModal.tsx
+++ b/src/screens/Assets/ActionModal.tsx
@@ -3,7 +3,7 @@ import { useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import { motion } from "framer-motion";
 
-import { IAssetBlock } from "@components/SelectAssets/AssetBlock";
+import { AssetBlockProps } from "@components/SelectAssets/AssetBlock";
 import { SmartFlex } from "@components/SmartFlex";
 import Text from "@components/Text";
 import { media } from "@themes/breakpoints";
@@ -21,7 +21,7 @@ import { getExplorerLinkByHash } from "@utils/getExplorerLink";
 export type ActionModal = {
   hash: string;
   transactionInfo: {
-    token: IAssetBlock["token"];
+    token: AssetBlockProps["token"];
     type: TypeTransaction;
     amount: string;
   };
diff --git a/src/screens/Assets/BalanceBlock/BalanceBlock.tsx b/src/screens/Assets/BalanceBlock/BalanceBlock.tsx
index 427471e7..aa1bf137 100644
--- a/src/screens/Assets/BalanceBlock/BalanceBlock.tsx
+++ b/src/screens/Assets/BalanceBlock/BalanceBlock.tsx
@@ -11,14 +11,14 @@ import { useStores } from "@stores";
 import { DEFAULT_DECIMALS } from "@constants";
 import BN from "@utils/BN";
 
-interface IBalanceBlock {
+interface BalanceBlockProps {
   icon: React.ReactElement;
   nameWallet: string;
   token: AssetBlockData;
   showBalance: "balance" | "walletBalance" | "contractBalance";
 }
 
-export const BalanceBlock: React.FC<IBalanceBlock> = ({ icon, nameWallet, token, showBalance }) => {
+export const BalanceBlock: React.FC<BalanceBlockProps> = ({ icon, nameWallet, token, showBalance }) => {
   const { oracleStore } = useStores();
   const theme = useTheme();
   const price = BN.formatUnits(oracleStore.getTokenIndexPrice(token.asset.priceFeed), DEFAULT_DECIMALS);
diff --git a/src/screens/Assets/DepositAssets/DepositAssets.tsx b/src/screens/Assets/DepositAssets/DepositAssets.tsx
index 14e30e1f..2aaa2ead 100644
--- a/src/screens/Assets/DepositAssets/DepositAssets.tsx
+++ b/src/screens/Assets/DepositAssets/DepositAssets.tsx
@@ -4,7 +4,7 @@ import styled from "@emotion/styled";
 import { observer } from "mobx-react";
 
 import Button from "@components/Button";
-import { IAssetBlock } from "@components/SelectAssets/AssetBlock";
+import { AssetBlockProps } from "@components/SelectAssets/AssetBlock";
 import SelectAssetsInput from "@components/SelectAssets/SelectAssetsInput";
 import { SmartFlex } from "@components/SmartFlex";
 import Text from "@components/Text";
@@ -29,7 +29,7 @@ interface DepositAssetsProps {
 const DepositAssets: React.FC<DepositAssetsProps> = observer(({ setStep }) => {
   const { quickAssetsStore, balanceStore } = useStores();
 
-  const [currentAsset, setCurrentAssets] = useState<IAssetBlock["token"]>();
+  const [currentAsset, setCurrentAssets] = useState<AssetBlockProps["token"]>();
   const [amount, setAmount] = useState(BN.ZERO);
   const [isLoading, setIsLoading] = useState(false);
 
diff --git a/src/screens/Assets/WithdrawAssets/WithdrawAssets.tsx b/src/screens/Assets/WithdrawAssets/WithdrawAssets.tsx
index b64b710d..a4050baf 100644
--- a/src/screens/Assets/WithdrawAssets/WithdrawAssets.tsx
+++ b/src/screens/Assets/WithdrawAssets/WithdrawAssets.tsx
@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
 import { observer } from "mobx-react";
 
 import Button from "@components/Button";
-import { IAssetBlock } from "@components/SelectAssets/AssetBlock";
+import { AssetBlockProps } from "@components/SelectAssets/AssetBlock";
 import SelectAssetsInput from "@components/SelectAssets/SelectAssetsInput";
 import { SmartFlex } from "@components/SmartFlex";
 import Text from "@components/Text";
@@ -29,7 +29,7 @@ interface WithdrawAssets {
 export interface ShowAction {
   hash: string;
   transactionInfo: {
-    token: IAssetBlock["token"];
+    token: AssetBlockProps["token"];
     type: TypeTransaction;
     amount: string;
   };
@@ -38,7 +38,7 @@ export interface ShowAction {
 const WithdrawAssets = observer(({ setStep }: WithdrawAssets) => {
   const { quickAssetsStore, balanceStore } = useStores();
 
-  const [activeAsset, setActiveAsset] = useState<IAssetBlock["token"]>();
+  const [activeAsset, setActiveAsset] = useState<AssetBlockProps["token"]>();
   const [amount, setAmount] = useState(BN.ZERO);
   const [isLoading, setIsLoading] = useState(false);
 
diff --git a/src/screens/Faucet/Faucet.tsx b/src/screens/Faucet/Faucet.tsx
index 76632932..38db63ee 100644
--- a/src/screens/Faucet/Faucet.tsx
+++ b/src/screens/Faucet/Faucet.tsx
@@ -15,9 +15,9 @@ import TokensFaucetTable from "@screens/Faucet/TokensFaucetTable";
 
 import { ROUTES } from "@constants";
 
-interface IProps {}
+interface FaucetProps {}
 
-const Faucet: React.FC<IProps> = observer(() => {
+const Faucet: React.FC<FaucetProps> = observer(() => {
   const { faucetStore, mixPanelStore, accountStore } = useStores();
 
   useEffect(() => {
diff --git a/src/screens/Faucet/MintButtons.tsx b/src/screens/Faucet/MintButtons.tsx
index 6500dd5b..b844cc05 100644
--- a/src/screens/Faucet/MintButtons.tsx
+++ b/src/screens/Faucet/MintButtons.tsx
@@ -5,12 +5,12 @@ import Button from "@components/Button";
 
 import { useStores } from "@stores";
 
-interface IProps {
+interface MintButtonsProps {
   assetId: string;
   disabled?: boolean;
 }
 
-const MintButtons: React.FC<IProps> = observer(({ assetId, disabled }) => {
+const MintButtons: React.FC<MintButtonsProps> = observer(({ assetId, disabled }) => {
   const { faucetStore } = useStores();
 
   if (!faucetStore.initialized) {
diff --git a/src/screens/SpotScreen/MarketStatisticsBar.tsx b/src/screens/SpotScreen/MarketStatisticsBar.tsx
index af636d6e..1ac4bbac 100644
--- a/src/screens/SpotScreen/MarketStatisticsBar.tsx
+++ b/src/screens/SpotScreen/MarketStatisticsBar.tsx
@@ -17,14 +17,14 @@ import MarketStatisticsBarSkeletonWrapper from "../../components/Skeletons/Marke
 
 import MarketStatistics from "./MarketStatistics";
 
-interface IProps {
+interface MarketStatisticsBarProps {
   isChartOpen?: boolean;
   onSwitchClick?: () => void;
 }
 
 export const MARKET_SELECTOR_ID = "market-selector";
 
-const MarketStatisticsBar: React.FC<IProps> = observer(({ isChartOpen, onSwitchClick }) => {
+const MarketStatisticsBar: React.FC<MarketStatisticsBarProps> = observer(({ isChartOpen, onSwitchClick }) => {
   const { tradeStore } = useStores();
   const media = useMedia();
 
diff --git a/src/screens/SpotScreen/OrderbookAndTradesInterface/SpotOrderBook/SpotOrderBook.tsx b/src/screens/SpotScreen/OrderbookAndTradesInterface/SpotOrderBook/SpotOrderBook.tsx
index ca794868..17105b04 100644
--- a/src/screens/SpotScreen/OrderbookAndTradesInterface/SpotOrderBook/SpotOrderBook.tsx
+++ b/src/screens/SpotScreen/OrderbookAndTradesInterface/SpotOrderBook/SpotOrderBook.tsx
@@ -29,7 +29,7 @@ import { SpotMarketOrder } from "@entity";
 import OrderbookAndTradesSkeletonWrapper from "../../../../components/Skeletons/OrderbookAndTradesSkeletonWrapper";
 import { ORDER_MODE, useCreateOrderVM } from "../../RightBlock/CreateOrder/CreateOrderVM";
 
-interface IProps extends HTMLAttributes<HTMLDivElement> {}
+interface SpotOrderBookProps extends HTMLAttributes<HTMLDivElement> {}
 
 export enum SPOT_ORDER_FILTER {
   SELL_AND_BUY = 0,
@@ -49,7 +49,7 @@ const SPOT_SETTINGS_ICONS = {
   [SPOT_ORDER_FILTER.BUY]: buyIcon,
 };
 
-export const SpotOrderBook: React.FC<IProps> = observer(() => {
+export const SpotOrderBook: React.FC<SpotOrderBookProps> = observer(() => {
   const { spotOrderBookStore } = useStores();
   const orderSpotVm = useCreateOrderVM();
   const media = useMedia();
diff --git a/src/screens/SpotScreen/RightBlock/MarketSelection/MarketSelection.tsx b/src/screens/SpotScreen/RightBlock/MarketSelection/MarketSelection.tsx
index 4484cc52..3a4f1a85 100644
--- a/src/screens/SpotScreen/RightBlock/MarketSelection/MarketSelection.tsx
+++ b/src/screens/SpotScreen/RightBlock/MarketSelection/MarketSelection.tsx
@@ -19,13 +19,13 @@ import SpotMarketRow from "@screens/SpotScreen/RightBlock/MarketSelection/SpotMa
 
 import { PerpMarket, SpotMarket } from "@entity";
 
-interface IProps {}
+interface MarketSelectionProps {}
 
 const useFilteredMarkets = <T extends SpotMarket | PerpMarket>(markets: T[], searchValue: string) => {
   return markets.filter((market) => market.symbol.includes(searchValue));
 };
 
-const MarketSelection: React.FC<IProps> = observer(() => {
+const MarketSelection: React.FC<MarketSelectionProps> = observer(() => {
   const { tradeStore } = useStores();
   const media = useMedia();
   const [searchValue, setSearchValue] = useState("");
diff --git a/src/screens/SpotScreen/RightBlock/MarketSelection/MarketTitle.tsx b/src/screens/SpotScreen/RightBlock/MarketSelection/MarketTitle.tsx
index ebeec6bd..39354653 100644
--- a/src/screens/SpotScreen/RightBlock/MarketSelection/MarketTitle.tsx
+++ b/src/screens/SpotScreen/RightBlock/MarketSelection/MarketTitle.tsx
@@ -6,12 +6,12 @@ import Text from "@components/Text";
 
 import { SpotMarket } from "@entity";
 
-interface IProps {
+interface MarketTitleProps {
   market: SpotMarket;
   iconSize?: 16 | 24;
 }
 
-export const MarketTitle = ({ market, iconSize = 16 }: IProps) => {
+export const MarketTitle: React.FC<MarketTitleProps> = ({ market, iconSize = 16 }) => {
   return (
     <MarketTitleContainer size={iconSize * 2}>
       <SmartFlex width="fit-content">
diff --git a/src/screens/SpotScreen/RightBlock/MarketSelection/SpotMarketRow.tsx b/src/screens/SpotScreen/RightBlock/MarketSelection/SpotMarketRow.tsx
index a40be432..7ee5fee5 100644
--- a/src/screens/SpotScreen/RightBlock/MarketSelection/SpotMarketRow.tsx
+++ b/src/screens/SpotScreen/RightBlock/MarketSelection/SpotMarketRow.tsx
@@ -18,11 +18,11 @@ import { SpotMarket } from "@entity";
 
 import { MarketTitle } from "./MarketTitle";
 
-interface IProps {
+interface SpotMarketRowProps {
   market: SpotMarket;
 }
 
-const SpotMarketRow: React.FC<IProps> = observer(({ market }) => {
+const SpotMarketRow: React.FC<SpotMarketRowProps> = observer(({ market }) => {
   const { tradeStore, mixPanelStore, accountStore, spotOrderBookStore } = useStores();
   const navigate = useNavigate();
 
diff --git a/src/screens/Stats/StatsTable/MarketSymbol.tsx b/src/screens/Stats/StatsTable/MarketSymbol.tsx
index 0586c93d..8994b851 100644
--- a/src/screens/Stats/StatsTable/MarketSymbol.tsx
+++ b/src/screens/Stats/StatsTable/MarketSymbol.tsx
@@ -6,12 +6,12 @@ import Text from "@components/Text";
 
 import { SpotMarket } from "@entity";
 
-interface IProps {
+interface MarketSymbolProps {
   market: SpotMarket;
   iconSize?: 16 | 24;
 }
 
-export const MarketSymbol = ({ market, iconSize = 16 }: IProps) => {
+export const MarketSymbol = ({ market, iconSize = 16 }: MarketSymbolProps) => {
   return (
     <MarketTitleContainer size={iconSize * 2}>
       <SmartFlex width="fit-content">
diff --git a/src/stores/AccountStore.ts b/src/stores/AccountStore.ts
index 1e873564..6653312f 100644
--- a/src/stores/AccountStore.ts
+++ b/src/stores/AccountStore.ts
@@ -6,7 +6,7 @@ import { FuelNetwork } from "@blockchain";
 
 import RootStore from "./RootStore";
 
-export interface ISerializedAccountStore {
+export interface SerializedAccountStore {
   privateKey: Nullable<string>;
 }
 
@@ -15,7 +15,7 @@ class AccountStore {
 
   constructor(
     private rootStore: RootStore,
-    initState?: ISerializedAccountStore,
+    initState?: SerializedAccountStore,
   ) {
     makeAutoObservable(this);
     if (initState) {
@@ -80,7 +80,7 @@ class AccountStore {
     return !!bcNetwork.getAddress();
   }
 
-  serialize = (): ISerializedAccountStore => {
+  serialize = (): SerializedAccountStore => {
     const bcNetwork = FuelNetwork.getInstance();
     return {
       privateKey: bcNetwork.getPrivateKey() ?? null,
diff --git a/src/stores/DashboardStore.ts b/src/stores/DashboardStore.ts
index 0fea5ba0..3b0190a8 100644
--- a/src/stores/DashboardStore.ts
+++ b/src/stores/DashboardStore.ts
@@ -12,7 +12,7 @@ import { FuelNetwork } from "@blockchain";
 
 import RootStore from "./RootStore";
 
-interface IRecord {
+interface UserRecord {
   user: string;
   market: string;
   tvl: number;
@@ -94,7 +94,7 @@ class DashboardStore {
       const { hour, records_in_hour } = hourData;
       const currentHourValues: { [market: string]: { tvl: number; timestamp: number } } = {};
       records_in_hour.forEach((record) => {
-        const { market, tvl, timestamp }: IRecord = JSON.parse(record);
+        const { market, tvl, timestamp }: UserRecord = JSON.parse(record);
         if (!currentHourValues[market] || currentHourValues[market].timestamp < timestamp) {
           currentHourValues[market] = { tvl, timestamp };
         }
diff --git a/src/stores/QuickAssetsStore.ts b/src/stores/QuickAssetsStore.ts
index f15b54d7..e096c1aa 100644
--- a/src/stores/QuickAssetsStore.ts
+++ b/src/stores/QuickAssetsStore.ts
@@ -2,14 +2,14 @@ import { makeAutoObservable } from "mobx";
 
 import RootStore from "@stores/RootStore";
 
-interface ISerializedQuickAssetsStore {
+interface SerializedQuickAssetsStore {
   quickAssets?: boolean;
 }
 
 class QuickAssetsStore {
   private readonly rootStore: RootStore;
 
-  constructor(rootStore: RootStore, initState?: ISerializedQuickAssetsStore) {
+  constructor(rootStore: RootStore, initState?: SerializedQuickAssetsStore) {
     this.rootStore = rootStore;
     makeAutoObservable(this);
     if (initState) {
@@ -23,7 +23,7 @@ class QuickAssetsStore {
   currentStep: number = 0;
   setCurrentStep = (v: number) => (this.currentStep = v);
 
-  serialize = (): ISerializedQuickAssetsStore => ({
+  serialize = (): SerializedQuickAssetsStore => ({
     quickAssets: this.openQuickAssets,
   });
 }
diff --git a/src/stores/RootStore.ts b/src/stores/RootStore.ts
index 1deb2500..296f92e3 100644
--- a/src/stores/RootStore.ts
+++ b/src/stores/RootStore.ts
@@ -1,14 +1,14 @@
 import { autorun, makeAutoObservable } from "mobx";
 
-import AccountStore, { ISerializedAccountStore } from "@stores/AccountStore";
+import AccountStore, { SerializedAccountStore } from "@stores/AccountStore";
 import DashboardStore from "@stores/DashboardStore";
 import FaucetStore from "@stores/FaucetStore";
 import LeaderboardStore from "@stores/LeaderboardStore";
 import MixPanelStore from "@stores/MixPanelStore";
 import NotificationStore from "@stores/NotificationStore";
 import QuickAssetsStore from "@stores/QuickAssetsStore";
-import SettingsStore, { ISerializedSettingStore } from "@stores/SettingsStore";
-import TradeStore, { ISerializedTradeStore } from "@stores/TradeStore";
+import SettingsStore, { SerializedSettingStore } from "@stores/SettingsStore";
+import TradeStore, { SerializedTradeStore } from "@stores/TradeStore";
 
 import { saveState } from "@utils/localStorage";
 
@@ -18,10 +18,10 @@ import OracleStore from "./OracleStore";
 import SpotOrderBookStore from "./SpotOrderBookStore";
 import SwapStore from "./SwapStore";
 
-export interface ISerializedRootStore {
-  accountStore?: ISerializedAccountStore;
-  tradeStore?: ISerializedTradeStore;
-  settingStore?: ISerializedSettingStore;
+export interface SerializedRootStore {
+  accountStore?: SerializedAccountStore;
+  tradeStore?: SerializedTradeStore;
+  settingStore?: SerializedSettingStore;
 }
 
 export default class RootStore {
@@ -41,7 +41,7 @@ export default class RootStore {
   dashboardStore: DashboardStore;
   leaderboardStore: LeaderboardStore;
 
-  private constructor(initState?: ISerializedRootStore) {
+  private constructor(initState?: SerializedRootStore) {
     this.notificationStore = new NotificationStore(this);
     this.accountStore = new AccountStore(this, initState?.accountStore);
     this.oracleStore = new OracleStore(this);
@@ -67,7 +67,7 @@ export default class RootStore {
     );
   }
 
-  static create = (initState?: ISerializedRootStore) => {
+  static create = (initState?: SerializedRootStore) => {
     if (!RootStore.instance) {
       RootStore.instance = new RootStore(initState);
     }
@@ -79,7 +79,7 @@ export default class RootStore {
     return this.accountStore.initialized && this.tradeStore.initialized;
   }
 
-  serialize = (): ISerializedRootStore => ({
+  serialize = (): SerializedRootStore => ({
     accountStore: this.accountStore.serialize(),
     tradeStore: this.tradeStore.serialize(),
     settingStore: this.settingsStore.serialize(),
diff --git a/src/stores/SettingsStore.ts b/src/stores/SettingsStore.ts
index a110c6e4..ebf57239 100644
--- a/src/stores/SettingsStore.ts
+++ b/src/stores/SettingsStore.ts
@@ -8,7 +8,7 @@ import RootStore from "@stores/RootStore";
 
 import { ORDER_TYPE } from "@screens/SpotScreen/RightBlock/CreateOrder/CreateOrderVM";
 
-export interface ISerializedSettingStore {
+export interface SerializedSettingStore {
   isUserAgreedWithTerms?: boolean;
   isShowDepositInfo?: string[];
   isCompleteOnboardingProcess?: boolean;
@@ -28,7 +28,7 @@ class SettingsStore {
   private readonly rootStore: RootStore;
   selectedTheme: THEME_TYPE = THEME_TYPE.DARK_THEME;
 
-  constructor(rootStore: RootStore, initState?: ISerializedSettingStore) {
+  constructor(rootStore: RootStore, initState?: SerializedSettingStore) {
     this.rootStore = rootStore;
     makeAutoObservable(this);
     if (initState) {
@@ -64,7 +64,7 @@ class SettingsStore {
   timeInForce: LimitType = LimitType.MKT;
   setTimeInForce = (v: LimitType) => (this.timeInForce = v);
 
-  serialize = (): ISerializedSettingStore => ({
+  serialize = (): SerializedSettingStore => ({
     isUserAgreedWithTerms: this.isUserAgreedWithTerms,
     isCompleteOnboardingProcess: this.isCompleteOnboardingProcess,
     isInfoDashboardPerHours: this.isInfoDashboardPerHours,
diff --git a/src/stores/TradeStore.ts b/src/stores/TradeStore.ts
index 16abf4e6..55221657 100644
--- a/src/stores/TradeStore.ts
+++ b/src/stores/TradeStore.ts
@@ -14,7 +14,7 @@ import { FuelNetwork } from "@blockchain";
 import { SpotMarketVolume } from "@blockchain/types";
 import { PerpMarket, SpotMarket } from "@entity";
 
-export interface ISerializedTradeStore {
+export interface SerializedTradeStore {
   favMarkets: Nullable<string>;
 }
 
@@ -52,7 +52,7 @@ class TradeStore {
   private marketInfoUpdater: IntervalUpdater;
   private marketPricesUpdater: IntervalUpdater;
 
-  constructor(rootStore: RootStore, initState?: ISerializedTradeStore) {
+  constructor(rootStore: RootStore, initState?: SerializedTradeStore) {
     this.rootStore = rootStore;
     makeAutoObservable(this);
 
@@ -239,7 +239,7 @@ class TradeStore {
 
   fetchTradeFeeDebounce = _.debounce(this.fetchTradeFee, 250);
 
-  serialize = (): ISerializedTradeStore => ({
+  serialize = (): SerializedTradeStore => ({
     favMarkets: this.favMarkets.join(","),
   });
 
diff --git a/src/themes/ThemeProvider.tsx b/src/themes/ThemeProvider.tsx
index 4232dc00..208b4db5 100644
--- a/src/themes/ThemeProvider.tsx
+++ b/src/themes/ThemeProvider.tsx
@@ -10,14 +10,14 @@ export enum THEME_TYPE {
   DARK_THEME = "darkTheme",
 }
 
-interface IProps {
+interface ThemeWrapperProps {
   children: React.ReactNode;
 }
 
 export const themes = {
   darkTheme,
 };
-const ThemeWrapper: React.FC<IProps> = observer(({ children }) => {
+const ThemeWrapper: React.FC<ThemeWrapperProps> = observer(({ children }) => {
   const { settingsStore } = useStores();
   return <ThemeProvider theme={themes[settingsStore.selectedTheme]}>{children}</ThemeProvider>;
 });
diff --git a/src/typings/emotion.d.ts b/src/typings/emotion.d.ts
index 8ffd4590..48945310 100644
--- a/src/typings/emotion.d.ts
+++ b/src/typings/emotion.d.ts
@@ -2,10 +2,10 @@ import {themes} from "@themes/ThemeProvider";
 
 import "@emotion/react";
 
-export type TColorType = typeof themes.darkTheme.colors
+export type ColorType = typeof themes.darkTheme.colors
 
 declare module "@emotion/react" {
     export interface Theme {
-        colors: TColorType;
+        colors: ColorType;
     }
 }
diff --git a/src/utils/localStorage.ts b/src/utils/localStorage.ts
index 9bfd6d3c..9bb96262 100644
--- a/src/utils/localStorage.ts
+++ b/src/utils/localStorage.ts
@@ -1,6 +1,6 @@
-import { ISerializedRootStore } from "@stores/RootStore";
+import { SerializedRootStore } from "@stores/RootStore";
 
-export const loadState = (): ISerializedRootStore | undefined => {
+export const loadState = (): SerializedRootStore | undefined => {
   try {
     const raw = localStorage.getItem("spark-store") ?? localStorage.getItem("spark-store");
     const state = JSON.parse(raw as string);
@@ -10,6 +10,6 @@ export const loadState = (): ISerializedRootStore | undefined => {
     return undefined;
   }
 };
-export const saveState = (state: ISerializedRootStore): void => {
+export const saveState = (state: SerializedRootStore): void => {
   localStorage.setItem("spark-store", JSON.stringify(state));
 };