diff --git a/src/app/app.less b/src/app/app.less
index ad0242d0..b54c3b5c 100644
--- a/src/app/app.less
+++ b/src/app/app.less
@@ -91,7 +91,7 @@ svg.icon {
 .dropdown,
 .button {
     display: inline-block;
-    border: none;
+    border: 1px solid @base-border !important;
     border-radius: 5px;
     cursor: pointer;
     background-color: @button-background !important;
diff --git a/src/app/assets/icons/circle.svg b/src/app/assets/icons/circle.svg
new file mode 100644
index 00000000..89c0df30
--- /dev/null
+++ b/src/app/assets/icons/circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>
\ No newline at end of file
diff --git a/src/app/assets/icons/key.svg b/src/app/assets/icons/key.svg
new file mode 100644
index 00000000..b8ff7cd6
--- /dev/null
+++ b/src/app/assets/icons/key.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391l-7 7V408v80 24H24h80 24V488 448h40 24V424 384h40 9.9l7-7 33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z"/></svg>
\ No newline at end of file
diff --git a/src/app/assets/icons/rotate_left.svg b/src/app/assets/icons/rotate_left.svg
new file mode 100644
index 00000000..2627361d
--- /dev/null
+++ b/src/app/assets/icons/rotate_left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M142.9 142.9L200 200l-24 24H16V64L40 40 97.6 97.6l0 0c87.5-87.5 229.3-87.5 316.8 0s87.5 229.3 0 316.8s-229.3 87.5-316.8 0l45.3-45.3c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3s-163.8-62.5-226.3 0l0 0z"/></svg>
\ No newline at end of file
diff --git a/src/app/bookmarks/bookmarks.tsx b/src/app/bookmarks/bookmarks.tsx
index 823c7cc9..2e423c7a 100644
--- a/src/app/bookmarks/bookmarks.tsx
+++ b/src/app/bookmarks/bookmarks.tsx
@@ -12,7 +12,7 @@ import { ReactComponent as XmarkIcon } from "../assets/icons/line/xmark.svg";
 import { ReactComponent as CopyIcon } from "../assets/icons/favourites/copy.svg";
 import { ReactComponent as PenIcon } from "../assets/icons/favourites/pen.svg";
 import { ReactComponent as TrashIcon } from "../assets/icons/favourites/trash.svg";
-import { ReactComponent as FavouritesIcon } from "../assets/icons/favourites.svg";
+import { ReactComponent as FavoritesIcon } from "../assets/icons/favourites.svg";
 
 import "./bookmarks.less";
 
@@ -192,7 +192,7 @@ class BookmarksView extends React.Component<{}, {}> {
         return (
             <div className={cn("bookmarks-view", { "is-hidden": isHidden })}>
                 <div className="header">
-                    <div className="bookmarks-title">Favourites</div>
+                    <div className="bookmarks-title">Favorites</div>
                     <div className="close-button hoverEffect" title="Close (Escape)" onClick={this.closeView}>
                         <XmarkIcon className={"icon"} />
                     </div>
@@ -205,7 +205,7 @@ class BookmarksView extends React.Component<{}, {}> {
                         <div className="no-content">
                             No Bookmarks.
                             <br />
-                            Use the <FavouritesIcon className={"icon"} /> icon on commands to add your first bookmark.
+                            Use the <FavoritesIcon className={"icon"} /> icon on commands to add your first bookmark.
                         </div>
                     </If>
                 </div>
diff --git a/src/app/common/common.less b/src/app/common/common.less
index 20d53c36..286ee6ab 100644
--- a/src/app/common/common.less
+++ b/src/app/common/common.less
@@ -505,25 +505,25 @@
 }
 
 .remote-status {
-    margin-right: 5px;
-    position: relative;
-    top: -3px;
-    color: #c4a000;
+    width: 1em;
+    height: 1em;
+    display: inline;
+    fill: #c4a000;
 
     &.status-init,
     &.status-disconnected {
-        color: #c4a000;
+        fill: #c4a000;
     }
 
     &.status-connecting {
-        color: #c4a000;
+        fill: #c4a000;
     }
 
     &.status-connected {
-        color: #4e9a06;
+        fill: #4e9a06;
     }
 
     &.status-error {
-        color: #cc0000;
+        fill: #cc0000;
     }
 }
diff --git a/src/app/common/common.tsx b/src/app/common/common.tsx
index 2245708b..98de7a4c 100644
--- a/src/app/common/common.tsx
+++ b/src/app/common/common.tsx
@@ -10,6 +10,9 @@ import type { RemoteType } from "../../types/types";
 
 import { ReactComponent as CheckIcon } from "../assets/icons/line/check.svg";
 import { ReactComponent as CopyIcon } from "../assets/icons/history/copy.svg";
+import { ReactComponent as CircleIcon } from "../assets/icons/circle.svg";
+import { ReactComponent as KeyIcon } from "../assets/icons/key.svg";
+import { ReactComponent as RotateIcon } from "../assets/icons/rotate_left.svg";
 
 import "./common.less";
 
@@ -100,11 +103,11 @@ class RemoteStatusLight extends React.Component<{ remote: RemoteType }, {}> {
             status = remote.status;
             wfp = remote.waitingforpassword;
         }
-        let icon = "fa-sharp fa-solid fa-circle";
         if (status == "connecting") {
-            icon = wfp ? "fa-sharp fa-solid fa-key" : "fa-sharp fa-solid fa-rotate";
+            if (wfp) return <KeyIcon className={`remote-status status-${status}`} />;
+            else return <RotateIcon className={`remote-status status-${status}`} />;
         }
-        return <i className={cn("remote-status", icon, "status-" + status)} />;
+        return <CircleIcon className={`remote-status status-${status}`} />;
     }
 }
 
diff --git a/src/app/common/modals/modals.less b/src/app/common/modals/modals.less
index 15ecd6c8..4d76cac5 100644
--- a/src/app/common/modals/modals.less
+++ b/src/app/common/modals/modals.less
@@ -6,7 +6,7 @@
     z-index: 105;
 
     .modal-background {
-        background-color: rgba(10, 10, 10, 0.6);
+        background-color: @base-background-transparent;
     }
 }
 
@@ -14,9 +14,6 @@
     a:hover {
         text-decoration: underline;
     }
-
-    .content {
-    }
 }
 
 .disconnected-modal {
@@ -112,18 +109,29 @@
 .modal.prompt-modal {
     .modal-content {
         border-radius: 5px;
-        border: 5px solid #333;
+        background: @base-background;
+        box-shadow: 0px 2px 2px 0 rgba(255, 255, 255, 0.1), 0px 4px 5px 0 rgba(255, 255, 255, 0.2),
+            0px 0px 5px 2.5px rgba(255, 255, 255, 0.5);
+        padding-bottom: 0.5em;
     }
 
     header {
-        background-color: #000;
         display: flex;
         flex-direction: row;
         padding: 10px;
         position: relative;
+        background-color: @background-session-components-solid;
 
         .modal-title {
-            color: @prompt-green;
+            color: @base-color;
+            font-size: 1.5em;
+            .icon {
+                display: inline;
+                width: 1em;
+                height: 1em;
+                margin-right: 1em;
+                vertical-align: middle;
+            }
         }
 
         .close-icon {
@@ -143,12 +151,9 @@
     }
 
     .inner-content {
-        background-color: #222;
-        padding: 15px 10px 15px 10px;
-        color: @term-white;
-
+        padding: 1em;
         margin: 0;
-
+        border-top: 1px solid fade(@base-border, 50%);
         &.is-hidden {
             display: none;
         }
@@ -158,10 +163,7 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-        color: @term-white;
-        background-color: #222;
         padding: 15px 10px 10px 10px;
-        border-top: 1px solid #666;
     }
 }
 
@@ -229,8 +231,7 @@
 
     .settings-label {
         font-weight: bold;
-        color: #fff;
-        width: 120px;
+        width: 12em;
         display: flex;
         flex-direction: row;
         align-items: center;
diff --git a/src/app/common/modals/modals.tsx b/src/app/common/modals/modals.tsx
index f3655ef0..4ca8516d 100644
--- a/src/app/common/modals/modals.tsx
+++ b/src/app/common/modals/modals.tsx
@@ -10,6 +10,7 @@ import { GlobalModel } from "../../../model/model";
 import { Markdown } from "../common";
 
 import { ReactComponent as XmarkIcon } from "../../assets/icons/line/xmark.svg";
+import { ReactComponent as WarningIcon } from "../../assets/icons/line/triangle-exclamation.svg";
 
 dayjs.extend(localizedFormat);
 
@@ -88,9 +89,7 @@ class DisconnectedModal extends React.Component<{}, {}> {
                             <span>Try Reconnect</span>
                         </button>
                         <button onClick={this.restartServer} className="button is-danger" style={{ marginLeft: 10 }}>
-                            <span className="icon">
-                                <i className="fa-sharp fa-solid fa-triangle-exclamation" />
-                            </span>
+                            <WarningIcon className="icon" />
                             <span>Restart Server</span>
                         </button>
                     </footer>
@@ -176,7 +175,8 @@ class AlertModal extends React.Component<{}, {}> {
                 <div className="modal-content">
                     <header>
                         <p className="modal-title">
-                            <i className="fa-sharp fa-solid fa-triangle-exclamation" /> {title}
+                            <WarningIcon className="icon" />
+                            {title}
                         </p>
                         <div className="close-icon hoverEffect" title="Close (Escape)" onClick={this.closeModal}>
                             <XmarkIcon />
@@ -257,7 +257,7 @@ class WelcomeModal extends React.Component<{}, {}> {
         let pageNum = this.pageNum.get();
         return (
             <div className={cn("modal welcome-modal prompt-modal is-active")}>
-                <div className="modal-background" />
+                <div className="modal-background" onClick={this.closeModal} />
                 <div className="modal-content">
                     <header>
                         <div className="modal-title">welcome to [prompt]</div>
diff --git a/src/app/connections/connections.less b/src/app/connections/connections.less
index d637b238..cbec67ab 100644
--- a/src/app/connections/connections.less
+++ b/src/app/connections/connections.less
@@ -4,24 +4,41 @@
     .modal-content {
         min-width: 850px;
     }
-
+    .icon {
+        width: 1em;
+        height: 1em;
+        fill: @base-color;
+    }
+    .button {
+        svg {
+            float: right;
+            margin-top: 0.3em;
+            margin-right: 0;
+        }
+    }
+    .dropdown,
+    .button {
+        display: inline-flex;
+    }
+    .dropdown .button {
+        border: none !important;
+    }
     .inner-content {
         display: flex;
         flex-direction: row;
         align-items: stretch;
         padding: 0;
-        max-height: 80vh;
+        min-height: 45em;
+        max-height: 45em;
 
         .remotes-menu {
             flex: 0 0 200px;
-            min-height: 450px;
-            border-right: 1px solid #666;
+            border-right: 1px solid @disabled-color;
             overflow-y: auto;
-            height: 100px;
 
             .remote-menu-item {
-                border-top: 1px solid #666;
-                padding: 5px;
+                border-top: 1px solid @disabled-color;
+                padding: 0.5em;
                 display: flex;
                 flex-direction: row;
                 cursor: pointer;
@@ -47,8 +64,9 @@
                 }
 
                 .remote-status-light {
-                    width: 15px;
-                    margin-top: -2px;
+                    width: 2em;
+                    margin-top: 0.7em;
+                    font-size: 0.8em;
                 }
 
                 .remote-name {
@@ -56,10 +74,12 @@
 
                     .remote-name-primary {
                         font-weight: bold;
+                        max-width: 10em;
                     }
 
                     .remote-name-secondary {
-                        color: #777;
+                        color: @disabled-color;
+                        max-width: 14em;
                     }
                 }
             }
@@ -73,7 +93,7 @@
             flex-direction: column;
 
             .settings-field {
-                margin-top: 5px;
+                margin-top: 0.75em;
             }
 
             * {
@@ -87,7 +107,7 @@
 
             .title {
                 color: @term-white;
-                padding-bottom: 8px;
+                padding: 0.75em 0;
                 margin-bottom: 0;
                 border-bottom: 1px solid #777;
             }
@@ -95,13 +115,19 @@
             .terminal-wrapper {
                 margin-left: 0;
                 margin-bottom: 0;
-
                 &.has-message {
                     margin-top: 0;
                 }
-
                 box-shadow: none;
                 border: 1px solid #777;
+                border-radius: 0 0 5px 5px;
+                font-size: 0.8em !important;
+                .xterm-rows {
+                    padding-top: 0.5em;
+                }
+                .xterm-rows > div {
+                    font-size: 0.8em;
+                }
             }
 
             .action-buttons {
@@ -116,18 +142,16 @@
                 padding: 8px;
                 border-radius: 5px 5px 0 0;
                 background-color: #333;
-
-                i.fa-check {
-                    color: @term-green;
-                }
-
-                &.is-ok {
-                }
+                border: 1px solid #777;
+                border-bottom: none;
 
                 .message-row {
                     display: flex;
                     flex-direction: row;
                     align-items: center;
+                    svg {
+                        vertical-align: text-bottom;
+                    }
                 }
 
                 .remote-status {
@@ -174,7 +198,7 @@
                     display: flex;
                     flex-direction: row;
                     align-items: center;
-                    width: 135px;
+                    width: 12em !important;
                 }
 
                 .settings-field .settings-input .undo-icon {
@@ -186,6 +210,11 @@
                 .editremote-dropdown .dropdown-trigger button {
                     width: 120px;
                     justify-content: flex-start;
+                    color: @base-color;
+                    border: none;
+                    &:hover {
+                        box-shadow: none;
+                    }
                 }
 
                 .settings-field .raw-input {
@@ -193,16 +222,19 @@
                 }
 
                 .settings-input input {
+                    background: rgba(255, 255, 255, 0.8);
                     width: 250px;
-                }
-
-                .dropdown .dropdown-trigger button {
+                    outline: none;
                 }
 
                 .dropdown .dropdown-item {
                     padding: 5px 5px 5px 12px;
                 }
 
+                .dropdown .dropdown-content {
+                    max-width: 10.6em;
+                }
+
                 .settings-input {
                     .info-message {
                         margin-left: 22px;
diff --git a/src/app/connections/connections.tsx b/src/app/connections/connections.tsx
index 18d88f14..95a7c65d 100644
--- a/src/app/connections/connections.tsx
+++ b/src/app/connections/connections.tsx
@@ -11,6 +11,9 @@ import * as util from "../../util/util";
 import * as textmeasure from "../../util/textmeasure";
 
 import { ReactComponent as XmarkIcon } from "../assets/icons/line/xmark.svg";
+import { ReactComponent as AngleDownIcon } from "../assets/icons/history/angle-down.svg";
+import { ReactComponent as RotateLeftIcon } from "../assets/icons/rotate_left.svg";
+import { ReactComponent as AddIcon } from "../assets/icons/add.svg";
 
 import "./connections.less";
 
@@ -59,12 +62,10 @@ class AuthModeDropdown extends React.Component<{ tempVal: OV<string> }, {}> {
         return (
             <div className={cn("dropdown", "editremote-dropdown", { "is-active": this.active.get() })}>
                 <div className="dropdown-trigger">
-                    <button onClick={this.toggleActive} className="button is-small is-dark">
+                    <button onClick={this.toggleActive} className="button">
                         <span>{this.props.tempVal.get()}</span>
                         <div className="flex-spacer" />
-                        <span className="icon is-small">
-                            <i className="fa-sharp fa-regular fa-angle-down" aria-hidden="true"></i>
-                        </span>
+                        <AngleDownIcon className="icon" />
                     </button>
                 </div>
                 <div className="dropdown-menu" role="menu">
@@ -115,12 +116,10 @@ class ConnectModeDropdown extends React.Component<{ tempVal: OV<string> }, {}> {
         return (
             <div className={cn("dropdown", "editremote-dropdown", { "is-active": this.active.get() })}>
                 <div className="dropdown-trigger">
-                    <button onClick={this.toggleActive} className="button is-small is-dark">
+                    <button onClick={this.toggleActive} className="button">
                         <span>{this.props.tempVal.get()}</span>
                         <div className="flex-spacer" />
-                        <span className="icon is-small">
-                            <i className="fa-sharp fa-regular fa-angle-down" aria-hidden="true"></i>
-                        </span>
+                        <AngleDownIcon className="icon" />
                     </button>
                 </div>
                 <div className="dropdown-menu" role="menu">
@@ -700,8 +699,8 @@ class EditRemoteSettings extends React.Component<
                                 maxLength={400}
                             />
                             <If condition={this.canResetPw()}>
-                                <div className="undo-icon" title="restore to original password">
-                                    <i onClick={this.resetPw} className="icon fa-sharp fa-solid fa-rotate-left" />
+                                <div className="undo-icon" title="restore to original password" onClick={this.resetPw}>
+                                    <RotateLeftIcon className="icon" />
                                 </div>
                             </If>
                         </div>
@@ -1117,8 +1116,8 @@ class RemotesModal extends React.Component<{ model: RemotesModalModel }, {}> {
                 </If>
                 <If condition={!util.isBlank(remote.remotealias)}>
                     <div className="remote-name">
-                        <div className="remote-name-primary">{remote.remotealias}</div>
-                        <div className="remote-name-secondary">{remote.remotecanonicalname}</div>
+                        <div className="remote-name-primary truncate">{remote.remotealias}</div>
+                        <div className="remote-name-secondary truncate">{remote.remotecanonicalname}</div>
                     </div>
                 </If>
             </div>
@@ -1128,8 +1127,8 @@ class RemotesModal extends React.Component<{ model: RemotesModalModel }, {}> {
     renderAddRemoteMenuItem(): any {
         return (
             <div key="add" onClick={this.clickAddRemote} className={cn("remote-menu-item add-remote")}>
-                <div>
-                    <i className="fa-sharp fa-solid fa-plus" /> Add SSH Connection
+                <div className="hoverEffect" style={{ padding: "0.5em", borderRadius: "4px" }}>
+                    <AddIcon className="icon" /> Add SSH Connection
                 </div>
             </div>
         );
diff --git a/src/app/history/history.tsx b/src/app/history/history.tsx
index d8ba8f02..65629625 100644
--- a/src/app/history/history.tsx
+++ b/src/app/history/history.tsx
@@ -13,7 +13,7 @@ import customParseFormat from "dayjs/plugin/customParseFormat";
 import { Line } from "../line/linecomps";
 import { CmdStrCode } from "../common/common";
 
-import { ReactComponent as FavouritesIcon } from "../assets/icons/favourites.svg";
+import { ReactComponent as FavoritesIcon } from "../assets/icons/favourites.svg";
 import { ReactComponent as XmarkIcon } from "../assets/icons/line/xmark.svg";
 import { ReactComponent as AngleDownIcon } from "../assets/icons/history/angle-down.svg";
 import { ReactComponent as ChevronLeftIcon } from "../assets/icons/history/chevron-left.svg";
@@ -532,7 +532,7 @@ class HistoryView extends React.Component<{}, {}> {
                                     </If>
                                 </td>
                                 <td className="bookmark" style={{ display: "none" }}>
-                                    <FavouritesIcon className="icon" />
+                                    <FavoritesIcon className="icon" />
                                 </td>
                                 <td className="ts">{getHistoryViewTs(nowDate, item.ts)}</td>
                                 <td className="session">{formatSSName(snames, scrnames, item)}</td>
diff --git a/src/app/line/linecomps.tsx b/src/app/line/linecomps.tsx
index 87ce0216..395d56e9 100644
--- a/src/app/line/linecomps.tsx
+++ b/src/app/line/linecomps.tsx
@@ -21,7 +21,7 @@ import type {
 } from "../../types/types";
 import cn from "classnames";
 
-import { ReactComponent as FavouritesIcon } from "../assets/icons/favourites.svg";
+import { ReactComponent as FavoritesIcon } from "../assets/icons/favourites.svg";
 import { ReactComponent as PinIcon } from "../assets/icons/pin.svg";
 import { ReactComponent as PlusIcon } from "../assets/icons/plus.svg";
 import { ReactComponent as MinusIcon } from "../assets/icons/minus.svg";
@@ -644,7 +644,7 @@ class LineCmd extends React.Component<
                         className={cn("line-icon", "line-bookmark", "hoverEffect")}
                         onClick={this.clickBookmark}
                     >
-                        <FavouritesIcon className="icon" />
+                        <FavoritesIcon className="icon" />
                     </div>
                     <div
                         key="minimise"
@@ -709,7 +709,9 @@ class LineCmd extends React.Component<
                             <If condition={rsdiff != null && rsdiff != ""}>
                                 <div className="cmd-rtnstate-label">new state</div>
                                 <div className="cmd-rtnstate-sep"></div>
-                                <div className="cmd-rtnstate-diff" style={{fontSize: rtnStateDiffSize}}>{this.rtnStateDiff.get()}</div>
+                                <div className="cmd-rtnstate-diff" style={{ fontSize: rtnStateDiffSize }}>
+                                    {this.rtnStateDiff.get()}
+                                </div>
                             </If>
                         </div>
                     </If>
diff --git a/src/app/sidebar/MainSideBar.tsx b/src/app/sidebar/MainSideBar.tsx
index 6871711c..2f665073 100644
--- a/src/app/sidebar/MainSideBar.tsx
+++ b/src/app/sidebar/MainSideBar.tsx
@@ -11,7 +11,7 @@ import { ReactComponent as HelpIcon } from "../assets/icons/help.svg";
 import { ReactComponent as SettingsIcon } from "../assets/icons/settings.svg";
 import { ReactComponent as DiscordIcon } from "../assets/icons/discord.svg";
 import { ReactComponent as HistoryIcon } from "../assets/icons/history.svg";
-import { ReactComponent as FavouritesIcon } from "../assets/icons/favourites.svg";
+import { ReactComponent as FavoritesIcon } from "../assets/icons/favourites.svg";
 import { ReactComponent as AppsIcon } from "../assets/icons/apps.svg";
 import { ReactComponent as ConnectionsIcon } from "../assets/icons/connections.svg";
 import { ReactComponent as WorkspacesIcon } from "../assets/icons/workspaces.svg";
@@ -213,8 +213,8 @@ class MainSideBar extends React.Component<{}, {}> {
                             <span className="hotkey">&#x2318;H</span>
                         </div>
                         <div className="item hoverEffect" onClick={this.handleBookmarksClick}>
-                            <FavouritesIcon className="icon" />
-                            Favourites
+                            <FavoritesIcon className="icon" />
+                            Favorites
                             <span className="hotkey">&#x2318;B</span>
                         </div>
                         <div className="item hoverEffect" onClick={this.handleConnectionsClick}>