diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx
index 2d6ddf6..e07b5e0 100644
--- a/src/app/products/page.tsx
+++ b/src/app/products/page.tsx
@@ -36,7 +36,7 @@ export default function ProductsPage() {
 
   return (
     <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
-      <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
+      <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 bg-primary-100 rounded">
         <h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
           Products
         </h1>
diff --git a/src/components/ProductList.tsx b/src/components/ProductList.tsx
index a3c165e..d9b6187 100644
--- a/src/components/ProductList.tsx
+++ b/src/components/ProductList.tsx
@@ -14,9 +14,9 @@ export function ProductList({
     <>
       <div>
         <h3>Widgets</h3>
-        <ul className="mb-4 border border-primary-500 p-2">
+        <ul className="mb-4 border border-[#F59E0B] p-2">
           {widgets.map(({ id, name, description }) => (
-            <li key={id} className="m-2 border border-primary-300 p-1">
+            <li key={id} className="m-2 border border-[#F8BD59] p-1">
               <h4>{name}</h4>
               <p>{description}</p>
             </li>
@@ -25,9 +25,9 @@ export function ProductList({
       </div>
       <div>
         <h3>Gadgets</h3>
-        <ul className="mb-4 border border-primary-500 p-2">
+        <ul className="mb-4 border border-[#F59E0B] p-2">
           {gadgets.map(({ id, name, description }) => (
-            <li key={id} className="m-2 border border-primary-300 p-1">
+            <li key={id} className="m-2 border border-[#F8BD59] p-1">
               <h4>{name}</h4>
               <p>{description}</p>
             </li>