diff --git a/src/components.d.ts b/src/components.d.ts
index 0895eb47a..f4e2b760d 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -16,23 +16,11 @@ import {
 } from 'types/Service';
 import {
   Option,
-  Value,
 } from 'types/Select';
 
 
 export namespace Components {
 
-  interface CustomPlanFeature {
-    'feature': Catalog.ExpandedFeature;
-    'planLabel': string;
-    'selectedValue': string;
-  }
-  interface CustomPlanFeatureAttributes extends StencilHTMLAttributes {
-    'feature'?: Catalog.ExpandedFeature;
-    'planLabel'?: string;
-    'selectedValue'?: string;
-  }
-
   interface FeaturedService {
     'logo': string;
     'name': string;
@@ -167,52 +155,53 @@ export namespace Components {
   }
 
   interface MfSelect {
+    'defaultValue'?: string;
     'name': string;
-    'onChange': (e: UIEvent) => void;
     'options': Option[];
     'required'?: boolean;
-    'selectedValue'?: Value;
   }
   interface MfSelectAttributes extends StencilHTMLAttributes {
+    'defaultValue'?: string;
     'name'?: string;
-    'onChange'?: (e: UIEvent) => void;
+    'onOnInputChange'?: (event: CustomEvent) => void;
     'options'?: Option[];
     'required'?: boolean;
-    'selectedValue'?: Value;
   }
 
   interface MfSlider {
+    'defaultValue'?: number;
     'error'?: string;
     'increment': number;
     'max': number;
     'min': number;
     'name': string;
-    'onChange': (e: Event) => void;
-    'selectedValue': number;
     'suffix': string;
   }
   interface MfSliderAttributes extends StencilHTMLAttributes {
+    'defaultValue'?: number;
     'error'?: string;
     'increment'?: number;
     'max'?: number;
     'min'?: number;
     'name'?: string;
-    'onChange'?: (e: Event) => void;
-    'selectedValue'?: number;
+    'onOnInputChange'?: (event: CustomEvent) => void;
     'suffix'?: string;
   }
 
   interface MfToggle {
     'ariaLabelledby'?: string;
+    'defaultValue'?: boolean;
     'disabled'?: boolean;
     'label'?: string;
     'name': string;
   }
   interface MfToggleAttributes extends StencilHTMLAttributes {
     'ariaLabelledby'?: string;
+    'defaultValue'?: boolean;
     'disabled'?: boolean;
     'label'?: string;
     'name'?: string;
+    'onOnInputChange'?: (event: CustomEvent) => void;
   }
 
   interface PlanDetails {
@@ -291,7 +280,6 @@ export namespace Components {
 
 declare global {
   interface StencilElementInterfaces {
-    'CustomPlanFeature': Components.CustomPlanFeature;
     'FeaturedService': Components.FeaturedService;
     'ImageGallery': Components.ImageGallery;
     'LinkButton': Components.LinkButton;
@@ -317,7 +305,6 @@ declare global {
   }
 
   interface StencilIntrinsicElements {
-    'custom-plan-feature': Components.CustomPlanFeatureAttributes;
     'featured-service': Components.FeaturedServiceAttributes;
     'image-gallery': Components.ImageGalleryAttributes;
     'link-button': Components.LinkButtonAttributes;
@@ -343,12 +330,6 @@ declare global {
   }
 
 
-  interface HTMLCustomPlanFeatureElement extends Components.CustomPlanFeature, HTMLStencilElement {}
-  var HTMLCustomPlanFeatureElement: {
-    prototype: HTMLCustomPlanFeatureElement;
-    new (): HTMLCustomPlanFeatureElement;
-  };
-
   interface HTMLFeaturedServiceElement extends Components.FeaturedService, HTMLStencilElement {}
   var HTMLFeaturedServiceElement: {
     prototype: HTMLFeaturedServiceElement;
@@ -482,7 +463,6 @@ declare global {
   };
 
   interface HTMLElementTagNameMap {
-    'custom-plan-feature': HTMLCustomPlanFeatureElement
     'featured-service': HTMLFeaturedServiceElement
     'image-gallery': HTMLImageGalleryElement
     'link-button': HTMLLinkButtonElement
@@ -508,7 +488,6 @@ declare global {
   }
 
   interface ElementTagNameMap {
-    'custom-plan-feature': HTMLCustomPlanFeatureElement;
     'featured-service': HTMLFeaturedServiceElement;
     'image-gallery': HTMLImageGalleryElement;
     'link-button': HTMLLinkButtonElement;
diff --git a/src/components/custom-plan-feature/custom-plan-feature.tsx b/src/components/custom-plan-feature/custom-plan-feature.tsx
deleted file mode 100644
index 1bdb55409..000000000
--- a/src/components/custom-plan-feature/custom-plan-feature.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Component, Prop, FunctionalComponent } from '@stencil/core';
-import { FEATURE_CHANGE } from '../../global/events';
-import { $ } from '../../utils/currency';
-
-const STRING = 'string';
-const NUMBER = 'number';
-const BOOLEAN = 'boolean';
-
-interface DropdownProps {
-  name: string;
-  values?: Catalog.FeatureValueDetails[];
-}
-
-interface ToggleProps {
-  name: string;
-  values: Catalog.FeatureValueDetails[];
-}
-
-interface SliderProps {
-  name: string;
-  value?: Catalog.FeatureValueDetails;
-}
-
-const Dropdown: FunctionalComponent<DropdownProps> = ({ name, values }) => {
-  const options = Array.isArray(values)
-    ? values.map(({ cost, label, name: optionName }) => ({
-        label: `${optionName} (${cost ? $(cost) : 'Included'})`,
-        value: label,
-      }))
-    : [];
-
-  return <mf-select name={name} options={options} />;
-};
-
-const Slider: FunctionalComponent<SliderProps> = ({ value, name }) => {
-  let details: Catalog.FeatureNumericDetails = {};
-  if (value && value.numeric_details) details = value.numeric_details;
-  const { min, max, increment, suffix } = details;
-  return <mf-slider name={name} min={min} max={max} suffix={suffix} increment={increment} />;
-};
-
-const Toggle: FunctionalComponent<ToggleProps> = () => {
-  // TODO refactor options into props
-  return <mf-toggle name={name} aria-labelledby={`-name`} />;
-};
-
-@Component({
-  tag: 'custom-plan-feature',
-  scoped: true,
-})
-export class CustomPlanFeature {
-  @Prop() feature: Catalog.ExpandedFeature;
-  @Prop() selectedValue?: string;
-  @Prop() planLabel: string = '';
-
-  get featureID() {
-    return this.feature.label;
-  }
-
-  render() {
-    const { values = [], value } = this.feature;
-
-    switch (this.feature.type) {
-      case STRING:
-        return <Dropdown name={this.featureID} values={values} event-name={FEATURE_CHANGE} />;
-      case NUMBER:
-        return <Slider name={this.featureID} value={value} event-name={FEATURE_CHANGE} />;
-      case BOOLEAN:
-        return <Toggle name={this.featureID} values={values} event-name={FEATURE_CHANGE} />;
-      default:
-        return null;
-    }
-  }
-}
diff --git a/src/components/custom-plan-feature/readme.md b/src/components/custom-plan-feature/readme.md
deleted file mode 100644
index 8afd41eab..000000000
--- a/src/components/custom-plan-feature/readme.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# custom-plan-feature
-
-
-
-<!-- Auto Generated Below -->
-
-
-## Properties
-
-| Property        | Attribute        | Description | Type              | Default     |
-| --------------- | ---------------- | ----------- | ----------------- | ----------- |
-| `feature`       | --               |             | `ExpandedFeature` | `undefined` |
-| `planLabel`     | `plan-label`     |             | `string`          | `''`        |
-| `selectedValue` | `selected-value` |             | `string`          | `undefined` |
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/mf-select/mf-select.tsx b/src/components/mf-select/mf-select.tsx
index 2793583d5..b20d097db 100644
--- a/src/components/mf-select/mf-select.tsx
+++ b/src/components/mf-select/mf-select.tsx
@@ -1,5 +1,5 @@
-import { Component, Prop, Event, EventEmitter } from '@stencil/core';
-import { Option, Value } from 'types/Select';
+import { Component, Prop, Event, EventEmitter, Watch } from '@stencil/core';
+import { Option } from 'types/Select';
 
 @Component({
   tag: 'mf-select',
@@ -7,25 +7,26 @@ import { Option, Value } from 'types/Select';
   scoped: true,
 })
 export class MfSelect {
-  @Prop() eventName?: string;
+  @Prop() defaultValue?: string;
   @Prop() name: string;
   @Prop() options: Option[] = [];
   @Prop() required?: boolean;
-  @Prop() selectedValue?: Value;
-  @Event({ eventName: this.eventName }) onChange: EventEmitter;
-
-  private onChangeHandler(e: Event) {
-    console.log('changed');
-    if (!e.target || !this.eventName) return;
-    const el = e.target as HTMLSelectElement;
-    this.onChange.emit({ name: el.getAttribute('name'), value: el.value });
+  @Event() onInputChange: EventEmitter;
+  @Watch('defaultValue') watchHandler(newVal: string) {
+    this.onInputChange.emit({ name: this.name, value: newVal });
   }
 
+  onChangeHandler = (e: Event) => {
+    if (!e.target) return;
+    const { value } = e.target as HTMLSelectElement;
+    this.onInputChange.emit({ name: this.name, value });
+  };
+
   render() {
     return (
       <select name={this.name} required={this.required} onChange={this.onChangeHandler}>
         {this.options.map(({ label, value }) => (
-          <option value={value} selected={this.selectedValue === value}>
+          <option value={value} selected={value === this.defaultValue}>
             {label}
           </option>
         ))}
diff --git a/src/components/mf-select/readme.md b/src/components/mf-select/readme.md
index 4d827311d..32e8241a0 100644
--- a/src/components/mf-select/readme.md
+++ b/src/components/mf-select/readme.md
@@ -7,20 +7,19 @@
 
 ## Properties
 
-| Property        | Attribute        | Description | Type                            | Default     |
-| --------------- | ---------------- | ----------- | ------------------------------- | ----------- |
-| `eventName`     | `event-name`     |             | `string \| undefined`           | `undefined` |
-| `name`          | `name`           |             | `string`                        | `undefined` |
-| `options`       | --               |             | `Option[]`                      | `[]`        |
-| `required`      | `required`       |             | `boolean \| undefined`          | `undefined` |
-| `selectedValue` | `selected-value` |             | `number \| string \| undefined` | `undefined` |
+| Property       | Attribute       | Description | Type                   | Default     |
+| -------------- | --------------- | ----------- | ---------------------- | ----------- |
+| `defaultValue` | `default-value` |             | `string \| undefined`  | `undefined` |
+| `name`         | `name`          |             | `string`               | `undefined` |
+| `options`      | --              |             | `Option[]`             | `[]`        |
+| `required`     | `required`      |             | `boolean \| undefined` | `undefined` |
 
 
 ## Events
 
-| Event      | Description | Type                |
-| ---------- | ----------- | ------------------- |
-| `onChange` |             | `CustomEvent<void>` |
+| Event           | Description | Type                |
+| --------------- | ----------- | ------------------- |
+| `onInputChange` |             | `CustomEvent<void>` |
 
 
 ----------------------------------------------
diff --git a/src/components/mf-slider/mf-slider.tsx b/src/components/mf-slider/mf-slider.tsx
index 6f24fb37d..9364806e2 100644
--- a/src/components/mf-slider/mf-slider.tsx
+++ b/src/components/mf-slider/mf-slider.tsx
@@ -1,4 +1,4 @@
-import { Component, Prop, Event, EventEmitter } from '@stencil/core';
+import { Component, Prop, Event, EventEmitter, Watch } from '@stencil/core';
 
 @Component({
   tag: 'mf-slider',
@@ -6,28 +6,33 @@ import { Component, Prop, Event, EventEmitter } from '@stencil/core';
   scoped: true,
 })
 export class MfSlider {
+  @Prop() defaultValue?: number;
   @Prop() error?: string;
-  @Prop() eventName?: string;
   @Prop() increment: number = 1;
   @Prop() max: number;
   @Prop() min: number = 0;
   @Prop() name: string = '';
-  @Prop() selectedValue: number;
   @Prop() suffix: string = '';
-  @Event({ eventName: this.eventName }) onChange: EventEmitter;
-
-  private onChangeHandler(e: Event) {
-    if (!e.target || !this.eventName) return;
-    const el = e.target as HTMLInputElement;
-    this.onChange.emit({ name: el.getAttribute('name'), value: parseInt(el.value, 10) });
+  @Event() onInputChange: EventEmitter;
+  @Watch('defaultValue') watchHandler(newVal: number) {
+    this.onInputChange.emit({ name: this.name, value: newVal });
   }
 
+  onChangeHandler = (e: Event) => {
+    if (!e.target) return;
+    const { value } = e.target as HTMLInputElement;
+    this.onInputChange.emit({
+      name: this.name,
+      value: parseInt(value, 10),
+    });
+  };
+
   get positionCount() {
     return (this.max - this.min) / this.increment;
   }
 
   render() {
-    const value = this.selectedValue || this.min;
+    const value = this.defaultValue || this.min;
     return (
       <div class="container">
         {this.positionCount < 500 ? (
diff --git a/src/components/mf-slider/readme.md b/src/components/mf-slider/readme.md
index 14abde81f..2ca50c1cc 100644
--- a/src/components/mf-slider/readme.md
+++ b/src/components/mf-slider/readme.md
@@ -7,23 +7,22 @@
 
 ## Properties
 
-| Property        | Attribute        | Description | Type                  | Default     |
-| --------------- | ---------------- | ----------- | --------------------- | ----------- |
-| `error`         | `error`          |             | `string \| undefined` | `undefined` |
-| `eventName`     | `event-name`     |             | `string \| undefined` | `undefined` |
-| `increment`     | `increment`      |             | `number`              | `1`         |
-| `max`           | `max`            |             | `number`              | `undefined` |
-| `min`           | `min`            |             | `number`              | `0`         |
-| `name`          | `name`           |             | `string`              | `''`        |
-| `selectedValue` | `selected-value` |             | `number`              | `undefined` |
-| `suffix`        | `suffix`         |             | `string`              | `''`        |
+| Property       | Attribute       | Description | Type                  | Default     |
+| -------------- | --------------- | ----------- | --------------------- | ----------- |
+| `defaultValue` | `default-value` |             | `number \| undefined` | `undefined` |
+| `error`        | `error`         |             | `string \| undefined` | `undefined` |
+| `increment`    | `increment`     |             | `number`              | `1`         |
+| `max`          | `max`           |             | `number`              | `undefined` |
+| `min`          | `min`           |             | `number`              | `0`         |
+| `name`         | `name`          |             | `string`              | `''`        |
+| `suffix`       | `suffix`        |             | `string`              | `''`        |
 
 
 ## Events
 
-| Event      | Description | Type                |
-| ---------- | ----------- | ------------------- |
-| `onChange` |             | `CustomEvent<void>` |
+| Event           | Description | Type                |
+| --------------- | ----------- | ------------------- |
+| `onInputChange` |             | `CustomEvent<void>` |
 
 
 ----------------------------------------------
diff --git a/src/components/mf-toggle/mf-toggle.tsx b/src/components/mf-toggle/mf-toggle.tsx
index 09a8ae10d..7f7b83854 100644
--- a/src/components/mf-toggle/mf-toggle.tsx
+++ b/src/components/mf-toggle/mf-toggle.tsx
@@ -1,4 +1,4 @@
-import { Component, Prop, Event, EventEmitter } from '@stencil/core';
+import { Component, Prop, Event, EventEmitter, Watch } from '@stencil/core';
 
 @Component({
   tag: 'mf-toggle',
@@ -7,18 +7,24 @@ import { Component, Prop, Event, EventEmitter } from '@stencil/core';
 })
 export class MfToggle {
   @Prop() ariaLabelledby?: string;
+  @Prop() defaultValue?: boolean;
   @Prop() disabled?: boolean;
-  @Prop() eventName?: string;
   @Prop() label?: string;
   @Prop() name: string = '';
-  @Event({ eventName: this.eventName }) onChange: EventEmitter;
-
-  private onChangeHandler(e: Event) {
-    if (!e.target || !this.eventName) return;
-    const el = e.target as HTMLInputElement;
-    this.onChange.emit({ name: el.getAttribute('name'), value: el.checked === true });
+  @Event() onInputChange: EventEmitter;
+  @Watch('defaultValue') watchHandler(newVal: boolean) {
+    this.onInputChange.emit({ name: this.name, value: newVal });
   }
 
+  onChangeHandler = (e: Event) => {
+    if (!e.target) return;
+    const { checked } = e.target as HTMLInputElement;
+    this.onInputChange.emit({
+      name: this.name,
+      value: checked === true,
+    });
+  };
+
   render() {
     return (
       <label class="wrapper">
@@ -27,6 +33,7 @@ export class MfToggle {
           disabled={this.disabled}
           name={this.name}
           onChange={this.onChangeHandler}
+          checked={this.defaultValue}
           type="checkbox"
         />
         <div class="toggle" />
diff --git a/src/components/mf-toggle/readme.md b/src/components/mf-toggle/readme.md
index 4439a0533..8f909c954 100644
--- a/src/components/mf-toggle/readme.md
+++ b/src/components/mf-toggle/readme.md
@@ -10,17 +10,17 @@
 | Property         | Attribute         | Description | Type                   | Default     |
 | ---------------- | ----------------- | ----------- | ---------------------- | ----------- |
 | `ariaLabelledby` | `aria-labelledby` |             | `string \| undefined`  | `undefined` |
+| `defaultValue`   | `default-value`   |             | `boolean \| undefined` | `undefined` |
 | `disabled`       | `disabled`        |             | `boolean \| undefined` | `undefined` |
-| `eventName`      | `event-name`      |             | `string \| undefined`  | `undefined` |
 | `label`          | `label`           |             | `string \| undefined`  | `undefined` |
 | `name`           | `name`            |             | `string`               | `''`        |
 
 
 ## Events
 
-| Event      | Description | Type                |
-| ---------- | ----------- | ------------------- |
-| `onChange` |             | `CustomEvent<void>` |
+| Event           | Description | Type                |
+| --------------- | ----------- | ------------------- |
+| `onInputChange` |             | `CustomEvent<void>` |
 
 
 ----------------------------------------------
diff --git a/src/components/plan-details/plan-details.e2e.ts b/src/components/plan-details/plan-details.e2e.ts
new file mode 100644
index 000000000..14d2c94be
--- /dev/null
+++ b/src/components/plan-details/plan-details.e2e.ts
@@ -0,0 +1,8 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe(`<plan-details>`, () => {
+  it('sets its initial features correctly', async () => {
+    const page = await newE2EPage({ html: `<plan-details />` });
+    await page.$eval('plan-details', (elm: any) => {});
+  });
+});
diff --git a/src/components/plan-details/plan-details.tsx b/src/components/plan-details/plan-details.tsx
index ba3352abf..b091cb19b 100644
--- a/src/components/plan-details/plan-details.tsx
+++ b/src/components/plan-details/plan-details.tsx
@@ -1,6 +1,5 @@
 import { Component, Prop, State, Listen } from '@stencil/core';
 import { $ } from '../../utils/currency';
-import { FEATURE_CHANGE } from '../../global/events';
 
 const RESOURCE_CREATE = '/resource/create?product='; // TODO get actual url
 const NUMBER_FEATURE_COIN = 10000000; // Numeric features are a ten-millionth of a cent, because floats stink
@@ -10,14 +9,12 @@ const YES = 'Yes';
 const featureCost = (number: number) => $(number / NUMBER_FEATURE_COIN);
 const singularize = (word: string) => word.replace(/s$/i, '');
 
-export const tagName = 'plan-details';
-
 interface UserFeature {
   [key: string]: string | number | boolean;
 }
 
 @Component({
-  tag: tagName,
+  tag: 'plan-details',
   styleUrl: 'plan-details.css',
   shadow: true,
 })
@@ -25,8 +22,16 @@ export class PlanDetails {
   @Prop() plan: Catalog.ExpandedPlan;
   @Prop() product: Catalog.ExpandedProduct;
   @State() features: UserFeature;
-  @Listen(FEATURE_CHANGE) handleFeatureChange(e: CustomEvent) {
-    console.log(e);
+  @Listen('onInputChange') handleFeatureChange({ detail }: CustomEvent) {
+    const { name, value } = detail;
+    if (Object.keys(this.features).includes(name)) {
+      // Return new object to update rendering
+      this.features = {
+        ...this.features,
+        [name]: value,
+      };
+      console.log(this.features);
+    }
   }
 
   componentWillLoad() {
@@ -39,7 +44,7 @@ export class PlanDetails {
     type,
     value,
     value_string,
-  }: Catalog.ExpandedFeature): string | undefined {
+  }: Catalog.ExpandedFeature): string | number | undefined {
     if (!value) return undefined;
 
     if (measurable && value.numeric_details && value.numeric_details.cost_ranges) {
@@ -93,28 +98,80 @@ export class PlanDetails {
     if (!this.plan.body.expanded_features) return {};
 
     return this.plan.body.expanded_features.reduce((obj, feature) => {
-      // 1. If not customizable, don’t worry about it
-      if (!feature.customizable) return obj;
+      // If not customizable, don’t worry about it
+      if (!feature.customizable || !feature.value) return obj;
 
-      // 2. Grab feature name
-      const name = feature.label;
+      if (feature.type === 'boolean')
+        return { ...obj, [feature.label]: this.getBooleanDefaultValue(feature.value) };
+      if (feature.type === 'number')
+        return { ...obj, [feature.label]: this.getNumberDefaultValue(feature.value) };
+      if (feature.type === 'string')
+        return { ...obj, [feature.label]: this.getStringDefaultValue(feature.value) };
 
-      // 3. Grab the initial value, which should be declared in the schema
-      let value = feature.value_string; // string
-      if (feature.value && feature.value.label) value = feature.value.label; // boolean
-      if (feature.value && feature.value.numeric_details)
-        value = feature.value.numeric_details.min || 0; // number
-
-      return { ...obj, [name]: value };
+      return obj;
     }, {});
   }
 
-  selectedValue(feature: Catalog.ExpandedFeature): string | undefined {
-    return feature.value;
+  // TODO: extract these into utils/ to be tested
+  getBooleanDefaultValue(value: Catalog.FeatureValueDetails): boolean {
+    return value.label === 'true' || false;
+  }
+  getStringDefaultValue(value: Catalog.FeatureValueDetails): string {
+    return value.label;
+  }
+  getNumberDefaultValue(value: Catalog.FeatureValueDetails): number {
+    if (value.numeric_details && typeof value.numeric_details.min === 'number') {
+      return value.numeric_details.min;
+    }
+    return 0;
   }
 
   customFeatureValue(feature: Catalog.ExpandedFeature) {
-    return <custom-plan-feature feature={feature} selectedValue={this.selectedValue(feature)} />;
+    if (!feature.value) return null;
+
+    switch (feature.type) {
+      case 'string': {
+        const options = Array.isArray(feature.values)
+          ? feature.values.map(({ cost, label, name: optionName }) => ({
+              label: `${optionName} (${cost ? $(cost) : 'Included'})`,
+              value: label,
+            }))
+          : [];
+        return (
+          <mf-select
+            name={feature.label}
+            options={options}
+            defaultValue={this.getStringDefaultValue(feature.value)}
+          />
+        );
+      }
+      case 'number': {
+        const details = (feature.value && feature.value.numeric_details) || {};
+        const { min, max, increment, suffix } = details;
+        return (
+          <mf-slider
+            defaultValue={this.getNumberDefaultValue(feature.value)}
+            max={max}
+            min={min}
+            name={feature.label}
+            suffix={suffix}
+            increment={increment}
+          />
+        );
+      }
+      case 'boolean': {
+        return (
+          <mf-toggle
+            aria-labelledby={`-name`}
+            defaultValue={this.getBooleanDefaultValue(feature.value)}
+            name={feature.label}
+          />
+        );
+      }
+      default: {
+        return null;
+      }
+    }
   }
 
   render() {
@@ -166,7 +223,6 @@ export class PlanDetails {
             })}
           </dl>
         </div>
-        <code>Features selected: {JSON.stringify(this.features)}</code>
         <footer class="footer">
           <div class="cost" itemprop="price">
             {$(cost)}&nbsp;<small>/ mo</small>
diff --git a/src/components/plan-details/readme.md b/src/components/plan-details/readme.md
index 49c2f4409..bc97e0523 100644
--- a/src/components/plan-details/readme.md
+++ b/src/components/plan-details/readme.md
@@ -7,10 +7,10 @@
 
 ## Properties
 
-| Property  | Attribute | Description | Type      | Default     |
-| --------- | --------- | ----------- | --------- | ----------- |
-| `plan`    | --        |             | `Plan`    | `undefined` |
-| `product` | --        |             | `Product` | `undefined` |
+| Property  | Attribute | Description | Type              | Default     |
+| --------- | --------- | ----------- | ----------------- | ----------- |
+| `plan`    | --        |             | `ExpandedPlan`    | `undefined` |
+| `product` | --        |             | `ExpandedProduct` | `undefined` |
 
 
 ----------------------------------------------
diff --git a/src/components/plan-menu/readme.md b/src/components/plan-menu/readme.md
index e388eabb7..e1883593c 100644
--- a/src/components/plan-menu/readme.md
+++ b/src/components/plan-menu/readme.md
@@ -7,11 +7,11 @@
 
 ## Properties
 
-| Property         | Attribute          | Description | Type       | Default     |
-| ---------------- | ------------------ | ----------- | ---------- | ----------- |
-| `plans`          | --                 |             | `Plan[]`   | `[]`        |
-| `selectPlan`     | --                 |             | `Function` | `undefined` |
-| `selectedPlanId` | `selected-plan-id` |             | `string`   | `undefined` |
+| Property         | Attribute          | Description | Type             | Default     |
+| ---------------- | ------------------ | ----------- | ---------------- | ----------- |
+| `plans`          | --                 |             | `ExpandedPlan[]` | `[]`        |
+| `selectPlan`     | --                 |             | `Function`       | `undefined` |
+| `selectedPlanId` | `selected-plan-id` |             | `string`         | `undefined` |
 
 
 ----------------------------------------------
diff --git a/src/components/plan-selector/readme.md b/src/components/plan-selector/readme.md
index 5d328e737..fec38c79f 100644
--- a/src/components/plan-selector/readme.md
+++ b/src/components/plan-selector/readme.md
@@ -7,10 +7,10 @@ Hello
 
 ## Properties
 
-| Property  | Attribute | Description | Type      | Default     |
-| --------- | --------- | ----------- | --------- | ----------- |
-| `plans`   | --        |             | `Plan[]`  | `undefined` |
-| `product` | --        |             | `Product` | `undefined` |
+| Property  | Attribute | Description | Type              | Default     |
+| --------- | --------- | ----------- | ----------------- | ----------- |
+| `plans`   | --        |             | `ExpandedPlan[]`  | `undefined` |
+| `product` | --        |             | `ExpandedProduct` | `undefined` |
 
 
 ----------------------------------------------
diff --git a/src/components/product-details/readme.md b/src/components/product-details/readme.md
index fe477b5bd..41a5df82f 100644
--- a/src/components/product-details/readme.md
+++ b/src/components/product-details/readme.md
@@ -7,9 +7,9 @@
 
 ## Properties
 
-| Property  | Attribute | Description | Type      | Default     |
-| --------- | --------- | ----------- | --------- | ----------- |
-| `product` | --        |             | `Product` | `undefined` |
+| Property  | Attribute | Description | Type              | Default     |
+| --------- | --------- | ----------- | ----------------- | ----------- |
+| `product` | --        |             | `ExpandedProduct` | `undefined` |
 
 
 ----------------------------------------------
diff --git a/src/components/product-page/readme.md b/src/components/product-page/readme.md
index 117a1cdf2..fcd4b40d2 100644
--- a/src/components/product-page/readme.md
+++ b/src/components/product-page/readme.md
@@ -7,9 +7,9 @@
 
 ## Properties
 
-| Property  | Attribute | Description | Type      | Default     |
-| --------- | --------- | ----------- | --------- | ----------- |
-| `product` | --        |             | `Product` | `undefined` |
+| Property  | Attribute | Description | Type              | Default     |
+| --------- | --------- | ----------- | ----------------- | ----------- |
+| `product` | --        |             | `ExpandedProduct` | `undefined` |
 
 
 ----------------------------------------------
diff --git a/src/global/events.ts b/src/global/events.ts
deleted file mode 100644
index 94ebf8cf6..000000000
--- a/src/global/events.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const FEATURE_CHANGE = 'FEATURE_CHANGE';