diff --git a/src/resources/js/Components/Footer.vue b/src/resources/js/Components/Footer.vue
index 6eca22ed..a8946871 100644
--- a/src/resources/js/Components/Footer.vue
+++ b/src/resources/js/Components/Footer.vue
@@ -10,7 +10,7 @@ const year = computed(() => {
 
 <template>
     <footer
-        class="border-t-2 border-gray-300 dark:border-red-500 bg-white shadow dark:bg-gray-800"
+        class="mt-auto border-t-2 border-gray-300 dark:border-red-500 bg-white shadow dark:bg-gray-800"
     >
         <div
             class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between"
diff --git a/src/resources/js/Layouts/AuthenticatedLayout.vue b/src/resources/js/Layouts/AuthenticatedLayout.vue
index 1411c5d6..57acd91d 100644
--- a/src/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/src/resources/js/Layouts/AuthenticatedLayout.vue
@@ -15,7 +15,7 @@ const showingNavigationDropdown = ref(false);
 
 <template>
     <div>
-        <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
+        <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-gray-900">
             <nav
                 class="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700"
             >
diff --git a/src/resources/js/Pages/Invitation/Create.vue b/src/resources/js/Pages/Invitation/Create.vue
index 3b5138c6..1a3edf75 100644
--- a/src/resources/js/Pages/Invitation/Create.vue
+++ b/src/resources/js/Pages/Invitation/Create.vue
@@ -1,63 +1,19 @@
 <script setup lang="ts">
-import { Head, useForm } from '@inertiajs/vue3';
+import { Head } from '@inertiajs/vue3';
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
-import InputLabel from '@/Components/InputLabel.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import InputError from '@/Components/InputError.vue';
-import TextInput from '@/Components/TextInput.vue';
-
-const form = useForm({
-    email: '',
-});
-
-const submit = () => {
-    form.post(route('invitation.send'), {
-        onSuccess: () => {
-            form.reset();
-        },
-    });
-};
+import InvitationForm from '@/Pages/Invitation/Partials/InvitationForm.vue';
 </script>
 
 <template>
     <AuthenticatedLayout>
         <Head title="Create invitation to Anilibrary" />
 
-        <div class="py-12">
-            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+        <div class="py-12 sm:pt-12">
+            <div class="max-w-7xl mx-auto sm:px-8 lg:px-24">
                 <div
                     class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg"
                 >
-                    <form
-                        class="p-6 text-gray-900 dark:text-gray-100"
-                        @submit.prevent="submit"
-                    >
-                        <div>
-                            <InputLabel for="email" value="Email" />
-
-                            <TextInput
-                                id="email"
-                                v-model="form.email"
-                                type="email"
-                                class="mt-1 block w-full"
-                                required
-                                autofocus
-                                autocomplete="email"
-                            />
-
-                            <InputError class="mt-2" :message="form.errors.email" />
-                        </div>
-
-                        <div class="flex justify-end mt-4">
-                            <PrimaryButton
-                                class="ml-4"
-                                :class="{ 'opacity-25': form.processing }"
-                                :disabled="form.processing"
-                            >
-                                Send invitation
-                            </PrimaryButton>
-                        </div>
-                    </form>
+                    <InvitationForm />
                 </div>
             </div>
         </div>
diff --git a/src/resources/js/Pages/Invitation/Partials/InvitationForm.vue b/src/resources/js/Pages/Invitation/Partials/InvitationForm.vue
new file mode 100644
index 00000000..d391fb83
--- /dev/null
+++ b/src/resources/js/Pages/Invitation/Partials/InvitationForm.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import TextInput from '@/Components/TextInput.vue';
+import { useForm } from '@inertiajs/vue3';
+
+const form = useForm({
+    email: '',
+});
+
+const submit = () => {
+    form.post(route('invitation.send'), {
+        onSuccess: () => {
+            form.reset();
+        },
+    });
+};
+</script>
+
+<template>
+    <form class="p-6 text-gray-900 dark:text-gray-100" @submit.prevent="submit">
+        <div>
+            <InputLabel for="email" value="Email" />
+
+            <TextInput
+                id="email"
+                v-model="form.email"
+                type="email"
+                class="mt-1 block w-full"
+                required
+                autofocus
+                autocomplete="email"
+            />
+
+            <InputError class="mt-2" :message="form.errors.email" />
+        </div>
+
+        <div class="flex justify-end mt-4">
+            <PrimaryButton
+                class="ml-4"
+                :class="{ 'opacity-25': form.processing }"
+                :disabled="form.processing"
+            >
+                Send invitation
+            </PrimaryButton>
+        </div>
+    </form>
+</template>
+
+<style scoped></style>
diff --git a/src/resources/js/tests/Components/Footer.test.ts b/src/resources/js/tests/Components/Footer.test.ts
new file mode 100644
index 00000000..42ea2238
--- /dev/null
+++ b/src/resources/js/tests/Components/Footer.test.ts
@@ -0,0 +1,22 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import Footer from '@/Components/Footer.vue';
+
+describe('Footer test (Footer.vue)', () => {
+    it('Renders correctly', () => {
+        const wrapper = mount(Footer, {
+            global: {
+                mocks: {
+                    route: vitest.fn().mockReturnValue('dashboard'),
+                },
+            },
+        });
+
+        expect(wrapper.exists()).toBeTruthy();
+        expect(wrapper.find('footer').exists()).toBeTruthy();
+
+        const dashboardLink = wrapper.findComponent({ name: 'Link' });
+        expect(dashboardLink.exists()).toBeTruthy();
+        expect(dashboardLink.text()).toContain('Anilibrary');
+    });
+});
diff --git a/src/resources/js/tests/Components/TelegramLoginWidget.test.ts b/src/resources/js/tests/Components/TelegramLoginWidget.test.ts
index 31a05350..b01d4262 100644
--- a/src/resources/js/tests/Components/TelegramLoginWidget.test.ts
+++ b/src/resources/js/tests/Components/TelegramLoginWidget.test.ts
@@ -35,7 +35,6 @@ describe('TelegramLoginWidget test (TelegramLoginWidget.vue)', () => {
 
     it('Creates login widget with redirect props', async () => {
         const url = '/redirect-url';
-
         global.route = vitest.fn().mockReturnValue(url);
 
         const wrapper = mount(TelegramLoginWidget, {
@@ -51,9 +50,10 @@ describe('TelegramLoginWidget test (TelegramLoginWidget.vue)', () => {
 
         const script = div.querySelector('script');
         expect(script!.getAttribute('data-auth-url')).toBe(url);
+        expect(script!.hasAttribute('data-onauth')).toBeFalsy();
     });
 
-    it('Calls the callback on authentication', async () => {
+    it('Creates login widget with callback props', async () => {
         const callbackMock = vitest.fn();
         window.onTelegramAuth = callbackMock;
 
@@ -70,5 +70,6 @@ describe('TelegramLoginWidget test (TelegramLoginWidget.vue)', () => {
 
         const script = div.querySelector('script');
         expect(script!.getAttribute('data-onauth')).toBe('onTelegramAuth(user)');
+        expect(script!.hasAttribute('data-auth-url')).toBeFalsy();
     });
 });
diff --git a/src/resources/js/tests/Pages/Invitation/Partials/InvitationForm.test.ts b/src/resources/js/tests/Pages/Invitation/Partials/InvitationForm.test.ts
new file mode 100644
index 00000000..f10d49ab
--- /dev/null
+++ b/src/resources/js/tests/Pages/Invitation/Partials/InvitationForm.test.ts
@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils';
+import InvitationForm from '@/Pages/Invitation/Partials/InvitationForm.vue';
+import { describe, expect, it, vitest } from 'vitest';
+
+describe('InvitationForm test (InvitationForm.vue)', () => {
+    it('Renders correctly', () => {
+        const wrapper = mount(InvitationForm);
+
+        expect(wrapper.find('form').exists()).toBeTruthy();
+        expect(wrapper.find('label').exists()).toBeTruthy();
+        expect(wrapper.find('input').exists()).toBeTruthy();
+        expect(wrapper.find('button').exists()).toBeTruthy();
+    });
+
+    it('Creates invitation', async () => {
+        global.route = vitest.fn();
+        const wrapper = mount(InvitationForm);
+
+        wrapper.vm.form.post = vitest.fn();
+        wrapper.vm.form.reset = vitest.fn();
+        wrapper.vm.form.email = 'test@example.com';
+        await wrapper.find('form').trigger('submit.prevent');
+
+        expect(wrapper.vm.form.post).toHaveBeenCalled();
+    });
+
+    it('Disables button during form processing', async () => {
+        const wrapper = mount(InvitationForm);
+
+        wrapper.vm.form.processing = true;
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.find('button').element.disabled).toBeTruthy();
+    });
+});
