diff --git a/frontend/src/components/BrowserSession.tsx b/frontend/src/components/BrowserSession.tsx
index dbc4db06..9e6ede77 100644
--- a/frontend/src/components/BrowserSession.tsx
+++ b/frontend/src/components/BrowserSession.tsx
@@ -124,6 +124,7 @@ const BrowserSession: React.FC<Props> = ({ session }) => {
       createdAt={createdAt}
       finishedAt={finishedAt}
       isCurrent={isCurrent}
+      deviceType={deviceInformation?.deviceType}
       lastActiveIp={data.lastActiveIp || undefined}
       lastActiveAt={lastActiveAt}
     >
diff --git a/frontend/src/components/OAuth2Session.test.tsx b/frontend/src/components/OAuth2Session.test.tsx
index f632cf15..ee471d1e 100644
--- a/frontend/src/components/OAuth2Session.test.tsx
+++ b/frontend/src/components/OAuth2Session.test.tsx
@@ -18,6 +18,7 @@ import { create } from "react-test-renderer";
 import { describe, expect, it, beforeAll } from "vitest";
 
 import { makeFragmentData } from "../gql";
+import { Oauth2ApplicationType } from "../gql/graphql";
 import { WithLocation } from "../test-utils/WithLocation";
 import { mockLocale } from "../test-utils/mockLocale";
 
@@ -35,6 +36,7 @@ describe("<OAuth2Session />", () => {
       clientId: "test-client-id",
       clientName: "Element",
       clientUri: "https://element.io",
+      applicationType: Oauth2ApplicationType.Web,
     },
   };
 
@@ -68,4 +70,24 @@ describe("<OAuth2Session />", () => {
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
+
+  it("renders correct icon for a native session", () => {
+    const session = makeFragmentData(
+      {
+        ...defaultSession,
+        finishedAt,
+        client: {
+          ...defaultSession.client,
+          applicationType: Oauth2ApplicationType.Native,
+        },
+      },
+      FRAGMENT,
+    );
+    const component = create(
+      <WithLocation>
+        <OAuth2Session session={session} />
+      </WithLocation>,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
 });
diff --git a/frontend/src/components/OAuth2Session.tsx b/frontend/src/components/OAuth2Session.tsx
index 6ba37209..487f9026 100644
--- a/frontend/src/components/OAuth2Session.tsx
+++ b/frontend/src/components/OAuth2Session.tsx
@@ -18,8 +18,10 @@ import { atomFamily } from "jotai/utils";
 import { atomWithMutation } from "jotai-urql";
 
 import { FragmentType, graphql, useFragment } from "../gql";
+import { Oauth2ApplicationType } from "../gql/graphql";
 import { Link } from "../routing";
 import { getDeviceIdFromScope } from "../utils/deviceIdFromScope";
+import { DeviceType } from "../utils/parseUserAgent";
 
 import { Session } from "./Session";
 import EndSessionButton from "./Session/EndSessionButton";
@@ -36,6 +38,7 @@ export const FRAGMENT = graphql(/* GraphQL */ `
       id
       clientId
       clientName
+      applicationType
       logoUri
     }
   }
@@ -53,6 +56,18 @@ const END_SESSION_MUTATION = graphql(/* GraphQL */ `
   }
 `);
 
+const getDeviceTypeFromClientAppType = (
+  appType?: Oauth2ApplicationType | null,
+): DeviceType => {
+  if (appType === Oauth2ApplicationType.Web) {
+    return DeviceType.Web;
+  }
+  if (appType === Oauth2ApplicationType.Native) {
+    return DeviceType.Mobile;
+  }
+  return DeviceType.Unknown;
+};
+
 export const endSessionFamily = atomFamily((id: string) => {
   const endSession = atomWithMutation(END_SESSION_MUTATION);
 
@@ -89,6 +104,10 @@ const OAuth2Session: React.FC<Props> = ({ session }) => {
     ? parseISO(data.lastActiveAt)
     : undefined;
 
+  const deviceType = getDeviceTypeFromClientAppType(
+    data.client.applicationType,
+  );
+
   return (
     <Session
       id={data.id}
@@ -97,6 +116,7 @@ const OAuth2Session: React.FC<Props> = ({ session }) => {
       finishedAt={finishedAt}
       clientName={data.client.clientName || data.client.clientId || undefined}
       clientLogoUri={data.client.logoUri || undefined}
+      deviceType={deviceType}
       lastActiveIp={data.lastActiveIp || undefined}
       lastActiveAt={lastActiveAt}
     >
diff --git a/frontend/src/components/Session/DeviceTypeIcon.module.css b/frontend/src/components/Session/DeviceTypeIcon.module.css
new file mode 100644
index 00000000..5108dff5
--- /dev/null
+++ b/frontend/src/components/Session/DeviceTypeIcon.module.css
@@ -0,0 +1,25 @@
+/* Copyright 2023 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.icon {
+    color: var(--cpd-color-icon-primary);
+    background-color: var(--cpd-color-bg-subtle-primary);
+    flex: 0 0 var(--cpd-space-4x);
+    box-sizing: content-box;
+    height: var(--cpd-space-4x);
+    width: var(--cpd-space-4x);
+    padding: var(--cpd-space-2x);
+    border-radius: var(--cpd-space-2x);
+}
\ No newline at end of file
diff --git a/frontend/src/components/Session/DeviceTypeIcon.stories.tsx b/frontend/src/components/Session/DeviceTypeIcon.stories.tsx
new file mode 100644
index 00000000..bea5ea98
--- /dev/null
+++ b/frontend/src/components/Session/DeviceTypeIcon.stories.tsx
@@ -0,0 +1,60 @@
+// Copyright 2022 The Matrix.org Foundation C.I.C.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { DeviceType } from "../../utils/parseUserAgent";
+
+import DeviceTypeIcon from "./DeviceTypeIcon";
+
+const meta = {
+  title: "UI/Session/Device Type Icon",
+  component: DeviceTypeIcon,
+  tags: ["autodocs"],
+  args: {
+    deviceType: DeviceType.Unknown,
+  },
+  argTypes: {
+    deviceType: {
+      control: "select",
+      options: [
+        DeviceType.Unknown,
+        DeviceType.Desktop,
+        DeviceType.Mobile,
+        DeviceType.Web,
+      ],
+    },
+  },
+} satisfies Meta<typeof DeviceTypeIcon>;
+
+export default meta;
+type Story = StoryObj<typeof DeviceTypeIcon>;
+
+export const Unknown: Story = {};
+
+export const Desktop: Story = {
+  args: {
+    deviceType: DeviceType.Desktop,
+  },
+};
+export const Mobile: Story = {
+  args: {
+    deviceType: DeviceType.Mobile,
+  },
+};
+export const Web: Story = {
+  args: {
+    deviceType: DeviceType.Web,
+  },
+};
diff --git a/frontend/src/components/Session/DeviceTypeIcon.test.tsx b/frontend/src/components/Session/DeviceTypeIcon.test.tsx
new file mode 100644
index 00000000..ef6fa4f5
--- /dev/null
+++ b/frontend/src/components/Session/DeviceTypeIcon.test.tsx
@@ -0,0 +1,46 @@
+// Copyright 2023 The Matrix.org Foundation C.I.C.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// @vitest-environment happy-dom
+
+import { composeStory } from "@storybook/react";
+import { render, cleanup } from "@testing-library/react";
+import { describe, it, expect, afterEach } from "vitest";
+
+import Meta, { Unknown, Desktop, Mobile, Web } from "./DeviceTypeIcon.stories";
+
+describe("<DeviceTypeIcon />", () => {
+  afterEach(cleanup);
+
+  it("renders unknown device type", () => {
+    const Component = composeStory(Unknown, Meta);
+    const { container } = render(<Component />);
+    expect(container).toMatchSnapshot();
+  });
+  it("renders mobile device type", () => {
+    const Component = composeStory(Mobile, Meta);
+    const { container } = render(<Component />);
+    expect(container).toMatchSnapshot();
+  });
+  it("renders desktop device type", () => {
+    const Component = composeStory(Desktop, Meta);
+    const { container } = render(<Component />);
+    expect(container).toMatchSnapshot();
+  });
+  it("renders Web device type", () => {
+    const Component = composeStory(Web, Meta);
+    const { container } = render(<Component />);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/frontend/src/components/Session/DeviceTypeIcon.tsx b/frontend/src/components/Session/DeviceTypeIcon.tsx
new file mode 100644
index 00000000..0417681c
--- /dev/null
+++ b/frontend/src/components/Session/DeviceTypeIcon.tsx
@@ -0,0 +1,51 @@
+// Copyright 2023 The Matrix.org Foundation C.I.C.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import IconComputer from "@vector-im/compound-design-tokens/icons/computer.svg?react";
+import IconMobile from "@vector-im/compound-design-tokens/icons/mobile.svg?react";
+import IconUnknown from "@vector-im/compound-design-tokens/icons/unknown.svg?react";
+import IconBrowser from "@vector-im/compound-design-tokens/icons/web-browser.svg?react";
+import { FunctionComponent, SVGProps } from "react";
+
+import { DeviceType } from "../../utils/parseUserAgent";
+
+import styles from "./DeviceTypeIcon.module.css";
+
+const deviceTypeToIcon: Record<
+  DeviceType,
+  FunctionComponent<SVGProps<SVGSVGElement> & { title?: string | undefined }>
+> = {
+  [DeviceType.Unknown]: IconUnknown,
+  [DeviceType.Desktop]: IconComputer,
+  [DeviceType.Mobile]: IconMobile,
+  [DeviceType.Web]: IconBrowser,
+};
+
+const deviceTypeToLabel: Record<DeviceType, string> = {
+  [DeviceType.Unknown]: "Unknown device type",
+  [DeviceType.Desktop]: "Desktop",
+  [DeviceType.Mobile]: "Mobile",
+  [DeviceType.Web]: "Web",
+};
+
+const DeviceTypeIcon: React.FC<{ deviceType: DeviceType }> = ({
+  deviceType,
+}) => {
+  const Icon = deviceTypeToIcon[deviceType];
+  const label = deviceTypeToLabel[deviceType];
+
+  return <Icon className={styles.icon} aria-label={label} />;
+};
+
+export default DeviceTypeIcon;
diff --git a/frontend/src/components/Session/Session.module.css b/frontend/src/components/Session/Session.module.css
index e268ad0f..24e62b62 100644
--- a/frontend/src/components/Session/Session.module.css
+++ b/frontend/src/components/Session/Session.module.css
@@ -13,10 +13,24 @@
  * limitations under the License.
  */
 
+.session {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    gap:var(--cpd-space-4x);
+}
+
+.container {
+    display: flex;
+    flex: 1 1 100%;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
 .session-name {
     overflow: hidden;
     text-overflow: ellipsis;
-    margin-top: var(--cpd-space-2x);
+    margin-top: var(--cpd-space-1x);
     margin-bottom: var(--cpd-space-1x);
 }
 
@@ -37,4 +51,5 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
+    width: 100%;
 }
\ No newline at end of file
diff --git a/frontend/src/components/Session/Session.tsx b/frontend/src/components/Session/Session.tsx
index 32e0fb44..197585e0 100644
--- a/frontend/src/components/Session/Session.tsx
+++ b/frontend/src/components/Session/Session.tsx
@@ -15,10 +15,12 @@
 import { H6, Body, Badge } from "@vector-im/compound-web";
 import { ReactNode } from "react";
 
+import { DeviceType } from "../../utils/parseUserAgent";
 import Block from "../Block";
 import DateTime from "../DateTime";
 
 import ClientAvatar from "./ClientAvatar";
+import DeviceTypeIcon from "./DeviceTypeIcon";
 import LastActive from "./LastActive";
 import styles from "./Session.module.css";
 
@@ -34,6 +36,7 @@ type SessionProps = {
   clientName?: string;
   clientLogoUri?: string;
   isCurrent?: boolean;
+  deviceType?: DeviceType;
   lastActiveIp?: string;
   lastActiveAt?: Date;
 };
@@ -48,40 +51,44 @@ const Session: React.FC<React.PropsWithChildren<SessionProps>> = ({
   lastActiveAt,
   isCurrent,
   children,
+  deviceType,
 }) => {
   return (
-    <Block>
-      {isCurrent && <Badge kind="success">Current</Badge>}
-      <H6 className={styles.sessionName} title={id}>
-        {name || id}
-      </H6>
-      <SessionMetadata weight="semibold">
-        Signed in <DateTime datetime={createdAt} />
-      </SessionMetadata>
-      {!!finishedAt && (
-        <SessionMetadata weight="semibold" data-finished={true}>
-          Finished <DateTime datetime={finishedAt} />
+    <Block className={styles.session}>
+      <DeviceTypeIcon deviceType={deviceType || DeviceType.Unknown} />
+      <div className={styles.container}>
+        {isCurrent && <Badge kind="success">Current</Badge>}
+        <H6 className={styles.sessionName} title={id}>
+          {name || id}
+        </H6>
+        <SessionMetadata weight="semibold">
+          Signed in <DateTime datetime={createdAt} />
         </SessionMetadata>
-      )}
-      {!!lastActiveAt && (
-        <SessionMetadata>
-          <LastActive lastActive={lastActiveAt} />
-        </SessionMetadata>
-      )}
-      {!!lastActiveIp && <SessionMetadata>{lastActiveIp}</SessionMetadata>}
-      {!!clientName && (
-        <SessionMetadata>
-          <ClientAvatar
-            size="var(--cpd-space-4x)"
-            name={clientName}
-            logoUri={clientLogoUri}
-          />{" "}
-          <SessionMetadata weight="semibold" as="span">
-            {clientName}
+        {!!finishedAt && (
+          <SessionMetadata weight="semibold" data-finished={true}>
+            Finished <DateTime datetime={finishedAt} />
           </SessionMetadata>
-        </SessionMetadata>
-      )}
-      {!!children && <div className={styles.sessionActions}>{children}</div>}
+        )}
+        {!!lastActiveAt && (
+          <SessionMetadata>
+            <LastActive lastActive={lastActiveAt} />
+          </SessionMetadata>
+        )}
+        {!!lastActiveIp && <SessionMetadata>{lastActiveIp}</SessionMetadata>}
+        {!!clientName && (
+          <SessionMetadata>
+            <ClientAvatar
+              size="var(--cpd-space-4x)"
+              name={clientName}
+              logoUri={clientLogoUri}
+            />{" "}
+            <SessionMetadata weight="semibold" as="span">
+              {clientName}
+            </SessionMetadata>
+          </SessionMetadata>
+        )}
+        {!!children && <div className={styles.sessionActions}>{children}</div>}
+      </div>
     </Block>
   );
 };
diff --git a/frontend/src/components/Session/__snapshots__/DeviceTypeIcon.test.tsx.snap b/frontend/src/components/Session/__snapshots__/DeviceTypeIcon.test.tsx.snap
new file mode 100644
index 00000000..3e124fa7
--- /dev/null
+++ b/frontend/src/components/Session/__snapshots__/DeviceTypeIcon.test.tsx.snap
@@ -0,0 +1,85 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<DeviceTypeIcon /> > renders Web device type 1`] = `
+<div>
+  <svg
+    aria-label="Web"
+    class="_icon_e677aa"
+    fill="none"
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 18H20V8H4V18Z"
+      fill="currentColor"
+    />
+  </svg>
+</div>
+`;
+
+exports[`<DeviceTypeIcon /> > renders desktop device type 1`] = `
+<div>
+  <svg
+    aria-label="Desktop"
+    class="_icon_e677aa"
+    fill="none"
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4 18C3.45 18 2.97917 17.8042 2.5875 17.4125C2.19583 17.0208 2 16.55 2 16V5C2 4.45 2.19583 3.97917 2.5875 3.5875C2.97917 3.19583 3.45 3 4 3H20C20.55 3 21.0208 3.19583 21.4125 3.5875C21.8042 3.97917 22 4.45 22 5V16C22 16.55 21.8042 17.0208 21.4125 17.4125C21.0208 17.8042 20.55 18 20 18H4ZM4 16H20V5H4V16ZM2 21C1.71667 21 1.47917 20.9042 1.2875 20.7125C1.09583 20.5208 1 20.2833 1 20C1 19.7167 1.09583 19.4792 1.2875 19.2875C1.47917 19.0958 1.71667 19 2 19H22C22.2833 19 22.5208 19.0958 22.7125 19.2875C22.9042 19.4792 23 19.7167 23 20C23 20.2833 22.9042 20.5208 22.7125 20.7125C22.5208 20.9042 22.2833 21 22 21H2Z"
+      fill="currentColor"
+    />
+  </svg>
+</div>
+`;
+
+exports[`<DeviceTypeIcon /> > renders mobile device type 1`] = `
+<div>
+  <svg
+    aria-label="Mobile"
+    class="_icon_e677aa"
+    fill="none"
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7 23C6.45 23 5.97917 22.8042 5.5875 22.4125C5.19583 22.0208 5 21.55 5 21V3C5 2.45 5.19583 1.97917 5.5875 1.5875C5.97917 1.19583 6.45 1 7 1H17C17.55 1 18.0208 1.19583 18.4125 1.5875C18.8042 1.97917 19 2.45 19 3V21C19 21.55 18.8042 22.0208 18.4125 22.4125C18.0208 22.8042 17.55 23 17 23H7ZM7 18H17V6H7V18Z"
+      fill="currentColor"
+    />
+  </svg>
+</div>
+`;
+
+exports[`<DeviceTypeIcon /> > renders unknown device type 1`] = `
+<div>
+  <svg
+    aria-label="Unknown device type"
+    class="_icon_e677aa"
+    fill="none"
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z"
+      fill="currentColor"
+    />
+    <path
+      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
+      fill="currentColor"
+    />
+    <path
+      d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
+      fill="currentColor"
+    />
+  </svg>
+</div>
+`;
diff --git a/frontend/src/components/Session/__snapshots__/Session.test.tsx.snap b/frontend/src/components/Session/__snapshots__/Session.test.tsx.snap
index cb5febde..a4a4a6b6 100644
--- a/frontend/src/components/Session/__snapshots__/Session.test.tsx.snap
+++ b/frontend/src/components/Session/__snapshots__/Session.test.tsx.snap
@@ -2,195 +2,325 @@
 
 exports[`<Session /> > renders a finished session 1`] = `
 <div
-  className="_block_17898c"
+  className="_block_17898c _session_634806"
 >
-  <h6
-    className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
-    title="session-id"
+  <svg
+    aria-label="Unknown device type"
+    className="_icon_e677aa"
+    fill="none"
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    session-id
-  </h6>
-  <p
-    className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+    <path
+      d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z"
+      fill="currentColor"
+    />
+    <path
+      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
+      fill="currentColor"
+    />
+    <path
+      d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
+      fill="currentColor"
+    />
+  </svg>
+  <div
+    className="_container_634806"
   >
-    Signed in 
-    <time
-      dateTime="2023-06-29T03:35:17Z"
+    <h6
+      className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
+      title="session-id"
     >
-      Thu, 29 Jun 2023, 03:35
-    </time>
-  </p>
-  <p
-    className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
-    data-finished={true}
-  >
-    Finished 
-    <time
-      dateTime="2023-06-29T03:35:19Z"
+      session-id
+    </h6>
+    <p
+      className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
     >
-      Thu, 29 Jun 2023, 03:35
-    </time>
-  </p>
+      Signed in 
+      <time
+        dateTime="2023-06-29T03:35:17Z"
+      >
+        Thu, 29 Jun 2023, 03:35
+      </time>
+    </p>
+    <p
+      className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+      data-finished={true}
+    >
+      Finished 
+      <time
+        dateTime="2023-06-29T03:35:19Z"
+      >
+        Thu, 29 Jun 2023, 03:35
+      </time>
+    </p>
+  </div>
 </div>
 `;
 
 exports[`<Session /> > renders an active session 1`] = `
 <div
-  className="_block_17898c"
+  className="_block_17898c _session_634806"
 >
-  <h6
-    className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
-    title="session-id"
+  <svg
+    aria-label="Unknown device type"
+    className="_icon_e677aa"
+    fill="none"
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    session-id
-  </h6>
-  <p
-    className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+    <path
+      d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z"
+      fill="currentColor"
+    />
+    <path
+      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
+      fill="currentColor"
+    />
+    <path
+      d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
+      fill="currentColor"
+    />
+  </svg>
+  <div
+    className="_container_634806"
   >
-    Signed in 
-    <time
-      dateTime="2023-06-29T03:35:17Z"
+    <h6
+      className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
+      title="session-id"
     >
-      Thu, 29 Jun 2023, 03:35
-    </time>
-  </p>
+      session-id
+    </h6>
+    <p
+      className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+    >
+      Signed in 
+      <time
+        dateTime="2023-06-29T03:35:17Z"
+      >
+        Thu, 29 Jun 2023, 03:35
+      </time>
+    </p>
+  </div>
 </div>
 `;
 
 exports[`<Session /> > renders ip address 1`] = `
 <div
-  className="_block_17898c"
+  className="_block_17898c _session_634806"
 >
-  <h6
-    className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
-    title="session-id"
+  <svg
+    aria-label="Unknown device type"
+    className="_icon_e677aa"
+    fill="none"
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    session-id
-  </h6>
-  <p
-    className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+    <path
+      d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z"
+      fill="currentColor"
+    />
+    <path
+      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
+      fill="currentColor"
+    />
+    <path
+      d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
+      fill="currentColor"
+    />
+  </svg>
+  <div
+    className="_container_634806"
   >
-    Signed in 
-    <time
-      dateTime="2023-06-29T03:35:17Z"
+    <h6
+      className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
+      title="session-id"
     >
-      Thu, 29 Jun 2023, 03:35
-    </time>
-  </p>
-  <p
-    className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
-    data-finished={true}
-  >
-    Finished 
-    <time
-      dateTime="2023-06-29T03:35:19Z"
-    >
-      Thu, 29 Jun 2023, 03:35
-    </time>
-  </p>
-  <p
-    className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
-  >
-    127.0.0.1
-  </p>
-  <p
-    className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
-  >
-     
-    <span
+      session-id
+    </h6>
+    <p
       className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
     >
-      Element
-    </span>
-  </p>
+      Signed in 
+      <time
+        dateTime="2023-06-29T03:35:17Z"
+      >
+        Thu, 29 Jun 2023, 03:35
+      </time>
+    </p>
+    <p
+      className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+      data-finished={true}
+    >
+      Finished 
+      <time
+        dateTime="2023-06-29T03:35:19Z"
+      >
+        Thu, 29 Jun 2023, 03:35
+      </time>
+    </p>
+    <p
+      className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
+    >
+      127.0.0.1
+    </p>
+    <p
+      className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
+    >
+       
+      <span
+        className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+      >
+        Element
+      </span>
+    </p>
+  </div>
 </div>
 `;
 
 exports[`<Session /> > uses client name when truthy 1`] = `
 <div
-  className="_block_17898c"
+  className="_block_17898c _session_634806"
 >
-  <h6
-    className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
-    title="session-id"
+  <svg
+    aria-label="Unknown device type"
+    className="_icon_e677aa"
+    fill="none"
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    session-id
-  </h6>
-  <p
-    className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
-  >
-    Signed in 
-    <time
-      dateTime="2023-06-29T03:35:17Z"
-    >
-      Thu, 29 Jun 2023, 03:35
-    </time>
-  </p>
-  <p
-    className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
-    data-finished={true}
-  >
-    Finished 
-    <time
-      dateTime="2023-06-29T03:35:19Z"
-    >
-      Thu, 29 Jun 2023, 03:35
-    </time>
-  </p>
-  <p
-    className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
-  >
-    <img
-      alt="Element"
-      className="_avatar_39aee3"
-      referrerPolicy="no-referrer"
-      src="https://client.org/logo.png"
-      style={
-        {
-          "--mas-avatar-size": "var(--cpd-space-4x)",
-        }
-      }
+    <path
+      d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z"
+      fill="currentColor"
     />
-     
-    <span
+    <path
+      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
+      fill="currentColor"
+    />
+    <path
+      d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
+      fill="currentColor"
+    />
+  </svg>
+  <div
+    className="_container_634806"
+  >
+    <h6
+      className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
+      title="session-id"
+    >
+      session-id
+    </h6>
+    <p
       className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
     >
-      Element
-    </span>
-  </p>
+      Signed in 
+      <time
+        dateTime="2023-06-29T03:35:17Z"
+      >
+        Thu, 29 Jun 2023, 03:35
+      </time>
+    </p>
+    <p
+      className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+      data-finished={true}
+    >
+      Finished 
+      <time
+        dateTime="2023-06-29T03:35:19Z"
+      >
+        Thu, 29 Jun 2023, 03:35
+      </time>
+    </p>
+    <p
+      className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
+    >
+      <img
+        alt="Element"
+        className="_avatar_39aee3"
+        referrerPolicy="no-referrer"
+        src="https://client.org/logo.png"
+        style={
+          {
+            "--mas-avatar-size": "var(--cpd-space-4x)",
+          }
+        }
+      />
+       
+      <span
+        className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+      >
+        Element
+      </span>
+    </p>
+  </div>
 </div>
 `;
 
 exports[`<Session /> > uses session name when truthy 1`] = `
 <div
-  className="_block_17898c"
+  className="_block_17898c _session_634806"
 >
-  <h6
-    className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
-    title="session-id"
+  <svg
+    aria-label="Unknown device type"
+    className="_icon_e677aa"
+    fill="none"
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    test session name
-  </h6>
-  <p
-    className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+    <path
+      d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z"
+      fill="currentColor"
+    />
+    <path
+      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
+      fill="currentColor"
+    />
+    <path
+      d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
+      fill="currentColor"
+    />
+  </svg>
+  <div
+    className="_container_634806"
   >
-    Signed in 
-    <time
-      dateTime="2023-06-29T03:35:17Z"
+    <h6
+      className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
+      title="session-id"
     >
-      Thu, 29 Jun 2023, 03:35
-    </time>
-  </p>
-  <p
-    className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
-    data-finished={true}
-  >
-    Finished 
-    <time
-      dateTime="2023-06-29T03:35:19Z"
+      test session name
+    </h6>
+    <p
+      className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
     >
-      Thu, 29 Jun 2023, 03:35
-    </time>
-  </p>
+      Signed in 
+      <time
+        dateTime="2023-06-29T03:35:17Z"
+      >
+        Thu, 29 Jun 2023, 03:35
+      </time>
+    </p>
+    <p
+      className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+      data-finished={true}
+    >
+      Finished 
+      <time
+        dateTime="2023-06-29T03:35:19Z"
+      >
+        Thu, 29 Jun 2023, 03:35
+      </time>
+    </p>
+  </div>
 </div>
 `;
diff --git a/frontend/src/components/__snapshots__/CompatSession.test.tsx.snap b/frontend/src/components/__snapshots__/CompatSession.test.tsx.snap
index e6d0b52f..bafa48be 100644
--- a/frontend/src/components/__snapshots__/CompatSession.test.tsx.snap
+++ b/frontend/src/components/__snapshots__/CompatSession.test.tsx.snap
@@ -2,119 +2,171 @@
 
 exports[`<CompatSession /> > renders a finished session 1`] = `
 <div
-  className="_block_17898c"
+  className="_block_17898c _session_634806"
 >
-  <h6
-    className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
-    title="session-id"
+  <svg
+    aria-label="Unknown device type"
+    className="_icon_e677aa"
+    fill="none"
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <a
-      className=""
-      href="/session/abcd1234"
-      onClick={[Function]}
+    <path
+      d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z"
+      fill="currentColor"
+    />
+    <path
+      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
+      fill="currentColor"
+    />
+    <path
+      d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
+      fill="currentColor"
+    />
+  </svg>
+  <div
+    className="_container_634806"
+  >
+    <h6
+      className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
+      title="session-id"
     >
-      abcd1234
-    </a>
-  </h6>
-  <p
-    className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
-  >
-    Signed in 
-    <time
-      dateTime="2023-06-29T03:35:17Z"
-    >
-      Thu, 29 Jun 2023, 03:35
-    </time>
-  </p>
-  <p
-    className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
-    data-finished={true}
-  >
-    Finished 
-    <time
-      dateTime="2023-06-29T03:35:19Z"
-    >
-      Thu, 29 Jun 2023, 03:35
-    </time>
-  </p>
-  <p
-    className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
-  >
-    1.2.3.4
-  </p>
-  <p
-    className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
-  >
-     
-    <span
+      <a
+        className=""
+        href="/session/abcd1234"
+        onClick={[Function]}
+      >
+        abcd1234
+      </a>
+    </h6>
+    <p
       className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
     >
-      element.io
-    </span>
-  </p>
+      Signed in 
+      <time
+        dateTime="2023-06-29T03:35:17Z"
+      >
+        Thu, 29 Jun 2023, 03:35
+      </time>
+    </p>
+    <p
+      className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+      data-finished={true}
+    >
+      Finished 
+      <time
+        dateTime="2023-06-29T03:35:19Z"
+      >
+        Thu, 29 Jun 2023, 03:35
+      </time>
+    </p>
+    <p
+      className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
+    >
+      1.2.3.4
+    </p>
+    <p
+      className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
+    >
+       
+      <span
+        className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+      >
+        element.io
+      </span>
+    </p>
+  </div>
 </div>
 `;
 
 exports[`<CompatSession /> > renders an active session 1`] = `
 <div
-  className="_block_17898c"
+  className="_block_17898c _session_634806"
 >
-  <h6
-    className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
-    title="session-id"
+  <svg
+    aria-label="Unknown device type"
+    className="_icon_e677aa"
+    fill="none"
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <a
-      className=""
-      href="/session/abcd1234"
-      onClick={[Function]}
+    <path
+      d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z"
+      fill="currentColor"
+    />
+    <path
+      d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
+      fill="currentColor"
+    />
+    <path
+      d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
+      fill="currentColor"
+    />
+  </svg>
+  <div
+    className="_container_634806"
+  >
+    <h6
+      className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
+      title="session-id"
     >
-      abcd1234
-    </a>
-  </h6>
-  <p
-    className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
-  >
-    Signed in 
-    <time
-      dateTime="2023-06-29T03:35:17Z"
-    >
-      Thu, 29 Jun 2023, 03:35
-    </time>
-  </p>
-  <p
-    className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
-  >
-    1.2.3.4
-  </p>
-  <p
-    className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
-  >
-     
-    <span
+      <a
+        className=""
+        href="/session/abcd1234"
+        onClick={[Function]}
+      >
+        abcd1234
+      </a>
+    </h6>
+    <p
       className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
     >
-      element.io
-    </span>
-  </p>
-  <div
-    className="_sessionActions_634806"
-  >
-    <button
-      aria-controls="radix-:r0:"
-      aria-expanded={false}
-      aria-haspopup="dialog"
-      className="_button_1ukgx_17"
-      data-kind="destructive"
-      data-size="sm"
-      data-state="closed"
-      disabled={false}
-      onClick={[Function]}
-      role="button"
-      tabIndex={0}
-      type="button"
+      Signed in 
+      <time
+        dateTime="2023-06-29T03:35:17Z"
+      >
+        Thu, 29 Jun 2023, 03:35
+      </time>
+    </p>
+    <p
+      className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
     >
-      End session
-    </button>
+      1.2.3.4
+    </p>
+    <p
+      className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
+    >
+       
+      <span
+        className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+      >
+        element.io
+      </span>
+    </p>
+    <div
+      className="_sessionActions_634806"
+    >
+      <button
+        aria-controls="radix-:r0:"
+        aria-expanded={false}
+        aria-haspopup="dialog"
+        className="_button_1ukgx_17"
+        data-kind="destructive"
+        data-size="sm"
+        data-state="closed"
+        disabled={false}
+        onClick={[Function]}
+        role="button"
+        tabIndex={0}
+        type="button"
+      >
+        End session
+      </button>
+    </div>
   </div>
 </div>
 `;
diff --git a/frontend/src/components/__snapshots__/OAuth2Session.test.tsx.snap b/frontend/src/components/__snapshots__/OAuth2Session.test.tsx.snap
index ec2a1909..b38af77a 100644
--- a/frontend/src/components/__snapshots__/OAuth2Session.test.tsx.snap
+++ b/frontend/src/components/__snapshots__/OAuth2Session.test.tsx.snap
@@ -2,119 +2,228 @@
 
 exports[`<OAuth2Session /> > renders a finished session 1`] = `
 <div
-  className="_block_17898c"
+  className="_block_17898c _session_634806"
 >
-  <h6
-    className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
-    title="session-id"
+  <svg
+    aria-label="Web"
+    className="_icon_e677aa"
+    fill="none"
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <a
-      className=""
-      href="/session/abcd1234"
-      onClick={[Function]}
+    <path
+      d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 18H20V8H4V18Z"
+      fill="currentColor"
+    />
+  </svg>
+  <div
+    className="_container_634806"
+  >
+    <h6
+      className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
+      title="session-id"
     >
-      abcd1234
-    </a>
-  </h6>
-  <p
-    className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
-  >
-    Signed in 
-    <time
-      dateTime="2023-06-29T03:35:17Z"
-    >
-      Thu, 29 Jun 2023, 03:35
-    </time>
-  </p>
-  <p
-    className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
-    data-finished={true}
-  >
-    Finished 
-    <time
-      dateTime="2023-06-29T03:35:19Z"
-    >
-      Thu, 29 Jun 2023, 03:35
-    </time>
-  </p>
-  <p
-    className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
-  >
-    1.2.3.4
-  </p>
-  <p
-    className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
-  >
-     
-    <span
+      <a
+        className=""
+        href="/session/abcd1234"
+        onClick={[Function]}
+      >
+        abcd1234
+      </a>
+    </h6>
+    <p
       className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
     >
-      Element
-    </span>
-  </p>
+      Signed in 
+      <time
+        dateTime="2023-06-29T03:35:17Z"
+      >
+        Thu, 29 Jun 2023, 03:35
+      </time>
+    </p>
+    <p
+      className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+      data-finished={true}
+    >
+      Finished 
+      <time
+        dateTime="2023-06-29T03:35:19Z"
+      >
+        Thu, 29 Jun 2023, 03:35
+      </time>
+    </p>
+    <p
+      className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
+    >
+      1.2.3.4
+    </p>
+    <p
+      className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
+    >
+       
+      <span
+        className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+      >
+        Element
+      </span>
+    </p>
+  </div>
 </div>
 `;
 
 exports[`<OAuth2Session /> > renders an active session 1`] = `
 <div
-  className="_block_17898c"
+  className="_block_17898c _session_634806"
 >
-  <h6
-    className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
-    title="session-id"
+  <svg
+    aria-label="Web"
+    className="_icon_e677aa"
+    fill="none"
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <a
-      className=""
-      href="/session/abcd1234"
-      onClick={[Function]}
+    <path
+      d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 18H20V8H4V18Z"
+      fill="currentColor"
+    />
+  </svg>
+  <div
+    className="_container_634806"
+  >
+    <h6
+      className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
+      title="session-id"
     >
-      abcd1234
-    </a>
-  </h6>
-  <p
-    className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
-  >
-    Signed in 
-    <time
-      dateTime="2023-06-29T03:35:17Z"
-    >
-      Thu, 29 Jun 2023, 03:35
-    </time>
-  </p>
-  <p
-    className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
-  >
-    1.2.3.4
-  </p>
-  <p
-    className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
-  >
-     
-    <span
+      <a
+        className=""
+        href="/session/abcd1234"
+        onClick={[Function]}
+      >
+        abcd1234
+      </a>
+    </h6>
+    <p
       className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
     >
-      Element
-    </span>
-  </p>
-  <div
-    className="_sessionActions_634806"
-  >
-    <button
-      aria-controls="radix-:r0:"
-      aria-expanded={false}
-      aria-haspopup="dialog"
-      className="_button_1ukgx_17"
-      data-kind="destructive"
-      data-size="sm"
-      data-state="closed"
-      disabled={false}
-      onClick={[Function]}
-      role="button"
-      tabIndex={0}
-      type="button"
+      Signed in 
+      <time
+        dateTime="2023-06-29T03:35:17Z"
+      >
+        Thu, 29 Jun 2023, 03:35
+      </time>
+    </p>
+    <p
+      className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
     >
-      End session
-    </button>
+      1.2.3.4
+    </p>
+    <p
+      className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
+    >
+       
+      <span
+        className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+      >
+        Element
+      </span>
+    </p>
+    <div
+      className="_sessionActions_634806"
+    >
+      <button
+        aria-controls="radix-:r0:"
+        aria-expanded={false}
+        aria-haspopup="dialog"
+        className="_button_1ukgx_17"
+        data-kind="destructive"
+        data-size="sm"
+        data-state="closed"
+        disabled={false}
+        onClick={[Function]}
+        role="button"
+        tabIndex={0}
+        type="button"
+      >
+        End session
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<OAuth2Session /> > renders correct icon for a native session 1`] = `
+<div
+  className="_block_17898c _session_634806"
+>
+  <svg
+    aria-label="Mobile"
+    className="_icon_e677aa"
+    fill="none"
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7 23C6.45 23 5.97917 22.8042 5.5875 22.4125C5.19583 22.0208 5 21.55 5 21V3C5 2.45 5.19583 1.97917 5.5875 1.5875C5.97917 1.19583 6.45 1 7 1H17C17.55 1 18.0208 1.19583 18.4125 1.5875C18.8042 1.97917 19 2.45 19 3V21C19 21.55 18.8042 22.0208 18.4125 22.4125C18.0208 22.8042 17.55 23 17 23H7ZM7 18H17V6H7V18Z"
+      fill="currentColor"
+    />
+  </svg>
+  <div
+    className="_container_634806"
+  >
+    <h6
+      className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
+      title="session-id"
+    >
+      <a
+        className=""
+        href="/session/abcd1234"
+        onClick={[Function]}
+      >
+        abcd1234
+      </a>
+    </h6>
+    <p
+      className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+    >
+      Signed in 
+      <time
+        dateTime="2023-06-29T03:35:17Z"
+      >
+        Thu, 29 Jun 2023, 03:35
+      </time>
+    </p>
+    <p
+      className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+      data-finished={true}
+    >
+      Finished 
+      <time
+        dateTime="2023-06-29T03:35:19Z"
+      >
+        Thu, 29 Jun 2023, 03:35
+      </time>
+    </p>
+    <p
+      className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
+    >
+      1.2.3.4
+    </p>
+    <p
+      className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
+    >
+       
+      <span
+        className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
+      >
+        Element
+      </span>
+    </p>
   </div>
 </div>
 `;
diff --git a/frontend/src/gql/gql.ts b/frontend/src/gql/gql.ts
index 9a127650..cf1d6d2c 100644
--- a/frontend/src/gql/gql.ts
+++ b/frontend/src/gql/gql.ts
@@ -29,7 +29,7 @@ const documents = {
     types.CompatSession_SessionFragmentDoc,
   "\n  mutation EndCompatSession($id: ID!) {\n    endCompatSession(input: { compatSessionId: $id }) {\n      status\n      compatSession {\n        id\n        finishedAt\n      }\n    }\n  }\n":
     types.EndCompatSessionDocument,
-  "\n  fragment OAuth2Session_session on Oauth2Session {\n    id\n    scope\n    createdAt\n    finishedAt\n    lastActiveIp\n    lastActiveAt\n    client {\n      id\n      clientId\n      clientName\n      logoUri\n    }\n  }\n":
+  "\n  fragment OAuth2Session_session on Oauth2Session {\n    id\n    scope\n    createdAt\n    finishedAt\n    lastActiveIp\n    lastActiveAt\n    client {\n      id\n      clientId\n      clientName\n      applicationType\n      logoUri\n    }\n  }\n":
     types.OAuth2Session_SessionFragmentDoc,
   "\n  mutation EndOAuth2Session($id: ID!) {\n    endOauth2Session(input: { oauth2SessionId: $id }) {\n      status\n      oauth2Session {\n        id\n        ...OAuth2Session_session\n      }\n    }\n  }\n":
     types.EndOAuth2SessionDocument,
@@ -145,8 +145,8 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  fragment OAuth2Session_session on Oauth2Session {\n    id\n    scope\n    createdAt\n    finishedAt\n    lastActiveIp\n    lastActiveAt\n    client {\n      id\n      clientId\n      clientName\n      logoUri\n    }\n  }\n",
-): (typeof documents)["\n  fragment OAuth2Session_session on Oauth2Session {\n    id\n    scope\n    createdAt\n    finishedAt\n    lastActiveIp\n    lastActiveAt\n    client {\n      id\n      clientId\n      clientName\n      logoUri\n    }\n  }\n"];
+  source: "\n  fragment OAuth2Session_session on Oauth2Session {\n    id\n    scope\n    createdAt\n    finishedAt\n    lastActiveIp\n    lastActiveAt\n    client {\n      id\n      clientId\n      clientName\n      applicationType\n      logoUri\n    }\n  }\n",
+): (typeof documents)["\n  fragment OAuth2Session_session on Oauth2Session {\n    id\n    scope\n    createdAt\n    finishedAt\n    lastActiveIp\n    lastActiveAt\n    client {\n      id\n      clientId\n      clientName\n      applicationType\n      logoUri\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/frontend/src/gql/graphql.ts b/frontend/src/gql/graphql.ts
index 3e733ba4..b2aade61 100644
--- a/frontend/src/gql/graphql.ts
+++ b/frontend/src/gql/graphql.ts
@@ -1208,6 +1208,7 @@ export type OAuth2Session_SessionFragment = {
     id: string;
     clientId: string;
     clientName?: string | null;
+    applicationType?: Oauth2ApplicationType | null;
     logoUri?: string | null;
   };
 } & { " $fragmentName"?: "OAuth2Session_SessionFragment" };
@@ -1743,6 +1744,10 @@ export const OAuth2Session_SessionFragmentDoc = {
                 { kind: "Field", name: { kind: "Name", value: "id" } },
                 { kind: "Field", name: { kind: "Name", value: "clientId" } },
                 { kind: "Field", name: { kind: "Name", value: "clientName" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "applicationType" },
+                },
                 { kind: "Field", name: { kind: "Name", value: "logoUri" } },
               ],
             },
@@ -2600,6 +2605,10 @@ export const EndOAuth2SessionDocument = {
                 { kind: "Field", name: { kind: "Name", value: "id" } },
                 { kind: "Field", name: { kind: "Name", value: "clientId" } },
                 { kind: "Field", name: { kind: "Name", value: "clientName" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "applicationType" },
+                },
                 { kind: "Field", name: { kind: "Name", value: "logoUri" } },
               ],
             },
@@ -3733,6 +3742,10 @@ export const AppSessionListDocument = {
                 { kind: "Field", name: { kind: "Name", value: "id" } },
                 { kind: "Field", name: { kind: "Name", value: "clientId" } },
                 { kind: "Field", name: { kind: "Name", value: "clientName" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "applicationType" },
+                },
                 { kind: "Field", name: { kind: "Name", value: "logoUri" } },
               ],
             },
diff --git a/frontend/src/utils/parseUserAgent.test.ts b/frontend/src/utils/parseUserAgent.test.ts
index 40df5026..8bce96b2 100644
--- a/frontend/src/utils/parseUserAgent.test.ts
+++ b/frontend/src/utils/parseUserAgent.test.ts
@@ -233,20 +233,20 @@ const WEB_EXPECTED_RESULT = [
     "8.0",
   ),
   makeDeviceExtendedInfo(
-    DeviceType.Web,
+    DeviceType.Mobile,
     "Apple",
     "iPhone",
     "iOS",
-    undefined,
+    "8.4.1",
     "Mobile Safari",
     "8.0",
   ),
   makeDeviceExtendedInfo(
-    DeviceType.Web,
+    DeviceType.Mobile,
     "Samsung",
     "SM-G973U",
     "Android",
-    undefined,
+    "9",
     "Chrome",
     "69.0.3497.100",
   ),
diff --git a/frontend/src/utils/parseUserAgent.ts b/frontend/src/utils/parseUserAgent.ts
index a234250e..248b88e4 100644
--- a/frontend/src/utils/parseUserAgent.ts
+++ b/frontend/src/utils/parseUserAgent.ts
@@ -48,9 +48,6 @@ const getDeviceType = (
   if (browser.name === "Electron") {
     return DeviceType.Desktop;
   }
-  if (browser.name) {
-    return DeviceType.Web;
-  }
   if (
     device.type === "mobile" ||
     operatingSystem.name?.includes("Android") ||
@@ -58,6 +55,9 @@ const getDeviceType = (
   ) {
     return DeviceType.Mobile;
   }
+  if (browser.name) {
+    return DeviceType.Web;
+  }
   return DeviceType.Unknown;
 };