diff --git a/.github/workflows/build-helper.yml b/.github/workflows/build-helper.yml
index 8b842f394..ca00cec90 100644
--- a/.github/workflows/build-helper.yml
+++ b/.github/workflows/build-helper.yml
@@ -5,6 +5,8 @@ env:
     NODE_VERSION: "21.5.0"
 jobs:
     runbuild:
+        outputs:
+            WAVETERM_VERSION: ${{ steps.set-version.outputs.WAVETERM_VERSION }}
         strategy:
             matrix:
                 include:
@@ -43,9 +45,10 @@ jobs:
               with:
                   node-version: ${{env.NODE_VERSION}}
                   cache: "yarn"
-            - run: |
+            - id: set-version
+              run: |
                   VERSION=$(node -e 'console.log(require("./version.js"))')
-                  echo "WAVETERM_VERSION=${VERSION:1}" >> $GITHUB_ENV
+                  echo "WAVETERM_VERSION=${VERSION}" >> "$GITHUB_OUTPUT"
             - run: yarn --frozen-lockfile
             - run: ./scripthaus/scripthaus run ${{ matrix.scripthaus }}
             - uses: actions/upload-artifact@v4
@@ -62,6 +65,8 @@ jobs:
               with:
                   merge-multiple: true
                   path: buildtemp
+            - run: |
+                  echo "${{ needs.runbuild.outputs.WAVETERM_VERSION }}" > buildtemp/version.txt
             - run: (cd buildtemp; zip ../waveterm-builds.zip *)
             - run: aws s3 cp waveterm-builds.zip s3://waveterm-github-artifacts/
               env:
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
index b6b1c5829..456593c51 100644
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -45,7 +45,7 @@ jobs:
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
 
             # Initializes the CodeQL tools for scanning.
             - name: Initialize CodeQL
diff --git a/buildres/build-universal.sh b/buildres/build-universal.sh
index f7d33917d..67a1f17cd 100644
--- a/buildres/build-universal.sh
+++ b/buildres/build-universal.sh
@@ -67,12 +67,12 @@ node $SCRIPT_DIR/osx-sign.js
 DEBUG=electron-notarize node $SCRIPT_DIR/osx-notarize.js
 echo "universal app creation success (build/sign/notarize)"
 
-UVERSION=$(node -e "console.log(require('${SCRIPT_DIR}/../version.js'))")
-UPACKAGE_NAME="waveterm-macos-universal-${UVERSION}"
+UVERSION=$(cat $BUILDS_DIR/version.txt)
+DMG_NAME="waveterm-macos-universal-${UVERSION}.dmg"
+ZIP_NAME="Wave-macos-universal-${UVERSION}.zip"
 
 echo "creating universal zip"
 ditto $TEMP_WAVE_DIR_UNIVERSAL $ZIP_DIR/Wave.app
-ZIP_NAME="${UPACKAGE_NAME}.zip"
 cd $ZIP_DIR
 zip -9yqr $ZIP_NAME Wave.app
 mv $ZIP_NAME $BUILDS_DIR/
@@ -80,7 +80,6 @@ cd $SCRIPT_DIR
 
 # Expects create-dmg repo to be cloned in the same parent directory as the waveterm repo.
 echo "creating universal dmg"
-DMG_NAME="${UPACKAGE_NAME}.dmg"
 $SCRIPT_DIR/../../create-dmg/create-dmg \
   --volname "WaveTerm" \
   --window-pos 200 120 \
diff --git a/package.json b/package.json
index 082acd1b5..cb9a83113 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
     "name": "waveterm",
     "author": "Command Line Inc",
     "productName": "Wave",
-    "version": "0.6.1",
+    "version": "v0.6.1",
     "main": "dist/emain.js",
     "license": "Apache-2.0",
     "dependencies": {
@@ -91,4 +91,4 @@
         "webpack-merge": "^5.8.0"
     },
     "scripts": {}
-}
+}
\ No newline at end of file
diff --git a/scripthaus.md b/scripthaus.md
index f3020142b..3b93aafec 100644
--- a/scripthaus.md
+++ b/scripthaus.md
@@ -43,12 +43,13 @@ rm -rf dist/
 rm -rf bin/
 rm -rf build/
 node_modules/.bin/webpack --env prod
+WAVESRV_VERSION=$(node -e 'console.log(require("./version.js"))')
 GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
 (cd waveshell; CGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-darwin.amd64 main-waveshell.go)
 (cd waveshell; CGO_ENABLED=0 GOOS=darwin GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-darwin.arm64 main-waveshell.go)
 (cd waveshell; CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-linux.amd64 main-waveshell.go)
 (cd waveshell; CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-linux.arm64 main-waveshell.go)
-(cd wavesrv; CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflags "-X main.BuildTime=$(date +'%Y%m%d%H%M')" -o ../bin/wavesrv ./cmd)
+(cd wavesrv; CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflags "-X main.BuildTime=$(date +'%Y%m%d%H%M') -X main.WaveVersion=$WAVESRV_VERSION" -o ../bin/wavesrv ./cmd)
 node_modules/.bin/electron-forge make
 ```
 
@@ -59,13 +60,14 @@ rm -rf dist/
 rm -rf bin/
 rm -rf build/
 node_modules/.bin/webpack --env prod
+WAVESRV_VERSION=$(node -e 'console.log(require("./version.js"))')
 GO_LDFLAGS="-s -w -X main.BuildTime=$(date +'%Y%m%d%H%M')"
 (cd waveshell; CGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-darwin.amd64 main-waveshell.go)
 (cd waveshell; CGO_ENABLED=0 GOOS=darwin GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-darwin.arm64 main-waveshell.go)
 (cd waveshell; CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-linux.amd64 main-waveshell.go)
 (cd waveshell; CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -ldflags="$GO_LDFLAGS" -o ../bin/mshell/mshell-v0.4-linux.arm64 main-waveshell.go)
 # adds -extldflags=-static, *only* on linux (macos does not support fully static binaries) to avoid a glibc dependency
-(cd wavesrv; CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflags "-linkmode 'external' -extldflags=-static $GO_LDFLAGS" -o ../bin/wavesrv ./cmd)
+(cd wavesrv; CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflags "-linkmode 'external' -extldflags=-static $GO_LDFLAGS -X main.WaveVersion=$WAVESRV_VERSION" -o ../bin/wavesrv ./cmd)
 node_modules/.bin/electron-forge make
 ```
 
@@ -77,8 +79,9 @@ open out/Wave-darwin-x64/Wave.app
 
 ```bash
 # @scripthaus command build-wavesrv
+WAVESRV_VERSION=$(node -e 'console.log(require("./version.js"))')
 cd wavesrv
-CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflags "-X main.BuildTime=$(date +'%Y%m%d%H%M')" -o ../bin/wavesrv ./cmd
+CGO_ENABLED=1 go build -tags "osusergo,netgo,sqlite_omit_load_extension" -ldflags "-X main.BuildTime=$(date +'%Y%m%d%H%M') -X main.WaveVersion=$WAVESRV_VERSION" -o ../bin/wavesrv ./cmd
 ```
 
 ```bash
diff --git a/src/app/app.less b/src/app/app.less
index c0e80248e..de53b56ce 100644
--- a/src/app/app.less
+++ b/src/app/app.less
@@ -1,14 +1,8 @@
-@import "./common/themes/themes.less";
-
-:root {
-    --fa-style-family: "Font Awesome 6 Sharp";
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
 
-    // these variables are overridden by user settings
-    --termfontfamily: "JetBrains Mono", monospace;
-    --termfontsize: 12px;
-    --termlineheight: 15px;
-    --termpad: 7px; // padding value (scaled to termfontsize)
-}
+@import "./common/themes/themes.less";
+@import "./root.less";
 
 html,
 body {
@@ -17,12 +11,14 @@ body {
     font-size: 12px;
     font-weight: 300;
     line-height: 1.5;
-    background: @base-background-transparent;
-    color: @base-color;
+    background-color: black;
+    color: var(--app-text-color);
 }
 
-body.is-dev {
-    background-color: @base-background-dev;
+body {
+    &.is-dev .sidebar {
+        background-color: var(--app-bg-color-dev);
+    }
 }
 
 textarea {
@@ -31,8 +27,8 @@ textarea {
     font-size: 12px;
     font-weight: 300;
     line-height: 1.5;
-    background: @base-background;
-    color: @base-color;
+    background: var(--app-bg-color);
+    color: var(--app-text-color);
 }
 
 // typography
@@ -53,7 +49,7 @@ textarea {
     font-weight: 500;
     line-height: 20px;
     font-family: @text-s1-font;
-    color: @text-primary;
+    color: var(--app-text-color);
 }
 
 .text-standard {
@@ -88,11 +84,11 @@ textarea {
 }
 
 body a {
-    color: @wave-green;
+    color: var(--app-accent-color);
     cursor: pointer;
     text-decoration: none;
     &:hover {
-        color: @wave-green;
+        color: var(--app-accent-color);
     }
 }
 
@@ -102,7 +98,7 @@ body code {
 }
 
 svg.icon {
-    fill: @base-color;
+    fill: var(--app-text-color);
     width: 100%;
     height: 100%;
     display: inline-block;
@@ -141,19 +137,11 @@ svg.icon {
 }
 
 *::-webkit-scrollbar-track {
-    background-color: @scrollbar-background !important;
+    background-color: var(--scrollbar-thumb-color) !important;
 }
 
 *::-webkit-scrollbar-thumb {
-    background-color: @scrollbar-thumb !important;
-}
-
-.glow {
-    &:focus,
-    &:hover {
-        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;
-    }
+    background-color: var(--scrollbar-thumb-color) !important;
 }
 
 .truncate {
@@ -169,10 +157,10 @@ svg.icon {
     border-radius: 5px;
     cursor: pointer;
     background-color: @button-background !important;
-    color: @wave-green;
+    color: var(--app-accent-color);
     .hoverEffect;
     &:hover {
-        color: @wave-green;
+        color: var(--app-accent-color);
     }
     &.disabled {
         color: fade(@disabled-color, 60%);
@@ -231,6 +219,7 @@ a.a-block {
         display: flex;
         flex-direction: row;
         height: 100%;
+        position: relative;
 
         .history-view,
         .bookmarks-view,
@@ -246,6 +235,17 @@ a.a-block {
             }
             overflow: auto;
         }
+
+        .main-content-bottom-color {
+            position: absolute;
+            width: 100%;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            height: 30%;
+            pointer-events: none;
+            background-color: @main-content-bottom-background;
+        }
     }
 }
 
@@ -255,7 +255,7 @@ a.a-block {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: @term-white;
+    background-color: var(--app-text-color);
     opacity: 0;
     display: flex;
     flex-direction: row;
@@ -316,43 +316,43 @@ a.a-block {
 }
 
 .text-button {
-    color: @term-white;
+    color: var(--app-text-color);
     cursor: pointer;
     background-color: #171717;
     outline: 2px solid #171717;
 
     &:hover,
     &:focus {
-        color: @term-white;
+        color: var(--app-text-color);
         background-color: #333;
         outline: 2px solid #333;
     }
 
     &.connect-button {
-        color: @term-green;
+        color: var(--button-primary-bg-color);
         &:hover {
-            color: @term-green;
+            color: var(--button-primary-bg-color);
         }
     }
 
     &.disconnect-button {
-        color: @term-red;
+        color: var(--button-error-bg-color);
         &:hover {
-            color: @term-red;
+            color: var(--button-error-bg-color);
         }
     }
 
     &.success-button {
-        color: @term-green;
+        color: var(--button-primary-bg-color);
         &:hover {
-            color: @term-green;
+            color: var(--button-primary-bg-color);
         }
     }
 
     &.error-button {
-        color: @term-red;
+        color: var(--button-error-bg-color);
         &:hover {
-            color: @term-red;
+            color: var(--button-error-bg-color);
         }
     }
 
@@ -391,12 +391,12 @@ a.a-block {
     &.active,
     &.active.selected {
         display: block;
-        background-color: @tab-blue !important;
+        background-color: var(--tab-blue) !important;
     }
 
     &.active.selected.fg-focus {
         display: block;
-        background-color: @tab-green !important;
+        background-color: var(--tab-green) !important;
     }
 }
 
@@ -430,12 +430,12 @@ a.a-block {
 }
 
 .load-error-text {
-    color: @term-red;
+    color: var(--tab-red);
     padding-top: 5px;
 }
 
 .plugin-info-text {
-    color: @term-white;
+    color: var(--app-text-color);
     padding-top: 5px;
 }
 
@@ -484,138 +484,138 @@ a.a-block {
 .icon.color-green {
     path,
     circle {
-        fill: @tab-green;
+        fill: var(--tab-green);
     }
 
     i {
-        color: @tab-green;
+        color: var(--tab-green);
     }
 }
 
 .icon.color-red {
     path,
     circle {
-        fill: @tab-red;
+        fill: var(--tab-red);
     }
 
     i {
-        color: @tab-red;
+        color: var(--tab-green);
     }
 }
 
 .icon.color-orange {
     path,
     circle {
-        fill: @tab-orange;
+        fill: var(--tab-orange);
     }
 
     i {
-        color: @tab-orange;
+        color: var(--tab-orange);
     }
 }
 
 .icon.color-blue {
     path,
     circle {
-        fill: @tab-blue;
+        fill: var(--tab-blue);
     }
 
     i {
-        color: @tab-blue;
+        color: var(--tab-blue);
     }
 }
 
 .icon.color-yellow {
     path,
     circle {
-        fill: @tab-yellow;
+        fill: var(--tab-yellow);
     }
 
     i {
-        color: @tab-yellow;
+        color: var(--tab-yellow);
     }
 }
 
 .icon.color-pink {
     path,
     circle {
-        fill: @tab-pink;
+        fill: var(--tab-pink);
     }
 
     i {
-        color: @tab-pink;
+        color: var(--tab-pink);
     }
 }
 
 .icon.color-mint {
     path,
     circle {
-        fill: @tab-mint;
+        fill: var(--tab-mint);
     }
 
     i {
-        color: @tab-mint;
+        color: var(--tab-mint);
     }
 }
 
 .icon.color-cyan {
     path,
     circle {
-        fill: @tab-cyan;
+        fill: var(--tab-cyan);
     }
 
     i {
-        color: @tab-cyan;
+        color: var(--tab-cyan);
     }
 }
 
 .icon.color-violet {
     path,
     circle {
-        fill: @tab-violet;
+        fill: var(--tab-violet);
     }
 
     i {
-        color: @tab-violet;
+        color: var(--tab-violet);
     }
 }
 
 .icon.color-white {
     path,
     circle {
-        fill: @tab-white;
+        fill: var(--tab-white);
     }
 
     i {
-        color: @tab-white;
+        color: var(--tab-white);
     }
 }
 
 .status-icon.status-connected {
     path,
     circle {
-        fill: @status-connected;
+        fill: var(--status-connected-color);
     }
 }
 
 .status-icon.status-connecting {
     path,
     circle {
-        fill: @status-connecting;
+        fill: var(--status-connecting-color);
     }
 }
 
 .status-icon.status-disconnected {
     path,
     circle {
-        fill: @status-disconnected;
+        fill: var(--status-disconnected-color);
     }
 }
 
 .status-icon.status-error {
     path,
     circle {
-        fill: @status-error;
+        fill: var(--status-error-color);
     }
 }
 
@@ -641,7 +641,7 @@ a.a-block {
 }
 
 .view {
-    background-color: @background-session;
+    background-color: var(--session-bg-color);
     flex-grow: 1;
     display: flex;
     flex-direction: column;
@@ -679,12 +679,12 @@ a.a-block {
     }
 
     &.settings-error {
-        color: @term-red;
+        color: var(--term-red);
         margin-top: 20px;
         padding: 10px;
         border-radius: 5px;
         background-color: #200707;
-        border: 1px solid @term-red;
+        border: 1px solid var(--term-red);
         font-weight: bold;
 
         .error-dismiss {
@@ -708,7 +708,7 @@ a.a-block {
         display: flex;
         flex-direction: row;
         align-items: center;
-        color: @term-white;
+        color: var(--app-text-color);
 
         &.settings-clickable {
             cursor: pointer;
@@ -739,37 +739,37 @@ a.a-block {
         }
 
         .tab-color-icon.color-default path {
-            fill: @tab-green;
+            fill: var(--tab-green);
         }
         .tab-color-icon.color-green path {
-            fill: @tab-green;
+            fill: var(--tab-green);
         }
         .tab-color-icon.color-orange path {
-            fill: @tab-orange;
+            fill: var(--tab-orange);
         }
         .tab-color-icon.color-red path {
-            fill: @tab-red;
+            fill: var(--tab-red);
         }
         .tab-color-icon.color-yellow path {
-            fill: @tab-yellow;
+            fill: var(--tab-yellow);
         }
         .tab-color-icon.color-blue path {
-            fill: @tab-blue;
+            fill: var(--tab-blue);
         }
         .tab-color-icon.color-mint path {
-            fill: @tab-mint;
+            fill: var(--tab-mint);
         }
         .tab-color-icon.color-cyan path {
-            fill: @tab-cyan;
+            fill: var(--tab-cyan);
         }
         .tab-color-icon.color-white path {
-            fill: @tab-white;
+            fill: var(--tab-white);
         }
         .tab-color-icon.color-violet path {
-            fill: @tab-violet;
+            fill: var(--tab-violet);
         }
         .tab-color-icon.color-pink path {
-            fill: @tab-pink;
+            fill: var(--tab-pink);
         }
 
         .tab-colors,
@@ -809,7 +809,7 @@ a.a-block {
         .action-text {
             margin-left: 20px;
 
-            color: @term-red;
+            color: var(--term-red);
         }
 
         .settings-share-link {
diff --git a/src/app/app.tsx b/src/app/app.tsx
index d6fca4502..07e66ee74 100644
--- a/src/app/app.tsx
+++ b/src/app/app.tsx
@@ -115,6 +115,7 @@ class App extends React.Component<{}, {}> {
                 onContextMenu={this.handleContextMenu}
             >
                 <div ref={this.mainContentRef} className="main-content">
+                    <div className="main-content-bottom-color" />
                     <MainSideBar parentRef={this.mainContentRef} clientData={clientData} />
                     <ErrorBoundary>
                         <PluginsView />
diff --git a/src/app/appconst.ts b/src/app/appconst.ts
index d8b05e742..6e80ff10c 100644
--- a/src/app/appconst.ts
+++ b/src/app/appconst.ts
@@ -26,6 +26,7 @@ export const ProdServerWsEndpoint = "ws://127.0.0.1:1623";
 export const DevServerEndpoint = "http://127.0.0.1:8090";
 export const DevServerWsEndpoint = "ws://127.0.0.1:8091";
 export const DefaultTermFontSize = 12;
+export const DefaultTermFontFamily = "JetBrains Mono";
 export const MinFontSize = 8;
 export const MaxFontSize = 24;
 export const InputChunkSize = 500;
diff --git a/src/app/bookmarks/bookmarks.less b/src/app/bookmarks/bookmarks.less
index f781a5a3a..17f6fea7c 100644
--- a/src/app/bookmarks/bookmarks.less
+++ b/src/app/bookmarks/bookmarks.less
@@ -1,7 +1,5 @@
-@import "@/common/themes/themes.less";
-
 .bookmarks-view {
-    background-color: @background-session;
+    background-color: var(--session-bg-color);
 
     .close-button {
         position: absolute;
@@ -14,7 +12,7 @@
         svg {
             width: 1.5em;
             height: 1.5em;
-            fill: @base-color;
+            fill: var(--app-text-color);
         }
     }
 
@@ -31,15 +29,15 @@
     .icon {
         width: 1em;
         height: 1em;
-        fill: @base-color;
+        fill: var(--app-text-color);
     }
 
     .bookmarks-list {
-        color: @term-white;
+        color: var(--bookmarks-text-color);
         margin: 4px 10px 5px 5px;
 
         .no-bookmarks {
-            color: @term-white;
+            color: var(--bookmarks-text-color);
             padding: 30px 10px 35px 10px;
             border-bottom: 1px solid white;
         }
@@ -75,21 +73,21 @@
         }
 
         label {
-            color: @term-white;
+            color: var(--bookmarks-text-color);
             margin-bottom: 4px;
         }
 
         textarea {
             width: 80%;
             min-width: 50%;
-            color: @term-white;
-            background-color: @term-black;
+            color: var(--bookmarks-text-color);
+            background-color: var(--bookmarks-textarea-bg-color);
         }
 
         .bookmark-id-div {
             display: none;
             position: absolute;
-            color: @disabled-color;
+            color: var(--bookmarks-disabled-text-color);
             right: 5px;
             bottom: 2px;
             font-size: 0.8em;
@@ -104,7 +102,7 @@
             flex-direction: row;
 
             visibility: hidden;
-            color: @term-white;
+            color: var(--bookmarks-text-color);
 
             .bookmark-control:first-child {
                 margin-left: 0;
@@ -116,7 +114,7 @@
                 padding: 2px;
 
                 &:hover {
-                    color: @term-bright-white;
+                    color: var(--bookmarks-control-hover-color);
                 }
             }
         }
diff --git a/src/app/clientsettings/clientsettings.less b/src/app/clientsettings/clientsettings.less
index e0950e44e..efd548b8e 100644
--- a/src/app/clientsettings/clientsettings.less
+++ b/src/app/clientsettings/clientsettings.less
@@ -1,7 +1,7 @@
 @import "@/common/themes/themes.less";
 
 .clientsettings-view {
-    background-color: @background-session;
+    background-color: var(--session-bg-color);
     flex-grow: 1;
     display: flex;
     flex-direction: column;
@@ -58,12 +58,12 @@
         }
 
         &.settings-error {
-            color: @term-red;
+            color: var(--view-error-color);
             margin-top: 20px;
             padding: 10px;
             border-radius: 5px;
             background-color: #200707;
-            border: 1px solid @term-red;
+            border: 1px solid var(--view-error-color);
             font-weight: bold;
 
             .error-dismiss {
@@ -119,37 +119,37 @@
             }
 
             .tab-color-icon.color-default path {
-                fill: @tab-green;
+                fill: var(--tab-green);
             }
             .tab-color-icon.color-green path {
-                fill: @tab-green;
+                fill: var(--tab-green);
             }
             .tab-color-icon.color-orange path {
-                fill: @tab-orange;
+                fill: var(--tab-orange);
             }
             .tab-color-icon.color-red path {
-                fill: @tab-red;
+                fill: var(--tab-red);
             }
             .tab-color-icon.color-yellow path {
-                fill: @tab-yellow;
+                fill: var(--tab-yellow);
             }
             .tab-color-icon.color-blue path {
-                fill: @tab-blue;
+                fill: var(--tab-blue);
             }
             .tab-color-icon.color-mint path {
-                fill: @tab-mint;
+                fill: var(--tab-mint);
             }
             .tab-color-icon.color-cyan path {
-                fill: @tab-cyan;
+                fill: var(--tab-cyan);
             }
             .tab-color-icon.color-white path {
-                fill: @tab-white;
+                fill: var(--tab-white);
             }
             .tab-color-icon.color-violet path {
-                fill: @tab-violet;
+                fill: var(--tab-violet);
             }
             .tab-color-icon.color-pink path {
-                fill: @tab-pink;
+                fill: var(--tab-pink);
             }
 
             .tab-colors,
@@ -189,7 +189,7 @@
             .action-text {
                 margin-left: 20px;
 
-                color: @term-red;
+                color: var(--view-error-color);
             }
 
             .settings-share-link {
diff --git a/src/app/common/elements/button.less b/src/app/common/elements/button.less
index d2303acc4..f4a537876 100644
--- a/src/app/common/elements/button.less
+++ b/src/app/common/elements/button.less
@@ -15,35 +15,26 @@
     border-radius: 6px;
     height: auto;
 
-    &:hover {
-        color: @term-white;
-    }
-
-    i {
-        fill: rgba(255, 255, 255, 0.12);
-    }
-
     &.primary {
-        color: @term-green;
         background: none;
 
         i {
-            fill: @term-green;
+            fill: var(--button-primary-bg-color);
         }
 
         &.solid {
-            color: @term-bright-white;
-            background: @term-green;
+            color: var(--button-text-color);
+            background: var(--button-primary-bg-color);
             box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
                 0px 0px 0.5px 0px rgba(255, 255, 255, 0.8) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.6) inset;
 
             i {
-                fill: @term-white;
+                fill: var(--app-text-color);
             }
         }
 
         &.outlined {
-            border: 1px solid @term-green;
+            border: 1px solid var(--button-primary-bg-color);
         }
 
         &.ghost {
@@ -51,66 +42,30 @@
         }
 
         &:hover {
-            color: @term-bright-white;
+            color: var(--button-text-color);
         }
     }
 
     &.secondary {
-        color: @term-white;
+        color: var(--app-text-color);
         background: none;
 
         &.solid {
-            background: rgba(255, 255, 255, 0.09);
+            background: var(--button-secondary-bg-color);
             box-shadow: none;
         }
 
         &.outlined {
-            border: 1px solid rgba(255, 255, 255, 0.09);
+            border: 1px solid var(--button-secondary-bg-color);
         }
 
         &.ghost {
             padding: 6px 10px;
 
             i {
-                fill: @term-green;
-            }
-        }
-    }
-
-    &.color-yellow {
-        &.solid {
-            border-color: @warning-yellow;
-            background-color: mix(@warning-yellow, @term-white, 50%);
-            box-shadow: none;
-        }
-
-        &.outlined {
-            color: @warning-yellow;
-            border-color: @warning-yellow;
-            &:hover {
-                color: @term-white;
-                border-color: @term-white;
+                fill: var(--button-primary-bg-color);
             }
         }
-
-        &.ghost {
-        }
-    }
-
-    &.color-red {
-        &.solid {
-            border-color: @term-red;
-            background-color: mix(@term-red, @term-white, 50%);
-            box-shadow: none;
-        }
-
-        &.outlined {
-            color: @term-red;
-            border-color: @term-red;
-        }
-
-        &.ghost {
-        }
     }
 
     &.disabled {
diff --git a/src/app/common/elements/checkbox.less b/src/app/common/elements/checkbox.less
index 82e126b7c..37d4b4b82 100644
--- a/src/app/common/elements/checkbox.less
+++ b/src/app/common/elements/checkbox.less
@@ -12,7 +12,7 @@
         position: relative;
         display: flex;
         align-items: center;
-        color: @term-bright-white;
+        color: var(--checkbox-bg-color);
         transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1);
     }
     input[type="checkbox"] + label > span {
@@ -38,7 +38,7 @@
     }
 
     input[type="checkbox"]:checked + label > span {
-        border: 10px solid @term-green;
+        border: 10px solid var(--button-primary-bg-color);
     }
     input[type="checkbox"]:checked + label > span:before {
         content: "";
@@ -47,8 +47,8 @@
         left: 3px;
         width: 7px;
         height: 12px;
-        border-right: 2px solid #fff;
-        border-bottom: 2px solid #fff;
+        border-right: 2px solid var(--checkbox-check-color);
+        border-bottom: 2px solid var(--checkbox-check-color);
         transform: rotate(45deg);
         transform-origin: 0% 100%;
         animation: checkbox-check 500ms cubic-bezier(0.4, 0, 0.23, 1);
diff --git a/src/app/common/elements/cmdstrcode.less b/src/app/common/elements/cmdstrcode.less
index 2f54d4301..c4b2e2f50 100644
--- a/src/app/common/elements/cmdstrcode.less
+++ b/src/app/common/elements/cmdstrcode.less
@@ -38,7 +38,7 @@
     }
 
     .code-div {
-        background-color: @term-black;
+        background-color: var(--cmdstrcode-bg-color);
         display: flex;
         flex-direction: row;
         min-width: 100px;
@@ -48,10 +48,10 @@
         code {
             flex-shrink: 0;
             min-width: 100px;
-            color: @term-white;
+            color: var(--cmdstrcode-text-color);
             white-space: pre;
             padding: 2px 8px 2px 8px;
-            background-color: @term-black;
+            background-color: var(--cmdstrcode-bg-color);
             font-size: 1em;
             font-family: @fixed-font;
         }
@@ -74,7 +74,7 @@
             width: 20px;
 
             &:hover {
-                color: @term-white;
+                color: var(--cmdstrcode-text-color);
             }
         }
     }
@@ -83,20 +83,3 @@
         visibility: visible !important;
     }
 }
-
-.copied-indicator {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: @term-white;
-    opacity: 0;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    animation-name: fade-in-out;
-    animation-duration: 0.3s;
-}
diff --git a/src/app/common/elements/dropdown.less b/src/app/common/elements/dropdown.less
index 8a6ad050f..b885eb23b 100644
--- a/src/app/common/elements/dropdown.less
+++ b/src/app/common/elements/dropdown.less
@@ -21,7 +21,7 @@
         top: 16px;
         font-size: 12.5px;
         transition: all 0.3s;
-        color: @term-white;
+        color: var(--dropdown-text-color);
         line-height: 10px;
 
         &.float {
@@ -94,11 +94,11 @@
     }
 
     &-error {
-        border-color: @term-red;
+        border-color: var(--dropdown-error-color);
     }
 
     &:focus {
-        border-color: @term-green;
+        border-color: var(--dropdown-focus-color);
     }
 }
 
diff --git a/src/app/common/elements/markdown.less b/src/app/common/elements/markdown.less
index dd776d46f..562b32dab 100644
--- a/src/app/common/elements/markdown.less
+++ b/src/app/common/elements/markdown.less
@@ -1,7 +1,7 @@
 @import "@/common/themes/themes.less";
 
 .markdown {
-    color: @term-white;
+    color: var(--app-text-color);
     font-family: @markdown-font;
     font-size: 14px;
     overflow-wrap: break-word;
@@ -11,8 +11,8 @@
     }
 
     code {
-        background-color: @markdown-highlight;
-        color: @term-white;
+        background-color: var(--markdown-bg-color);
+        color: var(--app-text-color);
         font-family: var(--termfontfamily);
         border-radius: 4px;
     }
@@ -24,13 +24,13 @@
     }
 
     .title {
-        color: @term-white;
+        color: var(--app-text-color);
         margin-top: 16px;
         margin-bottom: 8px;
     }
 
     strong {
-        color: @term-white;
+        color: var(--app-text-color);
     }
 
     a {
@@ -39,7 +39,7 @@
 
     table {
         tr th {
-            color: @term-white;
+            color: var(--app-text-color);
         }
     }
 
@@ -57,19 +57,19 @@
     blockquote {
         margin: 4px 10px 4px 10px;
         border-radius: 3px;
-        background-color: @markdown-highlight;
+        background-color: var(--markdown-bg-color);
         padding: 2px 4px 2px 6px;
     }
 
     pre {
-        background-color: @markdown-highlight;
+        background-color: var(--markdown-bg-color);
         margin: 4px 10px 4px 10px;
         padding: 6px 6px 6px 10px;
         border-radius: 4px;
     }
 
     pre.selected {
-        outline: 2px solid @term-green;
+        outline: 2px solid var(--markdown-outline-color);
     }
 
     .title.is-1 {
diff --git a/src/app/common/elements/status.less b/src/app/common/elements/status.less
index e7d15dd98..9dae11813 100644
--- a/src/app/common/elements/status.less
+++ b/src/app/common/elements/status.less
@@ -13,18 +13,18 @@
     }
 
     .dot.green {
-        background-color: @status-connected;
+        background-color: var(--status-connected-color);
     }
 
     .dot.red {
-        background-color: @status-error;
+        background-color: var(--status-error-color);
     }
 
     .dot.gray {
-        background-color: @status-disconnected;
+        background-color: var(--status-disconnected-color);
     }
 
     .dot.yellow {
-        background-color: @status-connecting;
+        background-color: var(--status-connecting-color);
     }
 }
diff --git a/src/app/common/elements/textfield.less b/src/app/common/elements/textfield.less
index 2354c808f..06ba54ca2 100644
--- a/src/app/common/elements/textfield.less
+++ b/src/app/common/elements/textfield.less
@@ -18,7 +18,7 @@
     }
 
     &.focused {
-        border-color: @term-green;
+        border-color: var(--textfield-focused-border-color);
     }
 
     &.disabled {
@@ -26,7 +26,7 @@
     }
 
     &.error {
-        border-color: @term-red;
+        border-color: var(--textfield-error-border-color);
     }
 
     &-inner {
@@ -42,7 +42,7 @@
             top: 16px;
             font-size: 12.5px;
             transition: all 0.3s;
-            color: @text-secondary;
+            color: var(--textfield-label-color);
             line-height: 10px;
 
             &.float {
@@ -63,7 +63,7 @@
             font-size: 16px;
             outline: none;
             background-color: transparent;
-            color: @term-bright-white;
+            color: var(--textfield-text-color);
             line-height: 20px;
 
             &.offset-left {
diff --git a/src/app/common/elements/textfield.tsx b/src/app/common/elements/textfield.tsx
index a129eb22e..b4b562d6b 100644
--- a/src/app/common/elements/textfield.tsx
+++ b/src/app/common/elements/textfield.tsx
@@ -17,6 +17,7 @@ interface TextFieldProps {
     value?: string;
     className?: string;
     onChange?: (value: string) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     placeholder?: string;
     defaultValue?: string;
     decoration?: TextFieldDecorationProps;
@@ -157,6 +158,7 @@ class TextField extends React.Component<TextFieldProps, TextFieldState> {
                         onChange={this.handleInputChange}
                         onFocus={this.handleFocus}
                         onBlur={this.handleBlur}
+                        onKeyDown={this.props.onKeyDown}
                         placeholder={placeholder}
                         maxLength={maxLength}
                         autoFocus={autoFocus}
diff --git a/src/app/common/elements/toggle.less b/src/app/common/elements/toggle.less
index 81ef1c485..36176c7f8 100644
--- a/src/app/common/elements/toggle.less
+++ b/src/app/common/elements/toggle.less
@@ -20,7 +20,7 @@
         bottom: 0;
         left: 0;
         right: 0;
-        background-color: #333;
+        background-color: var(--toggle-bg-color);
         transition: 0.5s;
         border-radius: 33px;
     }
@@ -32,13 +32,13 @@
         width: 18px;
         left: 2px;
         bottom: 2px;
-        background-color: @term-white;
+        background-color: var(--toggle-thumb-color);
         transition: 0.5s;
         border-radius: 50%;
     }
 
     input:checked + .slider {
-        background-color: @term-green;
+        background-color: var(--toggle-checked-bg-color);
     }
 
     input:checked + .slider:before {
diff --git a/src/app/common/elements/tooltip.less b/src/app/common/elements/tooltip.less
index f37f925c6..7107a1a56 100644
--- a/src/app/common/elements/tooltip.less
+++ b/src/app/common/elements/tooltip.less
@@ -17,7 +17,7 @@
     i {
         display: inline;
         font-size: 13px;
-        fill: @base-color;
+        fill: var(--checkbox-text-color);
         padding-top: 0.2em;
     }
 }
diff --git a/src/app/common/icons/icons.less b/src/app/common/icons/icons.less
index 64b081c8f..2101f55a6 100644
--- a/src/app/common/icons/icons.less
+++ b/src/app/common/icons/icons.less
@@ -75,18 +75,18 @@ The following accounts for a debounce in the status indicator. We will only disp
         visibility: hidden;
     }
     .spin #spinner {
-        stroke: @term-white;
+        stroke: var(--status-indicator-color);
     }
     &.error #indicator {
         visibility: visible;
-        fill: @term-red;
+        fill: var(--status-indicator-error);
     }
     &.success #indicator {
         visibility: visible;
-        fill: @term-green;
+        fill: var(--status-indicator-success);
     }
     &.output #indicator {
         visibility: visible;
-        fill: @term-white;
+        fill: var(--status-indicator-color);
     }
 }
diff --git a/src/app/common/modals/about.less b/src/app/common/modals/about.less
index e6ec8869b..fca8028b7 100644
--- a/src/app/common/modals/about.less
+++ b/src/app/common/modals/about.less
@@ -38,12 +38,12 @@
                     line-height: 20px;
 
                     div:first-child {
-                        color: @term-bright-white;
+                        color: var(--app-text-primary-color);
                         font-size: 14.5px;
                     }
 
                     div:last-child {
-                        color: @term-white;
+                        color: var(--app-text-color);
                         text-align: left;
                     }
                 }
@@ -61,7 +61,7 @@
                     }
 
                     div:first-child + div {
-                        color: @term-white;
+                        color: var(--app-text-color);
                     }
                 }
 
@@ -72,7 +72,7 @@
                         margin-bottom: 5px;
 
                         i {
-                            color: @term-green;
+                            color: var(--status-updated-color);
                         }
                     }
                 }
@@ -80,7 +80,7 @@
                 .status.outdated {
                     div {
                         i {
-                            color: @term-yellow;
+                            color: var(--status-outdated-color);
                         }
                     }
 
@@ -107,7 +107,7 @@
 
             .about-section:last-child {
                 margin-bottom: 24px;
-                color: @term-white;
+                color: var(--app-text-color);
             }
         }
     }
diff --git a/src/app/common/modals/disconnected.less b/src/app/common/modals/disconnected.less
index 7ff50c612..9222ac490 100644
--- a/src/app/common/modals/disconnected.less
+++ b/src/app/common/modals/disconnected.less
@@ -8,7 +8,7 @@
             .modal-content {
                 footer {
                     .footer-text-link {
-                        color: @term-white;
+                        color: var(--app-text-color);
                         cursor: pointer;
                     }
                 }
@@ -31,17 +31,11 @@
                     }
 
                     pre {
-                        color: @term-white;
-                        background-color: @term-black;
+                        color: var(--app-text-color);
+                        background-color: var(--pre-bg-color);
                     }
                 }
             }
         }
-
-        .wave-modal-footer {
-            button:first-child {
-                color: @term-green;
-            }
-        }
     }
 }
diff --git a/src/app/common/modals/editremoteconn.less b/src/app/common/modals/editremoteconn.less
index ff5284250..aec723cfe 100644
--- a/src/app/common/modals/editremoteconn.less
+++ b/src/app/common/modals/editremoteconn.less
@@ -34,7 +34,7 @@
                 gap: 12px;
 
                 .name {
-                    color: @term-bright-white;
+                    color: var(--app-text-primary-color);
                     font-size: 15px;
                     font-weight: 500;
                     line-height: 20px;
diff --git a/src/app/common/modals/linesettings.less b/src/app/common/modals/linesettings.less
index 23cb8d497..70f23439c 100644
--- a/src/app/common/modals/linesettings.less
+++ b/src/app/common/modals/linesettings.less
@@ -16,7 +16,7 @@
             width: 100%;
 
             .settings-input .hotkey {
-                color: @text-secondary;
+                color: var(--hotkey-text-color);
             }
         }
     }
diff --git a/src/app/common/modals/tos.less b/src/app/common/modals/tos.less
index 6327a7a74..11280b405 100644
--- a/src/app/common/modals/tos.less
+++ b/src/app/common/modals/tos.less
@@ -25,7 +25,7 @@
                 }
 
                 .modal-subtitle {
-                    color: @term-white;
+                    color: var(--app-text-color);
                     text-align: center;
 
                     font-style: normal;
@@ -56,13 +56,13 @@
                         flex: 1 0 0;
 
                         .item-title {
-                            color: @term-bright-white;
+                            color: var(--app-text-primary-color);
                             font-style: normal;
                             line-height: 20px;
                         }
 
                         .item-text {
-                            color: @term-white;
+                            color: var(--app-text-color);
                             font-style: normal;
                             line-height: 20px;
                         }
diff --git a/src/app/common/modals/viewremoteconndetail.less b/src/app/common/modals/viewremoteconndetail.less
index f59838f6f..c730f8abf 100644
--- a/src/app/common/modals/viewremoteconndetail.less
+++ b/src/app/common/modals/viewremoteconndetail.less
@@ -34,7 +34,7 @@
                 }
 
                 .rconndetail-name {
-                    color: @term-bright-white;
+                    color: var(--app-text-primary-color);
                     font-size: 15px;
                     font-weight: 500;
                     line-height: 20px;
@@ -73,7 +73,7 @@
                         display: flex;
                         flex-direction: row;
                         align-items: center;
-                        color: @term-white;
+                        color: var(--app-text-color);
                     }
                 }
 
diff --git a/src/app/common/prompt/prompt.less b/src/app/common/prompt/prompt.less
index 0a59057fd..543b687ad 100644
--- a/src/app/common/prompt/prompt.less
+++ b/src/app/common/prompt/prompt.less
@@ -11,7 +11,7 @@
         vertical-align: middle;
         width: 1.2em;
         height: 1.2em;
-        fill: @wave-green;
+        fill: var(--app-accent-color);
     }
 
     i {
@@ -19,57 +19,57 @@
     }
 
     .term-prompt-branch {
-        color: @term-white;
+        color: var(--prompt-white);
     }
 
     .term-prompt-python {
-        color: @term-bright-magenta;
+        color: var(--prompt-bright-magenta);
     }
 
     .term-prompt-remote {
     }
 
     .term-prompt-remote {
-        color: @term-bright-green;
+        color: var(--prompt-bright-green);
 
         &.color-green {
-            color: @term-bright-green;
+            color: var(--prompt-bright-green);
         }
 
         &.color-red {
-            color: @term-bright-red;
+            color: var(--prompt-bright-red);
         }
 
         &.color-blue {
-            color: @term-bright-blue;
+            color: var(--prompt-bright-blue);
         }
 
         &.color-yellow {
-            color: @term-bright-yellow;
+            color: var(--prompt-bright-yellow);
         }
 
         &.color-magenta {
-            color: @term-bright-magenta;
+            color: var(--prompt-bright-magenta);
         }
 
         &.color-cyan {
-            color: @term-bright-cyan;
+            color: var(--prompt-bright-cyan);
         }
 
         &.color-white {
-            color: @term-bright-white;
+            color: var(--prompt-bright-white);
         }
 
         &.color-orange {
-            color: @tab-orange;
+            color: var(--prompt-orange);
         }
     }
 
     .term-prompt-cwd {
-        color: @term-bright-green;
+        color: var(--prompt-bright-green);
     }
 
     .term-prompt-end {
-        color: @term-bright-green;
+        color: var(--prompt-bright-green);
     }
 }
diff --git a/src/app/common/themes/themes.less b/src/app/common/themes/themes.less
index b1b298581..747c50501 100644
--- a/src/app/common/themes/themes.less
+++ b/src/app/common/themes/themes.less
@@ -1,7 +1,10 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
 @base-color: #eceeec;
 @base-background: rgba(21, 23, 21, 1);
-@base-background-transparent: rgba(21, 23, 21, 0.7);
-@base-background-dev: rgba(21, 23, 48, 0.7);
+@base-background-transparent: rgba(15, 17, 15, 0.7);
+@base-background-dev: rgba(21, 23, 48, 1);
 @base-border: rgba(241, 246, 243, 0.08);
 @background-session: rgba(13, 13, 13, 0.85);
 @background-session-components: rgba(48, 49, 48, 0.6);
@@ -15,8 +18,9 @@
 @button-disabled-background: rgb(30, 29, 29);
 @success-green: rgb(38, 97, 26);
 @error-red: #cc0000;
+@error-red-brightened: #ff8888;
 @warning-yellow: #ffa500;
-@textarea-background: #2a2a2a;
+@textarea-background: #171717;
 
 @text-primary: #fff;
 @text-secondary: #c3c8c2;
@@ -69,6 +73,7 @@
 
 // @font-face declaration lives in app.less
 @fixed-font: "Martian Mono", sans-serif;
+@terminal-font: "JetBrains Mono", sans-serif;
 
 @text-s1-font: "Martian Mono", sans-serif;
 
@@ -76,3 +81,6 @@
 @markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji";
 @markdown-highlight: rgb(35, 35, 35);
+
+@thin-border-color: #333;
+@main-content-bottom-background: #333;
diff --git a/src/app/common/themes/themes.ts b/src/app/common/themes/themes.ts
index 34dbde953..808e1ff9a 100644
--- a/src/app/common/themes/themes.ts
+++ b/src/app/common/themes/themes.ts
@@ -9,7 +9,7 @@
 const themes = [
     {
         id: "default",
-        terminal: { foreground: "#eceeec", background: "rgba(21, 23, 21, 1)" },
+        terminal: { foreground: "#eceeec", background: "black" },
     },
 ];
 
diff --git a/src/app/connections/connections.less b/src/app/connections/connections.less
index 48cf9378e..f4b5f3251 100644
--- a/src/app/connections/connections.less
+++ b/src/app/connections/connections.less
@@ -39,13 +39,13 @@
             th {
                 height: 32px;
                 padding: 5px 15px 5px 10px;
-                color: @text-secondary;
+                color: var(--view-text-color);
             }
         }
 
         tr.connections-item {
             border-bottom: 1px solid rgba(241, 246, 243, 0.15);
-            color: @text-secondary;
+            color: var(--view-text-color);
             cursor: pointer;
 
             &:hover {
diff --git a/src/app/history/history.less b/src/app/history/history.less
index 161e23404..ac387a4d8 100644
--- a/src/app/history/history.less
+++ b/src/app/history/history.less
@@ -1,12 +1,12 @@
 @import "@/common/themes/themes.less";
 
 .history-view {
-    background-color: @background-session;
+    background-color: var(--session-bg-color);
 
     .icon {
         width: 1.3em !important;
         height: 1.3em !important;
-        fill: @base-color;
+        fill: var(--app-text-color);
     }
 
     .history-checkbox {
@@ -51,7 +51,7 @@
         svg {
             width: 1.5em;
             height: 1.5em;
-            fill: @base-color;
+            fill: var(--app-text-color);
         }
     }
 
@@ -63,15 +63,6 @@
             font-weight: bold;
             font-size: 1.5em;
         }
-
-        input {
-            border: none;
-            border-radius: 4px;
-            font-size: 1em;
-            padding: 0.5em 1em;
-            background-color: @background-session-components;
-            color: @base-color;
-        }
     }
 
     .history-search {
@@ -99,7 +90,7 @@
                 .label {
                     display: inline;
                     vertical-align: middle;
-                    color: @base-color;
+                    color: var(--app-text-color);
                 }
                 .icon {
                     vertical-align: middle;
@@ -110,7 +101,7 @@
             .session-dropdown,
             .remote-dropdown {
                 .dropdown-item {
-                    color: @term-white;
+                    color: var(--app-text-color);
                     cursor: pointer;
                     &:hover {
                         background-color: #666;
@@ -130,7 +121,7 @@
             .search-checkbox {
                 margin-left: 15px;
                 padding: 5px 10px 5px 10px;
-                background: @base-border;
+                background: var(--button-secondary-bg-color);
                 border-radius: 4px;
                 display: flex;
                 flex-direction: row;
@@ -163,7 +154,7 @@
 
             .reset-button {
                 margin-left: 1em;
-                color: @base-color;
+                color: var(--app-text-color);
                 line-height: 1.75em;
             }
         }
@@ -191,7 +182,7 @@
         .trash-icon {
             width: 12px;
             height: 12px;
-            fill: @text-secondary;
+            fill: var(--app-text-color);
         }
 
         .control-checkbox {
@@ -216,11 +207,11 @@
             }
 
             &:hover {
-                color: @term-white;
+                color: var(--app-text-color);
             }
 
             &.delete-button.is-active {
-                color: @term-bright-red !important;
+                color: var(--view-error-color) !important;
             }
         }
 
@@ -273,7 +264,7 @@
                 .line-container {
                     padding: 0px 10px 10px 10px;
                     overflow-x: auto;
-                    background-color: @term-black;
+                    background-color: var(--prompt-black);
                 }
 
                 .line-context {
@@ -285,10 +276,10 @@
 
                     .vic-btn {
                         cursor: pointer;
-                        color: @term-white;
+                        color: var(--app-text-color);
 
                         &:hover {
-                            color: @term-white;
+                            color: var(--app-text-color);
                         }
                     }
                 }
@@ -312,7 +303,7 @@
             display: flex;
             border-bottom: 1px solid rgba(250, 250, 250, 0.1);
             align-items: center;
-            color: @text-secondary;
+            color: var(--app-text-color);
 
             &.is-selected {
                 background-color: #222;
@@ -373,7 +364,7 @@
             }
 
             td.cmdstr {
-                color: @term-white;
+                color: var(--app-text-color);
                 flex: 1 0 0;
                 border-radius: 3px;
                 white-space: pre;
diff --git a/src/app/history/history.tsx b/src/app/history/history.tsx
index f16d0927a..228ea62f0 100644
--- a/src/app/history/history.tsx
+++ b/src/app/history/history.tsx
@@ -13,8 +13,8 @@ import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import { Line } from "@/app/line/linecomps";
-import { CmdStrCode } from "@/common/elements";
 import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "@/util/keyutil";
+import { TextField } from "@/elements";
 
 import { ReactComponent as XmarkIcon } from "@/assets/icons/line/xmark.svg";
 import { ReactComponent as AngleDownIcon } from "@/assets/icons/history/angle-down.svg";
@@ -194,9 +194,9 @@ class HistoryView extends React.Component<{}, {}> {
     }
 
     @boundMethod
-    changeSearchText(e: any) {
+    changeSearchText(val: string) {
         mobx.action(() => {
-            GlobalModel.historyViewModel.searchText.set(e.target.value);
+            GlobalModel.historyViewModel.searchText.set(val);
         })();
     }
 
@@ -433,19 +433,12 @@ class HistoryView extends React.Component<{}, {}> {
                     <div className="history-title">History</div>
                     <div className="history-search">
                         <div className="main-search field">
-                            <p className="control has-icons-left">
-                                <input
-                                    className="input"
-                                    type="text"
-                                    placeholder="Exact String Search"
-                                    value={hvm.searchText.get()}
-                                    onChange={this.changeSearchText}
-                                    onKeyDown={this.searchKeyDown}
-                                />
-                                <span className="is-small is-left">
-                                    <SearchIcon className="icon" />
-                                </span>
-                            </p>
+                            <TextField
+                                placeholder="Exact String Search"
+                                onChange={this.changeSearchText}
+                                onKeyDown={this.searchKeyDown}
+                                decoration={{ startDecoration: <SearchIcon className="icon" /> }}
+                            />
                         </div>
                         <div className="advanced-search">
                             <div
diff --git a/src/app/line/line.less b/src/app/line/line.less
index 6793d4ed7..8b0bc84bb 100644
--- a/src/app/line/line.less
+++ b/src/app/line/line.less
@@ -1,15 +1,14 @@
 @import "@/common/themes/themes.less";
 
 .line {
-    margin: 1rem 1rem 0 1rem;
-    padding: var(--termpad) var(--termpad) var(--termpad) var(--termpad);
-    border-radius: 6px;
+    margin: 0 10px 0 0;
+    padding: var(--termpad) var(--termpad) calc(var(--termpad) + 1px) calc(var(--termpad) * 2);
     display: flex;
     overflow: hidden;
     flex-shrink: 0;
     position: relative;
-    background: @base-background;
-    border: 1px solid transparent;
+    font-weight: normal;
+    font-family: var(--termfontfamily);
 
     &.line-cmd {
         flex-direction: column;
@@ -31,22 +30,55 @@
     }
 
     &.line-invalid {
-        color: @term-white;
+        color: var(--term-text-white);
         margin-left: 5px;
     }
 
     &.selected {
-        border: 1px solid rgba(@base-color, 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;
+        .line-mask {
+            border-left: 4px solid var(--line-selected-border-left-color);
+        }
+
+        &.has-error {
+            .line-mask {
+                border-left: 4px solid var(--line-selected-error-border-color);
+            }
+        }
+    }
+
+    &.active.selected {
+        .line-mask {
+            background-color: var(--line-selected-bg-color);
+            border: 2px solid var(--line-active-border-color);
+            border-left: 4px solid var(--line-active-border-color);
+        }
+
+        &.has-error {
+            .line-mask {
+                border: 2px solid var(--line-selected-error-border-color);
+                border-left: 4px solid var(--line-selected-error-border-color);
+            }
+        }
     }
 
-    &.active {
-        border: 1px solid rgba(@wave-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;
+    .line-mask {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        z-index: 10;
+        pointer-events: none;
+
+        &.error-mask {
+            background-color: var(--line-error-bg-color);
+            border-left: 4px solid var(--line-error-border-left-color);
+        }
     }
 
     .load-error-text {
-        color: @term-red;
+        color: var(--term-text-red);
         padding-top: 5px;
     }
 
@@ -55,7 +87,7 @@
     }
 
     .sidebar-message {
-        color: @term-yellow;
+        color: var(--term-text-yellow);
     }
 
     .focus-indicator {
@@ -66,7 +98,7 @@
     &.line-simple {
         font-size: 11px;
         line-height: 1.2;
-        color: rgba(@base-color, 0.6);
+        color: var(--line-text-color);
 
         .simple-line-header {
             display: flex;
@@ -90,22 +122,22 @@
             margin-left: 0.5em;
             margin-right: 0.5em;
             vertical-align: text-top;
-            fill: @base-color;
+            fill: var(--primary-background-color);
         }
 
         .success {
-            color: @wave-green;
-            fill: @wave-green;
+            color: var(--primary-accent-color);
+            fill: var(--primary-accent-color);
         }
 
         .fail {
-            color: @error-red;
-            fill: @error-red;
+            color: var(--line-error-color);
+            fill: var(--line-error-color);
         }
 
         .warning {
-            color: @warning-yellow;
-            fill: @warning-yellow;
+            color: var(--line-warning-color);
+            fill: var(--line-warning-color);
         }
     }
 
@@ -114,12 +146,6 @@
         padding: 10px;
     }
 
-    &:nth-child(2) {
-        margin: 0px 5px 5px 5px;
-        padding: 0px 5px 5px 12px;
-        border-top: none;
-    }
-
     &:hover .meta .termopts {
         display: block;
     }
@@ -169,7 +195,7 @@
         }
 
         .meta.meta-line1 {
-            color: rgba(@base-color, 0.6) !important;
+            color: var(--line-meta-text-color);
         }
 
         .meta.meta-line2 {
@@ -194,7 +220,7 @@
         flex-direction: row;
 
         .user {
-            color: lighten(@soft-blue, 10%);
+            color: var(--line-meta-user-color);
             font-weight: bold;
             margin-top: 1px;
             margin-right: 10px;
@@ -211,7 +237,7 @@
             svg {
                 width: 1em;
                 margin-right: 0.5em;
-                fill: rgba(@base-color, 0.6);
+                fill: var(--line-svg-fill-color);
             }
         }
 
@@ -224,9 +250,9 @@
             border-radius: 50%;
             line-height: 1em;
             svg {
-                fill: rgba(@base-color, 0.6);
+                fill: var(--line-svg-fill-color);
                 &:hover {
-                    fill: @base-color;
+                    fill: var(--line-svg-hover-fill-color);
                 }
             }
         }
@@ -253,7 +279,7 @@
         .cmdtext-overflow {
             flex-shrink: 0;
             padding-right: 2px;
-            color: @term-white;
+            color: var(--term-text-white);
             cursor: pointer;
         }
     }
@@ -268,7 +294,7 @@
         .cmdtext-expanded {
             white-space: pre;
 
-            color: @term-white;
+            color: var(--term-text-white);
             padding-bottom: 5px;
         }
     }
@@ -332,13 +358,13 @@
             padding: 2px 5px 0px 5px;
             display: inline-block;
             font-size: 10px;
-            color: @term-white;
+            color: var(--term-text-white);
             background-color: #151715;
         }
 
         .cmd-rtnstate-diff {
             font-family: var(--termfontfamily);
-            color: @term-white;
+            color: var(--term-text-white);
             white-space: pre;
             margin-left: 10px;
             padding-left: 10px;
diff --git a/src/app/line/linecomps.tsx b/src/app/line/linecomps.tsx
index d33c73a03..11ddd661e 100644
--- a/src/app/line/linecomps.tsx
+++ b/src/app/line/linecomps.tsx
@@ -31,6 +31,10 @@ import "./line.less";
 
 dayjs.extend(localizedFormat);
 
+function cmdHasError(cmd: Cmd): boolean {
+    return cmd.getStatus() == "error" || cmd.getExitCode() != 0;
+}
+
 @mobxReact.observer
 class SmallLineAvatar extends React.Component<{ line: LineType; cmd: Cmd; onRightClick?: (e: any) => void }, {}> {
     render() {
@@ -637,13 +641,15 @@ class LineCmd extends React.Component<
             .get();
         const isRunning = cmd.isRunning();
         const isExpanded = this.isCmdExpanded.get();
+        const cmdError = cmdHasError(cmd);
         const mainDivCn = cn(
             "line",
             "line-cmd",
             { selected: isSelected },
             { active: isSelected && isFocused },
             { "cmd-done": !isRunning },
-            { "has-rtnstate": isRtnState }
+            { "has-rtnstate": isRtnState },
+            { "has-error": cmdError }
         );
         let rendererPlugin: RendererPluginType = null;
         const isNoneRenderer = line.renderer == "none";
@@ -663,6 +669,9 @@ class LineCmd extends React.Component<
                 data-linenum={line.linenum}
                 data-screenid={line.screenid}
             >
+                <If condition={isSelected || cmdError}>
+                    <div key="mask" className={cn("line-mask", { "error-mask": cmdError })}></div>
+                </If>
                 <div
                     key="header"
                     className={cn("line-header", { "is-expanded": isExpanded }, { "hide-prompt": hidePrompt })}
diff --git a/src/app/line/lines.less b/src/app/line/lines.less
index 043f90dd0..da577ab96 100644
--- a/src/app/line/lines.less
+++ b/src/app/line/lines.less
@@ -4,7 +4,7 @@
     display: flex;
     flex-direction: column;
     overflow: auto;
-    padding: 0 0 10px 0;
+    padding: 0;
     flex-grow: 1;
     position: relative;
     overflow-x: hidden;
@@ -20,7 +20,7 @@
     &:focus,
     &:focus-within {
         &::-webkit-scrollbar-thumb {
-            background-color: @scrollbar-thumb !important;
+            background-color: var(--app-scrollbar-thumb-color) !important;
         }
     }
 
@@ -32,26 +32,34 @@
         flex-grow: 1;
     }
 
-    .line-sep {
+    .line-sep-labeled {
         display: flex;
         align-items: center;
-        margin-top: 1em;
-        color: rgba(@base-color, 0.5);
+        color: var(--line-meta-text-color);
+        font-family: var(--termfontfamily);
+        line-height: var(--termlineheight);
+        font-size: var(--termfontsize);
     }
 
-    .line-sep::before,
-    .line-sep::after {
+    .line-sep-labeled::before,
+    .line-sep-labeled::after {
         content: "";
         height: 1px;
         flex-grow: 1;
         background-color: rgba(@base-color, 0.5);
     }
 
-    .line-sep::before {
+    .line-sep-labeled::before {
         margin-right: 1rem;
     }
 
-    .line-sep::after {
+    .line-sep-labeled::after {
         margin-left: 1rem;
     }
+
+    .line-sep {
+        width: 100%;
+        height: 1px;
+        border-bottom: 1px solid var(--app-border-color);
+    }
 }
diff --git a/src/app/line/linesview.tsx b/src/app/line/linesview.tsx
index ce22bedf4..b6418d3fe 100644
--- a/src/app/line/linesview.tsx
+++ b/src/app/line/linesview.tsx
@@ -471,11 +471,13 @@ class LinesView extends React.Component<
             prevDateStr = curDateStr;
             if (dateSepStr != null) {
                 let sepElem = (
-                    <div key={"sep-" + line.lineid} className="line-sep">
+                    <div key={"sep-" + line.lineid} className="line-sep-labeled">
                         {dateSepStr}
                     </div>
                 );
                 lineElements.push(sepElem);
+            } else if (idx > 0) {
+                lineElements.push(<div key={"sep-" + line.lineid} className="line-sep"></div>);
             }
             let topBorder = dateSepStr == null && this.hasTopBorder(lines, idx);
             let lineProps = {
diff --git a/src/app/root.less b/src/app/root.less
new file mode 100644
index 000000000..66df7c5c3
--- /dev/null
+++ b/src/app/root.less
@@ -0,0 +1,184 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+:root {
+    --fa-style-family: "Font Awesome 6 Sharp";
+
+    // these variables are overridden by user settings
+    --termfontfamily: "JetBrains Mono", monospace;
+    --termfontsize: 12px;
+    --termlineheight: 15px;
+    --termpad: 7px; // padding value (scaled to termfontsize)
+
+    // global colors
+    --app-accent-color: rgb(88, 193, 66);
+    --app-error-color: rgb(204, 0, 0);
+    --app-warning-color: rgb(255, 165, 0);
+    --app-text-color: rgb(211, 215, 207);
+    --app-text-primary-color: rgb(255, 255, 255);
+    --app-text-secondary-color: rgb(195, 200, 194);
+    --app-border-color: rgb(51, 51, 51);
+    --app-bg-color: rgba(21, 23, 21, 1);
+    --app-bg-color-dev: rgba(21, 23, 48, 1);
+
+    // global generic colors
+    --app-black: rgb(0, 0, 0);
+
+    // scrollbar colors
+    --scrollbar-background-color: rgba(21, 23, 21, 1);
+    --scrollbar-thumb-color: rgb(134, 134, 134);
+
+    // code color
+    --pre-bg-color: rgb(0, 0, 0);
+
+    // tab colors
+    --tab-red: rgb(229, 77, 46);
+    --tab-orange: rgb(239, 113, 59);
+    --tab-yellow: rgb(224, 185, 86);
+    --tab-green: rgb(88, 193, 66);
+    --tab-mint: rgb(75, 255, 169);
+    --tab-cyan: rgb(75, 223, 255);
+    --tab-blue: rgb(57, 113, 255);
+    --tab-violet: rgb(186, 118, 255);
+    --tab-pink: rgb(224, 86, 119);
+    --tab-white: rgb(255, 255, 255);
+
+    // prompt colors
+    --prompt-black: rgb(0, 0, 0);
+    --prompt-white: rgb(211, 215, 207);
+    --prompt-orange: rgb(239, 113, 59);
+    --prompt-blue: rgb(52, 101, 164);
+    --prompt-bright-black: rgb(85, 87, 83);
+    --prompt-bright-red: rgb(239, 41, 41);
+    --prompt-bright-green: rgb(88, 193, 66);
+    --prompt-bright-yellow: rgb(252, 233, 79);
+    --prompt-bright-blue: rgb(50, 175, 255);
+    --prompt-bright-magenta: rgb(173, 127, 168);
+    --prompt-bright-cyan: rgb(52, 226, 226);
+    --prompt-bright-white: rgb(255, 255, 255);
+
+    // button colors
+    --button-text-color: rgb(255, 255, 255);
+    --button-primary-bg-color: rgb(78, 154, 6);
+    --button-secondary-bg-color: rgba(255, 255, 255, 0.09);
+    --button-warning-bg-color: rgb(204, 0, 0);
+
+    // input colors
+    --checkbox-text-color: rgb(255, 255, 255);
+    --checkbox-bg-color: rgb(78, 154, 6);
+    --checkbox-check-color: rgb(255, 255, 255);
+
+    // dropdown colors
+    --dropdown-text-color: rgb(211, 215, 207);
+    --dropdown-error-color: rgb(229, 77, 46);
+    --dropdown-focus-color: rgb(78, 154, 6);
+
+    // textfield colors
+    --textfield-focused-border-color: rgb(78, 154, 6);
+    --textfield-error-border-color: rgb(229, 77, 46);
+    --textfield-label-color: rgb(195, 200, 194);
+    --textfield-text-color: rgb(255, 255, 255);
+
+    // toggle colors
+    --toggle-bg-color: rgb(51, 51, 51);
+    --toggle-thumb-color: rgb(211, 215, 207);
+    --toggle-checked-bg-color: rgb(78, 154, 6);
+
+    // cmdstrcode colors
+    --cmdstrcode-bg-color: rgb(0, 0, 0);
+    --cmdstrcode-text-color: rgb(211, 215, 207);
+
+    // markdown colors
+    --markdown-bg-color: rgb(35, 35, 35);
+    --markdown-outline-color: rgb(78, 154, 6);
+
+    // status(remote) colors
+    // todo: all status colors must be unified
+    --status-connected-color: rgb(70, 167, 88);
+    --status-connecting-color: rgb(245, 217, 10);
+    --status-error-color: rgb(229, 77, 46);
+    --status-disconnected-color: rgb(195, 200, 194);
+
+    // status indicator colors
+    // todo: all status colors must be unified
+    --status-indicator-color: rgb(211, 215, 207);
+    --status-indicator-error: rgb(204, 0, 0);
+    --status-indicator-success: rgb(78, 154, 6);
+
+    // status(version) colors
+    // todo: all status colors must be unified
+    --status-outdated-color: rgb(196, 160, 0);
+    --status-updated-color: rgb(78, 154, 6);
+
+    // term status colors
+    // todo: all status colors must be unified
+    --term-error-color: rgb(204, 0, 0);
+    --term-warning-color: rgb(196, 160, 0);
+
+    // hotkey colors
+    --hotkey-text-color: rgb(195, 200, 194);
+
+    // sidebar colors
+    --sidebar-dev-bg-color: rgb(21, 23, 48);
+    --sidebar-settings-color: rgb(255, 255, 255);
+
+    // line colors
+    --line-sidebar-message-color: rgb(196, 160, 0);
+    --line-background: rgba(21, 23, 21, 1);
+    --line-avatar-color: #eceeec;
+    --line-text-color: rgb(211, 215, 207);
+    --line-svg-fill-color: rgb(150, 152, 150);
+    --line-svg-hover-fill-color: #eceeec;
+    --line-selected-border-color: rgb(193, 195, 193);
+    --line-separator-color: rgb(126, 126, 126);
+    --line-meta-line1-color: rgb(150, 152, 150);
+    --line-error-color: #cc0000;
+    --line-warning-color: #ffa500;
+    --line-base-soft-blue-color: #729fcf;
+    --line-active-border-color: rgb(97, 158, 72);
+    --line-selected-bg-color: rgba(255, 255, 255, 0.1);
+    --line-selected-border-left-color: #ccc;
+    --line-selected-error-border-color: rgba(204, 0, 0, 0.8);
+    --line-selected-error-bg-color: rgb(19, 4, 3);
+    --line-error-bg-color: rgba(200, 0, 0, 0.1);
+    --line-error-border-left-color: rgba(204, 0, 0, 0.8);
+    --line-simple-text-color: rgba(236, 238, 236, 0.6);
+    --line-meta-text-color: rgb(139, 145, 138);
+    --line-meta-user-color: rgba(140, 184, 232);
+    --line-svg-color: rgba(236, 238, 236, 0.6);
+    --line-svg-hover-color: rgba(236, 238, 236, 1);
+    --line-status-success-fill: rgb(88, 193, 66);
+    --line-status-error-fill: #cc0000;
+    --line-status-warning-fill: #ffa500;
+
+    // view colors
+    // todo: bookmarks is a view, colors must be unified with --view* colors
+    --bookmarks-text-color: rgb(211, 215, 207);
+    --bookmarks-textarea-bg-color: rgb(0, 0, 0);
+    --bookmarks-disabled-text-color: rgb(173, 173, 173);
+    --bookmarks-control-hover-color: rgb(255, 255, 255);
+
+    // view colors
+    --view-error-color: rgb(204, 0, 0);
+    --view-text-color: rgb(195, 200, 194);
+
+    // session colors
+    --session-bg-color: rgba(13, 13, 13, 0.85);
+
+    // cmdinput colors
+    --cmdinput-textarea-bg-color: #171717;
+    --cmdinput-text-error-color: rgb(239, 41, 41);
+    --cmdinput-history-title-color: rgb(114, 159, 207);
+    --cmdinput-remote-title-color: rgb(6, 152, 154);
+    --cmdinput-history-item-error-color: rgb(220, 119, 118);
+    --cmdinput-history-item-selected-error-color: rgb(247, 148, 148);
+    --cmdinput-remote-field-control-color: rgb(0, 0, 0);
+    --cmdinput-warning-color: rgb(255, 165, 0);
+    --cmdinput-button-bg-color: rgb(88, 193, 66);
+    --cmdinput-comment-button-bg-color: rgb(57, 113, 255);
+    --cmdinput-disabled-icon-color: rgb(76, 81, 75, 1);
+    --cmdinput-history-bg-color: rgb(21, 23, 21, 1);
+
+    // screen view color
+    --screen-view-text-caption-color: rgb(139, 145, 138);
+}
diff --git a/src/app/sidebar/sidebar.less b/src/app/sidebar/sidebar.less
index d548bc447..b15666ea8 100644
--- a/src/app/sidebar/sidebar.less
+++ b/src/app/sidebar/sidebar.less
@@ -10,6 +10,9 @@
     line-height: 20px;
     backdrop-filter: blur(4px);
     z-index: 20;
+    border-radius: 10px;
+    border-left: 1px solid var(--app-border-color);
+    border-bottom: 1px solid var(--app-border-color);
 
     .title-bar-drag {
         -webkit-app-region: drag;
@@ -111,7 +114,7 @@
     .separator {
         height: 1px;
         margin: 16px 0;
-        background-color: @base-border;
+        background-color: var(--sidebar-separator-color);
     }
 
     .item.workspaces-item {
@@ -120,10 +123,10 @@
 
     .middle {
         padding: 4px 6px 8px 6px;
-        border-bottom: 1px solid @base-border;
+        border-bottom: 1px solid var(--sidebar-separator-color);
         .item {
             &.active {
-                background: @base-border;
+                background: var(--sidebar-separator-color);
                 box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
                     0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
             }
@@ -220,127 +223,7 @@
         }
     }
 
-    .menu-label {
-        color: @base-color;
-    }
-
-    .menu-list {
-        li.menu-history,
-        li.menu-bookmarks,
-        li.menu-settings,
-        li.menu-websharing {
-            margin-left: -10px;
-        }
-
-        li.menu-bookmarks {
-            margin-left: -10px;
-        }
-
-        li {
-            .hotkey {
-                visibility: hidden;
-            }
-
-            &:hover .hotkey {
-                visibility: visible;
-            }
-        }
-    }
-
-    .menu-list.session-menu-list {
-        li a {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-
-            .session-num {
-                width: 24px;
-                margin-left: -12px;
-            }
-
-            .session-gear {
-                visibility: hidden;
-            }
-
-            &:hover .session-gear {
-                color: @term-white;
-                visibility: visible;
-
-                &:hover {
-                    color: @term-white;
-                }
-            }
-        }
-    }
-
-    .menu-list.emotes-menu-list {
-        max-height: 35%;
-        overflow-y: auto;
-    }
-
-    .menu-list li.emote-menu-item {
-        a {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-    }
-
-    .menu-list li a {
-        white-space: nowrap;
-        padding: 3px 5px 3px 12px;
-        vertical-align: middle;
-        position: relative;
-
-        .user-status {
-            position: absolute !important;
-            top: 24px !important;
-            left: 32px !important;
-        }
-
-        .avatar {
-            width: 24px;
-            height: 24px;
-            margin-right: 5px;
-            vertical-align: middle;
-        }
-
-        &.is-active .small-text {
-            color: @term-white;
-        }
-
-        &.is-active {
-            font-weight: bold;
-            background-color: @active-menu-color;
-
-            .session-num {
-                font-weight: normal;
-            }
-        }
-
-        .sub-label {
-            font-style: italic;
-        }
-
-        &.activity {
-            font-weight: bold;
-
-            .tag {
-                margin-left: 4px;
-                padding: 0 5px 0 5px;
-                position: relative;
-                top: -1px;
-            }
-        }
-
-        .status {
-            margin-right: 5px;
-            position: relative;
-            top: -3px;
-        }
-    }
-
-    .updateBanner {
+    .update-banner {
         font-weight: bold;
 
         .icon {
diff --git a/src/app/sidebar/sidebar.tsx b/src/app/sidebar/sidebar.tsx
index a518f3301..d09f1250e 100644
--- a/src/app/sidebar/sidebar.tsx
+++ b/src/app/sidebar/sidebar.tsx
@@ -307,7 +307,7 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
                                 <If condition={needsUpdate}>
                                     <SideBarItem
                                         key="update-available"
-                                        className="updateBanner"
+                                        className="update-banner"
                                         frontIcon={<i className="fa-sharp fa-regular fa-circle-up icon" />}
                                         contents="Update Available"
                                         onClick={() => openLink("https://www.waveterm.dev/download?ref=upgrade")}
diff --git a/src/app/workspace/cmdinput/cmdinput.less b/src/app/workspace/cmdinput/cmdinput.less
index 148bbb384..c0efb79f5 100644
--- a/src/app/workspace/cmdinput/cmdinput.less
+++ b/src/app/workspace/cmdinput/cmdinput.less
@@ -1,25 +1,17 @@
 @import "@/common/themes/themes.less";
 
 .cmd-input {
-    border-radius: 6px;
     max-height: max(300px, 40%);
     display: flex;
     flex-direction: column;
     position: absolute;
-    bottom: var(--termfontsize);
-    right: var(--termfontsize);
-    width: calc(100% - 2 * var(--termfontsize));
+    bottom: 0;
+    width: 100%;
     padding: var(--termfontsize);
     z-index: 100;
-    background: @background-session-components;
-    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 3px 8px 0px rgba(0, 0, 0, 0.35),
-        0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
-    backdrop-filter: blur(20px);
-    border: 1px solid transparent;
+    border-top: 1px solid var(--app-border-color);
 
     &.active {
-        border: 1px solid rgba(@wave-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;
     }
 
     &.has-info {
@@ -48,7 +40,7 @@
     .remote-status-warning {
         display: flex;
         flex-direction: row;
-        color: @term-yellow;
+        color: var(--cmdinput-warning-color);
         align-items: center;
 
         .button {
@@ -60,7 +52,7 @@
         position: absolute;
         top: 5px;
         right: 5px;
-        color: @term-white;
+        color: var(--app-text-color);
 
         padding: 5px;
         cursor: pointer;
@@ -90,11 +82,11 @@
             height: 1em;
             margin: 0 0.5em;
             vertical-align: text-top;
-            fill: @base-color;
+            fill: var(--app-text-color);
         }
 
         .warning {
-            fill: @warning-yellow;
+            fill: var(--cmdinput-warning-color);
         }
     }
 
@@ -124,21 +116,21 @@
 
             .shelltag {
                 position: absolute;
-                // 13px = 10px height + 3px padding.  subtract termpad to account for textareainput-div padding
-                bottom: calc(-13px + var(--termpad));
+                // 13px = 10px height + 3px padding.  subtract termpad to account for textareainput-div padding (2px not sure?)
+                bottom: calc(-13px + var(--termpad) + 2px);
                 right: 0px;
                 font-size: 10px;
-                color: @text-secondary;
+                color: var(--app-text-secondary-color);
                 line-height: 1;
                 padding: 0px 8px 3px 8px;
-                background-color: @textarea-background;
+                background-color: var(--cmdinput-textarea-bg-color);
                 border-radius: 0 0 5px 5px;
             }
         }
 
         textarea {
-            color: @term-bright-white;
-            background-color: @textarea-background;
+            color: var(--app-text-primary-color);
+            background-color: var(--cmdinput-textarea-bg-color);
             padding: var(--termpad);
             resize: none;
             overflow: auto;
@@ -166,17 +158,17 @@
 
         .cmd-quick-context .button {
             background-color: #000 !important;
-            color: @term-white;
+            color: var(--app-text-color);
         }
 
         &.inputmode-global .cmd-quick-context .button {
-            color: @term-black;
-            background-color: @tab-green !important;
+            color: var(--app-black);
+            background-color: var(--cmdinput-button-bg-color) !important;
         }
 
         &.inputmode-comment .cmd-quick-context .button {
-            color: @term-black;
-            background-color: @tab-blue !important;
+            color: var(--app-black);
+            background-color: var(--cmdinput-comment-button-bg-color) !important;
         }
 
         .cmd-exec {
@@ -189,11 +181,11 @@
                 height: 2.5em;
                 cursor: pointer;
                 border-radius: 50%;
-                fill: @wave-green;
+                fill: var(--app-accent-color);
                 padding: 0.25em;
             }
             .icon.disabled {
-                fill: @disabled-background;
+                fill: var(--cmdinput-disabled-icon-color);
                 cursor: default;
             }
             .cmd-btn {
@@ -231,8 +223,8 @@
         }
 
         .chat-textarea {
-            color: @term-bright-white;
-            background-color: @textarea-background;
+            color: var(--app-text-primary-color);
+            background-color: var(--cmdinput-textarea-bg);
             padding: 0.5em;
             resize: none;
             overflow: auto;
@@ -258,7 +250,7 @@
         }
 
         .chat-msg-assistant {
-            color: @term-white;
+            color: var(--app-text-color);
         }
 
         .chat-msg-user {
@@ -270,7 +262,7 @@
         }
 
         .chat-msg-error {
-            color: @term-bright-red;
+            color: var(--cmdinput-text-error);
             font-family: @markdown-font;
             font-size: 14px;
         }
@@ -281,7 +273,7 @@
     }
 
     .cmd-history {
-        color: @term-white;
+        color: var(--app-text-color);
         margin-bottom: 5px;
         overflow: auto;
         flex-shrink: 1;
@@ -291,8 +283,8 @@
             z-index: 102;
             top: 5px;
             left: 20px;
-            background-color: @background-session-components-solid;
-            color: @soft-blue;
+            background-color: var(--cmdinput-history-bg-color);
+            color: var(--cmdinput-history-title-color);
             padding-bottom: 4px;
             display: flex;
             flex-direction: row;
@@ -319,7 +311,7 @@
 
         .history-items {
             margin-top: 24px;
-            color: @term-white;
+            color: var(--app-text-color);
 
             padding-bottom: 6px;
 
@@ -328,7 +320,7 @@
             }
 
             .history-item.history-haderror {
-                color: mix(@term-red, @term-white, 50%);
+                color: var(--cmdinput-history-item-error-color);
             }
 
             .history-line:first-child {
@@ -346,12 +338,12 @@
 
             .history-item.is-selected {
                 font-weight: bold;
-                color: @term-bright-white;
+                color: var(--app-text-primary-color);
                 background-color: #444;
             }
 
             .history-item.is-selected.history-haderror {
-                color: mix(@term-bright-red, @term-bright-white, 50%);
+                color: var(--cmdinput-history-item-selected-error-color);
             }
         }
     }
@@ -362,21 +354,16 @@
         margin-bottom: var(--termpad);
 
         .info-msg {
-            color: @soft-blue;
+            color: var(--cmdinput-history-title-color);
             padding-bottom: 2px;
 
             a {
-                color: @term-blue;
+                color: var(--prompt-blue);
             }
         }
 
-        .info-title {
-            color: @soft-blue;
-            padding-bottom: 2px;
-        }
-
         .info-lines {
-            color: @term-white;
+            color: var(--app-text-color);
             white-space: pre;
             padding-bottom: 6px;
         }
@@ -392,7 +379,7 @@
 
             .info-comp {
                 min-width: 200px;
-                color: @term-white;
+                color: var(--app-text-color);
                 margin-right: 10px;
 
                 &.has-space {
@@ -401,19 +388,19 @@
             }
 
             .metacmd-comp {
-                color: @term-bright-green;
+                color: var(--prompt-bright-green);
             }
         }
 
         .info-error {
-            color: @term-red;
+            color: var(--cmdinput-text-error-color);
             padding-bottom: 2px;
         }
 
         .info-remote-showall {
             table.remotes-table {
                 th {
-                    color: @term-white;
+                    color: var(--app-text-color);
                     font-weight: bold;
                 }
 
@@ -437,7 +424,7 @@
 
             .info-remote-title {
                 font-weight: bold;
-                color: @term-cyan;
+                color: var(--cmdinput-remote-title-color);
             }
 
             .info-error,
@@ -472,7 +459,7 @@
                     white-space: pre;
                     width: 140px;
                     font-weight: bold;
-                    color: @term-bright-white;
+                    color: var(--app-text-primary-color);
                 }
 
                 .undo-icon {
@@ -486,8 +473,8 @@
                         input[type="text"],
                         input[type="number"],
                         input[type="password"] {
-                            background-color: @term-black;
-                            color: @term-white;
+                            background-color: var(--app-black);
+                            color: var(--app-text-color);
                             width: 200px;
                         }
                     }
@@ -502,8 +489,8 @@
                     &.select-input {
                         select {
                             width: 200px;
-                            background-color: @term-black;
-                            color: @term-white;
+                            background-color: var(--app-black);
+                            color: var(--app-text-color);
                         }
                     }
                 }
diff --git a/src/app/workspace/screen/screenview.less b/src/app/workspace/screen/screenview.less
index 9f092f5e1..bee44f259 100644
--- a/src/app/workspace/screen/screenview.less
+++ b/src/app/workspace/screen/screenview.less
@@ -4,6 +4,7 @@
     .screen-view {
         flex-grow: 1;
         position: relative;
+        border-top: 1px solid var(--app-border-color);
     }
 
     .screen-sidebar,
@@ -17,19 +18,36 @@
         right: 0;
         display: flex;
         flex-direction: column;
-        height: calc(100% - 0.5rem);
+        height: 100%;
         overflow: hidden;
-        margin-left: 5px;
-        padding-left: 5px;
         overflow-y: auto;
+        border-left: 1px solid var(--app-border-color);
 
         .sidebar-header {
             /* sidebar-header height linked to MagicLayout.ScreenSidebarHeaderHeight */
             display: flex;
             flex-direction: row;
-            padding: 3px 5px;
-            border-radius: 3px;
-            margin: 3px 5px 0 5px;
+            padding: 3px 0;
+            margin: 0;
+            border-bottom: 1px solid var(--app-border-color);
+            font-size: var(--termfontsize);
+            font-family: var(--termfontfamily);
+            font-weight: normal;
+            line-height: var(--termlineheight);
+            color: var(--screen-view-text-caption-color);
+
+            &:hover {
+                color: white;
+            }
+
+            div.pane-name {
+                visibility: hidden;
+                margin-left: calc(var(--termpad) * 2);
+            }
+
+            &:hover div.pane-name {
+                visibility: visible;
+            }
 
             i {
                 padding: 3px;
@@ -73,7 +91,7 @@
         display: flex;
         flex-direction: column;
         position: absolute;
-        height: calc(100% - 0.5rem);
+        height: 100%;
         overflow-x: hidden;
 
         .rendermode-tag {
@@ -81,13 +99,13 @@
             top: 0;
             right: 0;
             background-color: rgba(78, 154, 6, 0.65);
-            color: @term-black;
+            color: var(--app-black);
             padding: 2px 8px 2px 4px;
             border-bottom-left-radius: 5px;
             z-index: 10;
 
             &.is-active {
-                color: @term-white;
+                color: var(--app-text-color);
             }
 
             .render-mode {
@@ -95,10 +113,10 @@
 
                 position: relative;
                 cursor: pointer;
-                color: @term-white;
+                color: var(--app-text-color);
 
                 &:hover {
-                    color: @term-white;
+                    color: var(--app-text-color);
                 }
             }
         }
@@ -124,7 +142,7 @@
         }
 
         .share-tag {
-            color: @term-white;
+            color: var(--app-text-color);
             position: absolute;
             top: 0;
             left: 40%;
@@ -174,7 +192,7 @@
             padding: 1.5em 1em;
             margin-top: 0;
             line-height: 2.5em;
-            border-top: 1px solid @base-border;
+            border-top: 1px solid var(--app-border);
             &:first-child {
                 border-top: none;
             }
@@ -222,7 +240,7 @@
     }
 
     .cr-help-text {
-        color: @text-caption;
+        color: var(--screen-view-text-caption-color);
         margin-left: 5px;
     }
 
@@ -310,17 +328,17 @@
                     height: 16px;
 
                     path {
-                        fill: @text-primary;
+                        fill: var(--app-text-primary-color);
                     }
                 }
             }
 
             .text-standard {
-                color: @text-secondary;
+                color: var(--app-text-secondary-color);
             }
 
             .text-caption {
-                color: @text-caption;
+                color: var(--screen-view-text-caption-color);
             }
 
             .ellipsis {
diff --git a/src/app/workspace/screen/screenview.tsx b/src/app/workspace/screen/screenview.tsx
index 7cb8dc807..2cf386256 100644
--- a/src/app/workspace/screen/screenview.tsx
+++ b/src/app/workspace/screen/screenview.tsx
@@ -300,6 +300,7 @@ class ScreenSidebar extends React.Component<{ screen: Screen; width: string }, {
         return (
             <div className="screen-sidebar" style={{ width: width }} ref={this.sidebarRef}>
                 <div className="sidebar-header">
+                    <div className="pane-name">sidebar</div>
                     <div className="flex-spacer" />
                     <div onClick={this.sidebarOpenHalf} title="Set Sidebar Width to 50%">
                         <i className="fa-sharp fa-solid fa-table-columns" />
@@ -307,8 +308,8 @@ class ScreenSidebar extends React.Component<{ screen: Screen; width: string }, {
                     <div onClick={this.sidebarOpenPartial} title="Set Sidebar Width to 500px">
                         <i className="fa-sharp fa-solid fa-sidebar-flip" />
                     </div>
-                    <div onClick={this.sidebarClose} style={{ marginLeft: 5 }}>
-                        <i className="fa-sharp fa-solid fa-xmark" />
+                    <div onClick={this.sidebarClose} style={{ marginLeft: 5, marginRight: 10 }}>
+                        <i className="fa-sharp fa-solid fa-xmark-large" />
                     </div>
                 </div>
                 <If condition={!sidebarOk}>
diff --git a/src/app/workspace/screen/tabs.less b/src/app/workspace/screen/tabs.less
index ba951dc90..e81f6fe79 100644
--- a/src/app/workspace/screen/tabs.less
+++ b/src/app/workspace/screen/tabs.less
@@ -5,10 +5,6 @@
     border-top: 1px solid transparent;
     font-size: 12.5px;
 
-    &:first-child {
-        border-radius: 8px 0px 0px 0px;
-    }
-
     &.color-green,
     &.color-default {
         svg.svg-icon-inner path {
diff --git a/src/app/workspace/workspace.less b/src/app/workspace/workspace.less
index 3ae9c0f5f..3fcb5f359 100644
--- a/src/app/workspace/workspace.less
+++ b/src/app/workspace/workspace.less
@@ -8,12 +8,12 @@
     &.is-hidden {
         display: none;
     }
-    background: @background-session;
-    border: 1px solid @base-border;
-    border-radius: 8px;
-    // transition: width 0.2s ease;
-    margin-bottom: 0.5em;
-    margin-right: 0.5em;
+    border-radius: 10px;
+    border-radius: 0 0 6px 6px;
+    border-bottom: 1px solid var(--app-border-color);
+    border-right: 1px solid var(--app-border-color);
+    border-left: 1px solid var(--app-border-color);
+    background-color: black;
 
     .center-message {
         display: flex;
@@ -21,6 +21,6 @@
         justify-content: center;
         height: 100%;
         width: 100%;
-        color: @text-secondary;
+        color: var(--app-text-secondary-color);
     }
 }
diff --git a/src/app/workspace/workspaceview.tsx b/src/app/workspace/workspaceview.tsx
index 6e811091a..80f53d9d8 100644
--- a/src/app/workspace/workspaceview.tsx
+++ b/src/app/workspace/workspaceview.tsx
@@ -36,7 +36,6 @@ class WorkspaceView extends React.Component<{}, {}> {
         if (cmdInputHeight == 0) {
             cmdInputHeight = MagicLayout.CmdInputHeight; // this is the base size of cmdInput (measured using devtools)
         }
-        cmdInputHeight += MagicLayout.CmdInputBottom; // reference to .cmd-input, bottom: 12px
         let isHidden = GlobalModel.activeMainView.get() != "session";
         let mainSidebarModel = GlobalModel.mainSidebarModel;
 
diff --git a/src/models/model.ts b/src/models/model.ts
index 32ebbd106..435493a16 100644
--- a/src/models/model.ts
+++ b/src/models/model.ts
@@ -329,7 +329,7 @@ class Model {
         let cdata = this.clientData.get();
         let ff = cdata?.feopts?.termfontfamily;
         if (ff == null) {
-            ff = "JetBrains Mono, monospace";
+            ff = appconst.DefaultTermFontFamily;
         }
         return ff;
     }
@@ -1143,7 +1143,7 @@ class Model {
     setClientData(clientData: ClientDataType) {
         let newFontFamily = clientData?.feopts?.termfontfamily;
         if (newFontFamily == null) {
-            newFontFamily = "JetBrains Mono";
+            newFontFamily = appconst.DefaultTermFontFamily;
         }
         let newFontSize = clientData?.feopts?.termfontsize;
         if (newFontSize == null) {
diff --git a/src/plugins/code/code.less b/src/plugins/code/code.less
index e534e3f8b..cd9d31552 100644
--- a/src/plugins/code/code.less
+++ b/src/plugins/code/code.less
@@ -4,7 +4,7 @@
     .monaco-editor {
         .monaco-editor-background,
         .margin-view-overlays {
-            background-color: @base-background !important;
+            background-color: black !important;
         }
         .scrollbar {
             height: 4px !important;
@@ -16,7 +16,6 @@
     }
     .buttonContainer {
         opacity: 0;
-        transition: opacity 0.2s;
         position: absolute;
         padding: 0.5rem;
         right: 0;
@@ -49,7 +48,7 @@
         }
     }
     section {
-        transition: height 0.3s ease-in-out;
+        // transition: height 0.3s ease-in-out;
     }
     .messageContainer {
         position: absolute;
diff --git a/src/plugins/code/code.tsx b/src/plugins/code/code.tsx
index 9e5bb5d89..49590140f 100644
--- a/src/plugins/code/code.tsx
+++ b/src/plugins/code/code.tsx
@@ -8,11 +8,24 @@ import { Markdown } from "@/elements";
 import { GlobalModel, GlobalCommandRunner } from "@/models";
 import Split from "react-split-it";
 import loader from "@monaco-editor/loader";
-loader.config({ paths: { vs: "./node_modules/monaco-editor/min/vs" } });
 import { checkKeyPressed, adaptFromReactOrNativeKeyEvent } from "@/util/keyutil";
 
 import "./code.less";
 
+document.addEventListener("DOMContentLoaded", () => {
+    loader.config({ paths: { vs: "./node_modules/monaco-editor/min/vs" } });
+    loader.init().then(() => {
+        monaco.editor.defineTheme("wave-theme", {
+            base: "hc-black",
+            inherit: true,
+            rules: [],
+            colors: {
+                "editor.background": "#000000",
+            },
+        });
+    });
+});
+
 function renderCmdText(text: string): any {
     return <span>&#x2318;{text}</span>;
 }
@@ -330,7 +343,7 @@ class SourceCodeRenderer extends React.Component<
         <div style={{ maxHeight: this.props.opts.maxSize.height }}>
             {this.state.showReadonly && <div className="readonly">{"read-only"}</div>}
             <Editor
-                theme="hc-black"
+                theme="wave-theme"
                 height={this.state.editorHeight}
                 defaultLanguage={this.state.selectedLanguage}
                 value={this.state.code}
diff --git a/src/plugins/terminal/term.ts b/src/plugins/terminal/term.ts
index cecb812e5..ed6225089 100644
--- a/src/plugins/terminal/term.ts
+++ b/src/plugins/terminal/term.ts
@@ -189,7 +189,7 @@ class TermWrap {
             return;
         }
         this.terminal.focus();
-        setTimeout(() => this.terminal._core.viewport.syncScrollArea(true), 0);
+        setTimeout(() => this.terminal?._core?.viewport?.syncScrollArea(true), 0);
     }
 
     disconnectElem() {
diff --git a/src/util/util.ts b/src/util/util.ts
index 33e2a863e..c459f5133 100644
--- a/src/util/util.ts
+++ b/src/util/util.ts
@@ -334,10 +334,7 @@ function loadFonts(termFont: string) {
     if (termFont == "Hack") {
         loadHackFont();
     }
-    document.documentElement.style.setProperty(
-        "--termfontfamily",
-        '"' + termFont + '"' + ', "JetBrains Mono", monospace'
-    );
+    document.documentElement.style.setProperty("--termfontfamily", '"' + termFont + '"');
 }
 
 const DOW_STRS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
diff --git a/version.js b/version.js
index a719391eb..1884c00bd 100644
--- a/version.js
+++ b/version.js
@@ -1,2 +1,5 @@
-const VERSION = "v0.6.1";
+const path = require("path");
+const packageJson = require(path.resolve(__dirname, "package.json"));
+
+const VERSION = `${packageJson.version}`;
 module.exports = VERSION;
diff --git a/versionmeta.json b/versionmeta.json
deleted file mode 100644
index a24fc53a1..000000000
--- a/versionmeta.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-    "packages": [
-        {
-            "type": "dmg",
-            "arch": "macos-arm64",
-            "channel": "stable",
-            "updated": "2023-10-31",
-            "version": "v0.4.0",
-            "sha": "016876cf3e9fb600d6798891c8566a7ac5d1446a",
-            "url": "https://www.getprompt.dev/download/prompt-macos-arm64-v0.4.0.dmg"
-        },
-        {
-            "type": "dmg",
-            "arch": "macos-amd64",
-            "channel": "stable",
-            "updated": "2023-10-31",
-            "version": "v0.4.0",
-            "sha": "d0bc280e4630a716126e47e700d8d4364db966e6",
-            "url": "https://www.getprompt.dev/download/prompt-macos-x86-v0.4.0.dmg"
-        }
-    ]
-}
diff --git a/wavesrv/cmd/main-server.go b/wavesrv/cmd/main-server.go
index 8fbc23d0d..db9b38b9c 100644
--- a/wavesrv/cmd/main-server.go
+++ b/wavesrv/cmd/main-server.go
@@ -66,10 +66,13 @@ const TelemetryInterval = 8 * time.Hour
 
 const MaxWriteFileMemSize = 20 * (1024 * 1024) // 20M
 
+// these are set at build time
+var WaveVersion = "v0.0.0"
+var BuildTime = "0"
+
 var GlobalLock = &sync.Mutex{}
 var WSStateMap = make(map[string]*scws.WSState) // clientid -> WsState
 var GlobalAuthKey string
-var BuildTime = "0"
 var shutdownOnce sync.Once
 var ContentTypeHeaderValidRe = regexp.MustCompile(`^\w+/[\w.+-]+$`)
 
@@ -804,6 +807,7 @@ func doShutdown(reason string) {
 
 func main() {
 	scbase.BuildTime = BuildTime
+	scbase.WaveVersion = WaveVersion
 	base.ProcessType = base.ProcessType_WaveSrv
 	wlog.GlobalSubsystem = base.ProcessType_WaveSrv
 	wlog.LogConsumer = wlog.LogWithLogger
diff --git a/wavesrv/pkg/cmdrunner/cmdrunner.go b/wavesrv/pkg/cmdrunner/cmdrunner.go
index 387b0ca34..6dfbcc9a1 100644
--- a/wavesrv/pkg/cmdrunner/cmdrunner.go
+++ b/wavesrv/pkg/cmdrunner/cmdrunner.go
@@ -16,6 +16,7 @@ import (
 	"os"
 	"path/filepath"
 	"regexp"
+	"runtime"
 	"sort"
 	"strconv"
 	"strings"
@@ -2585,13 +2586,18 @@ func updateAsstResponseAndWriteToUpdateBus(ctx context.Context, cmd *sstore.CmdT
 	scbus.MainUpdateBus.DoScreenUpdate(cmd.ScreenId, update)
 }
 
-func getCmdInfoEngineeredPrompt(userQuery string, curLineStr string) string {
-	rtn := "You are an expert on the command line terminal. Your task is to help me write a command."
-	if curLineStr != "" {
-		rtn += "My current command is: " + curLineStr
+func getCmdInfoEngineeredPrompt(userQuery string, curLineStr string, shellType string, osType string) string {
+	promptBase := "You are an AI assistant with deep expertise in command line interfaces, CLI programs, and shell scripting. Your task is to help the user to fix an existing command that will be provided, or if no command is provided, help write a new command that the user requires. Feel free to provide appropriate context, but try to keep your answers short and to the point as the user is asking for help because they are trying to get a task done immediately."
+	promptBase = promptBase + " The user is current using the \"" + shellType + "\" shell on " + osType + "."
+	promptCurrentCommand := ""
+	if strings.TrimSpace(curLineStr) != "" {
+		// Enclose the command in triple backticks to format it as a code block.
+		promptCurrentCommand = " The user is currently working with the command: ```\n" + curLineStr + "\n```\n\n"
 	}
-	rtn += ". My question is: " + userQuery + "."
-	return rtn
+	promptFormattingInstruction := "Please ensure any command line suggestions or code snippets that are meant to be run by the user are enclosed in triple backquotes for easy copy and paste into the terminal."
+	promptQuestion := " The user's question is:\n\n" + userQuery + ""
+
+	return promptBase + promptCurrentCommand + promptFormattingInstruction + promptQuestion
 }
 
 func doOpenAICmdInfoCompletion(cmd *sstore.CmdType, clientId string, opts *sstore.OpenAIOptsType, prompt []packet.OpenAIPromptMessageType, curLineStr string) {
@@ -2641,7 +2647,6 @@ func doOpenAICmdInfoCompletion(cmd *sstore.CmdType, clientId string, opts *sstor
 			doneWaitingForPackets = true
 			asstOutputPk.Error = "timeout waiting for server response"
 			updateAsstResponseAndWriteToUpdateBus(ctx, cmd, asstMessagePk, asstOutputMessageID)
-			break
 		case pk, ok := <-ch:
 			if ok {
 				// got a packet
@@ -2667,11 +2672,9 @@ func doOpenAICmdInfoCompletion(cmd *sstore.CmdType, clientId string, opts *sstor
 				}
 				asstMessagePk.AssistantResponse = asstOutputPk
 				updateAsstResponseAndWriteToUpdateBus(ctx, cmd, asstMessagePk, asstOutputMessageID)
-
 			} else {
 				// channel closed
 				doneWaitingForPackets = true
-				break
 			}
 		}
 	}
@@ -2739,7 +2742,6 @@ func doOpenAIStreamCompletion(cmd *sstore.CmdType, clientId string, opts *sstore
 				return
 			}
 			doneWaitingForPackets = true
-			break
 		case pk, ok := <-ch:
 			if ok {
 				// got a packet
@@ -2755,7 +2757,6 @@ func doOpenAIStreamCompletion(cmd *sstore.CmdType, clientId string, opts *sstore
 			} else {
 				// channel closed
 				doneWaitingForPackets = true
-				break
 			}
 		}
 	}
@@ -2779,6 +2780,14 @@ func BuildOpenAIPromptArrayWithContext(messages []*packet.OpenAICmdInfoChatMessa
 	return rtn
 }
 
+func GetOsTypeFromRuntime() string {
+	osVal := runtime.GOOS
+	if osVal == "darwin" {
+		osVal = "macos"
+	}
+	return osVal
+}
+
 func OpenAICommand(ctx context.Context, pk *scpacket.FeCommandPacketType) (scbus.UpdatePacket, error) {
 	ids, err := resolveUiIds(ctx, pk, R_Session|R_Screen)
 	if err != nil {
@@ -2825,7 +2834,8 @@ func OpenAICommand(ctx context.Context, pk *scpacket.FeCommandPacketType) (scbus
 		}
 		curLineStr := defaultStr(pk.Kwargs["curline"], "")
 		userQueryPk := &packet.OpenAICmdInfoChatMessage{UserQuery: promptStr, MessageID: sstore.ScreenMemGetCmdInfoMessageCount(cmd.ScreenId)}
-		engineeredQuery := getCmdInfoEngineeredPrompt(promptStr, curLineStr)
+		osType := GetOsTypeFromRuntime()
+		engineeredQuery := getCmdInfoEngineeredPrompt(promptStr, curLineStr, ids.Remote.ShellType, osType)
 		userQueryPk.UserEngineeredQuery = engineeredQuery
 		writePacketToUpdateBus(ctx, cmd, userQueryPk)
 		prompt := BuildOpenAIPromptArrayWithContext(sstore.ScreenMemGetCmdInfoChat(cmd.ScreenId).Messages)
diff --git a/wavesrv/pkg/scbase/scbase.go b/wavesrv/pkg/scbase/scbase.go
index bc9ab45ba..3bc397156 100644
--- a/wavesrv/pkg/scbase/scbase.go
+++ b/wavesrv/pkg/scbase/scbase.go
@@ -35,14 +35,16 @@ const WaveLockFile = "waveterm.lock"
 const WaveDirName = ".waveterm"        // must match emain.ts
 const WaveDevDirName = ".waveterm-dev" // must match emain.ts
 const WaveAppPathVarName = "WAVETERM_APP_PATH"
-const WaveVersion = "v0.6.1"
 const WaveAuthKeyFileName = "waveterm.authkey"
 const MShellVersion = "v0.4.0"
 
 var SessionDirCache = make(map[string]string)
 var ScreenDirCache = make(map[string]string)
 var BaseLock = &sync.Mutex{}
+
+// these are set by the main-server using build-time variables
 var BuildTime = "-"
+var WaveVersion = "-"
 
 func IsDevMode() bool {
 	pdev := os.Getenv(WaveDevVarName)