From 1b1e63b4d216408546586ee4c4384cb81db37fce Mon Sep 17 00:00:00 2001
From: Shraddha Kesari <shraddha@quintype.com>
Date: Tue, 20 Jun 2023 14:20:34 +0530
Subject: [PATCH 1/8] test -1

---
 .vscode/settings.json                         |   5 +-
 .../components/Atoms/AdPlaceholder/index.js   |   4 +-
 .../components/Atoms/Author/author.m.css      |   7 +-
 .../arrow/components/Atoms/Author/index.js    |  31 +-
 .../arrow/components/Atoms/Author/stories.js  |   6 +-
 .../components/Atoms/AuthorCard/README.md     |  28 +-
 .../Atoms/AuthorCard/author-card.m.css        | 127 ++-
 .../Atoms/AuthorCard/author-card.test.js      |  17 +-
 .../components/Atoms/AuthorCard/index.js      | 266 ++++--
 .../components/Atoms/AuthorCard/stories.js    | 108 ++-
 .../Atoms/AuthorImage/author-image.m.css      |   6 +-
 .../components/Atoms/AuthorImage/index.js     |  12 +-
 .../components/Atoms/AuthorImage/stories.js   |   6 +-
 .../author-with-timestamp.m.css               |  10 +-
 .../Atoms/AuthorWithTimestamp/index.js        |  59 +-
 .../Atoms/AuthorWithTimestamp/stories.js      |  10 +-
 .../components/Atoms/BulletPoint/index.js     |   2 +-
 .../caption-attribution.m.css                 |   3 +-
 .../Atoms/CaptionAttribution/index.js         |   4 +-
 .../Atoms/CaptionAttribution/stories.js       |  12 +-
 .../CollectionName/collection-name.m.css      |  16 +-
 .../components/Atoms/CollectionName/index.js  |  31 +-
 .../Atoms/CollectionName/stories.js           |  14 +-
 .../__snapshots__/divider.test.js.snap        |   2 +-
 .../arrow/components/Atoms/Divider/index.js   |   4 +-
 .../arrow/components/Atoms/Dot/dot.js         |   4 +-
 .../Atoms/ExtendedLoadMore/index.js           |  19 +-
 .../components/Atoms/FallbackImage/index.js   |   2 +-
 .../components/Atoms/Headline/headline.m.css  |  43 +-
 .../arrow/components/Atoms/Headline/index.js  |  62 +-
 .../components/Atoms/Headline/stories.js      |  12 +-
 .../Atoms/HeroImage/hero-image.m.css          |   2 +-
 .../arrow/components/Atoms/HeroImage/index.js |  71 +-
 .../components/Atoms/HeroImage/stories.js     |  17 +-
 .../arrow/components/Atoms/Hyperlink/index.js |   5 +-
 .../components/Atoms/LoadMoreTarget/index.js  |  12 +-
 .../LoadMoreTarget/load-more-target.m.css     |   7 +
 .../arrow/components/Atoms/Loadmore/index.js  |   4 +-
 .../components/Atoms/Loadmore/stories.js      |   2 +-
 .../Atoms/MagazineCoverImage/index.js         |  10 +-
 .../Atoms/MagazineCoverImage/stories.js       |   6 +-
 .../Atoms/PremiumStoryIcon/index.js           |   2 +-
 .../components/Atoms/PublishDetail/index.js   |  52 +-
 .../Atoms/PublishDetail/publish-details.m.css |   8 +-
 .../PublishDetail/publish-details.test.js     |  21 +-
 .../components/Atoms/PublishDetail/stories.js |   2 +-
 .../arrow/components/Atoms/ReadTime/index.js  |  31 +-
 .../components/Atoms/ReadTime/read-time.m.css |  17 +-
 .../components/Atoms/ReadTime/stories.js      |   2 +-
 .../Atoms/ScrollSnap/SliderArrow/index.js     |   8 +-
 .../Atoms/ScrollSnap/SliderIndicator/index.js |   8 +-
 .../components/Atoms/ScrollSnap/index.js      |   9 +-
 .../components/Atoms/SectionTag/index.js      |  20 +-
 .../components/Atoms/SectionTag/stories.js    |   2 +-
 .../Atoms/SocialSharePopup/index.js           |   4 +-
 .../SocialSharePopup/social-share-popup.m.css |   2 +-
 .../social-share-popup.test.js                |  12 +-
 .../Atoms/SocialSharePopup/stories.js         |   2 +-
 .../StoryElements/AlsoRead/also-read.m.css    |   9 +-
 .../StoryElements/AlsoRead/also-read.test.js  |   6 +-
 .../Atoms/StoryElements/AlsoRead/index.js     |  40 +-
 .../Atoms/StoryElements/AlsoRead/stories.js   |   8 +-
 .../StoryElements/Attachment/attachment.m.css |   3 +-
 .../Atoms/StoryElements/Attachment/index.js   |  10 +-
 .../Atoms/StoryElements/Attachment/stories.js |   8 +-
 .../StoryElements/BigFact/big-fact.m.css      |   3 +-
 .../Atoms/StoryElements/BigFact/index.js      |   5 +-
 .../StoryElements/BlockQuote/Svg/curve.js     |   5 +-
 .../StoryElements/BlockQuote/Svg/edge.js      |   5 +-
 .../BlockQuote/block-quote.m.css              |   3 +-
 .../BlockQuote/block-quote.test.js            |   2 +-
 .../Atoms/StoryElements/BlockQuote/index.js   |  13 +-
 .../Atoms/StoryElements/BlockQuote/stories.js |   6 +-
 .../Atoms/StoryElements/Blurb/blurb.m.css     |   3 +-
 .../Atoms/StoryElements/Blurb/blurb.test.js   |  45 +-
 .../Atoms/StoryElements/Blurb/index.js        |  31 +-
 .../Atoms/StoryElements/Blurb/stories.js      |   2 +-
 .../Atoms/StoryElements/Image/index.js        |  10 +-
 .../Atoms/StoryElements/Image/stories.js      |   6 +-
 .../ImageSlideshow/image-slideshow.m.css      |   4 +-
 .../StoryElements/ImageSlideshow/index.js     |  10 +-
 .../StoryElements/ImageSlideshow/stories.js   |  14 +-
 .../StoryElements/QuestionAnswer/index.js     |  23 +-
 .../QuestionAnswer/question-answer.m.css      |  14 +-
 .../StoryElements/QuestionAnswer/stories.js   |  16 +-
 .../Atoms/StoryElements/Quote/index.js        |  14 +-
 .../Atoms/StoryElements/Quote/quote.m.css     |   3 +-
 .../Atoms/StoryElements/Quote/quote.test.js   |   6 +-
 .../Atoms/StoryElements/Quote/stories.js      |   2 +-
 .../Atoms/StoryElements/Reference/index.js    |   6 +-
 .../StoryElements/Reference/reference.m.css   |   3 +-
 .../Atoms/StoryElements/Reference/stories.js  |   2 +-
 .../Atoms/StoryElements/StoryElement/index.js |   2 +-
 .../StoryElements/StoryElement/stories.js     |   6 +-
 .../Atoms/StoryElements/Summary/index.js      |  14 +-
 .../Atoms/StoryElements/Summary/stories.js    |   4 +-
 .../Atoms/StoryElements/Summary/summary.m.css |   8 +-
 .../Atoms/StoryElements/Text/index.js         |   7 +-
 .../Atoms/StoryElements/Text/text.m.css       |   7 +-
 .../Atoms/StoryElements/Text/text.test.js     |   4 +-
 .../Atoms/StoryElements/Video/index.js        |  26 +-
 .../Atoms/StoryElements/Video/stories.js      |   6 +-
 .../Atoms/StoryElements/Video/video.m.css     |  34 +-
 .../imageGallery/image-gallery.m.css          |   2 +-
 .../Atoms/StoryElements/imageGallery/index.js |  26 +-
 .../StoryElements/imageGallery/stories.js     |   8 +-
 .../Atoms/StoryElements/withElementWrapper.js |   3 +-
 .../StoryElements/withElementWrapper.test.js  |   2 +-
 .../components/Atoms/StoryHeadline/index.js   |   6 +-
 .../components/Atoms/StoryReview/README.md    |   9 +
 .../components/Atoms/StoryReview/index.js     |  39 +
 .../components/Atoms/StoryReview/stories.js   |   8 +
 .../Atoms/StoryReview/story-review.m.css      |  27 +
 .../arrow/components/Atoms/StoryTags/index.js |   6 +-
 .../components/Atoms/StoryTags/stories.js     |   8 +-
 .../components/Atoms/Subheadline/index.js     |  13 +-
 .../arrow/components/Atoms/TimeStamp/index.js |  50 +-
 .../Atoms/TimeStamp/timestamp.m.css           |   5 -
 .../components/Fixture/dummy-collection.js    | 869 +++++++++---------
 .../arrow/components/Fixture/dummyStory.js    | 807 +++++++++-------
 .../arrow/components/Fixture/index.js         | 171 ++--
 .../arrow/components/Fixture/slot-config.js   |  12 +-
 .../Molecules/FullScreenImages/index.js       |  16 +-
 .../components/Molecules/KeyEvents/index.js   |  12 +-
 .../components/Molecules/KeyEvents/stories.js |   8 +-
 .../Molecules/PageIntroductionCard/index.js   |   9 +-
 .../page-intro-card.m.css                     |   3 +-
 .../Molecules/PageIntroductionCard/stories.js |   2 +-
 .../Molecules/PortraitStoryCard/index.js      |   3 +
 .../Molecules/PortraitStoryCard/stories.js    |   6 +-
 .../Molecules/SliderHorizontalCard/index.js   |  18 +-
 .../Molecules/SliderHorizontalCard/stories.js |   6 +-
 .../Molecules/SocialShareTemplate/index.js    |  11 +-
 .../SocialShareTemplate/social-share-data.js  |  22 +-
 .../social-share-template.m.css               |   2 +-
 .../social-share-template.test.js             |  16 +-
 .../Molecules/SocialShareTemplate/stories.js  |   4 +-
 .../components/Molecules/StoryCard/index.js   |  13 +-
 .../components/Molecules/StoryCard/stories.js |  20 +-
 .../Molecules/StoryCard/storycard.m.css       |  24 +-
 .../StoryCardWithBulletPoint/index.js         |   7 +-
 .../StoryCardWithBulletPoint/stories.js       |   8 +-
 .../Molecules/StoryElementCard/index.js       | 140 ++-
 .../Molecules/StoryElementCard/stories.js     |   8 +-
 .../StoryElementCard/story-element-card.m.css |  43 +-
 .../Molecules/StorycardContent/index.js       |  20 +-
 .../Molecules/StorycardContent/stories.js     |   6 +-
 .../StorycardContent/storycardContent.m.css   |   2 +-
 .../alternate-collection-filter.m.css         |   2 +-
 .../Rows/AlternateCollectionFilter/index.js   |  23 +-
 .../Rows/AlternateCollectionFilter/stories.js |  13 +-
 .../AsideCollection/aside-collection.m.css    |  25 +-
 .../components/Rows/AsideCollection/index.js  |  52 +-
 .../Rows/AsideCollection/stories.js           |   8 +-
 .../astrology-collection.m.css                |   8 +
 .../Rows/AstrologyCollection/index.js         |  20 +-
 .../Rows/AstrologyCollection/stories.js       |  13 +-
 .../AuthorIntroductionCard/author-intro.m.css |   7 +-
 .../author-intro.test.js                      |  12 +-
 .../Rows/AuthorIntroductionCard/index.js      |   8 +-
 .../Rows/AuthorIntroductionCard/stories.js    |  12 +-
 .../Rows/AuthorsList/authors-list.m.css       |   3 +-
 .../components/Rows/AuthorsList/index.js      |  12 +-
 .../components/Rows/AuthorsList/stories.js    |  20 +-
 .../CollectionFilter/collection-filter.m.css  |   2 +-
 .../components/Rows/CollectionFilter/index.js |  26 +-
 .../Rows/CollectionFilter/stories.js          |  13 +-
 .../components/Rows/ElevenStories/index.js    | 323 +++----
 .../components/Rows/ElevenStories/stories.js  |  12 +-
 .../four-col-five-stories.m.css               |   5 +-
 .../Rows/FourColFiveStories/index.js          |  17 +-
 .../Rows/FourColFiveStories/stories.js        |  11 +-
 .../components/Rows/FourColGrid/index.js      |  18 +-
 .../components/Rows/FourColGrid/stories.js    |  12 +-
 .../Rows/FourColPortraitStories/index.js      |  18 +-
 .../Rows/FourColPortraitStories/stories.js    |  12 +-
 .../four-col-sixteen-stories.m.css            |   5 +-
 .../Rows/FourColSixteenStories/index.js       |  43 +-
 .../Rows/FourColSixteenStories/stories.js     |  10 +-
 .../Rows/FourColTwelveStory/index.js          |  49 +-
 .../Rows/FourColTwelveStory/stories.js        |  30 +-
 .../components/Rows/FourStorySlider/index.js  |  17 +-
 .../Rows/FourStorySlider/stories.js           |  26 +-
 .../four-story-slider-portrait.m.css          |   2 +-
 .../Rows/FourStorySliderPortrait/index.js     |  47 +-
 .../Rows/FourStorySliderPortrait/stories.js   |  26 +-
 .../four-tabbed-big-story-slider.m.css        |   5 +-
 .../Rows/FourTabbedBigStorySlider/index.js    |  23 +-
 .../Rows/FourTabbedBigStorySlider/stories.js  |  10 +-
 .../FullScreenSlider/full-screen-slider.m.css |  11 +-
 .../components/Rows/FullScreenSlider/index.js |  24 +-
 .../Rows/FullScreenSlider/stories.js          |  24 +-
 .../components/Rows/HalfScreenSlider/index.js |  22 +-
 .../Rows/HalfScreenSlider/stories.js          |  24 +-
 .../components/Rows/ListComponent/index.js    |  19 +-
 .../components/Rows/ListComponent/stories.js  |  12 +-
 .../arrow/components/Rows/Listicles/index.js  |  57 +-
 .../components/Rows/Listicles/stories.js      |  11 +-
 .../components/Rows/MagazineEditions/index.js |  15 +-
 .../MagazineEditions/magazine-editions.m.css  |   3 +-
 .../magazine-editions.test.js                 |   2 +-
 .../Rows/MagazineEditions/stories.js          |  10 +-
 .../Rows/MagazineHeaderCard/index.js          |  13 +-
 .../MagazineHeaderCard/magazine-cards.m.css   |   5 +-
 .../Rows/MagazineHeaderCard/stories.js        |  10 +-
 .../components/Rows/MagazineWidget/index.js   |  23 +-
 .../components/Rows/MagazineWidget/stories.js |  12 +-
 .../components/Rows/OneColStoryList/index.js  |  67 +-
 .../OneColStoryList/one-col-story-list.m.css  |  20 +-
 .../Rows/OneColStoryList/stories.js           |  12 +-
 .../Rows/OpinionCollection/index.js           |  40 +-
 .../opinion-collection.m.css                  | 249 +++--
 .../Rows/OpinionCollection/stories.js         |  18 +-
 .../components/Rows/SixColSixStories/index.js |  26 +-
 .../six-col-six-stories.m.css                 |   3 +-
 .../Rows/SixColSixStories/stories.js          |  12 +-
 .../__snapshots__/listicle-story.test.js.snap |  12 +-
 .../ListicleStoryTemplates/index.js           | 153 ++-
 .../listicle-story.m.css                      |   7 +-
 .../listicle-story.test.js                    |   6 +-
 .../ListicleStoryTemplates/stories.js         |  31 +-
 .../LiveBlogStoryTemplates/index.js           |  18 +-
 .../LiveBlogStoryTemplates/live-blog.m.css    |  12 +-
 .../LiveBlogStoryTemplates/stories.js         |  31 +-
 .../LiveBlogStoryTemplates/templates.js       |  48 +-
 .../PhotoStoryTemplates/index.js              | 113 +--
 .../PhotoStoryTemplates/photo-story.test.js   |  10 +-
 .../PhotoStoryTemplates/photo.m.css           |   3 +-
 .../PhotoStoryTemplates/stories.js            |  33 +-
 .../Rows/StoryTemplates/Snapshot/README.md    |   9 +
 .../Rows/StoryTemplates/Snapshot/index.js     |  96 ++
 .../StoryTemplates/Snapshot/snapshot.m.css    |  66 ++
 .../Rows/StoryTemplates/Snapshot/stories.js   | 110 +++
 .../TextStoryTemplates/index.js               |  21 +-
 .../TextStoryTemplates/stories.js             |  35 +-
 .../TextStoryTemplates/templates.js           |  39 +-
 .../TextStoryTemplates/text-story.m.css       |  23 +-
 .../TextStoryTemplates/text-story.test.js     |  14 +-
 .../VideoStoryTemplates/index.js              |  40 +-
 .../VideoStoryTemplates/stories.js            |  60 +-
 .../VideoStoryTemplates/video-story.m.css     |  13 +-
 .../Rows/TagIntroductionCard/index.js         |   5 +-
 .../Rows/TagIntroductionCard/stories.js       |   4 +-
 .../tag-intro-card.module.css                 |   3 +-
 .../Rows/ThreeColFlexStories/index.js         |  49 +-
 .../Rows/ThreeColFlexStories/stories.js       |  12 +-
 .../three-col-flex-stories.m.css              |   7 +-
 .../Rows/ThreeColFourteenStory/index.js       |  65 +-
 .../Rows/ThreeColFourteenStory/stories.js     |  10 +-
 .../components/Rows/ThreeColGrid/index.js     |  23 +-
 .../components/Rows/ThreeColGrid/stories.js   |  12 +-
 .../Rows/ThreeColSevenStory/index.js          | 107 ++-
 .../Rows/ThreeColSevenStory/stories.js        |  46 +-
 .../Rows/ThreeColSixStories/index.js          |  47 +-
 .../Rows/ThreeColSixStories/stories.js        |  12 +-
 .../Rows/ThreeColTwelveStories/index.js       |  36 +-
 .../Rows/ThreeColTwelveStories/stories.js     |  10 +-
 .../three-col-twelve-stories.m.css            |  23 +-
 .../components/Rows/TwoColFourStory/index.js  |  77 +-
 .../Rows/TwoColFourStory/stories.js           |  12 +-
 .../Rows/TwoColFourStoryHighlight/index.js    |  43 +-
 .../Rows/TwoColFourStoryHighlight/stories.js  |  10 +-
 .../two-col-four-story-highlight.m.css        |   3 +-
 .../Rows/TwoColSevenStories/index.js          |  48 +-
 .../Rows/TwoColSevenStories/stories.js        |  20 +-
 .../components/Rows/TwoColSixStories/index.js |  27 +-
 .../Rows/TwoColSixStories/stories.js          |  12 +-
 .../two-col-six-stories.m.css                 |  64 +-
 .../Rows/TwoColTenStoriesSidebar/index.js     |  65 +-
 .../Rows/TwoColTenStoriesSidebar/stories.js   |   8 +-
 .../two-col-ten-stories-sidebar.m.css         |   3 +-
 .../components/Rows/TwoColThreeStory/index.js |  37 +-
 .../Rows/TwoColThreeStory/stories.js          |  12 +-
 .../arrow/components/SharedContext.js         |  13 +-
 .../arrow/components/Svgs/Loading/loading.js  |   5 +-
 .../components/Svgs/Loading/loading.m.css     |   1 +
 .../components/Svgs/SocialIcons/facebook.js   |   5 +-
 .../components/Svgs/SocialIcons/instagram.js  |   6 +-
 .../components/Svgs/SocialIcons/linkedin.js   |   5 +-
 .../components/Svgs/SocialIcons/twitter.js    |   5 +-
 .../components/Svgs/SocialIcons/whatsapp.js   |   5 +-
 .../components/Svgs/SocialIcons/youtube.js    |   2 +-
 .../arrow/components/Svgs/clock-icon.js       |   5 +-
 .../arrow/components/Svgs/close-icon.js       |   2 +-
 app/isomorphic/arrow/components/Svgs/crown.js |   5 +-
 .../arrow/components/Svgs/fallbackImage.js    |   2 +-
 .../arrow/components/Svgs/hyperlink.js        |   3 +-
 app/isomorphic/arrow/components/Svgs/key.js   |   8 +-
 .../arrow/components/Svgs/left-arrow.js       |   2 +-
 .../arrow/components/Svgs/liveicon.js         |  10 +-
 app/isomorphic/arrow/components/Svgs/lock.js  |   5 +-
 .../arrow/components/Svgs/right-arrow.js      |   2 +-
 .../arrow/components/Svgs/share-icon.js       |   5 +-
 app/isomorphic/arrow/components/Svgs/star.js  |   8 +-
 .../components/Svgs/user-fallback-icon.js     |   2 +-
 .../arrow/components/Typography/stories.js    |   2 +-
 app/isomorphic/arrow/constants.js             |   1 +
 app/isomorphic/arrow/entry-points.js          | 171 ++--
 app/isomorphic/arrow/guide/stories.js         |   8 +-
 .../arrow/hydration-component/index.js        |   2 +-
 .../hydration-component/useNearScreen.js      |   2 +-
 app/isomorphic/arrow/index.js                 |   5 +
 app/isomorphic/arrow/utils/testing-utils.js   |   2 +-
 app/isomorphic/arrow/utils/utils.js           | 123 ++-
 app/isomorphic/arrow/utils/utils.test.js      |  30 +-
 app/isomorphic/assets/stylesheets/app.scss    | 277 ++++++
 app/isomorphic/assets/stylesheets/mixins.scss |  27 +
 app/isomorphic/assets/stylesheets/reset.scss  | 148 +++
 .../assets/stylesheets/viewports.m.css        |   3 +
 .../components/pages/author-page/author.m.css |   3 -
 package-lock.json                             | 511 +++++-----
 package.json                                  |   5 +-
 run                                           |   1 +
 313 files changed, 5419 insertions(+), 3895 deletions(-)
 create mode 100644 app/isomorphic/arrow/components/Atoms/LoadMoreTarget/load-more-target.m.css
 create mode 100644 app/isomorphic/arrow/components/Atoms/StoryReview/README.md
 create mode 100644 app/isomorphic/arrow/components/Atoms/StoryReview/index.js
 create mode 100644 app/isomorphic/arrow/components/Atoms/StoryReview/stories.js
 create mode 100644 app/isomorphic/arrow/components/Atoms/StoryReview/story-review.m.css
 create mode 100644 app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/README.md
 create mode 100644 app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/index.js
 create mode 100644 app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/snapshot.m.css
 create mode 100644 app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/stories.js
 create mode 100644 app/isomorphic/arrow/constants.js
 create mode 100644 app/isomorphic/assets/stylesheets/app.scss
 create mode 100644 app/isomorphic/assets/stylesheets/mixins.scss
 create mode 100644 app/isomorphic/assets/stylesheets/reset.scss
 create mode 100644 app/isomorphic/assets/stylesheets/viewports.m.css

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 7e478b754..144586fad 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -11,5 +11,8 @@
   },
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
-  }
+  },
+  "cSpell.words": [
+    "lightbox"
+  ]
 }
diff --git a/app/isomorphic/arrow/components/Atoms/AdPlaceholder/index.js b/app/isomorphic/arrow/components/Atoms/AdPlaceholder/index.js
index a9c02c9c6..9f936a4e2 100644
--- a/app/isomorphic/arrow/components/Atoms/AdPlaceholder/index.js
+++ b/app/isomorphic/arrow/components/Atoms/AdPlaceholder/index.js
@@ -16,10 +16,10 @@ AdPlaceholder.propTypes = {
   // height of ad
   height: PropTypes.string,
   // width of ad
-  width: PropTypes.string,
+  width: PropTypes.string
 };
 
 AdPlaceholder.defaultProps = {
   width: "720px",
-  height: "90px",
+  height: "90px"
 };
diff --git a/app/isomorphic/arrow/components/Atoms/Author/author.m.css b/app/isomorphic/arrow/components/Atoms/Author/author.m.css
index 96570aed4..8ce646b1e 100644
--- a/app/isomorphic/arrow/components/Atoms/Author/author.m.css
+++ b/app/isomorphic/arrow/components/Atoms/Author/author.m.css
@@ -4,7 +4,6 @@
   display: flex;
   align-items: center;
   color: var(--arrow-c-mono4);
-  margin-bottom: var(--arrow-spacing-xs);
 }
 
 .author-image {
@@ -24,10 +23,7 @@
 
 .author-name {
   margin: auto var(--arrow-spacing-xs) auto 0;
-}
-
-.bottom-fix {
-  margin-top: auto;
+  word-break: break-all;
 }
 
 .prefix {
@@ -60,6 +56,7 @@ html[dir="rtl"] {
 .dark {
   color: var(--arrow-c-mono4);
 }
+
 .light {
   color: var(--arrow-c-invert-mono4);
 }
diff --git a/app/isomorphic/arrow/components/Atoms/Author/index.js b/app/isomorphic/arrow/components/Atoms/Author/index.js
index cffb0a6b9..bcefa22e1 100644
--- a/app/isomorphic/arrow/components/Atoms/Author/index.js
+++ b/app/isomorphic/arrow/components/Atoms/Author/index.js
@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import get from "lodash/get";
+import get from "lodash.get";
 import { useStateValue } from "../../SharedContext";
 import { ResponsiveImage, Link } from "@quintype/components";
 import { getTextColor } from "../../../utils/utils";
@@ -11,13 +11,11 @@ import "./author.m.css";
 const AuthorBase = ({ story, hideAuthorImage, isBottom, prefix = "", config = {} }) => {
   const configData = useStateValue() || {};
   const isAuthor = get(configData, ["showAuthor"], true);
-  const {
-    "avatar-url": avatarUrl,
-    "avatar-s3-key": avatarS3Key,
-    name: authorName,
-    slug,
-  } = get(story, ["authors", "0"], "");
-  const isBottomClasses = isBottom ? "bottom-fix" : "";
+  const { "avatar-url": avatarUrl, "avatar-s3-key": avatarS3Key, name: authorName, slug } = get(
+    story,
+    ["authors", "0"],
+    ""
+  );
   const textColor = getTextColor(configData.theme);
   const mountAt = get(config, ["mountAt"], "");
 
@@ -26,18 +24,18 @@ const AuthorBase = ({ story, hideAuthorImage, isBottom, prefix = "", config = {}
       return null;
     }
     return (
-      <div styleName={`author-image ${dir}-image`} data-test-id="author-image">
+      <div styleName={`author-image ${dir}-image`} data-test-id="author-image" className="arr--author-image">
         <figure>
           {avatarS3Key ? (
             <ResponsiveImage
               slug={avatarS3Key}
-              aspect-ratio={[1, 1]}
+              aspectRatio={[1, 1]}
               defaultWidth={400}
               imgParams={{ auto: ["format", "compress"] }}
               alt={authorName}
             />
           ) : (
-            <img src={avatarUrl} />
+            <img src={avatarUrl} alt={authorName} />
           )}
         </figure>
       </div>
@@ -59,9 +57,8 @@ const AuthorBase = ({ story, hideAuthorImage, isBottom, prefix = "", config = {}
         <Link
           className="author-name arr-author-name arrow-component"
           href={`${mountAt}/author/` + slug}
-          styleName={`author ${isBottomClasses}`}
-          aria-label="author-name"
-        >
+          styleName="author"
+          aria-label="author-name">
           {isPrefix("ltr")}
           <div className="author-name" styleName={`author-name ${textColor}`} data-test-id="author-name">
             {authorName || story["author-name"]}
@@ -75,7 +72,7 @@ const AuthorBase = ({ story, hideAuthorImage, isBottom, prefix = "", config = {}
 
 function mapStateToProps(state) {
   return {
-    config: get(state, ["qt", "config"], {}),
+    config: get(state, ["qt", "config"], {})
   };
 }
 
@@ -90,11 +87,11 @@ AuthorBase.propTypes = {
   isBottom: PropTypes.bool,
   // fix prefix before the author name
   prefix: PropTypes.string,
-  config: PropTypes.object,
+  config: PropTypes.object
 };
 
 AuthorBase.defaultProps = {
   hideAuthorImage: false,
   isBottom: false,
-  prefix: "",
+  prefix: ""
 };
diff --git a/app/isomorphic/arrow/components/Atoms/Author/stories.js b/app/isomorphic/arrow/components/Atoms/Author/stories.js
index 7ff012a9d..cabc537f4 100644
--- a/app/isomorphic/arrow/components/Atoms/Author/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/Author/stories.js
@@ -12,9 +12,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 )
diff --git a/app/isomorphic/arrow/components/Atoms/AuthorCard/README.md b/app/isomorphic/arrow/components/Atoms/AuthorCard/README.md
index 6a919a5f9..cb4dadb85 100644
--- a/app/isomorphic/arrow/components/Atoms/AuthorCard/README.md
+++ b/app/isomorphic/arrow/components/Atoms/AuthorCard/README.md
@@ -4,11 +4,10 @@ Displays the author details as a card for the story page
 
 ### Use as a component
 
-
-####  default template
+#### default template
 
 ```jsx
- <AuthorCard story={story}/>
+<AuthorCard story={story} />
 ```
 
 #### Author card with right align template
@@ -26,22 +25,31 @@ Displays the author details as a card for the story page
 #### Author card with default align template
 
 ```jsx
-<AuthorCard story={story}  template="default" />
+<AuthorCard story={story} template="default" />
 ```
 
 #### Author card with left align template
 
 ```jsx
-<AuthorCard story={story}  template="leftAligned" />
+<AuthorCard story={story} template="leftAligned" />
 ```
+
 #### Author card with options
 
 ```jsx
-<AuthorCard story={story}  template="default" opts={hideImage: true, hideBio: true}/>
+<AuthorCard
+story={story}
+template="default"
+opts={
+  hideImage: true,
+  hideBio: true,
+  showLabels: false,
+  showGuestAuthorName: false,
+  showGuestAuthorImage: false,
+  localizedAuthorLabel: "Author",
+  localizedGuestAuthorLabel: "Guest Author"
+}
+/>
 ```
 
-
 <!-- PROPS -->
-
-
-
diff --git a/app/isomorphic/arrow/components/Atoms/AuthorCard/author-card.m.css b/app/isomorphic/arrow/components/Atoms/AuthorCard/author-card.m.css
index ed2772483..ebd1ca07e 100644
--- a/app/isomorphic/arrow/components/Atoms/AuthorCard/author-card.m.css
+++ b/app/isomorphic/arrow/components/Atoms/AuthorCard/author-card.m.css
@@ -1,9 +1,10 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 
 .author-card-wrapper {
   display: flex;
+  align-items: center;
+  flex-wrap: wrap;
 }
 
 .author-card-wrapper.centerAligned {
@@ -13,20 +14,34 @@
 
 .author-image-wrapper {
   display: flex;
-  margin-right: var(--arrow-spacing-m);
-  margin-bottom: var(--arrow-spacing-s);
+  align-items: center;
+}
+
+.default .author-image-wrapper a {
+  margin: 0 var(--arrow-spacing-s) 0 0;
+}
+
+.default .author-image-wrapper a:last-child {
+  margin: 0 var(--arrow-spacing-xs) 0 0;
+}
+
+.default .author-card-label {
+  font-size: var(--arrow-fs-xs);
+  line-height: var(--arrow-lh-1);
+  margin-right: var(--arrow-spacing-xxs);
   @media (min-width: mobile) {
-    margin-right: var(--arrow-spacing-l);
+    font-size: var(--arrow-fs-s);
   }
 }
 
-.default .author-image-wrapper {
-  margin: 0 12px 0 0;
+.guest-author-wrapper {
+  margin-top: var(--arrow-spacing-xs);
 }
 
 .centerAligned .author-image-wrapper {
   justify-content: center;
   margin-right: 0;
+  margin-bottom: var(--arrow-spacing-m);
 }
 
 .author-image {
@@ -34,6 +49,14 @@
   overflow: hidden;
 }
 
+.leftAligned .author-image {
+  margin-left: -64px;
+  overflow: hidden;
+  @media (min-width: mobile) {
+    margin-left: -100px;
+  }
+}
+
 .author-image figure {
   margin: 0;
 }
@@ -52,6 +75,7 @@
   border: solid 2px var(--arrow-c-light);
 }
 
+.default .author-image,
 .default .author-image img {
   height: 32px;
   width: 32px;
@@ -70,10 +94,9 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 0;
+  padding: var(--arrow-spacing-xs) var(--arrow-spacing-xs) var(--arrow-spacing-xs) 0;
   margin-left: var(--arrow-spacing-m);
   @media (min-width: mobile) {
-    padding: var(--arrow-spacing-xs) var(--arrow-spacing-xs) var(--arrow-spacing-xs) 0;
     margin-left: var(--arrow-spacing-l);
   }
 }
@@ -82,6 +105,14 @@
   margin-left: var(--arrow-spacing-s);
 }
 
+.leftAligned {
+  align-items: center;
+}
+
+.leftAligned .author-image-wrapper {
+  margin-bottom: unset;
+}
+
 .leftAligned .author-details-wrapper {
   margin-left: var(--arrow-spacing-m);
   @media (min-width: mobile) {
@@ -95,7 +126,6 @@
 }
 
 .author-name-share {
-  display: flex;
   align-items: center;
   font-size: var(--arrow-fs-xs);
   line-height: var(--arrow-lh-1);
@@ -105,43 +135,57 @@
   }
 }
 
+.default .author-name-share.single-author,
+.leftAligned .author-name-share.single-author {
+  display: flex;
+}
+
+.twitter-wrapper {
+  margin: 0 0 0 var(--arrow-spacing-xs);
+}
+
 html[dir="rtl"] {
-  .author-image-wrapper {
-    margin-left: var(--arrow-spacing-m);
-    margin-right: 0;
-    @media (min-width: mobile) {
-      margin-left: var(--arrow-spacing-l);
-    }
+  .default .multi-author-image {
+    margin-right: -24px;
+    margin-left: unset;
   }
 
-  .leftAligned .author-details-wrapper {
-    margin-right: var(--arrow-spacing-m);
-    margin-left: 0;
-    @media (min-width: mobile) {
-      margin-right: var(--arrow-spacing-l);
-    }
+  .default .author-card-label {
+    margin-right: unset;
+    margin-left: var(--arrow-spacing-xxs);
   }
 
-  .multi-author-image {
-    position: relative;
-    right: -100px;
+  .author-image {
+    margin-right: -100px;
+    margin-left: unset;
   }
 
-  .default .multi-author-image {
-    margin-left: -16px;
-    right: -12px;
-    @media (min-width: mobile) {
-      margin-left: -24px;
-      right: -12px;
-    }
+  .default .author-image-wrapper a {
+    margin: 0 0 0 var(--arrow-spacing-s);
+  }
+  .default .author-image-wrapper a:last-child {
+    margin: 0 0 0 var(--arrow-spacing-xs);
   }
 
+  .leftAligned .author-image-wrapper a {
+    margin-left: var(--arrow-spacing-m);
+  }
+  .leftAligned .author-image.multi-author-image {
+    margin-right: -64px;
+    margin-left: unset;
+  }
+
+  .leftAligned .author-image.first-author-image,
   .author-image.first-author-image {
-    position: static;
+    margin-right: 0;
+  }
+
+  .author-name-share span {
+    display: inline-block;
   }
 
-  .centerAligned .author-image-wrapper {
-    margin-left: 0;
+  .twitter-wrapper {
+    margin: 0 var(--arrow-spacing-xs) 0 0;
   }
 }
 
@@ -152,10 +196,6 @@ html[dir="rtl"] {
   }
 }
 
-.dot-wrapper {
-  margin: 0 var(--arrow-spacing-xxs) 0 var(--arrow-spacing-xs);
-}
-
 .author-bio {
   font-style: italic;
   line-height: var(--arrow-lh-5);
@@ -173,3 +213,12 @@ html[dir="rtl"] {
 .light {
   color: var(--arrow-c-invert-mono2);
 }
+
+.centerAligned .author-image-wrapper a {
+  margin-left: var(--arrow-spacing-l);
+  margin-right: var(--arrow-spacing-l);
+}
+
+.leftAligned .author-image-wrapper a {
+  margin-right: var(--arrow-spacing-m);
+}
diff --git a/app/isomorphic/arrow/components/Atoms/AuthorCard/author-card.test.js b/app/isomorphic/arrow/components/Atoms/AuthorCard/author-card.test.js
index e55c20a4c..203d717ac 100644
--- a/app/isomorphic/arrow/components/Atoms/AuthorCard/author-card.test.js
+++ b/app/isomorphic/arrow/components/Atoms/AuthorCard/author-card.test.js
@@ -18,20 +18,21 @@ const singleAuthorStory = {
       social: {
         twitter: {
           url: "https://www.twitter.com/sabqorg",
-          handle: "elonmusk",
-        },
+          handle: "elonmusk"
+        }
       },
       "avatar-url":
         "https://lh5.googleusercontent.com/-NhNrHEp1w4M/AAAAAAAAAAI/AAAAAAAAAAs/lzYwVY1BQdQ/photo.jpg?sz=50",
       "avatar-s3-key": null,
       "twitter-handle": null,
-      bio: "William Shakespeare was an English poet, playwright, and actor, widely regarded as the greatest writer in the English language and the world’s greatest dramatist. He is often called England’s national poet and the “Bard of Avon”",
+      bio:
+        "William Shakespeare was an English poet, playwright, and actor, widely regarded as the greatest writer in the English language and the world’s greatest dramatist. He is often called England’s national poet and the “Bard of Avon”",
       "contributor-role": {
         id: 873,
-        name: "Author",
-      },
-    },
-  ],
+        name: "Author"
+      }
+    }
+  ]
 };
 
 describe("default author card", () => {
@@ -49,7 +50,7 @@ describe("default author card", () => {
         <AuthorCard story={story} template="default" />
       </Provider>
     );
-    expect(wrapper.find({ "data-test-id": "author-card-default" }).prop("className")).toMatch(/default/);
+    expect(wrapper.find({ "data-test-id": "author-card-default" })).toHaveLength(2);
   });
   it("Should render centerAligned template", () => {
     const wrapper = mount(
diff --git a/app/isomorphic/arrow/components/Atoms/AuthorCard/index.js b/app/isomorphic/arrow/components/Atoms/AuthorCard/index.js
index f8e8be2ce..13bccc781 100644
--- a/app/isomorphic/arrow/components/Atoms/AuthorCard/index.js
+++ b/app/isomorphic/arrow/components/Atoms/AuthorCard/index.js
@@ -1,7 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import kebabCase from "lodash/kebabCase";
-import { Dot } from "../Dot/dot";
+import kebabCase from "lodash.kebabcase";
 import { ResponsiveImage, Link } from "@quintype/components";
 import { Twitter } from "../../Svgs/SocialIcons/twitter";
 import "./author-card.m.css";
@@ -14,106 +13,249 @@ const authorImage = (author) => {
     return null;
   }
   return (
-    <figure data-test-id="author-image">
+    <figure data-test-id="author-image" className="arr--author-image">
       {avatarS3Key ? (
         <ResponsiveImage
           slug={avatarS3Key}
-          aspect-ratio={[1, 1]}
+          aspectRatio={[1, 1]}
           defaultWidth={48}
           imgParams={{ auto: ["format", "compress"] }}
           alt={authorName}
         />
       ) : (
-        <img src={avatarUrl} />
+        <img src={avatarUrl} alt={authorName} />
       )}
     </figure>
   );
 };
 
-export const AuthorCard = ({ story = {}, template = "leftAligned", clazzName = "", opts = {}, mountAt = "" }) => {
-  const configData = useStateValue() || {};
-  const { authors = [] } = story;
+const AuthorsImage = ({ authors, mountAt = "" }) => {
+  const isSingleAuthor = authors.length === 1;
+
+  const authorsWithImages = authors.filter((author) => author["avatar-url"] || author["avatar-s3-key"]);
+  return (
+    <div data-test-id="author-image" styleName="author-image-wrapper" className="arr-author-image">
+      {authorsWithImages.map((author, index) => {
+        return (
+          <React.Fragment key={author.id}>
+            <Link href={`${mountAt}/author/` + author.slug} key={`author-image-${index}`} aria-label="author-image">
+              <div
+                styleName={`author-image ${!index ? "first-author-image" : ""} ${
+                  !isSingleAuthor ? "multi-author-image" : ""
+                }`}>
+                {authorImage(author)}
+              </div>
+            </Link>
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};
+
+AuthorsImage.propTypes = {
+  authors: PropTypes.array,
+  mountAt: PropTypes.string
+};
+
+const AuthorTwitter = ({ twitterUrl, textColor }) => {
+  return (
+    <>
+      {twitterUrl && (
+        <a href={twitterUrl} target="_blank" rel="noopener noreferrer">
+          <Twitter />
+        </a>
+      )}
+    </>
+  );
+};
+
+AuthorTwitter.propTypes = {
+  twitterUrl: PropTypes.string,
+  textColor: PropTypes.string
+};
+
+const AuthorBio = ({ author, textColor }) => {
+  return (
+    <div data-test-id="author-info" styleName="author-details-wrapper">
+      <p styleName={`author-bio ${textColor}`}>{author.bio}</p>
+    </div>
+  );
+};
+
+AuthorBio.propTypes = {
+  author: PropTypes.object,
+  textColor: PropTypes.string
+};
+
+const AuthorsName = ({ authors, mountAt = "", textColor, showTwitter = false }) => {
   const isSingleAuthor = authors.length === 1;
-  const { showBio = false, showImage = true, showName = true } = opts;
-  const textColor = getTextColor(configData.theme);
   let twitterUrl = "";
   if (isSingleAuthor) {
     twitterUrl = getAuthorTwitterUrl(authors[0]);
   }
+  const singleAuthorStyle = isSingleAuthor ? "single-author" : "";
 
   return (
     <div
-      data-test-id={`author-card-${kebabCase(template)}`}
-      className={clazzName}
-      styleName={`author-card-wrapper ${template}`}
-    >
+      data-test-id="author-name"
+      styleName={["author-name-share", singleAuthorStyle].join(" ")}
+      className="arr-name-share">
       {authors.map((author, index) => {
+        const spaceHolder = `,\xa0`;
         return (
-          <React.Fragment key={author.id}>
-            {showImage && (author["avatar-url"] || author["avatar-s3-key"]) && (
-              <div data-test-id="author-image" styleName="author-image-wrapper">
-                <Link href={`${mountAt}/author/` + author.slug} key={`author-image-${index}`} aria-label="author-image">
-                  <div
-                    styleName={`author-image ${!index ? "first-author-image" : ""} ${
-                      !isSingleAuthor ? "multi-author-image" : ""
-                    }`}
-                  >
-                    {authorImage(author)}
-                  </div>
-                </Link>
-              </div>
-            )}
-          </React.Fragment>
+          <>
+            {index !== 0 && (authors.length > 1 ? spaceHolder : "")}
+            <span key={author.id}>
+              <Link
+                href={`${mountAt}/author/` + author.slug}
+                aria-label="author-name"
+                styleName={`multiple-author-style ${textColor}`}>
+                {author.name}
+              </Link>
+            </span>
+          </>
         );
       })}
-      {showName && (
-        <div data-test-id="author-name" styleName="author-name-share">
-          {authors.map((author, index) => {
-            const spaceHolder = `,\xa0`;
-            return (
-              <>
-                {index !== 0 && (authors.length > 1 ? spaceHolder : "")}
-                <Link href={`${mountAt}/author/` + author.slug} aria-label="author-name">
-                  <h5 styleName={`multiple-author-style ${textColor}`}>{author.name}</h5>
-                </Link>
-              </>
-            );
-          })}
-          {isSingleAuthor && template !== "centerAligned" && (
-            <>
-              {twitterUrl && (
-                <>
-                  <div styleName="dot-wrapper">
-                    <Dot color={textColor} />
-                  </div>
-                  <a href={twitterUrl} target="_blank" rel="noopener noreferrer">
-                    <Twitter />
-                  </a>
-                </>
-              )}
-            </>
-          )}
+      {isSingleAuthor && showTwitter && (
+        <div styleName="twitter-wrapper">
+          <AuthorTwitter twitterUrl={twitterUrl} textColor={textColor} />
         </div>
       )}
-      <div data-test-id="author-info" styleName="author-details-wrapper">
-        {showBio && isSingleAuthor && template !== "default" && (
-          <p styleName={`author-bio ${textColor}`}>{authors[0].bio}</p>
-        )}
+    </div>
+  );
+};
+
+AuthorsName.propTypes = {
+  authors: PropTypes.array,
+  mountAt: PropTypes.string,
+  textColor: PropTypes.string,
+  showTwitter: PropTypes.boolean
+};
+
+const DefaultTemplate = ({ authors, clazzName = "", opts = {}, mountAt = "", textColor }) => {
+  const mainAuthors = [];
+  const guestAuthors = [];
+  const template = "default";
+
+  const {
+    showImage = true,
+    showName = true,
+    showLabels = false,
+    showGuestAuthorName = false,
+    showGuestAuthorImage = false,
+    localizedAuthorLabel,
+    localizedGuestAuthorLabel
+  } = opts;
+
+  const finalAuthorLabel = localizedAuthorLabel || "Author";
+  const finalGuestAuthorLabel = localizedGuestAuthorLabel || "Guest Author";
+
+  authors.forEach((author) => {
+    if (!author["contributor-role"] || author["contributor-role"].name === "Author") {
+      mainAuthors.push(author);
+    } else if (author["contributor-role"].name === "Guest Author") {
+      guestAuthors.push(author);
+    }
+  });
+
+  const isGuestAuthorsPresent = guestAuthors.length > 0;
+  return (
+    <>
+      <div data-test-id={`author-card-${kebabCase(template)}`} className={`${!showImage ? "author-card-wrapper" : ""}`}>
+        <div styleName={`author-card-wrapper ${template}`} className={clazzName}>
+          {showLabels && mainAuthors.length > 0 && (showName || showImage) && (
+            <span styleName={`${textColor} author-card-label`}>{`${finalAuthorLabel}\xa0:`}</span>
+          )}
+          {showImage && <AuthorsImage authors={mainAuthors} mountAt={mountAt} />}
+          {showName && <AuthorsName authors={mainAuthors} mountAt={mountAt} textColor={textColor} showTwitter={true} />}
+        </div>
+      </div>
+      <div
+        data-test-id={`author-card-${kebabCase(template)}`}
+        className={`${!showGuestAuthorImage ? "author-card-wrapper" : ""}`}>
+        <div
+          styleName={`author-card-wrapper ${template} ${isGuestAuthorsPresent ? "guest-author-wrapper" : ""}`}
+          className={clazzName}>
+          {showLabels && isGuestAuthorsPresent && (showGuestAuthorName || showGuestAuthorImage) && (
+            <span styleName={`${textColor} author-card-label`}>{`${finalGuestAuthorLabel}\xa0:`}</span>
+          )}
+          {showGuestAuthorImage && <AuthorsImage authors={guestAuthors} mountAt={mountAt} />}
+          {showGuestAuthorName && (
+            <AuthorsName authors={guestAuthors} mountAt={mountAt} textColor={textColor} showTwitter={true} />
+          )}
+        </div>
       </div>
+    </>
+  );
+};
+
+DefaultTemplate.propTypes = {
+  opts: PropTypes.shape({
+    showImage: PropTypes.bool,
+    showBio: PropTypes.bool,
+    showName: PropTypes.bool,
+    showLabels: PropTypes.bool,
+    showGuestAuthorName: PropTypes.bool,
+    showGuestAuthorImage: PropTypes.bool,
+    localizedAuthorLabel: PropTypes.string,
+    localizedGuestAuthorLabel: PropTypes.string
+  }),
+  mountAt: PropTypes.string,
+  clazzName: PropTypes.string,
+  textColor: PropTypes.string,
+  authors: PropTypes.array
+};
+
+export const AuthorCard = ({ story = {}, template = "default", clazzName = "", opts = {}, mountAt = "" }) => {
+  const configData = useStateValue() || {};
+  const { authors = [] } = story;
+
+  const { showBio = false, showImage = true, showName = true } = opts;
+
+  const textColor = getTextColor(configData.theme);
+
+  const isSingleAuthor = authors.length === 1; // have to remove
+
+  if (template === "default")
+    return (
+      <DefaultTemplate authors={authors} clazzName={clazzName} opts={opts} mountAt={mountAt} textColor={textColor} />
+    );
+
+  return (
+    <div
+      data-test-id={`author-card-${kebabCase(template)}`}
+      className={clazzName}
+      styleName={`author-card-wrapper ${template}`}>
+      {showImage && <AuthorsImage authors={authors} mountAt={mountAt} />}
+      {showName && (
+        <AuthorsName
+          authors={authors}
+          mountAt={mountAt}
+          textColor={textColor}
+          showTwitter={template !== "centerAligned"}
+        />
+      )}
+      {showBio && isSingleAuthor && <AuthorBio author={authors[0]} textColor={textColor} />}
     </div>
   );
 };
 
 AuthorCard.propTypes = {
   story: PropTypes.shape({
-    authors: PropTypes.array,
+    authors: PropTypes.array
   }),
   template: PropTypes.string,
   opts: PropTypes.shape({
     showImage: PropTypes.bool,
     showBio: PropTypes.bool,
     showName: PropTypes.bool,
+    showLabels: PropTypes.bool,
+    showGuestAuthorName: PropTypes.bool,
+    showGuestAuthorImage: PropTypes.bool,
+    localizedAuthorLabel: PropTypes.string,
+    localizedGuestAuthorLabel: PropTypes.string
   }),
   mountAt: PropTypes.string,
-  clazzName: PropTypes.string,
+  clazzName: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Atoms/AuthorCard/stories.js b/app/isomorphic/arrow/components/Atoms/AuthorCard/stories.js
index 14253b314..21a8d2782 100644
--- a/app/isomorphic/arrow/components/Atoms/AuthorCard/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/AuthorCard/stories.js
@@ -9,7 +9,7 @@ const authorTemplate = {
   "No value": "",
   default: "default",
   leftAligned: "leftAligned",
-  centerAligned: "centerAligned",
+  centerAligned: "centerAligned"
 };
 
 const story = generateStory();
@@ -24,20 +24,91 @@ const singleAuthorStory = {
       social: {
         twitter: {
           url: "https://www.twitter.com/sabqorg",
-          handle: "elonmusk",
-        },
+          handle: "elonmusk"
+        }
       },
       "avatar-url":
         "https://lh5.googleusercontent.com/-NhNrHEp1w4M/AAAAAAAAAAI/AAAAAAAAAAs/lzYwVY1BQdQ/photo.jpg?sz=50",
       "avatar-s3-key": null,
       "twitter-handle": "quintype_inc",
-      bio: "William Shakespeare was an English poet, playwright, and actor, widely regarded as the greatest writer in the English language and the world’s greatest dramatist. He is often called England’s national poet and the “Bard of Avon”",
+      bio:
+        "William Shakespeare was an English poet, playwright, and actor, widely regarded as the greatest writer in the English language and the world’s greatest dramatist. He is often called England’s national poet and the “Bard of Avon”",
       "contributor-role": {
         id: 873,
-        name: "Author",
+        name: "Author"
+      }
+    }
+  ]
+};
+
+const multipleAuthorsStory = {
+  ...story,
+  authors: [
+    ...story.authors,
+    {
+      id: 123981,
+      name: "Ravigopal Kesari",
+      slug: "ravigopal-kesari",
+      social: {
+        twitter: {
+          url: "https://www.twitter.com/sabqorg",
+          handle: "elonmusk"
+        }
       },
+      "avatar-url":
+        "https://lh5.googleusercontent.com/-NhNrHEp1w4M/AAAAAAAAAAI/AAAAAAAAAAs/lzYwVY1BQdQ/photo.jpg?sz=50",
+      "avatar-s3-key": null,
+      "twitter-handle": "quintype_inc",
+      bio:
+        "William Shakespeare was an English poet, playwright, and actor, widely regarded as the greatest writer in the English language and the world’s greatest dramatist. He is often called England’s national poet and the “Bard of Avon”",
+      "contributor-role": {
+        id: 873,
+        name: "Author"
+      }
+    },
+    {
+      id: 123982,
+      name: "Gopal krishnan",
+      slug: "ravigopal-kesari",
+      social: {
+        twitter: {
+          url: "https://www.twitter.com/sabqorg",
+          handle: "elonmusk"
+        }
+      },
+      "avatar-url":
+        "https://lh5.googleusercontent.com/-NhNrHEp1w4M/AAAAAAAAAAI/AAAAAAAAAAs/lzYwVY1BQdQ/photo.jpg?sz=50",
+      "avatar-s3-key": null,
+      "twitter-handle": "quintype_inc",
+      bio:
+        "William Shakespeare was an English poet, playwright, and actor, widely regarded as the greatest writer in the English language and the world’s greatest dramatist. He is often called England’s national poet and the “Bard of Avon”",
+      "contributor-role": {
+        id: 874,
+        name: "Author"
+      }
     },
-  ],
+    {
+      id: 123985,
+      name: "Virat Kohli",
+      slug: "ravigopal-kesari",
+      social: {
+        twitter: {
+          url: "https://www.twitter.com/sabqorg",
+          handle: "elonmusk"
+        }
+      },
+      "avatar-url":
+        "https://lh5.googleusercontent.com/-NhNrHEp1w4M/AAAAAAAAAAI/AAAAAAAAAAs/lzYwVY1BQdQ/photo.jpg?sz=50",
+      "avatar-s3-key": null,
+      "twitter-handle": "quintype_inc",
+      bio:
+        "William Shakespeare was an English poet, playwright, and actor, widely regarded as the greatest writer in the English language and the world’s greatest dramatist. He is often called England’s national poet and the “Bard of Avon”",
+      "contributor-role": {
+        id: 879,
+        name: "Author"
+      }
+    }
+  ]
 };
 
 withStore(
@@ -45,9 +116,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -59,6 +130,9 @@ withStore(
       opts={{
         showBio: boolean("bio", false),
         showImage: boolean("image", true),
+        showLabels: boolean("show labels", false),
+        showGuestAuthorName: boolean("show guest author name", false),
+        showGuestAuthorImage: boolean("show guest author image", false)
       }}
     />
   ))
@@ -69,6 +143,22 @@ withStore(
       opts={{
         showBio: boolean("bio", true),
         showImage: boolean("image", true),
+        showLabels: boolean("show labels", true),
+        showGuestAuthorName: boolean("show guest author name", false),
+        showGuestAuthorImage: boolean("show guest author image", false)
+      }}
+    />
+  ))
+  .add("Multiple author template", () => (
+    <AuthorCard
+      story={multipleAuthorsStory}
+      template={optionalSelect("Template Options", authorTemplate)}
+      opts={{
+        showBio: boolean("bio", true),
+        showImage: boolean("image", true),
+        showLabels: boolean("show labels", true),
+        showGuestAuthorName: boolean("show guest author name", false),
+        showGuestAuthorImage: boolean("show guest author image", false)
       }}
     />
   ));
diff --git a/app/isomorphic/arrow/components/Atoms/AuthorImage/author-image.m.css b/app/isomorphic/arrow/components/Atoms/AuthorImage/author-image.m.css
index d8e34a65c..4b31fa963 100644
--- a/app/isomorphic/arrow/components/Atoms/AuthorImage/author-image.m.css
+++ b/app/isomorphic/arrow/components/Atoms/AuthorImage/author-image.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 @value tablet from viewports;
 
@@ -21,9 +20,6 @@
     position: relative;
     width: 224px;
     height: 224px;
-    @media (min-width: tablet) {
-      width: 364px;
-    }
   }
 }
 
diff --git a/app/isomorphic/arrow/components/Atoms/AuthorImage/index.js b/app/isomorphic/arrow/components/Atoms/AuthorImage/index.js
index 40384a6f6..6731ce7f3 100644
--- a/app/isomorphic/arrow/components/Atoms/AuthorImage/index.js
+++ b/app/isomorphic/arrow/components/Atoms/AuthorImage/index.js
@@ -15,15 +15,11 @@ const authorWithImage = (author, templateStyle) => {
             alt={name}
             defaultWidth={250}
             widths={[250, 480]}
-            aspectRatio={[
-              [1, 1],
-              [1, 1],
-            ]}
-            sizes={"98vw"}
+            aspectRatio={[[1, 1], [1, 1]]}
             imgParams={{ auto: ["format", "compress"] }}
           />
         ) : avatarUrl ? (
-          <img src={avatarUrl} />
+          <img src={avatarUrl} alt={name} />
         ) : (
           <UserFallbackIcon />
         )}
@@ -50,10 +46,10 @@ AuthorImage.propTypes = {
     "avatar-url": PropTypes.string,
     "avatar-s3-key": PropTypes.string,
     name: PropTypes.string,
-    slug: PropTypes.string,
+    slug: PropTypes.string
   }),
   template: PropTypes.string,
-  config: PropTypes.object,
+  config: PropTypes.object
 };
 
 export default AuthorImage;
diff --git a/app/isomorphic/arrow/components/Atoms/AuthorImage/stories.js b/app/isomorphic/arrow/components/Atoms/AuthorImage/stories.js
index 70bdc9290..b6ae2c064 100644
--- a/app/isomorphic/arrow/components/Atoms/AuthorImage/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/AuthorImage/stories.js
@@ -9,9 +9,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
diff --git a/app/isomorphic/arrow/components/Atoms/AuthorWithTimestamp/author-with-timestamp.m.css b/app/isomorphic/arrow/components/Atoms/AuthorWithTimestamp/author-with-timestamp.m.css
index 40ba194e7..a39986e64 100644
--- a/app/isomorphic/arrow/components/Atoms/AuthorWithTimestamp/author-with-timestamp.m.css
+++ b/app/isomorphic/arrow/components/Atoms/AuthorWithTimestamp/author-with-timestamp.m.css
@@ -17,18 +17,12 @@
 .dot {
   position: relative;
   margin-right: var(--arrow-spacing-xs);
-  top: -6px;
-}
-.bottom-fix {
-  margin-top: auto;
+  top: -3px;
 }
+
 .dash {
   position: relative;
   margin-right: var(--arrow-spacing-xs);
-  top: -1px;
-  @media (--viewport-medium) {
-    top: -3px;
-  }
 }
 
 html[dir="rtl"] {
diff --git a/app/isomorphic/arrow/components/Atoms/AuthorWithTimestamp/index.js b/app/isomorphic/arrow/components/Atoms/AuthorWithTimestamp/index.js
index b2501aadf..741a414b1 100644
--- a/app/isomorphic/arrow/components/Atoms/AuthorWithTimestamp/index.js
+++ b/app/isomorphic/arrow/components/Atoms/AuthorWithTimestamp/index.js
@@ -1,49 +1,61 @@
 import React from "react";
-import get from "lodash/get";
+import get from "lodash.get";
 import { TimeStamp } from "../TimeStamp";
 import PropTypes from "prop-types";
 import { Author } from "../Author";
-import { Dot } from "../Dot/dot";
-import { Divider } from "../Divider/";
 import { useStateValue } from "../../SharedContext";
 
 import "./author-with-timestamp.m.css";
-import { getTextColor } from "../../../utils/utils";
+import { getTextColor, getSeparator } from "../../../utils/utils";
 import { ReadTime } from "../ReadTime";
 
-export const AuthorWithTime = ({ story, separator, isBottom, hideAuthorImage, prefix, config = {}, isLightTheme }) => {
+export const AuthorWithTime = ({
+  story,
+  separator,
+  isBottom,
+  hideAuthorImage,
+  prefix,
+  config = {},
+  isLightTheme,
+  collectionId
+}) => {
   const configState = useStateValue() || {};
   const isAuthor = get(config, ["showAuthor"], get(configState, ["showAuthor"], true));
   const isTime = get(config, ["showTime"], get(configState, ["showTime"], true));
   const isReadTime = get(configState, ["showReadTime"], true);
-  const isBottomClasses = isBottom ? "bottom-fix" : "";
-  const seperatorStyle = separator === "dot" ? "dot" : "dash";
+  const separatorStyle = separator === "dot" ? "dot" : "dash";
   const textColor = isLightTheme ? "light" : getTextColor(configState.theme);
-
-  const getSeparator = () => {
-    if (separator === "divider") {
-      return <Divider color={textColor} />;
-    }
-    return <Dot color={textColor} />;
-  };
+  const isSeparatorEnabled = isAuthor && (isTime || isReadTime);
 
   const getTimeStamp = () => {
-    if (!isTime) return null;
     return (
       <>
-        {isAuthor && (
-          <span className="arr-separator" styleName={`${seperatorStyle}`}>
-            {getSeparator()}
-          </span>
+        {isSeparatorEnabled && (
+          <div className="arr-separator" styleName={separatorStyle}>
+            {getSeparator(separator, textColor)}
+          </div>
+        )}
+        {isTime &&
+          (collectionId ? (
+            <div id={`publish-time-${collectionId}-${story.id}`}>
+              <TimeStamp story={story} config={config} />
+            </div>
+          ) : (
+            <TimeStamp story={story} config={config} />
+          ))}
+        {isReadTime && (
+          <ReadTime
+            story={story}
+            opts={{ ...config, showDotIndicator: isTime, separator }}
+            isLightTheme={isLightTheme}
+          />
         )}
-        <TimeStamp story={story} config={config} />
-        {isReadTime && <ReadTime story={story} opts={config} isLightTheme={isLightTheme} />}
       </>
     );
   };
 
   return (
-    <div className="arr--author-time" styleName={`author-time-wrapper ${isBottomClasses}`}>
+    <div className="arr--author-time" styleName="author-time-wrapper">
       {isAuthor ? (
         <>
           <Author story={story} isBottom hideAuthorImage={hideAuthorImage} prefix={prefix} />
@@ -68,6 +80,7 @@ AuthorWithTime.propTypes = {
   prefix: PropTypes.string,
   config: PropTypes.object,
   isLightTheme: PropTypes.bool,
+  collectionId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 
 AuthorWithTime.defaultProps = {
@@ -75,5 +88,5 @@ AuthorWithTime.defaultProps = {
   isBottom: false,
   hideAuthorImage: true,
   prefix: "",
-  isLightTheme: false,
+  isLightTheme: false
 };
diff --git a/app/isomorphic/arrow/components/Atoms/AuthorWithTimestamp/stories.js b/app/isomorphic/arrow/components/Atoms/AuthorWithTimestamp/stories.js
index 86743995d..419384b51 100644
--- a/app/isomorphic/arrow/components/Atoms/AuthorWithTimestamp/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/AuthorWithTimestamp/stories.js
@@ -7,8 +7,8 @@ import Readme from "./README.md";
 const story = generateStory();
 const config = {
   localizationConfig: {
-    localizedTimeToRead: "মিনিট পড়া",
-  },
+    localizedTimeToRead: "মিনিট পড়া"
+  }
 };
 
 withStore(
@@ -16,9 +16,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
diff --git a/app/isomorphic/arrow/components/Atoms/BulletPoint/index.js b/app/isomorphic/arrow/components/Atoms/BulletPoint/index.js
index 483479667..df340edae 100644
--- a/app/isomorphic/arrow/components/Atoms/BulletPoint/index.js
+++ b/app/isomorphic/arrow/components/Atoms/BulletPoint/index.js
@@ -15,5 +15,5 @@ export const BulletPoint = ({ bulletValue = "" }) => {
 };
 
 BulletPoint.propTypes = {
-  bulletValue: PropTypes.string,
+  bulletValue: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Atoms/CaptionAttribution/caption-attribution.m.css b/app/isomorphic/arrow/components/Atoms/CaptionAttribution/caption-attribution.m.css
index 7a9515057..295d77467 100644
--- a/app/isomorphic/arrow/components/Atoms/CaptionAttribution/caption-attribution.m.css
+++ b/app/isomorphic/arrow/components/Atoms/CaptionAttribution/caption-attribution.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 
 .caption {
diff --git a/app/isomorphic/arrow/components/Atoms/CaptionAttribution/index.js b/app/isomorphic/arrow/components/Atoms/CaptionAttribution/index.js
index 98ac4f5a3..5b8af75de 100644
--- a/app/isomorphic/arrow/components/Atoms/CaptionAttribution/index.js
+++ b/app/isomorphic/arrow/components/Atoms/CaptionAttribution/index.js
@@ -35,6 +35,6 @@ CaptionAttribution.propTypes = {
   story: shapeStory,
   element: PropTypes.shape({
     "image-attribution": PropTypes.string,
-    title: PropTypes.string,
-  }),
+    title: PropTypes.string
+  })
 };
diff --git a/app/isomorphic/arrow/components/Atoms/CaptionAttribution/stories.js b/app/isomorphic/arrow/components/Atoms/CaptionAttribution/stories.js
index 0dc104969..dd4924005 100644
--- a/app/isomorphic/arrow/components/Atoms/CaptionAttribution/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/CaptionAttribution/stories.js
@@ -10,31 +10,31 @@ const element = generateStoryElementData("image");
 withStore("Atoms/Caption Attribution", Readme)
   .add("Hero Image", () => {
     const config = {
-      theme: color("BG Color", "#ffffff"),
+      theme: color("BG Color", "#ffffff")
     };
     return <CaptionAttribution story={story} config={config} />;
   })
   .add("Image Element", () => {
     const config = {
-      theme: color("BG Color", "#ffffff"),
+      theme: color("BG Color", "#ffffff")
     };
     return <CaptionAttribution element={element} config={config} />;
   })
   .add("Caption", () => {
     const config = {
-      theme: color("BG Color", "#ffffff"),
+      theme: color("BG Color", "#ffffff")
     };
     const data = {
-      title: "Caption",
+      title: "Caption"
     };
     return <CaptionAttribution element={data} config={config} />;
   })
   .add("Attribution", () => {
     const config = {
-      theme: color("BG Color", "#ffffff"),
+      theme: color("BG Color", "#ffffff")
     };
     const data = {
-      "image-attribution": "Attribution",
+      "image-attribution": "Attribution"
     };
     return <CaptionAttribution element={data} config={config} />;
   });
diff --git a/app/isomorphic/arrow/components/Atoms/CollectionName/collection-name.m.css b/app/isomorphic/arrow/components/Atoms/CollectionName/collection-name.m.css
index 0cadcfac7..4407b8a9e 100644
--- a/app/isomorphic/arrow/components/Atoms/CollectionName/collection-name.m.css
+++ b/app/isomorphic/arrow/components/Atoms/CollectionName/collection-name.m.css
@@ -42,17 +42,29 @@
   content: " ";
   position: relative;
   flex: 1 1 auto;
-  border-top: 1px solid var(--arrow-c-mono5);
   margin-right: var(--arrow-spacing-l);
 }
 .collection-crossLine:after {
   content: " ";
   position: relative;
   flex: 1 1 auto;
-  border-top: 1px solid var(--arrow-c-mono5);
   margin-left: var(--arrow-spacing-l);
 }
 
+.dark.collection-crossLine:before {
+  border-top: 1px solid var(--arrow-c-mono5);
+}
+.light.collection-crossLine:before {
+  border-top: 1px solid var(--arrow-c-invert-mono2);
+}
+
+.dark.collection-crossLine:after {
+  border-top: 1px solid var(--arrow-c-mono5);
+}
+.light.collection-crossLine:after {
+  border-top: 1px solid var(--arrow-c-invert-mono2);
+}
+
 html[dir="rtl"] {
   .collection-borderLeft {
     .border-left {
diff --git a/app/isomorphic/arrow/components/Atoms/CollectionName/index.js b/app/isomorphic/arrow/components/Atoms/CollectionName/index.js
index d86558e78..07cf9fa7c 100644
--- a/app/isomorphic/arrow/components/Atoms/CollectionName/index.js
+++ b/app/isomorphic/arrow/components/Atoms/CollectionName/index.js
@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { PropTypes } from "prop-types";
 import { Link } from "@quintype/components";
 import { useStateValue } from "../../SharedContext";
-import get from "lodash/get";
+import get from "lodash.get";
 import { getTextColor, getSlug, rgbToHex, clientWidth } from "../../../utils/utils";
 
 import "./collection-name.m.css";
@@ -15,7 +15,7 @@ export const CollectionNameBase = ({
   collectionNameTemplate,
   headerLevel,
   customCollectionName = "",
-  navigate = true,
+  navigate = true
 }) => {
   const collectionTitle = useStateValue() || {};
   const showRowTitle = get(collectionTitle, ["showRowTitle"], true);
@@ -31,7 +31,7 @@ export const CollectionNameBase = ({
 
   const borderBottomFullStyle = templateStyle.includes("collection-borderBottomFull")
     ? `4px solid ${CollectionNameBorderColor}`
-    : "";
+    : "none";
 
   const borderBottomStyle = () => {
     return templateStyle.includes("collection-borderBottom") &&
@@ -39,9 +39,8 @@ export const CollectionNameBase = ({
       <div
         styleName="border-bottom"
         style={{
-          borderBottom: `4px solid ${CollectionNameBorderColor}`,
-        }}
-      ></div>
+          borderBottom: CollectionNameBorderColor ? `4px solid ${CollectionNameBorderColor}` : "none"
+        }}></div>
     ) : (
       ""
     );
@@ -85,23 +84,25 @@ export const CollectionNameBase = ({
         return "24px";
     }
   };
+
   return (
     <>
       {showRowTitle && collectionName && (
         <div
           className={`arr--collection-name arrow-component ${templateStyle}`}
-          styleName={`collection ${textColor} ${templateStyle}`}
+          styleName={`collection ${templateStyle} ${textColor}`}
           style={{
-            borderBottom: borderBottomFullStyle,
+            borderBottom: borderBottomFullStyle
           }}
-          data-test-id="collection-name"
-        >
+          data-test-id="collection-name">
           {templateStyle.includes("collection-borderLeft") && (
             <span
               styleName="border-left"
               className="arr-collection-name-border-left"
-              style={{ color: CollectionNameBorderColor, fontSize: getBorderHeight() }}
-            ></span>
+              style={{
+                color: CollectionNameBorderColor || "initial",
+                fontSize: getBorderHeight()
+              }}></span>
           )}
           {slug && !slug.includes(undefined) ? (
             <Link href={slug} aria-label="collection-name">
@@ -129,17 +130,17 @@ CollectionNameBase.propTypes = {
   /** Header tags ranging h1-h6, where h[headerLevel] */
   headerLevel: PropTypes.string,
   customCollectionName: PropTypes.string,
-  navigate: PropTypes.bool,
+  navigate: PropTypes.bool
 };
 
 CollectionNameBase.defaultProps = {
   collectionNameTemplate: "",
-  headerLevel: "3",
+  headerLevel: "3"
 };
 
 function mapStateToProps(state) {
   return {
-    config: get(state, ["qt", "config"], {}),
+    config: get(state, ["qt", "config"], {})
   };
 }
 
diff --git a/app/isomorphic/arrow/components/Atoms/CollectionName/stories.js b/app/isomorphic/arrow/components/Atoms/CollectionName/stories.js
index f486f6383..0b2435af0 100644
--- a/app/isomorphic/arrow/components/Atoms/CollectionName/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/CollectionName/stories.js
@@ -14,7 +14,7 @@ const collectionTemplates = {
   borderBottom: "borderBottom",
   borderLeft: "borderLeft",
   crossLine: "crossLine",
-  borderBottomFull: "borderBottomFull",
+  borderBottomFull: "borderBottomFull"
 };
 
 withStore(
@@ -34,13 +34,13 @@ withStore(
             collection: {
               slug: "health",
               name: "Health",
-              id: 15603,
+              id: 15603
             },
-            data: null,
-          },
-        ],
-      },
-    },
+            data: null
+          }
+        ]
+      }
+    }
   },
   Readme
 ).add("default", () => (
diff --git a/app/isomorphic/arrow/components/Atoms/Divider/__snapshots__/divider.test.js.snap b/app/isomorphic/arrow/components/Atoms/Divider/__snapshots__/divider.test.js.snap
index d1871e62d..d3bb76150 100644
--- a/app/isomorphic/arrow/components/Atoms/Divider/__snapshots__/divider.test.js.snap
+++ b/app/isomorphic/arrow/components/Atoms/Divider/__snapshots__/divider.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Divider should render 1`] = `
 <div
-  className="divider-m_light__w-7sy"
+  className="arr--divider divider-m_light__w-7sy"
 >
   <svg
     height="10"
diff --git a/app/isomorphic/arrow/components/Atoms/Divider/index.js b/app/isomorphic/arrow/components/Atoms/Divider/index.js
index f1872d9e0..467643582 100644
--- a/app/isomorphic/arrow/components/Atoms/Divider/index.js
+++ b/app/isomorphic/arrow/components/Atoms/Divider/index.js
@@ -4,7 +4,7 @@ import "./divider.m.css";
 
 export const Divider = ({ width = "1", height = "10", color = "light" }) => {
   return (
-    <div styleName={color}>
+    <div className="arr--divider" styleName={color}>
       <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height}>
         <path fill="inherit" d="M0 0h1v10H0z"></path>
       </svg>
@@ -16,5 +16,5 @@ Divider.propTypes = {
   /** height , width and color of the dot icon */
   color: PropTypes.string,
   width: PropTypes.string,
-  height: PropTypes.string,
+  height: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Atoms/Dot/dot.js b/app/isomorphic/arrow/components/Atoms/Dot/dot.js
index 0a43e291c..e369a4674 100644
--- a/app/isomorphic/arrow/components/Atoms/Dot/dot.js
+++ b/app/isomorphic/arrow/components/Atoms/Dot/dot.js
@@ -4,7 +4,7 @@ import "./dot.m.css";
 
 export const Dot = ({ width = "3px", height = "3px", color = "light" }) => {
   return (
-    <div styleName={color}>
+    <div className="arr--dot" styleName={color}>
       <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 3 3">
         <circle cx="87" cy="9" r="1" fill="inherit" fillRule="nonzero" transform="translate(-86 -8)" />
       </svg>
@@ -16,5 +16,5 @@ Dot.propTypes = {
   /** height , width and color of the dot icon */
   color: PropTypes.string,
   width: PropTypes.string,
-  height: PropTypes.string,
+  height: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Atoms/ExtendedLoadMore/index.js b/app/isomorphic/arrow/components/Atoms/ExtendedLoadMore/index.js
index ac916d586..a4e8a0456 100644
--- a/app/isomorphic/arrow/components/Atoms/ExtendedLoadMore/index.js
+++ b/app/isomorphic/arrow/components/Atoms/ExtendedLoadMore/index.js
@@ -50,9 +50,9 @@ export const ExtendedLoadMore = ({ config, componentName, WithArrowConfig, withS
 
     const Component = getTemplate(componentName);
 
-    const { items } = await (
-      await fetch(`/api/v1/collections/${collectionSlug}?item-type=story&offset=${offset}&limit=${limit}`)
-    ).json();
+    const { items } = await (await fetch(
+      `/api/v1/collections/${collectionSlug}?item-type=story&offset=${offset}&limit=${limit}`
+    )).json();
 
     if (items.length) {
       const updatedOffset = parseInt(offset) + parseInt(limit);
@@ -69,13 +69,13 @@ export const ExtendedLoadMore = ({ config, componentName, WithArrowConfig, withS
         Component: WithArrowConfig(withSubsequentLoad(Component, limit || 10, true)),
         props: {
           collection: {
-            items,
+            items
           },
           isLoadMoreVisible: false,
-          config,
+          config
         },
-        componentName,
-      },
+        componentName
+      }
     ];
 
     setComponents(updatedCompList);
@@ -99,8 +99,7 @@ export const ExtendedLoadMore = ({ config, componentName, WithArrowConfig, withS
         className="arr--button"
         styleName={`button ${textColor} default`}
         style={componentStyles(componentName)}
-        onClick={addComponent}
-      >
+        onClick={addComponent}>
         {btnText}
       </div>
     </>
@@ -111,5 +110,5 @@ ExtendedLoadMore.propTypes = {
   componentName: PropTypes.string,
   config: PropTypes.object,
   WithArrowConfig: PropTypes.func,
-  withSubsequentLoad: PropTypes.func,
+  withSubsequentLoad: PropTypes.func
 };
diff --git a/app/isomorphic/arrow/components/Atoms/FallbackImage/index.js b/app/isomorphic/arrow/components/Atoms/FallbackImage/index.js
index a8cb4be5c..c8877f036 100644
--- a/app/isomorphic/arrow/components/Atoms/FallbackImage/index.js
+++ b/app/isomorphic/arrow/components/Atoms/FallbackImage/index.js
@@ -26,5 +26,5 @@ export const FallbackImage = ({ slug }) => {
 };
 
 FallbackImage.propTypes = {
-  slug: PropTypes.string,
+  slug: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Atoms/Headline/headline.m.css b/app/isomorphic/arrow/components/Atoms/Headline/headline.m.css
index b2283e562..4ecf2801b 100644
--- a/app/isomorphic/arrow/components/Atoms/Headline/headline.m.css
+++ b/app/isomorphic/arrow/components/Atoms/Headline/headline.m.css
@@ -1,4 +1,4 @@
-@custom-media --viewport-medium (width >= 768px);
+@custom-media --viewport-medium (width >=768px);
 
 .wrapper {
   margin-bottom: 6px;
@@ -8,6 +8,7 @@
   margin-bottom: var(--arrow-spacing-xxs);
   color: var(--arrow-c-mono2);
   font-weight: var(--arrow-fw-semi-bold);
+
   @media (--viewport-medium) {
     margin-bottom: var(--arrow-spacing-xs);
   }
@@ -21,6 +22,46 @@
 .dark {
   color: var(--arrow-c-mono2);
 }
+
 .light {
   color: var(--arrow-c-invert-mono2);
 }
+
+.icon-wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+
+.live-icon::before {
+  content: "\25C9";
+  position: relative;
+  font-size: var(--arrow-fs-s);
+  color: var(--arrow-c-accent3);
+  animation: blink 1s linear infinite;
+  margin-right: var(--arrow-spacing-xs);
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  75% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+html[dir="rtl"] {
+  .live-icon::before {
+    margin-right: 0;
+    margin-left: var(--arrow-spacing-xs);
+  }
+}
diff --git a/app/isomorphic/arrow/components/Atoms/Headline/index.js b/app/isomorphic/arrow/components/Atoms/Headline/index.js
index 6db4712d5..85c168b14 100644
--- a/app/isomorphic/arrow/components/Atoms/Headline/index.js
+++ b/app/isomorphic/arrow/components/Atoms/Headline/index.js
@@ -1,22 +1,17 @@
 import React from "react";
+import { useSelector } from "react-redux";
 import PropTypes from "prop-types";
 import { Link } from "@quintype/components";
 import { useStateValue } from "../../SharedContext";
-import get from "lodash/get";
+import get from "lodash.get";
 import { getTextColor, isExternalStory, getStoryUrl } from "../../../utils/utils";
 import { PremiumStoryIcon } from "../PremiumStoryIcon";
-import LiveIcon from "../../Svgs/liveicon";
 
 import "./headline.m.css";
 
-export const Headline = ({ story, headerLevel, premiumStoryIconConfig = {}, isLink }) => {
+export const Headline = ({ story, headerLevel, premiumStoryIconConfig = {}, isLink, queryParam = {} }) => {
   const configData = useStateValue() || {};
-  const {
-    iconColor = "#F7B500",
-    iconStyle = "star",
-    enablePremiumStoryIcon = false,
-    showLiveIcon = false,
-  } = premiumStoryIconConfig;
+  const { iconColor = "#F7B500", iconStyle = "star", enablePremiumStoryIcon = false } = premiumStoryIconConfig;
   const alternateHeadline = get(story, ["alternative", "home", "default", "headline"]);
   const premiumStory = enablePremiumStoryIcon && get(story, ["access"]) === "subscription";
   const headline = alternateHeadline || story.headline;
@@ -38,35 +33,39 @@ export const Headline = ({ story, headerLevel, premiumStoryIconConfig = {}, isLi
   };
 
   const textColor = getTextColor(configData.theme);
-  const wrapperClass = premiumStory ? "wrapper" : "";
   const iconSize = "24px";
-
+  const getLiveIconConfig = useSelector((state) => get(state, ["qt", "data", "showLiveIcon"], false));
+  const showLiveIcon = get(premiumStoryIconConfig, ["showLiveIcon"], getLiveIconConfig);
   const enableLiveIcon =
     showLiveIcon && story["story-template"] === "live-blog" && !get(story, ["metadata", "is-closed"], false);
+  const liveIconStyle = premiumStory ? { position: "relative", top: positionHeadline() } : {};
+  const wrapperClass = premiumStory || enableLiveIcon ? "wrapper" : "";
 
   return (
     <div className="arrow-component arr--headline" styleName={wrapperClass} data-test-id="headline">
-      {premiumStory && (
-        <PremiumStoryIcon
-          width={iconSize}
-          height={iconSize}
-          color={iconColor}
-          iconType={iconStyle}
-          positionTop={positionHeadline()}
-        />
+      {(enableLiveIcon || premiumStory) && (
+        <span styleName="icon-wrapper">
+          {premiumStory && (
+            <PremiumStoryIcon
+              width={iconSize}
+              height={iconSize}
+              color={iconColor}
+              iconType={iconStyle}
+              positionTop={positionHeadline()}
+            />
+          )}
+          {enableLiveIcon && <span style={liveIconStyle} styleName="live-icon"></span>}
+        </span>
       )}
       {isLink ? (
-        <Link href={getStoryUrl(story, `/${story.slug}`)} externalLink={isExternalStory(story)} aria-label="headline">
-          <HeaderTag styleName={`headline ${textColor}`}>
-            {enableLiveIcon && <LiveIcon />}
-            {headline}
-          </HeaderTag>
+        <Link
+          href={getStoryUrl(story, `/${story.slug}`, queryParam)}
+          externalLink={isExternalStory(story)}
+          aria-label="headline">
+          <HeaderTag styleName={`headline ${textColor}`}>{headline}</HeaderTag>
         </Link>
       ) : (
-        <HeaderTag styleName={`headline ${textColor}`}>
-          {enableLiveIcon && <LiveIcon />}
-          {headline}
-        </HeaderTag>
+        <HeaderTag styleName={`headline ${textColor}`}>{headline}</HeaderTag>
       )}
     </div>
   );
@@ -80,12 +79,15 @@ Headline.propTypes = {
   premiumStoryIconConfig: PropTypes.shape({
     iconColor: PropTypes.string,
     iconType: PropTypes.string,
-    enablePremiumStoryIcon: PropTypes.bool,
+    enablePremiumStoryIcon: PropTypes.bool
   }),
   isLink: PropTypes.bool,
+  queryParam: PropTypes.shape({
+    utmContent: PropTypes.string
+  })
 };
 
 Headline.defaultProps = {
   headerLevel: "6",
-  isLink: true,
+  isLink: true
 };
diff --git a/app/isomorphic/arrow/components/Atoms/Headline/stories.js b/app/isomorphic/arrow/components/Atoms/Headline/stories.js
index 29e51c727..745e8e569 100644
--- a/app/isomorphic/arrow/components/Atoms/Headline/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/Headline/stories.js
@@ -15,14 +15,14 @@ const headerLevelOptions = {
   h3: 3,
   h4: 4,
   h5: 5,
-  h6: 6,
+  h6: 6
 };
 
 const iconType = {
   Star: "star",
   Crown: "crown",
   Lock: "lock",
-  Key: "key",
+  Key: "key"
 };
 
 withStore(
@@ -30,9 +30,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 ).add(
@@ -44,7 +44,7 @@ withStore(
       premiumStoryIconConfig={{
         iconColor: color("Icon color", "#F7B500"),
         iconStyle: optionalSelect("Icon Types", iconType),
-        enablePremiumStoryIcon: boolean("Enable Premium Icon", true),
+        enablePremiumStoryIcon: boolean("Enable Premium Icon", true)
       }}
     />
   ),
diff --git a/app/isomorphic/arrow/components/Atoms/HeroImage/hero-image.m.css b/app/isomorphic/arrow/components/Atoms/HeroImage/hero-image.m.css
index 1ab55f20e..e4e163b84 100644
--- a/app/isomorphic/arrow/components/Atoms/HeroImage/hero-image.m.css
+++ b/app/isomorphic/arrow/components/Atoms/HeroImage/hero-image.m.css
@@ -1,7 +1,7 @@
 @custom-media --viewport-medium (width >= 768px);
 
 .hero-image {
-  margin: var(--arrow-spacing-xs) 0;
+  margin-bottom: var(--arrow-spacing-xs);
   padding-right: 0;
   flex-grow: 1;
   position: relative;
diff --git a/app/isomorphic/arrow/components/Atoms/HeroImage/index.js b/app/isomorphic/arrow/components/Atoms/HeroImage/index.js
index 13a6e535b..e0a9d551a 100644
--- a/app/isomorphic/arrow/components/Atoms/HeroImage/index.js
+++ b/app/isomorphic/arrow/components/Atoms/HeroImage/index.js
@@ -1,5 +1,5 @@
-import { Link, ResponsiveHeroImage } from "@quintype/components";
-import get from "lodash/get";
+import { Link, ResponsiveImage, ResponsiveHeroImage } from "@quintype/components";
+import get from "lodash.get";
 import PropTypes from "prop-types";
 import React from "react";
 import { useSelector } from "react-redux";
@@ -21,6 +21,8 @@ export const HeroImage = ({
   defaultFallback,
   isStoryPageImage,
   config,
+  queryParam = {},
+  initialAltImage
 }) => {
   const { fallbackImageUrl = "" } = useStateValue() || {};
   const { StoryTemplateIcon = () => null } = config;
@@ -51,8 +53,8 @@ export const HeroImage = ({
   const imageAspectRatio = isMobile ? mobileAspectRatio : desktopAspectRatio;
   const imagePadding = isMobile ? getPadding(mobileAspectRatio) : getPadding(desktopAspectRatio);
   const slug =
-    get(story, ["hero-image-s3-key"]) ||
-    get(story, ["alternative", "home", "default", "hero-image", "hero-image-s3-key"]);
+    get(story, ["alternative", "home", "default", "hero-image", "hero-image-s3-key"]) ||
+    get(story, ["hero-image-s3-key"]);
   const hyperLink = get(story, ["hero-image-hyperlink"], "");
   const imageCaption = get(story, ["hero-image-caption"], "");
   const imageAltText = imageCaption ? removeHtmlTags(imageCaption) : get(story, ["headline"], "");
@@ -65,10 +67,9 @@ export const HeroImage = ({
             styleName={`image ${getPlaceholderStyleName}`}
             className="arr--responsive-hero-image"
             style={{
-              paddingTop: imagePadding + `%`,
-            }}
-          >
-            <img className="qt-image" data-src={`${fallbackImageUrl}`} alt="image-fallback"></img>
+              paddingTop: imagePadding + `%`
+            }}>
+            <img className="qt-image" data-src={fallbackImageUrl} alt="image-fallback" />
           </figure>
         );
       }
@@ -81,9 +82,8 @@ export const HeroImage = ({
               className="arr--fallback-hero-image"
               data-test-id="arr--fallback-hero-image"
               style={{
-                paddingTop: imagePadding + `%`,
-              }}
-            >
+                paddingTop: imagePadding + `%`
+              }}>
               <StoryTemplateIcon storyTemplate={story["story-template"]} />
               <FallbackImage />
             </div>
@@ -96,17 +96,28 @@ export const HeroImage = ({
         <figure
           styleName={`image ${getPlaceholderStyleName}`}
           className="arr--responsive-hero-image"
-          style={{ paddingTop: imagePadding + `%` }}
-        >
+          style={{ paddingTop: imagePadding + `%` }}>
           <StoryTemplateIcon storyTemplate={story["story-template"]} />
-          <ResponsiveHeroImage
-            story={story}
-            aspectRatio={imageAspectRatio}
-            defaultWidth={defaultWidth}
-            widths={widths}
-            imgParams={{ auto: ["format", "compress"], fit: "max" }}
-            alt={imageAltText}
-          />
+          {initialAltImage ? (
+            <ResponsiveImage
+              slug={slug}
+              metadata={story["hero-image-metadata"]}
+              alt={imageAltText}
+              aspectRatio={imageAspectRatio}
+              defaultWidth={defaultWidth}
+              widths={widths}
+              imgParams={{ auto: ["format", "compress"], fit: "max" }}
+            />
+          ) : (
+            <ResponsiveHeroImage
+              story={story}
+              aspectRatio={imageAspectRatio}
+              defaultWidth={defaultWidth}
+              widths={widths}
+              imgParams={{ auto: ["format", "compress"], fit: "max" }}
+              alt={imageAltText}
+            />
+          )}
         </figure>
         {isStoryPageImage && hyperLink && <HyperLink hyperLink={hyperLink} />}
       </>
@@ -119,19 +130,17 @@ export const HeroImage = ({
       <div
         className="arr--hero-image"
         data-test-id="arr--hero-image"
-        styleName={`${heroImageClass} ${fullBleed} ${heroImageMobClasses}`}
-      >
+        styleName={`${heroImageClass} ${fullBleed} ${heroImageMobClasses}`}>
         {fallbackImage()}
       </div>
     ) : (
       <Link
         className="arr--hero-image"
         data-test-id="arr--hero-image"
-        href={getStoryUrl(story, `/${story.slug}`)}
+        href={getStoryUrl(story, `/${story.slug}`, queryParam)}
         externalLink={isExternalStory(story)}
         styleName={`${heroImageClass} ${fullBleed} ${heroImageMobClasses}`}
-        aria-label="fallback-hero-image"
-      >
+        aria-label="fallback-hero-image">
         {fallbackImage()}
       </Link>
     ))
@@ -160,14 +169,15 @@ HeroImage.propTypes = {
   isHorizontalWithImageLast: PropTypes.bool,
   isStoryPageImage: PropTypes.bool,
   config: PropTypes.object,
+  queryParam: PropTypes.shape({
+    utmContent: PropTypes.string
+  }),
+  initialAltImage: PropTypes.bool
 };
 
 HeroImage.defaultProps = {
   FullBleed: true,
-  aspectRatio: [
-    [1, 1],
-    [16, 9],
-  ],
+  aspectRatio: [[1, 1], [16, 9]],
   defaultWidth: 480,
   widths: [250, 480, 640],
   isHorizontal: false,
@@ -176,4 +186,5 @@ HeroImage.defaultProps = {
   isStoryPageImage: false,
   isHorizontalWithImageLast: false,
   config: {},
+  initialAltImage: false
 };
diff --git a/app/isomorphic/arrow/components/Atoms/HeroImage/stories.js b/app/isomorphic/arrow/components/Atoms/HeroImage/stories.js
index 203fcf3f3..6cf480efb 100644
--- a/app/isomorphic/arrow/components/Atoms/HeroImage/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/HeroImage/stories.js
@@ -12,20 +12,11 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
   .add("Full Bleed Image", () => <HeroImage story={story} />)
-  .add("With Padding Image", () => (
-    <HeroImage
-      story={story}
-      FullBleed={false}
-      aspectRatio={[
-        [1, 1],
-        [16, 9],
-      ]}
-    />
-  ));
+  .add("With Padding Image", () => <HeroImage story={story} FullBleed={false} aspectRatio={[[1, 1], [16, 9]]} />);
diff --git a/app/isomorphic/arrow/components/Atoms/Hyperlink/index.js b/app/isomorphic/arrow/components/Atoms/Hyperlink/index.js
index d519e6ae1..f2c97da1f 100644
--- a/app/isomorphic/arrow/components/Atoms/Hyperlink/index.js
+++ b/app/isomorphic/arrow/components/Atoms/Hyperlink/index.js
@@ -13,13 +13,12 @@ export const HyperLink = ({ hyperLink = "" }) => {
       className="arr--hyperlink-button"
       target="_blank"
       rel="noopener noreferrer"
-      styleName="hyperlink-button"
-    >
+      styleName="hyperlink-button">
       <HyperLinkIcon />
     </Link>
   );
 };
 
 HyperLink.propTypes = {
-  hyperLink: PropTypes.string,
+  hyperLink: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Atoms/LoadMoreTarget/index.js b/app/isomorphic/arrow/components/Atoms/LoadMoreTarget/index.js
index d2234f6a0..8fbfec3b2 100644
--- a/app/isomorphic/arrow/components/Atoms/LoadMoreTarget/index.js
+++ b/app/isomorphic/arrow/components/Atoms/LoadMoreTarget/index.js
@@ -1,14 +1,19 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { getTextColor } from "../../../utils/utils";
+import "./load-more-target.m.css";
 
-export const LoadMoreTarget = ({ collection, componentName, offset, limit }) => {
+export const LoadMoreTarget = ({ collection, componentName, offset, limit, theme = "" }) => {
+  const textColor = getTextColor(theme);
   return (
     <div
       id={`ELM-${collection.id}`}
-      data-collection-slug={collection.slug}
+      data-collection-slug={collection["slug"]}
       data-component-name={componentName}
       data-collection-offset={offset}
       data-collection-limit={limit}
+      className={`elm-${componentName.toLowerCase()}`}
+      styleName={textColor}
     />
   );
 };
@@ -16,9 +21,10 @@ export const LoadMoreTarget = ({ collection, componentName, offset, limit }) =>
 LoadMoreTarget.propTypes = {
   collection: PropTypes.shape({
     id: PropTypes.string,
-    slug: PropTypes.string,
+    slug: PropTypes.string
   }),
   componentName: PropTypes.string,
   offset: PropTypes.number,
   limit: PropTypes.number,
+  theme: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Atoms/LoadMoreTarget/load-more-target.m.css b/app/isomorphic/arrow/components/Atoms/LoadMoreTarget/load-more-target.m.css
new file mode 100644
index 000000000..edc0b54a6
--- /dev/null
+++ b/app/isomorphic/arrow/components/Atoms/LoadMoreTarget/load-more-target.m.css
@@ -0,0 +1,7 @@
+.light :global(.arr--button) {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.dark :global(.arr--button) {
+  color: var(--arrow-c-mono2);
+}
diff --git a/app/isomorphic/arrow/components/Atoms/Loadmore/index.js b/app/isomorphic/arrow/components/Atoms/Loadmore/index.js
index af5c2e3bb..9a98ddba0 100644
--- a/app/isomorphic/arrow/components/Atoms/Loadmore/index.js
+++ b/app/isomorphic/arrow/components/Atoms/Loadmore/index.js
@@ -10,7 +10,7 @@ export const LoadmoreButton = ({
   template = "SubsequentLoadCount",
   onClick,
   navigate,
-  qtConfig,
+  qtConfig
 }) => {
   const { showButton = true, buttonText = "Read More", theme = "", customUrlPath = "" } = config;
   if (!showButton) return null;
@@ -37,5 +37,5 @@ LoadmoreButton.propTypes = {
   config: PropTypes.object,
   onClick: PropTypes.func,
   navigate: PropTypes.func,
-  qtConfig: PropTypes.object,
+  qtConfig: PropTypes.object
 };
diff --git a/app/isomorphic/arrow/components/Atoms/Loadmore/stories.js b/app/isomorphic/arrow/components/Atoms/Loadmore/stories.js
index 9732db7d6..592bc6fc8 100644
--- a/app/isomorphic/arrow/components/Atoms/Loadmore/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/Loadmore/stories.js
@@ -9,7 +9,7 @@ const collection = generateCollection();
 const buttonOptions = {
   NavigateToPage: "NavigateToPage",
   SubsequentLoadCount: "SubsequentLoadCount",
-  CustomUrlPath: "CustomUrlPath",
+  CustomUrlPath: "CustomUrlPath"
 };
 
 withStore("Atoms/Button", {}, Readme).add("Buttons Options", () => (
diff --git a/app/isomorphic/arrow/components/Atoms/MagazineCoverImage/index.js b/app/isomorphic/arrow/components/Atoms/MagazineCoverImage/index.js
index 91f5b0e71..e4c0c9598 100644
--- a/app/isomorphic/arrow/components/Atoms/MagazineCoverImage/index.js
+++ b/app/isomorphic/arrow/components/Atoms/MagazineCoverImage/index.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { LazyLoadImages, ResponsiveImage, Link } from "@quintype/components";
 import PropTypes from "prop-types";
-import get from "lodash/get";
+import get from "lodash.get";
 import { getSlug } from "../../../utils/utils";
 import "./magazine-cover-image.m.css";
 import { FallbackImage } from "../FallbackImage";
@@ -13,7 +13,7 @@ export const MagazineCoverImageCard = ({ collection, config = {} }) => {
   const {
     "cover-image-url": coverUrl,
     "cover-image-s3-key": covers3Key,
-    "cover-image-metadata": coverImageMetaData,
+    "cover-image-metadata": coverImageMetaData
   } = coverImageData;
 
   const slug = magazineSlug && collection && getSlug(collection, config);
@@ -53,9 +53,9 @@ MagazineCoverImageCard.propTypes = {
     "cover-image-url": PropTypes.string,
     "cover-image-s3-key": PropTypes.string,
     "cover-image-metadata": PropTypes.string,
-    slug: PropTypes.string,
+    slug: PropTypes.string
   }),
   config: PropTypes.shape({
-    magazineSlug: PropTypes.string,
-  }),
+    magazineSlug: PropTypes.string
+  })
 };
diff --git a/app/isomorphic/arrow/components/Atoms/MagazineCoverImage/stories.js b/app/isomorphic/arrow/components/Atoms/MagazineCoverImage/stories.js
index 512b293e2..7fb650000 100644
--- a/app/isomorphic/arrow/components/Atoms/MagazineCoverImage/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/MagazineCoverImage/stories.js
@@ -13,9 +13,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 ).add("MagazineCoverImage", () => <MagazineCoverImageCard collection={collection} config={config} />);
diff --git a/app/isomorphic/arrow/components/Atoms/PremiumStoryIcon/index.js b/app/isomorphic/arrow/components/Atoms/PremiumStoryIcon/index.js
index b5fd05c08..40817b995 100644
--- a/app/isomorphic/arrow/components/Atoms/PremiumStoryIcon/index.js
+++ b/app/isomorphic/arrow/components/Atoms/PremiumStoryIcon/index.js
@@ -23,5 +23,5 @@ PremiumStoryIcon.propTypes = {
   height: PropTypes.string,
   color: PropTypes.string,
   iconType: PropTypes.string,
-  positionTop: PropTypes.string,
+  positionTop: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Atoms/PublishDetail/index.js b/app/isomorphic/arrow/components/Atoms/PublishDetail/index.js
index d95fd597a..44175df55 100644
--- a/app/isomorphic/arrow/components/Atoms/PublishDetail/index.js
+++ b/app/isomorphic/arrow/components/Atoms/PublishDetail/index.js
@@ -1,16 +1,19 @@
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import get from "lodash/get";
 
 import { getTextColor, getTimeStamp, timestampToFormat } from "../../../utils/utils";
 import { ReadTime } from "../ReadTime";
 
 import "./publish-details.m.css";
 import { useStateValue } from "../../SharedContext";
-import { useSelector } from "react-redux";
 
 export const PublishDetails = ({ story, opts = {}, template = "", timezone = null }) => {
   const [direction, setDirection] = useState("ltr");
+  // Hardcoding the language code or else the dates will be formatted based on language code
+  // Most of the publishers want dates to be formatted in english.
+  // TODO: Format numbers based on publisher preference
+
+  const languageCode = "en";
   useEffect(() => {
     const htmlElement = document.getElementsByTagName("HTML");
     if (htmlElement && htmlElement.length > 0 && htmlElement[0].dir.toLocaleLowerCase() === "rtl") {
@@ -19,38 +22,39 @@ export const PublishDetails = ({ story, opts = {}, template = "", timezone = nul
   }, []);
 
   const config = useStateValue() || {};
-  const { "first-published-at": firstPublishAt, "last-published-at": lastPublish, "updated-at": updatedAt } = story;
+  const { "first-published-at": firstPublishAt, "last-published-at": lastPublish } = story;
   const { enableUpdatedTime, enablePublishedTime, showReadTime, localizedPublishedOn, localizedUpdatedOn } = opts;
-  const time = lastPublish || firstPublishAt;
+  const time = firstPublishAt || lastPublish;
   const textColor = getTextColor(config.theme);
-  const languageCode = useSelector((state) => get(state, ["qt", "config", "language", "ietf-code"], "en"));
   const timeStampProps =
     direction === "rtl"
       ? { ...opts, direction: direction, isTimeFirst: true, showTime: true }
       : { ...opts, direction: direction, showTime: true };
-
   return (
-    <div data-test-id="timeStamp" className="arrow-component arr-publish-details" styleName={`timeStamp ${textColor}`}>
-      <div data-test-id="publishDetails" styleName={`publish-details ${textColor}`}>
-        {enablePublishedTime && time && (
-          <>
-            {localizedPublishedOn || "Published on"} :&nbsp;
-            <div styleName="date">
-              {getTimeStamp(time, timestampToFormat, timeStampProps, languageCode, template, timezone)}
-            </div>
-            {showReadTime && <ReadTime story={story} opts={opts} />}
-          </>
-        )}
-      </div>
-      {enableUpdatedTime && updatedAt && (
+    <div data-test-id="timeStamp" className="arrow-component arr--publish-details" styleName={`timeStamp ${textColor}`}>
+      {enablePublishedTime && (
+        <div data-test-id="publishDetails" styleName={`publish-details ${textColor}`}>
+          {localizedPublishedOn || "Published on"} :&nbsp;
+          <div styleName="date">
+            {getTimeStamp(time, timestampToFormat, timeStampProps, languageCode, template, timezone)}
+          </div>
+          {!enableUpdatedTime && showReadTime && (
+            <ReadTime story={story} opts={{ ...opts, showDotIndicator: enablePublishedTime }} />
+          )}
+        </div>
+      )}
+      {enableUpdatedTime && (
         <div data-test-id="updateDetails" styleName={`update-details ${textColor}`}>
           {localizedUpdatedOn || "Updated on"} :&nbsp;
           <div styleName="date">
-            {getTimeStamp(updatedAt, timestampToFormat, timeStampProps, languageCode, template, timezone)}
+            {getTimeStamp(lastPublish, timestampToFormat, timeStampProps, languageCode, template, timezone)}
           </div>
-          {showReadTime && <ReadTime story={story} opts={opts} />}
+          {showReadTime && <ReadTime story={story} opts={{ ...opts, showDotIndicator: enableUpdatedTime }} />}
         </div>
       )}
+      {!enablePublishedTime && !enableUpdatedTime && showReadTime && (
+        <ReadTime story={story} opts={{ ...opts, showDotIndicator: enableUpdatedTime }} />
+      )}
     </div>
   );
 };
@@ -61,13 +65,13 @@ PublishDetails.propTypes = {
     "first-published-at": PropTypes.number,
     "last-published-at": PropTypes.number,
     "read-time": PropTypes.number,
-    "updated-at": PropTypes.number,
+    "updated-at": PropTypes.number
   }),
   timezone: PropTypes.string,
   template: PropTypes.string,
   opts: PropTypes.shape({
     showReadTime: PropTypes.bool,
     enableUpdatedTime: PropTypes.bool,
-    enablePublishedTime: PropTypes.bool,
-  }),
+    enablePublishedTime: PropTypes.bool
+  })
 };
diff --git a/app/isomorphic/arrow/components/Atoms/PublishDetail/publish-details.m.css b/app/isomorphic/arrow/components/Atoms/PublishDetail/publish-details.m.css
index 71acfd156..070643e9a 100644
--- a/app/isomorphic/arrow/components/Atoms/PublishDetail/publish-details.m.css
+++ b/app/isomorphic/arrow/components/Atoms/PublishDetail/publish-details.m.css
@@ -1,8 +1,8 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 
 .timeStamp {
+  margin-top: var(--arrow-spacing-m);
   font-size: var(--arrow-fs-tiny);
   @media (min-width: mobile) {
     font-size: var(--arrow-fs-xs);
@@ -25,9 +25,7 @@
 
 .update-details {
   display: flex;
-  margin-top: var(--arrow-spacing-xs);
-  align-items: baseline;
-  flex-wrap: wrap;
+  margin-top: var(--arrow-spacing-s);
 }
 .dot-indicator {
   display: flex;
diff --git a/app/isomorphic/arrow/components/Atoms/PublishDetail/publish-details.test.js b/app/isomorphic/arrow/components/Atoms/PublishDetail/publish-details.test.js
index 1e1256cad..39f0674bc 100644
--- a/app/isomorphic/arrow/components/Atoms/PublishDetail/publish-details.test.js
+++ b/app/isomorphic/arrow/components/Atoms/PublishDetail/publish-details.test.js
@@ -1,22 +1,35 @@
 import * as React from "react";
 import { mount } from "enzyme";
 import expect from "expect";
-import { generateStory } from "../../Fixture/index";
+import { generateStory, generateStore } from "../../Fixture/index";
 import { PublishDetails } from "./index";
+import { Provider } from "react-redux";
 
 const story = generateStory();
 
 describe("default author card", () => {
   it("Should render default publish details componen", () => {
-    const wrapper = mount(<PublishDetails story={story} />);
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <PublishDetails story={story} />
+      </Provider>
+    );
     expect(wrapper.find({ "data-test-id": "timeStamp" }).prop("className")).toMatch(/timeStamp/);
   });
   it("Should render without updated time", () => {
-    const wrapper = mount(<PublishDetails story={story} opts={{ enableUpdatedTime: false }} />);
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <PublishDetails story={story} opts={{ enableUpdatedTime: false }} />
+      </Provider>
+    );
     expect(wrapper.find({ "data-test-id": "update-details" }).length).toEqual(0);
   });
   it("Should render without read time", () => {
-    const wrapper = mount(<PublishDetails story={story} opts={{ showReadTime: false }} />);
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <PublishDetails story={story} opts={{ showReadTime: false }} />
+      </Provider>
+    );
     expect(wrapper.find({ "data-test-id": "read-time" }).length).toEqual(0);
   });
 });
diff --git a/app/isomorphic/arrow/components/Atoms/PublishDetail/stories.js b/app/isomorphic/arrow/components/Atoms/PublishDetail/stories.js
index 6c7234132..01c9ac9e6 100644
--- a/app/isomorphic/arrow/components/Atoms/PublishDetail/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/PublishDetail/stories.js
@@ -16,7 +16,7 @@ withStore("Atoms/Publish Details", {}, Readme).add("Default", () => (
       enablePublishedTime: boolean("Enable Published Time", true),
       localizedPublishedOn: text("Localise Published On", "ಪ್ರಕಟಿಸಲಾಗಿದೆ"),
       localizedUpdatedOn: text("Localise Updated On", "ನವೀಕರಿಸಲಾಗಿದೆ"),
-      timeFormat: "12hours",
+      timeFormat: "12hours"
     }}
   />
 ));
diff --git a/app/isomorphic/arrow/components/Atoms/ReadTime/index.js b/app/isomorphic/arrow/components/Atoms/ReadTime/index.js
index 08526d7b8..7de90fa5f 100644
--- a/app/isomorphic/arrow/components/Atoms/ReadTime/index.js
+++ b/app/isomorphic/arrow/components/Atoms/ReadTime/index.js
@@ -1,38 +1,39 @@
-import get from "lodash/get";
+import get from "lodash.get";
 import React from "react";
 import PropTypes from "prop-types";
 import { useSelector } from "react-redux";
-import { getTextColor } from "../../../utils/utils";
+import { getTextColor, getSeparator } from "../../../utils/utils";
 import { useStateValue } from "../../SharedContext";
 import "./read-time.m.css";
-import { Dot } from "../Dot/dot";
 
 export const ReadTime = ({ story, opts = {}, isLightTheme = false }) => {
   const config = useStateValue() || {};
   const showReadTime = get(config, ["showReadTime"]) || get(opts, ["showReadTime"], true);
   const readTime = get(story, ["read-time"], 0);
-  const textColor = isLightTheme ? "light" : getTextColor(config.theme);
 
+  if (!showReadTime || !readTime) return null;
+  const { showDotIndicator = true } = opts;
+  const textColor = isLightTheme ? "light" : getTextColor(config.theme);
   const isLocalizedNumber = useSelector((state) => get(state, ["qt", "config", "isLocalizedNumber"], false));
   const languageCode = isLocalizedNumber
     ? useSelector((state) => get(state, ["qt", "config", "language", "ietf-code"], "en"))
     : "en";
 
-  if (!showReadTime || !readTime) return null;
-
   const timeToRead =
     get(opts, ["localizedTimeToRead"]) || get(opts, ["localizationConfig", "localizedTimeToRead"]) || "min read";
-
+  const separator = get(opts, ["separator"], "");
+  const separatorStyle = separator === "divider" ? "dash" : "dot";
   return (
     <>
       <div
         className="arrow-component arr--read-time"
         styleName={`read-time-wrapper ${textColor}`}
-        data-test-id="read-time"
-      >
-        <span styleName="dot-indicator" className="read-time-indicator">
-          <Dot color={textColor} />
-        </span>
+        data-test-id="read-time">
+        {showDotIndicator && (
+          <div styleName={separatorStyle} className="read-time-indicator">
+            {getSeparator(separator, textColor)}
+          </div>
+        )}
         <span>
           {readTime.toLocaleString(`${languageCode}`)} {timeToRead}
         </span>
@@ -43,11 +44,11 @@ export const ReadTime = ({ story, opts = {}, isLightTheme = false }) => {
 
 ReadTime.propTypes = {
   story: PropTypes.shape({
-    "read-time": PropTypes.number,
+    "read-time": PropTypes.number
   }),
   opts: PropTypes.shape({
-    showReadTime: PropTypes.bool,
+    showReadTime: PropTypes.bool
   }),
   isLightTheme: PropTypes.bool,
-  languageCode: PropTypes.string,
+  languageCode: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Atoms/ReadTime/read-time.m.css b/app/isomorphic/arrow/components/Atoms/ReadTime/read-time.m.css
index 75e51369d..cf4e5eb58 100644
--- a/app/isomorphic/arrow/components/Atoms/ReadTime/read-time.m.css
+++ b/app/isomorphic/arrow/components/Atoms/ReadTime/read-time.m.css
@@ -5,8 +5,15 @@
   font-size: var(--arrow-fs-tiny);
 }
 
-.dot-indicator {
-  padding: 0 var(--arrow-spacing-xs) var(--arrow-spacing-xs);
+.dot {
+  margin: 0 var(--arrow-spacing-xs);
+  top: -3px;
+  position: relative;
+}
+
+.dash {
+  position: relative;
+  margin: 0 var(--arrow-spacing-xs);
 }
 
 .dark {
@@ -16,9 +23,3 @@
 .light {
   color: var(--arrow-c-invert-mono4);
 }
-
-html[dir="rtl"] {
-  .read-time-wrapper {
-    margin-right: var(--arrow-spacing-xs);
-  }
-}
diff --git a/app/isomorphic/arrow/components/Atoms/ReadTime/stories.js b/app/isomorphic/arrow/components/Atoms/ReadTime/stories.js
index ff3b389a8..e386c63d9 100644
--- a/app/isomorphic/arrow/components/Atoms/ReadTime/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/ReadTime/stories.js
@@ -12,7 +12,7 @@ withStore("Atoms/Read Time", {}, Readme).add("default", () => {
     <ReadTime
       story={story}
       opts={{
-        showReadTime: boolean("Show Read Time", true),
+        showReadTime: boolean("Show Read Time", true)
       }}
     />
   );
diff --git a/app/isomorphic/arrow/components/Atoms/ScrollSnap/SliderArrow/index.js b/app/isomorphic/arrow/components/Atoms/ScrollSnap/SliderArrow/index.js
index e69ffee11..ce9154682 100644
--- a/app/isomorphic/arrow/components/Atoms/ScrollSnap/SliderArrow/index.js
+++ b/app/isomorphic/arrow/components/Atoms/ScrollSnap/SliderArrow/index.js
@@ -29,8 +29,7 @@ export const SliderArrow = ({ selectedIndex, previousClick, nextClick, noOfItems
         <button
           onClick={previousClick}
           styleName={`arrow left-arrow-${textColor} ${getLeftArrowClassName}`}
-          className={`left-arrow ${getLeftArrowClassName}`}
-        >
+          className={`left-arrow ${getLeftArrowClassName}`}>
           <LeftArrow color={textColor === "dark" ? "#fff" : "#333"} />
         </button>
       ) : null}
@@ -39,8 +38,7 @@ export const SliderArrow = ({ selectedIndex, previousClick, nextClick, noOfItems
         <button
           onClick={nextClick}
           styleName={`arrow right-arrow-${textColor} ${getRightArrowClassName}`}
-          className={`right-arrow ${getRightArrowClassName}`}
-        >
+          className={`right-arrow ${getRightArrowClassName}`}>
           <RightArrow color={textColor === "dark" ? "#fff" : "#333"} />
         </button>
       ) : null}
@@ -55,5 +53,5 @@ SliderArrow.propTypes = {
   previousClick: func,
   nextClick: func,
   selectedIndex: number,
-  languageDirection: string,
+  languageDirection: string
 };
diff --git a/app/isomorphic/arrow/components/Atoms/ScrollSnap/SliderIndicator/index.js b/app/isomorphic/arrow/components/Atoms/ScrollSnap/SliderIndicator/index.js
index 2b04a6bd8..936463333 100644
--- a/app/isomorphic/arrow/components/Atoms/ScrollSnap/SliderIndicator/index.js
+++ b/app/isomorphic/arrow/components/Atoms/ScrollSnap/SliderIndicator/index.js
@@ -21,13 +21,11 @@ export const SliderIndicator = ({ indicatorItems, indicatorClick, selectedIndex,
           key={`slider-${index}`}
           styleName="indicator"
           className="indicator"
-          onClick={(e) => indicatorClick(e, index)}
-        >
+          onClick={(e) => indicatorClick(e, index)}>
           <button
             styleName={`indicator-button indicator-${indicatorType} indicator-${indicatorType}-${textColor}`}
             className={`indicator-button indicator-${indicatorType}`}
-            aria-pressed={selectedIndex === index ? "true" : "false"}
-          ></button>
+            aria-pressed={selectedIndex === index ? "true" : "false"}></button>
         </li>
       ))}
     </ul>
@@ -39,5 +37,5 @@ SliderIndicator.propTypes = {
   perView: number,
   indicatorType: string,
   indicatorClick: func,
-  selectedIndex: number,
+  selectedIndex: number
 };
diff --git a/app/isomorphic/arrow/components/Atoms/ScrollSnap/index.js b/app/isomorphic/arrow/components/Atoms/ScrollSnap/index.js
index 813d9a7e2..c568705d4 100644
--- a/app/isomorphic/arrow/components/Atoms/ScrollSnap/index.js
+++ b/app/isomorphic/arrow/components/Atoms/ScrollSnap/index.js
@@ -11,7 +11,7 @@ import "./scroll-snap.m.css";
 const smoothScroll = (node, topOrLeft, horizontal) => {
   node.scrollTo({
     [horizontal ? "left" : "top"]: topOrLeft,
-    behavior: "smooth",
+    behavior: "smooth"
   });
 };
 
@@ -121,8 +121,7 @@ export const ScrollSnap = ({ children, isArrow, interval, isInfinite, pauseOnHov
         styleName="wrapper"
         className="scroll-snap-wrapper"
         onMouseEnter={pauseAutoPlay}
-        onMouseLeave={pauseAutoPlay}
-      >
+        onMouseLeave={pauseAutoPlay}>
         <div ref={scroller} styleName="carousel" className="scroll-snap-carousel">
           {children}
         </div>
@@ -156,7 +155,7 @@ ScrollSnap.defaultProps = {
   interval: 4000,
   pauseOnHover: true,
   perView: 1,
-  slideIndicator: "dots",
+  slideIndicator: "dots"
 };
 
 ScrollSnap.propTypes = {
@@ -166,5 +165,5 @@ ScrollSnap.propTypes = {
   interval: number,
   pauseOnHover: bool,
   perView: number,
-  slideIndicator: string,
+  slideIndicator: string
 };
diff --git a/app/isomorphic/arrow/components/Atoms/SectionTag/index.js b/app/isomorphic/arrow/components/Atoms/SectionTag/index.js
index 830c1d6ee..a2e99d3a6 100644
--- a/app/isomorphic/arrow/components/Atoms/SectionTag/index.js
+++ b/app/isomorphic/arrow/components/Atoms/SectionTag/index.js
@@ -1,5 +1,5 @@
 import React from "react";
-import get from "lodash/get";
+import get from "lodash.get";
 import { Link } from "@quintype/components";
 import { useStateValue } from "../../SharedContext";
 import PropTypes from "prop-types";
@@ -32,17 +32,17 @@ export const SectionTag = ({ story, template = "", borderColor = "", isLightThem
         className="section-tag arrow-component"
         styleName={`${textColor} ${templateStyle}`}
         style={{
-          backgroundColor: templateStyle.includes("section-solid") ? sectionTagBorderColor : "",
-        }}
-      >
+          backgroundColor: templateStyle.includes("section-solid") ? sectionTagBorderColor : "initial"
+        }}>
         {templateStyle.includes("section-borderLeft") && (
-          <span styleName="border-left" style={{ color: sectionTagBorderColor }}></span>
+          <span styleName="border-left" style={{ color: sectionTagBorderColor || "initial" }}></span>
         )}
-        {section["display-name"] || section.name}
+        {section["display-name"] || section["name"]}
         <div
           styleName="border-bottom"
-          style={{ backgroundColor: `${template === "solid" ? "" : sectionTagBorderColor}` }}
-        ></div>
+          style={{
+            backgroundColor: template !== "solid" && sectionTagBorderColor ? sectionTagBorderColor : "initial"
+          }}></div>
       </div>
     </Link>
   );
@@ -54,10 +54,10 @@ SectionTag.propTypes = {
   template: PropTypes.oneOf(["", "borderBottomSml", "borderLeft", "solid"]),
   borderColor: PropTypes.string,
   solidBorderColor: PropTypes.string,
-  isLightTheme: PropTypes.bool,
+  isLightTheme: PropTypes.bool
 };
 
 SectionTag.defaultProps = {
   template: "",
-  isLightTheme: false,
+  isLightTheme: false
 };
diff --git a/app/isomorphic/arrow/components/Atoms/SectionTag/stories.js b/app/isomorphic/arrow/components/Atoms/SectionTag/stories.js
index fc3bdf693..db2b146cd 100644
--- a/app/isomorphic/arrow/components/Atoms/SectionTag/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/SectionTag/stories.js
@@ -14,7 +14,7 @@ const templateStyles = {
   Default: "",
   Solid: "solid",
   "Border Bottom Small": "borderBottomSml",
-  "Border Left": "borderLeft",
+  "Border Left": "borderLeft"
 };
 
 withStore("Atoms/SectionTag", {}, Readme).add("Default", () => (
diff --git a/app/isomorphic/arrow/components/Atoms/SocialSharePopup/index.js b/app/isomorphic/arrow/components/Atoms/SocialSharePopup/index.js
index c48150d25..b268bb81d 100644
--- a/app/isomorphic/arrow/components/Atoms/SocialSharePopup/index.js
+++ b/app/isomorphic/arrow/components/Atoms/SocialSharePopup/index.js
@@ -23,7 +23,7 @@ export const SocialSharePopup = ({
   whatsappUrl = "",
   theme,
   closePopup = "",
-  iconType = "plain-color-svg",
+  iconType = "plain-color-svg"
 }) => {
   const textColor = getTextColor(theme);
   const iconColor = textColor === "dark" ? "#000000" : "#ffffff";
@@ -57,5 +57,5 @@ SocialSharePopup.propTypes = {
   primaryColor: PropTypes.string,
   closePopup: PropTypes.bool,
   theme: PropTypes.string,
-  iconType: PropTypes.string,
+  iconType: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Atoms/SocialSharePopup/social-share-popup.m.css b/app/isomorphic/arrow/components/Atoms/SocialSharePopup/social-share-popup.m.css
index 93a9b6a06..af40400c7 100644
--- a/app/isomorphic/arrow/components/Atoms/SocialSharePopup/social-share-popup.m.css
+++ b/app/isomorphic/arrow/components/Atoms/SocialSharePopup/social-share-popup.m.css
@@ -1,4 +1,4 @@
-@import "../../../../../assets/arrow/stylesheets/mixins.scss";
+@import "../../../../assets/stylesheets/mixins.scss";
 .share-popup-wrapper {
   z-index: var(--zIndex-social-popup);
 }
diff --git a/app/isomorphic/arrow/components/Atoms/SocialSharePopup/social-share-popup.test.js b/app/isomorphic/arrow/components/Atoms/SocialSharePopup/social-share-popup.test.js
index e5b85f603..072dc538a 100644
--- a/app/isomorphic/arrow/components/Atoms/SocialSharePopup/social-share-popup.test.js
+++ b/app/isomorphic/arrow/components/Atoms/SocialSharePopup/social-share-popup.test.js
@@ -11,7 +11,7 @@ describe("Social Share Template", () => {
       whatsappUrl: "https://twitter.com/",
       theme: "#ffff",
       iconType: "plain-svg",
-      closePopup: "",
+      closePopup: ""
     };
     const wrapper = shallow(<SocialSharePopup {...data} />);
     expect(wrapper).toMatchSnapshot();
@@ -25,7 +25,7 @@ describe("Social Share Template", () => {
       whatsappUrl: "https://twitter.com/",
       theme: "#ffff",
       iconType: "plain-svg",
-      closePopup: "",
+      closePopup: ""
     };
     const wrapper = shallow(<SocialSharePopup {...data} />);
     expect(wrapper).toMatchSnapshot();
@@ -40,7 +40,7 @@ describe("Social Share Template", () => {
       theme: "#ffff",
       iconType: "plain-svg",
       vertical: true,
-      closePopup: "",
+      closePopup: ""
     };
     const wrapper = shallow(<SocialSharePopup {...data} />);
     expect(wrapper).toMatchSnapshot();
@@ -55,7 +55,7 @@ describe("Social Share Template", () => {
       theme: "#ffff",
       iconType: "plain-svg",
       vertical: true,
-      closePopup: "",
+      closePopup: ""
     };
     const wrapper = shallow(<SocialSharePopup {...data} />);
     expect(wrapper).toMatchSnapshot();
@@ -70,7 +70,7 @@ describe("Social Share Template", () => {
       theme: "#ffff",
       iconType: "plain-svg",
       vertical: true,
-      closePopup: "",
+      closePopup: ""
     };
     const wrapper = shallow(<SocialSharePopup {...data} />);
     expect(wrapper).toMatchSnapshot();
@@ -85,7 +85,7 @@ describe("Social Share Template", () => {
       theme: "",
       iconType: "plain-svg",
       vertical: true,
-      closePopup: "",
+      closePopup: ""
     };
     const wrapper = shallow(<SocialSharePopup {...data} />);
     expect(wrapper).toMatchSnapshot();
diff --git a/app/isomorphic/arrow/components/Atoms/SocialSharePopup/stories.js b/app/isomorphic/arrow/components/Atoms/SocialSharePopup/stories.js
index ca276b703..1e70b11f9 100644
--- a/app/isomorphic/arrow/components/Atoms/SocialSharePopup/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/SocialSharePopup/stories.js
@@ -14,6 +14,6 @@ const props = {
   publisherUrl: undefined,
   theme: "#ffffff",
   title: "Ready Player One review – Spielberg ",
-  twitterUrl: "https://twitter.com",
+  twitterUrl: "https://twitter.com"
 };
 withStore("Atoms/Social Share Popup", {}, Readme).add("default", () => <SocialSharePopup {...props} />);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/AlsoRead/also-read.m.css b/app/isomorphic/arrow/components/Atoms/StoryElements/AlsoRead/also-read.m.css
index 0a1253b23..cb919e913 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/AlsoRead/also-read.m.css
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/AlsoRead/also-read.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 
 .card-image img {
@@ -31,7 +30,6 @@
 .alsoread-default .headline {
   padding-top: var(--arrow-spacing-xs);
   font-size: var(--arrow-fs-s);
-  color: var(--arrow-c-dark);
   @media (min-width: mobile) {
     padding-top: 0;
     font-size: var(--arrow-fs-l);
@@ -41,7 +39,6 @@
 .alsoread-textLeftAlign .headline {
   margin-top: var(--arrow-spacing-xs);
   font-size: var(--arrow-fs-m);
-  color: var(--arrow-c-brand1);
   @media (min-width: mobile) {
     font-size: var(--arrow-fs-l);
   }
@@ -50,7 +47,6 @@
 .alsoread-imageRightAlign .headline {
   font-size: var(--arrow-fs-m);
   margin-right: var(--arrow-spacing-m);
-  color: var(--arrow-c-dark);
   @media (min-width: mobile) {
     font-size: var(--arrow-fs-l);
   }
@@ -81,7 +77,7 @@
 }
 
 .alsoread-default {
-  border: solid 1px var(--arrow-c-mono5);
+  border: solid 1px var(--arrow-c-brand5);
   display: block;
   padding: var(--arrow-spacing-m);
   @media (min-width: mobile) {
@@ -128,6 +124,7 @@ html[dir="rtl"] {
     margin-right: 0;
   }
 }
+
 .dark {
   color: var(--arrow-c-mono1);
 }
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/AlsoRead/also-read.test.js b/app/isomorphic/arrow/components/Atoms/StoryElements/AlsoRead/also-read.test.js
index 178a747f6..be90d92ed 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/AlsoRead/also-read.test.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/AlsoRead/also-read.test.js
@@ -44,7 +44,7 @@ describe("Alsoread Story Element", () => {
       </Provider>
     );
     expect(wrapper.html()).toBe(
-      '<a data-test-id="also-read" aria-label="also-read" class="arrow-component arr--also-read-element also-read-m_alsoread-default__3cYER "><div class="also-read-m_card-image-wrapper__3GFzu"><div class="arr--fallback-also-read also-read-m_image__2jdRP"><div class="arr--fallback-image fallback-m_image__1GYCJ fallback-m_image-position__3KddP"><figure class="arr--fallback-svg fallback-m_fallback-svg__tK9fL"><svg width="40" height="30" viewBox="0 0 102 76" version="1.1"><g id="demo-home-copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-377.000000, -314.000000)"><g id="Group-13" transform="translate(377.000000, 314.000000)"><path d="M43.2,49.7 L62.2,19.2 L87.2,59.4 L17,59.4 L32.8,39.4 L43.2,49.7 Z M29.9,28.6 C25.8683213,28.6 22.6,25.3316787 22.6,21.3 C22.6,17.2683213 25.8683213,14 29.9,14 C33.9316787,14 37.2,17.2683213 37.2,21.3 C37.2,25.3316787 33.9316787,28.6 29.9,28.6 Z" id="Combined-Shape" fill="#99B0CB" fill-rule="nonzero"></path><rect id="Rectangle-19" stroke="#99B0CB" stroke-width="3" x="1.5" y="1.5" width="99" height="73" rx="3"></rect></g></g></svg></figure></div></div></div><div class="also-read-m_content-wrapper__26AZX"><div class="also-read-m_headline__VzF-c" style="color:#3333">How is the coronavirus impacting people with disabilities?</div></div></a>'
+      '<a data-test-id="also-read" aria-label="also-read" class="arrow-component arr--also-read-element also-read-m_alsoread-default__3cYER "><div class="also-read-m_card-image-wrapper__3GFzu"><div class="arr--fallback-also-read also-read-m_image__2jdRP"><div class="arr--fallback-image fallback-m_image__1GYCJ fallback-m_image-position__3KddP"><figure class="arr--fallback-svg fallback-m_fallback-svg__tK9fL"><svg width="40" height="30" viewBox="0 0 102 76" version="1.1"><g id="demo-home-copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-377.000000, -314.000000)"><g id="Group-13" transform="translate(377.000000, 314.000000)"><path d="M43.2,49.7 L62.2,19.2 L87.2,59.4 L17,59.4 L32.8,39.4 L43.2,49.7 Z M29.9,28.6 C25.8683213,28.6 22.6,25.3316787 22.6,21.3 C22.6,17.2683213 25.8683213,14 29.9,14 C33.9316787,14 37.2,17.2683213 37.2,21.3 C37.2,25.3316787 33.9316787,28.6 29.9,28.6 Z" id="Combined-Shape" fill="#99B0CB" fill-rule="nonzero"></path><rect id="Rectangle-19" stroke="#99B0CB" stroke-width="3" x="1.5" y="1.5" width="99" height="73" rx="3"></rect></g></g></svg></figure></div></div></div><div class="also-read-m_content-wrapper__26AZX"><div style="color:#3333" class="also-read-m_headline__VzF-c also-read-m_dark__1pUib">How is the coronavirus impacting people with disabilities?</div></div></a>'
     );
   });
 
@@ -55,7 +55,7 @@ describe("Alsoread Story Element", () => {
       </Provider>
     );
     expect(wrapper.html()).toBe(
-      '<a data-test-id="also-read" aria-label="also-read" class="arrow-component arr--also-read-element also-read-m_alsoread-default__3cYER " href="https://ace-web.qtstage.io/anything/coronavirus/how-is-the-coronavirus-impacting-people-with-disabilities"><div class="also-read-m_card-image-wrapper__3GFzu"><figure class="also-read-m_card-image__3CwAv"><img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" aspect-ratio="16,9" alt="hero image caption" class="qt-image"/></figure></div><div class="also-read-m_content-wrapper__26AZX"><div class="also-read-m_headline__VzF-c" style="color:#3333">How is the coronavirus impacting people with disabilities?</div></div></a>'
+      '<a data-test-id="also-read" aria-label="also-read" class="arrow-component arr--also-read-element also-read-m_alsoread-default__3cYER " href="https://ace-web.qtstage.io/anything/coronavirus/how-is-the-coronavirus-impacting-people-with-disabilities"><div class="also-read-m_card-image-wrapper__3GFzu"><figure class="also-read-m_card-image__3CwAv"><img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="hero image caption" class="qt-image"/></figure></div><div class="also-read-m_content-wrapper__26AZX"><div style="color:#3333" class="also-read-m_headline__VzF-c also-read-m_dark__1pUib">How is the coronavirus impacting people with disabilities?</div></div></a>'
     );
   });
 
@@ -66,7 +66,7 @@ describe("Alsoread Story Element", () => {
       </Provider>
     );
     expect(wrapper.html()).toBe(
-      '<a data-test-id="also-read" aria-label="also-read" class="arrow-component arr--also-read-element also-read-m_alsoread-textLeftAlign__S0Dxe " href="https://ace-web.qtstage.io/anything/coronavirus/how-is-the-coronavirus-impacting-people-with-disabilities"><div class="also-read-m_default-text__hp2dp also-read-m_dark__1pUib">Also-Read</div><div class="also-read-m_content-wrapper__26AZX"><div class="also-read-m_headline__VzF-c" style="color:dark">How is the coronavirus impacting people with disabilities?</div></div></a>'
+      '<a data-test-id="also-read" aria-label="also-read" class="arrow-component arr--also-read-element also-read-m_alsoread-textLeftAlign__S0Dxe " href="https://ace-web.qtstage.io/anything/coronavirus/how-is-the-coronavirus-impacting-people-with-disabilities"><div class="also-read-m_default-text__hp2dp also-read-m_dark__1pUib">Also-Read</div><div class="also-read-m_content-wrapper__26AZX"><div style="color:initial" class="also-read-m_headline__VzF-c also-read-m_dark__1pUib">How is the coronavirus impacting people with disabilities?</div></div></a>'
     );
   });
 
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/AlsoRead/index.js b/app/isomorphic/arrow/components/Atoms/StoryElements/AlsoRead/index.js
index a3be69e8c..0975dfab6 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/AlsoRead/index.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/AlsoRead/index.js
@@ -1,19 +1,15 @@
 import React from "react";
-import get from "lodash/get";
+import get from "lodash.get";
 import { LazyLoadImages, Link, ResponsiveImage } from "@quintype/components";
 import { withElementWrapper } from "../withElementWrapper";
 import PropTypes from "prop-types";
 import { FallbackImage } from "../../FallbackImage";
-import { clientWidth, isEmpty, shapeConfig, getTextColor } from "../../../../utils/utils";
+import { isEmpty, shapeConfig, getTextColor } from "../../../../utils/utils";
 import { useStateValue } from "../../../SharedContext";
 import "./also-read.m.css";
 
-const DisplayImage = ({ story, linkedImage, template, isRightAlign }) => {
-  const isLeftAlign = template === "textLeftAlign";
-  const isMobile = clientWidth("mobile");
-  const rightAlignAspectRatio = isRightAlign && isMobile ? [4, 3] : [16, 9];
-  const imageAspectRatio = isLeftAlign ? [16, 9] : rightAlignAspectRatio;
-  const alternateText = story["hero-image-caption"] || story.headline;
+const DisplayImage = ({ story, linkedImage }) => {
+  const alternateText = story["hero-image-caption"] || story["headline"];
 
   return (
     <div styleName="card-image-wrapper">
@@ -22,7 +18,7 @@ const DisplayImage = ({ story, linkedImage, template, isRightAlign }) => {
           <LazyLoadImages>
             <ResponsiveImage
               slug={linkedImage}
-              aspect-ratio={imageAspectRatio}
+              aspectRatio={[16, 9]}
               defaultWidth={480}
               widths={[250, 480, 640]}
               imgParams={{ auto: ["format", "compress"] }}
@@ -41,9 +37,7 @@ const DisplayImage = ({ story, linkedImage, template, isRightAlign }) => {
 
 DisplayImage.propTypes = {
   story: PropTypes.shape({ "hero-image-caption": PropTypes.string, headline: PropTypes.string }),
-  linkedImage: PropTypes.string,
-  template: PropTypes.string,
-  isRightAlign: PropTypes.bool,
+  linkedImage: PropTypes.string
 };
 
 const AlsoReadBase = ({
@@ -67,8 +61,7 @@ const AlsoReadBase = ({
   const configData = useStateValue() || {};
   const textInvertColor = getTextColor(configData.theme);
   const { title = "" } = opts;
-  const { textColor } = css;
-
+  const { textColor = "" } = css;
   const displayTitle = title || "Also Read";
   const isDefault = template === "" || template === "default";
   const isRightAlign = template === "imageRightAlign";
@@ -81,19 +74,16 @@ const AlsoReadBase = ({
       data-test-id="also-read"
       href={storyUrl}
       aria-label="also-read"
-      {...restProps}
-    >
+      {...restProps}>
       {!isDefault && <div styleName={`default-text ${textInvertColor}`}>{displayTitle}</div>}
-      {isDefault && (
-        <DisplayImage story={story} linkedImage={linkedImage} template={template} isRightAlign={isRightAlign} />
-      )}
+      {isDefault && <DisplayImage story={story} linkedImage={linkedImage} />}
       <div styleName="content-wrapper">
         <div
-          styleName="headline"
-          style={textColor ? { color: textColor } : { color: textInvertColor }}
+          styleName={`headline ${textInvertColor}`}
+          style={{ color: textColor || "initial" }}
           dangerouslySetInnerHTML={{ __html: content }}
         />
-        {isRightAlign && <DisplayImage story={story} linkedImage={linkedImage} template={template} />}
+        {isRightAlign && <DisplayImage story={story} linkedImage={linkedImage} />}
       </div>
     </Link>
   );
@@ -106,13 +96,13 @@ AlsoReadBase.propTypes = {
   element: PropTypes.shape({
     text: PropTypes.string,
     metadata: PropTypes.shape({
-      linkedStoryId: PropTypes.shape({ url: PropTypes.string, "hero-image-s3-key": PropTypes.string }),
-    }),
+      linkedStoryId: PropTypes.shape({ url: PropTypes.string, "hero-image-s3-key": PropTypes.string })
+    })
   }),
   opts: PropTypes.shape({ title: PropTypes.string }),
   config: shapeConfig,
   render: PropTypes.func,
-  css: PropTypes.object,
+  css: PropTypes.object
 };
 
 export const AlsoRead = withElementWrapper(AlsoReadBase);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/AlsoRead/stories.js b/app/isomorphic/arrow/components/Atoms/StoryElements/AlsoRead/stories.js
index 0256e435d..43852ec1a 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/AlsoRead/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/AlsoRead/stories.js
@@ -10,7 +10,7 @@ const story = generateStory();
 const templateStyle = {
   Default: "default",
   "Image Right Align": "imageRightAlign",
-  "Text Left Align": "textLeftAlign",
+  "Text Left Align": "textLeftAlign"
 };
 
 withStore(
@@ -18,9 +18,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Attachment/attachment.m.css b/app/isomorphic/arrow/components/Atoms/StoryElements/Attachment/attachment.m.css
index 68f4499a8..50eb73509 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Attachment/attachment.m.css
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Attachment/attachment.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 @value tablet from viewports;
 
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Attachment/index.js b/app/isomorphic/arrow/components/Atoms/StoryElements/Attachment/index.js
index b1a337d72..510c11a7f 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Attachment/index.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Attachment/index.js
@@ -22,8 +22,7 @@ const AttachmentBase = ({ element = {}, render, ...restProps }) => {
       data-test-id="attachment"
       className="arrow-component arr--attachment-element"
       styleName={textColor}
-      {...restProps}
-    >
+      {...restProps}>
       <div styleName="headline">Attachment</div>
       <div styleName="wrapper">
         {isPdf ? (
@@ -43,8 +42,7 @@ const AttachmentBase = ({ element = {}, render, ...restProps }) => {
             target="_blank"
             rel="noopener noreferrer"
             download
-            aria-label="button"
-          >
+            aria-label="button">
             {isPdf ? "Preview" : "Download"}
           </Link>
         </div>
@@ -57,8 +55,8 @@ AttachmentBase.propTypes = {
   element: PropTypes.shape({
     url: PropTypes.string,
     fileName: PropTypes.string,
-    contentType: PropTypes.string,
+    contentType: PropTypes.string
   }),
-  render: PropTypes.func,
+  render: PropTypes.func
 };
 export const Attachment = withElementWrapper(AttachmentBase);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Attachment/stories.js b/app/isomorphic/arrow/components/Atoms/StoryElements/Attachment/stories.js
index 0931ff77d..6b92f77e9 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Attachment/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Attachment/stories.js
@@ -16,9 +16,9 @@ const doc = {
   "s3-key": "ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
   "content-type": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
   metadata: {
-    "file-size": 8209,
+    "file-size": 8209
   },
-  subtype: "attachment",
+  subtype: "attachment"
 };
 
 const pdf = {
@@ -33,9 +33,9 @@ const pdf = {
   "s3-key": "ace/2019-07/6dcf2021-615b-43e6-85f3-21acb8953cea/resume_samples.pdf",
   "content-type": "application/pdf",
   metadata: {
-    "file-size": 301808,
+    "file-size": 301808
   },
-  subtype: "attachment",
+  subtype: "attachment"
 };
 const element = generateStoryElementData("attachment");
 withStore("Atoms/Story Elements/Attachment", Readme)
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/BigFact/big-fact.m.css b/app/isomorphic/arrow/components/Atoms/StoryElements/BigFact/big-fact.m.css
index 84eb93027..9adf64f6f 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/BigFact/big-fact.m.css
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/BigFact/big-fact.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 
 .bigfact-element {
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/BigFact/index.js b/app/isomorphic/arrow/components/Atoms/StoryElements/BigFact/index.js
index aebed8de1..7ba5134b6 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/BigFact/index.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/BigFact/index.js
@@ -15,8 +15,7 @@ const BigFactBase = ({ element, story, config, ...restProps }) => {
       className="arrow-component arr--bigfact-element"
       data-test-id="bigfact"
       styleName={`bigfact-element ${textInvertColor}`}
-      {...restProps}
-    >
+      {...restProps}>
       <div styleName="content">{content}</div>
       <div styleName={`attribution ${textInvertColor}`} data-test-id="attribution">
         {attribution}
@@ -28,7 +27,7 @@ const BigFactBase = ({ element, story, config, ...restProps }) => {
 BigFactBase.propTypes = {
   element: PropTypes.shape({ metadata: PropTypes.shape({ content: PropTypes.string, attribution: PropTypes.string }) }),
   story: PropTypes.object,
-  config: PropTypes.object,
+  config: PropTypes.object
 };
 
 export const BigFact = withElementWrapper(BigFactBase);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/Svg/curve.js b/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/Svg/curve.js
index 71c042f40..62e3d438a 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/Svg/curve.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/Svg/curve.js
@@ -5,8 +5,9 @@ import "./icon.m.css";
 export const CurveIcon = ({ width, height, color, opacity }) => {
   const lightColor = color === "light" && "#ffffff";
   const darkColor = color === "dark" && "#0d0d0d";
+  const fillColor = lightColor || darkColor || color;
   return (
-    <div styleName="curve-wrapper" style={{ fill: `${lightColor || darkColor || color}` }}>
+    <div styleName="curve-wrapper" style={fillColor ? { fill: fillColor } : {}}>
       <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 64 64">
         <path
           fill="inherit"
@@ -22,5 +23,5 @@ CurveIcon.propTypes = {
   width: PropTypes.string,
   height: PropTypes.string,
   color: PropTypes.string,
-  opacity: PropTypes.string,
+  opacity: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/Svg/edge.js b/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/Svg/edge.js
index 5e180aa22..9b9802849 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/Svg/edge.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/Svg/edge.js
@@ -5,8 +5,9 @@ import "./icon.m.css";
 export const EdgeIcon = ({ width, height, color, opacity }) => {
   const lightColor = color === "light" && "#ffffff";
   const darkColor = color === "dark" && "#0d0d0d";
+  const fillColor = lightColor || darkColor || color;
   return (
-    <div styleName="edge-wrapper" style={{ fill: `${lightColor || darkColor || color}` }}>
+    <div styleName="edge-wrapper" style={fillColor ? { fill: fillColor } : {}}>
       <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 64 64">
         <path
           fill="inherit"
@@ -22,5 +23,5 @@ EdgeIcon.propTypes = {
   width: PropTypes.string,
   height: PropTypes.string,
   color: PropTypes.string,
-  opacity: PropTypes.string,
+  opacity: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/block-quote.m.css b/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/block-quote.m.css
index 5e32d3091..8d8e375c7 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/block-quote.m.css
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/block-quote.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 
 .blockquote-withBackground::before {
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/block-quote.test.js b/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/block-quote.test.js
index 19ffb742d..8c13f12dd 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/block-quote.test.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/block-quote.test.js
@@ -26,7 +26,7 @@ describe("Block Quote Story Element", () => {
       <BlockQuote template="withBackground" element={element} css={{ backgroundColor: "#ff214b" }} />
     );
     expect(wrapper.html()).toBe(
-      '<div data-test-id="blockquote" class="arrow-component arr--block-quote block-quote-m_blockquote-withBackground__1yW-u block-quote-m_dark__HaZuG "><div class="block-quote-m_quote-wrapper__83bEy"><div class="block-quote-m_icon__m-EIZ"><div class="icon-m_curve-wrapper__3-sLV" style="fill:#0d0d0d"><svg xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 64 64"><path fill="inherit" opacity=".4" d="M61 44.702c0 3.465-1.13 6.214-3.39 8.248-2.261 2.033-5.125 3.05-8.59 3.05-4.07 0-7.423-1.356-10.06-4.067-2.638-2.712-3.956-6.704-3.956-11.976 0-4.971.716-9.227 2.147-12.767 1.432-3.54 3.165-6.553 5.2-9.039 2.034-2.485 4.144-4.481 6.33-5.988 2.184-1.506 4.106-2.56 5.763-3.163l5.652 7.909c-3.316 1.657-5.99 3.879-8.025 6.666-2.035 2.786-3.052 6.289-3.052 10.507.603-.15 1.432-.226 2.487-.226 3.014 0 5.35 1.054 7.007 3.163C60.171 39.13 61 41.69 61 44.702zm-33.004 0c0 3.465-1.13 6.214-3.39 8.248-2.261 2.033-5.125 3.05-8.59 3.05-4.07 0-7.423-1.356-10.06-4.067C3.319 49.22 2 45.229 2 39.957c0-4.971.716-9.227 2.148-12.767 1.431-3.54 3.164-6.553 5.199-9.039 2.034-2.485 4.144-4.481 6.33-5.988C17.86 10.657 19.782 9.603 21.44 9l5.651 7.909c-3.316 1.657-5.99 3.879-8.025 6.666-2.034 2.786-3.052 6.289-3.052 10.507.603-.15 1.432-.226 2.487-.226 3.014 0 5.35 1.054 7.008 3.163 1.657 2.11 2.486 4.67 2.486 7.683z"></path></svg></div></div><div class="block-quote-m_wrapper__2KEhw"><div class="block-quote-m_content__xpMqX block-quote-m_dark__HaZuG">After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest.</div><div class="block-quote-m_attribution__2m4s2 block-quote-m_dark__HaZuG">Player</div></div></div></div>'
+      '<div data-test-id="blockquote" class="arrow-component arr--block-quote block-quote-m_blockquote-withBackground__1yW-u block-quote-m_dark__HaZuG "><div class="block-quote-m_quote-wrapper__83bEy"><div class="block-quote-m_icon__m-EIZ"><div class="icon-m_curve-wrapper__3-sLV" style="fill:#0d0d0d"><svg xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 64 64"><path fill="inherit" opacity=".4" d="M61 44.702c0 3.465-1.13 6.214-3.39 8.248-2.261 2.033-5.125 3.05-8.59 3.05-4.07 0-7.423-1.356-10.06-4.067-2.638-2.712-3.956-6.704-3.956-11.976 0-4.971.716-9.227 2.147-12.767 1.432-3.54 3.165-6.553 5.2-9.039 2.034-2.485 4.144-4.481 6.33-5.988 2.184-1.506 4.106-2.56 5.763-3.163l5.652 7.909c-3.316 1.657-5.99 3.879-8.025 6.666-2.035 2.786-3.052 6.289-3.052 10.507.603-.15 1.432-.226 2.487-.226 3.014 0 5.35 1.054 7.007 3.163C60.171 39.13 61 41.69 61 44.702zm-33.004 0c0 3.465-1.13 6.214-3.39 8.248-2.261 2.033-5.125 3.05-8.59 3.05-4.07 0-7.423-1.356-10.06-4.067C3.319 49.22 2 45.229 2 39.957c0-4.971.716-9.227 2.148-12.767 1.431-3.54 3.164-6.553 5.199-9.039 2.034-2.485 4.144-4.481 6.33-5.988C17.86 10.657 19.782 9.603 21.44 9l5.651 7.909c-3.316 1.657-5.99 3.879-8.025 6.666-2.034 2.786-3.052 6.289-3.052 10.507.603-.15 1.432-.226 2.487-.226 3.014 0 5.35 1.054 7.008 3.163 1.657 2.11 2.486 4.67 2.486 7.683z"></path></svg></div></div><div class="block-quote-m_wrapper__2KEhw" style="border-color:unset"><div class="block-quote-m_content__xpMqX block-quote-m_dark__HaZuG">After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest.</div><div class="block-quote-m_attribution__2m4s2 block-quote-m_dark__HaZuG">Player</div></div></div></div>'
     );
   });
 
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/index.js b/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/index.js
index 4c02dbadc..6e03b6b75 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/index.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/index.js
@@ -1,5 +1,5 @@
 import React from "react";
-import get from "lodash/get";
+import get from "lodash.get";
 import PropTypes from "prop-types";
 import { clientWidth, getTextColor, shapeConfig, shapeStory } from "../../../../utils/utils";
 import { withElementWrapper } from "../withElementWrapper";
@@ -43,7 +43,7 @@ export const BlockQuoteBase = ({ element, template, css = {}, story = {}, config
     return template === "withBorder" ? (
       <div styleName="icon-border">
         <div styleName="icon">{SelectionOfIcon(iconType, template, blockQuoteColor, textColor)}</div>
-        <div styleName="border" style={blockQuoteColor && { backgroundColor: blockQuoteColor }} />
+        <div styleName="border" style={{ backgroundColor: blockQuoteColor || "initial" }} />
       </div>
     ) : (
       <div styleName="icon">{SelectionOfIcon(iconType, template, blockQuoteColor, textColor)}</div>
@@ -56,11 +56,10 @@ export const BlockQuoteBase = ({ element, template, css = {}, story = {}, config
       data-test-id="blockquote"
       styleName={`${templateStyle} ${textColor}`}
       style={theme}
-      {...restProps}
-    >
+      {...restProps}>
       <div styleName="quote-wrapper">
         {updateStructure()}
-        <div styleName="wrapper" style={blockQuoteColor && { borderColor: blockQuoteColor }}>
+        <div styleName="wrapper" style={{ borderColor: blockQuoteColor || "unset" }}>
           <div styleName={`content ${textInvertColor}`} dangerouslySetInnerHTML={{ __html: content }} />
           <div styleName={`attribution ${textInvertColor}`} dangerouslySetInnerHTML={{ __html: attribution }} />
         </div>
@@ -71,13 +70,13 @@ export const BlockQuoteBase = ({ element, template, css = {}, story = {}, config
 
 BlockQuoteBase.propTypes = {
   element: PropTypes.shape({
-    metadata: PropTypes.shape({ content: PropTypes.string, attribution: PropTypes.string }),
+    metadata: PropTypes.shape({ content: PropTypes.string, attribution: PropTypes.string })
   }),
   template: PropTypes.string,
   story: shapeStory,
   config: shapeConfig,
   render: PropTypes.func,
-  css: PropTypes.object,
+  css: PropTypes.object
 };
 
 export const BlockQuote = withElementWrapper(BlockQuoteBase);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/stories.js b/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/stories.js
index d1af667aa..efa224ed8 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/BlockQuote/stories.js
@@ -8,12 +8,12 @@ import { color } from "@storybook/addon-knobs";
 const templateStyle = {
   Default: "default",
   "With Background": "withBackground",
-  "With Border": "withBorder",
+  "With Border": "withBorder"
 };
 const element = generateStoryElementData("blockquote");
 const iconStyle = {
   "Curve Icon": "curveIcon",
-  "Edge Icon": "edgeIcon",
+  "Edge Icon": "edgeIcon"
 };
 
 withStore("Atoms/Story Elements/Block Quote", {}, Readme)
@@ -24,7 +24,7 @@ withStore("Atoms/Story Elements/Block Quote", {}, Readme)
       css={{
         blockQuoteColor: color("Block quote color", "#ff214b"),
         backgroundShade: color("Background color", "#ff214b"),
-        iconType: optionalSelect("Icon Types", iconStyle),
+        iconType: optionalSelect("Icon Types", iconStyle)
       }}
     />
   ))
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Blurb/blurb.m.css b/app/isomorphic/arrow/components/Atoms/StoryElements/Blurb/blurb.m.css
index a037b0182..a1e054bfe 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Blurb/blurb.m.css
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Blurb/blurb.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 
 .blurb blockquote,
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Blurb/blurb.test.js b/app/isomorphic/arrow/components/Atoms/StoryElements/Blurb/blurb.test.js
index d6be6ea1f..82275e585 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Blurb/blurb.test.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Blurb/blurb.test.js
@@ -1,44 +1,69 @@
 import * as React from "react";
 import { shallow, mount } from "enzyme";
-import { generateStoryElementData } from "../../../Fixture";
+import { generateStoryElementData, generateStore } from "../../../Fixture";
 import { Blurb } from "./index";
+import { Provider } from "react-redux";
 
 const element = generateStoryElementData("blurb");
 
 describe("Blurb Story Element", () => {
   it("Should render default template", () => {
-    const wrapper = mount(<Blurb element={element} template="default" />);
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <Blurb element={element} template="default" />
+      </Provider>
+    );
     expect(wrapper.find({ "data-test-id": "blurb" }).prop("className")).toMatch(/blurb-default/);
   });
 
   it("Should render border template", () => {
-    const wrapper = mount(<Blurb element={element} template="withBorder" />);
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <Blurb element={element} template="withBorder" />
+      </Provider>
+    );
     expect(wrapper.find({ "data-test-id": "blurb" }).prop("className")).toMatch(/blurb-withBorder/);
   });
 
   it("Should render default template with external link", () => {
-    const wrapper = shallow(<Blurb template="default" opts={{ isExternalLink: true }} element={element} />);
+    const wrapper = shallow(
+      <Provider store={generateStore}>
+        <Blurb template="default" opts={{ isExternalLink: true }} element={element} />
+      </Provider>
+    );
     expect(wrapper.html()).toBe(
-      '<div data-test-id="blurb" class="arrow-component arr-custom-style arr--blurb-element blurb-m_blurb-default__JR86y blurb-m_dark__1eErz "><blockquote>Although the many story changes might be hard for book purists to accept, <a aria-label=\'content\' target=\'_blank\' href="https://www.rottentomatoes.com/m/ready_player_one/">Steven Spielberg</a> has lovingly captured the zeitgeist of 80s nostalgia in this adventure.</blockquote></div>'
+      '<div data-test-id="blurb" style="border-left:2px solid unset" class="arrow-component arr-custom-style arr--blurb-element blurb-m_blurb-default__JR86y blurb-m_dark__1eErz "><blockquote>Although the many story changes might be hard for book purists to accept, <a aria-label=\'content\' target=\'_blank\' href="https://www.rottentomatoes.com/m/ready_player_one/">Steven Spielberg</a> has lovingly captured the zeitgeist of 80s nostalgia in this adventure.</blockquote></div>'
     );
   });
 
   it("Should render default template without external link", () => {
-    const wrapper = shallow(<Blurb template="default" opts={{ isExternalLink: false }} element={element} />);
+    const wrapper = shallow(
+      <Provider store={generateStore}>
+        <Blurb template="default" opts={{ isExternalLink: false }} element={element} />
+      </Provider>
+    );
     expect(wrapper.html()).toBe(
-      '<div data-test-id="blurb" class="arrow-component arr-custom-style arr--blurb-element blurb-m_blurb-default__JR86y blurb-m_dark__1eErz "><blockquote>Although the many story changes might be hard for book purists to accept, <a href="https://www.rottentomatoes.com/m/ready_player_one/">Steven Spielberg</a> has lovingly captured the zeitgeist of 80s nostalgia in this adventure.</blockquote></div>'
+      '<div data-test-id="blurb" style="border-left:2px solid unset" class="arrow-component arr-custom-style arr--blurb-element blurb-m_blurb-default__JR86y blurb-m_dark__1eErz "><blockquote>Although the many story changes might be hard for book purists to accept, <a href="https://www.rottentomatoes.com/m/ready_player_one/">Steven Spielberg</a> has lovingly captured the zeitgeist of 80s nostalgia in this adventure.</blockquote></div>'
     );
   });
 
   it("Should render the border template with border color", () => {
-    const wrapper = mount(<Blurb template="withBorder" element={element} css={{ borderColor: "#ff214b" }} />);
-    expect(wrapper.find({ "data-test-id": "blurb" }).prop("style")).toEqual({ border: "solid 2px #ff214b" });
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <Blurb template="withBorder" element={element} css={{ borderColor: "#ff214b" }} />
+      </Provider>
+    );
+    expect(wrapper.find({ "data-test-id": "blurb" }).prop("style")).toEqual({ border: "2px solid #ff214b" });
   });
 
   it("Should render custom template", () => {
     // eslint-disable-next-line react/prop-types
     const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
-    const wrapper = shallow(<Blurb element={element} render={customTemplate} />);
+    const wrapper = shallow(
+      <Provider store={generateStore}>
+        <Blurb element={element} render={customTemplate} />
+      </Provider>
+    );
     expect(wrapper.html()).toBe(
       '<h3><blockquote>Although the many story changes might be hard for book purists to accept, <a href="https://www.rottentomatoes.com/m/ready_player_one/">Steven Spielberg</a> has lovingly captured the zeitgeist of 80s nostalgia in this adventure.</blockquote></h3>'
     );
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Blurb/index.js b/app/isomorphic/arrow/components/Atoms/StoryElements/Blurb/index.js
index ec9b6566f..44edb8b62 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Blurb/index.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Blurb/index.js
@@ -1,4 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
+import get from "lodash/get";
+import { useSelector } from "react-redux";
 import PropTypes from "prop-types";
 import { withElementWrapper } from "../withElementWrapper";
 import { updateContentLinks, shapeStory, shapeConfig, getTextColor } from "../../../../utils/utils";
@@ -6,24 +8,19 @@ import "./blurb.m.css";
 import { useStateValue } from "../../../SharedContext";
 
 const BlurbBase = ({ element, template = "", opts = {}, css = {}, story = {}, config = {}, render, ...restProps }) => {
-  const content = element.text;
   const { borderColor } = css;
-  const initBorderDirection =
-    template === "withBorder" ? { border: `solid 2px ${borderColor}` } : { borderLeft: `solid 2px ${borderColor}` };
-  const [borderDirection, setBorderDirection] = useState(initBorderDirection);
+  const languageDirection = useSelector((state) => get(state, ["qt", "config", "language", "direction"], "ltr"));
+  const content = element.text;
   if (!content) return null;
-
-  useEffect(() => {
-    const htmlElement = document.getElementsByTagName("HTML");
-    if (htmlElement && htmlElement.length) {
-      if (htmlElement[0].dir.toLowerCase() === "rtl" && template !== "withBorder") {
-        setBorderDirection({ borderRight: `solid 2px ${borderColor}` });
-      }
-    }
-  }, []);
+  const initBorderDirection =
+    template === "withBorder"
+      ? { border: `2px solid ${borderColor || "unset"}` }
+      : languageDirection === "rtl"
+      ? { borderRight: `2px solid ${borderColor || "unset"}` }
+      : { borderLeft: `2px solid ${borderColor || "unset"}` };
 
   const { isExternalLink = true } = opts;
-  const text = (isExternalLink && updateContentLinks(content)) || content;
+  let text = (isExternalLink && updateContentLinks(content)) || content;
   const templateStyle = template ? `blurb-${template}` : "blurb";
   const configData = useStateValue() || {};
   const textInvertColor = getTextColor(configData.theme);
@@ -32,7 +29,7 @@ const BlurbBase = ({ element, template = "", opts = {}, css = {}, story = {}, co
       className="arrow-component arr-custom-style arr--blurb-element"
       styleName={`${templateStyle} ${textInvertColor}`}
       data-test-id="blurb"
-      style={borderColor && borderDirection}
+      style={initBorderDirection}
       dangerouslySetInnerHTML={{ __html: text }}
       {...restProps}
     />
@@ -47,7 +44,7 @@ BlurbBase.propTypes = {
   story: shapeStory,
   config: shapeConfig,
   render: PropTypes.func,
-  css: PropTypes.object,
+  css: PropTypes.object
 };
 
 export const Blurb = withElementWrapper(BlurbBase);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Blurb/stories.js b/app/isomorphic/arrow/components/Atoms/StoryElements/Blurb/stories.js
index bdf3b8b09..1bc258b84 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Blurb/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Blurb/stories.js
@@ -7,7 +7,7 @@ import { color, boolean } from "@storybook/addon-knobs";
 
 const templateStyle = {
   Default: "default",
-  "Blurb with Border": "withBorder",
+  "Blurb with Border": "withBorder"
 };
 
 const element = generateStoryElementData("blurb");
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Image/index.js b/app/isomorphic/arrow/components/Atoms/StoryElements/Image/index.js
index 46ce40b95..7d8379f87 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Image/index.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Image/index.js
@@ -20,19 +20,19 @@ const ImageBase = ({ element, opts = {}, story = {}, config = {}, caption = true
         <ResponsiveImage
           slug={element["image-s3-key"]}
           metadata={element["image-metadata"]}
-          alt={element.title}
+          alt={element["title"]}
           aspectRatio={null}
           defaultWidth={640}
           widths={opts.imageWidths || [360, 640, 1200]}
           imgParams={{ auto: ["format", "compress"] }}
         />
       </figure>
-      {element.hyperlink && <HyperLink hyperLink={element.hyperlink} />}
+      {element["hyperlink"] && <HyperLink hyperLink={element["hyperlink"]} />}
     </div>
   );
 
   ImageTemplate.propTypes = {
-    onClick: PropTypes.func,
+    onClick: PropTypes.func
   };
 
   return (
@@ -49,12 +49,12 @@ ImageBase.propTypes = {
     "image-metadata": PropTypes.object,
     "image-attribution": PropTypes.string,
     title: PropTypes.string,
-    hyperlink: PropTypes.string,
+    hyperlink: PropTypes.string
   }),
   caption: PropTypes.bool,
   opts: PropTypes.shape({ imageWidths: PropTypes.array }),
   story: shapeStory,
-  config: shapeConfig,
+  config: shapeConfig
 };
 
 export const Image = withElementWrapper(ImageBase);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Image/stories.js b/app/isomorphic/arrow/components/Atoms/StoryElements/Image/stories.js
index a01b8a6bd..6bd9325bd 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Image/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Image/stories.js
@@ -11,9 +11,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "gumlet.assettype.com",
-      },
-    },
+        "cdn-image": "gumlet.assettype.com"
+      }
+    }
   },
   Readme
 )
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/ImageSlideshow/image-slideshow.m.css b/app/isomorphic/arrow/components/Atoms/StoryElements/ImageSlideshow/image-slideshow.m.css
index 3ed7219be..f75aba419 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/ImageSlideshow/image-slideshow.m.css
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/ImageSlideshow/image-slideshow.m.css
@@ -1,4 +1,4 @@
-@import "../../../../../../assets/arrow/stylesheets/mixins.scss";
+@import "../../../../../assets/stylesheets/mixins.scss";
 
 .slide {
   position: relative;
@@ -35,7 +35,7 @@
   bottom: 0;
   width: 100%;
   height: 100%;
-  background-image: linear-gradient(to top, rgba(var(--arrow-c-dark), 0.5), transparent 70%, transparent);
+  background-image: linear-gradient(to top, rgba(13, 13, 13, 0.5), transparent 70%, transparent);
 }
 
 .image {
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/ImageSlideshow/index.js b/app/isomorphic/arrow/components/Atoms/StoryElements/ImageSlideshow/index.js
index f5b50c6b1..0f589981b 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/ImageSlideshow/index.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/ImageSlideshow/index.js
@@ -1,5 +1,5 @@
 import { LazyLoadImages, ResponsiveImage } from "@quintype/components";
-import get from "lodash/get";
+import get from "lodash.get";
 import PropTypes from "prop-types";
 import React from "react";
 import { shapeStory } from "../../../../utils/utils";
@@ -21,7 +21,7 @@ const ImageSlideshowBase = (props) => {
             <ResponsiveImage
               slug={imageS3Key}
               metadata={metadata}
-              aspect-ratio={[16, 9]}
+              aspectRatio={[16, 9]}
               defaultWidth={480}
               widths={[250, 480, 640]}
               imgParams={{ auto: ["format", "compress"] }}
@@ -49,7 +49,7 @@ const ImageSlideshowBase = (props) => {
   };
 
   ImageSlideshowTemplate.propTypes = {
-    onClickHandler: PropTypes.func,
+    onClickHandler: PropTypes.func
   };
 
   return <FullScreenImages template={ImageSlideshowTemplate} element={props.element} />;
@@ -57,9 +57,9 @@ const ImageSlideshowBase = (props) => {
 
 ImageSlideshowBase.propTypes = {
   element: PropTypes.shape({
-    "story-elements": PropTypes.array,
+    "story-elements": PropTypes.array
   }),
-  story: shapeStory,
+  story: shapeStory
 };
 
 export const ImageSlideshow = withElementWrapper(ImageSlideshowBase);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/ImageSlideshow/stories.js b/app/isomorphic/arrow/components/Atoms/StoryElements/ImageSlideshow/stories.js
index a67ae294f..ff221b69b 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/ImageSlideshow/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/ImageSlideshow/stories.js
@@ -11,9 +11,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 ).add("Default", () => <ImageSlideshow element={element} />);
@@ -25,10 +25,10 @@ withStore(
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
         language: {
-          direction: "rtl",
-        },
-      },
-    },
+          direction: "rtl"
+        }
+      }
+    }
   },
   Readme
 ).add("Support Rtl", () => <ImageSlideshow element={element} />);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/QuestionAnswer/index.js b/app/isomorphic/arrow/components/Atoms/StoryElements/QuestionAnswer/index.js
index 45623a506..742421f79 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/QuestionAnswer/index.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/QuestionAnswer/index.js
@@ -1,7 +1,6 @@
-/* eslint-disable no-case-declarations */
 import React from "react";
 import PropTypes from "prop-types";
-import get from "lodash/get";
+import get from "lodash.get";
 import { shapeConfig, shapeStory, updateContentLinks, getTextColor } from "../../../../utils/utils";
 import { withElementWrapper } from "../withElementWrapper";
 import "./question-answer.m.css";
@@ -17,21 +16,21 @@ const supportedTemplates = (type, element) => {
         question: qaQuestion,
         answer: qaAnswer,
         questionAttribution: qaQuestionAttribution,
-        answerAttribution: qaAnswerAttribution,
+        answerAttribution: qaAnswerAttribution
       };
     case "question":
       const qQuestion = get(element, ["text"]);
       const qAttribution = get(element, ["metadata", "interviewer", "avatar-url"]);
       return {
         question: qQuestion,
-        questionAttribution: qAttribution,
+        questionAttribution: qAttribution
       };
     case "answer":
       const aAnswer = get(element, ["text"]);
       const aAttribution = get(element, ["metadata", "interviewee", "avatar-url"]);
       return {
         answer: aAnswer,
-        answerAttribution: aAttribution,
+        answerAttribution: aAttribution
       };
   }
 };
@@ -59,6 +58,7 @@ const QuestionAnswerBase = ({
   const isAuthorImageTemplate = template === "withAuthorImage";
   const templateStyle = isAuthorImageTemplate ? "qa-withAuthorImage" : "qa-default";
   const iconType = defaultIconType === "curve" ? "curveIcon" : "edgeIcon";
+  const iconColorStyle = iconColor ? { backgroundColor: iconColor } : {};
 
   const supportQuestionElement = isAuthorImageTemplate ? (
     questionAttribution && (
@@ -70,7 +70,7 @@ const QuestionAnswerBase = ({
       </>
     )
   ) : (
-    <div styleName={`${iconType} ${theme}`} data-test-id={iconType} style={{ backgroundColor: iconColor }}>
+    <div styleName={`${iconType} ${theme}`} data-test-id={iconType} style={iconColorStyle}>
       Q
     </div>
   );
@@ -87,7 +87,7 @@ const QuestionAnswerBase = ({
       </>
     )
   ) : (
-    <div styleName={`${iconType} ${theme}`} data-test-id={iconType} style={{ backgroundColor: iconColor }}>
+    <div styleName={`${iconType} ${theme}`} data-test-id={iconType} style={iconColorStyle}>
       A
     </div>
   );
@@ -97,8 +97,7 @@ const QuestionAnswerBase = ({
       className="arrow-component arr-custom-style arr--qa-element"
       data-test-id="question-answer"
       styleName={templateStyle}
-      {...restProps}
-    >
+      {...restProps}>
       {type !== "answer" && (
         <div styleName="q-element" data-test-id="question">
           {supportQuestionElement}
@@ -121,16 +120,16 @@ QuestionAnswerBase.propTypes = {
       interviewer: PropTypes.shape({ "avatar-url": PropTypes.string }),
       interviewee: PropTypes.shape({ "avatar-url": PropTypes.string }),
       question: PropTypes.string,
-      answer: PropTypes.string,
+      answer: PropTypes.string
     }),
-    text: PropTypes.string,
+    text: PropTypes.string
   }),
   opts: PropTypes.shape({ type: PropTypes.string, defaultIconType: PropTypes.string, isExternalLink: PropTypes.bool }),
   template: PropTypes.string,
   css: PropTypes.object,
   config: shapeConfig,
   story: shapeStory,
-  render: PropTypes.func,
+  render: PropTypes.func
 };
 
 export const QuestionAnswer = withElementWrapper(QuestionAnswerBase);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/QuestionAnswer/question-answer.m.css b/app/isomorphic/arrow/components/Atoms/StoryElements/QuestionAnswer/question-answer.m.css
index a2d970eb2..3438df2a3 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/QuestionAnswer/question-answer.m.css
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/QuestionAnswer/question-answer.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 
 .qa-withAuthorImage:global(.arrow-component) .a-element p,
@@ -10,13 +9,11 @@
   font-size: var(--arrow-fs-s);
   font-weight: var(--arrow-fw-bold);
   line-height: var(--arrow-lh-5);
-  display: inline;
   color: var(--arrow-c-mono2);
   @media (min-width: mobile) {
     font-size: var(--arrow-fs-m);
   }
 }
-
 .q-element {
   margin-bottom: var(--arrow-spacing-m);
 }
@@ -91,10 +88,6 @@
   }
 }
 
-.content {
-  display: inline;
-}
-
 html[dir="rtl"] {
   .content {
     margin-right: var(--arrow-spacing-s);
@@ -105,3 +98,8 @@ html[dir="rtl"] {
     margin-left: var(--arrow-spacing-xs);
   }
 }
+
+.content,
+.content :first-child {
+  display: inline;
+}
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/QuestionAnswer/stories.js b/app/isomorphic/arrow/components/Atoms/StoryElements/QuestionAnswer/stories.js
index 27a89e288..1262ba0e9 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/QuestionAnswer/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/QuestionAnswer/stories.js
@@ -8,14 +8,14 @@ import { color, boolean } from "@storybook/addon-knobs";
 
 const templateStyle = {
   Default: "default",
-  "With Author Image": "withAuthorImage",
+  "With Author Image": "withAuthorImage"
 };
 const qaElement = generateStoryElementData("q-and-a");
 const qElement = generateStoryElementData("question");
 const aElement = generateStoryElementData("answer");
 const iconType = {
   edge: "edge",
-  curve: "curve",
+  curve: "curve"
 };
 
 withStore("Atoms/Story Elements/Question Answer", {}, Readme)
@@ -26,10 +26,10 @@ withStore("Atoms/Story Elements/Question Answer", {}, Readme)
       opts={{
         type: "q-and-a",
         defaultIconType: optionalSelect("Icon Type", iconType),
-        isExternalLink: boolean("External Link", true),
+        isExternalLink: boolean("External Link", true)
       }}
       css={{
-        iconColor: color("Icon Color", "#ff214b"),
+        iconColor: color("Icon Color", "#ff214b")
       }}
     />
   ))
@@ -46,10 +46,10 @@ withStore("Atoms/Story Elements/Question", {}, Readme)
       opts={{
         type: "question",
         defaultIconType: optionalSelect("Icon Type", iconType),
-        isExternalLink: boolean("External Link", true),
+        isExternalLink: boolean("External Link", true)
       }}
       css={{
-        iconColor: color("Icon Color", "#ff214b"),
+        iconColor: color("Icon Color", "#ff214b")
       }}
     />
   ))
@@ -66,10 +66,10 @@ withStore("Atoms/Story Elements/Answer", {}, Readme)
       opts={{
         type: "answer",
         defaultIconType: optionalSelect("Icon Type", iconType),
-        isExternalLink: boolean("External Link", true),
+        isExternalLink: boolean("External Link", true)
       }}
       css={{
-        iconColor: color("Icon Color", "#ff214b"),
+        iconColor: color("Icon Color", "#ff214b")
       }}
     />
   ))
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Quote/index.js b/app/isomorphic/arrow/components/Atoms/StoryElements/Quote/index.js
index 5f81ac627..cdcd0a277 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Quote/index.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Quote/index.js
@@ -5,23 +5,21 @@ import "./quote.m.css";
 import { shapeStory, shapeConfig, getTextColor } from "../../../../utils/utils";
 import { useStateValue } from "../../../SharedContext";
 
-const QuoteBase = ({ element, template = "", css = {}, story = {}, config = {}, render, ...restProps }) => {
+const QuoteBase = ({ element, template = "borderLeft", css = {}, story = {}, config = {}, render, ...restProps }) => {
   const configData = useStateValue() || {};
   const textInvertColor = getTextColor(configData.theme);
   const { content, attribution } = element.metadata;
   if (!content) return null;
-  const { borderColor } = css;
-  const updateBorderColor = template === "borderLeft" && `4px solid ${borderColor}`;
+  const { borderColor = "" } = css;
+  const updateBorderColor = template === "borderLeft" && borderColor ? `4px solid ${borderColor}` : "none";
   const templateStyle = template ? `quote-${template}` : "quote";
 
   return (
     <div className="arrow-component arr--quote-element" data-test-id="quote" styleName={templateStyle} {...restProps}>
-      {template === "borderTopSmall" && (
-        <div styleName="line" style={borderColor && { backgroundColor: borderColor }} />
-      )}
+      {template === "borderTopSmall" && <div styleName="line" style={{ backgroundColor: borderColor || "initial" }} />}
       <p
         styleName={`text ${textInvertColor}`}
-        style={borderColor && { borderLeft: updateBorderColor }}
+        style={{ borderLeft: updateBorderColor }}
         dangerouslySetInnerHTML={{ __html: content }}
       />
       <p data-test-id="quote-attribution" styleName={`attribution ${textInvertColor}`}>
@@ -38,7 +36,7 @@ QuoteBase.propTypes = {
   story: shapeStory,
   config: shapeConfig,
   render: PropTypes.func,
-  css: PropTypes.object,
+  css: PropTypes.object
 };
 
 export const Quote = withElementWrapper(QuoteBase);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Quote/quote.m.css b/app/isomorphic/arrow/components/Atoms/StoryElements/Quote/quote.m.css
index 0bf41937a..205b4fea7 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Quote/quote.m.css
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Quote/quote.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 
 .quote .text,
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Quote/quote.test.js b/app/isomorphic/arrow/components/Atoms/StoryElements/Quote/quote.test.js
index cde78f90c..6a9430044 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Quote/quote.test.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Quote/quote.test.js
@@ -24,7 +24,7 @@ describe("Quote Story Element", () => {
   it("Should render border left template with border color", () => {
     const wrapper = shallow(<Quote template="borderLeft" element={element} css={{ borderColor: "#ff214b" }} />);
     expect(wrapper.html()).toBe(
-      '<div data-test-id="quote" class="arrow-component arr--quote-element quote-m_quote-borderLeft__3QaAY "><p style="border-left:4px solid #ff214b" class="quote-m_text__2hXSE quote-m_dark__1migZ">After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest.</p><p data-test-id="quote-attribution" class="quote-m_attribution__20Y6O quote-m_dark__1migZ">Player</p></div>'
+      '<div data-test-id="quote" class="arrow-component arr--quote-element quote-m_quote-borderLeft__3QaAY "><p style="border-left:4px solid #ff214b" class="quote-m_text__2hXSE quote-m_dark__1migZ">Quote: Rajasthan Chief Minister Ashok</p><p data-test-id="quote-attribution" class="quote-m_attribution__20Y6O quote-m_dark__1migZ">Ashok</p></div>'
     );
   });
 
@@ -32,8 +32,6 @@ describe("Quote Story Element", () => {
     // eslint-disable-next-line react/prop-types
     const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.metadata.content }} />;
     const wrapper = shallow(<Quote element={element} render={customTemplate} />);
-    expect(wrapper.html()).toBe(
-      "<h3>After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest.</h3>"
-    );
+    expect(wrapper.html()).toBe("<h3>Quote: Rajasthan Chief Minister Ashok</h3>");
   });
 });
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Quote/stories.js b/app/isomorphic/arrow/components/Atoms/StoryElements/Quote/stories.js
index 4807d7e05..605cfee8c 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Quote/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Quote/stories.js
@@ -9,7 +9,7 @@ const element = generateStoryElementData("quote");
 const collectionTemplates = {
   default: "borderNone",
   borderLeft: "borderLeft",
-  borderTopSml: "borderTopSmall",
+  borderTopSml: "borderTopSmall"
 };
 
 withStore("Atoms/Story Elements/Quote", {}, Readme)
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Reference/index.js b/app/isomorphic/arrow/components/Atoms/StoryElements/Reference/index.js
index a7f8ab037..e0d137677 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Reference/index.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Reference/index.js
@@ -41,12 +41,12 @@ ReferenceBase.propTypes = {
   element: PropTypes.shape({
     "story-elements": PropTypes.arrayOf(
       PropTypes.shape({
-        metadata: PropTypes.shape({ name: PropTypes.string, description: PropTypes.string, url: PropTypes.string }),
+        metadata: PropTypes.shape({ name: PropTypes.string, description: PropTypes.string, url: PropTypes.string })
       })
-    ),
+    )
   }),
   opts: PropTypes.shape({ hideHeadline: PropTypes.bool }),
-  config: shapeConfig,
+  config: shapeConfig
 };
 
 export const Reference = withElementWrapper(ReferenceBase);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Reference/reference.m.css b/app/isomorphic/arrow/components/Atoms/StoryElements/Reference/reference.m.css
index 57c1f1670..f0a5ba5dc 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Reference/reference.m.css
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Reference/reference.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 @value tablet from viewports;
 
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Reference/stories.js b/app/isomorphic/arrow/components/Atoms/StoryElements/Reference/stories.js
index ae244da94..0058ff692 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Reference/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Reference/stories.js
@@ -12,7 +12,7 @@ withStore("Atoms/Story Elements/Reference", {}, Readme).add("Default", () => (
     element={element}
     opts={{
       showHeadline: boolean("Show Headline", true),
-      headlineText: text("Headline", "References"),
+      headlineText: text("Headline", "References")
     }}
   />
 ));
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/StoryElement/index.js b/app/isomorphic/arrow/components/Atoms/StoryElements/StoryElement/index.js
index 8c2fa8272..7eefe626b 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/StoryElement/index.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/StoryElement/index.js
@@ -17,5 +17,5 @@ export const StoryElement = withElementWrapper(StoryElementBase);
 StoryElementBase.propTypes = {
   element: PropTypes.object,
   story: shapeStory,
-  config: shapeConfig,
+  config: shapeConfig
 };
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/StoryElement/stories.js b/app/isomorphic/arrow/components/Atoms/StoryElements/StoryElement/stories.js
index a4d378f70..e1cdcff82 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/StoryElement/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/StoryElement/stories.js
@@ -12,9 +12,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 ).add("should work with any jsembed ", () => <StoryElement element={elementJsembed} />);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Summary/index.js b/app/isomorphic/arrow/components/Atoms/StoryElements/Summary/index.js
index 10d629138..a679e54b9 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Summary/index.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Summary/index.js
@@ -16,21 +16,20 @@ const SummaryBase = ({
   render,
   ...restProps
 }) => {
-  const configData = useStateValue() || {};
-  const textInvertColor = getTextColor(configData.theme);
   const content = element.text;
   if (!content) return null;
-
+  const configData = useStateValue() || {};
+  const textInvertColor = getTextColor(configData.theme);
   const { headerBgColor } = css;
   const { isExternalLink = true, headline = "Summary", hideHeadline = false } = opts;
-  const text = (isExternalLink && updateContentLinks(content)) || content;
+  let text = (isExternalLink && updateContentLinks(content)) || content;
 
   const supportedTemplates = ["header", "border"];
   const templateStyle = supportedTemplates.includes(template) ? `summary-${template}` : "summary";
 
   const contentBorder = hideHeadline ? `content-border` : "";
   const renderTemplate = template === "header" || template === "border";
-  const updateHeaderColor = renderTemplate ? `${headerBgColor}` : "";
+  const updateHeaderColor = renderTemplate ? headerBgColor : "initial";
   const textColor = renderTemplate ? getTextColor(headerBgColor) : "";
   const updateContentColor = template === "header" ? "" : textInvertColor;
 
@@ -39,8 +38,7 @@ const SummaryBase = ({
       className="arrow-component arr--summary-element arr-custom-style"
       styleName={templateStyle}
       data-test-id="summary"
-      {...restProps}
-    >
+      {...restProps}>
       {!hideHeadline && (
         <div styleName={`heading-wrapper ${textInvertColor}`} data-test-id="summary-headline">
           <div styleName={`headline ${textColor} ${textInvertColor}`} style={{ backgroundColor: updateHeaderColor }}>
@@ -63,7 +61,7 @@ SummaryBase.propTypes = {
   story: shapeStory,
   config: shapeConfig,
   render: PropTypes.func,
-  css: PropTypes.shape({ headerBgColor: PropTypes.string }),
+  css: PropTypes.shape({ headerBgColor: PropTypes.string })
 };
 
 export const Summary = withElementWrapper(SummaryBase);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Summary/stories.js b/app/isomorphic/arrow/components/Atoms/StoryElements/Summary/stories.js
index da1d79319..546ff30ef 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Summary/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Summary/stories.js
@@ -10,7 +10,7 @@ const element = generateStoryElementData("summary");
 const summaryTemplate = {
   default: "",
   header: "header",
-  border: "border",
+  border: "border"
 };
 
 withStore("Atoms/Story Elements/Summary", {}, Readme)
@@ -22,7 +22,7 @@ withStore("Atoms/Story Elements/Summary", {}, Readme)
       opts={{
         isExternalLink: boolean("External Link", true),
         headline: text("Headline", "Summary"),
-        hideHeadline: boolean("Hide Headline", false),
+        hideHeadline: boolean("Hide Headline", false)
       }}
     />
   ))
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Summary/summary.m.css b/app/isomorphic/arrow/components/Atoms/StoryElements/Summary/summary.m.css
index e1cfee7a2..689821d03 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Summary/summary.m.css
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Summary/summary.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 
 .headline {
@@ -38,6 +37,11 @@
   color: var(--arrow-c-invert-mono1);
 }
 
+.light a {
+  color: var(--arrow-c-invert-mono1);
+  border-bottom: 1px solid var(--arrow-c-invert-mono1);
+}
+
 /* default template */
 .summary .headline {
   margin-bottom: var(--arrow-spacing-xs);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Text/index.js b/app/isomorphic/arrow/components/Atoms/StoryElements/Text/index.js
index ee17bcb09..ac9e372c3 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Text/index.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Text/index.js
@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import get from "lodash/get";
+import get from "lodash.get";
 import { withElementWrapper } from "../withElementWrapper";
 import { updateContentLinks, shapeStory, shapeConfig, getTextColor } from "../../../../utils/utils";
 import "./text.m.css";
@@ -21,10 +21,9 @@ const TextBase = ({ element = {}, opts = {}, css = {}, story = {}, config = {},
     <div
       className="arrow-component arr--text-element"
       styleName={`${updatedStyle} ${textInvertColor}`}
-      style={!isPromotionalMessage ? { color: textColor } : {}}
+      style={!isPromotionalMessage && textColor ? { color: textColor } : {}}
       data-test-id={isPromotionalMessage ? "promotional-message" : "text"}
       dangerouslySetInnerHTML={{ __html: text }}
-      id="text-element"
       {...restProps}
     />
   );
@@ -35,7 +34,7 @@ TextBase.propTypes = {
   opts: PropTypes.shape({ isExternalLink: PropTypes.bool }),
   css: PropTypes.shape({ hyperlinkColor: PropTypes.string, textColor: PropTypes.string }),
   story: shapeStory,
-  config: shapeConfig,
+  config: shapeConfig
 };
 
 export const Text = withElementWrapper(TextBase);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Text/text.m.css b/app/isomorphic/arrow/components/Atoms/StoryElements/Text/text.m.css
index 1dfcd4761..50fc77149 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Text/text.m.css
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Text/text.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 
 .promotionalMessage p {
@@ -30,7 +29,7 @@
   transition: border 0.3s ease;
 }
 
-.textElement.light p {
+.textElement.light {
   color: var(--arrow-c-invert-mono2);
 }
 
@@ -65,7 +64,7 @@
   background-color: var(--arrow-c-brand1);
   color: var(--arrow-c-light);
   border-radius: var(--arrow-spacing-xxs);
-  box-shadow: 0 var(--arrow-spacing-xxs) var(-arrow-spacing-xs) 0 var(--arrow-c-mono6);
+  box-shadow: 0 var(--arrow-spacing-xxs) var(--arrow-spacing-xs) 0 var(--arrow-c-mono6);
   font-size: var(--arrow-fs-s);
   padding: var(--arrow-spacing-s) var(--arrow-spacing-m);
   display: block;
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Text/text.test.js b/app/isomorphic/arrow/components/Atoms/StoryElements/Text/text.test.js
index 86b8a259d..2439ba0ee 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Text/text.test.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Text/text.test.js
@@ -20,14 +20,14 @@ describe("Text Story Element", () => {
   it("should render default template with external link", () => {
     const wrapper = shallow(<Text opts={{ isExternalLink: true }} element={element} />);
     expect(wrapper.html()).toBe(
-      "<div data-test-id=\"text\" id=\"text-element\" class=\"arrow-component arr--text-element text-m_textElement__e3QEt text-m_dark__1TC18 \"><p><a aria-label='content' target='_blank' href=\"https://www.theguardian.com/technology/virtual-reality\">Virtual reality</a> is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. <a aria-label='content' target='_blank' href=\"https://www.theguardian.com/film/stevenspielberg\">Steven Spielberg</a> 2019s <a aria-label='content' target='_blank' href=\"https://www.theguardian.com/film/ready-player-one\">Ready Player One</a>.</p></div>"
+      "<div data-test-id=\"text\" class=\"arrow-component arr--text-element text-m_textElement__e3QEt text-m_dark__1TC18 \"><p><a aria-label='content' target='_blank' href=\"https://www.theguardian.com/technology/virtual-reality\">Virtual reality</a> is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. <a aria-label='content' target='_blank' href=\"https://www.theguardian.com/film/stevenspielberg\">Steven Spielberg</a> 2019s <a aria-label='content' target='_blank' href=\"https://www.theguardian.com/film/ready-player-one\">Ready Player One</a>.</p></div>"
     );
   });
 
   it("should render default template without external link", () => {
     const wrapper = shallow(<Text opts={{ isExternalLink: false }} element={element} />);
     expect(wrapper.html()).toBe(
-      '<div data-test-id="text" id="text-element" class="arrow-component arr--text-element text-m_textElement__e3QEt text-m_dark__1TC18 "><p><a href="https://www.theguardian.com/technology/virtual-reality">Virtual reality</a> is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. <a href="https://www.theguardian.com/film/stevenspielberg">Steven Spielberg</a> 2019s <a href="https://www.theguardian.com/film/ready-player-one">Ready Player One</a>.</p></div>'
+      '<div data-test-id="text" class="arrow-component arr--text-element text-m_textElement__e3QEt text-m_dark__1TC18 "><p><a href="https://www.theguardian.com/technology/virtual-reality">Virtual reality</a> is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. <a href="https://www.theguardian.com/film/stevenspielberg">Steven Spielberg</a> 2019s <a href="https://www.theguardian.com/film/ready-player-one">Ready Player One</a>.</p></div>'
     );
   });
 
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Video/index.js b/app/isomorphic/arrow/components/Atoms/StoryElements/Video/index.js
index e2aac544e..bbe2fe09b 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Video/index.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Video/index.js
@@ -1,14 +1,32 @@
 import React from "react";
+import { useSelector } from "react-redux";
 import { StoryElement } from "@quintype/components";
+import get from "lodash.get";
 import PropTypes from "prop-types";
 import { withElementWrapper } from "../withElementWrapper";
-import { shapeStory, shapeConfig } from "../../../../utils/utils";
+import { getTextColor, shapeStory, shapeConfig } from "../../../../utils/utils";
+import { useStateValue } from "../../../SharedContext";
 import "./video.m.css";
 
 const Videobase = ({ element, story = {}, config = {}, loadIframeOnClick = false, ...restProps }) => {
+  const configData = useStateValue() || {};
+  const textInvertColor = getTextColor(configData.theme);
+  const style =
+    !loadIframeOnClick && (element.subtype === "dailymotion-video" || element.type === "youtube-video")
+      ? "container wrapper"
+      : "container";
+  const renderElement = () => {
+    if (element.subtype === "brightcove-video") {
+      const policyKey = useSelector((state) => get(state, ["qt", "config", "brightcove", "policy-key"], ""));
+      return <StoryElement element={element} loadIframeOnClick={loadIframeOnClick} policyKey={policyKey} />;
+    } else {
+      return <StoryElement element={element} loadIframeOnClick={loadIframeOnClick} />;
+    }
+  };
+
   return (
-    <div styleName="container" {...restProps} data-test-id="video">
-      <StoryElement element={element} loadIframeOnClick={loadIframeOnClick} />
+    <div styleName={`${style} ${textInvertColor}`} {...restProps} data-test-id="video">
+      {renderElement()}
     </div>
   );
 };
@@ -17,7 +35,7 @@ Videobase.propTypes = {
   element: PropTypes.object,
   story: shapeStory,
   config: shapeConfig,
-  loadIframeOnClick: PropTypes.bool,
+  loadIframeOnClick: PropTypes.bool
 };
 
 export const Video = withElementWrapper(Videobase);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Video/stories.js b/app/isomorphic/arrow/components/Atoms/StoryElements/Video/stories.js
index 9bfc981ec..df0913181 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Video/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Video/stories.js
@@ -13,9 +13,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Video/video.m.css b/app/isomorphic/arrow/components/Atoms/StoryElements/Video/video.m.css
index f40a4c4eb..af2af0e1b 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Video/video.m.css
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Video/video.m.css
@@ -1,4 +1,3 @@
-/*eslint-disable scss/operator-no-unspaced */
 .container {
   :global {
     .youtube-playBtn {
@@ -43,18 +42,21 @@
         bottom: 0;
         top: 0;
         height: 100%;
-        object-fit: cover;
         width: 100%;
       }
       iframe {
         z-index: var(--z-index-9);
       }
+      img {
+        object-fit: cover;
+      }
     }
 
     .story-element-jsembed .thumbnail-wrapper img {
       width: 100%;
     }
 
+    .brightcove-playBtn,
     .dailymotion-playBtn {
       background-color: var(--arrow-c-invert-mono5);
       border-radius: 50%;
@@ -71,10 +73,12 @@
       transform: translateX(-50%) translateY(-50%);
     }
 
+    .brightcove-playBtn:hover,
     .dailymotion-playBtn:hover {
       background-color: var(--arrow-c-brand1);
     }
 
+    .brightcove-playBtn::after,
     .dailymotion-playBtn::after {
       position: relative;
       content: "";
@@ -88,3 +92,29 @@
     }
   }
 }
+
+.wrapper,
+.container :global(.brightcove-wrapper) {
+  position: relative;
+  padding-top: 56.25%;
+}
+
+.wrapper :global(.story-element-jsembed-dailymotion-video),
+.wrapper :global(.story-element-youtube-video) iframe,
+.container :global(.brightcove-poster),
+.container :global(.brightcove-poster-fallback),
+.container :global(.brightcove-player),
+.container :global(.brightcove-player .video-js) {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.container.dark :global(.brightcove-poster-fallback) {
+  background-color: black;
+}
+
+.container.light :global(.brightcove-poster-fallback) {
+  background-color: #363636;
+}
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/imageGallery/image-gallery.m.css b/app/isomorphic/arrow/components/Atoms/StoryElements/imageGallery/image-gallery.m.css
index c8e08d45a..37ab3d18c 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/imageGallery/image-gallery.m.css
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/imageGallery/image-gallery.m.css
@@ -1,4 +1,4 @@
-@value viewports: "../../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 
 .image-gallery {
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/imageGallery/index.js b/app/isomorphic/arrow/components/Atoms/StoryElements/imageGallery/index.js
index 57ed5f329..8327cde2f 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/imageGallery/index.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/imageGallery/index.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import React from "react";
 import PropTypes from "prop-types";
 import { ResponsiveImage } from "@quintype/components";
@@ -21,32 +20,24 @@ const ImageGalleryBase = ({ element, template = "", opts = {}, story = {}, confi
   const classes = template === "template-2" ? "template-2" : "";
   const hyperlinkClass = (hyperlink) => (hyperlink ? "hyperlink-gallery-image" : "");
 
-  const LeftImages = () => {
-    const imageCountDesktop = imageBaseOnTemp > 6 && imageArr.length - 6;
-    const imageCountMobile = imageBaseOnTemp > 4 && imageArr.length - 4;
-    const imageCount = isMobile ? imageCountMobile : imageCountDesktop;
-    return <div styleName="left-images">{imageCount}</div>;
-  };
-
   const ImageGalleryImagesTemplate = ({ onClickHandler }) => {
     const images = renderImage.map((image, index) => (
-      <div key={index} styleName={hyperlinkClass(image.hyperlink)}>
+      <div key={index} styleName={hyperlinkClass(image["hyperlink"])}>
         <figure
           key={index}
           data-text-id={`image-${index}`}
           styleName={`image ${classes}`}
-          onClick={() => onClickHandler && onClickHandler(index)}
-        >
+          onClick={() => onClickHandler && onClickHandler(index)}>
           <ResponsiveImage
             slug={image["image-s3-key"]}
             metadata={image["image-metadata"]}
-            alt={image.title}
+            alt={image["title"]}
             aspectRatio={[1, 1]}
             defaultWidth={640}
             imgParams={{ auto: ["format", "compress"] }}
           />
         </figure>
-        {image.hyperlink && <HyperLink hyperLink={image.hyperlink} />}
+        {image["hyperlink"] && <HyperLink hyperLink={image["hyperlink"]} />}
       </div>
     ));
 
@@ -55,15 +46,14 @@ const ImageGalleryBase = ({ element, template = "", opts = {}, story = {}, confi
         styleName="image-gallery"
         className=" arrow-component arr--image-element"
         {...restProps}
-        data-test-id="image-gallery"
-      >
+        data-test-id="image-gallery">
         {images}
       </div>
     );
   };
 
   ImageGalleryImagesTemplate.propTypes = {
-    onClickHandler: PropTypes.func,
+    onClickHandler: PropTypes.func
   };
 
   return <FullScreenImages template={ImageGalleryImagesTemplate} element={element} />;
@@ -71,12 +61,12 @@ const ImageGalleryBase = ({ element, template = "", opts = {}, story = {}, confi
 
 ImageGalleryBase.propTypes = {
   element: PropTypes.shape({
-    "story-elements": PropTypes.array,
+    "story-elements": PropTypes.array
   }),
   opts: PropTypes.shape({ imageWidths: PropTypes.array }),
   story: shapeStory,
   config: shapeConfig,
-  template: PropTypes.string,
+  template: PropTypes.string
 };
 
 export const ImageGallery = withElementWrapper(ImageGalleryBase);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/imageGallery/stories.js b/app/isomorphic/arrow/components/Atoms/StoryElements/imageGallery/stories.js
index e52770333..61c1c0002 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/imageGallery/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/imageGallery/stories.js
@@ -7,7 +7,7 @@ import { generateStoryElementData } from "../../../Fixture";
 const element = generateStoryElementData("image-gallery");
 const imgaeGalleryTemplate = {
   default: "",
-  template2: "template-2",
+  template2: "template-2"
 };
 
 withStore(
@@ -15,9 +15,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 ).add("Default", () => <ImageGallery element={element} template={optionalSelect("templates", imgaeGalleryTemplate)} />);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/withElementWrapper.js b/app/isomorphic/arrow/components/Atoms/StoryElements/withElementWrapper.js
index 91ffd51e6..3ca5faa14 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/withElementWrapper.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/withElementWrapper.js
@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name, react/prop-types */
 import React from "react";
 import PropTypes from "prop-types";
 
@@ -10,5 +9,5 @@ export const withElementWrapper = (StoryElement) => (props) => {
 };
 
 withElementWrapper.propTypes = {
-  StoryElement: PropTypes.element,
+  StoryElement: PropTypes.element
 };
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/withElementWrapper.test.js b/app/isomorphic/arrow/components/Atoms/StoryElements/withElementWrapper.test.js
index e3bb59ac1..b34279a56 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/withElementWrapper.test.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/withElementWrapper.test.js
@@ -8,7 +8,7 @@ describe("Story Element Wrapper", () => {
     description: "",
     type: "text",
     metadata: {},
-    text: "<p>Coronavirus in India News Live Updates</p>",
+    text: "<p>Coronavirus in India News Live Updates</p>"
   };
   const StoryElement = ({ element }) => <div dangerouslySetInnerHTML={{ __html: element.text }} />;
   const Component = withElementWrapper(StoryElement);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryHeadline/index.js b/app/isomorphic/arrow/components/Atoms/StoryHeadline/index.js
index b71b2bc7f..743269517 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryHeadline/index.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryHeadline/index.js
@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import get from "lodash/get";
+import get from "lodash.get";
 import { useStateValue } from "../../SharedContext";
 import { getTextColor } from "../../../utils/utils";
 
@@ -31,6 +31,6 @@ StoryHeadline.propTypes = {
   premiumStoryIconConfig: PropTypes.shape({
     iconColor: PropTypes.string,
     iconType: PropTypes.string,
-    enablePremiumStoryIcon: PropTypes.bool,
-  }),
+    enablePremiumStoryIcon: PropTypes.bool
+  })
 };
diff --git a/app/isomorphic/arrow/components/Atoms/StoryReview/README.md b/app/isomorphic/arrow/components/Atoms/StoryReview/README.md
new file mode 100644
index 000000000..ff791ab0e
--- /dev/null
+++ b/app/isomorphic/arrow/components/Atoms/StoryReview/README.md
@@ -0,0 +1,9 @@
+# Story Review
+
+Displays the review title and rating in a review story template.
+
+## Usage
+
+```jsx
+<StoryReview story={story} theme="#ffffff" />
+```
diff --git a/app/isomorphic/arrow/components/Atoms/StoryReview/index.js b/app/isomorphic/arrow/components/Atoms/StoryReview/index.js
new file mode 100644
index 000000000..b4f460b5e
--- /dev/null
+++ b/app/isomorphic/arrow/components/Atoms/StoryReview/index.js
@@ -0,0 +1,39 @@
+import React from "react";
+import PropTypes from "prop-types";
+import get from "lodash/get";
+import { ReviewRating } from "@quintype/components";
+import { getTextColor } from "../../../utils/utils";
+import "./story-review.m.css";
+
+export const StoryReview = (props) => {
+  const storyTemplate = get(props, ["story", "story-template"], "");
+  if (storyTemplate !== "review") return null;
+
+  const reviewTitle = get(props, ["story", "metadata", "review-title"], "");
+  const ratingValue = get(props, ["story", "metadata", "review-rating", "value"], "0");
+  const theme = get(props, ["theme"], "");
+  const textColor = getTextColor(theme);
+
+  return (
+    <div className="arrow-component arr--story-review" styleName="wrapper" data-test-id="story-review">
+      <h5 styleName={`title ${textColor}`}>
+        {reviewTitle}
+        <span styleName="value">({ratingValue} / 5)</span>
+      </h5>
+      <ReviewRating value={ratingValue} />
+    </div>
+  );
+};
+
+StoryReview.propTypes = {
+  story: PropTypes.shape({
+    "story-template": PropTypes.string,
+    metadata: PropTypes.shape({
+      "review-title": PropTypes.string,
+      "review-rating": PropTypes.shape({
+        value: PropTypes.string
+      })
+    })
+  }),
+  theme: PropTypes.string
+};
diff --git a/app/isomorphic/arrow/components/Atoms/StoryReview/stories.js b/app/isomorphic/arrow/components/Atoms/StoryReview/stories.js
new file mode 100644
index 000000000..77bf05fb8
--- /dev/null
+++ b/app/isomorphic/arrow/components/Atoms/StoryReview/stories.js
@@ -0,0 +1,8 @@
+import React from "react";
+import { generateStory } from "../../Fixture";
+import { withStore } from "../../../../storybook";
+import { StoryReview } from "./index";
+import Readme from "./README.md";
+
+const story = generateStory();
+withStore("Atoms/Story Review", {}, Readme).add("Default", () => <StoryReview theme={"#fffff"} story={story} />);
diff --git a/app/isomorphic/arrow/components/Atoms/StoryReview/story-review.m.css b/app/isomorphic/arrow/components/Atoms/StoryReview/story-review.m.css
new file mode 100644
index 000000000..a55c55b63
--- /dev/null
+++ b/app/isomorphic/arrow/components/Atoms/StoryReview/story-review.m.css
@@ -0,0 +1,27 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  margin: var(--arrow-spacing-l) 0;
+}
+
+.wrapper:global(.arr--story-review) .title {
+  font-size: var(--arrow-fs-m);
+}
+
+.value {
+  font-style: italic;
+  font-weight: var(--arrow-fw-normal);
+  margin: 0 0 0 var(--arrow-spacing-xxs);
+}
+
+.wrapper:global(.arr--story-review .review-rating) {
+  margin: 0 var(--arrow-spacing-m);
+}
+
+.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono2);
+}
diff --git a/app/isomorphic/arrow/components/Atoms/StoryTags/index.js b/app/isomorphic/arrow/components/Atoms/StoryTags/index.js
index f3be476e8..1665187ac 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryTags/index.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryTags/index.js
@@ -1,5 +1,5 @@
 import React from "react";
-import get from "lodash/get";
+import get from "lodash.get";
 import PropTypes, { string } from "prop-types";
 import { useStateValue } from "../../SharedContext";
 import { Link } from "@quintype/components";
@@ -16,7 +16,7 @@ export const StoryTags = ({ tags = [], template = "", config, borderColor = "" }
       {tags.length > 0 &&
         tags.map((tag, index) => (
           <div styleName={`tags ${templateStyle} ${textColor}`} key={index} data-test-id="story-tag">
-            <Link href={`${mountAt}/topic/` + tag.slug} aria-label="story-tag-name">
+            <Link href={`${mountAt}/topic/` + encodeURIComponent(tag.slug)} aria-label="story-tag-name">
               {tag.name}
             </Link>
           </div>
@@ -29,5 +29,5 @@ StoryTags.propTypes = {
   tags: PropTypes.array,
   borderColor: PropTypes.string,
   config: PropTypes.object,
-  template: string,
+  template: string
 };
diff --git a/app/isomorphic/arrow/components/Atoms/StoryTags/stories.js b/app/isomorphic/arrow/components/Atoms/StoryTags/stories.js
index 2959176e1..dc29d0488 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryTags/stories.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryTags/stories.js
@@ -8,7 +8,7 @@ const story = generateStory();
 
 const templateStyles = {
   default: "",
-  "Round corners": "roundCorners",
+  "Round corners": "roundCorners"
 };
 
 withStore(
@@ -17,9 +17,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 ).add("Default", () => <StoryTags tags={story.tags} template={optionalSelect("Tag Styles", templateStyles)} />);
diff --git a/app/isomorphic/arrow/components/Atoms/Subheadline/index.js b/app/isomorphic/arrow/components/Atoms/Subheadline/index.js
index 0636a7f4b..276ad1a6a 100644
--- a/app/isomorphic/arrow/components/Atoms/Subheadline/index.js
+++ b/app/isomorphic/arrow/components/Atoms/Subheadline/index.js
@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import get from "lodash/get";
+import get from "lodash.get";
 import { useStateValue } from "../../SharedContext";
 
 import { getTextColor, truncate } from "../../../utils/utils";
@@ -14,7 +14,7 @@ export const Subheadline = ({
   lineClamp,
   clazzName = "",
   forceShowAtom,
-  showFullContent,
+  showFullContent
 }) => {
   const config = useStateValue() || {};
   const subheadline = forceShowAtom || get(config, ["showSubheadline"], true);
@@ -25,11 +25,10 @@ export const Subheadline = ({
     <div
       className={`p-alt arr--sub-headline arrow-component ${clazzName}`}
       style={{
-        WebkitLineClamp: lineClamp,
+        WebkitLineClamp: lineClamp || "none"
       }}
       styleName={`subheadline ${textColor}`}
-      data-test-id="subheadline"
-    >
+      data-test-id="subheadline">
       {showFullContent || typeof lineClamp === "number"
         ? story.subheadline
         : truncate(story.subheadline, truncateChars, true)}
@@ -46,10 +45,10 @@ Subheadline.propTypes = {
   truncateChars: PropTypes.number,
   clazzName: PropTypes.string,
   forceShowAtom: PropTypes.bool,
-  showFullContent: PropTypes.bool,
+  showFullContent: PropTypes.bool
 };
 
 Subheadline.defaultProps = {
   forceShowAtom: false,
-  showFullContent: false,
+  showFullContent: false
 };
diff --git a/app/isomorphic/arrow/components/Atoms/TimeStamp/index.js b/app/isomorphic/arrow/components/Atoms/TimeStamp/index.js
index 6c3206b02..166ea5826 100644
--- a/app/isomorphic/arrow/components/Atoms/TimeStamp/index.js
+++ b/app/isomorphic/arrow/components/Atoms/TimeStamp/index.js
@@ -1,31 +1,47 @@
 import React from "react";
-import get from "lodash/get";
+import get from "lodash.get";
 import { useSelector } from "react-redux";
 import { useStateValue } from "../../SharedContext";
-import { formatter, getTextColor, getTimeStamp } from "../../../utils/utils";
+import { formatter, getStoryTemplate, getTextColor, getTimeStamp } from "../../../utils/utils";
 import PropTypes from "prop-types";
 import "./timestamp.m.css";
 
-export const TimeStamp = ({ story, isBottom, config = {} }) => {
+const timeMapping = {
+  published: "first-published-at",
+  updated: "last-published-at"
+};
+
+export const TimeStamp = ({ story, config = {} }) => {
   const configState = useStateValue() || {};
   const isTime = get(config, ["showTime"], get(configState, ["showTime"], true));
-  const time = story["last-published-at"] || story["first-published-at"];
-  const isBottomClasses = isBottom ? "bottom-fix" : "";
+  let time = story["first-published-at"] || story["last-published-at"];
   const textColor = getTextColor(configState.theme);
-  const isLocalizedNumber = useSelector((state) => get(state, ["qt", "config", "isLocalizedNumber"], false));
-  const languageCode = isLocalizedNumber
-    ? useSelector((state) => get(state, ["qt", "config", "language", "ietf-code"], "en"))
-    : "en";
+  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+  const isLocalizedNumber = get(qtConfig, ["isLocalizedNumber"], false);
+
+  const languageCode = get(qtConfig, ["language", "ietf-code"], "en");
+
+  const storyCardTime = get(qtConfig, ["pagebuilder-config", "general", "storyCardTime"], null);
+  const storyTemplate = getStoryTemplate(story, get(qtConfig, ["pagebuilder-config"], {}));
+
+  if (storyCardTime) {
+    const storyTime = storyTemplate === "live-blog" ? storyCardTime["liveBlog"] : storyCardTime["rest"];
+    if (storyTime) {
+      const mappedTime = timeMapping[storyTime];
+      time = story[mappedTime] || time;
+    }
+  }
+  const timeAgoFormat = get(
+    qtConfig,
+    ["pagebuilder-config", "general", "timeAgoFormat"],
+    get(configState, ["timeAgoFormat"], "time unit ago")
+  );
 
   return (
     <>
       {isTime && (
-        <div
-          className="time arr--publish-time"
-          styleName={`time  ${textColor} ${isBottomClasses}`}
-          data-test-id="publish-time"
-        >
-          <div styleName="time-wrapper">{getTimeStamp(time, formatter, config, languageCode)}</div>
+        <div className="time arr--publish-time" styleName={`time ${textColor}`} data-test-id="publish-time">
+          <div>{getTimeStamp(time, formatter, config, languageCode, "", "", isLocalizedNumber, timeAgoFormat)}</div>
         </div>
       )}
     </>
@@ -35,7 +51,5 @@ export const TimeStamp = ({ story, isBottom, config = {} }) => {
 TimeStamp.propTypes = {
   /** The Story Object from the API response */
   story: PropTypes.object,
-  isBottom: PropTypes.bool,
-  config: PropTypes.object,
-  languageCode: PropTypes.string,
+  config: PropTypes.object
 };
diff --git a/app/isomorphic/arrow/components/Atoms/TimeStamp/timestamp.m.css b/app/isomorphic/arrow/components/Atoms/TimeStamp/timestamp.m.css
index 5b6d4ec74..c0eff9236 100644
--- a/app/isomorphic/arrow/components/Atoms/TimeStamp/timestamp.m.css
+++ b/app/isomorphic/arrow/components/Atoms/TimeStamp/timestamp.m.css
@@ -2,11 +2,6 @@
 
 .time {
   display: flex;
-  margin-bottom: 2px;
-}
-
-.time-wrapper {
-  margin-bottom: var(--arrow-spacing-xxs);
 }
 
 .bottom-fix {
diff --git a/app/isomorphic/arrow/components/Fixture/dummy-collection.js b/app/isomorphic/arrow/components/Fixture/dummy-collection.js
index 8227fc012..edce5e42b 100644
--- a/app/isomorphic/arrow/components/Fixture/dummy-collection.js
+++ b/app/isomorphic/arrow/components/Fixture/dummy-collection.js
@@ -21,8 +21,8 @@ export const dummyCollection = {
         seo: {
           "meta-description": "Meta description",
           "claim-reviews": {
-            story: null,
-          },
+            story: null
+          }
         },
         "assignee-id": 299252,
         "author-name": "Ashwini Mohan",
@@ -32,8 +32,8 @@ export const dummyCollection = {
             name: "news",
             "meta-description": null,
             slug: "news",
-            "tag-type": "Tag",
-          },
+            "tag-type": "Tag"
+          }
         ],
         headline: "Untitled Sep 20, 2019 04:30 PM",
         "storyline-id": null,
@@ -55,14 +55,14 @@ export const dummyCollection = {
             collection: {
               slug: "business1",
               name: "Business News",
-              id: 2729,
+              id: 2729
             },
-            data: null,
-          },
+            data: null
+          }
         ],
         "story-audio": {
           "s3-key":
-            "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3",
+            "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3"
         },
         "access-level-value": null,
         "content-created-at": 1568977220927,
@@ -73,7 +73,7 @@ export const dummyCollection = {
         "hero-image-metadata": {
           width: 1024,
           height: 576,
-          "focus-point": [676, 312],
+          "focus-point": [676, 312]
         },
         comments: null,
         entities: {},
@@ -106,7 +106,7 @@ export const dummyCollection = {
                 url: "https://www.youtube.com/watch?v=OY9Oq3hp0YU&feature=youtu.be",
                 "embed-url": "https://www.youtube.com/embed/OY9Oq3hp0YU",
                 metadata: {},
-                subtype: null,
+                subtype: null
               },
               {
                 id: "00000000-0000-0000-0000-000000000000",
@@ -116,9 +116,9 @@ export const dummyCollection = {
                 type: "text",
                 text: '<p>text <a href="https://ace-web.qtstage.io/">promotional</a> message</p>',
                 metadata: {
-                  "promotional-message": true,
-                },
-              },
+                  "promotional-message": true
+                }
+              }
             ],
             "card-updated-at": 1568977881112,
             "content-version-id": "1cd5ea42-6751-4ec6-a161-395f3326ce00",
@@ -133,20 +133,21 @@ export const dummyCollection = {
                 title: "Untitled Sep 20, 2019 04:30 PM",
                 message: "Social Description",
                 image: {
-                  key: "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+                  key:
+                    "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
                   url: null,
                   attribution: "attribution",
                   caption: "caption",
                   metadata: {
                     width: 1024,
                     height: 576,
-                    "focus-point": [676, 312],
-                  },
-                },
+                    "focus-point": [676, 312]
+                  }
+                }
               },
-              attributes: {},
-            },
-          },
+              attributes: {}
+            }
+          }
         ],
         url: "https://ace-web.qtstage.io/recent-stories/news/business/untitled-sep-20-2019-0430-pm",
         "story-version-id": "a64fe8b4-c0aa-4bd5-93a2-6e428332e5b2",
@@ -175,18 +176,18 @@ export const dummyCollection = {
             bio: null,
             "contributor-role": {
               id: 873,
-              name: "Author",
-            },
-          },
+              name: "Author"
+            }
+          }
         ],
         metadata: {
           "card-share": {
-            shareable: false,
-          },
+            shareable: false
+          }
         },
         "publish-at": null,
-        "assignee-name": "Ashwini Mohan",
-      },
+        "assignee-name": "Ashwini Mohan"
+      }
     },
     {
       id: "b4f33f98-8814-4675-97f0-75e447e43ab8",
@@ -197,8 +198,8 @@ export const dummyCollection = {
         seo: {
           "meta-description": "Meta description",
           "claim-reviews": {
-            story: null,
-          },
+            story: null
+          }
         },
         "assignee-id": 299252,
         "author-name": "Ashwini Mohan",
@@ -208,8 +209,8 @@ export const dummyCollection = {
             name: "news",
             "meta-description": null,
             slug: "news",
-            "tag-type": "Tag",
-          },
+            "tag-type": "Tag"
+          }
         ],
         headline: "Untitled Sep 20, 2019 04:30 PM",
         "storyline-id": null,
@@ -231,14 +232,14 @@ export const dummyCollection = {
             collection: {
               slug: "business1",
               name: "Business News",
-              id: 2729,
+              id: 2729
             },
-            data: null,
-          },
+            data: null
+          }
         ],
         "story-audio": {
           "s3-key":
-            "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3",
+            "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3"
         },
         "access-level-value": null,
         "content-created-at": 1568977220927,
@@ -249,7 +250,7 @@ export const dummyCollection = {
         "hero-image-metadata": {
           width: 1024,
           height: 576,
-          "focus-point": [676, 312],
+          "focus-point": [676, 312]
         },
         comments: null,
         entities: {},
@@ -282,7 +283,7 @@ export const dummyCollection = {
                 url: "https://www.youtube.com/watch?v=OY9Oq3hp0YU&feature=youtu.be",
                 "embed-url": "https://www.youtube.com/embed/OY9Oq3hp0YU",
                 metadata: {},
-                subtype: null,
+                subtype: null
               },
               {
                 id: "00000000-0000-0000-0000-000000000000",
@@ -292,9 +293,9 @@ export const dummyCollection = {
                 type: "text",
                 text: '<p>text <a href="https://ace-web.qtstage.io/">promotional</a> message</p>',
                 metadata: {
-                  "promotional-message": true,
-                },
-              },
+                  "promotional-message": true
+                }
+              }
             ],
             "card-updated-at": 1568977881112,
             "content-version-id": "1cd5ea42-6751-4ec6-a161-395f3326ce00",
@@ -309,20 +310,21 @@ export const dummyCollection = {
                 title: "Untitled Sep 20, 2019 04:30 PM",
                 message: "Social Description",
                 image: {
-                  key: "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+                  key:
+                    "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
                   url: null,
                   attribution: "attribution",
                   caption: "caption",
                   metadata: {
                     width: 1024,
                     height: 576,
-                    "focus-point": [676, 312],
-                  },
-                },
+                    "focus-point": [676, 312]
+                  }
+                }
               },
-              attributes: {},
-            },
-          },
+              attributes: {}
+            }
+          }
         ],
         url: "https://ace-web.qtstage.io/recent-stories/news/business/untitled-sep-20-2019-0430-pm",
         "story-version-id": "a64fe8b4-c0aa-4bd5-93a2-6e428332e5b2",
@@ -351,18 +353,18 @@ export const dummyCollection = {
             bio: null,
             "contributor-role": {
               id: 873,
-              name: "Author",
-            },
-          },
+              name: "Author"
+            }
+          }
         ],
         metadata: {
           "card-share": {
-            shareable: false,
-          },
+            shareable: false
+          }
         },
         "publish-at": null,
-        "assignee-name": "Ashwini Mohan",
-      },
+        "assignee-name": "Ashwini Mohan"
+      }
     },
     {
       id: "b4f33f98-8814-4675-97f0-75e447e43ab8",
@@ -373,8 +375,8 @@ export const dummyCollection = {
         seo: {
           "meta-description": "Meta description",
           "claim-reviews": {
-            story: null,
-          },
+            story: null
+          }
         },
         "assignee-id": 299252,
         "author-name": "Ashwini Mohan",
@@ -384,8 +386,8 @@ export const dummyCollection = {
             name: "news",
             "meta-description": null,
             slug: "news",
-            "tag-type": "Tag",
-          },
+            "tag-type": "Tag"
+          }
         ],
         headline: "Untitled Sep 20, 2019 04:30 PM",
         "storyline-id": null,
@@ -407,14 +409,14 @@ export const dummyCollection = {
             collection: {
               slug: "business1",
               name: "Business News",
-              id: 2729,
+              id: 2729
             },
-            data: null,
-          },
+            data: null
+          }
         ],
         "story-audio": {
           "s3-key":
-            "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3",
+            "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3"
         },
         "access-level-value": null,
         "content-created-at": 1568977220927,
@@ -425,7 +427,7 @@ export const dummyCollection = {
         "hero-image-metadata": {
           width: 1024,
           height: 576,
-          "focus-point": [676, 312],
+          "focus-point": [676, 312]
         },
         comments: null,
         entities: {},
@@ -458,7 +460,7 @@ export const dummyCollection = {
                 url: "https://www.youtube.com/watch?v=OY9Oq3hp0YU&feature=youtu.be",
                 "embed-url": "https://www.youtube.com/embed/OY9Oq3hp0YU",
                 metadata: {},
-                subtype: null,
+                subtype: null
               },
               {
                 id: "00000000-0000-0000-0000-000000000000",
@@ -468,9 +470,9 @@ export const dummyCollection = {
                 type: "text",
                 text: '<p>text <a href="https://ace-web.qtstage.io/">promotional</a> message</p>',
                 metadata: {
-                  "promotional-message": true,
-                },
-              },
+                  "promotional-message": true
+                }
+              }
             ],
             "card-updated-at": 1568977881112,
             "content-version-id": "1cd5ea42-6751-4ec6-a161-395f3326ce00",
@@ -485,20 +487,21 @@ export const dummyCollection = {
                 title: "Untitled Sep 20, 2019 04:30 PM",
                 message: "Social Description",
                 image: {
-                  key: "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+                  key:
+                    "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
                   url: null,
                   attribution: "attribution",
                   caption: "caption",
                   metadata: {
                     width: 1024,
                     height: 576,
-                    "focus-point": [676, 312],
-                  },
-                },
+                    "focus-point": [676, 312]
+                  }
+                }
               },
-              attributes: {},
-            },
-          },
+              attributes: {}
+            }
+          }
         ],
         url: "https://ace-web.qtstage.io/recent-stories/news/business/untitled-sep-20-2019-0430-pm",
         "story-version-id": "a64fe8b4-c0aa-4bd5-93a2-6e428332e5b2",
@@ -527,18 +530,18 @@ export const dummyCollection = {
             bio: null,
             "contributor-role": {
               id: 873,
-              name: "Author",
-            },
-          },
+              name: "Author"
+            }
+          }
         ],
         metadata: {
           "card-share": {
-            shareable: false,
-          },
+            shareable: false
+          }
         },
         "publish-at": null,
-        "assignee-name": "Ashwini Mohan",
-      },
+        "assignee-name": "Ashwini Mohan"
+      }
     },
     {
       id: "b4f33f98-8814-4675-97f0-75e447e43ab8",
@@ -549,8 +552,8 @@ export const dummyCollection = {
         seo: {
           "meta-description": "Meta description",
           "claim-reviews": {
-            story: null,
-          },
+            story: null
+          }
         },
         "assignee-id": 299252,
         "author-name": "Ashwini Mohan",
@@ -560,8 +563,8 @@ export const dummyCollection = {
             name: "news",
             "meta-description": null,
             slug: "news",
-            "tag-type": "Tag",
-          },
+            "tag-type": "Tag"
+          }
         ],
         headline: "Untitled Sep 20, 2019 04:30 PM",
         "storyline-id": null,
@@ -583,14 +586,14 @@ export const dummyCollection = {
             collection: {
               slug: "business1",
               name: "Business News",
-              id: 2729,
+              id: 2729
             },
-            data: null,
-          },
+            data: null
+          }
         ],
         "story-audio": {
           "s3-key":
-            "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3",
+            "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3"
         },
         "access-level-value": null,
         "content-created-at": 1568977220927,
@@ -601,7 +604,7 @@ export const dummyCollection = {
         "hero-image-metadata": {
           width: 1024,
           height: 576,
-          "focus-point": [676, 312],
+          "focus-point": [676, 312]
         },
         comments: null,
         entities: {},
@@ -634,7 +637,7 @@ export const dummyCollection = {
                 url: "https://www.youtube.com/watch?v=OY9Oq3hp0YU&feature=youtu.be",
                 "embed-url": "https://www.youtube.com/embed/OY9Oq3hp0YU",
                 metadata: {},
-                subtype: null,
+                subtype: null
               },
               {
                 id: "00000000-0000-0000-0000-000000000000",
@@ -644,9 +647,9 @@ export const dummyCollection = {
                 type: "text",
                 text: '<p>text <a href="https://ace-web.qtstage.io/">promotional</a> message</p>',
                 metadata: {
-                  "promotional-message": true,
-                },
-              },
+                  "promotional-message": true
+                }
+              }
             ],
             "card-updated-at": 1568977881112,
             "content-version-id": "1cd5ea42-6751-4ec6-a161-395f3326ce00",
@@ -661,20 +664,21 @@ export const dummyCollection = {
                 title: "Untitled Sep 20, 2019 04:30 PM",
                 message: "Social Description",
                 image: {
-                  key: "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+                  key:
+                    "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
                   url: null,
                   attribution: "attribution",
                   caption: "caption",
                   metadata: {
                     width: 1024,
                     height: 576,
-                    "focus-point": [676, 312],
-                  },
-                },
+                    "focus-point": [676, 312]
+                  }
+                }
               },
-              attributes: {},
-            },
-          },
+              attributes: {}
+            }
+          }
         ],
         url: "https://ace-web.qtstage.io/recent-stories/news/business/untitled-sep-20-2019-0430-pm",
         "story-version-id": "a64fe8b4-c0aa-4bd5-93a2-6e428332e5b2",
@@ -703,18 +707,18 @@ export const dummyCollection = {
             bio: null,
             "contributor-role": {
               id: 873,
-              name: "Author",
-            },
-          },
+              name: "Author"
+            }
+          }
         ],
         metadata: {
           "card-share": {
-            shareable: false,
-          },
+            shareable: false
+          }
         },
         "publish-at": null,
-        "assignee-name": "Ashwini Mohan",
-      },
+        "assignee-name": "Ashwini Mohan"
+      }
     },
     {
       id: "b4f33f98-8814-4675-97f0-75e447e43ab8",
@@ -725,8 +729,8 @@ export const dummyCollection = {
         seo: {
           "meta-description": "Meta description",
           "claim-reviews": {
-            story: null,
-          },
+            story: null
+          }
         },
         "assignee-id": 299252,
         "author-name": "Ashwini Mohan",
@@ -736,8 +740,8 @@ export const dummyCollection = {
             name: "news",
             "meta-description": null,
             slug: "news",
-            "tag-type": "Tag",
-          },
+            "tag-type": "Tag"
+          }
         ],
         headline: "Untitled Sep 20, 2019 04:30 PM",
         "storyline-id": null,
@@ -759,14 +763,14 @@ export const dummyCollection = {
             collection: {
               slug: "business1",
               name: "Business News",
-              id: 2729,
+              id: 2729
             },
-            data: null,
-          },
+            data: null
+          }
         ],
         "story-audio": {
           "s3-key":
-            "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3",
+            "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3"
         },
         "access-level-value": null,
         "content-created-at": 1568977220927,
@@ -777,7 +781,7 @@ export const dummyCollection = {
         "hero-image-metadata": {
           width: 1024,
           height: 576,
-          "focus-point": [676, 312],
+          "focus-point": [676, 312]
         },
         comments: null,
         entities: {},
@@ -810,7 +814,7 @@ export const dummyCollection = {
                 url: "https://www.youtube.com/watch?v=OY9Oq3hp0YU&feature=youtu.be",
                 "embed-url": "https://www.youtube.com/embed/OY9Oq3hp0YU",
                 metadata: {},
-                subtype: null,
+                subtype: null
               },
               {
                 id: "00000000-0000-0000-0000-000000000000",
@@ -820,9 +824,9 @@ export const dummyCollection = {
                 type: "text",
                 text: '<p>text <a href="https://ace-web.qtstage.io/">promotional</a> message</p>',
                 metadata: {
-                  "promotional-message": true,
-                },
-              },
+                  "promotional-message": true
+                }
+              }
             ],
             "card-updated-at": 1568977881112,
             "content-version-id": "1cd5ea42-6751-4ec6-a161-395f3326ce00",
@@ -837,20 +841,21 @@ export const dummyCollection = {
                 title: "Untitled Sep 20, 2019 04:30 PM",
                 message: "Social Description",
                 image: {
-                  key: "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+                  key:
+                    "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
                   url: null,
                   attribution: "attribution",
                   caption: "caption",
                   metadata: {
                     width: 1024,
                     height: 576,
-                    "focus-point": [676, 312],
-                  },
-                },
+                    "focus-point": [676, 312]
+                  }
+                }
               },
-              attributes: {},
-            },
-          },
+              attributes: {}
+            }
+          }
         ],
         url: "https://ace-web.qtstage.io/recent-stories/news/business/untitled-sep-20-2019-0430-pm",
         "story-version-id": "a64fe8b4-c0aa-4bd5-93a2-6e428332e5b2",
@@ -879,18 +884,18 @@ export const dummyCollection = {
             bio: null,
             "contributor-role": {
               id: 873,
-              name: "Author",
-            },
-          },
+              name: "Author"
+            }
+          }
         ],
         metadata: {
           "card-share": {
-            shareable: false,
-          },
+            shareable: false
+          }
         },
         "publish-at": null,
-        "assignee-name": "Ashwini Mohan",
-      },
+        "assignee-name": "Ashwini Mohan"
+      }
     },
     {
       id: "b4f33f98-8814-4675-97f0-75e447e43ab8",
@@ -901,8 +906,8 @@ export const dummyCollection = {
         seo: {
           "meta-description": "Meta description",
           "claim-reviews": {
-            story: null,
-          },
+            story: null
+          }
         },
         "assignee-id": 299252,
         "author-name": "Ashwini Mohan",
@@ -912,8 +917,8 @@ export const dummyCollection = {
             name: "news",
             "meta-description": null,
             slug: "news",
-            "tag-type": "Tag",
-          },
+            "tag-type": "Tag"
+          }
         ],
         headline: "Untitled Sep 20, 2019 04:30 PM",
         "storyline-id": null,
@@ -935,14 +940,14 @@ export const dummyCollection = {
             collection: {
               slug: "business1",
               name: "Business News",
-              id: 2729,
+              id: 2729
             },
-            data: null,
-          },
+            data: null
+          }
         ],
         "story-audio": {
           "s3-key":
-            "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3",
+            "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3"
         },
         "access-level-value": null,
         "content-created-at": 1568977220927,
@@ -953,7 +958,7 @@ export const dummyCollection = {
         "hero-image-metadata": {
           width: 1024,
           height: 576,
-          "focus-point": [676, 312],
+          "focus-point": [676, 312]
         },
         comments: null,
         entities: {},
@@ -986,7 +991,7 @@ export const dummyCollection = {
                 url: "https://www.youtube.com/watch?v=OY9Oq3hp0YU&feature=youtu.be",
                 "embed-url": "https://www.youtube.com/embed/OY9Oq3hp0YU",
                 metadata: {},
-                subtype: null,
+                subtype: null
               },
               {
                 id: "00000000-0000-0000-0000-000000000000",
@@ -996,9 +1001,9 @@ export const dummyCollection = {
                 type: "text",
                 text: '<p>text <a href="https://ace-web.qtstage.io/">promotional</a> message</p>',
                 metadata: {
-                  "promotional-message": true,
-                },
-              },
+                  "promotional-message": true
+                }
+              }
             ],
             "card-updated-at": 1568977881112,
             "content-version-id": "1cd5ea42-6751-4ec6-a161-395f3326ce00",
@@ -1013,20 +1018,21 @@ export const dummyCollection = {
                 title: "Untitled Sep 20, 2019 04:30 PM",
                 message: "Social Description",
                 image: {
-                  key: "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+                  key:
+                    "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
                   url: null,
                   attribution: "attribution",
                   caption: "caption",
                   metadata: {
                     width: 1024,
                     height: 576,
-                    "focus-point": [676, 312],
-                  },
-                },
+                    "focus-point": [676, 312]
+                  }
+                }
               },
-              attributes: {},
-            },
-          },
+              attributes: {}
+            }
+          }
         ],
         url: "https://ace-web.qtstage.io/recent-stories/news/business/untitled-sep-20-2019-0430-pm",
         "story-version-id": "a64fe8b4-c0aa-4bd5-93a2-6e428332e5b2",
@@ -1055,18 +1061,18 @@ export const dummyCollection = {
             bio: null,
             "contributor-role": {
               id: 873,
-              name: "Author",
-            },
-          },
+              name: "Author"
+            }
+          }
         ],
         metadata: {
           "card-share": {
-            shareable: false,
-          },
+            shareable: false
+          }
         },
         "publish-at": null,
-        "assignee-name": "Ashwini Mohan",
-      },
+        "assignee-name": "Ashwini Mohan"
+      }
     },
     {
       id: 40827,
@@ -1076,9 +1082,9 @@ export const dummyCollection = {
       slug: "col02",
       template: "default",
       metadata: {
-        "cover-image": {},
+        "cover-image": {}
       },
-      "collection-date": null,
+      "collection-date": null
     },
     {
       id: "b4f33f98-8814-4675-97f0-75e447e43ab8",
@@ -1089,8 +1095,8 @@ export const dummyCollection = {
         seo: {
           "meta-description": "Meta description",
           "claim-reviews": {
-            story: null,
-          },
+            story: null
+          }
         },
         "assignee-id": 299252,
         "author-name": "Ashwini Mohan",
@@ -1100,8 +1106,8 @@ export const dummyCollection = {
             name: "news",
             "meta-description": null,
             slug: "news",
-            "tag-type": "Tag",
-          },
+            "tag-type": "Tag"
+          }
         ],
         headline: "Untitled Sep 20, 2019 04:30 PM",
         "storyline-id": null,
@@ -1123,14 +1129,14 @@ export const dummyCollection = {
             collection: {
               slug: "business1",
               name: "Business News",
-              id: 2729,
+              id: 2729
             },
-            data: null,
-          },
+            data: null
+          }
         ],
         "story-audio": {
           "s3-key":
-            "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3",
+            "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3"
         },
         "access-level-value": null,
         "content-created-at": 1568977220927,
@@ -1141,7 +1147,7 @@ export const dummyCollection = {
         "hero-image-metadata": {
           width: 1024,
           height: 576,
-          "focus-point": [676, 312],
+          "focus-point": [676, 312]
         },
         comments: null,
         entities: {},
@@ -1174,7 +1180,7 @@ export const dummyCollection = {
                 url: "https://www.youtube.com/watch?v=OY9Oq3hp0YU&feature=youtu.be",
                 "embed-url": "https://www.youtube.com/embed/OY9Oq3hp0YU",
                 metadata: {},
-                subtype: null,
+                subtype: null
               },
               {
                 id: "00000000-0000-0000-0000-000000000000",
@@ -1184,9 +1190,9 @@ export const dummyCollection = {
                 type: "text",
                 text: '<p>text <a href="https://ace-web.qtstage.io/">promotional</a> message</p>',
                 metadata: {
-                  "promotional-message": true,
-                },
-              },
+                  "promotional-message": true
+                }
+              }
             ],
             "card-updated-at": 1568977881112,
             "content-version-id": "1cd5ea42-6751-4ec6-a161-395f3326ce00",
@@ -1201,20 +1207,21 @@ export const dummyCollection = {
                 title: "Untitled Sep 20, 2019 04:30 PM",
                 message: "Social Description",
                 image: {
-                  key: "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+                  key:
+                    "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
                   url: null,
                   attribution: "attribution",
                   caption: "caption",
                   metadata: {
                     width: 1024,
                     height: 576,
-                    "focus-point": [676, 312],
-                  },
-                },
+                    "focus-point": [676, 312]
+                  }
+                }
               },
-              attributes: {},
-            },
-          },
+              attributes: {}
+            }
+          }
         ],
         url: "https://ace-web.qtstage.io/recent-stories/news/business/untitled-sep-20-2019-0430-pm",
         "story-version-id": "a64fe8b4-c0aa-4bd5-93a2-6e428332e5b2",
@@ -1243,18 +1250,18 @@ export const dummyCollection = {
             bio: null,
             "contributor-role": {
               id: 873,
-              name: "Author",
-            },
-          },
+              name: "Author"
+            }
+          }
         ],
         metadata: {
           "card-share": {
-            shareable: false,
-          },
+            shareable: false
+          }
         },
         "publish-at": null,
-        "assignee-name": "Ashwini Mohan",
-      },
+        "assignee-name": "Ashwini Mohan"
+      }
     },
     {
       id: "b4f33f98-8814-4675-97f0-75e447e43ab8",
@@ -1265,8 +1272,8 @@ export const dummyCollection = {
         seo: {
           "meta-description": "Meta description",
           "claim-reviews": {
-            story: null,
-          },
+            story: null
+          }
         },
         "assignee-id": 299252,
         "author-name": "Ashwini Mohan",
@@ -1276,8 +1283,8 @@ export const dummyCollection = {
             name: "news",
             "meta-description": null,
             slug: "news",
-            "tag-type": "Tag",
-          },
+            "tag-type": "Tag"
+          }
         ],
         headline: "Untitled Sep 20, 2019 04:30 PM",
         "storyline-id": null,
@@ -1299,14 +1306,14 @@ export const dummyCollection = {
             collection: {
               slug: "business1",
               name: "Business News",
-              id: 2729,
+              id: 2729
             },
-            data: null,
-          },
+            data: null
+          }
         ],
         "story-audio": {
           "s3-key":
-            "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3",
+            "ace/story-audio/2019-09/b4f33f98-8814-4675-97f0-75e447e43ab8/.01634f09-e91b-442b-90a4-521052bdffaf.mp3"
         },
         "access-level-value": null,
         "content-created-at": 1568977220927,
@@ -1317,7 +1324,7 @@ export const dummyCollection = {
         "hero-image-metadata": {
           width: 1024,
           height: 576,
-          "focus-point": [676, 312],
+          "focus-point": [676, 312]
         },
         comments: null,
         entities: {},
@@ -1350,7 +1357,7 @@ export const dummyCollection = {
                 url: "https://www.youtube.com/watch?v=OY9Oq3hp0YU&feature=youtu.be",
                 "embed-url": "https://www.youtube.com/embed/OY9Oq3hp0YU",
                 metadata: {},
-                subtype: null,
+                subtype: null
               },
               {
                 id: "00000000-0000-0000-0000-000000000000",
@@ -1360,9 +1367,9 @@ export const dummyCollection = {
                 type: "text",
                 text: '<p>text <a href="https://ace-web.qtstage.io/">promotional</a> message</p>',
                 metadata: {
-                  "promotional-message": true,
-                },
-              },
+                  "promotional-message": true
+                }
+              }
             ],
             "card-updated-at": 1568977881112,
             "content-version-id": "1cd5ea42-6751-4ec6-a161-395f3326ce00",
@@ -1377,20 +1384,21 @@ export const dummyCollection = {
                 title: "Untitled Sep 20, 2019 04:30 PM",
                 message: "Social Description",
                 image: {
-                  key: "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
+                  key:
+                    "ace/2019-06/3999bc52-1280-49aa-b542-20cd9e06dd34/The_Secret_to_a_Good_Quality_Sleep_Memory_Foam.jpg",
                   url: null,
                   attribution: "attribution",
                   caption: "caption",
                   metadata: {
                     width: 1024,
                     height: 576,
-                    "focus-point": [676, 312],
-                  },
-                },
+                    "focus-point": [676, 312]
+                  }
+                }
               },
-              attributes: {},
-            },
-          },
+              attributes: {}
+            }
+          }
         ],
         url: "https://ace-web.qtstage.io/recent-stories/news/business/untitled-sep-20-2019-0430-pm",
         "story-version-id": "a64fe8b4-c0aa-4bd5-93a2-6e428332e5b2",
@@ -1419,18 +1427,18 @@ export const dummyCollection = {
             bio: null,
             "contributor-role": {
               id: 873,
-              name: "Author",
-            },
-          },
+              name: "Author"
+            }
+          }
         ],
         metadata: {
           "card-share": {
-            shareable: false,
-          },
+            shareable: false
+          }
         },
         "publish-at": null,
-        "assignee-name": "Ashwini Mohan",
-      },
+        "assignee-name": "Ashwini Mohan"
+      }
     },
     {
       id: 42230,
@@ -1447,13 +1455,13 @@ export const dummyCollection = {
             width: 720,
             "mime-type": "image/jpeg",
             height: 1080,
-            "focus-point": [350, 648],
+            "focus-point": [350, 648]
           },
           "cover-image-s3-key": "ace/2018-10/7caece74-bdc3-4f1e-bcc7-80d7129d770c/trailer.jpeg",
-          caption: "thugs of hindustan",
-        },
+          caption: "thugs of hindustan"
+        }
       },
-      "collection-date": null,
+      "collection-date": null
     },
     {
       id: 67979,
@@ -1463,9 +1471,9 @@ export const dummyCollection = {
       slug: "collectiontest",
       template: "default",
       metadata: {
-        "cover-image": null,
+        "cover-image": null
       },
-      "collection-date": null,
+      "collection-date": null
     },
     {
       id: 68415,
@@ -1475,9 +1483,9 @@ export const dummyCollection = {
       slug: "foo",
       template: "default",
       metadata: {
-        "cover-image": null,
+        "cover-image": null
       },
-      "collection-date": null,
+      "collection-date": null
     },
     {
       id: "7afda60c-1360-4320-bbe2-d6e29a8bcb1d",
@@ -1487,8 +1495,8 @@ export const dummyCollection = {
         "updated-at": 1570786673740,
         seo: {
           "claim-reviews": {
-            story: null,
-          },
+            story: null
+          }
         },
         "assignee-id": 187245,
         "author-name": "Shreya Shukla",
@@ -1509,14 +1517,14 @@ export const dummyCollection = {
                 id: 6449,
                 name: "Current Affairs",
                 slug: "current-affairs",
-                data: null,
-              },
+                data: null
+              }
             ],
             "hero-image-metadata": {
               width: 960,
               "mime-type": "image/png",
               height: 603,
-              "focus-point": [535, 225],
+              "focus-point": [535, 225]
             },
             "hero-image-s3-key": "ace/2018-12/d65b8758-9130-417f-bd97-c181661d6701/cat_1285634_960_720.png",
             url: "https://ace-web.qtstage.io/current-affairs/new-summary-test",
@@ -1534,11 +1542,11 @@ export const dummyCollection = {
                 bio: null,
                 "contributor-role": {
                   id: 873,
-                  name: "Author",
-                },
-              },
-            ],
-          },
+                  name: "Author"
+                }
+              }
+            ]
+          }
         },
         "last-published-at": 1570786676787,
         subheadline:
@@ -1556,14 +1564,14 @@ export const dummyCollection = {
             collection: {
               slug: "health",
               name: "Health",
-              id: 15603,
+              id: 15603
             },
-            data: null,
-          },
+            data: null
+          }
         ],
         "story-audio": {
           "s3-key":
-            "ace/story-audio/2019-10/7afda60c-1360-4320-bbe2-d6e29a8bcb1d/.cd246a47-5dd8-4636-8db7-d15b205ca999.mp3",
+            "ace/story-audio/2019-10/7afda60c-1360-4320-bbe2-d6e29a8bcb1d/.cd246a47-5dd8-4636-8db7-d15b205ca999.mp3"
         },
         "access-level-value": null,
         "content-created-at": 1569910912673,
@@ -1573,7 +1581,7 @@ export const dummyCollection = {
         "publisher-id": 97,
         "hero-image-metadata": {
           width: 266,
-          height: 190,
+          height: 190
         },
         comments: null,
         entities: {},
@@ -1604,8 +1612,9 @@ export const dummyCollection = {
                 id: "14890d2e-936a-459e-aed5-dd8e330c38d3",
                 metadata: {},
                 subtype: "summary",
-                text: "<p>time stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp test</p>",
-              },
+                text:
+                  "<p>time stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp testtime stamp test</p>"
+              }
             ],
             "card-updated-at": 1569910964026,
             "content-version-id": "fcf58ef5-1e24-41b0-ae31-d0de0594cf7f",
@@ -1626,12 +1635,12 @@ export const dummyCollection = {
                   caption: "test image caption ",
                   metadata: {
                     width: 266,
-                    height: 190,
-                  },
-                },
+                    height: 190
+                  }
+                }
               },
-              attributes: {},
-            },
+              attributes: {}
+            }
           },
           {
             "story-elements": [
@@ -1648,12 +1657,12 @@ export const dummyCollection = {
                     "story-content-id": "39b60649-aa6f-49f6-8365-0981b799b3b7",
                     "highlighted-text": "",
                     id: "39b60649-aa6f-49f6-8365-0981b799b3b7",
-                    "highlighted-headline": null,
+                    "highlighted-headline": null
                   },
-                  "linked-story-id": "39b60649-aa6f-49f6-8365-0981b799b3b7",
+                  "linked-story-id": "39b60649-aa6f-49f6-8365-0981b799b3b7"
                 },
                 subtype: "also-read",
-                text: "New Summary test",
+                text: "New Summary test"
               },
               {
                 description: "",
@@ -1664,7 +1673,8 @@ export const dummyCollection = {
                 id: "927048d7-7410-4c11-83df-12ddcc6e0705",
                 metadata: {},
                 subtype: null,
-                text: "<p>n literary theory, a text is any object that can be “read”, whether this object is a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.n literary theory, a text is any object that can be “read”, whether this object is</p> ",
+                text:
+                  "<p>n literary theory, a text is any object that can be “read”, whether this object is a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.n literary theory, a text is any object that can be “read”, whether this object is</p> "
               },
               {
                 description: "",
@@ -1675,8 +1685,9 @@ export const dummyCollection = {
                 id: "1b742dc6-b708-40f4-a365-03340bf111bf",
                 metadata: {},
                 subtype: null,
-                text: "<p>a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.n literary theory, a text is any object that can be “read”, whether this object is a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.</p>",
-              },
+                text:
+                  "<p>a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.n literary theory, a text is any object that can be “read”, whether this object is a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.</p>"
+              }
             ],
             "card-updated-at": 1569910964026,
             "content-version-id": "21fc3ac1-304d-46fe-a467-e114cca94ef7",
@@ -1697,11 +1708,11 @@ export const dummyCollection = {
                   caption: "test image caption ",
                   metadata: {
                     width: 266,
-                    height: 190,
-                  },
-                },
-              },
-            },
+                    height: 190
+                  }
+                }
+              }
+            }
           },
           {
             "story-elements": [
@@ -1714,8 +1725,9 @@ export const dummyCollection = {
                 id: "6afe8b08-59af-4886-8d55-92bbf5fbebeb",
                 metadata: {},
                 subtype: null,
-                text: "<p>a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.n literary theory, a text is any object that can be “read”, whether this object is a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.n literary theory, a text is any object that can be “read”, whether this object is a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.</p>",
-              },
+                text:
+                  "<p>a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.n literary theory, a text is any object that can be “read”, whether this object is a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.n literary theory, a text is any object that can be “read”, whether this object is a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.</p>"
+              }
             ],
             "card-updated-at": 1570786670702,
             "content-version-id": "68b4c7d6-489c-42c3-b61a-83b159168dc3",
@@ -1736,12 +1748,12 @@ export const dummyCollection = {
                   caption: "test image caption ",
                   metadata: {
                     width: 266,
-                    height: 190,
-                  },
-                },
+                    height: 190
+                  }
+                }
               },
-              attributes: {},
-            },
+              attributes: {}
+            }
           },
           {
             "story-elements": [
@@ -1754,7 +1766,8 @@ export const dummyCollection = {
                 id: "10d364a0-ddf3-433b-ab07-235f29e21041",
                 metadata: {},
                 subtype: null,
-                text: "<p>a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.n literary theory, a text is any object that can be “read”, whether this object is a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.</p>",
+                text:
+                  "<p>a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.n literary theory, a text is any object that can be “read”, whether this object is a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message.</p>"
               },
               {
                 id: "00000000-0000-0000-0000-000000000000",
@@ -1764,9 +1777,9 @@ export const dummyCollection = {
                 type: "text",
                 text: '<p>text <a href="https://ace-web.qtstage.io/">promotional</a> message</p>',
                 metadata: {
-                  "promotional-message": true,
-                },
-              },
+                  "promotional-message": true
+                }
+              }
             ],
             "card-updated-at": 1570786670702,
             "content-version-id": "c3a31b91-b606-4524-a36b-a35fbd174585",
@@ -1787,13 +1800,13 @@ export const dummyCollection = {
                   caption: "test image caption ",
                   metadata: {
                     width: 266,
-                    height: 190,
-                  },
-                },
+                    height: 190
+                  }
+                }
               },
-              attributes: {},
-            },
-          },
+              attributes: {}
+            }
+          }
         ],
         url: "https://ace-web.qtstage.io/health/time-stamp-test",
         "story-version-id": "fd873d9b-5f08-4d8e-ac03-eb3f30eaf619",
@@ -1823,18 +1836,18 @@ export const dummyCollection = {
             bio: null,
             "contributor-role": {
               id: 873,
-              name: "Author",
-            },
-          },
+              name: "Author"
+            }
+          }
         ],
         metadata: {
           "card-share": {
-            shareable: false,
-          },
+            shareable: false
+          }
         },
         "publish-at": null,
-        "assignee-name": "Shreya Shukla",
-      },
+        "assignee-name": "Shreya Shukla"
+      }
     },
     {
       id: "f299b7e4-affa-4f22-8143-c700a736f1bd",
@@ -1844,8 +1857,8 @@ export const dummyCollection = {
         "updated-at": 1570794627091,
         seo: {
           "claim-reviews": {
-            story: null,
-          },
+            story: null
+          }
         },
         "assignee-id": 187245,
         "author-name": "Shreya Shukla",
@@ -1861,9 +1874,9 @@ export const dummyCollection = {
           home: {
             default: {
               headline: "alternate story",
-              "hero-image": null,
-            },
-          },
+              "hero-image": null
+            }
+          }
         },
         sections: [
           {
@@ -1877,14 +1890,14 @@ export const dummyCollection = {
             collection: {
               slug: "child-sec-parent-sec",
               name: "child-sec (parent-sec)",
-              id: 17115,
+              id: 17115
             },
-            data: null,
-          },
+            data: null
+          }
         ],
         "story-audio": {
           "s3-key":
-            "ace/story-audio/2019-10/f299b7e4-affa-4f22-8143-c700a736f1bd/.d60110cf-9fdd-4366-8e36-6f0cfb3956e7.mp3",
+            "ace/story-audio/2019-10/f299b7e4-affa-4f22-8143-c700a736f1bd/.d60110cf-9fdd-4366-8e36-6f0cfb3956e7.mp3"
         },
         "access-level-value": null,
         "content-created-at": 1569826641547,
@@ -1896,7 +1909,7 @@ export const dummyCollection = {
           width: 760,
           "mime-type": "image/jpeg",
           height: 506,
-          "focus-point": [439, 232],
+          "focus-point": [439, 232]
         },
         comments: null,
         entities: {},
@@ -1927,8 +1940,8 @@ export const dummyCollection = {
                 id: "9c89611d-b826-48f4-9a26-bab2ddc0eb88",
                 metadata: {},
                 subtype: "summary",
-                text: "<p>We're experiencing a problem here, our developers are on the case. Please try it later.</p>",
-              },
+                text: "<p>We're experiencing a problem here, our developers are on the case. Please try it later.</p>"
+              }
             ],
             "card-updated-at": 1569826764243,
             "content-version-id": "f341dc46-b043-4c8d-ac8f-ec737e5f1c25",
@@ -1951,12 +1964,12 @@ export const dummyCollection = {
                     width: 760,
                     "mime-type": "image/jpeg",
                     height: 506,
-                    "focus-point": [439, 232],
-                  },
-                },
+                    "focus-point": [439, 232]
+                  }
+                }
               },
-              attributes: {},
-            },
+              attributes: {}
+            }
           },
           {
             "story-elements": [
@@ -1969,8 +1982,8 @@ export const dummyCollection = {
                 id: "c7686ef5-2969-44b2-b1a8-6ad7935450e5",
                 metadata: {},
                 subtype: null,
-                text: "<p>Card2</p>",
-              },
+                text: "<p>Card2</p>"
+              }
             ],
             "card-updated-at": 1570794624997,
             "content-version-id": "51549b8a-6773-4566-8b94-7bde39b8a750",
@@ -1993,12 +2006,12 @@ export const dummyCollection = {
                     width: 760,
                     "mime-type": "image/jpeg",
                     height: 506,
-                    "focus-point": [439, 232],
-                  },
-                },
+                    "focus-point": [439, 232]
+                  }
+                }
               },
-              attributes: {},
-            },
+              attributes: {}
+            }
           },
           {
             "story-elements": [
@@ -2011,7 +2024,7 @@ export const dummyCollection = {
                 id: "2ec760e4-9194-4ea2-86a0-6ab0070cb0dd",
                 metadata: {},
                 subtype: null,
-                text: "<p>card 3</p>",
+                text: "<p>card 3</p>"
               },
               {
                 id: "00000000-0000-0000-0000-000000000000",
@@ -2021,9 +2034,9 @@ export const dummyCollection = {
                 type: "text",
                 text: '<p>text <a href="https://ace-web.qtstage.io/">promotional</a> message</p>',
                 metadata: {
-                  "promotional-message": true,
-                },
-              },
+                  "promotional-message": true
+                }
+              }
             ],
             "card-updated-at": 1570794624997,
             "content-version-id": "6ae26343-7c87-484f-a5a7-b4f41855b50c",
@@ -2046,13 +2059,13 @@ export const dummyCollection = {
                     width: 760,
                     "mime-type": "image/jpeg",
                     height: 506,
-                    "focus-point": [439, 232],
-                  },
-                },
+                    "focus-point": [439, 232]
+                  }
+                }
               },
-              attributes: {},
-            },
-          },
+              attributes: {}
+            }
+          }
         ],
         url: "https://ace-web.qtstage.io/parent-sec/child-sec/demo-story-2",
         "story-version-id": "06320d9a-db59-4ff7-ad18-4b2e3649b1bb",
@@ -2082,18 +2095,18 @@ export const dummyCollection = {
             bio: null,
             "contributor-role": {
               id: 873,
-              name: "Author",
-            },
-          },
+              name: "Author"
+            }
+          }
         ],
         metadata: {
           "card-share": {
-            shareable: false,
-          },
+            shareable: false
+          }
         },
         "publish-at": null,
-        "assignee-name": "Shreya Shukla",
-      },
+        "assignee-name": "Shreya Shukla"
+      }
     },
     {
       id: "8ed73f9f-ac4e-453b-8508-1b5fbd99e71d",
@@ -2103,8 +2116,8 @@ export const dummyCollection = {
         "updated-at": 1571032556498,
         seo: {
           "claim-reviews": {
-            story: null,
-          },
+            story: null
+          }
         },
         "assignee-id": 187245,
         "author-name": "Shreya Shukla",
@@ -2129,14 +2142,14 @@ export const dummyCollection = {
             collection: {
               slug: "lifestyle-updated-slug",
               name: "sports",
-              id: 2728,
+              id: 2728
             },
-            data: null,
-          },
+            data: null
+          }
         ],
         "story-audio": {
           "s3-key":
-            "ace/story-audio/2019-10/8ed73f9f-ac4e-453b-8508-1b5fbd99e71d/.f6427b6a-1695-4718-9ced-9c1eab9303e8.mp3",
+            "ace/story-audio/2019-10/8ed73f9f-ac4e-453b-8508-1b5fbd99e71d/.f6427b6a-1695-4718-9ced-9c1eab9303e8.mp3"
         },
         "access-level-value": 100,
         "content-created-at": 1559584761098,
@@ -2146,7 +2159,7 @@ export const dummyCollection = {
         "publisher-id": 97,
         "hero-image-metadata": {
           width: 528,
-          height: 350,
+          height: 350
         },
         comments: null,
         entities: {},
@@ -2179,8 +2192,9 @@ export const dummyCollection = {
                 id: "f4e0e915-046b-485f-99a2-b6627d2952c7",
                 metadata: {},
                 subtype: null,
-                text: "<p>Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.</p>",
-              },
+                text:
+                  "<p>Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.</p>"
+              }
             ],
             "card-updated-at": 1564139386962,
             "content-version-id": "7d8792eb-5e65-461b-b956-44ded3f0d24b",
@@ -2203,12 +2217,12 @@ export const dummyCollection = {
                     "imagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontesta",
                   metadata: {
                     width: 528,
-                    height: 350,
-                  },
-                },
+                    height: 350
+                  }
+                }
               },
-              attributes: {},
-            },
+              attributes: {}
+            }
           },
           {
             "story-elements": [
@@ -2221,7 +2235,7 @@ export const dummyCollection = {
                 id: "5368bde6-ccb6-4982-8d55-11847b9f3154",
                 metadata: {},
                 subtype: null,
-                text: "hello i am  first carddfghjkljhgfdfghj",
+                text: "hello i am  first carddfghjkljhgfdfghj"
               },
               {
                 description: "",
@@ -2232,7 +2246,8 @@ export const dummyCollection = {
                 id: "772acc11-18a5-4708-9bbf-358e49cd74ce",
                 metadata: {},
                 subtype: null,
-                text: "<p>Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.</p>",
+                text:
+                  "<p>Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.</p>"
               },
               {
                 description: "",
@@ -2243,8 +2258,8 @@ export const dummyCollection = {
                 id: "1c9a67ee-4dd9-46ef-9302-d1e8287761f0",
                 metadata: {},
                 subtype: null,
-                text: "<p>hello</p>",
-              },
+                text: "<p>hello</p>"
+              }
             ],
             "card-updated-at": 1571032554331,
             "content-version-id": "1ed6c4b7-bcc0-4a86-827d-35dc78d60ecb",
@@ -2267,12 +2282,12 @@ export const dummyCollection = {
                     "imagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontesta",
                   metadata: {
                     width: 528,
-                    height: 350,
-                  },
-                },
+                    height: 350
+                  }
+                }
               },
-              attributes: {},
-            },
+              attributes: {}
+            }
           },
           {
             "story-elements": [
@@ -2285,7 +2300,7 @@ export const dummyCollection = {
                 id: "8295725e-fc67-45ad-8a97-5df01700b9c5",
                 metadata: {},
                 subtype: null,
-                text: "hello i am  second card ",
+                text: "hello i am  second card "
               },
               {
                 description: "",
@@ -2296,7 +2311,8 @@ export const dummyCollection = {
                 id: "27475841-6f66-49c8-a90a-1f03cd4b96a6",
                 metadata: {},
                 subtype: null,
-                text: "<p>Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.</p>",
+                text:
+                  "<p>Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.</p>"
               },
               {
                 description: "",
@@ -2307,8 +2323,9 @@ export const dummyCollection = {
                 id: "d6aaf29f-5009-4855-af3f-97db32afd742",
                 metadata: {},
                 subtype: "summary",
-                text: "<p>Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.</p>",
-              },
+                text:
+                  "<p>Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.</p>"
+              }
             ],
             "card-updated-at": 1559584934935,
             "content-version-id": "879d8715-b71a-439c-a222-cb568e0a9870",
@@ -2331,11 +2348,11 @@ export const dummyCollection = {
                     "imagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontesta",
                   metadata: {
                     width: 528,
-                    height: 350,
-                  },
-                },
-              },
-            },
+                    height: 350
+                  }
+                }
+              }
+            }
           },
           {
             "story-elements": [
@@ -2348,7 +2365,7 @@ export const dummyCollection = {
                 id: "52f3c740-4060-4151-962a-fbe6cba30e4f",
                 metadata: {},
                 subtype: null,
-                text: "hello i am  third card ",
+                text: "hello i am  third card "
               },
               {
                 description: "",
@@ -2360,10 +2377,11 @@ export const dummyCollection = {
                 metadata: {
                   content:
                     "Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.",
-                  attribution: "someone",
+                  attribution: "someone"
                 },
                 subtype: "blockquote",
-                text: '<div><blockquote>Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.</blockquote><span class="attribution">someone</span></div>',
+                text:
+                  '<div><blockquote>Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.</blockquote><span class="attribution">someone</span></div>'
               },
               {
                 description: "",
@@ -2374,8 +2392,9 @@ export const dummyCollection = {
                 id: "f62b1a72-ee36-4eed-a730-e484d82e3678",
                 metadata: {},
                 subtype: null,
-                text: "<p>Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.</p>",
-              },
+                text:
+                  "<p>Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.Digital publishers often face margin squeeze on ads, and struggle with unproven revenue models, audience leakage to competition and rapidly changing technology. Overcome these problems effortlessly.</p>"
+              }
             ],
             "card-updated-at": 1559584934935,
             "content-version-id": "d65bf540-af25-47ab-b438-2cad006de1ac",
@@ -2398,11 +2417,11 @@ export const dummyCollection = {
                     "imagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontestattributionimagecaptiontesta",
                   metadata: {
                     width: 528,
-                    height: 350,
-                  },
-                },
-              },
-            },
+                    height: 350
+                  }
+                }
+              }
+            }
           },
           {
             "story-elements": [
@@ -2415,14 +2434,14 @@ export const dummyCollection = {
                 id: "b50cd4c2-8e64-40f1-8825-05888179be4f",
                 metadata: {},
                 subtype: null,
-                text: "This is 4th card",
+                text: "This is 4th card"
               },
               {
                 description: "",
                 "image-metadata": {
                   "mime-type": "image/jpeg",
                   width: 276,
-                  height: 182,
+                  height: 182
                 },
                 "page-url": "/story/8ed73f9f-ac4e-453b-8508-1b5fbd99e71d/element/2a6ccb57-a1ee-4133-aae9-b6781e6f5c2c",
                 type: "image",
@@ -2433,8 +2452,8 @@ export const dummyCollection = {
                 "image-s3-key": "ace/2019-02/45734b07-c503-4e8a-b7f3-017aed5ba1d7/images.jpeg",
                 metadata: {},
                 subtype: null,
-                hyperlink: "https://www.google.com/",
-              },
+                hyperlink: "https://www.google.com/"
+              }
             ],
             "card-updated-at": 1561458187551,
             "content-version-id": "1380eb36-9c21-4879-be8c-3e6e3ed8d6da",
@@ -2456,12 +2475,12 @@ export const dummyCollection = {
                   metadata: {
                     "mime-type": "image/jpeg",
                     width: 276,
-                    height: 182,
-                  },
-                },
+                    height: 182
+                  }
+                }
               },
-              attributes: {},
-            },
+              attributes: {}
+            }
           },
           {
             "story-elements": [
@@ -2474,14 +2493,14 @@ export const dummyCollection = {
                 id: "5d399d4b-4194-4deb-b2df-97d8b49d3323",
                 metadata: {},
                 subtype: null,
-                text: "This is  fifth card",
+                text: "This is  fifth card"
               },
               {
                 description: "",
                 "image-metadata": {
                   width: 1024,
                   "mime-type": "image/jpeg",
-                  height: 768,
+                  height: 768
                 },
                 "page-url": "/story/8ed73f9f-ac4e-453b-8508-1b5fbd99e71d/element/717d2b94-43dd-42a0-af5c-840c8d4e22fb",
                 type: "image",
@@ -2492,7 +2511,7 @@ export const dummyCollection = {
                 "image-s3-key": "ace/2019-02/45b42adb-8eb6-4f96-8fde-2138e319a39f/jpeg_43.jpg",
                 metadata: {},
                 subtype: null,
-                hyperlink: "https://www.google.com/",
+                hyperlink: "https://www.google.com/"
               },
               {
                 id: "00000000-0000-0000-0000-000000000000",
@@ -2502,9 +2521,9 @@ export const dummyCollection = {
                 type: "text",
                 text: '<p>text <a href="https://ace-web.qtstage.io/">promotional</a> message</p>',
                 metadata: {
-                  "promotional-message": true,
-                },
-              },
+                  "promotional-message": true
+                }
+              }
             ],
             "card-updated-at": 1561458187551,
             "content-version-id": "f9574387-5fbe-4c45-b918-86f2d72736e9",
@@ -2526,13 +2545,13 @@ export const dummyCollection = {
                   metadata: {
                     width: 1024,
                     "mime-type": "image/jpeg",
-                    height: 768,
-                  },
-                },
+                    height: 768
+                  }
+                }
               },
-              attributes: {},
-            },
-          },
+              attributes: {}
+            }
+          }
         ],
         url: "https://ace-web.qtstage.io/lifestyle/listicle-with-reverse-count",
         "story-version-id": "de2bbceb-432e-4c1b-ad47-3ee517cd3c61",
@@ -2563,18 +2582,18 @@ export const dummyCollection = {
             bio: null,
             "contributor-role": {
               id: 873,
-              name: "Author",
-            },
-          },
+              name: "Author"
+            }
+          }
         ],
         metadata: {
           "card-share": {
-            shareable: false,
-          },
+            shareable: false
+          }
         },
         "publish-at": null,
-        "assignee-name": "Shreya Shukla",
-      },
+        "assignee-name": "Shreya Shukla"
+      }
     },
     {
       id: "f8803324-6cdf-434c-b9a7-b89cc5309ed7",
@@ -2584,8 +2603,8 @@ export const dummyCollection = {
         "updated-at": 1571034606062,
         seo: {
           "claim-reviews": {
-            story: null,
-          },
+            story: null
+          }
         },
         "assignee-id": 331449,
         "author-name": "Ekta Patnaik",
@@ -2610,15 +2629,15 @@ export const dummyCollection = {
             collection: {
               slug: "elections-2018",
               name: "Elections 2018",
-              id: 23928,
+              id: 23928
             },
             data: {
-              color: "#7b4f4f",
-            },
-          },
+              color: "#7b4f4f"
+            }
+          }
         ],
         "story-audio": {
-          "s3-key": null,
+          "s3-key": null
         },
         "access-level-value": null,
         "content-created-at": 1569328762732,
@@ -2628,7 +2647,7 @@ export const dummyCollection = {
         "publisher-id": 97,
         "hero-image-metadata": {
           width: 586,
-          height: 781,
+          height: 781
         },
         comments: null,
         entities: {},
@@ -2657,7 +2676,7 @@ export const dummyCollection = {
                 "member-id": 94985,
                 "image-metadata": {
                   width: 586,
-                  height: 781,
+                  height: 781
                 },
                 "uploaded-at": 1567659556059,
                 "page-url": "/story/f8803324-6cdf-434c-b9a7-b89cc5309ed7/element/2e9023af-9273-4f0b-ba9c-3e769fc8e3a0",
@@ -2669,7 +2688,7 @@ export const dummyCollection = {
                 "image-s3-key": "ace/2019-09/8c6a7163-a978-42ef-8796-ef10d47a6f22/Taz_332.jpg",
                 metadata: {},
                 subtype: null,
-                hyperlink: "https://www.google.com/",
+                hyperlink: "https://www.google.com/"
               },
               {
                 id: "00000000-0000-0000-0000-000000000000",
@@ -2679,9 +2698,9 @@ export const dummyCollection = {
                 type: "text",
                 text: '<p>text <a href="https://ace-web.qtstage.io/">promotional</a> message</p>',
                 metadata: {
-                  "promotional-message": true,
-                },
-              },
+                  "promotional-message": true
+                }
+              }
             ],
             "card-updated-at": 1569328777159,
             "content-version-id": "1793fbc8-a4eb-4681-8688-538a34206d0f",
@@ -2702,13 +2721,13 @@ export const dummyCollection = {
                   caption: null,
                   metadata: {
                     width: 586,
-                    height: 781,
-                  },
-                },
+                    height: 781
+                  }
+                }
               },
-              attributes: {},
-            },
-          },
+              attributes: {}
+            }
+          }
         ],
         url: "https://ace-web.qtstage.io/elections-2018/live-blog-test-hero-image",
         "story-version-id": "a97d774a-eca5-4fab-8fb8-722c11dafa21",
@@ -2738,21 +2757,21 @@ export const dummyCollection = {
             bio: null,
             "contributor-role": {
               id: 873,
-              name: "Author",
-            },
-          },
+              name: "Author"
+            }
+          }
         ],
         metadata: {
           "card-share": {
-            shareable: false,
-          },
+            shareable: false
+          }
         },
         "hero-image-url":
           "https://thumbor-stg.assettype.com/ace/2019-09/8c6a7163-a978-42ef-8796-ef10d47a6f22/Taz_332.jpg",
         "publish-at": null,
-        "assignee-name": "Ekta Patnaik",
-      },
-    },
+        "assignee-name": "Ekta Patnaik"
+      }
+    }
   ],
   "created-at": 1571041151571,
   metadata: {
@@ -2761,11 +2780,11 @@ export const dummyCollection = {
       "cover-image-metadata": {
         width: 586,
         height: 781,
-        "focus-point": [293, 391],
+        "focus-point": [293, 391]
       },
       caption: "",
       "cover-image-url":
-        "https://thumbor-stg.assettype.com/ace/2019-09/8c6a7163-a978-42ef-8796-ef10d47a6f22/Taz_332.jpg",
-    },
-  },
+        "https://thumbor-stg.assettype.com/ace/2019-09/8c6a7163-a978-42ef-8796-ef10d47a6f22/Taz_332.jpg"
+    }
+  }
 };
diff --git a/app/isomorphic/arrow/components/Fixture/dummyStory.js b/app/isomorphic/arrow/components/Fixture/dummyStory.js
index 1a29af88b..e630f5861 100644
--- a/app/isomorphic/arrow/components/Fixture/dummyStory.js
+++ b/app/isomorphic/arrow/components/Fixture/dummyStory.js
@@ -1,6 +1,6 @@
 function createUUID() {
   var dt = new Date().getTime();
-  var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+  var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
     var r = (dt + Math.random() * 16) % 16 | 0;
     dt = Math.floor(dt / 16);
     return (c === "x" ? r : (r & 0x3) | 0x8).toString(16);
@@ -13,8 +13,8 @@ export const dummyStory = {
   "updated-at": 1564650013782,
   seo: {
     "claim-reviews": {
-      story: null,
-    },
+      story: null
+    }
   },
   "assignee-id": 123981,
   "author-name": "Ravigopal Kesari",
@@ -24,21 +24,21 @@ export const dummyStory = {
       name: "politics",
       "meta-description": null,
       slug: "politics",
-      "tag-type": "Tag",
+      "tag-type": "Tag"
     },
     {
       id: 169510,
       name: "review",
       "meta-description": null,
       slug: "review",
-      "tag-type": "Tag",
-    },
+      "tag-type": "Tag"
+    }
   ],
   customSlotAfterStory: {
     config: { targetingId: "" },
     layout: "Leaderboard",
     layoutLabel: "Leaderboard",
-    type: "ad",
+    type: "ad"
   },
   headline: "Ready Player One review \u2013 Spielberg\u00A0",
   "storyline-id": null,
@@ -63,19 +63,19 @@ export const dummyStory = {
           collection: {
             slug: "coronavirus",
             name: "Coronavirus",
-            id: 92836,
+            id: 92836
           },
-          data: null,
-        },
+          data: null
+        }
       ],
       "hero-image-metadata": {
-        "original-url": "https://www.aljazeera.com/mritems/Images/2020/4/19/f90b71cdf10141ff9913b72bcfd29768_18.jpg",
+        "original-url": "https://www.aljazeera.com/mritems/Images/2020/4/19/f90b71cdf10141ff9913b72bcfd29768_18.jpg"
       },
       "hero-image-s3-key": "ace/2020-04/9adec2ac-d37c-496f-abcc-98309a4bb356/f90b71cdf10141ff9913b72bcfd29768_18.jpg",
       url: "https://ace-web.qtstage.io/anything/coronavirus/how-is-the-coronavirus-impacting-people-with-disabilities",
       "content-updated-at": 1587491154824,
       "author-id": 934395,
-      "first-published-at": 1587405627183,
+      "first-published-at": 1671083514919,
       authors: [
         {
           id: 934395,
@@ -84,10 +84,10 @@ export const dummyStory = {
           "avatar-url": null,
           "avatar-s3-key": null,
           "twitter-handle": null,
-          bio: null,
-        },
-      ],
-    },
+          bio: null
+        }
+      ]
+    }
   },
   "last-published-at": 1564650017054,
   subheadline:
@@ -100,7 +100,7 @@ export const dummyStory = {
           "hero-image-metadata": {
             width: 1080,
             height: 1330,
-            "focus-point": [525, 207],
+            "focus-point": [525, 207]
           },
           "hero-image-attribution": "attribution",
           "hero-image-s3-key":
@@ -108,10 +108,10 @@ export const dummyStory = {
           "hero-image-caption": "",
           "hero-image-url":
             "https://thumbor-stg.assettype.com/ace/2018-01/7f028fc9-48fa-4e6c-b2b3-8baf1e6e8928/22520141_862918130543643_474831853139210771_o.jpg",
-          "temporary-hero-image-key": null,
-        },
-      },
-    },
+          "temporary-hero-image-key": null
+        }
+      }
+    }
   },
   sections: [
     {
@@ -125,9 +125,9 @@ export const dummyStory = {
       collection: {
         slug: "news",
         name: "News",
-        id: 3795,
+        id: 3795
       },
-      data: null,
+      data: null
     },
     {
       "domain-slug": null,
@@ -140,9 +140,9 @@ export const dummyStory = {
       collection: {
         slug: "recent",
         name: "Recent stories",
-        id: 2760,
+        id: 2760
       },
-      data: null,
+      data: null
     },
     {
       "domain-slug": null,
@@ -155,13 +155,13 @@ export const dummyStory = {
       collection: {
         slug: "film-manual-collection",
         name: "Film",
-        id: 2725,
+        id: 2725
       },
-      data: null,
-    },
+      data: null
+    }
   ],
   "story-audio": {
-    "s3-key": "story-audio/ace/2019-08/a3561065-11ce-4281-9d86-325934aa2146/12132634-d337-471b-9e92-1ce7b4d15bfb.mp3",
+    "s3-key": "story-audio/ace/2019-08/a3561065-11ce-4281-9d86-325934aa2146/12132634-d337-471b-9e92-1ce7b4d15bfb.mp3"
   },
   "read-time": 2,
   "access-level-value": 23,
@@ -177,7 +177,7 @@ export const dummyStory = {
     "mime-type": "image/png",
     "file-size": 587085,
     "file-name": "ready-player-one-hd-wallpapers-70749-6537851.png",
-    "focus-point": [883, 411],
+    "focus-point": [883, 411]
   },
   comments: null,
   "word-count": 323,
@@ -205,6 +205,95 @@ export const dummyStory = {
   cards: [
     {
       "story-elements": [
+        {
+          description: "",
+          "embed-js":
+            "PGlmcmFtZSBzcmM9Jy8vcGxheWVycy5icmlnaHRjb3ZlLm5ldC82MTM5ODI1NDc4MDAxL2RlZmF1bHRfZGVmYXVsdC9pbmRleC5odG1sP3ZpZGVvSWQ9NjMxOTg4MDI0NDExMicgYWxsb3dmdWxsc2NyZWVuIGZyYW1lYm9yZGVyPTA+PC9pZnJhbWU+",
+          "page-url": "/story/b7b6ecab-2b4f-4dc1-b04a-0b0ec76a50c4/element/f4dc8f57-8a79-4b96-bc4b-7c4c5d481373",
+          type: "jsembed",
+          "family-id": "96bea74a-8fed-43f0-9624-a5c9686e1062",
+          title: "",
+          id: "f4dc8f57-8a79-4b96-bc4b-7c4c5d481373",
+          metadata: {},
+          subtype: null
+        },
+        {
+          description: "",
+          "page-url": "/story/b7b6ecab-2b4f-4dc1-b04a-0b0ec76a50c4/element/2cfc6b4e-85fb-47b0-ae4e-580a650372f7",
+          type: "external-file",
+          "family-id": "0148ec01-3c7c-49ee-8a3f-db8ca4907dc8",
+          title: "",
+          "file-type": "video",
+          id: "2cfc6b4e-85fb-47b0-ae4e-580a650372f7",
+          url: null,
+          "content-type": "video/brightcove",
+          metadata: {
+            "account-id": "1752604059001",
+            "player-id": "default",
+            "player-media": "default",
+            "video-id": "6156696074001",
+            "embed-code":
+              "aHR0cHM6Ly9wbGF5ZXJzLmJyaWdodGNvdmUubmV0LzI3NjY2MjQ5MDUwMDEvZGVmYXVsdF9kZWZhdWx0L2luZGV4Lmh0bWw/dmlkZW9JZD02MzIzMDIxNjcxMTEy",
+            "player-url": "//players.brightcove.net/2766624905001/default_default/index.html?videoId=6323021671112"
+          },
+          subtype: "brightcove-video"
+        },
+        {
+          description: "",
+          "embed-js":
+            "PHNjcmlwdCBzcmM9Imh0dHBzOi8vZ2VvLmRhaWx5bW90aW9uLmNvbS9wbGF5ZXIveDc4NTlBLmpzIiBkYXRhLXZpZGVvPSJ4ODRzaDg3Ij48L3NjcmlwdD4=",
+          "page-url": "/story/88553fe8-640b-4023-90de-d82e4843d7e5/element/ccbe1571-6b25-4f1d-aea0-135622d378e3",
+          type: "jsembed",
+          "family-id": "2a419ba5-064d-44c9-b5af-59f284f4c4b1",
+          title: "",
+          id: "ccbe1571-6b25-4f1d-aea0-135622d378e3",
+          metadata: {
+            "video-id": "xjzije",
+            "dailymotion-url": "https://www.dailymotion.com/video/xjzije",
+            provider: "dailymotion-video",
+            "player-id": "x7859A"
+          },
+          subtype: "dailymotion-embed-script"
+        },
+        {
+          description: "",
+          "page-url": "/story/191d390f-7f10-422a-86b5-cf589a0bac08/element/813676c9-6606-4fa9-a25a-70b9910e4631",
+          type: "text",
+          "family-id": "9309e866-a7e2-475d-b41d-e285c9029b9b",
+          title: "",
+          id: "813676c9-6606-4fa9-a25a-70b9910e4631",
+          metadata: {
+            content: "Quote: Rajasthan Chief Minister Ashok",
+            attribution: "Ashok"
+          },
+          subtype: "quote",
+          text:
+            '<div><blockquote>Quote: Rajasthan Chief Minister Ashok</blockquote><span class="attribution">Ashok</span></div>'
+        },
+        {
+          description: "",
+          "page-url": "/story/191d390f-7f10-422a-86b5-cf589a0bac08/element/9ee341b5-464a-4d91-a567-258a7cc90db2",
+          type: "title",
+          "family-id": "75bc3d37-489a-4e28-b7a0-3831aafe2bd5",
+          title: "",
+          id: "9ee341b5-464a-4d91-a567-258a7cc90db2",
+          metadata: {},
+          subtype: null,
+          text: "Title element"
+        },
+
+        {
+          description: "",
+          "page-url": "/story/a3561065-11ce-4281-9d86-325934aa2146/element/c529557b-a4f5-4363-ba3f-7ac0eb14f299",
+          type: "text",
+          "family-id": "2b7c81f0-98f6-416c-9692-90ba504c9385",
+          title: "",
+          id: "c529557b-a4f5-4363-ba3f-7ac0eb14f299",
+          metadata: {},
+          subtype: null,
+          text:
+            '<p><a href="https://www.theguardian.com/technology/virtual-reality">Virtual reality</a> is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. <a href="https://www.theguardian.com/film/stevenspielberg">Steven Spielberg</a> 2019s <a href="https://www.theguardian.com/film/ready-player-one">Ready Player One</a>.</p>'
+        },
         {
           description: "",
           "page-url": "/story/49ed61fb-647e-4d23-9097-3c5088cc3fa7/element/d08cb2d1-0316-4af3-ad93-192824111745",
@@ -216,10 +305,11 @@ export const dummyStory = {
             "cta-title": "CTA text button",
             "cta-url": "https://www.google.com",
             "open-in-new-tab": true,
-            "no-follow": true,
+            "no-follow": true
           },
           subtype: "cta",
-          text: '<a class="cta-anchor" href="https://www.google.com" target="_blank" rel="nofollow"><span class="cta-text">CTA text button</span></a>',
+          text:
+            '<a class="cta-anchor" href="https://www.google.com" target="_blank" rel="nofollow"><span class="cta-text">CTA text button</span></a>'
         },
         {
           description: "",
@@ -233,9 +323,9 @@ export const dummyStory = {
           metadata: {
             "video-id": "xeg4c4",
             "dailymotion-url": "https://www.dailymotion.com/video/xeg4c4",
-            provider: "dailymotion-video",
+            provider: "dailymotion-video"
           },
-          subtype: "dailymotion-video",
+          subtype: "dailymotion-video"
         },
         {
           description: "",
@@ -245,13 +335,14 @@ export const dummyStory = {
           title: "",
           id: "2f648c29-ef8f-442c-903a-263f82e631dd",
           "file-name": "document__7_ (1).docx",
-          url: "https://thumbor-stg.assettype.com/ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
+          url:
+            "https://thumbor-stg.assettype.com/ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
           "s3-key": "ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
           "content-type": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
           metadata: {
-            "file-size": 8209,
+            "file-size": 8209
           },
-          subtype: "attachment",
+          subtype: "attachment"
         },
         {
           description: "",
@@ -265,9 +356,9 @@ export const dummyStory = {
           "s3-key": "ace/2019-07/6dcf2021-615b-43e6-85f3-21acb8953cea/resume_samples.pdf",
           "content-type": "application/pdf",
           metadata: {
-            "file-size": 301808,
+            "file-size": 301808
           },
-          subtype: "attachment",
+          subtype: "attachment"
         },
         {
           "page-url": "/story/ed8a181b-4750-48b9-967e-83f29416ee2a/element/e2478f89-edab-44c8-a7df-6c6c84399c82",
@@ -278,10 +369,11 @@ export const dummyStory = {
           metadata: {
             content: "The human eye can distinguish around 10 million different colors!",
             attribution:
-              "Color processing begins at a very early level in the visual system (even within the retina) through initial color opponent mechanisms.",
+              "Color processing begins at a very early level in the visual system (even within the retina) through initial color opponent mechanisms."
           },
           subtype: "bigfact",
-          text: '<div><div class="bigfact-title">The human eye can distinguish around 10 million different colors!</div><div class="bigfact-description">Color processing begins at a very early level in the visual system (even within the retina) through initial color opponent mechanisms.</div></div>',
+          text:
+            '<div><div class="bigfact-title">The human eye can distinguish around 10 million different colors!</div><div class="bigfact-description">Color processing begins at a very early level in the visual system (even within the retina) through initial color opponent mechanisms.</div></div>'
         },
         {
           description: "",
@@ -293,7 +385,7 @@ export const dummyStory = {
           url: "https://www.youtube.com/watch?v=AST2-4db4ic&feature=youtu.be",
           "embed-url": "https://www.youtube.com/embed/AST2-4db4ic",
           metadata: {},
-          subtype: null,
+          subtype: null
         },
         {
           description: "",
@@ -307,9 +399,9 @@ export const dummyStory = {
           metadata: {
             "dailymotion-url": "https://www.dailymotion.com/video/x5vla8l",
             provider: "dailymotion-video",
-            "video-id": "x5vla8l",
+            "video-id": "x5vla8l"
           },
-          subtype: "dailymotion-video",
+          subtype: "dailymotion-video"
         },
         {
           description: "",
@@ -323,9 +415,9 @@ export const dummyStory = {
           metadata: {
             "tweet-url": "https://twitter.com/atlantahumane/status/1243218832581447683",
             provider: "twitter",
-            "tweet-id": "1243218832581447683",
+            "tweet-id": "1243218832581447683"
           },
-          subtype: "tweet",
+          subtype: "tweet"
         },
         {
           description: "",
@@ -337,18 +429,7 @@ export const dummyStory = {
           title: "",
           id: "3ea4a656-e20b-4ed3-ba8f-58874b5e8715",
           metadata: {},
-          subtype: null,
-        },
-        {
-          description: "",
-          "page-url": "/story/a3561065-11ce-4281-9d86-325934aa2146/element/c529557b-a4f5-4363-ba3f-7ac0eb14f299",
-          type: "text",
-          "family-id": "2b7c81f0-98f6-416c-9692-90ba504c9385",
-          title: "",
-          id: "c529557b-a4f5-4363-ba3f-7ac0eb14f299",
-          metadata: {},
-          subtype: null,
-          text: '<p><a href="https://www.theguardian.com/technology/virtual-reality">Virtual reality</a> is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. <a href="https://www.theguardian.com/film/stevenspielberg">Steven Spielberg</a> 2019s <a href="https://www.theguardian.com/film/ready-player-one">Ready Player One</a>.</p>',
+          subtype: null
         },
         {
           description: "",
@@ -356,7 +437,7 @@ export const dummyStory = {
             width: 6016,
             height: 4016,
             "mime-type": "image/jpeg",
-            "focus-point": [2741, 1930],
+            "focus-point": [2741, 1930]
           },
           "page-url": "/story/560b39d9-ae5b-44ef-acc7-04db4472b4f8/element/6c6cf4a8-6700-4829-8076-88373a1436b1",
           type: "image",
@@ -367,7 +448,7 @@ export const dummyStory = {
           "image-s3-key": "demo/2018-11/b1fa99ff-b05d-464b-97b9-83cd8f2bf65d/2072.jpg",
           metadata: {},
           subtype: null,
-          hyperlink: "https://www.google.com/",
+          hyperlink: "https://www.google.com/"
         },
         {
           description: "",
@@ -383,18 +464,19 @@ export const dummyStory = {
                 description:
                   "In the year 2045, people can escape their harsh reality in the OASIS, an immersive virtual world where you can go anywhere, do anything, be anyone-the only limits are your own imagination. OASIS creator James Halliday left his immense fortune and control of the Oasis to the winner of a contest designed to find a worthy heir. When unlikely hero Wade Watts conquers the first challenge of the reality-bending treasure hunt, he and his friends-known as the High Five-are hurled into a fantastical universe of discovery and danger to save the OASIS and their world.",
                 url: "https://www.rottentomatoes.com/m/ready_player_one/",
-                name: "Ready player One review from rotten tomatoes",
+                name: "Ready player One review from rotten tomatoes"
               },
-              text: '<div><p>Ready player One review from rotten tomatoes</p><p><a href="https://www.rottentomatoes.com/m/ready_player_one/">In the year 2045, people can escape their harsh reality in the OASIS, an immersive virtual world where you can go anywhere, do anything, be anyone-the only limits are your own imagination. OASIS creator James Halliday left his immense fortune and control of the Oasis to the winner of a contest designed to find a worthy heir. When unlikely hero Wade Watts conquers the first challenge of the reality-bending treasure hunt, he and his friends-known as the High Five-are hurled into a fantastical universe of discovery and danger to save the OASIS and their world.</a></p></div>',
+              text:
+                '<div><p>Ready player One review from rotten tomatoes</p><p><a href="https://www.rottentomatoes.com/m/ready_player_one/">In the year 2045, people can escape their harsh reality in the OASIS, an immersive virtual world where you can go anywhere, do anything, be anyone-the only limits are your own imagination. OASIS creator James Halliday left his immense fortune and control of the Oasis to the winner of a contest designed to find a worthy heir. When unlikely hero Wade Watts conquers the first challenge of the reality-bending treasure hunt, he and his friends-known as the High Five-are hurled into a fantastical universe of discovery and danger to save the OASIS and their world.</a></p></div>',
               id: "47afb0c6-aa50-446c-8e55-c10c604c5246",
               "family-id": "6b236f36-ce8a-4f9a-b70e-844367f13af0",
-              type: "text",
-            },
+              type: "text"
+            }
           ],
           title: "",
           id: "4abd5e1d-4f02-433a-af48-2733a63682b9",
           metadata: {},
-          subtype: "references",
+          subtype: "references"
         },
         {
           description: "",
@@ -406,10 +488,11 @@ export const dummyStory = {
           metadata: {
             content:
               "After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest.",
-            attribution: "Player",
+            attribution: "Player"
           },
           subtype: "quote",
-          text: '<div><blockquote>After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest.</blockquote><span class="attribution">Player</span></div>',
+          text:
+            '<div><blockquote>After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest.</blockquote><span class="attribution">Player</span></div>'
         },
         {
           description: "",
@@ -441,7 +524,7 @@ export const dummyStory = {
               "avatar-s3-key": "ace/2019-08/565bba26-4f05-4e63-b619-511a2a2bd5b7/images.jpeg",
               "twitter-handle": null,
               "created-at": 1551268188983,
-              metadata: {},
+              metadata: {}
             },
             interviewee: {
               "author-collection-id": null,
@@ -461,11 +544,12 @@ export const dummyStory = {
               "avatar-s3-key": "ace/2019-08/565bba26-4f05-4e63-b619-511a2a2bd5b7/images.jpeg",
               "twitter-handle": null,
               "created-at": 1551268188983,
-              metadata: {},
-            },
+              metadata: {}
+            }
           },
           subtype: "q-and-a",
-          text: '<div><div class="question"><p>Is Ready Player One book<a href="https://www.jbsimmons.com/blog/books-better-than-movies-ready-player-one"> better </a>than the movie?</p></div><div class="answer"><p><strong>Ready Player One</strong> is the latest example. I read Earnest Cline\'s <strong><a href="https://www.jbsimmons.com/blog/books-better-than-movies-ready-player-one">book</a></strong> a couple months before watching Steven Spielberg\'s <strong>movie</strong>. ... The <strong>book</strong> generally fares <strong>better</strong> with reviewers, averaging 4.6 out of 5 stars on Amazon, while the <strong>movie</strong> scores 73% on Rotten Tomatoes.</p></div></div>',
+          text:
+            '<div><div class="question"><p>Is Ready Player One book<a href="https://www.jbsimmons.com/blog/books-better-than-movies-ready-player-one"> better </a>than the movie?</p></div><div class="answer"><p><strong>Ready Player One</strong> is the latest example. I read Earnest Cline\'s <strong><a href="https://www.jbsimmons.com/blog/books-better-than-movies-ready-player-one">book</a></strong> a couple months before watching Steven Spielberg\'s <strong>movie</strong>. ... The <strong>book</strong> generally fares <strong>better</strong> with reviewers, averaging 4.6 out of 5 stars on Amazon, while the <strong>movie</strong> scores 73% on Rotten Tomatoes.</p></div></div>'
         },
         {
           description: "",
@@ -493,11 +577,12 @@ export const dummyStory = {
               "avatar-s3-key": "ace/2019-08/565bba26-4f05-4e63-b619-511a2a2bd5b7/images.jpeg",
               "twitter-handle": null,
               "created-at": 1551268188983,
-              metadata: {},
-            },
+              metadata: {}
+            }
           },
           subtype: "question",
-          text: '<p>Is Ready Player One book <a href="https://www.jbsimmons.com/blog/books-better-than-movies-ready-player-one">better</a> than the movie?</p>',
+          text:
+            '<p>Is Ready Player One book <a href="https://www.jbsimmons.com/blog/books-better-than-movies-ready-player-one">better</a> than the movie?</p>'
         },
         {
           description: "",
@@ -525,11 +610,12 @@ export const dummyStory = {
               "avatar-s3-key": "ace/2019-08/565bba26-4f05-4e63-b619-511a2a2bd5b7/images.jpeg",
               "twitter-handle": null,
               "created-at": 1551268188983,
-              metadata: {},
-            },
+              metadata: {}
+            }
           },
           subtype: "answer",
-          text: "<p><strong>Ready Player One</strong> is the latest example. I read Earnest Cline's <strong>book</strong> a couple months before watching Steven Spielberg's <strong>movie</strong>. ... The <strong><a href=\"https://www.jbsimmons.com/blog/books-better-than-movies-ready-player-one\">book</a></strong> generally fares <strong>better</strong> with reviewers, averaging 4.6 out of 5 stars on Amazon, while the <strong>movie</strong> scores 73% on Rotten Tomatoes.</p>",
+          text:
+            "<p><strong>Ready Player One</strong> is the latest example. I read Earnest Cline's <strong>book</strong> a couple months before watching Steven Spielberg's <strong>movie</strong>. ... The <strong><a href=\"https://www.jbsimmons.com/blog/books-better-than-movies-ready-player-one\">book</a></strong> generally fares <strong>better</strong> with reviewers, averaging 4.6 out of 5 stars on Amazon, while the <strong>movie</strong> scores 73% on Rotten Tomatoes.</p>"
         },
         {
           id: "00000000-0000-0000-0000-000000000000",
@@ -539,8 +625,8 @@ export const dummyStory = {
           type: "text",
           text: '<p>text <a href="https://ace-web.qtstage.io/">promotional</a> message</p>',
           metadata: {
-            "promotional-message": true,
-          },
+            "promotional-message": true
+          }
         },
         {
           id: "00000000-0000-0000-0000-000000000000",
@@ -550,8 +636,8 @@ export const dummyStory = {
           type: "text",
           text: '<p>text <a href="https://ace-web.qtstage.io/">promotional</a> message</p>',
           metadata: {
-            "promotional-message": true,
-          },
+            "promotional-message": true
+          }
         },
         {
           description: "",
@@ -562,10 +648,11 @@ export const dummyStory = {
           id: "0e1e9777-e0e6-45f9-b212-264db2d8eeb5",
           metadata: {
             content:
-              "Although the many story changes might be hard for book purists to accept, Steven Spielberg has lovingly captured the zeitgeist of '80s nostalgia in this adventure.",
+              "Although the many story changes might be hard for book purists to accept, Steven Spielberg has lovingly captured the zeitgeist of '80s nostalgia in this adventure."
           },
           subtype: "blurb",
-          text: '<blockquote>Although the many story changes might be hard for book purists to accept, <a href="https://www.rottentomatoes.com/m/ready_player_one/">Steven Spielberg</a> has lovingly captured the zeitgeist of 80s nostalgia in this adventure.</blockquote>',
+          text:
+            '<blockquote>Although the many story changes might be hard for book purists to accept, <a href="https://www.rottentomatoes.com/m/ready_player_one/">Steven Spielberg</a> has lovingly captured the zeitgeist of 80s nostalgia in this adventure.</blockquote>'
         },
         {
           description: "",
@@ -577,10 +664,11 @@ export const dummyStory = {
           metadata: {
             content:
               "After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest.",
-            attribution: "Player",
+            attribution: "Player"
           },
           subtype: "blockquote",
-          text: '<div><blockquote>After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest.</blockquote><span class="attribution">Player</span></div>',
+          text:
+            '<div><blockquote>After the death of James Halliday, the creator of the virtual reality world, his pre-recorded message reveals the hidden fortune, which makes Wade Watts, a teenager, embark on a quest.</blockquote><span class="attribution">Player</span></div>'
         },
         {
           description: "",
@@ -596,11 +684,11 @@ export const dummyStory = {
               "story-content-id": "2d0008f7-768f-4667-822f-cb531d9627f4",
               "highlighted-text": "",
               id: "2d0008f7-768f-4667-822f-cb531d9627f4",
-              "highlighted-headline": null,
-            },
+              "highlighted-headline": null
+            }
           },
           subtype: "also-read",
-          text: "How is the coronavirus impacting people with disabilities?",
+          text: "How is the coronavirus impacting people with disabilities?"
         },
         {
           description: "",
@@ -611,7 +699,8 @@ export const dummyStory = {
           id: "373d6e0b-c5ac-4904-8d41-78e4fd5602cd",
           metadata: {},
           subtype: "summary",
-          text: "<p>Lorem<em> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</em>, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>",
+          text:
+            "<p>Lorem<em> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</em>, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>"
         },
         {
           description: "",
@@ -623,7 +712,7 @@ export const dummyStory = {
               description: "",
               "image-metadata": {
                 "original-url":
-                  "https://www.washingtonpost.com/resizer/_I2QC1BPsP-wxv7XSvBBK48bv8E=/1440x0/smart/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/OP2ZX3T6KYI6VBGCA6JNQWIZCE.jpg",
+                  "https://www.washingtonpost.com/resizer/_I2QC1BPsP-wxv7XSvBBK48bv8E=/1440x0/smart/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/OP2ZX3T6KYI6VBGCA6JNQWIZCE.jpg"
               },
               type: "image",
               "family-id": "0444a13c-f52a-43ff-8564-b52411ffdefc",
@@ -633,13 +722,13 @@ export const dummyStory = {
               "image-s3-key": "ace/2020-04/b6b55f73-a713-4087-849b-a7dbb04826e6/OP2ZX3T6KYI6VBGCA6JNQWIZCE.jpg",
               metadata: {},
               subtype: null,
-              hyperlink: "https://www.google.com/",
+              hyperlink: "https://www.google.com/"
             },
             {
               description: "",
               "image-metadata": {
                 "original-url":
-                  "https://media3.s-nbcnews.com/j/newscms/2020_16/3314681/200419-michelle-tom-cover-cs-509p_6155bfe91e67a4f93ecc2cf00530c404.nbcnews-fp-1200-630.jpg",
+                  "https://media3.s-nbcnews.com/j/newscms/2020_16/3314681/200419-michelle-tom-cover-cs-509p_6155bfe91e67a4f93ecc2cf00530c404.nbcnews-fp-1200-630.jpg"
               },
               type: "image",
               "family-id": "5173f4e7-f94c-4e7a-ba54-806ae1a7deef",
@@ -650,12 +739,12 @@ export const dummyStory = {
                 "ace/2020-04/e58b991e-4a82-4fca-818d-c1f8fd6e98e6/200419_michelle_tom_cover_cs_509p_6155bfe91e67a4f93ecc2cf00530c404_nbcnews_fp_1200_630.jpg",
               metadata: {},
               subtype: null,
-              hyperlink: "https://www.google.com/",
+              hyperlink: "https://www.google.com/"
             },
             {
               description: "",
               "image-metadata": {
-                "original-url": "https://www.dw.com/image/53181437_304.jpg",
+                "original-url": "https://www.dw.com/image/53181437_304.jpg"
               },
               type: "image",
               "family-id": "5f454472-b7ed-4a18-b923-452332c16125",
@@ -665,13 +754,13 @@ export const dummyStory = {
               "image-s3-key": "ace/2020-04/ea98e4fb-f8a8-4b18-a2b0-8ec03b17820c/53181437_304.jpg",
               metadata: {},
               subtype: null,
-              hyperlink: "https://www.google.com/",
+              hyperlink: "https://www.google.com/"
             },
             {
               description: "",
               "image-metadata": {
                 "original-url":
-                  "https://www.washingtonpost.com/resizer/_f5BO1VdLp-O-jX1x-NK-GfYknU=/1440x0/smart/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/ZE2IQNUBVAI6VBGCA6JNQWIZCE.jpg",
+                  "https://www.washingtonpost.com/resizer/_f5BO1VdLp-O-jX1x-NK-GfYknU=/1440x0/smart/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/ZE2IQNUBVAI6VBGCA6JNQWIZCE.jpg"
               },
               type: "image",
               "family-id": "67ae55bd-3f34-417b-8951-fb525da321f2",
@@ -681,13 +770,13 @@ export const dummyStory = {
               "image-s3-key": "ace/2020-04/aef8d5e1-d2fc-4f77-968b-50ff0c4764ea/ZE2IQNUBVAI6VBGCA6JNQWIZCE.jpg",
               metadata: {},
               subtype: null,
-              hyperlink: "https://www.google.com/",
+              hyperlink: "https://www.google.com/"
             },
             {
               description: "",
               "image-metadata": {
                 "original-url":
-                  "https://www.washingtonpost.com/resizer/_f5BO1VdLp-O-jX1x-NK-GfYknU=/1440x0/smart/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/ZE2IQNUBVAI6VBGCA6JNQWIZCE.jpg",
+                  "https://www.washingtonpost.com/resizer/_f5BO1VdLp-O-jX1x-NK-GfYknU=/1440x0/smart/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/ZE2IQNUBVAI6VBGCA6JNQWIZCE.jpg"
               },
               type: "image",
               "family-id": "67ae55bd-3f34-417b-8951-fb525da321f2",
@@ -697,13 +786,13 @@ export const dummyStory = {
               "image-s3-key": "ace/2020-04/aef8d5e1-d2fc-4f77-968b-50ff0c4764ea/ZE2IQNUBVAI6VBGCA6JNQWIZCE.jpg",
               metadata: {},
               subtype: null,
-              hyperlink: "https://www.google.com/",
+              hyperlink: "https://www.google.com/"
             },
             {
               description: "",
               "image-metadata": {
                 "original-url":
-                  "https://www.washingtonpost.com/resizer/_f5BO1VdLp-O-jX1x-NK-GfYknU=/1440x0/smart/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/ZE2IQNUBVAI6VBGCA6JNQWIZCE.jpg",
+                  "https://www.washingtonpost.com/resizer/_f5BO1VdLp-O-jX1x-NK-GfYknU=/1440x0/smart/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/ZE2IQNUBVAI6VBGCA6JNQWIZCE.jpg"
               },
               type: "image",
               "family-id": "67ae55bd-3f34-417b-8951-fb525da321f2",
@@ -713,13 +802,13 @@ export const dummyStory = {
               "image-s3-key": "ace/2020-04/aef8d5e1-d2fc-4f77-968b-50ff0c4764ea/ZE2IQNUBVAI6VBGCA6JNQWIZCE.jpg",
               metadata: {},
               subtype: null,
-              hyperlink: "https://www.google.com/",
+              hyperlink: "https://www.google.com/"
             },
             {
               description: "",
               "image-metadata": {
                 "original-url":
-                  "https://www.washingtonpost.com/resizer/_f5BO1VdLp-O-jX1x-NK-GfYknU=/1440x0/smart/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/ZE2IQNUBVAI6VBGCA6JNQWIZCE.jpg",
+                  "https://www.washingtonpost.com/resizer/_f5BO1VdLp-O-jX1x-NK-GfYknU=/1440x0/smart/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/ZE2IQNUBVAI6VBGCA6JNQWIZCE.jpg"
               },
               type: "image",
               "family-id": "67ae55bd-3f34-417b-8951-fb525da321f2",
@@ -729,13 +818,13 @@ export const dummyStory = {
               "image-s3-key": "ace/2020-04/aef8d5e1-d2fc-4f77-968b-50ff0c4764ea/ZE2IQNUBVAI6VBGCA6JNQWIZCE.jpg",
               metadata: {},
               subtype: null,
-              hyperlink: "https://www.google.com/",
+              hyperlink: "https://www.google.com/"
             },
             {
               description: "",
               "image-metadata": {
                 "original-url":
-                  "https://www.aljazeera.com/mritems/Images/2020/4/19/e69c7b29e024420d95e519b96edfc7aa_18.jpg",
+                  "https://www.aljazeera.com/mritems/Images/2020/4/19/e69c7b29e024420d95e519b96edfc7aa_18.jpg"
               },
               type: "image",
               "family-id": "096ff456-dd70-45f8-9953-4ac78c6c332c",
@@ -746,13 +835,13 @@ export const dummyStory = {
                 "ace/2020-04/7cebf55c-27c1-4e73-839f-85d1399a354e/e69c7b29e024420d95e519b96edfc7aa_18.jpg",
               metadata: {},
               subtype: null,
-              hyperlink: "https://www.google.com/",
+              hyperlink: "https://www.google.com/"
             },
             {
               description: "",
               "image-metadata": {
                 "original-url":
-                  "https://media.khou.com/assets/KHOU/images/55ceb4cc-e4a7-4a99-bc29-34ed175c4df2/55ceb4cc-e4a7-4a99-bc29-34ed175c4df2_1140x641.jpg",
+                  "https://media.khou.com/assets/KHOU/images/55ceb4cc-e4a7-4a99-bc29-34ed175c4df2/55ceb4cc-e4a7-4a99-bc29-34ed175c4df2_1140x641.jpg"
               },
               type: "image",
               "family-id": "69f2fa84-f55b-4176-a48e-9cc0521b610d",
@@ -763,16 +852,16 @@ export const dummyStory = {
                 "ace/2020-04/167805cc-a440-41fe-bccf-132660d4350f/55ceb4cc_e4a7_4a99_bc29_34ed175c4df2_1140x641.jpg",
               metadata: {},
               subtype: null,
-              hyperlink: "https://www.google.com/",
-            },
+              hyperlink: "https://www.google.com/"
+            }
           ],
           title: "",
           id: "b35ef956-35ce-4431-a68d-018760a4ddda",
           metadata: {
-            type: "gallery",
+            type: "gallery"
           },
-          subtype: "image-gallery",
-        },
+          subtype: "image-gallery"
+        }
       ],
       "card-updated-at": 1587559563683,
       "content-version-id": "11beb6bf-bcb3-4ea2-8764-7355fc40811b",
@@ -797,12 +886,12 @@ export const dummyStory = {
               "mime-type": "image/png",
               "file-size": 587085,
               "file-name": "ready-player-one-hd-wallpapers-70749-6537851.png",
-              "focus-point": [883, 411],
-            },
-          },
+              "focus-point": [883, 411]
+            }
+          }
         },
-        attributes: {},
-      },
+        attributes: {}
+      }
     },
     {
       "story-elements": [
@@ -816,7 +905,7 @@ export const dummyStory = {
           url: "https://www.youtube.com/watch?v=cSp1dM2Vj48&feature=youtu.be",
           "embed-url": "https://www.youtube.com/embed/cSp1dM2Vj48",
           metadata: {},
-          subtype: null,
+          subtype: null
         },
         {
           id: "00000000-0000-0000-0000-000000000000",
@@ -824,11 +913,12 @@ export const dummyStory = {
           title: "",
           subtype: null,
           type: "text",
-          text: '<p><a href="https://www.theguardian.com/technology/virtual-reality">Virtual reality</a> is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. <a href="https://www.theguardian.com/film/stevenspielberg">Steven Spielberg</a> 2019s <a href="https://www.theguardian.com/film/ready-player-one">Ready Player One</a>.</p>',
+          text:
+            '<p><a href="https://www.theguardian.com/technology/virtual-reality">Virtual reality</a> is the air guitar solo of modern cinema: a frenetic imagined activity in a made-up world that exists one level below the already made-up world of the story. <a href="https://www.theguardian.com/film/stevenspielberg">Steven Spielberg</a> 2019s <a href="https://www.theguardian.com/film/ready-player-one">Ready Player One</a>.</p>',
           metadata: {
-            "promotional-message": true,
-          },
-        },
+            "promotional-message": true
+          }
+        }
       ],
       "card-updated-at": 1524116209278,
       "content-version-id": "f1e7f3ea-21f2-4801-b6d7-2022ee079478",
@@ -853,14 +943,15 @@ export const dummyStory = {
               "mime-type": "image/png",
               "file-size": 587085,
               "file-name": "ready-player-one-hd-wallpapers-70749-6537851.png",
-              "focus-point": [883, 411],
-            },
-          },
-        },
-      },
-    },
+              "focus-point": [883, 411]
+            }
+          }
+        }
+      }
+    }
   ],
-  url: "https://ace-web.qtstage.io/anything/recent-stories/news/ready-player-one-review-spielberg-spins-a-dizzying-vr-yarn",
+  url:
+    "https://ace-web.qtstage.io/anything/recent-stories/news/ready-player-one-review-spielberg-spins-a-dizzying-vr-yarn",
   "story-version-id": "28c7b47d-3b37-49f6-a0ba-2886d14182e4",
   "content-type": "story",
   "content-updated-at": 1564650017530,
@@ -869,7 +960,7 @@ export const dummyStory = {
   "linked-story-ids": [],
   "promotional-message": '<p>text <a href="https://ace-web.qtstage.io/">promotional</a> message</p>',
   "asana-project-id": null,
-  "first-published-at": 1524116216298,
+  "first-published-at": 1671083514919,
   "hero-image-caption": "hero image caption",
   version: 47,
   "story-template": "review",
@@ -882,8 +973,8 @@ export const dummyStory = {
       social: {
         twitter: {
           url: "https://www.twitter.com/sabqorg",
-          handle: "elonmusk",
-        },
+          handle: "elonmusk"
+        }
       },
       slug: "stephen-wertheim",
       "avatar-url": "https://thumbor-stg.assettype.com/ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
@@ -892,8 +983,8 @@ export const dummyStory = {
       bio: null,
       "contributor-role": {
         id: 873,
-        name: "Author",
-      },
+        name: "Author"
+      }
     },
     {
       id: 123981,
@@ -902,8 +993,8 @@ export const dummyStory = {
       social: {
         twitter: {
           url: "https://www.twitter.com/sabqorg",
-          handle: "elonmusk",
-        },
+          handle: "elonmusk"
+        }
       },
       "avatar-url":
         "https://lh5.googleusercontent.com/-NhNrHEp1w4M/AAAAAAAAAAI/AAAAAAAAAAs/lzYwVY1BQdQ/photo.jpg?sz=50",
@@ -912,23 +1003,62 @@ export const dummyStory = {
       bio: null,
       "contributor-role": {
         id: 873,
-        name: "Author",
+        name: "Author"
+      }
+    },
+
+    {
+      id: 949805,
+      name: "Harry Potter",
+      social: {
+        twitter: {
+          url: "https://www.twitter.com/sabqorg",
+          handle: "elonmusk"
+        }
       },
+      slug: "stephen-wertheim",
+      "avatar-url": "https://thumbor-stg.assettype.com/ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+      "avatar-s3-key": "ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+      "twitter-handle": null,
+      bio: null,
+      "contributor-role": {
+        id: 879,
+        name: "Guest Author"
+      }
     },
+    {
+      id: 949806,
+      name: "Hagrid",
+      social: {
+        twitter: {
+          url: "https://www.twitter.com/sabqorg",
+          handle: "elonmusk"
+        }
+      },
+      slug: "stephen-wertheim",
+      "avatar-url": "https://thumbor-stg.assettype.com/ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+      "avatar-s3-key": "ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
+      "twitter-handle": null,
+      bio: null,
+      "contributor-role": {
+        id: 8708,
+        name: "Guest Author"
+      }
+    }
   ],
   metadata: {
     "review-title": "Ready Player One",
     "review-rating": {
       label: "1",
-      value: "1",
+      value: "1"
     },
     "sponsored-by": "quint",
     "card-share": {
-      shareable: false,
-    },
+      shareable: false
+    }
   },
   "publish-at": null,
-  "assignee-name": "Ravigopal Kesari",
+  "assignee-name": "Ravigopal Kesari"
 };
 
 export const dummyPhotoStory = {
@@ -936,8 +1066,8 @@ export const dummyPhotoStory = {
   "updated-at": 1599115419318,
   seo: {
     "claim-reviews": {
-      story: null,
-    },
+      story: null
+    }
   },
   "assignee-id": 187245,
   "author-name": "Shreya Shukla",
@@ -949,7 +1079,7 @@ export const dummyPhotoStory = {
       "meta-description": "5th Anniversary of quintype",
       "meta-title": "5th Anniversary of qt",
       slug: "50th-anniversary",
-      "tag-type": "Tag",
+      "tag-type": "Tag"
     },
     {
       id: 1092771,
@@ -957,7 +1087,7 @@ export const dummyPhotoStory = {
       "meta-description": null,
       "meta-title": null,
       slug: "newzealand",
-      "tag-type": "Tag",
+      "tag-type": "Tag"
     },
     {
       id: 1292529,
@@ -965,7 +1095,7 @@ export const dummyPhotoStory = {
       "meta-description": null,
       "meta-title": null,
       slug: "50",
-      "tag-type": "Tag",
+      "tag-type": "Tag"
     },
     {
       id: 1292530,
@@ -973,14 +1103,14 @@ export const dummyPhotoStory = {
       "meta-description": null,
       "meta-title": null,
       slug: "bangalore",
-      "tag-type": "Tag",
-    },
+      "tag-type": "Tag"
+    }
   ],
   customSlotAfterStory: {
     config: { targetingId: "" },
     layout: "Leaderboard",
     layoutLabel: "Leaderboard",
-    type: "ad",
+    type: "ad"
   },
   headline: "Karnataka tourism",
   "storyline-id": null,
@@ -1002,13 +1132,13 @@ export const dummyPhotoStory = {
       collection: {
         slug: "child-sec-parent-sec",
         name: "child-sec (parent-sec)",
-        id: 17115,
+        id: 17115
       },
-      data: null,
-    },
+      data: null
+    }
   ],
   "story-audio": {
-    "s3-key": "ace/story-audio/2020-09/231f55c0-ba92-4da6-a2c0-697c520f860f/.0fc573c1-97de-4644-8a26-bf65c4d6f0d9.mp3",
+    "s3-key": "ace/story-audio/2020-09/231f55c0-ba92-4da6-a2c0-697c520f860f/.0fc573c1-97de-4644-8a26-bf65c4d6f0d9.mp3"
   },
   "read-time": 2,
   "access-level-value": null,
@@ -1020,7 +1150,7 @@ export const dummyPhotoStory = {
   "hero-image-metadata": {
     "original-url": "https://www.india.com/wp-content/uploads/2014/09/vikasa-soudha-245043_960_720.jpg",
     width: 625,
-    height: 470,
+    height: 470
   },
   comments: null,
   "word-count": 245,
@@ -1046,12 +1176,24 @@ export const dummyPhotoStory = {
   cards: [
     {
       "story-elements": [
+        {
+          description: "",
+          "page-url": "/story/191d390f-7f10-422a-86b5-cf589a0bac08/element/d31da4d6-2738-48c6-8a9c-bd1a6ca919ba",
+          type: "text",
+          "family-id": "4e2d8d24-581a-4204-a40a-f8ab46d62c04",
+          title: "",
+          id: "d31da4d6-2738-48c6-8a9c-bd1a6ca919ba",
+          metadata: {},
+          subtype: "summary",
+          text:
+            '<p>Summary: In 2005, <em><a href="https://en.wikipedia.org/wiki/Nature_(journal)">Nature</a></em> published a peer review comparing 42 <a href="https://en.wikipedia.org/wiki/Hard_science">hard science</a> articles from <em><a href="https://en.wikipedia.org/wiki/Encyclop%C3%A6dia_Britannica">Encyclopædia Britannica</a></em> and Wikipedia and found that Wikipedia\'s level of accuracy approached that of <em>Britannica</em>,<sup><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-GilesJ2005Internet-23">[21]</a></sup> although critics suggested that it might not have fared so well in a similar study of a <a href="https://en.wikipedia.org/wiki/Random_sampling">random sampling</a> of all articles or one focused on social science or contentious social issues.<sup><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-Reagle,_pp._165%E2%80%93166-24">[22]</a><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-Orlowski2005-25">[23]</a></sup> The following year, <em><a href="https://en.wikipedia.org/wiki/Time_(magazine)">Time</a></em> magazine stated that the open-door policy of allowing anyone to edit had made Wikipedia the biggest and possibly the best encyclopedia in the world, and was a testament to the vision of Jimmy Wales.<sup><a href="https://en.wikipedia.org/wiki/Wikipedia#cite_note-26">[24]</a></sup></p>'
+        },
         {
           description: "",
           "image-metadata": {
             width: 1920,
             height: 1080,
-            "focus-point": [964, 507],
+            "focus-point": [964, 507]
           },
           "page-url": "/story/231f55c0-ba92-4da6-a2c0-697c520f860f/element/7798674b-46f4-429c-95ce-cb5d334277e4",
           type: "image",
@@ -1062,7 +1204,7 @@ export const dummyPhotoStory = {
           "image-s3-key": "ace/2018-12/fcdb3782-886c-47ce-a84f-0ef5e051d639/Images_9.jpg",
           metadata: {},
           subtype: null,
-          hyperlink: "https://www.google.com/",
+          hyperlink: "https://www.google.com/"
         },
         {
           description: "",
@@ -1073,7 +1215,7 @@ export const dummyPhotoStory = {
           id: "664c9d54-f0c2-4016-a80e-7c7ed1d64330",
           metadata: {},
           subtype: null,
-          text: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus",
+          text: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus"
         },
         {
           description: "",
@@ -1084,14 +1226,15 @@ export const dummyPhotoStory = {
           id: "3bd855a8-9db1-404b-b193-6b4ec7a4c6f2",
           metadata: {},
           subtype: null,
-          text: "<p>Dolor sit amet lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
+          text:
+            "<p>Dolor sit amet lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
         },
         {
           config: { targetingId: "" },
           layout: "Leaderboard",
           layoutLabel: "Leaderboard",
-          type: "ad",
-        },
+          type: "ad"
+        }
       ],
       "card-updated-at": 1599070341951,
       "content-version-id": "7160cfea-8a20-48a6-a67c-c5c1bf26a062",
@@ -1113,12 +1256,12 @@ export const dummyPhotoStory = {
             metadata: {
               width: 1920,
               height: 1080,
-              "focus-point": [964, 507],
-            },
-          },
+              "focus-point": [964, 507]
+            }
+          }
         },
-        attributes: {},
-      },
+        attributes: {}
+      }
     },
     {
       "story-elements": [
@@ -1128,7 +1271,7 @@ export const dummyPhotoStory = {
             "original-url":
               "https://s.rfi.fr/media/display/ddb13a2c-e9b1-11ea-9cf1-005056bf87d6/w:1280/p:16x9/f4da51e521694ef3b14820c2fd32709e691f058e.jpg",
             width: 1280,
-            height: 720,
+            height: 720
           },
           "page-url": "/story/231f55c0-ba92-4da6-a2c0-697c520f860f/element/d33f9a51-4bc6-4205-8784-86cb11027115",
           type: "image",
@@ -1140,7 +1283,7 @@ export const dummyPhotoStory = {
             "ace/2020-08/04562266-d044-4cf3-8ff3-58ab0b084d33/f4da51e521694ef3b14820c2fd32709e691f058e.jpg",
           metadata: {},
           subtype: null,
-          hyperlink: "https://www.google.com/",
+          hyperlink: "https://www.google.com/"
         },
         {
           description: "",
@@ -1151,7 +1294,8 @@ export const dummyPhotoStory = {
           id: "530154d6-f1eb-4e12-8c87-6a49e8269cc6",
           metadata: {},
           subtype: "summary",
-          text: "<p>Dolor sit amet lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
+          text:
+            "<p>Dolor sit amet lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
         },
         {
           description: "",
@@ -1163,10 +1307,11 @@ export const dummyPhotoStory = {
           metadata: {
             content:
               "Dolor sit amet lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-            attribution: "Quintype",
+            attribution: "Quintype"
           },
           subtype: "quote",
-          text: '<div><blockquote>Dolor sit amet lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</blockquote><span class="attribution">Quintype</span></div>',
+          text:
+            '<div><blockquote>Dolor sit amet lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</blockquote><span class="attribution">Quintype</span></div>'
         },
         {
           description: "",
@@ -1178,10 +1323,11 @@ export const dummyPhotoStory = {
           metadata: {
             content:
               "Dolor sit amet lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-            attribution: "Quintype",
+            attribution: "Quintype"
           },
           subtype: "blockquote",
-          text: '<div><blockquote>Dolor sit amet lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</blockquote><span class="attribution">Quintype</span></div>',
+          text:
+            '<div><blockquote>Dolor sit amet lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</blockquote><span class="attribution">Quintype</span></div>'
         },
         {
           description: "",
@@ -1195,9 +1341,9 @@ export const dummyPhotoStory = {
           "s3-key": "ace/2020-09/d33ccb5b-a3c4-4376-8767-bedebe3e6f7c/Doker.pdf",
           "content-type": "application/pdf",
           metadata: {
-            "file-size": 28746,
+            "file-size": 28746
           },
-          subtype: "attachment",
+          subtype: "attachment"
         },
         {
           description: "",
@@ -1208,10 +1354,11 @@ export const dummyPhotoStory = {
           id: "85b7b83e-d1ac-4775-8c3c-5c48107db183",
           metadata: {
             question: "<p>Grand Central Terminal, Park Avenue, New York is the world's</p>",
-            answer: "<p>largest railway station</p>",
+            answer: "<p>largest railway station</p>"
           },
           subtype: "q-and-a",
-          text: '<div><div class="question"><p>Grand Central Terminal, Park Avenue, New York is the world\'s</p></div><div class="answer"><p>largest railway station</p></div></div>',
+          text:
+            '<div><div class="question"><p>Grand Central Terminal, Park Avenue, New York is the world\'s</p></div><div class="answer"><p>largest railway station</p></div></div>'
         },
         {
           description: "",
@@ -1222,11 +1369,12 @@ export const dummyPhotoStory = {
           id: "bb010ef2-8e67-4b72-8d4a-a525c7c4818c",
           metadata: {
             question: "<p>For which of the following disciplines is Nobel Prize awarded?</p>",
-            answer: "<p>Physics and Chemistry</p><p>Physiology or Medicine</p><p>Literature, Peace and Economics</p>",
+            answer: "<p>Physics and Chemistry</p><p>Physiology or Medicine</p><p>Literature, Peace and Economics</p>"
           },
           subtype: "q-and-a",
-          text: '<div><div class="question"><p>For which of the following disciplines is Nobel Prize awarded?</p></div><div class="answer"><p>Physics and Chemistry</p><p>Physiology or Medicine</p><p>Literature, Peace and Economics</p></div></div>',
-        },
+          text:
+            '<div><div class="question"><p>For which of the following disciplines is Nobel Prize awarded?</p></div><div class="answer"><p>Physics and Chemistry</p><p>Physiology or Medicine</p><p>Literature, Peace and Economics</p></div></div>'
+        }
       ],
       "card-updated-at": 1599070341951,
       "content-version-id": "4a3303f2-250d-4e57-9411-4e6b6ff30cd3",
@@ -1249,12 +1397,12 @@ export const dummyPhotoStory = {
               "original-url":
                 "https://s.rfi.fr/media/display/ddb13a2c-e9b1-11ea-9cf1-005056bf87d6/w:1280/p:16x9/f4da51e521694ef3b14820c2fd32709e691f058e.jpg",
               width: 1280,
-              height: 720,
-            },
-          },
+              height: 720
+            }
+          }
         },
-        attributes: {},
-      },
+        attributes: {}
+      }
     },
     {
       "story-elements": [
@@ -1267,7 +1415,8 @@ export const dummyPhotoStory = {
           id: "a22e71ed-d2e6-442c-b30c-4eaae392241e",
           metadata: {},
           subtype: null,
-          text: "<p>Dolor sit amet lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
+          text:
+            "<p>Dolor sit amet lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
         },
         {
           description: "",
@@ -1275,7 +1424,7 @@ export const dummyPhotoStory = {
             "original-url":
               "https://s.rfi.fr/media/display/e21e72c0-ec66-11ea-9857-005056a964fe/w:1280/p:16x9/8bfca0efa60a7b897690bea687d9cb3b991611ff_0.jpg",
             width: 1280,
-            height: 720,
+            height: 720
           },
           "page-url": "/story/231f55c0-ba92-4da6-a2c0-697c520f860f/element/613fcdb4-c551-4deb-be2f-ff50428235ec",
           type: "image",
@@ -1287,7 +1436,7 @@ export const dummyPhotoStory = {
             "ace/2020-09/12d48d3c-dac1-4b99-b961-a724c92c6cc2/8bfca0efa60a7b897690bea687d9cb3b991611ff_0.jpg",
           metadata: {},
           subtype: null,
-          hyperlink: "https://www.google.com/",
+          hyperlink: "https://www.google.com/"
         },
         {
           description: "",
@@ -1298,7 +1447,8 @@ export const dummyPhotoStory = {
           id: "3f57c4cb-0736-4c89-94a2-3891e6cf1dce",
           metadata: {},
           subtype: "summary",
-          text: "<p>Dolor sit amet lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
+          text:
+            "<p>Dolor sit amet lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
         },
         {
           id: "00000000-0000-0000-0000-000000000000",
@@ -1308,9 +1458,9 @@ export const dummyPhotoStory = {
           type: "text",
           text: ' <p>text <a href="https://ace-web.qtstage.io/">promotional</a> message</p>',
           metadata: {
-            "promotional-message": true,
-          },
-        },
+            "promotional-message": true
+          }
+        }
       ],
       "card-updated-at": 1599072759773,
       "content-version-id": "d92aae5f-7d65-4260-853f-c440373905c4",
@@ -1333,13 +1483,13 @@ export const dummyPhotoStory = {
               "original-url":
                 "https://s.rfi.fr/media/display/e21e72c0-ec66-11ea-9857-005056a964fe/w:1280/p:16x9/8bfca0efa60a7b897690bea687d9cb3b991611ff_0.jpg",
               width: 1280,
-              height: 720,
-            },
-          },
+              height: 720
+            }
+          }
         },
-        attributes: {},
-      },
-    },
+        attributes: {}
+      }
+    }
   ],
   url: "https://ace-web.qtstage.io/child-sec/2020/09/02/karnataka-tourism",
   "story-version-id": "fb04a248-7855-484c-ab2f-9b71e45fe7e7",
@@ -1350,7 +1500,7 @@ export const dummyPhotoStory = {
   "linked-story-ids": [],
   "promotional-message": ' <p>text <a href="https://ace-web.qtstage.io/">promotional</a> message</p>',
   "asana-project-id": null,
-  "first-published-at": 1599070346878,
+  "first-published-at": 1671083514919,
   "hero-image-caption": "Supreme Court Justice Clarence Thomas in 2007. ",
   version: 19,
   "story-template": "photo",
@@ -1361,29 +1511,30 @@ export const dummyPhotoStory = {
       slug: "shreya-shukla-2",
       social: {
         twitter: {
-          handle: "shuklashreya801",
-        },
+          handle: "shuklashreya801"
+        }
       },
       name: "Shreya Shukla",
       "contributor-role": {
         id: 873,
-        name: "Author",
+        name: "Author"
       },
       "avatar-url":
         "https://lh6.googleusercontent.com/-pBdJGAfN81c/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rfmrjS-gWdYzH3Gtmuib3KbVLdixw/photo.jpg",
-      bio: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi ",
+      bio:
+        "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi ",
       id: 187245,
       "avatar-s3-key": null,
-      "twitter-handle": "shuklashreya801",
-    },
+      "twitter-handle": "shuklashreya801"
+    }
   ],
   metadata: {
     "card-share": {
-      shareable: false,
-    },
+      shareable: false
+    }
   },
   "publish-at": null,
-  "assignee-name": "Shreya Shukla",
+  "assignee-name": "Shreya Shukla"
 };
 
 export const dummyLiveBlogStory = {
@@ -1400,7 +1551,7 @@ export const dummyLiveBlogStory = {
       "meta-description": null,
       "meta-title": null,
       slug: "entertainment",
-      "tag-type": "Tag",
+      "tag-type": "Tag"
     },
     {
       id: 1209598,
@@ -1408,22 +1559,15 @@ export const dummyLiveBlogStory = {
       "meta-description": null,
       "meta-title": null,
       slug: "government",
-      "tag-type": "Tag",
-    },
-    {
-      id: 1409326,
-      name: "liveblog",
-      "meta-description": null,
-      "meta-title": null,
-      slug: "liveblog",
-      "tag-type": "Tag",
+      "tag-type": "Tag"
     },
+    { id: 1409326, name: "liveblog", "meta-description": null, "meta-title": null, slug: "liveblog", "tag-type": "Tag" }
   ],
   customSlotAfterStory: {
     config: { targetingId: "" },
     layout: "Leaderboard",
     layoutLabel: "Leaderboard",
-    type: "ad",
+    type: "ad"
   },
   headline: "Live blog story ",
   "storyline-id": null,
@@ -1443,8 +1587,8 @@ export const dummyLiveBlogStory = {
       "parent-id": 38586,
       "display-name": "Entertainment",
       collection: { slug: "entertainment", name: "Entertainment", id: 3946 },
-      data: null,
-    },
+      data: null
+    }
   ],
   "story-audio": { "s3-key": null },
   "read-time": 0,
@@ -1488,7 +1632,7 @@ export const dummyLiveBlogStory = {
           id: "3a569347-2bed-4763-bf3b-b58df01ad6cc",
           metadata: {},
           subtype: null,
-          text: "Sed ut perspiciatis unde omnis iste natus error",
+          text: "Sed ut perspiciatis unde omnis iste natus error"
         },
         {
           description: "",
@@ -1499,8 +1643,9 @@ export const dummyLiveBlogStory = {
           id: "739cf8a1-26d8-48fb-8cbf-771b1161ed68",
           metadata: {},
           subtype: null,
-          text: "<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est</p>",
-        },
+          text:
+            "<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est</p>"
+        }
       ],
       "card-updated-at": 1601431229891,
       "content-version-id": "254fdb13-fa12-426f-a50b-8846847158a5",
@@ -1519,11 +1664,11 @@ export const dummyLiveBlogStory = {
             url: "https://thumbor-stg.assettype.com/ace/2019-03/f25cc9c1-917c-4a19-9c9a-fa498f84f17b/test.jpg",
             attribution: "Google",
             caption: "Saque ipsa quae ab illo inventore veritatis et quip",
-            metadata: { "mime-type": "image/jpeg", "focus-point": [975, 375], width: 1682, height: 820 },
-          },
+            metadata: { "mime-type": "image/jpeg", "focus-point": [975, 375], width: 1682, height: 820 }
+          }
         },
-        attributes: {},
-      },
+        attributes: {}
+      }
     },
     {
       "story-elements": [
@@ -1536,7 +1681,7 @@ export const dummyLiveBlogStory = {
           id: "8ee1c6ed-57d8-4891-8a77-e789b2d33c29",
           metadata: {},
           subtype: null,
-          text: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium",
+          text: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium"
         },
         {
           description: "",
@@ -1547,7 +1692,8 @@ export const dummyLiveBlogStory = {
           id: "78142993-d358-4c17-b610-9c80101f32b1",
           metadata: {},
           subtype: null,
-          text: "<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.</p>",
+          text:
+            "<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.</p>"
         },
         {
           description: "",
@@ -1558,7 +1704,7 @@ export const dummyLiveBlogStory = {
             "original-url":
               "https://s.rfi.fr/media/display/a1b6b938-01c2-11eb-ba87-005056a964fe/w:1280/p:16x9/3aae2ba50b3667e9f02e3674a37581fae1ebaf74_3.jpg",
             width: 1280,
-            height: 720,
+            height: 720
           },
           "uploaded-at": 1601327722596,
           "page-url": "/story/4270e6db-f238-46d4-8b6d-788ede41760e/element/bf739a18-6878-485a-adc7-d608d767f123",
@@ -1571,8 +1717,8 @@ export const dummyLiveBlogStory = {
             "ace/2020-09/55df83b2-3181-49f3-b1d9-31cc91dda1be/3aae2ba50b3667e9f02e3674a37581fae1ebaf74_3.jpg",
           metadata: {},
           subtype: null,
-          hyperlink: "https://www.google.com/",
-        },
+          hyperlink: "https://www.google.com/"
+        }
       ],
       "card-updated-at": 1601431229891,
       "content-version-id": "2640b2cd-e57e-47b8-9a09-0c9e61bec4a9",
@@ -1588,19 +1734,20 @@ export const dummyLiveBlogStory = {
           message: null,
           image: {
             key: "ace/2020-09/55df83b2-3181-49f3-b1d9-31cc91dda1be/3aae2ba50b3667e9f02e3674a37581fae1ebaf74_3.jpg",
-            url: "https://thumbor-stg.assettype.com/ace/2020-09/55df83b2-3181-49f3-b1d9-31cc91dda1be/3aae2ba50b3667e9f02e3674a37581fae1ebaf74_3.jpg",
+            url:
+              "https://thumbor-stg.assettype.com/ace/2020-09/55df83b2-3181-49f3-b1d9-31cc91dda1be/3aae2ba50b3667e9f02e3674a37581fae1ebaf74_3.jpg",
             attribution: "",
             caption: null,
             metadata: {
               "original-url":
                 "https://s.rfi.fr/media/display/a1b6b938-01c2-11eb-ba87-005056a964fe/w:1280/p:16x9/3aae2ba50b3667e9f02e3674a37581fae1ebaf74_3.jpg",
               width: 1280,
-              height: 720,
-            },
-          },
+              height: 720
+            }
+          }
         },
-        attributes: {},
-      },
+        attributes: {}
+      }
     },
     {
       "story-elements": [
@@ -1613,8 +1760,8 @@ export const dummyLiveBlogStory = {
           id: "1cef89d6-c934-4f3c-b4d1-56460eb076e4",
           metadata: {},
           subtype: null,
-          text: "Sed ut perspiciatis unde omnis iste natus error ",
-        },
+          text: "Sed ut perspiciatis unde omnis iste natus error "
+        }
       ],
       "card-updated-at": 1601431229891,
       "content-version-id": "89935f86-dba4-4f90-b7ea-f59db58554f7",
@@ -1633,11 +1780,11 @@ export const dummyLiveBlogStory = {
             url: "https://thumbor-stg.assettype.com/ace/2019-03/f25cc9c1-917c-4a19-9c9a-fa498f84f17b/test.jpg",
             attribution: "Google",
             caption: "Saque ipsa quae ab illo inventore veritatis et quip",
-            metadata: { "mime-type": "image/jpeg", "focus-point": [975, 375], width: 1682, height: 820 },
-          },
+            metadata: { "mime-type": "image/jpeg", "focus-point": [975, 375], width: 1682, height: 820 }
+          }
         },
-        attributes: { "key-event": true },
-      },
+        attributes: { "key-event": true }
+      }
     },
     {
       "story-elements": [
@@ -1650,8 +1797,8 @@ export const dummyLiveBlogStory = {
           id: "1cef89d6-c934-4f3c-b4d1-56460eb076e4",
           metadata: {},
           subtype: null,
-          text: "Sed ut perspiciatis unde omnis iste natus error ",
-        },
+          text: "Sed ut perspiciatis unde omnis iste natus error "
+        }
       ],
       "card-updated-at": 1601431229891,
       "content-version-id": "89935f86-dba4-4f90-b7ea-f59db58554f7",
@@ -1670,11 +1817,11 @@ export const dummyLiveBlogStory = {
             url: "https://thumbor-stg.assettype.com/ace/2019-03/f25cc9c1-917c-4a19-9c9a-fa498f84f17b/test.jpg",
             attribution: "Google",
             caption: "Saque ipsa quae ab illo inventore veritatis et quip",
-            metadata: { "mime-type": "image/jpeg", "focus-point": [975, 375], width: 1682, height: 820 },
-          },
+            metadata: { "mime-type": "image/jpeg", "focus-point": [975, 375], width: 1682, height: 820 }
+          }
         },
-        attributes: { "key-event": true },
-      },
+        attributes: { "key-event": true }
+      }
     },
     {
       "story-elements": [
@@ -1687,8 +1834,8 @@ export const dummyLiveBlogStory = {
           id: "1cef89d6-c934-4f3c-b4d1-56460eb076e4",
           metadata: {},
           subtype: null,
-          text: "Sed ut perspiciatis unde omnis iste natus error ",
-        },
+          text: "Sed ut perspiciatis unde omnis iste natus error "
+        }
       ],
       "card-updated-at": 1601431229891,
       "content-version-id": "89935f86-dba4-4f90-b7ea-f59db58554f7",
@@ -1707,11 +1854,11 @@ export const dummyLiveBlogStory = {
             url: "https://thumbor-stg.assettype.com/ace/2019-03/f25cc9c1-917c-4a19-9c9a-fa498f84f17b/test.jpg",
             attribution: "Google",
             caption: "Saque ipsa quae ab illo inventore veritatis et quip",
-            metadata: { "mime-type": "image/jpeg", "focus-point": [975, 375], width: 1682, height: 820 },
-          },
+            metadata: { "mime-type": "image/jpeg", "focus-point": [975, 375], width: 1682, height: 820 }
+          }
         },
-        attributes: { "key-event": true },
-      },
+        attributes: { "key-event": true }
+      }
     },
     {
       "story-elements": [
@@ -1724,8 +1871,8 @@ export const dummyLiveBlogStory = {
           id: "b62c0458-b8eb-4f3d-9f3b-86d04447a909",
           metadata: {},
           subtype: null,
-          text: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium",
-        },
+          text: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium"
+        }
       ],
       "card-updated-at": 1601277247407,
       "content-version-id": "49686375-3b2c-4f02-93a8-e47d1a063e1f",
@@ -1744,11 +1891,11 @@ export const dummyLiveBlogStory = {
             url: "https://thumbor-stg.assettype.com/ace/2019-03/f25cc9c1-917c-4a19-9c9a-fa498f84f17b/test.jpg",
             attribution: "Google",
             caption: "Saque ipsa quae ab illo inventore veritatis et quip",
-            metadata: { "mime-type": "image/jpeg", "focus-point": [975, 375], width: 1682, height: 820 },
-          },
+            metadata: { "mime-type": "image/jpeg", "focus-point": [975, 375], width: 1682, height: 820 }
+          }
         },
-        attributes: { "key-event": true },
-      },
+        attributes: { "key-event": true }
+      }
     },
     {
       "story-elements": [
@@ -1761,7 +1908,7 @@ export const dummyLiveBlogStory = {
           id: "3ca72d69-09d3-47be-8921-a993c111fd9e",
           metadata: {},
           subtype: null,
-          text: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus",
+          text: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus"
         },
         {
           id: "00000000-0000-0000-0000-000000000000",
@@ -1770,8 +1917,8 @@ export const dummyLiveBlogStory = {
           subtype: null,
           type: "text",
           text: ' <p>text <a href="https://ace-web.qtstage.io/">promotional</a> message</p>',
-          metadata: { "promotional-message": true },
-        },
+          metadata: { "promotional-message": true }
+        }
       ],
       "card-updated-at": 1601277247407,
       "content-version-id": "0acfbcb5-c770-498e-8439-a137e031dede",
@@ -1790,12 +1937,12 @@ export const dummyLiveBlogStory = {
             url: "https://thumbor-stg.assettype.com/ace/2019-03/f25cc9c1-917c-4a19-9c9a-fa498f84f17b/test.jpg",
             attribution: "Google",
             caption: "Saque ipsa quae ab illo inventore veritatis et quip",
-            metadata: { "mime-type": "image/jpeg", "focus-point": [975, 375], width: 1682, height: 820 },
-          },
+            metadata: { "mime-type": "image/jpeg", "focus-point": [975, 375], width: 1682, height: 820 }
+          }
         },
-        attributes: { "key-event": true },
-      },
-    },
+        attributes: { "key-event": true }
+      }
+    }
   ],
   url: "https://ace-web.qtstage.io/entertainment/2020/09/28/live-blog-story-3",
   "story-version-id": "dbc68251-e21d-4b1f-b8d2-e6ec972249ce",
@@ -1806,7 +1953,7 @@ export const dummyLiveBlogStory = {
   "linked-story-ids": [],
   "promotional-message": ' <p>text <a href="https://ace-web.qtstage.io/">promotional</a> message</p>',
   "asana-project-id": null,
-  "first-published-at": 1601276764461,
+  "first-published-at": 1671083514919,
   "hero-image-caption": "Saque ipsa quae ab illo inventore veritatis et quip",
   version: 10,
   "story-template": "live-blog",
@@ -1823,13 +1970,25 @@ export const dummyLiveBlogStory = {
       bio: "Biooo ?",
       id: 425675,
       "avatar-s3-key": null,
-      "twitter-handle": "h_bindiya",
+      "twitter-handle": "h_bindiya"
     },
+    {
+      slug: "bindiya-h",
+      social: { twitter: { handle: "h_bindiya" } },
+      name: "Raman V",
+      "contributor-role": { id: 873, name: "Guest Author" },
+      "avatar-url":
+        "https://lh6.googleusercontent.com/-T9_sTsD4Qco/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rc0KarItXiZkh68r6sgS4QwAApcbg/photo.jpg",
+      bio: "Biooo ?",
+      id: 425676,
+      "avatar-s3-key": null,
+      "twitter-handle": "h_bindiya"
+    }
   ],
   metadata: { "is-closed": false, "card-share": { shareable: false } },
   "hero-image-url": "https://thumbor-stg.assettype.com/ace/2019-03/f25cc9c1-917c-4a19-9c9a-fa498f84f17b/test.jpg",
   "publish-at": null,
-  "assignee-name": "Bindiya H",
+  "assignee-name": "Bindiya H"
 };
 
 export const dummyListicleStory = {
@@ -1848,14 +2007,14 @@ export const dummyListicleStory = {
       "meta-description": null,
       "meta-title": null,
       slug: "workplace",
-      "tag-type": "Tag",
-    },
+      "tag-type": "Tag"
+    }
   ],
   customSlotAfterStory: {
     config: { targetingId: "" },
     layout: "Leaderboard",
     layoutLabel: "Leaderboard",
-    type: "ad",
+    type: "ad"
   },
   headline: "It pays to be kind: improving workplace culture through kindness",
   "storyline-id": null,
@@ -1875,11 +2034,11 @@ export const dummyListicleStory = {
       "parent-id": 38586,
       "display-name": "Health",
       collection: { slug: "health", name: "Health", id: 15603 },
-      data: null,
-    },
+      data: null
+    }
   ],
   "story-audio": {
-    "s3-key": "ace/story-audio/2020-10/307e5a1b-5cf0-4321-8193-827b2add174f/.0e6d9a89-3bb7-47b0-8bee-a34b5f75f5e9.mp3",
+    "s3-key": "ace/story-audio/2020-10/307e5a1b-5cf0-4321-8193-827b2add174f/.0e6d9a89-3bb7-47b0-8bee-a34b5f75f5e9.mp3"
   },
   "read-time": 2,
   "access-level-value": null,
@@ -1893,7 +2052,7 @@ export const dummyListicleStory = {
     height: 900,
     "mime-type": "image/jpeg",
     "file-size": 228062,
-    "file-name": "seo.jpg",
+    "file-name": "seo.jpg"
   },
   comments: null,
   "word-count": 232,
@@ -1928,7 +2087,7 @@ export const dummyListicleStory = {
           id: "5ffad09b-7db1-489a-8308-f7d63c745c70",
           metadata: {},
           subtype: null,
-          text: "Nemo enim ipsam voluptatem quia volup tas sit aspernatur aut odit aut fugit",
+          text: "Nemo enim ipsam voluptatem quia volup tas sit aspernatur aut odit aut fugit"
         },
         {
           description: "",
@@ -1939,8 +2098,9 @@ export const dummyListicleStory = {
           id: "f24c83a4-dd3d-47fe-8d05-90f6ada10632",
           metadata: {},
           subtype: null,
-          text: "<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est</p>",
-        },
+          text:
+            "<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est</p>"
+        }
       ],
       "card-updated-at": 1602234185925,
       "content-version-id": "9378abd6-2cec-4bdd-88b2-005cc6d1775f",
@@ -1964,12 +2124,12 @@ export const dummyListicleStory = {
               height: 900,
               "mime-type": "image/jpeg",
               "file-size": 228062,
-              "file-name": "seo.jpg",
-            },
-          },
+              "file-name": "seo.jpg"
+            }
+          }
         },
-        attributes: {},
-      },
+        attributes: {}
+      }
     },
     {
       "story-elements": [
@@ -1982,7 +2142,7 @@ export const dummyListicleStory = {
           id: "82244bcd-c453-41c4-a215-bb038f569375",
           metadata: {},
           subtype: null,
-          text: "Nemo enim ipsam voluptatem quia volup tas sit aspernatur aut odit aut fugit",
+          text: "Nemo enim ipsam voluptatem quia volup tas sit aspernatur aut odit aut fugit"
         },
         {
           description: "",
@@ -1993,8 +2153,9 @@ export const dummyListicleStory = {
           id: "ae7131f6-450a-4589-9995-812ba5832c58",
           metadata: {},
           subtype: null,
-          text: "<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est</p>",
-        },
+          text:
+            "<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est</p>"
+        }
       ],
       "card-updated-at": 1602155725655,
       "content-version-id": "43ff8777-4176-4294-95a3-5aaee8e34537",
@@ -2018,12 +2179,12 @@ export const dummyListicleStory = {
               height: 900,
               "mime-type": "image/jpeg",
               "file-size": 228062,
-              "file-name": "seo.jpg",
-            },
-          },
+              "file-name": "seo.jpg"
+            }
+          }
         },
-        attributes: {},
-      },
+        attributes: {}
+      }
     },
     {
       "story-elements": [
@@ -2036,7 +2197,7 @@ export const dummyListicleStory = {
           id: "d3cbfcce-a503-499d-80cd-52fce2215ef3",
           metadata: {},
           subtype: null,
-          text: "Nemo enim ipsam voluptatem quia volup tas sit aspernatur aut odit aut fugit",
+          text: "Nemo enim ipsam voluptatem quia volup tas sit aspernatur aut odit aut fugit"
         },
         {
           description: "",
@@ -2045,7 +2206,7 @@ export const dummyListicleStory = {
             height: 540,
             "mime-type": "image/jpeg",
             "file-size": 26544,
-            "file-name": "quintype-website_2020-01_2f2ba42d-7a45-4a60-b4af-7d4758f27f5d_Untitled_presentation.jpg",
+            "file-name": "quintype-website_2020-01_2f2ba42d-7a45-4a60-b4af-7d4758f27f5d_Untitled_presentation.jpg"
           },
           "page-url": "/story/307e5a1b-5cf0-4321-8193-827b2add174f/element/a7f79ffa-4be0-4207-a495-a035a020cac3",
           type: "image",
@@ -2057,7 +2218,7 @@ export const dummyListicleStory = {
             "ace/2020-10/920f35b9-023e-44d2-b4de-69dce8587bf7/quintype_website_2020_01_2f2ba42d_7a45_4a60_b4af_7d4758f27f5d_Untitled_presentation.jpg",
           metadata: {},
           subtype: null,
-          hyperlink: "https://www.google.com/",
+          hyperlink: "https://www.google.com/"
         },
         {
           description: "",
@@ -2068,8 +2229,9 @@ export const dummyListicleStory = {
           id: "2a248f86-3181-4456-9f96-f7e56668fbc1",
           metadata: {},
           subtype: null,
-          text: "<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est</p>",
-        },
+          text:
+            "<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est</p>"
+        }
       ],
       "card-updated-at": 1602156067786,
       "content-version-id": "dbfeb570-f9aa-4875-9c3d-f48bf551dd91",
@@ -2084,7 +2246,8 @@ export const dummyListicleStory = {
           title: "It pays to be kind: improving workplace culture through kindness",
           message: null,
           image: {
-            key: "ace/2020-10/920f35b9-023e-44d2-b4de-69dce8587bf7/quintype_website_2020_01_2f2ba42d_7a45_4a60_b4af_7d4758f27f5d_Untitled_presentation.jpg",
+            key:
+              "ace/2020-10/920f35b9-023e-44d2-b4de-69dce8587bf7/quintype_website_2020_01_2f2ba42d_7a45_4a60_b4af_7d4758f27f5d_Untitled_presentation.jpg",
             url: null,
             attribution: "Jon Doe",
             caption: null,
@@ -2093,12 +2256,12 @@ export const dummyListicleStory = {
               height: 540,
               "mime-type": "image/jpeg",
               "file-size": 26544,
-              "file-name": "quintype-website_2020-01_2f2ba42d-7a45-4a60-b4af-7d4758f27f5d_Untitled_presentation.jpg",
-            },
-          },
+              "file-name": "quintype-website_2020-01_2f2ba42d-7a45-4a60-b4af-7d4758f27f5d_Untitled_presentation.jpg"
+            }
+          }
         },
-        attributes: {},
-      },
+        attributes: {}
+      }
     },
     {
       "story-elements": [
@@ -2111,7 +2274,8 @@ export const dummyListicleStory = {
           id: "20db973e-4612-4933-9acd-5a6d4c3d281d",
           metadata: {},
           subtype: null,
-          text: "<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est</p>",
+          text:
+            "<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est</p>"
         },
         {
           id: "00000000-0000-0000-0000-000000000000",
@@ -2120,8 +2284,8 @@ export const dummyListicleStory = {
           subtype: null,
           type: "text",
           text: ' <p>text <a href="https://ace-web.qtstage.io/">promotional</a> message</p>',
-          metadata: { "promotional-message": true },
-        },
+          metadata: { "promotional-message": true }
+        }
       ],
       "card-updated-at": 1602156067786,
       "content-version-id": "dc523cfa-dcf2-41b5-ab7a-b5c3577e11f7",
@@ -2145,13 +2309,13 @@ export const dummyListicleStory = {
               height: 900,
               "mime-type": "image/jpeg",
               "file-size": 228062,
-              "file-name": "seo.jpg",
-            },
-          },
+              "file-name": "seo.jpg"
+            }
+          }
         },
-        attributes: {},
-      },
-    },
+        attributes: {}
+      }
+    }
   ],
   url: "https://ace-web.qtstage.io/health/2020/10/08/it-pays-to-be-kind-improving-workplace-culture-through-kindness",
   "story-version-id": "8768d161-6433-4f1e-b8ef-e632d180ede9",
@@ -2162,7 +2326,7 @@ export const dummyListicleStory = {
   "linked-story-ids": [],
   "promotional-message": ' <p>text <a href="https://ace-web.qtstage.io/">promotional</a> message</p>',
   "asana-project-id": null,
-  "first-published-at": 1602155728566,
+  "first-published-at": 1671083514919,
   "hero-image-caption": "Saque ipsa quae ab illo inventore veritatis et quip",
   version: 18,
   "story-template": "listicle",
@@ -2172,17 +2336,18 @@ export const dummyListicleStory = {
     {
       slug: "pravin-atigre",
       social: null,
-      name: "Pravin Atigre",
+      name: "Virat Kohli",
       "contributor-role": { id: 873, name: "Author" },
       "avatar-url":
         "https://lh3.googleusercontent.com/-I9kNTMFkn3E/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rdZeM4LMMdylmULvtrAvmeVF9DmAQ/photo.jpg",
-      bio: null,
+      bio:
+        "Virat Kohli (Hindi pronunciation: [ʋɪˈɾɑːʈ ˈkoːɦli] (listen); born 5 November 1988) is an Indian international cricketer and the former captain of the Indian national cricket team who plays as a right-handed batsman for Royal Challengers Bangalore in the IPL and for Delhi in Indian domestic cricket. Widely regarded as one of the greatest batsmen of all time,[4] Kohli holds the records for scoring most runs in T20 internationals and in the IPL. In 2020, the International Cricket Council named him the male cricketer of the decade. Kohli has also contributed to a number of India's successes, including winning the 2011 World Cup and the 2013 Champions trophy.",
       id: 927927,
       "avatar-s3-key": null,
-      "twitter-handle": null,
-    },
+      "twitter-handle": null
+    }
   ],
   metadata: { "card-share": { shareable: false } },
   "publish-at": null,
-  "assignee-name": "Pravin Atigre",
+  "assignee-name": "Pravin Atigre"
 };
diff --git a/app/isomorphic/arrow/components/Fixture/index.js b/app/isomorphic/arrow/components/Fixture/index.js
index 27305cbd7..33c00e99b 100644
--- a/app/isomorphic/arrow/components/Fixture/index.js
+++ b/app/isomorphic/arrow/components/Fixture/index.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
 import configJSON from "./config.json";
 import { dummyStory, dummyPhotoStory, dummyLiveBlogStory, dummyListicleStory } from "./dummyStory";
-import get from "lodash/get";
+import get from "lodash.get";
 import { createStore } from "redux";
 
 export const generateConfig = () => configJSON;
@@ -20,12 +20,12 @@ export const generateStory = (storyType, data = {}) => {
 };
 
 export const generateCollection = ({ stories = 0, subCollections = [], itemMeta = {} } = {}) => {
-  const items = subCollections;
+  let items = subCollections;
   Array(stories)
     .fill({ type: "story", ...itemMeta })
     .forEach((item, index) => {
       const story = generateStory();
-      const itm = Object.assign({}, item, { id: story.id, story });
+      let itm = Object.assign({}, item, { id: story.id, story });
       items.push(itm);
     });
   return {
@@ -44,21 +44,21 @@ export const generateCollection = ({ stories = 0, subCollections = [], itemMeta
           height: 1200,
           "mime-type": "image/jpeg",
           "file-size": 179037,
-          "file-name": "fortune.jpg",
+          "file-name": "fortune.jpg"
         },
         "cover-image-s3-key": "ace/2020-08/f71dd527-cbc6-4cc9-94c2-8feee917f7e9/fortune.jpg",
-        caption: "Some Politician",
+        caption: "Some Politician"
       },
-      section: [{ id: 11181, name: "Health", "parent-id": null, "tree-ids": [11181] }],
+      section: [{ id: 11181, name: "Health", "parent-id": null, "tree-ids": [11181] }]
     },
     summary:
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam felis sed tellus mattis ultricies. Maecenas accumsan hendrerit turpis, a sollicitudin velit viverra nec. Praesent pretium, orci ac sodales volutpat, tellus orci rutrum metus.",
-    items: items,
+    items: items
   };
 };
 
 export const generateCollections = (count = 0) => {
-  const collections = [];
+  let collections = [];
   Array(count)
     .fill(0)
     .forEach(() => {
@@ -79,23 +79,23 @@ export const generateCollections = (count = 0) => {
           width: 600,
           height: 600,
           "mime-type": "image/jpeg",
-          "focus-point": [355, 204],
+          "focus-point": [355, 204]
         },
         "cover-image-s3-key": "vikatan/2019-01/f0b702ac-bfd1-4dd6-8e33-52cbb0bb3153/143203_thumb.jpg",
-        caption: "Some Politician",
+        caption: "Some Politician"
       },
-      section: [{ id: 11181, name: "Health", "parent-id": null, "tree-ids": [11181] }],
+      section: [{ id: 11181, name: "Health", "parent-id": null, "tree-ids": [11181] }]
     },
     summary: "This is a collection concerned with politics",
-    items: collections,
+    items: collections
   };
 };
 
 export const generateCollectionsWithStories = (count = 0) => {
-  const items = generateCollection({ stories: 12 });
-  const collec = generateCollections(2);
-  const collections = [];
-  const merged = items.items.concat(collec.items);
+  let items = generateCollection({ stories: 12 });
+  let collec = generateCollections(2);
+  let collections = [];
+  let merged = items.items.concat(collec.items);
 
   Array(count)
     .fill(0)
@@ -117,15 +117,15 @@ export const generateCollectionsWithStories = (count = 0) => {
           width: 600,
           height: 600,
           "mime-type": "image/jpeg",
-          "focus-point": [355, 204],
+          "focus-point": [355, 204]
         },
         "cover-image-s3-key": "vikatan/2019-01/f0b702ac-bfd1-4dd6-8e33-52cbb0bb3153/143203_thumb.jpg",
-        caption: "Some Politician",
+        caption: "Some Politician"
       },
-      section: [{ id: 11181, name: "Health", "parent-id": null, "tree-ids": [11181] }],
+      section: [{ id: 11181, name: "Health", "parent-id": null, "tree-ids": [11181] }]
     },
     summary: "This is a collection concerned with politics",
-    items: merged,
+    items: merged
   };
 };
 
@@ -145,7 +145,7 @@ export const generateSubMenu = () => {
         url: "https://vikatan-web.qtstage.io/section/gurupeyarchi",
         "section-name": "அமெரிக்காவில்",
         data: {
-          color: "#c7c7c7",
+          color: "#c7c7c7"
         },
         items: [
           {
@@ -161,8 +161,8 @@ export const generateSubMenu = () => {
             url: "https://vikatan-web.qtstage.io/section/cinema",
             "section-name": "அமெரிக்காவில்",
             data: {
-              color: "#f7f7f7",
-            },
+              color: "#f7f7f7"
+            }
           },
           {
             "tag-name": null,
@@ -177,12 +177,12 @@ export const generateSubMenu = () => {
             url: "https://vikatan-web.qtstage.io/section/dry6feb2019",
             "section-name": "அமெரிக்காவில்",
             data: {
-              color: "#000000",
-            },
-          },
-        ],
-      },
-    ],
+              color: "#000000"
+            }
+          }
+        ]
+      }
+    ]
   };
 };
 export const authorData = {
@@ -191,42 +191,43 @@ export const authorData = {
   social: {
     twitter: {
       url: "https://twitter.com/Reena00659364",
-      handle: "Twitter",
+      handle: "Twitter"
     },
     youtube: {
       url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
-      handle: "Youtube",
+      handle: "Youtube"
     },
     facebook: {
       url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
-      handle: "Facebook",
+      handle: "Facebook"
     },
     linkedin: {
       url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
-      handle: "LinkedIn",
+      handle: "LinkedIn"
     },
     whatsapp: {
       url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
-      handle: "Whatsapp",
+      handle: "Whatsapp"
     },
     instagram: {
       url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
-      handle: "Instagram",
+      handle: "Instagram"
     },
     pinterest: {
       url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
-      handle: "Pinterest",
-    },
+      handle: "Pinterest"
+    }
   },
-  bio: "Lucy Douglas is a freelance journalist based in London. She has a particular interest in small business, startups and the founders behind them and, in a previous life, was an assistant-editor at Professional Beauty magazine, where she road-tested spas up and down the country and checked out the latest advances.",
+  bio:
+    "Lucy Douglas is a freelance journalist based in London. She has a particular interest in small business, startups and the founders behind them and, in a previous life, was an assistant-editor at Professional Beauty magazine, where she road-tested spas up and down the country and checked out the latest advances.",
   id: 94985,
   "avatar-url": "https://thumbor-stg.assettype.com/ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
   "avatar-s3-key": "ace/2019-08/145ab200-429f-44ac-8618-00c6e4643e31/cat.jpeg",
   "twitter-handle": "quintype_inc",
   stats: {
-    contributions: null,
+    contributions: null
   },
-  metadata: {},
+  metadata: {}
 };
 
 export const generateStoryElementData = (elementType) => {
@@ -248,22 +249,23 @@ export const generateMagazineIssues = () => {
         metadata: {
           "cover-image": {
             success: true,
-            url: "https://stg-quintype-dropbox.s3-accelerate.amazonaws.com/ace.staging.quintype.com/2020-09-09/874/aleksandra_tanasienko_oQi_UdQDkzw_unsplash.jpg",
+            url:
+              "https://stg-quintype-dropbox.s3-accelerate.amazonaws.com/ace.staging.quintype.com/2020-09-09/874/aleksandra_tanasienko_oQi_UdQDkzw_unsplash.jpg",
             metadata: {
               width: 4000,
               height: 6000,
               "mime-type": "image/jpeg",
               "file-size": 2574353,
-              "file-name": "aleksandra-tanasienko-oQi_UdQDkzw-unsplash.jpg",
+              "file-name": "aleksandra-tanasienko-oQi_UdQDkzw-unsplash.jpg"
             },
             "extracted-data": {
-              artist: "",
+              artist: ""
             },
             attribution: "",
             "cover-image-url":
               "https://thumbor-stg.assettype.com/ace/2020-09/f20cecc2-2466-4e3d-8b04-f013d880a9d0/aleksandra_tanasienko_oQi_UdQDkzw_unsplash.jpg",
             "cover-image-s3-key":
-              "ace/2020-09/f20cecc2-2466-4e3d-8b04-f013d880a9d0/aleksandra_tanasienko_oQi_UdQDkzw_unsplash.jpg",
+              "ace/2020-09/f20cecc2-2466-4e3d-8b04-f013d880a9d0/aleksandra_tanasienko_oQi_UdQDkzw_unsplash.jpg"
           },
           entities: {
             collectionEntities: {
@@ -272,18 +274,18 @@ export const generateMagazineIssues = () => {
                   id: 199563,
                   name: "New Magazine",
                   type: "magazine",
-                  "entity-type-id": 382,
-                },
-              ],
-            },
-          },
+                  "entity-type-id": 382
+                }
+              ]
+            }
+          }
         },
         "collection-date": null,
         slug: "manifique",
         template: "collection",
         "data-source": "manual",
-        "created-at": 1599639879798,
-      },
+        "created-at": 1599639879798
+      }
     },
     {
       collection: {
@@ -292,22 +294,23 @@ export const generateMagazineIssues = () => {
         metadata: {
           "cover-image": {
             success: true,
-            url: "https://stg-quintype-dropbox.s3-accelerate.amazonaws.com/ace.staging.quintype.com/2020-09-28/294/da90b29ce035b5a3a134da39e94d654c.jpg",
+            url:
+              "https://stg-quintype-dropbox.s3-accelerate.amazonaws.com/ace.staging.quintype.com/2020-09-28/294/da90b29ce035b5a3a134da39e94d654c.jpg",
             metadata: {
               width: 474,
               height: 581,
               "mime-type": "image/jpeg",
               "file-size": 49921,
-              "file-name": "da90b29ce035b5a3a134da39e94d654c.jpg",
+              "file-name": "da90b29ce035b5a3a134da39e94d654c.jpg"
             },
             "extracted-data": {
-              artist: "",
+              artist: ""
             },
             attribution: "",
             "cover-image-url":
               "https://thumbor-stg.assettype.com/ace/2020-09/92f5453c-4477-40d3-9a44-3cf0c245b268/da90b29ce035b5a3a134da39e94d654c.jpg",
             "cover-image-s3-key":
-              "ace/2020-09/92f5453c-4477-40d3-9a44-3cf0c245b268/da90b29ce035b5a3a134da39e94d654c.jpg",
+              "ace/2020-09/92f5453c-4477-40d3-9a44-3cf0c245b268/da90b29ce035b5a3a134da39e94d654c.jpg"
           },
           entities: {
             collectionEntities: {
@@ -316,18 +319,18 @@ export const generateMagazineIssues = () => {
                   id: 199563,
                   name: "New Magazine",
                   type: "magazine",
-                  "entity-type-id": 382,
-                },
-              ],
-            },
-          },
+                  "entity-type-id": 382
+                }
+              ]
+            }
+          }
         },
         "collection-date": null,
         slug: "high-times",
         template: "collection",
         "data-source": "manual",
-        "created-at": 1599639711992,
-      },
+        "created-at": 1599639711992
+      }
     },
     {
       collection: {
@@ -336,23 +339,24 @@ export const generateMagazineIssues = () => {
         metadata: {
           "cover-image": {
             success: true,
-            url: "https://stg-quintype-dropbox.s3-accelerate.amazonaws.com/ace.staging.quintype.com/2020-09-09/1200/alexis_zacharko_07rXq3YroVM_unsplash.jpg",
+            url:
+              "https://stg-quintype-dropbox.s3-accelerate.amazonaws.com/ace.staging.quintype.com/2020-09-09/1200/alexis_zacharko_07rXq3YroVM_unsplash.jpg",
             metadata: {
               width: 3456,
               height: 5184,
               "mime-type": "image/jpeg",
               "file-size": 3084612,
               "file-name": "alexis-zacharko-07rXq3YroVM-unsplash.jpg",
-              "focus-point": [2154, 2269],
+              "focus-point": [2154, 2269]
             },
             "extracted-data": {
-              artist: "",
+              artist: ""
             },
             attribution: "",
             "cover-image-url":
               "https://thumbor-stg.assettype.com/ace/2020-09/ed79b1ed-5d63-4ec1-8a4b-da87d8ed7edc/alexis_zacharko_07rXq3YroVM_unsplash.jpg",
             "cover-image-s3-key":
-              "ace/2020-09/ed79b1ed-5d63-4ec1-8a4b-da87d8ed7edc/alexis_zacharko_07rXq3YroVM_unsplash.jpg",
+              "ace/2020-09/ed79b1ed-5d63-4ec1-8a4b-da87d8ed7edc/alexis_zacharko_07rXq3YroVM_unsplash.jpg"
           },
           entities: {
             collectionEntities: {
@@ -361,18 +365,18 @@ export const generateMagazineIssues = () => {
                   id: 199563,
                   name: "New Magazine",
                   type: "magazine",
-                  "entity-type-id": 382,
-                },
-              ],
-            },
-          },
+                  "entity-type-id": 382
+                }
+              ]
+            }
+          }
         },
         "collection-date": null,
         slug: "new-magazine-issue",
         template: "collection",
         "data-source": "manual",
-        "created-at": 1599616208142,
-      },
+        "created-at": 1599616208142
+      }
     },
     {
       collection: {
@@ -387,11 +391,11 @@ export const generateMagazineIssues = () => {
               width: 6000,
               "file-size": 10319729,
               "file-name": "evil caat.jpg",
-              height: 4000,
+              height: 4000
             },
             caption: null,
             "cover-image-url":
-              "https://thumbor-stg.assettype.com/ace/2020-07/3e3dc7df-8a1c-462d-a236-265d45c28651/evil_caat.jpg",
+              "https://thumbor-stg.assettype.com/ace/2020-07/3e3dc7df-8a1c-462d-a236-265d45c28651/evil_caat.jpg"
           },
           entities: {
             collectionEntities: {
@@ -400,21 +404,22 @@ export const generateMagazineIssues = () => {
                   id: 199563,
                   name: "New Magazine",
                   type: "magazine",
-                  "entity-type-id": 382,
-                },
-              ],
-            },
-          },
+                  "entity-type-id": 382
+                }
+              ]
+            }
+          }
         },
         "collection-date": null,
         slug: "first-magazine-collection",
         template: "collection",
         "data-source": "automated",
-        "created-at": 1599571645414,
-      },
-    },
+        "created-at": 1599571645414
+      }
+    }
   ];
 };
 
 const reducer = () => ({ qt: { config: { "cdn-image": "thumbor-stg.assettype.com" } } });
+
 export const generateStore = createStore(reducer);
diff --git a/app/isomorphic/arrow/components/Fixture/slot-config.js b/app/isomorphic/arrow/components/Fixture/slot-config.js
index 36c973fb2..15601ff9c 100644
--- a/app/isomorphic/arrow/components/Fixture/slot-config.js
+++ b/app/isomorphic/arrow/components/Fixture/slot-config.js
@@ -8,13 +8,13 @@ export const slotData = [
     pageType: "story",
     widgetCode: "V2lkZ2V0JTIwMQ==",
     config: {
-      customCode: "V2lkZ2V0JTIwMQ==",
-    },
+      customCode: "V2lkZ2V0JTIwMQ=="
+    }
   },
   {
     type: "collection",
     collectionSlug: "",
-    title: "",
+    title: ""
   },
   {
     type: "widget",
@@ -23,7 +23,7 @@ export const slotData = [
     pageType: "story",
     widgetCode: "V2lkZ2V0JTIwMg==",
     config: {
-      customCode: "V2lkZ2V0JTIwMg==",
-    },
-  },
+      customCode: "V2lkZ2V0JTIwMg=="
+    }
+  }
 ];
diff --git a/app/isomorphic/arrow/components/Molecules/FullScreenImages/index.js b/app/isomorphic/arrow/components/Molecules/FullScreenImages/index.js
index 1a7b0c516..623da6f29 100644
--- a/app/isomorphic/arrow/components/Molecules/FullScreenImages/index.js
+++ b/app/isomorphic/arrow/components/Molecules/FullScreenImages/index.js
@@ -1,6 +1,6 @@
 import React, { useState, Suspense, lazy } from "react";
 import { useSelector } from "react-redux";
-import get from "lodash/get";
+import get from "lodash.get";
 import PropTypes from "prop-types";
 import "./fullscreenimages.scss";
 import { Loading } from "../../Svgs/Loading/loading";
@@ -10,8 +10,8 @@ const Lightbox = lazy(() => import("react-image-lightbox"));
 
 export const FullScreenImages = ({ imageSlug = "", template, element = {}, props }) => {
   const cdnImage = useSelector((state) => get(state, ["qt", "config", "cdn-image"]));
-  const [photoIndex, handleImage] = useState(0);
-  const [isOpen, handleOpen] = useState(false);
+  let [photoIndex, handleImage] = useState(0);
+  let [isOpen, handleOpen] = useState(false);
   const deviceWidth = get(global, ["innerWidth"], 0);
 
   const hyperlinks = get(element, ["story-elements"], []).map((image) => image.hyperlink);
@@ -55,7 +55,7 @@ export const FullScreenImages = ({ imageSlug = "", template, element = {}, props
   const lightboxProps = imageSlug
     ? {
         mainSrc: `//${cdnImage}/${imageSlug}?w=${deviceWidth}`,
-        toolbarButtons: [getHyperLink()],
+        toolbarButtons: [getHyperLink()]
       }
     : {
         mainSrc: imageUrlList[photoIndex],
@@ -63,7 +63,7 @@ export const FullScreenImages = ({ imageSlug = "", template, element = {}, props
         prevSrc: imageUrlList[(photoIndex + imageUrlListLength - 1) % imageUrlListLength],
         onMoveNextRequest: () => onMoveNext(imageUrlListLength),
         onMovePrevRequest: () => onMovePrev(imageUrlListLength),
-        toolbarButtons: [getHyperLink()],
+        toolbarButtons: [getHyperLink()]
       };
 
   const LoadingScreen = () => {
@@ -78,7 +78,7 @@ export const FullScreenImages = ({ imageSlug = "", template, element = {}, props
     <div>
       {React.createElement(template, {
         [onClickKey]: onClickHandler,
-        ...props,
+        ...props
       })}
       {isOpen ? (
         <Suspense fallback={<LoadingScreen />}>
@@ -92,7 +92,7 @@ FullScreenImages.propTypes = {
   imageSlug: PropTypes.string,
   template: PropTypes.func,
   element: PropTypes.shape({
-    "story-elements": PropTypes.array,
+    "story-elements": PropTypes.array
   }),
-  props: PropTypes.object,
+  props: PropTypes.object
 };
diff --git a/app/isomorphic/arrow/components/Molecules/KeyEvents/index.js b/app/isomorphic/arrow/components/Molecules/KeyEvents/index.js
index 6184e5c80..2fec0f36d 100644
--- a/app/isomorphic/arrow/components/Molecules/KeyEvents/index.js
+++ b/app/isomorphic/arrow/components/Molecules/KeyEvents/index.js
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import get from "lodash/get";
+import get from "lodash.get";
 import PropTypes from "prop-types";
 import { ClockIcon } from "../../Svgs/clock-icon";
 import { getTextColor, getTimeStamp, timestampToFormat } from "../../../utils/utils";
@@ -32,7 +32,7 @@ const KeyEventCards = (props) => {
             <div
               styleName="fade-out"
               style={{
-                backgroundImage: `linear-gradient(to bottom, transparent, ${theme})`,
+                backgroundImage: `linear-gradient(to bottom, transparent, ${theme})` || "none"
               }}
             />
           )}
@@ -46,7 +46,7 @@ KeyEventCards.propTypes = {
   card: PropTypes.shape({
     "card-added-at": PropTypes.number,
     "story-elements": PropTypes.array,
-    id: PropTypes.string,
+    id: PropTypes.string
   }),
   config: PropTypes.object,
   slug: PropTypes.string,
@@ -55,7 +55,7 @@ KeyEventCards.propTypes = {
   index: PropTypes.number,
   cardLength: PropTypes.number,
   loadCards: PropTypes.bool,
-  showLoadMore: PropTypes.bool,
+  showLoadMore: PropTypes.bool
 };
 
 const KeyEvents = ({ story = {}, config = {}, showLoadMore = true, publishedDetails = {} }) => {
@@ -92,7 +92,7 @@ const KeyEvents = ({ story = {}, config = {}, showLoadMore = true, publishedDeta
   ));
 
   return (
-    <div className="arrow-component" style={{ background: theme }} styleName={`container ${textColor}`}>
+    <div className="arrow-component" style={{ background: theme || "initial" }} styleName={`container ${textColor}`}>
       <h3>{keyEventsTitle}</h3>
       <div styleName="cards-wrapper">{keyEvents}</div>
       {showLoadMore && lastElement && (
@@ -106,7 +106,7 @@ KeyEvents.propTypes = {
   story: PropTypes.object,
   config: PropTypes.object,
   showLoadMore: PropTypes.bool,
-  publishedDetails: PropTypes.object,
+  publishedDetails: PropTypes.object
 };
 
 export default StateProvider(KeyEvents);
diff --git a/app/isomorphic/arrow/components/Molecules/KeyEvents/stories.js b/app/isomorphic/arrow/components/Molecules/KeyEvents/stories.js
index b147e84dc..589e53aa3 100644
--- a/app/isomorphic/arrow/components/Molecules/KeyEvents/stories.js
+++ b/app/isomorphic/arrow/components/Molecules/KeyEvents/stories.js
@@ -13,16 +13,16 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 ).add("Key Events", () => {
   const config = {
     theme: color("Color", "#ffffff"),
     initialLoadCount: text("Initial Load Count", 4),
-    buttonText: text("Button text", "Load More"),
+    buttonText: text("Button text", "Load More")
   };
   return <KeyEvents story={story} config={config} />;
 });
diff --git a/app/isomorphic/arrow/components/Molecules/PageIntroductionCard/index.js b/app/isomorphic/arrow/components/Molecules/PageIntroductionCard/index.js
index 4c7723054..fb8c46755 100644
--- a/app/isomorphic/arrow/components/Molecules/PageIntroductionCard/index.js
+++ b/app/isomorphic/arrow/components/Molecules/PageIntroductionCard/index.js
@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import upperCase from "lodash/upperCase";
 import { useDispatch, useSelector } from "react-redux";
-import get from "lodash/get";
+import get from "lodash.get";
 import { getTextColor, navigateTo, generateNavigateSlug } from "../../../utils/utils";
 import "./page-intro-card.m.css";
 import { LoadmoreButton } from "../../Atoms/Loadmore";
@@ -14,7 +14,7 @@ export const PageIntroductionCard = ({ config = {} }) => {
     theme = "#131922",
     showButton = false,
     enableBorder = false,
-    customUrlPath,
+    customUrlPath
   } = config;
   const textColor = getTextColor(theme);
   const borderBottom = enableBorder ? "borderBottom" : "";
@@ -26,8 +26,7 @@ export const PageIntroductionCard = ({ config = {} }) => {
     <div
       styleName="author-page-wrapper"
       className="arrow-component full-width-with-padding"
-      style={{ background: theme }}
-    >
+      style={{ background: theme || "initial" }}>
       <h2 styleName={`pageTitle ${textColor} ${borderBottom}`} data-test-id="page-title">
         {upperCase(pageTitle)}
       </h2>
@@ -47,5 +46,5 @@ export const PageIntroductionCard = ({ config = {} }) => {
 };
 
 PageIntroductionCard.propTypes = {
-  config: PropTypes.shape({ theme: PropTypes.string, pageTitle: PropTypes.string, pageDescription: PropTypes.string }),
+  config: PropTypes.shape({ theme: PropTypes.string, pageTitle: PropTypes.string, pageDescription: PropTypes.string })
 };
diff --git a/app/isomorphic/arrow/components/Molecules/PageIntroductionCard/page-intro-card.m.css b/app/isomorphic/arrow/components/Molecules/PageIntroductionCard/page-intro-card.m.css
index 08aa5015d..293a75393 100644
--- a/app/isomorphic/arrow/components/Molecules/PageIntroductionCard/page-intro-card.m.css
+++ b/app/isomorphic/arrow/components/Molecules/PageIntroductionCard/page-intro-card.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 @value tablet from viewports;
 
diff --git a/app/isomorphic/arrow/components/Molecules/PageIntroductionCard/stories.js b/app/isomorphic/arrow/components/Molecules/PageIntroductionCard/stories.js
index 5505d2af0..8133d3ab8 100644
--- a/app/isomorphic/arrow/components/Molecules/PageIntroductionCard/stories.js
+++ b/app/isomorphic/arrow/components/Molecules/PageIntroductionCard/stories.js
@@ -10,7 +10,7 @@ withStore("Molecules/Page Intro Card", Readme).add("Default", () => {
     pageDescription: "This is the page description",
     theme: color("Color", "#131922"),
     enableBorder: true,
-    showButton: true,
+    showButton: true
   };
   return <PageIntroductionCard config={config} />;
 });
diff --git a/app/isomorphic/arrow/components/Molecules/PortraitStoryCard/index.js b/app/isomorphic/arrow/components/Molecules/PortraitStoryCard/index.js
index a8f03f542..6ad2572af 100644
--- a/app/isomorphic/arrow/components/Molecules/PortraitStoryCard/index.js
+++ b/app/isomorphic/arrow/components/Molecules/PortraitStoryCard/index.js
@@ -17,6 +17,7 @@ const PortraitStoryCard = ({
   separator = "",
   config = {},
   borderColor = "",
+  collectionId
 }) => {
   if (isEmpty(story)) return null;
 
@@ -30,6 +31,7 @@ const PortraitStoryCard = ({
           separator={separator}
           borderColor={borderColor}
           headerLevel={headerLevel}
+          collectionId={collectionId}
         />
       </StoryCard>
     </div>
@@ -44,6 +46,7 @@ PortraitStoryCard.propTypes = {
   borderColor: PropTypes.string,
   config: PropTypes.object,
   story: PropTypes.object,
+  collectionId: PropTypes.number
 };
 
 export default StateProvider(PortraitStoryCard);
diff --git a/app/isomorphic/arrow/components/Molecules/PortraitStoryCard/stories.js b/app/isomorphic/arrow/components/Molecules/PortraitStoryCard/stories.js
index 4bbbe9e9f..d8bef330a 100644
--- a/app/isomorphic/arrow/components/Molecules/PortraitStoryCard/stories.js
+++ b/app/isomorphic/arrow/components/Molecules/PortraitStoryCard/stories.js
@@ -13,9 +13,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 )
diff --git a/app/isomorphic/arrow/components/Molecules/SliderHorizontalCard/index.js b/app/isomorphic/arrow/components/Molecules/SliderHorizontalCard/index.js
index c8cd61dde..abeac1d74 100644
--- a/app/isomorphic/arrow/components/Molecules/SliderHorizontalCard/index.js
+++ b/app/isomorphic/arrow/components/Molecules/SliderHorizontalCard/index.js
@@ -4,7 +4,7 @@ import { Subheadline } from "../../Atoms/Subheadline/index";
 import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
 import { HeroImage } from "../../Atoms/HeroImage/index";
 import { SectionTag } from "../../Atoms/SectionTag/index";
-import { getTextColor, isEmpty } from "../../../utils/utils";
+import { isEmpty } from "../../../utils/utils";
 
 import PropTypes from "prop-types";
 
@@ -16,22 +16,14 @@ export const SliderHorizontalCard = ({
   theme = "",
   headerLevel,
   borderColor = "",
-  config = {},
+  config = {}
 }) => {
   if (!story || isEmpty(story)) return <div />;
   const borderStyle = border === "full" ? "border" : "";
-  const textColor = getTextColor(theme);
   const { localizationConfig = {} } = config;
   return (
-    <div styleName={`horizontal ${borderStyle}`} style={{ backgroundColor: theme, color: textColor }}>
-      <HeroImage
-        config={config}
-        story={story}
-        aspectRatio={[
-          [4, 3],
-          [16, 9],
-        ]}
-      />
+    <div styleName={`horizontal ${borderStyle}`} style={{ backgroundColor: theme || "initial" }}>
+      <HeroImage config={config} story={story} aspectRatio={[[4, 3], [16, 9]]} />
       <div className="arr--content" styleName="content">
         <SectionTag story={story} borderColor={borderColor} />
         <Headline story={story} headerLevel={headerLevel} premiumStoryIconConfig={config} />
@@ -48,5 +40,5 @@ SliderHorizontalCard.propTypes = {
   theme: PropTypes.string,
   headerLevel: PropTypes.string,
   borderColor: PropTypes.string,
-  config: PropTypes.object,
+  config: PropTypes.object
 };
diff --git a/app/isomorphic/arrow/components/Molecules/SliderHorizontalCard/stories.js b/app/isomorphic/arrow/components/Molecules/SliderHorizontalCard/stories.js
index e8374fd30..80b024d3a 100644
--- a/app/isomorphic/arrow/components/Molecules/SliderHorizontalCard/stories.js
+++ b/app/isomorphic/arrow/components/Molecules/SliderHorizontalCard/stories.js
@@ -16,9 +16,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 )
diff --git a/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/index.js b/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/index.js
index 6f0316f25..257f31c12 100644
--- a/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/index.js
+++ b/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/index.js
@@ -6,7 +6,7 @@ import "./social-share-template.m.css";
 import { CloseIcon } from "../../Svgs/close-icon";
 import { ShareIcon } from "../../Svgs/share-icon";
 import { getTextColor } from "../../../utils/utils";
-import camelcase from "lodash/camelCase";
+import camelcase from "lodash.camelcase";
 
 const ShareItem = ({ name, url, icon, dataTestId }) => {
   return url ? (
@@ -21,7 +21,7 @@ ShareItem.propTypes = {
   name: PropTypes.string,
   url: PropTypes.string,
   icon: PropTypes.node,
-  dataTestId: PropTypes.string,
+  dataTestId: PropTypes.string
 };
 
 function getActionIcon(open, color) {
@@ -38,7 +38,7 @@ export const SocialShareTemplate = (props) => {
     vertical = false,
     theme,
     iconType = "plain-color-svg",
-    open = false,
+    open = false
   } = props;
   if (!fbUrl && !twitterUrl && !linkedinUrl && !whatsappUrl) return null;
   const iconShade = getTextColor(theme);
@@ -95,8 +95,7 @@ export const SocialShareTemplate = (props) => {
         <ul
           data-test-id={camelcase(iconType)}
           className="desktop-share-wrapper"
-          styleName={`wrapper ${isOpen ? "open" : ""}`}
-        >
+          styleName={`wrapper ${isOpen ? "open" : ""}`}>
           {shareIcon()}
           {iconsList.map((iconData, index) => (
             <ShareItem {...iconData} key={iconData.name} dataTestId={`card-share-${index}`} />
@@ -116,5 +115,5 @@ SocialShareTemplate.propTypes = {
   vertical: PropTypes.bool,
   theme: PropTypes.string,
   iconType: PropTypes.string,
-  open: PropTypes.boolean,
+  open: PropTypes.boolean
 };
diff --git a/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/social-share-data.js b/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/social-share-data.js
index d269c3c16..2722d53c9 100644
--- a/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/social-share-data.js
+++ b/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/social-share-data.js
@@ -11,7 +11,7 @@ const getSocialIcons = (color, iconType) => {
         facebook: <Facebook key={iconType} />,
         twitter: <Twitter key={iconType} />,
         linkedin: <LinkedIn key={iconType} />,
-        whatsapp: <WhatsApp key={iconType} />,
+        whatsapp: <WhatsApp key={iconType} />
       };
 
     default:
@@ -19,7 +19,7 @@ const getSocialIcons = (color, iconType) => {
         facebook: <Facebook color={color} key={iconType} />,
         twitter: <Twitter color={color} key={iconType} />,
         linkedin: <LinkedIn color={color} key={iconType} />,
-        whatsapp: <WhatsApp color={color} key={iconType} />,
+        whatsapp: <WhatsApp color={color} key={iconType} />
       };
   }
 };
@@ -31,35 +31,35 @@ export const socialShareData = ({ fbUrl, twitterUrl, linkedinUrl, whatsappUrl, i
       {
         name: "facebook",
         url: fbUrl,
-        icon: socialIcons.facebook,
+        icon: socialIcons["facebook"],
         text: "Facebook",
         bgColor: "#4e71a8",
-        alt: "fb icon",
+        alt: "fb icon"
       },
       {
         name: "twitter",
         url: twitterUrl,
-        icon: socialIcons.twitter,
+        icon: socialIcons["twitter"],
         text: "Twitter",
         bgColor: "#1db7eb",
-        alt: "twitter icon",
+        alt: "twitter icon"
       },
       {
         name: "linkedin",
         url: linkedinUrl,
-        icon: socialIcons.linkedin,
+        icon: socialIcons["linkedin"],
         text: "LinkedIn",
         bgColor: "#0077B5",
-        alt: "linkedin icon",
+        alt: "linkedin icon"
       },
       {
         name: "whatsapp",
         url: whatsappUrl,
-        icon: socialIcons.whatsapp,
+        icon: socialIcons["whatsapp"],
         text: "Whatsapp",
         bgColor: "#25d366",
-        alt: "whatsapp share",
-      },
+        alt: "whatsapp share"
+      }
     ];
   };
   return getOptions();
diff --git a/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/social-share-template.m.css b/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/social-share-template.m.css
index 4d4b62bf9..3ef99f0d9 100644
--- a/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/social-share-template.m.css
+++ b/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/social-share-template.m.css
@@ -1,4 +1,4 @@
-@import "../../../../../assets/arrow/stylesheets/mixins.scss";
+@import "../../../../assets/stylesheets/mixins.scss";
 
 .desktop-view {
   display: none;
diff --git a/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/social-share-template.test.js b/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/social-share-template.test.js
index 97356efbe..a0b8dbc2c 100644
--- a/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/social-share-template.test.js
+++ b/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/social-share-template.test.js
@@ -10,7 +10,7 @@ describe("Social Share Template", () => {
       linkedinUrl: "https://twitter.com/",
       whatsappUrl: "https://twitter.com/",
       theme: "#ffff",
-      iconType: "plain-svg",
+      iconType: "plain-svg"
     };
     const wrapper = shallow(<SocialShareTemplate {...data} />);
     expect(wrapper).toMatchSnapshot();
@@ -24,7 +24,7 @@ describe("Social Share Template", () => {
       whatsappUrl: "https://twitter.com/",
       theme: "#ffff",
       iconType: "plain-svg",
-      vertical: true,
+      vertical: true
     };
     const wrapper = shallow(<SocialShareTemplate {...data} />);
     expect(wrapper).toMatchSnapshot();
@@ -38,7 +38,7 @@ describe("Social Share Template", () => {
       whatsappUrl: "",
       theme: "#ffff",
       iconType: "plain-svg",
-      vertical: true,
+      vertical: true
     };
     const wrapper = shallow(<SocialShareTemplate {...data} />);
     expect(wrapper).toMatchSnapshot();
@@ -52,7 +52,7 @@ describe("Social Share Template", () => {
       whatsappUrl: "https://twitter.com/",
       theme: "#ffff",
       iconType: "plain-svg",
-      vertical: true,
+      vertical: true
     };
     const wrapper = shallow(<SocialShareTemplate {...data} />);
     expect(wrapper).toMatchSnapshot();
@@ -66,7 +66,7 @@ describe("Social Share Template", () => {
       whatsappUrl: "https://twitter.com/",
       theme: "#ffff",
       iconType: "plain-svg",
-      vertical: true,
+      vertical: true
     };
     const wrapper = shallow(<SocialShareTemplate {...data} />);
     expect(wrapper).toMatchSnapshot();
@@ -80,7 +80,7 @@ describe("Social Share Template", () => {
       whatsappUrl: "",
       theme: "#ffff",
       iconType: "plain-svg",
-      vertical: true,
+      vertical: true
     };
     const wrapper = shallow(<SocialShareTemplate {...data} />);
     expect(wrapper).toMatchSnapshot();
@@ -94,7 +94,7 @@ describe("Social Share Template", () => {
       whatsappUrl: "https://twitter.com/",
       theme: "#ffff",
       iconType: "plain-svg",
-      vertical: true,
+      vertical: true
     };
     const wrapper = shallow(<SocialShareTemplate {...data} />);
     expect(wrapper).toMatchSnapshot();
@@ -108,7 +108,7 @@ describe("Social Share Template", () => {
       whatsappUrl: "https://twitter.com/",
       theme: "",
       iconType: "plain-svg",
-      vertical: true,
+      vertical: true
     };
     const wrapper = shallow(<SocialShareTemplate {...data} />);
     expect(wrapper).toMatchSnapshot();
diff --git a/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/stories.js b/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/stories.js
index 9d4f3b675..d1ec67631 100644
--- a/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/stories.js
+++ b/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/stories.js
@@ -17,7 +17,7 @@ withStore("Molecules/Social Share Template", {}, Readme)
       publisherUrl: undefined,
       theme: "#ffffff",
       title: "Ready Player One review – Spielberg ",
-      twitterUrl: "https://twitter.com",
+      twitterUrl: "https://twitter.com"
     };
     return <SocialShareTemplate {...props} open={boolean("open", false)} />;
   })
@@ -34,7 +34,7 @@ withStore("Molecules/Social Share Template", {}, Readme)
       theme: "#ffffff",
       title: "Ready Player One review – Spielberg ",
       twitterUrl: "https://twitter.com",
-      vertical: true,
+      vertical: true
     };
     return <SocialShareTemplate {...props} open={boolean("open", false)} />;
   });
diff --git a/app/isomorphic/arrow/components/Molecules/StoryCard/index.js b/app/isomorphic/arrow/components/Molecules/StoryCard/index.js
index d539ed78c..226b2dbc9 100644
--- a/app/isomorphic/arrow/components/Molecules/StoryCard/index.js
+++ b/app/isomorphic/arrow/components/Molecules/StoryCard/index.js
@@ -28,6 +28,7 @@ const StoryCardBase = ({
   prefix,
   config,
   isHorizontalWithImageLast,
+  collectionId
 }) => {
   if (!story || isEmpty(story)) return <div />;
   const borderOptions = ["default", "full", "bottom", "boxShadow"];
@@ -57,15 +58,15 @@ const StoryCardBase = ({
       prefix={prefix}
       config={config}
       isHorizontalWithImageLast={isHorizontalWithImageLast}
+      collectionId={collectionId}
     />
   );
   return (
     <div
       className="arr--story-card"
       data-test-id="story-card"
-      style={{ backgroundColor: theme, color: textColor }}
-      styleName={`card ${horizontalCardStyle} ${borderTemplate} ${textColor} ${bgImageClasses} ${bgImgContentOverlapClass} ${horizontalMobileClasses}`}
-    >
+      style={{ backgroundColor: theme || "initial" }}
+      styleName={`card ${horizontalCardStyle} ${borderTemplate} ${textColor} ${bgImageClasses} ${bgImgContentOverlapClass} ${horizontalMobileClasses}`}>
       {children || defaultStorycard}
     </div>
   );
@@ -84,6 +85,7 @@ const DefaultStoryCard = ({
   prefix,
   isHorizontalWithImageLast,
   config,
+  collectionId
 }) => {
   const alignment = centerAlign ? "center-align" : "";
   const SectionTagborderColor = rgbToHex(borderColor);
@@ -119,6 +121,7 @@ const DefaultStoryCard = ({
           isBottom
           prefix={prefix}
           hideAuthorImage={hideAuthorImage}
+          collectionId={collectionId}
         />
         <Subheadline story={story} />
       </div>
@@ -140,6 +143,7 @@ DefaultStoryCard.propTypes = {
   prefix: PropTypes.string,
   config: PropTypes.object,
   isHorizontalWithImageLast: PropTypes.bool,
+  collectionId: PropTypes.number
 };
 
 StoryCardBase.propTypes = {
@@ -170,6 +174,7 @@ StoryCardBase.propTypes = {
   prefix: PropTypes.string,
   config: PropTypes.object,
   isHorizontalWithImageLast: PropTypes.bool,
+  collectionId: PropTypes.number
 };
 
 StoryCardBase.defaultProps = {
@@ -179,7 +184,7 @@ StoryCardBase.defaultProps = {
   theme: "",
   centerAlign: false,
   borderColor: "",
-  isHorizontalWithImageLast: false,
+  isHorizontalWithImageLast: false
 };
 
 export const StoryCard = StateProvider(StoryCardBase);
diff --git a/app/isomorphic/arrow/components/Molecules/StoryCard/stories.js b/app/isomorphic/arrow/components/Molecules/StoryCard/stories.js
index 910faa68f..9a2dc576d 100644
--- a/app/isomorphic/arrow/components/Molecules/StoryCard/stories.js
+++ b/app/isomorphic/arrow/components/Molecules/StoryCard/stories.js
@@ -25,7 +25,7 @@ const aspectRatioOptions = {
   "[8,3]": [8, 3],
   "[1,1]": [1, 1],
   "[4, 3]": [4, 3],
-  "[2, 3]": [2, 3],
+  "[2, 3]": [2, 3]
 };
 const label = "color";
 const defaultvalue = "#929292";
@@ -38,9 +38,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 )
@@ -135,9 +135,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   ReadmeForBorder
 )
@@ -202,9 +202,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   ReadmeForBgImage
 )
diff --git a/app/isomorphic/arrow/components/Molecules/StoryCard/storycard.m.css b/app/isomorphic/arrow/components/Molecules/StoryCard/storycard.m.css
index f75ac4d98..dae4d4c99 100644
--- a/app/isomorphic/arrow/components/Molecules/StoryCard/storycard.m.css
+++ b/app/isomorphic/arrow/components/Molecules/StoryCard/storycard.m.css
@@ -44,8 +44,8 @@
     width: calc(100% - 32px);
     background-color: var(--arrow-c-light);
     padding: var(--arrow-spacing-m);
-    position: absolute;
-    bottom: 0;
+    position: relative;
+    top: -56px;
   }
 }
 .content-overlap img {
@@ -57,11 +57,11 @@
 
 /* TODO: Refactor targetting of child  */
 .horizontal-card > div:first-child {
-  flex-basis: 30%;
+  flex-basis: 40%;
 }
 
 .horizontal-card > div:nth-child(2) {
-  flex-basis: 70%;
+  flex-basis: 60%;
 }
 
 .border-full.light {
@@ -88,16 +88,12 @@
 .center-align {
   display: flex;
   flex-direction: column;
-  align-items: left;
   @media (--viewport-medium) {
     align-items: center;
     text-align: center;
   }
 }
 
-.content-bottom {
-  /* padding: 0 0 0 8px; */
-}
 .content-full,
 .content-boxShadow {
   padding: var(--arrow-spacing-xs) var(--arrow-spacing-m);
@@ -124,13 +120,13 @@
   }
 }
 .horizontal-mob .hero-image {
-  flex-basis: 30%;
+  flex-basis: 40%;
   @media (--viewport-medium) {
     flex-basis: 100%;
   }
 }
 .horizontal-mob .content {
-  flex-basis: 70%;
+  flex-basis: 60%;
   @media (--viewport-medium) {
     flex-basis: 100%;
   }
@@ -150,9 +146,13 @@
 }
 
 .horizontal-image-last > div:first-child {
-  flex-basis: 30%;
+  flex-basis: 40%;
 }
 
 .horizontal-image-last > div:nth-child(2) {
-  flex-basis: 70%;
+  flex-basis: 60%;
+}
+
+.content-overlap {
+  height: auto;
 }
diff --git a/app/isomorphic/arrow/components/Molecules/StoryCardWithBulletPoint/index.js b/app/isomorphic/arrow/components/Molecules/StoryCardWithBulletPoint/index.js
index 8282247c5..0424f43ca 100644
--- a/app/isomorphic/arrow/components/Molecules/StoryCardWithBulletPoint/index.js
+++ b/app/isomorphic/arrow/components/Molecules/StoryCardWithBulletPoint/index.js
@@ -7,7 +7,7 @@ import { Headline } from "../../Atoms/Headline";
 import { BulletPoint } from "../../Atoms/BulletPoint";
 import "./story-card-with-bullet-point.m.css";
 
-export const StoryCardWithBulletPoint = ({ story, config, bulletValue }) => {
+export const StoryCardWithBulletPoint = ({ story, config, bulletValue, collectionId }) => {
   const { theme = "", localizationConfig = {} } = config;
   return (
     <div styleName="card-with-bullet-wrapper">
@@ -15,7 +15,7 @@ export const StoryCardWithBulletPoint = ({ story, config, bulletValue }) => {
       <StoryCard story={story} bgImgContentOverlap config={config} theme={theme}>
         <StorycardContent>
           <Headline story={story} headerLevel="6" premiumStoryIconConfig={config} />
-          <AuthorWithTime config={localizationConfig} story={story} prefix="By" />
+          <AuthorWithTime config={localizationConfig} story={story} prefix="By" collectionId={collectionId} />
         </StorycardContent>
       </StoryCard>
     </div>
@@ -26,7 +26,8 @@ StoryCardWithBulletPoint.propTypes = {
   story: PropTypes.object.isRequired,
   config: PropTypes.shape({
     theme: PropTypes.string,
-    localizationConfig: PropTypes.object,
+    localizationConfig: PropTypes.object
   }),
   bulletValue: PropTypes.string,
+  collectionId: PropTypes.number
 };
diff --git a/app/isomorphic/arrow/components/Molecules/StoryCardWithBulletPoint/stories.js b/app/isomorphic/arrow/components/Molecules/StoryCardWithBulletPoint/stories.js
index 06fa0ec92..3f8cc8b42 100644
--- a/app/isomorphic/arrow/components/Molecules/StoryCardWithBulletPoint/stories.js
+++ b/app/isomorphic/arrow/components/Molecules/StoryCardWithBulletPoint/stories.js
@@ -13,9 +13,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 ).add("Default", () => {
@@ -24,7 +24,7 @@ withStore(
     showSection: boolean("Show Section", true),
     showAuthor: boolean("Show Author", true),
     showTime: boolean("Show Time", true),
-    showReadTime: boolean("Read time", true),
+    showReadTime: boolean("Read time", true)
   };
 
   return <StoryCardWithBulletPoint story={story} bulletValue={"1"} config={contextConfig} />;
diff --git a/app/isomorphic/arrow/components/Molecules/StoryElementCard/index.js b/app/isomorphic/arrow/components/Molecules/StoryElementCard/index.js
index 5404be499..90829e1ab 100644
--- a/app/isomorphic/arrow/components/Molecules/StoryElementCard/index.js
+++ b/app/isomorphic/arrow/components/Molecules/StoryElementCard/index.js
@@ -1,6 +1,5 @@
-/* eslint-disable no-case-declarations */
 import React from "react";
-import get from "lodash/get";
+import get from "lodash.get";
 import { Text } from "../../Atoms/StoryElements/Text";
 import { Blurb } from "../../Atoms/StoryElements/Blurb";
 import "./story-element-card.m.css";
@@ -22,9 +21,10 @@ import { SocialShare } from "@quintype/components";
 import { SocialShareTemplate } from "../../Molecules/SocialShareTemplate";
 import { facebookMobileVideoResizeFix, getTextColor } from "../../../utils/utils";
 import { ImageSlideshow } from "../../Atoms/StoryElements/ImageSlideshow";
+import { useStateValue } from "../../SharedContext";
 
-const getElementType = (element) => element.subtype || element.type || "";
-const getElement = (story, element, config = {}, AdComponent, WidgetComp, index, cardId) => {
+const getElementType = (element) => element["subtype"] || element["type"] || "";
+const getElement = (story, element, config = {}, AdComponent, WidgetComp, index, cardId, enableDarkMode) => {
   const {
     text = {},
     summary = {},
@@ -36,33 +36,49 @@ const getElement = (story, element, config = {}, AdComponent, WidgetComp, index,
     question: questionElement = {},
     answer: answerElement = {},
     references = {},
+    jsEmbed = {}
   } = config;
 
+  const configData = useStateValue() || {};
+  const textInvertColor = getTextColor(configData.theme);
+
   let elementType = getElementType(element);
 
   if (elementType === "image-gallery") {
-    elementType = element.metadata.type;
+    elementType = element.metadata["type"];
   }
 
   const storyElementId = get(element, ["id"]);
-
+  const targetId = element.targetId ? `widget-${element.targetId}-${story.id}` : `widget-${index}_${cardId}`;
   switch (elementType) {
     case "ad":
       return <AdComponent {...element} id={`ad-${index}_${cardId}`} />;
 
     case "widget":
-      return <WidgetComp widgetCode={element.config.customCode} id={`widget-${index}_${cardId}`} />;
+      return <WidgetComp widgetCode={element.config.customCode} id={targetId} />;
 
     case "text":
     case "cta":
-      const { css: { textColor: textElementColor = "#000", hyperlinkColor = "#2f81cd" } = {} } = text;
-      return <Text element={element} css={{ textColor: textElementColor, hyperlinkColor: hyperlinkColor }} />;
+      const {
+        css: {
+          textColor: textElementColor = "#000",
+          darkTextColor: darkTextElementColor = "#fff",
+          hyperlinkColor = "#2f81cd"
+        } = {}
+      } = text;
+
+      return (
+        <Text
+          element={element}
+          css={{ textColor: enableDarkMode ? darkTextElementColor : textElementColor, hyperlinkColor: hyperlinkColor }}
+        />
+      );
 
     case "summary":
       const {
         template: summaryTemplate = "",
-        css: { headerBgColor = "" } = {},
-        opts: { headline = "", hideHeadline = false } = {},
+        css: { headerBgColor = "", darkHeaderBgColor } = {},
+        opts: { headline = "", hideHeadline = false } = {}
       } = summary;
       return (
         <Summary
@@ -70,20 +86,35 @@ const getElement = (story, element, config = {}, AdComponent, WidgetComp, index,
           template={summaryTemplate}
           opts={{
             headline: headline || "Summary",
-            hideHeadline: hideHeadline,
+            hideHeadline: hideHeadline
           }}
-          css={{ headerBgColor: headerBgColor || "" }}
+          css={{ headerBgColor: enableDarkMode ? darkHeaderBgColor : headerBgColor || "" }}
         />
       );
 
     case "blurb":
-      const { template: blurbTemplate = "default", css: { borderColor = "#2f81cd" } = {} } = blurb;
-      return <Blurb element={element} template={blurbTemplate} css={{ borderColor: borderColor }} />;
+      const {
+        template: blurbTemplate = "default",
+        css: { borderColor = "#3cab92", darkBorderColor = "#3cab92" } = {}
+      } = blurb;
+      return (
+        <Blurb
+          element={element}
+          template={blurbTemplate}
+          css={{ borderColor: enableDarkMode ? darkBorderColor : borderColor }}
+        />
+      );
 
     case "blockquote":
       const {
         template: blockQuoteTemplate = "default",
-        css: { iconType = "edgeIcon", blockQuoteColor = "#2f81cd", backgroundShade = "" } = {},
+        css: {
+          iconType = "edgeIcon",
+          blockQuoteColor = "",
+          darkBlockQuoteColor = "",
+          backgroundShade = "",
+          darkBackgroundShade = ""
+        } = {}
       } = blockquote;
       return (
         <BlockQuote
@@ -91,15 +122,24 @@ const getElement = (story, element, config = {}, AdComponent, WidgetComp, index,
           template={blockQuoteTemplate}
           css={{
             iconType: iconType,
-            blockQuoteColor: blockQuoteColor,
-            backgroundShade: backgroundShade,
+            blockQuoteColor: enableDarkMode ? darkBlockQuoteColor : blockQuoteColor,
+            backgroundShade: enableDarkMode ? darkBackgroundShade : backgroundShade
           }}
         />
       );
 
     case "quote":
-      const { template: quoteTemplate = "borderNone", css: { borderColor: quoteBorderColor = "#2f81cd" } = {} } = quote;
-      return <Quote element={element} template={quoteTemplate} css={{ borderColor: quoteBorderColor }} />;
+      const {
+        template: quoteTemplate = "borderNone",
+        css: { borderColor: quoteBorderColor = "#2f81cd", darkBorderColor: darkQuoteBorderColor = "#2f81cd" } = {}
+      } = quote;
+      return (
+        <Quote
+          element={element}
+          template={quoteTemplate}
+          css={{ borderColor: enableDarkMode ? darkQuoteBorderColor : quoteBorderColor }}
+        />
+      );
 
     case "bigfact":
       return <BigFact element={element} />;
@@ -107,15 +147,15 @@ const getElement = (story, element, config = {}, AdComponent, WidgetComp, index,
     case "also-read":
       const {
         template: alsoReadTemplate = "default",
-        css: { textColor = "#000" } = {},
-        opts: { title = "" } = {},
+        css: { textColor = "", darkTextColor = "" } = {},
+        opts: { title = "" } = {}
       } = alsoRead;
       return (
         <AlsoRead
           story={story}
           element={element}
           template={alsoReadTemplate}
-          css={{ textColor: textColor }}
+          css={{ textColor: enableDarkMode ? darkTextColor : textColor }}
           opts={{ title }}
         />
       );
@@ -127,18 +167,18 @@ const getElement = (story, element, config = {}, AdComponent, WidgetComp, index,
       const {
         template: qaTemplate = "default",
         css: { iconColor = "" } = {},
-        opts: { defaultIconType = "edge" } = {},
+        opts: { defaultIconType = "edge" } = {}
       } = qaElement;
       return (
         <QuestionAnswer
           element={element}
           opts={{
             type: "q-and-a",
-            defaultIconType: defaultIconType,
+            defaultIconType: defaultIconType
           }}
           template={qaTemplate}
           css={{
-            iconColor: iconColor,
+            iconColor: iconColor
           }}
         />
       );
@@ -147,18 +187,18 @@ const getElement = (story, element, config = {}, AdComponent, WidgetComp, index,
       const {
         template: questionTemplate = "default",
         css: { questionIconColor = "" } = {},
-        opts: { defaultQuestionIconType = "edge" } = {},
+        opts: { defaultQuestionIconType = "edge" } = {}
       } = questionElement;
       return (
         <QuestionAnswer
           element={element}
           opts={{
             type: "question",
-            defaultIconType: defaultQuestionIconType,
+            defaultIconType: defaultQuestionIconType
           }}
           template={questionTemplate}
           css={{
-            iconColor: questionIconColor,
+            iconColor: questionIconColor
           }}
         />
       );
@@ -167,18 +207,18 @@ const getElement = (story, element, config = {}, AdComponent, WidgetComp, index,
       const {
         template: answerTemplate = "default",
         css: { answerIconColor = "" } = {},
-        opts: { defaultAnswerIconType = "edge" } = {},
+        opts: { defaultAnswerIconType = "edge" } = {}
       } = answerElement;
       return (
         <QuestionAnswer
           element={element}
           opts={{
             type: "answer",
-            defaultIconType: defaultAnswerIconType,
+            defaultIconType: defaultAnswerIconType
           }}
           template={answerTemplate}
           css={{
-            iconColor: answerIconColor,
+            iconColor: answerIconColor
           }}
         />
       );
@@ -199,9 +239,12 @@ const getElement = (story, element, config = {}, AdComponent, WidgetComp, index,
 
     case "youtube-video":
     case "dailymotion-video":
+    case "dailymotion-embed-script":
+    case "brightcove-video":
+      const lazyLoad = get(jsEmbed, ["lazyLoad"], true);
       return (
         <div className="content-style" id={`video-${storyElementId}`}>
-          <Video element={element} story={story} loadIframeOnClick={true} />
+          <Video element={element} story={story} loadIframeOnClick={lazyLoad} />
         </div>
       );
     case "attachment":
@@ -220,13 +263,13 @@ const getElement = (story, element, config = {}, AdComponent, WidgetComp, index,
           element={element}
           opts={{
             showHeadline: showHeadline,
-            headlineText: headlineText,
+            headlineText: headlineText
           }}
         />
       );
     default:
       return (
-        <div className="content-style" id={`element-${storyElementId}`}>
+        <div className="content-style" id={`element-${storyElementId}`} styleName={`${textInvertColor}`}>
           <StoryElement element={element} story={story} />
         </div>
       );
@@ -236,7 +279,7 @@ const getElement = (story, element, config = {}, AdComponent, WidgetComp, index,
 const MainImageWrapper = ({ imageElement, story, children, config, card }) => {
   return (
     <>
-      <div style={{ backgroundColor: config.theme }}>
+      <div style={{ backgroundColor: config.theme || "initial" }}>
         <Image element={imageElement} caption={false} />
         <div styleName="image-share">
           <CaptionAttribution element={imageElement} config={config} />
@@ -258,8 +301,8 @@ MainImageWrapper.propTypes = {
   config: PropTypes.object,
   children: PropTypes.node,
   card: PropTypes.shape({
-    id: PropTypes.string,
-  }),
+    id: PropTypes.string
+  })
 };
 
 export const StoryElementCard = ({
@@ -271,6 +314,7 @@ export const StoryElementCard = ({
   theme,
   adComponent,
   widgetComp,
+  enableDarkMode
 }) => {
   const textColor = getTextColor(theme);
   const isLiveBlog = isLive ? "live-blog" : "";
@@ -290,9 +334,8 @@ export const StoryElementCard = ({
           <div
             key={element.id}
             className="arr--element-container"
-            styleName={`element-container ${isLiveBlog} ${tableStyle} ${textColor}`}
-          >
-            {getElement(story, element, config, adComponent, widgetComp, index, cardId)}
+            styleName={`element-container ${isLiveBlog} ${tableStyle} ${textColor}`}>
+            {getElement(story, element, config, adComponent, widgetComp, index, cardId, enableDarkMode)}
           </div>
         );
       })}
@@ -308,12 +351,14 @@ StoryElementCard.propTypes = {
   theme: PropTypes.string,
   adComponent: PropTypes.func,
   widgetComp: PropTypes.func,
+  enableDarkMode: PropTypes.bool
 };
 
-export const PhotoStoryElement = ({ card = {}, config, story, adComponent, widgetComp }) => {
+export const PhotoStoryElement = ({ card = {}, config, story, adComponent, widgetComp, enableDarkMode, theme }) => {
   let shouldRunFBMobileVideoFix = true;
+  const textColor = getTextColor(theme);
   return (
-    <div styleName="story-card">
+    <div styleName={`story-card ${textColor}`}>
       {get(card, ["story-elements"], []).map((element, index) => {
         const cardId = get(card, ["id"], "");
         if (element.type === "image") {
@@ -325,7 +370,7 @@ export const PhotoStoryElement = ({ card = {}, config, story, adComponent, widge
           }
           return (
             <div styleName="element-container" key={index}>
-              {getElement(story, element, config, adComponent, widgetComp, index, cardId)}
+              {getElement(story, element, config, adComponent, widgetComp, index, cardId, enableDarkMode)}
             </div>
           );
         }
@@ -340,14 +385,17 @@ PhotoStoryElement.propTypes = {
   config: PropTypes.object,
   adComponent: PropTypes.func,
   widgetComp: PropTypes.func,
+  enableDarkMode: PropTypes.bool,
+  theme: PropTypes.string
 };
 
 export const SlotAfterStory = ({ id = "", element = {}, AdComponent, WidgetComp }) => {
+  const targetId = element.targetId ? `widget-after-story-${element.targetId}-${id}` : `widget-after-story-${id}`;
   switch (element.type) {
     case "ad":
       return <AdComponent {...element} id={`ad-after-story-${id}`} />;
     case "widget":
-      return <WidgetComp widgetCode={element.config.customCode} id={`widget-after-story-${id}`} />;
+      return <WidgetComp widgetCode={element.config.customCode} id={targetId} />;
     default:
       return null;
   }
@@ -357,5 +405,5 @@ SlotAfterStory.propTypes = {
   id: PropTypes.string,
   element: PropTypes.object,
   AdComponent: PropTypes.func,
-  WidgetComp: PropTypes.func,
+  WidgetComp: PropTypes.func
 };
diff --git a/app/isomorphic/arrow/components/Molecules/StoryElementCard/stories.js b/app/isomorphic/arrow/components/Molecules/StoryElementCard/stories.js
index c260bbedd..4b984763e 100644
--- a/app/isomorphic/arrow/components/Molecules/StoryElementCard/stories.js
+++ b/app/isomorphic/arrow/components/Molecules/StoryElementCard/stories.js
@@ -14,14 +14,14 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 ).add("Default", () => {
   const config = {
-    theme: color("Background Color", "#fff"),
+    theme: color("Background Color", "#fff")
   };
   return <StoryElementCard story={story} card={cards[0]} config={config} />;
 });
diff --git a/app/isomorphic/arrow/components/Molecules/StoryElementCard/story-element-card.m.css b/app/isomorphic/arrow/components/Molecules/StoryElementCard/story-element-card.m.css
index 2d7c639fd..54135fd42 100644
--- a/app/isomorphic/arrow/components/Molecules/StoryElementCard/story-element-card.m.css
+++ b/app/isomorphic/arrow/components/Molecules/StoryElementCard/story-element-card.m.css
@@ -1,4 +1,4 @@
-@import "../../../../../assets/arrow/stylesheets/mixins.scss";
+@import "../../../../assets/stylesheets/mixins.scss";
 
 .element-container {
   margin: var(--arrow-spacing-l) 0;
@@ -30,12 +30,20 @@
 }
 
 .story-card {
-  border-bottom: 1px solid var(--arrow-c-mono5);
   margin-bottom: var(--arrow-spacing-xl);
 }
 
+.story-card.dark {
+  border-bottom: 1px solid var(--arrow-c-mono2);
+}
+
+.story-card.light {
+  border-bottom: 1px solid var(--arrow-c-invert-mono2);
+}
+
 .element-container :global(.story-element-jsembed) iframe {
   max-width: 100%;
+  width: 100%;
 }
 
 .element-container :global(.story-element-jsembed) img {
@@ -54,12 +62,6 @@
   }
 }
 
-:global(.story-element-jsembed.story-element-jsembed-facebook-post) {
-  @include mobile {
-    max-width: calc(100vw - var(--arrow-spacing-l));
-  }
-}
-
 .table :global(.story-element-data-table) {
   max-width: calc(100vw - 24px);
   @include tablet {
@@ -70,6 +72,31 @@
   }
 }
 
+:global(.story-element-jsembed.story-element-jsembed-facebook-post) {
+  @include mobile {
+    max-width: calc(100vw - var(--arrow-spacing-l));
+  }
+}
+
+.element-container :global(.dailymotion-embed-wrapper) {
+  padding-bottom: 56.25%;
+  position: relative;
+}
+
+.element-container :global(.story-element-jsembed-instagram > .jsembed-wrapper) {
+  /* fix instagram overflowing container on safari */
+  position: relative;
+}
+
+.element-container :global(.dailymotion-embed-wrapper .dailymotion-player-root) {
+  padding-bottom: 0 !important;
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 .dark {
   color: var(--arrow-c-mono2);
 }
diff --git a/app/isomorphic/arrow/components/Molecules/StorycardContent/index.js b/app/isomorphic/arrow/components/Molecules/StorycardContent/index.js
index 3f0a2cd4e..a3849cdc7 100644
--- a/app/isomorphic/arrow/components/Molecules/StorycardContent/index.js
+++ b/app/isomorphic/arrow/components/Molecules/StorycardContent/index.js
@@ -2,7 +2,8 @@ import React from "react";
 import { Headline } from "../../Atoms/Headline";
 import { SectionTag } from "../../Atoms/SectionTag";
 import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
-import { getTextColor, rgbToHex } from "../../../utils/utils";
+import { Subheadline } from "../../Atoms/Subheadline";
+import { rgbToHex } from "../../../utils/utils";
 
 import PropTypes from "prop-types";
 
@@ -17,8 +18,9 @@ export const StorycardContent = ({
   headerLevel,
   borderColor,
   config,
+  showSubheadline,
+  collectionId
 }) => {
-  const textColor = getTextColor(theme);
   const borderOptions = ["full"];
   const SectionTagborderColor = rgbToHex(borderColor);
   const borderTemplate = borderOptions.includes(border) ? `border-${border}` : "";
@@ -28,8 +30,7 @@ export const StorycardContent = ({
       className="arr--content-wrapper"
       data-test-id="story-card-content"
       styleName={`wrapper ${borderTemplate} ${horizontalCard}`}
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       {children || (
         <DefaultStoryCardContent
           story={story}
@@ -37,20 +38,23 @@ export const StorycardContent = ({
           isHorizontalMobile={isHorizontalMobile}
           borderColor={SectionTagborderColor}
           config={config}
+          showSubheadline={showSubheadline}
+          collectionId={collectionId}
         />
       )}
     </div>
   );
 };
 
-const DefaultStoryCardContent = ({ story, headerLevel, borderColor, config = {} }) => {
+const DefaultStoryCardContent = ({ story, headerLevel, borderColor, config = {}, showSubheadline, collectionId }) => {
   const SectionTagborderColor = rgbToHex(borderColor);
   const { localizationConfig = {} } = config;
   return (
     <div>
       <SectionTag story={story} borderColor={SectionTagborderColor} />
       <Headline story={story} headerLevel={headerLevel} premiumStoryIconConfig={config} />
-      <AuthorWithTime config={localizationConfig} story={story} />
+      {showSubheadline && <Subheadline story={story} truncateChars={200} />}
+      <AuthorWithTime config={localizationConfig} story={story} collectionId={collectionId} />
     </div>
   );
 };
@@ -63,6 +67,8 @@ DefaultStoryCardContent.propTypes = {
   headerLevel: PropTypes.string,
   borderColor: PropTypes.string,
   config: PropTypes.object,
+  showSubheadline: PropTypes.bool,
+  collectionId: PropTypes.number
 };
 
 StorycardContent.propTypes = {
@@ -74,4 +80,6 @@ StorycardContent.propTypes = {
   headerLevel: PropTypes.string,
   borderColor: PropTypes.string,
   config: PropTypes.object,
+  showSubheadline: PropTypes.bool,
+  collectionId: PropTypes.number
 };
diff --git a/app/isomorphic/arrow/components/Molecules/StorycardContent/stories.js b/app/isomorphic/arrow/components/Molecules/StorycardContent/stories.js
index 862b436e4..79863a0af 100644
--- a/app/isomorphic/arrow/components/Molecules/StorycardContent/stories.js
+++ b/app/isomorphic/arrow/components/Molecules/StorycardContent/stories.js
@@ -16,9 +16,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 )
diff --git a/app/isomorphic/arrow/components/Molecules/StorycardContent/storycardContent.m.css b/app/isomorphic/arrow/components/Molecules/StorycardContent/storycardContent.m.css
index 790c9cc36..7b72b8533 100644
--- a/app/isomorphic/arrow/components/Molecules/StorycardContent/storycardContent.m.css
+++ b/app/isomorphic/arrow/components/Molecules/StorycardContent/storycardContent.m.css
@@ -1,7 +1,7 @@
 @custom-media --viewport-medium (width >= 768px);
 
 .wrapper {
-  flex-basis: 70%;
+  flex-basis: 60%;
   @media (--viewport-medium) {
     flex-basis: 100%;
   }
diff --git a/app/isomorphic/arrow/components/Rows/AlternateCollectionFilter/alternate-collection-filter.m.css b/app/isomorphic/arrow/components/Rows/AlternateCollectionFilter/alternate-collection-filter.m.css
index 28ba3813c..041e7465e 100644
--- a/app/isomorphic/arrow/components/Rows/AlternateCollectionFilter/alternate-collection-filter.m.css
+++ b/app/isomorphic/arrow/components/Rows/AlternateCollectionFilter/alternate-collection-filter.m.css
@@ -131,7 +131,7 @@
     display: block;
     font-size: var(--arrow-fs-s);
     line-height: var(--arrow-lh-2);
-    overflow: none;
+    overflow: unset;
   }
 }
 
diff --git a/app/isomorphic/arrow/components/Rows/AlternateCollectionFilter/index.js b/app/isomorphic/arrow/components/Rows/AlternateCollectionFilter/index.js
index f87922a64..93c56450f 100644
--- a/app/isomorphic/arrow/components/Rows/AlternateCollectionFilter/index.js
+++ b/app/isomorphic/arrow/components/Rows/AlternateCollectionFilter/index.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import axios from "axios";
 import PropTypes from "prop-types";
-import get from "lodash/get";
+import get from "lodash.get";
 import { useDispatch, useSelector } from "react-redux";
 import { collectionToStories } from "@quintype/components";
 
@@ -25,7 +25,7 @@ const AlternateCollectionFilter = ({ collection, config = {} }) => {
     collectionNameTemplate = "",
     footerSlotConfig = {},
     footerButton = "",
-    showButton = true,
+    showButton = true
   } = config;
   const { footerSlot } = footerSlotConfig;
 
@@ -53,7 +53,7 @@ const AlternateCollectionFilter = ({ collection, config = {} }) => {
     try {
       let data = {};
       if (!(id in cachedStories)) {
-        const res = await axios.get(`/api/v1/collections/${id}?limit=7`);
+        let res = await axios.get(`/api/v1/collections/${id}?limit=7`);
         data = res.data;
       } else data = cachedStories[id];
       memoizeStories(id, data);
@@ -81,7 +81,7 @@ const AlternateCollectionFilter = ({ collection, config = {} }) => {
   const openChildCollectionItems = (event, index, slug) => {
     event.stopPropagation();
     fetchSubCollectionData(slug);
-    const activeIndex = active === index ? 0 : index;
+    let activeIndex = active === index ? 0 : index;
     handleActive(activeIndex);
   };
 
@@ -93,8 +93,7 @@ const AlternateCollectionFilter = ({ collection, config = {} }) => {
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="collection-filter"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName={`wrapper ${getCustomStyleName}`}>
         <CollectionName
           collection={collection}
@@ -108,12 +107,10 @@ const AlternateCollectionFilter = ({ collection, config = {} }) => {
                 <div
                   key={index}
                   className={`child-collection-wrapper ${index === active ? "open-subchild" : ""}`}
-                  styleName={`child-collection-wrapper ${index === active ? "open-subchild" : ""}`}
-                >
+                  styleName={`child-collection-wrapper ${index === active ? "open-subchild" : ""}`}>
                   <div
                     styleName={`child-collection ${textColor}`}
-                    onClick={(event) => openChildCollectionItems(event, index, subCollections.id)}
-                  >
+                    onClick={(event) => openChildCollectionItems(event, index, subCollections.id)}>
                     {subCollections.name}
                   </div>
                   <span className={`navigator ${textColor}`} styleName={`navigator ${textColor}`} />
@@ -171,12 +168,12 @@ AlternateCollectionFilter.propTypes = {
     collectionNameTemplate: PropTypes.string,
     footerSlotConfig: PropTypes.object,
     footerButton: PropTypes.string,
-    collectionNameBorderColor: PropTypes.string,
-  }),
+    collectionNameBorderColor: PropTypes.string
+  })
 };
 
 AlternateCollectionFilter.defaultProps = {
   theme: "#ffffff",
   slotConfig: "story",
-  border: "",
+  border: ""
 };
diff --git a/app/isomorphic/arrow/components/Rows/AlternateCollectionFilter/stories.js b/app/isomorphic/arrow/components/Rows/AlternateCollectionFilter/stories.js
index 1a532a277..c06d8588e 100644
--- a/app/isomorphic/arrow/components/Rows/AlternateCollectionFilter/stories.js
+++ b/app/isomorphic/arrow/components/Rows/AlternateCollectionFilter/stories.js
@@ -1,4 +1,3 @@
-/* eslint-disable prefer-regex-literals */
 import React from "react";
 import { color, boolean, text } from "@storybook/addon-knobs";
 import {
@@ -6,7 +5,7 @@ import {
   optionalSelect,
   sectionTagTemplates,
   collectionNameTemplates,
-  footerButton,
+  footerButton
 } from "../../../../storybook";
 import AlternateCollectionFilter from "./index";
 import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
@@ -30,7 +29,7 @@ const sectionTagDefaultvalue = "#3a9fdd";
 
 const borderTemplate = {
   default: "",
-  border: "full",
+  border: "full"
 };
 
 const footerSlot = () => {
@@ -43,9 +42,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 )
@@ -66,7 +65,7 @@ withStore(
       buttonText: text("Footer text", "Read More"),
       footerSlotConfig: { footerSlot: footerSlot },
       showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     };
 
     mock.onGet(API_REQUEST).reply(200, nestedCollection);
diff --git a/app/isomorphic/arrow/components/Rows/AsideCollection/aside-collection.m.css b/app/isomorphic/arrow/components/Rows/AsideCollection/aside-collection.m.css
index 88fe82d87..fc2c98c21 100644
--- a/app/isomorphic/arrow/components/Rows/AsideCollection/aside-collection.m.css
+++ b/app/isomorphic/arrow/components/Rows/AsideCollection/aside-collection.m.css
@@ -1,11 +1,8 @@
-@import "../../../../../assets/arrow/stylesheets/mixins.scss";
+@import "../../../../assets/stylesheets/mixins.scss";
 
 .stories {
   margin-top: var(--arrow-spacing-m);
 }
-.wrapper {
-  margin-top: var(--arrow-spacing-m);
-}
 .wrapper :global(.arr--collection-name) {
   margin-bottom: var(--arrow-spacing-m);
 }
@@ -15,8 +12,6 @@
 }
 
 .story-hero-image {
-  min-width: 82px;
-  max-width: 82px;
   margin-right: var(--arrow-spacing-xs);
 }
 
@@ -30,12 +25,6 @@
   text-align: center;
 }
 
-.dark {
-  color: var(--arrow-c-mono4);
-}
-.light {
-  color: var(--arrow-c-mono4);
-}
 .wrapper h3 {
   font-size: var(--arrow-fs-m);
 }
@@ -47,6 +36,10 @@
   }
 }
 
+.story :global(.arr--story-card) {
+  width: 100%;
+}
+
 .horizontal-wrapper {
   .stories {
     @include tablet {
@@ -104,3 +97,11 @@ html[dir="rtl"] {
     margin-bottom: 64px;
   }
 }
+
+.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono2);
+}
diff --git a/app/isomorphic/arrow/components/Rows/AsideCollection/index.js b/app/isomorphic/arrow/components/Rows/AsideCollection/index.js
index 40caca7bf..7abdf7b4e 100644
--- a/app/isomorphic/arrow/components/Rows/AsideCollection/index.js
+++ b/app/isomorphic/arrow/components/Rows/AsideCollection/index.js
@@ -1,7 +1,7 @@
-import get from "lodash/get";
+import get from "lodash.get";
 import PropTypes from "prop-types";
 import React, { useEffect, useState } from "react";
-import { isEmpty, getCollectionData } from "../../../utils/utils";
+import { isEmpty, getCollectionData, getTextColor } from "../../../utils/utils";
 import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
 import { CollectionName } from "../../Atoms/CollectionName";
 import { Headline } from "../../Atoms/Headline";
@@ -13,7 +13,8 @@ import KeyEvents from "../../Molecules/KeyEvents";
 import "./aside-collection.m.css";
 
 const StoryCollection = ({ data, slotData, horizontal, config, opts }) => {
-  const { theme = "", title = "", collectionSlug = "" } = slotData || config;
+  const { title = "", collectionSlug = "" } = slotData || config;
+  const { theme = "" } = config;
   const heading = title || "Related Stories";
   const isHorizontal = horizontal ? "horizontal-wrapper" : "";
   const mountAt = get(config, ["mountAtPrefix"], "");
@@ -39,6 +40,8 @@ const StoryCollection = ({ data, slotData, horizontal, config, opts }) => {
     }
   }, [data, collectionSlug]);
 
+  const textColor = getTextColor(theme);
+
   return (
     <>
       <CollectionName customCollectionName={heading} textColor collection={collectionData} />
@@ -50,13 +53,18 @@ const StoryCollection = ({ data, slotData, horizontal, config, opts }) => {
               <div styleName="story" key={story.id}>
                 <StoryCard story={story} isHorizontal theme={theme} config={config}>
                   <div styleName="story-hero-image">
-                    <HeroImage story={story} aspectRatio={[[4, 3]]} />
+                    <HeroImage
+                      story={story}
+                      aspectRatio={[[16, 9]]}
+                      queryParam={{ utm_source: "website", utm_medium: "related-stories" }}
+                      initialAltImage={true}
+                    />
                   </div>
                   <div>
                     {isHorizontal && <SectionTag story={story} />}
-                    <Headline story={story} />
+                    <Headline story={story} queryParam={{ utm_source: "website", utm_medium: "related-stories" }} />
                     <div styleName="story-byline">
-                      <AuthorWithTime config={opts} story={story} />
+                      <AuthorWithTime config={{ ...opts, isRelatedCollection: true }} story={story} />
                     </div>
                   </div>
                 </StoryCard>
@@ -64,7 +72,7 @@ const StoryCollection = ({ data, slotData, horizontal, config, opts }) => {
             );
           })
         ) : (
-          <div data-test-id="no-stories" styleName="info">
+          <div data-test-id="no-stories" styleName={`info ${textColor}`}>
             No stories found.
           </div>
         )}
@@ -78,12 +86,11 @@ StoryCollection.propTypes = {
   config: PropTypes.object,
   horizontal: PropTypes.bool,
   slotData: PropTypes.object,
-  opts: PropTypes.object,
+  opts: PropTypes.object
 };
 
 const AsideCollection = ({
   data = {},
-  slotData,
   config = {},
   horizontal = false,
   slots = [],
@@ -93,7 +100,7 @@ const AsideCollection = ({
   adComponent,
   widgetComp,
   storyId,
-  opts = {},
+  opts = {}
 }) => {
   if (isEmpty(data)) return null;
 
@@ -104,16 +111,17 @@ const AsideCollection = ({
       <div
         className="arrow-component arr--aside-collection"
         styleName={`wrapper ${isHorizontal}`}
-        style={{ backgroundColor: theme }}
+        style={{ backgroundColor: theme || "initial" }}
         data-test-id="aside-collection"
-        id={`aside-collection-${storyId}`}
-      >
-        <StoryCollection data={data} horizontal={horizontal} config={config} opts={opts} />
+        data-nosnippet
+        id={`aside-collection-${storyId}`}>
+        <StoryCollection data={data} horizontal={horizontal} config={config} opts={opts} theme1={theme} />
       </div>
     );
   }
   const isSticky = sticky ? "sticky" : "";
   const asideSlot = (type, slot, index) => {
+    const targetId = slot.targetId ? `widget-${slot.targetId}-${storyId}` : `widget-${index}_${storyId}`;
     switch (type) {
       case "ad":
         return (
@@ -124,7 +132,7 @@ const AsideCollection = ({
       case "widget":
         return (
           <div styleName="ad-slot" className="aside-collection-ad-slot">
-            {widgetComp({ ...slot, id: `widget-${index}_${storyId}` })}
+            {widgetComp({ ...slot, id: targetId })}
           </div>
         );
 
@@ -136,13 +144,14 @@ const AsideCollection = ({
         );
     }
   };
+
   return (
     <div
       className="arrow-component arr--aside-collection"
       styleName={["wrapper", isHorizontal, isSticky].join(" ")}
-      style={{ backgroundColor: theme }}
-      data-test-id="aside-collection"
-    >
+      style={{ backgroundColor: theme || "initial" }}
+      data-nosnippet
+      data-test-id="aside-collection">
       {enableKeyEvents && (
         <KeyEvents
           story={keyEventsData.story}
@@ -151,7 +160,7 @@ const AsideCollection = ({
           publishedDetails={opts}
         />
       )}
-      {slotData.map((slot, index) => asideSlot(slot.type, slot, index))}
+      {slots.map((slot, index) => asideSlot(slot.type, slot, index))}
     </div>
   );
 };
@@ -162,17 +171,16 @@ AsideCollection.propTypes = {
   opts: PropTypes.object,
   horizontal: PropTypes.bool,
   slots: PropTypes.array,
-  slotData: PropTypes.array,
   adComponent: PropTypes.func,
   widgetComp: PropTypes.func,
   sticky: PropTypes.bool,
   keyEventsData: PropTypes.shape({
     story: PropTypes.object,
     config: PropTypes.object,
-    showLoadMore: PropTypes.boolean,
+    showLoadMore: PropTypes.boolean
   }),
   enableKeyEvents: PropTypes.boolean,
-  storyId: PropTypes.string,
+  storyId: PropTypes.string
 };
 
 export default StateProvider(AsideCollection);
diff --git a/app/isomorphic/arrow/components/Rows/AsideCollection/stories.js b/app/isomorphic/arrow/components/Rows/AsideCollection/stories.js
index fde8357c4..26b690483 100644
--- a/app/isomorphic/arrow/components/Rows/AsideCollection/stories.js
+++ b/app/isomorphic/arrow/components/Rows/AsideCollection/stories.js
@@ -23,9 +23,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 ).add("Aside Collection template", () => {
@@ -37,7 +37,7 @@ withStore(
     showReadTime: boolean("Read time", true),
     showRowTitle: boolean("Collection name", true),
     collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
-    collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+    collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue)
   };
   return (
     <AsideCollection
diff --git a/app/isomorphic/arrow/components/Rows/AstrologyCollection/astrology-collection.m.css b/app/isomorphic/arrow/components/Rows/AstrologyCollection/astrology-collection.m.css
index 422f5921a..d2655783c 100644
--- a/app/isomorphic/arrow/components/Rows/AstrologyCollection/astrology-collection.m.css
+++ b/app/isomorphic/arrow/components/Rows/AstrologyCollection/astrology-collection.m.css
@@ -163,3 +163,11 @@
     opacity: 1;
   }
 }
+
+.nomore-stories.dark {
+  color: var(--arrow-c-mono4);
+}
+
+.nomore-stories.light {
+  color: var(--arrow-c-invert-mono3);
+}
diff --git a/app/isomorphic/arrow/components/Rows/AstrologyCollection/index.js b/app/isomorphic/arrow/components/Rows/AstrologyCollection/index.js
index 101c00f45..566f68b26 100644
--- a/app/isomorphic/arrow/components/Rows/AstrologyCollection/index.js
+++ b/app/isomorphic/arrow/components/Rows/AstrologyCollection/index.js
@@ -23,7 +23,7 @@ const AstrologyCollection = ({ collection, config = {} }) => {
     border = "",
     collectionNameTemplate = "",
     footerButton = "",
-    slotConfig = [],
+    slotConfig = []
   } = config;
 
   const [subCollectionStories, handleApiData] = useState([]);
@@ -54,7 +54,7 @@ const AstrologyCollection = ({ collection, config = {} }) => {
     try {
       let data = {};
       if (!(id in cachedStories)) {
-        const res = await axios.get(`/api/v1/collections/${id}?limit=7`);
+        let res = await axios.get(`/api/v1/collections/${id}?limit=12`);
 
         data = res.data;
       } else data = cachedStories[id];
@@ -83,7 +83,7 @@ const AstrologyCollection = ({ collection, config = {} }) => {
   const openChildCollectionItems = (event, index, slug) => {
     event.stopPropagation();
     fetchSubCollectionData(slug);
-    const activeIndex = active === index ? 0 : index;
+    let activeIndex = active === index ? 0 : index;
     handleActive(activeIndex);
   };
 
@@ -91,8 +91,7 @@ const AstrologyCollection = ({ collection, config = {} }) => {
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="astrology-collection"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName="wrapper">
         <CollectionName
           collection={collection}
@@ -112,8 +111,7 @@ const AstrologyCollection = ({ collection, config = {} }) => {
                   key={`tab-${index}`}
                   styleName={`child-collection ${textColor} ${index === active ? "open-subchild" : ""}`}
                   onClick={(event) => openChildCollectionItems(event, index, subCollections.id)}
-                  data-test-id={subCollections.name}
-                >
+                  data-test-id={subCollections.name}>
                   {subCollections.name}
                 </li>
               );
@@ -126,7 +124,7 @@ const AstrologyCollection = ({ collection, config = {} }) => {
               <Loading />
             ) : (
               <div styleName="subCollection-stories">
-                {items.length === 0 && <p styleName="nomore-stories">No more stories to load.</p>}
+                {items.length === 0 && <p styleName={`nomore-stories ${textColor}`}>No more stories to load.</p>}
                 {items.map((story, index) => (
                   <div styleName="card" key={`card-${index}`}>
                     <StoryCard story={story} border={border} theme={theme} config={config}>
@@ -167,12 +165,12 @@ AstrologyCollection.propTypes = {
     border: PropTypes.string,
     collectionNameTemplate: PropTypes.string,
     footerButton: PropTypes.string,
-    collectionNameBorderColor: PropTypes.string,
-  }),
+    collectionNameBorderColor: PropTypes.string
+  })
 };
 
 AstrologyCollection.defaultProps = {
   theme: "#ffffff",
   slotConfig: "story",
-  border: "",
+  border: ""
 };
diff --git a/app/isomorphic/arrow/components/Rows/AstrologyCollection/stories.js b/app/isomorphic/arrow/components/Rows/AstrologyCollection/stories.js
index 6ca760856..59d74ee49 100644
--- a/app/isomorphic/arrow/components/Rows/AstrologyCollection/stories.js
+++ b/app/isomorphic/arrow/components/Rows/AstrologyCollection/stories.js
@@ -1,4 +1,3 @@
-/* eslint-disable prefer-regex-literals */
 import React from "react";
 import { color, boolean, text } from "@storybook/addon-knobs";
 import { withStore, optionalSelect, collectionNameTemplates, footerButton } from "../../../../storybook";
@@ -31,9 +30,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 )
@@ -50,9 +49,9 @@ withStore(
       slotConfig: [
         {
           type: "ad",
-          component: () => <CustomAdOrWidget />,
-        },
-      ],
+          component: () => <CustomAdOrWidget />
+        }
+      ]
     };
 
     mock.onGet(API_REQUEST).reply(200, nestedCollection);
diff --git a/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/author-intro.m.css b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/author-intro.m.css
index d42a96e5b..526da4208 100644
--- a/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/author-intro.m.css
+++ b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/author-intro.m.css
@@ -1,7 +1,6 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value mobile: 768px;
-@value tablet: 992px;
-@value desktop: 1025px;
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+@value tablet from viewports;
 
 .connect {
   font-size: var(--arrow-spacing-m);
diff --git a/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/author-intro.test.js b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/author-intro.test.js
index aeb35ea00..ef9c1fef8 100644
--- a/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/author-intro.test.js
+++ b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/author-intro.test.js
@@ -9,7 +9,7 @@ describe("Author Intro component", () => {
     const contextConfig = {
       theme: "#ffffff",
       enableBio: true,
-      enableSocialLinks: true,
+      enableSocialLinks: true
     };
     const wrapper = mount(
       <Provider store={generateStore}>
@@ -25,7 +25,7 @@ describe("Author Intro component", () => {
     const contextConfig = {
       theme: "#ffffff",
       enableBio: false,
-      enableSocialLinks: false,
+      enableSocialLinks: false
     };
     const wrapper = mount(
       <Provider store={generateStore}>
@@ -41,7 +41,7 @@ describe("Author Intro component", () => {
     const contextConfig = {
       theme: "#ffffff",
       enableBio: true,
-      enableSocialLinks: true,
+      enableSocialLinks: true
     };
     const wrapper = mount(
       <Provider store={generateStore}>
@@ -57,7 +57,7 @@ describe("Author Intro component", () => {
     const contextConfig = {
       theme: "#ffffff",
       enableBio: false,
-      enableSocialLinks: false,
+      enableSocialLinks: false
     };
     const wrapper = mount(
       <Provider store={generateStore}>
@@ -74,7 +74,7 @@ describe("Author Intro component", () => {
       theme: "#ffffff",
       enableBio: true,
       enableSocialLinks: true,
-      borderSupport: true,
+      borderSupport: true
     };
     const wrapper = mount(
       <Provider store={generateStore}>
@@ -92,7 +92,7 @@ describe("Author Intro component", () => {
       theme: "#ffffff",
       enableBio: false,
       enableSocialLinks: false,
-      borderSupport: false,
+      borderSupport: false
     };
     const wrapper = mount(
       <Provider store={generateStore}>
diff --git a/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/index.js b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/index.js
index 4bc4a9c44..ec00ff902 100644
--- a/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/index.js
+++ b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/index.js
@@ -47,11 +47,11 @@ const AuthorIntroductionCard = ({ data = {}, config = {}, template = "" }) => {
       data-test-id="author-intro"
       className={`${isFullWidth} arrow-component arr--author-intro-card`}
       styleName={`${authorCardStyle} ${supportBorder} ${textColor}`}
-      style={{ backgroundColor: theme, color: textColor }}
+      style={{ backgroundColor: theme || "initial" }}
     >
       <div styleName={`wrapper ${textColor}`} className="arrow-author-intro-wrapper">
         <div styleName="introduction-card" className="arrow-author-introduction-card">
-          {isSmallCircle && isMobile ? null : <h2 styleName={`author-name ${textColor}`}>{name}</h2>}
+          {isSmallCircle && isMobile ? null : <h1 styleName={`author-name ${textColor}`}>{name}</h1>}
           {enableBio && bio && (
             <div data-test-id="author-bio" styleName={`author-description ${textColor}`}>
               {bio}
@@ -59,7 +59,7 @@ const AuthorIntroductionCard = ({ data = {}, config = {}, template = "" }) => {
                 <div
                   styleName="fade-out"
                   style={{
-                    backgroundImage: `linear-gradient(to right, transparent, ${theme})`,
+                    backgroundImage: `linear-gradient(to right, transparent, ${theme})` || "initial",
                   }}
                 ></div>
               )}
@@ -103,7 +103,7 @@ const AuthorIntroductionCard = ({ data = {}, config = {}, template = "" }) => {
         </div>
         <div styleName="author-image" className="arrow-author-image">
           <AuthorImage author={data} template={template} />
-          {isSmallCircle && isMobile && <h2 styleName={`author-name ${textColor}`}>{name}</h2>}
+          {isSmallCircle && isMobile && <h1 styleName={`author-name ${textColor}`}>{name}</h1>}
         </div>
       </div>
     </div>
diff --git a/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/stories.js b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/stories.js
index b2d0b9195..a678c6aed 100644
--- a/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/stories.js
+++ b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/stories.js
@@ -10,9 +10,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -20,7 +20,7 @@ withStore(
     const contextConfig = {
       theme: color("Color", "#ffffff"),
       enableBio: boolean("Enable Bio", true),
-      enableSocialLinks: boolean("Enable Social Links", true),
+      enableSocialLinks: boolean("Enable Social Links", true)
     };
     return <AuthorIntroductionCard data={authorData} config={contextConfig} />;
   })
@@ -28,7 +28,7 @@ withStore(
     const contextConfig = {
       theme: color("Color", "#ffffff"),
       enableBio: boolean("Enable Bio", true),
-      enableSocialLinks: boolean("Enable Social Links", true),
+      enableSocialLinks: boolean("Enable Social Links", true)
     };
     return <AuthorIntroductionCard data={authorData} config={contextConfig} template="square" />;
   })
@@ -37,7 +37,7 @@ withStore(
       theme: color("Color", "#ffffff"),
       enableBio: boolean("Enable Bio", true),
       enableSocialLinks: boolean("Enable Social Links", true),
-      borderSupport: boolean("With Border", true),
+      borderSupport: boolean("With Border", true)
     };
     return <AuthorIntroductionCard data={authorData} config={contextConfig} template="smallCircle" />;
   });
diff --git a/app/isomorphic/arrow/components/Rows/AuthorsList/authors-list.m.css b/app/isomorphic/arrow/components/Rows/AuthorsList/authors-list.m.css
index 7f84de8c1..7d9968739 100644
--- a/app/isomorphic/arrow/components/Rows/AuthorsList/authors-list.m.css
+++ b/app/isomorphic/arrow/components/Rows/AuthorsList/authors-list.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 
 .wrapper {
diff --git a/app/isomorphic/arrow/components/Rows/AuthorsList/index.js b/app/isomorphic/arrow/components/Rows/AuthorsList/index.js
index 0d9049906..a8e7f1f67 100644
--- a/app/isomorphic/arrow/components/Rows/AuthorsList/index.js
+++ b/app/isomorphic/arrow/components/Rows/AuthorsList/index.js
@@ -1,18 +1,16 @@
 import React from "react";
 import { Link } from "@quintype/components";
 import PropTypes from "prop-types";
-import { getTextColor } from "../../../utils/utils";
 import { LoadmoreButton } from "../../Atoms/Loadmore";
 import AuthorIntroductionCard from "../AuthorIntroductionCard";
 import { StateProvider } from "../../SharedContext";
 import "./authors-list.m.css";
 import { useSelector } from "react-redux";
-import get from "lodash/get";
+import get from "lodash.get";
 
 const AuthorsList = ({ data = [], config = {}, getMoreData, hideLoadmore = false, limit }) => {
   if (data.length < 1) return null;
   const { theme } = config;
-  const textColor = getTextColor(theme);
   const mountAt = config.mountAt || "";
   const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
 
@@ -20,16 +18,14 @@ const AuthorsList = ({ data = [], config = {}, getMoreData, hideLoadmore = false
     <div
       data-test-id="authors-list"
       className="full-width-with-padding arrow-component arr--authors-list"
-      style={{ background: theme, color: textColor }}
-    >
+      style={{ background: theme || "initial" }}>
       <div styleName="wrapper">
         {data.slice(0, limit).map((author, index) => (
           <Link
             href={`${mountAt}/author/` + author.slug}
             key={`author-list-${index}`}
             styleName="linkWrapper"
-            aria-label="author"
-          >
+            aria-label="author">
             <AuthorIntroductionCard data={author} config={config} template="smallCircle" />
           </Link>
         ))}
@@ -46,7 +42,7 @@ AuthorsList.propTypes = {
   config: PropTypes.shape({ enableBio: PropTypes.bool, theme: PropTypes.string }),
   getMoreData: PropTypes.object.isRequired,
   limit: PropTypes.number,
-  hideLoadmore: PropTypes.bool,
+  hideLoadmore: PropTypes.bool
 };
 
 export default StateProvider(AuthorsList);
diff --git a/app/isomorphic/arrow/components/Rows/AuthorsList/stories.js b/app/isomorphic/arrow/components/Rows/AuthorsList/stories.js
index dcc975f78..38fd0a350 100644
--- a/app/isomorphic/arrow/components/Rows/AuthorsList/stories.js
+++ b/app/isomorphic/arrow/components/Rows/AuthorsList/stories.js
@@ -12,16 +12,16 @@ AuthorsData.push({
   social: {
     twitter: {
       url: "https://twitter.com/Reena00659364",
-      handle: "Twitter",
+      handle: "Twitter"
     },
     youtube: {
       url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
-      handle: "Youtube",
+      handle: "Youtube"
     },
     facebook: {
       url: "https://www.facebook.com/people/Reena-Singh/100005438855189",
-      handle: "Facebook",
-    },
+      handle: "Facebook"
+    }
   },
   bio: "",
   id: 94985,
@@ -29,9 +29,9 @@ AuthorsData.push({
   "avatar-s3-key": "",
   "twitter-handle": "quintype_inc",
   stats: {
-    contributions: null,
+    contributions: null
   },
-  metadata: {},
+  metadata: {}
 });
 
 const getMoreData = () => {
@@ -44,9 +44,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 ).add("Default", () => {
@@ -55,7 +55,7 @@ withStore(
     buttonText: text("Footer text", "Load More"),
     theme: color("color", "#ffffff"),
     enableSocialLinks: boolean("Enable Social Links", true),
-    borderSupport: boolean("With Border", true),
+    borderSupport: boolean("With Border", true)
   };
   return <AuthorsList data={AuthorsData} config={config} getMoreData={getMoreData} hideLoadmore={false} limit={9} />;
 });
diff --git a/app/isomorphic/arrow/components/Rows/CollectionFilter/collection-filter.m.css b/app/isomorphic/arrow/components/Rows/CollectionFilter/collection-filter.m.css
index 6486b2614..9defe2989 100644
--- a/app/isomorphic/arrow/components/Rows/CollectionFilter/collection-filter.m.css
+++ b/app/isomorphic/arrow/components/Rows/CollectionFilter/collection-filter.m.css
@@ -90,7 +90,7 @@
     display: block;
     font-size: var(--arrow-fs-s);
     line-height: var(--arrow-lh-2);
-    overflow: none;
+    overflow: unset;
   }
 }
 
diff --git a/app/isomorphic/arrow/components/Rows/CollectionFilter/index.js b/app/isomorphic/arrow/components/Rows/CollectionFilter/index.js
index 1ee2fcc98..29ad90b33 100644
--- a/app/isomorphic/arrow/components/Rows/CollectionFilter/index.js
+++ b/app/isomorphic/arrow/components/Rows/CollectionFilter/index.js
@@ -1,7 +1,7 @@
 import React, { Fragment, useEffect, useState } from "react";
 import axios from "axios";
 import PropTypes from "prop-types";
-import get from "lodash/get";
+import get from "lodash.get";
 import { CollectionName } from "../../Atoms/CollectionName";
 import { LoadmoreButton } from "../../Atoms/Loadmore";
 import { StoryCard } from "../../Molecules/StoryCard";
@@ -24,7 +24,7 @@ const CollectionFilter = ({ collection, config = {} }) => {
     border = "",
     collectionNameTemplate = "",
     footerSlotConfig = {},
-    footerButton = "",
+    footerButton = ""
   } = config;
   const { type = "story", component } = get(slotConfig, [0], {});
   const { footerSlot } = footerSlotConfig;
@@ -53,7 +53,7 @@ const CollectionFilter = ({ collection, config = {} }) => {
     try {
       let data = {};
       if (!(id in cachedStories)) {
-        const res = await axios.get(`/api/v1/collections/${id}`);
+        let res = await axios.get(`/api/v1/collections/${id}`);
         data = res.data;
       } else data = cachedStories[id];
       memoizeStories(id, data);
@@ -81,7 +81,7 @@ const CollectionFilter = ({ collection, config = {} }) => {
   const openChildCollectionItems = (event, index, slug) => {
     event.stopPropagation();
     fetchSubCollectionData(slug);
-    const activeIndex = active === index ? 0 : index;
+    let activeIndex = active === index ? 0 : index;
     handleActive(activeIndex);
   };
 
@@ -93,8 +93,7 @@ const CollectionFilter = ({ collection, config = {} }) => {
         theme={theme}
         border={border}
         borderColor={borderColor}
-        config={config}
-      >
+        config={config}>
         <HeroImage story={story} isHorizontalMobile />
         <StorycardContent story={story} border={border} borderColor={borderColor} config={config} />
       </StoryCard>
@@ -122,8 +121,7 @@ const CollectionFilter = ({ collection, config = {} }) => {
                 theme={theme}
                 border={border}
                 borderColor={borderColor}
-                config={config}
-              >
+                config={config}>
                 <HeroImage story={story} isHorizontal aspectRatio={[[1, 1]]} />
                 <StorycardContent story={story} border={border} borderColor={borderColor} config={config} />
               </StoryCard>
@@ -139,8 +137,7 @@ const CollectionFilter = ({ collection, config = {} }) => {
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="collection-filter"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName="wrapper">
         <CollectionName
           collection={collection}
@@ -154,8 +151,7 @@ const CollectionFilter = ({ collection, config = {} }) => {
                 <div key={index} styleName={`child-collection-wrapper ${index === active ? "open-subchild" : ""}`}>
                   <div
                     styleName={`child-collection ${textColor}`}
-                    onClick={(event) => openChildCollectionItems(event, index, subCollections.id)}
-                  >
+                    onClick={(event) => openChildCollectionItems(event, index, subCollections.id)}>
                     {subCollections.name}
                   </div>
                   <span styleName={`navigator ${textColor}`} />
@@ -225,12 +221,12 @@ CollectionFilter.propTypes = {
     collectionNameTemplate: PropTypes.string,
     footerSlotConfig: PropTypes.object,
     footerButton: PropTypes.string,
-    collectionNameBorderColor: PropTypes.string,
-  }),
+    collectionNameBorderColor: PropTypes.string
+  })
 };
 
 CollectionFilter.defaultProps = {
   theme: "#ffffff",
   slotConfig: "story",
-  border: "",
+  border: ""
 };
diff --git a/app/isomorphic/arrow/components/Rows/CollectionFilter/stories.js b/app/isomorphic/arrow/components/Rows/CollectionFilter/stories.js
index 9e8aeead8..cdf872be5 100644
--- a/app/isomorphic/arrow/components/Rows/CollectionFilter/stories.js
+++ b/app/isomorphic/arrow/components/Rows/CollectionFilter/stories.js
@@ -1,4 +1,3 @@
-/* eslint-disable prefer-regex-literals */
 import React from "react";
 import { color, boolean, text } from "@storybook/addon-knobs";
 import {
@@ -6,7 +5,7 @@ import {
   optionalSelect,
   sectionTagTemplates,
   collectionNameTemplates,
-  footerButton,
+  footerButton
 } from "../../../../storybook";
 import CollectionFilter from "./index";
 import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
@@ -30,7 +29,7 @@ const sectionTagDefaultvalue = "#3a9fdd";
 
 const borderTemplate = {
   default: "",
-  border: "full",
+  border: "full"
 };
 const configurableSlot = () => {
   return <AdPlaceholder height="250px" width="300px" />;
@@ -45,9 +44,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 )
@@ -69,7 +68,7 @@ withStore(
       buttonText: text("Footer text", "Read More"),
       footerSlotConfig: { footerSlot: footerSlot },
       showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     };
 
     mock.onGet(API_REQUEST).reply(200, nestedCollection);
diff --git a/app/isomorphic/arrow/components/Rows/ElevenStories/index.js b/app/isomorphic/arrow/components/Rows/ElevenStories/index.js
index 1315ff3ab..61fc78701 100644
--- a/app/isomorphic/arrow/components/Rows/ElevenStories/index.js
+++ b/app/isomorphic/arrow/components/Rows/ElevenStories/index.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from "react";
 import PropTypes from "prop-types";
-import get from "lodash/get";
+import get from "lodash.get";
 import { collectionToStories } from "@quintype/components";
 import { StoryCard } from "../../Molecules/StoryCard";
 import { Headline } from "../../Atoms/Headline";
@@ -26,11 +26,11 @@ const ElevenStories = ({ collection, config = {} }) => {
     borderColor = "",
     theme = "",
     slotConfig = [],
-    withseparator,
+    withseparator = true,
     collectionNameTemplate = "",
     footerSlotConfig = {},
     footerButton = "",
-    localizationConfig = {},
+    localizationConfig = {}
   } = config;
   const { type = "story", component } = get(slotConfig, [0], {});
   const { footerSlot } = footerSlotConfig;
@@ -41,6 +41,7 @@ const ElevenStories = ({ collection, config = {} }) => {
 
   const textColor = getTextColor(theme);
   const SectionTagborderColor = rgbToHex(borderColor);
+  const borderValue = withseparator ? "bottom" : "";
   const getChildCollectionData = () => {
     const filterCollection = get(collection, ["items"], []).find((collections) => collections.type === "collection");
     return (
@@ -49,10 +50,15 @@ const ElevenStories = ({ collection, config = {} }) => {
         {storyItems.slice(0, 1).map((story, index) => {
           return (
             <div styleName="first-story-card" key={`story-${index}`}>
-              <StoryCard story={story} theme={theme} headerLevel="4" border={withseparator ? "bottom" : ""}>
+              <StoryCard story={story} theme={theme} headerLevel="4" border={borderValue} config={config}>
                 <SectionTag story={story} borderColor={SectionTagborderColor} />
                 <Headline story={story} premiumStoryIconConfig={config} />
-                <AuthorWithTime config={localizationConfig} story={story} hideAuthorImage={false} />
+                <AuthorWithTime
+                  config={localizationConfig}
+                  story={story}
+                  hideAuthorImage={false}
+                  collectionId={collection.id}
+                />
                 <Subheadline story={story} />
               </StoryCard>
             </div>
@@ -61,10 +67,15 @@ const ElevenStories = ({ collection, config = {} }) => {
         {storyItems.slice(1, 4).map((story, index) => {
           return (
             <div styleName="story-card" key={`story-${index}`}>
-              <StoryCard story={story} theme={theme} border={withseparator ? "bottom" : ""}>
+              <StoryCard story={story} theme={theme} border={borderValue} config={config}>
                 <SectionTag story={story} borderColor={SectionTagborderColor} />
                 <Headline story={story} premiumStoryIconConfig={config} />
-                <AuthorWithTime config={localizationConfig} story={story} hideAuthorImage={false} />
+                <AuthorWithTime
+                  config={localizationConfig}
+                  story={story}
+                  hideAuthorImage={false}
+                  collectionId={collection.id}
+                />
               </StoryCard>
             </div>
           );
@@ -72,10 +83,15 @@ const ElevenStories = ({ collection, config = {} }) => {
         {storyItems.slice(4, 5).map((story, index) => {
           return (
             <div styleName="story-card" key={`story-${index}`}>
-              <StoryCard story={story} theme={theme}>
+              <StoryCard story={story} theme={theme} config={config}>
                 <SectionTag story={story} borderColor={SectionTagborderColor} />
                 <Headline story={story} premiumStoryIconConfig={config} />
-                <AuthorWithTime config={localizationConfig} story={story} hideAuthorImage={false} />
+                <AuthorWithTime
+                  config={localizationConfig}
+                  story={story}
+                  hideAuthorImage={false}
+                  collectionId={collection.id}
+                />
               </StoryCard>
             </div>
           );
@@ -90,10 +106,15 @@ const ElevenStories = ({ collection, config = {} }) => {
         {storyItems.slice(6, 7).map((story, index) => {
           return (
             <div styleName="first-story-card" key={`story-${index}`}>
-              <StoryCard story={story} theme={theme} border={withseparator ? "bottom" : ""}>
+              <StoryCard story={story} theme={theme} border={borderValue} config={config}>
                 <SectionTag story={story} borderColor={SectionTagborderColor} />
                 <Headline story={story} premiumStoryIconConfig={config} />
-                <AuthorWithTime config={localizationConfig} story={story} hideAuthorImage={false} />
+                <AuthorWithTime
+                  config={localizationConfig}
+                  story={story}
+                  hideAuthorImage={false}
+                  collectionId={collection.id}
+                />
                 <Subheadline story={story} clazzName="arr-hidden-mob" />
               </StoryCard>
             </div>
@@ -102,10 +123,15 @@ const ElevenStories = ({ collection, config = {} }) => {
         {storyItems.slice(7, 10).map((story, index) => {
           return (
             <div styleName="story-card" key={`story-${index}`}>
-              <StoryCard story={story} theme={theme} border={withseparator ? "bottom" : ""}>
+              <StoryCard story={story} theme={theme} border={borderValue} config={config}>
                 <SectionTag story={story} borderColor={SectionTagborderColor} />
                 <Headline story={story} premiumStoryIconConfig={config} />
-                <AuthorWithTime config={localizationConfig} story={story} hideAuthorImage={false} />
+                <AuthorWithTime
+                  config={localizationConfig}
+                  story={story}
+                  hideAuthorImage={false}
+                  collectionId={collection.id}
+                />
               </StoryCard>
             </div>
           );
@@ -113,10 +139,15 @@ const ElevenStories = ({ collection, config = {} }) => {
         {storyItems.slice(10, 11).map((story, index) => {
           return (
             <div styleName="story-card" key={`story-${index}`}>
-              <StoryCard story={story} theme={theme}>
+              <StoryCard story={story} theme={theme} config={config}>
                 <SectionTag story={story} borderColor={SectionTagborderColor} />
                 <Headline story={story} premiumStoryIconConfig={config} />
-                <AuthorWithTime config={localizationConfig} story={story} hideAuthorImage={false} />
+                <AuthorWithTime
+                  config={localizationConfig}
+                  story={story}
+                  hideAuthorImage={false}
+                  collectionId={collection.id}
+                />
               </StoryCard>
             </div>
           );
@@ -129,178 +160,114 @@ const ElevenStories = ({ collection, config = {} }) => {
   const footerSlotComp = footerSlot ? footerSlot() : null;
 
   const getColumn = () => {
-    if (withseparator) {
-      return (
-        <>
-          <div styleName="wrapper-with-divider">
-            <div styleName="column-one">
-              {storyItems.slice(2, 3).map((story, index) => {
-                return (
-                  <div styleName="story-card" key={`story-${index}`}>
-                    <StoryCard
-                      story={story}
-                      theme={theme}
-                      border="bottom"
-                      isHorizontalMobile
-                      borderColor={SectionTagborderColor}
-                      config={config}
-                      hideAuthorImage={false}
-                      headerLevel="5"
-                    />
-                  </div>
-                );
-              })}
-              {storyItems.slice(3, 5).map((story, index) => {
-                return (
-                  <Fragment key={`story-col-${index}-${get(story, ["id"], "0")}`}>
-                    <div styleName="story-card" key={`story-${index}`}>
-                      <StoryCard story={story} theme={theme} border={withseparator ? "bottom" : ""}>
-                        <SectionTag story={story} borderColor={SectionTagborderColor} />
-                        <Headline story={story} premiumStoryIconConfig={config} />
-                        <AuthorWithTime config={localizationConfig} story={story} hideAuthorImage={false} />
-                      </StoryCard>
-                    </div>
-                  </Fragment>
-                );
-              })}
-              {storyItems.slice(5, 6).map((story, index) => {
-                return (
-                  <Fragment key={`story-col2-${index}-${get(story, ["id"], "0")}`}>
-                    <div styleName="story-card" key={`story-${index}`}>
-                      <StoryCard story={story} theme={theme}>
-                        <SectionTag story={story} borderColor={SectionTagborderColor} />
-                        <Headline story={story} premiumStoryIconConfig={config} />
-                        <AuthorWithTime config={localizationConfig} story={story} hideAuthorImage={false} />
-                      </StoryCard>
-                    </div>
-                  </Fragment>
-                );
-              })}
-            </div>
-            <div styleName={`divider ${textColor}`} />
-            <div styleName="column-two">
-              {storyItems.slice(0, 1).map((story, index) => {
-                return (
+    return (
+      <>
+        <div styleName={withseparator ? "wrapper-with-divider" : "wrapper"}>
+          <div styleName="column-one">
+            {storyItems.slice(2, 3).map((story, index) => {
+              return (
+                <div styleName="story-card" key={`story-${index}`}>
+                  <StoryCard
+                    story={story}
+                    theme={theme}
+                    border={borderValue}
+                    isHorizontalMobile
+                    borderColor={SectionTagborderColor}
+                    config={config}
+                    aspectRatio={[[16, 9], [16, 9]]}
+                    hideAuthorImage={false}
+                    headerLevel="5"
+                    collectionId={collection.id}
+                  />
+                </div>
+              );
+            })}
+            {storyItems.slice(3, 5).map((story, index) => {
+              return (
+                <Fragment key={`story-col-${index}-${get(story, ["id"], "0")}`}>
                   <div styleName="story-card" key={`story-${index}`}>
-                    <StoryCard
-                      story={story}
-                      theme={theme}
-                      borderColor={SectionTagborderColor}
-                      centerAlign
-                      border="bottom"
-                      headerLevel="3"
-                      aspectRatio={[
-                        [16, 9],
-                        [16, 9],
-                      ]}
-                      hideAuthorImage={false}
-                      config={config}
-                    />
+                    <StoryCard story={story} theme={theme} border={borderValue} config={config}>
+                      <SectionTag story={story} borderColor={SectionTagborderColor} />
+                      <Headline story={story} premiumStoryIconConfig={config} />
+                      <AuthorWithTime
+                        config={localizationConfig}
+                        story={story}
+                        hideAuthorImage={false}
+                        collectionId={collection.id}
+                      />
+                    </StoryCard>
                   </div>
-                );
-              })}
-              {storyItems.slice(1, 2).map((story, index) => {
-                return (
+                </Fragment>
+              );
+            })}
+            {storyItems.slice(5, 6).map((story, index) => {
+              return (
+                <Fragment key={`story-col2-${index}-${get(story, ["id"], "0")}`}>
                   <div styleName="story-card" key={`story-${index}`}>
-                    <StoryCard
-                      story={story}
-                      isHorizontal
-                      theme={theme}
-                      borderColor={SectionTagborderColor}
-                      hideAuthorImage={false}
-                      headerLevel="5"
-                      config={config}
-                    />
+                    <StoryCard story={story} theme={theme} config={config}>
+                      <SectionTag story={story} borderColor={SectionTagborderColor} />
+                      <Headline story={story} premiumStoryIconConfig={config} />
+                      <AuthorWithTime
+                        config={localizationConfig}
+                        story={story}
+                        hideAuthorImage={false}
+                        collectionId={collection.id}
+                      />
+                    </StoryCard>
                   </div>
-                );
-              })}
-            </div>
-            <div styleName={`divider ${textColor}`} />
-            {slot}
+                </Fragment>
+              );
+            })}
           </div>
-        </>
-      );
-    } else
-      return (
-        <>
-          <div styleName="wrapper">
-            <div styleName="column-one">
-              {storyItems.slice(2, 3).map((story, index) => {
-                return (
-                  <div styleName="story-card" key={`story-${index}`}>
-                    <StoryCard
-                      story={story}
-                      theme={theme}
-                      borderColor={SectionTagborderColor}
-                      isHorizontalMobile
-                      headerLevel="5"
-                      hideAuthorImage={false}
-                      config={config}
-                    />
-                  </div>
-                );
-              })}
-              {storyItems.slice(3, 6).map((story, index) => {
-                return (
-                  <Fragment key={`story-col1-${get(story, ["id"], "0")}`}>
-                    <div styleName="story-card" key={`story-${index}`}>
-                      <StoryCard story={story} theme={theme} config={config}>
-                        <SectionTag story={story} borderColor={SectionTagborderColor} />
-                        <Headline story={story} premiumStoryIconConfig={config} />
-                        <AuthorWithTime config={localizationConfig} story={story} hideAuthorImage={false} />
-                      </StoryCard>
-                    </div>
-                  </Fragment>
-                );
-              })}
-            </div>
-            <div styleName="column-two">
-              {storyItems.slice(0, 1).map((story, index) => {
-                return (
-                  <div styleName="story-card" key={`story-${index}`}>
-                    <StoryCard
-                      story={story}
-                      borderColor={SectionTagborderColor}
-                      theme={theme}
-                      headerLevel="3"
-                      centerAlign
-                      aspectRatio={[
-                        [16, 9],
-                        [16, 9],
-                      ]}
-                      hideAuthorImage={false}
-                      config={config}
-                    />
-                  </div>
-                );
-              })}
-              {storyItems.slice(1, 2).map((story, index) => {
-                return (
-                  <div styleName="story-card" key={`story-${index}`}>
-                    <StoryCard
-                      story={story}
-                      isHorizontal
-                      theme={theme}
-                      borderColor={SectionTagborderColor}
-                      hideAuthorImage={false}
-                      headerLevel="5"
-                      config={config}
-                    />
-                  </div>
-                );
-              })}
-            </div>
-            {slot}
+          {withseparator && <div styleName={`divider ${textColor}`} />}
+          <div styleName="column-two">
+            {storyItems.slice(0, 1).map((story, index) => {
+              return (
+                <div styleName="story-card" key={`story-${index}`}>
+                  <StoryCard
+                    story={story}
+                    theme={theme}
+                    borderColor={SectionTagborderColor}
+                    centerAlign
+                    border={borderValue}
+                    headerLevel="3"
+                    aspectRatio={[[16, 9], [16, 9]]}
+                    hideAuthorImage={false}
+                    config={config}
+                    collectionId={collection.id}
+                  />
+                </div>
+              );
+            })}
+            {storyItems.slice(1, 2).map((story, index) => {
+              return (
+                <div styleName="story-card" key={`story-${index}`}>
+                  <StoryCard
+                    story={story}
+                    isHorizontal
+                    theme={theme}
+                    borderColor={SectionTagborderColor}
+                    hideAuthorImage={false}
+                    headerLevel="5"
+                    aspectRatio={[[16, 9], [16, 9]]}
+                    config={config}
+                    collectionId={collection.id}
+                  />
+                </div>
+              );
+            })}
           </div>
-        </>
-      );
+          {withseparator && <div styleName={`divider ${textColor}`} />}
+          {slot}
+        </div>
+      </>
+    );
   };
   return (
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="eleven-stories"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName="eleven-stories">
         <CollectionName
           collection={collection}
@@ -332,8 +299,8 @@ ElevenStories.propTypes = {
     slotConfig: PropTypes.array,
     withseparator: PropTypes.bool,
     collectionNameTemplate: PropTypes.string,
-    collectionNameBorderColor: PropTypes.string,
-  }),
+    collectionNameBorderColor: PropTypes.string
+  })
 };
 
 export default StateProvider(ElevenStories);
diff --git a/app/isomorphic/arrow/components/Rows/ElevenStories/stories.js b/app/isomorphic/arrow/components/Rows/ElevenStories/stories.js
index f3350824d..9106e4ab5 100644
--- a/app/isomorphic/arrow/components/Rows/ElevenStories/stories.js
+++ b/app/isomorphic/arrow/components/Rows/ElevenStories/stories.js
@@ -3,7 +3,7 @@ import {
   optionalSelect,
   sectionTagTemplates,
   collectionNameTemplates,
-  footerButton,
+  footerButton
 } from "../../../../storybook";
 import Readme from "./README.md";
 import { color, boolean, text } from "@storybook/addon-knobs";
@@ -30,7 +30,7 @@ const footerSlot = () => {
 // TODO: Add Ad/Widget Slot Config Option
 const slotConfigOptions = {
   Stories: [{ type: "story" }],
-  Collection: [{ type: "collection" }],
+  Collection: [{ type: "collection" }]
 };
 
 withStore(
@@ -39,9 +39,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 )
@@ -64,7 +64,7 @@ withStore(
       slotConfig: optionalSelect("Slot Config", slotConfigOptions, [{ type: "story" }]),
       footerSlotConfig: { footerSlot: footerSlot },
       showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     };
     return <ElevenStories collection={collection} config={contextConfig} />;
   });
diff --git a/app/isomorphic/arrow/components/Rows/FourColFiveStories/four-col-five-stories.m.css b/app/isomorphic/arrow/components/Rows/FourColFiveStories/four-col-five-stories.m.css
index 31a9d5619..1ac9f717b 100644
--- a/app/isomorphic/arrow/components/Rows/FourColFiveStories/four-col-five-stories.m.css
+++ b/app/isomorphic/arrow/components/Rows/FourColFiveStories/four-col-five-stories.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown, no-descending-specificity, no-duplicate-selectors */
-@value viewports: "../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 @value desktop from viewports;
 
@@ -44,7 +43,7 @@
     bottom: 10px;
     left: 10px;
     z-index: var(--z-index-1);
-    @media (--viewport-small) {
+    @media (max-width: mobile) {
       height: 24px;
       width: 24px;
     }
diff --git a/app/isomorphic/arrow/components/Rows/FourColFiveStories/index.js b/app/isomorphic/arrow/components/Rows/FourColFiveStories/index.js
index 009238f85..82ea41bf7 100644
--- a/app/isomorphic/arrow/components/Rows/FourColFiveStories/index.js
+++ b/app/isomorphic/arrow/components/Rows/FourColFiveStories/index.js
@@ -8,7 +8,7 @@ import { LoadmoreButton } from "../../Atoms/Loadmore";
 import { collectionToStories } from "@quintype/components";
 import { CollectionName } from "../../Atoms/CollectionName";
 import { StorycardContent } from "../../Molecules/StorycardContent";
-import { generateNavigateSlug, getSlot, getTextColor, navigateTo, rgbToHex } from "../../../utils/utils";
+import { generateNavigateSlug, getSlot, navigateTo, rgbToHex } from "../../../utils/utils";
 import { ProgressiveHydration } from "../../../hydration-component";
 import { LoadMoreTarget } from "../../Atoms/LoadMoreTarget";
 import "./four-col-five-stories.m.css";
@@ -27,7 +27,7 @@ const FourColFiveStories = ({
   isLoadMoreVisible,
   isLoading,
   isolatedLoadMore,
-  hideFirstCard,
+  hideFirstCard
 }) => {
   const stories = collectionToStories(collection);
   if (!stories.length) return null;
@@ -40,9 +40,9 @@ const FourColFiveStories = ({
     footerButton = "",
     borderColor = "",
     subsequentLoadCount = 4,
+    showSubheadline = false
   } = config;
   const { type = "story", component } = get(slotConfig, [0], {});
-  const textColor = getTextColor(theme);
   const sectionTagBorderColor = rgbToHex(borderColor);
   const adWidgetSlot = type === "ad" || type === "widget" ? getSlot(type, component) : null;
 
@@ -60,6 +60,8 @@ const FourColFiveStories = ({
         config={config}
         headerLevel={6}
         borderColor={sectionTagBorderColor}
+        showSubheadline={showSubheadline}
+        collectionId={collection.id}
       />
     </>
   );
@@ -80,6 +82,7 @@ const FourColFiveStories = ({
           componentName={"FourColFiveStories"}
           offset={stories.length}
           limit={subsequentLoadCount}
+          theme={theme}
         />
       );
     }
@@ -105,8 +108,7 @@ const FourColFiveStories = ({
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="four-col-five-stories"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName="four-col-five-stories">
         <CollectionName
           collection={collection}
@@ -142,12 +144,13 @@ FourColFiveStories.propTypes = {
     footerButton: PropTypes.string,
     borderColor: PropTypes.string,
     subsequentLoadCount: PropTypes.number,
+    showSubheadline: PropTypes.bool
   }),
   getMoreStories: PropTypes.func,
   isLoading: PropTypes.bool,
   hideFirstCard: PropTypes.bool,
   isLoadMoreVisible: PropTypes.bool,
-  isolatedLoadMore: PropTypes.bool,
+  isolatedLoadMore: PropTypes.bool
 };
 
 FourColFiveStories.defaultProps = {
@@ -156,7 +159,7 @@ FourColFiveStories.defaultProps = {
   isLoading: false,
   collection: {},
   config: {},
-  hideFirstCard: false,
+  hideFirstCard: false
 };
 
 export default StateProvider(FourColFiveStories);
diff --git a/app/isomorphic/arrow/components/Rows/FourColFiveStories/stories.js b/app/isomorphic/arrow/components/Rows/FourColFiveStories/stories.js
index 58b737f35..a366cad59 100644
--- a/app/isomorphic/arrow/components/Rows/FourColFiveStories/stories.js
+++ b/app/isomorphic/arrow/components/Rows/FourColFiveStories/stories.js
@@ -6,7 +6,7 @@ import {
   optionalSelect,
   sectionTagTemplates,
   collectionNameTemplates,
-  footerButton,
+  footerButton
 } from "../../../../storybook";
 import TwoColSixStories from "./index";
 import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
@@ -30,7 +30,7 @@ const configurableSlot = () => {
 
 const border = {
   default: "fullBorder",
-  noBorder: "noBorder",
+  noBorder: "noBorder"
 };
 
 withStore(
@@ -38,9 +38,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -62,6 +62,7 @@ withStore(
       showRowTitle: boolean("Row title", true),
       showReadTime: boolean("Read time", true),
       border: optionalSelect("Border settings", border),
+      showSubheadline: boolean("Sub Headline", false)
     };
     return <TwoColSixStories collection={collection} config={contextConfig} />;
   });
diff --git a/app/isomorphic/arrow/components/Rows/FourColGrid/index.js b/app/isomorphic/arrow/components/Rows/FourColGrid/index.js
index 1c61e82a7..85c8ce5ca 100644
--- a/app/isomorphic/arrow/components/Rows/FourColGrid/index.js
+++ b/app/isomorphic/arrow/components/Rows/FourColGrid/index.js
@@ -2,10 +2,10 @@ import React, { Fragment } from "react";
 import { StoryCard } from "../../Molecules/StoryCard";
 import { StorycardContent } from "../../Molecules/StorycardContent";
 import { HeroImage } from "../../Atoms/HeroImage";
-import get from "lodash/get";
+import get from "lodash.get";
 import { CollectionName } from "../../Atoms/CollectionName";
 import { LoadmoreButton } from "../../Atoms/Loadmore";
-import { generateNavigateSlug, getTextColor, navigateTo } from "../../../utils/utils";
+import { generateNavigateSlug, navigateTo } from "../../../utils/utils";
 import { collectionToStories } from "@quintype/components";
 import PropTypes from "prop-types";
 import { StateProvider } from "../../SharedContext";
@@ -32,7 +32,7 @@ const FourColGrid = ({ collection, config = {}, getMoreStories, isLoadMoreVisibl
     footerButton = "",
     customCollectionName,
     navigate = true,
-    subsequentLoadCount = 4,
+    subsequentLoadCount = 4
   } = config;
   const storyItems = collectionToStories(collection);
 
@@ -40,7 +40,6 @@ const FourColGrid = ({ collection, config = {}, getMoreStories, isLoadMoreVisibl
 
   const { footerSlot } = footerSlotConfig;
   const footerSlotComp = footerSlot ? footerSlot() : null;
-  const textColor = getTextColor(theme);
 
   const dispatch = useDispatch();
   const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
@@ -55,6 +54,7 @@ const FourColGrid = ({ collection, config = {}, getMoreStories, isLoadMoreVisibl
           componentName={"FourColGrid"}
           offset={storyItems.length}
           limit={subsequentLoadCount}
+          theme={theme}
         />
       );
     }
@@ -78,8 +78,7 @@ const FourColGrid = ({ collection, config = {}, getMoreStories, isLoadMoreVisibl
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="four-col-grid"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName="four-col-grid">
         <CollectionName
           collection={collection}
@@ -102,6 +101,7 @@ const FourColGrid = ({ collection, config = {}, getMoreStories, isLoadMoreVisibl
                       story={story}
                       isHorizontalMobile
                       config={config}
+                      collectionId={collection.id}
                     />
                   </StoryCard>
                 </div>
@@ -128,18 +128,18 @@ FourColGrid.propTypes = {
     collectionNameTemplate: PropTypes.string,
     footerButton: PropTypes.string,
     collectionNameBorderColor: PropTypes.string,
-    subsequentLoadCount: PropTypes.number,
+    subsequentLoadCount: PropTypes.number
   }),
   getMoreStories: PropTypes.func,
   isLoadMoreVisible: PropTypes.bool,
   isLoading: PropTypes.bool,
-  isolatedLoadMore: PropTypes.bool,
+  isolatedLoadMore: PropTypes.bool
 };
 
 FourColGrid.defaultProps = {
   getMoreStories: () => {},
   isLoadMoreVisible: true,
-  isLoading: false,
+  isLoading: false
 };
 
 export default StateProvider(FourColGrid);
diff --git a/app/isomorphic/arrow/components/Rows/FourColGrid/stories.js b/app/isomorphic/arrow/components/Rows/FourColGrid/stories.js
index a9f13c9ed..d2f53738f 100644
--- a/app/isomorphic/arrow/components/Rows/FourColGrid/stories.js
+++ b/app/isomorphic/arrow/components/Rows/FourColGrid/stories.js
@@ -19,12 +19,12 @@ const sectionTagDefaultvalue = "#3a9fdd";
 
 const borderTemplate = {
   default: "",
-  border: "full",
+  border: "full"
 };
 
 const footerButton = {
   SubsequentLoadCount: "SubsequentLoadCount",
-  NavigateToPage: "NavigateToPage",
+  NavigateToPage: "NavigateToPage"
 };
 
 const footerSlot = () => {
@@ -35,9 +35,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -59,7 +59,7 @@ withStore(
       footerSlotConfig: { footerSlot: footerSlot },
       showButton: boolean("Show button", true),
       showReadTime: boolean("Read time", true),
-      subsequentLoadCount: text("Subsequent Load", 8),
+      subsequentLoadCount: text("Subsequent Load", 8)
     };
 
     return <FourColGrid collection={collection} config={contextConfig} />;
diff --git a/app/isomorphic/arrow/components/Rows/FourColPortraitStories/index.js b/app/isomorphic/arrow/components/Rows/FourColPortraitStories/index.js
index 7bc62f0af..06a4e0d60 100644
--- a/app/isomorphic/arrow/components/Rows/FourColPortraitStories/index.js
+++ b/app/isomorphic/arrow/components/Rows/FourColPortraitStories/index.js
@@ -7,7 +7,7 @@ import { collectionToStories } from "@quintype/components";
 
 import { CollectionName } from "../../Atoms/CollectionName";
 import { LoadmoreButton } from "../../Atoms/Loadmore";
-import { generateNavigateSlug, getTextColor, navigateTo } from "../../../utils/utils";
+import { generateNavigateSlug, navigateTo } from "../../../utils/utils";
 import { StateProvider } from "../../SharedContext";
 import { ProgressiveHydration } from "../../../hydration-component";
 import { LoadMoreTarget } from "../../Atoms/LoadMoreTarget";
@@ -28,7 +28,7 @@ const FourColPortraitStories = ({
   getMoreStories,
   isLoadMoreVisible,
   isLoading,
-  isolatedLoadMore,
+  isolatedLoadMore
 }) => {
   const storyItems = collectionToStories(collection);
 
@@ -44,12 +44,11 @@ const FourColPortraitStories = ({
     footerButton = "",
     customCollectionName,
     navigate = true,
-    subsequentLoadCount = 4,
+    subsequentLoadCount = 4
   } = config;
 
   const { footerSlot } = footerSlotConfig;
   const footerSlotComp = typeof footerSlot === "function" ? footerSlot() : null;
-  const textColor = getTextColor(theme);
 
   const dispatch = useDispatch();
   const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
@@ -64,6 +63,7 @@ const FourColPortraitStories = ({
           componentName={"FourColPortraitStories"}
           offset={storyItems.length}
           limit={subsequentLoadCount}
+          theme={theme}
         />
       );
     }
@@ -87,8 +87,7 @@ const FourColPortraitStories = ({
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="four-col-portrait-stories"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName="four-col-portrait">
         <CollectionName
           collection={collection}
@@ -107,6 +106,7 @@ const FourColPortraitStories = ({
                 config={Object.assign({ showSection: false, showAuthor: false, showReadTime: false }, config)}
                 borderColor={borderColor}
                 key={`story-card-${index}`}
+                collectionId={collection.id}
               />
             );
           })}
@@ -129,18 +129,18 @@ FourColPortraitStories.propTypes = {
     collectionNameTemplate: PropTypes.string,
     footerButton: PropTypes.string,
     collectionNameBorderColor: PropTypes.string,
-    subsequentLoadCount: PropTypes.number,
+    subsequentLoadCount: PropTypes.number
   }),
   getMoreStories: PropTypes.func,
   isLoadMoreVisible: PropTypes.bool,
   isLoading: PropTypes.bool,
-  isolatedLoadMore: PropTypes.bool,
+  isolatedLoadMore: PropTypes.bool
 };
 
 FourColPortraitStories.defaultProps = {
   getMoreStories: () => {},
   isLoadMoreVisible: true,
-  isLoading: false,
+  isLoading: false
 };
 
 export default StateProvider(FourColPortraitStories);
diff --git a/app/isomorphic/arrow/components/Rows/FourColPortraitStories/stories.js b/app/isomorphic/arrow/components/Rows/FourColPortraitStories/stories.js
index 28b500cd2..5329ca734 100644
--- a/app/isomorphic/arrow/components/Rows/FourColPortraitStories/stories.js
+++ b/app/isomorphic/arrow/components/Rows/FourColPortraitStories/stories.js
@@ -19,12 +19,12 @@ const sectionTagDefaultvalue = "#3a9fdd";
 
 const borderTemplate = {
   default: "",
-  border: "full",
+  border: "full"
 };
 
 const footerButton = {
   SubsequentLoadCount: "SubsequentLoadCount",
-  NavigateToPage: "NavigateToPage",
+  NavigateToPage: "NavigateToPage"
 };
 
 const footerSlot = () => {
@@ -35,9 +35,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -59,7 +59,7 @@ withStore(
       footerSlotConfig: { footerSlot: footerSlot },
       showButton: boolean("Show button", true),
       showReadTime: boolean("Read time", false),
-      subsequentLoadCount: text("Subsequent Load", 8),
+      subsequentLoadCount: text("Subsequent Load", 8)
     };
 
     return <FourColPortraitStories collection={collection} config={contextConfig} />;
diff --git a/app/isomorphic/arrow/components/Rows/FourColSixteenStories/four-col-sixteen-stories.m.css b/app/isomorphic/arrow/components/Rows/FourColSixteenStories/four-col-sixteen-stories.m.css
index 772dea752..580ba5d2f 100644
--- a/app/isomorphic/arrow/components/Rows/FourColSixteenStories/four-col-sixteen-stories.m.css
+++ b/app/isomorphic/arrow/components/Rows/FourColSixteenStories/four-col-sixteen-stories.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 @value desktop from viewports;
 
@@ -113,7 +112,7 @@
     bottom: 10px;
     left: 10px;
     z-index: var(--z-index-1);
-    @media (--viewport-small) {
+    @media (max-width: mobile) {
       height: 24px;
       width: 24px;
     }
diff --git a/app/isomorphic/arrow/components/Rows/FourColSixteenStories/index.js b/app/isomorphic/arrow/components/Rows/FourColSixteenStories/index.js
index 113ad0c6d..c4c4aac7b 100644
--- a/app/isomorphic/arrow/components/Rows/FourColSixteenStories/index.js
+++ b/app/isomorphic/arrow/components/Rows/FourColSixteenStories/index.js
@@ -6,7 +6,7 @@ import {
   generateNavigateSlug,
   navigateTo,
   rgbToHex,
-  getNumberOfStoriesToShow,
+  getNumberOfStoriesToShow
 } from "../../../utils/utils";
 import { collectionToStories } from "@quintype/components";
 import { StateProvider } from "../../SharedContext";
@@ -20,7 +20,7 @@ import { SectionTag } from "../../Atoms/SectionTag/index";
 import { LoadmoreButton } from "../../Atoms/Loadmore";
 import "./four-col-sixteen-stories.m.css";
 
-const getChildCollectionData = (collection, config, index) => {
+const getChildCollectionData = (collection, config, index, parentCollectionId) => {
   const stories = collectionToStories(collection);
   if (!stories.length) return null;
 
@@ -33,7 +33,7 @@ const getChildCollectionData = (collection, config, index) => {
     footerButton = "",
     localizationConfig = {},
     collectionNameBorderColor = "",
-    numberOfStoriesToShowInEachColumn = 4,
+    numberOfStoriesToShowInEachColumn = 4
   } = config;
   const dispatch = useDispatch();
   const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
@@ -59,26 +59,28 @@ const getChildCollectionData = (collection, config, index) => {
             border={withSeparator ? "bottom" : ""}
             theme={theme}
             config={config}
-            headerLevel="6"
-          >
-            <HeroImage
-              config={config}
-              story={firstStory}
-              aspectRatio={[
-                [16, 9],
-                [16, 9],
-              ]}
-            />
+            headerLevel="6">
+            <HeroImage config={config} story={firstStory} aspectRatio={[[16, 9], [16, 9]]} />
             <SectionTag story={firstStory} borderColor={SectionTagBorderColor} />
             <Headline story={firstStory} premiumStoryIconConfig={config} />
-            <AuthorWithTime config={localizationConfig} story={firstStory} hideAuthorImage={true} />
+            <AuthorWithTime
+              config={localizationConfig}
+              story={firstStory}
+              hideAuthorImage={true}
+              collectionId={`${parentCollectionId}-${collection.id}`}
+            />
           </StoryCard>
           {otherStories.slice(0, showNumberOfStoriesInEachColumn).map((story, index) => {
             return (
               <StoryCard key={index} story={story} theme={theme} border={withSeparator ? "bottom" : ""} config={config}>
                 <SectionTag story={story} borderColor={SectionTagBorderColor} />
                 <Headline story={story} premiumStoryIconConfig={config} />
-                <AuthorWithTime config={localizationConfig} story={story} hideAuthorImage={true} />
+                <AuthorWithTime
+                  config={localizationConfig}
+                  story={story}
+                  hideAuthorImage={true}
+                  collectionId={`${parentCollectionId}-${collection.id}`}
+                />
               </StoryCard>
             );
           })}
@@ -107,9 +109,10 @@ const FourColSixteenStories = ({ collection, config = {} }) => {
       className="full-width-with-padding arrow-component arr--four-col-sixteen-stories"
       data-test-id="four-col-sixteen-stories"
       styleName={`componentWrapper ${textColor}`}
-      style={{ backgroundColor: theme, color: textColor }}
-    >
-      {childCollections.slice(0, 4).map((collection, index) => getChildCollectionData(collection, config, index))}
+      style={{ backgroundColor: theme || "initial" }}>
+      {childCollections
+        .slice(0, 4)
+        .map((childCollection, index) => getChildCollectionData(childCollection, config, index, collection.id))}
     </div>
   );
 };
@@ -117,8 +120,8 @@ const FourColSixteenStories = ({ collection, config = {} }) => {
 FourColSixteenStories.propTypes = {
   collection: PropTypes.object.isRequired,
   config: PropTypes.shape({
-    theme: PropTypes.string,
-  }),
+    theme: PropTypes.string
+  })
 };
 
 export default StateProvider(FourColSixteenStories);
diff --git a/app/isomorphic/arrow/components/Rows/FourColSixteenStories/stories.js b/app/isomorphic/arrow/components/Rows/FourColSixteenStories/stories.js
index 872c3a843..03ac4f88c 100644
--- a/app/isomorphic/arrow/components/Rows/FourColSixteenStories/stories.js
+++ b/app/isomorphic/arrow/components/Rows/FourColSixteenStories/stories.js
@@ -8,7 +8,7 @@ import {
   optionalSelect,
   sectionTagTemplates,
   collectionNameTemplates,
-  footerButton,
+  footerButton
 } from "../../../../storybook";
 
 const collection = generateCollections(4);
@@ -18,9 +18,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -41,7 +41,7 @@ withStore(
       buttonText: text("Footer text", "Read More"),
       showButton: boolean("Show button", true),
       showReadTime: boolean("Read time", true),
-      numberOfStoriesToShowInEachColumn: number("Number of stories to show in each column", 4),
+      numberOfStoriesToShowInEachColumn: number("Number of stories to show in each column", 4)
     };
     return <FourColSixteenStories collection={collection} config={contextConfig} />;
   });
diff --git a/app/isomorphic/arrow/components/Rows/FourColTwelveStory/index.js b/app/isomorphic/arrow/components/Rows/FourColTwelveStory/index.js
index bed6edac2..9418db5bf 100644
--- a/app/isomorphic/arrow/components/Rows/FourColTwelveStory/index.js
+++ b/app/isomorphic/arrow/components/Rows/FourColTwelveStory/index.js
@@ -1,13 +1,13 @@
 import React from "react";
 import PropTypes from "prop-types";
-import get from "lodash/get";
+import get from "lodash.get";
 import { collectionToStories, Link } from "@quintype/components";
 import { HeroImage } from "../../Atoms/HeroImage";
 import { SectionTag } from "../../Atoms/SectionTag";
 import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
 import { CollectionName } from "../../Atoms/CollectionName";
 import { Headline } from "../../Atoms/Headline";
-import { getTextColor, getSlug } from "../../../utils/utils";
+import { getSlug } from "../../../utils/utils";
 import { StateProvider } from "../../SharedContext";
 import { StoryCard } from "../../Molecules/StoryCard/index";
 import "./four-col-twelve-story.m.css";
@@ -19,9 +19,8 @@ function OtherNewsLinkComp({ slug, textColor, Icon, text }) {
         <div
           styleName="other-news-text"
           style={{
-            color: textColor,
-          }}
-        >
+            color: textColor
+          }}>
           {text}
         </div>
         <div styleName="arrow-icon">
@@ -62,33 +61,21 @@ const SingleCol3Story = ({ collection, border, collectionNameTemplate, otherText
       </div>
       <div className="first-card">
         <StoryCard story={firstStory} border={border} theme={theme} config={config}>
-          <HeroImage
-            story={firstStory}
-            aspectRatio={[
-              [16, 9],
-              [16, 9],
-            ]}
-          />
+          <HeroImage story={firstStory} aspectRatio={[[16, 9], [16, 9]]} />
           <SectionTag story={firstStory} />
           <Headline story={firstStory} headerLevel="4" premiumStoryIconConfig={config} />
-          <AuthorWithTime config={localizationConfig} story={firstStory} />
+          <AuthorWithTime config={localizationConfig} story={firstStory} collectionId={collection.id} />
         </StoryCard>
       </div>
 
       <div className="second-card">
         {rest.slice(0, 2).map((story, index) => {
           return (
-            <StoryCard key={index} story={story} isHorizontal theme={theme} border={border}>
-              <HeroImage
-                story={story}
-                aspectRatio={[
-                  [4, 3],
-                  [4, 3],
-                ]}
-              />
+            <StoryCard config={config} key={index} story={story} isHorizontal theme={theme} border={border}>
+              <HeroImage story={story} aspectRatio={[[16, 9], [16, 9]]} />
               <div styleName="small-card-content-container" className="small-card-container">
                 <Headline story={story} premiumStoryIconConfig={config} />
-                <AuthorWithTime config={localizationConfig} story={story} />
+                <AuthorWithTime config={localizationConfig} story={story} collectionId={collection.id} />
               </div>
             </StoryCard>
           );
@@ -115,14 +102,11 @@ const FourColTwelveStory = ({ collection = {}, publisherConfig = {}, config = {}
   // if number of collection is less than 4 return null
   if (getFilteredCollection.length < 4) return null;
 
-  const textColor = getTextColor(theme);
-
   return (
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="four-col-twelve-stories"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName="columns-container">
         {getFilteredCollection.slice(0, 4).map((collection, index) => {
           const slugName = getSlug(collection, publisherConfig);
@@ -135,6 +119,7 @@ const FourColTwelveStory = ({ collection = {}, publisherConfig = {}, config = {}
               slug={slugName}
               otherTextData={otherTextData}
               theme={theme}
+              config={config}
             />
           );
         })}
@@ -150,7 +135,7 @@ FourColTwelveStory.propTypes = {
   otherTextData: PropTypes.shape({
     text: PropTypes.string,
     Icon: PropTypes.func,
-    textColor: PropTypes.string,
+    textColor: PropTypes.string
   }),
   config: PropTypes.shape({
     theme: PropTypes.string,
@@ -160,8 +145,8 @@ FourColTwelveStory.propTypes = {
     showAuthor: PropTypes.bool,
     showTime: PropTypes.bool,
     showRowTitle: PropTypes.bool,
-    collectionNameTemplate: PropTypes.string,
-  }),
+    collectionNameTemplate: PropTypes.string
+  })
 };
 
 SingleCol3Story.propTypes = {
@@ -175,16 +160,16 @@ SingleCol3Story.propTypes = {
     Icon: PropTypes.func,
     textColor: PropTypes.string,
     // can be either 'top' or 'bottom'
-    contentPosition: PropTypes.string,
+    contentPosition: PropTypes.string
   }),
-  config: PropTypes.object,
+  config: PropTypes.object
 };
 
 OtherNewsLinkComp.propTypes = {
   slug: PropTypes.string,
   textColor: PropTypes.string,
   Icon: PropTypes.func,
-  text: PropTypes.string,
+  text: PropTypes.string
 };
 
 export default StateProvider(FourColTwelveStory);
diff --git a/app/isomorphic/arrow/components/Rows/FourColTwelveStory/stories.js b/app/isomorphic/arrow/components/Rows/FourColTwelveStory/stories.js
index 0d4758458..ab5bc22e4 100644
--- a/app/isomorphic/arrow/components/Rows/FourColTwelveStory/stories.js
+++ b/app/isomorphic/arrow/components/Rows/FourColTwelveStory/stories.js
@@ -15,12 +15,12 @@ const defaultvalue = "#ffffff";
 
 const borderOptions = {
   "No Value": "",
-  bottom: "bottom",
+  bottom: "bottom"
 };
 
 const otherTextPositionOptions = {
   top: "top",
-  bottom: "bottom",
+  bottom: "bottom"
 };
 
 const footerSlot = () => {
@@ -31,7 +31,7 @@ const IconComp = (_) => (
   <img
     src={Carat}
     style={{
-      width: "18px",
+      width: "18px"
     }}
     alt="caret"
   />
@@ -55,13 +55,13 @@ withStore(
             collection: {
               slug: "health",
               name: "Health",
-              id: 15603,
+              id: 15603
             },
-            data: null,
-          },
-        ],
-      },
-    },
+            data: null
+          }
+        ]
+      }
+    }
   },
   Readme
 )
@@ -71,7 +71,7 @@ withStore(
       text: "hello",
       textColor: color(" text color", "#345678"),
       contentPosition: optionalSelect("Other text Position", otherTextPositionOptions),
-      Icon: IconComp,
+      Icon: IconComp
     };
 
     const publisherConfig = {
@@ -87,11 +87,11 @@ withStore(
           collection: {
             slug: "health",
             name: "Health",
-            id: 15603,
+            id: 15603
           },
-          data: null,
-        },
-      ],
+          data: null
+        }
+      ]
     };
 
     const contextConfig = {
@@ -104,7 +104,7 @@ withStore(
       showRowTitle: boolean("Row title", true),
       collectionNameTemplate: optionalSelect("Collection row Templates", collectionNameTemplates),
       showSubheadline: boolean("Subheadline", true),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     };
     return (
       <FourColTwelveStory
diff --git a/app/isomorphic/arrow/components/Rows/FourStorySlider/index.js b/app/isomorphic/arrow/components/Rows/FourStorySlider/index.js
index df58df199..8aa6118a9 100644
--- a/app/isomorphic/arrow/components/Rows/FourStorySlider/index.js
+++ b/app/isomorphic/arrow/components/Rows/FourStorySlider/index.js
@@ -5,7 +5,7 @@ import { collectionToStories } from "@quintype/components";
 
 import { CollectionName } from "../../Atoms/CollectionName";
 import { StateProvider } from "../../SharedContext";
-import { getTextColor, getNumberOfStoriesToShow, navigateTo, generateNavigateSlug } from "../../../utils/utils";
+import { getNumberOfStoriesToShow, navigateTo, generateNavigateSlug } from "../../../utils/utils";
 import { StoryCard } from "../../Molecules/StoryCard";
 import { HeroImage } from "../../Atoms/HeroImage";
 import { StorycardContent } from "../../Molecules/StorycardContent";
@@ -27,7 +27,7 @@ const FourStorySlider = ({ collection, config = {} }) => {
     footerSlotConfig = {},
     navigationArrows = true,
     slideIndicator = "none",
-    isInfinite = false,
+    isInfinite = false
   } = config;
   const { footerSlot } = footerSlotConfig;
   const items = collectionToStories(collection);
@@ -41,7 +41,6 @@ const FourStorySlider = ({ collection, config = {} }) => {
   const [perView, setPerView] = useState(1);
 
   const showNumberOfStoriesToShow = getNumberOfStoriesToShow(numberOfStoriesToShow);
-  const textColor = getTextColor(theme);
   const footerSlotComp = footerSlot ? footerSlot() : null;
 
   useEffect(() => {
@@ -66,8 +65,7 @@ const FourStorySlider = ({ collection, config = {} }) => {
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="four-story-slider"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName="four-story-slider-wrapper">
         <CollectionName
           collection={collection}
@@ -79,8 +77,7 @@ const FourStorySlider = ({ collection, config = {} }) => {
             isArrow={navigationArrows}
             perView={perView}
             slideIndicator={slideIndicator}
-            isInfinite={isInfinite}
-          >
+            isInfinite={isInfinite}>
             {getItems()}
           </ScrollSnap>
         ) : (
@@ -116,14 +113,14 @@ FourStorySlider.propTypes = {
     // speed of the slider(ms)
     numberOfStoriesToShow: PropTypes.number,
     // no of slides in slider
-    collectionNameBorderColor: PropTypes.string,
-  }),
+    collectionNameBorderColor: PropTypes.string
+  })
 };
 
 FourStorySlider.defaultProps = {
   theme: "#ffffff",
   slotConfig: "story",
-  border: "",
+  border: ""
 };
 
 export default StateProvider(FourStorySlider);
diff --git a/app/isomorphic/arrow/components/Rows/FourStorySlider/stories.js b/app/isomorphic/arrow/components/Rows/FourStorySlider/stories.js
index 3997350ef..3f0444a6a 100644
--- a/app/isomorphic/arrow/components/Rows/FourStorySlider/stories.js
+++ b/app/isomorphic/arrow/components/Rows/FourStorySlider/stories.js
@@ -20,15 +20,15 @@ const sectionTagDefaultvalue = "#3a9fdd";
 const navigationStyle = {
   defaultvalue: "none",
   dots: "dots",
-  dashes: "dashes",
+  dashes: "dashes"
 };
 const borderTemplate = {
   default: " ",
-  border: "full",
+  border: "full"
 };
 const footerButton = {
   NavigateToPage: "NavigateToPage",
-  SubsequentLoadCount: "SubsequentLoadCount",
+  SubsequentLoadCount: "SubsequentLoadCount"
 };
 const footerSlot = () => {
   return <AdPlaceholder />;
@@ -41,10 +41,10 @@ withStore(
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
         language: {
-          direction: "ltr",
-        },
-      },
-    },
+          direction: "ltr"
+        }
+      }
+    }
   },
   Readme
 )
@@ -69,7 +69,7 @@ withStore(
       slideIndicator: optionalSelect("Slide Indicator", navigationStyle),
       footerSlotConfig: { footerSlot: footerSlot },
       showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     };
 
     return <FourStorySlider collection={collection} config={contextConfig} />;
@@ -82,10 +82,10 @@ withStore(
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
         language: {
-          direction: "rtl",
-        },
-      },
-    },
+          direction: "rtl"
+        }
+      }
+    }
   },
   Readme
 )
@@ -110,7 +110,7 @@ withStore(
       slideIndicator: optionalSelect("Slide Indicator", navigationStyle),
       footerSlotConfig: { footerSlot: footerSlot },
       showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     };
 
     return <FourStorySlider collection={collection} config={contextConfig} />;
diff --git a/app/isomorphic/arrow/components/Rows/FourStorySliderPortrait/four-story-slider-portrait.m.css b/app/isomorphic/arrow/components/Rows/FourStorySliderPortrait/four-story-slider-portrait.m.css
index feee24178..4d1a229c8 100644
--- a/app/isomorphic/arrow/components/Rows/FourStorySliderPortrait/four-story-slider-portrait.m.css
+++ b/app/isomorphic/arrow/components/Rows/FourStorySliderPortrait/four-story-slider-portrait.m.css
@@ -1,8 +1,8 @@
-/*eslint-disable no-descending-specificity, scss/operator-no-unspaced */
 @custom-media --viewport-medium (width >=768px);
 @custom-media --viewport-desktop (width >=992px);
 @custom-media --viewport-mobile (width >=400px);
 
+/* stylelint-disable no-descending-specificity */
 .four-story-slider-portrait-wrapper {
   position: relative;
   margin: 0 0 var(--arrow-spacing-m) var(--arrow-spacing-s);
diff --git a/app/isomorphic/arrow/components/Rows/FourStorySliderPortrait/index.js b/app/isomorphic/arrow/components/Rows/FourStorySliderPortrait/index.js
index 6f6d25a48..3dd97b874 100644
--- a/app/isomorphic/arrow/components/Rows/FourStorySliderPortrait/index.js
+++ b/app/isomorphic/arrow/components/Rows/FourStorySliderPortrait/index.js
@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import React, { useState, useEffect } from "react";
 
 import { CollectionName } from "../../Atoms/CollectionName";
-import { getTextColor, getNumberOfStoriesToShow, navigateTo, generateNavigateSlug } from "../../../utils/utils";
+import { getNumberOfStoriesToShow, navigateTo, generateNavigateSlug } from "../../../utils/utils";
 import { HeroImage } from "../../Atoms/HeroImage";
 import { LoadmoreButton } from "../../Atoms/Loadmore";
 import { ScrollSnap } from "../../Atoms/ScrollSnap";
@@ -16,6 +16,21 @@ import { StorycardContent } from "../../Molecules/StorycardContent";
 import "./four-story-slider-portrait.m.css";
 
 const FourStorySliderPortrait = ({ collection, config = {} }) => {
+  const [perView, setPerView] = useState(1);
+
+  useEffect(() => {
+    const deviceWidth = get(global, ["innerWidth"], 480);
+    if (deviceWidth > 992) setPerView(4);
+    else if (deviceWidth > 764) setPerView(3);
+    else setPerView(1);
+  }, []);
+
+  const items = collectionToStories(collection);
+  const dispatch = useDispatch();
+  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+  if (items.length < 1) {
+    return null;
+  }
   const {
     collectionNameBorderColor = "",
     borderColor = "",
@@ -27,30 +42,14 @@ const FourStorySliderPortrait = ({ collection, config = {} }) => {
     footerSlotConfig = {},
     navigationArrows = true,
     slideIndicator = "none",
-    isInfinite = false,
+    isInfinite = false
   } = config;
   const { footerSlot } = footerSlotConfig;
-  const items = collectionToStories(collection);
-  if (items.length < 1) {
-    return null;
-  }
-
-  const dispatch = useDispatch();
-  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
   const url = generateNavigateSlug(collection, qtConfig);
-  const [perView, setPerView] = useState(1);
 
   const showNumberOfStoriesToShow = getNumberOfStoriesToShow(numberOfStoriesToShow);
-  const textColor = getTextColor(theme);
   const footerSlotComp = footerSlot ? footerSlot() : null;
 
-  useEffect(() => {
-    const deviceWidth = get(global, ["innerWidth"], 480);
-    if (deviceWidth > 992) setPerView(4);
-    else if (deviceWidth > 764) setPerView(3);
-    else setPerView(1);
-  }, []);
-
   const getItems = () => {
     return items.slice(0, showNumberOfStoriesToShow).map((story, index) => {
       return (
@@ -66,8 +65,7 @@ const FourStorySliderPortrait = ({ collection, config = {} }) => {
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="four-story-slider-portrait"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName="four-story-slider-portrait-wrapper">
         <CollectionName
           collection={collection}
@@ -79,8 +77,7 @@ const FourStorySliderPortrait = ({ collection, config = {} }) => {
             isArrow={navigationArrows}
             perView={perView}
             slideIndicator={slideIndicator}
-            isInfinite={isInfinite}
-          >
+            isInfinite={isInfinite}>
             {getItems()}
           </ScrollSnap>
         ) : (
@@ -118,14 +115,14 @@ FourStorySliderPortrait.propTypes = {
     // speed of the slider(ms)
     numberOfStoriesToShow: PropTypes.number,
     // no of slides in slider
-    collectionNameBorderColor: PropTypes.string,
-  }),
+    collectionNameBorderColor: PropTypes.string
+  })
 };
 
 FourStorySliderPortrait.defaultProps = {
   theme: "#ffffff",
   slotConfig: "story",
-  border: "",
+  border: ""
 };
 
 export default StateProvider(FourStorySliderPortrait);
diff --git a/app/isomorphic/arrow/components/Rows/FourStorySliderPortrait/stories.js b/app/isomorphic/arrow/components/Rows/FourStorySliderPortrait/stories.js
index 304548ecf..82cd04774 100644
--- a/app/isomorphic/arrow/components/Rows/FourStorySliderPortrait/stories.js
+++ b/app/isomorphic/arrow/components/Rows/FourStorySliderPortrait/stories.js
@@ -20,15 +20,15 @@ const sectionTagDefaultvalue = "#3a9fdd";
 const navigationStyle = {
   defaultvalue: "none",
   dots: "dots",
-  dashes: "dashes",
+  dashes: "dashes"
 };
 const borderTemplate = {
   default: " ",
-  border: "full",
+  border: "full"
 };
 const footerButton = {
   NavigateToPage: "NavigateToPage",
-  SubsequentLoadCount: "SubsequentLoadCount",
+  SubsequentLoadCount: "SubsequentLoadCount"
 };
 const footerSlot = () => {
   return <AdPlaceholder />;
@@ -41,10 +41,10 @@ withStore(
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
         language: {
-          direction: "ltr",
-        },
-      },
-    },
+          direction: "ltr"
+        }
+      }
+    }
   },
   Readme
 )
@@ -69,7 +69,7 @@ withStore(
       slideIndicator: optionalSelect("Slide Indicator", navigationStyle),
       footerSlotConfig: { footerSlot: footerSlot },
       showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     };
 
     return <FourStorySliderPortrait collection={collection} config={contextConfig} />;
@@ -82,10 +82,10 @@ withStore(
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
         language: {
-          direction: "rtl",
-        },
-      },
-    },
+          direction: "rtl"
+        }
+      }
+    }
   },
   Readme
 )
@@ -110,7 +110,7 @@ withStore(
       slideIndicator: optionalSelect("Slide Indicator", navigationStyle),
       footerSlotConfig: { footerSlot: footerSlot },
       showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     };
 
     return <FourStorySliderPortrait collection={collection} config={contextConfig} />;
diff --git a/app/isomorphic/arrow/components/Rows/FourTabbedBigStorySlider/four-tabbed-big-story-slider.m.css b/app/isomorphic/arrow/components/Rows/FourTabbedBigStorySlider/four-tabbed-big-story-slider.m.css
index e1e57c158..88541dfd8 100644
--- a/app/isomorphic/arrow/components/Rows/FourTabbedBigStorySlider/four-tabbed-big-story-slider.m.css
+++ b/app/isomorphic/arrow/components/Rows/FourTabbedBigStorySlider/four-tabbed-big-story-slider.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown, no-descending-specificity */
-@value viewports: "../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 @value desktop from viewports;
 
@@ -39,7 +38,7 @@
       bottom: 10px;
       left: 10px;
       z-index: var(--z-index-1);
-      @media (--viewport-mobile) {
+      @media (max-width: mobile) {
         height: 24px;
         width: 24px;
       }
diff --git a/app/isomorphic/arrow/components/Rows/FourTabbedBigStorySlider/index.js b/app/isomorphic/arrow/components/Rows/FourTabbedBigStorySlider/index.js
index b38faa477..64a6e335a 100644
--- a/app/isomorphic/arrow/components/Rows/FourTabbedBigStorySlider/index.js
+++ b/app/isomorphic/arrow/components/Rows/FourTabbedBigStorySlider/index.js
@@ -11,7 +11,7 @@ import {
   getTextColor,
   isExternalStory,
   navigateTo,
-  rgbToHex,
+  rgbToHex
 } from "../../../utils/utils";
 import { CollectionName } from "../../Atoms/CollectionName";
 import { LoadmoreButton } from "../../Atoms/Loadmore";
@@ -38,7 +38,7 @@ export const FourTabbedBigStorySlider = ({ collection, config = {} }) => {
     footerButton = "",
     borderColor = "",
     showSubheadline = true,
-    showButton = true,
+    showButton = true
   } = config;
   const { footerSlot } = footerSlotConfig;
   const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
@@ -68,8 +68,7 @@ export const FourTabbedBigStorySlider = ({ collection, config = {} }) => {
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="two-col-three-stories"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName={`four-tabbed-big-story-slider ${getCustomStyleName}`}>
         <CollectionName
           collection={collection}
@@ -97,8 +96,7 @@ export const FourTabbedBigStorySlider = ({ collection, config = {} }) => {
               )}`}
               onClick={() => updateActiveTab(story, index)}
               key={story.id}
-              className={`story-headline-container ${getActiveIndexStylename(index === active)}`}
-            >
+              className={`story-headline-container ${getActiveIndexStylename(index === active)}`}>
               <Headline story={story} premiumStoryIconConfig={config} isLink={false} />
             </div>
           ))}
@@ -117,19 +115,18 @@ export const FourTabbedBigStorySlider = ({ collection, config = {} }) => {
 };
 
 const DefaultStoryCardContent = ({ story, config = {}, borderColor, showSubheadline }) => {
-  const SectionTagborderColor = rgbToHex(borderColor);
+  const SectionTagBorderColor = rgbToHex(borderColor);
   const { localizationConfig = {} } = config;
   return (
     <div>
-      <SectionTag story={story} borderColor={SectionTagborderColor} isLightTheme />
+      <SectionTag story={story} borderColor={SectionTagBorderColor} isLightTheme />
       <Headline story={story} premiumStoryIconConfig={config} />
       <AuthorWithTime config={localizationConfig} story={story} isLightTheme />
       {showSubheadline && (
         <Link
           href={getStoryUrl(story, `/${story.slug}`)}
           externalLink={isExternalStory(story)}
-          aria-label="sub-headline"
-        >
+          aria-label="sub-headline">
           <Subheadline story={story} />
         </Link>
       )}
@@ -149,13 +146,13 @@ FourTabbedBigStorySlider.propTypes = {
     border: PropTypes.string,
     footerButton: PropTypes.string,
     collectionNameTemplate: PropTypes.string,
-    collectionNameBorderColor: PropTypes.string,
-  }),
+    collectionNameBorderColor: PropTypes.string
+  })
 };
 
 DefaultStoryCardContent.propTypes = {
   story: PropTypes.object.isRequired,
   config: PropTypes.object,
   borderColor: PropTypes.string,
-  showSubheadline: PropTypes.bool,
+  showSubheadline: PropTypes.bool
 };
diff --git a/app/isomorphic/arrow/components/Rows/FourTabbedBigStorySlider/stories.js b/app/isomorphic/arrow/components/Rows/FourTabbedBigStorySlider/stories.js
index 884c71f2e..b9b8ed3f7 100644
--- a/app/isomorphic/arrow/components/Rows/FourTabbedBigStorySlider/stories.js
+++ b/app/isomorphic/arrow/components/Rows/FourTabbedBigStorySlider/stories.js
@@ -5,7 +5,7 @@ import {
   optionalSelect,
   sectionTagTemplates,
   collectionNameTemplates,
-  footerButton,
+  footerButton
 } from "../../../../storybook";
 import FourTabbedBigStorySlider from "./index";
 import Readme from "./README.md";
@@ -33,9 +33,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -56,7 +56,7 @@ withStore(
       footerSlotConfig: { footerSlot: footerSlot },
       showButton: boolean("Show button", true),
       showReadTime: boolean("Read time", true),
-      showSubheadline: boolean("Show subheadline", true),
+      showSubheadline: boolean("Show subheadline", true)
     };
 
     return <FourTabbedBigStorySlider collection={collection} config={contextConfig} />;
diff --git a/app/isomorphic/arrow/components/Rows/FullScreenSlider/full-screen-slider.m.css b/app/isomorphic/arrow/components/Rows/FullScreenSlider/full-screen-slider.m.css
index 2db34304b..d0616bb98 100644
--- a/app/isomorphic/arrow/components/Rows/FullScreenSlider/full-screen-slider.m.css
+++ b/app/isomorphic/arrow/components/Rows/FullScreenSlider/full-screen-slider.m.css
@@ -15,12 +15,13 @@
 }
 
 .full-screen-slider-wrapper:global(.arrow-component.full-width-with-padding.full-width) {
-  padding: unset;
+  padding: var(--arrow-spacing-m) 0 0 0;
 }
 
 .container-width,
-.container-width :global(.arr--collection-name) {
-  max-width: 1140px;
+.container-width :global(.arr--collection-name),
+.full-width :global(.arr--collection-name) {
+  max-width: 1172px;
   margin: 0 auto;
 }
 .wrapper {
@@ -39,7 +40,9 @@
 .full-screen-slider :global(.author-name),
 .full-screen-slider :global(.arr-separator),
 .full-screen-slider :global(.arr-author-prefix),
-.full-screen-slider :global(.arr--read-time) {
+.full-screen-slider :global(.arr--read-time),
+.full-screen-slider :global(.arr--dot),
+.full-screen-slider :global(.arr--divider) {
   @media (--viewport-medium) {
     color: var(--arrow-c-light);
     fill: var(--arrow-c-light);
diff --git a/app/isomorphic/arrow/components/Rows/FullScreenSlider/index.js b/app/isomorphic/arrow/components/Rows/FullScreenSlider/index.js
index 996d56d77..2adb294fe 100644
--- a/app/isomorphic/arrow/components/Rows/FullScreenSlider/index.js
+++ b/app/isomorphic/arrow/components/Rows/FullScreenSlider/index.js
@@ -7,7 +7,7 @@ import { LoadmoreButton } from "../../Atoms/Loadmore";
 import { StoryCard } from "../../Molecules/StoryCard";
 import { collectionToStories } from "@quintype/components";
 import PropTypes from "prop-types";
-import { getTextColor, getNumberOfStoriesToShow, generateNavigateSlug, navigateTo } from "../../../utils/utils";
+import { getNumberOfStoriesToShow, generateNavigateSlug, navigateTo } from "../../../utils/utils";
 import { StateProvider } from "../../SharedContext";
 import { ScrollSnap } from "../../Atoms/ScrollSnap";
 
@@ -27,10 +27,7 @@ const FullScreenSlider = ({ collection = {}, config = {} }) => {
     navigationArrows = true,
     slideIndicator = "none",
     isInfinite = false,
-    aspectRatio = [
-      [16, 9],
-      [4, 2],
-    ],
+    aspectRatio = [[16, 9], [4, 2]]
   } = config;
   const { footerSlot } = footerSlotConfig;
   const items = collectionToStories(collection);
@@ -46,28 +43,23 @@ const FullScreenSlider = ({ collection = {}, config = {} }) => {
   const url = generateNavigateSlug(collection, qtConfig);
 
   const showNumberOfStoriesToShow = getNumberOfStoriesToShow(numberOfStoriesToShow);
-  const textColor = getTextColor(theme);
   const footerSlotComp = footerSlot ? footerSlot() : null;
-  const imageAspectRatio = aspectRatio || [
-    [16, 9],
-    [4, 2],
-  ];
+  const imageAspectRatio = aspectRatio || [[16, 9], [4, 2]];
   return (
     <div
       className={`arrow-component full-width-with-padding ${containerStyle}`}
       data-test-id="full-screen-slider"
       styleName="full-screen-slider-wrapper"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName={`full-screen-slider ${containerStyle}`}>
-        <span styleName={`${containerStyle}`}>
+        <div styleName={containerStyle}>
           <CollectionName
             styleName={`${containerStyle}`}
             collection={collection}
             collectionNameTemplate={collectionNameTemplate}
             collectionNameBorderColor={collectionNameBorderColor}
           />
-        </span>
+        </div>
         <div styleName={`wrapper ${containerStyle} ${alignment}`}>
           <ScrollSnap isArrow={navigationArrows} slideIndicator={slideIndicator} isInfinite={isInfinite}>
             {items.slice(0, showNumberOfStoriesToShow).map((story, index) => {
@@ -118,8 +110,8 @@ FullScreenSlider.propTypes = {
     footerButton: PropTypes.string,
     collectionNameBorderColor: PropTypes.string,
     // aspect ratio of the image
-    aspectRatio: PropTypes.array,
-  }),
+    aspectRatio: PropTypes.array
+  })
 };
 
 export default StateProvider(FullScreenSlider);
diff --git a/app/isomorphic/arrow/components/Rows/FullScreenSlider/stories.js b/app/isomorphic/arrow/components/Rows/FullScreenSlider/stories.js
index 8eb39a893..20de5f77f 100644
--- a/app/isomorphic/arrow/components/Rows/FullScreenSlider/stories.js
+++ b/app/isomorphic/arrow/components/Rows/FullScreenSlider/stories.js
@@ -4,7 +4,7 @@ import {
   optionalSelect,
   sectionTagTemplates,
   collectionNameTemplates,
-  footerButton,
+  footerButton
 } from "../../../../storybook";
 import FullScreenSlider from "./index";
 import { generateCollection } from "../../Fixture/";
@@ -26,11 +26,11 @@ const sectionTagDefaultvalue = "#3a9fdd";
 const navigationStyle = {
   defaultvalue: "none",
   dots: "dots",
-  dashes: "dashes",
+  dashes: "dashes"
 };
 const contentAlignment = {
   defaultvalue: "left",
-  center: "center",
+  center: "center"
 };
 
 const footerSlot = () => {
@@ -42,9 +42,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 ).add("Default", () => {
@@ -68,7 +68,7 @@ withStore(
     footerButton: optionalSelect("Footer Button", footerButton),
     footerSlotConfig: { footerSlot: footerSlot },
     showButton: boolean("Show button", true),
-    showReadTime: boolean("Read time", true),
+    showReadTime: boolean("Read time", true)
   };
   return <FullScreenSlider collection={collection} config={contextConfig} />;
 });
@@ -80,10 +80,10 @@ withStore(
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
         language: {
-          direction: "rtl",
-        },
-      },
-    },
+          direction: "rtl"
+        }
+      }
+    }
   },
   Readme
 )
@@ -109,7 +109,7 @@ withStore(
       footerButton: optionalSelect("Footer Button", footerButton),
       footerSlotConfig: { footerSlot: footerSlot },
       showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     };
     return <FullScreenSlider collection={collection} config={contextConfig} />;
   });
diff --git a/app/isomorphic/arrow/components/Rows/HalfScreenSlider/index.js b/app/isomorphic/arrow/components/Rows/HalfScreenSlider/index.js
index 58fca55a8..dcf0d0452 100644
--- a/app/isomorphic/arrow/components/Rows/HalfScreenSlider/index.js
+++ b/app/isomorphic/arrow/components/Rows/HalfScreenSlider/index.js
@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { useDispatch, useSelector } from "react-redux";
-import get from "lodash/get";
+import get from "lodash.get";
 
 import { collectionToStories } from "@quintype/components";
 import { CollectionName } from "../../Atoms/CollectionName";
@@ -14,6 +14,13 @@ import { ScrollSnap } from "../../Atoms/ScrollSnap";
 import "./half-screen-slider.m.css";
 
 const HalfScreenSlider = ({ collection, config = {} }) => {
+  const dispatch = useDispatch();
+  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+
+  const items = collectionToStories(collection);
+  if (items.length < 1) {
+    return null;
+  }
   const {
     collectionNameBorderColor = "",
     borderColor = "",
@@ -25,29 +32,22 @@ const HalfScreenSlider = ({ collection, config = {} }) => {
     footerSlotConfig = {},
     navigationArrows = true,
     slideIndicator = "none",
-    isInfinite = false,
+    isInfinite = false
   } = config;
   const { footerSlot } = footerSlotConfig;
-  const items = collectionToStories(collection);
   const textColor = getTextColor(theme);
   const isBorderEnable = border === "full" ? "border" : "";
-  if (items.length < 1) {
-    return null;
-  }
 
   const footerSlotComp = footerSlot ? footerSlot() : null;
   const showNumberOfStoriesToShow = getNumberOfStoriesToShow(numberOfStoriesToShow);
 
-  const dispatch = useDispatch();
-  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
   const url = generateNavigateSlug(collection, qtConfig);
 
   return (
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="half-screen-slider"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName="half-screen-slider">
         <CollectionName
           collection={collection}
@@ -101,5 +101,5 @@ HalfScreenSlider.propTypes = {
   collectionTemplate: PropTypes.string,
   collectionNameBorderColor: PropTypes.string,
   // section tag border color
-  borderColor: PropTypes.string,
+  borderColor: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Rows/HalfScreenSlider/stories.js b/app/isomorphic/arrow/components/Rows/HalfScreenSlider/stories.js
index 44b01cdbc..9db86223e 100644
--- a/app/isomorphic/arrow/components/Rows/HalfScreenSlider/stories.js
+++ b/app/isomorphic/arrow/components/Rows/HalfScreenSlider/stories.js
@@ -4,7 +4,7 @@ import {
   optionalSelect,
   sectionTagTemplates,
   collectionNameTemplates,
-  footerButton,
+  footerButton
 } from "../../../../storybook";
 import { color, boolean, text, number } from "@storybook/addon-knobs";
 import HalfScreenSlider from "./index";
@@ -25,13 +25,13 @@ const sectionTagDefaultvalue = "#3a9fdd";
 
 const borderTemplate = {
   default: " ",
-  border: "full",
+  border: "full"
 };
 
 const navigationStyle = {
   defaultvalue: "none",
   dots: "dots",
-  dashes: "dashes",
+  dashes: "dashes"
 };
 const footerSlot = () => {
   return <AdPlaceholder />;
@@ -42,9 +42,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -69,7 +69,7 @@ withStore(
       numberOfStoriesToShow: number("Number of slide to show", 3),
       footerSlotConfig: { footerSlot: footerSlot },
       showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     };
     return <HalfScreenSlider collection={collection} config={contextConfig} />;
   });
@@ -81,10 +81,10 @@ withStore(
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
         language: {
-          direction: "rtl",
-        },
-      },
-    },
+          direction: "rtl"
+        }
+      }
+    }
   },
   Readme
 )
@@ -109,7 +109,7 @@ withStore(
       numberOfStoriesToShow: number("Number of slide to show", 3),
       footerSlotConfig: { footerSlot: footerSlot },
       showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     };
     return <HalfScreenSlider collection={collection} config={contextConfig} />;
   });
diff --git a/app/isomorphic/arrow/components/Rows/ListComponent/index.js b/app/isomorphic/arrow/components/Rows/ListComponent/index.js
index aaf4cae71..675ff7150 100644
--- a/app/isomorphic/arrow/components/Rows/ListComponent/index.js
+++ b/app/isomorphic/arrow/components/Rows/ListComponent/index.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { StoryCard } from "../../Molecules/StoryCard";
 import { CollectionName } from "../../Atoms/CollectionName";
-import { generateNavigateSlug, getTextColor, navigateTo } from "../../../utils/utils";
+import { generateNavigateSlug, navigateTo } from "../../../utils/utils";
 import { collectionToStories } from "@quintype/components";
 import { HeroImage } from "../../Atoms/HeroImage";
 import { StorycardContent } from "../../Molecules/StorycardContent";
@@ -14,7 +14,7 @@ import "./list-component.m.css";
 import { Subheadline } from "../../Atoms/Subheadline";
 import { LoadmoreButton } from "../../Atoms/Loadmore";
 import { useDispatch, useSelector } from "react-redux";
-import get from "lodash/get";
+import get from "lodash.get";
 
 const ListComponent = ({ collection, config = {}, getMoreStories, limit, hideButton, authorPrefix = "By" }) => {
   const storyItems = collectionToStories(collection);
@@ -28,7 +28,7 @@ const ListComponent = ({ collection, config = {}, getMoreStories, limit, hideBut
     border = "",
     collectionNameTemplate = "",
     footerButton = "",
-    localizationConfig = {},
+    localizationConfig = {}
   } = config;
 
   const dispatch = useDispatch();
@@ -62,8 +62,7 @@ const ListComponent = ({ collection, config = {}, getMoreStories, limit, hideBut
               theme={theme}
               isHorizontal
               borderColor={borderColor}
-              config={config}
-            >
+              config={config}>
               <HeroImage story={story} isHorizontal aspectRatio={[[16, 9]]} />
               <div styleName="story-card-content-wrapper">
                 <StorycardContent story={story} borderColor={borderColor} config={config}>
@@ -95,17 +94,15 @@ const ListComponent = ({ collection, config = {}, getMoreStories, limit, hideBut
     }
   };
 
-  const textColor = getTextColor(theme);
-
   return (
-    <div className="full-width-with-padding arrow-component" style={{ backgroundColor: theme, color: textColor }}>
+    <div className="full-width-with-padding arrow-component" style={{ backgroundColor: theme || "initial" }}>
       <div styleName="list-wrapper ">
         <CollectionName
           collection={collection}
           collectionNameTemplate={collectionNameTemplate}
           collectionNameBorderColor={collectionNameBorderColor}
         />
-        <div styleName="wrapper" style={{ backgroundColor: theme, color: textColor }}>
+        <div styleName="wrapper" style={{ backgroundColor: theme || "initial" }}>
           <div styleName="list">
             {storyItems.slice(0, limit).map((story, index) => {
               return <div key={`default-${index}`}>{borderHandler(story)}</div>;
@@ -141,12 +138,12 @@ ListComponent.propTypes = {
     // row title style
     collectionNameTemplate: PropTypes.string,
     // row title style colour
-    collectionNameBorderColor: PropTypes.string,
+    collectionNameBorderColor: PropTypes.string
   }),
   getMoreStories: PropTypes.object.isRequired,
   limit: PropTypes.number,
   hideButton: PropTypes.bool,
-  authorPrefix: PropTypes.string,
+  authorPrefix: PropTypes.string
 };
 
 export default StateProvider(ListComponent);
diff --git a/app/isomorphic/arrow/components/Rows/ListComponent/stories.js b/app/isomorphic/arrow/components/Rows/ListComponent/stories.js
index c3ad556a4..92944accc 100644
--- a/app/isomorphic/arrow/components/Rows/ListComponent/stories.js
+++ b/app/isomorphic/arrow/components/Rows/ListComponent/stories.js
@@ -19,10 +19,10 @@ const collection = generateCollection({ stories: 10 });
 const borderOptions = {
   "No Value": "",
   bottom: "bottom",
-  full: "full",
+  full: "full"
 };
 const footerButton = {
-  SubsequentLoadCount: "SubsequentLoadCount",
+  SubsequentLoadCount: "SubsequentLoadCount"
 };
 
 const getMoreStories = () => {
@@ -34,9 +34,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   readme
 )
@@ -57,7 +57,7 @@ withStore(
       showRowTitle: boolean("Row title", true),
       initialLoadCount: text("Initial Load Count", 6),
       showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     };
     return <ListComponent collection={collection} config={contextConfig} getMoreStories={getMoreStories} />;
   });
diff --git a/app/isomorphic/arrow/components/Rows/Listicles/index.js b/app/isomorphic/arrow/components/Rows/Listicles/index.js
index acce83839..735d2c025 100644
--- a/app/isomorphic/arrow/components/Rows/Listicles/index.js
+++ b/app/isomorphic/arrow/components/Rows/Listicles/index.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import axios from "axios";
 import PropTypes from "prop-types";
-import get from "lodash/get";
+import get from "lodash.get";
 import { collectionToStories } from "@quintype/components";
 
 import { CollectionName } from "../../Atoms/CollectionName";
@@ -13,29 +13,11 @@ import { Headline } from "../../Atoms/Headline";
 import "./listicles.m.css";
 
 const Listicles = ({ collection, config = {} }) => {
-  const {
-    collectionNameBorderColor = "",
-    theme = "",
-    collectionNameTemplate = "",
-    slotConfig = null,
-    localizedNumbers = null,
-  } = config;
-
   const [subCollectionStories, handleApiData] = useState([]);
   const [cachedStories, updateCachedStories] = useState({});
   const [active, handleActive] = useState(0);
   const [loading, handleLoading] = useState(true);
 
-  const getFilteredCollection = get(collection, ["items"], []).filter(
-    (collections) => collections.type === "collection"
-  );
-
-  if (getFilteredCollection.length < 1) {
-    return null;
-  }
-
-  const filteredCollectionids = getFilteredCollection.map((subCol) => subCol.id);
-
   const memoizeStories = (id, data) => {
     updateCachedStories((cachedStories) => ({ ...cachedStories, [id]: data }));
   };
@@ -45,7 +27,7 @@ const Listicles = ({ collection, config = {} }) => {
     try {
       let data = {};
       if (!(id in cachedStories)) {
-        const res = await axios.get(`/api/v1/collections/${id}?limit=9`);
+        let res = await axios.get(`/api/v1/collections/${id}?limit=9`);
         data = res.data;
       } else data = cachedStories[id];
       memoizeStories(id, data);
@@ -63,13 +45,31 @@ const Listicles = ({ collection, config = {} }) => {
     fetchSubCollectionData(id);
   }, []);
 
+  const getFilteredCollection = get(collection, ["items"], []).filter(
+    (collections) => collections.type === "collection"
+  );
+
+  if (getFilteredCollection.length < 1) {
+    return null;
+  }
+
+  const {
+    collectionNameBorderColor = "",
+    theme = "",
+    collectionNameTemplate = "",
+    slotConfig = null,
+    localizedNumbers = null
+  } = config;
+
+  const filteredCollectionids = getFilteredCollection.map((subCol) => subCol.id);
+
   const items = subCollectionStories.slice(0, 9);
   const textColor = getTextColor(theme);
 
   const openChildCollectionItems = (event, index, slug) => {
     event.stopPropagation();
     fetchSubCollectionData(slug);
-    const activeIndex = active === index ? 0 : index;
+    let activeIndex = active === index ? 0 : index;
     handleActive(activeIndex);
   };
 
@@ -109,8 +109,7 @@ const Listicles = ({ collection, config = {} }) => {
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="collection-filter"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName={`wrapper ${getCustomStyleName}`}>
         <CollectionName
           collection={collection}
@@ -123,12 +122,10 @@ const Listicles = ({ collection, config = {} }) => {
               <div
                 key={index}
                 className={index === active ? "open-subchild" : ""}
-                styleName={`child-collection-wrapper ${index === active ? "open-subchild" : ""}`}
-              >
+                styleName={`child-collection-wrapper ${index === active ? "open-subchild" : ""}`}>
                 <div
                   styleName={`child-collection ${textColor}`}
-                  onClick={(event) => openChildCollectionItems(event, index, subCollections.id)}
-                >
+                  onClick={(event) => openChildCollectionItems(event, index, subCollections.id)}>
                   {subCollections.name}
                 </div>
               </div>
@@ -154,12 +151,12 @@ Listicles.propTypes = {
     // configure ad slot widget and story
     slotConfig: PropTypes.func,
     collectionNameTemplate: PropTypes.string,
-    collectionNameBorderColor: PropTypes.string,
-  }),
+    collectionNameBorderColor: PropTypes.string
+  })
 };
 
 Listicles.defaultProps = {
   theme: "#ffffff",
   slotConfig: "story",
-  border: "",
+  border: ""
 };
diff --git a/app/isomorphic/arrow/components/Rows/Listicles/stories.js b/app/isomorphic/arrow/components/Rows/Listicles/stories.js
index 335ba940b..e4fc11365 100644
--- a/app/isomorphic/arrow/components/Rows/Listicles/stories.js
+++ b/app/isomorphic/arrow/components/Rows/Listicles/stories.js
@@ -1,4 +1,3 @@
-/* eslint-disable prefer-regex-literals */
 import React from "react";
 import { color, boolean } from "@storybook/addon-knobs";
 import { withStore, optionalSelect, collectionNameTemplates } from "../../../../storybook";
@@ -31,9 +30,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 )
@@ -44,7 +43,7 @@ withStore(
       theme: color("color", defaultvalue),
       collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
       slotConfig: configurableSlot,
-      showRowTitle: boolean("Row title", true),
+      showRowTitle: boolean("Row title", true)
     };
 
     mock.onGet(API_REQUEST).reply(200, nestedCollection);
@@ -58,7 +57,7 @@ withStore(
       collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
       slotConfig: configurableSlot,
       showRowTitle: boolean("Row title", true),
-      localizedNumbers: ["১", "২", "৩", "৪", "৫", "৬", "৭", "৮", "৯"],
+      localizedNumbers: ["১", "২", "৩", "৪", "৫", "৬", "৭", "৮", "৯"]
     };
 
     mock.onGet(API_REQUEST).reply(200, nestedCollection);
diff --git a/app/isomorphic/arrow/components/Rows/MagazineEditions/index.js b/app/isomorphic/arrow/components/Rows/MagazineEditions/index.js
index 7c3a0d647..0aa317ecc 100644
--- a/app/isomorphic/arrow/components/Rows/MagazineEditions/index.js
+++ b/app/isomorphic/arrow/components/Rows/MagazineEditions/index.js
@@ -17,10 +17,10 @@ const MagazineEditions = ({ collection = [], config = {}, onClick, limit, showLo
     showRowTitle = true,
     rowTitle = "Other Issues",
     editionNameFormat = "magazineDate",
-    template = "NavigateToPage",
+    template = "NavigateToPage"
   } = config;
   const textColor = getTextColor(theme);
-  const issues = collection.map((issue) => issue.collection) || [];
+  let issues = collection.map((issue) => issue.collection) || [];
   const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
   const dispatch = useDispatch();
   const url = generateNavigateSlug(collection, { ...qtConfig, ...config });
@@ -28,9 +28,8 @@ const MagazineEditions = ({ collection = [], config = {}, onClick, limit, showLo
   return (
     <div
       className="full-width-with-padding arrow-component arr-magazine-issues"
-      style={{ backgroundColor: theme, color: textColor }}
-      data-test-id="editions"
-    >
+      style={{ backgroundColor: theme || "initial" }}
+      data-test-id="editions">
       <div styleName={`container ${textColor}`}>
         {showRowTitle && (
           <CollectionName
@@ -46,7 +45,7 @@ const MagazineEditions = ({ collection = [], config = {}, onClick, limit, showLo
             const date = issueDate || createdAt;
             const timeStampConfig = {
               isUpperCase: true,
-              disableMeridiem: true,
+              disableMeridiem: true
             };
             return (
               <div key={index} data-test-id={`current-issue-${index}`}>
@@ -82,11 +81,11 @@ MagazineEditions.propTypes = {
     collectionNameBorderColor: PropTypes.string,
     theme: PropTypes.string,
     editionNameFormat: PropTypes.string,
-    showRowTitle: PropTypes.bool,
+    showRowTitle: PropTypes.bool
   }),
   onClick: PropTypes.func,
   limit: PropTypes.number,
-  showLoadmore: PropTypes.bool,
+  showLoadmore: PropTypes.bool
 };
 
 export default StateProvider(MagazineEditions);
diff --git a/app/isomorphic/arrow/components/Rows/MagazineEditions/magazine-editions.m.css b/app/isomorphic/arrow/components/Rows/MagazineEditions/magazine-editions.m.css
index 897646b74..1af3261ab 100644
--- a/app/isomorphic/arrow/components/Rows/MagazineEditions/magazine-editions.m.css
+++ b/app/isomorphic/arrow/components/Rows/MagazineEditions/magazine-editions.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 @value tablet from viewports;
 
diff --git a/app/isomorphic/arrow/components/Rows/MagazineEditions/magazine-editions.test.js b/app/isomorphic/arrow/components/Rows/MagazineEditions/magazine-editions.test.js
index a4ed3f215..97ab0573f 100644
--- a/app/isomorphic/arrow/components/Rows/MagazineEditions/magazine-editions.test.js
+++ b/app/isomorphic/arrow/components/Rows/MagazineEditions/magazine-editions.test.js
@@ -15,7 +15,7 @@ describe("MagazineEditions component", () => {
       footerButton: "",
       editionsTitle: "",
       enableEditionsTitle: true,
-      title: "",
+      title: ""
     };
     const wrapper = mount(
       <Provider store={generateStore}>
diff --git a/app/isomorphic/arrow/components/Rows/MagazineEditions/stories.js b/app/isomorphic/arrow/components/Rows/MagazineEditions/stories.js
index bcff547ff..7fd15cb1b 100644
--- a/app/isomorphic/arrow/components/Rows/MagazineEditions/stories.js
+++ b/app/isomorphic/arrow/components/Rows/MagazineEditions/stories.js
@@ -9,7 +9,7 @@ const magazineCollection = generateMagazineIssues();
 
 const footerButton = {
   SubsequentLoadCount: "SubsequentLoadCount",
-  CustomUrlPath: "CustomUrlPath",
+  CustomUrlPath: "CustomUrlPath"
 };
 
 const collectionNameDefaultValue = "#3a9fdd";
@@ -21,9 +21,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 ).add("Magazine Editions", () => {
@@ -39,7 +39,7 @@ withStore(
     enableEditionsTitle: boolean("Show Editions Title", true),
     editionsTitle: text("Editions Title", "Magazine Title"),
     showButton: boolean("Show Button", true),
-    initialLoadCount: text("Initial Load Count", 4),
+    initialLoadCount: text("Initial Load Count", 4)
   };
   return <MagazineEditions collection={magazineCollection} config={contextConfig} showLoadmore={true} />;
 });
diff --git a/app/isomorphic/arrow/components/Rows/MagazineHeaderCard/index.js b/app/isomorphic/arrow/components/Rows/MagazineHeaderCard/index.js
index cc6fd7dba..cd910a882 100644
--- a/app/isomorphic/arrow/components/Rows/MagazineHeaderCard/index.js
+++ b/app/isomorphic/arrow/components/Rows/MagazineHeaderCard/index.js
@@ -20,14 +20,13 @@ const MagazineHeaderCard = ({ collection = {}, config = {} }) => {
   const date = issueDate || createdAt;
   const timeStampConfig = {
     isUpperCase: true,
-    disableMeridiem: true,
+    disableMeridiem: true
   };
   return (
     <div
       className="full-width-with-padding arrow-component"
-      style={{ backgroundColor: theme }}
-      data-test-id="magazine-header-card"
-    >
+      style={{ backgroundColor: theme || "initial" }}
+      data-test-id="magazine-header-card">
       <div className="arr-magazine-card" styleName="magazine-header intro-button">
         <MagazineCoverImageCard collection={collection} config={{ ...config, magazineSlug }} />
         <div styleName="content">
@@ -59,15 +58,15 @@ MagazineHeaderCard.propTypes = {
   collection: PropTypes.shape({
     "created-at": PropTypes.number,
     summary: PropTypes.string,
-    items: PropTypes.array,
+    items: PropTypes.array
   }),
   config: PropTypes.shape({
     theme: PropTypes.string,
     footerButton: PropTypes.string,
     magazineTitle: PropTypes.string,
     magazinePageUrl: PropTypes.string,
-    customUrlPath: PropTypes.string,
-  }),
+    customUrlPath: PropTypes.string
+  })
 };
 
 export default StateProvider(MagazineHeaderCard);
diff --git a/app/isomorphic/arrow/components/Rows/MagazineHeaderCard/magazine-cards.m.css b/app/isomorphic/arrow/components/Rows/MagazineHeaderCard/magazine-cards.m.css
index ed2f526d4..a2819a44f 100644
--- a/app/isomorphic/arrow/components/Rows/MagazineHeaderCard/magazine-cards.m.css
+++ b/app/isomorphic/arrow/components/Rows/MagazineHeaderCard/magazine-cards.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 @value tablet from viewports;
 
@@ -46,8 +45,8 @@
     grid-gap: var(--arrow-spacing-l);
   }
   :global(.arr--story-card) {
-    display: grid;
     grid-template-columns: 1fr 4fr;
+    text-align: initial;
   }
 }
 
diff --git a/app/isomorphic/arrow/components/Rows/MagazineHeaderCard/stories.js b/app/isomorphic/arrow/components/Rows/MagazineHeaderCard/stories.js
index 99e8b5573..a2a7ebff0 100644
--- a/app/isomorphic/arrow/components/Rows/MagazineHeaderCard/stories.js
+++ b/app/isomorphic/arrow/components/Rows/MagazineHeaderCard/stories.js
@@ -9,7 +9,7 @@ const collection = generateCollection({ stories: 4 });
 
 const footerButton = {
   NavigateToPage: "NavigateToPage",
-  CustomUrlPath: "CustomUrlPath",
+  CustomUrlPath: "CustomUrlPath"
 };
 
 withStore(
@@ -18,9 +18,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 ).add("Magazine header card", () => {
@@ -30,7 +30,7 @@ withStore(
     buttonText: text("Button text", "Subscribe"),
     footerButton: optionalSelect("Button Settings", footerButton),
     customUrlPath: text("Custom URL", ""),
-    magazineTitle: "Fortune",
+    magazineTitle: "Fortune"
   };
   return <MagazineHeaderCard collection={collection} config={contextConfig} />;
 });
diff --git a/app/isomorphic/arrow/components/Rows/MagazineWidget/index.js b/app/isomorphic/arrow/components/Rows/MagazineWidget/index.js
index ff56ae12e..299fc66a2 100644
--- a/app/isomorphic/arrow/components/Rows/MagazineWidget/index.js
+++ b/app/isomorphic/arrow/components/Rows/MagazineWidget/index.js
@@ -8,7 +8,7 @@ import {
   clientWidth,
   generateNavigateSlug,
   navigateTo,
-  timestampToFormat,
+  timestampToFormat
 } from "../../../utils/utils";
 import "../MagazineHeaderCard/magazine-cards.m.css";
 import { StateProvider } from "../../SharedContext";
@@ -19,10 +19,10 @@ import { Headline } from "../../Atoms/Headline";
 import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
 import { MagazineCoverImageCard } from "../../Atoms/MagazineCoverImage";
 import { useDispatch, useSelector } from "react-redux";
-import get from "lodash/get";
+import get from "lodash.get";
 
 const MagazineWidget = ({ collection = {}, config = {} }) => {
-  const { "created-at": createdAt, "collection-date": issueDate, summary, items, metadata = {} } = collection;
+  const { "created-at": createdAt, "collection-date": issueDate, summary, items, metadata = {}, id } = collection;
   const { theme = "", footerButton = "", border, localizationConfig = {}, navigate = true, magazineSlug = "" } = config;
   const textColor = getTextColor(theme);
   const dispatch = useDispatch();
@@ -34,13 +34,13 @@ const MagazineWidget = ({ collection = {}, config = {} }) => {
 
   const url = generateNavigateSlug(collection, {
     ...qtConfig,
-    ...updatedConfig,
+    ...updatedConfig
   });
   const sliceValue = 4;
   const isTablet = clientWidth("tablet");
   const timeStampConfig = {
     isUpperCase: true,
-    disableMeridiem: true,
+    disableMeridiem: true
   };
   const date = issueDate || createdAt;
 
@@ -65,10 +65,10 @@ const MagazineWidget = ({ collection = {}, config = {} }) => {
           return (
             <>
               <StoryCard story={story} border={borderSettings} isHorizontal config={config}>
-                <HeroImage story={story} isHorizontal aspectRatio={[[4, 3]]} />
+                <HeroImage story={story} isHorizontal aspectRatio={[[16, 9]]} />
                 <StorycardContent story={story} config={config}>
                   <Headline story={story} premiumStoryIconConfig={config} />
-                  <AuthorWithTime config={localizationConfig} story={story} prefix="By" />
+                  <AuthorWithTime config={localizationConfig} story={story} prefix="By" collectionId={id} />
                 </StorycardContent>
               </StoryCard>
             </>
@@ -95,9 +95,8 @@ const MagazineWidget = ({ collection = {}, config = {} }) => {
   return (
     <div
       className="full-width-with-padding arrow-component"
-      style={{ backgroundColor: theme }}
-      data-test-id="magazine-widget"
-    >
+      style={{ backgroundColor: theme || "initial" }}
+      data-test-id="magazine-widget">
       <div className="arr-magazine-widget" styleName="magazine-header widget-button">
         <MagazineCoverImageCard collection={collection} config={updatedConfig} />
         <div styleName="content">
@@ -120,9 +119,9 @@ MagazineWidget.propTypes = {
   collection: PropTypes.shape({
     "created-at": PropTypes.number,
     summary: PropTypes.string,
-    items: PropTypes.array,
+    items: PropTypes.array
   }),
-  config: PropTypes.shape({ theme: PropTypes.string, footerButton: PropTypes.string, border: PropTypes.string }),
+  config: PropTypes.shape({ theme: PropTypes.string, footerButton: PropTypes.string, border: PropTypes.string })
 };
 
 export default StateProvider(MagazineWidget);
diff --git a/app/isomorphic/arrow/components/Rows/MagazineWidget/stories.js b/app/isomorphic/arrow/components/Rows/MagazineWidget/stories.js
index 43d7403a5..f1b792d50 100644
--- a/app/isomorphic/arrow/components/Rows/MagazineWidget/stories.js
+++ b/app/isomorphic/arrow/components/Rows/MagazineWidget/stories.js
@@ -9,12 +9,12 @@ const collection = generateCollection({ stories: 4 });
 
 const footerButton = {
   NavigateToPage: "NavigateToPage",
-  CustomUrlPath: "CustomUrlPath",
+  CustomUrlPath: "CustomUrlPath"
 };
 
 const border = {
   default: "borderNone",
-  borderBottom: "borderBottom",
+  borderBottom: "borderBottom"
 };
 
 withStore(
@@ -23,9 +23,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 ).add("Magazine Widget", () => {
@@ -37,7 +37,7 @@ withStore(
     customUrlPath: text("Custom URL", ""),
     showAuthor: boolean("Show Author", true),
     showTime: boolean("Show Time", true),
-    border: optionalSelect("Border settings", border),
+    border: optionalSelect("Border settings", border)
   };
   return <MagazineHeaderCard collection={collection} config={contextConfig} isWidget />;
 });
diff --git a/app/isomorphic/arrow/components/Rows/OneColStoryList/index.js b/app/isomorphic/arrow/components/Rows/OneColStoryList/index.js
index 3edea9541..9a08e1fce 100644
--- a/app/isomorphic/arrow/components/Rows/OneColStoryList/index.js
+++ b/app/isomorphic/arrow/components/Rows/OneColStoryList/index.js
@@ -1,10 +1,10 @@
 import { collectionToStories } from "@quintype/components";
-import get from "lodash/get";
+import get from "lodash.get";
 import PropTypes from "prop-types";
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { ProgressiveHydration } from "../../../hydration-component";
-import { generateNavigateSlug, getSlot, getTextColor, navigateTo } from "../../../utils/utils";
+import { generateNavigateSlug, getSlot, navigateTo } from "../../../utils/utils";
 import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
 import { CollectionName } from "../../Atoms/CollectionName";
 import { Headline } from "../../Atoms/Headline";
@@ -31,7 +31,7 @@ const OneColStoryList = ({
   getMoreStories,
   isLoadMoreVisible,
   isLoading,
-  isolatedLoadMore,
+  isolatedLoadMore
 }) => {
   const storyItems = collectionToStories(collection);
   if (!storyItems.length) return null;
@@ -45,7 +45,7 @@ const OneColStoryList = ({
     footerSlotConfig = {},
     footerButton = "",
     localizationConfig = {},
-    subsequentLoadCount = 8,
+    subsequentLoadCount = 8
   } = config;
 
   const { footerSlot } = footerSlotConfig;
@@ -63,6 +63,7 @@ const OneColStoryList = ({
           componentName={"OneColStoryList"}
           offset={storyItems.length}
           limit={subsequentLoadCount}
+          theme={theme}
         />
       );
     }
@@ -90,37 +91,34 @@ const OneColStoryList = ({
             <StoryCard
               story={story}
               theme={theme}
-              headerLevel="4"
+              headerLevel="6"
               isHorizontal
               border={border}
-              aspectRatio={[
-                [1, 1],
-                [4, 3],
-              ]}
+              aspectRatio={[[16, 9]]}
               borderColor={borderColor}
               prefix="By"
               config={config}
+              collectionId={collection.id}
             />
           </div>
         );
       case "full":
         return (
           <div styleName="one-col-border-full">
-            <StoryCard story={story} border={border} theme={theme} isHorizontal borderColor={borderColor}>
-              <HeroImage
-                story={story}
-                isHorizontal
-                aspectRatio={[
-                  [1, 1],
-                  [4, 3],
-                ]}
-              />
+            <StoryCard
+              config={config}
+              story={story}
+              border={border}
+              theme={theme}
+              isHorizontal
+              borderColor={borderColor}>
+              <HeroImage story={story} isHorizontal aspectRatio={[[16, 9]]} />
               <div styleName="story-card-content-wrapper">
                 <StorycardContent story={story} borderColor={borderColor} config={config}>
                   <SectionTag story={story} />
-                  <Headline story={story} headerLevel="4" premiumStoryIconConfig={config} />
+                  <Headline story={story} headerLevel="6" premiumStoryIconConfig={config} />
                   <Subheadline story={story} />
-                  <AuthorWithTime config={localizationConfig} story={story} prefix="By" />
+                  <AuthorWithTime config={localizationConfig} story={story} prefix="By" collectionId={collection.id} />
                 </StorycardContent>
               </div>
             </StoryCard>
@@ -132,36 +130,32 @@ const OneColStoryList = ({
             <StoryCard
               story={story}
               theme={theme}
-              headerLevel="4"
+              headerLevel="6"
               isHorizontal
               border={border}
-              aspectRatio={[
-                [1, 1],
-                [4, 3],
-              ]}
+              aspectRatio={[[16, 9]]}
               borderColor={borderColor}
               prefix="By"
               config={config}
+              collectionId={collection.id}
             />
           </div>
         );
     }
   };
 
-  const textColor = getTextColor(theme);
   return (
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="one-col-story-list"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName="one-col-story-list-wrapper ">
         <CollectionName
           collection={collection}
           collectionNameTemplate={collectionNameTemplate}
           collectionNameBorderColor={collectionNameBorderColor}
         />
-        <div styleName="wrapper" style={{ backgroundColor: theme, color: textColor }}>
+        <div styleName="wrapper" style={{ backgroundColor: theme || "initial" }}>
           <div styleName="one-col-first-story">
             {storyItems.slice(0, 1).map((story, index) => {
               return <div key={`default-${index}`}>{borderHandler(story)}</div>;
@@ -172,14 +166,7 @@ const OneColStoryList = ({
               return <div key={`default-${index}`}>{borderHandler(story)}</div>;
             })}
           </div>
-          <div styleName="one-col-ads">
-            {getSlot(
-              type,
-              component,
-              () => null,
-              () => null
-            )}
-          </div>
+          <div styleName="one-col-ads">{getSlot(type, component, () => null, () => null)}</div>
         </div>
         <div styleName="footer-ad-wrapper">
           {getLoadMore({ isLoading, storyItems, getMoreStories, subsequentLoadCount })}
@@ -202,18 +189,18 @@ OneColStoryList.propTypes = {
     collectionNameTemplate: PropTypes.string,
     // row title style colour
     collectionNameBorderColor: PropTypes.string,
-    subsequentLoadCount: PropTypes.number,
+    subsequentLoadCount: PropTypes.number
   }),
   getMoreStories: PropTypes.func,
   isLoadMoreVisible: PropTypes.bool,
   isLoading: PropTypes.bool,
-  isolatedLoadMore: PropTypes.bool,
+  isolatedLoadMore: PropTypes.bool
 };
 
 OneColStoryList.defaultProps = {
   getMoreStories: () => {},
   isLoadMoreVisible: true,
-  isLoading: false,
+  isLoading: false
 };
 
 export default StateProvider(OneColStoryList);
diff --git a/app/isomorphic/arrow/components/Rows/OneColStoryList/one-col-story-list.m.css b/app/isomorphic/arrow/components/Rows/OneColStoryList/one-col-story-list.m.css
index d031fdc15..21fa25785 100644
--- a/app/isomorphic/arrow/components/Rows/OneColStoryList/one-col-story-list.m.css
+++ b/app/isomorphic/arrow/components/Rows/OneColStoryList/one-col-story-list.m.css
@@ -1,8 +1,9 @@
-@custom-media --viewport-medium (width >= 768px);
+@custom-media --viewport-medium (width >=768px);
 @custom-media --viewport-small (width < 768px);
 
 .one-col-story-list-wrapper {
   padding: 0 var(--arrow-spacing-s);
+
   @media (--viewport-medium) {
     padding: 0;
   }
@@ -11,60 +12,75 @@
 .wrapper {
   display: flex;
   flex-direction: column;
+
   @media (--viewport-medium) {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-column-gap: 44px;
   }
 }
+
 .one-col-first-story {
   grid-column: 1/3;
   grid-row: 1/2;
   order: -1;
 }
+
 .one-col-border-full {
   margin-bottom: var(--arrow-spacing-m);
+
   @media (--viewport-medium) {
     margin-bottom: var(--arrow-spacing-l);
   }
 }
+
 .one-col-border-bottom {
   padding-top: var(--arrow-spacing-m);
 }
+
 .one-col-border-default {
   margin-bottom: var(--arrow-spacing-m);
+
   @media (--viewport-medium) {
     margin-bottom: var(--arrow-spacing-l);
   }
 }
+
 .one-col-story-list {
   grid-column: 1/3;
   grid-row: 2/3;
 }
+
 .one-col-ads {
   grid-row: 1/9;
   order: -1;
   padding-bottom: var(--arrow-spacing-m);
 }
+
 .footer-ad-wrapper {
   @media (--viewport-medium) {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
   }
 }
+
 .footer-wrapper {
   grid-row: 1/2;
   grid-column: 1/3;
 }
+
 .ad-wrapper {
   grid-row: 2/3;
   grid-column: 1/4;
 }
+
 .ad-wrapper :global(.arr--ad-wrapper) {
   justify-content: left;
 }
+
 .story-card-content-wrapper {
   padding: 12px 8px 12px 0;
+
   @media (--viewport-medium) {
     padding: 16px 16px 16px 0;
   }
@@ -77,5 +93,5 @@
 }
 
 .one-col-story-list-wrapper :global(.arr--button) {
-  margin: 0 auto var(--arrow-spacing-xs) auto;
+  margin: 0 0 var(--arrow-spacing-xs) 0;
 }
diff --git a/app/isomorphic/arrow/components/Rows/OneColStoryList/stories.js b/app/isomorphic/arrow/components/Rows/OneColStoryList/stories.js
index 15c319670..2444a7e29 100644
--- a/app/isomorphic/arrow/components/Rows/OneColStoryList/stories.js
+++ b/app/isomorphic/arrow/components/Rows/OneColStoryList/stories.js
@@ -18,11 +18,11 @@ const collection = generateCollection({ stories: 10 });
 const borderOptions = {
   "No Value": "",
   bottom: "bottom",
-  full: "full",
+  full: "full"
 };
 const footerButton = {
   SubsequentLoadCount: "SubsequentLoadCount",
-  NavigateToPage: "NavigateToPage",
+  NavigateToPage: "NavigateToPage"
 };
 const configurableSlot = () => {
   return <AdPlaceholder height="600px" width="300px" />;
@@ -33,9 +33,9 @@ const footerSlot = () => {
 withStore("Rows/One Col Story List ", {
   qt: {
     config: {
-      "cdn-image": "thumbor-stg.assettype.com",
-    },
-  },
+      "cdn-image": "thumbor-stg.assettype.com"
+    }
+  }
 })
   .addDecorator((story) => <div style={{ maxWidth: "1000px", margin: "auto" }}>{story()}</div>)
   .add("Default", () => {
@@ -55,7 +55,7 @@ withStore("Rows/One Col Story List ", {
       showRowTitle: boolean("Row title", true),
       footerSlotConfig: { footerSlot: footerSlot },
       showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     };
     return <OneColStoryList collection={collection} config={contextConfig} />;
   });
diff --git a/app/isomorphic/arrow/components/Rows/OpinionCollection/index.js b/app/isomorphic/arrow/components/Rows/OpinionCollection/index.js
index b30d6a030..ccc4ee43f 100644
--- a/app/isomorphic/arrow/components/Rows/OpinionCollection/index.js
+++ b/app/isomorphic/arrow/components/Rows/OpinionCollection/index.js
@@ -24,6 +24,7 @@ const loadMore = ({ isLoading, renderStories, getMoreStories, subsequentLoadCoun
 
 const OpinionCollection = ({ collection, config, getMoreStories, isLoadMoreVisible, isLoading, isolatedLoadMore }) => {
   const stories = collectionToStories(collection);
+  if (!stories.length) return null;
   const {
     theme = "",
     footerButton = "",
@@ -32,14 +33,13 @@ const OpinionCollection = ({ collection, config, getMoreStories, isLoadMoreVisib
     collectionNameTemplate = "",
     slotConfig = [],
     subsequentLoadCount = 3,
-    localizationConfig = {},
+    localizationConfig = {}
   } = config;
   const { type = "story", component = null } = get(slotConfig, [0], {});
 
   const dispatch = useDispatch();
   const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
 
-  if (!stories.length) return null;
   const textColor = getTextColor(theme);
   const borderStyle = border === "fullBorder" ? "border" : "";
   const slot = type === "ad" ? getSlot(type, component) : null;
@@ -55,6 +55,7 @@ const OpinionCollection = ({ collection, config, getMoreStories, isLoadMoreVisib
           componentName={"OpinionCollection"}
           offset={stories.length}
           limit={subsequentLoadCount}
+          theme={theme}
         />
       );
     }
@@ -77,29 +78,27 @@ const OpinionCollection = ({ collection, config, getMoreStories, isLoadMoreVisib
   const getAuthorCard = (story) => {
     const authorData = get(story, ["authors", "0"]);
     return (
-      <div data-test-id="story-card">
-        <Author story={story} hideAuthorImage />
-        <div styleName="headline-author">
+      <div data-test-id="story-card" styleName="cardWrapper">
+        <div styleName="container">
+          <Author story={story} hideAuthorImage />
           <Headline story={story} />
-          <AuthorImage author={authorData} template="smallerCircle" config={config} />
+          <AuthorWithTime
+            story={story}
+            config={{ ...config, ...localizationConfig, disableMeridiem: true, showAuthor: false }}
+            collectionId={collection.id}
+          />
         </div>
-        <AuthorWithTime
-          story={story}
-          config={{ ...config, ...localizationConfig, disableMeridiem: true, showAuthor: false }}
-        />
+        <AuthorImage author={authorData} template="smallerCircle" config={config} />
       </div>
     );
   };
 
-  const countStyleName = stories.length === 2 || stories.length === 3 ? `count-${stories.length}` : "";
-
   return (
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="opinion-collection"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
-      <div styleName="opinion-collection" style={{ backgroundColor: theme, color: textColor }}>
+      style={{ backgroundColor: theme || "initial" }}>
+      <div styleName="opinion-collection" style={{ backgroundColor: theme || "initial" }}>
         <CollectionName
           collection={collection}
           collectionNameTemplate={collectionNameTemplate}
@@ -108,11 +107,10 @@ const OpinionCollection = ({ collection, config, getMoreStories, isLoadMoreVisib
         />
         <div
           styleName={`content-wrapper ${borderStyle} ${textColor} ${adStyle}`}
-          className={`content-wrapper ${borderStyle} ${textColor}`}
-        >
+          className={`content-wrapper ${borderStyle} ${textColor}`}>
           {slot ? (
             <>
-              <div className="wrapper-with-ads" styleName={`wrapper-with-ads ${countStyleName}`}>
+              <div className="wrapper-with-ads" styleName="wrapper-with-ads">
                 {stories.slice(0, 4).map((story) => getAuthorCard(story))}
               </div>
               <div styleName="ad-slot">{slot}</div>
@@ -137,12 +135,12 @@ OpinionCollection.propTypes = {
     border: PropTypes.string,
     slotConfig: PropTypes.array,
     subsequentLoadCount: PropTypes.number,
-    localizationConfig: PropTypes.object,
+    localizationConfig: PropTypes.object
   }),
   getMoreStories: PropTypes.func,
   isLoading: PropTypes.bool,
   isLoadMoreVisible: PropTypes.bool,
-  isolatedLoadMore: PropTypes.bool,
+  isolatedLoadMore: PropTypes.bool
 };
 
 OpinionCollection.defaultProps = {
@@ -151,7 +149,7 @@ OpinionCollection.defaultProps = {
   isLoading: false,
   collection: {},
   config: {},
-  hideFirstCard: false,
+  hideFirstCard: false
 };
 
 export default StateProvider(OpinionCollection);
diff --git a/app/isomorphic/arrow/components/Rows/OpinionCollection/opinion-collection.m.css b/app/isomorphic/arrow/components/Rows/OpinionCollection/opinion-collection.m.css
index 09d7c2f0c..754dde55e 100644
--- a/app/isomorphic/arrow/components/Rows/OpinionCollection/opinion-collection.m.css
+++ b/app/isomorphic/arrow/components/Rows/OpinionCollection/opinion-collection.m.css
@@ -1,8 +1,17 @@
-/* eslint-disable scss/at-rule-no-unknown, no-descending-specificity*/
-@value viewports: "../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 @value desktop from viewports;
 
+.cardWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.container {
+  margin-right: var(--arrow-spacing-xxs);
+  flex-basis: 80%;
+}
+
 .opinion-collection {
   padding: 0 var(--arrow-spacing-s);
   @media (min-width: desktop) {
@@ -10,15 +19,16 @@
   }
 }
 
-.content-wrapper {
+.content-wrapper,
+.wrapper-with-ads {
   @media (min-width: mobile) {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    grid-column-gap: var(--arrow-spacing-s);
+    grid-column-gap: var(--arrow-spacing-xl);
   }
   @media (min-width: desktop) {
     grid-template-columns: repeat(3, 1fr);
-    grid-column-gap: var(--arrow-spacing-l);
+    grid-column-gap: var(--arrow-spacing-48);
   }
 }
 
@@ -33,13 +43,8 @@
 }
 
 .wrapper-with-ads {
-  @media (min-width: mobile) {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-column-gap: var(--arrow-spacing-s);
-  }
   @media (min-width: desktop) {
-    grid-column-gap: var(--arrow-spacing-l);
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
@@ -49,21 +54,14 @@
   }
 }
 
-.headline-author {
-  display: flex;
-  :last-child {
-    margin-left: auto;
-  }
-  :global(.arr--headline) {
-    flex-basis: 80%;
-  }
-}
-
 .content-wrapper > div,
 .wrapper-with-ads > div {
-  padding: 0 0 8px 0;
+  padding: 0 0 var(--arrow-spacing-m) 0;
+  @media (min-width: mobile) {
+    padding: 0 0 var(--arrow-spacing-l) 0;
+  }
   @media (min-width: desktop) {
-    padding: 0 var(--arrow-spacing-l) var(--arrow-spacing-m) 0;
+    padding: 0 0 var(--arrow-spacing-xl) 0;
   }
 }
 
@@ -71,157 +69,142 @@
   padding: 0;
 }
 
-.content-wrapper.border.light > div,
-.content-wrapper.border.light .wrapper-with-ads > div {
-  @media (min-width: mobile) {
-    border-right: 1px solid var(--light-border);
-  }
+.content-wrapper :global(.arr-author-name .author-name) {
+  color: var(--arrow-c-brand1);
+  font-size: var(--arrow-spacing-m);
+  margin-bottom: var(--arrow-spacing-xs);
 }
 
-.content-wrapper.border.dark > div,
-.content-wrapper.border.dark .wrapper-with-ads > div {
-  @media (min-width: mobile) {
-    border-right: 1px solid var(--dark-border);
-  }
+.content-wrapper.border .cardWrapper,
+.content-wrapper.border .wrapper-with-ads .cardWrapper {
+  position: relative;
 }
 
-.custom-grid.border.light > div,
-.custom-grid.border.dark > div {
-  border-right: none;
+.content-wrapper.border.dark .cardWrapper :global(.arr--author-time)::after,
+.content-wrapper.border.light .cardWrapper :global(.arr--author-time)::after {
+  content: "";
+  border-bottom: 1px solid var(--dark-border);
+  bottom: var(--arrow-spacing-xs);
+  position: absolute;
+  left: 0;
+  width: 100%;
+  @media (min-width: desktop) {
+    bottom: var(--arrow-spacing-m);
+  }
 }
-
-.content-wrapper :global(.author-name) {
-  color: var(--arrow-c-brand1);
-  font-size: var(--arrow-spacing-m);
+.content-wrapper.border.light .cardWrapper :global(.arr--author-time)::after {
+  border-bottom: 1px solid var(--light-border);
 }
 
-.content-wrapper.border.light,
-.content-wrapper.border.light .wrapper-with-ads {
-  :global(.arr--author-time) {
-    border-bottom: 1px solid var(--light-border);
-    padding-bottom: var(--arrow-spacing-m);
-  }
+.content-wrapper.border > .cardWrapper:nth-last-child(-n + 1) :global(.arr--author-time)::after,
+.content-wrapper.border.custom-grid
+  > .wrapper-with-ads
+  > .cardWrapper:nth-last-child(-n + 1)
+  :global(.arr--author-time)::after {
+  border-bottom: none;
 }
 
-.content-wrapper.border.dark,
-.content-wrapper.border.dark .wrapper-with-ads {
-  :global(.arr--author-time) {
-    border-bottom: 1px solid var(--dark-border);
-    padding-bottom: var(--arrow-spacing-m);
+.content-wrapper.border > .cardWrapper:nth-last-child(-n + 2) :global(.arr--author-time)::after,
+.content-wrapper.border.custom-grid
+  > .wrapper-with-ads
+  > .cardWrapper:nth-last-child(-n + 2)
+  :global(.arr--author-time)::after {
+  @media (min-width: mobile) {
+    border-bottom: none;
   }
 }
 
-.content-wrapper.border,
-.content-wrapper.border .wrapper-with-ads {
-  div:nth-last-child(-n + 1) {
-    :global(.arr--author-time) {
-      border-bottom: none;
-    }
-  }
-  @media (min-width: mobile) {
-    div:nth-last-child(-n + 2) {
-      :global(.arr--author-time) {
-        border-bottom: none;
-      }
-    }
-  }
+.content-wrapper.border > .cardWrapper:nth-last-child(-n + 3) :global(.arr--author-time)::after {
   @media (min-width: desktop) {
-    div:nth-last-child(-n + 3) {
-      :global(.arr--author-time) {
-        border-bottom: none;
-      }
-    }
+    border-bottom: none;
   }
 }
 
-.content-wrapper.border.light .count-3 {
-  @media (min-width: desktop) {
-    div:nth-last-child(-n + 3) {
-      :global(.arr--author-time) {
-        border-bottom: 1px solid var(--light-border);
-      }
-    }
+.content-wrapper.border .cardWrapper::after {
+  @media (min-width: mobile) {
+    content: "";
+    position: absolute;
+    height: 100%;
+    top: 0;
   }
 }
 
-.content-wrapper.border.dark .count-3 {
-  @media (min-width: desktop) {
-    div:first-child {
-      :global(.arr--author-time) {
-        border-bottom: 1px solid var(--dark-border);
-      }
+html[dir="ltr"] {
+  .content-wrapper.border.light .cardWrapper::after,
+  .content-wrapper.border.dark .cardWrapper::after {
+    @media (min-width: mobile) {
+      border-right: 1px solid var(--dark-border);
+      right: -16px;
+    }
+    @media (min-width: desktop) {
+      right: -24px;
     }
   }
-}
 
-.content-wrapper.border.light .wrapper-with-ads {
-  @media (min-width: desktop) {
-    div:nth-child(2) {
-      :global(.arr--author-time) {
-        border-bottom: 1px solid var(--light-border);
-      }
+  .content-wrapper.border.light .cardWrapper::after {
+    @media (min-width: mobile) {
+      border-right: 1px solid var(--light-border);
     }
   }
-}
 
-.content-wrapper.border.dark .wrapper-with-ads {
-  @media (min-width: desktop) {
-    div:nth-child(2) {
-      :global(.arr--author-time) {
-        border-bottom: 1px solid var(--dark-border);
-      }
+  .content-wrapper.border.light > .cardWrapper:nth-child(3n)::after,
+  .content-wrapper.border.dark > .cardWrapper:nth-child(3n)::after {
+    @media (min-width: desktop) {
+      border-right: none;
     }
   }
-}
 
-.content-wrapper.custom-grid.border.dark .count-3,
-.content-wrapper.border.dark .count-3,
-.content-wrapper.custom-grid.border.dark .count-2,
-.content-wrapper.border.dark .count-2 {
-  @media (min-width: desktop) {
-    div:nth-child(2) {
-      :global(.arr--author-time) {
-        border-bottom: none;
-      }
+  .content-wrapper.border > .cardWrapper:nth-child(2n)::after,
+  .content-wrapper.border .wrapper-with-ads > .cardWrapper:nth-child(2n)::after {
+    @media (min-width: mobile) and (max-width: desktop) {
+      border-right: none;
     }
   }
 }
 
-.content-wrapper.border.light > div:nth-child(2n),
-.content-wrapper.border.light .wrapper-with-ads > div:nth-child(2n) {
-  @media (min-width: mobile) {
-    border-right: none;
+html[dir="rtl"] {
+  .cardWrapper {
+    flex-direction: row-reverse;
   }
-  @media (min-width: desktop) {
-    border-right: 1px solid var(--light-border);
+
+  .container {
+    margin-right: var(--arrow-spacing-s);
   }
-}
 
-.content-wrapper.border.dark > div:nth-child(2n),
-.content-wrapper.border.dark .wrapper-with-ads > div:nth-child(2n) {
-  @media (min-width: mobile) {
-    border-right: none;
+  .content-wrapper.border.light .cardWrapper::after,
+  .content-wrapper.border.dark .cardWrapper::after {
+    @media (min-width: mobile) {
+      border-left: 1px solid var(--dark-border);
+      left: -16px;
+    }
+    @media (min-width: desktop) {
+      left: -24px;
+    }
   }
-  @media (min-width: desktop) {
-    border-right: 1px solid var(--dark-border);
+
+  .content-wrapper.border.light .cardWrapper::after {
+    @media (min-width: mobile) {
+      border-left: 1px solid var(--light-border);
+    }
   }
-}
 
-.custom-grid.border.dark > div:nth-child(2n),
-.custom-grid.border.light > div:nth-child(2n) {
-  @media (min-width: desktop) {
-    border-right: none;
+  .content-wrapper.border.light > .cardWrapper:nth-child(3n)::after,
+  .content-wrapper.border.dark > .cardWrapper:nth-child(3n)::after {
+    @media (min-width: desktop) {
+      border-left: none;
+    }
   }
-}
 
-.content-wrapper.border.light > div:nth-child(3n) {
-  @media (min-width: desktop) {
-    border-right: none;
+  .content-wrapper.border > .cardWrapper:nth-child(2n)::after,
+  .content-wrapper.border .wrapper-with-ads > .cardWrapper:nth-child(2n)::after {
+    @media (min-width: mobile) and (max-width: desktop) {
+      border-left: none;
+    }
   }
-}
 
-.content-wrapper.border.dark > div:nth-child(3n) {
-  @media (min-width: desktop) {
-    border-right: none;
+  .cardWrapper :global(.arr--author-image) svg,
+  .cardWrapper :global(.arr--author-image) img {
+    width: 80px;
+    height: 80px;
   }
 }
diff --git a/app/isomorphic/arrow/components/Rows/OpinionCollection/stories.js b/app/isomorphic/arrow/components/Rows/OpinionCollection/stories.js
index 08376663c..7684e1d6b 100644
--- a/app/isomorphic/arrow/components/Rows/OpinionCollection/stories.js
+++ b/app/isomorphic/arrow/components/Rows/OpinionCollection/stories.js
@@ -17,7 +17,7 @@ const collectionNameBorderColorLabel = "Collection Name Border Color";
 
 const border = {
   default: "fullBorder",
-  noBorder: "noBorder",
+  noBorder: "noBorder"
 };
 
 const configurableSlot = () => {
@@ -29,9 +29,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -47,7 +47,7 @@ withStore(
       buttonText: text("Button text", "Read More"),
       showRowTitle: boolean("Row title", true),
       showReadTime: boolean("Read time", true),
-      border: optionalSelect("Border settings", border),
+      border: optionalSelect("Border settings", border)
     };
     return <OpinionCollection collection={collection} config={contextConfig} />;
   });
@@ -57,9 +57,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -76,7 +76,7 @@ withStore(
       showRowTitle: boolean("Row title", true),
       showReadTime: boolean("Read time", true),
       border: optionalSelect("Border settings", border),
-      slotConfig: [{ type: "ad", component: configurableSlot }],
+      slotConfig: [{ type: "ad", component: configurableSlot }]
     };
     return <OpinionCollection collection={collection} config={contextConfig} />;
   });
diff --git a/app/isomorphic/arrow/components/Rows/SixColSixStories/index.js b/app/isomorphic/arrow/components/Rows/SixColSixStories/index.js
index 9622d1fd4..91bf79ae0 100644
--- a/app/isomorphic/arrow/components/Rows/SixColSixStories/index.js
+++ b/app/isomorphic/arrow/components/Rows/SixColSixStories/index.js
@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import get from "lodash/get";
+import get from "lodash.get";
 
 import { collectionToStories } from "@quintype/components";
 import { CollectionName } from "../../Atoms/CollectionName";
@@ -31,7 +31,7 @@ const SixColSixStories = ({
   getMoreStories,
   isLoadMoreVisible,
   isLoading,
-  isolatedLoadMore,
+  isolatedLoadMore
 }) => {
   const stories = collectionToStories(collection);
   if (!stories.length) return null;
@@ -44,7 +44,7 @@ const SixColSixStories = ({
     footerButton = "",
     border = "",
     localizationConfig = {},
-    subsequentLoadCount = 6,
+    subsequentLoadCount = 6
   } = config;
 
   const textColor = getTextColor(theme);
@@ -62,6 +62,7 @@ const SixColSixStories = ({
           componentName={"SixColSixStories"}
           offset={stories.length}
           limit={subsequentLoadCount}
+          theme={theme}
         />
       );
     }
@@ -85,8 +86,7 @@ const SixColSixStories = ({
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="six-col-six-stories"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName="wrapper">
         <CollectionName
           collection={collection}
@@ -98,18 +98,12 @@ const SixColSixStories = ({
           {stories.map((story, index) => (
             <div key={`six-col-six-stories-${index}`} styleName={`card-wrapper ${borderStyle} ${textColor}`}>
               <StoryCard story={story} theme={theme} config={config}>
-                <HeroImage
-                  story={story}
-                  aspectRatio={[
-                    [16, 9],
-                    [16, 9],
-                  ]}
-                />
+                <HeroImage story={story} aspectRatio={[[16, 9], [16, 9]]} />
                 <div styleName="content-wrapper">
                   <SectionTag story={story} borderColor={borderColor} />
                   <Headline story={story} headerLevel="6" premiumStoryIconConfig={config} />
                 </div>
-                <AuthorWithTime config={localizationConfig} story={story} />
+                <AuthorWithTime config={localizationConfig} story={story} collectionId={collection.id} />
               </StoryCard>
             </div>
           ))}
@@ -133,16 +127,16 @@ SixColSixStories.propTypes = {
     footerButton: PropTypes.string,
     collectionNameTemplate: PropTypes.string,
     collectionNameBorderColor: PropTypes.string,
-    subsequentLoadCount: PropTypes.number,
+    subsequentLoadCount: PropTypes.number
   }),
   getMoreStories: PropTypes.func,
   isLoadMoreVisible: PropTypes.bool,
   isLoading: PropTypes.bool,
-  isolatedLoadMore: PropTypes.bool,
+  isolatedLoadMore: PropTypes.bool
 };
 
 SixColSixStories.defaultProps = {
   getMoreStories: () => {},
   isLoadMoreVisible: true,
-  isLoading: false,
+  isLoading: false
 };
diff --git a/app/isomorphic/arrow/components/Rows/SixColSixStories/six-col-six-stories.m.css b/app/isomorphic/arrow/components/Rows/SixColSixStories/six-col-six-stories.m.css
index 6ea85b928..46c7bc27e 100644
--- a/app/isomorphic/arrow/components/Rows/SixColSixStories/six-col-six-stories.m.css
+++ b/app/isomorphic/arrow/components/Rows/SixColSixStories/six-col-six-stories.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 @value desktop from viewports;
 
diff --git a/app/isomorphic/arrow/components/Rows/SixColSixStories/stories.js b/app/isomorphic/arrow/components/Rows/SixColSixStories/stories.js
index b519f9ef5..2f9bece93 100644
--- a/app/isomorphic/arrow/components/Rows/SixColSixStories/stories.js
+++ b/app/isomorphic/arrow/components/Rows/SixColSixStories/stories.js
@@ -5,7 +5,7 @@ import {
   optionalSelect,
   sectionTagTemplates,
   collectionNameTemplates,
-  footerButton,
+  footerButton
 } from "../../../../storybook";
 import SixColSixStories from "./index";
 import Readme from "./README.md";
@@ -26,7 +26,7 @@ const sectionTagDefaultvalue = "#ff5858";
 
 const borderTemplate = {
   default: "noBorder",
-  verticalBorder: "fullBorder",
+  verticalBorder: "fullBorder"
 };
 
 const footerSlot = () => {
@@ -42,9 +42,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -66,7 +66,7 @@ withStore(
       showRowTitle: boolean("Row title", true),
       footerSlotConfig: { footerSlot: footerSlot },
       showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     };
 
     return <SixColSixStories collection={collection} config={contextConfig} />;
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/__snapshots__/listicle-story.test.js.snap b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/__snapshots__/listicle-story.test.js.snap
index b5769e1eb..3cb809d6c 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/__snapshots__/listicle-story.test.js.snap
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/__snapshots__/listicle-story.test.js.snap
@@ -31,13 +31,13 @@ exports[`Listicle Story Templates Should render listicle story template with sec
           Object {
             "avatar-s3-key": null,
             "avatar-url": "https://lh3.googleusercontent.com/-I9kNTMFkn3E/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rdZeM4LMMdylmULvtrAvmeVF9DmAQ/photo.jpg",
-            "bio": null,
+            "bio": "Virat Kohli (Hindi pronunciation: [ʋɪˈɾɑːʈ ˈkoːɦli] (listen); born 5 November 1988) is an Indian international cricketer and the former captain of the Indian national cricket team who plays as a right-handed batsman for Royal Challengers Bangalore in the IPL and for Delhi in Indian domestic cricket. Widely regarded as one of the greatest batsmen of all time,[4] Kohli holds the records for scoring most runs in T20 internationals and in the IPL. In 2020, the International Cricket Council named him the male cricketer of the decade. Kohli has also contributed to a number of India's successes, including winning the 2011 World Cup and the 2013 Champions trophy.",
             "contributor-role": Object {
               "id": 873,
               "name": "Author",
             },
             "id": 927927,
-            "name": "Pravin Atigre",
+            "name": "Virat Kohli",
             "slug": "pravin-atigre",
             "social": null,
             "twitter-handle": null,
@@ -302,7 +302,7 @@ exports[`Listicle Story Templates Should render listicle story template with sec
         },
         "entities": Object {},
         "external-id": null,
-        "first-published-at": 1602155728566,
+        "first-published-at": 1671083514919,
         "headline": "It pays to be kind: improving workplace culture through kindness",
         "hero-image-attribution": "Credits: Asif Asharaf",
         "hero-image-caption": "Saque ipsa quae ab illo inventore veritatis et quip",
@@ -451,13 +451,13 @@ exports[`Listicle Story Templates Should render listicle story template without
           Object {
             "avatar-s3-key": null,
             "avatar-url": "https://lh3.googleusercontent.com/-I9kNTMFkn3E/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rdZeM4LMMdylmULvtrAvmeVF9DmAQ/photo.jpg",
-            "bio": null,
+            "bio": "Virat Kohli (Hindi pronunciation: [ʋɪˈɾɑːʈ ˈkoːɦli] (listen); born 5 November 1988) is an Indian international cricketer and the former captain of the Indian national cricket team who plays as a right-handed batsman for Royal Challengers Bangalore in the IPL and for Delhi in Indian domestic cricket. Widely regarded as one of the greatest batsmen of all time,[4] Kohli holds the records for scoring most runs in T20 internationals and in the IPL. In 2020, the International Cricket Council named him the male cricketer of the decade. Kohli has also contributed to a number of India's successes, including winning the 2011 World Cup and the 2013 Champions trophy.",
             "contributor-role": Object {
               "id": 873,
               "name": "Author",
             },
             "id": 927927,
-            "name": "Pravin Atigre",
+            "name": "Virat Kohli",
             "slug": "pravin-atigre",
             "social": null,
             "twitter-handle": null,
@@ -722,7 +722,7 @@ exports[`Listicle Story Templates Should render listicle story template without
         },
         "entities": Object {},
         "external-id": null,
-        "first-published-at": 1602155728566,
+        "first-published-at": 1671083514919,
         "headline": "It pays to be kind: improving workplace culture through kindness",
         "hero-image-attribution": "Credits: Asif Asharaf",
         "hero-image-caption": "Saque ipsa quae ab illo inventore veritatis et quip",
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/index.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/index.js
index e9f70a883..c8f4709d8 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/index.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/index.js
@@ -1,7 +1,7 @@
 import { SocialShare } from "@quintype/components";
 import React from "react";
 import { useSelector } from "react-redux";
-import get from "lodash/get";
+import get from "lodash.get";
 import PropTypes from "prop-types";
 import { AuthorCard } from "../../../Atoms/AuthorCard";
 import { CaptionAttribution } from "../../../Atoms/CaptionAttribution";
@@ -16,6 +16,7 @@ import "./listicle-story.m.css";
 import { StoryElementCard, SlotAfterStory } from "../../../Molecules/StoryElementCard";
 import { StoryTags } from "../../../Atoms/StoryTags";
 import AsideCollection from "../../AsideCollection";
+import { StoryReview } from "../../../Atoms/StoryReview";
 
 const ListicleStoryTemplate = ({
   story = {},
@@ -25,6 +26,7 @@ const ListicleStoryTemplate = ({
   widgetComp = () => {},
   firstChild,
   secondChild,
+  enableDarkMode
 }) => {
   const {
     theme = "",
@@ -32,18 +34,21 @@ const ListicleStoryTemplate = ({
     publishedDetails = {},
     templateType = "",
     authorDetails = {
-      template: "default",
+      template: "default"
     },
     asideCollection = {},
     showSection,
     sectionTagSettings,
-    premiumStoryIconConfig = {},
+    premiumStoryIconConfig = {}
   } = config;
   const visibledCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
   const { "bullet-type": storyBulletType = "" } = story;
   const storyId = get(story, ["id"], "");
   const isNumberedBullet = storyBulletType !== "bullets";
-  const timezone = useSelector((state) => get(state, ["qt", "data", "timezone"], null));
+
+  const qtState = useSelector((state) => get(state, ["qt"], {}));
+  const timezone = get(qtState, ["data", "timezone"], null);
+  const mountAt = get(qtState, ["config", "mountAt"], "");
 
   // Content Blocks
   const HeroImageBlock = (settings) => {
@@ -72,58 +77,66 @@ const ListicleStoryTemplate = ({
     </div>
   );
 
-  const AuthourBlock = () => (
+  const AuthorBlock = () => {
+    return (
+      <>
+        <AuthorCard story={story} {...authorDetails} mountAt={mountAt} />
+        <div styleName="timestamp-social-share">
+          <div id={`publish-details-container-${storyId}`}>
+            <PublishDetails story={story} opts={publishedDetails} template="story" timezone={timezone} />
+          </div>
+          <div id={`story-share-${storyId}`} className="content-style">
+            <SocialShare
+              template={SocialShareTemplate}
+              theme={theme}
+              fullUrl={encodeURI(story.url)}
+              title={story.headline}
+              shareIconId={`share-icon-story-share-${storyId}`}
+            />
+          </div>
+        </div>
+      </>
+    );
+  };
+
+  const BodyBlock = () => (
     <>
-      <AuthorCard story={story} {...authorDetails} />
-      <div styleName="timestamp-social-share">
-        <PublishDetails story={story} opts={publishedDetails} template="story" timezone={timezone} />
-        <div id={`story-share-${storyId}`} className="content-style">
-          <SocialShare
-            template={SocialShareTemplate}
-            theme={theme}
-            fullUrl={encodeURI(story.url)}
-            title={story.headline}
-            shareIconId={`share-icon-story-share-${storyId}`}
+      <StoryReview theme={theme} story={story} />
+      <div styleName={`body-block ${isNumberedBullet ? "numbered-bullet-style" : ""}`}>
+        {visibledCards.map((card, index) => {
+          return (
+            <React.Fragment key={card.id}>
+              {!isNumberedBullet ? (
+                <div styleName="bullet-style-dash" />
+              ) : (
+                <div styleName="bullet-style-number">{index + 1}.</div>
+              )}
+              <StoryElementCard
+                story={story}
+                card={card}
+                key={card.id}
+                config={storyElementsConfig}
+                adComponent={adComponent}
+                widgetComp={widgetComp}
+                enableDarkMode={enableDarkMode}
+              />
+            </React.Fragment>
+          );
+        })}
+        {firstChild}
+        <div styleName="story-tags">
+          <StoryTags tags={story.tags} />
+          <SlotAfterStory
+            id={story.id}
+            element={story.customSlotAfterStory}
+            AdComponent={adComponent}
+            WidgetComp={widgetComp}
           />
         </div>
+        {secondChild}
       </div>
     </>
   );
-
-  const BodyBlock = () => (
-    <div styleName={`body-block ${isNumberedBullet ? "numbered-bullet-style" : ""}`}>
-      {visibledCards.map((card, index) => {
-        return (
-          <React.Fragment key={card.id}>
-            {!isNumberedBullet ? (
-              <div styleName="bullet-style-dash" />
-            ) : (
-              <div styleName="bullet-style-number">{index + 1}.</div>
-            )}
-            <StoryElementCard
-              story={story}
-              card={card}
-              key={card.id}
-              config={storyElementsConfig}
-              adComponent={adComponent}
-              widgetComp={widgetComp}
-            />
-          </React.Fragment>
-        );
-      })}
-      {firstChild}
-      <div styleName="story-tags">
-        <StoryTags tags={story.tags} />
-        <SlotAfterStory
-          id={story.id}
-          element={story.customSlotAfterStory}
-          AdComponent={adComponent}
-          WidgetComp={widgetComp}
-        />
-      </div>
-      {secondChild}
-    </div>
-  );
   const SideColumnBlock = () =>
     asideCollection && (
       <AsideCollection
@@ -139,19 +152,14 @@ const ListicleStoryTemplate = ({
   // Templates
   const DefaultTemplate = () => (
     <>
-      <HeroImageBlock
-        aspectRatio={[
-          [16, 9],
-          [16, 6],
-        ]}
-      />
+      <HeroImageBlock aspectRatio={[[16, 9], [16, 6]]} />
       <div styleName="grid-container">
         <div styleName="full-grid">
           <CaptionAttributionBlock />
         </div>
         <div data-type-column="left" styleName="left-column">
           <HeadlineBlock />
-          <AuthourBlock />
+          <AuthorBlock />
           <BodyBlock />
         </div>
         <div data-type-column="right" styleName="right-column">
@@ -169,7 +177,7 @@ const ListicleStoryTemplate = ({
         <div styleName="center-column">
           <CaptionAttributionBlock />
           <HeadlineBlock />
-          <AuthourBlock />
+          <AuthorBlock />
           <BodyBlock />
         </div>
       </div>
@@ -184,7 +192,7 @@ const ListicleStoryTemplate = ({
         <div styleName="left-column">
           <HeroImageBlock />
           <CaptionAttributionBlock />
-          <AuthourBlock />
+          <AuthorBlock />
           <BodyBlock />
         </div>
         <div styleName="right-column">
@@ -204,7 +212,7 @@ const ListicleStoryTemplate = ({
         </div>
         <div styleName="center-column">
           <CaptionAttributionBlock />
-          <AuthourBlock />
+          <AuthorBlock />
           <BodyBlock />
         </div>
       </div>
@@ -219,18 +227,13 @@ const ListicleStoryTemplate = ({
               <HeadlineBlock />
             </div>
           </div>
-          <HeroImageBlock
-            aspectRatio={[
-              [2, 3],
-              [16, 9],
-            ]}
-          />
+          <HeroImageBlock aspectRatio={[[2, 3], [16, 9]]} />
         </div>
       </div>
       <div styleName="grid-container">
         <div styleName="center-column">
           <CaptionAttributionBlock />
-          <AuthourBlock />
+          <AuthorBlock />
           <BodyBlock />
         </div>
       </div>
@@ -243,18 +246,13 @@ const ListicleStoryTemplate = ({
           <HeadlineBlock />
         </div>
         <div styleName="sideway-hero">
-          <HeroImageBlock
-            aspectRatio={[
-              [16, 9],
-              [4, 3],
-            ]}
-          />
+          <HeroImageBlock aspectRatio={[[16, 9], [4, 3]]} />
           <CaptionAttributionBlock />
         </div>
       </div>
       <div styleName="grid-container">
         <div styleName="center-column">
-          <AuthourBlock />
+          <AuthorBlock />
           <BodyBlock />
         </div>
       </div>
@@ -282,9 +280,7 @@ const ListicleStoryTemplate = ({
     <div
       data-test-id={dataTestId}
       className="arrow-component arr--content-wrapper arr--listicle-story-template-wrapper"
-      style={{ backgroundColor: theme }}
-      styleName="story-content-inner-wrapper"
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       {renderTemplate()}
     </div>
   );
@@ -295,7 +291,7 @@ ListicleStoryTemplate.propTypes = {
   config: PropTypes.shape({
     templateType: PropTypes.string,
     authorCard: PropTypes.object,
-    asideCollection: PropTypes.object,
+    asideCollection: PropTypes.object
   }),
   firstChild: PropTypes.node,
   secondChild: PropTypes.node,
@@ -303,6 +299,7 @@ ListicleStoryTemplate.propTypes = {
   adComponent: PropTypes.func,
   widgetComp: PropTypes.func,
   premiumStoryIconConfig: PropTypes.object,
+  enableDarkMode: PropTypes.bool
 };
 
 export default StateProvider(ListicleStoryTemplate);
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.m.css b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.m.css
index 25de5c3f0..eacf2c4ff 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.m.css
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.m.css
@@ -1,4 +1,4 @@
-@import "../../../../../../assets/arrow/stylesheets/mixins.scss";
+@import "../../../../../assets/stylesheets/mixins.scss";
 :root {
   --grid-container-width: 1140px;
   --fluid-grid-container-width: 1440px;
@@ -17,6 +17,7 @@
 .headline-block :global(.arr--sub-headline) {
   font-size: var(--arrow-fs-s);
   font-style: italic;
+  padding-right: 2px;
   margin: var(--arrow-spacing-xs) 0 var(--arrow-spacing-l);
   @include tablet {
     font-size: var(--arrow-fs-m);
@@ -195,9 +196,7 @@
     grid-column: 2 / 7;
   }
 }
-.story-content-inner-wrapper {
-  margin-bottom: var(--arrow-spacing-m) ;
-}
+
 .sideway-hero {
   @include tablet {
     grid-column: 6 / 13;
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.test.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.test.js
index a4bcd2635..41e255c05 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.test.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.test.js
@@ -15,7 +15,7 @@ const storyElementsConfig = {
   "q-and-a": {},
   question: {},
   answer: {},
-  references: {},
+  references: {}
 };
 
 beforeEach(() => {
@@ -26,7 +26,7 @@ describe("Listicle Story Templates", () => {
   it("Should render listicle story template with section tag", () => {
     const templateConfig = {
       templateType: "default",
-      showSection: true,
+      showSection: true
     };
     const wrapper = shallow(
       <ListicleStoryTemplate story={story} config={templateConfig} storyElementsConfig={storyElementsConfig} />
@@ -37,7 +37,7 @@ describe("Listicle Story Templates", () => {
   it("Should render listicle story template without section tag", () => {
     const templateConfig = {
       templateType: "default",
-      showSection: false,
+      showSection: false
     };
     const wrapper = shallow(
       <ListicleStoryTemplate story={story} config={templateConfig} storyElementsConfig={storyElementsConfig} />
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/stories.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/stories.js
index d51f47a1a..d0ec5135b 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/stories.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/stories.js
@@ -22,20 +22,20 @@ const storyTemplates = {
   "Headline Priority": "headline-priority",
   "Headline Hero Priority": "headline-hero-priority",
   "Hero Overlay": "hero-overlay",
-  "Headline Sideway": "headline-sideway",
+  "Headline Sideway": "headline-sideway"
 };
 
 const sectionTagTemplates = {
   Default: "",
   "Border Bottom Small": "borderBottomSml",
   Solid: "solid",
-  "Border Left": "borderLeft",
+  "Border Left": "borderLeft"
 };
 
 const authorTemplates = {
   default: "default",
   leftAligned: "leftAligned",
-  centerAligned: "centerAligned",
+  centerAligned: "centerAligned"
 };
 
 withStore(
@@ -44,9 +44,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 ).add("Default", () => {
@@ -58,7 +58,7 @@ withStore(
     publishedDetails: {
       showReadTime: boolean("Read time", true),
       enablePublishedTime: boolean("Show Published Time", true),
-      enableUpdatedTime: boolean("Show Updated Time", false),
+      enableUpdatedTime: boolean("Show Updated Time", false)
     },
     authorDetails: {
       template: optionalSelect("Author Templates", authorTemplates) || "default",
@@ -66,16 +66,19 @@ withStore(
         showBio: boolean("Author Bio", false),
         showImage: boolean("Author Image", true),
         showName: boolean("Author Name", true),
-      },
+        showLabels: boolean("show labels", true),
+        showGuestAuthorName: boolean("show guest author name", false),
+        showGuestAuthorImage: boolean("show guest author image", false)
+      }
     },
     sectionTagSettings: {
       template: optionalSelect("Section Template", sectionTagTemplates) || "borderBottomSml",
-      borderColor: color("Section Tag Border Color", "#ff214b"),
+      borderColor: color("Section Tag Border Color", "#ff214b")
     },
     premiumStoryIconConfig: {
       iconColor: "#F7B500",
       iconType: "star",
-      enablePremiumStoryIcon: true,
+      enablePremiumStoryIcon: true
     },
     asideCollection: {
       data: collection,
@@ -85,10 +88,10 @@ withStore(
         theme: color(label, defaultvalue),
         adSlot: [{ type: "ad", component: configurableSlot }],
         showAuthor: boolean("Author", true),
-        showTime: boolean("Timestamp", true),
+        showTime: boolean("Timestamp", true)
       },
-      slots: slotData,
-    },
+      slots: slotData
+    }
   };
 
   const storyElementsConfig = {
@@ -100,7 +103,7 @@ withStore(
     "q-and-a": {},
     question: {},
     answer: {},
-    references: {},
+    references: {}
   };
   return (
     <ListicleStoryTemplate
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/index.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/index.js
index 59c8edda7..9a6df6a2a 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/index.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/index.js
@@ -1,8 +1,7 @@
-/* eslint-disable max-len */
 import React from "react";
 import PropTypes from "prop-types";
 import { useSelector } from "react-redux";
-import get from "lodash/get";
+import get from "lodash.get";
 import { LiveBlogStoryTemplates } from "./templates";
 import { StateProvider } from "../../../SharedContext";
 import "./live-blog.m.css";
@@ -15,19 +14,21 @@ const LiveBlogStoryTemplate = ({
   widgetComp,
   firstChild,
   secondChild,
+  enableDarkMode
 }) => {
   const { theme = "", templateType = "default", verticalShare = "" } = config;
 
   const containerClass = templateType !== "hero-overlay" ? "container" : "";
-  const timezone = useSelector((state) => get(state, ["qt", "data", "timezone"], null));
+  const qtState = useSelector((state) => get(state, ["qt"], {}));
+  const timezone = get(qtState, ["data", "timezone"], null);
+  const mountAt = get(qtState, ["config", "mountAt"], "");
 
   return (
     <div
       data-test-id={`live-blog-${templateType}`}
       className={`arrow-component arr--content-wrapper arr-story-grid arr--live-blog-story-template-wrapper ${templateType}`}
-      style={{ backgroundColor: theme }}
-      styleName={`${containerClass} ${verticalShare} wrapper`}
-    >
+      style={{ backgroundColor: theme || "initial" }}
+      styleName={`${containerClass} ${verticalShare} wrapper`}>
       <LiveBlogStoryTemplates
         templateType={templateType}
         story={story}
@@ -38,6 +39,8 @@ const LiveBlogStoryTemplate = ({
         firstChild={firstChild}
         secondChild={secondChild}
         timezone={timezone}
+        enableDarkMode={enableDarkMode}
+        mountAt={mountAt}
       />
     </div>
   );
@@ -46,13 +49,14 @@ const LiveBlogStoryTemplate = ({
 LiveBlogStoryTemplate.propTypes = {
   story: PropTypes.object,
   config: PropTypes.shape({
-    templateType: PropTypes.string,
+    templateType: PropTypes.string
   }),
   firstChild: PropTypes.node,
   secondChild: PropTypes.node,
   storyElementsConfig: PropTypes.object,
   adComponent: PropTypes.func,
   widgetComp: PropTypes.func,
+  enableDarkMode: PropTypes.bool
 };
 
 export default StateProvider(LiveBlogStoryTemplate);
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/live-blog.m.css b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/live-blog.m.css
index 992bded7e..4db3da036 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/live-blog.m.css
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/live-blog.m.css
@@ -1,4 +1,4 @@
-@import "../../../../../../assets/arrow/stylesheets/mixins.scss";
+@import "../../../../../assets/stylesheets/mixins.scss";
 
 .header-details {
   margin-top: var(--arrow-spacing-l);
@@ -10,6 +10,7 @@
 .header-details :global(.arr--sub-headline) {
   font-size: var(--arrow-fs-s);
   font-style: italic;
+  padding-right: 2px;
   @include tablet {
     font-size: var(--arrow-fs-m);
   }
@@ -177,7 +178,6 @@
 }
 
 .overlay-hero {
-  z-index: var(--z-index-m1);
   grid-column: 1/5;
   grid-row: 1/2;
   margin-top: var(--arrow-spacing-s);
@@ -195,10 +195,10 @@
 
 .overlay-grid {
   align-self: center;
+  z-index: var(--z-index-9);
   grid-row: 1/2;
   grid-column: 1/5;
   padding: 0 36px;
-  z-index: var(--z-index-m1);
   @include tablet {
     grid-column: 4/12;
     padding: 0;
@@ -206,7 +206,7 @@
 }
 
 .key-events {
-  margin: var(--arrow-fs-l) 0 36px;
+  margin: var(--arrow-spacing-l) 0 36px;
 }
 
 .share-cards.dark {
@@ -314,7 +314,9 @@
 }
 
 .tablet-index-2 {
-  z-index: var(--z-index-m2);
+  @include tablet {
+    z-index: 2;
+  }
 }
 
 html[dir="rtl"] {
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/stories.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/stories.js
index 93f14a41c..2c49c7bed 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/stories.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/stories.js
@@ -18,7 +18,7 @@ const storyElementsConfig = {
   "also-read": {},
   "q-and-a": {},
   question: {},
-  answer: {},
+  answer: {}
 };
 
 const label = "BG Color";
@@ -27,7 +27,7 @@ const defaultvalue = "#ffffff";
 const authorTemplate = {
   default: "default",
   leftAligned: "leftAligned",
-  centerAligned: "centerAligned",
+  centerAligned: "centerAligned"
 };
 
 const iconTypeOptions = {
@@ -35,12 +35,12 @@ const iconTypeOptions = {
   "Circular Plain Svg": "circular-plain-svg",
   "Plain Svg": "plain-svg",
   "Plain Color Svg": "plain-color-svg",
-  "Square Svg": "square-svg",
+  "Square Svg": "square-svg"
 };
 
 const shareType = {
   "Vertical Share": "sticky",
-  "Horizontal Share": "",
+  "Horizontal Share": ""
 };
 
 const templateTypes = {
@@ -49,7 +49,7 @@ const templateTypes = {
   "Headline Sideway": "headline-sideway",
   "Hero Priority": "hero-priority",
   "Headline Priority": "headline-priority",
-  "Headline Hero Priority": "headline-hero-priority",
+  "Headline Hero Priority": "headline-hero-priority"
 };
 
 const configurableSlot = () => {
@@ -62,9 +62,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 ).add("Default", () => {
@@ -80,7 +80,7 @@ withStore(
     publishedDetails: {
       enablePublishedTime: boolean("Show Published Time", true),
       enableUpdatedTime: boolean("Show Updated Time", false),
-      showReadTime: boolean("Read time", false),
+      showReadTime: boolean("Read time", false)
     },
     authorDetails: {
       template: optionalSelect("Author templates", authorTemplate),
@@ -88,12 +88,15 @@ withStore(
         showBio: boolean("Author Bio", false),
         showImage: boolean("Author Image", false),
         showName: boolean("Author Name", true),
-      },
+        showLabels: boolean("show labels", true),
+        showGuestAuthorName: boolean("show guest author name", false),
+        showGuestAuthorImage: boolean("show guest author image", false)
+      }
     },
     premiumStoryIconConfig: {
       iconColor: "#F7B500",
       iconType: "star",
-      enablePremiumStoryIcon: true,
+      enablePremiumStoryIcon: true
     },
     asideCollection: {
       data: collection,
@@ -101,10 +104,10 @@ withStore(
         title: text("Aside Collection Title", "Trending"),
         theme: color(label, defaultvalue),
         showAuthor: boolean("Show Author", true),
-        showTime: boolean("Show Timestamp", true),
+        showTime: boolean("Show Timestamp", true)
       },
-      slots: slotData,
-    },
+      slots: slotData
+    }
   };
   return (
     <LiveBlog
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/templates.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/templates.js
index 7d8a45291..23786aa05 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/templates.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/templates.js
@@ -1,5 +1,5 @@
 import React from "react";
-import get from "lodash/get";
+import get from "lodash.get";
 import PropTypes from "prop-types";
 import { SocialShare } from "@quintype/components";
 import { SocialShareTemplate } from "../../../Molecules/SocialShareTemplate";
@@ -18,6 +18,7 @@ import LiveIcon from "../../../Svgs/liveicon";
 import KeyEvents from "../../../Molecules/KeyEvents";
 import { ClockIcon } from "../../../Svgs/clock-icon";
 import { StoryHeadline } from "../../../Atoms/StoryHeadline";
+import { StoryReview } from "../../../Atoms/StoryReview";
 
 export const LiveBlogStoryTemplates = ({
   story = {},
@@ -28,19 +29,21 @@ export const LiveBlogStoryTemplates = ({
   firstChild,
   secondChild,
   timezone,
+  enableDarkMode,
+  mountAt
 }) => {
   const {
     theme = "",
     asideCollection = {},
     templateType,
-    noOfVisibleCards = -1,
+    noOfVisibleCards = 0,
     publishedDetails = {},
     verticalShare = "",
     shareIconType = "plain-color-svg",
     authorDetails = {
-      template: "default",
+      template: "default"
     },
-    premiumStoryIconConfig = {},
+    premiumStoryIconConfig = {}
   } = config;
 
   const visibleCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
@@ -100,6 +103,7 @@ export const LiveBlogStoryTemplates = ({
             theme={theme}
             adComponent={adComponent}
             widgetComp={widgetComp}
+            enableDarkMode={enableDarkMode}
           />
         </div>
       );
@@ -140,11 +144,20 @@ export const LiveBlogStoryTemplates = ({
   const StoryData = () => {
     return (
       <>
-        <AuthorCard clazzName="gap-32" story={story} template={authorDetails.template} opts={authorDetails.opts} />
+        <AuthorCard
+          clazzName="gap-32"
+          story={story}
+          template={authorDetails.template}
+          opts={authorDetails.opts}
+          mountAt={mountAt}
+        />
         <div styleName="timestamp-social-share">
-          <PublishDetails story={story} opts={publishedDetails} template="story" timezone={timezone} />
+          <div id={`publish-details-container-${storyId}`}>
+            <PublishDetails story={story} opts={publishedDetails} template="story" timezone={timezone} />
+          </div>
           {!verticalShare && <SocialShareComponent />}
         </div>
+        <StoryReview theme={theme} story={story} />
         {showKeyEvents()}
         <StoryCards />
         <div styleName="space-32">
@@ -166,14 +179,7 @@ export const LiveBlogStoryTemplates = ({
     return (
       <>
         <div data-test-id="hero-image" styleName="grid-col-full index-2">
-          <HeroImage
-            story={story}
-            aspectRatio={[
-              [16, 9],
-              [8, 3],
-            ]}
-            isStoryPageImage
-          />
+          <HeroImage story={story} aspectRatio={[[16, 9], [8, 3]]} isStoryPageImage />
         </div>
         <div styleName="header-wrapper">
           <CaptionAttribution story={story} config={config} />
@@ -202,15 +208,8 @@ export const LiveBlogStoryTemplates = ({
   const HeroOverlay = (story) => {
     return (
       <>
-        <div styleName="overlay-hero index-2">
-          <HeroImage
-            story={story}
-            aspectRatio={[
-              [1, 2],
-              [16, 9],
-            ]}
-            isStoryPageImage
-          />
+        <div styleName="overlay-hero  index-2">
+          <HeroImage story={story} aspectRatio={[[1, 2], [16, 9]]} isStoryPageImage />
         </div>
         <div styleName="overlay-grid">
           <HeaderCard />
@@ -381,7 +380,7 @@ LiveBlogStoryTemplates.propTypes = {
   config: PropTypes.shape({
     templateType: PropTypes.string,
     authorCard: PropTypes.object,
-    asideCollection: PropTypes.object,
+    asideCollection: PropTypes.object
   }),
   timezone: PropTypes.string,
   firstChild: PropTypes.node,
@@ -389,4 +388,5 @@ LiveBlogStoryTemplates.propTypes = {
   storyElementsConfig: PropTypes.object,
   adComponent: PropTypes.func,
   widgetComp: PropTypes.func,
+  enableDarkMode: PropTypes.bool
 };
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/index.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/index.js
index a26028d6b..ee7aa90a2 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/index.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/index.js
@@ -1,10 +1,9 @@
-/* eslint-disable max-len */
 import { SocialShare } from "@quintype/components";
 import PropTypes from "prop-types";
 import React from "react";
-import get from "lodash/get";
+import get from "lodash.get";
 import { useSelector } from "react-redux";
-import kebabCase from "lodash/kebabCase";
+import kebabCase from "lodash.kebabcase";
 import { AuthorCard } from "../../../Atoms/AuthorCard";
 import { CaptionAttribution } from "../../../Atoms/CaptionAttribution";
 import { SocialShareTemplate } from "../../../Molecules/SocialShareTemplate";
@@ -15,6 +14,7 @@ import { HeroImage } from "../../../Atoms/HeroImage";
 import { PublishDetails } from "../../../Atoms/PublishDetail";
 import { StoryTags } from "../../../Atoms/StoryTags";
 import { PhotoStoryElement, SlotAfterStory } from "../../../Molecules/StoryElementCard";
+import { StoryReview } from "../../../Atoms/StoryReview";
 import { StateProvider } from "../../../SharedContext";
 import AsideCollection from "../../AsideCollection";
 import "./photo.m.css";
@@ -27,6 +27,7 @@ const PhotoStory = ({
   adComponent,
   firstChild,
   secondChild,
+  enableDarkMode
 }) => {
   const {
     theme = "",
@@ -37,15 +38,18 @@ const PhotoStory = ({
     verticalShare = "",
     shareIconType = "plain-color-svg",
     authorDetails = {
-      template: "default",
+      template: "default"
     },
     imageRender = "fullBleed",
-    premiumStoryIconConfig = {},
+    premiumStoryIconConfig = {}
   } = config;
   const isFullBleed = imageRender === "fullBleed";
   const visibledCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
   const storyId = get(story, ["id"], "");
-  const timezone = useSelector((state) => get(state, ["qt", "data", "timezone"], null));
+
+  const qtState = useSelector((state) => get(state, ["qt"], {}));
+  const timezone = get(qtState, ["data", "timezone"], null);
+  const mountAt = get(qtState, ["config", "mountAt"], "");
 
   const HeaderCard = () => {
     return (
@@ -73,40 +77,53 @@ const PhotoStory = ({
     );
   };
 
-  const StoryData = () => (
-    <>
-      {authorDetails && (
-        <AuthorCard clazzName="gap-32" story={story} template={authorDetails.template} opts={authorDetails.opts} />
-      )}
-      <div styleName="story-details">
-        <PublishDetails story={story} opts={publishedDetails} template="story" timezone={timezone} />
-        {!verticalShare && <SocialShareComponent />}
-      </div>
-      {visibledCards.map((card) => {
-        return (
-          <PhotoStoryElement
+  const StoryData = () => {
+    return (
+      <>
+        {authorDetails && (
+          <AuthorCard
+            clazzName="gap-32"
             story={story}
-            card={card}
-            key={get(card, ["id"], "")}
-            config={{ ...storyElementsConfig, theme }}
-            adComponent={adComponent}
-            widgetComp={widgetComp}
+            template={authorDetails.template}
+            opts={authorDetails.opts}
+            mountAt={mountAt}
           />
-        );
-      })}
-      <div styleName="space-32">
-        {firstChild}
-        <StoryTags tags={story.tags} />
-        <SlotAfterStory
-          id={story.id}
-          element={story.customSlotAfterStory}
-          AdComponent={adComponent}
-          WidgetComp={widgetComp}
-        />
-        {secondChild}
-      </div>
-    </>
-  );
+        )}
+        <div styleName="story-details">
+          <div id={`publish-details-container-${storyId}`}>
+            <PublishDetails story={story} opts={publishedDetails} template="story" timezone={timezone} />
+          </div>
+          {!verticalShare && <SocialShareComponent />}
+        </div>
+        <StoryReview theme={theme} story={story} />
+        {visibledCards.map((card) => {
+          return (
+            <PhotoStoryElement
+              story={story}
+              card={card}
+              key={get(card, ["id"], "")}
+              config={{ ...storyElementsConfig, theme }}
+              adComponent={adComponent}
+              widgetComp={widgetComp}
+              enableDarkMode={enableDarkMode}
+              theme={theme}
+            />
+          );
+        })}
+        <div styleName="space-32">
+          {firstChild}
+          <StoryTags tags={story.tags} />
+          <SlotAfterStory
+            id={story.id}
+            element={story.customSlotAfterStory}
+            AdComponent={adComponent}
+            WidgetComp={widgetComp}
+          />
+          {secondChild}
+        </div>
+      </>
+    );
+  };
 
   const renderImages = (imageRender) => {
     switch (imageRender) {
@@ -123,15 +140,7 @@ const PhotoStory = ({
     return (
       <>
         <div data-test-id="hero-image" styleName={`${renderImages(imageRender)} index-2`}>
-          <HeroImage
-            story={story}
-            aspectRatio={[
-              [16, 9],
-              [8, 3],
-            ]}
-            defaultFallback={false}
-            isStoryPageImage
-          />
+          <HeroImage story={story} aspectRatio={[[16, 9], [8, 3]]} defaultFallback={false} isStoryPageImage />
         </div>
         <div styleName="grid-col-2-10 space-12">
           <CaptionAttribution story={story} config={config} />
@@ -224,11 +233,11 @@ const PhotoStory = ({
     }
   };
   PhotoStoryTemplate.propTypes = {
-    templateType: PropTypes.string,
+    templateType: PropTypes.string
   };
 
   PhotoStoryTemplate.propTypes = {
-    templateType: PropTypes.string,
+    templateType: PropTypes.string
   };
 
   return (
@@ -236,8 +245,7 @@ const PhotoStory = ({
       styleName={`${verticalShare} ${isFullBleed ? "fullBleed" : ""}`}
       data-test-id={`photo-story-${templateType}-${kebabCase(imageRender)}`}
       className={`arrow-component arr-story-grid arr--content-wrapper arr--photo-story-template-wrapper ${templateType} `}
-      style={{ backgroundColor: theme }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <PhotoStoryTemplate templateType={templateType} />
     </div>
   );
@@ -247,13 +255,14 @@ PhotoStory.propTypes = {
   story: PropTypes.object,
   config: PropTypes.shape({
     templateType: PropTypes.string,
-    asideCollection: PropTypes.object,
+    asideCollection: PropTypes.object
   }),
   firstChild: PropTypes.node,
   secondChild: PropTypes.node,
   storyElementsConfig: PropTypes.object,
   adComponent: PropTypes.func,
   widgetComp: PropTypes.func,
+  enableDarkMode: PropTypes.bool
 };
 
 export default StateProvider(PhotoStory);
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/photo-story.test.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/photo-story.test.js
index 8779da1c5..c38fc3a34 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/photo-story.test.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/photo-story.test.js
@@ -22,7 +22,7 @@ const storyElementsConfig = {
   "also-read": {},
   "q-and-a": {},
   question: {},
-  answer: {},
+  answer: {}
 };
 
 const templateConfig = {
@@ -31,7 +31,7 @@ const templateConfig = {
   publishedDetails: {
     enablePublishedTime: true,
     enableUpdatedTime: false,
-    showReadTime: true,
+    showReadTime: true
   },
   asideCollection: {
     data: collection,
@@ -39,9 +39,9 @@ const templateConfig = {
       collectionNameBorderColor: "#3a9fdd",
       title: "Trending",
       theme: "#ffffff",
-      adSlot: [{ type: "ad", component: configurableSlot }],
-    },
-  },
+      adSlot: [{ type: "ad", component: configurableSlot }]
+    }
+  }
 };
 
 beforeEach(() => {
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/photo.m.css b/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/photo.m.css
index ebc07873d..6b5309fd9 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/photo.m.css
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/photo.m.css
@@ -1,4 +1,4 @@
-@import "../../../../../../assets/arrow/stylesheets/mixins.scss";
+@import "../../../../../assets/stylesheets/mixins.scss";
 
 .grid-col-full {
   grid-column: 1/5;
@@ -78,6 +78,7 @@
   :global(.arr--sub-headline) {
     font-size: var(--arrow-fs-s);
     font-style: italic;
+    padding-right: 2px;
     @include tablet {
       font-size: var(--arrow-fs-m);
     }
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/stories.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/stories.js
index 94cbab6f6..87fec61a2 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/stories.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/stories.js
@@ -13,13 +13,13 @@ const collectionNameBorderColorLabel = "Aside Collection Name Border Color";
 
 const imageTypeOptions = {
   "Full Bleed": "fullBleed",
-  "With In Container": "container",
+  "With In Container": "container"
 };
 
 const templates = {
   "Hero Priority Left": "default",
   "Hero Priority Center": "hero-priority-center",
-  "Headline Priority": "headline-priority",
+  "Headline Priority": "headline-priority"
 };
 
 const iconTypeOptions = {
@@ -27,7 +27,7 @@ const iconTypeOptions = {
   "Circular Plain Svg": "circular-plain-svg",
   "Plain Svg": "plain-svg",
   "Plain Color Svg": "plain-color-svg",
-  "Square Svg": "square-svg",
+  "Square Svg": "square-svg"
 };
 
 const storyElementsConfig = {
@@ -38,7 +38,7 @@ const storyElementsConfig = {
   "also-read": {},
   "q-and-a": {},
   question: {},
-  answer: {},
+  answer: {}
 };
 
 const label = "BG Color";
@@ -47,12 +47,12 @@ const defaultvalue = "#ffffff";
 const authorTemplate = {
   default: "default",
   leftAligned: "leftAligned",
-  centerAligned: "centerAligned",
+  centerAligned: "centerAligned"
 };
 
 const shareType = {
   "Vertical Share": "sticky",
-  "Horizontal Share": "",
+  "Horizontal Share": ""
 };
 
 const configurableSlot = () => {
@@ -63,9 +63,9 @@ withStore("Rows/Story Templates/Photo Story Template", {
   qt: {
     config: {
       "cdn-image": "thumbor-stg.assettype.com",
-      mountAt: "/sub-directory",
-    },
-  },
+      mountAt: "/sub-directory"
+    }
+  }
 }).add("Default", () => {
   const templateConfig = {
     shareIconType: optionalSelect("Social Share Icon Type", iconTypeOptions),
@@ -78,7 +78,7 @@ withStore("Rows/Story Templates/Photo Story Template", {
     publishedDetails: {
       enablePublishedTime: boolean("Show Published Time", true),
       enableUpdatedTime: boolean("Show Updated Time", false),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     },
     authorDetails: {
       template: optionalSelect("temp", authorTemplate),
@@ -86,12 +86,15 @@ withStore("Rows/Story Templates/Photo Story Template", {
         showBio: boolean("bio", true),
         showImage: boolean("image", true),
         showName: boolean("Author Name", true),
-      },
+        showLabels: boolean("show labels", true),
+        showGuestAuthorName: boolean("show guest author name", false),
+        showGuestAuthorImage: boolean("show guest author image", false)
+      }
     },
     premiumStoryIconConfig: {
       iconColor: "#F7B500",
       iconType: "star",
-      enablePremiumStoryIcon: true,
+      enablePremiumStoryIcon: true
     },
     asideCollection: {
       data: collection,
@@ -101,10 +104,10 @@ withStore("Rows/Story Templates/Photo Story Template", {
         theme: color(label, defaultvalue),
         adSlot: [{ type: "ad", component: configurableSlot }],
         showAuthor: boolean("Author", true),
-        showTime: boolean("Timestamp", true),
+        showTime: boolean("Timestamp", true)
       },
-      slots: slotData,
-    },
+      slots: slotData
+    }
   };
 
   return (
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/README.md b/app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/README.md
new file mode 100644
index 000000000..ab44636a5
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/README.md
@@ -0,0 +1,9 @@
+# Snapshot Template
+
+The Snapshot template is a primary component used to represent a snapshot of a story, which includes a hero image, headline, published details, and the truncated first card element.
+
+## Usage
+
+```jsx
+<Snapshot story={story} templateConfig={templateConfig} storyElementsConfig={storyElementsConfig} />
+```
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/index.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/index.js
new file mode 100644
index 000000000..871e1d93b
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/index.js
@@ -0,0 +1,96 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
+import get from "lodash/get";
+import isEmpty from "lodash/isEmpty";
+import { Link } from "@quintype/components";
+
+import { StateProvider } from "../../../SharedContext";
+
+import "./snapshot.m.css";
+
+import { SectionTag } from "../../../Atoms/SectionTag";
+import { StoryHeadline } from "../../../Atoms/StoryHeadline";
+import { AuthorCard } from "../../../Atoms/AuthorCard";
+import { HeroImage } from "../../../Atoms/HeroImage";
+import { PublishDetails } from "../../../Atoms/PublishDetail";
+import { getTextColor } from "../../../../utils/utils";
+
+const Snapshot = ({ story = {}, config = {} }) => {
+  const { theme = "", publishedDetails = {}, premiumStoryIconConfig = {}, authorDetails = {} } = config;
+
+  const textColor = getTextColor(config.theme);
+  const timezone = useSelector((state) => get(state, ["qt", "data", "timezone"], null));
+
+  const findFirstElement = () => {
+    let storyElement = {};
+    story.cards &&
+      story.cards.find((card) => {
+        const storyElements = card["story-elements"];
+        return storyElements.find((elem) => {
+          if (elem.type === "text" || elem.type === "title") {
+            storyElement = elem;
+            return true;
+          }
+          return false;
+        });
+      });
+    return storyElement;
+  };
+
+  const firstElement = findFirstElement() || {};
+  const truncate = (string = "", limit = 60, ellipsis = true) => {
+    const putEllipsis = ellipsis ? " ..." : "";
+    return typeof string === "string" && string.length > limit ? string.substring(0, limit) + putEllipsis : string;
+  };
+  return (
+    <div
+      data-test-id="snapshot-template"
+      className="arrow-component arr--content-wrapper arr--snapshot-story"
+      style={{ backgroundColor: theme }}
+      styleName={`wrapper ${textColor}`}>
+      <HeroImage story={story} aspectRatio={[[16, 9]]} />
+      <SectionTag story={story} />
+      <StoryHeadline story={story} premiumStoryIconConfig={premiumStoryIconConfig} />
+      {authorDetails && <AuthorCard story={story} template={authorDetails.template} opts={authorDetails.opts} />}
+      <PublishDetails story={story} opts={publishedDetails} template="story" timezone={timezone} />
+      {!isEmpty(firstElement) && (
+        <div styleName="read-more-card">
+          <div key={firstElement.id} styleName={`read-more-overlay`}>
+            <bdi
+              styleName={`${textColor}`}
+              dangerouslySetInnerHTML={{ __html: truncate(firstElement.text, 400, true) }}
+            />
+            <div
+              styleName="content-overlay"
+              style={{
+                backgroundImage: `linear-gradient(180deg,hsla(0,0%,100%,0), ${config.theme})`
+              }}
+            />
+          </div>
+        </div>
+      )}
+      <div styleName={`read-more-btn ${textColor}`}>
+        <Link href={story.url} rel="noopener noreferrer" aria-label="read-button" styleName="hyperlink-button">
+          Read More
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+Snapshot.propTypes = {
+  story: PropTypes.object,
+  config: PropTypes.shape({
+    templateType: PropTypes.string,
+    authorCard: PropTypes.object,
+    asideCollection: PropTypes.object
+  }),
+  firstChild: PropTypes.node,
+  secondChild: PropTypes.node,
+  storyElementsConfig: PropTypes.object,
+  adComponent: PropTypes.func,
+  widgetComp: PropTypes.func
+};
+
+export default StateProvider(Snapshot);
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/snapshot.m.css b/app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/snapshot.m.css
new file mode 100644
index 000000000..2d40721be
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/snapshot.m.css
@@ -0,0 +1,66 @@
+@import "../../../../../assets/stylesheets/mixins.scss";
+
+.wrapper {
+  border-bottom: 1px solid var(--arrow-c-invert-mono4);
+  padding: var(--arrow-spacing-xl) 0;
+  margin: 0 12px;
+  @include tablet {
+    max-width: 752px;
+    margin: auto;
+  }
+
+  :global .arr--story-headline {
+    padding-bottom: var(--arrow-spacing-s);
+  }
+
+  :global .section-tag {
+    padding-top: var(--arrow-spacing-s);
+  }
+
+  :global .arr--publish-details {
+    padding: var(--arrow-spacing-s) 0;
+  }
+}
+
+.wrapper.dark {
+  border-bottom: 1px solid var(--arrow-c-mono4);
+}
+
+.wrapper.light {
+  border-bottom: 1px solid var(--arrow-c-invert-mono4);
+}
+
+.read-more-card {
+  position: relative;
+}
+
+.content-overlay {
+  /* background-image: linear-gradient(180deg,hsla(0,0%,100%,0),#fff); */
+  bottom: 0;
+  height: var(--arrow-spacing-xl);
+  position: absolute;
+  width: 100%;
+  @include tablet {
+    height: 50px;
+  }
+}
+
+.read-more-overlay {
+  padding-bottom: var(--arrow-spacing-s);
+}
+
+.read-more-btn {
+  text-align: center;
+  padding: var(--arrow-spacing-s);
+  background-color: transparent;
+  font-size: var(--arrow-fs-m);
+}
+
+.dark,
+.dark.hyperlink-button {
+  color: var(--arrow-c-mono2);
+}
+.light,
+.light.hyperlink-button {
+  color: var(--arrow-c-invert-mono2);
+}
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/stories.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/stories.js
new file mode 100644
index 000000000..93739fec4
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/stories.js
@@ -0,0 +1,110 @@
+import { boolean, color, text } from "@storybook/addon-knobs";
+import React from "react";
+import { optionalSelect, withStore } from "../../../../../storybook";
+import { generateCollection, generateStory } from "../../../Fixture";
+import { slotData } from "../../../Fixture/slot-config";
+import Snapshot from "./index";
+import Readme from "./README.md";
+
+const story = generateStory();
+const collection = generateCollection({ stories: 4 });
+const authorTemplate = {
+  default: "default",
+  leftAligned: "leftAligned",
+  centerAligned: "centerAligned",
+  "No value": ""
+};
+const imageTypeOptions = {
+  "Full Bleed": "fullBleed",
+  "With In Container": "container"
+};
+
+const iconTypeOptions = {
+  "Circular Color Svg": "circular-color-svg",
+  "Circular Plain Svg": "circular-plain-svg",
+  "Plain Svg": "plain-svg",
+  "Plain Color Svg": "plain-color-svg",
+  "Square Svg": "square-svg"
+};
+
+const templates = {
+  "Hero Priority Left": "default",
+  "Hero Priority Center": "hero-priority-center",
+  "Headline Hero Priority": "headline-hero-priority",
+  "Hero Vertical Priority": "hero-vertical-priority",
+  "Headline Priority": "headline-priority",
+  "Headline Overlay Priority": "headline-overlay-priority"
+};
+
+const storyElementsConfig = {
+  summary: {},
+  blurb: {},
+  blockquote: {},
+  quote: {},
+  "also-read": {},
+  "q-and-a": {},
+  question: {},
+  answer: {}
+};
+
+const sortFirstOptions = {
+  "Headline First": "headline-first",
+  "Image First": "image-first"
+};
+
+const shareType = {
+  "Vertical Share": "sticky",
+  "Horizontal Share": ""
+};
+
+withStore(
+  "Rows/Story Templates/Snapshot Template",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com",
+        mountAt: "/sub-directory"
+      }
+    }
+  },
+  Readme
+).add("default", () => {
+  const templateConfig = {
+    shareIconType: optionalSelect("Social Share Icon Type", iconTypeOptions),
+    verticalShare: optionalSelect("Share Type", shareType),
+    theme: color("BG Color", "#ffffff"),
+    imageRender: optionalSelect("Image Type", imageTypeOptions),
+    sort: optionalSelect("Sort Options", sortFirstOptions),
+    noOfVisibleCards: -1,
+    showSection: boolean("Show Section Tag", true),
+    templateType: optionalSelect("Template Options", templates),
+    publishedDetails: {
+      enablePublishedTime: boolean("Show Published Time", true),
+      enableUpdatedTime: boolean("Show Updated Time", false),
+      showReadTime: boolean("Read time", true)
+    },
+    premiumStoryIconConfig: {
+      iconColor: "#F7B500",
+      iconType: "star",
+      enablePremiumStoryIcon: true
+    },
+    asideCollection: {
+      data: collection,
+      config: {
+        collectionNameBorderColor: color("Aside Collection Name Border Color", "#3a9fdd"),
+        title: text("Aside Collection Title", "Trending"),
+        theme: color("BG Color", "#ffffff")
+      },
+      slots: slotData
+    },
+    authorDetails: {
+      template: optionalSelect("Author Template Options", authorTemplate, "default"),
+      opts: {
+        showBio: false,
+        showImage: true,
+        showName: true
+      }
+    }
+  };
+  return <Snapshot story={story} config={templateConfig} storyElementsConfig={storyElementsConfig} />;
+});
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/index.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/index.js
index 69f243cad..0f010c684 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/index.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/index.js
@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import React from "react";
 import { useSelector } from "react-redux";
-import kebabCase from "lodash/kebabCase";
+import kebabCase from "lodash.kebabcase";
 import { StateProvider } from "../../../SharedContext";
 import { StoryTemplate } from "./templates";
 import get from "lodash/get";
@@ -15,13 +15,14 @@ const TextStoryTemplate = ({
   widgetComp,
   firstChild,
   secondChild,
+  enableDarkMode
 }) => {
   const {
     theme = "",
     templateType = "default",
     imageRender = "fullBleed",
     sort = "headline-first",
-    verticalShare = "",
+    verticalShare = ""
   } = config;
   const sortOption = templateType === "hero-vertical-priority" ? sort : "";
 
@@ -29,22 +30,22 @@ const TextStoryTemplate = ({
     default: imageRender,
     "hero-priority-center": imageRender,
     "headline-hero-priority": imageRender,
-    "hero-vertical-priority": imageRender,
+    "hero-vertical-priority": imageRender
   };
 
-  const timezone = useSelector((state) => get(state, ["qt", "data", "timezone"], null));
+  const qtState = useSelector((state) => get(state, ["qt"], {}));
+  const timezone = get(qtState, ["data", "timezone"], null);
+  const mountAt = get(qtState, ["config", "mountAt"], "");
 
   const dataTestId = supportImageType[templateType]
     ? `text-story-${templateType}-${kebabCase(supportImageType[templateType])}`
     : `text-story-${templateType}`;
-
   return (
     <div
       data-test-id={dataTestId}
       className="arrow-component arr-story-grid arr--content-wrapper arr--text-story-template-wrapper"
       styleName={`${templateType} ${verticalShare} ${supportImageType[templateType] || ""} ${sortOption}`}
-      style={{ backgroundColor: theme }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <StoryTemplate
         story={story}
         config={config}
@@ -54,6 +55,8 @@ const TextStoryTemplate = ({
         firstChild={firstChild}
         secondChild={secondChild}
         timezone={timezone}
+        enableDarkMode={enableDarkMode}
+        mountAt={mountAt}
       />
     </div>
   );
@@ -64,13 +67,15 @@ TextStoryTemplate.propTypes = {
   config: PropTypes.shape({
     templateType: PropTypes.string,
     authorCard: PropTypes.object,
-    asideCollection: PropTypes.object,
+    asideCollection: PropTypes.object
   }),
   firstChild: PropTypes.node,
   secondChild: PropTypes.node,
   storyElementsConfig: PropTypes.object,
   adComponent: PropTypes.func,
   widgetComp: PropTypes.func,
+  enableDarkMode: PropTypes.bool,
+  mountAt: PropTypes.string
 };
 
 export default StateProvider(TextStoryTemplate);
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/stories.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/stories.js
index b84dee978..d2c2a2520 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/stories.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/stories.js
@@ -13,11 +13,11 @@ const authorTemplate = {
   default: "default",
   leftAligned: "leftAligned",
   centerAligned: "centerAligned",
-  "No value": "",
+  "No value": ""
 };
 const imageTypeOptions = {
   "Full Bleed": "fullBleed",
-  "With In Container": "container",
+  "With In Container": "container"
 };
 
 const iconTypeOptions = {
@@ -25,7 +25,7 @@ const iconTypeOptions = {
   "Circular Plain Svg": "circular-plain-svg",
   "Plain Svg": "plain-svg",
   "Plain Color Svg": "plain-color-svg",
-  "Square Svg": "square-svg",
+  "Square Svg": "square-svg"
 };
 
 const templates = {
@@ -34,7 +34,7 @@ const templates = {
   "Headline Hero Priority": "headline-hero-priority",
   "Hero Vertical Priority": "hero-vertical-priority",
   "Headline Priority": "headline-priority",
-  "Headline Overlay Priority": "headline-overlay-priority",
+  "Headline Overlay Priority": "headline-overlay-priority"
 };
 
 const storyElementsConfig = {
@@ -45,7 +45,7 @@ const storyElementsConfig = {
   "also-read": {},
   "q-and-a": {},
   question: {},
-  answer: {},
+  answer: {}
 };
 
 const configurableSlot = () => {
@@ -54,12 +54,12 @@ const configurableSlot = () => {
 
 const sortFirstOptions = {
   "Headline First": "headline-first",
-  "Image First": "image-first",
+  "Image First": "image-first"
 };
 
 const shareType = {
   "Vertical Share": "sticky",
-  "Horizontal Share": "",
+  "Horizontal Share": ""
 };
 
 withStore(
@@ -68,9 +68,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 ).add("default", () => {
@@ -86,21 +86,21 @@ withStore(
     publishedDetails: {
       enablePublishedTime: boolean("Show Published Time", true),
       enableUpdatedTime: boolean("Show Updated Time", false),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     },
     premiumStoryIconConfig: {
       iconColor: "#F7B500",
       iconType: "star",
-      enablePremiumStoryIcon: true,
+      enablePremiumStoryIcon: true
     },
     asideCollection: {
       data: collection,
       config: {
         collectionNameBorderColor: color("Aside Collection Name Border Color", "#3a9fdd"),
         title: text("Aside Collection Title", "Trending"),
-        theme: color("BG Color", "#ffffff"),
+        theme: color("BG Color", "#ffffff")
       },
-      slots: slotData,
+      slots: slotData
     },
     authorDetails: {
       template: optionalSelect("Author Template Options", authorTemplate, "default"),
@@ -108,8 +108,11 @@ withStore(
         showBio: false,
         showImage: true,
         showName: true,
-      },
-    },
+        showLabels: boolean("show labels", true),
+        showGuestAuthorName: boolean("show guest author name", false),
+        showGuestAuthorImage: boolean("show guest author image", false)
+      }
+    }
   };
   return (
     <TextStoryTemplate
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/templates.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/templates.js
index 2d4ac0aa6..5b1d88036 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/templates.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/templates.js
@@ -1,5 +1,5 @@
 import React from "react";
-import get from "lodash/get";
+import get from "lodash.get";
 import PropTypes from "prop-types";
 import { SocialShareTemplate } from "../../../Molecules/SocialShareTemplate";
 import { SocialShare } from "@quintype/components";
@@ -13,6 +13,7 @@ import { HeroImage } from "../../../Atoms/HeroImage";
 import { PublishDetails } from "../../../Atoms/PublishDetail";
 import { StoryTags } from "../../../Atoms/StoryTags";
 import { StoryElementCard, SlotAfterStory } from "../../../Molecules/StoryElementCard";
+import { StoryReview } from "../../../Atoms/StoryReview";
 import "./text-story.m.css";
 
 export const StoryTemplate = ({
@@ -24,20 +25,21 @@ export const StoryTemplate = ({
   firstChild,
   secondChild,
   timezone,
+  enableDarkMode,
+  mountAt
 }) => {
   const {
     theme = "",
     asideCollection = {},
     templateType = "default",
-    noOfVisibleCards = -1,
+    noOfVisibleCards = 0,
     publishedDetails = {},
-    authorDetails = {
-      template: "default",
-    },
+    authorDetails = {},
     verticalShare = "",
     shareIconType = "plain-color-svg",
-    premiumStoryIconConfig = {},
+    premiumStoryIconConfig = {}
   } = config;
+
   const visibledCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
   const storyId = get(story, ["id"], "");
   const HeaderCard = () => {
@@ -86,11 +88,16 @@ export const StoryTemplate = ({
   const StoryData = () => {
     return (
       <div styleName="gap-16">
-        {authorDetails && <AuthorCard story={story} template={authorDetails.template} opts={authorDetails.opts} />}
+        {authorDetails && (
+          <AuthorCard story={story} template={authorDetails.template} opts={authorDetails.opts} mountAt={mountAt} />
+        )}
         <div styleName="timestamp-social-share">
-          <PublishDetails story={story} opts={publishedDetails} template="story" timezone={timezone} />
+          <div id={`publish-details-container-${storyId}`}>
+            <PublishDetails story={story} opts={publishedDetails} template="story" timezone={timezone} />
+          </div>
           {!verticalShare && <SocialShareComponent />}
         </div>
+        <StoryReview theme={theme} story={story} />
         {visibledCards.map((card) => {
           return (
             <StoryElementCard
@@ -100,6 +107,7 @@ export const StoryTemplate = ({
               config={storyElementsConfig}
               adComponent={adComponent}
               widgetComp={widgetComp}
+              enableDarkMode={enableDarkMode}
             />
           );
         })}
@@ -226,15 +234,7 @@ export const StoryTemplate = ({
     return (
       <>
         <div styleName="hero-image index-2" data-test-id="headline-overlay-hero-image">
-          <HeroImage
-            story={story}
-            FullBleed={false}
-            aspectRatio={[
-              [3, 4],
-              [16, 9],
-            ]}
-            isStoryPageImage
-          />
+          <HeroImage story={story} FullBleed={false} aspectRatio={[[3, 4], [16, 9]]} isStoryPageImage />
         </div>
         <HeaderCard />
         <div styleName="story-content-inner-wrapper">
@@ -263,6 +263,7 @@ export const StoryTemplate = ({
         return headlineOverlayTemplate();
     }
   };
+
   return <>{getStoryTemplate(templateType)}</>;
 };
 
@@ -271,7 +272,7 @@ StoryTemplate.propTypes = {
   config: PropTypes.shape({
     templateType: PropTypes.string,
     authorDetails: PropTypes.object,
-    asideCollection: PropTypes.object,
+    asideCollection: PropTypes.object
   }),
   firstChild: PropTypes.node,
   secondChild: PropTypes.node,
@@ -279,4 +280,6 @@ StoryTemplate.propTypes = {
   storyElementsConfig: PropTypes.object,
   widgetComp: PropTypes.func,
   adComponent: PropTypes.func,
+  enableDarkMode: PropTypes.bool,
+  mountAt: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/text-story.m.css b/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/text-story.m.css
index efc2aa930..309c0d94c 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/text-story.m.css
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/text-story.m.css
@@ -1,5 +1,4 @@
-/*eslint-disable no-descending-specificity */
-@import "../../../../../../assets/arrow/stylesheets/mixins.scss";
+@import "../../../../../assets/stylesheets/mixins.scss";
 
 .header-details {
   margin: var(--arrow-spacing-m) 0 var(--arrow-spacing-xs) 0;
@@ -11,6 +10,7 @@
 .header-details :global(.arr--sub-headline) {
   font-size: var(--arrow-fs-s);
   font-style: italic;
+  padding-right: 2px;
   @include tablet {
     font-size: var(--arrow-fs-m);
   }
@@ -55,7 +55,6 @@
     }
   }
   .aside-collection {
-    z-index: var(--z-index-m3);
     grid-column: 1/5;
     @include tablet {
       grid-column: container-start / container-end;
@@ -114,21 +113,20 @@
   grid-row: 1/2;
   grid-column: 1/5;
   padding: 0 var(--arrow-fs-l);
-  z-index: var(--z-index-1);
+  z-index: 2;
   @include tablet {
     grid-column: 3 / 13;
-    :global(.section-tag) {
-      color: var(--arrow-c-invert-mono4);
-    }
-    :global(.arr--sub-headline),
-    :global(.arr--story-headline .arr--story--headline-h1) {
-      color: var(--arrow-c-invert-mono1);
-    }
     @include desktop {
       grid-column: 4 / 12;
     }
   }
-
+  :global(.section-tag) {
+    color: var(--arrow-c-invert-mono4);
+  }
+  :global(.arr--sub-headline),
+  :global(.arr--story-headline .arr--story--headline-h1) {
+    color: var(--arrow-c-invert-mono1);
+  }
 }
 
 .headline-hero-priority.sticky {
@@ -450,4 +448,3 @@
 .fullBleed:global(.arr-story-grid) {
   margin: unset;
 }
-
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/text-story.test.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/text-story.test.js
index d2eecd4de..b9bf95ba1 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/text-story.test.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/text-story.test.js
@@ -22,7 +22,7 @@ const storyElementsConfig = {
   "also-read": {},
   "q-and-a": {},
   question: {},
-  answer: {},
+  answer: {}
 };
 
 const templateConfig = {
@@ -32,7 +32,7 @@ const templateConfig = {
   publishedDetails: {
     enablePublishedTime: true,
     enableUpdatedTime: false,
-    showReadTime: true,
+    showReadTime: true
   },
   asideCollection: {
     data: collection,
@@ -40,17 +40,17 @@ const templateConfig = {
       collectionNameBorderColor: "#3a9fdd",
       title: "Trending",
       theme: "#ffffff",
-      adSlot: [{ type: "ad", component: configurableSlot }],
-    },
+      adSlot: [{ type: "ad", component: configurableSlot }]
+    }
   },
   authorDetails: {
     template: "default",
     opts: {
       showBio: false,
       showImage: true,
-      showName: true,
-    },
-  },
+      showName: true
+    }
+  }
 };
 
 beforeEach(() => {
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/index.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/index.js
index 81eb70e4d..3bf9cc68c 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/index.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/index.js
@@ -2,7 +2,7 @@ import { SocialShare } from "@quintype/components";
 import PropTypes from "prop-types";
 import React from "react";
 import { useSelector } from "react-redux";
-import get from "lodash/get";
+import get from "lodash.get";
 import { SocialShareTemplate } from "../../../Molecules/SocialShareTemplate";
 import { SectionTag } from "../../../Atoms/SectionTag";
 import { StoryHeadline } from "../../../Atoms/StoryHeadline";
@@ -12,6 +12,7 @@ import AsideCollection from "../../AsideCollection";
 import { AuthorCard } from "../../../Atoms/AuthorCard";
 import { PublishDetails } from "../../../Atoms/PublishDetail";
 import { StoryTags } from "../../../Atoms/StoryTags";
+import { StoryReview } from "../../../Atoms/StoryReview";
 import { StoryElementCard, SlotAfterStory } from "../../../Molecules/StoryElementCard";
 import { StateProvider } from "../../../SharedContext";
 import "./video-story.m.css";
@@ -24,37 +25,42 @@ const VideoStoryTemplate = ({
   adComponent,
   firstChild,
   secondChild,
+  enableDarkMode
 }) => {
   const heroVideo =
     story.cards
       .flatMap((card) => card["story-elements"])
       .find(
-        ({ type, subtype }) => type === "youtube-video" || (type === "jsembed" && subtype === "dailymotion-video")
+        ({ type, subtype }) =>
+          type === "youtube-video" ||
+          (type === "jsembed" && (subtype === "dailymotion-video" || subtype === "dailymotion-embed-script"))
       ) || {};
 
   const {
     theme = "",
     authorCard = {},
-    authorDetails = {
-      template: "default",
-    },
+    authorDetails = {},
     asideCollection = {},
     templateType = "",
-    noOfVisibleCards = -1,
+    noOfVisibleCards = 0,
     publishedDetails = {},
     verticalShare = "",
     shareIconType = "plain-color-svg",
-    premiumStoryIconConfig = {},
+    premiumStoryIconConfig = {}
   } = config;
 
   const visibledCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
   const storyId = get(story, ["id"], "");
-  const timezone = useSelector((state) => get(state, ["qt", "data", "timezone"], null));
+
+  const qtState = useSelector((state) => get(state, ["qt"], {}));
+  const timezone = get(qtState, ["data", "timezone"], null);
+  const mountAt = get(qtState, ["config", "mountAt"], "");
 
   const HeroVideo = () => {
+    const lazyLoad = get(storyElementsConfig, ["jsEmbed", "lazyLoad"], true);
     return (
       <div styleName="hero-video index-2" id={`video-${get(heroVideo, ["id"])}`}>
-        <Video element={heroVideo} loadIframeOnClick={true} />
+        <Video element={heroVideo} loadIframeOnClick={lazyLoad} />
       </div>
     );
   };
@@ -89,12 +95,17 @@ const VideoStoryTemplate = ({
     return (
       <div styleName="story-details">
         <div styleName="author">
-          {authorCard && <AuthorCard story={story} template={authorDetails.template} opts={authorDetails.opts} />}
+          {authorCard && (
+            <AuthorCard story={story} template={authorDetails.template} opts={authorDetails.opts} mountAt={mountAt} />
+          )}
         </div>
         <div styleName="timestamp-social-share">
-          <PublishDetails story={story} opts={publishedDetails} template="story" timezone={timezone} />
+          <div id={`publish-details-container-${storyId}`}>
+            <PublishDetails story={story} opts={publishedDetails} template="story" timezone={timezone} />
+          </div>
           {!verticalShare && <SocialShareComponent />}
         </div>
+        <StoryReview theme={theme} story={story} />
         {visibledCards.map((card) => {
           return (
             <StoryElementCard
@@ -105,6 +116,7 @@ const VideoStoryTemplate = ({
               config={storyElementsConfig}
               adComponent={adComponent}
               widgetComp={widgetComp}
+              enableDarkMode={enableDarkMode}
             />
           );
         })}
@@ -216,8 +228,7 @@ const VideoStoryTemplate = ({
       data-test-id={dataTestId}
       className="arrow-component arr--content-wrapper arr-story-grid arr--video-story-template-wrapper"
       styleName={`${templateClass} ${verticalShare}`}
-      style={{ backgroundColor: theme }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       {getStoryTemplate(templateType)}
     </div>
   );
@@ -228,13 +239,14 @@ VideoStoryTemplate.propTypes = {
   config: PropTypes.shape({
     templateType: PropTypes.string,
     authorCard: PropTypes.object,
-    asideCollection: PropTypes.object,
+    asideCollection: PropTypes.object
   }),
   firstChild: PropTypes.node,
   secondChild: PropTypes.node,
   storyElementsConfig: PropTypes.object,
   adComponent: PropTypes.func,
   widgetComp: PropTypes.func,
+  enableDarkMode: PropTypes.bool
 };
 
 export default StateProvider(VideoStoryTemplate);
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/stories.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/stories.js
index 1121032f3..c4dc3e436 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/stories.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/stories.js
@@ -11,10 +11,15 @@ const story = generateStory();
 const collection = generateCollection({ stories: 4 });
 const collectionNameDefaultValue = "#3a9fdd";
 const collectionNameBorderColorLabel = "Aside Collection Name Border Color";
+const authorTemplates = {
+  default: "default",
+  leftAligned: "leftAligned",
+  centerAligned: "centerAligned"
+};
 
 const shareType = {
   "Vertical Share": "sticky",
-  "Horizontal Share": "",
+  "Horizontal Share": ""
 };
 
 const label = "BG Color";
@@ -24,7 +29,7 @@ const iconTypeOptions = {
   "Circular Plain Svg": "circular-plain-svg",
   "Plain Svg": "plain-svg",
   "Plain Color Svg": "plain-color-svg",
-  "Square Svg": "square-svg",
+  "Square Svg": "square-svg"
 };
 
 const configurableSlot = () => {
@@ -37,9 +42,9 @@ withStore(
     qt: {
       config: {
         "cdn-image": "thumbor-stg.assettype.com",
-        mountAt: "/sub-directory",
-      },
-    },
+        mountAt: "/sub-directory"
+      }
+    }
   },
   Readme
 )
@@ -53,12 +58,12 @@ withStore(
       publishedDetails: {
         enablePublishedTime: boolean("Show Published Time", true),
         enableUpdatedTime: boolean("Show Updated Time", false),
-        showReadTime: boolean("Read time", true),
+        showReadTime: boolean("Read time", true)
       },
       premiumStoryIconConfig: {
         iconColor: "#F7B500",
         iconType: "star",
-        enablePremiumStoryIcon: true,
+        enablePremiumStoryIcon: true
       },
       asideCollection: {
         data: collection,
@@ -67,10 +72,21 @@ withStore(
           title: text("Aside Collection Title", "Trending"),
           theme: color(label, defaultvalue),
           showAuthor: boolean("Author", true),
-          showTime: boolean("Timestamp", true),
+          showTime: boolean("Timestamp", true)
         },
-        slots: slotData,
+        slots: slotData
       },
+      authorDetails: {
+        template: optionalSelect("Author Templates", authorTemplates) || "default",
+        opts: {
+          showBio: boolean("Author Bio", false),
+          showImage: boolean("Author Image", true),
+          showName: boolean("Author Name", true),
+          showLabels: boolean("show labels", true),
+          showGuestAuthorName: boolean("show guest author name", false),
+          showGuestAuthorImage: boolean("show guest author image", false)
+        }
+      }
     };
     const storyElementsConfig = {
       summary: {},
@@ -81,7 +97,7 @@ withStore(
       "q-and-a": {},
       question: {},
       answer: {},
-      references: {},
+      references: {}
     };
     return (
       <VideoStoryTemplate
@@ -106,12 +122,12 @@ withStore(
       publishedDetails: {
         enablePublishedTime: boolean("Show Published Time", true),
         enableUpdatedTime: boolean("Show Updated Time", false),
-        showReadTime: boolean("Read time", true),
+        showReadTime: boolean("Read time", true)
       },
       premiumStoryIconConfig: {
         iconColor: "#F7B500",
         iconType: "star",
-        enablePremiumStoryIcon: true,
+        enablePremiumStoryIcon: true
       },
       asideCollection: {
         data: collection,
@@ -120,10 +136,10 @@ withStore(
           title: text("Aside Collection Title", "Trending"),
           theme: color(label, defaultvalue),
           showAuthor: boolean("Author", true),
-          showTime: boolean("Timestamp", true),
+          showTime: boolean("Timestamp", true)
         },
-        slots: slotData,
-      },
+        slots: slotData
+      }
     };
     const storyElementsConfig = {
       summary: {},
@@ -134,7 +150,7 @@ withStore(
       "q-and-a": {},
       question: {},
       answer: {},
-      references: {},
+      references: {}
     };
     return (
       <VideoStoryTemplate
@@ -159,12 +175,12 @@ withStore(
       publishedDetails: {
         enablePublishedTime: boolean("Show Published Time", true),
         enableUpdatedTime: boolean("Show Updated Time", false),
-        showReadTime: boolean("Read time", true),
+        showReadTime: boolean("Read time", true)
       },
       premiumStoryIconConfig: {
         iconColor: "#F7B500",
         iconType: "star",
-        enablePremiumStoryIcon: true,
+        enablePremiumStoryIcon: true
       },
       asideCollection: {
         data: collection,
@@ -174,10 +190,10 @@ withStore(
           theme: color(label, defaultvalue),
           adSlot: [{ type: "ad", component: configurableSlot }],
           showAuthor: boolean("Author", true),
-          showTime: boolean("Timestamp", true),
+          showTime: boolean("Timestamp", true)
         },
-        slots: slotData,
-      },
+        slots: slotData
+      }
     };
     const storyElementsConfig = {
       summary: {},
@@ -188,7 +204,7 @@ withStore(
       "q-and-a": {},
       question: {},
       answer: {},
-      references: {},
+      references: {}
     };
     return (
       <VideoStoryTemplate
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/video-story.m.css b/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/video-story.m.css
index 3abad24cb..e90ab1688 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/video-story.m.css
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/video-story.m.css
@@ -1,4 +1,4 @@
-@import "../../../../../../assets/arrow/stylesheets/mixins.scss";
+@import "../../../../../assets/stylesheets/mixins.scss";
 
 .default,
 .hero-priority,
@@ -31,6 +31,7 @@
 .header-details :global(.arr--sub-headline) {
   font-size: var(--arrow-fs-s);
   font-style: italic;
+  padding-right: 2px;
   @include tablet {
     font-size: var(--arrow-fs-m);
   }
@@ -193,13 +194,3 @@
     z-index: 2;
   }
 }
-:global {
-  @media only screen and (max-width: 768px) {
-    .arr-story-grid {
-      display: block;
-    }
-    .story-element-jsembed{
-      word-break: break-word;
-    }
-  }
-}
diff --git a/app/isomorphic/arrow/components/Rows/TagIntroductionCard/index.js b/app/isomorphic/arrow/components/Rows/TagIntroductionCard/index.js
index 7714af42d..52e98dc26 100644
--- a/app/isomorphic/arrow/components/Rows/TagIntroductionCard/index.js
+++ b/app/isomorphic/arrow/components/Rows/TagIntroductionCard/index.js
@@ -12,8 +12,7 @@ const TagIntroductionCard = ({ data, config = {} }) => {
     <div
       className="full-width-with-padding arrow-component"
       styleName={`wrapper ${textColor}`}
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <h1 styleName={textColor}>{tagName}</h1>
       <div styleName={`description ${textColor}`}>{tagDescription}</div>
     </div>
@@ -22,6 +21,6 @@ const TagIntroductionCard = ({ data, config = {} }) => {
 
 TagIntroductionCard.propTypes = {
   data: PropTypes.shape({ tagName: PropTypes.string, tagDescription: PropTypes.string }),
-  config: PropTypes.shape({ theme: PropTypes.string }),
+  config: PropTypes.shape({ theme: PropTypes.string })
 };
 export default TagIntroductionCard;
diff --git a/app/isomorphic/arrow/components/Rows/TagIntroductionCard/stories.js b/app/isomorphic/arrow/components/Rows/TagIntroductionCard/stories.js
index 21ac6973f..53fd749bd 100644
--- a/app/isomorphic/arrow/components/Rows/TagIntroductionCard/stories.js
+++ b/app/isomorphic/arrow/components/Rows/TagIntroductionCard/stories.js
@@ -10,12 +10,12 @@ const defaultvalue = "#ffffff";
 const data = {
   tagName: "News",
   tagDescription:
-    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi ",
+    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi "
 };
 
 withStore("Rows/Tag Introduction Card", Readme).add("Default", () => {
   const contextConfig = {
-    theme: color(label, defaultvalue),
+    theme: color(label, defaultvalue)
   };
   return <TagIntroductionCard data={data} config={contextConfig} />;
 });
diff --git a/app/isomorphic/arrow/components/Rows/TagIntroductionCard/tag-intro-card.module.css b/app/isomorphic/arrow/components/Rows/TagIntroductionCard/tag-intro-card.module.css
index 3278d29be..dcf8df243 100644
--- a/app/isomorphic/arrow/components/Rows/TagIntroductionCard/tag-intro-card.module.css
+++ b/app/isomorphic/arrow/components/Rows/TagIntroductionCard/tag-intro-card.module.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 
 .description {
diff --git a/app/isomorphic/arrow/components/Rows/ThreeColFlexStories/index.js b/app/isomorphic/arrow/components/Rows/ThreeColFlexStories/index.js
index 3774815c2..3a28f9da8 100644
--- a/app/isomorphic/arrow/components/Rows/ThreeColFlexStories/index.js
+++ b/app/isomorphic/arrow/components/Rows/ThreeColFlexStories/index.js
@@ -1,10 +1,10 @@
 import { collectionToStories } from "@quintype/components";
-import get from "lodash/get";
+import get from "lodash.get";
 import PropTypes from "prop-types";
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { ProgressiveHydration } from "../../../hydration-component";
-import { generateNavigateSlug, getSlot, getTextColor, navigateTo } from "../../../utils/utils";
+import { generateNavigateSlug, getSlot, navigateTo } from "../../../utils/utils";
 import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
 import { CollectionName } from "../../Atoms/CollectionName";
 import { Headline } from "../../Atoms/Headline";
@@ -16,22 +16,16 @@ import { StoryCard } from "../../Molecules/StoryCard";
 import { StateProvider } from "../../SharedContext";
 import "./three-col-flex-stories.m.css";
 
-const FlexCard = ({ story = {}, config = {} }) => {
+const FlexCard = ({ story = {}, config = {}, collectionId }) => {
   const { borderColor = "", border = "", theme = "", localizationConfig = {} } = config;
   return (
     <div styleName="card">
       <StoryCard story={story} isHorizontal theme={theme} border={border} borderColor={borderColor} config={config}>
-        <HeroImage
-          story={story}
-          aspectRatio={[
-            [9, 5],
-            [9, 5],
-          ]}
-        />
-        <div styleName="card-content" className="small-card-container">
+        <HeroImage isHorizontal story={story} aspectRatio={[[9, 5], [9, 5]]} />
+        <div className="small-card-container">
           <SectionTag story={story} borderColor={borderColor} />
           <Headline story={story} headerLevel="6" premiumStoryIconConfig={config} />
-          <AuthorWithTime config={localizationConfig} story={story} prefix="By" />
+          <AuthorWithTime config={localizationConfig} story={story} prefix="By" collectionId={collectionId} />
         </div>
       </StoryCard>
     </div>
@@ -52,12 +46,10 @@ const ThreeColFlexStories = ({
   isLoadMoreVisible,
   isLoading,
   isolatedLoadMore,
-  hideFirstCard,
+  hideFirstCard
 }) => {
   const collectionItems = collectionToStories(collection);
-  if (collectionItems.length < 1) {
-    return null;
-  }
+  if (!collectionItems.length) return null;
 
   const {
     collectionNameBorderColor = "",
@@ -65,14 +57,12 @@ const ThreeColFlexStories = ({
     slotConfig = [],
     collectionNameTemplate = "",
     footerButton = "",
-    subsequentLoadCount = 3,
+    subsequentLoadCount = 3
   } = config;
   const { type = "story", component } = get(slotConfig, [0], {});
   const isAdWidgetEnabled = type === "ad" || type === "widget";
   const adWidgetSlot = isAdWidgetEnabled ? getSlot(type, component) : null;
 
-  const textColor = getTextColor(theme);
-
   const stories = type !== "story" ? collectionItems : collectionToStories(collection);
 
   const dispatch = useDispatch();
@@ -88,6 +78,7 @@ const ThreeColFlexStories = ({
           componentName={"ThreeColFlexStories"}
           offset={stories.length}
           limit={subsequentLoadCount}
+          theme={theme}
         />
       );
     }
@@ -111,8 +102,7 @@ const ThreeColFlexStories = ({
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="three-col-flex-stories"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName="wrapper">
         <CollectionName
           collection={collection}
@@ -125,21 +115,21 @@ const ThreeColFlexStories = ({
             <div styleName="row-with-ad">
               <div styleName="card-with-ad">
                 {stories.slice(0, 4).map((story) => (
-                  <FlexCard story={story} config={config} key={story.id} />
+                  <FlexCard story={story} config={config} key={story.id} collectionId={collection.id} />
                 ))}
               </div>
               <div styleName="ad-wrapper">{adWidgetSlot}</div>
             </div>
             <div styleName="card-row">
               {stories.slice(4).map((story) => (
-                <FlexCard story={story} config={config} key={story.id} />
+                <FlexCard story={story} config={config} key={story.id} collectionId={collection.id} />
               ))}
             </div>
           </>
         ) : (
           <div styleName="card-row">
             {stories.map((story) => (
-              <FlexCard story={story} config={config} key={story.id} />
+              <FlexCard story={story} config={config} key={story.id} collectionId={collection.id} />
             ))}
           </div>
         )}
@@ -162,28 +152,29 @@ ThreeColFlexStories.propTypes = {
     footerButton: PropTypes.string,
     collectionNameTemplate: PropTypes.string,
     collectionNameBorderColor: PropTypes.string,
-    subsequentLoadCount: PropTypes.number,
+    subsequentLoadCount: PropTypes.number
   }),
   getMoreStories: PropTypes.func,
   isLoadMoreVisible: PropTypes.bool,
   isLoading: PropTypes.bool,
   isolatedLoadMore: PropTypes.bool,
-  hideFirstCard: PropTypes.bool,
+  hideFirstCard: PropTypes.bool
 };
 
 FlexCard.propTypes = {
+  collectionId: PropTypes.number,
   story: PropTypes.object.isRequired,
   config: PropTypes.shape({
     borderColor: PropTypes.string,
     theme: PropTypes.string,
     border: PropTypes.string,
-    localizationConfig: PropTypes.object,
-  }),
+    localizationConfig: PropTypes.object
+  })
 };
 
 ThreeColFlexStories.defaultProps = {
   getMoreStories: () => {},
   isLoadMoreVisible: true,
   isLoading: false,
-  hideFirstCard: false,
+  hideFirstCard: false
 };
diff --git a/app/isomorphic/arrow/components/Rows/ThreeColFlexStories/stories.js b/app/isomorphic/arrow/components/Rows/ThreeColFlexStories/stories.js
index 57ecde0d8..86f0d4ac6 100644
--- a/app/isomorphic/arrow/components/Rows/ThreeColFlexStories/stories.js
+++ b/app/isomorphic/arrow/components/Rows/ThreeColFlexStories/stories.js
@@ -5,7 +5,7 @@ import {
   optionalSelect,
   sectionTagTemplates,
   collectionNameTemplates,
-  footerButton,
+  footerButton
 } from "../../../../storybook";
 import ThreeColFlexStories from "./index";
 import Readme from "./README.md";
@@ -26,7 +26,7 @@ const sectionTagDefaultvalue = "#ff5858";
 
 const borderTemplate = {
   default: "",
-  border: "bottom",
+  border: "bottom"
 };
 
 const footerSlot = () => {
@@ -42,9 +42,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -66,7 +66,7 @@ withStore(
       showRowTitle: boolean("Row title", true),
       footerSlotConfig: { footerSlot: footerSlot },
       showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     };
 
     return <ThreeColFlexStories collection={collection} config={contextConfig} />;
diff --git a/app/isomorphic/arrow/components/Rows/ThreeColFlexStories/three-col-flex-stories.m.css b/app/isomorphic/arrow/components/Rows/ThreeColFlexStories/three-col-flex-stories.m.css
index a38bf2fef..955af66fb 100644
--- a/app/isomorphic/arrow/components/Rows/ThreeColFlexStories/three-col-flex-stories.m.css
+++ b/app/isomorphic/arrow/components/Rows/ThreeColFlexStories/three-col-flex-stories.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 @value desktop from viewports;
 
@@ -49,9 +48,7 @@
     margin-bottom: var(--arrow-spacing-l);
   }
 }
-.card .card-content {
-  margin-left: var(--arrow-spacing-s);
-}
+
 .ad-wrapper {
   align-self: center;
   margin-bottom: var(--arrow-spacing-m);
diff --git a/app/isomorphic/arrow/components/Rows/ThreeColFourteenStory/index.js b/app/isomorphic/arrow/components/Rows/ThreeColFourteenStory/index.js
index b18cf9330..73b2a7b18 100644
--- a/app/isomorphic/arrow/components/Rows/ThreeColFourteenStory/index.js
+++ b/app/isomorphic/arrow/components/Rows/ThreeColFourteenStory/index.js
@@ -1,13 +1,13 @@
 import React from "react";
 import PropTypes from "prop-types";
-import get from "lodash/get";
+import get from "lodash.get";
 import { collectionToStories } from "@quintype/components";
 
 import { CollectionName } from "../../Atoms/CollectionName";
 import { HeroImage } from "../../Atoms/HeroImage";
 import { StoryCard } from "../../Molecules/StoryCard";
 import { StateProvider } from "../../SharedContext";
-import { getTextColor, getSlot } from "../../../utils/utils";
+import { getSlot } from "../../../utils/utils";
 import { Headline } from "../../Atoms/Headline";
 import { Subheadline } from "../../Atoms/Subheadline/index";
 import { SectionTag } from "../../Atoms/SectionTag";
@@ -16,38 +16,23 @@ import "./three-col-fourteen-story.m.css";
 
 const ThreeColFourteenStories = ({ collection = {}, config = {} }) => {
   const items = collectionToStories(collection);
+  if (!items.length) return null;
+
   const {
     collectionNameBorderColor = "",
     borderColor = "",
     border = "",
     theme = "",
     collectionNameTemplate = "",
-    slotConfig = [],
+    slotConfig = []
   } = config;
   const { type, component } = get(slotConfig, [0], {});
 
-  if (items.length < 1) {
-    return null;
-  }
-
-  const textColor = getTextColor(theme);
-
   const [firstStory, secondStory, ...restOftheStories] = items || [];
 
   const storyCallBack = (restOftheStories = []) => {
     return restOftheStories.slice(10, 13).map((item) => {
-      return (
-        <StoryCard
-          key={item}
-          story={item}
-          isHorizontal
-          aspectRatio={[
-            [1, 1],
-            [4, 3],
-          ]}
-          border={border}
-        />
-      );
+      return <StoryCard key={item} story={item} isHorizontal aspectRatio={[[1, 1], [4, 3]]} border={border} />;
     });
   };
 
@@ -55,8 +40,7 @@ const ThreeColFourteenStories = ({ collection = {}, config = {} }) => {
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="three-col-fourteen-stories"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName="wrapper">
         <CollectionName
           collection={collection}
@@ -69,19 +53,9 @@ const ThreeColFourteenStories = ({ collection = {}, config = {} }) => {
               story={firstStory}
               headerLevel="2"
               theme={theme}
-              aspectRatio={[
-                [16, 9],
-                [16, 9],
-              ]}
-              config={config}
-            >
-              <HeroImage
-                story={firstStory}
-                aspectRatio={[
-                  [16, 9],
-                  [16, 9],
-                ]}
-              />
+              aspectRatio={[[16, 9], [16, 9]]}
+              config={config}>
+              <HeroImage story={firstStory} aspectRatio={[[16, 9], [16, 9]]} />
               <div className="card-content">
                 <SectionTag story={firstStory} borderColor={borderColor} />
                 <Headline story={firstStory} headerLevel="2" premiumStoryIconConfig={config} />
@@ -93,10 +67,7 @@ const ThreeColFourteenStories = ({ collection = {}, config = {} }) => {
                 border={border}
                 story={secondStory}
                 isHorizontal
-                aspectRatio={[
-                  [1, 1],
-                  [4, 3],
-                ]}
+                aspectRatio={[[1, 1], [4, 3]]}
                 borderColor={borderColor}
                 config={config}
               />
@@ -111,10 +82,7 @@ const ThreeColFourteenStories = ({ collection = {}, config = {} }) => {
                     story={item}
                     isHorizontal
                     theme={theme}
-                    aspectRatio={[
-                      [1, 1],
-                      [4, 3],
-                    ]}
+                    aspectRatio={[[1, 1], [4, 3]]}
                     border={border}
                     borderColor={borderColor}
                     config={config}
@@ -131,10 +99,7 @@ const ThreeColFourteenStories = ({ collection = {}, config = {} }) => {
                     story={item}
                     isHorizontal
                     theme={theme}
-                    aspectRatio={[
-                      [1, 1],
-                      [4, 3],
-                    ]}
+                    aspectRatio={[[1, 1], [4, 3]]}
                     border={border}
                     borderColor={borderColor}
                     config={config}
@@ -159,8 +124,8 @@ ThreeColFourteenStories.propTypes = {
     slotConfig: PropTypes.array,
     collectionNameTemplate: PropTypes.string,
     collectionNameBorderColor: PropTypes.string,
-    borderColor: PropTypes.string,
-  }),
+    borderColor: PropTypes.string
+  })
 };
 
 export default StateProvider(ThreeColFourteenStories);
diff --git a/app/isomorphic/arrow/components/Rows/ThreeColFourteenStory/stories.js b/app/isomorphic/arrow/components/Rows/ThreeColFourteenStory/stories.js
index 3893e71c9..89fcbd5c5 100644
--- a/app/isomorphic/arrow/components/Rows/ThreeColFourteenStory/stories.js
+++ b/app/isomorphic/arrow/components/Rows/ThreeColFourteenStory/stories.js
@@ -20,7 +20,7 @@ const sectionTagDefaultvalue = "#3a9fdd";
 
 const borderOptions = {
   "No Value": "",
-  bottom: "bottom",
+  bottom: "bottom"
 };
 
 const configurableSlot = () => {
@@ -32,9 +32,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -53,7 +53,7 @@ withStore(
       showRowTitle: boolean("Row title", true),
       showSubheadline: boolean("show sub headline", false),
       slotConfig: [{ type: "ad", component: configurableSlot }],
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     };
 
     return <ThreeColFourteenStories collection={collection} config={contextConfig} />;
diff --git a/app/isomorphic/arrow/components/Rows/ThreeColGrid/index.js b/app/isomorphic/arrow/components/Rows/ThreeColGrid/index.js
index 3a14062d1..4c3d01873 100644
--- a/app/isomorphic/arrow/components/Rows/ThreeColGrid/index.js
+++ b/app/isomorphic/arrow/components/Rows/ThreeColGrid/index.js
@@ -1,11 +1,11 @@
 import React, { Fragment } from "react";
-import get from "lodash/get";
+import get from "lodash.get";
 import { StoryCard } from "../../Molecules/StoryCard";
 import { HeroImage } from "../../Atoms/HeroImage";
 import { StorycardContent } from "../../Molecules/StorycardContent";
 import { CollectionName } from "../../Atoms/CollectionName";
 import { LoadmoreButton } from "../../Atoms/Loadmore";
-import { getTextColor, getSlot, navigateTo, generateNavigateSlug } from "../../../utils/utils";
+import { getSlot, navigateTo, generateNavigateSlug } from "../../../utils/utils";
 import { collectionToStories } from "@quintype/components";
 import PropTypes from "prop-types";
 import { StateProvider } from "../../SharedContext";
@@ -22,6 +22,9 @@ const loadMore = ({ isLoading, storyItems, getMoreStories, subsequentLoadCount =
 };
 
 const ThreeColGrid = ({ collection, config = {}, getMoreStories, isLoadMoreVisible, isLoading, isolatedLoadMore }) => {
+  const storyItems = collectionToStories(collection);
+  if (!storyItems.length) return null;
+
   const {
     collectionNameBorderColor = "",
     borderColor = "",
@@ -31,12 +34,9 @@ const ThreeColGrid = ({ collection, config = {}, getMoreStories, isLoadMoreVisib
     collectionNameTemplate = "",
     footerSlotConfig = {},
     footerButton = "",
-    subsequentLoadCount = 3,
+    subsequentLoadCount = 3
   } = config;
-  const storyItems = collectionToStories(collection);
-  if (!storyItems.length) return null;
 
-  const textColor = getTextColor(theme);
   const { footerSlot } = footerSlotConfig;
   const footerSlotComp = footerSlot ? footerSlot() : null;
   const { type = "", component } = get(slotConfig, [0], {});
@@ -55,6 +55,7 @@ const ThreeColGrid = ({ collection, config = {}, getMoreStories, isLoadMoreVisib
           componentName={"ThreeColGrid"}
           offset={storyItems.length}
           limit={subsequentLoadCount}
+          theme={theme}
         />
       );
     }
@@ -86,6 +87,7 @@ const ThreeColGrid = ({ collection, config = {}, getMoreStories, isLoadMoreVisib
             isHorizontalMobile
             borderColor={borderColor}
             config={config}
+            collectionId={collection.id}
           />
         </StoryCard>
       </div>
@@ -96,8 +98,7 @@ const ThreeColGrid = ({ collection, config = {}, getMoreStories, isLoadMoreVisib
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="three-col-grid"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName="three-col-grid">
         <CollectionName
           collection={collection}
@@ -132,18 +133,18 @@ ThreeColGrid.propTypes = {
     footerButton: PropTypes.string,
     collectionNameTemplate: PropTypes.string,
     collectionNameBorderColor: PropTypes.string,
-    subsequentLoadCount: PropTypes.number,
+    subsequentLoadCount: PropTypes.number
   }),
   getMoreStories: PropTypes.func,
   isLoadMoreVisible: PropTypes.bool,
   isLoading: PropTypes.bool,
-  isolatedLoadMore: PropTypes.bool,
+  isolatedLoadMore: PropTypes.bool
 };
 
 ThreeColGrid.defaultProps = {
   getMoreStories: () => {},
   isLoadMoreVisible: true,
-  isLoading: false,
+  isLoading: false
 };
 
 export default StateProvider(ThreeColGrid);
diff --git a/app/isomorphic/arrow/components/Rows/ThreeColGrid/stories.js b/app/isomorphic/arrow/components/Rows/ThreeColGrid/stories.js
index de00abb16..219d84f49 100644
--- a/app/isomorphic/arrow/components/Rows/ThreeColGrid/stories.js
+++ b/app/isomorphic/arrow/components/Rows/ThreeColGrid/stories.js
@@ -19,12 +19,12 @@ const sectionTagDefaultvalue = "#3a9fdd";
 
 const borderTemplate = {
   default: "",
-  border: "full",
+  border: "full"
 };
 
 const footerButton = {
   SubsequentLoadCount: "SubsequentLoadCount",
-  NavigateToPage: "NavigateToPage",
+  NavigateToPage: "NavigateToPage"
 };
 
 const configurableSlot = () => {
@@ -39,9 +39,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -63,7 +63,7 @@ withStore(
       buttonText: text("Footer text", "Read More"),
       footerSlotConfig: { footerSlot: footerSlot },
       showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     };
 
     return <ThreeColGrid collection={collection} config={contextConfig} />;
diff --git a/app/isomorphic/arrow/components/Rows/ThreeColSevenStory/index.js b/app/isomorphic/arrow/components/Rows/ThreeColSevenStory/index.js
index 1a653e649..f7896c7f0 100644
--- a/app/isomorphic/arrow/components/Rows/ThreeColSevenStory/index.js
+++ b/app/isomorphic/arrow/components/Rows/ThreeColSevenStory/index.js
@@ -1,7 +1,7 @@
 import React from "react";
-import get from "lodash/get";
+import get from "lodash.get";
 import { collectionToStories } from "@quintype/components";
-import { getTextColor, getSlot, generateNavigateSlug, navigateTo } from "../../../utils/utils";
+import { getSlot, generateNavigateSlug, navigateTo } from "../../../utils/utils";
 import { CollectionName } from "../../Atoms/CollectionName";
 import { StoryCard } from "../../Molecules/StoryCard";
 import { HeroImage } from "../../Atoms/HeroImage";
@@ -14,9 +14,7 @@ import { useDispatch, useSelector } from "react-redux";
 
 const ThreeColSevenStory = ({ collection, config = {} }) => {
   const storyItems = collectionToStories(collection);
-  if (storyItems.length < 1) {
-    return null;
-  }
+  if (!storyItems.length) return null;
 
   const {
     collectionNameBorderColor = "",
@@ -29,6 +27,8 @@ const ThreeColSevenStory = ({ collection, config = {} }) => {
     footerButton = "",
     customCollectionName,
     navigate = true,
+    isHorizontal = true,
+    horizontalImageLast = false
   } = config;
   const { footerSlot } = footerSlotConfig;
   const { type = "story", component } = get(slotConfig, [0], {});
@@ -40,32 +40,42 @@ const ThreeColSevenStory = ({ collection, config = {} }) => {
 
   const storyCardComponent = (story) => {
     return (
-      <StoryCard story={story} theme={theme} border={border} isHorizontal config={config}>
-        <HeroImage
+      <StoryCard
+        story={story}
+        theme={theme}
+        border={border}
+        config={config}
+        isHorizontal={isHorizontal}
+        isHorizontalWithImageLast={horizontalImageLast}>
+        <HeroImage story={story} isHorizontal aspectRatio={[[16, 9], [16, 9]]} />
+        <StorycardContent
+          theme={theme}
+          border={border}
           story={story}
-          isHorizontal
-          aspectRatio={[
-            [16, 9],
-            [16, 9],
-          ]}
+          borderColor={borderColor}
+          config={config}
+          collectionId={collection.id}
         />
-        <StorycardContent theme={theme} border={border} story={story} borderColor={borderColor} config={config} />
       </StoryCard>
     );
   };
 
   const storyCardWidthoutBorder = (story) => {
     return (
-      <StoryCard story={story} theme={theme} isHorizontal config={config}>
-        <HeroImage
+      <StoryCard
+        story={story}
+        theme={theme}
+        config={config}
+        isHorizontal={isHorizontal}
+        isHorizontalWithImageLast={horizontalImageLast}>
+        <HeroImage story={story} isHorizontal aspectRatio={[[16, 9], [16, 9]]} />
+        <StorycardContent
+          theme={theme}
           story={story}
-          isHorizontal
-          aspectRatio={[
-            [16, 9],
-            [16, 9],
-          ]}
+          borderColor={borderColor}
+          config={config}
+          collectionId={collection.id}
         />
-        <StorycardContent theme={theme} story={story} borderColor={borderColor} config={config} />
       </StoryCard>
     );
   };
@@ -75,14 +85,20 @@ const ThreeColSevenStory = ({ collection, config = {} }) => {
       <div>
         {storyItems.slice(5, 6).map((story, index) => {
           return (
-            <div styleName={`${borderBottomStyle}`} key={`default-${index}`}>
+            <div
+              styleName={`${borderBottomStyle}`}
+              key={`default-${index}`}
+              className="three-col-seven-story_three-col-storycard-wrapper">
               {storyCardComponent(story)}
             </div>
           );
         })}
         {storyItems.slice(6, 7).map((story, index) => {
           return (
-            <div styleName={`${borderBottomStyle}`} key={`default-${index}`}>
+            <div
+              styleName={`${borderBottomStyle}`}
+              key={`default-${index}`}
+              className="three-col-seven-story_three-col-storycard-wrapper">
               {storyCardWidthoutBorder(story)}
             </div>
           );
@@ -94,15 +110,13 @@ const ThreeColSevenStory = ({ collection, config = {} }) => {
   const slot = getSlot(type, component, storySlot);
   const footerSlotComp = footerSlot ? footerSlot() : null;
 
-  const textColor = getTextColor(theme);
   const Cards = border === "bottom" ? "cards" : "";
 
   return (
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="three-col-seven-stories"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName="wrapper">
         <CollectionName
           collection={collection}
@@ -111,52 +125,64 @@ const ThreeColSevenStory = ({ collection, config = {} }) => {
           customCollectionName={customCollectionName}
           navigate={navigate}
         />
-        <div styleName="three-col-five-stories">
-          <div styleName={`${Cards}`}>
+        <div styleName="three-col-five-stories" className="three-col-seven-story_three-col-five-stories">
+          <div styleName={`${Cards}`} className="three-col-seven-story_three-col-five-card">
             {storyItems.slice(0, 1).map((story, index) => {
               return (
-                <div styleName={`${borderBottomStyle}`} key={`default-${index}`}>
+                <div
+                  styleName={`${borderBottomStyle}`}
+                  key={`default-${index}`}
+                  className="three-col-seven-story_three-col-storycard-wrapper">
                   <StoryCard
                     story={story}
                     theme={theme}
-                    aspectRatio={[
-                      [16, 9],
-                      [16, 9],
-                    ]}
+                    aspectRatio={[[16, 9], [16, 9]]}
                     headerLevel="5"
                     borderColor={borderColor}
                     config={config}
+                    collectionId={collection.id}
                   />
                 </div>
               );
             })}
           </div>
 
-          <div styleName={`${Cards}`}>
+          <div styleName={`${Cards}`} className="three-col-seven-story_three-col-five-card">
             {storyItems.slice(1, 3).map((story, index) => {
               return (
-                <div styleName={`${borderBottomStyle}`} key={`default-${index}`}>
+                <div
+                  styleName={`${borderBottomStyle}`}
+                  key={`default-${index}`}
+                  className="three-col-seven-story_three-col-storycard-wrapper">
                   {storyCardComponent(story)}
                 </div>
               );
             })}
             {storyItems.slice(3, 4).map((story, index) => {
               return (
-                <div styleName={`${borderBottomStyle}`} key={`default-${index}`}>
+                <div
+                  styleName={`${borderBottomStyle}`}
+                  key={`default-${index}`}
+                  className="three-col-seven-story_three-col-storycard-wrapper">
                   {storyCardWidthoutBorder(story)}
                 </div>
               );
             })}
           </div>
-          <div>
+          <div className="three-col-seven-story_three-col-five-card">
             {storyItems.slice(4, 5).map((story, index) => {
               return (
-                <div styleName={`${borderBottomStyle} ${lastCardBorderBottom}`} key={`default-${index}`}>
+                <div
+                  styleName={`${borderBottomStyle} ${lastCardBorderBottom}`}
+                  key={`default-${index}`}
+                  className="three-col-seven-story_three-col-storycard-wrapper">
                   {storyCardComponent(story)}
                 </div>
               );
             })}
-            <div styleName="ads">{slot}</div>
+            <div styleName="ads" className="three-col-seven-story_three-col-seven-ad">
+              {slot}
+            </div>
           </div>
         </div>
         <LoadmoreButton
@@ -184,7 +210,8 @@ ThreeColSevenStory.propTypes = {
     footerButton: PropTypes.string,
     collectionNameTemplate: PropTypes.string,
     collectionNameBorderColor: PropTypes.string,
-  }),
+    horizontalImageLast: PropTypes.bool
+  })
 };
 
 export default StateProvider(ThreeColSevenStory);
diff --git a/app/isomorphic/arrow/components/Rows/ThreeColSevenStory/stories.js b/app/isomorphic/arrow/components/Rows/ThreeColSevenStory/stories.js
index 4d9a5cb22..981638d95 100644
--- a/app/isomorphic/arrow/components/Rows/ThreeColSevenStory/stories.js
+++ b/app/isomorphic/arrow/components/Rows/ThreeColSevenStory/stories.js
@@ -5,7 +5,7 @@ import {
   optionalSelect,
   sectionTagTemplates,
   collectionNameTemplates,
-  footerButton,
+  footerButton
 } from "../../../../storybook";
 import ThreeColSevenStory from "./index";
 import { AdPlaceholder } from "../../Atoms/AdPlaceholder";
@@ -26,7 +26,7 @@ const sectionTagDefaultvalue = "#3a9fdd";
 
 const borderTemplate = {
   default: "",
-  border: "bottom",
+  border: "bottom"
 };
 
 const configurableSlot = () => {
@@ -40,9 +40,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -64,8 +64,40 @@ withStore(
       slotConfig: [{ type: "story", component: configurableSlot }],
       footerSlotConfig: { footerSlot: footerSlot },
       showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
+    };
+    return <ThreeColSevenStory collection={collection} config={contextConfig} />;
+  });
+withStore(
+  "Rows/Three Col Seven Stories ",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
+  },
+  Readme
+)
+  .addDecorator((story) => <div style={{ maxWidth: "1000px", margin: "auto" }}>{story()}</div>)
+  .add("With Ad", () => {
+    const contextConfig = {
+      collectionNameBorderColor: color(collectionNameBorderColorLabel, collectionNameDefaultValue),
+      borderColor: color(sectionTagBorderColor, sectionTagDefaultvalue),
+      theme: color(label, defaultvalue),
+      border: optionalSelect("Border", borderTemplate),
+      collectionNameTemplate: optionalSelect("Collection Name Templates", collectionNameTemplates),
+      sectionTagTemplate: optionalSelect("Section Tag Templates", sectionTagTemplates),
+      showSection: boolean("section disable", true),
+      showAuthor: boolean("Author disable", true),
+      showTime: boolean("Timestamp disable", true),
+      footerButton: optionalSelect("Footer Button", footerButton),
+      buttonText: text("Footer text", "Read More"),
+      showRowTitle: boolean("Row title", true),
+      slotConfig: [{ type: "ad", component: configurableSlot }],
+      footerSlotConfig: { footerSlot: footerSlot },
+      showButton: boolean("Show button", true),
+      showReadTime: boolean("Read time", true)
     };
-
     return <ThreeColSevenStory collection={collection} config={contextConfig} />;
   });
diff --git a/app/isomorphic/arrow/components/Rows/ThreeColSixStories/index.js b/app/isomorphic/arrow/components/Rows/ThreeColSixStories/index.js
index f25540b26..e74043583 100644
--- a/app/isomorphic/arrow/components/Rows/ThreeColSixStories/index.js
+++ b/app/isomorphic/arrow/components/Rows/ThreeColSixStories/index.js
@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import get from "lodash/get";
+import get from "lodash.get";
 
 import { collectionToStories } from "@quintype/components";
 import { CollectionName } from "../../Atoms/CollectionName";
@@ -8,7 +8,7 @@ import { HeroImage } from "../../Atoms/HeroImage";
 import { StorycardContent } from "../../Molecules/StorycardContent";
 import { StoryCard } from "../../Molecules/StoryCard";
 import { StateProvider } from "../../SharedContext";
-import { getTextColor, getSlot, generateNavigateSlug, navigateTo } from "../../../utils/utils";
+import { getSlot, generateNavigateSlug, navigateTo } from "../../../utils/utils";
 import { LoadmoreButton } from "../../Atoms/Loadmore";
 
 import "./three-col-six-stories.m.css";
@@ -16,6 +16,7 @@ import { useDispatch, useSelector } from "react-redux";
 
 const ThreeColSixStories = ({ collection = {}, config = {} }) => {
   const itemsArray = collectionToStories(collection);
+  if (!collectionToStories(collection).length) return null;
 
   const {
     collectionNameBorderColor = "",
@@ -25,15 +26,11 @@ const ThreeColSixStories = ({ collection = {}, config = {} }) => {
     slotConfig = [],
     collectionNameTemplate = "",
     footerSlotConfig = {},
-    footerButton = "",
+    footerButton = ""
   } = config;
   const { type = "story", component } = get(slotConfig, [0], {});
   const { footerSlot } = footerSlotConfig;
 
-  if (collectionToStories(collection).length < 1) {
-    return null;
-  }
-  const textColor = getTextColor(theme);
   const footerSlotComp = footerSlot ? footerSlot() : null;
 
   itemsArray.splice(1, 0, null);
@@ -47,7 +44,7 @@ const ThreeColSixStories = ({ collection = {}, config = {} }) => {
   const storySlot = () => {
     return (
       <StoryCard story={items[1]} headerLevel="5" theme={theme} border={border} isHorizontalMobile config={config}>
-        <HeroImage story={items[1]} isHorizontalMobile />
+        <HeroImage story={items[1]} isHorizontalMobile aspectRatio={[[16, 9], [16, 9]]} />
         <StorycardContent
           theme={theme}
           headerLevel="5"
@@ -55,6 +52,7 @@ const ThreeColSixStories = ({ collection = {}, config = {} }) => {
           border={border}
           borderColor={borderColor}
           config={config}
+          collectionId={collection.id}
         />
       </StoryCard>
     );
@@ -64,8 +62,7 @@ const ThreeColSixStories = ({ collection = {}, config = {} }) => {
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="three-col-six-stories"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName="wrapper">
         <CollectionName
           collection={collection}
@@ -79,19 +76,9 @@ const ThreeColSixStories = ({ collection = {}, config = {} }) => {
               headerLevel="2"
               theme={theme}
               border={border}
-              aspectRatio={[
-                [16, 9],
-                [16, 9],
-              ]}
-              config={config}
-            >
-              <HeroImage
-                story={items[0]}
-                aspectRatio={[
-                  [16, 9],
-                  [16, 9],
-                ]}
-              />
+              aspectRatio={[[16, 9], [16, 9]]}
+              config={config}>
+              <HeroImage story={items[0]} aspectRatio={[[16, 9], [16, 9]]} />
               <StorycardContent
                 story={items[0]}
                 headerLevel="2"
@@ -99,6 +86,7 @@ const ThreeColSixStories = ({ collection = {}, config = {} }) => {
                 border={border}
                 borderColor={borderColor}
                 config={config}
+                collectionId={collection.id}
               />
             </StoryCard>
           </div>
@@ -111,9 +99,8 @@ const ThreeColSixStories = ({ collection = {}, config = {} }) => {
                 theme={theme}
                 border={border}
                 isHorizontalMobile
-                config={config}
-              >
-                <HeroImage story={items[2]} isHorizontalMobile />
+                config={config}>
+                <HeroImage story={items[2]} isHorizontalMobile aspectRatio={[[16, 9], [16, 9]]} />
                 <StorycardContent
                   theme={theme}
                   headerLevel="5"
@@ -121,6 +108,7 @@ const ThreeColSixStories = ({ collection = {}, config = {} }) => {
                   border={border}
                   borderColor={borderColor}
                   config={config}
+                  collectionId={collection.id}
                 />
               </StoryCard>
             </div>
@@ -130,7 +118,7 @@ const ThreeColSixStories = ({ collection = {}, config = {} }) => {
           {items.slice(3, 6).map((story, index) => (
             <div styleName="card" key={index}>
               <StoryCard story={story} headerLevel="5" theme={theme} border={border} isHorizontalMobile config={config}>
-                <HeroImage story={story} isHorizontalMobile />
+                <HeroImage story={story} isHorizontalMobile aspectRatio={[[16, 9], [16, 9]]} />
                 <StorycardContent
                   theme={theme}
                   headerLevel="5"
@@ -138,6 +126,7 @@ const ThreeColSixStories = ({ collection = {}, config = {} }) => {
                   border={border}
                   borderColor={borderColor}
                   config={config}
+                  collectionId={collection.id}
                 />
               </StoryCard>
             </div>
@@ -168,6 +157,6 @@ ThreeColSixStories.propTypes = {
     slotConfig: PropTypes.array,
     footerButton: PropTypes.string,
     collectionNameTemplate: PropTypes.string,
-    collectionNameBorderColor: PropTypes.string,
-  }),
+    collectionNameBorderColor: PropTypes.string
+  })
 };
diff --git a/app/isomorphic/arrow/components/Rows/ThreeColSixStories/stories.js b/app/isomorphic/arrow/components/Rows/ThreeColSixStories/stories.js
index 07e1ed948..229d3c585 100644
--- a/app/isomorphic/arrow/components/Rows/ThreeColSixStories/stories.js
+++ b/app/isomorphic/arrow/components/Rows/ThreeColSixStories/stories.js
@@ -5,7 +5,7 @@ import {
   optionalSelect,
   sectionTagTemplates,
   collectionNameTemplates,
-  footerButton,
+  footerButton
 } from "../../../../storybook";
 import ThreeColSixStories from "./index";
 import Readme from "./README.md";
@@ -26,7 +26,7 @@ const sectionTagDefaultvalue = "#3a9fdd";
 
 const borderTemplate = {
   default: "",
-  border: "full",
+  border: "full"
 };
 
 const footerSlot = () => {
@@ -42,9 +42,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -66,7 +66,7 @@ withStore(
       showRowTitle: boolean("Row title", true),
       footerSlotConfig: { footerSlot: footerSlot },
       showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     };
 
     return <ThreeColSixStories collection={collection} config={contextConfig} />;
diff --git a/app/isomorphic/arrow/components/Rows/ThreeColTwelveStories/index.js b/app/isomorphic/arrow/components/Rows/ThreeColTwelveStories/index.js
index 58272da16..c95c1a313 100644
--- a/app/isomorphic/arrow/components/Rows/ThreeColTwelveStories/index.js
+++ b/app/isomorphic/arrow/components/Rows/ThreeColTwelveStories/index.js
@@ -8,13 +8,13 @@ import { Headline } from "../../Atoms/Headline";
 import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
 import { HeroImage } from "../../Atoms/HeroImage";
 import "./three-col-twelve-stories.m.css";
-import { generateNavigateSlug, getTextColor, navigateTo, rgbToHex } from "../../../utils/utils";
+import { generateNavigateSlug, navigateTo, rgbToHex } from "../../../utils/utils";
 import { StateProvider } from "../../SharedContext";
 import { LoadmoreButton } from "../../Atoms/Loadmore";
 import { useDispatch, useSelector } from "react-redux";
 import { SectionTag } from "../../Atoms/SectionTag";
 
-const getChildCollectionData = (collection = {}, config = {}, collectionIndex, qtConfig) => {
+const getChildCollectionData = (collection = {}, config = {}, collectionIndex, qtConfig, parentCollectionId) => {
   const stories = collectionToStories(collection);
   if (!stories.length) return null;
   const [firstStory, ...otherStories] = stories;
@@ -25,12 +25,14 @@ const getChildCollectionData = (collection = {}, config = {}, collectionIndex, q
     footerButton = "",
     localizationConfig = {},
     collectionNameBorderColor = "",
-    borderColor = "",
+    borderColor = ""
   } = config;
 
   const sectionTagBorderColor = rgbToHex(borderColor);
   const dispatch = useDispatch();
   const url = generateNavigateSlug(collection, qtConfig);
+  const languageDirection = get(qtConfig, ["language", "direction"], "ltr");
+  const customClassName = languageDirection === "rtl" ? "rtl-threeColTwelveStories" : "ltr-threeColTwelveStories";
 
   return (
     <div styleName="column" style={{ order: collectionIndex }}>
@@ -49,7 +51,12 @@ const getChildCollectionData = (collection = {}, config = {}, collectionIndex, q
               <div styleName="big-card-content">
                 <SectionTag story={firstStory} borderColor={sectionTagBorderColor} />
                 <Headline story={firstStory} premiumStoryIconConfig={config} />
-                <AuthorWithTime config={localizationConfig} story={firstStory} hideAuthorImage={true} />
+                <AuthorWithTime
+                  config={localizationConfig}
+                  story={firstStory}
+                  hideAuthorImage={true}
+                  collectionId={`${parentCollectionId}-${collection.id}`}
+                />
               </div>
             </div>
           </StoryCard>
@@ -58,15 +65,20 @@ const getChildCollectionData = (collection = {}, config = {}, collectionIndex, q
           <div styleName="small-card" key={story.id}>
             <StoryCard story={story} theme={theme} border={withSeparator ? "bottom" : ""} config={config}>
               <div styleName="small-card-top-row">
-                <div styleName="small-card-content">
+                <div styleName="small-card-content" className={`${customClassName}`}>
                   <SectionTag story={story} borderColor={sectionTagBorderColor} />
                   <Headline story={story} premiumStoryIconConfig={config} />
+                  <AuthorWithTime
+                    config={localizationConfig}
+                    story={story}
+                    hideAuthorImage={true}
+                    collectionId={`${parentCollectionId}-${collection.id}`}
+                  />
                 </div>
                 <div styleName="small-card-hero-image">
                   <HeroImage story={story} aspectRatio={[[16, 9]]} />
                 </div>
               </div>
-              <AuthorWithTime config={localizationConfig} story={story} hideAuthorImage={true} />
             </StoryCard>
           </div>
         ))}
@@ -89,19 +101,19 @@ function ThreeColTwelveStories({ collection, config = {} }) {
   const { theme = "", slotConfig = [] } = config;
   const isSlotTypeStory = get(slotConfig, [0, "type"], "story") === "story";
   const collectionCount = isSlotTypeStory ? 3 : 2;
-  const textColor = getTextColor(theme);
   const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
   const adWidgetComponent = get(slotConfig, [0, "component"]);
   return (
     <div
       className="full-width-with-padding arrow-component arr--three-col-twelve-stories"
       data-test-id="three-col-twelve-stories"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName="wrapper">
         {childCollections
           .slice(0, collectionCount)
-          .map((childCollection, index) => getChildCollectionData(childCollection, config, index, qtConfig))}
+          .map((childCollection, index) =>
+            getChildCollectionData(childCollection, config, index, qtConfig, collection.id)
+          )}
         {!isSlotTypeStory && adWidgetComponent && <div styleName="ad-widget-container">{adWidgetComponent()}</div>}
       </div>
     </div>
@@ -117,8 +129,8 @@ ThreeColTwelveStories.propTypes = {
     slotConfig: PropTypes.array,
     footerButton: PropTypes.string,
     collectionNameTemplate: PropTypes.string,
-    collectionNameBorderColor: PropTypes.string,
-  }),
+    collectionNameBorderColor: PropTypes.string
+  })
 };
 
 export default StateProvider(ThreeColTwelveStories);
diff --git a/app/isomorphic/arrow/components/Rows/ThreeColTwelveStories/stories.js b/app/isomorphic/arrow/components/Rows/ThreeColTwelveStories/stories.js
index b9c03ed7d..bf831cdf1 100644
--- a/app/isomorphic/arrow/components/Rows/ThreeColTwelveStories/stories.js
+++ b/app/isomorphic/arrow/components/Rows/ThreeColTwelveStories/stories.js
@@ -6,7 +6,7 @@ import {
   optionalSelect,
   collectionNameTemplates,
   footerButton,
-  sectionTagTemplates,
+  sectionTagTemplates
 } from "../../../../storybook";
 import Readme from "./README.md";
 import ThreeColTwelveStories from "./index";
@@ -23,9 +23,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -44,7 +44,7 @@ withStore(
       buttonText: text("Footer text", "Read More"),
       showButton: boolean("Show button", true),
       showReadTime: boolean("Read time", true),
-      slotConfig: [{ type: "story", component: configurableSlot }],
+      slotConfig: [{ type: "story", component: configurableSlot }]
     };
 
     return <ThreeColTwelveStories collection={collection} config={contextConfig} />;
diff --git a/app/isomorphic/arrow/components/Rows/ThreeColTwelveStories/three-col-twelve-stories.m.css b/app/isomorphic/arrow/components/Rows/ThreeColTwelveStories/three-col-twelve-stories.m.css
index 15d9ddb80..bef42988f 100644
--- a/app/isomorphic/arrow/components/Rows/ThreeColTwelveStories/three-col-twelve-stories.m.css
+++ b/app/isomorphic/arrow/components/Rows/ThreeColTwelveStories/three-col-twelve-stories.m.css
@@ -1,13 +1,14 @@
-/*eslint-disable no-descending-specificity */
-@custom-media --viewport-medium (width >= 992px);
-@custom-media --viewport-tab (width >= 768px);
+@custom-media --viewport-medium (width >=992px);
+@custom-media --viewport-tab (width >=768px);
 
 .wrapper {
   padding: 0 var(--arrow-spacing-s);
   display: grid;
+
   @media (--viewport-tab) {
     padding: 0 var(--arrow-spacing-l);
   }
+
   @media (--viewport-medium) {
     padding: 0;
     grid-column-gap: var(--arrow-spacing-l);
@@ -23,17 +24,21 @@
 .big-card-hero-image {
   background-color: var(--arrow-c-dark);
 }
+
 .big-card-hero-image img {
   opacity: 0.5;
 }
+
 .big-card-content {
   position: absolute;
   bottom: 0;
   padding: var(--arrow-spacing-s) var(--arrow-spacing-s) var(--arrow-spacing-xs);
+
   @media (--viewport-tab) {
     padding: var(--arrow-spacing-l) var(--arrow-spacing-l) var(--arrow-spacing-m);
   }
 }
+
 .big-card-content :global(.arr--headline h6),
 .big-card-content :global(.arr--publish-time),
 .big-card-content :global(.arr-separator),
@@ -42,6 +47,7 @@
 .big-card-content :global(.arr--section-name .section-tag) {
   color: var(--arrow-c-light);
 }
+
 .big-card-content :global(.arr-separator svg),
 .big-card-content :global(.arr--read-time svg) {
   fill: var(--arrow-c-light);
@@ -51,8 +57,7 @@
 .small-card-top-row {
   display: flex;
   justify-content: space-between;
-  padding-top: var(--arrow-spacing-m);
-  margin-bottom: var(--arrow-spacing-xs);
+  margin-bottom: var(--arrow-spacing-s);
 }
 
 .small-card-content {
@@ -64,7 +69,7 @@
 }
 
 .small-card-hero-image {
-  flex: 0 0 88px;
+  flex: 0 0 40%;
 }
 
 /* column */
@@ -77,8 +82,14 @@
 
 .ad-widget-container {
   margin-bottom: var(--arrow-spacing-xl);
+
   @media (--viewport-medium) {
     order: 3;
     margin-top: 55px;
   }
 }
+
+.small-card {
+  padding-top: var(--arrow-spacing-s);
+  margin-bottom: var(--arrow-spacing-xs);
+}
diff --git a/app/isomorphic/arrow/components/Rows/TwoColFourStory/index.js b/app/isomorphic/arrow/components/Rows/TwoColFourStory/index.js
index b8c1994dc..cf960f216 100644
--- a/app/isomorphic/arrow/components/Rows/TwoColFourStory/index.js
+++ b/app/isomorphic/arrow/components/Rows/TwoColFourStory/index.js
@@ -13,10 +13,15 @@ import { LoadmoreButton } from "../../Atoms/Loadmore";
 
 import "./two-col-four-story.m.css";
 import { useDispatch, useSelector } from "react-redux";
-import get from "lodash/get";
+import get from "lodash.get";
 
 export const TwoColFourStories = ({ collection, config = {} }) => {
+  const dispatch = useDispatch();
+  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+
   const items = collectionToStories(collection);
+  if (!items.length) return null;
+
   const {
     border = "",
     borderColor = "",
@@ -24,18 +29,12 @@ export const TwoColFourStories = ({ collection, config = {} }) => {
     theme = "",
     collectionNameTemplate = "",
     footerSlotConfig = {},
-    footerButton = "",
+    footerButton = ""
   } = config;
   const { footerSlot } = footerSlotConfig;
   const borderStyle = border === "bottom" ? "border-box" : "";
   const firstCardBorderStyle = border === "bottom" ? "first-card-border-box" : "";
 
-  if (items.length < 1) {
-    return null;
-  }
-
-  const dispatch = useDispatch();
-  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
   const url = generateNavigateSlug(collection, qtConfig);
 
   const textColor = getTextColor(theme);
@@ -44,9 +43,8 @@ export const TwoColFourStories = ({ collection, config = {} }) => {
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="two-col-four-stories"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
-      <div styleName="two-col-four-story" style={{ backgroundColor: theme, color: textColor }}>
+      style={{ backgroundColor: theme || "initial" }}>
+      <div styleName="two-col-four-story" style={{ backgroundColor: theme || "initial" }}>
         <CollectionName
           collection={collection}
           collectionNameTemplate={collectionNameTemplate}
@@ -59,19 +57,9 @@ export const TwoColFourStories = ({ collection, config = {} }) => {
               theme={theme}
               headerLevel="3"
               bgImgContentOverlap
-              aspectRatio={[
-                [16, 9],
-                [16, 9],
-              ]}
-              config={config}
-            >
-              <HeroImage
-                story={items[0]}
-                aspectRatio={[
-                  [16, 9],
-                  [16, 9],
-                ]}
-              />
+              aspectRatio={[[16, 9], [16, 9]]}
+              config={config}>
+              <HeroImage story={items[0]} aspectRatio={[[16, 9], [16, 9]]} />
               <StorycardContent
                 styleName={firstCardBorderStyle}
                 story={items[0]}
@@ -80,6 +68,7 @@ export const TwoColFourStories = ({ collection, config = {} }) => {
                 isHorizontal
                 borderColor={borderColor}
                 config={config}
+                collectionId={collection.id}
               />
             </StoryCard>
           </div>
@@ -94,26 +83,16 @@ export const TwoColFourStories = ({ collection, config = {} }) => {
                       theme={theme}
                       headerLevel="4"
                       isHorizontal
-                      aspectRatio={[
-                        [16, 9],
-                        [16, 9],
-                      ]}
-                      config={config}
-                    >
-                      <HeroImage
-                        story={story}
-                        isHorizontal
-                        aspectRatio={[
-                          [16, 9],
-                          [16, 9],
-                        ]}
-                      />
+                      aspectRatio={[[16, 9], [16, 9]]}
+                      config={config}>
+                      <HeroImage story={story} isHorizontal aspectRatio={[[16, 9], [16, 9]]} />
                       <StorycardContent
                         theme={theme}
                         story={story}
                         isHorizontal
                         borderColor={borderColor}
                         config={config}
+                        collectionId={collection.id}
                       />
                     </StoryCard>
                   </div>
@@ -127,26 +106,16 @@ export const TwoColFourStories = ({ collection, config = {} }) => {
                     headerLevel="4"
                     isHorizontal
                     border={border}
-                    aspectRatio={[
-                      [16, 9],
-                      [16, 9],
-                    ]}
-                    config={config}
-                  >
-                    <HeroImage
-                      story={story}
-                      isHorizontal
-                      aspectRatio={[
-                        [16, 9],
-                        [16, 9],
-                      ]}
-                    />
+                    aspectRatio={[[16, 9], [16, 9]]}
+                    config={config}>
+                    <HeroImage story={story} isHorizontal aspectRatio={[[16, 9], [16, 9]]} />
                     <StorycardContent
                       theme={theme}
                       story={story}
                       isHorizontal
                       borderColor={borderColor}
                       config={config}
+                      collectionId={collection.id}
                     />
                   </StoryCard>
                 </div>
@@ -179,6 +148,6 @@ TwoColFourStories.propTypes = {
     border: PropTypes.string,
     footerButton: PropTypes.string,
     collectionNameTemplate: PropTypes.string,
-    collectionNameBorderColor: PropTypes.string,
-  }),
+    collectionNameBorderColor: PropTypes.string
+  })
 };
diff --git a/app/isomorphic/arrow/components/Rows/TwoColFourStory/stories.js b/app/isomorphic/arrow/components/Rows/TwoColFourStory/stories.js
index 7690df43d..0a6a43cd5 100644
--- a/app/isomorphic/arrow/components/Rows/TwoColFourStory/stories.js
+++ b/app/isomorphic/arrow/components/Rows/TwoColFourStory/stories.js
@@ -5,7 +5,7 @@ import {
   optionalSelect,
   sectionTagTemplates,
   collectionNameTemplates,
-  footerButton,
+  footerButton
 } from "../../../../storybook";
 import TwoColFourStories from "./index";
 import Readme from "./README.md";
@@ -26,7 +26,7 @@ const sectionTagDefaultvalue = "#3a9fdd";
 
 const borderTemplate = {
   default: "",
-  border: "bottom",
+  border: "bottom"
 };
 
 const footerSlot = () => {
@@ -38,9 +38,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -61,7 +61,7 @@ withStore(
       showRowTitle: boolean("Row title", true),
       footerSlotConfig: { footerSlot: footerSlot },
       showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     };
 
     return <TwoColFourStories collection={collection} config={contextConfig} />;
diff --git a/app/isomorphic/arrow/components/Rows/TwoColFourStoryHighlight/index.js b/app/isomorphic/arrow/components/Rows/TwoColFourStoryHighlight/index.js
index 069c0366b..413930c56 100644
--- a/app/isomorphic/arrow/components/Rows/TwoColFourStoryHighlight/index.js
+++ b/app/isomorphic/arrow/components/Rows/TwoColFourStoryHighlight/index.js
@@ -16,11 +16,9 @@ import { useDispatch, useSelector } from "react-redux";
 import get from "lodash/get";
 import "./two-col-four-story-highlight.m.css";
 
-export const TwoColFourStoryHighlight = ({ collection, config = {} }) => {
+export const TwoColFourStoryHighlight = ({ collection, config = {}, enableDarkMode = false }) => {
   const items = collectionToStories(collection);
-  if (!items.length) {
-    return null;
-  }
+  if (!items.length) return null;
 
   const {
     showBorder = true,
@@ -30,8 +28,8 @@ export const TwoColFourStoryHighlight = ({ collection, config = {} }) => {
     collectionNameTemplate = "",
     showBullet = true,
     customBulletColor = "",
-    localizationConfig = {},
-    bulletColorType = "default",
+    darkCustomBulletColor = "",
+    localizationConfig = {}
   } = config;
   const textColor = getTextColor(theme);
   const [firstStory, ...restStories] = items;
@@ -39,14 +37,13 @@ export const TwoColFourStoryHighlight = ({ collection, config = {} }) => {
   const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
   const url = generateNavigateSlug(collection, qtConfig);
   const SectionTagBorderColor = rgbToHex(borderColor);
-
+  const getBulletColor = enableDarkMode ? darkCustomBulletColor : customBulletColor;
   return (
     <div
       className="full-width-with-padding arrow-component arr--two-col-four-story-highlight"
       data-test-id="two-col-four-story-highlight"
-      style={{ backgroundColor: theme, color: textColor }}
-      styleName={`componentWrapper ${showBullet ? "bulletStyle" : ""}`}
-    >
+      style={{ backgroundColor: theme || "initial" }}
+      styleName={`componentWrapper ${showBullet ? "bulletStyle" : ""}`}>
       <div styleName="highlightWrapper">
         <CollectionName
           collection={collection}
@@ -59,8 +56,8 @@ export const TwoColFourStoryHighlight = ({ collection, config = {} }) => {
               {showBullet && (
                 <span
                   data-test-id="bullet"
-                  styleName={`bullet ${bulletColorType === "default" ? textColor : ""}`}
-                  style={{ color: customBulletColor }}
+                  styleName={`bullet ${!getBulletColor ? textColor : ""}`}
+                  style={{ color: getBulletColor || "initial" }}
                 />
               )}
               <StoryCard
@@ -68,9 +65,13 @@ export const TwoColFourStoryHighlight = ({ collection, config = {} }) => {
                 bgImgContentOverlap
                 config={config}
                 border={showBorder ? "bottom" : ""}
-                theme={theme}
-              >
-                <StorycardContent story={story} borderColor={SectionTagBorderColor} />
+                theme={theme}>
+                <StorycardContent
+                  config={config}
+                  story={story}
+                  borderColor={SectionTagBorderColor}
+                  collectionId={collection.id}
+                />
               </StoryCard>
             </div>
           ))}
@@ -94,14 +95,13 @@ export const TwoColFourStoryHighlight = ({ collection, config = {} }) => {
           bgImgContentOverlap
           config={config}
           border={showBorder ? "full" : ""}
-          theme={theme}
-        >
+          theme={theme}>
           <HeroImage story={firstStory} />
-          <div style={{ backgroundColor: theme, color: textColor }}>
+          <div style={{ backgroundColor: theme || "initial" }}>
             <SectionTag story={firstStory} borderColor={SectionTagBorderColor} />
             <Headline story={firstStory} headerLevel={4} premiumStoryIconConfig={config} />
             <Subheadline story={firstStory} />
-            <AuthorWithTime config={localizationConfig} story={firstStory} />
+            <AuthorWithTime config={localizationConfig} story={firstStory} collectionId={collection.id} />
           </div>
         </StoryCard>
       </div>
@@ -113,6 +113,7 @@ export default StateProvider(TwoColFourStoryHighlight);
 
 TwoColFourStoryHighlight.propTypes = {
   collection: PropTypes.object.isRequired,
+  enableDarkMode: PropTypes.bool,
   config: PropTypes.shape({
     theme: PropTypes.string,
     showBorder: PropTypes.bool,
@@ -120,6 +121,6 @@ TwoColFourStoryHighlight.propTypes = {
     collectionNameBorderColor: PropTypes.string,
     borderColor: PropTypes.string,
     showBullet: PropTypes.bool,
-    localizationConfig: PropTypes.object,
-  }),
+    localizationConfig: PropTypes.object
+  })
 };
diff --git a/app/isomorphic/arrow/components/Rows/TwoColFourStoryHighlight/stories.js b/app/isomorphic/arrow/components/Rows/TwoColFourStoryHighlight/stories.js
index aeae7fd7d..4db5d2938 100644
--- a/app/isomorphic/arrow/components/Rows/TwoColFourStoryHighlight/stories.js
+++ b/app/isomorphic/arrow/components/Rows/TwoColFourStoryHighlight/stories.js
@@ -9,7 +9,7 @@ const collection = generateCollection({ stories: 4 });
 
 const bulletColorTypeTemplates = {
   default: "Default",
-  custom: "Custom",
+  custom: "Custom"
 };
 
 withStore(
@@ -17,9 +17,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -41,7 +41,7 @@ withStore(
       showReadTime: boolean("Read time", true),
       showBullet: boolean("Show Bullet", true),
       customBulletColor: color("Bullet Color", ""),
-      bulletColorType: optionalSelect("Bullet Color Type", bulletColorTypeTemplates),
+      bulletColorType: optionalSelect("Bullet Color Type", bulletColorTypeTemplates)
     };
 
     return <TwoColFourStoryHighlight collection={collection} config={contextConfig} />;
diff --git a/app/isomorphic/arrow/components/Rows/TwoColFourStoryHighlight/two-col-four-story-highlight.m.css b/app/isomorphic/arrow/components/Rows/TwoColFourStoryHighlight/two-col-four-story-highlight.m.css
index 04ed2389d..8e151ff3d 100644
--- a/app/isomorphic/arrow/components/Rows/TwoColFourStoryHighlight/two-col-four-story-highlight.m.css
+++ b/app/isomorphic/arrow/components/Rows/TwoColFourStoryHighlight/two-col-four-story-highlight.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 @value desktop from viewports;
 
diff --git a/app/isomorphic/arrow/components/Rows/TwoColSevenStories/index.js b/app/isomorphic/arrow/components/Rows/TwoColSevenStories/index.js
index 9e82be3b5..f2781fa63 100644
--- a/app/isomorphic/arrow/components/Rows/TwoColSevenStories/index.js
+++ b/app/isomorphic/arrow/components/Rows/TwoColSevenStories/index.js
@@ -16,7 +16,7 @@ import { LoadmoreButton } from "../../Atoms/Loadmore";
 
 import "./two-col-seven-stories.m.css";
 import { useDispatch, useSelector } from "react-redux";
-import get from "lodash/get";
+import get from "lodash.get";
 
 export const TwoColSevenStories = ({ collection, config = {} }) => {
   const items = collectionToStories(collection);
@@ -28,7 +28,7 @@ export const TwoColSevenStories = ({ collection, config = {} }) => {
     collectionNameTemplate = "",
     footerButton = "",
     slotConfig = [],
-    localizationConfig = {},
+    localizationConfig = {}
   } = config;
 
   if (items.length < 1) {
@@ -48,8 +48,7 @@ export const TwoColSevenStories = ({ collection, config = {} }) => {
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="two-col-seven-stories"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName="two-col-seven-story">
         <CollectionName
           collection={collection}
@@ -64,20 +63,9 @@ export const TwoColSevenStories = ({ collection, config = {} }) => {
               border={border}
               bgImgContentOverlap
               headerLevel="2"
-              aspectRatio={[
-                [16, 9],
-                [16, 9],
-              ]}
-              config={config}
-            >
-              <HeroImage
-                config={config}
-                story={items[0]}
-                aspectRatio={[
-                  [16, 9],
-                  [16, 9],
-                ]}
-              />
+              aspectRatio={[[16, 9], [16, 9]]}
+              config={config}>
+              <HeroImage config={config} story={items[0]} aspectRatio={[[16, 9], [16, 9]]} />
               <StorycardContent story={items[0]} headerLevel="3" config={config}>
                 <SectionTag story={items[0]} borderColor={sectionTagBorderColor} />
                 <Headline premiumStoryIconConfig={config} story={items[0]} headerLevel={2} />
@@ -92,14 +80,7 @@ export const TwoColSevenStories = ({ collection, config = {} }) => {
               return (
                 <div key={index}>
                   <StoryCard story={story} border={border} theme={theme} config={config}>
-                    <HeroImage
-                      config={config}
-                      story={story}
-                      aspectRatio={[
-                        [16, 9],
-                        [16, 9],
-                      ]}
-                    />
+                    <HeroImage config={config} story={story} aspectRatio={[[16, 9], [16, 9]]} />
                     <StorycardContent
                       theme={theme}
                       border={border}
@@ -120,14 +101,7 @@ export const TwoColSevenStories = ({ collection, config = {} }) => {
                 return (
                   <div key={index}>
                     <StoryCard story={story} border={border} theme={theme} config={config}>
-                      <HeroImage
-                        config={config}
-                        story={story}
-                        aspectRatio={[
-                          [16, 9],
-                          [16, 9],
-                        ]}
-                      />
+                      <HeroImage config={config} story={story} aspectRatio={[[16, 9], [16, 9]]} />
                       <StorycardContent
                         theme={theme}
                         border={border}
@@ -168,11 +142,11 @@ TwoColSevenStories.propTypes = {
     border: PropTypes.string,
     footerButton: PropTypes.string,
     collectionNameTemplate: PropTypes.string,
-    collectionNameBorderColor: PropTypes.string,
-  }),
+    collectionNameBorderColor: PropTypes.string
+  })
 };
 
 TwoColSevenStories.defaultProps = {
   theme: "#ffffff",
-  border: "",
+  border: ""
 };
diff --git a/app/isomorphic/arrow/components/Rows/TwoColSevenStories/stories.js b/app/isomorphic/arrow/components/Rows/TwoColSevenStories/stories.js
index 719258572..251837329 100644
--- a/app/isomorphic/arrow/components/Rows/TwoColSevenStories/stories.js
+++ b/app/isomorphic/arrow/components/Rows/TwoColSevenStories/stories.js
@@ -5,7 +5,7 @@ import {
   optionalSelect,
   sectionTagTemplates,
   collectionNameTemplates,
-  footerButton,
+  footerButton
 } from "../../../../storybook";
 import TwoColSevenStories from "./index";
 import Readme from "./README.md";
@@ -30,7 +30,7 @@ const configurableSlot = () => {
 
 const borderTemplate = {
   default: "",
-  border: "full",
+  border: "full"
 };
 
 withStore(
@@ -38,9 +38,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -60,7 +60,7 @@ withStore(
       buttonText: text("Footer text", "Read More"),
       showRowTitle: boolean("Row title", true),
       showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     };
 
     return <TwoColSevenStories collection={collection} config={contextConfig} />;
@@ -70,9 +70,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -93,7 +93,7 @@ withStore(
       showRowTitle: boolean("Row title", true),
       showButton: boolean("Show button", true),
       showReadTime: boolean("Read time", true),
-      slotConfig: [{ type: "ad", component: configurableSlot }],
+      slotConfig: [{ type: "ad", component: configurableSlot }]
     };
 
     return <TwoColSevenStories collection={collection} config={contextConfig} />;
diff --git a/app/isomorphic/arrow/components/Rows/TwoColSixStories/index.js b/app/isomorphic/arrow/components/Rows/TwoColSixStories/index.js
index 992f8bfd7..5716939be 100644
--- a/app/isomorphic/arrow/components/Rows/TwoColSixStories/index.js
+++ b/app/isomorphic/arrow/components/Rows/TwoColSixStories/index.js
@@ -26,7 +26,7 @@ const TwoColSixStories = ({ collection, config = {} }) => {
     collectionNameTemplate = "",
     border = "fullBorder",
     borderColor = "",
-    localizationConfig = {},
+    localizationConfig = {}
   } = config;
   const { type = "story", component } = get(slotConfig, [0], {});
   const textColor = getTextColor(theme);
@@ -35,16 +35,23 @@ const TwoColSixStories = ({ collection, config = {} }) => {
   const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
   const url = generateNavigateSlug(collection, qtConfig);
   const sectionTagBorderColor = rgbToHex(borderColor);
-
+  const languageDirection = get(qtConfig, ["language", "direction"], "ltr");
+  const customClassName = languageDirection === "rtl" ? "rtl-twoColSixStories" : "ltr-twoColSixStories";
   const [firstStory, ...otherStories] = stories || [];
 
   const storySlot = () =>
     otherStories.slice(3, 5).map((story, index) => {
       return (
-        <div styleName={`card ${borderStyle} ${textColor}`} key={index} className="card">
+        <div styleName={`card ${borderStyle} ${textColor}`} key={index} className={`card ${customClassName}`}>
           <StoryCard story={story} theme={theme} headerLevel="4" isHorizontalWithImageLast config={config}>
             <HeroImage config={config} story={story} isHorizontalWithImageLast aspectRatio={[[16, 9]]} />
-            <StorycardContent theme={theme} story={story} config={config} borderColor={sectionTagBorderColor} />
+            <StorycardContent
+              theme={theme}
+              story={story}
+              config={config}
+              borderColor={sectionTagBorderColor}
+              collectionId={collection.id}
+            />
           </StoryCard>
         </div>
       );
@@ -55,9 +62,8 @@ const TwoColSixStories = ({ collection, config = {} }) => {
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="two-col-six-stories"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
-      <div styleName="two-col-six-stories" style={{ backgroundColor: theme, color: textColor }}>
+      style={{ backgroundColor: theme || "initial" }}>
+      <div styleName="two-col-six-stories" style={{ backgroundColor: theme || "initial" }}>
         <CollectionName
           collection={collection}
           collectionNameTemplate={collectionNameTemplate}
@@ -72,12 +78,12 @@ const TwoColSixStories = ({ collection, config = {} }) => {
                 <SectionTag story={firstStory} borderColor={sectionTagBorderColor} />
                 <Headline premiumStoryIconConfig={config} story={firstStory} headerLevel={2} />
                 <Subheadline story={firstStory} />
-                <AuthorWithTime story={firstStory} config={localizationConfig} />
+                <AuthorWithTime story={firstStory} config={localizationConfig} collectionId={collection.id} />
               </StorycardContent>
             </StoryCard>
           </div>
           <div styleName="other-cards" className="other-cards">
-            <div className="first-set">
+            <div className={`first-set ${customClassName}`}>
               {otherStories.slice(0, 3).map((story, index) => {
                 return (
                   <div styleName={`card ${borderStyle} ${textColor}`} key={index} className="card">
@@ -89,6 +95,7 @@ const TwoColSixStories = ({ collection, config = {} }) => {
                         config={config}
                         headerLevel={6}
                         borderColor={sectionTagBorderColor}
+                        collectionId={collection.id}
                       />
                     </StoryCard>
                   </div>
@@ -112,7 +119,7 @@ const TwoColSixStories = ({ collection, config = {} }) => {
 
 TwoColSixStories.propTypes = {
   collection: PropTypes.object,
-  config: PropTypes.object,
+  config: PropTypes.object
 };
 
 export default StateProvider(TwoColSixStories);
diff --git a/app/isomorphic/arrow/components/Rows/TwoColSixStories/stories.js b/app/isomorphic/arrow/components/Rows/TwoColSixStories/stories.js
index 2c3eca391..43c6958b9 100644
--- a/app/isomorphic/arrow/components/Rows/TwoColSixStories/stories.js
+++ b/app/isomorphic/arrow/components/Rows/TwoColSixStories/stories.js
@@ -5,7 +5,7 @@ import {
   optionalSelect,
   sectionTagTemplates,
   collectionNameTemplates,
-  footerButton,
+  footerButton
 } from "../../../../storybook";
 import TwoColSixStories from "./index";
 import Readme from "./README.md";
@@ -30,7 +30,7 @@ const configurableSlot = () => {
 
 const border = {
   default: "fullBorder",
-  noBorder: "noBorder",
+  noBorder: "noBorder"
 };
 
 withStore(
@@ -38,9 +38,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -61,7 +61,7 @@ withStore(
       buttonText: text("Button text", "Read More"),
       showRowTitle: boolean("Row title", true),
       showReadTime: boolean("Read time", true),
-      border: optionalSelect("Border settings", border),
+      border: optionalSelect("Border settings", border)
     };
     return <TwoColSixStories collection={collection} config={contextConfig} />;
   });
diff --git a/app/isomorphic/arrow/components/Rows/TwoColSixStories/two-col-six-stories.m.css b/app/isomorphic/arrow/components/Rows/TwoColSixStories/two-col-six-stories.m.css
index 0340c472e..0cad974b2 100644
--- a/app/isomorphic/arrow/components/Rows/TwoColSixStories/two-col-six-stories.m.css
+++ b/app/isomorphic/arrow/components/Rows/TwoColSixStories/two-col-six-stories.m.css
@@ -1,16 +1,18 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 @value desktop from viewports;
 
 .two-col-six-stories {
   padding: 0 var(--arrow-spacing-s);
+
   @media (min-width: desktop) {
     padding: 0;
   }
 }
+
 .wrapper {
   margin: var(--arrow-spacing-xs) 0;
+
   @media (min-width: desktop) {
     display: grid;
     grid-template-columns: 2fr 1fr;
@@ -22,31 +24,27 @@
 .first-card {
   margin-bottom: var(--arrow-spacing-xs);
   padding-bottom: var(--arrow-spacing-xs);
+
   @media (min-width: desktop) {
     margin: 0;
-    padding-right: var(--arrow-spacing-l);
     padding-bottom: 0;
   }
 }
 
 .first-card.border.light {
   border-bottom: 1px solid var(--light-border);
+
   @media (min-width: mobile) {
     border-bottom: none;
   }
-  @media (min-width: desktop) {
-    border-right: 1px solid var(--light-border);
-  }
 }
 
 .first-card.border.dark {
   border-bottom: 1px solid var(--dark-border);
+
   @media (min-width: mobile) {
     border-bottom: none;
   }
-  @media (min-width: desktop) {
-    border-right: 1px solid var(--dark-border);
-  }
 }
 
 .other-cards {
@@ -55,17 +53,16 @@
     grid-template-columns: 1fr 1fr;
     grid-column-gap: var(--arrow-spacing-l);
   }
+
   @media (min-width: desktop) {
     grid-template-columns: 1fr;
   }
 }
 
 .card {
-  :global(.arr--hero-image) {
-    margin-top: var(--arrow-spacing-l);
-  }
   margin-bottom: var(--arrow-spacing-xs);
   padding-bottom: var(--arrow-spacing-xs);
+
   @media (min-width: desktop) {
     padding-bottom: var(--arrow-spacing-xs);
   }
@@ -88,7 +85,8 @@
     bottom: 10px;
     left: 10px;
     z-index: var(--z-index-1);
-    @media (--viewport-small) {
+
+    @media (max-width: mobile) {
       height: 24px;
       width: 24px;
     }
@@ -134,3 +132,43 @@
     opacity: 0;
   }
 }
+
+html[dir="rtl"] {
+  .first-card {
+    @media (min-width: desktop) {
+      padding-left: var(--arrow-spacing-l);
+    }
+  }
+
+  .first-card.border.dark {
+    @media (min-width: desktop) {
+      border-left: 1px solid var(--dark-border);
+    }
+  }
+
+  .first-card.border.light {
+    @media (min-width: desktop) {
+      border-left: 1px solid var(--light-border);
+    }
+  }
+}
+
+html[dir="ltr"] {
+  .first-card {
+    @media (min-width: desktop) {
+      padding-right: var(--arrow-spacing-l);
+    }
+  }
+
+  .first-card.border.dark {
+    @media (min-width: desktop) {
+      border-right: 1px solid var(--dark-border);
+    }
+  }
+
+  .first-card.border.light {
+    @media (min-width: desktop) {
+      border-right: 1px solid var(--light-border);
+    }
+  }
+}
diff --git a/app/isomorphic/arrow/components/Rows/TwoColTenStoriesSidebar/index.js b/app/isomorphic/arrow/components/Rows/TwoColTenStoriesSidebar/index.js
index 5fb76c4d0..3489e86e0 100644
--- a/app/isomorphic/arrow/components/Rows/TwoColTenStoriesSidebar/index.js
+++ b/app/isomorphic/arrow/components/Rows/TwoColTenStoriesSidebar/index.js
@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { collectionToStories } from "@quintype/components";
 import { StateProvider } from "../../SharedContext";
-import { generateNavigateSlug, getTextColor, navigateTo, getSlot } from "../../../utils/utils";
+import { generateNavigateSlug, navigateTo, getSlot } from "../../../utils/utils";
 import { HeroImage } from "../../Atoms/HeroImage";
 import { CollectionName } from "../../Atoms/CollectionName";
 import { StorycardContent } from "../../Molecules/StorycardContent";
@@ -29,9 +29,9 @@ export const TwoColTenStoriesSidebar = ({ collection, config = {} }) => {
     collectionNameBorderColor = "",
     theme = "",
     slotConfig = [],
-    collectionNameTemplate = "",
+    collectionNameTemplate = ""
   } = config;
-  const textColor = getTextColor(theme);
+
   const dispatch = useDispatch();
   const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
   const firstCardBorderStyle = border === "bottom" ? "first-card-border-box" : "";
@@ -44,9 +44,8 @@ export const TwoColTenStoriesSidebar = ({ collection, config = {} }) => {
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="two-col-ten-stories-sidebar"
-      style={{ backgroundColor: theme, color: textColor }}
-      styleName="component-wrapper"
-    >
+      style={{ backgroundColor: theme || "initial" }}
+      styleName="component-wrapper">
       <div styleName="collection-wrapper">
         <CollectionName
           collection={childCollections[0]}
@@ -61,19 +60,9 @@ export const TwoColTenStoriesSidebar = ({ collection, config = {} }) => {
               theme={theme}
               headerLevel="3"
               bgImgContentOverlap
-              aspectRatio={[
-                [16, 9],
-                [16, 9],
-              ]}
-              config={config}
-            >
-              <HeroImage
-                story={firstCollectionStories[0]}
-                aspectRatio={[
-                  [16, 9],
-                  [16, 9],
-                ]}
-              />
+              aspectRatio={[[16, 9], [16, 9]]}
+              config={config}>
+              <HeroImage story={firstCollectionStories[0]} aspectRatio={[[16, 9], [16, 9]]} />
               <StorycardContent
                 styleName={firstCardBorderStyle}
                 story={firstCollectionStories[0]}
@@ -82,6 +71,7 @@ export const TwoColTenStoriesSidebar = ({ collection, config = {} }) => {
                 isHorizontal
                 borderColor={borderColor}
                 config={config}
+                collectionId={`${collection.id}-${childCollections[0].id}`}
               />
             </StoryCard>
           </div>
@@ -94,26 +84,16 @@ export const TwoColTenStoriesSidebar = ({ collection, config = {} }) => {
                   headerLevel="4"
                   isHorizontal
                   border={border}
-                  aspectRatio={[
-                    [16, 9],
-                    [16, 9],
-                  ]}
-                  config={config}
-                >
-                  <HeroImage
-                    story={story}
-                    isHorizontal
-                    aspectRatio={[
-                      [16, 9],
-                      [16, 9],
-                    ]}
-                  />
+                  aspectRatio={[[16, 9], [16, 9]]}
+                  config={config}>
+                  <HeroImage story={story} isHorizontal aspectRatio={[[16, 9], [16, 9]]} />
                   <StorycardContent
                     theme={theme}
                     story={story}
                     isHorizontal
                     borderColor={borderColor}
                     config={config}
+                    collectionId={`${collection.id}-${childCollections[0].id}`}
                   />
                 </StoryCard>
               </div>
@@ -139,7 +119,12 @@ export const TwoColTenStoriesSidebar = ({ collection, config = {} }) => {
           <div>
             {sidebarCollectionStories.slice(0, 4).map((story) => (
               <div styleName="card" key={story.id}>
-                <StoryCardWithBulletPoint story={story} bulletValue={`${++storyCounter}`} config={config} />
+                <StoryCardWithBulletPoint
+                  story={story}
+                  bulletValue={`${++storyCounter}`}
+                  config={config}
+                  collectionId={`${collection.id}-${childCollections[1].id}`}
+                />
               </div>
             ))}
           </div>
@@ -149,6 +134,7 @@ export const TwoColTenStoriesSidebar = ({ collection, config = {} }) => {
                 story={sidebarCollectionStories[4]}
                 bulletValue={`${++storyCounter}`}
                 config={config}
+                collectionId={`${collection.id}-${childCollections[1].id}`}
               />
             </div>
             {adWidgetSlot ? (
@@ -156,7 +142,12 @@ export const TwoColTenStoriesSidebar = ({ collection, config = {} }) => {
             ) : (
               sidebarCollectionStories.slice(5, 8).map((story) => (
                 <div styleName="card" key={story.id}>
-                  <StoryCardWithBulletPoint story={story} bulletValue={`${++storyCounter}`} config={config} />
+                  <StoryCardWithBulletPoint
+                    story={story}
+                    bulletValue={`${++storyCounter}`}
+                    config={config}
+                    collectionId={`${collection.id}-${childCollections[1].id}`}
+                  />
                 </div>
               ))
             )}
@@ -185,6 +176,6 @@ TwoColTenStoriesSidebar.propTypes = {
     slotConfig: PropTypes.array,
     collectionNameBorderColor: PropTypes.string,
     borderColor: PropTypes.string,
-    localizationConfig: PropTypes.object,
-  }),
+    localizationConfig: PropTypes.object
+  })
 };
diff --git a/app/isomorphic/arrow/components/Rows/TwoColTenStoriesSidebar/stories.js b/app/isomorphic/arrow/components/Rows/TwoColTenStoriesSidebar/stories.js
index f74aa38df..ccf7791c8 100644
--- a/app/isomorphic/arrow/components/Rows/TwoColTenStoriesSidebar/stories.js
+++ b/app/isomorphic/arrow/components/Rows/TwoColTenStoriesSidebar/stories.js
@@ -17,9 +17,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -38,7 +38,7 @@ withStore(
       showRowTitle: boolean("Row title", true),
       showButton: boolean("Show button", true),
       showReadTime: boolean("Read time", true),
-      slotConfig: [{ type: "ad", component: configurableSlot }],
+      slotConfig: [{ type: "ad", component: configurableSlot }]
     };
 
     return <TwoColTenStoriesHighlight collection={collection} config={contextConfig} />;
diff --git a/app/isomorphic/arrow/components/Rows/TwoColTenStoriesSidebar/two-col-ten-stories-sidebar.m.css b/app/isomorphic/arrow/components/Rows/TwoColTenStoriesSidebar/two-col-ten-stories-sidebar.m.css
index eb284ec30..86f25eabd 100644
--- a/app/isomorphic/arrow/components/Rows/TwoColTenStoriesSidebar/two-col-ten-stories-sidebar.m.css
+++ b/app/isomorphic/arrow/components/Rows/TwoColTenStoriesSidebar/two-col-ten-stories-sidebar.m.css
@@ -1,5 +1,4 @@
-/* eslint-disable scss/at-rule-no-unknown */
-@value viewports: "../../../../../assets/arrow/stylesheets/viewports.m.css";
+@value viewports: "../../../../assets/stylesheets/viewports.m.css";
 @value mobile from viewports;
 @value desktop from viewports;
 
diff --git a/app/isomorphic/arrow/components/Rows/TwoColThreeStory/index.js b/app/isomorphic/arrow/components/Rows/TwoColThreeStory/index.js
index 605b22243..f7f5a64b4 100644
--- a/app/isomorphic/arrow/components/Rows/TwoColThreeStory/index.js
+++ b/app/isomorphic/arrow/components/Rows/TwoColThreeStory/index.js
@@ -7,12 +7,12 @@ import { HeroImage } from "../../Atoms/HeroImage";
 import { StorycardContent } from "../../Molecules/StorycardContent";
 import { StoryCard } from "../../Molecules/StoryCard";
 import { StateProvider } from "../../SharedContext";
-import { generateNavigateSlug, getTextColor, navigateTo } from "../../../utils/utils";
+import { generateNavigateSlug, navigateTo } from "../../../utils/utils";
 import { LoadmoreButton } from "../../Atoms/Loadmore";
 
 import "./two-col-three-story.m.css";
 import { useDispatch, useSelector } from "react-redux";
-import get from "lodash/get";
+import get from "lodash.get";
 
 export const TwoColThreeStories = ({ collection, config = {} }) => {
   const items = collectionToStories(collection);
@@ -23,7 +23,7 @@ export const TwoColThreeStories = ({ collection, config = {} }) => {
     theme = "",
     collectionNameTemplate = "",
     footerSlotConfig = {},
-    footerButton = "",
+    footerButton = ""
   } = config;
   const { footerSlot } = footerSlotConfig;
 
@@ -35,14 +35,12 @@ export const TwoColThreeStories = ({ collection, config = {} }) => {
   const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
   const url = generateNavigateSlug(collection, qtConfig);
 
-  const textColor = getTextColor(theme);
   const footerSlotComp = footerSlot ? footerSlot() : null;
   return (
     <div
       className="full-width-with-padding arrow-component"
       data-test-id="two-col-three-stories"
-      style={{ backgroundColor: theme, color: textColor }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName="two-col-three-story">
         <CollectionName
           collection={collection}
@@ -57,19 +55,9 @@ export const TwoColThreeStories = ({ collection, config = {} }) => {
               border={border}
               bgImgContentOverlap
               headerLevel="2"
-              aspectRatio={[
-                [16, 9],
-                [16, 9],
-              ]}
-              config={config}
-            >
-              <HeroImage
-                story={items[0]}
-                aspectRatio={[
-                  [16, 9],
-                  [16, 9],
-                ]}
-              />
+              aspectRatio={[[16, 9], [16, 9]]}
+              config={config}>
+              <HeroImage story={items[0]} aspectRatio={[[16, 9], [16, 9]]} />
               <StorycardContent
                 story={items[0]}
                 headerLevel="2"
@@ -77,6 +65,7 @@ export const TwoColThreeStories = ({ collection, config = {} }) => {
                 theme={theme}
                 borderColor={borderColor}
                 config={config}
+                collectionId={collection.id}
               />
             </StoryCard>
           </div>
@@ -87,7 +76,7 @@ export const TwoColThreeStories = ({ collection, config = {} }) => {
                 return (
                   <div key={index}>
                     <StoryCard story={story} border={border} theme={theme} isHorizontalMobile config={config}>
-                      <HeroImage story={story} isHorizontalMobile />
+                      <HeroImage story={story} isHorizontalMobile aspectRatio={[[16, 9], [16, 9]]} />
                       <StorycardContent
                         theme={theme}
                         border={border}
@@ -95,6 +84,7 @@ export const TwoColThreeStories = ({ collection, config = {} }) => {
                         isHorizontalMobile
                         borderColor={borderColor}
                         config={config}
+                        collectionId={collection.id}
                       />
                     </StoryCard>
                   </div>
@@ -103,7 +93,7 @@ export const TwoColThreeStories = ({ collection, config = {} }) => {
                 return (
                   <div styleName="storycard" key={index}>
                     <StoryCard story={story} border={border} theme={theme} isHorizontalMobile config={config}>
-                      <HeroImage story={story} isHorizontalMobile />
+                      <HeroImage story={story} isHorizontalMobile aspectRatio={[[16, 9], [16, 9]]} />
                       <StorycardContent
                         theme={theme}
                         border={border}
@@ -111,6 +101,7 @@ export const TwoColThreeStories = ({ collection, config = {} }) => {
                         isHorizontalMobile
                         borderColor={borderColor}
                         config={config}
+                        collectionId={collection.id}
                       />
                     </StoryCard>
                   </div>
@@ -143,6 +134,6 @@ TwoColThreeStories.propTypes = {
     border: PropTypes.string,
     footerButton: PropTypes.string,
     collectionNameTemplate: PropTypes.string,
-    collectionNameBorderColor: PropTypes.string,
-  }),
+    collectionNameBorderColor: PropTypes.string
+  })
 };
diff --git a/app/isomorphic/arrow/components/Rows/TwoColThreeStory/stories.js b/app/isomorphic/arrow/components/Rows/TwoColThreeStory/stories.js
index 310175340..56cb39bf0 100644
--- a/app/isomorphic/arrow/components/Rows/TwoColThreeStory/stories.js
+++ b/app/isomorphic/arrow/components/Rows/TwoColThreeStory/stories.js
@@ -5,7 +5,7 @@ import {
   optionalSelect,
   sectionTagTemplates,
   collectionNameTemplates,
-  footerButton,
+  footerButton
 } from "../../../../storybook";
 import TwoColThreeStories from "./index";
 import Readme from "./README.md";
@@ -26,7 +26,7 @@ const sectionTagDefaultvalue = "#3a9fdd";
 
 const borderTemplate = {
   default: "",
-  border: "full",
+  border: "full"
 };
 
 const footerSlot = () => {
@@ -38,9 +38,9 @@ withStore(
   {
     qt: {
       config: {
-        "cdn-image": "thumbor-stg.assettype.com",
-      },
-    },
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
   },
   Readme
 )
@@ -61,7 +61,7 @@ withStore(
       showRowTitle: boolean("Row title", true),
       footerSlotConfig: { footerSlot: footerSlot },
       showButton: boolean("Show button", true),
-      showReadTime: boolean("Read time", true),
+      showReadTime: boolean("Read time", true)
     };
 
     return <TwoColThreeStories collection={collection} config={contextConfig} />;
diff --git a/app/isomorphic/arrow/components/SharedContext.js b/app/isomorphic/arrow/components/SharedContext.js
index 89821aba6..510180238 100644
--- a/app/isomorphic/arrow/components/SharedContext.js
+++ b/app/isomorphic/arrow/components/SharedContext.js
@@ -3,12 +3,11 @@ import React, { createContext, useContext } from "react";
 export const StateContext = createContext();
 
 // eslint-disable-next-line react/display-name
-export const StateProvider = (RowComponent) => (props) =>
-  (
-    // eslint-disable-next-line react/prop-types
-    <StateContext.Provider value={props.config}>
-      <RowComponent {...props} />
-    </StateContext.Provider>
-  );
+export const StateProvider = RowComponent => props => (
+  // eslint-disable-next-line react/prop-types
+  <StateContext.Provider value={props.config}>
+    <RowComponent {...props} />
+  </StateContext.Provider>
+);
 
 export const useStateValue = () => useContext(StateContext);
diff --git a/app/isomorphic/arrow/components/Svgs/Loading/loading.js b/app/isomorphic/arrow/components/Svgs/Loading/loading.js
index 1fb520e4e..36a426c66 100644
--- a/app/isomorphic/arrow/components/Svgs/Loading/loading.js
+++ b/app/isomorphic/arrow/components/Svgs/Loading/loading.js
@@ -10,8 +10,7 @@ export const Loading = ({ width = 40, height = 30, iconColor = "#99B0CB" }) => {
         height="40"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 100 100"
-        preserveAspectRatio="xMidYMid"
-      >
+        preserveAspectRatio="xMidYMid">
         <circle cx="84" cy="50" r="0" fill="currentColor">
           <animate
             attributeName="r"
@@ -130,5 +129,5 @@ export const Loading = ({ width = 40, height = 30, iconColor = "#99B0CB" }) => {
 Loading.propTypes = {
   width: PropTypes.object,
   height: PropTypes.object,
-  iconColor: PropTypes.object,
+  iconColor: PropTypes.object
 };
diff --git a/app/isomorphic/arrow/components/Svgs/Loading/loading.m.css b/app/isomorphic/arrow/components/Svgs/Loading/loading.m.css
index 7b2c0f8da..8dbf39cd3 100644
--- a/app/isomorphic/arrow/components/Svgs/Loading/loading.m.css
+++ b/app/isomorphic/arrow/components/Svgs/Loading/loading.m.css
@@ -2,4 +2,5 @@
   position: absolute;
   top: 50%;
   left: calc(50% - 20px);
+  color: var(--arrow-c-brand1);
 }
diff --git a/app/isomorphic/arrow/components/Svgs/SocialIcons/facebook.js b/app/isomorphic/arrow/components/Svgs/SocialIcons/facebook.js
index 05cdedb76..a3d762355 100644
--- a/app/isomorphic/arrow/components/Svgs/SocialIcons/facebook.js
+++ b/app/isomorphic/arrow/components/Svgs/SocialIcons/facebook.js
@@ -6,11 +6,10 @@ export const Facebook = ({ color = "#3B5998" }) => {
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
       <path
         fill={color}
-        d="M9.906 20v-7.156H7.5V10h2.406V7.75c0-1.187.334-2.11 1-2.766.667-.656 1.552-.984 2.656-.984.896 0 1.625.042 2.188.125v2.531h-1.5c-.563 0-.948.125-1.156.375-.167.209-.25.542-.25 1V10H15.5l-.375 2.844h-2.281V20H9.906z"
-      ></path>
+        d="M9.906 20v-7.156H7.5V10h2.406V7.75c0-1.187.334-2.11 1-2.766.667-.656 1.552-.984 2.656-.984.896 0 1.625.042 2.188.125v2.531h-1.5c-.563 0-.948.125-1.156.375-.167.209-.25.542-.25 1V10H15.5l-.375 2.844h-2.281V20H9.906z"></path>
     </svg>
   );
 };
 Facebook.propTypes = {
-  color: PropTypes.string,
+  color: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Svgs/SocialIcons/instagram.js b/app/isomorphic/arrow/components/Svgs/SocialIcons/instagram.js
index 16163c849..2451aae48 100644
--- a/app/isomorphic/arrow/components/Svgs/SocialIcons/instagram.js
+++ b/app/isomorphic/arrow/components/Svgs/SocialIcons/instagram.js
@@ -7,8 +7,7 @@ export const Instagram = () => {
       xmlnsXlink="http://www.w3.org/1999/xlink"
       width="24"
       height="24"
-      viewBox="0 0 24 24"
-    >
+      viewBox="0 0 24 24">
       <defs>
         <linearGradient id="prefix__b" x1="0%" x2="110.694%" y1="0%" y2="109.202%">
           <stop offset="0%" stopColor="#724AC6"></stop>
@@ -17,8 +16,7 @@ export const Instagram = () => {
         </linearGradient>
         <path
           id="prefix__a"
-          d="M9 4.636c.784 0 1.512.196 2.182.588.67.392 1.202.924 1.594 1.594.392.67.588 1.398.588 2.182s-.196 1.512-.588 2.182a4.382 4.382 0 01-1.594 1.594c-.67.392-1.398.588-2.182.588s-1.512-.196-2.182-.588a4.382 4.382 0 01-1.594-1.594c-.392-.67-.588-1.398-.588-2.182s.196-1.512.588-2.182a4.382 4.382 0 011.594-1.594A4.247 4.247 0 019 4.636zm0 7.21c.784 0 1.455-.278 2.011-.835.557-.556.835-1.227.835-2.011s-.278-1.455-.835-2.011c-.556-.557-1.227-.835-2.011-.835s-1.455.278-2.011.835c-.557.556-.835 1.227-.835 2.011s.278 1.455.835 2.011A2.739 2.739 0 009 11.846zm5.578-7.4a1.181 1.181 0 01-.322.721.923.923 0 01-.702.304.981.981 0 01-.721-.304.98.98 0 01-.304-.72c0-.279.101-.52.304-.722a.984.984 0 01.72-.303c.279 0 .52.101.722.303a.987.987 0 01.303.721zm2.884 1.025c.025.708.038 1.885.038 3.529s-.019 2.827-.057 3.548c-.038.721-.145 1.347-.322 1.878a4.425 4.425 0 01-1.044 1.651 4.429 4.429 0 01-1.65 1.044c-.532.177-1.158.284-1.879.322-.721.038-1.904.057-3.548.057-1.644 0-2.827-.019-3.548-.057-.721-.038-1.347-.158-1.878-.36a4.05 4.05 0 01-1.651-1.006 4.429 4.429 0 01-1.044-1.65c-.177-.532-.284-1.158-.322-1.879C.519 11.827.5 10.644.5 9c0-1.644.019-2.827.057-3.548.038-.721.145-1.347.322-1.878a4.425 4.425 0 011.044-1.651A4.429 4.429 0 013.573.879C4.106.702 4.732.595 5.453.557 6.173.519 7.356.5 9 .5c1.644 0 2.827.019 3.548.057.721.038 1.347.145 1.878.322a4.425 4.425 0 011.651 1.044 4.429 4.429 0 011.044 1.65c.177.532.29 1.164.341 1.898zm-1.821 8.538c.151-.43.253-1.113.303-2.05.025-.556.038-1.34.038-2.352V8.393a54.22 54.22 0 00-.038-2.353c-.05-.961-.152-1.644-.303-2.049a2.743 2.743 0 00-1.632-1.632c-.405-.151-1.088-.253-2.05-.303a55.796 55.796 0 00-2.352-.038H8.393c-1.012 0-1.796.013-2.353.038-.936.05-1.619.152-2.049.303a2.743 2.743 0 00-1.632 1.632c-.151.405-.253 1.088-.303 2.05-.025.556-.038 1.34-.038 2.352v1.214c0 1.012.013 1.796.038 2.353.05.936.152 1.619.303 2.049.33.784.873 1.328 1.632 1.632.43.151 1.113.253 2.05.303.556.025 1.34.038 2.352.038h1.214a54.22 54.22 0 002.353-.038c.961-.05 1.644-.152 2.049-.303.784-.33 1.328-.873 1.632-1.632z"
-        ></path>
+          d="M9 4.636c.784 0 1.512.196 2.182.588.67.392 1.202.924 1.594 1.594.392.67.588 1.398.588 2.182s-.196 1.512-.588 2.182a4.382 4.382 0 01-1.594 1.594c-.67.392-1.398.588-2.182.588s-1.512-.196-2.182-.588a4.382 4.382 0 01-1.594-1.594c-.392-.67-.588-1.398-.588-2.182s.196-1.512.588-2.182a4.382 4.382 0 011.594-1.594A4.247 4.247 0 019 4.636zm0 7.21c.784 0 1.455-.278 2.011-.835.557-.556.835-1.227.835-2.011s-.278-1.455-.835-2.011c-.556-.557-1.227-.835-2.011-.835s-1.455.278-2.011.835c-.557.556-.835 1.227-.835 2.011s.278 1.455.835 2.011A2.739 2.739 0 009 11.846zm5.578-7.4a1.181 1.181 0 01-.322.721.923.923 0 01-.702.304.981.981 0 01-.721-.304.98.98 0 01-.304-.72c0-.279.101-.52.304-.722a.984.984 0 01.72-.303c.279 0 .52.101.722.303a.987.987 0 01.303.721zm2.884 1.025c.025.708.038 1.885.038 3.529s-.019 2.827-.057 3.548c-.038.721-.145 1.347-.322 1.878a4.425 4.425 0 01-1.044 1.651 4.429 4.429 0 01-1.65 1.044c-.532.177-1.158.284-1.879.322-.721.038-1.904.057-3.548.057-1.644 0-2.827-.019-3.548-.057-.721-.038-1.347-.158-1.878-.36a4.05 4.05 0 01-1.651-1.006 4.429 4.429 0 01-1.044-1.65c-.177-.532-.284-1.158-.322-1.879C.519 11.827.5 10.644.5 9c0-1.644.019-2.827.057-3.548.038-.721.145-1.347.322-1.878a4.425 4.425 0 011.044-1.651A4.429 4.429 0 013.573.879C4.106.702 4.732.595 5.453.557 6.173.519 7.356.5 9 .5c1.644 0 2.827.019 3.548.057.721.038 1.347.145 1.878.322a4.425 4.425 0 011.651 1.044 4.429 4.429 0 011.044 1.65c.177.532.29 1.164.341 1.898zm-1.821 8.538c.151-.43.253-1.113.303-2.05.025-.556.038-1.34.038-2.352V8.393a54.22 54.22 0 00-.038-2.353c-.05-.961-.152-1.644-.303-2.049a2.743 2.743 0 00-1.632-1.632c-.405-.151-1.088-.253-2.05-.303a55.796 55.796 0 00-2.352-.038H8.393c-1.012 0-1.796.013-2.353.038-.936.05-1.619.152-2.049.303a2.743 2.743 0 00-1.632 1.632c-.151.405-.253 1.088-.303 2.05-.025.556-.038 1.34-.038 2.352v1.214c0 1.012.013 1.796.038 2.353.05.936.152 1.619.303 2.049.33.784.873 1.328 1.632 1.632.43.151 1.113.253 2.05.303.556.025 1.34.038 2.352.038h1.214a54.22 54.22 0 002.353-.038c.961-.05 1.644-.152 2.049-.303.784-.33 1.328-.873 1.632-1.632z"></path>
       </defs>
       <use fill="url(#prefix__b)" fillRule="nonzero" transform="translate(3 3)" xlinkHref="#prefix__a"></use>
     </svg>
diff --git a/app/isomorphic/arrow/components/Svgs/SocialIcons/linkedin.js b/app/isomorphic/arrow/components/Svgs/SocialIcons/linkedin.js
index 0c2b09506..c5d67eaf7 100644
--- a/app/isomorphic/arrow/components/Svgs/SocialIcons/linkedin.js
+++ b/app/isomorphic/arrow/components/Svgs/SocialIcons/linkedin.js
@@ -6,11 +6,10 @@ export const LinkedIn = ({ color = "#0077B5" }) => {
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
       <path
         fill={color}
-        d="M6.71 19H3.26V7.904h3.45V19zM5.005 6.383a1.926 1.926 0 01-1.41-.594A1.923 1.923 0 013 4.38c0-.544.198-1.014.594-1.41a1.926 1.926 0 011.41-.594c.544 0 1.014.198 1.41.594.396.396.594.866.594 1.41 0 .544-.198 1.014-.594 1.41a1.926 1.926 0 01-1.41.594zM19.625 19h-3.451v-5.418c0-.89-.074-1.534-.223-1.93-.272-.668-.804-1.002-1.596-1.002-.791 0-1.348.297-1.67.891-.247.445-.37 1.1-.37 1.967V19H8.9V7.904h3.303v1.522h.037c.248-.495.643-.903 1.188-1.225.593-.396 1.286-.594 2.078-.594 1.608 0 2.734.508 3.377 1.522.495.816.742 2.078.742 3.785V19z"
-      ></path>
+        d="M6.71 19H3.26V7.904h3.45V19zM5.005 6.383a1.926 1.926 0 01-1.41-.594A1.923 1.923 0 013 4.38c0-.544.198-1.014.594-1.41a1.926 1.926 0 011.41-.594c.544 0 1.014.198 1.41.594.396.396.594.866.594 1.41 0 .544-.198 1.014-.594 1.41a1.926 1.926 0 01-1.41.594zM19.625 19h-3.451v-5.418c0-.89-.074-1.534-.223-1.93-.272-.668-.804-1.002-1.596-1.002-.791 0-1.348.297-1.67.891-.247.445-.37 1.1-.37 1.967V19H8.9V7.904h3.303v1.522h.037c.248-.495.643-.903 1.188-1.225.593-.396 1.286-.594 2.078-.594 1.608 0 2.734.508 3.377 1.522.495.816.742 2.078.742 3.785V19z"></path>
     </svg>
   );
 };
 LinkedIn.propTypes = {
-  color: PropTypes.string,
+  color: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Svgs/SocialIcons/twitter.js b/app/isomorphic/arrow/components/Svgs/SocialIcons/twitter.js
index ffd784a64..4081365d8 100644
--- a/app/isomorphic/arrow/components/Svgs/SocialIcons/twitter.js
+++ b/app/isomorphic/arrow/components/Svgs/SocialIcons/twitter.js
@@ -6,11 +6,10 @@ export const Twitter = ({ color = "#1CB7EB" }) => {
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
       <path
         fill={color}
-        d="M19.137 8.594c.023.094.035.246.035.457 0 1.687-.41 3.316-1.23 4.887-.844 1.664-2.028 2.988-3.551 3.972-1.664 1.102-3.575 1.652-5.73 1.652-2.063 0-3.95-.55-5.661-1.652.258.024.55.035.879.035 1.71 0 3.246-.527 4.605-1.582-.82 0-1.54-.24-2.162-.72a3.673 3.673 0 01-1.283-1.811c.234.023.457.035.668.035.328 0 .656-.035.984-.105a3.724 3.724 0 01-2.109-1.301 3.542 3.542 0 01-.844-2.32v-.07a3.493 3.493 0 001.653.492 4.097 4.097 0 01-1.196-1.336 3.557 3.557 0 01-.457-1.776c0-.644.176-1.26.528-1.845a10.188 10.188 0 003.357 2.742 10.222 10.222 0 004.236 1.125 5.122 5.122 0 01-.07-.844c0-.656.164-1.272.492-1.846a3.615 3.615 0 011.336-1.353 3.568 3.568 0 011.828-.492c.54 0 1.037.105 1.494.316.457.21.862.492 1.213.844a7.479 7.479 0 002.356-.88c-.281.868-.82 1.548-1.617 2.04A7.926 7.926 0 0021 6.66a8.132 8.132 0 01-1.863 1.934z"
-      ></path>
+        d="M19.137 8.594c.023.094.035.246.035.457 0 1.687-.41 3.316-1.23 4.887-.844 1.664-2.028 2.988-3.551 3.972-1.664 1.102-3.575 1.652-5.73 1.652-2.063 0-3.95-.55-5.661-1.652.258.024.55.035.879.035 1.71 0 3.246-.527 4.605-1.582-.82 0-1.54-.24-2.162-.72a3.673 3.673 0 01-1.283-1.811c.234.023.457.035.668.035.328 0 .656-.035.984-.105a3.724 3.724 0 01-2.109-1.301 3.542 3.542 0 01-.844-2.32v-.07a3.493 3.493 0 001.653.492 4.097 4.097 0 01-1.196-1.336 3.557 3.557 0 01-.457-1.776c0-.644.176-1.26.528-1.845a10.188 10.188 0 003.357 2.742 10.222 10.222 0 004.236 1.125 5.122 5.122 0 01-.07-.844c0-.656.164-1.272.492-1.846a3.615 3.615 0 011.336-1.353 3.568 3.568 0 011.828-.492c.54 0 1.037.105 1.494.316.457.21.862.492 1.213.844a7.479 7.479 0 002.356-.88c-.281.868-.82 1.548-1.617 2.04A7.926 7.926 0 0021 6.66a8.132 8.132 0 01-1.863 1.934z"></path>
     </svg>
   );
 };
 Twitter.propTypes = {
-  color: PropTypes.string,
+  color: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Svgs/SocialIcons/whatsapp.js b/app/isomorphic/arrow/components/Svgs/SocialIcons/whatsapp.js
index f9f1369bc..30f3a79cf 100644
--- a/app/isomorphic/arrow/components/Svgs/SocialIcons/whatsapp.js
+++ b/app/isomorphic/arrow/components/Svgs/SocialIcons/whatsapp.js
@@ -7,12 +7,11 @@ export const WhatsApp = ({ color = "#4AC959" }) => {
       <path
         fill={color}
         fillRule="evenodd"
-        d="M18.404 5.505a9.457 9.457 0 012.02 2.96 8.587 8.587 0 01.715 3.449 8.665 8.665 0 01-1.245 4.53 9.282 9.282 0 01-3.347 3.307 8.894 8.894 0 01-4.552 1.225 8.835 8.835 0 01-4.327-1.102l-4.817 1.265 1.307-4.694a8.775 8.775 0 01-1.225-4.531 8.77 8.77 0 011.225-4.531 9.17 9.17 0 013.306-3.307 8.781 8.781 0 014.531-1.224c1.198 0 2.347.23 3.45.693a9.515 9.515 0 012.959 1.96zm-6.409 13.96c1.36 0 2.626-.34 3.797-1.02a7.75 7.75 0 002.796-2.756 7.202 7.202 0 001.04-3.775c0-.98-.203-1.933-.612-2.858a8.088 8.088 0 00-1.694-2.47 7.565 7.565 0 00-2.449-1.653 7.405 7.405 0 00-2.878-.571c-1.36 0-2.62.34-3.776 1.02a7.646 7.646 0 00-2.755 2.756 7.316 7.316 0 00-1.02 3.776c0 1.442.394 2.775 1.183 4l.164.286-.776 2.775 2.857-.734.286.163a7.275 7.275 0 003.837 1.061zm4.123-5.674l.123.082c.19.082.299.15.326.204.027.054.034.19.02.408a2.11 2.11 0 01-.163.674c-.095.231-.313.462-.653.694-.34.231-.633.36-.878.388-.38.054-.748.054-1.102 0-.408-.082-.952-.273-1.632-.572-1.388-.599-2.654-1.714-3.797-3.347l-.081-.082c-.6-.843-.898-1.62-.898-2.327 0-.707.244-1.32.734-1.837l.041-.04c.19-.19.395-.286.612-.286h.49c.11 0 .198.02.266.061.068.041.129.143.183.306l.694 1.674c.082.163.095.3.041.408a2.832 2.832 0 01-.53.735.917.917 0 00-.205.265c-.027.068 0 .143.082.225.38.707.83 1.265 1.347 1.673.381.3.952.64 1.714 1.02.218.11.381.096.49-.04.354-.408.599-.707.735-.898.054-.109.123-.163.204-.163.082 0 .177.013.286.04.218.082.735.327 1.551.735z"
-      ></path>
+        d="M18.404 5.505a9.457 9.457 0 012.02 2.96 8.587 8.587 0 01.715 3.449 8.665 8.665 0 01-1.245 4.53 9.282 9.282 0 01-3.347 3.307 8.894 8.894 0 01-4.552 1.225 8.835 8.835 0 01-4.327-1.102l-4.817 1.265 1.307-4.694a8.775 8.775 0 01-1.225-4.531 8.77 8.77 0 011.225-4.531 9.17 9.17 0 013.306-3.307 8.781 8.781 0 014.531-1.224c1.198 0 2.347.23 3.45.693a9.515 9.515 0 012.959 1.96zm-6.409 13.96c1.36 0 2.626-.34 3.797-1.02a7.75 7.75 0 002.796-2.756 7.202 7.202 0 001.04-3.775c0-.98-.203-1.933-.612-2.858a8.088 8.088 0 00-1.694-2.47 7.565 7.565 0 00-2.449-1.653 7.405 7.405 0 00-2.878-.571c-1.36 0-2.62.34-3.776 1.02a7.646 7.646 0 00-2.755 2.756 7.316 7.316 0 00-1.02 3.776c0 1.442.394 2.775 1.183 4l.164.286-.776 2.775 2.857-.734.286.163a7.275 7.275 0 003.837 1.061zm4.123-5.674l.123.082c.19.082.299.15.326.204.027.054.034.19.02.408a2.11 2.11 0 01-.163.674c-.095.231-.313.462-.653.694-.34.231-.633.36-.878.388-.38.054-.748.054-1.102 0-.408-.082-.952-.273-1.632-.572-1.388-.599-2.654-1.714-3.797-3.347l-.081-.082c-.6-.843-.898-1.62-.898-2.327 0-.707.244-1.32.734-1.837l.041-.04c.19-.19.395-.286.612-.286h.49c.11 0 .198.02.266.061.068.041.129.143.183.306l.694 1.674c.082.163.095.3.041.408a2.832 2.832 0 01-.53.735.917.917 0 00-.205.265c-.027.068 0 .143.082.225.38.707.83 1.265 1.347 1.673.381.3.952.64 1.714 1.02.218.11.381.096.49-.04.354-.408.599-.707.735-.898.054-.109.123-.163.204-.163.082 0 .177.013.286.04.218.082.735.327 1.551.735z"></path>
     </svg>
   );
 };
 
 WhatsApp.propTypes = {
-  color: PropTypes.string,
+  color: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Svgs/SocialIcons/youtube.js b/app/isomorphic/arrow/components/Svgs/SocialIcons/youtube.js
index 3b812e160..bb15b98bb 100644
--- a/app/isomorphic/arrow/components/Svgs/SocialIcons/youtube.js
+++ b/app/isomorphic/arrow/components/Svgs/SocialIcons/youtube.js
@@ -13,5 +13,5 @@ export const Youtube = ({ color = "#F61C0D" }) => {
   );
 };
 Youtube.propTypes = {
-  color: PropTypes.string,
+  color: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Svgs/clock-icon.js b/app/isomorphic/arrow/components/Svgs/clock-icon.js
index db257b544..da5a81579 100644
--- a/app/isomorphic/arrow/components/Svgs/clock-icon.js
+++ b/app/isomorphic/arrow/components/Svgs/clock-icon.js
@@ -7,12 +7,11 @@ export const ClockIcon = ({ color = "#333" }) => {
       <path
         fill={color}
         fillRule="evenodd"
-        d="M12 19.75a7.513 7.513 0 003.875-1.047 7.832 7.832 0 002.828-2.828A7.513 7.513 0 0019.75 12a7.513 7.513 0 00-1.047-3.875c-.698-1.187-1.64-2.13-2.828-2.828S13.395 4.25 12 4.25a7.51 7.51 0 00-3.875 1.047c-1.188.698-2.13 1.64-2.828 2.828S4.25 10.605 4.25 12a7.51 7.51 0 001.047 3.875 7.824 7.824 0 002.828 2.828A7.513 7.513 0 0012 19.75zm.016-1a6.64 6.64 0 01-3.391-.906 6.716 6.716 0 01-2.469-2.453 6.563 6.563 0 01-.906-3.375c0-1.22.302-2.35.906-3.391A6.711 6.711 0 018.61 6.156a6.563 6.563 0 013.375-.906c1.22 0 2.35.302 3.391.906a6.716 6.716 0 012.469 2.453A6.592 6.592 0 0118.751 12a6.616 6.616 0 01-.906 3.375 6.716 6.716 0 01-2.453 2.469 6.563 6.563 0 01-3.375.906zm2.283-3.92l.076-.002a.343.343 0 00.25-.14l.25-.375a.365.365 0 00.078-.266.328.328 0 00-.14-.234l-2.22-1.625V7.625a.362.362 0 00-.109-.266.36.36 0 00-.265-.109h-.438a.357.357 0 00-.265.11.358.358 0 00-.11.265v5c0 .125.052.219.156.281l2.532 1.844a.383.383 0 00.281.078l-.076.001z"
-      ></path>
+        d="M12 19.75a7.513 7.513 0 003.875-1.047 7.832 7.832 0 002.828-2.828A7.513 7.513 0 0019.75 12a7.513 7.513 0 00-1.047-3.875c-.698-1.187-1.64-2.13-2.828-2.828S13.395 4.25 12 4.25a7.51 7.51 0 00-3.875 1.047c-1.188.698-2.13 1.64-2.828 2.828S4.25 10.605 4.25 12a7.51 7.51 0 001.047 3.875 7.824 7.824 0 002.828 2.828A7.513 7.513 0 0012 19.75zm.016-1a6.64 6.64 0 01-3.391-.906 6.716 6.716 0 01-2.469-2.453 6.563 6.563 0 01-.906-3.375c0-1.22.302-2.35.906-3.391A6.711 6.711 0 018.61 6.156a6.563 6.563 0 013.375-.906c1.22 0 2.35.302 3.391.906a6.716 6.716 0 012.469 2.453A6.592 6.592 0 0118.751 12a6.616 6.616 0 01-.906 3.375 6.716 6.716 0 01-2.453 2.469 6.563 6.563 0 01-3.375.906zm2.283-3.92l.076-.002a.343.343 0 00.25-.14l.25-.375a.365.365 0 00.078-.266.328.328 0 00-.14-.234l-2.22-1.625V7.625a.362.362 0 00-.109-.266.36.36 0 00-.265-.109h-.438a.357.357 0 00-.265.11.358.358 0 00-.11.265v5c0 .125.052.219.156.281l2.532 1.844a.383.383 0 00.281.078l-.076.001z"></path>
     </svg>
   );
 };
 
 ClockIcon.propTypes = {
-  color: PropTypes.string,
+  color: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Svgs/close-icon.js b/app/isomorphic/arrow/components/Svgs/close-icon.js
index 553ea311f..1e2478c51 100644
--- a/app/isomorphic/arrow/components/Svgs/close-icon.js
+++ b/app/isomorphic/arrow/components/Svgs/close-icon.js
@@ -11,5 +11,5 @@ export const CloseIcon = ({ color = "#333" }) => {
   );
 };
 CloseIcon.propTypes = {
-  color: PropTypes.string,
+  color: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Svgs/crown.js b/app/isomorphic/arrow/components/Svgs/crown.js
index b4462b32d..67a4275f7 100644
--- a/app/isomorphic/arrow/components/Svgs/crown.js
+++ b/app/isomorphic/arrow/components/Svgs/crown.js
@@ -8,8 +8,7 @@ export const CrownIcon = ({ height, width, color = "#D8D8D8", positionTop }) =>
       width={width}
       height={height}
       viewBox="0 0 40 40"
-      style={{ position: "relative", top: positionTop }}
-    >
+      style={{ position: "relative", top: positionTop }}>
       <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
         <g>
           <g transform="translate(8 8)">
@@ -28,5 +27,5 @@ CrownIcon.propTypes = {
   height: PropTypes.string,
   width: PropTypes.string,
   color: PropTypes.string,
-  positionTop: PropTypes.string,
+  positionTop: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Svgs/fallbackImage.js b/app/isomorphic/arrow/components/Svgs/fallbackImage.js
index fabe2e795..dd1148c82 100644
--- a/app/isomorphic/arrow/components/Svgs/fallbackImage.js
+++ b/app/isomorphic/arrow/components/Svgs/fallbackImage.js
@@ -38,5 +38,5 @@ export const ImageFallbackIcon = ({ width = 40, height = 30, iconColor = "#99B0C
 ImageFallbackIcon.propTypes = {
   width: PropTypes.object,
   height: PropTypes.object,
-  iconColor: PropTypes.object,
+  iconColor: PropTypes.object
 };
diff --git a/app/isomorphic/arrow/components/Svgs/hyperlink.js b/app/isomorphic/arrow/components/Svgs/hyperlink.js
index 94c6728ac..16cf95c8f 100644
--- a/app/isomorphic/arrow/components/Svgs/hyperlink.js
+++ b/app/isomorphic/arrow/components/Svgs/hyperlink.js
@@ -10,8 +10,7 @@ export const HyperLinkIcon = () => {
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth="2"
-          d="M22 14.667v4c0 .736-.597 1.333-1.333 1.333h-7.334A1.333 1.333 0 0112 18.667v-7.334c0-.736.597-1.333 1.333-1.333h4M20 8h4v4m-7.333 3.333L24 8"
-        ></path>
+          d="M22 14.667v4c0 .736-.597 1.333-1.333 1.333h-7.334A1.333 1.333 0 0112 18.667v-7.334c0-.736.597-1.333 1.333-1.333h4M20 8h4v4m-7.333 3.333L24 8"></path>
       </g>
     </svg>
   );
diff --git a/app/isomorphic/arrow/components/Svgs/key.js b/app/isomorphic/arrow/components/Svgs/key.js
index de8bb6bf2..b86780a57 100644
--- a/app/isomorphic/arrow/components/Svgs/key.js
+++ b/app/isomorphic/arrow/components/Svgs/key.js
@@ -8,8 +8,7 @@ export const KeyIcon = ({ height, width, color = "#D5D5D5", positionTop }) => {
       width={width}
       height={height}
       viewBox="0 0 40 40"
-      style={{ position: "relative", top: positionTop }}
-    >
+      style={{ position: "relative", top: positionTop }}>
       <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
         <g>
           <g transform="translate(8 8)">
@@ -18,8 +17,7 @@ export const KeyIcon = ({ height, width, color = "#D5D5D5", positionTop }) => {
               fill={color}
               fillRule="nonzero"
               d="M12.71 4.364A6.54 6.54 0 000 6.545a6.54 6.54 0 0012.71 2.182h4.745v4.364h4.363V8.727H24V4.364H12.71zM6.544 8.727a2.181 2.181 0 110-4.362 2.181 2.181 0 010 4.362z"
-              transform="translate(0 5)"
-            ></path>
+              transform="translate(0 5)"></path>
           </g>
         </g>
       </g>
@@ -31,5 +29,5 @@ KeyIcon.propTypes = {
   height: PropTypes.string,
   width: PropTypes.string,
   color: PropTypes.string,
-  positionTop: PropTypes.string,
+  positionTop: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Svgs/left-arrow.js b/app/isomorphic/arrow/components/Svgs/left-arrow.js
index b24fb7aa3..34b3590b2 100644
--- a/app/isomorphic/arrow/components/Svgs/left-arrow.js
+++ b/app/isomorphic/arrow/components/Svgs/left-arrow.js
@@ -13,5 +13,5 @@ export const LeftArrow = ({ color = "#333" }) => {
 };
 
 LeftArrow.propTypes = {
-  color: PropTypes.string,
+  color: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Svgs/liveicon.js b/app/isomorphic/arrow/components/Svgs/liveicon.js
index aef20513a..da0d060d7 100644
--- a/app/isomorphic/arrow/components/Svgs/liveicon.js
+++ b/app/isomorphic/arrow/components/Svgs/liveicon.js
@@ -2,11 +2,11 @@ import React from "react";
 
 function LiveIcon() {
   return (
-    <svg className="live-icon" xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24">
-      <path
-        fill="#ff5858"
-        d="M12 18a6 6 0 110-12 6 6 0 010 12zm0 2.5a8.5 8.5 0 110-17 8.5 8.5 0 010 17zm0-1a7.5 7.5 0 100-15 7.5 7.5 0 000 15z"
-      ></path>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+      <g fill="none" fillRule="evenodd" transform="translate(1 1)">
+        <circle cx="11" cy="11" r="8.25" fill="#FF5858" />
+        <circle cx="11" cy="11" r="11" stroke="#FF5858" />
+      </g>
     </svg>
   );
 }
diff --git a/app/isomorphic/arrow/components/Svgs/lock.js b/app/isomorphic/arrow/components/Svgs/lock.js
index 57dbbd5c1..dfa84b7ba 100644
--- a/app/isomorphic/arrow/components/Svgs/lock.js
+++ b/app/isomorphic/arrow/components/Svgs/lock.js
@@ -8,8 +8,7 @@ export const LockIcon = ({ height, width, color = "#D5D5D5", positionTop }) => {
       width={width}
       height={height}
       viewBox="0 0 40 40"
-      style={{ position: "relative", top: positionTop }}
-    >
+      style={{ position: "relative", top: positionTop }}>
       <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
         <g>
           <g transform="translate(8 8)">
@@ -28,5 +27,5 @@ LockIcon.propTypes = {
   height: PropTypes.string,
   width: PropTypes.string,
   color: PropTypes.string,
-  positionTop: PropTypes.string,
+  positionTop: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Svgs/right-arrow.js b/app/isomorphic/arrow/components/Svgs/right-arrow.js
index 3b89a3295..bbc2d672d 100644
--- a/app/isomorphic/arrow/components/Svgs/right-arrow.js
+++ b/app/isomorphic/arrow/components/Svgs/right-arrow.js
@@ -13,5 +13,5 @@ export const RightArrow = ({ color = "#333" }) => {
 };
 
 RightArrow.propTypes = {
-  color: PropTypes.string,
+  color: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Svgs/share-icon.js b/app/isomorphic/arrow/components/Svgs/share-icon.js
index 47b111b52..2ccf17a23 100644
--- a/app/isomorphic/arrow/components/Svgs/share-icon.js
+++ b/app/isomorphic/arrow/components/Svgs/share-icon.js
@@ -7,12 +7,11 @@ export const ShareIcon = ({ color = "#0D0D0D" }) => {
       <path
         fill={color}
         fillRule="evenodd"
-        d="M15.843 3.189c-1.478 0-2.689 1.239-2.689 2.75 0 .293.046.58.13.846L8.844 9.31a2.638 2.638 0 00-1.687-.621c-1.477 0-2.688 1.238-2.688 2.75 0 1.51 1.21 2.75 2.688 2.75.638 0 1.224-.231 1.687-.615l4.446 2.525a2.778 2.778 0 00-.136.84c0 1.51 1.211 2.75 2.689 2.75 1.477 0 2.688-1.24 2.688-2.75 0-1.512-1.21-2.75-2.688-2.75-.742 0-1.419.317-1.907.82l-4.323-2.46a2.763 2.763 0 000-2.221l4.317-2.459c.488.506 1.168.82 1.913.82 1.477 0 2.688-1.239 2.688-2.75s-1.21-2.75-2.688-2.75z"
-      ></path>
+        d="M15.843 3.189c-1.478 0-2.689 1.239-2.689 2.75 0 .293.046.58.13.846L8.844 9.31a2.638 2.638 0 00-1.687-.621c-1.477 0-2.688 1.238-2.688 2.75 0 1.51 1.21 2.75 2.688 2.75.638 0 1.224-.231 1.687-.615l4.446 2.525a2.778 2.778 0 00-.136.84c0 1.51 1.211 2.75 2.689 2.75 1.477 0 2.688-1.24 2.688-2.75 0-1.512-1.21-2.75-2.688-2.75-.742 0-1.419.317-1.907.82l-4.323-2.46a2.763 2.763 0 000-2.221l4.317-2.459c.488.506 1.168.82 1.913.82 1.477 0 2.688-1.239 2.688-2.75s-1.21-2.75-2.688-2.75z"></path>
     </svg>
   );
 };
 
 ShareIcon.propTypes = {
-  color: PropTypes.string,
+  color: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Svgs/star.js b/app/isomorphic/arrow/components/Svgs/star.js
index 285c2b812..7ac3ed2e3 100644
--- a/app/isomorphic/arrow/components/Svgs/star.js
+++ b/app/isomorphic/arrow/components/Svgs/star.js
@@ -8,14 +8,12 @@ export const StarIcon = ({ width, height, color = "#D5D5D5", positionTop = "" })
       width={width}
       height={height}
       viewBox="0 0 40 40"
-      style={{ position: "relative", top: positionTop }}
-    >
+      style={{ position: "relative", top: positionTop }}>
       <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
         <g>
           <path
             fill={color}
-            d="M20 26L12.946577 29.7082039 14.2936609 21.854102 8.5873218 16.2917961 16.4732885 15.145898 20 8 23.5267115 15.145898 31.4126782 16.2917961 25.7063391 21.854102 27.053423 29.7082039z"
-          ></path>
+            d="M20 26L12.946577 29.7082039 14.2936609 21.854102 8.5873218 16.2917961 16.4732885 15.145898 20 8 23.5267115 15.145898 31.4126782 16.2917961 25.7063391 21.854102 27.053423 29.7082039z"></path>
         </g>
       </g>
     </svg>
@@ -26,5 +24,5 @@ StarIcon.propTypes = {
   height: PropTypes.string,
   width: PropTypes.string,
   color: PropTypes.string,
-  positionTop: PropTypes.string,
+  positionTop: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Svgs/user-fallback-icon.js b/app/isomorphic/arrow/components/Svgs/user-fallback-icon.js
index a134dc0e2..a1820979f 100644
--- a/app/isomorphic/arrow/components/Svgs/user-fallback-icon.js
+++ b/app/isomorphic/arrow/components/Svgs/user-fallback-icon.js
@@ -15,5 +15,5 @@ export const UserFallbackIcon = ({ width = 120, height = 120 }) => {
 
 UserFallbackIcon.propTypes = {
   width: PropTypes.object,
-  height: PropTypes.object,
+  height: PropTypes.object
 };
diff --git a/app/isomorphic/arrow/components/Typography/stories.js b/app/isomorphic/arrow/components/Typography/stories.js
index fe2c39a56..7b2497bd0 100644
--- a/app/isomorphic/arrow/components/Typography/stories.js
+++ b/app/isomorphic/arrow/components/Typography/stories.js
@@ -4,7 +4,7 @@ import { Typography } from "./index";
 import Readme from "./README.md";
 
 withStore("Introduction", {}, Readme)
-  .addDecorator((story) => <div style={{ maxWidth: "900px", margin: "auto", padding: "10px" }}>{story()}</div>)
+  .addDecorator(story => <div style={{ maxWidth: "900px", margin: "auto", padding: "10px" }}>{story()}</div>)
   .add("Typography", () => {
     return <Typography />;
   });
diff --git a/app/isomorphic/arrow/constants.js b/app/isomorphic/arrow/constants.js
new file mode 100644
index 000000000..8d3b24691
--- /dev/null
+++ b/app/isomorphic/arrow/constants.js
@@ -0,0 +1 @@
+export const STORY_TEMPLATES = ["text", "photo", "video", "live-blog", "listicle"];
diff --git a/app/isomorphic/arrow/entry-points.js b/app/isomorphic/arrow/entry-points.js
index e6e2ba4f6..b5e06ce63 100644
--- a/app/isomorphic/arrow/entry-points.js
+++ b/app/isomorphic/arrow/entry-points.js
@@ -20,12 +20,12 @@ function getEntryPoints() {
     {
       // this is the main bundle containing all components. It's name must be "index"
       name: "index",
-      path: path.resolve(path.join(__dirname, "/index.js")),
+      path: path.resolve(path.join(__dirname, "/index.js"))
     },
     ...storyElementsEntryPoints(),
     ...atomsEntryPoints(),
     ...moleculesEntryPoints(),
-    ...rowsEntryPoints(),
+    ...rowsEntryPoints()
   ];
   return entryPoints.reduce((accumulator, currentBundle) => {
     accumulator[currentBundle.name] = currentBundle.path;
@@ -38,64 +38,64 @@ function storyElementsEntryPoints() {
   return [
     {
       name: "Text",
-      path: `${basePath}/Text`,
+      path: `${basePath}/Text`
     },
     {
       name: "Quote",
-      path: `${basePath}/Quote`,
+      path: `${basePath}/Quote`
     },
     {
       name: "Blurb",
-      path: `${basePath}/Blurb`,
+      path: `${basePath}/Blurb`
     },
     {
       name: "AlsoRead",
-      path: `${basePath}/AlsoRead`,
+      path: `${basePath}/AlsoRead`
     },
     {
       name: "Summary",
-      path: `${basePath}/Summary`,
+      path: `${basePath}/Summary`
     },
     {
       name: "BlockQuote",
-      path: `${basePath}/BlockQuote`,
+      path: `${basePath}/BlockQuote`
     },
     {
       name: "Image",
-      path: `${basePath}/Image`,
+      path: `${basePath}/Image`
     },
     {
       name: "Video",
-      path: `${basePath}/Video`,
+      path: `${basePath}/Video`
     },
     {
       name: "BigFact",
-      path: `${basePath}/BigFact`,
+      path: `${basePath}/BigFact`
     },
     {
       name: "StoryElement",
-      path: `${basePath}/StoryElement`,
+      path: `${basePath}/StoryElement`
     },
     {
       name: "QuestionAnswer",
-      path: `${basePath}/QuestionAnswer`,
+      path: `${basePath}/QuestionAnswer`
     },
     {
       name: "ImageGallery",
-      path: `${basePath}/imageGallery`,
+      path: `${basePath}/imageGallery`
     },
     {
       name: "Reference",
-      path: `${basePath}/Reference`,
+      path: `${basePath}/Reference`
     },
     {
       name: "Attachment",
-      path: `${basePath}/Attachment`,
+      path: `${basePath}/Attachment`
     },
     {
       name: "ImageSlideshow",
-      path: `${basePath}/ImageSlideshow`,
-    },
+      path: `${basePath}/ImageSlideshow`
+    }
   ];
 }
 
@@ -104,44 +104,48 @@ function atomsEntryPoints() {
   return [
     {
       name: "Author",
-      path: `${basePath}/Author`,
+      path: `${basePath}/Author`
     },
     {
       name: "AuthorWithTime",
-      path: `${basePath}/AuthorWithTimestamp`,
+      path: `${basePath}/AuthorWithTimestamp`
     },
     {
       name: "CollectionName",
-      path: `${basePath}/CollectionName`,
+      path: `${basePath}/CollectionName`
     },
     {
       name: "Headline",
-      path: `${basePath}/Headline`,
+      path: `${basePath}/Headline`
     },
     {
       name: "HeroImage",
-      path: `${basePath}/HeroImage`,
+      path: `${basePath}/HeroImage`
     },
     {
       name: "LoadmoreButton",
-      path: `${basePath}/Loadmore`,
+      path: `${basePath}/Loadmore`
     },
     {
       name: "SectionTag",
-      path: `${basePath}/SectionTag`,
+      path: `${basePath}/SectionTag`
     },
     {
       name: "Subheadline",
-      path: `${basePath}/Subheadline`,
+      path: `${basePath}/Subheadline`
     },
     {
       name: "TimeStamp",
-      path: `${basePath}/TimeStamp`,
+      path: `${basePath}/TimeStamp`
     },
     {
       name: "ScrollSnap",
-      path: `${basePath}/ScrollSnap`,
+      path: `${basePath}/ScrollSnap`
     },
+    {
+      name: "PublishDetails",
+      path: `${basePath}/PublishDetail`
+    }
   ];
 }
 
@@ -150,28 +154,28 @@ function moleculesEntryPoints() {
   return [
     {
       name: "StoryCard",
-      path: `${basePath}/StoryCard`,
+      path: `${basePath}/StoryCard`
     },
     {
       name: "StorycardContent",
-      path: `${basePath}/StorycardContent`,
+      path: `${basePath}/StorycardContent`
     },
     {
       name: "StoryElementCard",
-      path: `${basePath}/StoryElementCard`,
+      path: `${basePath}/StoryElementCard`
     },
     {
       name: "KeyEvents",
-      path: `${basePath}/KeyEvents`,
+      path: `${basePath}/KeyEvents`
     },
     {
       name: "SocialShareTemplate",
-      path: `${basePath}/SocialShareTemplate`,
+      path: `${basePath}/SocialShareTemplate`
     },
     {
       name: "PageIntroductionCard",
-      path: `${basePath}/PageIntroductionCard`,
-    },
+      path: `${basePath}/PageIntroductionCard`
+    }
   ];
 }
 
@@ -180,180 +184,181 @@ function rowsEntryPoints() {
   return [
     {
       name: "FourColGrid",
-      path: `${basePath}/FourColGrid`,
+      path: `${basePath}/FourColGrid`
     },
     {
       name: "OneColStoryList",
-      path: `${basePath}/OneColStoryList`,
+      path: `${basePath}/OneColStoryList`
     },
     {
       name: "ThreeColGrid",
-      path: `${basePath}/ThreeColGrid`,
+      path: `${basePath}/ThreeColGrid`
     },
     {
       name: "TwoColFourStories",
-      path: `${basePath}/TwoColFourStory`,
+      path: `${basePath}/TwoColFourStory`
     },
     {
       name: "TwoColThreeStories",
-      path: `${basePath}/TwoColThreeStory`,
+      path: `${basePath}/TwoColThreeStory`
     },
     {
       name: "TwoColSevenStories",
-      path: `${basePath}/TwoColSevenStories`,
+      path: `${basePath}/TwoColSevenStories`
     },
     {
       name: "ThreeColSixStories",
-      path: `${basePath}/ThreeColSixStories`,
+      path: `${basePath}/ThreeColSixStories`
     },
     {
       name: "ThreeColSevenStory",
-      path: `${basePath}/ThreeColSevenStory`,
+      path: `${basePath}/ThreeColSevenStory`
     },
     {
       name: "ElevenStories",
-      path: `${basePath}/ElevenStories`,
+      path: `${basePath}/ElevenStories`
     },
     {
       name: "CollectionFilter",
-      path: `${basePath}/CollectionFilter`,
+      path: `${basePath}/CollectionFilter`
     },
     {
       name: "HalfScreenSlider",
-      path: `${basePath}/HalfScreenSlider`,
+      path: `${basePath}/HalfScreenSlider`
     },
     {
       name: "FourStorySlider",
-      path: `${basePath}/FourStorySlider`,
+      path: `${basePath}/FourStorySlider`
     },
     {
       name: "FourStorySliderPortrait",
-      path: `${basePath}/FourStorySliderPortrait`,
+      path: `${basePath}/FourStorySliderPortrait`
     },
     {
       name: "FullScreenSlider",
-      path: `${basePath}/FullScreenSlider`,
+      path: `${basePath}/FullScreenSlider`
     },
     {
       name: "ThreeColFourteenStories",
-      path: `${basePath}/ThreeColFourteenStory`,
+      path: `${basePath}/ThreeColFourteenStory`
     },
     {
       name: "FourColTwelveStories",
-      path: `${basePath}/FourColTwelveStory`,
+      path: `${basePath}/FourColTwelveStory`
     },
     {
       name: "TagIntroductionCard",
-      path: `${basePath}/TagIntroductionCard`,
+      path: `${basePath}/TagIntroductionCard`
     },
     {
       name: "AuthorIntroductionCard",
-      path: `${basePath}/AuthorIntroductionCard`,
+      path: `${basePath}/AuthorIntroductionCard`
     },
     {
       name: "AsideCollection",
-      path: `${basePath}/AsideCollection`,
+      path: `${basePath}/AsideCollection`
     },
     {
       name: "StoryCollection",
-      path: `${basePath}/AsideCollection`,
+      path: `${basePath}/AsideCollection`
+    },
+    {
+      name: "Snapshot",
+      path: `${basePath}/StoryTemplates/Snapshot`
     },
     {
       name: "VideoStoryTemplate",
-      path: `${basePath}/StoryTemplates/VideoStoryTemplates`,
+      path: `${basePath}/StoryTemplates/VideoStoryTemplates`
     },
     {
       name: "TextStoryTemplate",
-      path: `${basePath}/StoryTemplates/TextStoryTemplates`,
+      path: `${basePath}/StoryTemplates/TextStoryTemplates`
     },
     {
       name: "LiveBlogStoryTemplate",
-      path: `${basePath}/StoryTemplates/LiveBlogStorytemplates`,
+      path: `${basePath}/StoryTemplates/LiveBlogStorytemplates`
     },
     {
       name: "ListicleStoryTemplate",
-      path: `${basePath}/StoryTemplates/ListicleStoryTemplates`,
+      path: `${basePath}/StoryTemplates/ListicleStoryTemplates`
     },
     {
       name: "ListComponent",
-      path: `${basePath}/ListComponent`,
+      path: `${basePath}/ListComponent`
     },
     {
       name: "MagazineEditions",
-      path: `${basePath}/MagazineEditions`,
+      path: `${basePath}/MagazineEditions`
     },
     {
       name: "MagazineWidget",
-      path: `${basePath}/MagazineWidget`,
+      path: `${basePath}/MagazineWidget`
     },
     {
       name: "MagazineHeaderCard",
-      path: `${basePath}/MagazineHeaderCard`,
+      path: `${basePath}/MagazineHeaderCard`
     },
     {
       name: "PhotoStoryTemplate",
-      path: `${basePath}/StoryTemplates/PhotoStoryTemplates`,
+      path: `${basePath}/StoryTemplates/PhotoStoryTemplates`
     },
     {
       name: "AuthorsList",
-      path: `${basePath}/AuthorsList`,
+      path: `${basePath}/AuthorsList`
     },
     {
       name: "FourColSixteenStories",
-      path: `${basePath}/FourColSixteenStories`,
+      path: `${basePath}/FourColSixteenStories`
     },
     {
       name: "FourColFiveStories",
-      path: `${basePath}/FourColFiveStories`,
+      path: `${basePath}/FourColFiveStories`
     },
     {
       name: "TwoColSixStories",
-      path: `${basePath}/TwoColSixStories`,
+      path: `${basePath}/TwoColSixStories`
     },
     {
       name: "TwoColFourStoryHighlight",
-      path: `${basePath}/TwoColFourStoryHighlight`,
-    },
-    {
-      name: "OpinionCollection",
-      path: `${basePath}/OpinionCollection`,
+      path: `${basePath}/TwoColFourStoryHighlight`
     },
+    { name: "OpinionCollection", path: `${basePath}/OpinionCollection` },
     {
       name: "ThreeColFlexStories",
-      path: `${basePath}/ThreeColFlexStories`,
+      path: `${basePath}/ThreeColFlexStories`
     },
     {
       name: "SixColSixStories",
-      path: `${basePath}/SixColSixStories`,
+      path: `${basePath}/SixColSixStories`
     },
     {
       name: "TwoColTenStoriesSidebar",
-      path: `${basePath}/TwoColTenStoriesSidebar`,
+      path: `${basePath}/TwoColTenStoriesSidebar`
     },
     {
       name: "ThreeColTwelveStories",
-      path: `${basePath}/ThreeColTwelveStories`,
+      path: `${basePath}/ThreeColTwelveStories`
     },
     {
       name: "FourTabbedBigStorySlider",
-      path: `${basePath}/FourTabbedBigStorySlider`,
+      path: `${basePath}/FourTabbedBigStorySlider`
     },
     {
       name: "AlternateCollectionFilter",
-      path: `${basePath}/AlternateCollectionFilter`,
+      path: `${basePath}/AlternateCollectionFilter`
     },
     {
       name: "Listicles",
-      path: `${basePath}/Listicles`,
+      path: `${basePath}/Listicles`
     },
     {
       name: "FourColPortraitStories",
-      path: `${basePath}/FourColPortraitStories`,
+      path: `${basePath}/FourColPortraitStories`
     },
     {
       name: "AstrologyCollection",
-      path: `${basePath}/AstrologyCollection`,
-    },
+      path: `${basePath}/AstrologyCollection`
+    }
   ];
 }
 
diff --git a/app/isomorphic/arrow/guide/stories.js b/app/isomorphic/arrow/guide/stories.js
index 9081e2c9d..7b1021f3f 100644
--- a/app/isomorphic/arrow/guide/stories.js
+++ b/app/isomorphic/arrow/guide/stories.js
@@ -5,14 +5,14 @@ import { storiesOf } from "@storybook/react";
 
 storiesOf("Introduction", module)
   .addDecorator(addReadme)
-  .addDecorator((story) => <div style={{ maxWidth: "900px", margin: "auto" }}>{story()}</div>)
+  .addDecorator(story => <div style={{ maxWidth: "900px", margin: "auto" }}>{story()}</div>)
   .addParameters({
     options: {
-      showPanel: false,
+      showPanel: false
     },
     readme: {
       content: readme,
-      codeTheme: "a11y-dark",
-    },
+      codeTheme: "a11y-dark"
+    }
   })
   .add("Getting Started", () => <div />);
diff --git a/app/isomorphic/arrow/hydration-component/index.js b/app/isomorphic/arrow/hydration-component/index.js
index 0e158e034..c453f0fe8 100644
--- a/app/isomorphic/arrow/hydration-component/index.js
+++ b/app/isomorphic/arrow/hydration-component/index.js
@@ -33,5 +33,5 @@ export const ProgressiveHydration = (props) => {
 };
 
 ProgressiveHydration.propTypes = {
-  children: PropTypes.element,
+  children: PropTypes.element
 };
diff --git a/app/isomorphic/arrow/hydration-component/useNearScreen.js b/app/isomorphic/arrow/hydration-component/useNearScreen.js
index d5fc0f14c..ec99b8610 100644
--- a/app/isomorphic/arrow/hydration-component/useNearScreen.js
+++ b/app/isomorphic/arrow/hydration-component/useNearScreen.js
@@ -14,7 +14,7 @@ const getIntersectionObserver = () => {
 // options for intersection observer in order to improve the effect
 const intersectionObserverOptions = {
   root: null, // windows viewport will be used
-  rootMargin: "200px 0px 0px 0px",
+  rootMargin: "200px 0px 0px 0px"
 };
 
 const handleIntersect = (entries, observer) => {
diff --git a/app/isomorphic/arrow/index.js b/app/isomorphic/arrow/index.js
index f2bc3256c..5e58c68aa 100644
--- a/app/isomorphic/arrow/index.js
+++ b/app/isomorphic/arrow/index.js
@@ -17,6 +17,7 @@ export { Subheadline } from "./components/Atoms/Subheadline";
 export { TimeStamp } from "./components/Atoms/TimeStamp";
 export { LoadMoreTarget } from "./components/Atoms/LoadMoreTarget";
 export { ScrollSnap } from "./components/Atoms/ScrollSnap";
+export { PublishDetails } from "./components/Atoms/PublishDetail";
 
 // STORY ELEMENTS
 export { Text } from "./components/Atoms/StoryElements/Text";
@@ -66,6 +67,7 @@ export { default as AuthorIntroductionCard } from "./components/Rows/AuthorIntro
 export { default as AuthorsList } from "./components/Rows/AuthorsList";
 export { default as AsideCollection } from "./components/Rows/AsideCollection";
 export { StoryCollection } from "./components/Rows/AsideCollection";
+export { default as Snapshot } from "./components/Rows/StoryTemplates/Snapshot";
 export { default as VideoStoryTemplate } from "./components/Rows/StoryTemplates/VideoStoryTemplates";
 export { default as TextStoryTemplate } from "./components/Rows/StoryTemplates/TextStoryTemplates";
 export { default as LiveBlogStoryTemplate } from "./components/Rows/StoryTemplates/LiveBlogStorytemplates";
@@ -89,3 +91,6 @@ export { default as AlternateCollectionFilter } from "./components/Rows/Alternat
 export { default as FourColPortraitStories } from "./components/Rows/FourColPortraitStories";
 export { default as AstrologyCollection } from "./components/Rows/AstrologyCollection";
 export { default as Listicles } from "./components/Rows/Listicles";
+
+// UTILS
+export { formatter } from "./utils/utils";
diff --git a/app/isomorphic/arrow/utils/testing-utils.js b/app/isomorphic/arrow/utils/testing-utils.js
index 602d12d55..5d8ad704a 100644
--- a/app/isomorphic/arrow/utils/testing-utils.js
+++ b/app/isomorphic/arrow/utils/testing-utils.js
@@ -2,7 +2,7 @@ export function mockIntersectionObserver() {
   const mockIntersectionObserver = jest.fn();
   mockIntersectionObserver.mockReturnValue({
     observe: jest.fn().mockReturnValue(null),
-    unobserve: jest.fn().mockReturnValue(null),
+    unobserve: jest.fn().mockReturnValue(null)
   });
   window.IntersectionObserver = mockIntersectionObserver;
 }
diff --git a/app/isomorphic/arrow/utils/utils.js b/app/isomorphic/arrow/utils/utils.js
index c9394ddc6..f276448d7 100644
--- a/app/isomorphic/arrow/utils/utils.js
+++ b/app/isomorphic/arrow/utils/utils.js
@@ -1,10 +1,15 @@
 import get from "lodash/get";
+import camelCase from "lodash.camelcase";
+import kebabCase from "lodash.kebabcase";
 import PropTypes from "prop-types";
 import upperCase from "lodash/upperCase";
 import Timeago from "react-timeago";
 import React from "react";
 import lowerCase from "lodash/lowerCase";
 import { format, utcToZonedTime } from "date-fns-tz";
+import { Dot } from "../components/Atoms/Dot/dot";
+import { Divider } from "../components/Atoms/Divider/";
+import { STORY_TEMPLATES } from "../constants";
 
 const canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
 
@@ -15,25 +20,27 @@ export function truncate(string = "", limit = 60, ellipsis = true) {
   return typeof string === "string" && string.length > limit ? string.substring(0, limit) + putEllipsis : string;
 }
 
-export const timestampToFormat = (value, unit, suffix, timestamp, config = {}, languageCode = "en") => {
+export const timestampToFormat = (value, unit, suffix, timestamp, config = {}, languageCode = "en-IN") => {
   const {
     showTime = false,
     isTimeFirst = false,
     isUpperCase = false,
     disableMeridiem = false,
     timeFormat = "12hours",
-    localizedZeroToPad,
+    localizedZeroToPad
   } = config;
   const monthList = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
   const dateTime = new Date(timestamp);
-  const date = dateTime.getDate().toString().padStart(2, 0);
+  const date = dateTime
+    .getDate()
+    .toString()
+    .padStart(2, 0);
 
   const month = monthList[dateTime.getMonth()];
   let localizedMonth = month;
   if (isUpperCase) {
     localizedMonth = upperCase(month);
   }
-
   const year = dateTime.getFullYear();
   const { localizedMeridiem, localizedMonths, direction = "ltr" } = config;
   const time = formatAMPM(timestamp, timeFormat, localizedZeroToPad, languageCode);
@@ -53,8 +60,8 @@ export const timestampToFormat = (value, unit, suffix, timestamp, config = {}, l
   }
 
   if (direction === "rtl") {
-    timetoShow = showTime ? `${timeWithLocalizedMeridiem}` : "";
-    return `${localizedDate} ${localizedMonth}, ${localizedYear} ${timetoShow} `;
+    timetoShow = showTime ? `, ${timeWithLocalizedMeridiem}` : "";
+    return `${localizedDate} ${localizedMonth}, ${localizedYear}${timetoShow} `;
   } else {
     if (disableMeridiem) {
       return `${localizedMonth} ${localizedDate}, ${localizedYear}`;
@@ -67,21 +74,51 @@ export const timestampToFormat = (value, unit, suffix, timestamp, config = {}, l
   }
 };
 
-export function formatter(value, unit, suffix, date, config, languageCode) {
+export function formatter(value, unit, suffix, date, config, languageCode, isLocalizedNumber, timeAgoFormat) {
   const showDateForUnits = ["day", "week", "month", "year"];
   // suffix here refers to ago
   // unit here refers to seconds, minute, minutes,...
   const localizedSuffix = get(config, ["localizedPublishTime", suffix]) || suffix;
   let localizedUnitOfTime;
 
+  const localeDateLanguageCode = isLocalizedNumber ? languageCode : "en";
+
+  const timeFormatObj = {
+    time: value.toLocaleString(localeDateLanguageCode),
+    unit: localizedUnitOfTime,
+    ago: localizedSuffix,
+    since: get(config, ["localizedPublishTime", "since"]) || "since"
+  };
+
+  const getFormattedDate = (timeFormat) => {
+    const timeStr = timeAgoFormat.replace(/time|unit|ago|since/gi, (item) => timeFormat[item]);
+    return monkeyPatchForArabic(timeStr);
+  };
+
   if ((unit === "hour" && value > 23) || showDateForUnits.indexOf(unit) !== -1) {
-    return timestampToFormat(value, unit, suffix, date, config, languageCode);
+    return timestampToFormat(value, unit, suffix, date, config, localeDateLanguageCode);
   } else if (value > 1) {
     localizedUnitOfTime = get(config, ["localizedPublishTime", `${unit}s`]) || `${unit}s`;
-    return `${value.toLocaleString(languageCode)} ${localizedUnitOfTime} ${localizedSuffix}`;
+    timeFormatObj["unit"] = localizedUnitOfTime;
+    return getFormattedDate(timeFormatObj);
   }
   localizedUnitOfTime = get(config, ["localizedPublishTime", unit]) || unit;
-  return `${value.toLocaleString(languageCode)} ${localizedUnitOfTime} ${localizedSuffix} `;
+  timeFormatObj["unit"] = localizedUnitOfTime;
+
+  return getFormattedDate(timeFormatObj);
+}
+
+function monkeyPatchForArabic(timeStr = "") {
+  const replacements = {
+    "منذ 2 ثواني": "منذ ثانيتان",
+    "منذ 1 دقيقة": "منذ دقيقة",
+    "منذ 2 دقائق": "منذ دقيقتان",
+    "منذ 1 ساعة": "منذ ساعة",
+    "منذ 2 ساعات": "منذ ساعتان"
+  };
+  const re = new RegExp(Object.keys(replacements).join("|"), "gi");
+  const str = timeStr.replace(re, (match) => replacements[match]);
+  return str;
 }
 
 function formatAMPM(timestamp, timeFormat = "12hours", localizedZeroToPad, languageCode) {
@@ -91,7 +128,7 @@ function formatAMPM(timestamp, timeFormat = "12hours", localizedZeroToPad, langu
   const ampm = hours >= 12 ? "pm" : "am";
   hours = hours % 12;
   hours = hours || 12;
-  const padZero = languageCode === "en" ? "0" : localizedZeroToPad;
+  const padZero = languageCode.startsWith("en") ? "0" : localizedZeroToPad;
   minutes = minutes < 10 ? padZero + minutes.toLocaleString(languageCode) : minutes.toLocaleString(languageCode);
   const strTime = hours.toLocaleString(languageCode) + ":" + minutes + " " + ampm.toLocaleString(languageCode);
   if (timeFormat === "24hours") {
@@ -113,7 +150,7 @@ export const getLuminanceOfColor = (hex) => {
 };
 
 export const rgbToHex = (color = "rgba(255, 255, 255, 0)") => {
-  const rgba = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
+  let rgba = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
   return rgba && rgba.length === 4
     ? "#" +
         ("0" + parseInt(rgba[1], 10).toString(16)).slice(-2) +
@@ -124,7 +161,7 @@ export const rgbToHex = (color = "rgba(255, 255, 255, 0)") => {
 
 const clientWidths = {
   mobile: 767,
-  tablet: 1024,
+  tablet: 1024
 };
 
 export const clientWidth = (device) => {
@@ -208,19 +245,24 @@ export const isEmpty = (value) => {
 export const shapeConfig = PropTypes.shape({
   "sketches-host": PropTypes.string,
   "cdn-name": PropTypes.string,
-  "cdn-image": PropTypes.string,
+  "cdn-image": PropTypes.string
 });
 
 export const shapeStory = PropTypes.shape({
   headline: PropTypes.string,
   "last-published-at": PropTypes.number,
-  subheadline: PropTypes.string,
+  subheadline: PropTypes.string
 });
 
-export const getStoryUrl = (story, defaultValue = "") => {
-  return get(story, ["story-template"]) === "news-elsewhere"
-    ? get(story, ["metadata", "reference-url"], "")
-    : story.url || defaultValue;
+export const getStoryUrl = (story, defaultValue = "", queryParam = {}) => {
+  const param = new URLSearchParams(queryParam);
+  const searchParam = param.toString();
+  if (get(story, ["story-template"]) === "news-elsewhere") {
+    const referenceUrl = get(story, ["metadata", "reference-url"], "");
+    return searchParam ? `${referenceUrl}?${searchParam}` : referenceUrl;
+  }
+  const storyUrl = story.url || defaultValue;
+  return searchParam ? `${storyUrl}?${searchParam}` : storyUrl;
 };
 
 export const detectComponent = (component, adComponent, widgetComp) => {
@@ -275,9 +317,9 @@ export const generateNavigateSlug = (collection = {}, config = {}, customUrlPath
 
 export const getCollectionData = async (collectionSlug, mountAtPrefix = "") => {
   try {
-    const result = await (
-      await fetch(`${mountAtPrefix}/api/v1/collections/${collectionSlug}?item-type=story&limit=6`)
-    ).json();
+    const result = await (await fetch(
+      `${mountAtPrefix}/api/v1/collections/${collectionSlug}?item-type=story&limit=6`
+    )).json();
     return result;
   } catch (err) {
     // eslint-disable-next-line no-console
@@ -306,18 +348,34 @@ export function getAuthorTwitterUrl(author) {
   return "";
 }
 
-export const getTimeStamp = (date, formatter, config = {}, languageCode, template, timezone = null) => {
+export const getTimeStamp = (
+  date,
+  formatter,
+  config = {},
+  languageCode,
+  template,
+  timezone = null,
+  isLocalizedNumber,
+  timeAgoFormat = ""
+) => {
+  const isRelatedCollection = get(config, ["isRelatedCollection"], false);
+
   if (timezone && template === "story") {
     const zonedTime = timezone && utcToZonedTime(date, timezone);
     const formatZonedTime = zonedTime && format(zonedTime, "yyyy-MM-dd'T'HH:mm:ssXXX", { timeZone: timezone });
-    const timeStamp = timestampToFormat("", "", "", date, config);
+    const localeDateLanguageCode = isLocalizedNumber ? languageCode : "en";
+    const timeStamp = timestampToFormat("", "", "", date, config, localeDateLanguageCode);
     return <time dateTime={formatZonedTime}>{timeStamp}</time>;
   }
 
   return (
     <Timeago
       date={date}
-      formatter={(value, unit, suffix, date) => formatter(value, unit, suffix, date, config, languageCode)}
+      component={isRelatedCollection ? "div" : "time"}
+      className="arr__timeago"
+      formatter={(value, unit, suffix, date) =>
+        formatter(value, unit, suffix, date, config, languageCode, isLocalizedNumber, timeAgoFormat)
+      }
     />
   );
 };
@@ -328,3 +386,18 @@ export function removeHtmlTags(str) {
 
   return str.replace(/(<([^>]+)>)/gi, "");
 }
+
+export const getSeparator = (separator, textColor) => {
+  if (separator === "divider") {
+    return <Divider color={textColor} />;
+  }
+  return <Dot color={textColor} />;
+};
+
+export function getStoryTemplate(story, config) {
+  const { "story-template": storyTemplate } = story;
+  const isCustomStory = !STORY_TEMPLATES.includes(storyTemplate);
+  const customStoryTemplate =
+    isCustomStory && get(config, ["customStory", `${camelCase(storyTemplate)}-story`, "storyType"], "text");
+  return isCustomStory ? kebabCase(customStoryTemplate) : storyTemplate;
+}
diff --git a/app/isomorphic/arrow/utils/utils.test.js b/app/isomorphic/arrow/utils/utils.test.js
index afd72702f..178159835 100644
--- a/app/isomorphic/arrow/utils/utils.test.js
+++ b/app/isomorphic/arrow/utils/utils.test.js
@@ -15,34 +15,34 @@ describe("getAuthorTwitterUrl", () => {
   const author = {
     id: 123981,
     name: "Ravigopal Kesari",
-    slug: "ravigopal-kesari",
+    slug: "ravigopal-kesari"
   };
   const socialData = {
     social: {
       twitter: {
         url: "https://www.twitter.com/sabqorg",
-        handle: "elonmusk",
-      },
-    },
+        handle: "elonmusk"
+      }
+    }
   };
-  it("should return empty string when the author object doesn't have 'social' key", () => {
+  it(" should return empty string when the author object doesn't have 'social' key ", () => {
     const authorTwitterLink = getAuthorTwitterUrl(author);
     expect(authorTwitterLink).toBe("");
   });
 
-  it("should return twitter url when both url and handle are present", () => {
+  it(" should return twitter url when both url and handle are present  ", () => {
     const modifiedAuthor = Object.assign({}, author, socialData);
     const authorTwitterLink = getAuthorTwitterUrl(modifiedAuthor);
     expect(authorTwitterLink).toBe("https://www.twitter.com/sabqorg");
   });
 
-  it("should return twitter handle link when url is not present", () => {
+  it(" should return twitter handle link when url is not present  ", () => {
     const socialData = {
       social: {
         twitter: {
-          handle: "elonmusk",
-        },
-      },
+          handle: "elonmusk"
+        }
+      }
     };
 
     const modifiedAuthor = Object.assign({}, author, socialData);
@@ -50,13 +50,13 @@ describe("getAuthorTwitterUrl", () => {
     expect(authorTwitterLink).toBe("https://www.twitter.com/elonmusk");
   });
 
-  it("should strip @ in  twitter handle  and construct link", () => {
+  it(" should strip @ in  twitter handle  and construct link", () => {
     const socialData = {
       social: {
         twitter: {
-          handle: "@elonmusk",
-        },
-      },
+          handle: "@elonmusk"
+        }
+      }
     };
     const modifiedAuthor = Object.assign({}, author, socialData);
     const authorTwitterLink = getAuthorTwitterUrl(modifiedAuthor);
@@ -103,6 +103,6 @@ describe("isEmpty", () => {
 
   it("should return window if the page url is defined", () => {
     const result = sharePageUrl;
-    expect(result).toBe(window.location.href);
+    expect(result).toBe(window.location["href"]);
   });
 });
diff --git a/app/isomorphic/assets/stylesheets/app.scss b/app/isomorphic/assets/stylesheets/app.scss
new file mode 100644
index 000000000..5cd00e86f
--- /dev/null
+++ b/app/isomorphic/assets/stylesheets/app.scss
@@ -0,0 +1,277 @@
+/* Global CSS */
+
+:root {
+  /* Colour Palette */
+  --arrow-c-brand1: #ff214b;
+  --arrow-c-brand2: #1bbb87;
+  --arrow-c-brand3: #6fe7c0;
+  --arrow-c-brand4: #f6f8ff;
+  --arrow-c-brand5: #e9e9e9;
+  --arrow-c-accent1: #2fd072;
+  --arrow-c-accent2: #f5a623;
+  --arrow-c-accent3: #f81010;
+  --arrow-c-accent4: #d71212;
+  --arrow-c-accent5: #f2f2f2;
+  --arrow-c-accent6: #e8eaed;
+  --arrow-c-mono1: rgba(0, 0, 0, 1);
+  --arrow-c-mono2: rgba(0, 0, 0, 0.9);
+  --arrow-c-mono3: rgba(0, 0, 0, 0.7);
+  --arrow-c-mono4: rgba(0, 0, 0, 0.6);
+  --arrow-c-mono5: rgba(0, 0, 0, 0.3);
+  --arrow-c-mono6: rgba(0, 0, 0, 0.2);
+  --arrow-c-mono7: rgba(0, 0, 0, 0.1);
+  --arrow-c-invert-mono1: rgba(255, 255, 255, 1);
+  --arrow-c-invert-mono2: rgba(255, 255, 255, 0.9);
+  --arrow-c-invert-mono3: rgba(255, 255, 255, 0.7);
+  --arrow-c-invert-mono4: rgba(255, 255, 255, 0.6);
+  --arrow-c-invert-mono5: rgba(255, 255, 255, 0.3);
+  --arrow-c-invert-mono6: rgba(255, 255, 255, 0.2);
+  --arrow-c-invert-mono7: rgba(255, 255, 255, 0.1);
+  --arrow-c-invert-mono8: rgba(222, 222, 222, 1);
+  --arrow-c-invert-mono9: rgba(222, 222, 222, 0.1);
+  --arrow-c-dark: #0d0d0d;
+  --arrow-c-light: #ffffff;
+  /* Spacing */
+  --arrow-spacing-xxs: 4px;
+  --arrow-spacing-xs: 8px;
+  --arrow-spacing-s: 12px;
+  --arrow-spacing-m: 16px;
+  --arrow-spacing-20: 20px;
+  --arrow-spacing-l: 24px;
+  --arrow-spacing-xl: 32px;
+  --arrow-spacing-28: 28px;
+  --arrow-spacing-48: 48px;
+  --arrow-spacing-96: 96px;
+  /* Font Scale */
+  --arrow-fs-tiny: 14px;
+  --arrow-fs-xs: 16px;
+  --arrow-fs-s: 18px;
+  --arrow-fs-m: 20px;
+  --arrow-fs-l: 24px;
+  --arrow-fs-xl: 26px;
+  --arrow-fs-xxl: 30px;
+  --arrow-fs-huge: 32px;
+  --arrow-fs-big: 40px;
+  --arrow-fs-jumbo: 54px;
+
+  --arrow-fs-28: 28px;
+
+  /* Font Family */
+  --arrow-typeface-primary: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --arrow-typeface-secondary: Verdana, Geneva, Tahoma, sans-serif;
+  --arrow-sans-serif: sans-serif;
+  /* Line height */
+  --arrow-lh-1: 1;
+  --arrow-lh-2: 1.2;
+  --arrow-lh-3: 1.3;
+  --arrow-lh-4: 1.4;
+  --arrow-lh-5: 1.5;
+  /* Font Weight */
+  --arrow-fw-light: 300;
+  --arrow-fw-normal: 400;
+  --arrow-fw-semi-bold: 600;
+  --arrow-fw-bold: 700;
+  /* Border Color */
+  --light-border: var(--arrow-c-invert-mono7);
+  --dark-border: var(--arrow-c-mono7);
+  /* Fallback Image Color */
+  /* need to update this color in future */
+  --fallback-img: rgb(232, 232, 232);
+  /* Z-Index */
+  --z-index-9: 9;
+  --z-index-1: 1;
+  --z-index-m1: -1;
+  --z-index-m2: -2;
+  --z-index-m3: -3;
+}
+
+.arrow-component {
+  font-family: var(--arrow-typeface-primary);
+  font-weight: var(--arrow-fw-normal);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -moz-font-feature-settings: "liga" on;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  ul,
+  ol {
+    font-family: var(--arrow-typeface-primary);
+  }
+  p,
+  li {
+    font-size: var(--arrow-fs-xs);
+    line-height: var(--arrow-lh-1);
+  }
+
+  figure {
+    margin: 0;
+    padding: 0;
+  }
+  /* Typescale */
+  h1 {
+    font-size: var(--arrow-fs-28);
+    font-weight: var(--arrow-fw-bold);
+    font-stretch: normal;
+    font-style: normal;
+    line-height: var(--arrow-lh-3);
+    letter-spacing: normal;
+    @media only screen and (min-width: 768px) {
+      font-size: var(--arrow-fs-big);
+    }
+  }
+  h2 {
+    font-size: var(--arrow-fs-l);
+    font-weight: var(--arrow-fw-bold);
+    font-stretch: normal;
+    font-style: normal;
+    line-height: var(--arrow-lh-3);
+    letter-spacing: normal;
+    @media only screen and (min-width: 768px) {
+      font-size: var(--arrow-fs-huge);
+    }
+  }
+  h3 {
+    font-size: var(--arrow-fs-m);
+    font-weight: var(--arrow-fw-bold);
+    font-stretch: normal;
+    font-style: normal;
+    line-height: var(--arrow-lh-3);
+    letter-spacing: normal;
+    @media only screen and (min-width: 768px) {
+      font-size: var(--arrow-fs-l);
+    }
+  }
+  h4 {
+    font-size: var(--arrow-fs-s);
+    font-weight: var(--arrow-fw-bold);
+    font-stretch: normal;
+    font-style: normal;
+    line-height: var(--arrow-lh-3);
+    letter-spacing: normal;
+    @media only screen and (min-width: 768px) {
+      font-size: var(--arrow-fs-m);
+    }
+  }
+  h5 {
+    font-size: var(--arrow-fs-xs);
+    font-weight: var(--arrow-fw-bold);
+    font-stretch: normal;
+    font-style: normal;
+    line-height: var(--arrow-lh-3);
+    letter-spacing: normal;
+    @media only screen and (min-width: 768px) {
+      font-size: var(--arrow-fs-s);
+    }
+  }
+  h6 {
+    font-size: var(--arrow-fs-xs);
+    font-weight: var(--arrow-fw-bold);
+    font-stretch: normal;
+    font-style: normal;
+    line-height: var(--arrow-lh-3);
+    letter-spacing: normal;
+  }
+  p {
+    font-size: var(--arrow-fs-m);
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: var(--arrow-lh-5);
+    letter-spacing: normal;
+    font-family: var(--arrow-typeface-secondary);
+    word-break: break-word;
+  }
+}
+
+.arrow-component.full-width-with-padding {
+  margin-left: calc(-50vw + 50%);
+  margin-right: calc(-50vw + 50%);
+  padding: var(--arrow-spacing-m) calc(50vw - 50%) var(--arrow-spacing-xs) calc(50vw - 50%);
+}
+
+.p-alt {
+  font-size: var(--arrow-fs-xs);
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: var(--arrow-lh-5);
+  letter-spacing: normal;
+}
+
+.time {
+  font-size: var(--arrow-fs-tiny);
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  letter-spacing: normal;
+}
+
+.author-name {
+  font-size: var(--arrow-fs-tiny);
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  letter-spacing: normal;
+}
+
+.section-tag {
+  font-size: var(--arrow-fs-tiny);
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+}
+
+.arr-hidden-desktop {
+  display: none;
+  @media only screen and (max-width: 768px) {
+    display: block;
+  }
+}
+
+.arr-hidden-mob {
+  display: block;
+  @media only screen and (max-width: 768px) {
+    display: none;
+  }
+}
+
+.arr-custom-style a {
+  color: var(--arrow-c-mono2);
+  border-bottom: 1px solid var(--arrow-c-mono2);
+}
+
+.arr-story-grid {
+  display: grid;
+  grid-column-gap: var(--arrow-spacing-l);
+  grid-template-columns: repeat(4, minmax(auto, 150px));
+  position: relative;
+  margin: 0 12px;
+  @media only screen and (min-width: 768px) {
+    grid-template-columns:
+      [grid-start] minmax(48px, auto) [container-start] repeat(12, minmax(auto, 55px)) [container-end] minmax(
+        48px,
+        auto
+      )
+      [grid-end];
+    margin: unset;
+    @media only screen and (min-width: 1025px) {
+      grid-template-columns:
+        [grid-start] minmax(56px, auto) [container-start] repeat(12, minmax(auto, 73px)) [container-end] minmax(
+          56px,
+          auto
+        )
+        [grid-end];
+    }
+  }
+}
+
+.content-style {
+  display: contents;
+}
diff --git a/app/isomorphic/assets/stylesheets/mixins.scss b/app/isomorphic/assets/stylesheets/mixins.scss
new file mode 100644
index 000000000..185e32efc
--- /dev/null
+++ b/app/isomorphic/assets/stylesheets/mixins.scss
@@ -0,0 +1,27 @@
+$mobile: 767px;
+$tablet: 768px;
+$desktop: 1025px;
+$desktop-lg: 1200px;
+
+@mixin mobile {
+  @media (max-width: #{$mobile}) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (min-width: #{$tablet}) {
+    @content;
+  }
+}
+@mixin desktop {
+  @media (min-width: #{$desktop}) {
+    @content;
+  }
+}
+
+@mixin desktop-lg {
+  @media (min-width: #{$desktop-lg}) {
+    @content;
+  }
+}
diff --git a/app/isomorphic/assets/stylesheets/reset.scss b/app/isomorphic/assets/stylesheets/reset.scss
new file mode 100644
index 000000000..fa91ff65f
--- /dev/null
+++ b/app/isomorphic/assets/stylesheets/reset.scss
@@ -0,0 +1,148 @@
+/* RESET CSS */
+
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit 100%;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+figure,
+img {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
diff --git a/app/isomorphic/assets/stylesheets/viewports.m.css b/app/isomorphic/assets/stylesheets/viewports.m.css
new file mode 100644
index 000000000..40b874837
--- /dev/null
+++ b/app/isomorphic/assets/stylesheets/viewports.m.css
@@ -0,0 +1,3 @@
+@value mobile: 768px;
+@value tablet: 992px;
+@value desktop: 1025px;
diff --git a/app/isomorphic/components/pages/author-page/author.m.css b/app/isomorphic/components/pages/author-page/author.m.css
index 427f7d166..94e3013e2 100644
--- a/app/isomorphic/components/pages/author-page/author.m.css
+++ b/app/isomorphic/components/pages/author-page/author.m.css
@@ -1,6 +1,3 @@
-:global {
-  @import "../../../arrow/components/Rows/AuthorIntroductionCard/author-intro.m.css";
-}
 .wrapper {
   :global .arr--author-intro-card {
     figure {
diff --git a/package-lock.json b/package-lock.json
index 486e0ab02..013aa9e83 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,9 +16,11 @@
         "@quintype/framework": "^7.7.7",
         "@quintype/seo": "^1.42.1",
         "axios": "^0.24.0",
+        "css-loader": "^6.8.1",
         "fontfaceobserver": "^2.1.0",
         "intersection-observer": "^0.12.2",
         "lodash": "^4.17.21",
+        "lodash.kebabcase": "^4.1.1",
         "query-string": "^7.0.1",
         "react": "^16.14.0",
         "react-dom": "^16.14.0",
@@ -5179,28 +5181,89 @@
         "react": ">=16.3.0"
       }
     },
-    "node_modules/@quintype/build/node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
-    },
-    "node_modules/@quintype/build/node_modules/postcss": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.4.tgz",
-      "integrity": "sha512-joU6fBsN6EIer28Lj6GDFoC/5yOZzLCfn0zHAn/MYXI7aPt4m4hK5KC5ovEZXy+lnCjmYIbQWngvju2ddyEr8Q==",
+    "node_modules/@quintype/build/node_modules/css-loader": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.5.1.tgz",
+      "integrity": "sha512-gEy2w9AnJNnD9Kuo4XAP9VflW/ujKoS9c/syO+uWMlm5igc7LysKzPXaDoR2vroROkSwsTS2tGr1yGGEbZOYZQ==",
       "dev": true,
       "dependencies": {
-        "nanoid": "^3.1.30",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.1"
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.2.15",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.1.0",
+        "semver": "^7.3.5"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14"
+        "node": ">= 12.13.0"
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/@quintype/build/node_modules/postcss-modules-extract-imports": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/@quintype/build/node_modules/postcss-modules-local-by-default": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz",
+      "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/@quintype/build/node_modules/postcss-modules-scope": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
+      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/@quintype/build/node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
     "node_modules/@quintype/build/node_modules/schema-utils": {
@@ -5221,13 +5284,19 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/@quintype/build/node_modules/source-map-js": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz",
-      "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==",
+    "node_modules/@quintype/build/node_modules/semver": {
+      "version": "7.5.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz",
+      "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==",
       "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=10"
       }
     },
     "node_modules/@quintype/build/node_modules/watchpack": {
@@ -5651,7 +5720,6 @@
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.2.0.tgz",
       "integrity": "sha512-74hbvsnc+7TEDa1z5YLSe4/q8hGYB3USNvCuzHUJrjPV6hXaq8IXcngCrHkuvFt0+8rFz7xYXrHgNayIX0UZvQ==",
-      "dev": true,
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -5661,7 +5729,6 @@
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.1.tgz",
       "integrity": "sha512-SCFeogqiptms4Fg29WpOTk5nHIzfpKCemSN63ksBQYKTcXoJEmJagV+DhVmbapZzY4/5YaOV1nZwrsU79fFm1g==",
-      "dev": true,
       "dependencies": {
         "@types/eslint": "*",
         "@types/estree": "*"
@@ -5670,8 +5737,7 @@
     "node_modules/@types/estree": {
       "version": "0.0.50",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz",
-      "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
-      "dev": true
+      "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw=="
     },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.5",
@@ -5727,8 +5793,7 @@
     "node_modules/@types/json-schema": {
       "version": "7.0.9",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
-      "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
-      "dev": true
+      "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ=="
     },
     "node_modules/@types/json5": {
       "version": "0.0.29",
@@ -5977,7 +6042,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
       "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.11.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
@@ -5986,20 +6050,17 @@
     "node_modules/@webassemblyjs/floating-point-hex-parser": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz",
-      "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==",
-      "dev": true
+      "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ=="
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz",
-      "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==",
-      "dev": true
+      "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg=="
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz",
-      "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==",
-      "dev": true
+      "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA=="
     },
     "node_modules/@webassemblyjs/helper-code-frame": {
       "version": "1.9.0",
@@ -6074,7 +6135,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz",
       "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.11.1",
         "@webassemblyjs/helper-api-error": "1.11.1",
@@ -6084,14 +6144,12 @@
     "node_modules/@webassemblyjs/helper-wasm-bytecode": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz",
-      "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==",
-      "dev": true
+      "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q=="
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz",
       "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -6103,7 +6161,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz",
       "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==",
-      "dev": true,
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
       }
@@ -6112,7 +6169,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz",
       "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==",
-      "dev": true,
       "dependencies": {
         "@xtuc/long": "4.2.2"
       }
@@ -6120,14 +6176,12 @@
     "node_modules/@webassemblyjs/utf8": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz",
-      "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==",
-      "dev": true
+      "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ=="
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz",
       "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -6143,7 +6197,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz",
       "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
@@ -6156,7 +6209,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz",
       "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -6168,7 +6220,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz",
       "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-api-error": "1.11.1",
@@ -6225,7 +6276,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz",
       "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==",
-      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@xtuc/long": "4.2.2"
@@ -6270,14 +6320,12 @@
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "dev": true
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "dev": true
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
     "node_modules/abab": {
       "version": "2.0.5",
@@ -6317,7 +6365,6 @@
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.6.0.tgz",
       "integrity": "sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw==",
-      "dev": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6360,7 +6407,6 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "dev": true,
       "peerDependencies": {
         "acorn": "^8"
       }
@@ -8805,7 +8851,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
       "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
-      "dev": true,
       "engines": {
         "node": ">=6.0"
       }
@@ -9792,19 +9837,18 @@
       }
     },
     "node_modules/css-loader": {
-      "version": "6.5.1",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.5.1.tgz",
-      "integrity": "sha512-gEy2w9AnJNnD9Kuo4XAP9VflW/ujKoS9c/syO+uWMlm5igc7LysKzPXaDoR2vroROkSwsTS2tGr1yGGEbZOYZQ==",
-      "dev": true,
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz",
+      "integrity": "sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==",
       "dependencies": {
         "icss-utils": "^5.1.0",
-        "postcss": "^8.2.15",
+        "postcss": "^8.4.21",
         "postcss-modules-extract-imports": "^3.0.0",
-        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-local-by-default": "^4.0.3",
         "postcss-modules-scope": "^3.0.0",
         "postcss-modules-values": "^4.0.0",
-        "postcss-value-parser": "^4.1.0",
-        "semver": "^7.3.5"
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.3.8"
       },
       "engines": {
         "node": ">= 12.13.0"
@@ -9821,7 +9865,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
       "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true,
       "engines": {
         "node": "^10 || ^12 || >= 14"
       },
@@ -9830,10 +9873,9 @@
       }
     },
     "node_modules/css-loader/node_modules/postcss-modules-local-by-default": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
-      "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
-      "dev": true,
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz",
+      "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==",
       "dependencies": {
         "icss-utils": "^5.0.0",
         "postcss-selector-parser": "^6.0.2",
@@ -9850,7 +9892,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
       "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
-      "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.4"
       },
@@ -9865,7 +9906,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
       "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
-      "dev": true,
       "dependencies": {
         "icss-utils": "^5.0.0"
       },
@@ -9877,10 +9917,9 @@
       }
     },
     "node_modules/css-loader/node_modules/semver": {
-      "version": "7.3.5",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-      "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-      "dev": true,
+      "version": "7.5.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz",
+      "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==",
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -11198,7 +11237,6 @@
       "version": "5.8.3",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.3.tgz",
       "integrity": "sha512-EGAbGvH7j7Xt2nc0E7D99La1OiEs8LnyimkRgwExpUMScN6O+3x9tIWs7PLQZVNx4YD+00skHXPXi1yQHpAmZA==",
-      "dev": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -11341,8 +11379,7 @@
     "node_modules/es-module-lexer": {
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
-      "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
-      "dev": true
+      "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ=="
     },
     "node_modules/es-to-primitive": {
       "version": "1.2.1",
@@ -12100,7 +12137,6 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dev": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -12515,7 +12551,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "dev": true,
       "dependencies": {
         "estraverse": "^5.2.0"
       },
@@ -12527,7 +12562,6 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -12536,7 +12570,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -12583,7 +12616,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.x"
       }
@@ -13921,8 +13953,7 @@
     "node_modules/glob-to-regexp": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "dev": true
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
     },
     "node_modules/global-dirs": {
       "version": "2.1.0",
@@ -14047,8 +14078,7 @@
     "node_modules/graceful-fs": {
       "version": "4.2.6",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
-      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
-      "dev": true
+      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ=="
     },
     "node_modules/grpc": {
       "version": "1.24.11",
@@ -14769,7 +14799,6 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true,
       "engines": {
         "node": "^10 || ^12 || >= 14"
       },
@@ -17894,7 +17923,6 @@
       "version": "27.3.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.3.1.tgz",
       "integrity": "sha512-ks3WCzsiZaOPJl/oMsDjaf0TRiSv7ctNgs0FqRr2nARsovz6AWWy4oLElwcquGSz692DzgZQrCLScPNs5YlC4g==",
-      "dev": true,
       "dependencies": {
         "@types/node": "*",
         "merge-stream": "^2.0.0",
@@ -17908,7 +17936,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -17917,7 +17944,6 @@
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -18213,8 +18239,7 @@
     "node_modules/json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
-      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
-      "dev": true
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
     },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
@@ -19072,7 +19097,6 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
       "integrity": "sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==",
-      "dev": true,
       "engines": {
         "node": ">=6.11.5"
       }
@@ -19216,6 +19240,11 @@
       "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=",
       "dev": true
     },
+    "node_modules/lodash.kebabcase": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
+      "integrity": "sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g=="
+    },
     "node_modules/lodash.keys": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
@@ -19769,8 +19798,7 @@
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
     },
     "node_modules/merge2": {
       "version": "1.4.1",
@@ -20225,9 +20253,15 @@
       "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ=="
     },
     "node_modules/nanoid": {
-      "version": "3.1.30",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
-      "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -20279,8 +20313,7 @@
     "node_modules/neo-async": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
     "node_modules/next-tick": {
       "version": "1.0.0",
@@ -22105,20 +22138,30 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.3.11",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.11.tgz",
-      "integrity": "sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==",
+      "version": "8.4.24",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
+      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "dependencies": {
-        "nanoid": "^3.1.30",
+        "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
-        "source-map-js": "^0.6.2"
+        "source-map-js": "^1.0.2"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-advanced-variables": {
@@ -24548,7 +24591,6 @@
       "version": "6.0.6",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
       "integrity": "sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==",
-      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -27388,9 +27430,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
-      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -29251,7 +29293,6 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
       "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -29364,7 +29405,6 @@
       "version": "5.2.5",
       "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.2.5.tgz",
       "integrity": "sha512-3luOVHku5l0QBeYS8r4CdHYWEGMmIj3H1U64jgkdZzECcSOJAyJ9TjuqcQZvw1Y+4AOBN9SeYJPJmFn2cM4/2g==",
-      "dev": true,
       "dependencies": {
         "jest-worker": "^27.0.6",
         "schema-utils": "^3.1.1",
@@ -29398,7 +29438,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
       "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-      "dev": true,
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -29416,7 +29455,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -29425,7 +29463,6 @@
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dev": true,
       "dependencies": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
@@ -29435,7 +29472,6 @@
       "version": "5.10.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.10.0.tgz",
       "integrity": "sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==",
-      "dev": true,
       "dependencies": {
         "commander": "^2.20.0",
         "source-map": "~0.7.2",
@@ -29460,7 +29496,6 @@
       "version": "0.7.3",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
       "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -30777,7 +30812,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.2.0.tgz",
       "integrity": "sha512-up4YAn/XHgZHIxFBVCdlMiWDj6WaLKpwVeGQk2I5thdYxF/KmF0aaz6TfJZ/hfl1h/XlcDr7k1KH7ThDagpFaA==",
-      "dev": true,
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
@@ -31102,7 +31136,6 @@
       "version": "5.64.2",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.64.2.tgz",
       "integrity": "sha512-4KGc0+Ozi0aS3EaLNRvEppfZUer+CaORKqL6OBjDLZOPf9YfN8leagFzwe6/PoBdHFxc/utKArl8LMC0Ivtmdg==",
-      "dev": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.0",
         "@types/estree": "^0.0.50",
@@ -32293,7 +32326,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
       "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-      "dev": true,
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -32311,7 +32343,6 @@
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.2.tgz",
       "integrity": "sha512-cp5qdmHnu5T8wRg2G3vZZHoJPN14aqQ89SyQ11NpGH5zEMDCclt49rzo+MaRazk7/UeILhAI+/sEtcM+7Fr0nw==",
-      "dev": true,
       "engines": {
         "node": ">=10.13.0"
       }
@@ -36654,21 +36685,56 @@
             "lodash": "^4.17.15"
           }
         },
-        "picocolors": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-          "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-          "dev": true
+        "css-loader": {
+          "version": "6.5.1",
+          "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.5.1.tgz",
+          "integrity": "sha512-gEy2w9AnJNnD9Kuo4XAP9VflW/ujKoS9c/syO+uWMlm5igc7LysKzPXaDoR2vroROkSwsTS2tGr1yGGEbZOYZQ==",
+          "dev": true,
+          "requires": {
+            "icss-utils": "^5.1.0",
+            "postcss": "^8.2.15",
+            "postcss-modules-extract-imports": "^3.0.0",
+            "postcss-modules-local-by-default": "^4.0.0",
+            "postcss-modules-scope": "^3.0.0",
+            "postcss-modules-values": "^4.0.0",
+            "postcss-value-parser": "^4.1.0",
+            "semver": "^7.3.5"
+          }
         },
-        "postcss": {
-          "version": "8.4.4",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.4.tgz",
-          "integrity": "sha512-joU6fBsN6EIer28Lj6GDFoC/5yOZzLCfn0zHAn/MYXI7aPt4m4hK5KC5ovEZXy+lnCjmYIbQWngvju2ddyEr8Q==",
+        "postcss-modules-extract-imports": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+          "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+          "dev": true,
+          "requires": {}
+        },
+        "postcss-modules-local-by-default": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz",
+          "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==",
+          "dev": true,
+          "requires": {
+            "icss-utils": "^5.0.0",
+            "postcss-selector-parser": "^6.0.2",
+            "postcss-value-parser": "^4.1.0"
+          }
+        },
+        "postcss-modules-scope": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
+          "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
           "dev": true,
           "requires": {
-            "nanoid": "^3.1.30",
-            "picocolors": "^1.0.0",
-            "source-map-js": "^1.0.1"
+            "postcss-selector-parser": "^6.0.4"
+          }
+        },
+        "postcss-modules-values": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+          "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+          "dev": true,
+          "requires": {
+            "icss-utils": "^5.0.0"
           }
         },
         "schema-utils": {
@@ -36682,11 +36748,14 @@
             "ajv-keywords": "^3.5.2"
           }
         },
-        "source-map-js": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz",
-          "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==",
-          "dev": true
+        "semver": {
+          "version": "7.5.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz",
+          "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
         },
         "watchpack": {
           "version": "2.3.0",
@@ -37036,7 +37105,6 @@
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.2.0.tgz",
       "integrity": "sha512-74hbvsnc+7TEDa1z5YLSe4/q8hGYB3USNvCuzHUJrjPV6hXaq8IXcngCrHkuvFt0+8rFz7xYXrHgNayIX0UZvQ==",
-      "dev": true,
       "requires": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -37046,7 +37114,6 @@
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.1.tgz",
       "integrity": "sha512-SCFeogqiptms4Fg29WpOTk5nHIzfpKCemSN63ksBQYKTcXoJEmJagV+DhVmbapZzY4/5YaOV1nZwrsU79fFm1g==",
-      "dev": true,
       "requires": {
         "@types/eslint": "*",
         "@types/estree": "*"
@@ -37055,8 +37122,7 @@
     "@types/estree": {
       "version": "0.0.50",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz",
-      "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
-      "dev": true
+      "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw=="
     },
     "@types/graceful-fs": {
       "version": "4.1.5",
@@ -37112,8 +37178,7 @@
     "@types/json-schema": {
       "version": "7.0.9",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
-      "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
-      "dev": true
+      "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ=="
     },
     "@types/json5": {
       "version": "0.0.29",
@@ -37306,7 +37371,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
       "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==",
-      "dev": true,
       "requires": {
         "@webassemblyjs/helper-numbers": "1.11.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
@@ -37315,20 +37379,17 @@
     "@webassemblyjs/floating-point-hex-parser": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz",
-      "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==",
-      "dev": true
+      "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ=="
     },
     "@webassemblyjs/helper-api-error": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz",
-      "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==",
-      "dev": true
+      "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg=="
     },
     "@webassemblyjs/helper-buffer": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz",
-      "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==",
-      "dev": true
+      "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA=="
     },
     "@webassemblyjs/helper-code-frame": {
       "version": "1.9.0",
@@ -37407,7 +37468,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz",
       "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==",
-      "dev": true,
       "requires": {
         "@webassemblyjs/floating-point-hex-parser": "1.11.1",
         "@webassemblyjs/helper-api-error": "1.11.1",
@@ -37417,14 +37477,12 @@
     "@webassemblyjs/helper-wasm-bytecode": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz",
-      "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==",
-      "dev": true
+      "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q=="
     },
     "@webassemblyjs/helper-wasm-section": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz",
       "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==",
-      "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -37436,7 +37494,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz",
       "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==",
-      "dev": true,
       "requires": {
         "@xtuc/ieee754": "^1.2.0"
       }
@@ -37445,7 +37502,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz",
       "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==",
-      "dev": true,
       "requires": {
         "@xtuc/long": "4.2.2"
       }
@@ -37453,14 +37509,12 @@
     "@webassemblyjs/utf8": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz",
-      "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==",
-      "dev": true
+      "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ=="
     },
     "@webassemblyjs/wasm-edit": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz",
       "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==",
-      "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -37476,7 +37530,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz",
       "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==",
-      "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
@@ -37489,7 +37542,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz",
       "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==",
-      "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -37501,7 +37553,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz",
       "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==",
-      "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-api-error": "1.11.1",
@@ -37560,7 +37611,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz",
       "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==",
-      "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@xtuc/long": "4.2.2"
@@ -37592,14 +37642,12 @@
     "@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "dev": true
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
     },
     "@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "dev": true
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
     "abab": {
       "version": "2.0.5",
@@ -37632,8 +37680,7 @@
     "acorn": {
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.6.0.tgz",
-      "integrity": "sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw==",
-      "dev": true
+      "integrity": "sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw=="
     },
     "acorn-globals": {
       "version": "6.0.0",
@@ -37663,7 +37710,6 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "dev": true,
       "requires": {}
     },
     "acorn-jsx": {
@@ -39610,8 +39656,7 @@
     "chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
-      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
-      "dev": true
+      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg=="
     },
     "ci-info": {
       "version": "2.0.0",
@@ -40425,33 +40470,30 @@
       }
     },
     "css-loader": {
-      "version": "6.5.1",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.5.1.tgz",
-      "integrity": "sha512-gEy2w9AnJNnD9Kuo4XAP9VflW/ujKoS9c/syO+uWMlm5igc7LysKzPXaDoR2vroROkSwsTS2tGr1yGGEbZOYZQ==",
-      "dev": true,
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz",
+      "integrity": "sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==",
       "requires": {
         "icss-utils": "^5.1.0",
-        "postcss": "^8.2.15",
+        "postcss": "^8.4.21",
         "postcss-modules-extract-imports": "^3.0.0",
-        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-local-by-default": "^4.0.3",
         "postcss-modules-scope": "^3.0.0",
         "postcss-modules-values": "^4.0.0",
-        "postcss-value-parser": "^4.1.0",
-        "semver": "^7.3.5"
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.3.8"
       },
       "dependencies": {
         "postcss-modules-extract-imports": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
           "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-          "dev": true,
           "requires": {}
         },
         "postcss-modules-local-by-default": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
-          "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
-          "dev": true,
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz",
+          "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==",
           "requires": {
             "icss-utils": "^5.0.0",
             "postcss-selector-parser": "^6.0.2",
@@ -40462,7 +40504,6 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
           "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
-          "dev": true,
           "requires": {
             "postcss-selector-parser": "^6.0.4"
           }
@@ -40471,16 +40512,14 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
           "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
-          "dev": true,
           "requires": {
             "icss-utils": "^5.0.0"
           }
         },
         "semver": {
-          "version": "7.3.5",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-          "dev": true,
+          "version": "7.5.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz",
+          "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==",
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -41531,7 +41570,6 @@
       "version": "5.8.3",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.3.tgz",
       "integrity": "sha512-EGAbGvH7j7Xt2nc0E7D99La1OiEs8LnyimkRgwExpUMScN6O+3x9tIWs7PLQZVNx4YD+00skHXPXi1yQHpAmZA==",
-      "dev": true,
       "requires": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -41640,8 +41678,7 @@
     "es-module-lexer": {
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
-      "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
-      "dev": true
+      "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ=="
     },
     "es-to-primitive": {
       "version": "1.2.1",
@@ -42407,7 +42444,6 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dev": true,
       "requires": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -42482,7 +42518,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "dev": true,
       "requires": {
         "estraverse": "^5.2.0"
       },
@@ -42490,16 +42525,14 @@
         "estraverse": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-          "dev": true
+          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="
         }
       }
     },
     "estraverse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
     },
     "esutils": {
       "version": "2.0.3",
@@ -42533,8 +42566,7 @@
     "events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-      "dev": true
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
     },
     "evp_bytestokey": {
       "version": "1.0.3",
@@ -43643,8 +43675,7 @@
     "glob-to-regexp": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "dev": true
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
     },
     "global-dirs": {
       "version": "2.1.0",
@@ -43741,8 +43772,7 @@
     "graceful-fs": {
       "version": "4.2.6",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
-      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
-      "dev": true
+      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ=="
     },
     "grpc": {
       "version": "1.24.11",
@@ -44308,7 +44338,6 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true,
       "requires": {}
     },
     "idb": {
@@ -46671,7 +46700,6 @@
       "version": "27.3.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.3.1.tgz",
       "integrity": "sha512-ks3WCzsiZaOPJl/oMsDjaf0TRiSv7ctNgs0FqRr2nARsovz6AWWy4oLElwcquGSz692DzgZQrCLScPNs5YlC4g==",
-      "dev": true,
       "requires": {
         "@types/node": "*",
         "merge-stream": "^2.0.0",
@@ -46681,14 +46709,12 @@
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
         "supports-color": {
           "version": "8.1.1",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
           "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-          "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
           }
@@ -46840,8 +46866,7 @@
     "json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
-      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
-      "dev": true
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
     },
     "json-parse-even-better-errors": {
       "version": "2.3.1",
@@ -47507,8 +47532,7 @@
     "loader-runner": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
-      "integrity": "sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==",
-      "dev": true
+      "integrity": "sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw=="
     },
     "loader-utils": {
       "version": "1.4.0",
@@ -47639,6 +47663,11 @@
       "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=",
       "dev": true
     },
+    "lodash.kebabcase": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
+      "integrity": "sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g=="
+    },
     "lodash.keys": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
@@ -48082,8 +48111,7 @@
     "merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
     },
     "merge2": {
       "version": "1.4.1",
@@ -48437,9 +48465,9 @@
       "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ=="
     },
     "nanoid": {
-      "version": "3.1.30",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
-      "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ=="
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA=="
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -48479,8 +48507,7 @@
     "neo-async": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
     "next-tick": {
       "version": "1.0.0",
@@ -49920,13 +49947,13 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.3.11",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.11.tgz",
-      "integrity": "sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==",
+      "version": "8.4.24",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
+      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
       "requires": {
-        "nanoid": "^3.1.30",
+        "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
-        "source-map-js": "^0.6.2"
+        "source-map-js": "^1.0.2"
       },
       "dependencies": {
         "picocolors": {
@@ -51705,7 +51732,6 @@
       "version": "6.0.6",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
       "integrity": "sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==",
-      "dev": true,
       "requires": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -53978,9 +54004,9 @@
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
     },
     "source-map-js": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
-      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug=="
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
     "source-map-resolve": {
       "version": "0.5.3",
@@ -55475,8 +55501,7 @@
     "tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
-      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
-      "dev": true
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="
     },
     "tar": {
       "version": "6.1.11",
@@ -55574,7 +55599,6 @@
       "version": "5.2.5",
       "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.2.5.tgz",
       "integrity": "sha512-3luOVHku5l0QBeYS8r4CdHYWEGMmIj3H1U64jgkdZzECcSOJAyJ9TjuqcQZvw1Y+4AOBN9SeYJPJmFn2cM4/2g==",
-      "dev": true,
       "requires": {
         "jest-worker": "^27.0.6",
         "schema-utils": "^3.1.1",
@@ -55587,7 +55611,6 @@
           "version": "3.1.1",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
           "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-          "dev": true,
           "requires": {
             "@types/json-schema": "^7.0.8",
             "ajv": "^6.12.5",
@@ -55597,14 +55620,12 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "source-map-support": {
           "version": "0.5.21",
           "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
           "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-          "dev": true,
           "requires": {
             "buffer-from": "^1.0.0",
             "source-map": "^0.6.0"
@@ -55614,7 +55635,6 @@
           "version": "5.10.0",
           "resolved": "https://registry.npmjs.org/terser/-/terser-5.10.0.tgz",
           "integrity": "sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==",
-          "dev": true,
           "requires": {
             "commander": "^2.20.0",
             "source-map": "~0.7.2",
@@ -55624,8 +55644,7 @@
             "source-map": {
               "version": "0.7.3",
               "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-              "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-              "dev": true
+              "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
             }
           }
         }
@@ -56692,7 +56711,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.2.0.tgz",
       "integrity": "sha512-up4YAn/XHgZHIxFBVCdlMiWDj6WaLKpwVeGQk2I5thdYxF/KmF0aaz6TfJZ/hfl1h/XlcDr7k1KH7ThDagpFaA==",
-      "dev": true,
       "requires": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
@@ -56973,7 +56991,6 @@
       "version": "5.64.2",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.64.2.tgz",
       "integrity": "sha512-4KGc0+Ozi0aS3EaLNRvEppfZUer+CaORKqL6OBjDLZOPf9YfN8leagFzwe6/PoBdHFxc/utKArl8LMC0Ivtmdg==",
-      "dev": true,
       "requires": {
         "@types/eslint-scope": "^3.7.0",
         "@types/estree": "^0.0.50",
@@ -57005,7 +57022,6 @@
           "version": "3.1.1",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
           "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-          "dev": true,
           "requires": {
             "@types/json-schema": "^7.0.8",
             "ajv": "^6.12.5",
@@ -57015,8 +57031,7 @@
         "webpack-sources": {
           "version": "3.2.2",
           "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.2.tgz",
-          "integrity": "sha512-cp5qdmHnu5T8wRg2G3vZZHoJPN14aqQ89SyQ11NpGH5zEMDCclt49rzo+MaRazk7/UeILhAI+/sEtcM+7Fr0nw==",
-          "dev": true
+          "integrity": "sha512-cp5qdmHnu5T8wRg2G3vZZHoJPN14aqQ89SyQ11NpGH5zEMDCclt49rzo+MaRazk7/UeILhAI+/sEtcM+7Fr0nw=="
         }
       }
     },
diff --git a/package.json b/package.json
index a04771ebf..d57183f1e 100644
--- a/package.json
+++ b/package.json
@@ -18,9 +18,11 @@
     "@quintype/framework": "^7.7.7",
     "@quintype/seo": "^1.42.1",
     "axios": "^0.24.0",
+    "css-loader": "^6.8.1",
     "fontfaceobserver": "^2.1.0",
     "intersection-observer": "^0.12.2",
     "lodash": "^4.17.21",
+    "lodash.kebabcase": "^4.1.1",
     "query-string": "^7.0.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
@@ -97,7 +99,8 @@
     "lint:css": "npx stylelint './app/**/*.{scss,css}'",
     "lint:css:ci": "npx stylelint $(git diff --pretty='' --diff-filter=d --name-only origin/master...HEAD -- '*.css' '*.scss') ./app/assets/stylesheets/app.scss",
     "lint:ci": "npm run lint:js:ci && npm run lint:css:ci",
-    "check-node-npm": "check-node-version --node '>= 12.13.0' --npm '^6.14.0'"
+    "check-node-npm": "check-node-version --node '>= 12.13.0' --npm '^6.14.0'",
+    "copy-arrow": "cp -r /Users/shraddhakesari_1/workspace/quintype-node-arrow/src/* /Users/shraddhakesari_1/workspace/malibu-advanced/app/isomorphic/arrow && echo 'Files copied successfully!'"
   },
   "husky": {
     "hooks": {
diff --git a/run b/run
index 930cb0a23..349acb711 100755
--- a/run
+++ b/run
@@ -1,6 +1,7 @@
 #!/bin/bash -e
 
 npm install
+npm run copy-arrow
 npm run compile
 supervisord -n -c <(cat <<EOF
 [supervisord]

From 575223ec3772482f527b523ad3f1c7d498491703 Mon Sep 17 00:00:00 2001
From: Shraddha Kesari <shraddha@quintype.com>
Date: Tue, 20 Jun 2023 20:36:33 +0530
Subject: [PATCH 2/8] Add comment

---
 run | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/run b/run
index 349acb711..d408324b7 100755
--- a/run
+++ b/run
@@ -2,6 +2,9 @@
 
 npm install
 npm run copy-arrow
+
+# Do not overwrite these two files - line 1 in fullscreenimages.scss, line 23 to 26 in author-image.css and line 1 in author.m.css
+
 npm run compile
 supervisord -n -c <(cat <<EOF
 [supervisord]

From cc2142cb8fbf39efc73fe3ba0060f2847b1158bb Mon Sep 17 00:00:00 2001
From: Shraddha Kesari <shraddha@quintype.com>
Date: Wed, 21 Jun 2023 02:24:11 +0530
Subject: [PATCH 3/8] Remove lint from config file

---
 .circleci/config.yml | 20 --------------------
 1 file changed, 20 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index d25bf73ff..6e1f939ed 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -39,21 +39,6 @@ jobs:
     environment:
       BK_ENVIRONMENT: production 231
 
-  lint_js:
-    docker:
-      - image: circleci/node:12.13.0
-    steps:
-      - checkout
-      - run: npm install
-      - run: npm run lint:js:ci
-  lint_css:
-    docker:
-      - image: circleci/node:12.13.0
-    steps:
-      - checkout
-      - run: npm install
-      - run: npm run lint:css:ci
-
   stg_lighthouse_task:
     docker:
       - image: circleci/node:12.13.0-browsers
@@ -80,11 +65,6 @@ jobs:
           npx @lhci/cli@0.6.x autorun
 workflows:
   version: 2
-  build_and_test:
-    jobs:
-      - lint_js
-      - lint_css
-
   stg_lighthouse_test:
     jobs:
       - build:

From 8b2fa05f54456de03cdba77e004968bf38d26b4d Mon Sep 17 00:00:00 2001
From: Shraddha Kesari <shraddha@quintype.com>
Date: Tue, 27 Jun 2023 16:00:17 +0530
Subject: [PATCH 4/8] Change the format of the script

---
 .eslintignore                                 |   1 +
 .prettierignore                               |   1 +
 .../components/Atoms/Author/author.m.css      |   2 +-
 .../Atoms/AuthorImage/author-image.m.css      |   4 +
 .../Rows/AuthorIntroductionCard/index.js      |  15 +-
 .../Rows/FourTabbedBigStorySlider/index.js    |   5 +-
 copy-arrow.sh                                 |  19 ++
 package-lock.json                             | 202 ++++++++++++++----
 package.json                                  |   4 +-
 run                                           |   4 +-
 10 files changed, 199 insertions(+), 58 deletions(-)
 create mode 100644 .eslintignore
 create mode 100644 .prettierignore
 create mode 100755 copy-arrow.sh

diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 000000000..5874bbbb5
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1 @@
+/app/isomorphic/arrow
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..5874bbbb5
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+/app/isomorphic/arrow
diff --git a/app/isomorphic/arrow/components/Atoms/Author/author.m.css b/app/isomorphic/arrow/components/Atoms/Author/author.m.css
index 8ce646b1e..c8a9f3a11 100644
--- a/app/isomorphic/arrow/components/Atoms/Author/author.m.css
+++ b/app/isomorphic/arrow/components/Atoms/Author/author.m.css
@@ -1,4 +1,4 @@
-@custom-media --viewport-medium (width >= 768px);
+@custom-media --viewport-medium (width >=768px);
 
 .author {
   display: flex;
diff --git a/app/isomorphic/arrow/components/Atoms/AuthorImage/author-image.m.css b/app/isomorphic/arrow/components/Atoms/AuthorImage/author-image.m.css
index 4b31fa963..626b2ad32 100644
--- a/app/isomorphic/arrow/components/Atoms/AuthorImage/author-image.m.css
+++ b/app/isomorphic/arrow/components/Atoms/AuthorImage/author-image.m.css
@@ -20,6 +20,10 @@
     position: relative;
     width: 224px;
     height: 224px;
+    @media (min-width: tablet) {
+      width: 364px;
+      height: 364px;
+    }
   }
 }
 
diff --git a/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/index.js b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/index.js
index ec00ff902..850be2d41 100644
--- a/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/index.js
+++ b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/index.js
@@ -47,8 +47,7 @@ const AuthorIntroductionCard = ({ data = {}, config = {}, template = "" }) => {
       data-test-id="author-intro"
       className={`${isFullWidth} arrow-component arr--author-intro-card`}
       styleName={`${authorCardStyle} ${supportBorder} ${textColor}`}
-      style={{ backgroundColor: theme || "initial" }}
-    >
+      style={{ backgroundColor: theme || "initial" }}>
       <div styleName={`wrapper ${textColor}`} className="arrow-author-intro-wrapper">
         <div styleName="introduction-card" className="arrow-author-introduction-card">
           {isSmallCircle && isMobile ? null : <h1 styleName={`author-name ${textColor}`}>{name}</h1>}
@@ -59,9 +58,8 @@ const AuthorIntroductionCard = ({ data = {}, config = {}, template = "" }) => {
                 <div
                   styleName="fade-out"
                   style={{
-                    backgroundImage: `linear-gradient(to right, transparent, ${theme})` || "initial",
-                  }}
-                ></div>
+                    backgroundImage: `linear-gradient(to right, transparent, ${theme})` || "initial"
+                  }}></div>
               )}
             </div>
           )}
@@ -80,8 +78,7 @@ const AuthorIntroductionCard = ({ data = {}, config = {}, template = "" }) => {
                           key={`${item}-${index}`}
                           rel="noopener noreferrer"
                           target="_blank"
-                          styleName="social-share"
-                        >
+                          styleName="social-share">
                           {getIcon(item[0])}
                         </a>
                       ) : null
@@ -116,8 +113,8 @@ AuthorIntroductionCard.propTypes = {
     theme: PropTypes.string,
     enableBio: PropTypes.bool,
     enableSocialLinks: PropTypes.bool,
-    borderSupport: PropTypes.bool,
+    borderSupport: PropTypes.bool
   }),
-  template: PropTypes.string,
+  template: PropTypes.string
 };
 export default AuthorIntroductionCard;
diff --git a/app/isomorphic/arrow/components/Rows/FourTabbedBigStorySlider/index.js b/app/isomorphic/arrow/components/Rows/FourTabbedBigStorySlider/index.js
index 64a6e335a..33ee3bcd1 100644
--- a/app/isomorphic/arrow/components/Rows/FourTabbedBigStorySlider/index.js
+++ b/app/isomorphic/arrow/components/Rows/FourTabbedBigStorySlider/index.js
@@ -114,7 +114,7 @@ export const FourTabbedBigStorySlider = ({ collection, config = {} }) => {
   );
 };
 
-const DefaultStoryCardContent = ({ story, config = {}, borderColor, showSubheadline }) => {
+const DefaultStoryCardContentBase = ({ story, config = {}, borderColor, showSubheadline }) => {
   const SectionTagBorderColor = rgbToHex(borderColor);
   const { localizationConfig = {} } = config;
   return (
@@ -135,6 +135,7 @@ const DefaultStoryCardContent = ({ story, config = {}, borderColor, showSubheadl
 };
 
 export default StateProvider(FourTabbedBigStorySlider);
+const DefaultStoryCardContent = StateProvider(DefaultStoryCardContentBase);
 
 FourTabbedBigStorySlider.propTypes = {
   /**  collection is the array of objects which is returning by API  */
@@ -150,7 +151,7 @@ FourTabbedBigStorySlider.propTypes = {
   })
 };
 
-DefaultStoryCardContent.propTypes = {
+DefaultStoryCardContentBase.propTypes = {
   story: PropTypes.object.isRequired,
   config: PropTypes.object,
   borderColor: PropTypes.string,
diff --git a/copy-arrow.sh b/copy-arrow.sh
new file mode 100755
index 000000000..09f099534
--- /dev/null
+++ b/copy-arrow.sh
@@ -0,0 +1,19 @@
+#!/bin/bash
+
+# Clone the source repository
+git clone --branch master --single-branch https://github.com/quintype/quintype-node-arrow.git temp_repo
+
+# Go to the cloned repository
+cd temp_repo
+
+# Create the target directory if it doesn't exist
+mkdir -p ../app/isomorphic/arrow
+
+# Copy the files to the target directory
+cp -r src/* ../app/isomorphic/arrow/
+
+echo "Files copied successfully!"
+
+# Clean up by removing the temporary directory
+cd ..
+rm -rf temp_repo
diff --git a/package-lock.json b/package-lock.json
index 013aa9e83..a649d34fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,6 @@
         "@quintype/framework": "^7.7.7",
         "@quintype/seo": "^1.42.1",
         "axios": "^0.24.0",
-        "css-loader": "^6.8.1",
         "fontfaceobserver": "^2.1.0",
         "intersection-observer": "^0.12.2",
         "lodash": "^4.17.21",
@@ -40,6 +39,7 @@
         "babel-eslint": "^10.0.3",
         "check-node-version": "^4.1.0",
         "cosmiconfig": "^7.0.0",
+        "css-loader": "^6.8.1",
         "eslint": "^8.1.0",
         "eslint-config-prettier": "^8.3.0",
         "eslint-config-standard": "^16.0.3",
@@ -5720,6 +5720,7 @@
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.2.0.tgz",
       "integrity": "sha512-74hbvsnc+7TEDa1z5YLSe4/q8hGYB3USNvCuzHUJrjPV6hXaq8IXcngCrHkuvFt0+8rFz7xYXrHgNayIX0UZvQ==",
+      "dev": true,
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -5729,6 +5730,7 @@
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.1.tgz",
       "integrity": "sha512-SCFeogqiptms4Fg29WpOTk5nHIzfpKCemSN63ksBQYKTcXoJEmJagV+DhVmbapZzY4/5YaOV1nZwrsU79fFm1g==",
+      "dev": true,
       "dependencies": {
         "@types/eslint": "*",
         "@types/estree": "*"
@@ -5737,7 +5739,8 @@
     "node_modules/@types/estree": {
       "version": "0.0.50",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz",
-      "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw=="
+      "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
+      "dev": true
     },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.5",
@@ -5793,7 +5796,8 @@
     "node_modules/@types/json-schema": {
       "version": "7.0.9",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
-      "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ=="
+      "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
+      "dev": true
     },
     "node_modules/@types/json5": {
       "version": "0.0.29",
@@ -6042,6 +6046,7 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
       "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==",
+      "dev": true,
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.11.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
@@ -6050,17 +6055,20 @@
     "node_modules/@webassemblyjs/floating-point-hex-parser": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz",
-      "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ=="
+      "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==",
+      "dev": true
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz",
-      "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg=="
+      "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==",
+      "dev": true
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz",
-      "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA=="
+      "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==",
+      "dev": true
     },
     "node_modules/@webassemblyjs/helper-code-frame": {
       "version": "1.9.0",
@@ -6135,6 +6143,7 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz",
       "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==",
+      "dev": true,
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.11.1",
         "@webassemblyjs/helper-api-error": "1.11.1",
@@ -6144,12 +6153,14 @@
     "node_modules/@webassemblyjs/helper-wasm-bytecode": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz",
-      "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q=="
+      "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==",
+      "dev": true
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz",
       "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==",
+      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -6161,6 +6172,7 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz",
       "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==",
+      "dev": true,
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
       }
@@ -6169,6 +6181,7 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz",
       "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==",
+      "dev": true,
       "dependencies": {
         "@xtuc/long": "4.2.2"
       }
@@ -6176,12 +6189,14 @@
     "node_modules/@webassemblyjs/utf8": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz",
-      "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ=="
+      "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==",
+      "dev": true
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz",
       "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==",
+      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -6197,6 +6212,7 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz",
       "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==",
+      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
@@ -6209,6 +6225,7 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz",
       "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==",
+      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -6220,6 +6237,7 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz",
       "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==",
+      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-api-error": "1.11.1",
@@ -6276,6 +6294,7 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz",
       "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==",
+      "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@xtuc/long": "4.2.2"
@@ -6320,12 +6339,14 @@
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
+      "dev": true
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
+      "dev": true
     },
     "node_modules/abab": {
       "version": "2.0.5",
@@ -6365,6 +6386,7 @@
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.6.0.tgz",
       "integrity": "sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw==",
+      "dev": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6407,6 +6429,7 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
+      "dev": true,
       "peerDependencies": {
         "acorn": "^8"
       }
@@ -8851,6 +8874,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
       "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
+      "dev": true,
       "engines": {
         "node": ">=6.0"
       }
@@ -9840,6 +9864,7 @@
       "version": "6.8.1",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz",
       "integrity": "sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==",
+      "dev": true,
       "dependencies": {
         "icss-utils": "^5.1.0",
         "postcss": "^8.4.21",
@@ -9865,6 +9890,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
       "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "dev": true,
       "engines": {
         "node": "^10 || ^12 || >= 14"
       },
@@ -9876,6 +9902,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz",
       "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==",
+      "dev": true,
       "dependencies": {
         "icss-utils": "^5.0.0",
         "postcss-selector-parser": "^6.0.2",
@@ -9892,6 +9919,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
       "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+      "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.4"
       },
@@ -9906,6 +9934,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
       "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
       "dependencies": {
         "icss-utils": "^5.0.0"
       },
@@ -9920,6 +9949,7 @@
       "version": "7.5.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz",
       "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==",
+      "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -11237,6 +11267,7 @@
       "version": "5.8.3",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.3.tgz",
       "integrity": "sha512-EGAbGvH7j7Xt2nc0E7D99La1OiEs8LnyimkRgwExpUMScN6O+3x9tIWs7PLQZVNx4YD+00skHXPXi1yQHpAmZA==",
+      "dev": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -11379,7 +11410,8 @@
     "node_modules/es-module-lexer": {
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
-      "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ=="
+      "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
+      "dev": true
     },
     "node_modules/es-to-primitive": {
       "version": "1.2.1",
@@ -12137,6 +12169,7 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -12551,6 +12584,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
       "dependencies": {
         "estraverse": "^5.2.0"
       },
@@ -12562,6 +12596,7 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -12570,6 +12605,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -12616,6 +12652,7 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true,
       "engines": {
         "node": ">=0.8.x"
       }
@@ -13953,7 +13990,8 @@
     "node_modules/glob-to-regexp": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "dev": true
     },
     "node_modules/global-dirs": {
       "version": "2.1.0",
@@ -14078,7 +14116,8 @@
     "node_modules/graceful-fs": {
       "version": "4.2.6",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
-      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ=="
+      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
+      "dev": true
     },
     "node_modules/grpc": {
       "version": "1.24.11",
@@ -14799,6 +14838,7 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "dev": true,
       "engines": {
         "node": "^10 || ^12 || >= 14"
       },
@@ -17923,6 +17963,7 @@
       "version": "27.3.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.3.1.tgz",
       "integrity": "sha512-ks3WCzsiZaOPJl/oMsDjaf0TRiSv7ctNgs0FqRr2nARsovz6AWWy4oLElwcquGSz692DzgZQrCLScPNs5YlC4g==",
+      "dev": true,
       "dependencies": {
         "@types/node": "*",
         "merge-stream": "^2.0.0",
@@ -17936,6 +17977,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -17944,6 +17986,7 @@
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -18239,7 +18282,8 @@
     "node_modules/json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
-      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+      "dev": true
     },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
@@ -19097,6 +19141,7 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
       "integrity": "sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==",
+      "dev": true,
       "engines": {
         "node": ">=6.11.5"
       }
@@ -19798,7 +19843,8 @@
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
     },
     "node_modules/merge2": {
       "version": "1.4.1",
@@ -20313,7 +20359,8 @@
     "node_modules/neo-async": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true
     },
     "node_modules/next-tick": {
       "version": "1.0.0",
@@ -24591,6 +24638,7 @@
       "version": "6.0.6",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
       "integrity": "sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==",
+      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -29293,6 +29341,7 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
       "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -29405,6 +29454,7 @@
       "version": "5.2.5",
       "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.2.5.tgz",
       "integrity": "sha512-3luOVHku5l0QBeYS8r4CdHYWEGMmIj3H1U64jgkdZzECcSOJAyJ9TjuqcQZvw1Y+4AOBN9SeYJPJmFn2cM4/2g==",
+      "dev": true,
       "dependencies": {
         "jest-worker": "^27.0.6",
         "schema-utils": "^3.1.1",
@@ -29438,6 +29488,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
       "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "dev": true,
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -29455,6 +29506,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -29463,6 +29515,7 @@
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
       "dependencies": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
@@ -29472,6 +29525,7 @@
       "version": "5.10.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.10.0.tgz",
       "integrity": "sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==",
+      "dev": true,
       "dependencies": {
         "commander": "^2.20.0",
         "source-map": "~0.7.2",
@@ -29496,6 +29550,7 @@
       "version": "0.7.3",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
       "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -30812,6 +30867,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.2.0.tgz",
       "integrity": "sha512-up4YAn/XHgZHIxFBVCdlMiWDj6WaLKpwVeGQk2I5thdYxF/KmF0aaz6TfJZ/hfl1h/XlcDr7k1KH7ThDagpFaA==",
+      "dev": true,
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
@@ -31136,6 +31192,7 @@
       "version": "5.64.2",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.64.2.tgz",
       "integrity": "sha512-4KGc0+Ozi0aS3EaLNRvEppfZUer+CaORKqL6OBjDLZOPf9YfN8leagFzwe6/PoBdHFxc/utKArl8LMC0Ivtmdg==",
+      "dev": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.0",
         "@types/estree": "^0.0.50",
@@ -32326,6 +32383,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
       "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "dev": true,
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -32343,6 +32401,7 @@
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.2.tgz",
       "integrity": "sha512-cp5qdmHnu5T8wRg2G3vZZHoJPN14aqQ89SyQ11NpGH5zEMDCclt49rzo+MaRazk7/UeILhAI+/sEtcM+7Fr0nw==",
+      "dev": true,
       "engines": {
         "node": ">=10.13.0"
       }
@@ -37105,6 +37164,7 @@
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.2.0.tgz",
       "integrity": "sha512-74hbvsnc+7TEDa1z5YLSe4/q8hGYB3USNvCuzHUJrjPV6hXaq8IXcngCrHkuvFt0+8rFz7xYXrHgNayIX0UZvQ==",
+      "dev": true,
       "requires": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -37114,6 +37174,7 @@
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.1.tgz",
       "integrity": "sha512-SCFeogqiptms4Fg29WpOTk5nHIzfpKCemSN63ksBQYKTcXoJEmJagV+DhVmbapZzY4/5YaOV1nZwrsU79fFm1g==",
+      "dev": true,
       "requires": {
         "@types/eslint": "*",
         "@types/estree": "*"
@@ -37122,7 +37183,8 @@
     "@types/estree": {
       "version": "0.0.50",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz",
-      "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw=="
+      "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
+      "dev": true
     },
     "@types/graceful-fs": {
       "version": "4.1.5",
@@ -37178,7 +37240,8 @@
     "@types/json-schema": {
       "version": "7.0.9",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
-      "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ=="
+      "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
+      "dev": true
     },
     "@types/json5": {
       "version": "0.0.29",
@@ -37371,6 +37434,7 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
       "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==",
+      "dev": true,
       "requires": {
         "@webassemblyjs/helper-numbers": "1.11.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
@@ -37379,17 +37443,20 @@
     "@webassemblyjs/floating-point-hex-parser": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz",
-      "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ=="
+      "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==",
+      "dev": true
     },
     "@webassemblyjs/helper-api-error": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz",
-      "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg=="
+      "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==",
+      "dev": true
     },
     "@webassemblyjs/helper-buffer": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz",
-      "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA=="
+      "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==",
+      "dev": true
     },
     "@webassemblyjs/helper-code-frame": {
       "version": "1.9.0",
@@ -37468,6 +37535,7 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz",
       "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==",
+      "dev": true,
       "requires": {
         "@webassemblyjs/floating-point-hex-parser": "1.11.1",
         "@webassemblyjs/helper-api-error": "1.11.1",
@@ -37477,12 +37545,14 @@
     "@webassemblyjs/helper-wasm-bytecode": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz",
-      "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q=="
+      "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==",
+      "dev": true
     },
     "@webassemblyjs/helper-wasm-section": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz",
       "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==",
+      "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -37494,6 +37564,7 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz",
       "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==",
+      "dev": true,
       "requires": {
         "@xtuc/ieee754": "^1.2.0"
       }
@@ -37502,6 +37573,7 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz",
       "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==",
+      "dev": true,
       "requires": {
         "@xtuc/long": "4.2.2"
       }
@@ -37509,12 +37581,14 @@
     "@webassemblyjs/utf8": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz",
-      "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ=="
+      "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==",
+      "dev": true
     },
     "@webassemblyjs/wasm-edit": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz",
       "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==",
+      "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -37530,6 +37604,7 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz",
       "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==",
+      "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
@@ -37542,6 +37617,7 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz",
       "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==",
+      "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -37553,6 +37629,7 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz",
       "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==",
+      "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-api-error": "1.11.1",
@@ -37611,6 +37688,7 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz",
       "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==",
+      "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.11.1",
         "@xtuc/long": "4.2.2"
@@ -37642,12 +37720,14 @@
     "@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
+      "dev": true
     },
     "@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
+      "dev": true
     },
     "abab": {
       "version": "2.0.5",
@@ -37680,7 +37760,8 @@
     "acorn": {
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.6.0.tgz",
-      "integrity": "sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw=="
+      "integrity": "sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw==",
+      "dev": true
     },
     "acorn-globals": {
       "version": "6.0.0",
@@ -37710,6 +37791,7 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
+      "dev": true,
       "requires": {}
     },
     "acorn-jsx": {
@@ -39656,7 +39738,8 @@
     "chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
-      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg=="
+      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
+      "dev": true
     },
     "ci-info": {
       "version": "2.0.0",
@@ -40473,6 +40556,7 @@
       "version": "6.8.1",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz",
       "integrity": "sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==",
+      "dev": true,
       "requires": {
         "icss-utils": "^5.1.0",
         "postcss": "^8.4.21",
@@ -40488,12 +40572,14 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
           "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+          "dev": true,
           "requires": {}
         },
         "postcss-modules-local-by-default": {
           "version": "4.0.3",
           "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz",
           "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==",
+          "dev": true,
           "requires": {
             "icss-utils": "^5.0.0",
             "postcss-selector-parser": "^6.0.2",
@@ -40504,6 +40590,7 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
           "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+          "dev": true,
           "requires": {
             "postcss-selector-parser": "^6.0.4"
           }
@@ -40512,6 +40599,7 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
           "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+          "dev": true,
           "requires": {
             "icss-utils": "^5.0.0"
           }
@@ -40520,6 +40608,7 @@
           "version": "7.5.2",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz",
           "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==",
+          "dev": true,
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -41570,6 +41659,7 @@
       "version": "5.8.3",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.3.tgz",
       "integrity": "sha512-EGAbGvH7j7Xt2nc0E7D99La1OiEs8LnyimkRgwExpUMScN6O+3x9tIWs7PLQZVNx4YD+00skHXPXi1yQHpAmZA==",
+      "dev": true,
       "requires": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -41678,7 +41768,8 @@
     "es-module-lexer": {
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
-      "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ=="
+      "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
+      "dev": true
     },
     "es-to-primitive": {
       "version": "1.2.1",
@@ -42444,6 +42535,7 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
       "requires": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -42518,6 +42610,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
       "requires": {
         "estraverse": "^5.2.0"
       },
@@ -42525,14 +42618,16 @@
         "estraverse": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="
+          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+          "dev": true
         }
       }
     },
     "estraverse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true
     },
     "esutils": {
       "version": "2.0.3",
@@ -42566,7 +42661,8 @@
     "events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true
     },
     "evp_bytestokey": {
       "version": "1.0.3",
@@ -43675,7 +43771,8 @@
     "glob-to-regexp": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "dev": true
     },
     "global-dirs": {
       "version": "2.1.0",
@@ -43772,7 +43869,8 @@
     "graceful-fs": {
       "version": "4.2.6",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
-      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ=="
+      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
+      "dev": true
     },
     "grpc": {
       "version": "1.24.11",
@@ -44338,6 +44436,7 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "dev": true,
       "requires": {}
     },
     "idb": {
@@ -46700,6 +46799,7 @@
       "version": "27.3.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.3.1.tgz",
       "integrity": "sha512-ks3WCzsiZaOPJl/oMsDjaf0TRiSv7ctNgs0FqRr2nARsovz6AWWy4oLElwcquGSz692DzgZQrCLScPNs5YlC4g==",
+      "dev": true,
       "requires": {
         "@types/node": "*",
         "merge-stream": "^2.0.0",
@@ -46709,12 +46809,14 @@
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
         },
         "supports-color": {
           "version": "8.1.1",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
           "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+          "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
           }
@@ -46866,7 +46968,8 @@
     "json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
-      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+      "dev": true
     },
     "json-parse-even-better-errors": {
       "version": "2.3.1",
@@ -47532,7 +47635,8 @@
     "loader-runner": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
-      "integrity": "sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw=="
+      "integrity": "sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==",
+      "dev": true
     },
     "loader-utils": {
       "version": "1.4.0",
@@ -48111,7 +48215,8 @@
     "merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
     },
     "merge2": {
       "version": "1.4.1",
@@ -48507,7 +48612,8 @@
     "neo-async": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true
     },
     "next-tick": {
       "version": "1.0.0",
@@ -51732,6 +51838,7 @@
       "version": "6.0.6",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
       "integrity": "sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==",
+      "dev": true,
       "requires": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -55501,7 +55608,8 @@
     "tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
-      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "dev": true
     },
     "tar": {
       "version": "6.1.11",
@@ -55599,6 +55707,7 @@
       "version": "5.2.5",
       "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.2.5.tgz",
       "integrity": "sha512-3luOVHku5l0QBeYS8r4CdHYWEGMmIj3H1U64jgkdZzECcSOJAyJ9TjuqcQZvw1Y+4AOBN9SeYJPJmFn2cM4/2g==",
+      "dev": true,
       "requires": {
         "jest-worker": "^27.0.6",
         "schema-utils": "^3.1.1",
@@ -55611,6 +55720,7 @@
           "version": "3.1.1",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
           "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "dev": true,
           "requires": {
             "@types/json-schema": "^7.0.8",
             "ajv": "^6.12.5",
@@ -55620,12 +55730,14 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
         },
         "source-map-support": {
           "version": "0.5.21",
           "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
           "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+          "dev": true,
           "requires": {
             "buffer-from": "^1.0.0",
             "source-map": "^0.6.0"
@@ -55635,6 +55747,7 @@
           "version": "5.10.0",
           "resolved": "https://registry.npmjs.org/terser/-/terser-5.10.0.tgz",
           "integrity": "sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==",
+          "dev": true,
           "requires": {
             "commander": "^2.20.0",
             "source-map": "~0.7.2",
@@ -55644,7 +55757,8 @@
             "source-map": {
               "version": "0.7.3",
               "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-              "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
+              "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+              "dev": true
             }
           }
         }
@@ -56711,6 +56825,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.2.0.tgz",
       "integrity": "sha512-up4YAn/XHgZHIxFBVCdlMiWDj6WaLKpwVeGQk2I5thdYxF/KmF0aaz6TfJZ/hfl1h/XlcDr7k1KH7ThDagpFaA==",
+      "dev": true,
       "requires": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
@@ -56991,6 +57106,7 @@
       "version": "5.64.2",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.64.2.tgz",
       "integrity": "sha512-4KGc0+Ozi0aS3EaLNRvEppfZUer+CaORKqL6OBjDLZOPf9YfN8leagFzwe6/PoBdHFxc/utKArl8LMC0Ivtmdg==",
+      "dev": true,
       "requires": {
         "@types/eslint-scope": "^3.7.0",
         "@types/estree": "^0.0.50",
@@ -57022,6 +57138,7 @@
           "version": "3.1.1",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
           "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "dev": true,
           "requires": {
             "@types/json-schema": "^7.0.8",
             "ajv": "^6.12.5",
@@ -57031,7 +57148,8 @@
         "webpack-sources": {
           "version": "3.2.2",
           "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.2.tgz",
-          "integrity": "sha512-cp5qdmHnu5T8wRg2G3vZZHoJPN14aqQ89SyQ11NpGH5zEMDCclt49rzo+MaRazk7/UeILhAI+/sEtcM+7Fr0nw=="
+          "integrity": "sha512-cp5qdmHnu5T8wRg2G3vZZHoJPN14aqQ89SyQ11NpGH5zEMDCclt49rzo+MaRazk7/UeILhAI+/sEtcM+7Fr0nw==",
+          "dev": true
         }
       }
     },
diff --git a/package.json b/package.json
index d57183f1e..5acb23481 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,6 @@
     "@quintype/framework": "^7.7.7",
     "@quintype/seo": "^1.42.1",
     "axios": "^0.24.0",
-    "css-loader": "^6.8.1",
     "fontfaceobserver": "^2.1.0",
     "intersection-observer": "^0.12.2",
     "lodash": "^4.17.21",
@@ -42,6 +41,7 @@
     "babel-eslint": "^10.0.3",
     "check-node-version": "^4.1.0",
     "cosmiconfig": "^7.0.0",
+    "css-loader": "^6.8.1",
     "eslint": "^8.1.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-standard": "^16.0.3",
@@ -100,7 +100,7 @@
     "lint:css:ci": "npx stylelint $(git diff --pretty='' --diff-filter=d --name-only origin/master...HEAD -- '*.css' '*.scss') ./app/assets/stylesheets/app.scss",
     "lint:ci": "npm run lint:js:ci && npm run lint:css:ci",
     "check-node-npm": "check-node-version --node '>= 12.13.0' --npm '^6.14.0'",
-    "copy-arrow": "cp -r /Users/shraddhakesari_1/workspace/quintype-node-arrow/src/* /Users/shraddhakesari_1/workspace/malibu-advanced/app/isomorphic/arrow && echo 'Files copied successfully!'"
+    "copy-arrow": "bash ./copy-arrow.sh"
   },
   "husky": {
     "hooks": {
diff --git a/run b/run
index d408324b7..4a0bfdacf 100755
--- a/run
+++ b/run
@@ -1,9 +1,9 @@
 #!/bin/bash -e
 
-npm install
+# npm install
 npm run copy-arrow
 
-# Do not overwrite these two files - line 1 in fullscreenimages.scss, line 23 to 26 in author-image.css and line 1 in author.m.css
+# Do not overwrite the import in line 1 in fullscreenimages.scss
 
 npm run compile
 supervisord -n -c <(cat <<EOF

From 15bc1be3cddca4c68e8fb5da4b5b9ffc937d8251 Mon Sep 17 00:00:00 2001
From: Shraddha Kesari <shraddha@quintype.com>
Date: Tue, 27 Jun 2023 18:04:36 +0530
Subject: [PATCH 5/8] Uncomment npm install

---
 run | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/run b/run
index 4a0bfdacf..d521b1ca8 100755
--- a/run
+++ b/run
@@ -1,6 +1,6 @@
 #!/bin/bash -e
 
-# npm install
+npm install
 npm run copy-arrow
 
 # Do not overwrite the import in line 1 in fullscreenimages.scss

From 09df7cb6e348781dfce75b217cb320a069093a10 Mon Sep 17 00:00:00 2001
From: Shraddha Kesari <shraddha@quintype.com>
Date: Thu, 23 Nov 2023 12:37:10 +0530
Subject: [PATCH 6/8] Add latest changes of arrow

---
 .../Atoms/AuthorCard/author-card.test.js      |   2 +-
 .../components/Atoms/AuthorCard/index.js      |   2 +-
 .../components/Atoms/PublishDetail/index.js   |  20 +-
 .../Atoms/PublishDetail/publish-details.m.css |   7 +-
 .../Atoms/ScrollSnap/SliderArrow/index.js     |  12 +-
 .../components/Atoms/ScrollSnap/index.js      |  12 +-
 .../StoryElements/Attachment/attachment.m.css |   2 +
 .../ImageSlideshow/image-slideshow.m.css      |  50 ++--
 .../StoryElements/ImageSlideshow/index.js     |  47 +++-
 .../StoryElements/QuestionAnswer/index.js     |  19 +-
 .../QuestionAnswer/question-answer.m.css      |  26 ++
 .../Atoms/StoryElements/StoryElement/index.js |  14 +
 .../StoryElement/storyElement.m.css           |  12 +
 .../arrow/components/Atoms/TimeStamp/index.js |  15 +-
 .../Atoms/TimeStamp/timestamp.m.css           |   4 +
 .../Molecules/SocialShareTemplate/index.js    |   8 +-
 .../SocialShareTemplate/social-share-data.js  |   2 +-
 .../Molecules/StoryCard/storycard.m.css       |  32 +++
 .../Molecules/StoryElementCard/index.js       |  36 ++-
 .../Molecules/StorycardContent/index.js       |   4 +-
 .../StorycardContent/storycardContent.m.css   |  14 +-
 .../AsideCollection/aside-collection.m.css    |  18 ++
 .../components/Rows/AsideCollection/index.js  |  74 +++--
 .../AuthorIntroductionCard/author-intro.m.css |  26 +-
 .../Rows/AuthorIntroductionCard/index.js      |   2 +-
 .../components/Rows/CollectionFilter/index.js |  12 +-
 .../Rows/ElevenStories/11-stories.m.css       |   6 +-
 .../FullScreenSlider/full-screen-slider.m.css |   4 +
 .../components/Rows/MagazineEditions/index.js |  14 +-
 .../Rows/MagazineHeaderCard/index.js          |  15 +-
 .../components/Rows/MagazineWidget/index.js   |  11 +-
 .../OneColStoryList/one-col-story-list.m.css  |   8 +-
 .../Rows/OpinionCollection/index.js           |   4 +-
 .../ListicleStoryTemplates/index.js           | 140 +++++++--
 .../listicle-story.m.css                      |  12 +-
 .../ListicleStoryTemplates/listicleUtils.js   |  16 ++
 .../LiveBlogStoryTemplates/index.js           |  13 +-
 .../LiveBlogStoryTemplates/live-blog.m.css    |  36 +--
 .../LiveBlogStoryTemplates/templates.js       |  33 ++-
 .../PhotoStoryTemplates/index.js              |  54 ++--
 .../PhotoStoryTemplates/photo.m.css           |  70 +++--
 .../Rows/StoryTemplates/Snapshot/index.js     |   4 +-
 .../StoryTemplates/Snapshot/snapshot.m.css    |  20 +-
 .../TextStoryTemplates/index.js               |  12 +-
 .../TextStoryTemplates/templates.js           |  50 ++--
 .../TextStoryTemplates/text-story.m.css       | 265 +++++++++++-------
 .../VideoStoryTemplates/index.js              |  55 ++--
 .../VideoStoryTemplates/video-story.m.css     |  46 +--
 .../Rows/ThreeColSevenStory/index.js          |   1 +
 .../Rows/ThreeColSixStories/index.js          |   3 +
 .../components/Rows/TwoColFourStory/index.js  |   1 -
 .../TwoColFourStory/two-col-four-story.m.css  |  28 +-
 .../Rows/TwoColSevenStories/index.js          |   4 +-
 .../two-col-seven-stories.m.css               |   9 +-
 .../components/Svgs/SocialIcons/facebook.js   |   7 +-
 .../components/Svgs/SocialIcons/instagram.js  |  22 +-
 .../components/Svgs/SocialIcons/linkedin.js   |   7 +-
 .../components/Svgs/SocialIcons/pinterest.js  |   4 +-
 .../components/Svgs/SocialIcons/twitter.js    |   8 +-
 .../components/Svgs/SocialIcons/whatsapp.js   |  10 +-
 .../components/Svgs/SocialIcons/youtube.js    |   7 +-
 app/isomorphic/arrow/utils/utils.js           |  91 ++++--
 run                                           |   6 +-
 63 files changed, 1087 insertions(+), 481 deletions(-)
 create mode 100644 app/isomorphic/arrow/components/Atoms/StoryElements/StoryElement/storyElement.m.css
 create mode 100644 app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicleUtils.js

diff --git a/app/isomorphic/arrow/components/Atoms/AuthorCard/author-card.test.js b/app/isomorphic/arrow/components/Atoms/AuthorCard/author-card.test.js
index 203d717ac..9d8406c8c 100644
--- a/app/isomorphic/arrow/components/Atoms/AuthorCard/author-card.test.js
+++ b/app/isomorphic/arrow/components/Atoms/AuthorCard/author-card.test.js
@@ -92,6 +92,6 @@ describe("default author card", () => {
         <AuthorCard story={singleAuthorStory} template="leftAligned" opts={{ showBio: false }} />
       </Provider>
     );
-    expect(wrapper.contains(<Twitter />)).toEqual(true);
+    expect(wrapper.contains(<Twitter color="#000" />)).toEqual(true);
   });
 });
diff --git a/app/isomorphic/arrow/components/Atoms/AuthorCard/index.js b/app/isomorphic/arrow/components/Atoms/AuthorCard/index.js
index 13bccc781..443a734f7 100644
--- a/app/isomorphic/arrow/components/Atoms/AuthorCard/index.js
+++ b/app/isomorphic/arrow/components/Atoms/AuthorCard/index.js
@@ -63,7 +63,7 @@ const AuthorTwitter = ({ twitterUrl, textColor }) => {
     <>
       {twitterUrl && (
         <a href={twitterUrl} target="_blank" rel="noopener noreferrer">
-          <Twitter />
+          <Twitter color={textColor === "dark" ? "#000" : "#fff"} />
         </a>
       )}
     </>
diff --git a/app/isomorphic/arrow/components/Atoms/PublishDetail/index.js b/app/isomorphic/arrow/components/Atoms/PublishDetail/index.js
index 44175df55..8967de525 100644
--- a/app/isomorphic/arrow/components/Atoms/PublishDetail/index.js
+++ b/app/isomorphic/arrow/components/Atoms/PublishDetail/index.js
@@ -23,19 +23,25 @@ export const PublishDetails = ({ story, opts = {}, template = "", timezone = nul
 
   const config = useStateValue() || {};
   const { "first-published-at": firstPublishAt, "last-published-at": lastPublish } = story;
-  const { enableUpdatedTime, enablePublishedTime, showReadTime, localizedPublishedOn, localizedUpdatedOn } = opts;
+  const {
+    enableUpdatedTime,
+    enablePublishedTime,
+    showReadTime,
+    localizedPublishedOn,
+    localizedUpdatedOn,
+    localizedMonths,
+    localizedMeridiem
+  } = opts;
   const time = firstPublishAt || lastPublish;
   const textColor = getTextColor(config.theme);
-  const timeStampProps =
-    direction === "rtl"
-      ? { ...opts, direction: direction, isTimeFirst: true, showTime: true }
-      : { ...opts, direction: direction, showTime: true };
+  const timeStampProps = { ...opts, direction: direction, showTime: true };
+  const updatedStyle = direction === "rtl" && !localizedMonths && !localizedMeridiem ? "date wrapper" : "date";
   return (
     <div data-test-id="timeStamp" className="arrow-component arr--publish-details" styleName={`timeStamp ${textColor}`}>
       {enablePublishedTime && (
         <div data-test-id="publishDetails" styleName={`publish-details ${textColor}`}>
           {localizedPublishedOn || "Published on"} :&nbsp;
-          <div styleName="date">
+          <div styleName={updatedStyle}>
             {getTimeStamp(time, timestampToFormat, timeStampProps, languageCode, template, timezone)}
           </div>
           {!enableUpdatedTime && showReadTime && (
@@ -46,7 +52,7 @@ export const PublishDetails = ({ story, opts = {}, template = "", timezone = nul
       {enableUpdatedTime && (
         <div data-test-id="updateDetails" styleName={`update-details ${textColor}`}>
           {localizedUpdatedOn || "Updated on"} :&nbsp;
-          <div styleName="date">
+          <div styleName={updatedStyle}>
             {getTimeStamp(lastPublish, timestampToFormat, timeStampProps, languageCode, template, timezone)}
           </div>
           {showReadTime && <ReadTime story={story} opts={{ ...opts, showDotIndicator: enableUpdatedTime }} />}
diff --git a/app/isomorphic/arrow/components/Atoms/PublishDetail/publish-details.m.css b/app/isomorphic/arrow/components/Atoms/PublishDetail/publish-details.m.css
index 070643e9a..42cd4dc3e 100644
--- a/app/isomorphic/arrow/components/Atoms/PublishDetail/publish-details.m.css
+++ b/app/isomorphic/arrow/components/Atoms/PublishDetail/publish-details.m.css
@@ -17,6 +17,7 @@
   color: var(--arrow-c-invert-mono4);
 }
 
+.update-details,
 .publish-details {
   display: flex;
   align-items: baseline;
@@ -24,9 +25,9 @@
 }
 
 .update-details {
-  display: flex;
   margin-top: var(--arrow-spacing-s);
 }
+
 .dot-indicator {
   display: flex;
   align-items: center;
@@ -46,3 +47,7 @@
 .date.light {
   color: var(--arrow-c-invert-mono2);
 }
+
+.wrapper {
+  direction: ltr;
+}
diff --git a/app/isomorphic/arrow/components/Atoms/ScrollSnap/SliderArrow/index.js b/app/isomorphic/arrow/components/Atoms/ScrollSnap/SliderArrow/index.js
index ce9154682..c23e421f3 100644
--- a/app/isomorphic/arrow/components/Atoms/ScrollSnap/SliderArrow/index.js
+++ b/app/isomorphic/arrow/components/Atoms/ScrollSnap/SliderArrow/index.js
@@ -8,7 +8,15 @@ import { useStateValue } from "../../../SharedContext";
 
 import "./slider-arrow.m.css";
 
-export const SliderArrow = ({ selectedIndex, previousClick, nextClick, noOfItems, perView, languageDirection }) => {
+export const SliderArrow = ({
+  selectedIndex,
+  previousClick,
+  nextClick,
+  noOfItems,
+  perView,
+  languageDirection,
+  sliderArrowStyles
+}) => {
   if (noOfItems < 1) {
     return null;
   }
@@ -28,6 +36,7 @@ export const SliderArrow = ({ selectedIndex, previousClick, nextClick, noOfItems
       {selectedIndex !== 0 ? (
         <button
           onClick={previousClick}
+          style={sliderArrowStyles}
           styleName={`arrow left-arrow-${textColor} ${getLeftArrowClassName}`}
           className={`left-arrow ${getLeftArrowClassName}`}>
           <LeftArrow color={textColor === "dark" ? "#fff" : "#333"} />
@@ -37,6 +46,7 @@ export const SliderArrow = ({ selectedIndex, previousClick, nextClick, noOfItems
       {selectedIndex < noOfItems - 1 && rightArrowView() ? (
         <button
           onClick={nextClick}
+          style={sliderArrowStyles}
           styleName={`arrow right-arrow-${textColor} ${getRightArrowClassName}`}
           className={`right-arrow ${getRightArrowClassName}`}>
           <RightArrow color={textColor === "dark" ? "#fff" : "#333"} />
diff --git a/app/isomorphic/arrow/components/Atoms/ScrollSnap/index.js b/app/isomorphic/arrow/components/Atoms/ScrollSnap/index.js
index c568705d4..98ec9d515 100644
--- a/app/isomorphic/arrow/components/Atoms/ScrollSnap/index.js
+++ b/app/isomorphic/arrow/components/Atoms/ScrollSnap/index.js
@@ -33,7 +33,16 @@ const setIndicatorValue = (func, ms) => {
   };
 };
 
-export const ScrollSnap = ({ children, isArrow, interval, isInfinite, pauseOnHover, perView, slideIndicator }) => {
+export const ScrollSnap = ({
+  children,
+  isArrow,
+  interval,
+  isInfinite,
+  pauseOnHover,
+  perView,
+  slideIndicator,
+  sliderArrowStyles = {}
+}) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [autoScroll, setAutoScroll] = useState(false);
   const languageDirection = useSelector((state) => get(state, ["qt", "config", "language", "direction"], "ltr"));
@@ -127,6 +136,7 @@ export const ScrollSnap = ({ children, isArrow, interval, isInfinite, pauseOnHov
         </div>
         {isArrow && (
           <SliderArrow
+            sliderArrowStyles={sliderArrowStyles}
             noOfItems={noOfItems}
             perView={perView}
             previousClick={previousClick}
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Attachment/attachment.m.css b/app/isomorphic/arrow/components/Atoms/StoryElements/Attachment/attachment.m.css
index 50eb73509..dc02fc6f3 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Attachment/attachment.m.css
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Attachment/attachment.m.css
@@ -22,6 +22,7 @@
   line-height: var(--arrow-lh-4);
   text-align: center;
   padding: 6px var(--arrow-spacing-m);
+  flex-shrink: 0;
   @media (min-width: tablet) {
     margin-left: var(--arrow-spacing-m);
   }
@@ -65,6 +66,7 @@
   align-items: center;
   justify-content: center;
   margin-right: var(--arrow-spacing-m);
+  flex-shrink: 0;
   @media (min-width: mobile) {
     width: 45px;
     height: 45px;
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/ImageSlideshow/image-slideshow.m.css b/app/isomorphic/arrow/components/Atoms/StoryElements/ImageSlideshow/image-slideshow.m.css
index f75aba419..4f8c450f3 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/ImageSlideshow/image-slideshow.m.css
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/ImageSlideshow/image-slideshow.m.css
@@ -11,12 +11,38 @@
   }
 }
 
-.caption {
-  position: absolute;
-  bottom: 10px;
-  left: 0;
-  right: 0;
-  text-align: center;
+.captionAttributionWrapper {
+  line-height: initial;
+  max-height: 100px;
+  overflow-y: scroll;
+  padding: 10px;
+  background: rgba(99, 104, 112, 0.1);
+  border: 1px solid rgba(100, 100, 100, 0.08);
+}
+
+.caption,
+.attribution {
+  font-size: 12px !important;
+}
+
+.separator {
+  display: inline-block;
+  width: 10px;
+}
+
+.caption.dark {
+  color: #333;
+}
+
+.caption.light {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.attribution.dark {
+  color: #797979;
+}
+
+.attribution.light {
   color: var(--arrow-c-light);
 }
 
@@ -26,18 +52,6 @@
   margin: 0;
 }
 
-.image-container::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  background-image: linear-gradient(to top, rgba(13, 13, 13, 0.5), transparent 70%, transparent);
-}
-
 .image {
   position: absolute;
   top: 0;
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/ImageSlideshow/index.js b/app/isomorphic/arrow/components/Atoms/StoryElements/ImageSlideshow/index.js
index 0f589981b..185784db7 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/ImageSlideshow/index.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/ImageSlideshow/index.js
@@ -1,22 +1,33 @@
 import { LazyLoadImages, ResponsiveImage } from "@quintype/components";
 import get from "lodash.get";
 import PropTypes from "prop-types";
-import React from "react";
-import { shapeStory } from "../../../../utils/utils";
+import React, { useEffect, useRef, useState } from "react";
+import { shapeStory, getTextColor } from "../../../../utils/utils";
 import { FullScreenImages } from "../../../Molecules/FullScreenImages";
 import { withElementWrapper } from "../withElementWrapper";
 import { ScrollSnap } from "../../ScrollSnap";
 import "./image-slideshow.m.css";
 import { HyperLink } from "../../Hyperlink";
+import { useStateValue } from "../../../SharedContext";
 
 const ImageSlideshowBase = (props) => {
   if (!props.element) return null;
 
+  const config = useStateValue() || {};
+  const textColor = getTextColor(config.theme);
+
   const Slide = (image, index, onClickHandler) => {
-    const { id, "image-s3-key": imageS3Key, metadata, title, hyperlink = "" } = image;
+    const {
+      id,
+      "image-s3-key": imageS3Key,
+      metadata,
+      title,
+      hyperlink = "",
+      "image-attribution": attribution = ""
+    } = image;
     return (
       <div styleName="slide" key={id}>
-        <figure key={id} styleName="image-container" onClick={() => onClickHandler(index)}>
+        <figure key={id} onClick={() => onClickHandler(index)}>
           <LazyLoadImages margin={"0px"}>
             <ResponsiveImage
               slug={imageS3Key}
@@ -29,19 +40,39 @@ const ImageSlideshowBase = (props) => {
               alt={title}
             />
           </LazyLoadImages>
+          {hyperlink && <HyperLink hyperLink={hyperlink} />}
         </figure>
-        {hyperlink && <HyperLink hyperLink={hyperlink} />}
-        <p styleName="caption" dangerouslySetInnerHTML={{ __html: title }} />
+        {(title || attribution) && (
+          <div styleName="captionAttributionWrapper">
+            {title && <span styleName={`caption ${textColor}`} dangerouslySetInnerHTML={{ __html: title }} />}
+            {title && attribution && <span styleName="separator" />}
+            {attribution && (
+              <span styleName={`attribution ${textColor}`} dangerouslySetInnerHTML={{ __html: attribution }} />
+            )}
+          </div>
+        )}
       </div>
     );
   };
 
   const ImageSlideshowTemplate = ({ onClickHandler }) => {
+    const [containerWidth, setContainerWidth] = useState(0);
     const storyElements = get(props, ["element", "story-elements"], []);
+    const scrollContainerRef = useRef(null);
+    useEffect(() => {
+      if (scrollContainerRef.current) {
+        const _width = (9 / 16) * scrollContainerRef.current.offsetWidth;
+        setContainerWidth(_width);
+      }
+    }, [scrollContainerRef]);
 
     return (
-      <div className="arr--image-slideshow-element" styleName="slideshow" data-test-id="image-slideshow">
-        <ScrollSnap slideIndicator={"none"}>
+      <div
+        ref={scrollContainerRef}
+        className="arr--image-slideshow-element"
+        styleName="slideshow"
+        data-test-id="image-slideshow">
+        <ScrollSnap slideIndicator={"none"} sliderArrowStyles={{ top: `${Math.round(containerWidth / 2)}px` }}>
           {storyElements.map((image, index) => Slide(image, index, onClickHandler))}
         </ScrollSnap>
       </div>
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/QuestionAnswer/index.js b/app/isomorphic/arrow/components/Atoms/StoryElements/QuestionAnswer/index.js
index 742421f79..b09628053 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/QuestionAnswer/index.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/QuestionAnswer/index.js
@@ -5,6 +5,7 @@ import { shapeConfig, shapeStory, updateContentLinks, getTextColor } from "../..
 import { withElementWrapper } from "../withElementWrapper";
 import "./question-answer.m.css";
 import { useStateValue } from "../../../SharedContext";
+import { UserFallbackIcon } from "../../../Svgs/user-fallback-icon";
 
 const supportedTemplates = (type, element) => {
   switch (type) {
@@ -60,14 +61,26 @@ const QuestionAnswerBase = ({
   const iconType = defaultIconType === "curve" ? "curveIcon" : "edgeIcon";
   const iconColorStyle = iconColor ? { backgroundColor: iconColor } : {};
 
+  function getFallBackAttributionImage() {
+    return (
+      <div styleName="fallbackAttribution">
+        <span styleName="fallbackImage">
+          <UserFallbackIcon />
+        </span>
+      </div>
+    );
+  }
+
   const supportQuestionElement = isAuthorImageTemplate ? (
-    questionAttribution && (
+    questionAttribution ? (
       <>
         <div styleName="labelAttribution">
           <img src={questionAttribution} loading="lazy" />
         </div>
         <span styleName="hidden"></span>
       </>
+    ) : (
+      getFallBackAttributionImage()
     )
   ) : (
     <div styleName={`${iconType} ${theme}`} data-test-id={iconType} style={iconColorStyle}>
@@ -78,13 +91,15 @@ const QuestionAnswerBase = ({
   // EMPTY SPAN FOR EXTRA SPACE
 
   const supportAnswerElement = isAuthorImageTemplate ? (
-    answerAttribution && (
+    answerAttribution ? (
       <>
         <div styleName="labelAttribution">
           <img src={answerAttribution} loading="lazy" />
         </div>
         <span styleName="hidden"></span>
       </>
+    ) : (
+      getFallBackAttributionImage()
     )
   ) : (
     <div styleName={`${iconType} ${theme}`} data-test-id={iconType} style={iconColorStyle}>
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/QuestionAnswer/question-answer.m.css b/app/isomorphic/arrow/components/Atoms/StoryElements/QuestionAnswer/question-answer.m.css
index 3438df2a3..1fdec6483 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/QuestionAnswer/question-answer.m.css
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/QuestionAnswer/question-answer.m.css
@@ -54,6 +54,16 @@
   border-radius: 2.8px;
 }
 
+.qa-default .q-element,
+.qa-default .a-element {
+  .light {
+    color: var(--arrow-c-light);
+  }
+  .dark {
+    color: var(--arrow-c-dark);
+  }
+}
+
 .qa-default .curveIcon {
   border-radius: 13.5px;
   @media (min-width: mobile) {
@@ -77,6 +87,22 @@
   }
 }
 
+.qa-withAuthorImage .fallbackImage svg {
+  width: 27px;
+  height: 27px;
+  position: relative;
+  top: var(--arrow-spacing-xs);
+  @media (min-width: mobile) {
+    width: 30px;
+    height: 30px;
+  }
+}
+
+.qa-withAuthorImage .fallbackAttribution {
+  display: inline-block;
+  width: 36px;
+}
+
 .qa-withAuthorImage:global(.arrow-component) .a-element .light p,
 .qa-default:global(.arrow-component) .a-element .light p,
 .qa-withAuthorImage:global(.arrow-component) .q-element .light p,
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/StoryElement/index.js b/app/isomorphic/arrow/components/Atoms/StoryElements/StoryElement/index.js
index 7eefe626b..302b3f3d0 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/StoryElement/index.js
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/StoryElement/index.js
@@ -3,8 +3,22 @@ import { StoryElement as QTCStoryElement } from "@quintype/components";
 import PropTypes from "prop-types";
 import { withElementWrapper } from "../withElementWrapper";
 import { shapeStory, shapeConfig } from "../../../../utils/utils";
+import "./storyElement.m.css";
 
 const StoryElementBase = ({ element, story = {}, config = {}, ...restProps }) => {
+  if (element.type === "title" && element.hasDashedBullet) {
+    return (
+      <div data-test-id="story-elements">
+        <div className="story-element story-element-title">
+          <h2>
+            <div styleName="bullet-style-dash"></div>
+            {element.text}
+          </h2>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div {...restProps} data-test-id="story-elements">
       <QTCStoryElement element={element} />
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/StoryElement/storyElement.m.css b/app/isomorphic/arrow/components/Atoms/StoryElements/StoryElement/storyElement.m.css
new file mode 100644
index 000000000..5324182cb
--- /dev/null
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/StoryElement/storyElement.m.css
@@ -0,0 +1,12 @@
+@import "../../../../../assets/stylesheets/mixins.scss";
+
+.bullet-style-dash {
+  width: 16px;
+  height: 16px;
+  background-color: var(--arrow-c-brand1);
+  margin-right: 5px;
+  display: inline-block;
+  @include tablet {
+    margin-bottom: 2px;
+  }
+}
diff --git a/app/isomorphic/arrow/components/Atoms/TimeStamp/index.js b/app/isomorphic/arrow/components/Atoms/TimeStamp/index.js
index 166ea5826..79ae2e192 100644
--- a/app/isomorphic/arrow/components/Atoms/TimeStamp/index.js
+++ b/app/isomorphic/arrow/components/Atoms/TimeStamp/index.js
@@ -18,12 +18,15 @@ export const TimeStamp = ({ story, config = {} }) => {
   const textColor = getTextColor(configState.theme);
   const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
   const isLocalizedNumber = get(qtConfig, ["isLocalizedNumber"], false);
-
   const languageCode = get(qtConfig, ["language", "ietf-code"], "en");
-
+  const direction = get(qtConfig, ["language", "direction"], "ltr");
   const storyCardTime = get(qtConfig, ["pagebuilder-config", "general", "storyCardTime"], null);
   const storyTemplate = getStoryTemplate(story, get(qtConfig, ["pagebuilder-config"], {}));
 
+  const { localizedMeridiem, localizedMonths } = config;
+  const rtlWithoutCustomLabels = direction === "rtl" && !localizedMeridiem && !localizedMonths;
+  const updatedStyle = rtlWithoutCustomLabels ? `time ${textColor} wrapper` : `time ${textColor}`;
+
   if (storyCardTime) {
     const storyTime = storyTemplate === "live-blog" ? storyCardTime["liveBlog"] : storyCardTime["rest"];
     if (storyTime) {
@@ -36,12 +39,16 @@ export const TimeStamp = ({ story, config = {} }) => {
     ["pagebuilder-config", "general", "timeAgoFormat"],
     get(configState, ["timeAgoFormat"], "time unit ago")
   );
+  const dateFormat = get(qtConfig, ["pagebuilder-config", "general", "dateFormat"], "dd-mon-yyyy");
 
+  const updatedConfig = { direction, ...config, dateFormat };
   return (
     <>
       {isTime && (
-        <div className="time arr--publish-time" styleName={`time ${textColor}`} data-test-id="publish-time">
-          <div>{getTimeStamp(time, formatter, config, languageCode, "", "", isLocalizedNumber, timeAgoFormat)}</div>
+        <div className="time arr--publish-time" styleName={updatedStyle} data-test-id="publish-time">
+          <div>
+            {getTimeStamp(time, formatter, updatedConfig, languageCode, "", "", isLocalizedNumber, timeAgoFormat)}
+          </div>
         </div>
       )}
     </>
diff --git a/app/isomorphic/arrow/components/Atoms/TimeStamp/timestamp.m.css b/app/isomorphic/arrow/components/Atoms/TimeStamp/timestamp.m.css
index c0eff9236..f0c12baca 100644
--- a/app/isomorphic/arrow/components/Atoms/TimeStamp/timestamp.m.css
+++ b/app/isomorphic/arrow/components/Atoms/TimeStamp/timestamp.m.css
@@ -15,3 +15,7 @@
 .light {
   color: var(--arrow-c-invert-mono4);
 }
+
+.wrapper {
+  direction: ltr;
+}
diff --git a/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/index.js b/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/index.js
index 257f31c12..640dbcc7d 100644
--- a/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/index.js
+++ b/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/index.js
@@ -3,7 +3,6 @@ import PropTypes from "prop-types";
 import { socialShareData } from "./social-share-data";
 import { SocialSharePopup } from "../../Atoms/SocialSharePopup";
 import "./social-share-template.m.css";
-import { CloseIcon } from "../../Svgs/close-icon";
 import { ShareIcon } from "../../Svgs/share-icon";
 import { getTextColor } from "../../../utils/utils";
 import camelcase from "lodash.camelcase";
@@ -24,9 +23,8 @@ ShareItem.propTypes = {
   dataTestId: PropTypes.string
 };
 
-function getActionIcon(open, color) {
-  if (!open) return <ShareIcon color={color} />;
-  return <CloseIcon color={color} />;
+function getActionIcon(color) {
+  return <ShareIcon color={color} />;
 }
 
 export const SocialShareTemplate = (props) => {
@@ -53,7 +51,7 @@ export const SocialShareTemplate = (props) => {
   const shareIcon = () => {
     return (
       <li styleName="icon" key="horizontal-0">
-        <div onClick={clickHandler}>{getActionIcon(isOpen, iconColor)}</div>
+        <div onClick={clickHandler}>{getActionIcon(iconColor)}</div>
       </li>
     );
   };
diff --git a/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/social-share-data.js b/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/social-share-data.js
index 2722d53c9..3cc309792 100644
--- a/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/social-share-data.js
+++ b/app/isomorphic/arrow/components/Molecules/SocialShareTemplate/social-share-data.js
@@ -9,7 +9,7 @@ const getSocialIcons = (color, iconType) => {
     case "plain-color-svg":
       return {
         facebook: <Facebook key={iconType} />,
-        twitter: <Twitter key={iconType} />,
+        twitter: <Twitter key={iconType} color={color} />,
         linkedin: <LinkedIn key={iconType} />,
         whatsapp: <WhatsApp key={iconType} />
       };
diff --git a/app/isomorphic/arrow/components/Molecules/StoryCard/storycard.m.css b/app/isomorphic/arrow/components/Molecules/StoryCard/storycard.m.css
index dae4d4c99..084ebc3e2 100644
--- a/app/isomorphic/arrow/components/Molecules/StoryCard/storycard.m.css
+++ b/app/isomorphic/arrow/components/Molecules/StoryCard/storycard.m.css
@@ -1,4 +1,5 @@
 @custom-media --viewport-medium (width >= 768px);
+@custom-media --viewport-small (width < 768px);
 
 .author-timestamp-wrapper {
   display: flex;
@@ -156,3 +157,34 @@
 .content-overlap {
   height: auto;
 }
+
+.border-full.horizontal-card,
+.border-full.horizontal-mob {
+  @media (--viewport-small) {
+    padding: 6px var(--arrow-spacing-xs) var(--arrow-spacing-xs);
+  }
+}
+
+.border-full .content {
+  @media (--viewport-small) {
+    padding: 0 var(--arrow-spacing-s) var(--arrow-spacing-s);
+  }
+}
+
+html[dir="ltr"] {
+  .border-full.horizontal-mob :global(.arr--hero-image),
+  .horizontal-card.border-full :global(.arr--hero-image) {
+    @media (--viewport-small) {
+      padding: 2px var(--arrow-spacing-xs) 0 0;
+    }
+  }
+}
+
+html[dir="rtl"] {
+  .border-full.horizontal-mob :global(.arr--hero-image),
+  .horizontal-card.border-full :global(.arr--hero-image) {
+    @media (--viewport-small) {
+      padding: 2px 0 0 var(--arrow-spacing-xs);
+    }
+  }
+}
diff --git a/app/isomorphic/arrow/components/Molecules/StoryElementCard/index.js b/app/isomorphic/arrow/components/Molecules/StoryElementCard/index.js
index 90829e1ab..2089c9add 100644
--- a/app/isomorphic/arrow/components/Molecules/StoryElementCard/index.js
+++ b/app/isomorphic/arrow/components/Molecules/StoryElementCard/index.js
@@ -163,10 +163,10 @@ const getElement = (story, element, config = {}, AdComponent, WidgetComp, index,
     case "image":
       return <Image element={element} />;
 
-    case "q-and-a":
+    case "q-and-a": {
       const {
         template: qaTemplate = "default",
-        css: { iconColor = "" } = {},
+        css: { iconColor = "", darkIconColor = "" } = {},
         opts: { defaultIconType = "edge" } = {}
       } = qaElement;
       return (
@@ -178,15 +178,16 @@ const getElement = (story, element, config = {}, AdComponent, WidgetComp, index,
           }}
           template={qaTemplate}
           css={{
-            iconColor: iconColor
+            iconColor: enableDarkMode ? darkIconColor : iconColor
           }}
         />
       );
+    }
 
-    case "question":
+    case "question": {
       const {
         template: questionTemplate = "default",
-        css: { questionIconColor = "" } = {},
+        css: { iconColor = "", darkIconColor = "" } = {},
         opts: { defaultQuestionIconType = "edge" } = {}
       } = questionElement;
       return (
@@ -198,15 +199,16 @@ const getElement = (story, element, config = {}, AdComponent, WidgetComp, index,
           }}
           template={questionTemplate}
           css={{
-            iconColor: questionIconColor
+            iconColor: enableDarkMode ? darkIconColor : iconColor
           }}
         />
       );
+    }
 
     case "answer":
       const {
         template: answerTemplate = "default",
-        css: { answerIconColor = "" } = {},
+        css: { iconColor = "", darkIconColor = "" } = {},
         opts: { defaultAnswerIconType = "edge" } = {}
       } = answerElement;
       return (
@@ -218,7 +220,7 @@ const getElement = (story, element, config = {}, AdComponent, WidgetComp, index,
           }}
           template={answerTemplate}
           css={{
-            iconColor: answerIconColor
+            iconColor: enableDarkMode ? darkIconColor : iconColor
           }}
         />
       );
@@ -311,6 +313,7 @@ export const StoryElementCard = ({
   heroVideoElementId = -1,
   config,
   isLive,
+  listicleBulletOpts = {},
   theme,
   adComponent,
   widgetComp,
@@ -319,6 +322,7 @@ export const StoryElementCard = ({
   const textColor = getTextColor(theme);
   const isLiveBlog = isLive ? "live-blog" : "";
   let shouldRunFBMobileVideoFix = true;
+  const { isTitlePresent, firstDescriptionElementsIndex, addNonInlineBullets } = listicleBulletOpts;
 
   return (
     <div className="arr--story-page-card-wrapper">
@@ -331,12 +335,15 @@ export const StoryElementCard = ({
         const tableStyle = element && element.subtype === "table" ? "table" : "";
         const cardId = get(card, ["id"], "");
         return (
-          <div
-            key={element.id}
-            className="arr--element-container"
-            styleName={`element-container ${isLiveBlog} ${tableStyle} ${textColor}`}>
-            {getElement(story, element, config, adComponent, widgetComp, index, cardId, enableDarkMode)}
-          </div>
+          <>
+            {!isTitlePresent && firstDescriptionElementsIndex === index && addNonInlineBullets(listicleBulletOpts)}
+            <div
+              key={element.id}
+              className="arr--element-container"
+              styleName={`element-container ${isLiveBlog} ${tableStyle} ${textColor}`}>
+              {getElement(story, element, config, adComponent, widgetComp, index, cardId, enableDarkMode)}
+            </div>
+          </>
         );
       })}
     </div>
@@ -348,6 +355,7 @@ StoryElementCard.propTypes = {
   heroVideoElementId: PropTypes.number,
   config: PropTypes.object,
   isLive: PropTypes.bool,
+  listicleBulletOpts: PropTypes.object,
   theme: PropTypes.string,
   adComponent: PropTypes.func,
   widgetComp: PropTypes.func,
diff --git a/app/isomorphic/arrow/components/Molecules/StorycardContent/index.js b/app/isomorphic/arrow/components/Molecules/StorycardContent/index.js
index a3849cdc7..bab026993 100644
--- a/app/isomorphic/arrow/components/Molecules/StorycardContent/index.js
+++ b/app/isomorphic/arrow/components/Molecules/StorycardContent/index.js
@@ -4,9 +4,7 @@ import { SectionTag } from "../../Atoms/SectionTag";
 import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
 import { Subheadline } from "../../Atoms/Subheadline";
 import { rgbToHex } from "../../../utils/utils";
-
 import PropTypes from "prop-types";
-
 import "./storycardContent.m.css";
 
 export const StorycardContent = ({
@@ -24,7 +22,7 @@ export const StorycardContent = ({
   const borderOptions = ["full"];
   const SectionTagborderColor = rgbToHex(borderColor);
   const borderTemplate = borderOptions.includes(border) ? `border-${border}` : "";
-  const horizontalCard = isHorizontalMobile ? "horizontal-content-wrapper" : "";
+  const horizontalCard = isHorizontalMobile ? "horizontal-content-wrapper" : "content-wrapper";
   return (
     <div
       className="arr--content-wrapper"
diff --git a/app/isomorphic/arrow/components/Molecules/StorycardContent/storycardContent.m.css b/app/isomorphic/arrow/components/Molecules/StorycardContent/storycardContent.m.css
index 7b72b8533..c8e65c29d 100644
--- a/app/isomorphic/arrow/components/Molecules/StorycardContent/storycardContent.m.css
+++ b/app/isomorphic/arrow/components/Molecules/StorycardContent/storycardContent.m.css
@@ -1,4 +1,5 @@
 @custom-media --viewport-medium (width >= 768px);
+@custom-media --viewport-small (width < 768px);
 
 .wrapper {
   flex-basis: 60%;
@@ -7,15 +8,20 @@
   }
 }
 .horizontal-content-wrapper.border-full {
-  padding: 16px 16px 16px 0;
+  padding: 0;
   @media (--viewport-medium) {
-    padding: 0 16px 16px 16px;
+    padding: 0 var(--arrow-spacing-m) var(--arrow-spacing-m);
   }
 }
 
 .border-full {
-  padding: 12px 0 0 0;
   @media (--viewport-medium) {
-    padding: 0 16px 16px 16px;
+    padding: 0 var(--arrow-spacing-m) var(--arrow-spacing-m);
+  }
+}
+
+.border-full.content-wrapper {
+  @media (--viewport-small) {
+    padding: 0 var(--arrow-spacing-s) var(--arrow-spacing-s);
   }
 }
diff --git a/app/isomorphic/arrow/components/Rows/AsideCollection/aside-collection.m.css b/app/isomorphic/arrow/components/Rows/AsideCollection/aside-collection.m.css
index fc2c98c21..34c64d7e8 100644
--- a/app/isomorphic/arrow/components/Rows/AsideCollection/aside-collection.m.css
+++ b/app/isomorphic/arrow/components/Rows/AsideCollection/aside-collection.m.css
@@ -98,6 +98,24 @@ html[dir="rtl"] {
   }
 }
 
+.sticky.top-header-six > :last-child {
+  @include tablet {
+    top: 135px;
+    @include desktop {
+      top: 155px;
+    }
+  }
+}
+
+.sticky.top-header-five > :last-child {
+  @include tablet {
+    top: 55px;
+    @include desktop {
+      top: 120px;
+    }
+  }
+}
+
 .dark {
   color: var(--arrow-c-mono2);
 }
diff --git a/app/isomorphic/arrow/components/Rows/AsideCollection/index.js b/app/isomorphic/arrow/components/Rows/AsideCollection/index.js
index 7abdf7b4e..d3e0665c8 100644
--- a/app/isomorphic/arrow/components/Rows/AsideCollection/index.js
+++ b/app/isomorphic/arrow/components/Rows/AsideCollection/index.js
@@ -1,7 +1,7 @@
 import get from "lodash.get";
 import PropTypes from "prop-types";
 import React, { useEffect, useState } from "react";
-import { isEmpty, getCollectionData, getTextColor } from "../../../utils/utils";
+import { getCollectionData, getTextColor } from "../../../utils/utils";
 import { AuthorWithTime } from "../../Atoms/AuthorWithTimestamp";
 import { CollectionName } from "../../Atoms/CollectionName";
 import { Headline } from "../../Atoms/Headline";
@@ -12,16 +12,16 @@ import { StateProvider } from "../../SharedContext";
 import KeyEvents from "../../Molecules/KeyEvents";
 import "./aside-collection.m.css";
 
-const StoryCollection = ({ data, slotData, horizontal, config, opts }) => {
+const StoryCollection = ({ data, slotData, horizontal, config, opts, loadRelatedStories = null, story }) => {
   const { title = "", collectionSlug = "" } = slotData || config;
   const { theme = "" } = config;
   const heading = title || "Related Stories";
   const isHorizontal = horizontal ? "horizontal-wrapper" : "";
-  const mountAt = get(config, ["mountAtPrefix"], "");
+  const mountAtPrefix = get(config, ["mountAtPrefix"]) || "";
   const [storyList, updateStoryList] = useState([]);
   const [collectionData, updateCollectionData] = useState([]);
   const updateStoryListItems = async (slug) => {
-    const collectionDataResponse = await getCollectionData(slug, mountAt);
+    const collectionDataResponse = await getCollectionData(slug, mountAtPrefix);
     updateCollectionData(collectionDataResponse);
     const storyItems = collectionDataResponse.items;
     updateStoryList(storyItems);
@@ -34,21 +34,31 @@ const StoryCollection = ({ data, slotData, horizontal, config, opts }) => {
   }, [collectionSlug]);
 
   useEffect(() => {
-    if (!collectionSlug && data) {
-      const storyItems = data.items || data;
-      updateStoryList(storyItems);
+    if (!collectionSlug) {
+      if (!data && loadRelatedStories) {
+        loadRelatedStories(story, mountAtPrefix).then((response) => {
+          updateStoryList(response?.relatedStories);
+        });
+      } else if (data) {
+        const storyItems = data.items || data;
+        updateStoryList(storyItems);
+      } else {
+        updateStoryList([]);
+      }
     }
   }, [data, collectionSlug]);
 
   const textColor = getTextColor(theme);
 
+  if (horizontal && !storyList?.length) return null;
+
   return (
     <>
       <CollectionName customCollectionName={heading} textColor collection={collectionData} />
       <div styleName="stories">
-        {storyList && storyList.length > 0 ? (
+        {storyList?.length ? (
           storyList.slice(0, 4).map((item) => {
-            const story = item.story || item;
+            const story = item?.story || item;
             return (
               <div styleName="story" key={story.id}>
                 <StoryCard story={story} isHorizontal theme={theme} config={config}>
@@ -86,7 +96,9 @@ StoryCollection.propTypes = {
   config: PropTypes.object,
   horizontal: PropTypes.bool,
   slotData: PropTypes.object,
-  opts: PropTypes.object
+  opts: PropTypes.object,
+  loadRelatedStories: PropTypes.func,
+  story: PropTypes.object
 };
 
 const AsideCollection = ({
@@ -99,12 +111,11 @@ const AsideCollection = ({
   enableKeyEvents = false,
   adComponent,
   widgetComp,
-  storyId,
-  opts = {}
+  opts = {},
+  loadRelatedStories,
+  story
 }) => {
-  if (isEmpty(data)) return null;
-
-  const { theme } = config;
+  const { theme, stickyTopStyle } = config;
   const isHorizontal = horizontal ? "horizontal-wrapper" : "";
   if (horizontal) {
     return (
@@ -114,19 +125,27 @@ const AsideCollection = ({
         style={{ backgroundColor: theme || "initial" }}
         data-test-id="aside-collection"
         data-nosnippet
-        id={`aside-collection-${storyId}`}>
-        <StoryCollection data={data} horizontal={horizontal} config={config} opts={opts} theme1={theme} />
+        id={`aside-collection-${story?.id}`}>
+        <StoryCollection
+          data={data}
+          horizontal={horizontal}
+          config={config}
+          opts={opts}
+          theme1={theme}
+          loadRelatedStories={loadRelatedStories}
+          story={story}
+        />
       </div>
     );
   }
   const isSticky = sticky ? "sticky" : "";
   const asideSlot = (type, slot, index) => {
-    const targetId = slot.targetId ? `widget-${slot.targetId}-${storyId}` : `widget-${index}_${storyId}`;
+    const targetId = slot?.targetId ? `widget-${slot.targetId}-${story?.id}` : `widget-${index}_${story?.id}`;
     switch (type) {
       case "ad":
         return (
           <div styleName="ad-slot" className="aside-collection-ad-slot">
-            {adComponent({ ...slot, id: `ad-${index}_${storyId}` })}
+            {adComponent({ ...slot, id: `ad-${index}_${story?.id}` })}
           </div>
         );
       case "widget":
@@ -138,8 +157,16 @@ const AsideCollection = ({
 
       case "collection":
         return (
-          <div id={`aside-collection-${index}_${storyId}`}>
-            <StoryCollection slotData={slot} data={data} horizontal={horizontal} config={config} opts={opts} />
+          <div id={`aside-collection-${index}_${story?.id}`}>
+            <StoryCollection
+              slotData={slot}
+              data={data}
+              horizontal={horizontal}
+              config={config}
+              opts={opts}
+              loadRelatedStories={loadRelatedStories}
+              story={story}
+            />
           </div>
         );
     }
@@ -148,7 +175,7 @@ const AsideCollection = ({
   return (
     <div
       className="arrow-component arr--aside-collection"
-      styleName={["wrapper", isHorizontal, isSticky].join(" ")}
+      styleName={["wrapper", isHorizontal, isSticky, stickyTopStyle].join(" ")}
       style={{ backgroundColor: theme || "initial" }}
       data-nosnippet
       data-test-id="aside-collection">
@@ -174,13 +201,14 @@ AsideCollection.propTypes = {
   adComponent: PropTypes.func,
   widgetComp: PropTypes.func,
   sticky: PropTypes.bool,
+  story: PropTypes.object,
   keyEventsData: PropTypes.shape({
     story: PropTypes.object,
     config: PropTypes.object,
     showLoadMore: PropTypes.boolean
   }),
   enableKeyEvents: PropTypes.boolean,
-  storyId: PropTypes.string
+  loadRelatedStories: PropTypes.func
 };
 
 export default StateProvider(AsideCollection);
diff --git a/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/author-intro.m.css b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/author-intro.m.css
index 526da4208..1f6d60fbf 100644
--- a/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/author-intro.m.css
+++ b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/author-intro.m.css
@@ -60,11 +60,26 @@
   }
 }
 
+.small-circle .author-name {
+  color: var(--arrow-c-mono2);
+  font-size: var(--arrow-fs-s);
+  line-height: var(--arrow-lh-3);
+  font-weight: var(--arrow-fw-bold);
+  text-transform: capitalize;
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+    margin-top: var(--arrow-spacing-m);
+  }
+}
+
 .default .introduction-card {
   display: flex;
   flex: 1;
   justify-content: center;
   flex-direction: column;
+  .author-name {
+    text-transform: capitalize;
+  }
   @media (min-width: mobile) {
     grid-column: 2/8;
   }
@@ -195,17 +210,6 @@
   }
 }
 
-.small-circle .author-name {
-  color: var(--arrow-c-mono2);
-  font-size: var(--arrow-fs-s);
-  line-height: var(--arrow-lh-3);
-  font-weight: var(--arrow-fw-bold);
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-m);
-    margin-top: var(--arrow-spacing-m);
-  }
-}
-
 .small-circle .author-image > div {
   margin-right: var(--arrow-spacing-m);
   @media (min-width: mobile) {
diff --git a/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/index.js b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/index.js
index 850be2d41..66ec824df 100644
--- a/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/index.js
+++ b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/index.js
@@ -26,7 +26,7 @@ const AuthorIntroductionCard = ({ data = {}, config = {}, template = "" }) => {
   const getIcon = (item) => {
     switch (item) {
       case "twitter":
-        return <Twitter />;
+        return <Twitter color={textColor === "dark" ? "#000" : "#fff"} />;
       case "facebook":
         return <Facebook />;
       case "youtube":
diff --git a/app/isomorphic/arrow/components/Rows/CollectionFilter/index.js b/app/isomorphic/arrow/components/Rows/CollectionFilter/index.js
index 29ad90b33..1ff1299fe 100644
--- a/app/isomorphic/arrow/components/Rows/CollectionFilter/index.js
+++ b/app/isomorphic/arrow/components/Rows/CollectionFilter/index.js
@@ -95,7 +95,7 @@ const CollectionFilter = ({ collection, config = {} }) => {
         borderColor={borderColor}
         config={config}>
         <HeroImage story={story} isHorizontalMobile />
-        <StorycardContent story={story} border={border} borderColor={borderColor} config={config} />
+        <StorycardContent story={story} border={border} isHorizontalMobile borderColor={borderColor} config={config} />
       </StoryCard>
     </div>
   );
@@ -104,7 +104,7 @@ const CollectionFilter = ({ collection, config = {} }) => {
     <div styleName="card" key={index}>
       <StoryCard story={story} isHorizontal theme={theme} border={border} borderColor={borderColor} config={config}>
         <HeroImage story={story} isHorizontal aspectRatio={[[1, 1]]} />
-        <StorycardContent story={story} isHorizontal border={border} borderColor={borderColor} config={config} />
+        <StorycardContent story={story} isHorizontalMobile border={border} borderColor={borderColor} config={config} />
       </StoryCard>
     </div>
   );
@@ -123,7 +123,13 @@ const CollectionFilter = ({ collection, config = {} }) => {
                 borderColor={borderColor}
                 config={config}>
                 <HeroImage story={story} isHorizontal aspectRatio={[[1, 1]]} />
-                <StorycardContent story={story} border={border} borderColor={borderColor} config={config} />
+                <StorycardContent
+                  story={story}
+                  isHorizontalMobile
+                  border={border}
+                  borderColor={borderColor}
+                  config={config}
+                />
               </StoryCard>
             </div>
           );
diff --git a/app/isomorphic/arrow/components/Rows/ElevenStories/11-stories.m.css b/app/isomorphic/arrow/components/Rows/ElevenStories/11-stories.m.css
index 9dfe7e100..403b93f34 100644
--- a/app/isomorphic/arrow/components/Rows/ElevenStories/11-stories.m.css
+++ b/app/isomorphic/arrow/components/Rows/ElevenStories/11-stories.m.css
@@ -1,5 +1,5 @@
-@custom-media --viewport-medium (width >= 768px);
-@custom-media --viewport-small (width < 768px);
+@custom-media --viewport-medium (width >= 992px);
+@custom-media --viewport-small (width < 992px);
 
 .eleven-stories {
   padding: 0 var(--arrow-spacing-s);
@@ -22,7 +22,7 @@
   margin: var(--arrow-spacing-xs) 0;
   @media (--viewport-medium) {
     display: grid;
-    grid-template-columns: 1fr 1px 2fr 1px 1fr;
+    grid-template-columns: minmax(300px, 1fr) 1px 2fr 1px minmax(300px, 1fr);
     grid-gap: var(--arrow-spacing-l);
     margin: var(--arrow-spacing-m) 0;
   }
diff --git a/app/isomorphic/arrow/components/Rows/FullScreenSlider/full-screen-slider.m.css b/app/isomorphic/arrow/components/Rows/FullScreenSlider/full-screen-slider.m.css
index d0616bb98..722e972c9 100644
--- a/app/isomorphic/arrow/components/Rows/FullScreenSlider/full-screen-slider.m.css
+++ b/app/isomorphic/arrow/components/Rows/FullScreenSlider/full-screen-slider.m.css
@@ -63,6 +63,10 @@
   }
 }
 
+.full-screen-slider-wrapper :global(.arr--story-content .arr--headline h1) {
+  text-transform: none;
+}
+
 .full-screen-slider {
   :global .left-arrow {
     @media (--viewport-medium) {
diff --git a/app/isomorphic/arrow/components/Rows/MagazineEditions/index.js b/app/isomorphic/arrow/components/Rows/MagazineEditions/index.js
index 0aa317ecc..80eb5971a 100644
--- a/app/isomorphic/arrow/components/Rows/MagazineEditions/index.js
+++ b/app/isomorphic/arrow/components/Rows/MagazineEditions/index.js
@@ -3,7 +3,14 @@ import PropTypes from "prop-types";
 import { useDispatch, useSelector } from "react-redux";
 import { MagazineCoverImageCard } from "../../Atoms/MagazineCoverImage";
 import { CollectionName } from "../../Atoms/CollectionName";
-import { generateNavigateSlug, getTextColor, getTimeStamp, navigateTo, timestampToFormat } from "../../../utils/utils";
+import {
+  generateNavigateSlug,
+  getTextColor,
+  getTimeStamp,
+  navigateTo,
+  timestampToFormat,
+  getTimeStampConfig
+} from "../../../utils/utils";
 import "./magazine-editions.m.css";
 import { StateProvider } from "../../SharedContext";
 import get from "lodash/get";
@@ -24,6 +31,7 @@ const MagazineEditions = ({ collection = [], config = {}, onClick, limit, showLo
   const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
   const dispatch = useDispatch();
   const url = generateNavigateSlug(collection, { ...qtConfig, ...config });
+  const timeStampConfig = getTimeStampConfig(qtConfig);
 
   return (
     <div
@@ -43,10 +51,6 @@ const MagazineEditions = ({ collection = [], config = {}, onClick, limit, showLo
           {issues.slice(0, limit).map((issue, index) => {
             const { name, "created-at": createdAt, "collection-date": issueDate } = issue;
             const date = issueDate || createdAt;
-            const timeStampConfig = {
-              isUpperCase: true,
-              disableMeridiem: true
-            };
             return (
               <div key={index} data-test-id={`current-issue-${index}`}>
                 <MagazineCoverImageCard collection={issue} config={{ ...config, isArchivePage: false }} />
diff --git a/app/isomorphic/arrow/components/Rows/MagazineHeaderCard/index.js b/app/isomorphic/arrow/components/Rows/MagazineHeaderCard/index.js
index cd910a882..50c44dc04 100644
--- a/app/isomorphic/arrow/components/Rows/MagazineHeaderCard/index.js
+++ b/app/isomorphic/arrow/components/Rows/MagazineHeaderCard/index.js
@@ -2,7 +2,14 @@ import React from "react";
 import PropTypes from "prop-types";
 import { CollectionName } from "../../Atoms/CollectionName";
 import { LoadmoreButton } from "../../Atoms/Loadmore";
-import { generateNavigateSlug, getTextColor, getTimeStamp, navigateTo, timestampToFormat } from "../../../utils/utils";
+import {
+  generateNavigateSlug,
+  getTextColor,
+  getTimeStamp,
+  navigateTo,
+  timestampToFormat,
+  getTimeStampConfig
+} from "../../../utils/utils";
 import "./magazine-cards.m.css";
 import { StateProvider } from "../../SharedContext";
 import { MagazineCoverImageCard } from "../../Atoms/MagazineCoverImage";
@@ -18,10 +25,8 @@ const MagazineHeaderCard = ({ collection = {}, config = {} }) => {
   const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
   const url = generateNavigateSlug(collection, qtConfig, customUrlPath);
   const date = issueDate || createdAt;
-  const timeStampConfig = {
-    isUpperCase: true,
-    disableMeridiem: true
-  };
+  const timeStampConfig = getTimeStampConfig(qtConfig);
+
   return (
     <div
       className="full-width-with-padding arrow-component"
diff --git a/app/isomorphic/arrow/components/Rows/MagazineWidget/index.js b/app/isomorphic/arrow/components/Rows/MagazineWidget/index.js
index 299fc66a2..0089ecd95 100644
--- a/app/isomorphic/arrow/components/Rows/MagazineWidget/index.js
+++ b/app/isomorphic/arrow/components/Rows/MagazineWidget/index.js
@@ -8,7 +8,8 @@ import {
   clientWidth,
   generateNavigateSlug,
   navigateTo,
-  timestampToFormat
+  timestampToFormat,
+  getTimeStampConfig
 } from "../../../utils/utils";
 import "../MagazineHeaderCard/magazine-cards.m.css";
 import { StateProvider } from "../../SharedContext";
@@ -38,10 +39,8 @@ const MagazineWidget = ({ collection = {}, config = {} }) => {
   });
   const sliceValue = 4;
   const isTablet = clientWidth("tablet");
-  const timeStampConfig = {
-    isUpperCase: true,
-    disableMeridiem: true
-  };
+  const timeStampConfig = getTimeStampConfig(qtConfig);
+
   const date = issueDate || createdAt;
 
   const storyCards = (items) => {
@@ -65,7 +64,7 @@ const MagazineWidget = ({ collection = {}, config = {} }) => {
           return (
             <>
               <StoryCard story={story} border={borderSettings} isHorizontal config={config}>
-                <HeroImage story={story} isHorizontal aspectRatio={[[16, 9]]} />
+                <HeroImage story={story} isHorizontal aspectRatio={[[16, 9]]} initialAltImage={true} />
                 <StorycardContent story={story} config={config}>
                   <Headline story={story} premiumStoryIconConfig={config} />
                   <AuthorWithTime config={localizationConfig} story={story} prefix="By" collectionId={id} />
diff --git a/app/isomorphic/arrow/components/Rows/OneColStoryList/one-col-story-list.m.css b/app/isomorphic/arrow/components/Rows/OneColStoryList/one-col-story-list.m.css
index 21fa25785..2800a862d 100644
--- a/app/isomorphic/arrow/components/Rows/OneColStoryList/one-col-story-list.m.css
+++ b/app/isomorphic/arrow/components/Rows/OneColStoryList/one-col-story-list.m.css
@@ -3,7 +3,6 @@
 
 .one-col-story-list-wrapper {
   padding: 0 var(--arrow-spacing-s);
-
   @media (--viewport-medium) {
     padding: 0;
   }
@@ -12,7 +11,6 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-
   @media (--viewport-medium) {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
@@ -28,7 +26,6 @@
 
 .one-col-border-full {
   margin-bottom: var(--arrow-spacing-m);
-
   @media (--viewport-medium) {
     margin-bottom: var(--arrow-spacing-l);
   }
@@ -40,7 +37,6 @@
 
 .one-col-border-default {
   margin-bottom: var(--arrow-spacing-m);
-
   @media (--viewport-medium) {
     margin-bottom: var(--arrow-spacing-l);
   }
@@ -79,10 +75,8 @@
 }
 
 .story-card-content-wrapper {
-  padding: 12px 8px 12px 0;
-
   @media (--viewport-medium) {
-    padding: 16px 16px 16px 0;
+    padding: var(--arrow-spacing-m) var(--arrow-spacing-m) var(--arrow-spacing-m) 0;
   }
 }
 
diff --git a/app/isomorphic/arrow/components/Rows/OpinionCollection/index.js b/app/isomorphic/arrow/components/Rows/OpinionCollection/index.js
index ccc4ee43f..52f9c99af 100644
--- a/app/isomorphic/arrow/components/Rows/OpinionCollection/index.js
+++ b/app/isomorphic/arrow/components/Rows/OpinionCollection/index.js
@@ -36,7 +36,6 @@ const OpinionCollection = ({ collection, config, getMoreStories, isLoadMoreVisib
     localizationConfig = {}
   } = config;
   const { type = "story", component = null } = get(slotConfig, [0], {});
-
   const dispatch = useDispatch();
   const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
 
@@ -44,7 +43,6 @@ const OpinionCollection = ({ collection, config, getMoreStories, isLoadMoreVisib
   const borderStyle = border === "fullBorder" ? "border" : "";
   const slot = type === "ad" ? getSlot(type, component) : null;
   const adStyle = slot ? "custom-grid" : "";
-
   const getLoadMore = (opts) => {
     if (!isLoadMoreVisible) return null;
 
@@ -84,7 +82,7 @@ const OpinionCollection = ({ collection, config, getMoreStories, isLoadMoreVisib
           <Headline story={story} />
           <AuthorWithTime
             story={story}
-            config={{ ...config, ...localizationConfig, disableMeridiem: true, showAuthor: false }}
+            config={{ ...localizationConfig, showAuthor: false }}
             collectionId={collection.id}
           />
         </div>
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/index.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/index.js
index c8f4709d8..7672f659e 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/index.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/index.js
@@ -2,6 +2,7 @@ import { SocialShare } from "@quintype/components";
 import React from "react";
 import { useSelector } from "react-redux";
 import get from "lodash.get";
+import cloneDeep from "lodash/cloneDeep";
 import PropTypes from "prop-types";
 import { AuthorCard } from "../../../Atoms/AuthorCard";
 import { CaptionAttribution } from "../../../Atoms/CaptionAttribution";
@@ -17,16 +18,21 @@ import { StoryElementCard, SlotAfterStory } from "../../../Molecules/StoryElemen
 import { StoryTags } from "../../../Atoms/StoryTags";
 import AsideCollection from "../../AsideCollection";
 import { StoryReview } from "../../../Atoms/StoryReview";
+import { getTextColor } from "../../../../utils/utils";
+import { getTitleElementsIndex, isIntroCardPresent, getFirstDescriptionElementsIndex } from "./listicleUtils.js";
 
 const ListicleStoryTemplate = ({
   story = {},
+  accessLoading = false,
   config = {},
   storyElementsConfig,
   adComponent,
   widgetComp = () => {},
   firstChild,
   secondChild,
-  enableDarkMode
+  enableDarkMode,
+  loadRelatedStories,
+  visibleCardsRender = null
 }) => {
   const {
     theme = "",
@@ -45,11 +51,87 @@ const ListicleStoryTemplate = ({
   const { "bullet-type": storyBulletType = "" } = story;
   const storyId = get(story, ["id"], "");
   const isNumberedBullet = storyBulletType !== "bullets";
+  const ascendingNumbers = storyBulletType === "123";
+  const numberOfCards = visibledCards.length;
 
   const qtState = useSelector((state) => get(state, ["qt"], {}));
   const timezone = get(qtState, ["data", "timezone"], null);
   const mountAt = get(qtState, ["config", "mountAt"], "");
 
+  const introCardPresent = isIntroCardPresent(visibledCards);
+  const numberedBulletColor = getTextColor(theme) === "dark" ? "black" : "white";
+
+  const visibleCardsWithInlineBullets = visibledCards.map((card, index) => {
+    const titleElementsIndex = getTitleElementsIndex(card);
+    const isTitlePresent = titleElementsIndex > -1;
+    const titleCard = isTitlePresent ? cloneDeep(get(card, ["story-elements", titleElementsIndex], {})) : {};
+
+    if ((introCardPresent && index === 0) || !isTitlePresent) return card;
+    if (isNumberedBullet) {
+      const ascendingBulletNumber = introCardPresent ? index : index + 1;
+      const bulletNumber = ascendingNumbers ? ascendingBulletNumber : numberOfCards - index;
+      titleCard.text = `${bulletNumber}. ${titleCard.text}`;
+    } else {
+      titleCard.hasDashedBullet = true;
+    }
+
+    return {
+      ...card,
+      "story-elements": Object.assign([], card["story-elements"], { [titleElementsIndex]: titleCard })
+    };
+  });
+
+  function addNonInlineBullets(opts) {
+    const {
+      cardIndex,
+      introCardPresent,
+      isNumberedBullet,
+      numberedBulletColor,
+      ascendingNumbers,
+      numberOfCards
+    } = opts;
+    if (introCardPresent && cardIndex === 0) return;
+    if (!isNumberedBullet) return <div styleName="bullet-style-dash" />;
+    const ascendingBulletNumber = introCardPresent ? cardIndex : cardIndex + 1;
+    return (
+      <div styleName="bullet-style-number" style={{ color: numberedBulletColor }}>
+        {ascendingNumbers ? ascendingBulletNumber : numberOfCards - cardIndex}.
+      </div>
+    );
+  }
+
+  const visibleCards = visibleCardsWithInlineBullets.map((card, index) => {
+    const titleElementsIndex = getTitleElementsIndex(card);
+    const isTitlePresent = titleElementsIndex > -1;
+    const firstDescriptionElementsIndex = getFirstDescriptionElementsIndex(card);
+    const opts = {
+      isTitlePresent,
+      firstDescriptionElementsIndex,
+      cardIndex: index,
+      introCardPresent,
+      isNumberedBullet,
+      numberedBulletColor,
+      ascendingNumbers,
+      numberOfCards,
+      addNonInlineBullets
+    };
+
+    return (
+      <React.Fragment key={card.id}>
+        <StoryElementCard
+          story={story}
+          card={card}
+          key={card.id}
+          config={storyElementsConfig}
+          listicleBulletOpts={opts}
+          adComponent={adComponent}
+          widgetComp={widgetComp}
+          enableDarkMode={enableDarkMode}
+        />
+      </React.Fragment>
+    );
+  });
+
   // Content Blocks
   const HeroImageBlock = (settings) => {
     const { widths = [320, 480, 768, 1024, 1140], aspectRatio = [[16, 9]] } = settings;
@@ -103,27 +185,14 @@ const ListicleStoryTemplate = ({
     <>
       <StoryReview theme={theme} story={story} />
       <div styleName={`body-block ${isNumberedBullet ? "numbered-bullet-style" : ""}`}>
-        {visibledCards.map((card, index) => {
-          return (
-            <React.Fragment key={card.id}>
-              {!isNumberedBullet ? (
-                <div styleName="bullet-style-dash" />
-              ) : (
-                <div styleName="bullet-style-number">{index + 1}.</div>
-              )}
-              <StoryElementCard
-                story={story}
-                card={card}
-                key={card.id}
-                config={storyElementsConfig}
-                adComponent={adComponent}
-                widgetComp={widgetComp}
-                enableDarkMode={enableDarkMode}
-              />
-            </React.Fragment>
-          );
-        })}
-        {firstChild}
+        {visibleCardsRender ? (
+          visibleCardsRender(visibleCards, firstChild)
+        ) : (
+          <>
+            {visibleCards}
+            {firstChild}
+          </>
+        )}
         <div styleName="story-tags">
           <StoryTags tags={story.tags} />
           <SlotAfterStory
@@ -144,11 +213,27 @@ const ListicleStoryTemplate = ({
         adComponent={adComponent}
         widgetComp={widgetComp}
         sticky={true}
-        storyId={storyId}
+        story={story}
         opts={publishedDetails}
+        loadRelatedStories={loadRelatedStories}
       />
     );
 
+  const HorizontalAsideCollection = () =>
+    asideCollection && (
+      <div styleName="horizontal-aside-collection">
+        <AsideCollection
+          horizontal={true}
+          {...asideCollection}
+          widgetComp={widgetComp}
+          adComponent={adComponent}
+          story={story}
+          opts={publishedDetails}
+          loadRelatedStories={loadRelatedStories}
+        />
+      </div>
+    );
+
   // Templates
   const DefaultTemplate = () => (
     <>
@@ -180,6 +265,7 @@ const ListicleStoryTemplate = ({
           <AuthorBlock />
           <BodyBlock />
         </div>
+        <HorizontalAsideCollection />
       </div>
     </div>
   );
@@ -215,6 +301,7 @@ const ListicleStoryTemplate = ({
           <AuthorBlock />
           <BodyBlock />
         </div>
+        <HorizontalAsideCollection />
       </div>
     </div>
   );
@@ -236,6 +323,7 @@ const ListicleStoryTemplate = ({
           <AuthorBlock />
           <BodyBlock />
         </div>
+        <HorizontalAsideCollection />
       </div>
     </div>
   );
@@ -255,6 +343,7 @@ const ListicleStoryTemplate = ({
           <AuthorBlock />
           <BodyBlock />
         </div>
+        <HorizontalAsideCollection />
       </div>
     </div>
   );
@@ -288,6 +377,7 @@ const ListicleStoryTemplate = ({
 
 ListicleStoryTemplate.propTypes = {
   story: PropTypes.object,
+  accessLoading: PropTypes.bool,
   config: PropTypes.shape({
     templateType: PropTypes.string,
     authorCard: PropTypes.object,
@@ -299,7 +389,9 @@ ListicleStoryTemplate.propTypes = {
   adComponent: PropTypes.func,
   widgetComp: PropTypes.func,
   premiumStoryIconConfig: PropTypes.object,
-  enableDarkMode: PropTypes.bool
+  enableDarkMode: PropTypes.bool,
+  loadRelatedStories: PropTypes.func,
+  visibleCardsRender: PropTypes.func | undefined
 };
 
 export default StateProvider(ListicleStoryTemplate);
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.m.css b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.m.css
index eacf2c4ff..ec1fa8666 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.m.css
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicle-story.m.css
@@ -97,6 +97,12 @@
   }
 }
 
+.horizontal-aside-collection {
+  @include tablet {
+    grid-column: 2/12;
+  }
+}
+
 .left-column {
   @include tablet {
     grid-column: 1 / 8;
@@ -239,9 +245,9 @@
   margin-bottom: var(--arrow-spacing-s);
   @include tablet {
     margin-bottom: var(--arrow-spacing-20);
-    @include desktop {
-      margin-top: var(--arrow-spacing-xxs);
-    }
+  }
+  @include desktop {
+    margin-top: var(--arrow-spacing-xxs);
   }
 }
 
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicleUtils.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicleUtils.js
new file mode 100644
index 000000000..663a132b3
--- /dev/null
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/ListicleStoryTemplates/listicleUtils.js
@@ -0,0 +1,16 @@
+import get from "lodash.get";
+
+export function getTitleElementsIndex(card) {
+  const cardElements = get(card, ["story-elements"], []);
+  return cardElements.findIndex((element) => element.type === "title");
+}
+
+export function isIntroCardPresent(cards) {
+  return cards.some((card) => card["card-type"] === "introduction");
+}
+
+export function getFirstDescriptionElementsIndex(card) {
+  // element index to place non inline bullets, when cards title is absent
+  const cardElements = get(card, ["story-elements"], []);
+  return cardElements.findIndex((element) => element.type !== "ad" && element.type !== "widget");
+}
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/index.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/index.js
index 9a6df6a2a..698393b84 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/index.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/index.js
@@ -8,13 +8,16 @@ import "./live-blog.m.css";
 
 const LiveBlogStoryTemplate = ({
   story = {},
+  accessLoading = false,
   config = {},
   storyElementsConfig,
   adComponent,
   widgetComp,
   firstChild,
   secondChild,
-  enableDarkMode
+  enableDarkMode,
+  loadRelatedStories,
+  visibleCardsRender = null
 }) => {
   const { theme = "", templateType = "default", verticalShare = "" } = config;
 
@@ -31,6 +34,7 @@ const LiveBlogStoryTemplate = ({
       styleName={`${containerClass} ${verticalShare} wrapper`}>
       <LiveBlogStoryTemplates
         templateType={templateType}
+        accessLoading={accessLoading}
         story={story}
         storyElementsConfig={storyElementsConfig}
         config={config}
@@ -41,6 +45,8 @@ const LiveBlogStoryTemplate = ({
         timezone={timezone}
         enableDarkMode={enableDarkMode}
         mountAt={mountAt}
+        loadRelatedStories={loadRelatedStories}
+        visibleCardsRender={visibleCardsRender}
       />
     </div>
   );
@@ -48,6 +54,7 @@ const LiveBlogStoryTemplate = ({
 
 LiveBlogStoryTemplate.propTypes = {
   story: PropTypes.object,
+  accessLoading: PropTypes.bool,
   config: PropTypes.shape({
     templateType: PropTypes.string
   }),
@@ -56,7 +63,9 @@ LiveBlogStoryTemplate.propTypes = {
   storyElementsConfig: PropTypes.object,
   adComponent: PropTypes.func,
   widgetComp: PropTypes.func,
-  enableDarkMode: PropTypes.bool
+  enableDarkMode: PropTypes.bool,
+  loadRelatedStories: PropTypes.func,
+  visibleCardsRender: PropTypes.func | undefined
 };
 
 export default StateProvider(LiveBlogStoryTemplate);
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/live-blog.m.css b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/live-blog.m.css
index 4db3da036..ac997a052 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/live-blog.m.css
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/live-blog.m.css
@@ -148,9 +148,9 @@
     margin-top: 40px;
     grid-column: 10 / container-end;
     grid-row: 2 / auto;
-    @include desktop {
-      margin-top: 60px;
-    }
+  }
+  @include desktop {
+    margin-top: 60px;
   }
 }
 
@@ -236,15 +236,15 @@
   justify-self: flex-end;
   @include tablet {
     grid-column: 9 / grid-end;
-    @include desktop {
-      position: sticky;
-      position: -webkit-sticky;
-      grid-column: 3/4;
-      grid-row: 2/3;
-      align-self: flex-start;
-      margin-top: var(--arrow-spacing-xs);
-      top: 120px;
-    }
+  }
+  @include desktop {
+    position: sticky;
+    position: -webkit-sticky;
+    grid-column: 3/4;
+    grid-row: 2/3;
+    align-self: flex-start;
+    margin-top: var(--arrow-spacing-xs);
+    top: 120px;
   }
 }
 
@@ -256,9 +256,9 @@
   :global(.arr--share) {
     @include tablet {
       grid-column: 9/10;
-      @include desktop {
-        grid-column: grid-start/container-start;
-      }
+    }
+    @include desktop {
+      grid-column: grid-start/container-start;
     }
   }
 }
@@ -267,9 +267,9 @@
   :global(.arr--share) {
     @include tablet {
       grid-column: 8/9;
-      @include desktop {
-        grid-column: grid-start/container-start;
-      }
+    }
+    @include desktop {
+      grid-column: grid-start/container-start;
     }
   }
 }
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/templates.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/templates.js
index 23786aa05..9f8f91a7c 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/templates.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/templates.js
@@ -22,6 +22,7 @@ import { StoryReview } from "../../../Atoms/StoryReview";
 
 export const LiveBlogStoryTemplates = ({
   story = {},
+  accessLoading,
   config = {},
   storyElementsConfig,
   adComponent,
@@ -30,7 +31,9 @@ export const LiveBlogStoryTemplates = ({
   secondChild,
   timezone,
   enableDarkMode,
-  mountAt
+  mountAt,
+  loadRelatedStories,
+  visibleCardsRender = null
 }) => {
   const {
     theme = "",
@@ -159,9 +162,9 @@ export const LiveBlogStoryTemplates = ({
         </div>
         <StoryReview theme={theme} story={story} />
         {showKeyEvents()}
-        <StoryCards />
+        {visibleCardsRender ? visibleCardsRender(<StoryCards />, null) : <StoryCards />}
         <div styleName="space-32">
-          {firstChild}
+          {!accessLoading && firstChild}
           <StoryTags tags={story.tags} />
           <SlotAfterStory
             id={story.id}
@@ -196,8 +199,9 @@ export const LiveBlogStoryTemplates = ({
               sticky={true}
               enableKeyEvents={!isMobile}
               keyEventsData={{ story, config, showLoadMore: false }}
-              storyId={storyId}
+              story={story}
               opts={publishedDetails}
+              loadRelatedStories={loadRelatedStories}
             />
           )}
         </div>
@@ -226,8 +230,9 @@ export const LiveBlogStoryTemplates = ({
               {...asideCollection}
               adComponent={adComponent}
               widgetComp={widgetComp}
-              storyId={storyId}
+              story={story}
               opts={publishedDetails}
+              loadRelatedStories={loadRelatedStories}
             />
           </div>
         )}
@@ -256,8 +261,9 @@ export const LiveBlogStoryTemplates = ({
               {...asideCollection}
               adComponent={adComponent}
               widgetComp={widgetComp}
-              storyId={storyId}
+              story={story}
               opts={publishedDetails}
+              loadRelatedStories={loadRelatedStories}
             />
           </div>
         )}
@@ -288,8 +294,9 @@ export const LiveBlogStoryTemplates = ({
               sticky={true}
               enableKeyEvents={!isMobile}
               keyEventsData={{ story, config, showLoadMore: false }}
-              storyId={storyId}
+              story={story}
               opts={publishedDetails}
+              loadRelatedStories={loadRelatedStories}
             />
           )}
         </div>
@@ -316,8 +323,9 @@ export const LiveBlogStoryTemplates = ({
               {...asideCollection}
               adComponent={adComponent}
               widgetComp={widgetComp}
-              storyId={storyId}
+              story={story}
               opts={publishedDetails}
+              loadRelatedStories={loadRelatedStories}
             />
           </div>
         )}
@@ -346,8 +354,9 @@ export const LiveBlogStoryTemplates = ({
               {...asideCollection}
               adComponent={adComponent}
               widgetComp={widgetComp}
-              storyId={storyId}
+              story={story}
               opts={publishedDetails}
+              loadRelatedStories={loadRelatedStories}
             />
           </div>
         )}
@@ -377,6 +386,7 @@ export const LiveBlogStoryTemplates = ({
 
 LiveBlogStoryTemplates.propTypes = {
   story: PropTypes.object,
+  accessLoading: PropTypes.bool,
   config: PropTypes.shape({
     templateType: PropTypes.string,
     authorCard: PropTypes.object,
@@ -388,5 +398,8 @@ LiveBlogStoryTemplates.propTypes = {
   storyElementsConfig: PropTypes.object,
   adComponent: PropTypes.func,
   widgetComp: PropTypes.func,
-  enableDarkMode: PropTypes.bool
+  enableDarkMode: PropTypes.bool,
+  loadRelatedStories: PropTypes.func,
+  mountAt: PropTypes.string,
+  visibleCardsRender: PropTypes.func | undefined
 };
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/index.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/index.js
index ee7aa90a2..f6ce52a94 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/index.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/index.js
@@ -21,13 +21,16 @@ import "./photo.m.css";
 
 const PhotoStory = ({
   story = {},
+  accessLoading = false,
   config = {},
   storyElementsConfig,
   widgetComp,
   adComponent,
   firstChild,
   secondChild,
-  enableDarkMode
+  enableDarkMode,
+  loadRelatedStories,
+  visibleCardsRender = null
 }) => {
   const {
     theme = "",
@@ -78,6 +81,20 @@ const PhotoStory = ({
   };
 
   const StoryData = () => {
+    const visibleCards = visibledCards.map((card) => {
+      return (
+        <PhotoStoryElement
+          story={story}
+          card={card}
+          key={get(card, ["id"], "")}
+          config={{ ...storyElementsConfig, theme }}
+          adComponent={adComponent}
+          widgetComp={widgetComp}
+          enableDarkMode={enableDarkMode}
+          theme={theme}
+        />
+      );
+    });
     return (
       <>
         {authorDetails && (
@@ -96,22 +113,9 @@ const PhotoStory = ({
           {!verticalShare && <SocialShareComponent />}
         </div>
         <StoryReview theme={theme} story={story} />
-        {visibledCards.map((card) => {
-          return (
-            <PhotoStoryElement
-              story={story}
-              card={card}
-              key={get(card, ["id"], "")}
-              config={{ ...storyElementsConfig, theme }}
-              adComponent={adComponent}
-              widgetComp={widgetComp}
-              enableDarkMode={enableDarkMode}
-              theme={theme}
-            />
-          );
-        })}
+        {visibleCardsRender ? visibleCardsRender(visibleCards, null) : visibleCards}
         <div styleName="space-32">
-          {firstChild}
+          {!accessLoading && firstChild}
           <StoryTags tags={story.tags} />
           <SlotAfterStory
             id={story.id}
@@ -155,8 +159,9 @@ const PhotoStory = ({
               widgetComp={widgetComp}
               adComponent={adComponent}
               sticky={true}
-              storyId={storyId}
+              story={story}
               opts={publishedDetails}
+              loadRelatedStories={loadRelatedStories}
             />
           </div>
         )}
@@ -183,8 +188,9 @@ const PhotoStory = ({
               {...asideCollection}
               widgetComp={widgetComp}
               adComponent={adComponent}
-              storyId={storyId}
+              story={story}
               opts={publishedDetails}
+              loadRelatedStories={loadRelatedStories}
             />
           </div>
         )}
@@ -213,8 +219,9 @@ const PhotoStory = ({
               widgetComp={widgetComp}
               adComponent={adComponent}
               sticky={true}
-              storyId={storyId}
+              story={story}
               opts={publishedDetails}
+              loadRelatedStories={loadRelatedStories}
             />
           </div>
         )}
@@ -242,7 +249,9 @@ const PhotoStory = ({
 
   return (
     <div
-      styleName={`${verticalShare} ${isFullBleed ? "fullBleed" : ""}`}
+      styleName={`${verticalShare} ${isFullBleed ? "fullBleed" : ""} ${
+        templateType !== "headline-priority" && !isFullBleed ? "container" : ""
+      }`}
       data-test-id={`photo-story-${templateType}-${kebabCase(imageRender)}`}
       className={`arrow-component arr-story-grid arr--content-wrapper arr--photo-story-template-wrapper ${templateType} `}
       style={{ backgroundColor: theme || "initial" }}>
@@ -253,6 +262,7 @@ const PhotoStory = ({
 
 PhotoStory.propTypes = {
   story: PropTypes.object,
+  accessLoading: PropTypes.bool,
   config: PropTypes.shape({
     templateType: PropTypes.string,
     asideCollection: PropTypes.object
@@ -262,7 +272,9 @@ PhotoStory.propTypes = {
   storyElementsConfig: PropTypes.object,
   adComponent: PropTypes.func,
   widgetComp: PropTypes.func,
-  enableDarkMode: PropTypes.bool
+  enableDarkMode: PropTypes.bool,
+  loadRelatedStories: PropTypes.func,
+  visibleCardsRender: PropTypes.func | undefined
 };
 
 export default StateProvider(PhotoStory);
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/photo.m.css b/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/photo.m.css
index 6b5309fd9..43274517a 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/photo.m.css
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/PhotoStoryTemplates/photo.m.css
@@ -2,12 +2,15 @@
 
 .grid-col-full {
   grid-column: 1/5;
+
   @include tablet {
     grid-column: grid-start / grid-end;
   }
 }
+
 .grid-container {
   grid-column: 1/5;
+
   @include tablet {
     grid-column: container-start / container-end;
   }
@@ -15,31 +18,40 @@
 
 .grid-col-2-10 {
   grid-column: 1/5;
+
   @include tablet {
     grid-column: container-start / 9;
-    @include desktop {
-      grid-column: container-start / 10;
-    }
+  }
+
+  @include desktop {
+    grid-column: container-start / 10;
   }
 }
+
 .grid-col-10-14 {
   grid-column: 1/5;
+
   @include tablet {
     grid-column: 9 / container-end;
     grid-row: 2 / auto;
-    @include desktop {
-      grid-column: 10 / container-end;
-    }
+  }
+
+  @include desktop {
+    grid-column: 10 / container-end;
   }
 }
+
 .grid-col-4-12 {
   grid-column: 1/5;
+
   @include tablet {
     grid-column: 4 / 12;
   }
 }
+
 .grid-col-2-9 {
   grid-column: 1/5;
+
   @include tablet {
     grid-column: container-start / 9;
   }
@@ -47,28 +59,35 @@
 
 .grid-col-9-14 {
   grid-column: 1/5;
+
   @include tablet {
     grid-column: 9 / 14;
     grid-row: 2 / 6;
   }
 }
+
 .story-details {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: var(--arrow-spacing-l);
+
   @include tablet {
     margin-bottom: var(--arrow-spacing-xl);
   }
 }
+
 .side-space {
   margin-top: var(--arrow-spacing-m);
+
   @include tablet {
     margin-top: var(--arrow-spacing-l);
   }
 }
+
 :global(.gap-32) {
   margin-top: var(--arrow-spacing-l);
+
   @include tablet {
     margin-top: var(--arrow-spacing-xl);
   }
@@ -79,12 +98,15 @@
     font-size: var(--arrow-fs-s);
     font-style: italic;
     padding-right: 2px;
+
     @include tablet {
       font-size: var(--arrow-fs-m);
     }
   }
+
   .space-12 {
     margin-top: var(--arrow-spacing-m);
+
     @include tablet {
       margin-top: var(--arrow-spacing-xl);
     }
@@ -98,17 +120,19 @@
 .sticky :global(.arr--share) {
   grid-column: 4/5;
   justify-self: flex-end;
+
   @include tablet {
     grid-column: 8/9;
-    @include desktop {
-      position: sticky;
-      position: -webkit-sticky;
-      grid-column: grid-start/container-start;
-      grid-row: 2/3;
-      align-self: flex-start;
-      margin-top: var(--arrow-spacing-xs);
-      top: 120px;
-    }
+  }
+
+  @include desktop {
+    position: sticky;
+    position: -webkit-sticky;
+    grid-column: grid-start/container-start;
+    grid-row: 2/3;
+    align-self: flex-start;
+    margin-top: var(--arrow-spacing-xs);
+    top: 120px;
   }
 }
 
@@ -116,15 +140,17 @@
   :global(.arr--share) {
     @include tablet {
       grid-column: 9 / grid-end;
-      @include desktop {
-        grid-column: 3/4;
-      }
+    }
+
+    @include desktop {
+      grid-column: 3/4;
     }
   }
 }
 
 .sticky .index-2 {
   z-index: 2;
+
   @include desktop {
     z-index: unset;
   }
@@ -174,3 +200,11 @@
 .space-32 > * {
   margin-top: var(--arrow-spacing-l);
 }
+
+.container {
+  margin: var(--arrow-spacing-xs) 0 0 0;
+
+  @include tablet {
+    margin: var(--arrow-spacing-m) 0 0 0;
+  }
+}
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/index.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/index.js
index 871e1d93b..880d496d9 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/index.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/index.js
@@ -17,7 +17,7 @@ import { PublishDetails } from "../../../Atoms/PublishDetail";
 import { getTextColor } from "../../../../utils/utils";
 
 const Snapshot = ({ story = {}, config = {} }) => {
-  const { theme = "", publishedDetails = {}, premiumStoryIconConfig = {}, authorDetails = {} } = config;
+  const { theme = "", publishedDetails = {}, premiumStoryIconConfig = {}, authorDetails = {}, buttonText } = config;
 
   const textColor = getTextColor(config.theme);
   const timezone = useSelector((state) => get(state, ["qt", "data", "timezone"], null));
@@ -72,7 +72,7 @@ const Snapshot = ({ story = {}, config = {} }) => {
       )}
       <div styleName={`read-more-btn ${textColor}`}>
         <Link href={story.url} rel="noopener noreferrer" aria-label="read-button" styleName="hyperlink-button">
-          Read More
+          {buttonText || "Read More"}
         </Link>
       </div>
     </div>
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/snapshot.m.css b/app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/snapshot.m.css
index 2d40721be..48d73afc9 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/snapshot.m.css
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/Snapshot/snapshot.m.css
@@ -56,11 +56,27 @@
   font-size: var(--arrow-fs-m);
 }
 
-.dark,
+.dark {
+  color: var(--arrow-c-mono2);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.hyperlink-button {
+  border: 1px solid;
+  border-radius: 3px;
+  font-size: var(--arrow-fs-xs);
+  padding: 9px var(--arrow-spacing-l);
+}
+
 .dark.hyperlink-button {
   color: var(--arrow-c-mono2);
+  border: 1px solid var(--arrow-c-mono2);
 }
-.light,
+
 .light.hyperlink-button {
   color: var(--arrow-c-invert-mono2);
+  border: 1px solid var(--arrow-c-invert-mono2);
 }
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/index.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/index.js
index 0f010c684..f8bd513c5 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/index.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/index.js
@@ -15,7 +15,9 @@ const TextStoryTemplate = ({
   widgetComp,
   firstChild,
   secondChild,
-  enableDarkMode
+  enableDarkMode,
+  loadRelatedStories,
+  visibleCardsRender
 }) => {
   const {
     theme = "",
@@ -25,7 +27,6 @@ const TextStoryTemplate = ({
     verticalShare = ""
   } = config;
   const sortOption = templateType === "hero-vertical-priority" ? sort : "";
-
   const supportImageType = {
     default: imageRender,
     "hero-priority-center": imageRender,
@@ -57,6 +58,8 @@ const TextStoryTemplate = ({
         timezone={timezone}
         enableDarkMode={enableDarkMode}
         mountAt={mountAt}
+        loadRelatedStories={loadRelatedStories}
+        visibleCardsRender={visibleCardsRender}
       />
     </div>
   );
@@ -64,6 +67,7 @@ const TextStoryTemplate = ({
 
 TextStoryTemplate.propTypes = {
   story: PropTypes.object,
+  accessLoading: PropTypes.bool,
   config: PropTypes.shape({
     templateType: PropTypes.string,
     authorCard: PropTypes.object,
@@ -75,7 +79,9 @@ TextStoryTemplate.propTypes = {
   adComponent: PropTypes.func,
   widgetComp: PropTypes.func,
   enableDarkMode: PropTypes.bool,
-  mountAt: PropTypes.string
+  mountAt: PropTypes.string,
+  loadRelatedStories: PropTypes.func,
+  visibleCardsRender: PropTypes.func | undefined
 };
 
 export default StateProvider(TextStoryTemplate);
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/templates.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/templates.js
index 5b1d88036..cc843db1c 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/templates.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/templates.js
@@ -26,7 +26,9 @@ export const StoryTemplate = ({
   secondChild,
   timezone,
   enableDarkMode,
-  mountAt
+  mountAt,
+  loadRelatedStories,
+  visibleCardsRender = null
 }) => {
   const {
     theme = "",
@@ -61,8 +63,9 @@ export const StoryTemplate = ({
             {...asideCollection}
             widgetComp={widgetComp}
             adComponent={adComponent}
-            storyId={storyId}
             opts={publishedDetails}
+            loadRelatedStories={loadRelatedStories}
+            story={story}
           />
         </div>
       )
@@ -86,6 +89,20 @@ export const StoryTemplate = ({
   };
 
   const StoryData = () => {
+    const visibleCards = visibledCards.map((card) => {
+      return (
+        <StoryElementCard
+          story={story}
+          card={card}
+          key={get(card, ["id"], "")}
+          config={storyElementsConfig}
+          adComponent={adComponent}
+          widgetComp={widgetComp}
+          enableDarkMode={enableDarkMode}
+        />
+      );
+    });
+
     return (
       <div styleName="gap-16">
         {authorDetails && (
@@ -98,20 +115,14 @@ export const StoryTemplate = ({
           {!verticalShare && <SocialShareComponent />}
         </div>
         <StoryReview theme={theme} story={story} />
-        {visibledCards.map((card) => {
-          return (
-            <StoryElementCard
-              story={story}
-              card={card}
-              key={get(card, ["id"], "")}
-              config={storyElementsConfig}
-              adComponent={adComponent}
-              widgetComp={widgetComp}
-              enableDarkMode={enableDarkMode}
-            />
-          );
-        })}
-        {firstChild}
+        {visibleCardsRender ? (
+          visibleCardsRender(visibleCards, firstChild)
+        ) : (
+          <>
+            {visibleCards}
+            {firstChild}
+          </>
+        )}
         <div styleName="story-tags">
           <StoryTags tags={story.tags} />
           <SlotAfterStory
@@ -135,8 +146,9 @@ export const StoryTemplate = ({
             widgetComp={widgetComp}
             adComponent={adComponent}
             sticky={true}
-            storyId={storyId}
             opts={publishedDetails}
+            loadRelatedStories={loadRelatedStories}
+            story={story}
           />
         </div>
       )
@@ -281,5 +293,7 @@ StoryTemplate.propTypes = {
   widgetComp: PropTypes.func,
   adComponent: PropTypes.func,
   enableDarkMode: PropTypes.bool,
-  mountAt: PropTypes.string
+  mountAt: PropTypes.string,
+  loadRelatedStories: PropTypes.func,
+  visibleCardsRender: PropTypes.func | undefined
 };
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/text-story.m.css b/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/text-story.m.css
index 309c0d94c..f81688088 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/text-story.m.css
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/TextStoryTemplates/text-story.m.css
@@ -2,6 +2,7 @@
 
 .header-details {
   margin: var(--arrow-spacing-m) 0 var(--arrow-spacing-xs) 0;
+
   @include tablet {
     margin: var(--arrow-fs-huge) 0;
   }
@@ -11,6 +12,7 @@
   font-size: var(--arrow-fs-s);
   font-style: italic;
   padding-right: 2px;
+
   @include tablet {
     font-size: var(--arrow-fs-m);
   }
@@ -21,12 +23,15 @@
   justify-content: space-between;
   align-items: center;
   margin-top: var(--arrow-spacing-s);
+
   @include tablet {
     margin-top: 0;
   }
 }
+
 .story-tags > * {
   margin: var(--arrow-spacing-m) 0;
+
   @include tablet {
     margin: var(--arrow-spacing-l) 0;
   }
@@ -50,12 +55,15 @@
 .headline-overlay-priority {
   .story-content-inner-wrapper {
     grid-column: 1/5;
+
     @include tablet {
       grid-column: 4/ 12;
     }
   }
+
   .aside-collection {
     grid-column: 1/5;
+
     @include tablet {
       grid-column: container-start / container-end;
     }
@@ -69,6 +77,7 @@
 .default .story-details,
 .default .aside-collection {
   margin: 0 var(--arrow-spacing-s);
+
   @include tablet {
     margin: unset;
   }
@@ -77,55 +86,26 @@
 .sticky :global(.arr--share) {
   grid-column: 4/5;
   justify-self: flex-end;
+
   @include tablet {
     /*  grid column value is to make the vertical share sticky */
     grid-column: 9 / grid-end;
-    @include desktop {
-      position: sticky;
-      position: -webkit-sticky;
-      top: 120px;
-      grid-column: 3/ 4;
-      grid-row: 2/3;
-      align-self: flex-start;
-      margin-top: var(--arrow-spacing-xs);
-    }
   }
-}
-
-.default .hero-image {
-  @include tablet {
-    grid-column: gutter-1-start/ gutter-2-end;
-  }
-}
 
-.headline-overlay-priority > .hero-image {
-  background-color: var(--arrow-c-dark);
-  overflow: hidden;
-  grid-row: 1 / 2;
-  grid-column: 1/5;
-  @include tablet {
-    grid-column: 2 / 14;
+  @include desktop {
+    position: sticky;
+    position: -webkit-sticky;
+    top: 120px;
+    grid-column: 3/ 4;
+    grid-row: 2/3;
+    align-self: flex-start;
+    margin-top: var(--arrow-spacing-xs);
   }
 }
 
-.headline-overlay-priority .header-details {
-  align-self: center;
-  grid-row: 1/2;
-  grid-column: 1/5;
-  padding: 0 var(--arrow-fs-l);
-  z-index: 2;
+.default .hero-image {
   @include tablet {
-    grid-column: 3 / 13;
-    @include desktop {
-      grid-column: 4 / 12;
-    }
-  }
-  :global(.section-tag) {
-    color: var(--arrow-c-invert-mono4);
-  }
-  :global(.arr--sub-headline),
-  :global(.arr--story-headline .arr--story--headline-h1) {
-    color: var(--arrow-c-invert-mono1);
+    grid-column: gutter-1-start/ gutter-2-end;
   }
 }
 
@@ -149,6 +129,7 @@
 
 .hero-vertical-priority.container :global(.section-tag) {
   padding: var(--arrow-spacing-xxs) 0 var(--arrow-spacing-xs);
+
   @include tablet {
     padding: unset;
   }
@@ -160,6 +141,7 @@
 
 .hero-vertical-priority.fullBleed :global(.section-tag) {
   padding-bottom: var(--arrow-spacing-xs);
+
   @include tablet {
     padding-bottom: unset;
   }
@@ -171,6 +153,42 @@
   }
 }
 
+.headline-overlay-priority .header-details {
+  align-self: center;
+  grid-row: 1/2;
+  grid-column: 1/5;
+  padding: 0 var(--arrow-fs-l);
+  z-index: 2;
+
+  @include tablet {
+    grid-column: 3 / 13;
+  }
+
+  @include desktop {
+    grid-column: 4 / 12;
+  }
+
+  :global(.section-tag) {
+    color: var(--arrow-c-invert-mono4);
+  }
+
+  :global(.arr--sub-headline),
+  :global(.arr--story-headline .arr--story--headline-h1) {
+    color: var(--arrow-c-invert-mono1);
+  }
+}
+
+.headline-overlay-priority > .hero-image {
+  background-color: var(--arrow-c-dark);
+  overflow: hidden;
+  grid-row: 1 / 2;
+  grid-column: 1/5;
+
+  @include tablet {
+    grid-column: 2 / 14;
+  }
+}
+
 .hero-vertical-priority.headline-first.sticky :global(.arr--share) {
   @include desktop {
     grid-row: 3/4;
@@ -179,34 +197,42 @@
 
 .text-story-side-column {
   grid-column: 1/5;
+
   @include tablet {
     grid-column: 9 / 14;
     grid-row: 2/3;
-    @include desktop {
-      grid-column: 10 / 14;
-    }
+  }
+
+  @include desktop {
+    grid-column: 10 / 14;
   }
 }
 
 .headline-priority {
   .header-details {
     grid-column: 1/5;
+
     @include tablet {
       grid-column: 2 / 14;
-      @include desktop {
-        grid-column: 2 / 10;
-      }
+    }
+
+    @include desktop {
+      grid-column: 2 / 10;
     }
   }
+
   .story-content-inner-wrapper {
     grid-column: 1/5;
+
     @include tablet {
       grid-column: 2 / 9;
-      @include desktop {
-        grid-column: 2 / 10;
-      }
+    }
+
+    @include desktop {
+      grid-column: 2 / 10;
     }
   }
+
   .text-story-side-column {
     @include tablet {
       grid-row: 2/6;
@@ -218,6 +244,7 @@
 .headline-hero-priority.fullBleed .hero-image,
 .hero-priority-center.fullBleed .hero-image {
   grid-column: 1/5;
+
   @include tablet {
     grid-column: grid-start/ grid-end;
   }
@@ -225,21 +252,25 @@
 
 .default .story-content-inner-wrapper {
   grid-column: 1/5;
+
   @include tablet {
     grid-column: 2 / 9;
-    @include desktop-lg {
-      grid-column: 2 / 10;
-    }
+  }
+
+  @include desktop-lg {
+    grid-column: 2 / 10;
   }
 }
 
 .default .text-story-side-column {
   grid-column: 1/5;
+
   @include tablet {
     grid-column: 9 / 14;
-    @include desktop-lg {
-      grid-column: 10 / 14;
-    }
+  }
+
+  @include desktop-lg {
+    grid-column: 10 / 14;
   }
 }
 
@@ -254,6 +285,7 @@
 
 .fullBleed.hero-vertical-priority .header-details {
   margin: var(--arrow-spacing-m) var(--arrow-spacing-s) var(--arrow-spacing-xs);
+
   @include tablet {
     margin: var(--arrow-fs-huge) 0;
   }
@@ -262,6 +294,7 @@
 .default.container {
   .hero-image :global(.arr--hero-image) {
     margin-top: var(--arrow-spacing-s);
+
     @include tablet {
       grid-column: 2 / 14;
       margin-top: unset;
@@ -271,6 +304,7 @@
 
 .hero-vertical-priority.image-first .header-details {
   padding-bottom: 20px;
+
   @include tablet {
     padding-bottom: unset;
   }
@@ -278,13 +312,15 @@
 
 .hero-vertical-priority.image-first .image-wrapper {
   grid-row: 1/2;
+
   @include tablet {
     grid-row: unset;
     grid-column: 8 / 14;
     margin-bottom: var(--arrow-spacing-l);
-    @include desktop-lg {
-      grid-column: 8 / 13;
-    }
+  }
+
+  @include desktop-lg {
+    grid-column: 8 / 13;
   }
 }
 
@@ -292,121 +328,144 @@
 .headline-hero-priority.container .hero-image,
 .default.container .hero-image {
   grid-column: 1/5;
+
   @include tablet {
     grid-column: 2 / 14;
     margin-top: var(--arrow-spacing-xs);
-    @include desktop-lg {
-      margin-top: var(--arrow-spacing-m);
-    }
+  }
+
+  @include desktop-lg {
+    margin-top: var(--arrow-spacing-m);
   }
 }
 
 .hero-vertical-priority.fullBleed.headline-first .hero-image {
   grid-column: 1/5;
+
   @include tablet {
     grid-column: 7 / grid-end;
-    @include desktop {
-      grid-column: 8 / grid-end;
-    }
+  }
+
+  @include desktop {
+    grid-column: 8 / grid-end;
   }
 }
+
 .hero-vertical-priority.fullBleed.headline-first :global(.arr--caption-attribution) {
   grid-column: 1/5;
+
   @include tablet {
     grid-column: 7 / grid-end;
-    @include desktop {
-      grid-column: 8 / grid-end;
-      grid-row: 2/3;
-    }
+  }
+
+  @include desktop {
+    grid-column: 8 / grid-end;
+    grid-row: 2/3;
   }
 }
 
 .hero-vertical-priority.fullBleed.headline-first .header-details {
   grid-column: 1/5;
+
   @include tablet {
     grid-column: 2 / 7;
     align-self: center;
-    @include desktop {
-      grid-column: 2 / 8;
-    }
+  }
+
+  @include desktop {
+    grid-column: 2 / 8;
   }
 }
 
 .hero-vertical-priority.container.headline-first .header-details {
   grid-column: 1/5;
+
   @include tablet {
     align-self: center;
     grid-column: 2 / 8;
-    @include desktop {
-      grid-column: 3 / 8;
-    }
+  }
+
+  @include desktop {
+    grid-column: 3 / 8;
   }
 }
 
 .hero-vertical-priority.container.headline-first .hero-image,
 .hero-vertical-priority.container.headline-first :global(.arr--caption-attribution) {
   grid-column: 1/5;
+
   @include tablet {
     grid-column: 8 / 14;
-    @include desktop {
-      grid-column: 8 / 13;
-    }
+  }
+
+  @include desktop {
+    grid-column: 8 / 13;
   }
 }
 
 .hero-vertical-priority.fullBleed.image-first .hero-image {
   grid-column: 1/5;
+
   @include tablet {
     grid-row: 1 / 2;
     grid-column: grid-start / 9;
-    @include desktop {
-      grid-column: grid-start / 8;
-    }
+  }
+
+  @include desktop {
+    grid-column: grid-start / 8;
   }
 }
 
 .hero-vertical-priority.fullBleed.image-first :global(.arr--caption-attribution) {
   grid-column: 1/5;
+
   @include tablet {
     grid-row: 1 / 2;
     grid-column: grid-start / 9;
-    @include desktop {
-      grid-column: grid-start / 8;
-    }
+  }
+
+  @include desktop {
+    grid-column: grid-start / 8;
   }
 }
 
 .hero-vertical-priority.fullBleed.image-first .header-details {
   grid-column: 1/5;
+
   @include tablet {
     align-self: center;
     grid-column: 9 / 14;
-    @include desktop {
-      grid-column: 8 / 14;
-    }
+  }
+
+  @include desktop {
+    grid-column: 8 / 14;
   }
 }
 
 .hero-vertical-priority.container.image-first .header-details {
   grid-column: 1/5;
+
   @include tablet {
     align-self: center;
     grid-column: 8 / 14;
-    @include desktop {
-      grid-column: 8 / 13;
-    }
+  }
+
+  @include desktop {
+    grid-column: 8 / 13;
   }
 }
 
 .hero-vertical-priority.container.image-first .hero-image,
 .hero-vertical-priority.container.image-first :global(.arr--caption-attribution) {
   grid-column: 1/5;
+
   @include tablet {
     grid-column: 2 / 8;
     grid-row: 1 / 2;
-    @include desktop {
-      grid-column: 3 / 8;
-    }
+  }
+
+  @include desktop {
+    grid-column: 3 / 8;
   }
 
   :global(.section-tag) {
@@ -421,6 +480,7 @@
 .headline-overlay-priority > .hero-image figure {
   opacity: 0.5;
 }
+
 .headline-overlay-priority > .hero-image img {
   -webkit-filter: blur(4px);
   filter: blur(4px);
@@ -433,9 +493,10 @@
 .sticky .index-2 {
   @include tablet {
     z-index: 2;
-    @include desktop {
-      z-index: unset;
-    }
+  }
+
+  @include desktop {
+    z-index: unset;
   }
 }
 
@@ -448,3 +509,17 @@
 .fullBleed:global(.arr-story-grid) {
   margin: unset;
 }
+
+.headline-overlay-priority {
+  margin-top: var(--arrow-spacing-xs);
+
+  @include tablet {
+    margin-top: var(--arrow-spacing-m);
+  }
+}
+
+.hero-vertical-priority {
+  @include tablet {
+    margin-top: var(--arrow-spacing-m) !important;
+  }
+}
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/index.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/index.js
index 3bf9cc68c..518322347 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/index.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/index.js
@@ -25,7 +25,9 @@ const VideoStoryTemplate = ({
   adComponent,
   firstChild,
   secondChild,
-  enableDarkMode
+  enableDarkMode,
+  loadRelatedStories,
+  visibleCardsRender = null
 }) => {
   const heroVideo =
     story.cards
@@ -33,7 +35,8 @@ const VideoStoryTemplate = ({
       .find(
         ({ type, subtype }) =>
           type === "youtube-video" ||
-          (type === "jsembed" && (subtype === "dailymotion-video" || subtype === "dailymotion-embed-script"))
+          (type === "jsembed" && (subtype === "dailymotion-video" || subtype === "dailymotion-embed-script")) ||
+          subtype === "brightcove-video"
       ) || {};
 
   const {
@@ -92,6 +95,20 @@ const VideoStoryTemplate = ({
   };
 
   const StoryData = () => {
+    const visibleCards = visibledCards.map((card) => {
+      return (
+        <StoryElementCard
+          heroVideoElementId={heroVideo.id}
+          story={story}
+          card={card}
+          key={get(card, ["id"], "")}
+          config={storyElementsConfig}
+          adComponent={adComponent}
+          widgetComp={widgetComp}
+          enableDarkMode={enableDarkMode}
+        />
+      );
+    });
     return (
       <div styleName="story-details">
         <div styleName="author">
@@ -106,21 +123,14 @@ const VideoStoryTemplate = ({
           {!verticalShare && <SocialShareComponent />}
         </div>
         <StoryReview theme={theme} story={story} />
-        {visibledCards.map((card) => {
-          return (
-            <StoryElementCard
-              heroVideoElementId={heroVideo.id}
-              story={story}
-              card={card}
-              key={get(card, ["id"], "")}
-              config={storyElementsConfig}
-              adComponent={adComponent}
-              widgetComp={widgetComp}
-              enableDarkMode={enableDarkMode}
-            />
-          );
-        })}
-        {firstChild}
+        {visibleCardsRender ? (
+          visibleCardsRender(visibleCards, firstChild)
+        ) : (
+          <>
+            {visibleCards}
+            {firstChild}
+          </>
+        )}
         <div styleName="story-tags">
           <StoryTags tags={story.tags} />
           <SlotAfterStory
@@ -144,8 +154,9 @@ const VideoStoryTemplate = ({
             widgetComp={widgetComp}
             adComponent={adComponent}
             sticky={true}
-            storyId={storyId}
+            story={story}
             opts={publishedDetails}
+            loadRelatedStories={loadRelatedStories}
           />
         </div>
       )
@@ -168,8 +179,9 @@ const VideoStoryTemplate = ({
               {...asideCollection}
               widgetComp={widgetComp}
               adComponent={adComponent}
-              storyId={storyId}
+              story={story}
               opts={publishedDetails}
+              loadRelatedStories={loadRelatedStories}
             />
           </div>
         )}
@@ -236,6 +248,7 @@ const VideoStoryTemplate = ({
 
 VideoStoryTemplate.propTypes = {
   story: PropTypes.object,
+  accessLoading: PropTypes.bool,
   config: PropTypes.shape({
     templateType: PropTypes.string,
     authorCard: PropTypes.object,
@@ -246,7 +259,9 @@ VideoStoryTemplate.propTypes = {
   storyElementsConfig: PropTypes.object,
   adComponent: PropTypes.func,
   widgetComp: PropTypes.func,
-  enableDarkMode: PropTypes.bool
+  enableDarkMode: PropTypes.bool,
+  loadRelatedStories: PropTypes.func,
+  visibleCardsRender: PropTypes.func | undefined
 };
 
 export default StateProvider(VideoStoryTemplate);
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/video-story.m.css b/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/video-story.m.css
index e90ab1688..52a15a6d7 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/video-story.m.css
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/VideoStoryTemplates/video-story.m.css
@@ -5,9 +5,9 @@
 .headline-priority {
   @include tablet {
     margin: var(--arrow-spacing-l);
-    @include desktop {
-      margin: 40px 0;
-    }
+  }
+  @include desktop {
+    margin: 40px 0;
   }
 }
 
@@ -21,9 +21,9 @@
     height: 190px;
     @include tablet {
       height: 540px;
-      @include desktop {
-        height: 640px;
-      }
+    }
+    @include desktop {
+      height: 640px;
     }
   }
 }
@@ -121,19 +121,19 @@
   @include tablet {
     grid-column: 8/9;
     grid-row: 2/3;
-    @include desktop {
-      grid-column: grid-start / container-start;
-    }
+  }
+  @include desktop {
+    grid-column: grid-start / container-start;
   }
 }
 
 .sticky.headline-priority :global(.arr--share) {
   @include tablet {
     grid-column: 8/9;
-    @include desktop {
-      grid-row: 2/3;
-      grid-column: grid-start / container-start;
-    }
+  }
+  @include desktop {
+    grid-row: 2/3;
+    grid-column: grid-start / container-start;
   }
 }
 
@@ -141,10 +141,10 @@
   :global(.arr--share) {
     @include tablet {
       grid-column: 9 / grid-end;
-      @include desktop {
-        grid-column: 3/4;
-        grid-row: 2/3;
-      }
+    }
+    @include desktop {
+      grid-column: 3/4;
+      grid-row: 2/3;
     }
   }
 }
@@ -153,9 +153,9 @@
   grid-column: 1/5;
   @include tablet {
     grid-column: container-start / 9;
-    @include desktop {
-      grid-column: container-start / 10;
-    }
+  }
+  @include desktop {
+    grid-column: container-start / 10;
   }
 }
 
@@ -163,9 +163,9 @@
   grid-column: 1/5;
   @include tablet {
     grid-column: 9 / container-end;
-    @include tablet {
-      grid-column: 10 / container-end;
-    }
+  }
+  @include tablet {
+    grid-column: 10 / container-end;
   }
 }
 
diff --git a/app/isomorphic/arrow/components/Rows/ThreeColSevenStory/index.js b/app/isomorphic/arrow/components/Rows/ThreeColSevenStory/index.js
index f7896c7f0..722eb72fe 100644
--- a/app/isomorphic/arrow/components/Rows/ThreeColSevenStory/index.js
+++ b/app/isomorphic/arrow/components/Rows/ThreeColSevenStory/index.js
@@ -54,6 +54,7 @@ const ThreeColSevenStory = ({ collection, config = {} }) => {
           story={story}
           borderColor={borderColor}
           config={config}
+          isHorizontalMobile
           collectionId={collection.id}
         />
       </StoryCard>
diff --git a/app/isomorphic/arrow/components/Rows/ThreeColSixStories/index.js b/app/isomorphic/arrow/components/Rows/ThreeColSixStories/index.js
index e74043583..c5c20e249 100644
--- a/app/isomorphic/arrow/components/Rows/ThreeColSixStories/index.js
+++ b/app/isomorphic/arrow/components/Rows/ThreeColSixStories/index.js
@@ -52,6 +52,7 @@ const ThreeColSixStories = ({ collection = {}, config = {} }) => {
           border={border}
           borderColor={borderColor}
           config={config}
+          isHorizontalMobile
           collectionId={collection.id}
         />
       </StoryCard>
@@ -106,6 +107,7 @@ const ThreeColSixStories = ({ collection = {}, config = {} }) => {
                   headerLevel="5"
                   story={items[2]}
                   border={border}
+                  isHorizontalMobile
                   borderColor={borderColor}
                   config={config}
                   collectionId={collection.id}
@@ -124,6 +126,7 @@ const ThreeColSixStories = ({ collection = {}, config = {} }) => {
                   headerLevel="5"
                   story={story}
                   border={border}
+                  isHorizontalMobile
                   borderColor={borderColor}
                   config={config}
                   collectionId={collection.id}
diff --git a/app/isomorphic/arrow/components/Rows/TwoColFourStory/index.js b/app/isomorphic/arrow/components/Rows/TwoColFourStory/index.js
index cf960f216..963a0399e 100644
--- a/app/isomorphic/arrow/components/Rows/TwoColFourStory/index.js
+++ b/app/isomorphic/arrow/components/Rows/TwoColFourStory/index.js
@@ -89,7 +89,6 @@ export const TwoColFourStories = ({ collection, config = {} }) => {
                       <StorycardContent
                         theme={theme}
                         story={story}
-                        isHorizontal
                         borderColor={borderColor}
                         config={config}
                         collectionId={collection.id}
diff --git a/app/isomorphic/arrow/components/Rows/TwoColFourStory/two-col-four-story.m.css b/app/isomorphic/arrow/components/Rows/TwoColFourStory/two-col-four-story.m.css
index 91cbc448b..3fa8f351d 100644
--- a/app/isomorphic/arrow/components/Rows/TwoColFourStory/two-col-four-story.m.css
+++ b/app/isomorphic/arrow/components/Rows/TwoColFourStory/two-col-four-story.m.css
@@ -4,6 +4,13 @@
   @media (--viewport-medium) {
     padding: 0;
   }
+
+  :global(.arr--story-card .arr--hero-image) {
+    flex-basis: 40%;
+  }
+  :global(.arr--story-card .arr--content-wrapper) {
+    flex-basis: 60%;
+  }
 }
 .wrapper {
   margin: var(--arrow-spacing-xs) 0;
@@ -15,28 +22,31 @@
   }
 }
 .first-card {
-  margin-bottom: 16px;
+  margin-bottom: var(--arrow-spacing-m);
   @media (--viewport-medium) {
     margin: 0;
   }
 }
 
 .first-card.border-box {
-  padding: 0;
+  padding: var(--arrow-spacing-m);
   margin-bottom: var(--arrow-fs-xs);
   @media (--viewport-medium) {
+    padding: var(--arrow-spacing-m) var(--arrow-spacing-m) 0;
     margin: 0;
   }
 }
 
+.storyCards.border-box {
+  padding: var(--arrow-spacing-m) var(--arrow-spacing-m) 0;
+}
+
 .border-box.dark {
   border: 1px solid var(--dark-border);
-  padding: 16px 16px 0;
 }
 
 .border-box.light {
   border: 1px solid var(--light-border);
-  padding: 16px 16px 0;
 }
 
 .storyCards > .card {
@@ -52,13 +62,5 @@
   margin-bottom: var(--arrow-spacing-m);
 }
 .first-card-border-box {
-  padding: 4px 12px 16px 10px;
-}
-.two-col-four-story {
-  :global(.arr--story-card .arr--hero-image) {
-    flex-basis: 40%;
-  }
-  :global(.arr--story-card .arr--content-wrapper) {
-    flex-basis: 60%;
-  }
+  padding: var(--arrow-spacing-xxs) var(--arrow-spacing-s) var(--arrow-spacing-m) 10px;
 }
diff --git a/app/isomorphic/arrow/components/Rows/TwoColSevenStories/index.js b/app/isomorphic/arrow/components/Rows/TwoColSevenStories/index.js
index f2781fa63..05209a22f 100644
--- a/app/isomorphic/arrow/components/Rows/TwoColSevenStories/index.js
+++ b/app/isomorphic/arrow/components/Rows/TwoColSevenStories/index.js
@@ -66,7 +66,7 @@ export const TwoColSevenStories = ({ collection, config = {} }) => {
               aspectRatio={[[16, 9], [16, 9]]}
               config={config}>
               <HeroImage config={config} story={items[0]} aspectRatio={[[16, 9], [16, 9]]} />
-              <StorycardContent story={items[0]} headerLevel="3" config={config}>
+              <StorycardContent story={items[0]} headerLevel="3" config={config} border={border}>
                 <SectionTag story={items[0]} borderColor={sectionTagBorderColor} />
                 <Headline premiumStoryIconConfig={config} story={items[0]} headerLevel={2} />
                 <Subheadline story={items[0]} />
@@ -85,7 +85,6 @@ export const TwoColSevenStories = ({ collection, config = {} }) => {
                       theme={theme}
                       border={border}
                       story={story}
-                      isHorizontalMobile
                       borderColor={borderColor}
                       config={config}
                       separator="dot"
@@ -106,7 +105,6 @@ export const TwoColSevenStories = ({ collection, config = {} }) => {
                         theme={theme}
                         border={border}
                         story={story}
-                        isHorizontalMobile
                         borderColor={borderColor}
                         config={config}
                         separator="dot"
diff --git a/app/isomorphic/arrow/components/Rows/TwoColSevenStories/two-col-seven-stories.m.css b/app/isomorphic/arrow/components/Rows/TwoColSevenStories/two-col-seven-stories.m.css
index d8468b5b9..9b7776f73 100644
--- a/app/isomorphic/arrow/components/Rows/TwoColSevenStories/two-col-seven-stories.m.css
+++ b/app/isomorphic/arrow/components/Rows/TwoColSevenStories/two-col-seven-stories.m.css
@@ -106,7 +106,14 @@
       }
     }
     :global .arr--content-wrapper {
-      margin-bottom: var(--arrow-spacing-l);
+      @media (--viewport-medium) {
+        margin-bottom: var(--arrow-spacing-l);
+      }
+    }
+    :global .arr--story-card {
+      @media (--viewport-small) {
+        margin-bottom: var(--arrow-spacing-l);
+      }
     }
   }
 
diff --git a/app/isomorphic/arrow/components/Svgs/SocialIcons/facebook.js b/app/isomorphic/arrow/components/Svgs/SocialIcons/facebook.js
index a3d762355..b36d41aa4 100644
--- a/app/isomorphic/arrow/components/Svgs/SocialIcons/facebook.js
+++ b/app/isomorphic/arrow/components/Svgs/SocialIcons/facebook.js
@@ -1,12 +1,13 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-export const Facebook = ({ color = "#3B5998" }) => {
+export const Facebook = ({ color = "#1877F2" }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
+        d="M22 12.06C22 6.504 17.524 2 12 2S2 6.503 2 12.06c0 5.022 3.657 9.185 8.438 9.94v-7.03h-2.54v-2.91h2.54V9.845c0-2.521 1.491-3.914 3.776-3.914 1.095 0 2.24.197 2.24.197V8.6h-1.262c-1.242 0-1.63.776-1.63 1.571v1.889h2.774l-.444 2.908h-2.33V22C18.343 21.245 22 17.082 22 12.06Z"
         fill={color}
-        d="M9.906 20v-7.156H7.5V10h2.406V7.75c0-1.187.334-2.11 1-2.766.667-.656 1.552-.984 2.656-.984.896 0 1.625.042 2.188.125v2.531h-1.5c-.563 0-.948.125-1.156.375-.167.209-.25.542-.25 1V10H15.5l-.375 2.844h-2.281V20H9.906z"></path>
+      />
     </svg>
   );
 };
diff --git a/app/isomorphic/arrow/components/Svgs/SocialIcons/instagram.js b/app/isomorphic/arrow/components/Svgs/SocialIcons/instagram.js
index 2451aae48..386133b68 100644
--- a/app/isomorphic/arrow/components/Svgs/SocialIcons/instagram.js
+++ b/app/isomorphic/arrow/components/Svgs/SocialIcons/instagram.js
@@ -2,23 +2,11 @@ import React from "react";
 
 export const Instagram = () => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24">
-      <defs>
-        <linearGradient id="prefix__b" x1="0%" x2="110.694%" y1="0%" y2="109.202%">
-          <stop offset="0%" stopColor="#724AC6"></stop>
-          <stop offset="53.59%" stopColor="#E5375E"></stop>
-          <stop offset="100%" stopColor="#FC9949"></stop>
-        </linearGradient>
-        <path
-          id="prefix__a"
-          d="M9 4.636c.784 0 1.512.196 2.182.588.67.392 1.202.924 1.594 1.594.392.67.588 1.398.588 2.182s-.196 1.512-.588 2.182a4.382 4.382 0 01-1.594 1.594c-.67.392-1.398.588-2.182.588s-1.512-.196-2.182-.588a4.382 4.382 0 01-1.594-1.594c-.392-.67-.588-1.398-.588-2.182s.196-1.512.588-2.182a4.382 4.382 0 011.594-1.594A4.247 4.247 0 019 4.636zm0 7.21c.784 0 1.455-.278 2.011-.835.557-.556.835-1.227.835-2.011s-.278-1.455-.835-2.011c-.556-.557-1.227-.835-2.011-.835s-1.455.278-2.011.835c-.557.556-.835 1.227-.835 2.011s.278 1.455.835 2.011A2.739 2.739 0 009 11.846zm5.578-7.4a1.181 1.181 0 01-.322.721.923.923 0 01-.702.304.981.981 0 01-.721-.304.98.98 0 01-.304-.72c0-.279.101-.52.304-.722a.984.984 0 01.72-.303c.279 0 .52.101.722.303a.987.987 0 01.303.721zm2.884 1.025c.025.708.038 1.885.038 3.529s-.019 2.827-.057 3.548c-.038.721-.145 1.347-.322 1.878a4.425 4.425 0 01-1.044 1.651 4.429 4.429 0 01-1.65 1.044c-.532.177-1.158.284-1.879.322-.721.038-1.904.057-3.548.057-1.644 0-2.827-.019-3.548-.057-.721-.038-1.347-.158-1.878-.36a4.05 4.05 0 01-1.651-1.006 4.429 4.429 0 01-1.044-1.65c-.177-.532-.284-1.158-.322-1.879C.519 11.827.5 10.644.5 9c0-1.644.019-2.827.057-3.548.038-.721.145-1.347.322-1.878a4.425 4.425 0 011.044-1.651A4.429 4.429 0 013.573.879C4.106.702 4.732.595 5.453.557 6.173.519 7.356.5 9 .5c1.644 0 2.827.019 3.548.057.721.038 1.347.145 1.878.322a4.425 4.425 0 011.651 1.044 4.429 4.429 0 011.044 1.65c.177.532.29 1.164.341 1.898zm-1.821 8.538c.151-.43.253-1.113.303-2.05.025-.556.038-1.34.038-2.352V8.393a54.22 54.22 0 00-.038-2.353c-.05-.961-.152-1.644-.303-2.049a2.743 2.743 0 00-1.632-1.632c-.405-.151-1.088-.253-2.05-.303a55.796 55.796 0 00-2.352-.038H8.393c-1.012 0-1.796.013-2.353.038-.936.05-1.619.152-2.049.303a2.743 2.743 0 00-1.632 1.632c-.151.405-.253 1.088-.303 2.05-.025.556-.038 1.34-.038 2.352v1.214c0 1.012.013 1.796.038 2.353.05.936.152 1.619.303 2.049.33.784.873 1.328 1.632 1.632.43.151 1.113.253 2.05.303.556.025 1.34.038 2.352.038h1.214a54.22 54.22 0 002.353-.038c.961-.05 1.644-.152 2.049-.303.784-.33 1.328-.873 1.632-1.632z"></path>
-      </defs>
-      <use fill="url(#prefix__b)" fillRule="nonzero" transform="translate(3 3)" xlinkHref="#prefix__a"></use>
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12.002 6.872A5.119 5.119 0 0 0 6.876 12a5.119 5.119 0 0 0 5.126 5.128A5.119 5.119 0 0 0 17.13 12a5.12 5.12 0 0 0-5.127-5.128Zm0 8.462A3.34 3.34 0 0 1 8.67 12a3.337 3.337 0 0 1 3.333-3.334A3.337 3.337 0 0 1 15.335 12a3.34 3.34 0 0 1-3.333 3.334Zm6.532-8.671c0 .664-.535 1.196-1.195 1.196a1.196 1.196 0 1 1 1.196-1.196Zm3.396 1.213c-.076-1.602-.442-3.02-1.615-4.19-1.17-1.17-2.588-1.535-4.19-1.616-1.65-.093-6.6-.093-8.25 0-1.597.076-3.016.442-4.19 1.611-1.173 1.17-1.534 2.589-1.615 4.19-.093 1.652-.093 6.601 0 8.253.076 1.602.442 3.02 1.615 4.19 1.174 1.17 2.588 1.535 4.19 1.616 1.65.093 6.6.093 8.25 0 1.602-.076 3.02-.442 4.19-1.616 1.168-1.17 1.534-2.588 1.615-4.19.093-1.652.093-6.596 0-8.248Zm-2.133 10.02a3.375 3.375 0 0 1-1.9 1.9c-1.317.523-4.44.402-5.895.402-1.454 0-4.582.116-5.894-.401a3.375 3.375 0 0 1-1.9-1.902c-.523-1.316-.402-4.44-.402-5.895 0-1.455-.116-4.583.401-5.895a3.375 3.375 0 0 1 1.901-1.902c1.316-.522 4.44-.401 5.894-.401 1.455 0 4.582-.116 5.894.401a3.375 3.375 0 0 1 1.901 1.902c.522 1.316.401 4.44.401 5.895 0 1.455.121 4.583-.401 5.895Z"
+        fill="#F00073"
+      />
     </svg>
   );
 };
diff --git a/app/isomorphic/arrow/components/Svgs/SocialIcons/linkedin.js b/app/isomorphic/arrow/components/Svgs/SocialIcons/linkedin.js
index c5d67eaf7..2b4f65b4f 100644
--- a/app/isomorphic/arrow/components/Svgs/SocialIcons/linkedin.js
+++ b/app/isomorphic/arrow/components/Svgs/SocialIcons/linkedin.js
@@ -1,12 +1,13 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-export const LinkedIn = ({ color = "#0077B5" }) => {
+export const LinkedIn = ({ color = "#2867B2" }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
+        d="M20.571 2H3.424C2.638 2 2 2.647 2 3.442v17.116C2 21.353 2.638 22 3.424 22h17.147c.786 0 1.429-.647 1.429-1.442V3.442C22 2.647 21.357 2 20.571 2ZM8.045 19.143H5.08V9.598h2.97v9.545h-.005ZM6.563 8.295a1.72 1.72 0 0 1 0-3.438c.946 0 1.718.772 1.718 1.719 0 .95-.768 1.719-1.719 1.719Zm12.593 10.848h-2.964V14.5c0-1.107-.022-2.531-1.54-2.531-1.545 0-1.781 1.205-1.781 2.45v4.724H9.905V9.598h2.844v1.304h.04c.398-.75 1.366-1.54 2.808-1.54 3 0 3.558 1.977 3.558 4.549v5.232Z"
         fill={color}
-        d="M6.71 19H3.26V7.904h3.45V19zM5.005 6.383a1.926 1.926 0 01-1.41-.594A1.923 1.923 0 013 4.38c0-.544.198-1.014.594-1.41a1.926 1.926 0 011.41-.594c.544 0 1.014.198 1.41.594.396.396.594.866.594 1.41 0 .544-.198 1.014-.594 1.41a1.926 1.926 0 01-1.41.594zM19.625 19h-3.451v-5.418c0-.89-.074-1.534-.223-1.93-.272-.668-.804-1.002-1.596-1.002-.791 0-1.348.297-1.67.891-.247.445-.37 1.1-.37 1.967V19H8.9V7.904h3.303v1.522h.037c.248-.495.643-.903 1.188-1.225.593-.396 1.286-.594 2.078-.594 1.608 0 2.734.508 3.377 1.522.495.816.742 2.078.742 3.785V19z"></path>
+      />
     </svg>
   );
 };
diff --git a/app/isomorphic/arrow/components/Svgs/SocialIcons/pinterest.js b/app/isomorphic/arrow/components/Svgs/SocialIcons/pinterest.js
index de95b5f9b..66f1ee62a 100644
--- a/app/isomorphic/arrow/components/Svgs/SocialIcons/pinterest.js
+++ b/app/isomorphic/arrow/components/Svgs/SocialIcons/pinterest.js
@@ -2,10 +2,10 @@ import React from "react";
 
 export const Pinterest = () => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
+        d="M12.062 2C6.528 2 2 6.528 2 12.062a9.982 9.982 0 0 0 6.037 9.18c0-.754 0-1.508.126-2.263.251-.88 1.257-5.534 1.257-5.534s-.377-.629-.377-1.635c0-1.51.88-2.641 1.887-2.641.88 0 1.383.629 1.383 1.51 0 .88-.629 2.263-.88 3.52-.252 1.007.503 1.887 1.635 1.887 1.886 0 3.144-2.39 3.144-5.408 0-2.264-1.51-3.899-4.15-3.899-3.019 0-4.905 2.264-4.905 4.78 0 .88.251 1.509.628 2.012.126.251.252.251.126.503 0 .126-.126.629-.251.755-.126.251-.252.377-.503.251-1.384-.629-2.013-2.138-2.013-3.899 0-2.892 2.39-6.288 7.17-6.288 3.898 0 6.413 2.767 6.413 5.785 0 3.899-2.138 6.918-5.408 6.918-1.132 0-2.138-.63-2.515-1.258 0 0-.629 2.264-.755 2.767a11.156 11.156 0 0 1-1.006 2.138c.88.251 1.887.377 2.893.377 5.534 0 10.061-4.528 10.061-10.062C22.123 6.529 17.596 2 12.062 2Z"
         fill="#E60023"
-        d="M21.5 12a9.209 9.209 0 01-1.283 4.75 9.6 9.6 0 01-3.467 3.467A9.209 9.209 0 0112 21.5c-.97 0-1.903-.14-2.796-.421.613-1.022.996-1.852 1.149-2.49l.613-2.26c.153.306.434.561.842.766.41.204.856.306 1.341.306.92 0 1.756-.262 2.51-.785.753-.524 1.34-1.232 1.761-2.126.422-.894.632-1.87.632-2.93s-.255-2.012-.766-2.854a5.318 5.318 0 00-2.107-1.973c-.893-.473-1.89-.709-2.987-.709-1.303 0-2.452.268-3.448.805a5.465 5.465 0 00-2.088 2.087 5.704 5.704 0 00-.747 2.854c0 .74.185 1.475.556 2.203.37.728.836 1.22 1.398 1.475.179.076.28.038.306-.115l.268-1.073a.266.266 0 00-.076-.268 3.048 3.048 0 01-.498-.977 3.908 3.908 0 01-.192-1.207c0-.715.173-1.385.518-2.01a3.99 3.99 0 011.474-1.514c.664-.408 1.43-.613 2.299-.613 1.174 0 2.132.364 2.873 1.092.74.728 1.11 1.654 1.11 2.777 0 1.277-.287 2.324-.861 3.141-.575.818-1.284 1.226-2.126 1.226-.486 0-.869-.172-1.15-.517-.28-.345-.37-.747-.268-1.207.051-.28.166-.689.345-1.225.281-.945.421-1.603.421-1.973 0-.37-.102-.677-.306-.92-.204-.242-.498-.363-.881-.363-.485 0-.894.217-1.226.65-.332.435-.498.984-.498 1.648 0 .562.09 1.034.268 1.417L8.591 18.13c-.154.638-.166 1.545-.039 2.72-1.813-.69-3.275-1.839-4.386-3.448C3.056 15.792 2.5 13.991 2.5 12c0-1.711.428-3.294 1.283-4.75A9.6 9.6 0 017.25 3.783 9.209 9.209 0 0112 2.5c1.711 0 3.294.428 4.75 1.283a9.6 9.6 0 013.467 3.467A9.209 9.209 0 0121.5 12z"
       />
     </svg>
   );
diff --git a/app/isomorphic/arrow/components/Svgs/SocialIcons/twitter.js b/app/isomorphic/arrow/components/Svgs/SocialIcons/twitter.js
index 4081365d8..5383b2e62 100644
--- a/app/isomorphic/arrow/components/Svgs/SocialIcons/twitter.js
+++ b/app/isomorphic/arrow/components/Svgs/SocialIcons/twitter.js
@@ -1,15 +1,17 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-export const Twitter = ({ color = "#1CB7EB" }) => {
+export const Twitter = ({ color = "#000" }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
+        d="M17.75 3h3.068l-6.702 7.658L22 21.078h-6.171l-4.837-6.319-5.528 6.32H2.39l7.167-8.193L2 3h6.328l4.367 5.776L17.75 3Zm-1.078 16.245h1.7L7.401 4.738H5.577l11.095 14.507Z"
         fill={color}
-        d="M19.137 8.594c.023.094.035.246.035.457 0 1.687-.41 3.316-1.23 4.887-.844 1.664-2.028 2.988-3.551 3.972-1.664 1.102-3.575 1.652-5.73 1.652-2.063 0-3.95-.55-5.661-1.652.258.024.55.035.879.035 1.71 0 3.246-.527 4.605-1.582-.82 0-1.54-.24-2.162-.72a3.673 3.673 0 01-1.283-1.811c.234.023.457.035.668.035.328 0 .656-.035.984-.105a3.724 3.724 0 01-2.109-1.301 3.542 3.542 0 01-.844-2.32v-.07a3.493 3.493 0 001.653.492 4.097 4.097 0 01-1.196-1.336 3.557 3.557 0 01-.457-1.776c0-.644.176-1.26.528-1.845a10.188 10.188 0 003.357 2.742 10.222 10.222 0 004.236 1.125 5.122 5.122 0 01-.07-.844c0-.656.164-1.272.492-1.846a3.615 3.615 0 011.336-1.353 3.568 3.568 0 011.828-.492c.54 0 1.037.105 1.494.316.457.21.862.492 1.213.844a7.479 7.479 0 002.356-.88c-.281.868-.82 1.548-1.617 2.04A7.926 7.926 0 0021 6.66a8.132 8.132 0 01-1.863 1.934z"></path>
+      />
     </svg>
   );
 };
+
 Twitter.propTypes = {
   color: PropTypes.string
 };
diff --git a/app/isomorphic/arrow/components/Svgs/SocialIcons/whatsapp.js b/app/isomorphic/arrow/components/Svgs/SocialIcons/whatsapp.js
index 30f3a79cf..47d80fa0e 100644
--- a/app/isomorphic/arrow/components/Svgs/SocialIcons/whatsapp.js
+++ b/app/isomorphic/arrow/components/Svgs/SocialIcons/whatsapp.js
@@ -1,13 +1,15 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-export const WhatsApp = ({ color = "#4AC959" }) => {
+export const WhatsApp = ({ color = "#25D366" }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
-        fill={color}
         fillRule="evenodd"
-        d="M18.404 5.505a9.457 9.457 0 012.02 2.96 8.587 8.587 0 01.715 3.449 8.665 8.665 0 01-1.245 4.53 9.282 9.282 0 01-3.347 3.307 8.894 8.894 0 01-4.552 1.225 8.835 8.835 0 01-4.327-1.102l-4.817 1.265 1.307-4.694a8.775 8.775 0 01-1.225-4.531 8.77 8.77 0 011.225-4.531 9.17 9.17 0 013.306-3.307 8.781 8.781 0 014.531-1.224c1.198 0 2.347.23 3.45.693a9.515 9.515 0 012.959 1.96zm-6.409 13.96c1.36 0 2.626-.34 3.797-1.02a7.75 7.75 0 002.796-2.756 7.202 7.202 0 001.04-3.775c0-.98-.203-1.933-.612-2.858a8.088 8.088 0 00-1.694-2.47 7.565 7.565 0 00-2.449-1.653 7.405 7.405 0 00-2.878-.571c-1.36 0-2.62.34-3.776 1.02a7.646 7.646 0 00-2.755 2.756 7.316 7.316 0 00-1.02 3.776c0 1.442.394 2.775 1.183 4l.164.286-.776 2.775 2.857-.734.286.163a7.275 7.275 0 003.837 1.061zm4.123-5.674l.123.082c.19.082.299.15.326.204.027.054.034.19.02.408a2.11 2.11 0 01-.163.674c-.095.231-.313.462-.653.694-.34.231-.633.36-.878.388-.38.054-.748.054-1.102 0-.408-.082-.952-.273-1.632-.572-1.388-.599-2.654-1.714-3.797-3.347l-.081-.082c-.6-.843-.898-1.62-.898-2.327 0-.707.244-1.32.734-1.837l.041-.04c.19-.19.395-.286.612-.286h.49c.11 0 .198.02.266.061.068.041.129.143.183.306l.694 1.674c.082.163.095.3.041.408a2.832 2.832 0 01-.53.735.917.917 0 00-.205.265c-.027.068 0 .143.082.225.38.707.83 1.265 1.347 1.673.381.3.952.64 1.714 1.02.218.11.381.096.49-.04.354-.408.599-.707.735-.898.054-.109.123-.163.204-.163.082 0 .177.013.286.04.218.082.735.327 1.551.735z"></path>
+        clipRule="evenodd"
+        d="M19 4.875C17.125 3 14.625 2 12 2 6.5 2 2 6.5 2 12c0 1.75.5 3.5 1.375 5L2 22l5.25-1.375c1.5.75 3.125 1.25 4.75 1.25 5.5 0 10-4.5 10-10 0-2.625-1.125-5.125-3-7ZM12 20.25c-1.5 0-3-.375-4.25-1.125L7.5 19l-3.125.875.875-3L5 16.5c-.875-1.375-1.25-2.875-1.25-4.375 0-4.5 3.75-8.25 8.25-8.25 2.25 0 4.25.875 5.875 2.375 1.625 1.625 2.375 3.625 2.375 5.875 0 4.375-3.625 8.125-8.25 8.125ZM16.5 14c-.25-.125-1.5-.75-1.75-.75-.25-.125-.375-.125-.5.125s-.625.75-.75 1c-.125.125-.25.125-.5.125-.25-.125-1-.375-2-1.25-.75-.625-1.25-1.5-1.375-1.75s0-.375.125-.5l.375-.375c.125-.125.125-.25.25-.375s0-.25 0-.375S9.875 8.5 9.625 8c-.125-.375-.375-.375-.5-.375h-.5c-.125 0-.375 0-.625.25S7.125 8.75 7.125 10s.875 2.375 1 2.625c.125.125 1.75 2.75 4.25 3.75 2.125.875 2.5.625 3 .625s1.5-.625 1.625-1.125c.25-.625.25-1.125.125-1.125-.125-.625-.375-.625-.625-.75Z"
+        fill={color}
+      />
     </svg>
   );
 };
diff --git a/app/isomorphic/arrow/components/Svgs/SocialIcons/youtube.js b/app/isomorphic/arrow/components/Svgs/SocialIcons/youtube.js
index bb15b98bb..08a0e833c 100644
--- a/app/isomorphic/arrow/components/Svgs/SocialIcons/youtube.js
+++ b/app/isomorphic/arrow/components/Svgs/SocialIcons/youtube.js
@@ -1,13 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-export const Youtube = ({ color = "#F61C0D" }) => {
+export const Youtube = ({ color = "red" }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
+        d="M21.5 7.125a2.476 2.476 0 0 0-1.75-1.75C18.25 5 11.875 5 11.875 5S5.625 5 4 5.375c-.875.25-1.5.875-1.75 1.75C2 8.75 2 12 2 12s0 3.25.375 4.875c.25.875.875 1.5 1.75 1.75C5.625 19 12 19 12 19s6.25 0 7.875-.375c.875-.25 1.5-.875 1.75-1.75C22 15.25 22 12 22 12s0-3.25-.5-4.875ZM10 15V9l5.25 3L10 15Z"
         fill={color}
-        fillRule="evenodd"
-        d="M22.077 6.844c.18.703.308 1.77.385 3.203L22.5 12l-.038 1.953c-.077 1.458-.206 2.54-.385 3.242a2.733 2.733 0 01-.692 1.172 2.654 2.654 0 01-1.193.703c-.666.183-2.23.313-4.692.39l-3.5.04-3.5-.04c-2.462-.077-4.026-.207-4.692-.39a2.657 2.657 0 01-1.193-.703 2.733 2.733 0 01-.692-1.172c-.18-.703-.308-1.784-.385-3.242L1.5 12c0-.573.013-1.224.038-1.953.077-1.432.206-2.5.385-3.203A2.718 2.718 0 013.808 4.93c.666-.183 2.23-.313 4.692-.39L12 4.5l3.5.04c2.462.077 4.026.207 4.692.39a2.718 2.718 0 011.885 1.914zm-12.23 8.36l5.5-3.204-5.5-3.164v6.367z"
       />
     </svg>
   );
diff --git a/app/isomorphic/arrow/utils/utils.js b/app/isomorphic/arrow/utils/utils.js
index f276448d7..9feab2f3c 100644
--- a/app/isomorphic/arrow/utils/utils.js
+++ b/app/isomorphic/arrow/utils/utils.js
@@ -26,51 +26,58 @@ export const timestampToFormat = (value, unit, suffix, timestamp, config = {}, l
     isTimeFirst = false,
     isUpperCase = false,
     disableMeridiem = false,
-    timeFormat = "12hours",
-    localizedZeroToPad
+    dateFormat,
+    localizedMeridiem,
+    localizedMonths,
+    direction = "ltr"
   } = config;
+
   const monthList = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
   const dateTime = new Date(timestamp);
   const date = dateTime
     .getDate()
     .toString()
     .padStart(2, 0);
-
   const month = monthList[dateTime.getMonth()];
   let localizedMonth = month;
+
   if (isUpperCase) {
     localizedMonth = upperCase(month);
   }
+
   const year = dateTime.getFullYear();
-  const { localizedMeridiem, localizedMonths, direction = "ltr" } = config;
-  const time = formatAMPM(timestamp, timeFormat, localizedZeroToPad, languageCode);
-  let timeWithLocalizedMeridiem = time;
-  let timetoShow;
+  const rtlWithoutCustomLabels = direction === "rtl" && !localizedMeridiem && !localizedMonths;
+
+  const timeWithLocalizedMeridiem = formatAMPM(timestamp, languageCode, config);
+
+  let timetoShow = "";
+  let rtlTimetoShow = "";
+
+  if (showTime) {
+    timetoShow = `, ${timeWithLocalizedMeridiem}`;
+    rtlTimetoShow = `${timeWithLocalizedMeridiem} ,`;
+  }
 
   if (localizedMonths) {
     localizedMonth = get(localizedMonths, [lowerCase(month)]) || month;
   }
-  const localizedDate = Number(date).toLocaleString(languageCode);
+  const localizedDate = date.toLocaleString(languageCode);
   const localizedYear = year.toLocaleString(languageCode).replace(/,/g, "");
 
-  if (localizedMeridiem) {
-    const isAm = time.includes("am");
-    const { am = "am", pm = "pm" } = localizedMeridiem;
-    timeWithLocalizedMeridiem = (isAm ? time.replace("am", am) : time.replace("pm", pm)) || time;
-  }
-
-  if (direction === "rtl") {
-    timetoShow = showTime ? `, ${timeWithLocalizedMeridiem}` : "";
-    return `${localizedDate} ${localizedMonth}, ${localizedYear}${timetoShow} `;
+  if (disableMeridiem) {
+    return `${localizedMonth} ${localizedDate}, ${localizedYear}`;
+  } else if (isTimeFirst) {
+    return `${timeWithLocalizedMeridiem}, ${localizedDate} ${localizedMonth} ${localizedYear}`;
+  } else if (dateFormat === "mon-dd-yyyy") {
+    if (rtlWithoutCustomLabels) {
+      return `${rtlTimetoShow}${localizedYear} ,${localizedDate} ${localizedMonth}`;
+    }
+    return `${localizedMonth} ${localizedDate}, ${localizedYear}${timetoShow}`;
   } else {
-    if (disableMeridiem) {
-      return `${localizedMonth} ${localizedDate}, ${localizedYear}`;
-    } else if (isTimeFirst) {
-      return `${timeWithLocalizedMeridiem}, ${localizedDate} ${localizedMonth} ${localizedYear}`;
-    } else {
-      timetoShow = showTime ? `, ${timeWithLocalizedMeridiem}` : "";
-      return `${localizedDate} ${localizedMonth}, ${localizedYear}${timetoShow}`;
+    if (rtlWithoutCustomLabels) {
+      return `${rtlTimetoShow}${localizedYear} ${localizedMonth} ${localizedDate}`;
     }
+    return `${localizedDate} ${localizedMonth} ${localizedYear}${timetoShow}`;
   }
 };
 
@@ -121,8 +128,14 @@ function monkeyPatchForArabic(timeStr = "") {
   return str;
 }
 
-function formatAMPM(timestamp, timeFormat = "12hours", localizedZeroToPad, languageCode) {
+function formatAMPM(timestamp, languageCode, config) {
+  const { timeFormat = "12hours", localizedZeroToPad, direction = "ltr", localizedMonths, localizedMeridiem } = config;
   const dateTime = new Date(timestamp);
+
+  if (timeFormat === "24hours") {
+    return dateTime.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  }
+
   let hours = dateTime.getHours();
   let minutes = dateTime.getMinutes();
   const ampm = hours >= 12 ? "pm" : "am";
@@ -130,10 +143,18 @@ function formatAMPM(timestamp, timeFormat = "12hours", localizedZeroToPad, langu
   hours = hours || 12;
   const padZero = languageCode.startsWith("en") ? "0" : localizedZeroToPad;
   minutes = minutes < 10 ? padZero + minutes.toLocaleString(languageCode) : minutes.toLocaleString(languageCode);
-  const strTime = hours.toLocaleString(languageCode) + ":" + minutes + " " + ampm.toLocaleString(languageCode);
-  if (timeFormat === "24hours") {
-    return dateTime.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  let updatedAmPm = ampm.toLocaleString(languageCode);
+
+  if (localizedMeridiem) {
+    const { am = "am", pm = "pm" } = localizedMeridiem;
+    updatedAmPm = ampm.toLocaleString(languageCode) === "am" ? am : pm;
   }
+
+  if (direction === "rtl" && !localizedMeridiem && !localizedMonths) {
+    const strTime = updatedAmPm + " " + hours.toLocaleString(languageCode) + ":" + minutes;
+    return strTime;
+  }
+  const strTime = hours.toLocaleString(languageCode) + ":" + minutes + " " + updatedAmPm;
   return strTime;
 }
 
@@ -401,3 +422,17 @@ export function getStoryTemplate(story, config) {
     isCustomStory && get(config, ["customStory", `${camelCase(storyTemplate)}-story`, "storyType"], "text");
   return isCustomStory ? kebabCase(customStoryTemplate) : storyTemplate;
 }
+
+export function getTimeStampConfig(qtConfig) {
+  const { dateFormat = "dd-mon-yyyy", localization = {} } = get(qtConfig, ["pagebuilder-config", "general"], {});
+  const { enableLocalization = false, localizedElements = {} } = localization;
+
+  const timeStampConfig = {
+    isUpperCase: false,
+    disableMeridiem: false,
+    dateFormat,
+    localizedMonths: enableLocalization && get(localizedElements, ["months"])
+  };
+
+  return timeStampConfig;
+}
diff --git a/run b/run
index d521b1ca8..5962843e0 100755
--- a/run
+++ b/run
@@ -1,9 +1,11 @@
 #!/bin/bash -e
 
 npm install
-npm run copy-arrow
+# npm run copy-arrow
+# comment the above line for copying the arrow source code
+
+# Do not overwrite the import in line 1 of isomorphic/arrow/components/Molecules/fullscreenimages.scss file
 
-# Do not overwrite the import in line 1 in fullscreenimages.scss
 
 npm run compile
 supervisord -n -c <(cat <<EOF

From 4ea0081723a97dde25d0e6517aec9354dffefbee Mon Sep 17 00:00:00 2001
From: Shraddha Kesari <shraddha@quintype.com>
Date: Tue, 12 Dec 2023 11:49:43 +0530
Subject: [PATCH 7/8] Update arrow source code

---
 .../components/Atoms/AuthorCard/index.js      |  4 +-
 .../components/Atoms/PublishDetail/index.js   |  4 +-
 .../components/Atoms/SectionTag/index.js      |  4 +-
 .../Atoms/StoryElements/Text/text.m.css       |  4 +-
 .../components/Molecules/KeyEvents/index.js   | 31 +++++++--
 .../Molecules/KeyEvents/key-events.m.css      |  7 ++
 .../Molecules/StoryElementCard/index.js       | 69 +++++++++++++++++++
 .../StoryElementCard/story-element-card.m.css |  7 ++
 .../Rows/AuthorIntroductionCard/index.js      |  2 +-
 .../LiveBlogStoryTemplates/live-blog.m.css    |  6 ++
 .../LiveBlogStoryTemplates/templates.js       | 49 ++++++++++---
 app/isomorphic/arrow/utils/utils.js           | 36 +++++++---
 12 files changed, 186 insertions(+), 37 deletions(-)

diff --git a/app/isomorphic/arrow/components/Atoms/AuthorCard/index.js b/app/isomorphic/arrow/components/Atoms/AuthorCard/index.js
index 443a734f7..c738f0ef1 100644
--- a/app/isomorphic/arrow/components/Atoms/AuthorCard/index.js
+++ b/app/isomorphic/arrow/components/Atoms/AuthorCard/index.js
@@ -165,7 +165,7 @@ const DefaultTemplate = ({ authors, clazzName = "", opts = {}, mountAt = "", tex
       <div data-test-id={`author-card-${kebabCase(template)}`} className={`${!showImage ? "author-card-wrapper" : ""}`}>
         <div styleName={`author-card-wrapper ${template}`} className={clazzName}>
           {showLabels && mainAuthors.length > 0 && (showName || showImage) && (
-            <span styleName={`${textColor} author-card-label`}>{`${finalAuthorLabel}\xa0:`}</span>
+            <span styleName={`${textColor} author-card-label`}>{`${finalAuthorLabel}:`}</span>
           )}
           {showImage && <AuthorsImage authors={mainAuthors} mountAt={mountAt} />}
           {showName && <AuthorsName authors={mainAuthors} mountAt={mountAt} textColor={textColor} showTwitter={true} />}
@@ -178,7 +178,7 @@ const DefaultTemplate = ({ authors, clazzName = "", opts = {}, mountAt = "", tex
           styleName={`author-card-wrapper ${template} ${isGuestAuthorsPresent ? "guest-author-wrapper" : ""}`}
           className={clazzName}>
           {showLabels && isGuestAuthorsPresent && (showGuestAuthorName || showGuestAuthorImage) && (
-            <span styleName={`${textColor} author-card-label`}>{`${finalGuestAuthorLabel}\xa0:`}</span>
+            <span styleName={`${textColor} author-card-label`}>{`${finalGuestAuthorLabel}:`}</span>
           )}
           {showGuestAuthorImage && <AuthorsImage authors={guestAuthors} mountAt={mountAt} />}
           {showGuestAuthorName && (
diff --git a/app/isomorphic/arrow/components/Atoms/PublishDetail/index.js b/app/isomorphic/arrow/components/Atoms/PublishDetail/index.js
index 8967de525..f9fd9fefd 100644
--- a/app/isomorphic/arrow/components/Atoms/PublishDetail/index.js
+++ b/app/isomorphic/arrow/components/Atoms/PublishDetail/index.js
@@ -40,7 +40,7 @@ export const PublishDetails = ({ story, opts = {}, template = "", timezone = nul
     <div data-test-id="timeStamp" className="arrow-component arr--publish-details" styleName={`timeStamp ${textColor}`}>
       {enablePublishedTime && (
         <div data-test-id="publishDetails" styleName={`publish-details ${textColor}`}>
-          {localizedPublishedOn || "Published on"} :&nbsp;
+          {localizedPublishedOn || "Published on"}:&nbsp;
           <div styleName={updatedStyle}>
             {getTimeStamp(time, timestampToFormat, timeStampProps, languageCode, template, timezone)}
           </div>
@@ -51,7 +51,7 @@ export const PublishDetails = ({ story, opts = {}, template = "", timezone = nul
       )}
       {enableUpdatedTime && (
         <div data-test-id="updateDetails" styleName={`update-details ${textColor}`}>
-          {localizedUpdatedOn || "Updated on"} :&nbsp;
+          {localizedUpdatedOn || "Updated on"}:&nbsp;
           <div styleName={updatedStyle}>
             {getTimeStamp(lastPublish, timestampToFormat, timeStampProps, languageCode, template, timezone)}
           </div>
diff --git a/app/isomorphic/arrow/components/Atoms/SectionTag/index.js b/app/isomorphic/arrow/components/Atoms/SectionTag/index.js
index a2e99d3a6..5311c68f0 100644
--- a/app/isomorphic/arrow/components/Atoms/SectionTag/index.js
+++ b/app/isomorphic/arrow/components/Atoms/SectionTag/index.js
@@ -27,7 +27,7 @@ export const SectionTag = ({ story, template = "", borderColor = "", isLightThem
   if (!isSection) return null;
   return (
     <Link href={getUrl} className="arrow-component arr--section-name" aria-label="section-name">
-      <div
+      <span
         data-test-id="sectionTag"
         className="section-tag arrow-component"
         styleName={`${textColor} ${templateStyle}`}
@@ -43,7 +43,7 @@ export const SectionTag = ({ story, template = "", borderColor = "", isLightThem
           style={{
             backgroundColor: template !== "solid" && sectionTagBorderColor ? sectionTagBorderColor : "initial"
           }}></div>
-      </div>
+      </span>
     </Link>
   );
 };
diff --git a/app/isomorphic/arrow/components/Atoms/StoryElements/Text/text.m.css b/app/isomorphic/arrow/components/Atoms/StoryElements/Text/text.m.css
index 50fc77149..45e04bba0 100644
--- a/app/isomorphic/arrow/components/Atoms/StoryElements/Text/text.m.css
+++ b/app/isomorphic/arrow/components/Atoms/StoryElements/Text/text.m.css
@@ -50,9 +50,9 @@
 .textElement ul,
 .textElement ol {
   list-style: initial;
-  padding: var(--arrow-spacing-m) 0 0 var(--arrow-spacing-l);
+  padding: var(--arrow-spacing-m) var(--arrow-spacing-xl) 0 var(--arrow-spacing-l);
   @media (min-width: mobile) {
-    padding: var(--arrow-spacing-m) 0 0 var(--arrow-spacing-xl);
+    padding: var(--arrow-spacing-m) var(--arrow-spacing-xl) 0 var(--arrow-spacing-xl);
   }
 }
 
diff --git a/app/isomorphic/arrow/components/Molecules/KeyEvents/index.js b/app/isomorphic/arrow/components/Molecules/KeyEvents/index.js
index 2fec0f36d..2660e1ad4 100644
--- a/app/isomorphic/arrow/components/Molecules/KeyEvents/index.js
+++ b/app/isomorphic/arrow/components/Molecules/KeyEvents/index.js
@@ -2,30 +2,45 @@ import React, { useState } from "react";
 import get from "lodash.get";
 import PropTypes from "prop-types";
 import { ClockIcon } from "../../Svgs/clock-icon";
-import { getTextColor, getTimeStamp, timestampToFormat } from "../../../utils/utils";
+import { getTextColor, getTimeStamp, timestampToFormat, getTimeStampConfig } from "../../../utils/utils";
 import { LoadmoreButton } from "../../Atoms/Loadmore";
 import { StateProvider } from "../../SharedContext";
 import "./key-events.m.css";
 import { useSelector } from "react-redux";
 
 const KeyEventCards = (props) => {
-  const { config, index, cardLength, card = {}, slug, loadCards, showLoadMore } = props;
+  const { config, index, cardLength, card = {}, slug, loadCards, showLoadMore, qtConfig } = props;
   const { "card-added-at": cardAddedAt, "story-elements": storyElements = [], id } = card;
-  const { theme, mountAt = "" } = config;
+  const { theme } = config;
   const textColor = getTextColor(theme);
   const dark = "#333";
   const light = "#fff";
   const updateColor = textColor === "dark" ? dark : light;
   const lastElement = index === cardLength - 1;
   const borderLeft = lastElement ? "borderNone" : "";
+  const timeStampConfig = getTimeStampConfig(qtConfig);
+  const direction = get(qtConfig, ["language", "direction"], "ltr");
 
+  function scrollToCard(event) {
+    event.preventDefault();
+    const cardToView = document.getElementById(`${slug}-${id}`);
+    cardToView.scrollIntoView();
+  }
+
+  const rltDateTimeWithOutLocalization =
+    direction === "rtl" && !timeStampConfig.enableLocalization ? "rtl-date-time" : "";
   return (
     <>
-      <div styleName={`time-wrapper ${textColor}`}>
+      <div styleName={`time-wrapper ${rltDateTimeWithOutLocalization} ${textColor}`}>
         <ClockIcon color={updateColor} />
-        {getTimeStamp(cardAddedAt, timestampToFormat, { showTime: true, isTimeFirst: true })}
+        {getTimeStamp(cardAddedAt, timestampToFormat, {
+          showTime: true,
+          isTimeFirst: true,
+          direction,
+          ...timeStampConfig
+        })}
       </div>
-      <a href={`${mountAt}/${slug}#${id}`} aria-label="event-title">
+      <a href="#" onClick={scrollToCard} aria-label="event-title">
         <div styleName={`event-title ${textColor} ${borderLeft}`}>
           {storyElements.map((element, index) => element.type === "title" && <h3 key={index}>{element.text}</h3>)}
           {showLoadMore && lastElement && loadCards && (
@@ -55,7 +70,8 @@ KeyEventCards.propTypes = {
   index: PropTypes.number,
   cardLength: PropTypes.number,
   loadCards: PropTypes.bool,
-  showLoadMore: PropTypes.bool
+  showLoadMore: PropTypes.bool,
+  qtConfig: PropTypes.object
 };
 
 const KeyEvents = ({ story = {}, config = {}, showLoadMore = true, publishedDetails = {} }) => {
@@ -88,6 +104,7 @@ const KeyEvents = ({ story = {}, config = {}, showLoadMore = true, publishedDeta
       index={index}
       loadCards={lastElement}
       showLoadMore={showLoadMore}
+      qtConfig={qtConfig}
     />
   ));
 
diff --git a/app/isomorphic/arrow/components/Molecules/KeyEvents/key-events.m.css b/app/isomorphic/arrow/components/Molecules/KeyEvents/key-events.m.css
index 332f5aef1..19aa14844 100644
--- a/app/isomorphic/arrow/components/Molecules/KeyEvents/key-events.m.css
+++ b/app/isomorphic/arrow/components/Molecules/KeyEvents/key-events.m.css
@@ -73,6 +73,13 @@ html[dir="rtl"] {
       margin-left: var(--arrow-spacing-xxs);
     }
   }
+  .time-wrapper > time {
+    direction: rtl;
+  }
+
+  .rtl-date-time.time-wrapper > time {
+    direction: ltr;
+  }
 
   .event-title.dark,
   .event-title.light {
diff --git a/app/isomorphic/arrow/components/Molecules/StoryElementCard/index.js b/app/isomorphic/arrow/components/Molecules/StoryElementCard/index.js
index 2089c9add..15cdf3cfd 100644
--- a/app/isomorphic/arrow/components/Molecules/StoryElementCard/index.js
+++ b/app/isomorphic/arrow/components/Molecules/StoryElementCard/index.js
@@ -278,6 +278,75 @@ const getElement = (story, element, config = {}, AdComponent, WidgetComp, index,
   }
 };
 
+export const LiveBlogStoryElement = ({
+  story,
+  card,
+  heroVideoElementId = -1,
+  config,
+  theme,
+  adComponent,
+  widgetComp,
+  enableDarkMode,
+  CardShare
+}) => {
+  const textColor = getTextColor(theme);
+  let shouldRunFBMobileVideoFix = true;
+  const storyElements = get(card, ["story-elements"], []);
+  const firstNonAdElementIndex = storyElements.findIndex(
+    (element) => element.type !== "ad" && element.type !== "widget"
+  );
+
+  const adElementsAbove = storyElements.slice(0, firstNonAdElementIndex);
+  const restElements = storyElements.slice(firstNonAdElementIndex);
+
+  function StoryElements(storyElements) {
+    return (
+      <div className="arr--story-page-card-wrapper">
+        {storyElements.map((element, index) => {
+          if (element.id === heroVideoElementId) return false;
+          if (element.subtype && element.subtype === "facebook-post" && shouldRunFBMobileVideoFix) {
+            facebookMobileVideoResizeFix();
+            shouldRunFBMobileVideoFix = false;
+          }
+          const tableStyle = element && element.subtype === "table" ? "table" : "";
+          const cardId = get(card, ["id"], "");
+
+          return (
+            <>
+              <div
+                key={element.id}
+                className="arr--element-container"
+                styleName={`element-container live-blog ${tableStyle} ${textColor}`}>
+                {getElement(story, element, config, adComponent, widgetComp, index, cardId, enableDarkMode)}
+              </div>
+            </>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {StoryElements(adElementsAbove)}
+      <CardShare />
+      {StoryElements(restElements)}
+    </>
+  );
+};
+
+LiveBlogStoryElement.propTypes = {
+  story: PropTypes.object,
+  card: PropTypes.object,
+  heroVideoElementId: PropTypes.number,
+  config: PropTypes.object,
+  theme: PropTypes.string,
+  adComponent: PropTypes.func,
+  widgetComp: PropTypes.func,
+  enableDarkMode: PropTypes.bool,
+  CardShare: PropTypes.func
+};
+
 const MainImageWrapper = ({ imageElement, story, children, config, card }) => {
   return (
     <>
diff --git a/app/isomorphic/arrow/components/Molecules/StoryElementCard/story-element-card.m.css b/app/isomorphic/arrow/components/Molecules/StoryElementCard/story-element-card.m.css
index 54135fd42..a9a5e8460 100644
--- a/app/isomorphic/arrow/components/Molecules/StoryElementCard/story-element-card.m.css
+++ b/app/isomorphic/arrow/components/Molecules/StoryElementCard/story-element-card.m.css
@@ -88,6 +88,13 @@
   position: relative;
 }
 
+.element-container :global(.story-element-jsembed > .jsembed-wrapper.facebook-jsembed) iframe {
+  max-width: 100%;
+  width: revert-layer;
+  display: block;
+  margin: auto;
+}
+
 .element-container :global(.dailymotion-embed-wrapper .dailymotion-player-root) {
   padding-bottom: 0 !important;
   position: absolute !important;
diff --git a/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/index.js b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/index.js
index 66ec824df..f7aff1d23 100644
--- a/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/index.js
+++ b/app/isomorphic/arrow/components/Rows/AuthorIntroductionCard/index.js
@@ -67,7 +67,7 @@ const AuthorIntroductionCard = ({ data = {}, config = {}, template = "" }) => {
             <div styleName="social-connect-wrapper">
               {enableSocialLinks && social && (
                 <>
-                  {template !== "smallCircle" && <div styleName={`connect ${textColor}`}>Connect :</div>}
+                  {template !== "smallCircle" && <div styleName={`connect ${textColor}`}>Connect:</div>}
                   {Object.entries(social).map((item, index) =>
                     item.length > 0 && item[1] ? (
                       // can add Social Networks without the url so adding an additional check below
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/live-blog.m.css b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/live-blog.m.css
index ac997a052..845d366c1 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/live-blog.m.css
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/live-blog.m.css
@@ -324,4 +324,10 @@ html[dir="rtl"] {
     direction: ltr;
     flex-direction: row-reverse;
   }
+  .time-wrapper > time {
+    direction: rtl;
+  }
+  .time-wrapper.rtl-date-time > time {
+    direction: ltr;
+  }
 }
diff --git a/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/templates.js b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/templates.js
index 9f8f91a7c..933468c9e 100644
--- a/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/templates.js
+++ b/app/isomorphic/arrow/components/Rows/StoryTemplates/LiveBlogStoryTemplates/templates.js
@@ -7,18 +7,25 @@ import { SectionTag } from "../../../Atoms/SectionTag";
 import { Subheadline } from "../../../Atoms/Subheadline";
 import AsideCollection from "../../AsideCollection";
 import { AuthorCard } from "../../../Atoms/AuthorCard";
-import { StoryElementCard, SlotAfterStory } from "../../../Molecules/StoryElementCard";
+import { SlotAfterStory, LiveBlogStoryElement } from "../../../Molecules/StoryElementCard";
 import { PublishDetails } from "../../../Atoms/PublishDetail";
 import { StoryTags } from "../../../Atoms/StoryTags";
 import { HeroImage } from "../../../Atoms/HeroImage";
 import "./live-blog.m.css";
 import { CaptionAttribution } from "../../../Atoms/CaptionAttribution";
-import { clientWidth, getTextColor, getTimeStamp, timestampToFormat } from "../../../../utils/utils";
+import {
+  clientWidth,
+  getTextColor,
+  getTimeStamp,
+  timestampToFormat,
+  getTimeStampConfig
+} from "../../../../utils/utils";
 import LiveIcon from "../../../Svgs/liveicon";
 import KeyEvents from "../../../Molecules/KeyEvents";
 import { ClockIcon } from "../../../Svgs/clock-icon";
 import { StoryHeadline } from "../../../Atoms/StoryHeadline";
 import { StoryReview } from "../../../Atoms/StoryReview";
+import { useSelector } from "react-redux";
 
 export const LiveBlogStoryTemplates = ({
   story = {},
@@ -49,6 +56,10 @@ export const LiveBlogStoryTemplates = ({
     premiumStoryIconConfig = {}
   } = config;
 
+  const qtConfig = useSelector((state) => get(state, ["qt", "config"], {}));
+  const timeStampConfig = getTimeStampConfig(qtConfig);
+  const direction = get(qtConfig, ["language", "direction"], "ltr");
+
   const visibleCards = noOfVisibleCards < 0 ? story.cards : story.cards.slice(0, noOfVisibleCards);
   const textColor = getTextColor(theme);
   const dark = "#333";
@@ -80,33 +91,49 @@ export const LiveBlogStoryTemplates = ({
       const borderBottom = index === visibleCards.length - 1 ? "" : `share-cards ${textColor}`;
       const cardId = get(card, ["id"], "");
       const { "card-added-at": cardAddedAt } = card;
-      return (
-        <div key={index} styleName={borderBottom}>
+
+      const storyUrl = new URL(story.url);
+      const shareUrl = encodeURI(storyUrl.origin + `${mountAt}${storyUrl.pathname}#${story.slug}-${cardId}`);
+
+      function CardShare() {
+        const rltDateTimeWithOutLocalization =
+          direction === "rtl" && !timeStampConfig.enableLocalization ? "rtl-date-time" : "";
+        return (
           <div styleName="card-share">
-            <div styleName={`time-wrapper ${textColor}`}>
+            <div styleName={`time-wrapper ${rltDateTimeWithOutLocalization} ${textColor}`}>
               <ClockIcon color={updateColor} />
-              {getTimeStamp(cardAddedAt, timestampToFormat, { isTimeFirst: true })}
+              {getTimeStamp(cardAddedAt, timestampToFormat, {
+                isTimeFirst: true,
+                ...timeStampConfig,
+                direction,
+                showTime: true
+              })}
             </div>
             <div id={`card-share-${cardId}_${storyId}`} className="content-style">
               <SocialShare
                 template={SocialShareTemplate}
-                fullUrl={encodeURI(story.url)}
+                fullUrl={shareUrl}
                 title={story.headline}
                 theme={theme}
                 iconType={shareIconType}
               />
             </div>
           </div>
-          <StoryElementCard
+        );
+      }
+
+      return (
+        <div key={index} styleName={borderBottom} id={`${story.slug}-${cardId}`} style={{ scrollMarginTop: "20vh" }}>
+          <LiveBlogStoryElement
             story={story}
             card={card}
             key={cardId}
             config={storyElementsConfig}
-            isLive
             theme={theme}
             adComponent={adComponent}
             widgetComp={widgetComp}
             enableDarkMode={enableDarkMode}
+            CardShare={CardShare}
           />
         </div>
       );
@@ -198,7 +225,7 @@ export const LiveBlogStoryTemplates = ({
               widgetComp={widgetComp}
               sticky={true}
               enableKeyEvents={!isMobile}
-              keyEventsData={{ story, config, showLoadMore: false }}
+              keyEventsData={{ story, config, showLoadMore: true }}
               story={story}
               opts={publishedDetails}
               loadRelatedStories={loadRelatedStories}
@@ -293,7 +320,7 @@ export const LiveBlogStoryTemplates = ({
               widgetComp={widgetComp}
               sticky={true}
               enableKeyEvents={!isMobile}
-              keyEventsData={{ story, config, showLoadMore: false }}
+              keyEventsData={{ story, config, showLoadMore: true }}
               story={story}
               opts={publishedDetails}
               loadRelatedStories={loadRelatedStories}
diff --git a/app/isomorphic/arrow/utils/utils.js b/app/isomorphic/arrow/utils/utils.js
index 9feab2f3c..3d098eb58 100644
--- a/app/isomorphic/arrow/utils/utils.js
+++ b/app/isomorphic/arrow/utils/utils.js
@@ -48,14 +48,16 @@ export const timestampToFormat = (value, unit, suffix, timestamp, config = {}, l
   const year = dateTime.getFullYear();
   const rtlWithoutCustomLabels = direction === "rtl" && !localizedMeridiem && !localizedMonths;
 
-  const timeWithLocalizedMeridiem = formatAMPM(timestamp, languageCode, config);
+  const timeWithLocalizedMeridiem = formatAMPM(timestamp, languageCode, config, isTimeFirst);
 
   let timetoShow = "";
   let rtlTimetoShow = "";
 
   if (showTime) {
     timetoShow = `, ${timeWithLocalizedMeridiem}`;
-    rtlTimetoShow = `${timeWithLocalizedMeridiem} ,`;
+    if (isTimeFirst && rtlWithoutCustomLabels) {
+      rtlTimetoShow = `${timeWithLocalizedMeridiem}`;
+    } else rtlTimetoShow = `${timeWithLocalizedMeridiem} ,`;
   }
 
   if (localizedMonths) {
@@ -67,6 +69,9 @@ export const timestampToFormat = (value, unit, suffix, timestamp, config = {}, l
   if (disableMeridiem) {
     return `${localizedMonth} ${localizedDate}, ${localizedYear}`;
   } else if (isTimeFirst) {
+    if (rtlWithoutCustomLabels) {
+      return `${localizedYear} ${localizedMonth} ${localizedDate}, ${rtlTimetoShow}`;
+    }
     return `${timeWithLocalizedMeridiem}, ${localizedDate} ${localizedMonth} ${localizedYear}`;
   } else if (dateFormat === "mon-dd-yyyy") {
     if (rtlWithoutCustomLabels) {
@@ -128,12 +133,13 @@ function monkeyPatchForArabic(timeStr = "") {
   return str;
 }
 
-function formatAMPM(timestamp, languageCode, config) {
+function formatAMPM(timestamp, languageCode, config, isTimeFirst) {
   const { timeFormat = "12hours", localizedZeroToPad, direction = "ltr", localizedMonths, localizedMeridiem } = config;
   const dateTime = new Date(timestamp);
 
   if (timeFormat === "24hours") {
-    return dateTime.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+    //  'en-GB' formats the time in 24-hours format
+    return dateTime.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
   }
 
   let hours = dateTime.getHours();
@@ -151,6 +157,10 @@ function formatAMPM(timestamp, languageCode, config) {
   }
 
   if (direction === "rtl" && !localizedMeridiem && !localizedMonths) {
+    if (isTimeFirst) {
+      const strTime = hours.toLocaleString(languageCode) + ":" + minutes + " " + updatedAmPm;
+      return strTime;
+    }
     const strTime = updatedAmPm + " " + hours.toLocaleString(languageCode) + ":" + minutes;
     return strTime;
   }
@@ -380,7 +390,6 @@ export const getTimeStamp = (
   timeAgoFormat = ""
 ) => {
   const isRelatedCollection = get(config, ["isRelatedCollection"], false);
-
   if (timezone && template === "story") {
     const zonedTime = timezone && utcToZonedTime(date, timezone);
     const formatZonedTime = zonedTime && format(zonedTime, "yyyy-MM-dd'T'HH:mm:ssXXX", { timeZone: timezone });
@@ -394,9 +403,9 @@ export const getTimeStamp = (
       date={date}
       component={isRelatedCollection ? "div" : "time"}
       className="arr__timeago"
-      formatter={(value, unit, suffix, date) =>
-        formatter(value, unit, suffix, date, config, languageCode, isLocalizedNumber, timeAgoFormat)
-      }
+      formatter={(value, unit, suffix, date) => {
+        return formatter(value, unit, suffix, date, config, languageCode, isLocalizedNumber, timeAgoFormat);
+      }}
     />
   );
 };
@@ -424,14 +433,21 @@ export function getStoryTemplate(story, config) {
 }
 
 export function getTimeStampConfig(qtConfig) {
-  const { dateFormat = "dd-mon-yyyy", localization = {} } = get(qtConfig, ["pagebuilder-config", "general"], {});
+  const { dateFormat = "dd-mon-yyyy", localization = {}, timeFormat } = get(
+    qtConfig,
+    ["pagebuilder-config", "general"],
+    {}
+  );
   const { enableLocalization = false, localizedElements = {} } = localization;
 
   const timeStampConfig = {
     isUpperCase: false,
     disableMeridiem: false,
     dateFormat,
-    localizedMonths: enableLocalization && get(localizedElements, ["months"])
+    timeFormat,
+    localizedMonths: enableLocalization && get(localizedElements, ["months"]),
+    localizedMeridiem: enableLocalization && get(localizedElements, ["meridiem"], {}),
+    enableLocalization
   };
 
   return timeStampConfig;

From 4680f79aa7adbd9b2d86be758a5fee0366ee4bfb Mon Sep 17 00:00:00 2001
From: Shraddha Kesari <shraddha@quintype.com>
Date: Tue, 12 Dec 2023 15:06:00 +0530
Subject: [PATCH 8/8] Add template options

---
 config/template-options.yml | 1065 ++++++++++++++++++++++++++++++++++-
 1 file changed, 1038 insertions(+), 27 deletions(-)

diff --git a/config/template-options.yml b/config/template-options.yml
index 5b31edb0e..0416114fa 100644
--- a/config/template-options.yml
+++ b/config/template-options.yml
@@ -1,28 +1,1039 @@
 collection-layouts:
-- name: FourColGrid
-  display: Default Malibu Widget
-  options: []
-- name: ArrowThreeColGrid
-  display: Arrow Three Col Grid
-  options: []
-- name : ArrowFourColGrid
-  display name: Arrow Four Col Grid
-  options: []
-- name : ArrowFourColTwelveStories
-  display name: Arrow Four Col 12 Stories
-  options: []
-- name : ArrowFullScreenSlider
-  display name: Arrow Full Screen Slider
-  options: []
-- name : ArrowThreeColSevenStories
-  display name: Arrow Three Col Seven Stories
-  options: []
-- name : ArrowElevenStoriesRow
-  display name: Arrow Eleven Stories Row
-  options: []
-- name : ArrowTwoColFourStories
-  display name: Arrow Two Col Four Stories
-  options: []
-- name : ArrowOneColStoryList
-  display name: Arrow One Col Story List
-  options: []
+  - name: FourColGrid
+    display: Default Malibu Widget
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowThreeColGrid
+    display: Arrow Three Col Grid
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowFourColGrid
+    display: Arrow Four Col Grid
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowFourColTwelveStories
+    display: Arrow Four Col 12 Stories
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowFullScreenSlider
+    display: Arrow Full Screen Slider
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowThreeColSevenStories
+    display: Arrow Three Col Seven Stories
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowElevenStoriesRow
+    display: Arrow Eleven Stories Row
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowTwoColFourStories
+    display: Arrow Two Col Four Stories
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowOneColStoryList
+    display: Arrow One Col Story List
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowTwoColThreeStories
+    display: Arrow Two Col Three Stories
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowTwoColSevenStories
+    display: Arrow Two Col Seven Stories
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowThreeColSixStories
+    display: Arrow Three Col Six Stories
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowHalfScreenSlider
+    display: Arrow Half Screen Slider
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowFourStorySlider
+    display: Arrow Four Story Slider
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowFourStorySliderPortrait
+    display: Arrow Four Story Slider Portrait
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowThreeColFourteenStories
+    display: Arrow Three Col Fourteen Stories
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowFourColSixteenStories
+    display: Arrow Four Col Sixteen Stories
+    options: []
+  - name: ArrowFourColFiveStories
+    display: Arrow Four Col Five Stories
+    options: []
+  - name: ArrowTwoColSixStories
+    display: Arrow Two Col Six Stories
+    options: []
+  - name: ArrowTwoColFourStoryHighlight
+    display: Arrow Two Col Four Story Highlight
+    options: []
+  - name: ArrowThreeColFlexStories
+    display: Arrow Three Col Flex Stories
+    options: []
+  - name: ArrowSixColSixStories
+    display: Arrow Six Col Six Stories
+    options: []
+  - name: ArrowTwoColTenStoriesSidebar
+    display: Arrow Two Col Ten Stories Sidebar
+    options: []
+  - name: ArrowThreeColTwelveStories
+    display: Arrow Three Col 12 Stories
+    options: []
+  - name: ArrowFourTabbedBigStorySlider
+    display: Four Tabbed Big Story With Scroll
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowFourColPortraitStories
+    display: Arrow Four Col Portrait Stories
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowCollectionFilter
+    display: Arrow Collection Filter
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowAlternateCollectionFilter
+    display: Arrow Alternate Collection Filter
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowAstrologyCollection
+    display: Arrow Astrology Collection
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowOpinionCollection
+    display: Arrow Opinion Collection
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowListicles
+    display: Arrow Listicles
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowMagazineWidget
+    display: Arrow Magazine Widget
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowMagazineEditions
+    display: Arrow Magazine Editions
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string
+  - name: ArrowListComponent
+    display: Arrow List Component
+    options:
+      - default: "#FFFFFF"
+        name: row_background_color
+        type: string
+      - default: false
+        name: hide_row_title
+        type: boolean
+      - default: "#e43232"
+        name: collection_name_border_color
+        type: string
+      - default: false
+        name: hide_section_tag
+        type: boolean
+      - default: "#e43232"
+        name: section_border_color
+        type: string
+      - default: false
+        name: hide_author
+        type: boolean
+      - default: false
+        name: hide_timestamp
+        type: boolean
+      - default: false
+        name: hide_read_time
+        type: boolean
+      - default: false
+        name: hide_button
+        type: boolean
+      - default: "Read More"
+        name: button_text
+        type: string
+      - default: null
+        name: widget_above_component
+        type: string
+      - default: null
+        name: alternative_collection_title
+        type: string