diff --git a/src/app/common/common.tsx b/src/app/common/common.tsx
index 85c0bfd9..f4b2b3dc 100644
--- a/src/app/common/common.tsx
+++ b/src/app/common/common.tsx
@@ -12,8 +12,10 @@ 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 XMarkIcon } from "../assets/icons/line/xmark.svg";
 import { ReactComponent as RotateIcon } from "../assets/icons/rotate_left.svg";
 import { ReactComponent as CircleInfoIcon } from "../assets/icons/circle_info.svg";
+import { ReactComponent as PenIcon } from "../assets/icons/favourites/pen.svg";
 
 import "./common.less";
 
@@ -212,9 +214,7 @@ class InlineSettingsTextEdit extends React.Component<
                                 title="Cancel (Esc)"
                                 className="button is-prompt-danger is-outlined is-small"
                             >
-                                <span className="icon is-small">
-                                    <i className="fa-sharp fa-solid fa-xmark" />
-                                </span>
+                                <XMarkIcon className="icon" />
                             </div>
                         </div>
                         <div className="control">
@@ -223,9 +223,7 @@ class InlineSettingsTextEdit extends React.Component<
                                 title="Confirm (Enter)"
                                 className="button is-prompt-green is-outlined is-small"
                             >
-                                <span className="icon is-small">
-                                    <i className="fa-sharp fa-solid fa-check" />
-                                </span>
+                                <CheckIcon className="icon" />
                             </div>
                         </div>
                     </div>
@@ -236,8 +234,7 @@ class InlineSettingsTextEdit extends React.Component<
                 <div onClick={this.clickEdit} className={cn("settings-input inline-edit", "edit-not-active")}>
                     {this.props.text}
                     <If condition={this.props.showIcon}>
-                        {" "}
-                        <i className="fa-sharp fa-solid fa-pen" />
+                        <PenIcon className="icon" />
                     </If>
                 </div>
             );
diff --git a/src/app/common/modals/modals.less b/src/app/common/modals/modals.less
index 4d76cac5..5de14313 100644
--- a/src/app/common/modals/modals.less
+++ b/src/app/common/modals/modals.less
@@ -154,9 +154,25 @@
         padding: 1em;
         margin: 0;
         border-top: 1px solid fade(@base-border, 50%);
+        .icon {
+            display: inline;
+            width: 1em;
+            height: 1em;
+            margin: 0 0.25em 0 1em;
+            vertical-align: middle;
+        }
         &.is-hidden {
             display: none;
         }
+        .dropdown-trigger button {
+            justify-content: flex-start;
+            display: flex;
+            color: @base-color;
+            border: none !important;
+            &:hover {
+                box-shadow: none;
+            }
+        }
     }
 
     footer {
@@ -197,6 +213,10 @@
         .settings-label {
             width: 150px;
         }
+        .dropdown-menu {
+            min-width: 7.25em;
+            max-width: 7.25em;
+        }
     }
 }
 
@@ -245,6 +265,16 @@
         flex-direction: row;
         align-items: center;
 
+        &.inline-edit {
+            .icon {
+                display: inline;
+                width: 1em;
+                height: 1em;
+                margin-left: 1em;
+                vertical-align: middle;
+            }
+        }
+
         &.inline-edit.edit-not-active {
             cursor: pointer;
 
@@ -279,6 +309,11 @@
         }
 
         .control {
+            .icon {
+                width: 1.5em;
+                height: 1.5em;
+                margin: 0;
+            }
         }
 
         .tab-color-icon.color-default path {
diff --git a/src/app/common/modals/settings.tsx b/src/app/common/modals/settings.tsx
index 947dbaee..35c6f5d8 100644
--- a/src/app/common/modals/settings.tsx
+++ b/src/app/common/modals/settings.tsx
@@ -11,6 +11,7 @@ import { PluginModel } from "../../../plugins/plugins";
 import * as util from "../../../util/util";
 import { ReactComponent as SquareIcon } from "../../assets/icons/tab/square.svg";
 import { ReactComponent as XmarkIcon } from "../../assets/icons/line/xmark.svg";
+import { ReactComponent as AngleDownIcon } from "../../assets/icons/history/angle-down.svg";
 
 import "./modals.less";
 
@@ -635,11 +636,9 @@ class ClientSettingsModal extends React.Component<{}, {}> {
         return (
             <div className={cn("dropdown", "font-size-dropdown", { "is-active": this.fontSizeDropdownActive.get() })}>
                 <div className="dropdown-trigger">
-                    <button onClick={this.togglefontSizeDropdown} className="button is-small is-dark">
+                    <button onClick={this.togglefontSizeDropdown} className="button">
                         <span>{this.tempFontSize.get()}px</span>
-                        <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">
@@ -696,7 +695,7 @@ class ClientSettingsModal extends React.Component<{}, {}> {
                 <div className="modal-background" />
                 <div className="modal-content">
                     <header>
-                        <div className="modal-title">client settings</div>
+                        <div className="modal-title">Client settings</div>
                         <div className="close-icon hoverEffect" title="Close (Escape)" onClick={this.closeModal}>
                             <XmarkIcon />
                         </div>
diff --git a/src/app/connections/connections.less b/src/app/connections/connections.less
index cbec67ab..10e8adf6 100644
--- a/src/app/connections/connections.less
+++ b/src/app/connections/connections.less
@@ -8,6 +8,7 @@
         width: 1em;
         height: 1em;
         fill: @base-color;
+        margin: 0;
     }
     .button {
         svg {
@@ -121,13 +122,9 @@
                 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 {
@@ -252,7 +249,6 @@
 
     .terminal-wrapper {
         position: relative;
-        background-color: #000;
         padding: 2px 10px 5px 4px;
         margin: 5px 5px 10px 5px;
         box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.3);