diff --git a/README.md b/README.md
index 5df149b06..a586199d2 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,7 @@
 # Next.js Commerce
+
+## Features
+
+## Todo
+
+## Contribute
diff --git a/assets/base.css b/assets/base.css
index 7d0df28bf..7be74ba3d 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -1,13 +1,13 @@
 :root {
-  --primary: white;
+  --primary: #ffffff;
   --primary-2: #f1f3f5;
-  --secondary: black;
+  --secondary: #000000;
   --secondary-2: #111;
 
   --selection: var(--cyan);
 
-  --text-base: black;
-  --text-primary: black;
+  --text-base: #000000;
+  --text-primary: #000000;
   --text-secondary: white;
 
   --hover: rgba(0, 0, 0, 0.075);
@@ -38,9 +38,9 @@
 }
 
 [data-theme='dark'] {
-  --primary: black;
+  --primary: #000000;
   --primary-2: #111;
-  --secondary: white;
+  --secondary: #ffffff;
   --secondary-2: #f1f3f5;
   --hover: rgba(255, 255, 255, 0.075);
   --hover-1: rgba(255, 255, 255, 0.15);
diff --git a/components/auth/SignUpView.tsx b/components/auth/SignUpView.tsx
index 758f3de4b..2c0e6789c 100644
--- a/components/auth/SignUpView.tsx
+++ b/components/auth/SignUpView.tsx
@@ -59,7 +59,7 @@ const SignUpView: FC<Props> = () => {
   }, [handleValidation])
 
   return (
-    <div className="w-96 flex flex-col justify-between p-3">
+    <div className="w-80 flex flex-col justify-between p-3">
       <div className="flex justify-center pb-12 ">
         <Logo width="64px" height="64px" />
       </div>
diff --git a/components/cart/CartSidebarView/CartSidebarView.module.css b/components/cart/CartSidebarView/CartSidebarView.module.css
index c3a2af639..9b94021ad 100644
--- a/components/cart/CartSidebarView/CartSidebarView.module.css
+++ b/components/cart/CartSidebarView/CartSidebarView.module.css
@@ -1,2 +1,15 @@
 .root {
+  @apply h-full flex flex-col;
+}
+
+.root.empty {
+  @apply bg-secondary text-secondary;
+}
+
+.root.success {
+  @apply bg-green text-white;
+}
+
+.root.error {
+  @apply bg-red text-white;
 }
diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index 7440a8d81..fdee9eecb 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -7,6 +7,7 @@ import { useUI } from '@components/ui/context'
 import useCart from '@lib/bigcommerce/cart/use-cart'
 import usePrice from '@lib/bigcommerce/use-price'
 import CartItem from '../CartItem'
+import s from './CartSidebarView.module.css'
 
 const CartSidebarView: FC = () => {
   const { data, isEmpty } = useCart()
@@ -32,10 +33,10 @@ const CartSidebarView: FC = () => {
 
   return (
     <div
-      className={cn('h-full flex flex-col', {
-        'bg-secondary text-secondary': isEmpty,
-        'bg-red text-white': error,
-        'bg-green text-white': success,
+      className={cn(s.root, {
+        [s.empty]: error,
+        [s.empty]: success,
+        [s.empty]: isEmpty,
       })}
     >
       <header className="px-4 pt-6 pb-4 sm:px-6">
@@ -56,7 +57,7 @@ const CartSidebarView: FC = () => {
       </header>
 
       {isEmpty ? (
-        <div className="flex-1 px-4 flex flex-col justify-center items-center ">
+        <div className="flex-1 px-4 flex flex-col justify-center items-center">
           <span className="border border-dashed border-primary rounded-full flex items-center justify-center w-16 h-16 p-12 bg-secondary text-secondary">
             <Bag className="absolute" />
           </span>
diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx
index 6d5b88a0f..a243590b1 100644
--- a/components/core/Featurebar/Featurebar.tsx
+++ b/components/core/Featurebar/Featurebar.tsx
@@ -6,7 +6,7 @@ import s from './Featurebar.module.css'
 interface Props {
   className?: string
   title: string
-  description: string
+  description?: string
   hide?: boolean
   action?: React.ReactNode
 }
diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index d409d5958..85da7e847 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -77,8 +77,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
           {modalView === 'FORGOT_VIEW' && <ForgotPassword />}
         </Modal>
         <Featurebar
-          title="This site uses cookies to improve your experience."
-          description="By clicking, you agree to our Privacy Policy."
+          title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
           hide={acceptedCookies}
           action={
             <Button className="mx-5" onClick={() => setAcceptedCookies(true)}>
diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css
index 8b8fa8c14..a319e3dac 100644
--- a/components/core/UserNav/UserNav.module.css
+++ b/components/core/UserNav/UserNav.module.css
@@ -7,7 +7,7 @@
 }
 
 .item {
-  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-primary flex items-center outline-none text-primary;
+  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 flex items-center outline-none text-primary;
 
   &:hover {
     @apply text-accents-6 transition scale-110 duration-100;
diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index c47a0c287..171190df0 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/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 478e5a61c..d48c5b4cf 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -11,8 +11,8 @@ interface Props {
   className?: string
   product: ProductNode
   variant?: 'slim' | 'simple'
-  imgWidth: number
-  imgHeight: number
+  imgWidth: number | string
+  imgHeight: number | string
   priority?: boolean
 }
 
diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css
index a08549ac6..df2be8802 100644
--- a/components/ui/Button/Button.module.css
+++ b/components/ui/Button/Button.module.css
@@ -1,5 +1,5 @@
 .root {
-  @apply text-accents-1 cursor-pointer inline-flex px-10 rounded-sm leading-6 bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center uppercase py-4 uppercase text-center border border-transparent items-center;
+  @apply bg-secondary text-accents-1 cursor-pointer inline-flex px-10 rounded-sm leading-6  transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center uppercase py-4 border border-transparent items-center;
 }
 
 .root:hover {
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index 3290d5b63..4c7704c4d 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/components/ui/Sidebar/Sidebar.tsx
@@ -62,7 +62,7 @@ const Sidebar: FC<Props> = ({ className, children, open = false, onClose }) => {
                   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 44a93c1d7..5304f691e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -80,8 +80,8 @@ export default function Home({
             key={node.path}
             product={node}
             // The first image is the largest one in the grid
-            imgWidth={i === 0 ? 1600 : 820}
-            imgHeight={i === 0 ? 1600 : 820}
+            imgWidth={i === 0 ? '65vw' : '30vw'}
+            imgHeight={i === 0 ? '45vw' : '22vw'}
             priority
           />
         ))}