diff --git a/app/Http/Livewire/Form/CardForm.php b/app/Http/Livewire/Form/CardForm.php
new file mode 100644
index 0000000..535cbcd
--- /dev/null
+++ b/app/Http/Livewire/Form/CardForm.php
@@ -0,0 +1,104 @@
+<?php
+
+namespace App\Http\Livewire\Form;
+
+use App\Models\Card;
+use App\Models\Character;
+use App\Models\Raid;
+use App\Models\Wow;
+
+use App\Http\Livewire\Traits\Alert;
+
+use Livewire\Component;
+
+class CardForm extends Component
+{
+	use Alert;
+
+	/**
+	 * The card record
+	 */
+	public $card;
+
+	/**
+	 * Array of available characters
+	 */
+	public $characters;
+
+	/**
+	 * Array of available raids
+	 */
+	public $raids;
+
+	/**
+	 * True if the record already exists in the database.
+	 */
+	public bool $exist;
+
+	public function mount(Card $card)
+	{
+		$this->card = $card;
+		$this->characters = Character::all()->pluck('name', 'id');
+		$this->raids = Raid::all()->pluck('name', 'id');
+		$this->classes = Wow::$classes;
+		$this->exist = $card->exists;
+	}
+
+	/**
+	 * Validation rules
+	 */
+	protected function rules()
+	{
+		return [
+	        'card.body' => 'required|string|min:3|max:200',
+			'card.character_id' => 'exists:' . Character::class . ',id|nullable',
+			'card.raid_id' => 'exists:' . Raid::class . ',id|nullable',
+			'card.class' => 'in:' . collect($this->classes)->keys() . '|nullable',
+	    ];
+	}
+
+	public function updated($property, $value)
+    {
+		// Hack to force empty value to null.
+		if (in_array($property, ['card.character_id', 'card.raid_id', 'card.class'])) {
+			if (empty($value)) {
+				$this->{$property} = null;
+			}
+		}
+
+        $this->validateOnly($property);
+    }
+
+	/**
+	 * Returns true if this card has not been stored in the database.
+	 */
+	public function isNew() : bool
+	{
+		return !$this->exist;
+	}
+
+	/**
+	 * Submit the form, create/update card.
+	 */
+	public function submit()
+	{
+		$this->validate();
+		$this->card->save();
+
+		if ($this->isNew()) {
+			session()->flash('info', 'Card was successfully created.');
+			return redirect()->route('admin.card.index');
+		}
+
+		$this->info('Card was successfully updated.');
+	}
+
+    /**
+     * Render the setup page
+     */
+    public function render()
+    {
+        return view('form.card')
+			->layout('layouts.admin');
+    }
+}
diff --git a/resources/views/form/card.blade.php b/resources/views/form/card.blade.php
new file mode 100644
index 0000000..f1ade82
--- /dev/null
+++ b/resources/views/form/card.blade.php
@@ -0,0 +1,32 @@
+
+<div class="space-y-4">
+
+    <x-header>{{ __(($this->isNew() ? 'Create' : 'Edit') . ' card') }}</x-header>
+
+    <form class="space-y-4" wire:submit.prevent="submit">
+
+        <div>
+            <x-ignite-label for="card.body">{{ __('Body') }}</x-ignite-label>
+            <x-ignite-input name="card.body" wire:model="card.body" />
+        </div>
+
+        <div class="grid grid-cols-3 space-x-4">
+            <div>
+                <x-ignite-label for="card.raid_id">{{ __('Raid') }}</x-ignite-label>
+                <x-ignite-select name="card.raid_id" wire:model="card.raid_id" :options="$raids" placeholder="{{ __('Select a raid') }}" />
+            </div>
+            <div>
+                <x-ignite-label for="card.character_id">{{ __('Character') }}</x-ignite-label>
+                <x-ignite-select name="card.character_id" wire:model="card.character_id" :options="$characters" placeholder="{{ __('Select a character') }}" />
+            </div>
+            <div>
+                <x-ignite-label for="card.class">{{ __('Class') }}</x-ignite-label>
+                <x-ignite-select name="card.class" wire:model="card.class" :options="$classes" placeholder="{{ __('Select a class') }}" />
+            </div>
+        </div>
+
+        <x-button type="info">{{ __('Save') }}</x-button>
+        <x-button href="{{ route('admin.card.index') }}" type="warning">{{ __('Back') }}</x-button>
+    </form>
+
+</div>