diff --git a/src/components/ActivityCard.tsx b/src/components/ActivityCard.tsx
index 608f0e26..b416dee6 100644
--- a/src/components/ActivityCard.tsx
+++ b/src/components/ActivityCard.tsx
@@ -9,7 +9,7 @@ import { strategies } from "./PreventSelectedActivities"
 import ReactMarkdown from "react-markdown"
 import emoji from "remark-emoji"
 import gfm from "remark-gfm"
-
+import SymbolDigitResponses from "./SymbolDigitResponses"
 export default function ActivityCard({
   activity,
   events,
@@ -28,6 +28,7 @@ export default function ActivityCard({
   const [helpAnchor, setHelpAnchor] = useState<Element>()
   const [showGrid, setShowGrid] = useState<boolean>(forceDefaultGrid || Boolean(freeText.length))
   const { t } = useTranslation()
+
   const selectedActivity = activity
   events.sort((a, b) => a.timestamp - b.timestamp)
   let each = Object.values(
@@ -87,10 +88,7 @@ export default function ActivityCard({
   return (
     <React.Fragment>
       <Box display="flex" justifyContent="space-between" alignContent="center" p={2}>
-        {!Boolean(visibleSlice) &&
-        activity.spec !== "lamp.scratch_image" &&
-        activity.spec !== "lamp.symbol_digit_substitution" &&
-        activity.spec !== "lamp.breathe" ? (
+        {!Boolean(visibleSlice) && activity.spec !== "lamp.scratch_image" && activity.spec !== "lamp.breathe" ? (
           <Tooltip title={`${t("Switch Views")}`}>
             <IconButton onClick={(event) => setShowGrid(!showGrid)}>
               <Icon fontSize="small">dashboard</Icon>
@@ -166,6 +164,8 @@ export default function ActivityCard({
             }))}
           />
         )
+      ) : showGrid && activity.spec === "lamp.symbol_digit_substitution" ? (
+        <SymbolDigitResponses activityData={events} />
       ) : showGrid &&
         activity.spec !== "lamp.scratch_image" &&
         activity.spec !== "lamp.tips" &&
@@ -191,20 +191,11 @@ export default function ActivityCard({
             events
               .map((d) =>
                 d.temporal_slices.map((t, index) => ({
-                  item:
-                    activity.spec === "lamp.symbol_digit_substitution"
-                      ? d.temporal_slices.length > index + 1
-                        ? "Digit " + (index + 1) + " : " + t.type
-                        : t.type
-                      : activity.spec === "lamp.maze_game"
-                      ? t.level
-                      : t.item,
+                  item: activity.spec === "lamp.maze_game" ? t.level : t.item,
                   [new Date(d.timestamp).toLocaleString("en-US", Date.formatStyle("medium"))]:
                     activity.spec === "lamp.maze_game"
                       ? t.duration
-                      : activity.spec === "lamp.survey" ||
-                        activity.spec === "lamp.pop_the_bubbles" ||
-                        activity.spec === "lamp.symbol_digit_substitution"
+                      : activity.spec === "lamp.survey" || activity.spec === "lamp.pop_the_bubbles"
                       ? typeof t.value === "string" && t.value !== null
                         ? typeof t.value === "string" && ["Yes", "True"].includes(t.value.replace(/\"/g, ""))
                           ? 1
diff --git a/src/components/PreventSkills.tsx b/src/components/PreventSkills.tsx
index 7987937e..623bcc24 100644
--- a/src/components/PreventSkills.tsx
+++ b/src/components/PreventSkills.tsx
@@ -439,7 +439,7 @@ export default function PreventSkills({ selectedEvents, dateArray, dbtRange, set
                         ) : (
                           <TableRow>
                             <TableCell className={classes.skillWidth} colSpan={selectedDates.length + 1}>
-                              No records found
+                              {`${t("No records found")}`}
                             </TableCell>
                           </TableRow>
                         )}
diff --git a/src/components/SymbolDigitResponses.tsx b/src/components/SymbolDigitResponses.tsx
new file mode 100644
index 00000000..aa906c05
--- /dev/null
+++ b/src/components/SymbolDigitResponses.tsx
@@ -0,0 +1,102 @@
+import React, { useEffect, useState } from "react"
+import { makeStyles, Theme, createStyles, TableCell, Table, TableRow, TableHead, TableBody } from "@material-ui/core"
+import { useTranslation } from "react-i18next"
+import Pagination from "./PaginatedElement"
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    tablestyle: {
+      "& th": {
+        background: "#f4f4f4",
+        padding: "6px !important",
+      },
+      "& td": {
+        borderBottom: "#e3e3e3 solid 1px",
+        padding: "6px !important",
+      },
+      "& td:not(:first-child)": {
+        textAlign: "center",
+      },
+    },
+  })
+)
+
+export const getDateStringValue = (timestamp) => {
+  let date = new Date(parseInt(timestamp))
+  var curr_date = date.getDate().toString().padStart(2, "0")
+  var curr_month = (date.getMonth() + 1).toString().padStart(2, "0") //Months are zero based
+  var curr_year = date.getFullYear()
+  var curr_hr = date.getHours()
+  var curr_min = date.getMinutes()
+  let dateString = curr_month + "-" + curr_date + "-" + curr_year + "-" + curr_hr + "-" + curr_min
+  return (
+    getDateVal(dateString).toLocaleDateString([]) +
+    " " +
+    getDateVal(dateString).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+  )
+}
+
+export const getDateVal = (dateVal) => {
+  let date = dateVal.split("-")
+  const newDate = new Date()
+  newDate.setFullYear(date[2])
+  newDate.setMonth(parseInt(date[0]) - 1)
+  newDate.setDate(parseInt(date[1]))
+  newDate.setHours(parseInt(date[3]))
+  newDate.setMinutes(parseInt(date[4]))
+  return newDate
+}
+
+export default function SymbolDigitResponses({ activityData, ...props }) {
+  const classes = useStyles()
+  const { t } = useTranslation()
+  const [page, setPage] = useState(1)
+  const [rowCount, setRowCount] = useState(10)
+  const [paginated, setPaginated] = useState(activityData.slice(page * rowCount, page * rowCount + rowCount))
+
+  const handleChangePage = (page: number, rowCount: number) => {
+    setPage(page)
+    setRowCount(rowCount)
+    setPaginated(activityData.slice(page * rowCount, page * rowCount + rowCount))
+  }
+
+  return (
+    <div className={classes.root}>
+      <Table className={classes.tablestyle}>
+        <TableHead>
+          <TableRow>
+            <TableCell>Date</TableCell>
+            <TableCell>Number of symbols</TableCell>
+            <TableCell>Number of correct responses</TableCell>
+            <TableCell>Number of incorrect responses</TableCell>
+            <TableCell>Average response time (correct)</TableCell>
+            <TableCell>Average response time (incorrect)</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {activityData.length > 0 ? (
+            paginated.map((event) => (
+              <TableRow>
+                <TableCell>{getDateStringValue(event?.timestamp)}</TableCell>
+                <TableCell>{event?.static_data?.number_of_responses}</TableCell>
+                <TableCell>{event?.static_data?.number_of_correct_responses}</TableCell>
+                <TableCell>{event?.static_data?.number_of_incorrect_responses}</TableCell>
+                <TableCell>{event?.static_data?.avg_correct_response_time}</TableCell>
+                <TableCell>{event?.static_data?.avg_incorrect_response_time}</TableCell>
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={6}>{`${t("No records found")}`}</TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <Pagination data={activityData} updatePage={handleChangePage} rowPerPage={[10, 20, 50, 100]} />
+    </div>
+  )
+}