diff --git a/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.scss b/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.scss
index 7cfd7a3a..3689ab3a 100644
--- a/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.scss
+++ b/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.scss
@@ -1,23 +1,34 @@
-.api-elements-search::placeholder {
-  font-family: 'Roboto', sans-serif;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 24px;
-  color: #9799a4;
+.api-elements-search {
+  background: #ffffff;
+  border: 1px solid #9799a4;
+  color: #09090b;
+
+  &::placeholder {
+    font-family: 'Roboto', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    color: #9799a4;
+  }
 }
 
 .api-elements-panel {
   .data-table {
     border-collapse: separate;
     border-spacing: 0 4px;
+    padding: 0px 15px;
+
+    thead th {
+      background: #f0f0f2;
+      border-bottom: 1px solid #d2d3d8;
+    }
 
     tbody tr td {
       background: #e7f0f6;
       border-top: 1px solid #b9d2e5;
       border-bottom: 1px solid #b9d2e5 !important;
-      height: 40px;
-      padding: 0 10px;
+      padding: 8px 10px;
     }
 
     tbody tr td:first-child {
@@ -34,4 +45,52 @@
       background: #d4e6f1;
     }
   }
+
+  .data-table__pagination-wrapper {
+    background: #ffffff;
+    box-shadow: 0px -1px 0px #5d6071;
+  }
+
+  &__action-btn {
+    color: #555867;
+  }
+}
+
+[data-theme='dark'] {
+  .api-elements-search {
+    background: var(--dark-bg-extra-light);
+    border-color: var(--dark-text-border);
+    color: var(--dark-text-primary);
+
+    &::placeholder {
+      color: var(--dark-text-disabled);
+    }
+  }
+
+  .api-elements-panel {
+    .data-table thead th {
+      background: var(--dark-bg-light);
+      border-bottom: 1px solid var(--dark-text-border);
+      color: var(--dark-text-primary);
+    }
+
+    .data-table tbody tr td {
+      background: var(--dark-bg-secondary);
+      border-color: var(--dark-text-border);
+      color: var(--dark-text-secondary);
+    }
+
+    .data-table tbody tr:hover td {
+      background: var(--dark-bg-light);
+    }
+
+    .data-table__pagination-wrapper {
+      background: var(--dark-bg-highlight);
+      box-shadow: 0px -1px 0px var(--dark-text-border);
+    }
+
+    &__action-btn {
+      color: var(--dark-text-secondary);
+    }
+  }
 }
diff --git a/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.tsx b/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.tsx
index 0bfb5be0..2d2d8b6c 100644
--- a/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.tsx
+++ b/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.tsx
@@ -179,14 +179,11 @@ const ApiElementsPanel: React.FC<ApiElementsPanelProps> = ({ onAddToCanvas }) =>
             minWidth: 0,
             height: 40,
             padding: '4px 8px',
-            background: '#FFFFFF',
-            border: '1px solid #9799A4',
             borderRadius: 4,
             fontFamily: "'Roboto', sans-serif",
             fontSize: 16,
             fontWeight: 400,
             lineHeight: '24px',
-            color: '#09090b',
             outline: 'none',
             boxSizing: 'border-box',
           }}
@@ -222,17 +219,15 @@ const ApiElementsPanel: React.FC<ApiElementsPanelProps> = ({ onAddToCanvas }) =>
             >
               <table
                 className="data-table"
-                style={{ tableLayout: 'fixed', width: '100%', borderCollapse: 'separate', borderSpacing: '0 4px' }}
+                style={{ tableLayout: 'fixed', width: '100%', borderCollapse: 'separate', borderSpacing: '0 6px' }}
               >
                 <thead>
-                  <tr style={{ background: '#F0F0F2', borderBottom: '1px solid #D2D3D8', height: 36 }}>
+                  <tr style={{ height: 36 }}>
                     <th
                       onClick={() => handleSort('name')}
                       style={{
                         cursor: 'pointer',
                         userSelect: 'none',
-                        background: '#F0F0F2',
-                        borderBottom: '1px solid #D2D3D8',
                       }}
                     >
                       <SortIcon colId="name" currentSortId={currentSortId} currentDesc={currentDesc} />{' '}
@@ -245,8 +240,6 @@ const ApiElementsPanel: React.FC<ApiElementsPanelProps> = ({ onAddToCanvas }) =>
                         userSelect: 'none',
                         width: 90,
                         textAlign: 'center',
-                        background: '#F0F0F2',
-                        borderBottom: '1px solid #D2D3D8',
                       }}
                     >
                       <SortIcon colId="status" currentSortId={currentSortId} currentDesc={currentDesc} />{' '}
@@ -259,15 +252,13 @@ const ApiElementsPanel: React.FC<ApiElementsPanelProps> = ({ onAddToCanvas }) =>
                         userSelect: 'none',
                         width: 100,
                         textAlign: 'center',
-                        background: '#F0F0F2',
-                        borderBottom: '1px solid #D2D3D8',
                         whiteSpace: 'nowrap',
                       }}
                     >
                       <SortIcon colId="schema" currentSortId={currentSortId} currentDesc={currentDesc} />{' '}
                       {t('apiRegistry.columns.schema')}
                     </th>
-                    <th style={{ width: 112, background: '#F0F0F2', borderBottom: '1px solid #D2D3D8' }} />
+                    <th style={{ width: 112 }} />
                   </tr>
                 </thead>
                 <tbody>
@@ -339,6 +330,7 @@ const ApiElementsPanel: React.FC<ApiElementsPanelProps> = ({ onAddToCanvas }) =>
                                   useToastStore.getState().error({ title: t('global.notificationError') });
                                 });
                               }}
+                              className="api-elements-panel__action-btn"
                               style={{
                                 background: 'none',
                                 border: 'none',
@@ -346,7 +338,6 @@ const ApiElementsPanel: React.FC<ApiElementsPanelProps> = ({ onAddToCanvas }) =>
                                 padding: 6,
                                 opacity: isTesting ? 0.4 : 1,
                                 lineHeight: 1,
-                                color: '#555867',
                                 fontSize: 18,
                                 display: 'flex',
                               }}
@@ -360,13 +351,13 @@ const ApiElementsPanel: React.FC<ApiElementsPanelProps> = ({ onAddToCanvas }) =>
                                 e.stopPropagation();
                                 setEditingEndpoint(endpoint);
                               }}
+                              className="api-elements-panel__action-btn"
                               style={{
                                 background: 'none',
                                 border: 'none',
                                 cursor: 'pointer',
                                 padding: 6,
                                 lineHeight: 1,
-                                color: '#555867',
                                 fontSize: 18,
                                 display: 'flex',
                               }}
@@ -380,13 +371,13 @@ const ApiElementsPanel: React.FC<ApiElementsPanelProps> = ({ onAddToCanvas }) =>
                                 e.stopPropagation();
                                 setDeletingEndpoint(endpoint);
                               }}
+                              className="api-elements-panel__action-btn"
                               style={{
                                 background: 'none',
                                 border: 'none',
                                 cursor: 'pointer',
                                 padding: 6,
                                 lineHeight: 1,
-                                color: '#555867',
                                 fontSize: 18,
                                 display: 'flex',
                               }}
@@ -405,8 +396,6 @@ const ApiElementsPanel: React.FC<ApiElementsPanelProps> = ({ onAddToCanvas }) =>
           <div
             className="data-table__pagination-wrapper"
             style={{
-              background: '#FFFFFF',
-              boxShadow: '0px -1px 0px #5D6071',
               borderRadius: '0px 0px 5px 5px',
               minHeight: 40,
             }}