diff --git a/src/sentry/static/sentry/app/routes.jsx b/src/sentry/static/sentry/app/routes.jsx
index b597078f80b3be..5619cfa5eeddc8 100644
--- a/src/sentry/static/sentry/app/routes.jsx
+++ b/src/sentry/static/sentry/app/routes.jsx
@@ -60,6 +60,7 @@ import OrganizationTeams from './views/organizationTeams';
 import ProjectAlertRules from './views/projectAlertRules';
 import ProjectAlertRuleDetails from './views/projectAlertRuleDetails';
 import ProjectAlertSettings from './views/projectAlertSettings';
+import ProjectEnvironments from './views/projectEnvironments';
 import ProjectTags from './views/projectTags';
 import ProjectChooser from './views/projectChooser';
 import ProjectCspSettings from './views/projectCspSettings';
@@ -242,6 +243,12 @@ const projectSettingsRoutes = [
     path="alerts/"
     component={errorHandler(ProjectAlertSettings)}
   />,
+  <Route
+    key="environments/"
+    name="Environments"
+    path="environments/"
+    component={errorHandler(ProjectEnvironments)}
+  />,
   <Route key="tags/" name="Tags" path="tags/" component={errorHandler(ProjectTags)} />,
   <Route
     key="alerts/rules/"
diff --git a/src/sentry/static/sentry/app/views/projectEnvironments.jsx b/src/sentry/static/sentry/app/views/projectEnvironments.jsx
new file mode 100644
index 00000000000000..e7b91fa1c34501
--- /dev/null
+++ b/src/sentry/static/sentry/app/views/projectEnvironments.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import Reflux from 'reflux';
+import createReactClass from 'create-react-class';
+
+import EnvironmentStore from '../stores/environmentStore';
+import Panel from './settings/components/panel';
+import PanelHeader from './settings/components/panelHeader';
+import PanelBody from './settings/components/panelBody';
+import EmptyMessage from './settings/components/emptyMessage';
+import {t} from '../locale';
+import Row from './settings/components/row';
+import SettingsPageHeader from './settings/components/settingsPageHeader';
+import ListLink from '../components/listLink';
+
+const ProjectEnvironments = createReactClass({
+  mixins: [Reflux.listenTo(EnvironmentStore, 'onEnvironmentsChange')],
+  getInitialState() {
+    return {
+      environments: EnvironmentStore.getAll(),
+    };
+  },
+  onEnvironmentsChange() {
+    this.setState({
+      environments: EnvironmentStore.getAll(),
+    });
+  },
+  renderEmpty() {
+    return <EmptyMessage>{t("You don't have any environments yet.")}</EmptyMessage>;
+  },
+  renderEnvironmentList(envs) {
+    return envs.map(env => <Row key={env.id}>{env.displayName}</Row>);
+  },
+  render() {
+    let {environments} = this.state;
+    let {orgId, projectId} = this.props.params;
+
+    return (
+      <div>
+        <SettingsPageHeader
+          title={t('Manage Environments')}
+          tabs={
+            <ul className="nav nav-tabs" style={{borderBottom: '1px solid #ddd'}}>
+              <ListLink to={`/${orgId}/${projectId}/settings/environments/`} index={true}>
+                {t('Environments')}
+              </ListLink>
+            </ul>
+          }
+        />
+        <Panel>
+          <PanelHeader>{t('Environments')}</PanelHeader>
+          <PanelBody>
+            {environments.length
+              ? this.renderEnvironmentList(environments)
+              : this.renderEmpty()}
+          </PanelBody>
+        </Panel>
+      </div>
+    );
+  },
+});
+
+export default ProjectEnvironments;
diff --git a/src/sentry/static/sentry/app/views/projectSettings/index.jsx b/src/sentry/static/sentry/app/views/projectSettings/index.jsx
index 18c13d2ce553c8..2f41d59fac44bd 100644
--- a/src/sentry/static/sentry/app/views/projectSettings/index.jsx
+++ b/src/sentry/static/sentry/app/views/projectSettings/index.jsx
@@ -104,6 +104,9 @@ const ProjectSettings = createReactClass({
             >
               {t('Alerts')}
             </ListLink>
+            <ListLink to={`/${orgId}/${projectId}/settings/environments/`}>
+              {t('Environments')}
+            </ListLink>
             <ListLink to={`/${orgId}/${projectId}/settings/tags/`}>{t('Tags')}</ListLink>
             <ListLink to={`/${orgId}/${projectId}/settings/issue-tracking/`}>
               {t('Issue Tracking')}
diff --git a/tests/js/spec/views/__snapshots__/projectEnvironments.spec.jsx.snap b/tests/js/spec/views/__snapshots__/projectEnvironments.spec.jsx.snap
new file mode 100644
index 00000000000000..884771a139a11e
--- /dev/null
+++ b/tests/js/spec/views/__snapshots__/projectEnvironments.spec.jsx.snap
@@ -0,0 +1,483 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProjectEnvironments render() renders empty message 1`] = `
+.glamor-4 {
+  font-size: 14px;
+  box-shadow: inset 0 -1px 0;
+  margin: -20px 0 30px;
+}
+
+.glamor-2 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.glamor-0 {
+  font-size: 20px;
+  font-weight: bold;
+  margin: 20px 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.glamor-17 {
+  background: #fff;
+  border: 1px solid;
+  margin-bottom: 30px;
+  position: relative;
+}
+
+.glamor-13 {
+  border-bottom: 1px solid;
+  border-radius: 0 0;
+  text-transform: uppercase;
+  font-size: 13px;
+  line-height: 1;
+  padding: 15px 20px;
+}
+
+.glamor-9 {
+  font-size: inherit;
+  text-transform: inherit;
+  margin: 0;
+}
+
+.glamor-7 {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  margin-bottom: 20px;
+  font-size: inherit;
+  text-transform: inherit;
+  margin: 0;
+}
+
+.glamor-15 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 18px;
+  font-size: 1.5em;
+  opacity: 0.4;
+  font-weight: bold;
+}
+
+<ProjectEnvironments
+  params={
+    Object {
+      "orgId": "org-slug",
+      "projectId": "project-slug",
+    }
+  }
+>
+  <div>
+    <SettingsPageHeading
+      tabs={
+        <ul
+          className="nav nav-tabs"
+          style={
+            Object {
+              "borderBottom": "1px solid #ddd",
+            }
+          }
+        >
+          <ListLink
+            activeClassName="active"
+            index={true}
+            to="/org-slug/project-slug/settings/environments/"
+          >
+            Environments
+          </ListLink>
+        </ul>
+      }
+      title="Manage Environments"
+    >
+      <Wrapper
+        tabs={
+          <ul
+            className="nav nav-tabs"
+            style={
+              Object {
+                "borderBottom": "1px solid #ddd",
+              }
+            }
+          >
+            <ListLink
+              activeClassName="active"
+              index={true}
+              to="/org-slug/project-slug/settings/environments/"
+            >
+              Environments
+            </ListLink>
+          </ul>
+        }
+      >
+        <div
+          className="glamor-4 glamor-5"
+        >
+          <Flex
+            align="center"
+          >
+            <Base
+              align="center"
+              className="glamor-2"
+            >
+              <div
+                className="glamor-2"
+                is={null}
+              >
+                <Title>
+                  <div
+                    className="glamor-0 glamor-1"
+                  >
+                    Manage Environments
+                  </div>
+                </Title>
+              </div>
+            </Base>
+          </Flex>
+          <div>
+            <ul
+              className="nav nav-tabs"
+              style={
+                Object {
+                  "borderBottom": "1px solid #ddd",
+                }
+              }
+            >
+              <ListLink
+                activeClassName="active"
+                index={true}
+                to="/org-slug/project-slug/settings/environments/"
+              >
+                <li
+                  className=""
+                >
+                  <Link
+                    onlyActiveOnIndex={true}
+                    style={Object {}}
+                    to="/org-slug/project-slug/settings/environments/"
+                  >
+                    <a
+                      onClick={[Function]}
+                      style={Object {}}
+                    >
+                      Environments
+                    </a>
+                  </Link>
+                </li>
+              </ListLink>
+            </ul>
+          </div>
+        </div>
+      </Wrapper>
+    </SettingsPageHeading>
+    <Panel>
+      <div
+        className="glamor-17 glamor-18"
+      >
+        <PanelHeader>
+          <StyledPanelHeader>
+            <div
+              className="glamor-13 glamor-14"
+            >
+              <StyledPanelHeading>
+                <Component
+                  className="glamor-9 glamor-6"
+                >
+                  <_default
+                    className="glamor-9 glamor-6"
+                  >
+                    <div
+                      className="glamor-6 glamor-7 glamor-8"
+                    >
+                      Environments
+                    </div>
+                  </_default>
+                </Component>
+              </StyledPanelHeading>
+            </div>
+          </StyledPanelHeader>
+        </PanelHeader>
+        <PanelBody
+          direction="column"
+          disablePadding={true}
+          flex={false}
+        >
+          <div
+            className=""
+          >
+            <EmptyMessage>
+              <div
+                className="glamor-15 glamor-16"
+              >
+                You don't have any environments yet.
+              </div>
+            </EmptyMessage>
+          </div>
+        </PanelBody>
+      </div>
+    </Panel>
+  </div>
+</ProjectEnvironments>
+`;
+
+exports[`ProjectEnvironments render() renders environment list 1`] = `
+.glamor-4 {
+  font-size: 14px;
+  box-shadow: inset 0 -1px 0;
+  margin: -20px 0 30px;
+}
+
+.glamor-2 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.glamor-0 {
+  font-size: 20px;
+  font-weight: bold;
+  margin: 20px 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.glamor-19 {
+  background: #fff;
+  border: 1px solid;
+  margin-bottom: 30px;
+  position: relative;
+}
+
+.glamor-13 {
+  border-bottom: 1px solid;
+  border-radius: 0 0;
+  text-transform: uppercase;
+  font-size: 13px;
+  line-height: 1;
+  padding: 15px 20px;
+}
+
+.glamor-9 {
+  font-size: inherit;
+  text-transform: inherit;
+  margin: 0;
+}
+
+.glamor-7 {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  margin-bottom: 20px;
+  font-size: inherit;
+  text-transform: inherit;
+  margin: 0;
+}
+
+.glamor-15 {
+  box-sizing: border-box;
+  padding: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  border-bottom: 1px solid;
+}
+
+.glamor-15:last-child {
+  border: 0;
+}
+
+<ProjectEnvironments
+  params={
+    Object {
+      "orgId": "org-slug",
+      "projectId": "project-slug",
+    }
+  }
+>
+  <div>
+    <SettingsPageHeading
+      tabs={
+        <ul
+          className="nav nav-tabs"
+          style={
+            Object {
+              "borderBottom": "1px solid #ddd",
+            }
+          }
+        >
+          <ListLink
+            activeClassName="active"
+            index={true}
+            to="/org-slug/project-slug/settings/environments/"
+          >
+            Environments
+          </ListLink>
+        </ul>
+      }
+      title="Manage Environments"
+    >
+      <Wrapper
+        tabs={
+          <ul
+            className="nav nav-tabs"
+            style={
+              Object {
+                "borderBottom": "1px solid #ddd",
+              }
+            }
+          >
+            <ListLink
+              activeClassName="active"
+              index={true}
+              to="/org-slug/project-slug/settings/environments/"
+            >
+              Environments
+            </ListLink>
+          </ul>
+        }
+      >
+        <div
+          className="glamor-4 glamor-5"
+        >
+          <Flex
+            align="center"
+          >
+            <Base
+              align="center"
+              className="glamor-2"
+            >
+              <div
+                className="glamor-2"
+                is={null}
+              >
+                <Title>
+                  <div
+                    className="glamor-0 glamor-1"
+                  >
+                    Manage Environments
+                  </div>
+                </Title>
+              </div>
+            </Base>
+          </Flex>
+          <div>
+            <ul
+              className="nav nav-tabs"
+              style={
+                Object {
+                  "borderBottom": "1px solid #ddd",
+                }
+              }
+            >
+              <ListLink
+                activeClassName="active"
+                index={true}
+                to="/org-slug/project-slug/settings/environments/"
+              >
+                <li
+                  className=""
+                >
+                  <Link
+                    onlyActiveOnIndex={true}
+                    style={Object {}}
+                    to="/org-slug/project-slug/settings/environments/"
+                  >
+                    <a
+                      onClick={[Function]}
+                      style={Object {}}
+                    >
+                      Environments
+                    </a>
+                  </Link>
+                </li>
+              </ListLink>
+            </ul>
+          </div>
+        </div>
+      </Wrapper>
+    </SettingsPageHeading>
+    <Panel>
+      <div
+        className="glamor-19 glamor-20"
+      >
+        <PanelHeader>
+          <StyledPanelHeader>
+            <div
+              className="glamor-13 glamor-14"
+            >
+              <StyledPanelHeading>
+                <Component
+                  className="glamor-9 glamor-6"
+                >
+                  <_default
+                    className="glamor-9 glamor-6"
+                  >
+                    <div
+                      className="glamor-6 glamor-7 glamor-8"
+                    >
+                      Environments
+                    </div>
+                  </_default>
+                </Component>
+              </StyledPanelHeading>
+            </div>
+          </StyledPanelHeader>
+        </PanelHeader>
+        <PanelBody
+          direction="column"
+          disablePadding={true}
+          flex={false}
+        >
+          <div
+            className=""
+          >
+            <Row
+              key="1"
+              p={2}
+            >
+              <StyledRow
+                p={2}
+              >
+                <Base
+                  className="glamor-15 glamor-16"
+                  p={2}
+                >
+                  <div
+                    className="glamor-15 glamor-16"
+                    is={null}
+                  >
+                    Production
+                  </div>
+                </Base>
+              </StyledRow>
+            </Row>
+          </div>
+        </PanelBody>
+      </div>
+    </Panel>
+  </div>
+</ProjectEnvironments>
+`;
diff --git a/tests/js/spec/views/projectEnvironments.spec.jsx b/tests/js/spec/views/projectEnvironments.spec.jsx
new file mode 100644
index 00000000000000..870e5b20ad51c4
--- /dev/null
+++ b/tests/js/spec/views/projectEnvironments.spec.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {mount} from 'enzyme';
+
+import ProjectEnvironments from 'app/views/projectEnvironments';
+
+import EnvironmentStore from 'app/stores/environmentStore';
+
+describe('ProjectEnvironments', function() {
+  let org;
+  let project;
+
+  beforeEach(function() {
+    org = TestStubs.Organization();
+    project = TestStubs.Project();
+  });
+
+  describe('render()', function() {
+    it('renders empty message', function() {
+      let wrapper = mount(
+        <ProjectEnvironments params={{orgId: org.slug, projectId: project.slug}} />,
+        {
+          context: {
+            router: TestStubs.router(),
+          },
+          childContextTypes: {
+            router: PropTypes.object,
+          },
+        }
+      );
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders environment list', function() {
+      EnvironmentStore.loadInitialData([{id: 1, name: 'production'}]);
+      let wrapper = mount(
+        <ProjectEnvironments params={{orgId: org.slug, projectId: project.slug}} />,
+        {
+          context: {router: TestStubs.router()},
+          childContextTypes: {
+            router: PropTypes.object,
+          },
+        }
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});