diff --git a/src/app/components/network-legend/network-legend.component.html b/src/app/components/network-legend/network-legend.component.html
index f9d7c24b2c322978d3020e5e3ce03acbedb6b5b3..51ce68e097f08a51b8fd0396f880dd56e0b87cf1 100644
--- a/src/app/components/network-legend/network-legend.component.html
+++ b/src/app/components/network-legend/network-legend.component.html
@@ -35,7 +35,7 @@
               </span>
             </th>
             <th *ngSwitchCase="'diamond'">
-              <span class="node diamond" 
+              <span class="node diamond"
                     [style.background-color]=nodeGroup.value.color.background
               >
               </span>
@@ -56,7 +56,7 @@
               <span class="node {{ nodeGroup.value.shape }}" [style.background-color]=nodeGroup.value.color.background>
               </span>
               </th>
-            <td>&nbsp;{{ nodeGroup.value.groupName }}</td>
+            <td class="group-name">&nbsp;{{ nodeGroup.value.groupName }}</td>
           </ng-container>
         </ng-container>
 
diff --git a/src/app/components/network-legend/network-legend.component.scss b/src/app/components/network-legend/network-legend.component.scss
index bcb837810e313c67b6c0c0a3f2faec8a8e212307..a35779349e3b21ef946489454da8cee69564c2c1 100644
--- a/src/app/components/network-legend/network-legend.component.scss
+++ b/src/app/components/network-legend/network-legend.component.scss
@@ -13,6 +13,7 @@ div.legend {
   }
   tr.list-item{
     line-height: calc(#{$legend-row-height} / 2);
+
     th{
       height: $legend-row-height;
       width: $legend-row-height;
diff --git a/src/stylesheets/theme-styles.scss b/src/stylesheets/theme-styles.scss
index 9bec1d1129e61942817ee250277ed6f49d2adbbf..f74f3986972cd20962433a4b93fa574147e01eb9 100644
--- a/src/stylesheets/theme-styles.scss
+++ b/src/stylesheets/theme-styles.scss
@@ -186,6 +186,39 @@
     color: var(--drgstn-text-primary)
   }
 
+  .ng-select-container, .ng-dropdown-panel.ng-select-bottom {
+    background-color: var(--drgstn-panel-secondary);
+    border-color: var(--drgstn-border);
+    .ng-value-container {
+
+      .ng-placeholder{
+        color: var(--drgstn-text-primary);
+      }
+    }
+  }
+  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
+    background-color: var(--drgstn-panel);
+    color:var(--drgstn-text-primary);
+  }
+  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+    background-color: var(--drgstn-panel-secondary);
+    color:var(--drgstn-text-primary);
+  }
+
+  .ng-select {
+    .ng-arrow-wrapper .ng-arrow {
+      border-top-color: var(--drgstn-text-primary);
+    }
+    .ng-clear-wrapper, .ng-select-container {
+      color: var(--drgstn-text-primary);
+    }
+  }
+
+
+  .ng-select.ng-select-opened>.ng-select-container .ng-arrow{
+    border-bottom-color: var(--drgstn-text-primary);
+  }
+
 
   ::-webkit-scrollbar {
     width: 5px;