diff --git a/components/avatar/avatar-customize-layout.tsx b/components/avatar/avatar-customize-layout.tsx
index c7bbf3a..6de9399 100644
--- a/components/avatar/avatar-customize-layout.tsx
+++ b/components/avatar/avatar-customize-layout.tsx
@@ -18,7 +18,7 @@ export function AvatarCustomizeLayout({
     <div className="relative min-h-dvh bg-background bg-[radial-gradient(circle_at_20%_0%,hsl(var(--primary)/0.12)_0%,transparent_45%),radial-gradient(circle_at_80%_100%,hsl(var(--secondary)/0.1)_0%,transparent_40%)] pt-topbar">
       <AppTopBar />
 
-      <main className="mx-auto max-w-lg px-4 py-6 md:max-w-3xl md:px-5 lg:max-w-6xl">
+      <main className="mx-auto max-w-lg px-4 py-6 lg:max-w-6xl lg:px-5">
         <AppPageHeader
           eyebrow={eyebrow}
           title={title}
diff --git a/components/layout/app-shell.tsx b/components/layout/app-shell.tsx
index 9a39cff..67fc956 100644
--- a/components/layout/app-shell.tsx
+++ b/components/layout/app-shell.tsx
@@ -10,8 +10,8 @@ type AppShellProps = {
 };
 
 const contentWidthClass = {
-  default: "max-w-lg md:max-w-2xl lg:max-w-4xl",
-  wide: "max-w-lg md:max-w-3xl lg:max-w-6xl",
+  default: "max-w-lg lg:max-w-4xl",
+  wide: "max-w-lg lg:max-w-6xl",
 } as const;
 
 export function AppShell({
@@ -25,7 +25,7 @@ export function AppShell({
       <AppTopBar />
       <main
         className={cn(
-          "mx-auto px-4 py-6 md:px-5",
+          "mx-auto px-4 py-6 lg:px-5",
           wide ? contentWidthClass.wide : contentWidthClass.default,
         )}
       >
diff --git a/components/shop/shop-content.tsx b/components/shop/shop-content.tsx
index bf7f33e..7d11b90 100644
--- a/components/shop/shop-content.tsx
+++ b/components/shop/shop-content.tsx
@@ -201,8 +201,7 @@ export function ShopContent() {
 
   const roomItems = items.filter((item) => item.type === "room");
 
-  const itemGridClassName =
-    "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3";
+  const itemGridClassName = "grid grid-cols-1 gap-3 lg:grid-cols-2 xl:grid-cols-3";
 
   return (
     <>