diff --git a/src/app/app.less b/src/app/app.less
index 0b4e36bd..641e819f 100644
--- a/src/app/app.less
+++ b/src/app/app.less
@@ -18,10 +18,14 @@ body {
     font-size: 12.5px;
     font-weight: 300;
     line-height: 20px;
-    background: @base-background-transparent;
+    background: @base-background;
     color: @base-color;
 }
 
+body.is-dev {
+    background-color: @base-background-dev;
+}
+
 textarea {
     overflow: hidden;
     font-family: "Martian Mono", sans-serif;
@@ -39,8 +43,6 @@ svg.icon {
     display: inline-block;
 }
 
-// styles.less
-
 .hoverEffect {
     &:hover {
         cursor: pointer;
@@ -51,19 +53,32 @@ svg.icon {
 }
 
 .hideScrollbarUntillHover {
-    &::-webkit-scrollbar {
-        width: 0;
-    }
-    &:hover::-webkit-scrollbar {
-        width: 4px;
+    overflow: hidden;
+    &:hover,
+    &:focus,
+    &:focus-within {
+        overflow: auto;
     }
 }
 
+*::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+}
+
+*::-webkit-scrollbar-track {
+    background-color: @scrollbar-background !important;
+}
+
+*::-webkit-scrollbar-thumb {
+    background-color: @scrollbar-thumb !important;
+}
+
 .glow {
     &:focus,
     &:hover {
-        border: 1px solid rgba(@prompt-green, 0.8) !important;
-        box-shadow: 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
+        border: 1px solid @background-session-components !important;
+        box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5) inset, 0px 0px 2px rgba(255, 255, 255, 0.2) inset;
     }
 }
 
@@ -73,6 +88,32 @@ svg.icon {
     text-overflow: ellipsis;
 }
 
+.dropdown,
+.button {
+    display: inline-block;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    background-color: @button-background;
+    color: @prompt-green;
+    .hoverEffect;
+    &:hover {
+        color: @prompt-green;
+    }
+    &.disabled {
+        color: fade(@disabled-color, 60%);
+        background: @disabled-background;
+        cursor: initial;
+        &:hover {
+            box-shadow: none;
+        }
+    }
+}
+.dropdown {
+    padding-left: 0.5rem;
+    outline: none !important;
+}
+
 #title-bar {
     -webkit-app-region: drag;
     height: 30px;
@@ -88,20 +129,6 @@ svg.icon {
     }
 }
 
-body::-webkit-scrollbar {
-    display: none;
-}
-
-*::-webkit-scrollbar {
-    background-color: #777;
-    width: 5px;
-    height: 5px;
-}
-
-*::-webkit-scrollbar-thumb {
-    background: white;
-}
-
 input[type="checkbox"] {
     cursor: pointer;
 }
diff --git a/src/app/line/linecomps.tsx b/src/app/line/linecomps.tsx
index d3e9c9f0..f398d7c4 100644
--- a/src/app/line/linecomps.tsx
+++ b/src/app/line/linecomps.tsx
@@ -41,110 +41,6 @@ import "./lines.less";
 dayjs.extend(localizedFormat);
 
 type OV<V> = mobx.IObservableValue<V>;
-type OArr<V> = mobx.IObservableArray<V>;
-type OMap<K, V> = mobx.ObservableMap<K, V>;
-
-type RendererComponentProps = {
-    screen: LineContainerModel;
-    line: LineType;
-    width: number;
-    staticRender: boolean;
-    visible: OV<boolean>;
-    onHeightChange: LineHeightChangeCallbackType;
-    collapsed: boolean;
-};
-type RendererComponentType = {
-    new (props: RendererComponentProps): React.Component<RendererComponentProps, {}>;
-};
-
-function getShortVEnv(venvDir: string): string {
-    if (isBlank(venvDir)) {
-        return "";
-    }
-    let lastSlash = venvDir.lastIndexOf("/");
-    if (lastSlash == -1) {
-        return venvDir;
-    }
-    return venvDir.substr(lastSlash + 1);
-}
-
-function makeFullRemoteRef(ownerName: string, remoteRef: string, name: string): string {
-    if (isBlank(ownerName) && isBlank(name)) {
-        return remoteRef;
-    }
-    if (!isBlank(ownerName) && isBlank(name)) {
-        return ownerName + ":" + remoteRef;
-    }
-    if (isBlank(ownerName) && !isBlank(name)) {
-        return remoteRef + ":" + name;
-    }
-    return ownerName + ":" + remoteRef + ":" + name;
-}
-
-function getRemoteStr(rptr: RemotePtrType): string {
-    if (rptr == null || isBlank(rptr.remoteid)) {
-        return "(invalid remote)";
-    }
-    let username = isBlank(rptr.ownerid) ? null : GlobalModel.resolveUserIdToName(rptr.ownerid);
-    let remoteRef = GlobalModel.resolveRemoteIdToRef(rptr.remoteid);
-    let fullRef = makeFullRemoteRef(username, remoteRef, rptr.name);
-    return fullRef;
-}
-
-function replaceHomePath(path: string, homeDir: string): string {
-    if (path == homeDir) {
-        return "~";
-    }
-    if (path.startsWith(homeDir + "/")) {
-        return "~" + path.substr(homeDir.length);
-    }
-    return path;
-}
-
-function getCwdStr(remote: RemoteType, state: Record<string, string>): string {
-    if (state == null || isBlank(state.cwd)) {
-        return "~";
-    }
-    let cwd = state.cwd;
-    if (remote && remote.remotevars.home) {
-        cwd = replaceHomePath(cwd, remote.remotevars.home);
-    }
-    return cwd;
-}
-
-@mobxReact.observer
-class LineAvatar extends React.Component<{ line: LineType; cmd: Cmd; onRightClick?: (e: any) => void }, {}> {
-    render() {
-        let { line, cmd } = this.props;
-        let lineNumStr = (line.linenumtemp ? "~" : "") + String(line.linenum);
-        let status = cmd != null ? cmd.getStatus() : "done";
-        let rtnstate = cmd != null ? cmd.getRtnState() : false;
-        let isComment = line.linetype == "text";
-        return (
-            <div
-                onContextMenu={this.props.onRightClick}
-                className={cn(
-                    "avatar",
-                    "num-" + lineNumStr.length,
-                    "status-" + status,
-                    { ephemeral: line.ephemeral },
-                    { rtnstate: rtnstate }
-                )}
-            >
-                {lineNumStr}
-                <If condition={status == "hangup" || status == "error"}>
-                    <i className="fa-sharp fa-solid fa-triangle-exclamation status-icon" />
-                </If>
-                <If condition={status == "detached"}>
-                    <i className="fa-sharp fa-solid fa-rotate status-icon" />
-                </If>
-                <If condition={isComment}>
-                    <i className="fa-sharp fa-solid fa-comment comment-icon" />
-                </If>
-            </div>
-        );
-    }
-}
 
 @mobxReact.observer
 class SmallLineAvatar extends React.Component<{ line: LineType; cmd: Cmd; onRightClick?: (e: any) => void }, {}> {
diff --git a/src/app/line/lines.less b/src/app/line/lines.less
index 150830e4..4f731058 100644
--- a/src/app/line/lines.less
+++ b/src/app/line/lines.less
@@ -9,16 +9,6 @@
         flex-direction: column;
         flex-grow: 1;
         margin-left: 10px;
-
-        .text {
-            color: #ddd;
-        }
-    }
-}
-
-.line.line-selected {
-    &.line-focused {
-        outline-left: 3px solid blue;
     }
 }
 
@@ -443,11 +433,26 @@
 .lines {
     display: flex;
     flex-direction: column;
-    overflow-y: auto;
-    padding: 10px 0 10px 0;
+    overflow: auto;
+    padding: 10px 0;
     flex-grow: 1;
     position: relative;
 
+    &::-webkit-scrollbar-thumb {
+        background-color: transparent !important;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: transparent !important;
+    }
+
+    &:hover,
+    &:focus,
+    &:focus-within {
+        &::-webkit-scrollbar-thumb {
+            background-color: @scrollbar-thumb !important;
+        }
+    }
+
     .line:nth-child(2) {
         padding-top: 1px;
     }
@@ -459,7 +464,6 @@
     .line-sep {
         display: flex;
         align-items: center;
-
         color: #aaa;
     }
 
diff --git a/src/app/sidebar/sidebar.less b/src/app/sidebar/sidebar.less
index e00bed46..610d70a7 100644
--- a/src/app/sidebar/sidebar.less
+++ b/src/app/sidebar/sidebar.less
@@ -4,7 +4,6 @@
     padding: 0;
     width: 20rem;
     min-width: 20rem;
-    overflow-x: hidden;
     display: flex;
     flex-direction: column;
     position: relative;
@@ -51,7 +50,6 @@
 
     .middle {
         max-height: calc(100vh - 32em);
-        overflow-y: auto;
         padding: 8px 6px;
         border-bottom: 1px solid @base-border;
         .item {
@@ -254,7 +252,3 @@
         }
     }
 }
-
-.is-dev .main-sidebar {
-    background-color: @base-background-dev;
-}
diff --git a/src/app/workspace/cmdinput/cmdInput.less b/src/app/workspace/cmdinput/cmdInput.less
index b5f4fde5..a9eaeb9a 100644
--- a/src/app/workspace/cmdinput/cmdInput.less
+++ b/src/app/workspace/cmdinput/cmdInput.less
@@ -8,7 +8,7 @@
     position: absolute;
     bottom: 16px;
     right: 16px;
-    width: calc(100% - 32px);
+    width: calc(100% - 28px);
     padding: 12px;
     z-index: 100;
     background: @background-session-components;
@@ -87,12 +87,6 @@
             padding: 1em 2px;
         }
 
-        textarea::-webkit-scrollbar {
-            width: 0;
-            height: 0;
-            display: none;
-        }
-
         textarea {
             color: @term-bright-white;
             background-color: transparent;
@@ -141,7 +135,7 @@
                 border-radius: 50%;
             }
             .icon.disabled {
-                fill: @disabled;
+                fill: @disabled-background;
                 cursor: default;
             }
             .cmd-btn {
diff --git a/src/app/workspace/cmdinput/textareainput.tsx b/src/app/workspace/cmdinput/textareainput.tsx
index 280856d7..238d3fce 100644
--- a/src/app/workspace/cmdinput/textareainput.tsx
+++ b/src/app/workspace/cmdinput/textareainput.tsx
@@ -534,7 +534,7 @@ class TextAreaInput extends React.Component<{ onHeightChange: () => void }, {}>
         if (activeScreen != null) {
             activeScreen.focusType.get(); // for reaction
         }
-        let computedInnerHeight = (displayLines + 1) * GlobalModel.termFontSize.get();
+        let computedInnerHeight = (displayLines + 1) * GlobalModel.termFontSize.get() + 4;
         let computedOuterHeight = (displayLines + 2) * GlobalModel.termFontSize.get();
         return (
             <div className="control is-expanded" ref={this.controlRef} style={{ height: computedOuterHeight }}>
diff --git a/src/app/workspace/screen/screenview.less b/src/app/workspace/screen/screenview.less
index de7548ee..e0a93210 100644
--- a/src/app/workspace/screen/screenview.less
+++ b/src/app/workspace/screen/screenview.less
@@ -3,7 +3,6 @@
 .main-content {
     .screen-view {
         flex-grow: 1;
-        border-right: 1px solid #ccc;
         position: relative;
     }
 
diff --git a/src/app/workspace/screen/tabs.less b/src/app/workspace/screen/tabs.less
index 60d25ff6..f0973cce 100644
--- a/src/app/workspace/screen/tabs.less
+++ b/src/app/workspace/screen/tabs.less
@@ -1,10 +1,11 @@
 @import "../../../index.less";
 
 #main .screen-tabs .screen-tab {
+    border-radius: 12px 0px 0px 0px;
+    border-top: 1px solid transparent;
+
     &.is-active {
-        color: @tab-white-text;
-        border-radius: 12px 0px 0px 0px;
-        border-top: 1px solid #58c142;
+        border-color: @prompt-green;
         background: linear-gradient(
             180deg,
             rgba(88, 193, 66, 0.2) 9.34%,
@@ -12,7 +13,7 @@
             rgba(88, 193, 66, 0) 86.79%
         );
     }
-    
+
     &.color-default {
         svg.left-icon path {
             fill: @tab-green;
@@ -83,24 +84,12 @@
 .screen-tabs {
     display: flex;
     flex-direction: row;
-    overflow-x: overlay;
-    overflow-y: visible;
+    overflow-x: hidden;
     align-items: center;
 
-    &::-webkit-scrollbar {
-        display: none;
-        z-index: 5;
-        background-color: #fff;
-        height: 4px;
-        width: 0;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: #777;
-    }
-
-    &.scrolling::-webkit-scrollbar {
-        display: block;
+    &:hover,
+    &:focus {
+        overflow-x: auto;
     }
 
     .screen-tab {
@@ -141,6 +130,7 @@
         }
 
         &:hover {
+            border-color: @prompt-green !important;
             .tab-gear {
                 display: block;
             }
diff --git a/src/app/workspace/screen/tabs.tsx b/src/app/workspace/screen/tabs.tsx
index f316f055..59c7f39c 100644
--- a/src/app/workspace/screen/tabs.tsx
+++ b/src/app/workspace/screen/tabs.tsx
@@ -129,7 +129,7 @@ class ScreenTabs extends React.Component<{ session: Session }, {}> {
                 onClick={() => this.handleSwitchScreen(screen.screenId)}
                 onContextMenu={(event) => this.openScreenSettings(event, screen)}
             >
-                <SquareIcon className="icon left-icon"/>
+                <SquareIcon className="icon left-icon" />
                 <div className="tab-name truncate">
                     {archived}
                     {webShared}
diff --git a/src/app/workspace/workspace.less b/src/app/workspace/workspace.less
index 8d0e48bd..4c035491 100644
--- a/src/app/workspace/workspace.less
+++ b/src/app/workspace/workspace.less
@@ -8,8 +8,9 @@
     &.is-hidden {
         display: none;
     }
+    max-width: calc(100% - 21em);
     background: @background-session;
     border: 1px solid @base-border;
     border-radius: 8px;
-    margin: 0 16px 16px 0;
+    margin-bottom: 1em;
 }
diff --git a/src/index.less b/src/index.less
index 0c04ca23..77056d16 100644
--- a/src/index.less
+++ b/src/index.less
@@ -6,7 +6,13 @@
 @background-session: rgba(13, 13, 13, 0.85);
 @background-session-components: rgba(48, 49, 48, 0.6);
 @prompt-green: rgb(88, 193, 66);
-@disabled: rgba(76, 81, 75, 1);
+@disabled-background: rgba(76, 81, 75, 1);
+@disabled-color: #adadad;
+@scrollbar-background: rgba(21, 23, 21, 1);
+@scrollbar-thumb: rgb(134, 134, 134);
+@button-background: rgb(38, 38, 38);
+@success-green: rgb(38, 97, 26);
+@error-red: #cc0000;
 
 @term-black: #000000;
 @term-red: #cc0000;
diff --git a/src/plugins/code/code.less b/src/plugins/code/code.less
index 3b89a4dd..54101d0b 100644
--- a/src/plugins/code/code.less
+++ b/src/plugins/code/code.less
@@ -1,67 +1,69 @@
 @import "../../index.less";
 
 .code-renderer {
+    .monaco-editor {
+        .monaco-editor-background,
+        .margin-view-overlays {
+            background-color: @base-background !important;
+        }
+        .scrollbar {
+            height: 4px !important;
+            width: 4px !important;
+            .slider {
+                background-color: @scrollbar-thumb !important;
+            }
+        }
+    }
+    .buttonContainer {
+        opacity: 0;
+        transition: opacity 0.2s;
+        position: absolute;
+        padding: 0.5rem;
+        right: 0;
+        bottom: 0;
+        .dropdown,
+        .button {
+            position: relative;
+            font-size: 0.8rem;
+            min-height: 1.5rem;
+            max-height: 1.5rem;
+            margin-right: 0.5rem;
+            line-height: 1rem;
+        }
+        .dropdown {
+            max-width: 7rem;
+        }
+    }
     .scroller {
         padding-top: 10px;
         padding-bottom: 15px;
+        overflow: hidden;
     }
-
-    .monaco-editor .monaco-editor-background {
-        background-color: rgba(255, 255, 255, 0.075) !important;
-    }
-    .monaco-editor .scrollbar {
-        height: 4px !important;
-        width: 4px !important;
-    }
-    .monaco-editor .scrollbar .slider {
-        background-color: rgba(255, 255, 255) !important;
-    }
-
-    .cmd-hints,
-    .dropdown {
-        display: inline-block;
-        position: relative;
-        min-width: 6rem;
-        max-width: 6rem;
-        margin-right: 8px;
-    }
-    .hint-item {
-        border-radius: 4px 4px 0 0;
-        padding: 3px 9px 2px 8px;
-        text-align: center;
+    &:hover {
+        .buttonContainer {
+            opacity: 1;
+        }
+        .scroller {
+            overflow: auto;
+        }
     }
     section {
         transition: height 0.3s ease-in-out;
     }
-    .preview {
-        color: #000;
-        background-color: rgb(200, 200, 200);
-    }
-    .preview:hover {
-        background-color: @term-white !important;
-    }
-    .save-enabled {
-        color: @term-white;
-        background-color: #4e9a06;
-    }
-    .save-disabled {
-        color: rgb(52, 52, 52);
-        background-color: #aaaea7;
-        cursor: default !important;
-    }
-    .save-disabled:hover {
-        background-color: #aaaea7;
-    }
-    .close {
-        color: @term-white;
-        background-color: #9e0000;
-    }
-    .message {
-        color: @term-white;
-        border-radius: 6px;
-        margin-bottom: 1rem;
-        padding: 4px 1rem;
-        max-width: 80vw;
+    .messageContainer {
+        position: absolute;
+        bottom: -3px;
+        left: 14px;
+        .message {
+            background: @success-green;
+            border-radius: 6px;
+            margin-bottom: 1rem;
+            padding: 4px 1rem;
+            max-width: 80vw;
+            &.error {
+                background: @error-red;
+            }
+        }
     }
     .readonly {
         position: absolute;
@@ -93,8 +95,8 @@
     .gutter {
         flex-shrink: 0;
         flex-grow: 0;
-        background: rgb(100, 100, 100);
-        max-width: 4px;
+        background: fade(@prompt-green, 40%);
+        max-width: 3px;
     }
     .gutter-horizontal {
         cursor: col-resize;
@@ -103,10 +105,10 @@
         cursor: row-resize;
     }
     .gutter:hover {
-        background: rgb(155, 155, 155);
+        background: @prompt-green;
     }
     .gutter-dragging:hover {
-        background: rgb(155, 155, 155);
+        background: @prompt-green;
     }
 
     .pane {
@@ -118,10 +120,4 @@
     .pane-dragging {
         overflow: hidden;
     }
-
-    .scrollable {
-        height: 100vh;
-        max-height: 100vh;
-        overflow: auto;
-    }
 }
diff --git a/src/plugins/code/code.tsx b/src/plugins/code/code.tsx
index 778516fb..3a582026 100644
--- a/src/plugins/code/code.tsx
+++ b/src/plugins/code/code.tsx
@@ -359,10 +359,10 @@ class SourceCodeRenderer extends React.Component<
         const { selectedLanguage, isSave, languages, isPreviewerAvailable, showPreview } = this.state;
         let allowEditing = this.getAllowEditing();
         return (
-            <div style={{ position: "absolute", bottom: "-3px", right: "8px" }}>
+            <div className="buttonContainer">
                 {isPreviewerAvailable && (
-                    <div className="cmd-hints" style={{ minWidth: "8rem", maxWidth: "8rem" }}>
-                        <div onClick={this.togglePreview} className={`hint-item preview`}>
+                    <div className="button">
+                        <div onClick={this.togglePreview} className={`preview`}>
                             {`${showPreview ? "hide" : "show"} preview (`}
                             {renderCmdText("P")}
                             {`)`}
@@ -377,11 +377,8 @@ class SourceCodeRenderer extends React.Component<
                     ))}
                 </select>
                 {allowEditing && (
-                    <div className="cmd-hints">
-                        <div
-                            onClick={() => this.doSave()}
-                            className={`hint-item ${isSave ? "save-enabled" : "save-disabled"}`}
-                        >
+                    <div className={`button ${isSave ? "" : "disabled"}`}>
+                        <div onClick={() => this.doSave()}>
                             {`save (`}
                             {renderCmdText("S")}
                             {`)`}
@@ -389,8 +386,8 @@ class SourceCodeRenderer extends React.Component<
                     </div>
                 )}
                 {allowEditing && (
-                    <div className="cmd-hints">
-                        <div onClick={this.doClose} className={`hint-item close`}>
+                    <div className="button">
+                        <div onClick={this.doClose} className={`close`}>
                             {`close (`}
                             {renderCmdText("D")}
                             {`)`}
@@ -402,14 +399,8 @@ class SourceCodeRenderer extends React.Component<
     };
 
     getMessage = () => (
-        <div style={{ position: "absolute", bottom: "-3px", left: "14px" }}>
-            <div
-                className="message"
-                style={{
-                    fontSize: GlobalModel.termFontSize.get(),
-                    background: `${this.state.message.status === "error" ? "red" : "#4e9a06"}`,
-                }}
-            >
+        <div className="messageContainer">
+            <div className={`message ${this.state.message.status === "error" ? "error" : ""}`}>
                 {this.state.message.text}
             </div>
         </div>
diff --git a/src/plugins/terminal/terminal.less b/src/plugins/terminal/terminal.less
index 7875aed7..e0609a8c 100644
--- a/src/plugins/terminal/terminal.less
+++ b/src/plugins/terminal/terminal.less
@@ -2,61 +2,11 @@
 @import "./xterm.less";
 
 .terminal-wrapper {
-    position: relative;
-
-    .term-block {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: transparent;
-        z-index: 10;
-    }
-
-    .xterm-screen {
-        &::-webkit-scrollbar {
-            display: none;
-        }
-    }
-
-    &.focus .xterm {
-        .xterm-screen {
-            overflow-y: auto;
-            overscroll-behavior: contain;
-        }
-
-        .xterm-viewport {
-            overscroll-behavior: contain;
-        }
-    }
-
-    &.focus .xterm-viewport {
-        &::-webkit-scrollbar {
-            background-color: #777;
-            width: 5px;
-            height: 5px;
-        }
-
-        &::-webkit-scrollbar-thumb {
-            background: white;
-        }
-    }
-
     .xterm-viewport {
-        &::-webkit-scrollbar {
-            background-color: #222;
-            width: 5px;
-            height: 5px;
-        }
-
-        &::-webkit-scrollbar-thumb {
-            background: #555;
-        }
+        overflow-y: hidden;
+    }
+    &:hover .xterm-viewport,
+    &:focus-within .xterm-viewport {
+        overflow-y: auto;
     }
 }
-
-body .xterm .xterm-viewport {
-    overflow-y: auto;
-    width: calc(100% + 5px);
-}