diff --git a/src/app/components/settings/network/network.component.html b/src/app/components/settings/network/network.component.html
index c660ae4..c3b3c5e 100644
--- a/src/app/components/settings/network/network.component.html
+++ b/src/app/components/settings/network/network.component.html
@@ -1,52 +1,56 @@
 <div class="w-full max-w-3xl">
-    <div class="text-xl">Change your network</div>
-    <div class="text-secondary">
-        Switch between Mainnet and Testnet to change your network settings.
+    <div class="text-xl font-bold">Change Your Network</div>
+    <div class="text-secondary mt-2">
+        Switch between Mainnet and Testnet to update your network preferences.
     </div>
 </div>
 
 <div class="mt-8 grid w-full max-w-3xl gap-6 sm:grid-cols-2">
     <!-- Mainnet Card -->
     <div
-        class="bg-card relative flex cursor-pointer flex-col items-start justify-start rounded-md p-6 shadow"
+        class="bg-card relative flex cursor-pointer flex-col items-start justify-start rounded-md p-6 shadow hover:shadow-lg transition-shadow"
         [ngClass]="{
-            'ring ring-inset ring-primary': selectedNetwork === 'mainnet',
+            'ring-2 ring-primary': selectedNetwork() === 'mainnet'
         }"
         (click)="setNetwork('mainnet')"
     >
-        <mat-icon
-            *ngIf="selectedNetwork === 'mainnet'"
-            class="absolute right-0 top-0 mr-3 mt-3 text-primary icon-size-7"
-            [svgIcon]="'heroicons_solid:check-circle'"
-        ></mat-icon>
-        <div class="font-semibold">Mainnet</div>
-        <div class="text-secondary mt-1 whitespace-normal">
-            The live Bitcoin network.
+        @if (selectedNetwork() === 'mainnet') {
+            <mat-icon
+                class="absolute right-2 top-2 text-primary icon-size-7"
+                [svgIcon]="'heroicons_solid:check-circle'"
+                aria-label="Selected Network"
+            ></mat-icon>
+        }
+        <div class="font-semibold text-lg">Mainnet</div>
+        <div class="text-secondary mt-2">
+            The live Bitcoin network for real transactions.
         </div>
     </div>
 
     <!-- Testnet Card -->
     <div
-        class="bg-card relative flex cursor-pointer flex-col items-start justify-start rounded-md p-6 shadow"
+        class="bg-card relative flex cursor-pointer flex-col items-start justify-start rounded-md p-6 shadow hover:shadow-lg transition-shadow"
         [ngClass]="{
-            'ring ring-inset ring-primary': selectedNetwork === 'testnet',
+            'ring-2 ring-primary': selectedNetwork() === 'testnet'
         }"
         (click)="setNetwork('testnet')"
     >
-        <mat-icon
-            *ngIf="selectedNetwork === 'testnet'"
-            class="absolute right-0 top-0 mr-3 mt-3 text-primary icon-size-7"
-            [svgIcon]="'heroicons_solid:check-circle'"
-        ></mat-icon>
-        <div class="font-semibold">Testnet</div>
-        <div class="text-secondary mt-1 whitespace-normal">
-            The Bitcoin testing network.
+        @if (selectedNetwork() === 'testnet') {
+            <mat-icon
+                class="absolute right-2 top-2 text-primary icon-size-7"
+                [svgIcon]="'heroicons_solid:check-circle'"
+                aria-label="Selected Network"
+            ></mat-icon>
+        }
+        <div class="font-semibold text-lg">Testnet</div>
+        <div class="text-secondary mt-2">
+            A Bitcoin testing network for developers and testing purposes.
         </div>
     </div>
 </div>
 
 <!-- Divider -->
-<div class="mb-10 mt-11 w-full max-w-3xl border-t"></div>
+<div class="my-10 w-full max-w-3xl border-t"></div>
 
 <!-- Actions -->
 <div class="flex w-full max-w-3xl items-center justify-end">
diff --git a/src/app/components/settings/network/network.component.ts b/src/app/components/settings/network/network.component.ts
index f58e757..b24e108 100644
--- a/src/app/components/settings/network/network.component.ts
+++ b/src/app/components/settings/network/network.component.ts
@@ -1,19 +1,15 @@
-import { AngorAlertComponent } from '@angor/components/alert';
-import { CommonModule, CurrencyPipe, NgClass } from '@angular/common';
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import {
-    FormBuilder,
-    FormGroup,
-    FormsModule,
-    ReactiveFormsModule,
-} from '@angular/forms';
+    ChangeDetectionStrategy,
+    Component,
+    OnInit,
+    signal,
+    effect,
+    inject,
+} from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatOptionModule } from '@angular/material/core';
-import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatSelectModule } from '@angular/material/select';
 import { IndexerService } from 'app/services/indexer.service';
 
 @Component({
@@ -22,45 +18,43 @@ import { IndexerService } from 'app/services/indexer.service';
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     imports: [
-        FormsModule,
         ReactiveFormsModule,
-        MatRadioModule,
-        NgClass,
         MatIconModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule,
-        MatOptionModule,
         MatButtonModule,
         CommonModule,
-    ]
+    ],
 })
 export class SettingsNetworkComponent implements OnInit {
+    private readonly _indexerService = inject(IndexerService);
     networkForm: FormGroup;
-    selectedNetwork: 'mainnet' | 'testnet' = 'testnet';
-    constructor(
-        private _fb: FormBuilder,
-        private _indexerService: IndexerService
-    ) {}
+    selectedNetwork = signal<'mainnet' | 'testnet'>('testnet');
+
+    constructor(private _fb: FormBuilder) {}
 
     ngOnInit(): void {
+        const initialNetwork = this._indexerService.getNetwork();
         this.networkForm = this._fb.group({
-            network: [this._indexerService.getNetwork()],
+            network: [initialNetwork],
         });
+        this.selectedNetwork.set(initialNetwork);
 
-        this.selectedNetwork = this._indexerService.getNetwork();
+        // Effect to handle real-time changes
+        effect(() => {
+            console.log('Selected Network:', this.selectedNetwork());
+        });
     }
 
     setNetwork(network: 'mainnet' | 'testnet'): void {
-        this.selectedNetwork = network;
-        this._indexerService.setNetwork(this.selectedNetwork);
+        this.selectedNetwork.set(network);
     }
 
     save(): void {
-        this._indexerService.setNetwork(this.selectedNetwork);
+        const network = this.selectedNetwork();
+        this._indexerService.setNetwork(network);
     }
 
     cancel(): void {
-        this.selectedNetwork = this._indexerService.getNetwork();
+        const currentNetwork = this._indexerService.getNetwork();
+        this.selectedNetwork.set(currentNetwork);
     }
 }