diff --git a/localtypings/pxtarget.d.ts b/localtypings/pxtarget.d.ts
index 9e80da123020..58c0781c0e85 100644
--- a/localtypings/pxtarget.d.ts
+++ b/localtypings/pxtarget.d.ts
@@ -540,6 +540,7 @@ declare namespace pxt {
         enabledFeatures?: pxt.Map<FeatureFlag>;
         forceEnableAiErrorHelp?: boolean; // Enables the AI Error Help feature, regardless of geo setting.
         shareHomepageContent?: boolean; // Show buttons to share links to homepage content more easily
+        showProjectDescription?: boolean; // Show project description in pxtjson editor and share dialog
     }
 
     interface DownloadDialogTheme {
diff --git a/localtypings/pxteditor.d.ts b/localtypings/pxteditor.d.ts
index 309cf0b11b23..357abd7f4855 100644
--- a/localtypings/pxteditor.d.ts
+++ b/localtypings/pxteditor.d.ts
@@ -989,7 +989,7 @@ declare namespace pxt.editor {
 
         anonymousPublishHeaderByIdAsync(headerId: string, projectName?: string): Promise<ShareData>;
         publishCurrentHeaderAsync(persistent: boolean, screenshotUri?: string): Promise<string>;
-        publishAsync (name: string, screenshotUri?: string, forceAnonymous?: boolean): Promise<ShareData>;
+        publishAsync (name: string, description?: string,screenshotUri?: string, forceAnonymous?: boolean): Promise<ShareData>;
 
         startStopSimulator(opts?: SimulatorStartOptions): void;
         stopSimulator(unload?: boolean, opts?: SimulatorStartOptions): void;
diff --git a/react-common/components/share/Share.tsx b/react-common/components/share/Share.tsx
index 6474dcfd880d..07e5ed6d8c80 100644
--- a/react-common/components/share/Share.tsx
+++ b/react-common/components/share/Share.tsx
@@ -18,6 +18,7 @@ export interface ShareData {
 
 export interface ShareProps {
     projectName: string;
+    projectDescription?: string;
     screenshotUri?: string;
     isLoggedIn?: boolean;
     hasProjectBeenPersistentShared?: boolean;
@@ -26,13 +27,14 @@ export interface ShareProps {
     kind?: "multiplayer" | "vscode" | "share"; // Arcade: Was the share dialog opened specifically for hosting a multiplayer game?
     setAnonymousSharePreference?: (anonymousByDefault: boolean) => void;
     simRecorder: SimRecorder;
-    publishAsync: (name: string, screenshotUri?: string, forceAnonymous?: boolean) => Promise<ShareData>;
+    publishAsync: (name: string, description?: string, screenshotUri?: string, forceAnonymous?: boolean) => Promise<ShareData>;
     onClose: () => void;
 }
 
 export const Share = (props: ShareProps) => {
     const {
         projectName,
+        projectDescription,
         screenshotUri,
         isLoggedIn,
         simRecorder,
@@ -47,6 +49,7 @@ export const Share = (props: ShareProps) => {
 
     return <div className="project-share">
         <ShareInfo projectName={projectName}
+            projectDescription={projectDescription}
             isLoggedIn={isLoggedIn}
             screenshotUri={screenshotUri}
             simRecorder={simRecorder}
diff --git a/react-common/components/share/ShareInfo.tsx b/react-common/components/share/ShareInfo.tsx
index 75e040407fe0..c6b3f8945a34 100644
--- a/react-common/components/share/ShareInfo.tsx
+++ b/react-common/components/share/ShareInfo.tsx
@@ -20,12 +20,12 @@ const vscodeDevUrl = "https://vscode.dev/edu/makecode/"
 
 export interface ShareInfoProps {
     projectName: string;
-    description?: string;
+    projectDescription?: string;
     screenshotUri?: string;
     isLoggedIn?: boolean;
     hasProjectBeenPersistentShared?: boolean;
     simRecorder: SimRecorder;
-    publishAsync: (name: string, screenshotUri?: string, forceAnonymous?: boolean) => Promise<ShareData>;
+    publishAsync: (name: string, description?: string, screenshotUri?: string, forceAnonymous?: boolean) => Promise<ShareData>;
     isMultiplayerGame?: boolean; // Arcade: Does the game being shared have multiplayer enabled?
     kind?: "multiplayer" | "vscode" | "share"; // Arcade: Was the share dialog opened specifically for hosting a multiplayer game?
     anonymousShareByDefault?: boolean;
@@ -37,7 +37,7 @@ export interface ShareInfoProps {
 export const ShareInfo = (props: ShareInfoProps) => {
     const {
         projectName,
-        description,
+        projectDescription,
         screenshotUri,
         isLoggedIn,
         simRecorder,
@@ -50,6 +50,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
         onClose,
     } = props;
     const [ name, setName ] = React.useState(projectName);
+    const [ description, setDescription ] = React.useState(projectDescription);
     const [ thumbnailUri, setThumbnailUri ] = React.useState(screenshotUri);
     const [ shareState, setShareState ] = React.useState<"share" | "gifrecord" | "publish" | "publish-vscode" | "publishing">("share");
     const [ shareData, setShareData ] = React.useState<ShareData>();
@@ -95,7 +96,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
     const handlePublishClick = async () => {
         setShareState("publishing");
         setLastShareWasAnonymous(isAnonymous);
-        let publishedShareData = await publishAsync(name, thumbnailUri, isAnonymous);
+        let publishedShareData = await publishAsync(name, description, thumbnailUri, isAnonymous);
         setShareData(publishedShareData);
         if (!publishedShareData?.error) setShareState("publish");
         else setShareState("share")
@@ -104,7 +105,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
     const handlePublishInVscodeClick = async () => {
         setShareState("publishing");
         setLastShareWasAnonymous(isAnonymous);
-        let publishedShareData = await publishAsync(name, thumbnailUri, isAnonymous);
+        let publishedShareData = await publishAsync(name, description, thumbnailUri, isAnonymous);
         setShareData(publishedShareData);
         if (!publishedShareData?.error) {
             setShareState("publish-vscode");
@@ -238,9 +239,9 @@ export const ShareInfo = (props: ShareInfoProps) => {
     const handleMultiplayerShareConfirmClick = async () => {
         setShareState("publishing");
         setIsShowingMultiConfirmation(false);
-    setLastShareWasAnonymous(isAnonymous);
+        setLastShareWasAnonymous(isAnonymous);
 
-        const publishedShareData = await publishAsync(name, thumbnailUri, isAnonymous);
+        const publishedShareData = await publishAsync(name, description, thumbnailUri, isAnonymous);
 
         // TODO multiplayer: This won't work on staging (parseScriptId domains check doesn't include staging urls)
         // but those wouldn't load anyways (as staging multiplayer is currently fetching games from prod links)
@@ -322,7 +323,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
         if (setAnonymousSharePreference) setAnonymousSharePreference(!newValue);
     }
 
-    const inputTitle = prePublish ? lf("Project Title") :
+    const inputTitle = prePublish ? lf("Project Name") :
         (shareState === "publish-vscode" ? lf("Share Successful") : lf("Project Link"));
 
     const shareAttemptWasAnonymous = lastShareWasAnonymous === undefined ? isAnonymous : lastShareWasAnonymous;
@@ -378,6 +379,19 @@ export const ShareInfo = (props: ShareInfoProps) => {
                             onBlur={setName}
                             onEnterKey={setName}
                             preserveValueOnBlur={true} />
+                        {pxt.appTarget.appTheme.showProjectDescription && <>
+                            <div className="project-share-title project-share-label" id="share-description-title">
+                                {lf("Project Description")}
+                            </div>
+                            <Textarea
+                                ariaDescribedBy="share-description-title"
+                                ariaLabel={lf("Type a description for your project")}
+                                initialValue={projectDescription || ''}
+                                onChange={setDescription}
+                                id="projectDescriptionTextareaShare"
+                                resize="vertical"
+                            />
+                        </>}
                         {isLoggedIn && hasProjectBeenPersistentShared && <Checkbox
                             id="persistent-share-checkbox"
                             label={lf("Update existing share link for this project")}
diff --git a/react-common/styles/controls/Textarea.less b/react-common/styles/controls/Textarea.less
index d37e653b747f..aec99c2862b8 100644
--- a/react-common/styles/controls/Textarea.less
+++ b/react-common/styles/controls/Textarea.less
@@ -21,6 +21,12 @@
     pointer-events: none;
 }
 
+.common-textarea-wrapper {
+    &.resize-both .common-textarea { resize: both; }
+    &.resize-horizontal .common-textarea { resize: horizontal; }
+    &.resize-vertical .common-textarea { resize: vertical; }
+}
+
 .common-textarea {
     width: 100%;
     min-width: 0;
@@ -32,10 +38,7 @@
     background: none transparent;
     text-overflow: ellipsis;
     resize: none;
-
-    &.resize-both { resize: both; }
-    &.resize-horizontal { resize: horizontal; }
-    &.resize-vertical { resize: vertical; }
+    min-height: 5rem;
 }
 
 
diff --git a/react-common/styles/share/share.less b/react-common/styles/share/share.less
index 061d64a24553..a36c8a1c4104 100644
--- a/react-common/styles/share/share.less
+++ b/react-common/styles/share/share.less
@@ -55,6 +55,14 @@
         .common-editor-toggle-outer {
             z-index: 1;
         }
+
+        .common-textarea {
+            max-height: 12rem;
+        }
+
+        .common-textarea-wrapper {
+            margin-bottom: 1rem;
+        }
     }
 }
 
diff --git a/theme/pxt.less b/theme/pxt.less
index f9b8b953c555..f3a918c0d5d5 100644
--- a/theme/pxt.less
+++ b/theme/pxt.less
@@ -29,6 +29,7 @@
 @import 'asset-editor';
 @import 'semantic-ui-overrides';
 @import 'ai-error-explanation-text';
+@import 'pxtjson';
 
 @import 'light';
 @import 'accessibility';
diff --git a/theme/pxtjson.less b/theme/pxtjson.less
new file mode 100644
index 000000000000..51dfaaf106eb
--- /dev/null
+++ b/theme/pxtjson.less
@@ -0,0 +1,5 @@
+.pxt-json-settings {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
\ No newline at end of file
diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index 4b147ea5b3f8..731bda8da803 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -4445,10 +4445,10 @@ export class ProjectView
         return this.getShareUrl(script.shortid || script.id, false);
     }
 
-    async publishAsync (name: string, screenshotUri?: string, forceAnonymous?: boolean): Promise<pxt.editor.ShareData> {
+    async publishAsync (name: string, description?: string,screenshotUri?: string, forceAnonymous?: boolean): Promise<pxt.editor.ShareData> {
         pxt.tickEvent("menu.embed.publish", undefined, { interactiveConsent: true });
-        if (name && this.state.projectName != name) {
-            await this.updateHeaderNameAsync(name);
+        if ((name && this.state.projectName != name) || description) {
+            await this.updateHeaderNameAsync(name, description);
         }
 
         const hasIdentity = auth.hasIdentity() && this.isLoggedIn();
@@ -4595,13 +4595,14 @@ export class ProjectView
         }
     }
 
-    updateHeaderNameAsync(name: string): Promise<void> {
+    updateHeaderNameAsync(name: string, description?: string): Promise<void> {
         // nothing to do?
-        if (pkg.mainPkg.config.name == name)
+        if (pkg.mainPkg.config.name == name && (!description || pkg.mainPkg.config.description == description))
             return Promise.resolve();
 
         //Save the name in the target MainPackage as well
         pkg.mainPkg.config.name = name;
+        pkg.mainPkg.config.description = description || pkg.mainPkg.config.description;
 
         pxt.debug('saving project name to ' + name);
         let f = pkg.mainEditorPkg().lookupFile("this/" + pxt.CONFIG_NAME);
diff --git a/webapp/src/pxtjson.tsx b/webapp/src/pxtjson.tsx
index b2c83aa31ba4..35fe8bb28243 100644
--- a/webapp/src/pxtjson.tsx
+++ b/webapp/src/pxtjson.tsx
@@ -1,22 +1,21 @@
 import * as React from "react";
 import * as pkg from "./package";
 import * as srceditor from "./srceditor"
-import * as sui from "./sui";
 import * as core from "./core";
 
 import Util = pxt.Util;
-import { fireClickOnEnter } from "./util";
 
 import IProjectView = pxt.editor.IProjectView;
 import { Checkbox } from "../../react-common/components/controls/Checkbox";
+import { Button } from "../../react-common/components/controls/Button";
+import { Input } from "../../react-common/components/controls/Input";
+import { Textarea } from "../../react-common/components/controls/Textarea";
 
 export class Editor extends srceditor.Editor {
     config: pxt.PackageConfig = {} as any;
     isSaving: boolean;
     changeMade: boolean = false;
 
-    private nameInput: sui.Input;
-
     constructor(public parent: IProjectView) {
         super(parent);
 
@@ -45,33 +44,50 @@ export class Editor extends srceditor.Editor {
         return false
     }
 
-    save(stayInEditor?: boolean) {
-        const c = this.config
+     async save(stayInEditor?: boolean) {
         this.isSaving = true;
-        if (!c.name) {
+        if (!this.config.name) {
             // Error saving no name
             core.errorNotification(lf("Please choose a project name. It can't be blank."));
             this.isSaving = false;
             return;
         }
-        const f = pkg.mainEditorPkg().lookupFile("this/" + pxt.CONFIG_NAME);
-        f.setContentAsync(pxt.Package.stringifyConfig(c)).then(() => {
-            pkg.mainPkg.config.name = c.name;
-            this.parent.setState({ projectName: c.name });
-            this.parent.forceUpdate()
-            Util.nextTick(this.changeCallback)
-            this.isSaving = false;
-            this.changeMade = true;
-            // switch to previous coding experience
-            if (!stayInEditor) this.parent.openPreviousEditor();
-            core.resetFocus();
-        })
+        await this.saveConfigContentAsync();
+
+        pkg.mainPkg.config.name = this.config.name;
+        this.parent.setState({ projectName: this.config.name });
+        this.parent.forceUpdate()
+        Util.nextTick(this.changeCallback)
+        this.isSaving = false;
+        this.changeMade = true;
+        // switch to previous coding experience
+        if (!stayInEditor) this.parent.openPreviousEditor();
+        core.resetFocus();
+    }
+
+    protected async saveConfigContentAsync() {
+        const file = pkg.mainEditorPkg().lookupFile("this/" + pxt.CONFIG_NAME);
+        await file.setContentAsync(pxt.Package.stringifyConfig(this.config));
+        pkg.mainPkg.loadConfig();
     }
 
-    setFileName(v: string) {
+    async setFileName(v: string) {
+        if (!v || !v.trim().length) {
+            return;
+        }
+
         const c = this.config
         c.name = v;
-        this.parent.forceUpdate();
+
+        await this.saveConfigContentAsync();
+
+        this.parent.setState({ projectName: v });
+    }
+
+    private setProjectDescription = (v: string) => {
+        const c = this.config;
+        c.description = v;
+        this.saveConfigContentAsync();
     }
 
     private optionaldepConfig() {
@@ -96,7 +112,6 @@ export class Editor extends srceditor.Editor {
     }
 
     applyUserConfig(uc: pxt.CompilationConfig) {
-        const depcfg = Util.jsonFlatten(this.optionaldepConfig());
         const prjcfg = Util.jsonFlatten(this.config.yotta ? this.config.yotta.config : {});
         const usercfg = Util.jsonFlatten(uc.config);
         if (this.isUserConfigActive(uc)) {
@@ -128,12 +143,30 @@ export class Editor extends srceditor.Editor {
         }
     }
 
-    private handleNameInputRef = (c: sui.Input) => {
-        this.nameInput = c;
-    }
-
-    private saveOnClick = (e: React.MouseEvent) => {
-        this.save();
+    private showEditSettingsDialogAsync = async () => {
+        pxt.tickEvent("pxtjson.editsettingsdialog", undefined, { interactiveConsent: true });
+
+        const response = await core.confirmAsync({
+            header: lf("Edit Settings as Text"),
+            jsx: <>
+                <p>
+                    {lf("Editing your project settings as text can permanently damage your project!")}
+                    <strong>{" " + lf("It is recommended that you download a copy of your project before continuing.")}</strong>
+                </p>
+                <p>
+                    {lf("Are you sure you want to continue?")}
+                </p>
+            </>,
+            agreeLbl: lf("Continue"),
+            disagreeLbl: lf("Back to safety"),
+            hideCancel: false,
+            agreeClass: "red",
+            disagreeClass: "green"
+        });
+
+        if (response) {
+            this.editSettingsText();
+        }
     }
 
     display(): JSX.Element {
@@ -151,14 +184,34 @@ export class Editor extends srceditor.Editor {
             <div className="ui content">
                 <div className="ui small header">
                     <div className="content">
-                        <sui.Button autoFocus title={lf("Go back")} tabIndex={0} onClick={this.goBack} onKeyDown={fireClickOnEnter}>
-                            <sui.Icon icon="arrow left" />
-                            <span className="ui text landscape only">{lf("Go back")}</span>
-                        </sui.Button>
+                        <Button
+                            className="green"
+                            title={lf("Go back")}
+                            label={lf("Go back")}
+                            leftIcon="fas fa-arrow-left"
+                            onClick={this.goBack}
+                        />
                     </div>
                 </div>
-                <div className="ui segment form text">
-                    <sui.Input ref={this.handleNameInputRef} id={"fileNameInput"} label={lf("Name")} ariaLabel={lf("Type a name for your project")} value={c.name || ''} onChange={this.setFileName} autoComplete={false} />
+                <div className="ui segment form text pxt-json-settings">
+                    <Input
+                        label={lf("Project Name")}
+                        ariaLabel={lf("Type a name for your project")}
+                        initialValue={c.name || ''}
+                        onChange={this.setFileName}
+                        autoComplete={false}
+                        id="projectNameInputSettings"
+                    />
+                    {pxt.appTarget.appTheme.showProjectDescription &&
+                        <Textarea
+                            label={lf("Project Description")}
+                            ariaLabel={lf("Type a description for your project")}
+                            initialValue={c.description || ''}
+                            onChange={this.setProjectDescription}
+                            id="projectDescriptionTextareaSettings"
+                            resize="vertical"
+                        />
+                    }
                     {userConfigs.map(uc =>
                         <UserConfigCheckbox
                             key={`userconfig-${uc.description}`}
@@ -167,17 +220,23 @@ export class Editor extends srceditor.Editor {
                             applyUserConfig={this.applyUserConfig} />
                     )}
                     {pxtJsonOptions.map(option =>
-                        <sui.Checkbox
+                        <Checkbox
                             key={option.property}
-                            inputLabel={pxt.Util.rlf(`{id:setting}${option.label}`)}
-                            checked={!!c?.[option.property as keyof pxt.PackageConfig]}
+                            id={option.property}
+                            label={pxt.Util.rlf(`{id:setting}${option.label}`)}
+                            isChecked={!!c?.[option.property as keyof pxt.PackageConfig]}
                             onChange={value => this.applyPropertyCheckbox(option, value)}
+                            style="toggle"
                         />
                     )}
-                    <sui.Field>
-                        <sui.Button text={lf("Save")} className={`green ${this.isSaving ? 'disabled' : ''}`} onClick={this.saveOnClick} />
-                        <sui.Button text={lf("Edit Settings As text")} onClick={this.editSettingsText} />
-                    </sui.Field>
+                    <div>
+                        <Button
+                            className="red"
+                            label={lf("Edit settings as text")}
+                            title={lf("Edit settings as text")}
+                            onClick={this.showEditSettingsDialogAsync}
+                        />
+                    </div>
                 </div>
             </div>
         )
@@ -215,7 +274,6 @@ export class Editor extends srceditor.Editor {
 
     loadFileAsync(file: pkg.File): Promise<void> {
         this.config = JSON.parse(file.content)
-        if (this.nameInput) this.nameInput.clearValue();
         this.setDiagnostics(file, this.snapshotState())
         this.changeMade = false;
         return Promise.resolve();
diff --git a/webapp/src/share.tsx b/webapp/src/share.tsx
index d507a206661e..3fb5d9ecd809 100644
--- a/webapp/src/share.tsx
+++ b/webapp/src/share.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import * as auth from "./auth";
 import * as screenshot from "./screenshot";
+import * as pkg from "./package";
 
 import { Modal } from "../../react-common/components/controls/Modal";
 import { Share } from "../../react-common/components/share/Share";
@@ -193,8 +194,8 @@ export class ShareEditor extends auth.Component<ShareEditorProps, ShareEditorSta
 
         const hasProjectBeenPersistentShared = parent.hasHeaderBeenPersistentShared();
 
-        const publishAsync = async (name: string, screenshotUri?: string, forceAnonymous?: boolean) =>
-            parent.publishAsync(name, screenshotUri, forceAnonymous)
+        const publishAsync = async (name: string, description?: string, screenshotUri?: string, forceAnonymous?: boolean) =>
+            parent.publishAsync(name, description, screenshotUri, forceAnonymous)
 
         const setSharePreference = (anonymousByDefault: boolean) => parent.saveSharePreferenceForHeaderAsync(anonymousByDefault)
 
@@ -204,7 +205,9 @@ export class ShareEditor extends auth.Component<ShareEditorProps, ShareEditorSta
                 className={`sharedialog${thumbnails ? " wide" : ""}`}
                 parentElement={document.getElementById("root") || undefined}
                 onClose={this.hide}>
-                <Share projectName={newProjectName}
+                <Share
+                    projectName={newProjectName}
+                    projectDescription={pkg.mainPkg?.config?.description}
                     screenshotUri={screenshotUri}
                     isLoggedIn={hasIdentity}
                     publishAsync={publishAsync}
@@ -214,7 +217,8 @@ export class ShareEditor extends auth.Component<ShareEditorProps, ShareEditorSta
                     setAnonymousSharePreference={setSharePreference}
                     isMultiplayerGame={this.props.parent.state.isMultiplayerGame}
                     kind={this.state.kind}
-                    onClose={this.hide}/>
+                    onClose={this.hide}
+                />
             </Modal>
             : <></>
     }