diff --git a/app/app.js b/app/app.js
index 6cddf4e..788b08c 100644
--- a/app/app.js
+++ b/app/app.js
@@ -29,6 +29,17 @@ import LanguageProvider from 'containers/LanguageProvider';
 /* eslint-disable import/no-unresolved, import/extensions */
 import '!file-loader?name=[name].[ext]!./images/favicon.ico';
 import 'file-loader?name=.htaccess!./.htaccess';
+/*
+ *  app fonts
+ *  jest requires 'index.css' for import to be mocked.
+ *  see @ https://github.com/facebook/jest/issues/8988
+ */
+import 'typeface-montserrat/index.css';
+import 'typeface-poppins/index.css';
+import 'typeface-roboto/index.css';
+// styles
+import 'style/custom.scss';
+import 'style/global.scss';
 /* eslint-enable import/no-unresolved, import/extensions */
 
 import configureStore from './configureStore';
diff --git a/app/components/atoms/Anicon/index.js b/app/components/atoms/Anicon/index.js
index 2ebb444..74e3e9a 100644
--- a/app/components/atoms/Anicon/index.js
+++ b/app/components/atoms/Anicon/index.js
@@ -17,6 +17,7 @@ const HoverContainer = styled.div`
   justify-content: center;
   align-items: center;
   text-align: center;
+  background-color: transparent;
 `;
 
 const Anicon = ({ name, loop, rotate, hoverable, moveTo, ...props }) => {
diff --git a/app/components/atoms/Anicon/tests/__snapshots__/index.test.js.snap b/app/components/atoms/Anicon/tests/__snapshots__/index.test.js.snap
index 95a36af..3f4ae1a 100644
--- a/app/components/atoms/Anicon/tests/__snapshots__/index.test.js.snap
+++ b/app/components/atoms/Anicon/tests/__snapshots__/index.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`<Anicon /> Should render and match the snapshot 1`] = `
 <div
-  class="Anicon__HoverContainer-sc-119yqeq-0 iCLpQU anicon-container"
+  class="Anicon__HoverContainer-sc-119yqeq-0 iityHb anicon-container"
 >
   <div
     style="width: 100%; height: 100%; transform: rotate(0deg); cursor: pointer;"
diff --git a/app/components/molecules/FeaturedProduct/index.js b/app/components/molecules/FeaturedProduct/index.js
index e9fe37a..9864d4c 100644
--- a/app/components/molecules/FeaturedProduct/index.js
+++ b/app/components/molecules/FeaturedProduct/index.js
@@ -24,6 +24,7 @@ const StyledCard = styled(Card)`
   text-align: center;
   cursor: pointer;
   max-width: 12rem;
+  background-color: transparent;
 
   ${StyledTitle},
   ${StyledImg} {
diff --git a/app/components/molecules/IconGroup/index.js b/app/components/molecules/IconGroup/index.js
index 2b79500..ffce732 100644
--- a/app/components/molecules/IconGroup/index.js
+++ b/app/components/molecules/IconGroup/index.js
@@ -13,6 +13,7 @@ import styled from 'styled-components';
 const BorderlessItem = styled(ListGroup.Item)`
   border: 0;
   padding: 0 0.3em 0 0.3em;
+  background-color: transparent;
 `;
 
 const IconGroup = ({ children, containerClass, ...props }) => (
diff --git a/app/components/molecules/IconGroup/tests/__snapshots__/index.test.js.snap b/app/components/molecules/IconGroup/tests/__snapshots__/index.test.js.snap
index 88aed65..d32614e 100644
--- a/app/components/molecules/IconGroup/tests/__snapshots__/index.test.js.snap
+++ b/app/components/molecules/IconGroup/tests/__snapshots__/index.test.js.snap
@@ -5,7 +5,7 @@ exports[`<IconGroup /> Should render and match the snapshot 1`] = `
   class="border-0  list-group list-group-horizontal"
 >
   <div
-    class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+    class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
   >
     <div>
       <div>
@@ -17,7 +17,7 @@ exports[`<IconGroup /> Should render and match the snapshot 1`] = `
     </div>
   </div>
   <div
-    class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+    class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
   >
     <div>
       <div>
diff --git a/app/components/organisms/Header/tests/__snapshots__/index.test.js.snap b/app/components/organisms/Header/tests/__snapshots__/index.test.js.snap
index f63fc93..e77549d 100644
--- a/app/components/organisms/Header/tests/__snapshots__/index.test.js.snap
+++ b/app/components/organisms/Header/tests/__snapshots__/index.test.js.snap
@@ -14,7 +14,7 @@ exports[`<Header /> Should render and match the snapshot 1`] = `
         class="border-0  list-group list-group-horizontal"
       >
         <div
-          class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+          class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
         >
           <div
             class="IconButton__IconContainer-pjjsvs-0 bKDZXR"
@@ -30,7 +30,7 @@ exports[`<Header /> Should render and match the snapshot 1`] = `
           </div>
         </div>
         <div
-          class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+          class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
         >
           <div
             class="IconButton__IconContainer-pjjsvs-0 bKDZXR"
@@ -46,7 +46,7 @@ exports[`<Header /> Should render and match the snapshot 1`] = `
           </div>
         </div>
         <div
-          class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+          class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
         >
           <div
             class="IconButton__IconContainer-pjjsvs-0 bKDZXR"
@@ -70,13 +70,13 @@ exports[`<Header /> Should render and match the snapshot 1`] = `
         class="border-0  list-group list-group-horizontal"
       >
         <div
-          class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+          class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
         >
           <div
             class="IconButton__IconContainer-pjjsvs-0 bKDZXR"
           >
             <div
-              class="Anicon__HoverContainer-sc-119yqeq-0 iCLpQU anicon-container"
+              class="Anicon__HoverContainer-sc-119yqeq-0 iityHb anicon-container"
             >
               <div
                 style="width: 40px; height: 100%; transform: rotate(90deg); cursor: pointer;"
@@ -85,13 +85,13 @@ exports[`<Header /> Should render and match the snapshot 1`] = `
           </div>
         </div>
         <div
-          class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+          class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
         >
           <div
             class="IconButton__IconContainer-pjjsvs-0 bKDZXR"
           >
             <div
-              class="Anicon__HoverContainer-sc-119yqeq-0 iCLpQU anicon-container"
+              class="Anicon__HoverContainer-sc-119yqeq-0 iityHb anicon-container"
             >
               <div
                 style="width: 40px; height: 100%; transform: rotate(0deg); cursor: pointer;"
diff --git a/app/components/templates/HomeLayout/tests/__snapshots__/index.test.js.snap b/app/components/templates/HomeLayout/tests/__snapshots__/index.test.js.snap
index 69ea42c..b08f712 100644
--- a/app/components/templates/HomeLayout/tests/__snapshots__/index.test.js.snap
+++ b/app/components/templates/HomeLayout/tests/__snapshots__/index.test.js.snap
@@ -38,7 +38,7 @@ exports[`<HomeLayout /> Should render and match the snapshot 1`] = `
           class="border-0  list-group list-group-horizontal"
         >
           <div
-            class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+            class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
           >
             <div
               class="IconButton__IconContainer-pjjsvs-0 bKDZXR"
@@ -54,7 +54,7 @@ exports[`<HomeLayout /> Should render and match the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+            class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
           >
             <div
               class="IconButton__IconContainer-pjjsvs-0 bKDZXR"
@@ -70,7 +70,7 @@ exports[`<HomeLayout /> Should render and match the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+            class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
           >
             <div
               class="IconButton__IconContainer-pjjsvs-0 bKDZXR"
@@ -94,13 +94,13 @@ exports[`<HomeLayout /> Should render and match the snapshot 1`] = `
           class="border-0  list-group list-group-horizontal"
         >
           <div
-            class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+            class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
           >
             <div
               class="IconButton__IconContainer-pjjsvs-0 bKDZXR"
             >
               <div
-                class="Anicon__HoverContainer-sc-119yqeq-0 iCLpQU anicon-container"
+                class="Anicon__HoverContainer-sc-119yqeq-0 iityHb anicon-container"
               >
                 <div
                   style="width: 40px; height: 100%; transform: rotate(90deg); cursor: pointer;"
@@ -109,13 +109,13 @@ exports[`<HomeLayout /> Should render and match the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+            class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
           >
             <div
               class="IconButton__IconContainer-pjjsvs-0 bKDZXR"
             >
               <div
-                class="Anicon__HoverContainer-sc-119yqeq-0 iCLpQU anicon-container"
+                class="Anicon__HoverContainer-sc-119yqeq-0 iityHb anicon-container"
               >
                 <div
                   style="width: 40px; height: 100%; transform: rotate(0deg); cursor: pointer;"
diff --git a/app/containers/App/index.js b/app/containers/App/index.js
index b4c58fb..0ba7587 100644
--- a/app/containers/App/index.js
+++ b/app/containers/App/index.js
@@ -7,23 +7,20 @@
  *
  */
 
-import HomePage from 'pages/HomePage/loadable';
 import NotFoundPage from 'containers/NotFoundPage/Loadable';
+import HomePage from 'pages/HomePage/loadable';
 import React from 'react';
-import Container from 'react-bootstrap/Container';
 import { Route, Switch } from 'react-router-dom';
 import GlobalStyle from '../../global-styles';
 
 export default function App() {
   return (
     <>
-      <Container>
-        <Switch>
-          <Route exact path="/" component={HomePage} />
-          <Route component={NotFoundPage} />
-        </Switch>
-        <GlobalStyle />
-      </Container>
+      <Switch>
+        <Route exact path="/" component={HomePage} />
+        <Route component={NotFoundPage} />
+      </Switch>
+      <GlobalStyle />
     </>
   );
 }
diff --git a/app/containers/App/tests/__snapshots__/index.test.js.snap b/app/containers/App/tests/__snapshots__/index.test.js.snap
index a14ee3f..aef4754 100644
--- a/app/containers/App/tests/__snapshots__/index.test.js.snap
+++ b/app/containers/App/tests/__snapshots__/index.test.js.snap
@@ -2,20 +2,16 @@
 
 exports[`<App /> should render and match the snapshot 1`] = `
 <React.Fragment>
-  <ForwardRef
-    fluid={false}
-  >
-    <Switch>
-      <Route
-        component={[Function]}
-        exact={true}
-        path="/"
-      />
-      <Route
-        component={[Function]}
-      />
-    </Switch>
-    <GlobalStyleComponent />
-  </ForwardRef>
+  <Switch>
+    <Route
+      component={[Function]}
+      exact={true}
+      path="/"
+    />
+    <Route
+      component={[Function]}
+    />
+  </Switch>
+  <GlobalStyleComponent />
 </React.Fragment>
 `;
diff --git a/app/style/global.scss b/app/style/global.scss
new file mode 100644
index 0000000..5614b99
--- /dev/null
+++ b/app/style/global.scss
@@ -0,0 +1,62 @@
+// Global Styles
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+#app {
+  background-color: #fafafa;
+  min-height: 100%;
+  min-width: 100%;
+}
+
+p,
+label {
+  font-family: 'Poppins', Georgia, Times, 'Times New Roman', serif;
+  line-height: 1.5em;
+}
+
+@media (max-width: 1200px) {
+  legend {
+    font-size: calc(1.275rem + 0.3vw);
+  }
+  h1,
+  .h1 {
+    font-size: calc(1.375rem + 1.5vw);
+  }
+  h2,
+  .h2 {
+    font-size: calc(1.325rem + 0.9vw);
+  }
+  h3,
+  .h3 {
+    font-size: calc(1.3rem + 0.6vw);
+  }
+  h4,
+  .h4 {
+    font-size: calc(1.275rem + 0.3vw);
+  }
+  .display-1 {
+    font-size: calc(1.725rem + 5.7vw);
+  }
+  .display-2 {
+    font-size: calc(1.675rem + 5.1vw);
+  }
+  .display-3 {
+    font-size: calc(1.575rem + 3.9vw);
+  }
+  .display-4 {
+    font-size: calc(1.475rem + 2.7vw);
+  }
+  .close {
+    font-size: calc(1.275rem + 0.3vw);
+  }
+}
diff --git a/app/tests/__snapshots__/storybook.test.js.snap b/app/tests/__snapshots__/storybook.test.js.snap
index 9f256ff..54a46e9 100644
--- a/app/tests/__snapshots__/storybook.test.js.snap
+++ b/app/tests/__snapshots__/storybook.test.js.snap
@@ -100,7 +100,7 @@ exports[`Storyshots Design|Atoms/Anicon Search Anicon 1`] = `
         }
       >
         <div
-          className="Anicon__HoverContainer-sc-119yqeq-0 iCLpQU anicon-container"
+          className="Anicon__HoverContainer-sc-119yqeq-0 iityHb anicon-container"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
@@ -177,7 +177,7 @@ exports[`Storyshots Design|Atoms/Anicon With Dynamic Variables 1`] = `
         }
       >
         <div
-          className="Anicon__HoverContainer-sc-119yqeq-0 iCLpQU anicon-container"
+          className="Anicon__HoverContainer-sc-119yqeq-0 iityHb anicon-container"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
@@ -1729,7 +1729,7 @@ exports[`Storyshots Design|Molecules/FeaturedProduct Default Story 1`] = `
         }
       >
         <div
-          className="FeaturedProduct__StyledCard-sc-17af4y1-2 iilcUY card"
+          className="FeaturedProduct__StyledCard-sc-17af4y1-2 bSteJc card"
           href="product/product-name"
           onClick={[Function]}
         >
@@ -1811,7 +1811,7 @@ exports[`Storyshots Design|Molecules/FeaturedProduct With Product 1`] = `
         }
       >
         <div
-          className="FeaturedProduct__StyledCard-sc-17af4y1-2 iilcUY card"
+          className="FeaturedProduct__StyledCard-sc-17af4y1-2 bSteJc card"
           href="product/product-name"
           onClick={[Function]}
         >
@@ -2183,7 +2183,7 @@ exports[`Storyshots Design|Molecules/IconGroup Social Icon Button Group 1`] = `
           onKeyDown={[Function]}
         >
           <div
-            className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+            className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
             data-rb-event-key={null}
             disabled={false}
             onClick={[Function]}
@@ -2197,7 +2197,7 @@ exports[`Storyshots Design|Molecules/IconGroup Social Icon Button Group 1`] = `
             </div>
           </div>
           <div
-            className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+            className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
             data-rb-event-key={null}
             disabled={false}
             onClick={[Function]}
@@ -2211,7 +2211,7 @@ exports[`Storyshots Design|Molecules/IconGroup Social Icon Button Group 1`] = `
             </div>
           </div>
           <div
-            className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+            className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
             data-rb-event-key={null}
             disabled={false}
             onClick={[Function]}
@@ -2291,7 +2291,7 @@ exports[`Storyshots Design|Molecules/IconGroup Social Icon Group 1`] = `
           onKeyDown={[Function]}
         >
           <div
-            className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+            className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
             data-rb-event-key={null}
             disabled={false}
             onClick={[Function]}
@@ -2299,7 +2299,7 @@ exports[`Storyshots Design|Molecules/IconGroup Social Icon Group 1`] = `
             <div />
           </div>
           <div
-            className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+            className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
             data-rb-event-key={null}
             disabled={false}
             onClick={[Function]}
@@ -2307,7 +2307,7 @@ exports[`Storyshots Design|Molecules/IconGroup Social Icon Group 1`] = `
             <div />
           </div>
           <div
-            className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+            className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
             data-rb-event-key={null}
             disabled={false}
             onClick={[Function]}
@@ -3103,7 +3103,7 @@ exports[`Storyshots Design|Organisms/Header Default Header 1`] = `
                     onKeyDown={[Function]}
                   >
                     <div
-                      className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+                      className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
                       data-rb-event-key={null}
                       disabled={false}
                       onClick={[Function]}
@@ -3117,7 +3117,7 @@ exports[`Storyshots Design|Organisms/Header Default Header 1`] = `
                       </div>
                     </div>
                     <div
-                      className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+                      className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
                       data-rb-event-key={null}
                       disabled={false}
                       onClick={[Function]}
@@ -3131,7 +3131,7 @@ exports[`Storyshots Design|Organisms/Header Default Header 1`] = `
                       </div>
                     </div>
                     <div
-                      className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+                      className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
                       data-rb-event-key={null}
                       disabled={false}
                       onClick={[Function]}
@@ -3154,7 +3154,7 @@ exports[`Storyshots Design|Organisms/Header Default Header 1`] = `
                     onKeyDown={[Function]}
                   >
                     <div
-                      className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+                      className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
                       data-rb-event-key={null}
                       disabled={false}
                       onClick={[Function]}
@@ -3163,7 +3163,7 @@ exports[`Storyshots Design|Organisms/Header Default Header 1`] = `
                         className="IconButton__IconContainer-pjjsvs-0 bKDZXR"
                       >
                         <div
-                          className="Anicon__HoverContainer-sc-119yqeq-0 iCLpQU anicon-container"
+                          className="Anicon__HoverContainer-sc-119yqeq-0 iityHb anicon-container"
                           onMouseEnter={[Function]}
                           onMouseLeave={[Function]}
                         >
@@ -3181,7 +3181,7 @@ exports[`Storyshots Design|Organisms/Header Default Header 1`] = `
                       </div>
                     </div>
                     <div
-                      className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+                      className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
                       data-rb-event-key={null}
                       disabled={false}
                       onClick={[Function]}
@@ -3190,7 +3190,7 @@ exports[`Storyshots Design|Organisms/Header Default Header 1`] = `
                         className="IconButton__IconContainer-pjjsvs-0 bKDZXR"
                       >
                         <div
-                          className="Anicon__HoverContainer-sc-119yqeq-0 iCLpQU anicon-container"
+                          className="Anicon__HoverContainer-sc-119yqeq-0 iityHb anicon-container"
                           onMouseEnter={[Function]}
                           onMouseLeave={[Function]}
                         >
@@ -3491,7 +3491,7 @@ exports[`Storyshots Design|Organisms/SocialBar With Dynamic Variables 1`] = `
           onKeyDown={[Function]}
         >
           <div
-            className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+            className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
             data-rb-event-key={null}
             disabled={false}
             onClick={[Function]}
@@ -3505,7 +3505,7 @@ exports[`Storyshots Design|Organisms/SocialBar With Dynamic Variables 1`] = `
             </div>
           </div>
           <div
-            className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+            className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
             data-rb-event-key={null}
             disabled={false}
             onClick={[Function]}
@@ -3519,7 +3519,7 @@ exports[`Storyshots Design|Organisms/SocialBar With Dynamic Variables 1`] = `
             </div>
           </div>
           <div
-            className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+            className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
             data-rb-event-key={null}
             disabled={false}
             onClick={[Function]}
@@ -3600,7 +3600,7 @@ exports[`Storyshots Design|Organisms/SocialBar With Sizes 1`] = `
             onKeyDown={[Function]}
           >
             <div
-              className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+              className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
               data-rb-event-key={null}
               disabled={false}
               onClick={[Function]}
@@ -3614,7 +3614,7 @@ exports[`Storyshots Design|Organisms/SocialBar With Sizes 1`] = `
               </div>
             </div>
             <div
-              className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+              className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
               data-rb-event-key={null}
               disabled={false}
               onClick={[Function]}
@@ -3628,7 +3628,7 @@ exports[`Storyshots Design|Organisms/SocialBar With Sizes 1`] = `
               </div>
             </div>
             <div
-              className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+              className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
               data-rb-event-key={null}
               disabled={false}
               onClick={[Function]}
@@ -3647,7 +3647,7 @@ exports[`Storyshots Design|Organisms/SocialBar With Sizes 1`] = `
             onKeyDown={[Function]}
           >
             <div
-              className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+              className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
               data-rb-event-key={null}
               disabled={false}
               onClick={[Function]}
@@ -3661,7 +3661,7 @@ exports[`Storyshots Design|Organisms/SocialBar With Sizes 1`] = `
               </div>
             </div>
             <div
-              className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+              className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
               data-rb-event-key={null}
               disabled={false}
               onClick={[Function]}
@@ -3675,7 +3675,7 @@ exports[`Storyshots Design|Organisms/SocialBar With Sizes 1`] = `
               </div>
             </div>
             <div
-              className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+              className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
               data-rb-event-key={null}
               disabled={false}
               onClick={[Function]}
@@ -3767,7 +3767,7 @@ exports[`Storyshots Design|Pages/HomePage Default Story 1`] = `
               onKeyDown={[Function]}
             >
               <div
-                className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+                className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
                 data-rb-event-key={null}
                 disabled={false}
                 onClick={[Function]}
@@ -3781,7 +3781,7 @@ exports[`Storyshots Design|Pages/HomePage Default Story 1`] = `
                 </div>
               </div>
               <div
-                className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+                className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
                 data-rb-event-key={null}
                 disabled={false}
                 onClick={[Function]}
@@ -3795,7 +3795,7 @@ exports[`Storyshots Design|Pages/HomePage Default Story 1`] = `
                 </div>
               </div>
               <div
-                className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+                className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
                 data-rb-event-key={null}
                 disabled={false}
                 onClick={[Function]}
@@ -3818,7 +3818,7 @@ exports[`Storyshots Design|Pages/HomePage Default Story 1`] = `
               onKeyDown={[Function]}
             >
               <div
-                className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+                className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
                 data-rb-event-key={null}
                 disabled={false}
                 onClick={[Function]}
@@ -3827,7 +3827,7 @@ exports[`Storyshots Design|Pages/HomePage Default Story 1`] = `
                   className="IconButton__IconContainer-pjjsvs-0 bKDZXR"
                 >
                   <div
-                    className="Anicon__HoverContainer-sc-119yqeq-0 iCLpQU anicon-container"
+                    className="Anicon__HoverContainer-sc-119yqeq-0 iityHb anicon-container"
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
                   >
@@ -3845,7 +3845,7 @@ exports[`Storyshots Design|Pages/HomePage Default Story 1`] = `
                 </div>
               </div>
               <div
-                className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+                className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
                 data-rb-event-key={null}
                 disabled={false}
                 onClick={[Function]}
@@ -3854,7 +3854,7 @@ exports[`Storyshots Design|Pages/HomePage Default Story 1`] = `
                   className="IconButton__IconContainer-pjjsvs-0 bKDZXR"
                 >
                   <div
-                    className="Anicon__HoverContainer-sc-119yqeq-0 iCLpQU anicon-container"
+                    className="Anicon__HoverContainer-sc-119yqeq-0 iityHb anicon-container"
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
                   >
@@ -4107,7 +4107,7 @@ exports[`Storyshots Design|Pages/HomePage Default Story 1`] = `
                 className="d-flex align-items-end justify-content-center col"
               >
                 <div
-                  className="FeaturedProduct__StyledCard-sc-17af4y1-2 iilcUY card"
+                  className="FeaturedProduct__StyledCard-sc-17af4y1-2 bSteJc card"
                   href="product/cool-shirt"
                   onClick={[Function]}
                 >
@@ -4132,7 +4132,7 @@ exports[`Storyshots Design|Pages/HomePage Default Story 1`] = `
                 className="d-flex align-items-end justify-content-center col"
               >
                 <div
-                  className="FeaturedProduct__StyledCard-sc-17af4y1-2 iilcUY card"
+                  className="FeaturedProduct__StyledCard-sc-17af4y1-2 bSteJc card"
                   href="product/nice-shirt"
                   onClick={[Function]}
                 >
@@ -4157,7 +4157,7 @@ exports[`Storyshots Design|Pages/HomePage Default Story 1`] = `
                 className="d-flex align-items-end justify-content-center col"
               >
                 <div
-                  className="FeaturedProduct__StyledCard-sc-17af4y1-2 iilcUY card"
+                  className="FeaturedProduct__StyledCard-sc-17af4y1-2 bSteJc card"
                   href="product/awesome-shirt"
                   onClick={[Function]}
                 >
@@ -4396,7 +4396,7 @@ exports[`Storyshots Design|Templates/HomeLayout With Dynamic Variables 1`] = `
               onKeyDown={[Function]}
             >
               <div
-                className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+                className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
                 data-rb-event-key={null}
                 disabled={false}
                 onClick={[Function]}
@@ -4410,7 +4410,7 @@ exports[`Storyshots Design|Templates/HomeLayout With Dynamic Variables 1`] = `
                 </div>
               </div>
               <div
-                className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+                className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
                 data-rb-event-key={null}
                 disabled={false}
                 onClick={[Function]}
@@ -4424,7 +4424,7 @@ exports[`Storyshots Design|Templates/HomeLayout With Dynamic Variables 1`] = `
                 </div>
               </div>
               <div
-                className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+                className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
                 data-rb-event-key={null}
                 disabled={false}
                 onClick={[Function]}
@@ -4447,7 +4447,7 @@ exports[`Storyshots Design|Templates/HomeLayout With Dynamic Variables 1`] = `
               onKeyDown={[Function]}
             >
               <div
-                className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+                className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
                 data-rb-event-key={null}
                 disabled={false}
                 onClick={[Function]}
@@ -4456,7 +4456,7 @@ exports[`Storyshots Design|Templates/HomeLayout With Dynamic Variables 1`] = `
                   className="IconButton__IconContainer-pjjsvs-0 bKDZXR"
                 >
                   <div
-                    className="Anicon__HoverContainer-sc-119yqeq-0 iCLpQU anicon-container"
+                    className="Anicon__HoverContainer-sc-119yqeq-0 iityHb anicon-container"
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
                   >
@@ -4474,7 +4474,7 @@ exports[`Storyshots Design|Templates/HomeLayout With Dynamic Variables 1`] = `
                 </div>
               </div>
               <div
-                className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+                className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
                 data-rb-event-key={null}
                 disabled={false}
                 onClick={[Function]}
@@ -4483,7 +4483,7 @@ exports[`Storyshots Design|Templates/HomeLayout With Dynamic Variables 1`] = `
                   className="IconButton__IconContainer-pjjsvs-0 bKDZXR"
                 >
                   <div
-                    className="Anicon__HoverContainer-sc-119yqeq-0 iCLpQU anicon-container"
+                    className="Anicon__HoverContainer-sc-119yqeq-0 iityHb anicon-container"
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
                   >
@@ -4859,7 +4859,7 @@ exports[`Storyshots Design|Templates/HomeLayout With Placeholders 1`] = `
               onKeyDown={[Function]}
             >
               <div
-                className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+                className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
                 data-rb-event-key={null}
                 disabled={false}
                 onClick={[Function]}
@@ -4873,7 +4873,7 @@ exports[`Storyshots Design|Templates/HomeLayout With Placeholders 1`] = `
                 </div>
               </div>
               <div
-                className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+                className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
                 data-rb-event-key={null}
                 disabled={false}
                 onClick={[Function]}
@@ -4887,7 +4887,7 @@ exports[`Storyshots Design|Templates/HomeLayout With Placeholders 1`] = `
                 </div>
               </div>
               <div
-                className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+                className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
                 data-rb-event-key={null}
                 disabled={false}
                 onClick={[Function]}
@@ -4910,7 +4910,7 @@ exports[`Storyshots Design|Templates/HomeLayout With Placeholders 1`] = `
               onKeyDown={[Function]}
             >
               <div
-                className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+                className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
                 data-rb-event-key={null}
                 disabled={false}
                 onClick={[Function]}
@@ -4919,7 +4919,7 @@ exports[`Storyshots Design|Templates/HomeLayout With Placeholders 1`] = `
                   className="IconButton__IconContainer-pjjsvs-0 bKDZXR"
                 >
                   <div
-                    className="Anicon__HoverContainer-sc-119yqeq-0 iCLpQU anicon-container"
+                    className="Anicon__HoverContainer-sc-119yqeq-0 iityHb anicon-container"
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
                   >
@@ -4937,7 +4937,7 @@ exports[`Storyshots Design|Templates/HomeLayout With Placeholders 1`] = `
                 </div>
               </div>
               <div
-                className="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
+                className="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
                 data-rb-event-key={null}
                 disabled={false}
                 onClick={[Function]}
@@ -4946,7 +4946,7 @@ exports[`Storyshots Design|Templates/HomeLayout With Placeholders 1`] = `
                   className="IconButton__IconContainer-pjjsvs-0 bKDZXR"
                 >
                   <div
-                    className="Anicon__HoverContainer-sc-119yqeq-0 iCLpQU anicon-container"
+                    className="Anicon__HoverContainer-sc-119yqeq-0 iityHb anicon-container"
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
                   >