From 08eebfa7ac6d0d038fcfbdef867b666c6b6ce819 Mon Sep 17 00:00:00 2001
From: Wilhelm Svensgaard Rolstad <wilhelsr@stud.ntnu.no>
Date: Sat, 14 Nov 2026 10:46:26 +0100
Subject: [PATCH 1/3] feat: added a shared layout for all pages to have shared
 width and padding

---
 frontend/src/App.tsx                          |  43 +++----
 frontend/src/components/Layout.tsx            |  27 +++++
 .../src/components/pageSections/Footer.tsx    |  20 ++--
 .../src/components/pageSections/Header.tsx    |   2 +-
 .../src/pages/accountPage/accountPage.tsx     |   6 +-
 .../src/pages/categoryPage/categoryPage.tsx   |   2 +-
 .../src/pages/communityPage/communityPage.tsx |   2 +-
 frontend/src/pages/homePage/homePage.tsx      | 106 +++++++++---------
 frontend/src/pages/loginPage/loginPage.tsx    |  10 +-
 .../components/OpenSavedBuild.tsx             |   4 +-
 .../src/pages/pcBuilderPage/pcBuilderPage.tsx |  94 ++++++++--------
 11 files changed, 165 insertions(+), 151 deletions(-)
 create mode 100644 frontend/src/components/Layout.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4b8c57a..016b702 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,13 +3,10 @@ import HomePage from "./pages/homePage/homePage";
 import CategoryPage from "./pages/categoryPage/categoryPage";
 import PcBuilderPage from "./pages/pcBuilderPage/pcBuilderPage";
 import CommunityPage from "./pages/communityPage/communityPage";
-import NavBar from "./components/pageSections/Header";
-import Footer from "./components/pageSections/Footer";
-import BackToTopButton from "./components/buttons/BackToTopButton";
+import Layout from "./components/Layout";
 import LoginPage from "./pages/loginPage/loginPage";
 import AccountPage from "./pages/accountPage/accountPage";
 import { Routes, Route, useLocation, useParams } from "react-router";
-import Notification from "./components/Notification";
 import { useSelector } from "react-redux";
 import type { RootState } from "./state/store";
 
@@ -28,29 +25,21 @@ function App() {
     (state: RootState) => state.auth.user?.uid ?? "guest",
   );
   return (
-    <div className="flex min-h-screen flex-col">
-      <header className="sticky top-0 z-50 bg-background">
-        <NavBar />
-      </header>
-      <main className="flex-1">
-        <Routes key={accountKey}>
-          <Route path="/" element={<HomePage />} />
-          <Route path="/explore" element={<CategoryPage />} />
-          <Route
-            path="/explore/category/:category"
-            element={<CategoryRoute />}
-          />
-          <Route path="/builder" element={<BuilderRoute />} />
-          <Route path="/community" element={<CommunityPage />} />
-          <Route path="/login" element={<LoginPage />} />
-          <Route path="/account" element={<AccountPage />} />
-          <Route path="*" element={<p>404 - Page not found</p>} />
-        </Routes>
-      </main>
-      <Footer />
-      <BackToTopButton />
-      <Notification />
-    </div>
+    <Layout>
+      <Routes key={accountKey}>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/explore" element={<CategoryPage />} />
+        <Route path="/explore/category/:category" element={<CategoryRoute />} />
+        <Route path="/builder" element={<BuilderRoute />} />
+        <Route path="/community" element={<CommunityPage />} />
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/account" element={<AccountPage />} />
+        <Route
+          path="*"
+          element={<p className="w-full">404 - Page not found</p>}
+        />
+      </Routes>
+    </Layout>
   );
 }
 export default App;
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
new file mode 100644
index 0000000..f8d5c4b
--- /dev/null
+++ b/frontend/src/components/Layout.tsx
@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import NavBar from "./pageSections/Header";
+import Footer from "./pageSections/Footer";
+import BackToTopButton from "./buttons/BackToTopButton";
+import Notification from "./Notification";
+
+const contentWidth = "mx-auto w-full max-w-7xl px-4 sm:px-6";
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex min-h-dvh flex-col">
+      <header className="sticky top-0 z-50 bg-surface shadow-2xl">
+        <div className={contentWidth}>
+          <NavBar />
+        </div>
+      </header>
+      <main className={`${contentWidth} min-w-0 flex-1 py-6`}>{children}</main>
+      <footer className="bg-surface text-white">
+        <div className={contentWidth}>
+          <Footer />
+        </div>
+      </footer>
+      <BackToTopButton />
+      <Notification />
+    </div>
+  );
+}
diff --git a/frontend/src/components/pageSections/Footer.tsx b/frontend/src/components/pageSections/Footer.tsx
index acc6f9c..408c7c1 100644
--- a/frontend/src/components/pageSections/Footer.tsx
+++ b/frontend/src/components/pageSections/Footer.tsx
@@ -1,16 +1,14 @@
 export default function Footer() {
   return (
-    <footer className="bg-surface text-white">
-      <div className="mx-auto flex w-[92%] max-w-7xl flex-col gap-4 py-6 text-sm sm:flex-row sm:items-center sm:justify-between">
-        <div>
-          <p className="font-bold">Full Circuit</p>
-          <p className="mt-1 text-secondary">
-            Explore PC components and plan your build.
-          </p>
-        </div>
-
-        <p className="text-secondary">© 2026 Team 15, IT2810</p>
+    <div className="flex w-full flex-col gap-4 py-6 text-sm sm:flex-row sm:items-center sm:justify-between">
+      <div>
+        <p className="font-bold">Full Circuit</p>
+        <p className="mt-1 text-secondary">
+          Explore PC components and plan your build.
+        </p>
       </div>
-    </footer>
+
+      <p className="text-secondary">© 2026 Team 15, IT2810</p>
+    </div>
   );
 }
diff --git a/frontend/src/components/pageSections/Header.tsx b/frontend/src/components/pageSections/Header.tsx
index 02f633e..22aa0cb 100644
--- a/frontend/src/components/pageSections/Header.tsx
+++ b/frontend/src/components/pageSections/Header.tsx
@@ -32,7 +32,7 @@ export default function NavBar() {
   return (
     <nav
       aria-label="Main navigation"
-      className="relative flex items-stretch gap-4 lg:gap-8 bg-surface px-4 h-17 whitespace-nowrap text-sm shadow-2xl"
+      className="relative flex w-full items-stretch gap-4 lg:gap-8 h-17 whitespace-nowrap text-sm"
     >
       <Link
         to="/"
diff --git a/frontend/src/pages/accountPage/accountPage.tsx b/frontend/src/pages/accountPage/accountPage.tsx
index 247bd54..4b4a5ae 100644
--- a/frontend/src/pages/accountPage/accountPage.tsx
+++ b/frontend/src/pages/accountPage/accountPage.tsx
@@ -18,7 +18,7 @@ export default function AccountPage() {
 
   if (loading) {
     return (
-      <p role="status" className="p-6">
+      <p role="status" className="w-full">
         Loading account...
       </p>
     );
@@ -26,7 +26,7 @@ export default function AccountPage() {
 
   if (!user) {
     return (
-      <section className="mx-auto max-w-md px-5 py-16 text-center text-white">
+      <section className="w-full text-center text-white">
         <UserRound
           aria-hidden="true"
           className="mx-auto mb-4 h-10 w-10 text-accent"
@@ -109,7 +109,7 @@ function AccountContent() {
   }
 
   return (
-    <section className="mx-auto w-full max-w-7xl px-4 py-8 text-white sm:px-6">
+    <section className="w-full text-white">
       <header className="flex flex-wrap items-center justify-between gap-5 rounded-xl bg-surface p-6">
         <div className="flex items-center gap-4">
           <div className="rounded-full bg-background p-3 text-accent">
diff --git a/frontend/src/pages/categoryPage/categoryPage.tsx b/frontend/src/pages/categoryPage/categoryPage.tsx
index cbb2c1b..213b19f 100644
--- a/frontend/src/pages/categoryPage/categoryPage.tsx
+++ b/frontend/src/pages/categoryPage/categoryPage.tsx
@@ -19,7 +19,7 @@ export default function CategoryPage({ category }: CategoryPageProps) {
   );
 
   return (
-    <div className="mx-auto flex min-h-screen w-[92%] max-w-7xl flex-col items-center gap-6 py-6">
+    <div className="flex w-full flex-col items-center gap-6">
       <CategorySelection showViewAll={false} />
 
       <h1 className="text-2xl">
diff --git a/frontend/src/pages/communityPage/communityPage.tsx b/frontend/src/pages/communityPage/communityPage.tsx
index 60b2ef8..c35eaca 100644
--- a/frontend/src/pages/communityPage/communityPage.tsx
+++ b/frontend/src/pages/communityPage/communityPage.tsx
@@ -32,7 +32,7 @@ export default function CommunityPage() {
   }
 
   return (
-    <section className="mx-auto min-h-screen max-w-7xl px-3 py-5 text-white sm:px-5">
+    <section className="w-full text-white">
       <h1 className="mb-8 text-2xl">Community builds</h1>
       {loading && <p role="status">Loading builds...</p>}
       {error && <p role="alert">{error}</p>}
diff --git a/frontend/src/pages/homePage/homePage.tsx b/frontend/src/pages/homePage/homePage.tsx
index 5d9b6f8..08e6515 100644
--- a/frontend/src/pages/homePage/homePage.tsx
+++ b/frontend/src/pages/homePage/homePage.tsx
@@ -9,67 +9,65 @@ export default function HomePage() {
   const { search, setSearch, filtOptions, setFiltOptions } = useCatalogParams();
 
   return (
-    <div className="min-h-screen">
-      <div className="mx-auto flex w-[92%] max-w-7xl flex-col gap-6 py-6">
-        <BuildPCGraphic />
-        <CategorySelection />
+    <div className="flex w-full flex-col gap-6">
+      <BuildPCGraphic />
+      <CategorySelection />
 
-        <section id="components" className="w-full">
-          <header className="mb-4 flex items-end justify-between gap-3">
-            <div className="hidden lg:block">
-              <h2 className="text-xl font-bold">Explore processors</h2>
-              <p className="mt-1 text-sm text-secondary">
-                Take a closer look at the components in our catalog.
-              </p>
-            </div>
-
-            <Link
-              to="/explore/category/CPU"
-              className="hidden shrink-0 text-sm text-accent hover:underline lg:block"
-            >
-              Browse processors →
-            </Link>
-          </header>
-
-          <section className="hidden lg:block">
-            <AllPartsPreview
-              key="featured-processors"
-              category="CPU"
-              first={2}
-              defaultview="2-grid-view"
-              viewenabled={false}
-              featured
-            />
-          </section>
-        </section>
-
-        <section className="mx-auto w-full max-w-3xl lg:hidden">
-          <div className="mb-4 text-center">
-            <h2 className="text-xl font-bold">Browse components</h2>
+      <section id="components" className="w-full">
+        <header className="mb-4 flex items-end justify-between gap-3">
+          <div className="hidden lg:block">
+            <h2 className="text-xl font-bold">Explore processors</h2>
             <p className="mt-1 text-sm text-secondary">
-              Search the catalog or filter by category.
+              Take a closer look at the components in our catalog.
             </p>
           </div>
 
-          <div className="flex justify-center w-full">
-            <FilterComponent
-              filtOptions={filtOptions}
-              setFiltOptions={setFiltOptions}
-              search={search}
-              setSearch={setSearch}
-            />
-          </div>
+          <Link
+            to="/explore/category/CPU"
+            className="hidden shrink-0 text-sm text-accent hover:underline lg:block"
+          >
+            Browse processors →
+          </Link>
+        </header>
 
-          <div className="mt-5">
-            <AllPartsPreview
-              {...filtOptions}
-              search={search}
-              defaultview="2-grid-view"
-              viewenabled={false}
-            />
-          </div>
+        <section className="hidden lg:block">
+          <AllPartsPreview
+            key="featured-processors"
+            category="CPU"
+            first={2}
+            defaultview="2-grid-view"
+            viewenabled={false}
+            featured
+          />
         </section>
-      </div>
+      </section>
+
+      <section className="w-full lg:hidden">
+        <div className="mb-4 text-center">
+          <h2 className="text-xl font-bold">Browse components</h2>
+          <p className="mt-1 text-sm text-secondary">
+            Search the catalog or filter by category.
+          </p>
+        </div>
+
+        <div className="flex justify-center w-full">
+          <FilterComponent
+            filtOptions={filtOptions}
+            setFiltOptions={setFiltOptions}
+            search={search}
+            setSearch={setSearch}
+          />
+        </div>
+
+        <div className="mt-5">
+          <AllPartsPreview
+            {...filtOptions}
+            search={search}
+            defaultview="2-grid-view"
+            viewenabled={false}
+          />
+        </div>
+      </section>
     </div>
   );
 }
diff --git a/frontend/src/pages/loginPage/loginPage.tsx b/frontend/src/pages/loginPage/loginPage.tsx
index f00a5b5..c2aaccc 100644
--- a/frontend/src/pages/loginPage/loginPage.tsx
+++ b/frontend/src/pages/loginPage/loginPage.tsx
@@ -68,12 +68,16 @@ export default function LoginPage() {
   }
 
   if (loading) {
-    return <p role="status">Loading...</p>;
+    return (
+      <p role="status" className="w-full">
+        Loading...
+      </p>
+    );
   }
 
   if (user) {
     return (
-      <section className="mx-auto max-w-md px-4 py-10 text-white">
+      <section className="w-full text-white">
         <p role="status">You’re signed in.</p>
         <Link to="/builder" className="text-accent underline">
           Go to PC builder
@@ -83,7 +87,7 @@ export default function LoginPage() {
   }
 
   return (
-    <section className="mx-auto w-full max-w-md px-5 py-12 text-white">
+    <section className="w-full text-white">
       <div key={registering ? "register" : "login"} className="auth-form-enter">
         <h1 className="text-center text-2xl font-semibold">
           {registering ? "Create account" : "Welcome back"}
diff --git a/frontend/src/pages/pcBuilderPage/components/OpenSavedBuild.tsx b/frontend/src/pages/pcBuilderPage/components/OpenSavedBuild.tsx
index 22e2272..5291acd 100644
--- a/frontend/src/pages/pcBuilderPage/components/OpenSavedBuild.tsx
+++ b/frontend/src/pages/pcBuilderPage/components/OpenSavedBuild.tsx
@@ -46,7 +46,7 @@ export default function OpenSavedBuild({ children }: { children: ReactNode }) {
 
   if (error) {
     return (
-      <section className="mx-auto max-w-7xl px-5 py-8 text-white">
+      <section className="w-full text-white">
         <p role="alert">{error}</p>
         <Link to="/account" className="mt-4 inline-block text-accent underline">
           Back to My builds
@@ -56,7 +56,7 @@ export default function OpenSavedBuild({ children }: { children: ReactNode }) {
   }
   if (!ready)
     return (
-      <p role="status" className="p-6">
+      <p role="status" className="w-full">
         Opening saved build...
       </p>
     );
diff --git a/frontend/src/pages/pcBuilderPage/pcBuilderPage.tsx b/frontend/src/pages/pcBuilderPage/pcBuilderPage.tsx
index 3aa8308..4ba8284 100644
--- a/frontend/src/pages/pcBuilderPage/pcBuilderPage.tsx
+++ b/frontend/src/pages/pcBuilderPage/pcBuilderPage.tsx
@@ -28,60 +28,58 @@ function BuilderContent() {
   ).length;
 
   return (
-    <>
-      <section className="flex flex-col items-center px-3 sm:px-5">
-        <div className="w-full max-w-7xl py-5">
-          <h1 className="text-2xl">PC BUILDER</h1>
-          {savedBuild && (
-            <p className="mt-2 text-sm text-gray-300">
-              Editing: <span className="text-accent">{savedBuild.title}</span>
-              {isDirty ? " · Unsaved changes" : " · Saved"}
-              {savedBuild.isPublished ? " · Published" : " · Private"}
-            </p>
-          )}
-        </div>
+    <section className="flex w-full flex-col">
+      <div className="mb-5 w-full">
+        <h1 className="text-2xl">PC BUILDER</h1>
+        {savedBuild && (
+          <p className="mt-2 text-sm text-gray-300">
+            Editing: <span className="text-accent">{savedBuild.title}</span>
+            {isDirty ? " · Unsaved changes" : " · Saved"}
+            {savedBuild.isPublished ? " · Published" : " · Private"}
+          </p>
+        )}
+      </div>
 
-        <section className="min-h-screen flex flex-col lg:flex-row w-full gap-3 max-w-7xl">
-          <section className="flex min-w-0 flex-1 flex-col rounded-lg py-2 bg-surface border border-surface">
-            <div className="flex flex-wrap items-center gap-x-3 px-3">
-              <h2 className=" py-5 text-xl"> My Build</h2>
-              <p role="status" className="text-xs text-gray-300 ml-auto">
-                {selectedCount} out of 8 components selected
-              </p>
-            </div>
+      <section className="flex w-full flex-col gap-3 lg:flex-row">
+        <section className="flex min-w-0 flex-1 flex-col rounded-lg py-2 bg-surface border border-surface">
+          <div className="flex flex-wrap items-center gap-x-3 px-3">
+            <h2 className=" py-5 text-xl"> My Build</h2>
+            <p role="status" className="text-xs text-gray-300 ml-auto">
+              {selectedCount} out of 8 components selected
+            </p>
+          </div>
 
-            <section className="grid auto-rows-fr">
-              {categories.map((category) => (
-                <SelectionComponent
-                  key={category.value}
-                  category={category.label}
-                  categoryValue={category.value}
-                  part={parts[category.value]}
-                />
-              ))}
-            </section>
-            <ClearBuild />
+          <section className="grid auto-rows-fr">
+            {categories.map((category) => (
+              <SelectionComponent
+                key={category.value}
+                category={category.label}
+                categoryValue={category.value}
+                part={parts[category.value]}
+              />
+            ))}
           </section>
+          <ClearBuild />
+        </section>
 
-          <section className="relative w-full shrink-0 lg:w-100">
-            {/* On desktop, the component list determines the column height. */}
-            <div className="flex min-h-0 flex-col gap-4 lg:absolute lg:inset-0">
-              <div className="shrink-0">
-                <BuildSummaryComponent
-                  selectedCount={selectedCount}
-                  totalSum={totalSum}
-                  missingPriceCount={missingPriceCount}
-                  categories={categories}
-                />
-              </div>
-
-              <PublishBuild privately />
-              <PublishBuild />
-              <CompatabilityComponent parts={Object.values(parts)} />
+        <section className="relative w-full shrink-0 lg:w-100">
+          {/* On desktop, the component list determines the column height. */}
+          <div className="flex min-h-0 flex-col gap-4 lg:absolute lg:inset-0">
+            <div className="shrink-0">
+              <BuildSummaryComponent
+                selectedCount={selectedCount}
+                totalSum={totalSum}
+                missingPriceCount={missingPriceCount}
+                categories={categories}
+              />
             </div>
-          </section>
+
+            <PublishBuild privately />
+            <PublishBuild />
+            <CompatabilityComponent parts={Object.values(parts)} />
+          </div>
         </section>
       </section>
-    </>
+    </section>
   );
 }

From 5b031709ee94994b84b4c7da3acf9f91b7f2a5ce Mon Sep 17 00:00:00 2001
From: Wilhelm Svensgaard Rolstad <wilhelsr@stud.ntnu.no>
Date: Sat, 14 Nov 2026 10:57:50 +0100
Subject: [PATCH 2/3] increased width to use a larger part of the screen, also
 increased width in catalogue and filter component

---
 frontend/src/components/AllPartsPreview.tsx     |  5 +++--
 frontend/src/components/FilterComponent.tsx     |  2 +-
 frontend/src/components/Layout.tsx              |  2 +-
 .../src/pages/categoryPage/categoryPage.tsx     | 17 +++++++++--------
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/AllPartsPreview.tsx b/frontend/src/components/AllPartsPreview.tsx
index 21b531d..8679e4d 100644
--- a/frontend/src/components/AllPartsPreview.tsx
+++ b/frontend/src/components/AllPartsPreview.tsx
@@ -178,13 +178,14 @@ function PartsResults({
   }, [featured, handleLoadMore, loading, error, pageInfo?.hasNextPage]);
 
   return (
-    <section className="flex w-full min-w-0 max-w-7xl flex-col text-white p-2 md:p-0">
+    <section className="flex flex-col gap-4 w-full min-w-0 max-w-[100rem]  text-white p-2 md:p-0">
+
       {viewenabled && (
         <ViewSelector viewType={viewType} onViewChange={setViewType} />
       )}
 
       {!featured && (
-        <p className={`mb-3 ${loading || error ? "invisible" : ""}`}>
+        <p className={` ${loading || error ? "invisible" : ""} `}>
           Showing {visibleParts.length} of {totalCount} components
         </p>
       )}
diff --git a/frontend/src/components/FilterComponent.tsx b/frontend/src/components/FilterComponent.tsx
index 8efd99a..6f6ac83 100644
--- a/frontend/src/components/FilterComponent.tsx
+++ b/frontend/src/components/FilterComponent.tsx
@@ -48,7 +48,7 @@ export default function FilterComponent({
   return (
     <section
       aria-label="Search and filter components"
-      className={`w-[90%] max-w-6xl text-white flex justify-center ${isDesktopSize ? "border border-gray-600 rounded-2xl bg-surface-dark p-2" : ""} items-center h-fit gap-2`}
+      className={`w-full max-w-[100rem] text-white flex justify-center ${isDesktopSize ? "border border-gray-600 rounded-2xl bg-surface-dark p-2" : ""} items-center h-fit gap-2`}
     >
       <SearchComponent value={search} onChange={setSearch} variant="light" />
       {isDesktopSize ? (
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index f8d5c4b..8613810 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -4,7 +4,7 @@ import Footer from "./pageSections/Footer";
 import BackToTopButton from "./buttons/BackToTopButton";
 import Notification from "./Notification";
 
-const contentWidth = "mx-auto w-full max-w-7xl px-4 sm:px-6";
+const contentWidth = "mx-auto w-full max-w-[100rem] px-4 sm:px-6";
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
diff --git a/frontend/src/pages/categoryPage/categoryPage.tsx b/frontend/src/pages/categoryPage/categoryPage.tsx
index 213b19f..a71c3ad 100644
--- a/frontend/src/pages/categoryPage/categoryPage.tsx
+++ b/frontend/src/pages/categoryPage/categoryPage.tsx
@@ -20,7 +20,15 @@ export default function CategoryPage({ category }: CategoryPageProps) {
 
   return (
     <div className="flex w-full flex-col items-center gap-6">
-      <CategorySelection showViewAll={false} />
+     
+       <CategorySelection showViewAll={false} />
+      <FilterComponent
+        defaultCategory={initialCategory?.value}
+        filtOptions={filtOptions}
+        setFiltOptions={setFiltOptions}
+        search={search}
+        setSearch={setSearch}
+      />
 
       <h1 className="text-2xl">
         {invalidCategory
@@ -29,13 +37,6 @@ export default function CategoryPage({ category }: CategoryPageProps) {
             ? `Showing results for "${search}"`
             : (selectedCategory?.label ?? "All components")}
       </h1>
-      <FilterComponent
-        defaultCategory={initialCategory?.value}
-        filtOptions={filtOptions}
-        setFiltOptions={setFiltOptions}
-        search={search}
-        setSearch={setSearch}
-      />
 
       {!invalidCategory && <AllPartsPreview {...filtOptions} search={search} />}
     </div>

From 7e6ecdea390a7d23e2856ba20a16d32256e9e275 Mon Sep 17 00:00:00 2001
From: Wilhelm Svensgaard Rolstad <wilhelsr@stud.ntnu.no>
Date: Sat, 14 Nov 2026 11:03:56 +0100
Subject: [PATCH 3/3] small ui change in width of component selection component

---
 frontend/src/components/CategorySelection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/CategorySelection.tsx b/frontend/src/components/CategorySelection.tsx
index 1df2333..b9f0c59 100644
--- a/frontend/src/components/CategorySelection.tsx
+++ b/frontend/src/components/CategorySelection.tsx
@@ -32,7 +32,7 @@ export default function CategorySelection({
   showViewAll = true,
 }: CategorySelectionProps) {
   return (
-    <section className="mx-auto w-[90%] max-w-lg text-white lg:mx-0 lg:w-full lg:max-w-none">
+    <section className="mx-auto w-full max-w-lg text-white lg:mx-0 lg:w-full lg:max-w-none">
       <div className="mb-4 flex flex-wrap items-end justify-between gap-3">
         <div className="w-full text-center lg:w-auto lg:text-left">
           <h2 className="text-2xl lg:text-xl lg:font-bold">