diff --git a/src/angular/planit/src/app/app.module.ts b/src/angular/planit/src/app/app.module.ts
index a389ddf75..1b626dda3 100644
--- a/src/angular/planit/src/app/app.module.ts
+++ b/src/angular/planit/src/app/app.module.ts
@@ -31,6 +31,7 @@ import { WeatherEventService } from './core/services/weather-event.service';
 
 import {
   BsDropdownModule,
+  ButtonsModule,
   CollapseModule,
   PopoverModule,
   TooltipModule,
@@ -57,6 +58,7 @@ const appRoutes: Routes = [
     HttpModule,
     // 3rd party
     BsDropdownModule.forRoot(),
+    ButtonsModule.forRoot(),
     CollapseModule.forRoot(),
     ModalModule.forRoot(),
     PopoverModule.forRoot(),
diff --git a/src/angular/planit/src/app/assessment/assessment-overview.component.ts b/src/angular/planit/src/app/assessment/assessment-overview.component.ts
index 46e7c8e15..61a69a4b8 100644
--- a/src/angular/planit/src/app/assessment/assessment-overview.component.ts
+++ b/src/angular/planit/src/app/assessment/assessment-overview.component.ts
@@ -13,10 +13,8 @@ export class AssessmentOverviewComponent implements OnInit {
   constructor (private riskService: RiskService) {}
 
   ngOnInit() {
-
     this.riskService.list().subscribe(risks => {
       this.risks = risks;
     });
   }
 }
-
diff --git a/src/angular/planit/src/app/risk-wizard/risk-wizard.component.html b/src/angular/planit/src/app/risk-wizard/risk-wizard.component.html
index 59c20d4e5..ec9bd9926 100644
--- a/src/angular/planit/src/app/risk-wizard/risk-wizard.component.html
+++ b/src/angular/planit/src/app/risk-wizard/risk-wizard.component.html
@@ -2,37 +2,42 @@
         navigationMode="free"
         navBarLocation="left"
         navBarLayout="large-empty-symbols">
-  <app-risk-step-identify #identifyStep
-                             wizardStep
-                             stepTitle="{{ identifyStep.title }}"
-                             navigationSymbol="{{ identifyStep.navigationSymbol }}">
+  <app-risk-step-identify class="wizard-step"
+                          #identifyStep
+                          wizardStep
+                          stepTitle="{{ identifyStep.title }}"
+                          navigationSymbol="{{ identifyStep.navigationSymbol }}">
   </app-risk-step-identify>
 
-  <app-risk-step-hazard #hazardStep
-                           wizardStep
-                           optionalStep
-                           stepTitle="{{ hazardStep.title }}"
-                           navigationSymbol="{{ hazardStep.navigationSymbol }}">
+  <app-risk-step-hazard class="wizard-step"
+                        #hazardStep
+                        wizardStep
+                        optionalStep
+                        stepTitle="{{ hazardStep.title }}"
+                        navigationSymbol="{{ hazardStep.navigationSymbol }}">
   </app-risk-step-hazard>
 
-  <app-risk-step-impact #impactStep
-                           wizardStep
-                           optionalStep
-                           stepTitle="{{ impactStep.title }}"
-                           navigationSymbol="{{ impactStep.navigationSymbol }}">
+  <app-risk-step-impact class="wizard-step"
+                        #impactStep
+                        wizardStep
+                        optionalStep
+                        stepTitle="{{ impactStep.title }}"
+                        navigationSymbol="{{ impactStep.navigationSymbol }}">
   </app-risk-step-impact>
 
-  <app-risk-step-capacity #capacityStep
-                             wizardStep
-                             optionalStep
-                             stepTitle="{{ capacityStep.title }}"
-                             navigationSymbol="{{ capacityStep.navigationSymbol }}">
+  <app-risk-step-capacity class="wizard-step"
+                          #capacityStep
+                          wizardStep
+                          optionalStep
+                          stepTitle="{{ capacityStep.title }}"
+                          navigationSymbol="{{ capacityStep.navigationSymbol }}">
   </app-risk-step-capacity>
 
-  <app-risk-step-review #reviewStep
-                           wizardCompletionStep
-                           enableBackLinks
-                           stepTitle="{{ reviewStep.title }}"
-                           navigationSymbol="{{ reviewStep.navigationSymbol }}">
+  <app-risk-step-review class="wizard-step"
+                        #reviewStep
+                        wizardCompletionStep
+                        enableBackLinks
+                        stepTitle="{{ reviewStep.title }}"
+                        navigationSymbol="{{ reviewStep.navigationSymbol }}">
   </app-risk-step-review>
 </wizard>
diff --git a/src/angular/planit/src/app/risk-wizard/risk-wizard.component.ts b/src/angular/planit/src/app/risk-wizard/risk-wizard.component.ts
index dc362f260..e68924839 100644
--- a/src/angular/planit/src/app/risk-wizard/risk-wizard.component.ts
+++ b/src/angular/planit/src/app/risk-wizard/risk-wizard.component.ts
@@ -28,9 +28,13 @@ export class RiskWizardComponent implements AfterViewInit, OnDestroy, OnInit {
   constructor(private session: WizardSessionService<Risk>) {}
 
   ngOnInit() {
-    // TODO: Set initial risk from API
-    this.session.setData(new Risk({}));
-    this.session.data.subscribe(risk => this.riskModelChanged(risk));
+    // TODO (#324): Set initial risk from API
+    const risk = new Risk({
+      communitySystem: { name: '' },
+      weatherEvent: { name: '' }
+    });
+    this.session.setData(risk);
+    this.session.data.subscribe(r => this.riskModelChanged(r));
   }
 
   ngOnDestroy() {
diff --git a/src/angular/planit/src/app/risk-wizard/risk-wizard.module.ts b/src/angular/planit/src/app/risk-wizard/risk-wizard.module.ts
index 7faa58a02..95484988d 100644
--- a/src/angular/planit/src/app/risk-wizard/risk-wizard.module.ts
+++ b/src/angular/planit/src/app/risk-wizard/risk-wizard.module.ts
@@ -3,6 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { ReactiveFormsModule } from '@angular/forms';
 
 import { ArchwizardModule } from 'ng2-archwizard';
+import { BsDropdownModule, ButtonsModule, TooltipModule } from 'ngx-bootstrap';
 
 import { Risk } from '../shared/models/risk.model';
 
@@ -19,7 +20,10 @@ import { SharedModule } from '../shared/shared.module';
     BrowserModule,
     ReactiveFormsModule,
     ArchwizardModule,
-    SharedModule
+    SharedModule,
+    BsDropdownModule,
+    ButtonsModule,
+    TooltipModule
   ],
   exports: [RiskWizardComponent],
   declarations: [
diff --git a/src/angular/planit/src/app/risk-wizard/steps/hazard-step.component.html b/src/angular/planit/src/app/risk-wizard/steps/hazard-step.component.html
index 707c47efe..ed827a04b 100644
--- a/src/angular/planit/src/app/risk-wizard/steps/hazard-step.component.html
+++ b/src/angular/planit/src/app/risk-wizard/steps/hazard-step.component.html
@@ -1,4 +1,40 @@
-<h3>Hazard</h3>
-
-<button type="button" nextStep>Continue</button>
-<button type="button" previousStep>Back</button>
+<div class="step-header">
+  <h3>Hazard</h3>
+  <h5>{{ risk.weatherEvent?.name }}</h5>
+</div>
+<div class="step-content">
+  <form [formGroup]="form">
+    <div class="step-form-control">
+      <h5>Probability</h5>
+      <app-option-dropdown [control]="form.controls['probability']"
+                           [options]="relativeOptions">
+      </app-option-dropdown>
+    </div>
+    <div class="step-form-control">
+      <h5>Frequency <span class="icon icon-question-circle-o" tooltip="{{ tooltipText.frequency }}"></span></h5>
+      <div class="btn-group">
+        <button class="btn btn-primary"
+                [ngClass]="{active: form.controls.frequency.value === opt}"
+                *ngFor="let opt of directionalOptionsKeys"
+                (click)="updateDirectionalControl(form.controls.frequency, opt)">
+          {{ directionalOptions.get(opt)?.label }}
+        </button>
+      </div>
+    </div>
+    <div class="step-form-control">
+      <h5>Intensity <span class="icon icon-question-circle-o" tooltip="{{ tooltipText.intensity }}"></span></h5>
+      <div class="btn-group">
+        <button class="btn btn-primary"
+                [ngClass]="{active: form.controls.intensity.value === opt}"
+                *ngFor="let opt of directionalOptionsKeys"
+                (click)="updateDirectionalControl(form.controls.intensity, opt)">
+          {{ directionalOptions.get(opt)?.label }}
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+<div class="step-footer">
+  <button type="button" nextStep>Skip Step</button>
+  <button type="button" [disabled]="form.pristine" nextStep (finalize)="save()">Continue</button>
+</div>
diff --git a/src/angular/planit/src/app/risk-wizard/steps/hazard-step.component.ts b/src/angular/planit/src/app/risk-wizard/steps/hazard-step.component.ts
index ea51838ce..2249a288f 100644
--- a/src/angular/planit/src/app/risk-wizard/steps/hazard-step.component.ts
+++ b/src/angular/planit/src/app/risk-wizard/steps/hazard-step.component.ts
@@ -1,16 +1,92 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+
+import {
+  OrgRiskDirectionalOption,
+  OrgRiskDirectionalOptions,
+  OrgRiskRelativeOption,
+  OrgRiskRelativeOptions,
+  Risk
+} from '../../shared/';
+import { RiskStepKey } from '../risk-step-key';
+import { WizardStepComponent } from '../wizard-step.component';
+import { WizardSessionService } from '../wizard-session.service';
+
+interface HazardStepFormModel {
+  frequency: OrgRiskDirectionalOption;
+  intensity: OrgRiskDirectionalOption;
+  probability: OrgRiskRelativeOption;
+}
 
 @Component({
   selector: 'app-risk-step-hazard',
   templateUrl: 'hazard-step.component.html'
 })
 
-export class HazardStepComponent implements OnInit {
+export class HazardStepComponent extends WizardStepComponent<Risk> implements OnInit {
 
+  public form: FormGroup;
+  public key = RiskStepKey.Hazard;
   public navigationSymbol = '2';
+  public risk: Risk;
   public title = 'Hazard';
+  public tooltipText = {
+    frequency: 'Estimation of the change in how often this hazard will occur in the future',
+    intensity: 'Estimation of the change in strength of this hazard in the future'
+  };
+
+  public directionalOptions = OrgRiskDirectionalOptions;
+  public relativeOptions = OrgRiskRelativeOptions;
+  // Can't *ngFor a map type or iterable, so instead we realize the iterable and use that in *ngFors
+  public directionalOptionsKeys = Array.from(OrgRiskDirectionalOptions.keys());
+  public relativeOptionsKeys = Array.from(OrgRiskRelativeOptions.keys());
+
+  constructor(private fb: FormBuilder,
+              protected session: WizardSessionService<Risk>) {
+    super(session);
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+    this.risk = this.session.getData() || new Risk({});
+    this.setupForm(this.fromModel(this.risk));
+    this.form.get('intensity').valueChanges.subscribe(v => console.log('intensity: ', v));
+  }
+
+  save() {
+    const data: HazardStepFormModel = {
+      frequency: this.form.controls.frequency.value,
+      intensity: this.form.controls.intensity.value,
+      probability: this.form.controls.probability.value
+    };
+    this.session.setDataForKey(this.key, data);
+  }
+
+  updateDirectionalControl(control: FormControl, value: OrgRiskDirectionalOption) {
+    control.setValue(value);
+    control.markAsDirty();
+  }
+
+  setupForm(data: HazardStepFormModel) {
+    this.form = this.fb.group({
+      'frequency': [data.frequency, []],
+      'intensity': [data.intensity, []],
+      'probability': [data.probability, []],
+    });
+  }
 
-  constructor() { }
+  fromModel(model: Risk): HazardStepFormModel {
+    return {
+      frequency: model.frequency,
+      intensity: model.intensity,
+      probability: model.probability
+    };
+  }
 
-  ngOnInit() { }
+  toModel(data: HazardStepFormModel, model: Risk) {
+    model.frequency = data.frequency;
+    model.intensity = data.intensity;
+    model.probability = data.probability;
+    return model;
+  }
 }
diff --git a/src/angular/planit/src/app/risk-wizard/steps/identify-step-form.model.ts b/src/angular/planit/src/app/risk-wizard/steps/identify-step-form.model.ts
deleted file mode 100644
index 0c9004750..000000000
--- a/src/angular/planit/src/app/risk-wizard/steps/identify-step-form.model.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-
-export interface IdentifyStepFormModel {
-  hazard: string;
-  communitySystem: string;
-}
diff --git a/src/angular/planit/src/app/risk-wizard/steps/identify-step.component.html b/src/angular/planit/src/app/risk-wizard/steps/identify-step.component.html
index 6916f8ead..50da21442 100644
--- a/src/angular/planit/src/app/risk-wizard/steps/identify-step.component.html
+++ b/src/angular/planit/src/app/risk-wizard/steps/identify-step.component.html
@@ -1,18 +1,22 @@
-<h3>Identify risk</h3>
-
-<p>Match a hazard to a subset of people, strucutres or assets (sometimes referred to as a "community system") that the selected hazard may impact</p>
-
-<form [formGroup]="form">
-  <div>
-    <label for="">Hazard</label>
-      <input type="text" formControlName="hazard">
-      <span *ngIf="form.controls.hazard.errors">*Required</span>
-  </div>
-  <div>
-    <label for="">Community System</label>
-    <input type="text" formControlName="communitySystem">
-    <span *ngIf="form.controls.communitySystem.errors">*Required</span>
-  </div>
+<div class="step-header">
+  <h3>Identify risk</h3>
+</div>
+<div class="step-content">
+  <p>Match a hazard to a subset of people, structures or assets (sometimes referred to as a "community system") that the selected hazard may impact</p>
+  <form [formGroup]="form">
+    <div class="step-form-control">
+      <label for="">Hazard</label>
+        <input type="text" formControlName="hazard">
+        <span *ngIf="form.controls.hazard.errors">*Required</span>
+    </div>
+    <div class="step-form-control">
+      <label for="">Community System</label>
+      <input type="text" formControlName="communitySystem">
+      <span *ngIf="form.controls.communitySystem.errors">*Required</span>
+    </div>
+  </form>
+</div>
+<div class="step-footer">
   <button type="button" [disabled]="!form.valid" nextStep (finalize)="save()">Continue</button>
   <button type="button" (click)="cancel()">Cancel</button>
-</form>
+</div>
diff --git a/src/angular/planit/src/app/risk-wizard/steps/identify-step.component.ts b/src/angular/planit/src/app/risk-wizard/steps/identify-step.component.ts
index 738851186..31c446aea 100644
--- a/src/angular/planit/src/app/risk-wizard/steps/identify-step.component.ts
+++ b/src/angular/planit/src/app/risk-wizard/steps/identify-step.component.ts
@@ -3,16 +3,19 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 
 import { Risk } from '../../shared/';
-import { IdentifyStepFormModel } from './identify-step-form.model';
 import { WizardStepComponent } from '../wizard-step.component';
 import { RiskStepKey } from '../risk-step-key';
 import { WizardSessionService } from '../wizard-session.service';
 
+interface IdentifyStepFormModel {
+  hazard: string;
+  communitySystem: string;
+}
+
 @Component({
   selector: 'app-risk-step-identify',
   templateUrl: 'identify-step.component.html'
 })
-
 export class IdentifyStepComponent extends WizardStepComponent<Risk> implements OnInit {
 
   public form: FormGroup;
@@ -29,23 +32,23 @@ export class IdentifyStepComponent extends WizardStepComponent<Risk> implements
 
   ngOnInit() {
     super.ngOnInit();
-    const risk = this.session.getData() || new Risk({});
-    this.setupForm(this.fromData(risk));
+    const risk = this.session.getData();
+    this.setupForm(this.fromModel(risk));
   }
 
   cancel() {
     this.router.navigate(['assessment']);
   }
 
-  fromData(risk: Risk): IdentifyStepFormModel {
+  fromModel(risk: Risk): IdentifyStepFormModel {
     return {
-      hazard: risk.impactDescription,
+      hazard: risk.weatherEvent.name,
       communitySystem: risk.communitySystem.name
     };
   }
 
   save() {
-    const data = {
+    const data: IdentifyStepFormModel = {
       hazard: this.form.controls.hazard.value,
       communitySystem: this.form.controls.communitySystem.value
     };
@@ -59,8 +62,8 @@ export class IdentifyStepComponent extends WizardStepComponent<Risk> implements
     });
   }
 
-  toData(data: IdentifyStepFormModel, risk: Risk) {
-    risk.impactDescription = data.hazard;
+  toModel(data: IdentifyStepFormModel, risk: Risk) {
+    risk.weatherEvent.name = data.hazard;
     risk.communitySystem.name = data.communitySystem;
     return risk;
   }
diff --git a/src/angular/planit/src/app/risk-wizard/wizard-session.service.ts b/src/angular/planit/src/app/risk-wizard/wizard-session.service.ts
index 9f17b42f6..6bb61d2a6 100644
--- a/src/angular/planit/src/app/risk-wizard/wizard-session.service.ts
+++ b/src/angular/planit/src/app/risk-wizard/wizard-session.service.ts
@@ -6,9 +6,6 @@ import { Injectable } from '@angular/core';
 
 import { Subject } from 'rxjs/Rx';
 
-import { RiskStepKey } from './risk-step-key';
-import { Risk } from '../shared/';
-
 interface DataHandler<T> {
   toData: (any, T) => T;
   fromData: (T) => any;
diff --git a/src/angular/planit/src/app/risk-wizard/wizard-step.component.ts b/src/angular/planit/src/app/risk-wizard/wizard-step.component.ts
index 19aadda3e..6d1794118 100644
--- a/src/angular/planit/src/app/risk-wizard/wizard-step.component.ts
+++ b/src/angular/planit/src/app/risk-wizard/wizard-step.component.ts
@@ -9,8 +9,6 @@
 import { OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 
-import { Risk } from './../shared/';
-import { RiskStepKey } from './risk-step-key';
 import { WizardSessionService } from './wizard-session.service';
 
 export abstract class WizardStepComponent<T> implements OnInit {
@@ -19,24 +17,24 @@ export abstract class WizardStepComponent<T> implements OnInit {
   abstract navigationSymbol: string;
   abstract title: string;
 
-  // Subclass constructors must also inject RiskWizardSessionService and call:
+  // Subclass constructors must also inject WizardSessionService and call:
   //  super(session);
   constructor(protected session: WizardSessionService<T>) {}
 
   // Subclass ngOnInit methods must implement ngOnInit and call `super.ngOnInit()` first in
   //  their implementations
   ngOnInit() {
-    this.registerRiskHandlers();
+    this.registerModelHandlers();
   }
 
-  abstract fromData(data: T): any;
+  abstract fromModel(model: T): any;
   abstract setupForm(data: any): void;
-  abstract toData(data: any, risk: T): T;
+  abstract toModel(data: any, model: T): T;
 
-  registerRiskHandlers() {
+  registerModelHandlers() {
     this.session.registerHandlerForKey(this.key, {
-      fromData: this.fromData,
-      toData: this.toData
+      fromData: this.fromModel,
+      toData: this.toModel
     });
   }
 }
diff --git a/src/angular/planit/src/app/shared/index.ts b/src/angular/planit/src/app/shared/index.ts
index 44c395d74..b934d7718 100644
--- a/src/angular/planit/src/app/shared/index.ts
+++ b/src/angular/planit/src/app/shared/index.ts
@@ -8,3 +8,13 @@ export { Organization } from './models/organization.model';
 export { PrecipitationUnits,
          TemperatureUnits,
          OrgUnitType } from './constants/units-conversion';
+
+export {
+  OrgRiskDirectionalOption,
+  OrgRiskDirectionalOptions
+} from './models/org-risk-directional-option.model';
+
+export {
+  OrgRiskRelativeOption,
+  OrgRiskRelativeOptions
+} from './models/org-risk-relative-option.model';
diff --git a/src/angular/planit/src/app/shared/models/org-risk-directional-option.model.ts b/src/angular/planit/src/app/shared/models/org-risk-directional-option.model.ts
new file mode 100644
index 000000000..6cebc6e0b
--- /dev/null
+++ b/src/angular/planit/src/app/shared/models/org-risk-directional-option.model.ts
@@ -0,0 +1,28 @@
+import { OrgRiskOptionDescription } from './org-risk-option-description.model';
+
+export enum OrgRiskDirectionalOption {
+  Unsure = 'unsure',
+  NoChange = 'no change',
+  Increasing = 'increasing',
+  Decreasing = 'decreasing'
+}
+
+export const OrgRiskDirectionalOptions =
+    new Map<OrgRiskDirectionalOption, OrgRiskOptionDescription>([
+  [OrgRiskDirectionalOption.Unsure, {
+    label: 'Unsure',
+    description: ''
+  }],
+  [OrgRiskDirectionalOption.NoChange, {
+    label: 'No change',
+    description: ''
+  }],
+  [OrgRiskDirectionalOption.Increasing, {
+    label: 'Increasing',
+    description: ''
+  }],
+  [OrgRiskDirectionalOption.Decreasing, {
+    label: 'Decreasing',
+    description: ''
+  }]
+]);
diff --git a/src/angular/planit/src/app/shared/models/org-risk-option-description.model.ts b/src/angular/planit/src/app/shared/models/org-risk-option-description.model.ts
new file mode 100644
index 000000000..b4ff66248
--- /dev/null
+++ b/src/angular/planit/src/app/shared/models/org-risk-option-description.model.ts
@@ -0,0 +1,4 @@
+export interface OrgRiskOptionDescription {
+  label: string;
+  description: string;
+}
diff --git a/src/angular/planit/src/app/shared/models/org-risk-relative-option.model.ts b/src/angular/planit/src/app/shared/models/org-risk-relative-option.model.ts
new file mode 100644
index 000000000..170806c61
--- /dev/null
+++ b/src/angular/planit/src/app/shared/models/org-risk-relative-option.model.ts
@@ -0,0 +1,42 @@
+import { OrgRiskOptionDescription } from './org-risk-option-description.model';
+
+export enum OrgRiskRelativeOption {
+  Unsure = 'unsure',
+  Low = 'low',
+  ModeratelyLow = 'mod low',
+  Moderate = 'moderate',
+  ModeratelyHigh = 'mod high',
+  High = 'high'
+}
+
+export const OrgRiskRelativeOptions =
+    new Map<OrgRiskRelativeOption, OrgRiskOptionDescription>([
+  [OrgRiskRelativeOption.Unsure, {
+    label: 'Unsure',
+    description: ''
+  }],
+  [OrgRiskRelativeOption.Low, {
+    label: 'Low',
+    description: 'Not likely (between a 1 in 2,000 and 1 in 20,000 chance of occurring)'
+  }],
+  [OrgRiskRelativeOption.ModeratelyLow, {
+    label: 'Low',
+    description: 'Not likely (between a 1 in 2,000 and 1 in 20,000 chance of occurring)'
+  }],
+  [OrgRiskRelativeOption.ModeratelyLow, {
+    label: 'Moderately low',
+    description: 'Somewhat unlikely (between a 1 in 200 and 1 in 2,000 chance of occurring)'
+  }],
+  [OrgRiskRelativeOption.Moderate, {
+    label: 'Moderate',
+    description: 'Likely (between a 1 in 20 and 1 in 200 chance of occurring)'
+  }],
+  [OrgRiskRelativeOption.ModeratelyHigh, {
+    label: 'Moderately high',
+    description: 'Highly likely (between a 1 in 2 and 1 in 20 chance of occurring)'
+  }],
+  [OrgRiskRelativeOption.High, {
+    label: 'High',
+    description: 'Very likely (between a 1 in 1 and 1 in 2 chance of occurring)'
+  }]
+]);
diff --git a/src/angular/planit/src/app/shared/models/risk.model.ts b/src/angular/planit/src/app/shared/models/risk.model.ts
index bee67d2c3..55e86569c 100644
--- a/src/angular/planit/src/app/shared/models/risk.model.ts
+++ b/src/angular/planit/src/app/shared/models/risk.model.ts
@@ -1,21 +1,29 @@
 import { CommunitySystem } from './community-system.model';
 import { WeatherEvent } from './weather-event.model';
 import { Indicator } from 'climate-change-components';
+import { OrgRiskDirectionalOption } from './org-risk-directional-option.model';
+import { OrgRiskRelativeOption } from './org-risk-relative-option.model';
 
 export class Risk {
   id?: string;
   weatherEvent: WeatherEvent;
   communitySystem: CommunitySystem;
-  probability?: string;
-  frequency?: string;
-  intensity?: string;
   impactMagnitude?: string;
   impactDescription?: string;
   adaptiveCapacity?: string;
   relatedAdaptiveValues?: string[];
   adaptiveCapacityDescription?: string;
+  frequency: OrgRiskDirectionalOption = OrgRiskDirectionalOption.Unsure;
+  intensity: OrgRiskDirectionalOption = OrgRiskDirectionalOption.Unsure;
+  probability: OrgRiskRelativeOption = OrgRiskRelativeOption.Unsure;
 
-  constructor(object: Object) {
+  constructor(object: any) {
     Object.assign(this, object);
+    if (object.communitySystem) {
+      this.communitySystem = Object.assign({}, object.communitySystem);
+    }
+    if (object.weatherEvent) {
+      this.weatherEvent = Object.assign({}, object.weatherEvent);
+    }
   }
 }
diff --git a/src/angular/planit/src/app/shared/option-dropdown/option-dropdown.component.html b/src/angular/planit/src/app/shared/option-dropdown/option-dropdown.component.html
new file mode 100644
index 000000000..1ef7b926a
--- /dev/null
+++ b/src/angular/planit/src/app/shared/option-dropdown/option-dropdown.component.html
@@ -0,0 +1,15 @@
+<div class="btn-group" dropdown>
+  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
+    {{ options.get(control.value)?.label }}<span class="caret"></span>
+  </button>
+  <ul *dropdownMenu class="dropdown-menu" role="menu">
+    <li role="menuitem"
+        *ngFor="let opt of optionsKeys"
+        [ngClass]="{active: opt === control.value}">
+      <a class="dropdown-item" (click)="control.setValue(opt)">
+        <span class="dropdown-label">{{ options.get(opt)?.label }}</span>
+        <span class="dropdown-description" *ngIf="options.get(opt)?.description">{{ options.get(opt)?.description }}</span>
+      </a>
+    </li>
+  </ul>
+</div>
diff --git a/src/angular/planit/src/app/shared/option-dropdown/option-dropdown.component.ts b/src/angular/planit/src/app/shared/option-dropdown/option-dropdown.component.ts
new file mode 100644
index 000000000..ede7e8108
--- /dev/null
+++ b/src/angular/planit/src/app/shared/option-dropdown/option-dropdown.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+export interface OptionDropdownOption {
+  label: string;
+  description?: string;
+}
+
+@Component({
+  selector: 'app-option-dropdown',
+  templateUrl: './option-dropdown.component.html'
+})
+export class OptionDropdownComponent implements OnInit {
+
+  @Input() control: FormControl;
+  @Input() options: Map<string, OptionDropdownOption>;
+
+  public optionsKeys: string[];
+
+  constructor() { }
+
+  ngOnInit() {
+    this.optionsKeys = Array.from(this.options.keys());
+  }
+}
diff --git a/src/angular/planit/src/app/shared/shared.module.ts b/src/angular/planit/src/app/shared/shared.module.ts
index 31a3e6ad9..3dd67feec 100644
--- a/src/angular/planit/src/app/shared/shared.module.ts
+++ b/src/angular/planit/src/app/shared/shared.module.ts
@@ -2,18 +2,18 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
+import { BsDropdownModule } from 'ngx-bootstrap';
 import { ChartsModule } from 'climate-change-components';
+import { NouisliderModule } from 'ng2-nouislider';
 
+import { ChartComponent } from './chart/chart.component';
+import { HelpModalComponent } from './help-modal/help-modal.component';
+import { NavbarComponent } from './navbar/navbar.component';
+import { OptionDropdownComponent } from './option-dropdown/option-dropdown.component';
 import { SidebarComponent } from './sidebar/sidebar.component';
 import { TopConcernsComponent } from './top-concerns/top-concerns.component';
-import { HelpModalComponent } from './help-modal/help-modal.component';
 import { UserDropdownComponent } from './user-dropdown/user-dropdown.component';
-import { NavbarComponent } from './navbar/navbar.component';
-import { ChartComponent } from './chart/chart.component';
 
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-
-import { NouisliderModule } from 'ng2-nouislider';
 
 @NgModule({
   imports: [
@@ -24,22 +24,22 @@ import { NouisliderModule } from 'ng2-nouislider';
     NouisliderModule
   ],
   declarations: [
-    SidebarComponent,
-    TopConcernsComponent,
+    ChartComponent,
     HelpModalComponent,
-    UserDropdownComponent,
     NavbarComponent,
-    ChartComponent
+    OptionDropdownComponent,
+    SidebarComponent,
+    TopConcernsComponent,
+    UserDropdownComponent
   ],
   exports: [
+    ChartComponent,
     HelpModalComponent,
-    UserDropdownComponent,
-    CommonModule,
-    RouterModule,
+    NavbarComponent,
+    OptionDropdownComponent,
     SidebarComponent,
     TopConcernsComponent,
-    NavbarComponent,
-    ChartComponent
+    UserDropdownComponent
   ]
 })
 export class SharedModule { }
diff --git a/src/angular/planit/src/assets/sass/components/_app-wizard.scss b/src/angular/planit/src/assets/sass/components/_app-wizard.scss
new file mode 100644
index 000000000..574493f62
--- /dev/null
+++ b/src/angular/planit/src/assets/sass/components/_app-wizard.scss
@@ -0,0 +1,22 @@
+wizard {
+  .wizard-step {
+    padding: 3rem;
+
+    .step-header {
+      margin: 2rem 0;
+
+    }
+
+    .step-content {
+      margin-bottom: 4rem;
+
+      .step-form-control {
+        margin-bottom: 2rem;
+      }
+    }
+
+    .step-footer {
+      float: right;
+    }
+  }
+}
diff --git a/src/angular/planit/src/assets/sass/components/_archwizard.scss b/src/angular/planit/src/assets/sass/components/_archwizard.scss
new file mode 100644
index 000000000..9859c9443
--- /dev/null
+++ b/src/angular/planit/src/assets/sass/components/_archwizard.scss
@@ -0,0 +1,19 @@
+wizard {
+  .vertical.large-empty-symbols ul.steps-indicator li {
+
+    &.current:after, &.editing:after {
+      border-color: $brand-primary !important;
+      color: $brand-primary !important;
+    }
+
+    &.done:after {
+      border-color: $brand-positive !important;
+      color: $brand-positive !important;
+    }
+
+    &.default:after, &.optional:after {
+      border-color: $gray-1 !important;
+      color: $gray-1 !important;
+    }
+  }
+}
diff --git a/src/angular/planit/src/assets/sass/components/_app-chart.scss b/src/angular/planit/src/assets/sass/components/shared/_app-chart.scss
similarity index 100%
rename from src/angular/planit/src/assets/sass/components/_app-chart.scss
rename to src/angular/planit/src/assets/sass/components/shared/_app-chart.scss
diff --git a/src/angular/planit/src/assets/sass/components/shared/_option-dropdown.scss b/src/angular/planit/src/assets/sass/components/shared/_option-dropdown.scss
new file mode 100644
index 000000000..3d60d4113
--- /dev/null
+++ b/src/angular/planit/src/assets/sass/components/shared/_option-dropdown.scss
@@ -0,0 +1,34 @@
+app-option-dropdown {
+
+  .dropdown-toggle .caret {
+    margin-left: 0.8rem;
+  }
+
+  .dropdown-menu {
+    min-width: 32rem;
+  }
+
+  .dropdown-menu > li {
+
+    cursor: pointer;
+
+    &:not(:last-child) {
+      border-bottom: solid 1px $gray-2;
+    }
+
+    & > a.dropdown-item {
+      display: flex;
+      flex-direction: column;
+      white-space: normal;
+
+      & span {
+        white-space: normal;
+      }
+
+      & .dropdown-label {
+        font-size: 18px;
+        font-weight: bold;
+      }
+    }
+  }
+}
diff --git a/src/angular/planit/src/assets/sass/components/_sidebar.scss b/src/angular/planit/src/assets/sass/components/shared/_sidebar.scss
similarity index 100%
rename from src/angular/planit/src/assets/sass/components/_sidebar.scss
rename to src/angular/planit/src/assets/sass/components/shared/_sidebar.scss
diff --git a/src/angular/planit/src/assets/sass/main.scss b/src/angular/planit/src/assets/sass/main.scss
index 2efc65039..c61a9832a 100644
--- a/src/angular/planit/src/assets/sass/main.scss
+++ b/src/angular/planit/src/assets/sass/main.scss
@@ -42,7 +42,12 @@
  * * * */
 @import
   'components/indicators/model-modal',
+  'components/shared/app-chart',
+  'components/shared/option-dropdown',
+  'components/shared/sidebar',
   'components/alert',
+  'components/archwizard',
+  'components/app-wizard',
   'components/button',
   'components/card',
   'components/dropdown',
@@ -55,14 +60,12 @@
   'components/modal',
   'components/navigation-primary',
   'components/popover',
-  'components/sidebar',
   'components/slider',
   'components/footer',
   'components/table',
   'components/tooltip',
   'components/chart',
   'components/timeslider',
-  'components/app-chart',
   'components/app-indicator-chart',
   'components/va-risk-popover',
   'components/va-tooltip';