diff --git a/app/src/views/public/logo-light.svg b/app/src/views/public/logo-light.svg
new file mode 100644
index 0000000000..816553f1f2
--- /dev/null
+++ b/app/src/views/public/logo-light.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="39">
+  <path fill="#FFFFFF" fill-rule="evenodd" d="M51.166 24.51a4.636 4.636 0 0 1-.763-.246 1.751 1.751 0 0 1-.54-.368c.147-1.304 0-2.435.122-3.713.492-4.967 3.615-3.393 6.418-4.204 1.745-.492 3.491-1.5 3.934-3.566a36.074 36.074 0 0 0-6.393-5.876C46.347 1.128 36.414-1.036 27.39.464a13.635 13.635 0 0 0 5.968 5.532s-2.445 0-4.541-1.565c-.615.245-1.845.73-2.435 1.024 4.794 4.598 12.293 5.114 17.678.984-.025.049-.492.762-1.057 3.737-1.254 6.343-4.869 5.852-9.343 4.254-9.294-3.369-14.408-.246-19.055-6.639a4.29 4.29 0 0 0-2.189 3.737c0 1.598.886 2.95 2.164 3.688.698-.926 1.011-1.189 2.228-1.189-1.883 1.068-2.105 2-2.916 4.582-.984 3.123-.566 6.32-5.164 7.155-2.434.123-2.385 1.77-3.27 4.23C4.352 33.188 2.877 34.467 0 37.491c1.18 1.426 2.41 1.598 3.663 1.082 2.582-1.082 4.574-4.426 6.442-6.59 2.09-2.409 7.106-1.376 10.892-3.737 2.607-1.598 3.885-3.761 2.164-7.425a7.254 7.254 0 0 1 1.869 4.426c4.376-.566 10.228 4.77 15.563 5.655a9.53 9.53 0 0 1-1.303-2.188c-.615-1.476-.811-2.828-.688-4.008.491 2.926 3.442 6.688 8.187 7.032 1.205.098 2.533-.05 3.91-.467 1.647-.492 3.171-1.131 4.99-.787 1.353.246 2.607.934 3.394 2.09 1.18 1.72 3.761 2.09 4.917-.025-2.606-6.81-9.786-7.253-12.834-8.04z"/>
+</svg>
diff --git a/app/src/views/public/public-view.vue b/app/src/views/public/public-view.vue
index a965c8073b..78bb65a8e7 100644
--- a/app/src/views/public/public-view.vue
+++ b/app/src/views/public/public-view.vue
@@ -5,7 +5,9 @@
 				<div v-if="branding && branding.project_logo" class="logo" :style="{ backgroundColor: branding.project_color }">
 					<img :src="logoURL" :alt="branding.project_name || 'Logo'" />
 				</div>
-				<img v-else class="default-logo" src="./logo-dark.svg" alt="Directus" />
+				<div v-else class="logo" :style="{ backgroundColor: branding.project_color }">
+					<img src="./logo-light.svg" alt="Directus" class="directus-logo" />
+				</div>
 				<div class="title">
 					<h1 class="type-title">{{ branding && branding.project_name }}</h1>
 					<p class="subtitle">Admin App</p>
@@ -250,10 +252,6 @@ export default defineComponent({
 		}
 	}
 
-	.default-logo {
-		width: 64px;
-	}
-
 	.v-icon {
 		--v-icon-color: var(--foreground-subdued);