diff --git a/client/modules/IDE/components/ProjectName.jsx b/client/modules/IDE/components/ProjectName.jsx
new file mode 100644
index 0000000000..542fdbdc6e
--- /dev/null
+++ b/client/modules/IDE/components/ProjectName.jsx
@@ -0,0 +1,166 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+import { Link } from 'react-router';
+
+import { prop, remSize } from '../../../theme';
+
+import EditProjectNameIcon from '../../../images/pencil.svg';
+
+const Container = styled.div`
+  margin-left: ${remSize(10)};
+  padding-left: ${remSize(10)};
+  height: 70%;
+  display: flex;
+  align-items: center;
+  border-color: ${prop('inactiveTextColor')};
+`;
+
+const EditNameButton = styled(EditProjectNameIcon)`
+  display: inline-block;
+  vertical-align: top;
+  width: ${remSize(18)};
+  height: ${remSize(18)};
+  & path {
+    fill: ${prop('secondaryTextColor')};
+  }
+`;
+
+const Name = styled.button`
+  &&& {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    color: ${prop('secondaryTextColor')};
+    &:hover {
+      color: ${prop('logoColor')};
+      & ${EditNameButton} path {
+        fill: ${prop('logoColor')};
+      }
+    }
+
+    ${({ isEditingName }) => isEditingName && `display: none;`}
+  }
+`;
+
+const Input = styled.input`
+  display: none;
+  border: 0px;
+  ${({ isEditingName }) => isEditingName && `display: block;`}
+`;
+
+const Owner = styled.p`
+  margin-left: ${remSize(5)};
+  color: ${prop('secondaryTextColor')};
+`;
+
+const ProjectName = (props) => {
+  const {
+    owner,
+    currentUser,
+    project,
+    showEditProjectName,
+    setProjectName,
+    hideEditProjectName,
+    saveProject
+  } = props;
+
+  const { t } = useTranslation();
+
+  const [projectNameInputValue, setProjectNameInputValue] = useState(
+    project.name
+  );
+
+  const projectNameInputRef = useRef(null);
+
+  const canEditProjectName =
+    (owner && owner.username && owner.username === currentUser) ||
+    !owner ||
+    !owner.username;
+
+  const handleProjectNameChange = (event) => {
+    setProjectNameInputValue(event.target.value);
+  };
+
+  const handleProjectNameSave = () => {
+    const newProjectName = projectNameInputValue.trim();
+    if (newProjectName.length === 0) {
+      setProjectNameInputValue(project.name);
+    } else {
+      setProjectName(newProjectName);
+      hideEditProjectName();
+      if (project.id) {
+        saveProject();
+      }
+    }
+  };
+
+  const handleKeyPress = (event) => {
+    if (event.key === 'Enter') {
+      hideEditProjectName();
+      projectNameInputRef.current.blur();
+    }
+  };
+
+  return (
+    <Container>
+      <Name
+        onClick={() => {
+          if (canEditProjectName) {
+            showEditProjectName();
+            setTimeout(() => projectNameInputRef.current.focus(), 0);
+          }
+        }}
+        disabled={!canEditProjectName}
+        aria-label={t('Toolbar.EditSketchARIA')}
+        isEditingName={project.isEditingName}
+      >
+        <span>{project.name}</span>
+        {canEditProjectName && (
+          <EditNameButton focusable="false" aria-hidden="true" />
+        )}
+      </Name>
+      <Input
+        type="text"
+        maxLength="128"
+        aria-label={t('Toolbar.NewSketchNameARIA')}
+        value={projectNameInputValue}
+        onChange={handleProjectNameChange}
+        ref={projectNameInputRef}
+        onBlur={handleProjectNameSave}
+        onKeyPress={handleKeyPress}
+        isEditingName={project.isEditingName}
+      />
+      {owner && (
+        <Owner>
+          {t('Toolbar.By')}
+          <Link to={`/${owner.username}/sketches`}>{owner.username}</Link>
+        </Owner>
+      )}
+    </Container>
+  );
+};
+
+ProjectName.propTypes = {
+  setProjectName: PropTypes.func.isRequired,
+  currentUser: PropTypes.string,
+  owner: PropTypes.shape({
+    username: PropTypes.string
+  }),
+  project: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    isEditingName: PropTypes.bool,
+    id: PropTypes.string
+  }).isRequired,
+  showEditProjectName: PropTypes.func.isRequired,
+  hideEditProjectName: PropTypes.func.isRequired,
+  saveProject: PropTypes.func.isRequired
+};
+
+ProjectName.defaultProps = {
+  owner: undefined,
+  currentUser: undefined
+};
+
+export default ProjectName;
diff --git a/client/modules/IDE/components/Toolbar.jsx b/client/modules/IDE/components/Toolbar.jsx
index f87d80bf34..768fe1d840 100644
--- a/client/modules/IDE/components/Toolbar.jsx
+++ b/client/modules/IDE/components/Toolbar.jsx
@@ -1,188 +1,94 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
-import { Link } from 'react-router';
 import classNames from 'classnames';
 import { withTranslation } from 'react-i18next';
 import * as IDEActions from '../actions/ide';
 import * as preferenceActions from '../actions/preferences';
 import * as projectActions from '../actions/project';
 
+import ProjectName from '../components/ProjectName';
+
 import PlayIcon from '../../../images/play.svg';
 import StopIcon from '../../../images/stop.svg';
 import PreferencesIcon from '../../../images/preferences.svg';
-import EditProjectNameIcon from '../../../images/pencil.svg';
-
-class Toolbar extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleKeyPress = this.handleKeyPress.bind(this);
-    this.handleProjectNameChange = this.handleProjectNameChange.bind(this);
-    this.handleProjectNameSave = this.handleProjectNameSave.bind(this);
-
-    this.state = {
-      projectNameInputValue: props.project.name
-    };
-  }
-
-  handleKeyPress(event) {
-    if (event.key === 'Enter') {
-      this.props.hideEditProjectName();
-      this.projectNameInput.blur();
-    }
-  }
-
-  handleProjectNameChange(event) {
-    this.setState({ projectNameInputValue: event.target.value });
-  }
 
-  handleProjectNameSave() {
-    const newProjectName = this.state.projectNameInputValue.trim();
-    if (newProjectName.length === 0) {
-      this.setState({
-        projectNameInputValue: this.props.project.name
-      });
-    } else {
-      this.props.setProjectName(newProjectName);
-      this.props.hideEditProjectName();
-      if (this.props.project.id) {
-        this.props.saveProject();
-      }
-    }
-  }
+const Toolbar = (props) => {
+  const playButtonClass = classNames({
+    'toolbar__play-button': true,
+    'toolbar__play-button--selected': props.isPlaying
+  });
+  const stopButtonClass = classNames({
+    'toolbar__stop-button': true,
+    'toolbar__stop-button--selected': !props.isPlaying
+  });
+  const preferencesButtonClass = classNames({
+    'toolbar__preferences-button': true,
+    'toolbar__preferences-button--selected': props.preferencesIsVisible
+  });
 
-  canEditProjectName() {
-    return (
-      (this.props.owner &&
-        this.props.owner.username &&
-        this.props.owner.username === this.props.currentUser) ||
-      !this.props.owner ||
-      !this.props.owner.username
-    );
-  }
-
-  render() {
-    const playButtonClass = classNames({
-      'toolbar__play-button': true,
-      'toolbar__play-button--selected': this.props.isPlaying
-    });
-    const stopButtonClass = classNames({
-      'toolbar__stop-button': true,
-      'toolbar__stop-button--selected': !this.props.isPlaying
-    });
-    const preferencesButtonClass = classNames({
-      'toolbar__preferences-button': true,
-      'toolbar__preferences-button--selected': this.props.preferencesIsVisible
-    });
-    const nameContainerClass = classNames({
-      'toolbar__project-name-container': true,
-      'toolbar__project-name-container--editing': this.props.project
-        .isEditingName
-    });
-
-    const canEditProjectName = this.canEditProjectName();
-
-    return (
-      <div className="toolbar">
-        <button
-          className="toolbar__play-sketch-button"
-          onClick={() => {
-            this.props.startAccessibleSketch();
-            this.props.setTextOutput(true);
-            this.props.setGridOutput(true);
+  return (
+    <div className="toolbar">
+      <button
+        className="toolbar__play-sketch-button"
+        onClick={() => {
+          props.startAccessibleSketch();
+          props.setTextOutput(true);
+          props.setGridOutput(true);
+        }}
+        aria-label={props.t('Toolbar.PlaySketchARIA')}
+        disabled={props.infiniteLoop}
+      >
+        <PlayIcon focusable="false" aria-hidden="true" />
+      </button>
+      <button
+        className={playButtonClass}
+        onClick={props.startSketch}
+        aria-label={props.t('Toolbar.PlayOnlyVisualSketchARIA')}
+        disabled={props.infiniteLoop}
+      >
+        <PlayIcon focusable="false" aria-hidden="true" />
+      </button>
+      <button
+        className={stopButtonClass}
+        onClick={props.stopSketch}
+        aria-label={props.t('Toolbar.StopSketchARIA')}
+      >
+        <StopIcon focusable="false" aria-hidden="true" />
+      </button>
+      <div className="toolbar__autorefresh">
+        <input
+          id="autorefresh"
+          className="checkbox__autorefresh"
+          type="checkbox"
+          checked={props.autorefresh}
+          onChange={(event) => {
+            props.setAutorefresh(event.target.checked);
           }}
-          aria-label={this.props.t('Toolbar.PlaySketchARIA')}
-          disabled={this.props.infiniteLoop}
-        >
-          <PlayIcon focusable="false" aria-hidden="true" />
-        </button>
-        <button
-          className={playButtonClass}
-          onClick={this.props.startSketch}
-          aria-label={this.props.t('Toolbar.PlayOnlyVisualSketchARIA')}
-          disabled={this.props.infiniteLoop}
-        >
-          <PlayIcon focusable="false" aria-hidden="true" />
-        </button>
-        <button
-          className={stopButtonClass}
-          onClick={this.props.stopSketch}
-          aria-label={this.props.t('Toolbar.StopSketchARIA')}
-        >
-          <StopIcon focusable="false" aria-hidden="true" />
-        </button>
-        <div className="toolbar__autorefresh">
-          <input
-            id="autorefresh"
-            className="checkbox__autorefresh"
-            type="checkbox"
-            checked={this.props.autorefresh}
-            onChange={(event) => {
-              this.props.setAutorefresh(event.target.checked);
-            }}
-          />
-          <label htmlFor="autorefresh" className="toolbar__autorefresh-label">
-            {this.props.t('Toolbar.Auto-refresh')}
-          </label>
-        </div>
-        <div className={nameContainerClass}>
-          <button
-            className="toolbar__project-name"
-            onClick={() => {
-              if (canEditProjectName) {
-                this.props.showEditProjectName();
-                setTimeout(() => this.projectNameInput.focus(), 0);
-              }
-            }}
-            disabled={!canEditProjectName}
-            aria-label={this.props.t('Toolbar.EditSketchARIA')}
-          >
-            <span>{this.props.project.name}</span>
-            {canEditProjectName && (
-              <EditProjectNameIcon
-                className="toolbar__edit-name-button"
-                focusable="false"
-                aria-hidden="true"
-              />
-            )}
-          </button>
-          <input
-            type="text"
-            maxLength="128"
-            className="toolbar__project-name-input"
-            aria-label={this.props.t('Toolbar.NewSketchNameARIA')}
-            value={this.state.projectNameInputValue}
-            onChange={this.handleProjectNameChange}
-            ref={(element) => {
-              this.projectNameInput = element;
-            }}
-            onBlur={this.handleProjectNameSave}
-            onKeyPress={this.handleKeyPress}
-          />
-          {(() => { // eslint-disable-line
-            if (this.props.owner) {
-              return (
-                <p className="toolbar__project-owner">
-                  {this.props.t('Toolbar.By')}{' '}
-                  <Link to={`/${this.props.owner.username}/sketches`}>
-                    {this.props.owner.username}
-                  </Link>
-                </p>
-              );
-            }
-          })()}
-        </div>
-        <button
-          className={preferencesButtonClass}
-          onClick={this.props.openPreferences}
-          aria-label={this.props.t('Toolbar.OpenPreferencesARIA')}
-        >
-          <PreferencesIcon focusable="false" aria-hidden="true" />
-        </button>
+        />
+        <label htmlFor="autorefresh" className="toolbar__autorefresh-label">
+          {props.t('Toolbar.Auto-refresh')}
+        </label>
       </div>
-    );
-  }
-}
+      <ProjectName
+        owner={props.owner}
+        currentUser={props.currentUser}
+        project={props.project}
+        showEditProjectName={props.showEditProjectName}
+        setProjectName={props.setProjectName}
+        hideEditProjectName={props.hideEditProjectName}
+        saveProject={props.saveProject}
+      />
+      <button
+        className={preferencesButtonClass}
+        onClick={props.openPreferences}
+        aria-label={props.t('Toolbar.OpenPreferencesARIA')}
+      >
+        <PreferencesIcon focusable="false" aria-hidden="true" />
+      </button>
+    </div>
+  );
+};
 
 Toolbar.propTypes = {
   isPlaying: PropTypes.bool.isRequired,
diff --git a/client/modules/IDE/components/Toolbar.test.jsx b/client/modules/IDE/components/Toolbar.test.jsx
index 0d13d633af..e5f74fd64a 100644
--- a/client/modules/IDE/components/Toolbar.test.jsx
+++ b/client/modules/IDE/components/Toolbar.test.jsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import lodash from 'lodash';
+import { Provider } from 'react-redux';
 
+import configureStore from '../../../store';
+import ThemeProvider from '../../App/components/ThemeProvider';
 import { fireEvent, render, screen, waitFor } from '../../../test-utils';
 import { ToolbarComponent } from './Toolbar';
 
@@ -38,8 +41,17 @@ const renderComponent = (extraProps = {}) => {
     extraProps
   );
 
-  render(<ToolbarComponent {...props} />);
+  const initialState = window.__INITIAL_STATE__;
 
+  const store = configureStore(initialState);
+
+  render(
+    <Provider store={store}>
+      <ThemeProvider>
+        <ToolbarComponent {...props} />
+      </ThemeProvider>
+    </Provider>
+  );
   return props;
 };
 
diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
index 219a85d716..4287aa08f6 100644
--- a/client/styles/components/_toolbar.scss
+++ b/client/styles/components/_toolbar.scss
@@ -97,50 +97,6 @@
 	}
 }
 
-.toolbar__project-name-container {
-	@include themify() {
-		border-color: getThemifyVariable('inactive-text-color');
-	}
-	margin-left: #{10 / $base-font-size}rem;
-	padding-left: #{10 / $base-font-size}rem;
-  display: flex;
-  align-items: center;
-}
-
-.toolbar__project-name {
-	@include themify() {
-		color: getThemifyVariable('secondary-text-color');
-		&:hover {
-		color: getThemifyVariable('logo-color');
-		  & .toolbar__edit-name-button path {
-		  	fill: getThemifyVariable('logo-color');
-		  }
-		}
-	}
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-
-	.toolbar__project-name-container--editing & {
-		display: none;
-	}
-}
-
-.toolbar__project-name-input {
-	display: none;
-	border: 0px;
-	.toolbar__project-name-container--editing & {
-		display: block;
-	}
-}
-
-.toolbar__project-owner {
-	margin-left: #{5 / $base-font-size}rem;
-	@include themify() {
-		color: getThemifyVariable('secondary-text-color');
-	}
-}
-
 .toolbar__autorefresh-label {
 	@include themify() {
 		color: getThemifyVariable('secondary-text-color');
@@ -157,15 +113,3 @@
 .checkbox__autorefresh{
 	cursor: pointer;
 }
-
-.toolbar__edit-name-button {
-	display: inline-block;
-	vertical-align: top;
-	width: #{18 / $base-font-size}rem;
-	height: #{18 / $base-font-size}rem;
-	@include themify() {
-		& path {
-			fill: getThemifyVariable('secondary-text-color');
-		}
-	}
-}
diff --git a/client/theme.js b/client/theme.js
index f22f13adb4..efbc721ed6 100644
--- a/client/theme.js
+++ b/client/theme.js
@@ -62,7 +62,10 @@ export default {
   [Theme.light]: {
     colors,
     ...common,
+    logoColor: colors.p5jsPink,
     primaryTextColor: grays.dark,
+    secondaryTextColor: grays.mediumDark,
+    inactiveTextColor: grays.middleDark,
     backgroundColor: grays.lighter,
 
     Button: {
@@ -115,7 +118,10 @@ export default {
   [Theme.dark]: {
     colors,
     ...common,
+    logoColor: colors.p5jsPink,
     primaryTextColor: grays.lightest,
+    secondaryTextColor: grays.mediumLight,
+    inactiveTextColor: grays.middleLight,
     backgroundColor: grays.darker,
 
     Button: {
@@ -168,7 +174,10 @@ export default {
   [Theme.contrast]: {
     colors,
     ...common,
+    logoColor: colors.yellow,
     primaryTextColor: grays.lightest,
+    secondaryTextColor: grays.lighter,
+    inactiveTextColor: grays.light,
     backgroundColor: grays.darker,
 
     Button: {