From 9a7a771325b508e5701ad42ffa5203ae01703557 Mon Sep 17 00:00:00 2001
From: tspuller <tspuller@umich.edu>
Date: Sat, 5 Dec 2020 16:43:18 -0500
Subject: [PATCH] code cleanup

---
 src/components/Algolia/Algolia.js             |   4 -
 .../Algolia/AlgoliaComponent.style.js         | 901 ------------------
 src/components/Algolia/Footer.js              |  14 -
 src/components/Algolia/RangeSlider.js         |  69 --
 src/components/Algolia/Sidebar.js             |  70 --
 src/components/Algolia/VoiceRecognition.js    |  61 --
 src/components/Algolia/algolia.svg            |  14 -
 src/components/AvatarCard/AvatarCard.js       |  24 -
 src/components/AvatarCard/AvatarCard.style.js |  27 -
 src/components/Cart/SingleCart.js             |  60 --
 src/components/Cart/SingleCartModal.js        |  37 -
 src/components/Cart/SingleCartModal.style.js  |  88 --
 src/components/Chat/InputName.js              |  58 --
 src/components/Chat/InputName.style.js        |  33 -
 src/components/Chat/ViewProfile.js            |  56 --
 src/components/Chat/ViewProfile.style.js      |  80 --
 src/components/Contacts/ContactCard.style.js  | 236 -----
 src/components/Contacts/ContactList.js        |  82 --
 src/components/Contacts/ContactList.style.js  | 201 ----
 src/components/Contacts/DeleteButton.js       |  30 -
 src/components/Contacts/EditView.js           |  94 --
 src/components/Contacts/SingleView.js         |  29 -
 src/components/Contacts/upload.css            |  18 -
 src/components/Feedback/Alert.js              |   3 -
 src/components/Feedback/Alert.style.js        |  69 --
 src/components/Feedback/Message.js            |   3 -
 src/components/Feedback/Message.style.js      |  33 -
 src/components/Feedback/Modal.js              |   3 -
 src/components/Feedback/Notification.js       |   3 -
 src/components/Feedback/Popconfirm.js         |   3 -
 src/components/Invoice/Address.js             |  12 -
 src/components/Invoice/InvoiceTable.js        | 146 ---
 src/components/Invoice/OrderStatus.js         |  20 -
 src/components/Invoice/TableStyle.js          |  61 --
 src/components/Mail/ComposeAutoComplete.js    |  74 --
 .../Mail/ComposeAutoComplete.style.js         | 157 ---
 src/components/Mail/ComposeMail.js            |  90 --
 src/components/Mail/ComposeMail.style.js      |  83 --
 src/components/Mail/MailBucket.style.js       |  58 --
 src/components/Mail/MailBuckets.js            |  62 --
 src/components/Mail/MailComposeBtn.js         |  21 -
 src/components/Mail/MailComposeBtn.style.js   |  38 -
 src/components/Mail/MailList.js               |  70 --
 src/components/Mail/MailList.style.js         | 130 ---
 src/components/Mail/MailPagination.js         |  25 -
 src/components/Mail/MailPagination.style.js   |  50 -
 src/components/Mail/MailTags.js               |  65 --
 src/components/Mail/MailTags.style.js         |  62 --
 src/components/Mail/SingleMail.js             |  92 --
 src/components/Mail/SingleMail.style.js       | 243 -----
 src/components/Mail/SingleMailActions.js      | 161 ----
 .../Mail/SingleMailActions.style.js           | 170 ----
 src/components/Mail/reactTags.css             |  57 --
 src/components/PostCard/InstagramCard.js      |  50 -
 .../PostCard/InstagramCard.style.js           |  69 --
 src/components/PostCard/index.js              |   8 -
 src/components/ScrumBoard/AntFields.js        |  75 --
 src/components/ScrumBoard/Attachment.js       |  60 --
 src/components/ScrumBoard/CheckList.js        | 113 ---
 .../ScrumBoard/Comments/Comments.js           | 133 ---
 .../ScrumBoard/Comments/Comments.style.js     |  47 -
 src/components/ScrumBoard/FieldFormats.js     |   2 -
 .../HeadingWithIcon/HeadingWithIcon.js        |  33 -
 src/components/ScrumBoard/IconSvg/IconSvg.js  |  19 -
 .../ScrumBoard/RenderBoardForm/08-icon.svg    |  39 -
 .../RenderBoardForm/RenderBoardForm.js        |  99 --
 .../RenderBoardForm/RenderBoardForm.style.js  |  19 -
 .../ScrumBoard/RenderColumnForm/05-icon.svg   |  17 -
 .../RenderColumnForm/RenderColumnForm.js      |  52 -
 .../RenderColumnForm.style.js                 |   9 -
 .../ScrumBoard/SearchInput/07-icon.svg        |  10 -
 .../ScrumBoard/SearchInput/10-icon.svg        |  11 -
 .../ScrumBoard/SearchInput/SearchInput.js     |  41 -
 .../SearchInput/SearchInput.style.js          |  60 --
 src/components/ScrumBoard/Title.js            |  19 -
 src/components/ScrumBoard/ValidateFields.js   |  30 -
 src/components/Tables/DeleteCell.js           |  15 -
 src/components/Tables/EditableCell.js         |  39 -
 src/components/Tables/FilterDropdown.js       |  20 -
 src/components/Tables/HelperCells.js          |  20 -
 src/components/Tables/ImageCell.js            |  50 -
 .../YoutubeSearch/PlayYoutubeVideo.js         |  24 -
 .../YoutubeSearch/PlayYoutubeVideo.style.js   |   8 -
 src/components/YoutubeSearch/Result.js        | 127 ---
 .../YoutubeSearch/YoutubeSearch.style.js      | 207 ----
 src/containers/Authentication/Auth0/Auth0.js  |  53 --
 .../Authentication/Auth0/Auth0Callback.js     |  13 -
 src/containers/BlankPage.js                   |  15 -
 src/containers/Pages/SignIn/SignIn.js         |  10 -
 src/containers/ThemeSwitcher/ThemeSwitcher.js |  75 ++
 .../ThemeSwitcher/ThemeSwitcher.styles.js     | 255 +++++
 src/containers/ThemeSwitcher/config.js        | 174 ++++
 src/containers/Topbar/Topbar.js               |   5 -
 src/containers/Topbar/TopbarAddToCart.js      | 129 ---
 .../Topbar/TopbarDropdown.styles.js           | 293 ------
 src/containers/Topbar/TopbarMail.js           |  93 --
 src/containers/Topbar/TopbarMessage.js        |  96 --
 src/containers/Topbar/TopbarNotification.js   |  79 --
 src/containers/Topbar/TopbarSearch.js         |  36 -
 .../Topbar/TopbarSearchModal.styles.js        |  85 --
 src/containers/Topbar/TopbarUser.js           |  54 --
 src/redux/card/config.js                      |  14 -
 src/redux/quiz/actions.js                     |  37 -
 src/redux/quiz/fakeQuestion.js                | 128 ---
 src/redux/quiz/fakeQuizes.js                  |  26 -
 src/redux/quiz/reducer.js                     |  66 --
 src/redux/quiz/saga.js                        |  24 -
 src/redux/root-reducer.js                     |  36 -
 src/redux/root-saga.js                        |  30 -
 109 files changed, 504 insertions(+), 7197 deletions(-)
 delete mode 100644 src/components/Algolia/Algolia.js
 delete mode 100644 src/components/Algolia/AlgoliaComponent.style.js
 delete mode 100644 src/components/Algolia/Footer.js
 delete mode 100644 src/components/Algolia/RangeSlider.js
 delete mode 100644 src/components/Algolia/Sidebar.js
 delete mode 100644 src/components/Algolia/VoiceRecognition.js
 delete mode 100644 src/components/Algolia/algolia.svg
 delete mode 100644 src/components/AvatarCard/AvatarCard.js
 delete mode 100644 src/components/AvatarCard/AvatarCard.style.js
 delete mode 100644 src/components/Cart/SingleCart.js
 delete mode 100644 src/components/Cart/SingleCartModal.js
 delete mode 100644 src/components/Cart/SingleCartModal.style.js
 delete mode 100644 src/components/Chat/InputName.js
 delete mode 100644 src/components/Chat/InputName.style.js
 delete mode 100644 src/components/Chat/ViewProfile.js
 delete mode 100644 src/components/Chat/ViewProfile.style.js
 delete mode 100644 src/components/Contacts/ContactCard.style.js
 delete mode 100644 src/components/Contacts/ContactList.js
 delete mode 100644 src/components/Contacts/ContactList.style.js
 delete mode 100644 src/components/Contacts/DeleteButton.js
 delete mode 100644 src/components/Contacts/EditView.js
 delete mode 100644 src/components/Contacts/SingleView.js
 delete mode 100644 src/components/Contacts/upload.css
 delete mode 100644 src/components/Feedback/Alert.js
 delete mode 100644 src/components/Feedback/Alert.style.js
 delete mode 100644 src/components/Feedback/Message.js
 delete mode 100644 src/components/Feedback/Message.style.js
 delete mode 100644 src/components/Feedback/Modal.js
 delete mode 100644 src/components/Feedback/Notification.js
 delete mode 100644 src/components/Feedback/Popconfirm.js
 delete mode 100644 src/components/Invoice/Address.js
 delete mode 100644 src/components/Invoice/InvoiceTable.js
 delete mode 100644 src/components/Invoice/OrderStatus.js
 delete mode 100644 src/components/Invoice/TableStyle.js
 delete mode 100644 src/components/Mail/ComposeAutoComplete.js
 delete mode 100644 src/components/Mail/ComposeAutoComplete.style.js
 delete mode 100644 src/components/Mail/ComposeMail.js
 delete mode 100644 src/components/Mail/ComposeMail.style.js
 delete mode 100644 src/components/Mail/MailBucket.style.js
 delete mode 100644 src/components/Mail/MailBuckets.js
 delete mode 100644 src/components/Mail/MailComposeBtn.js
 delete mode 100644 src/components/Mail/MailComposeBtn.style.js
 delete mode 100644 src/components/Mail/MailList.js
 delete mode 100644 src/components/Mail/MailList.style.js
 delete mode 100644 src/components/Mail/MailPagination.js
 delete mode 100644 src/components/Mail/MailPagination.style.js
 delete mode 100644 src/components/Mail/MailTags.js
 delete mode 100644 src/components/Mail/MailTags.style.js
 delete mode 100644 src/components/Mail/SingleMail.js
 delete mode 100644 src/components/Mail/SingleMail.style.js
 delete mode 100644 src/components/Mail/SingleMailActions.js
 delete mode 100644 src/components/Mail/SingleMailActions.style.js
 delete mode 100644 src/components/Mail/reactTags.css
 delete mode 100644 src/components/PostCard/InstagramCard.js
 delete mode 100644 src/components/PostCard/InstagramCard.style.js
 delete mode 100644 src/components/PostCard/index.js
 delete mode 100644 src/components/ScrumBoard/AntFields.js
 delete mode 100644 src/components/ScrumBoard/Attachment.js
 delete mode 100644 src/components/ScrumBoard/CheckList.js
 delete mode 100644 src/components/ScrumBoard/Comments/Comments.js
 delete mode 100644 src/components/ScrumBoard/Comments/Comments.style.js
 delete mode 100644 src/components/ScrumBoard/FieldFormats.js
 delete mode 100644 src/components/ScrumBoard/HeadingWithIcon/HeadingWithIcon.js
 delete mode 100644 src/components/ScrumBoard/IconSvg/IconSvg.js
 delete mode 100644 src/components/ScrumBoard/RenderBoardForm/08-icon.svg
 delete mode 100644 src/components/ScrumBoard/RenderBoardForm/RenderBoardForm.js
 delete mode 100644 src/components/ScrumBoard/RenderBoardForm/RenderBoardForm.style.js
 delete mode 100644 src/components/ScrumBoard/RenderColumnForm/05-icon.svg
 delete mode 100644 src/components/ScrumBoard/RenderColumnForm/RenderColumnForm.js
 delete mode 100644 src/components/ScrumBoard/RenderColumnForm/RenderColumnForm.style.js
 delete mode 100644 src/components/ScrumBoard/SearchInput/07-icon.svg
 delete mode 100644 src/components/ScrumBoard/SearchInput/10-icon.svg
 delete mode 100644 src/components/ScrumBoard/SearchInput/SearchInput.js
 delete mode 100644 src/components/ScrumBoard/SearchInput/SearchInput.style.js
 delete mode 100644 src/components/ScrumBoard/Title.js
 delete mode 100644 src/components/ScrumBoard/ValidateFields.js
 delete mode 100644 src/components/Tables/DeleteCell.js
 delete mode 100644 src/components/Tables/EditableCell.js
 delete mode 100644 src/components/Tables/FilterDropdown.js
 delete mode 100644 src/components/Tables/HelperCells.js
 delete mode 100644 src/components/Tables/ImageCell.js
 delete mode 100644 src/components/YoutubeSearch/PlayYoutubeVideo.js
 delete mode 100644 src/components/YoutubeSearch/PlayYoutubeVideo.style.js
 delete mode 100644 src/components/YoutubeSearch/Result.js
 delete mode 100644 src/components/YoutubeSearch/YoutubeSearch.style.js
 delete mode 100644 src/containers/Authentication/Auth0/Auth0.js
 delete mode 100644 src/containers/Authentication/Auth0/Auth0Callback.js
 delete mode 100644 src/containers/BlankPage.js
 create mode 100644 src/containers/ThemeSwitcher/ThemeSwitcher.js
 create mode 100644 src/containers/ThemeSwitcher/ThemeSwitcher.styles.js
 create mode 100644 src/containers/ThemeSwitcher/config.js
 delete mode 100644 src/containers/Topbar/TopbarAddToCart.js
 delete mode 100644 src/containers/Topbar/TopbarDropdown.styles.js
 delete mode 100644 src/containers/Topbar/TopbarMail.js
 delete mode 100644 src/containers/Topbar/TopbarMessage.js
 delete mode 100644 src/containers/Topbar/TopbarNotification.js
 delete mode 100644 src/containers/Topbar/TopbarSearch.js
 delete mode 100644 src/containers/Topbar/TopbarSearchModal.styles.js
 delete mode 100644 src/containers/Topbar/TopbarUser.js
 delete mode 100644 src/redux/quiz/actions.js
 delete mode 100644 src/redux/quiz/fakeQuestion.js
 delete mode 100644 src/redux/quiz/fakeQuizes.js
 delete mode 100644 src/redux/quiz/reducer.js
 delete mode 100644 src/redux/quiz/saga.js

diff --git a/src/components/Algolia/Algolia.js b/src/components/Algolia/Algolia.js
deleted file mode 100644
index beafe86..0000000
--- a/src/components/Algolia/Algolia.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Sidebar from './Sidebar';
-import Footer from './Footer';
-
-export { Sidebar, Footer };
diff --git a/src/components/Algolia/AlgoliaComponent.style.js b/src/components/Algolia/AlgoliaComponent.style.js
deleted file mode 100644
index b9c4659..0000000
--- a/src/components/Algolia/AlgoliaComponent.style.js
+++ /dev/null
@@ -1,901 +0,0 @@
-import styled from 'styled-components';
-import { palette, font } from 'styled-theme';
-import {
-  transition,
-  borderRadius,
-  boxShadow,
-} from '@imd/lib/helpers/style_utils';
-import WithDirection from '@imd/lib/helpers/rtl';
-
-const WDSidebarWrapper = styled.div`
-  width: 340px;
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  margin: ${props =>
-    props['data-rtl'] === 'rtl' ? '0 0 0 30px' : '0 30px 0 0'};
-  ${transition()};
-
-  @media only screen and (max-width: 767px) {
-    width: 100%;
-    margin-left: ${props =>
-      props['data-rtl'] === 'rtl' ? '30px' : 'calc(-100% + -30px)'};
-    margin-right: ${props =>
-      props['data-rtl'] === 'rtl' ? 'calc(-100% + -30px)' : '30px'};
-  }
-
-  @media only screen and (min-width: 768px) and (max-width: 1199px) {
-    width: 270px;
-  }
-
-  .ais-SearchBox__root {
-    width: 100%;
-    margin-bottom: 15px;
-    max-width: 100%;
-
-    .ais-SearchBox__input {
-      padding: ${props =>
-        props['data-rtl'] === 'rtl' ? '0 46px 0 36px' : '0 36px 0 46px'};
-      border: 1px solid ${palette('border', 0)};
-      ${borderRadius('3px')};
-      ${boxShadow()};
-    }
-
-    .ais-SearchBox__submit {
-      right: ${props => (props['data-rtl'] === 'rtl' ? '0' : 'inherit')};
-      left: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '0')};
-    }
-  }
-
-  .isoAlgoliaSidebarItem {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 15px 25px;
-    margin-bottom: 15px;
-    background-color: #ffffff;
-    border: 1px solid ${palette('border', 0)};
-    ${borderRadius('3px')};
-
-    .isoAlgoliaSidebarTitle {
-      font-size: 14px;
-      font-weight: 700;
-      color: ${palette('text', 0)};
-      line-height: 1.3;
-      margin: 0 0 20px;
-      display: flex;
-    }
-
-    &.isoInline {
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-
-      .isoAlgoliaSidebarTitle {
-        margin-bottom: 0;
-      }
-    }
-
-    /* Radio */
-    .ais-MultiRange__root {
-      .ais-MultiRange__item {
-        line-height: 1;
-        margin-top: 10px;
-
-        &:first-child {
-          margin-top: 0;
-        }
-
-        label {
-          align-items: center;
-        }
-
-        .ais-MultiRange__itemBox {
-          margin: ${props =>
-            props['data-rtl'] === 'rtl' ? '0 0 0 8px' : '0 8px 0 0'};
-        }
-      }
-    }
-
-    /* rating */
-    .ais-StarRating__root {
-      .ais-StarRating__ratingLink {
-        display: flex;
-        align-items: center;
-        text-decoration: none;
-
-        &:first-child {
-          margin-top: 0;
-        }
-
-        .ais-StarRating__ratingLabel {
-          margin: ${props =>
-            props['data-rtl'] === 'rtl' ? '0 10px 0 0' : '0 0 0 10px'};
-        }
-
-        .ais-StarRating__ratingCount {
-          margin: ${props =>
-            props['data-rtl'] === 'rtl' ? '0 auto 0 0' : '0 0 0 auto'};
-        }
-      }
-    }
-    .isoAlRangeSlider {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      margin-top: -25px;
-
-      .isoAlRangeNumber {
-        display: flex;
-        justify-content: flex-end;
-        margin-bottom: 15px;
-
-        span {
-          font-size: 13px;
-          font-weight: 400;
-          color: ${palette('text', 3)};
-          line-height: 1.3;
-          padding: ${props =>
-            props['data-rtl'] === 'rtl' ? '0 0 0 10px' : '0 10px 0 0'};
-
-          &:last-child {
-            padding: ${props =>
-              props['data-rtl'] === 'rtl' ? '0 10px 0 0' : '0 0 0 10px'};
-          }
-        }
-      }
-
-      .rheostat-horizontal {
-        height: 15px;
-
-        .rheostat-background {
-          width: 100%;
-          height: 6px;
-          background-color: ${palette('secondary', 1)};
-          display: flex;
-          margin-top: 4px;
-        }
-
-        .rheostat-progress {
-          position: absolute;
-          top: 4px;
-          height: 6px;
-          background-color: ${palette('primary', 9)};
-        }
-
-        button {
-          width: 14px;
-          height: 14px;
-          padding: 0;
-          border-radius: 7px;
-          background-color: ${palette('primary', 9)};
-          border: 0px;
-          outline: 0px;
-          top: 0;
-          margin-left: -5px;
-          display: inline-block;
-          z-index: 1;
-
-          &::before {
-            content: '';
-            width: 6px;
-            height: 6px;
-            display: flex;
-            border-radius: 3px;
-            background-color: #fff;
-            position: absolute;
-            top: 4px;
-            left: 4px;
-          }
-        }
-      }
-    }
-
-    .ais-RefinementList__root {
-      .ais-RefinementList__SearchBox {
-        .ais-SearchBox__root {
-          margin-bottom: 10px;
-        }
-      }
-
-      .ais-RefinementList__item {
-        &:first-child {
-          margin-top: 0;
-        }
-
-        label {
-          display: flex;
-          align-items: center;
-          font-size: 13px;
-          color: ${palette('text', 1)};
-
-          .ais-RefinementList__itemCount {
-            margin: ${props =>
-              props['data-rtl'] === 'rtl' ? ' 0 auto 0 0' : '0 0 0 auto'};
-          }
-
-          .ais-RefinementList__itemBox {
-            margin: ${props =>
-              props['data-rtl'] === 'rtl' ? '0 0 0 8px' : '0 8px 0 0'};
-          }
-        }
-      }
-    }
-
-    .ais-HierarchicalMenu__root {
-      .ais-HierarchicalMenu__item {
-        margin-top: 8px;
-        float: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')};
-
-        &:after {
-          right: ${props =>
-            props['data-rtl'] === 'rtl' ? 'inherit' : '-22px'};
-          left: ${props => (props['data-rtl'] === 'rtl' ? '-22px' : 'inherit')};
-          transform: ${props =>
-            props['data-rtl'] === 'rtl'
-              ? 'translateY(-50%) rotate(180deg)'
-              : 'translateY(-50%) rotate(0deg)'};
-        }
-
-        &:first-child {
-          margin-top: 0;
-        }
-
-        .ais-HierarchicalMenu__itemLink {
-          &:focus {
-            text-decoration: none;
-          }
-        }
-
-        &.ais-HierarchicalMenu__itemParent {
-          .ais-HierarchicalMenu__item {
-            margin-top: 8px;
-          }
-        }
-      }
-    }
-  }
-
-  .ais-ClearAll__root {
-    padding: 12px 8px;
-    display: block;
-    font-weight: 700;
-    text-transform: uppercase;
-
-    @media only screen and (max-width: 358px) {
-      margin-top: 10px;
-    }
-  }
-`;
-
-const WDContentWrapper = styled.div`
-  width: calc(100% - 370px);
-  display: flex;
-  flex-direction: column;
-
-  @media only screen and (max-width: 767px) {
-    width: 100%;
-    margin-right: ${props => (props['data-rtl'] === 'rtl' ? '30px' : '0')};
-  }
-
-  @media only screen and (min-width: 768px) and (max-width: 1199px) {
-    width: calc(100% - 300px);
-  }
-
-  .ais-Hits__root {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  &.list {
-    .ais-Hits__root {
-      flex-direction: column;
-    }
-  }
-`;
-
-const WDGridListViewWrapper = styled.div`
-  &.GridView {
-    width: calc(100% / 2 - 10px);
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    background-color: #fff;
-    margin: ${props =>
-      props['data-rtl'] === 'rtl' ? '0 0 20px 20px' : '0 20px 20px 0'};
-    position: relative;
-    border: 1px solid ${palette('border', 0)};
-
-    &:nth-child(2n) {
-      margin: ${props =>
-        props['data-rtl'] === 'rtl' ? '0 0 20px 0' : '0 0 20px 0'};
-    }
-
-    @media only screen and (min-width: 1400px) {
-      width: calc(100% / 3 - 14px);
-
-      &:nth-child(2n) {
-        margin: ${props =>
-          props['data-rtl'] === 'rtl' ? '0 0 20px 20px' : '0 20px 20px 0'};
-      }
-
-      &:nth-child(3n) {
-        margin: ${props =>
-          props['data-rtl'] === 'rtl' ? '0 0 20px' : '0 0 20px'};
-      }
-    }
-
-    @media only screen and (max-width: 550px) {
-      width: 100%;
-      margin: 0 0 20px;
-    }
-
-    @media only screen and (min-width: 768px) and (max-width: 991px) {
-      width: 100%;
-      flex-shrink: 0;
-    }
-
-    .isoAlGridImage {
-      width: 100%;
-      height: 260px;
-      display: -webkit-box;
-      display: -moz-box;
-      display: -ms-flexbox;
-      display: -webkit-flex;
-      display: flex;
-      flex-shrink: 0;
-      align-items: center;
-      -webkit-align-items: center;
-      justify-content: center;
-      -webkit-justify-content: center;
-      overflow: hidden;
-      background-color: #ffffff;
-      position: relative;
-
-      &:after {
-        content: '';
-        width: 100%;
-        height: 100%;
-        display: flex;
-        background-color: rgba(0, 0, 0, 0.6);
-        position: absolute;
-        top: 0;
-        left: 0;
-        opacity: 0;
-        ${transition()};
-      }
-
-      .ant-btn {
-        &.isoAlAddToCart {
-          background-color: #ffffff;
-          border-color: #ffffff !important;
-          color: ${palette('text', 0)};
-          z-index: 1;
-          position: absolute !important;
-          height: 42px;
-          opacity: 0;
-          padding: 0 20px;
-          transform: scale(0.8);
-          ${transition()};
-
-          i {
-            margin: ${props =>
-              props['data-rtl'] === 'rtl' ? '0 0 0 10px' : '0 10px 0 0'};
-            font-size: 14px;
-          }
-
-          &:hover {
-            background-color: ${palette('grayscale', 4)};
-          }
-
-          &.ant-btn-loading {
-            i:not(.anticon-loading) {
-              margin: ${props =>
-                props['data-rtl'] === 'rtl' ? '0 10px 0 0' : '0 0 0 10px'};
-            }
-          }
-        }
-      }
-
-      img {
-        max-width: 100%;
-      }
-
-      @media only screen and (max-width: 991px) {
-        width: 100%;
-        overflow: hidden;
-      }
-    }
-
-    .isoAlGridContents {
-      width: 100%;
-      padding: 20px 25px;
-      display: -webkit-box;
-      display: -moz-box;
-      display: -ms-flexbox;
-      display: -webkit-flex;
-      display: flex;
-      flex-direction: column;
-
-      @media only screen and (max-width: 991px) {
-        margin-top: 15px;
-      }
-
-      .isoAlGridName {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        margin-bottom: 5px;
-
-        .ais-Highlight__nonHighlighted {
-          font-size: 14px;
-          font-weight: 700;
-          color: ${palette('text', 0)};
-          line-height: 1.3;
-        }
-      }
-
-      .isoAlGridPriceRating {
-        display: flex;
-        align-items: center;
-
-        .isoAlGridPrice {
-          font-size: 14px;
-          font-weight: 400;
-          color: #ffffff;
-          padding: 5px 10px;
-          line-height: 1;
-          position: absolute;
-          top: 30px;
-          right: 0px;
-          background-color: ${palette('primary', 9)};
-          ${borderRadius('3px 0 0 3px')};
-        }
-
-        .isoAlGridRating {
-          display: none;
-          .ant-rate {
-            display: flex;
-            .ant-rate-star {
-              font-size: 9px;
-              margin-right: 2px;
-            }
-          }
-        }
-      }
-
-      .isoAlGridDescription {
-        display: none;
-
-        .ais-Highlight__nonHighlighted {
-          font-size: 13px;
-          font-weight: 400;
-          color: ${palette('text', 2)};
-          line-height: 1.5;
-        }
-      }
-    }
-
-    &:hover {
-      .isoAlGridImage {
-        &:after {
-          opacity: 1;
-        }
-
-        .isoAlAddToCart {
-          opacity: 1;
-          transform: scale(1);
-        }
-      }
-    }
-  }
-
-  &.ListView {
-    width: 100%;
-    display: flex;
-    padding: 10px;
-    background-color: #fff;
-    margin-bottom: 15px;
-    border: 1px solid ${palette('border', 0)};
-
-    @media only screen and (max-width: 991px) {
-      flex-direction: column;
-    }
-
-    .isoAlGridImage {
-      width: 240px;
-      height: auto;
-      display: flex;
-      flex-shrink: 0;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-      position: relative;
-      background-color: #ffffff;
-
-      &:after {
-        content: '';
-        width: 100%;
-        height: 100%;
-        display: flex;
-        background-color: rgba(0, 0, 0, 0.6);
-        position: absolute;
-        top: 0;
-        left: 0;
-        opacity: 0;
-        ${transition()};
-      }
-
-      .isoAlAddToCart {
-        background-color: #ffffff;
-        border-color: #ffffff !important;
-        color: ${palette('text', 0)};
-        z-index: 1;
-        position: absolute !important;
-        height: 42px;
-        opacity: 0;
-        padding: 0 20px;
-        direction: ${props => (props['data-rtl'] === 'rtl' ? 'rtl' : 'ltr')};
-        transform: scale(0.8);
-        ${transition()};
-
-        i {
-          margin: ${props =>
-            props['data-rtl'] === 'rtl' ? '0 0 0 10px' : '0 10px 0 0'};
-          font-size: 14px;
-        }
-
-        &:hover {
-          background-color: ${palette('grayscale', 4)};
-        }
-      }
-
-      &:hover {
-        &:after {
-          opacity: 1;
-        }
-
-        .isoAlAddToCart {
-          opacity: 1;
-          transform: scale(1);
-        }
-      }
-
-      img {
-        max-width: 100%;
-      }
-
-      @media only screen and (max-width: 991px) {
-        width: 100%;
-        height: auto;
-        overflow: hidden;
-      }
-    }
-
-    .isoAlGridContents {
-      width: 100%;
-      padding: 30px 15px;
-      padding-left: 30px;
-      display: flex;
-      flex-direction: column;
-
-      @media only screen and (max-width: 991px) {
-        margin-top: 15px;
-      }
-
-      .isoAlGridName {
-        .ais-Highlight__nonHighlighted {
-          font-size: 16px;
-          font-weight: 700;
-          color: ${palette('text', 0)};
-          line-height: 1.3;
-          margin-bottom: 10px;
-          display: flex;
-        }
-      }
-
-      .isoAlGridPriceRating {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 20px;
-
-        .isoAlGridPrice {
-          font-size: 14px;
-          font-weight: 400;
-          color: ${palette('text', 0)};
-          line-height: 1;
-        }
-
-        .isoAlGridRating {
-          .ant-rate {
-            display: flex;
-            .ant-rate-star {
-              font-size: 9px;
-              margin-right: 2px;
-            }
-          }
-        }
-      }
-
-      .isoAlGridDescription {
-        .ais-Highlight__nonHighlighted {
-          font-size: 13px;
-          font-weight: 400;
-          color: ${palette('text', 2)};
-          line-height: 1.5;
-        }
-      }
-    }
-  }
-`;
-
-const WDTopbarWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  margin-bottom: 27px;
-  flex-wrap: wrap;
-
-  .ais-Stats__root {
-    font-family: ${font('primary', 0)};
-    font-size: 14px;
-    font-weight: 500;
-    color: ${palette('text', 0)};
-
-    @media only screen and (max-width: 991px) {
-      width: 100%;
-      margin-bottom: 15px;
-    }
-  }
-
-  .ais-SortBy__root {
-    margin-left: ${props => (props['data-rtl'] === 'rtl' ? '20px' : 'auto')};
-    margin-right: ${props => (props['data-rtl'] === 'rtl' ? 'auto' : '20px')};
-    border: 1px solid ${palette('border', 0)};
-
-    &:focus {
-      background-color: #ffffff;
-    }
-
-    @media only screen and (max-width: 991px) {
-      margin: ${props =>
-        props['data-rtl'] === 'rtl' ? '0 0 0 auto' : '0 auto 0 0'};
-    }
-  }
-
-  .isoViewChanger {
-    display: flex;
-    align-items: center;
-
-    button {
-      font-size: 16px;
-      color: ${palette('secondary', 0)};
-      text-align: center;
-      width: 35px;
-      height: 35px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: #ffffff;
-      outline: 0;
-      padding: 0;
-      border: 1px solid ${palette('border', 0)};
-      margin-left: -1px;
-      cursor: pointer;
-      ${transition()};
-
-      i {
-        font-size: 18px;
-        color: ${palette('secondary', 0)};
-        width: 100%;
-        line-height: 33px;
-        ${transition()};
-      }
-
-      &.active {
-        background-color: ${palette('primary', 9)};
-        border-color: ${palette('primary', 9)};
-        i {
-          color: #ffffff;
-        }
-      }
-
-      &:first-child {
-        margin-left: 0;
-      }
-
-      &:hover {
-        color: #ffffff;
-        background-color: #265cda;
-        border-color: #265cda;
-
-        i {
-          color: #ffffff;
-        }
-      }
-    }
-  }
-`;
-
-const WDVoiceSearchWrapper = styled.div`
-  width: 100%;
-  padding: 10px 15px;
-  display: flex;
-  background-color: #ffffff;
-  margin-bottom: 15px;
-  border: 1px solid ${palette('border', 0)};
-  ${borderRadius('3px')};
-
-  div {
-    width: 100%;
-    display: flex;
-    align-items: center;
-  }
-
-  button {
-    width: 30px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    position: relative;
-    outline: 0;
-    cursor: pointer;
-    background-color: transparent;
-    border: 2px solid ${palette('border', 0)};
-    ${transition()};
-    ${borderRadius('50%')};
-
-    &:before {
-      content: '';
-      font-size: 17px;
-      font-family: 'ionicons';
-      color: ${palette('grayscale', 0)};
-      -webkit-transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-      -moz-transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-      -ms-transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-      -o-transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-      transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-    }
-
-    &:hover {
-      border-color: ${palette('primary', 0)};
-
-      &:before {
-        color: ${palette('primary', 0)};
-      }
-    }
-  }
-
-  span {
-    font-size: 14px;
-    font-weight: 400;
-    color: ${palette('text', 2)};
-    line-height: 1.4;
-    margin: ${props =>
-      props['data-rtl'] === 'rtl' ? '0 10px 0 0' : '0 0 0 10px'};
-  }
-
-  .isoVoiceSearchStart {
-    button {
-      &:before {
-        content: '\f2ec';
-      }
-    }
-  }
-
-  .isoVoiceSearchRunning {
-    button {
-      border-color: ${palette('primary', 0)};
-
-      &:before {
-        content: '\f24f';
-        color: ${palette('primary', 0)};
-        font-size: 13px;
-      }
-    }
-  }
-`;
-
-const WDFooterWrapper = styled.footer`
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: flex-end;
-  margin-top: 40px;
-
-  span {
-    font-size: 14px;
-    font-weight: 700;
-    color: ${palette('text', 2)};
-    line-height: 1.3;
-    margin: ${props =>
-      props['data-rtl'] === 'rtl' ? '0 0 0 20px' : '0 20px 0 0'};
-  }
-
-  .isoLogoWrapper {
-    max-width: 150px;
-
-    img {
-      max-width: 100%;
-    }
-  }
-`;
-
-const LoaderElement = styled.div`
-  width: 100%;
-  height: 80vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .loaderElement {
-    height: 3em;
-    width: 3em;
-    animation: rotation 1s infinite linear;
-    border: 2px solid rgba(51, 105, 231, 0.3);
-    border-top-color: rgb(51, 105, 231);
-    border-radius: 50%;
-  }
-
-  @keyframes rotation {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-`;
-
-const PaginationStyleWrapper = styled.div`
-  .ais-Pagination__root {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    padding: 8px 16px;
-    border: 1px solid ${palette('border', 0)};
-    ${borderRadius('3px')};
-    ${boxShadow()};
-
-    .ais-Pagination__item {
-      padding: 3px;
-
-      &.ais-Pagination__itemSelected {
-        &:hover {
-          background-color: ${palette('primary', 9)};
-          a {
-            color: #ffffff;
-          }
-        }
-      }
-
-      a {
-        text-decoration: none;
-      }
-    }
-  }
-`;
-
-const SidebarWrapper = WithDirection(WDSidebarWrapper);
-const ContentWrapper = WithDirection(WDContentWrapper);
-const VoiceSearchWrapper = WithDirection(WDVoiceSearchWrapper);
-const GridListViewWrapper = WithDirection(WDGridListViewWrapper);
-const TopbarWrapper = WithDirection(WDTopbarWrapper);
-const FooterWrapper = WithDirection(WDFooterWrapper);
-
-export {
-  SidebarWrapper,
-  ContentWrapper,
-  FooterWrapper,
-  GridListViewWrapper,
-  VoiceSearchWrapper,
-  LoaderElement,
-  TopbarWrapper,
-  PaginationStyleWrapper,
-};
diff --git a/src/components/Algolia/Footer.js b/src/components/Algolia/Footer.js
deleted file mode 100644
index a0391ff..0000000
--- a/src/components/Algolia/Footer.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import AlgoliaLogo from './algolia.svg';
-import { FooterWrapper } from './AlgoliaComponent.style';
-
-const Footer = () => (
-  <FooterWrapper className="isoAlgoliaFooter">
-    <span>Powred by</span>
-    <div className="isoLogoWrapper">
-      <img alt="#" src={process.env.PUBLIC_URL + AlgoliaLogo} />
-    </div>
-  </FooterWrapper>
-);
-
-export default Footer;
diff --git a/src/components/Algolia/RangeSlider.js b/src/components/Algolia/RangeSlider.js
deleted file mode 100644
index bc249e5..0000000
--- a/src/components/Algolia/RangeSlider.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connectRange } from 'react-instantsearch/connectors';
-import 'rheostat/initialize';
-import 'rheostat/css/rheostat.css';
-import Rheostat from 'rheostat';
-
-class Range extends Component {
-  static propTypes = {
-    min: PropTypes.number,
-    max: PropTypes.number,
-    currentRefinement: PropTypes.object,
-    refine: PropTypes.func.isRequired,
-    canRefine: PropTypes.bool.isRequired,
-  };
-
-  state = { currentValues: { min: this.props.min, max: this.props.max } };
-
-  componentWillReceiveProps(sliderState) {
-    if (sliderState.canRefine) {
-      this.setState({
-        currentValues: {
-          min: sliderState.currentRefinement.min,
-          max: sliderState.currentRefinement.max,
-        },
-      });
-    }
-  }
-
-  onValuesUpdated = sliderState => {
-    this.setState({
-      currentValues: { min: sliderState.values[0], max: sliderState.values[1] },
-    });
-  };
-
-  onChange = sliderState => {
-    if (
-      this.props.currentRefinement.min !== sliderState.values[0] ||
-      this.props.currentRefinement.max !== sliderState.values[1]
-    ) {
-      this.props.refine({
-        min: sliderState.values[0],
-        max: sliderState.values[1],
-      });
-    }
-  };
-
-  render() {
-    const { min, max, currentRefinement } = this.props;
-    const { currentValues } = this.state;
-    return min !== max ? (
-      <div className="isoAlRangeSlider">
-        <div className="isoAlRangeNumber">
-          <span>{currentValues.min}</span> -<span>{currentValues.max}</span>
-        </div>
-        <Rheostat
-          min={min}
-          max={max}
-          values={[currentRefinement.min, currentRefinement.max]}
-          onChange={this.onChange}
-          onValuesUpdated={this.onValuesUpdated}
-        />
-      </div>
-    ) : null;
-  }
-}
-
-const RangeSlider = connectRange(Range);
-export default RangeSlider;
diff --git a/src/components/Algolia/Sidebar.js b/src/components/Algolia/Sidebar.js
deleted file mode 100644
index de31366..0000000
--- a/src/components/Algolia/Sidebar.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import {
-  RefinementList,
-  StarRating,
-  Toggle,
-  HierarchicalMenu,
-  SearchBox,
-  MultiRange,
-  ClearAll,
-} from 'react-instantsearch/dom';
-import RangeSlider from './RangeSlider';
-import VoiceRecognition from './VoiceRecognition';
-import { SidebarWrapper } from './AlgoliaComponent.style';
-
-export default ({ setVoice }) => (
-  <SidebarWrapper className="isoAlgoliaSidebar">
-    <SearchBox translations={{ placeholder: 'Search here' }} />
-    <VoiceRecognition setVoice={setVoice} />
-
-    <div className="isoAlgoliaSidebarItem">
-      <h3 className="isoAlgoliaSidebarTitle">Multi Range</h3>
-      <MultiRange
-        attributeName="price"
-        items={[
-          { end: 10, label: '<$10' },
-          { start: 10, end: 100, label: '$10-$100' },
-          { start: 100, end: 500, label: '$100-$500' },
-          { start: 500, label: '>$500' },
-        ]}
-      />
-    </div>
-
-    <div className="isoAlgoliaSidebarItem">
-      <h3 className="isoAlgoliaSidebarTitle" style={{ marginBottom: 10 }}>
-        Slider
-      </h3>
-      <RangeSlider attributeName="price" />
-    </div>
-
-    <div className="isoAlgoliaSidebarItem">
-      <h3 className="isoAlgoliaSidebarTitle">Category</h3>
-      <RefinementList attributeName="categories" />
-    </div>
-
-    <div className="isoAlgoliaSidebarItem">
-      <h3 className="isoAlgoliaSidebarTitle">Brand</h3>
-      <RefinementList attributeName="brand" withSearchBox />
-    </div>
-
-    <div className="isoAlgoliaSidebarItem">
-      <HierarchicalMenu
-        attributes={[
-          'hierarchicalCategories.lvl0',
-          'hierarchicalCategories.lvl1',
-          'hierarchicalCategories.lvl2',
-        ]}
-      />
-    </div>
-    <div className="isoAlgoliaSidebarItem">
-      <h3 className="isoAlgoliaSidebarTitle">Rating</h3>
-      <StarRating attributeName="rating" style={{ background: '#ff0000' }} />
-    </div>
-    <div className="isoAlgoliaSidebarItem isoInline">
-      <h3 className="isoAlgoliaSidebarTitle">Toggle</h3>
-      <Toggle attributeName="free_shipping" label="Free Shipping" />
-    </div>
-
-    <ClearAll />
-  </SidebarWrapper>
-);
diff --git a/src/components/Algolia/VoiceRecognition.js b/src/components/Algolia/VoiceRecognition.js
deleted file mode 100644
index 4bc5ede..0000000
--- a/src/components/Algolia/VoiceRecognition.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { Component } from 'react';
-import { PropTypes } from 'prop-types';
-import SpeechRecognition from 'react-speech-recognition';
-import { VoiceSearchWrapper } from './AlgoliaComponent.style';
-
-const propTypes = {
-  transcript: PropTypes.string,
-  resetTranscript: PropTypes.func,
-  browserSupportsSpeechRecognition: PropTypes.bool,
-};
-const options = {
-  autoStart: false,
-};
-class VoiceRecognition extends Component {
-  state = {
-    listening: false,
-  };
-  render() {
-    const {
-      transcript,
-      resetTranscript,
-      browserSupportsSpeechRecognition,
-      startListening,
-      stopListening,
-      setVoice,
-    } = this.props;
-    if (!browserSupportsSpeechRecognition) {
-      return <div />;
-    }
-    return (
-      <VoiceSearchWrapper className="isoVoiceSearch">
-        {!this.state.listening ? (
-          <div className="isoVoiceSearchStart">
-            <button
-              onClick={() => {
-                startListening();
-                this.setState({ listening: true });
-              }}
-            />
-            <span>Start Speaking</span>
-          </div>
-        ) : (
-          <div className="isoVoiceSearchRunning">
-            <button
-              onClick={() => {
-                setVoice(transcript);
-                resetTranscript();
-                stopListening();
-                this.setState({ listening: false });
-              }}
-            />
-            {/* <span>Search</span> */}
-            <span>{transcript}</span>
-          </div>
-        )}
-      </VoiceSearchWrapper>
-    );
-  }
-}
-VoiceRecognition.propTypes = propTypes;
-export default SpeechRecognition(options)(VoiceRecognition);
diff --git a/src/components/Algolia/algolia.svg b/src/components/Algolia/algolia.svg
deleted file mode 100644
index 586422d..0000000
--- a/src/components/Algolia/algolia.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="512px" height="127px" viewBox="0 0 512 127" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
-    <defs>
-        <linearGradient x1="-37.754498%" y1="134.908438%" x2="130.272074%" y2="-27.6847754%" id="linearGradient-1">
-            <stop stop-color="#00AEFF" offset="0%"></stop>
-            <stop stop-color="#3369E7" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-	<g>
-		<path d="M16.7,0 L110,0 C119.2,0 126.7,7.5 126.7,16.7 L126.7,110.1 C126.7,119.3 119.2,126.8 110,126.8 L16.7,126.8 C7.5,126.8 0,119.3 0,110.1 L0,16.6 C0,7.5 7.5,0 16.7,0 Z" fill="url(#linearGradient-1)"></path>
-		<path d="M64.8,32 C45.1,32 29,48.1 29,67.9 C29,87.7 45,103.7 64.8,103.7 C84.6,103.7 100.6,87.7 100.6,67.9 C100.6,48.1 84.6,32 64.8,32 Z M64.8,93.1 C50.9,93.1 39.6,81.8 39.6,67.9 C39.6,54 50.9,42.7 64.8,42.7 C78.7,42.7 90,53.9 90,67.9 C90,81.9 78.8,93.1 64.8,93.1 Z M64.8,47.8 L64.8,66.6 C64.8,67.1 65.4,67.5 65.9,67.3 L82.6,58.6 C83,58.4 83.1,57.9 82.9,57.6 C79.4,51.5 73,47.4 65.6,47.1 C65.2,47.1 64.8,47.4 64.8,47.8 Z M41.4,34 L39.2,31.8 C37,29.6 33.6,29.6 31.4,31.8 L28.8,34.4 C26.6,36.6 26.6,40 28.8,42.2 L31,44.4 C31.3,44.7 31.8,44.7 32.2,44.3 C33.5,42.6 34.9,40.9 36.4,39.4 C38,37.8 39.6,36.4 41.4,35.2 C41.7,34.9 41.8,34.3 41.4,34 Z M76.6,28.3 L76.6,24 C76.6,21 74.1,18.5 71.1,18.5 L58.3,18.5 C55.3,18.5 52.8,21 52.8,24 L52.8,28.5 C52.8,29 53.3,29.3 53.8,29.2 C57.4,28.2 61.1,27.6 65,27.6 C68.7,27.6 72.3,28.1 75.8,29.1 C76.1,29.1 76.6,28.8 76.6,28.3 Z" fill="#FFFFFF"></path>
-		<path d="M316.9,97 C316.9,107.3 314.3,114.8 309,119.5 C303.7,124.3 295.7,126.7 284.9,126.7 C280.9,126.7 272.7,125.9 266.1,124.5 L268.5,112.6 C274,113.8 281.3,114.1 285.1,114.1 C291.1,114.1 295.4,112.9 298,110.4 C300.6,107.9 301.8,104.3 301.8,99.4 L301.8,96.9 C300.3,97.6 298.3,98.4 295.9,99.1 C293.5,99.8 290.7,100.2 287.5,100.2 C283.3,100.2 279.6,99.5 276.2,98.2 C272.8,96.9 269.8,95 267.4,92.4 C265,89.9 263.1,86.7 261.7,82.9 C260.3,79.1 259.7,72.3 259.7,67.3 C259.7,62.6 260.4,56.7 261.9,52.8 C263.4,48.9 265.4,45.5 268.2,42.7 C271,39.9 274.4,37.7 278.3,36.2 C282.3,34.6 286.9,33.6 291.9,33.6 C296.8,33.6 301.3,34.2 305.7,34.9 C310.1,35.6 313.8,36.4 316.9,37.2 L316.9,97 L316.9,97 Z M275.1,67.3 C275.1,73.6 276.5,80.6 279.3,83.5 C282.1,86.4 285.6,87.9 290,87.9 C292.4,87.9 294.7,87.6 296.8,86.9 C298.9,86.2 300.6,85.5 302,84.6 L302,47.2 C300.9,47 296.4,46 292.1,45.9 C286.6,45.7 282.5,48 279.6,51.6 C276.5,55.2 275.1,61.4 275.1,67.3 Z M388.2,67.3 C388.2,72.4 387.5,76.2 386,80.4 C384.5,84.6 382.4,88.2 379.7,91.1 C377,94 373.7,96.4 369.9,98 C366.1,99.6 360.1,100.5 357.2,100.5 C354.2,100.5 348.4,99.6 344.5,98 C340.7,96.3 337.4,94.1 334.7,91.1 C332,88.1 329.9,84.6 328.3,80.4 C326.8,76.2 326,72.4 326,67.3 C326,62.2 326.7,57.3 328.2,53.2 C329.7,49 331.9,45.5 334.7,42.5 C337.5,39.5 340.8,37.3 344.5,35.7 C348.3,34.1 352.5,33.3 357,33.3 C361.5,33.3 365.7,34.1 369.6,35.7 C373.4,37.3 376.8,39.6 379.4,42.5 C382.1,45.5 384.2,49 385.8,53.2 C387.4,57.3 388.2,62.2 388.2,67.3 Z M372.8,67.3 C372.8,60.8 371.4,55.4 368.6,51.6 C365.8,47.8 361.9,45.9 357,45.9 C352.1,45.9 348.2,47.8 345.4,51.6 C342.6,55.4 341.3,60.8 341.3,67.3 C341.3,73.9 342.7,78.3 345.5,82.1 C348.3,85.9 352.2,87.8 357.1,87.8 C362,87.8 365.9,85.9 368.7,82.1 C371.5,78.3 372.8,73.9 372.8,67.3 Z M421.7,100.5 C397.1,100.6 397.1,80.6 397.1,77.4 L397.1,6.3 L412.1,3.9 L412.1,74.5 C412.1,76.3 412.1,87.8 421.8,87.8 L421.7,100.5 L421.7,100.5 Z M448.2,100.5 L433.1,100.5 L433.1,35.6 L448.2,33.2 L448.2,100.5 Z M440.6,26.1 C445.6,26.1 449.8,22 449.8,17 C449.8,12 445.7,7.9 440.6,7.9 C435.5,7.9 431.4,12 431.4,17 C431.4,22 435.6,26.1 440.6,26.1 Z M485.8,33.3 C490.8,33.3 495,33.9 498.3,35.1 C501.7,36.3 504.4,38.1 506.4,40.3 C508.4,42.5 509.8,45.5 510.7,48.6 C511.6,51.8 512,55.2 512,59 L512,97.7 C509.7,98.2 506.2,98.8 501.5,99.5 C496.8,100.2 491.5,100.5 485.7,100.5 C481.8,100.5 478.2,100.1 475,99.4 C471.8,98.7 469,97.5 466.7,95.8 C464.4,94.1 462.7,92 461.4,89.4 C460.1,86.8 459.5,83.1 459.5,79.2 C459.5,75.5 460.2,73.2 461.7,70.6 C463.2,68.1 465.1,66 467.6,64.4 C470.1,62.8 472.9,61.6 476.2,60.9 C479.5,60.2 482.9,59.9 486.4,59.9 C488.1,59.9 489.8,60 491.6,60.2 C493.4,60.4 495.4,60.7 497.4,61.2 L497.4,58.7 C497.4,57 497.2,55.3 496.8,53.8 C496.4,52.2 495.6,50.9 494.6,49.7 C493.6,48.5 492.2,47.6 490.5,46.9 C488.8,46.2 486.7,45.7 484.1,45.7 C480.6,45.7 477.5,46.1 474.6,46.6 C471.7,47.1 469.3,47.7 467.5,48.3 L465.7,36 C467.6,35.3 470.4,34.7 474,34 C477.7,33.6 481.6,33.3 485.8,33.3 Z M487,87.9 C491.6,87.9 495,87.6 497.4,87.2 L497.4,71.8 C496.6,71.6 495.4,71.3 493.8,71.1 C492.2,70.9 490.5,70.7 488.6,70.7 C486.9,70.7 485.3,70.8 483.6,71.1 C481.9,71.3 480.4,71.8 479,72.4 C477.7,73.1 476.5,74 475.7,75.2 C474.9,76.4 474.5,77.1 474.5,78.9 C474.5,82.4 475.7,84.5 478,85.8 C480.2,87.2 483.2,87.9 487,87.9 Z M190.1,33.7 C195.1,33.7 199.3,34.3 202.6,35.5 C206,36.7 208.7,38.5 210.7,40.7 C212.7,42.9 214.1,45.9 215,49 C215.9,52.2 216.3,55.6 216.3,59.4 L216.3,98.1 C214,98.6 210.5,99.2 205.8,99.9 C201.1,100.6 195.8,100.9 190,100.9 C186.1,100.9 182.5,100.5 179.3,99.8 C176.1,99.1 173.3,97.9 171,96.2 C168.7,94.5 167,92.4 165.7,89.8 C164.4,87.2 163.8,83.5 163.8,79.6 C163.8,75.9 164.5,73.6 166,71 C167.5,68.5 169.4,66.4 171.9,64.8 C174.4,63.2 177.2,62 180.5,61.3 C183.8,60.6 187.2,60.3 190.7,60.3 C192.4,60.3 194.1,60.4 195.9,60.6 C197.7,60.8 199.7,61.1 201.7,61.6 L201.7,59.1 C201.7,57.4 201.5,55.7 201.1,54.2 C200.7,52.6 199.9,51.3 198.9,50.1 C197.9,48.9 196.5,48 194.8,47.3 C193.1,46.6 191,46.1 188.4,46.1 C184.9,46.1 181.8,46.5 178.9,47 C176,47.5 173.6,48.1 171.8,48.7 L170,36.4 C171.9,35.7 174.7,35.1 178.3,34.4 C182.1,34 186,33.7 190.1,33.7 Z M191.4,88.3 C196,88.3 199.4,88 201.8,87.6 L201.8,72.2 C201,72 199.8,71.7 198.2,71.5 C196.6,71.3 194.9,71.1 193,71.1 C191.3,71.1 189.7,71.2 188,71.5 C186.3,71.7 184.8,72.2 183.4,72.8 C182,73.4 180.9,74.4 180.1,75.6 C179.3,76.8 178.9,77.5 178.9,79.3 C178.9,82.8 180.1,84.9 182.4,86.2 C184.6,87.6 187.6,88.3 191.4,88.3 Z M252.4,100.5 C227.8,100.6 227.8,80.6 227.8,77.4 L227.8,6.3 L242.8,3.9 L242.8,74.5 C242.8,76.3 242.8,87.8 252.5,87.8 L252.5,100.5 L252.4,100.5 Z" fill="#182359"></path>
-	</g>
-</svg>
diff --git a/src/components/AvatarCard/AvatarCard.js b/src/components/AvatarCard/AvatarCard.js
deleted file mode 100644
index d51484d..0000000
--- a/src/components/AvatarCard/AvatarCard.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import CardWrapper, { Avatar, Info } from './AvatarCard.style';
-
-const AvatarCard = ({ className, avatar, name, username }) => {
-  return (
-    <CardWrapper className={`avatar-card ${className ? className : ''}`}>
-      {avatar && (
-        <Avatar className="avatar">
-          <img src={avatar} alt={name} />
-        </Avatar>
-      )}
-      {name || username ? (
-        <Info className="info">
-          {name && <h3 className="name">{name}</h3>}
-          {username && <p className="username">{username}</p>}
-        </Info>
-      ) : (
-        ''
-      )}
-    </CardWrapper>
-  );
-};
-
-export default AvatarCard;
diff --git a/src/components/AvatarCard/AvatarCard.style.js b/src/components/AvatarCard/AvatarCard.style.js
deleted file mode 100644
index 5e914b3..0000000
--- a/src/components/AvatarCard/AvatarCard.style.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-
-const CardWrapper = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-export const Avatar = styled.div`
-  width: 170px;
-  height: 170px;
-  border-radius: 50%;
-  overflow: hidden;
-  flex-shrink: 0;
-  border: 4px solid #ffffff;
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-`;
-
-export const Info = styled.div`
-  width: calc(100% - 170px);
-  padding-left: 10px;
-`;
-
-export default CardWrapper;
diff --git a/src/components/Cart/SingleCart.js b/src/components/Cart/SingleCart.js
deleted file mode 100644
index 2fec6d9..0000000
--- a/src/components/Cart/SingleCart.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import InputNumber from '../uielements/InputNumber';
-import { notification } from '../index';
-
-export default function({
-  price,
-  quantity,
-  image,
-  objectID,
-  cancelQuantity,
-  changeQuantity,
-  _highlightResult,
-}) {
-  const onChange = value => {
-    if (!isNaN(value)) {
-      if (value !== quantity) {
-        changeQuantity(objectID, value);
-      }
-    } else {
-      notification('error', 'Please give valid number');
-    }
-  };
-
-  const totalPrice = (price * quantity).toFixed(2);
-  return (
-    <tr>
-      <td
-        className="isoItemRemove"
-        onClick={() => {
-          cancelQuantity(objectID);
-        }}
-      >
-        <a href="# ">
-          <i className="ion-android-close" />
-        </a>
-      </td>
-      <td className="isoItemImage">
-        <img alt="#" src={image} />
-      </td>
-      <td className="isoItemName">
-        <h3>{_highlightResult.name.value}</h3>
-        <p>{_highlightResult.description.value}</p>
-      </td>
-      <td className="isoItemPrice">
-        <span className="itemPricePrefix">$</span>
-        {price.toFixed(2)}
-      </td>
-      <td className="isoItemQuantity">
-        <InputNumber
-          min={1}
-          max={1000}
-          value={quantity}
-          step={1}
-          onChange={onChange}
-        />
-      </td>
-      <td className="isoItemPriceTotal">${totalPrice}</td>
-    </tr>
-  );
-}
diff --git a/src/components/Cart/SingleCartModal.js b/src/components/Cart/SingleCartModal.js
deleted file mode 100644
index af62ac5..0000000
--- a/src/components/Cart/SingleCartModal.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import TopbarCartWrapper from './SingleCartModal.style';
-
-export default function({
-  price,
-  quantity,
-  image,
-  objectID,
-  cancelQuantity,
-  _highlightResult,
-}) {
-  return (
-    <TopbarCartWrapper className="isoCartItems">
-      <div className="isoItemImage">
-        <img alt="#" src={image} />
-      </div>
-      <div className="isoCartDetails">
-        <h3>
-          <a href="#!">{_highlightResult.name.value}</a>
-        </h3>
-        <p className="isoItemPriceQuantity">
-          <span>$</span>
-          <span>{price.toFixed(2)}</span>
-          <span className="itemMultiplier">X</span>
-          <span className="isoItemQuantity">{quantity}</span>
-        </p>
-      </div>
-      <a
-        className="isoItemRemove"
-        onClick={() => cancelQuantity(objectID)}
-        href="#!"
-      >
-        <i className="ion-android-close" />
-      </a>
-    </TopbarCartWrapper>
-  );
-}
diff --git a/src/components/Cart/SingleCartModal.style.js b/src/components/Cart/SingleCartModal.style.js
deleted file mode 100644
index f56ac19..0000000
--- a/src/components/Cart/SingleCartModal.style.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import styled from 'styled-components';
-import { palette } from 'styled-theme';
-import { transition } from '@imd/lib/helpers/style_utils';
-import WithDirection from '@imd/lib/helpers/rtl';
-const TopbarCartWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding: 15px 30px;
-  flex-shrink: 0;
-  position: relative;
-  border-bottom: 1px solid ${palette('border', 2)};
-  ${transition()};
-
-  .isoItemImage {
-    width: 50px;
-    height: 50px;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-
-  .isoCartDetails {
-    width: 100%;
-    display: flex;
-    padding: ${props =>
-      props['data-rtl'] === 'rtl' ? '0 20px 0 0' : '0 0 0 20px'};
-    flex-direction: column;
-    text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')};
-
-    h3 {
-      margin: 0 0 5px;
-      line-height: 1;
-
-      a {
-        font-size: 13px;
-        font-weight: 500;
-        color: ${palette('text', 0)};
-        line-height: 1.3;
-        text-decoration: none;
-      }
-    }
-
-    p {
-      display: flex;
-      margin: 0;
-
-      span {
-        font-size: 12px;
-        font-weight: 400;
-        color: ${palette('text', 2)};
-        line-height: 1.2;
-
-        &.itemMultiplier {
-          padding: 0 3px;
-        }
-      }
-    }
-  }
-
-  .isoItemRemove {
-    position: absolute;
-    right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '15px')};
-    left: ${props => (props['data-rtl'] === 'rtl' ? '15px' : 'inherit')};
-    font-size: 13px;
-    font-weight: 500;
-    color: ${palette('text', 0)} !important;
-    opacity: 0;
-    ${transition()};
-  }
-
-  &:hover {
-    background-color: ${palette('grayscale', 3)};
-
-    .isoItemRemove {
-      opacity: 1;
-    }
-  }
-`;
-
-export default WithDirection(TopbarCartWrapper);
diff --git a/src/components/Chat/InputName.js b/src/components/Chat/InputName.js
deleted file mode 100644
index 6cd9a32..0000000
--- a/src/components/Chat/InputName.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import AutoComplete, { AutoCompleteOption } from '../uielements/autocomplete';
-import UserItem from './InputName.style';
-
-export default function(props) {
-  const [state, setState] = React.useState({
-    value: '',
-    result: [],
-  });
-
-  const handleSearch = value => {
-    const result = [];
-    if (value) {
-      props.users.forEach(user => {
-        if (user.name.toLowerCase().indexOf(value.toLowerCase()) > -1) {
-          result.push(user);
-        }
-      });
-    }
-    setState({ ...state, result, value });
-  };
-  const onSelect = id => {
-    if (id) {
-      state.result.forEach(user => {
-        if (user.id === id) {
-          setState({ ...state, value: user.name });
-        }
-      });
-    }
-  };
-  const { result, value } = state;
-  return (
-    <AutoComplete
-      value={value}
-      onSelect={onSelect}
-      onSearch={handleSearch}
-      placeholder="find your buddy"
-      style={{ marginBottom: 10 }}
-    >
-      {result.map(user => (
-        <AutoCompleteOption key={user.id} style={{ display: 'flex' }}>
-          <UserItem
-            onClick={() => {
-              setState({ ...state, value: user.name, result: [] });
-              props.setComposedId(user.id);
-            }}
-          >
-            <div className="userImg">
-              <img alt="#" src={user.profileImageUrl} />
-            </div>
-
-            <span className="suggetionText">{user.name}</span>
-          </UserItem>
-        </AutoCompleteOption>
-      ))}
-    </AutoComplete>
-  );
-}
diff --git a/src/components/Chat/InputName.style.js b/src/components/Chat/InputName.style.js
deleted file mode 100644
index de85444..0000000
--- a/src/components/Chat/InputName.style.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import styled from 'styled-components';
-import { palette } from 'styled-theme';
-
-const UserItem = styled.div`
-  display: flex;
-  align-items: center;
-
-  .userImg {
-    width: 35px;
-    height: 35px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    border-radius: 50%;
-    margin-right: 15px;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-
-  .suggetionText {
-    font-size: 13px;
-    color: ${palette('text', 0)};
-    font-weight: 500;
-    margin: 0;
-  }
-`;
-
-export default UserItem;
diff --git a/src/components/Chat/ViewProfile.js b/src/components/Chat/ViewProfile.js
deleted file mode 100644
index c1800f8..0000000
--- a/src/components/Chat/ViewProfile.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-import { ViewProfileWrapper, SingleInfoWrapper } from './ViewProfile.style';
-
-const SingleInfo = ({ title, value }) => (
-  <SingleInfoWrapper>
-    <span className="viewProfileTitle">{title}</span>
-    <span className="viewProfileValue">{value}</span>
-  </SingleInfoWrapper>
-);
-export default function({
-  viewProfile,
-  toggleViewProfile,
-  toggleMobileProfile,
-}) {
-  if (!viewProfile) {
-    return null;
-  }
-  const {
-    name,
-    dob,
-    mobileNo,
-    gender,
-    language,
-    profileImageUrl,
-  } = viewProfile;
-  return (
-    <ViewProfileWrapper>
-      <div className="viewProfileTopBar">
-        Contact Info
-        <span
-          onClick={() => {
-            if (toggleMobileProfile) {
-              toggleMobileProfile(false);
-            }
-            toggleViewProfile(false);
-          }}
-        >
-          <i className="ion-android-close" />
-        </span>
-      </div>
-      <div className="viewProfileContent">
-        <div className="viewProfileImage">
-          <img alt="#" src={profileImageUrl} />
-          <h1>{name}</h1>
-        </div>
-        <div className="viewProfileQuickInfo">
-          <SingleInfo title="Name" value={name} />
-          <SingleInfo title="Date of Birth" value={dob} />
-          <SingleInfo title="Mobile No" value={mobileNo} />
-          <SingleInfo title="Gender" value={gender} />
-          <SingleInfo title="Language" value={language} />
-        </div>
-      </div>
-    </ViewProfileWrapper>
-  );
-}
diff --git a/src/components/Chat/ViewProfile.style.js b/src/components/Chat/ViewProfile.style.js
deleted file mode 100644
index 4cf94b7..0000000
--- a/src/components/Chat/ViewProfile.style.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import styled from 'styled-components';
-import { palette } from 'styled-theme';
-
-const ViewProfileWrapper = styled.div`
-  background: #ffffff;
-  border: 1px solid ${palette('border', 0)};
-  overflow: auto;
-  position: absolute;
-  right: 0;
-  width: 95%;
-  height: 100%;
-
-  .viewProfileTopBar {
-    background: ${palette('grayscale', 4)};
-    border-bottom: 1px solid ${palette('border', 0)};
-    padding: 25px 20px 25px 30px;
-    display: flex;
-    justify-content: space-between;
-    line-height: 1;
-
-    span {
-      margin: 0;
-      margin-left: 15px;
-      cursor: pointer;
-      i {
-        font-size: 14px;
-        font-weight: normal;
-      }
-    }
-  }
-  .viewProfileContent {
-    padding: 30px 30px 0;
-  }
-  .viewProfileImage {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  h1 {
-    font-size: 21px;
-    text-align: center;
-    font-weight: 300;
-    margin-bottom: 30px;
-    margin-top: 10px;
-    color: #212121;
-  }
-  img {
-    height: 120px;
-    border-radius: 6px;
-  }
-  .viewProfileQuickInfo {
-    border-top: 1px solid ${palette('border', 2)};
-    padding-top: 40px;
-  }
-  @media only screen and (min-width: 768px) {
-    width: 350px;
-  }
-`;
-
-const SingleInfoWrapper = styled.div`
-  display: flex;
-
-  .viewProfileTitle {
-    width: 35%;
-    font-size: 13px;
-    font-weight: 500;
-    font-weight: light;
-    color: ${palette('text', 0)};
-    margin-bottom: 30px;
-  }
-  .viewProfileValue {
-    width: 65%;
-    text-align: right;
-    font-size: 13px;
-    color: ${palette('text', 1)};
-    margin-bottom: 30px;
-  }
-`;
-
-export { ViewProfileWrapper, SingleInfoWrapper };
diff --git a/src/components/Contacts/ContactCard.style.js b/src/components/Contacts/ContactCard.style.js
deleted file mode 100644
index aba6d81..0000000
--- a/src/components/Contacts/ContactCard.style.js
+++ /dev/null
@@ -1,236 +0,0 @@
-import styled from 'styled-components';
-import { palette } from 'styled-theme';
-import {
-  transition,
-  borderRadius,
-  boxShadow,
-} from '@imd/lib/helpers/style_utils';
-import WithDirection from '@imd/lib/helpers/rtl';
-const WDContactCardWrapper = styled.div`
-  width: 100%;
-  height: calc(100% - 145px);
-  padding: 0 35px;
-  display: -webkit-flex;
-  display: -ms-flex;
-  display: flex;
-
-  @media only screen and (max-width: 600px) {
-    flex-direction: column;
-  }
-
-  @media only screen and (max-width: 767px) {
-    padding: 0 20px;
-  }
-
-  @media only screen and (min-width: 767px) and (max-width: 990px) {
-    flex-direction: column;
-  }
-
-  .isoContactCardHead {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 120px;
-    flex-shrink: 0;
-    margin-right: ${props =>
-      props['data-rtl'] === 'rtl' ? 'inherit' : '50px'};
-    margin-left: ${props => (props['data-rtl'] === 'rtl' ? '50px' : 'inherit')};
-    flex-shrink: 0;
-
-    @media only screen and (max-width: 600px) {
-      margin-bottom: 20px;
-    }
-
-    @media only screen and (min-width: 767px) and (max-width: 990px) {
-      margin-bottom: 20px;
-    }
-
-    .isoPersonImage {
-      width: 120px;
-      height: 120px;
-      display: flex;
-      flex-shrink: 0;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: 10px;
-      overflow: hidden;
-      ${borderRadius('5px')};
-
-      .avatar-uploader {
-        width: 100%;
-        height: 100%;
-      }
-
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-
-    .isoPersonName {
-      font-size: 15px;
-      font-weight: 500;
-      color: ${palette('text', 0)};
-      line-height: 1.5;
-      margin: 0;
-    }
-  }
-
-  .isoContactInfoWrapper {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-
-    @media only screen and (max-width: 767px) {
-      padding: 20px 0;
-    }
-
-    .isoContactCardInfos {
-      width: 100%;
-      display: flex;
-      flex-shrink: 0;
-      align-items: baseline;
-      flex-direction: row;
-      margin-bottom: 15px;
-
-      @media only screen and (max-width: 430px) {
-        flex-direction: column;
-        margin-bottom: 20px;
-      }
-
-      .isoInfoLabel {
-        font-size: 14px;
-        font-weight: 500;
-        color: ${palette('text', 0)};
-        line-height: 1.5;
-        margin: 0;
-        margin-right: ${props =>
-          props['data-rtl'] === 'rtl' ? 'inherit' : '15px'};
-        margin-left: ${props =>
-          props['data-rtl'] === 'rtl' ? '15px' : 'inherit'};
-        text-align: ${props =>
-          props['data-rtl'] === 'rtl' ? 'right' : 'left'};
-        min-width: 80px;
-        position: relative;
-
-        @media only screen and (max-width: 430px) {
-          margin-bottom: 5px;
-          margin-right: ${props =>
-            props['data-rtl'] === 'rtl' ? 'inherit' : '0'};
-          margin-left: ${props =>
-            props['data-rtl'] === 'rtl' ? '0' : 'inherit'};
-          padding-right: ${props =>
-            props['data-rtl'] === 'rtl' ? 'inherit' : '10px'};
-          padding-left: ${props =>
-            props['data-rtl'] === 'rtl' ? '10px' : 'inherit'};
-          min-width: 0;
-        }
-
-        &::after {
-          content: ':';
-          position: absolute;
-          right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '0')};
-          left: ${props => (props['data-rtl'] === 'rtl' ? '0' : 'inherit')};
-        }
-      }
-
-      .isoInfoDetails {
-        font-size: 14px;
-        font-weight: 400;
-        color: ${palette('text', 2)};
-        line-height: 1.5;
-        margin: 0;
-        text-align: ${props =>
-          props['data-rtl'] === 'rtl' ? 'right' : 'left'};
-      }
-
-      input {
-        font-size: 14px;
-        font-weight: 400;
-        color: ${palette('text', 2)};
-        line-height: inherit;
-        height: 36px;
-        padding: 0 15px;
-        margin: 0;
-        border: 1px solid ${palette('border', 0)};
-        outline: 0 !important;
-        overflow: hidden;
-        background-color: #ffffff;
-        ${boxShadow('none')};
-        ${borderRadius('3px')};
-        ${transition()};
-
-        &:focus {
-          border-color: ${palette('primary', 0)};
-          ${boxShadow('0 0 0 2px rgba(68, 130, 255, 0.2)')};
-          outline: 0;
-        }
-
-        &:hover {
-          border-color: ${palette('primary', 0)};
-        }
-
-        &::-webkit-input-placeholder {
-          color: ${palette('grayscale', 0)};
-        }
-
-        &:-moz-placeholder {
-          color: ${palette('grayscale', 0)};
-        }
-
-        &::-moz-placeholder {
-          color: ${palette('grayscale', 0)};
-        }
-        &:-ms-input-placeholder {
-          color: ${palette('grayscale', 0)};
-        }
-      }
-
-      textarea {
-        font-size: 14px;
-        font-weight: 400;
-        color: ${palette('text', 2)};
-        line-height: 24px;
-        height: 210px;
-        padding: 10px 15px;
-        margin: 0;
-        border: 1px solid ${palette('border', 0)};
-        outline: 0 !important;
-        background-color: #ffffff;
-        ${boxShadow('none')};
-        ${borderRadius('3px')};
-        ${transition()};
-
-        &:focus {
-          border-color: ${palette('primary', 0)};
-          ${boxShadow('0 0 0 2px rgba(68, 130, 255, 0.2)')};
-          outline: 0;
-        }
-
-        &:hover {
-          border-color: ${palette('primary', 0)};
-        }
-
-        &::-webkit-input-placeholder {
-          color: ${palette('grayscale', 0)};
-        }
-
-        &:-moz-placeholder {
-          color: ${palette('grayscale', 0)};
-        }
-
-        &::-moz-placeholder {
-          color: ${palette('grayscale', 0)};
-        }
-        &:-ms-input-placeholder {
-          color: ${palette('grayscale', 0)};
-        }
-      }
-    }
-  }
-`;
-
-const ContactCardWrapper = WithDirection(WDContactCardWrapper);
-
-export { ContactCardWrapper };
diff --git a/src/components/Contacts/ContactList.js b/src/components/Contacts/ContactList.js
deleted file mode 100644
index 86ae607..0000000
--- a/src/components/Contacts/ContactList.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import React, { Component } from 'react';
-import IntlMessages from '../utility/intlMessages';
-import { InputSearch } from '../uielements/input';
-import DeleteButton from './DeleteButton';
-import { PropTypes } from 'prop-types';
-import { ContactListWrapper } from './ContactList.style';
-import Scrollbar from '../utility/customScrollBar';
-
-function filterContacts(contacts, search) {
-  search = search.toUpperCase();
-  return search
-    ? contacts.filter(contact => contact.name.toUpperCase().includes(search))
-    : contacts;
-}
-
-export default class ContactList extends Component {
-  constructor(props) {
-    super(props);
-    this.singleContact = this.singleContact.bind(this);
-    this.onChange = this.onChange.bind(this);
-    this.state = {
-      search: '',
-    };
-  }
-  singleContact(contact) {
-    const { seectedId, deleteContact, changeContact } = this.props;
-    const activeClass = seectedId === contact.id ? 'active' : '';
-    const onChange = () => changeContact(contact.id);
-    return (
-      <div
-        key={contact.id}
-        className={`${activeClass} isoSingleContact`}
-        onClick={onChange}
-      >
-        <div className="isoAvatar">
-          {contact.avatar ? <img alt="#" src={contact.avatar} /> : ''}
-        </div>
-        <div className="isoContactName">
-          <h3>{contact.name ? contact.name : 'No Name'}</h3>
-        </div>
-        <DeleteButton deleteContact={deleteContact} contact={contact} />
-      </div>
-    );
-  }
-  onChange(event) {
-    this.setState({ search: event.target.value });
-  }
-  render() {
-    const { search } = this.state;
-    const contacts = filterContacts(this.props.contacts, search);
-    return (
-      <ContactListWrapper className="isoContactListWrapper">
-        <InputSearch
-          placeholder={this.context.intl.formatMessage({
-            id: 'contactlist.searchContacts',
-          })}
-          value={search}
-          onChange={this.onChange}
-          className="isoSearchBar"
-        />
-        {contacts && contacts.length > 0 ? (
-          <div className="isoContactList">
-            <Scrollbar
-              className="contactListScrollbar"
-              style={{ height: 'calc(100vh - 200px)' }}
-            >
-              {contacts.map(contact => this.singleContact(contact))}
-            </Scrollbar>
-          </div>
-        ) : (
-          <span className="isoNoResultMsg">
-            {<IntlMessages id="Component.contacts.noOption" />}
-          </span>
-        )}
-      </ContactListWrapper>
-    );
-  }
-}
-
-ContactList.contextTypes = {
-  intl: PropTypes.object.isRequired,
-};
diff --git a/src/components/Contacts/ContactList.style.js b/src/components/Contacts/ContactList.style.js
deleted file mode 100644
index 7fff2bd..0000000
--- a/src/components/Contacts/ContactList.style.js
+++ /dev/null
@@ -1,201 +0,0 @@
-import styled from 'styled-components';
-import { palette } from 'styled-theme';
-import {
-  transition,
-  borderRadius,
-  boxShadow,
-} from '@imd/lib/helpers/style_utils';
-import WithDirection from '@imd/lib/helpers/rtl';
-const WDContactListWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-
-  .isoNoResultMsg {
-    padding: 15px 20px;
-    text-align: center;
-    color: ${palette('secondary', 2)};
-    font-weight: 500;
-    font-size: 14px;
-  }
-
-  .isoSearchBar {
-    .ant-input {
-      width: 100%;
-      font-size: 14px;
-      font-weight: 400;
-      color: ${palette('text', 0)};
-      line-height: inherit;
-      height: 69px;
-      padding: 0 20px;
-      padding-left: ${props =>
-        props['data-rtl'] === 'rtl' ? 'inherit' : '35px'};
-      padding-right: ${props =>
-        props['data-rtl'] === 'rtl' ? '35px' : 'inherit'};
-      border: 0;
-      border-bottom: 1px solid ${palette('border', 0)};
-      outline: 0 !important;
-      overflow: hidden;
-      background-color: #ffffff;
-      ${boxShadow('none')};
-      ${borderRadius()};
-      ${transition()};
-
-      @media only screen and (max-width: 767px) {
-        height: 50px;
-      }
-
-      &:hover,
-      &:focus {
-        border-color: ${palette('border', 0)} !important;
-      }
-
-      &::-webkit-input-placeholder {
-        color: ${palette('grayscale', 0)};
-      }
-
-      &:-moz-placeholder {
-        color: ${palette('grayscale', 0)};
-      }
-
-      &::-moz-placeholder {
-        color: ${palette('grayscale', 0)};
-      }
-      &:-ms-input-placeholder {
-        color: ${palette('grayscale', 0)};
-      }
-    }
-  }
-
-  .ant-input-suffix {
-    left: 10px;
-    right: auto;
-    color: ${palette('grayscale', 0)};
-  }
-
-  .isoContactList {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    max-height: 100%;
-    overflow: hidden;
-    overflow-y: auto;
-
-    .contactListScrollbar {
-      height: calc(100vh - 200px);
-
-      @media only screen and (max-width: 767px) {
-        max-height: 60vh;
-      }
-    }
-
-    .isoSingleContact {
-      width: 100%;
-      margin: 0;
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      flex-shrink: 0;
-      padding: 15px 20px;
-      padding-right: ${props =>
-        props['data-rtl'] === 'rtl' ? '20px' : '35px'};
-      padding-left: ${props => (props['data-rtl'] === 'rtl' ? '35px' : '20px')};
-      border-bottom: 1px solid ${palette('border', 0)};
-      text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')};
-      position: relative;
-      cursor: pointer;
-
-      &.active {
-        background-color: ${palette('secondary', 1)};
-      }
-
-      &:last-child {
-        border-bottom: 0;
-      }
-
-      .isoAvatar {
-        width: 35px;
-        height: 35px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-right: ${props =>
-          props['data-rtl'] === 'rtl' ? 'inherit' : '15px'};
-        margin-left: ${props =>
-          props['data-rtl'] === 'rtl' ? '15px' : 'inherit'};
-        flex-shrink: 0;
-        overflow: hidden;
-        ${borderRadius('50%')};
-
-        img {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
-      }
-
-      .isoContactName {
-        h3 {
-          font-size: 15px;
-        }
-      }
-
-      .isoNoteText {
-        width: calc(100% - 60px);
-        margin-right: ${props =>
-          props['data-rtl'] === 'rtl' ? 'inherit' : '20px'};
-        margin-left: ${props =>
-          props['data-rtl'] === 'rtl' ? '20px' : 'inherit'};
-        padding: 20px 0;
-        cursor: pointer;
-
-        h3 {
-          width: 100%;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          color: ${palette('secondary', 2)};
-          font-weight: 500;
-        }
-
-        .isoNoteCreatedDate {
-          font-size: 13px;
-          color: ${palette('grayscale', 0)};
-        }
-      }
-
-      .isoDeleteBtn {
-        width: 24px;
-        height: 24px;
-        background-color: transparent;
-        flex-shrink: 0;
-        position: absolute;
-        top: 20px;
-        right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '5px')};
-        left: ${props => (props['data-rtl'] === 'rtl' ? '5px' : 'inherit')};
-        padding: 0;
-        border: 0;
-        font-size: 14px;
-        color: ${palette('grayscale', 0)};
-        ${transition()};
-
-        &:hover {
-          color: ${palette('primary', 0)};
-        }
-      }
-    }
-
-    .isoNotlistNotice {
-      font-size: 14px;
-      font-weight: 400;
-      color: ${palette('grayscale', 0)};
-      line-height: inherit;
-      padding: 30px 0;
-    }
-  }
-`;
-
-const ContactListWrapper = WithDirection(WDContactListWrapper);
-
-export { ContactListWrapper };
diff --git a/src/components/Contacts/DeleteButton.js b/src/components/Contacts/DeleteButton.js
deleted file mode 100644
index 7073b7a..0000000
--- a/src/components/Contacts/DeleteButton.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import Popconfirm from '../Feedback/Popconfirm';
-import Button from '../uielements/button';
-import notification from '../Notification';
-
-export default function({ contact, deleteContact }) {
-  let name = '';
-  if (contact.firstName) {
-    name = `${contact.firstName} `;
-  }
-  if (contact.lastName) {
-    name = `${name}${contact.lastName}`;
-  }
-  if (!name) {
-    name = 'No Name';
-  }
-  return (
-    <Popconfirm
-      title={`Sure to delete ${name}?`}
-      okText="DELETE"
-      cancelText="No"
-      onConfirm={() => {
-        notification('error', `${name} Deleted`, '');
-        deleteContact(contact.id);
-      }}
-    >
-      <Button icon="close" type="default" className="isoDeleteBtn" />
-    </Popconfirm>
-  );
-}
diff --git a/src/components/Contacts/EditView.js b/src/components/Contacts/EditView.js
deleted file mode 100644
index 435f268..0000000
--- a/src/components/Contacts/EditView.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from 'react';
-import { Icon } from 'antd';
-import Input, { Textarea } from '../uielements/input';
-import Upload from '../uielements/upload';
-import notification from '../Notification';
-import { ContactCardWrapper } from './ContactCard.style';
-import './upload.css';
-
-function beforeUpload(file) {
-  const isJPG = file.type === 'image/jpeg';
-  if (!isJPG) {
-    notification('error', 'You can only upload JPG file!', '');
-    return false;
-  }
-  const isLt2M = file.size / 1024 / 1024 < 2;
-  if (!isLt2M) {
-    notification('error', 'Image must smaller than 2MB!', '');
-    return false;
-  }
-  notification('success', 'Image uploaded successfully!', '');
-  return true;
-}
-export default function({ contact, otherAttributes, editContact }) {
-  const name = contact.name ? contact.name : 'No Name';
-  const extraInfos = [];
-  const names = [
-    { value: 'firstName', title: 'First Name' },
-    { value: 'lastName', title: 'Last Name' },
-  ];
-  [...names, ...otherAttributes].forEach(attribute => {
-    const value = contact[attribute.value];
-    const handleEditContact = event => {
-      contact[attribute.value] = event.target.value;
-      let name = '';
-      if (contact.firstName) {
-        name = `${contact.firstName} `;
-      }
-      if (contact.lastName) {
-        name = `${name}${contact.lastName}`;
-      }
-      contact.name = name;
-      editContact(contact);
-    };
-    if (attribute.value === 'note') {
-      extraInfos.push(
-        <div className="isoContactCardInfos" key={attribute.value}>
-          <p className="isoInfoLabel">{`${attribute.title}`}</p>
-          <Textarea
-            placeholder={`${attribute.title}`}
-            value={value}
-            type="textarea"
-            rows={5}
-            onChange={handleEditContact}
-          />
-        </div>
-      );
-    } else {
-      extraInfos.push(
-        <div className="isoContactCardInfos" key={attribute.value}>
-          <p className="isoInfoLabel">{`${attribute.title}`}</p>
-          <Input
-            placeholder={`${attribute.title}`}
-            value={value}
-            onChange={handleEditContact}
-          />
-        </div>
-      );
-    }
-  });
-  return (
-    <ContactCardWrapper className="isoContactCard">
-      <div className="isoContactCardHead">
-        <div className="isoPersonImage">
-          <Upload
-            className="avatar-uploader"
-            name="avatar"
-            showUploadList={false}
-            beforeUpload={beforeUpload}
-            action=""
-          >
-            {contact.avatar ? (
-              <img src={contact.avatar} alt="" className="avatar" />
-            ) : (
-              ''
-            )}
-            <Icon type="plus" className="avatar-uploader-trigger" />
-          </Upload>
-        </div>
-        <h1 className="isoPersonName">{name}</h1>
-      </div>
-      <div className="isoContactInfoWrapper">{extraInfos}</div>
-    </ContactCardWrapper>
-  );
-}
diff --git a/src/components/Contacts/SingleView.js b/src/components/Contacts/SingleView.js
deleted file mode 100644
index a569b61..0000000
--- a/src/components/Contacts/SingleView.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import { ContactCardWrapper } from './ContactCard.style';
-
-export default function({ contact, otherAttributes }) {
-  const name = contact.name ? contact.name : 'No Name';
-  const extraInfos = [];
-  otherAttributes.forEach(attribute => {
-    const value = contact[attribute.value];
-    if (value) {
-      extraInfos.push(
-        <div className="isoContactCardInfos" key={attribute.value}>
-          <p className="isoInfoLabel">{`${attribute.title}`}</p>
-          <p className="isoInfoDetails">{value}</p>
-        </div>
-      );
-    }
-  });
-  return (
-    <ContactCardWrapper className="isoContactCard">
-      <div className="isoContactCardHead">
-        <div className="isoPersonImage">
-          {contact.avatar ? <img alt="#" src={contact.avatar} /> : ''}
-        </div>
-        <h1 className="isoPersonName">{name}</h1>
-      </div>
-      <div className="isoContactInfoWrapper">{extraInfos}</div>
-    </ContactCardWrapper>
-  );
-}
diff --git a/src/components/Contacts/upload.css b/src/components/Contacts/upload.css
deleted file mode 100644
index 98aea69..0000000
--- a/src/components/Contacts/upload.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.avatar-uploader,
-.avatar-uploader-trigger,
-.avatar {
-  width: 150px;
-  height: 150px;
-}
-.avatar-uploader {
-  display: block;
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-}
-.avatar-uploader-trigger {
-  display: table-cell;
-  vertical-align: middle;
-  font-size: 28px;
-  color: #999;
-}
diff --git a/src/components/Feedback/Alert.js b/src/components/Feedback/Alert.js
deleted file mode 100644
index 36f84d5..0000000
--- a/src/components/Feedback/Alert.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Alerts from './Alert.style';
-
-export default Alerts;
diff --git a/src/components/Feedback/Alert.style.js b/src/components/Feedback/Alert.style.js
deleted file mode 100644
index 11b129b..0000000
--- a/src/components/Feedback/Alert.style.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-import { Alert } from 'antd';
-import styled from 'styled-components';
-import { palette } from 'styled-theme';
-import WithDirection from '@imd/lib/helpers/rtl';
-const AntAlert = props => <Alert {...props} />;
-
-const Alerts = styled(AntAlert)`
-  && {
-    color: ${palette('text', 1)};
-    font-size: 12px;
-  }
-
-  &&.ant-alert-success {
-    .ant-alert-icon {
-      color: ${palette('success', 0)};
-    }
-  }
-
-  &&.ant-alert-error {
-    .ant-alert-icon {
-      color: ${palette('error', 0)};
-    }
-  }
-
-  &&.ant-alert-with-description {
-    padding: ${props =>
-      props['data-rtl'] === 'rtl'
-        ? '16px 60px 16px 16px'
-        : '16px 16px 16px 60px'};
-    .ant-alert-message {
-      font-weight: 500;
-      color: ${palette('text', 0)};
-    }
-
-    .ant-alert-description {
-      color: ${palette('text', 1)};
-      font-size: 12px;
-    }
-
-    .ant-alert-icon {
-      top: 20px;
-      left: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '20px')};
-      right: ${props => (props['data-rtl'] === 'rtl' ? '20px' : 'inherit')};
-    }
-    &&.ant-alert-no-icon {
-      padding: ${props =>
-        props['data-rtl'] === 'rtl'
-          ? '12px 16px 12px 48px'
-          : '12px 48px 12px 16px'};
-    }
-    .ant-alert-close-icon {
-      right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '16px')};
-      left: ${props => (props['data-rtl'] === 'rtl' ? '16px' : 'inherit')};
-    }
-  }
-  &&.ant-alert-no-icon {
-    padding: ${props =>
-      props['data-rtl'] === 'rtl'
-        ? '12px 16px 12px 48px'
-        : '12px 48px 12px 16px'};
-  }
-  .ant-alert-close-icon {
-    right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '16px')};
-    left: ${props => (props['data-rtl'] === 'rtl' ? '16px' : 'inherit')};
-  }
-`;
-
-export default WithDirection(Alerts);
diff --git a/src/components/Feedback/Message.js b/src/components/Feedback/Message.js
deleted file mode 100644
index 55fa1de..0000000
--- a/src/components/Feedback/Message.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { message } from 'antd';
-
-export default message;
diff --git a/src/components/Feedback/Message.style.js b/src/components/Feedback/Message.style.js
deleted file mode 100644
index 93de457..0000000
--- a/src/components/Feedback/Message.style.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import styled from 'styled-components';
-import { palette } from 'styled-theme';
-
-export default styled(message)`
-  &.ant-message {
-    .ant-message-notice-content {
-      padding: 12px 16px;
-      border-radius: 4px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-      background: #fff;
-      display: inline-block;
-      pointer-events: all;
-
-      .ant-message-custom-content {
-        font-size: 13px;
-        color: ${palette('text', 1)};
-
-        .anticon {
-          margin-right: 8px;
-          font-size: 15px;
-          top: 1px;
-          position: relative;
-        }
-
-        &.ant-message-error {
-          .anticon {
-            color: ${palette('error', 0)};
-          }
-        }
-      }
-    }
-  }
-`;
diff --git a/src/components/Feedback/Modal.js b/src/components/Feedback/Modal.js
deleted file mode 100644
index cb45482..0000000
--- a/src/components/Feedback/Modal.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Modal } from 'antd';
-
-export default Modal;
diff --git a/src/components/Feedback/Notification.js b/src/components/Feedback/Notification.js
deleted file mode 100644
index e750a8b..0000000
--- a/src/components/Feedback/Notification.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { notification } from 'antd';
-
-export default notification;
diff --git a/src/components/Feedback/Popconfirm.js b/src/components/Feedback/Popconfirm.js
deleted file mode 100644
index b158706..0000000
--- a/src/components/Feedback/Popconfirm.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Popconfirm } from 'antd';
-
-export default Popconfirm;
diff --git a/src/components/Invoice/Address.js b/src/components/Invoice/Address.js
deleted file mode 100644
index b56ed05..0000000
--- a/src/components/Invoice/Address.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-export default ({ companyName, companyAddress }) => (
-  <div>
-    <p className="NameEmail">
-      <span className="Name">{companyName}</span>
-      <span className="Email" style={{ whiteSpace: 'pre-line' }}>
-        {companyAddress}
-      </span>
-    </p>
-  </div>
-);
diff --git a/src/components/Invoice/InvoiceTable.js b/src/components/Invoice/InvoiceTable.js
deleted file mode 100644
index 44eacb2..0000000
--- a/src/components/Invoice/InvoiceTable.js
+++ /dev/null
@@ -1,146 +0,0 @@
-import React from 'react';
-import Input from '../uielements/input';
-import Button from '../uielements/button';
-import { stringToPosetiveInt } from '@imd/lib/helpers/utility';
-import Table from './TableStyle';
-
-const viewColumns = [
-  {
-    title: '#',
-    dataIndex: 'key',
-    width: '10%',
-    rowKey: 'key',
-  },
-  {
-    title: 'Item Name',
-    dataIndex: 'itemName',
-    width: '40%',
-    rowKey: 'itemName',
-  },
-  {
-    title: 'Unit Costs',
-    dataIndex: 'costs',
-    width: '15%',
-    rowKey: 'costs',
-  },
-  {
-    title: 'Unit',
-    dataIndex: 'qty',
-    width: '15%',
-    rowKey: 'qty',
-  },
-  {
-    title: 'Price',
-    dataIndex: 'price',
-    width: '20%',
-    rowKey: 'price',
-  },
-];
-
-const ViewTable = ({ invoiceList }) => (
-  <Table columns={viewColumns} dataSource={invoiceList} pagination={false} />
-);
-
-const EditTable = ({ editableInvoice, editInvoice, updateValues }) => {
-  const { invoiceList } = editableInvoice;
-  const editColumns = [
-    {
-      title: '#',
-      dataIndex: 'key',
-      rowKey: 'key',
-      width: '10%',
-      render: (text, singleInvoice) => <span>{singleInvoice.key}</span>,
-    },
-    {
-      title: 'Item Name',
-      dataIndex: 'itemName',
-      rowKey: 'itemName',
-      width: '40%',
-      render: (text, singleInvoice) => (
-        <Input
-          placeholder="Item Name"
-          value={singleInvoice.itemName}
-          onChange={event => {
-            editableInvoice.invoiceList[singleInvoice.key - 1].itemName =
-              event.target.value;
-            editInvoice(editableInvoice);
-          }}
-        />
-      ),
-    },
-    {
-      title: 'Unit Costs',
-      dataIndex: 'costs',
-      rowKey: 'costs',
-      width: '20%',
-      render: (text, singleInvoice) => (
-        <Input
-          placeholder="Unit Cost"
-          value={singleInvoice.costs}
-          onChange={event => {
-            editableInvoice.invoiceList[
-              singleInvoice.key - 1
-            ].costs = stringToPosetiveInt(
-              event.target.value,
-              singleInvoice.costs
-            );
-            editInvoice(updateValues(editableInvoice));
-          }}
-        />
-      ),
-    },
-    {
-      title: 'Unit',
-      dataIndex: 'qty',
-      rowKey: 'qty',
-      width: '10%',
-      render: (text, singleInvoice) => (
-        <Input
-          placeholder="Units"
-          value={singleInvoice.qty}
-          onChange={event => {
-            editableInvoice.invoiceList[
-              singleInvoice.key - 1
-            ].qty = stringToPosetiveInt(event.target.value, singleInvoice.qty);
-            editInvoice(updateValues(editableInvoice));
-          }}
-        />
-      ),
-    },
-    {
-      title: 'Price',
-      dataIndex: 'price',
-      rowKey: 'price',
-      width: '10%',
-    },
-    {
-      title: '',
-      dataIndex: 'delete',
-      rowKey: 'delete',
-      width: '10%',
-      render: (text, singleInvoice) =>
-        invoiceList.length === 1 ? (
-          ''
-        ) : (
-          <Button
-            onClick={() => {
-              const newInvoiceList = [];
-              invoiceList.forEach((invoice, i) => {
-                if (i !== singleInvoice.key - 1) {
-                  newInvoiceList.push(invoice);
-                }
-              });
-              editableInvoice.invoiceList = newInvoiceList;
-              editInvoice(updateValues(editableInvoice));
-            }}
-          >
-            Delete
-          </Button>
-        ),
-    },
-  ];
-  return (
-    <Table columns={editColumns} dataSource={invoiceList} pagination={false} />
-  );
-};
-export { ViewTable, EditTable };
diff --git a/src/components/Invoice/OrderStatus.js b/src/components/Invoice/OrderStatus.js
deleted file mode 100644
index 4e723d5..0000000
--- a/src/components/Invoice/OrderStatus.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import {
-  DropdownButtons,
-  DropdownMenu,
-  MenuItem,
-} from '../uielements/dropdown';
-
-export default ({ value, onChange, orderStatusOptions }) => (
-  <DropdownButtons
-    overlay={
-      <DropdownMenu onClick={val => onChange(orderStatusOptions[val.key])}>
-        {orderStatusOptions.map((option, index) => (
-          <MenuItem key={index}>{option}</MenuItem>
-        ))}
-      </DropdownMenu>
-    }
-  >
-    {value}
-  </DropdownButtons>
-);
diff --git a/src/components/Invoice/TableStyle.js b/src/components/Invoice/TableStyle.js
deleted file mode 100644
index 66d2ba3..0000000
--- a/src/components/Invoice/TableStyle.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import styled from 'styled-components';
-import { palette } from 'styled-theme';
-import Tables from '../uielements/table';
-import { transition } from '@imd/lib/helpers/style_utils';
-
-const Table = styled(Tables)`
-  overflow: hidden;
-  overflow-x: auto;
-  background-color: #ffffff;
-
-  .ant-table-thead > tr > th {
-    color: ${palette('secondary', 2)};
-    font-size: 13px;
-    background-color: ${palette('secondary', 1)};
-    border-bottom: 0;
-
-    &.ant-table-column-sort {
-      background: ${palette('secondary', 1)};
-      margin: ${props =>
-        props['data-rtl'] === 'rtl' ? '0 4px 0 0' : '0 0 0 4px'};
-    }
-  }
-
-  .ant-table-thead > tr > th,
-  .ant-table-tbody > tr > td {
-    padding: 16px 15px;
-    white-space: nowrap;
-    text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')};
-
-    p {
-      margin-bottom: 0;
-    }
-
-    &:first-child {
-      text-align: center;
-    }
-  }
-
-  .ant-table-tbody > tr > td {
-    font-size: 12px;
-    color: ${palette('text', 3)};
-    border-bottom: 1px solid ${palette('border', 0)};
-
-    a {
-      color: ${palette('primary', 0)};
-      ${transition()};
-
-      &:hover {
-        color: ${palette('primary', 4)};
-      }
-    }
-  }
-
-  .ant-table-thead > tr.ant-table-row-hover > td,
-  .ant-table-tbody > tr.ant-table-row-hover > td,
-  .ant-table-thead > tr:hover > td,
-  .ant-table-tbody > tr:hover > td {
-    background-color: transparent;
-  }
-`;
-export default Table;
diff --git a/src/components/Mail/ComposeAutoComplete.js b/src/components/Mail/ComposeAutoComplete.js
deleted file mode 100644
index 0090153..0000000
--- a/src/components/Mail/ComposeAutoComplete.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from 'react';
-import { WithContext as ReactTags } from 'react-tag-input';
-import AutoComplete from './ComposeAutoComplete.style';
-
-function createSuggestions(item) {
-  if (item && item.length > 0) {
-    return item.map(element => ({
-      id: `${element.id}`,
-      text: `${element.name}<${element.email}>`,
-    }));
-  }
-  return [];
-}
-
-const KeyCodes = {
-  comma: 188,
-  enter: 13,
-};
-
-const delimiters = [KeyCodes.comma, KeyCodes.enter];
-
-export default class App extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      tags: [],
-      suggestions: createSuggestions(props.allMails) || [],
-    };
-    this.handleDelete = this.handleDelete.bind(this);
-    this.handleAddition = this.handleAddition.bind(this);
-    this.handleDrag = this.handleDrag.bind(this);
-  }
-  handleDelete(i) {
-    const { tags } = this.state;
-    this.setState({
-      tags: tags.filter((tag, index) => index !== i),
-    });
-  }
-
-  handleAddition(tag) {
-    this.setState(state => ({ tags: [...state.tags, tag] }));
-  }
-
-  handleDrag(tag, currPos, newPos) {
-    const tags = [...this.state.tags];
-    const newTags = tags.slice();
-
-    newTags.splice(currPos, 1);
-    newTags.splice(newPos, 0, tag);
-
-    // re-render
-    this.setState({ tags: newTags });
-  }
-
-  render() {
-    const { tags, suggestions } = this.state;
-    return (
-      <AutoComplete>
-        <ReactTags
-          tags={tags}
-          suggestions={suggestions}
-          handleDelete={this.handleDelete}
-          handleAddition={this.handleAddition}
-          handleDrag={this.handleDrag}
-          delimiters={delimiters}
-          placeholder={this.props.placeholder}
-          minQueryLength={1}
-          autofocus={this.props.autofocus || false}
-        />
-      </AutoComplete>
-    );
-  }
-}
diff --git a/src/components/Mail/ComposeAutoComplete.style.js b/src/components/Mail/ComposeAutoComplete.style.js
deleted file mode 100644
index 3158d30..0000000
--- a/src/components/Mail/ComposeAutoComplete.style.js
+++ /dev/null
@@ -1,157 +0,0 @@
-import styled from 'styled-components';
-import { palette } from 'styled-theme';
-import {
-  transition,
-  borderRadius,
-  boxShadow,
-} from '@imd/lib/helpers/style_utils';
-
-const ComposeAutoCompleteStyleWrapper = styled.div`
-  .ReactTags__ {
-    &tags {
-      min-height: 36px;
-      width: 100%;
-      position: relative;
-      margin-bottom: 10px;
-      padding: 0 15px;
-      border: 1px solid ${palette('border', 0)};
-      ${borderRadius('3px')};
-    }
-
-    &selected {
-      width: 100%;
-      padding: 4px 0;
-    }
-
-    &tag {
-      font-size: 13px;
-      font-weight: 400;
-      line-height: 1;
-      color: ${palette('text', 0)};
-      display: inline-flex;
-      align-items: center;
-      padding: 0 7px 0 10px;
-      margin: 2px 5px 2px 0;
-      margin-right: ${props => (props['data-rtl'] === 'rtl' ? '0' : '5px')};
-      margin-left: ${props => (props['data-rtl'] === 'rtl' ? '5px' : '0')};
-      text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')};
-      height: 22px;
-      word-break: break-word;
-      background-color: ${palette('grayscale', 10)};
-      border: 1px solid ${palette('border', 3)};
-      ${borderRadius('3px')};
-    }
-
-    &remove {
-      background: none;
-      background-color: transparent;
-      border: 0;
-      outline: 0;
-      color: ${palette('grayscale', 0)};
-      padding: 0;
-      margin-left: 8px;
-      margin-right: ${props => (props['data-rtl'] === 'rtl' ? '8px' : '0')};
-      margin-left: ${props => (props['data-rtl'] === 'rtl' ? '0' : '8px')};
-      line-height: 1;
-      font-size: 14px;
-      font-weight: bold;
-      cursor: pointer;
-      ${transition()};
-
-      &:hover {
-        color: ${palette('text', 3)};
-      }
-    }
-
-    &tagInput {
-      width: 100%;
-      display: inline;
-
-      &Field {
-        font-size: 14px;
-        font-weight: 400;
-        color: ${palette('text', 0)};
-        line-height: inherit;
-        text-align: ${props =>
-          props['data-rtl'] === 'rtl' ? 'right' : 'left'};
-        height: 22px;
-        min-width: 240px;
-        padding: 0;
-        border: 0;
-        outline: 0 !important;
-        overflow: hidden;
-        background-color: transparent;
-
-        &::-webkit-input-placeholder {
-          text-align: ${props =>
-            props['data-rtl'] === 'rtl' ? 'right' : 'left'};
-          color: ${palette('grayscale', 0)};
-        }
-
-        &:-moz-placeholder {
-          text-align: ${props =>
-            props['data-rtl'] === 'rtl' ? 'right' : 'left'};
-          color: ${palette('grayscale', 0)};
-        }
-
-        &::-moz-placeholder {
-          text-align: ${props =>
-            props['data-rtl'] === 'rtl' ? 'right' : 'left'};
-          color: ${palette('grayscale', 0)};
-        }
-        &:-ms-input-placeholder {
-          text-align: ${props =>
-            props['data-rtl'] === 'rtl' ? 'right' : 'left'};
-          color: ${palette('grayscale', 0)};
-        }
-      }
-    }
-
-    &suggestions {
-      z-index: 999;
-      display: -webkit-flex;
-      display: -ms-flex;
-      display: flex;
-      flex-direction: column;
-      background-color: #fff;
-      margin: 3px 0 0;
-      overflow: hidden;
-      word-break: break-word;
-      border: 1px solid rgba(0, 0, 0, 0.2);
-      text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')};
-      position: absolute;
-      right: ${props => (props['data-rtl'] === 'rtl' ? '0' : 'auto')};
-      left: ${props => (props['data-rtl'] === 'rtl' ? 'auto' : '0')};
-      top: 100%;
-      ${borderRadius()};
-      ${boxShadow('0 2px 4px rgba(0,0,0,0.2)')};
-
-      li {
-        font-size: 14px;
-        font-weight: 400;
-        color: ${palette('text', 0)};
-        border-bottom: ${palette('border', 0)};
-        line-height: 1.5;
-        width: 100%;
-        padding: 10px 15px;
-        margin: 0;
-        cursor: pointer;
-        ${transition()};
-
-        &:hover {
-          background-color: ${palette('grayscale', 3)};
-        }
-
-        &:last-of-type {
-          border-bottom: 0;
-        }
-      }
-    }
-
-    &activeSuggestion {
-      background-color: ${palette('grayscale', 3)};
-    }
-  }
-`;
-
-export default ComposeAutoCompleteStyleWrapper;
diff --git a/src/components/Mail/ComposeMail.js b/src/components/Mail/ComposeMail.js
deleted file mode 100644
index 207fae8..0000000
--- a/src/components/Mail/ComposeMail.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import React from 'react';
-import Button from '../uielements/button';
-import Input from '../uielements/input';
-import ComposeAutoComplete from './ComposeAutoComplete';
-import notification from '../Notification';
-import IntlMessages from '../utility/intlMessages';
-import ComposeForm from './ComposeMail.style';
-import Editor from '../uielements/editor';
-
-function uploadCallback(file) {
-  return new Promise((resolve, reject) => {
-    const xhr = new XMLHttpRequest();
-    xhr.open('POST', 'https://api.imgur.com/3/image');
-    xhr.setRequestHeader('Authorization', 'Client-ID 8d26ccd12712fca');
-    const data = new FormData();
-    data.append('image', file);
-    xhr.send(data);
-    xhr.addEventListener('load', () => {
-      const response = JSON.parse(xhr.responseText);
-      resolve(response);
-    });
-    xhr.addEventListener('error', () => {
-      const error = JSON.parse(xhr.responseText);
-      reject(error);
-    });
-  });
-}
-export default function ComposeMail(props) {
-  const [state, setState] = React.useState({
-    editorState: null,
-    loading: false,
-    iconLoading: false,
-  });
-  const onEditorStateChange = editorState => {
-    setState({ ...state, editorState });
-  };
-  const ComposeAutoCompleteTO = {
-    allMails: props.allMails,
-    updateData: () => {},
-    placeholder: 'To',
-    autofocus: true,
-  };
-  const ComposeAutoCompleteCC = {
-    allMails: props.allMails,
-    updateData: () => {},
-    placeholder: 'CC',
-  };
-  const editorOption = {
-    style: { width: '90%', height: '70%' },
-    editorState: state.editorState,
-    toolbarClassName: 'home-toolbar',
-    wrapperClassName: 'home-wrapper',
-    editorClassName: 'home-editor',
-    onEditorStateChange: onEditorStateChange,
-    uploadCallback: uploadCallback,
-    toolbar: { image: { uploadCallback: uploadCallback } },
-  };
-
-  return (
-    <ComposeForm className="isoComposeMailWrapper">
-      <ComposeAutoComplete {...ComposeAutoCompleteTO} />
-      <ComposeAutoComplete {...ComposeAutoCompleteCC} />
-      <Input placeholder="Subject" className="isoInputBox" />
-      <Editor {...editorOption} />
-      <div className="isoComposeMailBtnWrapper">
-        {props.mobileView || props.tabView ? (
-          <Button
-            type="primary"
-            onClick={() => {
-              props.changeComposeMail(false);
-            }}
-            className="isoCancelMailBtn"
-          >
-            <IntlMessages id="email.cancel" />
-          </Button>
-        ) : (
-          ''
-        )}
-
-        <Button
-          type="primary"
-          onClick={e => notification('success', `Mail has been sent`, '')}
-          className="isoSendMailBtn"
-        >
-          <IntlMessages id="email.send" />
-        </Button>
-      </div>
-    </ComposeForm>
-  );
-}
diff --git a/src/components/Mail/ComposeMail.style.js b/src/components/Mail/ComposeMail.style.js
deleted file mode 100644
index 716bced..0000000
--- a/src/components/Mail/ComposeMail.style.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import styled from 'styled-components';
-import { palette } from 'styled-theme';
-import {
-  transition,
-  borderRadius,
-  boxShadow,
-} from '@imd/lib/helpers/style_utils';
-
-const ComposeForm = styled.div`
-  padding: 35px;
-  text-align: left;
-  height: 100%;
-  width: 100%;
-  overflow-y: auto;
-
-  .isoInputBox {
-    font-size: 14px;
-    font-weight: 400;
-    color: ${palette('text', 0)};
-    line-height: inherit;
-    height: 36px;
-    padding: 0 15px;
-    margin-bottom: 10px;
-    border: 1px solid ${palette('border', 0)};
-    outline: 0 !important;
-    overflow: hidden;
-    background-color: #ffffff;
-    ${borderRadius('3px')};
-    ${boxShadow()};
-    ${transition()};
-
-    &:focus,
-    &:hover {
-      border-color: ${palette('border', 0)};
-      box-shadow: none;
-    }
-
-    &::-webkit-input-placeholder {
-      color: ${palette('grayscale', 0)};
-    }
-
-    &:-moz-placeholder {
-      color: ${palette('grayscale', 0)};
-    }
-
-    &::-moz-placeholder {
-      color: ${palette('grayscale', 0)};
-    }
-    &:-ms-input-placeholder {
-      color: ${palette('grayscale', 0)};
-    }
-  }
-
-  .isoComposeMailBtnWrapper {
-    margin-top: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .isoSendMailBtn,
-    .isoCancelMailBtn {
-      height: 36px;
-      padding: 0 30px;
-      background-color: ${palette('primary', 0)};
-      border: 0;
-      ${transition()};
-
-      &:hover {
-        background-color: ${palette('primary', 1)};
-      }
-    }
-
-    .isoCancelMailBtn {
-      background-color: ${palette('error', 0)};
-
-      &:hover {
-        background-color: ${palette('error', 1)};
-      }
-    }
-  }
-`;
-
-export default ComposeForm;
diff --git a/src/components/Mail/MailBucket.style.js b/src/components/Mail/MailBucket.style.js
deleted file mode 100644
index 6746cf4..0000000
--- a/src/components/Mail/MailBucket.style.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import styled from 'styled-components';
-import { palette } from 'styled-theme';
-import { transition } from '@imd/lib/helpers/style_utils';
-import WithDirection from '@imd/lib/helpers/rtl';
-
-const MailBucket = styled.ul`
-  padding: 35px 0 0;
-
-  .isoSingleBucket {
-    width: 100%;
-    display: flex;
-    padding: 0 30px;
-    margin-bottom: 15px;
-    align-items: center;
-    cursor: pointer;
-    justify-content: space-between;
-
-    span {
-      font-size: 14px;
-      font-weight: 400;
-      color: ${palette('secondary', 2)};
-      cursor: pointer;
-      text-transform: capitalize;
-      line-height: 1.1;
-      ${transition()};
-    }
-
-    .isoMailBadge {
-      font-size: 12px;
-      font-weight: 500;
-      color: ${palette('secondary', 2)};
-      line-height: normal;
-      margin: ${props =>
-        props['data-rtl'] === 'rtl' ? '0 auto 0 0' : '0 0 0 auto'};
-      display: -webkit-inline-flex;
-      display: -ms-inline-flex;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-    }
-
-    &.active {
-      span:not(.isoMailBadge) {
-        font-weight: 500;
-        color: ${palette('primary', 0)};
-      }
-    }
-
-    span:not(.isoMailBadge) {
-      &:hover {
-        color: ${palette('primary', 0)};
-      }
-    }
-  }
-`;
-
-export default WithDirection(MailBucket);
diff --git a/src/components/Mail/MailBuckets.js b/src/components/Mail/MailBuckets.js
deleted file mode 100644
index 808b887..0000000
--- a/src/components/Mail/MailBuckets.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import MailBucket from './MailBucket.style';
-
-const buckets = [
-  'Inbox',
-  'Sent',
-  'Drafts',
-  'Trash',
-  'Important',
-  'spam',
-  'Starred',
-];
-
-function getUnread(mails) {
-  const unread = {};
-  mails.forEach(mail => {
-    if (!unread[mail.bucket]) {
-      unread[mail.bucket] = 0;
-    }
-    if (!mail.read) {
-      unread[mail.bucket] += 1;
-    }
-  });
-  return unread;
-}
-
-export default function mailbuckets(
-  mails,
-  filterAction,
-  filterAttr,
-  onDrawerClose
-) {
-  const unread = getUnread(mails);
-  const renderSinglebucket = (bucket, key) => {
-    const onClick = () => {
-      filterAction({ bucket });
-      if (onDrawerClose) {
-        onDrawerClose();
-      }
-    };
-    const selectedBucket = bucket === filterAttr.bucket;
-    const activeClass = selectedBucket ? 'active' : '';
-    return (
-      <li
-        key={`bucket${key}`}
-        onClick={onClick}
-        className={`isoSingleBucket ${activeClass}`}
-      >
-        <span>{bucket}</span>
-        <span className="isoMailBadge">
-          {unread[bucket] ? unread[bucket] : ''}
-        </span>
-      </li>
-    );
-  };
-  return (
-    <MailBucket className="isoBucketList">
-      {buckets.map((bucket, index) => renderSinglebucket(bucket, index))}
-    </MailBucket>
-  );
-}
-export { buckets };
diff --git a/src/components/Mail/MailComposeBtn.js b/src/components/Mail/MailComposeBtn.js
deleted file mode 100644
index a655b75..0000000
--- a/src/components/Mail/MailComposeBtn.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import IntlMessages from '../utility/intlMessages';
-import MailComposeBtnWrapper from './MailComposeBtn.style';
-
-export default function(props) {
-  return (
-    <MailComposeBtnWrapper className="isoComposeBtnWrapper">
-      <button
-        type="button"
-        onClick={event => {
-          props.changeComposeMail(true);
-          if (props.onDrawerClose) {
-            props.onDrawerClose();
-          }
-        }}
-      >
-        <IntlMessages id="email.compose" />
-      </button>
-    </MailComposeBtnWrapper>
-  );
-}
diff --git a/src/components/Mail/MailComposeBtn.style.js b/src/components/Mail/MailComposeBtn.style.js
deleted file mode 100644
index 5896fc0..0000000
--- a/src/components/Mail/MailComposeBtn.style.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import styled from 'styled-components';
-import { palette } from 'styled-theme';
-import { borderRadius, transition } from '@imd/lib/helpers/style_utils';
-
-const MailComposeBtnWrapper = styled.div`
-  width: 100%;
-  padding: 0px 30px;
-  height: 80px;
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  background-color: ${palette('grayscale', 6)};
-  border-bottom: 1px solid ${palette('border', 4)};
-
-  button {
-    font-size: 14px;
-    font-weight: 400;
-    color: #ffffff;
-    background-color: ${palette('primary', 0)};
-    width: 100%;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    border: 0;
-    outline: 0;
-    cursor: pointer;
-    ${borderRadius('3px')};
-    ${transition()};
-
-    &:hover {
-      background-color: ${palette('primary', 1)};
-    }
-  }
-`;
-
-export default MailComposeBtnWrapper;
diff --git a/src/components/Mail/MailList.js b/src/components/Mail/MailList.js
deleted file mode 100644
index 8ac0a90..0000000
--- a/src/components/Mail/MailList.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import { timeDifference } from '@imd/lib/helpers/utility';
-import { tags, tagColor } from './MailTags.js';
-import MailListWrapper from './MailList.style';
-import { direction } from '@imd/lib/helpers/rtl';
-
-export default function mailList(
-  mails,
-  selectMail,
-  selectedMail,
-  toggleListVisible
-) {
-  const renderSingleMail = (mail, key) => {
-    const onClick = () => {
-      selectMail(mail.id);
-      if (toggleListVisible) {
-        toggleListVisible();
-      }
-    };
-    const isSelected = selectedMail === mail.id;
-    const recpName = mail.name;
-    const signature = {
-      splitLet: recpName
-        .match(/\b(\w)/g)
-        .join('')
-        .split('', 2),
-    };
-    const activeClass = isSelected ? 'activeMail' : '';
-    const unreadClass = !mail.read ? 'unreadMail' : '';
-    const tagOption = mail.tags
-      ? tagColor[tags.findIndex(tags => tags === mail.tags)]
-      : 'transparent';
-    return (
-      <div
-        key={`list${key}`}
-        onClick={onClick}
-        className={`${activeClass} ${unreadClass} isoMailList`}
-      >
-        <span
-          className="isoLabelIndicator"
-          style={
-            direction === 'rtl'
-              ? { borderRightColor: tagOption }
-              : { borderTopColor: tagOption }
-          }
-        />
-        <div className="isoRecipentsImg">
-          {mail.img ? (
-            <img alt="#" src={mail.img} />
-          ) : (
-            <span>{signature.splitLet}</span>
-          )}
-        </div>
-
-        <div className="isoMailInfo">
-          <div className="infoHead">
-            <p className="isoRecipents">{mail.name}</p>
-            <span className="isoReceiveDate">{timeDifference(mail.date)}</span>
-          </div>
-          <p className="isoSubject">{mail.subject}</p>
-        </div>
-      </div>
-    );
-  };
-  return (
-    <MailListWrapper className="isoMailListWrapper">
-      {mails.map((mail, index) => renderSingleMail(mail, index))}
-    </MailListWrapper>
-  );
-}
diff --git a/src/components/Mail/MailList.style.js b/src/components/Mail/MailList.style.js
deleted file mode 100644
index 7187919..0000000
--- a/src/components/Mail/MailList.style.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import styled from 'styled-components';
-import { palette } from 'styled-theme';
-import { borderRadius, transition } from '@imd/lib/helpers/style_utils';
-import WithDirection from '@imd/lib/helpers/rtl';
-
-const MailListWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow-y: auto;
-
-  .isoMailList {
-    width: 100%;
-    padding: 30px;
-    display: flex;
-    flex-shrink: 0;
-    border-bottom: 1px solid ${palette('border', 0)};
-    overflow: hidden;
-    position: relative;
-    text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')};
-    cursor: pointer;
-    ${transition()};
-
-    .isoLabelIndicator {
-      width: 0;
-      height: 0;
-      border-style: solid;
-      border-width: ${props =>
-        props['data-rtl'] === 'rtl' ? '0 15px 15px 0;' : '15px 15px 0 0'};
-      border-color: transparent transparent transparent transparent;
-      position: absolute;
-      top: 0;
-      left: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '0')};
-      right: ${props => (props['data-rtl'] === 'rtl' ? '0' : 'inherit')};
-    }
-
-    &:last-child {
-      border-bottom: 0;
-    }
-
-    .isoRecipentsImg {
-      width: 48px;
-      height: 48px;
-      display: -webkit-inline-flex;
-      display: -ms-inline-flex;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-      flex-shrink: 0;
-      ${borderRadius('50%')};
-
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-
-      span {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: ${palette('color', 4)};
-        font-size: 16px;
-        font-weight: 300;
-        color: #fff;
-        letter-spacing: 1px;
-      }
-    }
-
-    .isoMailInfo {
-      width: 100%;
-      padding: ${props =>
-        props['data-rtl'] === 'rtl' ? '0 20px 0 0' : '0 0 0 20px'};
-
-      .infoHead {
-        width: 100%;
-        display: flex;
-        align-items: baseline;
-        justify-content: space-between;
-        margin-bottom: 3px;
-
-        .isoRecipents {
-          font-size: 13px;
-          font-weight: 400;
-          color: ${palette('secondary', 2)};
-        }
-
-        .isoReceiveDate {
-          font-size: 11px;
-          font-weight: 400;
-          color: ${palette('secondary', 2)};
-          flex-shrink: 0;
-        }
-      }
-
-      .isoSubject {
-        font-size: 14px;
-        font-weight: 500;
-        color: ${palette('secondary', 0)};
-        margin: 0;
-      }
-    }
-
-    &.unreadMail {
-      background-color: ${palette('secondary', 8)};
-    }
-
-    &:hover {
-      background-color: ${palette('secondary', 8)};
-    }
-
-    &.activeMail {
-      background-color: ${palette('secondary', 9)};
-    }
-  }
-
-  .isoDescription {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    padding: 0 30px;
-    width: 100%;
-    overflow: hidden;
-  }
-`;
-
-export default WithDirection(MailListWrapper);
diff --git a/src/components/Mail/MailPagination.js b/src/components/Mail/MailPagination.js
deleted file mode 100644
index 89c84e1..0000000
--- a/src/components/Mail/MailPagination.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import MailPagination from './MailPagination.style';
-import { direction } from '@imd/lib/helpers/rtl';
-
-export default function() {
-  return (
-    <MailPagination className="isoMailPagination">
-      <button type="button" className="prevPage">
-        <i
-          className={
-            direction === 'rtl' ? 'ion-ios-arrow-forward' : 'ion-ios-arrow-back'
-          }
-        />
-      </button>
-
-      <button type="button" className="nextPage">
-        <i
-          className={
-            direction === 'rtl' ? 'ion-ios-arrow-back' : 'ion-ios-arrow-forward'
-          }
-        />
-      </button>
-    </MailPagination>
-  );
-}
diff --git a/src/components/Mail/MailPagination.style.js b/src/components/Mail/MailPagination.style.js
deleted file mode 100644
index 4c6a07f..0000000
--- a/src/components/Mail/MailPagination.style.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import styled from 'styled-components';
-import { palette } from 'styled-theme';
-import { transition } from '@imd/lib/helpers/style_utils';
-import WithDirection from '@imd/lib/helpers/rtl';
-const MailPagination = styled.div`
-  display: -webkit-flex;
-  display: -ms-flex;
-  display: flex;
-  align-items: center;
-
-  button {
-    font-size: 16px;
-    color: ${palette('secondary', 0)};
-    width: 35px;
-    height: 35px;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #ffffff;
-    outline: 0;
-    border: 1px solid ${palette('border', 0)};
-    cursor: pointer;
-    ${transition()};
-
-    i {
-      font-size: 18px;
-      width: 100%;
-      height: 100%;
-      color: ${palette('secondary', 0)};
-      ${transition()};
-    }
-
-    &.nextPage {
-      margin: ${props =>
-        props['data-rtl'] === 'rtl' ? '0 -1px 0 0' : '0 0 0 -1px'};
-    }
-
-    &:hover {
-      color: ${palette('primary', 0)};
-      background-color: darken(#ffffff, 1%);
-
-      i {
-        color: ${palette('primary', 0)};
-      }
-    }
-  }
-`;
-
-export default WithDirection(MailPagination);
diff --git a/src/components/Mail/MailTags.js b/src/components/Mail/MailTags.js
deleted file mode 100644
index ef4fa7c..0000000
--- a/src/components/Mail/MailTags.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import MailTagsList from './MailTags.style';
-const tags = [
-  'Friend',
-  'Family',
-  'Colleague',
-  'Teachers',
-  'Students',
-  'ClassMates',
-];
-const tagColor = [
-  '#CD3131',
-  '#74B49B',
-  '#0962EA',
-  '#141829',
-  '#FFCD38',
-  '#61105E',
-];
-
-function gettags(mails, filterAttr) {
-  const tags = {};
-  mails.forEach(mail => {
-    if (mail.tags && mail.bucket === filterAttr.bucket) {
-      mail.tags.split(' ').forEach(tag => (tags[tag] = 1));
-    }
-  });
-  return tags;
-}
-
-export default function mailtags(
-  mails,
-  filterAction,
-  filterAttr,
-  onDrawerClose
-) {
-  const Tags = gettags(mails, filterAttr);
-  const renderSingleTag = (tag, key) => {
-    const onClick = () => {
-      filterAction({ tag });
-      if (onDrawerClose) {
-        onDrawerClose();
-      }
-    };
-    const selectedTag = tag === filterAttr.tag;
-    const activeClass = selectedTag ? 'active' : '';
-    const background = tagColor[tags.findIndex(tags => tags === tag)];
-    return (
-      <li
-        key={`tag${key}`}
-        onClick={onClick}
-        className={`isoMailTag ${activeClass}`}
-      >
-        <span className="isoLabelIndicatorColor" style={{ background }} />
-        <span>{tag}</span>
-      </li>
-    );
-  };
-  return (
-    <MailTagsList className="isoMailTagList">
-      <p className="isoSectionLabel">Label</p>
-      {Object.keys(Tags).map((tag, index) => renderSingleTag(tag, index))}
-    </MailTagsList>
-  );
-}
-export { tags, tagColor };
diff --git a/src/components/Mail/MailTags.style.js b/src/components/Mail/MailTags.style.js
deleted file mode 100644
index c87653b..0000000
--- a/src/components/Mail/MailTags.style.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import styled from 'styled-components';
-import { palette } from 'styled-theme';
-import { borderRadius, transition } from '@imd/lib/helpers/style_utils';
-import WithDirection from '@imd/lib/helpers/rtl';
-const MailTagsList = styled.ul`
-  padding: 30px 0;
-  text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')};
-
-  .isoSectionLabel {
-    font-size: 16px;
-    font-weight: 500;
-    color: ${palette('secondary', 2)};
-    line-height: 1.1;
-    margin-bottom: 20px;
-    padding: 15px 30px;
-    background-color: ${palette('grayscale', 6)};
-  }
-
-  .isoMailTag {
-    width: 100%;
-    display: flex;
-    margin-bottom: 15px;
-    padding: 0 30px;
-    align-items: center;
-    cursor: pointer;
-
-    .isoLabelIndicatorColor {
-      width: 10px;
-      height: 10px;
-      display: flex;
-      margin: ${props =>
-        props['data-rtl'] === 'rtl' ? '0 5px 0 0' : '0 0 0 5px'};
-      ${borderRadius('50%')};
-    }
-
-    span {
-      font-size: 14px;
-      font-weight: 400;
-      color: ${palette('secondary', 2)};
-      cursor: pointer;
-      line-height: 1.1;
-      margin: ${props =>
-        props['data-rtl'] === 'rtl' ? '0 20px 0 0' : '0 0 0 20px'};
-      ${transition()};
-    }
-
-    &.active {
-      span {
-        font-weight: 500;
-        color: ${palette('primary', 0)};
-      }
-    }
-
-    &:hover {
-      span {
-        color: ${palette('primary', 0)};
-      }
-    }
-  }
-`;
-
-export default WithDirection(MailTagsList);
diff --git a/src/components/Mail/SingleMail.js b/src/components/Mail/SingleMail.js
deleted file mode 100644
index 31aef21..0000000
--- a/src/components/Mail/SingleMail.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react';
-import ComposeMail from './ComposeMail';
-import { timeDifference } from '@imd/lib/helpers/utility';
-import MailAction from './SingleMailActions';
-import { tags, tagColor } from './MailTags.js';
-import {
-  SingleMailContents,
-  SingleMailHeader,
-  SingleMailInfo,
-  SingleMailBody,
-  SingleMailReply,
-} from './SingleMail.style';
-
-export default function singleMail(
-  allMail,
-  filterMails,
-  index,
-  replyMail,
-  changeReplyMail,
-  selectMail,
-  toggleListVisible
-) {
-  const mail = allMail[index];
-  const recpName = mail.name;
-  const signature = {
-    splitLet: recpName
-      .match(/\b(\w)/g)
-      .join('')
-      .split('', 2),
-  };
-
-  const labelColor = mail.tags
-    ? tagColor[tags.findIndex(tags => tags === mail.tags)]
-    : '';
-
-  return (
-    <SingleMailContents className="isoSingleMailContents">
-      <MailAction
-        mail={mail}
-        filterMails={filterMails}
-        selectMail={selectMail}
-        toggleListVisible={toggleListVisible}
-      />
-      <div className="isoSingleMail">
-        <SingleMailHeader className="isoMailHeader">
-          <h2>{mail.subject}</h2>
-          <span className="label" style={{ backgroundColor: labelColor }}>
-            {mail.tags ? mail.tags : mail.bucket}
-          </span>
-        </SingleMailHeader>
-
-        <SingleMailInfo className="isoMailInfo">
-          <div className="isoRecipentsImg">
-            {mail.img ? (
-              <img alt="#" src={mail.img} />
-            ) : (
-              <span>{signature.splitLet}</span>
-            )}
-          </div>
-          <div className="isoMailAddress">
-            <div className="isoAddress">
-              <h3>
-                {mail.name} <span>&lt;{mail.email}&gt;</span>
-              </h3>
-              <span className="mailDate">{timeDifference(mail.date)}</span>
-            </div>
-            <p>
-              to <span>me</span>
-            </p>
-          </div>
-        </SingleMailInfo>
-
-        <SingleMailBody className="isoMailBody">
-          <p>{mail.body}</p>
-        </SingleMailBody>
-
-        <SingleMailReply className="isoReplyMail">
-          {replyMail ? (
-            <ComposeMail allMail={allMail} />
-          ) : (
-            <div
-              onClick={event => changeReplyMail(true)}
-              className="isoReplyMailBtn"
-            >
-              Click here to <span>Reply</span>
-            </div>
-          )}
-        </SingleMailReply>
-      </div>
-    </SingleMailContents>
-  );
-}
diff --git a/src/components/Mail/SingleMail.style.js b/src/components/Mail/SingleMail.style.js
deleted file mode 100644
index dcc56e0..0000000
--- a/src/components/Mail/SingleMail.style.js
+++ /dev/null
@@ -1,243 +0,0 @@
-import styled from 'styled-components';
-import { palette } from 'styled-theme';
-import { borderRadius, transition } from '@imd/lib/helpers/style_utils';
-import WithDirection from '@imd/lib/helpers/rtl';
-const SingleMailContents = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  height: 100%;
-
-  .isoSingleMail {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow-y: auto;
-  }
-`;
-
-const WDSingleMailHeader = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding: 35px;
-  flex-shrink: 0;
-  border-bottom: 1px solid ${palette('border', 0)};
-
-  @media only screen and (max-width: 767px) {
-    padding: 35px 20px;
-  }
-
-  h2 {
-    font-size: 18px;
-    font-weight: 400;
-    color: ${palette('secondary', 2)};
-    line-height: 1.5;
-    margin: 0;
-    text-align: left;
-  }
-
-  .label {
-    font-size: 12px;
-    font-weight: 400;
-    color: #ffffff;
-    line-height: 1;
-    padding: 0 15px;
-    height: 25px;
-    line-height: 25px;
-    background-color: ${palette('primary', 0)};
-    text-transform: capitalize;
-    margin: ${props =>
-      props['data-rtl'] === 'rtl' ? '0 25px 0 0' : '0 0 0 25px'};
-  }
-`;
-
-const WDSingleMailInfo = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  padding: 25px 35px;
-  border-bottom: 1px solid ${palette('border', 0)};
-
-  @media only screen and (max-width: 767px) {
-    padding: 25px 20px;
-  }
-
-  .isoRecipentsImg {
-    width: 48px;
-    height: 48px;
-    display: -webkit-inline-flex;
-    display: -ms-inline-flex;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    flex-shrink: 0;
-    ${borderRadius('50%')};
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-
-    span {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: ${palette('color', 4)};
-      font-size: 16px;
-      font-weight: 300;
-      color: #fff;
-      letter-spacing: 1px;
-    }
-  }
-
-  .isoMailAddress {
-    width: 100%;
-    padding: ${props =>
-      props['data-rtl'] === 'rtl' ? '0 20px 0 0' : '0 0 0 20px'};
-    display: flex;
-    flex-direction: column;
-    text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')};
-
-    .isoAddress {
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
-      align-items: baseline;
-      position: relative;
-
-      h3 {
-        font-size: 14px;
-        font-weight: 700;
-        color: ${palette('text', 0)};
-        line-height: 1.1;
-        margin: 0 0 8px;
-
-        @media only screen and (max-width: 767px) {
-          line-height: 1.5;
-        }
-
-        span {
-          font-size: inherit;
-          font-weight: 400;
-          color: ${palette('secondary', 2)};
-          padding: ${props =>
-            props['data-rtl'] === 'rtl' ? '0 5px 0 0' : '0 0 0 5px'};
-          display: -webkit-inline-flex;
-          display: -ms-inline-flex;
-          display: inline-flex;
-        }
-      }
-
-      .mailDate {
-        font-size: 13px;
-        font-weight: 400;
-        color: ${palette('secondary', 2)};
-        flex-shrink: 0;
-
-        @media only screen and (max-width: 767px) {
-          position: absolute;
-          right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '0')};
-          left: ${props => (props['data-rtl'] === 'rtl' ? '0' : 'inherit')};
-        }
-      }
-    }
-
-    p {
-      font-size: 13px;
-      font-weight: 400;
-      color: ${palette('secondary', 2)};
-      line-height: 1.1;
-
-      span {
-        font-size: inherit;
-        font-weight: 700;
-        color: ${palette('text', 0)};
-      }
-    }
-  }
-`;
-
-const WDSingleMailBody = styled.div`
-  padding: 30px 35px;
-  text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')};
-  flex-shrink: 0;
-  border-bottom: 1px solid ${palette('border', 0)};
-
-  @media only screen and (max-width: 767px) {
-    padding: 30px 20px;
-  }
-
-  p {
-    font-size: 14px;
-    font-weight: 400;
-    color: ${palette('text', 3)};
-    line-height: 1.5;
-    margin-bottom: 21px;
-  }
-`;
-
-const WDSingleMailReply = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding: 35px;
-  flex-shrink: 0;
-
-  @media only screen and (max-width: 767px) {
-    padding: 35px 20px;
-  }
-
-  .isoComposeMailWrapper {
-    padding: 0;
-    height: auto;
-    overflow: hidden;
-  }
-
-  .isoReplyMailBtn {
-    width: 100%;
-    height: 80px;
-    display: -webkit-flex;
-    display: -ms-flex;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    font-size: 14px;
-    color: ${palette('text', 2)};
-    border: 1px solid ${palette('border', 0)};
-    padding: 10px 15px;
-
-    span {
-      font-size: inherit;
-      color: ${palette('text', 2)};
-      text-decoration: underline;
-      padding: ${props =>
-        props['data-rtl'] === 'rtl' ? '0 3px 0 0' : '0 0 0 3px'};
-      cursor: pointer;
-      ${transition()};
-
-      &:hover {
-        color: ${palette('primary', 0)};
-      }
-    }
-  }
-`;
-
-const SingleMailHeader = WithDirection(WDSingleMailHeader);
-const SingleMailInfo = WithDirection(WDSingleMailInfo);
-const SingleMailBody = WithDirection(WDSingleMailBody);
-const SingleMailReply = WithDirection(WDSingleMailReply);
-
-export {
-  SingleMailContents,
-  SingleMailHeader,
-  SingleMailInfo,
-  SingleMailBody,
-  SingleMailReply,
-};
diff --git a/src/components/Mail/SingleMailActions.js b/src/components/Mail/SingleMailActions.js
deleted file mode 100644
index 867d8a6..0000000
--- a/src/components/Mail/SingleMailActions.js
+++ /dev/null
@@ -1,161 +0,0 @@
-import React from 'react';
-import Popover from '../uielements/popover';
-import Popconfirm from '../Feedback/Popconfirm';
-import notification from '../Notification';
-import { buckets } from './MailBuckets';
-import { tags } from './MailTags';
-import {
-  SingleMailActions,
-  MailActionsWrapper,
-  MailCategoryWrapper,
-  MailPaginationWrapper,
-  MailActionDropdown,
-} from './SingleMailActions.style';
-import { direction } from '@imd/lib/helpers/rtl';
-
-function DeleteButton() {
-  return (
-    <Popconfirm
-      title={`Sure to delete This mail?`}
-      okText="DELETE"
-      cancelText="No"
-      onConfirm={() => {
-        notification('error', `Deleted selected mail`, '');
-      }}
-    >
-      <button type="button" className="mailDelete">
-        <i className="ion-android-delete" />
-      </button>
-    </Popconfirm>
-  );
-}
-
-function MoveMailButton() {
-  const bucketOptions = buckets.map(bucket => (
-    <li
-      onClick={() => {
-        notification('success', `Massage Moved Successfully`, '');
-      }}
-      key={bucket}
-    >
-      {bucket}
-    </li>
-  ));
-  const content = <MailActionDropdown>{bucketOptions}</MailActionDropdown>;
-  return (
-    <Popover
-      title={`Move mail`}
-      content={content}
-      overlayClassName="mailMoveDropdown"
-    >
-      <button type="button" className="mailArchive">
-        <i className="ion-android-folder" />
-      </button>
-    </Popover>
-  );
-}
-
-function SelectTagButton() {
-  const tagOptions = tags.map(tag => (
-    <li
-      onClick={() => {
-        notification('success', `Label Added`, '');
-      }}
-      key={tag}
-    >
-      {tag}
-    </li>
-  ));
-  const content = <MailActionDropdown>{tagOptions}</MailActionDropdown>;
-  return (
-    <Popover
-      title={`Select tag`}
-      content={content}
-      overlayClassName="mailMoveDropdown"
-    >
-      <button type="button" className="mailReport">
-        <i className="ion-pricetags" />
-      </button>
-    </Popover>
-  );
-}
-
-export default function({ mail, filterMails, selectMail, toggleListVisible }) {
-  const index = filterMails.findIndex(filterMail => filterMail.id === mail.id);
-  const toggleView = () => {
-    toggleListVisible();
-  };
-  return (
-    <SingleMailActions className="isoMailActionsController">
-      {toggleListVisible ? (
-        <button className="mailBackBtn" onClick={toggleView}>
-          Inbox
-        </button>
-      ) : (
-        ''
-      )}
-      <MailActionsWrapper className="isoMailActions">
-        <button
-          type="button"
-          className="mailArchive"
-          onClick={() => {
-            notification('success', 'this mail archived');
-          }}
-        >
-          <i className="ion-android-archive" />
-        </button>
-
-        <button
-          type="button"
-          className="mailReport"
-          onClick={() => {
-            notification('success', 'Reported as spam');
-          }}
-        >
-          <i className="ion-android-alert" />
-        </button>
-
-        <DeleteButton />
-      </MailActionsWrapper>
-
-      <MailCategoryWrapper className="isoMailMove">
-        <MoveMailButton />
-        <SelectTagButton />
-      </MailCategoryWrapper>
-
-      <MailPaginationWrapper className="isoSingleMailPagination">
-        {index === 0 ? (
-          ''
-        ) : (
-          <button
-            type="button"
-            className="prevPage"
-            onClick={() => selectMail(filterMails[index - 1].id)}
-          >
-            <i
-              className={
-                direction === 'rtl' ? 'ion-chevron-right' : 'ion-chevron-left'
-              }
-            />
-          </button>
-        )}
-
-        {index + 1 === filterMails.length ? (
-          ''
-        ) : (
-          <button
-            type="button"
-            className="nextPage"
-            onClick={() => selectMail(filterMails[index + 1].id)}
-          >
-            <i
-              className={
-                direction === 'rtl' ? 'ion-chevron-left' : 'ion-chevron-right'
-              }
-            />
-          </button>
-        )}
-      </MailPaginationWrapper>
-    </SingleMailActions>
-  );
-}
diff --git a/src/components/Mail/SingleMailActions.style.js b/src/components/Mail/SingleMailActions.style.js
deleted file mode 100644
index 9f0d207..0000000
--- a/src/components/Mail/SingleMailActions.style.js
+++ /dev/null
@@ -1,170 +0,0 @@
-import styled from 'styled-components';
-import { palette } from 'styled-theme';
-import { transition } from '@imd/lib/helpers/style_utils';
-import WithDirection from '@imd/lib/helpers/rtl';
-const WDSingleMailActions = styled.div`
-  width: 100%;
-  height: 80px;
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 0px 30px;
-  background-color: ${palette('grayscale', 6)};
-  border-bottom: 1px solid ${palette('border', 0)};
-
-  @media only screen and (max-width: 767px) {
-    padding: 0 15px;
-    height: 60px;
-    overflow: hidden;
-    overflow-x: auto;
-  }
-
-  .mailBackBtn {
-    color: ${palette('secondary', 0)};
-    width: auto;
-    height: 35px;
-    padding: 0 10px;
-    font-size: 14px;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #ffffff;
-    outline: 0;
-    border: 1px solid ${palette('border', 0)};
-    margin: ${props =>
-      props['data-rtl'] === 'rtl' ? '0 -1px 0 15px' : '0 15px 0 -1px'};
-    cursor: pointer;
-    ${transition()};
-
-    @media only screen and (max-width: 479px) {
-      margin: ${props =>
-        props['data-rtl'] === 'rtl' ? '0 -1px 0 5px' : '0 5px 0 -1px'};
-    }
-
-    i {
-      font-size: 16px;
-      color: ${palette('secondary', 0)};
-      ${transition()};
-    }
-
-    &:hover {
-      color: ${palette('primary', 0)};
-      background-color: darken(#ffffff, 1%);
-
-      i {
-        color: ${palette('primary', 0)};
-      }
-    }
-  }
-
-  .mailMoveDropdown {
-    .ant-popover-inner-content {
-      li {
-        cursor: pointer;
-        padding: 3px 0;
-
-        &:hover {
-          color: ${palette('primary', 0)};
-        }
-      }
-    }
-  }
-`;
-
-const WDMailActionsWrapper = styled.div`
-  display: -webkit-flex;
-  display: -ms-flex;
-  display: flex;
-
-  button {
-    font-size: 16px;
-    color: ${palette('secondary', 0)};
-    text-align: center;
-    width: 35px;
-    height: 35px;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #ffffff;
-    outline: 0;
-    border: 1px solid ${palette('border', 0)};
-    margin: ${props =>
-      props['data-rtl'] === 'rtl' ? '0 -1px 0 0' : '0 0 0 -1px'};
-    cursor: pointer;
-    ${transition()};
-
-    i {
-      font-size: 16px;
-      color: ${palette('secondary', 0)};
-      width: 100%;
-      ${transition()};
-    }
-
-    &:first-child {
-      margin: ${props =>
-        props['data-rtl'] === 'rtl' ? '0 0 0 -1px' : '0 -1px 0 0'};
-    }
-
-    &:hover {
-      color: ${palette('primary', 0)};
-      background-color: #fcfcfc;
-
-      i {
-        color: ${palette('primary', 0)};
-      }
-    }
-
-    &.mailBackBtn {
-      width: auto;
-      padding: 0 10px;
-      font-size: 14px;
-    }
-  }
-`;
-
-const WDMailCategoryWrapper = styled(WDMailActionsWrapper)`
-  margin: ${props =>
-    props['data-rtl'] === 'rtl' ? '0 20px 0 0' : '0 0 0 20px'};
-
-  @media only screen and (max-width: 767px) {
-    margin: ${props =>
-      props['data-rtl'] === 'rtl' ? '0 auto 0 10px' : '0 10px 0 auto'};
-  }
-
-  @media only screen and (max-width: 479px) {
-    margin: ${props =>
-      props['data-rtl'] === 'rtl' ? '0 0 0 5px' : '0 5px 0 0'};
-  }
-`;
-
-const WDMailPaginationWrapper = styled(WDMailActionsWrapper)`
-  margin: ${props =>
-    props['data-rtl'] === 'rtl' ? '0 auto 0 0' : '0 0 0 auto'};
-`;
-
-const MailActionDropdown = styled.ul`
-  li {
-    cursor: pointer;
-    padding: 3px 0;
-
-    &:hover {
-      color: ${palette('primary', 0)};
-    }
-  }
-`;
-
-const SingleMailActions = WithDirection(WDSingleMailActions);
-const MailCategoryWrapper = WithDirection(WDMailCategoryWrapper);
-const MailPaginationWrapper = WithDirection(WDMailPaginationWrapper);
-const MailActionsWrapper = WithDirection(WDMailActionsWrapper);
-
-export {
-  SingleMailActions,
-  MailActionsWrapper,
-  MailCategoryWrapper,
-  MailPaginationWrapper,
-  MailActionDropdown,
-};
diff --git a/src/components/Mail/reactTags.css b/src/components/Mail/reactTags.css
deleted file mode 100644
index 9763fd7..0000000
--- a/src/components/Mail/reactTags.css
+++ /dev/null
@@ -1,57 +0,0 @@
-div.ReactTags__tags {
-  position: relative;
-}
-
-div.ReactTags__tagInput {
-  width: 200px;
-  border-radius: 2px;
-  display: inline-block;
-}
-div.ReactTags__tagInput input.ReactTags__tagInputField,
-div.ReactTags__tagInput input.ReactTags__tagInputField:focus {
-  height: 31px;
-  margin: 0;
-  font-size: 12px;
-  width: 100%;
-  border: 1px solid #eee;
-}
-
-div.ReactTags__selected span.ReactTags__tag {
-  border: 1px solid #ddd;
-  background: #eee;
-  font-size: 12px;
-  display: inline-block;
-  padding: 5px;
-  margin: 0 5px;
-  cursor: move;
-  border-radius: 2px;
-}
-div.ReactTags__selected a.ReactTags__remove {
-  color: #aaa;
-  margin-left: 5px;
-  cursor: pointer;
-}
-
-div.ReactTags__suggestions {
-  position: absolute;
-}
-div.ReactTags__suggestions ul {
-  list-style-type: none;
-  box-shadow: 0.05em 0.01em 0.5em rgba(0, 0, 0, 0.2);
-  background: white;
-  width: 200px;
-}
-div.ReactTags__suggestions li {
-  border-bottom: 1px solid #ddd;
-  padding: 5px 10px;
-  margin: 0;
-}
-div.ReactTags__suggestions li mark {
-  text-decoration: underline;
-  background: none;
-  font-weight: 600;
-}
-div.ReactTags__suggestions ul li.ReactTags__activeSuggestion {
-  background: #b7cfe0;
-  cursor: pointer;
-}
diff --git a/src/components/PostCard/InstagramCard.js b/src/components/PostCard/InstagramCard.js
deleted file mode 100644
index acf7edb..0000000
--- a/src/components/PostCard/InstagramCard.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import {
-  IoIosImages,
-  IoIosVideocam,
-  IoIosPlay,
-  IoIosHeart,
-  IoIosChatbubbles,
-} from 'react-icons/io';
-import CardWrapper from './InstagramCard.style';
-
-const InstagramCard = ({
-  key,
-  type,
-  image,
-  numberOfView,
-  numberOfcomment,
-  numberOflike,
-  onClick,
-  className,
-}) => {
-  return (
-    <CardWrapper
-      className={`post-card instagram ${className ? className : ''}`}
-      key={key}
-      onClick={onClick}
-    >
-      <img src={image} alt="instagram post" />
-      {type === 'gallery' && <IoIosImages />}
-      {type === 'video' && <IoIosVideocam />}
-      <figcaption>
-        <ul>
-          {type === 'video' ? (
-            <li>
-              {numberOfView} <IoIosPlay />
-            </li>
-          ) : (
-            <li>
-              {numberOflike} <IoIosHeart />
-            </li>
-          )}
-          <li>
-            {numberOfcomment} <IoIosChatbubbles />
-          </li>
-        </ul>
-      </figcaption>
-    </CardWrapper>
-  );
-};
-
-export default InstagramCard;
diff --git a/src/components/PostCard/InstagramCard.style.js b/src/components/PostCard/InstagramCard.style.js
deleted file mode 100644
index 44bbc38..0000000
--- a/src/components/PostCard/InstagramCard.style.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import styled from 'styled-components';
-
-const CardWrapper = styled.figure`
-  max-width: 370px;
-  width: 100%;
-  position: relative;
-  img {
-    max-width: 100%;
-    height: auto;
-    border-radius: 4px;
-  }
-  img + svg {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-    width: auto;
-    height: 18px;
-    fill: #ffffff;
-    z-index: 2;
-  }
-  figcaption {
-    position: absolute;
-    top: 0;
-    left: 0;
-    border-radius: 4px;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba(0, 0, 0, 0.4);
-    opacity: 0;
-    visibility: hidden;
-    transition: all 0.1s ease;
-    ul {
-      margin: 0;
-      padding: 0;
-      display: flex;
-      align-items: center;
-      li {
-        display: inline-flex;
-        align-items: center;
-        margin: 0 20px;
-        color: #ffffff;
-        font-size: 16px;
-        font-weight: 400;
-        svg {
-          width: auto;
-          height: 18px;
-          margin-left: 10px;
-        }
-        &:first-child {
-          margin-left: 0;
-        }
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-    }
-  }
-  &:hover {
-    figcaption {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-`;
-
-export default CardWrapper;
diff --git a/src/components/PostCard/index.js b/src/components/PostCard/index.js
deleted file mode 100644
index c80fe87..0000000
--- a/src/components/PostCard/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import InstagramCard from './InstagramCard';
-
-const PostCard = ({ variant, ...props }) => {
-  return <>{variant === 'instagram' && <InstagramCard {...props} />}</>;
-};
-
-export default PostCard;
diff --git a/src/components/ScrumBoard/AntFields.js b/src/components/ScrumBoard/AntFields.js
deleted file mode 100644
index a305848..0000000
--- a/src/components/ScrumBoard/AntFields.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import map from 'lodash/map';
-import React from 'react';
-import {
-  DatePicker,
-  Form,
-  Input,
-  TimePicker,
-  Select,
-  Badge,
-  Switch,
-} from 'antd';
-
-const FormItem = Form.Item;
-const { Option } = Select;
-const { TextArea } = Input;
-const CreateAntField = Component => ({
-  field,
-  form,
-  hasFeedback,
-  label,
-  tasklabel,
-  selectOptions,
-  submitCount,
-  type,
-  formitem,
-  className,
-  ...props
-}) => {
-  const touched = form.touched[field.name];
-  const submitted = submitCount > 0;
-  const hasError = form.errors[field.name];
-  const submittedError = hasError && submitted;
-  const touchedError = hasError && touched;
-  const onInputChange = ({ target: { value } }) =>
-    form.setFieldValue(field.name, value);
-  const onChange = value => form.setFieldValue(field.name, value);
-  const onBlur = () => form.setFieldTouched(field.name, true);
-  return (
-    <div className="field-container">
-      <FormItem
-        label={label}
-        colon={false}
-        className={className}
-        hasFeedback={
-          (hasFeedback && submitted) || (hasFeedback && touched) ? true : false
-        }
-        help={submittedError || touchedError ? hasError : false}
-        validateStatus={submittedError || touchedError ? 'error' : 'success'}
-        {...formitem}
-      >
-        {tasklabel && tasklabel}
-        <Component
-          {...field}
-          {...props}
-          onBlur={onBlur}
-          onChange={type ? onInputChange : onChange}
-        >
-          {selectOptions &&
-            map(selectOptions, name => (
-              <Option key={name}>
-                <Badge status={name} text={name} />
-              </Option>
-            ))}
-        </Component>
-      </FormItem>
-    </div>
-  );
-};
-
-export const AntSelect = CreateAntField(Select);
-export const AntDatePicker = CreateAntField(DatePicker);
-export const AntInput = CreateAntField(Input);
-export const AntTimePicker = CreateAntField(TimePicker);
-export const AntTextArea = CreateAntField(TextArea);
-export const AntSwitch = CreateAntField(Switch);
diff --git a/src/components/ScrumBoard/Attachment.js b/src/components/ScrumBoard/Attachment.js
deleted file mode 100644
index 7002da8..0000000
--- a/src/components/ScrumBoard/Attachment.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-
-import { Upload, Icon, Modal } from 'antd';
-
-export default class PicturesWall extends React.Component {
-  state = {
-    previewVisible: false,
-    previewImage: '',
-    fileList: [
-      {
-        uid: '-1',
-        name: 'xxx.png',
-        status: 'done',
-        url:
-          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-      },
-    ],
-  };
-
-  handleCancel = () => this.setState({ previewVisible: false });
-
-  handlePreview = file => {
-    this.setState({
-      previewImage: file.url || file.thumbUrl,
-      previewVisible: true,
-    });
-  };
-
-  handleChange = ({ fileList }) => this.setState({ fileList });
-
-  render() {
-    const { previewVisible, previewImage, fileList } = this.state;
-    const uploadButton = (
-      <div>
-        <Icon type="plus" />
-        <div className="ant-upload-text">Upload</div>
-      </div>
-    );
-    return (
-      <div className="clearfix">
-        <Upload
-          action=""
-          listType="picture-card"
-          fileList={fileList}
-          onPreview={this.handlePreview}
-          onChange={this.handleChange}
-        >
-          {fileList.length >= 3 ? null : uploadButton}
-        </Upload>
-        <Modal
-          visible={previewVisible}
-          footer={null}
-          onCancel={this.handleCancel}
-        >
-          <img alt="example" style={{ width: '100%' }} src={previewImage} />
-        </Modal>
-      </div>
-    );
-  }
-}
diff --git a/src/components/ScrumBoard/CheckList.js b/src/components/ScrumBoard/CheckList.js
deleted file mode 100644
index 965f68f..0000000
--- a/src/components/ScrumBoard/CheckList.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import React from 'react';
-import { Form, Input, Icon, Button } from 'antd';
-
-let id = 0;
-
-class DynamicFieldSet extends React.Component {
-  remove = k => {
-    const { form } = this.props;
-    // can use data-binding to get
-    const keys = form.getFieldValue('keys');
-    // We need at least one passenger
-    if (keys.length === 1) {
-      return;
-    }
-
-    // can use data-binding to set
-    form.setFieldsValue({
-      keys: keys.filter(key => key !== k),
-    });
-  };
-
-  add = () => {
-    const { form } = this.props;
-    // can use data-binding to get
-    const keys = form.getFieldValue('keys');
-    const nextKeys = keys.concat(++id);
-    // can use data-binding to set
-    // important! notify form to detect changes
-    form.setFieldsValue({
-      keys: nextKeys,
-    });
-  };
-
-  handleSubmit = e => {
-    e.preventDefault();
-    this.props.form.validateFields((err, values) => {
-      if (!err) {
-        console.log('Received values of form: ', values);
-      }
-    });
-  };
-
-  render() {
-    const { getFieldDecorator, getFieldValue } = this.props.form;
-    const formItemLayout = {
-      labelCol: {
-        xs: { span: 24 },
-        sm: { span: 4 },
-      },
-      wrapperCol: {
-        xs: { span: 24 },
-        sm: { span: 20 },
-      },
-    };
-    const formItemLayoutWithOutLabel = {
-      wrapperCol: {
-        xs: { span: 24, offset: 0 },
-        sm: { span: 20, offset: 4 },
-      },
-    };
-    getFieldDecorator('keys', { initialValue: [] });
-    const keys = getFieldValue('keys');
-    const formItems = keys.map((k, index) => (
-      <Form.Item
-        {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
-        label={index === 0 ? 'Passengers' : ''}
-        required={false}
-        key={k}
-      >
-        {getFieldDecorator(`names[${k}]`, {
-          validateTrigger: ['onChange', 'onBlur'],
-          rules: [
-            {
-              required: true,
-              whitespace: true,
-              message: "Please input passenger's name or delete this field.",
-            },
-          ],
-        })(
-          <Input
-            placeholder="passenger name"
-            style={{ width: '60%', marginRight: 8 }}
-          />
-        )}
-        {keys.length > 1 ? (
-          <Icon
-            className="dynamic-delete-button"
-            type="minus-circle-o"
-            disabled={keys.length === 1}
-            onClick={() => this.remove(k)}
-          />
-        ) : null}
-      </Form.Item>
-    ));
-    return (
-      <Form onSubmit={this.handleSubmit}>
-        {formItems}
-        <Form.Item {...formItemLayoutWithOutLabel}>
-          <Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
-            <Icon type="plus" /> Add field
-          </Button>
-        </Form.Item>
-        <Form.Item {...formItemLayoutWithOutLabel}>
-          <Button type="primary" htmlType="submit">
-            Submit
-          </Button>
-        </Form.Item>
-      </Form>
-    );
-  }
-}
-
-export default Form.create()(DynamicFieldSet);
diff --git a/src/components/ScrumBoard/Comments/Comments.js b/src/components/ScrumBoard/Comments/Comments.js
deleted file mode 100644
index b85f31c..0000000
--- a/src/components/ScrumBoard/Comments/Comments.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import React from 'react';
-import { Comment, Avatar, Form, Button, List, Input, Tooltip } from 'antd';
-import moment from 'moment';
-
-import { CommentListWrapper } from './Comments.style';
-
-const TextArea = Input.TextArea;
-
-const CommentList = ({ comments }) => (
-  <CommentListWrapper>
-    <List
-      dataSource={comments}
-      // header={`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`}
-      itemLayout="horizontal"
-      renderItem={props => <Comment {...props} />}
-    />
-  </CommentListWrapper>
-);
-
-const Editor = ({ onChange, onSubmit, submitting, value }) => (
-  <div>
-    <Form.Item>
-      <TextArea rows={4} onChange={onChange} value={value} />
-    </Form.Item>
-    <Form.Item>
-      <Button
-        htmlType="submit"
-        loading={submitting}
-        onClick={onSubmit}
-        type="primary"
-      >
-        Add Comment
-      </Button>
-    </Form.Item>
-  </div>
-);
-
-class Comments extends React.Component {
-  state = {
-    comments: [
-      {
-        actions: [<span>Reply to</span>],
-        author: 'Han Solo',
-        avatar:
-          'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
-        content: (
-          <p>
-            We supply a series of design principles, practical patterns and high
-            quality design resources (Sketch and Axure), to help people create
-            their product prototypes beautifully and efficiently.
-          </p>
-        ),
-        datetime: (
-          <Tooltip
-            title={moment()
-              .subtract(1, 'days')
-              .format('YYYY-MM-DD HH:mm:ss')}
-          >
-            <span>
-              {moment()
-                .subtract(1, 'days')
-                .fromNow()}
-            </span>
-          </Tooltip>
-        ),
-      },
-    ],
-    submitting: false,
-    value: '',
-  };
-
-  handleSubmit = () => {
-    if (!this.state.value) {
-      return;
-    }
-
-    this.setState({
-      submitting: true,
-    });
-
-    setTimeout(() => {
-      this.setState({
-        submitting: false,
-        value: '',
-        comments: [
-          {
-            actions: [<span>Reply to</span>],
-            author: 'Han Solo',
-            avatar:
-              'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
-            content: <p>{this.state.value}</p>,
-            datetime: moment().fromNow(),
-          },
-          ...this.state.comments,
-        ],
-      });
-    }, 1000);
-  };
-
-  handleChange = e => {
-    this.setState({
-      value: e.target.value,
-    });
-  };
-
-  render() {
-    const { comments, submitting, value } = this.state;
-
-    return (
-      <div>
-        {comments.length > 0 && <CommentList comments={comments} />}
-        <Comment
-          avatar={
-            <Avatar
-              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-              alt="Han Solo"
-            />
-          }
-          content={
-            <Editor
-              onChange={this.handleChange}
-              onSubmit={this.handleSubmit}
-              submitting={submitting}
-              value={value}
-            />
-          }
-        />
-      </div>
-    );
-  }
-}
-
-export default Comments;
diff --git a/src/components/ScrumBoard/Comments/Comments.style.js b/src/components/ScrumBoard/Comments/Comments.style.js
deleted file mode 100644
index 6207247..0000000
--- a/src/components/ScrumBoard/Comments/Comments.style.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import styled from 'styled-components';
-
-export const CommentListWrapper = styled.div`
-  border-top: 1px solid #e2e2e2;
-  margin-top: 30px;
-  .ant-comment-inner {
-    padding: 30px 0 16px;
-  }
-  .ant-comment-avatar {
-    flex-shrink: 0;
-    position: relative;
-    margin-right: 16px;
-    cursor: pointer;
-    width: 35px;
-    height: 35px;
-  }
-  .ant-comment-content-author {
-    margin-bottom: 4px;
-    font-size: 14px;
-    display: flex;
-    justify-content: flex-start;
-  }
-  .ant-comment-content-author > a,
-  .ant-comment-content-author > span {
-    height: auto;
-    padding-right: 8px;
-    font-size: 16px;
-    line-height: 30px;
-    color: #788195;
-    font-family: 'Roboto';
-    font-weight: 500;
-  }
-  .ant-comment-content-author-time > span {
-    font-size: 14px;
-    line-height: 30px;
-    color: #8c90b5;
-    font-family: 'Roboto';
-    font-weight: 400;
-  }
-  .ant-comment-content-detail {
-    font-size: 14px;
-    line-height: 22px;
-    color: #797979;
-    font-family: 'Roboto';
-    font-weight: 400;
-  }
-`;
diff --git a/src/components/ScrumBoard/FieldFormats.js b/src/components/ScrumBoard/FieldFormats.js
deleted file mode 100644
index 4d25f95..0000000
--- a/src/components/ScrumBoard/FieldFormats.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export const dateFormat = 'MM-DD-YYYY';
-export const timeFormat = 'HH:mm';
diff --git a/src/components/ScrumBoard/HeadingWithIcon/HeadingWithIcon.js b/src/components/ScrumBoard/HeadingWithIcon/HeadingWithIcon.js
deleted file mode 100644
index f8b8baa..0000000
--- a/src/components/ScrumBoard/HeadingWithIcon/HeadingWithIcon.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import styled from 'styled-components';
-import React from 'react';
-
-const HeadingSecondary = styled.h2`
-  margin: 10px 0;
-  font-size: ${props => (props.size ? props.size : '16px')};
-  color: ${props => (props.color ? props.color : '#788195')};
-  font-family: 'Roboto';
-  font-weight: 500;
-`;
-
-const IconSvg = styled.img`
-  width: 16px;
-  height: 20px;
-  margin-right: 10px;
-  vertical-align: middle;
-  /* background-color: #a8aabd; */
-`;
-
-export default function HeadingWithIcon({
-  heading,
-  iconSrc,
-  width,
-  height,
-  color,
-}) {
-  return (
-    <HeadingSecondary color={color}>
-      {iconSrc && <IconSvg src={iconSrc} width={width} height={height} />}
-      {heading}
-    </HeadingSecondary>
-  );
-}
diff --git a/src/components/ScrumBoard/IconSvg/IconSvg.js b/src/components/ScrumBoard/IconSvg/IconSvg.js
deleted file mode 100644
index 2bc0d0c..0000000
--- a/src/components/ScrumBoard/IconSvg/IconSvg.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import styled from 'styled-components';
-
-export const IconSvg = styled.img`
-  width: ${props => (props.width ? props.width : '30')}px;
-  height: ${props => (props.height ? props.height : '30')}px;
-  padding: ${props => (props.padding ? props.padding : '5')}px;
-  background-color: ${props => (props.bg ? props.bg : 'transparent')};
-  cursor: pointer;
-  border: ${props => (props.border ? props.border : '1px dashed #a8aabd')};
-  border-radius: ${props => (props.radius ? props.radius : '5px')};
-  margin-right: ${props => (props.mr ? props.mr : '10')}px;
-  margin-left: ${props => (props.ml ? props.ml : '10')}px;
-  vertical-align: middle;
-
-  @media only screen and (max-width: 767px) {
-    margin-right: 0;
-    margin-left: 0;
-  }
-`;
diff --git a/src/components/ScrumBoard/RenderBoardForm/08-icon.svg b/src/components/ScrumBoard/RenderBoardForm/08-icon.svg
deleted file mode 100644
index e9310eb..0000000
--- a/src/components/ScrumBoard/RenderBoardForm/08-icon.svg
+++ /dev/null
@@ -1,39 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#00C7E6;}
-	.st1{fill:#5243AA;}
-	.st2{fill:#6555C0;}
-	.st3{fill:#8777D9;}
-	.st4{fill:#FFFFFF;}
-	.st5{opacity:0.15;fill:#7F4CBF;enable-background:new    ;}
-	.st6{fill:#00C7E6;}
-	.st7{fill:#403294;}
-</style>
-<g id="Page-1">
-	<g id="project_avatar_alien">
-		<g id="Default">
-			<g>
-				<rect id="Rectangle" y="0" class="st0" width="128" height="128"/>
-				<path id="Shape" class="st1" d="M40.3,109.7h-2.1c-1.8,0-3.2-1.4-3.2-3.2V93.9c0-1.8,1.4-3.2,3.2-3.2h2.1c1.8,0,3.2,1.4,3.2,3.2
-					v12.5C43.5,108.2,42,109.7,40.3,109.7z"/>
-				<path class="st1" d="M89,109.7h-2.1c-1.8,0-3.2-1.4-3.2-3.2V93.9c0-1.8,1.4-3.2,3.2-3.2H89c1.8,0,3.2,1.4,3.2,3.2v12.5
-					C92.2,108.2,90.8,109.7,89,109.7z"/>
-				<ellipse id="Oval" class="st2" cx="63.8" cy="74.7" rx="43.6" ry="30"/>
-				<ellipse class="st3" cx="64" cy="67.7" rx="50.3" ry="30"/>
-				<path class="st4" d="M94.8,48.6c0-0.6,0.1-1.3,0.1-1.9c0-17.2-14-31.2-31.2-31.2c-16.9,0-30.7,13.4-31.2,30.2h0v8.3h0
-					c0.3,9.7,5.1,16.4,12.4,20.4l37.7,0c7.5-4,12.4-11,12.4-21.2c0-0.6,0-1.3-0.1-1.9V48.6L94.8,48.6z"/>
-				<path class="st5" d="M32.5,44.3c0,0.5-0.1,0.9-0.1,1.4h0v8.3h0c0.5,16.7,14.2,24.5,31.2,24.5c17.2,0,31.2-8.1,31.2-25.4
-					c0-0.6,0-1.3-0.1-1.9v-2.6c0-0.6,0.1-1.3,0.1-1.9c0-0.9,0-1.9-0.1-2.8C86.2,40,75.5,37.6,64,37.6C52,37.6,41.1,40.1,32.5,44.3z"
-					/>
-				<path class="st6" d="M63.6,28.3L63.6,28.3c-10.4,0-18.8,8.5-18.8,18.8v6.1v15v6.1c5.2,2.8,11.8,4.2,18.8,4.2s13.6-1.4,18.8-4.2
-					v-6.1v-15v-6.1C82.4,36.7,74,28.3,63.6,28.3z"/>
-				<circle class="st4" cx="63.9" cy="50.7" r="11.1"/>
-				<circle class="st7" cx="63.5" cy="50.6" r="4.4"/>
-			</g>
-		</g>
-	</g>
-</g>
-</svg>
diff --git a/src/components/ScrumBoard/RenderBoardForm/RenderBoardForm.js b/src/components/ScrumBoard/RenderBoardForm/RenderBoardForm.js
deleted file mode 100644
index 75bdd3b..0000000
--- a/src/components/ScrumBoard/RenderBoardForm/RenderBoardForm.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import React from 'react';
-import { Form, Field } from 'formik';
-import { Button, Tooltip } from 'antd';
-import { AntInput, AntSelect, AntSwitch } from '../AntFields';
-import { isRequired } from '../ValidateFields';
-import ThumbIcon from './08-icon.svg';
-import { Wrapper } from './RenderBoardForm.style';
-const formItemLayout = {
-  labelCol: {
-    sm: { span: 12 },
-    md: { span: 12, push: 3 },
-    style: { textAlign: 'left' },
-  },
-  wrapperCol: { sm: { span: 12 }, md: { span: 3, pull: 12 } },
-  colon: false,
-};
-export default ({ handleSubmit, values, submitCount }) => (
-  <Wrapper>
-    <Form onSubmit={handleSubmit}>
-      <Field
-        component={AntInput}
-        name="title"
-        type="text"
-        label="Project Name*"
-        validate={isRequired}
-        submitCount={submitCount}
-        hasFeedback
-        placeholder="Enter project name..."
-        size="large"
-      />
-
-      <Field
-        component={AntSelect}
-        name="category"
-        label="Project Category*"
-        placeholder="Select a Category"
-        defaultValue={values.category}
-        selectOptions={values.selectOptions}
-        validate={isRequired}
-        submitCount={submitCount}
-        hasFeedback
-        dropdownClassName="project-category"
-        size="large"
-      />
-
-      <Field
-        component={AntSwitch}
-        className="switch-form-item"
-        defaultChecked={values.open_to_company}
-        name="open_to_company"
-        label=" Public To RedQ Studio"
-        formitem={formItemLayout}
-      />
-
-      <Field
-        component={AntSwitch}
-        className="switch-form-item"
-        name="open_to_members"
-        defaultChecked={values.open_to_members}
-        formitem={formItemLayout}
-        label=" Private To Project Members"
-      />
-
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          color: '#1890FF',
-          fontSize: '16px',
-          fontWeight: 500,
-        }}
-        className={'field-container'}
-      >
-        <img
-          src={ThumbIcon}
-          alt="Project"
-          width={40}
-          height={40}
-          style={{ marginRight: 10, borderRadius: 6 }}
-        />
-        <Tooltip
-          title="Please Implements Your Own Avatar Methods"
-          placement="right"
-        >
-          <div>Select Avatar</div>
-        </Tooltip>
-      </div>
-
-      <Button
-        htmlType="submit"
-        type="primary"
-        style={{ width: '100%', marginTop: 20 }}
-        size="large"
-      >
-        {!values.editing ? 'Create Project' : 'Update Task'}
-      </Button>
-    </Form>
-  </Wrapper>
-);
diff --git a/src/components/ScrumBoard/RenderBoardForm/RenderBoardForm.style.js b/src/components/ScrumBoard/RenderBoardForm/RenderBoardForm.style.js
deleted file mode 100644
index 52016b6..0000000
--- a/src/components/ScrumBoard/RenderBoardForm/RenderBoardForm.style.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import styled from 'styled-components';
-
-export const Wrapper = styled.div`
-  font-size: 16px;
-  line-height: 30px;
-  color: #2d3446;
-  font-family: 'Roboto';
-  font-weight: 500;
-  && label {
-    font-size: 16px;
-    line-height: 30px;
-    color: #2d3446;
-    font-family: 'Roboto';
-    font-weight: 500;
-  }
-  .field-container {
-    margin-bottom: 20px;
-  }
-`;
diff --git a/src/components/ScrumBoard/RenderColumnForm/05-icon.svg b/src/components/ScrumBoard/RenderColumnForm/05-icon.svg
deleted file mode 100644
index 5df72b2..0000000
--- a/src/components/ScrumBoard/RenderColumnForm/05-icon.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 16.2 13.2" style="enable-background:new 0 0 16.2 13.2;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#788195;}
-</style>
-<g>
-	<g>
-		<path class="st0" d="M15.7,0.5c-0.3-0.3-0.6-0.4-0.9-0.4H1.5c-0.4,0-0.7,0.1-0.9,0.4c-0.3,0.3-0.4,0.6-0.4,1v10.3
-			c0,0.4,0.1,0.7,0.4,1c0.3,0.3,0.6,0.4,0.9,0.4h13.3c0.4,0,0.7-0.1,0.9-0.4c0.3-0.3,0.4-0.6,0.4-1V1.5C16.1,1.1,16,0.8,15.7,0.5z
-			 M15.1,11.8c0,0.1,0,0.1-0.1,0.2c-0.1,0.1-0.1,0.1-0.2,0.1H1.5c-0.1,0-0.1,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.2V6.6h13.9V11.8z
-			 M15.1,3.4H1.2V1.5c0-0.1,0-0.1,0.1-0.2c0.1-0.1,0.1-0.1,0.2-0.1h13.3c0.1,0,0.1,0,0.2,0.1c0.1,0.1,0.1,0.1,0.1,0.2V3.4z M4.4,9.9
-			H2.3V11h2.1V9.9z M8.7,9.9H5.5V11h3.2V9.9z"/>
-	</g>
-</g>
-</svg>
diff --git a/src/components/ScrumBoard/RenderColumnForm/RenderColumnForm.js b/src/components/ScrumBoard/RenderColumnForm/RenderColumnForm.js
deleted file mode 100644
index 7bbad48..0000000
--- a/src/components/ScrumBoard/RenderColumnForm/RenderColumnForm.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import { Button } from 'antd';
-import { AntInput } from '../AntFields';
-import { isRequired } from '../ValidateFields';
-import { Form, Field } from 'formik';
-import HeadingWithIcon from '../HeadingWithIcon/HeadingWithIcon';
-import FolderIcon from './05-icon.svg';
-import RenderColumnWrapper from './RenderColumnForm.style';
-
-const RenderColumnForm = props => {
-  const { handleSubmit, onCancel, submitCount, values } = props;
-  return (
-    <RenderColumnWrapper className="render-form-wrapper">
-      {!props.initials && (
-        <HeadingWithIcon
-          iconSrc={FolderIcon}
-          heading={'Column Name'}
-          size={'20px'}
-        />
-      )}
-      <Form onSubmit={handleSubmit}>
-        <Field
-          component={AntInput}
-          name="title"
-          type="text"
-          defaultValue={values.title}
-          placeholder="Column Name"
-          validate={isRequired}
-          submitCount={submitCount}
-          hasFeedback
-          size="large"
-          formitem={{
-            colon: false,
-          }}
-        />
-        <Button type="default" onClick={onCancel} size="large">
-          Cancel
-        </Button>
-        <Button
-          type="primary"
-          htmlType="submit"
-          style={{ marginLeft: 10 }}
-          size="large"
-        >
-          {props.initials && props.initials.editing ? 'Update Column' : 'Save'}
-        </Button>
-      </Form>
-    </RenderColumnWrapper>
-  );
-};
-
-export default RenderColumnForm;
diff --git a/src/components/ScrumBoard/RenderColumnForm/RenderColumnForm.style.js b/src/components/ScrumBoard/RenderColumnForm/RenderColumnForm.style.js
deleted file mode 100644
index 29a8ab4..0000000
--- a/src/components/ScrumBoard/RenderColumnForm/RenderColumnForm.style.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-const RenderColumnWrapper = styled.div`
-  form {
-    padding: 20px;
-  }
-`;
-
-export default RenderColumnWrapper;
diff --git a/src/components/ScrumBoard/SearchInput/07-icon.svg b/src/components/ScrumBoard/SearchInput/07-icon.svg
deleted file mode 100644
index d4de96b..0000000
--- a/src/components/ScrumBoard/SearchInput/07-icon.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 14.5 14.4" style="enable-background:new 0 0 14.5 14.4;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#788195;}
-</style>
-<path class="st0" d="M14.2,1.6l-1.4-1.4L7.2,5.8L1.6,0.2L0.2,1.6l5.6,5.6l-5.6,5.6l1.4,1.4l5.6-5.6l5.6,5.6l1.4-1.4L8.6,7.2
-	L14.2,1.6z"/>
-</svg>
diff --git a/src/components/ScrumBoard/SearchInput/10-icon.svg b/src/components/ScrumBoard/SearchInput/10-icon.svg
deleted file mode 100644
index d9f65f0..0000000
--- a/src/components/ScrumBoard/SearchInput/10-icon.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 20.4 20.5" style="enable-background:new 0 0 20.4 20.5;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#788195;}
-</style>
-<path class="st0" d="M19.9,18.8L15.1,14c1.2-1.5,1.9-3.3,1.9-5.3c0-4.7-3.8-8.4-8.4-8.4C3.9,0.3,0.2,4,0.2,8.7s3.8,8.4,8.4,8.4
-	c2,0,3.9-0.7,5.3-1.9l4.8,4.8c0.3,0.3,0.9,0.3,1.2,0C20.3,19.7,20.3,19.2,19.9,18.8L19.9,18.8z M8.6,15.4c-3.7,0-6.8-3-6.8-6.8
-	s3-6.8,6.8-6.8c3.7,0,6.8,3,6.8,6.8S12.3,15.4,8.6,15.4L8.6,15.4z M8.6,15.4"/>
-</svg>
diff --git a/src/components/ScrumBoard/SearchInput/SearchInput.js b/src/components/ScrumBoard/SearchInput/SearchInput.js
deleted file mode 100644
index 409eecb..0000000
--- a/src/components/ScrumBoard/SearchInput/SearchInput.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { useState } from 'react';
-import {
-  SearchIcon,
-  ClearIcon,
-  SearchWrapper,
-  Input,
-  ClearButton,
-} from './SearchInput.style';
-import ClearSvg from './07-icon.svg';
-import SearchSvg from './10-icon.svg';
-
-export default function SearchInput({
-  onChange = console.log,
-  onFocus,
-  onBlur,
-}) {
-  const [searchData, setSearchData] = useState('');
-  const handleSearch = event => {
-    setSearchData(event.target.value);
-    onChange(event.target.value);
-  };
-
-  return (
-    <SearchWrapper>
-      <SearchIcon src={SearchSvg} />
-      <Input
-        type="search"
-        placeholder="Search ..."
-        value={searchData}
-        onChange={handleSearch}
-        onFocus={onFocus}
-        onBlur={onBlur}
-      />
-      {searchData && (
-        <ClearButton onClick={() => setSearchData('')}>
-          <ClearIcon src={ClearSvg} />
-        </ClearButton>
-      )}
-    </SearchWrapper>
-  );
-}
diff --git a/src/components/ScrumBoard/SearchInput/SearchInput.style.js b/src/components/ScrumBoard/SearchInput/SearchInput.style.js
deleted file mode 100644
index b421406..0000000
--- a/src/components/ScrumBoard/SearchInput/SearchInput.style.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import styled from 'styled-components';
-
-export const SearchWrapper = styled.div`
-  width: 400px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
-
-  @media only screen and (max-width: 767px) {
-    width: 100%;
-  }
-`;
-
-export const Input = styled.input`
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  height: 30px;
-  font-family: inherit;
-  font-size: 100%;
-  border: none;
-  background: none;
-  -webkit-appearance: none;
-  vertical-align: middle;
-  font-size: 16px;
-  border-bottom: 1px solid transparent;
-  transition: border 0.2s ease;
-  &:focus {
-    border-bottom: 1px solid #e8e8e8;
-    outline: none;
-  }
-  &::placeholder {
-    color: #788195;
-  }
-`;
-
-export const SearchIcon = styled.img`
-  width: 20px;
-  margin-right: 1rem;
-`;
-
-export const ClearButton = styled.button`
-  margin-left: -1rem;
-  cursor: pointer;
-  border: 0;
-  background-color: transparent;
-  position: absolute;
-  right: 0;
-  top: auto;
-  &:hover,
-  &:focus {
-    outline: none;
-  }
-`;
-
-export const ClearIcon = styled.img`
-  width: 10px;
-  height: 15px;
-`;
diff --git a/src/components/ScrumBoard/Title.js b/src/components/ScrumBoard/Title.js
deleted file mode 100644
index 6549bbd..0000000
--- a/src/components/ScrumBoard/Title.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import styled from 'styled-components';
-import { colors, grid } from '@imd/assets/styles/constants';
-
-export default styled.h4`
-  /* padding: ${grid}px; */
-  margin: 0;
-  transition: background-color ease 0.2s;
-  flex-grow: 1;
-  user-select: none;
-  position: relative;
-  font-size: 20px;
-  color: #2d3446;
-  font-family: 'Roboto';
-  font-weight: 500;
-  &:focus {
-    outline: 2px solid ${colors.purple};
-    outline-offset: 2px;
-  }
-`;
diff --git a/src/components/ScrumBoard/ValidateFields.js b/src/components/ScrumBoard/ValidateFields.js
deleted file mode 100644
index 11d6446..0000000
--- a/src/components/ScrumBoard/ValidateFields.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import moment from 'moment';
-import { dateFormat } from './FieldFormats';
-
-export const validateDate = value => {
-  let errors;
-
-  if (!value) {
-    errors = 'Required!';
-  } else if (
-    moment(value).format(dateFormat) < moment(Date.now()).format(dateFormat)
-  ) {
-    errors = 'Invalid date!';
-  }
-
-  return errors;
-};
-
-export const validateEmail = value => {
-  let errors;
-
-  if (!value) {
-    errors = 'Required!';
-  } else if (!/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value)) {
-    errors = 'Invalid email address!';
-  }
-
-  return errors;
-};
-
-export const isRequired = value => (!value ? 'Required!' : '');
diff --git a/src/components/Tables/DeleteCell.js b/src/components/Tables/DeleteCell.js
deleted file mode 100644
index 917b3d3..0000000
--- a/src/components/Tables/DeleteCell.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import Popconfirm from '../Feedback/Popconfirm';
-
-export default function({ index, onDeleteCell }) {
-  return (
-    <Popconfirm
-      title="Sure to delete?"
-      okText="DELETE"
-      cancelText="No"
-      onConfirm={() => onDeleteCell(index)}
-    >
-      <a href="# ">Delete</a>
-    </Popconfirm>
-  );
-}
diff --git a/src/components/Tables/EditableCell.js b/src/components/Tables/EditableCell.js
deleted file mode 100644
index 7846029..0000000
--- a/src/components/Tables/EditableCell.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import Input from '../uielements/input';
-import { Icon } from 'antd';
-
-export default function(props) {
-  const [state, setState] = React.useState({
-    value: props.value,
-    editable: false,
-  });
-  const handleChange = event => {
-    const value = event.target.value;
-    setState({ ...state, value });
-  };
-  const check = () => {
-    setState({ ...state, editable: false });
-    if (props.onChange) {
-      props.onChange(state.value, props.columnsKey, props.index);
-    }
-  };
-  const edit = () => {
-    setState({ ...state, editable: true });
-  };
-  const { value, editable } = state;
-  return (
-    <div className="isoEditData">
-      {editable ? (
-        <div className="isoEditDataWrapper">
-          <Input value={value} onChange={handleChange} onPressEnter={check} />
-          <Icon type="check" className="isoEditIcon" onClick={check} />
-        </div>
-      ) : (
-        <p className="isoDataWrapper">
-          {value || ' '}
-          <Icon type="edit" className="isoEditIcon" onClick={edit} />
-        </p>
-      )}
-    </div>
-  );
-}
diff --git a/src/components/Tables/FilterDropdown.js b/src/components/Tables/FilterDropdown.js
deleted file mode 100644
index 0923a9f..0000000
--- a/src/components/Tables/FilterDropdown.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import Input from '../uielements/input';
-import Button from '../uielements/button';
-
-export default function({ searchText, onInputChange, onSearch }) {
-  return (
-    <div className="isoTableSearchBox">
-      <Input
-        id="tableFilterInput"
-        placeholder="Search name"
-        value={searchText}
-        onChange={onInputChange}
-        onPressEnter={onSearch}
-      />
-      <Button type="primary" onClick={onSearch}>
-        Search
-      </Button>
-    </div>
-  );
-}
diff --git a/src/components/Tables/HelperCells.js b/src/components/Tables/HelperCells.js
deleted file mode 100644
index 53f4160..0000000
--- a/src/components/Tables/HelperCells.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import ImageCellView from './ImageCell';
-import DeleteCell from './DeleteCell';
-import EditableCell from './EditableCell';
-import FilterDropdown from './FilterDropdown';
-
-const DateCell = data => <p>{data.toLocaleString()}</p>;
-const ImageCell = src => <ImageCellView src={src} />;
-const LinkCell = (link, href) => <a href={href ? href : '#'}>{link}</a>;
-const TextCell = text => <p>{text}</p>;
-
-export {
-  DateCell,
-  ImageCell,
-  LinkCell,
-  TextCell,
-  EditableCell,
-  DeleteCell,
-  FilterDropdown,
-};
diff --git a/src/components/Tables/ImageCell.js b/src/components/Tables/ImageCell.js
deleted file mode 100644
index aa6eb08..0000000
--- a/src/components/Tables/ImageCell.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-
-const PendingPool = {};
-const ReadyPool = {};
-
-export default function ImageCell({ src }) {
-  const [srcState, setSrcState] = React.useState(false);
-
-  React.useEffect(() => {
-    loadImage(src);
-  });
-  function loadImage(src) {
-    if (ReadyPool[src]) {
-      setSrcState(src);
-      return;
-    }
-
-    if (PendingPool[src]) {
-      PendingPool[src].push(onLoadImage);
-      return;
-    }
-    PendingPool[src] = [onLoadImage];
-
-    const img = new Image();
-    img.onload = () => {
-      PendingPool[src].forEach(callback => {
-        callback(src);
-      });
-      delete PendingPool[src];
-      img.onload = null;
-      src = undefined;
-    };
-    img.src = srcState;
-  }
-  function onLoadImage(source) {
-    ReadyPool[src] = true;
-    if (source === src) {
-      setSrcState(source);
-    }
-  }
-  const style = src
-    ? {
-        backgroundImage: `url(${src})`,
-        width: '70px',
-        height: '70px',
-        backgroundSize: 'cover',
-      }
-    : undefined;
-  return <div className="exampleImage" style={style} />;
-}
diff --git a/src/components/YoutubeSearch/PlayYoutubeVideo.js b/src/components/YoutubeSearch/PlayYoutubeVideo.js
deleted file mode 100644
index 7189f14..0000000
--- a/src/components/YoutubeSearch/PlayYoutubeVideo.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import YouTube from 'react-youtube';
-import DefaultModal from '../Feedback/Modal';
-import { YoutubeModal } from './YoutubeSearch.style';
-
-const Modal = YoutubeModal(DefaultModal);
-
-export default function({ selectedVideo, handleCancel }) {
-  const ops = { playerVars: { autoplay: 1 } };
-  return (
-    <Modal
-      title={selectedVideo.snippet.tittle}
-      visible={true}
-      footer={null}
-      onCancel={handleCancel}
-      cancelText="Cancel"
-      className="youtubeVideoModal"
-      width="670px"
-    >
-      <div className="isoCardWrapper" />
-      <YouTube videoId={selectedVideo.id.videoId} opts={ops} />
-    </Modal>
-  );
-}
diff --git a/src/components/YoutubeSearch/PlayYoutubeVideo.style.js b/src/components/YoutubeSearch/PlayYoutubeVideo.style.js
deleted file mode 100644
index f891c77..0000000
--- a/src/components/YoutubeSearch/PlayYoutubeVideo.style.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-
-const styledModal = ComponentName =>
-  styled(ComponentName)`
-    color: #0f0;
-  `;
-
-export { styledModal };
diff --git a/src/components/YoutubeSearch/Result.js b/src/components/YoutubeSearch/Result.js
deleted file mode 100644
index 8bb6f7c..0000000
--- a/src/components/YoutubeSearch/Result.js
+++ /dev/null
@@ -1,127 +0,0 @@
-import React from 'react';
-import Loader from '../utility/loader';
-import HelperText from '../utility/helper-text';
-import Button from '../uielements/button';
-import PlayYoutubeVideo from './PlayYoutubeVideo';
-import {
-  YoutubeSearchListStyleWrapper,
-  YoutubeSearchStyleWrapper,
-} from './YoutubeSearch.style';
-
-function SearchList(result, handleSelectedVideo) {
-  return (
-    <YoutubeSearchListStyleWrapper className="isoYoutubeResultList">
-      {result.map(item => {
-        const {
-          publishedAt,
-          title,
-          description,
-          channelTitle,
-          thumbnails,
-          channelId,
-        } = item.snippet;
-        const id = item.id.videoId;
-        const updateDate = new Date(publishedAt).toDateString();
-        const onClick = event => {
-          event.preventDefault();
-          handleSelectedVideo(item);
-        };
-        const onChannelClick = event => {
-          event.preventDefault();
-          event.stopPropagation();
-          window.open(`https://www.youtube.com/channel/${channelId}`, '_blank');
-        };
-        return (
-          <div key={id} className="isoSingleVideoResult" onClick={onClick}>
-            <div className="videoThumb">
-              <img alt="#" src={thumbnails.default.url} />
-            </div>
-
-            <div className="videoDescription">
-              <h3 className="videoName">
-                <a href="# ">{`${title} `}</a>
-              </h3>
-
-              <div className="ChannelNameAndDate">
-                <a onClick={onChannelClick} className="channelTitle" href="# ">
-                  {`${channelTitle} `}
-                </a>
-                <span className="uploadDate">{updateDate}</span>
-              </div>
-
-              {description ? <p>{description}</p> : ''}
-            </div>
-          </div>
-        );
-      })}
-    </YoutubeSearchListStyleWrapper>
-  );
-}
-function YoutubeResult({ YoutubeSearch, onPageChange }) {
-  const [selectedVideo, setSelectrdVideo] = React.useState(null);
-
-  const handleCancel = () => {
-    handleSelectedVideo(null);
-  };
-  const handleSelectedVideo = selectedVideo => {
-    setSelectrdVideo(selectedVideo);
-  };
-
-  const {
-    searcText,
-    result,
-    loading,
-    error,
-    nextPageToken,
-    prevPageToken,
-    total_count,
-  } = YoutubeSearch;
-  if (!searcText) {
-    return null;
-  }
-  if (loading) {
-    return <Loader />;
-  }
-  if (error || !total_count) {
-    return <HelperText text="THERE ARE SOME ERRORS" />;
-  }
-  if (result.length === 0) {
-    return <HelperText text="No Result Found" />;
-  }
-  return (
-    <YoutubeSearchStyleWrapper className="isoYoutubeSearchResult">
-      <p className="isoTotalResultFind">
-        <span>{`${total_count}`} videos found</span>
-      </p>
-
-      {selectedVideo ? (
-        <PlayYoutubeVideo
-          selectedVideo={selectedVideo}
-          handleCancel={handleCancel}
-        />
-      ) : (
-        ''
-      )}
-      {SearchList(result, handleSelectedVideo)}
-
-      <div className="youtubeSearchPagination">
-        {prevPageToken ? (
-          <Button onClick={() => onPageChange(searcText, prevPageToken)}>
-            Previous
-          </Button>
-        ) : (
-          ''
-        )}
-        {nextPageToken ? (
-          <Button onClick={() => onPageChange(searcText, nextPageToken)}>
-            Next
-          </Button>
-        ) : (
-          ''
-        )}
-      </div>
-    </YoutubeSearchStyleWrapper>
-  );
-}
-
-export default YoutubeResult;
diff --git a/src/components/YoutubeSearch/YoutubeSearch.style.js b/src/components/YoutubeSearch/YoutubeSearch.style.js
deleted file mode 100644
index cb82f7c..0000000
--- a/src/components/YoutubeSearch/YoutubeSearch.style.js
+++ /dev/null
@@ -1,207 +0,0 @@
-import styled from 'styled-components';
-import { palette } from 'styled-theme';
-import { borderRadius, transition } from '@imd/lib/helpers/style_utils';
-import WithDirection from '@imd/lib/helpers/rtl';
-const WDYoutubeSearchListStyleWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .isoSingleVideoResult {
-    padding: 20px 0;
-    border-bottom: 1px solid ${palette('border', 2)};
-    display: flex;
-    width: 100%;
-
-    &:last-of-type {
-      border-bottom: 0;
-    }
-
-    .videoThumb {
-      width: 100px;
-      height: 100px;
-      display: -webkit-inline-flex;
-      display: -ms-inline-flex;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      overflow: hidden;
-
-      @media only screen and (max-width: 420px) {
-        width: 70px;
-        height: 70px;
-      }
-
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-
-    .videoDescription {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      margin: ${props =>
-        props['data-rtl'] === 'rtl' ? '0 20px 0 0' : '0 0 0 20px'};
-      cursor: pointer;
-
-      h3.videoName {
-        width: 70%;
-        flex-shrink: 0;
-        margin: 0;
-
-        @media only screen and (max-width: 767px) {
-          width: 100%;
-        }
-
-        @media only screen and (min-width: 768px) and (max-width: 1199px) {
-          flex-shrink: 1;
-        }
-
-        a {
-          font-size: 18px;
-          font-weight: 400;
-          color: ${palette('text', 0)};
-          line-height: 1.3;
-          word-break: break-word;
-          display: inline-block;
-          text-decoration: none;
-          ${transition('')};
-
-          &:hover {
-            color: ${palette('primary', 0)};
-          }
-        }
-      }
-
-      .ChannelNameAndDate {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        margin-top: 3px;
-
-        @media only screen and (max-width: 420px) {
-          flex-direction: column;
-          align-items: flex-start;
-        }
-
-        .channelTitle {
-          width: auto;
-          flex-shrink: 0;
-          display: inline-block;
-          align-items: center;
-          font-size: 13px;
-          font-weight: 400;
-          color: ${palette('text', 2)};
-          line-height: 1.3;
-          ${transition('')};
-
-          &:hover {
-            color: ${palette('primary', 11)};
-          }
-        }
-
-        .uploadDate {
-          font-size: 13px;
-          font-weight: 400;
-          color: ${palette('text', 2)};
-          line-height: 1.3;
-          display: inline-block;
-          padding-left: 20px;
-          position: relative;
-
-          &:before {
-            content: '';
-            width: 4px;
-            height: 4px;
-            display: inline-block;
-            background-color: ${palette('grayscale', 0)};
-            position: absolute;
-            top: 6px;
-            left: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '8px')};
-            right: ${props =>
-              props['data-rtl'] === 'rtl' ? '8px' : 'inherit'};
-            ${borderRadius('50%')};
-          }
-
-          @media only screen and (max-width: 420px) {
-            padding: ${props =>
-              props['data-rtl'] === 'rtl' ? '0 13px 0 0' : '0 0 0 13px'};
-
-            &:before {
-              left: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '0')};
-              right: ${props =>
-                props['data-rtl'] === 'rtl' ? '0' : 'inherit'};
-            }
-          }
-        }
-      }
-
-      p {
-        font-size: 14px;
-        font-weight: 400;
-        color: ${palette('text', 3)};
-        line-height: 1.3;
-        margin-bottom: 0;
-        margin-top: 10px;
-        display: block;
-        word-break: break-word;
-      }
-    }
-  }
-`;
-const YoutubeSearchStyleWrapper = styled.div`
-  margin-top: 30px;
-
-  .isoTotalResultFind {
-    font-size: 18px;
-    font-weight: 700;
-    color: ${palette('text', 0)};
-    line-height: 1.3;
-    padding-bottom: 15px;
-    border-bottom: 1px solid ${palette('border', 2)};
-  }
-
-  .youtubeSearchPagination {
-    display: -webkit-flex;
-    display: -ms-flex;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 25px 0 10px;
-
-    button {
-      margin: 0 10px;
-    }
-  }
-`;
-
-const YoutubeModal = ComponentName => styled(ComponentName)`
-  .ant-modal-close-x {
-    width: 35px;
-    height: 35px;
-    line-height: 35px;
-    background-color: #fff;
-    border-radius: 0 0 0 5px;
-  }
-
-  .ant-modal-body {
-    padding: 15px;
-    iframe {
-      width: 100%;
-    }
-  }
-`;
-
-const YoutubeSearchListStyleWrapper = WithDirection(
-  WDYoutubeSearchListStyleWrapper
-);
-
-export {
-  YoutubeSearchListStyleWrapper,
-  YoutubeSearchStyleWrapper,
-  YoutubeModal,
-};
diff --git a/src/containers/Authentication/Auth0/Auth0.js b/src/containers/Authentication/Auth0/Auth0.js
deleted file mode 100644
index 755c1a5..0000000
--- a/src/containers/Authentication/Auth0/Auth0.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { EventEmitter } from 'events';
-import Auth0Lock from 'auth0-lock';
-import history from '@imd/lib/helpers/history';
-import Auth0Config from '@imd/config/auth0.config';
-import { notification } from '@imd/components';
-
-class Auth0 extends EventEmitter {
-  lock = new Auth0Lock(
-    Auth0Config.clientID,
-    Auth0Config.domain,
-    Auth0Config.options
-  );
-
-  login = () => {
-    if (!this.lock) {
-      return;
-    }
-    this.lock.show();
-  };
-  handleAuthentication = () => {
-    // Add callback Lock's `authenticated` event
-    this.lock.on('authenticated', this.setSession);
-    // Add callback for Lock's `authorization_error` event
-    this.lock.on('authorization_error', error =>
-      notification('error', 'Wrong mail or password')
-    );
-  };
-  setSession = authResult => {
-    // Set the time that the access token will expire at
-    let expiresAt = JSON.stringify(
-      authResult.expiresIn * 1000 + new Date().getTime()
-    );
-    localStorage.setItem('access_token', authResult.accessToken);
-    localStorage.setItem('id_token', authResult.idToken);
-    localStorage.setItem('expires_at', expiresAt);
-    // navigate to the dashboard route
-    history.replace('/dashboard');
-  };
-  logout = () => {
-    // Clear access token and ID token from local storage
-    localStorage.removeItem('access_token');
-    localStorage.removeItem('id_token');
-    localStorage.removeItem('expires_at');
-    // navigate to the home route
-    history.replace('/');
-  };
-
-  isAuthenticated = () => {
-    let expiresAt = JSON.parse(localStorage.getItem('expiresAt'));
-    return new Date().getTime() < expiresAt;
-  };
-}
-export default new Auth0();
diff --git a/src/containers/Authentication/Auth0/Auth0Callback.js b/src/containers/Authentication/Auth0/Auth0Callback.js
deleted file mode 100644
index 9a8a949..0000000
--- a/src/containers/Authentication/Auth0/Auth0Callback.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { useEffect } from 'react';
-import Auth0 from './Auth0';
-import authActions from '@imd/redux/auth/actions';
-const Auth0Callback = () => {
-  useEffect(() => {
-    Auth0.handleAuthentication();
-    authActions.login();
-  }, []);
-
-  return <p>Loading ...</p>;
-};
-
-export default Auth0Callback;
diff --git a/src/containers/BlankPage.js b/src/containers/BlankPage.js
deleted file mode 100644
index 23ca1ae..0000000
--- a/src/containers/BlankPage.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { Component } from 'react';
-import LayoutContentWrapper from '@imd/components/utility/layoutWrapper';
-import LayoutContent from '@imd/components/utility/layoutContent';
-
-export default class extends Component {
-  render() {
-    return (
-      <LayoutContentWrapper style={{ height: '100vh' }}>
-        <LayoutContent>
-          <h1>Blank Page</h1>
-        </LayoutContent>
-      </LayoutContentWrapper>
-    );
-  }
-}
diff --git a/src/containers/Pages/SignIn/SignIn.js b/src/containers/Pages/SignIn/SignIn.js
index b418b69..cfe64b5 100644
--- a/src/containers/Pages/SignIn/SignIn.js
+++ b/src/containers/Pages/SignIn/SignIn.js
@@ -7,7 +7,6 @@ import Button from '@imd/components/uielements/button';
 import IntlMessages from '@imd/components/utility/intlMessages';
 import authAction from '@imd/redux/auth/actions';
 import appAction from '@imd/redux/app/actions';
-import Auth0 from '../../Authentication/Auth0/Auth0';
 import {
   signInWithGoogle,
   signInWithFacebook,
@@ -102,15 +101,6 @@ export default function SignIn() {
                 <IntlMessages id="page.signInGooglePlus" />
               </Button>
 
-              <Button
-                onClick={() => {
-                  Auth0.login();
-                }}
-                type="primary"
-                className="btnAuthZero"
-              >
-                <IntlMessages id="page.signInAuth0" />
-              </Button>
             </div>
             <div className="isoCenterComponent isoHelperWrapper">
               <Link to="/forgotpassword" className="isoForgotPass">
diff --git a/src/containers/ThemeSwitcher/ThemeSwitcher.js b/src/containers/ThemeSwitcher/ThemeSwitcher.js
new file mode 100644
index 0000000..662e30d
--- /dev/null
+++ b/src/containers/ThemeSwitcher/ThemeSwitcher.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import Actions from '@iso/redux/themeSwitcher/actions';
+import Switcher from '@iso/components/ThemeSwitcher/ThemeSwitcher';
+import LanguageSwitcher from '../LanguageSwitcher/LanguageSwitcher';
+import Themes from './config';
+import bucketSVG from '@iso/assets/images/bucket.svg';
+import IntlMessages from '@iso/components/utility/intlMessages';
+import ThemeSwitcherStyle from './ThemeSwitcher.styles';
+
+const { switchActivation, changeTheme } = Actions;
+
+export default function ThemeSwitcher() {
+  const { isActivated, topbarTheme, sidebarTheme, layoutTheme } = useSelector(
+    state => state.ThemeSwitcher
+  );
+  const dispatch = useDispatch();
+  const styleButton = { background: sidebarTheme.buttonColor };
+
+  return (
+    <ThemeSwitcherStyle
+      className={isActivated ? 'isoThemeSwitcher active' : 'isoThemeSwitcher'}
+    >
+      <div className="componentTitleWrapper" style={styleButton}>
+        <h3 className="componentTitle">
+          <IntlMessages id="themeSwitcher.settings" />
+        </h3>
+      </div>
+
+      <div className="SwitcherBlockWrapper">
+        <Switcher
+          config={Themes.sidebarTheme}
+          changeTheme={(attr, theme) => dispatch(changeTheme(attr, theme))}
+          selectedId={sidebarTheme.themeName}
+        />
+
+        <Switcher
+          config={Themes.topbarTheme}
+          changeTheme={(attr, theme) => dispatch(changeTheme(attr, theme))}
+          selectedId={topbarTheme.themeName}
+        />
+
+        <Switcher
+          config={Themes.layoutTheme}
+          changeTheme={(attr, theme) => dispatch(changeTheme(attr, theme))}
+          selectedId={layoutTheme.themeName}
+        />
+        <LanguageSwitcher />
+      </div>
+
+      <div className="purchaseBtnWrapper">
+        <a
+          href="https://themeforest.net/item/isomorphic-react-redux-admin-dashboard/20262330?ref=redqteam"
+          className="purchaseBtn"
+          target="_blank"
+          rel="noopener noreferrer"
+          style={styleButton}
+        >
+          <IntlMessages id="themeSwitcher.purchase" />
+        </a>
+      </div>
+
+      <button
+        type="primary"
+        className="switcherToggleBtn"
+        style={styleButton}
+        onClick={() => {
+          dispatch(switchActivation());
+        }}
+      >
+        <img src={bucketSVG} alt="bucket" />
+      </button>
+    </ThemeSwitcherStyle>
+  );
+}
diff --git a/src/containers/ThemeSwitcher/ThemeSwitcher.styles.js b/src/containers/ThemeSwitcher/ThemeSwitcher.styles.js
new file mode 100644
index 0000000..804c1de
--- /dev/null
+++ b/src/containers/ThemeSwitcher/ThemeSwitcher.styles.js
@@ -0,0 +1,255 @@
+import styled from 'styled-components';
+import { palette } from 'styled-theme';
+import {
+  transition,
+  borderRadius,
+  boxShadow,
+} from '@iso/lib/helpers/style_utils';
+import WithDirection from '@iso/lib/helpers/rtl';
+
+const ThemeSwitcherStyle = styled.div`
+  background-color: #ffffff;
+  width: 340px;
+  height: calc(100% - 70px);
+  padding: 0 0 50px;
+  flex-shrink: 0;
+  position: fixed;
+  top: 70px;
+  right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '-340px')};
+  left: ${props => (props['data-rtl'] === 'rtl' ? '-340px' : 'inherit')};
+  z-index: 1001;
+  ${transition()};
+  ${boxShadow('-1px 0 5px rgba(0,0,0,0.25)')};
+
+  @media only screen and (max-width: 767px) {
+    width: 270px;
+    right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '-270px')};
+    left: ${props => (props['data-rtl'] === 'rtl' ? '-270px' : 'inherit')};
+  }
+
+  &.active {
+    right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '0')};
+    left: ${props => (props['data-rtl'] === 'rtl' ? '0' : 'inherit')};
+  }
+
+  .switcher {
+    right: ${props => (props['data-rtl'] === 'rtl' ? '-98px' : 'inherit')};
+    left: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '-98px')};
+  }
+
+  .componentTitleWrapper {
+    padding: 25px 15px;
+    height: 70px;
+    background-color: ${palette('text', 0)};
+
+    .componentTitle {
+      font-size: 21px;
+      font-weight: 700;
+      color: #fff;
+      line-height: 1;
+      width: 100%;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+    }
+  }
+
+  .SwitcherBlockWrapper {
+    width: 100%;
+    height: 100%;
+    padding-bottom: 105px;
+    overflow: hidden;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+
+    .themeSwitchBlock {
+      width: 100%;
+      display: -webkit-flex;
+      display: -ms-flex;
+      display: flex;
+      flex-shrink: 0;
+      flex-direction: column;
+      margin-top: 30px;
+
+      h4 {
+        font-size: 14px;
+        font-weight: 700;
+        color: ${palette('text', 0)};
+        line-height: 1.3;
+        margin-bottom: 0;
+        padding: 0 15px;
+        text-transform: uppercase;
+      }
+
+      .themeSwitchBtnWrapper {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        padding: 15px 20px;
+
+        button {
+          width: 20px;
+          height: 20px;
+          display: flex;
+          margin: ${props =>
+            props['data-rtl'] === 'rtl' ? '0 0 0 10px' : '0 10px 0 0'};
+          border: 1px solid #e4e4e4;
+          outline: 0;
+          padding: 0;
+          background: none;
+          justify-content: center;
+          position: relative;
+          cursor: pointer;
+          ${borderRadius('3px')};
+
+          &.languageSwitch {
+            border: 0;
+            width: 30px;
+            height: auto;
+
+            &.selectedTheme {
+              &:before,
+              &:after {
+                top: 2px;
+                left: ${props =>
+                  props['data-rtl'] === 'rtl' ? 'inherit' : '-3px'};
+                right: ${props =>
+                  props['data-rtl'] === 'rtl' ? '-3px' : 'inherit'};
+              }
+            }
+          }
+
+          img {
+            width: 100%;
+          }
+
+          &.selectedTheme {
+            &:before {
+              content: '';
+              width: 6px;
+              height: 6px;
+              display: -webkit-inline-flex;
+              display: -ms-inline-flex;
+              display: inline-flex;
+              background-color: ${palette('color', 13)};
+              position: absolute;
+              top: -2px;
+              left: ${props =>
+                props['data-rtl'] === 'rtl' ? 'inherit' : '-2px'};
+              right: ${props =>
+                props['data-rtl'] === 'rtl' ? '-2px' : 'inherit'};
+              ${borderRadius('50%')};
+            }
+
+            &:after {
+              content: '';
+              width: 6px;
+              height: 6px;
+              display: -webkit-inline-flex;
+              display: -ms-inline-flex;
+              display: inline-flex;
+              border: 1px solid ${palette('color', 13)};
+              background-color: ${palette('color', 13)};
+              position: absolute;
+              top: -2px;
+              left: ${props =>
+                props['data-rtl'] === 'rtl' ? 'inherit' : '-2px'};
+              right: ${props =>
+                props['data-rtl'] === 'rtl' ? '-2px' : 'inherit'};
+              -webkit-animation: selectedAnimation 1.2s infinite ease-in-out;
+              animation: selectedAnimation 1.2s infinite ease-in-out;
+              ${borderRadius('50%')};
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .switcherToggleBtn {
+    width: 50px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-color: #ffffff;
+    outline: 0;
+    border: 0;
+    position: absolute;
+    text-align: center;
+    top: 200px;
+    left: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '-50px')};
+    right: ${props => (props['data-rtl'] === 'rtl' ? '-50px' : 'inherit')};
+    cursor: pointer;
+    border-radius: ${props =>
+      props['data-rtl'] === 'rtl' ? '0 3px 3px 0' : '3px 0 0 3px'};
+    ${boxShadow('-2px 0 5px rgba(0,0,0,0.2)')};
+
+    img {
+      width: 23px;
+    }
+  }
+
+  .purchaseBtnWrapper {
+    width: 100%;
+    padding: 25px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    bottom: 0px;
+    position: absolute;
+    background-color: #ffffff;
+
+    .purchaseBtn {
+      width: calc(100% - 50px);
+      height: 42px;
+      font-size: 14px;
+      font-weight: 700;
+      color: #fff;
+      text-decoration: none;
+      background-color: ${palette('primary', 0)};
+      text-transform: uppercase;
+      line-height: 1;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      ${borderRadius('5px')};
+      ${transition()};
+
+      &:hover {
+        background-color: ${palette('primary', 13)};
+      }
+    }
+  }
+
+  @-webkit-keyframes selectedAnimation {
+    0% {
+      -webkit-transform: scale(0.8);
+      transform: scale(0.8);
+      opacity: 0.5;
+    }
+    100% {
+      -webkit-transform: scale(2.4);
+      transform: scale(2.4);
+      opacity: 0;
+    }
+  }
+  @keyframes selectedAnimation {
+    0% {
+      -webkit-transform: scale(0.8);
+      transform: scale(0.8);
+      opacity: 0.5;
+    }
+    100% {
+      -webkit-transform: scale(2.4);
+      transform: scale(2.4);
+      opacity: 0;
+    }
+  }
+`;
+
+export default WithDirection(ThemeSwitcherStyle);
diff --git a/src/containers/ThemeSwitcher/config.js b/src/containers/ThemeSwitcher/config.js
new file mode 100644
index 0000000..697a342
--- /dev/null
+++ b/src/containers/ThemeSwitcher/config.js
@@ -0,0 +1,174 @@
+import { themeConfig } from '@iso/config/theme/theme.config';
+const changeThemes = {
+  id: 'changeThemes',
+  label: 'themeSwitcher',
+  defaultTheme: themeConfig.theme,
+  options: [
+    {
+      themeName: 'defaultTheme',
+      buttonColor: '#ffffff',
+      textColor: '#323332',
+    },
+    {
+      themeName: 'theme2',
+      buttonColor: '#ffffff',
+      textColor: '#323332',
+    },
+  ],
+};
+const topbarTheme = {
+  id: 'topbarTheme',
+  label: 'themeSwitcher.Topbar',
+  defaultTheme: themeConfig.topbar,
+  options: [
+    {
+      themeName: 'defaultTheme',
+      buttonColor: '#ffffff',
+      textColor: '#323332',
+    },
+    {
+      themeName: 'theme1',
+      buttonColor: '#e0364c',
+      backgroundColor: '#e0364c',
+      textColor: '#ffffff',
+    },
+    {
+      themeName: 'theme2',
+      buttonColor: '#6534ff',
+      backgroundColor: '#6534ff',
+      textColor: '#ffffff',
+    },
+    {
+      themeName: 'theme3',
+      buttonColor: '#4482FF',
+      backgroundColor: '#4482FF',
+      textColor: '#ffffff',
+    },
+    {
+      themeName: 'theme4',
+      buttonColor: '#422e62',
+      backgroundColor: '#422e62',
+      textColor: '#ffffff',
+    },
+    {
+      themeName: 'theme5',
+      buttonColor: '#22144c',
+      backgroundColor: '#22144c',
+      textColor: '#ffffff',
+    },
+    {
+      themeName: 'theme6',
+      buttonColor: '#4670a2',
+      backgroundColor: '#4670a2',
+      textColor: '#ffffff',
+    },
+    {
+      themeName: 'theme7',
+      buttonColor: '#494982',
+      backgroundColor: '#494982',
+      textColor: '#ffffff',
+    },
+  ],
+};
+const sidebarTheme = {
+  id: 'sidebarTheme',
+  label: 'themeSwitcher.Sidebar',
+  defaultTheme: themeConfig.sidebar,
+  options: [
+    {
+      themeName: 'defaultTheme',
+      buttonColor: '#323332',
+      backgroundColor: undefined,
+      textColor: '#788195',
+    },
+    {
+      themeName: 'theme1',
+      buttonColor: '#e0364c',
+      backgroundColor: '#e0364c',
+      textColor: '#ffffff',
+    },
+    {
+      themeName: 'theme2',
+      buttonColor: '#6534ff',
+      backgroundColor: '#6534ff',
+      textColor: '#ffffff',
+    },
+    {
+      themeName: 'theme3',
+      buttonColor: '#4482FF',
+      backgroundColor: '#4482FF',
+      textColor: '#ffffff',
+    },
+    {
+      themeName: 'theme4',
+      buttonColor: '#422e62',
+      backgroundColor: '#422e62',
+      textColor: '#ffffff',
+    },
+    {
+      themeName: 'theme5',
+      buttonColor: '#22144c',
+      backgroundColor: '#22144c',
+      textColor: '#ffffff',
+    },
+    {
+      themeName: 'theme6',
+      buttonColor: '#4670a2',
+      backgroundColor: '#4670a2',
+      textColor: '#ffffff',
+    },
+    {
+      themeName: 'theme7',
+      buttonColor: '#494982',
+      backgroundColor: '#494982',
+      textColor: '#ffffff',
+    },
+  ],
+};
+const layoutTheme = {
+  id: 'layoutTheme',
+  label: 'themeSwitcher.Background',
+  defaultTheme: themeConfig.layout,
+  options: [
+    {
+      themeName: 'defaultTheme',
+      buttonColor: '#ffffff',
+      backgroundColor: '#F1F3F6',
+      textColor: undefined,
+    },
+    {
+      themeName: 'theme1',
+      buttonColor: '#ffffff',
+      backgroundColor: '#ffffff',
+      textColor: '#323232',
+    },
+    {
+      themeName: 'theme2',
+      buttonColor: '#F9F9F9',
+      backgroundColor: '#F9F9F9',
+      textColor: '#ffffff',
+    },
+    {
+      themeName: 'theme3',
+      buttonColor: '#ebebeb',
+      backgroundColor: '#ebebeb',
+      textColor: '#ffffff',
+    },
+  ],
+};
+const customizedThemes = {
+  changeThemes,
+  topbarTheme,
+  sidebarTheme,
+  layoutTheme,
+};
+export function getCurrentTheme(attribute, selectedThemename) {
+  let selecetedTheme = {};
+  customizedThemes[attribute].options.forEach(theme => {
+    if (theme.themeName === selectedThemename) {
+      selecetedTheme = theme;
+    }
+  });
+  return selecetedTheme;
+}
+export default customizedThemes;
diff --git a/src/containers/Topbar/Topbar.js b/src/containers/Topbar/Topbar.js
index b27083c..7ddad91 100644
--- a/src/containers/Topbar/Topbar.js
+++ b/src/containers/Topbar/Topbar.js
@@ -2,11 +2,6 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Layout } from 'antd';
 import appActions from '@imd/redux/app/actions';
-import TopbarNotification from './TopbarNotification';
-import TopbarMessage from './TopbarMessage';
-import TopbarSearch from './TopbarSearch';
-import TopbarUser from './TopbarUser';
-import TopbarAddtoCart from './TopbarAddToCart';
 import TopbarWrapper from './Topbar.styles';
 
 const { Header } = Layout;
diff --git a/src/containers/Topbar/TopbarAddToCart.js b/src/containers/Topbar/TopbarAddToCart.js
deleted file mode 100644
index 0c1f376..0000000
--- a/src/containers/Topbar/TopbarAddToCart.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import React from 'react';
-import { Link, useRouteMatch } from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
-import IntlMessages from '@imd/components/utility/intlMessages';
-import Scrollbar from '@imd/components/utility/customScrollBar';
-import Popover from '@imd/components/uielements/popover';
-import SingleCart from '@imd/components/Cart/SingleCartModal';
-import ecommerceAction from '@imd/redux/ecommerce/actions';
-import TopbarDropdownWrapper from './TopbarDropdown.styles';
-
-const {
-  initData,
-  changeViewTopbarCart,
-  changeProductQuantity,
-} = ecommerceAction;
-let totalPrice;
-export default function TopbarAddtoCart() {
-  let { url } = useRouteMatch();
-  const dispatch = useDispatch();
-  const customizedTheme = useSelector(state => state.ThemeSwitcher.topbarTheme);
-  const {
-    productQuantity,
-    products,
-    loadingInitData,
-    viewTopbarCart,
-  } = useSelector(state => state.Ecommerce);
-
-  function hide() {
-    dispatch(changeViewTopbarCart(false));
-  }
-  function handleVisibleChange() {
-    dispatch(changeViewTopbarCart(!viewTopbarCart));
-  }
-  React.useEffect(() => {
-    if (!loadingInitData) {
-      dispatch(initData());
-    }
-  }, [dispatch, loadingInitData]);
-
-  function renderProducts() {
-    totalPrice = 0;
-    if (!productQuantity || productQuantity.length === 0) {
-      return (
-        <div className="isoNoItemMsg">
-          <span>No item found</span>
-        </div>
-      );
-    }
-    return productQuantity.map(product => {
-      totalPrice += product.quantity * products[product.objectID].price;
-      return (
-        <SingleCart
-          key={product.objectID}
-          quantity={product.quantity}
-          changeQuantity={changeQuantity}
-          cancelQuantity={cancelQuantity}
-          {...products[product.objectID]}
-        />
-      );
-    });
-  }
-  function changeQuantity(objectID, quantity) {
-    const newProductQuantity = [];
-    productQuantity.forEach(product => {
-      if (product.objectID !== objectID) {
-        newProductQuantity.push(product);
-      } else {
-        newProductQuantity.push({
-          objectID,
-          quantity,
-        });
-      }
-    });
-    dispatch(changeProductQuantity(newProductQuantity));
-  }
-  function cancelQuantity(objectID) {
-    const newProductQuantity = [];
-    productQuantity.forEach(product => {
-      if (product.objectID !== objectID) {
-        newProductQuantity.push(product);
-      }
-    });
-    dispatch(changeProductQuantity(newProductQuantity));
-  }
-
-  const content = (
-    <TopbarDropdownWrapper className="topbarAddtoCart">
-      <div className="isoDropdownHeader">
-        <h3>
-          <IntlMessages id="sidebar.cart" />
-        </h3>
-      </div>
-      <div className="isoDropdownBody isoCartItemsWrapper">
-        <Scrollbar style={{ height: 300 }}>{renderProducts()}</Scrollbar>
-      </div>
-      <div className="isoDropdownFooterLinks">
-        <Link to={`${url}/cart`} onClick={hide}>
-          <IntlMessages id="topbar.viewCart" />
-        </Link>
-
-        <h3>
-          <IntlMessages id="topbar.totalPrice" />:{' '}
-          <span>${totalPrice.toFixed(2)}</span>
-        </h3>
-      </div>
-    </TopbarDropdownWrapper>
-  );
-  return (
-    <Popover
-      content={content}
-      trigger="click"
-      visible={viewTopbarCart}
-      onVisibleChange={handleVisibleChange}
-      placement="bottomLeft"
-    >
-      <div className="isoIconWrapper">
-        <i
-          className="ion-android-cart"
-          style={{ color: customizedTheme.textColor }}
-        />
-        {productQuantity.length === 0 ? (
-          ''
-        ) : (
-          <span>{productQuantity.length}</span>
-        )}
-      </div>
-    </Popover>
-  );
-}
diff --git a/src/containers/Topbar/TopbarDropdown.styles.js b/src/containers/Topbar/TopbarDropdown.styles.js
deleted file mode 100644
index b338f7f..0000000
--- a/src/containers/Topbar/TopbarDropdown.styles.js
+++ /dev/null
@@ -1,293 +0,0 @@
-import styled from 'styled-components';
-import { palette } from 'styled-theme';
-import {
-  transition,
-  borderRadius,
-  boxShadow,
-} from '@imd/lib/helpers/style_utils';
-import WithDirection from '@imd/lib/helpers/rtl';
-
-const TopbarDropdownWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  background-color: #ffffff;
-  margin: -12px -16px;
-  width: 360px;
-  min-width: 160px;
-  flex-shrink: 0;
-  ${borderRadius('5px')};
-  ${boxShadow('0 2px 10px rgba(0,0,0,0.2)')};
-  ${transition()};
-  cursor: pointer;
-  @media only screen and (max-width: 767px) {
-    width: 310px;
-  }
-
-  .isoDropdownHeader {
-    border-bottom: 1px solid #f1f1f1;
-    margin-bottom: 0px;
-    padding: 15px 30px;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    h3 {
-      font-size: 14px;
-      font-weight: 500;
-      color: ${palette('text', 0)};
-      text-align: center;
-      text-transform: uppercase;
-      margin: 0;
-    }
-  }
-
-  .isoDropdownBody {
-    width: 100%;
-    height: 300px;
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 10px;
-    background-color: ${palette('grayscale', 6)};
-
-    a {
-      text-decoration: none;
-    }
-
-    .isoDropdownListItem {
-      padding: 15px 30px;
-      flex-shrink: 0;
-      text-decoration: none;
-      display: flex;
-      flex-direction: column;
-      text-decoration: none;
-      text-align: ${props => (props['data-rtl'] === 'rtl' ? 'right' : 'left')};
-      width: 100%;
-      border-bottom: 1px solid ${palette('border', 2)};
-      ${transition()};
-
-      &:hover {
-        background-color: ${palette('grayscale', 3)};
-      }
-
-      .isoListHead {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 5px;
-      }
-
-      h5 {
-        font-size: 13px;
-        font-weight: 500;
-        color: ${palette('text', 0)};
-        margin-top: 0;
-      }
-
-      p {
-        font-size: 12px;
-        font-weight: 400;
-        color: ${palette('text', 2)};
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-
-      .isoDate {
-        font-size: 11px;
-        color: ${palette('grayscale', 1)};
-        flex-shrink: 0;
-      }
-    }
-  }
-
-  .isoViewAllBtn {
-    font-size: 13px;
-    font-weight: 500;
-    color: ${palette('text', 2)};
-    padding: 10px 15px 20px;
-    display: flex;
-    text-decoration: none;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    ${transition()};
-
-    &:hover {
-      color: ${palette('primary', 0)};
-    }
-  }
-
-  .isoDropdownFooterLinks {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 30px 20px;
-
-    a {
-      font-size: 13px;
-      font-weight: 500;
-      color: ${palette('text', 0)};
-      text-decoration: none;
-      padding: 10px 20px;
-      line-height: 1;
-      border: 1px solid ${palette('border', 1)};
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      ${transition()};
-
-      &:hover {
-        background-color: ${palette('primary', 0)};
-        border-color: ${palette('primary', 0)};
-        color: #ffffff;
-      }
-    }
-
-    h3 {
-      font-size: 14px;
-      font-weight: 500;
-      color: ${palette('text', 0)};
-      line-height: 1.3;
-    }
-  }
-
-  &.withImg {
-    .isoDropdownListItem {
-      display: flex;
-      flex-direction: row;
-
-      .isoImgWrapper {
-        width: 35px;
-        height: 35px;
-        overflow: hidden;
-        margin: ${props =>
-          props['data-rtl'] === 'rtl' ? '0 0 0 15px' : '0 15px 0 0'};
-        display: -webkit-inline-flex;
-        display: -ms-inline-flex;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        background-color: ${palette('grayscale', 9)};
-        ${borderRadius('50%')};
-
-        img {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
-      }
-
-      .isoListContent {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-
-        .isoListHead {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 10px;
-        }
-
-        h5 {
-          margin-bottom: 0;
-          padding: ${props =>
-            props['data-rtl'] === 'rtl' ? '0 0 0 15px' : '0 15px 0 0'};
-        }
-
-        .isoDate {
-          font-size: 11px;
-          color: ${palette('grayscale', 1)};
-          flex-shrink: 0;
-        }
-
-        p {
-          white-space: normal;
-          line-height: 1.5;
-        }
-      }
-    }
-  }
-
-  &.topbarMail {
-    @media only screen and (max-width: 519px) {
-      right: -170px;
-    }
-  }
-
-  &.topbarMessage {
-    @media only screen and (max-width: 500px) {
-      right: -69px;
-    }
-  }
-
-  &.topbarNotification {
-    @media only screen and (max-width: 500px) {
-      right: -120px;
-    }
-  }
-
-  &.topbarAddtoCart {
-    @media only screen and (max-width: 465px) {
-      right: -55px;
-    }
-
-    .isoDropdownHeader {
-      margin-bottom: 0;
-    }
-
-    .isoDropdownBody {
-      background-color: ${palette('grayscale', 6)};
-      display: flex;
-      flex-direction: column;
-
-      .isoNoItemMsg {
-        height: 100%;
-        min-height: 260px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        span {
-          font-size: 30px;
-          font-weight: 300;
-          color: ${palette('grayscale', 1)};
-          line-height: 1.2;
-        }
-      }
-    }
-  }
-
-  &.isoUserDropdown {
-    padding: 7px 0;
-    display: flex;
-    flex-direction: column;
-    background-color: #ffffff;
-    width: 220px;
-    min-width: 160px;
-    flex-shrink: 0;
-    ${borderRadius('5px')};
-    ${boxShadow('0 2px 10px rgba(0,0,0,0.2)')};
-    ${transition()};
-
-    .isoDropdownLink {
-      font-size: 13px;
-      color: ${palette('text', 1)};
-      line-height: 1.1;
-      padding: 7px 15px;
-      background-color: transparent;
-      text-decoration: none;
-      display: flex;
-      justify-content: flex-start;
-      ${transition()};
-
-      &:hover {
-        background-color: ${palette('secondary', 6)};
-      }
-    }
-  }
-`;
-
-export default WithDirection(TopbarDropdownWrapper);
diff --git a/src/containers/Topbar/TopbarMail.js b/src/containers/Topbar/TopbarMail.js
deleted file mode 100644
index 0609244..0000000
--- a/src/containers/Topbar/TopbarMail.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import React from 'react';
-import { Link, useRouteMatch } from 'react-router-dom';
-import { useSelector } from 'react-redux';
-import IntlMessages from '@imd/components/utility/intlMessages';
-import Scrollbar from '@imd/components/utility/customScrollBar';
-import Popover from '@imd/components/uielements/popover';
-import TopbarDropdownWrapper from './TopbarDropdown.styles';
-
-const demoMails = [
-  {
-    id: 1,
-    name: 'David Doe',
-    time: '3 minutes ago',
-    desc:
-      'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner',
-  },
-  {
-    id: 2,
-    name: 'Navis Doe',
-    time: '4 minutes ago',
-    desc:
-      'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner',
-  },
-  {
-    id: 3,
-    name: 'Emanual Doe',
-    time: '5 minutes ago',
-    desc:
-      'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner',
-  },
-  {
-    id: 4,
-    name: 'Dowain Doe',
-    time: '6 minutes ago',
-    desc:
-      'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner',
-  },
-];
-
-export default function TopbarMail() {
-  let { url } = useRouteMatch();
-
-  const customizedTheme = useSelector(state => state.ThemeSwitcher.topbarTheme);
-  const [visible, setVisibility] = React.useState(false);
-  function hide() {
-    setVisibility(false);
-  }
-  function handleVisibleChange() {
-    setVisibility(visible => !visible);
-  }
-
-  const content = (
-    <TopbarDropdownWrapper className="topbarMail">
-      <div className="isoDropdownHeader">
-        <h3>
-          <IntlMessages id="sidebar.email" />
-        </h3>
-      </div>
-      <div className="isoDropdownBody">
-        <Scrollbar style={{ height: 300 }}>
-          {demoMails.map(mail => (
-            <Link to={`${url}/mailbox`} onClick={hide} key={mail.id}>
-              <div className="isoDropdownListItem">
-                <div className="isoListHead">
-                  <h5>{mail.name}</h5>
-                  <span className="isoDate">{mail.time}</span>
-                </div>
-                <p>{mail.desc}</p>
-              </div>
-            </Link>
-          ))}
-        </Scrollbar>
-      </div>
-      <div className="isoViewAllBtn">
-        <IntlMessages id="topbar.viewAll" />
-      </div>
-    </TopbarDropdownWrapper>
-  );
-  return (
-    <Popover
-      content={content}
-      trigger="click"
-      visible={visible}
-      onVisibleChange={handleVisibleChange}
-      placement="bottomLeft"
-    >
-      <div className="isoIconWrapper">
-        <i className="ion-email" style={{ color: customizedTheme.textColor }} />
-        <span>{demoMails.length}</span>
-      </div>
-    </Popover>
-  );
-}
diff --git a/src/containers/Topbar/TopbarMessage.js b/src/containers/Topbar/TopbarMessage.js
deleted file mode 100644
index 3e5ea2f..0000000
--- a/src/containers/Topbar/TopbarMessage.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import React from 'react';
-import { Popover } from 'antd';
-import { useSelector } from 'react-redux';
-import IntlMessages from '@imd/components/utility/intlMessages';
-import Scrollbar from '@imd/components/utility/customScrollBar';
-import TopbarDropdownWrapper from './TopbarDropdown.styles';
-
-import Image from '@imd/assets/images/user3.png';
-
-const demoMassage = [
-  {
-    id: 1,
-    name: 'David Doe',
-    time: '3 minutes ago',
-    massage:
-      'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner',
-  },
-  {
-    id: 2,
-    name: 'Navis Doe',
-    time: '4 minutes ago',
-    massage:
-      'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner',
-  },
-  {
-    id: 3,
-    name: 'Emanual Doe',
-    time: '5 minutes ago',
-    massage:
-      'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner',
-  },
-  {
-    id: 4,
-    name: 'Dowain Doe',
-    time: '6 minutes ago',
-    massage:
-      'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner',
-  },
-];
-
-export default function TopbarMessage() {
-  const [visible, setVisiblity] = React.useState(false);
-  const customizedTheme = useSelector(state => state.ThemeSwitcher.topbarTheme);
-
-  function handleVisibleChange() {
-    setVisiblity(visible => !visible);
-  }
-  const content = (
-    <TopbarDropdownWrapper className="topbarMessage withImg">
-      <div className="isoDropdownHeader">
-        <h3>
-          <IntlMessages id="sidebar.message" />
-        </h3>
-      </div>
-      <div className="isoDropdownBody">
-        <Scrollbar style={{ height: 300 }}>
-          {demoMassage.map(massage => (
-            <a className="isoDropdownListItem" key={massage.id} href="# ">
-              <div className="isoImgWrapper">
-                <img alt="#" src={Image} />
-              </div>
-
-              <div className="isoListContent">
-                <div className="isoListHead">
-                  <h5>{massage.name}</h5>
-                  <span className="isoDate">{massage.time}</span>
-                </div>
-                <p>{massage.massage}</p>
-              </div>
-            </a>
-          ))}
-        </Scrollbar>
-      </div>
-      <a className="isoViewAllBtn" href="# ">
-        <IntlMessages id="topbar.viewAll" />
-      </a>
-    </TopbarDropdownWrapper>
-  );
-  return (
-    <Popover
-      content={content}
-      trigger="click"
-      visible={visible}
-      onVisibleChange={handleVisibleChange}
-      placement="bottomLeft"
-    >
-      <div className="isoIconWrapper">
-        <i
-          className="ion-chatbubbles"
-          style={{ color: customizedTheme.textColor }}
-        />
-        <span>{demoMassage.length}</span>
-      </div>
-    </Popover>
-  );
-}
diff --git a/src/containers/Topbar/TopbarNotification.js b/src/containers/Topbar/TopbarNotification.js
deleted file mode 100644
index 78adb61..0000000
--- a/src/containers/Topbar/TopbarNotification.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from 'react';
-import { Popover } from 'antd';
-import { useSelector } from 'react-redux';
-import IntlMessages from '@imd/components/utility/intlMessages';
-import TopbarDropdownWrapper from './TopbarDropdown.styles';
-
-const demoNotifications = [
-  {
-    id: 1,
-    name: 'David Doe',
-    notification:
-      'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner',
-  },
-  {
-    id: 2,
-    name: 'Navis Doe',
-    notification:
-      'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner',
-  },
-  {
-    id: 3,
-    name: 'Emanual Doe',
-    notification:
-      'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner',
-  },
-  {
-    id: 4,
-    name: 'Dowain Doe',
-    notification:
-      'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner',
-  },
-];
-
-export default function TopbarNotification() {
-  const [visible, setVisiblity] = React.useState(false);
-  const customizedTheme = useSelector(state => state.ThemeSwitcher.topbarTheme);
-
-  function handleVisibleChange() {
-    setVisiblity(visible => !visible);
-  }
-
-  const content = (
-    <TopbarDropdownWrapper className="topbarNotification">
-      <div className="isoDropdownHeader">
-        <h3>
-          <IntlMessages id="sidebar.notification" />
-        </h3>
-      </div>
-      <div className="isoDropdownBody">
-        {demoNotifications.map(notification => (
-          <a className="isoDropdownListItem" key={notification.id} href="# ">
-            <h5>{notification.name}</h5>
-            <p>{notification.notification}</p>
-          </a>
-        ))}
-      </div>
-      <a className="isoViewAllBtn" href="# ">
-        <IntlMessages id="topbar.viewAll" />
-      </a>
-    </TopbarDropdownWrapper>
-  );
-  return (
-    <Popover
-      content={content}
-      trigger="click"
-      visible={visible}
-      onVisibleChange={handleVisibleChange}
-      placement="bottomLeft"
-    >
-      <div className="isoIconWrapper">
-        <i
-          className="ion-android-notifications"
-          style={{ color: customizedTheme.textColor }}
-        />
-        <span>{demoNotifications.length}</span>
-      </div>
-    </Popover>
-  );
-}
diff --git a/src/containers/Topbar/TopbarSearch.js b/src/containers/Topbar/TopbarSearch.js
deleted file mode 100644
index 24dfdbd..0000000
--- a/src/containers/Topbar/TopbarSearch.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import Searchbar from '@imd/components/Topbar/SearchBox';
-import TopbarSearchModal from './TopbarSearchModal.styles';
-
-export default function TopbarSearch() {
-  const [visible, setVisiblity] = React.useState(false);
-  const customizedTheme = useSelector(state => state.ThemeSwitcher.topbarTheme);
-
-  const handleBlur = () => {
-    setTimeout(() => {
-      setVisiblity(false);
-    }, 200);
-  };
-
-  return (
-    <div onClick={() => setVisiblity(true)}>
-      <i
-        className="ion-ios-search-strong"
-        style={{ color: customizedTheme.textColor }}
-      />
-      <TopbarSearchModal
-        visible={visible}
-        onOk={() => setVisiblity(false)}
-        onCancel={() => setVisiblity(false)}
-        wrapClassName="isoSearchModal"
-        width="60%"
-        footer={null}
-      >
-        <div className="isoSearchContainer">
-          {visible ? <Searchbar onBlur={handleBlur} /> : ''}
-        </div>
-      </TopbarSearchModal>
-    </div>
-  );
-}
diff --git a/src/containers/Topbar/TopbarSearchModal.styles.js b/src/containers/Topbar/TopbarSearchModal.styles.js
deleted file mode 100644
index 04d26e9..0000000
--- a/src/containers/Topbar/TopbarSearchModal.styles.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import Modal from '@imd/components/Feedback/Modal';
-import styled from 'styled-components';
-import { palette } from 'styled-theme';
-import WithDirection from '@imd/lib/helpers/rtl';
-
-const TopbarSearchModal = styled(Modal)`
-  &.ant-modal {
-    top: 150px;
-    padding-bottom: 0;
-  }
-
-  .ant-modal-close-x {
-    width: 28px;
-    height: 28px;
-    line-height: 28px;
-    display: none;
-  }
-
-  .ant-modal-content {
-    overflow: hidden;
-    border-radius: 5px;
-
-    .ant-modal-header {
-      display: none;
-    }
-
-    .ant-modal-body {
-      padding: 0px;
-
-      .isoSearchContainer {
-        .ant-input-search {
-          .ant-input {
-            border: 0;
-            border-radius: 0;
-            padding-left: ${props =>
-              props['data-rtl'] === 'rtl' ? '15px' : '55px'};
-            padding-right: ${props =>
-              props['data-rtl'] === 'rtl' ? '55px' : '15px'};
-            height: 60px;
-            font-size: 14px;
-
-            &::-webkit-input-placeholder {
-              color: ${palette('grayscale', 0)};
-            }
-
-            &:-moz-placeholder {
-              color: ${palette('grayscale', 0)};
-            }
-
-            &::-moz-placeholder {
-              color: ${palette('grayscale', 0)};
-            }
-            &:-ms-input-placeholder {
-              color: ${palette('grayscale', 0)};
-            }
-
-            &:focus {
-              outline: 0;
-              box-shadow: none;
-            }
-          }
-        }
-
-        .ant-input-suffix {
-          right: ${props => (props['data-rtl'] === 'rtl' ? '20px' : 'auto')};
-          left: ${props => (props['data-rtl'] === 'rtl' ? 'auto' : '20px')};
-          height: 0;
-
-          &:before {
-            content: '\f4a4';
-            font-family: 'ionicons';
-            font-size: 24px;
-            color: ${palette('text', 2)};
-          }
-
-          .ant-input-search-icon {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-`;
-
-export default WithDirection(TopbarSearchModal);
diff --git a/src/containers/Topbar/TopbarUser.js b/src/containers/Topbar/TopbarUser.js
deleted file mode 100644
index 386d741..0000000
--- a/src/containers/Topbar/TopbarUser.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
-import Popover from '@imd/components/uielements/popover';
-import IntlMessages from '@imd/components/utility/intlMessages';
-import userpic from '@imd/assets/images/user1.png';
-import authAction from '@imd/redux/auth/actions';
-import TopbarDropdownWrapper from './TopbarDropdown.styles';
-
-const { logout } = authAction;
-
-export default function TopbarUser() {
-  const [visible, setVisibility] = React.useState(false);
-  const dispatch = useDispatch();
-  function handleVisibleChange() {
-    setVisibility(visible => !visible);
-  }
-
-  const content = (
-    <TopbarDropdownWrapper className="isoUserDropdown">
-      <Link className="isoDropdownLink" to={'/dashboard/my-profile'}>
-        <IntlMessages id="topbar.myprofile" />
-      </Link>
-      <a className="isoDropdownLink" href="# ">
-        <IntlMessages id="themeSwitcher.settings" />
-      </a>
-      <a className="isoDropdownLink" href="# ">
-        <IntlMessages id="sidebar.feedback" />
-      </a>
-      <a className="isoDropdownLink" href="# ">
-        <IntlMessages id="topbar.help" />
-      </a>
-      <div className="isoDropdownLink" onClick={() => dispatch(logout())}>
-        <IntlMessages id="topbar.logout" />
-      </div>
-    </TopbarDropdownWrapper>
-  );
-
-  return (
-    <Popover
-      content={content}
-      trigger="click"
-      visible={visible}
-      onVisibleChange={handleVisibleChange}
-      arrowPointAtCenter={true}
-      placement="bottomLeft"
-    >
-      <div className="isoImgWrapper">
-        <img alt="user" src={userpic} />
-        <span className="userActivity online" />
-      </div>
-    </Popover>
-  );
-}
diff --git a/src/redux/card/config.js b/src/redux/card/config.js
index edcbba8..df4eeab 100644
--- a/src/redux/card/config.js
+++ b/src/redux/card/config.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { DeleteCell } from '@imd/components/Tables/HelperCells';
 function createColumns(editColumn, deleteColumn) {
   return [
     {
@@ -17,19 +16,6 @@ function createColumns(editColumn, deleteColumn) {
       dataIndex: 'notes',
       rowKey: 'notes',
     },
-    {
-      title: '',
-      rowKey: 'action',
-      render: (text, record) => (
-        <span>
-          <DeleteCell
-            onDeleteCell={() => {
-              deleteColumn(record);
-            }}
-          />
-        </span>
-      ),
-    },
   ];
 }
 
diff --git a/src/redux/quiz/actions.js b/src/redux/quiz/actions.js
deleted file mode 100644
index 9a93885..0000000
--- a/src/redux/quiz/actions.js
+++ /dev/null
@@ -1,37 +0,0 @@
-const quizActions = {
-  START_QUIZ: 'START_QUIZ',
-  GET_QUIZ_DATA: 'GET_QUIZ_DATA',
-  GET_QUESTION_DATA: 'GET_QUESTION_DATA',
-  SET_QUESTION_DATA: 'SET_QUESTION_DATA',
-  SET_QUIZ_DATA: 'SET_QUIZ_DATA',
-  SET_QUESTION_ANSWER: 'SET_QUESTION_ANSWER',
-  NEXT_QUESTION: 'NEXT_QUESTION',
-  // Load Data Actions
-  startQuiz: () => ({
-    type: quizActions.START_QUIZ,
-  }),
-  getQuestionData: () => ({
-    type: quizActions.GET_QUESTION_DATA,
-  }),
-  getQuizData: () => ({
-    type: quizActions.GET_QUIZ_DATA,
-  }),
-  setQuizData: payload => ({
-    type: quizActions.SET_QUIZ_DATA,
-    payload,
-  }),
-  setQuestionData: payload => ({
-    type: quizActions.SET_QUESTION_DATA,
-    payload,
-  }),
-  setQuestionAnswer: payload => ({
-    type: quizActions.SET_QUESTION_ANSWER,
-    payload,
-  }),
-  nextQuestion: payload => ({
-    type: quizActions.NEXT_QUESTION,
-    payload,
-  }),
-};
-
-export default quizActions;
diff --git a/src/redux/quiz/fakeQuestion.js b/src/redux/quiz/fakeQuestion.js
deleted file mode 100644
index a4dd3c3..0000000
--- a/src/redux/quiz/fakeQuestion.js
+++ /dev/null
@@ -1,128 +0,0 @@
-export default {
-  title: 'Which is not in the following?',
-  total: 5,
-  time: '30 Minutes',
-  data: [
-    {
-      id: 1,
-      question: 'Which one is not a sports?',
-      type: 'single',
-      showAnswer: false,
-      options: [
-        {
-          value: 'football',
-          label: 'Football',
-        },
-        {
-          value: 'volleyball',
-          label: 'Volleyball',
-        },
-        {
-          value: 'baseball',
-          label: 'Baseball',
-        },
-        {
-          value: 'lutuputu',
-          label: 'Lutuputu',
-        },
-      ],
-      answers: 'lutuputu',
-    },
-    {
-      id: 2,
-      type: 'single',
-      question: 'Which one is not a programming language?',
-      options: [
-        {
-          value: 'c#',
-          label: 'C#',
-        },
-        {
-          value: 'java',
-          label: 'Java',
-        },
-        {
-          value: 'php',
-          label: 'PHP',
-        },
-        {
-          value: 'reactjs',
-          label: 'React.JS',
-        },
-      ],
-      answers: 'reactjs',
-    },
-    {
-      id: 3,
-      type: 'single',
-      question: 'Which is not a HTML attributes?',
-      options: [
-        {
-          value: 'title',
-          label: 'title',
-        },
-        {
-          value: 'style',
-          label: 'style',
-        },
-        {
-          value: 'onclick',
-          label: 'onclick',
-        },
-        {
-          value: 'meta',
-          label: 'meta',
-        },
-      ],
-      answers: 'meta',
-    },
-    {
-      id: 4,
-      type: 'multiple',
-      question: 'Powerful Javascript framework is?',
-      options: [
-        {
-          value: 'laravel',
-          label: 'Laravel',
-        },
-        {
-          value: 'angular',
-          label: 'Angular',
-        },
-        {
-          value: 'symphony',
-          label: 'Symphony',
-        },
-        {
-          value: 'react',
-          label: 'React',
-        },
-      ],
-      answers: ['angular', 'react'],
-    },
-    {
-      id: 5,
-      type: 'single',
-      question: 'Which is not a PHP framework?',
-      options: [
-        {
-          value: 'symphony',
-          label: 'Symphony',
-        },
-        {
-          value: 'laravel',
-          label: 'Laravel',
-        },
-        {
-          value: 'codeigniter',
-          label: 'Codeigniter',
-        },
-        {
-          value: 'django',
-          label: 'django',
-        },
-      ],
-      answers: 'django',
-    },
-  ],
-};
diff --git a/src/redux/quiz/fakeQuizes.js b/src/redux/quiz/fakeQuizes.js
deleted file mode 100644
index fa18b38..0000000
--- a/src/redux/quiz/fakeQuizes.js
+++ /dev/null
@@ -1,26 +0,0 @@
-export default {
-  page: 1,
-  data: [
-    {
-      title: 'Which is not in the following?',
-      slug: 'which-is-not-in-the-following',
-      description:
-        'Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.',
-      thumbnail: 'https://via.placeholder.com/150',
-    },
-    {
-      title: 'Basic HTML test',
-      slug: 'basic-html-test',
-      description:
-        'Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.',
-      thumbnail: 'https://via.placeholder.com/150',
-    },
-    {
-      title: 'Advanced PHP test',
-      slug: 'advanced-php-test',
-      description:
-        'Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.',
-      thumbnail: 'https://via.placeholder.com/150',
-    },
-  ],
-};
diff --git a/src/redux/quiz/reducer.js b/src/redux/quiz/reducer.js
deleted file mode 100644
index 1a15ff9..0000000
--- a/src/redux/quiz/reducer.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import quizActions from './actions';
-import { arrayEqual } from '@imd/lib/helpers/utility';
-const initialState = {
-  quizes: {},
-  questions: {},
-  gettingStarted: false,
-  activeQuestion: 0,
-  total: 0,
-  correct: 0,
-  wrong: 0,
-  submitted: false,
-  answers: false,
-};
-
-export default function questionReducer(state = initialState, action) {
-  switch (action.type) {
-    case quizActions.START_QUIZ:
-      return { ...state, gettingStarted: true };
-    case quizActions.SET_QUIZ_DATA:
-      return { ...state, quizes: action.payload, gettingStarted: false };
-    case quizActions.SET_QUESTION_DATA:
-      return {
-        ...state,
-        questions: action.payload,
-        total: action.payload.total,
-      };
-    case quizActions.SET_QUESTION_ANSWER:
-      const { questions, activeQuestion, correct, wrong } = state;
-      const currentQuizz = questions.data[activeQuestion];
-      let rightAnswer = false;
-      if (Array.isArray(action.payload)) {
-        rightAnswer = arrayEqual(action.payload, currentQuizz['answers']);
-      } else {
-        rightAnswer = currentQuizz['answers'] === action.payload ? true : false;
-      }
-      let correctAnswer = rightAnswer ? correct + 1 : correct;
-      let wrongAnswer = !rightAnswer ? wrong + 1 : wrong;
-      return {
-        ...state,
-        correct: correctAnswer,
-        wrong: wrongAnswer,
-        submitted: true,
-        answers: rightAnswer,
-        questions: {
-          data: [
-            ...questions.data.slice(0, activeQuestion),
-            {
-              ...questions.data[activeQuestion],
-              showAnswer: true,
-            },
-            ...questions.data.slice(activeQuestion + 1),
-          ],
-        },
-      };
-    case quizActions.NEXT_QUESTION:
-      return {
-        ...state,
-        activeQuestion: state.activeQuestion + 1,
-        submitted: false,
-        answers: false,
-      };
-
-    default:
-      return state;
-  }
-}
diff --git a/src/redux/quiz/saga.js b/src/redux/quiz/saga.js
deleted file mode 100644
index 3bd2c69..0000000
--- a/src/redux/quiz/saga.js
+++ /dev/null
@@ -1,24 +0,0 @@
-// saga.js
-import { all, takeEvery, put } from 'redux-saga/effects';
-import quizActions from './actions';
-import FakeQuestion from './fakeQuestion';
-import FakeQuiz from './fakeQuizes';
-
-function* questionRenderEffectSaga() {
-  let questons;
-  questons = FakeQuestion;
-  yield put(quizActions.setQuestionData(questons));
-}
-
-function* quizRenderEffectSaga() {
-  let quizes;
-  quizes = FakeQuiz;
-  yield put(quizActions.setQuizData(quizes));
-}
-
-export default function* questionSaga() {
-  yield all([
-    takeEvery(quizActions.GET_QUESTION_DATA, questionRenderEffectSaga),
-    takeEvery(quizActions.GET_QUIZ_DATA, quizRenderEffectSaga),
-  ]);
-}
diff --git a/src/redux/root-reducer.js b/src/redux/root-reducer.js
index 2de150d..208e0d8 100644
--- a/src/redux/root-reducer.js
+++ b/src/redux/root-reducer.js
@@ -1,52 +1,16 @@
 import { combineReducers } from 'redux';
 import App from '@imd/redux/app/reducer';
-import Auth from '@imd/redux/auth/reducer';
-import Mails from '@imd/redux/mail/reducer';
-import Calendar from '@imd/redux/calendar/reducer';
 import Box from '@imd/redux/box/reducer';
-import Notes from '@imd/redux/notes/reducer';
-import Todos from '@imd/redux/todos/reducer';
-import Contacts from '@imd/redux/contacts/reducer';
 import Cards from '@imd/redux/card/reducer';
-import Chat from '@imd/redux/chat/reducers';
-import DynamicChartComponent from '@imd/redux/dynamicEchart/reducer';
-import Ecommerce from '@imd/redux/ecommerce/reducer';
 import ThemeSwitcher from '@imd/redux/themeSwitcher/reducer';
-import Invoices from '@imd/redux/invoice/reducer';
 import LanguageSwitcher from '@imd/redux/languageSwitcher/reducer';
-import YoutubeSearch from '@imd/redux/youtubeSearch/reducers';
-import Articles from '@imd/redux/articles/reducers';
-import Investors from '@imd/redux/investors/reducers';
-import scrumBoard from '@imd/redux/scrumBoard/reducer';
-import drawer from '@imd/redux/drawer/reducer';
 import modal from '@imd/redux/modal/reducer';
-import profile from '@imd/redux/profile/reducer';
-import githubSearch from '@imd/redux/githubSearch/reducers';
-import quiz from '@imd/redux/quiz/reducer';
 
 export default combineReducers({
-  Auth,
   App,
   ThemeSwitcher,
   LanguageSwitcher,
-  Mails,
-  Calendar,
   Box,
-  Notes,
-  Todos,
-  Contacts,
   Cards,
-  Chat,
-  DynamicChartComponent,
-  Ecommerce,
-  Invoices,
-  YoutubeSearch,
-  Articles,
-  Investors,
-  scrumBoard,
   modal,
-  drawer,
-  profile,
-  githubSearch,
-  quiz,
 });
diff --git a/src/redux/root-saga.js b/src/redux/root-saga.js
index 8c26e2b..c070cf9 100644
--- a/src/redux/root-saga.js
+++ b/src/redux/root-saga.js
@@ -1,38 +1,8 @@
 import { all } from 'redux-saga/effects';
-import authSagas from '@imd/redux/auth/saga';
-import contactSagas from '@imd/redux/contacts/saga';
-import invoicesSagas from '@imd/redux/invoice/saga';
-import mailSagas from '@imd/redux/mail/saga';
-import notesSagas from '@imd/redux/notes/saga';
-import todosSagas from '@imd/redux/todos/saga';
-import ecommerceSaga from '@imd/redux/ecommerce/saga';
 import cardsSagas from '@imd/redux/card/saga';
-import chatSagas from '@imd/redux/chat/sagas';
-import youtubeSearchSagas from '@imd/redux/youtubeSearch/sagas';
-import githubSagas from '@imd/redux/githubSearch/sagas';
-import articles from '@imd/redux/articles/sagas';
-import investors from '@imd/redux/investors/sagas';
-import scrumBoardSaga from '@imd/redux/scrumBoard/saga';
-import profileSaga from '@imd/redux/profile/saga';
-import quizSaga from '@imd/redux/quiz/saga';
 
 export default function* rootSaga(getState) {
   yield all([
-    authSagas(),
-    contactSagas(),
-    mailSagas(),
-    notesSagas(),
-    todosSagas(),
-    ecommerceSaga(),
     cardsSagas(),
-    invoicesSagas(),
-    chatSagas(),
-    youtubeSearchSagas(),
-    githubSagas(),
-    articles(),
-    investors(),
-    scrumBoardSaga(),
-    profileSaga(),
-    quizSaga(),
   ]);
 }
-- 
GitLab