diff --git a/.eslintignore b/.eslintignore
index 2120734a..d298982a 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -19,4 +19,5 @@ public/lottie/player.js
 CHANGELOG.md
 .yarn
 .licenserc.json
-.env.yarn
\ No newline at end of file
+.env.yarn
+test/data/**/*
\ No newline at end of file
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
index 7d414545..17fb0021 100644
--- a/.github/workflows/gh-pages.yml
+++ b/.github/workflows/gh-pages.yml
@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v4
         with:
           ref: gh-deploy
-          
+
       - uses: actions/setup-node@v4
         with:
           node-version: 18
diff --git a/.prettierignore b/.prettierignore
index f2387725..a18fc4b6 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -11,4 +11,5 @@ public/lottie/player.js
 CHANGELOG.md
 .yarn
 .licenserc.json
-.env.yarn
\ No newline at end of file
+.env.yarn
+test/data/**/*
\ No newline at end of file
diff --git a/index.html b/index.html
index 16e3be86..7a655bec 100644
--- a/index.html
+++ b/index.html
@@ -29,22 +29,19 @@
     <meta name="msapplication-TileColor" content="#552bbf" />
     <meta name="theme-color" content="#ffffff" />
 
-    <meta
-      name="title"
-      content="Polkadot Developer Console"
-    />
+    <meta name="title" content="Polkadot Developer Console" />
 
-    <meta name="description" content="Polkadot Developer Console is an application designed to
+    <meta
+      name="description"
+      content="Polkadot Developer Console is an application designed to
     provide Polkadot developers tools for interacting with Substrate based blockchains, allowing
-    them to build, test, deploy, and manage their projects." />
+    them to build, test, deploy, and manage their projects."
+    />
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://console.polkadot.cloud" />
-    <meta
-      property="og:title"
-      content="Polkadot Developer Console"
-    />
+    <meta property="og:title" content="Polkadot Developer Console" />
     <meta
       property="og:description"
       content="Polkadot Developer Console is an application designed to
@@ -56,13 +53,13 @@
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
     <meta property="twitter:url" content="https://console.polkadot.cloud" />
+    <meta property="twitter:title" content="Polkadot Developer Console" />
     <meta
-      property="twitter:title"
-      content="Polkadot Developer Console"
-    />
-    <meta property="twitter:description" content="Polkadot Developer Console is an application
+      property="twitter:description"
+      content="Polkadot Developer Console is an application
     designed to provide Polkadot developers tools for interacting with Substrate based blockchains,
-    allowing them to build, test, deploy, and manage their projects." />
+    allowing them to build, test, deploy, and manage their projects."
+    />
     <meta property="twitter:image" content="/img/og-image.png" />
     <link
       rel="manifest"
diff --git a/src/contexts/ChainUi/defaults.ts b/src/contexts/ChainUi/defaults.ts
index 934879a7..e54157d2 100644
--- a/src/contexts/ChainUi/defaults.ts
+++ b/src/contexts/ChainUi/defaults.ts
@@ -35,5 +35,6 @@ export const defaultChainContext: ChainUiContextInterface = {
   getInputArgs: (tabId, section) => null,
   getInputArgAtKey: (tabId, section, inputKey) => undefined,
   setInputArgAtKey: (tabId, section, keys, value) => {},
-  resetInputArgSection: (tabId, section) => {},
+  resetInputArgs: (tabId, section) => {},
+  resetInputArgsFromKey: (tabId, section, fromKey) => {},
 };
diff --git a/src/contexts/ChainUi/index.tsx b/src/contexts/ChainUi/index.tsx
index 34dd14ec..067b832d 100644
--- a/src/contexts/ChainUi/index.tsx
+++ b/src/contexts/ChainUi/index.tsx
@@ -213,8 +213,8 @@ export const ChainUiProvider = ({ children }: { children: ReactNode }) => {
     setInputArgs(updatedInputArgs);
   };
 
-  // Reset input args at a given key for either a storage item or call.
-  const resetInputArgSection = (tabId: number, namespace: InputNamespace) => {
+  // Reset input args at a given key and namespace.
+  const resetInputArgs = (tabId: number, namespace: InputNamespace) => {
     if (!inputArgsRef.current[tabId]) {
       return;
     }
@@ -225,6 +225,33 @@ export const ChainUiProvider = ({ children }: { children: ReactNode }) => {
     setInputArgs(updatedInputArgs);
   };
 
+  // Reset input args from an input key and namespace. Removes input args from any child input of
+  // the provided key. Should be used on select input changes, that allow variant selection.
+  const resetInputArgsFromKey = (
+    tabId: number,
+    namespace: InputNamespace,
+    fromKey: string
+  ) => {
+    if (!inputArgsRef.current[tabId]) {
+      return;
+    }
+
+    // Duplicate arg state for manipulation.
+    const updatedInputArgs = { ...inputArgsRef.current };
+    const args = updatedInputArgs[tabId][namespace];
+
+    // Iterate through keys state and remove keys that start with `fromKey`.
+    for (const key in args) {
+      if (key.startsWith(fromKey) && key !== fromKey) {
+        delete args[key];
+      }
+    }
+
+    // Update state.
+    updatedInputArgs[tabId][namespace] = args;
+    setInputArgs(updatedInputArgs);
+  };
+
   // Reset state for a tab.
   const destroyTabChainUi = (tabId: number) => {
     const updatedChainUi = { ...chainUi };
@@ -259,7 +286,8 @@ export const ChainUiProvider = ({ children }: { children: ReactNode }) => {
         getInputArgs,
         getInputArgAtKey,
         setInputArgAtKey,
-        resetInputArgSection,
+        resetInputArgs,
+        resetInputArgsFromKey,
         destroyTabChainUi,
       }}
     >
diff --git a/src/contexts/ChainUi/types.ts b/src/contexts/ChainUi/types.ts
index 49f6980e..4ee076b9 100644
--- a/src/contexts/ChainUi/types.ts
+++ b/src/contexts/ChainUi/types.ts
@@ -42,7 +42,12 @@ export interface ChainUiContextInterface {
     keys: InputArgTypeKeys,
     value: AnyJson
   ) => void;
-  resetInputArgSection: (tabId: number, section: InputNamespace) => void;
+  resetInputArgs: (tabId: number, section: InputNamespace) => void;
+  resetInputArgsFromKey: (
+    tabId: number,
+    section: InputNamespace,
+    fromKey: string
+  ) => void;
 }
 
 // Input arg type keys.
diff --git a/src/library/Overlay/index.scss b/src/library/Overlay/index.scss
index 64f79c96..6c04562a 100644
--- a/src/library/Overlay/index.scss
+++ b/src/library/Overlay/index.scss
@@ -33,7 +33,7 @@
 
   ::-webkit-scrollbar-thumb {
     background-color: transparent; /* color of the scroll thumb */
-    border-radius: .6rem; /* roundness of the scroll thumb */
+    border-radius: 0.6rem; /* roundness of the scroll thumb */
     border: 0.1rem solid transparent; /* creates padding around scroll thumb */
   }
 }
@@ -362,7 +362,7 @@
   > .section {
     @include modal-scrollbar;
 
-    border-radius: .6rem;
+    border-radius: 0.6rem;
     display: flex;
     flex-direction: column;
     flex-basis: 33.33%;
@@ -381,7 +381,7 @@
   > .section {
     @include modal-scrollbar;
 
-    border-radius: .6rem;
+    border-radius: 0.6rem;
     display: flex;
     flex-direction: column;
     flex-basis: 50%;
@@ -435,7 +435,7 @@
 .modal-scroll {
   @include modal-scrollbar;
 
-  border-radius: .6rem;
+  border-radius: 0.6rem;
   position: relative;
   z-index: 99;
   max-height: 100%;
@@ -465,7 +465,7 @@
 
   ::-webkit-scrollbar-thumb {
     background-color: transparent; /* color of the scroll thumb */
-    border-radius: .6rem; /* roundness of the scroll thumb */
+    border-radius: 0.6rem; /* roundness of the scroll thumb */
     border: 0.1rem solid transparent; /* creates padding around scroll thumb */
   }
 }
diff --git a/src/routes/Chain/ChainState/ChainStateList.tsx b/src/routes/Chain/ChainState/ChainStateList.tsx
index a7d27f08..2c06b1de 100644
--- a/src/routes/Chain/ChainState/ChainStateList.tsx
+++ b/src/routes/Chain/ChainState/ChainStateList.tsx
@@ -26,8 +26,7 @@ export const ChainStateList = ({
   inputNamespace,
 }: ChainStateListProps) => {
   const { tabId } = useActiveTab();
-  const { getChainUi, setChainUiNamespace, resetInputArgSection } =
-    useChainUi();
+  const { getChainUi, setChainUiNamespace, resetInputArgs } = useChainUi();
 
   const chainUi = getChainUi(tabId, chainUiSection);
 
@@ -52,7 +51,7 @@ export const ChainStateList = ({
 
     // If an input namespace is provided, reset input arg values.
     if (inputNamespace) {
-      resetInputArgSection(tabId, inputNamespace);
+      resetInputArgs(tabId, inputNamespace);
     }
 
     // Close item the dropdown if requested.
diff --git a/src/routes/Chain/ChainState/StorageItems.tsx b/src/routes/Chain/ChainState/StorageItems.tsx
index 32a2068c..272ca203 100644
--- a/src/routes/Chain/ChainState/StorageItems.tsx
+++ b/src/routes/Chain/ChainState/StorageItems.tsx
@@ -22,8 +22,7 @@ import type { InputNamespace } from 'contexts/ChainUi/types';
 export const StorageItems = () => {
   const { tabId } = useActiveTab();
   const { chainSpec, instanceId } = useChain();
-  const { getChainUi, setChainUiNamespace, resetInputArgSection } =
-    useChainUi();
+  const { getChainUi, setChainUiNamespace, resetInputArgs } = useChainUi();
 
   const chainUiSection = 'storage';
   const inputNamespace: InputNamespace = 'storage';
@@ -117,7 +116,7 @@ export const StorageItems = () => {
             setChainUiNamespace(tabId, chainUiSection, 'pallet', value);
 
             // Reset input args when selected pallet changes.
-            resetInputArgSection(tabId, inputNamespace);
+            resetInputArgs(tabId, inputNamespace);
           }}
         />
         <ChainStateList
diff --git a/src/routes/Chain/Extrinsics/CallList.tsx b/src/routes/Chain/Extrinsics/CallList.tsx
index 96a85ace..22b96d3b 100644
--- a/src/routes/Chain/Extrinsics/CallList.tsx
+++ b/src/routes/Chain/Extrinsics/CallList.tsx
@@ -16,8 +16,7 @@ import type { InputNamespace } from 'contexts/ChainUi/types';
 
 export const CallList = ({ items }: CallListProps) => {
   const { tabId } = useActiveTab();
-  const { getChainUi, setChainUiNamespace, resetInputArgSection } =
-    useChainUi();
+  const { getChainUi, setChainUiNamespace, resetInputArgs } = useChainUi();
 
   const chainUiSection = 'calls';
   const inputNamespace: InputNamespace = 'call';
@@ -39,7 +38,7 @@ export const CallList = ({ items }: CallListProps) => {
   // Handle call change.
   const handleCallChange = (name: string) => {
     setChainUiNamespace(tabId, chainUiSection, 'selected', name);
-    resetInputArgSection(tabId, inputNamespace);
+    resetInputArgs(tabId, inputNamespace);
     setCallsOpen(false);
   };
 
diff --git a/src/routes/Chain/Extrinsics/index.tsx b/src/routes/Chain/Extrinsics/index.tsx
index f9cbb6a3..66ccba3c 100644
--- a/src/routes/Chain/Extrinsics/index.tsx
+++ b/src/routes/Chain/Extrinsics/index.tsx
@@ -26,8 +26,7 @@ export const Extrinsics = () => {
   const { tabId, metaKey } = useActiveTab();
   const { getAccounts } = useImportedAccounts();
   const { getFromAddress, setFromAddress } = useChainState();
-  const { getChainUi, setChainUiNamespace, resetInputArgSection } =
-    useChainUi();
+  const { getChainUi, setChainUiNamespace, resetInputArgs } = useChainUi();
 
   const chainUiSection = 'calls';
   const inputNamespace: InputNamespace = 'call';
@@ -109,7 +108,7 @@ export const Extrinsics = () => {
               setChainUiNamespace(tabId, chainUiSection, 'pallet', value);
 
               // Reset input args when selected pallet changes.
-              resetInputArgSection(tabId, inputNamespace);
+              resetInputArgs(tabId, inputNamespace);
             }}
           />
           <CallList items={items} />
diff --git a/src/routes/Chain/Inputs/useInput.tsx b/src/routes/Chain/Inputs/useInput.tsx
index 2cd2fdaa..2637199c 100644
--- a/src/routes/Chain/Inputs/useInput.tsx
+++ b/src/routes/Chain/Inputs/useInput.tsx
@@ -30,7 +30,8 @@ export const useInput = () => {
   const { getAccounts } = useAccounts();
   const { tabId, metaKey } = useActiveTab();
   const { removeInputMetaValue } = useInputMeta();
-  const { setInputArgAtKey, getInputArgAtKey } = useChainUi();
+  const { setInputArgAtKey, getInputArgAtKey, resetInputArgsFromKey } =
+    useChainUi();
 
   const accounts = getAccounts(chainSpec);
 
@@ -370,6 +371,13 @@ export const useInput = () => {
                 onMount={onMount}
                 onRender={onRender}
                 onChange={(val) => {
+                  // Child inputs changed - remove args.
+                  resetInputArgsFromKey(
+                    tabId,
+                    inputArgConfig.namespace,
+                    inputArgConfig.inputKey
+                  );
+                  // Commit new input arg value.
                   setInputArgAtKey(tabId, inputArgConfig.namespace, keys, val);
                 }}
               />
diff --git a/test/metadata14/data/metadataV14.json b/test/data/metadataV14.json
similarity index 100%
rename from test/metadata14/data/metadataV14.json
rename to test/data/metadataV14.json
diff --git a/test/metadata14/array.spec.ts b/test/metadata14/array.spec.ts
index 221e7e38..5ec4885f 100644
--- a/test/metadata14/array.spec.ts
+++ b/test/metadata14/array.spec.ts
@@ -3,7 +3,7 @@
 
 import assert from 'assert';
 import type { AnyJson } from '@w3ux/types';
-import * as metadataJson from './data/metadataV14.json';
+import * as metadataJson from '../data/metadataV14.json';
 
 /* Metadata array tests.
 
diff --git a/test/metadata14/bitSequence.spec.ts b/test/metadata14/bitSequence.spec.ts
index 8811ca55..a9377633 100644
--- a/test/metadata14/bitSequence.spec.ts
+++ b/test/metadata14/bitSequence.spec.ts
@@ -3,7 +3,7 @@
 
 import assert from 'assert';
 import type { AnyJson } from '@w3ux/types';
-import * as metadataJson from './data/metadataV14.json';
+import * as metadataJson from '../data/metadataV14.json';
 
 /* Metadata bitSequence tests.
 
diff --git a/test/metadata14/compact.spec.ts b/test/metadata14/compact.spec.ts
index 87ecc0f0..033d0670 100644
--- a/test/metadata14/compact.spec.ts
+++ b/test/metadata14/compact.spec.ts
@@ -3,7 +3,7 @@
 
 import assert from 'assert';
 import type { AnyJson } from '@w3ux/types';
-import * as metadataJson from './data/metadataV14.json';
+import * as metadataJson from '../data/metadataV14.json';
 
 /* Metadata compact tests.
 
diff --git a/test/metadata14/composite.spec.ts b/test/metadata14/composite.spec.ts
index f5c14006..f4d8a55d 100644
--- a/test/metadata14/composite.spec.ts
+++ b/test/metadata14/composite.spec.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import assert from 'assert';
-import * as metadataJson from './data/metadataV14.json';
+import * as metadataJson from '../data/metadataV14.json';
 import type { AnyJson } from '@w3ux/types';
 
 /* Metadata composite tests.
diff --git a/test/metadata14/lookup.spec.ts b/test/metadata14/lookup.spec.ts
index 9391fd88..3a99978a 100644
--- a/test/metadata14/lookup.spec.ts
+++ b/test/metadata14/lookup.spec.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import assert from 'assert';
-import * as metadataJson from './data/metadataV14.json';
+import * as metadataJson from '../data/metadataV14.json';
 
 /* Metadata lookup tests.
 
diff --git a/test/metadata14/primitive.spec.ts b/test/metadata14/primitive.spec.ts
index b1e7e842..9bb2b666 100644
--- a/test/metadata14/primitive.spec.ts
+++ b/test/metadata14/primitive.spec.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import assert from 'assert';
-import * as metadataJson from './data/metadataV14.json';
+import * as metadataJson from '../data/metadataV14.json';
 
 /* Metadata primitive tests.
 
diff --git a/test/metadata14/sequence.spec.ts b/test/metadata14/sequence.spec.ts
index 490edd7c..9137b654 100644
--- a/test/metadata14/sequence.spec.ts
+++ b/test/metadata14/sequence.spec.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import assert from 'assert';
-import * as metadataJson from './data/metadataV14.json';
+import * as metadataJson from '../data/metadataV14.json';
 import type { AnyJson } from '@w3ux/types';
 
 /* Metadata sequence tests.
diff --git a/test/metadata14/tuple.spec.ts b/test/metadata14/tuple.spec.ts
index 07781600..870f5fed 100644
--- a/test/metadata14/tuple.spec.ts
+++ b/test/metadata14/tuple.spec.ts
@@ -3,7 +3,7 @@
 
 import assert from 'assert';
 import type { AnyJson } from '@w3ux/types';
-import * as metadataJson from './data/metadataV14.json';
+import * as metadataJson from '../data/metadataV14.json';
 
 /* Metadata tuple tests.
 
diff --git a/test/metadata14/variants.spec.ts b/test/metadata14/variants.spec.ts
index 9664f2ed..9a67c6a6 100644
--- a/test/metadata14/variants.spec.ts
+++ b/test/metadata14/variants.spec.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import assert from 'assert';
-import * as metadataJson from './data/metadataV14.json';
+import * as metadataJson from '../data/metadataV14.json';
 import type { AnyJson } from '@w3ux/types';
 
 /* Metadata variants tests.