diff --git a/app/Console/Commands/ResetDemoSettings.php b/app/Console/Commands/ResetDemoSettings.php
index 2a7621ee91..eb1a1ea097 100644
--- a/app/Console/Commands/ResetDemoSettings.php
+++ b/app/Console/Commands/ResetDemoSettings.php
@@ -50,8 +50,8 @@ class ResetDemoSettings extends Command
         $settings->alert_email = 'service@snipe-it.io';
         $settings->login_note = 'Use `admin` / `password` to login to the demo.';
         $settings->header_color = '#3c8dbc';
-        $settings->link_dark_color = '#296282';
-        $settings->link_light_color = '#296282;';
+        $settings->link_dark_color = '#084d73';
+        $settings->link_light_color = '#86cbf2;';
         $settings->label2_2d_type = 'QRCODE';
         $settings->default_currency = 'USD';
         $settings->brand = 2;
@@ -81,6 +81,8 @@ class ResetDemoSettings extends Command
 
         if ($user = User::where('username', '=', 'admin')->first()) {
             $user->locale = 'en-US';
+            $user->enable_confetti = 1;
+            $user->enable_sounds = 1;
             $user->save();
         }
 
diff --git a/app/Http/Controllers/ProfileController.php b/app/Http/Controllers/ProfileController.php
index d1ae6afab9..f9dbe04700 100755
--- a/app/Http/Controllers/ProfileController.php
+++ b/app/Http/Controllers/ProfileController.php
@@ -56,6 +56,9 @@ class ProfileController extends Controller
         $user->phone = $request->input('phone');
         $user->enable_sounds = $request->input('enable_sounds', false);
         $user->enable_confetti = $request->input('enable_confetti', false);
+        $user->link_light_color = $request->input('link_light_color', '#296282');
+        $user->link_dark_color = $request->input('link_dark_color', '#296282');
+        $user->nav_link_color = $request->input('nav_link_color', '#FFFFFF');
 
         if (! config('app.lock_passwords')) {
             $user->locale = $request->input('locale');
diff --git a/app/Http/Controllers/SettingsController.php b/app/Http/Controllers/SettingsController.php
index 6eb136365a..41bbfcf86a 100644
--- a/app/Http/Controllers/SettingsController.php
+++ b/app/Http/Controllers/SettingsController.php
@@ -402,6 +402,7 @@ class SettingsController extends Controller
         $setting->header_color = $request->input('header_color');
         $setting->link_light_color = $request->input('link_light_color', '#296282');
         $setting->link_dark_color = $request->input('link_dark_color', '#296282');
+        $setting->nav_link_color = $request->input('nav_link_color', '#FFFFFF');
         $setting->support_footer = $request->input('support_footer');
         $setting->version_footer = $request->input('version_footer');
         $setting->footer_text = $request->input('footer_text');
diff --git a/app/Http/Kernel.php b/app/Http/Kernel.php
index 729fe75175..f8005879e5 100644
--- a/app/Http/Kernel.php
+++ b/app/Http/Kernel.php
@@ -44,6 +44,7 @@ class Kernel extends HttpKernel
             \App\Http\Middleware\CheckForTwoFactor::class,
             \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
             \App\Http\Middleware\AssetCountForSidebar::class,
+            \App\Http\Middleware\CheckColorSettings::class,
             \Illuminate\Session\Middleware\AuthenticateSession::class,
             \Illuminate\Routing\Middleware\SubstituteBindings::class,
         ],
diff --git a/app/Http/Middleware/CheckColorSettings.php b/app/Http/Middleware/CheckColorSettings.php
new file mode 100644
index 0000000000..be3a039e4c
--- /dev/null
+++ b/app/Http/Middleware/CheckColorSettings.php
@@ -0,0 +1,68 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use App\Models\Setting;
+use Closure;
+use Illuminate\Contracts\Auth\Guard;
+use Illuminate\Support\Facades\Auth;
+
+class CheckColorSettings
+{
+    /**
+     * The Guard implementation.
+     *
+     * @var Guard
+     */
+    protected $auth;
+
+    /**
+     * Create a new filter instance.
+     *
+     * @param  Guard  $auth
+     * @return void
+     */
+    public function __construct(Guard $auth)
+    {
+        $this->auth = $auth;
+    }
+
+    /**
+     * Handle an incoming request.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \Closure  $next
+     * @return mixed
+     */
+    public function handle($request, Closure $next)
+    {
+        if ($settings = Setting::getSettings()) {
+            $nav_color = $settings->nav_link_color;
+            $link_dark_color = $settings->link_dark_color;
+            $link_light_color = $settings->link_light_color;
+        }
+
+
+        // Override system settings
+        if ($request->user()) {
+
+            if ($request->user()->nav_color) {
+                $nav_color = $request->user()->nav_color;
+            }
+            if ($request->user()->link_dark_color) {
+                $link_dark_color = $request->user()->link_dark_color;
+            }
+            if ($request->user()->nav_color) {
+                $link_light_color = $request->user()->link_light_color;
+            }
+        }
+
+
+        view()->share('nav_link_color', $nav_color);
+        view()->share('link_dark_color', $link_dark_color);
+        view()->share('link_light_color', $link_light_color);
+
+        return $next($request);
+
+    }
+}
diff --git a/database/migrations/2025_11_28_175733_add_link_colors_to_settings.php b/database/migrations/2025_11_28_175733_add_link_colors_to_settings.php
index 31f07c9619..e1d0e3634f 100644
--- a/database/migrations/2025_11_28_175733_add_link_colors_to_settings.php
+++ b/database/migrations/2025_11_28_175733_add_link_colors_to_settings.php
@@ -12,69 +12,93 @@ return new class extends Migration
      */
     public function up(): void
     {
-        $setting = DB::table('settings')->select(['skin'])->first();
-
+        $setting = DB::table('settings')->select(['skin', 'header_color'])->first();
 
         Schema::table('settings', function (Blueprint $table) {
             $table->string('link_dark_color')->after('header_color')->nullable()->default(null);
             $table->string('link_light_color')->after('header_color')->nullable()->default(null);
+            $table->string('nav_link_color')->after('header_color')->nullable()->default(null);
+        });
+
+        Schema::table('users', function (Blueprint $table) {
+            $table->string('link_dark_color')->after('skin')->nullable()->default(null);
+            $table->string('link_light_color')->after('skin')->nullable()->default(null);
+            $table->string('nav_link_color')->after('skin')->nullable()->default(null);
         });
 
 
-
+        // Set Snipe-IT defaults
         $link_dark_color = '#36aff5';
         $link_light_color = '#296282';
+        $nav_color = '#ffffff';
+        $header_color = '#3c8dbc';
 
         if ($setting) {
+
             switch ($setting->skin) {
-                case 'green':
+                case ('green' || 'green-dark'):
+                    $header_color = '#00a65a';
                     $link_dark_color = '#00a65a';
                     $link_light_color = '#00a65a';
-                case 'green-dark':
-                    $link_dark_color = '#00a65a';
-                    $link_light_color = '#00a65a';
-                case 'red':
+                    $nav_color = '#ffffff';
+
+                case ('red' || 'red-dark'):
+                    $header_color = '#dd4b39';
                     $link_dark_color = '#dd4b39';
                     $link_light_color = '#dd4b39';
-                case 'red-dark':
-                    $link_dark_color = '#dd4b39';
-                    $link_light_color = '#dd4b39';
-                case 'orange':
+                    $nav_color = '#ffffff';
+
+                case ('orange' || 'orange-dark'):
+                    $header_color = '#FF851B';
                     $link_dark_color = '#FF851B';
                     $link_light_color = '#FF851B';
-                case 'orange-dark':
-                    $link_dark_color = '#FF8C00';
-                    $link_light_color = '#FF8C00';
-                case 'black':
+                    $nav_color = '#ffffff';
+
+                case ('black' || 'black-dark'):
+                    $header_color = '#000000';
                     $link_dark_color = '#111';
                     $link_light_color = '#111';
-                case 'black-dark':
-                    $link_dark_color = '#111';
-                    $link_light_color = '#111';
-                case 'purple':
+                    $nav_color = '#ffffff';
+
+                case ('purple' || 'purple-dark'):
+                    $header_color = '#605ca8';
                     $link_dark_color = '#605ca8';
                     $link_light_color = '#605ca8';
-                case 'purple-dark':
-                    $link_dark_color = '#605ca8';
-                    $link_light_color = '#605ca8';
-                case 'yellow':
-                    $link_dark_color = '#f39c12';
-                    $link_light_color = '#f39c12';
-                case 'yellow-dark':
+                    $nav_color = '#ffffff';
+
+                case ('yellow' || 'yellow-dark') :
+                    $header_color = '#f39c12';
                     $link_dark_color = '#f39c12';
                     $link_light_color = '#f39c12';
+                    $nav_color = '#ffffff';
+
                 case 'contrast':
+                    $header_color = '#001F3F';
                     $link_dark_color = '#86cbf2';
                     $link_light_color = '#084d73';
+                    $nav_color = '#ffffff';
+                    break;
+            }
+
+            // Override the header color if the settings have one
+            if ($setting->header_color) {
+                $header_color = $setting->header_color;
+                \Log::debug('A header color was found, so lets use that instead: '.$setting->header_color);
             }
 
 
-            DB::table('settings')->update(['link_light_color' => $link_light_color, 'link_dark_color' => $link_dark_color]);
+            DB::table('settings')->update([
+                'link_light_color' => $link_light_color,
+                'link_dark_color' => $link_dark_color,
+                'nav_link_color' => $nav_color,
+                'header_color' => $header_color]);
+
+            DB::table('users')->whereNull('skin')->update([
+                'link_light_color' => $link_light_color,
+                'link_dark_color' => $link_dark_color,
+                'nav_link_color' => $nav_color]);
         }
 
-
-
-
     }
 
     /**
@@ -85,6 +109,13 @@ return new class extends Migration
         Schema::table('settings', function ($table) {
             $table->dropColumn('link_dark_color');
             $table->dropColumn('link_light_color');
+            $table->dropColumn('nav_link_color');
+        });
+
+        Schema::table('users', function ($table) {
+            $table->dropColumn('link_dark_color');
+            $table->dropColumn('link_light_color');
+            $table->dropColumn('nav_link_color');
         });
     }
 };
diff --git a/resources/lang/en-US/admin/settings/general.php b/resources/lang/en-US/admin/settings/general.php
index e47a5a5ead..ca4b76a3d9 100644
--- a/resources/lang/en-US/admin/settings/general.php
+++ b/resources/lang/en-US/admin/settings/general.php
@@ -81,6 +81,8 @@ return [
     'header_color'              => 'Primary Theme Color',
     'header_color_help'         => 'Selecting a new color here will let you preview the color with your logo selection (if you have a site logo uploaded) in the header, however it will not be saved until you click the Save button.',
     'link_dark_color'           => 'Link Color for Dark Mode',
+    'nav_link_color'            => 'Header Nav Link Color',
+    'nav_link_color_help'       => 'Select a color for the links in your top level navigation. This color should be high enough contrast against your header color to be easily readable.',
     'link_dark_color_help'      => 'Select a color that will provide enough contrast for people that use Snipe-IT in dark mode.',
     'link_light_color'          => 'Link Color for Light Mode',
     'link_light_color_help'     => 'Select a color that will provide enough contrast for people that use Snipe-IT in light mode.',
@@ -494,11 +496,13 @@ return [
         'general' => 'General',
         'intervals' => 'Intervals & Thresholds',
         'logos' => 'Logos & Display',
+        'display' => 'Display Preferences',
         'mapping' => 'LDAP Field Mapping',
         'test' => 'Test LDAP Connection',
         'misc' => 'Miscellaneous',
         'misc_display' => 'Miscellaneous Display Options',
         'profiles' => 'User Profiles',
+        'your_details' => 'Your Details',
         'server' => 'Server Settings',
         'scoping' => 'Scoping',
         'security' => 'Security Preferences',
diff --git a/resources/views/account/profile.blade.php b/resources/views/account/profile.blade.php
index cc0933553b..a1ddba43c3 100755
--- a/resources/views/account/profile.blade.php
+++ b/resources/views/account/profile.blade.php
@@ -15,161 +15,206 @@
     <input type="hidden" name="_token" value="{{ csrf_token() }}" />
     <div class="box box-default">
       <div class="box-body">
-        <!-- First Name -->
-        <div class="form-group {{ $errors->has('first_name') ? ' has-error' : '' }}">
-          <label for="first_name" class="col-md-3 control-label">{{ trans('general.first_name') }}
-          </label>
-          <div class="col-md-8 required">
-            <input class="form-control" type="text" name="first_name" id="first_name" value="{{ old('first_name', $user->first_name) }}" required />
-            {!! $errors->first('first_name', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
-          </div>
-        </div>
 
-        <!-- Last Name -->
-        <div class="form-group {{ $errors->has('last_name') ? ' has-error' : '' }}">
-          <label for="last_name" class="col-md-3 control-label">
-            {{ trans('general.last_name') }}
-          </label>
-          <div class="col-md-8 required">
-            <input class="form-control" type="text" name="last_name" id="last_name" value="{{ old('last_name', $user->last_name) }}" />
-            {!! $errors->first('last_name', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
-          </div>
-        </div>
+          <fieldset name="display-preferences">
+              <x-form-legend>
+                  {{ trans('admin/settings/general.legends.display') }}
+              </x-form-legend>
+
+              <!-- Nav Link color -->
+              <div class="form-group {{ $errors->has('nav_link_color') ? 'error' : '' }}">
+                  <label for="nav_link_color" class="col-md-3 control-label">{{ trans('admin/settings/general.nav_link_color') }}</label>
+                  <div class="col-md-9">
+                      <x-input.colorpicker :item="$user" placeholder="#ffffff" div_id="nav-link-color" id="nav-link-color" :value="old('nav_link_color', ($user->nav_link_color ?? '#ffffff'))" name="nav_link_color" />
+                      {!! $errors->first('nav_link_color', '<span class="alert-msg" aria-hidden="true">:message</span>') !!}
+                      <p class="help-block">{{ trans('admin/settings/general.nav_link_color_help') }}</p>
+                  </div>
+              </div>
+
+              <!-- Light Link color -->
+              <div class="form-group {{ $errors->has('link_light_color') ? 'error' : '' }}">
+                  <label for="link_light_color" class="col-md-3 control-label">{{ trans('admin/settings/general.link_light_color') }}</label>
+                  <div class="col-md-9">
+                      <x-input.colorpicker :item="$user" id="link_light_color" placeholder="#296282" :value="old('link_light_color', ($user->link_light_color ?? '#296282'))" name="link_light_color" />
+                      {!! $errors->first('link_light_color', '<span class="alert-msg" aria-hidden="true">:message</span>') !!}
+                      <p class="help-block">{{ trans('admin/settings/general.link_light_color_help') }}</p>
+                  </div>
+              </div>
+
+              <!-- Dark Link color -->
+              <div class="form-group {{ $errors->has('link_dark_color') ? 'error' : '' }}">
+                  <label for="link_dark_color" class="col-md-3 control-label">{{ trans('admin/settings/general.link_dark_color') }}</label>
+                  <div class="col-md-9">
+                      <x-input.colorpicker :item="$user" id="link_dark_color" placeholder="5fa4cc" :value="old('link_dark_color', ($user->link_dark_color ?? '#5fa4cc'))" name="link_dark_color" />
+                      {!! $errors->first('link_dark_color', '<span class="alert-msg" aria-hidden="true">:message</span>') !!}
+                      <p class="help-block">{{ trans('admin/settings/general.link_dark_color_help') }}</p>
+                  </div>
+              </div>
 
 
-        @can('self.edit_location')
-        <!-- Location -->
-        @include ('partials.forms.edit.location-profile-select', ['translated_name' => trans('general.location')])
-        @endcan
+              <div class="form-group">
+                  <div class="col-md-9 col-md-offset-3">
+                      <label class="form-control">
+                          <input type="checkbox" name="enable_sounds" value="1" {{ old('enable_sounds', $user->enable_sounds) ? 'checked' : '' }}>
+                          {{ trans('account/general.enable_sounds') }}
+                      </label>
+                  </div>
+              </div>
+
+              <div class="form-group">
+                  <div class="col-md-9 col-md-offset-3">
+                      <label class="form-control">
+                          <input type="checkbox" name="enable_confetti" value="1" {{ old('enable_confetti', $user->enable_confetti) ? 'checked' : '' }}>
+                          {{ trans('account/general.enable_confetti') }}
+                      </label>
+                  </div>
+              </div>
+          </fieldset>
 
 
-        <!-- Language -->
-        <div class="form-group {{ $errors->has('locale') ? 'has-error' : '' }}">
-          <label class="col-md-3 control-label" for="locale">{{ trans('general.language') }}</label>
-          <div class="col-md-7">
+          <fieldset name="user-preferences">
+              <x-form-legend>
+                  {{ trans('admin/settings/general.legends.your_details') }}
+              </x-form-legend>
+          <!-- First Name -->
+                    <div class="form-group {{ $errors->has('first_name') ? ' has-error' : '' }}">
+                      <label for="first_name" class="col-md-3 control-label">{{ trans('general.first_name') }}
+                      </label>
+                      <div class="col-md-8 required">
+                        <input class="form-control" type="text" name="first_name" id="first_name" value="{{ old('first_name', $user->first_name) }}" required />
+                        {!! $errors->first('first_name', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
+                      </div>
+                    </div>
 
-            @if (!config('app.lock_passwords'))
-              <x-input.locale-select name="locale" :selected="old('locale', $user->locale)"/>
-              {!! $errors->first('locale', '<span class="alert-msg" aria-hidden="true">:message</span>') !!}
-            @else
-              <p class="help-block">{{ trans('general.feature_disabled') }}</p>
-            @endif
-
-          </div>
-        </div>
-
-        <!-- Phone -->
-        <div class="form-group {{ $errors->has('phone') ? 'has-error' : '' }}">
-          <label class="col-md-3 control-label" for="phone">{{ trans('admin/users/table.phone') }}</label>
-          <div class="col-md-4">
-            <input class="form-control" type="text" name="phone" id="phone" value="{{ old('phone', $user->phone) }}" />
-            {!! $errors->first('phone', '<span class="alert-msg" aria-hidden="true">:message</span>') !!}
-          </div>
-        </div>
-
-        <!-- Website URL -->
-        <div class="form-group {{ $errors->has('website') ? ' has-error' : '' }}">
-          <label for="website" class="col-md-3 control-label">{{ trans('general.website') }}</label>
-          <div class="col-md-8">
-            <input class="form-control" type="text" name="website" id="website" value="{{ old('website', $user->website) }}" />
-            {!! $errors->first('website', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
-          </div>
-        </div>
-
-        <div class="form-group">
-          <div class="col-md-9 col-md-offset-3">
-            <label class="form-control">
-              <input type="checkbox" name="enable_sounds" value="1" {{ old('enable_sounds', $user->enable_sounds) ? 'checked' : '' }}>
-              {{ trans('account/general.enable_sounds') }}
-            </label>
-          </div>
-        </div>
-
-        <div class="form-group">
-          <div class="col-md-9 col-md-offset-3">
-            <label class="form-control">
-              <input type="checkbox" name="enable_confetti" value="1" {{ old('enable_confetti', $user->enable_confetti) ? 'checked' : '' }}>
-              {{ trans('account/general.enable_confetti') }}
-            </label>
-          </div>
-        </div>
+                    <!-- Last Name -->
+                    <div class="form-group {{ $errors->has('last_name') ? ' has-error' : '' }}">
+                      <label for="last_name" class="col-md-3 control-label">
+                        {{ trans('general.last_name') }}
+                      </label>
+                      <div class="col-md-8 required">
+                        <input class="form-control" type="text" name="last_name" id="last_name" value="{{ old('last_name', $user->last_name) }}" />
+                        {!! $errors->first('last_name', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
+                      </div>
+                    </div>
 
 
-
-        <!-- Avatar -->
-        @if (($user->avatar) && ($user->avatar!=''))
-          <div class="form-group{{ $errors->has('image_delete') ? ' has-error' : '' }}">
-            <div class="col-md-9 col-md-offset-3">
-              @if (!$user->isAvatarExternal())
-              <label for="image_delete" class="form-control">
-                <input type="checkbox" name="image_delete" id="image_delete" value="1" @checked(old('image_delete')) aria-label="image_delete">
-                {{ trans('general.image_delete') }}
-              </label>
-              {!! $errors->first('image_delete', '<span class="alert-msg">:message</span>') !!}
-              @endif
-            </div>
-          </div>
-          <div class="form-group">
-            <div class="col-md-9 col-md-offset-3">
-              <img src="{{ (($user->isAvatarExternal()) ? $user->avatar : Storage::disk('public')->url(app('users_upload_path').e($user->avatar))) }}" class="img-responsive">
-              {!! $errors->first('image_delete', '<span class="alert-msg">:message</span>') !!}
-            </div>
-          </div>
-
-          @else
-          <!-- Gravatar Email -->
-          <div class="form-group {{ $errors->has('gravatar') ? ' has-error' : '' }}">
-            <label for="gravatar" class="col-md-3 control-label">{{ trans('general.gravatar_email') }}
-              <small>(Private)</small>
-            </label>
-            <div class="col-md-8">
-              <input class="form-control" type="text" name="gravatar" id="gravatar" value="{{ old('gravatar', $user->gravatar) }}" />
-              {!! $errors->first('gravatar', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
-              <p style="padding-top: 3px;">
-                <img src="//secure.gravatar.com/avatar/{{ md5(strtolower(trim($user->gravatar))) }}" width="30" height="30" alt="{{ $user->display_name }} avatar image">
-                {!! trans('general.gravatar_url') !!}
-              </p>
-            </div>
-          </div>
-
-        @endif
+                    @can('self.edit_location')
+                    <!-- Location -->
+                    @include ('partials.forms.edit.location-profile-select', ['translated_name' => trans('general.location')])
+                    @endcan
 
 
-        @include ('partials.forms.edit.image-upload', ['fieldname' => 'avatar', 'image_path' => app('users_upload_path')])
+                    <!-- Language -->
+                    <div class="form-group {{ $errors->has('locale') ? 'has-error' : '' }}">
+                      <label class="col-md-3 control-label" for="locale">{{ trans('general.language') }}</label>
+                      <div class="col-md-7">
+
+                        @if (!config('app.lock_passwords'))
+                          <x-input.locale-select name="locale" :selected="old('locale', $user->locale)"/>
+                          {!! $errors->first('locale', '<span class="alert-msg" aria-hidden="true">:message</span>') !!}
+                        @else
+                          <p class="help-block">{{ trans('general.feature_disabled') }}</p>
+                        @endif
+
+                      </div>
+                    </div>
+
+                    <!-- Phone -->
+                    <div class="form-group {{ $errors->has('phone') ? 'has-error' : '' }}">
+                      <label class="col-md-3 control-label" for="phone">{{ trans('admin/users/table.phone') }}</label>
+                      <div class="col-md-4">
+                        <input class="form-control" type="text" name="phone" id="phone" value="{{ old('phone', $user->phone) }}" />
+                        {!! $errors->first('phone', '<span class="alert-msg" aria-hidden="true">:message</span>') !!}
+                      </div>
+                    </div>
+
+                    <!-- Website URL -->
+                    <div class="form-group {{ $errors->has('website') ? ' has-error' : '' }}">
+                      <label for="website" class="col-md-3 control-label">{{ trans('general.website') }}</label>
+                      <div class="col-md-8">
+                        <input class="form-control" type="text" name="website" id="website" value="{{ old('website', $user->website) }}" />
+                        {!! $errors->first('website', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
+                      </div>
+                    </div>
+
+
+                    <!-- Avatar -->
+                    @if (($user->avatar) && ($user->avatar!=''))
+                      <div class="form-group{{ $errors->has('image_delete') ? ' has-error' : '' }}">
+                        <div class="col-md-9 col-md-offset-3">
+                          @if (!$user->isAvatarExternal())
+                          <label for="image_delete" class="form-control">
+                            <input type="checkbox" name="image_delete" id="image_delete" value="1" @checked(old('image_delete')) aria-label="image_delete">
+                            {{ trans('general.image_delete') }}
+                          </label>
+                          {!! $errors->first('image_delete', '<span class="alert-msg">:message</span>') !!}
+                          @endif
+                        </div>
+                      </div>
+                      <div class="form-group">
+                        <div class="col-md-9 col-md-offset-3">
+                          <img src="{{ (($user->isAvatarExternal()) ? $user->avatar : Storage::disk('public')->url(app('users_upload_path').e($user->avatar))) }}" class="img-responsive">
+                          {!! $errors->first('image_delete', '<span class="alert-msg">:message</span>') !!}
+                        </div>
+                      </div>
+
+                      @else
+                      <!-- Gravatar Email -->
+                      <div class="form-group {{ $errors->has('gravatar') ? ' has-error' : '' }}">
+                        <label for="gravatar" class="col-md-3 control-label">{{ trans('general.gravatar_email') }}
+                          <small>(Private)</small>
+                        </label>
+                        <div class="col-md-8">
+                          <input class="form-control" type="text" name="gravatar" id="gravatar" value="{{ old('gravatar', $user->gravatar) }}" />
+                          {!! $errors->first('gravatar', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
+                          <p style="padding-top: 3px;">
+                            <img src="//secure.gravatar.com/avatar/{{ md5(strtolower(trim($user->gravatar))) }}" width="30" height="30" alt="{{ $user->display_name }} avatar image">
+                            {!! trans('general.gravatar_url') !!}
+                          </p>
+                        </div>
+                      </div>
+
+                    @endif
+
+
+                    @include ('partials.forms.edit.image-upload', ['fieldname' => 'avatar', 'image_path' => app('users_upload_path')])
+
+
+                    <!-- Two factor opt in -->
+                    @if ($snipeSettings->two_factor_enabled=='1')
+                    <div class="form-group {{ $errors->has('two_factor_optin') ? 'has-error' : '' }}">
+                      <div class="col-md-7 col-md-offset-3">
+                          <label
+                              for="two_factor_optin"
+                              @class([
+                                'form-control',
+                                'form-control--disabled' => auth()->user()->cannot('self.two_factor'),
+                              ])
+                          >
+                            <input
+                                type="checkbox"
+                                name="two_factor_optin"
+                                id="two_factor_optin"
+                                value="1"
+                                @checked(old('two_factor_optin', $user->two_factor_optin))
+                                @disabled(auth()->user()->cannot('self.two_factor'))
+                            >
+                            {{ trans('admin/settings/general.two_factor_enabled_text') }}
+                          </label>
+                        @can('self.two_factor')
+                          <p class="help-block">{{ trans('admin/settings/general.two_factor_enabled_warning') }}</p>
+                        @else
+                          <p class="help-block">{{ trans('admin/settings/general.two_factor_enabled_edit_not_allowed') }}</p>
+                        @endcan
+                        @if (config('app.lock_passwords'))
+                          <p class="help-block">{{ trans('general.feature_disabled') }}</p>
+                        @endif
+                      </div>
+                    </div>
+                    @endif
+          </fieldset>
 
 
-        <!-- Two factor opt in -->
-        @if ($snipeSettings->two_factor_enabled=='1')
-        <div class="form-group {{ $errors->has('two_factor_optin') ? 'has-error' : '' }}">
-          <div class="col-md-7 col-md-offset-3">
-              <label
-                  for="two_factor_optin"
-                  @class([
-                    'form-control',
-                    'form-control--disabled' => auth()->user()->cannot('self.two_factor'),
-                  ])
-              >
-                <input
-                    type="checkbox"
-                    name="two_factor_optin"
-                    id="two_factor_optin"
-                    value="1"
-                    @checked(old('two_factor_optin', $user->two_factor_optin))
-                    @disabled(auth()->user()->cannot('self.two_factor'))
-                >
-                {{ trans('admin/settings/general.two_factor_enabled_text') }}
-              </label>
-            @can('self.two_factor')
-              <p class="help-block">{{ trans('admin/settings/general.two_factor_enabled_warning') }}</p>
-            @else
-              <p class="help-block">{{ trans('admin/settings/general.two_factor_enabled_edit_not_allowed') }}</p>
-            @endcan
-            @if (config('app.lock_passwords'))
-              <p class="help-block">{{ trans('general.feature_disabled') }}</p>
-            @endif
-          </div>
-        </div>
-        @endif
 
 
 
@@ -184,3 +229,26 @@
 </div> <!-- .row-->
 
 @stop
+
+@section('moar_scripts')
+    <!-- bootstrap color picker -->
+
+    <script nonce="{{ csrf_token() }}">
+
+        // This takes the color from the color picker to show a live preview
+        $(function() {
+
+            $('#nav-link-color').colorpicker().on('changeColor', function(e) {
+                var color = e.color.toString('rgba');
+                // $('.navbar-nav > li > a').css('background-color', header_color);
+                $('.navbar-nav > li > a:link').attr('style','color: '+ color +' !important').css('background-color', header_color);
+                $('.btn-theme').attr('style','color: '+ color +' !important').css('background-color', header_color);
+
+
+
+
+            });
+        });
+
+    </script>
+@stop
diff --git a/resources/views/blade/input/colorpicker.blade.php b/resources/views/blade/input/colorpicker.blade.php
index b53dfb99a5..6b4dc87f31 100644
--- a/resources/views/blade/input/colorpicker.blade.php
+++ b/resources/views/blade/input/colorpicker.blade.php
@@ -2,12 +2,13 @@
     'item' => null,
     'name' => 'color',
     'id' => 'color',
-    'div_id' => null
+    'div_id' => null,
+    'placeholder'=> 'FF0000',
 ])
 
 <!-- Colorpicker -->
 <div {{ $attributes->merge(['class' => 'color input-group colorpicker-component row col-md-5']) }} id="{{ $div_id }}">
-    <input class="form-control" placeholder="#FF0000" aria-label="{{ $name }}" name="{{ $name }}" type="text" id="{{ $id }}" value="{{ old($name, ($item->{$name} ?? '')) }}">
+    <input class="form-control" placeholder="{{ $placeholder }}" aria-label="{{ $name }}" name="{{ $name }}" type="text" id="{{ $id }}" value="{{ old($name, ($item->{$name} ?? '')) }}">
     <span class="input-group-addon"><i> </i></span>
 </div>
 
diff --git a/resources/views/layouts/default.blade.php b/resources/views/layouts/default.blade.php
index 413a2cfcaa..c8d8193bb2 100644
--- a/resources/views/layouts/default.blade.php
+++ b/resources/views/layouts/default.blade.php
@@ -42,10 +42,22 @@
     <style>
 
         :root {
+            color-scheme: light dark;
             --main-theme-color: {{ $snipeSettings->header_color ?? '#5fa4cc' }};
+            --btn-theme-text-color: {{ $nav_link_color ?? 'light-dark(hsl(from var(--main-theme-color) h s calc(l + 10)),hsl(from var(--main-theme-color) h s calc(l - 10)))' }};
+            --btn-theme-hover-text-color: {{ $nav_link_color ?? 'light-dark(hsl(from var(--main-theme-color) h s calc(l - 10)),hsl(from var(--main-theme-color) h s calc(l - 10)))' }};
+            --btn-theme-hover: {{ $nav_link_color ?? 'light-dark(hsl(from var(--main-theme-color) h s calc(l - 10)),hsl(from var(--main-theme-color) h s calc(l - 10)))' }};
             --sidenav-text-hover-color: #fff;
             --sidenav-text-nohover-color: #b8c7ce;
             --search-highlight: #e9d15b;
+            --color-fg: light-dark(#000000, #ffffff);
+            --text-danger: light-dark(#a94442,#dd4b39);
+            --text-success: light-dark(#039516,#4ced61);
+            --text-warning: light-dark(#da9113,#f3a51f);
+            --text-info: light-dark(#31708f,#2baae6);
+            --text-help: light-dark(#605e5e,#a6a4a4);
+            --nav-primary-text-color: {{ $nav_link_color ?? 'light-dark(hsl(from var(--main-theme-color) h s calc(l - 10)),hsl(from var(--main-theme-color) h s calc(l - 10)))' }};
+            --nav-hover-text-color: {{ $nav_link_color ?? 'light-dark(hsl(from var(--main-theme-color) h s calc(l - 10)),hsl(from var(--main-theme-color) h s calc(l - 10)))' }};
 
         }
 
@@ -59,25 +71,21 @@
             --callout-bg-color: var(--box-header-bottom-border-color);
             --callout-left-border: var(--box-header-top-border-color);
             --color-bg: #ecf0f5;
-            --color-fg: #000000;
             --header-color: #000000;
-            --link-color: {{ $snipeSettings->link_light_color ?? '#296282' }};
+            --link-color: {{ $link_light_color ?? '#296282' }};
             --link-hover:  hsl(from var(--link-color) h s calc(l - 10));
-            --nav-primary-font-color: #ffffff;
             --tab-bottom-border: 1px solid var(--box-header-top-border-color);
             --table-border-row-top: 1px solid #ecf0f5;
             --table-stripe-bg-alt: rgba(211, 211, 211, 0.25);
             --table-stripe-bg: #ffffff;
             --text-blue: var(--text-legend-help);
-            --text-danger: #a94442;
-            --text-help: #605e5e;
-            --text-info: #31708f;
             --text-legend-help: var(--text-help);
-            --text-success: #039516;
             --text-warning: #da9113;
             --main-theme-hover: hsl(from var(--main-theme-color) h s calc(l + 5));
             --btn-theme-base: hsl(from var(--main-theme-color) h s calc(l - 5));
-            --btn-theme-hover: hsl(from var(--btn-theme-base) h s calc(l - 15));
+            --btn-theme-hover: hsl(from var(--btn-theme-base) h s calc(l + 15));
+            --btn-theme-border:  hsl(from var(--btn-theme-base) h s calc(l + 20));
+            --btn-theme-hover-text-color:  hsl(from var(--btn-theme-hover) h s calc(l - 20));
 
         }
 
@@ -91,25 +99,20 @@
             --callout-bg-color: var(--box-header-top-border-color);
             --callout-left-border: #323131;
             --color-bg: #222222;
-            --color-fg: #ffffff;
             --header-color: #ffffff;
-            --link-color: {{ $snipeSettings->link_dark_color ?? '#5fa4cc' }};
+            --link-color: {{ $link_dark_color ?? '#5fa4cc' }};
             --link-hover:  hsl(from var(--link-color) h s calc(l + 15));
-            --nav-primary-font-color: #ffffff;
             --tab-bottom-border: 1px solid var(--box-header-top-border-color);
             --table-border-row: 1px solid #656464;
             --table-stripe-bg-alt: #323131;
             --table-stripe-bg: #494747;
             --text-blue: var(--text-legend-help);
-            --text-danger: #dd4b39;
-            --text-help: #a6a4a4;
-            --text-info: #2baae6;
             --text-legend-help: #d6d6d6;
-            --text-success: #4ced61;
-            --text-warning: #f3a51f;
             --main-theme-hover: hsl(from var(--main-theme-color) h s calc(l - 10));
             --btn-theme-base: hsl(from var(--main-theme-color) h s calc(l + 5));
             --btn-theme-hover: hsl(from var(--btn-theme-base) h s calc(l + 15));
+            --btn-theme-border:  hsl(from var(--btn-theme-base) h s calc(l + 20));
+            --btn-theme-hover-text-color:  hsl(from var(--btn-theme-hover) h s calc(l + 20));
         }
 
 
@@ -126,16 +129,21 @@
             color: var(--link-hover) !important;
         }
 
+        h2 small {
+            color: var(--color-fg) !important;
+        }
 
         .btn-theme {
             background-color: var(--btn-theme-base);
-            color: contrast-color(var(--btn-theme-base)) !important;
+            /*color: var(--btn-theme-hover-text-color) !important;*/
+            color: var(--nav-primary-text-color) !important;
             border: 1px solid hsl(from var(--btn-theme-base) h s calc(l - 15)) !important;
         }
 
         .btn-theme:hover {
             background-color: var(--btn-theme-hover);
-            color: contrast-color(var(--main-theme-color)) !important;
+            /*color: var(--btn-theme-hover-text-color) !important;*/
+            color: var(--nav-primary-text-color) !important;
             border: 1px solid hsl(from var(--btn-theme-base) h s calc(l - 15)) !important;
         }
 
@@ -238,25 +246,6 @@
             background-color: var(--color-bg);
         }
 
-        .pagination > li > a,
-        .page-next a,
-        .pagination>.disabled > a
-        {
-            border-color: var(--table-stripe-bg);
-            background-color: var(--main-theme-color);
-            color: contrast-color(var(--main-theme-hover)) !important;
-        }
-
-        .pagination > li > .active > a:hover,
-        .pagination > li >  .active > a
-        {
-            color: contrast-color(var(--main-theme-hover)) !important;
-            background-color: var(--main-theme-hover);
-
-
-        }
-
-
 
 
         .btn-anchor {
@@ -437,7 +426,7 @@
         .label-default
         {
             background-color: var(--main-theme-color);
-            color: contrast-color(var(--main-theme-color)) !important;
+            color: var(--nav-primary-text-color) !important;
         }
 
 
@@ -452,8 +441,9 @@
         {
             background-color: var(--main-theme-color);
             /*background-color: rgba(0,0,0,.15);*/
-            /*color: var(--nav-primary-font-color) !important;*/
-            color: contrast-color(var(--main-theme-color)) !important;
+            color: var(--nav-primary-text-color) !important;
+            /*color: var(--nav-primary-text-color) !important;*/
+
         }
 
 
@@ -474,25 +464,41 @@
         .navbar-nav .open > a:hover,
         .navbar-nav > li > a:focus,
         .navbar-nav > li > a:hover,
-        .open > .dropdown-toggle.btn-tableButton.focus,
         .open > .dropdown-toggle.btn-tableButton:focus,
         .open > .dropdown-toggle.btn-tableButton:hover,
-        .pagination > .active > a:hover
+        .page-next a,
+        .pagination > .active > a:hover,
+        .page-item.active,
+        .pagination > li > .active > a,
+        .pagination > li > .active > a:hover,
+        .pagination > li > a:hover
         {
-            background-color: var(--main-theme-hover);
-            border-color: var(--table-stripe-bg);
-            color: contrast-color(var(--main-theme-color)) !important;
+            background-color: var(--main-theme-hover) !important;
+
+            border-color: var(--btn-theme-hover) !important;
+            /*color: var(--btn-theme-hover-text-color) !important;*/
+            color: var(--nav-primary-text-color) !important;
         }
 
+        .pagination > li > a
+        {
+            background-color: var(--main-theme-color) !important;
+            border-color: var(--btn-theme-hover) !important;
+            /*color: var(--btn-theme-text-color) !important;*/
+            color: var(--nav-primary-text-color) !important;
+        }
+
+
+
         .bootstrap-table .fixed-table-toolbar li.dropdown-item-marker label
         {
-            color: contrast-color(var(--main-theme-color)) !important;
+            color: var(--nav-primary-text-color) !important;
         }
 
         .bootstrap-table .fixed-table-toolbar li.dropdown-item-marker label:hover
         {
             background-color: var(--main-theme-hover) !important;
-            color: contrast-color(var(--main-theme-hover)) !important;
+            color: var(--nav-primary-text-color) !important;
         }
 
 
@@ -501,12 +507,12 @@
         {
             background-color: hsl(from var(--main-theme-color) h s calc(l - 5));
             border-color: hsl(from var(--main-theme-color) h s calc(l - 10));
-            color: contrast-color(var(--main-theme-color)) !important;
+            color: var(--nav-primary-text-color) !important;
         }
 
         .main-header .navbar .nav>.active>a {
             background-color: hsl(from var(--main-theme-color) h s calc(l - 5));
-            color: contrast-color(var(--main-theme-color)) !important;
+            color: var(--nav-primary-text-color) !important;
         }
 
 
@@ -521,7 +527,7 @@
         .task_menu
         {
             background-color: hsl(from var(--main-theme-color) h s calc(l - 5));
-            color: contrast-color(var(--main-theme-color)) !important;
+            color: var(--nav-primary-text-color) !important;
             margin-bottom: 0;
         }
 
diff --git a/resources/views/settings/branding.blade.php b/resources/views/settings/branding.blade.php
index aa96c66013..ec41cd1792 100644
--- a/resources/views/settings/branding.blade.php
+++ b/resources/views/settings/branding.blade.php
@@ -76,18 +76,27 @@
                             <div class="form-group {{ $errors->has('header_color') ? 'error' : '' }}">
                                 <label for="header_color" class="col-md-3 control-label">{{ trans('admin/settings/general.header_color') }}</label>
                                 <div class="col-md-9">
-                                    <x-input.colorpicker :item="$setting" div_id="header-color" id="header_color" :value="old('link_light_color', ($setting->header_color ?? '#3c8dbc'))" name="header_color" />
+                                    <x-input.colorpicker :item="$setting" placeholder="#3c8dbc" div_id="header-color" id="header_color" :value="old('header_color', ($setting->header_color ?? '#3c8dbc'))" name="header_color" />
                                     <p class="help-block">{{ trans('admin/settings/general.header_color_help') }}</p>
-
                                     {!! $errors->first('header_color', '<span class="alert-msg" aria-hidden="true">:message</span>') !!}
                                 </div>
                             </div>
 
+                        <!-- Nav Link color -->
+                        <div class="form-group {{ $errors->has('nav_link_color') ? 'error' : '' }}">
+                            <label for="nav_link_color" class="col-md-3 control-label">{{ trans('admin/settings/general.nav_link_color') }}</label>
+                            <div class="col-md-9">
+                                <x-input.colorpicker :item="$setting" placeholder="#ffffff" div_id="nav-link-color" id="nav-link-color" :value="old('nav_link_color', ($setting->nav_link_color ?? '#ffffff'))" name="nav_link_color" />
+                                {!! $errors->first('nav_link_color', '<span class="alert-msg" aria-hidden="true">:message</span>') !!}
+                                <p class="help-block">{{ trans('admin/settings/general.nav_link_color_help') }}</p>
+                            </div>
+                        </div>
+
                         <!-- Light Link color -->
                         <div class="form-group {{ $errors->has('link_light_color') ? 'error' : '' }}">
                             <label for="link_light_color" class="col-md-3 control-label">{{ trans('admin/settings/general.link_light_color') }}</label>
                             <div class="col-md-9">
-                                <x-input.colorpicker :item="$setting" id="link_light_color" :value="old('link_light_color', ($setting->link_light_color ?? '#296282'))" name="link_light_color" />
+                                <x-input.colorpicker :item="$setting" id="link_light_color" placeholder="#296282" :value="old('link_light_color', ($setting->link_light_color ?? '#296282'))" name="link_light_color" />
                                 {!! $errors->first('link_light_color', '<span class="alert-msg" aria-hidden="true">:message</span>') !!}
                                 <p class="help-block">{{ trans('admin/settings/general.link_light_color_help') }}</p>
                             </div>
@@ -97,7 +106,7 @@
                         <div class="form-group {{ $errors->has('link_dark_color') ? 'error' : '' }}">
                             <label for="link_dark_color" class="col-md-3 control-label">{{ trans('admin/settings/general.link_dark_color') }}</label>
                             <div class="col-md-9">
-                                <x-input.colorpicker :item="$setting" id="link_dark_color" :value="old('link_dark_color', ($setting->link_dark_color ?? '#5fa4cc'))" name="link_dark_color" />
+                                <x-input.colorpicker :item="$setting" id="link_dark_color" placeholder="5fa4cc" :value="old('link_dark_color', ($setting->link_dark_color ?? '#5fa4cc'))" name="link_dark_color" />
                                 {!! $errors->first('link_dark_color', '<span class="alert-msg" aria-hidden="true">:message</span>') !!}
                                 <p class="help-block">{{ trans('admin/settings/general.link_dark_color_help') }}</p>
                             </div>
@@ -426,36 +435,30 @@
 @section('moar_scripts')
     <!-- bootstrap color picker -->
 
-
-
     <script nonce="{{ csrf_token() }}">
 
         // This takes the color from the color picker to show a live preview
         $(function() {
             $('#header-color').colorpicker().on('changeColor', function(e) {
-                $('.main-header .navbar')[0].style.backgroundColor = e.color.toString('rgba');
-                $('.header-preview')[0].style.backgroundColor = e.color.toString('rgba');
-                $('.left-navblock')[0].style.backgroundColor = e.color.toString('rgba');
-                $('.navbar-custom-menu > .navbar-nav')[0].style.backgroundColor = e.color.toString('rgba');
-                $('.navbar-custom-menu > .navbar-nav > li > .navbar-form')[0].style.backgroundColor = e.color.toString('rgba');
-                $('.navbar-nav > li > a:link, .navbar-nav > li > a:visited')[0].style.backgroundColor = e.color.toString('rgba');
-                $('.navbar-nav > li > a:link, .navbar-nav > li > a:visited')[1].style.backgroundColor = e.color.toString('rgba');
-                $('.navbar-nav > li > a:link, .navbar-nav > li > a:visited')[2].style.backgroundColor = e.color.toString('rgba');
-                $('.navbar-nav > li > a:link, .navbar-nav > li > a:visited')[3].style.backgroundColor = e.color.toString('rgba');
-                $('.navbar-nav > li > a:link, .navbar-nav > li > a:visited')[4].style.backgroundColor = e.color.toString('rgba');
-                $('.navbar-nav > li > a:link, .navbar-nav > li > a:visited')[5].style.backgroundColor = e.color.toString('rgba');
-                $('.navbar-nav > li > a:link, .navbar-nav > li > a:visited')[6].style.backgroundColor = e.color.toString('rgba');
-                $('.navbar-nav > li > a:link, .navbar-nav > li > a:visited')[7].style.backgroundColor = e.color.toString('rgba');
-                $('.navbar-nav > li > a:link, .navbar-nav > li > a:visited')[8].style.backgroundColor = e.color.toString('rgba');
+                var color = e.color.toString('rgba');
+                $('.main-header .navbar, .header-preview, .left-navblock, .navbar-custom-menu > .navbar-nav, .navbar-custom-menu > .navbar-nav > li > .navbar-form, .navbar-nav > li > a:link, .navbar-nav > li > a').css('background-color', color);
+                $('.btn-theme').css('background-color', color);
+            });
+
+            $('#nav-link-color').colorpicker().on('changeColor', function(e) {
+                var color = e.color.toString('rgba');
+                var header_color = $('#header_color').val();
+                console.log(header_color);
+
+                // $('.navbar-nav > li > a').css('background-color', header_color);
+                $('.navbar-nav > li > a:link').attr('style','color: '+ color +' !important').css('background-color', header_color);
+                $('.btn-theme').attr('style','color: '+ color +' !important').css('background-color', header_color);
+
+
+
 
             });
         });
 
-        // toggle the disabled state of asset id prefix
-        $('#auto_increment_assets').on('ifChecked', function(){
-            $('#auto_increment_prefix').prop('disabled', false).focus();
-        }).on('ifUnchecked', function(){
-            $('#auto_increment_prefix').prop('disabled', true);
-        });
     </script>
 @stop