diff --git a/app/Http/Controllers/ColorController.php b/app/Http/Controllers/ColorController.php
new file mode 100644
index 0000000..dcdaea7
--- /dev/null
+++ b/app/Http/Controllers/ColorController.php
@@ -0,0 +1,91 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Models\Color;
+
+class ColorController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        // List all colors
+        $colors = Color::all();
+        return view('colors.index', compact('colors'));
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        // Create a new color
+        return view('colors.create');
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        // Store a new color
+        $request->validate([
+            'name' => 'required|string|max:255',
+            'hex' => 'required|string|max:255'
+        ]);
+
+        $color = new Color();
+        $color->name = $request->name;
+        $color->hex = $request->hex;
+        $color->save();
+
+        return redirect()->route('colors.index');
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(string $id)
+    {
+        // show single color
+        $color = Color::find($id);
+        return view('colors.show', compact('color'));
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit(string $id)
+    {
+        // edit color
+        $color = Color::find($id);
+        return view('colors.edit', compact('color'));
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, string $id)
+    {
+        // update color
+        $color = Color::find($id);
+        $color->name = $request->name;
+        $color->hex = $request->hex;
+        $color->save();
+        return redirect()->route('colors.show', $color->id);
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(string $id)
+    {
+        // delete color
+        $color = Color::find($id);
+        $color->delete();
+        return redirect()->route('colors.index');
+    }
+}
diff --git a/app/Http/Controllers/FilamentController.php b/app/Http/Controllers/FilamentController.php
new file mode 100644
index 0000000..de51503
--- /dev/null
+++ b/app/Http/Controllers/FilamentController.php
@@ -0,0 +1,64 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class FilamentController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        //
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(string $id)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit(string $id)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, string $id)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(string $id)
+    {
+        //
+    }
+}
diff --git a/resources/views/colors/create.blade.php b/resources/views/colors/create.blade.php
new file mode 100644
index 0000000..18f95cb
--- /dev/null
+++ b/resources/views/colors/create.blade.php
@@ -0,0 +1,36 @@
+<x-app-layout>
+    <x-slot name="header">
+        {{ __('Create Colors') }}
+    </x-slot>
+
+    <x-slot name="headeraction">
+        <div class="flex gap-4 justify-end">
+          <a href="{{ route('colors.index') }}" class=" text-zinc-50 hover:text-zinc-300 font-bold text-base py-2 px-4 rounded cursor-pointer">Back</a>
+          <a href="{{ route('colors.store') }}" onclick="event.preventDefault(); document.getElementById('create-color-form').submit();" class="bg-green-500 hover:bg-green-700 text-zinc-700 hover:text-white font-bold text-base py-2 px-4 rounded cursor-pointer">Submit</a>
+        </div>
+      </x-slot>
+    
+
+  <div class="py-12">
+      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+          <div class="bg-white dark:bg-zinc-700 p-4 overflow-hidden shadow-xl sm:rounded-lg">
+              <form id="create-color-form" class="flex flex-col gap-6" method="POST" action="{{ route('colors.store') }}">
+                @csrf
+                <div class="form-group flex flex-col">
+                    <label for="name" class="text-lg ">Name</label>
+                    <input type="text" id="name" name="name" class="form-control bg-white dark:bg-zinc-800 border-zinc-50 dark:border-zinc-600 rounded" required="">
+                  </div>
+        
+                  <div class="form-group flex flex-col">
+                    <label for="name" class="text-lg ">Hex Code</label>
+                    <input type="text" id="hex" name="hex" class="form-control bg-white dark:bg-zinc-800 border-zinc-50 dark:border-zinc-600 rounded" required="">
+                  </div>
+                  <div class="flex justify-end gap-4">
+                    <a href="{{ route('colors.index') }}" class="bg-zinc-500 hover:bg-zinc-700 text-zinc-800 hover:text-white font-bold py-2 px-4 rounded cursor-pointer">Cancel</a>
+                    <button type="submit" class="bg-green-500 hover:bg-green-700 text-zinc-800 hover:text-white font-bold py-2 px-4 rounded cursor-pointer">Submit</button>
+                  </div>
+              </form>
+          </div>
+      </div>
+  </div>
+</x-app-layout>
diff --git a/resources/views/colors/edit.blade.php b/resources/views/colors/edit.blade.php
new file mode 100644
index 0000000..94c252d
--- /dev/null
+++ b/resources/views/colors/edit.blade.php
@@ -0,0 +1,31 @@
+<x-app-layout>
+  <x-slot name="header">
+      {{ __('Edit Colors') }}
+  </x-slot>
+  
+
+<div class="py-12">
+    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+        <div class="bg-white dark:bg-zinc-700 p-4 overflow-hidden shadow-xl sm:rounded-lg">
+            <form id="update-color-form" class="flex flex-col gap-6" method="POST" action="{{ route('colors.update', $color->id) }}">
+              @csrf
+              @method('PUT')
+              <div class="form-group flex flex-col">
+                  <label for="name" class="text-lg ">Name</label>
+                  <input type="text" id="name" name="name" class="form-control bg-white dark:bg-zinc-800 border-zinc-50 dark:border-zinc-600 rounded" required="" value="{{ $color->name }}">
+                </div>
+      
+                <div class="form-group flex flex-col">
+                  <label for="name" class="text-lg ">Hex Code</label>
+                  <input type="text" id="hex" name="hex" class="form-control bg-white dark:bg-zinc-800 border-zinc-50 dark:border-zinc-600 rounded" required="" value="{{ $color->hex }}">
+                </div>
+        
+                <div class="flex justify-end gap-4">
+                  <a href="{{ route('colors.index') }}" class="bg-zinc-500 hover:bg-zinc-700 text-zinc-800 hover:text-white font-bold py-2 px-4 rounded cursor-pointer">Cancel</a>
+                  <button type="submit" class="bg-green-500 hover:bg-green-700 text-zinc-800 hover:text-white font-bold py-2 px-4 rounded cursor-pointer">Submit</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+</x-app-layout>
diff --git a/resources/views/colors/index.blade.php b/resources/views/colors/index.blade.php
new file mode 100644
index 0000000..01bd752
--- /dev/null
+++ b/resources/views/colors/index.blade.php
@@ -0,0 +1,30 @@
+<x-app-layout>
+  <x-slot name="header">
+          {{ __('Colors') }}
+  </x-slot>
+
+  <x-slot name="headeraction">
+    <div class="flex gap-4 justify-end">
+      <a href="{{ route('colors.create') }}" class="bg-zinc-500 hover:bg-green-500 text-zinc-50 hover:text-zinc-700 font-bold text-base py-2 px-4 rounded cursor-pointer">Create</a>
+    </div>
+  </x-slot>
+
+  <div class="py-12">
+      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+          <div class="bg-white dark:bg-zinc-700 overflow-hidden shadow-xl sm:rounded-lg">
+            <ul class="">
+              <li class="flex gap-6  bg-zinc-50 dark:bg-zinc-900 p-2 px-4"><div class="">ID</div><div class="">Name</div><div class="">Hex Code</div><div class="">Options</div></li>
+              @foreach ($colors as $color)
+                <li class="flex gap-6 py-3 px-4 items-center">  
+                  <div class="p-2">{{ $color->id }}</div>
+                  <div class="p-2"><a href="/colors/{{ $color->id }}">{{ $color->name }}</a></div>
+                  <div class="p-2"><a href="/colors/{{ $color->id }}">{{ $color->hex }}</a></div>
+                  <div class="px-2"><a href="{{ route('colors.edit', $color->id) }}"><flux:icon.ellipsis class="hover:text-zinc-50 hover:bg-zinc-500 stroke-3 rounded "/></a></div>
+                </li>
+              @endforeach
+            </ul>
+            
+          </div>
+      </div>
+  </div>
+</x-app-layout>
diff --git a/resources/views/colors/show.blade.php b/resources/views/colors/show.blade.php
new file mode 100644
index 0000000..b6ae298
--- /dev/null
+++ b/resources/views/colors/show.blade.php
@@ -0,0 +1,31 @@
+<x-app-layout>
+  <x-slot name="header">
+    {{ $color->name }}
+  </x-slot>
+
+  <x-slot name="headeraction">
+    <div class="flex gap-4 justify-end">
+      <a href="{{ route('colors.index') }}" class=" text-zinc-50 hover:text-zinc-300 font-bold text-base py-2 px-4 rounded cursor-pointer">Back</a>
+      <a href="{{ route('colors.edit', $color->id) }}" class="bg-zinc-500 hover:bg-zinc-700 text-zinc-50 hover:text-white font-bold text-base py-2 px-4 rounded cursor-pointer">Edit</a>
+      <a href="{{ route('colors.destroy', $color->id) }}" onclick="event.preventDefault(); document.getElementById('delete-form-{{ $color->id }}').submit();" class="bg-red-500 hover:bg-red-500 text-zinc-50 hover:text-white font-bold text-base py-2 px-4 rounded cursor-pointer">Delete</a>
+    </div>
+  </x-slot>
+
+  <div class="py-12">
+      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+          <div class="bg-white dark:bg-zinc-700 overflow-hidden shadow-xl sm:rounded-lg">
+            <div class="p-4">              
+              <div class="text-lg font-bold">Hex Code</div>
+              <div class="p-4">
+                {{ $color->hex }}
+              </div>
+            </div>
+
+            <form id="delete-form-{{ $color->id }}" method="POST" action="{{ route('colors.destroy', $color->id) }}" class="hidden">
+              @csrf
+              @method('DELETE')
+            </form>
+          </div>
+      </div>
+  </div>
+</x-app-layout>
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index d2714d8..55d5440 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -9,6 +9,7 @@
     <flux:navbar.item icon="archive-box" href="#">Manufacturers</flux:navbar.item>
     <flux:navbar.item icon="circle-stack" href="#">Filaments</flux:navbar.item>
     <flux:navbar.item icon="chart-pie" href="{{ route('types.index') }}">Types</flux:navbar.item>
+    <flux:navbar.item icon="swatch" href="{{ route('colors.index') }}">Colors</flux:navbar.item>
   </flux:navbar>
 
   <flux:spacer />
diff --git a/routes/web.php b/routes/web.php
index 01985a5..5a62a2e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -2,6 +2,7 @@
 
 use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\FilamentTypeController;
+use App\Http\Controllers\ColorController;
 
 Route::get('/', function () {
     return view('welcome');
@@ -20,5 +21,7 @@ Route::middleware([
 
     // Filament Types
     Route::resource('types', FilamentTypeController::class);
+    // Colors
+    Route::resource('colors', ColorController::class);
     
 });