diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index 74c5a4069..eec034267 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -43,9 +43,9 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
             { 'shadow-magical': hasScrolled }
           )}
         >
-          <Container>
+          <div className="px-4">
             <Navbar />
-          </Container>
+          </div>
         </header>
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 9246c2f7c..d151ad8d2 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -83,6 +83,7 @@
 .simple {
   & .squareBg {
     @apply bg-accents-0 !important;
+    background-image: url("data:image/svg+xml,%3Csvg width='48' height='46' viewBox='0 0 48 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.05' x1='9.41421' y1='8' x2='21' y2='19.5858' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 8)' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='38.5858' y1='38' x2='27' y2='26.4142' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
   }
 
   & .productTitle {
diff --git a/components/ui/Hero/Hero.tsx b/components/ui/Hero/Hero.tsx
index ad600ec83..8a063b664 100644
--- a/components/ui/Hero/Hero.tsx
+++ b/components/ui/Hero/Hero.tsx
@@ -9,20 +9,20 @@ interface Props {
 
 const Hero: FC<Props> = ({ headline, description }) => {
   return (
-    <Container>
-      <div className="mx-auto grid grid-cols-2 bg-black py-32">
+    <div className="mx-auto grid grid-cols-2 bg-black py-32">
+      <Container>
         <h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
           {headline}
         </h2>
         <div className="flex flex-col justify-between">
           <p className="mt-5 text-xl leading-7 text-accent-2">{description}</p>
-          <a className="block text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer">
+          <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer">
             <span>Read it here</span>
             <RightArrow width="20" heigh="20" className="ml-1" />
           </a>
         </div>
-      </div>
-    </Container>
+      </Container>
+    </div>
   )
 }
 
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index 9d25c8465..090d972b7 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/components/ui/Sidebar/Sidebar.tsx
@@ -72,7 +72,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
                   leaveFrom="translate-x-0"
                   leaveTo="translate-x-full"
                 >
-                  <div className="h-full w-screen max-w-md">
+                  <div className="h-full md:w-screen md:max-w-md">
                     <div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto">
                       {children}
                     </div>
diff --git a/pages/index.tsx b/pages/index.tsx
index a2591773a..f96b8e940 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -94,10 +94,10 @@ export default function Home({
           <ProductCard key={node.path} product={node} variant="slim" />
         ))}
       </Marquee>
-      <div className="py-12 flex flex-row w-full px-12">
-        <div className="pr-3 w-48 relative">
-          <div className="sticky top-32">
-            <ul className="mb-10">
+      <div className="py-12 flex flex-col md:flex-row w-full px-12">
+        <div className="pr-3 md:w-48 relative">
+          <div className="flex flex-row mb-8 md:mb-0 md:flex-col justify-between md:sticky md:top-32">
+            <ul className="md:mb-10">
               <li className="py-1 text-base font-bold tracking-wide">
                 All Categories
               </li>