diff --git a/website/database.types.ts b/website/database.types.ts
new file mode 100644
index 00000000..152742b4
--- /dev/null
+++ b/website/database.types.ts
@@ -0,0 +1,120 @@
+// generated with https://supabase.com/docs/reference/javascript/typescript-support#generating-typescript-types
+export type Json = string | number | boolean | null | { [key: string]: Json | undefined } | Json[];
+
+export interface Database {
+  public: {
+    Tables: {
+      code: {
+        Row: {
+          code: string | null;
+          created_at: string | null;
+          featured: boolean | null;
+          hash: string | null;
+          id: number;
+          public: boolean | null;
+        };
+        Insert: {
+          code?: string | null;
+          created_at?: string | null;
+          featured?: boolean | null;
+          hash?: string | null;
+          id?: number;
+          public?: boolean | null;
+        };
+        Update: {
+          code?: string | null;
+          created_at?: string | null;
+          featured?: boolean | null;
+          hash?: string | null;
+          id?: number;
+          public?: boolean | null;
+        };
+        Relationships: [];
+      };
+    };
+    Views: {
+      [_ in never]: never;
+    };
+    Functions: {
+      [_ in never]: never;
+    };
+    Enums: {
+      [_ in never]: never;
+    };
+    CompositeTypes: {
+      [_ in never]: never;
+    };
+  };
+}
+
+export type Tables<
+  PublicTableNameOrOptions extends
+    | keyof (Database['public']['Tables'] & Database['public']['Views'])
+    | { schema: keyof Database },
+  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
+    ? keyof (Database[PublicTableNameOrOptions['schema']]['Tables'] &
+        Database[PublicTableNameOrOptions['schema']]['Views'])
+    : never = never,
+> = PublicTableNameOrOptions extends { schema: keyof Database }
+  ? (Database[PublicTableNameOrOptions['schema']]['Tables'] &
+      Database[PublicTableNameOrOptions['schema']]['Views'])[TableName] extends {
+      Row: infer R;
+    }
+    ? R
+    : never
+  : PublicTableNameOrOptions extends keyof (Database['public']['Tables'] & Database['public']['Views'])
+    ? (Database['public']['Tables'] & Database['public']['Views'])[PublicTableNameOrOptions] extends {
+        Row: infer R;
+      }
+      ? R
+      : never
+    : never;
+
+export type TablesInsert<
+  PublicTableNameOrOptions extends keyof Database['public']['Tables'] | { schema: keyof Database },
+  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
+    ? keyof Database[PublicTableNameOrOptions['schema']]['Tables']
+    : never = never,
+> = PublicTableNameOrOptions extends { schema: keyof Database }
+  ? Database[PublicTableNameOrOptions['schema']]['Tables'][TableName] extends {
+      Insert: infer I;
+    }
+    ? I
+    : never
+  : PublicTableNameOrOptions extends keyof Database['public']['Tables']
+    ? Database['public']['Tables'][PublicTableNameOrOptions] extends {
+        Insert: infer I;
+      }
+      ? I
+      : never
+    : never;
+
+export type TablesUpdate<
+  PublicTableNameOrOptions extends keyof Database['public']['Tables'] | { schema: keyof Database },
+  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
+    ? keyof Database[PublicTableNameOrOptions['schema']]['Tables']
+    : never = never,
+> = PublicTableNameOrOptions extends { schema: keyof Database }
+  ? Database[PublicTableNameOrOptions['schema']]['Tables'][TableName] extends {
+      Update: infer U;
+    }
+    ? U
+    : never
+  : PublicTableNameOrOptions extends keyof Database['public']['Tables']
+    ? Database['public']['Tables'][PublicTableNameOrOptions] extends {
+        Update: infer U;
+      }
+      ? U
+      : never
+    : never;
+
+export type Enums<
+  PublicEnumNameOrOptions extends keyof Database['public']['Enums'] | { schema: keyof Database },
+  EnumName extends PublicEnumNameOrOptions extends { schema: keyof Database }
+    ? keyof Database[PublicEnumNameOrOptions['schema']]['Enums']
+    : never = never,
+> = PublicEnumNameOrOptions extends { schema: keyof Database }
+  ? Database[PublicEnumNameOrOptions['schema']]['Enums'][EnumName]
+  : PublicEnumNameOrOptions extends keyof Database['public']['Enums']
+    ? Database['public']['Enums'][PublicEnumNameOrOptions]
+    : never;
diff --git a/website/src/components/SharedPatterns.tsx b/website/src/components/SharedPatterns.tsx
new file mode 100644
index 00000000..4deab67e
--- /dev/null
+++ b/website/src/components/SharedPatterns.tsx
@@ -0,0 +1,54 @@
+import { createClient } from '@supabase/supabase-js';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { Database, Tables } from '../../database.types';
+import { getMetadata } from '../metadata_parser';
+
+function PatternLink({ pattern }: { pattern: Tables<'code'> }) {
+  const meta = useMemo(() => getMetadata(pattern.code), [pattern]);
+  // console.log('meta', meta);
+  return (
+    <a href={`/?${pattern.hash}`} target="_blank">
+      {meta.title || pattern.hash} by {meta.by.join(',') || 'Anonymous'}
+    </a>
+  );
+}
+
+export function SharedPatterns() {
+  const [publicPatterns, setPublicPatterns] = useState<Tables<'code'>[] | null>([]);
+  const [featuredPatterns, setFeaturedPatterns] = useState<Tables<'code'>[] | null>([]);
+  const init = useCallback(async () => {
+    const supabase = createClient<Database>(
+      'https://pidxdsxphlhzjnzmifth.supabase.co',
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InBpZHhkc3hwaGxoempuem1pZnRoIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NTYyMzA1NTYsImV4cCI6MTk3MTgwNjU1Nn0.bqlw7802fsWRnqU5BLYtmXk_k-D1VFmbkHMywWc15NM',
+    );
+    const { data: _publicPatterns } = await supabase.from('code').select().eq('public', true).limit(20);
+    const { data: _featuredPatterns } = await supabase.from('code').select().eq('featured', true).limit(20);
+    setPublicPatterns(_publicPatterns);
+    setFeaturedPatterns(_featuredPatterns);
+    /* console.log('public', publicPatterns);
+    console.log('featured', featuredPatterns); */
+  }, []);
+  useEffect(() => {
+    init();
+  }, [useCallback]);
+  return (
+    <div>
+      <h2 className="">Featured</h2>
+      <section>
+        {featuredPatterns?.map((pattern, i) => (
+          <div key={i}>
+            <PatternLink pattern={pattern} />
+          </div>
+        ))}
+      </section>
+      <h2>Last Creations</h2>
+      <section>
+        {publicPatterns?.map((pattern, i) => (
+          <div key={i}>
+            <PatternLink pattern={pattern} />
+          </div>
+        ))}
+      </section>
+    </div>
+  );
+}
diff --git a/website/src/pages/browse.astro b/website/src/pages/browse.astro
new file mode 100644
index 00000000..3e63bf87
--- /dev/null
+++ b/website/src/pages/browse.astro
@@ -0,0 +1,14 @@
+---
+import HeadCommon from '../components/HeadCommon.astro';
+import { SharedPatterns } from '../components/SharedPatterns';
+---
+
+<head>
+  <HeadCommon />
+</head>
+<body class="bg-slate-800">
+  <div class="prose dark:prose-invert max-w-full pb-8 p-4">
+    <h1>Browse</h1>
+    <SharedPatterns client:only />
+  </div>
+</body>