diff --git a/frontend/src/components/common/custom-branding/__snapshots__/custom-branding.spec.tsx.snap b/frontend/src/components/common/custom-branding/__snapshots__/custom-branding.spec.tsx.snap
new file mode 100644
index 000000000..3fd60b783
--- /dev/null
+++ b/frontend/src/components/common/custom-branding/__snapshots__/custom-branding.spec.tsx.snap
@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`custom branding doesn't show anything if no branding is defined 1`] = `<div />`;
+
+exports[`custom branding with inline=false shows an image if branding logo is defined 1`] = `
+<div>
+  <img
+    class="regular-size"
+    src="mockBrandingUrl"
+  />
+</div>
+`;
+
+exports[`custom branding with inline=false shows an text if branding text is defined 1`] = `
+<div>
+  <span
+    class="regular-size"
+  >
+    mockedBranding
+  </span>
+</div>
+`;
+
+exports[`custom branding with inline=false will prefer the logo over the text 1`] = `
+<div>
+  <img
+    alt="mockedBranding"
+    class="regular-size"
+    src="mockBrandingUrl"
+    title="mockedBranding"
+  />
+</div>
+`;
+
+exports[`custom branding with inline=true shows an image if branding logo is defined 1`] = `
+<div>
+  <img
+    class="inline-size"
+    src="mockBrandingUrl"
+  />
+</div>
+`;
+
+exports[`custom branding with inline=true shows an text if branding text is defined 1`] = `
+<div>
+  <span
+    class="inline-size"
+  >
+    mockedBranding
+  </span>
+</div>
+`;
+
+exports[`custom branding with inline=true will prefer the logo over the text 1`] = `
+<div>
+  <img
+    alt="mockedBranding"
+    class="inline-size"
+    src="mockBrandingUrl"
+    title="mockedBranding"
+  />
+</div>
+`;
+
+exports[`custom branding with inline=undefined shows an image if branding logo is defined 1`] = `
+<div>
+  <img
+    class="regular-size"
+    src="mockBrandingUrl"
+  />
+</div>
+`;
+
+exports[`custom branding with inline=undefined shows an text if branding text is defined 1`] = `
+<div>
+  <span
+    class="regular-size"
+  >
+    mockedBranding
+  </span>
+</div>
+`;
+
+exports[`custom branding with inline=undefined will prefer the logo over the text 1`] = `
+<div>
+  <img
+    alt="mockedBranding"
+    class="regular-size"
+    src="mockBrandingUrl"
+    title="mockedBranding"
+  />
+</div>
+`;
diff --git a/frontend/src/components/common/custom-branding/custom-branding.spec.tsx b/frontend/src/components/common/custom-branding/custom-branding.spec.tsx
new file mode 100644
index 000000000..7d31612f7
--- /dev/null
+++ b/frontend/src/components/common/custom-branding/custom-branding.spec.tsx
@@ -0,0 +1,46 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import type { FrontendConfig } from '../../../api/config/types'
+import * as UseFrontendConfigMock from '../frontend-config-context/use-frontend-config'
+import { CustomBranding } from './custom-branding'
+import { render } from '@testing-library/react'
+import { Mock } from 'ts-mockery'
+
+jest.mock('../frontend-config-context/use-frontend-config')
+
+describe('custom branding', () => {
+  const mockFrontendConfigHook = (logo?: string, name?: string) => {
+    jest
+      .spyOn(UseFrontendConfigMock, 'useFrontendConfig')
+      .mockReturnValue(Mock.of<FrontendConfig>({ branding: { logo, name } }))
+  }
+
+  it("doesn't show anything if no branding is defined", () => {
+    mockFrontendConfigHook()
+    const view = render(<CustomBranding />)
+    expect(view.container).toMatchSnapshot()
+  })
+
+  describe.each([false, true, undefined])('with inline=%s', (inline) => {
+    it('shows an image if branding logo is defined', () => {
+      mockFrontendConfigHook('mockBrandingUrl')
+      const view = render(<CustomBranding inline={inline} />)
+      expect(view.container).toMatchSnapshot()
+    })
+
+    it('shows an text if branding text is defined', () => {
+      mockFrontendConfigHook(undefined, 'mockedBranding')
+      const view = render(<CustomBranding inline={inline} />)
+      expect(view.container).toMatchSnapshot()
+    })
+
+    it('will prefer the logo over the text', () => {
+      mockFrontendConfigHook('mockBrandingUrl', 'mockedBranding')
+      const view = render(<CustomBranding inline={inline} />)
+      expect(view.container).toMatchSnapshot()
+    })
+  })
+})