diff --git a/website/src/App.js b/website/src/App.js
index 0f165c0..12609af 100644
--- a/website/src/App.js
+++ b/website/src/App.js
@@ -4,6 +4,7 @@ import { Home } from './Home'
 import { Profile } from './Profile'
 import { Users } from './Users'
 import { Teams } from './Teams'
+import { System } from './System'
 import { HeaderButton, HeaderText, Column, Row, Text, Box } from 'ui'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import logoImage from 'images/logo.png'
@@ -101,7 +102,7 @@ export class App extends Component {
             <ProtectedRoute exact path='/profile' render={props => (<Profile {...props} changeTitle={this.handleChangeTitle} />)} />
             <ProtectedRoute exact admin path='/users' render={props => (<Users {...props} changeTitle={this.handleChangeTitle} />)} />
             <ProtectedRoute exact admin path='/teams' render={props => (<Teams {...props} changeTitle={this.handleChangeTitle} />)} />
-            <ProtectedRoute exact admin path='/system' component={Users} />
+            <ProtectedRoute exact admin path='/system' render={props => (<System {...props} changeTitle={this.handleChangeTitle} />)} />
             <ProtectedRoute exact admin path='/home' render={props => (<Home {...props} changeTitle={this.handleChangeTitle} />)} />
             <DefaultRoute />
           </Switch>
diff --git a/website/src/Home/Home.js b/website/src/Home/Home.js
index 37fe67a..58d370d 100644
--- a/website/src/Home/Home.js
+++ b/website/src/Home/Home.js
@@ -33,7 +33,7 @@ export class Home extends Component {
             </Row.Item>
             <Row.Item width={sizeInfo.panelButtonSpacing} />
             <Row.Item>
-              <PanelButton icon='system' text='System' />
+              <PanelButton icon='system' text='System' onClick={() => (this.props.history.push('/system'))} />
             </Row.Item>
             <Row.Item grow />
           </Row>
diff --git a/website/src/System/System.js b/website/src/System/System.js
new file mode 100644
index 0000000..e8e4e5e
--- /dev/null
+++ b/website/src/System/System.js
@@ -0,0 +1,104 @@
+import React, { Component, Fragment } from 'react'
+import PropTypes from 'prop-types'
+import { Box, Image, Column, Row, Button } from 'ui'
+import { MessageModal, WaitModal } from '../Modal'
+// import { api } from 'src/API'
+import { sizeInfo, colorInfo } from 'ui/style'
+import headerLogo from 'images/deighton.png'
+
+export class System extends Component {
+  static propTypes = {
+    changeTitle: PropTypes.func.isRequired,
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      messageModal: null,
+      waitModal: null,
+    }
+  }
+
+  componentDidMount(props) {
+    this.props.changeTitle('System')
+  }
+
+  componentWillUnmount() {
+    this.props.changeTitle('')
+  }
+
+  render() {
+    const { messageModal, waitModal } = this.state
+
+    return (
+      <Fragment>
+        <Column.Item grow />
+        <Column.Item>
+          <Row>
+            <Row.Item grow />
+            <Row.Item width={sizeInfo.formRowSpacing} />
+            <Row.Item width={sizeInfo.modalWidth}>
+              <Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }} radius={sizeInfo.formBoxRadius}>
+                <Column>
+                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
+                  <Column.Item>
+                    <Row>
+                      <Row.Item grow />
+                      <Row.Item>
+                        <Image source={headerLogo} width={sizeInfo.loginLogoWidth} />
+                      </Row.Item>
+                      <Row.Item grow />
+                    </Row>
+                  </Column.Item>
+                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
+                  <Column.Item>
+                    <Row>
+                      <Row.Item grow />
+                      <Row.Item>
+                        <Button text='Delete All Activities' width={sizeInfo.buttonWideWidth} />
+                      </Row.Item>
+                      <Row.Item grow />
+                    </Row>
+                  </Column.Item>
+                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
+                  <Column.Item>
+                    <Row>
+                      <Row.Item grow />
+                      <Row.Item>
+                        <Button text='Delete All Work Items' width={sizeInfo.buttonWideWidth} />
+                      </Row.Item>
+                      <Row.Item grow />
+                    </Row>
+                  </Column.Item>
+                  <Column.Item minHeight={sizeInfo.formColumnSpacing} />
+                  <Column.Item>
+                    <Row>
+                      <Row.Item grow />
+                      <Row.Item>
+                        <Button text='Delete All Teams' width={sizeInfo.buttonWideWidth} />
+                      </Row.Item>
+                      <Row.Item grow />
+                    </Row>
+                  </Column.Item>
+                  <Column.Item height={sizeInfo.formColumnSpacing} />
+                </Column>
+              </Box>
+            </Row.Item>
+            <Row.Item grow />
+          </Row>
+        </Column.Item>
+        <Column.Item grow>
+          <MessageModal
+            open={!!messageModal}
+            icon={messageModal ? messageModal.icon : ''}
+            message={messageModal ? messageModal.message : ''}
+            detail={messageModal ? messageModal.title : ''}
+            onDismiss={this.handleMessageModalDismiss} />
+
+          <WaitModal active={!!waitModal}
+            message={waitModal ? waitModal.message : ''} />
+        </Column.Item>
+      </Fragment>
+    )
+  }
+}
diff --git a/website/src/System/index.js b/website/src/System/index.js
new file mode 100644
index 0000000..e993646
--- /dev/null
+++ b/website/src/System/index.js
@@ -0,0 +1 @@
+export { System } from './System'