diff --git a/src/prototypes/enterprise-dashboards/school_active.html b/src/prototypes/enterprise-dashboards/school_active.html
index 2d60326..50707e2 100644
--- a/src/prototypes/enterprise-dashboards/school_active.html
+++ b/src/prototypes/enterprise-dashboards/school_active.html
@@ -58,7 +58,7 @@ <h1 class="sharpen-heading-2xl">
           </li>
         </ul>
 
-        <h2 class="sharpen-heading-lg">Active students</h2>
+        <h2 class="sharpen-heading-lg">258 active students</h2>
 
         <div class="row sharpen-mb-lg">
           <div class="col-lg-4">
diff --git a/src/prototypes/enterprise-dashboards/school_outcomes.html b/src/prototypes/enterprise-dashboards/school_outcomes.html
new file mode 100644
index 0000000..6ea41bb
--- /dev/null
+++ b/src/prototypes/enterprise-dashboards/school_outcomes.html
@@ -0,0 +1,440 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <title>Sharpen Prototype: Enterprise Dashboards - School - Outcomes</title>
+    <link rel="stylesheet" href="../build/kezuri.css" />
+    <script type="module" src="../build/kezuri.esm.js"></script>
+    <script nomodule src="../build/kezuri.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-error-bars@4.4.4/build/index.umd.min.js"></script>
+
+    <link rel="stylesheet" href="../enterprise-management/enterprise-layout.css" />
+    <link rel="stylesheet" href="dashboards.css" />
+  </head>
+  <body>
+
+    <div class="sharpen-enterprise-container">
+      <div class="sharpen-enterprise-navigation">
+        <a class="brand" href="#"><img src="../build/assets/images/brand/sharpen_logo_ivory.png" /></a>
+
+        <h1 class="district sharpen-heading-sm">Public Schools of Brookline</h1>
+
+        <nav class="sharpen-mb-md">
+          <sharpen-nav-link icon="near_me" name="District" href="district_show.html"></sharpen-nav-link>
+        </nav>
+
+        <nav class="school-links">
+          <h2 class="school sharpen-heading-sans-sm">Runkle School</h2>
+          <sharpen-nav-link selected icon="info" name="About" href="school_show.html"></sharpen-nav-link>
+          <sharpen-nav-link icon="supervisor_account" name="Staff" href="school_staff.html"></sharpen-nav-link>
+          <sharpen-nav-link icon="meeting_room" name="Classrooms" href="school_classes.html"></sharpen-nav-link>
+          <sharpen-nav-link icon="face" name="Students" href="school_students.html"></sharpen-nav-link>
+          <sharpen-nav-link icon="shield_person" name="Admins" href="school_administrators.html"></sharpen-nav-link>
+        </nav>
+
+        <nav class="support-links">
+          <sharpen-nav-link icon="account_box" name="Dante Cardigan" href="javascript:void();"></sharpen-nav-link>  
+          <sharpen-nav-link icon="help" name="Support" href="javascript:void();"></sharpen-nav-link>  
+          <sharpen-nav-link icon="logout" name="Log Out" href="javascript:void();"></sharpen-nav-link>  
+        </nav>
+        
+      </div>
+      <main>
+        
+        <h1 class="sharpen-heading-2xl">
+          <a href="schools.html">Schools</a> &rsaquo; Runkle School
+        </h1>
+
+        <ul class="sharpen-tabs sharpen-mb-lg">
+          <li class="tab">
+            <a href="school_active.html"><i class="sharpen-icon">bar_chart</i>Current Status</a>  
+          </li>
+          <li class="tab selected">
+            <a href="school_outcomes.html"><i class="sharpen-icon">verified</i>Outcomes</a>
+          </li>
+        </ul>
+
+        <h2 class="sharpen-heading-lg">All students, when they start Sharpen Reading</h2>
+
+        <div class="row sharpen-mb-lg">
+          <div class="col-lg-4">
+            <sharpen-card border="gray" padding="medium" class="card-students-by-grade">
+              <dl class="sharpen-list">
+                <dt>By grade</dt>
+              </dl>
+              <div style="height:200px;">
+                <canvas id="viz-students-by-grade" class="sharpen-mt-md"></canvas>
+              </div>
+            </sharpen-card>
+          </div>
+          <div class="col-lg-4">
+            <sharpen-card border="gray" padding="medium" class="card-students-by-reading-risk-level">
+              <dl class="sharpen-list">
+                <dt>By reading risk level</dt>
+              </dl>
+              <div style="height:200px;">
+                <canvas id="viz-students-by-reading-risk-level" class="sharpen-mt-md"></canvas>
+              </div>
+            </sharpen-card>
+          </div>
+          <div class="col-lg-4">
+            <sharpen-card border="gray" padding="medium" class="card-students-by-session-target">
+              <dl class="sharpen-list">
+                <dt>By weekly session target</dt>
+              </dl>
+              <div style="height:200px;">
+                <canvas id="viz-students-by-session-target" class="sharpen-mt-md"></canvas>
+              </div>
+            </sharpen-card>
+          </div>
+        </div>
+
+        <h2 class="sharpen-heading-lg">Student achievement using Sharpen Reading</h2>
+        <sharpen-card border="gray" padding="medium" class="card-student-achievement sharpen-mb-md">
+          <dl class="sharpen-list">
+            <dt>Average grade level improvement per month of usage</dt>
+          </dl>
+          <div style="height:250px;">
+            <canvas id="viz-improvement-by-month" class="sharpen-mt-md"></canvas>
+          </div>
+        </sharpen-card>
+
+        <sharpen-card border="gray" padding="medium">
+          <dl class="sharpen-list">
+            <dt>Average skill mastery by month of usage</dt>
+          </dl>
+
+          <div class="sharpen-text-xs sharpen-mb-md"><em>Target: Student masters 70% of items encountered</em></div>
+
+          <div style="height: 200px;">
+            <canvas id="viz-mastery-by-skill" class="sharpen-mt-md"></canvas>
+          </div>
+        </sharpen-card>
+
+      </main>
+    </div>
+
+    <script>
+      // Register the plugin
+      Chart.register(ChartDataLabels);
+
+      Chart.defaults.font.family = 'Sharpen Sans';
+
+      const gradeCtx = document.getElementById('viz-students-by-grade');
+
+      new Chart(gradeCtx, {
+        type: 'bar',
+        data: {
+          labels: ['Grade 1', 'Grade 2', 'Grade 3', 'Grade 4', 'Grade 5'],
+          datasets: [{
+            label: 'Number of Students',
+            data: [25, 47, 77, 65, 44],
+            backgroundColor: 'rgba(128, 128, 128, 0.7)', // Gray color
+            borderWidth: 0
+          }]
+        },
+        options: {
+          maintainAspectRatio: false,
+          indexAxis: 'y', // This makes the chart horizontal
+          scales: {
+            x: {
+              beginAtZero: true,
+              grid: {
+                color: '#e5e5e5'
+              }
+            },
+            y: {
+              grid: {
+                display: false
+              }
+            }
+          },
+          plugins: {
+            legend: {
+              display: false
+            },
+            datalabels: {
+              anchor: 'end',
+              align: 'end',
+              formatter: (value) => `${value}`,
+              color: '#000',
+              font: {
+                size: 10
+              }
+            }
+          }
+        }
+      });
+
+      const readingRiskCtx = document.getElementById('viz-students-by-reading-risk-level');
+
+      new Chart(readingRiskCtx, {
+        type: 'bar',
+        data: {
+          labels: ['At Grade\nLevel', '1 Grade\nBehind', '2 Grades\nBehind', '3+ Grades\nBehind'],
+          datasets: [{
+            label: 'Number of Students',
+            data: [34, 74, 109, 41],
+            backgroundColor: [
+              '#68A362', // Green
+              '#F2C94C', // Yellow
+              '#F2994A', // Orange
+              '#B71C1C'  // Red
+            ],
+            borderWidth: 0
+          }]
+        },
+        options: {
+          maintainAspectRatio: false,
+          indexAxis: 'y', // This makes the chart horizontal
+          scales: {
+            x: {
+              beginAtZero: true,
+              grid: {
+                color: '#e5e5e5'
+              }
+            },
+            y: {
+              grid: {
+                display: false
+              },
+              ticks: {
+                callback: function(value) {
+                  return this.getLabelForValue(value).split('\n');
+                }
+              }
+            }
+          },
+          plugins: {
+            legend: {
+              display: false
+            },
+            datalabels: {
+              anchor: 'end',
+              align: 'end',
+              formatter: (value) => `${value}`,
+              color: function(context) {
+                return context.dataset.backgroundColor[context.dataIndex];
+              }
+            }
+          }
+        }
+      });
+
+      const sessionTargetCtx = document.getElementById('viz-students-by-session-target');
+
+      new Chart(sessionTargetCtx, {
+        type: 'bar',
+        data: {
+          labels: ['2 sessions', '3 sessions', '4 sessions'],
+          datasets: [{
+            label: 'Number of Students',
+            data: [77, 120, 61],
+            backgroundColor: 'rgba(128, 128, 128, 0.7)', // Gray color
+            borderWidth: 0
+          }]
+        },
+        options: {
+          maintainAspectRatio: false,
+          indexAxis: 'y', // This makes the chart horizontal
+          scales: {
+            x: {
+              beginAtZero: true,
+              grid: {
+                color: '#e5e5e5'
+              }
+            },
+            y: {
+              grid: {
+                display: false
+              }
+            }
+          },
+          plugins: {
+            legend: {
+              display: false
+            },
+            datalabels: {
+              anchor: 'end',
+              align: 'end',
+              formatter: (value) => `${value}`,
+              color: '#000',
+              font: {
+                size: 10
+              }
+            }
+          }
+        }
+      });
+
+      const improvementCtx = document.getElementById('viz-improvement-by-month');
+
+      new Chart(improvementCtx, {
+        type: 'lineWithErrorBars',
+        data: {
+          labels: ['1 month', '2 months', '3 months', '4 months', '5 months', '6+ months'],
+          datasets: [
+            {
+              label: 'Proper Dosage',
+              data: [
+                { y: 0.88, yMin: 0.73, yMax: 1.03 },
+                { y: 1.09, yMin: 0.91, yMax: 1.27 },
+                { y: 1.53, yMin: 1.27, yMax: 1.79 },
+                { y: 1.87, yMin: 1.56, yMax: 2.18 },
+                { y: 1.89, yMin: 1.57, yMax: 2.21 },
+                { y: 2.30, yMin: 1.92, yMax: 2.68 }
+              ],
+              backgroundColor: '#68A362', // Green
+              borderColor: '#68A362', // Green
+              borderWidth: 2,
+              pointRadius: 5,
+              errorBarColor: 'rgba(128, 128, 128, 0.5)', // Light grey
+              errorBarWhiskerColor: 'rgba(128, 128, 128, 0.5)'
+            },
+            {
+              label: 'Below Dosage',
+              data: [
+                { y: 0.15, yMin: 0.00, yMax: 0.30 },
+                { y: 0.18, yMin: 0.00, yMax: 0.36 },
+                { y: 0.26, yMin: 0.00, yMax: 0.52 },
+                { y: 0.31, yMin: 0.00, yMax: 0.62 },
+                { y: 0.32, yMin: 0.00, yMax: 0.64 },
+                { y: 0.38, yMin: 0.00, yMax: 0.76 }
+              ],
+              backgroundColor: '#808080', // Gray
+              borderColor: '#808080', // Gray
+              borderWidth: 2,
+              pointRadius: 5,
+              errorBarColor: 'rgba(128, 128, 128, 0.5)', // Light grey
+              errorBarWhiskerColor: 'rgba(128, 128, 128, 0.5)'
+            }
+          ]
+        },
+        options: {
+          maintainAspectRatio: false,
+          scales: {
+            y: {
+              beginAtZero: true,
+              min: 0,
+              max: 3, // Adjusted to add more space
+              grid: {
+                color: '#e5e5e5'
+              }
+            },
+            x: {
+              grid: {
+                display: false
+              },
+              offset: true // Adds padding to the x-axis
+            }
+          },
+          plugins: {
+            legend: {
+              position: 'left'
+            },
+            datalabels: {
+              anchor: 'end',
+              align: 'top',
+              formatter: (value) => `+${value.y.toFixed(2)}`,
+              color: function(context) {
+                return context.dataset.borderColor;
+              },
+              font: {
+                size: 12
+              }
+            }
+          }
+        }
+      });
+
+      // Mastery by skill chart
+      const masteryCtx = document.getElementById('viz-mastery-by-skill');
+
+      new Chart(masteryCtx, {
+        type: 'bar',
+        data: {
+          labels: ['Month 1', 'Month 2', 'Month 3', 'Month 4', 'Month 5', 'Month 6'],
+          datasets: [
+            {
+              label: 'Letter Sounds',
+              data: [96, 63, 74, 64, 91, 80],
+              backgroundColor: '#2E5E29',
+              borderColor: 'transparent',
+              borderWidth: 1,
+            },
+            {
+              label: 'Spelling',
+              data: [89, 88, 81, 96, 84, 83],
+              backgroundColor: '#68A362',
+              borderColor: 'transparent',
+              borderWidth: 1,
+            },
+            {
+              label: 'Words',
+              data: [77, 82, 69, 66, 79, 93],
+              backgroundColor: '#B8DBAA',
+              borderColor: 'transparent',
+              borderWidth: 1,
+            }
+          ]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          scales: {
+            y: {
+              beginAtZero: true,
+              max: 100,
+              grid: {
+                color: '#e5e5e5'
+              },
+              ticks: {
+                callback: value => `${value}%`
+              }
+            },
+            x: {
+              grid: {
+                display: false
+              }
+            }
+          },
+          plugins: {
+            legend: {
+              position: 'left',
+              align: 'middle',
+              labels: {
+                boxWidth: 12,
+                usePointStyle: true,
+                pointStyle: 'rect'
+              }
+            },
+            tooltip: {
+              callbacks: {
+                label: (context) => `${context.dataset.label}: ${context.raw}%`
+              }
+            },
+            annotation: {
+              annotations: {
+                line1: {
+                  type: 'line',
+                  yMin: 70,
+                  yMax: 70,
+                  borderColor: '#666666',
+                  borderWidth: 1,
+                  borderDash: [5, 5]
+                }
+              }
+            },
+            datalabels: {
+              display: false
+            }
+          }
+        }
+      });
+    </script>
+  </body>
+</html>
