diff --git a/forge.config.js b/forge.config.js
deleted file mode 100644
index 612007d3e..000000000
--- a/forge.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-module.exports= {
-    "packagerConfig": {
-        "files": [
-            ".env", // Include the .env file (ensure NODE_ENV is set to production)
-            "frontend/.next/**/*", // Include the .next folder, requires build to be run first
-        ]
-    }
-}
diff --git a/frontend/client/types.ts b/frontend/client/types.ts
index 5d9cac6d7..ba58abfdb 100644
--- a/frontend/client/types.ts
+++ b/frontend/client/types.ts
@@ -1,3 +1,4 @@
+import { Address } from '@/types/Address';
 import { Ledger, Chain, DeploymentStatus } from './enums';
 
 export type ServiceHash = string;
@@ -8,22 +9,22 @@ export type LedgerConfig = {
   chain: Chain;
 };
 
-export type Key = {
-  address: string;
+export type ServiceKeys = {
+  address: Address;
   private_key: string;
   ledger: Chain;
 };
 
 export type ChainData = {
-  instances?: string[];
+  instances?: Address[];
   token?: number;
-  multisig?: string;
+  multisig?: Address;
 };
 
 export type Service = {
   name: string;
   hash: string;
-  keys: Key;
+  keys: ServiceKeys;
   readme?: string;
   ledger: LedgerConfig;
   chain_data: ChainData;
@@ -98,6 +99,6 @@ export type DeleteServicesResponse = {
 
 export type AppInfo = {
   account: {
-    key: string;
+    key: Address;
   };
 };
diff --git a/frontend/components/Layout/Navbar/Navbar.tsx b/frontend/components/Layout/Navbar/Navbar.tsx
index c2fcac52a..bfd42b50a 100644
--- a/frontend/components/Layout/Navbar/Navbar.tsx
+++ b/frontend/components/Layout/Navbar/Navbar.tsx
@@ -1,6 +1,6 @@
 import { Flex } from 'antd';
-import { SettingsButton } from './SettingsButton/SettingsButton';
-import { NotificationButton } from './NotificationButton/NotificationButton';
+import { SettingsButton } from './SettingsButton';
+import { NotificationButton } from './NotificationButton';
 import Image from 'next/image';
 
 export const Navbar = () => {
diff --git a/frontend/components/Layout/Navbar/NotificationButton/NotificationButton.tsx b/frontend/components/Layout/Navbar/NotificationButton.tsx
similarity index 100%
rename from frontend/components/Layout/Navbar/NotificationButton/NotificationButton.tsx
rename to frontend/components/Layout/Navbar/NotificationButton.tsx
diff --git a/frontend/components/Layout/Navbar/SettingsButton/SettingsButton.tsx b/frontend/components/Layout/Navbar/SettingsButton.tsx
similarity index 59%
rename from frontend/components/Layout/Navbar/SettingsButton/SettingsButton.tsx
rename to frontend/components/Layout/Navbar/SettingsButton.tsx
index ad94d0792..1b36944f7 100644
--- a/frontend/components/Layout/Navbar/SettingsButton/SettingsButton.tsx
+++ b/frontend/components/Layout/Navbar/SettingsButton.tsx
@@ -1,10 +1,13 @@
 import { SettingOutlined } from '@ant-design/icons';
 import { Button, Dropdown, MenuProps } from 'antd';
-import { useMemo } from 'react';
 
-export const SettingsButton = ({ disabled }: { disabled: boolean }) => {
-  const items: MenuProps['items'] = useMemo(() => [], []);
+const items: MenuProps['items'] = []; //placeholder for now
 
+type SettingsButtonProps = {
+  disabled: boolean;
+};
+
+export const SettingsButton = ({ disabled }: SettingsButtonProps) => {
   return (
     <Dropdown menu={{ items }} placement="bottomLeft" disabled={disabled}>
       <Button type="text" icon={<SettingOutlined />} />
diff --git a/frontend/components/Marketplace/Marketplace.tsx b/frontend/components/Marketplace/Marketplace.tsx
index 253cf45b2..1d2ea6c75 100644
--- a/frontend/components/Marketplace/Marketplace.tsx
+++ b/frontend/components/Marketplace/Marketplace.tsx
@@ -1,5 +1,5 @@
 import { Flex } from 'antd';
-import { MarketplaceItemCard } from './MarketplaceItemCard/MarketplaceItemCard';
+import { MarketplaceItemCard } from './MarketplaceItemCard';
 import { useMemo } from 'react';
 import { useMarketplace } from '@/hooks';
 
diff --git a/frontend/components/Marketplace/MarketplaceItemCard/MarketplaceItemCard.tsx b/frontend/components/Marketplace/MarketplaceItemCard.tsx
similarity index 100%
rename from frontend/components/Marketplace/MarketplaceItemCard/MarketplaceItemCard.tsx
rename to frontend/components/Marketplace/MarketplaceItemCard.tsx
diff --git a/frontend/components/Modals/QRModal/QRModal.tsx b/frontend/components/Modals/QRModal.tsx
similarity index 87%
rename from frontend/components/Modals/QRModal/QRModal.tsx
rename to frontend/components/Modals/QRModal.tsx
index 88ac329ca..a605ec461 100644
--- a/frontend/components/Modals/QRModal/QRModal.tsx
+++ b/frontend/components/Modals/QRModal.tsx
@@ -4,11 +4,13 @@ import { Flex, Modal, QRCode, Typography } from 'antd';
 import { ethers } from 'ethers';
 import { useMemo } from 'react';
 
+type QRModalProps = {
+  data: QRModalData;
+};
+
 export const QRModal = ({
   data: { amount, chainId, address, open, isERC20 },
-}: {
-  data: QRModalData;
-}) => {
+}: QRModalProps) => {
   const { setQrModalData } = useModals();
 
   const handleCancel = () => {
@@ -25,7 +27,7 @@ export const QRModal = ({
     if (Number(amount)) return ethers.utils.parseUnits(`${amount}`).toString();
   }, [amount]);
 
-  const metamaskAddress: string | undefined = useMemo(() => {
+  const metamaskUrl: string = useMemo(() => {
     if (!address || !chainId || !parsedAmount) return '';
     if (isERC20) {
       return `https://metamask.app.link/send/token/${address}@${chainId}?value=${parsedAmount}`;
@@ -33,14 +35,14 @@ export const QRModal = ({
     return `https://metamask.app.link/send/${address}@${chainId}?value=${parsedAmount}`;
   }, [address, chainId, isERC20, parsedAmount]);
 
-  const modalParamsValid: boolean = useMemo(
+  const isModalParamsValid: boolean = useMemo(
     () => Boolean(address && chainId && parsedAmount),
     [address, chainId, parsedAmount],
   );
 
   return (
     <Modal
-      open={open && modalParamsValid}
+      open={open && isModalParamsValid}
       footer={null}
       title="Scan QR code"
       onCancel={handleCancel}
@@ -51,7 +53,7 @@ export const QRModal = ({
           <strong>Metamask Mobile</strong>.
         </Typography.Text>
         <Flex justify="center">
-          <QRCode value={metamaskAddress} />
+          <QRCode value={metamaskUrl} />
         </Flex>
       </Flex>
     </Modal>
diff --git a/frontend/components/Modals/index.ts b/frontend/components/Modals/index.ts
index 6e68fbf55..bfdaa033a 100644
--- a/frontend/components/Modals/index.ts
+++ b/frontend/components/Modals/index.ts
@@ -1 +1 @@
-export * from './QRModal/QRModal';
+export * from './QRModal';
diff --git a/frontend/components/Spawn/Funding/FundRequirement/FundRequirement.tsx b/frontend/components/Spawn/Funding/FundRequirement/FundRequirement.tsx
index 412c42642..6dbcdc806 100644
--- a/frontend/components/Spawn/Funding/FundRequirement/FundRequirement.tsx
+++ b/frontend/components/Spawn/Funding/FundRequirement/FundRequirement.tsx
@@ -1,5 +1,6 @@
 import { copyToClipboard } from '@/helpers/copyToClipboard';
 import { useModals, useServices } from '@/hooks';
+import { Address } from '@/types';
 import { Button, Flex, Typography, message } from 'antd';
 import {
   Dispatch,
@@ -10,10 +11,26 @@ import {
 } from 'react';
 import { useInterval } from 'usehooks-ts';
 
+type FundRequirementProps = {
+  serviceHash?: string;
+  address: Address;
+  requirement: number;
+  contractAddress?: Address;
+  symbol: string;
+  hasReceivedFunds: boolean;
+  isERC20: boolean;
+  getBalance: (
+    address: Address,
+    rpc: string,
+    contractAddress?: Address,
+  ) => Promise<number>;
+  setReceivedFunds: Dispatch<SetStateAction<{ [address: Address]: boolean }>>;
+};
+
 /**
  * Should be called by FundRequirementERC20 or FundRequirementETH only
  * @param { serviceHash, address, requirement, contractAddress, symbol, hasReceivedFunds, isERC20, getBalance, setReceivedFunds }
- * @returns JSX.Element
+ * @returns
  */
 export const FundRequirement = ({
   serviceHash,
@@ -25,21 +42,7 @@ export const FundRequirement = ({
   isERC20,
   getBalance,
   setReceivedFunds,
-}: {
-  serviceHash?: string;
-  address: string;
-  requirement: number;
-  contractAddress?: string;
-  symbol: string;
-  hasReceivedFunds: boolean;
-  isERC20: boolean;
-  getBalance: (
-    address: string,
-    rpc: string,
-    contractAddress?: string,
-  ) => Promise<number>;
-  setReceivedFunds: Dispatch<SetStateAction<{ [address: string]: boolean }>>;
-}) => {
+}: FundRequirementProps) => {
   const { qrModalOpen } = useModals();
   const { getServiceFromState } = useServices();
 
@@ -77,7 +80,7 @@ export const FundRequirement = ({
         .then((balance: number) => {
           if (balance >= requirement) {
             setIsPollingBalance(false);
-            setReceivedFunds((prev: { [address: string]: boolean }) => ({
+            setReceivedFunds((prev: { [address: Address]: boolean }) => ({
               ...prev,
               [address]: true,
             }));
diff --git a/frontend/components/Spawn/Funding/FundRequirement/FundRequirementERC20.tsx b/frontend/components/Spawn/Funding/FundRequirement/FundRequirementERC20.tsx
index 2f062dd13..3cf281c0f 100644
--- a/frontend/components/Spawn/Funding/FundRequirement/FundRequirementERC20.tsx
+++ b/frontend/components/Spawn/Funding/FundRequirement/FundRequirementERC20.tsx
@@ -1,16 +1,19 @@
 import { useEthers } from '@/hooks';
 import { Dispatch, SetStateAction } from 'react';
 import { FundRequirement } from './FundRequirement';
+import { Address } from '@/types';
 
-export const FundRequirementERC20 = (props: {
+type FundRequirementERC20Props = {
   serviceHash: string;
-  address: string;
+  address: Address;
   requirement: number;
   symbol: string;
-  contractAddress?: string;
+  contractAddress?: Address;
   hasReceivedFunds: boolean;
-  setReceivedFunds: Dispatch<SetStateAction<{ [address: string]: boolean }>>;
-}) => {
+  setReceivedFunds: Dispatch<SetStateAction<{ [address: Address]: boolean }>>;
+};
+
+export const FundRequirementERC20 = (props: FundRequirementERC20Props) => {
   const { getERC20Balance } = useEthers();
   return (
     <FundRequirement getBalance={getERC20Balance} isERC20={true} {...props} />
diff --git a/frontend/components/Spawn/Funding/FundRequirement/FundRequirementETH.tsx b/frontend/components/Spawn/Funding/FundRequirement/FundRequirementETH.tsx
index 05a5454e0..ef51139f5 100644
--- a/frontend/components/Spawn/Funding/FundRequirement/FundRequirementETH.tsx
+++ b/frontend/components/Spawn/Funding/FundRequirement/FundRequirementETH.tsx
@@ -1,15 +1,18 @@
 import { useEthers } from '@/hooks';
 import { Dispatch, SetStateAction } from 'react';
 import { FundRequirement } from './FundRequirement';
+import { Address } from '@/types';
 
-export const FundRequirementETH = (props: {
+type FundRequirementETHProps = {
   serviceHash?: string;
-  address: string;
+  address: Address;
   symbol: string;
   requirement: number;
   hasReceivedFunds: boolean;
-  setReceivedFunds: Dispatch<SetStateAction<{ [address: string]: boolean }>>;
-}) => {
+  setReceivedFunds: Dispatch<SetStateAction<{ [address: Address]: boolean }>>;
+};
+
+export const FundRequirementETH = (props: FundRequirementETHProps) => {
   const { getETHBalance } = useEthers();
   return (
     <FundRequirement getBalance={getETHBalance} isERC20={false} {...props} />
diff --git a/frontend/components/Spawn/Funding/Funding.tsx b/frontend/components/Spawn/Funding/Funding.tsx
index d0e134496..9f892ebdc 100644
--- a/frontend/components/Spawn/Funding/Funding.tsx
+++ b/frontend/components/Spawn/Funding/Funding.tsx
@@ -1,8 +1,39 @@
 import { Service } from '@/client';
 import { SpawnScreenState } from '@/enums';
 import { useSpawn } from '@/hooks';
+import { Address } from '@/types';
+import { FundsReceivedMap } from '@/types/Maps';
 import { TimelineItemProps, Flex, Typography, Timeline } from 'antd';
-import { useState, useMemo, useEffect, SetStateAction, Dispatch } from 'react';
+import { isEmpty } from 'lodash';
+import {
+  useState,
+  useMemo,
+  useEffect,
+  SetStateAction,
+  Dispatch,
+  ReactElement,
+} from 'react';
+
+type FundRequirementComponentProps = {
+  setReceivedFunds: Dispatch<SetStateAction<{ [address: Address]: boolean }>>;
+  serviceHash: string;
+  address: Address;
+  requirement: number;
+  contractAddress?: Address;
+  symbol: string;
+  hasReceivedFunds: boolean;
+};
+
+type FundingProps = {
+  service: Service;
+  fundRequirements: { [address: Address]: number };
+  FundRequirementComponent: (
+    props: FundRequirementComponentProps,
+  ) => ReactElement;
+  nextPage: SpawnScreenState;
+  symbol: string;
+  contractAddress?: Address;
+};
 
 export const Funding = ({
   service,
@@ -11,30 +42,15 @@ export const Funding = ({
   nextPage,
   symbol,
   contractAddress,
-}: {
-  service: Service;
-  fundRequirements: { [address: string]: number };
-  FundRequirementComponent: (props: {
-    setReceivedFunds: Dispatch<SetStateAction<{ [address: string]: boolean }>>;
-    serviceHash: string;
-    address: string;
-    requirement: number;
-    contractAddress?: string;
-    symbol: string;
-    hasReceivedFunds: boolean;
-  }) => JSX.Element;
-  nextPage: SpawnScreenState;
-  symbol: string;
-  contractAddress?: string;
-}) => {
+}: FundingProps) => {
   const { setSpawnScreenState } = useSpawn();
 
   const [receivedFunds, setReceivedFunds] = useState<{
-    [address: string]: boolean;
+    [address: Address]: boolean;
   }>({
     ...Object.keys(fundRequirements).reduce(
-      (acc: { [address: string]: boolean }, address) => {
-        acc[address] = false;
+      (acc: FundsReceivedMap, address) => {
+        acc[address as Address] = false;
         return acc;
       },
       {},
@@ -43,20 +59,22 @@ export const Funding = ({
 
   const timelineItems: TimelineItemProps[] = useMemo(
     () =>
-      Object.keys(fundRequirements).map((address) => ({
-        children: (
-          <FundRequirementComponent
-            setReceivedFunds={setReceivedFunds}
-            serviceHash={service.hash}
-            address={address}
-            requirement={fundRequirements[address]}
-            symbol={symbol}
-            hasReceivedFunds={receivedFunds[address]}
-            contractAddress={contractAddress}
-          />
-        ),
-        color: receivedFunds[address] ? 'green' : 'red',
-      })) as TimelineItemProps[],
+      (Object.keys(fundRequirements) as Address[]).map((address) => {
+        return {
+          children: (
+            <FundRequirementComponent
+              setReceivedFunds={setReceivedFunds}
+              serviceHash={service.hash}
+              address={address}
+              requirement={fundRequirements[address]}
+              symbol={symbol}
+              hasReceivedFunds={receivedFunds[address]}
+              contractAddress={contractAddress}
+            />
+          ),
+          color: receivedFunds[address] ? 'green' : 'red',
+        };
+      }) as TimelineItemProps[],
     [
       FundRequirementComponent,
       contractAddress,
@@ -68,8 +86,8 @@ export const Funding = ({
   );
 
   const hasSentAllFunds = useMemo(() => {
-    if (Object.keys(fundRequirements).length === 0) return false;
-    return Object.keys(receivedFunds).reduce(
+    if (isEmpty(fundRequirements)) return false;
+    return (Object.keys(receivedFunds) as Address[]).reduce(
       (acc: boolean, address) => acc && receivedFunds[address],
       true,
     );
diff --git a/frontend/components/Spawn/SpawnAgentFunding/SpawnAgentFunding.tsx b/frontend/components/Spawn/SpawnAgentFunding.tsx
similarity index 50%
rename from frontend/components/Spawn/SpawnAgentFunding/SpawnAgentFunding.tsx
rename to frontend/components/Spawn/SpawnAgentFunding.tsx
index 87d69af9d..468140c52 100644
--- a/frontend/components/Spawn/SpawnAgentFunding/SpawnAgentFunding.tsx
+++ b/frontend/components/Spawn/SpawnAgentFunding.tsx
@@ -1,13 +1,16 @@
 import { Service } from '@/client';
-import { Funding } from '../Funding/Funding';
+import { Funding } from './Funding/Funding';
 import { SpawnScreenState } from '@/enums';
-import { FundRequirementETH } from '../Funding/FundRequirement/FundRequirementETH';
+import { FundRequirementETH } from './Funding/FundRequirement/FundRequirementETH';
+import { Address } from '@/types';
 
-export const SpawnAgentFunding = (props: {
+type SpawnAgentFundingProps = {
   service: Service;
-  agentFundRequirements: { [address: string]: number };
+  agentFundRequirements: { [address: Address]: number };
   nextPage: SpawnScreenState;
-}) => (
+};
+
+export const SpawnAgentFunding = (props: SpawnAgentFundingProps) => (
   <Funding
     fundRequirements={props.agentFundRequirements}
     symbol={'XDAI'} // hardcoded while only trader is available
diff --git a/frontend/components/Spawn/SpawnDone/SpawnDone.tsx b/frontend/components/Spawn/SpawnDone.tsx
similarity index 88%
rename from frontend/components/Spawn/SpawnDone/SpawnDone.tsx
rename to frontend/components/Spawn/SpawnDone.tsx
index 75559b4c5..d5271b576 100644
--- a/frontend/components/Spawn/SpawnDone/SpawnDone.tsx
+++ b/frontend/components/Spawn/SpawnDone.tsx
@@ -5,13 +5,13 @@ import { useRouter } from 'next/router';
 export const SpawnDone = () => {
   const router = useRouter();
 
-  const { resetSpawnScreenState: resetSpawn } = useSpawn();
+  const { resetSpawnScreenState } = useSpawn();
   const { resetTabs } = useTabs();
   const { updateServicesState } = useServices();
 
   const handleViewAgent = () =>
     router.push('/').then(() => {
-      resetSpawn();
+      resetSpawnScreenState();
       resetTabs();
       updateServicesState().catch(() =>
         message.error('Failed to update services'),
diff --git a/frontend/components/Spawn/SpawnError/SpawnError.tsx b/frontend/components/Spawn/SpawnError.tsx
similarity index 76%
rename from frontend/components/Spawn/SpawnError/SpawnError.tsx
rename to frontend/components/Spawn/SpawnError.tsx
index dd2104f0d..3d5e2085d 100644
--- a/frontend/components/Spawn/SpawnError/SpawnError.tsx
+++ b/frontend/components/Spawn/SpawnError.tsx
@@ -1,7 +1,11 @@
 import { Button, Flex, Typography } from 'antd';
 import { useRouter } from 'next/router';
 
-export const SpawnError = ({ message }: { message: string }) => {
+type SpawnErrorProps = {
+  message: string;
+};
+
+export const SpawnError = ({ message }: SpawnErrorProps) => {
   const router = useRouter();
   return (
     <Flex vertical justify="center" align="center">
diff --git a/frontend/components/Spawn/SpawnHeader/SpawnHeader.tsx b/frontend/components/Spawn/SpawnHeader.tsx
similarity index 100%
rename from frontend/components/Spawn/SpawnHeader/SpawnHeader.tsx
rename to frontend/components/Spawn/SpawnHeader.tsx
diff --git a/frontend/components/Spawn/SpawnRPC/SpawnRPC.tsx b/frontend/components/Spawn/SpawnRPC.tsx
similarity index 90%
rename from frontend/components/Spawn/SpawnRPC/SpawnRPC.tsx
rename to frontend/components/Spawn/SpawnRPC.tsx
index 24f6e09cb..c715a4e12 100644
--- a/frontend/components/Spawn/SpawnRPC/SpawnRPC.tsx
+++ b/frontend/components/Spawn/SpawnRPC.tsx
@@ -19,7 +19,6 @@ import {
 import { useSpawn, useEthers } from '@/hooks';
 import { SpawnScreenState } from '@/enums';
 import { CheckSquareTwoTone, WarningFilled } from '@ant-design/icons';
-import { Service, ServiceTemplate } from '@/client';
 import { InputStatus } from 'antd/es/_util/statusUtils';
 import _ from 'lodash';
 
@@ -29,17 +28,13 @@ enum RPCState {
   INVALID,
 }
 
-export const SpawnRPC = ({
-  rpc,
-  setRpc,
-  nextPage,
-}: {
+type SpawnRPCProps = {
   rpc: string;
-  serviceTemplate: ServiceTemplate;
   setRpc: Dispatch<SetStateAction<string>>;
-  setService: Dispatch<SetStateAction<Service | undefined>>;
   nextPage: SpawnScreenState;
-}) => {
+};
+
+export const SpawnRPC = ({ rpc, setRpc, nextPage }: SpawnRPCProps) => {
   const { setSpawnScreenState } = useSpawn();
   const { checkRPC } = useEthers();
 
@@ -98,18 +93,10 @@ export const SpawnRPC = ({
     [rpc, rpcState],
   );
 
-  const inputStatus: InputStatus = useMemo(() => {
-    switch (rpcState) {
-      case RPCState.LOADING:
-        return '';
-      case RPCState.VALID:
-        return '';
-      case RPCState.INVALID:
-        return 'error';
-      default:
-        return '';
-    }
-  }, [rpcState]);
+  const inputStatus: InputStatus = useMemo(
+    () => (rpcState === RPCState.INVALID ? 'error' : ''),
+    [rpcState],
+  );
 
   const inputSuffix: JSX.Element = useMemo(() => {
     switch (rpcState) {
diff --git a/frontend/components/Spawn/SpawnStakingCheck/SpawnStakingCheck.tsx b/frontend/components/Spawn/SpawnStakingCheck.tsx
similarity index 87%
rename from frontend/components/Spawn/SpawnStakingCheck/SpawnStakingCheck.tsx
rename to frontend/components/Spawn/SpawnStakingCheck.tsx
index da48e818f..b68a358c8 100644
--- a/frontend/components/Spawn/SpawnStakingCheck/SpawnStakingCheck.tsx
+++ b/frontend/components/Spawn/SpawnStakingCheck.tsx
@@ -2,6 +2,8 @@ import { Service, ServiceTemplate } from '@/client';
 import { TOKENS } from '@/constants';
 import { SpawnScreenState } from '@/enums';
 import { useEthers, useServices, useAppInfo } from '@/hooks';
+import { Address } from '@/types';
+import { FundsRequirementMap } from '@/types/Maps';
 import { Button, Flex, Typography, message } from 'antd';
 import { ethers } from 'ethers';
 import {
@@ -17,6 +19,16 @@ enum ButtonOptions {
   NO,
 }
 
+type SpawnStakingCheckProps = {
+  serviceTemplate: ServiceTemplate;
+  rpc: string;
+  setAgentFundRequirements: Dispatch<SetStateAction<FundsRequirementMap>>;
+  setSpawnScreenState: Dispatch<SetStateAction<SpawnScreenState>>;
+  setIsStaking: Dispatch<SetStateAction<boolean>>;
+  setService: Dispatch<SetStateAction<Service | undefined>>;
+  nextPage: SpawnScreenState;
+};
+
 export const SpawnStakingCheck = ({
   serviceTemplate,
   rpc,
@@ -25,29 +37,14 @@ export const SpawnStakingCheck = ({
   setIsStaking,
   setService,
   nextPage,
-}: {
-  serviceTemplate: ServiceTemplate;
-  rpc: string;
-  setAgentFundRequirements: Dispatch<
-    SetStateAction<{ [address: string]: number }>
-  >;
-  setSpawnScreenState: Dispatch<SetStateAction<SpawnScreenState>>;
-  setIsStaking: Dispatch<SetStateAction<boolean>>;
-  setService: Dispatch<SetStateAction<Service | undefined>>;
-  nextPage: SpawnScreenState;
-}) => {
+}: SpawnStakingCheckProps) => {
   const { createService } = useServices();
-  const { getPublicKey } = useAppInfo();
+  const { userPublicKey } = useAppInfo();
   const { getERC20Balance } = useEthers();
 
   const [isCreating, setIsCreating] = useState(false);
   const [buttonClicked, setButtonClicked] = useState<ButtonOptions>();
 
-  const publicKey: string | undefined = useMemo(
-    () => getPublicKey(),
-    [getPublicKey],
-  );
-
   /**
    * Creates service, then performs relevant state updates
    */
@@ -73,7 +70,7 @@ export const SpawnStakingCheck = ({
           if (_service.chain_data?.instances) {
             setAgentFundRequirements(
               _service.chain_data.instances.reduce(
-                (acc: { [address: string]: number }, address: string) => ({
+                (acc: { [address: Address]: number }, address: Address) => ({
                   ...acc,
                   [address]:
                     serviceTemplate.configuration.fund_requirements.agent,
@@ -85,10 +82,11 @@ export const SpawnStakingCheck = ({
 
           // Set staking funding requirements from multisig/safe
           if (_service.chain_data?.multisig) {
-            setAgentFundRequirements((prev) => ({
+            const { multisig } = _service.chain_data;
+            const { safe } = serviceTemplate.configuration.fund_requirements;
+            setAgentFundRequirements((prev: FundsRequirementMap) => ({
               ...prev,
-              [_service.chain_data?.multisig as string]:
-                serviceTemplate.configuration.fund_requirements.safe,
+              [multisig]: safe,
             }));
           }
           return Promise.resolve();
@@ -112,10 +110,10 @@ export const SpawnStakingCheck = ({
    * Checks if the user has the required OLAS to stake
    */
   const preflightStakingCheck = useCallback((): Promise<boolean> => {
-    if (!publicKey) {
+    if (!userPublicKey) {
       return Promise.reject('No public key found');
     }
-    return getERC20Balance(publicKey, rpc, TOKENS.gnosis.OLAS)
+    return getERC20Balance(userPublicKey, rpc, TOKENS.gnosis.OLAS)
       .then((olasBalance: number) => {
         const { olas_required_to_stake, olas_cost_of_bond } =
           serviceTemplate.configuration;
@@ -135,7 +133,7 @@ export const SpawnStakingCheck = ({
       .catch((e) => {
         return Promise.reject(e);
       });
-  }, [getERC20Balance, publicKey, rpc, serviceTemplate.configuration]);
+  }, [getERC20Balance, userPublicKey, rpc, serviceTemplate.configuration]);
 
   const handleYes = async () => {
     setButtonClicked(ButtonOptions.YES);
@@ -144,7 +142,7 @@ export const SpawnStakingCheck = ({
       return false;
     });
     if (!canStake) {
-      message.error(`${publicKey} requires more OLAS to stake`);
+      message.error(`${userPublicKey} requires more OLAS to stake`);
       return setButtonClicked(undefined);
     }
     const hasCreated: boolean = await create(true)
diff --git a/frontend/components/Spawn/index.tsx b/frontend/components/Spawn/index.tsx
index 7f6acfca5..bc36f80e0 100644
--- a/frontend/components/Spawn/index.tsx
+++ b/frontend/components/Spawn/index.tsx
@@ -1,7 +1,7 @@
 export * from './Funding/Funding';
-export * from './SpawnAgentFunding/SpawnAgentFunding';
-export * from './SpawnDone/SpawnDone';
-export * from './SpawnError/SpawnError';
-export * from './SpawnHeader/SpawnHeader';
-export * from './SpawnRPC/SpawnRPC';
-export * from './SpawnStakingCheck/SpawnStakingCheck';
+export * from './SpawnAgentFunding';
+export * from './SpawnDone';
+export * from './SpawnError';
+export * from './SpawnHeader';
+export * from './SpawnRPC';
+export * from './SpawnStakingCheck';
diff --git a/frontend/components/YourAgents/HasAgents/HasAgents.tsx b/frontend/components/YourAgents/HasAgents.tsx
similarity index 85%
rename from frontend/components/YourAgents/HasAgents/HasAgents.tsx
rename to frontend/components/YourAgents/HasAgents.tsx
index 0a90beb49..3c351b04e 100644
--- a/frontend/components/YourAgents/HasAgents/HasAgents.tsx
+++ b/frontend/components/YourAgents/HasAgents.tsx
@@ -1,6 +1,6 @@
 import { Service } from '@/client';
 import { Flex } from 'antd';
-import { ServiceCard } from '../ServiceCard/ServiceCard';
+import { ServiceCard } from './ServiceCard/ServiceCard';
 
 export const HasAgents = ({
   services,
diff --git a/frontend/components/YourAgents/NoAgents/NoAgents.tsx b/frontend/components/YourAgents/NoAgents.tsx
similarity index 100%
rename from frontend/components/YourAgents/NoAgents/NoAgents.tsx
rename to frontend/components/YourAgents/NoAgents.tsx
diff --git a/frontend/components/YourAgents/YourAgents.tsx b/frontend/components/YourAgents/YourAgents.tsx
index 0e3e892b2..1e8c34c6b 100644
--- a/frontend/components/YourAgents/YourAgents.tsx
+++ b/frontend/components/YourAgents/YourAgents.tsx
@@ -4,12 +4,12 @@ import { useMemo } from 'react';
 import dynamic from 'next/dynamic';
 
 const HasAgents = dynamic(
-  () => import('./HasAgents/HasAgents').then((mod) => mod.HasAgents),
+  () => import('./HasAgents').then((mod) => mod.HasAgents),
   { ssr: false },
 );
 
 const NoAgents = dynamic(
-  () => import('./NoAgents/NoAgents').then((mod) => mod.NoAgents),
+  () => import('./NoAgents').then((mod) => mod.NoAgents),
   { ssr: false },
 );
 
diff --git a/frontend/components/YourAgents/index.ts b/frontend/components/YourAgents/index.ts
index b44237837..033e284d5 100644
--- a/frontend/components/YourAgents/index.ts
+++ b/frontend/components/YourAgents/index.ts
@@ -1,4 +1,4 @@
 export * from './YourAgents';
-export * from './HasAgents/HasAgents';
-export * from './NoAgents/NoAgents';
+export * from './HasAgents';
+export * from './NoAgents';
 export * from './ServiceCard/ServiceCard';
diff --git a/frontend/constants/chains.ts b/frontend/constants/chains.ts
index aeaf7b325..bbff4b9e5 100644
--- a/frontend/constants/chains.ts
+++ b/frontend/constants/chains.ts
@@ -1,3 +1,5 @@
-export const CHAINS = {
+export const CHAINS: {
+  [chain: string]: { currency: string; chainId: number };
+} = {
   gnosis: { currency: 'XDAI', chainId: 100 },
 };
diff --git a/frontend/constants/contracts.ts b/frontend/constants/contracts.ts
index 4b2b572df..445084144 100644
--- a/frontend/constants/contracts.ts
+++ b/frontend/constants/contracts.ts
@@ -1,2 +1,4 @@
-export const MULTICALL_CONTRACT: string =
+import { Address } from '@/types';
+
+export const MULTICALL_CONTRACT: Address =
   '0xcA11bde05977b3631167028862bE2a173976CA11'; // https://github.com/mds1/multicall, https://www.multicall3.com/
diff --git a/frontend/constants/tokens.ts b/frontend/constants/tokens.ts
index 140047275..d5151e3ed 100644
--- a/frontend/constants/tokens.ts
+++ b/frontend/constants/tokens.ts
@@ -1,4 +1,6 @@
-export const TOKENS = {
+import { Address } from '@/types';
+
+export const TOKENS: { [chain: string]: { [token: string]: Address } } = {
   gnosis: {
     OLAS: '0xcE11e14225575945b8E6Dc0D4F2dD4C570f79d9f',
   },
diff --git a/frontend/context/AppInfoProvider/AppInfoProvider.tsx b/frontend/context/AppInfoProvider.tsx
similarity index 66%
rename from frontend/context/AppInfoProvider/AppInfoProvider.tsx
rename to frontend/context/AppInfoProvider.tsx
index 0959da8e6..f052e1081 100644
--- a/frontend/context/AppInfoProvider/AppInfoProvider.tsx
+++ b/frontend/context/AppInfoProvider.tsx
@@ -1,6 +1,6 @@
-import { AppInfo } from "@/client";
-import { AppInfoService } from "@/service";
-import { message } from "antd";
+import { AppInfo } from '@/client';
+import { AppInfoService } from '@/service';
+import { message } from 'antd';
 import {
   Dispatch,
   PropsWithChildren,
@@ -8,12 +8,14 @@ import {
   createContext,
   useEffect,
   useState,
-} from "react";
+} from 'react';
 
-export const AppInfoContext = createContext<{
+type AppInfoContextProps = {
   appInfo?: AppInfo;
   setAppInfo: Dispatch<SetStateAction<AppInfo | undefined>>;
-}>({
+};
+
+export const AppInfoContext = createContext<AppInfoContextProps>({
   appInfo: undefined,
   setAppInfo: () => {},
 });
@@ -24,7 +26,7 @@ export const AppInfoProvider = ({ children }: PropsWithChildren) => {
   useEffect(() => {
     AppInfoService.getAppInfo()
       .then(setAppInfo)
-      .catch(() => message.error("Failed to get app info"));
+      .catch(() => message.error('Failed to get app info'));
   }, []);
 
   return (
diff --git a/frontend/context/ModalsProvider/ModalsProvider.tsx b/frontend/context/ModalsProvider/ModalsProvider.tsx
index f2493f35d..5277a9b19 100644
--- a/frontend/context/ModalsProvider/ModalsProvider.tsx
+++ b/frontend/context/ModalsProvider/ModalsProvider.tsx
@@ -1,25 +1,24 @@
-import { QRModalData } from "@/types";
-import dynamic from "next/dynamic";
+import { QRModalData } from '@/types';
+import dynamic from 'next/dynamic';
 import {
   createContext,
   Dispatch,
   PropsWithChildren,
   SetStateAction,
   useState,
-} from "react";
+} from 'react';
 
 const QRModal = dynamic(
-  () =>
-    import("../../components/Modals/QRModal/QRModal").then(
-      (mod) => mod.QRModal,
-    ),
+  () => import('../../components/Modals/QRModal').then((mod) => mod.QRModal),
   { ssr: false },
 );
 
-export const ModalsContext = createContext<{
+type ModalsContextProps = {
   qrModalData: QRModalData;
   setQrModalData: Dispatch<SetStateAction<QRModalData>>;
-}>({
+};
+
+export const ModalsContext = createContext<ModalsContextProps>({
   qrModalData: {
     open: false,
     address: undefined,
diff --git a/frontend/context/ServicesProvider/ServicesProvider.tsx b/frontend/context/ServicesProvider.tsx
similarity index 80%
rename from frontend/context/ServicesProvider/ServicesProvider.tsx
rename to frontend/context/ServicesProvider.tsx
index 054d8443d..541d7d138 100644
--- a/frontend/context/ServicesProvider/ServicesProvider.tsx
+++ b/frontend/context/ServicesProvider.tsx
@@ -1,6 +1,6 @@
-import { Service } from "@/client";
-import { ServicesService } from "@/service";
-import { message } from "antd";
+import { Service } from '@/client';
+import { ServicesService } from '@/service';
+import { message } from 'antd';
 import {
   Dispatch,
   PropsWithChildren,
@@ -9,17 +9,17 @@ import {
   useCallback,
   useEffect,
   useState,
-} from "react";
-import { useInterval } from "usehooks-ts";
+} from 'react';
+import { useInterval } from 'usehooks-ts';
 
-type ServicesProviderProps = {
+type ServicesContextProps = {
   services: Service[];
   setServices: Dispatch<SetStateAction<Service[]>>;
   updateServicesState: () => Promise<void>;
   hasInitialLoaded: boolean;
 };
 
-export const ServicesContext = createContext<ServicesProviderProps>({
+export const ServicesContext = createContext<ServicesContextProps>({
   services: [],
   setServices: () => {},
   updateServicesState: async () => {},
@@ -44,7 +44,7 @@ export const ServicesProvider = ({ children }: PropsWithChildren) => {
     // Update on load
     updateServicesState()
       .catch(() => {
-        message.error("Inital services update failed.");
+        message.error('Initial services update failed.');
       })
       .then(() => setHasInitialLoaded(true));
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/frontend/context/TabsProvider/TabsProvider.tsx b/frontend/context/TabsProvider/TabsProvider.tsx
index 66c1d5ce6..435cab201 100644
--- a/frontend/context/TabsProvider/TabsProvider.tsx
+++ b/frontend/context/TabsProvider/TabsProvider.tsx
@@ -7,15 +7,20 @@ import {
   useState,
 } from 'react';
 
-export const TabsContext = createContext<{
-  activeTab: string;
+type TabsContextProps = {
+  activeTab: Tab;
   setActiveTab: Dispatch<SetStateAction<string>>;
-}>({ activeTab: Tab.YOUR_AGENTS, setActiveTab: () => {} });
+};
+
+export const TabsContext = createContext<TabsContextProps>({
+  activeTab: Tab.YOUR_AGENTS,
+  setActiveTab: () => {},
+});
 
 export const TabsProvider = ({ children }: PropsWithChildren) => {
   const [activeTab, setActiveTab] = useState<string>(Tab.YOUR_AGENTS);
   return (
-    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
+    <TabsContext.Provider value={{ activeTab: activeTab as Tab, setActiveTab }}>
       {children}
     </TabsContext.Provider>
   );
diff --git a/frontend/context/index.ts b/frontend/context/index.ts
index 1cbbac5ec..bf26beaa2 100644
--- a/frontend/context/index.ts
+++ b/frontend/context/index.ts
@@ -1,5 +1,5 @@
-export * from "./ModalsProvider/ModalsProvider";
-export * from "./ServicesProvider/ServicesProvider";
-export * from "./SpawnProvider/SpawnProvider";
-export * from "./TabsProvider/TabsProvider";
-export * from "./AppInfoProvider/AppInfoProvider";
+export * from './ModalsProvider/ModalsProvider';
+export * from './ServicesProvider';
+export * from './SpawnProvider/SpawnProvider';
+export * from './TabsProvider/TabsProvider';
+export * from './AppInfoProvider';
diff --git a/frontend/hooks/index.ts b/frontend/hooks/index.ts
index 92d1a01ef..b17d3a3a0 100644
--- a/frontend/hooks/index.ts
+++ b/frontend/hooks/index.ts
@@ -1,8 +1,8 @@
-export * from "./useServices";
-export * from "./useSpawn";
-export * from "./useModals";
-export * from "./useTabs";
-export * from "./useMarketplace";
-export * from "./useEthers";
-export * from "./useMulticall";
-export * from "./useAppInfo";
\ No newline at end of file
+export * from './useServices';
+export * from './useSpawn';
+export * from './useModals';
+export * from './useTabs';
+export * from './useMarketplace';
+export * from './useEthers';
+export * from './useMulticall';
+export * from './useAppInfo';
diff --git a/frontend/hooks/useAppInfo.tsx b/frontend/hooks/useAppInfo.tsx
index a3ba9ff37..71cff854b 100644
--- a/frontend/hooks/useAppInfo.tsx
+++ b/frontend/hooks/useAppInfo.tsx
@@ -1,12 +1,13 @@
 import { AppInfoContext } from '@/context';
+import { Address } from '@/types';
 import { useContext } from 'react';
 
 export const useAppInfo = () => {
   const { appInfo } = useContext(AppInfoContext);
 
-  const getPublicKey = () => appInfo?.account.key;
+  const userPublicKey: Address | undefined = appInfo?.account.key;
 
   return {
-    getPublicKey,
+    userPublicKey,
   };
 };
diff --git a/frontend/hooks/useEthers.tsx b/frontend/hooks/useEthers.tsx
index c94602e37..d8970f3ce 100644
--- a/frontend/hooks/useEthers.tsx
+++ b/frontend/hooks/useEthers.tsx
@@ -1,53 +1,54 @@
-import { BigNumber, ethers, providers, utils } from "ethers";
+import { Address } from '@/types';
+import { BigNumber, ethers, providers, utils } from 'ethers';
 
 export const useEthers = () => {
   /**
    * Returns the ETH balance of the given address
-   * @param address string
+   * @param address Address
    * @param rpc string
    * @returns Promise<number>
    */
   const getETHBalance = async (
-    address: string,
+    address: Address,
     rpc: string,
   ): Promise<number> => {
     try {
       const provider = new providers.JsonRpcProvider(rpc, {
-        name: "Gnosis",
+        name: 'Gnosis',
         chainId: 100, // we currently only support Gnosis Trader agent
       });
       return provider
         .getBalance(address)
         .then((balance: BigNumber) => Number(utils.formatEther(balance)));
     } catch (e) {
-      return Promise.reject("Failed to get ETH balance");
+      return Promise.reject('Failed to get ETH balance');
     }
   };
 
   /**
    * Returns the ERC20 balance of the given address
-   * @param address string
+   * @param address Address
    * @param rpc string
-   * @param contractAddress string
+   * @param contractAddress Address
    * @returns Promise<number>
    */
   const getERC20Balance = async (
-    address: string,
+    address: Address,
     rpc: string,
-    contractAddress?: string,
+    contractAddress?: Address,
   ): Promise<number> => {
     try {
       if (!contractAddress)
-        throw new Error("Contract address is required for ERC20 balance");
+        throw new Error('Contract address is required for ERC20 balance');
       const provider = new providers.JsonRpcProvider(rpc, {
-        name: "Gnosis",
+        name: 'Gnosis',
         chainId: 100, // we currently only support Gnosis Trader agent
       });
       const contract = new ethers.Contract(
         contractAddress,
         [
-          "function balanceOf(address) view returns (uint256)",
-          "function decimals() view returns (uint8)",
+          'function balanceOf(address) view returns (uint256)',
+          'function decimals() view returns (uint8)',
         ],
         provider,
       );
@@ -56,7 +57,7 @@ export const useEthers = () => {
         contract.decimals(),
       ]);
       if (!balance || !decimals)
-        throw new Error("Failed to resolve balance or decimals");
+        throw new Error('Failed to resolve balance or decimals');
       return Number(utils.formatUnits(balance, decimals));
     } catch (e) {
       return Promise.reject(e);
@@ -70,15 +71,15 @@ export const useEthers = () => {
    */
   const checkRPC = async (rpc: string): Promise<boolean> => {
     try {
-      if (!rpc) throw new Error("RPC is required");
+      if (!rpc) throw new Error('RPC is required');
 
       const provider = new providers.JsonRpcProvider(rpc, {
-        name: "Gnosis",
+        name: 'Gnosis',
         chainId: 100, // we currently only support Gnosis Trader agent
       });
 
       const networkId = (await provider.getNetwork()).chainId;
-      if (!networkId) throw new Error("Failed to get network ID");
+      if (!networkId) throw new Error('Failed to get network ID');
 
       return Promise.resolve(true);
     } catch (e) {
diff --git a/frontend/hooks/useMarketplace.tsx b/frontend/hooks/useMarketplace.tsx
index 364c169ed..e96ffe6c6 100644
--- a/frontend/hooks/useMarketplace.tsx
+++ b/frontend/hooks/useMarketplace.tsx
@@ -1,5 +1,5 @@
-import { ServiceTemplate } from "@/client";
-import { serviceTemplates } from "@/constants";
+import { ServiceTemplate } from '@/client';
+import { serviceTemplates } from '@/constants';
 
 export const useMarketplace = () => {
   const getServiceTemplates = (): ServiceTemplate[] => serviceTemplates;
diff --git a/frontend/hooks/useMulticall.tsx b/frontend/hooks/useMulticall.tsx
index 23cf2a187..a1b0c58fa 100644
--- a/frontend/hooks/useMulticall.tsx
+++ b/frontend/hooks/useMulticall.tsx
@@ -2,6 +2,7 @@ import { MULTICALL_CONTRACT } from '@/constants';
 import { BigNumber, ethers } from 'ethers';
 import { Contract, ContractCall, Provider } from 'ethers-multicall';
 import { multicall3Abi } from '@/abi';
+import { Address } from '@/types';
 
 export const useMulticall = () => {
   /**
@@ -11,21 +12,21 @@ export const useMulticall = () => {
    * @returns Promise<{ [address: string]: number }>
    */
   const getETHBalances = async (
-    addresses: string[],
+    addresses: Address[],
     rpc: string,
-  ): Promise<{ [address: string]: number }> => {
+  ): Promise<{ [address: Address]: number }> => {
     const provider = new ethers.providers.JsonRpcProvider(rpc);
     const multicallProvider = new Provider(provider, 100);
     const multicallContract = new Contract(MULTICALL_CONTRACT, multicall3Abi);
 
-    const callData: ContractCall[] = addresses.map((address: string) =>
+    const callData: ContractCall[] = addresses.map((address: Address) =>
       multicallContract.getEthBalance(address),
     );
 
     return multicallProvider.all(callData).then((r: BigNumber[]) =>
       r.reduce(
         (
-          acc: { [address: string]: number },
+          acc: { [address: Address]: number },
           balance: BigNumber,
           index: number,
         ) => ({
@@ -45,15 +46,15 @@ export const useMulticall = () => {
    * @returns Promise<{ [address: string]: number }>
    */
   const getERC20Balances = async (
-    addresses: string[],
+    addresses: Address[],
     rpc: string,
-    contractAddress: string,
+    contractAddress: Address,
   ) => {
     const provider = new ethers.providers.JsonRpcProvider(rpc);
     const multicallProvider = new Provider(provider, 100); // hardcoded to 100
     const multicallContract = new Contract(MULTICALL_CONTRACT, multicall3Abi);
 
-    const callData: ContractCall[] = addresses.map((address: string) =>
+    const callData: ContractCall[] = addresses.map((address: Address) =>
       multicallContract.call(contractAddress, 'balanceOf(address):(uint256)', [
         address,
       ]),
@@ -62,7 +63,7 @@ export const useMulticall = () => {
     return multicallProvider.all(callData).then((r: BigNumber[]) =>
       r.reduce(
         (
-          acc: { [address: string]: number },
+          acc: { [address: Address]: number },
           balance: BigNumber,
           index: number,
         ) => ({
diff --git a/frontend/hooks/useServices.tsx b/frontend/hooks/useServices.tsx
index ae4eb254c..064431c82 100644
--- a/frontend/hooks/useServices.tsx
+++ b/frontend/hooks/useServices.tsx
@@ -1,7 +1,7 @@
-import { Service, ServiceHash, ServiceTemplate } from "@/client";
-import { ServicesContext } from "@/context";
-import { ServicesService } from "@/service";
-import { useContext } from "react";
+import { Service, ServiceHash, ServiceTemplate } from '@/client';
+import { ServicesContext } from '@/context';
+import { ServicesService } from '@/service';
+import { useContext } from 'react';
 
 export const useServices = () => {
   const { services, updateServicesState, hasInitialLoaded } =
diff --git a/frontend/hooks/useSpawn.tsx b/frontend/hooks/useSpawn.tsx
index f94877b2e..b7695986e 100644
--- a/frontend/hooks/useSpawn.tsx
+++ b/frontend/hooks/useSpawn.tsx
@@ -18,9 +18,8 @@ export const useSpawn = () => {
       case SpawnScreenState.DONE:
         return 100;
       default:
-        break;
+        return 0;
     }
-    return 0;
   }, [spawnScreenState]);
 
   const resetSpawnScreenState = useCallback(
diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
index f72a7f655..a33285267 100644
--- a/frontend/pages/_app.tsx
+++ b/frontend/pages/_app.tsx
@@ -3,11 +3,11 @@ import {
   ServicesProvider,
   SpawnProvider,
   TabsProvider,
-} from "@/context";
-import { AppInfoProvider } from "@/context";
-import { mainTheme } from "@/theme";
-import { ConfigProvider } from "antd";
-import type { AppProps } from "next/app";
+  AppInfoProvider,
+} from '@/context';
+import { mainTheme } from '@/theme';
+import { ConfigProvider } from 'antd';
+import type { AppProps } from 'next/app';
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
index b133791e6..c8767fd5c 100644
--- a/frontend/pages/index.tsx
+++ b/frontend/pages/index.tsx
@@ -1,24 +1,24 @@
-import { Layout } from "@/components/Layout/Layout";
-import { Marketplace } from "@/components/Marketplace/Marketplace";
-import { YourAgents } from "@/components/YourAgents/YourAgents";
-import { Tab } from "@/enums";
-import { useTabs } from "@/hooks/useTabs";
-import { Tabs, type TabsProps } from "antd";
-import { useMemo } from "react";
+import { Layout } from '@/components/Layout/Layout';
+import { Marketplace } from '@/components/Marketplace/Marketplace';
+import { YourAgents } from '@/components/YourAgents/YourAgents';
+import { Tab } from '@/enums';
+import { useTabs } from '@/hooks/useTabs';
+import { Tabs, type TabsProps } from 'antd';
+import { useMemo } from 'react';
 
 export default function Home() {
   const { activeTab, setActiveTab } = useTabs();
 
-  const tabs: TabsProps["items"] = useMemo(
+  const tabs: TabsProps['items'] = useMemo(
     () => [
       {
         key: Tab.YOUR_AGENTS,
-        label: "Your Agents",
+        label: 'Your Agents',
         children: <YourAgents />,
       },
       {
         key: Tab.MARKETPLACE,
-        label: "Marketplace",
+        label: 'Marketplace',
         children: <Marketplace />,
       },
     ],
diff --git a/frontend/pages/spawn/[serviceTemplateHash].tsx b/frontend/pages/spawn/[serviceTemplateHash].tsx
index 08a2387b1..e1e743085 100644
--- a/frontend/pages/spawn/[serviceTemplateHash].tsx
+++ b/frontend/pages/spawn/[serviceTemplateHash].tsx
@@ -1,48 +1,40 @@
-import { Service, ServiceTemplate } from "@/client";
-import { SpawnRPC } from "@/components/Spawn";
-import { SpawnScreenState } from "@/enums";
-import { useMarketplace, useSpawn } from "@/hooks";
-import { GetServerSidePropsContext } from "next";
-import dynamic from "next/dynamic";
-import { useMemo, useState } from "react";
+import { Service, ServiceTemplate } from '@/client';
+import { SpawnRPC } from '@/components/Spawn';
+import { SpawnScreenState } from '@/enums';
+import { useMarketplace, useSpawn } from '@/hooks';
+import { Address } from '@/types';
+import { GetServerSidePropsContext } from 'next';
+import dynamic from 'next/dynamic';
+import { ReactElement, useMemo, useState } from 'react';
 
 const SpawnAgentFunding = dynamic(
   () =>
-    import("@/components/Spawn/SpawnAgentFunding/SpawnAgentFunding").then(
+    import('@/components/Spawn/SpawnAgentFunding').then(
       (mod) => mod.SpawnAgentFunding,
     ),
   { ssr: false },
 );
 
 const SpawnDone = dynamic(
-  () =>
-    import("@/components/Spawn/SpawnDone/SpawnDone").then(
-      (mod) => mod.SpawnDone,
-    ),
+  () => import('@/components/Spawn/SpawnDone').then((mod) => mod.SpawnDone),
   { ssr: false },
 );
 
 const SpawnHeader = dynamic(
-  () =>
-    import("@/components/Spawn/SpawnHeader/SpawnHeader").then(
-      (mod) => mod.SpawnHeader,
-    ),
+  () => import('@/components/Spawn/SpawnHeader').then((mod) => mod.SpawnHeader),
   { ssr: false },
 );
 
 const SpawnStakingCheck = dynamic(
   () =>
-    import("@/components/Spawn/SpawnStakingCheck/SpawnStakingCheck").then(
+    import('@/components/Spawn/SpawnStakingCheck').then(
       (mod) => mod.SpawnStakingCheck,
     ),
   { ssr: false },
 );
 
 const SpawnError = dynamic(
-  () =>
-    import("@/components/Spawn/SpawnError/SpawnError").then(
-      (mod) => mod.SpawnError,
-    ),
+  () => import('@/components/Spawn/SpawnError').then((mod) => mod.SpawnError),
   { ssr: false },
 );
 
@@ -53,16 +45,16 @@ export const getServerSideProps = async (
   return { props: { serviceTemplateHash } };
 };
 
-export const SpawnPage = ({
-  serviceTemplateHash,
-}: {
+type SpawnPageProps = {
   serviceTemplateHash: string;
-}) => {
+};
+
+export const SpawnPage = ({ serviceTemplateHash }: SpawnPageProps) => {
   const { spawnScreenState, setSpawnScreenState } = useSpawn();
   const { getServiceTemplate } = useMarketplace();
 
   const [service, setService] = useState<Service>();
-  const [rpc, setRpc] = useState("http://localhost:8545"); // hardcoded default for now
+  const [rpc, setRpc] = useState('http://localhost:8545'); // hardcoded default for now
   const [isStaking, setIsStaking] = useState<boolean>(false);
 
   const serviceTemplate: ServiceTemplate | undefined = useMemo(
@@ -71,10 +63,10 @@ export const SpawnPage = ({
   );
 
   const [agentFundRequirements, setAgentFundRequirements] = useState<{
-    [address: string]: number;
+    [address: Address]: number;
   }>({});
 
-  const spawnScreen: JSX.Element = useMemo(() => {
+  const spawnScreen: ReactElement = useMemo(() => {
     if (!serviceTemplate)
       return <SpawnError message="Invalid service template" />;
 
diff --git a/frontend/service/AppInfo.ts b/frontend/service/AppInfo.ts
index 9f7cb1fac..80e8f6dee 100644
--- a/frontend/service/AppInfo.ts
+++ b/frontend/service/AppInfo.ts
@@ -1,14 +1,14 @@
-import { AppInfo } from "@/client";
-import { BACKEND_URL } from "@/constants";
+import { AppInfo } from '@/client';
+import { BACKEND_URL } from '@/constants';
 
 /**
  * Get the app info, including users public key key
  */
 const getAppInfo = async (): Promise<AppInfo> => {
   return fetch(`${BACKEND_URL}/`, {
-    method: "GET",
+    method: 'GET',
     headers: {
-      "Content-Type": "application/json",
+      'Content-Type': 'application/json',
     },
   }).then((response) => response.json());
 };
diff --git a/frontend/service/Services.ts b/frontend/service/Services.ts
index f919107bc..47c3d772e 100644
--- a/frontend/service/Services.ts
+++ b/frontend/service/Services.ts
@@ -5,8 +5,8 @@ import {
   Service,
   ServiceHash,
   ServiceTemplate,
-} from "@/client";
-import { BACKEND_URL } from "@/constants";
+} from '@/client';
+import { BACKEND_URL } from '@/constants';
 
 /**
  * Get the status of a service
@@ -17,9 +17,9 @@ const getServiceStatus = async (
   serviceHash: ServiceHash,
 ): Promise<Deployment> => {
   return fetch(`${BACKEND_URL}/services/${serviceHash}/status`, {
-    method: "POST",
+    method: 'POST',
     headers: {
-      "Content-Type": "application/json",
+      'Content-Type': 'application/json',
     },
   }).then((response) => response.json());
 };
@@ -40,9 +40,9 @@ const getService = async (serviceHash: ServiceHash): Promise<Service> =>
  */
 const getServices = async (): Promise<Service[]> =>
   fetch(`${BACKEND_URL}/services`, {
-    method: "GET",
+    method: 'GET',
     headers: {
-      "Content-Type": "application/json",
+      'Content-Type': 'application/json',
     },
   }).then((response) => response.json());
 
@@ -53,9 +53,9 @@ const getServices = async (): Promise<Service[]> =>
  */
 const deployService = async (serviceHash: ServiceHash): Promise<Deployment> =>
   fetch(`${BACKEND_URL}/services/${serviceHash}/deploy`, {
-    method: "POST",
+    method: 'POST',
     headers: {
-      "Content-Type": "application/json",
+      'Content-Type': 'application/json',
     },
   }).then((response) => response.json());
 
@@ -68,7 +68,7 @@ const deleteServices = async (
   payload: DeleteServicesPayload,
 ): Promise<DeleteServicesResponse> =>
   fetch(`${BACKEND_URL}/services`, {
-    method: "DELETE",
+    method: 'DELETE',
     body: JSON.stringify(payload),
   }).then((response) => response.json());
 
@@ -81,10 +81,10 @@ const createService = async (
   serviceTemplate: Required<ServiceTemplate>,
 ): Promise<Service> =>
   fetch(`${BACKEND_URL}/services`, {
-    method: "POST",
+    method: 'POST',
     body: JSON.stringify(serviceTemplate),
     headers: {
-      "Content-Type": "application/json",
+      'Content-Type': 'application/json',
     },
   }).then((response) => response.json());
 
@@ -95,7 +95,7 @@ const createService = async (
  */
 const stopService = async (serviceHash: ServiceHash): Promise<Deployment> =>
   fetch(`${BACKEND_URL}/services/${serviceHash}/stop`, {
-    method: "POST",
+    method: 'POST',
   }).then((response) => response.json());
 
 export const ServicesService = {
diff --git a/frontend/service/index.ts b/frontend/service/index.ts
index df3a80ba2..341c136cd 100644
--- a/frontend/service/index.ts
+++ b/frontend/service/index.ts
@@ -1,2 +1,2 @@
-export * from "./AppInfo";
-export * from "./Services";
+export * from './AppInfo';
+export * from './Services';
diff --git a/frontend/types/Address.ts b/frontend/types/Address.ts
new file mode 100644
index 000000000..f64ddbb97
--- /dev/null
+++ b/frontend/types/Address.ts
@@ -0,0 +1 @@
+export type Address = `0x${string}`;
diff --git a/frontend/types/Maps.ts b/frontend/types/Maps.ts
new file mode 100644
index 000000000..38bafe581
--- /dev/null
+++ b/frontend/types/Maps.ts
@@ -0,0 +1,4 @@
+import { Address } from '.';
+
+export type FundsRequirementMap = { [address: Address]: number };
+export type FundsReceivedMap = { [address: Address]: boolean };
diff --git a/frontend/types/QRModalData.ts b/frontend/types/QRModalData.ts
index 5ea41971d..edafee788 100644
--- a/frontend/types/QRModalData.ts
+++ b/frontend/types/QRModalData.ts
@@ -1,6 +1,8 @@
+import { Address } from './Address';
+
 export type QRModalData = {
   open: boolean;
-  address?: string;
+  address?: Address;
   amount?: number;
   chainId?: number;
   isERC20: boolean;
diff --git a/frontend/types/index.ts b/frontend/types/index.ts
index f3eef6a67..7ad4a3440 100644
--- a/frontend/types/index.ts
+++ b/frontend/types/index.ts
@@ -1 +1,2 @@
-export type * from "./QRModalData";
+export type * from './QRModalData';
+export type * from './Address';