diff --git a/app/components/Components.jsx b/app/components/Components.jsx
index fd8f87b..f0b54d9 100644
--- a/app/components/Components.jsx
+++ b/app/components/Components.jsx
@@ -580,7 +580,6 @@ export const ProductCard = ({
   return (
     <Link
       key={id}
-      className='recommended-product'
       to={`/products/${handle}`}
       style={{
         textDecoration: 'none',
diff --git a/app/components/RecommendedProducts.jsx b/app/components/RecommendedProducts.jsx
index e8ba6a4..46f195f 100644
--- a/app/components/RecommendedProducts.jsx
+++ b/app/components/RecommendedProducts.jsx
@@ -1,5 +1,10 @@
 import { Suspense } from 'react'
-import { ProductCard, TypographyTitle } from './Components'
+import {
+  Column,
+  ProductCard,
+  Row,
+  TypographyTitle,
+} from './Components'
 import { Await, useLoaderData } from '@remix-run/react'
 import { RecommendedProductsGrid } from './Layout'
 
@@ -11,11 +16,11 @@ import { RecommendedProductsGrid } from './Layout'
 export function RecommendedProducts() {
   const { recommendedProducts } = useLoaderData()
   return (
-    <div className='recommended-products'>
+    <Column centerH>
       <TypographyTitle level={2}>
         Featured Products
       </TypographyTitle>
-      <RecommendedProductsGrid>
+      <Row scrollable>
         {recommendedProducts.map((product, i) => (
           <ProductCard
             key={product.id}
@@ -27,8 +32,7 @@ export function RecommendedProducts() {
             backgroundColorIndex={i}
           />
         ))}
-      </RecommendedProductsGrid>
-      <br />
-    </div>
+      </Row>
+    </Column>
   )
 }