diff --git a/ui/react-components/stories/AppSpecialityFilter.stories.js b/ui/react-components/stories/AppSpecialityFilter.stories.js
index beda530abf..974e897611 100644
--- a/ui/react-components/stories/AppSpecialityFilter.stories.js
+++ b/ui/react-components/stories/AppSpecialityFilter.stories.js
@@ -1,8 +1,18 @@
 import React from "react";
 import AppSpecialityFilter from "../components/AppSpecialityFilter/AppSpecialityFilter";
-
-export default { title: "AppointmentListSidePanelTree" };
-
+export default { title: "AppSpecilaityFilter" };
+import { withReactIntl } from "./util";
+const nodes = [
+  {
+    value: "Physiotherapy OPD",
+    label: "Physiotherapy OPD",
+    children: [
+      { value: "1 session [30 min]", label: "1 session [30 min]" },
+      { value: "POP [30 min]", label: "POP [30 min]" },
+    ],
+  },
+];
+const InternationalizedAppSpecialityFilter = withReactIntl(AppSpecialityFilter);
 export const basic = () => (
-  <AppSpecialityFilter></AppSpecialityFilter>
+  <InternationalizedAppSpecialityFilter nodes={nodes} />
 );
diff --git a/ui/react-components/stories/AppointmentListSidePanelSearch.stories.js b/ui/react-components/stories/AppointmentListSidePanelSearch.stories.js
index 298f3be334..3e39a6847a 100644
--- a/ui/react-components/stories/AppointmentListSidePanelSearch.stories.js
+++ b/ui/react-components/stories/AppointmentListSidePanelSearch.stories.js
@@ -1,6 +1,8 @@
 import React from "react";
 import Search from "../components/AppointmentListSidePanelSearch/AppointmentListSidePanelSearch";
+import { withReactIntl } from "./util";
 
 export default { title: "AppointmentListSidePanelSearch" };
 
-export const basic = () => <Search></Search>;
+const InternaltionalizedSearch = withReactIntl(Search);
+export const basic = () => <InternaltionalizedSearch />;
diff --git a/ui/react-components/stories/AppointmentListSidePanelWrapper.stories.js b/ui/react-components/stories/AppointmentListSidePanelWrapper.stories.js
index 4d52476c49..893a00d45d 100644
--- a/ui/react-components/stories/AppointmentListSidePanelWrapper.stories.js
+++ b/ui/react-components/stories/AppointmentListSidePanelWrapper.stories.js
@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import AppointmentListSidePanelWrapper from "../components/AppointmentListSidePanelWrapper/AppointmentListSidePanelWrapper";
-import { IntlProvider, injectIntl } from "react-intl";
+import { withReactIntl } from "./util";
 
 const serviceList = [
   {
@@ -1132,15 +1132,10 @@ const serviceList = [
 
 export default { title: "AppointmentListSidePanelWrapper" };
 
-const withReactIntl = (AppointmentListSidePanelWrapper) => {
+const InternationalizedDropDown = withReactIntl(
+  AppointmentListSidePanelWrapper
+);
 
-  return (props) => {
-    return <IntlProvider locale='en' messages={{ 'DROPDOWN_NO_OPTIONS_MESSAGE': 'no option' }}>
-      <AppointmentListSidePanelWrapper {...props} serviceData={serviceList} />
-    </IntlProvider>
-  }
-}
-
-const InternationalizedDropDown = withReactIntl(AppointmentListSidePanelWrapper);
-
-export const SearchTree = () => <InternationalizedDropDown />;
+export const SearchTree = () => (
+  <InternationalizedDropDown serviceData={serviceList} />
+);
diff --git a/ui/react-components/stories/AppointmentStatus.stories.js b/ui/react-components/stories/AppointmentStatus.stories.js
index 349b24eb57..425fdab400 100644
--- a/ui/react-components/stories/AppointmentStatus.stories.js
+++ b/ui/react-components/stories/AppointmentStatus.stories.js
@@ -1,19 +1,11 @@
-import React, {useState} from 'react';
-import AppointmentStatus from '../components/AppointmentStatus/AppointmentStatus.jsx';
-import {IntlProvider} from "react-intl";
+import React from "react";
+import AppointmentStatus from "../components/AppointmentStatus/AppointmentStatus.jsx";
+import { withReactIntl } from "./util";
 
-export default { title: 'Appointment Status' };
+export default { title: "Appointment Status" };
 
-const withReactIntl = (AppointmentStatus) => {
-    return (props) =>{
-        return <IntlProvider locale='en' messages={{'Appointment_Status': 'no status selected'}}>
-            <AppointmentStatus {...props}/>
-        </IntlProvider>
-    }
-}
-
-const InternationalizedAppointmentStatus=withReactIntl(AppointmentStatus)
-
-
-export const basic = () => (<InternationalizedAppointmentStatus />);
+const InternationalizedAppointmentStatus = withReactIntl(AppointmentStatus, {
+  Appointment_Status: "no status selected",
+});
 
+export const basic = () => <InternationalizedAppointmentStatus />;
diff --git a/ui/react-components/stories/Dropdown.stories.js b/ui/react-components/stories/Dropdown.stories.js
index 4bb6097c55..c2d04c90f2 100644
--- a/ui/react-components/stories/Dropdown.stories.js
+++ b/ui/react-components/stories/Dropdown.stories.js
@@ -1,30 +1,31 @@
-import React from 'react';
-import Dropdown from '../components/Dropdown/Dropdown';
-import {IntlProvider} from "react-intl";
+import React from "react";
+import Dropdown from "../components/Dropdown/Dropdown";
+import { withReactIntl } from "./util";
 
-export default { title: 'Dropdown' };
+export default { title: "Dropdown" };
 
 const colourOptions = [
-    {value: 'ocean', label: 'Ocean'},
-    {value: 'blue', label: 'Blue'},
-    {value: 'orange', label: 'Orange'},
-    {value: 'yellow', label: 'Yellow'},
-    {value: 'green', label: 'Green'},
-    {value: 'forest', label: 'Forest'},
-    {value: 'slate', label: 'Slate'},
-    {value: 'silver', label: 'Silver'}
+  { value: "ocean", label: "Ocean" },
+  { value: "blue", label: "Blue" },
+  { value: "orange", label: "Orange" },
+  { value: "yellow", label: "Yellow" },
+  { value: "green", label: "Green" },
+  { value: "forest", label: "Forest" },
+  { value: "slate", label: "Slate" },
+  { value: "silver", label: "Silver" },
 ];
 
-const withReactIntl = (DropDown) => {
-    return (props) =>{
-        return <IntlProvider locale='en' messages={{'DROPDOWN_NO_OPTIONS_MESSAGE': 'no option'}}>
-            <Dropdown {...props}/>
-        </IntlProvider>
-    }
-}
+const InternationalizedDropDown = withReactIntl(Dropdown, {
+  DROPDOWN_NO_OPTIONS_MESSAGE: "no option",
+});
 
-const InternationalizedDropDown = withReactIntl(Dropdown);
+export const withPlaceholder = () => (
+  <InternationalizedDropDown placeholder="Sample placeholder"></InternationalizedDropDown>
+);
 
-export const withPlaceholder = () => <InternationalizedDropDown placeholder="Sample placeholder"></InternationalizedDropDown>;
-
-export const withOptions = () => <InternationalizedDropDown placeholder="Select color" options={colourOptions}></InternationalizedDropDown>;
\ No newline at end of file
+export const withOptions = () => (
+  <InternationalizedDropDown
+    placeholder="Select color"
+    options={colourOptions}
+  ></InternationalizedDropDown>
+);
diff --git a/ui/react-components/stories/FilterWrapper.stories.js b/ui/react-components/stories/FilterWrapper.stories.js
index bdd216bdb6..4fed79e22e 100644
--- a/ui/react-components/stories/FilterWrapper.stories.js
+++ b/ui/react-components/stories/FilterWrapper.stories.js
@@ -1,21 +1,13 @@
-import React from 'react';
+import React from "react";
 // import LocationSearch from '../components/Location/LocationSearch';
-import {IntlProvider} from "react-intl";
-import FilterWrapper from '../components/AppointmentFilterWrapper/FilterWrapper';
+import FilterWrapper from "../components/AppointmentFilterWrapper/FilterWrapper";
+import { withReactIntl } from "./util";
 
-
-export default { title: 'Filter Search Wrapper' };
+export default { title: "Filter Search Wrapper" };
 // const locationSearch=<LocationSearch value="Enter Location" />
 
-const withReactIntl = (FilterWrapper) => {
-    return (props) =>{
-        return <IntlProvider locale='en' messages={{'Filter': 'Filter Wrapper for Appointments'}}>
-            <FilterWrapper {...props}/>
-        </IntlProvider>
-    }
-}
-
-const InternationalizedLocation=withReactIntl(FilterWrapper)
-
-export const basic = () => (<InternationalizedLocation/>);
+const InternationalizedLocation = withReactIntl(FilterWrapper, {
+  Filter: "Filter Wrapper for Appointments",
+});
 
+export const basic = () => <InternationalizedLocation />;
diff --git a/ui/react-components/stories/GridSummary.stories.js b/ui/react-components/stories/GridSummary.stories.js
index 89b6c039c7..b70d36a599 100644
--- a/ui/react-components/stories/GridSummary.stories.js
+++ b/ui/react-components/stories/GridSummary.stories.js
@@ -1,18 +1,16 @@
-import React from 'react';
-import GridSummary from '../components/GridSummary/GridSummary';
-import {IntlProvider} from "react-intl";
-import dummyData from '../components/GridSummary/AppointSummary.json';
-export default { title: 'GridSummary' };
+import React from "react";
+import GridSummary from "../components/GridSummary/GridSummary";
+import dummyData from "../components/GridSummary/AppointSummary.json";
+import { withReactIntl } from "./util";
 
-
-const withReactIntl = (GridSummary) => {
-    return (props) =>{
-        return <IntlProvider locale='en' messages={{'DROPDOWN_NO_OPTIONS_MESSAGE': 'no option'}}>
-            <GridSummary {...props}/>
-        </IntlProvider>
-    }
-}
+export default { title: "GridSummary" };
 
 const InternationalizedGridSummary = withReactIntl(GridSummary);
 
-export const withPlaceholder = () => <InternationalizedGridSummary gridData={dummyData} weekStartDate="2020-04-06" onClick={(date)=>alert(date)}/>
+export const withPlaceholder = () => (
+  <InternationalizedGridSummary
+    gridData={dummyData}
+    weekStartDate="2020-04-06"
+    onClick={(date) => alert(date)}
+  />
+);
diff --git a/ui/react-components/stories/LocationSearch.stories.js b/ui/react-components/stories/LocationSearch.stories.js
index 8883aefe07..97bf1937db 100644
--- a/ui/react-components/stories/LocationSearch.stories.js
+++ b/ui/react-components/stories/LocationSearch.stories.js
@@ -1,20 +1,12 @@
-import React, {useState} from 'react';
-import LocationSearch from '../components/Location/LocationSearch';
-import {IntlProvider} from "react-intl";
+import React from "react";
+import LocationSearch from "../components/Location/LocationSearch";
+import { withReactIntl } from "./util";
 
-
-export default { title: 'Location Search' };
+export default { title: "Location Search" };
 // const locationSearch=<LocationSearch value="Enter Location" />
 
-const withReactIntl = (LocationSearch) => {
-    return (props) =>{
-        return <IntlProvider locale='en' messages={{'Location': 'no Location selected'}}>
-            <LocationSearch {...props}/>
-        </IntlProvider>
-    }
-}
-
-const InternationalizedLocation=withReactIntl(LocationSearch)
-
-export const basic = () => (<InternationalizedLocation/>);
+const InternationalizedLocation = withReactIntl(LocationSearch, {
+  Location: "no Location selected",
+});
 
+export const basic = () => <InternationalizedLocation />;
diff --git a/ui/react-components/stories/ProviderSearch.stories.js b/ui/react-components/stories/ProviderSearch.stories.js
index 04ff2f3d36..6dad2fac29 100644
--- a/ui/react-components/stories/ProviderSearch.stories.js
+++ b/ui/react-components/stories/ProviderSearch.stories.js
@@ -1,19 +1,11 @@
-import React from 'react'
-import {IntlProvider} from "react-intl";
-import ProviderSearch from '../components/Provider/ProviderSearch';
+import React from "react";
+import { withReactIntl } from "./util";
+import ProviderSearch from "../components/Provider/ProviderSearch";
 
+export default { title: "Provider Search" };
 
-export default { title: 'Provider Search' };
-
-const withReactIntl = (ProviderSearch) => {
-    return (props) =>{
-        return <IntlProvider locale='en' messages={{'Provider': 'no Provider selected'}}>
-            <ProviderSearch {...props}/>
-        </IntlProvider>
-    }
-}
-
-const InternationalizedProviderSearch=withReactIntl(ProviderSearch)
-
-export const basic = () => (<InternationalizedProviderSearch/>);
+const InternationalizedProviderSearch = withReactIntl(ProviderSearch, {
+  Provider: "no Provider selected",
+});
 
+export const basic = () => <InternationalizedProviderSearch />;
diff --git a/ui/react-components/stories/Tags.stories.js b/ui/react-components/stories/Tags.stories.js
index 8c6eb4471d..f3c1050d40 100644
--- a/ui/react-components/stories/Tags.stories.js
+++ b/ui/react-components/stories/Tags.stories.js
@@ -9,7 +9,7 @@ const colourOptions = [
   { value: "green", label: "Green" },
   { value: "forest", label: "Forest" },
   { value: "slate", label: "Slate" },
-  { value: "silver", label: "Silver" }
+  { value: "silver", label: "Silver" },
 ];
 
 export default { title: "Tag" };
diff --git a/ui/react-components/stories/util.js b/ui/react-components/stories/util.js
new file mode 100644
index 0000000000..c72942d3fe
--- /dev/null
+++ b/ui/react-components/stories/util.js
@@ -0,0 +1,12 @@
+import { IntlProvider } from "react-intl";
+import React from "react";
+
+export const withReactIntl = (Component, messages = {}) => {
+  return (props) => {
+    return (
+      <IntlProvider locale="en" messages={messages}>
+        <Component {...props} />
+      </IntlProvider>
+    );
+  };
+};