diff --git a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
index 797bb9f492..a80c710ffa 100644
--- a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
@@ -1,12 +1,12 @@
 import { ProfileService } from '@abp/ng.account.core/proxy';
 import { fadeIn, LoadingDirective } from '@abp/ng.theme.shared';
 import { transition, trigger, useAnimation } from '@angular/animations';
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, makeStateKey, OnInit, TransferState } from '@angular/core';
 import { eAccountComponents } from '../../enums/components';
 import { ManageProfileStateService } from '../../services/manage-profile.state.service';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
-import { LocalizationPipe, ReplaceableTemplateDirective } from '@abp/ng.core';
+import { LocalizationPipe, ReplaceableTemplateDirective, SSRService } from '@abp/ng.core';
 import { PersonalSettingsComponent } from '../personal-settings/personal-settings.component';
 import { ChangePasswordComponent } from '../change-password/change-password.component';
 
@@ -33,28 +33,40 @@ import { ChangePasswordComponent } from '../change-password/change-password.comp
   ],
 })
 export class ManageProfileComponent implements OnInit {
+  protected readonly ssrService = inject(SSRService);
   selectedTab = 0;
-
   changePasswordKey = eAccountComponents.ChangePassword;
-
   personalSettingsKey = eAccountComponents.PersonalSettings;
-
   profile$ = this.manageProfileState.getProfile$();
-
   hideChangePasswordTab?: boolean;
+  PROFILE_SETTINGS_KEY = makeStateKey<any>('profileSettings');
 
   constructor(
+    private transferState: TransferState,
     protected profileService: ProfileService,
     protected manageProfileState: ManageProfileStateService,
   ) {}
 
   ngOnInit() {
-    this.profileService.get().subscribe(profile => {
-      this.manageProfileState.setProfile(profile);
-      if (profile.isExternal) {
+    if (this.transferState.hasKey(this.PROFILE_SETTINGS_KEY)) {
+      const profileSettings = this.transferState.get(this.PROFILE_SETTINGS_KEY, null);
+      this.manageProfileState.setProfile(profileSettings);
+      if (profileSettings.isExternal) {
         this.hideChangePasswordTab = true;
         this.selectedTab = 1;
       }
-    });
+      this.transferState.remove(this.PROFILE_SETTINGS_KEY);
+    } else {
+      this.profileService.get().subscribe(profile => {
+        this.manageProfileState.setProfile(profile);
+        if (profile.isExternal) {
+          this.hideChangePasswordTab = true;
+          this.selectedTab = 1;
+        }
+        if (this.ssrService.isServer) {
+          this.transferState.set(this.PROFILE_SETTINGS_KEY, profile);
+        }
+      });
+    }
   }
 }
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
index 41af1cd714..16ba0cdaa0 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
@@ -1,4 +1,4 @@
-@if (!ssrService.isSsr) {
+@if (ssrService.isBrowser) {
   <ngx-datatable
     default
     [rows]="data"
diff --git a/npm/ng-packs/packages/core/src/lib/services/ssr.service.ts b/npm/ng-packs/packages/core/src/lib/services/ssr.service.ts
index 64b4966c28..5423554741 100644
--- a/npm/ng-packs/packages/core/src/lib/services/ssr.service.ts
+++ b/npm/ng-packs/packages/core/src/lib/services/ssr.service.ts
@@ -1,5 +1,5 @@
 import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
-import { isPlatformServer } from '@angular/common';
+import { isPlatformBrowser, isPlatformServer } from '@angular/common';
 
 @Injectable({
   providedIn: 'root',
@@ -7,7 +7,11 @@ import { isPlatformServer } from '@angular/common';
 export class SSRService {
   constructor(@Inject(PLATFORM_ID) private platformId: unknown) {}
 
-  get isSsr() {
+  get isBrowser() {
+    return isPlatformBrowser(this.platformId);
+  }
+
+  get isServer() {
     return isPlatformServer(this.platformId);
   }
 }
diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
index 2dfc00503a..c577b3fd33 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
+++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
@@ -151,7 +151,7 @@ export class RolesComponent implements OnInit {
         .hookToQuery(query => this.service.getList(query))
         .subscribe(res => {
           this.data = res;
-          if (this.ssrService.isSsr) {
+          if (this.ssrService.isServer) {
             this.transferState.set(this.ROLES_KEY, res);
           }
         });
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
index fe3c62a66f..727f216ed3 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
+++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
@@ -248,7 +248,7 @@ export class UsersComponent implements OnInit {
         .hookToQuery(query => this.service.getList(query))
         .subscribe(res => {
           this.data = res;
-          if (this.ssrService.isSsr) {
+          if (this.ssrService.isServer) {
             this.transferState.set(this.USERS_KEY, res);
           }
         });
diff --git a/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.ts b/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.ts
index 7e915a48d7..1027ed0103 100644
--- a/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.ts
+++ b/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.ts
@@ -80,7 +80,7 @@ export class EmailSettingGroupComponent implements OnInit {
     } else {
       this.emailSettingsService.get().subscribe(res => {
         this.buildForm(res);
-        if (this.ssrService.isSsr) {
+        if (this.ssrService.isServer) {
           this.transferState.set(this.EMAIL_SETTINGS_KEY, res);
         }
       });
diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts
index f34598755c..2ab4da201c 100644
--- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts
+++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts
@@ -165,7 +165,7 @@ export class TenantsComponent implements OnInit {
         .hookToQuery(query => this.service.getList(query))
         .subscribe(res => {
           this.data = res;
-          if (this.ssrService.isSsr) {
+          if (this.ssrService.isServer) {
             this.transferState.set(this.TENANTS_KEY, res);
           }
         });
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts
index 1442130572..e1db041b91 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts
@@ -34,7 +34,7 @@ export class CurrentUserComponent {
   private ssrService = inject(SSRService);
 
   get smallScreen(): boolean {
-    if (this.ssrService.isSsr) {
+    if (this.ssrService.isServer) {
       return false;
     } else {
       return window.innerWidth < 992;
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 6406a449d5..923c255d57 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,32 +1,18 @@
 <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>
+  @if (ssrService.isBrowser) {
+    @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">
+          @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>
+      </ng-container>
     }
-    </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">
-        @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>
-    </ng-container>
-  }
-</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 c172d8a337..369cf932f0 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,22 +1,16 @@
-import { NavItem, NavItemsService } from '@abp/ng.theme.shared';
-import { Component, TrackByFunction } from '@angular/core';
+import { AbpVisibleDirective, NavItem, NavItemsService } from '@abp/ng.theme.shared';
+import { Component, inject, 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
+import { PermissionDirective, SSRService, ToInjectorPipe } from '@abp/ng.core';
 
 @Component({
   selector: 'abp-nav-items',
   templateUrl: 'nav-items.component.html',
-  imports: [CommonModule, PermissionDirective, ToInjectorPipe],
+  imports: [CommonModule, AbpVisibleDirective, PermissionDirective, ToInjectorPipe],
 })
 export class NavItemsComponent {
+  protected readonly ssrService = inject(SSRService);
   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) {}
 }