diff --git a/js/components/forms/ccpo_approval.js b/js/components/forms/ccpo_approval.js
new file mode 100644
index 00000000..7fe245ed
--- /dev/null
+++ b/js/components/forms/ccpo_approval.js
@@ -0,0 +1,28 @@
+import textinput from '../text_input'
+
+export default {
+  name: 'ccpo-approval',
+
+  components: {
+    textinput
+  },
+
+  data: function () {
+    return {
+      approving: false,
+      denying: false
+    }
+  },
+
+  methods: {
+    setReview: function (e) {
+      if (e.target.value === 'approving') {
+        this.approving = true
+        this.denying = false
+      } else {
+        this.approving = false
+        this.denying = true
+      }
+    },
+  }
+}
diff --git a/js/index.js b/js/index.js
index f5e9613d..c6a4181c 100644
--- a/js/index.js
+++ b/js/index.js
@@ -16,6 +16,7 @@ import NewProject from './components/forms/new_project'
 import Modal from './mixins/modal'
 import selector from './components/selector'
 import BudgetChart from './components/charts/budget_chart'
+import CcpoApproval from './components/forms/ccpo_approval'
 
 Vue.use(VTooltip)
 
@@ -33,7 +34,8 @@ const app = new Vue({
     financial,
     NewProject,
     selector,
-    BudgetChart
+    BudgetChart,
+    CcpoApproval
   },
   mounted: function() {
     const modalOpen = document.querySelector("#modalOpen")