diff --git a/src/components/BarChart/BarChart.md b/src/components/BarChart/BarChart.md
index b84f05c8..aa37f00a 100644
--- a/src/components/BarChart/BarChart.md
+++ b/src/components/BarChart/BarChart.md
@@ -27,7 +27,7 @@ Import the component to `pages/index.js`
     "October",
     "November",
     "December",
-  ]} title="Marks" data={[40, 20, 12, 39, 10, 40, 39, 80, 40, 10, 91, 12, 15, 11]} labelsName: "months" color: "#f87979" />
+  ]} title="Marks" data={[40, 20, 12, 39, 10, 40, 39, 80, 40, 10, 91, 12, 15, 11]} labelsName="months" color= "#f87979" />
 ```
 
 `labels` prop is the labels of x axis of the bar chart
diff --git a/src/components/Breadcrumbs/Breadcrumbs.md b/src/components/Breadcrumbs/Breadcrumbs.md
index 210e9c99..894a3144 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.md
+++ b/src/components/Breadcrumbs/Breadcrumbs.md
@@ -14,7 +14,7 @@ Import the component to `pages/index.js`
 ## How to handle props to the component
 
 ```
-<BreadcrumbsWrapper elementList=[{ name: "Labs", url: "/" }, { name: "Categories" }] />
+<BreadcrumbsWrapper elementList={ [{ name: "Labs", url: "/" }, { name: "Categories" }] }/>
 ```
 
 `elementList` prop is the list of navigation options. items in the list following this signature
diff --git a/src/components/CardThemeFour/CardThemeFour.md b/src/components/CardThemeFour/CardThemeFour.md
index cd66dc3c..15203667 100644
--- a/src/components/CardThemeFour/CardThemeFour.md
+++ b/src/components/CardThemeFour/CardThemeFour.md
@@ -14,7 +14,7 @@ Import the component to `pages/index.js`
 ## How to handle props to the component
 
 ```
-<CardThemeFourimage="sample-image" title="sample title="sample-title" description="sample-description" />
+<CardThemeFour image="sample-image" title="sample-title" description="sample-description" />
 ```
 
 `image` prop is used to display the main image of the card
diff --git a/src/components/CardThemeFourGrid/CardThemeFourGrid.md b/src/components/CardThemeFourGrid/CardThemeFourGrid.md
index 85408444..179e55e0 100644
--- a/src/components/CardThemeFourGrid/CardThemeFourGrid.md
+++ b/src/components/CardThemeFourGrid/CardThemeFourGrid.md
@@ -15,7 +15,7 @@ Import the component to `pages/index.js`
 
 ```
 <CardThemeFourGrid image="sample-image-path"
-      dataUpperGrid={[{image: "sample", description: "sample", title="sample-title"}]} dataLowerGrid={[{image: "sample", description: "sample", title="sample-title"}]} />
+      dataUpperGrid={[{image: "sample", description: "sample", title:"sample-title"}]} dataLowerGrid={[{image: "sample", description: "sample", title:"sample-title"}]} />
 ```
 
 `image` props is the backgournd image of the section
diff --git a/src/components/CartTile/CartTile.md b/src/components/CartTile/CartTile.md
index b6f99065..f803eb03 100644
--- a/src/components/CartTile/CartTile.md
+++ b/src/components/CartTile/CartTile.md
@@ -9,12 +9,12 @@ This is a resuasble component for displaying the items in the cart. This Compone
 ## How to use the component
 
 Import the component to `pages/index.js`
-`import {Card} from "../components/CartTile";`
+`import {CartTile} from "../components/CartTile";`
 
 ## How to handle props to the component
 
 ```
-<CartTile image="url of product" name="name of product" price="price of product" qty="Number of items per product" subtractionHandler={function for subtration icon} additionHandler={function for subtration icon} removeHandler={function for delete items}/>
+<CartTile image="url of product" name="name of product" price="price of product" qty="Number of items per product" subtractionHandler={function for subtration icon} additionHandler={function for addition icon} removeHandler={function for delete items}/>
 ```
 
 `image` prop is the url of product
diff --git a/src/components/ClickableInfo/ClickableInfoCard.md b/src/components/ClickableInfo/ClickableInfoCard.md
index b65351b9..fae07372 100644
--- a/src/components/ClickableInfo/ClickableInfoCard.md
+++ b/src/components/ClickableInfo/ClickableInfoCard.md
@@ -10,7 +10,7 @@ This is a resuasble component for a generalized card which can be clickable. Thi
 ## How to use the component
 
 Import the component to `pages/index.js`
-`import {ClickableInfoCard} from "../components/ClickableInfoCard";`
+`import {ClickableInfoCard} from "../components/ClickableInfo";`
 
 ## How to handle props to the component
 
diff --git a/src/components/CommunityCards/CommunityCards.md b/src/components/CommunityCards/CommunityCards.md
index 2f5458e7..385d2d3e 100644
--- a/src/components/CommunityCards/CommunityCards.md
+++ b/src/components/CommunityCards/CommunityCards.md
@@ -9,7 +9,7 @@ This is a resuasble component for displaying community cards. This Component is
 ## How to use the component
 
 Import the component to `pages/index.js`
-`import {ComponentCards} from "../components/ComponentCards";`
+`import {ComponentCards} from "../components/CommunityCards";`
 
 ## How to handle props to the component
 
diff --git a/src/components/DetailCardGrid/DetailCardGrid.md b/src/components/DetailCardGrid/DetailCardGrid.md
index 98d99aaa..6460ba23 100644
--- a/src/components/DetailCardGrid/DetailCardGrid.md
+++ b/src/components/DetailCardGrid/DetailCardGrid.md
@@ -14,7 +14,7 @@ Import the component to `pages/index.js`
 ## How to handle props to the component
 
 ```
-<ServicesCardGrid data=[{titleOne="sample-title" , descriptionOne="sample-description}, gridHeading="sample-heading"] />
+<DetailCardGrid data={[{titleOne:"sample-title" , descriptionOne:"sample-description"}]} gridHeading="sample-heading" />
 ```
 `gridHeading` prop is use to add the heading for the cards grid
 `data` prop is use to add the data for the cards 
\ No newline at end of file
diff --git a/src/components/DocsBanner/DocsBanner.md b/src/components/DocsBanner/DocsBanner.md
index f019c290..f07edcf1 100644
--- a/src/components/DocsBanner/DocsBanner.md
+++ b/src/components/DocsBanner/DocsBanner.md
@@ -14,7 +14,7 @@ Import the component to `pages/index.js`
 ## How to handle props to the component
 
 ```
-<DocsBanner header="Frequently Asked Questions" bgColor="color"
+<DocsBanner mainText="sample-heading-text" subText="sample-subtext-para"  header="Frequently Asked Questions" bgColor="color"
      titleColor="color" toggleColor="color"
      data={[{title: "sample-question", content: "sample-answer"}]} />
 ```
diff --git a/src/components/DynamicBanner/DynamicBanner.md b/src/components/DynamicBanner/DynamicBanner.md
index 61bd72ef..98a7f53f 100644
--- a/src/components/DynamicBanner/DynamicBanner.md
+++ b/src/components/DynamicBanner/DynamicBanner.md
@@ -17,8 +17,8 @@ Import the component to `pages/index.js`
 <DynamicBanner  mainText ="sample-mainText"
   subText = "sample-subText"
   image = "sample-image"
-  description: ="sample-desc"
-  countUpListData = {duration="sample-numneric-value" end="sample-end-value" text="sample-text"}
+  description ="sample-desc"
+  countUpListData = {{duration:"sample-numneric-value" ,end:"sample-end-value" ,text:"sample-text"}
 }/>
 ```
 
diff --git a/src/components/FooterLarge/FooterLarge.md b/src/components/FooterLarge/FooterLarge.md
index bcbffc10..d5f96646 100644
--- a/src/components/FooterLarge/FooterLarge.md
+++ b/src/components/FooterLarge/FooterLarge.md
@@ -21,9 +21,9 @@ Import the component to `pages/index.js`
     headingFour = "sample-headingFour"
     aboutText = "sample-about-text"
     newsletterText = "sample-newsletter-text"
-    linksListData =  {[linkName: "link_name", LinkUrl :"link_Url"],[linkName: "link_name", LinkUrl :"link_Url"]}
-    contactListData ={[Detail:"sample-address", link: "sample-address-link"],[Detail:"sample-phone-number", link: "sample-phone-link"]}
-    socialLinks = {{facebook: "your_link", gitter: "your_link", twitter: "your_link", github: "your_link" linkedin:"your_link", medium:"your_link"}}
+    linksListData =  {[{linkName: "link_name", LinkUrl :"link_Url"},{linkName: "link_name", LinkUrl :"link_Url"}]}
+    contactListData ={[{Detail:"sample-address", link: "sample-address-link"},{Detail:"sample-phone-number", link: "sample-phone-link"}]}
+    socialLinks = {{facebook: "your_link", gitter: "your_link", twitter: "your_link", github: "your_link" , linkedin:"your_link", medium:"your_link"}}
 />
 ```
 
diff --git a/src/components/FooterThemeFive/FooterThemeFive.md b/src/components/FooterThemeFive/FooterThemeFive.md
index 73520069..a33ff0a9 100644
--- a/src/components/FooterThemeFive/FooterThemeFive.md
+++ b/src/components/FooterThemeFive/FooterThemeFive.md
@@ -19,12 +19,12 @@ Import the component to `pages/index.js`
     headingTwo = "sample-headingTwo"
     headingThree = "sample-headingThree"
     aboutText = "sample-aboutText"
-    linksListData =  {[linkName: "link_name", LinkUrl :"link_Url"],[linkName: "link_name", LinkUrl :"link_Url"]}
-    contactListData =  {[ detail: "sample-detail", link: "#"],[detail: "sample-detail",link: "#"]}
-    socialLinks = {{facebook: "your_link", gitter: "your_link", twitter: "your_link", github: "your_link" linkedin:"your_link", medium:"your_link"}}
-    facebookProfile: "facebookaddress",
-    height: "sample-height",
-    width: "sample-width",
+    linksListData =  {[{linkName: "link_name", LinkUrl :"link_Url"},{linkName: "link_name", LinkUrl :"link_Url"}]}
+    contactListData =  {[{ detail: "sample-detail", link: "#"},{detail: "sample-detail",link: "#"}]}
+    socialLinks = {{facebook: "your_link", gitter: "your_link", twitter: "your_link", github: "your_link", linkedin:"your_link", medium:"your_link"}}
+    facebookProfile= "facebookaddress"
+    height= "sample-height"
+    width= "sample-width"
 />
 ```
 
diff --git a/src/components/FooterThemeFour/FooterThemeFour.md b/src/components/FooterThemeFour/FooterThemeFour.md
index 48a5f1e8..e8fcf933 100644
--- a/src/components/FooterThemeFour/FooterThemeFour.md
+++ b/src/components/FooterThemeFour/FooterThemeFour.md
@@ -9,7 +9,7 @@ This is a reusable component for the footer of a website. This Component is high
 ## How to use the component
 
 Import the component to `pages/index.js`
-`import {FooterThemeFour} from "../components/FooterFour";`
+`import {FooterThemeFour} from "../components/FooterThemeFour";`
 
 ## How to handle props to the component
 
@@ -19,8 +19,8 @@ Import the component to `pages/index.js`
     titleTwo = "sample-headingTwo"
     aboutText = "sample-about-text"
     newsletterText = "sample-newsletter-text"
-    usefullListData =  {[linkName: "link_name", LinkUrl :"link_Url"],[linkName: "link_name", LinkUrl :"link_Url"]}
-    socialLinks = {{facebook: "your_link", gitter: "your_link", twitter: "your_link", github: "your_link" linkedin:"your_link", medium:"your_link"}}
+    usefullListData =  {[{linkName: "link_name", LinkUrl :"link_Url"},{linkName: "link_name", LinkUrl :"link_Url"}]}
+    socialLinks = {{facebook: "your_link", gitter: "your_link", twitter: "your_link", github: "your_link", linkedin:"your_link", medium:"your_link"}}
     copywriteText = "sample-subscribe-text"
 />
 ```
diff --git a/src/components/FooterThemeThree/FooterThemeThree.md b/src/components/FooterThemeThree/FooterThemeThree.md
index ce4de820..5fc90f93 100644
--- a/src/components/FooterThemeThree/FooterThemeThree.md
+++ b/src/components/FooterThemeThree/FooterThemeThree.md
@@ -20,11 +20,11 @@ Import the component to `pages/index.js`
     titleThree = "sample-headingThree"
     mainHeading = "sample-mainHeading"
     newsletterText = "sample-newsletter-text"
-    linksListData =  {[linkName: "link_name", LinkUrl :"link_Url"],[linkName: "link_name", LinkUrl :"link_Url"]}
-    secondListData =  {[linkName: "link_name", LinkUrl :"link_Url"],[linkName: "link_name", LinkUrl :"link_Url"]}
-    thirdListData =  {[linkName: "link_name", LinkUrl :"link_Url"],[linkName: "link_name", LinkUrl :"link_Url"]}
-    fourthListData =  {[linkName: "link_name", LinkUrl :"link_Url"],[linkName: "link_name", LinkUrl :"link_Url"]}
-    socialLinks = {{facebook: "your_link", gitter: "your_link", twitter: "your_link", github: "your_link" linkedin:"your_link", medium:"your_link"}}
+    linksListData =  {[{linkName: "link_name", LinkUrl :"link_Url"},{linkName: "link_name", LinkUrl :"link_Url"}]}
+    secondListData =  {[{linkName: "link_name", LinkUrl :"link_Url"},{linkName: "link_name", LinkUrl :"link_Url"}]}
+    thirdListData =  {[{linkName: "link_name", LinkUrl :"link_Url"},{linkName: "link_name", LinkUrl :"link_Url"}]}
+    fourthListData =  {[{linkName: "link_name", LinkUrl :"link_Url"},{linkName: "link_name", LinkUrl :"link_Url"}]}
+    socialLinks = {{facebook: "your_link", gitter: "your_link", twitter: "your_link", github: "your_link", linkedin:"your_link", medium:"your_link"}}
 />
 ```
 
diff --git a/src/components/FooterThemeTwo/FooterThemeTwo.md b/src/components/FooterThemeTwo/FooterThemeTwo.md
index 481bcf39..765aa4e6 100644
--- a/src/components/FooterThemeTwo/FooterThemeTwo.md
+++ b/src/components/FooterThemeTwo/FooterThemeTwo.md
@@ -20,10 +20,10 @@ Import the component to `pages/index.js`
     titleThree = "sample-headingThree"
     aboutText = "sample-about-text"
     newsletterText = "sample-newsletter-text"
-    linksListData =  {[linkName: "link_name", LinkUrl :"link_Url"],[linkName: "link_name", LinkUrl :"link_Url"]}
-    contactListData = {[Detail:"sample-address", link: "sample-address-link"],[Detail:"sample-phone-number", link: "sample-phone-link"]}
-    servicesListData = {[serviceName : "sample service name", link: "sample-service-url"],[serviceName : "sample service name", link: "sample-service-url"]}
-    socialLinks = {{facebook: "your_link", gitter: "your_link", twitter: "your_link", github: "your_link" linkedin:"your_link", medium:"your_link"}}
+    linksListData =  {[{linkName: "link_name", LinkUrl :"link_Url"},{linkName: "link_name", LinkUrl :"link_Url"}]}
+    contactListData = {[{ detail: "sample-detail", link: "#"},{detail: "sample-detail",link: "#"}]}
+    servicesListData = {[{serviceName : "sample service name", link: "sample-service-url"},{serviceName : "sample service name", link: "sample-service-url"}]}
+    socialLinks = {{facebook: "your_link", gitter: "your_link", twitter: "your_link", github: "your_link", linkedin:"your_link", medium:"your_link"}}
 />
 ```
 
diff --git a/src/components/GitterRoomsList/GitterRoomList.md b/src/components/GitterRoomsList/GitterRoomList.md
index 6b13289d..3e9a2bb2 100644
--- a/src/components/GitterRoomsList/GitterRoomList.md
+++ b/src/components/GitterRoomsList/GitterRoomList.md
@@ -6,7 +6,7 @@ This is a resuasble component for getting the list of all Gitter Rooms of an org
 
 ## How to use the component
 Import the component to `pages/index.js`
-`import {GiiterRoomList} from "../components/GitterRoomList";`
+`import {GitterRoomsList} from "../components/GitterRoomsList";`
 
 ## How to handle props to the component
 ```
diff --git a/src/components/HeroSection/HeroSection.md b/src/components/HeroSection/HeroSection.md
index 5ee00d5a..a78428ea 100644
--- a/src/components/HeroSection/HeroSection.md
+++ b/src/components/HeroSection/HeroSection.md
@@ -14,7 +14,7 @@ Import the component to `pages/index.js`
 ## How to handle props to the component
 
 ```
-<HeroSection mainText="sample-heading-text" subText="sample-subtext-para" buttonText="button" buttonLink="/" image="sample-url />
+<HeroSection mainText="sample-heading-text" subText="sample-subtext-para" buttonText="button" buttonLink="/" image="sample-url" />
 ```
 
 `mainText` prop is the heading that you want to display
diff --git a/src/components/HeroSectionThemeThree/HeroSectionThemeThree.md b/src/components/HeroSectionThemeThree/HeroSectionThemeThree.md
index 3f9888c9..7a65ff4c 100644
--- a/src/components/HeroSectionThemeThree/HeroSectionThemeThree.md
+++ b/src/components/HeroSectionThemeThree/HeroSectionThemeThree.md
@@ -14,7 +14,7 @@ Import the component to `pages/index.js`
 ## How to handle props to the component
 
 ```
-<HeroSectionThemeThree mainText="sample-heading-text" subText="sample-subtext-para" buttonText="button" buttonLink="/" contributeLink = "/" contributeText="sample-text" image="sample-url />
+<HeroSectionThemeThree mainText="sample-heading-text" subText="sample-subtext-para" buttonText="button" buttonLink="/" contributeLink = "/" contributeText="sample-text" image="sample-url" />
 ```
 
 `mainText` prop is the heading that you want to display
diff --git a/src/components/HeroSectionThemeTwo/HeroSectionThemeTwo.md b/src/components/HeroSectionThemeTwo/HeroSectionThemeTwo.md
index 69a8fca3..01052199 100644
--- a/src/components/HeroSectionThemeTwo/HeroSectionThemeTwo.md
+++ b/src/components/HeroSectionThemeTwo/HeroSectionThemeTwo.md
@@ -14,7 +14,7 @@ Import the component to `pages/index.js`
 ## How to handle props to the component
 
 ```
-<HeroSectionThemeTwo mainText="sample-heading-text" subText="sample-subtext-para" buttonText="button" buttonLink="/" image="sample-url />
+<HeroSectionThemeTwo mainText="sample-heading-text" subText="sample-subtext-para" buttonText="button" buttonLink="/" image="sample-url" />
 ```
 
 `mainText` prop is the heading that you want to display
diff --git a/src/components/ImageGrid/ImageGrid.md b/src/components/ImageGrid/ImageGrid.md
index ee2a1b40..39a38603 100644
--- a/src/components/ImageGrid/ImageGrid.md
+++ b/src/components/ImageGrid/ImageGrid.md
@@ -15,7 +15,7 @@ Import the component to `pages/index.js`
 
 ```
 <ImageGrid size={4} images={[{imageUrl: "image_url", imageText: "image_text"}]} header="sample-header" row={false}
-           categories={false} categoryData={[{text: "text", color: "#e52165", route: "/", image: "sample-path"}}]} />
+           categories={false} categoryData={[{text: "text", color: "#e52165", route: "/", image: "sample-path"}]} />
 ```
 
 `size` prop is used to decide how many images should render per row e.g size = 3 means 4 images per row
diff --git a/src/components/IndividualCard/IndividualCard.md b/src/components/IndividualCard/IndividualCard.md
index 1b90c413..19ecbe64 100644
--- a/src/components/IndividualCard/IndividualCard.md
+++ b/src/components/IndividualCard/IndividualCard.md
@@ -14,7 +14,7 @@ Import the component to `pages/index.js`
 ## How to handle props to the component
 
 ```
-<IndividualCard image="sample-image" iconImage="sample-icon" title="sample title="sample-title" description="sample-description" buttonText="sample-button-text" buttonLink="sample-button-link" />
+<IndividualCard image="sample-image" iconImage="sample-icon" title="sample-title" description="sample-description" buttonText="sample-button-text" buttonLink="sample-button-link" />
 ```
 
 `image` prop is used to display the main image of the card
diff --git a/src/components/InfoSection/InfoSection.md b/src/components/InfoSection/InfoSection.md
index 29429c69..53df3260 100644
--- a/src/components/InfoSection/InfoSection.md
+++ b/src/components/InfoSection/InfoSection.md
@@ -14,7 +14,7 @@ Import the component to `pages/index.js`
 ## How to handle props to the component
 
 ```
-<InfoSection mainText="sample-heading-text" subText="sample-subtext-para"  infoListData={text="sample-text" image="sample-image" description = "sample-descrption"/>
+<InfoSection mainText="sample-heading-text" subText="sample-subtext-para"  infoListData={[{text:"sample-text" , image:"sample-image", description: "sample-descrption"}]}/>
 ```
 
 `mainText` prop is the heading that you want to display
diff --git a/src/components/IntroSection/index.js b/src/components/IntroSection/index.js
index 023a69b6..c91df130 100644
--- a/src/components/IntroSection/index.js
+++ b/src/components/IntroSection/index.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types"
 import "./style.sass"
 import { Container, Row, Col } from "react-bootstrap"
 
-export const IntroComponent = ({
+export const IntroSection = ({
   mainText,
   subText,
   image,
@@ -33,7 +33,7 @@ export const IntroComponent = ({
   )
 }
 
-IntroComponent.propTypes = {
+IntroSection.propTypes = {
   mainText: PropTypes.string,
   description: PropTypes.string,
   subText: PropTypes.string,
diff --git a/src/components/MiniDrrawer/MiniDrawer.md b/src/components/MiniDrawer/MiniDrawer.md
similarity index 100%
rename from src/components/MiniDrrawer/MiniDrawer.md
rename to src/components/MiniDrawer/MiniDrawer.md
diff --git a/src/components/MiniDrrawer/MiniDrawer.stories.js b/src/components/MiniDrawer/MiniDrawer.stories.js
similarity index 100%
rename from src/components/MiniDrrawer/MiniDrawer.stories.js
rename to src/components/MiniDrawer/MiniDrawer.stories.js
diff --git a/src/components/MiniDrrawer/index.js b/src/components/MiniDrawer/index.js
similarity index 100%
rename from src/components/MiniDrrawer/index.js
rename to src/components/MiniDrawer/index.js
diff --git a/src/components/MiniDrrawer/styles.js b/src/components/MiniDrawer/styles.js
similarity index 100%
rename from src/components/MiniDrrawer/styles.js
rename to src/components/MiniDrawer/styles.js
diff --git a/themes/learning-management-system/package.json b/themes/learning-management-system/package.json
index ea821492..85f8516e 100644
--- a/themes/learning-management-system/package.json
+++ b/themes/learning-management-system/package.json
@@ -1,7 +1,13 @@
 {
   "private": true,
-  "workspaces": ["learning-management-theme", "site"],
+  "workspaces": [
+    "learning-management-theme",
+    "site"
+  ],
   "scripts": {
     "develop": "yarn workspace site develop"
+  },
+  "dependencies": {
+    "learning-management-theme": "file:learning-management-theme"
   }
-}
\ No newline at end of file
+}