diff --git a/src/actions/__test__/code.test.js b/src/actions/__test__/code.test.js
index 354824e2..dfe173fd 100644
--- a/src/actions/__test__/code.test.js
+++ b/src/actions/__test__/code.test.js
@@ -38,12 +38,28 @@ describe('Code actions', () => {
     expect(payload).toEqual(EXECUTION_RUN);
   });
 
-  test('changeName', () => {
-    const action = changeName('test name');
-    const { type, payload } = action;
+  test('changeName', async () => {
+    const mock = new MockAdapter(axios);
+    const program = {
+      id: 1,
+      name: 'test name',
+      content: '<xml></xml>',
+      user: 1,
+    };
+    const name = {
+      name: 'test name',
+    };
+
+    mock.onPatch('/api/v1/block-diagrams/1/', name).reply(200, program);
+
+    const action = changeName(1, 'test name');
+    const { type } = action;
+    const payload = await action.payload;
 
     expect(type).toEqual('CHANGE_NAME');
-    expect(payload).toEqual('test name');
+    expect(payload).toEqual(program);
+
+    mock.restore();
   });
 
   test('changeId', () => {
diff --git a/src/actions/code.js b/src/actions/code.js
index df3fea9f..4bc65d8e 100644
--- a/src/actions/code.js
+++ b/src/actions/code.js
@@ -17,6 +17,8 @@ export const UPDATE_JSCODE = 'UPDATE_JSCODE';
 export const UPDATE_XMLCODE = 'UPDATE_XMLCODE';
 export const CHANGE_EXECUTION_STATE = 'CHANGE_EXECUTION_STATE';
 export const CHANGE_NAME = 'CHANGE_NAME';
+export const CHANGE_NAME_FULFILLED = `${CHANGE_NAME}_FULFILLED`;
+export const CHANGE_NAME_REJECTED = `${CHANGE_NAME}_REJECTED`;
 export const CHANGE_ID = 'CHANGE_ID';
 
 // Execution States
@@ -41,9 +43,14 @@ export const changeExecutionState = state => ({
   payload: state,
 });
 
-export const changeName = name => ({
+export const changeName = (id, name, xhroptions) => ({
   type: CHANGE_NAME,
-  payload: name,
+  payload: axios.patch(`/api/v1/block-diagrams/${id}/`, {
+    name,
+  }, xhroptions)
+    .then(({ data }) => (
+      data
+    )),
 });
 
 export const changeId = id => ({
diff --git a/src/components/ProgramName.js b/src/components/ProgramName.js
new file mode 100644
index 00000000..ea3e80b9
--- /dev/null
+++ b/src/components/ProgramName.js
@@ -0,0 +1,107 @@
+import React, { Component, Fragment } from 'react';
+import { Confirm, Input } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import { hot } from 'react-hot-loader';
+import { withCookies } from 'react-cookie';
+import PropTypes from 'prop-types';
+
+import { changeName as actionChangeName } from '@/actions/code';
+
+const mapStateToProps = ({ code }) => ({ code });
+const mapDispatchToProps = (dispatch, { cookies }) => ({
+  changeName: (id, name) => {
+    const changeNameAction = actionChangeName(id, name, {
+      headers: {
+        Authorization: `JWT ${cookies.get('auth_jwt')}`,
+      },
+    });
+    return dispatch(changeNameAction);
+  },
+});
+
+class Console extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      confirmOpen: false,
+      editingName: null,
+      previousPropName: null, // eslint-disable-line react/no-unused-state
+    };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const { code } = props;
+    const { previousPropName } = state;
+
+    if (code.name !== previousPropName) {
+      return {
+        editingName: code.name,
+        previousPropName: code.name,
+      };
+    }
+
+    return null;
+  }
+
+  closeConfirm = () => this.setState({ confirmOpen: false })
+
+  openConfirm = () => this.setState({ confirmOpen: true })
+
+  handleChange = (e) => {
+    this.setState({
+      editingName: e.target.value,
+    });
+  }
+
+  handleSave = () => {
+    const { changeName, code } = this.props;
+    const { editingName } = this.state;
+
+    changeName(code.id, editingName);
+    this.closeConfirm();
+  }
+
+  render() {
+    const { confirmOpen, editingName, previousPropName } = this.state;
+    let actionProp = {};
+
+    // Only show `Save` when the name has changed
+    if (editingName !== previousPropName) {
+      actionProp = {
+        action: {
+          content: 'Save',
+          onClick: this.openConfirm,
+        },
+      };
+    }
+
+    return (
+      <Fragment>
+        <Input
+          type="text"
+          label="Name:"
+          defaultValue={editingName}
+          onChange={this.handleChange}
+          {...actionProp}
+        />
+        <Confirm
+          content="Are you sure that you want to change the name of this program?"
+          open={confirmOpen}
+          onCancel={this.closeConfirm}
+          onConfirm={this.handleSave}
+        />
+      </Fragment>
+    );
+  }
+}
+
+Console.propTypes = {
+  code: PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+  }).isRequired,
+  changeName: PropTypes.func.isRequired,
+};
+
+export default hot(module)(withCookies(connect(mapStateToProps, mapDispatchToProps)(Console)));
diff --git a/src/components/__tests__/ProgramName.test.js b/src/components/__tests__/ProgramName.test.js
new file mode 100644
index 00000000..1f130f4b
--- /dev/null
+++ b/src/components/__tests__/ProgramName.test.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import { Confirm, Input } from 'semantic-ui-react';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import configureStore from 'redux-mock-store';
+import { Cookies } from 'react-cookie';
+
+import { changeName } from '@/actions/code';
+import ProgramName from '../ProgramName';
+
+const cookiesValues = { auth_jwt: '1234' };
+const cookies = new Cookies(cookiesValues);
+
+describe('The Console component', () => {
+  const mockStore = configureStore();
+  const context = { cookies };
+  let store;
+
+  beforeEach(() => {
+    store = mockStore({
+      code: {
+        name: 'test name',
+      },
+    });
+    store.dispatch = jest.fn();
+  });
+
+  test('renders on the page with no errors', () => {
+    const wrapper = mount(<ProgramName store={store} />, { context });
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  test('displays name', () => {
+    const wrapper = shallow(<ProgramName store={store} />, { context }).dive().dive();
+
+    expect(wrapper.find(Confirm).prop('open')).toBe(false);
+    expect(wrapper.find(Input).length).toBe(1);
+    expect(wrapper.find(Input).props().defaultValue).toBe('test name');
+  });
+
+  test('handles change', () => {
+    const wrapper = shallow(<ProgramName store={store} />, { context }).dive().dive();
+
+    wrapper.find(Input).simulate('change', { target: { value: 'new name' } });
+    wrapper.update();
+
+    expect(wrapper.find(Confirm).prop('open')).toBe(false);
+    expect(wrapper.find(Input).props().defaultValue).toBe('new name');
+    expect(wrapper.find(Input).props().action).toBeDefined();
+  });
+
+  test('handles save cancel', () => {
+    const wrapper = shallow(<ProgramName store={store} />, { context }).dive().dive();
+
+    wrapper.find(Input).simulate('change', { target: { value: 'new name' } });
+    wrapper.update();
+
+    // User opens save confirmation modal
+    wrapper.find(Input).props().action.onClick();
+    wrapper.update();
+
+    expect(wrapper.find(Confirm).prop('open')).toBe(true);
+
+    // User clicks 'cancel'
+    wrapper.find(Confirm).prop('onCancel')();
+    wrapper.update();
+
+    expect(wrapper.find(Confirm).prop('open')).toBe(false);
+    expect(store.dispatch).not.toHaveBeenCalled();
+  });
+
+  test('handles save confirm', () => {
+    const wrapper = shallow(<ProgramName store={store} />, { context }).dive().dive();
+
+    wrapper.find(Input).simulate('change', { target: { value: 'new name' } });
+    wrapper.update();
+
+    // User opens save confirmation modal
+    wrapper.find(Input).props().action.onClick();
+    wrapper.update();
+
+    expect(wrapper.find(Confirm).prop('open')).toBe(true);
+
+    // User clicks 'OK'
+    wrapper.find(Confirm).prop('onConfirm')();
+    wrapper.update();
+
+    expect(wrapper.find(Confirm).prop('open')).toBe(false);
+    expect(store.dispatch).toHaveBeenCalled();
+    expect(store.dispatch).toHaveBeenCalledWith(changeName('test name'));
+  });
+});
diff --git a/src/components/__tests__/__snapshots__/ProgramName.test.js.snap b/src/components/__tests__/__snapshots__/ProgramName.test.js.snap
new file mode 100644
index 00000000..01bed67c
--- /dev/null
+++ b/src/components/__tests__/__snapshots__/ProgramName.test.js.snap
@@ -0,0 +1,154 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`The Console component renders on the page with no errors 1`] = `
+<withCookies(Component)
+  store={
+    Object {
+      "clearActions": [Function],
+      "dispatch": [MockFunction],
+      "getActions": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+    }
+  }
+>
+  <Connect(Console)
+    allCookies={Object {}}
+    cookies={
+      Cookies {
+        "HAS_DOCUMENT_COOKIE": true,
+        "changeListeners": Array [
+          [Function],
+        ],
+        "cookies": Object {},
+        "hooks": undefined,
+      }
+    }
+    store={
+      Object {
+        "clearActions": [Function],
+        "dispatch": [MockFunction],
+        "getActions": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+      }
+    }
+  >
+    <Console
+      allCookies={Object {}}
+      changeName={[Function]}
+      code={
+        Object {
+          "name": "test name",
+        }
+      }
+      cookies={
+        Cookies {
+          "HAS_DOCUMENT_COOKIE": true,
+          "changeListeners": Array [
+            [Function],
+          ],
+          "cookies": Object {},
+          "hooks": undefined,
+        }
+      }
+      store={
+        Object {
+          "clearActions": [Function],
+          "dispatch": [MockFunction],
+          "getActions": [Function],
+          "getState": [Function],
+          "replaceReducer": [Function],
+          "subscribe": [Function],
+        }
+      }
+      storeSubscription={
+        Subscription {
+          "listeners": Object {
+            "clear": [Function],
+            "get": [Function],
+            "notify": [Function],
+            "subscribe": [Function],
+          },
+          "onStateChange": [Function],
+          "parentSub": undefined,
+          "store": Object {
+            "clearActions": [Function],
+            "dispatch": [MockFunction],
+            "getActions": [Function],
+            "getState": [Function],
+            "replaceReducer": [Function],
+            "subscribe": [Function],
+          },
+          "unsubscribe": [Function],
+        }
+      }
+    >
+      <Input
+        defaultValue="test name"
+        label="Name:"
+        onChange={[Function]}
+        type="text"
+      >
+        <div
+          className="ui labeled input"
+        >
+          <Label
+            className="label"
+            content="Name:"
+          >
+            <div
+              className="ui label label"
+              onClick={[Function]}
+            >
+              Name:
+            </div>
+          </Label>
+          <input
+            defaultValue="test name"
+            onChange={[Function]}
+            type="text"
+          />
+        </div>
+      </Input>
+      <Confirm
+        cancelButton="Cancel"
+        confirmButton="OK"
+        content="Are you sure that you want to change the name of this program?"
+        onCancel={[Function]}
+        onConfirm={[Function]}
+        open={false}
+        size="small"
+      >
+        <Modal
+          centered={true}
+          closeOnDimmerClick={true}
+          closeOnDocumentClick={false}
+          dimmer={true}
+          eventPool="Modal"
+          onClose={[Function]}
+          open={false}
+          size="small"
+        >
+          <Portal
+            className="ui page modals dimmer transition visible active"
+            closeOnDocumentClick={false}
+            closeOnEscape={true}
+            closeOnRootNodeClick={true}
+            eventPool="Modal"
+            mountNode={<body />}
+            onClose={[Function]}
+            onMount={[Function]}
+            onOpen={[Function]}
+            onUnmount={[Function]}
+            open={false}
+            openOnTriggerClick={true}
+          />
+        </Modal>
+      </Confirm>
+    </Console>
+  </Connect(Console)>
+</withCookies(Component)>
+`;
diff --git a/src/containers/MissionControl.js b/src/containers/MissionControl.js
index e1d21fab..2ab87590 100644
--- a/src/containers/MissionControl.js
+++ b/src/containers/MissionControl.js
@@ -7,6 +7,7 @@ import CodeViewer from '@/components/CodeViewer';
 import Console from '@/components/Console';
 import Control from '@/components/Control';
 import Indicator from '@/components/Indicator';
+import ProgramName from '@/components/ProgramName';
 import Workspace from '@/components/Workspace';
 
 const MissionControl = () => (
@@ -18,6 +19,10 @@ const MissionControl = () => (
         </Grid.Row>
       </Grid.Column>
       <Grid.Column width={6}>
+        <Grid.Row>
+          <ProgramName />
+        </Grid.Row>
+        <hr />
         <Grid.Row>
           <CodeViewer>
             Show Me The Code!
diff --git a/src/containers/__tests__/MissionControl.test.js b/src/containers/__tests__/MissionControl.test.js
index 081c2af8..d958d226 100644
--- a/src/containers/__tests__/MissionControl.test.js
+++ b/src/containers/__tests__/MissionControl.test.js
@@ -11,6 +11,7 @@ jest.mock('@/components/CodeViewer', () => () => <div />);
 jest.mock('@/components/Console', () => () => <div />);
 jest.mock('@/components/Control', () => () => <div />);
 jest.mock('@/components/Indicator', () => () => <div />);
+jest.mock('@/components/ProgramName', () => () => <div />);
 jest.mock('@/components/Workspace', () => () => <div />);
 
 const cookiesValues = { auth_jwt: '1234' };
diff --git a/src/containers/__tests__/__snapshots__/MissionControl.test.js.snap b/src/containers/__tests__/__snapshots__/MissionControl.test.js.snap
index 5f1fb7e9..659ab1cc 100644
--- a/src/containers/__tests__/__snapshots__/MissionControl.test.js.snap
+++ b/src/containers/__tests__/__snapshots__/MissionControl.test.js.snap
@@ -67,6 +67,16 @@ exports[`The MissionControl container renders on the page with no errors 1`] = `
                 </div>
               </GridRow>
               <hr />
+              <GridRow>
+                <div
+                  className="row"
+                >
+                  <Component>
+                    <div />
+                  </Component>
+                </div>
+              </GridRow>
+              <hr />
               <GridRow>
                 <div
                   className="row"
diff --git a/src/reducers/__tests__/code.test.js b/src/reducers/__tests__/code.test.js
index 94402922..220360fa 100644
--- a/src/reducers/__tests__/code.test.js
+++ b/src/reducers/__tests__/code.test.js
@@ -5,6 +5,8 @@ import {
   UPDATE_JSCODE,
   UPDATE_XMLCODE,
   CHANGE_NAME,
+  CHANGE_NAME_FULFILLED,
+  CHANGE_NAME_REJECTED,
   CHANGE_ID,
   FETCH_PROGRAM,
   FETCH_PROGRAM_FULFILLED,
@@ -55,10 +57,41 @@ describe('The code reducer', () => {
     expect(
       reducer({}, {
         type: CHANGE_NAME,
-        payload: 'test name',
       }),
     ).toEqual({
-      name: 'test name',
+      isChangingName: true,
+    });
+  });
+
+  test('should handle CHANGE_NAME_FULFILLED', () => {
+    const name = 'mybd';
+
+    expect(
+      reducer({}, {
+        type: CHANGE_NAME_FULFILLED,
+        payload: {
+          name,
+        },
+      }),
+    ).toEqual({
+      isChangingName: false,
+      name,
+    });
+  });
+
+  test('should handle CHANGE_NAME_REJECTED', () => {
+    const detail = 'Authentication credentials were not provided.';
+
+    expect(
+      reducer({}, {
+        type: CHANGE_NAME_REJECTED,
+        payload: {
+          detail,
+        },
+      }),
+    ).toEqual({
+      isChangingName: false,
+      error: { detail },
     });
   });
 
diff --git a/src/reducers/code.js b/src/reducers/code.js
index e7510c12..ce52b321 100644
--- a/src/reducers/code.js
+++ b/src/reducers/code.js
@@ -3,6 +3,8 @@ import {
   UPDATE_JSCODE,
   UPDATE_XMLCODE,
   CHANGE_NAME,
+  CHANGE_NAME_FULFILLED,
+  CHANGE_NAME_REJECTED,
   CHANGE_ID,
   FETCH_PROGRAM,
   FETCH_PROGRAM_FULFILLED,
@@ -25,6 +27,7 @@ export default function code(
     isFetching: false,
     isSaving: false,
     isCreating: false,
+    isChangingName: false,
     error: null,
   },
   action,
@@ -48,7 +51,19 @@ export default function code(
     case CHANGE_NAME:
       return {
         ...state,
-        name: action.payload,
+        isChangingName: true,
+      };
+    case CHANGE_NAME_FULFILLED:
+      return {
+        ...state,
+        isChangingName: false,
+        name: action.payload.name,
+      };
+    case CHANGE_NAME_REJECTED:
+      return {
+        ...state,
+        isChangingName: false,
+        error: action.payload,
       };
     case CHANGE_ID:
       return {