diff --git a/components/InviteModal.vue b/components/InviteModal.vue
index 15236da..d532ae3 100644
--- a/components/InviteModal.vue
+++ b/components/InviteModal.vue
@@ -1,20 +1,21 @@
 <template>
-  <Modal v-bind="props" :title="props.title || 'Create an invite'">
-    <div id="invite-popup">
-      <div v-if="invite">
-        <p id="invite-label">{{ invite }}</p>
-        <button @click="copyInvite('link')">Copy Link</button>
-        <button @click="copyInvite('code')">Copy Code</button>
-      </div>
-      <div v-else>
-        <button @click="generateInvite">Generate Invite</button>
-      </div>
-    </div>
-  </Modal>
+	<Modal v-bind="props" :title="props.title || 'Create an invite'">
+		<div v-if="invite" id="invite-body">
+			<div id="invite-label">{{ invite }}</div>
+			<div id="invite-buttons">
+				<Button text="Copy as link" variant="neutral" :callback="() => copyInvite('link')" />
+				<Button text="Copy as code" variant="neutral" :callback="() => copyInvite('code')" />
+			</div>
+		</div>
+		<div v-else>
+			<Button text="Generate Invite" variant="normal" :callback="generateInvite">Generate Invite</Button>
+		</div>
+	</Modal>
 </template>
 
 <script lang="ts" setup>
 import type { InviteResponse, ModalProps } from '~/types/interfaces';
+import Button from './UserInterface/Button.vue';
 
 const props = defineProps<ModalProps & { guildId: string }>();
 
@@ -52,8 +53,18 @@ function copyInvite(type: "link" | "code") {
 
 <style scoped>
 
+#invite-body, #invite-buttons {
+	display: flex;
+	gap: 1em;
+}
+
+#invite-body {
+	flex-direction: column;
+}
+
 #invite-label {
   text-align: center;
+  color: aquamarine;
 }
 
 </style>
\ No newline at end of file