diff --git a/.storybook/test-data.js b/.storybook/test-data.js
index eede73242..a2ca2f9e4 100644
--- a/.storybook/test-data.js
+++ b/.storybook/test-data.js
@@ -34,8 +34,8 @@ const state = {
       }
     },
     "unapprovedTxs": {
-      "7786962153682822": {
-        "id": 7786962153682822,
+      "3111025347726181": {
+        "id": 3111025347726181,
         "time": 1620710815484,
         "status": "unapproved",
         "metamaskNetworkId": "3",
@@ -43,7 +43,7 @@ const state = {
         "loadingDefaults": false,
         "txParams": {
           "from": "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4",
-          "to": "0xad6d458402f60fd3bd25163575031acdce07538d",
+          "to": "0xaD6D458402F60fD3Bd25163575031ACDce07538D",
           "value": "0x0",
           "data": "0xa9059cbb000000000000000000000000b19ac54efa18cc3a14a5b821bfec73d284bf0c5e0000000000000000000000000000000000000000000000003782dace9d900000",
           "gas": "0xcb28",
@@ -62,7 +62,7 @@ const state = {
             "loadingDefaults": true,
             "txParams": {
               "from": "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4",
-              "to": "0xad6d458402f60fd3bd25163575031acdce07538d",
+              "to": "0xaD6D458402F60fD3Bd25163575031ACDce07538D",
               "value": "0x0",
               "data": "0xa9059cbb000000000000000000000000b19ac54efa18cc3a14a5b821bfec73d284bf0c5e0000000000000000000000000000000000000000000000003782dace9d900000",
               "gas": "0xcb28",
@@ -95,11 +95,11 @@ const state = {
       }
     },
     "contractExchangeRates": {
-      "0xad6d458402f60fd3bd25163575031acdce07538d": 0
+      "0xaD6D458402F60fD3Bd25163575031ACDce07538D": 0
     },
     "tokens": [
       {
-        "address": "0xad6d458402f60fd3bd25163575031acdce07538d",
+        "address": "0xaD6D458402F60fD3Bd25163575031ACDce07538D",
         "symbol": "DAI",
         "decimals": 18
       }
@@ -122,7 +122,7 @@ const state = {
       "ensResolution": null,
       "ensResolutionError": "",
       "token": {
-        "address": "0xad6d458402f60fd3bd25163575031acdce07538d",
+        "address": "0xaD6D458402F60fD3Bd25163575031ACDce07538D",
         "symbol": "DAI",
         "decimals": 18
       }
@@ -259,7 +259,7 @@ const state = {
         ],
         "0x3": [
           {
-            "address": "0xad6d458402f60fd3bd25163575031acdce07538d",
+            "address": "0xaD6D458402F60fD3Bd25163575031ACDce07538D",
             "symbol": "DAI",
             "decimals": 18
           }
@@ -274,7 +274,7 @@ const state = {
       }
     },
     "assetImages": {
-      "0xad6d458402f60fd3bd25163575031acdce07538d": "./images/logo.png"
+      "0xaD6D458402F60fD3Bd25163575031ACDce07538D": "./sai.svg"
     },
     "hiddenTokens": [],
     "suggestedTokens": {},
@@ -652,14 +652,14 @@ const state = {
       "chainId": "0x3",
       "loadingDefaults": false,
       "txParams": {
-        "from": "0x983211ce699ea5ab57cc528086154b6db1ad8e55",
-        "to": "0xad6d458402f60fd3bd25163575031acdce07538d",
+        "from": "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4",
+        "to": "0xaD6D458402F60fD3Bd25163575031ACDce07538D",
         "value": "0x0",
         "data": "0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170",
         "gas": "0xea60",
         "gasPrice": "0x4a817c800"
       },
-      "type": "standard",
+      "type": "transfer",
       "origin": "https://metamask.github.io",
       "transactionCategory": "approve",
       "history": [
@@ -672,7 +672,7 @@ const state = {
           "loadingDefaults": true,
           "txParams": {
             "from": "0x983211ce699ea5ab57cc528086154b6db1ad8e55",
-            "to": "0xad6d458402f60fd3bd25163575031acdce07538d",
+            "to": "0xaD6D458402F60fD3Bd25163575031ACDce07538D",
             "value": "0x0",
             "data": "0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170",
             "gas": "0xea60",
diff --git a/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js b/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js
new file mode 100644
index 000000000..a1d22cd22
--- /dev/null
+++ b/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { store } from '../../../.storybook/preview';
+import ConfirmTokenTransactionBase from './confirm-token-transaction-base.component';
+
+export default {
+  title: 'Confirmation Screens',
+};
+
+const state = store.getState();
+
+export const ConfirmTokenTransaction = () => {
+  const { metamask, confirmTransaction } = state;
+  const { currentCurrency } = metamask;
+  const { fiatTransactionTotal } = confirmTransaction;
+  return (
+    <ConfirmTokenTransactionBase
+      currentCurrency={currentCurrency}
+      fiatTransactionTotal={fiatTransactionTotal}
+      tokenSymbol="DAI"
+    />
+  );
+};