diff --git a/frontend/app/app.less b/frontend/app/app.less
index 67560f565..3f1439bbb 100644
--- a/frontend/app/app.less
+++ b/frontend/app/app.less
@@ -22,17 +22,17 @@ body {
 }
 
 *::-webkit-scrollbar-track {
-    background-color: var(--scrollbar-background-color) !important;
+    background-color: var(--scrollbar-background-color);
 }
 
 *::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar-thumb-color) !important;
+    background-color: var(--scrollbar-thumb-color);
     border-radius: 4px;
     margin: 0 1px 0 1px;
 }
 
 *::-webkit-scrollbar-thumb:hover {
-    background-color: var(--scrollbar-thumb-hover-color) !important;
+    background-color: var(--scrollbar-thumb-hover-color);
 }
 
 .flex-spacer {
@@ -61,3 +61,18 @@ body {
     --os-handle-bg-hover: var(--scrollbar-thumb-hover-color);
     --os-handle-bg-active: var(--scrollbar-thumb-active-color);
 }
+
+.scrollbar-hide-until-hover {
+    *::-webkit-scrollbar-thumb,
+    *::-webkit-scrollbar-track {
+        display: none;
+    }
+
+    *::-webkit-scrollbar-corner {
+        display: none;
+    }
+
+    *:hover::-webkit-scrollbar-thumb {
+        display: block;
+    }
+}
diff --git a/frontend/app/block/block.less b/frontend/app/block/block.less
index 5550eda0a..80c95f6f4 100644
--- a/frontend/app/block/block.less
+++ b/frontend/app/block/block.less
@@ -12,7 +12,6 @@
     min-height: 0;
     position: relative;
     border-radius: 8px;
-    background-color: rgba(255, 255, 255, 0.1);
 
     .block-frame-icon {
         margin-right: 0.5em;
@@ -56,117 +55,145 @@
     }
 
     &.block-frame-default {
-        border: 2px solid transparent;
+        position: relative;
+        padding: 2px;
+
+        .block-frame-default-inner {
+            background-color: rgba(255, 255, 255, 0.05);
+            width: 100%;
+            height: 100%;
+            border-radius: 8px;
+            display: flex;
+            flex-direction: column;
+
+            .block-frame-default-header {
+                display: flex;
+                height: 34px;
+                padding: 4px 0 4px 10px;
+                align-items: center;
+                gap: 8px;
+                align-self: stretch;
+                font: var(--header-font);
+                background-color: rgba(255, 255, 255, 0.1);
+                border-radius: 8px 8px 0 0;
+
+                .block-frame-default-header-iconview {
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                    color: var(--main-text-color);
+
+                    .block-frame-preicon-button {
+                        opacity: 0.7;
+                        cursor: pointer;
+
+                        &:hover {
+                            opacity: 1;
+                        }
+                    }
+
+                    .block-frame-view-icon {
+                        font-size: var(--header-icon-size);
+                        opacity: 0.5;
+                        width: var(--header-icon-width);
+                        i {
+                            margin-right: 0;
+                        }
+                    }
+
+                    .block-frame-view-type {
+                        line-height: 12px;
+                        font-weight: 700;
+                    }
+
+                    .block-frame-blockid {
+                        opacity: 0.5;
+                    }
+                }
+
+                .block-frame-text {
+                    font: var(--fixed-font);
+                    font-size: 11px;
+                    opacity: 0.7;
+                }
+
+                .block-frame-end-icons {
+                    display: flex;
+                    align-items: center;
+
+                    .block-frame-endicon-button {
+                        opacity: 0.7;
+                        cursor: pointer;
+                        padding: 4px 6px;
+
+                        &:hover {
+                            opacity: 1;
+                        }
+                    }
+
+                    .block-frame-settings {
+                        display: flex;
+                        width: 24px;
+                        padding: 6px;
+                        justify-content: center;
+                        align-items: center;
+                        opacity: 0.5;
+                        cursor: pointer;
+
+                        &:hover {
+                            opacity: 1;
+                        }
+                    }
+
+                    .block-frame-default-close {
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        opacity: 0.5;
+                        font-size: 11px;
+                        width: 24px;
+                        padding: 4px 6px;
+                        cursor: pointer;
+
+                        &:hover {
+                            opacity: 1;
+                        }
+                    }
+                }
+            }
+
+            .block-frame-preview {
+                background-color: rgba(0, 0, 0, 0.7);
+                width: 100%;
+                flex-grow: 1;
+                border-bottom-left-radius: 8px;
+                border-bottom-right-radius: 8px;
+            }
+        }
+
+        .block-mask {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border: 2px solid transparent;
+            pointer-events: none;
+            padding: 2px;
+            border-radius: 8px;
+        }
 
         &.block-focused {
-            border: 2px solid var(--accent-color);
+            .block-mask {
+                border: 2px solid var(--accent-color);
+            }
 
             &.block-no-highlight,
             &.block-preview {
-                border: 2px solid transparent;
-            }
-        }
-
-        .block-frame-default-header {
-            display: flex;
-            height: 34px;
-            padding: 4px 0 4px 10px;
-            align-items: center;
-            gap: 8px;
-            align-self: stretch;
-            font: var(--header-font);
-            background-color: #262626;
-            border-radius: 8px 8px 0 0;
-
-            .block-frame-default-header-iconview {
-                display: flex;
-                align-items: center;
-                gap: 8px;
-                color: var(--main-text-color);
-
-                .block-frame-preicon-button {
-                    opacity: 0.7;
-                    cursor: pointer;
-
-                    &:hover {
-                        opacity: 1;
-                    }
-                }
-
-                .block-frame-view-icon {
-                    font-size: var(--header-icon-size);
-                    opacity: 0.5;
-                    width: var(--header-icon-width);
-                    i {
-                        margin-right: 0;
-                    }
-                }
-
-                .block-frame-view-type {
-                    line-height: 12px;
-                    font-weight: 700;
-                }
-
-                .block-frame-blockid {
-                    opacity: 0.5;
-                }
-            }
-
-            .block-frame-text {
-                font: var(--fixed-font);
-                font-size: 11px;
-                opacity: 0.7;
-            }
-
-            .block-frame-end-icons {
-                display: flex;
-                align-items: center;
-
-                .block-frame-endicon-button {
-                    opacity: 0.7;
-                    cursor: pointer;
-                    padding: 4px 6px;
-
-                    &:hover {
-                        opacity: 1;
-                    }
-                }
-
-                .block-frame-settings {
-                    display: flex;
-                    width: 24px;
-                    padding: 6px;
-                    justify-content: center;
-                    align-items: center;
-                    opacity: 0.5;
-                    cursor: pointer;
-
-                    &:hover {
-                        opacity: 1;
-                    }
-                }
-
-                .block-frame-default-close {
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    opacity: 0.5;
-                    font-size: 11px;
-                    width: 24px;
-                    padding: 4px 6px;
-                    cursor: pointer;
-
-                    &:hover {
-                        opacity: 1;
-                    }
+                .block-mask {
+                    border: 2px solid rgba(255, 255, 255, 0.1);
                 }
             }
         }
     }
-
-    .block-frame-preview {
-        background-color: var(--main-bg-color);
-        width: 100%;
-        flex-grow: 1;
-    }
 }
diff --git a/frontend/app/block/block.tsx b/frontend/app/block/block.tsx
index 21962c555..a470b04d9 100644
--- a/frontend/app/block/block.tsx
+++ b/frontend/app/block/block.tsx
@@ -293,24 +293,27 @@ const BlockFrame_Default_Component = ({
             ref={blockModel?.blockRef}
             style={style}
         >
-            <div
-                className="block-frame-default-header"
-                ref={layoutModel?.dragHandleRef}
-                onContextMenu={(e) => handleHeaderContextMenu(e, blockData, viewModel, layoutModel?.onClose)}
-            >
-                <div className="block-frame-default-header-iconview">
-                    {preIconButtonElem}
-                    <div className="block-frame-view-icon">{getBlockHeaderIcon(viewIcon, blockData)}</div>
-                    <div className="block-frame-view-type">{blockViewToName(blockData?.view)}</div>
-                    {settingsConfig?.blockheader?.showblockids && (
-                        <div className="block-frame-blockid">[{blockId.substring(0, 8)}]</div>
-                    )}
+            <div className="block-mask"></div>
+            <div className="block-frame-default-inner">
+                <div
+                    className="block-frame-default-header"
+                    ref={layoutModel?.dragHandleRef}
+                    onContextMenu={(e) => handleHeaderContextMenu(e, blockData, viewModel, layoutModel?.onClose)}
+                >
+                    <div className="block-frame-default-header-iconview">
+                        {preIconButtonElem}
+                        <div className="block-frame-view-icon">{getBlockHeaderIcon(viewIcon, blockData)}</div>
+                        <div className="block-frame-view-type">{blockViewToName(blockData?.view)}</div>
+                        {settingsConfig?.blockheader?.showblockids && (
+                            <div className="block-frame-blockid">[{blockId.substring(0, 8)}]</div>
+                        )}
+                    </div>
+                    {util.isBlank(viewText) ? null : <div className="block-frame-text">{viewText}</div>}
+                    <div className="flex-spacer"></div>
+                    <div className="block-frame-end-icons">{endIconsElem}</div>
                 </div>
-                {util.isBlank(viewText) ? null : <div className="block-frame-text">{viewText}</div>}
-                <div className="flex-spacer"></div>
-                <div className="block-frame-end-icons">{endIconsElem}</div>
+                {preview ? <div className="block-frame-preview" /> : children}
             </div>
-            {preview ? <div className="block-frame-preview" /> : children}
         </div>
     );
 };
diff --git a/frontend/app/tab/tab.less b/frontend/app/tab/tab.less
index 443b190f6..77f9a2fad 100644
--- a/frontend/app/tab/tab.less
+++ b/frontend/app/tab/tab.less
@@ -5,7 +5,7 @@
     position: absolute;
     width: 130px;
     height: 100%;
-    padding: 6px 3px;
+    padding: 6px 3px 0px;
     box-sizing: border-box;
     font-weight: bold;
     color: var(--secondary-text-color);
diff --git a/frontend/app/tab/tabbar.less b/frontend/app/tab/tabbar.less
index 376244162..797c121d7 100644
--- a/frontend/app/tab/tabbar.less
+++ b/frontend/app/tab/tabbar.less
@@ -10,7 +10,7 @@
     .tab-bar {
         position: relative; // Needed for absolute positioning of child tabs
         margin-left: 100px;
-        height: 40px;
+        height: 33px;
         // 36 is the width of add tab button
         // 100 is offset from the left, for macOS window controls and dragging
         // 50 right offset for dragging
diff --git a/frontend/app/theme.less b/frontend/app/theme.less
index af5d7d998..6d0b06c78 100644
--- a/frontend/app/theme.less
+++ b/frontend/app/theme.less
@@ -19,10 +19,11 @@
     --warning-color: rgb(224, 185, 86);
     --success-color: rgb(78, 154, 6);
     --hover-bg-color: rgba(255, 255, 255, 0.1);
+    --block-bg-color: rgba(255, 255, 255, 0.05);
 
     /* scrollbar colors */
-    --scrollbar-background-color: var(--main-bg-color);
-    --scrollbar-thumb-color: rgba(255, 255, 255, 0.3);
+    --scrollbar-background-color: transparent;
+    --scrollbar-thumb-color: rgba(255, 255, 255, 0.15);
     --scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.5);
     --scrollbar-thumb-active-color: rgba(255, 255, 255, 0.6);
 
diff --git a/frontend/app/view/preview.tsx b/frontend/app/view/preview.tsx
index 476024b82..ecd6f7355 100644
--- a/frontend/app/view/preview.tsx
+++ b/frontend/app/view/preview.tsx
@@ -399,7 +399,7 @@ function PreviewView({ blockId, model }: { blockId: string; model: PreviewModel
     }, 10);
 
     return (
-        <div ref={ref} className="full-preview">
+        <div ref={ref} className="full-preview scrollbar-hide-until-hover">
             <DirNav cwdAtom={fileNameAtom} />
             {specializedView}
         </div>
diff --git a/frontend/app/view/term/term.less b/frontend/app/view/term/term.less
index 424bb22ec..276dd694d 100644
--- a/frontend/app/view/term/term.less
+++ b/frontend/app/view/term/term.less
@@ -107,4 +107,28 @@
             }
         }
     }
+
+    .terminal {
+        *::-webkit-scrollbar {
+            width: 4px;
+            height: 4px;
+        }
+
+        *::-webkit-scrollbar-track {
+            background-color: var(--scrollbar-background-color);
+        }
+
+        *::-webkit-scrollbar-thumb {
+            display: none;
+            background-color: var(--scrollbar-thumb-color);
+            border-radius: 4px;
+            margin: 0 1px 0 1px;
+        }
+
+        &:hover {
+            *::-webkit-scrollbar-thumb {
+                display: block;
+            }
+        }
+    }
 }