diff --git a/app/components/ui/FlagSvg.tsx b/app/components/ui/FlagSvg.tsx
index eafa649..75fb263 100644
--- a/app/components/ui/FlagSvg.tsx
+++ b/app/components/ui/FlagSvg.tsx
@@ -1,5 +1,5 @@
 import { cn } from "~/lib/utils";
-import type { FlagConfig } from "~/lib/flag-types";
+import { parseFlagConfig, type FlagConfig } from "~/lib/flag-types";
 
 interface FlagSvgProps {
   config: FlagConfig;
@@ -8,8 +8,11 @@ interface FlagSvgProps {
   title?: string;
 }
 
+const FALLBACK_FLAG: FlagConfig = { pattern: "triband-h", colors: ["#9ca3af", "#6b7280", "#4b5563"] };
+
 export function FlagSvg({ config, size = 48, className, title }: FlagSvgProps) {
-  const [c0 = "", c1 = "", c2 = ""] = config.colors;
+  const safeConfig = parseFlagConfig(config) ?? FALLBACK_FLAG;
+  const [c0, c1, c2] = safeConfig.colors;
 
   return (
     <svg
@@ -21,28 +24,28 @@ export function FlagSvg({ config, size = 48, className, title }: FlagSvgProps) {
       className={cn("block shrink-0 overflow-hidden", className)}
     >
       {title ? <title>{title}</title> : null}
-      {config.pattern === "triband-h" && (
+      {safeConfig.pattern === "triband-h" && (
         <>
           <rect width="100" height="34" fill={c0} />
           <rect y="33" width="100" height="34" fill={c1} />
           <rect y="66" width="100" height="34" fill={c2} />
         </>
       )}
-      {config.pattern === "triband-v" && (
+      {safeConfig.pattern === "triband-v" && (
         <>
           <rect width="34" height="100" fill={c0} />
           <rect x="33" width="34" height="100" fill={c1} />
           <rect x="66" width="34" height="100" fill={c2} />
         </>
       )}
-      {config.pattern === "diagonal" && (
+      {safeConfig.pattern === "diagonal" && (
         <>
           <rect width="100" height="100" fill={c0} />
           <polygon points="0,0 100,0 0,100" fill={c1} />
           <polygon points="100,100 100,28 28,100" fill={c2} />
         </>
       )}
-      {config.pattern === "nordic-cross" && (
+      {safeConfig.pattern === "nordic-cross" && (
         <>
           <rect width="100" height="100" fill={c0} />
           <rect x="30" width="18" height="100" fill={c1} />
@@ -51,7 +54,7 @@ export function FlagSvg({ config, size = 48, className, title }: FlagSvgProps) {
           <rect y="46" width="100" height="6" fill={c2} />
         </>
       )}
-      {config.pattern === "cross" && (
+      {safeConfig.pattern === "cross" && (
         <>
           <rect width="100" height="100" fill={c0} />
           <rect x="40" width="20" height="100" fill={c1} />
@@ -60,28 +63,28 @@ export function FlagSvg({ config, size = 48, className, title }: FlagSvgProps) {
           <rect y="46" width="100" height="8" fill={c2} />
         </>
       )}
-      {config.pattern === "canton" && (
+      {safeConfig.pattern === "canton" && (
         <>
           <rect width="100" height="100" fill={c0} />
           <rect width="50" height="50" fill={c1} />
           <rect x="12" y="12" width="26" height="26" fill={c2} />
         </>
       )}
-      {config.pattern === "triangle" && (
+      {safeConfig.pattern === "triangle" && (
         <>
           <rect width="100" height="100" fill={c0} />
           <polygon points="0,0 64,50 0,100" fill={c1} />
           <polygon points="0,22 36,50 0,78" fill={c2} />
         </>
       )}
-      {config.pattern === "chevron" && (
+      {safeConfig.pattern === "chevron" && (
         <>
           <rect width="100" height="100" fill={c0} />
           <polygon points="0,0 56,50 0,100 28,100 84,50 28,0" fill={c1} />
           <polygon points="0,22 32,50 0,78 0,62 14,50 0,38" fill={c2} />
         </>
       )}
-      {config.pattern === "quartered" && (
+      {safeConfig.pattern === "quartered" && (
         <>
           <rect width="50" height="50" fill={c0} />
           <rect x="50" width="50" height="50" fill={c1} />
@@ -89,21 +92,21 @@ export function FlagSvg({ config, size = 48, className, title }: FlagSvgProps) {
           <rect x="50" y="50" width="50" height="50" fill={c2} />
         </>
       )}
-      {config.pattern === "bordered" && (
+      {safeConfig.pattern === "bordered" && (
         <>
           <rect width="100" height="100" fill={c0} />
           <rect x="12" y="12" width="76" height="76" fill={c1} />
           <rect x="24" y="24" width="52" height="52" fill={c2} />
         </>
       )}
-      {config.pattern === "circle" && (
+      {safeConfig.pattern === "circle" && (
         <>
           <rect width="100" height="100" fill={c0} />
           <circle cx="50" cy="50" r="30" fill={c1} />
           <circle cx="50" cy="50" r="15" fill={c2} />
         </>
       )}
-      {config.pattern === "star" && (
+      {safeConfig.pattern === "star" && (
         <>
           <rect width="100" height="100" fill={c0} />
           <polygon
diff --git a/app/lib/auth.server.ts b/app/lib/auth.server.ts
index 325e683..dc7aa97 100644
--- a/app/lib/auth.server.ts
+++ b/app/lib/auth.server.ts
@@ -32,11 +32,13 @@ export const auth = betterAuth({
   databaseHooks: {
     user: {
       create: {
-        after: async (user) => {
-          await db
-            .update(schema.users)
-            .set({ flagConfig: generateFlagConfig(user.id) })
-            .where(eq(schema.users.id, user.id));
+        before: async (data) => {
+          return {
+            data: {
+              ...data,
+              flagConfig: generateFlagConfig(data.id),
+            } as typeof data,
+          };
         },
       },
       update: {
@@ -63,7 +65,7 @@ export const auth = betterAuth({
   },
   advanced: {
     database: {
-      generateId: false,
+      generateId: () => crypto.randomUUID(),
     },
   },
   user: {