diff --git a/html/css/app.css b/html/css/app.css
index 1d08a44669..b37074f959 100644
--- a/html/css/app.css
+++ b/html/css/app.css
@@ -1,3 +1,3 @@
 /*! tailwindcss v2.2.10 | MIT License | https://tailwindcss.com*/
 
-/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-webkit-text-size-adjust:100%;line-height:1.15;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;margin:0}hr{color:inherit;height:0}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{border:0 solid;box-sizing:border-box}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{color:inherit;line-height:inherit;padding:0}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.tw-z-50{z-index:50}.tw-mb-0{margin-bottom:0}.tw-ml-3{margin-left:.75rem}.tw-block{display:block}.tw-inline-block{display:inline-block}.tw-flex{display:flex}.tw-inline-flex{display:inline-flex}.tw-hidden{display:none}@-webkit-keyframes tw-spin{to{transform:rotate(1turn)}}@keyframes tw-spin{to{transform:rotate(1turn)}}@-webkit-keyframes tw-ping{75%,to{opacity:0;transform:scale(2)}}@keyframes tw-ping{75%,to{opacity:0;transform:scale(2)}}@-webkit-keyframes tw-pulse{50%{opacity:.5}}@keyframes tw-pulse{50%{opacity:.5}}@-webkit-keyframes tw-bounce{0%,to{-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}@keyframes tw-bounce{0%,to{-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}.tw-flex-wrap{flex-wrap:wrap}.tw-rounded-lg{border-radius:.5rem}.tw-rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.tw-border-2{border-width:2px}.tw-border-b-2{border-bottom-width:2px}.tw-border-b{border-bottom-width:1px}.tw-border-solid{border-style:solid}.tw-border-gray-200{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.tw-dark .dark\:tw-border-gray-600{--tw-border-opacity:1;border-color:rgba(75,85,99,var(--tw-border-opacity))}.tw-bg-white{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.tw-dark .dark\:tw-bg-gray-800{--tw-bg-opacity:1;background-color:rgba(31,41,55,var(--tw-bg-opacity))}.tw-p-3{padding:.75rem}.tw-pr-1{padding-right:.25rem}.tw-pl-2{padding-left:.5rem}.tw-text-left{text-align:left}.tw-text-sm{font-size:.875rem;line-height:1.25rem}.tw-text-xl{font-size:1.25rem;line-height:1.75rem}.tw-font-normal{font-weight:400}.tw-font-semibold{font-weight:600}.tw-font-bold{font-weight:700}.tw-leading-normal{line-height:1.5}.tw-text-gray-400{--tw-text-opacity:1;color:rgba(156,163,175,var(--tw-text-opacity))}.tw-text-red-600{--tw-text-opacity:1;color:rgba(220,38,38,var(--tw-text-opacity))}.tw-text-blue-900{--tw-text-opacity:1;color:rgba(30,58,138,var(--tw-text-opacity))}.tw-dark .dark\:tw-text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}.tw-no-underline{text-decoration:none}.tw-opacity-90{opacity:.9}*,:after,:before{--tw-shadow:0 0 #0000;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000}@media (min-width:576px){.sm\:tw-w-full{width:100%}}@media (min-width:992px){.lg\:tw-w-1\/2{width:50%}}@media (min-width:1200px){.xl\:tw-w-1\/4{width:25%}}
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-webkit-text-size-adjust:100%;line-height:1.15;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;margin:0}hr{color:inherit;height:0}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{border:0 solid;box-sizing:border-box}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{color:inherit;line-height:inherit;padding:0}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.tw-z-50{z-index:50}.tw-mb-0{margin-bottom:0}.tw-ml-3{margin-left:.75rem}.tw-block{display:block}.tw-inline-block{display:inline-block}.tw-flex{display:flex}.tw-inline-flex{display:inline-flex}.tw-hidden{display:none}@-webkit-keyframes tw-spin{to{transform:rotate(1turn)}}@keyframes tw-spin{to{transform:rotate(1turn)}}@-webkit-keyframes tw-ping{75%,to{opacity:0;transform:scale(2)}}@keyframes tw-ping{75%,to{opacity:0;transform:scale(2)}}@-webkit-keyframes tw-pulse{50%{opacity:.5}}@keyframes tw-pulse{50%{opacity:.5}}@-webkit-keyframes tw-bounce{0%,to{-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}@keyframes tw-bounce{0%,to{-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}.tw-flex-wrap{flex-wrap:wrap}.tw-rounded-lg{border-radius:.5rem}.tw-rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.tw-border-2{border-width:2px}.tw-border-b-2{border-bottom-width:2px}.tw-border-b{border-bottom-width:1px}.tw-border-solid{border-style:solid}.tw-border-gray-200{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.tw-dark .dark\:tw-border-dark-gray-200{--tw-border-opacity:1;border-color:rgba(62,68,76,var(--tw-border-opacity))}.tw-bg-white{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.tw-dark .dark\:tw-bg-dark-gray-300{--tw-bg-opacity:1;background-color:rgba(53,58,65,var(--tw-bg-opacity))}.tw-p-3{padding:.75rem}.tw-pr-1{padding-right:.25rem}.tw-pl-2{padding-left:.5rem}.tw-text-left{text-align:left}.tw-text-sm{font-size:.875rem;line-height:1.25rem}.tw-text-xl{font-size:1.25rem;line-height:1.75rem}.tw-font-normal{font-weight:400}.tw-font-semibold{font-weight:600}.tw-font-bold{font-weight:700}.tw-leading-normal{line-height:1.5}.tw-text-gray-400{--tw-text-opacity:1;color:rgba(156,163,175,var(--tw-text-opacity))}.tw-text-red-600{--tw-text-opacity:1;color:rgba(220,38,38,var(--tw-text-opacity))}.tw-text-blue-900{--tw-text-opacity:1;color:rgba(30,58,138,var(--tw-text-opacity))}.tw-dark .dark\:tw-text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}.tw-dark .dark\:tw-text-dark-white-100{--tw-text-opacity:1;color:rgba(249,250,251,var(--tw-text-opacity))}.tw-no-underline{text-decoration:none}.tw-opacity-90{opacity:.9}*,:after,:before{--tw-shadow:0 0 #0000;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000}@media (min-width:576px){.sm\:tw-w-full{width:100%}}@media (min-width:992px){.lg\:tw-w-1\/2{width:50%}}@media (min-width:1200px){.xl\:tw-w-1\/4{width:25%}}
diff --git a/html/css/dark.css b/html/css/dark.css
index 9e495f7035..468c3e83a8 100644
--- a/html/css/dark.css
+++ b/html/css/dark.css
@@ -7220,7 +7220,7 @@
     background: #2d3237!important;
   }
   div[role=listbox]{
-    background: rgb(70, 76, 83);
+    background: #464c53;
   }
   .overlib, .overlib-contents{
     background: #353a41;
diff --git a/html/mix-manifest.json b/html/mix-manifest.json
index eaf6adb51a..5596f1d46e 100644
--- a/html/mix-manifest.json
+++ b/html/mix-manifest.json
@@ -2,7 +2,7 @@
     "/js/app.js": "/js/app.js?id=5fb72abe404b2429231c",
     "/js/manifest.js": "/js/manifest.js?id=8d61162bb0caf92f60ff",
     "/css/vendor.css": "/css/vendor.css?id=8d7b2ecb46047fe813e4",
-    "/css/app.css": "/css/app.css?id=b21e1df1f5102369eabc",
+    "/css/app.css": "/css/app.css?id=cff4bdc70b4433113ccc",
     "/js/vendor.js": "/js/vendor.js?id=294cef17a3cf43045d61",
     "/js/lang/de.js": "/js/lang/de.js?id=8959e785f5790d6b6836",
     "/js/lang/en.js": "/js/lang/en.js?id=cad37e39e9721bd08fdd",
diff --git a/resources/views/components/device-link.blade.php b/resources/views/components/device-link.blade.php
index 223c9ab1a5..deba91aa3a 100644
--- a/resources/views/components/device-link.blade.php
+++ b/resources/views/components/device-link.blade.php
@@ -1,5 +1,5 @@
 <x-popup>
-    <a class="tw-font-bold @if($status=='disabled') tw-text-gray-400 visited:tw-text-gray-400 @elseif($status=='down') tw-text-red-600 visited:tw-text-red-600 @else tw-text-blue-900 visited:tw-text-blue-900 @endif" href="{{ route('device', ['device' => $device->device_id, 'tab' => $tab, 'section' => $section]) }}">
+    <a class="tw-font-bold @if($status=='disabled') tw-text-gray-400 visited:tw-text-gray-400 @elseif($status=='down') tw-text-red-600 visited:tw-text-red-600 @else tw-text-blue-900 visited:tw-text-blue-900 dark:tw-text-dark-white-100 dark:visited:tw-text-dark-white-100 @endif" href="{{ route('device', ['device' => $device->device_id, 'tab' => $tab, 'section' => $section]) }}">
         {{ $slot->isNotEmpty() ? $slot : $device->displayName() }}
     </a>
     <x-slot name="title">
diff --git a/resources/views/components/popup.blade.php b/resources/views/components/popup.blade.php
index 5803468b84..397d2d6993 100644
--- a/resources/views/components/popup.blade.php
+++ b/resources/views/components/popup.blade.php
@@ -37,11 +37,11 @@
           x-on:mouseenter="clearTimeout(hideTimeout)"
           x-on:mouseleave="hide(delay)"
           x-bind:class="{'tw-hidden': !popupShow, 'tw-block': popupShow}"
-          class="tw-hidden tw-bg-white dark:tw-bg-gray-800 dark:tw-text-white tw-border-2 tw-border-gray-200 dark:tw-border-gray-600 tw-ml-3 tw-z-50 tw-font-normal tw-leading-normal tw-text-sm tw-text-left tw-no-underline tw-rounded-lg"
+          class="tw-hidden tw-bg-white dark:tw-bg-dark-gray-300 dark:tw-text-white tw-border-2 tw-border-gray-200 dark:tw-border-dark-gray-200 tw-ml-3 tw-z-50 tw-font-normal tw-leading-normal tw-text-sm tw-text-left tw-no-underline tw-rounded-lg"
           style="max-width:95vw;"
     >
         @isset($title)
-            <div class="tw-opacity-90 tw-p-3 tw-mb-0 tw-border-b-2 tw-border-solid tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-t-lg">
+            <div class="tw-opacity-90 tw-p-3 tw-mb-0 tw-border-b-2 tw-border-solid tw-border-gray-200 dark:tw-border-dark-gray-200 tw-rounded-t-lg">
                 {{ $title }}
             </div>
         @endisset
diff --git a/resources/views/components/port-link.blade.php b/resources/views/components/port-link.blade.php
index fa0cd2cc36..ac79d3bf73 100644
--- a/resources/views/components/port-link.blade.php
+++ b/resources/views/components/port-link.blade.php
@@ -1,5 +1,5 @@
 <x-popup>
-    <a class="@if($status=='disabled') tw-text-gray-400 visited:tw-text-gray-400 @elseif($status=='down') tw-text-red-600 visited:tw-text-red-600 @else tw-text-blue-900 visited:tw-text-blue-900 @endif"
+    <a class="@if($status=='disabled') tw-text-gray-400 visited:tw-text-gray-400 @elseif($status=='down') tw-text-red-600 visited:tw-text-red-600 @else tw-text-blue-900 visited:tw-text-blue-900 dark:tw-text-dark-white-100 dark:visited:tw-text-dark-white-100 @endif"
        href="{{ $link }}"
         {{ $attributes }}>
         {{ $slot->isNotEmpty() ? $slot : $label }}
diff --git a/tailwind.config.js b/tailwind.config.js
index 7cf6e8e74f..ee2653a11d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,7 +8,21 @@ module.exports = {
   ],
   darkMode: 'class',
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        dark: {
+          'gray-100': '#4f565d',
+          'gray-200': '#3e444c',
+          'gray-300': '#353a41',
+          'gray-400': '#2e3338',
+          'gray-500': '#272b30',
+          'white-100': '#f9fafb',
+          'white-200': '#c8c8c8',
+          'white-300': '#bebfbf',
+          'white-400': '#acb6bf',
+        }
+      }
+    },
     screens: {
       'sm': '576px',
       'md': '768px',