diff --git a/apps/tangle-dapp/app/blueprints/BlueprintListing.tsx b/apps/tangle-dapp/app/blueprints/BlueprintListing.tsx
new file mode 100644
index 0000000000..ca8f210ac0
--- /dev/null
+++ b/apps/tangle-dapp/app/blueprints/BlueprintListing.tsx
@@ -0,0 +1,344 @@
+'use client';
+
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { SparklingIcon } from '@webb-tools/icons';
+import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
+import { fuzzyFilter } from '@webb-tools/webb-ui-components/components/Filter/utils';
+import { Input } from '@webb-tools/webb-ui-components/components/Input';
+import { Pagination } from '@webb-tools/webb-ui-components/components/Pagination';
+import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
+import { shortenHex } from '@webb-tools/webb-ui-components/utils/shortenHex';
+import Image from 'next/image';
+import { FC, useMemo, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import { Blueprint, BlueprintCategory } from '../../types';
+import useBlueprintListing from './useBlueprintListing';
+
+const columnHelper = createColumnHelper<Blueprint>();
+
+const columns = [
+  columnHelper.accessor('address', {
+    header: () => 'Project',
+    cell: (props) => <BlueprintItem {...props.row.original} />,
+    filterFn: (row, _, filterValue) => {
+      const { name, address, description } = row.original;
+      return (
+        name.toLowerCase().includes(filterValue.toLowerCase()) ||
+        address.toLowerCase().includes(filterValue.toLowerCase()) ||
+        description.toLowerCase().includes(filterValue.toLowerCase())
+      );
+    },
+    sortingFn: (rowA, rowB) => {
+      const isBlueprintABoosted = rowA.original.isBoosted;
+      const isBlueprintBBoosted = rowB.original.isBoosted;
+      if (isBlueprintABoosted && !isBlueprintBBoosted) {
+        return -1;
+      }
+      if (!isBlueprintABoosted && isBlueprintBBoosted) {
+        return 1;
+      }
+      return 0;
+    },
+  }),
+  columnHelper.accessor('category', {
+    header: () => null,
+    cell: () => null,
+    filterFn: (row, _, filterValue) => {
+      return row.original.category === filterValue;
+    },
+  }),
+];
+
+const BlueprintListing: FC = () => {
+  const blueprints = useBlueprintListing();
+  const [searchValue, setSearchValue] = useState('');
+  const [filteredCategory, setFilteredCategory] =
+    useState<BlueprintCategory | null>(null);
+
+  const categoryItems = useMemo(
+    () => [
+      {
+        label: 'View All',
+        onClick: () => setFilteredCategory(null),
+        isActive: filteredCategory === null,
+      },
+      ...Object.values(BlueprintCategory).map((category) => ({
+        label: category,
+        onClick: () => setFilteredCategory(category),
+        isActive: filteredCategory === category,
+      })),
+    ],
+    [filteredCategory],
+  );
+
+  const table = useReactTable({
+    data: blueprints,
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter,
+    },
+    globalFilterFn: fuzzyFilter,
+    initialState: {
+      columnVisibility: {
+        category: false,
+      },
+      pagination: {
+        pageSize: 12,
+      },
+      sorting: [
+        {
+          id: 'address',
+          desc: false,
+        },
+      ],
+    },
+    state: {
+      columnFilters: [
+        {
+          id: 'address',
+          value: searchValue,
+        },
+        ...(filteredCategory
+          ? [
+              {
+                id: 'category',
+                value: filteredCategory,
+              },
+            ]
+          : []),
+      ],
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    autoResetPageIndex: false,
+  });
+
+  return (
+    <div className="space-y-5">
+      {/* Search bar */}
+      <div
+        className={twMerge(
+          'rounded-xl py-4 px-6 bg-mono-0 dark:bg-mono-180',
+          'flex items-center gap-2',
+        )}
+      >
+        <Input
+          id="search-blueprints"
+          placeholder="Search"
+          value={searchValue}
+          onChange={(val) => setSearchValue(val)}
+          isControlled
+          className="flex-1 rounded-full overflow-hidden"
+          inputClassName="border-0 bg-mono-20 dark:bg-mono-200"
+        />
+        <Button variant="secondary">Search</Button>
+      </div>
+
+      {/* Category */}
+      <div className="-space-y-0.5">
+        <div className="flex items-center gap-9">
+          {categoryItems.map(({ label, onClick, isActive }, idx) => (
+            <div
+              key={idx}
+              className={twMerge(
+                'group cursor-pointer py-3 border-b-2 border-mono-80 dark:border-mono-170',
+                isActive && 'border-purple-50 dark:border-purple-60',
+              )}
+              onClick={onClick}
+            >
+              <Typography
+                variant="h5"
+                fw="normal"
+                className={twMerge(
+                  'text-mono-140 dark:text-mono-100',
+                  !isActive &&
+                    'group-hover:text-mono-160 dark:group-hover:text-mono-80',
+                  isActive && 'text-mono-200 dark:text-mono-0',
+                )}
+              >
+                {label}
+              </Typography>
+            </div>
+          ))}
+        </div>
+        <div className="h-0.5 bg-mono-80 dark:bg-mono-170" />
+      </div>
+
+      {/* Blueprint list */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+        {table.getRowModel().rows.map((row) => (
+          <div key={row.id}>
+            {row
+              .getVisibleCells()
+              .map((cell) =>
+                flexRender(cell.column.columnDef.cell, cell.getContext()),
+              )}
+          </div>
+        ))}
+      </div>
+
+      {/* Pagination */}
+      <Pagination
+        itemsPerPage={table.getState().pagination.pageSize}
+        totalItems={Math.max(
+          table.getPrePaginationRowModel().rows.length,
+          blueprints.length,
+        )}
+        page={table.getState().pagination.pageIndex + 1}
+        totalPages={table.getPageCount()}
+        canPreviousPage={table.getCanPreviousPage()}
+        previousPage={table.previousPage}
+        canNextPage={table.getCanNextPage()}
+        nextPage={table.nextPage}
+        setPageIndex={table.setPageIndex}
+        title="Blueprints"
+      />
+    </div>
+  );
+};
+
+export default BlueprintListing;
+
+const BlueprintItem: FC<Blueprint> = ({
+  name,
+  address,
+  imgUrl,
+  description,
+  restakersCount,
+  operatorsCount,
+  tvl,
+  isBoosted,
+}) => {
+  return (
+    <div
+      className={twMerge(
+        'h-[364px] overflow-hidden rounded-xl flex flex-col cursor-pointer group',
+        'border border-mono-0 dark:border-mono-170',
+        isBoosted && 'border-t-0',
+      )}
+    >
+      {isBoosted && (
+        <div
+          className={twMerge(
+            'h-2 bg-purple-60',
+            'bg-[linear-gradient(to_right,hsla(230,64%,52%,0.8)0%,hsla(230,87%,74%,0.8)40%,hsla(242,100%,93%,0.8)100%)]',
+            'dark:bg-[linear-gradient(to_right,hsla(231,49%,13%,0.8)0%,hsla(242,67%,55%,0.8)40%,hsla(242,93%,65%,0.8)100%)]',
+          )}
+        />
+      )}
+      <div
+        className={twMerge(
+          'relative flex-1 flex flex-col justify-between py-3 px-6 overflow-hidden',
+          'bg-[linear-gradient(180deg,rgba(184,196,255,0.20)0%,rgba(236,239,255,0.20)100%),linear-gradient(180deg,rgba(255,255,255,0.50)0%,rgba(255,255,255,0.30)100%)]',
+          'dark:bg-[linear-gradient(180deg,rgba(17,22,50,0.20)0%,rgba(21,37,117,0.20)100%),linear-gradient(180deg,rgba(43,47,64,0.50)0%,rgba(43,47,64,0.30)100%)]',
+          'hover:before:absolute hover:before:inset-0 hover:before:bg-cover hover:before:bg-no-repeat hover:before:opacity-50 hover:before:pointer-events-none',
+          "hover:before:bg-[url('/static/assets/blueprints/grid-bg.png')] dark:hover:before:bg-[url('/static/assets/blueprints/grid-bg-dark.png')]",
+        )}
+      >
+        <div className="space-y-3">
+          <div className="py-2 flex items-center gap-2 border-b border-mono-60 dark:border-mono-170">
+            <Image
+              src={imgUrl}
+              width={72}
+              height={72}
+              alt={name}
+              className="rounded-full bg-center flex-shrink-0"
+              fill={false}
+            />
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-2">
+                <div className="min-w-0 flex-1">
+                  <Typography
+                    variant="h5"
+                    className="truncate text-mono-180 dark:text-mono-20 group-hover:text-mono-200 dark:group-hover:text-mono-0"
+                  >
+                    {name}
+                  </Typography>
+                </div>
+                {isBoosted && (
+                  <div
+                    className={twMerge(
+                      'px-2 py-1 rounded-full border border-purple-50 flex items-center gap-0.5',
+                      'shadow-[0px_-7px_11px_0px_rgba(185,183,255,0.24)] dark:shadow-[0px_-7px_11px_0px_rgba(185,183,255,0.12)]',
+                    )}
+                  >
+                    <SparklingIcon className="fill-purple-60 dark:fill-purple-40" />
+                    <Typography
+                      variant="body4"
+                      className="text-purple-60 dark:text-purple-40"
+                    >
+                      Boosted
+                    </Typography>
+                  </div>
+                )}
+              </div>
+              <Typography
+                variant="body2"
+                className="text-mono-120 dark:text-mono-100"
+              >
+                {shortenHex(address)}
+              </Typography>
+            </div>
+          </div>
+
+          <Typography
+            variant="body2"
+            className="text-mono-120 dark:text-mono-100 group-hover:text-mono-200 dark:group-hover:text-mono-0"
+          >
+            {formatDescription(description)}
+          </Typography>
+        </div>
+
+        <div className="w-full flex gap-1">
+          <div className="flex-1 space-y-2">
+            <Typography
+              variant="body2"
+              className="text-mono-120 dark:text-mono-100"
+            >
+              Restakers
+            </Typography>
+            <Typography variant="h5">{restakersCount}</Typography>
+          </div>
+          <div className="flex-1 space-y-2">
+            <Typography
+              variant="body2"
+              className="text-mono-120 dark:text-mono-100"
+            >
+              Operators
+            </Typography>
+            <Typography variant="h5">{operatorsCount}</Typography>
+          </div>
+          <div className="flex-1 space-y-2">
+            <Typography
+              variant="body2"
+              className="text-mono-120 dark:text-mono-100"
+            >
+              TVL
+            </Typography>
+            <Typography variant="h5">{tvl}</Typography>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+function formatDescription(description: string): string {
+  const maxLength = 200;
+  const ellipsis = '...';
+
+  if (description.length > maxLength + ellipsis.length) {
+    return description.slice(0, maxLength) + ellipsis;
+  }
+
+  return description;
+}
diff --git a/apps/tangle-dapp/app/blueprints/TopBanner.tsx b/apps/tangle-dapp/app/blueprints/TopBanner.tsx
new file mode 100644
index 0000000000..b30bf54bb2
--- /dev/null
+++ b/apps/tangle-dapp/app/blueprints/TopBanner.tsx
@@ -0,0 +1,33 @@
+import { ArrowRight } from '@webb-tools/icons';
+import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
+import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
+import { FC } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+const TopBanner: FC = () => {
+  return (
+    <div
+      className={twMerge(
+        'px-6 py-9 rounded-xl bg-center bg-cover bg-no-repeat',
+        'bg-[url(/static/assets/blueprints/top-banner.png)]',
+        'dark:bg-[url(/static/assets/blueprints/top-banner-dark.png)]',
+      )}
+    >
+      <div className="max-w-[415px] space-y-3">
+        <Typography variant="h4" className="text-mono-0">
+          Create your first{' '}
+          <span className="text-blue-40 dark:text-blue-40">Blueprint</span>
+        </Typography>
+        <Typography variant="body1" className="text-mono-60 dark:text-mono-100">
+          Set up a minimal Tangle Blueprint in minutes accompanied by a
+          step-by-step guide.
+        </Typography>
+        <Button rightIcon={<ArrowRight size="lg" className="!fill-mono-0" />}>
+          Create Blueprint
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default TopBanner;
diff --git a/apps/tangle-dapp/app/blueprints/page.tsx b/apps/tangle-dapp/app/blueprints/page.tsx
new file mode 100644
index 0000000000..a0f6167b1a
--- /dev/null
+++ b/apps/tangle-dapp/app/blueprints/page.tsx
@@ -0,0 +1,24 @@
+import { Metadata } from 'next';
+import { FC } from 'react';
+
+import createPageMetadata from '../../utils/createPageMetadata';
+import BlueprintListing from './BlueprintListing';
+import TopBanner from './TopBanner';
+
+export const dynamic = 'force-static';
+
+export const metadata: Metadata = createPageMetadata({
+  title: 'Blueprints',
+});
+
+const BlueprintsPage: FC = () => {
+  return (
+    <div className="space-y-5">
+      <TopBanner />
+
+      <BlueprintListing />
+    </div>
+  );
+};
+
+export default BlueprintsPage;
diff --git a/apps/tangle-dapp/app/blueprints/useBlueprintListing.ts b/apps/tangle-dapp/app/blueprints/useBlueprintListing.ts
new file mode 100644
index 0000000000..e1661d9288
--- /dev/null
+++ b/apps/tangle-dapp/app/blueprints/useBlueprintListing.ts
@@ -0,0 +1,184 @@
+'use client';
+
+import { Blueprint, BlueprintCategory } from '../../types';
+
+export default function useBlueprintListing(): Blueprint[] {
+  return [
+    {
+      name: 'Groth16 ZK-SaaS',
+      address: '0x1234567890123456789012345678901234567890',
+      category: BlueprintCategory.CATEGORY_1,
+      imgUrl:
+        'https://images.unsplash.com/photo-1641194255129-bd39dd8112de?q=80&w=2380&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      description:
+        'A ZK-SaaS service utilizing the Groth16 proving system for efficient and secure zero-knowledge proofs. Ideal for applications requiring fast verification times.',
+      restakersCount: 10,
+      operatorsCount: 2,
+      tvl: '$100',
+      isBoosted: true,
+    },
+    {
+      name: 'Plonk Prover Pro',
+      address: '0x2345678901234567890123456789012345678901',
+      category: BlueprintCategory.CATEGORY_2,
+      imgUrl:
+        'https://images.unsplash.com/photo-1641194255129-bd39dd8112de?q=80&w=2380&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      description: 'Advanced PLONK-based ZK proof generation.',
+      restakersCount: 15,
+      operatorsCount: 3,
+      tvl: '$150',
+      isBoosted: true,
+    },
+    {
+      name: 'Sonic ZK Solutions',
+      address: '0x3456789012345678901234567890123456789012',
+      category: BlueprintCategory.CATEGORY_1,
+      imgUrl:
+        'https://images.unsplash.com/photo-1641194255129-bd39dd8112de?q=80&w=2380&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      description:
+        'High-speed ZK-SNARK service leveraging the Sonic protocol. Our platform offers scalable and efficient zero-knowledge proofs for a wide range of applications, from privacy-preserving transactions to secure data verification.',
+      restakersCount: 8,
+      operatorsCount: 2,
+      tvl: '$80',
+      isBoosted: true,
+    },
+    {
+      name: 'Marlin ZK Platform',
+      address: '0x4567890123456789012345678901234567890123',
+      category: BlueprintCategory.CATEGORY_3,
+      imgUrl:
+        'https://images.unsplash.com/photo-1641194255129-bd39dd8112de?q=80&w=2380&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      description: 'Scalable ZK proof generation using Marlin.',
+      restakersCount: 12,
+      operatorsCount: 4,
+      tvl: '$120',
+    },
+    {
+      name: 'Bulletproofs ZK Service',
+      address: '0x5678901234567890123456789012345678901234',
+      category: BlueprintCategory.CATEGORY_1,
+      imgUrl:
+        'https://images.unsplash.com/photo-1641194255129-bd39dd8112de?q=80&w=2380&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      description:
+        'Efficient ZK range proofs using Bulletproofs technology. Our service provides compact zero-knowledge proofs without a trusted setup, making it ideal for cryptocurrency applications and privacy-preserving smart contracts.',
+      restakersCount: 6,
+      operatorsCount: 1,
+      tvl: '$60',
+    },
+    {
+      name: 'ZK-STARK Engine',
+      address: '0x6789012345678901234567890123456789012345',
+      category: BlueprintCategory.CATEGORY_3,
+      imgUrl:
+        'https://images.unsplash.com/photo-1641194255129-bd39dd8112de?q=80&w=2380&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      description: 'Scalable ZK-STARK proof generation service.',
+      restakersCount: 20,
+      operatorsCount: 5,
+      tvl: '$200',
+    },
+    {
+      name: 'Ligero ZK Platform',
+      address: '0x7890123456789012345678901234567890123456',
+      category: BlueprintCategory.CATEGORY_3,
+      imgUrl:
+        'https://images.unsplash.com/photo-1641194255129-bd39dd8112de?q=80&w=2380&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      description:
+        'Lightweight ZK proof service using the Ligero protocol. We offer fast and efficient zero-knowledge proofs suitable for IoT devices and resource-constrained environments.',
+      restakersCount: 7,
+      operatorsCount: 2,
+      tvl: '$70',
+    },
+    {
+      name: 'Aurora ZK Cloud',
+      address: '0x8901234567890123456789012345678901234567',
+      category: BlueprintCategory.CATEGORY_2,
+      imgUrl:
+        'https://images.unsplash.com/photo-1641194255129-bd39dd8112de?q=80&w=2380&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      description: 'Cloud-based ZK proofs.',
+      restakersCount: 18,
+      operatorsCount: 4,
+      tvl: '$180',
+    },
+    {
+      name: 'Fractal ZK Services',
+      address: '0x9012345678901234567890123456789012345678',
+      category: BlueprintCategory.CATEGORY_1,
+      imgUrl:
+        'https://images.unsplash.com/photo-1641194255129-bd39dd8112de?q=80&w=2380&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      description:
+        'Recursive ZK proof generation using fractal architecture. Our innovative approach allows for highly scalable and efficient proofs, enabling complex computations to be verified quickly and securely.',
+      restakersCount: 14,
+      operatorsCount: 3,
+      tvl: '$140',
+    },
+    {
+      name: 'Halo2 ZK Platform',
+      address: '0xa123456789012345678901234567890123456789',
+      category: BlueprintCategory.CATEGORY_2,
+      imgUrl:
+        'https://images.unsplash.com/photo-1641194255129-bd39dd8112de?q=80&w=2380&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      description: 'ZK proofs with Halo2 system.',
+      restakersCount: 16,
+      operatorsCount: 3,
+      tvl: '$160',
+    },
+    {
+      name: 'Nova ZK Accelerator',
+      address: '0xb234567890123456789012345678901234567890',
+      category: BlueprintCategory.CATEGORY_2,
+      imgUrl:
+        'https://images.unsplash.com/photo-1641194255129-bd39dd8112de?q=80&w=2380&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      description:
+        'High-performance ZK proof generation leveraging the Nova protocol. We specialize in accelerating zero-knowledge computations for blockchain scaling solutions and privacy-preserving applications.',
+      restakersCount: 11,
+      operatorsCount: 2,
+      tvl: '$110',
+    },
+    {
+      name: 'Hydra ZK Network',
+      address: '0xc345678901234567890123456789012345678901',
+      category: BlueprintCategory.CATEGORY_3,
+      imgUrl:
+        'https://images.unsplash.com/photo-1641194255129-bd39dd8112de?q=80&w=2380&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      description: 'Distributed ZK proofs.',
+      restakersCount: 25,
+      operatorsCount: 6,
+      tvl: '$250',
+    },
+    {
+      name: 'Quantum ZK Solutions',
+      address: '0xd456789012345678901234567890123456789012',
+      category: BlueprintCategory.CATEGORY_1,
+      imgUrl:
+        'https://images.unsplash.com/photo-1641194255129-bd39dd8112de?q=80&w=2380&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      description:
+        'Next-generation ZK proofs leveraging quantum-resistant algorithms. Our cutting-edge service ensures long-term security for zero-knowledge applications, protecting against potential threats from quantum computing advancements.',
+      restakersCount: 9,
+      operatorsCount: 2,
+      tvl: '$90',
+    },
+    {
+      name: 'Mina ZK Provider',
+      address: '0xe567890123456789012345678901234567890123',
+      category: BlueprintCategory.CATEGORY_1,
+      imgUrl:
+        'https://images.unsplash.com/photo-1641194255129-bd39dd8112de?q=80&w=2380&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      description: 'Lightweight ZK proofs with Mina.',
+      restakersCount: 13,
+      operatorsCount: 3,
+      tvl: '$130',
+    },
+    {
+      name: 'ZK Rollup Express',
+      address: '0xf678901234567890123456789012345678901234',
+      category: BlueprintCategory.CATEGORY_1,
+      imgUrl:
+        'https://images.unsplash.com/photo-1641194255129-bd39dd8112de?q=80&w=2380&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      description:
+        'Specialized ZK proof service for Layer 2 rollups. Our platform enables high-throughput, low-cost transactions on Ethereum by leveraging zero-knowledge proofs to compress and verify batches of transactions off-chain.',
+      restakersCount: 22,
+      operatorsCount: 5,
+      tvl: '$220',
+    },
+  ];
+}
diff --git a/apps/tangle-dapp/components/Breadcrumbs/utils.tsx b/apps/tangle-dapp/components/Breadcrumbs/utils.tsx
index 49f0d2a474..5b30136d1b 100644
--- a/apps/tangle-dapp/components/Breadcrumbs/utils.tsx
+++ b/apps/tangle-dapp/components/Breadcrumbs/utils.tsx
@@ -22,6 +22,7 @@ const BREADCRUMB_ICONS: Record<PagePath, (props: IconBase) => JSX.Element> = {
   [PagePath.CLAIM_AIRDROP]: GiftLineIcon,
   [PagePath.ACCOUNT]: UserFillIcon,
   [PagePath.NOMINATION]: CoinLine,
+  [PagePath.BLUEPRINTS]: GridFillIcon,
   [PagePath.SERVICES]: GridFillIcon,
   [PagePath.RESTAKE]: TokenSwapFill,
   [PagePath.RESTAKE_DEPOSIT]: TokenSwapFill,
diff --git a/apps/tangle-dapp/components/Sidebar/sidebarProps.ts b/apps/tangle-dapp/components/Sidebar/sidebarProps.ts
index df47c38d72..2da9981e03 100644
--- a/apps/tangle-dapp/components/Sidebar/sidebarProps.ts
+++ b/apps/tangle-dapp/components/Sidebar/sidebarProps.ts
@@ -7,6 +7,7 @@ import {
   DocumentationIcon,
   GiftLineIcon,
   GlobalLine,
+  GridFillIcon,
   PolkadotJs,
   ShuffleLine,
   TokenSwapFill,
@@ -47,6 +48,15 @@ const SIDEBAR_STATIC_ITEMS: SideBarItemProps[] = [
     subItems: [],
     environments: ['development', 'staging', 'test'],
   },
+  {
+    name: 'Blueprints',
+    href: PagePath.BLUEPRINTS,
+    isInternal: true,
+    isNext: true,
+    Icon: GridFillIcon,
+    subItems: [],
+    environments: ['development', 'staging', 'test'],
+  },
   {
     name: 'Restake',
     // The default restake page is the deposit page.
diff --git a/apps/tangle-dapp/public/static/assets/bg-dark.jpeg b/apps/tangle-dapp/public/static/assets/bg-dark.jpeg
deleted file mode 100644
index 53d5ef5ed1..0000000000
Binary files a/apps/tangle-dapp/public/static/assets/bg-dark.jpeg and /dev/null differ
diff --git a/apps/tangle-dapp/public/static/assets/bg.jpeg b/apps/tangle-dapp/public/static/assets/bg.jpeg
deleted file mode 100644
index 9e2ce9267f..0000000000
Binary files a/apps/tangle-dapp/public/static/assets/bg.jpeg and /dev/null differ
diff --git a/apps/tangle-dapp/public/static/assets/blueprints/grid-bg-dark.png b/apps/tangle-dapp/public/static/assets/blueprints/grid-bg-dark.png
new file mode 100644
index 0000000000..06d76010cf
Binary files /dev/null and b/apps/tangle-dapp/public/static/assets/blueprints/grid-bg-dark.png differ
diff --git a/apps/tangle-dapp/public/static/assets/blueprints/grid-bg.png b/apps/tangle-dapp/public/static/assets/blueprints/grid-bg.png
new file mode 100644
index 0000000000..44a32e4b83
Binary files /dev/null and b/apps/tangle-dapp/public/static/assets/blueprints/grid-bg.png differ
diff --git a/apps/tangle-dapp/public/static/assets/blueprints/top-banner-dark.png b/apps/tangle-dapp/public/static/assets/blueprints/top-banner-dark.png
new file mode 100644
index 0000000000..fe460715e2
Binary files /dev/null and b/apps/tangle-dapp/public/static/assets/blueprints/top-banner-dark.png differ
diff --git a/apps/tangle-dapp/public/static/assets/blueprints/top-banner.png b/apps/tangle-dapp/public/static/assets/blueprints/top-banner.png
new file mode 100644
index 0000000000..c3333e7fb4
Binary files /dev/null and b/apps/tangle-dapp/public/static/assets/blueprints/top-banner.png differ
diff --git a/apps/tangle-dapp/types/index.ts b/apps/tangle-dapp/types/index.ts
index 95c516f39d..32baf7af18 100755
--- a/apps/tangle-dapp/types/index.ts
+++ b/apps/tangle-dapp/types/index.ts
@@ -3,6 +3,7 @@ import type {
   SpStakingPagedExposureMetadata,
 } from '@polkadot/types/lookup';
 import type { BN } from '@polkadot/util';
+import type { HexString } from '@polkadot/util/types';
 import type { WebbProviderType } from '@webb-tools/abstract-api-provider/types';
 
 export enum PagePath {
@@ -10,6 +11,7 @@ export enum PagePath {
   CLAIM_AIRDROP = '/claim',
   ACCOUNT = '/',
   BRIDGE = '/bridge',
+  BLUEPRINTS = '/blueprints',
   SERVICES = '/services',
   RESTAKE = '/restake',
   RESTAKE_DEPOSIT = '/restake/deposit',
@@ -239,3 +241,22 @@ export type TangleTokenSymbol = 'tTNT' | 'TNT';
  * @returns The success message.
  */
 export type GetSuccessMessageFunction<Context> = (context: Context) => string;
+
+// add Blueprint
+export type Blueprint = {
+  name: string;
+  address: HexString;
+  imgUrl: string;
+  category: BlueprintCategory;
+  description: string;
+  restakersCount: number;
+  operatorsCount: number;
+  tvl: string;
+  isBoosted?: boolean;
+};
+
+export enum BlueprintCategory {
+  CATEGORY_1 = 'Category 1',
+  CATEGORY_2 = 'Category 2',
+  CATEGORY_3 = 'Category 3',
+}
diff --git a/next.config.cjs b/next.config.cjs
index a66e79c37b..9a6580c4ba 100644
--- a/next.config.cjs
+++ b/next.config.cjs
@@ -33,6 +33,9 @@ const nextConfig = {
       },
     ];
   },
+  images: {
+    domains: ['images.unsplash.com'], // TODO: update when adding api for blueprints
+  },
 };
 
 module.exports = nextConfig;