diff --git a/apps/web/src/_variables.scss b/apps/web/src/_variables.scss
new file mode 100644
index 0000000000000000000000000000000000000000..008b8a85e9a7bc35e8bfc9643874bbfb38c9d95d
--- /dev/null
+++ b/apps/web/src/_variables.scss
@@ -0,0 +1,31 @@
+$timestamp-text-color: #757575;
+$request-status-page-border-light: #d4d4d4;
+$request-status-page-border-dark: #bdbdbd;
+
+// Background for view capability request page
+$capability-request-bg-light: rgba(240, 240, 240, 1);
+$capability-request-bg-dark: rgba(220, 220, 220, 1);
+$capability-request-bg-gradient: linear-gradient(
+    0deg,
+    $capability-request-bg-dark 0%,
+    $capability-request-bg-light 100%
+);
+
+// RUNNING status color
+$running-status-bg-light: #5fb2f4;
+$running-status-bg-dark: #2196f3;
+$running-status-bg-gradient: linear-gradient(
+  0deg,
+  $running-status-bg-dark 0%,
+  $running-status-bg-light 100%
+);
+
+
+// QUEUED status color
+$running-status-bg-light: #5fb2f4;
+$running-status-bg-dark: #2196f3;
+$running-status-bg-gradient: linear-gradient(
+    0deg,
+    $running-status-bg-dark 0%,
+    $running-status-bg-light 100%
+);
diff --git a/apps/web/src/app/workspaces/components/capability-request/capability-request.component.html b/apps/web/src/app/workspaces/components/capability-request/capability-request.component.html
index a91bf844c4928b9268eddd66cec82adcd276da21..da62ed74346f11304a17e1b1ae74fdaeb86a1706 100644
--- a/apps/web/src/app/workspaces/components/capability-request/capability-request.component.html
+++ b/apps/web/src/app/workspaces/components/capability-request/capability-request.component.html
@@ -4,7 +4,7 @@
 <div id="definition-parameters-and-versions">
   <div id="capability-definition-container">
     <span id="capability-label">Capability</span>
-    <app-capability-definition id="capability-definition"></app-capability-definition>
+    <app-capability-definition id="capability-definition" class="w-100"></app-capability-definition>
   </div>
   <h1 id="parameters">PARAMETERS!!!!!!!!!!!!</h1>
 </div>
diff --git a/apps/web/src/app/workspaces/components/capability-request/capability-request.component.scss b/apps/web/src/app/workspaces/components/capability-request/capability-request.component.scss
index 796064d9c2bb4b704dc78bc4a2cc5eeb9ff81576..cedb49f135f251e7ca05fefda8b618c9a1506f1c 100644
--- a/apps/web/src/app/workspaces/components/capability-request/capability-request.component.scss
+++ b/apps/web/src/app/workspaces/components/capability-request/capability-request.component.scss
@@ -1,3 +1,5 @@
+@import "src/variables.scss";
+
 div {
   width: 100%;
   padding: 0.5rem 3rem;
@@ -7,7 +9,7 @@ div {
 #definition-parameters-and-versions {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  background: linear-gradient(0deg, rgba(220, 220, 220, 1) 0%, rgba(240, 240, 240, 1) 100%);
+  background: $capability-request-bg-gradient;
 }
 
 #capability-definition {
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.html b/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.html
index 213e6878522349b8c8e1f22252be9f32c96abdbb..78022d1202ee44191912dd274f80419e3a6d2d5a 100644
--- a/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.html
+++ b/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.html
@@ -2,9 +2,16 @@
   <h5 id="capability-name">null</h5>
 
   <div id="step-sequence">
-    <ul>
-      <li>Step 1</li>
-      <li>Step 2</li>
-    </ul>
+  <div class="container-fluid">
+    <div class="row bg-primary rounded rounded-lg mb-1 text-white py-2 align-items-center">
+      <div class="col">Step 1</div>
+      <div class="col-auto">
+        <span class="fas fa-play-circle fa-2x"></span>
+      </div>
+    </div>
+    <div class="row bg-secondary rounded rounded-lg mb-1 text-white py-2 align-items-center">
+      <div class="col">Step 2</div>
+      <div class="col-auto"><span class="fa fa-circle fa-2x"></span></div>
+    </div>
   </div>
 </div>
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.scss b/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.scss
index e865be441231ff1ef1ff7752fc91e6526ac230d6..17a4b5aa27df653582e6a9b2fd0a289c99328e7a 100644
--- a/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.scss
+++ b/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.scss
@@ -1,3 +1,5 @@
+@import "src/variables";
+
 #definition-container {
   background-color: #ffffff;
   border-radius: 10px;
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.scss b/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.scss
index b8706a8d76f1e8a51c7743a14eeb78cb53863c37..51ecd7186787cf87ce7bda26d7d7d0672db34da0 100644
--- a/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.scss
+++ b/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.scss
@@ -1,3 +1,5 @@
+@import "src/variables";
+
 div {
   width: 100%;
   padding: 0.5rem 3rem;
@@ -6,12 +8,12 @@ div {
 }
 
 .timestamp {
-  color: #757575;
+  color: $timestamp-text-color;
 }
 
 #request-id-and-status {
   grid-template-areas: "id status";
-  border-bottom: 1px solid #d4d4d4;
+  border-bottom: 1px solid $request-status-page-border-light;
 }
 #request-id {
   grid-area: id;
@@ -22,7 +24,7 @@ div {
 }
 #created-and-updated-timestamps {
   grid-template-areas: "created updated";
-  border-bottom: 1px solid #bdbdbd;
+  border-bottom: 1px solid $request-status-page-border-dark;
 }
 #created-time {
   justify-self: left;
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/status-buttons/running-status-button/running-status-button.component.scss b/apps/web/src/app/workspaces/components/capability-request/components/status-buttons/running-status-button/running-status-button.component.scss
index acae8573cdb24ae896d2ff9a8316929aa6cd9765..87fb7c3ec88d6ece4e66d9b545e5656344feec7f 100644
--- a/apps/web/src/app/workspaces/components/capability-request/components/status-buttons/running-status-button/running-status-button.component.scss
+++ b/apps/web/src/app/workspaces/components/capability-request/components/status-buttons/running-status-button/running-status-button.component.scss
@@ -1,6 +1,9 @@
+@import "src/variables";
+
 .running-status {
   // Request status is running
   // Green with play icon
+  background: $running-status-bg-gradient;
 }
 #request-status-button {
   grid-area: status;
diff --git a/apps/web/src/styles.scss b/apps/web/src/styles.scss
index 895855b09cad6c9b1877356ff4594e4dc9006919..b7d9acf625e8cf57d26df6c0cfea1eec59ac946b 100644
--- a/apps/web/src/styles.scss
+++ b/apps/web/src/styles.scss
@@ -1,4 +1,5 @@
 @import "~bootstrap/scss/bootstrap.scss";
+//@import "src/variables.scss";
 
 * {
   font-family: "Lato", Helvetica, Arial, sans-serif;