diff --git a/.gitignore b/.gitignore
index bcbf6047a..50d4285ba 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,6 +25,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local
diff --git a/assets/base.css b/assets/base.css
index 781ebe0ac..f854065ba 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -102,8 +102,6 @@ a {
 }
 
 .animated {
-  -webkit-animation-duration: 1s;
-  animation-duration: 1s;
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-fill-mode: both;
diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx
index 283f3fa40..2769ac715 100644
--- a/components/cart/CartItem/CartItem.tsx
+++ b/components/cart/CartItem/CartItem.tsx
@@ -8,6 +8,13 @@ import useUpdateItem from '@framework/cart/use-update-item'
 import useRemoveItem from '@framework/cart/use-remove-item'
 import s from './CartItem.module.css'
 
+type ItemOption = {
+  name: string,
+  nameId: number,
+  value: string,
+  valueId: number
+}
+
 const CartItem = ({
   item,
   currencyCode,
@@ -88,12 +95,20 @@ const CartItem = ({
       <div className="flex-1 flex flex-col text-base">
         {/** TODO: Replace this. No `path` found at Cart */}
         <Link href={`/product/${item.url.split('/')[3]}`}>
-          <span className="font-bold mb-5 text-lg cursor-pointer">
+          <span className="font-bold text-lg cursor-pointer leading-6">
             {item.name}
           </span>
         </Link>
-
-        <div className="flex items-center">
+        {item.options && item.options.length > 0 ? (
+          <div className="">
+            {item.options.map((option:ItemOption, i: number) =>
+              <span key={`${item.id}-${option.name}`} className="text-sm font-semibold text-accents-7">
+                {option.value}{ i === item.options.length -1 ? "" : ", " }
+              </span>
+            )}
+          </div>
+        ) : null}
+        <div className="flex items-center mt-3">
           <button type="button" onClick={() => increaseQuantity(-1)}>
             <Minus width={18} height={18} />
           </button>
diff --git a/components/common/I18nWidget/I18nWidget.module.css b/components/common/I18nWidget/I18nWidget.module.css
index 07a1aeba7..b216f5706 100644
--- a/components/common/I18nWidget/I18nWidget.module.css
+++ b/components/common/I18nWidget/I18nWidget.module.css
@@ -29,7 +29,7 @@
 }
 
 .item {
-  @apply flex cursor-pointer px-6 py-3 flex transition ease-in-out duration-150 text-primary leading-6 font-medium items-center;
+  @apply flex cursor-pointer px-6 py-3 transition ease-in-out duration-150 text-primary leading-6 font-medium items-center;
   text-transform: capitalize;
 }
 
diff --git a/components/common/Layout/Layout.tsx b/components/common/Layout/Layout.tsx
index ff8467a23..375473c04 100644
--- a/components/common/Layout/Layout.tsx
+++ b/components/common/Layout/Layout.tsx
@@ -61,16 +61,16 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
 
-        <Sidebar open={displaySidebar} onClose={closeSidebar}>
-          <CartSidebarView />
-        </Sidebar>
-
         <Modal open={displayModal} onClose={closeModal}>
           {modalView === 'LOGIN_VIEW' && <LoginView />}
           {modalView === 'SIGNUP_VIEW' && <SignUpView />}
           {modalView === 'FORGOT_VIEW' && <ForgotPassword />}
         </Modal>
 
+        <Sidebar open={displaySidebar} onClose={closeSidebar}>
+          <CartSidebarView />
+        </Sidebar>
+
         <FeatureBar
           title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
           hide={acceptedCookies}
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index 9703156a1..b8013f80a 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -38,15 +38,14 @@ const ProductView: FC<Props> = ({ product }) => {
     size: null,
     color: null,
   })
-  const variant =
-    getCurrentVariant(product, choices) || product.variants.edges?.[0]
+  const variant = getCurrentVariant(product, choices)
 
   const addToCart = async () => {
     setLoading(true)
     try {
       await addItem({
         productId: product.entityId,
-        variantId: product.variants.edges?.[0]?.node.entityId!,
+        variantId: variant?.node.entityId!,
       })
       openSidebar()
       setLoading(false)
@@ -156,7 +155,7 @@ const ProductView: FC<Props> = ({ product }) => {
         <WishlistButton
           className={s.wishlistButton}
           productId={product.entityId}
-          variant={product.variants.edges?.[0]!}
+          variant={variant!}
         />
       </div>
     </Container>
diff --git a/components/product/helpers.ts b/components/product/helpers.ts
index eda8d434a..bcc90b9a8 100644
--- a/components/product/helpers.ts
+++ b/components/product/helpers.ts
@@ -32,8 +32,10 @@ export function getProductOptions(product: ProductNode) {
 export function getCurrentVariant(product: ProductNode, opts: SelectedOptions) {
   const variant = product.variants.edges?.find((edge) => {
     const { node } = edge ?? {}
+    const numberOfDefinedOpts = Object.values(opts).filter(value => value !== null).length;
+    const numberOfEdges = node?.productOptions?.edges?.length;
 
-    return Object.entries(opts).every(([key, value]) =>
+    const isEdgeEqualToOption = ([key, value]:[string, string | null]) =>
       node?.productOptions.edges?.find((edge) => {
         if (
           edge?.node.__typename === 'MultipleChoiceOption' &&
@@ -43,9 +45,12 @@ export function getCurrentVariant(product: ProductNode, opts: SelectedOptions) {
             (valueEdge) => valueEdge?.node.label === value
           )
         }
-      })
-    )
+      });
+
+    return numberOfDefinedOpts === numberOfEdges ?
+      Object.entries(opts).every(isEdgeEqualToOption)
+      : Object.entries(opts).some(isEdgeEqualToOption)
   })
 
-  return variant
+  return variant ?? product.variants.edges?.[0]
 }
diff --git a/components/ui/Marquee/Marquee.tsx b/components/ui/Marquee/Marquee.tsx
index 09f562011..163f29a34 100644
--- a/components/ui/Marquee/Marquee.tsx
+++ b/components/ui/Marquee/Marquee.tsx
@@ -9,7 +9,7 @@ interface Props {
   variant?: 'primary' | 'secondary'
 }
 
-const Maquee: FC<Props> = ({
+const Marquee: FC<Props> = ({
   className = '',
   children,
   variant = 'primary',
@@ -32,4 +32,4 @@ const Maquee: FC<Props> = ({
   )
 }
 
-export default Maquee
+export default Marquee
diff --git a/components/ui/context.tsx b/components/ui/context.tsx
index 096e2f865..206573858 100644
--- a/components/ui/context.tsx
+++ b/components/ui/context.tsx
@@ -90,6 +90,7 @@ function uiReducer(state: State, action: Action) {
       return {
         ...state,
         displayModal: true,
+        displaySidebar: false,
       }
     }
     case 'CLOSE_MODAL': {
diff --git a/framework/bigcommerce/api/cart/handlers/add-item.ts b/framework/bigcommerce/api/cart/handlers/add-item.ts
index 25ae3880e..ca9de1ed5 100644
--- a/framework/bigcommerce/api/cart/handlers/add-item.ts
+++ b/framework/bigcommerce/api/cart/handlers/add-item.ts
@@ -26,8 +26,8 @@ const addItem: CartHandlers['addItem'] = async ({
     }),
   }
   const { data } = cartId
-    ? await config.storeApiFetch(`/v3/carts/${cartId}/items`, options)
-    : await config.storeApiFetch('/v3/carts', options)
+    ? await config.storeApiFetch(`/v3/carts/${cartId}/items?include=line_items.physical_items.options`, options)
+    : await config.storeApiFetch('/v3/carts?include=line_items.physical_items.options', options)
 
   // Create or update the cart cookie
   res.setHeader(
diff --git a/framework/bigcommerce/api/cart/handlers/get-cart.ts b/framework/bigcommerce/api/cart/handlers/get-cart.ts
index 9fb42d730..703601cd8 100644
--- a/framework/bigcommerce/api/cart/handlers/get-cart.ts
+++ b/framework/bigcommerce/api/cart/handlers/get-cart.ts
@@ -12,7 +12,7 @@ const getCart: CartHandlers['getCart'] = async ({
 
   if (cartId) {
     try {
-      result = await config.storeApiFetch(`/v3/carts/${cartId}`)
+      result = await config.storeApiFetch(`/v3/carts/${cartId}?include=line_items.physical_items.options`)
     } catch (error) {
       if (error instanceof BigcommerceApiError && error.status === 404) {
         // Remove the cookie if it exists but the cart wasn't found
diff --git a/framework/bigcommerce/api/cart/handlers/remove-item.ts b/framework/bigcommerce/api/cart/handlers/remove-item.ts
index 2ee5dbe16..e4b57a01b 100644
--- a/framework/bigcommerce/api/cart/handlers/remove-item.ts
+++ b/framework/bigcommerce/api/cart/handlers/remove-item.ts
@@ -15,7 +15,7 @@ const removeItem: CartHandlers['removeItem'] = async ({
   }
 
   const result = await config.storeApiFetch<{ data: any } | null>(
-    `/v3/carts/${cartId}/items/${itemId}`,
+    `/v3/carts/${cartId}/items/${itemId}?include=line_items.physical_items.options`,
     { method: 'DELETE' }
   )
   const data = result?.data ?? null
diff --git a/framework/bigcommerce/api/cart/handlers/update-item.ts b/framework/bigcommerce/api/cart/handlers/update-item.ts
index c64c111df..73776ccd9 100644
--- a/framework/bigcommerce/api/cart/handlers/update-item.ts
+++ b/framework/bigcommerce/api/cart/handlers/update-item.ts
@@ -16,7 +16,7 @@ const updateItem: CartHandlers['updateItem'] = async ({
   }
 
   const { data } = await config.storeApiFetch(
-    `/v3/carts/${cartId}/items/${itemId}`,
+    `/v3/carts/${cartId}/items/${itemId}?include=line_items.physical_items.options`,
     {
       method: 'PUT',
       body: JSON.stringify({
diff --git a/pages/[...pages].tsx b/pages/[...pages].tsx
index 6caac1720..66a6be90e 100644
--- a/pages/[...pages].tsx
+++ b/pages/[...pages].tsx
@@ -65,7 +65,7 @@ export default function Pages({
   page,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
-    <div className="max-w-2xl mx-auto py-20">
+    <div className="max-w-2xl mx-8 sm:mx-auto py-20">
       {page?.body && <Text html={page.body} />}
     </div>
   )
diff --git a/pages/search.tsx b/pages/search.tsx
index 5110aba55..88a6354cd 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -106,9 +106,9 @@ export default function Search({
                     fill="currentColor"
                   >
                     <path
-                      fill-rule="evenodd"
+                      fillRule="evenodd"
                       d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                      clip-rule="evenodd"
+                      clipRule="evenodd"
                     />
                   </svg>
                 </button>
@@ -205,9 +205,9 @@ export default function Search({
                     fill="currentColor"
                   >
                     <path
-                      fill-rule="evenodd"
+                      fillRule="evenodd"
                       d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                      clip-rule="evenodd"
+                      clipRule="evenodd"
                     />
                   </svg>
                 </button>
@@ -378,9 +378,9 @@ export default function Search({
                     fill="currentColor"
                   >
                     <path
-                      fill-rule="evenodd"
+                      fillRule="evenodd"
                       d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                      clip-rule="evenodd"
+                      clipRule="evenodd"
                     />
                   </svg>
                 </button>