diff --git a/src/components/Common/MultiFactorAuthentication.tsx b/src/components/Common/MultiFactorAuthentication.tsx
index 3d2b832a2..8f8bb97fd 100644
--- a/src/components/Common/MultiFactorAuthentication.tsx
+++ b/src/components/Common/MultiFactorAuthentication.tsx
@@ -371,7 +371,7 @@ function SecurityKeyTable() {
   }
 
   // data that goes onto the table
-  const security_key_table_data = tokens.map((cred: CredentialType) => {
+  const securityKeyData = tokens.map((cred: CredentialType) => {
     // date created
     const date_created = cred.created_ts.slice(0, "YYYY-MM-DD".length);
     // date last used
@@ -384,61 +384,87 @@ function SecurityKeyTable() {
     // verify button/ verified badge
     if (cred.verified) {
       btnVerify = (
-        <span>
-          <FormattedMessage description="security verified" defaultMessage="Verified" />
-        </span>
+        <div aria-label="verification status" className="verified">
+          <span>
+            <FormattedMessage description="security key status" defaultMessage="Verification status:" />
+            &nbsp;
+            <strong>
+              <FormattedMessage description="security verified" defaultMessage="verified" />
+            </strong>
+          </span>
+        </div>
       );
     } else {
       btnVerify = (
-        <React.Fragment>
-          <EduIDButton buttonstyle="link" size="sm" onClick={() => handleVerifyWebauthnTokenFreja(cred.key)}>
-            <FormattedMessage description="security verify" defaultMessage="Freja+" />
-          </EduIDButton>
-          <EduIDButton buttonstyle="link" size="sm" onClick={() => handleVerifyWebauthnTokenBankID(cred.key)}>
-            <FormattedMessage description="security verify" defaultMessage="BankID" />
-          </EduIDButton>
-        </React.Fragment>
+        <div aria-label="verify with freja or bankID">
+          <span>
+            <FormattedMessage description="security key status" defaultMessage="Verify with: " />
+            &nbsp;
+            <EduIDButton buttonstyle="link" size="sm" onClick={() => handleVerifyWebauthnTokenFreja(cred.key)}>
+              <FormattedMessage description="security verify" defaultMessage="Freja+" />
+            </EduIDButton>
+            <EduIDButton buttonstyle="link" size="sm" onClick={() => handleVerifyWebauthnTokenBankID(cred.key)}>
+              <FormattedMessage description="security verify" defaultMessage="BankID" />
+            </EduIDButton>
+          </span>
+        </div>
       );
     }
 
     return (
-      <tr key={cred.key} className={`webauthn-token-holder ${cred.verified ? "verified" : ""}`} data-token={cred.key}>
-        <td>{cred.description}</td>
-        <td data-toggle="tooltip" data-placement="top" title={new Date(cred.created_ts).toString()}>
-          {date_created}
-        </td>
-        <td data-toggle="tooltip" data-placement="top" title={new Date(cred.success_ts).toString()}>
-          {date_success}
-        </td>
-        <td className="value-status">{btnVerify}</td>
-        <td>
-          <EduIDButton
-            id="remove-webauthn"
-            buttonstyle="close"
-            size="sm"
-            onClick={() => handleConfirmDeleteModal(cred.key)}
-          ></EduIDButton>
-          <NotificationModal
-            id="remove-security-key"
-            title={
-              <FormattedMessage
-                defaultMessage="Remove security key"
-                description="settings.remove_security_key_modal_title"
-              />
-            }
-            mainText={
-              <FormattedMessage
-                defaultMessage={`Are you sure you want to remove your security key?`}
-                description="delete.remove_security_key_modal_text"
-              />
-            }
-            showModal={showConfirmRemoveSecurityKeyModal}
-            closeModal={() => setShowConfirmRemoveSecurityKeyModal(false)}
-            acceptModal={handleRemoveWebauthnToken}
-            acceptButtonText={<FormattedMessage defaultMessage="Confirm" description="delete.confirm_button" />}
-          />
-        </td>
-      </tr>
+      <React.Fragment key={cred.key}>
+        <figure className={`webauthn-token-holder ${cred.verified ? "verified" : ""}`} data-token={cred.key}>
+          <div>
+            <span aria-label="key name">
+              <FormattedMessage description="security description name" defaultMessage="Name:" />
+              &nbsp;
+              <strong>{cred.description}</strong>
+            </span>
+            <EduIDButton
+              id="remove-webauthn"
+              buttonstyle="close"
+              size="sm"
+              onClick={() => handleConfirmDeleteModal(cred.key)}
+            ></EduIDButton>
+          </div>
+          <div>
+            <span aria-label="date created">
+              <FormattedMessage description="security creation date" defaultMessage="Created:" />
+              &nbsp;
+              <wbr />
+              {date_created}
+            </span>
+
+            <span aria-label="date used">
+              <FormattedMessage description="security last used" defaultMessage="Used:" />
+              &nbsp;
+              <wbr />
+              {date_success}
+            </span>
+          </div>
+
+          {btnVerify}
+        </figure>
+        <NotificationModal
+          id="remove-security-key"
+          title={
+            <FormattedMessage
+              defaultMessage="Remove security key"
+              description="settings.remove_security_key_modal_title"
+            />
+          }
+          mainText={
+            <FormattedMessage
+              defaultMessage={`Are you sure you want to remove your security key?`}
+              description="delete.remove_security_key_modal_text"
+            />
+          }
+          showModal={showConfirmRemoveSecurityKeyModal}
+          closeModal={() => setShowConfirmRemoveSecurityKeyModal(false)}
+          acceptModal={handleRemoveWebauthnToken}
+          acceptButtonText={<FormattedMessage defaultMessage="Confirm" description="delete.confirm_button" />}
+        />
+      </React.Fragment>
     );
   });
 
@@ -449,31 +475,10 @@ function SecurityKeyTable() {
 
   return (
     <React.Fragment>
-      <h4>
+      <h3>
         <FormattedMessage description="manage your tokens" defaultMessage="Manage your tokens" />
-      </h4>
-      <table className="active-keys">
-        <tbody>
-          <tr>
-            <th>
-              <FormattedMessage description="security description name" defaultMessage="Name" />
-            </th>
-            <th>
-              <FormattedMessage description="security creation date" defaultMessage="Created on" />
-            </th>
-            <th>
-              <FormattedMessage description="security last used" defaultMessage="Used on" />
-            </th>
-            <th>
-              <FormattedMessage description="security key status" defaultMessage="Verify" />
-            </th>
-            <th>
-              <FormattedMessage description="security key remove" defaultMessage="Remove" />
-            </th>
-          </tr>
-          {security_key_table_data}
-        </tbody>
-      </table>
+      </h3>
+      {securityKeyData}
     </React.Fragment>
   );
 }
diff --git a/src/styles/_figure.scss b/src/styles/_figure.scss
index 0c0317dd0..d1c390b8f 100644
--- a/src/styles/_figure.scss
+++ b/src/styles/_figure.scss
@@ -77,3 +77,56 @@ figure,
     margin-bottom: 1.5rem;
   }
 }
+
+// SECURITY TABLE
+figure.webauthn-token-holder {
+  display: grid;
+  grid-template-rows: 1fr;
+  padding: 0.5rem 1rem;
+  text-align: left;
+  margin: 0;
+  border-bottom: 1px solid $border-gray;
+
+  &:last-of-type {
+    border-bottom: none;
+    margin-bottom: 1rem;
+  }
+
+  & div:first-child {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  & div:nth-child(2) {
+    display: flex;
+    align-items: end;
+    column-gap: 1em;
+
+    & p:last-child {
+      margin-left: 1rem;
+    }
+  }
+
+  span {
+    font-size: 0.9rem;
+    margin-bottom: 0.2rem;
+    white-space: nowrap;
+  }
+  .verified {
+    strong {
+      font-family: $akkurat;
+      letter-spacing: 1px;
+      font-weight: 700;
+      padding: 0;
+      font-size: 0.75rem;
+      text-transform: uppercase;
+    }
+  }
+  .btn-link {
+    height: auto;
+    margin-right: 1rem;
+  }
+  button.btn-close {
+    justify-self: flex-end;
+  }
+}
diff --git a/src/styles/_tables.scss b/src/styles/_tables.scss
index a29ba4ba0..d241a6d01 100644
--- a/src/styles/_tables.scss
+++ b/src/styles/_tables.scss
@@ -69,10 +69,6 @@ table {
       }
     }
 
-    & tr.webauthn-token-holder.verified {
-      color: $txt-black;
-    }
-
     & tr {
       height: 3rem;
 
@@ -199,40 +195,7 @@ caption {
     padding: 0.5rem;
   }
 }
-.active-keys {
-  margin: 1rem 0;
-
-  th {
-    border-width: 1px;
-  }
-  th,
-  td {
-    &:first-child {
-      width: 30%;
-    }
-  }
 
-  tr:last-child td {
-    padding-bottom: 1rem;
-  }
-  .btn-link {
-    height: auto;
-    margin-right: 1rem;
-  }
-
-  @media (max-width: $bp-sm) {
-    th,
-    td {
-      &:nth-child(2),
-      &:nth-child(3) {
-        display: none;
-      }
-      &:nth-child(1) {
-        width: 50%;
-      }
-    }
-  }
-}
 .keys {
   @extend code;
   tr {
diff --git a/src/tests/Security-test.tsx b/src/tests/Security-test.tsx
index 094310d6f..031a5d61b 100644
--- a/src/tests/Security-test.tsx
+++ b/src/tests/Security-test.tsx
@@ -58,8 +58,8 @@ test("renders security key as expected, with added security key", async () => {
 
   await linkToAdvancedSettings();
 
-  expect(screen.getByRole("table")).toBeInTheDocument();
-  expect(screen.getByRole("cell", { name: "touchID" })).toBeInTheDocument();
+  expect(screen.getByRole("figure")).toBeInTheDocument();
+  expect(screen.getByText("touchID")).toBeInTheDocument();
   expect(screen.getByRole("button", { name: "BankID" })).toBeEnabled();
   expect(screen.getByRole("button", { name: "Freja+" })).toBeEnabled();
 });
@@ -190,7 +190,7 @@ test("api call webauthn/remove", async () => {
   });
   await linkToAdvancedSettings();
   await waitFor(() => {
-    expect(screen.getByRole("table")).toBeInTheDocument();
+    expect(screen.getByRole("figure")).toBeInTheDocument();
   });
 });