diff --git a/packages/common-components/src/index.ts b/packages/common-components/src/index.ts
index 8684f17bf5..a6d8a17044 100644
--- a/packages/common-components/src/index.ts
+++ b/packages/common-components/src/index.ts
@@ -20,6 +20,7 @@ export * from "./Icons"
 export * from "./Modal"
 export * from "./NumberInput"
 export * from "./MenuDropdown"
+export * from "./Paper"
 export * from "./ProgressBar"
 export * from "./RadioInput"
 export * from "./Router"
diff --git a/packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx b/packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx
new file mode 100644
index 0000000000..db489b7d8b
--- /dev/null
+++ b/packages/gaming-ui/src/Components/Elements/ApiKeyCard.tsx
@@ -0,0 +1,86 @@
+import React from "react"
+import { AccessKey } from "@chainsafe/files-api-client"
+import { makeStyles, createStyles } from "@chainsafe/common-theme"
+import { CSGTheme } from "../../Themes/types"
+import { Button, Typography, Paper } from "@chainsafe/common-components"
+import { Trans } from "@lingui/macro"
+import dayjs from "dayjs"
+
+
+const useStyles = makeStyles(({ constants }: CSGTheme) =>
+  createStyles({
+    root: {
+      position: "relative",
+      margin: constants.generalUnit,
+      borderRadius: constants.generalUnit / 2,
+      maxWidth: 250,
+      padding: `${constants.generalUnit * 2}px ${constants.generalUnit}px`
+    },
+    button: {
+      marginTop: constants.generalUnit * 2
+    }
+  })
+)
+
+interface IApiKeyCard {
+  apiKey: AccessKey
+  deleteKey: () => void
+}
+
+const ApiKeyCard = ({ apiKey, deleteKey }: IApiKeyCard) => {
+  const classes = useStyles()
+
+  return (
+    <Paper className={classes.root}>
+      <Typography variant="h4"
+        component="h4">
+        <Trans>
+          Id:
+        </Trans>
+      </Typography>
+      <Typography
+        variant="body1"
+        component="p"
+      >
+        { apiKey.id }
+      </Typography>
+      <Typography variant="h4"
+        component="h4">
+        <Trans>
+          Status:
+        </Trans>
+      </Typography>
+      <Typography
+        variant="body1"
+        component="p">
+        { apiKey.status }
+      </Typography>
+      <Typography
+        variant="h4"
+        component="h4"
+      >
+        <Trans>
+          Created on:
+        </Trans>
+      </Typography>
+      <Typography
+        variant="body1"
+        component="p"
+      >
+        { dayjs(apiKey.created_at).format("DD MMM YYYY h:mm a") }
+      </Typography>
+      <Button
+        className={classes.button}
+        variant="secondary"
+        fullsize={true}
+        onClick={deleteKey}
+      >
+        <Trans>
+          Delete key
+        </Trans>
+      </Button>
+    </Paper>
+  )
+}
+
+export default ApiKeyCard
\ No newline at end of file
diff --git a/packages/gaming-ui/src/Components/GamingRoutes.tsx b/packages/gaming-ui/src/Components/GamingRoutes.tsx
index 45b6928323..3936871e6b 100644
--- a/packages/gaming-ui/src/Components/GamingRoutes.tsx
+++ b/packages/gaming-ui/src/Components/GamingRoutes.tsx
@@ -31,7 +31,9 @@ const GamingRoutes = () => {
       />
       <ConditionalRoute
         path={ROUTE_LINKS.SettingsRoot}
-        isAuthorized={isLoggedIn}
+        isAuthorized={false}
+        // Settings not required yet
+        // isAuthorized={isLoggedIn}
         component={SettingsPage}
         redirectPath={ROUTE_LINKS.Landing}
       />
diff --git a/packages/gaming-ui/src/Components/Layouts/AppNav.tsx b/packages/gaming-ui/src/Components/Layouts/AppNav.tsx
index b312cb4e21..7746860bf1 100644
--- a/packages/gaming-ui/src/Components/Layouts/AppNav.tsx
+++ b/packages/gaming-ui/src/Components/Layouts/AppNav.tsx
@@ -9,10 +9,7 @@ import {
   Link,
   Typography,
   PowerDownSvg,
-  // ProgressBar,
-  // formatBytes,
-  ChainsafeLogo,
-  SettingSvg
+  ChainsafeLogo
 } from "@chainsafe/common-components"
 import { ROUTE_LINKS } from "../GamingRoutes"
 import { Trans } from "@lingui/macro"
@@ -240,39 +237,9 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
           )}
           <div className={classes.linksArea}>
             <nav className={classes.navMenu}>
-              <Link
-                data-cy="settings-nav"
-                onClick={handleOnClick}
-                className={classes.navItem}
-                to={ROUTE_LINKS.SettingsRoot}
-              >
-                <SettingSvg />
-                <Typography
-                  variant="h5"
-                  className={classes.navItemText}
-                >
-                  <Trans>Settings</Trans>
-                </Typography>
-              </Link>
             </nav>
           </div>
           <section>
-            {desktop && (
-              <div>
-                {/* <Typography
-                  variant="body2"
-                  className={classes.spaceUsedMargin}
-                  component="p"
-                >{`${formatBytes(spaceUsed, 2)} of ${formatBytes(
-                    FREE_PLAN_LIMIT, 2
-                  )} used`}</Typography>
-                <ProgressBar
-                  className={classes.spaceUsedMargin}
-                  progress={(spaceUsed / FREE_PLAN_LIMIT) * 100}
-                  size="small"
-                /> */}
-              </div>
-            )}
             {!desktop && (
               <div
                 className={classes.navItem}
diff --git a/packages/gaming-ui/src/Components/Modules/ApiKeys.tsx b/packages/gaming-ui/src/Components/Modules/DashboardModule.tsx
similarity index 52%
rename from packages/gaming-ui/src/Components/Modules/ApiKeys.tsx
rename to packages/gaming-ui/src/Components/Modules/DashboardModule.tsx
index d22d350fe2..7d75feb1b8 100644
--- a/packages/gaming-ui/src/Components/Modules/ApiKeys.tsx
+++ b/packages/gaming-ui/src/Components/Modules/DashboardModule.tsx
@@ -1,34 +1,17 @@
-import React, { useEffect, useState, useCallback } from "react"
-import { makeStyles, createStyles, debounce } from "@chainsafe/common-theme"
-import { useGamingApi } from "../../Contexts/GamingApiContext"
+import { Button, CopyIcon, Modal, PlusIcon, Typography } from "@chainsafe/common-components"
+import { createStyles, debounce, makeStyles } from "@chainsafe/common-theme"
 import { AccessKey } from "@chainsafe/files-api-client"
-import {
-  Typography,
-  Button,
-  PlusIcon,
-  Table,
-  TableHead,
-  TableRow,
-  TableHeadCell,
-  TableBody,
-  TableCell,
-  MenuDropdown,
-  DeleteSvg,
-  MoreIcon,
-  CopyIcon,
-  Modal
-} from "@chainsafe/common-components"
-import { CSGTheme } from "../../Themes/types"
 import { Trans } from "@lingui/macro"
-import dayjs from "dayjs"
-
-export const desktopGridSettings = "2fr 2fr 1fr 1.5fr 70px !important"
-export const mobileGridSettings = "2fr 2fr 1fr 1.5fr 70px !important"
+import React, { useCallback, useEffect, useState } from "react"
+import { useGamingApi } from "../../Contexts/GamingApiContext"
+import { CSGTheme } from "../../Themes/types"
+import ApiKeyCard from "../Elements/ApiKeyCard"
 
-const useStyles = makeStyles(({ constants, breakpoints, animation, zIndex, palette }: CSGTheme) =>
+const useStyles = makeStyles(({ breakpoints, constants, palette, zIndex }: CSGTheme) =>
   createStyles({
     root: {
-      position: "relative"
+      position: "relative",
+      margin: constants.generalUnit
     },
     header: {
       display: "flex",
@@ -48,41 +31,30 @@ const useStyles = makeStyles(({ constants, breakpoints, animation, zIndex, palet
         marginLeft: constants.generalUnit
       }
     },
-    tableHead: {
-      marginTop: 24
-    },
-    tableRow: {
-      border: "2px solid transparent",
-      transitionDuration: `${animation.transform}ms`,
-      [breakpoints.up("md")]: {
-        gridTemplateColumns: desktopGridSettings
-      },
-      [breakpoints.down("md")]: {
-        gridTemplateColumns: mobileGridSettings
-      }
-    },
-    dropdownIcon: {
-      "& svg": {
-        fill: constants.fileSystemItemRow.dropdownIcon
-      }
-    },
-    dropdownOptions: {
-      backgroundColor: constants.fileSystemItemRow.optionsBackground,
-      color: constants.fileSystemItemRow.optionsColor,
-      border: `1px solid ${constants.fileSystemItemRow.optionsBorder}`
-    },
-    dropdownItem: {
-      backgroundColor: constants.fileSystemItemRow.itemBackground,
-      color: constants.fileSystemItemRow.itemColor
-    },
-    menuIcon: {
+    dataArea: {
+      marginTop: constants.generalUnit * 2,
       display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      width: 20,
-      marginRight: constants.generalUnit * 1.5,
-      "& svg": {
-        fill: constants.fileSystemItemRow.menuIcon
+      flexDirection: "row",
+      justifyContent: "space-between",
+      flexWrap: "wrap",
+      "& > *": {
+        margin: constants.generalUnit,
+        width:"100%",
+        [breakpoints.up("xs")]: {
+          maxWidth: `calc(100% - ${constants.generalUnit * 2}px)`
+        },
+        [breakpoints.up("sm")]: {
+          maxWidth: `calc(50% - ${constants.generalUnit * 2}px)`
+        },
+        [breakpoints.up("md")]: {
+          maxWidth: `calc(33% - ${constants.generalUnit * 2}px)`
+        },
+        [breakpoints.up("lg")]: {
+          maxWidth: `calc(25% - ${constants.generalUnit * 2}px)`
+        },
+        [breakpoints.up("xl")]: {
+          maxWidth: `calc(20% - ${constants.generalUnit * 2}px)`
+        }
       }
     },
     modalRoot: {
@@ -137,7 +109,7 @@ const useStyles = makeStyles(({ constants, breakpoints, animation, zIndex, palet
   })
 )
 
-const ApiKeys = () => {
+const DashboardModule = () => {
   const classes = useStyles()
   const { gamingApiClient } = useGamingApi()
   const [keys, setKeys] = useState<AccessKey[]>([])
@@ -161,15 +133,17 @@ const ApiKeys = () => {
 
   const fetchAccessKeys = useCallback(() => {
     gamingApiClient.listAccessKeys()
-      .then(setKeys)
+      .then(keys => setKeys(keys.filter(key => key.type === "gaming")))
       .catch(console.error)
   }, [gamingApiClient])
 
-  const createStorageAccessKey = useCallback(() => {
+  const createGamingAccessKey = useCallback(() => {
     gamingApiClient.createAccessKey({ type: "gaming" })
-      .then(setNewKey)
-      .then(fetchAccessKeys)
-      .then(() => setIsNewKeyModalOpen(true))
+      .then((key) => {
+        setNewKey(key)
+        fetchAccessKeys()
+        setIsNewKeyModalOpen(true)
+      })
       .catch(console.error)
   }, [fetchAccessKeys, gamingApiClient])
 
@@ -193,16 +167,16 @@ const ApiKeys = () => {
             data-cy="api-keys-header"
           >
             <Trans>
-            API Keys
+              Dashboard
             </Trans>
           </Typography>
           <div className={classes.controls}>
             <Button
               data-cy="add-storage-api-key-button"
-              onClick={createStorageAccessKey}
+              onClick={createGamingAccessKey}
               variant="outline"
               size="large"
-              disabled={keys.filter(k => k.type === "storage").length > 0}
+              disabled={keys.filter(k => k.type === "gaming").length > 0}
             >
               <PlusIcon />
               <span>
@@ -211,96 +185,15 @@ const ApiKeys = () => {
             </Button>
           </div>
         </header>
-        <Table
-          fullWidth={true}
-          striped={true}
-          hover={true}
-          className=""
-        >
-          <TableHead className={classes.tableHead}>
-            <TableRow
-              type="grid"
-              className={classes.tableRow}
-            >
-              <TableHeadCell
-                sortButtons={false}
-                align="center"
-              >
-                <Trans>Id</Trans>
-              </TableHeadCell>
-              <TableHeadCell
-                sortButtons={false}
-                align="center"
-              >
-                <Trans>Type</Trans>
-              </TableHeadCell>
-              <TableHeadCell
-                sortButtons={false}
-                align="center"
-              >
-                <Trans>Status</Trans>
-              </TableHeadCell>
-              <TableHeadCell
-                sortButtons={false}
-                align="center"
-              >
-                <Trans>Created At</Trans>
-              </TableHeadCell>
-              <TableHeadCell>{/* Menu */}</TableHeadCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {keys.map(k =>
-              <TableRow
-                key={k.id}
-                type='grid'
-                className={classes.tableRow}>
-                <TableCell align='left'>
-                  <Typography>
-                    {k.id}
-                  </Typography>
-                </TableCell>
-                <TableCell>
-                  <Typography>
-                    {k.type}
-                  </Typography>
-                </TableCell>
-                <TableCell>
-                  <Typography>
-                    {k.status}
-                  </Typography>
-                </TableCell>
-                <TableCell>
-                  <Typography>
-                    {dayjs(k.created_at).format("DD MMM YYYY h:mm a")}
-                  </Typography>
-                </TableCell>
-                <TableCell align="right">
-                  <MenuDropdown
-                    animation="none"
-                    anchor={"bottom-right"}
-                    menuItems={[{
-                      contents: (
-                        <>
-                          <DeleteSvg className={classes.menuIcon} />
-                          <span data-cy="menu-share">
-                            <Trans>Delete Key</Trans>
-                          </span>
-                        </>
-                      ),
-                      onClick: () => deleteAccessKey(k.id)
-                    }]}
-                    classNames={{
-                      icon: classes.dropdownIcon,
-                      options: classes.dropdownOptions,
-                      item: classes.dropdownItem
-                    }}
-                    indicator={MoreIcon}
-                  />
-                </TableCell>
-              </TableRow>)}
-          </TableBody>
-        </Table>
+        <section className={classes.dataArea}>
+          {
+            keys.map((key: AccessKey, index: number) => (
+              <ApiKeyCard
+                key={`api-key-${index}`}
+                deleteKey={() => deleteAccessKey(key.id)}
+                apiKey={key} />))
+          }
+        </section>
       </div>
       <Modal
         className={classes.modalRoot}
@@ -327,7 +220,10 @@ const ApiKeys = () => {
           </Typography>
           <div className={classes.field}>
             <div className={classes.secretContainer}>
-              <Typography variant='body2'>
+              <Typography
+                component="p"
+                variant='h5'
+              >
                 <Trans>Make sure to save the secret, as it can only be displayed once.</Trans>
               </Typography>
               {copiedSecret && (
@@ -351,13 +247,12 @@ const ApiKeys = () => {
             </div>
           </div>
           <Button
-            autoFocus
             onClick={() => {
               setIsNewKeyModalOpen(false)
               setNewKey(undefined)
             }}
           >
-            Close
+            <Trans>Close</Trans>
           </Button>
         </div>
       </Modal>
@@ -365,4 +260,4 @@ const ApiKeys = () => {
   )
 }
 
-export default ApiKeys
+export default DashboardModule
\ No newline at end of file
diff --git a/packages/gaming-ui/src/Components/Pages/DashboardPage.tsx b/packages/gaming-ui/src/Components/Pages/DashboardPage.tsx
index 8a3df055c5..2cd132244a 100644
--- a/packages/gaming-ui/src/Components/Pages/DashboardPage.tsx
+++ b/packages/gaming-ui/src/Components/Pages/DashboardPage.tsx
@@ -1,27 +1,10 @@
 import React from "react"
-import { makeStyles, createStyles } from "@chainsafe/common-theme"
-import { Typography } from "@chainsafe/common-components"
-
-const useStyles = makeStyles(() =>
-  createStyles({
-    root: {
-      position: "relative"
-    }
-  })
-)
+import DashboardModule from "../Modules/DashboardModule"
 
 const DashboardPage = () => {
-  const classes = useStyles()
 
   return (
-    <div className={classes.root}>
-      <Typography
-        component="h1"
-        variant="h1"
-      >
-        Dashboard
-      </Typography>
-    </div>
+    <DashboardModule />
   )
 }
 
diff --git a/packages/gaming-ui/src/Components/Pages/SettingsPage.tsx b/packages/gaming-ui/src/Components/Pages/SettingsPage.tsx
index d7aa60c146..e1ab8bb179 100644
--- a/packages/gaming-ui/src/Components/Pages/SettingsPage.tsx
+++ b/packages/gaming-ui/src/Components/Pages/SettingsPage.tsx
@@ -1,21 +1,17 @@
 import React, { useCallback } from "react"
 import { Tabs,
-  TabPane as TabPaneOrigin,
+  // TabPane as TabPaneOrigin,
   Typography, Divider,
   useParams,
-  useHistory,
-  ITabPaneProps,
-  CaretRightIcon,
-  LockIcon
+  useHistory
 } from "@chainsafe/common-components"
 import { makeStyles, createStyles, useThemeSwitcher } from "@chainsafe/common-theme"
 import { ROUTE_LINKS, SettingsPath } from "../GamingRoutes"
-import { t, Trans } from "@lingui/macro"
+import { Trans } from "@lingui/macro"
 import clsx from "clsx"
-import ApiKeys from "../Modules/ApiKeys"
 import { CSGTheme } from "../../Themes/types"
 
-const TabPane = (props: ITabPaneProps<SettingsPath>) => TabPaneOrigin(props)
+// const TabPane = (props: ITabPaneProps<SettingsPath>) => TabPaneOrigin(props)
 const useStyles = makeStyles(({ constants, breakpoints, palette }: CSGTheme) =>
   createStyles({
     title: {
@@ -165,16 +161,6 @@ const SettingsPage: React.FC = () => {
                 classes.injectedTabList)
             }}
           >
-            <TabPane
-              className={clsx(classes.tabPane, "apiKeysPane", (!desktop && !path) ? classes.hideTabPane : "")}
-              icon={<LockIcon className={classes.lockIcon}/>}
-              iconRight={<CaretRightIcon/>}
-              title={t`Api Keys`}
-              tabKey="apiKeys"
-              testId="apiKeys-tab"
-            >
-              <ApiKeys />
-            </TabPane>
           </Tabs>
         </div>
       }
diff --git a/packages/gaming-ui/src/locales/en/messages.po b/packages/gaming-ui/src/locales/en/messages.po
index e314e4a4a9..4c44a4d96d 100644
--- a/packages/gaming-ui/src/locales/en/messages.po
+++ b/packages/gaming-ui/src/locales/en/messages.po
@@ -13,21 +13,18 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
-msgid "API Keys"
-msgstr "API Keys"
-
 msgid "Add API Key"
 msgstr "Add API Key"
 
-msgid "Api Keys"
-msgstr "Api Keys"
-
 msgid "By connecting your wallet, you agree to our <0>Terms of Service</0> and <1>Privacy Policy</1>"
 msgstr "By connecting your wallet, you agree to our <0>Terms of Service</0> and <1>Privacy Policy</1>"
 
 msgid "Check your inbox! We've sent another email."
 msgstr "Check your inbox! We've sent another email."
 
+msgid "Close"
+msgstr "Close"
+
 msgid "Connect Wallet to Gaming"
 msgstr "Connect Wallet to Gaming"
 
@@ -55,11 +52,14 @@ msgstr "Continue with Web3 Wallet"
 msgid "Copied!"
 msgstr "Copied!"
 
-msgid "Created At"
-msgstr "Created At"
+msgid "Created on:"
+msgstr "Created on:"
 
-msgid "Delete Key"
-msgstr "Delete Key"
+msgid "Dashboard"
+msgstr "Dashboard"
+
+msgid "Delete key"
+msgstr "Delete key"
 
 msgid "Didn't receive the email ?"
 msgstr "Didn't receive the email ?"
@@ -94,8 +94,8 @@ msgstr "Go back"
 msgid "Hold on, we are logging you in…"
 msgstr "Hold on, we are logging you in…"
 
-msgid "Id"
-msgstr "Id"
+msgid "Id:"
+msgstr "Id:"
 
 msgid "Key ID"
 msgstr "Key ID"
@@ -142,8 +142,8 @@ msgstr "Something went wrong!"
 msgid "Something went wrong! Please try again."
 msgstr "Something went wrong! Please try again."
 
-msgid "Status"
-msgstr "Status"
+msgid "Status:"
+msgstr "Status:"
 
 msgid "Terms and Conditions"
 msgstr "Terms and Conditions"
@@ -163,9 +163,6 @@ msgstr "There was an error connecting your wallet"
 msgid "Try again"
 msgstr "Try again"
 
-msgid "Type"
-msgstr "Type"
-
 msgid "Use a different login method"
 msgstr "Use a different login method"
 
diff --git a/packages/storage-ui/src/Components/Modules/ApiKeys.tsx b/packages/storage-ui/src/Components/Modules/ApiKeys.tsx
index 7a5a9abb2f..2835108dc0 100644
--- a/packages/storage-ui/src/Components/Modules/ApiKeys.tsx
+++ b/packages/storage-ui/src/Components/Modules/ApiKeys.tsx
@@ -347,7 +347,7 @@ const ApiKeys = () => {
           </Typography>
           <div className={classes.field}>
             <div className={classes.secretContainer}>
-              <Typography variant='body2'>
+              <Typography variant='h3'>
                 <Trans>Make sure to save the secret, as it can only be displayed once.</Trans>
               </Typography>
               {copiedSecret && (