diff --git a/app/layout.tsx b/app/layout.tsx
index dca2c624f..95e62e5bc 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -33,7 +33,7 @@ const inter = Inter({
 export default async function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className={inter.variable}>
-      <body className="bg-white text-black selection:bg-teal-300 dark:bg-black dark:text-white dark:selection:bg-fuchsia-600 dark:selection:text-white">
+      <body className="text-black bg-gray-50 selection:bg-teal-300 dark:bg-dark dark:text-white dark:selection:bg-fuchsia-600 dark:selection:text-white">
         <Navbar />
         <Suspense>
           <main>{children}</main>
diff --git a/components/carousel.tsx b/components/carousel.tsx
index d86d17f45..b6b7a1271 100644
--- a/components/carousel.tsx
+++ b/components/carousel.tsx
@@ -1,6 +1,7 @@
 import { getCollectionProducts } from 'lib/shopify';
 import Image from 'next/image';
 import Link from 'next/link';
+import Price from './price';
 
 export async function Carousel() {
   // Collections that start with `hidden-*` are hidden from the search page.
@@ -9,27 +10,32 @@ export async function Carousel() {
   if (!products?.length) return null;
 
   return (
-    <div className="relative w-full overflow-hidden bg-black dark:bg-white">
-      <div className="flex animate-carousel">
+    <div className="relative w-full pb-6 overflow-hidden">
+      <div className="flex space-x-6 animate-carousel">
         {[...products, ...products].map((product, i) => (
           <Link
             key={`${product.handle}${i}`}
             href={`/product/${product.handle}`}
-            className="relative h-[30vh] w-1/2 flex-none md:w-1/3"
+            className="relative h-[30vh] w-2/3 flex-none rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black md:w-1/3"
           >
             {product.featuredImage ? (
               <Image
                 alt={product.title}
-                className="h-full object-contain"
+                className="object-contain h-full"
                 fill
                 sizes="33vw"
                 src={product.featuredImage.url}
               />
             ) : null}
-            <div className="absolute inset-y-0 right-0 flex items-center justify-center">
-              <div className="inline-flex bg-white p-4 text-xl font-semibold text-black dark:bg-black dark:text-white">
+            <div className="absolute bottom-0 left-0 flex items-center p-1 mb-2 ml-2 text-black border rounded-full bg-white/80 backdrop-blur-md dark:border-gray-800 dark:bg-black/80 dark:text-white md:mb-8 md:ml-8">
+              <h3 data-testid="product-name" className="inline pl-2 mr-6 text-xs font-semibold">
                 {product.title}
-              </div>
+              </h3>
+              <Price
+                className="flex-none p-2 text-xs font-semibold text-white bg-blue-600 rounded-full"
+                amount={product.priceRange.maxVariantPrice.amount}
+                currencyCode={product.priceRange.maxVariantPrice.currencyCode}
+              />
             </div>
           </Link>
         ))}
diff --git a/components/grid/index.tsx b/components/grid/index.tsx
index 07dc0d2a9..346a7833b 100644
--- a/components/grid/index.tsx
+++ b/components/grid/index.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 
 function Grid(props: React.ComponentProps<'ul'>) {
   return (
-    <ul {...props} className={clsx('grid grid-flow-row  gap-4 py-5', props.className)}>
+    <ul {...props} className={clsx('grid grid-flow-row gap-4 py-5', props.className)}>
       {props.children}
     </ul>
   );
diff --git a/components/grid/three-items.tsx b/components/grid/three-items.tsx
index 2280de26e..f0a34a375 100644
--- a/components/grid/three-items.tsx
+++ b/components/grid/three-items.tsx
@@ -3,26 +3,18 @@ import { getCollectionProducts } from 'lib/shopify';
 import type { Product } from 'lib/shopify/types';
 import Link from 'next/link';
 
-function ThreeItemGridItem({
-  item,
-  size,
-  background
-}: {
-  item: Product;
-  size: 'full' | 'half';
-  background: 'white' | 'pink' | 'purple' | 'black';
-}) {
+function ThreeItemGridItem({ item, size }: { item: Product; size: 'full' | 'half' }) {
   return (
     <div
       className={size === 'full' ? 'lg:col-span-4 lg:row-span-2' : 'lg:col-span-2 lg:row-span-1'}
     >
-      <Link className="block h-full" href={`/product/${item.handle}`}>
+      <Link className="block h-full p-2" href={`/product/${item.handle}`}>
         <GridTileImage
           src={item.featuredImage.url}
           width={size === 'full' ? 1080 : 540}
           height={size === 'full' ? 1080 : 540}
+          labelPosition={size === 'full' ? 'center' : 'bottom'}
           priority={true}
-          background={background}
           alt={item.title}
           labels={{
             title: item.title as string,
@@ -46,10 +38,10 @@ export async function ThreeItemGrid() {
   const [firstProduct, secondProduct, thirdProduct] = homepageItems;
 
   return (
-    <section className="lg:grid lg:grid-cols-6 lg:grid-rows-2" data-testid="homepage-products">
-      <ThreeItemGridItem size="full" item={firstProduct} background="purple" />
-      <ThreeItemGridItem size="half" item={secondProduct} background="black" />
-      <ThreeItemGridItem size="half" item={thirdProduct} background="pink" />
+    <section className="p-2 lg:grid lg:grid-cols-6 lg:grid-rows-2" data-testid="homepage-products">
+      <ThreeItemGridItem size="full" item={firstProduct} />
+      <ThreeItemGridItem size="half" item={secondProduct} />
+      <ThreeItemGridItem size="half" item={thirdProduct} />
     </section>
   );
 }
diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx
index b2f219276..d8b5589fd 100644
--- a/components/grid/tile.tsx
+++ b/components/grid/tile.tsx
@@ -5,14 +5,14 @@ import Price from 'components/price';
 
 export function GridTileImage({
   isInteractive = true,
-  background,
   active,
+  labelPosition,
   labels,
   ...props
 }: {
   isInteractive?: boolean;
-  background?: 'white' | 'pink' | 'purple' | 'black' | 'purple-dark' | 'blue' | 'cyan' | 'gray';
   active?: boolean;
+  labelPosition?: 'bottom' | 'center';
   labels?: {
     title: string;
     amount: string;
@@ -22,21 +22,15 @@ export function GridTileImage({
 } & React.ComponentProps<typeof Image>) {
   return (
     <div
-      className={clsx('relative flex h-full w-full items-center justify-center overflow-hidden', {
-        'bg-white dark:bg-white': background === 'white',
-        'bg-[#ff0080] dark:bg-[#ff0080]': background === 'pink',
-        'bg-[#7928ca] dark:bg-[#7928ca]': background === 'purple',
-        'bg-gray-900 dark:bg-gray-900': background === 'black',
-        'bg-violetDark dark:bg-violetDark': background === 'purple-dark',
-        'bg-blue-500 dark:bg-blue-500': background === 'blue',
-        'bg-cyan-500 dark:bg-cyan-500': background === 'cyan',
-        'bg-gray-100 dark:bg-gray-100': background === 'gray',
-        'bg-gray-100 dark:bg-gray-900': !background,
-        relative: labels
-      })}
+      className={clsx(
+        'relative flex h-full w-full items-center justify-center overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black',
+        {
+          relative: labels
+        }
+      )}
     >
       {active !== undefined && active ? (
-        <span className="absolute h-full w-full bg-white opacity-25"></span>
+        <span className="absolute w-full h-full bg-white opacity-25"></span>
       ) : null}
       {props.src ? (
         <Image
@@ -48,18 +42,25 @@ export function GridTileImage({
         />
       ) : null}
       {labels ? (
-        <div className="absolute left-0 top-0 w-3/4 text-black dark:text-white">
+        <div
+          className={clsx(
+            'absolute bottom-0 left-0 flex items-center rounded-full border bg-white/80 p-1 text-black backdrop-blur-md dark:border-gray-800 dark:bg-black/80 dark:text-white',
+            labelPosition === 'center'
+              ? 'mb-2 ml-2 md:mb-8 md:ml-8 lg:mb-[35%] lg:ml-20'
+              : 'mb-2 ml-2 md:mb-8 md:ml-8'
+          )}
+        >
           <h3
             data-testid="product-name"
             className={clsx(
-              'inline bg-white box-decoration-clone py-3 pl-5 font-semibold leading-loose shadow-[1.25rem_0_0] shadow-white dark:bg-black dark:shadow-black',
-              !labels.isSmall ? 'text-3xl' : 'text-lg'
+              'mr-6 inline pl-2 font-semibold',
+              !labels.isSmall ? 'text-sm' : 'text-sm'
             )}
           >
             {labels.title}
           </h3>
           <Price
-            className="w-fit bg-white px-5 py-3 text-sm font-semibold dark:bg-black dark:text-white"
+            className="flex-none p-2 text-sm font-semibold text-white bg-blue-600 rounded-full"
             amount={labels.amount}
             currencyCode={labels.currencyCode}
           />
