diff --git a/src/api/devices.ts b/src/api/devices.ts
index 95be84fa5..8729c7c27 100644
--- a/src/api/devices.ts
+++ b/src/api/devices.ts
@@ -74,6 +74,27 @@ export const unpairDevice = async (dongleId: string) =>
     method: 'POST',
   })
 
+export const grantDeviceReadPermission = async (dongleId: string, email: string) =>
+  fetcher<{ success: number }>(`/v1/devices/${dongleId}/add_user`, {
+    method: 'POST',
+    body: JSON.stringify({ email: email }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+
+export const removeDeviceReadPermission = async (dongleId: string, email: string) =>
+  fetcher<{ success: number }>(`/v1/devices/${dongleId}/del_user`, {
+    method: 'POST',
+    body: JSON.stringify({ email: email }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+
+export const getDeviceUsers = async (dongleId: string): Promise<{ email: string; permission: string }[]> =>
+  fetcher<{ email: string; permission: string }[]>(`/v1/devices/${dongleId}/users`)
+
 const validatePairToken = (
   input: string,
 ): {
diff --git a/src/components/material/Icon.tsx b/src/components/material/Icon.tsx
index dd0968bb7..42c35c3b7 100644
--- a/src/components/material/Icon.tsx
+++ b/src/components/material/Icon.tsx
@@ -8,7 +8,7 @@ export const Icons = [
   'add', 'arrow_back', 'camera', 'check', 'chevron_right', 'clear', 'close', 'delete', 'description', 'directions_car', 'download', 'error',
   'file_copy', 'flag', 'info', 'keyboard_arrow_down', 'keyboard_arrow_up', 'local_fire_department', 'logout', 'menu', 'my_location',
   'open_in_new', 'payments', 'person', 'progress_activity', 'satellite_alt', 'search', 'settings', 'upload', 'videocam', 'refresh',
-  'login', 'person_off', 'autorenew', 'close_small', 'pause', 'play_arrow', 'clear_all',
+  'login', 'person_off', 'autorenew', 'close_small', 'pause', 'play_arrow', 'clear_all', 'share'
 ] as const
 
 export type IconName = (typeof Icons)[number]
diff --git a/src/pages/dashboard/activities/SettingsActivity.tsx b/src/pages/dashboard/activities/SettingsActivity.tsx
index ec046fc86..9989905da 100644
--- a/src/pages/dashboard/activities/SettingsActivity.tsx
+++ b/src/pages/dashboard/activities/SettingsActivity.tsx
@@ -1,9 +1,9 @@
 import { createResource, Match, Show, Suspense, Switch, children, createMemo, For, createSignal, createEffect } from 'solid-js'
-import type { Accessor, VoidComponent, Setter, ParentComponent, Resource, JSXElement } from 'solid-js'
+import type { Accessor, VoidComponent, Setter, ParentComponent, Resource, JSXElement, JSX } from 'solid-js'
 import { useLocation } from '@solidjs/router'
 import clsx from 'clsx'
 
-import { getDevice, unpairDevice } from '~/api/devices'
+import { getDevice, getDeviceUsers, grantDeviceReadPermission, unpairDevice, removeDeviceReadPermission } from '~/api/devices'
 import {
   cancelSubscription,
   getStripeCheckout,
@@ -22,6 +22,7 @@ import IconButton from '~/components/material/IconButton'
 import TopAppBar from '~/components/material/TopAppBar'
 import { createQuery } from '~/utils/createQuery'
 import { getDeviceName } from '~/utils/device'
+import TextField from '~/components/material/TextField'
 
 const useAction = <T,>(action: () => Promise<T>): [() => void, Resource<T>] => {
   const [source, setSource] = createSignal(false)
@@ -401,15 +402,64 @@ const PrimeManage: VoidComponent<{ dongleId: string }> = (props) => {
 
 const DeviceSettingsForm: VoidComponent<{ dongleId: string; device: Resource<Device> }> = (props) => {
   const [deviceName] = createResource(props.device, getDeviceName)
-
+  const [deviceUsers, { refetch: refetchDeviceUsers }] = createResource(props.dongleId, getDeviceUsers)
   const [unpair, unpairData] = useAction(async () => {
     const { success } = await unpairDevice(props.dongleId)
     if (success) window.location.href = window.location.origin
   })
+  const [shareLoading, setShareLoading] = createSignal(false)
+  const share: JSX.EventHandler<HTMLFormElement, SubmitEvent> = async (event) => {
+    event.preventDefault()
+    setShareLoading(true)
+    const formData = new FormData(event.target as HTMLFormElement)
+    console.log(formData)
+    const email = formData.get('email') as string
+    const { success } = await grantDeviceReadPermission(props.dongleId, email)
+    setShareLoading(false)
+    if (success) {
+      refetchDeviceUsers()
+      formRef?.reset()
+    }
+  }
+
+  const [unshareLoading, setUnshareLoading] = createSignal(false)
+
+  const unshare = async (email: string) => {
+    setUnshareLoading(true)
+    const { success } = await removeDeviceReadPermission(props.dongleId, email)
+    if (success) refetchDeviceUsers()
+    setUnshareLoading(false)
+  }
+
+  let formRef: HTMLFormElement | undefined
 
   return (
     <div class="flex flex-col gap-4">
       <h2 class="text-lg">{deviceName()}</h2>
+      <Show when={props.device()?.is_owner}>
+        <div class="flex flex-col gap-2">
+          <h3 class="text-md">{(deviceUsers() || []).length - 1 > 0 ? 'shared with:' : 'share device'}</h3>
+          <For each={deviceUsers()} fallback={<div>loading</div>}>
+            {(user, _index) => (
+              <Show when={user.permission !== 'owner'}>
+                <div class="flex items-center gap-2 justify-between">
+                  <div>{user.email}</div>
+                  <Button color="error" onClick={() => unshare(user.email)} loading={unshareLoading()}>
+                    <Icon name="delete" />
+                  </Button>
+                </div>
+              </Show>
+            )}
+          </For>
+          <form onSubmit={share} class="flex items-center gap-2 justify-between" method="post" ref={formRef}>
+            <TextField label="email" id="email-box" name="email" class="w-full" />
+            <Button color="secondary" type="submit" loading={shareLoading()}>
+              <Icon name="share" />
+            </Button>
+          </form>
+        </div>
+      </Show>
+
       <Show when={unpairData.error}>
         <div class="flex gap-2 rounded-sm bg-surface-container-high p-2 text-sm text-on-surface">
           <Icon class="text-error" name="error" size="20" />