diff --git a/app/Domain/Categories/Models/Category.php b/app/Domain/Categories/Models/Category.php
new file mode 100644
index 0000000..e0c2fd4
--- /dev/null
+++ b/app/Domain/Categories/Models/Category.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Domain\Categories\Models;
+
+use App\Domain\Files\Models\File;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+
+class Category extends Model
+{
+    use HasFactory;
+
+    protected $guarded = [];
+
+    public function file(): BelongsTo
+    {
+        return $this->belongsTo(File::class);
+    }
+}
diff --git a/app/Domain/Files/Actions/StoreFileAction.php b/app/Domain/Files/Actions/StoreFileAction.php
new file mode 100644
index 0000000..3004b49
--- /dev/null
+++ b/app/Domain/Files/Actions/StoreFileAction.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Domain\Files\Actions;
+
+use App\Domain\Files\Models\File;
+use Illuminate\Http\UploadedFile;
+use Intervention\Image\Facades\Image;
+use Illuminate\Support\Facades\Storage;
+
+class StoreFileAction
+{
+    public function __invoke(UploadedFile $file): File
+    {
+        $img = Image::make($file)
+            ->fit(300)
+            ->encode();
+
+        $path = $file->hashName(path: 'categories');
+
+        Storage::disk(
+            app()->environment('local')
+                ? 'public'
+                : config('filesystems.default')
+        )->put($path, $img, 'public');
+
+        return File::create([
+            'path' => app()->environment('local')
+                ? $path
+                : Storage::url($path)
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/Categories/CreateCategoryController.php b/app/Http/Controllers/Categories/CreateCategoryController.php
new file mode 100644
index 0000000..bc88ee2
--- /dev/null
+++ b/app/Http/Controllers/Categories/CreateCategoryController.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Controllers\Categories;
+
+use Inertia\Inertia;
+use App\Http\Controllers\Controller;
+
+class CreateCategoryController extends Controller
+{
+    public function __invoke()
+    {
+        return Inertia::render('Categories/CreateEdit');
+    }
+}
diff --git a/app/Http/Controllers/Categories/DeleteCategoryController.php b/app/Http/Controllers/Categories/DeleteCategoryController.php
new file mode 100644
index 0000000..a412f58
--- /dev/null
+++ b/app/Http/Controllers/Categories/DeleteCategoryController.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Http\Controllers\Categories;
+
+use App\Http\Controllers\Controller;
+use App\Domain\Categories\Models\Category;
+
+class DeleteCategoryController extends Controller
+{
+    public function __invoke(Category $category)
+    {
+        // What happens with products with this category?
+        $category->delete();
+
+        return redirect()->back()->with('success', 'Successfully deleted category!');
+    }
+}
diff --git a/app/Http/Controllers/Categories/EditCategoryController.php b/app/Http/Controllers/Categories/EditCategoryController.php
new file mode 100644
index 0000000..da1f372
--- /dev/null
+++ b/app/Http/Controllers/Categories/EditCategoryController.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Http\Controllers\Categories;
+
+use Inertia\Inertia;
+use App\Http\Controllers\Controller;
+use App\Domain\Categories\Models\Category;
+
+class EditCategoryController extends Controller
+{
+    public function __invoke(Category $category)
+    {
+        return Inertia::render('Categories/CreateEdit', [
+            'category' => $category->load('file')
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/Categories/IndexCategoryController.php b/app/Http/Controllers/Categories/IndexCategoryController.php
new file mode 100644
index 0000000..160ff59
--- /dev/null
+++ b/app/Http/Controllers/Categories/IndexCategoryController.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Http\Controllers\Categories;
+
+use Inertia\Inertia;
+use App\Http\Controllers\Controller;
+use App\Domain\Categories\Models\Category;
+
+class IndexCategoryController extends Controller
+{
+    public function __invoke()
+    {
+        return Inertia::render('Categories/Index', [
+            'categories' => Category::with('file')->get()
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/Categories/StoreCategoryController.php b/app/Http/Controllers/Categories/StoreCategoryController.php
new file mode 100644
index 0000000..01583fd
--- /dev/null
+++ b/app/Http/Controllers/Categories/StoreCategoryController.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Controllers\Categories;
+
+use App\Http\Controllers\Controller;
+use App\Domain\Categories\Models\Category;
+use App\Domain\Files\Actions\StoreFileAction;
+use App\Http\Requests\Categories\StoreCategoryRequest;
+
+class StoreCategoryController extends Controller
+{
+    public function __invoke(
+        StoreCategoryRequest $request,
+        StoreFileAction      $storeFileAction
+    ) {
+        $category = Category::create([
+            'name' => $request->input('name'),
+            'description' => $request->input('description'),
+        ]);
+
+        if ($request->file('file')) {
+            $file = $storeFileAction($request->file('file'));
+
+            $category->update([
+               'file_id' => $file->id
+            ]);
+        }
+
+        return redirect()->back()->with('success', 'Successfully created new category!');
+    }
+}
diff --git a/app/Http/Controllers/Categories/UpdateCategoryController.php b/app/Http/Controllers/Categories/UpdateCategoryController.php
new file mode 100644
index 0000000..044b772
--- /dev/null
+++ b/app/Http/Controllers/Categories/UpdateCategoryController.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Controllers\Categories;
+
+use App\Http\Controllers\Controller;
+use App\Domain\Categories\Models\Category;
+use App\Domain\Files\Actions\StoreFileAction;
+use App\Http\Requests\Categories\UpdateCategoryRequest;
+
+class UpdateCategoryController extends Controller
+{
+    public function __invoke(
+        UpdateCategoryRequest $request,
+        Category              $category,
+        StoreFileAction       $storeFileAction
+    ) {
+        $category->update([
+            'name' => $request->input('name'),
+            'description' => $request->input('description'),
+        ]);
+
+        if ($request->file('file')) {
+            $file = $storeFileAction($request->file('file'));
+
+            $category->update([
+                'file_id' => $file->id
+            ]);
+        }
+
+        return redirect()->back()->with('success', 'Successfully updated category!');
+    }
+}
diff --git a/app/Http/Requests/Categories/StoreCategoryRequest.php b/app/Http/Requests/Categories/StoreCategoryRequest.php
new file mode 100644
index 0000000..903f0fe
--- /dev/null
+++ b/app/Http/Requests/Categories/StoreCategoryRequest.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Requests\Categories;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreCategoryRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    public function rules(): array
+    {
+        return [
+            'name' => ['required'],
+            'description' => ['nullable'],
+            'file' => ['required', 'image']
+        ];
+    }
+}
diff --git a/app/Http/Requests/Categories/UpdateCategoryRequest.php b/app/Http/Requests/Categories/UpdateCategoryRequest.php
new file mode 100644
index 0000000..f9e5e18
--- /dev/null
+++ b/app/Http/Requests/Categories/UpdateCategoryRequest.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Requests\Categories;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class UpdateCategoryRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    public function rules(): array
+    {
+        return [
+            'name' => ['required'],
+            'description' => ['nullable'],
+            'file' => ['nullable', 'image']
+        ];
+    }
+}
diff --git a/database/factories/Domain/Categories/Models/CategoryFactory.php b/database/factories/Domain/Categories/Models/CategoryFactory.php
new file mode 100644
index 0000000..5701a66
--- /dev/null
+++ b/database/factories/Domain/Categories/Models/CategoryFactory.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace Database\Factories\Domain\Categories\Models;
+
+use App\Domain\Categories\Models\Category;
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class CategoryFactory extends Factory
+{
+    protected $model = Category::class;
+
+    public function definition(): array
+    {
+        return [
+            'name' => fake()->name(),
+            'description' => fake()->words(6, true),
+        ];
+    }
+}
diff --git a/database/migrations/2023_11_28_031044_create_categories_table.php b/database/migrations/2023_11_28_031044_create_categories_table.php
new file mode 100644
index 0000000..ffdd3d4
--- /dev/null
+++ b/database/migrations/2023_11_28_031044_create_categories_table.php
@@ -0,0 +1,21 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+return new class() extends Migration {
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('categories', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('file_id')->nullable();
+            $table->string('name');
+            $table->string('description');
+            $table->timestamps();
+        });
+    }
+};
diff --git a/resources/js/Components/Button/DangerButton.vue b/resources/js/Components/Button/DangerButton.vue
index cb2a73a..e7b7be6 100644
--- a/resources/js/Components/Button/DangerButton.vue
+++ b/resources/js/Components/Button/DangerButton.vue
@@ -1,6 +1,21 @@
+<script setup>
+import { Link } from '@inertiajs/vue3'
+
+defineProps({
+    href: String,
+})
+</script>
 <template>
+    <Link
+        v-if="href"
+        :href="href"
+        class="items-center my-3 px-4 py-2 my-auto bg-red-500 border rounded-md font-semibold text-sm text-white tracking-widest hover:bg-red-600 transition ease-in-out duration-150"
+    >
+        <slot />
+    </Link>
     <button
-        class="inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition ease-in-out duration-150"
+        v-else
+        class="items-center my-3 px-4 py-2 my-auto bg-red-500 border rounded-md font-semibold text-sm text-white tracking-widest hover:bg-red-600 transition ease-in-out duration-150"
     >
         <slot />
     </button>
diff --git a/resources/js/Components/Button/SecondaryButton.vue b/resources/js/Components/Button/SecondaryButton.vue
index d352d42..6c2e6f2 100644
--- a/resources/js/Components/Button/SecondaryButton.vue
+++ b/resources/js/Components/Button/SecondaryButton.vue
@@ -6,10 +6,14 @@ defineProps({
 </script>
 
 <template>
-    <Link
-        :href="href"
+    <button
         class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 tracking-widest shadow-sm hover:bg-gray-50 focus:outline-none transition ease-in-out duration-150"
     >
-        <slot />
-    </Link>
+        <Link v-if="href" :href="href">
+            <slot />
+        </Link>
+        <div>
+            <slot />
+        </div>
+    </button>
 </template>
diff --git a/resources/js/Components/Card/CategoryCard.vue b/resources/js/Components/Card/CategoryCard.vue
new file mode 100644
index 0000000..8b5b0fc
--- /dev/null
+++ b/resources/js/Components/Card/CategoryCard.vue
@@ -0,0 +1,62 @@
+<script setup>
+import { ref } from 'vue'
+import { PencilIcon, EyeIcon } from '@heroicons/vue/24/outline/index.js'
+import CreateEditCategoryModal from '@/Components/Modals/CreateEditCategoryModal.vue'
+import ShowCategoryModal from '@/Components/Modals/ShowCategoryModal.vue'
+
+defineProps({
+    category: Object,
+})
+
+const createEditState = ref(false)
+const showState = ref(false)
+
+const toggleCreateEdit = () => {
+    createEditState.value = !createEditState.value
+}
+
+const toggleShow = () => {
+    showState.value = !showState.value
+}
+</script>
+
+<template>
+    <div class="relative overflow-hidden rounded-xl shadow-sm">
+        <div>
+            <div class="self-stretch flex-grow overflow-hidden">
+                <div class="aspect-1">
+                    <img
+                        :src="category.file.path"
+                        :alt="category.name"
+                        class="w-full h-full object-cover"
+                        loading="lazy"
+                    />
+                </div>
+            </div>
+
+            <div class="absolute inset-0 flex justify-end z-30">
+                <div @click="toggleCreateEdit" class="bg-white/50 hover:bg-primary-100 p-2 h-fit">
+                    <PencilIcon class="w-6 h-6" />
+                </div>
+                <div @click="toggleShow" class="bg-white/50 hover:bg-primary-100 p-2 h-fit">
+                    <EyeIcon class="w-6 h-6" />
+                </div>
+            </div>
+            <div class="absolute inset-0 flex flex-col justify-end z-20">
+                <div
+                    class="relative text-white p-4 font-bold bg-gradient-to-b from-transparent to-black/75 z-0"
+                >
+                    <div class="text-sm z-50">{{ category.name }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <CreateEditCategoryModal
+        :state="createEditState"
+        @close="toggleCreateEdit"
+        :category="category"
+    />
+
+    <ShowCategoryModal :state="showState" @close="toggleShow" :category="category" />
+</template>
diff --git a/resources/js/Components/Categories/CreateEditCategoryForm.vue b/resources/js/Components/Categories/CreateEditCategoryForm.vue
new file mode 100644
index 0000000..bf4ed58
--- /dev/null
+++ b/resources/js/Components/Categories/CreateEditCategoryForm.vue
@@ -0,0 +1,94 @@
+<script setup>
+import { useForm, router } from '@inertiajs/vue3'
+import { computed, onMounted, ref } from 'vue'
+import PrimaryButton from '@/Components/Button/PrimaryButton.vue'
+import TextInput from '@/Components/Inputs/TextInput.vue'
+import TextAreaInput from '@/Components/Inputs/TextAreaInput.vue'
+import ImageUpload from '@/Components/Inputs/ImageUpload.vue'
+import Seperator from '@/Components/Form/Seperator.vue'
+import DangerButton from '@/Components/Button/DangerButton.vue'
+
+const props = defineProps({
+    category: {
+        type: Object,
+    },
+})
+
+const emits = defineEmits(['close'])
+
+const isEditing = computed(() => !!props.category)
+const path = props.category ? props.category.file.path : ''
+const errors = ref({})
+
+const form = useForm({
+    name: null,
+    description: null,
+    file: null,
+})
+
+const submit = () => {
+    !isEditing.value
+        ? form.post(route('categories.store'), {
+              onError: (errors) => handleError(errors),
+              onSuccess: () => handleSuccess(),
+          })
+        : form.post(route('categories.update', props.category), {
+              onError: (errors) => handleError(errors),
+              onSuccess: () => handleSuccess(),
+          })
+}
+
+const deleteCategory = () => {
+    router.delete(route('categories.delete', props.category), {
+        onBefore: () => confirm('Are you sure you want to delete this category?'),
+        onSuccess: () => handleSuccess(),
+    })
+}
+
+const handleSuccess = () => {
+    emits('close')
+}
+
+const handleError = (errs) => {
+    for (const key in errs) {
+        errors.value[key] = errs[key]
+    }
+    console.log(errors.value['name'])
+}
+
+onMounted(() => {
+    if (isEditing.value) {
+        form.name = props.category.name
+        form.description = props.category.description
+    }
+})
+</script>
+
+<template>
+    <div class="flex justify-center">
+        <form @submit.prevent="submit" class="w-3/4 my-10">
+            <Seperator>
+                <TextInput v-model="form.name" type="text" label="Name" :error="errors['name']" />
+            </Seperator>
+            <Seperator>
+                <TextAreaInput
+                    v-model="form.description"
+                    label="Description"
+                    :error="errors['description']"
+                />
+            </Seperator>
+            <Seperator>
+                <ImageUpload v-model="form.file" :current-image="path" :error="errors['file']" />
+            </Seperator>
+
+            <div class="gap-x-2 flex">
+                <PrimaryButton type="submit" as="button">
+                    {{ isEditing ? 'Update' : 'Add' }}
+                </PrimaryButton>
+                <DangerButton v-if="isEditing" as="button" @click.prevent="deleteCategory">
+                    Delete
+                </DangerButton>
+            </div>
+        </form>
+    </div>
+</template>
diff --git a/resources/js/Components/Form/Seperator.vue b/resources/js/Components/Form/Seperator.vue
new file mode 100644
index 0000000..b2ad696
--- /dev/null
+++ b/resources/js/Components/Form/Seperator.vue
@@ -0,0 +1,7 @@
+<script setup></script>
+
+<template>
+    <div class="my-4">
+        <slot />
+    </div>
+</template>
diff --git a/resources/js/Components/Inputs/ImageUpload.vue b/resources/js/Components/Inputs/ImageUpload.vue
new file mode 100644
index 0000000..fd671a9
--- /dev/null
+++ b/resources/js/Components/Inputs/ImageUpload.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { computed } from 'vue'
+import SecondaryButton from '@/Components/Button/SecondaryButton.vue'
+import InputError from '@/Components/Inputs/InputError.vue'
+
+const props = defineProps({
+    modelValue: {
+        type: [String, null, File],
+        required: true,
+    },
+    currentImage: {
+        type: String,
+        required: false,
+    },
+    error: [String, null],
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const inputVal = computed({
+    get: () => props.modelValue,
+    set: (value) => emits('update:modelValue', value),
+})
+
+const newImage = computed(() => (inputVal.value ? URL.createObjectURL(inputVal.value) : null))
+
+const handleFileChange = (event) => {
+    inputVal.value = event.target.files[0]
+}
+
+const fileUpload = () => {
+    document.getElementById('file-upload').click()
+}
+</script>
+
+<template>
+    <div class="flex items-center space-x-2">
+        <img :src="newImage ?? currentImage" class="h-24 w-24 rounded-full" />
+
+        <input
+            id="file-upload"
+            ref="image"
+            type="file"
+            accept="image/gif, image/jpeg, image/png"
+            @input="handleFileChange"
+            hidden
+        />
+
+        <SecondaryButton type="button" @click="fileUpload"> Upload</SecondaryButton>
+    </div>
+    <InputError :message="error" />
+</template>
diff --git a/resources/js/Components/Inputs/TextAreaInput.vue b/resources/js/Components/Inputs/TextAreaInput.vue
new file mode 100644
index 0000000..59e7c06
--- /dev/null
+++ b/resources/js/Components/Inputs/TextAreaInput.vue
@@ -0,0 +1,39 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import InputLabel from '@/Components/Inputs/InputLabel.vue'
+import InputError from '@/Components/Inputs/InputError.vue'
+
+defineProps({
+    modelValue: {
+        type: [String, null],
+        required: true,
+    },
+    label: String,
+    error: [String, null],
+})
+
+defineEmits(['update:modelValue'])
+
+const input = ref(null)
+
+onMounted(() => {
+    if (input.value.hasAttribute('autofocus')) {
+        input.value.focus()
+    }
+})
+
+defineExpose({ focus: () => input.value.focus() })
+</script>
+
+<template>
+    <InputLabel>
+        {{ label }}
+    </InputLabel>
+    <textarea
+        ref="input"
+        class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm w-full"
+        :value="modelValue"
+        @input="$emit('update:modelValue', $event.target.value)"
+    />
+    <InputError :message="error" />
+</template>
diff --git a/resources/js/Components/Inputs/TextInput.vue b/resources/js/Components/Inputs/TextInput.vue
index 0d6d986..9d14645 100644
--- a/resources/js/Components/Inputs/TextInput.vue
+++ b/resources/js/Components/Inputs/TextInput.vue
@@ -1,11 +1,17 @@
 <script setup>
 import { onMounted, ref } from 'vue'
+import InputLabel from '@/Components/Inputs/InputLabel.vue'
+import InputError from '@/Components/Inputs/InputError.vue'
 
 defineProps({
     modelValue: {
-        type: String,
+        type: [String, null],
         required: true,
     },
+    type: String,
+    placeholder: String,
+    label: String,
+    error: [String, null],
 })
 
 defineEmits(['update:modelValue'])
@@ -22,10 +28,21 @@ defineExpose({ focus: () => input.value.focus() })
 </script>
 
 <template>
-    <input
-        class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
-        :value="modelValue"
-        @input="$emit('update:modelValue', $event.target.value)"
-        ref="input"
-    />
+    <div>
+        <InputLabel v-if="label">
+            {{ label }}
+        </InputLabel>
+
+        <div class="mt-1 rounded-md">
+            <input
+                class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm w-full"
+                :value="modelValue"
+                :type="type"
+                @input="$emit('update:modelValue', $event.target.value)"
+                ref="input"
+            />
+        </div>
+
+        <InputError :message="error" />
+    </div>
 </template>
diff --git a/resources/js/Components/Modals/BaseModal.vue b/resources/js/Components/Modals/BaseModal.vue
new file mode 100644
index 0000000..d1ff665
--- /dev/null
+++ b/resources/js/Components/Modals/BaseModal.vue
@@ -0,0 +1,80 @@
+<script setup>
+import { XMarkIcon } from '@heroicons/vue/24/outline'
+import {
+    TransitionRoot,
+    TransitionChild,
+    Dialog,
+    DialogPanel,
+    DialogTitle,
+    DialogDescription,
+} from '@headlessui/vue'
+
+const props = defineProps({
+    state: Boolean,
+})
+
+const emits = defineEmits(['close'])
+
+const closeModal = () => {
+    emits('close')
+}
+</script>
+
+<template>
+    <TransitionRoot appear :show="state" as="template">
+        <Dialog as="div" @close="closeModal" class="relative z-40">
+            <TransitionChild
+                as="template"
+                enter="duration-300 ease-out"
+                enter-from="opacity-0"
+                enter-to="opacity-100"
+                leave="duration-200 ease-in"
+                leave-from="opacity-100"
+                leave-to="opacity-0"
+            >
+                <div class="fixed inset-0 bg-black/25" />
+            </TransitionChild>
+
+            <div class="fixed inset-0 overflow-y-auto">
+                <div class="flex min-h-full items-center justify-center p-4 text-center">
+                    <TransitionChild
+                        as="template"
+                        enter="duration-300 ease-out"
+                        enter-from="opacity-0 scale-95"
+                        enter-to="opacity-100 scale-100"
+                        leave="duration-200 ease-in"
+                        leave-from="opacity-100 scale-100"
+                        leave-to="opacity-0 scale-95"
+                    >
+                        <div class="fixed inset-0 w-screen overflow-y-auto">
+                            <div class="flex min-h-full items-center justify-center p-4">
+                                <DialogPanel
+                                    class="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all"
+                                >
+                                    <DialogTitle
+                                        as="h3"
+                                        class="text-lg font-medium leading-6 text-gray-900"
+                                    >
+                                        <div class="flex">
+                                            <slot name="title" />
+
+                                            <div class="ml-auto" @click="closeModal">
+                                                <XMarkIcon
+                                                    class="w-8 h-8 text-black cursor-pointer"
+                                                />
+                                            </div>
+                                        </div>
+                                    </DialogTitle>
+
+                                    <DialogDescription>
+                                        <slot name="content" />
+                                    </DialogDescription>
+                                </DialogPanel>
+                            </div>
+                        </div>
+                    </TransitionChild>
+                </div>
+            </div>
+        </Dialog>
+    </TransitionRoot>
+</template>
diff --git a/resources/js/Components/Modals/CreateEditCategoryModal.vue b/resources/js/Components/Modals/CreateEditCategoryModal.vue
new file mode 100644
index 0000000..49df13d
--- /dev/null
+++ b/resources/js/Components/Modals/CreateEditCategoryModal.vue
@@ -0,0 +1,28 @@
+<script setup>
+import CreateEditCategoryForm from '@/Components/Categories/CreateEditCategoryForm.vue'
+import BaseModal from '@/Components/Modals/BaseModal.vue'
+
+const props = defineProps({
+    state: Boolean,
+    category: Object,
+})
+
+const emits = defineEmits(['close'])
+
+const title = props.category ? 'Edit ' + props.category.name : 'Create'
+
+const closeModal = () => {
+    emits('close')
+}
+</script>
+
+<template>
+    <BaseModal :state="state" @close="closeModal">
+        <template #title>
+            {{ title }}
+        </template>
+        <template #content>
+            <CreateEditCategoryForm :category="category" @close="closeModal" />
+        </template>
+    </BaseModal>
+</template>
diff --git a/resources/js/Components/Modals/ShowCategoryModal.vue b/resources/js/Components/Modals/ShowCategoryModal.vue
new file mode 100644
index 0000000..f1f8cff
--- /dev/null
+++ b/resources/js/Components/Modals/ShowCategoryModal.vue
@@ -0,0 +1,30 @@
+<script setup>
+import BaseModal from '@/Components/Modals/BaseModal.vue'
+
+const props = defineProps({
+    state: Boolean,
+    category: Object,
+})
+
+const emits = defineEmits(['close'])
+
+const closeModal = () => {
+    emits('close')
+}
+</script>
+
+<template>
+    <BaseModal :state="state" @close="closeModal">
+        <template #content>
+            <div class="grid sm:grid-cols-2 gap-x-6 mt-2">
+                <div class="px-6">
+                    <img :src="category.file.path" class="shadow-md rounded-md" />
+                </div>
+                <div class="mt-4">
+                    <h1 class="text-2xl text-black font-medium">{{ category.name }}</h1>
+                    <p class="text-gray-400 leading-6">{{ category.description }}</p>
+                </div>
+            </div>
+        </template>
+    </BaseModal>
+</template>
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index 2488858..d2db251 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -10,6 +10,7 @@ import {
     UsersIcon,
     XMarkIcon,
 } from '@heroicons/vue/24/outline'
+import Notification from '@/Components/Notification.vue'
 
 const sidebarOpen = ref(false)
 const navigation = [
@@ -20,7 +21,12 @@ const navigation = [
         current: route().current('dashboard'),
     },
     { name: 'Products', href: '#', icon: RectangleGroupIcon, current: false },
-    { name: 'Categories', href: '#', icon: TagIcon, current: false },
+    {
+        name: 'Categories',
+        href: route('categories.index'),
+        icon: TagIcon,
+        current: route().current('categories.*'),
+    },
     { name: 'Sales', href: '#', icon: FolderIcon, current: false },
     { name: 'Users', href: '#', icon: UsersIcon, current: false },
 ]
@@ -75,7 +81,7 @@ const navigation = [
                             </TransitionChild>
                             <!-- Sidebar component, swap this element with another sidebar if you like -->
                             <div
-                                class="flex grow flex-col gap-y-5 overflow-y-auto bg-white px-6 pb-2"
+                                class="flex grow flex-col gap-y-5 overflow-y-auto bg-primary-500 px-6 pb-2"
                             >
                                 <div class="flex h-16 shrink-0 items-center"></div>
                                 <nav class="flex flex-1 flex-col">
@@ -117,7 +123,9 @@ const navigation = [
         </TransitionRoot>
 
         <!-- Static sidebar for desktop -->
-        <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
+        <div
+            class="hidden lg:fixed lg:inset-y-0 lg:z-40 lg:flex lg:w-72 lg:flex-col bg-primary-500"
+        >
             <div class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 px-6">
                 <div class="flex h-16 shrink-0 items-center"></div>
                 <nav class="flex flex-1 flex-col">
@@ -129,8 +137,8 @@ const navigation = [
                                         :href="item.href"
                                         :class="[
                                             item.current
-                                                ? 'bg-gray-50 text-black'
-                                                : 'text-gray-400 hover:text-black hover:bg-gray-50',
+                                                ? 'bg-gray-300 text-black'
+                                                : 'text-gray-200 hover:text-black hover:bg-gray-50',
                                             'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold',
                                         ]"
                                     >
@@ -153,7 +161,7 @@ const navigation = [
         </div>
 
         <div
-            class="sticky top-0 z-40 flex items-center gap-x-6 bg-white px-4 py-4 shadow-sm sm:px-6 lg:hidden"
+            class="sticky top-0 flex items-center gap-x-6 bg-white px-4 py-4 shadow-sm sm:px-6 lg:hidden"
         >
             <button
                 type="button"
@@ -167,8 +175,22 @@ const navigation = [
 
         <main class="py-10 lg:pl-72">
             <div class="px-4 sm:px-6 lg:px-8">
-                <slot />
+                <div class="mb-8 h-20 rounded-t-lg">
+                    <div class="rounded-md w-full h-full flex items-center">
+                        <div class="flex-grow ml-6 text-3xl sm:text-5xl font-medium">
+                            <slot name="header" />
+                        </div>
+                        <div class="flex items-center space-x-4 mr-8">
+                            <slot name="headerActions" />
+                        </div>
+                    </div>
+                </div>
+                <div class="mx-8">
+                    <slot />
+                </div>
             </div>
         </main>
     </div>
+
+    <Notification :errors="$page.props.errors" :success="$page.props.success" />
 </template>
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index 9af228f..d3cf7d5 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -44,14 +44,12 @@ const submit = () => {
                 <TextInput
                     id="email"
                     type="email"
-                    class="mt-1 block w-full"
                     v-model="form.email"
                     required
                     autofocus
                     autocomplete="username"
+                    :error="form.errors.email"
                 />
-
-                <InputError class="mt-2" :message="form.errors.email" />
             </div>
 
             <div class="mt-4">
@@ -60,13 +58,11 @@ const submit = () => {
                 <TextInput
                     id="password"
                     type="password"
-                    class="mt-1 block w-full"
                     v-model="form.password"
                     required
                     autocomplete="current-password"
+                    :error="form.errors.password"
                 />
-
-                <InputError class="mt-2" :message="form.errors.password" />
             </div>
 
             <div class="block mt-4">
diff --git a/resources/js/Pages/Categories/CreateEdit.vue b/resources/js/Pages/Categories/CreateEdit.vue
new file mode 100644
index 0000000..d9d948a
--- /dev/null
+++ b/resources/js/Pages/Categories/CreateEdit.vue
@@ -0,0 +1,19 @@
+<script setup>
+import { Head } from '@inertiajs/vue3'
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
+import CreateEditCategoryForm from '@/Components/Categories/CreateEditCategoryForm.vue'
+
+defineProps({
+    category: Object,
+})
+</script>
+
+<template>
+    <Head title="Categories" />
+
+    <AuthenticatedLayout>
+        <template #header> Create </template>
+
+        <CreateEditCategoryForm :category="category" />
+    </AuthenticatedLayout>
+</template>
diff --git a/resources/js/Pages/Categories/Index.vue b/resources/js/Pages/Categories/Index.vue
new file mode 100644
index 0000000..d923406
--- /dev/null
+++ b/resources/js/Pages/Categories/Index.vue
@@ -0,0 +1,42 @@
+<script setup>
+import { Head } from '@inertiajs/vue3'
+import { PlusIcon } from '@heroicons/vue/24/outline/index.js'
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
+import PrimaryButton from '@/Components/Button/PrimaryButton.vue'
+import CategoryCard from '@/Components/Card/CategoryCard.vue'
+import CategoryCreateEditModal from '@/Components/Modals/CreateEditCategoryModal.vue'
+import { ref } from 'vue'
+
+defineProps({
+    categories: Object,
+})
+
+const dialogState = ref(false)
+
+const toggleDialog = () => {
+    dialogState.value = !dialogState.value
+}
+</script>
+
+<template>
+    <Head title="Categories" />
+
+    <AuthenticatedLayout>
+        <template #header> Categories</template>
+
+        <div class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6">
+            <div
+                class="bg-gray-50 text-gray-400 rounded-lg p-4 justify-center hover:bg-gray-100 hover:text-gray-600 cursor-pointer"
+                @click="toggleDialog"
+            >
+                <PlusIcon class="" />
+            </div>
+        </div>
+
+        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-x-4 gap-y-4 my-6">
+            <CategoryCard v-for="category in categories" :category="category" />
+        </div>
+
+        <CategoryCreateEditModal :state="dialogState" @close="toggleDialog" />
+    </AuthenticatedLayout>
+</template>
diff --git a/resources/js/Pages/Management/Dashboard.vue b/resources/js/Pages/Management/Dashboard.vue
index fc195d2..f963358 100644
--- a/resources/js/Pages/Management/Dashboard.vue
+++ b/resources/js/Pages/Management/Dashboard.vue
@@ -1,53 +1,15 @@
 <script setup>
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
-import { Head, router } from '@inertiajs/vue3'
-import PrimaryButton from '@/Components/Button/PrimaryButton.vue'
-import { ref } from 'vue'
-
-const props = defineProps({
-    files: Object,
-    product: Object,
-})
-
-const formData = ref({
-    file: null,
-    description: '',
-})
-
-const handleFileChange = (event) => {
-    formData.value.file = event.target.files[0]
-}
-
-const submit = () => {
-    router.post(
-        route('file.store'),
-        {
-            file: formData.value.file,
-            description: formData.value.description,
-        },
-        {
-            onError: (err) => {
-                console.log(err)
-            },
-        },
-    )
-}
+import { Head } from '@inertiajs/vue3'
 </script>
 
 <template>
     <Head title="Dashboard" />
 
     <AuthenticatedLayout>
-        <div class="py-12">
-            <div class="text-gray-900 text-xl">Dashboard</div>
-            <div>This is where you can manage your online store</div>
+        <div class="text-gray-900 text-xl">Dashboard</div>
+        <div>This is where you can manage your online store</div>
 
-            <form @submit.prevent="submit">
-                <input type="text" v-model="formData.description" />
-                <br />
-                <input type="file" @change="handleFileChange" />
-                <PrimaryButton type="submit" as="button">Upload</PrimaryButton>
-            </form>
-        </div>
+        <div class="grid grid-cols-6 mt-6">What to put here?</div>
     </AuthenticatedLayout>
 </template>
diff --git a/routes/store.php b/routes/store.php
index 94024df..453b38a 100644
--- a/routes/store.php
+++ b/routes/store.php
@@ -11,5 +11,14 @@
         Route::delete('/profile', \App\Http\Controllers\Profile\DeleteProfileController::class)->name('destroy');
     });
 
+    Route::middleware('role:admin,manager')->prefix('categories')->name('categories.')->group(function () {
+        Route::get('/', \App\Http\Controllers\Categories\IndexCategoryController::class)->name('index');
+        Route::get('/create', \App\Http\Controllers\Categories\CreateCategoryController::class)->name('create');
+        Route::post('/store', \App\Http\Controllers\Categories\StoreCategoryController::class)->name('store');
+        Route::get('/edit/{category}', \App\Http\Controllers\Categories\EditCategoryController::class)->name('edit');
+        Route::post('/update/{category}', \App\Http\Controllers\Categories\UpdateCategoryController::class)->name('update');
+        Route::delete('/delete/{category}', \App\Http\Controllers\Categories\DeleteCategoryController::class)->name('delete');
+    });
+
     Route::post('/store/file', \App\Http\Controllers\Files\StoreFileController::class)->name('file.store');
 });
diff --git a/tests/Http/Controllers/Categories/DeleteCategoryTest.php b/tests/Http/Controllers/Categories/DeleteCategoryTest.php
new file mode 100644
index 0000000..cc69055
--- /dev/null
+++ b/tests/Http/Controllers/Categories/DeleteCategoryTest.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace Tests\Http\Controllers\Categories;
+
+use Tests\TestCase;
+use App\Domain\Iam\Models\User;
+use App\Domain\Categories\Models\Category;
+
+class DeleteCategoryTest extends TestCase
+{
+    protected Category $category;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->category = Category::factory()->create();
+    }
+
+    /** @test */
+    public function must_be_authenticated()
+    {
+        $this->delete(route('categories.delete', $this->category))
+            ->assertRedirect(route('login'));
+    }
+
+    /** @test */
+    public function must_be_admin_or_manager()
+    {
+        $this->actingAs(User::factory()->create())
+            ->delete(route('categories.delete', $this->category), [])
+            ->assertForbidden();
+    }
+
+    /** @test */
+    public function can_delete_category()
+    {
+        $this->actingAs(User::factory()->admin()->create())
+            ->delete(route('categories.delete', $this->category))
+            ->assertRedirect()
+            ->assertSessionHas('success', 'Successfully deleted category!');
+
+        $this->assertDatabaseMissing('categories', [
+            'name' => 'Some category',
+        ]);
+    }
+}
diff --git a/tests/Http/Controllers/Categories/StoreCategroryTest.php b/tests/Http/Controllers/Categories/StoreCategroryTest.php
new file mode 100644
index 0000000..9b1ec78
--- /dev/null
+++ b/tests/Http/Controllers/Categories/StoreCategroryTest.php
@@ -0,0 +1,78 @@
+<?php
+
+namespace Tests\Http\Controllers\Categories;
+
+use Tests\TestCase;
+use App\Domain\Iam\Models\User;
+use App\Domain\Files\Models\File;
+use Illuminate\Http\UploadedFile;
+use Illuminate\Support\Facades\Storage;
+
+class StoreCategroryTest extends TestCase
+{
+    /** @test */
+    public function must_be_authenticated()
+    {
+        $this->post(route('categories.store'))
+            ->assertRedirect(route('login'));
+    }
+
+    /** @test */
+    public function must_be_admin_or_manager()
+    {
+        $this->actingAs(User::factory()->create())
+            ->postJson(route('categories.store'), [])
+            ->assertForbidden();
+    }
+
+    /** @test */
+    public function name_is_required()
+    {
+        $this->actingAs(User::factory()->admin()->create())
+            ->postJson(route('categories.store'), [
+                'name' => null
+            ])
+            ->assertJsonValidationErrors([
+                'name' => 'The name field is required.'
+            ]);
+    }
+
+    /** @test */
+    public function file_must_be_image()
+    {
+        $this->actingAs(User::factory()->admin()->create())
+            ->postJson(route('categories.store'), [
+                'name' => 'Some category',
+                'description' => 'Some description',
+                'file' => 12345
+            ])
+            ->assertJsonValidationErrors([
+                'file' => 'The file field must be an image.'
+            ]);
+    }
+
+    /** @test */
+    public function can_store_category()
+    {
+        Storage::fake();
+
+        $file = UploadedFile::fake()->image('file.jpg');
+
+        $this->actingAs(User::factory()->admin()->create())
+            ->postJson(route('categories.store'), [
+                'name' => 'Some category',
+                'description' => 'Some description',
+                'file' => $file
+            ])
+            ->assertRedirect()
+            ->assertSessionHas('success', 'Successfully created new category!');
+
+        $file = File::first();
+
+        $this->assertDatabaseHas('categories', [
+            'name' => 'Some category',
+            'description' => 'Some description',
+            'file_id' => $file->id
+        ]);
+    }
+}
diff --git a/tests/Http/Controllers/Categories/UpdateCategoryTest.php b/tests/Http/Controllers/Categories/UpdateCategoryTest.php
new file mode 100644
index 0000000..2bd2608
--- /dev/null
+++ b/tests/Http/Controllers/Categories/UpdateCategoryTest.php
@@ -0,0 +1,88 @@
+<?php
+
+namespace Tests\Http\Controllers\Categories;
+
+use Tests\TestCase;
+use App\Domain\Iam\Models\User;
+use App\Domain\Files\Models\File;
+use Illuminate\Http\UploadedFile;
+use Illuminate\Support\Facades\Storage;
+use App\Domain\Categories\Models\Category;
+
+class UpdateCategoryTest extends TestCase
+{
+    protected Category $category;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->category = Category::factory()->create();
+    }
+
+    /** @test */
+    public function must_be_authenticated()
+    {
+        $this->post(route('categories.update', $this->category))
+            ->assertRedirect(route('login'));
+    }
+
+    /** @test */
+    public function must_be_admin_or_manager()
+    {
+        $this->actingAs(User::factory()->create())
+            ->postJson(route('categories.update', $this->category), [])
+            ->assertForbidden();
+    }
+
+    /** @test */
+    public function name_is_required()
+    {
+        $this->actingAs(User::factory()->admin()->create())
+            ->postJson(route('categories.update', $this->category), [
+                'name' => null
+            ])
+            ->assertJsonValidationErrors([
+                'name' => 'The name field is required.'
+            ]);
+    }
+
+    /** @test */
+    public function file_must_be_image()
+    {
+        $this->actingAs(User::factory()->admin()->create())
+            ->postJson(route('categories.update', $this->category), [
+                'name' => 'Some category',
+                'description' => 'Some description',
+                'file' => 12345
+            ])
+            ->assertJsonValidationErrors([
+                'file' => 'The file field must be an image.'
+            ]);
+    }
+
+    /** @test */
+    public function can_update_category()
+    {
+        Storage::fake();
+
+        $file = UploadedFile::fake()->image('file.jpg');
+
+        $this->actingAs(User::factory()->admin()->create())
+            ->postJson(route('categories.update', $this->category), [
+                'name' => 'Some category',
+                'description' => 'Some description',
+                'file' => $file
+            ])
+            ->assertRedirect()
+            ->assertSessionHas('success', 'Successfully updated category!');
+
+        $file = File::first();
+
+        $this->assertDatabaseHas('categories', [
+            'name' => 'Some category',
+            'description' => 'Some description',
+            'file_id' => $file->id
+        ]);
+    }
+}