diff --git a/teachertool/src/components/DebugInput.tsx b/teachertool/src/components/DebugInput.tsx
index 22df0914a07e..7f4bb9de8795 100644
--- a/teachertool/src/components/DebugInput.tsx
+++ b/teachertool/src/components/DebugInput.tsx
@@ -10,25 +10,12 @@ import { runEvaluateAsync } from "../transforms/runEvaluateAsync";
 interface IProps {}
 
 export const DebugInput: React.FC<IProps> = ({}) => {
-    const [shareLink, setShareLink] = useState("https://makecode.microbit.org/S95591-52406-50965-65671");
-
     const evaluate = async () => {
-        await loadProjectMetadataAsync(shareLink);
         await runEvaluateAsync();
     };
 
     return (
         <div className="debug-container">
-            <div className="single-share-link-input-container">
-                {lf("Share Link:")}
-                <Input
-                    id="shareLinkInput"
-                    className="link-input"
-                    placeholder={lf("Share link to validate")}
-                    initialValue={shareLink}
-                    onChange={setShareLink}
-                />
-            </div>
             <Button
                 id="evaluateSingleProjectButton"
                 className="btn-primary"
@@ -38,4 +25,4 @@ export const DebugInput: React.FC<IProps> = ({}) => {
             />
         </div>
     );
-};
\ No newline at end of file
+};
diff --git a/teachertool/src/components/EvalResultDisplay.tsx b/teachertool/src/components/EvalResultDisplay.tsx
index 5f4afe038ade..b8a6127aef2c 100644
--- a/teachertool/src/components/EvalResultDisplay.tsx
+++ b/teachertool/src/components/EvalResultDisplay.tsx
@@ -28,20 +28,24 @@ export const EvalResultDisplay: React.FC<IProps> = ({}) => {
                     {Object.keys(teacherTool.evalResults ?? {}).map(criteriaInstanceId => {
                         const result = teacherTool.evalResults[criteriaInstanceId];
                         const label = getTemplateStringFromCriteriaInstanceId(criteriaInstanceId);
-                        return label && (
-                            <div className="result-block-id" key={criteriaInstanceId}>
-                                <p className="block-id-label">
-                                    {getTemplateStringFromCriteriaInstanceId(criteriaInstanceId)}:
-                                </p>
-                                {result === CriteriaEvaluationResult.InProgress && <div className="common-spinner" />}
-                                {result === CriteriaEvaluationResult.CompleteWithNoResult && <p>{lf("N/A")}</p>}
-                                {result === CriteriaEvaluationResult.Fail && (
-                                    <p className="negative-text">{lf("Needs Work")}</p>
-                                )}
-                                {result === CriteriaEvaluationResult.Pass && (
-                                    <p className="positive-text">{lf("Looks Good!")}</p>
-                                )}
-                            </div>
+                        return (
+                            label && (
+                                <div className="result-block-id" key={criteriaInstanceId}>
+                                    <p className="block-id-label">
+                                        {getTemplateStringFromCriteriaInstanceId(criteriaInstanceId)}:
+                                    </p>
+                                    {result === CriteriaEvaluationResult.InProgress && (
+                                        <div className="common-spinner" />
+                                    )}
+                                    {result === CriteriaEvaluationResult.CompleteWithNoResult && <p>{lf("N/A")}</p>}
+                                    {result === CriteriaEvaluationResult.Fail && (
+                                        <p className="negative-text">{lf("Needs Work")}</p>
+                                    )}
+                                    {result === CriteriaEvaluationResult.Pass && (
+                                        <p className="positive-text">{lf("Looks Good!")}</p>
+                                    )}
+                                </div>
+                            )
                         );
                     })}
                 </div>
diff --git a/teachertool/src/components/HeaderBar.tsx b/teachertool/src/components/HeaderBar.tsx
index 0bbdbe9007c2..d912d15ce290 100644
--- a/teachertool/src/components/HeaderBar.tsx
+++ b/teachertool/src/components/HeaderBar.tsx
@@ -73,7 +73,7 @@ export const HeaderBar: React.FC<HeaderBarProps> = () => {
     };
 
     return (
-        <MenuBar className={css["header"]} ariaLabel={lf("Header")}>
+        <MenuBar className={css["header"]} ariaLabel={lf("Header")} role="navigation">
             <div className={css["left-menu"]}>
                 {getOrganizationLogo()}
                 {getTargetLogo()}
diff --git a/teachertool/src/components/MainPanel.tsx b/teachertool/src/components/MainPanel.tsx
index 1ea3eaf6e9f0..0008ed3f4e9e 100644
--- a/teachertool/src/components/MainPanel.tsx
+++ b/teachertool/src/components/MainPanel.tsx
@@ -2,11 +2,10 @@ import * as React from "react";
 // eslint-disable-next-line import/no-internal-modules
 import css from "./styling/MainPanel.module.scss";
 
-import { DebugInput } from "./DebugInput";
 import { MakeCodeFrame } from "./MakecodeFrame";
-import { EvalResultDisplay } from "./EvalResultDisplay";
-import { ActiveRubricDisplay } from "./ActiveRubricDisplay";
 import { SplitPane } from "./SplitPane";
+import { RubricWorkspace } from "./RubricWorkspace";
+import { ProjectWorkspace } from "./ProjectWorkspace";
 
 interface IProps {}
 
@@ -16,13 +15,11 @@ export const MainPanel: React.FC<IProps> = () => {
             <SplitPane split={"vertical"} defaultSize={"80%"} primary={"left"}>
                 {/* Left side */}
                 <>
-                    <DebugInput />
-                    <ActiveRubricDisplay />
-                    <EvalResultDisplay />
+                    <RubricWorkspace />
                 </>
                 {/* Right side */}
                 <>
-                    <MakeCodeFrame />
+                    <ProjectWorkspace />
                 </>
             </SplitPane>
         </div>
diff --git a/teachertool/src/components/MakecodeFrame.tsx b/teachertool/src/components/MakecodeFrame.tsx
index 76d88ead937c..8f8922a36b84 100644
--- a/teachertool/src/components/MakecodeFrame.tsx
+++ b/teachertool/src/components/MakecodeFrame.tsx
@@ -1,12 +1,16 @@
 /// <reference path="../../../built/pxteditor.d.ts" />
+
+// eslint-disable-next-line import/no-internal-modules
+import css from "./styling/MakeCodeFrame.module.scss";
+
 import { useContext, useEffect } from "react";
 import { clearReady, setEditorRef } from "../services/makecodeEditorService";
 import { AppStateContext } from "../state/appStateContext";
 import { getEditorUrl } from "../utils";
 
-interface MakeCodeFrameProps {}
+interface IProps {}
 
-export const MakeCodeFrame: React.FC<MakeCodeFrameProps> = () => {
+export const MakeCodeFrame: React.FC<IProps> = () => {
     const { state: teacherTool } = useContext(AppStateContext);
 
     // Clear iframe state when the iframe url is changed
@@ -32,17 +36,13 @@ export const MakeCodeFrame: React.FC<MakeCodeFrameProps> = () => {
     };
 
     /* eslint-disable @microsoft/sdl/react-iframe-missing-sandbox */
-    return (
-        <div className="makecode-frame-outer" style={{ display: "block" }}>
-            {teacherTool.projectMetadata && (
-                <iframe
-                    className="makecode-frame"
-                    src={createIFrameUrl(teacherTool.projectMetadata.id)}
-                    title={"title"}
-                    ref={handleIFrameRef}
-                />
-            )}
-        </div>
-    );
+    return teacherTool.projectMetadata ? (
+        <iframe
+            className={css["makecode-frame"]}
+            src={createIFrameUrl(teacherTool.projectMetadata.id)}
+            title={"title"}
+            ref={handleIFrameRef}
+        />
+    ) : null;
     /* eslint-enable @microsoft/sdl/react-iframe-missing-sandbox */
 };
diff --git a/teachertool/src/components/ProjectWorkspace.tsx b/teachertool/src/components/ProjectWorkspace.tsx
new file mode 100644
index 000000000000..f912853f5708
--- /dev/null
+++ b/teachertool/src/components/ProjectWorkspace.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+// eslint-disable-next-line import/no-internal-modules
+import css from "./styling/ProjectWorkspace.module.scss";
+
+import { Toolbar } from "./Toolbar";
+import { ShareLinkInput } from "./ShareLinkInput";
+import { MakeCodeFrame } from "./MakecodeFrame";
+
+interface IProps {}
+
+export const ProjectWorkspace: React.FC<IProps> = () => {
+    return (
+        <div className={css.panel}>
+            <Toolbar>
+                {/* Left */}
+                <></>
+                {/* Center */}
+                <></>
+                {/* Right */}
+                <></>
+            </Toolbar>
+            <ShareLinkInput />
+            <MakeCodeFrame />
+        </div>
+    );
+};
diff --git a/teachertool/src/components/RubricWorkspace.tsx b/teachertool/src/components/RubricWorkspace.tsx
new file mode 100644
index 000000000000..00f683425f4e
--- /dev/null
+++ b/teachertool/src/components/RubricWorkspace.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+// eslint-disable-next-line import/no-internal-modules
+import css from "./styling/RubricWorkspace.module.scss";
+
+import { DebugInput } from "./DebugInput";
+import { EvalResultDisplay } from "./EvalResultDisplay";
+import { ActiveRubricDisplay } from "./ActiveRubricDisplay";
+
+interface IProps {}
+
+export const RubricWorkspace: React.FC<IProps> = () => {
+    return (
+        <>
+            <DebugInput />
+            <ActiveRubricDisplay />
+            <EvalResultDisplay />
+        </>
+    );
+};
diff --git a/teachertool/src/components/ShareLinkInput.tsx b/teachertool/src/components/ShareLinkInput.tsx
new file mode 100644
index 000000000000..ef8fa814ad80
--- /dev/null
+++ b/teachertool/src/components/ShareLinkInput.tsx
@@ -0,0 +1,52 @@
+import * as React from "react";
+// eslint-disable-next-line import/no-internal-modules
+import css from "./styling/ShareLinkInput.module.scss";
+
+import { useContext, useState, useMemo, useCallback, useEffect } from "react";
+import { AppStateContext } from "../state/appStateContext";
+import { classList } from "react-common/components/util";
+import { Input } from "react-common/components/controls/Input";
+import { loadProjectMetadataAsync } from "../transforms/loadProjectMetadataAsync";
+
+interface IProps {
+}
+
+export const ShareLinkInput: React.FC<IProps> = () => {
+    const { state: teacherTool } = useContext(AppStateContext);
+    const { projectMetadata } = teacherTool;
+    const [text, setText] = useState("");
+    const [iconVisible, setIconVisible] = useState(false);
+
+    useEffect(() => {
+        const shareId = pxt.Cloud.parseScriptId(text);
+        setIconVisible(!!shareId && !(shareId === projectMetadata?.shortid || shareId === projectMetadata?.persistId));
+    }, [text, projectMetadata?.shortid, projectMetadata?.persistId]);
+
+    const onTextChange = (str: string) => {
+        setText(str);
+    };
+
+    const onEnterKey = useCallback(() => {
+        const shareId = pxt.Cloud.parseScriptId(text);
+        if (!!shareId && !(shareId === projectMetadata?.shortid || shareId === projectMetadata?.persistId)) {
+            loadProjectMetadataAsync(shareId);
+        }
+    }, [text, projectMetadata?.shortid, projectMetadata?.persistId]);
+
+    const icon = useMemo(() => {
+        return iconVisible ? "fas fa-arrow-right" : undefined;
+    }, [iconVisible]);
+
+    return (
+        <div className={classList(css["share-link-input"], "tt-share-link-input")}>
+            <Input
+                placeholder={lf("Enter Project Link or Share ID")}
+                ariaLabel={lf("Enter Project Link or Share ID")}
+                icon={icon}
+                onChange={onTextChange}
+                onEnterKey={onEnterKey}
+                preserveValueOnBlur={true}
+            ></Input>
+        </div>
+    );
+};
diff --git a/teachertool/src/components/Toolbar.tsx b/teachertool/src/components/Toolbar.tsx
new file mode 100644
index 000000000000..78c3f46018a7
--- /dev/null
+++ b/teachertool/src/components/Toolbar.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+// eslint-disable-next-line import/no-internal-modules
+import css from "./styling/Toolbar.module.scss";
+
+import { classList } from "react-common/components/util";
+
+interface IProps {
+    children: React.ReactNode;
+}
+
+export const Toolbar: React.FC<IProps> = ({ children }) => {
+    const [left, center, right] = React.Children.toArray(children);
+    return (
+        <div className={classList(css["toolbar"], "tt-toolbar")}>
+            <div className={classList(css["left"], "tt-toolbar-left")}>{left}</div>
+            <div className={classList(css["center"], "tt-toolbar-center")}>{center}</div>
+            <div className={classList(css["right"], "tt-toolbar-right")}>{right}</div>
+        </div>
+    );
+};
diff --git a/teachertool/src/components/styling/HeaderBar.module.scss b/teachertool/src/components/styling/HeaderBar.module.scss
index 8d4ce731d552..4c23e157ef3d 100644
--- a/teachertool/src/components/styling/HeaderBar.module.scss
+++ b/teachertool/src/components/styling/HeaderBar.module.scss
@@ -1,7 +1,3 @@
-/*******************************/
-/***** HEADER BAR  *****/
-/*******************************/
-
 .header {
     background-color: var(--pxt-headerbar-background);
     color: var(--pxt-headerbar-foreground);
diff --git a/teachertool/src/components/styling/MakeCodeFrame.module.scss b/teachertool/src/components/styling/MakeCodeFrame.module.scss
new file mode 100644
index 000000000000..ce3cf9905125
--- /dev/null
+++ b/teachertool/src/components/styling/MakeCodeFrame.module.scss
@@ -0,0 +1,7 @@
+.makecode-frame {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    border: none;
+}
diff --git a/teachertool/src/components/styling/ProjectWorkspace.module.scss b/teachertool/src/components/styling/ProjectWorkspace.module.scss
new file mode 100644
index 000000000000..1bb481c928f0
--- /dev/null
+++ b/teachertool/src/components/styling/ProjectWorkspace.module.scss
@@ -0,0 +1,11 @@
+.panel {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--pxt-headerbar-accent-smoke);
+
+    iframe {
+        flex: 1 1 0%;
+    }
+}
diff --git a/teachertool/src/components/styling/RubricWorkspace.module.scss b/teachertool/src/components/styling/RubricWorkspace.module.scss
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/teachertool/src/components/styling/ShareLinkInput.module.scss b/teachertool/src/components/styling/ShareLinkInput.module.scss
new file mode 100644
index 000000000000..4620910bf6c3
--- /dev/null
+++ b/teachertool/src/components/styling/ShareLinkInput.module.scss
@@ -0,0 +1,62 @@
+.share-link-input {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.625rem;
+    background-color: var(--pxt-content-background);
+    color: var(--pxt-content-foreground);
+    padding: 0 1rem 0 1rem;
+    border-top: solid 1px var(--pxt-content-accent);
+
+    div[class="common-input-wrapper"] {
+        width: 100%;
+
+        div[class="common-input-group"] {
+            border-radius: 99px;
+            border: solid 1px var(--pxt-content-accent);
+            padding: 0 1rem 0 1rem;
+
+            &:focus::after {
+                outline: none;
+                border-radius: 99px;
+                border: solid 2px var(--pxt-headerbar-accent-smoke);
+            }
+            &:focus-within::after {
+                outline: none;
+                border-radius: 99px;
+                border: solid 2px var(--pxt-headerbar-accent-smoke);
+            }
+
+            input {
+                width: 100%;
+                font-size: 1rem;
+                padding-left: 0;
+
+                &::placeholder {
+                    color: var(--pxt-content-accent);
+                    font-style: italic;
+                    text-align: center;
+                }
+            }
+
+            i {
+                background-color: var(--pxt-content-background);
+                border-radius: 99px;
+                width: 1.5rem;
+                height: 1.5rem;
+                top: 0;
+                bottom: 0;
+                right: 0.25rem;
+                margin-top: auto;
+                margin-bottom: auto;
+
+                &::before {
+                    font-size: 1rem;
+                    line-height: 1.5rem;
+                    color: var(--pxt-content-foreground);
+                    filter: saturate(0%);
+                }
+            }
+        }
+    }
+}
diff --git a/teachertool/src/components/styling/SplitPane.module.scss b/teachertool/src/components/styling/SplitPane.module.scss
index f41ea9665bff..92ac6878c384 100644
--- a/teachertool/src/components/styling/SplitPane.module.scss
+++ b/teachertool/src/components/styling/SplitPane.module.scss
@@ -20,7 +20,7 @@
 
 .splitter-vertical {
   background-color: var(--pxt-content-accent);
-  width: 0.5px;
+  width: 1px;
 }
 
 .splitter-vertical-inner {
diff --git a/teachertool/src/components/styling/Toolbar.module.scss b/teachertool/src/components/styling/Toolbar.module.scss
new file mode 100644
index 000000000000..60072ff2350e
--- /dev/null
+++ b/teachertool/src/components/styling/Toolbar.module.scss
@@ -0,0 +1,11 @@
+
+
+.toolbar {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    height: 2.625rem;
+    background-color: var(--pxt-content-background);
+    color: var(--pxt-content-foreground);
+}
+
diff --git a/teachertool/src/global.scss b/teachertool/src/global.scss
index 67865a9b282f..0b0a1e705d65 100644
--- a/teachertool/src/global.scss
+++ b/teachertool/src/global.scss
@@ -236,26 +236,6 @@ code {
     width: 100%;
 }
 
-/*******************************/
-/***** IFRAME STYLING  *****/
-/*******************************/
-
-.makecode-frame-outer {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    border: none;
-}
-
-.makecode-frame {
-    width: 100%;
-    height: 99%;
-    margin: 0;
-    padding: 0;
-    border: none;
-}
-
 /*******************************/
 /**** EVAL RESULTS STYLING  ****/
 /*******************************/
diff --git a/teachertool/src/utils/index.ts b/teachertool/src/utils/index.ts
index 08869e87a75f..77616451417c 100644
--- a/teachertool/src/utils/index.ts
+++ b/teachertool/src/utils/index.ts
@@ -1,5 +1,6 @@
 import { nanoid } from "nanoid";
 import { NotificationWithId } from "../types";
+import { classList } from "react-common/components/util";
 
 export function makeNotification(message: string, duration: number): NotificationWithId {
     return {
@@ -22,3 +23,7 @@ export const getEditorUrl = (embedUrl: string) => {
     const path = /\/([\da-zA-Z\.]+)(?:--)?/i.exec(window.location.pathname);
     return `${embedUrl.replace(/\/$/, "")}/${path?.[1] || ""}`;
 };
+
+export function classes(css: { [name: string]: string }, ...names: string[]) {
+    return classList(...names.map(n => css[n]));
+}
diff --git a/theme/themepacks.less b/theme/themepacks.less
index 0d15bbd0f3a8..d00040c936da 100644
--- a/theme/themepacks.less
+++ b/theme/themepacks.less
@@ -18,6 +18,7 @@
     --pxt-headerbar-background-glass: #47556940;
     --pxt-headerbar-foreground: white;
     --pxt-headerbar-accent: #475569;
+    --pxt-headerbar-accent-smoke: #334155;
     /// Content area
     --pxt-content-background: #C7D2FE;
     --pxt-content-background-glass: #C7D2FE40;