diff --git a/src/app/projects/project-outcome-alignment/project-outcome-alignment.coffee b/src/app/projects/project-outcome-alignment/project-outcome-alignment.coffee
index 3b45694da3..1d2c0e4811 100644
--- a/src/app/projects/project-outcome-alignment/project-outcome-alignment.coffee
+++ b/src/app/projects/project-outcome-alignment/project-outcome-alignment.coffee
@@ -1,50 +1,14 @@
-# Component not used
+# Deprecated wrapper for the legacy project-outcome-alignment component.
+# The outcomes feature source of truth is now:
+# projects/states/outcomes/outcomes.coffee
+#
+# This directive is kept temporarily as a thin wrapper to avoid breaking
+# any remaining references during transition. It should be removed once
+# all references are confirmed deleted.
 
 angular.module("doubtfire.projects.project-outcome-alignment", [])
 
 .directive("projectOutcomeAlignment", ->
   restrict: 'E'
   templateUrl: 'projects/project-outcome-alignment/project-outcome-alignment.tpl.html'
-  controller: ($scope, $rootScope, $timeout, outcomeService, alertService, analyticsService, Visualisation, newUnitService) ->
-    $scope.poaView = {
-      activeTab: 'list'
-    }
-    $scope.targets = outcomeService.calculateTargets($scope.unit, $scope.unit, $scope.unit.taskStatusFactor)
-    $scope.currentProgress = outcomeService.calculateProgress($scope.unit, $scope.project)
-
-    $scope.refreshCharts = Visualisation.refreshAll
-
-    refreshAlignmentData = ->
-      $scope.currentProgress.length = 0
-      $scope.currentProgress = _.extend $scope.currentProgress, outcomeService.calculateProgress($scope.unit, $scope.project)
-
-    # $scope.$watch 'project', ->
-    #   refreshAlignmentData()
-    #   $rootScope.$broadcast('ProgressUpdated')
-
-    # $scope.$watch 'project.tasks', ->
-    #   refreshAlignmentData()
-    #   $rootScope.$broadcast('ProgressUpdated')
-
-    $scope.selectTab = (tab) ->
-      if tab is 'progress'
-        if !$scope.classStats?
-          newUnitService.loadLearningProgressClassStats($scope.unit).subscribe({
-            next: (response) -> $scope.classStats = response
-            error: (response) ->
-              alertService.error( response, 6000)
-              $scope.classStats = {}
-          })
-      $scope.poaView.activeTab = tab
-      eventName = if tab is 'progress' then "View Learning Progress Tab" else "Reflect on Learning Tab"
-      $scope.refreshCharts()
-
-    # Default tab
-    $scope.selectTab('progress')
-
-    $scope.$on('UpdateAlignmentChart', ->
-      refreshAlignmentData()
-      $rootScope.$broadcast('ProgressUpdated')
-    )
-
 )
diff --git a/src/app/projects/projects.coffee b/src/app/projects/projects.coffee
index 8499f03af4..ae17a29d1d 100644
--- a/src/app/projects/projects.coffee
+++ b/src/app/projects/projects.coffee
@@ -1,5 +1,9 @@
+# Parent projects module.
+# Outcomes source of truth now lives in projects.states.outcomes.
+# project-outcome-alignment has been deprecated and removed from the
+# parent dependency list as part of outcomes consolidation.
+
 angular.module('doubtfire.projects', [
   'doubtfire.projects.states'
-  'doubtfire.projects.project-outcome-alignment'
   'doubtfire.projects.project-progress-dashboard'
 ])
diff --git a/src/app/projects/states/outcomes/outcomes.coffee b/src/app/projects/states/outcomes/outcomes.coffee
index d92214d086..e8994a20e2 100644
--- a/src/app/projects/states/outcomes/outcomes.coffee
+++ b/src/app/projects/states/outcomes/outcomes.coffee
@@ -1,4 +1,7 @@
-# Component not used
+# Source of truth for the outcomes feature.
+# This state owns the route, page-level logic, and template rendering.
+# Outcomes UI has been inlined into outcomes.tpl.html to remove duplicated
+# logic previously shared with project-outcome-alignment.
 
 angular.module('doubtfire.projects.states.outcomes', [])
 
@@ -22,9 +25,9 @@ angular.module('doubtfire.projects.states.outcomes', [])
   $scope.poaView = {
     activeTab: 'list'
   }
+
   $scope.targets = outcomeService.calculateTargets($scope.unit, $scope.unit, $scope.unit.taskStatusFactor)
   $scope.currentProgress = outcomeService.calculateProgress($scope.unit, $scope.project)
-
   $scope.refreshCharts = Visualisation.refreshAll
 
   refreshAlignmentData = ->
@@ -37,11 +40,11 @@ angular.module('doubtfire.projects.states.outcomes', [])
         newUnitService.loadLearningProgressClassStats($scope.unit).subscribe({
           next: (response) -> $scope.classStats = response
           error: (response) ->
-            alertService.error( response, 6000)
+            alertService.error(response, 6000)
             $scope.classStats = {}
         })
+
     $scope.poaView.activeTab = tab
-    eventName = if tab is 'progress' then "View Learning Progress Tab" else "Reflect on Learning Tab"
     $scope.refreshCharts()
 
   # Default tab
diff --git a/src/app/projects/states/outcomes/outcomes.tpl.html b/src/app/projects/states/outcomes/outcomes.tpl.html
index c247911d94..6bc944e8ca 100644
--- a/src/app/projects/states/outcomes/outcomes.tpl.html
+++ b/src/app/projects/states/outcomes/outcomes.tpl.html
@@ -1,6 +1,59 @@
 <div class="container" ng-show="unit.ilos.length > 0">
-  <project-outcome-alignment></project-outcome-alignment>
+  <tabset>
+    <tab ng-click="selectTab('progress')">
+      <tab-heading>
+        Outcome Achievement
+      </tab-heading>
+    </tab>
+    <tab ng-click="selectTab('reflect')">
+      <tab-heading>
+        Outcome Alignment
+      </tab-heading>
+    </tab>
+  </tabset><!--/tab-selector-->
+
+  <div class="panel panel-default" ng-show="poaView.activeTab == 'progress'">
+    <div class="panel-heading">
+      <h3 class="panel-title">
+        Outcome Achievement
+      </h3>
+    </div>
+    <div class="panel-body view-alignment">
+      Overall progress on unit outcome are shown below
+    </div>
+    <task-ilo-alignment-viewer
+      project="project"
+      unit="unit"
+      class-stats="classStats"
+      current-progress="currentProgress"
+      summary-only="true"></task-ilo-alignment-viewer>
+  </div><!--/achievement-panel-->
+
+  <div class="panel panel-default clearfix" ng-show="poaView.activeTab == 'progress'">
+    <div class="panel-heading">
+      <h3 class="panel-title">
+        Visualise Achievement
+      </h3>
+    </div>
+    <div class="panel-body">
+      Your achievement with all ILOs are visualised below
+    </div>
+    <achievement-custom-bar-chart
+      show-legend="false"
+      unit="unit"
+      project="project"
+      class="col-sm-12">
+    </achievement-custom-bar-chart>
+  </div><!--/visualisation-achievement-->
+
+  <div ng-show="poaView.activeTab == 'reflect'">
+    <task-ilo-alignment-editor
+      show-csv="false"
+      unit="unit"
+      project="project"></task-ilo-alignment-editor>
+  </div><!--ilo-editor-->
 </div><!--/ilos-->
+
 <div class="container" ng-hide="unit.ilos.length > 0">
   <div class="large-notice-block">
     <i class="fa fa-2x fa-graduation-cap"></i>
@@ -10,4 +63,3 @@
     There are no learning outcomes for this unit.
   </div>
 </div><!--/no-ilos-->
-