diff --git a/src/routes/docs/tutorials/+page.svelte b/src/routes/docs/tutorials/+page.svelte
index 8306de8affb..3a40b7ddbb1 100644
--- a/src/routes/docs/tutorials/+page.svelte
+++ b/src/routes/docs/tutorials/+page.svelte
@@ -72,6 +72,17 @@
 							</p>
 						</a>
 					</li>
+					<li class="is-mobile-col-span-2">
+						<a href="/docs/tutorials/angular" class="aw-card is-normal">
+							<header class="u-flex u-cross-baseline u-gap-4">
+								<span class="icon-angular aw-u-font-size-24" aria-hidden="true" />
+								<h4 class="aw-sub-body-500 aw-u-color-text-primary">Angular</h4>
+							</header>
+							<p class="aw-sub-body-400 u-margin-block-start-4">
+								Learn Appwrite Auth, Databases, and more with Angular.
+							</p>
+						</a>
+					</li>
 					<li class="is-mobile-col-span-2">
 						<article class="aw-card is-full-color">
 							<header class="u-flex u-cross-baseline u-gap-4">
diff --git a/src/routes/docs/tutorials/angular/+layout.svelte b/src/routes/docs/tutorials/angular/+layout.svelte
new file mode 100644
index 00000000000..8d7875f36e7
--- /dev/null
+++ b/src/routes/docs/tutorials/angular/+layout.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { globToTutorial } from '$lib/utils/tutorials.js';
+	import { setContext } from 'svelte';
+
+	export let data;
+	const tutorials = globToTutorial(data);
+	setContext('tutorials', tutorials);
+</script>
+
+<slot />
\ No newline at end of file
diff --git a/src/routes/docs/tutorials/angular/+layout.ts b/src/routes/docs/tutorials/angular/+layout.ts
new file mode 100644
index 00000000000..562b11506f5
--- /dev/null
+++ b/src/routes/docs/tutorials/angular/+layout.ts
@@ -0,0 +1,11 @@
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = ({ url }) => {
+	const tutorials = import.meta.glob('./**/*.markdoc', {
+		eager: true
+	});
+	return {
+		tutorials,
+		pathname: url.pathname
+	};
+};
diff --git a/src/routes/docs/tutorials/angular/+page.ts b/src/routes/docs/tutorials/angular/+page.ts
new file mode 100644
index 00000000000..42cc9e3ce0f
--- /dev/null
+++ b/src/routes/docs/tutorials/angular/+page.ts
@@ -0,0 +1,6 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+	throw redirect(303, '/docs/tutorials/angular/step-1');
+};
diff --git a/src/routes/docs/tutorials/angular/step-1/+page.markdoc b/src/routes/docs/tutorials/angular/step-1/+page.markdoc
new file mode 100644
index 00000000000..3af849e5b6b
--- /dev/null
+++ b/src/routes/docs/tutorials/angular/step-1/+page.markdoc
@@ -0,0 +1,34 @@
+---
+layout: tutorial
+title: Build an ideas tracker with Angular
+description: Learn to build a Angular app with no backend code using an Appwrite backend.
+step: 1
+difficulty: beginner
+readtime: 10
+---
+
+**Idea tracker**: an app to track all the side project ideas that you'll start, but probably never finish.
+In this tutorial, you will build Idea tracker with Appwrite and Angular.
+
+{% only_dark %}
+![Create project screen](/images/docs/tutorials/dark/idea-tracker.png)
+{% /only_dark %}
+{% only_light %}
+![Create project screen](/images/docs/tutorials/idea-tracker.png)
+{% /only_light %}
+
+# Concepts {% #concepts %}
+
+This tutorial will introduce the following concepts:
+
+1. Setting up your first project
+2. Authentication 
+3. Databases and collections
+4. Queries and pagination
+5. Storage
+
+
+# Prerequisites {% #prerequisites %}
+
+1. Basic knowledge of TypeScript and Angular.
+2. Have [Node.js](https://nodejs.org/en) and [NPM](https://www.npmjs.com/) installed on your computer
\ No newline at end of file
diff --git a/src/routes/docs/tutorials/angular/step-2/+page.markdoc b/src/routes/docs/tutorials/angular/step-2/+page.markdoc
new file mode 100644
index 00000000000..3f278947e6e
--- /dev/null
+++ b/src/routes/docs/tutorials/angular/step-2/+page.markdoc
@@ -0,0 +1,34 @@
+---
+layout: tutorial
+title: Create app
+description: Create a Angular app project and integrate with Appwrite.
+step: 2
+---
+
+# Create Angular project {% #create-angular-project %}
+
+If you don't have Angular CLI installed, run this command.
+
+```sh
+npm install -g @angular/cli
+```
+
+Then, Create a Angular app with the `ng new` command.
+
+```sh
+ng new ideas-tracker && cd ideas-tracker
+```
+
+# Add dependencies {% #add-dependencies %}
+
+Install the TypeScript Appwrite SDK.
+
+```sh
+npm install appwrite
+```
+
+You can start the development server to watch your app update in the browser as you make changes.
+
+```sh
+ng serve --open --port 4200
+```
\ No newline at end of file
diff --git a/src/routes/docs/tutorials/angular/step-3/+page.markdoc b/src/routes/docs/tutorials/angular/step-3/+page.markdoc
new file mode 100644
index 00000000000..b8c30fe484d
--- /dev/null
+++ b/src/routes/docs/tutorials/angular/step-3/+page.markdoc
@@ -0,0 +1,57 @@
+---
+layout: tutorial
+title: Set up Appwrite
+description: Import and initialize Appwrite for your angular application.
+step: 3
+---
+
+# Create project {% #create-project %}
+
+Head to the [Appwrite Console](https://cloud.appwrite.io/console).
+
+{% only_dark %}
+![Create project screen](/images/docs/quick-starts/dark/create-project.png)
+{% /only_dark %}
+{% only_light %}
+![Create project screen](/images/docs/quick-starts/create-project.png)
+{% /only_light %}
+
+If this is your first time using Appwrite, create an account and create your first project.
+
+Then, under **Add a platform**, add a **Web app**. The **Hostname** should be localhost. 
+
+{% only_dark %}
+![Add a platform](/images/docs/quick-starts/dark/add-platform.png)
+{% /only_dark %}
+{% only_light %}
+![Add a platform](/images/docs/quick-starts/add-platform.png)
+{% /only_light %}
+
+You can skip optional steps.
+
+# Initialize Appwrite SDK {% #init-sdk %}
+
+To use Appwrite in our Svelte app, we'll need to find our project ID. Find your project's ID in the **Settings** page. 
+
+{% only_dark %}
+![Project settings screen](/images/docs/quick-starts/dark/project-id.png)
+{% /only_dark %}
+{% only_light %}
+![Project settings screen](/images/docs/quick-starts/project-id.png)
+{% /only_light %}
+
+Create a new file `src/lib/appwrite.ts` to hold our Appwrite related code.
+Only one instance of the `Client()` class should be created per app.
+Add the following code to it, replacing `<YOUR_PROJECT_ID>` with your project ID.
+
+```ts
+import { Client, Databases, Account } from "appwrite";
+
+const client = new Client();
+client
+  .setEndpoint("https://cloud.appwrite.io/v1")
+  .setProject("<YOUR_PROJECT_ID>"); // Replace with your project ID
+
+export const account = new Account(client);
+export const databases = new Databases(client);
+```
\ No newline at end of file
diff --git a/src/routes/docs/tutorials/angular/step-4/+page.markdoc b/src/routes/docs/tutorials/angular/step-4/+page.markdoc
new file mode 100644
index 00000000000..bdbd7691fc4
--- /dev/null
+++ b/src/routes/docs/tutorials/angular/step-4/+page.markdoc
@@ -0,0 +1,132 @@
+---
+layout: tutorial
+title: Add authentication
+description: Add authentication to your angular application.
+step: 4
+---
+
+# User service {% #user-service %}
+
+In Angular, services are used to share data and functions between components. We'll create a UserService to manage our user's data.
+
+Create a new file `src/app/user.service.tsx` and add the following code to it.
+
+```ts
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { account } from './appwrite.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+  private userSubject = new BehaviorSubject<any>(null);
+  user$ = this.userSubject.asObservable();
+
+  async login(email: string, password: string): Promise<void> {
+    const loggedIn = await account.createEmailSession(email, password);
+    this.userSubject.next(loggedIn);
+  }
+
+  async logout(): Promise<void> {
+    await account.deleteSession('current');
+    this.userSubject.next(null);
+  }
+
+  async register(email: string, password: string): Promise<void> {
+    await account.create(email, password);
+    await this.login(email, password);
+  }
+
+  async init(): Promise<void> {
+    try {
+      const loggedIn = await account.get();
+      this.userSubject.next(loggedIn);
+    } catch (err) {
+      this.userSubject.next(null);
+    }
+  }
+}
+```
+
+# Basic routing  {% #basic-routing %}
+
+Angular provides a powerful router that allows you to configure navigation between components. 
+
+Update your `src/app/app-routing.module.tsx` to define your routes.
+
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+import { LoginComponent } from './login/login.component';
+
+const routes: Routes = [
+  { path: 'login', component: LoginComponent },
+  { path: '', component: HomeComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
+```
+
+# Home page  {% #home-page %}
+
+Create a new file `src/app/home/home.component.tsx` and add the following stub code to it.
+
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  template: `<p>I'm the home page</p>`
+})
+export class HomeComponent { }
+```
+
+# Login page {% #login-page %}
+
+Finally, we are able to create the login page. Users will be able to login or register from this page, so we'll need to add two buttons.
+
+Create a new file `src/app/login/login.component.tsx` and add the following code to it.
+
+```ts
+import { Component } from '@angular/core';
+import { UserService } from '../user.service';
+
+@Component({
+  selector: 'app-login',
+  template: `
+    <section>
+      <h1>Login or register</h1>
+      <form>
+        <input type="email" [(ngModel)]="email" placeholder="Email">
+        <input type="password" [(ngModel)]="password" placeholder="Password">
+        <div>
+          <button (click)="login()">Login</button>
+          <button (click)="register()">Register</button>
+        </div>
+      </form>
+    </section>
+  `
+})
+export class LoginComponent {
+  email: string = '';
+  password: string = '';
+
+  constructor(private userService: UserService) { }
+
+  login(): void {
+    this.userService.login(this.email, this.password);
+  }
+
+  register(): void {
+    this.userService.register(this.email, this.password);
+  }
+}
+```
+
+Ensure you have the FormsModule imported in your `app.module.tsx` to use `[(ngModel)]` for two-way data binding.
diff --git a/src/routes/docs/tutorials/angular/step-5/+page.markdoc b/src/routes/docs/tutorials/angular/step-5/+page.markdoc
new file mode 100644
index 00000000000..217cf1455d7
--- /dev/null
+++ b/src/routes/docs/tutorials/angular/step-5/+page.markdoc
@@ -0,0 +1,51 @@
+---
+layout: tutorial
+title: Add navigation 
+description: Add navigation to your Angular applicating using Appwrite.
+step: 5
+---
+
+In our app we want to have a navigation bar that is always visible. We will add it to the `AppComponent` and use the `UserService` to show either:
+- A logout button if the user is logged in.
+- A login button if the user is not logged in.
+
+Update the `AppComponent` in `src/app/app.component.tsx`:
+
+```ts
+import { Component } from '@angular/core';
+import { UserService } from './user.service';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <app-navbar></app-navbar> <!-- Add the navbar before page content -->
+    <router-outlet></router-outlet> <!-- This directive will insert the component of the active route -->
+  `
+})
+export class AppComponent { }
+
+@Component({
+  selector: 'app-navbar',
+  template: `
+    <nav>
+      <a routerLink="/">Idea tracker</a>
+      <div *ngIf="user$ | async as user; else login">
+        <span>{{ user.email }}</span>
+        <button (click)="logout()">Logout</button>
+      </div>
+      <ng-template #login>
+        <a routerLink="/login">Login</a>
+      </ng-template>
+    </nav>
+  `
+})
+export class NavbarComponent {
+  user$ = this.userService.user$;
+
+  constructor(private userService: UserService) { }
+
+  logout(): void {
+    this.userService.logout();
+  }
+}
+```
diff --git a/src/routes/docs/tutorials/angular/step-6/+page.markdoc b/src/routes/docs/tutorials/angular/step-6/+page.markdoc
new file mode 100644
index 00000000000..297eeaaf1d3
--- /dev/null
+++ b/src/routes/docs/tutorials/angular/step-6/+page.markdoc
@@ -0,0 +1,75 @@
+---
+layout: tutorial
+title: Add database
+description: Add a database to your Angular application using Appwrite Web SDK.
+step: 6
+---
+# Create collection {% #create-collection %}
+In Appwrite, data is stored as a collection of documents. Create a collection in the [Appwrite Console](https://cloud.appwrite.io/) to store our ideas.
+
+{% only_dark %}
+![Create project screen](/images/docs/tutorials/dark/idea-tracker-collection.png)
+{% /only_dark %}
+{% only_light %}
+![Create project screen](/images/docs/tutorials/idea-tracker-collection.png)
+{% /only_light %}
+
+Create a new collection with the following attributes:
+| Field       | Type   | Required |
+|-------------|--------|----------|
+| userId      | String | Yes      |
+| title       | String | Yes      |
+| description | String | No       |
+
+# Ideas context {% #ideas-context %}
+
+Now that you have a collection to hold ideas, we can read and write to it from our app. We will create an Angular service to manage our ideas.
+
+Create a new file `src/app/ideas.service.tsx` and add the following code to it.
+
+```ts
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { databases } from '../appwrite';
+import { ID, Query } from 'appwrite';
+
+export const IDEAS_DATABASE_ID: string = '<YOUR_DATABASE_ID>'; // Replace with your database ID
+export const IDEAS_COLLECTION_ID: string = '<YOUR_COLLECTION_ID>'; // Replace with your collection ID
+
+@Injectable({
+  providedIn: 'root'
+})
+export class IdeasService {
+  private ideasSubject = new BehaviorSubject<any[]>([]);
+  ideas$ = this.ideasSubject.asObservable();
+
+  async add(idea: any): Promise<void> {
+    const response = await databases.createDocument(
+      IDEAS_DATABASE_ID,
+      IDEAS_COLLECTION_ID,
+      ID.unique(),
+      idea
+    );
+    this.fetchIdeas();
+  }
+
+  async remove(id: string): Promise<void> {
+    await databases.deleteDocument(IDEAS_DATABASE_ID, IDEAS_COLLECTION_ID, id);
+    this.fetchIdeas();
+  }
+
+  async fetchIdeas(): Promise<void> {
+    const response = await databases.listDocuments(
+      IDEAS_DATABASE_ID,
+      IDEAS_COLLECTION_ID,
+      [Query.orderDesc('$createdAt'), Query.limit(10)]
+    );
+    this.ideasSubject.next(response.documents);
+  }
+
+  init(): void {
+    this.fetchIdeas();
+  }
+}
+```
+
diff --git a/src/routes/docs/tutorials/angular/step-7/+page.markdoc b/src/routes/docs/tutorials/angular/step-7/+page.markdoc
new file mode 100644
index 00000000000..6e5a6eda93f
--- /dev/null
+++ b/src/routes/docs/tutorials/angular/step-7/+page.markdoc
@@ -0,0 +1,65 @@
+---
+layout: tutorial
+title: Create ideas page
+description: Add database queries and pagination using Appwrite in your Angular application.
+step: 7
+---
+
+Using the `IdeasService`, we can now display the ideas on the page. We will also add a form to submit new ideas.
+
+Overwrite the contents of `src/app/home/home.component.tsx` with the following:
+
+```ts
+import { Component } from '@angular/core';
+import { UserService } from '../user.service';
+import { IdeasService } from '../ideas.service';
+
+@Component({
+  selector: 'app-home',
+  template: `
+    <section *ngIf="user$ | async as user; else loginPrompt">
+      <h2>Submit Idea</h2>
+      <form (ngSubmit)="addIdea()">
+        <input type="text" [(ngModel)]="title" placeholder="Title" name="title" required />
+        <textarea [(ngModel)]="description" placeholder="Description" name="description"></textarea>
+        <button type="submit">Submit</button>
+      </form>
+    </section>
+    <ng-template #loginPrompt>
+      <section>
+        <p>Please login to submit an idea.</p>
+      </section>
+    </ng-template>
+    <section>
+      <h2>Latest Ideas</h2>
+      <ul>
+        <li *ngFor="let idea of ideas$ | async">
+          <strong>{{ idea.title }}</strong>
+          <p>{{ idea.description }}</p>
+          <button *ngIf="user && user.$id === idea.userId" (click)="removeIdea(idea.$id)">Remove</button>
+        </li>
+      </ul>
+    </section>
+  `
+})
+export class HomeComponent {
+  title: string = '';
+  description: string = '';
+  user$ = this.userService.user$;
+  ideas$ = this.ideasService.ideas$;
+
+  constructor(private userService: UserService, private ideasService: IdeasService) { }
+
+  addIdea(): void {
+    if (this.title && this.description) {
+      this.ideasService.add({ title: this.title, description: this.description });
+      this.title = '';
+      this.description = '';
+    }
+  }
+
+  removeIdea(id: string): void {
+    this.ideasService.remove(id);
+  }
+}
+```
\ No newline at end of file
diff --git a/src/routes/docs/tutorials/angular/step-8/+page.markdoc b/src/routes/docs/tutorials/angular/step-8/+page.markdoc
new file mode 100644
index 00000000000..69b80e18ca9
--- /dev/null
+++ b/src/routes/docs/tutorials/angular/step-8/+page.markdoc
@@ -0,0 +1,9 @@
+---
+layout: tutorial
+title: Next steps
+description: View your Angular.js app build on Appwrite Cloud.
+step: 8
+---
+
+# Test your project {% #test-project %}
+Run your project with `ng serve --open` and open [http://localhost:4200](http://localhost:4200) in your browser.
