diff --git a/apps/desktop/src/components/cell-detail-panel.tsx b/apps/desktop/src/components/cell-detail-panel.tsx
index fd4d070..d4120f2 100644
--- a/apps/desktop/src/components/cell-detail-panel.tsx
+++ b/apps/desktop/src/components/cell-detail-panel.tsx
@@ -70,7 +70,7 @@ export function CellDetailPanel() {
   if (!isRightPanelOpen) return null;
 
   return (
-    <div className="h-svh flex flex-col bg-background border-l w-full">
+    <div className="h-svh flex flex-col bg-background border-l w-full select-none">
       {/* Header */}
       <div className="flex items-center justify-end p-4 border-b flex-shrink-0">
         {/*<h3 className="text-sm font-semibold">Details</h3>*/}
diff --git a/apps/desktop/src/components/scroll-horizontal.tsx b/apps/desktop/src/components/scroll-horizontal.tsx
index 3f99ef1..ba7949e 100644
--- a/apps/desktop/src/components/scroll-horizontal.tsx
+++ b/apps/desktop/src/components/scroll-horizontal.tsx
@@ -13,6 +13,7 @@ function ScrollHorizontal({ scrollContainerRef, table }: props) {
 
   const [showLeftShadow, setShowLeftShadow] = useState(false);
   const [showRightShadow, setShowRightShadow] = useState(false);
+  const [hasVerticalScrollbar, setHasVerticalScrollbar] = useState(false);
 
   // Calculate the total width of left-pinned columns
   const leftPinnedWidth = table.getLeftTotalSize();
@@ -21,7 +22,10 @@ function ScrollHorizontal({ scrollContainerRef, table }: props) {
     const handleScroll = () => {
       if (!scrollContainerRef.current) return;
 
-      const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
+      const { scrollLeft, scrollWidth, clientWidth, scrollHeight, clientHeight } = scrollContainerRef.current;
+
+      // Check if there's vertical overflow (scrollbar present)
+      setHasVerticalScrollbar(scrollHeight > clientHeight);
 
       // Only show left shadow if scrolled past the pinned columns
       setShowLeftShadow(scrollLeft > 0);
@@ -55,23 +59,39 @@ function ScrollHorizontal({ scrollContainerRef, table }: props) {
     <>
       {showLeftShadow && (
         <div
-          className="flex items-center absolute top-0 h-full w-6 backdrop-blur-[1.5px] bg-gradient-to-r from-white to-transparent z-50 cursor-pointer"
+          className="flex items-center absolute top-0 h-full w-20 z-50 cursor-pointer isolate"
           style={{
             left: `${leftPinnedWidth}px`,
+            backdropFilter: 'blur(4px)',
+            WebkitBackdropFilter: 'blur(4px)',
+            background: 'linear-gradient(to right, hsl(var(--background) / 0.9), transparent)',
+            maskImage: 'linear-gradient(to right, black 0%, transparent 100%)',
+            WebkitMaskImage: 'linear-gradient(to right, black 0%, transparent 100%)',
+            transform: 'translateZ(0)',
+            willChange: 'transform',
           }}
           onClick={scrollToLeft}
         >
-          <ChevronLeftIcon />
+          <ChevronLeftIcon className=" stroke-black" />
         </div>
       )}
 
       {/* Right shadow */}
       {showRightShadow && (
         <div
-          className="flex items-center absolute right-0 top-0 h-full w-6 backdrop-blur-[1.5px] bg-gradient-to-l from-white to-transparent z-50 cursor-pointer"
+          className={`flex items-center justify-end absolute top-0 h-full w-20 z-50 cursor-pointer isolate ${hasVerticalScrollbar ? 'right-3' : 'right-0'}`}
+          style={{
+            backdropFilter: 'blur(4px)',
+            WebkitBackdropFilter: 'blur(4px)',
+            background: 'linear-gradient(to left, hsl(var(--background) / 0.9), transparent)',
+            maskImage: 'linear-gradient(to left, black 0%, transparent 100%)',
+            WebkitMaskImage: 'linear-gradient(to left, black 0%, transparent 100%)',
+            transform: 'translateZ(0)',
+            willChange: 'transform',
+          }}
           onClick={scrollToRight}
         >
-          <ChevronRightIcon />
+          <ChevronRightIcon className=" stroke-black" />
         </div>
       )}
     </>
diff --git a/apps/desktop/src/components/table/data-table.tsx b/apps/desktop/src/components/table/data-table.tsx
index e8f589b..40768fd 100644
--- a/apps/desktop/src/components/table/data-table.tsx
+++ b/apps/desktop/src/components/table/data-table.tsx
@@ -133,7 +133,7 @@ export function DataTable() {
   }
 
   return (
-    <div className="flex flex-col w-full h-full relative p-4">
+    <div className="flex flex-col w-full h-full relative p-4 select-none">
       <div className="mb-4 flex-shrink-0">
         {/* Advanced Filter Command */}
         <div className="mb-4">
@@ -178,8 +178,9 @@ export function DataTable() {
             <TableHeader className="bg-tint-300">
               {table.getHeaderGroups().map(headerGroup => (
                 <TableRow key={headerGroup.id}>
-                  {headerGroup.headers.map(header => {
+                  {headerGroup.headers.map((header, index) => {
                     const isPinned = header.column.getIsPinned();
+                    const isLastHeader = index === headerGroup.headers.length - 1;
                     return (
                       <TableHead
                         {...{
@@ -212,7 +213,7 @@ export function DataTable() {
                             onDoubleClick: () => header.column.resetSize(),
                             onMouseDown: header.getResizeHandler(),
                             onTouchStart: header.getResizeHandler(),
-                            className: `absolute bottom-2 h-6 cursor-ew-resize -right-2 px-2 z-40`,
+                            className: `absolute bottom-2 h-6 cursor-ew-resize ${!isLastHeader ? '-right-2 px-2' : 'right-2 pl-6'} z-40`,
                             style: {
                               transform:
                                 COLUMN_RESIZE_CONFIG.mode === 'onEnd' &&