diff --git a/src/app/storefront/page.tsx b/src/app/storefront/page.tsx
index 235f97de..21ad1ce9 100644
--- a/src/app/storefront/page.tsx
+++ b/src/app/storefront/page.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 import Storefront from './storefrontItems';
 
 import Footer from '../../components/FooterFolder/Footer';
-import { ShopAllText, Fullscreen } from './styles';
+import { ShopAllText, Fullscreen, StorefrontBox } from './styles';
 import { fetchUserProducts } from '../../api/supabase/queries/product_queries';
 import { Product } from '../../schema/schema';
 
@@ -40,7 +40,10 @@ export default function App() {
       />
 
       <ShopAllText>Shop {CategoryWord}</ShopAllText>
-      <Storefront products={FilteredProducts} />
+      <StorefrontBox>
+        <Storefront products={FilteredProducts} />
+      </StorefrontBox>
+
       <Footer />
     </Fullscreen>
   );
diff --git a/src/app/storefront/styles.ts b/src/app/storefront/styles.ts
index 99a21a94..d0466320 100644
--- a/src/app/storefront/styles.ts
+++ b/src/app/storefront/styles.ts
@@ -92,11 +92,12 @@ export const ItemButtons = styled.button`
 `;
 
 export const StorefrontWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  justify-content: space-evenly;
-  padding: 30px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 295px);
+  grid-gap: 2%;
+  padding-top: 20px;
+  justify-content: center;
+  padding-bottom: 150px;
 `;
 
 export const StorefrontItem = styled.div`
@@ -247,3 +248,6 @@ export const Fullscreen = styled.div`
   width: 100%;
   height: 100%;
 `;
+export const StorefrontBox = styled.div`
+  margin: auto;
+`;