diff --git a/src/_colors.scss b/src/_colors.scss
index 4c682f34d15..3f095f120a4 100644
--- a/src/_colors.scss
+++ b/src/_colors.scss
@@ -64,6 +64,9 @@ $ui-border: hsla(0, 0%, 85%, 1); //#D9D9D9
 $ui-border-light-blue: hsla(215, 50%, 90%, 1); //#D9E3F2
 $ui-border-orange: hsla(37, 96%, 55%, 1); // #FAA51D
 
+$ui-text-disabled: hsla(227, 15%, 70%, 1); //#A7ACBE
+$ui-background-disabled: hsla(231, 14%, 90%, 1); //#E2E3E9
+
 /* modals */
 $ui-mint-green: hsl(163, 69%, 44%);
 $ui-light-mint: hsl(163, 53%, 67%);
diff --git a/src/components/overflow-menu/overflow-icon-disabled.svg b/src/components/overflow-menu/overflow-icon-disabled.svg
new file mode 100644
index 00000000000..3a8313b61c2
--- /dev/null
+++ b/src/components/overflow-menu/overflow-icon-disabled.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="17" height="18" fill="white"/>
+<path d="M7 16.4004C7 15.5169 7.71613 14.8 8.59961 14.7998C9.48326 14.7998 10.2002 15.5167 10.2002 16.4004C10.2 17.2839 9.48313 18 8.59961 18C7.71626 17.9998 7.00021 17.2837 7 16.4004ZM7 10.001C7 9.11745 7.71613 8.4006 8.59961 8.40039C9.48326 8.40039 10.2002 9.11732 10.2002 10.001C10.1999 10.8844 9.48311 11.6006 8.59961 11.6006C7.71629 11.6004 7.00025 10.8843 7 10.001ZM7 3.59961C7.00021 2.71626 7.71626 2.00021 8.59961 2C9.48313 2 10.2 2.71613 10.2002 3.59961C10.2002 4.48326 9.48326 5.2002 8.59961 5.2002C7.71613 5.19998 7 4.48314 7 3.59961Z" fill="#E2E3E9"/>
+</svg>
diff --git a/src/components/overflow-menu/overflow-menu.jsx b/src/components/overflow-menu/overflow-menu.jsx
index 9b85d581900..ff0de1d649a 100644
--- a/src/components/overflow-menu/overflow-menu.jsx
+++ b/src/components/overflow-menu/overflow-menu.jsx
@@ -5,15 +5,19 @@ import classNames from 'classnames';
 
 import Dropdown from '../dropdown/dropdown.jsx';
 import overflowIcon from './overflow-icon.svg';
+import overflowIconDisabled from './overflow-icon-disabled.svg';
 
 import './overflow-menu.scss';
 
 const OverflowMenu = ({
     children,
     dropdownAs = 'ul',
-    className
+    className,
+    disabled
 }) => {
     const [open, setOpen] = useState(false);
+    const iconSrc = disabled ? overflowIconDisabled : overflowIcon;
+
     return (
         <div className={classNames('overflow-menu-container', className)}>
             <button
@@ -21,8 +25,9 @@ const OverflowMenu = ({
                     'ignore-react-onclickoutside': open
                 })}
                 onClick={() => setOpen(!open)}
+                disabled={disabled}
             >
-                <img src={overflowIcon} />
+                <img src={iconSrc} />
             </button>
             {open && <Dropdown
                 isOpen
@@ -39,7 +44,8 @@ const OverflowMenu = ({
 OverflowMenu.propTypes = {
     children: PropTypes.node,
     dropdownAs: PropTypes.string,
-    className: PropTypes.string
+    className: PropTypes.string,
+    disabled: PropTypes.bool
 };
 
 export default OverflowMenu;
diff --git a/src/views/preview/banner.jsx b/src/views/preview/banner.jsx
index 557af0e542a..a8ee9778fa1 100644
--- a/src/views/preview/banner.jsx
+++ b/src/views/preview/banner.jsx
@@ -6,7 +6,13 @@ const Button = require('../../components/forms/button.jsx');
 
 require('./banner.scss');
 
-const Banner = ({className, message, actionMessage, onAction}) => (
+const Banner = ({
+    className,
+    message,
+    actionMessage,
+    onAction,
+    buttonDisabled
+}) => (
     <div className={classNames('banner-outer', className)}>
         <FlexRow className="inner banner-inner">
             <span className="banner-text">
@@ -14,7 +20,8 @@ const Banner = ({className, message, actionMessage, onAction}) => (
             </span>
             {actionMessage && onAction && (
                 <Button
-                    className="banner-button"
+                    className={classNames('banner-button', {'banner-button-disabled': buttonDisabled})}
+                    disabled={buttonDisabled}
                     onClick={onAction}
                 >
                     {actionMessage}
@@ -28,7 +35,8 @@ Banner.propTypes = {
     actionMessage: PropTypes.node,
     className: PropTypes.string,
     message: PropTypes.node.isRequired,
-    onAction: PropTypes.func
+    onAction: PropTypes.func,
+    buttonDisabled: PropTypes.bool
 };
 
 module.exports = Banner;
diff --git a/src/views/preview/banner.scss b/src/views/preview/banner.scss
index c9ea7b4873a..93410e16105 100644
--- a/src/views/preview/banner.scss
+++ b/src/views/preview/banner.scss
@@ -53,3 +53,8 @@ $navigation-height: 50px;
 .banner-danger .banner-button {
     background-color: colors.$ui-red;
 }
+
+.banner-button-disabled {
+    color: colors.$ui-text-disabled;
+    background-color: colors.$ui-background-disabled;
+}
diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx
index 65ac4c3b2df..369771db4e7 100644
--- a/src/views/preview/presentation.jsx
+++ b/src/views/preview/presentation.jsx
@@ -215,6 +215,7 @@ const PreviewPresentation = ({
                 actionMessage={<FormattedMessage id="project.share.shareButton" />}
                 message={<FormattedMessage id="project.share.notShared" />}
                 onAction={canShare ? onShare : onShareAttempt}
+                buttonDisabled={process.env.READ_ONLY_MODE === 'true'}
             />);
         }
     }
@@ -443,6 +444,7 @@ const PreviewPresentation = ({
                                     projectInfo={projectInfo}
                                     onFavoriteClicked={onFavoriteClicked}
                                     onLoveClicked={onLoveClicked}
+                                    disabled={process.env.READ_ONLY_MODE === 'true'}
                                 />
                             </div>
                             <div className="wrappable-item">
@@ -593,6 +595,7 @@ const PreviewPresentation = ({
                             projectInfo={projectInfo}
                             onFavoriteClicked={onFavoriteClicked}
                             onLoveClicked={onLoveClicked}
+                            disabled={process.env.READ_ONLY_MODE === 'true'}
                         />
                         <Subactions
                             addToStudioOpen={addToStudioOpen}
diff --git a/src/views/preview/project-view.jsx b/src/views/preview/project-view.jsx
index 8bbccf61825..b3bc4e1ac0b 100644
--- a/src/views/preview/project-view.jsx
+++ b/src/views/preview/project-view.jsx
@@ -754,7 +754,7 @@ class Preview extends React.Component {
         }
     }
     handleFavoriteToggle () {
-        if (!this.props.favedLoaded) return;
+        if (!this.props.favedLoaded || process.env.READ_ONLY_MODE === 'true') return;
 
         this.props.setFavedStatus(
             !this.props.faved,
@@ -784,7 +784,7 @@ class Preview extends React.Component {
         );
     }
     handleLoveToggle () {
-        if (!this.props.lovedLoaded) return;
+        if (!this.props.lovedLoaded || process.env.READ_ONLY_MODE === 'true') return;
 
         this.props.setLovedStatus(
             !this.props.loved,
@@ -1014,6 +1014,8 @@ class Preview extends React.Component {
         const canManuallySaveThumbnails = process.env.MANUALLY_SAVE_THUMBNAILS === 'true' &&
             (process.env.READ_ONLY_MODE !== 'true' || !this.props.isShared);
 
+        const canModifyProject = process.env.READ_ONLY_MODE !== 'true' || !this.props.isShared;
+
         if (!this.props.playerMode && shouldDisplayBlockingPage) {
             // The Page components will display the blocking ToS page in this case
             return (
@@ -1195,10 +1197,10 @@ class Preview extends React.Component {
                                     basePath="/"
                                     canCreateCopy={this.props.canCreateCopy}
                                     canCreateNew={this.props.canCreateNew}
-                                    canEditTitle={this.props.canEditTitleInEditor}
+                                    canEditTitle={this.props.canEditTitleInEditor && canModifyProject}
                                     canRemix={this.props.canRemix}
-                                    canSave={this.props.canSave}
-                                    canShare={this.props.canShare}
+                                    canSave={this.props.canSave && canModifyProject}
+                                    canShare={this.props.canShare && process.env.READ_ONLY_MODE !== 'true'}
                                     className="gui"
                                     cloudHost={this.props.cloudHost}
                                     enableCommunity={this.props.enableCommunity}
@@ -1400,7 +1402,11 @@ const mapStateToProps = state => {
     const authorAvatarBadge = authorPresent && author.profile.membership_avatar_badge;
     const userOwnsProject = isLoggedIn && authorPresent &&
         state.session.session.user.id.toString() === authorId;
-    const isEditable = isLoggedIn &&
+    
+    // if we don't have projectInfo, assume it's shared until we know otherwise
+    const isShared = !projectInfoPresent || state.preview.projectInfo.is_published;
+    
+    const isEditable = isLoggedIn && (process.env.READ_ONLY_MODE !== 'true' || !isShared) &&
         (authorUsername === state.session.session.user.username ||
         state.permissions.admin === true);
     const areCommentsOn = state.session.session.flags && selectProjectCommentsGloballyEnabled(state);
@@ -1415,9 +1421,6 @@ const mapStateToProps = state => {
     const acceptedTermsOfService = state.session.session.flags?.accepted_terms_of_service;
     const isStudent = state.session.session.permissions?.student;
 
-    // if we don't have projectInfo, assume it's shared until we know otherwise
-    const isShared = !projectInfoPresent || state.preview.projectInfo.is_published;
-
     return {
         authorId: authorId,
         authorThumbnailUrl: thumbnailUrl(authorId),
diff --git a/src/views/preview/stats.jsx b/src/views/preview/stats.jsx
index 041f55f2e1f..fb79048c737 100644
--- a/src/views/preview/stats.jsx
+++ b/src/views/preview/stats.jsx
@@ -8,7 +8,7 @@ const projectShape = require('./projectshape.jsx').projectShape;
 require('./stats.scss');
 
 const Stats = props => (
-    <FlexRow className="stats noselect">
+    <FlexRow className={classNames('stats noselect', {disabled: props.disabled})}>
         <div
             className={classNames('project-loves', {loved: props.loved})}
             key="loves"
@@ -45,7 +45,8 @@ Stats.propTypes = {
     loved: PropTypes.bool,
     onFavoriteClicked: PropTypes.func,
     onLoveClicked: PropTypes.func,
-    projectInfo: projectShape
+    projectInfo: projectShape,
+    disabled: PropTypes.bool
 };
 
 module.exports = Stats;
diff --git a/src/views/preview/stats.scss b/src/views/preview/stats.scss
index 4150d0f7f48..f9681a587ad 100644
--- a/src/views/preview/stats.scss
+++ b/src/views/preview/stats.scss
@@ -82,6 +82,26 @@
     }
 }
 
+.disabled {
+    pointer-events: none;
+}
+
+.disabled .project-loves:not(.loved):before {
+    background-image: url("/svgs/project/love-read-only-not-loved.svg");
+}
+
+.disabled .project-loves.loved:before {
+    background-image: url("/svgs/project/love-read-only-loved.svg");
+}
+
+.disabled .project-favorites:not(.favorited):before {
+    background-image: url("/svgs/project/fav-read-only-not-favorited.svg");
+}
+
+.disabled .project-favorites.favorited:before {
+    background-image: url("/svgs/project/fav-read-only-favorited.svg");
+}
+
 .project-remixes {
 
     &:before {
diff --git a/src/views/preview/subactions.jsx b/src/views/preview/subactions.jsx
index 469bc8a66a4..fbf7c65ca38 100644
--- a/src/views/preview/subactions.jsx
+++ b/src/views/preview/subactions.jsx
@@ -88,7 +88,7 @@ const Subactions = ({
                         >
                             <Button
                                 className="action-button studio-button"
-                                disabled={showAddToStudioMuteError}
+                                disabled={showAddToStudioMuteError || process.env.READ_ONLY_MODE === 'true'}
                                 key="add-to-studio-button"
                                 onClick={showMuteMessage ? null : onAddToStudioClicked}
                             >
diff --git a/src/views/preview/subactions.scss b/src/views/preview/subactions.scss
index 43f9029e2a7..d77ae9baad3 100644
--- a/src/views/preview/subactions.scss
+++ b/src/views/preview/subactions.scss
@@ -110,6 +110,16 @@
     }
 }
 
+.subactions .action-buttons .action-button.studio-button:disabled {
+    background-color: colors.$ui-background-disabled;
+    color: colors.$ui-text-disabled;
+    pointer-events: none;
+
+    &:before {
+        background-image: url("/svgs/project/studio-add-gray.svg");
+    }
+}
+
 .studio-button-error {
     top: auto;
     transform: none;
diff --git a/src/views/studio/studio-curator-invite.jsx b/src/views/studio/studio-curator-invite.jsx
index 9c0a19fc792..ece0255fd34 100644
--- a/src/views/studio/studio-curator-invite.jsx
+++ b/src/views/studio/studio-curator-invite.jsx
@@ -8,6 +8,7 @@ import {FormattedMessage} from 'react-intl';
 import {acceptInvitation} from './lib/studio-member-actions';
 import {selectShowCuratorInvite} from '../../redux/studio-permissions';
 
+
 const StudioCuratorInvite = ({showCuratorInvite, onSubmit}) => {
     const [submitting, setSubmitting] = useState(false);
     const [accepted, setAccepted] = useState(false);
@@ -42,10 +43,12 @@ const StudioCuratorInvite = ({showCuratorInvite, onSubmit}) => {
             </div>
             <button
                 className={classNames('studio-invitation-button button', {
-                    'mod-mutating': submitting
+                    'mod-mutating': submitting,
+                    'studio-disabled': process.env.READ_ONLY_MODE === 'true'
                 })}
-                disabled={submitting}
+                disabled={submitting || process.env.READ_ONLY_MODE === 'true'}
                 onClick={() => {
+                    if (submitting || process.env.READ_ONLY_MODE === 'true') return;
                     setSubmitting(true);
                     setError(null);
                     onSubmit()
diff --git a/src/views/studio/studio-curator-inviter.jsx b/src/views/studio/studio-curator-inviter.jsx
index a8afff28580..15b6d1488af 100644
--- a/src/views/studio/studio-curator-inviter.jsx
+++ b/src/views/studio/studio-curator-inviter.jsx
@@ -10,6 +10,7 @@ import {Errors, inviteCurator} from './lib/studio-member-actions';
 import intlShape from '../../lib/intl-shape';
 import ValidationMessage from '../../components/forms/validation-message.jsx';
 
+
 const errorToMessageId = error => {
     switch (error) {
     case Errors.NETWORK: return 'studio.curatorErrors.generic';
@@ -65,8 +66,11 @@ const StudioCuratorInviter = ({intl, onSubmit}) => {
                     />
                 </div>}
                 <input
-                    className={classNames({'mod-form-error': error})}
-                    disabled={submitting}
+                    className={classNames({
+                        'mod-form-error': error,
+                        'studio-disabled': process.env.READ_ONLY_MODE === 'true'
+                    })}
+                    disabled={submitting || process.env.READ_ONLY_MODE === 'true'}
                     type="text"
                     placeholder={intl.formatMessage({id: 'studio.inviteCuratorPlaceholder'})}
                     value={value}
@@ -75,9 +79,10 @@ const StudioCuratorInviter = ({intl, onSubmit}) => {
                 />
                 <button
                     className={classNames('button', {
-                        'mod-mutating': submitting
+                        'mod-mutating': submitting,
+                        'studio-disabled': process.env.READ_ONLY_MODE === 'true'
                     })}
-                    disabled={submitting || value === ''}
+                    disabled={submitting || value === '' || process.env.READ_ONLY_MODE === 'true'}
                     onClick={submit}
                 ><FormattedMessage id="studio.inviteCurator" /></button>
             </div>
diff --git a/src/views/studio/studio-description.jsx b/src/views/studio/studio-description.jsx
index 3b1418db8a1..1a40a55af53 100644
--- a/src/views/studio/studio-description.jsx
+++ b/src/views/studio/studio-description.jsx
@@ -17,6 +17,7 @@ import ValidationMessage from '../../components/forms/validation-message.jsx';
 import decorateText from '../../lib/decorate-text.jsx';
 import StudioMuteEditMessage from './studio-mute-edit-message.jsx';
 
+
 const errorToMessageId = error => {
     switch (error) {
     case Errors.INAPPROPRIATE: return 'studio.updateErrors.inappropriate';
@@ -53,12 +54,16 @@ const StudioDescription = ({
             onMouseLeave={() => isMutedEditor && setShowMuteMessage(false)}
             ref={ref}
         >
-            {canEditInfo || isMutedEditor ? (
+            {(canEditInfo || isMutedEditor) ? (
                 <React.Fragment>
                     <textarea
                         rows="20"
-                        className={classNames('inplace-textarea', fieldClassName)}
-                        disabled={isMutating || isFetching || isMutedEditor}
+                        className={classNames(
+                            'inplace-textarea',
+                            fieldClassName,
+                            {'studio-disabled': process.env.READ_ONLY_MODE === 'true'}
+                        )}
+                        disabled={isMutating || isFetching || isMutedEditor || process.env.READ_ONLY_MODE === 'true'}
                         defaultValue={description}
                         onBlur={e => {
                             if (e.target.value !== description) handleUpdate(e.target.value);
diff --git a/src/views/studio/studio-follow.jsx b/src/views/studio/studio-follow.jsx
index 18bb3876f07..f2f871d04d4 100644
--- a/src/views/studio/studio-follow.jsx
+++ b/src/views/studio/studio-follow.jsx
@@ -13,6 +13,7 @@ import {
 import classNames from 'classnames';
 import ValidationMessage from '../../components/forms/validation-message.jsx';
 
+
 const errorToMessageId = (error, userUsesParentEmail) => {
     switch (error) {
     case Errors.PERMISSION: return userUsesParentEmail ?
@@ -50,8 +51,8 @@ const StudioFollow = ({
             ref={ref}
         >
             <button
-                className={fieldClassName}
-                disabled={isMutating}
+                className={classNames(fieldClassName, {'studio-disabled': process.env.READ_ONLY_MODE === 'true'})}
+                disabled={isMutating || process.env.READ_ONLY_MODE === 'true'}
                 onClick={() => {
                     setHideValidationMessage(false);
                     handleFollow(!isFollowing);
diff --git a/src/views/studio/studio-image.jsx b/src/views/studio/studio-image.jsx
index 334a9d109d4..7888ef1c1ef 100644
--- a/src/views/studio/studio-image.jsx
+++ b/src/views/studio/studio-image.jsx
@@ -17,6 +17,7 @@ import StudioMuteEditMessage from './studio-mute-edit-message.jsx';
 
 import editIcon from './icons/edit-icon.svg';
 
+
 const errorToMessageId = error => {
     switch (error) {
     case Errors.THUMBNAIL_INVALID: return 'studio.updateErrors.thumbnailInvalid';
@@ -69,9 +70,15 @@ const StudioImage = ({
                         htmlFor="studio-thumb-edit-input"
                         className={labelFieldClassName}
                     >
-                        <div className="studio-thumb-edit-button">
+                        <div
+                            className={classNames('studio-thumb-edit-button',
+                                {'studio-thumb-edit-button-disabled': process.env.READ_ONLY_MODE === 'true'}
+                            )}
+                        >
                             <img
-                                className="studio-thumb-edit-img"
+                                className={classNames('studio-thumb-edit-img',
+                                    {'studio-thumb-edit-img-disabled': process.env.READ_ONLY_MODE === 'true'}
+                                )}
                                 src={editIcon}
                             />
 
@@ -81,7 +88,8 @@ const StudioImage = ({
                     <input
                         id="studio-thumb-edit-input"
                         className="hidden"
-                        disabled={isMutating || !canEditInfo}
+                        // disable the actual file input when mutating, user can't edit, or read-only mode
+                        disabled={isMutating || !canEditInfo || process.env.READ_ONLY_MODE === 'true'}
                         type="file"
                         accept="image/*"
                         onChange={e => {
diff --git a/src/views/studio/studio-member-tile.jsx b/src/views/studio/studio-member-tile.jsx
index 27cfeae4fe8..4683e89a944 100644
--- a/src/views/studio/studio-member-tile.jsx
+++ b/src/views/studio/studio-member-tile.jsx
@@ -28,6 +28,7 @@ import OverflowMenu from '../../components/overflow-menu/overflow-menu.jsx';
 import removeIcon from './icons/remove-icon.svg';
 import promoteIcon from './icons/curator-icon.svg';
 
+
 const StudioMemberTile = ({
     canRemove, canPromote, onRemove, canTransferHost, onPromote,
     isCreator, hasReachedManagerLimit, // mapState props
@@ -60,7 +61,7 @@ const StudioMemberTile = ({
                 }
             </div>
             {(canRemove || canPromote || canTransferHost) &&
-                <OverflowMenu>
+                <OverflowMenu disabled={process.env.READ_ONLY_MODE === 'true'}>
                     {canPromote && <li>
                         <button
                             onClick={() => {
diff --git a/src/views/studio/studio-project-adder.jsx b/src/views/studio/studio-project-adder.jsx
index 034b45ed4df..ab5585a3d07 100644
--- a/src/views/studio/studio-project-adder.jsx
+++ b/src/views/studio/studio-project-adder.jsx
@@ -10,6 +10,7 @@ import UserProjectsModal from './modals/user-projects-modal.jsx';
 import ValidationMessage from '../../components/forms/validation-message.jsx';
 import {useAlertContext} from '../../components/alert/alert-context';
 
+
 const errorToMessageId = error => {
     switch (error) {
     case Errors.NETWORK: return 'studio.projectErrors.generic';
@@ -64,8 +65,11 @@ const StudioProjectAdder = ({onSubmit}) => {
                     />
                 </div>}
                 <input
-                    className={classNames({'mod-form-error': error})}
-                    disabled={submitting}
+                    className={classNames({
+                        'mod-form-error': error,
+                        'studio-disabled': process.env.READ_ONLY_MODE === 'true'
+                    })}
+                    disabled={submitting || process.env.READ_ONLY_MODE === 'true'}
                     type="text"
                     placeholder="https://scratch.mit.edu/projects/xxxx"
                     value={value}
@@ -74,14 +78,18 @@ const StudioProjectAdder = ({onSubmit}) => {
                 />
                 <button
                     className={classNames('button', {
-                        'mod-mutating': submitting
+                        'mod-mutating': submitting,
+                        'studio-disabled': process.env.READ_ONLY_MODE === 'true'
                     })}
-                    disabled={submitting || value === ''}
+                    disabled={submitting || value === '' || process.env.READ_ONLY_MODE === 'true'}
                     onClick={submit}
                 ><FormattedMessage id="studio.addProject" /></button>
                 <div className="studio-adder-vertical-divider" />
                 <button
-                    className="button"
+                    className={classNames('button', {
+                        'studio-disabled': process.env.READ_ONLY_MODE === 'true'
+                    })}
+                    disabled={process.env.READ_ONLY_MODE === 'true'}
                     onClick={() => setModalOpen(true)}
                 >
                     <FormattedMessage id="studio.browseProjects" />
diff --git a/src/views/studio/studio-project-tile.jsx b/src/views/studio/studio-project-tile.jsx
index e3e52200dea..9ca7683c8e4 100644
--- a/src/views/studio/studio-project-tile.jsx
+++ b/src/views/studio/studio-project-tile.jsx
@@ -13,6 +13,7 @@ import OverflowMenu from '../../components/overflow-menu/overflow-menu.jsx';
 import removeIcon from './icons/remove-icon.svg';
 import Avatar from '../../components/avatar/avatar.jsx';
 
+
 const StudioProjectTile = ({
     canRemove, onRemove, // mapState props
     id, title, image, avatar, username, avatarBadge // own props
@@ -48,7 +49,7 @@ const StudioProjectTile = ({
                     >{username}</a>
                 </div>
                 {canRemove &&
-                    <OverflowMenu>
+                    <OverflowMenu disabled={process.env.READ_ONLY_MODE === 'true'}>
                         <li>
                             <button
                                 className={classNames({
diff --git a/src/views/studio/studio-title.jsx b/src/views/studio/studio-title.jsx
index 9cb4bda89b5..7b1949b7304 100644
--- a/src/views/studio/studio-title.jsx
+++ b/src/views/studio/studio-title.jsx
@@ -13,6 +13,7 @@ import {Errors, mutateStudioTitle, selectIsMutatingTitle, selectTitleMutationErr
 import ValidationMessage from '../../components/forms/validation-message.jsx';
 import StudioMuteEditMessage from './studio-mute-edit-message.jsx';
 
+
 const errorToMessageId = error => {
     switch (error) {
     case Errors.INAPPROPRIATE: return 'studio.updateErrors.inappropriate';
@@ -54,8 +55,12 @@ const StudioTitle = ({
             {canEditInfo || isMutedEditor ? (
                 <React.Fragment>
                     <textarea
-                        className={classNames('inplace-textarea', fieldClassName)}
-                        disabled={isMutating || !canEditInfo || isFetching}
+                        className={classNames(
+                            'inplace-textarea',
+                            fieldClassName,
+                            {'studio-disabled': process.env.READ_ONLY_MODE === 'true'}
+                        )}
+                        disabled={isMutating || !canEditInfo || isFetching || process.env.READ_ONLY_MODE === 'true'}
                         defaultValue={title}
                         maxLength={TITLE_MAX_LENGTH}
                         onKeyDown={e => e.key === 'Enter' && e.target.blur()}
diff --git a/src/views/studio/studio.scss b/src/views/studio/studio.scss
index a89287d2e11..dc5c8d62e3d 100644
--- a/src/views/studio/studio.scss
+++ b/src/views/studio/studio.scss
@@ -53,6 +53,16 @@ $radius: 8px;
     box-sizing: border-box;
 }
 
+.studio-disabled {
+    background: colors.$ui-background-disabled;
+    color: colors.$ui-text-disabled;
+    pointer-events: none;
+
+    &:disabled, &[disabled] {
+        pointer-events: none;
+    }
+}
+
 .studio-info {
     justify-self: center;
     width: 300px;
@@ -598,10 +608,22 @@ $radius: 8px;
     align-items: center;
 }
 
+.studio-thumb-edit-button-disabled {
+    color: colors.$ui-text-disabled;
+}
+
+label:has(> .studio-thumb-edit-button-disabled) {
+    pointer-events: none;
+}
+
 .studio-thumb-edit-img {
     padding-right: 10px;
 }
 
+.studio-thumb-edit-img-disabled {
+    filter: grayscale(100%) brightness(150%);
+}
+
 .studio-admin-panel {
     margin-top: 51px;
     border: 0;
diff --git a/static/svgs/project/fav-read-only-favorited.svg b/static/svgs/project/fav-read-only-favorited.svg
new file mode 100644
index 00000000000..2eb093969aa
--- /dev/null
+++ b/static/svgs/project/fav-read-only-favorited.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.0538 4.77082L19.5206 9.76731L25.036 10.5709C26.9153 10.843 27.6649 13.1512 26.3063 14.4773L22.3134 18.3675L23.2558 23.8613C23.5765 25.7316 21.6125 27.1586 19.9332 26.2757L14.9998 23.6811L10.0663 26.2757C8.38521 27.1586 6.42301 25.7316 6.74194 23.8613L7.6861 18.3675L3.69503 14.4773C2.33464 13.1512 3.08421 10.843 4.96352 10.5709L10.4807 9.76731L12.9457 4.77082C13.7871 3.06988 16.2124 3.06988 17.0538 4.77082Z" fill="#E2E3E9"/>
+</svg>
diff --git a/static/svgs/project/fav-read-only-not-favorited.svg b/static/svgs/project/fav-read-only-not-favorited.svg
new file mode 100644
index 00000000000..a125784b760
--- /dev/null
+++ b/static/svgs/project/fav-read-only-not-favorited.svg
@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1 4.8002L19.5 9.7502L25.05 10.5002C27 10.8002 27.75 13.0502 26.25 14.4002L22.2 18.3002L23.1 23.8502C23.4 25.6502 21.45 27.1502 19.8 26.2502L15 23.7002L10.05 26.2502C8.4 27.1502 6.45001 25.6502 6.75001 23.8502L7.65001 18.3002L3.75001 14.5502C2.40001 13.2002 3.15 10.8002 4.95001 10.5002L10.5 9.7502L12.9 4.8002C13.8 3.0002 16.2 3.0002 17.1 4.8002Z" fill="#E2E3E9"/>
+<path d="M17.1 4.8002L19.5 9.7502L25.05 10.5002C27 10.8002 27.75 13.0502 26.25 14.4002L22.2 18.3002L23.1 23.8502C23.4 25.6502 21.45 27.1502 19.8 26.2502L15 23.7002L10.05 26.2502C8.4 27.1502 6.45001 25.6502 6.75001 23.8502L7.65001 18.3002L3.75001 14.5502C2.40001 13.2002 3.15 10.8002 4.95 10.5002L10.5 9.7502L12.9 4.8002C13.8 3.0002 16.2 3.0002 17.1 4.8002Z" stroke="#A7ACBE" stroke-miterlimit="10" stroke-linejoin="round"/>
+</svg>
diff --git a/static/svgs/project/love-read-only-loved.svg b/static/svgs/project/love-read-only-loved.svg
new file mode 100644
index 00000000000..ee6c5c1bda1
--- /dev/null
+++ b/static/svgs/project/love-read-only-loved.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.9611 12.2479C26.2598 20.177 17.2789 26.413 15.0008 26.413C12.7226 26.413 3.74023 20.177 3.04043 12.2479C3.02022 11.9892 3 11.7305 3 11.4718C3 7.62734 6.13977 4.5 10.0011 4.5C11.9605 4.5 13.7411 5.29616 15.0008 6.61122C16.2604 5.29616 18.041 4.5 20.0005 4.5C23.8602 4.5 27 7.62734 27 11.4718C27 11.7305 26.9798 11.9892 26.9611 12.2479Z" fill="#E2E3E9"/>
+</svg>
diff --git a/static/svgs/project/love-read-only-not-loved.svg b/static/svgs/project/love-read-only-not-loved.svg
new file mode 100644
index 00000000000..255654cf76b
--- /dev/null
+++ b/static/svgs/project/love-read-only-not-loved.svg
@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27 12.3C26.25 20.25 17.25 26.4 15 26.4C12.75 26.4 3.75 20.1 3 12.3V11.4C3 7.65 6.15 4.5 10.05 4.5C12 4.5 13.8 5.25 15 6.6C16.2 5.25 18 4.5 19.95 4.5C23.85 4.5 27 7.65 27 11.4V12.3Z" fill="#E2E3E9"/>
+<path d="M27 12.3C26.25 20.25 17.25 26.4 15 26.4C12.75 26.4 3.75 20.1 3 12.3V11.4C3 7.65 6.15 4.5 10.05 4.5C12 4.5 13.8 5.25 15 6.6C16.2 5.25 18 4.5 19.95 4.5C23.85 4.5 27 7.65 27 11.4V12.3Z" stroke="#A7ACBE" stroke-miterlimit="10" stroke-linejoin="round"/>
+</svg>
diff --git a/static/svgs/project/studio-add-gray.svg b/static/svgs/project/studio-add-gray.svg
new file mode 100644
index 00000000000..2eb11a204ed
--- /dev/null
+++ b/static/svgs/project/studio-add-gray.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0.875C7.84569 0.875 8.53125 1.56056 8.53125 2.40625V5.46875H11.5938C12.4394 5.46875 13.125 6.15431 13.125 7C13.125 7.84569 12.4394 8.53125 11.5938 8.53125H8.53125V11.5938C8.53125 12.4394 7.84569 13.125 7 13.125C6.15431 13.125 5.46875 12.4394 5.46875 11.5938V8.53125H2.40625C1.56056 8.53125 0.875 7.84569 0.875 7C0.875 6.15431 1.56056 5.46875 2.40625 5.46875H5.46875V2.40625C5.46875 1.56056 6.15431 0.875 7 0.875Z" fill="#A7ACBE"/>
+</svg>