diff --git a/components/InvitePopup.vue b/components/InvitePopup.vue
new file mode 100644
index 0000000..ee6f124
--- /dev/null
+++ b/components/InvitePopup.vue
@@ -0,0 +1,40 @@
+<template>
+  <div id="invite-popup">
+    <div v-if="invite">
+      <p>{{ invite }}</p>
+      <button @click="copyInvite">Copy Link</button>
+    </div>
+    <div v-else>
+      <button @click="generateInvite">Generate Invite</button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { InviteResponse } from '~/types/interfaces';
+
+
+const invite = ref<string>();
+
+const route = useRoute();
+
+async function generateInvite(): Promise<void> {
+  const createdInvite: InviteResponse | undefined = await fetchWithApi(
+    `/servers/${route.params.serverId}/invites`,
+    { method: "POST", body: { custom_id: "oijewfoiewf" } }
+  );
+
+  invite.value = createdInvite?.id;
+  return;
+}
+
+function copyInvite() {
+  const inviteUrl = URL.parse(`invite/${invite.value}`, `${window.location.protocol}//${window.location.host}`);
+  navigator.clipboard.writeText(inviteUrl!.href);
+}
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file