diff --git a/client/common/useKeyDownHandlers.js b/client/common/useKeyDownHandlers.js
index ce57ab5925..d2e90d7997 100644
--- a/client/common/useKeyDownHandlers.js
+++ b/client/common/useKeyDownHandlers.js
@@ -33,7 +33,11 @@ export default function useKeyDownHandlers(keyHandlers) {
     const isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
     const isCtrl = isMac ? e.metaKey : e.ctrlKey;
     if (e.shiftKey && isCtrl) {
-      handlers.current[`ctrl-shift-${e.key.toLowerCase()}`]?.(e);
+      handlers.current[
+        `ctrl-shift-${
+          /^\d+$/.test(e.code.at(-1)) ? e.code.at(-1) : e.key.toLowerCase()
+        }`
+      ]?.(e);
     } else if (isCtrl) {
       handlers.current[`ctrl-${e.key.toLowerCase()}`]?.(e);
     }
diff --git a/client/components/AddRemoveButton.jsx b/client/components/AddRemoveButton.jsx
deleted file mode 100644
index 48be8664e7..0000000000
--- a/client/components/AddRemoveButton.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
-
-import AddIcon from '../images/plus.svg';
-import RemoveIcon from '../images/minus.svg';
-
-const AddRemoveButton = ({ type, onClick }) => {
-  const { t } = useTranslation();
-  const alt =
-    type === 'add'
-      ? t('AddRemoveButton.AltAddARIA')
-      : t('AddRemoveButton.AltRemoveARIA');
-  const Icon = type === 'add' ? AddIcon : RemoveIcon;
-
-  return (
-    <button
-      className="overlay__close-button"
-      onClick={onClick}
-      aria-label={alt}
-    >
-      <Icon focusable="false" aria-hidden="true" />
-    </button>
-  );
-};
-
-AddRemoveButton.propTypes = {
-  type: PropTypes.oneOf(['add', 'remove']).isRequired,
-  onClick: PropTypes.func.isRequired
-};
-
-export default AddRemoveButton;
diff --git a/client/components/NavBasic.jsx b/client/components/NavBasic.jsx
deleted file mode 100644
index 2eda24dcf6..0000000000
--- a/client/components/NavBasic.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withTranslation } from 'react-i18next';
-
-import LogoIcon from '../images/p5js-logo-small.svg';
-import ArrowIcon from '../images/triangle-arrow-left.svg';
-
-class NavBasic extends React.PureComponent {
-  static defaultProps = {
-    onBack: null
-  };
-
-  render() {
-    return (
-      <nav
-        className="nav"
-        title="main-navigation"
-        ref={(node) => {
-          this.node = node;
-        }}
-      >
-        <ul className="nav__items-left">
-          <li className="nav__item-logo">
-            <LogoIcon
-              role="img"
-              aria-label={this.props.t('Common.p5logoARIA')}
-              focusable="false"
-              className="svg__logo"
-            />
-          </li>
-          {this.props.onBack && (
-            <li className="nav__item">
-              <button onClick={this.props.onBack}>
-                <span className="nav__item-header">
-                  <ArrowIcon focusable="false" aria-hidden="true" />
-                </span>
-                Back to the editor
-              </button>
-            </li>
-          )}
-        </ul>
-      </nav>
-    );
-  }
-}
-
-NavBasic.propTypes = {
-  onBack: PropTypes.func,
-  t: PropTypes.func.isRequired
-};
-
-export default withTranslation()(NavBasic);
diff --git a/client/components/OverlayManager.jsx b/client/components/OverlayManager.jsx
deleted file mode 100644
index 86a956a407..0000000000
--- a/client/components/OverlayManager.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { createPortal } from 'react-dom';
-
-const OverlayManager = ({ overlay, hideOverlay }) => {
-  // const [visible, trigger, setRef] = useModalBehavior();
-
-  const jsx = (
-    <React.Fragment>
-      {/* <div ref={setRef} >
-        {visible && <Dropdown items={headerNavOptions} />}
-      </div> */}
-    </React.Fragment>
-  );
-
-  return jsx && createPortal(jsx, document.body);
-};
-
-OverlayManager.propTypes = {
-  overlay: PropTypes.string,
-  hideOverlay: PropTypes.func.isRequired
-};
-
-OverlayManager.defaultProps = { overlay: null };
-
-export default OverlayManager;
diff --git a/client/components/PreviewNav.jsx b/client/components/PreviewNav.jsx
index fa42a89427..f66476d92b 100644
--- a/client/components/PreviewNav.jsx
+++ b/client/components/PreviewNav.jsx
@@ -12,12 +12,14 @@ const PreviewNav = ({ owner, project }) => {
     <nav className="nav preview-nav">
       <div className="nav__items-left">
         <div className="nav__item-logo">
-          <LogoIcon
-            role="img"
-            aria-label={t('Common.p5logoARIA')}
-            focusable="false"
-            className="svg__logo"
-          />
+          <Link to={`/${owner.username}/sketches`}>
+            <LogoIcon
+              role="img"
+              aria-label={t('Common.p5logoARIA')}
+              focusable="false"
+              className="svg__logo"
+            />
+          </Link>
         </div>
         <Link
           className="nav__item"
diff --git a/client/components/SkipLink.jsx b/client/components/SkipLink.jsx
new file mode 100644
index 0000000000..13f472d1a2
--- /dev/null
+++ b/client/components/SkipLink.jsx
@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+
+const SkipLink = ({ targetId, text }) => {
+  const [focus, setFocus] = useState(false);
+  const { t } = useTranslation();
+  const handleFocus = () => {
+    setFocus(true);
+  };
+
+  const handleBlur = () => {
+    setFocus(false);
+  };
+  const linkClasses = classNames('skip_link', { focus });
+
+  return (
+    <a
+      href={`#${targetId}`}
+      className={linkClasses}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+    >
+      {t(`SkipLink.${text}`)}
+    </a>
+  );
+};
+
+SkipLink.propTypes = {
+  targetId: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired
+};
+
+export default SkipLink;
diff --git a/client/components/createRedirectWithUsername.jsx b/client/components/createRedirectWithUsername.jsx
index a6b69233c4..a1d782e15f 100644
--- a/client/components/createRedirectWithUsername.jsx
+++ b/client/components/createRedirectWithUsername.jsx
@@ -1,29 +1,24 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import browserHistory from '../browserHistory';
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import PropTypes from 'prop-types';
 
-const RedirectToUser = ({ username, url = '/:username/sketches' }) => {
-  React.useEffect(() => {
-    if (username == null) {
-      return;
+const RedirectToUser = ({ url = '/:username/sketches' }) => {
+  const history = useHistory();
+  const username = useSelector((state) =>
+    state.user ? state.user.username : null
+  );
+  useEffect(() => {
+    if (username) {
+      history.replace(url.replace(':username', username));
     }
-
-    browserHistory.replace(url.replace(':username', username));
-  }, [username]);
+  }, [history, url, username]);
 
   return null;
 };
 
-function mapStateToProps(state) {
-  return {
-    username: state.user ? state.user.username : null
-  };
-}
-
-const ConnectedRedirectToUser = connect(mapStateToProps)(RedirectToUser);
-
-const createRedirectWithUsername = (url) => (props) => (
-  <ConnectedRedirectToUser {...props} url={url} />
-);
+RedirectToUser.propTypes = {
+  url: PropTypes.string.isRequired
+};
 
-export default createRedirectWithUsername;
+export default RedirectToUser;
diff --git a/client/constants.js b/client/constants.js
index c5678b161d..56cf7a034f 100644
--- a/client/constants.js
+++ b/client/constants.js
@@ -2,7 +2,6 @@
 // multiple files
 export const UPDATE_FILE_CONTENT = 'UPDATE_FILE_CONTENT';
 export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
-
 export const START_SKETCH = 'START_SKETCH';
 export const STOP_SKETCH = 'STOP_SKETCH';
 
@@ -47,8 +46,6 @@ export const SET_BLOB_URL = 'SET_BLOB_URL';
 export const EXPAND_SIDEBAR = 'EXPAND_SIDEBAR';
 export const COLLAPSE_SIDEBAR = 'COLLAPSE_SIDEBAR';
 
-export const CONSOLE_EVENT = 'CONSOLE_EVENT';
-export const CLEAR_CONSOLE = 'CLEAR_CONSOLE';
 export const EXPAND_CONSOLE = 'EXPAND_CONSOLE';
 export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
 
@@ -135,3 +132,6 @@ export const START_SAVING_PROJECT = 'START_SAVING_PROJECT';
 export const END_SAVING_PROJECT = 'END_SAVING_PROJECT';
 
 export const SET_COOKIE_CONSENT = 'SET_COOKIE_CONSENT';
+
+export const CONSOLE_EVENT = 'CONSOLE_EVENT';
+export const CLEAR_CONSOLE = 'CLEAR_CONSOLE';
diff --git a/client/i18n-test.js b/client/i18n-test.js
index 7e496be29b..de012269a6 100644
--- a/client/i18n-test.js
+++ b/client/i18n-test.js
@@ -1,6 +1,5 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-
 import translations from '../translations/locales/en-US/translations.json';
 
 i18n.use(initReactI18next).init({
diff --git a/client/index.jsx b/client/index.jsx
index 62b6cb1342..6c2e2e40b7 100644
--- a/client/index.jsx
+++ b/client/index.jsx
@@ -9,6 +9,7 @@ import Routing from './routes';
 import ThemeProvider from './modules/App/components/ThemeProvider';
 import Loader from './modules/App/components/loader';
 import './i18n';
+import SkipLink from './components/SkipLink';
 
 require('./styles/main.scss');
 
@@ -23,6 +24,7 @@ const App = () => (
   <Provider store={store}>
     <ThemeProvider>
       <Router history={browserHistory}>
+        <SkipLink targetId="play-sketch" text="PlaySketch" />
         <Routing />
       </Router>
     </ThemeProvider>
diff --git a/client/modules/IDE/actions/console.js b/client/modules/IDE/actions/console.js
index 34a77e1f07..649c4b61be 100644
--- a/client/modules/IDE/actions/console.js
+++ b/client/modules/IDE/actions/console.js
@@ -1,14 +1 @@
-import * as ActionTypes from '../../../constants';
-
-export function clearConsole() {
-  return {
-    type: ActionTypes.CLEAR_CONSOLE
-  };
-}
-
-export function dispatchConsoleEvent(messages) {
-  return {
-    type: ActionTypes.CONSOLE_EVENT,
-    event: messages
-  };
-}
+export { dispatchConsoleEvent, clearConsole } from '../reducers/console';
diff --git a/client/modules/IDE/components/AssetSize.jsx b/client/modules/IDE/components/AssetSize.jsx
index bf168c17f7..853e9d3ea4 100644
--- a/client/modules/IDE/components/AssetSize.jsx
+++ b/client/modules/IDE/components/AssetSize.jsx
@@ -1,6 +1,5 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import prettyBytes from 'pretty-bytes';
 
 import getConfig from '../../../utils/getConfig';
@@ -18,7 +17,11 @@ const formatPercent = (percent) => {
 };
 
 /* Eventually, this copy should be Total / 250 MB Used */
-const AssetSize = ({ totalSize }) => {
+const AssetSize = () => {
+  const totalSize = useSelector(
+    (state) => state.user.totalSize || state.assets.totalSize
+  );
+
   if (totalSize === undefined) {
     return null;
   }
@@ -40,15 +43,4 @@ const AssetSize = ({ totalSize }) => {
   );
 };
 
-AssetSize.propTypes = {
-  totalSize: PropTypes.number.isRequired
-};
-
-function mapStateToProps(state) {
-  return {
-    user: state.user,
-    totalSize: state.user.totalSize || state.assets.totalSize
-  };
-}
-
-export default connect(mapStateToProps)(AssetSize);
+export default AssetSize;
diff --git a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
index dafbe21517..c4f57fedca 100644
--- a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import { withTranslation } from 'react-i18next';
+import styled from 'styled-components';
 import MenuItem from '../../../../components/Dropdown/MenuItem';
 import TableDropdown from '../../../../components/Dropdown/TableDropdown';
 import * as ProjectActions from '../../actions/project';
@@ -11,7 +12,80 @@ import * as CollectionsActions from '../../actions/collections';
 import * as IdeActions from '../../actions/ide';
 import * as ToastActions from '../../actions/toast';
 import dates from '../../../../utils/formatDate';
+import { remSize, prop } from '../../../../theme';
 
+const SketchsTableRow = styled.tr`
+  &&& {
+    margin: ${remSize(10)};
+    height: ${remSize(72)};
+    font-size: ${remSize(16)};
+  }
+  &:nth-child(odd) {
+    background: ${prop('tableRowStripeColor')};
+  }
+
+  > th:nth-child(1) {
+    padding-left: ${remSize(12)};
+  }
+
+  > td {
+    padding-left: ${remSize(8)};
+  }
+
+  a {
+    color: ${prop('primaryTextColor')};
+  }
+
+  &.is-deleted > * {
+    font-style: italic;
+  }
+  @media (max-width: 770px) {
+    &&& {
+      margin: 0;
+      position: relative;
+      display: flex;
+      flex-wrap: wrap;
+      padding: ${remSize(15)};
+      height: fit-content;
+      gap: ${remSize(8)};
+      border: 1px solid ${prop('modalBorderColor')};
+      background-color: ${prop('searchBackgroundColor')};
+      > th {
+        padding-left: 0;
+        width: 100%;
+        font-weight: bold;
+        margin-bottom: ${remSize(6)};
+      }
+      > td {
+        padding-left: 0;
+        width: 30%;
+        font-size: ${remSize(14)};
+        color: ${prop('modalBorderColor')};
+      }
+    }
+  }
+`;
+const SketchesTableName = styled.span`
+  &&& {
+    display: flex;
+    align-items: center;
+  }
+`;
+const SketchlistDropdownColumn = styled.td`
+  &&& {
+    position: relative;
+    width: ${remSize(60)};
+  }
+  @media (max-width: 770px) {
+    &&& {
+      position: absolute;
+      top: 0;
+      right: ${remSize(4)};
+      width: auto !important;
+      margin: ${remSize(8)};
+    }
+  }
+`;
 const formatDateCell = (date, mobile = false) =>
   dates.format(date, { showTime: !mobile });
 
@@ -126,9 +200,9 @@ const CollectionListRowBase = (props) => {
   const { collection, mobile } = props;
 
   return (
-    <tr className="sketches-table__row" key={collection.id}>
+    <SketchsTableRow key={collection.id}>
       <th scope="row">
-        <span className="sketches-table__name">{renderCollectionName()}</span>
+        <SketchesTableName>{renderCollectionName()}</SketchesTableName>
       </th>
       <td>{formatDateCell(collection.createdAt, mobile)}</td>
       <td>{formatDateCell(collection.updatedAt, mobile)}</td>
@@ -136,8 +210,8 @@ const CollectionListRowBase = (props) => {
         {mobile && 'sketches: '}
         {(collection.items || []).length}
       </td>
-      <td className="sketch-list__dropdown-column">{renderActions()}</td>
-    </tr>
+      <SketchlistDropdownColumn>{renderActions()}</SketchlistDropdownColumn>
+    </SketchsTableRow>
   );
 };
 
diff --git a/client/modules/IDE/components/EditableInput.jsx b/client/modules/IDE/components/EditableInput.jsx
index 9f951d1de4..a323903e2b 100644
--- a/client/modules/IDE/components/EditableInput.jsx
+++ b/client/modules/IDE/components/EditableInput.jsx
@@ -28,7 +28,12 @@ function EditableInput({
   const { t } = useTranslation();
   React.useEffect(() => {
     if (isEditing) {
-      inputRef.current?.focus();
+      const inputElement = inputRef.current;
+      inputElement.setSelectionRange(
+        inputElement.value.length,
+        inputElement.value.length
+      );
+      inputElement.focus();
     }
   }, [isEditing]);
   React.useEffect(() => {
diff --git a/client/modules/IDE/components/Editor/MobileEditor.jsx b/client/modules/IDE/components/Editor/MobileEditor.jsx
index c3e56afd79..fa46e33b86 100644
--- a/client/modules/IDE/components/Editor/MobileEditor.jsx
+++ b/client/modules/IDE/components/Editor/MobileEditor.jsx
@@ -9,7 +9,7 @@ export const EditorContainer = styled.div`
   transform: ${(props) =>
     props.expanded ? 'translateX(50%)' : 'translateX(0)'};
 
-  > header {
+  > div {
     display: flex;
     ${prop('MobilePanel.secondary')}
     > span {
diff --git a/client/modules/IDE/components/Editor/index.jsx b/client/modules/IDE/components/Editor/index.jsx
index 87f456a126..6f5eeb5609 100644
--- a/client/modules/IDE/components/Editor/index.jsx
+++ b/client/modules/IDE/components/Editor/index.jsx
@@ -208,6 +208,10 @@ class Editor extends React.Component {
       if (/^[a-z]$/i.test(e.key) && (mode === 'css' || mode === 'javascript')) {
         this.showHint(_cm);
       }
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        this._cm.getInputField().blur();
+      }
     });
 
     this._cm.getWrapperElement().style[
@@ -235,6 +239,16 @@ class Editor extends React.Component {
 
   componentDidUpdate(prevProps) {
     if (this.props.file.id !== prevProps.file.id) {
+      const fileMode = this.getFileMode(this.props.file.name);
+      if (fileMode === 'javascript') {
+        // Define the new Emmet configuration based on the file mode
+        const emmetConfig = {
+          preview: ['html'],
+          markTagPairs: false,
+          autoRenameTags: true
+        };
+        this._cm.setOption('emmet', emmetConfig);
+      }
       const oldDoc = this._cm.swapDoc(this._docs[this.props.file.id]);
       this._docs[prevProps.file.id] = oldDoc;
       this._cm.focus();
@@ -513,7 +527,7 @@ class Editor extends React.Component {
         {(matches) =>
           matches ? (
             <section className={editorSectionClass}>
-              <header className="editor__header">
+              <div className="editor__header">
                 <button
                   aria-label={this.props.t('Editor.OpenSketchARIA')}
                   className="sidebar__contract"
@@ -538,7 +552,7 @@ class Editor extends React.Component {
                   </span>
                   <Timer />
                 </div>
-              </header>
+              </div>
               <article
                 ref={(element) => {
                   this.codemirrorContainer = element;
@@ -555,7 +569,7 @@ class Editor extends React.Component {
             </section>
           ) : (
             <EditorContainer expanded={this.props.isExpanded}>
-              <header>
+              <>
                 <IconButton
                   onClick={this.props.expandSidebar}
                   icon={FolderIcon}
@@ -564,7 +578,7 @@ class Editor extends React.Component {
                   {this.props.file.name}
                   <UnsavedChangesIndicator />
                 </span>
-              </header>
+              </>
               <section>
                 <EditorHolder
                   ref={(element) => {
diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
index 0b6424a783..de19d664fc 100644
--- a/client/modules/IDE/components/FileNode.jsx
+++ b/client/modules/IDE/components/FileNode.jsx
@@ -10,7 +10,7 @@ import * as FileActions from '../actions/files';
 import DownArrowIcon from '../../../images/down-filled-triangle.svg';
 import FolderRightIcon from '../../../images/triangle-arrow-right.svg';
 import FolderDownIcon from '../../../images/triangle-arrow-down.svg';
-import FileIcon from '../../../images/file.svg';
+import FileTypeIcon from './FileTypeIcon';
 
 function parseFileName(name) {
   const nameArray = name.split('.');
@@ -187,11 +187,19 @@ class FileNode extends React.Component {
     if (
       hasEmptyFilename ||
       hasNoExtension ||
-      notSameExtension ||
       hasOnlyExtension ||
       hasExtensionIfFolder
     ) {
       this.setUpdatedName(currentName);
+    } else if (notSameExtension) {
+      const userResponse = window.confirm(
+        'Are you sure you want to change the file extension?'
+      );
+      if (userResponse) {
+        this.saveUpdatedFileName();
+      } else {
+        this.setUpdatedName(currentName);
+      }
     } else {
       this.saveUpdatedFileName();
     }
@@ -256,6 +264,7 @@ class FileNode extends React.Component {
     const isRoot = this.props.name === 'root';
 
     const { t } = this.props;
+    const { extension } = parseFileName(this.props.name);
 
     return (
       <div className={itemClass}>
@@ -267,7 +276,11 @@ class FileNode extends React.Component {
             <span className="file-item__spacer"></span>
             {isFile && (
               <span className="sidebar__file-item-icon">
-                <FileIcon focusable="false" aria-hidden="true" />
+                <FileTypeIcon
+                  fileExtension={extension}
+                  focusable="false"
+                  aria-hidden="true"
+                />
               </span>
             )}
             {isFolder && (
diff --git a/client/modules/IDE/components/FileTypeIcon.jsx b/client/modules/IDE/components/FileTypeIcon.jsx
new file mode 100644
index 0000000000..c6bab74f4b
--- /dev/null
+++ b/client/modules/IDE/components/FileTypeIcon.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { IoLogoHtml5, IoLogoCss3, IoLogoJavascript } from 'react-icons/io';
+import { TbFileTypeXml, TbTxt, TbCsv } from 'react-icons/tb';
+import { VscJson } from 'react-icons/vsc';
+import FileIcon from '../../../images/file.svg';
+
+export default function FileTypeIcon({ fileExtension }) {
+  switch (fileExtension) {
+    case '.html':
+      return (
+        <span>
+          <IoLogoHtml5 />
+        </span>
+      );
+    case '.css':
+      return (
+        <span>
+          <IoLogoCss3 />
+        </span>
+      );
+    case '.js':
+      return (
+        <span>
+          <IoLogoJavascript />
+        </span>
+      );
+    case '.json':
+      return (
+        <span>
+          <VscJson />
+        </span>
+      );
+    case '.xml':
+      return (
+        <span>
+          <TbFileTypeXml />
+        </span>
+      );
+    case '.txt':
+      return (
+        <span>
+          <TbTxt />
+        </span>
+      );
+    case '.csv':
+      return (
+        <span>
+          <TbCsv />
+        </span>
+      );
+    default:
+      return <FileIcon focusable="false" aria-hidden="true" />;
+  }
+}
+
+FileTypeIcon.propTypes = {
+  fileExtension: PropTypes.string.isRequired
+};
diff --git a/client/modules/IDE/components/Header/MobileNav.jsx b/client/modules/IDE/components/Header/MobileNav.jsx
index 9d81cf6d22..37fa16bed3 100644
--- a/client/modules/IDE/components/Header/MobileNav.jsx
+++ b/client/modules/IDE/components/Header/MobileNav.jsx
@@ -238,7 +238,9 @@ const MobileNav = () => {
       <Title>
         <h1>{title === project.name ? <ProjectName /> : title}</h1>
         {project?.owner && title === project.name && (
-          <h5>by {project?.owner?.username}</h5>
+          <Link to={`/${project.owner.username}/sketches`}>
+            by {project?.owner?.username}
+          </Link>
         )}
       </Title>
       {/* check if the user is in login page */}
diff --git a/client/modules/IDE/components/Header/Nav.jsx b/client/modules/IDE/components/Header/Nav.jsx
index 40381b8f4c..f747d2781e 100644
--- a/client/modules/IDE/components/Header/Nav.jsx
+++ b/client/modules/IDE/components/Header/Nav.jsx
@@ -114,7 +114,7 @@ const ProjectMenu = () => {
   const isUserOwner = useSelector(getIsUserOwner);
   const project = useSelector((state) => state.project);
   const user = useSelector((state) => state.user);
-
+  const userSketches = `/${user.username}/sketches`;
   const isUnsaved = !project?.id;
 
   const rootFile = useSelector(selectRootFile);
@@ -137,12 +137,25 @@ const ProjectMenu = () => {
   return (
     <ul className="nav__items-left">
       <li className="nav__item-logo">
-        <LogoIcon
-          role="img"
-          aria-label={t('Common.p5logoARIA')}
-          focusable="false"
-          className="svg__logo"
-        />
+        {user && user.username !== undefined ? (
+          <Link to={userSketches}>
+            <LogoIcon
+              role="img"
+              aria-label={t('Common.p5logoARIA')}
+              focusable="false"
+              className="svg__logo"
+            />
+          </Link>
+        ) : (
+          <a href="https://p5js.org">
+            <LogoIcon
+              role="img"
+              aria-label={t('Common.p5logoARIA')}
+              focusable="false"
+              className="svg__logo"
+            />
+          </a>
+        )}
       </li>
       <NavDropdownMenu id="file" title={t('Nav.File.Title')}>
         <NavMenuItem onClick={newSketch}>{t('Nav.File.New')}</NavMenuItem>
@@ -193,9 +206,7 @@ const ProjectMenu = () => {
       <NavDropdownMenu id="edit" title={t('Nav.Edit.Title')}>
         <NavMenuItem onClick={cmRef.current?.tidyCode}>
           {t('Nav.Edit.TidyCode')}
-          <span className="nav__keyboard-shortcut">
-            {metaKeyName}+{'\u21E7'}+F
-          </span>
+          <span className="nav__keyboard-shortcut">{metaKeyName}+Shift+F</span>
         </NavMenuItem>
         <NavMenuItem onClick={cmRef.current?.showFind}>
           {t('Nav.Edit.Find')}
@@ -220,7 +231,7 @@ const ProjectMenu = () => {
         <NavMenuItem onClick={() => dispatch(stopSketch())}>
           {t('Nav.Sketch.Stop')}
           <span className="nav__keyboard-shortcut">
-            {'\u21E7'}+{metaKeyName}+Enter
+            Shift+{metaKeyName}+Enter
           </span>
         </NavMenuItem>
       </NavDropdownMenu>
@@ -270,7 +281,7 @@ const UnauthenticatedUserMenu = () => {
           </span>
         </Link>
       </li>
-      <span className="nav__item-or">{t('Nav.LoginOr')}</span>
+      <li className="nav__item-or">{t('Nav.LoginOr')}</li>
       <li className="nav__item">
         <Link to="/signup" className="nav__auth-button">
           <span className="nav__item-header" title="SignUp">
diff --git a/client/modules/IDE/components/Header/Toolbar.jsx b/client/modules/IDE/components/Header/Toolbar.jsx
index f61f56ed0e..5ebdbdafea 100644
--- a/client/modules/IDE/components/Header/Toolbar.jsx
+++ b/client/modules/IDE/components/Header/Toolbar.jsx
@@ -61,6 +61,7 @@ const Toolbar = (props) => {
       </button>
       <button
         className={playButtonClass}
+        id="play-sketch"
         onClick={() => {
           props.syncFileContent();
           dispatch(startSketch());
diff --git a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
index 45a7f72f52..85387dd9ae 100644
--- a/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
+++ b/client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
@@ -473,12 +473,16 @@ exports[`Nav renders editor version for desktop 1`] = `
         <li
           class="nav__item-logo"
         >
-          <test-file-stub
-            aria-label="p5.js Logo"
-            classname="svg__logo"
-            focusable="false"
-            role="img"
-          />
+          <a
+            href="https://p5js.org"
+          >
+            <test-file-stub
+              aria-label="p5.js Logo"
+              classname="svg__logo"
+              focusable="false"
+              role="img"
+            />
+          </a>
         </li>
         <li
           class="nav__item"
@@ -533,7 +537,7 @@ exports[`Nav renders editor version for desktop 1`] = `
                 <span
                   class="nav__keyboard-shortcut"
                 >
-                  ⌃+⇧+F
+                  Ctrl+Shift+F
                 </span>
               </button>
             </li>
@@ -545,7 +549,7 @@ exports[`Nav renders editor version for desktop 1`] = `
                 <span
                   class="nav__keyboard-shortcut"
                 >
-                  ⌃+F
+                  Ctrl+F
                 </span>
               </button>
             </li>
@@ -557,7 +561,7 @@ exports[`Nav renders editor version for desktop 1`] = `
                 <span
                   class="nav__keyboard-shortcut"
                 >
-                  ⌃+H
+                  Ctrl+H
                 </span>
               </button>
             </li>
@@ -603,7 +607,7 @@ exports[`Nav renders editor version for desktop 1`] = `
                 <span
                   class="nav__keyboard-shortcut"
                 >
-                  ⌃+Enter
+                  Ctrl+Enter
                 </span>
               </button>
             </li>
@@ -615,7 +619,7 @@ exports[`Nav renders editor version for desktop 1`] = `
                 <span
                   class="nav__keyboard-shortcut"
                 >
-                  ⇧+⌃+Enter
+                  Shift+Ctrl+Enter
                 </span>
               </button>
             </li>
diff --git a/client/modules/IDE/components/Header/index.jsx b/client/modules/IDE/components/Header/index.jsx
index dd02700e83..79f78ff67e 100644
--- a/client/modules/IDE/components/Header/index.jsx
+++ b/client/modules/IDE/components/Header/index.jsx
@@ -12,12 +12,12 @@ const Header = (props) => {
   const isMobile = useIsMobile();
 
   return (
-    <header>
+    <>
       <Nav />
       {!isMobile && (
         <Toolbar syncFileContent={props.syncFileContent} key={project.id} />
       )}
-    </header>
+    </>
   );
 };
 
diff --git a/client/modules/IDE/components/KeyboardShortcutModal.jsx b/client/modules/IDE/components/KeyboardShortcutModal.jsx
index 093630498a..a56710810d 100644
--- a/client/modules/IDE/components/KeyboardShortcutModal.jsx
+++ b/client/modules/IDE/components/KeyboardShortcutModal.jsx
@@ -25,7 +25,7 @@ function KeyboardShortcutModal() {
       <ul className="keyboard-shortcuts__list">
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
-            {metaKeyName} + {'\u21E7'} + F
+            {metaKeyName} + Shift + F
           </span>
           <span>{t('KeyboardShortcuts.CodeEditing.Tidy')}</span>
         </li>
@@ -39,7 +39,7 @@ function KeyboardShortcutModal() {
         </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
-            {metaKeyName} + {'\u21E7'} + G
+            {metaKeyName} + Shift + G
           </span>
           <span>
             {t('KeyboardShortcuts.CodeEditing.FindPreviousTextMatch')}
@@ -84,24 +84,24 @@ function KeyboardShortcutModal() {
         </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
-            {metaKeyName} + {'\u21E7'} + Enter
+            {metaKeyName} + Shift + Enter
           </span>
           <span>{t('KeyboardShortcuts.General.StopSketch')}</span>
         </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
-            {metaKeyName} + {'\u21E7'} + 1
+            {metaKeyName} + Shift + 1
           </span>
           <span>{t('KeyboardShortcuts.General.TurnOnAccessibleOutput')}</span>
         </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
-            {metaKeyName} + {'\u21E7'} + 2
+            {metaKeyName} + Shift + 2
           </span>
           <span>{t('KeyboardShortcuts.General.TurnOffAccessibleOutput')}</span>
         </li>
         <li className="keyboard-shortcut-item">
-          <span className="keyboard-shortcut__command">{'\u21E7'} + Right</span>
+          <span className="keyboard-shortcut__command">Shift + Right</span>
           <span>Go to Reference for Selected Item in Hinter</span>
         </li>
       </ul>
diff --git a/client/modules/IDE/components/NewFileForm.jsx b/client/modules/IDE/components/NewFileForm.jsx
index 2cc93566ae..9620e321dc 100644
--- a/client/modules/IDE/components/NewFileForm.jsx
+++ b/client/modules/IDE/components/NewFileForm.jsx
@@ -55,11 +55,15 @@ function NewFileForm() {
                 </React.Fragment>
               )}
             </Field>
-            <Button type="submit" disabled={invalid || submitting}>
-              {t('NewFileForm.AddFileSubmit')}
-            </Button>
+            <Field name="submitButton">
+              {() => (
+                <Button type="submit" disabled={submitting}>
+                  {t('NewFileForm.AddFileSubmit')}
+                </Button>
+              )}
+            </Field>
           </div>
-          {touched.name && errors.name && (
+          {touched.submitButton && errors.name && (
             <span className="form-error">{errors.name}</span>
           )}
         </form>
diff --git a/client/modules/IDE/components/NewFolderForm.jsx b/client/modules/IDE/components/NewFolderForm.jsx
index bc305b8b18..b0935397ff 100644
--- a/client/modules/IDE/components/NewFolderForm.jsx
+++ b/client/modules/IDE/components/NewFolderForm.jsx
@@ -52,11 +52,15 @@ function NewFolderForm() {
                 </React.Fragment>
               )}
             </Field>
-            <Button type="submit" disabled={invalid || submitting}>
-              {t('NewFolderForm.AddFolderSubmit')}
-            </Button>
+            <Field name="submitButton">
+              {() => (
+                <Button type="submit" disabled={submitting}>
+                  {t('NewFolderForm.AddFolderSubmit')}
+                </Button>
+              )}
+            </Field>
           </div>
-          {touched.name && errors.name && (
+          {touched.submitButton && errors.name && (
             <span className="form-error">{errors.name}</span>
           )}
         </form>
diff --git a/client/modules/IDE/components/QuickAddList/Icons.jsx b/client/modules/IDE/components/QuickAddList/Icons.jsx
index 34363bf63f..6006b0d2cb 100644
--- a/client/modules/IDE/components/QuickAddList/Icons.jsx
+++ b/client/modules/IDE/components/QuickAddList/Icons.jsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import CheckIcon from '../../../../images/check_encircled.svg';
 import CloseIcon from '../../../../images/close.svg';
+import CheckIcon from '../../../../images/check_encircled.svg';
 
 const Icons = ({ isAdded }) => {
   const classes = [
@@ -21,12 +20,6 @@ const Icons = ({ isAdded }) => {
         focusable="false"
       />
       <CheckIcon
-        className="quick-add__in-icon"
-        role="img"
-        aria-label="Descending"
-        focusable="false"
-      />
-      <CloseIcon
         className="quick-add__add-icon"
         role="img"
         aria-label="Descending"
diff --git a/client/modules/IDE/components/Searchbar/Searchbar.jsx b/client/modules/IDE/components/Searchbar/Searchbar.jsx
index a7c79d1f46..1c2217fd7a 100644
--- a/client/modules/IDE/components/Searchbar/Searchbar.jsx
+++ b/client/modules/IDE/components/Searchbar/Searchbar.jsx
@@ -1,71 +1,65 @@
+import React, { useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import React from 'react';
 import { throttle } from 'lodash';
 import { withTranslation } from 'react-i18next';
 import i18next from 'i18next';
 import SearchIcon from '../../../../images/magnifyingglass.svg';
 
-class Searchbar extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      searchValue: this.props.searchTerm
-    };
-    this.throttledSearchChange = throttle(this.searchChange, 500);
-  }
+const Searchbar = ({
+  searchTerm,
+  setSearchTerm,
+  resetSearchTerm,
+  searchLabel,
+  t
+}) => {
+  const [searchValue, setSearchValue] = useState(searchTerm);
 
-  componentWillUnmount() {
-    this.props.resetSearchTerm();
-  }
+  const throttledSearchChange = useCallback(
+    throttle((value) => {
+      setSearchTerm(value.trim());
+    }, 500),
+    []
+  );
 
-  handleResetSearch = () => {
-    this.setState({ searchValue: '' }, () => {
-      this.props.resetSearchTerm();
-    });
+  const handleResetSearch = () => {
+    setSearchValue('');
+    resetSearchTerm();
   };
 
-  searchChange = () => {
-    this.props.setSearchTerm(this.state.searchValue.trim());
+  const handleSearchChange = (e) => {
+    const { value } = e.target;
+    setSearchValue(value);
+    throttledSearchChange(value.trim());
   };
 
-  handleSearchChange = (e) => {
-    this.setState({ searchValue: e.target.value }, () => {
-      this.throttledSearchChange(this.state.searchValue.trim());
-    });
-  };
+  useEffect(() => {
+    setSearchValue(searchTerm);
+  }, [searchTerm]);
 
-  render() {
-    const { searchValue } = this.state;
-    return (
-      <div
-        className={`searchbar ${
-          searchValue === '' ? 'searchbar--is-empty' : ''
-        }`}
-      >
-        <div className="searchbar__button">
-          <SearchIcon
-            className="searchbar__icon"
-            focusable="false"
-            aria-hidden="true"
-          />
-        </div>
-        <input
-          className="searchbar__input"
-          type="text"
-          value={searchValue}
-          placeholder={this.props.searchLabel}
-          onChange={this.handleSearchChange}
+  return (
+    <div
+      className={`searchbar ${searchValue === '' ? 'searchbar--is-empty' : ''}`}
+    >
+      <div className="searchbar__button">
+        <SearchIcon
+          className="searchbar__icon"
+          focusable="false"
+          aria-hidden="true"
         />
-        <button
-          className="searchbar__clear-button"
-          onClick={this.handleResetSearch}
-        >
-          {this.props.t('Searchbar.ClearTerm')}
-        </button>
       </div>
-    );
-  }
-}
+      <input
+        className="searchbar__input"
+        type="text"
+        value={searchValue}
+        placeholder={searchLabel}
+        onChange={handleSearchChange}
+      />
+      <button className="searchbar__clear-button" onClick={handleResetSearch}>
+        {t('Searchbar.ClearTerm')}
+      </button>
+    </div>
+  );
+};
 
 Searchbar.propTypes = {
   searchTerm: PropTypes.string.isRequired,
diff --git a/client/modules/IDE/hooks/useSketchActions.js b/client/modules/IDE/hooks/useSketchActions.js
index 3c7b0e3d87..a4c5d70235 100644
--- a/client/modules/IDE/hooks/useSketchActions.js
+++ b/client/modules/IDE/hooks/useSketchActions.js
@@ -16,6 +16,7 @@ const useSketchActions = () => {
   const unsavedChanges = useSelector((state) => state.ide.unsavedChanges);
   const authenticated = useSelector((state) => state.user.authenticated);
   const project = useSelector((state) => state.project);
+  const user = useSelector((state) => state.user);
   const canEditProjectName = useSelector(selectCanEditSketch);
   const dispatch = useDispatch();
   const { t } = useTranslation();
@@ -40,8 +41,10 @@ const useSketchActions = () => {
   }
 
   function downloadSketch() {
-    dispatch(autosaveProject());
-    exportProjectAsZip(project.id);
+    if (authenticated && user.id === project.owner.id) {
+      dispatch(autosaveProject());
+      exportProjectAsZip(project.id);
+    }
   }
 
   function shareSketch() {
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index 9fa5817d62..2bd2649770 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -87,37 +87,6 @@ function WarnIfUnsavedChanges() {
   );
 }
 
-function Banner() {
-  // temporary banner to display funding opportunities
-  const [textObj, setTextObj] = useState({});
-
-  useEffect(() => {
-    const grant1 = {
-      copy:
-        'Learn to make art with AI with the Social Software High School Summer Institute. Apply by June 1!',
-      url: 'https://summer.ucla.edu/program/social-software-summer-institute/'
-    };
-
-    const grant2 = {
-      copy:
-        'Join us in contributing to p5.js——receive a $10,000 opportunity to grow within the contributor community!',
-      url: 'https://processingfoundation.org/grants'
-    };
-
-    const allMessages = [grant1, grant2];
-    const randomIndex = Math.floor(Math.random() * allMessages.length);
-    const randomMessage = allMessages[randomIndex];
-
-    setTextObj(randomMessage);
-  }, []);
-
-  return (
-    <div className="banner">
-      <a href={textObj.url}>{textObj.copy}</a>
-    </div>
-  );
-}
-
 export const CmControllerContext = React.createContext({});
 
 const IDEView = () => {
@@ -201,7 +170,6 @@ const IDEView = () => {
       <Helmet>
         <title>{getTitle(project)}</title>
       </Helmet>
-      <Banner />
       <IDEKeyHandlers getContent={() => cmRef.current?.getContent()} />
       <WarnIfUnsavedChanges />
       <Toast />
diff --git a/client/modules/IDE/reducers/console.js b/client/modules/IDE/reducers/console.js
index a8323909ec..c6f7ac90e3 100644
--- a/client/modules/IDE/reducers/console.js
+++ b/client/modules/IDE/reducers/console.js
@@ -1,19 +1,19 @@
-import * as ActionTypes from '../../../constants';
+import { createSlice } from '@reduxjs/toolkit';
 
 const consoleMax = 5000;
 const initialState = [];
 
-const console = (state = initialState, action) => {
-  let messages;
-  switch (action.type) {
-    case ActionTypes.CONSOLE_EVENT:
-      messages = [...action.event];
+const consoleSlice = createSlice({
+  name: 'console',
+  initialState,
+  reducers: {
+    dispatchConsoleEvent: (state, action) => {
+      const messages = [...action.payload];
       return state.concat(messages).slice(-consoleMax);
-    case ActionTypes.CLEAR_CONSOLE:
-      return [];
-    default:
-      return state;
+    },
+    clearConsole: () => []
   }
-};
+});
 
-export default console;
+export const { dispatchConsoleEvent, clearConsole } = consoleSlice.actions;
+export default consoleSlice.reducer;
diff --git a/client/modules/User/components/CollectionCreate.jsx b/client/modules/User/components/CollectionCreate.jsx
index 9a19f4abf1..02d3fb59f0 100644
--- a/client/modules/User/components/CollectionCreate.jsx
+++ b/client/modules/User/components/CollectionCreate.jsx
@@ -71,7 +71,7 @@ const CollectionCreate = () => {
               value={description}
               onChange={(e) => setDescription(e.target.value)}
               placeholder={t('CollectionCreate.DescriptionPlaceholder')}
-              rows="4"
+              rows="6"
             />
           </p>
           <Button type="submit" disabled={invalid}>
diff --git a/client/modules/User/components/LoginForm.jsx b/client/modules/User/components/LoginForm.jsx
index d990299322..8efcfa22c7 100644
--- a/client/modules/User/components/LoginForm.jsx
+++ b/client/modules/User/components/LoginForm.jsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Field } from 'react-final-form';
 import { useDispatch } from 'react-redux';
+import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
 import Button from '../../../common/Button';
 import { validateLogin } from '../../../utils/reduxFormUtils';
 import { validateAndLoginUser } from '../actions';
@@ -13,6 +14,10 @@ function LoginForm() {
   function onSubmit(formProps) {
     return dispatch(validateAndLoginUser(formProps));
   }
+  const [showPassword, setShowPassword] = useState(false);
+  const handleVisibility = () => {
+    setShowPassword(!showPassword);
+  };
 
   return (
     <Form
@@ -34,6 +39,7 @@ function LoginForm() {
                   type="text"
                   id="email"
                   autoComplete="username"
+                  autoCapitalize="none"
                   {...field.input}
                 />
                 {field.meta.touched && field.meta.error && (
@@ -44,22 +50,35 @@ function LoginForm() {
           </Field>
           <Field name="password">
             {(field) => (
-              <p className="form__field">
-                <label htmlFor="password" className="form__label">
-                  {t('LoginForm.Password')}
-                </label>
-                <input
-                  className="form__input"
-                  aria-label={t('LoginForm.PasswordARIA')}
-                  type="password"
-                  id="password"
-                  autoComplete="current-password"
-                  {...field.input}
-                />
-                {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
-                )}
-              </p>
+              <div>
+                <p className="form__field">
+                  <label htmlFor="password" className="form__label">
+                    {t('LoginForm.Password')}
+                  </label>
+                  <button
+                    className="form__eye__icon"
+                    type="button"
+                    onClick={handleVisibility}
+                  >
+                    {showPassword ? (
+                      <AiOutlineEyeInvisible />
+                    ) : (
+                      <AiOutlineEye />
+                    )}
+                  </button>
+                  <input
+                    className="form__input"
+                    aria-label={t('LoginForm.PasswordARIA')}
+                    type={showPassword ? 'text' : 'password'}
+                    id="password"
+                    autoComplete="current-password"
+                    {...field.input}
+                  />
+                  {field.meta.touched && field.meta.error && (
+                    <span className="form-error">{field.meta.error}</span>
+                  )}
+                </p>
+              </div>
             )}
           </Field>
           {submitError && !modifiedSinceLastSubmit && (
diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx
index c497981c1e..6e967c5c4a 100644
--- a/client/modules/User/components/SignupForm.jsx
+++ b/client/modules/User/components/SignupForm.jsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import { React, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Field } from 'react-final-form';
 import { useDispatch } from 'react-redux';
+import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
 import { validateSignup } from '../../../utils/reduxFormUtils';
 import { validateAndSignUpUser } from '../actions';
 import Button from '../../../common/Button';
@@ -39,6 +40,14 @@ function SignupForm() {
   function onSubmit(formProps) {
     return dispatch(validateAndSignUpUser(formProps));
   }
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const handleVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+  const handleConfirmVisibility = () => {
+    setShowConfirmPassword(!showConfirmPassword);
+  };
 
   return (
     <Form
@@ -64,6 +73,7 @@ function SignupForm() {
                   type="text"
                   id="username"
                   autoComplete="username"
+                  autoCapitalize="none"
                   {...field.input}
                 />
                 {field.meta.touched && field.meta.error && (
@@ -94,42 +104,68 @@ function SignupForm() {
           </Field>
           <Field name="password">
             {(field) => (
-              <p className="form__field">
-                <label htmlFor="password" className="form__label">
-                  {t('SignupForm.Password')}
-                </label>
-                <input
-                  className="form__input"
-                  aria-label={t('SignupForm.PasswordARIA')}
-                  type="password"
-                  id="password"
-                  autoComplete="new-password"
-                  {...field.input}
-                />
-                {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
-                )}
-              </p>
+              <div>
+                <p className="form__field">
+                  <label htmlFor="password" className="form__label">
+                    {t('SignupForm.Password')}
+                  </label>
+                  <button
+                    className="form__eye__icon"
+                    type="button"
+                    onClick={handleVisibility}
+                  >
+                    {showPassword ? (
+                      <AiOutlineEyeInvisible />
+                    ) : (
+                      <AiOutlineEye />
+                    )}
+                  </button>
+                  <input
+                    className="form__input"
+                    aria-label={t('SignupForm.PasswordARIA')}
+                    type={showPassword ? 'text' : 'password'}
+                    id="password"
+                    autoComplete="new-password"
+                    {...field.input}
+                  />
+                  {field.meta.touched && field.meta.error && (
+                    <span className="form-error">{field.meta.error}</span>
+                  )}
+                </p>
+              </div>
             )}
           </Field>
           <Field name="confirmPassword">
             {(field) => (
-              <p className="form__field">
-                <label htmlFor="confirm password" className="form__label">
-                  {t('SignupForm.ConfirmPassword')}
-                </label>
-                <input
-                  className="form__input"
-                  type="password"
-                  aria-label={t('SignupForm.ConfirmPasswordARIA')}
-                  id="confirm password"
-                  autoComplete="new-password"
-                  {...field.input}
-                />
-                {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
-                )}
-              </p>
+              <div>
+                <p className="form__field">
+                  <label htmlFor="confirmPassword" className="form__label">
+                    {t('SignupForm.ConfirmPassword')}
+                  </label>
+                  <button
+                    className="form__eye__icon"
+                    type="button"
+                    onClick={handleConfirmVisibility}
+                  >
+                    {showConfirmPassword ? (
+                      <AiOutlineEyeInvisible />
+                    ) : (
+                      <AiOutlineEye />
+                    )}
+                  </button>
+                  <input
+                    className="form__input"
+                    type={showConfirmPassword ? 'text' : 'password'}
+                    aria-label={t('SignupForm.ConfirmPasswordARIA')}
+                    id="confirmPassword" // Match the id with htmlFor
+                    autoComplete="new-password"
+                    {...field.input}
+                  />
+                  {field.meta.touched && field.meta.error && (
+                    <span className="form-error">{field.meta.error}</span>
+                  )}
+                </p>
+              </div>
             )}
           </Field>
           <Button type="submit" disabled={submitting || invalid || pristine}>
diff --git a/client/routes.jsx b/client/routes.jsx
index 418a5bf99d..c0e189441d 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -17,7 +17,7 @@ import NewPasswordView from './modules/User/pages/NewPasswordView';
 import AccountView from './modules/User/pages/AccountView';
 import CollectionView from './modules/User/pages/CollectionView';
 import DashboardView from './modules/User/pages/DashboardView';
-import createRedirectWithUsername from './components/createRedirectWithUsername';
+import RedirectToUser from './components/createRedirectWithUsername';
 import { getUser } from './modules/User/actions';
 import {
   userIsAuthenticated,
@@ -84,11 +84,11 @@ const routes = (
 
     <Route
       path="/sketches"
-      component={createRedirectWithUsername('/:username/sketches')}
+      component={() => <RedirectToUser url="/:username/sketches" />}
     />
     <Route
       path="/assets"
-      component={createRedirectWithUsername('/:username/assets')}
+      component={() => <RedirectToUser url="/:username/assets" />}
     />
     <Route path="/account" component={userIsAuthenticated(AccountView)} />
     <Route path="/about" component={IDEView} />
diff --git a/client/store.js b/client/store.js
index 12beed2e12..7de458086d 100644
--- a/client/store.js
+++ b/client/store.js
@@ -24,7 +24,7 @@ export default function setupStore(initialState) {
     middleware: (getDefaultMiddleware) =>
       getDefaultMiddleware({
         thunk: true,
-        serializableCheck: true,
+        serializableCheck: false,
         // TODO: enable immutableCheck once the mutations are fixed.
         immutableCheck: false
       }).concat(listenerMiddleware.middleware),
diff --git a/client/styles/components/_collection-create.scss b/client/styles/components/_collection-create.scss
index 093b96b84f..94e0546df3 100644
--- a/client/styles/components/_collection-create.scss
+++ b/client/styles/components/_collection-create.scss
@@ -2,4 +2,10 @@
 
 .collection-create {
   padding: #{math.div(24, $base-font-size)}rem;
+
+  @media (max-width: 650px) {
+    .form__input {
+      min-width: unset;
+    }
+  }
 }
diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss
index c5a977e430..eef00b95c9 100644
--- a/client/styles/components/_collection.scss
+++ b/client/styles/components/_collection.scss
@@ -106,6 +106,10 @@
   @extend %dropdown-open-right;
   padding: #{math.div(20, $base-font-size)}rem;
   width: #{math.div(350, $base-font-size)}rem;
+  @media only screen and (max-width: 520px) {
+    max-width: 90vw;
+    right: -#{120 / $base-font-size}rem;
+  }
 }
 
 .collection-content {
diff --git a/client/styles/components/_console-input.scss b/client/styles/components/_console-input.scss
index 9efe857216..ca0833c782 100644
--- a/client/styles/components/_console-input.scss
+++ b/client/styles/components/_console-input.scss
@@ -12,12 +12,13 @@
 .console__input .console-active__arrow {
   width: auto;
   height: 38%;
-  & path {
-    @include themify() {
-      fill: getThemifyVariable('console-active-arrow-color');
-      opacity: 1; 
-    }
-  }
+  @include themify() {
+		& g,
+		& polygon,
+		& path {
+			fill: getThemifyVariable('secondary-text-color');
+		}
+	}
 }
 
 .console-active__arrow-container {
diff --git a/client/styles/components/_forms.scss b/client/styles/components/_forms.scss
index 6daa1fa67a..0d9c80955c 100644
--- a/client/styles/components/_forms.scss
+++ b/client/styles/components/_forms.scss
@@ -66,15 +66,29 @@
     color: getThemifyVariable("form-input-text-color");
     background-color: getThemifyVariable("input-background-color");
   }
-
+  
   @media (max-width: 770px) {
     max-width: 100%;
-    width:100%;
+    width: 100%;
   }
 }
 
+.form__eye__icon {
+  font-size: 28px;
+  position: relative;
+  top: 7px;
+  right: -355px;
+  margin-left: -40px;
+}
+
+
+.form__input[type='password']::-ms-reveal {
+  display: none;
+}
+
 .form__input-flexible-height {
   height: auto;
+  resize: none;
 }
 
 .form__input::placeholder {
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index 84d5ae0999..1f4a7fc364 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -110,6 +110,8 @@
 .nav__dropdown {
   @extend %dropdown-open-left;
   display: none;
+  max-height: 60vh;
+  overflow-y: auto;
   .nav__item--open & {
     display: flex;
   }
diff --git a/client/styles/components/_overlay.scss b/client/styles/components/_overlay.scss
index 8c6c2da757..c8b720a841 100644
--- a/client/styles/components/_overlay.scss
+++ b/client/styles/components/_overlay.scss
@@ -27,7 +27,7 @@
   max-height: 80%;
   max-width: 80%;
   position: relative;
-  padding-bottom: #{math.div(25, $base-font-size)}rem;
+  padding-bottom: #{math.div(12, $base-font-size)}rem;
 
   @media (max-width: 650px) {
     max-width: 100%;
@@ -37,6 +37,10 @@
   }
 }
 
+.overlay__body:has(.collection-create){
+  max-height: none;
+}
+
 .overlay__header {
   display: flex;
   justify-content: space-between;
diff --git a/client/styles/components/_quick-add.scss b/client/styles/components/_quick-add.scss
index 1a47b992c5..96106c5d02 100644
--- a/client/styles/components/_quick-add.scss
+++ b/client/styles/components/_quick-add.scss
@@ -83,14 +83,11 @@
   }
 }
 
-.quick-add__add-icon {
-  transform: rotate(45deg);
-}
-
-.quick-add__item:hover,
-.quick-add__item-toggle:hover,
+.quick-add__item,
+.quick-add__item-toggle,
 .quick-add__item-toggle:focus {
   cursor: pointer;
+  
   @include themify() {
     & .quick-add__icon path {
       fill: getThemifyVariable('table-button-hover-color');
@@ -100,28 +97,25 @@
       fill: getThemifyVariable('table-button-background-hover-color');
     }
   }
+}
 
-  & .quick-add__in-icon {
-    display: none;
+.quick-add__icon--in-collection {
+  .quick-add__remove-icon {
+    display: inline-block;
   }
 
-  & .quick-add__icon--in-collection {
-    .quick-add__remove-icon {
-      display: inline-block;
-    }
-
-    .quick-add__add-icon {
-      display: none;
-    }
+  .quick-add__add-icon {
+    display: none;
   }
+}
 
-  & .quick-add__icon--not-in-collection {
-    .quick-add__add-icon {
-      display: inline-block;
-    }
+.quick-add__icon--not-in-collection {
+  .quick-add__add-icon {
+    display: inline-block;
+  }
 
-    .quick-add__remove-icon {
-      display: none;
-    }
+  .quick-add__remove-icon {
+    display: none;
   }
 }
+
diff --git a/client/styles/components/_skip-link.scss b/client/styles/components/_skip-link.scss
new file mode 100644
index 0000000000..09d7d7d60f
--- /dev/null
+++ b/client/styles/components/_skip-link.scss
@@ -0,0 +1,29 @@
+@use "sass:math";
+
+.skip_link {
+  left: 50%;
+  transform: translateX(-50%);
+  top: 1%;
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+  position: absolute;
+  border-radius: 3px;
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: transparent;
+  font-size: #{math.div(12, $base-font-size)}rem;
+  line-height: #{math.div(50, $base-font-size)}rem;line-height: 11px;
+  padding: #{math.div(10, $base-font-size)}rem #{math.div(10, $base-font-size)}rem;
+  background: #fff;
+  display: inline-block;
+  text-transform: uppercase;
+  transition: none;
+  z-index: 5;
+}
+
+.skip_link:focus {
+  clip: auto;
+  overflow: visible;
+  width: auto;
+  height: auto;
+}
diff --git a/client/styles/layout/_ide.scss b/client/styles/layout/_ide.scss
index b801ece6eb..bf7c5ae903 100644
--- a/client/styles/layout/_ide.scss
+++ b/client/styles/layout/_ide.scss
@@ -16,19 +16,6 @@
 	width: 100%;
 }
 
-.banner {
-  width: 100%;
-  min-height: 2.2rem;
-  text-align: center;
-  padding: 0.5rem;
-  font-weight: bold;
-  border-bottom: 1px dashed #A6A6A6;
-
-  @media (max-width: 770px) {
-    min-height: 3.3rem;
-  }
-}
-
 .sidebar {
   width: 100%;
   height: 100%;
diff --git a/client/styles/main.scss b/client/styles/main.scss
index dbef1e9920..53208a6b4f 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -54,6 +54,7 @@
 @import 'components/collection';
 @import 'components/collection-create';
 @import 'components/quick-add';
+@import 'components/skip-link';
 
 @import 'layout/dashboard';
 @import 'layout/ide';
diff --git a/client/theme.js b/client/theme.js
index f60ef0735a..490255e45b 100644
--- a/client/theme.js
+++ b/client/theme.js
@@ -20,7 +20,7 @@ export const colors = {
   lightsteelblue: '#B0C4DE',
   dodgerblue: '#1E90FF',
   p5ContrastPink: ' #FFA9D9',
-
+  p5ContrastYellow: '#fff001',
   borderColor: ' #B5B5B5',
   outlineColor: '#0F9DD7'
 };
@@ -75,6 +75,9 @@ const baseThemes = {
     inactiveTextColor: grays.middleDark,
     backgroundColor: grays.lighter,
     accentColor: colors.p5jsPink,
+    modalBorderColor: grays.middleLight,
+    searchBackgroundColor: grays.lightest,
+    tableRowStripeColor: grays.mediumLight,
 
     Button: {
       primary: {
@@ -107,7 +110,7 @@ const baseThemes = {
         },
         hover: {
           foreground: grays.lightest,
-          background: colors.p5jsPink,
+          background: colors.p5jsActivePink,
           border: colors.p5jsPink
         },
         active: {
@@ -162,6 +165,9 @@ const baseThemes = {
     inactiveTextColor: grays.middleLight,
     backgroundColor: grays.darker,
     accentColor: colors.p5jsPink,
+    modalBorderColor: grays.middleDark,
+    searchBackgroundColor: grays.darker,
+    tableRowStripeColor: grays.dark,
 
     Button: {
       primary: {
@@ -194,8 +200,8 @@ const baseThemes = {
         },
         hover: {
           foreground: grays.lightest,
-          background: colors.p5jsPink,
-          border: colors.p5jsPink
+          background: colors.p5jsActivePink,
+          border: colors.p5jsActivePink
         },
         active: {
           foreground: grays.lightest,
@@ -253,8 +259,8 @@ export default {
       primary: {
         hover: {
           foreground: grays.dark,
-          background: colors.yellow,
-          border: colors.yellow
+          background: colors.p5ContrastYellow,
+          border: colors.p5ContrastYellow
         },
         active: {
           foreground: grays.dark
@@ -268,8 +274,8 @@ export default {
         },
         hover: {
           foreground: grays.dark,
-          background: colors.yellow,
-          border: colors.yellow
+          background: colors.p5ContrastYellow,
+          border: colors.p5ContrastYellow
         },
         active: {
           foreground: grays.dark
diff --git a/client/utils/metaKey.js b/client/utils/metaKey.js
index 6d9aab8a6c..cca6d3986b 100644
--- a/client/utils/metaKey.js
+++ b/client/utils/metaKey.js
@@ -6,6 +6,6 @@ const metaKey = (() => {
   return 'Ctrl';
 })();
 
-const metaKeyName = metaKey === 'Cmd' ? '⌘' : '⌃';
+const metaKeyName = metaKey === 'Cmd' ? '⌘' : 'Ctrl';
 
 export { metaKey, metaKeyName };
diff --git a/client/utils/reduxFormUtils.js b/client/utils/reduxFormUtils.js
index 83ea15e402..94962fbc71 100644
--- a/client/utils/reduxFormUtils.js
+++ b/client/utils/reduxFormUtils.js
@@ -13,12 +13,12 @@ export const domOnlyProps = ({
   visited,
   autofilled,
   error,
-  ...domProps }) => domProps;
+  ...domProps
+}) => domProps;
 /* eslint-enable */
 
 /* eslint-disable */
-const EMAIL_REGEX =
-  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;
+const EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;
 /* eslint-enable */
 
 function validateNameEmail(formProps, errors) {
@@ -51,6 +51,9 @@ export function validateSettings(formProps) {
   if (formProps.newPassword && formProps.newPassword.length < 6) {
     errors.newPassword = i18n.t('ReduxFormUtils.errorShortPassword');
   }
+  if (formProps.currentPassword === formProps.newPassword) {
+    errors.newPassword = i18n.t('ReduxFormUtils.errorNewPasswordRepeat');
+  }
   return errors;
 }
 
diff --git a/package-lock.json b/package-lock.json
index 2d3eca9997..6f5890f1c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "p5.js-web-editor",
-  "version": "2.12.12",
+  "version": "2.13.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "p5.js-web-editor",
-      "version": "2.12.12",
+      "version": "2.13.0",
       "license": "LGPL-2.1",
       "dependencies": {
         "@auth0/s3": "^1.0.0",
@@ -86,6 +86,7 @@
         "react-ga": "^3.3.0",
         "react-helmet": "^5.1.3",
         "react-i18next": "^11.11.3",
+        "react-icons": "^4.11.0",
         "react-markdown": "^6.0.3",
         "react-redux": "^7.2.4",
         "react-refresh": "^0.14.0",
@@ -40316,6 +40317,14 @@
         "react": ">= 16.8.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
+      "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-inspector": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-5.1.1.tgz",
@@ -75462,6 +75471,12 @@
         "html-parse-stringify": "^3.0.1"
       }
     },
+    "react-icons": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
+      "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==",
+      "requires": {}
+    },
     "react-inspector": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-5.1.1.tgz",
diff --git a/package.json b/package.json
index 0d48b1b975..cea49d57c4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "p5.js-web-editor",
-  "version": "2.12.12",
+  "version": "2.13.0",
   "description": "The web editor for p5.js.",
   "scripts": {
     "clean": "rimraf dist",
@@ -230,6 +230,7 @@
     "react-ga": "^3.3.0",
     "react-helmet": "^5.1.3",
     "react-i18next": "^11.11.3",
+    "react-icons": "^4.11.0",
     "react-markdown": "^6.0.3",
     "react-redux": "^7.2.4",
     "react-refresh": "^0.14.0",
diff --git a/server/domain-objects/createDefaultFiles.js b/server/domain-objects/createDefaultFiles.js
index 19d33a5fbb..7e2f6b71db 100644
--- a/server/domain-objects/createDefaultFiles.js
+++ b/server/domain-objects/createDefaultFiles.js
@@ -9,8 +9,8 @@ function draw() {
 export const defaultHTML = `<!DOCTYPE html>
 <html lang="en">
   <head>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.3/p5.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.3/addons/p5.sound.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/addons/p5.sound.min.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css">
     <meta charset="utf-8" />
 
diff --git a/translations/locales/be/translations.json b/translations/locales/be/translations.json
index 04bf51f10a..e730032fbc 100644
--- a/translations/locales/be/translations.json
+++ b/translations/locales/be/translations.json
@@ -287,6 +287,7 @@
     "errorShortPassword": "পাসওয়ার্ডটি কমপক্ষে 6 টি অক্ষর হতে হবে",
     "errorConfirmPassword": "আপনার পাসওয়ার্ড নিশ্চিত করুন",
     "errorNewPassword": "দয়া করে একটি নতুন পাসওয়ার্ড লিখুন বা বর্তমান পাসওয়ার্ডটি ফাঁকা রাখুন।",
+    "errorNewPasswordRepeat":"Your New Password must differ from the current one.",
     "errorEmptyUsername": "দয়া করে একটি ইউজারনেম লিখুন",
     "errorLongUsername": "ইউজারনেম সর্বাধিক 20 অক্ষর হতে হবে",
     "errorValidUsername": "ইউজারনেম কেবলমাত্র সংখ্যা, অক্ষর, দোতলা, ড্যাশ, এবং আন্ডারস্কোর থাকতে পারে"
@@ -558,10 +559,6 @@
     "35Seconds": "35 সেকেন্ড আগে",
     "Ago": "{{timeAgo}} আগে"
   },
-  "AddRemoveButton": {
-    "AltAddARIA": "সংগ্রহে যোগ করুন",
-    "AltRemoveARIA": "সংগ্রহ থেকে সরান"
-  },
   "CopyableInput": {
     "CopiedARIA": "ক্লিপবোর্ডে কপি করা হয়েছে!",
     "OpenViewTabARIA": "{{label}} দেখুন নতুন ট্যাবে"
@@ -597,14 +594,6 @@
     "On": "চালু",
     "Off": "বন্ধ"
   },
-  "MobileIDEView": {
-    "Preferences": "পছন্দ",
-    "MyStuff": "আমার জিনিসপত্র",
-    "Examples": "উদাহরণ",
-    "OriginalEditor": "মৌলিক এডিটর",
-    "Login": "লগইন",
-    "Logout": "লগআউট"
-  },
   "MobileDashboardView": {
     "Examples": "উদাহরণ",
     "Sketches": "স্কেচগুলি",
diff --git a/translations/locales/de/translations.json b/translations/locales/de/translations.json
index 3de3152788..c9998dea0b 100644
--- a/translations/locales/de/translations.json
+++ b/translations/locales/de/translations.json
@@ -280,6 +280,7 @@
     "errorEmptyPassword": "Gib bitte ein Passwort ein",
     "errorShortPassword": "Das Passwort muss mindestens aus 6 Zeichen bestehen",
     "errorConfirmPassword": "Gib bitte das Passwort erneut ein",
+    "errorNewPasswordRepeat":"Your New Password must differ from the current one.",
     "errorNewPassword": "Gib bitte ein neues Passwort ein oder lass dieses Feld frei.",
     "errorEmptyUsername": "Gib bitte einen Nutzernamen ein.",
     "errorLongUsername": "Der Nutzername muss weniger als 20 Zeichen haben.",
@@ -552,10 +553,6 @@
     "35Seconds": "vor 35 Sekunden",
     "Ago": "vor {{timeAgo}}"
   },
-  "AddRemoveButton": {
-    "AltAddARIA": "Zur Sammlung hinzufügen",
-    "AltRemoveARIA": "Aus Sammlung entfernen"
-  },
   "CopyableInput": {
     "CopiedARIA": "In die Zwischenablage kopiert",
     "OpenViewTabARIA": "Öffne {{label}} in neuem Tab"
@@ -590,14 +587,6 @@
     "On": "An",
     "Off": "Aus"
   },
-  "MobileIDEView": {
-    "Preferences": "Einstellungen",
-    "MyStuff": "Mein Zeug",
-    "Examples": "Beispiele",
-    "OriginalEditor": "Original-Editor",
-    "Login": "Anmelden",
-    "Logout": "Abmelden"
-  },
   "MobileDashboardView": {
     "Examples":  "Beispiele",
     "Sketches":  "Sketche",
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index d227418ba7..aa59c30451 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -292,6 +292,7 @@
     "errorShortPassword": "Password must be at least 6 characters",
     "errorConfirmPassword": "Please confirm your password",
     "errorNewPassword": "Please enter a new password or leave the current password empty.",
+    "errorNewPasswordRepeat":"Your New Password must differ from the current one.",
     "errorEmptyUsername": "Please enter a username.",
     "errorLongUsername": "Username must be less than 20 characters.",
     "errorValidUsername": "Username must only consist of numbers, letters, periods, dashes, and underscores."
@@ -563,10 +564,6 @@
     "35Seconds": "35 seconds ago",
     "Ago": "{{timeAgo}} ago"
   },
-  "AddRemoveButton": {
-    "AltAddARIA": "Add to collection",
-    "AltRemoveARIA": "Remove from collection"
-  },
   "CopyableInput": {
     "CopiedARIA": "Copied to Clipboard!",
     "OpenViewTabARIA": "Open {{label}} view in new tab"
@@ -602,14 +599,6 @@
     "On": "On",
     "Off": "Off"
   },
-  "MobileIDEView":{
-    "Preferences": "Preferences",
-    "MyStuff": "My Stuff",
-    "Examples": "Examples",
-    "OriginalEditor": "Original Editor",
-    "Login": "Login",
-    "Logout": "Logout"
-  },
   "MobileDashboardView": {
     "Examples": "Examples",
     "Sketches": "Sketches",
@@ -632,5 +621,8 @@
     "PrivacyPolicy": "Privacy Policy",
     "TermsOfUse": "Terms of Use",
     "CodeOfConduct": "Code of Conduct"
+  },
+  "SkipLink": {
+    "PlaySketch": "Skip to Play Sketch"
   }
 }
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index 778787d8cb..1336cf47d2 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -281,6 +281,7 @@
     "errorShortPassword": "La contraseña debe tener al menos 6 caracteres",
     "errorConfirmPassword": "Por favor confirma una contraseña",
     "errorNewPassword": "Por favor introduce una nueva contraseña o deja la actual contraseña vacía",
+    "errorNewPasswordRepeat":"Your New Password must differ from the current one.",
     "errorEmptyUsername": "Por favor introduce tu identificación",
     "errorLongUsername": "La identificación debe ser menor a 20 caracteres.",
     "errorValidUsername": "La identificación debe consistir solamente de números, letras, puntos, guiones y guiones bajos."
@@ -551,10 +552,6 @@
     "35Seconds": "hace 35 segundos",
     "Ago": "hace {{timeAgo}}"
   },
-  "AddRemoveButton": {
-    "AltAddARIA": "Agregar a colección",
-    "AltRemoveARIA": "Remover de colección"
-  },
   "CopyableInput": {
     "CopiedARIA": "¡Copiado en el portapapeles!",
     "OpenViewTabARIA": "Abrir la vista {{label}} en nueva pestaña"
@@ -589,14 +586,6 @@
     "On": "Activar",
     "Off": "Desactivar"
   },
-  "MobileIDEView":{
-    "Preferences": "Preferencias",
-    "MyStuff": "Mis cosas",
-    "Examples": "Ejemplos",
-    "OriginalEditor": "Editor Original",
-    "Login": "Ingresa",
-    "Logout": "Cerrar sesión"
-  },
   "MobileDashboardView": {
     "Examples": "Ejemplos",
     "Sketches": "Bosquejos",
diff --git a/translations/locales/fr-CA/translations.json b/translations/locales/fr-CA/translations.json
index c0674490f0..15a19ede8a 100644
--- a/translations/locales/fr-CA/translations.json
+++ b/translations/locales/fr-CA/translations.json
@@ -283,6 +283,7 @@
       "errorEmptyPassword": "Veuillez saisir un mot de passe",
       "errorShortPassword": "Le mot de passe doit comporter au moins 6 caractères",
       "errorConfirmPassword": "Veuillez saisir une confirmation de mot de passe",
+      "errorNewPasswordRepeat":"Your New Password must differ from the current one.",
       "errorNewPassword": "Veuillez saisir un nouveau mot de passe ou laisser le mot de passe actuel vide.",
       "errorEmptyUsername": "Veuillez saisir un nom d'utilisateur.",
       "errorLongUsername": "Le nom d'utilisateur doit comporter moins de 20 caractères.",
@@ -554,10 +555,6 @@
       "35Seconds": "Il y a 35 secondes",
       "Ago": "Il y a {{timeAgo}}"
     },
-    "AddRemoveButton": {
-      "AltAddARIA": "Ajouter à la collection",
-      "AltRemoveARIA": "Supprimer de la collection"
-    },
     "CopyableInput": {
       "CopiedARIA": "Copié dans le presse-papiers!",
       "OpenViewTabARIA": "Ouvrir la fenêtre {{label}} dans un nouvel onglet"
@@ -592,14 +589,6 @@
       "On": "Activé",
       "Off": "Désactivé"
     },
-    "MobileIDEView":{
-      "Preferences": "Préférences",
-      "MyStuff": "Mes trucs",
-      "Examples": "Exemples",
-      "OriginalEditor": "Éditeur original",
-      "Login": "Se connecter",
-      "Logout": "Se déconnecter"
-    },
     "MobileDashboardView": {
       "Examples": "Exemples",
       "Sketches": "Croquis",
diff --git a/translations/locales/hi/translations.json b/translations/locales/hi/translations.json
index e13634efca..b05e296a6c 100644
--- a/translations/locales/hi/translations.json
+++ b/translations/locales/hi/translations.json
@@ -109,7 +109,6 @@
       "PrivacyPolicy": "गोपनीयता नीति",
       "TermsOfUse": "उपयोग की शर्तें",
       "CodeOfConduct": "आचार संहिता"
-      "WebEditor": "वेब एडिटर"
     },
     "Toast": {
       "OpenedNewSketch": "नया स्केच खोला",
@@ -295,7 +294,9 @@
       "errorNewPassword": "कृपया एक नया पासवर्ड दर्ज करें या वर्तमान पासवर्ड को खाली छोड़ दें।",
       "errorEmptyUsername": "कृपया यूजरनेम लिखें",
       "errorLongUsername": "यूजरनेम २० अक्षरों से कम होना चाहिए।",
-      "errorValidUsername": "यूजरनेम में केवल संख्या, अक्षर, पिरीअड्, डैश और अंडरस्कोर शामिल होना चाहिए।"
+      "errorValidUsername": "यूजरनेम में केवल संख्या, अक्षर, पिरीअड्, डैश और अंडरस्कोर शामिल होना चाहिए।",
+      "errorNewPasswordRepeat":"नया पासवर्ड वर्तमान पासवर्ड से भिन्न होना चाहिए।."
+
     },
     "NewPasswordView": {
       "Title": "p5.js वेब एडिटर | नया पासवर्ड",
@@ -564,10 +565,6 @@
       "35Seconds": "३५ सेकंड पहले",
       "Ago": "{{timeAgo}} पहले"
     },
-    "AddRemoveButton": {
-      "AltAddARIA": "संग्रह में जोड़ें",
-      "AltRemoveARIA": "संग्रह से हटाएं"
-    },
     "CopyableInput": {
       "CopiedARIA": "क्लिपबोर्ड पर कॉपी किया!",
       "OpenViewTabARIA": "{{label}} व्यू नए टैब में खोलें"
@@ -603,14 +600,6 @@
       "On": "ऑन",
       "Off": "औफ"
     },
-    "MobileIDEView":{
-      "Preferences": "प्राथमिकता",
-      "MyStuff": "मेरे वस्तु",
-      "Examples": "उदाहरण",
-      "OriginalEditor": "ओरिजिनल एडिटर",
-      "Login": "लॉग इन",
-      "Logout": "लॉग आउट"
-    },
     "MobileDashboardView": {
       "Examples": "उदाहरण",
       "Sketches": "स्केच",
diff --git a/translations/locales/it/translations.json b/translations/locales/it/translations.json
index 00f5c55dbc..b28f0f835e 100644
--- a/translations/locales/it/translations.json
+++ b/translations/locales/it/translations.json
@@ -284,6 +284,7 @@
     "errorShortPassword": "La password dev'essere di almeno 6 caratteri",
     "errorConfirmPassword": "Per favore inserisci la password di conferma",
     "errorNewPassword": "Per favore inserisci una nuova password o lascia la password corrente vuota.",
+    "errorNewPasswordRepeat":"Your New Password must differ from the current one.",
     "errorEmptyUsername": "Per favore inserisci un nome utente.",
     "errorLongUsername": "Il nome utente deve avere meno di 20 caratteri.",
     "errorValidUsername": "Il nome utente dev'essere composto solo da numeri, lettere, must only consist of numbers, letters, punti, trattini e trattini bassi."
@@ -554,10 +555,6 @@
     "35Seconds": "35 secondi fa",
     "Ago": "{{timeAgo}} fa"
   },
-  "AddRemoveButton": {
-    "AltAddARIA": "Aggiungi alla collezione",
-    "AltRemoveARIA": "Remove from collezione"
-  },
   "CopyableInput": {
     "CopiedARIA": "Copiato negli appunti!",
     "OpenViewTabARIA": "Apri {{label}} vista in nuova pagina"
@@ -592,14 +589,6 @@
     "On": "On",
     "Off": "Off"
   },
-  "MobileIDEView":{
-    "Preferences": "Preferenze",
-    "MyStuff": "Le mie cose",
-    "Examples": "Esempi",
-    "OriginalEditor": "Editor originale",
-    "Login": "Accedi",
-    "Logout": "Disconnetti"
-  },
   "MobileDashboardView": {
     "Examples": "Esempi",
     "Sketches": "Sketch",
diff --git a/translations/locales/ja/translations.json b/translations/locales/ja/translations.json
index f43b64f009..ba073a78f0 100644
--- a/translations/locales/ja/translations.json
+++ b/translations/locales/ja/translations.json
@@ -281,6 +281,7 @@
       "errorShortPassword": "パスワードは6文字以上にしてください",
       "errorConfirmPassword": "確認用のパスワードを入力してください",
       "errorNewPassword": "新しいパスワードを入力するか、現在のパスワードを空欄のままにしてください。",
+      "errorNewPasswordRepeat":"Your New Password must differ from the current one.",
       "errorEmptyUsername": "ユーザー名を入力してください。",
       "errorLongUsername": "ユーザー名は20文字以内にしてください。",
       "errorValidUsername": "ユーザー名は、英数字、ピリオド(.)、ダッシュ(-)、アンダースコア(_)のみで構成されている必要があります。"
@@ -358,7 +359,8 @@
       "Description": "ユーザー登録",
       "Or": "もしくは",
       "AlreadyHave": "既にアカウントをお持ちですか？",
-      "Login": "ログイン"
+      "Login": "ログイン",
+      "Warning": "アカウント作成をすると、p5.js エディターの <0>利用規約</0> と <1>プライバシー ポリシー</1> に同意したことになります。"
     },
     "EmailVerificationView": {
       "Title": "p5.js ウェブエディター | メールアドレス認証",
@@ -551,10 +553,6 @@
       "35Seconds": "35秒前",
       "Ago": "{{timeAgo}}前"
     },
-    "AddRemoveButton": {
-      "AltAddARIA": "コレクションへ追加",
-      "AltRemoveARIA": "コレクションから削除"
-    },
     "CopyableInput": {
       "CopiedARIA": "クリップボードへコピーしました！",
       "OpenViewTabARIA": "新しいタブで {{label}} ビューを開く"
@@ -589,14 +587,6 @@
       "On": "オン",
       "Off": "オフ"
     },
-    "MobileIDEView":{
-      "Preferences": "設定",
-      "MyStuff": "マイスタッフ",
-      "Examples": "サンプル",
-      "OriginalEditor": "オリジナルエディター",
-      "Login": "ログイン",
-      "Logout": "ログアウト"
-    },
     "MobileDashboardView": {
       "Examples": "サンプル",
       "Sketches": "スケッチ",
diff --git a/translations/locales/ko/translations.json b/translations/locales/ko/translations.json
index 10b08db43e..1f805f20bc 100644
--- a/translations/locales/ko/translations.json
+++ b/translations/locales/ko/translations.json
@@ -269,6 +269,7 @@
     "errorShortPassword": "Password must be at least 6 characters",
     "errorConfirmPassword": "Please confirm your password",
     "errorNewPassword": "Please enter a new password or leave the current password empty.",
+    "errorNewPasswordRepeat":"Your New Password must differ from the current one.",
     "errorEmptyUsername": "Please enter a username.",
     "errorLongUsername": "Username must be less than 20 characters.",
     "errorValidUsername": "Username must only consist of numbers, letters, periods, dashes, and underscores."
@@ -539,10 +540,6 @@
     "35Seconds": "35 seconds ago",
     "Ago": "{{timeAgo}} ago"
   },
-  "AddRemoveButton": {
-    "AltAddARIA": "Add to collection",
-    "AltRemoveARIA": "Remove from collection"
-  },
   "CopyableInput": {
     "CopiedARIA": "Copied to Clipboard!",
     "OpenViewTabARIA": "Open {{label}} view in new tab"
@@ -577,14 +574,6 @@
     "On": "On",
     "Off": "Off"
   },
-  "MobileIDEView":{
-    "Preferences": "Preferences",
-    "MyStuff": "My Stuff",
-    "Examples": "Examples",
-    "OriginalEditor": "Original Editor",
-    "Login": "Login",
-    "Logout": "Logout"
-  },
   "MobileDashboardView": {
     "Examples": "Examples",
     "Sketches": "Sketches",
diff --git a/translations/locales/pt-BR/translations.json b/translations/locales/pt-BR/translations.json
index 44c0f5053a..f11255f269 100644
--- a/translations/locales/pt-BR/translations.json
+++ b/translations/locales/pt-BR/translations.json
@@ -281,6 +281,7 @@
     "errorShortPassword": "Senha deve ter no mínimo 6 caracteres",
     "errorConfirmPassword": "Por favor coloque a senha de confirmação",
     "errorNewPassword": "Por favor, adicione uma senha nova ou deixe a atual em branco.",
+    "errorNewPasswordRepeat":"Your New Password must differ from the current one.",
     "errorEmptyUsername": "Por favor coloque um nome de usuário",
     "errorLongUsername": "Nome de usuário deve ter menos de 20 caracteres.",
     "errorValidUsername": "Nome de usuário pode apenas consistir de números, letras, pontos, Hífens e linha sublinhada."
@@ -551,10 +552,6 @@
     "35Seconds": "35 segundos atrás",
     "Ago": "{{timeAgo}} atrás"
   },
-  "AddRemoveButton": {
-    "AltAddARIA": "Adicionar à coleção",
-    "AltRemoveARIA": "Remover da coleção"
-  },
   "CopyableInput": {
     "CopiedARIA": "Copiado para a Área de Transferência!",
     "OpenViewTabARIA": "Abrir a vista {{label}} em nova aba"
@@ -589,14 +586,6 @@
     "On": "Ligado",
     "Off": "Desligado"
   },
-  "MobileIDEView":{
-    "Preferences": "Preferências",
-    "MyStuff": "Minhas Coisas",
-    "Examples": "Exemplos",
-    "OriginalEditor": "Editor Original",
-    "Login": "Entrar",
-    "Logout": "Sair"
-  },
   "MobileDashboardView": {
     "Examples": "Exemplos",
     "Sketches": "Esboços",
diff --git a/translations/locales/sv/translations.json b/translations/locales/sv/translations.json
index a68b9aa7bf..8fa743507a 100644
--- a/translations/locales/sv/translations.json
+++ b/translations/locales/sv/translations.json
@@ -281,6 +281,7 @@
     "errorShortPassword": "Lösenordet måste vara minst 6 tecken",
     "errorConfirmPassword": "Ange en lösenordsbekräftelse",
     "errorNewPassword": "Ange ett nytt lösenord eller lämna det nuvarande lösenordet tomt.",
+    "errorNewPasswordRepeat":"Your New Password must differ from the current one.",
     "errorEmptyUsername": "Ange ett användarnamn.",
     "errorLongUsername": "Användarnamnet får innehålla högst 19 tecken.",
     "errorValidUsername": "Användarnamnet får bara innehålla siffror, bokstäver, punkter, bindestreck och understreck."
@@ -551,10 +552,6 @@
     "35Seconds": "för 35 sekunder sen",
     "Ago": "{{timeAgo}} sen"
   },
-  "AddRemoveButton": {
-    "AltAddARIA": "Lägg till i samling",
-    "AltRemoveARIA": "Ta bort från samling"
-  },
   "CopyableInput": {
     "CopiedARIA": "Kopierat till urklipp!",
     "OpenViewTabARIA": "Öppna {{label}}-vy i ny flik"
@@ -589,14 +586,6 @@
     "On": "På",
     "Off": "Av"
   },
-  "MobileIDEView":{
-    "Preferences": "Preferenser",
-    "MyStuff": "Mina saker",
-    "Examples": "Exempel",
-    "OriginalEditor": "Originaleditor",
-    "Login": "Logga in",
-    "Logout": "Logga ut"
-  },
   "MobileDashboardView": {
     "Examples": "Exempel",
     "Sketches": "Sketcher",
diff --git a/translations/locales/tr/translations.json b/translations/locales/tr/translations.json
index 96183a0698..290f0c2473 100644
--- a/translations/locales/tr/translations.json
+++ b/translations/locales/tr/translations.json
@@ -284,6 +284,7 @@
     "errorShortPassword": "Şifre en az 6 karakter olmalıdır",
     "errorConfirmPassword": "Lütfen şifrenizi doğrulayın",
     "errorNewPassword": "Lütfen yeni bir şifre girin veya mevcut şifreyi boş bırakın.",
+    "errorNewPasswordRepeat":"Your New Password must differ from the current one.",
     "errorEmptyUsername": "Lütfen bir kullanıcı adı girin.",
     "errorLongUsername": "Kullanıcı adı 20 karakterden az olmalıdır.",
     "errorValidUsername": "Kullanıcı adı sadece sayılar, harfler, noktalar, tireler ve alt çizgilerden oluşmalıdır."
@@ -555,10 +556,6 @@
     "35Seconds": "35 saniye önce",
     "Ago": "{{timeAgo}} önce"
   },
-  "AddRemoveButton": {
-    "AltAddARIA": "Koleksiyona ekle",
-    "AltRemoveARIA": "Koleksiyondan çıkar"
-  },
   "CopyableInput": {
     "CopiedARIA": "Panoya kopyalandı!",
     "OpenViewTabARIA": "Yeni sekmede {{label}} görünümünü aç"
@@ -593,14 +590,6 @@
     "On": "Açık",
     "Off": "Kapalı"
   },
-  "MobileIDEView": {
-    "Preferences": "Tercihler",
-    "MyStuff": "Benim Şeylerim",
-    "Examples": "Örnekler",
-    "OriginalEditor": "Orijinal Editör",
-    "Login": "Giriş Yap",
-    "Logout": "Çıkış Yap"
-  },
   "MobileDashboardView": {
     "Examples": "Örnekler",
     "Sketches": "Eskizler",
diff --git a/translations/locales/uk-UA/translations.json b/translations/locales/uk-UA/translations.json
index 834c6867b4..8c79ff28e6 100644
--- a/translations/locales/uk-UA/translations.json
+++ b/translations/locales/uk-UA/translations.json
@@ -283,6 +283,7 @@
     "errorShortPassword": "Пароль повинен містити щонайменше 6 символів",
     "errorConfirmPassword": "Введіть підтвердження пароля",
     "errorNewPassword": "Введіть новий пароль або залиште поточний пароль порожнім.",
+    "errorNewPasswordRepeat":"Your New Password must differ from the current one.",
     "errorEmptyUsername": "Введіть ім'я користувача.",
     "errorLongUsername": "Ім'я користувача має містити менше 20 символів.",
     "errorValidUsername": "Ім'я користувача має складатися лише з цифр, літер, крапок, тире та символа підкреслення."
@@ -553,10 +554,6 @@
     "35Seconds": "35 секунд тому",
     "Ago": "{{timeAgo}} тому"
   },
-  "AddRemoveButton": {
-    "AltAddARIA": "Додати в колекцію",
-    "AltRemoveARIA": "Видалити з колекції"
-  },
   "CopyableInput": {
     "CopiedARIA": "Скопійовано в буфер обміну!",
     "OpenViewTabARIA": "Переглянути {{label}} у новій вкладці"
@@ -591,14 +588,6 @@
     "On": "Так",
     "Off": "Ні"
   },
-  "MobileIDEView":{
-    "Preferences": "Налаштування",
-    "MyStuff": "Мої матеріали",
-    "Examples": "Приклади",
-    "OriginalEditor": "Редактор",
-    "Login": "Увійти",
-    "Logout": "Вийти"
-  },
   "MobileDashboardView": {
     "Examples": "Приклади",
     "Sketches": "Скетчі",
diff --git a/translations/locales/ur/translations.json b/translations/locales/ur/translations.json
index 289cc9fc29..87cdd17e59 100644
--- a/translations/locales/ur/translations.json
+++ b/translations/locales/ur/translations.json
@@ -282,6 +282,7 @@
       "errorShortPassword": "پاس ورڈ کم از کم 6 حروف کا ہونا چاہیے۔",
       "errorConfirmPassword": "براہ کرم اپنے پاس ورڈ کی تصدیق کریں۔",
       "errorNewPassword": "براہ کرم نیا پاس ورڈ درج کریں یا موجودہ پاس ورڈ کو خالی چھوڑ دیں۔",
+      "errorNewPasswordRepeat":"Your New Password must differ from the current one.",
       "errorEmptyUsername": "براہ کرم ایک صارف نام درج کریں۔",
       "errorLongUsername": "صارف کا نام 20 حروف سے کم ہونا چاہیے۔",
       "errorValidUsername": "صارف کا نام صرف نمبرز، حروف، پیریڈز، ڈیشز اور انڈر سکور پر مشتمل ہونا چاہیے۔"
@@ -552,10 +553,6 @@
       "35Seconds": "35 سیکنڈ پہلے",
       "Ago": "{{timeAgo}} پہلے"
     },
-    "AddRemoveButton": {
-      "AltAddARIA": "مجموعہ میں شامل کریں۔",
-      "AltRemoveARIA": "مجموعہ سے ہٹا دیں۔"
-    },
     "CopyableInput": {
       "CopiedARIA": "کلپ بورڈ پر کاپی ہو گیا!",
       "OpenViewTabARIA": "کھولیں۔ {{label}} نئے ٹیب میں دیکھیں"
@@ -591,14 +588,6 @@
       "On": "پر",
       "Off": "بند"
     },
-    "MobileIDEView": {
-      "Preferences": "ترجیحات",
-      "MyStuff": "میرا سامان",
-      "Examples": "مثالیں",
-      "OriginalEditor": "اصل ایڈیٹر",
-      "Login": "لاگ ان کریں",
-      "Logout": "لاگ آوٹ"
-    },
     "MobileDashboardView": {
       "Examples": "مثالیں",
       "Sketches": "خاکے",
diff --git a/translations/locales/zh-CN/translations.json b/translations/locales/zh-CN/translations.json
index 2e4ef51eab..1e3ef7e4c4 100644
--- a/translations/locales/zh-CN/translations.json
+++ b/translations/locales/zh-CN/translations.json
@@ -284,6 +284,7 @@
     "errorShortPassword": "密码至少六位",
     "errorConfirmPassword": "请再次输入密码以确认",
     "errorNewPassword": "请输入一个新密码或保持当前密码为空",
+    "errorNewPasswordRepeat":"Your New Password must differ from the current one.",
     "errorEmptyUsername": "请输入一个用户名",
     "errorLongUsername": "用户名至多20位",
     "errorValidUsername": "用户名只能含有数字，字母，和某些标点符号（. - _）。"
@@ -554,10 +555,6 @@
     "35Seconds": "35秒 以前",
     "Ago": "{{timeAgo}} 以前"
   },
-  "AddRemoveButton": {
-    "AltAddARIA": "添加到集合",
-    "AltRemoveARIA": "从集合中移除"
-  },
   "CopyableInput": {
     "CopiedARIA": "已复制到剪贴板！",
     "OpenViewTabARIA": "在新标签页中打开 {{label}} 视图"
@@ -593,14 +590,6 @@
     "On": "打开",
     "Off": "关闭"
   },
-  "MobileIDEView":{
-    "Preferences": "设置",
-    "MyStuff": "我的",
-    "Examples": "范例",
-    "OriginalEditor": "原编辑器",
-    "Login": "登陆",
-    "Logout": "登出"
-  },
   "MobileDashboardView": {
     "Examples": "范例",
     "Sketches": "项目",
diff --git a/translations/locales/zh-TW/translations.json b/translations/locales/zh-TW/translations.json
index 14688d41c0..94e9570019 100644
--- a/translations/locales/zh-TW/translations.json
+++ b/translations/locales/zh-TW/translations.json
@@ -284,6 +284,7 @@
     "errorShortPassword": "密碼至少要有 6 個字元",
     "errorConfirmPassword": "請再輸入一次密碼確認正確性",
     "errorNewPassword": "請輸入新密碼或讓目前密碼欄位留空",
+    "errorNewPasswordRepeat":"Your New Password must differ from the current one.",
     "errorEmptyUsername": "請輸入使用者名稱",
     "errorLongUsername": "使用者名稱最多只能 20 個字元",
     "errorValidUsername": "使用者名稱只能有數字、字母、英文句點、減號以及底線符號"
@@ -554,10 +555,6 @@
     "35Seconds": "35 秒前",
     "Ago": "{{timeAgo}} 前"
   },
-  "AddRemoveButton": {
-    "AltAddARIA": "加入作品集",
-    "AltRemoveARIA": "從作品集中移除"
-  },
   "CopyableInput": {
     "CopiedARIA": "複製到剪貼簿",
     "OpenViewTabARIA": "在新分頁中檢視 {{label}}"
@@ -593,14 +590,6 @@
     "On": "啟用",
     "Off": "停用"
   },
-  "MobileIDEView":{
-    "Preferences": "偏好設定",
-    "MyStuff": "我的資料",
-    "Examples": "範例",
-    "OriginalEditor": "原始的編輯器",
-    "Login": "登入",
-    "Logout": "登出"
-  },
   "MobileDashboardView": {
     "Examples": "範例",
     "Sketches": "草稿",