Template Gallery: migration to 6.1.0

enable menu for editor redisign move frontend code to modules
2026-05-23 17:19:37 +02:00 · 2026-02-02 17:05:02 +01:00
parent 522704855f
commit 73162171ee
54 changed files with 161 additions and 116 deletions
--- a/services/web/modules/template-gallery/app/src/TemplateGalleryController.mjs
+++ b/services/web/modules/template-gallery/app/src/TemplateGalleryController.mjs
@@ -1,12 +1,16 @@
+import Path from 'node:path'
+import { fileURLToPath } from 'node:url'
 import logger from '@overleaf/logger'
 import ErrorController from '../../../../app/src/Features/Errors/ErrorController.mjs'
 import Errors from '../../../../app/src/Features/Errors/Errors.js'
-import SessionManager from '../../../../app/src/Features/Authentication/SessionManager.js'
+import SessionManager from '../../../../app/src/Features/Authentication/SessionManager.mjs'
 import TemplateGalleryManager from'./TemplateGalleryManager.mjs'
 import { getUserName } from './TemplateGalleryHelper.mjs'
 import { TemplateNameConflictError, RecompileRequiredError } from './TemplateErrors.mjs'
 import Settings from '@overleaf/settings'

+const __dirname = Path.dirname(fileURLToPath(import.meta.url))
+
 async function createTemplateFromProject(req, res, next) {
  const t = req.i18n.translate
  try {
@@ -108,7 +112,7 @@ async function templatesCategoryPage(req, res, next) {
      category = null
      title = t('templates_page_title')
    }
-    res.render('template_gallery/template-gallery', {
+    res.render(Path.resolve(__dirname, '../views/template_gallery/template-gallery'), {
      title,
      category,
    })
@@ -121,7 +125,7 @@ async function templateDetailsPage(req, res, next) {
  const t = req.i18n.translate
  try {
    const template = await TemplateGalleryManager.getTemplate('_id', req.params.template_id)
-    res.render('template_gallery/template', {
+    res.render(Path.resolve(__dirname, '../views/template_gallery/template'), {
      title: `${t('template')}: ${template.name}`,
      template: JSON.stringify(template),
      languages: Settings.languages,
--- a/services/web/modules/template-gallery/app/src/TemplateGalleryHelper.mjs
+++ b/services/web/modules/template-gallery/app/src/TemplateGalleryHelper.mjs
@@ -9,9 +9,9 @@ import ProjectZipStreamManager from '../../../../app/src/Features/Downloads/Proj
 import DocumentUpdaterHandler from '../../../../app/src/Features/DocumentUpdater/DocumentUpdaterHandler.mjs'
 import ClsiManager from '../../../../app/src/Features/Compile/ClsiManager.mjs'
 import CompileManager from '../../../../app/src/Features/Compile/CompileManager.mjs'
-import UserGetter from '../../../../app/src/Features/User/UserGetter.js'
+import UserGetter from '../../../../app/src/Features/User/UserGetter.mjs'
 import { fetchStreamWithResponse } from '@overleaf/fetch-utils'
-import { Template } from './models/Template.js'
+import { Template } from './models/Template.mjs'
 import { RecompileRequiredError } from './TemplateErrors.mjs'
 import { cleanHtml }  from './CleanHtml.mjs'

--- a/services/web/modules/template-gallery/app/src/TemplateGalleryManager.mjs
+++ b/services/web/modules/template-gallery/app/src/TemplateGalleryManager.mjs
@@ -3,7 +3,7 @@ import logger from '@overleaf/logger'
 import { Readable } from 'stream'
 import settings from '@overleaf/settings'
 import { OError } from '../../../../app/src/Features/Errors/Errors.js'
-import { Template } from './models/Template.js'
+import { Template } from './models/Template.mjs'
 import {
  validateTemplateInput,
  renderTemplateHtmlFields,
--- a/services/web/modules/template-gallery/app/src/TemplateGalleryRouter.mjs
+++ b/services/web/modules/template-gallery/app/src/TemplateGalleryRouter.mjs
@@ -2,7 +2,7 @@ import logger from '@overleaf/logger'

 import AuthenticationController from '../../../../app/src/Features/Authentication/AuthenticationController.mjs'
 import RateLimiterMiddleware from '../../../../app/src/Features/Security/RateLimiterMiddleware.mjs'
-import { RateLimiter } from '../../../../app/src/infrastructure/RateLimiter.js'
+import { RateLimiter } from '../../../../app/src/infrastructure/RateLimiter.mjs'
 import TemplateGalleryController from './TemplateGalleryController.mjs'

 const rateLimiterNewTemplate = new RateLimiter('create-template-from-project', {
--- a/services/web/modules/template-gallery/app/src/models/Template.mjs
+++ b/services/web/modules/template-gallery/app/src/models/Template.mjs
@@ -1,9 +1,9 @@
-const mongoose = require('../../../../../app/src/infrastructure/Mongoose')
+import mongoose from '../../../../../app/src/infrastructure/Mongoose.mjs'

 const { Schema } = mongoose
 const { ObjectId } = Schema

-const TemplateSchema = new Schema(
+export const TemplateSchema = new Schema(
  {
    name: { type: String, required: true },
    category: { type: String, required: true },
@@ -29,5 +29,4 @@ const TemplateSchema = new Schema(
  { minimize: false }
 )

-exports.Template = mongoose.model('Template', TemplateSchema)
-exports.TemplateSchema = TemplateSchema
+export const Template = mongoose.model('Template', TemplateSchema)
--- a/services/web/modules/template-gallery/app/views/template_gallery/template-gallery.pug
+++ b/services/web/modules/template-gallery/app/views/template_gallery/template-gallery.pug
@@ -0,0 +1,15 @@
+extends ../../../../../app/views/layout-react
+
+block entrypointVar
+	- entrypoint = 'modules/template-gallery/pages/template-gallery'
+
+block vars
+	- const suppressFooter = true
+	- const suppressPugCookieBanner = true
+	- isWebsiteRedesign = true
+
+block append meta
+	meta(name="ol-templateCategory" data-type="string" content=category)
+
+block content
+	#template-gallery-root
--- a/services/web/modules/template-gallery/app/views/template_gallery/template.pug
+++ b/services/web/modules/template-gallery/app/views/template_gallery/template.pug
@@ -0,0 +1,18 @@
+extends ../../../../../app/views/layout-react
+
+block entrypointVar
+	- entrypoint = 'modules/template-gallery/pages/template'
+
+block vars
+	- const suppressNavbar = true
+	- const suppressFooter = true
+	- isWebsiteRedesign = true
+
+block append meta
+	meta(name="ol-template" data-type="json" content=template)
+	meta(name="ol-languages" data-type="json" content=languages)
+	meta(name="ol-userIsAdmin" data-type="boolean" content=hasAdminAccess())
+
+block content
+	#template-root
+
--- a/services/web/modules/template-gallery/frontend/js/features/template-gallery/components/gallery-header-all.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template-gallery/components/gallery-header-all.tsx
@@ -0,0 +1,29 @@
+import { useTranslation } from 'react-i18next'
+import OLCol from '@/shared/components/ol/ol-col'
+import OLRow from '@/shared/components/ol/ol-row'
+
+export default function GalleryHeaderAll() {
+  const { t } = useTranslation()
+  return (
+    <div className="gallery-header">
+      <OLRow>
+        <OLCol md={12}>
+          <h1 className="gallery-title">
+            <span className="eyebrow-text">
+              <span aria-hidden="true">&#123;</span>
+              <span>{t('overleaf_template_gallery')}</span>
+              <span aria-hidden="true">&#125;</span>
+            </span>
+            {t('latex_templates')}
+          </h1>
+        </OLCol>
+      </OLRow>
+      <div className="row">
+        <div className="col-md-12">
+          <p className="gallery-summary">{t('latex_templates_for_journal_articles')}
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/services/web/modules/template-gallery/frontend/js/features/template-gallery/components/gallery-header-tagged.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template-gallery/components/gallery-header-tagged.tsx
@@ -0,0 +1,33 @@
+import getMeta from '@/utils/meta'
+import OLCol from '@/shared/components/ol/ol-col'
+import OLRow from '@/shared/components/ol/ol-row'
+import GallerySearchSortHeader from './gallery-search-sort-header'
+
+export default function GalleryHeaderTagged({ category }) {
+  const title = getMeta('og:title')
+  const { templateLinks } = getMeta('ol-ExposedSettings') || []
+
+  const description = templateLinks?.find(link => link.url.split("/").pop() === category)?.description
+  const gotoAllLink = (category !== 'all')
+  return (
+    <div className="tagged-header-container">
+      <GallerySearchSortHeader
+        gotoAllLink={gotoAllLink}
+      />
+      { category && (
+        <>
+          <OLRow>
+            <OLCol xs={12}>
+              <h1 className="gallery-title">{title}</h1>
+            </OLCol>
+          </OLRow>
+          <OLRow>
+            <OLCol lg={8}>
+              <p className="gallery-summary">{description}</p>
+            </OLCol>
+          </OLRow>
+        </>
+      )}
+    </div>
+  )
+}
--- a/services/web/modules/template-gallery/frontend/js/features/template-gallery/components/gallery-popular-tags.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template-gallery/components/gallery-popular-tags.tsx
@@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next'
+import getMeta from '@/utils/meta'
+
+export default function GalleryPopularTags() {
+  const { t } = useTranslation()
+  const { templateLinks } = getMeta('ol-ExposedSettings') || []
+
+  if(!templateLinks || templateLinks.length < 2) return null
+
+  return (
+    <div className="popular-tags">
+      <h1>{t('categories')}</h1>
+      <div className="row popular-tags-list">
+        {templateLinks?.filter(link => link.url.split("/").pop() !== "all").map((link, index) => (
+          <div key={index} className="gallery-thumbnail col-12 col-md-6 col-lg-4">
+            <a href={link.url}>
+              <div className="thumbnail-tag">
+                <img
+                  src={`/img/website-redesign/gallery/${link.url.split("/").pop()}.svg`}
+                  alt={link.name}
+                />
+              </div>
+              <span className="caption-title">{link.name}</span>
+            </a>
+            <p>{link.description}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
--- a/services/web/modules/template-gallery/frontend/js/features/template-gallery/components/gallery-search-sort-header.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template-gallery/components/gallery-search-sort-header.tsx
@@ -0,0 +1,78 @@
+import { useTemplateGalleryContext } from '../context/template-gallery-context'
+import { useTranslation } from 'react-i18next'
+import SearchForm from './search-form'
+import OLCol from '@/shared/components/ol/ol-col'
+import OLRow from '@/shared/components/ol/ol-row'
+import useSort from '../hooks/use-sort'
+import withContent, { SortBtnProps } from './sort/with-content'
+import MaterialIcon from '@/shared/components/material-icon'
+
+function SortBtn({ onClick, text, iconType, screenReaderText }: SortBtnProps) {
+  return (
+    <button
+      className="gallery-header-sort-btn inline-block"
+      onClick={onClick}
+      aria-label={screenReaderText}
+    >
+      <span>{text}</span>
+        {iconType ? (
+          <MaterialIcon type={iconType} />
+        ) : (
+          <MaterialIcon type="arrow_upward" style={{ visibility: 'hidden' }} />
+        )}
+    </button>
+  )
+}
+
+const SortByButton = withContent(SortBtn)
+
+export default function GallerySearchSortHeader( { gotoAllLink }: { boolean } ) {
+  const { t } = useTranslation()
+  const {
+    searchText,
+    setSearchText,
+    sort,
+  } = useTemplateGalleryContext()
+
+  const { handleSort } = useSort()
+  return (
+    <OLRow className="align-items-center">
+      {gotoAllLink ? (
+      <OLCol className="col-auto">
+          <a className="previous-page-link" href="/templates/all">
+            <i className="material-symbols material-symbols-rounded" aria-hidden="true">arrow_left_alt</i>
+            {t('all_templates')}
+          </a>
+        </OLCol>
+      ) : (
+      <OLCol className="col-auto">
+          <a className="previous-page-link" href="/templates">
+            <i className="material-symbols material-symbols-rounded" aria-hidden="true">arrow_left_alt</i>
+            {t('template_gallery')}
+          </a>
+        </OLCol>
+      )}
+      <OLCol className="d-flex justify-content-center gap-2">
+        <SortByButton
+          column="lastUpdated"
+          text={t('last_updated')}
+          sort={sort}
+          onClick={() => handleSort('lastUpdated')}
+        />
+
+        <SortByButton
+          column="name"
+          text={t('title')}
+          sort={sort}
+          onClick={() => handleSort('name')}
+        />
+      </OLCol>
+      <OLCol xs={3} className="ms-auto" >
+        <SearchForm
+          inputValue={searchText}
+          setInputValue={setSearchText}
+        />
+      </OLCol>
+    </OLRow>
+  )
+}
--- a/services/web/modules/template-gallery/frontend/js/features/template-gallery/components/pagination.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template-gallery/components/pagination.tsx
@@ -0,0 +1,80 @@
+import { useTranslation } from 'react-i18next'
+
+export default function Pagination({ currentPage, totalPages, onPageChange }) {
+  const { t } = useTranslation()
+  if (totalPages <= 1) return null
+
+  const pageNumbers = []
+  let startPage = Math.max(1, currentPage - 4)
+  let endPage = Math.min(totalPages, currentPage + 4)
+
+  if (startPage > 1) {
+    pageNumbers.push(1)
+    if (startPage > 2) {
+      pageNumbers.push("...")
+    }
+  }
+
+  for (let i = startPage; i <= endPage; i++) {
+    pageNumbers.push(i)
+  }
+
+  if (endPage < totalPages) {
+    if (endPage < totalPages - 1) {
+      pageNumbers.push("...")
+    }
+    pageNumbers.push(totalPages)
+  }
+
+  return (
+    <nav role="navigation" aria-label={t('pagination_navigation')}>
+      <ul className="pagination">
+{/*
+        {currentPage > 1 && (
+          <li>
+            <button aria-label={t('go_to_first_page')} onClick={() => onPageChange(1)}>
+              &lt;&lt; {t('first')}
+            </button>
+          </li>
+        )}
+*/}
+        {currentPage > 1 && (
+          <li>
+            <button aria-label={t('go_prev_page')} onClick={() => onPageChange(currentPage - 1)}>
+              &lt; {t('prev')}
+            </button>
+          </li>
+        )}
+        {pageNumbers.map((page, index) => (
+          <li key={index} className={page === currentPage ? "active" : ""}>
+            {page === "..." ? (
+              <span aria-hidden="true">{page}</span>
+            ) : page === currentPage ? (
+              <span aria-label={t('page_current', { page })} aria-current="true">{page}</span>
+            ) : (
+              <button aria-label={t('go_page', { page })} onClick={() => onPageChange(page)}>
+                {page}
+              </button>
+            )}
+          </li>
+        ))}
+        {currentPage < totalPages && (
+          <li>
+            <button aria-label={t('go_next_page')} onClick={() => onPageChange(currentPage + 1)}>
+              {t('next')} &gt;
+            </button>
+          </li>
+        )}
+{/*
+        {currentPage < totalPages && (
+          <li>
+            <button aria-label={t('go_to_last_page')} onClick={() => onPageChange(totalPages)}>
+              {t('last')} &gt;&gt;
+            </button>
+          </li>
+        )}
+*/}
+      </ul>
+    </nav>
+  )
+}
--- a/services/web/modules/template-gallery/frontend/js/features/template-gallery/components/search-form.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template-gallery/components/search-form.tsx
@@ -0,0 +1,61 @@
+import { useTranslation } from 'react-i18next'
+import { MergeAndOverride } from '../../../../../../../types/utils'
+import OLForm from '@/shared/components/ol/ol-form'
+import OLFormControl from '@/shared/components/ol/ol-form-control'
+import MaterialIcon from '@/shared/components/material-icon'
+
+type SearchFormOwnProps = {
+  inputValue: string
+  setInputValue: (input: string) => void
+}
+
+type SearchFormProps = MergeAndOverride<
+  React.ComponentProps<typeof OLForm>,
+  SearchFormOwnProps
+>
+
+export default function SearchForm({
+  inputValue,
+  setInputValue,
+}: SearchFormProps) {
+  const { t } = useTranslation()
+  let placeholderMessage = t('search')
+  const placeholder = `${placeholderMessage}…`
+
+  const handleChange: React.ComponentProps<typeof OLFormControl
+  >['onChange'] = e => {
+    setInputValue(e.target.value)
+  }
+
+  const handleClear = () => setInputValue('')
+
+  return (
+    <OLForm
+      role="search"
+      onSubmit={e => e.preventDefault()}
+    >
+      <OLFormControl
+        className="gallery-search-form-control"
+        id="gallery-search-form-control"
+        type="text"
+        value={inputValue}
+        onChange={handleChange}
+        placeholder={placeholder}
+        aria-label={placeholder}
+        prepend={<MaterialIcon type="search" />}
+        append={
+          inputValue.length > 0 && (
+            <button
+              type="button"
+              className="form-control-search-clear-btn"
+              aria-label={t('clear_search')}
+              onClick={handleClear}
+            >
+              <MaterialIcon type="clear" />
+            </button>
+          )
+        }
+      />
+    </OLForm>
+  )
+}
--- a/services/web/modules/template-gallery/frontend/js/features/template-gallery/components/sort/with-content.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template-gallery/components/sort/with-content.tsx
@@ -0,0 +1,46 @@
+import { useTranslation } from 'react-i18next'
+import { Sort } from '../../types/api'
+
+type SortBtnOwnProps = {
+  column: string
+  sort: Sort
+  text: string
+  onClick: () => void
+}
+
+type WithContentProps = {
+  iconType?: string
+  screenReaderText: string
+}
+
+export type SortBtnProps = SortBtnOwnProps & WithContentProps
+
+function withContent<T extends SortBtnOwnProps>(
+  WrappedComponent: React.ComponentType<T & WithContentProps>
+) {
+  function WithContent(hocProps: T) {
+    const { t } = useTranslation()
+    const { column, text, sort } = hocProps
+    let iconType
+
+    let screenReaderText = t('sort_by_x', { x: text })
+
+    if (column === sort.by) {
+      iconType =
+        sort.order === 'asc' ? 'arrow_upward_alt' : 'arrow_downward_alt'
+      screenReaderText = t('reverse_x_sort_order', { x: text })
+    }
+
+    return (
+      <WrappedComponent
+        {...hocProps}
+        iconType={iconType}
+        screenReaderText={screenReaderText}
+      />
+    )
+  }
+
+  return WithContent
+}
+
+export default withContent
--- a/services/web/modules/template-gallery/frontend/js/features/template-gallery/components/template-gallery-entry.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template-gallery/components/template-gallery-entry.tsx
@@ -0,0 +1,29 @@
+import { memo } from 'react'
+import { cleanHtml } from '../../../../../app/src/CleanHtml.mjs'
+
+function TemplateGalleryEntry({ template }) {
+  return (
+    <div className={"gallery-thumbnail col-12 col-md-6 col-lg-4"}>
+      <a href={`/template/${template.id}`} className="thumbnail-link">
+        <div className="thumbnail">
+          <img
+            src={`/template/${template.id}/preview?version=${template.version}&style=thumbnail`}
+            alt={template.name}
+          />
+        </div>
+        <span className="gallery-list-item-title">
+          <span className="caption-title">{template.name}</span>
+          <span className="badge-container"></span>
+        </span>
+      </a>
+      <div className="caption">
+        <p className="caption-description" dangerouslySetInnerHTML={{ __html: cleanHtml(template.description, 'plainText') }} />
+      </div>
+      <div className="author-name">
+        <div dangerouslySetInnerHTML={{ __html: cleanHtml(template.author, 'plainText') }} />
+      </div>
+    </div>
+  )
+}
+
+export default memo(TemplateGalleryEntry)
--- a/services/web/modules/template-gallery/frontend/js/features/template-gallery/components/template-gallery-root.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template-gallery/components/template-gallery-root.tsx
@@ -0,0 +1,64 @@
+import { TemplateGalleryProvider } from '../context/template-gallery-context'
+import { useTranslation } from 'react-i18next'
+import useWaitForI18n from '@/shared/hooks/use-wait-for-i18n'
+import withErrorBoundary from '@/infrastructure/error-boundary'
+import { GenericErrorBoundaryFallback } from '@/shared/components/generic-error-boundary-fallback'
+import getMeta from '@/utils/meta'
+import DefaultNavbar from '@/shared/components/navbar/default-navbar'
+import Footer from '@/shared/components/footer/footer'
+import GalleryHeaderTagged from './gallery-header-tagged'
+import GalleryHeaderAll from './gallery-header-all'
+import TemplateGallery from './template-gallery'
+import GallerySearchSortHeader from './gallery-search-sort-header'
+import GalleryPopularTags from './gallery-popular-tags'
+
+function TemplateGalleryRoot() {
+  const { isReady } = useWaitForI18n()
+  if (!isReady) {
+    return null
+  }
+  return (
+    <TemplateGalleryProvider>
+      <TemplateGalleryPageContent />
+    </TemplateGalleryProvider>
+  )
+}
+
+function TemplateGalleryPageContent() {
+  const { t } = useTranslation()
+  const navbarProps = getMeta('ol-navbar')
+  const footerProps = getMeta('ol-footer')
+  const category = getMeta('ol-templateCategory')
+
+  return (
+    <>
+      <DefaultNavbar {...navbarProps} />
+      <main id="main-content"
+        className={`content content-page gallery ${category ? 'gallery-tagged' : ''}`}
+      >
+        <div className="container">
+          {category ? (
+            <>
+              <GalleryHeaderTagged category={category} />
+              <TemplateGallery />
+            </>
+          ) : (
+            <>
+              <GalleryHeaderAll />
+              <GalleryPopularTags />
+              <hr className="w-full border-muted mb-5" />
+              <div className="recent-docs">
+                <GallerySearchSortHeader />
+                <h2>{t('all_templates')}</h2>
+                <TemplateGallery />
+              </div>
+            </>
+          )}
+        </div>
+      </main>
+      <Footer {...footerProps} />
+    </>
+  )
+}
+
+export default withErrorBoundary(TemplateGalleryRoot, GenericErrorBoundaryFallback)
--- a/services/web/modules/template-gallery/frontend/js/features/template-gallery/components/template-gallery.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template-gallery/components/template-gallery.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import OLRow from '@/shared/components/ol/ol-row'
+import { useTemplateGalleryContext } from '../context/template-gallery-context'
+import TemplateGalleryEntry from './template-gallery-entry'
+import Pagination from './pagination'
+
+export default function TemplateGallery() {
+  const { t } = useTranslation()
+  const {
+    searchText,
+    sort,
+    visibleTemplates,
+  } = useTemplateGalleryContext()
+
+  const templatesPerPage = 6
+  const totalPages = Math.ceil(visibleTemplates.length / templatesPerPage)
+
+  const [currentPage, setCurrentPage] = useState(1)
+
+  useEffect(() => {
+    setCurrentPage(1)
+  }, [sort])
+
+  const [lastNonSearchPage, setLastNonSearchPage] = useState(1)
+  const [isSearching, setIsSearching] = useState(false)
+  useEffect(() => {
+    if (searchText.length > 0) {
+      if (!isSearching) {
+        setLastNonSearchPage(currentPage)
+        setIsSearching(true)
+      }
+      setCurrentPage(1)
+    } else {
+      if (isSearching) {
+        setCurrentPage(lastNonSearchPage)
+        setIsSearching(false)
+      }
+    }
+  }, [searchText])
+
+  const startIndex = (currentPage - 1) * templatesPerPage
+  const currentTemplates = visibleTemplates.slice(startIndex, startIndex + templatesPerPage)
+
+  return (
+    <>
+      <OLRow className="gallery-container">
+        {currentTemplates.length > 0 ? (
+          currentTemplates.map(p => (
+            <TemplateGalleryEntry
+              className="gallery-thumbnail col-12 col-md-6 col-lg-4"
+              key={p.id}
+              template={p}
+            />
+          ))
+        ) : (
+          <OLRow>
+            <p className="text-center">{t('no_templates_found')}</p>
+          </OLRow>
+        )}
+      </OLRow>
+      <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={setCurrentPage} />
+    </>
+  )
+}
--- a/services/web/modules/template-gallery/frontend/js/features/template-gallery/context/template-gallery-context.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template-gallery/context/template-gallery-context.tsx
@@ -0,0 +1,129 @@
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { Template } from '../../../../../types/template'
+import { GetTemplatesResponseBody, Sort } from '../types/api'
+import getMeta from '@/utils/meta'
+import useAsync from '@/shared/hooks/use-async'
+import { getTemplates } from '../util/api'
+import sortTemplates from '../util/sort-templates'
+import { debugConsole } from '@/utils/debugging'
+
+export type TemplateGalleryContextValue = {
+  visibleTemplates: Template[]
+  totalTemplatesCount: number
+  error: Error | null
+  sort: Sort
+  setSort: React.Dispatch<React.SetStateAction<Sort>>
+  searchText: string
+  setSearchText: React.Dispatch<React.SetStateAction<string>>
+}
+
+export const TemplateGalleryContext = createContext<
+  TemplateGalleryContextValue | undefined
+>(undefined)
+
+type TemplateGalleryProviderProps = {
+  children: ReactNode
+}
+
+export function TemplateGalleryProvider({ children }: TemplateGalleryProviderProps) {
+  const [loadedTemplates, setLoadedTemplates] = useState<Template[]>([])
+  const [visibleTemplates, setVisibleTemplates] = useState<Template[]>([])
+  const [totalTemplatesCount, setTotalTemplatesCount] = useState<number>(0)
+  const [sort, setSort] = useState<Sort>({
+    by: 'lastUpdated',
+    order: 'desc',
+  })
+  const prevSortRef = useRef<Sort>(sort)
+
+  const [searchText, setSearchText] = useState('')
+
+  const {
+    error,
+    runAsync,
+  } = useAsync<GetTemplatesResponseBody>()
+
+  const category = getMeta('ol-templateCategory') || 'all'
+
+  useEffect(() => {
+    runAsync(getTemplates(sort, category))
+      .then(data => {
+        setLoadedTemplates(data.templates)
+        setTotalTemplatesCount(data.totalSize)
+      })
+      .catch(debugConsole.error)
+      .finally(() => {
+      })
+  }, [runAsync])
+
+  useEffect(() => {
+    let filteredTemplates = [...loadedTemplates]
+
+    if (searchText.length) {
+      filteredTemplates = filteredTemplates.filter(template =>
+        template.name.toLowerCase().includes(searchText.toLowerCase()) ||
+        template.description.toLowerCase().includes(searchText.toLowerCase())
+      )
+    }
+
+    if (prevSortRef.current !== sort) {
+      filteredTemplates = sortTemplates(filteredTemplates, sort)
+      const loadedTemplatesSorted = sortTemplates(loadedTemplates, sort)
+      setLoadedTemplates(loadedTemplatesSorted)
+    }
+      setVisibleTemplates(filteredTemplates)
+  }, [
+    loadedTemplates,
+    searchText,
+    sort,
+  ])
+
+  useEffect(() => {
+    prevSortRef.current = sort
+  }, [sort])
+
+
+  const value = useMemo<TemplateGalleryContextValue>(
+    () => ({
+      error,
+      searchText,
+      setSearchText,
+      setSort,
+      sort,
+      totalTemplatesCount,
+      visibleTemplates,
+    }),
+    [
+      error,
+      searchText,
+      setSearchText,
+      setSort,
+      sort,
+      totalTemplatesCount,
+      visibleTemplates,
+    ]
+  )
+
+  return (
+    <TemplateGalleryContext.Provider value={value}>
+      {children}
+    </TemplateGalleryContext.Provider>
+  )
+}
+
+export function useTemplateGalleryContext() {
+  const context = useContext(TemplateGalleryContext)
+  if (!context) {
+    throw new Error(
+      'TemplateGalleryContext is only available inside TemplateGalleryProvider'
+    )
+  }
+  return context
+}
--- a/services/web/modules/template-gallery/frontend/js/features/template-gallery/hooks/use-sort.ts
+++ b/services/web/modules/template-gallery/frontend/js/features/template-gallery/hooks/use-sort.ts
@@ -0,0 +1,20 @@
+import { useTemplateGalleryContext } from '../context/template-gallery-context'
+import { Sort } from '../types/api'
+import { SortingOrder } from '../../../../../../../types/sorting-order'
+
+const toggleSort = (order: SortingOrder): SortingOrder => {
+  return order === 'asc' ? 'desc' : 'asc'
+}
+
+function useSort() {
+  const { sort, setSort } = useTemplateGalleryContext()
+  const handleSort = (by: Sort['by']) => {
+    setSort(prev => ({
+      by,
+      order: prev.by === by ? toggleSort(sort.order) : by === 'lastUpdated' ? 'desc' : 'asc',
+    }))
+  }
+  return { handleSort }
+}
+
+export default useSort
--- a/services/web/modules/template-gallery/frontend/js/features/template-gallery/types/api.ts
+++ b/services/web/modules/template-gallery/frontend/js/features/template-gallery/types/api.ts
@@ -0,0 +1,12 @@
+import { SortingOrder } from '../../../../../../../types/sorting-order'
+import { Template } from '../../../../../types/template'
+
+export type Sort = {
+  by: 'lastUpdated' | 'name'
+  order: SortingOrder
+}
+
+export type GetTemplatesResponseBody = {
+  totalSize: number
+  templates: Template[]
+}
--- a/services/web/modules/template-gallery/frontend/js/features/template-gallery/util/api.ts
+++ b/services/web/modules/template-gallery/frontend/js/features/template-gallery/util/api.ts
@@ -0,0 +1,12 @@
+import { GetTemplatesResponseBody, Sort } from '../types/api'
+import { getJSON } from '@/infrastructure/fetch-json'
+
+export function getTemplates(sortBy: Sort, category: string): Promise<GetTemplatesResponseBody> {
+  const queryParams = new URLSearchParams({
+    by: sortBy.by,
+    order: sortBy.order,
+    category,
+  }).toString()
+
+  return getJSON(`/api/templates?${queryParams}`)
+}
--- a/services/web/modules/template-gallery/frontend/js/features/template-gallery/util/sort-templates.ts
+++ b/services/web/modules/template-gallery/frontend/js/features/template-gallery/util/sort-templates.ts
@@ -0,0 +1,40 @@
+import { Sort } from '../types/api'
+import { Template } from '../../../../../types/template'
+import { SortingOrder } from '../../../../../../../types/sorting-order'
+import { Compare } from '../../../../../../../types/helpers/array/sort'
+
+const order = (order: SortingOrder, templates: Template[]) => {
+  return order === 'asc' ? [...templates] : templates.reverse()
+}
+
+export const defaultComparator = (
+  v1: Template,
+  v2: Template,
+  key: 'name' | 'lastUpdated'
+) => {
+  const value1 = v1[key].toLowerCase()
+  const value2 = v2[key].toLowerCase()
+
+  if (value1 !== value2) {
+    return value1 < value2 ? Compare.SORT_A_BEFORE_B : Compare.SORT_A_AFTER_B
+  }
+
+  return Compare.SORT_KEEP_ORDER
+}
+
+export default function sortTemplates(templates: Template[], sort: Sort) {
+  let sorted = [...templates]
+  if (sort.by === 'name') {
+    sorted = sorted.sort((...args) => {
+      return defaultComparator(...args, 'name')
+    })
+  }
+
+  if (sort.by === 'lastUpdated') {
+    sorted = sorted.sort((...args) => {
+      return defaultComparator(...args, 'lastUpdated')
+    })
+  }
+
+  return order(sort.order, sorted)
+}
--- a/services/web/modules/template-gallery/frontend/js/features/template/components/actions-manage-template.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template/components/actions-manage-template.tsx
@@ -0,0 +1,72 @@
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import * as eventTracking from '@/infrastructure/event-tracking'
+import getMeta from '@/utils/meta'
+import OLTooltip from '@/shared/components/ol/ol-tooltip'
+import { useDetachCompileContext } from '@/shared/context/detach-compile-context'
+import EditorManageTemplateModalWrapper from './manage-template-modal/editor-manage-template-modal-wrapper'
+import LeftMenuButton from '@/features/editor-left-menu/components/left-menu-button'
+
+type TemplateManageResponse = {
+  template_id: string
+}
+
+export default function ActionsManageTemplate() {
+
+  const templatesAdmin = getMeta('ol-showTemplatesServerPro')
+  if (!templatesAdmin) {
+    return null
+  }
+
+  const [showModal, setShowModal] = useState(false)
+  const { pdfFile } = useDetachCompileContext()
+  const { t } = useTranslation()
+
+  const handleShowModal = useCallback(() => {
+    eventTracking.sendMB('left-menu-template')
+    setShowModal(true)
+  }, [])
+
+  const openTemplate = useCallback(
+    ({ template_id: templateId }: TemplateManageResponse) => {
+      location.assign(`/template/${templateId}`)
+    },
+    []
+  )
+
+  return (
+    <>
+      {pdfFile ? (
+        <LeftMenuButton onClick={handleShowModal} icon='open_in_new'>
+          {t('publish_as_template')}
+        </LeftMenuButton>
+      ) : (
+        <OLTooltip
+          id="disabled-publish-as-template"
+          description={t('please_compile_pdf_before_publish_as_template')}
+          overlayProps={{
+            placement: 'top',
+          }}
+        >
+          {/* OverlayTrigger won't fire unless the child is a non-react html element (e.g div, span) */}
+          <div>
+            <LeftMenuButton
+              icon='open_in_new'
+              disabled
+              disabledAccesibilityText={t(
+                'please_compile_pdf_before_publish_as_template'
+              )}
+            >
+              {t('publish_as_template')}
+            </LeftMenuButton>
+          </div>
+        </OLTooltip>
+      )}
+      <EditorManageTemplateModalWrapper
+        show={showModal}
+        handleHide={() => setShowModal(false)}
+        openTemplate={openTemplate}
+      />
+    </>
+  )
+}
--- a/services/web/modules/template-gallery/frontend/js/features/template/components/delete-template-button.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template/components/delete-template-button.tsx
@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import useIsMounted from '@/shared/hooks/use-is-mounted'
+import OLButton from '@/shared/components/ol/ol-button'
+import DeleteTemplateModal from './modals/delete-template-modal'
+import { useTemplateContext } from '../context/template-context'
+import { deleteTemplate } from '../util/api'
+import type { Template } from '../../../../../types/template'
+
+function DeleteTemplateButton() {
+  const { t } = useTranslation()
+  const [showModal, setShowModal] = useState(false)
+  const isMounted = useIsMounted()
+  const { template, setTemplate } = useTemplateContext()
+
+  const handleOpenModal = () => {
+    setShowModal(true)
+  }
+
+  const handleCloseModal = () => {
+    if (isMounted.current) {
+      setShowModal(false)
+    }
+  }
+
+  const handleDeleteTemplate = async (template: Template) => {
+    await deleteTemplate(template)
+    handleCloseModal()
+    const previousPage = document.referrer || '/templates'
+    window.location.href = previousPage
+  }
+
+  return (
+    <>
+      <OLButton variant="danger" onClick={handleOpenModal}>
+        {t('delete')}
+      </OLButton>
+      <DeleteTemplateModal
+        template={template}
+        actionHandler={handleDeleteTemplate}
+        showModal={showModal}
+        handleCloseModal={handleCloseModal}
+      />
+    </>
+  )
+}
+
+export default DeleteTemplateButton
--- a/services/web/modules/template-gallery/frontend/js/features/template/components/edit-template-button.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template/components/edit-template-button.tsx
@@ -0,0 +1,46 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import useIsMounted from '@/shared/hooks/use-is-mounted'
+import OLButton from '@/shared/components/ol/ol-button'
+import EditTemplateModal from './modals/edit-template-modal'
+import { useTemplateContext } from '../context/template-context'
+import { updateTemplate } from '../util/api'
+import type { Template } from '../../../../../types/template'
+
+export default function EditTemplateButton() {
+  const { t } = useTranslation()
+  const [showModal, setShowModal] = useState(false)
+  const isMounted = useIsMounted()
+  const { template, setTemplate } = useTemplateContext()
+
+  const handleOpenModal = () => {
+    setShowModal(true)
+  }
+
+  const handleCloseModal = () => {
+    if (isMounted.current) {
+      setShowModal(false)
+    }
+  }
+
+  const handleEditTemplate = async (editedTemplate: Template) => {
+    const updated = await updateTemplate({ editedTemplate, template })
+    if (updated) {
+      setTemplate(prev => ({ ...prev, ...updated }))
+    }
+  }
+
+  return (
+    <>
+      <OLButton variant="secondary" onClick={handleOpenModal}>
+        {t('edit')}
+      </OLButton>
+
+      <EditTemplateModal
+        showModal={showModal}
+        handleCloseModal={handleCloseModal}
+        actionHandler={handleEditTemplate}
+      />
+    </>
+  )
+}
--- a/services/web/modules/template-gallery/frontend/js/features/template/components/form/form-field-input.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template/components/form/form-field-input.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import OLFormControl from '@/shared/components/ol/ol-form-control'
+
+interface FormFieldInputProps extends React.ComponentProps<typeof OLFormControl> {
+  value: string
+  placeholder?: string
+  onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
+}
+
+const FormFieldInput: React.FC<FormFieldInputProps> = ({
+  type = 'text',
+  ...props
+}) => (
+  <OLFormControl type={type} {...props} />
+)
+
+export default FormFieldInput
--- a/services/web/modules/template-gallery/frontend/js/features/template/components/form/labeled-row-form-group.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template/components/form/labeled-row-form-group.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import OLFormGroup from '@/shared/components/ol/ol-form-group'
+import OLFormLabel from '@/shared/components/ol/ol-form-label'
+
+interface LabeledRowFormGroupProps {
+  controlId: string
+  label: string
+  children: React.ReactNode
+}
+
+const LabeledRowFormGroup: React.FC<LabeledRowFormGroupProps> = ({
+  controlId,
+  label,
+  children,
+}) => (
+  <OLFormGroup controlId={controlId} className="row">
+    <div className="col-2">
+      <OLFormLabel className="col-form-label col">{label}</OLFormLabel>
+    </div>
+    <div className="col-10">
+      {children}
+    </div>
+  </OLFormGroup>
+)
+
+export default React.memo(LabeledRowFormGroup)
--- a/services/web/modules/template-gallery/frontend/js/features/template/components/form/template-form-fields.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template/components/form/template-form-fields.tsx
@@ -0,0 +1,96 @@
+import React, { useCallback } from 'react'
+import LabeledRowFormGroup from '../form/labeled-row-form-group'
+import FormFieldInput from '../form/form-field-input'
+import SettingsTemplateCategory from '../settings/settings-template-category'
+import SettingsLicense from '../settings/settings-license'
+import SettingsLanguage from '../settings/settings-language'
+import { useTranslation } from 'react-i18next'
+import type { Template } from '../../../../../../types/template'
+
+interface TemplateFormFieldsProps {
+  template: Partial<Template>
+  includeLanguage?: boolean
+  onChange: (changes: Partial<Template>) => void
+  onEnterKey?: () => void
+}
+
+function TemplateFormFields({
+  template,
+  includeLanguage = false,
+  onChange,
+  onEnterKey,
+}: TemplateFormFieldsProps) {
+  const { t } = useTranslation()
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        onEnterKey?.()
+      }
+    },
+    [onEnterKey]
+  )
+
+  return (
+    <>
+      <LabeledRowFormGroup controlId="form-title" label={t('title') + ':'}>
+        <FormFieldInput
+          required
+          maxLength="255"
+          value={template.name ?? ''}
+          placeholder={t('title')}
+          onChange={e => onChange({ name: e.target.value })}
+          onKeyDown={handleKeyDown}
+        />
+      </LabeledRowFormGroup>
+
+      <LabeledRowFormGroup controlId="form-author" label={t('author') + ':'}>
+        <FormFieldInput
+          maxLength="255"
+          value={template.authorMD ?? ''}
+          placeholder={t('author')}
+          onChange={e => onChange({ authorMD: e.target.value })}
+          onKeyDown={handleKeyDown}
+        />
+      </LabeledRowFormGroup>
+
+      <LabeledRowFormGroup controlId="form-category" label={t('category') + ':'}>
+        <SettingsTemplateCategory
+          value={template.category}
+          onChange={val => onChange({ category: val })}
+        />
+      </LabeledRowFormGroup>
+
+      <LabeledRowFormGroup controlId="form-description" label={t('description') + ':'}>
+        <FormFieldInput
+          as="textarea"
+          rows={8}
+          maxLength="5000"
+          value={template.descriptionMD ?? ''}
+          placeholder={t('description')}
+          onChange={e => onChange({ descriptionMD: e.target.value })}
+          autoFocus
+        />
+      </LabeledRowFormGroup>
+
+      <LabeledRowFormGroup controlId="form-license" label={t('license') + ':'}>
+        <SettingsLicense
+          value={template.license}
+          onChange={val => onChange({ license: val })}
+        />
+      </LabeledRowFormGroup>
+
+      {includeLanguage && (
+        <LabeledRowFormGroup controlId="form-language" label={t('language') + ':'}>
+          <SettingsLanguage
+            value={template.language}
+            onChange={val => onChange({ language: val })}
+          />
+        </LabeledRowFormGroup>
+      )}
+    </>
+  )
+}
+
+export default React.memo(TemplateFormFields)
--- a/services/web/modules/template-gallery/frontend/js/features/template/components/manage-template-modal/editor-manage-template-modal-wrapper.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template/components/manage-template-modal/editor-manage-template-modal-wrapper.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import withErrorBoundary from '@/infrastructure/error-boundary'
+import { useProjectContext } from '@/shared/context/project-context'
+import ManageTemplateModal from './manage-template-modal'
+import type { Template } from '../../../../../../types/template'
+
+interface EditorManageTemplateModalWrapperProps {
+  show: boolean
+  handleHide: () => void
+  openTemplate: (data: Template) => void
+}
+
+const EditorManageTemplateModalWrapper = React.memo(
+  function EditorManageTemplateModalWrapper({ 
+    show,
+    handleHide,
+    openTemplate,
+  }: EditorManageTemplateModalWrapperProps) {
+    const { project } = useProjectContext()
+
+    if (!project) {
+      // wait for useProjectContext
+      return null
+    }
+    return (
+      <ManageTemplateModal
+        handleHide={handleHide}
+        show={show}
+        handleAfterPublished={openTemplate}
+        projectId={project._id}
+        projectName={project.name}
+      />
+    )
+  }
+)
+
+export default withErrorBoundary(EditorManageTemplateModalWrapper)
--- a/services/web/modules/template-gallery/frontend/js/features/template/components/manage-template-modal/manage-template-modal-content.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template/components/manage-template-modal/manage-template-modal-content.tsx
@@ -0,0 +1,169 @@
+import React, { useEffect, useState, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { debugConsole } from '@/utils/debugging'
+import { getJSON, postJSON } from '@/infrastructure/fetch-json'
+import Notification from '@/shared/components/notification'
+import {
+  OLModalBody,
+  OLModalFooter,
+  OLModalHeader,
+  OLModalTitle,
+} from '@/shared/components/ol/ol-modal'
+import OLForm from '@/shared/components/ol/ol-form'
+import OLButton from '@/shared/components/ol/ol-button'
+import { useDetachCompileContext } from '@/shared/context/detach-compile-context'
+import { useUserContext } from '@/shared/context/user-context'
+import { useFocusTrap } from '../../hooks/use-focus-trap'
+import TemplateFormFields from '../form/template-form-fields'
+import type { Template } from '../../../../../../types/template'
+
+
+interface ManageTemplateModalContentProps {
+  handleHide: () => void
+  inFlight: boolean
+  setInFlight: (inFlight: boolean) => void
+  handleAfterPublished: (data: Template) => void
+  projectId: string
+  projectName: string
+}
+
+export default function ManageTemplateModalContent({
+  handleHide,
+  inFlight,
+  setInFlight,
+  handleAfterPublished,
+  projectId,
+  projectName,
+}: ManageTemplateModalContentProps) {
+  const { t } = useTranslation()
+  const { pdfFile } = useDetachCompileContext()
+  const user = useUserContext()
+
+  const [template, setTemplate] = useState<Partial<Template>>({
+    name: projectName,
+    authorMD: `${user.first_name} ${user.last_name}`.trim(),
+  })
+  const [override, setOverride] = useState(false)
+  const [titleConflict, setTitleConflict] = useState(false)
+  const [error, setError] = useState<string | false>(false)
+  const [notificationType, setNotificationType] = useState<'error' | 'warning'>('error')
+  const [disablePublish, setDisablePublish] = useState(false)
+
+  // Only the trimmed name gates submission
+  const valid = (template.name ?? '').trim()
+
+  useEffect(() => {
+    const queryParams = new URLSearchParams({ key: 'name', val: projectName })
+    getJSON(`/api/template?${queryParams}`)
+      .then((data) => {
+        if (!data) return
+        setTemplate(prev => ({
+          ...prev,
+          descriptionMD: data.descriptionMD,
+          authorMD: data.authorMD,
+          license: data.license,
+          category: data.category,
+        }))
+      })
+      .catch(debugConsole.error)
+  }, [])
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+
+    if (!valid) return
+
+    setError(false)
+    setInFlight(true)
+
+    postJSON(`/template/new/${projectId}`, {
+      body: {
+        category: template.category,
+        name: valid,
+        authorMD: (template.authorMD ?? '').trim(),
+        license: template.license,
+        descriptionMD: (template.descriptionMD ?? '').trim(),
+        build: pdfFile.build,
+        override,
+      },
+    })
+      .then(data => {
+        handleHide()
+        handleAfterPublished(data)
+      })
+      .catch(({ response, data }) => {
+        if (response?.status === 409 && data.canOverride) {
+          setNotificationType('warning')
+          setOverride(true)
+        } else {
+          setNotificationType('error')
+          setDisablePublish(true)
+        }
+        setError(data.message)
+        if (response?.status === 409) setTitleConflict(true)
+      })
+      .finally(() => {
+        setInFlight(false)
+      })
+  }
+
+  const handleChange = (changes: Partial<Template>) => {
+    if ('name' in changes && titleConflict) {
+      setError(false)
+      setOverride(false)
+      if (disablePublish) setDisablePublish(false)
+    }
+    setTemplate(prev => ({ ...prev, ...changes }))
+  }
+
+  const handleEnterKey = () => {
+    document.getElementById('submit-publish-template')?.click()
+  }
+
+  const modalRef = useRef<HTMLDivElement>(null)
+  useFocusTrap(modalRef)
+
+  return (
+    <div ref={modalRef}>
+      <OLModalHeader>
+        <OLModalTitle>{t('publish_as_template')}</OLModalTitle>
+      </OLModalHeader>
+
+      <OLModalBody>
+        <div className="modal-body-publish">
+          <div className="content-as-table">
+            <OLForm id="publish-template-form" onSubmit={handleSubmit}>
+              <TemplateFormFields
+                template={template}
+                includeLanguage={false}
+                onChange={handleChange}
+                onEnterKey={handleEnterKey}
+              />
+            </OLForm>
+          </div>
+        </div>
+        {error && (
+          <Notification
+            content={error.length ? error : t('generic_something_went_wrong')}
+            type={notificationType}
+          />
+        )}
+      </OLModalBody>
+
+      <OLModalFooter>
+        <OLButton variant="secondary" disabled={inFlight} onClick={handleHide}>
+          {t('cancel')}
+        </OLButton>
+        <OLButton
+          id="submit-publish-template"
+          variant={override ? 'danger' : 'primary'}
+          disabled={inFlight || !valid || disablePublish}
+          form="publish-template-form"
+          type="submit"
+        >
+          {inFlight ? <>{t('publishing')}…</> : override ? t('overwrite') : t('publish')}
+        </OLButton>
+      </OLModalFooter>
+    </div>
+  )
+}
--- a/services/web/modules/template-gallery/frontend/js/features/template/components/manage-template-modal/manage-template-modal.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template/components/manage-template-modal/manage-template-modal.tsx
@@ -0,0 +1,52 @@
+import React, { memo, useCallback, useState } from 'react'
+import { OLModal } from '@/shared/components/ol/ol-modal'
+import ManageTemplateModalContent from './manage-template-modal-content'
+import type { Template } from '../../../../../../types/template'
+
+interface ManageTemplateModalProps {
+  show: boolean
+  handleHide: () => void
+  handleAfterPublished: (data: Template) => void
+  projectId: string
+  projectName: string
+}
+
+function ManageTemplateModal({
+  show,
+  handleHide,
+  handleAfterPublished,
+  projectId,
+  projectName,
+}: ManageTemplateModalProps) {
+  const [inFlight, setInFlight] = useState(false)
+
+  const onHide = useCallback(() => {
+    if (!inFlight) {
+      handleHide()
+    }
+  }, [handleHide, inFlight])
+
+  return (
+    <OLModal
+      size="lg"
+      animation
+      show={show}
+      onHide={onHide}
+      id="publish-template-modal"
+      // backdrop="static" will disable closing the modal by clicking
+      // outside of the modal element
+      backdrop='static'
+    >
+      <ManageTemplateModalContent
+        handleHide={onHide}
+        inFlight={inFlight}
+        setInFlight={setInFlight}
+        handleAfterPublished={handleAfterPublished}
+        projectId={projectId}
+        projectName={projectName}
+      />
+    </OLModal>
+  )
+}
+
+export default memo(ManageTemplateModal)
--- a/services/web/modules/template-gallery/frontend/js/features/template/components/menubar-manage-template.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template/components/menubar-manage-template.tsx
@@ -0,0 +1,52 @@
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import getMeta from '@/utils/meta'
+import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
+import { useCommandProvider } from '@/features/ide-react/hooks/use-command-provider'
+import EditorManageTemplateModalWrapper from './manage-template-modal/editor-manage-template-modal-wrapper'
+
+type TemplateManageResponse = {
+  template_id: string
+}
+
+const MenubarManageTemplate = () => {
+  const { t } = useTranslation()
+  const { pdfUrl } = useCompileContext()
+
+  const [showManageTemplateModal, setShowManageTemplateModal] = useState(false)
+
+  const publishAsTemplateEnabled =
+    getMeta('ol-showTemplatesServerPro') && pdfUrl
+
+  useCommandProvider(
+    () => [
+      {
+        type: 'command',
+        id: 'manage-template',
+        label: t('publish_as_template'),
+        disabled: !publishAsTemplateEnabled,
+        handler: () => {
+          setShowManageTemplateModal(true)
+        },
+      },
+    ],
+    [t, publishAsTemplateEnabled]
+  )
+
+  const openTemplate = useCallback(
+    ({ template_id: templateId }: TemplateManageResponse) => {
+      location.assign(`/template/${templateId}`)
+    },
+    []
+  )
+
+  return (
+    <EditorManageTemplateModalWrapper
+      show={showManageTemplateModal}
+      handleHide={() => setShowManageTemplateModal(false)}
+      openTemplate={openTemplate}
+    />
+  )
+}
+
+export default MenubarManageTemplate
--- a/services/web/modules/template-gallery/frontend/js/features/template/components/modals/delete-template-modal.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template/components/modals/delete-template-modal.tsx
@@ -0,0 +1,43 @@
+import { useTranslation } from 'react-i18next'
+import withErrorBoundary from '@/infrastructure/error-boundary'
+import Notification from '@/shared/components/notification'
+import TemplateActionModal from './template-action-modal'
+
+type DeleteTemplateModalProps = Pick<
+  React.ComponentProps<typeof TemplateActionModal>,
+  'template' | 'actionHandler' | 'showModal' | 'handleCloseModal'
+>
+
+function DeleteTemplateModal({
+  template,
+  actionHandler,
+  showModal,
+  handleCloseModal,
+}: DeleteTemplateModalProps) {
+  const { t } = useTranslation()
+
+  return (
+    <TemplateActionModal
+      action="delete"
+      actionHandler={actionHandler}
+      title={t('delete_template')}
+      showModal={showModal}
+      handleCloseModal={handleCloseModal}
+      template={template}
+    >
+      <p>{t('about_to_delete_template')}</p>
+      <ul>
+        <li key={`template-action-list-${template.id}`}>
+          <b>{template.name}</b>
+        </li>
+      </ul>
+
+      <Notification
+        content={t('this_action_cannot_be_undone')}
+        type="warning"
+      />
+    </TemplateActionModal>
+  )
+}
+
+export default withErrorBoundary(DeleteTemplateModal)
--- a/services/web/modules/template-gallery/frontend/js/features/template/components/modals/edit-template-modal.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template/components/modals/edit-template-modal.tsx
@@ -0,0 +1,138 @@
+import React, { useReducer, useState, useEffect, useRef, useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import OLForm from '@/shared/components/ol/ol-form'
+import OLButton from '@/shared/components/ol/ol-button'
+import withErrorBoundary from '@/infrastructure/error-boundary'
+import TemplateActionModal from './template-action-modal'
+import { useTemplateContext } from '../../context/template-context'
+import TemplateFormFields from '../form/template-form-fields'
+import type { Template } from '../../../../../../types/template'
+
+type EditTemplateModalProps = {
+  showModal: boolean
+  handleCloseModal: () => void
+  actionHandler: (editedTemplate: Template) => void | Promise<void>
+}
+
+type ActionError = {
+  info?: {
+    statusCode?: number
+  }
+}
+
+type TemplateFormAction =
+  | { type: 'UPDATE'; payload: Partial<Template> }
+  | { type: 'RESET'; payload: Template }
+  | { type: 'CLEAR_FIELD'; field: keyof Template }
+
+function templateFormReducer(state: Template, action: TemplateFormAction): Template {
+  switch (action.type) {
+    case 'UPDATE':
+      return { ...state, ...action.payload }
+    case 'RESET':
+      return { ...action.payload }
+    case 'CLEAR_FIELD':
+      return { ...state, [action.field]: '' }
+    default:
+      return state
+  }
+}
+
+function EditTemplateModal({
+  showModal,
+  handleCloseModal,
+  actionHandler,
+}: EditTemplateModalProps) {
+  const { t } = useTranslation()
+  const { template } = useTemplateContext()
+
+  const [editedTemplate, dispatch] = useReducer(templateFormReducer, template)
+  const [actionError, setActionError] = useState<ActionError | null>(null)
+  const clearModalErrorRef = useRef<() => void>(() => {})
+
+  useEffect(() => {
+    if (showModal) {
+      dispatch({ type: 'RESET', payload: template })
+      setActionError(null)
+    }
+  }, [showModal, template])
+
+  const isConflictError = useMemo(
+    () => actionError?.info?.statusCode === 409,
+    [actionError]
+  )
+
+  const valid = useMemo(
+    () => editedTemplate.name.trim().length > 0,
+    [editedTemplate.name]
+  )
+
+  const handleChange = useCallback(
+    (changes: Partial<Template>) => {
+      dispatch({ type: 'UPDATE', payload: changes })
+      if ('name' in changes && isConflictError) {
+        setActionError(null)
+        clearModalErrorRef.current?.()
+      }
+    },
+    [isConflictError]
+  )
+
+  const handleEnterKey = useCallback(() => {
+    document.getElementById('submit-edit-template')?.click()
+  }, [])
+
+  const handleAction = useCallback(() => {
+    return Promise.resolve(actionHandler(editedTemplate)).catch(err => {
+      setActionError(err)
+      throw err
+    })
+  }, [actionHandler, editedTemplate])
+
+  const submitButtonDisabled = !valid || isConflictError
+
+  return (
+    <TemplateActionModal
+      action="edit"
+      title={t('edit_template')}
+      template={editedTemplate}
+      showModal={showModal}
+      handleCloseModal={handleCloseModal}
+      size="lg"
+      actionHandler={handleAction}
+      renderFooterButtons={({ onConfirm, onCancel, isProcessing }) => (
+        <>
+          <OLButton variant="secondary" onClick={onCancel}>
+            {t('cancel')}
+          </OLButton>
+          <OLButton
+            id="submit-edit-template"
+            onClick={onConfirm}
+            variant="primary"
+            disabled={submitButtonDisabled || isProcessing}
+          >
+            {t('save')}
+          </OLButton>
+        </>
+      )}
+      onClearError={fn => {
+        clearModalErrorRef.current = fn
+      }}
+    >
+      <div className="modal-body-publish">
+        <div className="content-as-table">
+          <OLForm onSubmit={e => e.preventDefault()}>
+            <TemplateFormFields
+              template={editedTemplate}
+              includeLanguage
+              onChange={handleChange}
+              onEnterKey={handleEnterKey}
+            />
+          </OLForm>
+        </div>
+      </div>
+    </TemplateActionModal>
+  )
+}
+
+export default withErrorBoundary(React.memo(EditTemplateModal))
--- a/services/web/modules/template-gallery/frontend/js/features/template/components/modals/template-action-modal.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template/components/modals/template-action-modal.tsx
@@ -0,0 +1,146 @@
+import { memo, useEffect, useState, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { getUserFacingMessage } from '@/infrastructure/fetch-json'
+import * as eventTracking from '@/infrastructure/event-tracking'
+import { isSmallDevice } from '@/infrastructure/event-tracking'
+import useIsMounted from '@/shared/hooks/use-is-mounted'
+import Notification from '@/shared/components/notification'
+import OLButton from '@/shared/components/ol/ol-button'
+import {
+  OLModal,
+  OLModalBody,
+  OLModalFooter,
+  OLModalHeader,
+  OLModalTitle,
+} from '@/shared/components/ol/ol-modal'
+import type { Template } from '../../../../../../types/template'
+import { useFocusTrap } from '../../hooks/use-focus-trap'
+
+type TemplateActionModalProps = {
+  title: string
+  size?: string
+  action: 'delete' | 'edit'
+  actionHandler: (template: Template) => Promise<void>
+  handleCloseModal: () => void
+  template: Template
+  showModal: boolean
+  children?: React.ReactNode
+  renderFooterButtons?: (props: {
+    onConfirm: () => void
+    onCancel: () => void
+    isProcessing: boolean
+  }) => React.ReactNode
+  onClearError?: (clear: () => void) => void
+}
+
+function TemplateActionModal({
+  title,
+  size,
+  action,
+  actionHandler,
+  handleCloseModal,
+  showModal,
+  template,
+  children,
+  renderFooterButtons,
+  onClearError,
+}: TemplateActionModalProps) {
+  const { t } = useTranslation()
+  const [error, setError] = useState<false | { name: string; error: unknown }>(false)
+  const [isProcessing, setIsProcessing] = useState(false)
+  const isMounted = useIsMounted()
+  const modalRef = useRef<HTMLDivElement>(null)
+
+  useFocusTrap(modalRef, showModal)
+
+  useEffect(() => {
+    if (onClearError) {
+      onClearError(() => setError(false))
+    }
+  }, [onClearError])
+
+  async function handleActionForTemplate(template: Template) {
+    let errored
+    setIsProcessing(true)
+    setError(false)
+
+    try {
+      await actionHandler(template)
+    } catch (e) {
+      errored = { name: template.name, error: e }
+    }
+
+    if (isMounted.current) {
+      setIsProcessing(false)
+    }
+
+    if (!errored) {
+      handleCloseModal()
+    } else {
+      setError(errored)
+    }
+  }
+
+  useEffect(() => {
+    if (showModal) {
+      eventTracking.sendMB('template-info-page-interaction', {
+        action,
+        isSmallDevice,
+      })
+    } else {
+      setError(false)
+    }
+  }, [action, showModal])
+
+  return (
+    <OLModal
+      size={size}
+      show={showModal}
+      onHide={handleCloseModal}
+      id="action-tempate-modal"
+      backdrop="static"
+    >
+      <div ref={modalRef}>
+        <OLModalHeader>
+          <OLModalTitle>{title}</OLModalTitle>
+        </OLModalHeader>
+
+        <OLModalBody>
+          {children}
+          {!isProcessing && error && (
+            <Notification
+              type="error"
+              title={error.name}
+              content={getUserFacingMessage(error.error) as string}
+            />
+          )}
+        </OLModalBody>
+
+        <OLModalFooter>
+          {renderFooterButtons ? (
+            renderFooterButtons({
+              onConfirm: () => handleActionForTemplate(template),
+              onCancel: handleCloseModal,
+              isProcessing,
+            })
+          ) : (
+            <>
+              <OLButton variant="secondary" onClick={handleCloseModal}>
+                {t('cancel')}
+              </OLButton>
+              <OLButton
+                variant="danger"
+                onClick={() => handleActionForTemplate(template)}
+                disabled={isProcessing}
+              >
+                {t('confirm')}
+              </OLButton>
+            </>
+          )}
+        </OLModalFooter>
+      </div>
+    </OLModal>
+  )
+}
+
+export default memo(TemplateActionModal)
--- a/services/web/modules/template-gallery/frontend/js/features/template/components/settings/settings-language.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template/components/settings/settings-language.tsx
@@ -0,0 +1,42 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import getMeta from '@/utils/meta'
+import SettingsMenuSelect from './settings-menu-select'
+import type { Optgroup } from './settings-menu-select'
+
+interface SettingsLanguageProps {
+  value: string
+  onChange: (value: string) => void
+}
+
+export default function SettingsLanguage({
+  value,
+  onChange,
+}: SettingsLanguageProps) {
+  const { t } = useTranslation()
+
+  const optgroup: Optgroup = useMemo(() => {
+    const options = (getMeta('ol-languages') ?? [])
+      // only include spell-check languages that are available in the client
+      .filter(language => language.dic !== undefined)
+
+    return {
+      label: 'Language',
+      options: options.map(language => ({
+        value: language.code,
+        label: language.name,
+      })),
+    }
+  }, [])
+
+  return (
+    <SettingsMenuSelect
+      onChange={onChange}
+      value={value}
+      options={[{ value: '', label: t('off') }]}
+      optgroup={optgroup}
+      label={t('spell_check')}
+      name="spellCheckLanguage"
+    />
+  )
+}
--- a/services/web/modules/template-gallery/frontend/js/features/template/components/settings/settings-license.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template/components/settings/settings-license.tsx
@@ -0,0 +1,33 @@
+import { useTranslation } from 'react-i18next'
+import SettingsMenuSelect from './settings-menu-select'
+import type { Option } from './settings-menu-select'
+
+export const licensesMap = {
+  'cc_by_4.0': 'Creative Commons CC BY 4.0',
+  'lppl_1.3c': 'LaTeX Project Public License 1.3c',
+  'other': 'Other (as stated in the work)',
+}
+
+interface SettingsLicenseProps {
+  value: string
+  onChange: (value: string) => void
+}
+
+export default function SettingsLicense({
+  value,
+  onChange,
+}: SettingsLicenseProps) {
+  const { t } = useTranslation()
+
+  const options = Object.entries(licensesMap).map(([value, label]) => ({ value, label }))
+
+  return (
+    <SettingsMenuSelect
+      name="license"
+      label={t('license')}
+      value={value}
+      onChange={onChange}
+      options={options}
+    />
+  )
+}
--- a/services/web/modules/template-gallery/frontend/js/features/template/components/settings/settings-menu-select.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template/components/settings/settings-menu-select.tsx
@@ -0,0 +1,91 @@
+import { ChangeEventHandler, useCallback, useRef, useEffect } from 'react'
+import OLFormGroup from '@/shared/components/ol/ol-form-group'
+import OLFormLabel from '@/shared/components/ol/ol-form-label'
+import OLFormSelect from '@/shared/components/ol/ol-form-select'
+
+type PossibleValue = string | number | boolean
+
+export type Option<T extends PossibleValue = string> = {
+  value: T
+  label: string
+  ariaHidden?: 'true' | 'false'
+  disabled?: boolean
+}
+
+export type Optgroup<T extends PossibleValue = string> = {
+  label: string
+  options: Array<Option<T>>
+}
+
+type SettingsMenuSelectProps<T extends PossibleValue = string> = {
+  name: string
+  options: Array<Option<T>>
+  optgroup?: Optgroup<T>
+  onChange: (val: T) => void
+  value?: T
+  disabled?: boolean
+}
+
+export default function SettingsMenuSelect<T extends PossibleValue = string>(
+  props: SettingsMenuSelectProps<T>
+) {
+
+ const { name, options, optgroup, onChange, value, disabled = false } = props
+ const defaultApplied = useRef(false)
+
+  useEffect(() => {
+    if (value === undefined || value === null) {
+      onChange(options?.[0]?.value || optgroup?.options?.[0]?.value)
+    }
+  }, [value, options, onChange])
+
+  const handleChange: ChangeEventHandler<HTMLSelectElement> = useCallback(
+    event => {
+      const selectedValue = event.target.value
+      let onChangeValue: PossibleValue = selectedValue
+      if (typeof value === 'boolean') {
+        onChangeValue = selectedValue === 'true'
+      } else if (typeof value === 'number') {
+        onChangeValue = parseInt(selectedValue, 10)
+      }
+      onChange(onChangeValue as T)
+    },
+    [onChange, value]
+  )
+  const selectRef = useRef<HTMLSelectElement | null>(null)
+
+  return (
+    <>
+
+        <OLFormSelect
+          onChange={handleChange}
+          value={value?.toString()}
+          disabled={disabled}
+          ref={selectRef}
+        >
+          {options.map(option => (
+            <option
+              key={`${name}-${option.value}`}
+              value={option.value.toString()}
+              aria-hidden={option.ariaHidden}
+              disabled={option.disabled}
+            >
+              {option.label}
+            </option>
+          ))}
+          {optgroup ? (
+            <optgroup label={optgroup.label}>
+              {optgroup.options.map(option => (
+                <option
+                  value={option.value.toString()}
+                  key={option.value.toString()}
+                >
+                  {option.label}
+                </option>
+              ))}
+            </optgroup>
+          ) : null}
+        </OLFormSelect>
+    </>
+  )
+}
--- a/services/web/modules/template-gallery/frontend/js/features/template/components/settings/settings-template-category.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template/components/settings/settings-template-category.tsx
@@ -0,0 +1,44 @@
+import React, { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import getMeta from '@/utils/meta'
+import SettingsMenuSelect from './settings-menu-select'
+import type { Option } from './settings-menu-select'
+
+interface SettingsTemplateCategoryProps {
+  value: string
+  onChange: (value: string) => void
+}
+
+const SettingsTemplateCategory: React.FC<SettingsTemplateCategoryProps> = ({
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+
+  const options: Option[] = useMemo(() => {
+    const { templateLinks = [] } = getMeta('ol-ExposedSettings') as {
+      templateLinks?: Array<{ name: string; url: string; description: string }>
+    }
+
+    return templateLinks.map(({ name, url }) => ({
+      value: url,
+      label: name,
+    }))
+  }, [])
+
+  if (options.length === 0) {
+    return null
+  }
+
+  return (
+    <SettingsMenuSelect
+      name="category"
+      label={`${t('category')}:`}
+      value={value}
+      onChange={onChange}
+      options={options}
+    />
+  )
+}
+
+export default React.memo(SettingsTemplateCategory)
--- a/services/web/modules/template-gallery/frontend/js/features/template/components/template-details.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template/components/template-details.tsx
@@ -0,0 +1,104 @@
+import { useTranslation } from 'react-i18next'
+import getMeta from '@/utils/meta'
+import OLCol from '@/shared/components/ol/ol-col'
+import OLRow from '@/shared/components/ol/ol-row'
+import OLTooltip from '@/shared/components/ol/ol-tooltip'
+import { formatDate, fromNowDate } from '@/utils/dates'
+import { cleanHtml } from '../../../../../app/src/CleanHtml.mjs'
+import { useTemplateContext } from '../context/template-context'
+import DeleteTemplateButton from './delete-template-button'
+import EditTemplateButton from './edit-template-button'
+import { licensesMap } from './settings/settings-license'
+
+function TemplateDetails() {
+  const { t } = useTranslation()
+  const {template, setTemplate} = useTemplateContext()
+  const lastUpdatedDate = fromNowDate(template.lastUpdated)
+  const tooltipText = formatDate(template.lastUpdated)
+  const loggedInUserId = getMeta('ol-user_id')
+  const loggedInUserIsAdmin = getMeta('ol-userIsAdmin')
+
+  const openAsTemplateParams = new URLSearchParams({
+    version: template.version,
+    ...(template.brandVariationId && { brandVariationId: template.brandVariationId }),
+    name: template.name,
+    compiler: template.compiler,
+    mainFile: template.mainFile,
+    language: template.language,
+    ...(template.imageName && { imageName: template.imageName })
+  }).toString()
+
+  const sanitizedAuthor = cleanHtml(template.author, 'linksOnly') || t('anonymous')
+  const sanitizedDescription = cleanHtml(template.description, 'reachText')
+
+  return (
+    <>
+    <OLRow>
+      <OLCol md={12}>
+        <div className={"gallery-item-title"}>
+          <h1 className="h2">{template.name}</h1>
+        </div>
+      </OLCol>
+    </OLRow>
+    <OLRow className="cta-links-container">
+      <OLCol md={12} className="cta-links">
+        <a className="btn btn-primary cta-link" href={`/project/new/template/${template.id}?${openAsTemplateParams}`}>{t('open_as_template')}</a>
+        <a className="btn btn-secondary cta-link" href={`/template/${template.id}/preview?version=${template.version}`}>{t('view_pdf')}</a>
+      </OLCol>
+    </OLRow>
+    <div className="template-details-container">
+      <div className="template-detail">
+        <div>
+          <b>{t('author')}:</b>
+        </div>
+        <div dangerouslySetInnerHTML={{ __html: sanitizedAuthor }} />
+      </div>
+      <div className="template-detail">
+        <div>
+          <b>{t('last_updated')}:</b>
+        </div>
+        <div>
+          <OLTooltip
+            id={`${template.id}`}
+            description={tooltipText}
+            overlayProps={{ placement: 'bottom', trigger: ['hover', 'focus'] }}
+          >
+            <span>
+              {lastUpdatedDate.trim()}
+            </span>
+          </OLTooltip>
+        </div>
+      </div>
+      <div className="template-detail">
+        <div>
+          <b>{t('license')}:</b>
+        </div>
+        <div>
+          {licensesMap[template.license]}
+        </div>
+      </div>
+        {sanitizedDescription && (
+          <div className="template-detail">
+            <div>
+              <b>{t('abstract')}:</b>
+            </div>
+            <div
+              className="gallery-abstract"
+              data-ol-mathjax=""
+              dangerouslySetInnerHTML={{ __html: sanitizedDescription }}>
+            </div>
+          </div>
+        )}
+    </div>
+    {loggedInUserId && (loggedInUserId === template.owner || loggedInUserIsAdmin) && (
+      <OLRow className="cta-links-container">
+        <OLCol md={12} className="text-end">
+          <EditTemplateButton />
+          <DeleteTemplateButton />
+        </OLCol>
+      </OLRow>
+    )}
+    </>
+  )
+}
+export default TemplateDetails
--- a/services/web/modules/template-gallery/frontend/js/features/template/components/template-preview.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template/components/template-preview.tsx
@@ -0,0 +1,23 @@
+import OLCol from '@/shared/components/ol/ol-col'
+import OLRow from '@/shared/components/ol/ol-row'
+import { useTemplateContext } from '../context/template-context'
+
+
+function TemplatePreview() {
+  const { template, setTemplate } = useTemplateContext()
+  return (
+    <div className="entry">
+      <OLRow>
+        <OLCol md={12}>
+          <div className="gallery-large-pdf-preview">
+            <img
+              src={`/template/${template.id}/preview?version=${template.version}&style=preview`}
+              alt={template.name}
+            />
+          </div>
+        </OLCol>
+      </OLRow>
+    </div>
+  )
+}
+export default TemplatePreview
--- a/services/web/modules/template-gallery/frontend/js/features/template/components/template-root.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template/components/template-root.tsx
@@ -0,0 +1,70 @@
+import { useTranslation } from 'react-i18next'
+import useWaitForI18n from '@/shared/hooks/use-wait-for-i18n'
+import withErrorBoundary from '@/infrastructure/error-boundary'
+import { GenericErrorBoundaryFallback } from '@/shared/components/generic-error-boundary-fallback'
+import DefaultNavbar from '@/shared/components/navbar/default-navbar'
+import Footer from '@/shared/components/footer/footer'
+import getMeta from '@/utils/meta'
+import OLCol from '@/shared/components/ol/ol-col'
+import OLRow from '@/shared/components/ol/ol-row'
+import TemplateDetails from './template-details'
+import TemplatePreview from './template-preview'
+import { useTemplateContext, TemplateProvider } from '../context/template-context'
+
+function TemplateRoot() {
+  const { isReady } = useWaitForI18n()
+  if (!isReady) {
+    return null
+  }
+  return (
+    <TemplateProvider>
+      <TemplatePageContent />
+    </TemplateProvider>
+  )
+}
+
+function TemplatePageContent() {
+  const { t } = useTranslation()
+  const navbarProps = getMeta('ol-navbar')
+  const footerProps = getMeta('ol-footer')
+  const { template } = useTemplateContext()
+  const { templateLinks } = getMeta('ol-ExposedSettings') || []
+  const categoryName = templateLinks?.find(link => link.url === template.category)?.name
+
+  return (
+    <>
+      <DefaultNavbar {...navbarProps} />
+      <main id="main-content" className="gallery content content-page">
+        <div className="container">
+          <OLRow className="previous-page-link-container">
+            <OLCol lg={6}>
+              <a className="previous-page-link" href={'/templates/all'}>
+                <i className="material-symbols material-symbols-rounded" aria-hidden="true">arrow_left_alt</i>
+                {t('all_templates')}
+              </a>
+              {categoryName && template.category !== '/templates/all' && (
+                <>
+                  <span className="mx-2">/</span>
+                  <a className="previous-page-link" href={template.category}>
+                    {categoryName}
+                  </a>
+                </>
+              )}
+            </OLCol>
+          </OLRow>
+          <OLRow>
+            <OLCol className="template-item-left-section" md={6}>
+              <TemplateDetails />
+            </OLCol>
+            <OLCol className="template-item-right-section" md={6}>
+              <TemplatePreview />
+            </OLCol>
+          </OLRow>
+        </div>
+      </main>
+      <Footer {...footerProps} />
+    </>
+  )
+}
+
+export default withErrorBoundary(TemplateRoot, GenericErrorBoundaryFallback)
--- a/services/web/modules/template-gallery/frontend/js/features/template/context/template-context.tsx
+++ b/services/web/modules/template-gallery/frontend/js/features/template/context/template-context.tsx
@@ -0,0 +1,53 @@
+import {
+  createContext,
+  FC,
+  useCallback,
+  useContext,
+  useState,
+  useMemo,
+} from 'react'
+import useEventListener from '@/shared/hooks/use-event-listener'
+import getMeta from '@/utils/meta'
+import { Template } from '../../../../../types/template'
+
+type TemplateContextType = {
+  template: Template
+  setTemplate: (template: Template) => void
+}
+
+export const TemplateContext = createContext<TemplateContextType | undefined>(
+  undefined
+)
+
+type TemplateProviderProps = {
+  loadedTemplate: Template
+}
+
+export const TemplateProvider: FC<TemplateProviderProps> = ({ children }) => {
+  const loadedTemplate = useMemo(() => getMeta('ol-template'), [])
+  const [template, setTemplate] = useState(loadedTemplate)
+
+  const value = useMemo(
+    () => ({
+      template,
+      setTemplate,
+    }),
+    [template, setTemplate]
+  )
+
+  return (
+    <TemplateContext.Provider value={value}>
+      {children}
+    </TemplateContext.Provider>
+  )
+}
+
+export const useTemplateContext = () => {
+  const context = useContext(TemplateContext)
+  if (!context) {
+    throw new Error(
+      `useTemplateContext must be used within a TemplateProvider`
+    )
+  }
+  return context
+}
--- a/services/web/modules/template-gallery/frontend/js/features/template/hooks/use-focus-trap.ts
+++ b/services/web/modules/template-gallery/frontend/js/features/template/hooks/use-focus-trap.ts
@@ -0,0 +1,46 @@
+import { useEffect } from 'react'
+
+export function useFocusTrap(ref: React.RefObject<HTMLElement>, enabled = true) {
+  useEffect(() => {
+    if (!enabled || !ref.current) return
+
+    const element = ref.current
+    const previouslyFocusedElement = document.activeElement as HTMLElement
+    const focusableElements = element.querySelectorAll<HTMLElement>(
+      'a[href], button, textarea, input, select, [tabindex]:not([tabindex="-1"])'
+    )
+
+    const firstElement = focusableElements[0]
+    const lastElement = focusableElements[focusableElements.length - 1]
+
+    // Don't override if something inside already received focus
+    const isAlreadyFocusedInside = element.contains(document.activeElement)
+
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key !== 'Tab') return
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          e.preventDefault()
+          lastElement?.focus()
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          e.preventDefault()
+          firstElement?.focus()
+        }
+      }
+    }
+
+    element.addEventListener('keydown', handleKeyDown)
+
+    if (!isAlreadyFocusedInside) {
+      firstElement?.focus()
+    }
+
+    return () => {
+      element.removeEventListener('keydown', handleKeyDown)
+      previouslyFocusedElement?.focus()
+    }
+  }, [ref, enabled])
+}
--- a/services/web/modules/template-gallery/frontend/js/features/template/util/api.ts
+++ b/services/web/modules/template-gallery/frontend/js/features/template/util/api.ts
@@ -0,0 +1,47 @@
+import { deleteJSON, postJSON } from '@/infrastructure/fetch-json'
+import { Template } from '../../../../../types/template'
+
+export function deleteTemplate(template: Template) {
+  return deleteJSON(`/template/${template.id}/delete`, {
+    body: {
+      version: template.version,
+    },
+  })
+}
+
+type UpdateTemplateOptions = {
+  template: Template
+  initialTemplate: Template
+  descriptionEdited: boolean
+}
+
+export function updateTemplate({
+  editedTemplate,
+  template
+}: UpdateTemplateOptions): Promise<Template | null> {
+  const updatedFields: Partial<Template> = {
+    name: editedTemplate.name.trim(),
+    license: editedTemplate.license.trim(),
+    category: editedTemplate.category,
+    language: editedTemplate.language,
+    authorMD: editedTemplate.authorMD.trim(),
+    descriptionMD: editedTemplate.descriptionMD.trim(),
+  }
+
+  const changedFields = Object.entries(updatedFields).reduce((diff, [key, value]) => {
+    if (value !== undefined && template[key as keyof Template] !== value) {
+      diff[key] = value
+    }
+    return diff
+  }, {} as Partial<Template>)
+
+  if (Object.keys(changedFields).length === 0) {
+    return null
+  }
+
+  const updated = postJSON(`/template/${editedTemplate.id}/edit`, {
+    body: changedFields
+  })
+
+  return updated
+}
--- a/services/web/modules/template-gallery/frontend/js/pages/template-gallery.tsx
+++ b/services/web/modules/template-gallery/frontend/js/pages/template-gallery.tsx
@@ -0,0 +1,8 @@
+import ReactDOM from 'react-dom/client'
+import TemplateGalleryRoot from '../features/template-gallery/components/template-gallery-root'
+
+const element = document.getElementById('template-gallery-root')
+if (element) {
+  const root = ReactDOM.createRoot(element)
+  root.render(<TemplateGalleryRoot />)
+}
--- a/services/web/modules/template-gallery/frontend/js/pages/template.tsx
+++ b/services/web/modules/template-gallery/frontend/js/pages/template.tsx
@@ -0,0 +1,8 @@
+import ReactDOM from 'react-dom/client'
+import TemplateRoot from '../features/template/components/template-root'
+
+const element = document.getElementById('template-root')
+if (element) {
+  const root = ReactDOM.createRoot(element)
+  root.render(<TemplateRoot />)
+}
--- a/services/web/modules/template-gallery/types/template.ts
+++ b/services/web/modules/template-gallery/types/template.ts
@@ -0,0 +1,16 @@
+export type Template = {
+  id: string
+  version: number
+  name: string
+  lastUpdated: Date
+  author: string
+  authorMD: string
+  description: string
+  descriptionMD: string
+  license: string
+  category: string
+  compiler?: string
+  language?: string
+  owner: string
+}
+