diff --git a/frontend/mocking/mocker.js b/frontend/mocking/mocker.js
index 125e38e9d3..1a0d4f050b 100644
--- a/frontend/mocking/mocker.js
+++ b/frontend/mocking/mocker.js
@@ -648,9 +648,9 @@ const schemaWithMocks = addMocksToSchema({
         const dkimScanData = store.get('DkimSub', scanUuid)
         setTimeout(() => {
           pubsub.publish(
-            `${NEW_DKIM_DATA_STREAM}/$.parameters.userKey{
+            `${NEW_DKIM_DATA_STREAM}/${
               jwt.decode(context.token, 'secret').parameters.userKey
-            }`.parameters.userKey,
+            }`,
             {
               dkimScanData: dkimScanData,
             },
@@ -661,9 +661,9 @@ const schemaWithMocks = addMocksToSchema({
         const dmarcScanData = store.get('DmarcSub', scanUuid)
         setTimeout(() => {
           pubsub.publish(
-            `${NEW_DMARC_DATA_STREAM}/$.parameters.userKey{
+            `${NEW_DMARC_DATA_STREAM}/${
               jwt.decode(context.token, 'secret').parameters.userKey
-            }`.parameters.userKey,
+            }`,
             {
               dmarcScanData: dmarcScanData,
             },
@@ -674,9 +674,9 @@ const schemaWithMocks = addMocksToSchema({
         const spfScanData = store.get('SpfSub', scanUuid)
         setTimeout(() => {
           pubsub.publish(
-            `${NEW_SPF_DATA_STREAM}/$.parameters.userKey{
+            `${NEW_SPF_DATA_STREAM}/${
               jwt.decode(context.token, 'secret').parameters.userKey
-            }`.parameters.userKey,
+            }`,
             {
               spfScanData: spfScanData,
             },
@@ -687,9 +687,9 @@ const schemaWithMocks = addMocksToSchema({
         const httpsScanData = store.get('HttpsSub', scanUuid)
         setTimeout(() => {
           pubsub.publish(
-            `${NEW_HTTPS_DATA_STREAM}/$.parameters.userKey{
+            `${NEW_HTTPS_DATA_STREAM}/${
               jwt.decode(context.token, 'secret').parameters.userKey
-            }`.parameters.userKey,
+            }`,
             {
               httpsScanData: httpsScanData,
             },
@@ -809,31 +809,41 @@ const schemaWithMocks = addMocksToSchema({
       dkimScanData: {
         subscribe: (_, _args, context) =>
           pubsub.asyncIterator(
-            `${NEW_DKIM_DATA_STREAM}/${jwt.decode(context.token, 'secret')}`,
+            `${NEW_DKIM_DATA_STREAM}/${
+              jwt.decode(context.token, 'secret').parameters.userKey
+            }`,
           ),
       },
       dmarcScanData: {
         subscribe: (_, _args, context) =>
           pubsub.asyncIterator(
-            `${NEW_DMARC_DATA_STREAM}/${jwt.decode(context.token, 'secret')}`,
+            `${NEW_DMARC_DATA_STREAM}/${
+              jwt.decode(context.token, 'secret').parameters.userKey
+            }`,
           ),
       },
       spfScanData: {
         subscribe: (_, _args, context) =>
           pubsub.asyncIterator(
-            `${NEW_SPF_DATA_STREAM}/${jwt.decode(context.token, 'secret')}`,
+            `${NEW_SPF_DATA_STREAM}/${
+              jwt.decode(context.token, 'secret').parameters.userKey
+            }`,
           ),
       },
       httpsScanData: {
         subscribe: (_, _args, context) =>
           pubsub.asyncIterator(
-            `${NEW_HTTPS_DATA_STREAM}/${jwt.decode(context.token, 'secret')}`,
+            `${NEW_HTTPS_DATA_STREAM}/${
+              jwt.decode(context.token, 'secret').parameters.userKey
+            }`,
           ),
       },
       sslScanData: {
         subscribe: (_, _args, context) =>
           pubsub.asyncIterator(
-            `${NEW_SSL_DATA_STREAM}/${jwt.decode(context.token, 'secret')}`,
+            `${NEW_SSL_DATA_STREAM}/${
+              jwt.decode(context.token, 'secret').parameters.userKey
+            }`,
           ),
       },
     },
diff --git a/frontend/src/components/StatusIcon.js b/frontend/src/components/StatusIcon.js
new file mode 100644
index 0000000000..3c169375d6
--- /dev/null
+++ b/frontend/src/components/StatusIcon.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { string } from 'prop-types'
+import { Spinner } from '@chakra-ui/react'
+import { CheckCircleIcon, WarningIcon, InfoIcon } from '@chakra-ui/icons'
+
+export function StatusIcon({ status }) {
+  if (status === 'PASS') {
+    return (
+      <CheckCircleIcon color="strong" size="icons.sm" aria-label="passes" />
+    )
+  } else if (status === 'FAIL') {
+    return <WarningIcon color="weak" size="icons.sm" aria-label="fails" />
+  } else if (status === 'LOADING') {
+    return <Spinner color="accent" size="sm" />
+  } else {
+    return (
+      <InfoIcon
+        color="info"
+        size="icons.sm"
+        aria-label="Information not sufficient, please view guidance"
+      />
+    )
+  }
+}
+
+StatusIcon.propTypes = {
+  status: string.isRequired,
+}
diff --git a/frontend/src/domains/ScanDomain.js b/frontend/src/domains/ScanDomain.js
index 74dfd1be15..8482e7fe22 100644
--- a/frontend/src/domains/ScanDomain.js
+++ b/frontend/src/domains/ScanDomain.js
@@ -13,7 +13,6 @@ import {
   Divider,
   Flex,
   Heading,
-  Spinner,
   Stack,
   Tab,
   TabList,
@@ -23,19 +22,16 @@ import {
   Text,
   useToast,
 } from '@chakra-ui/react'
-import {
-  CheckCircleIcon,
-  WarningIcon,
-  WarningTwoIcon,
-  InfoIcon,
-} from '@chakra-ui/icons'
+import { WarningTwoIcon } from '@chakra-ui/icons'
 import { useMutation, useQuery } from '@apollo/client'
 import { object, string } from 'yup'
 
 import { DomainField } from './DomainField'
+import { StatusBadge } from './StatusBadge'
 
 import { ScanCategoryDetails } from '../guidance/ScanCategoryDetails'
 import { LoadingMessage } from '../components/LoadingMessage'
+import { StatusIcon } from '../components/StatusIcon'
 import { fieldRequirements } from '../utilities/fieldRequirements'
 import { GET_ONE_TIME_SCANS } from '../graphql/queries'
 import { REQUEST_SCAN } from '../graphql/mutations'
@@ -120,8 +116,6 @@ export function ScanDomain() {
     })
   }
 
-  // TODO: Create list of collapsable scan detail cards
-
   const dmarcSteps = {
     assess: [
       t`Identify all domains and subdomains used to send mail;`,
@@ -147,16 +141,16 @@ export function ScanDomain() {
     ],
   }
 
-  const generateStatusIcon = (status) => {
-    let statusIcon
-    if (status === 'PASS') {
-      statusIcon = <CheckCircleIcon color="strong" size="icons.sm" />
-    } else if (status === 'FAIL') {
-      statusIcon = <WarningIcon color="weak" size="icons.sm" />
-    } else {
-      statusIcon = <InfoIcon color="info" size="icons.sm" />
-    }
-    return statusIcon
+  const statusGroupingProps = {
+    flexDirection: { base: 'column', md: 'row' },
+    border: '1px solid',
+    borderColor: 'gray.300',
+    borderRadius: 'md',
+    px: { base: 2, md: 0 },
+    py: { base: 1, md: 2 },
+    mx: { base: 0, md: 1 },
+    my: { base: 2, md: 0 },
+    bg: 'gray.100',
   }
 
   return (
@@ -237,116 +231,50 @@ export function ScanDomain() {
                     flexDirection={{ base: 'column', md: 'row' }}
                     flexGrow={{ base: 0, md: '1' }}
                   >
-                    <Box mx={{ md: 2 }}>
-                      <Stack
-                        align="center"
-                        flexDirection={{ base: 'row', md: 'column' }}
-                        justifyContent="space-between"
-                        spacing={0}
-                      >
-                        <Text
-                          fontWeight="bold"
-                          fontSize="sm"
-                          mb={{ base: 0, md: '2' }}
-                          mr={{ base: '2', md: 0 }}
-                        >
-                          HTTPS:
-                        </Text>
-                        {mergedScan.scan.https ? (
-                          generateStatusIcon(mergedScan.scan.https.status)
-                        ) : (
-                          <Spinner color="accent" size="sm" />
-                        )}
-                      </Stack>
-                    </Box>
-                    <Box mx={{ md: 2 }}>
-                      <Stack
-                        align="center"
-                        flexDirection={{ base: 'row', md: 'column' }}
-                        justifyContent="space-between"
-                        spacing={0}
-                      >
-                        <Text
-                          fontWeight="bold"
-                          fontSize="sm"
-                          mb={{ base: 0, md: '2' }}
-                          mr={{ base: '2', md: 0 }}
-                        >
-                          SSL:
-                        </Text>
-                        {mergedScan.scan.ssl ? (
-                          generateStatusIcon(mergedScan.scan.ssl.status)
-                        ) : (
-                          <Spinner color="accent" size="sm" />
-                        )}
-                      </Stack>
-                    </Box>
-                    <Box mx={{ md: 2 }}>
-                      <Stack
-                        align="center"
-                        flexDirection={{ base: 'row', md: 'column' }}
-                        justifyContent="space-between"
-                        spacing={0}
-                      >
-                        <Text
-                          fontWeight="bold"
-                          fontSize="sm"
-                          mb={{ base: 0, md: '2' }}
-                          mr={{ base: '2', md: 0 }}
-                        >
-                          SPF:
-                        </Text>
-                        {mergedScan.scan.spf ? (
-                          generateStatusIcon(mergedScan.scan.spf.status)
-                        ) : (
-                          <Spinner color="accent" size="sm" />
-                        )}
-                      </Stack>
-                    </Box>
-                    <Box mx={{ md: 2 }}>
-                      <Stack
-                        align="center"
-                        flexDirection={{ base: 'row', md: 'column' }}
-                        justifyContent="space-between"
-                        spacing={0}
-                      >
-                        <Text
-                          fontWeight="bold"
-                          fontSize="sm"
-                          mb={{ base: 0, md: '2' }}
-                          mr={{ base: '2', md: 0 }}
-                        >
-                          DKIM:
-                        </Text>
-                        {mergedScan.scan.dkim ? (
-                          generateStatusIcon(mergedScan.scan.dkim.status)
-                        ) : (
-                          <Spinner color="accent" size="sm" />
-                        )}
-                      </Stack>
-                    </Box>
-                    <Box mx={{ md: 2 }}>
-                      <Stack
-                        align="center"
-                        flexDirection={{ base: 'row', md: 'column' }}
-                        justifyContent="space-between"
-                        spacing={0}
-                      >
-                        <Text
-                          fontWeight="bold"
-                          fontSize="sm"
-                          mb={{ base: 0, md: '2' }}
-                          mr={{ base: '2', md: '0' }}
-                        >
-                          DMARC:
-                        </Text>
-                        {mergedScan.scan.dmarc ? (
-                          generateStatusIcon(mergedScan.scan.dmarc.status)
-                        ) : (
-                          <Spinner color="accent" size="sm" />
-                        )}
-                      </Stack>
-                    </Box>
+                    <Flex {...statusGroupingProps}>
+                      <StatusBadge
+                        text="HTTPS:"
+                        status={
+                          mergedScan.scan?.https
+                            ? mergedScan.scan.https.status
+                            : 'LOADING'
+                        }
+                      />
+                      <StatusBadge
+                        text="SSL:"
+                        status={
+                          mergedScan.scan?.ssl
+                            ? mergedScan.scan.ssl.status
+                            : 'LOADING'
+                        }
+                      />
+                    </Flex>
+                    <Flex {...statusGroupingProps}>
+                      <StatusBadge
+                        text="SPF:"
+                        status={
+                          mergedScan.scan?.spf
+                            ? mergedScan.scan.spf.status
+                            : 'LOADING'
+                        }
+                      />
+                      <StatusBadge
+                        text="DKIM:"
+                        status={
+                          mergedScan.scan?.dkim
+                            ? mergedScan.scan.dkim.status
+                            : 'LOADING'
+                        }
+                      />
+                      <StatusBadge
+                        text="DMARC:"
+                        status={
+                          mergedScan.scan?.dmarc
+                            ? mergedScan.scan.dmarc.status
+                            : 'LOADING'
+                        }
+                      />
+                    </Flex>
                     <Divider
                       orientation={{ base: 'horizontal', md: 'vertical' }}
                       alignSelf="stretch"
@@ -393,10 +321,7 @@ export function ScanDomain() {
                                 mergedScan.scan.https.status === 'PASS' &&
                                 mergedScan.scan.ssl.status === 'PASS' ? (
                                   <Stack isInline align="center" px="2">
-                                    <CheckCircleIcon
-                                      color="strong"
-                                      size="icons.sm"
-                                    />
+                                    <StatusIcon status="PASS" />
                                     <Text fontWeight="bold" fontSize="2xl">
                                       <Trans>ITPIN Compliant</Trans>
                                     </Text>
@@ -415,12 +340,7 @@ export function ScanDomain() {
                                   </Stack>
                                 )
                               ) : (
-                                <Stack isInline align="center" px="2">
-                                  <Spinner color="accent" size="md" />
-                                  <Text fontWeight="bold" fontSize="2xl">
-                                    <Trans>Loading Compliance Status</Trans>
-                                  </Text>
-                                </Stack>
+                                <LoadingMessage>One Time Scan</LoadingMessage>
                               )}
                             </Box>
                             <Accordion allowMultiple defaultIndex={[0, 1]}>
@@ -493,12 +413,7 @@ export function ScanDomain() {
                                     )}
                                 </Box>
                               ) : (
-                                <Stack isInline align="center" px="2">
-                                  <Spinner color="accent" size="md" />
-                                  <Text fontWeight="bold" fontSize="2xl">
-                                    <Trans>Loading DMARC Phase</Trans>
-                                  </Text>
-                                </Stack>
+                                <LoadingMessage>One Time Scan</LoadingMessage>
                               )}
                             </Box>
                             <Accordion allowMultiple defaultIndex={[0, 1, 2]}>
diff --git a/frontend/src/domains/StatusBadge.js b/frontend/src/domains/StatusBadge.js
index 4c94ee720e..bae5ad46b3 100644
--- a/frontend/src/domains/StatusBadge.js
+++ b/frontend/src/domains/StatusBadge.js
@@ -1,31 +1,10 @@
 import React from 'react'
 import { Stack, Text } from '@chakra-ui/react'
-import { CheckCircleIcon, InfoIcon, WarningIcon } from '@chakra-ui/icons'
 import { string } from 'prop-types'
 
-export function StatusBadge({ text, status }) {
-  const generateStatusIcon = (status) => {
-    let statusIcon
-    if (status === 'PASS') {
-      statusIcon = (
-        <CheckCircleIcon color="strong" size="icons.sm" aria-label="passes" />
-      )
-    } else if (status === 'FAIL') {
-      statusIcon = (
-        <WarningIcon color="weak" size="icons.sm" aria-label="fails" />
-      )
-    } else {
-      statusIcon = (
-        <InfoIcon
-          color="info"
-          size="icons.sm"
-          aria-label="Information not sufficient, please view guidance"
-        />
-      )
-    }
-    return statusIcon
-  }
+import { StatusIcon } from '../components/StatusIcon'
 
+export function StatusBadge({ text, status }) {
   return (
     <Stack
       align="center"
@@ -42,7 +21,7 @@ export function StatusBadge({ text, status }) {
       >
         {text}
       </Text>
-      {generateStatusIcon(status)}
+      <StatusIcon status={status} />
     </Stack>
   )
 }