diff --git a/backend/api/routes/invitations_api.py b/backend/api/routes/invitations_api.py
index 9b1525464..2bc7c5f85 100644
--- a/backend/api/routes/invitations_api.py
+++ b/backend/api/routes/invitations_api.py
@@ -82,7 +82,7 @@ class InvitationsVerifyAPI(Resource):
     @api.response(500, "Internal server error")
     def get(self, invite_code):
         # Select the invite from the database
-        invitation = Invitations.get_or_none(Invitations.code == invite_code)
+        invitation: Invitations = Invitations.get_or_none(Invitations.code == invite_code)
 
         if not invitation:
             return {"message": "Invitation not found"}, 404
@@ -90,7 +90,8 @@ def get(self, invite_code):
         if invitation.used is True and invitation.unlimited is not True:
             return {"message": "Invitation has already been used"}, 400
 
-        if invitation.expires and invitation.expires <= datetime.now():
+        print(invitation.expires, datetime.utcnow())
+        if invitation.expires and invitation.expires <= datetime.utcnow():
             return {"message": "Invitation has expired"}, 400
 
         return {"message": "Invitation is valid"}, 200
diff --git a/frontend/src/components/Forms/InviteForm.vue b/frontend/src/components/Forms/InviteForm.vue
index 8eddbf714..a08dfcaad 100644
--- a/frontend/src/components/Forms/InviteForm.vue
+++ b/frontend/src/components/Forms/InviteForm.vue
@@ -75,6 +75,7 @@ import DefaultInput from "@/components/Inputs/DefaultInput.vue";
 import SelectInput from "@/components/Inputs/SelectInput.vue";
 import DateInput from "@/components/Inputs/DateInput.vue";
 import DefaultButton from "../Buttons/DefaultButton.vue";
+
 import type { ToastID } from "vue-toastification/dist/types/types";
 
 export default defineComponent({
@@ -91,8 +92,9 @@ export default defineComponent({
             clipboard: useClipboard(),
             created: false,
             failed: false,
+            inviteCode: "",
             inviteData: {
-                inviteCode: customAlphabet("ABCDEFGHIJKLMNOPQRSTUVWXYZ")(6),
+                inviteCode: "",
                 expiration: 1440 as number | null | "custom",
                 customExpiration: "" as string,
                 options: [] as string[],
@@ -220,6 +222,7 @@ export default defineComponent({
 
             // Show the invite
             this.created = true;
+            this.inviteCode = this.inviteData.inviteCode;
             this.$formkit.reset("inviteForm");
             this.inviteData.inviteCode = customAlphabet("ABCDEFGHIJKLMNOPQRSTUVWXYZ")(6);
         },
@@ -247,7 +250,7 @@ export default defineComponent({
             });
         },
         inviteLink() {
-            return `${window.location.origin}/j/${this.inviteData.inviteCode}`;
+            return `${window.location.origin}/j/${this.inviteCode}`;
         },
     },
     watch: {
@@ -276,6 +279,7 @@ export default defineComponent({
     },
     async mounted() {
         this.getLibraries();
+        this.inviteData.inviteCode = customAlphabet("ABCDEFGHIJKLMNOPQRSTUVWXYZ")(6);
         this.inviteData.libraries = this.libraries.map((library) => library.id);
     },
 });
diff --git a/frontend/src/components/InvitationList/InvitationItem.vue b/frontend/src/components/InvitationList/InvitationItem.vue
index 97341c629..db588c5a9 100644
--- a/frontend/src/components/InvitationList/InvitationItem.vue
+++ b/frontend/src/components/InvitationList/InvitationItem.vue
@@ -1,8 +1,8 @@
 <template>
     <ListItem icon="fa-envelope">
         <template #title>
-            <span class="text-lg">{{ invite.code }}</span>
-            <p class="text-xs truncate text-gray-500 dark:text-gray-400 w-full">{{ expired }}</p>
+            <button @click="copyLink()" class="text-lg">{{ invite.code }}</button>
+            <p class="text-xs truncate w-full" :class="color">{{ expired }}</p>
         </template>
         <template #buttons>
             <div class="flex flex-row space-x-2">
@@ -21,6 +21,7 @@
 import { defineComponent } from "vue";
 import { useInvitationStore } from "@/stores/invitations";
 import { mapActions } from "pinia";
+import { useClipboard } from "@vueuse/core";
 
 import type { Invitation } from "@/types/api/invitations";
 
@@ -37,7 +38,16 @@ export default defineComponent({
             required: true,
         },
     },
+    data() {
+        return {
+            clipboard: useClipboard(),
+        };
+    },
     methods: {
+        async copyLink() {
+            await this.clipboard.copy(`${location.origin}/j/${this.invite.code}`);
+            this.$toast.info(this.__("Copied to clipboard"));
+        },
         async deleteLocalInvitation() {
             await this.deleteInvitation(this.invite.id);
         },
@@ -45,7 +55,25 @@ export default defineComponent({
     },
     computed: {
         expired(): string {
-            return (this.$filter("isPast", this.invite.expires) ? this.__("Expires") : this.__("Expired")) + " " + this.$filter("timeAgo", this.invite.expires);
+            if (this.$filter("isPast", this.invite.expires)) {
+                return this.__("Expired %{s}", { s: this.$filter("timeAgo", this.invite.expires) });
+            } else {
+                return this.__("Expires %{s}", { s: this.$filter("timeAgo", this.invite.expires) });
+            }
+        },
+        color() {
+            const inHalfDay = new Date();
+            inHalfDay.setHours(inHalfDay.getHours() + 12);
+
+            if (this.$filter("isPast", this.invite.expires)) {
+                return "text-red-600 dark:text-red-500";
+            }
+
+            if (this.$filter("dateLess", this.invite.expires, inHalfDay)) {
+                return "text-yellow-500 dark:text-yellow-400";
+            }
+
+            return "text-gray-500 dark:text-gray-400";
         },
     },
 });
diff --git a/frontend/src/ts/filters/dateLess.ts b/frontend/src/ts/filters/dateLess.ts
new file mode 100644
index 000000000..917e4c468
--- /dev/null
+++ b/frontend/src/ts/filters/dateLess.ts
@@ -0,0 +1,23 @@
+import moment from "moment";
+
+/**
+ * dateLess - Filter that returns true if the first date is less than the second date
+ *
+ * @param {string} value - The first date to compare
+ * @param {string} other - The second date to compare
+ * @param {boolean} utc - Whether input date is in UTC
+ * @returns The boolean result of the calculation
+ */
+function dateLess(value: string | Date, other: string | Date, utc: boolean = true): boolean {
+    if (utc) {
+        value = moment.utc(value).local();
+        other = moment.utc(other).local();
+    } else {
+        value = moment(value).local();
+        other = moment(other).local();
+    }
+
+    return value.isBefore(other);
+}
+
+export default dateLess;
diff --git a/frontend/src/ts/filters/index.ts b/frontend/src/ts/filters/index.ts
index 0bc7a0395..4be0c2c13 100644
--- a/frontend/src/ts/filters/index.ts
+++ b/frontend/src/ts/filters/index.ts
@@ -5,6 +5,7 @@ import removeVersion from "./removeVersion";
 import timeAgo from "./timeAgo";
 import toMinutes from "./toMinutes";
 import isPast from "./isPast";
+import dateLess from "./dateLess";
 
 const filters = {
     titleCase,
@@ -14,6 +15,7 @@ const filters = {
     timeAgo,
     toMinutes,
     isPast,
+    dateLess,
 };
 
 export default filters;
diff --git a/frontend/src/ts/filters/isPast.ts b/frontend/src/ts/filters/isPast.ts
index 8c4a5f441..515b57b38 100644
--- a/frontend/src/ts/filters/isPast.ts
+++ b/frontend/src/ts/filters/isPast.ts
@@ -8,9 +8,10 @@ import moment from "moment";
  * @returns The boolean result of the calculation
  */
 function isPast(value: string | Date, utc: boolean = true): boolean {
-    if (utc) value = moment.utc(value).local().toDate();
-    else value = moment(value).local().toDate();
-    return moment().isBefore(value);
+    if (utc) value = moment.utc(value).local();
+    else value = moment(value).local();
+
+    return value.isBefore(moment());
 }
 
 export default isPast;
diff --git a/frontend/src/views/JoinViews/JellyfinViews/JellyfinSetupView.vue b/frontend/src/views/JoinViews/JellyfinViews/JellyfinSetupView.vue
index 4af9b131c..94493245a 100644
--- a/frontend/src/views/JoinViews/JellyfinViews/JellyfinSetupView.vue
+++ b/frontend/src/views/JoinViews/JellyfinViews/JellyfinSetupView.vue
@@ -1,7 +1,7 @@
 <template>
     <div ref="jellyForm">
         <FormKit type="form" id="jellyfinForm" v-model="form" @submit="submit()" submit-label="Create Account" :submit-attrs="{ wrapperClass: 'flex justify-end' }">
-            <FormKit type="text" label="Username" name="username" placeholder="marvin" validation="required:trim|alphanumeric" required autocomplete="off" />
+            <FormKit type="text" label="Username" name="username" placeholder="marvin" validation="required:trim|alphanumeric|lowercase" required autocomplete="off" />
             <FormKit type="email" label="Email" name="email" placeholder="marvin@wizarr.dev" validation="required:trim|email" required autocomplete="email" />
             <FormKit type="password" label="Password" name="password" placeholder="••••••••" validation="required:trim" required autocomplete="new-password" :classes="{ outer: form.password ? '!mb-0' : '' }" />
             <PasswordMeter :password="form.password" class="mb-[23px] mt-1 px-[2px]" v-if="form.password" />