diff --git a/website/src/repl/components/panel/PatternsTab.jsx b/website/src/repl/components/panel/PatternsTab.jsx
index df6075eb..fd9ddb15 100644
--- a/website/src/repl/components/panel/PatternsTab.jsx
+++ b/website/src/repl/components/panel/PatternsTab.jsx
@@ -84,82 +84,72 @@ function ActionButton({ children, onClick, label, labelIsHidden }) {
   );
 }
 
-export function PatternsTab({ context }) {
+const updateCodeWindow = (context, patternData, reset = false) => {
+  context.handleUpdate(patternData, reset);
+};
+
+const autoResetPatternOnChange = !isUdels();
+
+function UserPatterns({ context }) {
   const activePattern = useActivePattern();
   const viewingPatternStore = useViewingPatternData();
   const viewingPatternData = parseJSON(viewingPatternStore);
-
   const { userPatterns, patternFilter } = useSettings();
-
-  const examplePatterns = useExamplePatterns();
-  const collections = examplePatterns.collections;
-
-  const updateCodeWindow = (patternData, reset = false) => {
-    context.handleUpdate(patternData, reset);
-  };
   const viewingPatternID = viewingPatternData?.id;
-
-  const autoResetPatternOnChange = !isUdels();
-
   return (
-    <div className="px-4 w-full dark:text-white text-stone-900 space-y-2  flex flex-col overflow-hidden max-h-full h-full">
-      <ButtonGroup
-        value={patternFilter}
-        onChange={(value) => settingsMap.setKey('patternFilter', value)}
-        items={patternFilterName}
-      ></ButtonGroup>
-      {patternFilter === patternFilterName.user && (
-        <div>
-          <div className="pr-4 space-x-4 border-b border-foreground flex max-w-full overflow-x-auto">
-            <ActionButton
-              label="new"
-              onClick={() => {
-                const { data } = userPattern.createAndAddToDB();
-                updateCodeWindow(data);
-              }}
-            />
-            <ActionButton
-              label="duplicate"
-              onClick={() => {
-                const { data } = userPattern.duplicate(viewingPatternData);
-                updateCodeWindow(data);
-              }}
-            />
-            <ActionButton
-              label="delete"
-              onClick={() => {
-                const { data } = userPattern.delete(viewingPatternID);
-                updateCodeWindow({ ...data, collection: userPattern.collection });
-              }}
-            />
-            <label className="hover:opacity-50 cursor-pointer">
-              <input
-                style={{ display: 'none' }}
-                type="file"
-                multiple
-                accept="text/plain,application/json"
-                onChange={(e) => importPatterns(e.target.files)}
-              />
-              import
-            </label>
-            <ActionButton label="export" onClick={exportPatterns} />
+    <div className="flex flex-col flex-grow overflow-clip h-full">
+      <div className="pr-4 space-x-4 border-b border-foreground flex max-w-full overflow-x-auto">
+        <ActionButton
+          label="new"
+          onClick={() => {
+            const { data } = userPattern.createAndAddToDB();
+            updateCodeWindow(context, data);
+          }}
+        />
+        <ActionButton
+          label="duplicate"
+          onClick={() => {
+            const { data } = userPattern.duplicate(viewingPatternData);
+            updateCodeWindow(context, data);
+          }}
+        />
+        <ActionButton
+          label="delete"
+          onClick={() => {
+            const { data } = userPattern.delete(viewingPatternID);
+            updateCodeWindow(context, { ...data, collection: userPattern.collection });
+          }}
+        />
+        <label className="hover:opacity-50 cursor-pointer">
+          <input
+            style={{ display: 'none' }}
+            type="file"
+            multiple
+            accept="text/plain,application/json"
+            onChange={(e) => importPatterns(e.target.files)}
+          />
+          import
+        </label>
+        <ActionButton label="export" onClick={exportPatterns} />
 
-            <ActionButton
-              label="delete-all"
-              onClick={() => {
-                const { data } = userPattern.clearAll();
-                updateCodeWindow(data);
-              }}
-            />
-          </div>
-        </div>
-      )}
+        <ActionButton
+          label="delete-all"
+          onClick={() => {
+            const { data } = userPattern.clearAll();
+            updateCodeWindow(context, data);
+          }}
+        />
+      </div>
 
-      <section className="flex overflow-y-auto max-h-full flex-grow flex-col">
+      <div className="overflow-auto h-full">
         {patternFilter === patternFilterName.user && (
           <PatternButtons
             onClick={(id) =>
-              updateCodeWindow({ ...userPatterns[id], collection: userPattern.collection }, autoResetPatternOnChange)
+              updateCodeWindow(
+                context,
+                { ...userPatterns[id], collection: userPattern.collection },
+                autoResetPatternOnChange,
+              )
             }
             patterns={userPatterns}
             started={context.started}
@@ -167,24 +157,47 @@ export function PatternsTab({ context }) {
             viewingPatternID={viewingPatternID}
           />
         )}
-        {patternFilter !== patternFilterName.user &&
-          Array.from(collections.keys()).map((collection) => {
-            const patterns = collections.get(collection);
-            return (
-              <section key={collection} className="py-2">
-                <h2 className="text-xl mb-2">{collection}</h2>
-                <div className="font-mono text-sm">
-                  <PatternButtons
-                    onClick={(id) => updateCodeWindow({ ...patterns[id], collection }, autoResetPatternOnChange)}
-                    started={context.started}
-                    patterns={patterns}
-                    activePattern={activePattern}
-                  />
-                </div>
-              </section>
-            );
-          })}
-      </section>
+      </div>
+    </div>
+  );
+}
+
+function PublicPatterns({ context }) {
+  const activePattern = useActivePattern();
+  const examplePatterns = useExamplePatterns();
+  const collections = examplePatterns.collections;
+  const { patternFilter } = useSettings();
+  const patterns = collections.get(patternFilter) ?? collections.get(patternFilterName.public);
+  return (
+    <div className="overflow-auto flex flex-col flex-grow">
+      <PatternButtons
+        onClick={(id) =>
+          updateCodeWindow(context, { ...patterns[id], collection: patternFilter }, autoResetPatternOnChange)
+        }
+        started={context.started}
+        patterns={patterns}
+        activePattern={activePattern}
+      />
+    </div>
+  );
+}
+
+export function PatternsTab({ context }) {
+  const { patternFilter } = useSettings();
+
+  return (
+    <div className="px-4 w-full text-white  space-y-2  flex flex-col overflow-hidden max-h-full h-full">
+      <ButtonGroup
+        value={patternFilter}
+        onChange={(value) => settingsMap.setKey('patternFilter', value)}
+        items={patternFilterName}
+      ></ButtonGroup>
+
+      {patternFilter === patternFilterName.user ? (
+        <UserPatterns context={context} />
+      ) : (
+        <PublicPatterns context={context} />
+      )}
     </div>
   );
 }
diff --git a/website/src/repl/useExamplePatterns.jsx b/website/src/repl/useExamplePatterns.jsx
index 08629d44..2e11fcae 100644
--- a/website/src/repl/useExamplePatterns.jsx
+++ b/website/src/repl/useExamplePatterns.jsx
@@ -1,4 +1,4 @@
-import { $featuredPatterns, $publicPatterns, collectionName } from '../user_pattern_utils.mjs';
+import { $featuredPatterns, $publicPatterns,  patternFilterName } from '../user_pattern_utils.mjs';
 import { useStore } from '@nanostores/react';
 import { useMemo } from 'react';
 import * as tunes from '../repl/tunes.mjs';
@@ -12,9 +12,9 @@ export const useExamplePatterns = () => {
   const publicPatterns = useStore($publicPatterns);
   const collections = useMemo(() => {
     const pats = new Map();
-    pats.set(collectionName.featured, featuredPatterns);
-    pats.set(collectionName.public, publicPatterns);
-    // pats.set(collectionName.stock, stockPatterns);
+    pats.set(patternFilterName.featured, featuredPatterns);
+    pats.set(patternFilterName.public, publicPatterns);
+    // pats.set(patternFilterName.stock, stockPatterns);
     return pats;
   }, [featuredPatterns, publicPatterns]);
 
diff --git a/website/src/user_pattern_utils.mjs b/website/src/user_pattern_utils.mjs
index 866491d0..d87fbff4 100644
--- a/website/src/user_pattern_utils.mjs
+++ b/website/src/user_pattern_utils.mjs
@@ -8,16 +8,13 @@ import { confirmDialog, parseJSON, supabase } from './repl/util.mjs';
 export let $publicPatterns = atom([]);
 export let $featuredPatterns = atom([]);
 
-export const collectionName = {
-  user: 'user',
-  public: 'Last Creations',
-  stock: 'Stock Examples',
-  featured: 'Featured',
-};
+
 
 export const patternFilterName = {
-  community: 'community',
+  public: 'latest',
+  featured: 'featured',
   user: 'user',
+  // stock: 'stock examples',
 };
 
 const sessionAtom = (name, initial = undefined) => {
@@ -36,7 +33,7 @@ const sessionAtom = (name, initial = undefined) => {
 export let $viewingPatternData = sessionAtom('viewingPatternData', {
   id: '',
   code: '',
-  collection: collectionName.user,
+  collection: patternFilterName.user,
   created_at: Date.now(),
 });
 
@@ -52,11 +49,11 @@ export const setViewingPatternData = (data) => {
 };
 
 export function loadPublicPatterns() {
-  return supabase.from('code_v1').select().eq('public', true).limit(20).order('id', { ascending: false });
+  return supabase.from('code_v1').select().eq('public', true).limit(40).order('id', { ascending: false });
 }
 
 export function loadFeaturedPatterns() {
-  return supabase.from('code_v1').select().eq('featured', true).limit(20).order('id', { ascending: false });
+  return supabase.from('code_v1').select().eq('featured', true).limit(40).order('id', { ascending: false });
 }
 
 export async function loadDBPatterns() {
@@ -92,7 +89,7 @@ export const setLatestCode = (code) => settingsMap.setKey('latestCode', code);
 
 const defaultCode = '';
 export const userPattern = {
-  collection: collectionName.user,
+  collection: patternFilterName.user,
   getAll() {
     const patterns = parseJSON(settingsMap.get().userPatterns);
     return patterns ?? {};