diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 459dc87..4636d2d 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -62,6 +62,8 @@ jobs:
                     - ui
                     - bot
         steps:
+            - uses: actions/checkout@master
+
             - uses: actions/cache@v2
               with:
                   path: /tmp/.buildx-cache
diff --git a/.storybook/main.js b/.storybook/main.js
index 71d8b6e..d83dd97 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const { NormalModuleReplacementPlugin } = require('webpack');
 
 module.exports = {
     stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -11,6 +12,11 @@ module.exports = {
             }),
         ];
 
+        config.resolve.alias['next/link'] = path.resolve(
+            __dirname,
+            'mocks/next_link.tsx'
+        );
+
         return config;
     },
     typescript: {
diff --git a/.storybook/mocks/next_link.tsx b/.storybook/mocks/next_link.tsx
new file mode 100644
index 0000000..b921931
--- /dev/null
+++ b/.storybook/mocks/next_link.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+type Props = {
+    children: React.ReactNode;
+};
+const Link = (props: Props) => <>{props.children}</>;
+
+export default Link;
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 96be966..47fe61a 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -31,6 +31,7 @@ As for infrastructure:
 
 - CI/CD process deploys all pieces.
 - Discord Bot is deployed on a Google Cloud VM
-- UI & Backend is deployed via a Cloudflare Worker
+- Backend is deployed via a Cloudflare Worker
+- UI is deployed via Google Cloud Run
 
 Biggest thing to note: this "discord bot" is an optional piece of the system, and should always remain as such. Giving it responsibility has actual engineering and dollar cost.
diff --git a/src/common/types/storyData.ts b/src/common/types/storyData.ts
index e0c0fbb..921af82 100644
--- a/src/common/types/storyData.ts
+++ b/src/common/types/storyData.ts
@@ -10,6 +10,7 @@ import {
     RoleSafety,
     RoleypolyUser,
     CategoryType,
+    GuildSlug,
 } from '.';
 
 export const roleCategory: Role[] = [
@@ -139,9 +140,8 @@ export const roleWikiData = {
 
 export const guild: Guild = {
     name: 'emoji megaporium',
-    id: 'aaa',
-    icon:
-        'https://cdn.discordapp.com/icons/421896162539470888/3372fd895ed913b55616c5e49cd50e60.png?size=256',
+    id: '421896162539470888',
+    icon: '3372fd895ed913b55616c5e49cd50e60',
     ownerid: 'bbb',
     membercount: 23453,
     splash: '',
@@ -151,9 +151,8 @@ export const guildMap: { [x: string]: Guild } = {
     'emoji megaporium': guild,
     Roleypoly: {
         name: 'Roleypoly',
-        id: 'aaa',
-        icon:
-            'https://cdn.discordapp.com/icons/203493697696956418/ff08d36f5aee1ff48f8377b65d031ab0.png?size=256',
+        id: '203493697696956418',
+        icon: 'ff08d36f5aee1ff48f8377b65d031ab0',
         ownerid: 'bbb',
         membercount: 23453,
         splash: '',
@@ -168,9 +167,8 @@ export const guildMap: { [x: string]: Guild } = {
     },
     Eclipse: {
         name: 'Eclipse',
-        id: 'aaa',
-        icon:
-            'https://cdn.discordapp.com/icons/408821059161423873/49dfdd8b2456e2977e80a8b577b19c0d.png?size=256',
+        id: '408821059161423873',
+        icon: '49dfdd8b2456e2977e80a8b577b19c0d',
         ownerid: 'bbb',
         membercount: 23453,
         splash: '',
@@ -185,11 +183,10 @@ export const guildData: GuildData = {
 };
 
 export const user: DiscordUser = {
-    id: '123',
-    username: 'okano cat',
-    discriminator: '3266',
-    avatar:
-        'https://cdn.discordapp.com/avatars/62601275618889728/b1292bb974557337702cb941fc038085.png',
+    id: '62601275618889728',
+    username: 'okano',
+    discriminator: '0001',
+    avatar: 'ca2028bab0fe30e1af4392f3fa3576e2',
     bot: false,
 };
 
@@ -239,3 +236,12 @@ export const guildEnum: GuildEnumeration = {
         },
     ],
 };
+
+export const mastheadSlugs: GuildSlug[] = guildEnum.guildsList.map<GuildSlug>(
+    (guild, idx) => ({
+        id: guild.guild.id,
+        name: guild.guild.name,
+        icon: guild.guild.icon,
+        permissionLevel: idx % 3,
+    })
+);
diff --git a/src/design-system/atoms/avatar/avatarUtils.tsx b/src/design-system/atoms/avatar/avatarUtils.tsx
index 40cf47e..97318ca 100644
--- a/src/design-system/atoms/avatar/avatarUtils.tsx
+++ b/src/design-system/atoms/avatar/avatarUtils.tsx
@@ -1,10 +1,16 @@
 export const initialsFromName = (name: string) =>
-    name
-        .split(' ')
-        .slice(0, 2)
-        .map((x) => x[0])
-        .join('')
-        .toUpperCase();
+    !!name
+        ? name
+              .split(' ')
+              .slice(0, 2)
+              .map((x) => x[0])
+              .join('')
+              .toUpperCase()
+        : '';
 
-export const avatarHash = (id: string, hash: string) =>
-    `https://cdn.discordapp.com/icons/${id}/${hash}.webp?size=256`;
+export const avatarHash = (
+    id: string,
+    hash: string,
+    bucket: 'icons' | 'avatars' = 'icons',
+    size: number = 256
+) => `https://cdn.discordapp.com/${bucket}/${id}/${hash}.webp?size=${size}`;
diff --git a/src/design-system/atoms/branding/DynamicBranding.tsx b/src/design-system/atoms/branding/DynamicBranding.tsx
index 354e0ee..82a9d4c 100644
--- a/src/design-system/atoms/branding/DynamicBranding.tsx
+++ b/src/design-system/atoms/branding/DynamicBranding.tsx
@@ -276,7 +276,7 @@ export const BicycleDay: Variant = {
 export const Christmas: Variant = {
     // Dec 20-27
     activeIf: (currentDate?: Date) =>
-        true || matchDay(new Date('2021-Dec-20'), new Date('2021-Dec-28'), currentDate),
+        matchDay(new Date('2021-Dec-20'), new Date('2021-Dec-28'), currentDate),
     sharedProps: {
         circleFill: palette.green200,
         circleOuterFill: palette.red200,
diff --git a/src/design-system/molecules/server-masthead/ServerMasthead.tsx b/src/design-system/molecules/server-masthead/ServerMasthead.tsx
index 619786c..30d8dc6 100644
--- a/src/design-system/molecules/server-masthead/ServerMasthead.tsx
+++ b/src/design-system/molecules/server-masthead/ServerMasthead.tsx
@@ -16,7 +16,10 @@ export const ServerMasthead = (props: ServerMastheadProps) => {
     return (
         <Wrapper>
             <Icon>
-                <Avatar size={props.editable ? 60 : 48} src={guild.icon}>
+                <Avatar
+                    size={props.editable ? 60 : 48}
+                    src={utils.avatarHash(guild.id, guild.icon, 'icons', 512)}
+                >
                     {utils.initialsFromName(props.guild.name)}
                 </Avatar>
             </Icon>
diff --git a/src/design-system/molecules/user-avatar-group/UserAvatarGroup.tsx b/src/design-system/molecules/user-avatar-group/UserAvatarGroup.tsx
index 64cf530..0fd48c9 100644
--- a/src/design-system/molecules/user-avatar-group/UserAvatarGroup.tsx
+++ b/src/design-system/molecules/user-avatar-group/UserAvatarGroup.tsx
@@ -17,7 +17,10 @@ export const UserAvatarGroup = (props: Props) => (
             </GroupText>
             &nbsp;
         </Collapse>
-        <Avatar size={34} src={props.user.avatar}>
+        <Avatar
+            size={34}
+            src={utils.avatarHash(props.user.id, props.user.avatar, 'avatars')}
+        >
             {utils.initialsFromName(props.user.username)}
         </Avatar>
     </Group>
diff --git a/src/design-system/organisms/masthead/Authed.tsx b/src/design-system/organisms/masthead/Authed.tsx
index d2db496..b979364 100644
--- a/src/design-system/organisms/masthead/Authed.tsx
+++ b/src/design-system/organisms/masthead/Authed.tsx
@@ -32,7 +32,7 @@ export const Authed = (props: Props) => {
         <MastheadBase>
             <MastheadAlignment>
                 <MastheadLeft>
-                    <Link href="/dashboard" passHref>
+                    <Link href="/dashboard" passHref prefetch={false}>
                         <MastheadA>
                             <DynamicLogomark height={35} />
                         </MastheadA>
@@ -75,7 +75,9 @@ export const Authed = (props: Props) => {
                         }}
                         hide={!userPopoverState}
                     >
-                        {props.user && <UserAvatarGroup user={props.user} />}
+                        {props.user !== undefined && (
+                            <UserAvatarGroup user={props.user} />
+                        )}
                     </InteractionBase>
                     <Popover
                         headContent={<></>}
diff --git a/src/design-system/templates/role-picker/RolePicker.stories.tsx b/src/design-system/templates/role-picker/RolePicker.stories.tsx
index 34c0e89..a9f76e5 100644
--- a/src/design-system/templates/role-picker/RolePicker.stories.tsx
+++ b/src/design-system/templates/role-picker/RolePicker.stories.tsx
@@ -5,8 +5,9 @@ import {
     member,
     guildRoles,
     guild,
-    rpUser,
+    user,
     guildEnum,
+    mastheadSlugs,
 } from 'roleypoly/common/types/storyData';
 
 const props: RolePickerTemplateProps = {
@@ -17,9 +18,10 @@ const props: RolePickerTemplateProps = {
     },
     member: member,
     guild: guild,
+    guilds: mastheadSlugs,
     roles: guildRoles,
     editable: false,
-    user: rpUser,
+    user: user,
     guildEnumeration: guildEnum,
     activeGuildId: guild.id,
     onSubmit: () => {},