diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index d257eb1f0..4b9f98812 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -1,13 +1,13 @@
 import { FC } from 'react'
 import cn from 'classnames'
+import { ThemeProvider } from 'next-themes'
+import { SSRProvider, OverlayProvider } from 'react-aria'
 import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
 import { Navbar, Featurebar, Footer } from '@components/core'
 import { Container, Sidebar } from '@components/ui'
 import { CartSidebarView } from '@components/cart'
 import { UIProvider, useUI } from '@components/ui/context'
 import s from './Layout.module.css'
-import { ThemeProvider } from 'next-themes'
-import { SSRProvider, OverlayProvider } from 'react-aria'
 
 interface LayoutProps {
   pageProps: {
@@ -41,15 +41,15 @@ const CoreLayout: FC<Props> = ({ children, pages }) => {
 }
 
 const Layout: FC<LayoutProps> = ({ children, pageProps }) => (
-  <UIProvider>
-    <ThemeProvider>
-      <SSRProvider>
-        <OverlayProvider>
+  <ThemeProvider>
+    <SSRProvider>
+      <OverlayProvider>
+        <UIProvider>
           <CoreLayout pages={pageProps.pages}>{children}</CoreLayout>
-        </OverlayProvider>
-      </SSRProvider>
-    </ThemeProvider>
-  </UIProvider>
+        </UIProvider>
+      </OverlayProvider>
+    </SSRProvider>
+  </ThemeProvider>
 )
 
 export default Layout
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index 3a288fd87..812c2a413 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -16,8 +16,8 @@ const countItems = (count: number, items: any[]) =>
   items.reduce(countItem, count)
 
 const UserNav: FC<Props> = ({ className }) => {
-  const { openSidebar, closeSidebar, displaySidebar } = useUI()
   const { data } = useCart()
+  const { openSidebar, closeSidebar, displaySidebar } = useUI()
   const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
 
   return (
diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index f91c7873b..b8329a94f 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -66,8 +66,26 @@
 }
 
 .productTitle {
-  @apply p-3 h-14 bg-primary text-base font-bold text-xl truncate leading-8 inline-flex;
-  max-width: calc(100% - 50px);
+  /* @apply p-3 h-14 bg-primary text-base font-bold text-xl truncate leading-8 inline-flex; */
+  /* max-width: calc(100% - 50px); */
+  line-height: 1.3;
+  padding: 2px 0;
+  border-left: 20px solid #c0c;
+  width: 400px;
+  margin: 20px auto;
+
+  & h2 {
+    background-color: #c0c;
+    padding: 4px 0;
+    color: #fff;
+    display: inline;
+    margin: 0;
+
+    & .strong {
+      position: relative;
+      left: -10px;
+    }
+  }
 
   @screen lg {
     @apply text-2xl;
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 2effe27eb..2637b8a76 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -48,7 +48,11 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
         <div className="flex flex-row justify-between box-border w-full z-10 relative">
           <div className="flex flex-col flex-1 overflow-hidden">
             <div className="flex-1">
-              <span className={s.productTitle}>{p.name}</span>
+              <span className={s.productTitle}>
+                <h2>
+                  <strong>{p.name}</strong>
+                </h2>
+              </span>
             </div>
             <div className="flex-0">
               <div className={s.productPrice}>${p.prices.price.value}</div>