diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 9246c2f7c..02139babd 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -97,13 +97,13 @@
 }
 
 .productTitle {
-  @apply pt-4 leading-8;
+  @apply pt-2 max-w-full;
   width: 400px;
   font-size: 2rem;
   letter-spacing: 0.4px;
 
   & span {
-    @apply inline p-4 bg-primary text-primary font-bold;
+    @apply inline py-4 px-6 bg-primary text-primary font-bold;
     font-size: inherit;
     letter-spacing: inherit;
     box-decoration-break: clone;
@@ -112,7 +112,7 @@
 }
 
 .productPrice {
-  @apply py-4 px-4 bg-primary text-base font-semibold inline-block text-sm leading-6;
+  @apply py-4 px-6 bg-primary text-base font-semibold inline-block text-sm leading-6;
   letter-spacing: 0.4px;
 }
 
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 22060bd56..e60927ffb 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -52,7 +52,7 @@ const ProductCard: FC<Props> = ({
       >
         <div className={s.squareBg} />
         <div className="flex flex-row justify-between box-border w-full z-20 absolute">
-          <div className="absolute top-0 left-0">
+          <div className="absolute top-0 left-0 pr-16 max-w-full">
             <h3 className={s.productTitle}>
               <span>{p.name}</span>
             </h3>
diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css
index 96b2a03b2..14338732b 100644
--- a/components/product/ProductView/ProductView.module.css
+++ b/components/product/ProductView/ProductView.module.css
@@ -8,15 +8,15 @@
 
 .productDisplay {
   @apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet;
-  margin-right: -2rem;
-  margin-left: -2rem;
-  min-height: 400px;
+  min-height: 600px;
 
   @screen md {
     min-height: 700px;
   }
 
   @screen lg {
+    margin-right: -2rem;
+    margin-left: -2rem;
     @apply mx-0 col-span-6;
     min-height: 100%;
     height: 100%;
@@ -28,7 +28,11 @@
 }
 
 .nameBox {
-  @apply absolute top-6 left-6 z-20;
+  @apply absolute top-6 left-0 z-20 pr-16;
+
+  @screen lg {
+    @apply left-6 pr-16;
+  }
 
   & .name {
     @apply px-6 py-2 bg-primary text-primary font-bold;
@@ -49,10 +53,10 @@
 }
 
 .sidebar {
-  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-12 w-full;
+  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full;
 
   @screen lg {
-    @apply col-span-5 pl-12 pt-20;
+    @apply col-span-6 pt-20;
   }
 }
 
diff --git a/components/ui/Container/Container.tsx b/components/ui/Container/Container.tsx
index f037d8486..1897a4825 100644
--- a/components/ui/Container/Container.tsx
+++ b/components/ui/Container/Container.tsx
@@ -9,7 +9,9 @@ interface Props {
 }
 
 const Container: FC<Props> = ({ children, className, el = 'div', clean }) => {
-  const rootClassName = cn(className, { 'mx-auto max-w-8xl px-12': !clean })
+  const rootClassName = cn(className, {
+    'mx-auto max-w-8xl px-6': !clean,
+  })
 
   let Component: React.ComponentType<React.HTMLAttributes<
     HTMLDivElement
diff --git a/pages/index.tsx b/pages/index.tsx
index bd97b1d32..649a4400c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -119,7 +119,7 @@ export default function Home({
           />
         ))}
       </Marquee>
-      <div className="py-12 flex flex-row w-full px-12">
+      <div className="py-12 flex flex-row w-full px-6">
         <div className="pr-3 w-48 relative">
           <div className="sticky top-32">
             <ul className="mb-10">