diff --git a/ui/dist/index.html b/ui/dist/index.html
index c1f0141d4..16fa094c6 100644
--- a/ui/dist/index.html
+++ b/ui/dist/index.html
@@ -2,14 +2,25 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="/.pomerium/favicon.ico?v=2" />
+    <link id="favicon" rel="shortcut icon" href="/.pomerium/favicon.ico?v=2" />
     <link
+      class="pomerium_favicon"
       rel="apple-touch-icon"
       sizes="180x180"
       href="/.pomerium/apple-touch-icon.png"
     />
-    <link rel="icon" sizes="32x32" href="/.pomerium/favicon-32x32.png" />
-    <link rel="icon" sizes="16x16" href="/.pomerium/favicon-16x16.png" />
+    <link
+      class="pomerium_favicon"
+      rel="icon"
+      sizes="32x32"
+      href="/.pomerium/favicon-32x32.png"
+    />
+    <link
+      class="pomerium_favicon"
+      rel="icon"
+      sizes="16x16"
+      href="/.pomerium/favicon-16x16.png"
+    />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 179cbdc57..56851e5b2 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -1,7 +1,7 @@
 import Box from "@mui/material/Box";
 import CssBaseline from "@mui/material/CssBaseline";
 import { ThemeProvider } from "@mui/material/styles";
-import React, { FC } from "react";
+import React, {FC, useLayoutEffect} from "react";
 
 import ErrorPage from "./components/ErrorPage";
 import Footer from "./components/Footer";
@@ -12,12 +12,13 @@ import UserInfoPage from "./components/UserInfoPage";
 import WebAuthnRegistrationPage from "./components/WebAuthnRegistrationPage";
 import { SubpageContextProvider } from "./context/Subpage";
 import { createTheme } from "./theme";
-import { PageData, UserInfoPageData } from "./types";
-
-const theme = createTheme();
+import { PageData } from "./types";
 
 const App: FC = () => {
   const data = (window["POMERIUM_DATA"] || {}) as PageData;
+  const primary = data?.primaryColor || "#6F43E7";
+  const secondary = data?.secondaryColor || "#49AAA1";
+  const theme = createTheme(primary, secondary);
   let body: React.ReactNode = <></>;
   switch (data?.page) {
     case "Error":
@@ -34,6 +35,22 @@ const App: FC = () => {
       body = <WebAuthnRegistrationPage data={data} />;
       break;
   }
+
+  useLayoutEffect(() => {
+    const favicon = document.getElementById(
+      'favicon'
+    ) as HTMLAnchorElement | null;
+    if (favicon) {
+      favicon.href = data?.faviconUrl || '/.pomerium/favicon.ico';
+    }
+    const extraFaviconLinks = document.getElementsByClassName(
+      'pomerium_favicon'
+    ) as HTMLCollectionOf<HTMLAnchorElement> | null;
+    for (const link of extraFaviconLinks) {
+      link.style.display = data?.faviconUrl ? 'none' : '';
+    }
+  }, [])
+
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
index 05f257bdf..d9e33570e 100644
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header.tsx
@@ -18,6 +18,7 @@ import styled from "@mui/material/styles/styled";
 import { get } from "lodash";
 import React, { FC, useState } from "react";
 import { ChevronLeft, ChevronRight, Menu as MenuIcon } from "react-feather";
+import LogoURL from "../static/logo_white.svg";
 
 const DrawerHeader = styled("div")(({ theme }) => ({
   display: "flex",
@@ -108,7 +109,7 @@ const Header: FC<HeaderProps> = ({ includeSidebar, data }) => {
           </>
         ) : (
           <a href="/.pomerium">
-            <Logo />
+            <Logo src={ data?.logoUrl || LogoURL }/>
           </a>
         )}
         <Box flexGrow={1} />
diff --git a/ui/src/components/Logo.tsx b/ui/src/components/Logo.tsx
index 55528cb85..295c851e9 100644
--- a/ui/src/components/Logo.tsx
+++ b/ui/src/components/Logo.tsx
@@ -1,9 +1,8 @@
-import LogoURL from "../static/logo_white.svg";
 import React from "react";
 import type { FC } from "react";
 
-const Logo: FC = () => {
-  return <img alt="Logo" src={LogoURL} height="30px" />;
+const Logo: FC<{src: string}> = ({src}) => {
+  return <img alt="Logo" src={src} height="30px" />;
 };
 
 export default Logo;
diff --git a/ui/src/theme/index.ts b/ui/src/theme/index.ts
index 065b9183b..9430e8488 100644
--- a/ui/src/theme/index.ts
+++ b/ui/src/theme/index.ts
@@ -6,8 +6,8 @@ import muiCreateTheme, {
   Theme as MuiTheme,
 } from "@mui/material/styles/createTheme";
 
-export const createTheme = (): MuiTheme =>
-  muiCreateTheme({
+export const createTheme = (primaryColor: string, secondaryColor: string): MuiTheme => {
+  return  muiCreateTheme({
     components: {
       MuiBackdrop: {
         styleOverrides: {
@@ -109,10 +109,10 @@ export const createTheme = (): MuiTheme =>
         paper: common.white,
       },
       primary: {
-        main: "#6F43E7",
+        main: primaryColor,
       },
       secondary: {
-        main: "#49AAA1",
+        main: secondaryColor,
       },
     },
     shadows: softShadows,
@@ -159,3 +159,4 @@ export const createTheme = (): MuiTheme =>
       },
     },
   });
+}
diff --git a/ui/src/types/index.ts b/ui/src/types/index.ts
index 6f7f5ec94..a8bf7543a 100644
--- a/ui/src/types/index.ts
+++ b/ui/src/types/index.ts
@@ -81,6 +81,10 @@ export type WebAuthnRequestOptions = {
 
 type BasePageData = {
   csrfToken?: string;
+  primaryColor?: string;
+  secondaryColor?: string;
+  logoUrl?: string;
+  faviconUrl?: string;
 };
 
 export type ErrorPageData = BasePageData & {
