diff --git a/extension/src/components/Input.tsx b/extension/src/components/Input.tsx
index c9cfc36a..5f5a6f1a 100644
--- a/extension/src/components/Input.tsx
+++ b/extension/src/components/Input.tsx
@@ -1,18 +1,31 @@
 import { ReactNode, useId } from 'react'
 
+type RenderProps = {
+  inputId: string
+  descriptionId: string
+}
+
 type InputProps = {
   label: string
-  children: (inputId: string) => ReactNode
+  description?: string
+  children: (props: RenderProps) => ReactNode
 }
 
-export const Input = ({ children, label }: InputProps) => {
-  const id = useId()
+export const Input = ({ children, label, description }: InputProps) => {
+  const inputId = useId()
+  const descriptionId = useId()
 
   return (
     <div className="flex flex-col gap-2">
-      <label htmlFor={id}>{label}</label>
+      <label htmlFor={inputId}>{label}</label>
+
+      {children({ inputId, descriptionId })}
 
-      {children(id)}
+      {description && (
+        <span className="opacity-70" id={descriptionId}>
+          {description}
+        </span>
+      )}
     </div>
   )
 }
diff --git a/extension/src/components/TextInput.tsx b/extension/src/components/TextInput.tsx
index 791009a4..92a6c8c8 100644
--- a/extension/src/components/TextInput.tsx
+++ b/extension/src/components/TextInput.tsx
@@ -6,15 +6,17 @@ type TextInputProps = Omit<
   'id' | 'type' | 'className'
 > & {
   label: string
+  description?: string
 }
 
-export const TextInput = ({ label, ...props }: TextInputProps) => (
-  <Input label={label}>
-    {(id) => (
+export const TextInput = ({ label, description, ...props }: TextInputProps) => (
+  <Input label={label} description={description}>
+    {({ inputId, descriptionId }) => (
       <input
         {...props}
         type="text"
-        id={id}
+        id={inputId}
+        aria-describedby={descriptionId}
         className="border border-zodiac-light-mustard border-opacity-80 bg-transparent px-3 py-2 font-mono text-sm text-white outline-none transition-all hover:border-white"
       />
     )}
diff --git a/extension/src/panel/app-routes/transactions/BaseTransaction.tsx b/extension/src/panel/app-routes/transactions/BaseTransaction.tsx
deleted file mode 100644
index f2ae0d0f..00000000
--- a/extension/src/panel/app-routes/transactions/BaseTransaction.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Box } from '@/components'
-import { PropsWithChildren } from 'react'
-
-export const BaseTransaction = ({
-  children,
-  value,
-}: PropsWithChildren<{ value: string }>) => (
-  <label className="block">
-    <span className="text-xs">{children}</span>
-
-    <Box bg p={1}>
-      <input
-        readOnly
-        type="text"
-        value={value}
-        className="break-words font-mono text-xs"
-      />
-    </Box>
-  </label>
-)
diff --git a/extension/src/panel/app-routes/transactions/DecodedTransaction.tsx b/extension/src/panel/app-routes/transactions/DecodedTransaction.tsx
index 335b4177..e39eec14 100644
--- a/extension/src/panel/app-routes/transactions/DecodedTransaction.tsx
+++ b/extension/src/panel/app-routes/transactions/DecodedTransaction.tsx
@@ -1,6 +1,5 @@
-import { Box } from '@/components'
+import { Box, TextInput } from '@/components'
 import { FunctionFragment, Result } from 'ethers'
-import { BaseTransaction } from './BaseTransaction'
 
 interface Props {
   functionFragment: FunctionFragment
@@ -14,11 +13,14 @@ export const DecodedTransaction = ({ functionFragment, data }: Props) => {
   return (
     <Box p={2} bg>
       {functionFragment.inputs.length > 0 && (
-        <fieldset className="flex flex-col gap-2">
+        <fieldset className="flex flex-col gap-3">
           {functionFragment.inputs.map((input, i) => (
-            <BaseTransaction value={data[i].toString()}>
-              {input.name} <i className="pl-1 opacity-70">{input.type}</i>
-            </BaseTransaction>
+            <TextInput
+              readOnly
+              defaultValue={data[i].toString()}
+              label={input.name}
+              description={input.type}
+            />
           ))}
         </fieldset>
       )}
diff --git a/extension/src/panel/app-routes/transactions/RawTransaction.tsx b/extension/src/panel/app-routes/transactions/RawTransaction.tsx
index 3f27a6ca..c6e03713 100644
--- a/extension/src/panel/app-routes/transactions/RawTransaction.tsx
+++ b/extension/src/panel/app-routes/transactions/RawTransaction.tsx
@@ -1,11 +1,9 @@
-import { BaseTransaction } from './BaseTransaction'
+import { TextInput } from '@/components'
 
 interface Props {
   data: string
 }
 
 export const RawTransaction = ({ data }: Props) => (
-  <BaseTransaction value={data || ''}>
-    <span>Data</span>
-  </BaseTransaction>
+  <TextInput readOnly defaultValue={data || ''} label="Data" />
 )
diff --git a/extension/src/panel/app-routes/transactions/Transactions.tsx b/extension/src/panel/app-routes/transactions/Transactions.tsx
index d2da8857..79a8f3d8 100644
--- a/extension/src/panel/app-routes/transactions/Transactions.tsx
+++ b/extension/src/panel/app-routes/transactions/Transactions.tsx
@@ -63,7 +63,7 @@ export const Transactions = () => {
   }
 
   return (
-    <div className="flex flex-1 flex-col gap-4 pb-8 pt-4">
+    <div className="flex flex-1 flex-col gap-4 overflow-hidden pb-8 pt-4">
       <div className="px-4">
         <RouteBubble />
       </div>
@@ -92,10 +92,10 @@ export const Transactions = () => {
         </div>
       </div>
 
-      <div className="flex flex-1 flex-col gap-8 overflow-hidden px-6">
+      <div className="flex flex-1 flex-col gap-8 overflow-hidden">
         <div
           ref={scrollContainerRef}
-          className="exp flex flex-grow flex-col gap-4 overflow-y-auto"
+          className="exp flex flex-grow flex-col gap-4 overflow-y-auto px-6"
         >
           {transactions.map((transactionState, index) => (
             <Transaction
@@ -114,7 +114,7 @@ export const Transactions = () => {
           )}
         </div>
 
-        <div className="flex gap-2">
+        <div className="flex gap-2 px-6">
           {!route.initiator && (
             <Button
               secondary
@@ -124,6 +124,7 @@ export const Transactions = () => {
               Copy transaction data
             </Button>
           )}
+
           <Submit />
         </div>
       </div>
diff --git a/extension/src/panel/app.tsx b/extension/src/panel/app.tsx
index f7e6c327..1be33154 100644
--- a/extension/src/panel/app.tsx
+++ b/extension/src/panel/app.tsx
@@ -30,7 +30,7 @@ const Root = () => {
           <ProvideZodiacRoutes>
             <ProvideInjectedWallet>
               <ProvideProvider>
-                <div className="flex flex-1 flex-col">
+                <div className="flex h-full flex-1 flex-col">
                   <RouterProvider router={router} />
                   <ZodiacToastContainer />
                 </div>