diff --git a/apps/studio/components/interfaces/Auth/CustomAuthProviders/CustomAuthProvidersList.tsx b/apps/studio/components/interfaces/Auth/CustomAuthProviders/CustomAuthProvidersList.tsx
index b0c99c06408..f6a50554d08 100644
--- a/apps/studio/components/interfaces/Auth/CustomAuthProviders/CustomAuthProvidersList.tsx
+++ b/apps/studio/components/interfaces/Auth/CustomAuthProviders/CustomAuthProvidersList.tsx
@@ -468,7 +468,7 @@ export const CustomAuthProvidersList = () => {
                           {provider.enabled ? 'Enabled' : 'Disabled'}
                         </Badge>
                       </TableCell>
-                      <TableCell className="max-w-20 bg-surface-100 @[944px]:hover:bg-surface-200 px-6">
+                      <TableCell className="max-w-20 relative px-6">
                         <div className="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center border-l @[944px]:border-l-0">
                           <DropdownMenu>
                             <DropdownMenuTrigger asChild>
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx
index 88699627728..168e6dc199c 100644
--- a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx
+++ b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx
@@ -403,7 +403,7 @@ export const OAuthAppsList = () => {
                           labelFormat="D MMM, YYYY"
                         />
                       </TableCell>
-                      <TableCell className="max-w-20 bg-surface-100 @[944px]:hover:bg-surface-200 px-6">
+                      <TableCell className="max-w-20 relative px-6">
                         <div className="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center border-l @[944px]:border-l-0">
                           <DropdownMenu>
                             <DropdownMenuTrigger asChild>
diff --git a/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx b/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx
index efef982bf33..99d18c684a9 100644
--- a/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx
+++ b/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx
@@ -149,10 +149,10 @@ export const ExtensionRow = ({ extension }: ExtensionRowProps) => {
         </TableCell>
 
         {/*
-          [Joshen] The div child here and all these classes is to properly add a left border
-          to make the sticky column more distinct
+          Left border on the absolute child makes the sticky column more distinct.
+          Sticky positioning/background come from ShadowScrollArea's stickyLastColumn.
         */}
-        <TableCell className="w-20 sticky bg-surface-100 right-0 relative">
+        <TableCell className="w-20 relative">
           <div className="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center border-l">
             {isDisabling ? (
               <Loader2 className="animate-spin" size={16} />
diff --git a/apps/studio/components/interfaces/Database/Extensions/Extensions.tsx b/apps/studio/components/interfaces/Database/Extensions/Extensions.tsx
index 6fa4a6c3913..6ebb730030f 100644
--- a/apps/studio/components/interfaces/Database/Extensions/Extensions.tsx
+++ b/apps/studio/components/interfaces/Database/Extensions/Extensions.tsx
@@ -8,7 +8,6 @@ import {
   InputGroup,
   InputGroupAddon,
   InputGroupInput,
-  ShadowScrollArea,
   Table,
   TableBody,
   TableCell,
@@ -107,51 +106,43 @@ export const Extensions = () => {
         <GenericSkeletonLoader />
       ) : (
         <Card>
-          <ShadowScrollArea stickyLastColumn>
-            <Table>
-              <TableHeader>
+          <Table containerProps={{ stickyLastColumn: true }}>
+            <TableHeader>
+              <TableRow>
+                <TableHead key="name">Name</TableHead>
+                <TableHead key="version" className="w-28">
+                  Version
+                </TableHead>
+                <TableHead key="schema">Schema</TableHead>
+                <TableHead key="description" className="min-w-80">
+                  Description
+                </TableHead>
+                <TableHead key="used-by">Used by</TableHead>
+                <TableHead key="links">Links</TableHead>
+                <TableHead key="enabled" className="px-0">
+                  <div className="bg-200! px-4 w-full h-full flex items-center border-l">
+                    Enabled
+                  </div>
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {[...enabledExtensions, ...disabledExtensions].map((extension) => (
+                <ExtensionRow key={extension.name} extension={extension} />
+              ))}
+              {extensions.length === 0 && (
                 <TableRow>
-                  <TableHead key="name">Name</TableHead>
-                  <TableHead key="version" className="w-28">
-                    Version
-                  </TableHead>
-                  <TableHead key="schema">Schema</TableHead>
-                  <TableHead key="description" className="min-w-80">
-                    Description
-                  </TableHead>
-                  <TableHead key="used-by">Used by</TableHead>
-                  <TableHead key="links">Links</TableHead>
-                  {/*
-                    [Joshen] All these classes are just to make the last column sticky
-                    I reckon we can pull these out into the Table component where we can declare
-                    sticky columns via props, but we can do that if we start to have more tables
-                    in the dashboard with sticky columns
-                  */}
-                  <TableHead key="enabled" className="px-0">
-                    <div className="bg-200! px-4 w-full h-full flex items-center border-l">
-                      Enabled
-                    </div>
-                  </TableHead>
+                  <TableCell colSpan={7}>
+                    <NoSearchResults
+                      className="border-none p-0! bg-transparent"
+                      searchString={filterString}
+                      onResetFilter={() => setFilterString('')}
+                    />
+                  </TableCell>
                 </TableRow>
-              </TableHeader>
-              <TableBody>
-                {[...enabledExtensions, ...disabledExtensions].map((extension) => (
-                  <ExtensionRow key={extension.name} extension={extension} />
-                ))}
-                {extensions.length === 0 && (
-                  <TableRow>
-                    <TableCell colSpan={7}>
-                      <NoSearchResults
-                        className="border-none p-0! bg-transparent"
-                        searchString={filterString}
-                        onResetFilter={() => setFilterString('')}
-                      />
-                    </TableCell>
-                  </TableRow>
-                )}
-              </TableBody>
-            </Table>
-          </ShadowScrollArea>
+              )}
+            </TableBody>
+          </Table>
         </Card>
       )}
     </>
diff --git a/packages/ui/src/components/ShadowScrollArea/index.tsx b/packages/ui/src/components/ShadowScrollArea/index.tsx
index 46f5e73d611..cfe489176cf 100644
--- a/packages/ui/src/components/ShadowScrollArea/index.tsx
+++ b/packages/ui/src/components/ShadowScrollArea/index.tsx
@@ -57,10 +57,15 @@ const ShadowScrollArea = React.forwardRef<HTMLDivElement, ShadowScrollAreaProps>
             'w-full overflow-auto',
             stickyLastColumn && [
               '[&_tr>*:last-child]:sticky [&_tr>*:last-child]:z-38 [&_tr>*:last-child]:right-0',
-              '[&_tr:hover>*:last-child]:bg-transparent',
-              '[&_th>*:last-child]:bg-surface-100',
+              // Sticky cells need an opaque base. `bg-surface-200` / `--muted` is alpha-based,
+              // so using it alone lets scrolled row content show through on hover. Keep the
+              // opaque surface-100 base and composite muted via background-image so hover
+              // matches TableRow without becoming transparent.
+              '[&_td:last-child]:bg-surface-100',
+              '[&_tr:hover>td:last-child]:!bg-surface-100',
+              '[&_tr:hover>td:last-child]:![background-image:linear-gradient(var(--background-surface-200),var(--background-surface-200))]',
+              '[&_th:last-child]:bg-200',
               stickyColumnShadow,
-              hasHorizontalScroll && '[&_tr:hover>td:last-child]:!bg-surface-200',
             ],
             canScrollRight &&
               '[&_td]:before:opacity-100 [&_tr>*:last-child]:before:opacity-100 [&_th:last-child]:before:opacity-100',