diff --git a/app/components/ui/FlagSvg.tsx b/app/components/ui/FlagSvg.tsx
index d47b92b..eafa649 100644
--- a/app/components/ui/FlagSvg.tsx
+++ b/app/components/ui/FlagSvg.tsx
@@ -1,5 +1,4 @@
 import { cn } from "~/lib/utils";
-import { getDisplayFlagConfig } from "~/lib/avatar-data";
 import type { FlagConfig } from "~/lib/flag-types";
 
 interface FlagSvgProps {
@@ -9,16 +8,8 @@ interface FlagSvgProps {
   title?: string;
 }
 
-function colorAt(colors: string[], index: number): string {
-  return colors[index % colors.length] ?? "#adf661";
-}
-
 export function FlagSvg({ config, size = 48, className, title }: FlagSvgProps) {
-  const safeConfig = getDisplayFlagConfig(`${config.pattern}:${config.colors.join("-")}`, config);
-  const colors = safeConfig.colors;
-  const c0 = colorAt(colors, 0);
-  const c1 = colorAt(colors, 1);
-  const c2 = colorAt(colors, 2);
+  const [c0 = "", c1 = "", c2 = ""] = config.colors;
 
   return (
     <svg
@@ -30,28 +21,28 @@ export function FlagSvg({ config, size = 48, className, title }: FlagSvgProps) {
       className={cn("block shrink-0 overflow-hidden", className)}
     >
       {title ? <title>{title}</title> : null}
-      {safeConfig.pattern === "triband-h" && (
+      {config.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} />
         </>
       )}
-      {safeConfig.pattern === "triband-v" && (
+      {config.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} />
         </>
       )}
-      {safeConfig.pattern === "diagonal" && (
+      {config.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} />
         </>
       )}
-      {safeConfig.pattern === "nordic-cross" && (
+      {config.pattern === "nordic-cross" && (
         <>
           <rect width="100" height="100" fill={c0} />
           <rect x="30" width="18" height="100" fill={c1} />
@@ -60,7 +51,7 @@ export function FlagSvg({ config, size = 48, className, title }: FlagSvgProps) {
           <rect y="46" width="100" height="6" fill={c2} />
         </>
       )}
-      {safeConfig.pattern === "cross" && (
+      {config.pattern === "cross" && (
         <>
           <rect width="100" height="100" fill={c0} />
           <rect x="40" width="20" height="100" fill={c1} />
@@ -69,28 +60,28 @@ export function FlagSvg({ config, size = 48, className, title }: FlagSvgProps) {
           <rect y="46" width="100" height="8" fill={c2} />
         </>
       )}
-      {safeConfig.pattern === "canton" && (
+      {config.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} />
         </>
       )}
-      {safeConfig.pattern === "triangle" && (
+      {config.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} />
         </>
       )}
-      {safeConfig.pattern === "chevron" && (
+      {config.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} />
         </>
       )}
-      {safeConfig.pattern === "quartered" && (
+      {config.pattern === "quartered" && (
         <>
           <rect width="50" height="50" fill={c0} />
           <rect x="50" width="50" height="50" fill={c1} />
@@ -98,21 +89,21 @@ export function FlagSvg({ config, size = 48, className, title }: FlagSvgProps) {
           <rect x="50" y="50" width="50" height="50" fill={c2} />
         </>
       )}
-      {safeConfig.pattern === "bordered" && (
+      {config.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} />
         </>
       )}
-      {safeConfig.pattern === "circle" && (
+      {config.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} />
         </>
       )}
-      {safeConfig.pattern === "star" && (
+      {config.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 577bdf3..325e683 100644
--- a/app/lib/auth.server.ts
+++ b/app/lib/auth.server.ts
@@ -5,6 +5,7 @@ import bcrypt from "bcrypt";
 import { Resend } from "resend";
 import { db } from "~/server/db";
 import * as schema from "~/database/schema";
+import { generateFlagConfig } from "~/lib/flag-generator";
 
 if (!process.env.BETTER_AUTH_SECRET) {
   throw new Error("BETTER_AUTH_SECRET is required");
@@ -30,6 +31,14 @@ 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));
+        },
+      },
       update: {
         before: async (data) => {
           const incomingImage =
diff --git a/app/models/team.ts b/app/models/team.ts
index 3e5cf0e..122f6e2 100644
--- a/app/models/team.ts
+++ b/app/models/team.ts
@@ -1,19 +1,28 @@
 import { eq, and, isNull } from "drizzle-orm";
 import { database } from "~/database/context";
 import * as schema from "~/database/schema";
+import { generateFlagConfig } from "~/lib/flag-generator";
 
 export type Team = typeof schema.teams.$inferSelect;
 export type NewTeam = typeof schema.teams.$inferInsert;
 
 export async function createTeam(data: NewTeam): Promise<Team> {
   const db = database();
-  const [team] = await db.insert(schema.teams).values(data).returning();
+  const id = data.id ?? crypto.randomUUID();
+  const [team] = await db
+    .insert(schema.teams)
+    .values({ ...data, id, flagConfig: data.flagConfig ?? generateFlagConfig(id) })
+    .returning();
   return team;
 }
 
 export async function createManyTeams(teams: NewTeam[]): Promise<Team[]> {
   const db = database();
-  return await db.insert(schema.teams).values(teams).returning();
+  const withFlags = teams.map((team) => {
+    const id = team.id ?? crypto.randomUUID();
+    return { ...team, id, flagConfig: team.flagConfig ?? generateFlagConfig(id) };
+  });
+  return await db.insert(schema.teams).values(withFlags).returning();
 }
 
 export async function findTeamById(id: string): Promise<Team | undefined> {
diff --git a/app/models/user.ts b/app/models/user.ts
index 238c593..81d616f 100644
--- a/app/models/user.ts
+++ b/app/models/user.ts
@@ -1,6 +1,7 @@
 import { eq, inArray, and } from "drizzle-orm";
 import { database } from "~/database/context";
 import * as schema from "~/database/schema";
+import { generateFlagConfig } from "~/lib/flag-generator";
 
 export type User = typeof schema.users.$inferSelect;
 export type NewUser = typeof schema.users.$inferInsert;
@@ -13,7 +14,11 @@ export function getUserDisplayName(
 
 export async function createUser(data: NewUser): Promise<User> {
   const db = database();
-  const [user] = await db.insert(schema.users).values(data).returning();
+  const id = data.id ?? crypto.randomUUID();
+  const [user] = await db
+    .insert(schema.users)
+    .values({ ...data, id, flagConfig: data.flagConfig ?? generateFlagConfig(id) })
+    .returning();
   return user;
 }
 
diff --git a/scripts/backfill-flag-configs.ts b/scripts/backfill-flag-configs.ts
deleted file mode 100644
index f98df21..0000000
--- a/scripts/backfill-flag-configs.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { eq, isNull } from "drizzle-orm";
-import { db } from "~/server/db";
-import * as schema from "~/database/schema";
-import { generateFlagConfig } from "~/lib/flag-generator";
-
-async function main() {
-  const users = await db.query.users.findMany({
-    where: isNull(schema.users.flagConfig),
-  });
-  const teams = await db.query.teams.findMany({
-    where: isNull(schema.teams.flagConfig),
-  });
-
-  for (const user of users) {
-    await db
-      .update(schema.users)
-      .set({ flagConfig: generateFlagConfig(user.id), updatedAt: new Date() })
-      .where(eq(schema.users.id, user.id));
-  }
-
-  for (const team of teams) {
-    await db
-      .update(schema.teams)
-      .set({ flagConfig: generateFlagConfig(team.id), updatedAt: new Date() })
-      .where(eq(schema.teams.id, team.id));
-  }
-
-  console.log(`Backfilled ${users.length} users and ${teams.length} teams.`);
-}
-
-main()
-  .then(() => {
-    process.exit(0);
-  })
-  .catch((error) => {
-    console.error(error);
-    process.exit(1);
-  });