diff --git a/frontend/src/components/common/custom-branding/custom-branding.tsx b/frontend/src/components/common/custom-branding/custom-branding.tsx
index f1f028fea..2fff8ca66 100644
--- a/frontend/src/components/common/custom-branding/custom-branding.tsx
+++ b/frontend/src/components/common/custom-branding/custom-branding.tsx
@@ -3,8 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { useFrontendConfig } from '../frontend-config-context/use-frontend-config'
 import styles from './branding.module.scss'
+import { useBrandingDetails } from './use-branding-details'
 import React from 'react'
 
 export interface BrandingProps {
@@ -19,9 +19,9 @@ export interface BrandingProps {
  * @param delimiter If the delimiter between the HedgeDoc logo and the branding should be shown.
  */
 export const CustomBranding: React.FC<BrandingProps> = ({ inline = false }) => {
-  const branding = useFrontendConfig().branding
+  const branding = useBrandingDetails()
 
-  if (!branding.name && !branding.logo) {
+  if (!branding) {
     return null
   } else if (branding.logo) {
     return (
diff --git a/frontend/src/components/common/custom-branding/use-branding-details.ts b/frontend/src/components/common/custom-branding/use-branding-details.ts
new file mode 100644
index 000000000..482a8bfa0
--- /dev/null
+++ b/frontend/src/components/common/custom-branding/use-branding-details.ts
@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import type { BrandingConfig } from '../../../api/config/types'
+import { useFrontendConfig } from '../frontend-config-context/use-frontend-config'
+import { useMemo } from 'react'
+
+/**
+ * Extracts the branding from the config.
+ *
+ * @return the branding configuration or null if no branding has been configured
+ */
+export const useBrandingDetails = (): null | BrandingConfig => {
+  const branding = useFrontendConfig().branding
+
+  return useMemo(() => {
+    return !branding.name && !branding.logo ? null : branding
+  }, [branding])
+}
diff --git a/frontend/src/components/editor-page/app-bar/branding-separator-dash.tsx b/frontend/src/components/editor-page/app-bar/branding-separator-dash.tsx
new file mode 100644
index 000000000..83855ced4
--- /dev/null
+++ b/frontend/src/components/editor-page/app-bar/branding-separator-dash.tsx
@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useBrandingDetails } from '../../common/custom-branding/use-branding-details'
+import React from 'react'
+
+/**
+ * Renders a long dash if branding is configured.
+ */
+export const BrandingSeparatorDash: React.FC = () => {
+  const branding = useBrandingDetails()
+
+  return !branding ? null : <span className={'mx-1'}>&mdash;</span>
+}
diff --git a/frontend/src/components/editor-page/app-bar/branding.module.scss b/frontend/src/components/editor-page/app-bar/branding.module.scss
deleted file mode 100644
index f227ba438..000000000
--- a/frontend/src/components/editor-page/app-bar/branding.module.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-/*!
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-.branding-separator:has(*) {
-  &::before {
-    content: '\2014';
-    margin-left: 0.25em;
-    margin-right: 0.25em;
-  }
-}
diff --git a/frontend/src/components/editor-page/app-bar/navbar-branding.tsx b/frontend/src/components/editor-page/app-bar/navbar-branding.tsx
index c802b5bbc..d72064f9a 100644
--- a/frontend/src/components/editor-page/app-bar/navbar-branding.tsx
+++ b/frontend/src/components/editor-page/app-bar/navbar-branding.tsx
@@ -10,7 +10,7 @@ import {
   HedgeDocLogoType,
   HedgeDocLogoWithText
 } from '../../common/hedge-doc-logo/hedge-doc-logo-with-text'
-import styles from './branding.module.scss'
+import { BrandingSeparatorDash } from './branding-separator-dash'
 import Link from 'next/link'
 import React from 'react'
 import { Navbar } from 'react-bootstrap'
@@ -28,9 +28,8 @@ export const NavbarBranding: React.FC = () => {
           logoType={darkModeActivated ? HedgeDocLogoType.WB_HORIZONTAL : HedgeDocLogoType.BW_HORIZONTAL}
           size={HedgeDocLogoSize.SMALL}
         />
-        <span className={styles['branding-separator']}>
-          <CustomBranding inline={true} />
-        </span>
+        <BrandingSeparatorDash />
+        <CustomBranding inline={true} />
       </Link>
     </Navbar.Brand>
   )