diff --git a/GUI/src/components/Flow/EdgeTypes/AddEndpointModal.tsx b/GUI/src/components/Flow/EdgeTypes/AddEndpointModal.tsx
index 754559ac3..fcefee8f5 100644
--- a/GUI/src/components/Flow/EdgeTypes/AddEndpointModal.tsx
+++ b/GUI/src/components/Flow/EdgeTypes/AddEndpointModal.tsx
@@ -188,7 +188,7 @@ const AddEndpointModal: React.FC<AddEndpointModalProps> = ({
   const modalTitle = mode === 'edit' ? t('newService.editEndpoint') : t('newService.createNewEndpoint');
 
   return (
-    <Modal title={modalTitle} onClose={handleClose}>
+    <Modal title={modalTitle} onClose={handleClose} size="large">
       <Track isMultiline gap={16} direction="vertical" align="stretch">
         <ApiEndpointCard
           endpoint={endpoint}
diff --git a/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.scss b/GUI/src/components/Flow/EdgeTypes/ApiElementsPanel.scss
index 7cfd7a3ad..3689ab3af 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 0bfb5be02..2d2d8b6c2 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,
             }}
diff --git a/GUI/src/components/Modal/Modal.scss b/GUI/src/components/Modal/Modal.scss
index 02db0f56f..45c7bf417 100644
--- a/GUI/src/components/Modal/Modal.scss
+++ b/GUI/src/components/Modal/Modal.scss
@@ -21,6 +21,11 @@
   max-width: 650px;
   z-index: 1000;
 
+  &--large {
+    min-width: 800px;
+    max-width: 900px;
+  }
+
   &__overlay {
     position: fixed;
     inset: 0;
diff --git a/GUI/src/components/Modal/index.tsx b/GUI/src/components/Modal/index.tsx
index 076ba9a87..974e3de58 100644
--- a/GUI/src/components/Modal/index.tsx
+++ b/GUI/src/components/Modal/index.tsx
@@ -9,16 +9,24 @@ type ModalProps = {
   description?: string;
   footer?: ReactNode;
   onClose: () => void;
+  size?: 'default' | 'large';
 };
 
-const Modal: FC<PropsWithChildren<ModalProps>> = ({ title, footer, onClose, children, description }) => {
+const Modal: FC<PropsWithChildren<ModalProps>> = ({
+  title,
+  footer,
+  onClose,
+  children,
+  description,
+  size = 'default',
+}) => {
   return (
     <RadixDialog.Root defaultOpen={true} onOpenChange={onClose}>
       <RadixDialog.Portal>
         <RadixDialog.Overlay className="modal__overlay" />
         <RadixDialog.Content
           onClick={(e) => e.stopPropagation()}
-          className="modal"
+          className={`modal${size === 'large' ? ' modal--large' : ''}`}
           aria-describedby={description ? 'modal-description' : undefined}
         >
           {title && (
diff --git a/GUI/src/pages/ApiRegistryPage/ApiRegistryTable.tsx b/GUI/src/pages/ApiRegistryPage/ApiRegistryTable.tsx
index 32d457f6a..874541aaa 100644
--- a/GUI/src/pages/ApiRegistryPage/ApiRegistryTable.tsx
+++ b/GUI/src/pages/ApiRegistryPage/ApiRegistryTable.tsx
@@ -74,7 +74,16 @@ export const EndpointTooltipContent: React.FC<{
   const IND2: React.CSSProperties = { paddingLeft: 32, opacity: 0.75, fontSize: 11 };
 
   return (
-    <div style={{ fontFamily: 'monospace', fontSize: 12, lineHeight: 1.7, maxWidth: 420 }}>
+    <div
+      style={{
+        fontFamily: 'monospace',
+        fontSize: 12,
+        lineHeight: 1.7,
+        maxWidth: 420,
+        maxHeight: '50vh',
+        overflowY: 'auto',
+      }}
+    >
       <div style={{ ...S, marginBottom: 6 }}>
         <strong>NAME:</strong> {name || '—'}
       </div>
@@ -218,7 +227,7 @@ const ApiRegistryTable: React.FC<ApiRegistryTableProps> = ({
             <tr>
               <th
                 onClick={() => handleSort('name')}
-                style={{ cursor: 'pointer', userSelect: 'none', whiteSpace: 'nowrap', width: '30%' }}
+                style={{ cursor: 'pointer', userSelect: 'none', whiteSpace: 'nowrap', width: '20%' }}
               >
                 <SortIcon colId="name" currentSortId={currentSortId} currentDesc={currentDesc} />{' '}
                 {String(t('apiRegistry.columns.name'))}
@@ -230,7 +239,7 @@ const ApiRegistryTable: React.FC<ApiRegistryTableProps> = ({
                   userSelect: 'none',
                   whiteSpace: 'nowrap',
                   textAlign: 'center',
-                  width: '160px',
+                  width: '200px',
                 }}
               >
                 <SortIcon colId="lastTest" currentSortId={currentSortId} currentDesc={currentDesc} />{' '}
@@ -259,7 +268,7 @@ const ApiRegistryTable: React.FC<ApiRegistryTableProps> = ({
               <th style={{ width: '120px', whiteSpace: 'nowrap', textAlign: 'center' }}>
                 {t('apiRegistry.columns.llmIndexStatus') ?? 'LLM Index Status'}
               </th>
-              <th style={{ width: '320px' }}></th>
+              <th></th>
             </tr>
           </thead>
           <tbody>
@@ -355,6 +364,14 @@ const ApiRegistryTable: React.FC<ApiRegistryTableProps> = ({
                           {isTesting ? t('global.loading') : t('apiRegistry.actions.test')}
                         </Track>
                       </Button>
+                      <Button appearance="text" size="s" onClick={() => onReIndex?.(endpoint)}>
+                        <Track gap={4} align="center">
+                          <span style={{ color: '#000' }}>
+                            <MdRefresh />
+                          </span>
+                          {t('apiRegistry.actions.reIndex') ?? 'Re-Index'}
+                        </Track>
+                      </Button>
                       <Button appearance="text" size="s" onClick={() => onEdit(endpoint)}>
                         <Track gap={4} align="center">
                           <span style={{ color: '#000' }}>
@@ -371,14 +388,6 @@ const ApiRegistryTable: React.FC<ApiRegistryTableProps> = ({
                           {t('apiRegistry.actions.delete')}
                         </Track>
                       </Button>
-                      <Button appearance="text" size="s" onClick={() => onReIndex?.(endpoint)}>
-                        <Track gap={4} align="center">
-                          <span style={{ color: '#000' }}>
-                            <MdRefresh />
-                          </span>
-                          {t('apiRegistry.actions.reIndex') ?? 'Re-Index'}
-                        </Track>
-                      </Button>
                     </Track>
                   </td>
                 </tr>