diff --git a/.eslintrc.json b/.eslintrc.json
index 24d4002..965dbbd 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -63,8 +63,8 @@
     "react/jsx-filename-extension": 0,
     "react/jsx-equals-spacing": 1,
     "react/jsx-handler-names": 1,
-    "react/jsx-indent-props": 1,
-    "react/jsx-indent": 1,
+    "react/jsx-indent-props": [1, 2],
+    "react/jsx-indent": [1, 2],
     "react/jsx-key": 1,
     "react/jsx-max-props-per-line": 0,
     "react/jsx-no-bind": 1,
diff --git a/src/containers/app.js b/src/containers/app.js
index cbadf8b..5b12b5f 100644
--- a/src/containers/app.js
+++ b/src/containers/app.js
@@ -35,34 +35,34 @@ class App extends Component {
 
     render() {
         return (
-            <Container>
-                {/*TODO Extract as header container.*/}
-                <Row className="justify-content-around">
-                    <Col lg="4">
-                        <ConnectedUserLogin />
-                    </Col>
-                    <Col lg="4">
-                        <ConnectedThemeSwitchView />
-                    </Col>
-                </Row>
+          <Container>
+            {/*TODO Extract as header container.*/}
+            <Row className="justify-content-around">
+              <Col lg="4">
+                <ConnectedUserLogin />
+              </Col>
+              <Col lg="4">
+                <ConnectedThemeSwitchView />
+              </Col>
+            </Row>
 
-                {/*TODO Extract as site header container.*/}
-                <SiteHeader siteName={ this.props.siteName } logo={ this.props.logo } tagline={ this.props.tagline } />
+            {/*TODO Extract as site header container.*/}
+            <SiteHeader siteName={ this.props.siteName } logo={ this.props.logo } tagline={ this.props.tagline } />
 
-                {/*TODO Extract as Main body and navigation sidebar containers.*/}
-                <Row className="justify-content-center">
-                    <ConnectedNavigationMenu />
-                    <Col lg="8" className="ice-floe">
-                        <Switch>
-                            <Route exact path="/" component={ ConnectedArticle } />
-                            <Route path="/:pageId" component={ ConnectedArticle } />
-                        </Switch>
-                    </Col>
-                </Row>
+            {/*TODO Extract as Main body and navigation sidebar containers.*/}
+            <Row className="justify-content-center">
+              <ConnectedNavigationMenu />
+              <Col lg="8" className="ice-floe">
+                <Switch>
+                  <Route exact path="/" component={ ConnectedArticle } />
+                  <Route path="/:pageId" component={ ConnectedArticle } />
+                </Switch>
+              </Col>
+            </Row>
 
-                {/*TODO Extract as site footer container.*/}
-                <SiteFooter footer={ this.props.footer } />
-            </Container>
+            {/*TODO Extract as site footer container.*/}
+            <SiteFooter footer={ this.props.footer } />
+          </Container>
         );
     }
 }
diff --git a/src/entry.js b/src/entry.js
index d160ac4..5d814b0 100644
--- a/src/entry.js
+++ b/src/entry.js
@@ -24,11 +24,11 @@ const location = window.location.pathname.substring(1);
 appStore.dispatch(fetchPage(location));
 
 const RookeriesWiredApp = (
-    <Provider store={ appStore }>
-        <BrowserRouter>
-            <WiredApp />
-        </BrowserRouter>
-    </Provider>
+  <Provider store={ appStore }>
+    <BrowserRouter>
+      <WiredApp />
+    </BrowserRouter>
+  </Provider>
 );
 
 render(RookeriesWiredApp, document.getElementById("ui-target"));
diff --git a/src/server.js b/src/server.js
index f5ed34a..d5a8b49 100644
--- a/src/server.js
+++ b/src/server.js
@@ -24,11 +24,11 @@ export function renderReactComponentsToString() {
   const context = {};
   return {
         bodyContent: render(h(
-            <Provider store={ serverSideStore }>
-                <StaticRouter location={ url } context={ context }>
-                    <WiredApp />
-                </StaticRouter>
-            </Provider>
+          <Provider store={ serverSideStore }>
+            <StaticRouter location={ url } context={ context }>
+              <WiredApp />
+            </StaticRouter>
+          </Provider>
     ))
   };
 
diff --git a/src/views/code_editor.js b/src/views/code_editor.js
index e71d213..78c897c 100644
--- a/src/views/code_editor.js
+++ b/src/views/code_editor.js
@@ -16,7 +16,7 @@ import PropTypes from "prop-types";
  see issue https://github.com/JedWatson/react-codemirror/issues/34
  Also add in the themes in the CSS to get proper theming support.
  */
-import CodeMirror from "react-codemirror";
+import CodeMirror from "react-codemirror2";
 // TODO: Figure out how to work around this import.
 
 // Workaround for rendering CodeMirror server-side
diff --git a/src/views/journal_markdown_viewer.js b/src/views/journal_markdown_viewer.js
index 10d5d25..bee0bed 100644
--- a/src/views/journal_markdown_viewer.js
+++ b/src/views/journal_markdown_viewer.js
@@ -146,22 +146,22 @@ export class JournalMarkdownView extends Component {
 
         // # TODO Factor the view into something nicer.
         let showEditorButton = (
-            <Button onClick={ this.handleToggleEditorPane }>
-                <FontAwesome name="edit"/> Edit
-            </Button>
+          <Button onClick={ this.handleToggleEditorPane }>
+            <FontAwesome name="edit"/> Edit
+          </Button>
         );
 
         // # TODO Add in ability to display mhessages outside the collapsible pane
         let showPanel = (
-            <Collapse isOpen={ this.isEditorPaneOpen() }>
-                <CodeMirror
-                  autoFocus="true"
-                  value={ code }
-                  onChange={ this.handleUpdateCode }
-                  options={{ mode: "markdown", theme: this.props.editorTheme }} />
-                <Button onClick={ this.handleSaveContent }><FontAwesome name="save"/> Save </Button>
-                <Button onClick={ this.handleResetContent }><FontAwesome name="undo"/> Reset </Button>
-            </Collapse>
+          <Collapse isOpen={ this.isEditorPaneOpen() }>
+            <CodeMirror
+              autoFocus="true"
+              value={ code }
+              onChange={ this.handleUpdateCode }
+              options={{ mode: "markdown", theme: this.props.editorTheme }} />
+            <Button onClick={ this.handleSaveContent }><FontAwesome name="save"/> Save </Button>
+            <Button onClick={ this.handleResetContent }><FontAwesome name="undo"/> Reset </Button>
+          </Collapse>
         );
         if (this.state.editorPaneState === EditorPaneState.hidden) {
             showEditorButton = (<div />);
@@ -169,12 +169,12 @@ export class JournalMarkdownView extends Component {
         }
 
         return (
-            <div>
-                <h1>{ this.props.title }</h1>
-                <span dangerouslySetInnerHTML={{ __html: rawMarkup }} />
-                { showEditorButton }
-                { showPanel }
-            </div>
+          <div>
+            <h1>{ this.props.title }</h1>
+            <span dangerouslySetInnerHTML={{ __html: rawMarkup }} />
+            { showEditorButton }
+            { showPanel }
+          </div>
         );
     }
 }
diff --git a/src/views/navigation_menu.js b/src/views/navigation_menu.js
index cb99542..694d61d 100644
--- a/src/views/navigation_menu.js
+++ b/src/views/navigation_menu.js
@@ -25,11 +25,11 @@ class NavigationMenuItem extends Component {
 
     render() {
       return (
-          <NavItem>
-              <NavLink>
-                  <Link to={ this.props.url }>{ this.props.title }</Link>
-              </NavLink>
-          </NavItem>);
+        <NavItem>
+          <NavLink>
+            <Link to={ this.props.url }>{ this.props.title }</Link>
+          </NavLink>
+        </NavItem>);
     }
 }
 
@@ -52,17 +52,17 @@ class NavigationMenu extends Component {
             let menuId = `${menuItem.title.toLowerCase()}_${menuItem.url.substring(1, menuItem.url.length)}`;
             // TODO Fix API for application menu.
             let menu = (
-                <NavigationMenuItem key={ menuId } title={ menuItem.title } url={ menuItem.url }/>
+              <NavigationMenuItem key={ menuId } title={ menuItem.title } url={ menuItem.url }/>
             );
             navigationMenuItems.push(menu);
         }
 
         return (
-            <Col lg="3">
-                <Nav pills vertical className="ice-menu">
-                    { navigationMenuItems }
-                </Nav>
-            </Col>
+          <Col lg="3">
+            <Nav pills vertical className="ice-menu">
+              { navigationMenuItems }
+            </Nav>
+          </Col>
         );
     }
 }
diff --git a/src/views/site_footer.js b/src/views/site_footer.js
index 7859dc6..321c4ba 100644
--- a/src/views/site_footer.js
+++ b/src/views/site_footer.js
@@ -22,11 +22,11 @@ export class SiteFooter extends Component {
 
     render() {
         return (
-            <Row className="justify-content-end">
-                <Col lg="8">
-                    <footer>{ this.props.footer }</footer>
-                </Col>
-            </Row>
+          <Row className="justify-content-end">
+            <Col lg="8">
+              <footer>{ this.props.footer }</footer>
+            </Col>
+          </Row>
         );
     }
 }
diff --git a/src/views/site_header.js b/src/views/site_header.js
index 6f1f174..9c8a9c8 100644
--- a/src/views/site_header.js
+++ b/src/views/site_header.js
@@ -24,20 +24,20 @@ export class SiteHeader extends Component {
     render() {
         let headerLogoAltText = `${this.props.siteName} logo`;
         return (
-            <Row className="justify-content-around">
-                <Col lg="11">
-                    <Row className="sea-header justify-content-center align-items-center">
-                        <Col lg="2">
-                            <img className="header_logo" src={ this.props.logo } alt={ headerLogoAltText }/>
-                        </Col>
-                        <Col lg="4">
-                            <h1 className="header_title">{ this.props.siteName }</h1>
-
-                            <h2 className="header_tagline">{ this.props.tagline }</h2>
-                        </Col>
-                    </Row>
+          <Row className="justify-content-around">
+            <Col lg="11">
+              <Row className="sea-header justify-content-center align-items-center">
+                <Col lg="2">
+                  <img className="header_logo" src={ this.props.logo } alt={ headerLogoAltText }/>
                 </Col>
-            </Row>
+                <Col lg="4">
+                  <h1 className="header_title">{ this.props.siteName }</h1>
+
+                  <h2 className="header_tagline">{ this.props.tagline }</h2>
+                </Col>
+              </Row>
+            </Col>
+          </Row>
         );
     }
 }
diff --git a/src/views/theme_switcher_button.js b/src/views/theme_switcher_button.js
index 66ccd41..aab0eba 100644
--- a/src/views/theme_switcher_button.js
+++ b/src/views/theme_switcher_button.js
@@ -31,10 +31,10 @@ export class ThemeSwitchView extends Component {
     render() {
         let changeThemeText = `Change to ${this.props.alternativeTheme} theme`;
         return (
-            <div className="text-center muted hoverable" onClick={ this.handleSwitchTheme }>
-                <FontAwesome name="eye" />&nbsp;&nbsp;
-                { changeThemeText }
-            </div>
+          <div className="text-center muted hoverable" onClick={ this.handleSwitchTheme }>
+            <FontAwesome name="eye" />&nbsp;&nbsp;
+            { changeThemeText }
+          </div>
         );
     }
 }
diff --git a/src/views/user_login_modal.js b/src/views/user_login_modal.js
index 1f83ecc..f592639 100644
--- a/src/views/user_login_modal.js
+++ b/src/views/user_login_modal.js
@@ -116,9 +116,9 @@ export class UserLoginView extends Component {
         let loginButtonDisabled = this.state.username === "" || this.state.password === "";
 
         return (
-            <div>
-                <div className="text-center muted hoverable" onClick={ loginOperation }>
-                    <FontAwesome name="user"/>
+          <div>
+            <div className="text-center muted hoverable" onClick={ loginOperation }>
+              <FontAwesome name="user"/>
                     &nbsp;
                     Hello { this.props.fullName }!
                     &ensp;
@@ -126,41 +126,41 @@ export class UserLoginView extends Component {
                     &nbsp;
                     Do you want to { loginMessage }?
                 </div>
-                <Modal isOpen={ this.state.displayLoginModal } toggle={ this.handleHideLoginModal } onKeyPress={ this.handleKeyboardLogin }>
-                    <ModalHeader toggle={ this.handleHideLoginModal }>
+            <Modal isOpen={ this.state.displayLoginModal } toggle={ this.handleHideLoginModal } onKeyPress={ this.handleKeyboardLogin }>
+              <ModalHeader toggle={ this.handleHideLoginModal }>
                         User Login
                     </ModalHeader>
 
-                    <ModalBody>
-                        {errorDisplay}
-                        <Form horizontal>
-                            <FormGroup row>
-                                <Col xs="2">
-                                    <Label for="username">Username</Label>
-                                </Col>
-                                <Col xs="10" >
-                                    <Input id="username" type="text" placeholder="Username"
-                                        value={ this.state.username } onChange={ this.handleUsernameUpdate } />
-                                </Col>
-                            </FormGroup>
-                            <FormGroup row>
-                                <Col xs="2">
-                                    <Label for="password">Password</Label>
-                                </Col>
-                                <Col xs="10">
-                                    <Input id="password" type="password" placeholder="***"
-                                        value={ this.state.password } onChange={ this.handlePasswordUpdate } />
-                                </Col>
-                            </FormGroup>
-                        </Form>
-                    </ModalBody>
+              <ModalBody>
+                {errorDisplay}
+                <Form horizontal>
+                  <FormGroup row>
+                    <Col xs="2">
+                      <Label for="username">Username</Label>
+                    </Col>
+                    <Col xs="10" >
+                      <Input id="username" type="text" placeholder="Username"
+                        value={ this.state.username } onChange={ this.handleUsernameUpdate } />
+                    </Col>
+                  </FormGroup>
+                  <FormGroup row>
+                    <Col xs="2">
+                      <Label for="password">Password</Label>
+                    </Col>
+                    <Col xs="10">
+                      <Input id="password" type="password" placeholder="***"
+                        value={ this.state.password } onChange={ this.handlePasswordUpdate } />
+                    </Col>
+                  </FormGroup>
+                </Form>
+              </ModalBody>
 
-                    <ModalFooter>
-                        <Button color="warning" onClick={ this.handleHideLoginModal }>Cancel</Button>
-                        <Button color="primary" onClick={ this.handleLoginAttempt } disabled={ loginButtonDisabled }>Login</Button>
-                    </ModalFooter>
-                </Modal>
-            </div>
+              <ModalFooter>
+                <Button color="warning" onClick={ this.handleHideLoginModal }>Cancel</Button>
+                <Button color="primary" onClick={ this.handleLoginAttempt } disabled={ loginButtonDisabled }>Login</Button>
+              </ModalFooter>
+            </Modal>
+          </div>
         );
     }
 }