diff --git a/web/src/components/psc/checklist-table.tsx b/web/src/components/psc/checklist-table.tsx
index 29fe470..a69729a 100644
--- a/web/src/components/psc/checklist-table.tsx
+++ b/web/src/components/psc/checklist-table.tsx
@@ -23,7 +23,7 @@ export default component$((props: { section: Section }) => {
   const originalFilters = {
     show: 'all', // 'all', 'remaining', 'completed'
     levels: {
-      recommended: true,
+      essential: true,
       optional: true,
       advanced: true,
     },
@@ -33,7 +33,7 @@ export default component$((props: { section: Section }) => {
 
   const getBadgeClass = (priority: Priority, precedeClass: string = '') => {
     switch (priority.toLocaleLowerCase()) {
-      case 'recommended':
+      case 'essential':
         return `${precedeClass}success`;
       case 'optional':
         return `${precedeClass}warning`;
@@ -87,7 +87,7 @@ export default component$((props: { section: Section }) => {
         case 'advice':
           return item.point;
         case 'level':
-          return ['recommended', 'optional', 'advanced'].indexOf(item.priority.toLowerCase());
+          return ['essential', 'optional', 'advanced'].indexOf(item.priority.toLowerCase());
         default:
           return 0;
       }
@@ -198,8 +198,8 @@ export default component$((props: { section: Section }) => {
             <span class="text-sm">Basic</span> 
             <input
               type="checkbox"
-              checked={filterState.levels.recommended}
-              onChange$={() => (filterState.levels.recommended = !filterState.levels.recommended)}
+              checked={filterState.levels.essential}
+              onChange$={() => (filterState.levels.essential = !filterState.levels.essential)}
               class="checkbox checkbox-sm checked:checkbox-success"
             />
           </label>
diff --git a/web/src/components/psc/progress.tsx b/web/src/components/psc/progress.tsx
index 5416d77..5692414 100644
--- a/web/src/components/psc/progress.tsx
+++ b/web/src/components/psc/progress.tsx
@@ -151,7 +151,7 @@ export default component$(() => {
         totalProgress.value = progress;
     })
 
-    makeDataAndDrawChart('recommended', 'hsl(var(--su, 158 64% 52%))');
+    makeDataAndDrawChart('essential', 'hsl(var(--su, 158 64% 52%))');
     makeDataAndDrawChart('optional', 'hsl(var(--wa, 43 96% 56%))');
     makeDataAndDrawChart('advanced', 'hsl(var(--er, 0 91% 71%))');
   }));
@@ -212,7 +212,7 @@ export default component$(() => {
     return Promise.all([
       buildDataForPriority('advanced', 'hsl(0 91% 71%/75%)'),
       buildDataForPriority('optional', 'hsl(43 96% 56%/75%)'),
-      buildDataForPriority('recommended', 'hsl(158 64% 52%/75%)'),      
+      buildDataForPriority('essential', 'hsl(158 64% 52%/75%)'),      
     ]).then(datasets => ({
       labels,
       datasets,
@@ -274,7 +274,7 @@ export default component$(() => {
   }));
 
   const items = [
-    { id: 'recommended-container', label: 'Essential' },
+    { id: 'essential-container', label: 'Essential' },
     { id: 'optional-container', label: 'Optional' },
     { id: 'advanced-container', label: 'Advanced' },
   ];
diff --git a/web/src/types/PSC.ts b/web/src/types/PSC.ts
index bc65064..52ea733 100644
--- a/web/src/types/PSC.ts
+++ b/web/src/types/PSC.ts
@@ -18,7 +18,7 @@ export interface Section {
   furtherResources?: Link[],
 }
 
-export type Priority = 'recommended' | 'optional' | 'advanced';
+export type Priority = 'essential' | 'optional' | 'advanced';
 
 export interface Checklist {
   point: string,