diff --git a/frontend/javascripts/viewer/view/components/button_component.tsx b/frontend/javascripts/viewer/view/components/button_component.tsx
index 72d1d2b7b4..d3af977f4c 100644
--- a/frontend/javascripts/viewer/view/components/button_component.tsx
+++ b/frontend/javascripts/viewer/view/components/button_component.tsx
@@ -4,7 +4,6 @@ import noop from "lodash/noop";
 import React from "react";
 
 type ButtonComponentProps = ButtonProps & {
-  faIcon?: string;
   tooltipPlacement?: FastTooltipPlacement | undefined;
 };
 /*
@@ -20,15 +19,7 @@ const ButtonComponent = React.forwardRef<
   HTMLButtonElement | HTMLAnchorElement,
   ButtonComponentProps
 >((props, ref) => {
-  const {
-    children,
-    faIcon,
-    title,
-    tooltipPlacement,
-    onClick = noop,
-    onTouchEnd,
-    ...restProps
-  } = props;
+  const { children, title, tooltipPlacement, onClick = noop, onTouchEnd, ...restProps } = props;
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.currentTarget.blur();
@@ -42,20 +33,12 @@ const ButtonComponent = React.forwardRef<
     }
   };
 
-  const iconEl = faIcon != null && !props.loading ? <i className={faIcon} /> : null;
-  const button =
-    // Differentiate via children != null, since antd uses a different styling for buttons
-    // with a single icon child (.ant-btn-icon-only will be assigned)
-    children != null ? (
-      <Button {...restProps} onClick={handleClick} onTouchEnd={handleTouchEnd} ref={ref}>
-        {iconEl}
-        {children}
-      </Button>
-    ) : (
-      <Button {...restProps} onClick={handleClick} onTouchEnd={handleTouchEnd} ref={ref}>
-        {iconEl}
-      </Button>
-    );
+  const button = (
+    <Button {...restProps} onClick={handleClick} onTouchEnd={handleTouchEnd} ref={ref}>
+      {children}
+    </Button>
+  );
+
   return title != null ? (
     <FastTooltip title={title} placement={tooltipPlacement}>
       {button}
diff --git a/frontend/javascripts/viewer/view/right-border-tabs/advanced_search_popover.tsx b/frontend/javascripts/viewer/view/right-border-tabs/advanced_search_popover.tsx
index 6411e6029d..09c0fe869d 100644
--- a/frontend/javascripts/viewer/view/right-border-tabs/advanced_search_popover.tsx
+++ b/frontend/javascripts/viewer/view/right-border-tabs/advanced_search_popover.tsx
@@ -159,7 +159,6 @@ export default class AdvancedSearchPopover<
                   style={{
                     width: 450,
                   }}
-                  className="compact-items compact-icons"
                 >
                   <Input
                     style={{
@@ -182,50 +181,26 @@ export default class AdvancedSearchPopover<
                         areAllMatchesSelected: false,
                       })
                     }
-                    addonAfter={
-                      <div
-                        style={{
-                          minWidth: 25,
-                          color: areAllMatchesSelected
-                            ? "var(--ant-color-text-disabled)"
-                            : undefined,
-                        }}
-                      >
-                        {areAllMatchesSelected
-                          ? "all"
-                          : `${currentPosition + 1}/${numberOfAvailableOptions}`}
-                      </div>
-                    }
                     ref={this.autoFocus}
                     autoFocus
                   />
+                  <ButtonComponent disabled>
+                    {areAllMatchesSelected
+                      ? "all"
+                      : `${currentPosition + 1}/${numberOfAvailableOptions}`}
+                  </ButtonComponent>
                   <Tooltip title="Previous (shift+enter)">
-                    <ButtonComponent
-                      style={{
-                        width: 40,
-                      }}
-                      onClick={this.selectPreviousOption}
-                      disabled={hasNoResults}
-                    >
+                    <ButtonComponent onClick={this.selectPreviousOption} disabled={hasNoResults}>
                       <UpOutlined />
                     </ButtonComponent>
                   </Tooltip>
                   <Tooltip title="Next (enter)">
-                    <ButtonComponent
-                      style={{
-                        width: 40,
-                      }}
-                      onClick={this.selectNextOption}
-                      disabled={hasNoResults}
-                    >
+                    <ButtonComponent onClick={this.selectNextOption} disabled={hasNoResults}>
                       <DownOutlined />
                     </ButtonComponent>
                   </Tooltip>
                   <Tooltip title="Select all matches (except groups)">
                     <ButtonComponent
-                      style={{
-                        width: 40,
-                      }}
                       type={areAllMatchesSelected ? "primary" : "default"}
                       onClick={
                         this.props.onSelectAllMatches != null
diff --git a/frontend/javascripts/viewer/view/right-border-tabs/comment_tab/comment_tab_view.tsx b/frontend/javascripts/viewer/view/right-border-tabs/comment_tab/comment_tab_view.tsx
index 2e7f8991ad..9320d6b081 100644
--- a/frontend/javascripts/viewer/view/right-border-tabs/comment_tab/comment_tab_view.tsx
+++ b/frontend/javascripts/viewer/view/right-border-tabs/comment_tab/comment_tab_view.tsx
@@ -6,6 +6,8 @@ import {
   InfoCircleOutlined,
   SearchOutlined,
   ShrinkOutlined,
+  SortAscendingOutlined,
+  SortDescendingOutlined,
 } from "@ant-design/icons";
 import {
   Tree as AntdTree,
@@ -332,13 +334,6 @@ function CommentTabView(props: Props) {
     );
   }
 
-  function renderSortIcon() {
-    const sortAsc = isSortedAscending;
-    const sortNumeric = sortBy === SortByEnum.ID;
-    const iconClass = `fas fa-sort-${sortNumeric ? "numeric" : "alpha"}-${sortAsc ? "down" : "up"}`;
-    return <i className={iconClass} />;
-  }
-
   function getSortDropdown(): MenuProps {
     return {
       selectedKeys: [sortBy],
@@ -458,7 +453,7 @@ function CommentTabView(props: Props) {
           return (
             <React.Fragment>
               {renderMarkdownModal()}
-              <Space.Compact className="compact-items compact-icons">
+              <Space.Compact block>
                 <AdvancedSearchPopover
                   onSelect={(comment) => {
                     setActiveNode(comment.nodeId);
@@ -510,9 +505,13 @@ function CommentTabView(props: Props) {
                   icon={<ArrowRightOutlined />}
                 />
                 <Dropdown menu={getSortDropdown()} trigger={["click"]}>
-                  <ButtonComponent title="Sort" onClick={toggleSortingDirection}>
-                    {renderSortIcon()}
-                  </ButtonComponent>
+                  <ButtonComponent
+                    title="Sort"
+                    onClick={toggleSortingDirection}
+                    icon={
+                      isSortedAscending ? <SortAscendingOutlined /> : <SortDescendingOutlined />
+                    }
+                  />
                 </Dropdown>
                 <ButtonComponent
                   onClick={toggleExpandAllTrees}
diff --git a/frontend/javascripts/viewer/view/right-border-tabs/connectome_tab/connectome_view.tsx b/frontend/javascripts/viewer/view/right-border-tabs/connectome_tab/connectome_view.tsx
index 7bb0fd3ea2..677d3b1a73 100644
--- a/frontend/javascripts/viewer/view/right-border-tabs/connectome_tab/connectome_view.tsx
+++ b/frontend/javascripts/viewer/view/right-border-tabs/connectome_tab/connectome_view.tsx
@@ -754,7 +754,7 @@ class ConnectomeView extends React.Component<Props, State> {
     return (
       <>
         <Space.Compact
-          className="compact-icons"
+          block
           style={{
             marginBottom: 10,
           }}
diff --git a/frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsx b/frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsx
index 0d756657ff..df8b2388ae 100644
--- a/frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsx
+++ b/frontend/javascripts/viewer/view/right-border-tabs/segments_tab/segments_view.tsx
@@ -994,7 +994,7 @@ class SegmentsView extends React.Component<Props, State> {
   };
 
   getMeshesHeader = () => (
-    <Space size="middle">
+    <Space.Compact>
       <FastTooltip title="Select a mesh file from which precomputed meshes will be loaded.">
         <ConfigProvider
           renderEmpty={renderEmptyMeshFileSelect}
@@ -1004,7 +1004,6 @@ class SegmentsView extends React.Component<Props, State> {
             placeholder="Select a mesh file"
             value={this.props.currentMeshFile != null ? this.props.currentMeshFile.name : null}
             onChange={this.handleMeshFileSelected}
-            size="small"
             loading={this.props.availableMeshFiles == null}
             popupMatchSelectWidth={false}
           >
@@ -1022,38 +1021,32 @@ class SegmentsView extends React.Component<Props, State> {
           </Select>
         </ConfigProvider>
       </FastTooltip>
-      <FastTooltip title="Refresh list of available Mesh files">
-        <ReloadOutlined
-          key="refresh"
-          onClick={() =>
-            Store.dispatch(
-              maybeFetchMeshFilesAction(
-                this.props.visibleSegmentationLayer,
-                this.props.dataset,
-                true,
-              ),
-            )
-          }
-        >
-          Reload from Server
-        </ReloadOutlined>
-      </FastTooltip>
-      <FastTooltip title="Add a precomputed mesh file">
-        <Popover content={this.getPreComputeMeshesPopover} trigger="click" placement="bottom">
-          <PlusOutlined />
-        </Popover>
-      </FastTooltip>
+      <ButtonComponent
+        title="Refresh list of available Mesh files"
+        icon={<ReloadOutlined />}
+        onClick={() =>
+          Store.dispatch(
+            maybeFetchMeshFilesAction(
+              this.props.visibleSegmentationLayer,
+              this.props.dataset,
+              true,
+            ),
+          )
+        }
+      />
+      <Popover content={this.getPreComputeMeshesPopover} trigger="click" placement="bottom">
+        <ButtonComponent title="Add a precomputed mesh file" icon={<PlusOutlined />} />
+      </Popover>
       {this.state.activeMeshJobId != null ? (
-        <FastTooltip title='A mesh file is currently being computed. See "Processing Jobs" for more information.'>
-          <LoadingOutlined />
-        </FastTooltip>
+        <ButtonComponent
+          title='A mesh file is currently being computed. See "Processing Jobs" for more information.'
+          icon={<LoadingOutlined />}
+        />
       ) : null}
-      <FastTooltip title="Configure ad-hoc mesh computation">
-        <Popover content={this.getAdHocMeshSettings} trigger="click" placement="bottom">
-          <SettingOutlined />
-        </Popover>
-      </FastTooltip>
-    </Space>
+      <Popover content={this.getAdHocMeshSettings} trigger="click" placement="bottom">
+        <ButtonComponent title="Configure ad-hoc mesh computation" icon={<SettingOutlined />} />
+      </Popover>
+    </Space.Compact>
   );
 
   getToastForMissingPositions = (groupId: number | null) => {
@@ -1860,7 +1853,7 @@ class SegmentsView extends React.Component<Props, State> {
             ).map((node) => node.key);
             return (
               <React.Fragment>
-                <Space size="middle">
+                <Space.Compact>
                   <AdvancedSearchPopover
                     onSelect={this.handleSearchSelect}
                     data={this.state.searchableTreeItemList}
@@ -1870,13 +1863,12 @@ class SegmentsView extends React.Component<Props, State> {
                     onSelectAllMatches={this.handleSelectAllMatchingSegments}
                   >
                     <ButtonComponent
-                      size="small"
                       title="Open the search via CTRL + Shift + F"
                       icon={<SearchOutlined />}
                     />
                   </AdvancedSearchPopover>
                   {this.getMeshesHeader()}
-                </Space>
+                </Space.Compact>
                 <div style={{ flex: 1 }}>
                   {isSegmentHierarchyEmpty ? (
                     <Empty
diff --git a/frontend/javascripts/viewer/view/right-border-tabs/trees_tab/skeleton_tab_view.tsx b/frontend/javascripts/viewer/view/right-border-tabs/trees_tab/skeleton_tab_view.tsx
index d5bdfdd7e5..17672aeaa1 100644
--- a/frontend/javascripts/viewer/view/right-border-tabs/trees_tab/skeleton_tab_view.tsx
+++ b/frontend/javascripts/viewer/view/right-border-tabs/trees_tab/skeleton_tab_view.tsx
@@ -1,8 +1,15 @@
 import {
+  ArrowLeftOutlined,
+  ArrowRightOutlined,
+  ArrowsAltOutlined,
+  DeleteOutlined,
   DownOutlined,
   DownloadOutlined,
   ExclamationCircleOutlined,
+  PlusOutlined,
   SearchOutlined,
+  SortAscendingOutlined,
+  SwapOutlined,
   UploadOutlined,
   WarningOutlined,
 } from "@ant-design/icons";
@@ -18,7 +25,7 @@ import Zip from "libs/zipjs_wrapper";
 import _ from "lodash";
 import memoizeOne from "memoize-one";
 import messages from "messages";
-import * as React from "react";
+import React from "react";
 import { connect } from "react-redux";
 import type { Dispatch } from "redux";
 import { batchActions } from "redux-batched-actions";
@@ -27,8 +34,6 @@ import { isAnnotationOwner } from "viewer/model/accessors/annotation_accessor";
 import {
   areGeometriesTransformed,
   enforceSkeletonTracing,
-  getActiveTree,
-  getActiveTreeGroup,
   getTree,
 } from "viewer/model/accessors/skeletontracing_accessor";
 import { getActiveSegmentationTracing } from "viewer/model/accessors/volumetracing_accessor";
@@ -77,7 +82,6 @@ import { api } from "viewer/singletons";
 import Store, { type UserBoundingBox, type WebknossosState } from "viewer/store";
 import ButtonComponent from "viewer/view/components/button_component";
 import DomVisibilityObserver from "viewer/view/components/dom_visibility_observer";
-import InputComponent from "viewer/view/components/input_component";
 import TreeHierarchyView from "viewer/view/right-border-tabs/trees_tab/tree_hierarchy_view";
 import {
   GroupTypeEnum,
@@ -777,7 +781,7 @@ class SkeletonTabView extends React.PureComponent<Props, State> {
           onClick: this.shuffleAllTreeColors,
           title: "Shuffle All Tree Colors",
           disabled: isEditingDisabled,
-          icon: <i className="fas fa-random" />,
+          icon: <SwapOutlined />,
           label: "Shuffle All Tree Colors",
         },
         {
@@ -825,7 +829,7 @@ class SkeletonTabView extends React.PureComponent<Props, State> {
           onClick: this.handleMeasureAllSkeletonsLength,
           title: "Measure Length of All Skeletons",
 
-          icon: <i className="fas fa-ruler" />,
+          icon: <ArrowsAltOutlined />,
           label: "Measure Length of All Skeletons",
         },
       ],
@@ -840,7 +844,7 @@ class SkeletonTabView extends React.PureComponent<Props, State> {
         totalLengthNm,
         LongUnitToShortUnitMap[unit],
       )} (${formatLengthAsVx(totalLengthVx)}).`,
-      icon: <i className="fas fa-ruler" />,
+      icon: <ArrowsAltOutlined />,
     });
   };
 
@@ -873,8 +877,6 @@ class SkeletonTabView extends React.PureComponent<Props, State> {
     }
 
     const { showSkeletons, trees, treeGroups } = skeletonTracing;
-    const activeTreeName = getActiveTree(skeletonTracing)?.name ?? "";
-    const activeGroupName = getActiveTreeGroup(skeletonTracing)?.name ?? "";
     const noTreesAndGroups = trees.size() === 0 && _.size(treeGroups) === 0;
     const orderAttribute = this.props.userConfiguration.sortTreesByName ? "name" : "timestamp";
     // Avoid that the title switches to the other title during the fadeout of the Modal
@@ -914,7 +916,7 @@ class SkeletonTabView extends React.PureComponent<Props, State> {
                 >
                   <Spin />
                 </Modal>
-                <Space.Compact className="compact-icons compact-wrap">
+                <Space.Compact block className="compact-wrap">
                   <AdvancedSearchPopover
                     onSelect={this.handleSearchSelect}
                     data={this.getTreeAndTreeGroupList(trees, treeGroups, orderAttribute)}
@@ -926,69 +928,48 @@ class SkeletonTabView extends React.PureComponent<Props, State> {
                     <ButtonComponent
                       title="Open the search via CTRL + Shift + F"
                       className="firstButton"
-                    >
-                      <SearchOutlined />
-                    </ButtonComponent>
+                      icon={<SearchOutlined />}
+                    />
                   </AdvancedSearchPopover>
                   <ButtonComponent
                     onClick={this.props.onCreateTree}
                     title={isEditingDisabled ? isEditingDisabledMessage : "Create new Tree (C)"}
                     disabled={isEditingDisabled}
-                  >
-                    <i className="fas fa-plus" />
-                  </ButtonComponent>
+                    icon={<PlusOutlined />}
+                  />
                   <ButtonComponent
                     onClick={this.handleDelete}
                     title={isEditingDisabled ? isEditingDisabledMessage : "Delete Selected Trees"}
                     disabled={isEditingDisabled}
-                  >
-                    <i className="far fa-trash-alt" />
-                  </ButtonComponent>
+                    icon={<DeleteOutlined />}
+                  />
                   <ButtonComponent
                     onClick={this.toggleAllTrees}
                     title="Toggle Visibility of All Trees (1)"
                     disabled={isEditingDisabled}
-                  >
-                    <i className="fas fa-toggle-on" />
-                  </ButtonComponent>
+                    icon={<i className="fas fa-toggle-on" />}
+                  />
                   <ButtonComponent
                     onClick={this.toggleInactiveTrees}
                     title="Toggle Visibility of Inactive Trees (2)"
                     disabled={isEditingDisabled}
-                  >
-                    <i className="fas fa-toggle-off" />
-                  </ButtonComponent>
-                  <Dropdown menu={this.getActionsDropdown()} trigger={["click"]}>
-                    <ButtonComponent style={{ overflow: "clip" }} className="lastButton">
-                      More
-                      <DownOutlined />
-                    </ButtonComponent>
-                  </Dropdown>
-                </Space.Compact>
-                <Space.Compact className="compact-icons compact-items">
+                    icon={<i className="fas fa-toggle-off" />}
+                  />
                   <ButtonComponent
                     onClick={this.props.onSelectNextTreeBackward}
                     title="Select previous tree"
-                  >
-                    <i className="fas fa-arrow-left" />
-                  </ButtonComponent>
-                  <InputComponent
-                    onChange={_.noop}
-                    value={activeTreeName || activeGroupName}
-                    disabled
-                    title="Edit the name by double-clicking the tree or by using the details table below the tree list. Note: This text field will be removed in a future update."
-                    style={{ width: "80%" }}
+                    icon={<ArrowLeftOutlined />}
                   />
                   <ButtonComponent
                     onClick={this.props.onSelectNextTreeForward}
                     title="Select next tree"
-                  >
-                    <i className="fas fa-arrow-right" />
-                  </ButtonComponent>
+                    icon={<ArrowRightOutlined />}
+                  />
                   <Dropdown menu={this.getSettingsDropdown()} trigger={["click"]}>
-                    <ButtonComponent title="Sort" style={{ overflow: "clip" }}>
-                      <i className="fas fa-sort-alpha-down" />
-                    </ButtonComponent>
+                    <ButtonComponent title="Sort" icon={<SortAscendingOutlined />} />
+                  </Dropdown>
+                  <Dropdown menu={this.getActionsDropdown()} trigger={["click"]}>
+                    <ButtonComponent icon={<DownOutlined />}>More</ButtonComponent>
                   </Dropdown>
                 </Space.Compact>
                 {!showSkeletons ? (
diff --git a/frontend/stylesheets/trace_view/_right_menu.less b/frontend/stylesheets/trace_view/_right_menu.less
index 4ee5a00a97..9a2846212d 100644
--- a/frontend/stylesheets/trace_view/_right_menu.less
+++ b/frontend/stylesheets/trace_view/_right_menu.less
@@ -34,22 +34,26 @@
   padding-left: 5px;
   padding-right: 5px;
   border-radius: 2px;
+
   .anticon-edit,
   .anticon-ellipsis {
     // Hide edit and ellipsis icon (unless hovered)
     display: none;
   }
+
   &.is-selected-segment {
     background-color: var(--ant-blue-3);
   }
 
   &:hover {
     background-color: var(--ant-blue-1);
+
     .anticon-edit,
     .anticon-ellipsis {
       display: inline-block;
     }
   }
+
   // If a cell is hovered in the data viewports,
   // it should also be highlighted in the list.
   &.is-hovered-segment {
@@ -77,7 +81,7 @@
   height: inherit;
   display: flex;
   flex-direction: column;
-  
+
   .ant-space-compact:not(.ant-tree .ant-space-compact) {
     // Override <antd.Space> spacing between skeleton tab buttons and name input
     // Do not affect use of <Space> in in the <Tree> elements
@@ -94,6 +98,7 @@
 }
 
 .markdown-small {
+
   h1,
   h2,
   h3,
@@ -103,6 +108,7 @@
     margin-bottom: 0;
     color: var(--ant-color-text);
   }
+
   max-height: 24px;
   overflow: hidden;
 }
@@ -117,9 +123,11 @@
   .ant-input-group-wrapper {
     .ant-input-wrapper {
       color: inherit;
+
       .ant-input {
         color: inherit;
       }
+
       .ant-input-group-addon {
         border-radius: 0;
         border-right: 0;
@@ -128,26 +136,15 @@
   }
 }
 
-.compact-items {
-  button {
-    padding: 4px 8px;
-  }
-}
-.compact-icons {
-  .anticon,
-  i {
-    margin-right: 0px;
-  }
-}
-
 .compact-wrap {
   // Should only be used with antd <Space.Compact>
+  // Allows for wrapping of compact items 
   flex-wrap: wrap;
 
-   button{
+  button {
     // Slightly shift buttons up to prevent double borders when wrapping in flex container occurs
     margin-top: -1px;
-   }
+  }
 
 }
 
@@ -206,23 +203,29 @@
   .ant-table {
     border-bottom: none;
   }
+
   .ant-table-cell {
     padding: 0px 20px !important;
     cursor: pointer;
   }
+
   .ant-table-row:last-child {
     border-bottom: none;
+
     .ant-table-cell {
       border-bottom: none;
     }
   }
+
   .ant-table-row .ant-table-cell:first-child {
     // Hiding the extra checkbox column rendered due to using rowSelection in the table wrapping the bounding boxes.
     display: none;
   }
+
   .ant-table-row .ant-table-cell:nth-child(2) {
     flex: 1 1 !important;
   }
+
   .ant-table-footer {
     background-color: transparent;
     padding: 8px;
@@ -241,10 +244,13 @@
     width: 100%;
   }
 
-  input, .ant-input-affix-wrapper, .ant-input-number {
+  input,
+  .ant-input-affix-wrapper,
+  .ant-input-number {
     &:not(:hover) {
       background: transparent;
     }
+
     border: 0;
     padding: 0;
     box-shadow: none !important;
@@ -252,13 +258,16 @@
     height: 100%;
   }
 
-  .ant-input-status-error, .ant-input-status-warning {
+  .ant-input-status-error,
+  .ant-input-status-warning {
     border: 0 !important;
   }
+
   input.ant-input-status-error,
   .ant-input-status-error input {
     color: var(--ant-color-error);
   }
+
   input.ant-input-status-warning,
   .ant-input-status-warning input {
     color: var(--ant-color-warning);
@@ -270,11 +279,13 @@
 
   .ant-select {
     width: 100%;
+
     .ant-select-selector {
       background: transparent;
       padding-top: 0;
       padding-bottom: 0;
     }
+
     &:not(.ant-select-focused) {
       .ant-select-selection-placeholder {
         // Align the placeholder with the other inputs
@@ -285,18 +296,22 @@
 
 
   // Table
-  th, td {
+  th,
+  td {
     padding: 2px 4px;
     text-align: left;
     color: var(--ant-color-text-base);
   }
+
   th {
     font-weight: normal;
   }
 
-  th, tr:nth-child(even) td {
+  th,
+  tr:nth-child(even) td {
     background-color: var(--compact-table-bg1);
   }
+
   td {
     background-color: var(--compact-table-bg2);
   }
@@ -304,6 +319,7 @@
   td:nth-child(2):not(:last-child) {
     border-right: 0;
   }
+
   td:nth-child(3) {
     border-left: 0;
   }
@@ -327,11 +343,12 @@
   tr td:first-child {
     border-left: 1px solid var(--compact-table-border);
   }
+
   tr:first-child th {
     border-top: solid 1px var(--compact-table-border);
   }
 
-  tr:first-child th:first-child{
+  tr:first-child th:first-child {
     border-top-left-radius: var(--ant-border-radius);
   }
 
@@ -346,4 +363,4 @@
   tr:last-child td:last-child {
     border-bottom-right-radius: var(--ant-border-radius);
   }
-}
+}
\ No newline at end of file