diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index b31e8ad2..acfc189b 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -5,8 +5,8 @@ module.exports = {
     es2020: true
   },
   extends: [
-    'prettier',
     'eslint:recommended',
+    'prettier',
     '@vue/eslint-config-typescript',
     'plugin:vue/vue3-recommended',
     'plugin:vitest-globals/recommended'
diff --git a/frontend/src/components/bucket/BucketTable.vue b/frontend/src/components/bucket/BucketTable.vue
index 354019f3..f189e9f5 100644
--- a/frontend/src/components/bucket/BucketTable.vue
+++ b/frontend/src/components/bucket/BucketTable.vue
@@ -4,7 +4,7 @@ import { ref, watch } from 'vue';
 
 import { BucketChildConfig, BucketPermission, BucketTableBucketName } from '@/components/bucket';
 import { Spinner } from '@/components/layout';
-import { SyncButton, InviteButton } from '@/components/common';
+import { SyncButton, ShareButton } from '@/components/common';
 import { Button, Column, Dialog, TreeTable, useConfirm } from '@/lib/primevue';
 import { useAppStore, useAuthStore, useBucketStore, usePermissionStore } from '@/store';
 import { DELIMITER, Permissions } from '@/utils/constants';
@@ -293,7 +293,7 @@ watch(getBuckets, () => {
     >
       <template #body="{ node }">
         <span v-if="!node.data.dummy">
-          <InviteButton
+          <ShareButton
             :bucket-id="node.data.bucketId"
             label-text="Folder"
           />
diff --git a/frontend/src/components/common/Invite.vue b/frontend/src/components/common/Invite.vue
new file mode 100644
index 00000000..a65fa153
--- /dev/null
+++ b/frontend/src/components/common/Invite.vue
@@ -0,0 +1,248 @@
+<script setup lang="ts">
+import { computed, ref, } from 'vue';
+import { storeToRefs } from 'pinia';
+import { Form } from 'vee-validate';
+import {  object, string } from 'yup';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import {
+  Button,
+  RadioButton,
+  Checkbox,
+  useToast,
+  InputSwitch
+} from '@/lib/primevue';
+import TextInput from '@/components/form/TextInput.vue';
+import { Share } from '@/components/common';
+import { Spinner } from '@/components/layout';
+
+import { Regex } from '@/utils/constants';
+
+import { inviteService } from '@/services';
+import { useAuthStore } from '@/store';
+
+import type { Ref } from 'vue';
+
+// Types
+type Props = {
+  label: string;
+  resourceType: string;
+  resource: any;
+};
+
+// Props
+const props = withDefaults(defineProps<Props>(), {});
+
+// Store
+const { getUser } = storeToRefs(useAuthStore());
+const toast = useToast();
+
+// State
+const inviteLoading: Ref<boolean> = ref(false);
+const showInviteLink: Ref<boolean> = ref(false);
+const inviteLink: Ref<string> = ref('');
+
+const timeFrames: Record<string, number> = {
+  '1 Hour': 3600,
+  '8 Hour': 28800,
+  '1 Day (Default)': 86400,
+  '1 Week': 604800,
+  '1 Month (30 days)': 2592000
+};
+
+const bucketPermCodes: Record<string, string> = {
+  READ: 'Read',
+  CREATE: 'Upload',
+  UPDATE: 'Update'
+};
+
+const objectPermCodes: Record<string, string> = {
+  READ: 'Read',
+  UPDATE: 'Update'
+};
+
+const formData: Ref<any> = ref({
+  expiresAt: 86400,
+  isRestricted: false,
+  permCodes: ['READ'],
+});
+
+// Permissions selection
+const selectedOptions = computed(() => {
+  return props.resourceType === 'bucket' ? bucketPermCodes : objectPermCodes;
+});
+
+const isOptionUnselectable = (optionName: string) => {
+  // Make default permission disabled
+  return optionName === 'Read';
+};
+
+// Form validation
+const schema = object({
+  // TODO: conditional validation
+  // isRestricted: boolean(),
+  // email: string()
+  //   .email()
+  //   .matches(new RegExp(Regex.EMAIL), 'Provide a valid email address')
+  //   .when('isRestricted', {
+  //     is: true,
+  //     then: (schema) => schema
+  //       .required('Email address is required')
+  //   })
+  email: string().matches(new RegExp(Regex.EMAIL), 'Provide a valid email address')
+});
+
+//Action
+async function invite(data: any) {
+  inviteLoading.value = true;
+  try {
+    // set expiry date
+    const expiresAt = Math.floor(Date.now() / 1000) + formData.value.expiresAt;
+    // put input email addresses into an array
+    // NOTE: emails are coming from `data`
+    const emails = formData.value.isRestricted ? [data.email] : [];
+
+    // TODO: add perms to users already in the system
+
+    // generate invites (for emails not already in the system)
+    const invites = await inviteService.createInvites(
+      props.resourceType,
+      props.resource,
+      getUser.value?.profile,
+      emails,
+      expiresAt,
+      formData.value.permCodes, // use formData because it was bound during setup
+    );
+
+    // if not restricting to an email, show link
+    if(emails.length == 0) {
+      inviteLink.value = `${window.location.origin}/invite/${invites[0].token}`;
+      toast.success('', 'Invite link created.');
+      showInviteLink.value = true;
+    }
+    // else show email confirmation
+    else {
+      // TODO: output report (list of invites sent, CHES trx ID (?))
+      toast.success('', 'Invite notifications sent.', { life: 5000 });
+      showInviteLink.value = false;
+    }
+  } catch (error: any) {
+    toast.error('Creating Invite', error.response?.data.detail, { life: 0 });
+  }
+  inviteLoading.value = false;
+}
+</script>
+
+<template>
+  <h3 class="mt-1 mb-2">{{ (props.label) }}</h3>
+  <!-- :initial-values="formData" -->
+  <Form
+    :initial-values="formData"
+    :validation-schema="schema"
+    @submit="invite"
+  >
+  <p>Make invite available for</p>
+  <div class="flex flex-wrap gap-3">
+    <div
+      v-for="(value, name) in timeFrames"
+      :key="value"
+      class="flex align-items-center"
+    >
+      <RadioButton
+        v-model="formData.expiresAt"
+        :input-id="value.toString()"
+        :name="name"
+        :value="value"
+      />
+      <label
+        :for="value.toString()"
+        class="ml-2"
+      >
+        {{ name }}
+      </label>
+    </div>
+  </div>
+  <p class="mt-4 mb-2">Access options</p>
+  <div class="flex flex-wrap gap-3">
+    <div
+      v-for="(name, value) in selectedOptions"
+      :key="value"
+      class="flex align-items-center"
+    >
+      <Checkbox
+        v-model="formData.permCodes"
+        :input-id="value.toString()"
+        :name="name"
+        :value="value"
+        :disabled="isOptionUnselectable(name)"
+      />
+      <label
+        :for="value.toString()"
+        class="ml-2"
+      >
+        {{ name }}
+      </label>
+    </div>
+  </div>
+  <p class="mt-4 mb-2">Restrict to user's email</p>
+  <!-- <p class="mt-4 mb-2">Restrict invite to a user signing in to BCBox with the following email address</p> -->
+  <div class="flex flex-column gap-2">
+    <InputSwitch
+      v-model="formData.isRestricted"
+      name="isRestricted"
+      class="mb-3"
+    />
+  </div>
+  <!-- if scoping invite to specific users -->
+  <div v-if="formData.isRestricted">
+    <!-- v-model="formData.email" -->
+    <TextInput
+      v-if="formData.isRestricted"
+      v-model="formData.email"
+      name="email"
+      type="email"
+      placeholder="Enter email"
+      help-text="The Invite will be emailed to this person"
+      class="invite-email"
+    />
+    <div class="my-4 inline-flex">
+      <Button
+        class="p-button p-button-primary mr-3"
+        :disabled="inviteLoading"
+        type="submit"
+      >
+        <font-awesome-icon
+          icon="fa fa-envelope"
+          class="mr-2"
+        />
+        Send invite link
+      </Button>
+      <Spinner
+        v-if="inviteLoading"
+        class="h-2rem w-2rem"
+      />
+    </div>
+  </div>
+  <!-- else generating an open invite -->
+  <div v-else>
+    <Button
+      class="p-button p-button-primary my-3 block"
+      type="submit"
+    >
+      Generate invite link
+    </Button>
+    <Share
+      v-if="showInviteLink"
+      label="Invite link"
+      :resource-type="resourceType"
+      :resource="resource"
+      :invite-link="inviteLink"
+    />
+  </div>
+  </Form>
+</template>
+
+<style scoped lang="scss">
+.invite-email:deep(input) {
+  width: 80%;
+}
+</style>
diff --git a/frontend/src/components/common/InviteButton.vue b/frontend/src/components/common/InviteButton.vue
deleted file mode 100644
index dcd77da2..00000000
--- a/frontend/src/components/common/InviteButton.vue
+++ /dev/null
@@ -1,333 +0,0 @@
-<script setup lang="ts">
-import { storeToRefs } from 'pinia';
-import { computed, ref, watch } from 'vue';
-
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import ShareLinkContent from '@/components/object/share/ShareLinkContent.vue';
-import {
-  Button,
-  Dialog,
-  TabView,
-  TabPanel,
-  RadioButton,
-  Checkbox,
-  InputText,
-  useToast,
-  InputSwitch
-} from '@/lib/primevue';
-import { Spinner } from '@/components/layout';
-
-import { Permissions } from '@/utils/constants';
-import { inviteService } from '@/services';
-import { useAuthStore, useConfigStore, useObjectStore, usePermissionStore, useBucketStore } from '@/store';
-
-import type { Ref } from 'vue';
-
-// Props
-type Props = {
-  bucketId?: string;
-  objectId?: string;
-  labelText: string;
-};
-type InviteFormData = {
-  email?: string;
-  bucketId?: string;
-  expiresAt?: number;
-  objectId?: string;
-  permCodes?: Array<string>;
-};
-
-// TODO: define a stricter type using a union of COMSObject | Bucket
-type Resource  =  any;
-
-const props = withDefaults(defineProps<Props>(), {
-  bucketId: '',
-  objectId: '',
-  labelText: '',
-  isRestricted: false
-});
-
-// Store
-const objectStore = useObjectStore();
-const bucketStore = useBucketStore();
-const { getConfig } = storeToRefs(useConfigStore());
-const { getUserId, getUser } = storeToRefs(useAuthStore());
-const permissionStore = usePermissionStore();
-
-const toast = useToast();
-
-// State
-const resourceType = props.objectId ? ref('object') : ref('bucket');
-const resource: Ref<Resource | undefined> = computed(() => {
-  return props.objectId
-    ? objectStore.getObject(props.objectId)
-    : bucketStore.getBucket(props.bucketId);
-});
-const isRestricted: Ref<boolean> = ref(false);
-const inviteLoading: Ref<boolean> = ref(false);
-const showInviteLink: Ref<boolean> = ref(false);
-const hasManagePermission: Ref<boolean> = computed(() => {
-  return resourceType.value === 'object'
-    // eslint-disable-next-line max-len
-    ? permissionStore.isObjectActionAllowed(props.objectId, getUserId.value, Permissions.MANAGE, resource.value?.bucketId)
-    : permissionStore.isBucketActionAllowed(props.bucketId, getUserId.value, Permissions.MANAGE);
-});
-
-// Share link
-const inviteLink: Ref<string> = ref('');
-
-const timeFrames: Record<string, number> = {
-  '1 Hour': 3600,
-  '8 Hour': 28800,
-  '1 Day (Default)': 86400,
-  '1 Week': 604800
-};
-
-const bucketPermCodes: Record<string, string> = {
-  READ: 'Read',
-  CREATE: 'Upload',
-  UPDATE: 'Update'
-};
-
-const objectPermCodes: Record<string, string> = {
-  READ: 'Read',
-  UPDATE: 'Update'
-};
-
-const formData: Ref<InviteFormData> = ref({ expiresAt: 86400, permCodes: ['READ'] });
-
-// Dialog
-const displayInviteDialog = ref(false);
-
-// Permissions selection
-const selectedOptions = computed(() => {
-  return resourceType.value === 'bucket' ? bucketPermCodes : objectPermCodes;
-});
-// Share link
-const bcBoxLink = computed(() => {
-  const path = props.objectId ? `detail/objects?objectId=${props.objectId}` : `list/objects?bucketId=${props.bucketId}`;
-  return `${window.location.origin}/${path}`;
-});
-const comsUrl = computed(() => {
-  return `${getConfig.value.coms?.apiPath}/object/${props.objectId}`;
-});
-
-const isOptionUnselectable = (optionName: string) => {
-  // Make default permission disabled
-  return optionName === 'Read';
-};
-
-watch(isRestricted, () => {
-  if (formData.value.email) {
-    formData.value.email = '';
-  }
-});
-
-//Action
-async function invite() {
-  inviteLoading.value = true;
-  try {
-    // set expiry date
-    let expiresAt;
-    if (formData.value.expiresAt) {
-      expiresAt = Math.floor(Date.now() / 1000) + formData.value.expiresAt;
-    }
-    // put input email addresses into an array
-    const emails = isRestricted.value && formData.value.email ? [formData.value.email] : [];
-    // TODO: add perms to users already in the system
-
-    // generate invites (for emails not already in the system)
-    const invites = await inviteService.createInvites(
-      resourceType.value,
-      resource.value,
-      getUser.value?.profile,
-      emails,
-      expiresAt,
-      formData.value.permCodes,
-    );
-
-    // if not restricting to an email, show link
-    if(emails.length == 0) {
-      inviteLink.value = `${window.location.origin}/invite/${invites[0].token}`;
-      toast.success('', 'Invite link created.');
-      showInviteLink.value = true;
-    }
-    // else show email confirmation
-    else {
-      // TODO: output report (list of invites sent, CHES trx ID (?))
-      toast.success('', 'Invite notifications sent.', {life: 5000});
-      showInviteLink.value = false;
-    }
-  } catch (error: any) {
-    toast.error('Creating Invite', error.response.data.detail, {life: 0});
-  }
-  inviteLoading.value = false;
-}
-</script>
-
-<template>
-  <Dialog
-    v-model:visible="displayInviteDialog"
-    header="Share"
-    :modal="true"
-    :style="{ minWidth: '700px' }"
-    class="bcbox-info-dialog"
-  >
-    <template #header>
-      <font-awesome-icon
-        icon="fa-solid fa-share-alt"
-        fixed-width
-      />
-      <span class="p-dialog-title">Share</span>
-    </template>
-
-    <h3 class="bcbox-info-dialog-subhead">
-        {{ resourceType === 'object' ? resource?.name : resource?.bucketName }}
-    </h3>
-
-    <ul class="mb-4">
-      <li>If a user already has permissions, you can link them with a share link</li>
-      <li>
-        Invite someone using an invite link - the links are single-use; you must generate a new link for each user you
-        intend to send this to
-      </li>
-      <li>
-        To share publicly or with a direct link,
-        you must set the file to public - this only works for individual files
-      </li>
-    </ul>
-    <TabView>
-      <TabPanel
-        v-if="resource?.public"
-        header="Direct public file link"
-      >
-        <ShareLinkContent
-          :share-link="comsUrl"
-          label="Direct Link"
-        />
-      </TabPanel>
-      <!-- Disable for public until unauthed File Details page works -->
-      <TabPanel
-        header="Share link"
-        :disabled="resource?.public"
-      >
-        <ShareLinkContent
-          :share-link="bcBoxLink"
-          label="Share Link"
-        />
-      </TabPanel>
-      <TabPanel
-        header="Invite link"
-        :disabled="!hasManagePermission"
-      >
-        <h3 class="mt-1 mb-2">{{ (props.labelText) }} Invite</h3>
-        <p>Make invite available for</p>
-        <div class="flex flex-wrap gap-3">
-          <div
-            v-for="(value, name) in timeFrames"
-            :key="value"
-            class="flex align-items-center"
-          >
-            <RadioButton
-              v-model="formData.expiresAt"
-              :input-id="value.toString()"
-              :name="name"
-              :value="value"
-            />
-            <label
-              :for="value.toString()"
-              class="ml-2"
-            >
-              {{ name }}
-            </label>
-          </div>
-        </div>
-        <p class="mt-4 mb-2">Access options</p>
-        <div class="flex flex-wrap gap-3">
-          <div
-            v-for="(name, value) in selectedOptions"
-            :key="value"
-            class="flex align-items-center"
-          >
-            <Checkbox
-              v-model="formData.permCodes"
-              :input-id="value.toString()"
-              :name="name"
-              :value="value"
-              :disabled="isOptionUnselectable(name)"
-            />
-            <label
-              :for="value.toString()"
-              class="ml-2"
-            >
-              {{ name }}
-            </label>
-          </div>
-        </div>
-        <p class="mt-4 mb-2">Restrict to user's email</p>
-        <!-- <p class="mt-4 mb-2">Restrict invite to a user signing in to BCBox with the following email address</p> -->
-        <div class="flex flex-column gap-2">
-          <InputSwitch
-            v-model="isRestricted"
-          />
-          <InputText
-            v-show="isRestricted"
-            v-model="formData.email"
-            name="inviteEmail"
-            placeholder="Enter email"
-            required
-            type="email"
-            class="mt-2 max-w-30rem"
-          />
-          <small
-            v-show="isRestricted"
-            id="inviteEmail-help"
-          >
-            The Invite will be emailed to this person
-          </small>
-        </div>
-        <div class="my-4 inline-flex p-0">
-          <Button
-            class="p-button p-button-primary mr-3"
-            :disabled="inviteLoading"
-            @click="invite"
-          >
-            <font-awesome-icon
-              icon="fa fa-envelope"
-              class="mr-2"
-            />
-            Generate invite link
-          </Button>
-          <Spinner
-            v-if="inviteLoading"
-            class="h-2rem w-2rem"
-          />
-        </div><br />
-
-        <ShareLinkContent
-          v-if="showInviteLink"
-          :share-link="inviteLink"
-          label="Invite Link"
-        />
-      </TabPanel>
-    </TabView>
-  </Dialog>
-  <Button
-    v-tooltip.bottom="`Share ${props.labelText.toLocaleLowerCase()}`"
-    class="p-button-lg p-button-text primary"
-    :aria-label="`Share ${props.labelText.toLocaleLowerCase()}`"
-    @click="displayInviteDialog = true"
-    @keyup.enter="displayInviteDialog = true"
-  >
-    <font-awesome-icon icon="fa-solid fa-share-alt" />
-  </Button>
-</template>
-
-<style scoped lang="scss">
-h2 {
-  font-weight: bold;
-}
-ul {
-  padding-left: 22px;
-}
-</style>
diff --git a/frontend/src/components/common/Share.vue b/frontend/src/components/common/Share.vue
new file mode 100644
index 00000000..8f6e0603
--- /dev/null
+++ b/frontend/src/components/common/Share.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import QrcodeVue from 'qrcode.vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { Button, InputText, useToast } from '@/lib/primevue';
+import { useConfigStore } from '@/store';
+
+import type { Ref } from 'vue';
+
+// Props
+type Props = {
+  label: string;
+  inviteLink?: string;
+  resourceType: string;
+  resource: any;
+};
+const props = withDefaults(defineProps<Props>(), {
+  inviteLink: undefined
+});
+
+// store
+const { getConfig } = storeToRefs(useConfigStore());
+
+// Share link
+const shareLink: Ref<string>  = computed(() => {
+  if(props.inviteLink) return props.inviteLink; // use invite link if defined in prop
+  else if(props.resource.public) { // else if a public file
+    return `${getConfig.value.coms?.apiPath}/object/${props.resource.id}`;
+  } else { // else either a protected file or bucket
+    const path = props.resourceType === 'object'
+      // eslint-disable-next-line max-len
+      ? `detail/objects?objectId=${props.resource.id}`
+      : `list/objects?bucketId=${props.resource.bucketId}`;
+    return `${window.location.origin}/${path}`;
+  }
+});
+
+// Actions
+const toast = useToast();
+const copyLinkToClipboard = () => {
+  navigator.clipboard.writeText(shareLink.value);
+  toast.info('Share link copied to clipboard');
+};
+</script>
+
+<template>
+  <label for="shareLink">{{ props.label }}</label>
+  <div class="p-inputgroup mb-4">
+    <InputText
+      name="shareLink"
+      readonly
+      :value="shareLink"
+    />
+    <Button
+      class="p-button-outlined p-button-primary"
+      @click="copyLinkToClipboard"
+    >
+      <font-awesome-icon
+        icon="fa fa-clipboard"
+        class="mr-2"
+      />
+      Copy Link
+    </Button>
+  </div>
+
+  <label class="block">QR code</label>
+  <qrcode-vue
+    :value="shareLink"
+    :size="250"
+    level="L"
+  />
+</template>
diff --git a/frontend/src/components/common/ShareButton.vue b/frontend/src/components/common/ShareButton.vue
new file mode 100644
index 00000000..5998afa1
--- /dev/null
+++ b/frontend/src/components/common/ShareButton.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { computed, ref} from 'vue';
+
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { Invite, Share } from '@/components/common';
+import {
+  Button,
+  Dialog,
+  TabView,
+  TabPanel,
+} from '@/lib/primevue';
+
+import { Permissions } from '@/utils/constants';
+import { useAuthStore, useObjectStore, usePermissionStore, useBucketStore } from '@/store';
+
+import type { Ref } from 'vue';
+
+// Props
+type Props = {
+  bucketId?: string;
+  objectId?: string;
+  labelText: string;
+};
+
+// TODO: define a stricter type using a union of COMSObject | Bucket
+type Resource  =  any;
+
+const props = withDefaults(defineProps<Props>(), {
+  bucketId: '',
+  objectId: '',
+  labelText: '',
+});
+
+// Store
+const objectStore = useObjectStore();
+const bucketStore = useBucketStore();
+const { getUserId } = storeToRefs(useAuthStore());
+const permissionStore = usePermissionStore();
+
+// State
+const resourceType = props.objectId ? ref('object') : ref('bucket');
+const resource: Ref<Resource | undefined> = computed(() => {
+  return props.objectId
+    ? objectStore.getObject(props.objectId)
+    : bucketStore.getBucket(props.bucketId);
+});
+const hasManagePermission: Ref<boolean> = computed(() => {
+  return resourceType.value === 'object'
+    // eslint-disable-next-line max-len
+    ? permissionStore.isObjectActionAllowed(props.objectId, getUserId.value, Permissions.MANAGE, resource.value?.bucketId)
+    : permissionStore.isBucketActionAllowed(props.bucketId, getUserId.value, Permissions.MANAGE);
+});
+
+// Dialog
+const displayShareDialog = ref(false);
+</script>
+
+<template>
+  <Dialog
+    v-model:visible="displayShareDialog"
+    header="Share"
+    :modal="true"
+    :style="{ minWidth: '700px' }"
+    class="bcbox-info-dialog"
+  >
+    <template #header>
+      <font-awesome-icon
+        icon="fa-solid fa-share-alt"
+        fixed-width
+      />
+      <span class="p-dialog-title">Share</span>
+    </template>
+
+    <h3 class="bcbox-info-dialog-subhead">
+        {{ resourceType === 'object' ? resource?.name : resource?.bucketName }}
+    </h3>
+    <ul class="mb-4">
+      <li>If a user already has permissions, you can link them with a share link</li>
+      <li>
+        Invite someone using an invite link - the links are single-use; you must generate a new link for each user you
+        intend to send this to
+      </li>
+      <li>
+        To share publicly or with a direct link,
+        you must set the file to public - this only works for individual files
+      </li>
+    </ul>
+    <TabView>
+      <TabPanel
+        v-if="resource?.public"
+        header="Direct public file link"
+      >
+        <Share
+          label="Direct link"
+          :resource-type="resourceType"
+          :resource="resource"
+        />
+      </TabPanel>
+      <!-- Disable for public until unauthed File Details page works -->
+      <TabPanel
+        header="Share link"
+        :disabled="resource?.public"
+      >
+        <Share
+          label="Share link"
+          :resource-type="resourceType"
+          :resource="resource"
+        />
+      </TabPanel>
+      <TabPanel
+        :header="`${resourceType === 'object' ? 'File' : 'Folder'} invite`"
+        :disabled="!hasManagePermission"
+      >
+        <Invite
+          :label="`${resourceType === 'object' ? 'File' : 'Folder'} invite`"
+          :resource-type="resourceType"
+          :resource="resource"
+        />
+      </TabPanel>
+    </TabView>
+  </Dialog>
+  <Button
+    v-tooltip.bottom="`Share ${props.labelText.toLocaleLowerCase()}`"
+    class="p-button-lg p-button-text primary"
+    :aria-label="`Share ${props.labelText.toLocaleLowerCase()}`"
+    @click="displayShareDialog = true"
+    @keyup.enter="displayShareDialog = true"
+  >
+    <font-awesome-icon icon="fa-solid fa-share-alt" />
+  </Button>
+</template>
+
+<style scoped lang="scss">
+ul {
+  padding-left: 22px;
+}
+</style>
diff --git a/frontend/src/components/common/index.ts b/frontend/src/components/common/index.ts
index 2029427e..ea3c4693 100644
--- a/frontend/src/components/common/index.ts
+++ b/frontend/src/components/common/index.ts
@@ -1,2 +1,4 @@
+export { default as Invite } from './Invite.vue';
+export { default as Share } from './Share.vue';
+export { default as ShareButton } from './ShareButton.vue';
 export { default as SyncButton } from './SyncButton.vue';
-export { default as InviteButton } from './InviteButton.vue';
diff --git a/frontend/src/components/object/ObjectFileDetails.vue b/frontend/src/components/object/ObjectFileDetails.vue
index 346bf4c7..0d947d4c 100644
--- a/frontend/src/components/object/ObjectFileDetails.vue
+++ b/frontend/src/components/object/ObjectFileDetails.vue
@@ -14,7 +14,7 @@ import {
   ObjectUploadBasic,
   ObjectVersion
 } from '@/components/object';
-import { InviteButton } from '@/components/common';
+import { ShareButton } from '@/components/common';
 import { Button, Dialog, Divider } from '@/lib/primevue';
 import {
   useAuthStore,
@@ -120,7 +120,7 @@ onMounted(async () => {
         </div>
 
         <div class="action-buttons">
-          <InviteButton
+          <ShareButton
             :object-id="props.objectId"
             label-text="File"
           />
diff --git a/frontend/src/components/object/ObjectTable.vue b/frontend/src/components/object/ObjectTable.vue
index 77c6b317..c5722938 100644
--- a/frontend/src/components/object/ObjectTable.vue
+++ b/frontend/src/components/object/ObjectTable.vue
@@ -10,7 +10,7 @@ import {
   ObjectPermission,
   ObjectPublicToggle
 } from '@/components/object';
-import { SyncButton, InviteButton } from '@/components/common';
+import { SyncButton, ShareButton } from '@/components/common';
 import { Button, Column, DataTable, Dialog, InputText, useToast } from '@/lib/primevue';
 import { useAuthStore, useObjectStore, usePermissionStore } from '@/store';
 import { Permissions, RouteNames } from '@/utils/constants';
@@ -320,7 +320,7 @@ const selectedFilters = (payload: any) => {
         body-class="action-buttons"
       >
         <template #body="{ data }">
-          <InviteButton
+          <ShareButton
             :object-id="data.id"
             label-text="File"
           />
diff --git a/frontend/src/components/object/share/ShareLinkContent.vue b/frontend/src/components/object/share/ShareLinkContent.vue
deleted file mode 100644
index 9c5b4ace..00000000
--- a/frontend/src/components/object/share/ShareLinkContent.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import QrcodeVue from 'qrcode.vue';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-
-import { Button, InputText, useToast } from '@/lib/primevue';
-
-const toast = useToast();
-
-// Props
-type Props = {
-  label: string;
-  shareLink: string;
-};
-
-const props = withDefaults(defineProps<Props>(), {});
-
-// Actions
-const copyLinkToClipboard = () => {
-  navigator.clipboard.writeText(props.shareLink);
-  toast.info('Share link copied to clipboard');
-};
-</script>
-
-<template>
-  <label for="shareLink">{{ props.label }}</label>
-  <div class="p-inputgroup mb-4">
-    <InputText
-      name="shareLink"
-      readonly
-      :value="props.shareLink"
-    />
-    <Button
-      class="p-button-outlined p-button-primary"
-      @click="copyLinkToClipboard"
-    >
-      <font-awesome-icon
-        icon="fa fa-clipboard"
-        class="mr-2"
-      />
-      Copy Link
-    </Button>
-  </div>
-
-  <h2 class="mb-2">QR Code</h2>
-  <qrcode-vue
-    :value="shareLink"
-    :size="250"
-    level="L"
-  />
-</template>
-
-<style scoped lang="scss">
-h2 {
-  font-weight: bold;
-}
-</style>
diff --git a/frontend/src/components/object/share/ShareObjectButton.vue b/frontend/src/components/object/share/ShareObjectButton.vue
deleted file mode 100644
index 8205805f..00000000
--- a/frontend/src/components/object/share/ShareObjectButton.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<script setup lang="ts">
-import { storeToRefs } from 'pinia';
-import { computed, ref, onMounted } from 'vue';
-
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import ShareLinkContent from '@/components/object/share/ShareLinkContent.vue';
-import { Button, Dialog, TabView, TabPanel } from '@/lib/primevue';
-import { useConfigStore, useObjectStore } from '@/store';
-
-import type { Ref } from 'vue';
-import type { COMSObject } from '@/types';
-
-// Props
-type Props = {
-  id: string;
-};
-
-const props = withDefaults(defineProps<Props>(), {});
-
-// Store
-const objectStore = useObjectStore();
-const { getConfig } = storeToRefs(useConfigStore());
-
-// State
-const obj: Ref<COMSObject | undefined> = ref(undefined);
-
-// Dialog
-const displayShareDialog = ref(false);
-
-// Share link
-const bcBoxLink = computed(() => {
-  return `${window.location.origin}/detail/objects?objectId=${props.id}`;
-});
-const comsUrl = computed(() => {
-  return `${getConfig.value.coms?.apiPath}/object/${props.id}`;
-});
-
-onMounted(() => {
-  obj.value = objectStore.getObject(props.id);
-});
-</script>
-
-<template>
-  <Dialog
-    v-model:visible="displayShareDialog"
-    header="Share"
-    :modal="true"
-    :style="{ minWidth: '700px' }"
-    class="bcbox-info-dialog"
-  >
-    <template #header>
-      <font-awesome-icon
-        icon="fa-solid fa-share-alt"
-        fixed-width
-      />
-      <span class="p-dialog-title">Share</span>
-    </template>
-
-    <h3 class="bcbox-info-dialog-subhead">
-      {{ obj?.name }}
-    </h3>
-
-    <ul class="mb-4">
-      <li>To share publicly or with a direct file link, you must set the file to public in the file list</li>
-      <li>To share to a BCBox user, you must first apply permissions to them</li>
-    </ul>
-
-    <TabView>
-      <TabPanel
-        v-if="obj?.public"
-        header="Direct public file link"
-      >
-        <ShareLinkContent
-          :share-link="comsUrl"
-          label="Direct Link"
-        />
-      </TabPanel>
-      <!-- Disable for public until unauthed File Details page works -->
-      <TabPanel
-        header="BCBox share link"
-        :disabled="obj?.public"
-      >
-        <ShareLinkContent
-          :share-link="bcBoxLink"
-          label="Share Link"
-        />
-      </TabPanel>
-    </TabView>
-  </Dialog>
-
-  <Button
-    v-tooltip.bottom="'Share file'"
-    class="p-button-lg p-button-text primary"
-    aria-label="Share file"
-    @click="displayShareDialog = true"
-  >
-    <font-awesome-icon icon="fa-solid fa-share-alt" />
-  </Button>
-</template>
-
-<style scoped lang="scss">
-h2 {
-  font-weight: bold;
-}
-ul {
-  padding-left: 22px;
-}
-</style>
diff --git a/frontend/src/components/object/share/index.ts b/frontend/src/components/object/share/index.ts
deleted file mode 100644
index ff46b2d4..00000000
--- a/frontend/src/components/object/share/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as ShareLinkContent } from './ShareLinkContent.vue';
-export { default as ShareObjectButton } from './ShareObjectButton.vue';
diff --git a/frontend/src/utils/emailTemplates.ts b/frontend/src/utils/emailTemplates.ts
index f1ad2c80..4dcfcf04 100644
--- a/frontend/src/utils/emailTemplates.ts
+++ b/frontend/src/utils/emailTemplates.ts
@@ -6,32 +6,32 @@
  * @returns {string} the template html
  */
 export function invite(resourceType: string, resourceName: string, currentUser: any): string{
-  let html;
+  let html = '';
   // eslint-disable-next-line max-len
   const currentUserEmail = `<a href="mailto:${currentUser.email}" style="color: #1a5a96 !important">${currentUser.email}</a>`;
   // alternate templates depending if resource is a file or a folder
   if (resourceType === 'object') {
-    html = `<html style="color: #495057 !important;"><br>
-      <h2 style="color: #495057 !important;">${currentUserEmail} invited you to access a file on BCBox</h2>
-      <p style="color: #495057 !important;">Here's a link to access the file that ${currentUserEmail} shared with you:</p>`;
+    html += '<html style="color: #495057 !important; max-width: 500px !important;"><br>';
+    html += `<h2 style="color: #495057 !important;">${currentUserEmail} invited you to access a file on BCBox</h2>`;
+    html += '<p style="color: #495057 !important;">';
+    html += `Here's a link to access the file that ${currentUserEmail} shared with you:</p>`;
   }
   else if (resourceType === 'bucket') {
-    html = `<html"><br>
-      <h2 style="color: #495057 !important;">${currentUserEmail} invited you to access a folder on BCBox</h2>\n
-      <p style="color: #495057 !important;">Here's a link to access the folder that ${currentUserEmail} shared with you:</p>`;
+    html += '<html"><br>';
+    html += `<h2 style="color: #495057 !important;">${currentUserEmail} invited you to access a folder on BCBox</h2>\n`;
+    html += '<p style="color: #495057 !important;">';
+    html += `Here's a link to access the folder that ${currentUserEmail} shared with you:</p>`;
   }
-  // eslint-disable-next-line max-len
-  html = html + `<strong><a style="text-align: center; font-size: large; color: #1a5a96" href="${window.location.origin}/invite/{{token}}">
-      ${resourceName }
-      </a>
-    </strong><br><br>
-    <small style="color: #495057 !important;">
-      This invite will only work for you and people with existing access.
-      If you do not recognize the sender, do not click on the link above.<br>
-      Only open links that you are expecting from a known sender.
-    </small><br><br>
-    <a style="color: #1a5a96" href="${window.location.origin}">Learn more about BCBox</a>
-  </html>`;
+  html += '<p style="max-width: 400px !important; text-align: center !important;">';
+  html += `<strong><a style="font-size: large; color: #1a5a96" href="${window.location.origin}/invite/{{token}}">`;
+  html += `${resourceName }</a></strong></p><br>`;
+  html += `<small style="color: #495057 !important;">
+            This invite will only work for you and people with existing access.
+            If you do not recognize the sender, do not click on the link above.<br>
+            Only open links that you are expecting from a known sender.
+          </small><br><br>
+          <a style="color: #1a5a96" href="${window.location.origin}">Learn more about BCBox</a>
+        </html>`;
 
   return html;
 }