diff --git a/src/main.tsx b/src/main.tsx
index 3b6207ee3..d1b12df1a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -27,6 +27,7 @@ const PasswordUnchangedSentinel = "--unchanged--";
 const LinesVisiblePadding = 500;
 
 const RemoteColors = ["red", "green", "yellow", "blue", "magenta", "cyan", "white", "orange"];
+const TabColors = ["red", "green", "yellow", "blue", "magenta", "cyan", "white", "orange", "black"];
 
 type OV<V> = mobx.IObservableValue<V>;
 type OArr<V> = mobx.IObservableArray<V>;
@@ -2628,6 +2629,21 @@ class AlertModal extends React.Component<{}, {}> {
 
 @mobxReact.observer
 class ScreenSettingsModal extends React.Component<{sessionId : string, screenId : string}, {}> {
+    tempName : OV<string>;
+    tempTabColor : OV<string>;
+    tabColorDropdownOpen : OV<boolean> = mobx.observable.box(false, {name: "tabColorDropdownOpen"});
+
+    constructor(props : any) {
+        super(props);
+        let {sessionId, screenId} = props;
+        let screen = GlobalModel.getScreenById(sessionId, screenId);
+        if (screen == null) {
+            return;
+        }
+        this.tempName = mobx.observable.box(screen.name.get(), {name: "screenSettings-tempName"});
+        this.tempTabColor = mobx.observable.box(screen.getTabColor(), {name: "screenSettings-tempTabColor"});
+    }
+    
     @boundMethod
     closeModal() : void {
         mobx.action(() => {
@@ -2639,21 +2655,35 @@ class ScreenSettingsModal extends React.Component<{sessionId : string, screenId
     handleOK() : void {
         mobx.action(() => {
             GlobalModel.screenSettingsModal.set(null);
+            GlobalCommandRunner.screenSetSettings({
+                "tabcolor": this.tempTabColor.get(),
+                "name": this.tempName.get(),
+            });
         })();
         console.log("ok");
     }
-    
+
+    @boundMethod
+    handleChangeName(e : any) : void {
+        mobx.action(() => {
+            this.tempName.set(e.target.value);
+        })();
+    }
+
+    @boundMethod
+    selectTabColor(color : string) : void {
+        mobx.action(() => {
+            this.tempTabColor.set(color);
+        })();
+    }
+
     render() {
         let {sessionId, screenId} = this.props;
         let screen = GlobalModel.getScreenById(sessionId, screenId);
         if (screen == null) {
             return null;
         }
-        let opts = screen.opts.get();
-        let tabColor = "default";
-        if (opts != null && !isBlank(opts.tabcolor)) {
-            tabColor = opts.tabcolor;
-        }
+        let color : string = null;
         return (
             <div className={cn("modal screen-settings-modal prompt-modal is-active")}>
                 <div className="modal-background"/>
@@ -2665,23 +2695,36 @@ class ScreenSettingsModal extends React.Component<{sessionId : string, screenId
                         </div>
                     </header>
                     <div className="inner-content">
-                        <div>
-                            sessionid - {screen.sessionId}
+                        <div className="settings-field">
+                            <div className="settings-label">
+                                Name
+                            </div>
+                            <div className="settings-input">
+                                <input type="text" placeholder="Tab Name" onChange={this.handleChangeName} value={this.tempName.get()} maxlength="50"/>
+                            </div>
                         </div>
-                        <div>
-                            screenid - {screen.screenId}
-                        </div>
-                        <div>
-                            name - {screen.name.get()}
-                        </div>
-                        <div>
-                            tabcolor - {tabColor}
-                        </div>
-                        <div>
-                            archived - {screen.archived.get() ? "true" : "false"}
-                        </div>
-                        <div>
-                            index - {screen.screenIdx.get()}
+                        <div className="settings-field">
+                            <div className="settings-label">
+                                Tab Color
+                            </div>
+                            <div className="settings-input">
+                                <div className="tab-colors">
+                                    <div className="tab-color-cur">
+                                        <span className={cn("icon tab-color-icon", "color-" + this.tempTabColor.get())}>
+                                            <i className="fa-sharp fa-solid fa-square"/>
+                                        </span>
+                                        <span>{this.tempTabColor.get()}</span>
+                                    </div>
+                                    <div className="tab-color-sep">|</div>
+                                    <For each="color" of={TabColors}>
+                                        <div key={color} className="tab-color-select" onClick={() => this.selectTabColor(color)}>
+                                            <span className={cn("tab-color-icon", "color-" + color)}>
+                                                <i className="fa-sharp fa-solid fa-square"/>
+                                            </span>
+                                        </div>
+                                    </For>
+                                </div>
+                            </div>
                         </div>
                     </div>
                     <footer>
@@ -2842,7 +2885,7 @@ class Main extends React.Component<{}, {}> {
                     <WelcomeModal/>
                 </If>
                 <If condition={ssm != null}>
-                    <ScreenSettingsModal sessionId={ssm.sessionId} screenId={ssm.screenId}/>
+                    <ScreenSettingsModal key={ssm.sessionId + ":" + ssm.screenId} sessionId={ssm.sessionId} screenId={ssm.screenId}/>
                 </If>
             </div>
         );
diff --git a/src/model.ts b/src/model.ts
index df23d44e5..71a178d0f 100644
--- a/src/model.ts
+++ b/src/model.ts
@@ -3218,6 +3218,12 @@ class CommandRunner {
         GlobalModel.submitCommand("screen", "set", null, {"focus": focusVal, "nohist": "1"}, false);
     }
 
+    screenSetSettings(settings : {tabcolor? : string, name? : string}) : void {
+        let kwargs = Object.assign({}, settings);
+        kwargs["nohist"] = "1";
+        GlobalModel.submitCommand("screen", "set", null, kwargs, true);
+    }
+
     lineStar(lineId : string, starVal : number) {
         GlobalModel.submitCommand("line", "star", [lineId, String(starVal)], {"nohist": "1"}, true);
     }
diff --git a/src/sh2.less b/src/sh2.less
index 6e7ea8b95..f4a8798fb 100644
--- a/src/sh2.less
+++ b/src/sh2.less
@@ -2771,3 +2771,78 @@ input[type=checkbox] {
     }
 }
 
+.settings-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .settings-label {
+        font-weight: bold;
+        color: #fff;
+        width: 120px;
+    }
+
+    .settings-input {
+        input {
+            padding: 4px;
+            border-radius: 3px;
+        }
+        .tab-color-icon.color-green {
+            color: desaturate(@tab-green, 30%);
+        }
+        .tab-color-icon.color-orange {
+            color: desaturate(@tab-orange, 30%);
+        }
+        .tab-color-icon.color-red {
+            color: desaturate(@tab-red, 20%);
+        }
+        .tab-color-icon.color-yellow {
+            color: desaturate(@tab-yellow, 30%);
+        }
+        .tab-color-icon.color-blue {
+            color: desaturate(@tab-blue, 20%);
+        }
+        .tab-color-icon.color-magenta {
+            color: desaturate(@tab-magenta, 20%);
+        }
+        .tab-color-icon.color-cyan {
+            color: desaturate(@tab-cyan, 20%);
+        }
+        .tab-color-icon.color-white {
+            color: @term-white;
+        }
+        .tab-color-icon.color-black {
+            color: lighten(@tab-black, 20%);
+        }
+
+        .tab-colors {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            .tab-color-sep {
+                padding-left: 10px;
+                padding-right: 10px;
+                font-weight: bold;
+            }
+
+            .tab-color-cur {
+                font-size: 12px;
+                width: 100px;
+            }
+
+            .tab-color-select {
+                cursor: pointer;
+                margin: 5px;
+                line-height: 1;
+                &:hover {
+                    outline: 2px solid white;
+                }
+            }
+        }
+    }
+
+    &:not(:first-child) {
+        margin-top: 10px;
+    }
+}