diff --git a/libs/flowbite-angular/src/lib/components/navbar/navbar.component.html b/libs/flowbite-angular/src/lib/components/navbar/navbar.component.html
new file mode 100644
index 00000000..0a8238fb
--- /dev/null
+++ b/libs/flowbite-angular/src/lib/components/navbar/navbar.component.html
@@ -0,0 +1,11 @@
+<nav
+  class="border-gray-200 bg-white px-2 py-2.5 dark:border-gray-700 dark:bg-gray-800 sm:px-4"
+  [ngClass]="[rounded ? 'rounded' : '', border ? 'border' : '', extraClass]"
+>
+  <div
+    class="mx-auto flex flex-wrap items-center justify-between"
+    [ngClass]="{ container: !fluid }"
+  >
+    <ng-content></ng-content>
+  </div>
+</nav>
diff --git a/libs/flowbite-angular/src/lib/components/navbar/navbar.component.ts b/libs/flowbite-angular/src/lib/components/navbar/navbar.component.ts
index e757d9b5..0cae2fa2 100644
--- a/libs/flowbite-angular/src/lib/components/navbar/navbar.component.ts
+++ b/libs/flowbite-angular/src/lib/components/navbar/navbar.component.ts
@@ -5,17 +5,7 @@ import { NgClass } from '@angular/common';
   standalone: true,
   imports: [NgClass],
   selector: 'flowbite-navbar',
-  template: ` <nav
-    class="border-gray-200 bg-white px-2 py-2.5 dark:border-gray-700 dark:bg-gray-800 sm:px-4"
-    [ngClass]="[rounded ? 'rounded' : '', border ? 'border' : '', extraClass]"
-  >
-    <div
-      class="mx-auto flex flex-wrap items-center justify-between"
-      [ngClass]="{ container: !fluid }"
-    >
-      <ng-content></ng-content>
-    </div>
-  </nav>`,
+  templateUrl: './navbar.component.html',
 })
 export class NavbarComponent {
   @Input() extraClass = '';