diff --git a/app/Domains/Outputs/OutputTypeEnum.php b/app/Domains/Outputs/OutputTypeEnum.php
index 3a23de57..b5ae99da 100644
--- a/app/Domains/Outputs/OutputTypeEnum.php
+++ b/app/Domains/Outputs/OutputTypeEnum.php
@@ -11,6 +11,7 @@ enum OutputTypeEnum: string
 
     case WebPage = 'web_page';
     case EmailOutput = 'email_output';
+    case CalendarOutput = 'calendar_output';
     case ApiOutput = 'api_output';
     case EmailReplyOutput = 'email_reply_output';
     //leave for scripting
diff --git a/app/Http/Controllers/CalendarController.php b/app/Http/Controllers/CalendarController.php
index eff60de9..cf411327 100644
--- a/app/Http/Controllers/CalendarController.php
+++ b/app/Http/Controllers/CalendarController.php
@@ -2,17 +2,22 @@
 
 namespace App\Http\Controllers;
 
+use App\Domains\Outputs\OutputTypeEnum;
 use App\Http\Resources\CollectionResource;
 use App\Http\Resources\EventResource;
 use App\Models\Collection;
 use App\Models\Event;
 use Carbon\Carbon;
-use Illuminate\Http\Request;
 
 class CalendarController extends Controller
 {
     public function show(Collection $collection)
     {
+        //for now if there is no related output we do a 404
+        if (! $collection->outputs()->where('type', OutputTypeEnum::CalendarOutput)->first()) {
+            abort(404);
+        }
+
         // Parse the date from the query string, or use the current date if not provided
         $date = request()->input('date') ? Carbon::parse(request()->input('date')) : now();
 
@@ -26,7 +31,7 @@ public function show(Collection $collection)
             ->get();
 
         return inertia('Calendar/Show', [
-            "collection" => new CollectionResource($collection),
+            'collection' => new CollectionResource($collection),
             'events' => EventResource::collection($events),
             'startDate' => $startOfCalendar->format('Y-m-d'),
             'endDate' => $endOfCalendar->format('Y-m-d'),
diff --git a/app/Http/Controllers/Outputs/CalendarOutputController.php b/app/Http/Controllers/Outputs/CalendarOutputController.php
new file mode 100644
index 00000000..495a7908
--- /dev/null
+++ b/app/Http/Controllers/Outputs/CalendarOutputController.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Controllers\Outputs;
+
+use App\Domains\Outputs\OutputTypeEnum;
+use App\Http\Controllers\OutputController;
+
+class CalendarOutputController extends OutputController
+{
+    protected OutputTypeEnum $outputTypeEnum = OutputTypeEnum::CalendarOutput;
+
+    protected string $edit_path = 'Outputs/Calendar/Edit';
+
+    protected string $show_path = 'Outputs/Calendar/Show';
+
+    protected string $create_path = 'Outputs/Calendar/Create';
+
+    protected string $info = 'This will use the events in the collection to create a calendar page';
+
+    protected string $type = 'Calendar Page';
+}
diff --git a/resources/js/Pages/Outputs/Calendar/Components/Card.vue b/resources/js/Pages/Outputs/Calendar/Components/Card.vue
new file mode 100644
index 00000000..7acd00a9
--- /dev/null
+++ b/resources/js/Pages/Outputs/Calendar/Components/Card.vue
@@ -0,0 +1,34 @@
+<script setup>
+
+import {Link} from "@inertiajs/vue3";
+import Settings from "@/Pages/Outputs/Components/Settings.vue";
+
+const props = defineProps({
+    output: Object
+})
+</script>
+
+<template>
+    <div class="card rounded-none w-96  shadow-xl  border border-neutral">
+    <div class="card-body">
+            <Settings :output="output"/>
+
+            <div class="card-actions justify-between flex items-center">
+                <span class="badge badge-default">{{ output.type_formatted}}</span>
+                <div class="flex justify-end gap-2 items-center">
+                    <Link class="link" :href="route('calendar.show', {
+                        collection: output.collection_id,
+                    })">visit</Link>
+                    <Link :href="route('collections.outputs.calendar_output.edit', {
+                                        collection: output.collection_id,
+                                        output: output.id
+                                    })" class="btn btn-primary rounded-none">Edit</Link>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/Pages/Outputs/Calendar/Components/Resources.vue b/resources/js/Pages/Outputs/Calendar/Components/Resources.vue
new file mode 100644
index 00000000..6d34641f
--- /dev/null
+++ b/resources/js/Pages/Outputs/Calendar/Components/Resources.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="flex flex-col space-y-8 mt-4">
+        <div>
+            <InputLabel value="Title"/>
+            <input v-model="modelValue.title" type="text" placeholder="Title Here"
+                class="rounded-none input input-bordered w-full " />
+            <InputError :message="modelValue.errors.title" />
+        </div>
+
+        <div>
+            <InputLabel value="Summary"/>
+            <textarea v-model="modelValue.summary" class="rounded-none textarea textarea-bordered w-full mb-5"
+                placeholder="This will be shown on the page (optional)" rows="5"></textarea>
+            <InputError :message="modelValue.errors.summary" />
+        </div>
+        <slot></slot>
+
+        <div class="form-control w-24">
+            <label class="label cursor-pointer">
+                <span class="label-text">Active</span>
+                <input type="checkbox"
+                       v-model="modelValue.active"
+                       :checked="modelValue.active"
+                       class="checkbox" />
+            </label>
+            <InputError :message="modelValue.errors.active" />
+        </div>
+
+        <div class="form-control w-24">
+            <label class="label cursor-pointer">
+                <span class="label-text">Public</span>
+                <input type="checkbox"
+                       v-model="modelValue.public"
+                       :checked="modelValue.public" class="checkbox" />
+            </label>
+            <InputError :message="modelValue.errors.public" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+import InputError from "@/Components/InputError.vue";
+import InputLabel from "@/Components/InputLabel.vue";
+import {ref} from "vue";
+
+const emit = defineEmits(['update:modelValue'])
+
+const props = defineProps({
+    modelValue: Object
+})
+
+
+
+</script>
diff --git a/resources/js/Pages/Outputs/Calendar/Create.vue b/resources/js/Pages/Outputs/Calendar/Create.vue
new file mode 100644
index 00000000..79128d43
--- /dev/null
+++ b/resources/js/Pages/Outputs/Calendar/Create.vue
@@ -0,0 +1,77 @@
+<script setup>
+import AppLayout from '@/Layouts/AppLayout.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import {ref} from 'vue';
+import Intro from '@/Components/Intro.vue';
+import SecondaryLink from '@/Components/SecondaryLink.vue';
+import Resources from './Components/Resources.vue';
+import {useForm} from '@inertiajs/vue3';
+import Generate from "@/Pages/Outputs/WebPage/Components/Generate.vue";
+import Templates from "@/Components/Templates.vue";
+
+const props = defineProps({
+    collection: {
+        type: Object,
+        required: true,
+    }
+});
+
+const form = useForm({
+    title: '',
+    summary: '',
+    active: false,
+    public: false,
+});
+
+
+const submit = () => {
+    form.post(
+        route('collections.outputs.calendar_output.store', {
+            collection: props.collection.data.id
+        }), {
+            preserveScroll: true,
+            onSuccess: () => {
+                form.reset();
+            }
+        });
+}
+</script>
+
+<template>
+    <AppLayout title="Create Web Page">
+
+        <div class="py-12">
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+                <div class="overflow-hidden shadow-xl rounded-none p-5">
+                    <Intro></Intro>
+
+                    <form @submit.prevent="submit" class="p-10 ">
+                        <div class="flex">
+                            <div class="w-3/4 border border-secondary rounded-none p-5">
+
+                                <Resources
+                                    :collection="collection.data"
+                                    v-model="form">
+
+                                </Resources>
+
+                                <div class="flex justify-end items-center gap-4">
+                                    <PrimaryButton type="submit">
+                                        Save
+                                    </PrimaryButton>
+                                    <SecondaryLink :href="route('collections.outputs.index', {
+                                collection: collection.data.id
+
+                            })">
+                                        Cancel
+                                    </SecondaryLink>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </AppLayout>
+</template>
diff --git a/resources/js/Pages/Outputs/Calendar/Edit.vue b/resources/js/Pages/Outputs/Calendar/Edit.vue
new file mode 100644
index 00000000..47a02cbe
--- /dev/null
+++ b/resources/js/Pages/Outputs/Calendar/Edit.vue
@@ -0,0 +1,84 @@
+<script setup>
+import AppLayout from '@/Layouts/AppLayout.vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import { ref } from 'vue';
+import Intro from '@/Components/Intro.vue';
+import SecondaryLink from '@/Components/SecondaryLink.vue';
+import Resources from './Components/Resources.vue';
+import { useForm } from '@inertiajs/vue3';
+import {useToast} from "vue-toastification";
+import Generate from "@/Pages/Outputs/WebPage/Components/Generate.vue";
+import Delete from "@/Pages/Outputs/Components/Delete.vue";
+import Templates from "@/Components/Templates.vue";
+
+const toast = useToast();
+
+const props = defineProps({
+    collection: {
+        type: Object,
+        required: true,
+    },
+    output: {
+        type: Object
+    },
+});
+
+const form = useForm({
+    title: props.output.title,
+    summary: props.output.summary,
+    active: props.output.active,
+    public: props.output.public,
+});
+
+
+const submit = () => {
+    form.put(
+        route('collections.outputs.calendar_output.update', {
+            collection: props.collection.data.id,
+            output: props.output.id
+        }), {
+            preserveScroll: true,
+            onSuccess: params => {
+                toast.info("Updated");
+            }
+        });
+}
+</script>
+
+<template>
+    <AppLayout title="Edit Web Page">
+        <div class="py-12">
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+                <div class="overflow-hidden shadow-xl rounded-none p-5">
+                    <Intro></Intro>
+
+                    <form @submit.prevent="submit" class="p-10 ">
+                        <div class="flex">
+                            <div class="w-3/4 border border-secondary rounded-none p-5 rounded-lg">
+
+                            <Resources
+                        v-model="form">
+                        </Resources>
+
+                        <div class="flex justify-end items-center gap-4">
+                            <PrimaryButton type="submit">
+                                Save
+                            </PrimaryButton>
+                            <SecondaryLink :href="route('collections.outputs.index', {
+                                collection: collection.data.id
+
+                            })">
+                                Back
+                            </SecondaryLink>
+                            <Delete :output="output"></Delete>
+                        </div>
+                            </div>
+                        </div>
+                    </form>
+
+                </div>
+            </div>
+        </div>
+    </AppLayout>
+</template>
diff --git a/resources/js/Pages/Outputs/Calendar/Show.vue b/resources/js/Pages/Outputs/Calendar/Show.vue
new file mode 100644
index 00000000..3d9a5e29
--- /dev/null
+++ b/resources/js/Pages/Outputs/Calendar/Show.vue
@@ -0,0 +1,53 @@
+<script setup>
+import { useToast } from 'vue-toastification';
+import PageLayout from "@/Layouts/PageLayout.vue";
+import Chat from "@/Pages/Outputs/WebPage/Components/Chat.vue";
+import ChatSlideout from "@/Pages/Outputs/WebPage/Components/ChatSlideout.vue";
+import {ref} from "vue";
+
+const toast = useToast();
+
+const props = defineProps({
+    output: {
+        type: Object
+    },
+    messages: Object
+});
+
+const showSlideout = ref(false)
+
+
+</script>
+
+<template>
+    <PageLayout :title="output.title">
+        <div class="mx-auto p-10">
+            <div class="bg-white rounded-t-lg min-h-screen w-3/4 mx-auto shadow-lg">
+                <div class="flex justify-start p-2">
+                    <button
+                        class="btn btn-primary flex justify-start gap-3 items-center"
+                        type="button" @click="showSlideout = true">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
+                        </svg>
+
+                        <span>chat</span>
+                    </button>
+                </div>
+                <article class="prose prose-stone p-10">
+                    <h1>{{ output.data.title }}</h1>
+
+                    <div v-html="output.data.summary" class="prose prose-xl">
+                    </div>
+                </article>
+            </div>
+        </div>
+        <ChatSlideout
+            :messages="messages"
+            :output="output.data"
+            @close="showSlideout = false"
+            :show="showSlideout">
+
+        </ChatSlideout>
+    </PageLayout>
+</template>
diff --git a/resources/js/Pages/Outputs/Index.vue b/resources/js/Pages/Outputs/Index.vue
index 1b5d48f7..29f85c1a 100644
--- a/resources/js/Pages/Outputs/Index.vue
+++ b/resources/js/Pages/Outputs/Index.vue
@@ -12,6 +12,7 @@ import { useToast } from 'vue-toastification';
 import WebCard from "@/Pages/Outputs/WebPage/Components/Card.vue";
 import EmailCard from "@/Pages/Outputs/EmailOutput/Components/Card.vue";
 import ApiCard from "@/Pages/Outputs/ApiOutput/Components/Card.vue";
+import CalendarCard from "@/Pages/Outputs/Calendar/Components/Card.vue";
 import EmailReplyOutput from "@/Pages/Outputs/EmailReplyOutput/Components/Card.vue";
 
 const toast = useToast();
@@ -69,6 +70,7 @@ const props = defineProps({
                             <WebCard v-if="output.type === 'web_page'" :output="output"/>
                             <EmailReplyOutput v-if="output.type === 'email_reply_output'" :output="output"/>
                             <ApiCard v-if="output.type === 'api_output'" :output="output"/>
+                            <CalendarCard v-if="output.type === 'calendar_output'" :output="output"/>
                         </template>
                     </div>
                   </div>
diff --git a/routes/web.php b/routes/web.php
index 0d74678c..17c44033 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -43,7 +43,6 @@
         Route::get('/calendar/{collection}', 'show')->name('calendar.show');
     });
 
-
     Route::get('/auth/google', [\App\Http\Controllers\GoogleController::class, 'redirectToGoogle'])
         ->name('auth.google');
     Route::get('/auth/google/callback', [\App\Http\Controllers\GoogleController::class, 'handleGoogleCallback'])
@@ -248,6 +247,19 @@ function () {
         }
     );
 
+    Route::controller(\App\Http\Controllers\Outputs\CalendarOutputController::class)->group(
+        function () {
+            Route::get('/collections/{collection}/outputs/calendar/create', 'create')
+                ->name('collections.outputs.calendar_output.create');
+            Route::get('/collections/{collection}/outputs/calendar/{output:id}/edit', 'edit')
+                ->name('collections.outputs.calendar_output.edit');
+            Route::post('/collections/{collection}/outputs/calendar', 'store')
+                ->name('collections.outputs.calendar_output.store');
+            Route::put('/collections/{collection}/outputs/calendar/{output:id}/update', 'update')
+                ->name('collections.outputs.calendar_output.update');
+        }
+    );
+
     Route::controller(\App\Http\Controllers\EmailOutputController::class)->group(
         function () {
             Route::get('/collections/{collection}/outputs/email_output/create', 'create')
diff --git a/tests/Feature/Http/Controllers/CalendarControllerTest.php b/tests/Feature/Http/Controllers/CalendarControllerTest.php
index 1eb34c7b..b973caeb 100644
--- a/tests/Feature/Http/Controllers/CalendarControllerTest.php
+++ b/tests/Feature/Http/Controllers/CalendarControllerTest.php
@@ -2,8 +2,9 @@
 
 namespace Tests\Feature\Http\Controllers;
 
-use Illuminate\Foundation\Testing\RefreshDatabase;
-use Illuminate\Foundation\Testing\WithFaker;
+use App\Models\Collection;
+use App\Models\Output;
+use App\Models\User;
 use Tests\TestCase;
 
 class CalendarControllerTest extends TestCase
@@ -11,10 +12,17 @@ class CalendarControllerTest extends TestCase
     /**
      * A basic feature test example.
      */
-    public function test_example(): void
+    public function test_success(): void
     {
-        $response = $this->get('/');
+        $collection = Collection::factory()->create();
 
-        $response->assertStatus(200);
+        Output::factory()->create([
+            'collection_id' => $collection->id,
+            'type' => \App\Domains\Outputs\OutputTypeEnum::CalendarOutput,
+        ]);
+
+        $this->actingAs(User::factory()->create())->get(route('calendar.show', [
+            'collection' => $collection->id,
+        ]))->assertStatus(200);
     }
 }