diff --git a/backend/src/database/DB.go b/backend/src/database/DB.go
index c81a378da..ce80ac4cb 100644
--- a/backend/src/database/DB.go
+++ b/backend/src/database/DB.go
@@ -104,6 +104,7 @@ func MigrateTesting(db *gorm.DB) {
 		&models.Role{},
 		&models.User{},
 		&models.LoginMetrics{},
+		&models.LoginActivity{},
 		&models.Facility{},
 		&models.ProviderPlatform{},
 		&models.ProviderUserMapping{},
diff --git a/backend/src/database/users.go b/backend/src/database/users.go
index e111f1789..15d58b2f4 100644
--- a/backend/src/database/users.go
+++ b/backend/src/database/users.go
@@ -468,6 +468,19 @@ func (db *DB) GetTotalUsers(args *models.QueryContext, facilityId *uint) (int64,
 	return totalResidents, nil
 }
 
+func (db *DB) GetTotalAdmins(args *models.QueryContext, facilityId *uint) (int64, error) {
+	var totalAdmins int64
+	staffRoles := []models.UserRole{models.FacilityAdmin, models.DepartmentAdmin}
+	tx := db.WithContext(args.Ctx).Model(&models.User{}).Where("role IN ?", staffRoles)
+	if facilityId != nil {
+		tx = tx.Where("facility_id = ?", *facilityId)
+	}
+	if err := tx.Count(&totalAdmins).Error; err != nil {
+		return 0, newGetRecordsDBError(err, "users")
+	}
+	return totalAdmins, nil
+}
+
 func (db *DB) GetLoginActivity(args *models.QueryContext, start, end *time.Time, facilityID *uint) ([]models.LoginActivity, error) {
 	acitvity := make([]models.LoginActivity, 0, 3)
 	sql := `SELECT time_interval, total_logins
@@ -492,6 +505,106 @@ func (db *DB) GetLoginActivity(args *models.QueryContext, start, end *time.Time,
 	return acitvity, nil
 }
 
+func (db *DB) GetDailyLoginActivity(args *models.QueryContext, start, end *time.Time, facilityID *uint) ([]models.DailyLoginCount, error) {
+	activities := make([]models.LoginActivity, 0)
+	tx := db.WithContext(args.Ctx).Model(&models.LoginActivity{}).Select("time_interval, total_logins")
+	if facilityID != nil {
+		tx = tx.Where("facility_id = ?", *facilityID)
+	}
+	if start != nil && end != nil {
+		tx = tx.Where("time_interval >= ? AND time_interval < ?", *start, *end)
+	}
+	if err := tx.Find(&activities).Error; err != nil {
+		return nil, newGetRecordsDBError(err, "login_activity")
+	}
+	return bucketLoginsByDay(activities), nil
+}
+
+func bucketLoginsByDay(activities []models.LoginActivity) []models.DailyLoginCount {
+	totals := make(map[string]int64)
+	days := make([]string, 0)
+	for _, activity := range activities {
+		day := activity.TimeInterval.UTC().Format(time.DateOnly)
+		if _, seen := totals[day]; !seen {
+			days = append(days, day)
+		}
+		totals[day] += activity.TotalLogins
+	}
+	slices.Sort(days)
+	trend := make([]models.DailyLoginCount, 0, len(days))
+	for _, day := range days {
+		trend = append(trend, models.DailyLoginCount{Date: day, TotalLogins: totals[day]})
+	}
+	return trend
+}
+
+func (db *DB) GetFacilityEngagementComparison(args *models.QueryContext, start, end *time.Time) ([]models.FacilityEngagement, error) {
+	facilities := make([]models.Facility, 0)
+	if err := db.WithContext(args.Ctx).Order("name ASC").Find(&facilities).Error; err != nil {
+		return nil, newGetRecordsDBError(err, "facilities")
+	}
+
+	type facilityCount struct {
+		FacilityID uint
+		Count      int64
+	}
+	toMap := func(rows []facilityCount) map[uint]int64 {
+		m := make(map[uint]int64, len(rows))
+		for _, row := range rows {
+			m[row.FacilityID] = row.Count
+		}
+		return m
+	}
+
+	registered := make([]facilityCount, 0, len(facilities))
+	if err := db.WithContext(args.Ctx).Model(&models.User{}).
+		Select("facility_id, count(*) as count").
+		Where("role = ?", models.Student).
+		Group("facility_id").
+		Find(&registered).Error; err != nil {
+		return nil, newGetRecordsDBError(err, "users")
+	}
+
+	active := make([]facilityCount, 0, len(facilities))
+	activeTx := db.WithContext(args.Ctx).Model(&models.User{}).
+		Select("users.facility_id, count(*) as count").
+		Joins("JOIN login_metrics ON login_metrics.user_id = users.id").
+		Where("users.role = ?", models.Student)
+	if start != nil && end != nil {
+		activeTx = activeTx.Where("login_metrics.last_login >= ? AND login_metrics.last_login < ?", *start, *end)
+	}
+	if err := activeTx.Group("users.facility_id").Find(&active).Error; err != nil {
+		return nil, newGetRecordsDBError(err, "users")
+	}
+
+	logins := make([]facilityCount, 0, len(facilities))
+	loginsTx := db.WithContext(args.Ctx).Model(&models.LoginActivity{}).
+		Select("facility_id, coalesce(sum(total_logins), 0) as count")
+	if start != nil && end != nil {
+		loginsTx = loginsTx.Where("time_interval >= ? AND time_interval < ?", *start, *end)
+	}
+	if err := loginsTx.Group("facility_id").Find(&logins).Error; err != nil {
+		return nil, newGetRecordsDBError(err, "login_activity")
+	}
+
+	registeredByFacility := toMap(registered)
+	activeByFacility := toMap(active)
+	loginsByFacility := toMap(logins)
+
+	comparison := make([]models.FacilityEngagement, 0, len(facilities))
+	for i := range facilities {
+		facilityID := facilities[i].ID
+		comparison = append(comparison, models.FacilityEngagement{
+			FacilityID:   facilityID,
+			FacilityName: facilities[i].Name,
+			Registered:   registeredByFacility[facilityID],
+			Active:       activeByFacility[facilityID],
+			Logins:       loginsByFacility[facilityID],
+		})
+	}
+	return comparison, nil
+}
+
 func (db *DB) GetUserSessionEngagement(userID int, days int) ([]models.SessionEngagement, error) {
 	var (
 		sessionEngagement []models.SessionEngagement
diff --git a/backend/src/handlers/dashboard.go b/backend/src/handlers/dashboard.go
index c63b1645e..7d573cf25 100644
--- a/backend/src/handlers/dashboard.go
+++ b/backend/src/handlers/dashboard.go
@@ -19,6 +19,8 @@ func (srv *Server) registerDashboardRoutes() []routeDef {
 	resolver := UserRoleResolver("id")
 	return []routeDef{
 		newAdminRoute("GET /api/department-metrics", srv.handleDepartmentMetrics),
+		newAdminRoute("GET /api/department-metrics/login-trend", srv.handleDepartmentLoginTrend),
+		newAdminRoute("GET /api/department-metrics/facility-comparison", srv.handleFacilityEngagementComparison),
 		newAdminRoute("GET /api/dashboard/class-metrics", srv.handleClassDashboardMetrics),
 		newAdminRoute("GET /api/dashboard/facility-health", srv.handleFacilityHealthSummary),
 		newAdminRoute("GET /api/users/{id}/admin-layer2", srv.handleAdminLayer2),
@@ -220,6 +222,10 @@ func (srv *Server) handleDepartmentMetrics(w http.ResponseWriter, r *http.Reques
 		if err != nil {
 			return newDatabaseServiceError(err)
 		}
+		totalAdmins, err := srv.Db.GetTotalAdmins(&args, facilityId)
+		if err != nil {
+			return newDatabaseServiceError(err)
+		}
 		newResidentsAdded, err := srv.Db.NewUsersInTimePeriod(&args, start, end, facilityId)
 		if err != nil {
 			return newDatabaseServiceError(err)
@@ -242,6 +248,7 @@ func (srv *Server) handleDepartmentMetrics(w http.ResponseWriter, r *http.Reques
 			PercentActive:     percentActive,
 			PercentInactive:   percentInactive,
 			TotalResidents:    totalResidents,
+			TotalAdmins:       totalAdmins,
 			Facility:          facilityName,
 			NewResidentsAdded: newResidentsAdded,
 			PeakLoginTimes:    loginTimes,
@@ -271,6 +278,52 @@ func (srv *Server) handleDepartmentMetrics(w http.ResponseWriter, r *http.Reques
 	return writeJsonResponse(w, http.StatusOK, cachedData)
 }
 
+func (srv *Server) handleDepartmentLoginTrend(w http.ResponseWriter, r *http.Request, log sLog) error {
+	args := srv.getQueryContext(r)
+	claims := r.Context().Value(ClaimsKey).(*Claims)
+	facility := r.URL.Query().Get("facility")
+	var facilityID *uint
+	switch {
+	case facility == "all" && claims.canSwitchFacility():
+		facilityID = nil
+	case facility != "" && facility != "all" && claims.canSwitchFacility():
+		facilityIdInt, err := strconv.Atoi(facility)
+		if err != nil {
+			return newInvalidIdServiceError(err, "facility")
+		}
+		ref := uint(facilityIdInt)
+		facilityID = &ref
+	default:
+		facilityID = &args.FacilityID
+	}
+	start, end, _, err := parseDateRangeRequest(r)
+	if err != nil {
+		return err
+	}
+	trend, err := srv.Db.GetDailyLoginActivity(&args, start, end, facilityID)
+	if err != nil {
+		return newDatabaseServiceError(err)
+	}
+	return writeJsonResponse(w, http.StatusOK, trend)
+}
+
+func (srv *Server) handleFacilityEngagementComparison(w http.ResponseWriter, r *http.Request, log sLog) error {
+	claims := r.Context().Value(ClaimsKey).(*Claims)
+	if !claims.canSwitchFacility() {
+		return newUnauthorizedServiceError()
+	}
+	args := srv.getQueryContext(r)
+	start, end, _, err := parseDateRangeRequest(r)
+	if err != nil {
+		return err
+	}
+	comparison, err := srv.Db.GetFacilityEngagementComparison(&args, start, end)
+	if err != nil {
+		return newDatabaseServiceError(err)
+	}
+	return writeJsonResponse(w, http.StatusOK, comparison)
+}
+
 func (srv *Server) handleClassDashboardMetrics(w http.ResponseWriter, r *http.Request, log sLog) error {
 	args := srv.getQueryContext(r)
 	facility := r.URL.Query().Get("facility")
diff --git a/backend/src/models/logins.go b/backend/src/models/logins.go
index 2862433c7..2d8f2d550 100644
--- a/backend/src/models/logins.go
+++ b/backend/src/models/logins.go
@@ -22,6 +22,19 @@ type LoginActivity struct {
 
 func (LoginActivity) TableName() string { return "login_activity" }
 
+type DailyLoginCount struct {
+	Date        string `json:"date"`
+	TotalLogins int64  `json:"total_logins"`
+}
+
+type FacilityEngagement struct {
+	FacilityID   uint   `json:"facility_id"`
+	FacilityName string `json:"facility_name"`
+	Registered   int64  `json:"registered"`
+	Active       int64  `json:"active"`
+	Logins       int64  `json:"logins"`
+}
+
 type UserSessionTracking struct {
 	ID              int64     `gorm:"primaryKey;autoIncrement" json:"id"`
 	UserID          uint      `gorm:"not null" json:"user_id"`
diff --git a/backend/tests/integration/department_metrics_test.go b/backend/tests/integration/department_metrics_test.go
new file mode 100644
index 000000000..be8a12b0c
--- /dev/null
+++ b/backend/tests/integration/department_metrics_test.go
@@ -0,0 +1,58 @@
+package integration
+
+import (
+	"context"
+	"testing"
+
+	"UnlockEdv2/src/models"
+
+	"github.com/stretchr/testify/require"
+)
+
+// TestGetTotalAdmins verifies the staff-account count that backs the
+// "N staff accounts · not counted" sub-label on the Registered Residents card:
+// only admin/staff roles are counted, residents are excluded, and the count is
+// scoped to the requested facility.
+func TestGetTotalAdmins(t *testing.T) {
+	env := SetupTestEnv(t)
+	defer env.CleanupTestEnv()
+
+	facility, err := env.CreateTestFacility("Staff Count Facility")
+	require.NoError(t, err)
+	otherFacility, err := env.CreateTestFacility("Other Facility")
+	require.NoError(t, err)
+
+	// Residents at the facility — must NOT be counted as staff.
+	_, err = env.CreateTestUser("res1", models.Student, facility.ID, "r1")
+	require.NoError(t, err)
+	_, err = env.CreateTestUser("res2", models.Student, facility.ID, "r2")
+	require.NoError(t, err)
+
+	// Staff at the facility — counted.
+	_, err = env.CreateTestUser("fadmin1", models.FacilityAdmin, facility.ID, "")
+	require.NoError(t, err)
+	_, err = env.CreateTestUser("fadmin2", models.FacilityAdmin, facility.ID, "")
+	require.NoError(t, err)
+	_, err = env.CreateTestUser("dadmin", models.DepartmentAdmin, facility.ID, "")
+	require.NoError(t, err)
+
+	// System admin at the facility — platform-wide operator, NOT facility staff,
+	// so it must be excluded from the count.
+	_, err = env.CreateTestUser("sysadmin", models.SystemAdmin, facility.ID, "")
+	require.NoError(t, err)
+
+	// Staff at a different facility — must be excluded when scoped.
+	_, err = env.CreateTestUser("otheradmin", models.FacilityAdmin, otherFacility.ID, "")
+	require.NoError(t, err)
+
+	args := &models.QueryContext{Ctx: context.Background()}
+
+	scoped, err := env.DB.GetTotalAdmins(args, &facility.ID)
+	require.NoError(t, err)
+	require.Equal(t, int64(3), scoped, "should count only the 3 facility/department staff at the scoped facility, excluding residents, system admins, and other-facility staff")
+
+	// Residents are still counted as residents, never as staff.
+	residents, err := env.DB.GetTotalUsers(args, &facility.ID)
+	require.NoError(t, err)
+	require.Equal(t, int64(2), residents, "resident total should be unaffected by staff accounts")
+}
diff --git a/backend/tests/integration/facility_comparison_test.go b/backend/tests/integration/facility_comparison_test.go
new file mode 100644
index 000000000..506caa600
--- /dev/null
+++ b/backend/tests/integration/facility_comparison_test.go
@@ -0,0 +1,72 @@
+package integration
+
+import (
+	"UnlockEdv2/src/handlers"
+	"UnlockEdv2/src/models"
+	"net/http"
+	"testing"
+	"time"
+
+	"github.com/stretchr/testify/require"
+)
+
+func TestFacilityEngagementComparison(t *testing.T) {
+	env := SetupTestEnv(t)
+	defer env.CleanupTestEnv()
+
+	facilityA, err := env.CreateTestFacility("Comparison Facility A")
+	require.NoError(t, err)
+	facilityB, err := env.CreateTestFacility("Comparison Facility B")
+	require.NoError(t, err)
+
+	inRange := time.Date(2026, 1, 15, 10, 0, 0, 0, time.UTC)
+
+	// Facility A: 2 registered students, 1 active (logged in during range), 10 logins
+	a1, err := env.CreateTestUser("aactive", models.Student, facilityA.ID, "")
+	require.NoError(t, err)
+	_, err = env.CreateTestUser("ainactive", models.Student, facilityA.ID, "")
+	require.NoError(t, err)
+	require.NoError(t, env.DB.Create(&models.LoginMetrics{UserID: a1.ID, Total: 4, LastLogin: inRange}).Error)
+	require.NoError(t, env.DB.Create(&models.LoginActivity{TimeInterval: inRange, FacilityID: facilityA.ID, TotalLogins: 10}).Error)
+
+	// Facility B: 1 registered student, 1 active, 4 logins
+	b1, err := env.CreateTestUser("bactive", models.Student, facilityB.ID, "")
+	require.NoError(t, err)
+	require.NoError(t, env.DB.Create(&models.LoginMetrics{UserID: b1.ID, Total: 2, LastLogin: inRange}).Error)
+	require.NoError(t, env.DB.Create(&models.LoginActivity{TimeInterval: inRange, FacilityID: facilityB.ID, TotalLogins: 4}).Error)
+
+	rows := NewRequest[[]models.FacilityEngagement](env.Client, t, http.MethodGet,
+		"/api/department-metrics/facility-comparison?start_date=2026-01-15&end_date=2026-01-16", nil).
+		WithTestClaims(&handlers.Claims{Role: models.SystemAdmin, FacilityID: facilityA.ID}).
+		Do().
+		ExpectStatus(http.StatusOK).
+		GetData()
+
+	byID := make(map[uint]models.FacilityEngagement, len(rows))
+	for _, row := range rows {
+		byID[row.FacilityID] = row
+	}
+
+	require.Equal(t, models.FacilityEngagement{
+		FacilityID: facilityA.ID, FacilityName: "Comparison Facility A",
+		Registered: 2, Active: 1, Logins: 10,
+	}, byID[facilityA.ID])
+	require.Equal(t, models.FacilityEngagement{
+		FacilityID: facilityB.ID, FacilityName: "Comparison Facility B",
+		Registered: 1, Active: 1, Logins: 4,
+	}, byID[facilityB.ID])
+}
+
+func TestFacilityEngagementComparison_ForbiddenForFacilityAdmin(t *testing.T) {
+	env := SetupTestEnv(t)
+	defer env.CleanupTestEnv()
+
+	facility, err := env.CreateTestFacility("Solo Facility")
+	require.NoError(t, err)
+
+	NewRequest[[]models.FacilityEngagement](env.Client, t, http.MethodGet,
+		"/api/department-metrics/facility-comparison?start_date=2026-01-15&end_date=2026-01-16", nil).
+		WithTestClaims(&handlers.Claims{Role: models.FacilityAdmin, FacilityID: facility.ID}).
+		Do().
+		ExpectStatus(http.StatusUnauthorized)
+}
diff --git a/backend/tests/integration/login_trend_test.go b/backend/tests/integration/login_trend_test.go
new file mode 100644
index 000000000..08fd93e2b
--- /dev/null
+++ b/backend/tests/integration/login_trend_test.go
@@ -0,0 +1,72 @@
+package integration
+
+import (
+	"UnlockEdv2/src/handlers"
+	"UnlockEdv2/src/models"
+	"net/http"
+	"strconv"
+	"testing"
+	"time"
+
+	"github.com/stretchr/testify/require"
+)
+
+func TestDepartmentLoginTrend(t *testing.T) {
+	env := SetupTestEnv(t)
+	defer env.CleanupTestEnv()
+
+	facility, err := env.CreateTestFacility("Trend Facility")
+	require.NoError(t, err)
+
+	rows := []models.LoginActivity{
+		{TimeInterval: time.Date(2026, 1, 15, 9, 0, 0, 0, time.UTC), FacilityID: facility.ID, TotalLogins: 5},
+		{TimeInterval: time.Date(2026, 1, 15, 14, 0, 0, 0, time.UTC), FacilityID: facility.ID, TotalLogins: 7},
+		{TimeInterval: time.Date(2026, 1, 16, 10, 0, 0, 0, time.UTC), FacilityID: facility.ID, TotalLogins: 3},
+	}
+	for i := range rows {
+		require.NoError(t, env.DB.Create(&rows[i]).Error)
+	}
+
+	endpoint := "/api/department-metrics/login-trend?facility=" +
+		strconv.Itoa(int(facility.ID)) + "&start_date=2026-01-15&end_date=2026-01-16"
+
+	resp := NewRequest[[]models.DailyLoginCount](env.Client, t, http.MethodGet, endpoint, nil).
+		WithTestClaims(&handlers.Claims{Role: models.FacilityAdmin, FacilityID: facility.ID}).
+		Do().
+		ExpectStatus(http.StatusOK)
+
+	require.Equal(t, []models.DailyLoginCount{
+		{Date: "2026-01-15", TotalLogins: 12},
+		{Date: "2026-01-16", TotalLogins: 3},
+	}, resp.GetData())
+}
+
+func TestDepartmentLoginTrend_AllFacilitiesAggregates(t *testing.T) {
+	env := SetupTestEnv(t)
+	defer env.CleanupTestEnv()
+
+	facilityA, err := env.CreateTestFacility("Facility A")
+	require.NoError(t, err)
+	facilityB, err := env.CreateTestFacility("Facility B")
+	require.NoError(t, err)
+
+	rows := []models.LoginActivity{
+		{TimeInterval: time.Date(2026, 1, 15, 9, 0, 0, 0, time.UTC), FacilityID: facilityA.ID, TotalLogins: 5},
+		{TimeInterval: time.Date(2026, 1, 15, 11, 0, 0, 0, time.UTC), FacilityID: facilityB.ID, TotalLogins: 4},
+		{TimeInterval: time.Date(2026, 1, 16, 10, 0, 0, 0, time.UTC), FacilityID: facilityB.ID, TotalLogins: 3},
+	}
+	for i := range rows {
+		require.NoError(t, env.DB.Create(&rows[i]).Error)
+	}
+
+	resp := NewRequest[[]models.DailyLoginCount](env.Client, t, http.MethodGet,
+		"/api/department-metrics/login-trend?facility=all&start_date=2026-01-15&end_date=2026-01-16", nil).
+		WithTestClaims(&handlers.Claims{Role: models.SystemAdmin, FacilityID: facilityA.ID}).
+		Do().
+		ExpectStatus(http.StatusOK)
+
+	require.Equal(t, []models.DailyLoginCount{
+		{Date: "2026-01-15", TotalLogins: 9},
+		{Date: "2026-01-16", TotalLogins: 3},
+	}, resp.GetData())
+}
diff --git a/frontend/src/components/charts/LoginTrendChart.tsx b/frontend/src/components/charts/LoginTrendChart.tsx
new file mode 100644
index 000000000..5e563fec2
--- /dev/null
+++ b/frontend/src/components/charts/LoginTrendChart.tsx
@@ -0,0 +1,95 @@
+import { useMemo } from 'react';
+import {
+    LineChart,
+    Line,
+    XAxis,
+    YAxis,
+    CartesianGrid,
+    Tooltip,
+    ResponsiveContainer
+} from 'recharts';
+import { DailyLoginCount } from '@/types';
+import { BRAND, BRAND_DARK, SURFACE_HOVER } from '@/lib/brand';
+
+interface LoginTrendChartProps {
+    data: DailyLoginCount[];
+}
+
+interface TrendPoint {
+    label: string;
+    smoothed: number;
+}
+
+const SMOOTHING_WINDOW = 7;
+
+function formatLabel(isoDate: string): string {
+    const date = new Date(`${isoDate}T00:00:00`);
+    return date.toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric'
+    });
+}
+
+function buildPoints(data: DailyLoginCount[]): TrendPoint[] {
+    return data.map((point, index) => {
+        const windowStart = Math.max(0, index - (SMOOTHING_WINDOW - 1));
+        const window = data.slice(windowStart, index + 1);
+        const average =
+            window.reduce((sum, item) => sum + item.total_logins, 0) /
+            window.length;
+        return {
+            label: formatLabel(point.date),
+            smoothed: Math.round(average)
+        };
+    });
+}
+
+export default function LoginTrendChart({ data }: LoginTrendChartProps) {
+    const points = useMemo(() => buildPoints(data), [data]);
+    const tickInterval = Math.max(0, Math.floor(points.length / 7));
+
+    return (
+        <ResponsiveContainer width="100%" height={220}>
+            <LineChart
+                data={points}
+                margin={{ top: 4, right: 8, left: -10, bottom: 0 }}
+            >
+                <CartesianGrid strokeDasharray="3 3" stroke={SURFACE_HOVER} />
+                <XAxis
+                    dataKey="label"
+                    tick={{ fontSize: 11, fill: '#9ca3af' }}
+                    tickLine={false}
+                    axisLine={false}
+                    interval={tickInterval}
+                />
+                <YAxis
+                    tick={{ fontSize: 11, fill: '#9ca3af' }}
+                    tickLine={false}
+                    axisLine={false}
+                    allowDecimals={false}
+                />
+                <Tooltip
+                    contentStyle={{
+                        backgroundColor: '#fff',
+                        border: `1px solid ${SURFACE_HOVER}`,
+                        borderRadius: 8,
+                        fontSize: 12
+                    }}
+                    formatter={(value: number) => [
+                        value.toLocaleString(),
+                        '7-day avg'
+                    ]}
+                />
+                <Line
+                    type="monotone"
+                    dataKey="smoothed"
+                    name="7-day avg"
+                    stroke={BRAND}
+                    strokeWidth={2}
+                    dot={false}
+                    activeDot={{ r: 4, fill: BRAND_DARK }}
+                />
+            </LineChart>
+        </ResponsiveContainer>
+    );
+}
diff --git a/frontend/src/components/charts/OperationalInsightsCharts.tsx b/frontend/src/components/charts/OperationalInsightsCharts.tsx
deleted file mode 100644
index a6c059371..000000000
--- a/frontend/src/components/charts/OperationalInsightsCharts.tsx
+++ /dev/null
@@ -1,271 +0,0 @@
-import { useEffect, useState } from 'react';
-import useSWR from 'swr';
-import {
-    DepartmentMetrics,
-    ServerResponseOne,
-    FilterPastTime,
-    Facility,
-    ServerResponseMany
-} from '@/types';
-import { useAuth, canSwitchFacility } from '@/auth/useAuth';
-import {
-    Tooltip,
-    TooltipTrigger,
-    TooltipContent
-} from '@/components/ui/tooltip';
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue
-} from '@/components/ui/select';
-import { Button } from '@/components/ui/button';
-import { Skeleton } from '@/components/ui/skeleton';
-import {
-    UsersIcon,
-    ArrowTrendingUpIcon,
-    ArrowTrendingDownIcon,
-    UserPlusIcon,
-    ArrowPathIcon
-} from '@heroicons/react/24/outline';
-import EngagementRateGraph from './EngagementRateGraph';
-
-interface StatsCardProps {
-    title: string;
-    value: string;
-    label: string;
-    tooltip: string;
-    icon: React.ReactNode;
-    iconBg: string;
-}
-
-function StatsCard({
-    title,
-    value,
-    label,
-    tooltip,
-    icon,
-    iconBg
-}: StatsCardProps) {
-    return (
-        <Tooltip>
-            <TooltipTrigger asChild>
-                <div className="bg-card rounded-lg border border-border p-5 flex items-start gap-4">
-                    <div className={`rounded-lg p-2.5 shrink-0 ${iconBg}`}>
-                        {icon}
-                    </div>
-                    <div className="min-w-0">
-                        <p className="text-sm text-muted-foreground">{title}</p>
-                        <p className="text-2xl font-semibold text-foreground">
-                            {value}
-                        </p>
-                        <p className="text-xs text-muted-foreground mt-0.5">
-                            {label}
-                        </p>
-                    </div>
-                </div>
-            </TooltipTrigger>
-            <TooltipContent>{tooltip}</TooltipContent>
-        </Tooltip>
-    );
-}
-
-export default function OperationalInsightsCharts() {
-    const [facility, setFacility] = useState('all');
-    const [timeFilter, setTimeFilter] = useState<string>(
-        FilterPastTime['Past 30 days']
-    );
-    const [resetCache, setResetCache] = useState(false);
-    const { user } = useAuth();
-
-    const { data, error, isLoading, mutate } = useSWR<
-        ServerResponseOne<DepartmentMetrics>,
-        Error
-    >(
-        `/api/department-metrics?facility=${facility}&days=${timeFilter}&reset=${resetCache}`
-    );
-
-    const { data: facilitiesResp } = useSWR<ServerResponseMany<Facility>>(
-        user && canSwitchFacility(user) ? '/api/facilities' : null
-    );
-
-    useEffect(() => {
-        void mutate();
-    }, [facility, timeFilter, resetCache, mutate]);
-
-    useEffect(() => {
-        if (user && !canSwitchFacility(user)) {
-            setFacility('');
-        }
-    }, [user]);
-
-    if (isLoading) {
-        return (
-            <div className="space-y-6">
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-                    {Array.from({ length: 5 }).map((_, i) => (
-                        <Skeleton key={i} className="h-28 w-full rounded-lg" />
-                    ))}
-                </div>
-                <Skeleton className="h-64 w-full rounded-lg" />
-            </div>
-        );
-    }
-
-    if (error) {
-        return (
-            <div className="bg-card rounded-lg border border-border p-8 text-center">
-                <p className="text-red-600">
-                    Error loading operational insights data.
-                </p>
-            </div>
-        );
-    }
-
-    const metrics = data?.data;
-    if (!data || !metrics) return null;
-
-    const formattedDate = new Date(metrics.last_cache).toLocaleString('en-US');
-    const totalUsers = metrics.data.total_residents ?? 0;
-    const activePercent =
-        totalUsers > 0
-            ? ((metrics.data.active_users / totalUsers) * 100).toFixed(1)
-            : '0';
-    const inactiveUsers = totalUsers - metrics.data.active_users;
-    const timeLabel =
-        timeFilter === 'all' ? 'all time' : `the last ${timeFilter} days`;
-
-    return (
-        <div className="space-y-6">
-            <div className="flex flex-col sm:flex-row items-start sm:items-end justify-between gap-4">
-                <div className="flex flex-row gap-4">
-                    <div>
-                        <label className="text-sm text-muted-foreground mb-1 block">
-                            Time Period
-                        </label>
-                        <Select
-                            value={timeFilter}
-                            onValueChange={setTimeFilter}
-                        >
-                            <SelectTrigger className="w-[160px]">
-                                <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="30">Past 30 days</SelectItem>
-                                <SelectItem value="90">Past 90 days</SelectItem>
-                                <SelectItem value="all">All time</SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </div>
-                    {user && canSwitchFacility(user) && (
-                        <div>
-                            <label className="text-sm text-muted-foreground mb-1 block">
-                                Facility
-                            </label>
-                            <Select
-                                value={facility}
-                                onValueChange={setFacility}
-                            >
-                                <SelectTrigger className="w-[200px]">
-                                    <SelectValue />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    <SelectItem value="all">
-                                        All Facilities
-                                    </SelectItem>
-                                    {facilitiesResp?.data?.map((f) => (
-                                        <SelectItem
-                                            key={f.id}
-                                            value={String(f.id)}
-                                        >
-                                            {f.name}
-                                        </SelectItem>
-                                    ))}
-                                </SelectContent>
-                            </Select>
-                        </div>
-                    )}
-                </div>
-                <div className="text-right">
-                    <p className="text-xs text-muted-foreground mb-1">
-                        Last updated: {formattedDate}
-                    </p>
-                    <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => setResetCache(!resetCache)}
-                        className="text-foreground border-border"
-                    >
-                        <ArrowPathIcon className="size-4 mr-1" />
-                        Refresh Data
-                    </Button>
-                </div>
-            </div>
-
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
-                <StatsCard
-                    title="Total Users"
-                    value={totalUsers.toLocaleString()}
-                    label="Residents"
-                    tooltip="Total number of residents in the facility"
-                    icon={<UsersIcon className="size-5 text-white" />}
-                    iconBg="bg-brand-dark"
-                />
-                <StatsCard
-                    title="Active Users"
-                    value={metrics.data.active_users.toLocaleString()}
-                    label={`${activePercent}% of total`}
-                    tooltip={`Users who have logged in during ${timeLabel}`}
-                    icon={<ArrowTrendingUpIcon className="size-5 text-white" />}
-                    iconBg="bg-brand"
-                />
-                <StatsCard
-                    title="Inactive Users"
-                    value={inactiveUsers.toLocaleString()}
-                    label={inactiveUsers === 1 ? 'User' : 'Users'}
-                    tooltip={`Users who have not logged in during ${timeLabel}`}
-                    icon={
-                        <ArrowTrendingDownIcon className="size-5 text-white" />
-                    }
-                    iconBg="bg-muted0"
-                />
-                <StatsCard
-                    title="New Users Added"
-                    value={metrics.data.new_residents_added.toLocaleString()}
-                    label={
-                        metrics.data.new_residents_added === 1
-                            ? 'User'
-                            : 'Users'
-                    }
-                    tooltip={`New residents added during ${timeLabel}`}
-                    icon={<UserPlusIcon className="size-5 text-white" />}
-                    iconBg="bg-brand-gold"
-                />
-                <StatsCard
-                    title="Total Logins"
-                    value={metrics.data.total_logins.toLocaleString()}
-                    label={metrics.data.total_logins === 1 ? 'Login' : 'Logins'}
-                    tooltip={`Total login count during ${timeLabel}`}
-                    icon={<ArrowTrendingUpIcon className="size-5 text-white" />}
-                    iconBg="bg-brand"
-                />
-            </div>
-
-            <div className="bg-card rounded-lg border border-border p-6">
-                <h3 className="text-lg font-semibold text-foreground mb-2">
-                    Peak Login Times
-                </h3>
-                <p className="text-xs text-muted-foreground mb-4">
-                    Residents only
-                </p>
-                <div className="h-[280px]">
-                    <EngagementRateGraph
-                        data={metrics.data.peak_login_times || []}
-                        viewType="peakLogin"
-                    />
-                </div>
-            </div>
-        </div>
-    );
-}
diff --git a/frontend/src/components/navigation/Sidebar.tsx b/frontend/src/components/navigation/Sidebar.tsx
index 5fa80ab26..ef021839e 100644
--- a/frontend/src/components/navigation/Sidebar.tsx
+++ b/frontend/src/components/navigation/Sidebar.tsx
@@ -21,7 +21,7 @@ import {
     UsersIcon,
     UserGroupIcon,
     BookOpenIcon,
-    ChartBarIcon,
+    PresentationChartLineIcon,
     BuildingOfficeIcon,
     CalendarIcon,
     ChevronDownIcon,
@@ -200,8 +200,8 @@ function AdminNav({ collapsed, isActive, onNavigate }: NavSectionProps) {
             )}
             <NavLink
                 to="/operational-insights"
-                icon={ChartBarIcon}
-                label="Operational Insights"
+                icon={PresentationChartLineIcon}
+                label="Insights"
                 active={isActive(['/operational-insights'])}
                 collapsed={collapsed}
                 onClick={onNavigate}
diff --git a/frontend/src/layouts/AuthenticatedLayout.tsx b/frontend/src/layouts/AuthenticatedLayout.tsx
index a31e3a307..b4bb2bd32 100644
--- a/frontend/src/layouts/AuthenticatedLayout.tsx
+++ b/frontend/src/layouts/AuthenticatedLayout.tsx
@@ -48,6 +48,7 @@ export default function AuthenticatedLayout() {
     const isProgramsList = location.pathname === '/programs';
     const isFacilities = location.pathname === '/facilities';
     const isSchedule = location.pathname === '/schedule';
+    const isOperationalInsights = location.pathname === '/operational-insights';
     const isAdmins = location.pathname === '/admins';
     const isKnowledgeCenter =
         location.pathname === '/knowledge-center-management' ||
@@ -70,7 +71,8 @@ export default function AuthenticatedLayout() {
         isKnowledgeCenter ||
         isContentViewer ||
         isResidentPage ||
-        isSchedule;
+        isSchedule ||
+        isOperationalInsights;
     const fullBleedWrapperClass =
         isDashboard ||
         isProgramsList ||
@@ -84,7 +86,8 @@ export default function AuthenticatedLayout() {
         isKnowledgeCenter ||
         isContentViewer ||
         isResidentPage ||
-        isSchedule
+        isSchedule ||
+        isOperationalInsights
             ? 'py-0'
             : 'py-4';
     const showBreadcrumbs =
@@ -153,6 +156,7 @@ export default function AuthenticatedLayout() {
         isFacilities ||
         isAdmins ||
         isKnowledgeCenter ||
+        isOperationalInsights ||
         (isProgramDetail && canSwitchFacility(user));
     const rootClass = 'h-screen bg-background flex overflow-hidden';
     const contentClass = `flex-1 min-h-full overflow-y-auto overflow-x-hidden ${needsGrayBg ? 'bg-surface-hover' : ''}`;
diff --git a/frontend/src/pages/insights/KnowledgeCenterTab.tsx b/frontend/src/pages/insights/KnowledgeCenterTab.tsx
new file mode 100644
index 000000000..9bddfa405
--- /dev/null
+++ b/frontend/src/pages/insights/KnowledgeCenterTab.tsx
@@ -0,0 +1,12 @@
+import { BookOpenIcon } from '@heroicons/react/24/outline';
+import { EmptyState } from '@/components/shared';
+
+export default function KnowledgeCenterTab() {
+    return (
+        <EmptyState
+            icon={<BookOpenIcon className="size-6 text-muted-foreground" />}
+            title="Knowledge Center insights coming soon"
+            description="Library and video engagement metrics will appear here in an upcoming release."
+        />
+    );
+}
diff --git a/frontend/src/pages/insights/MetricCard.tsx b/frontend/src/pages/insights/MetricCard.tsx
new file mode 100644
index 000000000..6a9776cd8
--- /dev/null
+++ b/frontend/src/pages/insights/MetricCard.tsx
@@ -0,0 +1,42 @@
+import { ElementType, ReactNode } from 'react';
+import { InfoTooltip } from '@/components/shared';
+
+interface MetricCardProps {
+    icon: ElementType;
+    value: string;
+    label: string;
+    sub?: string;
+    tooltip?: ReactNode;
+}
+
+export function MetricCard({
+    icon: Icon,
+    value,
+    label,
+    sub,
+    tooltip
+}: MetricCardProps) {
+    return (
+        <div className="bg-card rounded-lg border border-gray-200 dark:border-border p-4 flex-1 min-w-0">
+            <div className="flex items-center gap-3 mb-3">
+                <div className="bg-surface-hover dark:bg-muted p-2 rounded">
+                    <Icon className="size-5 text-brand dark:text-brand-gold" />
+                </div>
+                <div className="text-2xl text-brand-dark dark:text-white">
+                    {value}
+                </div>
+                {tooltip && (
+                    <InfoTooltip className="ml-auto">{tooltip}</InfoTooltip>
+                )}
+            </div>
+            <div className="text-sm text-gray-600 dark:text-gray-400">
+                {label}
+            </div>
+            {sub && (
+                <div className="text-xs text-gray-500 dark:text-gray-500 mt-1">
+                    {sub}
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/frontend/src/pages/insights/OperationalInsights.tsx b/frontend/src/pages/insights/OperationalInsights.tsx
index b6d396b1a..e8c2fbe03 100644
--- a/frontend/src/pages/insights/OperationalInsights.tsx
+++ b/frontend/src/pages/insights/OperationalInsights.tsx
@@ -1,15 +1,169 @@
-import { PageHeader } from '@/components/shared';
-import OperationalInsightsCharts from '@/components/charts/OperationalInsightsCharts';
+import { useState } from 'react';
+import useSWR from 'swr';
+import { ArrowDownTrayIcon } from '@heroicons/react/24/outline';
+import { Button } from '@/components/ui/button';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from '@/components/ui/select';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useAuth, canSwitchFacility } from '@/auth/useAuth';
+import { Facility, InsightsRangeKey, ServerResponseMany } from '@/types';
+import OverviewTab from './OverviewTab';
+import KnowledgeCenterTab from './KnowledgeCenterTab';
+import { RANGE_OPTIONS, RANGE_LABELS, rangeToParams } from './insightsRange';
+
+const TAB_TRIGGER_CLASS =
+    'flex-none h-auto px-4 py-2.5 rounded-lg transition-all duration-200 data-[state=active]:bg-brand data-[state=active]:text-white data-[state=active]:shadow-sm data-[state=inactive]:text-muted-foreground data-[state=inactive]:hover:text-brand-dark data-[state=inactive]:hover:bg-muted';
 
 export default function OperationalInsightsPage() {
+    const { user } = useAuth();
+    const canSwitch = user ? canSwitchFacility(user) : false;
+
+    const [activeRange, setActiveRange] = useState<InsightsRangeKey>('30D');
+    const [customFrom, setCustomFrom] = useState('');
+    const [customTo, setCustomTo] = useState('');
+    const [selectedFacility, setSelectedFacility] = useState(
+        canSwitch ? 'all' : ''
+    );
+
+    const { data: facilitiesResp } = useSWR<ServerResponseMany<Facility>>(
+        canSwitch ? '/api/facilities' : null
+    );
+
+    const dateParams = rangeToParams(activeRange, customFrom, customTo);
+
+    const facilityLabel =
+        selectedFacility === 'all'
+            ? 'All Facilities'
+            : (facilitiesResp?.data?.find(
+                  (f) => String(f.id) === selectedFacility
+              )?.name ?? 'Selected facility');
+
+    const rangeLabel = `${RANGE_LABELS[activeRange]} · ${canSwitch ? facilityLabel : 'Your facility'}`;
+
     return (
-        <div className="bg-muted min-h-screen p-6">
-            <div className="max-w-7xl mx-auto space-y-6">
-                <PageHeader
-                    title="Operational Insights"
-                    subtitle="Facility activity and user engagement metrics"
-                />
-                <OperationalInsightsCharts />
+        <div className="max-w-7xl mx-auto px-6 py-8">
+            <div>
+                <div className="mb-8">
+                    <div className="flex items-center justify-between">
+                        <div>
+                            <h1 className="text-brand-dark dark:text-white">
+                                Insights
+                            </h1>
+                            <p className="text-gray-600 dark:text-gray-400 mt-1">
+                                Cross-facility activity, engagement & outcomes
+                            </p>
+                        </div>
+                        <Button
+                            disabled
+                            className="gap-2 bg-brand hover:bg-brand-dark"
+                            title="Export is coming in a future release"
+                        >
+                            <ArrowDownTrayIcon className="size-4" />
+                            Export Report
+                        </Button>
+                    </div>
+                </div>
+
+                <div className="bg-card rounded-lg border border-gray-200 dark:border-border p-4 mb-6">
+                    <div className="flex items-center gap-3 flex-wrap">
+                        <div className="flex items-center gap-1 bg-gray-100 dark:bg-muted rounded-lg p-1">
+                            {RANGE_OPTIONS.map((range) => (
+                                <button
+                                    key={range}
+                                    onClick={() => setActiveRange(range)}
+                                    className={`px-2.5 py-1 text-xs rounded-md transition-colors ${
+                                        activeRange === range
+                                            ? 'bg-white dark:bg-card shadow-sm text-brand-dark dark:text-white'
+                                            : 'text-gray-500 dark:text-gray-400 hover:text-brand-dark dark:hover:text-white'
+                                    }`}
+                                >
+                                    {range}
+                                </button>
+                            ))}
+                        </div>
+
+                        {activeRange === 'Custom' && (
+                            <>
+                                <input
+                                    type="date"
+                                    value={customFrom}
+                                    onChange={(e) =>
+                                        setCustomFrom(e.target.value)
+                                    }
+                                    className="h-9 text-sm border border-border rounded-md px-3 bg-card text-foreground outline-none focus:ring-2 focus:ring-brand"
+                                />
+                                <span className="text-muted-foreground text-sm">
+                                    to
+                                </span>
+                                <input
+                                    type="date"
+                                    value={customTo}
+                                    onChange={(e) =>
+                                        setCustomTo(e.target.value)
+                                    }
+                                    className="h-9 text-sm border border-border rounded-md px-3 bg-card text-foreground outline-none focus:ring-2 focus:ring-brand"
+                                />
+                            </>
+                        )}
+
+                        {canSwitch && (
+                            <Select
+                                value={selectedFacility}
+                                onValueChange={setSelectedFacility}
+                            >
+                                <SelectTrigger className="w-48 h-9 text-sm">
+                                    <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="all">
+                                        All Facilities
+                                    </SelectItem>
+                                    {facilitiesResp?.data?.map((facility) => (
+                                        <SelectItem
+                                            key={facility.id}
+                                            value={String(facility.id)}
+                                        >
+                                            {facility.name}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        )}
+                    </div>
+                </div>
+
+                <Tabs defaultValue="overview" className="space-y-6">
+                    <TabsList className="bg-card border border-border p-1 h-auto gap-1">
+                        <TabsTrigger
+                            value="overview"
+                            className={TAB_TRIGGER_CLASS}
+                        >
+                            Overview
+                        </TabsTrigger>
+                        <TabsTrigger
+                            value="knowledge-center"
+                            className={TAB_TRIGGER_CLASS}
+                        >
+                            Knowledge Center
+                        </TabsTrigger>
+                    </TabsList>
+                    <TabsContent value="overview" className="mt-0">
+                        <OverviewTab
+                            dateParams={dateParams}
+                            selectedFacility={selectedFacility}
+                            canSwitch={canSwitch}
+                            rangeLabel={rangeLabel}
+                        />
+                    </TabsContent>
+                    <TabsContent value="knowledge-center" className="mt-0">
+                        <KnowledgeCenterTab />
+                    </TabsContent>
+                </Tabs>
             </div>
         </div>
     );
diff --git a/frontend/src/pages/insights/OverviewTab.tsx b/frontend/src/pages/insights/OverviewTab.tsx
new file mode 100644
index 000000000..cb1e6889e
--- /dev/null
+++ b/frontend/src/pages/insights/OverviewTab.tsx
@@ -0,0 +1,398 @@
+import { useMemo, useState } from 'react';
+import useSWR from 'swr';
+import {
+    UsersIcon,
+    UserPlusIcon,
+    ArrowTrendingUpIcon,
+    ChartBarIcon,
+    ArrowPathIcon
+} from '@heroicons/react/24/outline';
+import { ArrowsUpDownIcon } from '@heroicons/react/24/solid';
+import {
+    DepartmentMetrics,
+    DailyLoginCount,
+    FacilityEngagement,
+    ServerResponseOne
+} from '@/types';
+import API from '@/api/api';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow
+} from '@/components/ui/table';
+import LoginTrendChart from '@/components/charts/LoginTrendChart';
+import { MetricCard } from './MetricCard';
+import { InsightsDateParams } from './insightsRange';
+
+interface OverviewTabProps {
+    dateParams: InsightsDateParams;
+    selectedFacility: string;
+    canSwitch: boolean;
+    rangeLabel: string;
+}
+
+type SortKey =
+    | 'facility_name'
+    | 'registered'
+    | 'active'
+    | 'logins'
+    | 'avgPerActive'
+    | 'activation';
+
+interface ComparisonRow extends FacilityEngagement {
+    avgPerActive: number;
+    activation: number;
+}
+
+function pct(part: number, whole: number): number {
+    return whole > 0 ? Math.round((part / whole) * 100) : 0;
+}
+
+function ratio(part: number, whole: number): number {
+    return whole > 0 ? Math.round((part / whole) * 10) / 10 : 0;
+}
+
+export default function OverviewTab({
+    dateParams,
+    selectedFacility,
+    canSwitch,
+    rangeLabel
+}: OverviewTabProps) {
+    const [sortKey, setSortKey] = useState<SortKey>('activation');
+    const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc');
+    const [isRefreshing, setIsRefreshing] = useState(false);
+
+    const query = `facility=${selectedFacility}&start_date=${dateParams.start_date}&end_date=${dateParams.end_date}`;
+
+    const {
+        data: metricsResp,
+        isLoading: metricsLoading,
+        mutate: mutateMetrics
+    } = useSWR<ServerResponseOne<DepartmentMetrics>>(
+        `/api/department-metrics?${query}`
+    );
+
+    const { data: trendResp, mutate: mutateTrend } = useSWR<
+        ServerResponseOne<DailyLoginCount[]>
+    >(`/api/department-metrics/login-trend?${query}`);
+
+    const { data: comparisonResp, mutate: mutateComparison } = useSWR<
+        ServerResponseOne<FacilityEngagement[]>
+    >(
+        canSwitch
+            ? `/api/department-metrics/facility-comparison?start_date=${dateParams.start_date}&end_date=${dateParams.end_date}`
+            : null
+    );
+
+    const rows = useMemo<ComparisonRow[]>(() => {
+        const data = comparisonResp?.data ?? [];
+        const derived = data.map((row) => ({
+            ...row,
+            avgPerActive: ratio(row.logins, row.active),
+            activation: pct(row.active, row.registered)
+        }));
+        return derived.sort((a, b) => {
+            const dir = sortDir === 'desc' ? -1 : 1;
+            if (sortKey === 'facility_name') {
+                return a.facility_name.localeCompare(b.facility_name) * dir;
+            }
+            return (a[sortKey] - b[sortKey]) * dir;
+        });
+    }, [comparisonResp, sortKey, sortDir]);
+
+    const toggleSort = (key: SortKey) => {
+        if (sortKey === key) {
+            setSortDir((dir) => (dir === 'asc' ? 'desc' : 'asc'));
+        } else {
+            setSortKey(key);
+            setSortDir('desc');
+        }
+    };
+
+    const handleRefresh = async () => {
+        setIsRefreshing(true);
+        try {
+            await API.get(`department-metrics?${query}&reset=true`);
+            await Promise.all([
+                mutateMetrics(),
+                mutateTrend(),
+                mutateComparison()
+            ]);
+        } finally {
+            setIsRefreshing(false);
+        }
+    };
+
+    if (metricsLoading) {
+        return (
+            <div className="space-y-6">
+                <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
+                    {Array.from({ length: 5 }).map((_, i) => (
+                        <Skeleton key={i} className="h-28 w-full rounded-lg" />
+                    ))}
+                </div>
+                <Skeleton className="h-64 w-full rounded-lg" />
+            </div>
+        );
+    }
+
+    const metrics = metricsResp?.data.data;
+    if (!metrics) {
+        return (
+            <div className="bg-card rounded-lg border border-border p-8 text-center text-muted-foreground">
+                No insights data available for this selection.
+            </div>
+        );
+    }
+
+    const avgPerActive = ratio(metrics.total_logins, metrics.active_users);
+    const lastUpdated = metricsResp?.data.last_cache
+        ? new Date(metricsResp.data.last_cache).toLocaleString()
+        : '';
+
+    return (
+        <div className="space-y-6">
+            <div>
+                <div className="flex items-start justify-between mb-4">
+                    <div>
+                        <h2 className="text-brand-dark dark:text-white">
+                            At a glance
+                        </h2>
+                        <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                            {rangeLabel}
+                        </p>
+                    </div>
+                    <div className="flex flex-col items-end gap-1">
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => void handleRefresh()}
+                            disabled={isRefreshing}
+                            className="gap-1.5"
+                        >
+                            <ArrowPathIcon
+                                className={`size-4 ${isRefreshing ? 'animate-spin' : ''}`}
+                            />
+                            Refresh
+                        </Button>
+                        {lastUpdated && (
+                            <span className="text-xs text-muted-foreground">
+                                Updated {lastUpdated}
+                            </span>
+                        )}
+                    </div>
+                </div>
+                <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
+                    <MetricCard
+                        icon={UsersIcon}
+                        value={metrics.total_residents.toLocaleString()}
+                        label="Registered Residents"
+                        sub={`${metrics.total_admins.toLocaleString()} staff ${
+                            metrics.total_admins === 1 ? 'account' : 'accounts'
+                        } · not counted`}
+                        tooltip={
+                            <>
+                                <b>Total residents</b> who have a platform
+                                account. Staff accounts are not included in this
+                                total, but are shown below.
+                            </>
+                        }
+                    />
+                    <MetricCard
+                        icon={UsersIcon}
+                        value={metrics.active_users.toLocaleString()}
+                        label="Active Residents"
+                        sub={`${metrics.percent_active}% of registered`}
+                        tooltip={
+                            <>
+                                Registered residents who{' '}
+                                <b>logged in at least once</b>
+                                in the range. <b>% of Registered</b> is active
+                                residents &divide; registered residents
+                            </>
+                        }
+                    />
+                    <MetricCard
+                        icon={UserPlusIcon}
+                        value={metrics.new_residents_added.toLocaleString()}
+                        label="New Residents Added"
+                        sub="in selected range"
+                        tooltip={
+                            <>
+                                Residents whose account was <b>first created</b>{' '}
+                                within the range. The <b>+12%</b> compares
+                                against the prior window.
+                            </>
+                        }
+                    />
+                    <MetricCard
+                        icon={ArrowTrendingUpIcon}
+                        value={metrics.total_logins.toLocaleString()}
+                        label="Total Resident Logins"
+                        sub={`mean ${metrics.logins_per_day.toLocaleString()} / day`}
+                        tooltip={
+                            <>
+                                Every resident <b>login event</b> in the range
+                                (5 logins by one person count as 5).{' '}
+                                <b>Staff logins</b> excluded.
+                            </>
+                        }
+                    />
+                    <MetricCard
+                        icon={ChartBarIcon}
+                        value={String(avgPerActive)}
+                        label="Avg Logins / Active User"
+                        sub="over selected range"
+                        tooltip={
+                            <>
+                                Total resident logins &divide; active residents
+                                (<b>18,210 &divide; 1,552</b>). Divided by{' '}
+                                <b>active</b>, not registered, so inactive
+                                accounts don't dilute it.
+                            </>
+                        }
+                    />
+                </div>
+            </div>
+
+            <div className="bg-card rounded-lg border border-gray-200 dark:border-border p-6">
+                <h3 className="text-brand-dark dark:text-white">Login Trend</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                    7-day smoothed average of daily logins across the selected
+                    range
+                </p>
+                <LoginTrendChart data={trendResp?.data ?? []} />
+            </div>
+
+            {canSwitch && (
+                <div className="bg-card rounded-lg border border-gray-200 dark:border-border overflow-hidden">
+                    <div className="px-6 pt-5 pb-4">
+                        <h3 className="text-brand-dark dark:text-white">
+                            Facility Comparison
+                        </h3>
+                    </div>
+                    <Table>
+                        <TableHeader>
+                            <TableRow>
+                                <SortableHead
+                                    label="Facility"
+                                    sortKey="facility_name"
+                                    activeKey={sortKey}
+                                    onSort={toggleSort}
+                                />
+                                <SortableHead
+                                    label="Registered"
+                                    sortKey="registered"
+                                    activeKey={sortKey}
+                                    onSort={toggleSort}
+                                    alignRight
+                                />
+                                <SortableHead
+                                    label="Active"
+                                    sortKey="active"
+                                    activeKey={sortKey}
+                                    onSort={toggleSort}
+                                    alignRight
+                                />
+                                <SortableHead
+                                    label="Logins"
+                                    sortKey="logins"
+                                    activeKey={sortKey}
+                                    onSort={toggleSort}
+                                    alignRight
+                                />
+                                <SortableHead
+                                    label="Avg / Active"
+                                    sortKey="avgPerActive"
+                                    activeKey={sortKey}
+                                    onSort={toggleSort}
+                                    alignRight
+                                />
+                                <SortableHead
+                                    label="Activation"
+                                    sortKey="activation"
+                                    activeKey={sortKey}
+                                    onSort={toggleSort}
+                                    alignRight
+                                />
+                            </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                            {rows.map((row) => (
+                                <TableRow key={row.facility_id}>
+                                    <TableCell className="font-medium text-brand-dark dark:text-white">
+                                        {row.facility_name}
+                                    </TableCell>
+                                    <TableCell className="text-right text-gray-700 dark:text-gray-300">
+                                        {row.registered.toLocaleString()}
+                                    </TableCell>
+                                    <TableCell className="text-right text-gray-700 dark:text-gray-300">
+                                        {row.active.toLocaleString()}
+                                    </TableCell>
+                                    <TableCell className="text-right text-gray-700 dark:text-gray-300">
+                                        {row.logins.toLocaleString()}
+                                    </TableCell>
+                                    <TableCell className="text-right text-gray-700 dark:text-gray-300">
+                                        {row.avgPerActive}
+                                    </TableCell>
+                                    <TableCell className="text-right">
+                                        <div className="flex items-center justify-end gap-2">
+                                            <div className="w-20 bg-muted rounded-full h-1.5 overflow-hidden">
+                                                <div
+                                                    className="h-full rounded-full bg-brand"
+                                                    style={{
+                                                        width: `${row.activation}%`
+                                                    }}
+                                                />
+                                            </div>
+                                            <span className="text-gray-700 dark:text-gray-300 w-10 text-right">
+                                                {row.activation}%
+                                            </span>
+                                        </div>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </div>
+            )}
+        </div>
+    );
+}
+
+interface SortableHeadProps {
+    label: string;
+    sortKey: SortKey;
+    activeKey: SortKey;
+    onSort: (key: SortKey) => void;
+    alignRight?: boolean;
+}
+
+function SortableHead({
+    label,
+    sortKey,
+    activeKey,
+    onSort,
+    alignRight
+}: SortableHeadProps) {
+    return (
+        <TableHead
+            className={`cursor-pointer ${alignRight ? 'text-right' : ''}`}
+            onClick={() => onSort(sortKey)}
+        >
+            <div
+                className={`flex items-center gap-1 ${alignRight ? 'justify-end' : ''}`}
+            >
+                {label}
+                <ArrowsUpDownIcon
+                    className={`size-3.5 ${activeKey === sortKey ? 'text-brand' : 'text-gray-400'}`}
+                />
+            </div>
+        </TableHead>
+    );
+}
diff --git a/frontend/src/pages/insights/insightsRange.ts b/frontend/src/pages/insights/insightsRange.ts
new file mode 100644
index 000000000..7cd28506a
--- /dev/null
+++ b/frontend/src/pages/insights/insightsRange.ts
@@ -0,0 +1,63 @@
+import { InsightsRangeKey } from '@/types';
+
+export interface InsightsDateParams {
+    start_date: string;
+    end_date: string;
+}
+
+export const RANGE_OPTIONS: InsightsRangeKey[] = [
+    '7D',
+    '30D',
+    '90D',
+    'YTD',
+    'Custom'
+];
+
+export const RANGE_LABELS: Record<InsightsRangeKey, string> = {
+    '7D': 'last 7 days',
+    '30D': 'last 30 days',
+    '90D': 'last 90 days',
+    YTD: 'year to date',
+    Custom: 'custom range'
+};
+
+function formatDate(date: Date): string {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+
+function daysAgo(end: Date, count: number): Date {
+    const start = new Date(end);
+    start.setDate(end.getDate() - count);
+    return start;
+}
+
+export function rangeToParams(
+    range: InsightsRangeKey,
+    customFrom: string,
+    customTo: string
+): InsightsDateParams {
+    if (range === 'Custom') {
+        return { start_date: customFrom, end_date: customTo };
+    }
+    const end = new Date();
+    let start: Date;
+    switch (range) {
+        case '7D':
+            start = daysAgo(end, 6);
+            break;
+        case 'YTD':
+            start = new Date(end.getFullYear(), 0, 1);
+            break;
+        case '90D':
+            start = daysAgo(end, 89);
+            break;
+        case '30D':
+        default:
+            start = daysAgo(end, 29);
+            break;
+    }
+    return { start_date: formatDate(start), end_date: formatDate(end) };
+}
diff --git a/frontend/src/routes/app-routes.tsx b/frontend/src/routes/app-routes.tsx
index 1a4338e28..b174cc00a 100644
--- a/frontend/src/routes/app-routes.tsx
+++ b/frontend/src/routes/app-routes.tsx
@@ -68,7 +68,7 @@ const adminRoutes = declareAuthenticatedRoutes(
             path: 'operational-insights',
             element: <OperationalInsights />,
             errorElement: <Error />,
-            handle: { title: 'Operational Insights' }
+            handle: { title: 'Insights' }
         },
         {
             path: 'residents',
diff --git a/frontend/src/types/insights.ts b/frontend/src/types/insights.ts
index 17d87e757..8fbb570ff 100644
--- a/frontend/src/types/insights.ts
+++ b/frontend/src/types/insights.ts
@@ -9,6 +9,7 @@ export interface DepartmentMetrics {
         percent_active: number;
         percent_inactive: number;
         total_residents: number;
+        total_admins: number;
         facility: string;
         new_residents_added: number;
         new_admins_added: number;
@@ -197,3 +198,18 @@ export enum FilterPastTime {
     'Past 90 days' = '90',
     'All time' = 'all'
 }
+
+export interface DailyLoginCount {
+    date: string;
+    total_logins: number;
+}
+
+export interface FacilityEngagement {
+    facility_id: number;
+    facility_name: string;
+    registered: number;
+    active: number;
+    logins: number;
+}
+
+export type InsightsRangeKey = '7D' | '30D' | '90D' | 'YTD' | 'Custom';