diff --git a/src/components/DocumentView/CodeBlock/CodeBlock.tsx b/src/components/DocumentView/CodeBlock/CodeBlock.tsx
index 1867a73bd..409fe6ac4 100644
--- a/src/components/DocumentView/CodeBlock/CodeBlock.tsx
+++ b/src/components/DocumentView/CodeBlock/CodeBlock.tsx
@@ -25,7 +25,7 @@ export async function CodeBlock(props: BlockProps<DocumentBlockCode>) {
     const fullWidth = block.data.fullWidth;
 
     const fullWidthStyle = fullWidth ? 'max-w-4xl' : 'max-w-3xl';
-    const titleRounding = title ? ['rounded-md', 'rounded-ss-none'] : ['rounded-md'];
+    const titleRoundingStyle = title ? ['rounded-md', 'rounded-ss-none'] : ['rounded-md'];
 
     return (
         <div className={tcls('group/codeblock', 'grid', 'grid-flow-col', style, fullWidthStyle)}>
@@ -70,7 +70,7 @@ export async function CodeBlock(props: BlockProps<DocumentBlockCode>) {
                     'opacity-0',
                     'text-xs',
                     '[grid-area:2/1]',
-                    'z-[1]',
+                    'z-[2]',
                     'justify-self-end',
                     'backdrop-blur-md',
                     'leading-none',
@@ -94,17 +94,18 @@ export async function CodeBlock(props: BlockProps<DocumentBlockCode>) {
                     '[grid-area:2/1]',
                     'relative',
                     'overflow-auto',
-                    'linear-mask-util',
                     'bg-light-2',
                     'dark:bg-dark-2',
-                    titleRounding,
+                    'hide-scroll',
+                    titleRoundingStyle,
                 )}
             >
                 <code
                     id={id}
                     className={tcls(
                         'min-w-full',
-                        'table',
+                        'inline-grid',
+                        '[grid-template-columns:auto_1fr]',
                         'py-2',
                         'px-2',
                         '[counter-reset:line]',
@@ -144,12 +145,15 @@ function CodeHighlightLine(props: {
     return (
         <span
             className={tcls(
-                'overflow-hidden',
-                'flex',
-                'flex-row',
+                'grid',
+                '[grid-template-columns:subgrid]',
+                'col-span-2',
                 'relative',
-                'ring-2',
+                'ring-1',
                 'ring-transparent',
+                'hover:ring-dark/2',
+                'hover:z-[1]',
+                'dark:hover:ring-light/2',
                 'rounded',
                 //first child
                 '[&.highlighted:first-child]:rounded-t-md',
@@ -157,6 +161,8 @@ function CodeHighlightLine(props: {
                 //last child
                 '[&.highlighted:last-child]:rounded-b-md',
                 '[&.highlighted:last-child>*]:mb-1',
+                //is only child, dont hover effect line
+                '[&:only-child]:hover:ring-transparent',
                 //select all highlighted
                 '[&.highlighted]:rounded-none',
                 //select first in group
@@ -173,16 +179,20 @@ function CodeHighlightLine(props: {
         >
             {withLineNumbers ? (
                 <span
-                    style={{ width: `${getGutterWidth(block.nodes.length)}ch` }}
                     className={tcls(
-                        'flex',
-                        'flex-row',
                         'text-sm',
                         'text-right',
-                        'justify-end',
+                        'pr-3.5',
+                        'rounded-l',
+                        'pl-2',
                         'sticky',
-                        'left-0',
-                        'rounded-md',
+                        'left-[-3px]',
+                        'bg-gradient-to-r',
+                        'from-80%',
+                        'from-light-2',
+                        'to-transparent',
+                        'dark:from-dark-2',
+                        'dark:to-transparent',
                         withLineNumbers
                             ? [
                                   'before:text-dark/5',
@@ -191,7 +201,16 @@ function CodeHighlightLine(props: {
                                   'dark:before:text-light/4',
 
                                   line.highlighted
-                                      ? ['before:text-dark/6', 'dark:before:text-light/8']
+                                      ? [
+                                            'before:text-dark/6',
+                                            'dark:before:text-light/8',
+                                            'bg-gradient-to-r',
+                                            'from-80%',
+                                            'from-light-3',
+                                            'to-transparent',
+                                            'dark:from-dark-3',
+                                            'dark:to-transparent',
+                                        ]
                                       : null,
                               ]
                             : [],
@@ -261,7 +280,3 @@ function CodeHighlightToken(props: {
 
     return <span style={{ color: colorToCSSVar[token.token.color] }}>{token.token.content}</span>;
 }
-
-function getGutterWidth(lineCount: number) {
-    return Math.max(1, lineCount.toString().length) + 1;
-}
diff --git a/src/components/Search/SearchModal.tsx b/src/components/Search/SearchModal.tsx
index fc32a4c38..bd4100ae2 100644
--- a/src/components/Search/SearchModal.tsx
+++ b/src/components/Search/SearchModal.tsx
@@ -211,7 +211,6 @@ function SearchModalBody(
                             'w-full',
                             'h-12',
                             'p-2',
-                            'pt-3',
                             'focus:outline-none',
                             'bg-transparent',
                             'whitespace-pre-line',
diff --git a/src/components/Search/SearchResults.tsx b/src/components/Search/SearchResults.tsx
index 249552dcd..8dc243f5e 100644
--- a/src/components/Search/SearchResults.tsx
+++ b/src/components/Search/SearchResults.tsx
@@ -176,14 +176,9 @@ export const SearchResults = React.forwardRef(function SearchResults(
                 'max-h-[60vh]',
                 'overflow-auto',
                 'relative',
-                'before:w-full',
-                'before:h-[1px]',
-                'before:fixed',
-                'before:top-12',
-                'before:left-0',
-                'before:bg-dark/2',
-                'before:z-[1]',
-                'dark:before:bg-light/2',
+                'shadow-[0_1px_0_0_inset]',
+                'shadow-dark/2',
+                'dark:shadow-light/2',
             )}
         >
             {children}
diff --git a/src/components/Search/SearchScopeToggle.tsx b/src/components/Search/SearchScopeToggle.tsx
index ab9eb9c10..65c97aa18 100644
--- a/src/components/Search/SearchScopeToggle.tsx
+++ b/src/components/Search/SearchScopeToggle.tsx
@@ -34,15 +34,15 @@ export function SearchScopeToggle(props: { spaceTitle: string }) {
                 'w-[calc(100%-1px)]',
                 'left-[1px]',
                 'top-[0px]',
-                'after:inset-0',
-                'after:bg-gradient-to-b',
-                'after:from-white',
-                'after:to-transparent',
-                'after:from-60%',
-                'after:absolute',
-                'after:top-[0px]',
-                'dark:after:from-dark-4',
-                'dark:after:to-transparent',
+                'bg-gradient-to-b',
+                'from-white',
+                'to-transparent',
+                'from-60%',
+                'dark:from-dark-4',
+                'dark:to-transparent',
+                'shadow-[0_1px_0_0_inset]',
+                'shadow-dark/2',
+                'dark:shadow-light/2',
                 'md:px-6',
                 'md:gap-3',
             )}
diff --git a/src/components/Search/SearchSectionResultItem.tsx b/src/components/Search/SearchSectionResultItem.tsx
index 65c0579b6..819f640ab 100644
--- a/src/components/Search/SearchSectionResultItem.tsx
+++ b/src/components/Search/SearchSectionResultItem.tsx
@@ -27,6 +27,7 @@ export const SearchSectionResultItem = React.forwardRef(function SearchSectionRe
             }}
             className={tcls(
                 'search-section-result-item',
+                '[&:has(+:not(&))]:mb-6',
                 'flex',
                 'flex-col',
                 'pl-6',