diff --git a/apps/picsa-apps/extension-app-native/android/app/build.gradle b/apps/picsa-apps/extension-app-native/android/app/build.gradle
index 5b510deea..cba42cd9f 100644
--- a/apps/picsa-apps/extension-app-native/android/app/build.gradle
+++ b/apps/picsa-apps/extension-app-native/android/app/build.gradle
@@ -6,8 +6,8 @@ android {
         applicationId "io.picsa.extension"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 3031001
-        versionName "3.31.1"
+        versionCode 3032000
+        versionName "3.32.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
diff --git a/apps/picsa-apps/extension-app/project.json b/apps/picsa-apps/extension-app/project.json
index 5ab62e191..c16b2e23d 100644
--- a/apps/picsa-apps/extension-app/project.json
+++ b/apps/picsa-apps/extension-app/project.json
@@ -86,9 +86,12 @@
           "apps/picsa-tools/budget-tool/src/styles.scss",
           "apps/picsa-tools/resources-tool/src/styles.scss",
           "libs/theme/src/_index.scss",
-          "apps/picsa-apps/extension-app/src/styles.scss"
+          "apps/picsa-apps/extension-app/src/styles.scss",
+          "node_modules/intro.js/introjs.css"
         ],
-        "scripts": []
+        "scripts": [
+          "node_modules/intro.js/intro.js"
+        ]
       },
       "configurations": {
         "production": {
diff --git a/apps/picsa-apps/extension-app/src/app/material.module.ts b/apps/picsa-apps/extension-app/src/app/material.module.ts
index 3204946cf..68788b73f 100644
--- a/apps/picsa-apps/extension-app/src/app/material.module.ts
+++ b/apps/picsa-apps/extension-app/src/app/material.module.ts
@@ -28,6 +28,7 @@ export class ExtensionToolkitMaterialModule {
       play_store: 'play_store',
       probability_tool: 'probability_tool',
       resources_tool: 'resources_tool',
+      tutorial: 'tutorial',
       whatsapp: 'whatsapp',
     };
     for (const [key, value] of Object.entries(icons)) {
diff --git a/apps/picsa-apps/extension-app/src/app/pages/home/home.page.html b/apps/picsa-apps/extension-app/src/app/pages/home/home.page.html
index 591047663..0c5ee5500 100644
--- a/apps/picsa-apps/extension-app/src/app/pages/home/home.page.html
+++ b/apps/picsa-apps/extension-app/src/app/pages/home/home.page.html
@@ -4,12 +4,24 @@
 
 <div class="page-content background-image">
   <div class="link-grid">
-    <div *ngFor="let link of links" data-cy="link" class="grid-tile" (click)="linkClicked(link)">
+    <div
+      *ngFor="let link of links"
+      [attr.data-tour-id]="link.tourId"
+      data-cy="link"
+      class="grid-tile"
+      (click)="linkClicked(link)"
+    >
       <div style="text-align: center">
         <mat-icon [svgIcon]="link.icon" class="nav-icon"></mat-icon>
         <div class="nav-text">{{ link.name | translate }}</div>
       </div>
     </div>
+    <div class="grid-tile" (click)="startTour()" style="position: relative">
+      <div style="text-align: center">
+        <mat-icon svgIcon="picsa_tutorial" class="nav-icon"></mat-icon>
+        <div class="nav-text">{{ 'Take App Tour' | translate }}</div>
+      </div>
+    </div>
   </div>
 
   <footer>
diff --git a/apps/picsa-apps/extension-app/src/app/pages/home/home.page.ts b/apps/picsa-apps/extension-app/src/app/pages/home/home.page.ts
index 33338b3ad..e573403fe 100644
--- a/apps/picsa-apps/extension-app/src/app/pages/home/home.page.ts
+++ b/apps/picsa-apps/extension-app/src/app/pages/home/home.page.ts
@@ -4,11 +4,18 @@ import { Router } from '@angular/router';
 import { marker as translateMarker } from '@biesbjerg/ngx-translate-extract-marker';
 import { PicsaCommonComponentsService } from '@picsa/components/src';
 import { APP_VERSION } from '@picsa/environments';
+import { TourService } from '@picsa/shared/services/core/tour.service';
+import { CommunicationService } from '@picsa/shared/services/promptToHomePageService.service';
+import { Subscription } from 'rxjs';
+
+import { HOME_TOUR } from './home.tour';
 
 interface IPageLink {
   name: string;
   icon: string;
   url: string;
+  /** Element ID used in tours */
+  tourId: string;
 }
 
 const PAGE_LINKS: IPageLink[] = [
@@ -16,36 +23,43 @@ const PAGE_LINKS: IPageLink[] = [
     name: translateMarker('Manual'),
     icon: 'picsa_manual_tool',
     url: '/manual',
+    tourId: 'manual',
   },
   {
     name: translateMarker('Resources'),
     icon: 'picsa_resources_tool',
     url: '/resources',
+    tourId: 'resources',
   },
   {
     name: translateMarker('Monitoring'),
     icon: 'picsa_data_collection',
     url: '/monitoring',
+    tourId: 'monitoring',
   },
   {
     name: translateMarker('Climate'),
     icon: 'picsa_climate_tool',
     url: '/climate',
+    tourId: 'climate',
   },
   {
     name: translateMarker('Budget'),
     icon: 'picsa_budget_tool',
     url: '/budget',
+    tourId: 'budget',
   },
   {
     name: translateMarker('Probability'),
     icon: 'picsa_probability_tool',
     url: '/crop-probability',
+    tourId: 'crop-probability',
   },
   {
     name: translateMarker('Options'),
     icon: 'picsa_option_tool',
     url: '/option',
+    tourId: 'option',
   },
 
   // {
@@ -70,10 +84,17 @@ export class HomePage implements OnDestroy, AfterViewInit {
   public links = PAGE_LINKS;
   public version = APP_VERSION;
 
+  private userEventSubscription: Subscription;
+
   @ViewChild('headerContent')
   headerContent: ElementRef<HTMLElement>;
 
-  constructor(private router: Router, private componentsService: PicsaCommonComponentsService) {}
+  constructor(
+    private router: Router,
+    private componentsService: PicsaCommonComponentsService,
+    private communicationService: CommunicationService,
+    private tourService: TourService
+  ) {}
 
   linkClicked(link: IPageLink) {
     this.router.navigate([link.url]);
@@ -81,10 +102,20 @@ export class HomePage implements OnDestroy, AfterViewInit {
 
   ngOnDestroy(): void {
     this.componentsService.patchHeader({ endContent: undefined });
+    // this.userEventSubscription.unsubscribe();
   }
+
   ngAfterViewInit() {
     this.componentsService.patchHeader({
       endContent: new DomPortal(this.headerContent),
     });
+    // this.userEventSubscription = this.communicationService.userEvent$.subscribe(() => {
+    //   // Trigger the guided tour when the prompt event occurs
+    //   this.startTour();
+    // });
+  }
+
+  public startTour() {
+    this.tourService.startTour(HOME_TOUR);
   }
 }
diff --git a/apps/picsa-apps/extension-app/src/app/pages/home/home.tour.ts b/apps/picsa-apps/extension-app/src/app/pages/home/home.tour.ts
new file mode 100644
index 000000000..8119341f5
--- /dev/null
+++ b/apps/picsa-apps/extension-app/src/app/pages/home/home.tour.ts
@@ -0,0 +1,32 @@
+import type { ITourStep } from '@picsa/shared/services/core/tour.service';
+
+export const HOME_TOUR: ITourStep[] = [
+  {
+    id: 'manual',
+    text: 'This is the EPICSA Manual. A step-by-step guide to using PICSA with farmers.',
+  },
+  {
+    id: 'resources',
+    text: 'This is where you’ll find helpful resources that will guide your work.',
+  },
+  {
+    id: 'monitoring',
+    text: 'In here, field staff can make records of visits with farmers and provide data on everything they monitored.',
+  },
+  {
+    id: 'climate',
+    text: 'This is the climate tool which provides automatically updated, locally specific climate information graphs. A way for you to analyse the changing climate in your region.',
+  },
+  {
+    id: 'budget',
+    text: 'This budget tool is fully interactive and provides a way for farmers to make extensive budgets with respect to different options in their agro-businesses.',
+  },
+  {
+    id: 'crop-probability',
+    text: 'This is the crop-probability tool. It provides immediate calculations on which crops and varieties have the best chance to succeed, according to regions.',
+  },
+  {
+    id: 'option',
+    text: 'This is the options tool that supports farmers to consider a range of options aimed at increasing production, income and resilience.',
+  },
+];
diff --git a/apps/picsa-apps/extension-app/src/assets/svgs/tutorial.svg b/apps/picsa-apps/extension-app/src/assets/svgs/tutorial.svg
new file mode 100644
index 000000000..4a831100b
--- /dev/null
+++ b/apps/picsa-apps/extension-app/src/assets/svgs/tutorial.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="18.209162" cy="12.469916" r="8.8341322"/><path d="M31.694721 40.751178c3.701933 2.92068 8.509593 4.411049 14.278863 4.411049 2.079317 0 3.774032-1.694658 3.774032-3.774033 0-.865368-.288495-1.658609-.781286-2.295625l8.26927-14.711582c.432663-.757193.15624-1.71876-.600968-2.151402-.757248-.432727-1.718753-.156239-2.151472.600967l-8.317281 14.795626h-.192295c-8.413504 0-11.694721-4.038432-12.968761-7.439848-.540871-1.442359-1.502439-2.668317-2.764455-3.545689-1.045647-.721161-2.235545-1.165879-3.485545-1.298072h-.07203c-.240415-.03624-.480774-.04822-.721142-.04822h-5.709186c-.180287 0-.348521.01184-.516784.03624H9.6634582v.03628C4.3149032 25.462746 0 29.837746 0 35.198346v16.935086c0 2.079314 1.6947099 3.774032 3.7740368 3.774032 2.0793302 0 3.7740423-1.694718 3.7740423-3.774032V35.198346c0-1.201931.9375-2.199552 2.1153841-2.283667v20.300449L4.915867 91.54448c-.3004807 2.463952 1.4423067 4.699491 3.9062467 5.012019.1923072.02384.3725962.03624.5528863.03624 2.235597 0 4.170686-1.670701 4.447099-3.942311l3.990365-32.259607h.781311l3.990346 32.259613c.276479 2.271607 2.211565 3.942306 4.447104 3.942306.180343 0 .372638 0 .552896-.03624 2.463943-.300512 4.206758-2.548067 3.906247-5.012016l-4.747561-38.32936V34.66948c.973523 1.923089 2.512016 4.158628 4.939895 6.081698z"/><path d="M97.512016 3.2752187H39.218775c-1.394223 0-2.512038 1.1298226-2.512038 2.5120102V31.051698c.492815.68508 1.081695 1.274032 1.778863 1.766818.901416.637036 1.995191 1.117814 3.245191 1.442294V8.2993122H95V53.431499H76.165879c-.156247-.01184-.312533-.01184-.46878 0H62.079314c-.15625-.01184-.312474-.01184-.468714 0H41.730791v-5.661051c-1.766839-.228391-3.449566-.612984-5.024054-1.129807v9.314911c0 1.39421 1.129831 2.512017 2.512038 2.512017h19.387016L49.603346 93.57573c-.348523 1.346128.468753 2.716327 1.802879 3.064911.204375.04823.420711.08414.625.08414 1.117807 0 2.139461-.757228 2.439912-1.887051l9.314911-36.358106h10.192298l8.53367 36.358191c.288432 1.129763 1.310083 1.886941 2.427904 1.886941.204289 0 .42068-.02384.625-.08395 1.346128-.348584 2.15141-1.718782 1.802887-3.064914L79.15867 58.467587h18.329314c1.394209 0 2.512016-1.129823 2.512016-2.512017V5.7872329c0-1.3942108-1.129823-2.5120102-2.512016-2.5120102Z"/></svg>
\ No newline at end of file
diff --git a/apps/picsa-tools/budget-tool/src/styles.scss b/apps/picsa-tools/budget-tool/src/styles.scss
index 5c15a9228..e9b262293 100644
--- a/apps/picsa-tools/budget-tool/src/styles.scss
+++ b/apps/picsa-tools/budget-tool/src/styles.scss
@@ -14,29 +14,6 @@
 @import './styles/typography.scss';
 @import './styles/layout.scss';
 
-// instead of using bottom use top with calc to avoid jumping
-$footer-height: 5em;
-.sticky-footer {
-  position: fixed;
-  height: $footer-height;
-  top: calc(100vh - #{$footer-height});
-  left: 0;
-  width: 100%;
-  background: white;
-  display: flex;
-  align-items: center;
-}
-
-button.footer-button.mat-mdc-button-base {
-  width: 60%;
-  left: 20%;
-  height: calc(#{$footer-height} - 10px) !important;
-  .mdc-button__label {
-    font-size: 1.5rem;
-    line-height: 3rem;
-  }
-}
-
 // used if want to use mat-stepper with fixed header and scrolling content
 .scrolling-stepper {
   flex: 1;
diff --git a/apps/picsa-tools/manual-tool/src/app/data/manual-contents/farmer.ts b/apps/picsa-tools/manual-tool/src/app/data/manual-contents/farmer.ts
index b55826be4..ffb4f72b7 100644
--- a/apps/picsa-tools/manual-tool/src/app/data/manual-contents/farmer.ts
+++ b/apps/picsa-tools/manual-tool/src/app/data/manual-contents/farmer.ts
@@ -11,8 +11,8 @@ export const PICSA_MANUAL_CONTENTS_FARMER: IManualPeriodEntry[] = [
       {
         page: {
           en: 2,
-          zm_ny: 2,
-          mw_ny: 2,
+          zm_ny: 7,
+          mw_ny: 7,
         },
         name: '',
         label: translateMarker('Introduction'),
diff --git a/apps/picsa-tools/option-tool/src/app/components/components.module.ts b/apps/picsa-tools/option-tool/src/app/components/components.module.ts
index 9e6dadd7a..171b86355 100644
--- a/apps/picsa-tools/option-tool/src/app/components/components.module.ts
+++ b/apps/picsa-tools/option-tool/src/app/components/components.module.ts
@@ -8,10 +8,12 @@ import { PicsaTranslateModule } from '@picsa/shared/modules';
 
 // Local components
 import { EditorComponent } from './editor/editor.component';
-import { GenderIconComponent } from './gender-icon/gender-icon.component';
+import { GenderInputComponent } from './editor/inputs/gender/gender-input';
+import { InvestmentInputComponent } from './editor/inputs/investment/investment-input';
+import { PerformanceInputComponent } from './editor/inputs/performance/performance-input';
 import { OptionMaterialModule } from './material.module';
 
-const Components = [EditorComponent, GenderIconComponent];
+const Components = [EditorComponent, GenderInputComponent, InvestmentInputComponent, PerformanceInputComponent];
 
 @NgModule({
   imports: [
diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.html b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.html
index 6ea4c8726..2d6500fb6 100644
--- a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.html
+++ b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.html
@@ -1,349 +1,216 @@
-<div class="dialog-content">
-  <button class="saveButtonPosition" mat-button mat-raised-button (click)="submitForm()" color="primary">
-    {{ 'Close' | translate }}
+<div class="editor-container">
+  <button mat-mini-fab color="primary" (click)="submitForm()" class="closeButton">
+    <mat-icon>close</mat-icon>
   </button>
-  <mat-stepper [linear]="isLinear" #stepper>
-    <!-- Practice -->
-    <mat-step matStepContent>
-      <ng-template matStepLabel>{{ 'Practice' | translate }}</ng-template>
-      <div class="StepContainer">
-        <div class="StepTitle">{{ 'Enter the practice for this option' | translate }}</div>
-        <div class="StepContent">
-          <div class="form-group">
-            <label>{{ 'Practice' | translate }}</label>
-            <input [(ngModel)]="values.practice" class="form-control" />
-          </div>
-          <div class="importantText">{{ '*This field is required' | translate }}</div>
-        </div>
-        <div>
-          <button mat-raised-button color="primary" [disabled]="!values.practice" matStepperNext>
-            {{ 'Next' | translate }}
-          </button>
-        </div>
-        <button mat-stroked-button style="margin-top: 3em" (click)="promptDelete()" [disabled]="!values.practice">
-          <mat-icon name="delete">delete</mat-icon> {{ 'Delete' | translate }}
-        </button>
-      </div>
-    </mat-step>
 
-    <!-- Who does it -->
-    <mat-step matStepContent>
-      <ng-template matStepLabel>{{ 'Decisions' | translate }}</ng-template>
-      <div class="StepContainer">
-        <div class="StepTitle">{{ 'Who makes decisions' | translate }}?</div>
+  <mat-stepper [linear]="false" #stepper class="slim-headers">
+    <!-- Step header (common) -->
+    <mat-step matStepContent *ngFor="let step of stepperSteps; index as stepIndex">
+      <ng-template matStepLabel>{{ step.label | translate }}</ng-template>
+      <div class="StepContainer" [attr.data-step]="stepIndex + 1">
+        <h3 class="StepTitle">{{ step.title | translate }}</h3>
         <div class="StepContent">
-          <div class="genderDiv">
-            <div
-              class="genderType"
-              style="color: #800080"
-              (click)="handleGender('female', 'gender_decisions')"
-              [ngStyle]="{
-                'background-color': values.gender_decisions.includes('female') ? 'wheat' : 'lightgray'
-              }"
-            >
-              {{ 'Female' | translate }}
-              <mat-icon svgIcon="picsa_options_female"></mat-icon>
-            </div>
-            <div
-              class="genderType"
-              (click)="handleGender('male', 'gender_decisions')"
-              style="color: #008066"
-              [ngStyle]="{
-                'background-color': values.gender_decisions.includes('male') ? 'wheat' : 'lightgray'
-              }"
-            >
-              {{ 'Male' | translate }}
-              <mat-icon svgIcon="picsa_options_male"></mat-icon>
-            </div>
-          </div>
-          <div style="height: 1rem">
-            {{
-              values.gender_decisions.length > 1 ? values.gender_decisions.join(' and ') : values.gender_decisions[0]
-            }}
-          </div>
-        </div>
-        <div class="ButtonSection">
-          <button mat-button matStepperPrevious>{{ 'Back' | translate }}</button>
-          <button mat-raised-button color="primary" [disabled]="!(values.gender_decisions.length > 0)" matStepperNext>
-            {{ 'Next' | translate }}
-          </button>
+          <!-- Step inputs (loaded from templates below) -->
+          <ng-container [ngSwitch]="step.id">
+            <ng-container *ngSwitchCase="'practice'" [ngTemplateOutlet]="practiceInput"></ng-container>
+            <ng-container *ngSwitchCase="'gender_decisions'" [ngTemplateOutlet]="decisionsInput"></ng-container>
+            <ng-container *ngSwitchCase="'gender_activities'" [ngTemplateOutlet]="activitiesInput"></ng-container>
+            <ng-container *ngSwitchCase="'benefits'" [ngTemplateOutlet]="benefitsInput"></ng-container>
+            <ng-container *ngSwitchCase="'performance'" [ngTemplateOutlet]="performanceInput"></ng-container>
+            <ng-container *ngSwitchCase="'investment'" [ngTemplateOutlet]="investmentInput"></ng-container>
+            <ng-container *ngSwitchCase="'time'" [ngTemplateOutlet]="timeInput"></ng-container>
+            <ng-container *ngSwitchCase="'risk'" [ngTemplateOutlet]="riskInput"></ng-container>
+            <ng-container *ngSwitchDefault>Input Not found</ng-container>
+          </ng-container>
         </div>
       </div>
     </mat-step>
 
-    <!-- Who does it -->
-    <mat-step matStepContent>
-      <ng-template matStepLabel>{{ 'Activities' | translate }}</ng-template>
-      <div class="StepContainer">
-        <div class="StepTitle">{{ 'Who does the activity' | translate }}?</div>
-        <div class="StepContent">
-          <div class="genderDiv">
-            <div
-              class="genderType"
-              style="color: #800080"
-              (click)="handleGender('female', 'gender_activities')"
-              [ngStyle]="{
-                'background-color': values.gender_activities.includes('female') ? 'wheat' : 'lightgray'
-              }"
-            >
-              {{ 'Female' | translate }}
-              <mat-icon svgIcon="picsa_options_female"></mat-icon>
-            </div>
-            <div
-              class="genderType"
-              (click)="handleGender('male', 'gender_activities')"
-              style="color: #008066"
-              [ngStyle]="{
-                'background-color': values.gender_activities.includes('male') ? 'wheat' : 'lightgray'
-              }"
-            >
-              {{ 'Male' | translate }}
-              <mat-icon svgIcon="picsa_options_male"></mat-icon>
-            </div>
-          </div>
-          <div style="height: 1rem">
-            {{
-              values.gender_activities.length > 1 ? values.gender_activities.join(' and ') : values.gender_activities[0]
-            }}
-          </div>
-        </div>
-        <div class="ButtonSection">
-          <button mat-button matStepperPrevious>{{ 'Back' | translate }}</button>
-          <button mat-raised-button color="primary" [disabled]="!(values.gender_activities.length > 0)" matStepperNext>
-            {{ 'Next' | translate }}
-          </button>
-        </div>
+    <!-- 1. Practice -->
+    <ng-template #practiceInput>
+      <div class="form-group">
+        <input [(ngModel)]="values.practice" class="form-control" />
       </div>
-    </mat-step>
+      <ng-container [ngTemplateOutlet]="stepButtons" [ngTemplateOutletContext]="{ nextDisabled: !values.practice }">
+      </ng-container>
+    </ng-template>
 
-    <!-- Benefits -->
-    <mat-step matStepContent>
-      <ng-template matStepLabel>{{ 'Benefits' | translate }}</ng-template>
-      <div class="StepContainer">
-        <div class="StepTitle">{{ 'Benefits and who ' | translate }} ?</div>
-        <div class="StepContent">
-          <div style="margin-bottom: 1.5rem; padding: 2px; margin-top: 2rem">
-            <div *ngFor="let benefit of values.benefits; index as i">
-              <div style="display: flex; flex-direction: row; gap: 3px; padding-bottom: 3px">
-                <textarea [(ngModel)]="benefit.benefit" class="form-control"></textarea>
-                <div
-                  class="genderType"
-                  style="color: #800080; padding: 3px; height: 6rem"
-                  (click)="handleBenficiaryGender(i, 'female')"
-                  [ngStyle]="{
-                    'background-color': benefit.beneficiary.includes('female') ? 'wheat' : 'lightgray'
-                  }"
-                >
-                  {{ 'Female' | translate }}
-                  <mat-icon svgIcon="picsa_options_female"></mat-icon>
-                </div>
-                <div
-                  class="genderType"
-                  (click)="handleBenficiaryGender(i, 'male')"
-                  style="color: #008066; padding: 3px; height: 6rem"
-                  [ngStyle]="{
-                    'background-color': benefit.beneficiary.includes('male') ? 'wheat' : 'lightgray'
-                  }"
-                >
-                  {{ 'Male' | translate }}
-                  <mat-icon svgIcon="picsa_options_male"></mat-icon>
-                </div>
-                <button
-                  mat-button
-                  color="primary"
-                  (click)="handleRemovingBenefits(i)"
-                  [disabled]="!values.benefits[i] || !values.benefits[i].benefit"
-                >
-                  <mat-icon>close</mat-icon>
-                </button>
-              </div>
-            </div>
-            <button style="float: left; margin-top: 7px" (click)="handleMoreBenefits()" mat-button>
-              + {{ 'Add benefit' | translate }}
+    <!-- 2. Decisions -->
+    <ng-template #decisionsInput>
+      <option-gender-input
+        style="margin-top: 1rem"
+        [(ngModel)]="values.gender_decisions"
+        [options]="{ showValueText: true }"
+      ></option-gender-input>
+
+      <ng-container
+        [ngTemplateOutlet]="stepButtons"
+        [ngTemplateOutletContext]="{ nextDisabled: values.gender_decisions.length === 0 }"
+      >
+      </ng-container>
+    </ng-template>
+
+    <!-- 3. Activity -->
+    <ng-template #activitiesInput>
+      <option-gender-input
+        style="margin-top: 1rem"
+        [(ngModel)]="values.gender_activities"
+        [options]="{ showValueText: true }"
+      ></option-gender-input>
+      <ng-container
+        [ngTemplateOutlet]="stepButtons"
+        [ngTemplateOutletContext]="{ nextDisabled: values.gender_activities.length === 0 }"
+      ></ng-container>
+    </ng-template>
+
+    <!-- 4. Benefits -->
+    <ng-template #benefitsInput>
+      <div class="entry-rows">
+        <div class="entry-row-item" *ngFor="let benefit of values.benefits; index as i">
+          <div style="display: flex; flex-direction: row; gap: 3px; padding-bottom: 3px">
+            <input [(ngModel)]="benefit.benefit" class="form-control" />
+            <option-gender-input [(ngModel)]="values.benefits[i].beneficiary"></option-gender-input>
+            <button mat-button color="primary" (click)="handleRemovingBenefits(i)">
+              <mat-icon>close</mat-icon>
             </button>
           </div>
         </div>
-        <div class="ButtonSection">
-          <button matStepperPrevious mat-button>{{ 'Back' | translate }}</button>
-          <button mat-raised-button color="primary" [disabled]="!(values.benefits.length > 0)" matStepperNext>
-            {{ 'Next' | translate }}
-          </button>
-        </div>
+        <!-- Only enable adding more benefits when previous are validated
+            TODO would be easier to manage all validation if using formgroups -->
+        <button
+          style="margin-bottom: 16px; margin-top: -16px"
+          (click)="handleMoreBenefits()"
+          mat-button
+          [disabled]="
+            values.benefits.length > 0 &&
+            (values.benefits[values.benefits.length - 1].benefit === undefined ||
+              values.benefits[values.benefits.length - 1].beneficiary.length === 0)
+          "
+        >
+          + {{ 'Add' | translate }}{{ ' ' }}{{ 'benefit' | translate }}
+        </button>
       </div>
-    </mat-step>
 
-    <!-- Performance -->
-    <mat-step matStepContent>
-      <ng-template matStepLabel>{{ 'Performance' | translate }}</ng-template>
-      <div class="StepContainer">
-        <div class="StepTitle">{{ 'Performance in high, mid and low RF (rainfall)' | translate }}?</div>
-        <div class="StepContent">
-          <mat-icon style="color: #4fc3f7; font-size: 27px">water_drop</mat-icon>
-          <div
-            style="
-              display: flex;
-              gap: 1rem;
-              justify-content: space-evenly;
-              width: 100%;
-              flex-direction: row;
-              margin-bottom: 1.5rem;
-              margin-top: 2rem;
-            "
-          >
-            <div class="performenceItem">
-              <div style="font-weight: 700">{{ 'High RF' | translate }}</div>
-              <select
-                style="width: 5rem; height: 2rem; font-size: 14px; margin-top: 5px; outline-color: #8a2644"
-                [(ngModel)]="values.performance.highRf"
-              >
-                <option *ngFor="let option of performanceOptions" [value]="option">
-                  {{ option }}
-                </option>
-              </select>
-            </div>
-            <div class="performenceItem">
-              <div style="font-weight: 700">{{ 'Mid RF' | translate }}</div>
-              <select
-                style="width: 5rem; height: 2rem; font-size: 14px; margin-top: 5px; outline-color: #8a2644"
-                [(ngModel)]="values.performance.midRf"
-              >
-                <option *ngFor="let option of performanceOptions" [value]="option">
-                  {{ option }}
-                </option>
-              </select>
-            </div>
-            <div class="performenceItem">
-              <div style="font-weight: 700">{{ 'Low RF' | translate }}</div>
-              <select
-                style="width: 5rem; height: 2rem; font-size: 14px; margin-top: 5px; outline-color: #8a2644"
-                [(ngModel)]="values.performance.lowRf"
-              >
-                <option *ngFor="let option of performanceOptions" [value]="option">
-                  {{ option }}
-                </option>
-              </select>
+      <ng-container
+        [ngTemplateOutlet]="stepButtons"
+        [ngTemplateOutletContext]="{ nextDisabled: values.benefits.length === 0 }"
+      ></ng-container>
+    </ng-template>
+
+    <!-- 5. Performance -->
+    <ng-template #performanceInput>
+      <div class="entry-rows">
+        <div class="entry-row-item" *ngFor="let condition of performanceConditions">
+          <div class="icon-with-heading">
+            <div class="icon-heading">{{ condition.label | translate }}</div>
+            <div class="icon-container">
+              <mat-icon [svgIcon]="condition.svgIcon"></mat-icon>
             </div>
           </div>
-        </div>
-        <div class="ButtonSection">
-          <button mat-button matStepperPrevious>{{ 'Back' | translate }}</button>
-          <button
-            mat-raised-button
-            color="primary"
-            [disabled]="!(values.performance.lowRf && values.performance.midRf && values.performance.highRf)"
-            matStepperNext
-          >
-            {{ 'Next' | translate }}
-          </button>
+          <option-performance-input [(ngModel)]="values.performance[condition.id]"></option-performance-input>
         </div>
       </div>
-    </mat-step>
 
-    <!-- Investment -->
-    <mat-step matStepContent>
-      <ng-template matStepLabel>{{ 'Investment' | translate }}</ng-template>
-      <div class="StepContainer">
-        <div class="StepTitle">{{ 'Investment in terms of money and time' | translate }}?</div>
-        <div class="StepContent">
-          <div
-            style="
-              display: flex;
-              justify-content: space-evenly;
-              gap: 1rem;
-              width: 100%;
-              flex-direction: row;
-              margin-bottom: 1.5rem;
-              margin-top: 2rem;
-            "
-          >
-            <div class="performenceItem">
-              <div style="font-weight: 700; display: flex; flex-direction: row; justify-content: space-between">
-                {{ 'Money' | translate }}
-                <mat-icon style="color: #8a2644; font-size: 20px">payments</mat-icon>
-              </div>
-              <select
-                style="width: 5rem; height: 2rem; font-size: 14px; margin-top: 9px; outline-color: #8a2644"
-                [(ngModel)]="values.investment.money"
-              >
-                <option *ngFor="let option of investmentOptions" [value]="option">
-                  {{ option }}
-                </option>
-              </select>
-            </div>
-            <div class="performenceItem">
-              <div style="font-weight: 700; display: flex; flex-direction: row; justify-content: space-between">
-                {{ 'Time' | translate }}
-                <mat-icon style="color: #8a2644; font-size: 20px">schedule</mat-icon>
-              </div>
-              <select
-                style="width: 5rem; height: 2rem; font-size: 14px; margin-top: 9px; outline-color: #8a2644"
-                [(ngModel)]="values.investment.time"
-              >
-                <option *ngFor="let option of investmentOptions" [value]="option">
-                  {{ option }}
-                </option>
-              </select>
+      <ng-container
+        [ngTemplateOutlet]="stepButtons"
+        [ngTemplateOutletContext]="{
+          nextDisabled: !(values.performance.lowRf && values.performance.midRf && values.performance.highRf)
+        }"
+      ></ng-container>
+    </ng-template>
+
+    <!-- 6. Investment -->
+    <ng-template #investmentInput>
+      <div class="entry-rows">
+        <div *ngFor="let investment of investmentTypes" class="entry-row-item">
+          <div class="icon-with-heading">
+            <div class="icon-heading">{{ investment.label | translate }}</div>
+            <div class="icon-container">
+              <mat-icon style="color: #8a2644; font-size: 36px">{{ investment.matIcon }}</mat-icon>
             </div>
           </div>
-        </div>
-        <div class="ButtonSection">
-          <button mat-button matStepperPrevious>{{ 'Back' | translate }}</button>
-          <button
-            mat-raised-button
-            color="primary"
-            [disabled]="!(values.investment.money && values.investment.time)"
-            matStepperNext
-          >
-            {{ 'Next' | translate }}
-          </button>
+          <option-investment-input [(ngModel)]="values.investment[investment.id]"></option-investment-input>
         </div>
       </div>
-    </mat-step>
+      <ng-container
+        [ngTemplateOutlet]="stepButtons"
+        [ngTemplateOutletContext]="{
+          nextDisabled: !(values.investment.money && values.investment.time)
+        }"
+      ></ng-container>
+    </ng-template>
 
-    <!-- Time -->
-    <mat-step matStepContent>
-      <ng-template matStepLabel>{{ 'Time' | translate }}</ng-template>
-      <div class="StepContainer">
-        <div class="StepTitle">{{ 'Time to start benefiting' | translate }}</div>
-        <div class="StepContent">
-          <div class="form-group">
-            <label style="font-weight: 700; display: flex; flex-direction: row; justify-content: space-between"
-              >{{ 'Time
-              (months)' | translate }}
-              <mat-icon style="color: #8a2644; font-size: 20px">date_range</mat-icon></label
-            >
-            <input [(ngModel)]="values.time" (keypress)="onlyNumbers($event)" class="form-control" />
-          </div>
-        </div>
-        <div class="ButtonSection">
-          <button matStepperPrevious mat-button>{{ 'Back' | translate }}</button>
-          <button mat-raised-button color="primary" [disabled]="!values.time" matStepperNext>
-            {{ 'Next' | translate }}
-          </button>
-        </div>
+    <!-- 7. Time -->
+    <ng-template #timeInput>
+      <div style="display: flex; gap: 16px; align-items: center">
+        <input [(ngModel)]="values.time.value" type="number" class="form-control" style="width: 64px" />
+        <mat-select class="form-control value-primary" [(value)]="values.time.unit">
+          <mat-option value="month">{{ 'Months' | translate }}</mat-option>
+          <mat-option value="week">{{ 'Weeks' | translate }}</mat-option>
+          <mat-option value="day">{{ 'Days' | translate }}</mat-option>
+        </mat-select>
       </div>
-    </mat-step>
 
-    <!-- Risk -->
-    <mat-step matStepContent>
-      <ng-template matStepLabel>{{ 'Risk' | translate }}</ng-template>
-      <div class="StepContainer">
-        <div class="StepTitle">{{ 'Risk of practice (disadvantage)' | translate }}</div>
-        <div class="StepContent">
-          <div class="form-group">
-            <label style="font-weight: 700; display: flex; flex-direction: row; justify-content: space-between"
-              >{{ 'Risk' | translate }}<mat-icon style="color: #e71236; font-size: 20px">warning</mat-icon></label
-            >
-            <input style="margin-left: 4px" [(ngModel)]="values.risk" class="form-control" />
+      <ng-container
+        [ngTemplateOutlet]="stepButtons"
+        [ngTemplateOutletContext]="{ nextDisabled: !values.time }"
+      ></ng-container>
+    </ng-template>
+
+    <!-- 8. Risk -->
+    <ng-template #riskInput>
+      <div class="entry-rows">
+        <div class="entry-row-item" *ngFor="let risk of values.risk; index as i; trackBy: trackByIndex">
+          <div style="display: flex; align-items: center">
+            <input style="margin-left: 4px" [(ngModel)]="values.risk[i]" class="form-control" />
+            <button mat-icon-button (click)="values.risk.splice(i, 1)">
+              <mat-icon>close</mat-icon>
+            </button>
           </div>
         </div>
-        <div class="ButtonSection">
-          <button matStepperPrevious mat-button>{{ 'Back' | translate }}</button>
-          <button mat-raised-button color="primary" [disabled]="!values.risk" (click)="submitForm()">
-            {{ 'Finish' | translate }}
-          </button>
-        </div>
+        <button
+          style="margin-bottom: 16px; margin-top: -16px"
+          (click)="values.risk.push('')"
+          mat-button
+          [disabled]="values.risk.length > 0 && !values.risk[values.benefits.length - 1]"
+        >
+          + {{ 'Add' | translate }}{{ ' ' }}{{ 'risk' | translate }}
+        </button>
       </div>
-    </mat-step>
+
+      <ng-container
+        [ngTemplateOutlet]="stepButtons"
+        [ngTemplateOutletContext]="{ nextDisabled: !values.risk }"
+      ></ng-container>
+    </ng-template>
+
+    <!-- Step Footer (common) -->
+    <!-- Context variables an be passed via `[ngTemplateOutletContext]="{ nextDisabled: true }"` -->
+    <ng-template #stepButtons let-nextDisabled="nextDisabled" let-firstStep="stepper.selectedIndex === 0">
+      <div class="step-buttons">
+        <button *ngIf="stepper.selectedIndex === 0" mat-button (click)="promptDelete()" [disabled]="nextDisabled">
+          <mat-icon name="delete">delete</mat-icon> {{ 'Delete' | translate }}
+        </button>
+        <button *ngIf="stepper.selectedIndex > 0" mat-button matStepperPrevious>{{ 'Back' | translate }}</button>
+        <button
+          *ngIf="stepper.selectedIndex < 7"
+          mat-raised-button
+          color="primary"
+          [disabled]="nextDisabled"
+          matStepperNext
+        >
+          {{ 'Next' | translate }}
+        </button>
+        <button
+          *ngIf="stepper.selectedIndex === 7"
+          mat-raised-button
+          color="primary"
+          [disabled]="nextDisabled"
+          (click)="submitForm()"
+        >
+          {{ 'Finish' | translate }}
+        </button>
+      </div>
+    </ng-template>
   </mat-stepper>
 </div>
diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.scss b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.scss
index b06a72c92..9c0d134e4 100644
--- a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.scss
+++ b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.scss
@@ -1,112 +1,196 @@
-.mat-stepper-horizontal {
-  margin-top: 27px;
+:host {
+  display: block;
 }
-
-.mat-mdc-form-field {
-  margin-top: 16px;
+.editor-container {
+  position: relative;
+  padding-bottom: 2rem;
 }
+// ***************************************************************************************
+// Stepper - General
+// ***************************************************************************************
 
-.warningText {
-  text-align: center;
-  color: red;
-  font-size: 12px;
-}
+$close-button-height: 40px;
 
-.dialog-content {
-  padding-bottom: 2rem;
+mat-stepper.mat-stepper-horizontal {
+  margin-top: $close-button-height + 8px;
+  margin-bottom: 2rem;
+}
 
-  .saveButtonPosition {
-    position: absolute;
-    right: 20px;
-    top: 20px;
-  }
+.closeButton {
+  position: absolute;
+  right: 8px;
+  top: (-$close-button-height);
+  width: $close-button-height;
+  height: $close-button-height;
+  color: white;
+  z-index: 2;
+}
 
-  .StepTitle {
-    display: flex;
-    justify-content: center;
-    font-size: medium;
-    font-weight: bold;
-  }
+// ***************************************************************************************
+// Steps - General
+// ***************************************************************************************
+$container-border-radius: 16px;
 
-  .importantText {
-    display: flex;
-    justify-content: flex-start;
-    font-size: small;
-    color: red;
-    width: 100%;
-    font-weight: normal;
+.StepContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: fit-content;
+  position: relative;
+  border-radius: $container-border-radius;
+  min-width: 18rem;
+  min-height: 18rem;
+  margin-top: 1rem;
+  box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.25);
+  // Desktop layout - container moves along with stepper
+  @media only screen and (min-width: 768px) {
+    &[data-step='2'] {
+      left: 12%;
+    }
+    &[data-step='3'] {
+      left: 24%;
+    }
+    &[data-step='4'] {
+      left: 36%;
+    }
+    &[data-step='5'] {
+      left: calc(min(100vw - 4rem - 36rem, 48%)); // apply min sizing to prevent overflow off screen
+    }
+    &[data-step='6'] {
+      left: calc(min(100vw - 4rem - 26rem, 60%));
+    }
+    &[data-step='7'] {
+      left: calc(min(100vw - 4rem - 26rem, 72%));
+    }
+    &[data-step='8'] {
+      left: calc(min(100vw - 4rem - 26rem, 84%));
+    }
   }
+}
 
-  .StepContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    width: 50%;
-    gap: 0.4rem;
+h3.StepTitle {
+  width: -webkit-fill-available;
+  margin: 0;
+  background: var(--color-primary);
+  font-weight: normal;
+  padding: 1rem;
+  color: white;
+  text-align: center;
+  border-top-left-radius: $container-border-radius;
+  border-top-right-radius: $container-border-radius;
+}
 
-    .StepContent {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-direction: column;
-      // .rain-icon{
-      //   font-size: 50px;
-      //   color: black;
-      // }
+.StepContent {
+  width: -webkit-fill-available;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 1rem;
+  align-items: center;
+}
 
-      .form-group {
-        // width: 500px;
-        padding-top: 10px;
-        padding-bottom: 20px;
-      }
+.step-buttons {
+  width: -webkit-fill-available;
+  margin-top: auto;
+  display: flex;
+  gap: 8px;
+  padding: 8px;
+  button {
+    flex: 1;
+  }
+}
 
-      label {
-        font-size: 14px;
-        font-weight: 400;
-        margin-right: 10px;
-      }
+// ***************************************************************************************
+// Steps - Multiple row entries
+// Display as rows with light border, and content in a row
+//
+// ***************************************************************************************
 
-      input.form-control {
-        font-size: 16px;
-        outline-color: #8a2644;
-        padding: 5px;
-        width: 90%;
-      }
+.entry-rows {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  justify-content: center;
+}
+.entry-row-item {
+  display: flex;
+  gap: 1rem;
+  width: 100%;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--color-light);
+  &:last-of-type {
+    border-bottom: none;
+  }
+}
 
-      textarea.form-control {
-        font-size: 16px;
-        outline-color: #8a2644;
-        padding: 5px;
-        white-space: pre-wrap;
-        word-wrap: break-word;
-        vertical-align: top;
-      }
+// Rows also use text and icon at start of the row to help identifiy input requirements
+$entry-icon-size: 64px;
+.icon-with-heading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
 
-      .ButtonSection {
-        width: 15rem;
-      }
-    }
+.icon-heading {
+  font-weight: 700;
+  text-align: center;
+  width: calc($entry-icon-size + 16px);
+  background: var(--color-primary);
+  margin-bottom: -10px;
+  padding: 4px;
+  color: white;
+  z-index: 1;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+.icon-container {
+  width: calc($entry-icon-size + 8px - 2px); // include padding and border in width
+  text-align: center;
+  background-color: #ffffff;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  padding: 8px;
+  // Styles need to accomodate slightly different variations depending if regular mat-icon or svgIcon used
+  mat-icon {
+    width: 100%;
+    height: 100%;
+    max-height: $entry-icon-size;
+    max-width: $entry-icon-size;
   }
+  border: 1px solid var(--color-primary);
+}
 
-  .genderDiv {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    flex-direction: row;
-  }
+// ***************************************************************************************
+// Inputs - General
+// ***************************************************************************************
+.mat-mdc-form-field {
+  margin-top: 16px;
+}
+
+label {
+  font-size: 14px;
+  font-weight: 400;
+  margin-right: 10px;
+}
 
-  .genderType {
-    width: 5rem;
-    height: 5rem;
-    font-weight: 700;
-    display: flex;
-    border-radius: 5px;
-    margin: 2px;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
+input.form-control,
+textarea.form-control {
+  padding: 8px;
+  color: var(--color-primary);
+  outline-color: var(--color-primary);
+  max-width: 200px;
+  display: block;
+  font-size: 1.5rem;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+mat-select.form-control {
+  font-size: 1.5rem;
+  .mat-mdc-select-value {
+    color: var(--color-primary) !important;
   }
-}
\ No newline at end of file
+}
diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.ts b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.ts
index f07cfa5ab..ae3876204 100644
--- a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.ts
+++ b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.ts
@@ -1,62 +1,111 @@
 import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
 import { MatStepper } from '@angular/material/stepper';
+import { marker as translateMarker } from '@biesbjerg/ngx-translate-extract-marker';
 import { PicsaDialogService } from '@picsa/shared/features';
 
 import { ENTRY_TEMPLATE, IOptionsToolEntry } from '../../schemas';
 
+const PERFORMANCE_CONDITIONS = [
+  {
+    id: 'lowRf',
+    label: translateMarker('Low'),
+    svgIcon: 'picsa_options_rain_low',
+  },
+  {
+    id: 'midRf',
+    label: translateMarker('Mid'),
+    svgIcon: 'picsa_options_rain_medium',
+  },
+  {
+    id: 'highRf',
+    label: translateMarker('High'),
+    svgIcon: 'picsa_options_rain_high',
+  },
+];
+
+const INVESTMENT_TYPES = [
+  {
+    id: 'money',
+    label: translateMarker('Money'),
+    matIcon: 'payments',
+  },
+  {
+    id: 'time',
+    label: translateMarker('Time'),
+    matIcon: 'schedule',
+  },
+];
+
+const STEPPER_STEPS = [
+  {
+    id: 'practice',
+    label: translateMarker('Practice'),
+    title: translateMarker('Name of practice'),
+  },
+  {
+    id: 'gender_decisions',
+    label: translateMarker('Decisions'),
+    title: translateMarker('Who makes decisions'),
+  },
+  {
+    id: 'gender_activities',
+    label: translateMarker('Activities'),
+    title: translateMarker('Who does the activity'),
+  },
+  {
+    id: 'benefits',
+    label: translateMarker('Benefits'),
+    title: translateMarker('Benefits and who'),
+  },
+  {
+    id: 'performance',
+    label: translateMarker('Performance'),
+    title: translateMarker('Performance in high, mid and low rainfall'),
+  },
+  {
+    id: 'investment',
+    label: translateMarker('Investment'),
+    title: translateMarker('Investment in terms of money and time'),
+  },
+  {
+    id: 'time',
+    label: translateMarker('Time'),
+    title: translateMarker('Time to start benefiting'),
+  },
+  {
+    id: 'risk',
+    label: translateMarker('Risk'),
+    title: translateMarker('Risks or disadvantages'),
+  },
+];
+
 @Component({
   selector: 'option-editor',
   templateUrl: './editor.component.html',
   styleUrls: ['./editor.component.scss'],
 })
 export class EditorComponent {
-  values = ENTRY_TEMPLATE();
-
-  performanceOptions: string[] = ['good', 'ok', 'bad'];
-  investmentOptions: string[] = ['high', 'mid', 'low'];
-  isLinear = false;
+  public values = ENTRY_TEMPLATE();
+  public performanceConditions = PERFORMANCE_CONDITIONS;
+  public investmentTypes = INVESTMENT_TYPES;
+  public stepperSteps = STEPPER_STEPS;
 
   @ViewChild(MatStepper) stepper: MatStepper;
   @Output() dataTransfer = new EventEmitter<IOptionsToolEntry | null>();
 
   constructor(private dialog: PicsaDialogService) {}
 
-  handleGender(gender: string, field: 'gender_activities' | 'gender_decisions') {
-    console.log('handle gender', { gender, field }, this.values[field]);
-    if (!this.values[field].includes(gender)) {
-      this.values[field].push(gender);
-    } else {
-      const index = this.values[field].indexOf(gender);
-      this.values[field].splice(index, 1);
-    }
-  }
-  handleBenficiaryGender(index: number, gender: string) {
-    if (!this.values.benefits[index].beneficiary.includes(gender)) {
-      this.values.benefits[index].beneficiary.push(gender);
-    } else {
-      const itemIndex = this.values.benefits[index].beneficiary.indexOf(gender);
-      this.values.benefits[index].beneficiary.splice(itemIndex, 1);
-    }
-  }
-  handleRemovingBenefits(index: number) {
+  public handleRemovingBenefits(index: number) {
     this.values.benefits.splice(index, 1);
   }
-  handleMoreBenefits() {
+  public handleMoreBenefits() {
     this.values.benefits.push({
       benefit: '',
       beneficiary: [],
     });
   }
 
-  onlyNumbers(event): boolean {
-    const charCode = event.which ? event.which : event.keyCode;
-    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
-      return false;
-    }
-    return true;
-  }
-
-  async submitForm() {
+  public async submitForm() {
     // minimum for auto save should be at least a name
     if (!this.values.practice) {
       this.dataTransfer.emit(null);
@@ -66,18 +115,11 @@ export class EditorComponent {
     this.resetVariables();
     this.resetStepper();
   }
-  resetVariables() {
-    this.values = ENTRY_TEMPLATE();
-  }
-  //incase of edits
-  presetVariables(rowData: IOptionsToolEntry) {
+  // Allow update from home copmonent
+  public presetVariables(rowData: IOptionsToolEntry) {
     this.values = rowData;
   }
-  resetStepper(): void {
-    this.stepper.reset();
-  }
-
-  async promptDelete() {
+  public async promptDelete() {
     const dialogRef = await this.dialog.open('delete');
     dialogRef.afterClosed().subscribe((shouldDelete) => {
       if (shouldDelete) {
@@ -85,4 +127,19 @@ export class EditorComponent {
       }
     });
   }
+  public resetVariables() {
+    this.values = ENTRY_TEMPLATE();
+  }
+
+  /**
+   * Using [(ngModel)] bindings inside an array requires simple trackBy function
+   * https://stackoverflow.com/a/50139592
+   **/
+  public trackByIndex(index: number) {
+    return index;
+  }
+
+  private resetStepper(): void {
+    this.stepper.reset();
+  }
 }
diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/inputs/gender/gender-input.html b/apps/picsa-tools/option-tool/src/app/components/editor/inputs/gender/gender-input.html
new file mode 100644
index 000000000..91c91b73c
--- /dev/null
+++ b/apps/picsa-tools/option-tool/src/app/components/editor/inputs/gender/gender-input.html
@@ -0,0 +1,33 @@
+<div *ngIf="!options.readonly">
+  <div class="input-container">
+    <button
+      mat-button
+      *ngFor="let option of selectOptions"
+      class="select-button"
+      (click)="toggleOptionSelect(option.id)"
+      [attr.data-gender]="option.id"
+      [attr.data-selected]="selected.includes(option.id)"
+    >
+      <div>
+        <mat-icon class="gender-icon" [svgIcon]="option.svgIcon"></mat-icon>
+        <div class="gender-label">{{ option.label | translate }}</div>
+      </div>
+    </button>
+  </div>
+  <div *ngIf="options.showValueText" class="text-value">
+    <span *ngFor="let text of valueTextArray">{{text | translate}}</span>
+  </div>
+</div>
+
+<!-- readonly display - Render all icons but hide non-selected to keep consistent spacing -->
+<div *ngIf="options.readonly" style="display: flex">
+  <div *ngFor="let option of selectOptions" class="readonly-value" [attr.data-gender]="option.id">
+    <mat-icon
+      [svgIcon]="option.svgIcon"
+      [style.visibility]="selected.includes(option.id) ? 'visible' : 'hidden'"
+    ></mat-icon>
+  </div>
+  <div *ngIf="options.showValueText" class="text-value">
+    <span *ngFor="let text of valueTextArray">{{text | translate}}</span>
+  </div>
+</div>
diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/inputs/gender/gender-input.scss b/apps/picsa-tools/option-tool/src/app/components/editor/inputs/gender/gender-input.scss
new file mode 100644
index 000000000..6d6968459
--- /dev/null
+++ b/apps/picsa-tools/option-tool/src/app/components/editor/inputs/gender/gender-input.scss
@@ -0,0 +1,59 @@
+$icon-height: 36px;
+
+:host {
+  display: block;
+}
+.input-container {
+  display: flex;
+  gap: 8px;
+}
+
+mat-icon {
+  height: $icon-height;
+  width: $icon-height;
+}
+
+.text-value {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: center;
+}
+.text-value > span {
+  margin-right: 4px;
+}
+
+// Main colors
+button.select-button.mat-mdc-button,
+div.readonly-value {
+  &[data-gender='female'] {
+    background-color: #800080;
+    color: #800080;
+  }
+  &[data-gender='male'] {
+    color: #008066;
+    background-color: #008066;
+  }
+}
+
+// Button overrides
+button.select-button.mat-mdc-button {
+  height: calc($icon-height + 2rem);
+  width: calc($icon-height + 2rem);
+
+  &[data-selected='false'] {
+    background-color: white !important;
+  }
+  &[data-selected='true'] {
+    color: white !important;
+    transform: scale(1.05);
+  }
+}
+
+// Readonly overrides
+div.readonly-value {
+  background-color: unset !important;
+  mat-icon {
+    height: 24px;
+    width: 24px;
+  }
+}
diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/inputs/gender/gender-input.ts b/apps/picsa-tools/option-tool/src/app/components/editor/inputs/gender/gender-input.ts
new file mode 100644
index 000000000..ff623adee
--- /dev/null
+++ b/apps/picsa-tools/option-tool/src/app/components/editor/inputs/gender/gender-input.ts
@@ -0,0 +1,125 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  forwardRef,
+  Input,
+  Output,
+  Provider,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { marker as translateMarker } from '@biesbjerg/ngx-translate-extract-marker';
+
+const GENDER_OPTIONS: { [id: string]: { label: string; svgIcon: string } } = {
+  female: {
+    label: translateMarker('Female'),
+    svgIcon: 'picsa_options_female',
+  },
+  male: {
+    label: translateMarker('Male'),
+    svgIcon: 'picsa_options_male',
+  },
+};
+
+/** Mark additional hardcoded strings for translation */
+const STRINGS = { only: translateMarker('Only'), and: translateMarker('and'), both: translateMarker('Both') };
+
+/** Accessor used for binding with ngModel or formgroups */
+export const GENDER_INPUT_CONTROL_VALUE_ACCESSOR: Provider = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => GenderInputComponent),
+  multi: true,
+};
+
+/**
+ * Custom input element designed for use with angular Ng-model or standalone syntax
+ *
+ * @example
+ * ```
+ * <option-gender-input [(ngModel)]="someVariable"></option-gender-input>
+ * // or
+ * <option-gender-input [selected]="someValue" (selectedChange)="handleChange()"></option-gender-input>
+ * ```
+ * Adapted from:
+ * https://valor-software.com/articles/avoiding-common-pitfalls-with-controlvalueaccessors-in-angular
+ * https://sreyaj.dev/custom-form-controls-controlvalueaccessor-in-angular
+ * https://indepth.dev/posts/1055/never-again-be-confused-when-implementing-controlvalueaccessor-in-angular-forms
+ */
+@Component({
+  selector: 'option-gender-input',
+  templateUrl: './gender-input.html',
+  styleUrls: ['./gender-input.scss'],
+  providers: [GENDER_INPUT_CONTROL_VALUE_ACCESSOR],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GenderInputComponent implements ControlValueAccessor {
+  protected selectOptions = Object.entries(GENDER_OPTIONS).map(([id, value]) => ({ ...value, id }));
+
+  /** Configurable display options */
+  @Input() options: { showValueText?: boolean; readonly?: boolean } = {};
+
+  /** Selected value binding */
+  @Input()
+  get selected() {
+    return this._selected;
+  }
+  set selected(selected: string[]) {
+    if (selected && this.selected.join(',') !== selected.join(',')) {
+      this._selected = selected.sort();
+      this.cdr.markForCheck();
+      this.selectedChange.emit(this._selected);
+      if (this._onChange) {
+        this._onChange(this._selected);
+      }
+    }
+  }
+
+  /** Additional event emitter to allow manual bind to <gender-input (selectedChange) /> event*/
+  @Output() selectedChange = new EventEmitter<string[]>();
+
+  private _selected: string[] = []; // this is the updated value that the class accesses
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  /**
+   * Return a text representation of the value. Returns an array or individual words for easier translation
+   * In case one gender selected will return ['Only', 'Female']
+   * In case both selected will return ['Both']
+   */
+  public get valueTextArray() {
+    if (this.selected.length == 0) return [];
+    if (this.selected.length === 2) return [STRINGS.both];
+    const [selectedId] = this.selected;
+    return [STRINGS.only, GENDER_OPTIONS[selectedId].label];
+  }
+
+  toggleOptionSelect(id: string) {
+    if (id) {
+      const valueIndex = this.selected.indexOf(id);
+      if (valueIndex === -1) {
+        this.selected = [...this._selected, id];
+      } else {
+        this.selected = this._selected.filter((v) => v !== id);
+      }
+    }
+  }
+
+  /** Events registered by ngModel and Form Controls */
+  // eslint-disable-next-line @typescript-eslint/member-ordering
+  private _onChange: (value: string[]) => void;
+  // eslint-disable-next-line @typescript-eslint/member-ordering
+  private _onTouched: (value: string[]) => void;
+
+  writeValue(selected: string[]) {
+    this.selected = selected;
+  }
+
+  registerOnChange(fn: (value: string[]) => void) {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: (value: string[]) => void) {
+    this._onTouched = fn; // <-- save the function
+  }
+}
diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/inputs/investment/investment-input.html b/apps/picsa-tools/option-tool/src/app/components/editor/inputs/investment/investment-input.html
new file mode 100644
index 000000000..ea8bcf1c5
--- /dev/null
+++ b/apps/picsa-tools/option-tool/src/app/components/editor/inputs/investment/investment-input.html
@@ -0,0 +1,19 @@
+<div class="input-container" *ngIf="!options.readonly">
+  <button
+    mat-button
+    *ngFor="let option of selectOptions"
+    class="select-button"
+    (click)="selected=option.id"
+    [attr.data-value]="option.id"
+    [attr.data-selected]="selected===option.id"
+  >
+    <div>
+      <mat-icon>{{option.matIcon}}</mat-icon>
+      <div>{{ option.label | translate }}</div>
+    </div>
+  </button>
+</div>
+<!-- Alternatively readonly mode which just displays selected icon -->
+<div class="readonly-value" *ngIf="options.readonly" [attr.data-value]="selected">
+  <span *ngIf="selectedOption">{{selectedOption.label.substring(0,1)}}</span>
+</div>
diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/inputs/investment/investment-input.scss b/apps/picsa-tools/option-tool/src/app/components/editor/inputs/investment/investment-input.scss
new file mode 100644
index 000000000..d1d3c2f90
--- /dev/null
+++ b/apps/picsa-tools/option-tool/src/app/components/editor/inputs/investment/investment-input.scss
@@ -0,0 +1,59 @@
+$icon-height: 24px;
+
+:host {
+  display: block;
+}
+.input-container {
+  display: flex;
+  gap: 8px;
+}
+
+mat-icon {
+  height: $icon-height;
+  width: $icon-height;
+}
+
+// Icon colors
+div.readonly-value,
+button.select-button.mat-mdc-button {
+  &[data-value='low'] {
+    background-color: hsl(0, 0%, 25%);
+    color: hsl(0, 0%, 25%);
+  }
+  &[data-value='medium'] {
+    color: hsl(0, 0%, 25%);
+    background-color: hsl(0, 0%, 25%);
+  }
+  &[data-value='high'] {
+    color: hsl(0, 0%, 25%);
+    background-color: hsl(0, 0%, 25%);
+  }
+}
+
+// Button overrides
+button.select-button.mat-mdc-button {
+  height: calc($icon-height + 2rem);
+  width: calc($icon-height + 2rem);
+  &[data-selected='false'] {
+    background-color: white !important;
+  }
+  &[data-selected='true'] {
+    color: white !important;
+    transform: scale(1.05);
+  }
+}
+
+// Readonly overrides
+div.readonly-value {
+  background: none !important;
+  font-weight: bold;
+}
+
+.text-value {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: center;
+}
+.text-value > span {
+  margin-right: 4px;
+}
diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/inputs/investment/investment-input.ts b/apps/picsa-tools/option-tool/src/app/components/editor/inputs/investment/investment-input.ts
new file mode 100644
index 000000000..543957b01
--- /dev/null
+++ b/apps/picsa-tools/option-tool/src/app/components/editor/inputs/investment/investment-input.ts
@@ -0,0 +1,116 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  forwardRef,
+  Input,
+  Output,
+  Provider,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { marker as translateMarker } from '@biesbjerg/ngx-translate-extract-marker';
+
+interface IInvestmentOption {
+  label: string;
+  /** mat-icon to be used with value select button */
+  matIcon: string;
+}
+
+const INVESTMENT_OPTIONS: { [id: string]: IInvestmentOption } = {
+  low: {
+    label: translateMarker('Low'),
+    matIcon: 'arrow_downward',
+  },
+  medium: {
+    label: translateMarker('Medium'),
+    matIcon: 'horizontal_rule',
+  },
+  high: {
+    label: translateMarker('High'),
+    matIcon: 'arrow_upward',
+  },
+};
+
+/** Accessor used for binding with ngModel or formgroups */
+export const INVESTMENT_INPUT_CONTROL_VALUE_ACCESSOR: Provider = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => InvestmentInputComponent),
+  multi: true,
+};
+
+/**
+ * Custom input element designed for use with angular Ng-model or standalone syntax
+ *
+ * @example
+ * ```
+ * <option-investment-input [(ngModel)]="someVariable"></option-gender-input>
+ * ```
+ * Adapted from:
+ * https://valor-software.com/articles/avoiding-common-pitfalls-with-controlvalueaccessors-in-angular
+ * https://sreyaj.dev/custom-form-controls-controlvalueaccessor-in-angular
+ * https://indepth.dev/posts/1055/never-again-be-confused-when-implementing-controlvalueaccessor-in-angular-forms
+ */
+@Component({
+  selector: 'option-investment-input',
+  templateUrl: './investment-input.html',
+  styleUrls: ['./investment-input.scss'],
+  providers: [INVESTMENT_INPUT_CONTROL_VALUE_ACCESSOR],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InvestmentInputComponent implements ControlValueAccessor {
+  protected selectOptions = Object.entries(INVESTMENT_OPTIONS).map(([id, value]) => ({ ...value, id }));
+
+  /** Configurable display options (none currently used) */
+  @Input() options: { readonly?: boolean } = {};
+
+  /** Selected value binding */
+  @Input()
+  get selected() {
+    return this._selected;
+  }
+  set selected(selected: string) {
+    selected ??= '';
+    if (this.selected !== selected) {
+      this._selected = selected;
+      this.cdr.markForCheck();
+      this.selectedChange.emit(this._selected);
+      if (this._onChange) {
+        this._onChange(this._selected);
+      }
+    }
+  }
+
+  /** Return the full option for selected id */
+  protected get selectedOption() {
+    if (this.selected) {
+      return INVESTMENT_OPTIONS[this.selected];
+    }
+    return null;
+  }
+
+  /** Additional event emitter to allow manual bind to <gender-input (selectedChange) /> event*/
+  @Output() selectedChange = new EventEmitter<string>();
+
+  private _selected = ''; // this is the updated value that the class accesses
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  /** Events registered by ngModel and Form Controls */
+  // eslint-disable-next-line @typescript-eslint/member-ordering
+  private _onChange: (value: string) => void;
+  // eslint-disable-next-line @typescript-eslint/member-ordering
+  private _onTouched: (value: string) => void;
+
+  writeValue(selected: string) {
+    this.selected = selected;
+  }
+
+  registerOnChange(fn: (value: string) => void) {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: (value: string) => void) {
+    this._onTouched = fn; // <-- save the function
+  }
+}
diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/inputs/performance/performance-input.html b/apps/picsa-tools/option-tool/src/app/components/editor/inputs/performance/performance-input.html
new file mode 100644
index 000000000..67dcecf94
--- /dev/null
+++ b/apps/picsa-tools/option-tool/src/app/components/editor/inputs/performance/performance-input.html
@@ -0,0 +1,19 @@
+<div class="input-container" *ngIf="!options.readonly">
+  <button
+    mat-button
+    *ngFor="let option of selectOptions"
+    class="select-button"
+    (click)="selected=option.id"
+    [attr.data-value]="option.id"
+    [attr.data-selected]="selected===option.id"
+  >
+    <div>
+      <mat-icon>{{option.matIcon}}</mat-icon>
+      <div>{{ option.label | translate }}</div>
+    </div>
+  </button>
+</div>
+<!-- Alternatively readonly mode which just displays selected icon -->
+<div class="readonly-value" *ngIf="options.readonly" [attr.data-value]="selected">
+  <mat-icon>{{selectedIconValue}}</mat-icon>
+</div>
diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/inputs/performance/performance-input.scss b/apps/picsa-tools/option-tool/src/app/components/editor/inputs/performance/performance-input.scss
new file mode 100644
index 000000000..02d8f6e46
--- /dev/null
+++ b/apps/picsa-tools/option-tool/src/app/components/editor/inputs/performance/performance-input.scss
@@ -0,0 +1,58 @@
+$icon-height: 24px;
+
+:host {
+  display: block;
+}
+.input-container {
+  display: flex;
+  gap: 8px;
+}
+
+mat-icon {
+  height: $icon-height;
+  width: $icon-height;
+}
+
+// Icon colors
+div.readonly-value,
+button.select-button.mat-mdc-button {
+  &[data-value='bad'] {
+    background-color: hsl(0, 80%, 50%);
+    color: hsl(0, 80%, 50%);
+  }
+  &[data-value='neutral'] {
+    color: hsl(40, 80%, 50%);
+    background-color: hsl(40, 80%, 50%);
+  }
+  &[data-value='good'] {
+    color: hsl(80, 60%, 40%);
+    background-color: hsl(80, 60%, 40%);
+  }
+}
+
+// Button overrides
+button.select-button.mat-mdc-button {
+  height: calc($icon-height + 2rem);
+  width: calc($icon-height + 2rem);
+  &[data-selected='false'] {
+    background-color: white !important;
+  }
+  &[data-selected='true'] {
+    color: white !important;
+    transform: scale(1.05);
+  }
+}
+
+// Readonly overrides
+div.readonly-value {
+  background: none !important;
+}
+
+.text-value {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: center;
+}
+.text-value > span {
+  margin-right: 4px;
+}
diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/inputs/performance/performance-input.ts b/apps/picsa-tools/option-tool/src/app/components/editor/inputs/performance/performance-input.ts
new file mode 100644
index 000000000..27998cf45
--- /dev/null
+++ b/apps/picsa-tools/option-tool/src/app/components/editor/inputs/performance/performance-input.ts
@@ -0,0 +1,117 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  forwardRef,
+  Input,
+  Output,
+  Provider,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { marker as translateMarker } from '@biesbjerg/ngx-translate-extract-marker';
+
+interface IPerformanceOption {
+  label: string;
+  /** mat-icon to be used with value select button */
+  matIcon: string;
+  /** alternative mat-icon to be used in readonly mode */
+  readonlyIcon: string;
+}
+
+const PERFORMANCE_OPTIONS: { [id: string]: IPerformanceOption } = {
+  bad: {
+    label: translateMarker('Bad'),
+    matIcon: 'cancel',
+    readonlyIcon: 'close',
+  },
+  neutral: {
+    label: translateMarker('Neutral'),
+    matIcon: 'do_not_disturb_on',
+    readonlyIcon: 'horizontal_rule',
+  },
+  good: {
+    label: translateMarker('Good'),
+    matIcon: 'check_circle',
+    readonlyIcon: 'check',
+  },
+};
+
+/** Accessor used for binding with ngModel or formgroups */
+export const PERFORMANCE_INPUT_CONTROL_VALUE_ACCESSOR: Provider = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => PerformanceInputComponent),
+  multi: true,
+};
+
+/**
+ * Custom input element designed for use with angular Ng-model or standalone syntax
+ *
+ * @example
+ * ```
+ * <option-performance-input [(ngModel)]="someVariable"></option-gender-input>
+ * ```
+ * Adapted from:
+ * https://valor-software.com/articles/avoiding-common-pitfalls-with-controlvalueaccessors-in-angular
+ * https://sreyaj.dev/custom-form-controls-controlvalueaccessor-in-angular
+ * https://indepth.dev/posts/1055/never-again-be-confused-when-implementing-controlvalueaccessor-in-angular-forms
+ */
+@Component({
+  selector: 'option-performance-input',
+  templateUrl: './performance-input.html',
+  styleUrls: ['./performance-input.scss'],
+  providers: [PERFORMANCE_INPUT_CONTROL_VALUE_ACCESSOR],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PerformanceInputComponent implements ControlValueAccessor {
+  protected selectOptions = Object.entries(PERFORMANCE_OPTIONS).map(([id, value]) => ({ ...value, id }));
+
+  /** Configurable display options (none currently used) */
+  @Input() options: { readonly?: boolean } = {};
+
+  /** Selected value binding */
+  @Input()
+  get selected() {
+    return this._selected;
+  }
+  set selected(selected: string) {
+    selected ??= '';
+    if (this.selected !== selected) {
+      this._selected = selected;
+      this.cdr.markForCheck();
+      this.selectedChange.emit(this._selected);
+      if (this._onChange) {
+        this._onChange(this._selected);
+      }
+    }
+  }
+
+  protected get selectedIconValue() {
+    return PERFORMANCE_OPTIONS[this.selected || '_none']?.readonlyIcon || '';
+  }
+
+  /** Additional event emitter to allow manual bind to <gender-input (selectedChange) /> event*/
+  @Output() selectedChange = new EventEmitter<string>();
+
+  private _selected = ''; // this is the updated value that the class accesses
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  /** Events registered by ngModel and Form Controls */
+  // eslint-disable-next-line @typescript-eslint/member-ordering
+  private _onChange: (value: string) => void;
+  // eslint-disable-next-line @typescript-eslint/member-ordering
+  private _onTouched: (value: string) => void;
+
+  writeValue(selected: string) {
+    this.selected = selected;
+  }
+
+  registerOnChange(fn: (value: string) => void) {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: (value: string) => void) {
+    this._onTouched = fn; // <-- save the function
+  }
+}
diff --git a/apps/picsa-tools/option-tool/src/app/components/gender-icon/gender-icon.component.html b/apps/picsa-tools/option-tool/src/app/components/gender-icon/gender-icon.component.html
deleted file mode 100644
index c31da8190..000000000
--- a/apps/picsa-tools/option-tool/src/app/components/gender-icon/gender-icon.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div class="gender-container">
-  <mat-icon [svgIcon]="'picsa_options_' + gender"></mat-icon>
-  <div class="gender-label" *ngIf="showLabel">{{ gender | translate }}</div>
-</div>
diff --git a/apps/picsa-tools/option-tool/src/app/components/gender-icon/gender-icon.component.scss b/apps/picsa-tools/option-tool/src/app/components/gender-icon/gender-icon.component.scss
deleted file mode 100644
index 896be38ae..000000000
--- a/apps/picsa-tools/option-tool/src/app/components/gender-icon/gender-icon.component.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.gender-container {
-  display: flex;
-  align-items: center;
-  margin: 4px 0;
-}
-.gender-label {
-  text-transform: capitalize;
-}
diff --git a/apps/picsa-tools/option-tool/src/app/components/gender-icon/gender-icon.component.spec.ts b/apps/picsa-tools/option-tool/src/app/components/gender-icon/gender-icon.component.spec.ts
deleted file mode 100644
index b029f40f3..000000000
--- a/apps/picsa-tools/option-tool/src/app/components/gender-icon/gender-icon.component.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { GenderIconComponent } from './gender-icon.component';
-
-describe('GenderIconComponent', () => {
-  let component: GenderIconComponent;
-  let fixture: ComponentFixture<GenderIconComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [GenderIconComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(GenderIconComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/apps/picsa-tools/option-tool/src/app/components/gender-icon/gender-icon.component.ts b/apps/picsa-tools/option-tool/src/app/components/gender-icon/gender-icon.component.ts
deleted file mode 100644
index 13d964061..000000000
--- a/apps/picsa-tools/option-tool/src/app/components/gender-icon/gender-icon.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'picsa-gender-icon',
-  templateUrl: './gender-icon.component.html',
-  styleUrls: ['./gender-icon.component.scss'],
-})
-export class GenderIconComponent {
-  @Input() gender: 'male' | 'female';
-  @Input() showLabel = true;
-}
diff --git a/apps/picsa-tools/option-tool/src/app/components/material.module.ts b/apps/picsa-tools/option-tool/src/app/components/material.module.ts
index 2ac28612d..432f8afa5 100644
--- a/apps/picsa-tools/option-tool/src/app/components/material.module.ts
+++ b/apps/picsa-tools/option-tool/src/app/components/material.module.ts
@@ -3,11 +3,12 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatIconRegistry } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatTableModule } from '@angular/material/table';
 import { DomSanitizer } from '@angular/platform-browser';
 
-const COMPONENTS = [MatButtonModule, MatDialogModule, MatIconModule, MatStepperModule, MatTableModule];
+const COMPONENTS = [MatButtonModule, MatDialogModule, MatIconModule, MatSelectModule, MatStepperModule, MatTableModule];
 // use custom module to make it easier to control what is available through app
 @NgModule({
   imports: COMPONENTS,
@@ -21,8 +22,16 @@ export class OptionMaterialModule {
   // icons can be accessed in mat-icon as svgIcon='station_data_${key}'
   registerIcons() {
     const icons = {
+      close: 'close',
       female: 'female',
       male: 'male',
+      rain_high: 'rain-high',
+      rain_low: 'rain-low',
+      rain_medium: 'rain-medium',
+      rain_high_label: 'rain-high-label',
+      rain_low_label: 'rain-low-label',
+      rain_medium_label: 'rain-medium-label',
+      risks: 'risks',
     };
     for (const [key, value] of Object.entries(icons)) {
       const iconName = `picsa_options_${key}`;
diff --git a/apps/picsa-tools/option-tool/src/app/pages/home/home.component.html b/apps/picsa-tools/option-tool/src/app/pages/home/home.component.html
index 05dfcaae9..cbe1890ea 100644
--- a/apps/picsa-tools/option-tool/src/app/pages/home/home.component.html
+++ b/apps/picsa-tools/option-tool/src/app/pages/home/home.component.html
@@ -1,5 +1,5 @@
-<div class="HomeContainer" [class.HideOverflow]="matStepperOpen">
-  <div>
+<div class="page-content" [class.HideOverflow]="matStepperOpen">
+  <div style="overflow: auto; flex: 1">
     <table mat-table [dataSource]="dbDataDocs" class="mat-elevation-z8">
       <!--- Note that these columns can be defined in any order.
           The actual rendered columns are set as a property on the row definition" -->
@@ -14,10 +14,10 @@
       <ng-container matColumnDef="gender_decisions">
         <th mat-header-cell *matHeaderCellDef>{{ 'Who makes decisions' | translate }}</th>
         <td mat-cell *matCellDef="let element">
-          <picsa-gender-icon
-            *ngFor="let gender of element._data.gender_decisions"
-            [gender]="gender"
-          ></picsa-gender-icon>
+          <option-gender-input
+            [ngModel]="element._data.gender_decisions"
+            [options]="{ readonly: true }"
+          ></option-gender-input>
         </td>
       </ng-container>
 
@@ -25,10 +25,10 @@
       <ng-container matColumnDef="gender_activities">
         <th mat-header-cell *matHeaderCellDef>{{ 'Who does activity' | translate }}</th>
         <td mat-cell *matCellDef="let element">
-          <picsa-gender-icon
-            *ngFor="let gender of element._data.gender_activities"
-            [gender]="gender"
-          ></picsa-gender-icon>
+          <option-gender-input
+            [ngModel]="element._data.gender_activities"
+            [options]="{ readonly: true }"
+          ></option-gender-input>
         </td>
       </ng-container>
 
@@ -36,34 +36,32 @@
       <ng-container matColumnDef="benefits">
         <th mat-header-cell *matHeaderCellDef>{{ 'Benefits and who' | translate }}</th>
         <td mat-cell *matCellDef="let element">
-          <div *ngFor="let benefit of element._data.benefits; index as i" class="benefit-container">
+          <div *ngFor="let benefit of element._data.benefits; index as i" style="display: flex">
             <div style="flex: 1">{{ benefit.benefit }}</div>
-            <div style="display: flex; width: 50px">
-              <!-- HACK add placeholder for both female and male to align, but hide if not used -->
-              <picsa-gender-icon
-                gender="female"
-                [showLabel]="false"
-                [style.visibility]="benefit.beneficiary.includes('female') ? 'visible' : 'hidden'"
-              ></picsa-gender-icon>
-
-              <picsa-gender-icon
-                gender="male"
-                [showLabel]="false"
-                [style.visibility]="benefit.beneficiary.includes('male') ? 'visible' : 'hidden'"
-              ></picsa-gender-icon>
-            </div>
+            <option-gender-input [ngModel]="benefit.beneficiary" [options]="{ readonly: true }"></option-gender-input>
           </div>
         </td>
       </ng-container>
 
       <!-- Performance Column -->
       <ng-container matColumnDef="performance">
-        <th mat-header-cell *matHeaderCellDef>{{ 'Performance' | translate }}</th>
-        <td mat-cell *matCellDef="let element">
-          <div style="display: flex; flex-direction: column; gap: 3px">
-            <div>{{ 'High RF' | translate }}: {{ element._data.performance.highRf | translate }}</div>
-            <div>{{ 'Mid RF' | translate }}: {{ element._data.performance.midRf | translate }}</div>
-            <div>{{ 'Low RF' | translate }} : {{ element._data.performance.lowRf | translate }}</div>
+        <th mat-header-cell *matHeaderCellDef>
+          {{ 'Performance' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element" class="split-values">
+          <div>
+            <option-performance-input
+              [options]="{ readonly: true }"
+              [ngModel]="element._data.performance.lowRf"
+            ></option-performance-input>
+            <option-performance-input
+              [options]="{ readonly: true }"
+              [ngModel]="element._data.performance.midRf"
+            ></option-performance-input>
+            <option-performance-input
+              [options]="{ readonly: true }"
+              [ngModel]="element._data.performance.highRf"
+            ></option-performance-input>
           </div>
         </td>
       </ng-container>
@@ -71,15 +69,16 @@
       <!-- Investment Column -->
       <ng-container matColumnDef="investment">
         <th mat-header-cell *matHeaderCellDef>{{ 'Investment' | translate }}</th>
-        <td mat-cell *matCellDef="let element">
+        <td mat-cell *matCellDef="let element" class="split-values">
           <div>
-            <mat-icon>payments</mat-icon>
-            <span style="margin-left: 8px">{{ element._data.investment.money | translate }}</span>
-          </div>
-
-          <div style="margin-top: 1rem">
-            <mat-icon>schedule</mat-icon>
-            <span style="margin-left: 8px">{{ element._data.investment.time | translate }}</span>
+            <option-investment-input
+              [(ngModel)]="element._data.investment.money"
+              [options]="{ readonly: true }"
+            ></option-investment-input>
+            <option-investment-input
+              [(ngModel)]="element._data.investment.time"
+              [options]="{ readonly: true }"
+            ></option-investment-input>
           </div>
         </td>
       </ng-container>
@@ -87,25 +86,59 @@
       <!-- Time Column -->
       <ng-container matColumnDef="time">
         <th mat-header-cell *matHeaderCellDef>{{ 'Time' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element._data.time | translate }}</td>
+        <td mat-cell style="text-align: center" *matCellDef="let element">
+          <span *ngIf="element._data.time.value">
+            {{ element._data.time.value }}{{ (element._data.time.unit | translate).slice(0, 1) }}
+          </span>
+        </td>
       </ng-container>
 
       <!-- Risks Column -->
       <ng-container matColumnDef="risk">
         <th mat-header-cell *matHeaderCellDef>{{ 'Risks' | translate }}</th>
-        <td mat-cell *matCellDef="let element">{{ element._data.risk | translate }}</td>
+        <td mat-cell *matCellDef="let element">
+          <div *ngFor="let risk of element._data.risk">{{ risk }}</div>
+        </td>
+      </ng-container>
+
+      <!-- Sub Headers 
+        Templates for any required subheaders as defined in component ts (fallback to default)
+        adapted from https://stackoverflow.com/q/56724439
+      -->
+      <ng-container matColumnDef="performance_subheader">
+        <th mat-header-cell *matHeaderCellDef class="split-values subheader">
+          <div class="performance-subheader">
+            <mat-icon svgIcon="picsa_options_rain_low_label"></mat-icon>
+            <mat-icon svgIcon="picsa_options_rain_medium_label"></mat-icon>
+            <mat-icon svgIcon="picsa_options_rain_high_label"></mat-icon>
+          </div>
+        </th>
+      </ng-container>
+      <ng-container matColumnDef="investment_subheader">
+        <th mat-header-cell *matHeaderCellDef class="split-values subheader">
+          <div>
+            <mat-icon>payments</mat-icon>
+            <mat-icon>schedule</mat-icon>
+          </div>
+        </th>
       </ng-container>
+      <ng-container matColumnDef="default_subheader"><th *matHeaderCellDef class="subheader"></th></ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-header-row *matHeaderRowDef="subheaderColumns" id="subheaderRow"></tr>
       <tr mat-row *matRowDef="let row; index as i; columns: displayedColumns" (click)="onRowClicked(row, i)"></tr>
     </table>
-    <button (click)="openNewDialog()" mat-button mat-raised-button color="primary">
-      {{ 'Add New Option' | translate }}
+  </div>
+  <div class="sticky-footer">
+    <button class="footer-button" (click)="openNewDialog()" mat-button mat-raised-button color="primary">
+      <mat-icon>add</mat-icon>
+      {{ 'Add Option' | translate }}
     </button>
   </div>
-  <div class="slide-in container" [class.active]="matStepperOpen">
-    <div>
-      <option-editor (dataTransfer)="onDataTransfer($event)"></option-editor>
+  <div class="editor-popup slide-in" [class.active]="matStepperOpen">
+    <div class="blurBackground"></div>
+    <div class="editor-container">
+      <option-editor (dataTransfer)="onDataTransfer($event)" style="width: 100%"></option-editor>
     </div>
   </div>
 </div>
diff --git a/apps/picsa-tools/option-tool/src/app/pages/home/home.component.scss b/apps/picsa-tools/option-tool/src/app/pages/home/home.component.scss
index 4a45cedc9..63c0fc6cf 100644
--- a/apps/picsa-tools/option-tool/src/app/pages/home/home.component.scss
+++ b/apps/picsa-tools/option-tool/src/app/pages/home/home.component.scss
@@ -1,61 +1,146 @@
+:host {
+  display: contents;
+}
+// ************************************************************
+//  Table - General
+// ************************************************************
+
 table {
   border-collapse: collapse;
 }
 
 th {
-  border: 1px solid black;
+  border-right: 1px solid var(--color-light);
+  border-left: 1px solid var(--color-light);
+  border-bottom: none;
   padding: 8px;
 }
+th.subheader {
+  border-bottom: 2px solid var(--color-primary);
+}
+th:first-of-type {
+  border-left: none;
+}
+th:last-of-type {
+  border-right: none;
+}
+tr#subheaderRow {
+  height: 36px;
+}
 td {
   vertical-align: top;
 }
 td.mdc-data-table__cell {
   padding: 8px;
 }
-
-.HomeContainer {
-  max-height: 100vh;
-}
-
+// ************************************************************
+//  Editor - Popup
+// ************************************************************
 .HideOverflow {
   overflow-y: hidden;
 }
-
-.container {
-  position: relative;
-  height: 100vh;
+.editor-popup {
+  position: fixed;
+  z-index: 2;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.editor-container {
+  height: 100%;
+  max-height: 750px;
+  background-color: white;
   overflow: auto;
-  background-color: #fff;
-  width: 100%;
-  z-index: 20;
+  border-radius: 20px;
   justify-content: center;
   display: flex;
-  padding-top: 2rem;
-  top: 0;
-  right: 0;
-}
-
-.buttonposition {
+  margin: 1rem;
+  z-index: 2;
   position: absolute;
-  right: 20px;
-  top: 20px;
+  top: 2.5rem;
+  left: 1rem;
+  width: calc(100vw - 4rem);
 }
-
 .slide-in {
-  position: absolute;
-  bottom: 0;
-  display: none;
   transition: transform 0.3s ease-in-out;
-  transform: translateY(100%);
+  transform: translateY(100vh);
 }
-
 .slide-in.active {
   transform: translateY(0);
-  display: block;
+}
+.blurBackground {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  background-color: rgba(0, 0, 0, 0.6);
 }
 
-.benefit-container {
+// ************************************************************
+//  Table Value - Performance
+// ************************************************************
+td.performance-td.mdc-data-table__cell {
+  padding: 8px 0;
+}
+.performance-container {
   display: flex;
-  margin-bottom: 8px;
+  flex-direction: column;
   align-items: center;
 }
+
+.mat-mdc-header-cell {
+  border-top: none;
+  &.subheader {
+    padding: 0;
+    height: 100%;
+  }
+}
+.performance-subheader {
+  mat-icon {
+    padding: 0 4px;
+    height: 100%;
+    max-width: 48px;
+    margin: auto;
+  }
+  mat-icon:nth-of-type(even) {
+    border-left: 1px solid var(--color-light);
+    border-right: 1px solid var(--color-light);
+  }
+}
+//
+td.split-values,
+th.split-values {
+  padding: 8px 0;
+  div {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+  div > * {
+    flex: 1;
+    text-align: center;
+  }
+}
+
+// ************************************************************
+//  Table Value - To Sort
+// ************************************************************
+
+.Gender-Display {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.gender-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
diff --git a/apps/picsa-tools/option-tool/src/app/pages/home/home.component.ts b/apps/picsa-tools/option-tool/src/app/pages/home/home.component.ts
index 2f4585b41..b296ea816 100644
--- a/apps/picsa-tools/option-tool/src/app/pages/home/home.component.ts
+++ b/apps/picsa-tools/option-tool/src/app/pages/home/home.component.ts
@@ -18,6 +18,9 @@ export class HomeComponent implements OnDestroy {
   /** List of columns to display in table. Note, order will match template keys */
   public displayedColumns = Object.keys(ENTRY_TEMPLATE()).filter((key) => !key.startsWith('_'));
 
+  /** List of columns to display subheader row for */
+  public subheaderColumns: string[];
+
   public dbDataDocs: RxDocument<IOptionsToolEntry>[] = [];
   public matStepperOpen = false;
 
@@ -28,6 +31,7 @@ export class HomeComponent implements OnDestroy {
 
   constructor(private service: OptionsToolService) {
     this.subscribeToDbChanges();
+    this.addSubheaderColumns();
   }
 
   /** Initialise service and subscribe to data changes */
@@ -41,6 +45,17 @@ export class HomeComponent implements OnDestroy {
     });
   }
 
+  /**
+   * Add mat-table identifiers for all subheader columns that will appear below the main heading row
+   * As only some header rows want a subheader use a fallback 'default_subheader' templated in component html
+   */
+  private addSubheaderColumns() {
+    const enabledSubheaders = ['performance', 'investment'];
+    this.subheaderColumns = this.displayedColumns.map((name) =>
+      enabledSubheaders.includes(name) ? `${name}_subheader` : `default_subheader`
+    );
+  }
+
   ngOnDestroy(): void {
     this.componentDestroyed$.next(true);
     this.componentDestroyed$.complete();
diff --git a/apps/picsa-tools/option-tool/src/app/pages/home/home.module.ts b/apps/picsa-tools/option-tool/src/app/pages/home/home.module.ts
index a48ba20f7..3692d1c4f 100644
--- a/apps/picsa-tools/option-tool/src/app/pages/home/home.module.ts
+++ b/apps/picsa-tools/option-tool/src/app/pages/home/home.module.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { Route, RouterModule } from '@angular/router';
 // import { marker as translateMarker } from '@biesbjerg/ngx-translate-extract-marker';
 import { PicsaTranslateModule } from '@picsa/shared/modules';
@@ -16,6 +17,6 @@ const routes: Route[] = [
 
 @NgModule({
   declarations: [HomeComponent],
-  imports: [CommonModule, RouterModule.forChild(routes), OptionToolComponentsModule, PicsaTranslateModule],
+  imports: [CommonModule, FormsModule, RouterModule.forChild(routes), OptionToolComponentsModule, PicsaTranslateModule],
 })
 export class HomeModule {}
diff --git a/apps/picsa-tools/option-tool/src/app/schemas/index.ts b/apps/picsa-tools/option-tool/src/app/schemas/index.ts
index 9d0439c5d..3c4e6d4d5 100644
--- a/apps/picsa-tools/option-tool/src/app/schemas/index.ts
+++ b/apps/picsa-tools/option-tool/src/app/schemas/index.ts
@@ -1,10 +1,10 @@
-import { COLLECTION_V2, ENTRY_TEMPLATE_V2, IOptionsToolEntry_v2, SCHEMA_V2 } from './schema_v2';
+import * as schema from './schema_v3';
 
 // Re-export schema to provide latest version without need to refactor additonal code
 
-export const COLLECTION = COLLECTION_V2;
-export type IOptionsToolEntry = IOptionsToolEntry_v2;
-export const SCHEMA = SCHEMA_V2;
+export const COLLECTION = schema.COLLECTION_V3;
+export type IOptionsToolEntry = schema.IOptionsToolEntry_v3;
+export const SCHEMA = schema.SCHEMA_V3;
 
 // Ensure blank templates always recreated from scratch
-export const ENTRY_TEMPLATE = ENTRY_TEMPLATE_V2;
+export const ENTRY_TEMPLATE = schema.ENTRY_TEMPLATE_V3;
diff --git a/apps/picsa-tools/option-tool/src/app/schemas/schema_v2.ts b/apps/picsa-tools/option-tool/src/app/schemas/schema_v2.ts
index 155113a5c..8e142d002 100644
--- a/apps/picsa-tools/option-tool/src/app/schemas/schema_v2.ts
+++ b/apps/picsa-tools/option-tool/src/app/schemas/schema_v2.ts
@@ -5,8 +5,9 @@ import { RxJsonSchema } from 'rxdb';
 import { COLLECTION_V1, IOptionsToolEntry_v1, SCHEMA_V1 } from './schema_v1';
 
 /**
- * rename 'gender' to 'gender_activities' and add 'gender_decisions'
- * add _id primary key
+ * RENAME 'gender' to 'gender_activities'
+ * ADD 'gender_decisions'
+ * ADD _id primary key
  * */
 export interface IOptionsToolEntry_v2 extends Omit<IOptionsToolEntry_v1, 'gender'> {
   gender_decisions: string[];
diff --git a/apps/picsa-tools/option-tool/src/app/schemas/schema_v3.ts b/apps/picsa-tools/option-tool/src/app/schemas/schema_v3.ts
new file mode 100644
index 000000000..d634ac7f9
--- /dev/null
+++ b/apps/picsa-tools/option-tool/src/app/schemas/schema_v3.ts
@@ -0,0 +1,82 @@
+import { generateID } from '@picsa/shared/services/core/db/db.service';
+import { IPicsaCollectionCreator } from '@picsa/shared/services/core/db_v2';
+import { RxJsonSchema } from 'rxdb';
+
+import { COLLECTION_V2, IOptionsToolEntry_v2, SCHEMA_V2 } from './schema_v2';
+
+const SCHEMA_VERSION = 3;
+
+/**
+ * UPDATE 'risk' to take array of values
+ * UPDATE 'time' to take both value and unit properties
+ * */
+export interface IOptionsToolEntry_v3 extends Omit<Omit<IOptionsToolEntry_v2, 'risk'>, 'time'> {
+  risk: string[];
+  time: { unit: 'month' | 'week' | 'day'; value: number | null };
+  _id: string;
+}
+
+// Use a function to generate templates to ensure new object instantiated with id
+export const ENTRY_TEMPLATE_V3: () => IOptionsToolEntry_v3 = () => ({
+  _id: generateID(),
+  practice: '',
+  gender_decisions: [],
+  gender_activities: [],
+  benefits: [{ beneficiary: [], benefit: '' }],
+  performance: { lowRf: '', highRf: '', midRf: '' },
+  investment: { money: '', time: '' },
+  time: { value: null, unit: 'month' },
+  risk: [''],
+});
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const { risk, time, ...unchanged_properties } = SCHEMA_V2.properties;
+
+export const SCHEMA_V3: RxJsonSchema<IOptionsToolEntry_v3> = {
+  ...SCHEMA_V2,
+  version: SCHEMA_VERSION,
+  properties: {
+    ...unchanged_properties,
+    risk: {
+      type: 'array',
+      items: {
+        type: 'string',
+      },
+    },
+    time: {
+      type: 'object',
+      properties: {
+        value: {
+          type: 'integer',
+        },
+        unit: {
+          type: 'string',
+        },
+      },
+    },
+  },
+  primaryKey: '_id',
+};
+
+export const COLLECTION_V3: IPicsaCollectionCreator<IOptionsToolEntry_v3> = {
+  ...COLLECTION_V2,
+  schema: SCHEMA_V3,
+  // Ensure old data can be migrated to new format
+  // https://rxdb.info/data-migration.html
+  migrationStrategies: {
+    ...COLLECTION_V2.migrationStrategies,
+    3: (data: IOptionsToolEntry_v2): IOptionsToolEntry_v3 => {
+      return {
+        ...data,
+        time: {
+          unit: 'month',
+          value: parseInt(data.time) || 0,
+        },
+        risk: [data.risk],
+        _id: generateID(),
+      };
+    },
+  },
+  // HACK - type def issue (not actually changed)
+  conflictHandler: COLLECTION_V2.conflictHandler as any,
+};
diff --git a/apps/picsa-tools/option-tool/src/assets/svgs/close.svg b/apps/picsa-tools/option-tool/src/assets/svgs/close.svg
new file mode 100644
index 000000000..b89deefcc
--- /dev/null
+++ b/apps/picsa-tools/option-tool/src/assets/svgs/close.svg
@@ -0,0 +1,3 @@
+<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.5 2.8125C11.5312 2.8125 2.8125 11.5312 2.8125 22.5C2.8125 33.4688 11.5312 42.1875 22.5 42.1875C33.4688 42.1875 42.1875 33.4688 42.1875 22.5C42.1875 11.5312 33.4688 2.8125 22.5 2.8125ZM30.0938 32.3438L22.5 24.75L14.9063 32.3438L12.6562 30.0938L20.25 22.5L12.6562 14.9063L14.9063 12.6562L22.5 20.25L30.0938 12.6562L32.3438 14.9063L24.75 22.5L32.3438 30.0938L30.0938 32.3438Z" fill="#454545"/>
+</svg>
diff --git a/apps/picsa-tools/option-tool/src/assets/svgs/female.svg b/apps/picsa-tools/option-tool/src/assets/svgs/female.svg
index bef2cf140..de959ae24 100644
--- a/apps/picsa-tools/option-tool/src/assets/svgs/female.svg
+++ b/apps/picsa-tools/option-tool/src/assets/svgs/female.svg
@@ -1,15 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="39.122" height="39.122" viewBox="0 0 10.351 10.351" version="1.1" id="svg472" sodipodi:docname="female.svg"
-    inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg"
-    xmlns:svg="http://www.w3.org/2000/svg">
-    <defs id="defs476" />
-    <sodipodi:namedview id="namedview474" pagecolor="#ffffff" bordercolor="#000000" borderopacity="0.25"
-        inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0"
-        inkscape:deskcolor="#d1d1d1" showgrid="false" inkscape:zoom="20.551096" inkscape:cx="19.561001"
-        inkscape:cy="19.58533" inkscape:window-width="1920" inkscape:window-height="991" inkscape:window-x="1911"
-        inkscape:window-y="-9" inkscape:window-maximized="1" inkscape:current-layer="svg472" />
-    <path class="cls-2"
-        d="M66.885 27.089a.865.865 0 1 1 .865.865.868.868 0 0 1-.865-.865m.868 1.299c-1.63 0-2.81 1.09-2.81 2.593a.431.431 0 1 0 .862 0 1.603 1.603 0 0 1 1.082-1.513l-.862 4.106a.198.198 0 0 0 .212.22h.433v2.38a.434.434 0 0 0 .866 0v-2.38h.43v2.38a.434.434 0 0 0 .866 0v-2.38h.431a.198.198 0 0 0 .215-.22l-.86-4.106a1.632 1.632 0 0 1 1.08 1.513.431.431 0 1 0 .862 0c0-1.503-1.18-2.593-2.807-2.593"
-        style="fill:#800080;stroke-width:0.264583" transform="translate(-62.576 -26.224)" id="path470" />
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M41.669753 8.3538065a8.3158271 8.3538113 0 1 1 8.315827 8.3538125 8.3446681 8.3827841 0 0 1-8.315827-8.3538125m8.344668 12.5452045C34.344134 20.899011 23 31.425779 23 45.94113a4.1434935 4.1624197 0 1 0 8.286987 0A15.410717 15.481109 0 0 1 41.68898 31.329203l-8.286987 39.654046a1.9035072 1.9122019 0 0 0 2.038098 2.124669h4.162721v22.985057a4.172334 4.191392 0 0 0 8.325441 0V73.107918h4.133881v22.985057a4.172334 4.191392 0 0 0 8.325439 0V73.107918h4.143494a1.9035072 1.9122019 0 0 0 2.06694-2.124669l-8.26776-39.654046A15.689514 15.761179 0 0 1 68.713013 45.94113a4.1434935 4.1624197 0 1 0 8.286987 0c0-14.515351-11.344134-25.042119-26.98558-25.042119" class="cls-2"/></svg>
\ No newline at end of file
diff --git a/apps/picsa-tools/option-tool/src/assets/svgs/male.svg b/apps/picsa-tools/option-tool/src/assets/svgs/male.svg
index 600b74741..fad1e8048 100644
--- a/apps/picsa-tools/option-tool/src/assets/svgs/male.svg
+++ b/apps/picsa-tools/option-tool/src/assets/svgs/male.svg
@@ -1,15 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="39.111" height="39.111" viewBox="0 0 10.348 10.348" version="1.1" id="svg484" sodipodi:docname="male.svg"
-    inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg"
-    xmlns:svg="http://www.w3.org/2000/svg">
-    <defs id="defs488" />
-    <sodipodi:namedview id="namedview486" pagecolor="#ffffff" bordercolor="#000000" borderopacity="0.25"
-        inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0"
-        inkscape:deskcolor="#d1d1d1" showgrid="false" inkscape:zoom="20.556877" inkscape:cx="19.5555"
-        inkscape:cy="19.579823" inkscape:window-width="1920" inkscape:window-height="991" inkscape:window-x="1911"
-        inkscape:window-y="-9" inkscape:window-maximized="1" inkscape:current-layer="svg484" />
-    <path class="cls-2"
-        d="M99.759 89.15a.865.865 0 1 1 .865.865.865.865 0 0 1-.865-.865m.865 1.299c-1.627 0-2.81 1.09-2.81 2.593a.434.434 0 1 0 .865 0 1.701 1.701 0 0 1 .863-1.514v6.705a.434.434 0 0 0 .865 0v-3.244h.434v3.244a.434.434 0 0 0 .865 0v-6.705a1.696 1.696 0 0 1 .863 1.514.434.434 0 1 0 .865 0c0-1.503-1.183-2.593-2.81-2.593"
-        style="fill:#008066;stroke-width:0.264583" transform="translate(-95.45 -88.285)" id="path482" />
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M41.518156 8.3607618a8.3069536 8.3607612 0 1 1 8.306954 8.3607612 8.3069536 8.3607612 0 0 1-8.306954-8.3607612M49.82511 20.916402c-15.624755 0-26.985595 10.535526-26.985595 25.062953a4.1678819 4.194879 0 1 0 8.306954 0 16.335408 16.441219 0 0 1 8.287747-14.633749v64.807981a4.1678819 4.194879 0 0 0 8.306953 0V64.798316h4.167882v31.355271a4.1678819 4.194879 0 0 0 8.306954 0V31.345606a16.287391 16.392891 0 0 1 8.287746 14.633749 4.1678819 4.194879 0 1 0 8.306954 0c0-14.527427-11.360839-25.062953-26.985595-25.062953" class="cls-2"/></svg>
\ No newline at end of file
diff --git a/apps/picsa-tools/option-tool/src/assets/svgs/rain-high-label.svg b/apps/picsa-tools/option-tool/src/assets/svgs/rain-high-label.svg
new file mode 100644
index 000000000..01c41f765
--- /dev/null
+++ b/apps/picsa-tools/option-tool/src/assets/svgs/rain-high-label.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 13"><path fill="#1e90ff" d="M1.7606874.31740021c.49487.83809999.96918 1.57589999 1.37665 2.34969999.1727.3306.2233.7115.1429 1.0756-.08041.3642-.28667.6884-.58251.9155-.27137.2167-.60937.3328-.9566.3285-.34723-.0042-.68231-.1284-.94834-.3516-.28948-.2345-.48753-.5631-.55964-.9286-.07211-.3655-.01371-.7446.16502-1.0715.40747-.7584.87021-1.4872 1.36252-2.31759999zm9.2329496.0118c.4756.79179999.9178 1.49489999 1.324 2.21849999.1995.3337.2731.7277.2073 1.1108s-.2665.7301-.5659.978c-.2725.2287-.6173.3531-.973.3512-.3557-.0018-.6992-.13-.9693-.3615-.2972995-.2503-.4952995-.5988-.5579995-.9824-.0627-.3836.014-.7769.2161-1.1089.4074995-.7198.8483995-1.4216 1.3187995-2.20569999zm9.2332-.0152c.5039.85869999 1.0013 1.61959999 1.4139 2.42559999.3445.6799.0926 1.491-.4948 1.937-.2626.2014-.5843.3106-.9152.3106-.331 0-.6526-.1092-.9152-.3106-.5849-.4408-.8381-1.2584-.4936-1.9383.4023-.8047.8998-1.5656 1.4049-2.42429999zM6.3777074 8.0172002c.49363.8355.96793 1.5746 1.37663 2.3483998.173.3302.224.7109.1441 1.0751-.08.3641-.2857.6885-.5811.9159-.2714.217-.6096.3333-.95703.3293-.34745-.0039-.68283-.128-.94921-.3511-.29106-.2342-.49028-.5634-.56268-.9299-.07241-.3665-.01335-.7468.16678-1.074.40747-.7583998.87021-1.4871998 1.36251-2.3136998zm9.2330296 0c.4807.8059.9332 1.5206 1.3406 2.2609998.1892.3301.2557.7165.1877 1.0909-.068.3744-.266.7128-.5591.9554-.2716.2299-.6159.3561-.9718.3561-.3558 0-.7002-.1262-.9717-.3561-.293-.2428-.4907-.5814-.5582-.9558-.0675-.3745-.0005-.7607.1893-1.0905.4087-.7390998.8612-1.4537998 1.3432-2.2609998z"/></svg>
\ No newline at end of file
diff --git a/apps/picsa-tools/option-tool/src/assets/svgs/rain-high.svg b/apps/picsa-tools/option-tool/src/assets/svgs/rain-high.svg
new file mode 100644
index 000000000..7fbcc6696
--- /dev/null
+++ b/apps/picsa-tools/option-tool/src/assets/svgs/rain-high.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 44 44"><path fill="#4682b4" d="M15.083772 25.066101c-2.8279 0-5.6416001.0102-8.4630301 0-3.54125-.0167-6.27655002-2.8626-6.16987002-6.4026.08741-3.0849 2.66076002-5.7225 5.76240002-5.8973 3.1801-.1787 6.0156001 2.0926 6.4591001 5.1724.1414.9782.1414.9473 1.1324.9884.4627.0193.5142-.1465.4859-.5398-.1311-1.8243-.9056-3.5427-2.1855-4.8492-1.2799-1.3065-2.9820001-2.1161-4.8031801-2.2847-.32134-.0334-.42546-.1568-.49358-.437-1.14786-4.8099695 2.25066-9.7034495 7.1595601-10.2895795 5.2868-.63113 9.769 3.48468 9.5466 8.7817795-.0442 1.2206-.3688 2.4147-.9486 3.4898-.1504.2777-.1285.4306.1671.5373.0453.0203.0884.0453.1285.0746.8355.4884.851.4961 1.3034-.3715.1427-.2738.3317-.216.5142-.1748 2.3432.5283 3.9847 1.9023 4.7019 4.2006 1.2636 4.0336-1.7005 7.9939-5.932 8.0003-2.7876.0034-5.576.0038-8.3653.0013z"/><path fill="#e9e9e9" d="M35.853872 11.986001c2.4036 0 4.806 0 7.2097-.0077.3522 0 .473.0591.4872.4538.0179.4923-.1376.7635-.5605 1.0193-1.7661 1.0656-3.5027 2.1851-5.2585 3.2623-.2571.1581-.3753.3188-.365.6427.0269.9113-.0001 1.8265.0179 2.7391.0078.306-.0848.3857-.3753.3625-.2905-.0231-.5771.0129-.8638-.0103-.2648-.0218-.3085.0862-.3136.3252-.027 1.2083-.0334 1.216 1.144 1.2122.2892 0 .4216.0372.41.3792-.0295.784-.0282 1.5707 0 2.3548.0116.3188-.1067.3933-.3856.3509-.0478-.0052-.0961-.0052-.1439 0-.3304.0283-.8625-.1427-.95.0655-.1593.3857-.0604.8728-.0706 1.3189 0 .1285.0758.1568.1838.1542h.2403c1.1132 0 1.1132 0 1.1132 1.1003 0 .5604-.009 1.1209 0 1.6813 0 .2236-.0502.3059-.2892.3008-.8163-.0142-1.635-.0322-2.45.0064-.4023.018-.3445-.2018-.3445-.4409v-9.661c0-.7519-.0154-1.5052.0077-2.2584.0156-.1231-.0083-.248-.0684-.3566-.0601-.1087-.1532-.1953-.2658-.2475-1.0514-.6093-2.0656-1.2854-3.1363-1.8549-.9782-.5141-1.7481-1.2725-2.5515-2.0013-.2571-.2301-.1478-.5142-.1221-.7622.0257-.2481.2866-.1183.4344-.1196 2.4281-.0115 4.8473-.009 7.2664-.009z"/><path fill="#1e90ff" d="M35.836872 2.7000015c.4936.83422.9666 1.57203 1.3754 2.34455.1736.3299.2255.71041.1465 1.07475-.079.36433-.2838.68921-.5784.9175995-.2706.21751-.6081.3348-.9553.33199-.3471-.0028-.6826-.12555-.9497-.34741-.2906-.2331895-.4902-.5609895-.564-.9262495-.0738-.36527-.017-.74483.1604-1.07253.4075-.75838.8715-1.48848 1.3651-2.3227zM3.5211219 31.168701c.49487.8381.96918 1.5759 1.37665 2.3497.1727.3306.2233.7115.1429 1.0756-.08041.3642-.28667.6884-.58251.9155-.27137.2167-.60937.3328-.9566.3285-.34723-.0042-.68231-.1284-.94834-.3516-.28948-.2345-.48753-.5631-.55964-.9286-.07211-.3655-.01371-.7446.16502-1.0715.40747-.7584.87021-1.4872 1.36252-2.3176zM12.754072 31.180501c.4756.7918.9178 1.4949 1.324 2.2185.1995.3337.2731.7277.2073 1.1108s-.2665.7301-.5659.978c-.2725.2287-.6173.3531-.973.3512-.3557-.0018-.6992-.13-.9693-.3615-.2973-.2503-.4953-.5988-.558-.9824-.0627-.3836.014-.7769.2161-1.1089.4075-.7198.8484-1.4216 1.3188-2.2057zM21.987272 31.165301c.5039.8587 1.0013 1.6196 1.4139 2.4256.3445.6799.0926 1.491-.4948 1.937-.2626.2014-.5843.3106-.9152.3106-.331 0-.6526-.1092-.9152-.3106-.5849-.4408-.8381-1.2584-.4936-1.9383.4023-.8047.8998-1.5656 1.4049-2.4243zM8.1381419 38.868501c.49363.8355.96793 1.5746 1.37663 2.3484.173.3302.224.7109.1441 1.0751-.08.3641-.2857.6885-.5811.9159-.2714.217-.6096.3333-.95703.3293-.34745-.0039-.68283-.128-.94921-.3511-.29106-.2342-.49028-.5634-.56268-.9299-.07241-.3665-.01335-.7468.16678-1.074.40747-.7584.87021-1.4872 1.36251-2.3137zM17.371172 38.868501c.4807.8059.9332 1.5206 1.3406 2.261.1892.3301.2557.7165.1877 1.0909-.068.3744-.266.7128-.5591.9554-.2716.2299-.6159.3561-.9718.3561-.3558 0-.7002-.1262-.9717-.3561-.293-.2428-.4907-.5814-.5582-.9558-.0675-.3745-.0005-.7607.1893-1.0905.4087-.7391.8612-1.4538 1.3432-2.261z"/><path fill="#00ced1" d="M37.364172 17.352301h-3.0862v25.3158h3.0862z"/></svg>
\ No newline at end of file
diff --git a/apps/picsa-tools/option-tool/src/assets/svgs/rain-low-label.svg b/apps/picsa-tools/option-tool/src/assets/svgs/rain-low-label.svg
new file mode 100644
index 000000000..7c5277489
--- /dev/null
+++ b/apps/picsa-tools/option-tool/src/assets/svgs/rain-low-label.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 13"><path fill="#1e90ff" d="M11.000719 4.1707393c.4756.7918.9178 1.4949 1.324 2.2185.1995.3337.2731.7277.2073 1.1108s-.2665.7301-.5659.978c-.2725.2287-.6173.3531-.973.3512-.3557-.0018-.6992-.13-.9693-.3615-.2972999-.2503-.4952999-.5988-.5579999-.9824-.0627-.3836.014-.7769.2161-1.1089.4074999-.7198.8483999-1.4216 1.3187999-2.2057z"/></svg>
\ No newline at end of file
diff --git a/apps/picsa-tools/option-tool/src/assets/svgs/rain-low.svg b/apps/picsa-tools/option-tool/src/assets/svgs/rain-low.svg
new file mode 100644
index 000000000..4aa0052c6
--- /dev/null
+++ b/apps/picsa-tools/option-tool/src/assets/svgs/rain-low.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 44 44"><path fill="#4682b4" d="M15.083772 25.500701c-2.8279 0-5.6416001.0102-8.4630301 0-3.54125-.0167-6.27655-2.8626-6.16987-6.4026.08741-3.0849 2.66076-5.7225 5.7624-5.8973 3.1801-.1787 6.0156001 2.0926 6.4591001 5.1724.1414.9782.1414.9473 1.1324.9884.4627.0193.5142-.1465.4859-.5398-.1311-1.8243-.9056-3.5427-2.1855-4.8492-1.2799-1.3065-2.9820001-2.1161-4.8031801-2.2847-.32134-.0334-.42546-.1568-.49358-.437-1.14786-4.8099695 2.25066-9.7034495 7.1595601-10.28957949 5.2868-.63113 9.769 3.48467999 9.5466 8.78177999-.0442 1.2205995-.3688 2.4146995-.9486 3.4897995-.1504.2777-.1285.4306.1671.5373.0453.0203.0884.0453.1285.0746.8355.4884.851.4961 1.3034-.3715.1427-.2738.3317-.216.5142-.1748 2.3432.5283 3.9847 1.9023 4.7019 4.2006 1.2636 4.0336-1.7005 7.9939-5.932 8.0003-2.7876.0034-5.576.0038-8.3653.0013z"/><path fill="#e9e9e9" d="M35.853872 12.420601c2.4036 0 4.806 0 7.2097-.0077.3522 0 .473.0591.4872.4538.0179.4923-.1376.7635-.5605 1.0193-1.7661 1.0656-3.5027 2.1851-5.2585 3.2623-.2571.1581-.3753.3188-.365.6427.0269.9113-.0001 1.8265.0179 2.7391.0078.306-.0848.3857-.3753.3625-.2905-.0231-.5771.0129-.8638-.0103-.2648-.0218-.3085.0862-.3136.3252-.027 1.2083-.0334 1.216 1.144 1.2122.2892 0 .4216.0372.41.3792-.0295.784-.0282 1.5707 0 2.3548.0116.3188-.1067.3933-.3856.3509-.0478-.0052-.0961-.0052-.1439 0-.3304.0283-.8625-.1427-.95.0655-.1593.3857-.0604.8728-.0706 1.3189 0 .1285.0758.1568.1838.1542h.2403c1.1132 0 1.1132 0 1.1132 1.1003 0 .5604-.009 1.1209 0 1.6813 0 .2236-.0502.3059-.2892.3008-.8163-.0142-1.635-.0322-2.45.0064-.4023.018-.3445-.2018-.3445-.4409v-9.661c0-.7519-.0154-1.5052.0077-2.2584.0156-.1231-.0083-.248-.0684-.3566-.0601-.1087-.1532-.1953-.2658-.2475-1.0514-.6093-2.0656-1.2854-3.1363-1.8549-.9782-.5141-1.7481-1.2725-2.5515-2.0013-.2571-.2301-.1478-.5142-.1221-.7622.0257-.2481.2866-.1183.4344-.1196 2.4281-.0115 4.8473-.009 7.2664-.009z"/><path fill="#1e90ff" d="M35.836872 3.1346015c.4936.83422.9666 1.57203 1.3754 2.34455.1736.3299.2255.71041.1465 1.07475-.079.36433-.2838.68921-.5784.9176-.2706.21751-.6081.3348-.9553.33199-.3471-.00281-.6826-.12555-.9497-.34741-.2906-.23319-.4902-.56099-.564-.92625-.0738-.36527-.017-.74483.1604-1.07253.4075-.75838.8715-1.48848 1.3651-2.3227zM12.754072 31.615101c.4756.7918.9178 1.4949 1.324 2.2185.1995.3337.2731.7277.2073 1.1108s-.2665.7301-.5659.978c-.2725.2287-.6173.3531-.973.3512-.3557-.0018-.6992-.13-.9693-.3615-.2973-.2503-.4953-.5988-.558-.9824-.0627-.3836.014-.7769.2161-1.1089.4075-.7198.8484-1.4216 1.3188-2.2057z"/><path fill="#e9e9e9" d="M37.406312 27.500097s-.0001 1.8265.0179 2.7391c.0078.306-.0848.3857-.3753.3625-.2905-.0231-.5771.0129-.8638-.0103-.2648-.0218-.3085.0862-.3136.3252-.027 1.2083-.0334 1.216 1.144 1.2122.2892 0 .4216.0372.41.3792-.0295.784-.0282 1.5707 0 2.3548.0116.3188-.1067.3933-.3856.3509-.0478-.0052-.0961-.0052-.1439 0-.3304.0283-.8625-.1427-.95.0655-.1593.3857-.0604.8728-.0706 1.3189 0 .1285.0758.1568.1838.1542h.2403c1.1132 0 1.1132 0 1.1132 1.1003 0 .5604-.009 1.1209 0 1.6813 0 .2236-.0502.3059-.2892.3008-.8163-.0142-1.635-.0322-2.45.0064-.4023.018-.3445-.2018-.3445-.4409v-9.661c0-.7519.0077-2.2584.0077-2.2584z"/><path fill="#00ced1" d="M37.364172 39.492456h-3.0862v3.610245h3.0862z"/></svg>
\ No newline at end of file
diff --git a/apps/picsa-tools/option-tool/src/assets/svgs/rain-medium-label.svg b/apps/picsa-tools/option-tool/src/assets/svgs/rain-medium-label.svg
new file mode 100644
index 000000000..5dc8e9fa4
--- /dev/null
+++ b/apps/picsa-tools/option-tool/src/assets/svgs/rain-medium-label.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 13"><g clip-path="url(#a)" transform="translate(-2.242183 -31.766501)"><path fill="#1e90ff" d="M8.6271406 32.082201c.49487.8381.96918 1.5759 1.3766504 2.3497.1727.3306.2233.7115.1429 1.0756-.08041.3642-.2866704.6884-.5825104.9155-.27137.2167-.60937.3328-.9566.3285-.34723-.0042-.68231-.1284-.94834-.3516-.28948-.2345-.48753-.5631-.55964-.9286-.07211-.3655-.01371-.7446.16502-1.0715.40747-.7584.87021-1.4872 1.36252-2.3176zm9.2329504.0118c.4756.7918.9178 1.4949 1.324 2.2185.1995.3337.2731.7277.2073 1.1108s-.2665.7301-.5659.978c-.2725.2287-.6173.3531-.973.3512-.3557-.0018-.6992-.13-.9693-.3615-.2973-.2503-.4953-.5988-.558-.9824-.0627-.3836.014-.7769.2161-1.1089.4075-.7198.8484-1.4216 1.3188-2.2057zm-4.61593 7.688c.49363.8355.96793 1.5746 1.37663 2.3484.173.3302.224.7109.1441 1.0751-.08.3641-.2857.6885-.5811.9159-.2714.217-.6096.3333-.95703.3293-.34745-.0039-.68283-.128-.94921-.3511-.29106-.2342-.49028-.5634-.56268-.9299-.07241-.3665-.01335-.7468.16678-1.074.40747-.7584.87021-1.4872 1.36251-2.3137z"/></g><defs><clipPath id="a"><path fill="#fff" d="M.699219.12207h46.173698v46.178902H.699219Z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/apps/picsa-tools/option-tool/src/assets/svgs/rain-medium.svg b/apps/picsa-tools/option-tool/src/assets/svgs/rain-medium.svg
new file mode 100644
index 000000000..4434d0851
--- /dev/null
+++ b/apps/picsa-tools/option-tool/src/assets/svgs/rain-medium.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 44 44"><g clip-path="url(#a)" transform="translate(-2.242183 -.76650123)"><path fill="#4682b4" d="M17.325955 25.832603c-2.8279 0-5.6416.0102-8.4630301 0-3.54125-.0167-6.27655-2.8626-6.16987-6.4026.08741-3.0849 2.66076-5.7225 5.7624-5.8973 3.1801001-.1787 6.0156001 2.0926 6.4591001 5.1724.1414.9782.1414.9473 1.1324.9884.4627.0193.5142-.1465.4859-.5398-.1311-1.8243-.9056-3.5427-2.1855-4.8492-1.2799-1.3065-2.982-2.1161-4.8031801-2.2847-.32134-.0334-.42546-.1568-.49358-.437-1.14786-4.8099703 2.2506601-9.7034503 7.1595601-10.2895803 5.2868-.63112998 9.769 3.48468 9.5466 8.7817803-.0442 1.2206-.3688 2.4147-.9486 3.4898-.1504.2777-.1285.4306.1671.5373.0453.0203.0884.0453.1285.0746.8355.4884.851.4961 1.3034-.3715.1427-.2738.3317-.216.5142-.1748 2.3432.5283 3.9847 1.9023 4.7019 4.2006 1.2636 4.0336-1.7005 7.9939-5.932 8.0003-2.7876.0034-5.576.0038-8.3653.0013z"/><path fill="#e9e9e9" d="M38.096055 12.752503c2.4036 0 4.806 0 7.2097-.0077.3522 0 .473.0591.4872.4538.0179.4923-.1376.7635-.5605 1.0193-1.7661 1.0656-3.5027 2.1851-5.2585 3.2623-.2571.1581-.3753.3188-.365.6427.0269.9113-.0001 1.8265.0179 2.7391.0078.306-.0848.3857-.3753.3625-.2905-.0231-.5771.0129-.8638-.0103-.2648-.0218-.3085.0862-.3136.3252-.027 1.2083-.0334 1.216 1.144 1.2122.2892 0 .4216.0372.41.3792-.0295.784-.0282 1.5707 0 2.3548.0116.3188-.1067.3933-.3856.3509-.0478-.0052-.0961-.0052-.1439 0-.3304.0283-.8625-.1427-.95.0655-.1593.3857-.0604.8728-.0706 1.3189 0 .1285.0758.1568.1838.1542h.2403c1.1132 0 1.1132 0 1.1132 1.1003 0 .5604-.009 1.1209 0 1.6813 0 .2236-.0502.3059-.2892.3008-.8163-.0142-1.635-.0322-2.45.0064-.4023.018-.3445-.2018-.3445-.4409v-9.661c0-.7519-.0154-1.5052.0077-2.2584.0156-.1231-.0083-.248-.0684-.3566-.0601-.1087-.1532-.1953-.2658-.2475-1.0514-.6093-2.0656-1.2854-3.1363-1.8549-.9782-.5141-1.7481-1.2725-2.5515-2.0013-.2571-.2301-.1478-.5142-.1221-.7622.0257-.2481.2866-.1183.4344-.1196 2.4281-.0115 4.8473-.009 7.2664-.009z"/><path fill="#1e90ff" d="M38.079055 3.4665027c.4936.83422.9666 1.57203 1.3754 2.34455.1736.3299.2255.71041.1465 1.07475-.079.36433-.2838.68921-.5784.9176-.2706.21751-.6081.3348-.9553.33199-.3471-.00281-.6826-.12555-.9497-.34741-.2906-.23319-.4902-.56099-.564-.92625-.0738-.36527-.017-.74483.1604-1.07253.4075-.75838.8715-1.48848 1.3651-2.3227zM11.763305 31.935203c.49487.8381.96918 1.5759 1.37665 2.3497.1727.3306.2233.7115.1429 1.0756-.08041.3642-.28667.6884-.58251.9155-.27137.2167-.60937.3328-.9566.3285-.34723-.0042-.68231-.1284-.94834-.3516-.28948-.2345-.48753-.5631-.55964-.9286-.07211-.3655-.01371-.7446.16502-1.0715.40747-.7584.87021-1.4872 1.36252-2.3176zM20.996255 31.947003c.4756.7918.9178 1.4949 1.324 2.2185.1995.3337.2731.7277.2073 1.1108s-.2665.7301-.5659.978c-.2725.2287-.6173.3531-.973.3512-.3557-.0018-.6992-.13-.9693-.3615-.2973-.2503-.4953-.5988-.558-.9824-.0627-.3836.014-.7769.2161-1.1089.4075-.7198.8484-1.4216 1.3188-2.2057zM16.380325 39.635003c.49363.8355.96793 1.5746 1.37663 2.3484.173.3302.224.7109.1441 1.0751-.08.3641-.2857.6885-.5811.9159-.2714.217-.6096.3333-.95703.3293-.34745-.0039-.68283-.128-.94921-.3511-.29106-.2342-.49028-.5634-.56268-.9299-.07241-.3665-.01335-.7468.16678-1.074.40747-.7584.87021-1.4872 1.36251-2.3137z"/><path fill="#00ced1" d="M39.606355 30.229505h-3.0862v13.205098h3.0862z"/></g><defs><clipPath id="a"><path fill="#fff" d="M.699219.12207h46.173698v46.178902H.699219z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/apps/picsa-tools/option-tool/src/assets/svgs/risks.svg b/apps/picsa-tools/option-tool/src/assets/svgs/risks.svg
new file mode 100644
index 000000000..cd2f19118
--- /dev/null
+++ b/apps/picsa-tools/option-tool/src/assets/svgs/risks.svg
@@ -0,0 +1,3 @@
+<svg width="681" height="800" viewBox="0 0 681 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M662.397 339.078C669.191 325.158 673.156 309.725 673.164 293.525C673.164 266.3 662.544 241.369 645.298 222.682C647.386 214.658 648.547 205.852 648.547 196.291C648.553 161.286 631.416 130.28 604.787 111.297C603.5 60.9628 566.855 18.7409 516.82 10.6393L516.583 10.5878L515.891 10.5128L480.617 5.38464L479.334 5.24401L472.053 4.4362H472.086C450.548 1.9862 432.558 -0.0263025 397.898 0.000259963C379.755 0.000259963 357.786 0.51276 328.722 1.56432C293.544 2.87057 253.098 6.81901 215.267 13.4456C177.397 20.0971 142.316 29.2503 117.033 41.8362C56.1609 72.1893 16.0031 131.817 3.85312 207.453C1.26406 223.45 0 239.563 0 255.533C0.071875 326.902 24.9313 395.975 69.9531 441.133C90.0391 461.205 108.931 477.56 126.941 493.146H126.928C149.744 512.911 170.77 531.202 189.112 552.774C223.322 592.996 249.336 628.461 267.017 655.725C275.861 669.338 282.617 680.911 287.217 689.846C289.519 694.319 291.281 698.125 292.48 701.099C293.684 704.046 294.294 706.264 294.37 706.892L296.292 718.505L294.377 706.892C298.817 733.708 310.828 756.855 328.061 773.467C345.255 790.066 367.886 800.011 392.444 800C413.53 800.013 433.352 792.669 449.541 779.722C465.756 766.791 478.439 748.397 486.2 726.235V726.247C494.302 703.163 497.364 680.975 497.358 660.544C497.352 617.989 484.192 582.944 476.311 561.719L476.483 562.18L474.317 556.283L474.112 555.746L474.323 556.322C468.991 541.852 460.314 529.88 451.898 518.036L451.905 518.063C448.995 513.961 444.644 507.835 441.087 502.117C440.567 501.285 440.119 500.502 439.652 499.708C443.747 498.964 449.38 498.247 457.109 497.889H575.852C633.794 497.863 680.853 450.797 680.88 392.836C680.88 372.507 673.58 354.049 662.397 339.078ZM575.852 448.527H455.93C433.416 449.489 409.127 453.333 396.764 466.613C363.464 502.322 418.092 546.247 427.987 573.306C437.825 600.313 459.987 651.928 439.652 709.891C429.891 737.68 411.03 750.652 392.452 750.652C370.334 750.652 348.616 732.297 343.066 698.842C337.431 664.722 282.65 586.599 226.706 520.792C190.497 478.186 149.378 450.769 104.856 406.242C25.9969 327.388 26.0719 142.507 139.092 85.9815C179.467 65.7799 264.372 53.3471 330.548 50.9128C359.747 49.8096 381.12 49.3487 397.898 49.3487C433.655 49.3487 448.534 51.4768 473.895 54.2706L508.887 59.3471C535.356 63.6534 555.569 86.4175 555.569 114.078C555.569 119.128 554.806 123.974 553.48 128.588H543.58C536.637 128.588 531.044 134.175 531.044 141.097C531.044 148.017 536.637 153.633 543.58 153.633H578.77C591.159 163.758 599.195 179.013 599.195 196.289C599.195 207.121 597.014 217.157 589.427 225.667H566.592C559.67 225.667 554.077 231.283 554.077 238.203C554.077 245.125 559.67 250.713 566.592 250.713H603.173C615.689 260.864 623.809 276.169 623.809 293.525C623.809 309.803 616.748 324.313 605.591 334.413H578.289C571.373 334.413 565.759 340.053 565.759 346.974C565.759 353.883 571.373 359.485 578.289 359.485H614.248C624.105 367.866 631.539 379.685 631.539 392.836C631.539 423.597 606.639 448.527 575.852 448.527Z" fill="black"/>
+</svg>
diff --git a/apps/picsa-tools/resources-tool/src/assets/resources/contents.json b/apps/picsa-tools/resources-tool/src/assets/resources/contents.json
index d0716918d..f1162198c 100644
--- a/apps/picsa-tools/resources-tool/src/assets/resources/contents.json
+++ b/apps/picsa-tools/resources-tool/src/assets/resources/contents.json
@@ -44,8 +44,8 @@
   "covers/facebook.svg": {
     "relativePath": "covers/facebook.svg",
     "size_kb": 1.1,
-    "md5Checksum": "8626bc9119bd6b8bc0fa04e8a20b6e74",
-    "modifiedTime": "2022-09-28T20:19:52.986Z"
+    "md5Checksum": "a09b2f44f6b44b5b6e29aedba9f92029",
+    "modifiedTime": "2023-06-18T17:09:19.897Z"
   },
   "covers/gap.jpg": {
     "relativePath": "covers/gap.jpg",
@@ -61,9 +61,9 @@
   },
   "covers/gender-equality.svg": {
     "relativePath": "covers/gender-equality.svg",
-    "size_kb": 5.5,
-    "md5Checksum": "0b6599c4d8b3a87b787910b18a9d8851",
-    "modifiedTime": "2022-11-01T20:27:18.286Z"
+    "size_kb": 5.4,
+    "md5Checksum": "95af38f37c2179d4ad0c5288cbb236ed",
+    "modifiedTime": "2023-06-18T17:09:19.897Z"
   },
   "covers/gras-nelk.jpg": {
     "relativePath": "covers/gras-nelk.jpg",
@@ -110,8 +110,8 @@
   "covers/spreadsheet.svg": {
     "relativePath": "covers/spreadsheet.svg",
     "size_kb": 2.8,
-    "md5Checksum": "a03a4bfb0a1791fda8e232a8b032715b",
-    "modifiedTime": "2022-09-30T09:35:53.529Z"
+    "md5Checksum": "0a1bc91188bbc03fda0a7cb2bc1aa6ce",
+    "modifiedTime": "2023-06-18T17:09:19.898Z"
   },
   "covers/twitter.png": {
     "relativePath": "covers/twitter.png",
@@ -122,8 +122,8 @@
   "covers/weather.svg": {
     "relativePath": "covers/weather.svg",
     "size_kb": 3.1,
-    "md5Checksum": "db07c7d20d9520124c251c810c5817fd",
-    "modifiedTime": "2022-09-28T19:22:58.064Z"
+    "md5Checksum": "ca87f24916d258b8b8b5dd8343d4305b",
+    "modifiedTime": "2023-06-18T17:09:19.898Z"
   },
   "covers/whatsapp.svg": {
     "relativePath": "covers/whatsapp.svg",
diff --git a/libs/environments/src/version.ts b/libs/environments/src/version.ts
index 025ef31a7..334f82b2f 100644
--- a/libs/environments/src/version.ts
+++ b/libs/environments/src/version.ts
@@ -4,5 +4,5 @@ import packageJson from '../../../package.json';
 
 export const APP_VERSION = {
   number: packageJson.version,
-  date: '2023-07-23',
+  date: '2023-09-15',
 };
diff --git a/libs/i18n/assets/debug.json b/libs/i18n/assets/debug.json
index 554e0015b..714e3894a 100644
--- a/libs/i18n/assets/debug.json
+++ b/libs/i18n/assets/debug.json
@@ -1,18 +1,18 @@
 {
-  "*This field is required": "•*This field is required•",
   "Above": "•Above•",
   "Activities": "•Activities•",
   "Activity Flow Chart": "•Activity Flow Chart•",
-  "Add benefit": "•Add benefit•",
+  "Add": "•Add•",
   "Add Card": "•Add Card•",
   "add custom": "•add custom•",
   "Add Female Member": "•Add Female Member•",
   "Add Male Member": "•Add Male Member•",
-  "Add New Option": "•Add New Option•",
+  "Add Option": "•Add Option•",
   "afforestation": "•afforestation•",
   "After the season": "•After the season•",
   "All": "•All•",
   "Analyse": "•Analyse•",
+  "and": "•and•",
   "apply fertiliser": "•apply fertiliser•",
   "apply pesticide": "•apply pesticide•",
   "Apr": "•Apr•",
@@ -21,15 +21,17 @@
   "Aug": "•Aug•",
   "August": "•August•",
   "Back": "•Back•",
+  "Bad": "•Bad•",
   "bagging": "•bagging•",
   "bags": "•bags•",
   "Balance": "•Balance•",
   "banding": "•banding•",
   "Beans": "•Beans•",
   "Below": "•Below•",
+  "benefit": "•benefit•",
   "Benefits": "•Benefits•",
   "Benefits and who": "•Benefits and who•",
-  "Benefits and who ": "•Benefits and who •",
+  "Both": "•Both•",
   "Budget": "•Budget•",
   "Budget Tool": "•Budget Tool•",
   "build housing": "•build housing•",
@@ -83,7 +85,6 @@
   "End": "•End•",
   "End of Season": "•End of Season•",
   "End of season is defined as the last day in the season (1st October - 30th April) with more than 10mm of rainfall.": "•End of season is defined as the last day in the season (1st October - 30th April) with more than 10mm of rainfall.•",
-  "Enter the practice for this option": "•Enter the practice for this option•",
   "Enterprise": "•Enterprise•",
   "Extension": "•Extension•",
   "Extreme": "•Extreme•",
@@ -110,12 +111,13 @@
   "Friday": "•Friday•",
   "fruits": "•fruits•",
   "goats": "•goats•",
+  "Good": "•Good•",
   "Groundnuts": "•Groundnuts•",
   "groundnuts": "•groundnuts•",
   "guinea fowl": "•guinea fowl•",
   "harvesting": "•harvesting•",
   "Hide Options": "•Hide Options•",
-  "High RF": "•High RF•",
+  "High": "•High•",
   "Historic climate": "•Historic climate•",
   "housing": "•housing•",
   "How long is your budget for?": "•How long is your budget for?•",
@@ -150,7 +152,7 @@
   "Livestock Info": "•Livestock Info•",
   "Long before the season": "•Long before the season•",
   "Longitude:34.26, Latitude: -12.91 Altitude: 500.": "•Longitude:34.26, Latitude: -12.91 Altitude: 500.•",
-  "Low RF": "•Low RF•",
+  "Low": "•Low•",
   "Maize": "•Maize•",
   "maize": "•maize•",
   "Male": "•Male•",
@@ -165,15 +167,19 @@
   "marketing and selling": "•marketing and selling•",
   "May": "•May•",
   "meat": "•meat•",
-  "Mid RF": "•Mid RF•",
+  "Medium": "•Medium•",
+  "Mid": "•Mid•",
   "milk": "•milk•",
   "mixed": "•mixed•",
   "Monday": "•Monday•",
   "Money": "•Money•",
   "money": "•money•",
   "Monitoring": "•Monitoring•",
+  "Months": "•Months•",
   "mulching": "•mulching•",
   "Name": "•Name•",
+  "Name of practice": "•Name of practice•",
+  "Neutral": "•Neutral•",
   "New Budget": "•New Budget•",
   "New Profile": "•New Profile•",
   "Next": "•Next•",
@@ -183,6 +189,7 @@
   "Oct": "•Oct•",
   "October": "•October•",
   "onions": "•onions•",
+  "Only": "•Only•",
   "Options": "•Options•",
   "Options by context": "•Options by context•",
   "out of": "•out of•",
@@ -190,7 +197,7 @@
   "ox cart": "•ox cart•",
   "paw-paw": "•paw-paw•",
   "Performance": "•Performance•",
-  "Performance in high, mid and low RF (rainfall)": "•Performance in high, mid and low RF (rainfall)•",
+  "Performance in high, mid and low rainfall": "•Performance in high, mid and low rainfall•",
   "PICSA": "•PICSA•",
   "Pigeon Peas": "•Pigeon Peas•",
   "pigeon peas": "•pigeon peas•",
@@ -223,9 +230,10 @@
   "Revisit": "•Revisit•",
   "Rice": "•Rice•",
   "rice": "•rice•",
+  "risk": "•risk•",
   "Risk": "•Risk•",
-  "Risk of practice (disadvantage)": "•Risk of practice (disadvantage)•",
   "Risks": "•Risks•",
+  "Risks or disadvantages": "•Risks or disadvantages•",
   "Saturday": "•Saturday•",
   "Save": "•Save•",
   "Save your budget": "•Save your budget•",
@@ -288,12 +296,12 @@
   "supplements": "•supplements•",
   "Sweet Potatoes": "•Sweet Potatoes•",
   "sweet potatoes": "•sweet potatoes•",
+  "Take App Tour": "•Take App Tour•",
   "Terciles": "•Terciles•",
   "The farmer decides": "•The farmer decides•",
   "threshing": "•threshing•",
   "Thursday": "•Thursday•",
   "Time": "•Time•",
-  "Time (months)": "•Time (months)•",
   "Time to start benefiting": "•Time to start benefiting•",
   "title": "•title•",
   "Title": "•Title•",
@@ -317,6 +325,7 @@
   "watermelon": "•watermelon•",
   "Wednesday": "•Wednesday•",
   "weeding": "•weeding•",
+  "Weeks": "•Weeks•",
   "What are the opportunities and risks?": "•What are the opportunities and risks?•",
   "What are the options for the farmer?": "•What are the options for the farmer?•",
   "What are the probabilities and risks?": "•What are the probabilities and risks?•",
diff --git a/libs/i18n/assets/en.json b/libs/i18n/assets/en.json
index ddea8afe6..2bee87184 100644
--- a/libs/i18n/assets/en.json
+++ b/libs/i18n/assets/en.json
@@ -115,7 +115,6 @@
   "Consumed": "Consumed",
   "Cost": "Cost",
   "Create New Budget": "Create New Budget",
-  "Days": "Days",
   "Decrease Scale": "Decrease Scale",
   "Description (optional)": "Description (optional)",
   "Edit Budget": "Edit Budget",
@@ -246,6 +245,7 @@
   "Resources": "Resources",
   "Settings": "Settings",
   "Something went wrong...": "Something went wrong...",
+  "Take App Tour": "Take App Tour",
   "Activity Flow Chart": "Activity Flow Chart",
   "After the season": "After the season",
   "Compare different options and plans": "Compare different options and plans",
@@ -297,35 +297,44 @@
   "Forms": "Forms",
   "Submissions": "Submissions",
   "Submit": "Submit",
-  "*This field is required": "*This field is required",
   "Activities": "Activities",
-  "Add New Option": "Add New Option",
-  "Add benefit": "Add benefit",
+  "Add": "Add",
+  "Add Option": "Add Option",
+  "Bad": "Bad",
   "Benefits": "Benefits",
   "Benefits and who": "Benefits and who",
-  "Benefits and who ": "Benefits and who ",
+  "Both": "Both",
+  "Days": "Days",
   "Decisions": "Decisions",
-  "Enter the practice for this option": "Enter the practice for this option",
   "Female": "Female",
   "Finish": "Finish",
-  "High RF": "High RF",
+  "Good": "Good",
+  "High": "High",
   "Investment": "Investment",
   "Investment in terms of money and time": "Investment in terms of money and time",
-  "Low RF": "Low RF",
+  "Low": "Low",
   "Male": "Male",
-  "Mid RF": "Mid RF",
+  "Medium": "Medium",
+  "Mid": "Mid",
   "Money": "Money",
+  "Months": "Months",
+  "Name of practice": "Name of practice",
+  "Neutral": "Neutral",
+  "Only": "Only",
   "Performance": "Performance",
-  "Performance in high, mid and low RF (rainfall)": "Performance in high, mid and low RF (rainfall)",
+  "Performance in high, mid and low rainfall": "Performance in high, mid and low rainfall",
   "Practice": "Practice",
   "Risk": "Risk",
-  "Risk of practice (disadvantage)": "Risk of practice (disadvantage)",
   "Risks": "Risks",
+  "Risks or disadvantages": "Risks or disadvantages",
   "Time": "Time",
-  "Time (months)": "Time (months)",
   "Time to start benefiting": "Time to start benefiting",
+  "Weeks": "Weeks",
   "Who does activity": "Who does activity",
   "Who does the activity": "Who does the activity",
   "Who makes decisions": "Who makes decisions",
+  "and": "and",
+  "benefit": "benefit",
+  "risk": "risk",
   "Collection not found": "Collection not found"
 }
\ No newline at end of file
diff --git a/libs/i18n/assets/mw_ny.json b/libs/i18n/assets/mw_ny.json
index 96d7a4dcc..9e8f55821 100644
--- a/libs/i18n/assets/mw_ny.json
+++ b/libs/i18n/assets/mw_ny.json
@@ -1,18 +1,18 @@
 {
-  "*This field is required": "•*This field is required•",
   "Above": "•Above•",
   "Activities": "Zochitika",
   "Activity Flow Chart": "•Activity Flow Chart•",
-  "Add benefit": "Onjezerani phindu/ubwino",
+  "Add": "•Add•",
   "Add Card": "•Add Card•",
   "add custom": "onjezani zipangizo",
   "Add Female Member": "Onjezerani membala wa mkazi",
   "Add Male Member": "Onjezerani membala wa mamuna",
-  "Add New Option": "Onjezerani Chisankho china",
+  "Add Option": "•Add Option•",
   "afforestation": "kudzala mitengo",
   "After the season": "Pakutha pa nyengo",
   "All": "•All•",
   "Analyse": "Kuzukuta",
+  "and": "•and•",
   "apply fertiliser": "kuthira feteleza",
   "apply pesticide": "kopopela mankhwala a tizilombo",
   "Apr": "•Apr•",
@@ -21,15 +21,17 @@
   "Aug": "•Aug•",
   "August": "•August•",
   "Back": "Kumbuyo",
+  "Bad": "•Bad•",
   "bagging": "kupakila mmatumba",
   "bags": "matumba",
   "Balance": "Ndalama zotsala",
   "banding": "kubandila",
   "Beans": "Nyemba",
   "Below": "•Below•",
+  "benefit": "•benefit•",
   "Benefits": "•Benefits•",
   "Benefits and who": "•Benefits and who•",
-  "Benefits and who ": "•Benefits and who •",
+  "Both": "•Both•",
   "Budget": "Bajeti",
   "Budget Tool": "•Budget Tool•",
   "build housing": "kumanga makola",
@@ -83,7 +85,6 @@
   "End": "Pothera",
   "End of Season": "Mapeto a nyengo",
   "End of season is defined as the last day in the season (1st October - 30th April) with more than 10mm of rainfall.": "Mapeto a nyengo akutanthauza tsiku lomaliza mu nyengo (1 okotobala mpaka 30 epulo) lomwe kwagwa mvula yoposa 10mm",
-  "Enter the practice for this option": "•Enter the practice for this option•",
   "Enterprise": "bizinesi",
   "Extension": "Ulangizi",
   "Extreme": "•Extreme•",
@@ -110,12 +111,13 @@
   "Friday": "Lachisanu",
   "fruits": "zipatso",
   "goats": "mbuzi",
+  "Good": "•Good•",
   "Groundnuts": "•Groundnuts•",
   "groundnuts": "mtedza",
   "guinea fowl": "nkhanga",
   "harvesting": "kukolola",
   "Hide Options": "Bisani Zipangizo",
-  "High RF": "•High RF•",
+  "High": "•High•",
   "Historic climate": "mbiri ya za nyengo",
   "housing": "khola",
   "How long is your budget for?": "bajeti yanu imakhala yayitali bwanji?",
@@ -150,7 +152,7 @@
   "Livestock Info": "Mauthenga a ziweto",
   "Long before the season": "Kutali ndi kuyamba kwa nyengo",
   "Longitude:34.26, Latitude: -12.91 Altitude: 500.": "Longitude:34.26, Latitude: -12.91 Altitude: 500.",
-  "Low RF": "•Low RF•",
+  "Low": "•Low•",
   "Maize": "•Maize•",
   "maize": "chimanga",
   "Male": "•Male•",
@@ -165,15 +167,19 @@
   "marketing and selling": "kutsatsa ndi kugulitsa",
   "May": "•May•",
   "meat": "nyama",
-  "Mid RF": "•Mid RF•",
+  "Medium": "•Medium•",
+  "Mid": "•Mid•",
   "milk": "mkaka",
   "mixed": "kusakaniza",
   "Monday": "Lolemba",
   "Money": "ndalama",
   "money": "ndalama",
   "Monitoring": "Kuwunikira",
+  "Months": "•Months•",
   "mulching": "kuphimbila",
   "Name": "Dzina",
+  "Name of practice": "•Name of practice•",
+  "Neutral": "•Neutral•",
   "New Budget": "•New Budget•",
   "New Profile": "Mbiri yatsopano",
   "Next": "pitani tsamba lina",
@@ -183,6 +189,7 @@
   "Oct": "•Oct•",
   "October": "•October•",
   "onions": "anyezi",
+  "Only": "•Only•",
   "Options": "Zisankho",
   "Options by context": "Zisankho potengera nkhani",
   "out of": "kuchokera pa",
@@ -190,7 +197,7 @@
   "ox cart": "ngolo",
   "paw-paw": "papaya",
   "Performance": "•Performance•",
-  "Performance in high, mid and low RF (rainfall)": "•Performance in high, mid and low RF (rainfall)•",
+  "Performance in high, mid and low rainfall": "•Performance in high, mid and low rainfall•",
   "PICSA": "PICSA",
   "Pigeon Peas": "•Pigeon Peas•",
   "pigeon peas": "nandolo",
@@ -223,9 +230,10 @@
   "Revisit": "Kubwereza",
   "Rice": "•Rice•",
   "rice": "mpunga",
+  "risk": "•risk•",
   "Risk": "•Risk•",
-  "Risk of practice (disadvantage)": "•Risk of practice (disadvantage)•",
   "Risks": "•Risks•",
+  "Risks or disadvantages": "•Risks or disadvantages•",
   "Saturday": "Loweruka",
   "Save": "sungani",
   "Save your budget": "sungani bajeti yanu",
@@ -288,12 +296,12 @@
   "supplements": "zakudya za ziweto zoowonjezera",
   "Sweet Potatoes": "•Sweet Potatoes•",
   "sweet potatoes": "mbatata ya kholowa",
+  "Take App Tour": "•Take App Tour•",
   "Terciles": "Magawo a zotsatira za kafukufuku",
   "The farmer decides": "Mulimi amapanga chiganizo",
   "threshing": "kupuntha",
   "Thursday": "lachinayi",
   "Time": "•Time•",
-  "Time (months)": "•Time (months)•",
   "Time to start benefiting": "•Time to start benefiting•",
   "title": "•title•",
   "Title": "mutu",
@@ -317,6 +325,7 @@
   "watermelon": "mavwende",
   "Wednesday": "Lachitatu",
   "weeding": "kupalira",
+  "Weeks": "•Weeks•",
   "What are the opportunities and risks?": "•What are the opportunities and risks?•",
   "What are the options for the farmer?": "Zisankho zomwe mulimi alinazo ndi ziti?",
   "What are the probabilities and risks?": "Kodi kuthera koti zikhoza kuchitika komanso ziopzezo zake ndi ziti?",
diff --git a/libs/i18n/assets/sw.json b/libs/i18n/assets/sw.json
index f4b556eff..d22f74767 100644
--- a/libs/i18n/assets/sw.json
+++ b/libs/i18n/assets/sw.json
@@ -1,18 +1,18 @@
 {
-  "*This field is required": "•*This field is required•",
   "Above": "•Above•",
   "Activities": "Shughuli",
   "Activity Flow Chart": "•Activity Flow Chart•",
-  "Add benefit": "•Add benefit•",
+  "Add": "•Add•",
   "Add Card": "•Add Card•",
   "add custom": "•add custom•",
   "Add Female Member": "•Add Female Member•",
   "Add Male Member": "•Add Male Member•",
-  "Add New Option": "•Add New Option•",
+  "Add Option": "•Add Option•",
   "afforestation": "•afforestation•",
   "After the season": "•After the season•",
   "All": "•All•",
   "Analyse": "•Analyse•",
+  "and": "•and•",
   "apply fertiliser": "•apply fertiliser•",
   "apply pesticide": "•apply pesticide•",
   "Apr": "•Apr•",
@@ -21,15 +21,17 @@
   "Aug": "•Aug•",
   "August": "Agosti",
   "Back": "•Back•",
+  "Bad": "•Bad•",
   "bagging": "•bagging•",
   "bags": "•bags•",
   "Balance": "•Balance•",
   "banding": "•banding•",
   "Beans": "•Beans•",
   "Below": "•Below•",
+  "benefit": "•benefit•",
   "Benefits": "•Benefits•",
   "Benefits and who": "•Benefits and who•",
-  "Benefits and who ": "•Benefits and who •",
+  "Both": "•Both•",
   "Budget": "•Budget•",
   "Budget Tool": "Chombo cha Bajeti",
   "build housing": "•build housing•",
@@ -83,7 +85,6 @@
   "End": "•End•",
   "End of Season": "Mwisho wa Msimu",
   "End of season is defined as the last day in the season (1st October - 30th April) with more than 10mm of rainfall.": "Mwisho wa msimu hufafanuliwa kama siku ya mwisho msimu (1 Oktoba - 30 Aprili) na zaidi ya 10mm ya mvua.",
-  "Enter the practice for this option": "•Enter the practice for this option•",
   "Enterprise": "•Enterprise•",
   "Extension": "•Extension•",
   "Extreme": "•Extreme•",
@@ -110,12 +111,13 @@
   "Friday": "•Friday•",
   "fruits": "•fruits•",
   "goats": "•goats•",
+  "Good": "•Good•",
   "Groundnuts": "•Groundnuts•",
   "groundnuts": "•groundnuts•",
   "guinea fowl": "•guinea fowl•",
   "harvesting": "•harvesting•",
   "Hide Options": "•Hide Options•",
-  "High RF": "•High RF•",
+  "High": "•High•",
   "Historic climate": "•Historic climate•",
   "housing": "•housing•",
   "How long is your budget for?": "•How long is your budget for?•",
@@ -150,7 +152,7 @@
   "Livestock Info": "•Livestock Info•",
   "Long before the season": "•Long before the season•",
   "Longitude:34.26, Latitude: -12.91 Altitude: 500.": "•Longitude:34.26, Latitude: -12.91 Altitude: 500.•",
-  "Low RF": "•Low RF•",
+  "Low": "•Low•",
   "Maize": "•Maize•",
   "maize": "•maize•",
   "Male": "•Male•",
@@ -165,15 +167,19 @@
   "marketing and selling": "•marketing and selling•",
   "May": "Mei",
   "meat": "•meat•",
-  "Mid RF": "•Mid RF•",
+  "Medium": "•Medium•",
+  "Mid": "•Mid•",
   "milk": "•milk•",
   "mixed": "•mixed•",
   "Monday": "•Monday•",
   "Money": "•Money•",
   "money": "•money•",
   "Monitoring": "•Monitoring•",
+  "Months": "Miezi",
   "mulching": "•mulching•",
   "Name": "•Name•",
+  "Name of practice": "•Name of practice•",
+  "Neutral": "•Neutral•",
   "New Budget": "•New Budget•",
   "New Profile": "•New Profile•",
   "Next": "•Next•",
@@ -183,6 +189,7 @@
   "Oct": "•Oct•",
   "October": "Oktoba",
   "onions": "•onions•",
+  "Only": "•Only•",
   "Options": "•Options•",
   "Options by context": "•Options by context•",
   "out of": "•out of•",
@@ -190,7 +197,7 @@
   "ox cart": "•ox cart•",
   "paw-paw": "•paw-paw•",
   "Performance": "•Performance•",
-  "Performance in high, mid and low RF (rainfall)": "•Performance in high, mid and low RF (rainfall)•",
+  "Performance in high, mid and low rainfall": "•Performance in high, mid and low rainfall•",
   "PICSA": "•PICSA•",
   "Pigeon Peas": "•Pigeon Peas•",
   "pigeon peas": "•pigeon peas•",
@@ -223,9 +230,10 @@
   "Revisit": "•Revisit•",
   "Rice": "•Rice•",
   "rice": "•rice•",
+  "risk": "•risk•",
   "Risk": "•Risk•",
-  "Risk of practice (disadvantage)": "•Risk of practice (disadvantage)•",
   "Risks": "•Risks•",
+  "Risks or disadvantages": "•Risks or disadvantages•",
   "Saturday": "•Saturday•",
   "Save": "Hifadhi",
   "Save your budget": "•Save your budget•",
@@ -288,12 +296,12 @@
   "supplements": "•supplements•",
   "Sweet Potatoes": "•Sweet Potatoes•",
   "sweet potatoes": "•sweet potatoes•",
+  "Take App Tour": "•Take App Tour•",
   "Terciles": "•Terciles•",
   "The farmer decides": "•The farmer decides•",
   "threshing": "•threshing•",
   "Thursday": "•Thursday•",
   "Time": "•Time•",
-  "Time (months)": "•Time (months)•",
   "Time to start benefiting": "•Time to start benefiting•",
   "title": "•title•",
   "Title": "•Title•",
@@ -317,6 +325,7 @@
   "watermelon": "•watermelon•",
   "Wednesday": "•Wednesday•",
   "weeding": "•weeding•",
+  "Weeks": "Wiki",
   "What are the opportunities and risks?": "•What are the opportunities and risks?•",
   "What are the options for the farmer?": "•What are the options for the farmer?•",
   "What are the probabilities and risks?": "•What are the probabilities and risks?•",
diff --git a/libs/i18n/assets/tg.json b/libs/i18n/assets/tg.json
index d2198a5d3..39f05517d 100644
--- a/libs/i18n/assets/tg.json
+++ b/libs/i18n/assets/tg.json
@@ -1,18 +1,18 @@
 {
-  "*This field is required": "•*This field is required•",
   "Above": "•Above•",
   "Activities": "Фаъолият",
   "Activity Flow Chart": "•Activity Flow Chart•",
-  "Add benefit": "•Add benefit•",
+  "Add": "•Add•",
   "Add Card": "•Add Card•",
   "add custom": "одат кунед",
   "Add Female Member": "•Add Female Member•",
   "Add Male Member": "•Add Male Member•",
-  "Add New Option": "•Add New Option•",
+  "Add Option": "•Add Option•",
   "afforestation": "орадодӣ",
   "After the season": "•After the season•",
   "All": "Ҳама",
   "Analyse": "•Analyse•",
+  "and": "•and•",
   "apply fertiliser": "Ба кор нуриҳо муроҷиат кунед",
   "apply pesticide": "пестисидҳоро татбиқ кунед",
   "Apr": "Апралӣ",
@@ -21,15 +21,17 @@
   "Aug": "Август",
   "August": "Август",
   "Back": "•Back•",
+  "Bad": "•Bad•",
   "bagging": "халта",
   "bags": "халта",
   "Balance": "Мувозинат",
   "banding": "банд",
   "Beans": "•Beans•",
   "Below": "•Below•",
+  "benefit": "•benefit•",
   "Benefits": "•Benefits•",
   "Benefits and who": "•Benefits and who•",
-  "Benefits and who ": "•Benefits and who •",
+  "Both": "•Both•",
   "Budget": "•Budget•",
   "Budget Tool": "Воситаи буҷет",
   "build housing": "сохтани манзил",
@@ -83,7 +85,6 @@
   "End": "•End•",
   "End of Season": "Охири мавсим",
   "End of season is defined as the last day in the season (1st October - 30th April) with more than 10mm of rainfall.": "Анҷоми мавсим ҳамчун рӯзи охир дар мавсими (1 октябр - 30 апрел) бо зиёда аз 10 миллион боришот муайян карда мешавад.",
-  "Enter the practice for this option": "•Enter the practice for this option•",
   "Enterprise": "Корхона",
   "Extension": "•Extension•",
   "Extreme": "•Extreme•",
@@ -110,12 +111,13 @@
   "Friday": "•Friday•",
   "fruits": "меваҳо",
   "goats": "бузҳо",
+  "Good": "•Good•",
   "Groundnuts": "•Groundnuts•",
   "groundnuts": "заминӣ",
   "guinea fowl": "Гвинея парранда",
   "harvesting": "гирдоварӣ",
   "Hide Options": "•Hide Options•",
-  "High RF": "•High RF•",
+  "High": "•High•",
   "Historic climate": "•Historic climate•",
   "housing": "манзил",
   "How long is your budget for?": "Буҷаи шумо чанд вақт аст?",
@@ -150,7 +152,7 @@
   "Livestock Info": "•Livestock Info•",
   "Long before the season": "•Long before the season•",
   "Longitude:34.26, Latitude: -12.91 Altitude: 500.": "•Longitude:34.26, Latitude: -12.91 Altitude: 500.•",
-  "Low RF": "•Low RF•",
+  "Low": "•Low•",
   "Maize": "•Maize•",
   "maize": "ҷуворимакка",
   "Male": "•Male•",
@@ -165,15 +167,19 @@
   "marketing and selling": "Маркетинг ва фурӯш",
   "May": "Май",
   "meat": "гӯшт",
-  "Mid RF": "•Mid RF•",
+  "Medium": "•Medium•",
+  "Mid": "•Mid•",
   "milk": "шир",
   "mixed": "омехта",
   "Monday": "•Monday•",
   "Money": "•Money•",
   "money": "пул",
   "Monitoring": "•Monitoring•",
+  "Months": "Моҳҳо",
   "mulching": "пешкаш",
   "Name": "•Name•",
+  "Name of practice": "•Name of practice•",
+  "Neutral": "•Neutral•",
   "New Budget": "•New Budget•",
   "New Profile": "•New Profile•",
   "Next": "Баъдӣ",
@@ -183,6 +189,7 @@
   "Oct": "Окт окт",
   "October": "Октябр",
   "onions": "•onions•",
+  "Only": "•Only•",
   "Options": "•Options•",
   "Options by context": "•Options by context•",
   "out of": "•out of•",
@@ -190,7 +197,7 @@
   "ox cart": "ароба окс",
   "paw-paw": "По-По",
   "Performance": "•Performance•",
-  "Performance in high, mid and low RF (rainfall)": "•Performance in high, mid and low RF (rainfall)•",
+  "Performance in high, mid and low rainfall": "•Performance in high, mid and low rainfall•",
   "PICSA": "•PICSA•",
   "Pigeon Peas": "•Pigeon Peas•",
   "pigeon peas": "нахуд кабӯтар",
@@ -223,9 +230,10 @@
   "Revisit": "•Revisit•",
   "Rice": "•Rice•",
   "rice": "биринь",
+  "risk": "•risk•",
   "Risk": "•Risk•",
-  "Risk of practice (disadvantage)": "•Risk of practice (disadvantage)•",
   "Risks": "•Risks•",
+  "Risks or disadvantages": "•Risks or disadvantages•",
   "Saturday": "•Saturday•",
   "Save": "Пул захира кардан",
   "Save your budget": "•Save your budget•",
@@ -288,12 +296,12 @@
   "supplements": "лавозимот",
   "Sweet Potatoes": "•Sweet Potatoes•",
   "sweet potatoes": "картошка ширин",
+  "Take App Tour": "•Take App Tour•",
   "Terciles": "•Terciles•",
   "The farmer decides": "•The farmer decides•",
   "threshing": "пешбинӣ",
   "Thursday": "•Thursday•",
   "Time": "•Time•",
-  "Time (months)": "•Time (months)•",
   "Time to start benefiting": "•Time to start benefiting•",
   "title": "•title•",
   "Title": "Ном",
@@ -317,6 +325,7 @@
   "watermelon": "тарбуз",
   "Wednesday": "•Wednesday•",
   "weeding": "хишова",
+  "Weeks": "Ҳониш",
   "What are the opportunities and risks?": "•What are the opportunities and risks?•",
   "What are the options for the farmer?": "•What are the options for the farmer?•",
   "What are the probabilities and risks?": "•What are the probabilities and risks?•",
diff --git a/libs/i18n/assets/zm_ny.json b/libs/i18n/assets/zm_ny.json
index 440899627..f729447d2 100644
--- a/libs/i18n/assets/zm_ny.json
+++ b/libs/i18n/assets/zm_ny.json
@@ -1,18 +1,18 @@
 {
-  "*This field is required": "•*This field is required•",
   "Above": "•Above•",
   "Activities": "Zinchito",
   "Activity Flow Chart": "•Activity Flow Chart•",
-  "Add benefit": "Ikani maphindu",
+  "Add": "•Add•",
   "Add Card": "•Add Card•",
   "add custom": "kuikapo m'sonkho",
   "Add Female Member": "Ikamponi membala wam'kazi",
   "Add Male Member": "Ikamponi membala wam'muna",
-  "Add New Option": "Ikani zosankha zatsopano",
+  "Add Option": "•Add Option•",
   "afforestation": "kubyala mitengo",
   "After the season": "Pambuyo pakutha kwa Nyengo",
   "All": "•All•",
   "Analyse": "Fufuza",
+  "and": "•and•",
   "apply fertiliser": "thirani fatatleza",
   "apply pesticide": "thirani mankhwala",
   "Apr": "•Apr•",
@@ -21,15 +21,17 @@
   "Aug": "•Aug•",
   "August": "•August•",
   "Back": "Bwelerani",
+  "Bad": "•Bad•",
   "bagging": "kuika m'mathumba",
   "bags": "matumba",
   "Balance": "Zokharira",
   "banding": "kumangilira",
   "Beans": "Kaela",
   "Below": "•Below•",
+  "benefit": "•benefit•",
   "Benefits": "•Benefits•",
   "Benefits and who": "•Benefits and who•",
-  "Benefits and who ": "•Benefits and who •",
+  "Both": "•Both•",
   "Budget": "Bajeti",
   "Budget Tool": "•Budget Tool•",
   "build housing": "kumanga nyumba",
@@ -83,7 +85,6 @@
   "End": "Tsirizani",
   "End of Season": "Kutha kwa nyengo",
   "End of season is defined as the last day in the season (1st October - 30th April) with more than 10mm of rainfall.": "Kutha kwa nyengo akutanthauza tsiku lomaliza mu nyengo (1 okotobala mpaka 30 epulo) lomwe kwagwa mvula yoposa 10mm",
-  "Enter the practice for this option": "•Enter the practice for this option•",
   "Enterprise": "malonda",
   "Extension": "Kukuza",
   "Extreme": "•Extreme•",
@@ -110,12 +111,13 @@
   "Friday": "Pa chisanu",
   "fruits": "zipatso",
   "goats": "mbuzi",
+  "Good": "•Good•",
   "Groundnuts": "•Groundnuts•",
   "groundnuts": "nshawa",
   "guinea fowl": "nkhanga",
   "harvesting": "kukolola",
   "Hide Options": "Bimphani zosankha",
-  "High RF": "•High RF•",
+  "High": "•High•",
   "Historic climate": "Mbiri ya za Nyengo",
   "housing": "mosungila",
   "How long is your budget for?": "bajeti yanu imakhala yayitali motani?",
@@ -150,7 +152,7 @@
   "Livestock Info": "Zambiri ya ziweto",
   "Long before the season": "M'malanga",
   "Longitude:34.26, Latitude: -12.91 Altitude: 500.": "Kutalika :34.26, Kutambasuka:12.91, Mtunda wa M'mwamba : 500",
-  "Low RF": "•Low RF•",
+  "Low": "•Low•",
   "Maize": "•Maize•",
   "maize": "chimanga",
   "Male": "•Male•",
@@ -165,15 +167,19 @@
   "marketing and selling": "kutsatsa ndi kugulitsa",
   "May": "•May•",
   "meat": "nyama",
-  "Mid RF": "•Mid RF•",
+  "Medium": "•Medium•",
+  "Mid": "•Mid•",
   "milk": "mkaka",
   "mixed": "kusakaniza",
   "Monday": "Pa lolemba",
   "Money": "ndalama",
   "money": "ndalama",
   "Monitoring": "Kuyanganira / Kuyendera",
+  "Months": "•Months•",
   "mulching": "mochi",
   "Name": "Dzina",
+  "Name of practice": "•Name of practice•",
+  "Neutral": "•Neutral•",
   "New Budget": "•New Budget•",
   "New Profile": "Profaelo yatsopano",
   "Next": "ina",
@@ -183,6 +189,7 @@
   "Oct": "•Oct•",
   "October": "•October•",
   "onions": "anyezi",
+  "Only": "•Only•",
   "Options": "Zosankha",
   "Options by context": "Zosankha Munjirayake",
   "out of": "kuchokera",
@@ -190,7 +197,7 @@
   "ox cart": "kochikali/ ngolo",
   "paw-paw": "paw-paw",
   "Performance": "•Performance•",
-  "Performance in high, mid and low RF (rainfall)": "•Performance in high, mid and low RF (rainfall)•",
+  "Performance in high, mid and low rainfall": "•Performance in high, mid and low rainfall•",
   "PICSA": "PICSA",
   "Pigeon Peas": "•Pigeon Peas•",
   "pigeon peas": "nyamdolo",
@@ -223,9 +230,10 @@
   "Revisit": "Yenderansoni",
   "Rice": "•Rice•",
   "rice": "mpunga",
+  "risk": "•risk•",
   "Risk": "•Risk•",
-  "Risk of practice (disadvantage)": "•Risk of practice (disadvantage)•",
   "Risks": "•Risks•",
+  "Risks or disadvantages": "•Risks or disadvantages•",
   "Saturday": "Pa chiweru",
   "Save": "sungani",
   "Save your budget": "sungani bajeti yanu",
@@ -288,12 +296,12 @@
   "supplements": "zothandizila",
   "Sweet Potatoes": "•Sweet Potatoes•",
   "sweet potatoes": "kandolo/kachamba",
+  "Take App Tour": "•Take App Tour•",
   "Terciles": "Misampha",
   "The farmer decides": "Mlimi asankha zochita",
   "threshing": "kupuntha",
   "Thursday": "Pa chinai",
   "Time": "•Time•",
-  "Time (months)": "•Time (months)•",
   "Time to start benefiting": "•Time to start benefiting•",
   "title": "•title•",
   "Title": "mutu",
@@ -317,6 +325,7 @@
   "watermelon": "vwembe",
   "Wednesday": "Pa chitatu",
   "weeding": "kupalira",
+  "Weeks": "•Weeks•",
   "What are the opportunities and risks?": "•What are the opportunities and risks?•",
   "What are the options for the farmer?": "Kodi nizosankha zotani mam'limi?",
   "What are the probabilities and risks?": "Kodi pali m'pata wotani komanso ziophyezo?",
diff --git a/libs/i18n/templates/_template.csv b/libs/i18n/templates/_template.csv
index 3821d5cdf..191c65b5f 100644
--- a/libs/i18n/templates/_template.csv
+++ b/libs/i18n/templates/_template.csv
@@ -115,7 +115,6 @@ tool,context,text
 "budget",,"Consumed"
 "budget",,"Cost"
 "budget",,"Create New Budget"
-"budget",,"Days"
 "budget",,"Decrease Scale"
 "budget",,"Description (optional)"
 "budget",,"Edit Budget"
@@ -246,6 +245,7 @@ tool,context,text
 "extension",,"Resources"
 "extension",,"Settings"
 "extension",,"Something went wrong..."
+"extension",,"Take App Tour"
 "manual",,"Activity Flow Chart"
 "manual",,"After the season"
 "manual",,"Compare different options and plans"
@@ -297,34 +297,43 @@ tool,context,text
 "monitoring",,"Forms"
 "monitoring",,"Submissions"
 "monitoring",,"Submit"
-"option",,"*This field is required"
 "option",,"Activities"
-"option",,"Add New Option"
-"option",,"Add benefit"
+"option",,"Add"
+"option",,"Add Option"
+"option",,"Bad"
 "option",,"Benefits"
 "option",,"Benefits and who"
-"option",,"Benefits and who "
+"option",,"Both"
+"option",,"Days"
 "option",,"Decisions"
-"option",,"Enter the practice for this option"
 "option",,"Female"
 "option",,"Finish"
-"option",,"High RF"
+"option",,"Good"
+"option",,"High"
 "option",,"Investment"
 "option",,"Investment in terms of money and time"
-"option",,"Low RF"
+"option",,"Low"
 "option",,"Male"
-"option",,"Mid RF"
+"option",,"Medium"
+"option",,"Mid"
 "option",,"Money"
+"option",,"Months"
+"option",,"Name of practice"
+"option",,"Neutral"
+"option",,"Only"
 "option",,"Performance"
-"option",,"Performance in high, mid and low RF (rainfall)"
+"option",,"Performance in high, mid and low rainfall"
 "option",,"Practice"
 "option",,"Risk"
-"option",,"Risk of practice (disadvantage)"
 "option",,"Risks"
+"option",,"Risks or disadvantages"
 "option",,"Time"
-"option",,"Time (months)"
 "option",,"Time to start benefiting"
+"option",,"Weeks"
 "option",,"Who does activity"
 "option",,"Who does the activity"
 "option",,"Who makes decisions"
+"option",,"and"
+"option",,"benefit"
+"option",,"risk"
 "resources",,"Collection not found"
\ No newline at end of file
diff --git a/libs/i18n/templates/_template.json b/libs/i18n/templates/_template.json
index 8dad45d64..c852d3ae0 100644
--- a/libs/i18n/templates/_template.json
+++ b/libs/i18n/templates/_template.json
@@ -571,10 +571,6 @@
     "text": "Create New Budget",
     "tool": "budget"
   },
-  {
-    "text": "Days",
-    "tool": "budget"
-  },
   {
     "text": "Decrease Scale",
     "tool": "budget"
@@ -1119,6 +1115,10 @@
     "text": "Something went wrong...",
     "tool": "extension"
   },
+  {
+    "text": "Take App Tour",
+    "tool": "extension"
+  },
   {
     "text": "Activity Flow Chart",
     "tool": "manual"
@@ -1324,19 +1324,19 @@
     "tool": "monitoring"
   },
   {
-    "text": "*This field is required",
+    "text": "Activities",
     "tool": "option"
   },
   {
-    "text": "Activities",
+    "text": "Add",
     "tool": "option"
   },
   {
-    "text": "Add New Option",
+    "text": "Add Option",
     "tool": "option"
   },
   {
-    "text": "Add benefit",
+    "text": "Bad",
     "tool": "option"
   },
   {
@@ -1348,15 +1348,15 @@
     "tool": "option"
   },
   {
-    "text": "Benefits and who ",
+    "text": "Both",
     "tool": "option"
   },
   {
-    "text": "Decisions",
+    "text": "Days",
     "tool": "option"
   },
   {
-    "text": "Enter the practice for this option",
+    "text": "Decisions",
     "tool": "option"
   },
   {
@@ -1368,7 +1368,11 @@
     "tool": "option"
   },
   {
-    "text": "High RF",
+    "text": "Good",
+    "tool": "option"
+  },
+  {
+    "text": "High",
     "tool": "option"
   },
   {
@@ -1380,7 +1384,7 @@
     "tool": "option"
   },
   {
-    "text": "Low RF",
+    "text": "Low",
     "tool": "option"
   },
   {
@@ -1388,19 +1392,39 @@
     "tool": "option"
   },
   {
-    "text": "Mid RF",
+    "text": "Medium",
+    "tool": "option"
+  },
+  {
+    "text": "Mid",
     "tool": "option"
   },
   {
     "text": "Money",
     "tool": "option"
   },
+  {
+    "text": "Months",
+    "tool": "option"
+  },
+  {
+    "text": "Name of practice",
+    "tool": "option"
+  },
+  {
+    "text": "Neutral",
+    "tool": "option"
+  },
+  {
+    "text": "Only",
+    "tool": "option"
+  },
   {
     "text": "Performance",
     "tool": "option"
   },
   {
-    "text": "Performance in high, mid and low RF (rainfall)",
+    "text": "Performance in high, mid and low rainfall",
     "tool": "option"
   },
   {
@@ -1412,11 +1436,11 @@
     "tool": "option"
   },
   {
-    "text": "Risk of practice (disadvantage)",
+    "text": "Risks",
     "tool": "option"
   },
   {
-    "text": "Risks",
+    "text": "Risks or disadvantages",
     "tool": "option"
   },
   {
@@ -1424,11 +1448,11 @@
     "tool": "option"
   },
   {
-    "text": "Time (months)",
+    "text": "Time to start benefiting",
     "tool": "option"
   },
   {
-    "text": "Time to start benefiting",
+    "text": "Weeks",
     "tool": "option"
   },
   {
@@ -1443,6 +1467,18 @@
     "text": "Who makes decisions",
     "tool": "option"
   },
+  {
+    "text": "and",
+    "tool": "option"
+  },
+  {
+    "text": "benefit",
+    "tool": "option"
+  },
+  {
+    "text": "risk",
+    "tool": "option"
+  },
   {
     "text": "Collection not found",
     "tool": "resources"
diff --git a/libs/shared/src/modules/deep-links/app-open-prompt.component.ts b/libs/shared/src/modules/deep-links/app-open-prompt.component.ts
index 568e20060..4b955c545 100644
--- a/libs/shared/src/modules/deep-links/app-open-prompt.component.ts
+++ b/libs/shared/src/modules/deep-links/app-open-prompt.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { MatBottomSheet } from '@angular/material/bottom-sheet';
 
+import { CommunicationService } from '../../services/promptToHomePageService.service';
 import { DeepLinksService } from './deep-links.service';
 
 /**
@@ -15,7 +16,7 @@ import { DeepLinksService } from './deep-links.service';
         <div class="open-option">
           <div class="picsa-app-icon">PICSA</div>
           <h3>PICSA App</h3>
-          <button mat-raised-button color="primary">Open</button>
+          <button mat-raised-button color="primary" (click)="triggerTour()">Open</button>
         </div>
       </a>
       <div class="open-option" (click)="dismiss()">
@@ -72,12 +73,19 @@ export class AppOpenPromptComponent {
   appDynamicLink: string;
   constructor(
     deepLinksService: DeepLinksService,
-    private bottomSheet: MatBottomSheet
+    private bottomSheet: MatBottomSheet,
+    private communicationService: CommunicationService
   ) {
     this.appDynamicLink = deepLinksService.config.appDynamicLink;
   }
 
+  triggerTour(){
+   this.communicationService.triggerUserEvent();
+  }
+
   dismiss() {
     this.bottomSheet.dismiss();
+    // trigger homepage tour
+    this.triggerTour();
   }
 }
diff --git a/libs/shared/src/services/core/tour.service.ts b/libs/shared/src/services/core/tour.service.ts
new file mode 100644
index 000000000..27e64cffb
--- /dev/null
+++ b/libs/shared/src/services/core/tour.service.ts
@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import introJs, { IntroJs, Options, Step } from 'intro.js';
+
+export interface ITourStep extends Omit<Step, 'intro'> {
+  id: string;
+  text: string;
+}
+
+@Injectable({ providedIn: 'root' })
+/**
+ * Interact with Intro.JS tours
+ */
+export class TourService {
+  private intro: IntroJs;
+  constructor() {
+    this.intro = introJs();
+  }
+
+  public startTour(tourSteps: ITourStep[], tourOptions: Partial<Options> = {}): void {
+    // map passed tourId to data attribute selector
+    const steps = tourSteps.map((step) => {
+      const mappedStep: Step = {
+        ...step,
+        element: `[data-tour-id="${step.id}"]`,
+        intro: step.text,
+      };
+      return mappedStep;
+    });
+    console.log('starting tour', steps);
+
+    this.intro
+      .setOptions({
+        hidePrev: true,
+        exitOnOverlayClick: false,
+        tooltipClass: 'picsa-tooltip',
+        steps,
+        ...tourOptions,
+      })
+      .start();
+  }
+}
diff --git a/libs/shared/src/services/promptToHomePageService.service.ts b/libs/shared/src/services/promptToHomePageService.service.ts
new file mode 100644
index 000000000..bb9f4b527
--- /dev/null
+++ b/libs/shared/src/services/promptToHomePageService.service.ts
@@ -0,0 +1,17 @@
+// Service to facilitate communication between the app-open-prompt and homepage
+
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CommunicationService {
+  private userEventSubject = new Subject<void>();
+
+  userEvent$ = this.userEventSubject.asObservable();
+
+  triggerUserEvent(): void {
+    this.userEventSubject.next();
+  }
+}
diff --git a/libs/theme/src/_layout.scss b/libs/theme/src/_layout.scss
index acd14181e..f934bd99e 100644
--- a/libs/theme/src/_layout.scss
+++ b/libs/theme/src/_layout.scss
@@ -33,3 +33,26 @@ body {
   flex-direction: column;
   flex: 1;
 }
+
+// instead of using bottom use top with calc to avoid jumping
+$footer-height: 5em;
+.sticky-footer {
+  position: fixed;
+  height: $footer-height;
+  top: calc(100vh - #{$footer-height});
+  left: 0;
+  width: 100%;
+  background: white;
+  display: flex;
+  align-items: center;
+}
+
+button.footer-button.mat-mdc-button-base {
+  width: 60%;
+  left: 20%;
+  height: calc(#{$footer-height} - 10px) !important;
+  .mdc-button__label {
+    font-size: 1.5rem;
+    line-height: 3rem;
+  }
+}
diff --git a/libs/theme/src/_overrides.scss b/libs/theme/src/_overrides.scss
index e36906c91..323fa2290 100644
--- a/libs/theme/src/_overrides.scss
+++ b/libs/theme/src/_overrides.scss
@@ -91,6 +91,18 @@ mat-radio-group.layout-column {
     }
   }
 }
+mat-stepper.slim-headers {
+  mat-step-header {
+    height: 48px;
+  }
+}
+
+// Allow use of primary color with selected value by custom `value-primary` class
+mat-select.value-primary {
+  .mat-mdc-select-value {
+    color: var(--color-primary) !important;
+  }
+}
 
 /******************************************************************
 Enketo Form
@@ -105,3 +117,16 @@ enketo-webform {
     width: 100%;
   }
 }
+/******************************************************************
+Intro.JS Tour
+*******************************************************************/
+.introjs-tooltip.picsa-tooltip {
+  .introjs-tooltip-header {
+    background: var(--color-primary);
+    color: white;
+  }
+  .introjs-skipbutton {
+    color: white;
+    line-height: 36px;
+  }
+}
diff --git a/package.json b/package.json
index c5ae3b6ca..97dfcdf37 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "picsa-apps",
-  "version": "3.31.1",
+  "version": "3.32.0",
   "license": "See LICENSE",
   "scripts": {
     "ng": "nx",
@@ -77,6 +77,7 @@
     "form-data": "^4.0.0",
     "glob": "^8.1.0",
     "html2canvas": "^1.4.1",
+    "intro.js": "^7.0.1",
     "leaflet": "^1.9.3",
     "leaflet-draw": "github:enketo/Leaflet.draw#ff730785db7fcccbf2485ffcf4dffe1238a7c617",
     "lottie-web": "^5.10.2",
@@ -125,6 +126,7 @@
     "@stencil/sass": "^3.0.2",
     "@types/c3": "^0.7.8",
     "@types/hammerjs": "^2.0.41",
+    "@types/intro.js": "^5.1.1",
     "@types/jest": "28.1.1",
     "@types/leaflet": "^1.8.0",
     "@types/node": "^18.14.2",
diff --git a/yarn.lock b/yarn.lock
index fa632bd82..66486eb35 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8042,6 +8042,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/intro.js@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "@types/intro.js@npm:5.1.1"
+  checksum: 72fa6b928acc6837b4574259a9d69d67fceb4e9a319930ae5b7dcf65d7728822dc91a1c8d0baa96800b6e0d8ca5f39cbdb7508fd16a6cefc86af7c806dd1b877
+  languageName: node
+  linkType: hard
+
 "@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.0, @types/istanbul-lib-coverage@npm:^2.0.1":
   version: 2.0.4
   resolution: "@types/istanbul-lib-coverage@npm:2.0.4"
@@ -14975,6 +14982,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"intro.js@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "intro.js@npm:7.0.1"
+  checksum: e29fd0b64fd049bfe7ec59c1916ce20789313320829f09c7ad6fedd9344a7c3aa985c0c65086fa08feca792c6fdfe189dfdc8776af9437c6f5ced751268c453f
+  languageName: node
+  linkType: hard
+
 "ionicons@npm:^6.1.1":
   version: 6.1.1
   resolution: "ionicons@npm:6.1.1"
@@ -19092,6 +19106,7 @@ __metadata:
     "@supabase/supabase-js": ^2.22.0
     "@types/c3": ^0.7.8
     "@types/hammerjs": ^2.0.41
+    "@types/intro.js": ^5.1.1
     "@types/jest": 28.1.1
     "@types/leaflet": ^1.8.0
     "@types/node": ^18.14.2
@@ -19130,6 +19145,7 @@ __metadata:
     glob: ^8.1.0
     html2canvas: ^1.4.1
     husky: ^8.0.0
+    intro.js: ^7.0.1
     jest: 28.1.1
     jest-circus: ^29.5.0
     jest-environment-jsdom: 28.1.1