diff --git a/app/Livewire/Color/Color.php b/app/Livewire/Color/Color.php
index de17f18..fcf4fd0 100644
--- a/app/Livewire/Color/Color.php
+++ b/app/Livewire/Color/Color.php
@@ -3,10 +3,7 @@
 namespace App\Livewire\Color;
 
 use App\Models\Color as ColorModel;
-use Flux\Flux;
-use Illuminate\Support\Facades\Auth;
 use Livewire\Attributes\title;
-use Livewire\Attributes\Validate;
 use Livewire\Component;
 use Livewire\WithPagination;
 
@@ -15,104 +12,28 @@ class Color extends Component
 {
     use WithPagination;
 
-    // Validation
-    #[Validate('required')]
-    public $name = '';
-
-    #[Validate('required')]
-    public $hex = '';
-
     public $search ='';
 
-    // Edit Modal + Query
-    public $editquery = '';
-
-    public $editid = '';
-    public $deleteid = '';
-
-
-    public function create() {
-        @Auth::check();
-
-
-        // Validate
-        $this->validate();
-
-        $color = new ColorModel();
-        $color->name = $this->name;
-        $color->hex = $this->hex;
-        $color->save();
-
-        session()->flash('status', 'Color successfully created.');
-
-        // Clear the form
-        $this->reset(['name', 'hex']);
-
-        // Close the modal
-        Flux::modal('createModal')->close();
+    public function create(){
+        return $this->redirectRoute('color.create', navigate: true);
     }
 
-    public function edit($colorid) {
-        @Auth::check();
-
-        $editid = $colorid;
-        $this->editid = $editid;
-
-        $color =ColorModel::findOrFail($editid);
-
-        $this->name = $color->name;
-        $this->hex = $color->hex;
-
-        Flux::modal('editModal')->show();
+    public function edit($id){
+        return $this->redirectRoute('color.edit', $id, navigate: true);
     }
 
-    public function save($editid) {
-        @Auth::check();
-
-        $color = ColorModel::findOrFail($editid);
-        $color->name = $this->name;
-        $color->hex = $this->hex;
-        $color->save();
-
-        session()->flash('status', 'Color successfully updated.');
-
-        Flux::modal('editModal')->close();
+    public function show($id){
+        return $this->redirectRoute('color.show', $id, navigate: true);
     }
 
-    public function deleteModal($colorid) {
-        @Auth::check();
-
-        $deleteid = $colorid;
-        $this->deleteid = $deleteid;
-
-        $color = ColorModel::findOrFail($colorid);
-        $this->name = $color->name;
-        $this->hex = $color->hex;
-
-        Flux::modal('deleteModal')->show();
-    }
-    public function delete($deleteid) {
-        @Auth::check();
-
-        $color = ColorModel::findOrFail($deleteid)->delete();
-
-        $this->deleteid = $deleteid;
-        Flux::modal('deleteModal')->close();
-
-        // Clear the form
-        $this->reset(['name', 'hex', 'deleteid']);
-
-        session()->flash('status', 'Color successfully deleted.');
+    public function delete($id){
+        ColorModel::destroy($id);
     }
 
-    public function cancel() {
-        $this->reset(['name', 'hex', 'deleteid']);
-        Flux::modals()->close();
-    }
     public function render()
     {
         return view('livewire.color.index', [
-            'colors' => ColorModel::search('name', $this->search)->paginate(20)
+            'colors' => ColorModel::search('name', $this->search)->paginate(10)
         ]);
     }
 }
diff --git a/app/Livewire/Color/CreateColor.php b/app/Livewire/Color/CreateColor.php
new file mode 100644
index 0000000..90a0ebe
--- /dev/null
+++ b/app/Livewire/Color/CreateColor.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Livewire\Color;
+
+use App\Models\Color as Model;
+use Livewire\Attributes\title;
+use Livewire\Component;
+
+#[title('Colors')]
+class CreateColor extends Component
+{
+
+    public Model $color ;
+
+    public string $name = '';
+    public string $hex = '';
+
+    public function save(){
+        $this->validate([
+            'name' => ['required', 'string', 'max:255'],
+            'hex' => ['required', 'string', 'size:6', 'regex:/^[0-9A-F]{6}$/'],
+        ]);
+
+        $color = new Model();
+        $color->name = $this->name;
+        $color->hex = $this->hex;
+        $color->save();
+
+        return $this->redirectRoute('color.show', $color->id, navigate: true);
+    }
+
+    public function cancel(){
+        return $this->redirectRoute('color.index', navigate: true);
+    }
+
+    public function render()
+    {
+        return view('livewire.color.create', [
+        ]);
+    }
+}
diff --git a/app/Livewire/Color/EditColor.php b/app/Livewire/Color/EditColor.php
new file mode 100644
index 0000000..9d732c2
--- /dev/null
+++ b/app/Livewire/Color/EditColor.php
@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Livewire\Color;
+
+use App\Models\Color as Model;
+use Livewire\Attributes\title;
+use Livewire\Attributes\Validate;
+use Livewire\Component;
+
+#[title('Colors')]
+class EditColor extends Component
+{
+    public Model $color;
+
+    public string $name = '';
+    public string $hex = '';
+
+    public function mount(Model $color){
+        $this->color = $color;
+        $this->name = $color->name;
+        $this->hex = $color->hex;
+    }
+
+    #[Validate('required')]
+    public function save(){
+        $this->validate([
+            'name' => ['required', 'string', 'max:255'],
+            'hex' => ['required', 'string', 'size:6', 'regex:/^[0-9A-F]{6}$/'],
+        ]);
+
+        $this->color->update([
+            'name' => $this->name,
+            'hex' => $this->hex,
+        ]);
+
+        return $this->redirectRoute('color.show', $this->color->id, navigate: true);
+    }
+
+    public function cancel(){
+        return $this->redirectRoute('color.index', navigate: true);
+    }
+
+    public function render()
+    {
+        return view('livewire.color.edit', [
+        ]);
+    }
+}
diff --git a/app/Livewire/Color/ShowColor.php b/app/Livewire/Color/ShowColor.php
new file mode 100644
index 0000000..4bc0f6f
--- /dev/null
+++ b/app/Livewire/Color/ShowColor.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Livewire\Color;
+
+use App\Models\Color as Model;
+use Livewire\Attributes\title;
+use Livewire\Component;
+
+#[title('Colors')]
+class ShowColor extends Component
+{
+    public Model $color;
+
+    public function mount(Model $color){
+        $this->color = $color;
+    }
+
+    public function edit($id){
+        return $this->redirectRoute('color.edit', $id, navigate: true);
+    }
+
+    public function back(){
+        return $this->redirectRoute('color.index', navigate: true);
+    }
+
+    public function render()
+    {
+        return view('livewire.color.show', [
+        ]);
+    }
+}
diff --git a/app/Livewire/Dashboard.php b/app/Livewire/Dashboard.php
index d587ae8..78fdf52 100644
--- a/app/Livewire/Dashboard.php
+++ b/app/Livewire/Dashboard.php
@@ -12,7 +12,7 @@ class Dashboard extends Component
     public function render()
     {
         return view('livewire.dashboard', [
-            'manufacturer' => Manufacturer::all()->sortBy('filament_count')->reverse()
+            'manufacturers' => Manufacturer::all()->sortBy('filament_count')->reverse()
         ]);
     }
 }
diff --git a/app/Livewire/Type/CreateType.php b/app/Livewire/Type/CreateType.php
index 60cf3e5..cec8cd9 100644
--- a/app/Livewire/Type/CreateType.php
+++ b/app/Livewire/Type/CreateType.php
@@ -34,11 +34,11 @@ class CreateType extends Component
         $type->description = $this->description;
         $type->save();
 
-        return redirect()->route('type.index');
+        return $this->redirectRoute('type.show', $type->id, navigate: true);
     }
 
     public function cancel(){
-        return redirect()->route('type.index');
+        return $this->redirectRoute('type.index', navigate: true);
     }
     public function render()
     {
diff --git a/app/Livewire/Type/EditType.php b/app/Livewire/Type/EditType.php
index 3655d17..c8270c4 100644
--- a/app/Livewire/Type/EditType.php
+++ b/app/Livewire/Type/EditType.php
@@ -2,8 +2,7 @@
 
 namespace App\Livewire\Type;
 
-use App\Models\FilamentType;
-use Illuminate\Support\Facades\Auth;
+use App\Models\FilamentType as Model;
 use Livewire\Attributes\title;
 use Livewire\Attributes\Validate;
 use Livewire\Component;
@@ -11,29 +10,41 @@ use Livewire\Component;
 #[title('Types')]
 class EditType extends Component
 {
-    public FilamentType $type;
+    public Model $type;
+
+    public string $name = '';
+    public string $description = '';
+
+    public function mount(Model $type)
+    {
+        $this->type = $type;
+        $this->name = $type->name;
+        $this->description = $type->description;
+    }
 
     // Validation
     #[Validate('required')]
-
-    public function save() {
+    public function save()
+    {
         $this->validate([
             'type.name' => ['required', 'string', 'max:255'],
             'type.description' => ['nullable', 'string'],
         ]);
 
-        $this->type->save();
+        $this->type->update([
+            'name' => $this->name,
+            'description' => $this->description,
+        ]);
 
-        return redirect()->route('type.show', $this->type->id );
+
+        return $this->redirectRoute('type.show', $this->type->id, navigate: true);
     }
 
-    public function cancel(){
-        return redirect()->route('type.index');
+    public function cancel()
+    {
+        return $this->redirectRoute('type.index', navigate: true);
     }
 
-    public function mount(FilamentType $type){
-        $this->type = $type;
-    }
     public function render()
     {
         return view('livewire.type.edit', [
diff --git a/app/Livewire/Type/ShowType.php b/app/Livewire/Type/ShowType.php
index aa4ce4a..e716745 100644
--- a/app/Livewire/Type/ShowType.php
+++ b/app/Livewire/Type/ShowType.php
@@ -16,11 +16,11 @@ class ShowType extends Component
     public FilamentType $type;
 
     public function back(){
-        return redirect()->route('type.index');
+        return $this->redirectRoute('type.index', navigate: true);
     }
 
     public function edit($id){
-        return redirect()->route('type.edit', $id);
+        return $this->redirectRoute('type.edit', $id, navigate: true);
     }
 
     public function mount(FilamentType $type){
diff --git a/app/Livewire/Type/Type.php b/app/Livewire/Type/Type.php
index e89c65f..ca12693 100644
--- a/app/Livewire/Type/Type.php
+++ b/app/Livewire/Type/Type.php
@@ -20,15 +20,19 @@ class Type extends Component
     // Validation
     #[Validate('required')]
 
-    public function create() {
-        @Auth::check();
-        return redirect()->route('type.create');
+    public function create()
+    {
+        return $this->redirectRoute('type.create', navigate: true);
     }
-    public function edit($id){
-        return redirect()->route('type.edit', $id);
+
+    public function edit($id)
+    {
+        return $this->redirectRoute('type.edit', $id, navigate: true);
     }
-    public function show($id){
-        return redirect()->route('type.show', $id);
+
+    public function show($id)
+    {
+        return $this->redirectRoute('type.show', $id, navigate: true);
     }
     public function delete($id){
         @Auth::check();
diff --git a/app/Models/Color.php b/app/Models/Color.php
index ae71207..a4c4094 100644
--- a/app/Models/Color.php
+++ b/app/Models/Color.php
@@ -15,17 +15,5 @@ class Color extends Model
         'hex'
     ];
 
-    // Color has many filaments
-    public function filaments()
-    {
-        return $this->hasMany(Filament::class);
-    }
-
-    // Color has many filament type
-    public function filamentTypes()
-    {
-        return $this->hasMany(FilamentType::class);
-    }
-
 
 }
diff --git a/database/migrations/2025_03_10_182844_create_colors.php b/database/migrations/2025_03_10_182844_create_colors.php
index ae41f5b..ad8b28a 100644
--- a/database/migrations/2025_03_10_182844_create_colors.php
+++ b/database/migrations/2025_03_10_182844_create_colors.php
@@ -11,7 +11,7 @@ return new class extends Migration
      */
     public function up(): void
     {
-        Schema::create('color', function (Blueprint $table) {
+        Schema::create('colors', function (Blueprint $table) {
             $table->id();
             $table->string('name')->required();
             $table->string('hex')->required();
diff --git a/database/migrations/2025_03_10_182903_create_manufacturers.php b/database/migrations/2025_03_10_182903_create_manufacturers.php
index c0d814c..3a71ea2 100644
--- a/database/migrations/2025_03_10_182903_create_manufacturers.php
+++ b/database/migrations/2025_03_10_182903_create_manufacturers.php
@@ -11,7 +11,7 @@ return new class extends Migration
      */
     public function up(): void
     {
-        Schema::create('manufacturer', function (Blueprint $table) {
+        Schema::create('manufacturers', function (Blueprint $table) {
             $table->id();
             $table->string('name')->required();
             $table->string('description')->nullable();
diff --git a/database/migrations/2025_03_10_183058_create_filaments.php b/database/migrations/2025_03_10_183058_create_filaments.php
index 9d33fcf..cb5fa20 100644
--- a/database/migrations/2025_03_10_183058_create_filaments.php
+++ b/database/migrations/2025_03_10_183058_create_filaments.php
@@ -13,13 +13,14 @@ return new class extends Migration
     {
         Schema::create('filaments', function (Blueprint $table) {
             $table->id();
-            $table->string('name')->required();
+            $table->string('name');
             $table->string('description')->nullable();
-            $table->foreignId('color_id')->constrained()->onUpdate('cascade')->onDelete('cascade');
-            $table->foreignId('manufacturer_id')->constrained()->onUpdate('cascade')->onDelete('cascade');;
-            $table->foreignId('filament_type_id')->constrained()->onUpdate('cascade')->onDelete('cascade');;
-            $table->integer('weight')->required();
-            $table->decimal('diameter', 10, 2)->required();
+            // Foreign keys pointing to existing tables with non-standard names
+            $table->foreignId('color_id')->constrained('colors')->onUpdate('cascade')->onDelete('cascade');
+            $table->foreignId('manufacturer_id')->constrained('manufacturers')->onUpdate('cascade')->onDelete('cascade');
+            $table->foreignId('filament_type_id')->constrained('filament_types')->onUpdate('cascade')->onDelete('cascade');
+            $table->integer('weight');
+            $table->decimal('diameter', 10, 2);
             $table->decimal('price', 10, 2)->nullable();
             $table->string('finish')->nullable();
             $table->string('image')->nullable();
diff --git a/database/migrations/2025_03_15_185700_create_buildplates_table.php b/database/migrations/2025_03_15_185700_create_buildplates_table.php
index 8872e30..e58e012 100644
--- a/database/migrations/2025_03_15_185700_create_buildplates_table.php
+++ b/database/migrations/2025_03_15_185700_create_buildplates_table.php
@@ -11,13 +11,12 @@ return new class extends Migration
      */
     public function up(): void
     {
-        Schema::create('buildplate', function (Blueprint $table) {
+        Schema::create('buildplates', function (Blueprint $table) {
             $table->id();
             $table->string('name');
             $table->string('description');
-            $table->foreignId('manufacturer_id')->constrained();
+            $table->foreignId('manufacturer_id')->constrained('manufacturers');
             $table->string('temp_max');
-            $table->string('amount');
             $table->timestamps();
         });
     }
diff --git a/database/seeders/ColorSeeder.php b/database/seeders/ColorSeeder.php
index 2fe0b0e..8056a84 100644
--- a/database/seeders/ColorSeeder.php
+++ b/database/seeders/ColorSeeder.php
@@ -15,20 +15,20 @@ class ColorSeeder extends Seeder
     {
         // Seed predefined Colors
         $colors = [
-            ['name' => 'Red', 'hex' => '#FF0000'],
-            ['name' => 'Green', 'hex' => '#00FF00'],
-            ['name' => 'Blue', 'hex' => '#0000FF'],
-            ['name' => 'Yellow', 'hex' => '#FFFF00'],
-            ['name' => 'Orange', 'hex' => '#FFA500'],
-            ['name' => 'Purple', 'hex' => '#800080'],
-            ['name' => 'Pink', 'hex' => '#FFC0CB'],
-            ['name' => 'Brown', 'hex' => '#A52A2A'],
-            ['name' => 'Gray', 'hex' => '#808080'],
-            ['name' => 'Black', 'hex' => '#000000'],
-            ['name' => 'White', 'hex' => '#FFFFFF'],
-            ['name' => 'Gold', 'hex' => '#FFD700'],
-            ['name' => 'Silver', 'hex' => '#C0C0C0'],
-            ['name' => 'Cyan', 'hex' => '#00FFFF']
+            ['name' => 'Red', 'hex' => 'FF0000'],
+            ['name' => 'Green', 'hex' => '00FF00'],
+            ['name' => 'Blue', 'hex' => '0000FF'],
+            ['name' => 'Yellow', 'hex' => 'FFFF00'],
+            ['name' => 'Orange', 'hex' => 'FFA500'],
+            ['name' => 'Purple', 'hex' => '800080'],
+            ['name' => 'Pink', 'hex' => 'FFC0CB'],
+            ['name' => 'Brown', 'hex' => 'A52A2A'],
+            ['name' => 'Gray', 'hex' => '808080'],
+            ['name' => 'Black', 'hex' => '000000'],
+            ['name' => 'White', 'hex' => 'FFFFFF'],
+            ['name' => 'Gold', 'hex' => 'FFD700'],
+            ['name' => 'Silver', 'hex' => 'C0C0C0'],
+            ['name' => 'Cyan', 'hex' => '00FFFF']
         ];
 
         foreach ($colors as $color) {
diff --git a/resources/css/app.css b/resources/css/app.css
index 19e51c1..b520f32 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -8,15 +8,18 @@
 @source '../../vendor/laravel/jetstream/**/*.blade.php';
 
 @theme {
-  --font-sans:
-    Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    --font-sans: Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
     'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
-  --color-jet: #33312e;
-  --color-pumpkin: #FE7F2D;
-  --color-sunglow: #FCCA46;
-  --color-olivine: #A1C181;
-  --color-zomp: #619B8A;
+    --color-jet: #33312e;
+    --color-pumpkin: #FE7F2D;
+    --color-olivine: #A1C181;
+
+    --color-cornflower: #8ecae6;
+    --color-pacific: #219ebc;
+    --color-elephant: #023047;
+    --color-selective: #ffb703;
+    --color-gold-drop: #fb8500;
 
     --color-jet-50: #f6f5f5;
     --color-jet-100: #e8e6e5;
@@ -54,41 +57,65 @@
     --color-olivine-900: #324027;
     --color-olivine-950: #182211;
 
-  --color-nuke-50: oklch(0.99 0.0358 117.24);
-  --color-nuke-100: oklch(0.97 0.0779 120.18);
-  --color-nuke-200: oklch(0.95 0.1412 121.89);
-  --color-nuke-300: oklch(0.93 0.2049 125.66);
-  --color-nuke-400: oklch(0.91 0.2468 130.72);
-  --color-nuke-500: oklch(0.84 0.231054 131.6647);
-  --color-nuke-600: oklch(0.71 0.197756 132.5804);
-  --color-nuke-700: oklch(0.57 0.1604 132.33);
-  --color-nuke-800: oklch(0.48 0.1306 131.73);
-  --color-nuke-900: oklch(0.43 0.112 131.31);
-  --color-nuke-950: oklch(0.29 0.0821 132.58);
+    --color-cornflower-50: #f2f9fd;
+    --color-cornflower-100: #e5f1f9;
+    --color-cornflower-200: #c5e3f2;
+    --color-cornflower-300: #8ecae6;
+    --color-cornflower-400: #58b2d8;
+    --color-cornflower-500: #3298c5;
+    --color-cornflower-600: #237ba6;
+    --color-cornflower-700: #1d6187;
+    --color-cornflower-800: #1c5370;
+    --color-cornflower-900: #1c465e;
+    --color-cornflower-950: #132d3e;
 
-  --color-etheral-50:oklch(0.98 0.019 204.85);
-  --color-etheral-100:oklch(0.95 0.0444 210.46);
-  --color-etheral-200:oklch(0.9 0.0777 214.41);
-  --color-etheral-300:oklch(0.82 0.1327 218.85);
-  --color-etheral-400:oklch(0.77 0.1401 223.63);
-  --color-etheral-500:oklch(0.68 0.1345 228.8);
-  --color-etheral-600:oklch(0.58 0.1216 233.84);
-  --color-etheral-700:oklch(0.5 0.1034 235.16);
-  --color-etheral-800:oklch(0.43 0.0843 235.25);
-  --color-etheral-900:oklch(0.38 0.0743 238.47);
-  --color-etheral-950:oklch(0.29 0.0601 239.11);
+    --color-pacific-50: #eefbfd;
+    --color-pacific-100: #d5f3f8;
+    --color-pacific-200: #b0e7f1;
+    --color-pacific-300: #7ad5e6;
+    --color-pacific-400: #3cb9d4;
+    --color-pacific-500: #219ebc;
+    --color-pacific-600: #1e7e9c;
+    --color-pacific-700: #1f657f;
+    --color-pacific-800: #215569;
+    --color-pacific-900: #204659;
+    --color-pacific-950: #102e3c;
 
-  --color-blackout-50:oklch(0.97 0 0);
-  --color-blackout-100:oklch(0.93 0 0);
-  --color-blackout-200:oklch(0.86 0 0);
-  --color-blackout-300:oklch(0.76 0 0);
-  --color-blackout-400:oklch(0.63 0 0);
-  --color-blackout-500:oklch(0.53 0 0);
-  --color-blackout-600:oklch(0.48 0 0);
-  --color-blackout-700:oklch(0.43 0 0);
-  --color-blackout-800:oklch(0.39 0 0);
-  --color-blackout-900:oklch(0.36 0 0);
-  --color-blackout-950:oklch(0.31 0 0);
+    --color-elephant-50: #effaff;
+    --color-elephant-100: #ddf5ff;
+    --color-elephant-200: #b4edff;
+    --color-elephant-300: #72e0ff;
+    --color-elephant-400: #27d2ff;
+    --color-elephant-500: #00bdfc;
+    --color-elephant-600: #0098d9;
+    --color-elephant-700: #0079af;
+    --color-elephant-800: #006690;
+    --color-elephant-900: #035477;
+    --color-elephant-950: #023047;
+
+    --color-selective-50: #fffeea;
+    --color-selective-100: #fff9c5;
+    --color-selective-200: #fff485;
+    --color-selective-300: #ffe746;
+    --color-selective-400: #ffd71b;
+    --color-selective-500: #ffb703;
+    --color-selective-600: #e28b00;
+    --color-selective-700: #bb6202;
+    --color-selective-800: #984b08;
+    --color-selective-900: #7c3e0b;
+    --color-selective-950: #481f00;
+
+    --color-gold-drop-50: #fffbec;
+    --color-gold-drop-100: #fff5d3;
+    --color-gold-drop-200: #ffe8a5;
+    --color-gold-drop-300: #ffd56d;
+    --color-gold-drop-400: #ffb732;
+    --color-gold-drop-500: #ff9f0a;
+    --color-gold-drop-600: #fb8500;
+    --color-gold-drop-700: #cc6302;
+    --color-gold-drop-800: #a14c0b;
+    --color-gold-drop-900: #82400c;
+    --color-gold-drop-950: #461e04;
 }
 
 /*
diff --git a/resources/views/components/header.blade.php b/resources/views/components/header.blade.php
index f06320a..d5a0ede 100644
--- a/resources/views/components/header.blade.php
+++ b/resources/views/components/header.blade.php
@@ -1,4 +1,4 @@
-<div class="bg-jet-900 w-full border-b border-jet-900">
+<div class="bg-elephant w-full border-b border-elephant-900">
   <div class="container mx-auto py-6 px-4 sm:px-6 lg:px-8 flex justify-between items-center">
     <x-header.header-left>
       @isset($headerleft)
diff --git a/resources/views/components/layouts/app.blade.php b/resources/views/components/layouts/app.blade.php
index 0171f45..ef8d257 100644
--- a/resources/views/components/layouts/app.blade.php
+++ b/resources/views/components/layouts/app.blade.php
@@ -22,7 +22,7 @@
 
         <title>{{ $title . ' | ' . config('app.name') ?? config('app.name') }}</title>
     </head>
-    <body class="font-sans antialiased bg-jet-950/50">
+    <body class="font-sans antialiased bg-neutral-900">
         <x-navbar />
         <div class="flex flex-row">
             <!--
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 5610f19..8d38f04 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -1,51 +1,65 @@
-<section class="bg-jet-950">
-<flux:header class="container mx-auto flex items-center">
-  <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
+<section class="bg-elephant/50">
+    <flux:header class="container mx-auto flex items-center">
+        <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left"/>
 
-  <flux:brand href="{{ route('dashboard') }}" name="FilamentApp" class="max-lg:hidden dark:hidden" />
-  <flux:brand href="{{ route('dashboard') }}" name="FilamentApp" class="max-lg:hidden! hidden dark:flex" />
+        <flux:brand href="{{ route('dashboard') }}" name="FilamentApp" class="max-lg:hidden dark:hidden"/>
+        <flux:brand href="{{ route('dashboard') }}" name="FilamentApp" class="max-lg:hidden! hidden dark:flex"/>
 
-  <flux:navbar class="-mb-px max-lg:hidden">
-    <flux:navbar.item wire:navigate icon="home" href="{{ route('dashboard') }}">Dashboard</flux:navbar.item>
-    <flux:navbar.item wire:navigate icon="shopping-bag" href="{{ route('orders.index') }}">Orders</flux:navbar.item>
+        <flux:navbar class="-mb-px max-lg:hidden">
+            <flux:navbar.item wire:navigate icon="home" href="{{ route('dashboard') }}">Dashboard</flux:navbar.item>
+            <flux:navbar.item wire:navigate icon="shopping-bag" href="{{ route('orders.index') }}">Orders
+            </flux:navbar.item>
 
 
-    <flux:dropdown >
-      <flux:navbar.item icon="circle-stack" icon-trailing="chevron-down">Filaments</flux:navbar.item>
-      <flux:navmenu class="bg-jet">
-        <flux:navmenu.item wire:navigate icon="circle-stack" href="{{ route('filaments.index') }}">All Filaments</flux:navmenu.item>
-        <flux:navmenu.separator />
-        <flux:navmenu.item wire:navigate icon="archive-box" href="{{ route('manufacturer.index') }}">Manufacturers</flux:navmenu.item>
-        <flux:navmenu.item wire:navigate icon="paint-brush" href="{{ route('color.index') }}">Colors</flux:navmenu.item>
-        <flux:navmenu.item wire:navigate icon="clipboard" href="{{ route('type.index') }}">Types</flux:navmenu.item>
-          <flux:navmenu.item wire:navigate icon="clipboard" href="{{ route('buildplate.index') }}">BuildPlates</flux:navmenu.item>
-      </flux:navmenu>
-    </flux:dropdown>
-  </flux:navbar>
+            <flux:dropdown>
+
+                <flux:navbar.item icon="circle-stack" icon-trailing="chevron-down">Database</flux:navbar.item>
+
+                <flux:navmenu class="bg-white">
+                    <flux:navmenu.item wire:navigate icon="circle-stack" href="{{ route('filaments.index') }}">All
+                        Filaments
+                    </flux:navmenu.item>
+                    <flux:navmenu.separator/>
+                    <flux:navmenu.item wire:navigate icon="archive-box" href="{{ route('manufacturer.index') }}">
+                        Manufacturers
+                    </flux:navmenu.item>
+                    <flux:navmenu.item wire:navigate icon="paint-brush" href="{{ route('color.index') }}">Colors
+                    </flux:navmenu.item>
+                    <flux:navmenu.item wire:navigate icon="clipboard" href="{{ route('type.index') }}">Types
+                    </flux:navmenu.item>
+                    <flux:navmenu.item wire:navigate icon="clipboard" href="{{ route('buildplate.index') }}">
+                        BuildPlates
+                    </flux:navmenu.item>
+                </flux:navmenu>
+            </flux:dropdown>
+        </flux:navbar>
 
 
-  <flux:spacer />
+        <flux:spacer/>
 
-  <flux:navbar class="mr-4">
-    <flux:navbar.item icon="magnifying-glass" href="#" label="Search" />
-    <flux:navbar.item class="max-lg:hidden" icon="cog-6-tooth" href="{{ route('settings.index') }}" label="Settings" />
-    <flux:separator vertical variant="subtle" class="my-2"/>
-  </flux:navbar>
+        <flux:navbar class="mr-4">
+            <flux:navbar.item icon="magnifying-glass" href="#" label="Search"/>
+            <flux:navbar.item class="max-lg:hidden" icon="cog-6-tooth" href="{{ route('settings.index') }}"
+                              label="Settings"/>
+            <flux:separator vertical variant="subtle" class="my-2"/>
+        </flux:navbar>
 
-  <flux:dropdown position="top" align="start">
-    <flux:profile avatar="{{ Auth::user()->profile_photo_url }}" />
+        <flux:dropdown position="top" align="start">
+            <flux:profile avatar="{{ Auth::user()->profile_photo_url }}"/>
 
-    <flux:menu>
-      <flux:menu.item href="{{ route('profile.show') }}" icon="user">{{ Auth::user()->name }}</flux:menu.item>
+            <flux:menu>
+                <flux:menu.item href="{{ route('profile.show') }}" icon="user">{{ Auth::user()->name }}</flux:menu.item>
 
-        <flux:menu.separator />
-        <form method="POST" action="{{ route('logout') }}" x-data>
-          @csrf
-          <flux:menu.item href="{{ route('logout') }}" icon="arrow-right-start-on-rectangle" @click.prevent="$root.submit();">Logout</flux:menu.item>
-        </form>
+                <flux:menu.separator/>
+                <form method="POST" action="{{ route('logout') }}" x-data>
+                    @csrf
+                    <flux:menu.item href="{{ route('logout') }}" icon="arrow-right-start-on-rectangle"
+                                    @click.prevent="$root.submit();">Logout
+                    </flux:menu.item>
+                </form>
 
-    </flux:menu>
-  </flux:dropdown>
+            </flux:menu>
+        </flux:dropdown>
 
-</flux:header>
+    </flux:header>
 </section>
diff --git a/resources/views/components/table.blade.php b/resources/views/components/table.blade.php
index 52097c0..24f2799 100644
--- a/resources/views/components/table.blade.php
+++ b/resources/views/components/table.blade.php
@@ -1,6 +1,6 @@
 <div>
   <table class="w-full rounded-lg">
-    <thead class="border-b border-jet-200 rounded-t-lg">
+    <thead class="border-b border-white/70 rounded-t-lg">
       <tr class="text-left ">
         {{ $tableheader }}
       </tr>
diff --git a/resources/views/livewire/color/create.blade.php b/resources/views/livewire/color/create.blade.php
new file mode 100644
index 0000000..94435ff
--- /dev/null
+++ b/resources/views/livewire/color/create.blade.php
@@ -0,0 +1,41 @@
+<section>
+    <form wire:submit="save">
+    <x-header>
+        {{ __('Create Color') }}
+
+        <x-slot name="headerright">
+            <flux:button type="submit" variant="primary" class="bg-selective hover:bg-selective-600 text-gray-950 hover:cursor-pointer transition-all ease-in-out" icon="check">Save</flux:button>
+            <flux:button wire:click="cancel" variant="primary" class=" bg-red-700 shadow hover:bg-red-800 hover:cursor-pointer  transition-all ease-in-out" icon="x-mark">Cancel</flux:button>
+        </x-slot>
+    </x-header>
+
+    <div class="container m-auto my-8 bg-elephant-950 border border-elephant-900 rounded-lg shadow p-6 text-gray-50">
+        <div>
+            <div class="px-4 sm:px-0">
+                <h3 class="text-base/7 font-semibold text-white">Color Information</h3>
+                <p class="mt-1 max-w-2xl text-sm/6 text-gray-200">Color details.</p>
+            </div>
+            <div class="mt-6 border-t border-white/10">
+                <dl class="divide-y divide-white/10">
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-gray-100">Name</dt>
+                        <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
+                            <flux:input wire:model="name" type="text" class="mt-1 block w-full"/>
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-gray-100">Hex Code</dt>
+                        <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
+                            <flux:input.group>
+                                <flux:input.group.prefix>#</flux:input.group.prefix>
+                                <flux:input wire:model="hex"  type="text" class="block w-full"/>
+                            </flux:input.group>
+                        </dd>
+                    </div>
+                </dl>
+            </div>
+        </div>
+
+    </div>
+    </form>
+</section>
diff --git a/resources/views/livewire/color/edit.blade.php b/resources/views/livewire/color/edit.blade.php
new file mode 100644
index 0000000..94435ff
--- /dev/null
+++ b/resources/views/livewire/color/edit.blade.php
@@ -0,0 +1,41 @@
+<section>
+    <form wire:submit="save">
+    <x-header>
+        {{ __('Create Color') }}
+
+        <x-slot name="headerright">
+            <flux:button type="submit" variant="primary" class="bg-selective hover:bg-selective-600 text-gray-950 hover:cursor-pointer transition-all ease-in-out" icon="check">Save</flux:button>
+            <flux:button wire:click="cancel" variant="primary" class=" bg-red-700 shadow hover:bg-red-800 hover:cursor-pointer  transition-all ease-in-out" icon="x-mark">Cancel</flux:button>
+        </x-slot>
+    </x-header>
+
+    <div class="container m-auto my-8 bg-elephant-950 border border-elephant-900 rounded-lg shadow p-6 text-gray-50">
+        <div>
+            <div class="px-4 sm:px-0">
+                <h3 class="text-base/7 font-semibold text-white">Color Information</h3>
+                <p class="mt-1 max-w-2xl text-sm/6 text-gray-200">Color details.</p>
+            </div>
+            <div class="mt-6 border-t border-white/10">
+                <dl class="divide-y divide-white/10">
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-gray-100">Name</dt>
+                        <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
+                            <flux:input wire:model="name" type="text" class="mt-1 block w-full"/>
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-gray-100">Hex Code</dt>
+                        <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
+                            <flux:input.group>
+                                <flux:input.group.prefix>#</flux:input.group.prefix>
+                                <flux:input wire:model="hex"  type="text" class="block w-full"/>
+                            </flux:input.group>
+                        </dd>
+                    </div>
+                </dl>
+            </div>
+        </div>
+
+    </div>
+    </form>
+</section>
diff --git a/resources/views/livewire/color/index.blade.php b/resources/views/livewire/color/index.blade.php
index 6368db0..2c7c9b9 100644
--- a/resources/views/livewire/color/index.blade.php
+++ b/resources/views/livewire/color/index.blade.php
@@ -3,12 +3,12 @@
         {{ __('Colors') }}
 
         <x-slot name="headerleft">
-            <input type="text" placeholder="Search..." wire:model.live="search" class="bg-jet-700 border-jet-500 rounded text-jet-50 placeholder:text-jet-200 focus:border-olivine focus:ring-olivine" />
+            <input type="text" placeholder="Search..." wire:model.live="search" class="bg-black/10 border-white/20 rounded text-gray-50 placeholder:text-gray-200 focus:border-white/50 focus:ring-white/50" />
         </x-slot>
 
         <x-slot name="headerright">
             <flux:modal.trigger name="createModal">
-                <flux:button variant="primary" class="bg-olivine hover:bg-olivine-600">Create Color</flux:button>
+                <flux:button wire:click="create" variant="primary" class="bg-selective hover:bg-selective-600 text-gray-950 transition ease-in-out hover:cursor-pointer">Create Type</flux:button>
             </flux:modal.trigger>
         </x-slot>
     </x-header>
@@ -16,26 +16,25 @@
 
 
 
-    <div class="container m-auto my-8 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
+    <div class="container m-auto my-8 bg-elephant border border-elephant-900 rounded-lg shadow p-6 text-gray-50">
         <x-table>
             <x-slot name="tableheader">
                 <x-table.header>Name</x-table.header>
                 <x-table.header>Color</x-table.header>
                 <x-table.header>Hex</x-table.header>
-                <x-table.header>Rolls</x-table.header>
-                <x-table.header class="w-1/6"></x-table.header>
+                <x-table.header class="w-[150px]">Actions</x-table.header>
             </x-slot>
 
             @foreach ($colors as $color)
-                <tr wire:key="{{ $color->id }}" class="text-jet-200 border-b border-jet-600 hover:bg-jet-700 transition duration-150 ease-in-out">
-                    <x-table.item><p class="p-4 px-3 pl-6 font-bold ">{{ $color->name }}</p></x-table.item>
-                    <x-table.item><div class="p-4 px-3 mx-3 h-8 rounded" style="background-color: {{ $color->hex }}"></div></x-table.item>
+                <tr wire:key="{{ $color->id }}" class="text-gray-200 border-b border-white/50 hover:bg-white/10 transition duration-150 ease-in-out">
+                    <x-table.item><p class="p-4 px-3 pl-6 font-bold "><a wire:click="edit({{ $color->id }})" class="hover:cursor-pointer">{{ $color->name }}</a></p></x-table.item>
+                    <x-table.item><div class="p-4 mx-3 w-[20px] h-[20px] rounded" style="background-color:#{{ $color->hex }}"></div></x-table.item>
                     <x-table.item><p class="p-4 px-3 text-left ">{{ $color->hex }}</p></x-table.item>
-                    <x-table.item><p class="p-4 px-3"></p></x-table.item>
                     <x-table.item>
                         <div class="flex flex-row gap-4 justify-end pr-8">
-                            <flux:button variant="ghost" wire:click="edit({{ $color->id }})"  class=" rounded-lg px-4 py-2 cursor-pointer" icon="pencil">Edit</flux:button>
-                            <flux:button variant="danger" wire:click="deleteModal({{ $color->id }})" icon="x-mark">Delete</flux:button>
+                            <flux:button variant="primary" class="text-gray-200 bg-transparent shadow-none hover:bg-cornflower hover:shadow hover:text-gray-950 hover:cursor-pointer" wire:click="show({{ $color->id }})" icon="magnifying-glass"></flux:button>
+                            <flux:button variant="primary" class="text-gray-200 bg-transparent shadow-none hover:bg-gold-drop hover:shadow hover:text-gray-950 hover:cursor-pointer" wire:click="edit({{ $color->id }})" icon="pencil"></flux:button>
+                            <flux:button variant="primary" class="text-gray-200 bg-transparent shadow-none hover:bg-red-700 hover:shadow hover:cursor-pointer" wire:click="delete({{ $color->id }})" icon="trash"></flux:button>
                         </div>
                     </x-table.item>
                 </tr>
@@ -47,67 +46,4 @@
         </x-table>
 
     </div>
-
-    <!-- Create Form -->
-        <flux:modal wire:model.self='createModal' name="createModal" class="md:w-lg">
-            <form wire:submit.prevent="create">
-            <div class="space-y-6">
-                <div>
-                    <flux:heading size="lg" class="text-nuke-400">Create color</flux:heading>
-                    <flux:text class="mt-2">Create a new color.</flux:text>
-                </div>
-                    <flux:input label="Name" wire:model="name" placeholder="Color Name" required />
-                    <flux:input label="hex" wire:model="hex" type="color" required />
-                    <div class="flex gap-2">
-                        <flux:spacer />
-                        <flux:button variant="ghost" wire:click='cancel'>Cancel</flux:button>
-                        <flux:button type="submit" variant="primary" class="bg-nuke-400 hover:bg-nuke-500">Create</flux:button>
-                    </div>
-            </div>
-            </form>
-        </flux:modal>
-
-        <!-- Edit Form -->
-        @empty($color)
-        @else
-        <flux:modal wire:model.self='editModal' name="editModal" class="md:w-lg">
-            <form wire:submit.prevent="save({{ $editid }})">
-            <div class="space-y-6">
-                <div>
-                    <flux:heading size="lg" class="text-etheral-300">Edit color</flux:heading>
-                    <flux:text class="mt-2">Edit an existing color.</flux:text>
-                </div>
-                    <flux:input label="Name" wire:model="name" placeholder="Color Name" required />
-                    <flux:input label="hex" wire:model="hex" type="color" required />
-                    <div class="flex gap-2">
-                        <flux:spacer />
-                        <flux:button variant="ghost" wire:click='cancel'>Cancel</flux:button>
-                        <flux:button type="submit" variant="primary" class="bg-etheral-300 hover:bg-etheral-400">Save</flux:button>
-                    </div>
-            </div>
-            </form>
-        </flux:modal>
-        @endempty
-
-        <!-- Delete Form -->
-        <flux:modal wire:model.self='deleteModal' name="deleteModal" class="md:w-lg">
-            <form wire:submit.prevent="delete({{ $deleteid }})">
-            <div class="space-y-6">
-                <div>
-                    <flux:heading size="lg" class="text-red-500">Delete color?</flux:heading>
-                    <flux:text class="mt-2">
-                        <p>You're about to delete this color.</p>
-                        <p>This action cannot be reversed.</p>
-                    </flux:text>
-                </div>
-                <flux:input label="Name" wire:model="name" disabled placeholder="Color Name" required />
-                <flux:input label="hex" wire:model="hex" disabled type="color" required />
-                <div class="flex gap-2">
-                    <flux:spacer />
-                    <flux:button variant="ghost" wire:click='cancel'>Cancel</flux:button>
-                    <flux:button type="submit" variant="danger">Delete color</flux:button>
-                </div>
-            </div>
-            </form>
-        </flux:modal>
 </section>
diff --git a/resources/views/livewire/color/show.blade.php b/resources/views/livewire/color/show.blade.php
new file mode 100644
index 0000000..07c0798
--- /dev/null
+++ b/resources/views/livewire/color/show.blade.php
@@ -0,0 +1,40 @@
+<section>
+    <x-header>
+        {{ __('Create Color') }}
+
+        <x-slot name="headerright">
+            <flux:button wire:click="back" variant="primary" class="bg-transparent shadow-none  hover:bg-black/10 hover:cursor-pointer transition-all ease-in-out" icon="arrow-left">Back</flux:button>
+            <flux:button wire:click="edit({{ $color->id }})" variant="primary"  class="bg-selective text-gray-950 shadow-none  hover:bg-selective-600 hover:cursor-pointer transition-all ease-in-out" icon="check">Edit</flux:button>
+        </x-slot>
+    </x-header>
+
+    <div class="container m-auto my-8 bg-elephant-950 border border-elephant-900 rounded-lg shadow p-6 text-gray-50">
+        <div>
+            <div class="px-4 sm:px-0">
+                <h3 class="text-base/7 font-semibold text-white">Color Information</h3>
+                <p class="mt-1 max-w-2xl text-sm/6 text-gray-200">Color details.</p>
+            </div>
+            <div class="mt-6 border-t border-white/10">
+                <dl class="divide-y divide-white/10">
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-gray-100">Name</dt>
+                        <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
+                            {{ $color->name }}
+                        </dd>
+                    </div>
+                    <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
+                        <dt class="text-sm/6 font-medium text-gray-100">Hex Code</dt>
+                        <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
+                            <div class="flex items-center gap-4">
+                                <div class="w-[20px] h-[20px] rounded" style="background-color:#{{ $color->hex }}"></div>
+                                <span>#{{ $color->hex }}</span>
+                            </div>
+                        </dd>
+                    </div>
+                </dl>
+            </div>
+        </div>
+
+    </div>
+    </form>
+</section>
diff --git a/resources/views/livewire/dashboard.blade.php b/resources/views/livewire/dashboard.blade.php
index d4cd72a..4c1f6a9 100644
--- a/resources/views/livewire/dashboard.blade.php
+++ b/resources/views/livewire/dashboard.blade.php
@@ -1,12 +1,6 @@
 <div>
     <x-header>
         {{ __('Dashboard') }}
-
-        <x-slot name="headerright">
-            <flux:modal.trigger name="createModal">
-                <flux:button variant="primary" class="bg-olivine transition-all hover:bg-jet hover:text-jet-100 hover:cursor-pointer">Create Buildplate</flux:button>
-            </flux:modal.trigger>
-        </x-slot>
     </x-header>
 
   <div class="py-12">
diff --git a/resources/views/livewire/type/create.blade.php b/resources/views/livewire/type/create.blade.php
index 0357c0b..ec61a6a 100644
--- a/resources/views/livewire/type/create.blade.php
+++ b/resources/views/livewire/type/create.blade.php
@@ -4,28 +4,28 @@
         {{ __('Create Type') }}
 
         <x-slot name="headerright">
-            <flux:button type="submit" variant="primary" icon="check">Save</flux:button>
-            <flux:button wire:click="cancel" variant="danger" icon="x-mark">Cancel</flux:button>
+            <flux:button type="submit" variant="primary" class="bg-selective hover:bg-selective-600 text-gray-950 hover:cursor-pointer transition-all ease-in-out" icon="check">Save</flux:button>
+            <flux:button wire:click="cancel" variant="primary" class=" bg-red-700 shadow hover:bg-red-800 hover:cursor-pointer  transition-all ease-in-out" icon="x-mark">Cancel</flux:button>
         </x-slot>
     </x-header>
 
-    <div class="container m-auto my-8 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
+    <div class="container m-auto my-8 bg-elephant-950 border border-elephant-900 rounded-lg shadow p-6 text-gray-50">
         <div>
             <div class="px-4 sm:px-0">
                 <h3 class="text-base/7 font-semibold text-white">Type Information</h3>
-                <p class="mt-1 max-w-2xl text-sm/6 text-jet-200">Type details.</p>
+                <p class="mt-1 max-w-2xl text-sm/6 text-gray-200">Type details.</p>
             </div>
             <div class="mt-6 border-t border-white/10">
                 <dl class="divide-y divide-white/10">
                     <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
-                        <dt class="text-sm/6 font-medium text-jet-100">Name</dt>
-                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                        <dt class="text-sm/6 font-medium text-gray-100">Name</dt>
+                        <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
                             <flux:input wire:model="name" type="text" class="mt-1 block w-full"/>
                         </dd>
                     </div>
                     <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
-                        <dt class="text-sm/6 font-medium text-jet-100">Description</dt>
-                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
+                        <dt class="text-sm/6 font-medium text-gray-100">Description</dt>
+                        <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
                             <flux:textarea wire:model="description" type="text" class="mt-1 block w-full"/>
                         </dd>
                     </div>
diff --git a/resources/views/livewire/type/edit.blade.php b/resources/views/livewire/type/edit.blade.php
index 853686a..936fbf6 100644
--- a/resources/views/livewire/type/edit.blade.php
+++ b/resources/views/livewire/type/edit.blade.php
@@ -4,30 +4,29 @@
         {{ __('Create Type') }}
 
         <x-slot name="headerright">
-            <flux:button type="submit" variant="primary" icon="check">Save</flux:button>
-            <flux:button wire:click="cancel" variant="danger" icon="x-mark">Cancel</flux:button>
+            <flux:button type="submit" variant="primary" class="bg-selective hover:bg-selective-600 text-gray-950 hover:cursor-pointer transition-all ease-in-out" icon="check">Save</flux:button>
+            <flux:button wire:click="cancel" variant="primary" class=" bg-red-700 shadow hover:bg-red-800 hover:cursor-pointer  transition-all ease-in-out" icon="x-mark">Cancel</flux:button>
         </x-slot>
     </x-header>
 
-    <div class="container m-auto my-8 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
+    <div class="container m-auto my-8 bg-elephant border border-elephant-900 rounded-lg shadow p-6 text-gray-50">
         <div>
-            <div>Loaded: {{ $type?->id }} - {{ $type?->name }}</div>
             <div class="px-4 sm:px-0">
                 <h3 class="text-base/7 font-semibold text-white">Type Information</h3>
-                <p class="mt-1 max-w-2xl text-sm/6 text-jet-200">Type details.</p>
+                <p class="mt-1 max-w-2xl text-sm/6 text-gray-200">Type details.</p>
             </div>
             <div class="mt-6 border-t border-white/10">
                 <dl class="divide-y divide-white/10">
                     <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
-                        <dt class="text-sm/6 font-medium text-jet-100">Name</dt>
-                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
-                            <flux:input wire:model="type.name" type="text" class="mt-1 block w-full"/>
+                        <dt class="text-sm/6 font-medium text-gray-100">Name</dt>
+                        <dd class="mt-1 text-sm/6 text-gray-200 sm:col-span-2 sm:mt-0">
+                            <flux:input wire:model="name" type="text" class="mt-1 block w-full"/>
                         </dd>
                     </div>
                     <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center">
-                        <dt class="text-sm/6 font-medium text-jet-100">Description</dt>
-                        <dd class="mt-1 text-sm/6 text-jet-200 sm:col-span-2 sm:mt-0">
-                            <flux:textarea wire:model="type.description" type="text" rows="auto" class="mt-1 block w-full" />
+                        <dt class="text-sm/6 font-medium text-gray-100">Description</dt>
+                        <dd class="mt-1 text-sm/6 text-jet-gray sm:col-span-2 sm:mt-0">
+                            <flux:textarea wire:model="description" type="text" rows="auto" class="mt-1 block w-full" />
                         </dd>
                     </div>
                 </dl>
diff --git a/resources/views/livewire/type/index.blade.php b/resources/views/livewire/type/index.blade.php
index dc80e82..6671b77 100644
--- a/resources/views/livewire/type/index.blade.php
+++ b/resources/views/livewire/type/index.blade.php
@@ -3,19 +3,20 @@
         {{ __('Types') }}
 
         <x-slot name="headerleft">
-            <input type="text" placeholder="Search..." wire:model.live="search" class="bg-jet-700 border-jet-500 rounded text-jet-50 placeholder:text-jet-200 focus:border-olivine focus:ring-olivine" />
+            <input type="text" placeholder="Search..." wire:model.live="search" class="bg-black/10 border-white/20 rounded text-gray-50 placeholder:text-gray-200 focus:border-white/50 focus:ring-white/50" />
         </x-slot>
 
         <x-slot name="headerright">
             <flux:modal.trigger name="createModal">
-                <flux:button wire:click="create" variant="primary" class="bg-olivine hover:bg-olivine-600">Create Type</flux:button>
-            </flux:modal.trigger>        </x-slot>
+                <flux:button wire:click="create" variant="primary" class="bg-selective hover:bg-selective-600 text-gray-950 transition ease-in-out hover:cursor-pointer">Create Type</flux:button>
+            </flux:modal.trigger>
+        </x-slot>
     </x-header>
 
 
 
 
-    <div class="container m-auto my-8 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
+    <div class="container m-auto my-8 bg-elephant-950 rounded-lg shadow p-6 text-gray-50 border border-elephant-900">
         <x-table>
             <x-slot name="tableheader">
                 <x-table.header>Name</x-table.header>
@@ -25,15 +26,15 @@
             </x-slot>
 
             @foreach ($types as $type)
-                <tr wire:key="{{ $type->id }}" class="text-jet-200 border-b border-jet-600 hover:bg-jet-700 transition duration-150 ease-in-out">
-                    <x-table.item><p class="p-4 px-3 pl-6 font-bold">{{ $type->name }}</p></x-table.item>
+                <tr wire:key="{{ $type->id }}" class="text-gray-200 border-b border-white/40 hover:bg-white/10 transition duration-150 ease-in-out">
+                    <x-table.item><p class="p-4 px-3 pl-6 font-bold"><a class="hover:cursor-pointer" wire:click="show({{ $type->id }})" >{{ $type->name }}</a></p></x-table.item>
                     <x-table.item><p class="p-4 px-3">{{ $type->description }}</p></x-table.item>
                     <x-table.item><p class="p-4 px-3">{{ $type->amount }}</p></x-table.item>
                     <x-table.item>
                         <div class="flex flex-row gap-4 justify-end pr-8">
-                            <flux:button variant="primary" class="text-jet-200 bg-transparent shadow-none hover:bg-olivine hover:shadow hover:text-jet-950" wire:click="show({{ $type->id }})" icon="magnifying-glass"></flux:button>
-                            <flux:button variant="primary" class="text-jet-200 bg-transparent shadow-none hover:bg-pumpkin-500 hover:shadow" wire:click="edit({{ $type->id }})" icon="pencil"></flux:button>
-                            <flux:button variant="primary" class="text-jet-200 bg-transparent shadow-none hover:bg-red-600 hover:shadow" wire:click="delete({{ $type->id }})" icon="trash"></flux:button>
+                            <flux:button variant="primary" class="text-gray-200 bg-transparent shadow-none hover:bg-cornflower hover:shadow hover:text-gray-950 hover:cursor-pointer" wire:click="show({{ $type->id }})" icon="magnifying-glass"></flux:button>
+                            <flux:button variant="primary" class="text-gray-200 bg-transparent shadow-none hover:bg-gold-drop hover:shadow hover:text-gray-950 hover:cursor-pointer" wire:click="edit({{ $type->id }})" icon="pencil"></flux:button>
+                            <flux:button variant="primary" class="text-gray-200 bg-transparent shadow-none hover:bg-red-700 hover:shadow hover:cursor-pointer" wire:click="delete({{ $type->id }})" icon="trash"></flux:button>
                         </div>
                     </x-table.item>
                 </tr>
diff --git a/resources/views/livewire/type/show.blade.php b/resources/views/livewire/type/show.blade.php
index 65cc1d5..40bf1ab 100644
--- a/resources/views/livewire/type/show.blade.php
+++ b/resources/views/livewire/type/show.blade.php
@@ -3,12 +3,12 @@
         {{ __('Show Type - ') . $type->name }}
 
         <x-slot name="headerright">
-            <flux:button wire:click="back" variant="ghost" icon="arrow-left">Back</flux:button>
-            <flux:button wire:click="edit({{ $type->id }})" variant="primary" icon="check">Edit</flux:button>
+            <flux:button wire:click="back" variant="primary" class="bg-transparent shadow-none  hover:bg-black/10 hover:cursor-pointer transition-all ease-in-out" icon="arrow-left">Back</flux:button>
+            <flux:button wire:click="edit({{ $type->id }})" variant="primary"  class="bg-selective text-gray-950 shadow-none  hover:bg-selective-600 hover:cursor-pointer transition-all ease-in-out" icon="check">Edit</flux:button>
         </x-slot>
     </x-header>
 
-    <div class="container m-auto my-8 bg-jet-800 rounded-lg shadow p-6 text-jet-50">
+    <div class="container m-auto my-8 bg-elephant-950 rounded-lg shadow p-6 text-gray-50 border border-elephant-900">
         <div>
             <div class="px-4 sm:px-0">
                 <h3 class="text-base/7 font-semibold text-white">Type Information</h3>
diff --git a/resources/views/vendor/livewire/simple-tailwind.blade.php b/resources/views/vendor/livewire/simple-tailwind.blade.php
index 1030361..d7f2560 100644
--- a/resources/views/vendor/livewire/simple-tailwind.blade.php
+++ b/resources/views/vendor/livewire/simple-tailwind.blade.php
@@ -46,7 +46,7 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
                         </button>
                     @endif
                 @else
-                    <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                    <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md dark:text-gray-600 dark:bg-gray-800 dark:border-gray-600">
                         {!! __('pagination.next') !!}
                     </span>
                 @endif
diff --git a/resources/views/vendor/livewire/tailwind.blade.php b/resources/views/vendor/livewire/tailwind.blade.php
index 7b70086..9ad7f28 100644
--- a/resources/views/vendor/livewire/tailwind.blade.php
+++ b/resources/views/vendor/livewire/tailwind.blade.php
@@ -16,11 +16,11 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
             <div class="flex justify-between flex-1 sm:hidden">
                 <span>
                     @if ($paginator->onFirstPage())
-                        <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                        <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
                             {!! __('pagination.previous') !!}
                         </span>
                     @else
-                        <button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                        <button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
                             {!! __('pagination.previous') !!}
                         </button>
                     @endif
@@ -28,11 +28,11 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
 
                 <span>
                     @if ($paginator->hasMorePages())
-                        <button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                        <button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-blue-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
                             {!! __('pagination.next') !!}
                         </button>
                     @else
-                        <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                        <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md dark:text-gray-600 dark:bg-gray-800 dark:border-gray-600">
                             {!! __('pagination.next') !!}
                         </span>
                     @endif
@@ -58,14 +58,14 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
                             {{-- Previous Page Link --}}
                             @if ($paginator->onFirstPage())
                                 <span aria-disabled="true" aria-label="{{ __('pagination.previous') }}">
-                                    <span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5" aria-hidden="true">
+                                    <span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5 dark:bg-gray-800 dark:border-gray-600" aria-hidden="true">
                                         <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                             <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                                         </svg>
                                     </span>
                                 </span>
                             @else
-                                <button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.previous') }}">
+                                <button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:active:bg-gray-700 dark:focus:border-blue-800" aria-label="{{ __('pagination.previous') }}">
                                     <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                         <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                                     </svg>
@@ -78,7 +78,7 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
                             {{-- "Three Dots" Separator --}}
                             @if (is_string($element))
                                 <span aria-disabled="true">
-                                    <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5">{{ $element }}</span>
+                                    <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300">{{ $element }}</span>
                                 </span>
                             @endif
 
@@ -88,10 +88,10 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
                                     <span wire:key="paginator-{{ $paginator->getPageName() }}-page{{ $page }}">
                                         @if ($page == $paginator->currentPage())
                                             <span aria-current="page">
-                                                <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5">{{ $page }}</span>
+                                                <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 dark:bg-gray-800 dark:border-gray-600">{{ $page }}</span>
                                             </span>
                                         @else
-                                            <button type="button" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
+                                            <button type="button" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:text-gray-300 dark:active:bg-gray-700 dark:focus:border-blue-800" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
                                                 {{ $page }}
                                             </button>
                                         @endif
@@ -103,14 +103,14 @@ $scrollIntoViewJsSnippet = ($scrollTo !== false)
                         <span>
                             {{-- Next Page Link --}}
                             @if ($paginator->hasMorePages())
-                                <button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.next') }}">
+                                <button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:ring ring-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-600 dark:active:bg-gray-700 dark:focus:border-blue-800" aria-label="{{ __('pagination.next') }}">
                                     <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                         <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                                     </svg>
                                 </button>
                             @else
                                 <span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
-                                    <span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5" aria-hidden="true">
+                                    <span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5 dark:bg-gray-800 dark:border-gray-600" aria-hidden="true">
                                         <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                             <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                                         </svg>
diff --git a/routes/web.php b/routes/web.php
index 592ed5f..4981a58 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -26,8 +26,13 @@ Route::middleware([
 
     // Buildplates
     Route::get('buildplate', Buildplate::class)->name('buildplate.index');
+
     // Colors
     Route::get('color', Color::class)->name('color.index');
+    Route::get('color/create', \App\Livewire\Color\CreateColor::class)->name('color.create');
+    Route::get('color/{color}/edit', \App\Livewire\Color\EditColor::class)->name('color.edit');
+    Route::get('color/{color}', \App\Livewire\Color\ShowColor::class)->name('color.show');
+
     // Types
     Route::get('type', Type::class)->name('type.index');
     Route::get('type/create', \App\Livewire\Type\CreateType::class)->name('type.create');
@@ -39,6 +44,7 @@ Route::middleware([
     Route::get('filaments/create', Filament::class)->name('filaments.create');
     Route::get('filaments/{filament}/edit', \App\Livewire\Filament\EditFilament::class)->name('filaments.edit');
     Route::get('filaments/{filament}', \App\Livewire\Filament\ShowFilament::class)->name('filaments.show');
+
     // Manufacturers
     Route::get('manufacturer', Manufacturer::class)->name('manufacturer.index');