diff --git a/web/src/components/ui/grid/BusterResizeColumns.tsx b/web/src/components/ui/grid/BusterResizeColumns.tsx
index f79631d87..486d180c3 100644
--- a/web/src/components/ui/grid/BusterResizeColumns.tsx
+++ b/web/src/components/ui/grid/BusterResizeColumns.tsx
@@ -7,9 +7,8 @@ import { ResizeableGridDragItem } from './interfaces';
 import { useMemoizedFn, useMouse } from 'ahooks';
 import { BusterDragColumnMarkers } from './_BusterDragColumnMarkers';
 import { calculateColumnSpan, columnSpansToPercent } from './config';
-import { createStyles } from 'antd-style';
 import SplitPane, { Pane } from '../layout/AppSplitter/SplitPane';
-import { useDropzoneStyles } from './BusterResizeRows';
+import { cn } from '@/lib/classMerge';
 
 type ContainerProps = {
   rowId: string;
@@ -30,9 +29,8 @@ export const BusterResizeColumns: React.FC<ContainerProps> = ({
   items = [],
   fluid = true
 }) => {
-  const { cx } = useStyles();
   const mouse = useMouse();
-  const { setNodeRef, isOver, active, over, ...rest } = useSortable({
+  const { setNodeRef, isOver, active, over } = useSortable({
     id: rowId,
     disabled: !allowEdit
   });
@@ -161,7 +159,7 @@ export const BusterResizeColumns: React.FC<ContainerProps> = ({
           onChange={onChangeLayout}>
           {items.map((item, index) => (
             <Pane
-              className={cx(
+              className={cn(
                 'overflow-visible!',
                 index !== items.length - 1 ? 'pr-1.5' : 'pr-0',
                 index !== 0 ? 'pl-1.5' : 'pl-0'
@@ -200,37 +198,11 @@ export enum Position {
   After = 1
 }
 
-const useStyles = createStyles(({ token, css }) => ({
-  sash: css`
-    transition: background 0.2s ease-in-out;
-    border-radius: 15px;
-
-    &:hover {
-      background: ${token.colorBorder};
-    }
-    &.dragging {
-      background: ${token.colorPrimary} !important;
-    }
-    &.active {
-      background: ${token.colorBorder};
-    }
-
-    z-index: 1;
-  `,
-  pane: css`
-    &.space-pane {
-      margin-right: 10px;
-    }
-  `
-}));
-
 const DropzonePlaceholder: React.FC<{
   active: boolean;
   right: boolean;
   isDropzoneActives: boolean;
 }> = React.memo(({ active, right, isDropzoneActives }) => {
-  const { styles: dropzoneStyles, cx } = useDropzoneStyles();
-
   const memoizedStyle = useMemo(() => {
     return {
       right: right ? -7.5 : undefined,
@@ -241,11 +213,11 @@ const DropzonePlaceholder: React.FC<{
 
   return (
     <div
-      className={cx(
+      className={cn(
         'pointer-events-none absolute top-0 bottom-0 h-full w-[4px] rounded-lg transition-opacity duration-200',
-        dropzoneStyles.dropzone,
+        'bg-nav-item-hover z-[1]',
         isDropzoneActives && 'placeholder',
-        active && 'active'
+        active && 'bg-primary! opacity-100'
       )}
       style={memoizedStyle}
     />
@@ -259,16 +231,14 @@ const ColumnSash: React.FC<{
   isDraggingId: number | null;
   allowEdit: boolean;
 }> = React.memo(({ active, allowEdit, isDraggingId, index }) => {
-  const { cx, styles } = useStyles();
-
   return (
     <div
-      className={cx(
-        'grid-column-sash h-full w-[4px]',
-        allowEdit ? '' : 'hidden',
-        styles.sash,
-        active ? 'active' : '',
-        isDraggingId === index ? 'dragging' : ''
+      className={cn(
+        'grid-column-sash h-full w-[4px] rounded-lg',
+        'z-10 transition-colors duration-200 ease-in-out',
+        allowEdit ? 'hover:bg-border' : 'hidden',
+        active ? 'bg-border' : '',
+        isDraggingId === index ? 'bg-primary!' : ''
       )}
       id={index.toString()}
     />
diff --git a/web/src/components/ui/grid/BusterResizeRows.tsx b/web/src/components/ui/grid/BusterResizeRows.tsx
index e7909959b..9729b2b03 100644
--- a/web/src/components/ui/grid/BusterResizeRows.tsx
+++ b/web/src/components/ui/grid/BusterResizeRows.tsx
@@ -10,6 +10,7 @@ import { createStyles } from 'antd-style';
 import clamp from 'lodash/clamp';
 import { useDebounceFn, useMemoizedFn, useUpdateLayoutEffect } from 'ahooks';
 import { useDroppable } from '@dnd-kit/core';
+import { cn } from '@/lib/classMerge';
 
 export const BusterResizeRows: React.FC<{
   rows: BusterResizeableGridRow[];
@@ -107,60 +108,6 @@ export const BusterResizeRows: React.FC<{
   );
 };
 
-export const useDropzoneStyles = createStyles(({ css, token }) => ({
-  dropzone: css`
-    transition: background-color 0.2s ease;
-    background-color: ${token.colorBorderSecondary};
-
-    &.active {
-      opacity: 1;
-      z-index: 2;
-      background: ${token.colorPrimary} !important;
-    }
-  `
-}));
-
-const useStyles = createStyles(({ css, token }) => ({
-  dragger: css`
-    transition: background-color 0.2s ease;
-
-    &.dragger {
-      cursor: row-resize;
-      &:hover {
-        background-color: ${token.colorBorder};
-      }
-    }
-
-    &.active {
-      background-color: ${token.colorPrimary} !important;
-    }
-  `,
-  hitArea: css`
-    left: 0;
-    right: 0;
-    height: 54px; // Reduced from 54px to be more reasonable
-    position: absolute;
-    z-index: 9;
-    pointer-events: none;
-
-    // Remove background-color and opacity for production
-    // background-color: red;
-    opacity: 0;
-
-    // &.active {
-    //   opacity: 0;
-    // }
-
-    &.top {
-      top: -36px; // Position the hit area to straddle the dragger
-    }
-
-    &:not(.top) {
-      bottom: -15px; // Position the hit area to straddle the dragger
-    }
-  `
-}));
-
 const ResizeRowHandle: React.FC<{
   id: string;
   index?: number;
@@ -173,8 +120,7 @@ const ResizeRowHandle: React.FC<{
   hideDropzone?: boolean;
 }> = React.memo(
   ({ hideDropzone, top, id, active, allowEdit, setIsDraggingResizeId, index, sizes, onResize }) => {
-    const { styles, cx } = useStyles();
-    const { styles: dropzoneStyles } = useDropzoneStyles();
+    const { styles } = useStyles();
     const { setNodeRef, isOver, over } = useDroppable({
       id: `${NEW_ROW_ID}_${id}}`,
       disabled: !allowEdit,
@@ -221,18 +167,24 @@ const ResizeRowHandle: React.FC<{
       <div className="relative">
         <div
           id={id}
-          className={cx(
-            showDropzone && allowEdit && dropzoneStyles.dropzone,
-            'h-[4px] w-full rounded-sm select-none',
-            allowEdit && styles.dragger,
-            !top && 'dragger absolute',
-            showActive && 'active'
+          className={cn(
+            allowEdit && 'hover:bg-border cursor-row-resize',
+            showActive && 'bg-primary! z-10 opacity-100',
+            'h-[4px] w-full rounded-sm transition-colors duration-200 ease-in-out select-none',
+            !top && 'dragger absolute'
           )}
           style={memoizedStyle}
           onMouseDown={onMouseDown}
         />
         <div
-          className={cx(styles.hitArea, top && 'top', showActive && 'active')}
+          className={cn(
+            // 'pointer-events-none absolute right-0 left-0 z-50 h-[54px] bg-red-200 opacity-20',
+            // top ? '-top-[36px]' : '-bottom-[15px]',
+            // showActive && 'opacity-80',
+            // styles.hitArea
+            'pointer-events-all absolute right-0 left-0 z-50 h-[54px] opacity-0',
+            top ? '-top-[36px]' : '-bottom-[15px]'
+          )}
           ref={setNodeRef}
         />
       </div>
@@ -241,3 +193,24 @@ const ResizeRowHandle: React.FC<{
 );
 
 ResizeRowHandle.displayName = 'ResizeRowHandle';
+
+const useStyles = createStyles(({ css, token }) => ({
+  hitArea: css`
+    left: 0;
+    right: 0;
+    height: 54px; // Reduced from 54px to be more reasonable
+    position: absolute;
+    z-index: 9;
+    pointer-events: none;
+
+    opacity: 0.2;
+
+    &.top {
+      top: -36px; // Position the hit area to straddle the dragger
+    }
+
+    &:not(.top) {
+      bottom: -15px; // Position the hit area to straddle the dragger
+    }
+  `
+}));
diff --git a/web/src/components/ui/grid/BusterResizeableGrid.tsx b/web/src/components/ui/grid/BusterResizeableGrid.tsx
index c97b4cf8c..555724f12 100644
--- a/web/src/components/ui/grid/BusterResizeableGrid.tsx
+++ b/web/src/components/ui/grid/BusterResizeableGrid.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import {
   closestCenter,
diff --git a/web/src/components/ui/grid/_BusterBusterNewItemDropzone.tsx b/web/src/components/ui/grid/_BusterBusterNewItemDropzone.tsx
index 9be7498d3..249f49974 100644
--- a/web/src/components/ui/grid/_BusterBusterNewItemDropzone.tsx
+++ b/web/src/components/ui/grid/_BusterBusterNewItemDropzone.tsx
@@ -15,6 +15,7 @@ export const BusterNewItemDropzone: React.FC = () => {
       className={cn(
         'flex h-full w-full items-center justify-center rounded-sm border-dashed',
         'transition-colors duration-200 ease-in-out',
+        'text-base',
         'text-gray-dark border',
         isOver && 'bg-primary-light text-background border-solid'
       )}>
diff --git a/web/src/components/ui/grid/_BusterDragColumnMarkers.tsx b/web/src/components/ui/grid/_BusterDragColumnMarkers.tsx
index b47651ae5..8f38bc65b 100644
--- a/web/src/components/ui/grid/_BusterDragColumnMarkers.tsx
+++ b/web/src/components/ui/grid/_BusterDragColumnMarkers.tsx
@@ -1,4 +1,3 @@
-import { createStyles } from 'antd-style';
 import React from 'react';
 import { NUMBER_OF_COLUMNS } from './config';
 import { cn } from '@/lib/utils';
@@ -29,7 +28,7 @@ export const BusterDragColumnMarkers: React.FC<{
             key={index}
             className={cn(
               'bg-border',
-              snappedDot === index && 'bg-primary shadow-primary-light shadow-sm',
+              snappedDot === index && 'bg-primary shadow-primary-light',
               `snap-dot-${index} absolute h-2 w-2 rounded-full transition duration-500`
             )}
             style={{
diff --git a/web/src/components/ui/grid/_BusterSortableItemContent.tsx b/web/src/components/ui/grid/_BusterSortableItemContent.tsx
index 7884f60de..98f57b157 100644
--- a/web/src/components/ui/grid/_BusterSortableItemContent.tsx
+++ b/web/src/components/ui/grid/_BusterSortableItemContent.tsx
@@ -1,23 +1,5 @@
 import React, { forwardRef } from 'react';
-import { createStyles } from 'antd-style';
-
-const useStyles = createStyles(({ css, token }) => ({
-  item: css`
-    transition: box-shadow transform 200ms ease !important;
-    box-shadow: var(--box-shadow);
-    --box-shadow: 0px 0px 0px rgb(148 148 148);
-    transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scale(var(--scale, 1));
-
-    &.dragging {
-      z-index: 1;
-      transition: none !important;
-    }
-
-    &.dragOverlay {
-      --box-shadow: ${token.boxShadow};
-    }
-  `
-}));
+import { cn } from '@/lib/utils';
 
 export const BusterSortableItemContent = React.memo(
   forwardRef<
@@ -30,18 +12,17 @@ export const BusterSortableItemContent = React.memo(
       children?: React.ReactNode;
     }
   >(({ style, children, itemId, isDragging, isDragOverlay }, setNodeRef) => {
-    const { cx, styles } = useStyles();
-
     return (
       <div
         ref={setNodeRef}
         style={style}
-        className={cx(
+        className={cn(
           'relative h-full w-full overflow-hidden rounded-sm',
-          styles.item,
-          isDragOverlay && 'dragOverlay',
-          isDragging && 'dragging',
-          isDragging ? (isDragOverlay ? 'opacity-90' : 'opacity-40') : 'opacity-100'
+          'transition-shadow duration-200 ease-in-out',
+          isDragOverlay && 'shadow-lg',
+          isDragging && 'dragging z-10 transition-none',
+          isDragging ? (isDragOverlay ? 'opacity-90' : 'opacity-40') : 'opacity-100',
+          'translate-x-[var(--translate-x,0)] translate-y-[var(--translate-y,0)] scale-[var(--scale,1)]'
         )}>
         {children}
       </div>