diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts
index 0bc2266e0c..ff526f608f 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts
@@ -1,24 +1,37 @@
-import { ApplicationInfo, EnvironmentService } from '@abp/ng.core';
+import { EnvironmentService } from '@abp/ng.core';
 import { RouterLink } from '@angular/router';
 import { Component, inject } from '@angular/core';
+import { LOGO_APP_NAME_TOKEN, LOGO_URL_TOKEN } from '@abp/ng.theme.shared';
 
 @Component({
   selector: 'abp-logo',
   template: `
     <a class="navbar-brand" routerLink="/">
-      @if (appInfo.logoUrl) {
-        <img [src]="appInfo.logoUrl" [alt]="appInfo.name" width="100%" height="auto" />
+      @if (logoUrl) {
+        <img [src]="logoUrl" [alt]="appName" width="100%" height="auto" />
       } @else {
-        {{ appInfo.name }}
+        {{ appName }}
       }
     </a>
   `,
+  standalone: true,
   imports: [RouterLink],
 })
 export class LogoComponent {
   private environment = inject(EnvironmentService);
 
-  get appInfo(): ApplicationInfo {
-    return this.environment.getEnvironment().application;
+  private readonly providedLogoUrl = inject(LOGO_URL_TOKEN, { optional: true });
+  private readonly providedAppName = inject(LOGO_APP_NAME_TOKEN, { optional: true });
+
+  get logoUrl(): string {
+    return (
+      this.providedLogoUrl ?? this.environment.getEnvironment().application?.logoUrl
+    );
+  }
+
+  get appName(): string {
+    return (
+      this.providedAppName ?? this.environment.getEnvironment().application?.name
+    );
   }
 }