diff --git a/src/components/Color/index.tsx b/src/components/Color/index.tsx
index ad2a213..794e903 100644
--- a/src/components/Color/index.tsx
+++ b/src/components/Color/index.tsx
@@ -1,14 +1,8 @@
-type ColorProps = React.ComponentPropsWithoutRef<'div'> & {
+type Props = React.ComponentPropsWithoutRef<'div'> & {
   color: string;
 };
 
-export const colorMap: Record<string, string> = {
-  Black: '#000000',
-  Red: '#FF0000',
-  Stone: '#EFCFB6',
-};
-
-export default function Color({ color, ...rest }: ColorProps) {
+export default function Color({ color, ...rest }: Props) {
   return (
     <div
       {...rest}
@@ -19,3 +13,9 @@ export default function Color({ color, ...rest }: ColorProps) {
     </div>
   );
 }
+
+export const colorMap: Record<string, string> = {
+  Black: '#000000',
+  Red: '#FF0000',
+  Stone: '#EFCFB6',
+};
diff --git a/src/components/ProductList/index.tsx b/src/components/ProductList/index.tsx
index 6ad40ae..82f09a6 100644
--- a/src/components/ProductList/index.tsx
+++ b/src/components/ProductList/index.tsx
@@ -1,6 +1,7 @@
 import ProductItem, { type Product } from '@/components/ProductItem';
 
 type Props = { products: Product[] };
+
 export default function ProductList({ products }: Props) {
   return (
     <div data-testid="products-list" className="grid grid-cols-1 gap-4 flex-1">
diff --git a/src/components/Products/index.tsx b/src/components/Products/index.tsx
index 2026289..4033726 100644
--- a/src/components/Products/index.tsx
+++ b/src/components/Products/index.tsx
@@ -15,7 +15,7 @@ export default function Products() {
           colorOptions={colorOptions}
           color={color}
           onChange={setColor}
-          className="w-full max-w-xs"
+          className="w-full sm:max-w-xs"
         />
       </div>
       <div className="flex flex-col lg:flex-row gap-4 pb-6">