diff --git a/changelogs/DP-16804.yml b/changelogs/DP-16804.yml
index 368b9a9e9c..b75c607cf7 100644
--- a/changelogs/DP-16804.yml
+++ b/changelogs/DP-16804.yml
@@ -1,5 +1,5 @@
 Changed:
   - project: Patternlab
     component: UtilityNav
-    description: Change the state organizations menu from a button to a link directly to the page. #882
+    description: Change the state organizations menu from a button to a link directly to the page. (#882)
     issue: DP-16804
diff --git a/changelogs/DP-17253.yml b/changelogs/DP-17253.yml
index 499fdb5103..ea1132f96b 100644
--- a/changelogs/DP-17253.yml
+++ b/changelogs/DP-17253.yml
@@ -1,5 +1,5 @@
 Added:
   - project: React
     component: Color
-    description: Addded Color stories and color gradients. #909
+    description: Addded Color stories and color gradients. (#909)
     issue: DP-17253
diff --git a/changelogs/DP-17320.yml b/changelogs/DP-17320.yml
index 20af7d5b7d..57b99cb68d 100644
--- a/changelogs/DP-17320.yml
+++ b/changelogs/DP-17320.yml
@@ -1,6 +1,6 @@
 Changed:
   - project: React
     component: Storybook
-    description: Config storybook to add Mayflower theme. #915
+    description: Config storybook to add Mayflower theme. (#915)
     issue: DP-17320
     impact: Patch
diff --git a/changelogs/DP-17338.yml b/changelogs/DP-17338.yml
new file mode 100644
index 0000000000..82c8980345
--- /dev/null
+++ b/changelogs/DP-17338.yml
@@ -0,0 +1,11 @@
+Changed:
+  - project: React
+    component: Storybook
+    description: Render welcome page to Mayflower-react. (#916)
+    issue: DP-17338
+    impact: Patch
+  - project: React
+    component: Storybook
+    description: Display `Color` in category "Brand". (#916)
+    issue: DP-17338
+    impact: Patch
diff --git a/react/.storybook/config.js b/react/.storybook/config.js
index fe89aec6f7..7a4456cdad 100644
--- a/react/.storybook/config.js
+++ b/react/.storybook/config.js
@@ -11,10 +11,13 @@ addParameters({
     showPanel: true // show the code panel by default
   },
 });
-// automatically import all files ending in *.stories.js
-const req = require.context('../src', true, /.stories.js$/);
+
 function loadStories() {
-  req.keys().forEach((filename) => {
+  // load index story first
+  require('../src/index.stories.js');
+  // automatically import all files ending in *.stories.js
+  const req = require.context('../src', true, /.stories.js$/);
+  req.keys().sort().forEach((filename) => {
     req(filename);
   });
   addDecorator(
diff --git a/react/README.md b/react/README.md
index 97df6723f4..fea6552cbb 100644
--- a/react/README.md
+++ b/react/README.md
@@ -1,24 +1,32 @@
 # Mayflower-React
 [![npm package][npm-badge]][npm]
 
-Mayflower-react is a React component library under the enterprise design system for the Commonwealth of Massachusetts. Mayflower-react is a published npm package [@massds/mayflower-react][npm] that is dependent on static assets generate by [Mayflower PatternLab][mayflower-github]. Mayflower PatternLab is published as a dependency npm package [@massds/mayflower][mayflower-npm]. Refer to [Mayflower PatternLab Static Site][mayflower] for a complete list of its UI components.
+Mayflower-react is a React component library under the [enterprise design system for the Commonwealth of Massachusetts][mayflower-doc].
 
-# How to use Mayflower-React in your Project!
+- **Live demo:** [mayflower-react storybook][react-storybook]
+- **NPM package:** [@massds/mayflower-react][npm].
+- **Codebase:** [Mayflower monorepo][mayflower-github] `react` subdirectory
+  >[Mayflower monorepo][mayflower-github] comprised of [Mayflower documentation][mayflower-doc], two component libraries — [Mayflower React][react-storybook] and [Mayflower PatternLab][patternLab], and their [shared assets][shared-assets].
+  > Refer to [Mayflower PatternLab Static Site][patternlab] for the set of UI components consumed in Mass.gov.
 
-## Quick start
 
+## Using Mayflower-React in Your Project
 1. Install mayflower-react into your project as a dependency.
 `npm i @massds/mayflower-react --save`
 2. Import components into your App.js
 `import { Button } from '@massds/mayflower-react';`
 3. Render components in JSX
-``<Button info="this will be the tooltip text on hover" text="button" onClick={button clicked()} />``
+`<Button text="Button" onClick={() => console.log('mayflower button clicked!')} />`
 
-For a guide and information on the components included in mayflower-react and there functionality visit our [mayflower-react storybook][mayflower-react]. Click on the Info and Knobs tabs for component prop types, details and options.
+Please note that [@massds/mayflower-react][npm] comes with prebuilt css, svg and other image files. If you are configuring your own Webpack, you might need to add the following loaders to handle these files:
+``npm install --save-dev css-loader svg-inline-loader file-loader``
 
-# Contributing, Releasing, and Developing in Mayflower-React
+You can also kickstart your React project with Mayflower-react referring to the [Mayflower React Starter][react-starter] built with [Create React App](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app).
 
-## Development
+For a guide and information on the components included in mayflower-react and their functionality, visit our [Mayflower React Storybook][react-storybook]. Click on the Info and Knobs tabs for component prop types, details and options.
+
+
+## Mayflower-React Development
 * `npm install`
 * `npm start`: This will run the demo application.
 
@@ -58,7 +66,7 @@ $ ``git add package.json package-lock.json``
 
 $ ``git commit -m 'Added purgecss library'``
 
-## Testing
+## Mayflower-React Testing
 
 #### Production build testing
 
@@ -87,7 +95,7 @@ $ ``source-map-explorer umd/@massds/*.min.js``
 Sometimes it is useful to test a Mayflower React component that has not yet been published to npm. This can be accomplished by using the [``npm link``](https://docs.npmjs.com/cli/link) command.
 
 
-## Release process
+## Mayflower-React Release Process
 
 We are tracking versions of this project in the package.json, which means when cutting a release we expect the main ``"version": "0.30.0"`` to be updated using proper [semantic versioning](https://semver.org/). So if we were releasing a bugfix or other minor improvement we would bump to ``0.30.1``, if we were releasing a new feature we would bump to ``0.31.0``, etc.
 
@@ -104,11 +112,13 @@ We are tracking versions of this project in the package.json, which means when c
 4. $ ``aws cloudfront create-invalidation --distribution-id 	
 [!!PROD_DISTRIBUTION_ID_HERE!!] --paths '/*'`` (Invalidates CloudFront for prod box)
 
-You should see your changes live at [mayflower-react storybook][mayflower-react] within a few minutes!
+You should see your changes live at [mayflower-react storybook][react-storybook] within a few minutes!
 
 [npm-badge]: https://img.shields.io/npm/v/@massds/mayflower-react.png?style=flat-square
 [npm]: https://www.npmjs.com/package/@massds/mayflower-react
-[mayflower-npm]: https://www.npmjs.com/package/@massds/mayflower
 [mayflower-github]: https://github.com/massgov/mayflower
-[mayflower]: https://mayflower.digital.mass.gov
-[mayflower-react]: https://mayflower-react.digital.mass.gov
+[mayflower-doc]: https://www.mass.gov/mayflower
+[react-storybook]: https://mayflower-react.digital.mass.gov
+[react-starter]: https://github.com/massgov/mayflower-react-starter
+[patternlab]: https://mayflower.digital.mass.gov
+[shared-assets]: https://github.com/massgov/mayflower/tree/develop/assets
diff --git a/react/backstop/data/bitmaps_reference/vrt_base_colors_Colors_0_document_0_phone.png b/react/backstop/data/bitmaps_reference/vrt_brandcolors_Colors_0_document_0_phone.png
similarity index 100%
rename from react/backstop/data/bitmaps_reference/vrt_base_colors_Colors_0_document_0_phone.png
rename to react/backstop/data/bitmaps_reference/vrt_brandcolors_Colors_0_document_0_phone.png
diff --git a/react/backstop/data/bitmaps_reference/vrt_base_colors_Colors_0_document_1_tablet.png b/react/backstop/data/bitmaps_reference/vrt_brandcolors_Colors_0_document_1_tablet.png
similarity index 100%
rename from react/backstop/data/bitmaps_reference/vrt_base_colors_Colors_0_document_1_tablet.png
rename to react/backstop/data/bitmaps_reference/vrt_brandcolors_Colors_0_document_1_tablet.png
diff --git a/react/backstop/data/bitmaps_reference/vrt_base_colors_Gradients_Dark_0_document_0_phone.png b/react/backstop/data/bitmaps_reference/vrt_brandcolors_Gradients_Dark_0_document_0_phone.png
similarity index 100%
rename from react/backstop/data/bitmaps_reference/vrt_base_colors_Gradients_Dark_0_document_0_phone.png
rename to react/backstop/data/bitmaps_reference/vrt_brandcolors_Gradients_Dark_0_document_0_phone.png
diff --git a/react/backstop/data/bitmaps_reference/vrt_base_colors_Gradients_Dark_0_document_1_tablet.png b/react/backstop/data/bitmaps_reference/vrt_brandcolors_Gradients_Dark_0_document_1_tablet.png
similarity index 100%
rename from react/backstop/data/bitmaps_reference/vrt_base_colors_Gradients_Dark_0_document_1_tablet.png
rename to react/backstop/data/bitmaps_reference/vrt_brandcolors_Gradients_Dark_0_document_1_tablet.png
diff --git a/react/backstop/data/bitmaps_reference/vrt_base_colors_Gradients_Light_0_document_0_phone.png b/react/backstop/data/bitmaps_reference/vrt_brandcolors_Gradients_Light_0_document_0_phone.png
similarity index 100%
rename from react/backstop/data/bitmaps_reference/vrt_base_colors_Gradients_Light_0_document_0_phone.png
rename to react/backstop/data/bitmaps_reference/vrt_brandcolors_Gradients_Light_0_document_0_phone.png
diff --git a/react/backstop/data/bitmaps_reference/vrt_base_colors_Gradients_Light_0_document_1_tablet.png b/react/backstop/data/bitmaps_reference/vrt_brandcolors_Gradients_Light_0_document_1_tablet.png
similarity index 100%
rename from react/backstop/data/bitmaps_reference/vrt_base_colors_Gradients_Light_0_document_1_tablet.png
rename to react/backstop/data/bitmaps_reference/vrt_brandcolors_Gradients_Light_0_document_1_tablet.png
diff --git a/react/backstop/data/bitmaps_reference/vrt_organisms_TeaserListing_0_document_0_phone.png b/react/backstop/data/bitmaps_reference/vrt_organisms_TeaserListing_0_document_0_phone.png
index 98bf265e7e..71ed3b09c2 100644
Binary files a/react/backstop/data/bitmaps_reference/vrt_organisms_TeaserListing_0_document_0_phone.png and b/react/backstop/data/bitmaps_reference/vrt_organisms_TeaserListing_0_document_0_phone.png differ
diff --git a/react/package-lock.json b/react/package-lock.json
index fe22215e30..d6e0715bf9 100644
--- a/react/package-lock.json
+++ b/react/package-lock.json
@@ -2623,6 +2623,24 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
     },
+    "@primer/css": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/@primer/css/-/css-14.2.0.tgz",
+      "integrity": "sha512-BvBuw0V8ypOFpFhvXRpPWQQ3w/piUMS/Pp/rRg3ddnw0eu2keC2Sj+CzJv3ofsiGoq7juHGfGQlqkOWmSQjXRw==",
+      "dev": true,
+      "requires": {
+        "@primer/octicons": "^9.1.1"
+      }
+    },
+    "@primer/octicons": {
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/@primer/octicons/-/octicons-9.4.0.tgz",
+      "integrity": "sha512-7tAWOTt3Ay3Vkf9XwietC40TV1pxk5PS2DAODsOPnMfMd9Yzm2tfvHu0Q3dcffxGZxu7n5ZM6MFWbr/+4dqSdA==",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4.1.1"
+      }
+    },
     "@reach/router": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@reach/router/-/router-1.2.1.tgz",
@@ -15674,6 +15692,12 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "github-markdown-css": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/github-markdown-css/-/github-markdown-css-3.0.1.tgz",
+      "integrity": "sha512-9G5CIPsHoyk5ObDsb/H4KTi23J8KE1oDd4KYU51qwqeM+lKWAiO7abpSgCkyWswgmSKBiuE7/4f8xUz7f2qAiQ==",
+      "dev": true
+    },
     "glob": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
@@ -19230,6 +19254,15 @@
       "integrity": "sha1-9ebgatdLeU+1tbZpiL9yjvHe2+g=",
       "dev": true
     },
+    "linkify-it": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
+      "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
+      "dev": true,
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "load-json-file": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
@@ -19768,6 +19801,27 @@
         "object-visit": "^1.0.0"
       }
     },
+    "markdown-it": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-10.0.0.tgz",
+      "integrity": "sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==",
+      "dev": true,
+      "requires": {
+        "argparse": "^1.0.7",
+        "entities": "~2.0.0",
+        "linkify-it": "^2.0.0",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz",
+          "integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==",
+          "dev": true
+        }
+      }
+    },
     "markdown-to-jsx": {
       "version": "6.10.2",
       "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-6.10.2.tgz",
@@ -19851,6 +19905,12 @@
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-1.1.4.tgz",
       "integrity": "sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA=="
     },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=",
+      "dev": true
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -24921,6 +24981,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/react-html-parser/-/react-html-parser-2.0.2.tgz",
       "integrity": "sha512-XeerLwCVjTs3njZcgCOeDUqLgNIt/t+6Jgi5/qPsO/krUWl76kWKXMeVs2LhY2gwM6X378DkhLjur0zUQdpz0g==",
+      "dev": true,
       "requires": {
         "htmlparser2": "^3.9.0"
       },
@@ -24928,12 +24989,14 @@
         "domelementtype": {
           "version": "1.3.1",
           "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
-          "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
+          "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
+          "dev": true
         },
         "domhandler": {
           "version": "2.4.2",
           "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
           "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+          "dev": true,
           "requires": {
             "domelementtype": "1"
           }
@@ -24942,6 +25005,7 @@
           "version": "3.10.1",
           "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
           "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
+          "dev": true,
           "requires": {
             "domelementtype": "^1.3.1",
             "domhandler": "^2.3.0",
@@ -24952,9 +25016,10 @@
           }
         },
         "readable-stream": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz",
-          "integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==",
+          "version": "3.5.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.5.0.tgz",
+          "integrity": "sha512-gSz026xs2LfxBPudDuI41V1lka8cxg64E66SGe78zJlsUofOg/yqwezdIcdfwik6B4h8LFmWPA9ef9X3FiNFLA==",
+          "dev": true,
           "requires": {
             "inherits": "^2.0.3",
             "string_decoder": "^1.1.1",
@@ -29860,6 +29925,12 @@
       "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==",
       "dev": true
     },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
+      "dev": true
+    },
     "uglify-js": {
       "version": "3.4.9",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",
diff --git a/react/package.json b/react/package.json
index 6a9f0d55eb..d674ba6c18 100644
--- a/react/package.json
+++ b/react/package.json
@@ -50,7 +50,6 @@
     "react-autowhatever": "^10.2.0",
     "react-character-counter": "^1.0.1",
     "react-compound-slider": "^0.19.2",
-    "react-html-parser": "^2.0.2",
     "react-portal": "^4.2.0",
     "react-scripts": "^2.1.3",
     "react-select": "^1.2.1",
@@ -88,13 +87,16 @@
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-react": "^7.14.3",
     "eslint-plugin-react-hooks": "^1.0.1",
+    "github-markdown-css": "^3.0.1",
+    "markdown-it": "^10.0.0",
     "node-sass-chokidar": "^1.2.2",
     "npm-run-all": "^4.1.2",
     "nwb": "0.23.x",
     "pre-push": "^0.1.1",
     "prop-types": "^15.7.1",
     "react": "16.8.6",
-    "react-dom": "16.9.0"
+    "react-dom": "16.9.0",
+    "react-html-parser": "^2.0.2"
   },
   "homepage": "",
   "license": "MIT",
diff --git a/react/src/components/base/Colors/Colors.stories.js b/react/src/components/base/Colors/Colors.stories.js
index 72d40dc8b5..e235fdda4c 100644
--- a/react/src/components/base/Colors/Colors.stories.js
+++ b/react/src/components/base/Colors/Colors.stories.js
@@ -10,7 +10,7 @@ import ColorGradientsDocs from './ColorGradients.md';
 
 import './styles.css';
 
-storiesOf('base/colors', module)
+storiesOf('brand|colors', module)
   .addDecorator(withKnobs({ escapeHTML: false }))
   .add('Colors', (() => (
     <Fragment>
diff --git a/react/src/index.stories.js b/react/src/index.stories.js
index 98c7712b02..9d1a754134 100644
--- a/react/src/index.stories.js
+++ b/react/src/index.stories.js
@@ -1,3 +1,24 @@
-// @TODO come up with a welcome story
+import React from 'react';
+import ReactHtmlParser from 'react-html-parser';
+import MarkdownIt from 'markdown-it';
+import { storiesOf } from '@storybook/react';
 
 import './index.css';
+import './markdown.css';
+
+import Docs from '../README.md';
+
+const md = new MarkdownIt();
+const result = md.render(Docs);
+
+storiesOf('Welcome🎉|mayflower-react', module)
+  .add('About', (() => (
+    <div className="main-content main-content--two">
+      <div className="page-content">
+        <div className="markdown-body">
+          {ReactHtmlParser(result)}
+        </div>
+      </div>
+    </div>
+  )
+  ));
diff --git a/react/src/markdown.scss b/react/src/markdown.scss
new file mode 100644
index 0000000000..690fb28569
--- /dev/null
+++ b/react/src/markdown.scss
@@ -0,0 +1 @@
+@import '../node_modules/github-markdown-css/github-markdown.css';