diff --git a/src/app/test/database-detail-scale.test.tsx b/src/app/test/database-detail-scale.test.tsx
index f0e2ba573..41ead44d9 100644
--- a/src/app/test/database-detail-scale.test.tsx
+++ b/src/app/test/database-detail-scale.test.tsx
@@ -170,7 +170,7 @@ describe("DatabaseScalePage", () => {
             /Changed from General Purpose \(M\) to Compute Optimized \(C\)/,
           ),
         ).toBeInTheDocument();
-        expect(screen.getByText(/Container Size/)).toBeInTheDocument();
+        expect(screen.getByText("Container Size")).toBeInTheDocument();
         expect(
           screen.getByText(/Changed from 0.5 GB to 2 GB/),
         ).toBeInTheDocument();
diff --git a/src/bootup/index.ts b/src/bootup/index.ts
index 140299c14..521dc3725 100644
--- a/src/bootup/index.ts
+++ b/src/bootup/index.ts
@@ -12,8 +12,10 @@ import {
   fetchEndpoints,
   fetchEnvironments,
   fetchLogDrains,
+  fetchManualScaleRecommendations,
   fetchMetricDrains,
   fetchOperationsByOrgId,
+  fetchServiceSizingPolicies,
   fetchServices,
   fetchStacks,
 } from "@app/deploy";
@@ -88,7 +90,16 @@ function* onFetchResourceData() {
     fetchSources.run(),
     fetchDeployments.run(),
     fetchMembershipsByOrgId.run({ orgId: org.id }),
+    fetchServiceSizingPolicies.run(),
   ]);
+  const orgs = [
+    "afc1bc92-13c8-4848-bdfa-355ec07a4f7f",
+    "df0ee681-9e02-4c28-8916-3b215d539b08",
+  ];
+  // feature flag temporarily
+  if (orgs.includes(org.id)) {
+    yield* fetchManualScaleRecommendations.run();
+  }
   yield* group;
 }
 
diff --git a/src/date/index.ts b/src/date/index.ts
index 41f426148..bc9e41de6 100644
--- a/src/date/index.ts
+++ b/src/date/index.ts
@@ -1,7 +1,7 @@
 // https://moment.github.io/luxon/#/formatting?id=table-of-tokens
 import { DateTime } from "luxon";
 
-const isoToDate = (dateStr = "") => {
+export const isoToDate = (dateStr = "") => {
   return DateTime.fromISO(dateStr, { zone: "utc" });
 };
 
diff --git a/src/deploy/database/index.ts b/src/deploy/database/index.ts
index 38cad7011..7a0eadfd2 100644
--- a/src/deploy/database/index.ts
+++ b/src/deploy/database/index.ts
@@ -136,6 +136,7 @@ export interface DeployDatabaseRow extends DeployDatabase {
   diskSize: number;
   containerSize: number;
   imageDesc: string;
+  savings: number;
 }
 
 export const hasDeployDatabase = (a: DeployDatabase) => a.id !== "";
diff --git a/src/deploy/entities.ts b/src/deploy/entities.ts
index 938475081..f72599b40 100644
--- a/src/deploy/entities.ts
+++ b/src/deploy/entities.ts
@@ -14,6 +14,7 @@ import { endpointEntities } from "./endpoint";
 import { environmentEntities } from "./environment";
 import { imageEntities } from "./image";
 import { logDrainEntities } from "./log-drain";
+import { manualScaleRecommendationEntities } from "./manual_scale_recommendation";
 import { metricDrainEntities } from "./metric-drain";
 import { opEntities } from "./operation";
 import { permissionEntities } from "./permission";
@@ -53,4 +54,5 @@ export const entities = {
   ...imageEntities,
   ...diskEntities,
   ...serviceSizingPolicyEntities,
+  ...manualScaleRecommendationEntities,
 };
diff --git a/src/deploy/index.ts b/src/deploy/index.ts
index 76c52d7f0..4cb7bc555 100644
--- a/src/deploy/index.ts
+++ b/src/deploy/index.ts
@@ -32,3 +32,4 @@ export * from "./support";
 export * from "./entities";
 export * from "./search";
 export * from "./cost";
+export * from "./manual_scale_recommendation";
diff --git a/src/deploy/manual_scale_recommendation/index.ts b/src/deploy/manual_scale_recommendation/index.ts
new file mode 100644
index 000000000..f9e6e6afc
--- /dev/null
+++ b/src/deploy/manual_scale_recommendation/index.ts
@@ -0,0 +1,91 @@
+import { api, cacheTimer } from "@app/api";
+import { defaultEntity, defaultHalHref } from "@app/hal";
+import { type WebState, schema } from "@app/schema";
+import type { LinkResponse, ManualScaleRecommendation } from "@app/types";
+import { createSelector } from "starfx";
+
+export interface DeployManualScaleRecommendationResponse {
+  id: number;
+  service_id: number;
+  cpu_usage: number;
+  ram_usage: number;
+  ram_target: number;
+  recommended_instance_class: string;
+  recommended_container_memory_limit_mb: number;
+  cost_savings: number;
+  metric_percentile: number;
+  created_at: string;
+  updated_at: string;
+  _links: {
+    service: LinkResponse;
+  };
+  _type: "manual_service_sizing_recommendation";
+}
+
+export const defaultManualScaleRecommendationResponse = (
+  s: Partial<DeployManualScaleRecommendationResponse> = {},
+): DeployManualScaleRecommendationResponse => {
+  const now = new Date().toISOString();
+  return {
+    id: 0,
+    service_id: 0,
+    cpu_usage: 0,
+    ram_usage: 0,
+    ram_target: 0,
+    recommended_instance_class: "",
+    recommended_container_memory_limit_mb: 0,
+    cost_savings: 0,
+    metric_percentile: 0,
+    created_at: now,
+    updated_at: now,
+    _links: {
+      service: defaultHalHref(),
+    },
+    ...s,
+    _type: "manual_service_sizing_recommendation",
+  };
+};
+
+export const deserializeManualScaleRecommendation = (
+  payload: DeployManualScaleRecommendationResponse,
+): ManualScaleRecommendation => {
+  return {
+    id: `${payload.id}`,
+    serviceId: `${payload.service_id}`,
+    cpuUsage: payload.cpu_usage,
+    ramUsage: payload.ram_usage,
+    ramTarget: payload.ram_target,
+    recommendedInstanceClass: payload.recommended_instance_class,
+    recommendedContainerMemoryLimitMb:
+      payload.recommended_container_memory_limit_mb,
+    costSavings: payload.cost_savings,
+    metricPercentile: payload.metric_percentile,
+    createdAt: payload.created_at,
+  };
+};
+
+export const manualScaleRecommendationEntities = {
+  manual_service_sizing_recommendation: defaultEntity({
+    id: "manual_service_sizing_recommendation",
+    deserialize: deserializeManualScaleRecommendation,
+    save: schema.manualScaleRecommendations.add,
+  }),
+};
+
+export const selectManualScaleRecommendationByServiceId = createSelector(
+  schema.manualScaleRecommendations.selectTableAsList,
+  (_: WebState, p: { serviceId: string }) => p.serviceId,
+  (recs, serviceId) =>
+    recs.find((r) => {
+      return r.serviceId === serviceId;
+    }) || schema.manualScaleRecommendations.empty,
+);
+
+export const fetchManualScaleRecommendations = api.get(
+  "/manual_service_sizing_recommendations?per_page=5000",
+  { supervisor: cacheTimer() },
+);
+
+export const fetchManualScaleRecommendationById = api.get<{
+  id: string;
+}>("/manual_service_sizing_recommendations/:id");
diff --git a/src/deploy/search/index.ts b/src/deploy/search/index.ts
index 85967b7ae..1d38b9407 100644
--- a/src/deploy/search/index.ts
+++ b/src/deploy/search/index.ts
@@ -50,7 +50,8 @@ export const selectServicesForTable = createSelector(
   selectApps,
   selectServicesByOrgId,
   selectEndpointsAsList,
-  (envs, apps, services, endpoints) =>
+  schema.manualScaleRecommendations.selectTableAsList,
+  (envs, apps, services, endpoints, recs) =>
     services
       // making sure we have a valid environment associated with it
       .filter((service) => {
@@ -68,11 +69,13 @@ export const selectServicesForTable = createSelector(
         } else {
           resourceHandle = "Unknown";
         }
+        const rec = recs.find((r) => r.serviceId === service.id);
 
         return {
           ...service,
           envHandle: env.handle,
           resourceHandle,
+          savings: rec?.costSavings || 0,
           cost: estimateMonthlyCost({
             services: [service],
             endpoints: findEndpointsByServiceId(endpoints, service.id),
@@ -93,6 +96,13 @@ const createServiceSortFn = (
       return b.cost - a.cost;
     }
 
+    if (sortBy === "savings") {
+      if (sortDir === "asc") {
+        return a.savings - b.savings;
+      }
+      return b.savings - a.savings;
+    }
+
     if (sortBy === "resourceHandle") {
       if (sortDir === "asc") {
         return a.resourceHandle.localeCompare(b.resourceHandle);
@@ -530,6 +540,13 @@ const createDatabaseSortFn = (
       return b.cost - a.cost;
     }
 
+    if (sortBy === "savings") {
+      if (sortDir === "asc") {
+        return a.savings - b.savings;
+      }
+      return b.savings - a.savings;
+    }
+
     if (sortBy === "handle") {
       if (sortDir === "asc") {
         return a.handle.localeCompare(b.handle);
@@ -581,7 +598,8 @@ export const selectDatabasesForTable = createSelector(
   selectEndpointsAsList,
   selectBackupsAsList,
   selectDatabaseImages,
-  (dbs, envs, ops, disks, services, endpoints, backups, images) =>
+  schema.manualScaleRecommendations.selectTableAsList,
+  (dbs, envs, ops, disks, services, endpoints, backups, images, recs) =>
     dbs
       .map((dbb): DeployDatabaseRow => {
         const env = findEnvById(envs, { id: dbb.environmentId });
@@ -600,6 +618,7 @@ export const selectDatabasesForTable = createSelector(
         });
         const metrics = calcMetrics([service]);
         const img = findDatabaseImageById(images, { id: dbb.databaseImageId });
+        const rec = recs.find((s) => s.serviceId === dbb.serviceId);
         return {
           ...dbb,
           imageDesc: img.description,
@@ -608,6 +627,7 @@ export const selectDatabasesForTable = createSelector(
           diskSize: disk.size,
           cost,
           containerSize: metrics.totalMemoryLimit / 1024,
+          savings: rec?.costSavings || 0,
         };
       })
       .sort((a, b) => a.handle.localeCompare(b.handle)),
diff --git a/src/deploy/service-sizing-policy/index.ts b/src/deploy/service-sizing-policy/index.ts
index 8dd4a9a4d..03a08031b 100644
--- a/src/deploy/service-sizing-policy/index.ts
+++ b/src/deploy/service-sizing-policy/index.ts
@@ -1,4 +1,4 @@
-import { api, cacheShortTimer, thunks } from "@app/api";
+import { api, cacheShortTimer, cacheTimer, thunks } from "@app/api";
 import { createSelector } from "@app/fx";
 import { defaultEntity, defaultHalHref, extractIdFromLink } from "@app/hal";
 import { schema } from "@app/schema";
@@ -134,6 +134,13 @@ export const selectAutoscalingEnabledByServiceId = createSelector(
   (policy) => policy.scalingEnabled,
 );
 
+export const fetchServiceSizingPolicies = api.get(
+  "/service_sizing_policies?per_page=5000",
+  {
+    supervisor: cacheTimer(),
+  },
+);
+
 export const fetchServiceSizingPoliciesByEnvironmentId = api.get<{
   id: string;
 }>("/accounts/:id/service_sizing_policies", { supervisor: cacheShortTimer() });
diff --git a/src/schema/factory.ts b/src/schema/factory.ts
index 4469cadd0..be00a1bd5 100644
--- a/src/schema/factory.ts
+++ b/src/schema/factory.ts
@@ -33,6 +33,7 @@ import {
   type GithubIntegration,
   type InstanceClass,
   type Invitation,
+  type ManualScaleRecommendation,
   type Membership,
   ModalType,
   type Organization,
@@ -894,3 +895,22 @@ export const defaultGithubIntegration = (
     ...s,
   };
 };
+
+export const defaultManualScaleRecommendation = (
+  s: Partial<ManualScaleRecommendation> = {},
+): ManualScaleRecommendation => {
+  const now = new Date().toISOString();
+  return {
+    id: "",
+    serviceId: "",
+    cpuUsage: 0,
+    ramUsage: 0,
+    ramTarget: 0,
+    costSavings: 0,
+    recommendedInstanceClass: "",
+    recommendedContainerMemoryLimitMb: 0,
+    metricPercentile: 0,
+    createdAt: now,
+    ...s,
+  };
+};
diff --git a/src/schema/schema.ts b/src/schema/schema.ts
index cbc776e1a..fe189b395 100644
--- a/src/schema/schema.ts
+++ b/src/schema/schema.ts
@@ -85,5 +85,8 @@ export const [schema, initialState] = createSchema({
   githubIntegrations: slice.table({
     empty: factory.defaultGithubIntegration(),
   }),
+  manualScaleRecommendations: slice.table({
+    empty: factory.defaultManualScaleRecommendation(),
+  }),
 });
 export type WebState = typeof initialState;
diff --git a/src/types/state.ts b/src/types/state.ts
index dba8fe235..1850a4a12 100644
--- a/src/types/state.ts
+++ b/src/types/state.ts
@@ -65,6 +65,7 @@ export interface DeployServiceRow extends DeployService {
   envHandle: string;
   resourceHandle: string;
   cost: number;
+  savings: number;
   url?: string;
 }
 
@@ -100,3 +101,16 @@ export interface GithubIntegration {
   createdAt: string;
   updatedAt: string;
 }
+
+export interface ManualScaleRecommendation {
+  id: string;
+  serviceId: string;
+  cpuUsage: number;
+  ramUsage: number;
+  ramTarget: number;
+  recommendedInstanceClass: string;
+  recommendedContainerMemoryLimitMb: number;
+  costSavings: number;
+  createdAt: string;
+  metricPercentile: number;
+}
diff --git a/src/ui/layouts/database-detail-layout.tsx b/src/ui/layouts/database-detail-layout.tsx
index 3fc3cd2c0..c543a9874 100644
--- a/src/ui/layouts/database-detail-layout.tsx
+++ b/src/ui/layouts/database-detail-layout.tsx
@@ -44,6 +44,7 @@ import {
   DetailInfoItem,
   DetailPageHeaderView,
   DetailTitleBar,
+  ScaleRecsView,
   type TabItem,
 } from "../shared";
 import { ActiveOperationNotice } from "../shared/active-operation-notice";
@@ -115,6 +116,9 @@ export function DatabaseHeader({
             </Link>
           </DetailInfoItem>
         )}
+        <DetailInfoItem title="Scaling Recommendations">
+          <ScaleRecsView service={service} />
+        </DetailInfoItem>
       </DetailInfoGrid>
     </DetailHeader>
   );
diff --git a/src/ui/layouts/service-detail-layout.tsx b/src/ui/layouts/service-detail-layout.tsx
index 0cd61739b..695f5d9d8 100644
--- a/src/ui/layouts/service-detail-layout.tsx
+++ b/src/ui/layouts/service-detail-layout.tsx
@@ -40,6 +40,7 @@ import {
   IconChevronDown,
   IconChevronRight,
   PreCode,
+  ScaleRecsView,
   type TabItem,
   listToInvertedTextColor,
 } from "../shared";
@@ -135,6 +136,9 @@ export function ServiceHeader({
             {deploymentStrategy}
           </Link>
         </DetailInfoItem>
+        <DetailInfoItem title="Scaling Recommendations">
+          <ScaleRecsView service={service} />
+        </DetailInfoItem>
       </DetailInfoGrid>
       {service.command ? (
         <div>
diff --git a/src/ui/pages/app-detail-service-scale.tsx b/src/ui/pages/app-detail-service-scale.tsx
index 8e473d8b9..87df5f9a9 100644
--- a/src/ui/pages/app-detail-service-scale.tsx
+++ b/src/ui/pages/app-detail-service-scale.tsx
@@ -14,6 +14,7 @@ import {
   selectContainerProfilesForStack,
   selectEndpointsByServiceId,
   selectEnvironmentById,
+  selectManualScaleRecommendationByServiceId,
   selectPreviousServiceScale,
   selectServiceById,
   selectServiceScale,
@@ -45,6 +46,7 @@ import {
   IconChevronRight,
   IconRefresh,
   KeyValueGroup,
+  ManualScaleReason,
   ServicePricingCalc,
   tokens,
 } from "../shared";
@@ -914,6 +916,9 @@ export const AppDetailServiceScalePage = () => {
   const endpoints = useSelector((s) =>
     selectEndpointsByServiceId(s, { serviceId }),
   );
+  const rec = useSelector((s) =>
+    selectManualScaleRecommendationByServiceId(s, { serviceId: serviceId }),
+  );
 
   const action = scaleService({
     id: serviceId,
@@ -999,10 +1004,25 @@ export const AppDetailServiceScalePage = () => {
     <div className="flex flex-col gap-4">
       <LastScaleBanner serviceId={serviceId} />
       <AutoscalingSection serviceId={serviceId} stackId={stack.id} />
+
       <Box>
         <form onSubmit={onSubmitForm}>
           <div className="flex flex-col gap-2">
             <h1 className="text-lg text-gray-500 mb-4">Manual Scale</h1>
+
+            <ManualScaleReason serviceId={serviceId}>
+              <Button
+                onClick={() => {
+                  setContainerProfileType(
+                    `${rec.recommendedInstanceClass}5` as InstanceClass,
+                  );
+                  setContainerSize(rec.recommendedContainerMemoryLimitMb);
+                }}
+              >
+                Autofill Changes
+              </Button>
+            </ManualScaleReason>
+
             <FormGroup
               splitWidthInputs
               description="Optimize container performance with a custom profile."
diff --git a/src/ui/pages/database-detail-scale.tsx b/src/ui/pages/database-detail-scale.tsx
index fb4a2ddc8..98688b8ec 100644
--- a/src/ui/pages/database-detail-scale.tsx
+++ b/src/ui/pages/database-detail-scale.tsx
@@ -7,6 +7,7 @@ import {
   selectDatabaseById,
   selectDiskById,
   selectEndpointsByServiceId,
+  selectManualScaleRecommendationByServiceId,
   selectServiceById,
 } from "@app/deploy";
 import {
@@ -17,6 +18,7 @@ import {
   useSelector,
 } from "@app/react";
 import { databaseActivityUrl } from "@app/routes";
+import type { InstanceClass } from "@app/types";
 import { diskSizeValidator } from "@app/validator";
 import { useNavigate, useParams } from "react-router";
 import {
@@ -32,6 +34,8 @@ import {
   ContainerSizeInput,
   CpuShareView,
   DiskSizeInput,
+  Group,
+  ManualScaleReason,
   ServicePricingCalc,
 } from "../shared";
 
@@ -66,6 +70,11 @@ export const DatabaseScalePage = () => {
   const backups = useSelector((s) =>
     selectBackupsByDatabaseId(s, { dbId: id }),
   );
+  const rec = useSelector((s) =>
+    selectManualScaleRecommendationByServiceId(s, {
+      serviceId: database.serviceId,
+    }),
+  );
 
   const {
     scaler,
@@ -95,106 +104,131 @@ export const DatabaseScalePage = () => {
   });
 
   return (
-    <Box>
-      <form onSubmit={onSubmitForm}>
-        <div className="flex flex-col gap-2">
-          <ContainerProfileInput
-            scaler={scaler}
-            dispatchScaler={dispatchScaler}
-            envId={database.environmentId}
-          />
-          <DiskSizeInput
-            scaler={scaler}
-            dispatchScaler={dispatchScaler}
-            error={errors.diskSize}
-          />
-          <ContainerSizeInput scaler={scaler} dispatchScaler={dispatchScaler} />
-          <CpuShareView
-            cpuShare={requestedContainerProfile.cpuShare}
-            containerSize={scaler.containerSize}
-          />
-        </div>
-
-        <ServicePricingCalc
-          service={service}
-          disk={disk}
-          endpoints={endpoints}
-          backups={backups}
-        />
+    <Group>
+      <Box>
+        <form onSubmit={onSubmitForm}>
+          <div className="flex flex-col gap-2">
+            <h1 className="text-lg text-gray-500 mb-4">Manual Scale</h1>
 
-        <hr />
+            <ManualScaleReason serviceId={service.id}>
+              <Button
+                onClick={() => {
+                  dispatchScaler({
+                    type: "containerProfile",
+                    payload:
+                      `${rec.recommendedInstanceClass}5` as InstanceClass,
+                  });
+                  dispatchScaler({
+                    type: "containerSize",
+                    payload: rec.recommendedContainerMemoryLimitMb,
+                  });
+                }}
+              >
+                Autofill Changes
+              </Button>
+            </ManualScaleReason>
 
-        {hasChanges ? (
-          <div className="text-md font-semibold text-gray-900 mt-4">
-            Pending Changes
-          </div>
-        ) : null}
-        {scaler.containerProfile !== service.instanceClass ? (
-          <div className="my-3">
-            <div className="text-md text-gray-900">Container Profile</div>
-            <p className="text-black-500">
-              Changed from {currentContainerProfile.name} to{" "}
-              {requestedContainerProfile.name}
-            </p>
+            <ContainerProfileInput
+              scaler={scaler}
+              dispatchScaler={dispatchScaler}
+              envId={database.environmentId}
+            />
+            <DiskSizeInput
+              scaler={scaler}
+              dispatchScaler={dispatchScaler}
+              error={errors.diskSize}
+            />
+            <ContainerSizeInput
+              scaler={scaler}
+              dispatchScaler={dispatchScaler}
+            />
+            <CpuShareView
+              cpuShare={requestedContainerProfile.cpuShare}
+              containerSize={scaler.containerSize}
+            />
           </div>
-        ) : null}
-        {scaler.diskSize !== disk.size ? (
-          <div className="my-3">
-            <div className="text-md text-gray-900">Disk Size</div>
-            <p className="text-black-500">
-              Changed from {disk.size} GB to {scaler.diskSize} GB
-            </p>
-          </div>
-        ) : null}
-        {scaler.containerSize !== service.containerMemoryLimitMb ? (
-          <div className="my-3">
-            <div className="text-md text-gray-900">Container Size</div>
-            <p className="text-black-500">
-              Changed from {service.containerMemoryLimitMb / 1024} GB to{" "}
-              {scaler.containerSize / 1024} GB
-            </p>
-          </div>
-        ) : null}
-        {hasChanges ? (
+
           <ServicePricingCalc
-            service={{
-              containerCount: service.containerCount,
-              containerMemoryLimitMb: scaler.containerSize,
-              instanceClass: scaler.containerProfile,
-            }}
-            disk={{ size: scaler.diskSize, provisionedIops: scaler.iops }}
+            service={service}
+            disk={disk}
             endpoints={endpoints}
             backups={backups}
           />
-        ) : null}
 
-        <BannerMessages {...loader} />
+          <hr />
 
-        <div className="flex mt-4">
-          <Button
-            className="w-40 flex font-semibold"
-            disabled={!hasChanges}
-            type="submit"
-            isLoading={loader.isLoading}
-          >
-            Save Changes
-          </Button>
           {hasChanges ? (
-            <Button
-              className="w-40 ml-2 flex font-semibold"
-              onClick={() => {
-                dispatchScaler({
-                  type: "set",
-                  payload: defaultDatabaseScaler(service, disk),
-                });
+            <div className="text-md font-semibold text-gray-900 mt-4">
+              Pending Changes
+            </div>
+          ) : null}
+          {scaler.containerProfile !== service.instanceClass ? (
+            <div className="my-3">
+              <div className="text-md text-gray-900">Container Profile</div>
+              <p className="text-black-500">
+                Changed from {currentContainerProfile.name} to{" "}
+                {requestedContainerProfile.name}
+              </p>
+            </div>
+          ) : null}
+          {scaler.diskSize !== disk.size ? (
+            <div className="my-3">
+              <div className="text-md text-gray-900">Disk Size</div>
+              <p className="text-black-500">
+                Changed from {disk.size} GB to {scaler.diskSize} GB
+              </p>
+            </div>
+          ) : null}
+          {scaler.containerSize !== service.containerMemoryLimitMb ? (
+            <div className="my-3">
+              <div className="text-md text-gray-900">Container Size</div>
+              <p className="text-black-500">
+                Changed from {service.containerMemoryLimitMb / 1024} GB to{" "}
+                {scaler.containerSize / 1024} GB
+              </p>
+            </div>
+          ) : null}
+          {hasChanges ? (
+            <ServicePricingCalc
+              service={{
+                containerCount: service.containerCount,
+                containerMemoryLimitMb: scaler.containerSize,
+                instanceClass: scaler.containerProfile,
               }}
-              variant="white"
+              disk={{ size: scaler.diskSize, provisionedIops: scaler.iops }}
+              endpoints={endpoints}
+              backups={backups}
+            />
+          ) : null}
+
+          <BannerMessages {...loader} />
+
+          <div className="flex mt-4">
+            <Button
+              className="w-40 flex font-semibold"
+              disabled={!hasChanges}
+              type="submit"
+              isLoading={loader.isLoading}
             >
-              Cancel
+              Save Changes
             </Button>
-          ) : null}
-        </div>
-      </form>
-    </Box>
+            {hasChanges ? (
+              <Button
+                className="w-40 ml-2 flex font-semibold"
+                onClick={() => {
+                  dispatchScaler({
+                    type: "set",
+                    payload: defaultDatabaseScaler(service, disk),
+                  });
+                }}
+                variant="white"
+              >
+                Cancel
+              </Button>
+            ) : null}
+          </div>
+        </form>
+      </Box>
+    </Group>
   );
 };
diff --git a/src/ui/pages/styles.tsx b/src/ui/pages/styles.tsx
index 465df1735..c32a0ddca 100644
--- a/src/ui/pages/styles.tsx
+++ b/src/ui/pages/styles.tsx
@@ -27,8 +27,11 @@ import {
   CheckBox,
   FormGroup,
   Group,
-  IconGitBranch,
+  IconAutoscale,
   IconPlusCircle,
+  IconScaleCheck,
+  IconScaleDown,
+  IconScaleUp,
   Input,
   InputSearch,
   KeyValueGroup,
@@ -147,7 +150,11 @@ const Tables = () => (
 
       <TBody>
         <Tr>
-          <Td>Row 1 Value 1</Td>
+          <Td>
+            <Pill icon={<IconAutoscale variant="sm" />} key="test">
+              <span className="text-black">Autoscaling</span>
+            </Pill>
+          </Td>
           <Td>Row 1 Value 2</Td>
           <Td>Row 1 Value 3</Td>
           <Td>Row 1 Value 4</Td>
@@ -159,7 +166,11 @@ const Tables = () => (
           <Td>Row 1 Value 10</Td>
         </Tr>
         <Tr>
-          <Td>Row 2 Value 1</Td>
+          <Td>
+            <Pill icon={<IconScaleCheck variant="sm" />} key="test">
+              <span className="text-black">Right Sized</span>
+            </Pill>
+          </Td>
           <Td>Row 2 Value 2</Td>
           <Td>Row 2 Value 3</Td>
           <Td>Row 2 Value 4</Td>
@@ -171,7 +182,16 @@ const Tables = () => (
           <Td>Row 2 Value 10</Td>
         </Tr>
         <Tr>
-          <Td>Row 3 Value 1</Td>
+          <Td>
+            <Pill
+              variant="error"
+              icon={<IconScaleUp variant="sm" />}
+              key="test"
+            >
+              Scale Up
+            </Pill>
+            <span>View Metrics</span>
+          </Td>
           <Td>Row 3 Value 2</Td>
           <Td>Row 3 Value 3</Td>
           <Td>Row 3 Value 4</Td>
@@ -183,7 +203,16 @@ const Tables = () => (
           <Td>Row 3 Value 10</Td>
         </Tr>
         <Tr>
-          <Td>Row 4 Value 1</Td>
+          <Td>
+            <Pill
+              variant="progress"
+              icon={<IconScaleDown variant="sm" />}
+              key="test"
+            >
+              Scale Down
+            </Pill>
+            <span>Save up to $10.42</span>
+          </Td>
           <Td>Row 4 Value 2</Td>
           <Td>Row 4 Value 3</Td>
           <Td>Row 4 Value 4</Td>
@@ -518,18 +547,31 @@ const Pills = () => (
     <div className="mt-4">
       <h3 className={tokens.type.h3}>Customizable pill with icon</h3>
       <div className="mt-4">
-        <Pill icon={<IconGitBranch variant="sm" />} key="test">
-          Basic Icon With Pill
+        <Pill icon={<IconAutoscale variant="sm" />} key="test">
+          <span className="text-black">Autoscaling</span>
         </Pill>
       </div>
       <div className="mt-4">
-        <Pill variant="error">Error Pill</Pill>
+        <Pill icon={<IconScaleCheck variant="sm" />} key="test">
+          <span className="text-black">Right Sized</span>
+        </Pill>
       </div>
       <div className="mt-4">
-        <Pill variant="pending">Pending Pill</Pill>
+        <Pill variant="error" icon={<IconScaleUp variant="sm" />} key="test">
+          Scale Up
+        </Pill>
       </div>
       <div className="mt-4">
-        <Pill variant="progress">Progress Pill</Pill>
+        <Pill
+          variant="progress"
+          icon={<IconScaleDown variant="sm" />}
+          key="test"
+        >
+          Scale Down
+        </Pill>
+      </div>
+      <div className="mt-4">
+        <Pill variant="pending">Pending Pill</Pill>
       </div>
       <div className="mt-4">
         <Pill variant="success">Success Pill</Pill>
diff --git a/src/ui/shared/app/services-detail.tsx b/src/ui/shared/app/services-detail.tsx
index c838477d2..3bbe51ec5 100644
--- a/src/ui/shared/app/services-detail.tsx
+++ b/src/ui/shared/app/services-detail.tsx
@@ -28,9 +28,9 @@ import { CopyTextButton } from "../copy";
 import { CostEstimateTooltip } from "../cost-estimate-tooltip";
 import { Group } from "../group";
 import { IconChevronDown, IconInfo } from "../icons";
-import { Pill } from "../pill";
 import { DescBar, FilterBar, PaginateBar } from "../resource-list-view";
 import { EnvStackCell } from "../resource-table";
+import { ScaleRecsView } from "../scale-recs";
 import { EmptyTr, TBody, THead, Table, Td, Th, Tr } from "../table";
 import { tokens } from "../tokens";
 import { Tooltip } from "../tooltip";
@@ -149,16 +149,10 @@ const CostCell = ({
   );
 };
 
-const AutoscaleCell = ({ service }: { service: DeployServiceRow }) => {
-  const enabled = useSelector((s) =>
-    selectAutoscalingEnabledById(s, { id: service.serviceSizingPolicyId }),
-  );
-  const variant = enabled ? "success" : "default";
-  const text = enabled ? "Enabled" : "Disabled";
-
+const ScaleRecsCell = ({ service }: { service: DeployServiceRow }) => {
   return (
     <Td>
-      <Pill variant={variant}>{text}</Pill>
+      <ScaleRecsView service={service} />
     </Td>
   );
 };
@@ -188,7 +182,7 @@ const AppServiceByAppRow = ({
         costLoading={costLoading}
         evaluateAutoscaling={autoscalingEnabled}
       />
-      {autoscalingEnabled ? <AutoscaleCell service={service} /> : null}
+      <ScaleRecsCell service={service} />
 
       <Td variant="right">
         <Group size="sm" variant="horizontal">
@@ -245,6 +239,7 @@ const AppServiceByOrgRow = ({
         <CmdCell service={service} />
         <DetailsCell service={service} />
         <CostCell service={service} costLoading={costLoading} />
+        <ScaleRecsCell service={service} />
 
         <Td variant="right">
           <div className="h-[40px] flex items-center">
@@ -313,6 +308,18 @@ export function AppServicesByOrg({
             />
           </div>
         </Th>
+        <Th
+          className="cursor-pointer hover:text-black group"
+          onClick={() => onSort("savings")}
+        >
+          Scale Recs{" "}
+          <div className="inline-block">
+            <IconChevronDown
+              variant="sm"
+              className="top-1 -ml-1 relative group-hover:opacity-100 opacity-50"
+            />
+          </div>
+        </Th>
         <Th variant="right">Actions</Th>
       </THead>
 
@@ -357,9 +364,6 @@ export function AppServicesByApp({
   costQueries.forEach((q) => useQuery(q));
   const { isLoading: isCostLoading } = useCompositeLoader(costQueries);
 
-  const autoscalingEnabled =
-    stack.verticalAutoscaling || stack.horizontalAutoscaling;
-
   return (
     <Group>
       <Group size="sm">
@@ -377,14 +381,12 @@ export function AppServicesByApp({
           <Th>Command</Th>
           <Th>Details</Th>
           <Th>Est. Monthly Cost</Th>
-          {autoscalingEnabled ? <Th>Autoscaling</Th> : null}
+          <Th>Scale Recs</Th>
           <Th variant="right">Actions</Th>
         </THead>
 
         <TBody>
-          {paginated.data.length === 0 ? (
-            <EmptyTr colSpan={autoscalingEnabled ? 6 : 5} />
-          ) : null}
+          {paginated.data.length === 0 ? <EmptyTr colSpan={6} /> : null}
           {paginated.data.map((service) => (
             <AppServiceByAppRow
               key={service.id}
diff --git a/src/ui/shared/db/database-list.tsx b/src/ui/shared/db/database-list.tsx
index d2d62831b..6c3014333 100644
--- a/src/ui/shared/db/database-list.tsx
+++ b/src/ui/shared/db/database-list.tsx
@@ -53,6 +53,7 @@ import {
   TitleBar,
 } from "../resource-list-view";
 import { EnvStackCell } from "../resource-table";
+import { ScaleRecsView } from "../scale-recs";
 import { EmptyTr, TBody, THead, Table, Td, Th, Tr } from "../table";
 import { tokens } from "../tokens";
 import { Tooltip } from "../tooltip";
@@ -98,6 +99,17 @@ const DatabaseIdCell = ({ database }: DatabaseCellProps) => {
   return <Td className="flex-1">{database.id}</Td>;
 };
 
+const DatabaseScaleRecsCell = ({ database }: { database: DeployDatabase }) => {
+  const service = useSelector((s) =>
+    selectServiceById(s, { id: database.serviceId }),
+  );
+  return (
+    <Td>
+      <ScaleRecsView service={service} />
+    </Td>
+  );
+};
+
 const DatabaseCostCell = ({
   database,
   costLoading,
@@ -300,11 +312,18 @@ export const DatabaseListByOrg = () => {
             <div>Est. Monthly Cost</div>
             <SortIcon />
           </Th>
+          <Th
+            className="cursor-pointer hover:text-black"
+            onClick={() => onSort("savings")}
+          >
+            <div>Scaling Recs</div>
+            <SortIcon />
+          </Th>
           <Th variant="right">Actions</Th>
         </THead>
 
         <TBody>
-          {paginated.data.length === 0 ? <EmptyTr colSpan={7} /> : null}
+          {paginated.data.length === 0 ? <EmptyTr colSpan={8} /> : null}
           {paginated.data.map((db) => (
             <Tr key={db.id}>
               <DatabasePrimaryCell database={db} />
@@ -313,6 +332,7 @@ export const DatabaseListByOrg = () => {
               <DatabaseDiskSizeCell database={db} />
               <DatabaseContainerSizeCell database={db} />
               <DatabaseCostCell database={db} costLoading={isCostLoading} />
+              <DatabaseScaleRecsCell database={db} />
               <DatabaseActionsCell database={db} />
             </Tr>
           ))}
@@ -386,11 +406,12 @@ export const DatabaseListByEnvironment = ({
           <Th className="flex space-x-2">
             <div>Est. Monthly Cost</div>
           </Th>
+          <Th>Scaling Recs</Th>
           <Th variant="right">Actions</Th>
         </THead>
 
         <TBody>
-          {paginated.data.length === 0 ? <EmptyTr colSpan={6} /> : null}
+          {paginated.data.length === 0 ? <EmptyTr colSpan={7} /> : null}
           {paginated.data.map((db) => (
             <Tr key={db.id}>
               <DatabasePrimaryCell database={db} />
@@ -398,6 +419,7 @@ export const DatabaseListByEnvironment = ({
               <DatabaseDiskSizeCell database={db} />
               <DatabaseContainerSizeCell database={db} />
               <DatabaseCostCell database={db} costLoading={isCostLoading} />
+              <DatabaseScaleRecsCell database={db} />
               <DatabaseActionsCell database={db} />
             </Tr>
           ))}
diff --git a/src/ui/shared/icons.tsx b/src/ui/shared/icons.tsx
index 4bfebeab1..81e9739ac 100644
--- a/src/ui/shared/icons.tsx
+++ b/src/ui/shared/icons.tsx
@@ -657,3 +657,83 @@ export const IconExternalResource = (props: IconProps) => {
     </IconStrokeBase>
   );
 };
+
+export const IconScaleDown = (props: IconProps) => {
+  return (
+    <IconStrokeBase
+      {...props}
+      title="Scale Down"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+    >
+      <path
+        d="M12.6663 9.33333L7.99967 14M7.99967 14L3.33301 9.33333M7.99967 14V2"
+        stroke="#4361FF"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconStrokeBase>
+  );
+};
+
+export const IconScaleUp = (props: IconProps) => {
+  return (
+    <IconStrokeBase
+      {...props}
+      title="Scale Up"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+    >
+      <path
+        d="M3.33301 6.66667L7.99967 2M7.99967 2L12.6663 6.66667M7.99967 2V14"
+        stroke="#AD1A1A"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconStrokeBase>
+  );
+};
+
+export const IconAutoscale = (props: IconProps) => {
+  return (
+    <IconStrokeBase
+      {...props}
+      title="Autoscale"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+    >
+      <path
+        d="M10.25 9.58824L8 5L5.75 9.58824M10.25 9.58824L11 11M10.25 9.58824H5.75M5.75 9.58824L5 11M3.5 14H12.5C12.8978 14 13.2794 13.842 13.5607 13.5607C13.842 13.2794 14 12.8978 14 12.5V3.5C14 3.10218 13.842 2.72064 13.5607 2.43934C13.2794 2.15804 12.8978 2 12.5 2H3.5C3.10218 2 2.72064 2.15804 2.43934 2.43934C2.15804 2.72064 2 3.10218 2 3.5V12.5C2 12.8978 2.15804 13.2794 2.43934 13.5607C2.72064 13.842 3.10218 14 3.5 14Z"
+        stroke="#111920"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconStrokeBase>
+  );
+};
+
+export const IconScaleCheck = (props: IconProps) => {
+  return (
+    <IconStrokeBase
+      {...props}
+      title="Scale Check"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+    >
+      <path
+        d="M3 8.5L7 12.5L13 3.5"
+        stroke="#111920"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconStrokeBase>
+  );
+};
diff --git a/src/ui/shared/index.ts b/src/ui/shared/index.ts
index 398a47033..ca7835a48 100644
--- a/src/ui/shared/index.ts
+++ b/src/ui/shared/index.ts
@@ -74,3 +74,4 @@ export * from "./service-pricing-calc";
 export * from "./cost-estimate-tooltip";
 export * from "./us-states";
 export * from "./countries";
+export * from "./scale-recs";
diff --git a/src/ui/shared/pill.tsx b/src/ui/shared/pill.tsx
index 0da533a3e..85ac22207 100644
--- a/src/ui/shared/pill.tsx
+++ b/src/ui/shared/pill.tsx
@@ -49,7 +49,7 @@ export const Pill = ({
   const defaultClassName = cn(
     "rounded-full border-2",
     "text-sm font-semibold text-black-500",
-    "px-2 flex gap-2 justify-between items-center w-fit",
+    "px-2 flex gap-1 justify-between items-center w-fit",
     variantToClassName(variant),
   );
   return (
diff --git a/src/ui/shared/scale-recs.tsx b/src/ui/shared/scale-recs.tsx
new file mode 100644
index 000000000..b2be29801
--- /dev/null
+++ b/src/ui/shared/scale-recs.tsx
@@ -0,0 +1,171 @@
+import { dateFromToday } from "@app/date";
+import {
+  GB,
+  getContainerProfileFromType,
+  selectAutoscalingEnabledById,
+  selectManualScaleRecommendationByServiceId,
+  selectServiceById,
+} from "@app/deploy";
+import { useSelector } from "@app/react";
+import {
+  appServicePathMetricsUrl,
+  appServiceScalePathUrl,
+  databaseMetricsUrl,
+  databaseScaleUrl,
+} from "@app/routes";
+import type {
+  DeployService,
+  InstanceClass,
+  ManualScaleRecommendation,
+} from "@app/types";
+import { Link } from "react-router-dom";
+import { Banner } from "./banner";
+import { Group } from "./group";
+import {
+  IconAutoscale,
+  IconScaleCheck,
+  IconScaleDown,
+  IconScaleUp,
+} from "./icons";
+import { Pill } from "./pill";
+
+const isManualScaleRecValid = (
+  service: DeployService,
+  rec: ManualScaleRecommendation,
+) => {
+  if (rec.id === "") {
+    return { isValid: false, isProfileSame: true, isSizeSame: true };
+  }
+  const isProfileSame = service.instanceClass.startsWith(
+    rec.recommendedInstanceClass,
+  );
+
+  const isSizeSame =
+    service.containerMemoryLimitMb === rec.recommendedContainerMemoryLimitMb;
+  // we want to expire recommendations that are greater than X days old
+  const withinTimelimit = new Date(rec.createdAt) > dateFromToday(2);
+  const isValid = !isProfileSame || !isSizeSame || !withinTimelimit;
+  return { isValid, isProfileSame, isSizeSame };
+};
+
+export const ManualScaleReason = ({
+  serviceId,
+  children,
+}: { serviceId: string; children: React.ReactNode }) => {
+  const service = useSelector((s) => selectServiceById(s, { id: serviceId }));
+  const rec = useSelector((s) =>
+    selectManualScaleRecommendationByServiceId(s, { serviceId: serviceId }),
+  );
+  const { isValid, isProfileSame, isSizeSame } = isManualScaleRecValid(
+    service,
+    rec,
+  );
+
+  if (!isValid) {
+    return null;
+  }
+
+  const recProfile = getContainerProfileFromType(
+    `${rec.recommendedInstanceClass}5` as InstanceClass,
+  );
+
+  let msg = "Based on container metrics in the last 14 days, we recommend";
+  if (!isProfileSame) {
+    msg += ` modifying your container profile to ${recProfile.name} class`;
+  }
+  if (!isProfileSame && !isSizeSame) {
+    msg += " and ";
+  }
+  if (!isSizeSame) {
+    msg += ` modifying your container size to ${rec.recommendedContainerMemoryLimitMb / GB} GB`;
+  }
+
+  return (
+    <Banner variant="info" showIcon={false} className="mb-4">
+      <Group variant="horizontal" className="items-center">
+        <div className="flex flex-col items-center">
+          <ManualScaleRecView serviceId={serviceId} />
+        </div>
+        <div className="flex-1">
+          <span>{msg}. </span>
+          <span className="font-bold">
+            We recommend conducting your own container and usage review before
+            scaling.{" "}
+          </span>
+          <Link
+            to={
+              service.appId
+                ? appServicePathMetricsUrl(service.appId, service.id)
+                : databaseMetricsUrl(service.databaseId)
+            }
+          >
+            See metrics
+          </Link>
+        </div>
+        <div>{children}</div>
+      </Group>
+    </Banner>
+  );
+};
+
+export const ManualScaleRecView = ({ serviceId }: { serviceId: string }) => {
+  const service = useSelector((s) => selectServiceById(s, { id: serviceId }));
+  const rec = useSelector((s) =>
+    selectManualScaleRecommendationByServiceId(s, { serviceId: serviceId }),
+  );
+  const { isValid } = isManualScaleRecValid(service, rec);
+  const savings = rec.costSavings;
+
+  if (rec.id === "") {
+    return null;
+  }
+
+  if (savings === 0 || !isValid) {
+    return (
+      <Pill icon={<IconScaleCheck variant="sm" />}>
+        <span className="text-black">Right Sized</span>
+      </Pill>
+    );
+  }
+  const url = service.appId
+    ? appServiceScalePathUrl(service.appId, serviceId)
+    : databaseScaleUrl(service.databaseId);
+
+  const scaleDir = savings < 0 ? "up" : "down";
+  if (scaleDir === "up") {
+    return (
+      <Link to={url}>
+        <Pill variant="error" icon={<IconScaleUp variant="sm" />}>
+          Scale Up
+        </Pill>
+      </Link>
+    );
+  }
+
+  return (
+    <>
+      <Link to={url}>
+        <Pill variant="progress" icon={<IconScaleDown variant="sm" />}>
+          Scale Down
+        </Pill>
+      </Link>
+      <div>Save up to ${savings.toFixed(2)}</div>
+    </>
+  );
+};
+
+export const ScaleRecsView = ({ service }: { service: DeployService }) => {
+  const enabled = useSelector((s) =>
+    selectAutoscalingEnabledById(s, { id: service.serviceSizingPolicyId }),
+  );
+  return (
+    <div>
+      {enabled ? (
+        <Pill icon={<IconAutoscale variant="sm" />}>
+          <span className="text-black">Autoscaling</span>
+        </Pill>
+      ) : null}
+      {enabled ? null : <ManualScaleRecView serviceId={service.id} />}
+    </div>
+  );
+};