diff --git a/src/popup/RequestIndex.tsx b/src/popup/RequestIndex.tsx
index bf4274e..531b01c 100644
--- a/src/popup/RequestIndex.tsx
+++ b/src/popup/RequestIndex.tsx
@@ -46,7 +46,7 @@ function RequestIndex({
           icon={faArrowAltCircleLeft as IconProp}
           onClick={prevClick}
         />
-        <div className="mx-4">
+        <div>
           <span>{index + 1}</span>
           <span>/{totalItems}</span>
         </div>
diff --git a/src/popup/Signing/Extrinsic.tsx b/src/popup/Signing/Extrinsic.tsx
index 6dbc925..e31a564 100644
--- a/src/popup/Signing/Extrinsic.tsx
+++ b/src/popup/Signing/Extrinsic.tsx
@@ -17,6 +17,7 @@ import { PORT_EXTENSION } from "../../extension-base/defaults";
 import { useTheme } from "../context/ThemeContext";
 import { transactionUtils } from "@reef-chain/util-lib";
 import { ProviderContext } from "../contexts";
+import Uik from "@reef-chain/ui-kit";
 
 interface Decoded {
   args: AnyJson | null;
@@ -160,9 +161,27 @@ function Extrinsic({
   }, [provider])
 
   const { isDarkMode } = useTheme();
+  const [showDetails, setShowDetails] = useState(false);
+
   return (
-    <table className={`flex overflow-x-scroll ${isDarkMode ? "" : "text-black"} extrinsic-data-table`}>
-      <tbody>
+    <div>
+      <div>
+        {signatureResponse?.methodName && (
+          <div className="font-bold">
+            {signatureResponse.methodName.split("(")[0]}
+          </div>
+        )}
+        {signatureResponse?.info && <div>{signatureResponse.info}</div>}
+        <Uik.Button
+          text={showDetails ? "Hide details" : "Show details"}
+          size="small"
+          onClick={() => setShowDetails(!showDetails)}
+          className="uik-button--small mt-2"
+        />
+      </div>
+      {showDetails && (
+        <table className={`flex overflow-x-scroll ${isDarkMode ? "" : "text-black"} extrinsic-data-table`}>
+          <tbody>
         {url !== PORT_EXTENSION && (
           <tr>
             <td className="extrinsic-table-label">From</td>
@@ -218,7 +237,9 @@ function Extrinsic({
           <td className="pl-4">{mortalityAsString(era, blockNumber)}</td>
         </tr>
       </tbody>
-    </table>
+        </table>
+      )}
+    </div>
   );
 }
 
diff --git a/src/popup/Signing/index.tsx b/src/popup/Signing/index.tsx
index f27d6b4..cc9f126 100644
--- a/src/popup/Signing/index.tsx
+++ b/src/popup/Signing/index.tsx
@@ -9,14 +9,12 @@ import Request from "./Request";
 import RequestIndex from "../RequestIndex";
 import Account from "../Accounts/Account";
 import { Loading } from "../components/Loading";
-import { useTheme } from "../context/ThemeContext";
 
 interface Props {
   requests: SigningRequest[];
 }
 
 export const Signing = ({ requests }: Props): JSX.Element => {
-  const { isDarkMode } = useTheme();
   const [requestIndex, setRequestIndex] = useState(0);
   const [isTransaction, setIsTransaction] = useState(false);
 
@@ -54,7 +52,7 @@ export const Signing = ({ requests }: Props): JSX.Element => {
 
   return requests.length && requests[requestIndex] ? (
     <>
-      <div className={`text-center text-lg font-bold ${isDarkMode ? "text--dark-mode" : "text-black"}`}>
+      <div className="text-center text-lg font-bold text-black">
         <span>{isTransaction ? "Transaction" : "Sign message"}</span>
         {requests.length > 1 && (
           <RequestIndex
@@ -65,7 +63,7 @@ export const Signing = ({ requests }: Props): JSX.Element => {
           />
         )}
       </div>
-      <div className="flex flex-col align-middle justify-center request-page">
+      <div className="uik-modal__popup mx-4">
         <Account
           account={requests[requestIndex].account}
           showCopyAddress={true}