From ca82305bff9959f8cc3d62845db8c14e9e0675dc Mon Sep 17 00:00:00 2001
From: ShuriZma <shurizma@shurizma.de>
Date: Sun, 15 Oct 2023 17:29:16 +0200
Subject: [PATCH] add accent color add keybinds

---
 .env.example                                  |   3 +
 app/Http/Controllers/KeybindController.php    |  73 +++++
 app/Http/Requests/StoreKeybindRequest.php     |  28 ++
 app/Http/Requests/UpdateKeybindRequest.php    |  28 ++
 app/Models/Keybind.php                        |  93 ++++++
 app/Policies/KeybindPolicy.php                |  66 ++++
 database/factories/KeybindFactory.php         |  23 ++
 ...023_10_15_114638_create_keybinds_table.php |  29 ++
 database/seeders/KeybindSeeder.php            |  17 +
 public/css/app.css                            | 299 ++++++++++++++++--
 resources/views/components/keyboard.blade.php |  19 ++
 resources/views/components/layout.blade.php   |   4 +-
 .../components/layout/breadcrumb.blade.php    |   6 +-
 .../views/components/layout/sidebar.blade.php |  21 +-
 .../views/components/primary-button.blade.php |   2 +-
 .../components/searchbar-select2.blade.php    |  16 +-
 resources/views/components/section.blade.php  |   2 +-
 .../select-dropdown-hover.blade.php           |  10 +-
 .../views/components/table/row.blade.php      |   4 +-
 .../views/components/table/table.blade.php    |   2 +-
 .../views/components/text-input.blade.php     |   2 +-
 .../views/components/vehicles/card.blade.php  |   2 +-
 resources/views/home.blade.php                |  53 +++-
 resources/views/keybinds.blade.php            |  26 ++
 .../vendor/pagination/tailwind.blade.php      |  22 +-
 routes/breadcrumbs.php                        |   6 +
 routes/web.php                                |   3 +
 27 files changed, 787 insertions(+), 72 deletions(-)
 create mode 100644 app/Http/Controllers/KeybindController.php
 create mode 100644 app/Http/Requests/StoreKeybindRequest.php
 create mode 100644 app/Http/Requests/UpdateKeybindRequest.php
 create mode 100644 app/Models/Keybind.php
 create mode 100644 app/Policies/KeybindPolicy.php
 create mode 100644 database/factories/KeybindFactory.php
 create mode 100644 database/migrations/2023_10_15_114638_create_keybinds_table.php
 create mode 100644 database/seeders/KeybindSeeder.php
 create mode 100644 resources/views/components/keyboard.blade.php
 create mode 100644 resources/views/keybinds.blade.php

diff --git a/.env.example b/.env.example
index 659f2cc..0b1ba3e 100644
--- a/.env.example
+++ b/.env.example
@@ -8,6 +8,9 @@ APP_COPYRIGHT=ShuriZma
 APP_COPYRIGHT_SINCE=2023
 FOOTER_IMAGE=img/header.png # can be any image type. path should start from public/ (ex. 'img/header.png')
 LANDING_PAGE=false # if set to true a landing page will be added, if false the vehicle list is the landing page
+ACCENT_COLOR=red-400 # https://tailwindcss.com/docs/background-color
+
+KEYBIND_SEPERATOR=; # seperator for keybind combos, thats being used on the db to seperate multiple keys
 
 # VEHICLE LIST
 CURRENCY=$ # unit for prices etc
diff --git a/app/Http/Controllers/KeybindController.php b/app/Http/Controllers/KeybindController.php
new file mode 100644
index 0000000..426f90a
--- /dev/null
+++ b/app/Http/Controllers/KeybindController.php
@@ -0,0 +1,73 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Keybind;
+use App\Http\Requests\StoreKeybindRequest;
+use App\Http\Requests\UpdateKeybindRequest;
+
+class KeybindController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        $keybinds = Keybind::all();
+
+
+        return response(
+            view('keybinds', [
+                'keybinds' => $keybinds,
+            ])
+        );
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(StoreKeybindRequest $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(Keybind $keybind)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit(Keybind $keybind)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(UpdateKeybindRequest $request, Keybind $keybind)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(Keybind $keybind)
+    {
+        //
+    }
+}
diff --git a/app/Http/Requests/StoreKeybindRequest.php b/app/Http/Requests/StoreKeybindRequest.php
new file mode 100644
index 0000000..30ee691
--- /dev/null
+++ b/app/Http/Requests/StoreKeybindRequest.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreKeybindRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return false;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array|string>
+     */
+    public function rules(): array
+    {
+        return [
+            //
+        ];
+    }
+}
diff --git a/app/Http/Requests/UpdateKeybindRequest.php b/app/Http/Requests/UpdateKeybindRequest.php
new file mode 100644
index 0000000..4333a16
--- /dev/null
+++ b/app/Http/Requests/UpdateKeybindRequest.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class UpdateKeybindRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return false;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array|string>
+     */
+    public function rules(): array
+    {
+        return [
+            //
+        ];
+    }
+}
diff --git a/app/Models/Keybind.php b/app/Models/Keybind.php
new file mode 100644
index 0000000..37b18f7
--- /dev/null
+++ b/app/Models/Keybind.php
@@ -0,0 +1,93 @@
+<?php
+
+namespace App\Models;
+
+use Database\Factories\KeybindFactory;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Carbon;
+
+/**
+ * App\Models\Keybind
+ *
+ * @property int $keybind_id
+ * @property Carbon|null $created_at
+ * @property Carbon|null $updated_at
+ * @property string $keybind_keys
+ * @property string $keybind_description
+ * @method static KeybindFactory factory($count = null, $state = [])
+ * @method static Builder|Keybind newModelQuery()
+ * @method static Builder|Keybind newQuery()
+ * @method static Builder|Keybind query()
+ * @method static Builder|Keybind whereCreatedAt($value)
+ * @method static Builder|Keybind whereKeybindDescription($value)
+ * @method static Builder|Keybind whereKeybindId($value)
+ * @method static Builder|Keybind whereKeybindKeys($value)
+ * @method static Builder|Keybind whereUpdatedAt($value)
+ * @mixin \Eloquent
+ */
+class Keybind extends Model
+{
+    use HasFactory;
+
+    /**
+     * @return int
+     */
+    public function getKeybindId(): int
+    {
+        return $this->keybind_id;
+    }
+
+    /**
+     * @param int $keybind_id
+     *
+     * @return Keybind
+     */
+    public function setKeybindId(int $keybind_id): Keybind
+    {
+        $this->keybind_id = $keybind_id;
+
+        return $this;
+    }
+
+    /**
+     * @return string
+     */
+    public function getKeybindKeys(): string
+    {
+        return $this->keybind_keys;
+    }
+
+    /**
+     * @param string $keybind_keys
+     *
+     * @return Keybind
+     */
+    public function setKeybindKeys(string $keybind_keys): Keybind
+    {
+        $this->keybind_keys = $keybind_keys;
+
+        return $this;
+    }
+
+    /**
+     * @return string
+     */
+    public function getKeybindDescription(): string
+    {
+        return $this->keybind_description;
+    }
+
+    /**
+     * @param string $keybind_description
+     *
+     * @return Keybind
+     */
+    public function setKeybindDescription(string $keybind_description): Keybind
+    {
+        $this->keybind_description = $keybind_description;
+
+        return $this;
+    }
+}
diff --git a/app/Policies/KeybindPolicy.php b/app/Policies/KeybindPolicy.php
new file mode 100644
index 0000000..ad07401
--- /dev/null
+++ b/app/Policies/KeybindPolicy.php
@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Policies;
+
+use App\Models\Keybind;
+use App\Models\User;
+use Illuminate\Auth\Access\Response;
+
+class KeybindPolicy
+{
+    /**
+     * Determine whether the user can view any models.
+     */
+    public function viewAny(User $user): bool
+    {
+        //
+    }
+
+    /**
+     * Determine whether the user can view the model.
+     */
+    public function view(User $user, Keybind $keybind): bool
+    {
+        //
+    }
+
+    /**
+     * Determine whether the user can create models.
+     */
+    public function create(User $user): bool
+    {
+        //
+    }
+
+    /**
+     * Determine whether the user can update the model.
+     */
+    public function update(User $user, Keybind $keybind): bool
+    {
+        //
+    }
+
+    /**
+     * Determine whether the user can delete the model.
+     */
+    public function delete(User $user, Keybind $keybind): bool
+    {
+        //
+    }
+
+    /**
+     * Determine whether the user can restore the model.
+     */
+    public function restore(User $user, Keybind $keybind): bool
+    {
+        //
+    }
+
+    /**
+     * Determine whether the user can permanently delete the model.
+     */
+    public function forceDelete(User $user, Keybind $keybind): bool
+    {
+        //
+    }
+}
diff --git a/database/factories/KeybindFactory.php b/database/factories/KeybindFactory.php
new file mode 100644
index 0000000..edc62f3
--- /dev/null
+++ b/database/factories/KeybindFactory.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+/**
+ * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Keybind>
+ */
+class KeybindFactory extends Factory
+{
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition(): array
+    {
+        return [
+            //
+        ];
+    }
+}
diff --git a/database/migrations/2023_10_15_114638_create_keybinds_table.php b/database/migrations/2023_10_15_114638_create_keybinds_table.php
new file mode 100644
index 0000000..ccacb9a
--- /dev/null
+++ b/database/migrations/2023_10_15_114638_create_keybinds_table.php
@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('keybinds', function (Blueprint $table) {
+            $table->id('keybind_id');
+            $table->timestamps();
+            $table->string('keybind_keys');
+            $table->text('keybind_description');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('keybinds');
+    }
+};
diff --git a/database/seeders/KeybindSeeder.php b/database/seeders/KeybindSeeder.php
new file mode 100644
index 0000000..3378c04
--- /dev/null
+++ b/database/seeders/KeybindSeeder.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+
+class KeybindSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        //
+    }
+}
diff --git a/public/css/app.css b/public/css/app.css
index 6f4b10d..ec17361 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -13153,6 +13153,22 @@ html{
   .input-group > .select{
   border-radius: 0px;
 }
+.kbd{
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-width: 1px;
+  border-color: hsl(var(--bc) / var(--tw-border-opacity));
+  --tw-border-opacity: 0.2;
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  border-radius: var(--rounded-btn, 0.5rem);
+  border-bottom-width: 2px;
+  min-height: 2.2em;
+  min-width: 2.2em;
+}
 .link{
   cursor: pointer;
   text-decoration-line: underline;
@@ -14148,6 +14164,10 @@ html{
   margin-top: auto;
   margin-bottom: auto;
 }
+.my-1{
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
 .-mb-\[6\.5rem\]{
   margin-bottom: -6.5rem;
 }
@@ -14229,6 +14249,123 @@ html{
 .mt-8{
   margin-top: 2rem;
 }
+.ml-\[3rem\]{
+  margin-left: 3rem;
+}
+.ml-\[2\.5rem\]{
+  margin-left: 2.5rem;
+}
+.ml-\[2rem\]{
+  margin-left: 2rem;
+}
+.ml-\[1rem\]{
+  margin-left: 1rem;
+}
+.mr-\[1rem\]{
+  margin-right: 1rem;
+}
+.mr-\[2rem\]{
+  margin-right: 2rem;
+}
+.mr-\[2\.3rem\]{
+  margin-right: 2.3rem;
+}
+.mr-\[2\.5rem\]{
+  margin-right: 2.5rem;
+}
+.mr-\[2\.6rem\]{
+  margin-right: 2.6rem;
+}
+.ml-\[1\.5rem\]{
+  margin-left: 1.5rem;
+}
+.mr-\[23rem\]{
+  margin-right: 23rem;
+}
+.mr-\[3rem\]{
+  margin-right: 3rem;
+}
+.mr-\[2\.8rem\]{
+  margin-right: 2.8rem;
+}
+.mr-\[2\.7rem\]{
+  margin-right: 2.7rem;
+}
+.mr-\[9\.7rem\]{
+  margin-right: 9.7rem;
+}
+.mr-\[12\.7rem\]{
+  margin-right: 12.7rem;
+}
+.mr-\[11\.7rem\]{
+  margin-right: 11.7rem;
+}
+.mr-\[12rem\]{
+  margin-right: 12rem;
+}
+.mr-\[7rem\]{
+  margin-right: 7rem;
+}
+.mr-\[3\.5rem\]{
+  margin-right: 3.5rem;
+}
+.mr-\[5rem\]{
+  margin-right: 5rem;
+}
+.mr-\[4rem\]{
+  margin-right: 4rem;
+}
+.mr-\[4\.2rem\]{
+  margin-right: 4.2rem;
+}
+.mr-\[2\.4rem\]{
+  margin-right: 2.4rem;
+}
+.mr-\[3\.7rem\]{
+  margin-right: 3.7rem;
+}
+.mr-\[2\.9rem\]{
+  margin-right: 2.9rem;
+}
+.mr-\[3\.8rem\]{
+  margin-right: 3.8rem;
+}
+.ml-\[3\.5rem\]{
+  margin-left: 3.5rem;
+}
+.ml-\[3\.6rem\]{
+  margin-left: 3.6rem;
+}
+.ml-\[3\.7rem\]{
+  margin-left: 3.7rem;
+}
+.ml-\[3\.75rem\]{
+  margin-left: 3.75rem;
+}
+.mr-\[2\.75rem\]{
+  margin-right: 2.75rem;
+}
+.mr-\[2\.74rem\]{
+  margin-right: 2.74rem;
+}
+.ml-\[2\.6rem\]{
+  margin-left: 2.6rem;
+}
+.ml-\[4\.25rem\]{
+  margin-left: 4.25rem;
+}
+.mr-\[3\.25rem\]{
+  margin-right: 3.25rem;
+}
+.mr-\[13rem\]{
+  margin-right: 13rem;
+}
+.mr-\[14rem\]{
+  margin-right: 14rem;
+}
+.mr-\[13\.5rem\]{
+  margin-right: 13.5rem;
+}
 .block{
   display: block;
 }
@@ -14295,15 +14432,15 @@ html{
 .h-\[83rem\]{
   height: 83rem;
 }
+.h-auto{
+  height: auto;
+}
 .h-full{
   height: 100%;
 }
 .h-screen{
   height: 100vh;
 }
-.h-auto{
-  height: auto;
-}
 .max-h-\[20rem\]{
   max-height: 20rem;
 }
@@ -14316,12 +14453,6 @@ html{
 .max-h-\[90vh\]{
   max-height: 90vh;
 }
-.max-h-32{
-  max-height: 8rem;
-}
-.max-h-\[70vh\]{
-  max-height: 70vh;
-}
 .min-h-\[15rem\]{
   min-height: 15rem;
 }
@@ -14346,9 +14477,6 @@ html{
 .min-h-screen{
   min-height: 100vh;
 }
-.min-h-\[70vh\]{
-  min-height: 70vh;
-}
 .w-1\/5{
   width: 20%;
 }
@@ -14397,6 +14525,75 @@ html{
 .w-full{
   width: 100%;
 }
+.w-\[4rem\]{
+  width: 4rem;
+}
+.w-\[6rem\]{
+  width: 6rem;
+}
+.w-\[5rem\]{
+  width: 5rem;
+}
+.w-\[2\.5rem\]{
+  width: 2.5rem;
+}
+.w-\[3rem\]{
+  width: 3rem;
+}
+.w-\[3\.5rem\]{
+  width: 3.5rem;
+}
+.w-\[4\.2rem\]{
+  width: 4.2rem;
+}
+.w-\[6\.2rem\]{
+  width: 6.2rem;
+}
+.w-\[7\.2rem\]{
+  width: 7.2rem;
+}
+.w-\[7rem\]{
+  width: 7rem;
+}
+.w-\[6\.9rem\]{
+  width: 6.9rem;
+}
+.w-\[10rem\]{
+  width: 10rem;
+}
+.w-\[16rem\]{
+  width: 16rem;
+}
+.w-\[6\.4rem\]{
+  width: 6.4rem;
+}
+.w-\[3\.2rem\]{
+  width: 3.2rem;
+}
+.w-\[3\.7rem\]{
+  width: 3.7rem;
+}
+.w-\[18rem\]{
+  width: 18rem;
+}
+.w-\[17rem\]{
+  width: 17rem;
+}
+.w-\[17\.2rem\]{
+  width: 17.2rem;
+}
+.w-\[17\.1rem\]{
+  width: 17.1rem;
+}
+.w-\[6\.5rem\]{
+  width: 6.5rem;
+}
+.w-\[5\.2rem\]{
+  width: 5.2rem;
+}
+.w-\[2\.75rem\]{
+  width: 2.75rem;
+}
 .min-w-\[1\.5rem\]{
   min-width: 1.5rem;
 }
@@ -14409,6 +14606,9 @@ html{
 .min-w-\[6rem\]{
   min-width: 6rem;
 }
+.min-w-\[70vw\]{
+  min-width: 70vw;
+}
 .min-w-full{
   min-width: 100%;
 }
@@ -14416,9 +14616,6 @@ html{
   min-width: -moz-max-content;
   min-width: max-content;
 }
-.min-w-\[70vw\]{
-  min-width: 70vw;
-}
 .max-w-6xl{
   max-width: 72rem;
 }
@@ -14437,6 +14634,9 @@ html{
 .max-w-\[40rem\]{
   max-width: 40rem;
 }
+.max-w-\[70vw\]{
+  max-width: 70vw;
+}
 .max-w-\[8rem\]{
   max-width: 8rem;
 }
@@ -14450,15 +14650,6 @@ html{
 .max-w-xl{
   max-width: 36rem;
 }
-.max-w-\[120rem\]{
-  max-width: 120rem;
-}
-.max-w-\[100rem\]{
-  max-width: 100rem;
-}
-.max-w-\[70vw\]{
-  max-width: 70vw;
-}
 .flex-1{
   flex: 1 1 0%;
 }
@@ -14719,6 +14910,10 @@ html{
 .border-transparent{
   border-color: transparent;
 }
+.border-cyan-600{
+  --tw-border-opacity: 1;
+  border-color: rgb(8 145 178 / var(--tw-border-opacity));
+}
 .border-opacity-40{
   --tw-border-opacity: 0.4;
 }
@@ -14757,6 +14952,10 @@ html{
   --tw-bg-opacity: 1;
   background-color: rgb(39 39 42 / var(--tw-bg-opacity));
 }
+.bg-red-400{
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+}
 .fill-red-400{
   fill: #f87171;
 }
@@ -14832,6 +15031,54 @@ html{
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
+.py-\[2rem\]{
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+.px-\[2rem\]{
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+.px-\[4rem\]{
+  padding-left: 4rem;
+  padding-right: 4rem;
+}
+.px-\[1rem\]{
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.px-\[4\.1rem\]{
+  padding-left: 4.1rem;
+  padding-right: 4.1rem;
+}
+.px-\[4\.3rem\]{
+  padding-left: 4.3rem;
+  padding-right: 4.3rem;
+}
+.px-\[4\.2rem\]{
+  padding-left: 4.2rem;
+  padding-right: 4.2rem;
+}
+.px-\[3rem\]{
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+.px-\[2\.5rem\]{
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+.px-\[2\.2rem\]{
+  padding-left: 2.2rem;
+  padding-right: 2.2rem;
+}
+.px-\[2\.3rem\]{
+  padding-left: 2.3rem;
+  padding-right: 2.3rem;
+}
+.px-\[2\.4rem\]{
+  padding-left: 2.4rem;
+  padding-right: 2.4rem;
+}
 .pb-4{
   padding-bottom: 1rem;
 }
@@ -14990,6 +15237,10 @@ html{
   --tw-text-opacity: 1;
   color: rgb(161 161 170 / var(--tw-text-opacity));
 }
+.text-cyan-600{
+  --tw-text-opacity: 1;
+  color: rgb(8 145 178 / var(--tw-text-opacity));
+}
 .underline{
   text-decoration-line: underline;
 }
diff --git a/resources/views/components/keyboard.blade.php b/resources/views/components/keyboard.blade.php
new file mode 100644
index 0000000..e49cdbe
--- /dev/null
+++ b/resources/views/components/keyboard.blade.php
@@ -0,0 +1,19 @@
+@props(['keys'])
+@php
+	$layout = [
+		0 => ['ESC' => ['ESC'],'F1' => ['F1', 'ml-[2.5rem] w-[2.5rem]'],'F2' => ['F2'],'F3' => ['F3'],'F4' => ['F4'],'F5' => ['F5', 'ml-[1rem] w-[2.5rem]'],'F6' => ['F6'],'F7' => ['F7'],'F8' => ['F8'],'F9' => ['F9', 'ml-[1rem] w-[2.5rem]'],'F10' => ['F10'],'F11' => ['F11'],'F12' => ['F12'], 'DRUCK' => ['DRUCK', 'ml-[1rem] w-[3rem] text-sm'], 'ROLLEN' => ['ROLLEN', 'w-[3rem] text-sm'], 'PAUSE' => ['PAUSE', 'w-[3rem] text-sm'], 'CAL' => ['CAL', 'ml-[1rem] w-[2.5rem]'], 'SPEAKER' => ['🔈'], 'SPEAKER_LOW' => ['🔉'], 'SPEAKER_HIGH' => ['🔊']],
+		1 => ['^' => ['^'], '1' => ['1'], '2' => ['2'], '3' => ['3'], '4' => ['4'], '5' => ['5'], '6' => ['6'], '7' => ['7'], '8' => ['8'], '9' => ['9'], '0' => ['0'], 'ß' => ['ß'], '´' => ['´'], 'BACKSPACE' => ['←', 'w-[4.2rem]'], 'EINFG' => ['EINFG', 'ml-[1rem] w-[3rem] text-sm'], 'POS1' => ['POS1', 'w-[3rem] text-sm'], 'BILD▲' => ['BILD▲', 'w-[3rem] text-sm'], 'NUM' => ['NUM', 'ml-[1rem] w-[2.5rem]'], 'NUM÷' => ['÷'], 'NUM*' => ['*'], 'NUM-' => ['-']],
+		2 => ['TAB' => ['⇄', 'w-[3.2rem]'], 'Q' => ['Q'], 'W' => ['W'], 'E' => ['E'], 'R' => ['R'], 'T' => ['T'], 'Z' => ['Z'], 'U' => ['U'], 'I' => ['I'], 'O' => ['O'], 'P' => ['P'], 'Ü' => ['Ü'], '+' => ['+'], 'RETURN' => ['↵', 'w-[3.5rem]'], 'ENTF' => ['ENTF', 'ml-[1rem] w-[3rem] text-sm'], 'ENDE' => ['ENDE', 'w-[3rem] text-sm'], 'BILD▼' => ['BILD▼', 'w-[3rem] text-sm'], 'NUM7' => ['7', 'ml-[1rem] w-[2.5rem]'], 'NUM8' => ['8'], 'NUM9' => ['9'], 'NUM+' => ['+']],
+		3 => ['CAPS' => ['⇓', 'w-[4.2rem]'], 'A' => ['A'], 'S' => ['S'], 'D' => ['D'], 'F' => ['F'], 'G' => ['G'], 'H' => ['H'], 'J' => ['J'], 'K' => ['K'], 'L' => ['L'], 'Ö' => ['Ö'], 'Ä' => ['Ä'], '#' => ['#', 'mr-[13.5rem] w-[2.5rem]'], 'NUM4' => ['4', 'ml-[1rem] w-[2.5rem]'], 'NUM5' => ['5'], 'NUM6' => ['6', 'mr-[2.74rem] w-[2.5rem]']],
+		4 => ['SHIFT' => ['⇧', 'w-[3rem]'], '<' => ['<'], 'Y' => ['Y'], 'X' => ['X'], 'C' => ['C'], 'V' => ['V'], 'B' => ['B'], 'N' => ['N'], 'M' => ['M'], ',' => [','], '.' => ['.'], '-' => ['-'], 'RSHIFT' => ['⇧', 'w-[6.5rem]'], 'UP' => ['▲', 'mr-[3.25rem] ml-[4.25rem] w-[3rem]'], 'NUM1' => ['1', 'ml-[1rem] w-[2.5rem]'], 'NUM2' => ['2'], 'NUM3' => ['3'], 'NUM↵' => ['↵']],
+		5 => ['CTRL' => ['CTRL', 'w-[3rem]'], 'HOME' => ['⌘', 'w-[3rem]'], 'ALT' => ['ALT', 'w-[3rem]'], 'SPACE' => ['SPACE', 'w-[17.2rem]'], 'ALTGR' => ['ALTGR', 'w-[3rem]'], 'RHOME' => ['⌘', 'w-[3rem]'], 'FN' => ['FN', 'w-[3rem]'], 'RCTRL' => ['CTRL', 'w-[3rem]'], 'LEFT' => ['◀︎', 'ml-[1rem] w-[3rem]'], 'DOWN' => ['▼', 'w-[3rem]'], 'RIGHT' => ['▶', 'w-[3rem]'], 'NUM0' => ['0', 'ml-[1rem] w-[5.2rem]'], 'NUM.' => ['.', 'mr-[2.75rem] w-[2.5rem]']],
+	]
+@endphp
+@foreach($layout as $row)
+	<div class="flex justify-center gap-1 my-1 w-full">
+		@foreach($row as $dbString => $key)
+			<kbd
+				class="kbd border-{{ env('ACCENT_COLOR') }} {{ in_array($key[0], $keys, true) ? ' bg-zinc-700' : ' bg-zinc-800' }} {{ $key[1] ?? 'w-[2.5rem]' }}">{{ $key[0] }}</kbd>
+		@endforeach
+	</div>
+@endforeach
\ No newline at end of file
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
index 92b4d90..688e61a 100644
--- a/resources/views/components/layout.blade.php
+++ b/resources/views/components/layout.blade.php
@@ -37,7 +37,7 @@
 	<!-- Scripts -->
 	<script src="{{ mix('js/app.js') }}" defer></script>
 </head>
-<body x-data="{ sidebarOpen: false }" class="antialiased bg-zinc-700 text-gray-400 scrollbar-thin scrollbar-thumb-red-400 scrollbar-track-zinc-700 scrollbar-corner-zinc-800 scrollbar-thumb-rounded"
+<body x-data="{ sidebarOpen: false }" class="antialiased bg-zinc-700 text-gray-400 scrollbar-thin scrollbar-thumb-{{ env('ACCENT_COLOR') }} scrollbar-track-zinc-700 scrollbar-corner-zinc-800 scrollbar-thumb-rounded"
       style="font-family: 'PT Sans',sans-serif;">
 <div class="min-h-screen">
 	<x-layout.sidebar/>
@@ -49,7 +49,7 @@
 				<div class="my-auto mx-auto flex">
 					<img src="{{ asset('img/logo.png') }}" alt="" class="h-[3.5rem] mx-2"/>
 					<div>
-						<h2 class="text-lg font-bold text-red-400">{{ env('APP_NAME') }}</h2>
+						<h2 class="text-lg font-bold text-{{ env('ACCENT_COLOR') }}">{{ env('APP_NAME') }}</h2>
 						<p>{{ env('APP_TITLE') }}</p>
 					</div>
 				</div>
diff --git a/resources/views/components/layout/breadcrumb.blade.php b/resources/views/components/layout/breadcrumb.blade.php
index ff51566..6ca833d 100644
--- a/resources/views/components/layout/breadcrumb.blade.php
+++ b/resources/views/components/layout/breadcrumb.blade.php
@@ -1,6 +1,6 @@
 @unless ($breadcrumbs->isEmpty())
-	<nav aria-label="breadcrumb" class="text-red-400 font-semibold">
-		<ol class="flex h-8 space-x-2 text-red-400">
+	<nav aria-label="breadcrumb" class="text-{{ env('ACCENT_COLOR') }} font-semibold">
+		<ol class="flex h-8 space-x-2 text-{{ env('ACCENT_COLOR') }}">
 			@foreach ($breadcrumbs as $breadcrumb)
 				@if (!is_null($breadcrumb->url) && $loop->first)
 					<li class="flex items-center">
@@ -9,7 +9,7 @@
 					</li>
 				@elseif(!is_null($breadcrumb->url) && !$loop->last)
 					<li class="flex items-center space-x-1">
-						<span class="text-red-400">/</span>
+						<span class="text-{{ env('ACCENT_COLOR') }}">/</span>
 						<a rel="noopener noreferrer" href="{{ $breadcrumb->url }}"
 						   class="flex items-center px-1 capitalize hover:underline">{{ $breadcrumb->title }}</a>
 					</li>
diff --git a/resources/views/components/layout/sidebar.blade.php b/resources/views/components/layout/sidebar.blade.php
index f469464..ede3bb9 100644
--- a/resources/views/components/layout/sidebar.blade.php
+++ b/resources/views/components/layout/sidebar.blade.php
@@ -4,10 +4,10 @@
 		class="flex flex-col p-3 bg-zinc-800 text-gray-400 h-screen w-14"
 		:class="sidebarOpen ? 'w-60' : ''">
 		<div class="space-y-3 h-full">
-			<div class="flex items-center justify-between text-red-400 h-[5rem]">
+			<div class="flex items-center justify-between text-{{ env('ACCENT_COLOR') }} h-[5rem]">
 				<h2 x-show="sidebarOpen" style="display: none;">{{ __('This is a sidebar') }}</h2>
 				<button x-on:click="sidebarOpen = ! sidebarOpen" class="p-2">
-					<i class="fas fa-bars fa-lg text-red-400"></i>
+					<i class="fas fa-bars fa-lg text-{{ env('ACCENT_COLOR') }}"></i>
 				</button>
 			</div>
 			<div class="flex-1">
@@ -15,13 +15,18 @@
 					@if(env('LANDING_PAGE', false))
 						<x-layout.sidebar.list-element href="{{ route('home') }}" title="{{ __('Home') }}">
 							<x-slot:icon>
-								<i class="fa-solid fa-house-chimney fa-lg text-red-400"></i>
+								<i class="fa-solid fa-house-chimney fa-lg text-{{ env('ACCENT_COLOR') }}"></i>
 							</x-slot:icon>
 						</x-layout.sidebar.list-element>
 					@endif
+						<x-layout.sidebar.list-element href="{{ route('keybinds') }}" title="{{ __('Keybinds') }}" class="h-[2rem]">
+							<x-slot:icon>
+								<i class="fa-solid fa-keyboard fa-lg text-{{ env('ACCENT_COLOR') }}"></i>
+							</x-slot:icon>
+						</x-layout.sidebar.list-element>
 						<x-layout.sidebar.list-element href="{{ route('vehicles') }}" title="{{ __('Vehicles') }}" class="h-[2rem]">
 							<x-slot:icon>
-								<i class="fa-solid fa-car fa-lg text-red-400"></i>
+								<i class="fa-solid fa-car fa-lg text-{{ env('ACCENT_COLOR') }}"></i>
 							</x-slot:icon>
 						</x-layout.sidebar.list-element>
 				</ul>
@@ -32,19 +37,19 @@
 				@if(!Auth::check())
 					<x-layout.sidebar.list-element href="{{ route('login') }}" title="{{ __('Login')}}">
 						<x-slot:icon>
-							<i class="fa-solid fa-right-to-bracket fa-lg text-red-400"></i>
+							<i class="fa-solid fa-right-to-bracket fa-lg text-{{ env('ACCENT_COLOR') }}"></i>
 						</x-slot:icon>
 					</x-layout.sidebar.list-element>
 				@endif
 				@if(Auth::check())
 						<x-layout.sidebar.list-element href="{{ route('logout') }}" title="{{ __('Logout') }}">
 							<x-slot:icon>
-								<i class="fa-solid fa-door-open fa-lg text-red-400"></i>
+								<i class="fa-solid fa-door-open fa-lg text-{{ env('ACCENT_COLOR') }}"></i>
 							</x-slot:icon>
 						</x-layout.sidebar.list-element>
 						<x-layout.sidebar.list-element href="{{ route('dashboard') }}" title="{{ __('Dashboard') }}">
 							<x-slot:icon>
-								<i class="fa-solid fa-user fa-lg text-red-400"></i>
+								<i class="fa-solid fa-user fa-lg text-{{ env('ACCENT_COLOR') }}"></i>
 							</x-slot:icon>
 						</x-layout.sidebar.list-element>
 				@endif
@@ -52,7 +57,7 @@
 		</div>
 		@auth()
 			<div x-show="sidebarOpen" style="display: none;" class="flex items-center space-x-4 justify-self-end">
-				<h2 class="text-lg font-semibold text-red-400"><a rel="noopener noreferrer" href="{{ route('profile.edit') }}">{{ Auth::getUser()->getName() }}</a></h2>
+				<h2 class="text-lg font-semibold text-{{ env('ACCENT_COLOR') }}"><a rel="noopener noreferrer" href="{{ route('profile.edit') }}">{{ Auth::getUser()->getName() }}</a></h2>
 			</div>
 		@endauth
 	</div>
diff --git a/resources/views/components/primary-button.blade.php b/resources/views/components/primary-button.blade.php
index a3a37d4..37de8c9 100644
--- a/resources/views/components/primary-button.blade.php
+++ b/resources/views/components/primary-button.blade.php
@@ -1,3 +1,3 @@
-<button {{ $attributes->merge(['type' => 'submit', 'class' => 'w-full border border-red-400 px-8 py-3 font-semibold rounded-md hover:bg-zinc-700 active:bg-zinc-700 focus-visible:outline-none focus:border-red-500 focus:ring-red-500']) }}>
+<button {{ $attributes->merge(['type' => 'submit', 'class' => 'w-full border border-' . env('ACCENT_COLOR') . ' px-8 py-3 font-semibold rounded-md hover:bg-zinc-700 active:bg-zinc-700 focus-visible:outline-none focus:border-red-500 focus:ring-red-500']) }}>
     {{ $slot }}
 </button>
diff --git a/resources/views/components/searchbar-select2.blade.php b/resources/views/components/searchbar-select2.blade.php
index 05a635d..a0542f3 100644
--- a/resources/views/components/searchbar-select2.blade.php
+++ b/resources/views/components/searchbar-select2.blade.php
@@ -7,10 +7,10 @@
 	<div id="searchContainer" class="flex max-w-min md:min-w-[25rem] mx-auto">
 		<noscript class="flex">
 			<input id="search" name="search"
-			        class="input input-bordered bg-zinc-800 border-red-400 focus:bg-zinc-700 placeholder-gray-400 rounded-l-lg rounded-r-none w-[23rem]" placeholder="{{ $placeholder }}"/>
+			        class="input input-bordered bg-zinc-800 border-{{ env('ACCENT_COLOR') }} focus:bg-zinc-700 placeholder-gray-400 rounded-l-lg rounded-r-none w-[23rem]" placeholder="{{ $placeholder }}"/>
 			<button type="submit" id="select2-btn"
-			        class="btn btn-square bg-zinc-800 border-red-400 hover:bg-zinc-700 rounded-l-none rounded-r-lg">
-				<i class="fa-solid fa-magnifying-glass fa-lg text-red-400"></i>
+			        class="btn btn-square bg-zinc-800 border-{{ env('ACCENT_COLOR') }} hover:bg-zinc-700 rounded-l-none rounded-r-lg">
+				<i class="fa-solid fa-magnifying-glass fa-lg text-{{ env('ACCENT_COLOR') }}"></i>
 			</button>
 		</noscript>
 	</div>
@@ -42,11 +42,11 @@
 	}
 
 	window.addEventListener('load', () => {
-		document.getElementById('searchContainer').innerHTML = '<button type="button" x-on:click="$(\'#search\').val(\'\').change();" class="btn btn-square bg-zinc-800 border-red-400 hover:bg-zinc-700 rounded-l-lg rounded-r-none">'
-			+ '<i class="fa-solid fa-x fa-xs text-red-400"></i></button>'
-			+ '<select id="search" name="search" class="bg-zinc-800 border-red-400 focus:bg-zinc-700 placeholder-gray-400 rounded-none w-[21rem]"></select>'
-			+ '<button type="submit" id="select2-btn" class="btn btn-square bg-zinc-800 border-red-400 hover:bg-zinc-700 rounded-l-none rounded-r-lg">'
-			+ '<i class="fa-solid fa-magnifying-glass fa-lg text-red-400"></i></button>';
+		document.getElementById('searchContainer').innerHTML = '<button type="button" x-on:click="$(\'#search\').val(\'\').change();" class="btn btn-square bg-zinc-800 border-{{ env('ACCENT_COLOR') }} hover:bg-zinc-700 rounded-l-lg rounded-r-none">'
+			+ '<i class="fa-solid fa-x fa-xs text-{{ env('ACCENT_COLOR') }}"></i></button>'
+			+ '<select id="search" name="search" class="bg-zinc-800 border-{{ env('ACCENT_COLOR') }} focus:bg-zinc-700 placeholder-gray-400 rounded-none w-[21rem]"></select>'
+			+ '<button type="submit" id="select2-btn" class="btn btn-square bg-zinc-800 border-{{ env('ACCENT_COLOR') }} hover:bg-zinc-700 rounded-l-none rounded-r-lg">'
+			+ '<i class="fa-solid fa-magnifying-glass fa-lg text-{{ env('ACCENT_COLOR') }}"></i></button>';
 
 		$('#search').on('select2:select', function (e) {
 			document.getElementById('select2-btn').focus();
diff --git a/resources/views/components/section.blade.php b/resources/views/components/section.blade.php
index cd7f054..81cd199 100644
--- a/resources/views/components/section.blade.php
+++ b/resources/views/components/section.blade.php
@@ -1,3 +1,3 @@
-<section {{ $attributes(['class' => 'border-b-2 border-red-400 pb-4']) }}>
+<section {{ $attributes(['class' => 'border-b-2 border-' . env('ACCENT_COLOR') . ' pb-4']) }}>
     {{ $slot }}
 </section>
diff --git a/resources/views/components/select-dropdown-hover.blade.php b/resources/views/components/select-dropdown-hover.blade.php
index 0db3a5a..ce2a0b9 100644
--- a/resources/views/components/select-dropdown-hover.blade.php
+++ b/resources/views/components/select-dropdown-hover.blade.php
@@ -1,7 +1,7 @@
 @props(['enums' => null, 'alpineVariable', 'placeholder', 'default' => null, 'functionCall' => null, 'bool' => false, 'boolTrue' => 'True', 'boolFalse' => 'False', 'multiple' => false])
 <noscript>
 	<select id="{{ $alpineVariable }}" tabindex="0"
-	        class="border w-[20rem] bg-zinc-800 border-red-400 placeholder-gray-400 rounded-lg max-h-[20rem] overflow-y-auto text-left text-wrap" {{ $multiple && !$bool ? 'multiple' : '' }}>
+	        class="border w-[20rem] bg-zinc-800 border-{{ env('ACCENT_COLOR') }} placeholder-gray-400 rounded-lg max-h-[20rem] overflow-y-auto text-left text-wrap" {{ $multiple && !$bool ? 'multiple' : '' }}>
 		<option
 			class="focus:bg-zinc-700 hover:bg-zinc-700 active:bg-zinc-700 hover:text-gray-200 active:text-gray-200 focus:text-gray-200"
 			value="">{{ $placeholder }}</option>
@@ -27,10 +27,10 @@
 	window.addEventListener('load', () => {
 		document.getElementById('{{ $alpineVariable }}-container').innerHTML = '<div class="dropdown dropdown-hover mx-auto" x-data="{ {{ $alpineVariable }}: {{ !empty(app('request')->input($alpineVariable)) ? json_encode(explode(',', app('request')->input($alpineVariable))) : json_encode([]) }} }">'
 			+ '<div class="flex"><input name="{{ $alpineVariable }}" class="hidden" value="" x-bind:value="{{ $alpineVariable }}"/>'
-			+ '<label tabindex="0" class="btn w-[11rem] bg-zinc-800 border-red-400 focus:bg-zinc-700 hover:bg-zinc-700 placeholder-gray-400 rounded-l-lg rounded-r-none normal-case font-normal" x-text="{{ $alpineVariable }}.length != 0 ? ({{ json_encode($multiple) }} ? {{ "'" . $placeholder . " ('" }} + {{ $alpineVariable }}.length + \' picked)\' : {{ $alpineVariable }}.join(\', \')) : {{ "'" . $placeholder . "'" }}"></label>'
-			+ '<button type="button" x-on:click="{{ $alpineVariable }} = []" class="btn btn-square bg-zinc-800 border-red-400 hover:bg-zinc-700 rounded-l-none rounded-r-lg max-w-[2rem]">'
-			+ '<i class="fa-solid fa-x fa-xs text-red-400"></i></button></div>'
-			+ '<ul tabindex="0" class="dropdown-content border menu flex-nowrap shadow rounded-box w-[13rem] bg-zinc-800 border-red-400 placeholder-gray-400 rounded-lg max-h-[20rem] overflow-y-auto text-left">'
+			+ '<label tabindex="0" class="btn w-[11rem] bg-zinc-800 border-{{ env('ACCENT_COLOR') }} focus:bg-zinc-700 hover:bg-zinc-700 placeholder-gray-400 rounded-l-lg rounded-r-none normal-case font-normal" x-text="{{ $alpineVariable }}.length != 0 ? ({{ json_encode($multiple) }} ? {{ "'" . $placeholder . " ('" }} + {{ $alpineVariable }}.length + \' picked)\' : {{ $alpineVariable }}.join(\', \')) : {{ "'" . $placeholder . "'" }}"></label>'
+			+ '<button type="button" x-on:click="{{ $alpineVariable }} = []" class="btn btn-square bg-zinc-800 border-{{ env('ACCENT_COLOR') }} hover:bg-zinc-700 rounded-l-none rounded-r-lg max-w-[2rem]">'
+			+ '<i class="fa-solid fa-x fa-xs text-{{ env('ACCENT_COLOR') }}"></i></button></div>'
+			+ '<ul tabindex="0" class="dropdown-content border menu flex-nowrap shadow rounded-box w-[13rem] bg-zinc-800 border-{{ env('ACCENT_COLOR') }} placeholder-gray-400 rounded-lg max-h-[20rem] overflow-y-auto text-left">'
 			@if($bool)
 				+ '<li><a class="focus:bg-zinc-700 hover:bg-zinc-700 active:bg-zinc-700 hover:text-gray-200 active:text-gray-200 focus:text-gray-200" x-on:click="{{ $alpineVariable . '.includes(\'' . $boolTrue . '\') ? ' . $alpineVariable . '.splice(' . $alpineVariable .'.indexOf(\'' . $boolTrue . '\'), 1) : ' . $alpineVariable . ' = [\'' . $boolTrue . '\'];' }}">{{ $boolTrue }}</a></li>'
 				+ '<li><a class="focus:bg-zinc-700 hover:bg-zinc-700 active:bg-zinc-700 hover:text-gray-200 active:text-gray-200 focus:text-gray-200" x-on:click="{{ $alpineVariable . '.includes(\'' . $boolFalse . '\') ? ' . $alpineVariable . '.splice(' . $alpineVariable .'.indexOf(\'' . $boolFalse . '\'), 1) : ' . $alpineVariable . ' = [\'' . $boolFalse . '\'];' }}">{{ $boolFalse }}</a></li>'
diff --git a/resources/views/components/table/row.blade.php b/resources/views/components/table/row.blade.php
index 28ed441..25ccdd9 100644
--- a/resources/views/components/table/row.blade.php
+++ b/resources/views/components/table/row.blade.php
@@ -5,7 +5,7 @@
             $type = $args['type'];
             $value = $args['value'] ?? ($type === 'int' ? 0 : '');
             $rowType = 'div';
-            $classes = ['p-3 border-opacity-40 border-red-400 grow basis-0 border min-w-[6rem]', ($type === 'int' ? 'text-right' : 'text-left'), ($mode === 'tableVertical' ? 'max-w-[8rem] min-h-[5rem]' : ''), ($header ? 'font-bold' : '')];
+            $classes = ['p-3 border-opacity-40 border-' . env('ACCENT_COLOR') . ' grow basis-0 border min-w-[6rem]', ($type === 'int' ? 'text-right' : 'text-left'), ($mode === 'tableVertical' ? 'max-w-[8rem] min-h-[5rem]' : ''), ($header ? 'font-bold' : '')];
             $html = '<' . $rowType . ' class="' . implode(' ', $classes) . '">';
 			$valueHtml = match ($type) {
 				'string' => $value,
@@ -14,7 +14,7 @@
 			};
 
 	        if (!empty($args['link'])) {
-	            $html .= '<a class="text-red-400" href="' . $args['link'] . '">' . $valueHtml . '</a>';
+	            $html .= '<a class="text-' . env('ACCENT_COLOR') . '" href="' . $args['link'] . '">' . $valueHtml . '</a>';
 	        } else {
                 $html .= $valueHtml;
 	        }
diff --git a/resources/views/components/table/table.blade.php b/resources/views/components/table/table.blade.php
index 7a756d5..112fbf5 100644
--- a/resources/views/components/table/table.blade.php
+++ b/resources/views/components/table/table.blade.php
@@ -1,6 +1,6 @@
 @props(['mode', 'values'])
 <div
-	class="min-w-full max-h-[90vh] bg-zinc-800 rounded-[1rem] overflow-y-auto border-opacity-40 border-red-400 border-l border-t {{ $mode === 'tableVertical' ? 'border-r' : 'border-b' }} last:border-none scrollbar-thin">
+	class="min-w-full max-h-[90vh] bg-zinc-800 rounded-[1rem] overflow-y-auto border-opacity-40 border-{{ env('ACCENT_COLOR') }} border-l border-t {{ $mode === 'tableVertical' ? 'border-r' : 'border-b' }} last:border-none scrollbar-thin">
 	<div class="mx-auto min-w-max {{ $mode === 'tableVertical' ? 'flex' : '' }}">
 		@foreach($values as $index => $value)
 			<x-table.row :header="$index === 0" :values="$value"
diff --git a/resources/views/components/text-input.blade.php b/resources/views/components/text-input.blade.php
index 7714fb3..caad627 100644
--- a/resources/views/components/text-input.blade.php
+++ b/resources/views/components/text-input.blade.php
@@ -1,3 +1,3 @@
 @props(['disabled' => false])
 
-<input {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'border-red-400 focus:border-red-500 focus:ring-red-500 rounded-md shadow-sm w-full px-3 py-2 border bg-transparent']) !!}>
+<input {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'border-' . env('ACCENT_COLOR') . ' focus:border-red-500 focus:ring-red-500 rounded-md shadow-sm w-full px-3 py-2 border bg-transparent']) !!}>
diff --git a/resources/views/components/vehicles/card.blade.php b/resources/views/components/vehicles/card.blade.php
index 600deeb..3ea9419 100644
--- a/resources/views/components/vehicles/card.blade.php
+++ b/resources/views/components/vehicles/card.blade.php
@@ -5,7 +5,7 @@
 @endphp
 
 <div
-	class="flex flex-col w-full max-w-[40rem] min-h-[40rem] p-6 space-y-6 overflow-hidden rounded-lg shadow-md bg-zinc-800 text-red-400 m-auto border border-red-400">
+	class="flex flex-col w-full max-w-[40rem] min-h-[40rem] p-6 space-y-6 overflow-hidden rounded-lg shadow-md bg-zinc-800 text-{{ env('ACCENT_COLOR') }} m-auto border border-{{ env('ACCENT_COLOR') }}">
 	<div>
 		<label for="image_modal_{{ 'img/vehicles/' . $vehicle->getVehicleId() . '.png' }}"><img src="{{ asset('img/vehicles/' . $vehicle->getVehicleId() . '.png') }}" alt="Photo of {{ $vehicle->getVehicleName() }}"
 			class="rounded-xl cursor-pointer" width="100%"></label>
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 27e2c8a..e06d988 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -3,9 +3,54 @@
 		{{ Breadcrumbs::render('home') }}
 	</x-slot:breadcrumb>
 	<x-slot name="header">
-		<h1 class="text-lg text-center font-bold">{{ __('Welcome home') }}</h1>
-		{{ __('GG man! You just found my website.') }}<br>
-		{{ __('You can leave again tho. Nothing to see here.') }}
+		<h1 class="text-lg text-center font-bold">{{ __('Keyboard test') }}</h1>
+		<div class="flex justify-center gap-1 my-1 w-full">
+			<kbd class="kbd">ESC</kbd>
+			<kbd class="kbd">F1</kbd>
+			<kbd class="kbd">F2</kbd>
+			<kbd class="kbd">F3</kbd>
+			<kbd class="kbd">F4</kbd>
+			<kbd class="kbd">F5</kbd>
+			<kbd class="kbd">F6</kbd>
+			<kbd class="kbd">F7</kbd>
+			<kbd class="kbd">F8</kbd>
+			<kbd class="kbd">F9</kbd>
+			<kbd class="kbd">F10</kbd>
+			<kbd class="kbd">F11</kbd>
+			<kbd class="kbd">F12</kbd>
+		</div>
+		<div class="flex justify-center gap-1 my-1 w-full">
+			<kbd class="kbd">q</kbd>
+			<kbd class="kbd">w</kbd>
+			<kbd class="kbd">e</kbd>
+			<kbd class="kbd">r</kbd>
+			<kbd class="kbd">t</kbd>
+			<kbd class="kbd">z</kbd>
+			<kbd class="kbd">u</kbd>
+			<kbd class="kbd">i</kbd>
+			<kbd class="kbd">o</kbd>
+			<kbd class="kbd">p</kbd>
+		</div>
+		<div class="flex justify-center gap-1 my-1 w-full">
+			<kbd class="kbd">a</kbd>
+			<kbd class="kbd">s</kbd>
+			<kbd class="kbd">d</kbd>
+			<kbd class="kbd">f</kbd>
+			<kbd class="kbd">g</kbd>
+			<kbd class="kbd">h</kbd>
+			<kbd class="kbd">j</kbd>
+			<kbd class="kbd">k</kbd>
+			<kbd class="kbd">l</kbd>
+		</div>
+		<div class="flex justify-center gap-1 my-1 w-full">
+			<kbd class="kbd">y</kbd>
+			<kbd class="kbd">x</kbd>
+			<kbd class="kbd">c</kbd>
+			<kbd class="kbd">v</kbd>
+			<kbd class="kbd">b</kbd>
+			<kbd class="kbd">n</kbd>
+			<kbd class="kbd">m</kbd>
+			<kbd class="kbd">/</kbd>
+		</div>
 	</x-slot>
-	<img alt="" src="{{ asset('img/emotes/shurizGG/shurizGG_original.png') }}" class="max-h-[20rem] block mx-auto"/>
 </x-layout>
\ No newline at end of file
diff --git a/resources/views/keybinds.blade.php b/resources/views/keybinds.blade.php
new file mode 100644
index 0000000..35b8e00
--- /dev/null
+++ b/resources/views/keybinds.blade.php
@@ -0,0 +1,26 @@
+@php
+/** @var \App\Models\Keybind $keybind */
+$allKeys = [];
+foreach ($keybinds as $keybind) {
+    $allKeys = array_merge(explode(env('KEYBIND_SEPERATOR'), $keybind->getKeybindKeys()), $allKeys);
+}
+@endphp
+<x-layout title="{{ __('Keybinds') }}">
+	<x-slot:breadcrumb>
+		{{ Breadcrumbs::render('keybinds') }}
+	</x-slot:breadcrumb>
+	<x-slot name="header">
+		<h1 class="text-lg text-center font-bold">{{ __('Keybinds') }}</h1>
+		<x-keyboard :keys="$allKeys"/>
+	</x-slot>
+	@foreach($keybinds as $keybind)
+		<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 bg-zinc-800 rounded-[1rem] my-[1rem] text-center grid grid-cols-2">
+			<div>
+			@foreach(explode(env('KEYBIND_SEPERATOR'), $keybind->getKeybindKeys()) as $index => $key)
+				@if($index > 0) + @endif<kbd class="kbd bg-zinc-800 border-{{ env('ACCENT_COLOR') }}">{{ $key }}</kbd>
+			@endforeach
+			</div>
+			{{ $keybind->getKeybindDescription() }}
+		</div>
+	@endforeach
+</x-layout>
\ No newline at end of file
diff --git a/resources/views/vendor/pagination/tailwind.blade.php b/resources/views/vendor/pagination/tailwind.blade.php
index 30da2a7..f7d1c08 100644
--- a/resources/views/vendor/pagination/tailwind.blade.php
+++ b/resources/views/vendor/pagination/tailwind.blade.php
@@ -4,24 +4,24 @@
 		<div class="flex justify-between flex-1 md:hidden">
 			@if ($paginator->onFirstPage())
 				<span
-					class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-red-400 bg-zinc-700 hover:bg-zinc-700 border border-red-400 cursor-default leading-5 rounded-md">
+					class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-{{ env('ACCENT_COLOR') }} bg-zinc-700 hover:bg-zinc-700 border border-{{ env('ACCENT_COLOR') }} cursor-default leading-5 rounded-md">
                     {!! __('pagination.previous') !!}
                 </span>
 			@else
 				<a href="{{ $paginator->previousPageUrl() }}"
-				   class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-red-400 bg-zinc-800 hover:bg-zinc-700 border border-red-400 leading-5 rounded-md focus:outline-none focus:border-blue-300 active:bg-zinc-100 active:text-zinc-700 transition ease-in-out duration-150">
+				   class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-{{ env('ACCENT_COLOR') }} bg-zinc-800 hover:bg-zinc-700 border border-{{ env('ACCENT_COLOR') }} leading-5 rounded-md focus:outline-none focus:border-blue-300 active:bg-zinc-100 active:text-zinc-700 transition ease-in-out duration-150">
 					{!! __('pagination.previous') !!}
 				</a>
 			@endif
 
 			@if ($paginator->hasMorePages())
 				<a href="{{ $paginator->nextPageUrl() }}"
-				   class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-red-400 bg-zinc-800 hover:bg-zinc-700 border border-red-400 leading-5 rounded-md focus:outline-none focus:border-blue-300 active:bg-zinc-100 active:text-zinc-700 transition ease-in-out duration-150">
+				   class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-{{ env('ACCENT_COLOR') }} bg-zinc-800 hover:bg-zinc-700 border border-{{ env('ACCENT_COLOR') }} leading-5 rounded-md focus:outline-none focus:border-blue-300 active:bg-zinc-100 active:text-zinc-700 transition ease-in-out duration-150">
 					{!! __('pagination.next') !!}
 				</a>
 			@else
 				<span
-					class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-red-400 bg-zinc-700 hover:bg-zinc-700 border border-red-400 cursor-default leading-5 rounded-md">
+					class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-{{ env('ACCENT_COLOR') }} bg-zinc-700 hover:bg-zinc-700 border border-{{ env('ACCENT_COLOR') }} cursor-default leading-5 rounded-md">
                     {!! __('pagination.next') !!}
                 </span>
 			@endif
@@ -46,7 +46,7 @@
 	                @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-red-400 bg-zinc-800 hover:bg-zinc-700 border border-red-400 cursor-default rounded-l-md leading-5"
+	                            class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-{{ env('ACCENT_COLOR') }} bg-zinc-800 hover:bg-zinc-700 border border-{{ env('ACCENT_COLOR') }} cursor-default rounded-l-md leading-5"
 	                            aria-hidden="true">
                                 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                     <path fill-rule="evenodd"
@@ -57,7 +57,7 @@
                         </span>
 	                @else
 		                <a href="{{ $paginator->previousPageUrl() }}" rel="prev"
-		                   class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-red-400 bg-zinc-800 hover:bg-zinc-700 border border-red-400 rounded-l-md leading-5 hover:text-red-400 focus:z-10 focus:outline-none focus:border-blue-300 active:bg-zinc-100 active:text-red-400 transition ease-in-out duration-150"
+		                   class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-{{ env('ACCENT_COLOR') }} bg-zinc-800 hover:bg-zinc-700 border border-{{ env('ACCENT_COLOR') }} rounded-l-md leading-5 hover:text-{{ env('ACCENT_COLOR') }} focus:z-10 focus:outline-none focus:border-blue-300 active:bg-zinc-100 active:text-{{ env('ACCENT_COLOR') }} transition ease-in-out duration-150"
 		                   aria-label="{{ __('pagination.previous') }}">
                             <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                 <path fill-rule="evenodd"
@@ -73,7 +73,7 @@
 		                @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-red-400 bg-zinc-800 hover:bg-zinc-700 border border-red-400 cursor-default leading-5">{{ $element }}</span>
+	                                class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-{{ env('ACCENT_COLOR') }} bg-zinc-800 hover:bg-zinc-700 border border-{{ env('ACCENT_COLOR') }} cursor-default leading-5">{{ $element }}</span>
                             </span>
 		                @endif
 
@@ -83,11 +83,11 @@
 				                @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-red-400 bg-zinc-700 hover:bg-zinc-700 border border-red-400 cursor-default leading-5">{{ $page }}</span>
+	                                        class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-{{ env('ACCENT_COLOR') }} bg-zinc-700 hover:bg-zinc-700 border border-{{ env('ACCENT_COLOR') }} cursor-default leading-5">{{ $page }}</span>
                                     </span>
 				                @else
 					                <a href="{{ $url }}"
-					                   class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-red-400 bg-zinc-800 hover:bg-zinc-700 border border-red-400 leading-5 hover:text-red-400 focus:z-10 focus:outline-none focus:border-blue-300 active:bg-zinc-100 active:text-red-400 transition ease-in-out duration-150"
+					                   class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-{{ env('ACCENT_COLOR') }} bg-zinc-800 hover:bg-zinc-700 border border-{{ env('ACCENT_COLOR') }} leading-5 hover:text-{{ env('ACCENT_COLOR') }} focus:z-10 focus:outline-none focus:border-blue-300 active:bg-zinc-100 active:text-{{ env('ACCENT_COLOR') }} transition ease-in-out duration-150"
 					                   aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
                                         {{ $page }}
                                     </a>
@@ -99,7 +99,7 @@
 	                {{-- Next Page Link --}}
 	                @if ($paginator->hasMorePages())
 		                <a href="{{ $paginator->nextPageUrl() }}" rel="next"
-		                   class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-red-400 bg-zinc-800 hover:bg-zinc-700 border border-red-400 rounded-r-md leading-5 hover:text-red-400 focus:z-10 focus:outline-none focus:border-blue-300 active:bg-zinc-100 active:text-red-400 transition ease-in-out duration-150"
+		                   class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-{{ env('ACCENT_COLOR') }} bg-zinc-800 hover:bg-zinc-700 border border-{{ env('ACCENT_COLOR') }} rounded-r-md leading-5 hover:text-{{ env('ACCENT_COLOR') }} focus:z-10 focus:outline-none focus:border-blue-300 active:bg-zinc-100 active:text-{{ env('ACCENT_COLOR') }} transition ease-in-out duration-150"
 		                   aria-label="{{ __('pagination.next') }}">
                             <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                 <path fill-rule="evenodd"
@@ -110,7 +110,7 @@
 	                @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-red-400 bg-zinc-800 hover:bg-zinc-700 border border-red-400 cursor-default rounded-r-md leading-5"
+	                            class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-{{ env('ACCENT_COLOR') }} bg-zinc-800 hover:bg-zinc-700 border border-{{ env('ACCENT_COLOR') }} cursor-default rounded-r-md leading-5"
 	                            aria-hidden="true">
                                 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                     <path fill-rule="evenodd"
diff --git a/routes/breadcrumbs.php b/routes/breadcrumbs.php
index a5ab945..f7f13d9 100644
--- a/routes/breadcrumbs.php
+++ b/routes/breadcrumbs.php
@@ -16,6 +16,12 @@ Breadcrumbs::for('404', function (BreadcrumbTrail $trail) {
     $trail->push(__('404 | Not found'), route('home'));
 });
 
+// Home > Keybinds
+Breadcrumbs::for('keybinds', function (BreadcrumbTrail $trail) {
+    $trail->parent('home');
+    $trail->push(__('Keybinds'), route('keybinds'));
+});
+
 // Home > Vehicles
 Breadcrumbs::for('vehicles', function (BreadcrumbTrail $trail) {
     $trail->parent('home');
diff --git a/routes/web.php b/routes/web.php
index 8b3e012..6ba1f07 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\KeybindController;
 use App\Http\Controllers\ProfileController;
 use App\Http\Controllers\VehicleController;
 use Illuminate\Support\Facades\Route;
@@ -23,6 +24,8 @@ Route::get('/', static function () {
     return view('home');
 })->name('home');
 
+Route::get('/keybinds', [KeybindController::class, 'index'])->name('keybinds');
+
 Route::get('/vehicles', [VehicleController::class, 'index'])->name('vehicles');
 Route::get('/vehicles/autocomplete', [VehicleController::class, 'autocomplete'])->name('vehicles.autocomplete');