diff --git a/app/v2/pipeline/secrets/controller.js b/app/v2/pipeline/secrets/controller.js
new file mode 100644
index 000000000..5ed83177d
--- /dev/null
+++ b/app/v2/pipeline/secrets/controller.js
@@ -0,0 +1,87 @@
+import Controller from '@ember/controller';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class NewPipelineController extends Controller {
+  @service store;
+
+  @service session;
+
+  @service('pipeline.secrets')
+  refreshService;
+
+  @tracked errorMessage = '';
+
+  @tracked newToken = null;
+
+  get pipeline() {
+    return this.model.pipeline;
+  }
+
+  get secrets() {
+    return this.model.secrets;
+  }
+
+  get pipelineTokens() {
+    return this.model.tokens;
+  }
+
+  get pipelineId() {
+    return this.model.pipeline.id;
+  }
+
+  @action
+  createSecret(name, value, pipelineId, allowInPR) {
+    const newSecret = this.store.createRecord('secret', {
+      name,
+      value,
+      pipelineId,
+      allowInPR
+    });
+
+    return newSecret.save().then(
+      s => {
+        this.errorMessage = '';
+        this.secrets.reload();
+
+        return s;
+      },
+      err => {
+        this.errorMessage = err.errors[0].detail;
+      }
+    );
+  }
+
+  @action
+  createPipelineToken(name, description) {
+    const newToken = this.store.createRecord('token', {
+      name,
+      description: description || '',
+      action: 'created'
+    });
+
+    return newToken
+      .save({ adapterOptions: { pipelineId: this.pipelineId } })
+      .then(
+        token => {
+          this.newToken = token;
+        },
+        error => {
+          newToken.destroyRecord({
+            adapterOptions: { pipelineId: this.pipelineId }
+          });
+          throw error;
+        }
+      );
+  }
+
+  @action
+  refreshPipelineToken(tokenId) {
+    return this.refreshService
+      .refreshPipelineToken(this.pipelineId, tokenId)
+      .then(token => {
+        this.newToken = token;
+      });
+  }
+}
diff --git a/app/v2/pipeline/secrets/route.js b/app/v2/pipeline/secrets/route.js
index a0e6486e4..8cc015fd6 100644
--- a/app/v2/pipeline/secrets/route.js
+++ b/app/v2/pipeline/secrets/route.js
@@ -1,3 +1,42 @@
 import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+import { get } from '@ember/object';
 
-export default class NewPipelineSecretsRoute extends Route {}
+export default class NewPipelineSecretsRoute extends Route {
+  @service session;
+
+  @service store;
+
+  @service router;
+
+  model() {
+    // Refresh error message
+    this.controllerFor('v2.pipeline.secrets').set('errorMessage', '');
+
+    // Guests should not access this page
+    if (get(this, 'session.data.authenticated.isGuest')) {
+      this.router.transitionTo('pipeline');
+    }
+
+    const { pipeline } = this.modelFor('v2.pipeline');
+    const secrets = pipeline.get('secrets');
+
+    this.store.unloadAll('token');
+
+    return this.store
+      .findAll('token', { adapterOptions: { pipelineId: pipeline.get('id') } })
+      .then(tokens => ({
+        tokens,
+        secrets,
+        pipeline
+      }))
+      .catch(error => {
+        this.controllerFor('pipeline.secrets').set(
+          'errorMessage',
+          error.errors[0].detail
+        );
+
+        return { secrets, pipeline };
+      });
+  }
+}
diff --git a/app/v2/pipeline/secrets/template.hbs b/app/v2/pipeline/secrets/template.hbs
index 26613c6b4..f252accda 100644
--- a/app/v2/pipeline/secrets/template.hbs
+++ b/app/v2/pipeline/secrets/template.hbs
@@ -1,3 +1,22 @@
 {{page-title "Secrets"}}
-<div>secrets content</div>
+
+<div class="padded-container">
+  <PipelineSecretSettings
+    @secrets={{this.secrets}}
+    @onCreateSecret={{action "createSecret"}}
+    @pipeline={{this.pipeline}}
+    @errorMessage={{this.errorMessage}}
+  />
+
+  <TokenList
+    @tokens={{this.pipelineTokens}}
+    @newToken={{this.newToken}}
+    @pipelineId={{this.pipelineId}}
+    @onCreateToken={{action "createPipelineToken"}}
+    @onRefreshToken={{action "refreshPipelineToken"}}
+    @tokenName="Pipeline"
+    @tokenScope="this pipeline"
+/>
+</div>
+
 {{outlet}}
\ No newline at end of file
diff --git a/app/v2/pipeline/styles.scss b/app/v2/pipeline/styles.scss
index 48a38f9ad..da5a727e7 100644
--- a/app/v2/pipeline/styles.scss
+++ b/app/v2/pipeline/styles.scss
@@ -11,18 +11,6 @@
     grid-template-areas: 'pipeline-nav pipeline-main';
 
     .pipeline-main-content {
-      grid-area: pipeline-main;
-      min-width: 300px;
-      display: grid;
-
-      grid-template-areas:
-        'pipeline-header pipeline-header'
-        'pipeline-tab pipeline-tab'
-        'pipeline-content pipeline-workflowgraph';
-
-      grid-template-rows: 80px 52px 1fr;
-      grid-template-columns: 366px 8fr;
-
       .pipeline-header {
         grid-area: pipeline-header;
       }
@@ -141,12 +129,22 @@
               border-top: none;
             }
           }
-
-          // .event-card-group + .event-card-group {
-          //   border-top: none;
-          // }
         }
       }
     }
+
+    .pipeline-main-content.grid {
+      grid-area: pipeline-main;
+      min-width: 300px;
+      display: grid;
+
+      grid-template-areas:
+        'pipeline-header pipeline-header'
+        'pipeline-tab pipeline-tab'
+        'pipeline-content pipeline-workflowgraph';
+
+      grid-template-rows: 80px 52px 1fr;
+      grid-template-columns: 366px 8fr;
+    }
   }
 }
diff --git a/app/v2/pipeline/template.hbs b/app/v2/pipeline/template.hbs
index d47afd4ba..6e18f6124 100644
--- a/app/v2/pipeline/template.hbs
+++ b/app/v2/pipeline/template.hbs
@@ -1,7 +1,8 @@
 {{page-title "Pipeline"}}
 <div class="pipeline-content">
   <Pipeline::Nav />
-  <div class="pipeline-main-content">
+  <div class="pipeline-main-content {{if this.isEventsPullsJobsRoute "grid"}}" 
+  >
     <div class="pipeline-header">
       <PipelineHeader
         @pipeline={{this.pipeline}}