diff --git a/frontend/src/components/DataTable.vue b/frontend/src/components/DataTable.vue
index 37aed77e1..9528386f3 100644
--- a/frontend/src/components/DataTable.vue
+++ b/frontend/src/components/DataTable.vue
@@ -37,6 +37,10 @@
               <span v-if="fieldData.type === tableDataType.text">
                 {{ fieldData.value }}
               </span>
+              <span v-else-if="fieldData.type === tableDataType.code" class="flex gap-4 items-center">
+                <code>{{ fieldData.value }}</code>
+                <text-button :copy="fieldData.value" />
+              </span>
               <span v-else-if="fieldData.type === tableDataType.link">
                 <a :href="fieldData.link" target="_blank">{{ fieldData.value }}</a>
               </span>
@@ -94,6 +98,7 @@ import { tableDataButtonType, tableDataType } from '@/definitions';
 import PrimaryButton from '@/elements/PrimaryButton.vue';
 import SecondaryButton from '@/elements/SecondaryButton.vue';
 import CautionButton from '@/elements/CautionButton.vue';
+import TextButton from '@/elements/TextButton.vue';
 import LoadingSpinner from '@/elements/LoadingSpinner.vue';
 
 const props = defineProps({
diff --git a/frontend/src/definitions.js b/frontend/src/definitions.js
index 9fb5a26fe..d02b6c1f0 100644
--- a/frontend/src/definitions.js
+++ b/frontend/src/definitions.js
@@ -252,6 +252,7 @@ export const tableDataType = {
   text: 1,
   link: 2,
   button: 3,
+  code: 4,
 };
 
 export const tableDataButtonType = {
diff --git a/frontend/src/views/admin/InviteCodePanelView.vue b/frontend/src/views/admin/InviteCodePanelView.vue
index 0bcdc44b7..97512d1f4 100644
--- a/frontend/src/views/admin/InviteCodePanelView.vue
+++ b/frontend/src/views/admin/InviteCodePanelView.vue
@@ -83,7 +83,7 @@ const pageNotification = ref('');
 
 const filteredInvites = computed(() => invites.value.map((invite) => ({
   code: {
-    type: tableDataType.text,
+    type: tableDataType.code,
     value: invite.code,
   },
   status: {