diff --git a/lib/graphql/resolvers/admin.ex b/lib/graphql/resolvers/admin.ex
index 76be369bc..15878e4ca 100644
--- a/lib/graphql/resolvers/admin.ex
+++ b/lib/graphql/resolvers/admin.ex
@@ -267,7 +267,7 @@ defmodule Mobilizon.GraphQL.Resolvers.Admin do
         context: %{current_user: %User{role: role}}
       })
       when is_admin(role) do
-    with {:ok, res} <- Admin.save_settings("instance", args),
+    with {:ok, res} <- Admin.save_settings("instance", IO.inspect(args, label: "SAVE_ARGS")),
          res <-
            res
            |> Enum.map(fn {key, val} ->
@@ -309,6 +309,18 @@ defmodule Mobilizon.GraphQL.Resolvers.Admin do
     get_media_setting(parent, %{group: "instance", name: "instance_logo"}, resolution)
   end
 
+  @spec get_instance_favicon(any(), any(), Absinthe.Resolution.t()) ::
+          {:ok, Media.t() | nil} | {:error, String.t()}
+  def get_instance_favicon(parent, _args, resolution) do
+    get_media_setting(parent, %{group: "instance", name: "instance_favicon"}, resolution)
+  end
+
+  @spec get_default_picture(any(), any(), Absinthe.Resolution.t()) ::
+          {:ok, Media.t() | nil} | {:error, String.t()}
+  def get_default_picture(parent, _args, resolution) do
+    get_media_setting(parent, %{group: "instance", name: "default_picture"}, resolution)
+  end
+
   @spec update_user(any, map(), Absinthe.Resolution.t()) ::
           {:error, :invalid_argument | :user_not_found | binary | Ecto.Changeset.t()}
           | {:ok, Mobilizon.Users.User.t()}
diff --git a/lib/graphql/resolvers/config.ex b/lib/graphql/resolvers/config.ex
index 8d57bad63..f054e98b2 100644
--- a/lib/graphql/resolvers/config.ex
+++ b/lib/graphql/resolvers/config.ex
@@ -35,10 +35,20 @@ defmodule Mobilizon.GraphQL.Resolvers.Config do
   end
 
   @spec instance_logo(any(), map(), Absinthe.Resolution.t()) :: {:ok, Media.t()}
-  def instance_logo(_parent, _locale, _resolution) do
+  def instance_logo(_parent, _params, _resolution) do
     {:ok, MediaResolver.transform_media(Config.instance_logo())}
   end
 
+  @spec instance_favicon(any(), map(), Absinthe.Resolution.t()) :: {:ok, Media.t()}
+  def instance_favicon(_parent, _params, _resolution) do
+    {:ok, MediaResolver.transform_media(Config.instance_favicon())}
+  end
+
+  @spec default_picture(any(), map(), Absinthe.Resolution.t()) :: {:ok, Media.t()}
+  def default_picture(_parent, _params, _resolution) do
+    {:ok, MediaResolver.transform_media(Config.default_picture())}
+  end
+
   @spec terms(any(), map(), Absinthe.Resolution.t()) :: {:ok, map()}
   def terms(_parent, %{locale: locale}, _resolution) do
     type = Config.instance_terms_type()
@@ -107,6 +117,8 @@ defmodule Mobilizon.GraphQL.Resolvers.Config do
       slogan: Config.instance_slogan(),
       languages: Config.instance_languages(),
       instance_logo: Config.instance_logo(),
+      instance_favicon: Config.instance_favicon(),
+      default_picture: Config.default_picture(),
       anonymous: %{
         participation: %{
           allowed: Config.anonymous_participation?(),
diff --git a/lib/graphql/schema/admin.ex b/lib/graphql/schema/admin.ex
index 133e06d0e..ce2b55106 100644
--- a/lib/graphql/schema/admin.ex
+++ b/lib/graphql/schema/admin.ex
@@ -128,6 +128,14 @@ defmodule Mobilizon.GraphQL.Schema.AdminType do
       description: "The instance's logo",
       resolve: &Admin.get_instance_logo/3
     )
+    field(:instance_favicon, :media,
+      description: "The instance's favicon",
+      resolve: &Admin.get_instance_favicon/3
+    )
+    field(:default_picture, :media,
+      description: "The default picture",
+      resolve: &Admin.get_default_picture/3
+    )
 
     field(:instance_privacy_policy, :string,
       description: "The instance's privacy policy body text"
@@ -422,6 +430,14 @@ defmodule Mobilizon.GraphQL.Schema.AdminType do
         description:
           "The instance's logo, either as an object or directly the ID of an existing media"
       )
+      arg(:instance_favicon, :media_input,
+        description:
+          "The instance's favicon, either as an object or directly the ID of an existing media"
+      )
+      arg(:default_picture, :media_input,
+        description:
+          "The default picture, either as an object or directly the ID of an existing media"
+      )
 
       arg(:instance_terms, :string, description: "The instance's terms body text")
       arg(:instance_terms_type, :instance_terms_type, description: "The instance's terms type")
diff --git a/lib/graphql/schema/config.ex b/lib/graphql/schema/config.ex
index 7d4c9166e..52e5c0749 100644
--- a/lib/graphql/schema/config.ex
+++ b/lib/graphql/schema/config.ex
@@ -63,6 +63,14 @@ defmodule Mobilizon.GraphQL.Schema.ConfigType do
       resolve(&Config.instance_logo/3)
     end
 
+    field(:instance_favicon, :media, description: "The instance's favicon") do
+      resolve(&Config.instance_favicon/3)
+    end
+
+    field(:default_picture, :media, description: "The default picture") do
+      resolve(&Config.default_picture/3)
+    end
+
     field(:privacy, :privacy, description: "The instance's privacy policy") do
       arg(:locale, :string,
         default_value: "en",
diff --git a/lib/mobilizon/admin/admin.ex b/lib/mobilizon/admin/admin.ex
index 2ca501578..aadba94b4 100644
--- a/lib/mobilizon/admin/admin.ex
+++ b/lib/mobilizon/admin/admin.ex
@@ -180,7 +180,9 @@ defmodule Mobilizon.Admin do
 
   @spec save_settings(String.t(), map()) :: {:ok, any} | {:error, any}
   def save_settings(group, args) do
-    {medias, values} = Map.split(args, [:instance_logo])
+    {medias, values} = Map.split(args, [:instance_logo, :instance_favicon, :default_picture])
+    IO.inspect(medias, label: "MEDIAS")
+    IO.inspect(values, label: "VALUES")
 
     Multi.new()
     |> do_save_media_setting(group, medias)
diff --git a/lib/mobilizon/config.ex b/lib/mobilizon/config.ex
index 93b2e55f0..b39a81f09 100644
--- a/lib/mobilizon/config.ex
+++ b/lib/mobilizon/config.ex
@@ -79,17 +79,16 @@ defmodule Mobilizon.Config do
   def instance_slogan, do: config_cached_value("instance", "instance_slogan")
 
   @spec instance_logo :: Media.t() | nil
-  def instance_logo,
-    do:
-      config_cached_value(
-        "instance",
-        "instance_logo"
-      )
+  def instance_logo, do: config_cached_value( "instance", "instance_logo")
+
+  @spec instance_favicon :: Media.t() | nil
+  def instance_favicon, do: config_cached_value( "instance", "instance_favicon")
+
+  @spec default_picture :: Media.t() | nil
+  def default_picture, do: config_cached_value( "instance", "default_picture")
 
   @spec contact :: String.t() | nil
-  def contact do
-    config_cached_value("instance", "contact")
-  end
+  def contact, do: config_cached_value("instance", "contact")
 
   @spec instance_terms(String.t()) :: String.t()
   def instance_terms(locale \\ "en") do
diff --git a/schema.graphql b/schema.graphql
index 1d99f3ef0..0f947952b 100644
--- a/schema.graphql
+++ b/schema.graphql
@@ -169,6 +169,15 @@ type Config {
   "The instance's slogan"
   slogan: String
 
+  "The instance's logo"
+  instanceLogo: Media
+
+  "The instance's favicon"
+  instanceFavicon: Media
+
+  "The default picture"
+  defaultPicture: Media
+
   "The instance's contact details"
   contact: String
 
@@ -1881,6 +1890,12 @@ type RootMutationType {
     "The instance's logo"
     instanceLogo: MediaInput
 
+    "The instance's favicon"
+    instanceFavicon: MediaInput
+
+    "The default picture"
+    defaultPicture: MediaInput
+
     "The instance's terms body text"
     instanceTerms: String
 
@@ -3702,7 +3717,13 @@ type AdminSettings {
   contact: String
 
   "The instance's logo"
-  instanceLogo: MediaInput
+  instanceLogo: Media
+
+  "The instance's favicon"
+  instanceFavicon: Media
+
+  "The default picture"
+  defaultPicture: Media
 
   "The instance's terms body text"
   instanceTerms: String
diff --git a/src/components/Image/LazyImageWrapper.vue b/src/components/Image/LazyImageWrapper.vue
index b30a027ae..b6dd6c4cf 100644
--- a/src/components/Image/LazyImageWrapper.vue
+++ b/src/components/Image/LazyImageWrapper.vue
@@ -11,8 +11,11 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 import { IMedia } from "@/types/media.model";
+import { useDefaultPicture } from "@/composition/apollo/config";
 import LazyImage from "../Image/LazyImage.vue";
 
+const { defaultPicture } = useDefaultPicture();
+
 const DEFAULT_CARD_URL = "/img/mobilizon_default_card.png";
 const DEFAULT_BLURHASH = "MCHKI4El-P-U}+={R-WWoes,Iu-P=?R,xD";
 const DEFAULT_WIDTH = 630;
@@ -38,6 +41,9 @@ const props = withDefaults(
 
 const pictureOrDefault = computed(() => {
   if (props.picture === null) {
+    if (defaultPicture?.value?.url) {
+      return defaultPicture.value;
+    }
     return DEFAULT_PICTURE;
   }
   return {
diff --git a/src/composition/apollo/config.ts b/src/composition/apollo/config.ts
index 3b1f9040c..910bb92cf 100644
--- a/src/composition/apollo/config.ts
+++ b/src/composition/apollo/config.ts
@@ -4,11 +4,13 @@ import {
   ANONYMOUS_ACTOR_ID,
   ANONYMOUS_PARTICIPATION_CONFIG,
   ANONYMOUS_REPORTS_CONFIG,
+  DEFAULT_PICTURE,
   DEMO_MODE,
   EVENT_CATEGORIES,
   EVENT_PARTICIPANTS,
   FEATURES,
   GEOCODING_AUTOCOMPLETE,
+  INSTANCE_FAVICON,
   INSTANCE_LOGO,
   LOCATION,
   MAPS_TILES,
@@ -80,9 +82,7 @@ export function useInstanceName() {
 export function useInstanceLogoUrl() {
   const { result, error, loading } = useQuery<{
     config: Pick<IConfig, "instanceLogo">;
-  }>(INSTANCE_LOGO, {
-    fetchPolicy: 'network-only',
-  });
+  }>(INSTANCE_LOGO);
 
   const instanceLogoUrl = computed(
     () => result.value?.config?.instanceLogo?.url
@@ -90,6 +90,28 @@ export function useInstanceLogoUrl() {
   return { instanceLogoUrl, error, loading };
 }
 
+export function useInstanceFaviconUrl() {
+  const { result, error, loading } = useQuery<{
+    config: Pick<IConfig, "instanceFavicon">;
+  }>(INSTANCE_FAVICON);
+
+  const instanceFaviconUrl = computed(
+    () => result.value?.config?.instanceFavicon?.url
+  );
+  return { instanceFaviconUrl, error, loading };
+}
+
+export function useDefaultPicture() {
+  const { result, error, loading } = useQuery<{
+    config: Pick<IConfig, "defaultPicture">;
+  }>(DEFAULT_PICTURE);
+
+  const defaultPicture = computed(
+    () => result.value?.config?.defaultPicture
+  );
+  return { defaultPicture, error, loading };
+}
+
 export function useAnonymousActorId() {
   const { result, error, loading } = useQuery<{
     config: Pick<IConfig, "anonymous">;
diff --git a/src/graphql/admin.ts b/src/graphql/admin.ts
index 0f6061c64..7a722b9f1 100644
--- a/src/graphql/admin.ts
+++ b/src/graphql/admin.ts
@@ -200,6 +200,16 @@ export const ADMIN_SETTINGS_FRAGMENT = gql`
       url
       name
     }
+    instanceFavicon {
+      id
+      url
+      name
+    }
+    defaultPicture {
+      id
+      url
+      name
+    }
     instanceTerms
     instanceTermsType
     instanceTermsUrl
@@ -229,6 +239,8 @@ export const SAVE_ADMIN_SETTINGS = gql`
     $instanceSlogan: String
     $contact: String
     $instanceLogo: MediaInput
+    $instanceFavicon: MediaInput
+    $defaultPicture: MediaInput
     $instanceTerms: String
     $instanceTermsType: InstanceTermsType
     $instanceTermsUrl: String
@@ -246,6 +258,8 @@ export const SAVE_ADMIN_SETTINGS = gql`
       instanceSlogan: $instanceSlogan
       contact: $contact
       instanceLogo: $instanceLogo
+      instanceFavicon: $instanceFavicon
+      defaultPicture: $defaultPicture
       instanceTerms: $instanceTerms
       instanceTermsType: $instanceTermsType
       instanceTermsUrl: $instanceTermsUrl
diff --git a/src/graphql/config.ts b/src/graphql/config.ts
index 916cabb90..d156446ae 100644
--- a/src/graphql/config.ts
+++ b/src/graphql/config.ts
@@ -15,6 +15,19 @@ export const CONFIG = gql`
       instanceLogo {
         url
       }
+      instanceFavicon {
+        url
+      }
+      defaultPicture {
+        id
+        url
+        name
+        metadata {
+          width
+          height
+          blurhash
+        }
+      }
       eventCategories {
         id
         label
@@ -169,9 +182,6 @@ export const ABOUT = gql`
   query About {
     config {
       name
-      instanceLogo {
-        url
-      }
       description
       longDescription
       slogan
@@ -470,6 +480,33 @@ export const INSTANCE_LOGO = gql`
   }
 `;
 
+export const INSTANCE_FAVICON = gql`
+  query InstanceFavicon {
+    config {
+      instanceFavicon {
+        url
+      }
+    }
+  }
+`;
+
+export const DEFAULT_PICTURE = gql`
+  query DefaultPicture {
+    config {
+      defaultPicture {
+        id
+        url
+        name
+        metadata {
+          width
+          height
+          blurhash
+        }
+      }
+    }
+  }
+`;
+
 export const REGISTRATIONS = gql`
   query Registrations {
     config {
diff --git a/src/types/admin.model.ts b/src/types/admin.model.ts
index 9124fa632..a043625f0 100644
--- a/src/types/admin.model.ts
+++ b/src/types/admin.model.ts
@@ -27,6 +27,8 @@ export interface IAdminSettings {
   instanceLongDescription: string;
   contact: string;
   instanceLogo: IMedia | null;
+  instanceFavicon: IMedia | null;
+  defaultPicture: IMedia | null;
   instanceTerms: string;
   instanceTermsType: InstanceTermsType;
   instanceTermsUrl: string | null;
diff --git a/src/types/config.model.ts b/src/types/config.model.ts
index 2a2240bdf..c908d10c9 100644
--- a/src/types/config.model.ts
+++ b/src/types/config.model.ts
@@ -38,6 +38,8 @@ export interface IConfig {
   contact: string;
   slogan: string;
   instanceLogo: { url: string };
+  instanceFavicon: { url: string };
+  defaultPicture: { url: string };
 
   registrationsOpen: boolean;
   registrationsAllowlist: boolean;
diff --git a/src/types/media.model.ts b/src/types/media.model.ts
index 3a85445b4..8e2a8d86b 100644
--- a/src/types/media.model.ts
+++ b/src/types/media.model.ts
@@ -1,3 +1,5 @@
+import type { Ref } from "vue";
+
 export interface IMedia {
   id: string;
   url: string;
@@ -21,3 +23,9 @@ export interface IMediaMetadata {
   height?: number;
   blurhash?: string;
 }
+
+export interface IModifiableMedia {
+  file: Ref<File | null>
+  firstHash: string | null
+  hash: string | null
+}
diff --git a/src/utils/image.ts b/src/utils/image.ts
index 824f7cb7e..0095bf00e 100644
--- a/src/utils/image.ts
+++ b/src/utils/image.ts
@@ -1,4 +1,5 @@
-import { IMedia } from "@/types/media.model";
+import { IMedia, IModifiableMedia } from "@/types/media.model";
+import { ref, watch } from "vue";
 
 export async function buildFileFromIMedia(
   obj: IMedia | null | undefined
@@ -45,9 +46,58 @@ export function readFileAsync(
   });
 }
 
-export async function fileHash(file: File): Promise<ArrayBuffer | null> {
+export async function fileHash(file: File): Promise<string | null> {
   const data = await readFileAsync(file);
   if (data === null) return null;
   const hash = await crypto.subtle.digest("SHA-1", data);
-  return hash;
+  const b64Hash = btoa(Array.from(new Uint8Array(hash)).map(b => String.fromCharCode(b)).join(''))
+  return b64Hash;
+}
+
+export function initWrappedMedia(): IModifiableMedia {
+  return {
+    file: ref<File | null>(null),
+    firstHash: null,
+    hash: null,
+  };
+}
+
+export async function loadWrappedMedia(modifiableMedia: IModifiableMedia, media: IMedia | null) {
+  watch(modifiableMedia.file, async () => {
+    if (modifiableMedia.file.value) {
+      modifiableMedia.hash = await fileHash(modifiableMedia.file.value);
+    } else {
+      modifiableMedia.hash = null;
+    }
+  });
+  try {
+    modifiableMedia.file.value = await buildFileFromIMedia(media);
+  } catch (e) {
+    console.error("catched error while building media", e);
+  }
+  if (modifiableMedia.file.value) {
+    modifiableMedia.firstHash = await fileHash(modifiableMedia.file.value);
+  }
+}
+
+export function asMediaInput(mmedia: IModifiableMedia, name: string, fallbackId: number): any {
+  let ret = {
+    [name]: {},
+  };
+  if (mmedia.file.value) {
+    if (mmedia.firstHash != mmedia.hash) {
+      ret[name] = {
+        media: {
+          name: mmedia.file.value?.name,
+          alt: "",
+          file: mmedia.file.value,
+        },
+      };
+    } else {
+      ret[name] = {
+        mediaId: fallbackId
+      };
+    }
+  }
+  return ret;
 }
diff --git a/src/views/Admin/SettingsView.vue b/src/views/Admin/SettingsView.vue
index 21e2a638e..7a3c0d3b2 100644
--- a/src/views/Admin/SettingsView.vue
+++ b/src/views/Admin/SettingsView.vue
@@ -58,8 +58,8 @@
           </small>
           <o-input v-model="settingsToWrite.contact" id="instance-contact" />
         </div>
-        <div class="field flex flex-col">
-          <label class="" for="instance-logo">{{ t("Logo") }}</label>
+        <label class="field flex flex-col">
+          <p>{{ t("Logo") }}</p>
           <small>
             {{ t("Logo of the instance. Defaults to the upstream Mobilizon logo.") }}
           </small>
@@ -69,7 +69,31 @@
             :textFallback="t('logo')"
             :maxSize="maxSize"
           />
-        </div>
+        </label>
+        <label class="field flex flex-col">
+          <p>{{ t("Favicon") }}</p>
+          <small>
+            {{ t("Browser tab icon and PWA icon of the instance. Defaults to the upstream Mobilizon icon.") }}
+          </small>
+          <picture-upload
+            v-model:modelValue="instanceFaviconFile"
+            :defaultImage="settingsToWrite.instanceFavicon"
+            :textFallback="t('favicon')"
+            :maxSize="maxSize"
+          />
+        </label>
+        <label class="field flex flex-col">
+          <p>{{ t("Default Picture") }}</p>
+          <small>
+            {{ t("Default picture when an event or group doesn't have one.") }}
+          </small>
+          <picture-upload
+            v-model:modelValue="defaultPictureFile"
+            :defaultImage="settingsToWrite.defaultPicture"
+            :textFallback="t('default picture')"
+            :maxSize="maxSize"
+          />
+        </label>
         <o-field :label="t('Allow registrations')">
           <o-switch v-model="settingsToWrite.registrationsOpen">
             <p
@@ -406,7 +430,7 @@ import type { Notifier } from "@/plugins/notifier";
 
 // Media upload related
 import PictureUpload from "@/components/PictureUpload.vue";
-import { buildFileFromIMedia, fileHash } from "@/utils/image";
+import { initWrappedMedia, loadWrappedMedia, asMediaInput } from "@/utils/image";
 import { useDefaultMaxSize } from "@/composition/config";
 
 const defaultAdminSettings: IAdminSettings = {
@@ -416,6 +440,8 @@ const defaultAdminSettings: IAdminSettings = {
   instanceLongDescription: "",
   contact: "",
   instanceLogo: null,
+  instanceFavicon: null,
+  defaultPicture: null,
   instanceTerms: "",
   instanceTermsType: InstanceTermsType.DEFAULT,
   instanceTermsUrl: null,
@@ -441,29 +467,18 @@ onAdminSettingsResult(async ({ data }) => {
   adminSettings.value = {
     ...data.adminSettings,
   } ?? defaultAdminSettings;
-  if (adminSettings.value.instanceLogo) {
-    try {
-      instanceLogoFile.value = await buildFileFromIMedia(adminSettings.value.instanceLogo);
-      instanceLogoServerHash.value = await fileHash(instanceLogoFile.value);
-    } catch (e) {
-      // Catch errors while building media
-      console.error("catched error while building media", e);
-    }
-  }
+
+  loadWrappedMedia(instanceLogo, adminSettings.value.instanceLogo);
+  loadWrappedMedia(instanceFavicon, adminSettings.value.instanceFavicon);
+  loadWrappedMedia(defaultPicture, adminSettings.value.defaultPicture);
 });
 
-let instanceLogoFile = ref<File | null>(null);
-let instanceLogoServerHash = ref<ArrayBuffer | null>(null);
-let instanceLogoHash = ref<ArrayBuffer | null>(null);
-
-watch(instanceLogoFile, async () => {
-  console.debug("LOGOFILECHANGED", instanceLogoFile);
-  if (instanceLogoFile.value) {
-    instanceLogoHash = await fileHash(instanceLogoFile.value);
-  } else {
-    instanceLogoHash = null;
-  }
-});
+const instanceLogo = initWrappedMedia();
+const { file: instanceLogoFile } = instanceLogo;
+const instanceFavicon = initWrappedMedia();
+const { file: instanceFaviconFile } = instanceFavicon;
+const defaultPicture = initWrappedMedia();
+const { file: defaultPictureFile } = defaultPicture;
 
 const { result: languageResult } = useQuery<{ languages: ILanguage[] }>(
   LANGUAGES
@@ -512,7 +527,9 @@ const {
 } = useMutation(SAVE_ADMIN_SETTINGS);
 
 saveAdminSettingsDone(() => {
-  instanceLogoServerHash = instanceLogoHash;
+  instanceLogo.firstHash = instanceLogo.hash;
+  instanceFavicon.firstHash = instanceFavicon.hash;
+  defaultPicture.firstHash = defaultPicture.hash;
   notifier?.success(t("Admin settings successfully saved.") as string);
 });
 
@@ -522,30 +539,12 @@ saveAdminSettingsError((e) => {
 });
 
 const updateSettings = async (): Promise<void> => {
-  console.debug("FILE AT UPDATE", instanceLogoFile.value);
-  let instanceLogoObj = {
-    instanceLogo: {},
-  };
-  if (instanceLogoFile.value) {
-    if (instanceLogoServerHash != instanceLogoHash) {
-      instanceLogoObj.instanceLogo = {
-        media: {
-          name: instanceLogoFile.value?.name,
-          alt: "",
-          file: instanceLogoFile.value,
-        },
-      };
-    } else {
-      instanceLogoObj.instanceLogo = {
-        mediaId: adminSettings.value?.instanceLogo?.id
-      };
-    }
-  }
   const variables = {
     ...settingsToWrite.value,
-    ...instanceLogoObj,
+    ...asMediaInput(instanceLogo, "instanceLogo", adminSettings.value?.instanceLogo?.id),
+    ...asMediaInput(instanceFavicon, "instanceFavicon", adminSettings.value?.instanceFavicon?.id),
+    ...asMediaInput(defaultPicture, "defaultPicture", adminSettings.value?.defaultPicture?.id),
   };
-  console.debug("updating settings with variables", variables);
   saveAdminSettings(variables);
 };
 
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 443e028c5..b040f408f 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -4,8 +4,8 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primary: "#1e7d97",
-        secondary: "#ffd599",
+        primary: "var(--custom-primary, #1e7d97)",
+        secondary: "var(--custom-secondary, #ffd599)",
         "violet-title": "#3c376e",
         tag: "rgb(var(--color-tag) / <alpha-value>)",
         "frama-violet": "#725794",