diff --git a/components/account/AccountButton.tsx b/components/account/AccountButton.tsx
index 00a9546c2..14d0a6cbd 100644
--- a/components/account/AccountButton.tsx
+++ b/components/account/AccountButton.tsx
@@ -31,6 +31,7 @@ import {
   DesktopOnboardingModal,
   MobileOnboardingModal,
 } from "./OnboardingModal";
+import SettingsModal from "components/settings/SettingsModal";
 import CopyIcon from "../ui/CopyIcon";
 
 const BalanceRow = ({
@@ -99,6 +100,7 @@ const AccountButton: FC<{
   const [hovering, setHovering] = useState<boolean>(false);
   const [showOnboarding, setShowOnboarding] = useState(false);
   const [showGetZtgModal, setShowGetZtgModal] = useState(false);
+  const [showSettingsModal, setShowSettingsModal] = useState(false);
 
   const { data: activeBalance } = useZtgBalance(activeAccount?.address);
   const { data: polkadotBalance } = useBalance(activeAccount?.address, {
@@ -381,16 +383,17 @@ const AccountButton: FC<{
                         </Menu.Item>
                         <Menu.Item>
                           {({ active }) => (
-                            <Link href="/settings">
-                              <div className="flex items-center px-6 mb-3 hover:bg-slate-100">
-                                <Settings />
-                                <button
-                                  className={`group flex w-full items-center rounded-md px-2 py-2 text-sm font-semibold`}
-                                >
-                                  Settings
-                                </button>
-                              </div>
-                            </Link>
+                            <div
+                              className="flex items-center px-6 mb-3 cursor-pointer hover:bg-slate-100"
+                              onClick={() => setShowSettingsModal(true)}
+                            >
+                              <Settings />
+                              <button
+                                className={`group flex w-full items-center rounded-md px-2 py-2 text-sm font-semibold`}
+                              >
+                                Settings
+                              </button>
+                            </div>
                           )}
                         </Menu.Item>
                         <Menu.Item>
@@ -417,6 +420,12 @@ const AccountButton: FC<{
           </Menu>
         </div>
       )}
+      <SettingsModal
+        open={showSettingsModal}
+        onClose={() => {
+          setShowSettingsModal(false);
+        }}
+      />
       {isMobileDevice ? (
         <Modal open={showOnboarding} onClose={() => setShowOnboarding(false)}>
           <MobileOnboardingModal />
diff --git a/components/settings/AccountSettingsForm.tsx b/components/settings/AccountSettingsForm.tsx
new file mode 100644
index 000000000..ace30bf1d
--- /dev/null
+++ b/components/settings/AccountSettingsForm.tsx
@@ -0,0 +1,173 @@
+import React from "react";
+import { useForm } from "react-hook-form";
+import { isRpcSdk } from "@zeitgeistpm/sdk-next";
+import FormTransactionButton from "components/ui/FormTransactionButton";
+import { identityRootKey } from "lib/hooks/queries/useIdentity";
+import { useExtrinsic } from "lib/hooks/useExtrinsic";
+import { useSdkv2 } from "lib/hooks/useSdkv2";
+import { queryClient } from "lib/query-client";
+import { useNotifications } from "lib/state/notifications";
+import { useWallet } from "lib/state/wallet";
+import { UserIdentity } from "lib/types/user-identity";
+import { useChainConstants } from "lib/hooks/queries/useChainConstants";
+
+export type AcccountSettingsFormProps = {
+  identity: UserIdentity;
+};
+
+const AcccountSettingsForm: React.FC<AcccountSettingsFormProps> = ({
+  identity,
+}) => {
+  const {
+    register,
+    reset,
+    formState: { isValid, errors, isDirty },
+    watch,
+  } = useForm<{
+    displayName: string;
+    discord: string;
+    twitter: string;
+  }>({
+    defaultValues: {
+      displayName: identity.displayName ?? "",
+      discord: identity.discord ?? "",
+      twitter: identity.twitter ?? "",
+    },
+    mode: "all",
+    reValidateMode: "onChange",
+  });
+
+  const wallet = useWallet();
+  const address = wallet.activeAccount?.address;
+  const [sdk, id] = useSdkv2();
+
+  const notificationStore = useNotifications();
+
+  const discordHandle = watch("discord");
+  const twitterHandle = watch("twitter");
+  const displayName = watch("displayName");
+
+  const { data: constants } = useChainConstants();
+
+  const indetityCost =
+    constants?.identity?.basicDeposit ??
+    0 + (constants?.identity?.fieldDeposit ?? 0);
+
+  const isCleared =
+    !identity?.displayName && !identity?.discord && !identity?.twitter;
+
+  const { send: updateIdentity, isLoading: isUpdating } = useExtrinsic(
+    () => {
+      if (isRpcSdk(sdk)) {
+        return sdk.api.tx.identity.setIdentity({
+          additional: [[{ Raw: "discord" }, { Raw: discordHandle }]],
+          display: { Raw: displayName },
+          twitter: { Raw: twitterHandle },
+        });
+      }
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries([id, identityRootKey, address]);
+        notificationStore.pushNotification("Successfully set Identity", {
+          type: "Success",
+        });
+        reset({ displayName, discord: discordHandle, twitter: twitterHandle });
+      },
+    },
+  );
+
+  const { send: clearIdentity, isLoading: isClearing } = useExtrinsic(
+    () => {
+      if (isRpcSdk(sdk)) {
+        return sdk.api.tx.identity.clearIdentity();
+      }
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries([id, identityRootKey, address]);
+        notificationStore.pushNotification("Successfully cleared Identity", {
+          type: "Success",
+        });
+        reset({
+          displayName: "",
+          discord: "",
+          twitter: "",
+        });
+      },
+    },
+  );
+  return (
+    <form
+      className="flex flex-col"
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (!isValid) return;
+        updateIdentity();
+      }}
+    >
+      <label htmlFor="displayName" className="font-bold mb-2">
+        Display Name
+      </label>
+      <input
+        type="text"
+        id="displayName"
+        {...register("displayName", { required: true })}
+        className={
+          "rounded-md items-center h-14 px-3 outline-none border-1 border-transparent bg-anti-flash-white " +
+          (errors?.displayName ? "border-vermilion" : "")
+        }
+      />
+
+      <label htmlFor="discord" className="font-bold mt-5 mb-2">
+        Discord
+      </label>
+
+      <input
+        type="text"
+        id="discord"
+        {...register("discord", { required: true })}
+        className={
+          "rounded-md items-center h-14 px-3 outline-none border-1 border-transparent bg-anti-flash-white " +
+          (errors?.discord ? "border-vermilion" : "")
+        }
+      />
+
+      <label htmlFor="twitter" className="font-bold mt-5 mb-2">
+        Twitter
+      </label>
+
+      <input
+        type="text"
+        id="twitter"
+        {...register("twitter", { required: true })}
+        className={
+          "rounded-md items-center h-14 px-3 outline-none border-1 border-transparent bg-anti-flash-white mb-5 " +
+          (errors?.twitter ? "border-vermilion" : "")
+        }
+      />
+
+      <div className="rounded-lg p-5 mb-5 bg-provincial-pink text-sm">
+        Setting an identity requires a deposit of up to {indetityCost}{" "}
+        {constants?.tokenSymbol}. This deposit can be retrieved by clearing your
+        identity.
+      </div>
+
+      <FormTransactionButton
+        disabled={!isDirty || !isValid || isUpdating || isClearing}
+      >
+        Set Identity
+      </FormTransactionButton>
+      <button
+        type="button"
+        className="mt-2 text-sm text-sky-600 focus:outline-none"
+        disabled={isUpdating || isClearing || isCleared}
+        onClick={() => clearIdentity()}
+      >
+        Clear Identity
+      </button>
+    </form>
+  );
+};
+
+export default AcccountSettingsForm;
diff --git a/components/settings/OtherSettingsForm.tsx b/components/settings/OtherSettingsForm.tsx
new file mode 100644
index 000000000..ec318b111
--- /dev/null
+++ b/components/settings/OtherSettingsForm.tsx
@@ -0,0 +1,120 @@
+import React, { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import AddressInput, { AddressOption } from "components/ui/AddressInput";
+import FormTransactionButton from "components/ui/FormTransactionButton";
+import { isRpcSdk } from "@zeitgeistpm/sdk-next";
+import { useSdkv2 } from "lib/hooks/useSdkv2";
+import { useWallet } from "lib/state/wallet";
+import { isValidPolkadotAddress } from "lib/util";
+
+export type OtherSettingsFormProps = {};
+
+const OtherSettingsForm: React.FC<OtherSettingsFormProps> = ({}) => {
+  const [sdk] = useSdkv2();
+  const wallet = useWallet();
+
+  const proxyConfig = wallet.getProxyFor(wallet.activeAccount?.address);
+
+  const {
+    register,
+    control,
+    trigger,
+    handleSubmit,
+    reset,
+    formState: { isValid, errors, isDirty },
+    watch,
+  } = useForm<{
+    proxyAddress: AddressOption | null;
+    enableProxy: boolean;
+  }>({
+    defaultValues: {
+      proxyAddress: proxyConfig
+        ? { label: proxyConfig.address, value: proxyConfig.address }
+        : null,
+      enableProxy: proxyConfig?.enabled ?? false,
+    },
+    mode: "all",
+    reValidateMode: "onChange",
+  });
+
+  const proxyEnabled = watch("enableProxy");
+
+  useEffect(() => {
+    trigger("proxyAddress");
+  }, [proxyEnabled]);
+
+  return (
+    <form
+      className="flex flex-col"
+      onSubmit={handleSubmit((data) => {
+        if (!wallet.activeAccount?.address) {
+          return;
+        }
+        wallet.setProxyFor(wallet.activeAccount.address, {
+          address: data.proxyAddress?.value ?? "",
+          enabled: data.enableProxy,
+        });
+        reset(data);
+      })}
+    >
+      <label className="font-bold mb-2">Proxy Account</label>
+      <div className="flex flex-row p-2 mb-2">
+        <input
+          type="checkbox"
+          {...register("enableProxy")}
+          id="enableProxy"
+          className="cursor-pointer accent-ztg-blue"
+        />
+        <label className="ml-2 cursor-pointer" htmlFor="enableProxy">
+          Enable Proxy Execution
+        </label>
+      </div>
+      <Controller
+        name="proxyAddress"
+        rules={{
+          validate: async (v, { enableProxy }) => {
+            if (!enableProxy) {
+              return true;
+            }
+            if (enableProxy && !v?.value) {
+              return "Enter an address to proxy";
+            }
+            if (v && !isValidPolkadotAddress(v.value)) {
+              return "Invalid address";
+            }
+            if (v && isRpcSdk(sdk) && v.value) {
+              const proxies = await sdk.api.query.proxy.proxies(v.value);
+              const proxyMatch = proxies?.[0]?.find((p) => {
+                return p.delegate.toString() === wallet.activeAccount?.address;
+              });
+              if (!Boolean(proxyMatch)) {
+                return "You are not a proxy for this account.";
+              }
+            }
+          },
+          deps: ["enableProxy"],
+        }}
+        render={({ field: { value, onChange } }) => {
+          return (
+            <AddressInput
+              onChange={onChange}
+              value={value}
+              disabled={!proxyEnabled}
+              error={!isValid ? errors.proxyAddress?.message : undefined}
+            />
+          );
+        }}
+        control={control}
+      />
+      <FormTransactionButton
+        disabled={!isValid || !isDirty}
+        className="mt-5"
+        disableFeeCheck={true}
+      >
+        Save
+      </FormTransactionButton>
+    </form>
+  );
+};
+
+export default OtherSettingsForm;
diff --git a/components/settings/SettingsModal.tsx b/components/settings/SettingsModal.tsx
new file mode 100644
index 000000000..1acf202f5
--- /dev/null
+++ b/components/settings/SettingsModal.tsx
@@ -0,0 +1,84 @@
+import React, { Fragment, useState } from "react";
+import { Dialog, Tab } from "@headlessui/react";
+import Modal from "components/ui/Modal";
+import AcccountSettingsForm from "./AccountSettingsForm";
+import OtherSettingsForm from "./OtherSettingsForm";
+import { useIdentity } from "lib/hooks/queries/useIdentity";
+import { useWallet } from "lib/state/wallet";
+import { AddressOption } from "components/ui/AddressInput";
+
+export type SettingsModalProps = {
+  open: boolean;
+  onClose: () => void;
+};
+
+enum TabSelection {
+  Account,
+  Other,
+}
+
+const SettingsModal: React.FC<SettingsModalProps> = ({ open, onClose }) => {
+  const [tabSelection, setTabSelection] = React.useState(TabSelection.Account);
+
+  const wallet = useWallet();
+  const address = wallet.activeAccount?.address;
+
+  const { data: identity } = useIdentity(address);
+
+  return (
+    <Modal open={open} onClose={onClose}>
+      <Dialog.Panel className="w-full max-w-[462px] bg-white rounded-md p-8">
+        <h3 className="text-2xl text-center mb-5">Settings</h3>
+        <Tab.Group
+          onChange={(index) => setTabSelection(index)}
+          defaultIndex={tabSelection}
+        >
+          <Tab.List as={Fragment}>
+            <div className="flex justify-center mb-5 pb-3 border-b-1 border-b-sky-200 text-sky-600">
+              <div className="flex-grow center">
+                <Tab as={Fragment}>
+                  {({ selected }) => (
+                    <span
+                      className={
+                        "cursor-pointer text-sm " +
+                        (selected ? "font-semibold text-black" : "")
+                      }
+                    >
+                      Account
+                    </span>
+                  )}
+                </Tab>
+              </div>
+              <div className="flex-grow center">
+                <Tab as={Fragment}>
+                  {({ selected }) => (
+                    <span
+                      className={
+                        "cursor-pointer text-sm " +
+                        (selected ? "font-semibold text-black" : "")
+                      }
+                    >
+                      Other Settings
+                    </span>
+                  )}
+                </Tab>
+              </div>
+            </div>
+          </Tab.List>
+        </Tab.Group>
+        {
+          {
+            [TabSelection.Account]: identity ? (
+              <AcccountSettingsForm identity={identity} />
+            ) : (
+              <></>
+            ),
+            [TabSelection.Other]: <OtherSettingsForm />,
+          }[tabSelection]
+        }
+      </Dialog.Panel>
+    </Modal>
+  );
+};
+
+export default SettingsModal;
diff --git a/components/ui/AddressInput.tsx b/components/ui/AddressInput.tsx
index 979ad1f17..0f365c4af 100644
--- a/components/ui/AddressInput.tsx
+++ b/components/ui/AddressInput.tsx
@@ -137,32 +137,39 @@ const Input = (props: InputProps<AddressOption, false>) => {
   return <components.Input {...props} className="absolute w-full left-0" />;
 };
 
-export type AddressSelectProps = {
+export type AddressInputProps = {
   onChange: (option: AddressOption | null) => void;
   value?: AddressOption | null;
   error?: string;
+  options?: AddressOption[];
+  disabled?: boolean;
 };
 
-const AddressInput: React.FC<AddressSelectProps> = ({
+const AddressInput: React.FC<AddressInputProps> = ({
   onChange,
   error,
   value = null,
+  options,
+  disabled = false,
 }) => {
   const wallet = useWallet();
 
-  const options = useMemo<AddressOption[]>(() => {
+  const opts = useMemo<AddressOption[]>(() => {
+    if (options) {
+      return options;
+    }
     return wallet.accounts
       .filter((acc) => acc.address !== wallet.activeAccount?.address)
       .map((account) => ({
         label: shortenAddress(account.address, 13, 13),
         value: account.address,
       }));
-  }, [wallet.accounts]);
+  }, [options, wallet.accounts]);
 
   return (
     <div
       className={
-        "mb-5 h-14 w-full bg-anti-flash-white rounded-md border-1 border-transparent " +
+        "mb-5 h-14 w-full bg-anti-flash-white rounded-md border-1 border-transparent relative " +
         (error ? "border-vermilion" : "")
       }
     >
@@ -170,7 +177,7 @@ const AddressInput: React.FC<AddressSelectProps> = ({
         className="h-full"
         isSearchable={true}
         isClearable={true}
-        options={options}
+        options={opts}
         unstyled={true}
         placeholder="Enter account address"
         isMulti={false}
@@ -189,6 +196,9 @@ const AddressInput: React.FC<AddressSelectProps> = ({
         }}
         onChange={onChange}
       />
+      {disabled && (
+        <div className="absolute w-full h-full bg-white opacity-50 top-0" />
+      )}
       {error && (
         <div className="text-vermilion text-sm text-right">{error}</div>
       )}
diff --git a/components/ui/FormTransactionButton.tsx b/components/ui/FormTransactionButton.tsx
index 0e2ed20d3..2cfeb3b5c 100644
--- a/components/ui/FormTransactionButton.tsx
+++ b/components/ui/FormTransactionButton.tsx
@@ -6,6 +6,7 @@ interface TransactionButtonProps {
   className?: string;
   dataTest?: string;
   disableFeeCheck?: boolean;
+  type?: "button" | "submit" | "reset";
 }
 
 const FormTransactionButton: FC<PropsWithChildren<TransactionButtonProps>> = ({
@@ -13,11 +14,12 @@ const FormTransactionButton: FC<PropsWithChildren<TransactionButtonProps>> = ({
   className = "",
   dataTest = "",
   disableFeeCheck = false,
+  type = "submit",
   children,
 }) => {
   return (
     <TransactionButton
-      type="submit"
+      type={type}
       disabled={disabled}
       className={className}
       dataTest={dataTest}
diff --git a/pages/settings.tsx b/pages/settings.tsx
deleted file mode 100644
index fd93095cb..000000000
--- a/pages/settings.tsx
+++ /dev/null
@@ -1,313 +0,0 @@
-import { encodeAddress } from "@polkadot/util-crypto";
-import { useQueryClient } from "@tanstack/react-query";
-import { isRpcSdk } from "@zeitgeistpm/sdk-next";
-import { tryCatch } from "@zeitgeistpm/utility/dist/option";
-import { Input } from "components/ui/inputs";
-import { useChainConstants } from "lib/hooks/queries/useChainConstants";
-import { identityRootKey, useIdentity } from "lib/hooks/queries/useIdentity";
-import { useExtrinsic } from "lib/hooks/useExtrinsic";
-import { useSdkv2 } from "lib/hooks/useSdkv2";
-import { useNotifications } from "lib/state/notifications";
-import { ProxyConfig, useWallet } from "lib/state/wallet";
-import { NextPage } from "next";
-import {
-  FC,
-  MouseEventHandler,
-  PropsWithChildren,
-  useEffect,
-  useState,
-} from "react";
-import { AlertTriangle } from "react-feather";
-import { useForm } from "react-hook-form";
-
-const SubmitButton: FC<
-  PropsWithChildren<{
-    onClick?: MouseEventHandler<HTMLButtonElement>;
-    disabled?: boolean;
-  }>
-> = ({ onClick = () => {}, disabled = false, children }) => {
-  return (
-    <button
-      onClick={onClick}
-      disabled={disabled}
-      className="flex flex-row p-ztg-8 w-ztg-266 h-ztg-37 bg-ztg-blue rounded-ztg-100 cursor-pointer disabled:cursor-default disabled:opacity-20 focus:outline-none"
-    >
-      <div className="text-ztg-14-150 font-medium text-white flex flex-grow justify-center items-center">
-        {children ?? "Submit"}
-      </div>
-    </button>
-  );
-};
-
-const IdentitySettings = () => {
-  const wallet = useWallet();
-  const notificationStore = useNotifications();
-
-  const [displayName, setDisplayName] = useState("");
-  const [discordHandle, setDiscordHandle] = useState("");
-  const [twitterHandle, setTwitterHandle] = useState("");
-  const queryClient = useQueryClient();
-
-  const address = wallet.activeAccount?.address;
-  const [sdk, id] = useSdkv2();
-
-  const { data: identity } = useIdentity(address);
-
-  const { data: constants } = useChainConstants();
-
-  const { send: updateIdentity, isLoading: isUpdating } = useExtrinsic(
-    () => {
-      if (isRpcSdk(sdk)) {
-        return sdk.api.tx.identity.setIdentity({
-          additional: [[{ Raw: "discord" }, { Raw: discordHandle }]],
-          display: { Raw: displayName },
-          twitter: { Raw: twitterHandle },
-        });
-      }
-    },
-    {
-      onSuccess: () => {
-        queryClient.invalidateQueries([id, identityRootKey, address]);
-        notificationStore.pushNotification("Successfully set Identity", {
-          type: "Success",
-        });
-      },
-    },
-  );
-  const { send: clearIdentity, isLoading: isClearing } = useExtrinsic(
-    () => {
-      if (isRpcSdk(sdk)) {
-        return sdk.api.tx.identity.clearIdentity();
-      }
-    },
-    {
-      onSuccess: () => {
-        queryClient.invalidateQueries([id, identityRootKey, address]);
-        notificationStore.pushNotification("Successfully cleared Identity", {
-          type: "Success",
-        });
-      },
-    },
-  );
-
-  const transactionPending = isClearing || isUpdating;
-
-  useEffect(() => {
-    if (!identity) {
-      setDisplayName("");
-      setDiscordHandle("");
-      setTwitterHandle("");
-    } else {
-      setDisplayName(identity.displayName ?? "");
-      setDiscordHandle(identity.discord ?? "");
-      setTwitterHandle(identity.twitter ?? "");
-    }
-  }, [identity]);
-
-  const handleDisplayNameChange = (value: string) => {
-    if (getBytesCount(value) <= 32) {
-      setDisplayName(value);
-    }
-  };
-
-  const handleDiscordChange = (value: string) => {
-    if (getBytesCount(value) <= 32) {
-      setDiscordHandle(value);
-    }
-  };
-  const handleTwitterChange = (value: string) => {
-    if (getBytesCount(value) <= 32) {
-      setTwitterHandle(value);
-    }
-  };
-
-  const getBytesCount = (string: string) => {
-    return new TextEncoder().encode(string).length;
-  };
-
-  const submitDisabled =
-    (identity?.discord === discordHandle &&
-      identity.displayName === displayName &&
-      identity.twitter === twitterHandle) ||
-    transactionPending ||
-    !wallet.connected;
-
-  const indetityCost =
-    constants?.identity?.basicDeposit ??
-    0 + (constants?.identity?.fieldDeposit ?? 0);
-
-  return (
-    <>
-      <h6 className="font-bold mb-5" data-test="displayNameLabel">
-        Display Name
-      </h6>
-      <Input
-        data-test="display-name"
-        type="text"
-        className="w-1/2 mb-5 bg-sky-200 dark:bg-sky-1000 text-sky-600"
-        onChange={(e) => handleDisplayNameChange(e.target.value)}
-        value={displayName}
-        disabled={!wallet.connected}
-      />
-      <div className="flex flex-row mb-5">
-        <div className="w-full mr-ztg-27">
-          <h6 className="font-bold mb-5" data-test="discordLabel">
-            Discord
-          </h6>
-          <Input
-            data-test="discord"
-            type="text"
-            className=" bg-sky-200 dark:bg-sky-1000 text-sky-600 "
-            onChange={(e) => handleDiscordChange(e.target.value)}
-            value={discordHandle}
-            disabled={!wallet.connected}
-          />
-        </div>
-        <div className="w-full ">
-          <h6 className="font-bold mb-5" data-test="twitterLabel">
-            Twitter
-          </h6>
-          <Input
-            data-test="twitter"
-            type="text"
-            className=" bg-sky-200 dark:bg-sky-1000 text-sky-600"
-            onChange={(e) => handleTwitterChange(e.target.value)}
-            value={twitterHandle}
-            disabled={!wallet.connected}
-          />
-        </div>
-      </div>
-      <div className="flex items-center border border-sky-600 rounded-ztg-5 my-5 p-5 text-sky-600">
-        <AlertTriangle size={20} className="mr-5" />
-        <div className="text-ztg-14-120 font-normal">
-          Setting an identity requires a deposit of up to {indetityCost}{" "}
-          {constants?.tokenSymbol}. This deposit can be retrieved by clearing
-          your identity.
-        </div>
-      </div>
-      <div className="flex mb-5" data-test="createMarketButton">
-        <SubmitButton onClick={updateIdentity} disabled={submitDisabled}>
-          Set Identity
-        </SubmitButton>
-        <button
-          className="ml-5 text-ztg-14-120 text-sky-600 focus:outline-none"
-          onClick={clearIdentity}
-        >
-          Clear Identity
-        </button>
-      </div>
-    </>
-  );
-};
-
-const ProxySettings = () => {
-  const [sdk] = useSdkv2();
-  const wallet = useWallet();
-
-  const proxy = wallet.getProxyFor(wallet.activeAccount?.address);
-
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors, isDirty, isValid },
-    watch,
-  } = useForm<ProxyConfig>({
-    mode: "all",
-    defaultValues: {
-      address: proxy?.address ?? "",
-      enabled: proxy?.enabled ?? false,
-    },
-  });
-
-  const onSubmit = (data: ProxyConfig) => {
-    if (!wallet.activeAccount?.address) return;
-    wallet.setProxyFor(wallet.activeAccount?.address, data);
-    reset(data);
-  };
-
-  const address = watch("address");
-  const enabled = watch("enabled");
-
-  return (
-    <>
-      <h6 className="font-bold mb-5" data-test="displayNameLabel">
-        Proxy Account
-      </h6>
-
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="mb-3">
-          <div className="inline-flex gap-2 justify-center items-center">
-            <h4 className="text-base">Enable Proxy Execution</h4>
-            <input type="checkbox" {...register("enabled")} />
-          </div>
-        </div>
-
-        <div className={`mb-5 ${!enabled && "opacity-20"}`}>
-          <div className="w-full">
-            <input
-              type="text"
-              disabled={!enabled}
-              className={`w-full bg-sky-200 px-3 py-2 rounded-md text-sky-600 border-transparent border-1 outline-none ${
-                errors.address && " border-vermilion"
-              }`}
-              {...register("address", {
-                validate: async (value) => {
-                  if (enabled && tryCatch(() => encodeAddress(value)).isNone())
-                    return "Not a valid address";
-
-                  if (isRpcSdk(sdk)) {
-                    const proxies = await sdk.api.query.proxy.proxies(value);
-                    const proxyMatch = proxies?.[0]?.find((p) => {
-                      return (
-                        p.delegate.toString() === wallet.activeAccount?.address
-                      );
-                    });
-                    if (!Boolean(proxyMatch)) {
-                      return "You are not a proxy for this account.";
-                    }
-                  }
-                },
-                deps: ["enabled"],
-              })}
-            />
-          </div>
-          <div className="h-3 text-vermilion text-sm font-light mt-2 pl-5">
-            {errors.address && errors.address.message}
-          </div>
-        </div>
-
-        <button
-          type="submit"
-          disabled={!isDirty || !isValid}
-          className="flex flex-row p-ztg-8 w-ztg-266 h-ztg-37 bg-ztg-blue rounded-ztg-100 cursor-pointer text-white center disabled:cursor-default disabled:opacity-20 focus:outline-none"
-        >
-          <div className="text-ztg-14-150 font-medium text-white flex flex-grow justify-center items-center">
-            Save Proxy Settings
-          </div>
-        </button>
-      </form>
-    </>
-  );
-};
-
-const Settings: NextPage = () => {
-  return (
-    <>
-      <h2
-        className="text-5-150 font-bold  mb-ztg-23"
-        data-test="accountSettingsHeader"
-      >
-        Account Settings
-      </h2>
-      <div className="p-ztg-30 rounded-ztg-10 mb-ztg-32  font-bold bg-sky-100 dark:bg-sky-700">
-        <IdentitySettings />
-      </div>
-      <div className="p-ztg-30 rounded-ztg-10 mb-ztg-32  font-bold bg-sky-100 dark:bg-sky-700">
-        <ProxySettings />
-      </div>
-    </>
-  );
-};
-
-export default Settings;