diff --git a/packages/web/src/datagrid/CollapseButton.svelte b/packages/web/src/datagrid/CollapseButton.svelte
index 8a72343e8..592ddbd6a 100644
--- a/packages/web/src/datagrid/CollapseButton.svelte
+++ b/packages/web/src/datagrid/CollapseButton.svelte
@@ -2,10 +2,19 @@
   import FontIcon from '../icons/FontIcon.svelte';
 
   export let collapsed;
+  export let vertical = false;
 </script>
 
 <div on:click|stopPropagation class="collapseButtonMarker">
-  <FontIcon icon={collapsed ? 'icon triple-right' : 'icon triple-left'} />
+  <FontIcon
+    icon={collapsed
+      ? vertical
+        ? 'icon triple-down'
+        : 'icon triple-right'
+      : vertical
+        ? 'icon triple-up'
+        : 'icon triple-left'}
+  />
 </div>
 
 <style>
@@ -17,10 +26,12 @@
     top: 4px;
     background-color: var(--theme-bg-1);
     border: 1px solid var(--theme-bg-1); */
+    margin: 1px;
   }
 
   div:hover {
     color: var(--theme-font-hover);
     border: 1px solid var(--theme-font-1);
+    margin: 0px;
   }
 </style>
diff --git a/packages/web/src/icons/FontIcon.svelte b/packages/web/src/icons/FontIcon.svelte
index 6bd0312d4..46711ff3b 100644
--- a/packages/web/src/icons/FontIcon.svelte
+++ b/packages/web/src/icons/FontIcon.svelte
@@ -89,6 +89,8 @@
     'icon arrow-right-bold': 'mdi mdi-arrow-right-bold',
     'icon triple-left': 'mdi mdi-chevron-triple-left',
     'icon triple-right': 'mdi mdi-chevron-triple-right',
+    'icon triple-up': 'mdi mdi-chevron-triple-up',
+    'icon triple-down': 'mdi mdi-chevron-triple-down',
     'icon format-code': 'mdi mdi-code-tags-check',
     'icon show-wizard': 'mdi mdi-comment-edit',
     'icon disconnected': 'mdi mdi-lan-disconnect',