diff --git a/packages/web-components/fast-components-msft/README.md b/packages/web-components/fast-components-msft/README.md
index 7d58a8f8cc0..5d065fa2cee 100644
--- a/packages/web-components/fast-components-msft/README.md
+++ b/packages/web-components/fast-components-msft/README.md
@@ -1,10 +1,12 @@
 # FAST Components MSFT
 
-## Development
+A set of React components which implements the Microsoft styling.
 
-To start the component development environment, run `yarn start`.
+## Installation
 
-### Known issue with Storybook site hot-reloading
+`npm i --save @microsoft/fast-components-msft`
+
+### Known issue with Storybook site hot-reloading during development
 
 Storybook will watch modules for changes and hot-reload the module when necessary. This is usually great but poses a problem when the module being hot-reloaded defines a custom element. A custom element name can only be defined by the `CustomElementsRegistry` once, so reloading a module that defines a custom element will attempt to re-register the custom element name, throwing an error because the name has already been defined. This error will manifest with the following message:
 `Failed to execute 'define' on 'CustomElementRegistry': the name "my-custom-element-name" has already been used with this registry`
diff --git a/packages/web-components/fast-components-msft/src/anchor/anchor.styles.ts b/packages/web-components/fast-components-msft/src/anchor/anchor.styles.ts
index 050ca5ab168..fb633eb59f3 100644
--- a/packages/web-components/fast-components-msft/src/anchor/anchor.styles.ts
+++ b/packages/web-components/fast-components-msft/src/anchor/anchor.styles.ts
@@ -28,7 +28,7 @@ import {
     LightweightButtonStyles,
     OutlineButtonStyles,
     StealthButtonStyles,
-} from "../styles.js";
+} from "../styles/index.js";
 
 export const AnchorStyles = css`
     ${BaseButtonStyles}
diff --git a/packages/web-components/fast-components-msft/src/button/button.styles.ts b/packages/web-components/fast-components-msft/src/button/button.styles.ts
index d0b67cc0ccf..20341b868b7 100644
--- a/packages/web-components/fast-components-msft/src/button/button.styles.ts
+++ b/packages/web-components/fast-components-msft/src/button/button.styles.ts
@@ -32,7 +32,7 @@ import {
     LightweightButtonStyles,
     OutlineButtonStyles,
     StealthButtonStyles,
-} from "../styles.js";
+} from "../styles/index.js";
 
 export const ButtonStyles = css`
     ${BaseButtonStyles}
diff --git a/packages/web-components/fast-components-msft/src/index.ts b/packages/web-components/fast-components-msft/src/index.ts
index 7c476ea364e..4f08b2dc1b6 100644
--- a/packages/web-components/fast-components-msft/src/index.ts
+++ b/packages/web-components/fast-components-msft/src/index.ts
@@ -1,18 +1,18 @@
-export * from "./anchor.js";
-export * from "./badge.js";
-export * from "./button.js";
-export * from "./card.js";
-export * from "./checkbox.js";
-export * from "./design-system-provider.js";
-export * from "./dialog.js";
-export * from "./divider.js";
-export * from "./flipper.js";
-export * from "./progress.js";
-export * from "./radio.js";
-export * from "./radio-group.js";
-export * from "./slider.js";
-export * from "./slider-label.js";
-export * from "./switch.js";
-export * from "./tabs.js";
-export * from "./text-area.js";
-export * from "./text-field.js";
+export * from "./anchor/index.js";
+export * from "./badge/index.js";
+export * from "./button/index.js";
+export * from "./card/index.js";
+export * from "./checkbox/index.js";
+export * from "./design-system-provider/index.js";
+export * from "./dialog/index.js";
+export * from "./divider/index.js";
+export * from "./flipper/index.js";
+export * from "./progress/index.js";
+export * from "./radio/index.js";
+export * from "./radio-group/index.js";
+export * from "./slider/index.js";
+export * from "./slider-label/index.js";
+export * from "./switch/index.js";
+export * from "./tabs/index.js";
+export * from "./text-area/index.js";
+export * from "./text-field/index.js";
diff --git a/packages/web-components/fast-components-msft/src/progress/index.ts b/packages/web-components/fast-components-msft/src/progress/index.ts
index 56d042021eb..602da873aec 100644
--- a/packages/web-components/fast-components-msft/src/progress/index.ts
+++ b/packages/web-components/fast-components-msft/src/progress/index.ts
@@ -1,2 +1,2 @@
-export * from "./progress.js";
-export * from "./progress-ring.js";
+export * from "./progress/index.js";
+export * from "./progress-ring/index.js";
diff --git a/packages/web-components/fast-components-msft/src/styles/index.ts b/packages/web-components/fast-components-msft/src/styles/index.ts
index aecb3097068..b98781dd98d 100644
--- a/packages/web-components/fast-components-msft/src/styles/index.ts
+++ b/packages/web-components/fast-components-msft/src/styles/index.ts
@@ -1 +1 @@
-export * from "./patterns.js";
+export * from "./patterns/index.js";
diff --git a/packages/web-components/fast-components-msft/src/tabs/index.ts b/packages/web-components/fast-components-msft/src/tabs/index.ts
index 70263e2362b..cd95802e849 100644
--- a/packages/web-components/fast-components-msft/src/tabs/index.ts
+++ b/packages/web-components/fast-components-msft/src/tabs/index.ts
@@ -8,5 +8,5 @@ import { TabsStyles as styles } from "./tabs.styles.js";
     styles,
 })
 export class MSFTTabs extends Tabs {}
-export * from "./tab";
-export * from "./tab-panel";
+export * from "./tab/index.js";
+export * from "./tab-panel/index.js";