diff --git a/package-lock.json b/package-lock.json
index 64eda98c..efab95d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -204,6 +204,7 @@
         "ts-json-schema-generator": "^2.3.0",
         "typescript": "^6.0.3",
         "typescript-eslint": "^8.59.3",
+        "usehooks-ts": "^3.1.1",
         "vite": "^8.0.12",
         "with-local-tmp-dir": "^7.0.1"
       },
@@ -13741,6 +13742,13 @@
       "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
       "license": "MIT"
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.defaults": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
@@ -19161,6 +19169,22 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/usehooks-ts": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.1.tgz",
+      "integrity": "sha512-I4diPp9Cq6ieSUH2wu+fDAVQO43xwtulo+fKEidHUwZPnYImbtkTjzIJYcDcJqxgmX31GVqNFURodvcgHcW0pA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=16.15.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index b90126e6..dd763c19 100644
--- a/package.json
+++ b/package.json
@@ -244,6 +244,7 @@
     "ts-json-schema-generator": "^2.3.0",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.59.3",
+    "usehooks-ts": "^3.1.1",
     "vite": "^8.0.12",
     "with-local-tmp-dir": "^7.0.1"
   },
diff --git a/src/client/components/msComponent/MSComponentList.tsx b/src/client/components/msComponent/MSComponentList.tsx
index 0436159b..26011412 100644
--- a/src/client/components/msComponent/MSComponentList.tsx
+++ b/src/client/components/msComponent/MSComponentList.tsx
@@ -1,29 +1,61 @@
-import { useState } from "react"
-import { Stack, SegmentGroup, Center, Card, SkeletonText } from '@chakra-ui/react';
+import { useState, type ComponentProps, useMemo } from "react"
+import { Stack, SegmentGroup, Card, SkeletonText, Box, Flex, Field } from '@chakra-ui/react';
 import type {ComponentsApiJson} from "../../../core/Api";
 import { MSComponentSummary, MSComponentSummaryFetchable } from "./MSComponentSummary";
 import { useQuery } from '@tanstack/react-query';
 import { ErrorAlert } from "../ErrorAlert";
 import { tanQueries } from "../../queries";
 import { MSErrorBoundary } from "../ErrorBoundary";
+import { useLocalStorage } from 'usehooks-ts'
+import { TextMuted } from "../TextMuted";
 
 export interface ComponentListProps {
     components: ComponentsApiJson[]
     fetchable?: boolean
 }
 
+const gridColumns = (columns: number): ComponentProps<typeof Box>['gridTemplateColumns'] => ({
+    mdDown: "repeat(1, minmax(295px, 1fr))",
+    xlDown: `repeat(${columns > 1 ? 2 : 1}, minmax(295px, 1fr))`,
+    //xlTo2xl: "repeat(3, minmax(295px, 1fr))",
+    base: `repeat(${columns}, minmax(295px, 1fr))`
+})
+
 export const MSComponentList = (props: ComponentListProps) => {
-    console.log('rendering component list');
+    const [value, setValue] = useLocalStorage('pref-component-columns', 0)
     const [shownType, setShownType] = useState("All");
+    const gc = useMemo(() => gridColumns(value),[value]);
     return (
         <Stack gap="3">
-            <Center>
+            <Flex justify="space-between" alignItems="end" mdDown={{alignItems: 'center', justifyContent: 'center'}}>
                 <SegmentGroup.Root value={shownType} onValueChange={(val) => setShownType(val.value)}>
                     <SegmentGroup.Indicator />
                     <SegmentGroup.Items items={["All", "Sources", "Clients"]} />
                 </SegmentGroup.Root>
-            </Center>
-            <Stack>
+            <Box hideBelow="md">
+                <Field.Root>
+                    <Field.Label><TextMuted>Grid Max Width</TextMuted></Field.Label>
+                    <SegmentGroup.Root value={value.toString()} onValueChange={(val) => setValue(Number.parseInt(val.value))}>
+                            <SegmentGroup.Indicator />
+                                <SegmentGroup.Item key="list" value="1">
+                                <SegmentGroup.ItemText>1</SegmentGroup.ItemText>
+                                <SegmentGroup.ItemHiddenInput />
+                            </SegmentGroup.Item>
+                            <SegmentGroup.Indicator />
+                                <SegmentGroup.Item key="2" value="2">
+                                <SegmentGroup.ItemText>2</SegmentGroup.ItemText>
+                                <SegmentGroup.ItemHiddenInput />
+                            </SegmentGroup.Item>
+                            <SegmentGroup.Indicator />
+                                <SegmentGroup.Item key="3" value="3">
+                                <SegmentGroup.ItemText>3</SegmentGroup.ItemText>
+                                <SegmentGroup.ItemHiddenInput />
+                            </SegmentGroup.Item>
+                        </SegmentGroup.Root>
+                </Field.Root>
+            </Box>
+            </Flex>
+            <Box gridColumnGap="2" gridRowGap="2" display="grid" gridTemplateColumns={gc}>
                 {props.components.filter(x => {
                     if (shownType === 'All') {
                         return true;
@@ -33,7 +65,7 @@ export const MSComponentList = (props: ComponentListProps) => {
                     }
                     return x.mode === 'client';
                 }).map(x => props.fetchable ? <MSErrorBoundary><MSComponentSummaryFetchable key={x.id} componentId={x.id} data={x}/></MSErrorBoundary> : <MSComponentSummary data={x} key={x.uid} />)}
-            </Stack>
+            </Box>
         </Stack>
     )
 }
diff --git a/src/stories/pages/ComponentList.stories.tsx b/src/stories/pages/ComponentList.stories.tsx
index c117b005..3f31fff4 100644
--- a/src/stories/pages/ComponentList.stories.tsx
+++ b/src/stories/pages/ComponentList.stories.tsx
@@ -46,7 +46,7 @@ const meta = preview.meta({
     },
 decorators: [
     withRouter,
-    (Story) => (<Provider><Container maxWidth="4xl"><SSEProvider<MsSseEvent> options={sseProviderOptions}><Story/></SSEProvider></Container></Provider>),
+    (Story) => (<Provider><Container maxWidth="8xl"><SSEProvider<MsSseEvent> options={sseProviderOptions}><Story/></SSEProvider></Container></Provider>),
   ]
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
 });