diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css
index b32da2f4..15956e9b 100644
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@@ -1967,6 +1967,7 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
 }
 
 .overview-flex-columns {
+  position: relative;
   box-sizing: border-box;
   width: 100%;
 }
@@ -1981,8 +1982,23 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
   min-height: 72px;
 }
 
-.overview-flex-columns-toolbar {
-  margin-bottom: 8px;
+.overview-flex-columns-actions.ant-card {
+  position: absolute;
+  top: 0;
+  left: 0px;
+  transform: translateY(-50%);
+  z-index: 4;
+  width: max-content;
+}
+
+.overview-flex-columns-actions.ant-card .ant-card-body {
+  line-height: 1;
+}
+
+.overview-flex-columns-actions .ant-btn {
+  height: auto;
+  width: auto;
+  padding: 0 2px;
 }
 
 .overview-flex-columns-row {
diff --git a/src/components/Dashboard/common/DashboardOverviewFlexColumns.jsx b/src/components/Dashboard/common/DashboardOverviewFlexColumns.jsx
index b170b1e0..22a06b55 100644
--- a/src/components/Dashboard/common/DashboardOverviewFlexColumns.jsx
+++ b/src/components/Dashboard/common/DashboardOverviewFlexColumns.jsx
@@ -8,9 +8,9 @@ import {
   useRef,
   useState
 } from 'react'
-import { Button, Flex } from 'antd'
+import { Button, Card, Flex } from 'antd'
 import PropTypes from 'prop-types'
-import XMarkIcon from '../../Icons/XMarkIcon.jsx'
+import BinIcon from '../../Icons/BinIcon.jsx'
 import {
   COLUMN_PROPORTION_STEP,
   normalizeColumnProportions
@@ -176,22 +176,24 @@ const DashboardOverviewFlexColumns = ({
       onDragLeave={onDragLeave}
     >
       {showToolbar && (
-        <Flex
-          justify='space-between'
-          align='center'
-          className='overview-flex-columns-toolbar'
+        <Card
+          size='small'
+          className='overview-flex-columns-actions'
+          styles={{ body: { padding: 2 } }}
         >
-          {dragHandle || <span />}
-          {onRemove ? (
-            <Button
-              type='text'
-              size='small'
-              icon={<XMarkIcon />}
-              onClick={onRemove}
-              aria-label='Remove columns'
-            />
-          ) : null}
-        </Flex>
+          <Flex align='center'>
+            {dragHandle}
+            {onRemove ? (
+              <Button
+                type='text'
+                size='small'
+                icon={<BinIcon />}
+                onClick={onRemove}
+                aria-label='Remove columns'
+              />
+            ) : null}
+          </Flex>
+        </Card>
       )}
       <Flex
         gap='large'
diff --git a/src/components/Dashboard/common/DashboardOverviewPage.jsx b/src/components/Dashboard/common/DashboardOverviewPage.jsx
index 2cd11b87..748253b3 100644
--- a/src/components/Dashboard/common/DashboardOverviewPage.jsx
+++ b/src/components/Dashboard/common/DashboardOverviewPage.jsx
@@ -836,6 +836,7 @@ const DashboardOverviewPage = ({
           <Flex
             vertical
             gap='large'
+            style={isLayoutEditing ? { paddingTop: 11 } : undefined}
             onDragOver={handleRootListDragOver}
             onDrop={(e) => handleDrop(e, 'root', 0)}
           >