diff --git a/components/Button.tsx b/components/Button.tsx
index 9b15b694..f4073308 100644
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -12,7 +12,7 @@ const Button = React.forwardRef<any, Props>(
     <button
       ref={ref}
       onClick={onClick}
-      className={`rounded-3xl bg-green-500 py-2 px-5 text-white text-sm font-semibold overflow-hidden text-ellipsis ${className} ${
+      className={`overflow-hidden text-ellipsis rounded-3xl bg-green-500 py-2 px-5 text-sm font-semibold text-white ${className} ${
         disabled ? 'opacity-40' : ''
       }`}
       disabled={disabled}
diff --git a/components/ConnectModal.tsx b/components/ConnectModal.tsx
index 8f895091..a2261987 100644
--- a/components/ConnectModal.tsx
+++ b/components/ConnectModal.tsx
@@ -19,8 +19,8 @@ type Props = {
 const ConnectModal = ({ isOpen, onClose }: Props) => {
   const [isLoading, setIsLoading] = useState(false)
 
-  const actions = useWalletStore((state) => state.actions)
-  const metamaskInstalled = useWalletStore((state) => state.metamaskInstalled)
+  const actions = useWalletStore((s) => s.actions)
+  const metamaskInstalled = useWalletStore((s) => s.metamaskInstalled)
   const isKeplrInstalled = typeof window !== 'undefined' && window.keplr
 
   const handleConnectSuccess = () => {
@@ -108,13 +108,13 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
               leaveTo="opacity-0 scale-95"
             >
               <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
-                <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900 mb-6">
+                <Dialog.Title as="h3" className="mb-6 text-lg font-medium leading-6 text-gray-900">
                   Connect your wallet
                 </Dialog.Title>
                 {isLoading ? (
                   <div role="status" className="text-center">
                     <svg
-                      className="inline w-10 h-10 text-gray-200 animate-spin fill-orange-500"
+                      className="inline h-10 w-10 animate-spin fill-orange-500 text-gray-200"
                       viewBox="0 0 100 101"
                       fill="none"
                       xmlns="http://www.w3.org/2000/svg"
@@ -131,10 +131,12 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
                     <span className="sr-only">Loading...</span>
                   </div>
                 ) : (
-                  <div className="flex flex-col gap-3 mt-2">
+                  <div className="mt-2 flex flex-col gap-3">
                     <button
-                      className="flex items-center p-4 bg-black/90 rounded-xl hover:bg-black"
+                      className="flex items-center rounded-xl bg-black/90 p-4 hover:bg-black"
                       onClick={handleConnectMetamask}
+                      // temporarily disable metamask connection as its not supported on osmosis
+                      disabled
                     >
                       <Image src="/wallets/metamask.webp" height={30} width={30} alt="metamask" />
                       <div className="ml-4 text-left">
@@ -156,7 +158,7 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
                       </div>
                     </button>
                     <button
-                      className="flex items-center p-4 bg-black/90 rounded-xl hover:bg-black"
+                      className="flex items-center rounded-xl bg-black/90 p-4 hover:bg-black"
                       onClick={handleConnectKeplr}
                     >
                       <Image src="/wallets/keplr.png" height={30} width={30} alt="keplr" />
diff --git a/components/CreditManager/CreditManagerContainer.tsx b/components/CreditManager/CreditManagerContainer.tsx
index 0e18b1b9..4330ba78 100644
--- a/components/CreditManager/CreditManagerContainer.tsx
+++ b/components/CreditManager/CreditManagerContainer.tsx
@@ -8,7 +8,7 @@ export const CreditManagerContainer = ({
   children: React.ReactNode
   className?: string
 }) => {
-  return <div className={`p-2 bg-[#D8DAEA] rounded-lg text-[#585A74] ${className}`}>{children}</div>
+  return <div className={`rounded-lg bg-[#D8DAEA] p-2 text-[#585A74] ${className}`}>{children}</div>
 }
 
 export default CreditManagerContainer
diff --git a/components/CreditManager/FundAccount.tsx b/components/CreditManager/FundAccount.tsx
index c5bb4040..1580da77 100644
--- a/components/CreditManager/FundAccount.tsx
+++ b/components/CreditManager/FundAccount.tsx
@@ -16,7 +16,7 @@ const FundAccount = () => {
   const [selectedToken, setSelectedToken] = useState('')
   const [enabled, setEnabled] = useState(false)
 
-  const selectedAccount = useCreditManagerStore((state) => state.selectedAccount)
+  const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
 
   const { data: balancesData } = useAllBalances()
   const { data: allowedCoinsData, isLoading: isLoadingAllowedCoins } = useAllowedCoins()
@@ -57,7 +57,7 @@ const FundAccount = () => {
 
   return (
     <>
-      <CreditManagerContainer className="p-3 mb-2">
+      <CreditManagerContainer className="mb-2 p-3">
         <p className="mb-6">
           Transfer assets from your injective wallet to your Mars credit account. If you don’t have
           any assets in your injective wallet use the injective bridge to transfer funds to your
@@ -68,7 +68,7 @@ const FundAccount = () => {
         ) : (
           <>
             <div className="mb-4">
-              <div className="flex justify-between mb-1">
+              <div className="mb-1 flex justify-between">
                 <div>Asset:</div>
                 <select
                   className="bg-transparent"
@@ -89,7 +89,7 @@ const FundAccount = () => {
                 <div>Amount:</div>
                 <input
                   type="number"
-                  className="bg-transparent border border-black/50 px-2"
+                  className="border border-black/50 bg-transparent px-2"
                   value={amount}
                   onChange={(e) => handleValueChange(e.target.valueAsNumber)}
                 />
@@ -98,7 +98,7 @@ const FundAccount = () => {
             <p>In wallet: {walletAmount.toLocaleString()}</p>
             {/* SLIDER - initial implementation to test functionality */}
             {/* TODO: will need to be revamped later on */}
-            <div className="relative flex flex-1 mb-6 items-center">
+            <div className="relative mb-6 flex flex-1 items-center">
               <Slider.Root
                 className="relative flex h-[20px] w-full cursor-pointer touch-none select-none items-center"
                 value={[percentageValue]}
@@ -122,7 +122,7 @@ const FundAccount = () => {
                 </Slider.Thumb>
               </Slider.Root>
               <button
-                className="ml-4 py-1 px-2 text-sm bg-blue-600 text-white rounded-md"
+                className="ml-4 rounded-md bg-blue-600 py-1 px-2 text-sm text-white"
                 onClick={() => setAmount(maxValue)}
               >
                 MAX
@@ -131,7 +131,7 @@ const FundAccount = () => {
           </>
         )}
       </CreditManagerContainer>
-      <CreditManagerContainer className="flex justify-between items-center mb-2">
+      <CreditManagerContainer className="mb-2 flex items-center justify-between">
         <div>
           <h3 className="font-bold">Lending Assets</h3>
           <div className="opacity-50">Lend assets from account to earn yield.</div>
diff --git a/components/CreditManager/index.tsx b/components/CreditManager/index.tsx
index 98c78659..8f69eceb 100644
--- a/components/CreditManager/index.tsx
+++ b/components/CreditManager/index.tsx
@@ -13,8 +13,8 @@ import CreditManagerContainer from './CreditManagerContainer'
 const CreditManager = () => {
   const [isFund, setIsFund] = useState(false)
 
-  const address = useWalletStore((state) => state.address)
-  const selectedAccount = useCreditManagerStore((state) => state.selectedAccount)
+  const address = useWalletStore((s) => s.address)
+  const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
 
   const { data: positionsData, isLoading: isLoadingPositions } = useCreditAccountBalances(
     selectedAccount ?? ''
@@ -32,17 +32,17 @@ const CreditManager = () => {
 
   if (!address) {
     return (
-      <div className="absolute inset-0 left-auto p-2 w-[400px] bg-background-2 border-l border-white/20">
+      <div className="absolute inset-0 left-auto w-[400px] border-l border-white/20 bg-background-2 p-2">
         <CreditManagerContainer>You must have a connected wallet</CreditManagerContainer>
       </div>
     )
   }
 
   return (
-    <div className="absolute inset-0 left-auto p-2 w-[400px] bg-background-2 border-l border-white/20">
+    <div className="absolute inset-0 left-auto w-[400px] border-l border-white/20 bg-background-2 p-2">
       <CreditManagerContainer className="mb-2">
         {isFund ? (
-          <div className="flex justify-between items-center">
+          <div className="flex items-center justify-between">
             <h3 className="font-bold">Fund Account</h3>
             <Button className="rounded-md" onClick={() => setIsFund(false)}>
               Cancel
@@ -50,10 +50,10 @@ const CreditManager = () => {
           </div>
         ) : (
           <div className="flex gap-3">
-            <Button className="rounded-md flex-1" onClick={() => setIsFund(true)}>
+            <Button className="flex-1 rounded-md" onClick={() => setIsFund(true)}>
               Fund
             </Button>
-            <Button className="rounded-md flex-1" onClick={() => alert('TODO')}>
+            <Button className="flex-1 rounded-md" onClick={() => alert('TODO')}>
               Withdraw
             </Button>
           </div>
@@ -64,7 +64,7 @@ const CreditManager = () => {
       ) : (
         <>
           <CreditManagerContainer className="mb-2 text-sm">
-            <div className="flex justify-between mb-1">
+            <div className="mb-1 flex justify-between">
               <div>Total Position:</div>
               <div className="font-semibold">{formatCurrency(totalPosition)}</div>
             </div>
@@ -79,7 +79,7 @@ const CreditManager = () => {
               <div>Loading...</div>
             ) : (
               <>
-                <div className="flex font-semibold text-xs">
+                <div className="flex text-xs font-semibold">
                   <div className="flex-1">Asset</div>
                   <div className="flex-1">Value</div>
                   <div className="flex-1">Size</div>
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
index a6b8bbe4..773a778a 100644
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -58,13 +58,13 @@ const Navigation = () => {
   return (
     <div>
       {/* Main navigation bar */}
-      <div className="flex justify-between items-center px-6 py-3 border-b border-white/20">
+      <div className="flex items-center justify-between border-b border-white/20 px-6 py-3">
         <Link href="/" passHref>
           <a>
             <img src="/logo.svg" alt="mars" />
           </a>
         </Link>
-        <div className="flex px-12 gap-5 text-white/40">
+        <div className="flex gap-5 px-12 text-white/40">
           {navItems.map((item, index) => (
             <NavLink key={index} href={item.href}>
               {item.label}
@@ -74,13 +74,13 @@ const Navigation = () => {
         <Wallet />
       </div>
       {/* Sub navigation bar */}
-      <div className="flex justify-between px-6 py-3 text-sm text-white/40 border-b border-white/20">
+      <div className="flex justify-between border-b border-white/20 px-6 py-3 text-sm text-white/40">
         <div className="flex items-center">
           <SearchInput />
           {firstCreditAccounts.map((account) => (
             <div
               key={account}
-              className={`px-4 hover:text-white cursor-pointer ${
+              className={`cursor-pointer px-4 hover:text-white ${
                 selectedAccount === account ? 'text-white' : ''
               }`}
               onClick={() => setSelectedAccount(account)}
@@ -91,13 +91,13 @@ const Navigation = () => {
           {restCreditAccounts.length > 0 && (
             <Popover className="relative">
               <Popover.Button>
-                <div className="px-3 flex items-center hover:text-white cursor-pointer">
+                <div className="flex cursor-pointer items-center px-3 hover:text-white">
                   More
                   <ChevronDownIcon className="ml-1 h-4 w-4" />
                 </div>
               </Popover.Button>
-              <Popover.Panel className="absolute z-10 pt-2 w-[200px]">
-                <div className="bg-white rounded-2xl p-4 text-gray-900">
+              <Popover.Panel className="absolute z-10 w-[200px] pt-2">
+                <div className="rounded-2xl bg-white p-4 text-gray-900">
                   {restCreditAccounts.map((account) => (
                     <div
                       key={account}
@@ -115,14 +115,14 @@ const Navigation = () => {
           )}
           <Popover className="relative">
             <Popover.Button>
-              <div className="px-3 flex items-center hover:text-white cursor-pointer">
+              <div className="flex cursor-pointer items-center px-3 hover:text-white">
                 Manage
                 <ChevronDownIcon className="ml-1 h-4 w-4" />
               </div>
             </Popover.Button>
-            <Popover.Panel className="absolute z-10 pt-2 w-[200px]">
+            <Popover.Panel className="absolute z-10 w-[200px] pt-2">
               {({ close }) => (
-                <div className="bg-white rounded-2xl p-4 text-gray-900">
+                <div className="rounded-2xl bg-white p-4 text-gray-900">
                   <div
                     className="mb-2 cursor-pointer hover:text-orange-500"
                     onClick={() => {
@@ -158,13 +158,13 @@ const Navigation = () => {
             </Popover.Panel>
           </Popover>
         </div>
-        <div className="flex gap-4 items-center">
+        <div className="flex items-center gap-4">
           <p>{formatCurrency(2500)}</p>
           <div>Lvg</div>
           <div>Risk</div>
           <ProgressBar value={0.43} />
           <div
-            className="flex justify-center w-16 cursor-pointer hover:text-white"
+            className="flex w-16 cursor-pointer justify-center hover:text-white"
             onClick={toggleCreditManager}
           >
             <svg width="14" height="13" viewBox="0 0 14 13" fill="currentColor">
diff --git a/components/ProgressBar.tsx b/components/ProgressBar.tsx
index 2276c233..73791897 100644
--- a/components/ProgressBar.tsx
+++ b/components/ProgressBar.tsx
@@ -19,16 +19,16 @@ const ProgressBar = ({ value }: Props) => {
   const percentageNewValue = `${(newValue * 100).toFixed(0)}%`
 
   return (
-    <div className="relative w-[130px] h-4 bg-black rounded-full z-0">
+    <div className="relative z-0 h-4 w-[130px] rounded-full bg-black">
       <div
-        className="absolute bg-green-500 h-4 rounded-full z-10"
+        className="absolute z-10 h-4 rounded-full bg-green-500"
         style={{ width: percentageValue }}
       />
       <div
-        className="absolute bg-red-500 h-4 rounded-full transition-[width] duration-500"
+        className="absolute h-4 rounded-full bg-red-500 transition-[width] duration-500"
         style={{ width: percentageNewValue }}
       />
-      <div className="absolute w-full text-xs font-medium text-white flex justify-center items-center gap-x-2 z-20">
+      <div className="absolute z-20 flex w-full items-center justify-center gap-x-2 text-xs font-medium text-white">
         {percentageValue}
         <ArrowRightIcon className="h-3 w-3" />
         {percentageNewValue}
diff --git a/components/SearchInput.tsx b/components/SearchInput.tsx
index aac97781..0e56f169 100644
--- a/components/SearchInput.tsx
+++ b/components/SearchInput.tsx
@@ -10,13 +10,13 @@ const SearchInput = () => (
         strokeLinejoin="round"
         strokeWidth="2"
         viewBox="0 0 24 24"
-        className="w-6 h-6"
+        className="h-6 w-6"
       >
         <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
       </svg>
     </span>
     <input
-      className="py-2 text-sm text-white bg-black/70 rounded-md pl-10 focus:outline-none"
+      className="rounded-md bg-black/70 py-2 pl-10 text-sm text-white focus:outline-none"
       placeholder="Search"
     />
   </div>
diff --git a/components/Spinner.tsx b/components/Spinner.tsx
index b3e210dc..d6cd64c5 100644
--- a/components/Spinner.tsx
+++ b/components/Spinner.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 const Spinner = () => {
   return (
     <svg
-      className="animate-spin h-8 w-8"
+      className="h-8 w-8 animate-spin"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
diff --git a/components/Wallet.tsx b/components/Wallet.tsx
index d3e3954d..e6854a0f 100644
--- a/components/Wallet.tsx
+++ b/components/Wallet.tsx
@@ -11,8 +11,8 @@ import { formatWalletAddress } from 'utils/formatters'
 import { chain } from 'utils/chains'
 
 const WalletPopover = ({ children }: { children: React.ReactNode }) => {
-  const address = useWalletStore((state) => state.address)
-  const actions = useWalletStore((state) => state.actions)
+  const address = useWalletStore((s) => s.address)
+  const actions = useWalletStore((s) => s.actions)
 
   const { data } = useTokenBalance()
 
@@ -22,14 +22,14 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
         {children}
       </Popover.Button>
 
-      <Popover.Panel className="absolute z-10 right-0 pt-2">
-        <div className="bg-white rounded-2xl p-6 text-gray-900">
-          <div className="flex justify-between items-center mb-4">
+      <Popover.Panel className="absolute right-0 z-10 pt-2">
+        <div className="rounded-2xl bg-white p-6 text-gray-900">
+          <div className="mb-4 flex items-center justify-between">
             <div className="flex items-center">
               <Image src={chain.stakeCurrency.coinImageUrl} alt="token" width={24} height={24} />
               <p className="ml-2">
                 {chain.stakeCurrency.coinDenom}{' '}
-                <span className="text-lg font-semibold ml-1">{data?.toFixed(2)}</span>
+                <span className="ml-1 text-lg font-semibold">{data?.toFixed(2)}</span>
               </p>
             </div>
             <Button
@@ -41,7 +41,7 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
           </div>
           <p className="mb-6 text-sm">{address}</p>
           <button
-            className="flex items-center text-slate-500 hover:text-slate-700 text-sm"
+            className="flex items-center text-sm text-slate-500 hover:text-slate-700"
             onClick={() => {
               navigator.clipboard.writeText(address).then(() => {
                 toast.success('Address copied to your clipboard')
@@ -53,7 +53,7 @@ const WalletPopover = ({ children }: { children: React.ReactNode }) => {
               viewBox="0 0 24 24"
               strokeWidth={1.5}
               stroke="currentColor"
-              className="w-5 h-5 mr-1"
+              className="mr-1 h-5 w-5"
             >
               <path
                 strokeLinecap="round"
@@ -73,7 +73,7 @@ const Wallet = () => {
   const [showConnectModal, setShowConnectModal] = useState(false)
   const [hasHydrated, setHasHydrated] = useState<boolean>(false)
 
-  const address = useWalletStore((state) => state.address)
+  const address = useWalletStore((s) => s.address)
 
   // avoid server-client hydration mismatch
   useEffect(() => {
diff --git a/hooks/useAllBalances.tsx b/hooks/useAllBalances.tsx
index e2f777d5..78d1b802 100644
--- a/hooks/useAllBalances.tsx
+++ b/hooks/useAllBalances.tsx
@@ -9,7 +9,7 @@ type Result = {
 }
 
 const useAllBalances = () => {
-  const address = useWalletStore((state) => state.address)
+  const address = useWalletStore((s) => s.address)
 
   const result = useQuery<Result>(
     queryKeys.allBalances(address),
diff --git a/hooks/useAllowedCoins.tsx b/hooks/useAllowedCoins.tsx
index eda87ce8..3b8ba198 100644
--- a/hooks/useAllowedCoins.tsx
+++ b/hooks/useAllowedCoins.tsx
@@ -15,7 +15,7 @@ const queryMsg = {
 
 const useAllowedCoins = () => {
   const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
-  const address = useWalletStore((state) => state.address)
+  const address = useWalletStore((s) => s.address)
 
   useEffect(() => {
     ;(async () => {
diff --git a/hooks/useCreateCreditAccount.tsx b/hooks/useCreateCreditAccount.tsx
index 81b4449a..eb0c2848 100644
--- a/hooks/useCreateCreditAccount.tsx
+++ b/hooks/useCreateCreditAccount.tsx
@@ -17,8 +17,8 @@ const executeMsg = {
 
 const useCreateCreditAccount = () => {
   const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
-  const setSelectedAccount = useCreditManagerStore((state) => state.actions.setSelectedAccount)
-  const address = useWalletStore((state) => state.address)
+  const setSelectedAccount = useCreditManagerStore((s) => s.actions.setSelectedAccount)
+  const address = useWalletStore((s) => s.address)
 
   const queryClient = useQueryClient()
 
diff --git a/hooks/useCreditAccountPositions.tsx b/hooks/useCreditAccountPositions.tsx
index c5c22840..64abebb8 100644
--- a/hooks/useCreditAccountPositions.tsx
+++ b/hooks/useCreditAccountPositions.tsx
@@ -41,7 +41,7 @@ interface Result {
 
 const useCreditAccountPositions = (accountId: string) => {
   const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
-  const address = useWalletStore((state) => state.address)
+  const address = useWalletStore((s) => s.address)
 
   useEffect(() => {
     ;(async () => {
diff --git a/hooks/useCreditAccounts.tsx b/hooks/useCreditAccounts.tsx
index 848d2095..00d2e768 100644
--- a/hooks/useCreditAccounts.tsx
+++ b/hooks/useCreditAccounts.tsx
@@ -14,9 +14,9 @@ type Result = {
 
 const useCreditAccounts = () => {
   const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
-  const address = useWalletStore((state) => state.address)
-  const selectedAccount = useCreditManagerStore((state) => state.selectedAccount)
-  const creditManagerActions = useCreditManagerStore((state) => state.actions)
+  const address = useWalletStore((s) => s.address)
+  const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
+  const creditManagerActions = useCreditManagerStore((s) => s.actions)
 
   const queryMsg = useMemo(() => {
     return {
diff --git a/hooks/useDeleteCreditAccount.tsx b/hooks/useDeleteCreditAccount.tsx
index 78fc74da..b042ade0 100644
--- a/hooks/useDeleteCreditAccount.tsx
+++ b/hooks/useDeleteCreditAccount.tsx
@@ -11,7 +11,7 @@ import { queryKeys } from 'types/query-keys-factory'
 
 const useCreateCreditAccount = (accountId: string) => {
   const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
-  const address = useWalletStore((state) => state.address)
+  const address = useWalletStore((s) => s.address)
 
   const queryClient = useQueryClient()
 
diff --git a/hooks/useDepositCreditAccount.tsx b/hooks/useDepositCreditAccount.tsx
index 443992cf..185232ec 100644
--- a/hooks/useDepositCreditAccount.tsx
+++ b/hooks/useDepositCreditAccount.tsx
@@ -11,7 +11,7 @@ import { queryKeys } from 'types/query-keys-factory'
 
 const useDepositCreditAccount = (accountId: string, denom: string, amount: number) => {
   const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
-  const address = useWalletStore((state) => state.address)
+  const address = useWalletStore((s) => s.address)
 
   const queryClient = useQueryClient()
 
diff --git a/hooks/useTokenBalance.tsx b/hooks/useTokenBalance.tsx
index d60d18bd..d6f334d2 100644
--- a/hooks/useTokenBalance.tsx
+++ b/hooks/useTokenBalance.tsx
@@ -13,7 +13,7 @@ type Result = {
 }
 
 const useTokenBalance = (denom?: string) => {
-  const address = useWalletStore((state) => state.address)
+  const address = useWalletStore((s) => s.address)
 
   const result = useQuery<Result>(
     queryKeys.tokenBalance(address, denom || chain.stakeCurrency.coinMinimalDenom),
diff --git a/package.json b/package.json
index e3adbddc..3200ae60 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,8 @@
     "eslint": "8.23.0",
     "eslint-config-next": "12.2.5",
     "postcss": "^8.4.16",
+    "prettier": "^2.7.1",
+    "prettier-plugin-tailwindcss": "^0.1.13",
     "tailwindcss": "^3.1.8",
     "typescript": "4.8.2"
   }
diff --git a/pages/_app.tsx b/pages/_app.tsx
index f71afda0..18462bab 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -19,7 +19,7 @@ async function isMetamaskInstalled(): Promise<boolean> {
 const queryClient = new QueryClient()
 
 function MyApp({ Component, pageProps }: AppProps) {
-  const actions = useWalletStore((state) => state.actions)
+  const actions = useWalletStore((s) => s.actions)
 
   // init store
   useEffect(() => {
diff --git a/pages/borrow.tsx b/pages/borrow.tsx
index 0562e116..1fcb7466 100644
--- a/pages/borrow.tsx
+++ b/pages/borrow.tsx
@@ -5,7 +5,7 @@ import Container from 'components/Container'
 
 const AssetRow = () => {
   return (
-    <div className="flex bg-[#D8DAEA] text-[#585A74] rounded-md p-2">
+    <div className="flex rounded-md bg-[#D8DAEA] p-2 text-[#585A74]">
       <div className="flex flex-1">
         <Image src="/tokens/osmo.svg" alt="token" width={24} height={24} />
         <div className="pl-2">
@@ -32,8 +32,8 @@ const Borrow = () => {
     <div className="flex gap-4">
       <Container className="flex-1">
         <div className="mb-5">
-          <h3 className="font-medium uppercase text-center mb-1">Borrowed</h3>
-          <div className="flex bg-[#D8DAEA] text-[#585A74]/50 text-sm rounded-md p-2 mb-2">
+          <h3 className="mb-1 text-center font-medium uppercase">Borrowed</h3>
+          <div className="mb-2 flex rounded-md bg-[#D8DAEA] p-2 text-sm text-[#585A74]/50">
             <div className="flex-1">Asset</div>
             <div className="flex-1">Borrow Rate</div>
             <div className="flex-1">Borrowed</div>
@@ -48,8 +48,8 @@ const Borrow = () => {
           </div>
         </div>
         <div>
-          <h3 className="font-medium uppercase text-center mb-1">Not Borrowed Yet</h3>
-          <div className="flex bg-[#D8DAEA] text-[#585A74]/50 text-sm rounded-md p-2 mb-2">
+          <h3 className="mb-1 text-center font-medium uppercase">Not Borrowed Yet</h3>
+          <div className="mb-2 flex rounded-md bg-[#D8DAEA] p-2 text-sm text-[#585A74]/50">
             <div className="flex-1">Asset</div>
             <div className="flex-1">Borrow Rate</div>
             <div className="flex-1">Borrowed</div>
diff --git a/pages/index.tsx b/pages/index.tsx
index 0b1f3cf1..26195bec 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -31,8 +31,8 @@ const Home: NextPage = () => {
   const [error, setError] = useState(null)
   const [isLoading, setIsLoading] = useState(false)
 
-  const address = useWalletStore((state) => state.address)
-  const selectedAccount = useCreditManagerStore((state) => state.selectedAccount)
+  const address = useWalletStore((s) => s.address)
+  const selectedAccount = useCreditManagerStore((s) => s.selectedAccount)
   const queryClient = useQueryClient()
 
   const [signingClient, setSigningClient] = useState<SigningCosmWasmClient>()
@@ -248,14 +248,14 @@ const Home: NextPage = () => {
   }
 
   return (
-    <div className="flex flex-col gap-y-6 max-w-6xl mx-auto">
+    <div className="mx-auto flex max-w-6xl flex-col gap-y-6">
       <Container>
-        <h4 className="text-xl mb-5">Send Tokens</h4>
-        <div className="flex flex-wrap gap-2 mb-5">
+        <h4 className="mb-5 text-xl">Send Tokens</h4>
+        <div className="mb-5 flex flex-wrap gap-2">
           <div>
             <p>Address:</p>
             <input
-              className="rounded-lg px-3 py-1 bg-black/40"
+              className="rounded-lg bg-black/40 px-3 py-1"
               value={recipientAddress}
               placeholder="address"
               onChange={(e) => setRecipientAddress(e.target.value)}
@@ -265,7 +265,7 @@ const Home: NextPage = () => {
             <p>Amount:</p>
             <input
               type="number"
-              className="rounded-lg px-3 py-1 bg-black/40"
+              className="rounded-lg bg-black/40 px-3 py-1"
               value={sendAmount}
               placeholder="amount"
               onChange={(e) => setSendAmount(e.target.value)}
@@ -277,25 +277,25 @@ const Home: NextPage = () => {
         </Button>
       </Container>
       <Container>
-        <h4 className="text-xl mb-5">Create Credit Account (Mint NFT)</h4>
+        <h4 className="mb-5 text-xl">Create Credit Account (Mint NFT)</h4>
         <Button className="bg-[#524bb1] hover:bg-[#6962cc]" onClick={handleCreateCreditAccount}>
           Create
         </Button>
       </Container>
       <Container>
-        <h4 className="text-xl mb-5">Get all Credit Accounts</h4>
+        <h4 className="mb-5 text-xl">Get all Credit Accounts</h4>
         <Button className="bg-[#524bb1] hover:bg-[#6962cc]" onClick={handleGetCreditAccounts}>
           Fetch
         </Button>
       </Container>
       <Container>
-        <h4 className="text-xl mb-5">Borrow OSMO</h4>
+        <h4 className="mb-5 text-xl">Borrow OSMO</h4>
         <input
-          className="rounded-lg px-3 py-1 bg-black/40"
+          className="rounded-lg bg-black/40 px-3 py-1"
           type="number"
           onChange={(e) => setBorrowAmount(e.target.valueAsNumber)}
         />
-        <Button className="bg-[#524bb1] hover:bg-[#6962cc] ml-4" onClick={handleBorrowClick}>
+        <Button className="ml-4 bg-[#524bb1] hover:bg-[#6962cc]" onClick={handleBorrowClick}>
           Borrow
         </Button>
       </Container>
@@ -305,7 +305,7 @@ const Home: NextPage = () => {
           <div className="mb-4">
             <div className="flex items-end">
               <h5 className="text-xl font-medium">All Tokens</h5>
-              <p className="text-sm ml-2">- {allTokens.length} total</p>
+              <p className="ml-2 text-sm">- {allTokens.length} total</p>
             </div>
             {allTokens.map((token) => (
               <p key={token}>{token}</p>
@@ -316,7 +316,7 @@ const Home: NextPage = () => {
           <>
             <div className="flex items-end">
               <h5 className="text-xl font-medium">Your Tokens</h5>
-              <p className="text-sm ml-2">- {walletTokens.length} total</p>
+              <p className="ml-2 text-sm">- {walletTokens.length} total</p>
             </div>
             {walletTokens.map((token) => (
               <p key={token}>{token}</p>
@@ -324,7 +324,7 @@ const Home: NextPage = () => {
           </>
         )}
       </div>
-      {error && <div className="bg-white p-4 text-red-500 mt-8">{error}</div>}
+      {error && <div className="mt-8 bg-white p-4 text-red-500">{error}</div>}
       {isLoading && (
         <div>
           <Spinner />
diff --git a/pages/trade.tsx b/pages/trade.tsx
index 51e0d7ad..14a352af 100644
--- a/pages/trade.tsx
+++ b/pages/trade.tsx
@@ -4,7 +4,7 @@ import Container from 'components/Container'
 const Trade = () => {
   return (
     <div>
-      <div className="flex gap-4 mb-4">
+      <div className="mb-4 flex gap-4">
         <Container className="flex-1">Graph/Tradingview Module</Container>
         <div className="flex flex-col gap-4">
           <Container>Buy/Sell module</Container>
diff --git a/yarn.lock b/yarn.lock
index ca77083b..ff8b71f2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4176,6 +4176,16 @@ prelude-ls@^1.2.1:
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier-plugin-tailwindcss@^0.1.13:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.13.tgz#ca1071361dc7e2ed5d95a2ee36825ce45f814942"
+  integrity sha512-/EKQURUrxLu66CMUg4+1LwGdxnz8of7IDvrSLqEtDqhLH61SAlNNUSr90UTvZaemujgl3OH/VHg+fyGltrNixw==
+
+prettier@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
+  integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"