diff --git a/src/routes/console/project-[project]/functions/+layout.svelte b/src/routes/console/project-[project]/functions/+layout.svelte
index 50819a036..5796af77b 100644
--- a/src/routes/console/project-[project]/functions/+layout.svelte
+++ b/src/routes/console/project-[project]/functions/+layout.svelte
@@ -1,37 +1,3 @@
-<script lang="ts">
-    import { onMount } from 'svelte';
-    import { sdk } from '$lib/stores/sdk';
-    import { Dependencies } from '$lib/constants';
-    import { invalidate } from '$app/navigation';
-    import type { Models } from '@appwrite.io/console';
-
-    onMount(() => {
-        let previousStatus = null;
-        return sdk.forConsole.client.subscribe<Models.Deployment>('console', (message) => {
-            if (previousStatus === message.payload.status) {
-                return;
-            }
-            previousStatus = message.payload.status;
-            if (message.events.includes('functions.*.deployments.*.create')) {
-                invalidate(Dependencies.DEPLOYMENTS);
-
-                return;
-            }
-            if (message.events.includes('functions.*.deployments.*.update')) {
-                invalidate(Dependencies.DEPLOYMENTS);
-                invalidate(Dependencies.FUNCTION);
-
-                return;
-            }
-            if (message.events.includes('functions.*.deployments.*.delete')) {
-                invalidate(Dependencies.DEPLOYMENTS);
-
-                return;
-            }
-        });
-    });
-</script>
-
 <svelte:head>
     <title>Functions - Appwrite</title>
 </svelte:head>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/+layout.svelte b/src/routes/console/project-[project]/functions/function-[function]/+layout.svelte
index e8b8dae48..417a11972 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/+layout.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/+layout.svelte
@@ -1,6 +1,37 @@
 <script lang="ts">
     import { execute } from './store';
     import Execute from './execute.svelte';
+    import { onMount } from 'svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { Dependencies } from '$lib/constants';
+    import { invalidate } from '$app/navigation';
+    import type { Models } from '@appwrite.io/console';
+
+    onMount(() => {
+        let previousStatus = null;
+        return sdk.forConsole.client.subscribe<Models.Deployment>('console', (message) => {
+            if (previousStatus === message.payload.status) {
+                return;
+            }
+            previousStatus = message.payload.status;
+            if (message.events.includes('functions.*.deployments.*.create')) {
+                invalidate(Dependencies.DEPLOYMENTS);
+
+                return;
+            }
+            if (message.events.includes('functions.*.deployments.*.update')) {
+                invalidate(Dependencies.DEPLOYMENTS);
+                invalidate(Dependencies.FUNCTION);
+
+                return;
+            }
+            if (message.events.includes('functions.*.deployments.*.delete')) {
+                invalidate(Dependencies.DEPLOYMENTS);
+
+                return;
+            }
+        });
+    });
 </script>
 
 <slot />
diff --git a/src/routes/console/project-[project]/functions/header.svelte b/src/routes/console/project-[project]/functions/header.svelte
index 6ea24a4d9..8674ef158 100644
--- a/src/routes/console/project-[project]/functions/header.svelte
+++ b/src/routes/console/project-[project]/functions/header.svelte
@@ -1,9 +1,39 @@
 <script lang="ts">
+    import { page } from '$app/stores';
+    import { Tab, Tabs } from '$lib/components';
+    import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
+
+    $: projectId = $page.params.project;
+    $: path = `/console/project-${projectId}/functions`;
+    $: tabs = [
+        {
+            href: path,
+            title: 'Functions',
+            event: 'functions',
+            hasChildren: true
+        },
+        {
+            href: `${path}/templates`,
+            title: 'Templates',
+            event: 'templates'
+        }
+    ];
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
         <CoverTitle>Functions</CoverTitle>
     </svelte:fragment>
+
+    <Tabs>
+        {#each tabs as tab}
+            <Tab
+                href={tab.href}
+                selected={isTabSelected(tab, $page.url.pathname, path, tabs)}
+                event={tab.event}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
 </Cover>
diff --git a/src/routes/console/project-[project]/functions/templates/+page.svelte b/src/routes/console/project-[project]/functions/templates/+page.svelte
new file mode 100644
index 000000000..a3ee41915
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/templates/+page.svelte
@@ -0,0 +1,168 @@
+<script lang="ts">
+    import { Collapsible, CollapsibleItem } from '$lib/components/index.js';
+    import { CARD_LIMIT } from '$lib/constants';
+    import { InputCheckbox } from '$lib/elements/forms';
+    import { Container } from '$lib/layout';
+    import data from './data.json';
+
+    let search = '';
+    let page = 1;
+
+    const filter = {
+        runtimes: {},
+        useCases: {}
+    };
+
+    const [runtimes, useCases] = data.reduce(
+        ([rt, uc], next) => {
+            next.runtimes.forEach((runtime) => rt.add(runtime.name));
+            next.useCases.forEach((useCase) => uc.add(useCase));
+            return [rt, uc];
+        },
+        [new Set<string>(), new Set<string>()]
+    );
+
+    $: templates = data
+        .filter((template) => {
+            const hasRuntime = template.runtimes.some(
+                (runtime) => filter.runtimes[runtime.name] ?? false
+            );
+            if (Object.values(filter.runtimes).some((n) => n) && !hasRuntime) {
+                return false;
+            }
+
+            const hasUseCase = template.useCases.some(
+                (useCase) => filter.useCases[useCase] ?? false
+            );
+            if (Object.values(filter.useCases).some((n) => n) && !hasUseCase) {
+                return false;
+            }
+
+            return template.name.toLowerCase().includes(search.toLowerCase());
+        })
+        .splice((page - 1) * CARD_LIMIT, CARD_LIMIT);
+
+    /**
+     * Reset filters on pagination
+     */
+    $: {
+        filter;
+        search;
+        page = 1;
+    }
+</script>
+
+<Container>
+    <div class="grid-300px-1fr">
+        <section>
+            <h3 class="body-text-1 u-bold">Filter templates</h3>
+            <div
+                class="input-text-wrapper is-with-end-button u-width-full-line u-max-width-500 u-margin-block-start-12"
+                style="--amount-of-buttons:1">
+                <input bind:value={search} type="search" placeholder="Search templates" />
+                <div class="icon-search" aria-hidden="true" />
+                <button
+                    on:click={() => (search = '')}
+                    class="button is-text is-only-icon"
+                    aria-label="Clear search"
+                    style="--button-size:1.5rem;">
+                    <span class="icon-x" aria-hidden="true" />
+                </button>
+            </div>
+            <Collapsible>
+                <CollapsibleItem>
+                    <svelte:fragment slot="title">Use case</svelte:fragment>
+                    {#each [...useCases] as useCase}
+                        <InputCheckbox
+                            id={`useCase-${useCase}`}
+                            label={useCase}
+                            bind:value={filter.useCases[useCase]} />
+                    {/each}
+                </CollapsibleItem>
+                <CollapsibleItem>
+                    <svelte:fragment slot="title">Runtime</svelte:fragment>
+                    {#each [...runtimes] as runtime}
+                        <InputCheckbox
+                            id={`runtime-${runtime}`}
+                            label={runtime}
+                            bind:value={filter.runtimes[runtime]} />
+                    {/each}
+                </CollapsibleItem>
+            </Collapsible>
+
+            <section class="card u-margin-block-start-24">
+                <h4 class="body-text-1 u-bold">Contribute</h4>
+                <p class="u-margin-block-start-16">
+                    Have an idea for a function template? View our <a
+                        class="link"
+                        href=""
+                        target="_blank">contribution guidelines</a
+                    >.
+                </p>
+            </section>
+        </section>
+        <section>
+            <ul
+                class="grid-box"
+                style="--grid-item-size:22rem; --grid-item-size-small-screens:19rem">
+                {#each templates as template}
+                    <li>
+                        <article class="card">
+                            <div class="u-flex u-gap-16">
+                                <h2 class="body-text-1 u-bold u-trim">
+                                    {template.name}
+                                </h2>
+
+                                <ul class="avatars-group is-with-border">
+                                    {#each template.runtimes as runtime}
+                                        <li class="avatars-group-item">
+                                            <div class="avatar is-size-small">
+                                                <span
+                                                    class={`icon-${runtime.name}`}
+                                                    aria-hidden="true"
+                                                    aria-label="GitHub" />
+                                            </div>
+                                        </li>
+                                    {/each}
+                                </ul>
+                            </div>
+
+                            <p class="u-margin-block-start-20">
+                                {template.tagline}
+                            </p>
+
+                            <div class="u-flex u-gap-16 u-main-end u-margin-block-start-24">
+                                <button class="button is-text">
+                                    <span class="text">View details</span>
+                                </button>
+                                <button class="button is-secondary">
+                                    <span class="text">Create function</span>
+                                </button>
+                            </div>
+                        </article>
+                    </li>
+                {/each}
+            </ul>
+        </section>
+    </div>
+    <div class="u-flex common-section u-main-space-between">
+        <p class="text">Total results: {templates.length}</p>
+        <nav class="pagination">
+            <button class="button is-text" aria-label="prev page" on:click={() => page--}>
+                <span class="icon-cheveron-left" aria-hidden="true" />
+                <span class="text">Prev</span>
+            </button>
+            <ol class="pagination-list is-only-desktop">
+                <li class="pagination-item">
+                    <button class="button" aria-label="page">
+                        <span class="text">1</span>
+                    </button>
+                </li>
+            </ol>
+            <button class="button is-text" aria-label="next page" on:click={() => page++}>
+                <span class="text">Next</span>
+                <span class="icon-cheveron-right" aria-hidden="true" />
+            </button>
+        </nav>
+    </div>
+</Container>
diff --git a/src/routes/console/project-[project]/functions/templates/data.json b/src/routes/console/project-[project]/functions/templates/data.json
new file mode 100644
index 000000000..32baa778f
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/templates/data.json
@@ -0,0 +1,226 @@
+[
+    {
+        "icon": "algolia",
+        "id": "sync-with-algolia",
+        "name": "Sync with Algolia",
+        "tagline": "Search your Appwrite Database with Algolia.",
+        "permissions": ["any"],
+        "events": ["users.*.create"],
+        "useCases": ["AI"],
+        "cron": "0 * * * *",
+        "timeout": 15,
+        "runtimes": [
+            {
+                "name": "node-18",
+                "entrypoint": "src/main.js",
+                "commands": "npm install"
+            }
+        ],
+        "instructions": "# Some markdown stuff",
+        "vcsProvider": "github",
+        "vcsRepositoryName": "templates-for-node",
+        "vcsOwnerName": "loks0n",
+        "vcsRootDirectory": "sync-with-algolia",
+        "variables": [
+            {
+                "name": "ALGOLIA_API_KEY",
+                "description": "Algolia read-write API key.",
+                "value": "",
+                "placeholder": "sk_1df...h9jef",
+                "required": true
+            }
+        ]
+    },
+    {
+        "icon": "algolia",
+        "id": "sync-with-algolia",
+        "name": "Sync with Algolia",
+        "tagline": "Search your Appwrite Database with Algolia.",
+        "permissions": ["any"],
+        "events": ["users.*.create"],
+        "useCases": ["AI", "Web3"],
+        "cron": "0 * * * *",
+        "timeout": 15,
+        "runtimes": [
+            {
+                "name": "node-16",
+                "entrypoint": "src/main.js",
+                "commands": "npm install"
+            }
+        ],
+        "instructions": "# Some markdown stuff",
+        "vcsProvider": "github",
+        "vcsRepositoryName": "templates-for-node",
+        "vcsOwnerName": "loks0n",
+        "vcsRootDirectory": "sync-with-algolia",
+        "variables": [
+            {
+                "name": "ALGOLIA_API_KEY",
+                "description": "Algolia read-write API key.",
+                "value": "",
+                "placeholder": "sk_1df...h9jef",
+                "required": true
+            }
+        ]
+    },
+    {
+        "icon": "algolia",
+        "id": "sync-with-algolia",
+        "name": "Sync with Algolia",
+        "tagline": "Search your Appwrite Database with Algolia.",
+        "permissions": ["any"],
+        "events": ["users.*.create"],
+        "useCases": ["AI"],
+        "cron": "0 * * * *",
+        "timeout": 15,
+        "runtimes": [
+            {
+                "name": "node-18",
+                "entrypoint": "src/main.js",
+                "commands": "npm install"
+            }
+        ],
+        "instructions": "# Some markdown stuff",
+        "vcsProvider": "github",
+        "vcsRepositoryName": "templates-for-node",
+        "vcsOwnerName": "loks0n",
+        "vcsRootDirectory": "sync-with-algolia",
+        "variables": [
+            {
+                "name": "ALGOLIA_API_KEY",
+                "description": "Algolia read-write API key.",
+                "value": "",
+                "placeholder": "sk_1df...h9jef",
+                "required": true
+            }
+        ]
+    },
+    {
+        "icon": "algolia",
+        "id": "sync-with-algolia",
+        "name": "Sync with Algolia",
+        "tagline": "Search your Appwrite Database with Algolia.",
+        "permissions": ["any"],
+        "events": ["users.*.create"],
+        "useCases": ["AI"],
+        "cron": "0 * * * *",
+        "timeout": 15,
+        "runtimes": [
+            {
+                "name": "node-18",
+                "entrypoint": "src/main.js",
+                "commands": "npm install"
+            }
+        ],
+        "instructions": "# Some markdown stuff",
+        "vcsProvider": "github",
+        "vcsRepositoryName": "templates-for-node",
+        "vcsOwnerName": "loks0n",
+        "vcsRootDirectory": "sync-with-algolia",
+        "variables": [
+            {
+                "name": "ALGOLIA_API_KEY",
+                "description": "Algolia read-write API key.",
+                "value": "",
+                "placeholder": "sk_1df...h9jef",
+                "required": true
+            }
+        ]
+    },
+    {
+        "icon": "algolia",
+        "id": "sync-with-algolia",
+        "name": "Sync with Algolia",
+        "tagline": "Search your Appwrite Database with Algolia.",
+        "permissions": ["any"],
+        "events": ["users.*.create"],
+        "useCases": ["AI"],
+        "cron": "0 * * * *",
+        "timeout": 15,
+        "runtimes": [
+            {
+                "name": "node-18",
+                "entrypoint": "src/main.js",
+                "commands": "npm install"
+            }
+        ],
+        "instructions": "# Some markdown stuff",
+        "vcsProvider": "github",
+        "vcsRepositoryName": "templates-for-node",
+        "vcsOwnerName": "loks0n",
+        "vcsRootDirectory": "sync-with-algolia",
+        "variables": [
+            {
+                "name": "ALGOLIA_API_KEY",
+                "description": "Algolia read-write API key.",
+                "value": "",
+                "placeholder": "sk_1df...h9jef",
+                "required": true
+            }
+        ]
+    },
+    {
+        "icon": "algolia",
+        "id": "sync-with-algolia",
+        "name": "Sync with Algolia",
+        "tagline": "Search your Appwrite Database with Algolia.",
+        "permissions": ["any"],
+        "events": ["users.*.create"],
+        "useCases": ["AI"],
+        "cron": "0 * * * *",
+        "timeout": 15,
+        "runtimes": [
+            {
+                "name": "node-18",
+                "entrypoint": "src/main.js",
+                "commands": "npm install"
+            }
+        ],
+        "instructions": "# Some markdown stuff",
+        "vcsProvider": "github",
+        "vcsRepositoryName": "templates-for-node",
+        "vcsOwnerName": "loks0n",
+        "vcsRootDirectory": "sync-with-algolia",
+        "variables": [
+            {
+                "name": "ALGOLIA_API_KEY",
+                "description": "Algolia read-write API key.",
+                "value": "",
+                "placeholder": "sk_1df...h9jef",
+                "required": true
+            }
+        ]
+    },
+    {
+        "icon": "algolia",
+        "id": "sync-with-algolia",
+        "name": "Sync with Algolia",
+        "tagline": "Search your Appwrite Database with Algolia.",
+        "permissions": ["any"],
+        "events": ["users.*.create"],
+        "useCases": ["AI"],
+        "cron": "0 * * * *",
+        "timeout": 15,
+        "runtimes": [
+            {
+                "name": "node-18",
+                "entrypoint": "src/main.js",
+                "commands": "npm install"
+            }
+        ],
+        "instructions": "# Some markdown stuff",
+        "vcsProvider": "github",
+        "vcsRepositoryName": "templates-for-node",
+        "vcsOwnerName": "loks0n",
+        "vcsRootDirectory": "sync-with-algolia",
+        "variables": [
+            {
+                "name": "ALGOLIA_API_KEY",
+                "description": "Algolia read-write API key.",
+                "value": "",
+                "placeholder": "sk_1df...h9jef",
+                "required": true
+            }
+        ]
+    }
+]