diff --git a/kdb-bot/src/bot_data/model/user_joined_game_server.py b/kdb-bot/src/bot_data/model/user_joined_game_server.py
index c00e3447..964a19d0 100644
--- a/kdb-bot/src/bot_data/model/user_joined_game_server.py
+++ b/kdb-bot/src/bot_data/model/user_joined_game_server.py
@@ -38,6 +38,10 @@ class UserJoinedGameServer(TableABC):
     def game_server(self) -> str:
         return self._game_server
 
+    @property
+    def time(self) -> float:
+        return round((self.leaved_on - self.joined_on).total_seconds() / 3600, 2)
+
     @property
     def joined_on(self) -> datetime:
         return self._joined_on
diff --git a/kdb-bot/src/bot_graphql/model/userJoinedGameServer.gql b/kdb-bot/src/bot_graphql/model/userJoinedGameServer.gql
index 63d66daa..44aa523b 100644
--- a/kdb-bot/src/bot_graphql/model/userJoinedGameServer.gql
+++ b/kdb-bot/src/bot_graphql/model/userJoinedGameServer.gql
@@ -2,6 +2,7 @@ type UserJoinedGameServer implements TableQuery {
     id: ID
     gameServer: String
     user: User
+    time: Float
     joinedOn: String
     leavedOn: String
 
diff --git a/kdb-bot/src/bot_graphql/queries/user_joined_game_server_query.py b/kdb-bot/src/bot_graphql/queries/user_joined_game_server_query.py
index 877fa8b7..6e29ec7d 100644
--- a/kdb-bot/src/bot_graphql/queries/user_joined_game_server_query.py
+++ b/kdb-bot/src/bot_graphql/queries/user_joined_game_server_query.py
@@ -28,6 +28,10 @@ class UserJoinedGameServerQuery(DataQueryABC):
     def resolve_user(x: UserJoinedGameServer, *_):
         return x.user
 
+    @staticmethod
+    def resolve_time(x: UserJoinedGameServer, *_):
+        return x.time
+
     @staticmethod
     def resolve_joined_on(x: UserJoinedGameServer, *_):
         return x.joined_on
diff --git a/kdb-web/src/app/models/data/user.model.ts b/kdb-web/src/app/models/data/user.model.ts
index 385e6c6c..e55e5e19 100644
--- a/kdb-web/src/app/models/data/user.model.ts
+++ b/kdb-web/src/app/models/data/user.model.ts
@@ -3,6 +3,7 @@ import { Level, LevelFilter } from "./level.model";
 import { Server, ServerFilter } from "./server.model";
 import { UserJoinedServer } from "./user_joined_server.model";
 import { UserJoinedVoiceChannel } from "./user_joined_voice_channel.model";
+import { UserJoinedGameServer } from "./user_joined_game_server.model";
 
 export interface User extends Data {
   id?: number;
@@ -22,7 +23,7 @@ export interface User extends Data {
   joinedVoiceChannels?: UserJoinedVoiceChannel[];
 
   userJoinedGameServerCount?: number;
-  userJoinedGameServers?: [];
+  userJoinedGameServers?: UserJoinedGameServer[];
 }
 
 export interface UserFilter {
diff --git a/kdb-web/src/app/models/data/user_joined_game_server.model.ts b/kdb-web/src/app/models/data/user_joined_game_server.model.ts
new file mode 100644
index 00000000..b8ce5e72
--- /dev/null
+++ b/kdb-web/src/app/models/data/user_joined_game_server.model.ts
@@ -0,0 +1,11 @@
+import { Data } from "./data.model";
+import { User } from "./user.model";
+
+export interface UserJoinedGameServer extends Data {
+  id: number;
+  gameServer: string;
+  user: User;
+  time: number;
+  joinedOn: string;
+  leavedOn: string;
+}
diff --git a/kdb-web/src/app/models/graphql/queries.model.ts b/kdb-web/src/app/models/graphql/queries.model.ts
index 436e97a0..73baaf4a 100644
--- a/kdb-web/src/app/models/graphql/queries.model.ts
+++ b/kdb-web/src/app/models/graphql/queries.model.ts
@@ -122,6 +122,7 @@ export class Queries {
         userJoinedGameServers {
           id
           gameServer
+          time
           joinedOn
           leavedOn
         }
diff --git a/kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html b/kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html
index bcb77b39..4aefe844 100644
--- a/kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html
+++ b/kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html
@@ -224,7 +224,7 @@
 
       <ng-template pTemplate="emptymessage">
         <tr>
-          <td colspan="7">{{'admin.auth_users.no_entries_found' | translate}}</td>
+          <td colspan="9">{{'admin.auth_users.no_entries_found' | translate}}</td>
         </tr>
       </ng-template>
 
diff --git a/kdb-web/src/app/modules/shared/shared.module.ts b/kdb-web/src/app/modules/shared/shared.module.ts
index 59c0d0ef..bf719ea6 100644
--- a/kdb-web/src/app/modules/shared/shared.module.ts
+++ b/kdb-web/src/app/modules/shared/shared.module.ts
@@ -19,6 +19,7 @@ import { AuthRolePipe } from './pipes/auth-role.pipe';
 import { IpAddressPipe } from './pipes/ip-address.pipe';
 import { BoolPipe } from './pipes/bool.pipe';
 import { PanelMenuModule } from 'primeng/panelmenu';
+import { PanelModule } from "primeng/panel";
 
 
 
@@ -47,6 +48,7 @@ import { PanelMenuModule } from 'primeng/panelmenu';
     TranslateModule,
     DynamicDialogModule,
     PanelMenuModule,
+    PanelModule,
   ],
   exports: [
     ButtonModule,
@@ -66,6 +68,7 @@ import { PanelMenuModule } from 'primeng/panelmenu';
     TranslateModule,
     DynamicDialogModule,
     PanelMenuModule,
+    PanelModule,
     AuthRolePipe,
     IpAddressPipe,
     BoolPipe,
diff --git a/kdb-web/src/app/modules/view/server/members/members.component.html b/kdb-web/src/app/modules/view/server/members/members.component.html
index a512a85d..e8e51b34 100644
--- a/kdb-web/src/app/modules/view/server/members/members.component.html
+++ b/kdb-web/src/app/modules/view/server/members/members.component.html
@@ -238,7 +238,7 @@
       <ng-template pTemplate="emptymessage">
         <tr></tr>
         <tr>
-          <td colspan="7">{{'view.server.members.no_entries_found' | translate}}</td>
+          <td colspan="10">{{'view.server.members.no_entries_found' | translate}}</td>
         </tr>
         <tr></tr>
       </ng-template>
diff --git a/kdb-web/src/app/modules/view/server/profile/profile.component.html b/kdb-web/src/app/modules/view/server/profile/profile.component.html
index 1fdf1ec7..a1a38b43 100644
--- a/kdb-web/src/app/modules/view/server/profile/profile.component.html
+++ b/kdb-web/src/app/modules/view/server/profile/profile.component.html
@@ -77,51 +77,73 @@
     </div>
 
     <div class="content-divider"></div>
-    <div class="content-row">
-      <h3>{{'view.server.profile.joined_voice_channel.header' | translate}}</h3>
-    </div>
 
-    <div *ngFor="let join of user.joinedVoiceChannels;">
-      <div class="content-row">
-        <div class="content-column">
-          <div class="content-data-name">{{'view.server.profile.joined_voice_channel.time' | translate}}:</div>
-          <div class="content-data-value">{{join.time}} {{'general.hours' | translate}}</div>
-        </div>
+    <p-panel header="{{'view.server.profile.joined_voice_channel.header' | translate}}" [toggleable]="true">
+      <div *ngFor="let join of user.joinedVoiceChannels;">
+        <div class="content-row">
+          <div class="content-column">
+            <div class="content-data-name">{{'view.server.profile.joined_voice_channel.time' | translate}}:</div>
+            <div class="content-data-value">{{join.time}} {{'general.hours' | translate}}</div>
+          </div>
 
-        <div class="content-column">
-          <div class="content-data-name">{{'view.server.profile.joined_voice_channel.channel' | translate}}:</div>
-          <div class="content-data-value">{{join.channelName}}</div>
-        </div>
+          <div class="content-column">
+            <div class="content-data-name">{{'view.server.profile.joined_voice_channel.channel' | translate}}:</div>
+            <div class="content-data-value">{{join.channelName}}</div>
+          </div>
 
-        <div class="content-column">
-          <div class="content-data-name">{{'view.server.profile.joined_voice_channel.joined_at' | translate}}:</div>
-          <div class="content-data-value">{{join.joinedOn | date:'dd.MM.yyyy HH:mm:ss'}}</div>
-        </div>
+          <div class="content-column">
+            <div class="content-data-name">{{'common.joined_at' | translate}}:</div>
+            <div class="content-data-value">{{join.joinedOn | date:'dd.MM.yyyy HH:mm:ss'}}</div>
+          </div>
 
-        <div class="content-column">
-          <div class="content-data-name">{{'view.server.profile.joined_voice_channel.leaved_at' | translate}}:</div>
-          <div class="content-data-value">{{join.leavedOn | date:'dd.MM.yyyy HH:mm:ss'}}</div>
+          <div class="content-column">
+            <div class="content-data-name">{{'common.leaved_at' | translate}}:</div>
+            <div class="content-data-value">{{join.leavedOn | date:'dd.MM.yyyy HH:mm:ss'}}</div>
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="content-divider"></div>
-    <div class="content-row">
-      <h3>{{'view.server.profile.joined_server.header' | translate}}</h3>
-    </div>
+    </p-panel>
+    <p-panel header="{{'view.server.profile.joined_game_server.header' | translate}}" [toggleable]="true">
+      <div *ngFor="let join of user.userJoinedGameServers;">
+        <div class="content-row">
+          <div class="content-column">
+            <div class="content-data-name">{{'view.server.profile.joined_game_server.time' | translate}}:</div>
+            <div class="content-data-value">{{join.time}} {{'general.hours' | translate}}</div>
+          </div>
 
-    <div *ngFor="let join of user.joinedServers;">
-      <div class="content-row">
-        <div class="content-column">
-          <div class="content-data-name">{{'view.server.profile.joined_server.joined_at' | translate}}:</div>
-          <div class="content-data-value">{{join.joinedOn | date:'dd.MM.yyyy HH:mm:ss'}}</div>
-        </div>
+          <div class="content-column">
+            <div class="content-data-name">{{'view.server.profile.joined_game_server.name' | translate}}:</div>
+            <div class="content-data-value">{{join.gameServer}}</div>
+          </div>
 
-        <div class="content-column">
-          <div class="content-data-name">{{'view.server.profile.joined_server.leaved_at' | translate}}:</div>
-          <div class="content-data-value">{{join.leavedOn | date:'dd.MM.yyyy HH:mm:ss'}}</div>
+          <div class="content-column">
+            <div class="content-data-name">{{'common.joined_at' | translate}}:</div>
+            <div class="content-data-value">{{join.joinedOn | date:'dd.MM.yyyy HH:mm:ss'}}</div>
+          </div>
+
+          <div class="content-column">
+            <div class="content-data-name">{{'common.leaved_at' | translate}}:</div>
+            <div class="content-data-value">{{join.leavedOn | date:'dd.MM.yyyy HH:mm:ss'}}</div>
+          </div>
         </div>
       </div>
-    </div>
+    </p-panel>
+
+    <p-panel header="{{'view.server.profile.joined_server.header' | translate}}" [toggleable]="true">
+      <div *ngFor="let join of user.joinedServers;">
+        <div class="content-row">
+          <div class="content-column">
+            <div class="content-data-name">{{'common.joined_at' | translate}}:</div>
+            <div class="content-data-value">{{join.joinedOn | date:'dd.MM.yyyy HH:mm:ss'}}</div>
+          </div>
+
+          <div class="content-column">
+            <div class="content-data-name">{{'common.leaved_at' | translate}}:</div>
+            <div class="content-data-value">{{join.leavedOn | date:'dd.MM.yyyy HH:mm:ss'}}</div>
+          </div>
+        </div>
+      </div>
+    </p-panel>
   </div>
 </div>
diff --git a/kdb-web/src/assets/i18n/de.json b/kdb-web/src/assets/i18n/de.json
index c582b6c1..b94c3045 100644
--- a/kdb-web/src/assets/i18n/de.json
+++ b/kdb-web/src/assets/i18n/de.json
@@ -173,15 +173,16 @@
         "joined_voice_channel": {
           "header": "Sprachkanal-beitritte",
           "time": "Zeit",
-          "channel": "Sprachkanal",
-          "joined_at": "Beigetreten am",
-          "leaved_at": "Verlassen am"
+          "channel": "Sprachkanal"
+        },
+        "joined_game_server": {
+          "header": "Gameserver-beitritte",
+          "time": "Spielzeit",
+          "name": "Gameserver"
         },
         "joined_server": {
           "header": "Server-beitritte",
-          "time": "Zeit",
-          "joined_at": "Beigetreten am",
-          "leaved_at": "Verlassen am"
+          "time": "Zeit"
         },
         "permission_denied": "Zugriff Verweigert!",
         "permission_denied_d": "Du musst Moderator sein, um andere Profile sehen zu können!"
@@ -264,6 +265,8 @@
   "common": {
     "created_at": "Erstellt am",
     "modified_at": "Bearbeitet am",
+    "joined_at": "Beigetreten am",
+    "leaved_at": "Verlassen am",
     "bool_as_string": {
       "true": "Ja",
       "false": "Nein"
diff --git a/kdb-web/src/styles.scss b/kdb-web/src/styles.scss
index 2b131359..0fa6ae5a 100644
--- a/kdb-web/src/styles.scss
+++ b/kdb-web/src/styles.scss
@@ -152,6 +152,10 @@ header {
             margin: 5px 0;
           }
 
+          p-panel {
+            margin: 5px 0;
+          }
+
           .content-input-field {
             width: 50% !important;
             margin: 0 !important;
diff --git a/kdb-web/src/styles/themes/default-dark-theme.scss b/kdb-web/src/styles/themes/default-dark-theme.scss
index 9f0e2f6e..f0a7658b 100644
--- a/kdb-web/src/styles/themes/default-dark-theme.scss
+++ b/kdb-web/src/styles/themes/default-dark-theme.scss
@@ -1,558 +1,583 @@
 .default-dark-theme {
-    $primaryTextColor: #fff;
-    $secondayTextColor: #000;
-    $secondayTextColor2: #1e88e5;
+  $primaryTextColor: #fff;
+  $secondayTextColor: #000;
+  $secondayTextColor2: #1e88e5;
 
-    $primaryHeaderColor: #1e88e5;
-    $secondaryHeaderColor: #6ab7ff;
-    $secondaryHeaderColor2: #005cb2;
+  $primaryHeaderColor: #1e88e5;
+  $secondaryHeaderColor: #6ab7ff;
+  $secondaryHeaderColor2: #005cb2;
 
-    $primaryBackgroundColor: #272727;
-    $secondaryBackgroundColor: #4f4f4f;
-    $secondaryBackgroundColor2: #fff;
-    $secondaryBackgroundColor3: #cccccc;
+  $primaryBackgroundColor: #272727;
+  $secondaryBackgroundColor: #4f4f4f;
+  $secondaryBackgroundColor2: #fff;
+  $secondaryBackgroundColor3: #cccccc;
 
-    $primaryErrorColor: #b00020;
-    $secondaryErrorColor: #e94948;
+  $primaryErrorColor: #b00020;
+  $secondaryErrorColor: #e94948;
 
-    $default-border: 2px solid $secondaryBackgroundColor3;
+  $default-border: 2px solid $secondaryBackgroundColor3;
 
+  background-color: $primaryBackgroundColor;
+
+  h1,
+  h2 {
+    color: $primaryHeaderColor;
+  }
+
+  input,
+  p {
+    color: $primaryTextColor;
+  }
+
+  input {
+    background-color: $secondaryBackgroundColor !important;
+  }
+
+  .input-field-info-text {
+    color: $primaryTextColor;
+  }
+
+  /* Change Autocomplete styles in Chrome*/
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  textarea:-webkit-autofill,
+  textarea:-webkit-autofill:hover,
+  textarea:-webkit-autofill:focus,
+  select:-webkit-autofill,
+  select:-webkit-autofill:hover,
+  select:-webkit-autofill:focus {
+    border: 1px solid $primaryHeaderColor;
+    -webkit-text-fill-color: $primaryTextColor;
+    -webkit-box-shadow: 0 0 0 1000px $secondaryBackgroundColor inset;
+    transition: background-color 5000s ease-in-out 0s;
+  }
+
+  header {
     background-color: $primaryBackgroundColor;
 
-    h1,
-    h2 {
-        color: $primaryHeaderColor;
-    }
-
-    input,
-    p {
-        color: $primaryTextColor;
-    }
-
-    input {
-        background-color: $secondaryBackgroundColor !important;
-    }
-
-    .input-field-info-text {
-        color: $primaryTextColor;
-    }
-
-    /* Change Autocomplete styles in Chrome*/
-    input:-webkit-autofill,
-    input:-webkit-autofill:hover,
-    input:-webkit-autofill:focus,
-    textarea:-webkit-autofill,
-    textarea:-webkit-autofill:hover,
-    textarea:-webkit-autofill:focus,
-    select:-webkit-autofill,
-    select:-webkit-autofill:hover,
-    select:-webkit-autofill:focus {
-        border: 1px solid $primaryHeaderColor;
-        -webkit-text-fill-color: $primaryTextColor;
-        -webkit-box-shadow: 0 0 0px 1000px $secondaryBackgroundColor inset;
-        transition: background-color 5000s ease-in-out 0s;
-    }
-
-    header {
-        background-color: $primaryBackgroundColor;
-
-        .logo-button-wrapper {
-            .p-button.p-button-text {
-                color: $primaryTextColor;
-
-                &:hover {
-                    color: $primaryTextColor;
-                    background-color: $primaryBackgroundColor;
-                }
-            }
-        }
-
-        .logo {
-            color: $primaryHeaderColor;
-        }
-    }
-
-    h1 {
-        color: $primaryHeaderColor;
-    }
-
-    .app {
-        .sidebar {
-            background-color: $primaryBackgroundColor;
-
-            .menu {
-                color: $primaryTextColor;
-            }
-        }
-
-        .component-wrapper {
-            color: $primaryTextColor;
-
-            .component {
-                background-color: $secondaryBackgroundColor;
-
-                .content-wrapper {
-                    background-color: $primaryBackgroundColor;
-                    border-top: 2px solid $primaryHeaderColor;
-
-                    .content-header {
-                        border-bottom: $default-border;
-                    }
-
-                    .content {
-                        .content-row {
-                        }
-
-                        .content-column {
-                        }
-
-                        .content-data-name {
-                        }
-
-                        .content-data-value {
-                        }
-
-                        .content-divider {
-                            border-bottom: $default-border;
-                        }
-
-                        .server-list-wrapper {
-                            .server-filter {
-                            }
-
-                            .server-count {
-                            }
-
-                            .server-list {
-                                .server {
-                                    border: $default-border;
-                                    border-radius: 15px;
-
-                                    .logo {
-                                        img {
-                                            border-radius: 100%;
-                                        }
-                                    }
-
-                                    .name {
-                                        color: $primaryHeaderColor;
-                                    }
-
-                                    &:hover {
-                                        border-color: $primaryHeaderColor !important;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .p-dialog-header {
-        background-color: $secondaryBackgroundColor !important;
-        color: $primaryTextColor !important;
-    }
-
-    .p-dialog-content {
-        .content-data-name,
-        .content-data-value {
-            color: $primaryTextColor;
-
-            .text-btn {
-                font-size: 18px !important;
-                font-weight: 400 !important;
-            }
-        }
-    }
-
-    footer {
-        background-color: $primaryBackgroundColor;
+    .logo-button-wrapper {
+      .p-button.p-button-text {
         color: $primaryTextColor;
 
-        a {
-            color: $primaryTextColor;
+        &:hover {
+          color: $primaryTextColor;
+          background-color: $primaryBackgroundColor;
         }
+      }
     }
 
-    .invalid-feedback {
-        color: $primaryErrorColor;
+    .logo {
+      color: $primaryHeaderColor;
+    }
+  }
+
+  h1 {
+    color: $primaryHeaderColor;
+  }
+
+  .app {
+    .sidebar {
+      background-color: $primaryBackgroundColor;
+
+      .menu {
+        color: $primaryTextColor;
+      }
     }
 
-    .invalid-feedback-input,
-    .invalid-feedback-input:focus,
-    .invalid-feedback-input:hover {
-        input,
-        input:enabled:focus {
-            outline: 1px solid $primaryErrorColor !important;
-            border: 1px solid $primaryErrorColor !important;
-            border-color: $primaryErrorColor !important;
-        }
-    }
+    .component-wrapper {
+      color: $primaryTextColor;
 
-    .login-wrapper {
+      .component {
         background-color: $secondaryBackgroundColor;
 
-        .login-form-wrapper,
-        .auth-header {
-            background-color: $primaryBackgroundColor;
+        .content-wrapper {
+          background-color: $primaryBackgroundColor;
+          border-top: 2px solid $primaryHeaderColor;
 
-            .login-form {
-                .input-field {
-                    input,
-                    .p-password {
-                    }
-                }
+          .content-header {
+            border-bottom: $default-border;
+          }
 
-                .login-form-submit {
-                    .login-form-submit-btn {
-                    }
-                }
-
-                .login-form-sub-button-wrapper {
-                    .login-form-sub-btn {
-                        background-color: $primaryBackgroundColor;
-                        color: $secondayTextColor2;
-                        border: 2px solid $secondayTextColor2;
-
-                        &:hover {
-                            background-color: $primaryHeaderColor !important;
-                            color: $primaryTextColor !important;
-                        }
-                    }
-
-                    .login-form-sub-login-btn {
-                        border: none;
-                    }
-                }
+          .content {
+            .content-row {
             }
-        }
-    }
 
-    .spinner-component-wrapper {
-        background-color: rgba($secondaryBackgroundColor, 0.5);
+            .content-column {
+            }
 
-        .spinner-wrapper {
-            .custom-spinner .p-progress-spinner-circle {
+            .content-data-name {
+            }
+
+            .content-data-value {
+            }
+
+            .content-divider {
+              border-bottom: $default-border;
+            }
+
+            .server-list-wrapper {
+              .server-filter {
+              }
+
+              .server-count {
+              }
+
+              .server-list {
+                .server {
+                  border: $default-border;
+                  border-radius: 15px;
+
+                  .logo {
+                    img {
+                      border-radius: 100%;
+                    }
+                  }
+
+                  .name {
+                    color: $primaryHeaderColor;
+                  }
+
+                  &:hover {
+                    border-color: $primaryHeaderColor !important;
+                  }
+                }
+              }
+            }
+
+            p-panel {
+              .p-panel-header,
+              .p-panel-content {
+                border: $default-border;
+              }
+
+              .p-panel-title {
                 color: $primaryHeaderColor;
-            }
-        }
-    }
+              }
 
-    .wrapper-right {
-        justify-content: flex-end !important;
-    }
+              .p-panel-header {
+                background-color: $primaryBackgroundColor;
 
-    /* 
-        PrimeNG Fixes 
-    */
-    .p-progress-spinner-circle {
-        stroke: $primaryHeaderColor !important;
-    }
-
-    .p-menu,
-    .p-panelmenu {
-        color: $primaryTextColor !important;
-
-        .p-menuitem-link .p-menuitem-text,
-        .p-menuitem-link .p-menuitem-icon,
-        .p-panelmenu-header > a {
-            color: $primaryTextColor !important;
-            background: transparent !important;
-            font-size: 1rem !important;
-            font-weight: normal !important;
-        }
-
-        .p-menuitem-link:focus,
-        .p-panelmenu-header > a:focus,
-        .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
-            box-shadow: none !important;
-        }
-
-        .p-menuitem-link:hover,
-        .p-panelmenu-header > a:hover,
-        .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
-            background-color: $secondaryBackgroundColor !important;
-            $border-radius: 20px;
-            border-radius: $border-radius 0px 0px $border-radius;
-
-            .p-menuitem-text,
-            .p-menuitem-icon,
-            .p-menuitem-text,
-            .p-panelmenu-icon {
-                color: $primaryHeaderColor !important;
-            }
-        }
-
-        .p-panelmenu-content {
-            margin: 5px 0px 5px 10px;
-        }
-    }
-
-    .p-menu-overlay {
-        background-color: $primaryBackgroundColor !important;
-        color: $primaryTextColor !important;
-        border-top: 2px solid $primaryHeaderColor !important;
-
-        .p-menuitem-link:hover {
-            background-color: $primaryBackgroundColor !important;
-            .p-menuitem-text,
-            .p-menuitem-icon {
-                color: $primaryHeaderColor !important;
-            }
-        }
-    }
-
-    p-dropdown {
-        .p-dropdown {
-            background-color: $primaryBackgroundColor !important;
-            border-color: $primaryTextColor !important;
-            color: $primaryTextColor !important;
-
-            span {
-                color: $primaryTextColor;
-            }
-
-            .p-dropdown-panel {
-                background-color: $secondaryBackgroundColor !important;
-
-                .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
-                    background-color: $secondaryBackgroundColor !important;
-                    color: $primaryHeaderColor !important;
-
-                    span {
-                        color: $primaryHeaderColor !important;
-                    }
-                }
-
-                .p-dropdown-items .p-dropdown-item.p-highlight {
-                    background-color: $secondaryBackgroundColor !important;
-                    color: $primaryHeaderColor !important;
-
-                    span {
-                        color: $primaryHeaderColor !important;
-                    }
+                .p-panel-header-icon {
+                  color: $primaryHeaderColor;
                 }
+              }
             }
+
+            .p-panel-content {
+              background-color: $primaryBackgroundColor;
+              color: $primaryTextColor;
+              border-top: none !important;
+            }
+          }
         }
+      }
     }
+  }
 
-    p-table {
-        background-color: $primaryBackgroundColor;
-        color: $primaryTextColor !important;
+  .p-dialog-header {
+    background-color: $secondaryBackgroundColor !important;
+    color: $primaryTextColor !important;
+  }
 
-        .table-caption {
-            .table-caption-text {
-            }
+  .p-dialog-content {
+    .content-data-name,
+    .content-data-value {
+      color: $primaryTextColor;
 
-            .table-caption-search-wrapper {
-                .table-caption-search {
-                    height: 30px !important;
-
-                    .table-caption-search-icon {
-                    }
-
-                    .table-caption-search-input {
-                        height: 100% !important;
-
-                        &:focus {
-                            outline-color: $primaryHeaderColor;
-                        }
-                    }
-                }
-            }
-
-            .table-caption-btn-wrapper {
-                height: 30px !important;
-            }
-        }
-
-        .table-edit-input {
-            width: 100% !important;
-        }
+      .text-btn {
+        font-size: 18px !important;
+        font-weight: 400 !important;
+      }
     }
+  }
 
-    p-checkbox {
-        .p-checkbox .p-checkbox-box {
-            background: $primaryBackgroundColor !important;
-            background-color: $primaryBackgroundColor !important;
-        }
+  footer {
+    background-color: $primaryBackgroundColor;
+    color: $primaryTextColor;
 
-        .p-checkbox .p-checkbox-box.p-highlight {
-            background: $primaryBackgroundColor !important;
-            background-color: $primaryBackgroundColor !important;
-            border-color: $primaryTextColor !important;
-            box-shadow: none !important;
-        }
-
-        .p-checkbox .p-checkbox-box .p-checkbox-icon {
-            color: $primaryTextColor !important;
-        }
-
-        .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus,
-        .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
-            border-color: $primaryHeaderColor !important;
-            box-shadow: none !important;
-
-            .p-checkbox-icon {
-                color: $primaryHeaderColor !important;
-            }
-        }
+    a {
+      color: $primaryTextColor;
     }
+  }
 
-    p-dialog,
-    p-confirmdialog,
-    p-dynamicdialog {
-        .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
-            margin-left: 0px !important;
-        }
-
-        .p-dialog {
-            background-color: $secondaryBackgroundColor !important;
-
-            .p-dialog-header {
-                background-color: $primaryBackgroundColor !important;
-                color: $primaryTextColor !important;
-            }
-
-            .p-dialog-content,
-            .p-dialog-footer {
-                background-color: $secondaryBackgroundColor !important;
-                color: $primaryTextColor !important;
-            }
-        }
-    }
+  .invalid-feedback {
+    color: $primaryErrorColor;
+  }
 
+  .invalid-feedback-input,
+  .invalid-feedback-input:focus,
+  .invalid-feedback-input:hover {
     input,
-    .p-password input {
-        border-radius: 10px;
-        border: $default-border;
+    input:enabled:focus {
+      outline: 1px solid $primaryErrorColor !important;
+      border: 1px solid $primaryErrorColor !important;
+      border-color: $primaryErrorColor !important;
+    }
+  }
 
-        &:focus {
-            box-shadow: none !important;
+  .login-wrapper {
+    background-color: $secondaryBackgroundColor;
+
+    .login-form-wrapper,
+    .auth-header {
+      background-color: $primaryBackgroundColor;
+
+      .login-form {
+        .input-field {
+          input,
+          .p-password {
+          }
         }
 
-        &:hover,
-        &:active,
-        &:enabled:focus {
-            border-color: $primaryHeaderColor !important;
+        .login-form-submit {
+          .login-form-submit-btn {
+          }
         }
+
+        .login-form-sub-button-wrapper {
+          .login-form-sub-btn {
+            background-color: $primaryBackgroundColor;
+            color: $secondayTextColor2;
+            border: 2px solid $secondayTextColor2;
+
+            &:hover {
+              background-color: $primaryHeaderColor !important;
+              color: $primaryTextColor !important;
+            }
+          }
+
+          .login-form-sub-login-btn {
+            border: none;
+          }
+        }
+      }
+    }
+  }
+
+  .spinner-component-wrapper {
+    background-color: rgba($secondaryBackgroundColor, 0.5);
+
+    .spinner-wrapper {
+      .custom-spinner .p-progress-spinner-circle {
+        color: $primaryHeaderColor;
+      }
+    }
+  }
+
+  .wrapper-right {
+    justify-content: flex-end !important;
+  }
+
+  /*
+      PrimeNG Fixes
+  */
+  .p-progress-spinner-circle {
+    stroke: $primaryHeaderColor !important;
+  }
+
+  .p-menu,
+  .p-panelmenu {
+    color: $primaryTextColor !important;
+
+    .p-menuitem-link .p-menuitem-text,
+    .p-menuitem-link .p-menuitem-icon,
+    .p-panelmenu-header > a {
+      color: $primaryTextColor !important;
+      background: transparent !important;
+      font-size: 1rem !important;
+      font-weight: normal !important;
     }
 
-    .btn-wrapper {
-        display: flex !important;
-        align-items: center !important;
+    .p-menuitem-link:focus,
+    .p-panelmenu-header > a:focus,
+    .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
+      box-shadow: none !important;
     }
 
-    .btn {
-        background-color: $primaryHeaderColor;
+    .p-menuitem-link:hover,
+    .p-panelmenu-header > a:hover,
+    .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
+      background-color: $secondaryBackgroundColor !important;
+      $border-radius: 20px;
+      border-radius: $border-radius 0 0 $border-radius;
+
+      .p-menuitem-text,
+      .p-menuitem-icon,
+      .p-menuitem-text,
+      .p-panelmenu-icon {
+        color: $primaryHeaderColor !important;
+      }
+    }
+
+    .p-panelmenu-content {
+      margin: 5px 0 5px 10px;
+    }
+  }
+
+  .p-menu-overlay {
+    background-color: $primaryBackgroundColor !important;
+    color: $primaryTextColor !important;
+    border-top: 2px solid $primaryHeaderColor !important;
+
+    .p-menuitem-link:hover {
+      background-color: $primaryBackgroundColor !important;
+
+      .p-menuitem-text,
+      .p-menuitem-icon {
+        color: $primaryHeaderColor !important;
+      }
+    }
+  }
+
+  p-dropdown {
+    .p-dropdown {
+      background-color: $primaryBackgroundColor !important;
+      border-color: $primaryTextColor !important;
+      color: $primaryTextColor !important;
+
+      span {
         color: $primaryTextColor;
-        border: 0;
+      }
 
-        &:hover,
-        &:enabled:hover {
-            background-color: $primaryHeaderColor;
-            color: $primaryTextColor;
-            border: 0;
-        }
-    }
+      .p-dropdown-panel {
+        background-color: $secondaryBackgroundColor !important;
 
-    .icon-btn {
-        background-color: transparent !important;
-        color: $primaryTextColor !important;
-        border: 0 !important;
+        .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+          background-color: $secondaryBackgroundColor !important;
+          color: $primaryHeaderColor !important;
 
-        .pi {
-            font-size: 1.275rem !important;
-        }
-    }
-
-    .text-btn {
-        background-color: transparent !important;
-        color: $primaryTextColor !important;
-        border: 0 !important;
-        padding: 0px !important;
-
-        &:hover {
-            background-color: transparent !important;
+          span {
             color: $primaryHeaderColor !important;
-            border: 0;
+          }
         }
-    }
 
-    .icon-btn-without-hover {
-        &:hover {
-            background-color: transparent !important;
-            color: $primaryTextColor !important;
-            border: 0 !important;
-        }
-    }
+        .p-dropdown-items .p-dropdown-item.p-highlight {
+          background-color: $secondaryBackgroundColor !important;
+          color: $primaryHeaderColor !important;
 
-    .icon-btn {
-        &:hover {
-            background-color: transparent !important;
+          span {
             color: $primaryHeaderColor !important;
-            border: 0;
+          }
         }
+      }
+    }
+  }
+
+  p-table {
+    background-color: $primaryBackgroundColor;
+    color: $primaryTextColor !important;
+
+    .table-caption {
+      .table-caption-text {
+      }
+
+      .table-caption-search-wrapper {
+        .table-caption-search {
+          height: 30px !important;
+
+          .table-caption-search-icon {
+          }
+
+          .table-caption-search-input {
+            height: 100% !important;
+
+            &:focus {
+              outline-color: $primaryHeaderColor;
+            }
+          }
+        }
+      }
+
+      .table-caption-btn-wrapper {
+        height: 30px !important;
+      }
     }
 
-    .danger-icon-btn {
-        background-color: transparent !important;
-        color: $primaryTextColor !important;
-        border: 0 !important;
+    .table-edit-input {
+      width: 100% !important;
+    }
+  }
 
-        &:hover {
-            background-color: transparent !important;
-            color: $primaryErrorColor !important;
-            border: 0;
-        }
-
-        .pi {
-            font-size: 1.275rem !important;
-        }
+  p-checkbox {
+    .p-checkbox .p-checkbox-box {
+      background: $primaryBackgroundColor !important;
+      background-color: $primaryBackgroundColor !important;
     }
 
-    .danger-btn {
-        background-color: $primaryErrorColor !important;
-        color: $primaryErrorColor !important;
-        border: 0 !important;
-
-        &:hover {
-            background-color: $primaryErrorColor !important;
-            color: $primaryTextColor !important;
-            border: 0;
-        }
-
-        .pi {
-            font-size: 1.275rem !important;
-        }
+    .p-checkbox .p-checkbox-box.p-highlight {
+      background: $primaryBackgroundColor !important;
+      background-color: $primaryBackgroundColor !important;
+      border-color: $primaryTextColor !important;
+      box-shadow: none !important;
     }
 
-    .p-datatable .p-sortable-column.p-highlight,
-    .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    .p-checkbox .p-checkbox-box .p-checkbox-icon {
+      color: $primaryTextColor !important;
+    }
+
+    .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus,
+    .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+      border-color: $primaryHeaderColor !important;
+      box-shadow: none !important;
+
+      .p-checkbox-icon {
         color: $primaryHeaderColor !important;
+      }
+    }
+  }
+
+  p-dialog,
+  p-confirmdialog,
+  p-dynamicdialog {
+    .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+      margin-left: 0 !important;
     }
 
-    .p-dropdown:not(.p-disabled):hover,
-    .p-dropdown:not(.p-disabled).p-focus,
-    .p-link:focus {
-        border-color: $primaryHeaderColor !important;
-        box-shadow: none !important;
-    }
+    .p-dialog {
+      background-color: $secondaryBackgroundColor !important;
 
-    .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-        background: transparent !important;
-        background-color: transparent !important;
-        color: $primaryHeaderColor !important;
-    }
-
-    .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover,
-    .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
-    .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
-    .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
-    .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+      .p-dialog-header {
         background-color: $primaryBackgroundColor !important;
-        color: $primaryHeaderColor !important;
+        color: $primaryTextColor !important;
+      }
+
+      .p-dialog-content,
+      .p-dialog-footer {
+        background-color: $secondaryBackgroundColor !important;
+        color: $primaryTextColor !important;
+      }
     }
+  }
+
+  input,
+  .p-password input {
+    border-radius: 10px;
+    border: $default-border;
+
+    &:focus {
+      box-shadow: none !important;
+    }
+
+    &:hover,
+    &:active,
+    &:enabled:focus {
+      border-color: $primaryHeaderColor !important;
+    }
+  }
+
+  .btn-wrapper {
+    display: flex !important;
+    align-items: center !important;
+  }
+
+  .btn {
+    background-color: $primaryHeaderColor;
+    color: $primaryTextColor;
+    border: 0;
+
+    &:hover,
+    &:enabled:hover {
+      background-color: $primaryHeaderColor;
+      color: $primaryTextColor;
+      border: 0;
+    }
+  }
+
+  .icon-btn {
+    background-color: transparent !important;
+    color: $primaryTextColor !important;
+    border: 0 !important;
+
+    .pi {
+      font-size: 1.275rem !important;
+    }
+  }
+
+  .text-btn {
+    background-color: transparent !important;
+    color: $primaryTextColor !important;
+    border: 0 !important;
+    padding: 0 !important;
+
+    &:hover {
+      background-color: transparent !important;
+      color: $primaryHeaderColor !important;
+      border: 0;
+    }
+  }
+
+  .icon-btn-without-hover {
+    &:hover {
+      background-color: transparent !important;
+      color: $primaryTextColor !important;
+      border: 0 !important;
+    }
+  }
+
+  .icon-btn {
+    &:hover {
+      background-color: transparent !important;
+      color: $primaryHeaderColor !important;
+      border: 0;
+    }
+  }
+
+  .danger-icon-btn {
+    background-color: transparent !important;
+    color: $primaryTextColor !important;
+    border: 0 !important;
+
+    &:hover {
+      background-color: transparent !important;
+      color: $primaryErrorColor !important;
+      border: 0;
+    }
+
+    .pi {
+      font-size: 1.275rem !important;
+    }
+  }
+
+  .danger-btn {
+    background-color: $primaryErrorColor !important;
+    color: $primaryErrorColor !important;
+    border: 0 !important;
+
+    &:hover {
+      background-color: $primaryErrorColor !important;
+      color: $primaryTextColor !important;
+      border: 0;
+    }
+
+    .pi {
+      font-size: 1.275rem !important;
+    }
+  }
+
+  .p-datatable .p-sortable-column.p-highlight,
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: $primaryHeaderColor !important;
+  }
+
+  .p-dropdown:not(.p-disabled):hover,
+  .p-dropdown:not(.p-disabled).p-focus,
+  .p-link:focus {
+    border-color: $primaryHeaderColor !important;
+    box-shadow: none !important;
+  }
+
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: transparent !important;
+    color: $primaryHeaderColor !important;
+  }
+
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover,
+  .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+    background-color: $primaryBackgroundColor !important;
+    color: $primaryHeaderColor !important;
+  }
 }
diff --git a/kdb-web/src/styles/themes/default-light-theme.scss b/kdb-web/src/styles/themes/default-light-theme.scss
index 69a1b97d..4c37c304 100644
--- a/kdb-web/src/styles/themes/default-light-theme.scss
+++ b/kdb-web/src/styles/themes/default-light-theme.scss
@@ -1,558 +1,583 @@
 .default-light-theme {
-    $primaryTextColor: #272727;
-    $secondayTextColor: #fff;
-    $secondayTextColor2: #1e88e5;
+  $primaryTextColor: #272727;
+  $secondayTextColor: #fff;
+  $secondayTextColor2: #1e88e5;
 
-    $primaryHeaderColor: #1e88e5;
-    $secondaryHeaderColor: #6ab7ff;
-    $secondaryHeaderColor2: #005cb2;
+  $primaryHeaderColor: #1e88e5;
+  $secondaryHeaderColor: #6ab7ff;
+  $secondaryHeaderColor2: #005cb2;
 
-    $primaryBackgroundColor: #fff;
-    $secondaryBackgroundColor: #cccccc;
-    $secondaryBackgroundColor2: #4f4f4f;
-    $secondaryBackgroundColor3: #272727;
+  $primaryBackgroundColor: #fff;
+  $secondaryBackgroundColor: #cccccc;
+  $secondaryBackgroundColor2: #4f4f4f;
+  $secondaryBackgroundColor3: #272727;
 
-    $primaryErrorColor: #b00020;
-    $secondaryErrorColor: #e94948;
+  $primaryErrorColor: #b00020;
+  $secondaryErrorColor: #e94948;
 
-    $default-border: 2px solid $secondaryBackgroundColor;
+  $default-border: 2px solid $secondaryBackgroundColor;
 
+  background-color: $primaryBackgroundColor;
+
+  h1,
+  h2 {
+    color: $primaryHeaderColor;
+  }
+
+  input,
+  p {
+    color: $primaryTextColor;
+  }
+
+  input {
+    background-color: $primaryBackgroundColor !important;
+  }
+
+  .input-field-info-text {
+    color: $primaryTextColor;
+  }
+
+  /* Change Autocomplete styles in Chrome*/
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  textarea:-webkit-autofill,
+  textarea:-webkit-autofill:hover,
+  textarea:-webkit-autofill:focus,
+  select:-webkit-autofill,
+  select:-webkit-autofill:hover,
+  select:-webkit-autofill:focus {
+    border: 1px solid $primaryHeaderColor;
+    -webkit-text-fill-color: $primaryTextColor;
+    -webkit-box-shadow: 0 0 0 1000px $primaryBackgroundColor inset;
+    transition: background-color 5000s ease-in-out 0s;
+  }
+
+  header {
     background-color: $primaryBackgroundColor;
 
-    h1,
-    h2 {
-        color: $primaryHeaderColor;
-    }
-
-    input,
-    p {
-        color: $primaryTextColor;
-    }
-
-    input {
-        background-color: $primaryBackgroundColor !important;
-    }
-
-    .input-field-info-text {
-        color: $primaryTextColor;
-    }
-
-    /* Change Autocomplete styles in Chrome*/
-    input:-webkit-autofill,
-    input:-webkit-autofill:hover,
-    input:-webkit-autofill:focus,
-    textarea:-webkit-autofill,
-    textarea:-webkit-autofill:hover,
-    textarea:-webkit-autofill:focus,
-    select:-webkit-autofill,
-    select:-webkit-autofill:hover,
-    select:-webkit-autofill:focus {
-        border: 1px solid $primaryHeaderColor;
-        -webkit-text-fill-color: $primaryTextColor;
-        -webkit-box-shadow: 0 0 0px 1000px $primaryBackgroundColor inset;
-        transition: background-color 5000s ease-in-out 0s;
-    }
-
-    header {
-        background-color: $primaryBackgroundColor;
-
-        .logo-button-wrapper {
-            .p-button.p-button-text {
-                color: $primaryTextColor;
-
-                &:hover {
-                    color: $primaryTextColor;
-                    background-color: $primaryBackgroundColor;
-                }
-            }
-        }
-
-        .logo {
-            color: $primaryHeaderColor;
-        }
-    }
-
-    h1 {
-        color: $primaryHeaderColor;
-    }
-
-    .app {
-        .sidebar {
-            background-color: $primaryBackgroundColor;
-
-            .menu {
-                color: $primaryTextColor;
-            }
-        }
-
-        .component-wrapper {
-            color: $primaryTextColor;
-
-            .component {
-                background-color: $secondaryBackgroundColor;
-
-                .content-wrapper {
-                    background-color: $primaryBackgroundColor;
-                    border-top: 2px solid $primaryHeaderColor;
-
-                    .content-header {
-                        border-bottom: $default-border;
-                    }
-
-                    .content {
-                        .content-row {
-                        }
-
-                        .content-column {
-                        }
-
-                        .content-data-name {
-                        }
-
-                        .content-data-value {
-                        }
-
-                        .content-divider {
-                            border-bottom: $default-border;
-                        }
-
-                        .server-list-wrapper {
-                            .server-filter {
-                            }
-
-                            .server-count {
-                            }
-
-                            .server-list {
-                                .server {
-                                    border: $default-border;
-                                    border-radius: 15px;
-
-                                    .logo {
-                                        img {
-                                            border-radius: 100%;
-                                        }
-                                    }
-
-                                    .name {
-                                        color: $primaryHeaderColor;
-                                    }
-
-                                    &:hover {
-                                        border-color: $primaryHeaderColor !important;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .p-dialog-header {
-        background-color: $secondaryBackgroundColor !important;
-        color: $primaryTextColor !important;
-    }
-
-    .p-dialog-content {
-        .content-data-name,
-        .content-data-value {
-            color: $primaryTextColor;
-
-            .text-btn {
-                font-size: 18px !important;
-                font-weight: 400 !important;
-            }
-        }
-    }
-
-    footer {
-        background-color: $primaryBackgroundColor;
+    .logo-button-wrapper {
+      .p-button.p-button-text {
         color: $primaryTextColor;
 
-        a {
-            color: $primaryTextColor;
+        &:hover {
+          color: $primaryTextColor;
+          background-color: $primaryBackgroundColor;
         }
+      }
     }
 
-    .invalid-feedback {
-        color: $primaryErrorColor;
+    .logo {
+      color: $primaryHeaderColor;
+    }
+  }
+
+  h1 {
+    color: $primaryHeaderColor;
+  }
+
+  .app {
+    .sidebar {
+      background-color: $primaryBackgroundColor;
+
+      .menu {
+        color: $primaryTextColor;
+      }
     }
 
-    .invalid-feedback-input,
-    .invalid-feedback-input:focus,
-    .invalid-feedback-input:hover {
-        input,
-        input:enabled:focus {
-            outline: 1px solid $primaryErrorColor !important;
-            border: 1px solid $primaryErrorColor !important;
-            border-color: $primaryErrorColor !important;
-        }
-    }
+    .component-wrapper {
+      color: $primaryTextColor;
 
-    .login-wrapper {
+      .component {
         background-color: $secondaryBackgroundColor;
 
-        .login-form-wrapper,
-        .auth-header {
-            background-color: $primaryBackgroundColor;
+        .content-wrapper {
+          background-color: $primaryBackgroundColor;
+          border-top: 2px solid $primaryHeaderColor;
 
-            .login-form {
-                .input-field {
-                    input,
-                    .p-password {
-                    }
-                }
+          .content-header {
+            border-bottom: $default-border;
+          }
 
-                .login-form-submit {
-                    .login-form-submit-btn {
-                    }
-                }
-
-                .login-form-sub-button-wrapper {
-                    .login-form-sub-btn {
-                        background-color: $primaryBackgroundColor;
-                        color: $secondayTextColor2;
-                        border: 2px solid $secondayTextColor2;
-
-                        &:hover {
-                            background-color: $primaryHeaderColor !important;
-                            color: $primaryTextColor !important;
-                        }
-                    }
-
-                    .login-form-sub-login-btn {
-                        border: none;
-                    }
-                }
+          .content {
+            .content-row {
             }
-        }
-    }
 
-    .spinner-component-wrapper {
-        background-color: rgba($secondaryBackgroundColor, 0.5);
+            .content-column {
+            }
 
-        .spinner-wrapper {
-            .custom-spinner .p-progress-spinner-circle {
+            .content-data-name {
+            }
+
+            .content-data-value {
+            }
+
+            .content-divider {
+              border-bottom: $default-border;
+            }
+
+            .server-list-wrapper {
+              .server-filter {
+              }
+
+              .server-count {
+              }
+
+              .server-list {
+                .server {
+                  border: $default-border;
+                  border-radius: 15px;
+
+                  .logo {
+                    img {
+                      border-radius: 100%;
+                    }
+                  }
+
+                  .name {
+                    color: $primaryHeaderColor;
+                  }
+
+                  &:hover {
+                    border-color: $primaryHeaderColor !important;
+                  }
+                }
+              }
+            }
+
+            p-panel {
+              .p-panel-header,
+              .p-panel-content {
+                border: $default-border;
+              }
+
+              .p-panel-title {
                 color: $primaryHeaderColor;
-            }
-        }
-    }
+              }
 
-    .wrapper-right {
-        justify-content: flex-end !important;
-    }
+              .p-panel-header {
+                background-color: $primaryBackgroundColor;
 
-    /* 
-        PrimeNG Fixes 
-    */
-    .p-progress-spinner-circle {
-        stroke: $primaryHeaderColor !important;
-    }
-
-    .p-menu,
-    .p-panelmenu {
-        color: $primaryTextColor !important;
-
-        .p-menuitem-link .p-menuitem-text,
-        .p-menuitem-link .p-menuitem-icon,
-        .p-panelmenu-header > a {
-            color: $primaryTextColor !important;
-            background: transparent !important;
-            font-size: 1rem !important;
-            font-weight: normal !important;
-        }
-
-        .p-menuitem-link:focus,
-        .p-panelmenu-header > a:focus,
-        .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
-            box-shadow: none !important;
-        }
-
-        .p-menuitem-link:hover,
-        .p-panelmenu-header > a:hover,
-        .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
-            background-color: $secondaryBackgroundColor !important;
-            $border-radius: 20px;
-            border-radius: $border-radius 0px 0px $border-radius;
-
-            .p-menuitem-text,
-            .p-menuitem-icon,
-            .p-menuitem-text,
-            .p-panelmenu-icon {
-                color: $primaryHeaderColor !important;
-            }
-        }
-
-        .p-panelmenu-content {
-            margin: 5px 0px 5px 10px;
-        }
-    }
-
-    .p-menu-overlay {
-        background-color: $primaryBackgroundColor !important;
-        color: $primaryTextColor !important;
-        border-top: 2px solid $primaryHeaderColor !important;
-
-        .p-menuitem-link:hover {
-            background-color: $primaryBackgroundColor !important;
-            .p-menuitem-text,
-            .p-menuitem-icon {
-                color: $primaryHeaderColor !important;
-            }
-        }
-    }
-
-    p-dropdown {
-        .p-dropdown {
-            background-color: $primaryBackgroundColor !important;
-            border-color: $primaryTextColor !important;
-            color: $primaryTextColor !important;
-
-            span {
-                color: $primaryTextColor;
-            }
-
-            .p-dropdown-panel {
-                background-color: $primaryBackgroundColor !important;
-
-                .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
-                    background-color: $primaryBackgroundColor !important;
-                    color: $primaryHeaderColor !important;
-
-                    span {
-                        color: $primaryHeaderColor !important;
-                    }
-                }
-
-                .p-dropdown-items .p-dropdown-item.p-highlight {
-                    background-color: $primaryBackgroundColor !important;
-                    color: $primaryHeaderColor !important;
-
-                    span {
-                        color: $primaryHeaderColor !important;
-                    }
+                .p-panel-header-icon {
+                  color: $primaryHeaderColor;
                 }
+              }
             }
+
+            .p-panel-content {
+              background-color: $primaryBackgroundColor;
+              color: $primaryTextColor;
+              border-top: none !important;
+            }
+          }
         }
+      }
     }
+  }
 
-    p-table {
-        background-color: $primaryBackgroundColor;
-        color: $primaryTextColor !important;
+  .p-dialog-header {
+    background-color: $secondaryBackgroundColor !important;
+    color: $primaryTextColor !important;
+  }
 
-        .table-caption {
-            .table-caption-text {
-            }
+  .p-dialog-content {
+    .content-data-name,
+    .content-data-value {
+      color: $primaryTextColor;
 
-            .table-caption-search-wrapper {
-                .table-caption-search {
-                    height: 30px !important;
-
-                    .table-caption-search-icon {
-                    }
-
-                    .table-caption-search-input {
-                        height: 100% !important;
-
-                        &:focus {
-                            outline-color: $primaryHeaderColor;
-                        }
-                    }
-                }
-            }
-
-            .table-caption-btn-wrapper {
-                height: 30px !important;
-            }
-        }
-
-        .table-edit-input {
-            width: 100% !important;
-        }
+      .text-btn {
+        font-size: 18px !important;
+        font-weight: 400 !important;
+      }
     }
+  }
 
-    p-checkbox {
-        .p-checkbox .p-checkbox-box {
-            background: $primaryBackgroundColor !important;
-            background-color: $primaryBackgroundColor !important;
-        }
+  footer {
+    background-color: $primaryBackgroundColor;
+    color: $primaryTextColor;
 
-        .p-checkbox .p-checkbox-box.p-highlight {
-            background: $primaryBackgroundColor !important;
-            background-color: $primaryBackgroundColor !important;
-            border-color: $primaryTextColor !important;
-            box-shadow: none !important;
-        }
-
-        .p-checkbox .p-checkbox-box .p-checkbox-icon {
-            color: $primaryTextColor !important;
-        }
-
-        .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus,
-        .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
-            border-color: $primaryHeaderColor !important;
-            box-shadow: none !important;
-
-            .p-checkbox-icon {
-                color: $primaryHeaderColor !important;
-            }
-        }
+    a {
+      color: $primaryTextColor;
     }
+  }
 
-    p-dialog,
-    p-confirmdialog,
-    p-dynamicdialog {
-        .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
-            margin-left: 0px !important;
-        }
-
-        .p-dialog {
-            background-color: $primaryBackgroundColor !important;
-
-            .p-dialog-header {
-                background-color: $secondaryBackgroundColor !important;
-                color: $primaryTextColor !important;
-            }
-
-            .p-dialog-content,
-            .p-dialog-footer {
-                background-color: $primaryBackgroundColor !important;
-                color: $primaryTextColor !important;
-            }
-        }
-    }
+  .invalid-feedback {
+    color: $primaryErrorColor;
+  }
 
+  .invalid-feedback-input,
+  .invalid-feedback-input:focus,
+  .invalid-feedback-input:hover {
     input,
-    .p-password input {
-        border-radius: 10px;
-        border: $default-border;
+    input:enabled:focus {
+      outline: 1px solid $primaryErrorColor !important;
+      border: 1px solid $primaryErrorColor !important;
+      border-color: $primaryErrorColor !important;
+    }
+  }
 
-        &:focus {
-            box-shadow: none !important;
+  .login-wrapper {
+    background-color: $secondaryBackgroundColor;
+
+    .login-form-wrapper,
+    .auth-header {
+      background-color: $primaryBackgroundColor;
+
+      .login-form {
+        .input-field {
+          input,
+          .p-password {
+          }
         }
 
-        &:hover,
-        &:active,
-        &:enabled:focus {
-            border-color: $primaryHeaderColor !important;
+        .login-form-submit {
+          .login-form-submit-btn {
+          }
         }
+
+        .login-form-sub-button-wrapper {
+          .login-form-sub-btn {
+            background-color: $primaryBackgroundColor;
+            color: $secondayTextColor2;
+            border: 2px solid $secondayTextColor2;
+
+            &:hover {
+              background-color: $primaryHeaderColor !important;
+              color: $primaryTextColor !important;
+            }
+          }
+
+          .login-form-sub-login-btn {
+            border: none;
+          }
+        }
+      }
+    }
+  }
+
+  .spinner-component-wrapper {
+    background-color: rgba($secondaryBackgroundColor, 0.5);
+
+    .spinner-wrapper {
+      .custom-spinner .p-progress-spinner-circle {
+        color: $primaryHeaderColor;
+      }
+    }
+  }
+
+  .wrapper-right {
+    justify-content: flex-end !important;
+  }
+
+  /*
+      PrimeNG Fixes
+  */
+  .p-progress-spinner-circle {
+    stroke: $primaryHeaderColor !important;
+  }
+
+  .p-menu,
+  .p-panelmenu {
+    color: $primaryTextColor !important;
+
+    .p-menuitem-link .p-menuitem-text,
+    .p-menuitem-link .p-menuitem-icon,
+    .p-panelmenu-header > a {
+      color: $primaryTextColor !important;
+      background: transparent !important;
+      font-size: 1rem !important;
+      font-weight: normal !important;
     }
 
-    .btn-wrapper {
-        display: flex !important;
-        align-items: center !important;
+    .p-menuitem-link:focus,
+    .p-panelmenu-header > a:focus,
+    .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
+      box-shadow: none !important;
     }
 
-    .btn {
-        background-color: $primaryHeaderColor;
+    .p-menuitem-link:hover,
+    .p-panelmenu-header > a:hover,
+    .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
+      background-color: $secondaryBackgroundColor !important;
+      $border-radius: 20px;
+      border-radius: $border-radius 0 0 $border-radius;
+
+      .p-menuitem-text,
+      .p-menuitem-icon,
+      .p-menuitem-text,
+      .p-panelmenu-icon {
+        color: $primaryHeaderColor !important;
+      }
+    }
+
+    .p-panelmenu-content {
+      margin: 5px 0 5px 10px;
+    }
+  }
+
+  .p-menu-overlay {
+    background-color: $primaryBackgroundColor !important;
+    color: $primaryTextColor !important;
+    border-top: 2px solid $primaryHeaderColor !important;
+
+    .p-menuitem-link:hover {
+      background-color: $primaryBackgroundColor !important;
+
+      .p-menuitem-text,
+      .p-menuitem-icon {
+        color: $primaryHeaderColor !important;
+      }
+    }
+  }
+
+  p-dropdown {
+    .p-dropdown {
+      background-color: $primaryBackgroundColor !important;
+      border-color: $primaryTextColor !important;
+      color: $primaryTextColor !important;
+
+      span {
         color: $primaryTextColor;
-        border: 0;
+      }
 
-        &:hover,
-        &:enabled:hover {
-            background-color: $primaryHeaderColor;
-            color: $primaryTextColor;
-            border: 0;
-        }
-    }
-
-    .icon-btn {
-        background-color: transparent !important;
-        color: $primaryTextColor !important;
-        border: 0 !important;
-
-        .pi {
-            font-size: 1.275rem !important;
-        }
-    }
-
-    .text-btn {
-        background-color: transparent !important;
-        color: $primaryTextColor !important;
-        border: 0 !important;
-        padding: 0px !important;
-
-        &:hover {
-            background-color: transparent !important;
-            color: $primaryHeaderColor !important;
-            border: 0;
-        }
-    }
-
-    .icon-btn-without-hover {
-        &:hover {
-            background-color: transparent !important;
-            color: $primaryTextColor !important;
-            border: 0 !important;
-        }
-    }
-
-    .icon-btn {
-        &:hover {
-            background-color: transparent !important;
-            color: $primaryHeaderColor !important;
-            border: 0;
-        }
-    }
-
-    .danger-icon-btn {
-        background-color: transparent !important;
-        color: $primaryTextColor !important;
-        border: 0 !important;
-
-        &:hover {
-            background-color: transparent !important;
-            color: $primaryErrorColor !important;
-            border: 0;
-        }
-
-        .pi {
-            font-size: 1.275rem !important;
-        }
-    }
-
-    .danger-btn {
-        background-color: $primaryErrorColor !important;
-        color: $primaryErrorColor !important;
-        border: 0 !important;
-
-        &:hover {
-            background-color: $primaryErrorColor !important;
-            color: $primaryTextColor !important;
-            border: 0;
-        }
-
-        .pi {
-            font-size: 1.275rem !important;
-        }
-    }
-
-    .p-datatable .p-sortable-column.p-highlight,
-    .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
-        color: $primaryHeaderColor !important;
-    }
-
-    .p-dropdown:not(.p-disabled):hover,
-    .p-dropdown:not(.p-disabled).p-focus,
-    .p-link:focus {
-        border-color: $primaryHeaderColor !important;
-        box-shadow: none !important;
-    }
-
-    .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-        background: transparent !important;
-        background-color: transparent !important;
-        color: $primaryHeaderColor !important;
-    }
-
-    .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover,
-    .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
-    .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
-    .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
-    .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+      .p-dropdown-panel {
         background-color: $primaryBackgroundColor !important;
-        color: $primaryHeaderColor !important;
+
+        .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+          background-color: $primaryBackgroundColor !important;
+          color: $primaryHeaderColor !important;
+
+          span {
+            color: $primaryHeaderColor !important;
+          }
+        }
+
+        .p-dropdown-items .p-dropdown-item.p-highlight {
+          background-color: $primaryBackgroundColor !important;
+          color: $primaryHeaderColor !important;
+
+          span {
+            color: $primaryHeaderColor !important;
+          }
+        }
+      }
     }
+  }
+
+  p-table {
+    background-color: $primaryBackgroundColor;
+    color: $primaryTextColor !important;
+
+    .table-caption {
+      .table-caption-text {
+      }
+
+      .table-caption-search-wrapper {
+        .table-caption-search {
+          height: 30px !important;
+
+          .table-caption-search-icon {
+          }
+
+          .table-caption-search-input {
+            height: 100% !important;
+
+            &:focus {
+              outline-color: $primaryHeaderColor;
+            }
+          }
+        }
+      }
+
+      .table-caption-btn-wrapper {
+        height: 30px !important;
+      }
+    }
+
+    .table-edit-input {
+      width: 100% !important;
+    }
+  }
+
+  p-checkbox {
+    .p-checkbox .p-checkbox-box {
+      background: $primaryBackgroundColor !important;
+      background-color: $primaryBackgroundColor !important;
+    }
+
+    .p-checkbox .p-checkbox-box.p-highlight {
+      background: $primaryBackgroundColor !important;
+      background-color: $primaryBackgroundColor !important;
+      border-color: $primaryTextColor !important;
+      box-shadow: none !important;
+    }
+
+    .p-checkbox .p-checkbox-box .p-checkbox-icon {
+      color: $primaryTextColor !important;
+    }
+
+    .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus,
+    .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+      border-color: $primaryHeaderColor !important;
+      box-shadow: none !important;
+
+      .p-checkbox-icon {
+        color: $primaryHeaderColor !important;
+      }
+    }
+  }
+
+  p-dialog,
+  p-confirmdialog,
+  p-dynamicdialog {
+    .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+      margin-left: 0 !important;
+    }
+
+    .p-dialog {
+      background-color: $primaryBackgroundColor !important;
+
+      .p-dialog-header {
+        background-color: $secondaryBackgroundColor !important;
+        color: $primaryTextColor !important;
+      }
+
+      .p-dialog-content,
+      .p-dialog-footer {
+        background-color: $primaryBackgroundColor !important;
+        color: $primaryTextColor !important;
+      }
+    }
+  }
+
+  input,
+  .p-password input {
+    border-radius: 10px;
+    border: $default-border;
+
+    &:focus {
+      box-shadow: none !important;
+    }
+
+    &:hover,
+    &:active,
+    &:enabled:focus {
+      border-color: $primaryHeaderColor !important;
+    }
+  }
+
+  .btn-wrapper {
+    display: flex !important;
+    align-items: center !important;
+  }
+
+  .btn {
+    background-color: $primaryHeaderColor;
+    color: $primaryTextColor;
+    border: 0;
+
+    &:hover,
+    &:enabled:hover {
+      background-color: $primaryHeaderColor;
+      color: $primaryTextColor;
+      border: 0;
+    }
+  }
+
+  .icon-btn {
+    background-color: transparent !important;
+    color: $primaryTextColor !important;
+    border: 0 !important;
+
+    .pi {
+      font-size: 1.275rem !important;
+    }
+  }
+
+  .text-btn {
+    background-color: transparent !important;
+    color: $primaryTextColor !important;
+    border: 0 !important;
+    padding: 0 !important;
+
+    &:hover {
+      background-color: transparent !important;
+      color: $primaryHeaderColor !important;
+      border: 0;
+    }
+  }
+
+  .icon-btn-without-hover {
+    &:hover {
+      background-color: transparent !important;
+      color: $primaryTextColor !important;
+      border: 0 !important;
+    }
+  }
+
+  .icon-btn {
+    &:hover {
+      background-color: transparent !important;
+      color: $primaryHeaderColor !important;
+      border: 0;
+    }
+  }
+
+  .danger-icon-btn {
+    background-color: transparent !important;
+    color: $primaryTextColor !important;
+    border: 0 !important;
+
+    &:hover {
+      background-color: transparent !important;
+      color: $primaryErrorColor !important;
+      border: 0;
+    }
+
+    .pi {
+      font-size: 1.275rem !important;
+    }
+  }
+
+  .danger-btn {
+    background-color: $primaryErrorColor !important;
+    color: $primaryErrorColor !important;
+    border: 0 !important;
+
+    &:hover {
+      background-color: $primaryErrorColor !important;
+      color: $primaryTextColor !important;
+      border: 0;
+    }
+
+    .pi {
+      font-size: 1.275rem !important;
+    }
+  }
+
+  .p-datatable .p-sortable-column.p-highlight,
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: $primaryHeaderColor !important;
+  }
+
+  .p-dropdown:not(.p-disabled):hover,
+  .p-dropdown:not(.p-disabled).p-focus,
+  .p-link:focus {
+    border-color: $primaryHeaderColor !important;
+    box-shadow: none !important;
+  }
+
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: transparent !important;
+    color: $primaryHeaderColor !important;
+  }
+
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover,
+  .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+    background-color: $primaryBackgroundColor !important;
+    color: $primaryHeaderColor !important;
+  }
 }
diff --git a/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss b/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss
index cef76707..d05d920f 100644
--- a/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss
+++ b/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss
@@ -1,560 +1,585 @@
 .sh-edraft-dark-theme {
-    $primaryTextColor: #fff;
-    $secondayTextColor: #000;
-    $secondayTextColor2: #ef9d0d;
+  $primaryTextColor: #fff;
+  $secondayTextColor: #000;
+  $secondayTextColor2: #ef9d0d;
 
-    $primaryHeaderColor: #ef9d0d;
-    $secondaryHeaderColor: #ffce4c;
-    $secondaryHeaderColor2: #b76f00;
+  $primaryHeaderColor: #ef9d0d;
+  $secondaryHeaderColor: #ffce4c;
+  $secondaryHeaderColor2: #b76f00;
 
-    $primaryBackgroundColor: #272727;
-    $secondaryBackgroundColor: #4f4f4f;
-    $secondaryBackgroundColor2: #fff;
-    $secondaryBackgroundColor3: #cccccc;
+  $primaryBackgroundColor: #272727;
+  $secondaryBackgroundColor: #4f4f4f;
+  $secondaryBackgroundColor2: #fff;
+  $secondaryBackgroundColor3: #cccccc;
 
-    $primaryErrorColor: #b00020;
-    $secondaryErrorColor: #e94948;
+  $primaryErrorColor: #b00020;
+  $secondaryErrorColor: #e94948;
 
-    $default-border: 2px solid $secondaryBackgroundColor3;
+  $default-border: 2px solid $secondaryBackgroundColor3;
 
+  background-color: $primaryBackgroundColor;
+
+  h1,
+  h2 {
+    color: $primaryHeaderColor;
+  }
+
+  input,
+  p {
+    color: $primaryTextColor;
+  }
+
+  input {
+    background-color: $secondaryBackgroundColor !important;
+  }
+
+  .input-field-info-text {
+    color: $primaryTextColor;
+  }
+
+  /* Change Autocomplete styles in Chrome*/
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  textarea:-webkit-autofill,
+  textarea:-webkit-autofill:hover,
+  textarea:-webkit-autofill:focus,
+  select:-webkit-autofill,
+  select:-webkit-autofill:hover,
+  select:-webkit-autofill:focus {
+    border: 1px solid $primaryHeaderColor;
+    -webkit-text-fill-color: $primaryTextColor;
+    -webkit-box-shadow: 0 0 0 1000px $secondaryBackgroundColor inset;
+    transition: background-color 5000s ease-in-out 0s;
+  }
+
+  header {
     background-color: $primaryBackgroundColor;
 
-    h1,
-    h2 {
-        color: $primaryHeaderColor;
-    }
-
-    input,
-    p {
-        color: $primaryTextColor;
-    }
-
-    input {
-        background-color: $secondaryBackgroundColor !important;
-    }
-
-    .input-field-info-text {
-        color: $primaryTextColor;
-    }
-
-    /* Change Autocomplete styles in Chrome*/
-    input:-webkit-autofill,
-    input:-webkit-autofill:hover,
-    input:-webkit-autofill:focus,
-    textarea:-webkit-autofill,
-    textarea:-webkit-autofill:hover,
-    textarea:-webkit-autofill:focus,
-    select:-webkit-autofill,
-    select:-webkit-autofill:hover,
-    select:-webkit-autofill:focus {
-        border: 1px solid $primaryHeaderColor;
-        -webkit-text-fill-color: $primaryTextColor;
-        -webkit-box-shadow: 0 0 0px 1000px $secondaryBackgroundColor inset;
-        transition: background-color 5000s ease-in-out 0s;
-    }
-
-    header {
-        background-color: $primaryBackgroundColor;
-
-        .logo-button-wrapper {
-            .p-button.p-button-text {
-                color: $primaryTextColor;
-
-                &:hover {
-                    color: $primaryTextColor;
-                    background-color: $primaryBackgroundColor;
-                }
-            }
-        }
-
-        .logo {
-            color: $primaryHeaderColor;
-        }
-    }
-
-    h1 {
-        color: $primaryHeaderColor;
-    }
-
-    .app {
-        .sidebar {
-            background-color: $primaryBackgroundColor;
-
-            .menu {
-                color: $primaryTextColor;
-            }
-        }
-
-        .component-wrapper {
-            color: $primaryTextColor;
-
-            .component {
-                background-color: $secondaryBackgroundColor;
-
-                .content-wrapper {
-                    background-color: $primaryBackgroundColor;
-                    border-top: 2px solid $primaryHeaderColor;
-
-                    .content-header {
-                        border-bottom: $default-border;
-                    }
-
-                    .content {
-                        .content-row {
-                        }
-
-                        .content-column {
-                        }
-
-                        .content-data-name {
-                        }
-
-                        .content-data-value {
-                        }
-
-                        .content-divider {
-                            border-bottom: $default-border;
-                        }
-
-                        .server-list-wrapper {
-                            .server-filter {
-                            }
-
-                            .server-count {
-                            }
-
-                            .server-list {
-                                .server {
-                                    border: $default-border;
-                                    border-radius: 15px;
-
-                                    .logo {
-                                        img {
-                                            border-radius: 100%;
-                                        }
-                                    }
-
-                                    .name {
-                                        color: $primaryHeaderColor;
-                                    }
-
-                                    &:hover {
-                                        border-color: $primaryHeaderColor !important;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .p-dialog-header {
-        background-color: $primaryBackgroundColor !important;
-        color: $primaryTextColor !important;
-    }
-
-    .p-dialog-content {
-        background-color: $secondaryBackgroundColor !important;
-
-        .content-data-name,
-        .content-data-value {
-            color: $primaryTextColor;
-
-            .text-btn {
-                font-size: 18px !important;
-                font-weight: 400 !important;
-            }
-        }
-    }
-
-    footer {
-        background-color: $primaryBackgroundColor;
+    .logo-button-wrapper {
+      .p-button.p-button-text {
         color: $primaryTextColor;
 
-        a {
-            color: $primaryTextColor;
+        &:hover {
+          color: $primaryTextColor;
+          background-color: $primaryBackgroundColor;
         }
+      }
     }
 
-    .invalid-feedback {
-        color: $primaryErrorColor;
+    .logo {
+      color: $primaryHeaderColor;
+    }
+  }
+
+  h1 {
+    color: $primaryHeaderColor;
+  }
+
+  .app {
+    .sidebar {
+      background-color: $primaryBackgroundColor;
+
+      .menu {
+        color: $primaryTextColor;
+      }
     }
 
-    .invalid-feedback-input,
-    .invalid-feedback-input:focus,
-    .invalid-feedback-input:hover {
-        input,
-        input:enabled:focus {
-            outline: 1px solid $primaryErrorColor !important;
-            border: 1px solid $primaryErrorColor !important;
-            border-color: $primaryErrorColor !important;
-        }
-    }
+    .component-wrapper {
+      color: $primaryTextColor;
 
-    .login-wrapper {
+      .component {
         background-color: $secondaryBackgroundColor;
 
-        .login-form-wrapper,
-        .auth-header {
-            background-color: $primaryBackgroundColor;
+        .content-wrapper {
+          background-color: $primaryBackgroundColor;
+          border-top: 2px solid $primaryHeaderColor;
 
-            .login-form {
-                .input-field {
-                    input,
-                    .p-password {
-                    }
-                }
+          .content-header {
+            border-bottom: $default-border;
+          }
 
-                .login-form-submit {
-                    .login-form-submit-btn {
-                    }
-                }
-
-                .login-form-sub-button-wrapper {
-                    .login-form-sub-btn {
-                        background-color: $primaryBackgroundColor;
-                        color: $secondayTextColor2;
-                        border: 2px solid $secondayTextColor2;
-
-                        &:hover {
-                            background-color: $primaryHeaderColor !important;
-                            color: $primaryTextColor !important;
-                        }
-                    }
-
-                    .login-form-sub-login-btn {
-                        border: none;
-                    }
-                }
+          .content {
+            .content-row {
             }
-        }
-    }
 
-    .spinner-component-wrapper {
-        background-color: rgba($secondaryBackgroundColor, 0.5);
+            .content-column {
+            }
 
-        .spinner-wrapper {
-            .custom-spinner .p-progress-spinner-circle {
+            .content-data-name {
+            }
+
+            .content-data-value {
+            }
+
+            .content-divider {
+              border-bottom: $default-border;
+            }
+
+            .server-list-wrapper {
+              .server-filter {
+              }
+
+              .server-count {
+              }
+
+              .server-list {
+                .server {
+                  border: $default-border;
+                  border-radius: 15px;
+
+                  .logo {
+                    img {
+                      border-radius: 100%;
+                    }
+                  }
+
+                  .name {
+                    color: $primaryHeaderColor;
+                  }
+
+                  &:hover {
+                    border-color: $primaryHeaderColor !important;
+                  }
+                }
+              }
+            }
+
+            p-panel {
+              .p-panel-header,
+              .p-panel-content {
+                border: $default-border;
+              }
+
+              .p-panel-title {
                 color: $primaryHeaderColor;
-            }
-        }
-    }
+              }
 
-    .wrapper-right {
-        justify-content: flex-end !important;
-    }
+              .p-panel-header {
+                background-color: $primaryBackgroundColor;
 
-    /* 
-        PrimeNG Fixes 
-    */
-    .p-progress-spinner-circle {
-        stroke: $primaryHeaderColor !important;
-    }
-
-    .p-menu,
-    .p-panelmenu {
-        color: $primaryTextColor !important;
-
-        .p-menuitem-link .p-menuitem-text,
-        .p-menuitem-link .p-menuitem-icon,
-        .p-panelmenu-header > a {
-            color: $primaryTextColor !important;
-            background: transparent !important;
-            font-size: 1rem !important;
-            font-weight: normal !important;
-        }
-
-        .p-menuitem-link:focus,
-        .p-panelmenu-header > a:focus,
-        .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
-            box-shadow: none !important;
-        }
-
-        .p-menuitem-link:hover,
-        .p-panelmenu-header > a:hover,
-        .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
-            background-color: $secondaryBackgroundColor !important;
-            $border-radius: 20px;
-            border-radius: $border-radius 0px 0px $border-radius;
-
-            .p-menuitem-text,
-            .p-menuitem-icon,
-            .p-menuitem-text,
-            .p-panelmenu-icon {
-                color: $primaryHeaderColor !important;
-            }
-        }
-
-        .p-panelmenu-content {
-            margin: 5px 0px 5px 10px;
-        }
-    }
-
-    .p-menu-overlay {
-        background-color: $primaryBackgroundColor !important;
-        color: $primaryTextColor !important;
-        border-top: 2px solid $primaryHeaderColor !important;
-
-        .p-menuitem-link:hover {
-            background-color: $primaryBackgroundColor !important;
-            .p-menuitem-text,
-            .p-menuitem-icon {
-                color: $primaryHeaderColor !important;
-            }
-        }
-    }
-
-    p-dropdown {
-        .p-dropdown {
-            background-color: $primaryBackgroundColor !important;
-            border-color: $primaryTextColor !important;
-            color: $primaryTextColor !important;
-
-            span {
-                color: $primaryTextColor;
-            }
-
-            .p-dropdown-panel {
-                background-color: $secondaryBackgroundColor !important;
-
-                .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
-                    background-color: $secondaryBackgroundColor !important;
-                    color: $primaryHeaderColor !important;
-
-                    span {
-                        color: $primaryHeaderColor !important;
-                    }
-                }
-
-                .p-dropdown-items .p-dropdown-item.p-highlight {
-                    background-color: $secondaryBackgroundColor !important;
-                    color: $primaryHeaderColor !important;
-
-                    span {
-                        color: $primaryHeaderColor !important;
-                    }
+                .p-panel-header-icon {
+                  color: $primaryHeaderColor;
                 }
+              }
             }
+
+            .p-panel-content {
+              background-color: $primaryBackgroundColor;
+              color: $primaryTextColor;
+              border-top: none !important;
+            }
+          }
         }
+      }
     }
+  }
 
-    p-table {
-        background-color: $primaryBackgroundColor;
-        color: $primaryTextColor !important;
+  .p-dialog-header {
+    background-color: $primaryBackgroundColor !important;
+    color: $primaryTextColor !important;
+  }
 
-        .table-caption {
-            .table-caption-text {
-            }
+  .p-dialog-content {
+    background-color: $secondaryBackgroundColor !important;
 
-            .table-caption-search-wrapper {
-                .table-caption-search {
-                    height: 30px !important;
+    .content-data-name,
+    .content-data-value {
+      color: $primaryTextColor;
 
-                    .table-caption-search-icon {
-                    }
-
-                    .table-caption-search-input {
-                        height: 100% !important;
-
-                        &:focus {
-                            outline-color: $primaryHeaderColor;
-                        }
-                    }
-                }
-            }
-
-            .table-caption-btn-wrapper {
-                height: 30px !important;
-            }
-        }
-
-        .table-edit-input {
-            width: 100% !important;
-        }
+      .text-btn {
+        font-size: 18px !important;
+        font-weight: 400 !important;
+      }
     }
+  }
 
-    p-checkbox {
-        .p-checkbox .p-checkbox-box {
-            background: $primaryBackgroundColor !important;
-            background-color: $primaryBackgroundColor !important;
-        }
+  footer {
+    background-color: $primaryBackgroundColor;
+    color: $primaryTextColor;
 
-        .p-checkbox .p-checkbox-box.p-highlight {
-            background: $primaryBackgroundColor !important;
-            background-color: $primaryBackgroundColor !important;
-            border-color: $primaryTextColor !important;
-            box-shadow: none !important;
-        }
-
-        .p-checkbox .p-checkbox-box .p-checkbox-icon {
-            color: $primaryTextColor !important;
-        }
-
-        .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus,
-        .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
-            border-color: $primaryHeaderColor !important;
-            box-shadow: none !important;
-
-            .p-checkbox-icon {
-                color: $primaryHeaderColor !important;
-            }
-        }
+    a {
+      color: $primaryTextColor;
     }
+  }
 
-    p-dialog,
-    p-confirmdialog,
-    p-dynamicdialog {
-        .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
-            margin-left: 0px !important;
-        }
-
-        .p-dialog {
-            background-color: $secondaryBackgroundColor !important;
-
-            .p-dialog-header {
-                background-color: $primaryBackgroundColor !important;
-                color: $primaryTextColor !important;
-            }
-
-            .p-dialog-content,
-            .p-dialog-footer {
-                background-color: $secondaryBackgroundColor !important;
-                color: $primaryTextColor !important;
-            }
-        }
-    }
+  .invalid-feedback {
+    color: $primaryErrorColor;
+  }
 
+  .invalid-feedback-input,
+  .invalid-feedback-input:focus,
+  .invalid-feedback-input:hover {
     input,
-    .p-password input {
-        border-radius: 10px;
-        border: $default-border;
+    input:enabled:focus {
+      outline: 1px solid $primaryErrorColor !important;
+      border: 1px solid $primaryErrorColor !important;
+      border-color: $primaryErrorColor !important;
+    }
+  }
 
-        &:focus {
-            box-shadow: none !important;
+  .login-wrapper {
+    background-color: $secondaryBackgroundColor;
+
+    .login-form-wrapper,
+    .auth-header {
+      background-color: $primaryBackgroundColor;
+
+      .login-form {
+        .input-field {
+          input,
+          .p-password {
+          }
         }
 
-        &:hover,
-        &:active,
-        &:enabled:focus {
-            border-color: $primaryHeaderColor !important;
+        .login-form-submit {
+          .login-form-submit-btn {
+          }
         }
+
+        .login-form-sub-button-wrapper {
+          .login-form-sub-btn {
+            background-color: $primaryBackgroundColor;
+            color: $secondayTextColor2;
+            border: 2px solid $secondayTextColor2;
+
+            &:hover {
+              background-color: $primaryHeaderColor !important;
+              color: $primaryTextColor !important;
+            }
+          }
+
+          .login-form-sub-login-btn {
+            border: none;
+          }
+        }
+      }
+    }
+  }
+
+  .spinner-component-wrapper {
+    background-color: rgba($secondaryBackgroundColor, 0.5);
+
+    .spinner-wrapper {
+      .custom-spinner .p-progress-spinner-circle {
+        color: $primaryHeaderColor;
+      }
+    }
+  }
+
+  .wrapper-right {
+    justify-content: flex-end !important;
+  }
+
+  /*
+      PrimeNG Fixes
+  */
+  .p-progress-spinner-circle {
+    stroke: $primaryHeaderColor !important;
+  }
+
+  .p-menu,
+  .p-panelmenu {
+    color: $primaryTextColor !important;
+
+    .p-menuitem-link .p-menuitem-text,
+    .p-menuitem-link .p-menuitem-icon,
+    .p-panelmenu-header > a {
+      color: $primaryTextColor !important;
+      background: transparent !important;
+      font-size: 1rem !important;
+      font-weight: normal !important;
     }
 
-    .btn-wrapper {
-        display: flex !important;
-        align-items: center !important;
+    .p-menuitem-link:focus,
+    .p-panelmenu-header > a:focus,
+    .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
+      box-shadow: none !important;
     }
 
-    .btn {
-        background-color: $primaryHeaderColor;
+    .p-menuitem-link:hover,
+    .p-panelmenu-header > a:hover,
+    .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
+      background-color: $secondaryBackgroundColor !important;
+      $border-radius: 20px;
+      border-radius: $border-radius 0 0 $border-radius;
+
+      .p-menuitem-text,
+      .p-menuitem-icon,
+      .p-menuitem-text,
+      .p-panelmenu-icon {
+        color: $primaryHeaderColor !important;
+      }
+    }
+
+    .p-panelmenu-content {
+      margin: 5px 0 5px 10px;
+    }
+  }
+
+  .p-menu-overlay {
+    background-color: $primaryBackgroundColor !important;
+    color: $primaryTextColor !important;
+    border-top: 2px solid $primaryHeaderColor !important;
+
+    .p-menuitem-link:hover {
+      background-color: $primaryBackgroundColor !important;
+
+      .p-menuitem-text,
+      .p-menuitem-icon {
+        color: $primaryHeaderColor !important;
+      }
+    }
+  }
+
+  p-dropdown {
+    .p-dropdown {
+      background-color: $primaryBackgroundColor !important;
+      border-color: $primaryTextColor !important;
+      color: $primaryTextColor !important;
+
+      span {
         color: $primaryTextColor;
-        border: 0;
+      }
 
-        &:hover,
-        &:enabled:hover {
-            background-color: $primaryHeaderColor;
-            color: $primaryTextColor;
-            border: 0;
-        }
-    }
+      .p-dropdown-panel {
+        background-color: $secondaryBackgroundColor !important;
 
-    .icon-btn {
-        background-color: transparent !important;
-        color: $primaryTextColor !important;
-        border: 0 !important;
+        .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+          background-color: $secondaryBackgroundColor !important;
+          color: $primaryHeaderColor !important;
 
-        .pi {
-            font-size: 1.275rem !important;
-        }
-    }
-
-    .text-btn {
-        background-color: transparent !important;
-        color: $primaryTextColor !important;
-        border: 0 !important;
-        padding: 0px !important;
-
-        &:hover {
-            background-color: transparent !important;
+          span {
             color: $primaryHeaderColor !important;
-            border: 0;
+          }
         }
-    }
 
-    .icon-btn-without-hover {
-        &:hover {
-            background-color: transparent !important;
-            color: $primaryTextColor !important;
-            border: 0 !important;
-        }
-    }
+        .p-dropdown-items .p-dropdown-item.p-highlight {
+          background-color: $secondaryBackgroundColor !important;
+          color: $primaryHeaderColor !important;
 
-    .icon-btn {
-        &:hover {
-            background-color: transparent !important;
+          span {
             color: $primaryHeaderColor !important;
-            border: 0;
+          }
         }
+      }
+    }
+  }
+
+  p-table {
+    background-color: $primaryBackgroundColor;
+    color: $primaryTextColor !important;
+
+    .table-caption {
+      .table-caption-text {
+      }
+
+      .table-caption-search-wrapper {
+        .table-caption-search {
+          height: 30px !important;
+
+          .table-caption-search-icon {
+          }
+
+          .table-caption-search-input {
+            height: 100% !important;
+
+            &:focus {
+              outline-color: $primaryHeaderColor;
+            }
+          }
+        }
+      }
+
+      .table-caption-btn-wrapper {
+        height: 30px !important;
+      }
     }
 
-    .danger-icon-btn {
-        background-color: transparent !important;
-        color: $primaryTextColor !important;
-        border: 0 !important;
+    .table-edit-input {
+      width: 100% !important;
+    }
+  }
 
-        &:hover {
-            background-color: transparent !important;
-            color: $primaryErrorColor !important;
-            border: 0;
-        }
-
-        .pi {
-            font-size: 1.275rem !important;
-        }
+  p-checkbox {
+    .p-checkbox .p-checkbox-box {
+      background: $primaryBackgroundColor !important;
+      background-color: $primaryBackgroundColor !important;
     }
 
-    .danger-btn {
-        background-color: $primaryErrorColor !important;
-        color: $primaryErrorColor !important;
-        border: 0 !important;
-
-        &:hover {
-            background-color: $primaryErrorColor !important;
-            color: $primaryTextColor !important;
-            border: 0;
-        }
-
-        .pi {
-            font-size: 1.275rem !important;
-        }
+    .p-checkbox .p-checkbox-box.p-highlight {
+      background: $primaryBackgroundColor !important;
+      background-color: $primaryBackgroundColor !important;
+      border-color: $primaryTextColor !important;
+      box-shadow: none !important;
     }
 
-    .p-datatable .p-sortable-column.p-highlight,
-    .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    .p-checkbox .p-checkbox-box .p-checkbox-icon {
+      color: $primaryTextColor !important;
+    }
+
+    .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus,
+    .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+      border-color: $primaryHeaderColor !important;
+      box-shadow: none !important;
+
+      .p-checkbox-icon {
         color: $primaryHeaderColor !important;
+      }
+    }
+  }
+
+  p-dialog,
+  p-confirmdialog,
+  p-dynamicdialog {
+    .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+      margin-left: 0 !important;
     }
 
-    .p-dropdown:not(.p-disabled):hover,
-    .p-dropdown:not(.p-disabled).p-focus,
-    .p-link:focus {
-        border-color: $primaryHeaderColor !important;
-        box-shadow: none !important;
-    }
+    .p-dialog {
+      background-color: $secondaryBackgroundColor !important;
 
-    .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-        background: transparent !important;
-        background-color: transparent !important;
-        color: $primaryHeaderColor !important;
-    }
-
-    .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover,
-    .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
-    .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
-    .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
-    .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+      .p-dialog-header {
         background-color: $primaryBackgroundColor !important;
-        color: $primaryHeaderColor !important;
+        color: $primaryTextColor !important;
+      }
+
+      .p-dialog-content,
+      .p-dialog-footer {
+        background-color: $secondaryBackgroundColor !important;
+        color: $primaryTextColor !important;
+      }
     }
+  }
+
+  input,
+  .p-password input {
+    border-radius: 10px;
+    border: $default-border;
+
+    &:focus {
+      box-shadow: none !important;
+    }
+
+    &:hover,
+    &:active,
+    &:enabled:focus {
+      border-color: $primaryHeaderColor !important;
+    }
+  }
+
+  .btn-wrapper {
+    display: flex !important;
+    align-items: center !important;
+  }
+
+  .btn {
+    background-color: $primaryHeaderColor;
+    color: $primaryTextColor;
+    border: 0;
+
+    &:hover,
+    &:enabled:hover {
+      background-color: $primaryHeaderColor;
+      color: $primaryTextColor;
+      border: 0;
+    }
+  }
+
+  .icon-btn {
+    background-color: transparent !important;
+    color: $primaryTextColor !important;
+    border: 0 !important;
+
+    .pi {
+      font-size: 1.275rem !important;
+    }
+  }
+
+  .text-btn {
+    background-color: transparent !important;
+    color: $primaryTextColor !important;
+    border: 0 !important;
+    padding: 0 !important;
+
+    &:hover {
+      background-color: transparent !important;
+      color: $primaryHeaderColor !important;
+      border: 0;
+    }
+  }
+
+  .icon-btn-without-hover {
+    &:hover {
+      background-color: transparent !important;
+      color: $primaryTextColor !important;
+      border: 0 !important;
+    }
+  }
+
+  .icon-btn {
+    &:hover {
+      background-color: transparent !important;
+      color: $primaryHeaderColor !important;
+      border: 0;
+    }
+  }
+
+  .danger-icon-btn {
+    background-color: transparent !important;
+    color: $primaryTextColor !important;
+    border: 0 !important;
+
+    &:hover {
+      background-color: transparent !important;
+      color: $primaryErrorColor !important;
+      border: 0;
+    }
+
+    .pi {
+      font-size: 1.275rem !important;
+    }
+  }
+
+  .danger-btn {
+    background-color: $primaryErrorColor !important;
+    color: $primaryErrorColor !important;
+    border: 0 !important;
+
+    &:hover {
+      background-color: $primaryErrorColor !important;
+      color: $primaryTextColor !important;
+      border: 0;
+    }
+
+    .pi {
+      font-size: 1.275rem !important;
+    }
+  }
+
+  .p-datatable .p-sortable-column.p-highlight,
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: $primaryHeaderColor !important;
+  }
+
+  .p-dropdown:not(.p-disabled):hover,
+  .p-dropdown:not(.p-disabled).p-focus,
+  .p-link:focus {
+    border-color: $primaryHeaderColor !important;
+    box-shadow: none !important;
+  }
+
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: transparent !important;
+    color: $primaryHeaderColor !important;
+  }
+
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover,
+  .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+    background-color: $primaryBackgroundColor !important;
+    color: $primaryHeaderColor !important;
+  }
 }
diff --git a/kdb-web/src/styles/themes/sh-edraft-light-theme.scss b/kdb-web/src/styles/themes/sh-edraft-light-theme.scss
index 8ae5f724..6d3e5f42 100644
--- a/kdb-web/src/styles/themes/sh-edraft-light-theme.scss
+++ b/kdb-web/src/styles/themes/sh-edraft-light-theme.scss
@@ -1,558 +1,583 @@
 .sh-edraft-light-theme {
-    $primaryTextColor: #272727;
-    $secondayTextColor: #fff;
-    $secondayTextColor2: #ef9d0d;
+  $primaryTextColor: #272727;
+  $secondayTextColor: #fff;
+  $secondayTextColor2: #ef9d0d;
 
-    $primaryHeaderColor: #ef9d0d;
-    $secondaryHeaderColor: #ffce4c;
-    $secondaryHeaderColor2: #b76f00;
+  $primaryHeaderColor: #ef9d0d;
+  $secondaryHeaderColor: #ffce4c;
+  $secondaryHeaderColor2: #b76f00;
 
-    $primaryBackgroundColor: #fff;
-    $secondaryBackgroundColor: #cccccc;
-    $secondaryBackgroundColor2: #4f4f4f;
-    $secondaryBackgroundColor3: #272727;
+  $primaryBackgroundColor: #fff;
+  $secondaryBackgroundColor: #cccccc;
+  $secondaryBackgroundColor2: #4f4f4f;
+  $secondaryBackgroundColor3: #272727;
 
-    $primaryErrorColor: #b00020;
-    $secondaryErrorColor: #e94948;
+  $primaryErrorColor: #b00020;
+  $secondaryErrorColor: #e94948;
 
-    $default-border: 2px solid $secondaryBackgroundColor;
+  $default-border: 2px solid $secondaryBackgroundColor;
 
+  background-color: $primaryBackgroundColor;
+
+  h1,
+  h2 {
+    color: $primaryHeaderColor;
+  }
+
+  input,
+  p {
+    color: $primaryTextColor;
+  }
+
+  input {
+    background-color: $primaryBackgroundColor !important;
+  }
+
+  .input-field-info-text {
+    color: $primaryTextColor;
+  }
+
+  /* Change Autocomplete styles in Chrome*/
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  textarea:-webkit-autofill,
+  textarea:-webkit-autofill:hover,
+  textarea:-webkit-autofill:focus,
+  select:-webkit-autofill,
+  select:-webkit-autofill:hover,
+  select:-webkit-autofill:focus {
+    border: 1px solid $primaryHeaderColor;
+    -webkit-text-fill-color: $primaryTextColor;
+    -webkit-box-shadow: 0 0 0 1000px $primaryBackgroundColor inset;
+    transition: background-color 5000s ease-in-out 0s;
+  }
+
+  header {
     background-color: $primaryBackgroundColor;
 
-    h1,
-    h2 {
-        color: $primaryHeaderColor;
-    }
-
-    input,
-    p {
-        color: $primaryTextColor;
-    }
-
-    input {
-        background-color: $primaryBackgroundColor !important;
-    }
-
-    .input-field-info-text {
-        color: $primaryTextColor;
-    }
-
-    /* Change Autocomplete styles in Chrome*/
-    input:-webkit-autofill,
-    input:-webkit-autofill:hover,
-    input:-webkit-autofill:focus,
-    textarea:-webkit-autofill,
-    textarea:-webkit-autofill:hover,
-    textarea:-webkit-autofill:focus,
-    select:-webkit-autofill,
-    select:-webkit-autofill:hover,
-    select:-webkit-autofill:focus {
-        border: 1px solid $primaryHeaderColor;
-        -webkit-text-fill-color: $primaryTextColor;
-        -webkit-box-shadow: 0 0 0px 1000px $primaryBackgroundColor inset;
-        transition: background-color 5000s ease-in-out 0s;
-    }
-
-    header {
-        background-color: $primaryBackgroundColor;
-
-        .logo-button-wrapper {
-            .p-button.p-button-text {
-                color: $primaryTextColor;
-
-                &:hover {
-                    color: $primaryTextColor;
-                    background-color: $primaryBackgroundColor;
-                }
-            }
-        }
-
-        .logo {
-            color: $primaryHeaderColor;
-        }
-    }
-
-    h1 {
-        color: $primaryHeaderColor;
-    }
-
-    .app {
-        .sidebar {
-            background-color: $primaryBackgroundColor;
-
-            .menu {
-                color: $primaryTextColor;
-            }
-        }
-
-        .component-wrapper {
-            color: $primaryTextColor;
-
-            .component {
-                background-color: $secondaryBackgroundColor;
-
-                .content-wrapper {
-                    background-color: $primaryBackgroundColor;
-                    border-top: 2px solid $primaryHeaderColor;
-
-                    .content-header {
-                        border-bottom: $default-border;
-                    }
-
-                    .content {
-                        .content-row {
-                        }
-
-                        .content-column {
-                        }
-
-                        .content-data-name {
-                        }
-
-                        .content-data-value {
-                        }
-
-                        .content-divider {
-                            border-bottom: $default-border;
-                        }
-                    }
-
-                    .server-list-wrapper {
-                        .server-filter {
-                        }
-
-                        .server-count {
-                        }
-
-                        .server-list {
-                            .server {
-                                border: $default-border;
-                                border-radius: 15px;
-
-                                .logo {
-                                    img {
-                                        border-radius: 100%;
-                                    }
-                                }
-
-                                .name {
-                                    color: $primaryHeaderColor;
-                                }
-
-                                &:hover {
-                                    border-color: $primaryHeaderColor !important;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .p-dialog-header {
-        background-color: $secondaryBackgroundColor !important;
-        color: $primaryTextColor !important;
-    }
-
-    .p-dialog-content {
-        .content-data-name,
-        .content-data-value {
-            color: $primaryTextColor;
-
-            .text-btn {
-                font-size: 18px !important;
-                font-weight: 400 !important;
-            }
-        }
-    }
-
-    footer {
-        background-color: $primaryBackgroundColor;
+    .logo-button-wrapper {
+      .p-button.p-button-text {
         color: $primaryTextColor;
 
-        a {
-            color: $primaryTextColor;
+        &:hover {
+          color: $primaryTextColor;
+          background-color: $primaryBackgroundColor;
         }
+      }
     }
 
-    .invalid-feedback {
-        color: $primaryErrorColor;
+    .logo {
+      color: $primaryHeaderColor;
+    }
+  }
+
+  h1 {
+    color: $primaryHeaderColor;
+  }
+
+  .app {
+    .sidebar {
+      background-color: $primaryBackgroundColor;
+
+      .menu {
+        color: $primaryTextColor;
+      }
     }
 
-    .invalid-feedback-input,
-    .invalid-feedback-input:focus,
-    .invalid-feedback-input:hover {
-        input,
-        input:enabled:focus {
-            outline: 1px solid $primaryErrorColor !important;
-            border: 1px solid $primaryErrorColor !important;
-            border-color: $primaryErrorColor !important;
-        }
-    }
+    .component-wrapper {
+      color: $primaryTextColor;
 
-    .login-wrapper {
+      .component {
         background-color: $secondaryBackgroundColor;
 
-        .login-form-wrapper,
-        .auth-header {
-            background-color: $primaryBackgroundColor;
+        .content-wrapper {
+          background-color: $primaryBackgroundColor;
+          border-top: 2px solid $primaryHeaderColor;
 
-            .login-form {
-                .input-field {
-                    input,
-                    .p-password {
-                    }
-                }
+          .content-header {
+            border-bottom: $default-border;
+          }
 
-                .login-form-submit {
-                    .login-form-submit-btn {
-                    }
-                }
-
-                .login-form-sub-button-wrapper {
-                    .login-form-sub-btn {
-                        background-color: $primaryBackgroundColor;
-                        color: $secondayTextColor2;
-                        border: 2px solid $secondayTextColor2;
-
-                        &:hover {
-                            background-color: $primaryHeaderColor !important;
-                            color: $primaryTextColor !important;
-                        }
-                    }
-
-                    .login-form-sub-login-btn {
-                        border: none;
-                    }
-                }
+          .content {
+            .content-row {
             }
-        }
-    }
 
-    .spinner-component-wrapper {
-        background-color: rgba($secondaryBackgroundColor, 0.5);
+            .content-column {
+            }
 
-        .spinner-wrapper {
-            .custom-spinner .p-progress-spinner-circle {
+            .content-data-name {
+            }
+
+            .content-data-value {
+            }
+
+            .content-divider {
+              border-bottom: $default-border;
+            }
+          }
+
+          p-panel {
+            .p-panel-header,
+            .p-panel-content {
+              border: $default-border;
+            }
+
+            .p-panel-title {
+              color: $primaryHeaderColor;
+            }
+
+            .p-panel-header {
+              background-color: $primaryBackgroundColor;
+
+              .p-panel-header-icon {
                 color: $primaryHeaderColor;
+              }
             }
-        }
-    }
+          }
 
-    .wrapper-right {
-        justify-content: flex-end !important;
-    }
-
-    /* 
-        PrimeNG Fixes 
-    */
-    .p-progress-spinner-circle {
-        stroke: $primaryHeaderColor !important;
-    }
-
-    .p-menu,
-    .p-panelmenu {
-        color: $primaryTextColor !important;
-
-        .p-menuitem-link .p-menuitem-text,
-        .p-menuitem-link .p-menuitem-icon,
-        .p-panelmenu-header > a {
-            color: $primaryTextColor !important;
-            background: transparent !important;
-            font-size: 1rem !important;
-            font-weight: normal !important;
-        }
-
-        .p-menuitem-link:focus,
-        .p-panelmenu-header > a:focus,
-        .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
-            box-shadow: none !important;
-        }
-
-        .p-menuitem-link:hover,
-        .p-panelmenu-header > a:hover,
-        .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
-            background-color: $secondaryBackgroundColor !important;
-            $border-radius: 20px;
-            border-radius: $border-radius 0px 0px $border-radius;
-
-            .p-menuitem-text,
-            .p-menuitem-icon,
-            .p-menuitem-text,
-            .p-panelmenu-icon {
-                color: $primaryHeaderColor !important;
-            }
-        }
-
-        .p-panelmenu-content {
-            margin: 5px 0px 5px 10px;
-        }
-    }
-
-    .p-menu-overlay {
-        background-color: $primaryBackgroundColor !important;
-        color: $primaryTextColor !important;
-        border-top: 2px solid $primaryHeaderColor !important;
-
-        .p-menuitem-link:hover {
-            background-color: $primaryBackgroundColor !important;
-            .p-menuitem-text,
-            .p-menuitem-icon {
-                color: $primaryHeaderColor !important;
-            }
-        }
-    }
-
-    p-dropdown {
-        .p-dropdown {
-            background-color: $primaryBackgroundColor !important;
-            border-color: $primaryTextColor !important;
-            color: $primaryTextColor !important;
-
-            span {
-                color: $primaryTextColor;
-            }
-
-            .p-dropdown-panel {
-                background-color: $primaryBackgroundColor !important;
-
-                .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
-                    background-color: $primaryBackgroundColor !important;
-                    color: $primaryHeaderColor !important;
-
-                    span {
-                        color: $primaryHeaderColor !important;
-                    }
-                }
-
-                .p-dropdown-items .p-dropdown-item.p-highlight {
-                    background-color: $primaryBackgroundColor !important;
-                    color: $primaryHeaderColor !important;
-
-                    span {
-                        color: $primaryHeaderColor !important;
-                    }
-                }
-            }
-        }
-    }
-
-    p-table {
-        background-color: $primaryBackgroundColor;
-        color: $primaryTextColor !important;
-
-        .table-caption {
-            .table-caption-text {
-            }
-
-            .table-caption-search-wrapper {
-                .table-caption-search {
-                    height: 30px !important;
-
-                    .table-caption-search-icon {
-                    }
-
-                    .table-caption-search-input {
-                        height: 100% !important;
-
-                        &:focus {
-                            outline-color: $primaryHeaderColor;
-                        }
-                    }
-                }
-            }
-
-            .table-caption-btn-wrapper {
-                height: 30px !important;
-            }
-        }
-
-        .table-edit-input {
-            width: 100% !important;
-        }
-    }
-
-    p-checkbox {
-        .p-checkbox .p-checkbox-box {
-            background: $primaryBackgroundColor !important;
-            background-color: $primaryBackgroundColor !important;
-        }
-
-        .p-checkbox .p-checkbox-box.p-highlight {
-            background: $primaryBackgroundColor !important;
-            background-color: $primaryBackgroundColor !important;
-            border-color: $primaryTextColor !important;
-            box-shadow: none !important;
-        }
-
-        .p-checkbox .p-checkbox-box .p-checkbox-icon {
-            color: $primaryTextColor !important;
-        }
-
-        .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus,
-        .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
-            border-color: $primaryHeaderColor !important;
-            box-shadow: none !important;
-
-            .p-checkbox-icon {
-                color: $primaryHeaderColor !important;
-            }
-        }
-    }
-
-    p-dialog,
-    p-confirmdialog,
-    p-dynamicdialog {
-        .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
-            margin-left: 0px !important;
-        }
-
-        .p-dialog {
-            background-color: $primaryBackgroundColor !important;
-
-            .p-dialog-header {
-                background-color: $secondaryBackgroundColor !important;
-                color: $primaryTextColor !important;
-            }
-
-            .p-dialog-content,
-            .p-dialog-footer {
-                background-color: $primaryBackgroundColor !important;
-                color: $primaryTextColor !important;
-            }
-        }
-    }
-
-    input,
-    .p-password input {
-        border-radius: 10px;
-        border: $default-border;
-
-        &:focus {
-            box-shadow: none !important;
-        }
-
-        &:hover,
-        &:active,
-        &:enabled:focus {
-            border-color: $primaryHeaderColor !important;
-        }
-    }
-
-    .btn-wrapper {
-        display: flex !important;
-        align-items: center !important;
-    }
-
-    .btn {
-        background-color: $primaryHeaderColor;
-        color: $primaryTextColor;
-        border: 0;
-
-        &:hover,
-        &:enabled:hover {
-            background-color: $primaryHeaderColor;
+          .p-panel-content {
+            background-color: $primaryBackgroundColor;
             color: $primaryTextColor;
-            border: 0;
+            border-top: none !important;
+          }
+
+          .server-list-wrapper {
+            .server-filter {
+            }
+
+            .server-count {
+            }
+
+            .server-list {
+              .server {
+                border: $default-border;
+                border-radius: 15px;
+
+                .logo {
+                  img {
+                    border-radius: 100%;
+                  }
+                }
+
+                .name {
+                  color: $primaryHeaderColor;
+                }
+
+                &:hover {
+                  border-color: $primaryHeaderColor !important;
+                }
+              }
+            }
+          }
         }
+      }
+    }
+  }
+
+  .p-dialog-header {
+    background-color: $secondaryBackgroundColor !important;
+    color: $primaryTextColor !important;
+  }
+
+  .p-dialog-content {
+    .content-data-name,
+    .content-data-value {
+      color: $primaryTextColor;
+
+      .text-btn {
+        font-size: 18px !important;
+        font-weight: 400 !important;
+      }
+    }
+  }
+
+  footer {
+    background-color: $primaryBackgroundColor;
+    color: $primaryTextColor;
+
+    a {
+      color: $primaryTextColor;
+    }
+  }
+
+  .invalid-feedback {
+    color: $primaryErrorColor;
+  }
+
+  .invalid-feedback-input,
+  .invalid-feedback-input:focus,
+  .invalid-feedback-input:hover {
+    input,
+    input:enabled:focus {
+      outline: 1px solid $primaryErrorColor !important;
+      border: 1px solid $primaryErrorColor !important;
+      border-color: $primaryErrorColor !important;
+    }
+  }
+
+  .login-wrapper {
+    background-color: $secondaryBackgroundColor;
+
+    .login-form-wrapper,
+    .auth-header {
+      background-color: $primaryBackgroundColor;
+
+      .login-form {
+        .input-field {
+          input,
+          .p-password {
+          }
+        }
+
+        .login-form-submit {
+          .login-form-submit-btn {
+          }
+        }
+
+        .login-form-sub-button-wrapper {
+          .login-form-sub-btn {
+            background-color: $primaryBackgroundColor;
+            color: $secondayTextColor2;
+            border: 2px solid $secondayTextColor2;
+
+            &:hover {
+              background-color: $primaryHeaderColor !important;
+              color: $primaryTextColor !important;
+            }
+          }
+
+          .login-form-sub-login-btn {
+            border: none;
+          }
+        }
+      }
+    }
+  }
+
+  .spinner-component-wrapper {
+    background-color: rgba($secondaryBackgroundColor, 0.5);
+
+    .spinner-wrapper {
+      .custom-spinner .p-progress-spinner-circle {
+        color: $primaryHeaderColor;
+      }
+    }
+  }
+
+  .wrapper-right {
+    justify-content: flex-end !important;
+  }
+
+  /*
+      PrimeNG Fixes
+  */
+  .p-progress-spinner-circle {
+    stroke: $primaryHeaderColor !important;
+  }
+
+  .p-menu,
+  .p-panelmenu {
+    color: $primaryTextColor !important;
+
+    .p-menuitem-link .p-menuitem-text,
+    .p-menuitem-link .p-menuitem-icon,
+    .p-panelmenu-header > a {
+      color: $primaryTextColor !important;
+      background: transparent !important;
+      font-size: 1rem !important;
+      font-weight: normal !important;
     }
 
-    .icon-btn {
-        background-color: transparent !important;
-        color: $primaryTextColor !important;
-        border: 0 !important;
-
-        .pi {
-            font-size: 1.275rem !important;
-        }
+    .p-menuitem-link:focus,
+    .p-panelmenu-header > a:focus,
+    .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
+      box-shadow: none !important;
     }
 
-    .text-btn {
-        background-color: transparent !important;
-        color: $primaryTextColor !important;
-        border: 0 !important;
-        padding: 0px !important;
+    .p-menuitem-link:hover,
+    .p-panelmenu-header > a:hover,
+    .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
+      background-color: $secondaryBackgroundColor !important;
+      $border-radius: 20px;
+      border-radius: $border-radius 0 0 $border-radius;
 
-        &:hover {
-            background-color: transparent !important;
-            color: $primaryHeaderColor !important;
-            border: 0;
-        }
-    }
-
-    .icon-btn-without-hover {
-        &:hover {
-            background-color: transparent !important;
-            color: $primaryTextColor !important;
-            border: 0 !important;
-        }
-    }
-
-    .icon-btn {
-        &:hover {
-            background-color: transparent !important;
-            color: $primaryHeaderColor !important;
-            border: 0;
-        }
-    }
-
-    .danger-icon-btn {
-        background-color: transparent !important;
-        color: $primaryTextColor !important;
-        border: 0 !important;
-
-        &:hover {
-            background-color: transparent !important;
-            color: $primaryErrorColor !important;
-            border: 0;
-        }
-
-        .pi {
-            font-size: 1.275rem !important;
-        }
-    }
-
-    .danger-btn {
-        background-color: $primaryErrorColor !important;
-        color: $primaryErrorColor !important;
-        border: 0 !important;
-
-        &:hover {
-            background-color: $primaryErrorColor !important;
-            color: $primaryTextColor !important;
-            border: 0;
-        }
-
-        .pi {
-            font-size: 1.275rem !important;
-        }
-    }
-
-    .p-datatable .p-sortable-column.p-highlight,
-    .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+      .p-menuitem-text,
+      .p-menuitem-icon,
+      .p-menuitem-text,
+      .p-panelmenu-icon {
         color: $primaryHeaderColor !important;
+      }
     }
 
-    .p-dropdown:not(.p-disabled):hover,
-    .p-dropdown:not(.p-disabled).p-focus,
-    .p-link:focus {
-        border-color: $primaryHeaderColor !important;
-        box-shadow: none !important;
+    .p-panelmenu-content {
+      margin: 5px 0 5px 10px;
     }
+  }
 
-    .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-        background: transparent !important;
-        background-color: transparent !important;
+  .p-menu-overlay {
+    background-color: $primaryBackgroundColor !important;
+    color: $primaryTextColor !important;
+    border-top: 2px solid $primaryHeaderColor !important;
+
+    .p-menuitem-link:hover {
+      background-color: $primaryBackgroundColor !important;
+
+      .p-menuitem-text,
+      .p-menuitem-icon {
         color: $primaryHeaderColor !important;
+      }
     }
+  }
 
-    .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover,
-    .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
-    .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
-    .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
-    .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+  p-dropdown {
+    .p-dropdown {
+      background-color: $primaryBackgroundColor !important;
+      border-color: $primaryTextColor !important;
+      color: $primaryTextColor !important;
+
+      span {
+        color: $primaryTextColor;
+      }
+
+      .p-dropdown-panel {
         background-color: $primaryBackgroundColor !important;
-        color: $primaryHeaderColor !important;
+
+        .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+          background-color: $primaryBackgroundColor !important;
+          color: $primaryHeaderColor !important;
+
+          span {
+            color: $primaryHeaderColor !important;
+          }
+        }
+
+        .p-dropdown-items .p-dropdown-item.p-highlight {
+          background-color: $primaryBackgroundColor !important;
+          color: $primaryHeaderColor !important;
+
+          span {
+            color: $primaryHeaderColor !important;
+          }
+        }
+      }
     }
+  }
+
+  p-table {
+    background-color: $primaryBackgroundColor;
+    color: $primaryTextColor !important;
+
+    .table-caption {
+      .table-caption-text {
+      }
+
+      .table-caption-search-wrapper {
+        .table-caption-search {
+          height: 30px !important;
+
+          .table-caption-search-icon {
+          }
+
+          .table-caption-search-input {
+            height: 100% !important;
+
+            &:focus {
+              outline-color: $primaryHeaderColor;
+            }
+          }
+        }
+      }
+
+      .table-caption-btn-wrapper {
+        height: 30px !important;
+      }
+    }
+
+    .table-edit-input {
+      width: 100% !important;
+    }
+  }
+
+  p-checkbox {
+    .p-checkbox .p-checkbox-box {
+      background: $primaryBackgroundColor !important;
+      background-color: $primaryBackgroundColor !important;
+    }
+
+    .p-checkbox .p-checkbox-box.p-highlight {
+      background: $primaryBackgroundColor !important;
+      background-color: $primaryBackgroundColor !important;
+      border-color: $primaryTextColor !important;
+      box-shadow: none !important;
+    }
+
+    .p-checkbox .p-checkbox-box .p-checkbox-icon {
+      color: $primaryTextColor !important;
+    }
+
+    .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus,
+    .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+      border-color: $primaryHeaderColor !important;
+      box-shadow: none !important;
+
+      .p-checkbox-icon {
+        color: $primaryHeaderColor !important;
+      }
+    }
+  }
+
+  p-dialog,
+  p-confirmdialog,
+  p-dynamicdialog {
+    .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+      margin-left: 0 !important;
+    }
+
+    .p-dialog {
+      background-color: $primaryBackgroundColor !important;
+
+      .p-dialog-header {
+        background-color: $secondaryBackgroundColor !important;
+        color: $primaryTextColor !important;
+      }
+
+      .p-dialog-content,
+      .p-dialog-footer {
+        background-color: $primaryBackgroundColor !important;
+        color: $primaryTextColor !important;
+      }
+    }
+  }
+
+  input,
+  .p-password input {
+    border-radius: 10px;
+    border: $default-border;
+
+    &:focus {
+      box-shadow: none !important;
+    }
+
+    &:hover,
+    &:active,
+    &:enabled:focus {
+      border-color: $primaryHeaderColor !important;
+    }
+  }
+
+  .btn-wrapper {
+    display: flex !important;
+    align-items: center !important;
+  }
+
+  .btn {
+    background-color: $primaryHeaderColor;
+    color: $primaryTextColor;
+    border: 0;
+
+    &:hover,
+    &:enabled:hover {
+      background-color: $primaryHeaderColor;
+      color: $primaryTextColor;
+      border: 0;
+    }
+  }
+
+  .icon-btn {
+    background-color: transparent !important;
+    color: $primaryTextColor !important;
+    border: 0 !important;
+
+    .pi {
+      font-size: 1.275rem !important;
+    }
+  }
+
+  .text-btn {
+    background-color: transparent !important;
+    color: $primaryTextColor !important;
+    border: 0 !important;
+    padding: 0 !important;
+
+    &:hover {
+      background-color: transparent !important;
+      color: $primaryHeaderColor !important;
+      border: 0;
+    }
+  }
+
+  .icon-btn-without-hover {
+    &:hover {
+      background-color: transparent !important;
+      color: $primaryTextColor !important;
+      border: 0 !important;
+    }
+  }
+
+  .icon-btn {
+    &:hover {
+      background-color: transparent !important;
+      color: $primaryHeaderColor !important;
+      border: 0;
+    }
+  }
+
+  .danger-icon-btn {
+    background-color: transparent !important;
+    color: $primaryTextColor !important;
+    border: 0 !important;
+
+    &:hover {
+      background-color: transparent !important;
+      color: $primaryErrorColor !important;
+      border: 0;
+    }
+
+    .pi {
+      font-size: 1.275rem !important;
+    }
+  }
+
+  .danger-btn {
+    background-color: $primaryErrorColor !important;
+    color: $primaryErrorColor !important;
+    border: 0 !important;
+
+    &:hover {
+      background-color: $primaryErrorColor !important;
+      color: $primaryTextColor !important;
+      border: 0;
+    }
+
+    .pi {
+      font-size: 1.275rem !important;
+    }
+  }
+
+  .p-datatable .p-sortable-column.p-highlight,
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: $primaryHeaderColor !important;
+  }
+
+  .p-dropdown:not(.p-disabled):hover,
+  .p-dropdown:not(.p-disabled).p-focus,
+  .p-link:focus {
+    border-color: $primaryHeaderColor !important;
+    box-shadow: none !important;
+  }
+
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: transparent !important;
+    color: $primaryHeaderColor !important;
+  }
+
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover,
+  .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+    background-color: $primaryBackgroundColor !important;
+    color: $primaryHeaderColor !important;
+  }
 }