diff --git a/desktop/src/app/components/apps/browser/browser.component.html b/desktop/src/app/components/apps/browser/browser.component.html
new file mode 100644
index 0000000..271a0d9
--- /dev/null
+++ b/desktop/src/app/components/apps/browser/browser.component.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+ @if (isLoading()) {
+
Loading…
+ }
+
+
diff --git a/desktop/src/app/components/apps/browser/browser.component.scss b/desktop/src/app/components/apps/browser/browser.component.scss
new file mode 100644
index 0000000..b6340b4
--- /dev/null
+++ b/desktop/src/app/components/apps/browser/browser.component.scss
@@ -0,0 +1,96 @@
+:host {
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+
+.browser {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ background: #1e1e1e;
+}
+
+.browser-toolbar {
+ display: flex;
+ align-items: center;
+ height: 40px;
+ padding: 0 8px;
+ background: #2d2d2d;
+ border-bottom: 1px solid #404040;
+ gap: 6px;
+}
+
+.nav-btn {
+ width: 32px;
+ height: 30px;
+ border: none;
+ background: transparent;
+ color: #ccc;
+ font-size: 18px;
+ cursor: pointer;
+ border-radius: 4px;
+
+ &:hover {
+ background: rgba(255, 255, 255, 0.08);
+ }
+}
+
+.url-bar {
+ flex: 1;
+ display: flex;
+ height: 30px;
+ border: 1px solid #555;
+ border-radius: 6px;
+ background: #383838;
+ overflow: hidden;
+
+ &:focus-within {
+ border-color: #0078d4;
+ }
+}
+
+.url-input {
+ flex: 1;
+ border: none;
+ outline: none;
+ background: transparent;
+ color: #e0e0e0;
+ font-size: 13px;
+ padding: 0 10px;
+}
+
+.go-btn {
+ width: 50px;
+ border: none;
+ background: #0078d4;
+ color: #fff;
+ font-size: 12px;
+ cursor: pointer;
+
+ &:hover {
+ background: #1a86d9;
+ }
+}
+
+.browser-content {
+ flex: 1;
+ position: relative;
+}
+
+.browser-frame {
+ width: 100%;
+ height: 100%;
+ border: none;
+ background: #fff;
+}
+
+.browser-loading {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: #888;
+ font-size: 14px;
+}
diff --git a/desktop/src/app/components/apps/browser/browser.component.ts b/desktop/src/app/components/apps/browser/browser.component.ts
new file mode 100644
index 0000000..45f8444
--- /dev/null
+++ b/desktop/src/app/components/apps/browser/browser.component.ts
@@ -0,0 +1,40 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+ selector: 'app-browser',
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './browser.component.html',
+ styleUrl: './browser.component.scss',
+})
+export class BrowserComponent {
+ readonly url = signal('https://www.wikipedia.org');
+ readonly inputUrl = signal('https://www.wikipedia.org');
+ readonly isLoading = signal(false);
+
+ navigate(): void {
+ let target = this.inputUrl().trim();
+ if (!target.startsWith('http://') && !target.startsWith('https://')) {
+ target = 'https://' + target;
+ }
+ this.inputUrl.set(target);
+ this.url.set(target);
+ }
+
+ onUrlKeydown(event: KeyboardEvent): void {
+ if (event.key === 'Enter') {
+ this.navigate();
+ }
+ }
+
+ onLoad(): void {
+ this.isLoading.set(false);
+ }
+
+ refresh(): void {
+ this.isLoading.set(true);
+ this.url.set(this.url() + ' '); // Force iframe reload
+ setTimeout(() => this.url.set(this.inputUrl()), 50);
+ }
+}