diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts
index 2164b531c7..cbabe382d0 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts
@@ -1,8 +1,8 @@
-import { ConfigStateService, LanguageInfo, SessionStateService } from '@abp/ng.core';
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { CommonModule, DOCUMENT } from '@angular/common';
+import { ConfigStateService, LanguageInfo, SessionStateService } from '@abp/ng.core';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html
index c5e54a62f2..6406a449d5 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html
@@ -1,4 +1,20 @@
 <ul class="navbar-nav">
+  @for (item of visibleItems$ | async; track $index) {
+    <li class="nav-item d-flex align-items-center" *abpPermission="item.requiredPolicy">
+      @if (item.component) {
+        <ng-container
+          [ngComponentOutlet]="item.component"
+          [ngComponentOutletInjector]="item | toInjector"
+        ></ng-container>
+      } @else {
+      <div [innerHTML]="item.html" (click)="item.action ? item.action() : null"></div>
+    }
+    </li>
+  }
+</ul>
+
+
+<!--<ul class="navbar-nav">
   @for (item of navItems.items$ | async; track $index) {
     <ng-container *abpVisible="!item.visible || item.visible(item)">
       <li class="nav-item d-flex align-items-center" *abpPermission="item.requiredPolicy">
@@ -8,9 +24,9 @@
             [ngComponentOutletInjector]="item | toInjector"
           ></ng-container>
         } @else {
-          <div [innerHTML]="item.html" (click)="item.action ? item.action() : null"></div>
-        }
+        <div [innerHTML]="item.html" (click)="item.action ? item.action() : null"></div>
+      }
       </li>
     </ng-container>
   }
-</ul>
+</ul>-->
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts
index d2e4a516b4..c172d8a337 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.ts
@@ -1,15 +1,22 @@
-import { AbpVisibleDirective, NavItem, NavItemsService } from '@abp/ng.theme.shared';
+import { NavItem, NavItemsService } from '@abp/ng.theme.shared';
 import { Component, TrackByFunction } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PermissionDirective, ToInjectorPipe } from '@abp/ng.core';
+import { map } from 'rxjs/operators';
+
+//TODO: Refactor AbpVisibleDirective to ssr compatible
 
 @Component({
   selector: 'abp-nav-items',
   templateUrl: 'nav-items.component.html',
-  imports: [CommonModule, AbpVisibleDirective, PermissionDirective, ToInjectorPipe],
+  imports: [CommonModule, PermissionDirective, ToInjectorPipe],
 })
 export class NavItemsComponent {
   trackByFn: TrackByFunction<NavItem> = (_, element) => element.id;
-
+  visibleItems$ = this.navItems.items$.pipe(
+    map(
+      items => items.filter(item => !item.visible || item.visible(item)), // sadece görünmesi gerekenleri seç
+    ),
+  );
   constructor(public readonly navItems: NavItemsService) {}
 }