Add Template Gallery support

2026-05-23 09:09:36 +02:00 · 2025-05-02 02:05:34 +02:00
parent 8b41eaddb8
commit a321b54502
68 changed files with 3098 additions and 63 deletions
--- a/develop/docker-compose.yml
+++ b/develop/docker-compose.yml
@@ -131,7 +131,7 @@ services:
      dockerfile: services/real-time/Dockerfile
    env_file:
      - dev.env
-
+ 
  redis:
    image: redis:7
    ports:
--- a/services/filestore/app.js
+++ b/services/filestore/app.js
@@ -66,6 +66,11 @@ if (settings.filestore.stores.template_files) {
    keyBuilder.templateFileKeyMiddleware,
    fileController.insertFile
  )
+  app.delete(
+    '/template/:template_id/v/:version/:format',
+    keyBuilder.templateFileKeyMiddleware,
+    fileController.deleteFile
+  )
 }

 app.get(
--- a/services/filestore/app/js/FileConverter.js
+++ b/services/filestore/app/js/FileConverter.js
@@ -6,7 +6,7 @@ import Errors from './Errors.js'

 const { ConversionError } = Errors

-const APPROVED_FORMATS = ['png']
+const APPROVED_FORMATS = ['png', 'jpg']
 const FOURTY_SECONDS = 40 * 1000
 const KILL_SIGNAL = 'SIGTERM'

--- a/services/filestore/app/js/FileHandler.js
+++ b/services/filestore/app/js/FileHandler.js
@@ -111,7 +111,9 @@ async function _getConvertedFileAndCache(bucket, key, convertedKey, opts) {
  let convertedFsPath
  try {
    convertedFsPath = await _convertFile(bucket, key, opts)
-    await ImageOptimiser.promises.compressPng(convertedFsPath)
+    if (convertedFsPath.toLowerCase().endsWith(".png")) {
+      await ImageOptimiser.promises.compressPng(convertedFsPath)
+    }
    await PersistorManager.sendFile(bucket, convertedKey, convertedFsPath)
  } catch (err) {
    LocalFileWriter.deleteFile(convertedFsPath, () => {})
--- a/services/web/app/src/Features/Project/ProjectController.mjs
+++ b/services/web/app/src/Features/Project/ProjectController.mjs
@@ -752,11 +752,16 @@ const _ProjectController = {
          )
      }

+console.log("Features.hasFeature('templates-server-pro') = ", Features.hasFeature('templates-server-pro'))
+console.log("Settings.templates?.nonAdminCanManage", Settings.templates?.nonAdminCanManage)
+
      const isAdminOrTemplateOwner =
-        hasAdminAccess(user) || Settings.templates?.user_id === userId
+        hasAdminAccess(user) || Settings.templates?.nonAdminCanManage
      const showTemplatesServerPro =
        Features.hasFeature('templates-server-pro') && isAdminOrTemplateOwner

+console.log("showTemplatesServerPro = ", showTemplatesServerPro )
+
      const debugPdfDetach = shouldDisplayFeature('debug_pdf_detach')

      const detachRole = req.params.detachRole
--- a/services/web/app/src/Features/Templates/TemplatesController.mjs
+++ b/services/web/app/src/Features/Templates/TemplatesController.mjs
@@ -7,21 +7,22 @@ import { expressify } from '@overleaf/promise-utils'

 const TemplatesController = {
  async getV1Template(req, res) {
-    const templateVersionId = req.params.Template_version_id
-    const templateId = req.query.id
-    if (!/^[0-9]+$/.test(templateVersionId) || !/^[0-9]+$/.test(templateId)) {
-      logger.err(
-        { templateVersionId, templateId },
-        'invalid template id or version'
-      )
-      return res.sendStatus(400)
-    }
+    const templateId = req.params.Template_version_id
+    const templateVersionId = req.query.version
+//    if (!/^[0-9]+$/.test(templateVersionId) || !/^[0-9]+$/.test(templateId)) {
+//      logger.err(
+//        { templateVersionId, templateId },
+//        'invalid template id or version'
+//      )
+//      return res.sendStatus(400)
+//    }
    const data = {
      templateVersionId,
      templateId,
-      name: req.query.templateName,
-      compiler: ProjectHelper.compilerFromV1Engine(req.query.latexEngine),
-      imageName: req.query.texImage,
+      name: req.query.name,
+      compiler: req.query.compiler,
+      language: req.query.language,
+      imageName: req.query.imageName,
      mainFile: req.query.mainFile,
      brandVariationId: req.query.brandVariationId,
    }
@@ -36,6 +37,7 @@ const TemplatesController = {

  async createProjectFromV1Template(req, res) {
    const userId = SessionManager.getLoggedInUserId(req.session)
+
    const project = await TemplatesManager.promises.createProjectFromV1Template(
      req.body.brandVariationId,
      req.body.compiler,
@@ -44,7 +46,8 @@ const TemplatesController = {
      req.body.templateName,
      req.body.templateVersionId,
      userId,
-      req.body.imageName
+      req.body.imageName,
+      req.body.language
    )
    delete req.session.templateData
    if (!project) {
--- a/services/web/app/src/Features/Templates/TemplatesManager.mjs
+++ b/services/web/app/src/Features/Templates/TemplatesManager.mjs
@@ -20,6 +20,7 @@ import OError from '@overleaf/o-error'

 const { promises: ProjectRootDocManager } = ProjectRootDocManagerModule
 const { promises: ProjectOptionsHandler } = ProjectOptionsHandlerModule
+const TIMEOUT = 30000  // 30 sec

 const TemplatesManager = {
  async createProjectFromV1Template(
@@ -30,34 +31,19 @@ const TemplatesManager = {
    templateName,
    templateVersionId,
    userId,
-    imageName
+    imageName,
+    language
  ) {
-    compiler = ProjectOptionsHandler.normalizeCompiler(compiler || 'pdflatex')
-    imageName = ProjectOptionsHandler.normalizeImageName(
-      imageName || 'wl_texlive:2018.1'
-    )
-
-    const zipUrl = `${settings.apis.v1.url}/api/v1/overleaf/templates/${templateVersionId}`
+    const zipUrl = `${settings.apis.filestore.url}/template/${templateId}/v/${templateVersionId}/zip`
    const zipReq = await fetchStreamWithResponse(zipUrl, {
-      basicAuth: {
-        user: settings.apis.v1.user,
-        password: settings.apis.v1.pass,
-      },
-      signal: AbortSignal.timeout(settings.apis.v1.timeout),
+      signal: AbortSignal.timeout(TIMEOUT),
    })

    const projectName = ProjectDetailsHandler.fixProjectName(templateName)
    const dumpPath = `${settings.path.dumpFolder}/${crypto.randomUUID()}_templates-manager`
    const writeStream = fs.createWriteStream(dumpPath)
    try {
-      const attributes = {
-        fromV1TemplateId: templateId,
-        fromV1TemplateVersionId: templateVersionId,
-        compiler,
-        imageName,
-      }
-      if (brandVariationId) attributes.brandVariationId = brandVariationId
-
+      const attributes = {}
      await pipeline(zipReq.stream, writeStream)

      if (zipReq.response.status !== 200) {
@@ -87,22 +73,13 @@ const TemplatesManager = {
        return undefined
      })

-      await TemplatesManager._setMainFile(project, mainFile)
+      await TemplatesManager._setCompiler(project._id, compiler)
+      await TemplatesManager._setImage(project._id, imageName)
+      await TemplatesManager._setMainFile(project._id, mainFile)
+      await TemplatesManager._setSpellCheckLanguage(project._id, language)
+      await TemplatesManager._setBrandVariationId(project._id, brandVariationId)

-      const found = await prepareClsiCacheInBackground
-      if (found === false && project.rootDoc_id) {
-        ClsiCacheManager.createTemplateClsiCache({
-          templateVersionId,
-          project,
-          fileEntries,
-          docEntries,
-        }).catch(err => {
-          logger.error(
-            { err, templateVersionId },
-            'failed to create template clsi-cache'
-          )
-        })
-      }
+      await prepareClsiCacheInBackground

      return project
    } finally {
@@ -110,15 +87,41 @@ const TemplatesManager = {
    }
  },

-  async _setMainFile(project, mainFile) {
+  async _setCompiler(projectId, compiler) {
+    if (compiler == null) {
+      return
+    }
+    await ProjectOptionsHandler.setCompiler(projectId, compiler)
+  },
+
+  async _setImage(projectId, imageName) {
+    try {
+      await ProjectOptionsHandler.setImageName(projectId, imageName)
+    } catch {
+      logger.warn({ imageName: imageName }, 'not available')
+      await ProjectOptionsHandler.setImageName(projectId, process.env.TEX_LIVE_DOCKER_IMAGE)
+    }
+  },
+
+  async _setMainFile(projectId, mainFile) {
    if (mainFile == null) {
      return
    }
-    const rootDocId = await ProjectRootDocManager.setRootDocFromName(
-      project._id,
-      mainFile
-    )
-    if (rootDocId) project.rootDoc_id = rootDocId
+    await ProjectRootDocManager.setRootDocFromName(projectId, mainFile)
+  },
+
+  async _setSpellCheckLanguage(projectId, language) {
+    if (language == null) {
+      return
+    }
+    await ProjectOptionsHandler.setSpellCheckLanguage(projectId, language)
+  },
+
+  async _setBrandVariationId(projectId, brandVariationId) {
+    if (brandVariationId == null) {
+      return
+    }
+    await ProjectOptionsHandler.setBrandVariationId(projectId, brandVariationId)
  },

  async fetchFromV1(templateId) {
--- a/services/web/app/src/infrastructure/ExpressLocals.mjs
+++ b/services/web/app/src/infrastructure/ExpressLocals.mjs
@@ -413,7 +413,7 @@ export default async function (webRouter, privateApiRouter, publicApiRouter) {
      labsEnabled: Settings.labs && Settings.labs.enable,
      wikiEnabled: Settings.overleaf != null || Settings.proxyLearn,
      templatesEnabled:
-        Settings.overleaf != null || Settings.templates?.user_id != null,
+        Settings.overleaf != null || Boolean(Settings.moduleImportSequence.includes('template-gallery')),
      cioWriteKey: Settings.analytics?.cio?.writeKey,
      cioSiteId: Settings.analytics?.cio?.siteId,
      linkedInInsightsPartnerId: Settings.analytics?.linkedIn?.partnerId,
--- a/services/web/app/src/infrastructure/Features.mjs
+++ b/services/web/app/src/infrastructure/Features.mjs
@@ -68,7 +68,7 @@ const Features = {
      case 'oauth':
        return Boolean(Settings.oauth)
      case 'templates-server-pro':
-        return Boolean(Settings.templates?.user_id)
+        return Boolean(Settings.moduleImportSequence.includes('template-gallery'))
      case 'affiliations':
      case 'analytics':
        return Boolean(_.get(Settings, ['apis', 'v1', 'url']))
--- a/services/web/app/src/router.mjs
+++ b/services/web/app/src/router.mjs
@@ -283,6 +283,8 @@ async function initialize(webRouter, privateApiRouter, publicApiRouter) {
    '/read-only/one-time-login'
  )

+  await Modules.applyRouter(webRouter, privateApiRouter, publicApiRouter)
+
  webRouter.get('/logout', UserPagesController.logout)
  webRouter.post('/logout', UserController.logout)

--- a/services/web/app/views/layout/navbar-marketing.pug
+++ b/services/web/app/views/layout/navbar-marketing.pug
@@ -151,6 +151,17 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg(

 					// logged out
 					if !getSessionUser()
+						// templates link
+						li
+							a(
+								href="/templates"
+								event-tracking="menu-click"
+								event-tracking-action="clicked"
+								event-tracking-trigger="click"
+								event-tracking-mb="true"
+								event-segmentation={ page: currentUrl, item: 'templates', location: 'top-menu' }
+							) #{translate('templates')}
+
 						// register link
 						if hasFeature('registration-page')
 							+nav-item.primary
--- a/services/web/app/views/project/editor/new_from_template.pug
+++ b/services/web/app/views/project/editor/new_from_template.pug
@@ -29,8 +29,10 @@ block content
 		input(type="hidden" name="templateVersionId" value=templateVersionId)
 		input(type="hidden" name="templateName" value=name)
 		input(type="hidden" name="compiler" value=compiler)
-		input(type="hidden" name="imageName" value=imageName)
+		if imageName
+			input(type="hidden" name="imageName" value=imageName)
 		input(type="hidden" name="mainFile" value=mainFile)
+		input(type="hidden" name="language" value=language)
 		if brandVariationId
 			input(type="hidden" name="brandVariationId" value=brandVariationId)
 		input(hidden type="submit")
--- a/services/web/app/views/template_gallery/template-gallery.pug
+++ b/services/web/app/views/template_gallery/template-gallery.pug
@@ -0,0 +1,18 @@
+extends ../layout-react
+
+block entrypointVar
+	- entrypoint = 'pages/template-gallery'
+
+block vars
+block vars
+	- const suppressNavContentLinks = true
+	- const suppressNavbar = true
+	- const suppressFooter = true
+	- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
+	- isWebsiteRedesign = false
+
+block append meta
+	meta(name="ol-templateCategory" data-type="string" content=category)
+
+block content
+	#template-gallery-root
--- a/services/web/app/views/template_gallery/template.pug
+++ b/services/web/app/views/template_gallery/template.pug
@@ -0,0 +1,20 @@
+extends ../layout-react
+
+block entrypointVar
+	- entrypoint = 'pages/template'
+
+block vars
+	- const suppressNavContentLinks = true
+	- const suppressNavbar = true
+	- const suppressFooter = true
+	- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
+	- isWebsiteRedesign = false
+
+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/config/settings.defaults.js
+++ b/services/web/config/settings.defaults.js
@@ -1031,7 +1031,7 @@ module.exports = {
    importProjectFromGithubModalWrapper: [],
    importProjectFromGithubMenu: [],
    editorLeftMenuSync: [],
-    editorLeftMenuManageTemplate: [],
+    editorLeftMenuManageTemplate: ['@/features/editor-left-menu/components/actions-manage-template'],
    menubarExtraComponents: [],
    oauth2Server: [],
    managedGroupSubscriptionEnrollmentNotification: [],
@@ -1089,6 +1089,7 @@ module.exports = {
    'authentication/ldap',
    'authentication/saml',
    'authentication/oidc',
+    'template-gallery',
  ],
  viewIncludes: {},

--- a/services/web/frontend/extracted-translations.json
+++ b/services/web/frontend/extracted-translations.json
@@ -25,6 +25,7 @@
  "about_to_delete_cert": "",
  "about_to_delete_projects": "",
  "about_to_delete_tag": "",
+  "about_to_delete_template": "",
  "about_to_delete_the_following_project": "",
  "about_to_delete_the_following_projects": "",
  "about_to_delete_user_preamble": "",
@@ -142,6 +143,7 @@
  "all_project_activity_description": "",
  "all_projects": "",
  "all_projects_will_be_transferred_immediately": "",
+  "all_templates": "",
  "all_these_experiments_are_available_exclusively": "",
  "allocate_license": "",
  "allows_to_search_by_author_title_etc_possible_to_pull_results_directly_from_your_reference_manager_if_connected": "",
@@ -180,6 +182,7 @@
  "at_most_x_libraries_can_be_selected": "",
  "attach_image_or_pdf": "",
  "audit_logs": "",
+  "author": "",
  "auto_close_brackets": "",
  "auto_compile": "",
  "auto_complete": "",
@@ -265,6 +268,7 @@
  "card_must_be_authenticated_by_3dsecure": "",
  "card_payment": "",
  "careers": "",
+  "categories": "",
  "category_arrows": "",
  "category_greek": "",
  "category_misc": "",
@@ -425,6 +429,7 @@
  "cut": "",
  "dark_mode_pdf_preview": "",
  "dark_themes": "",
+  "date": "",
  "date_and_owner": "",
  "date_and_time": "",
  "dealing_with_errors": "",
@@ -454,6 +459,7 @@
  "delete_sso_config": "",
  "delete_table": "",
  "delete_tag": "",
+  "delete_template": "",
  "delete_token": "",
  "delete_user": "",
  "delete_your_account": "",
@@ -568,6 +574,7 @@
  "edit_sso_configuration": "",
  "edit_tag": "",
  "edit_tag_name": "",
+  "edit_template": "",
  "edit_your_custom_dictionary": "",
  "edited": "",
  "editing": "",
@@ -1042,6 +1049,7 @@
  "last_name": "",
  "last_resort_trouble_shooting_guide": "",
  "last_suggested_fix": "",
+  "last_updated": "",
  "last_updated_date_by_x": "",
  "last_used": "",
  "last_verification_attempt": "",
@@ -1050,6 +1058,8 @@
  "latam_discount_modal_title": "",
  "latex_places_figures_according_to_a_special_algorithm": "",
  "latex_places_tables_according_to_a_special_algorithm": "",
+  "latex_templates": "",
+  "latex_templates_for_journal_articles": "",
  "layout_options": "",
  "learn_more": "",
  "learn_more_about": "",
@@ -1277,6 +1287,7 @@
  "no_search_results": "",
  "no_selection_select_file": "",
  "no_symbols_found": "",
+  "no_templates_found": "",
  "no_thanks_cancel_now": "",
  "non_blinking_cursor": "",
  "normal": "",
@@ -1315,6 +1326,7 @@
  "only_project_owner_can_link_github": "",
  "open_action_menu": "",
  "open_advanced_reference_search": "",
+  "open_as_template": "",
  "open_file": "",
  "open_link": "",
  "open_path": "",
@@ -1341,6 +1353,7 @@
  "overleaf_labs": "",
  "overleaf_learning_center": "",
  "overleaf_logo": "",
+  "overleaf_template_gallery": "",
  "overleafs_functionality_meets_my_needs": "",
  "overview": "",
  "overwrite": "",
@@ -1415,6 +1428,7 @@
  "please_ask_the_project_owner_to_upgrade_to_track_changes": "",
  "please_change_primary_to_remove": "",
  "please_compile_pdf_before_download": "",
+  "please_compile_pdf_before_publish_as_template": "",
  "please_confirm_primary_email_or_edit": "",
  "please_confirm_secondary_email_or_edit": "",
  "please_confirm_your_email_before_making_it_default": "",
@@ -1452,8 +1466,10 @@
  "presentation_mode": "",
  "press_shift_space_for_suggestions": "",
  "press_space_to_open_the_ai_assistant": "",
+  "prev": "",
  "preview": "",
  "preview_editor_tabs": "",
+  "previous": "",
  "previous_page": "",
  "price": "",
  "primarily_work_study_question": "",
@@ -1973,7 +1989,10 @@
  "tax_id_type": "",
  "tell_the_project_owner_and_ask_them_to_upgrade": "",
  "template": "",
+  "template_category": "",
  "template_description": "",
+  "template_gallery": "",
+  "template_title": "",
  "template_title_taken_from_project_title": "",
  "templates": "",
  "temporarily_hides_the_preview": "",
--- a/services/web/frontend/js/features/editor-left-menu/components/actions-manage-template.tsx
+++ b/services/web/frontend/js/features/editor-left-menu/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 '@/features/ui/components/ol/ol-tooltip'
+import { useDetachCompileContext } from '../../../shared/context/detach-compile-context'
+import EditorManageTemplateModalWrapper from '../../manage-template-modal/components/editor-manage-template-modal-wrapper'
+import LeftMenuButton from './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}`)
+    },
+    [location]
+  )
+
+  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/frontend/js/features/manage-template-modal/components/editor-manage-template-modal-wrapper.jsx
+++ b/services/web/frontend/js/features/manage-template-modal/components/editor-manage-template-modal-wrapper.jsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import withErrorBoundary from '../../../infrastructure/error-boundary'
+import { useProjectContext } from '../../../shared/context/project-context'
+import ManageTemplateModal from './manage-template-modal'
+
+const EditorManageTemplateModalWrapper = React.memo(
+  function EditorManageTemplateModalWrapper({ show, handleHide, openTemplate }) {
+    const {
+      _id: projectId,
+      name: projectName,
+    } = useProjectContext()
+
+    if (!projectName) {
+      // wait for useProjectContext
+      return null
+    } else {
+      return (
+        <ManageTemplateModal
+          handleHide={handleHide}
+          show={show}
+          handleAfterPublished={openTemplate}
+          projectId={projectId}
+          projectName={projectName}
+        />
+      )
+    }
+  }
+)
+
+EditorManageTemplateModalWrapper.propTypes = {
+  show: PropTypes.bool.isRequired,
+  handleHide: PropTypes.func.isRequired,
+  openTemplate: PropTypes.func.isRequired,
+}
+
+export default withErrorBoundary(EditorManageTemplateModalWrapper)
--- a/services/web/frontend/js/features/manage-template-modal/components/manage-template-modal-content.jsx
+++ b/services/web/frontend/js/features/manage-template-modal/components/manage-template-modal-content.jsx
@@ -0,0 +1,203 @@
+import { useMemo, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import PropTypes from 'prop-types'
+import { debugConsole } from '@/utils/debugging'
+import { getJSON, postJSON } from '../../../infrastructure/fetch-json'
+import Notification from '@/shared/components/notification'
+import {
+  OLModalBody,
+  OLModalFooter,
+  OLModalHeader,
+  OLModalTitle,
+} from '@/features/ui/components/ol/ol-modal'
+import OLForm from '@/features/ui/components/ol/ol-form'
+import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
+import OLFormControl from '@/features/ui/components/ol/ol-form-control'
+import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import { useDetachCompileContext } from '../../../shared/context/detach-compile-context'
+import { useUserContext } from '../../../shared/context/user-context'
+import SettingsTemplateCategory from './settings-template-category'
+
+const defaultLicense = 'Creative Commons CC BY 4.0'
+
+export default function ManageTemplateModalContent({
+  handleHide,
+  inFlight,
+  setInFlight,
+  handleAfterPublished,
+  projectId,
+  projectName,
+}) {
+  const { t } = useTranslation()
+
+  const { pdfFile } = useDetachCompileContext()
+  const user = useUserContext()
+
+  const [error, setError] = useState()
+  const [disablePublish, setDisablePublish] = useState(false)
+  const [notificationType, setNotificationType] = useState('error')
+  const [name, setName] = useState(`${projectName}`)
+  const [description, setDescription] = useState('')
+  const [author, setAuthor] = useState(`${user.first_name} ${user.last_name}`.trim())
+  const [license, setLicense] = useState(defaultLicense)
+  const [category, setCategory] = useState()
+  const [override, setOverride] = useState(false)
+  const [titleConflict, setTitleConflict] = useState(false)
+
+  const valid = useMemo(
+    () => name.trim().length > 0 && license.trim().length,
+    [name, license]
+  )
+
+  useEffect(() => {
+    const queryParams = new URLSearchParams({ key: 'name', val: projectName })
+    getJSON(`/api/template?${queryParams}`)
+      .then((data) => {
+        if (!data) return
+        setDescription(data.descriptionMD)
+        setAuthor(data.authorMD)
+        setLicense(data.license)
+        setCategory(data.category)
+      })
+      .catch(debugConsole.error)
+  }, [])
+
+  const handleSubmit = event => {
+    event.preventDefault()
+
+    if (!valid) {
+      return
+    }
+
+    setError(false)
+    setInFlight(true)
+
+    postJSON(`/template/new/${projectId}`, {
+      body: {
+        category,
+        name: name.trim(),
+        authorMD: author.trim(),
+        license: license.trim(),
+        descriptionMD: description.trim(),
+        build: pdfFile.build,
+        override,
+      },
+    })
+      .then(data => {
+        // redirect to template page
+        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 handleNameChange = event => {
+    setName(event.target.value)
+    if (titleConflict) {
+      setError(false)
+      setOverride(false)
+      if (disablePublish) setDisablePublish(false)
+    }
+  }
+
+  return (
+    <>
+      <OLModalHeader closeButton>
+        <OLModalTitle>{t('publish_as_template')}</OLModalTitle>
+      </OLModalHeader>
+
+      <OLModalBody>
+        <OLForm id="publish-template-form" onSubmit={handleSubmit}>
+          <OLFormGroup controlId="publish-template-form-title">
+            <OLFormLabel>{t('template_title')}</OLFormLabel>
+            <OLFormControl
+              type="text"
+              placeholder="New Template"
+              required
+              value={name}
+              onChange={handleNameChange}
+            />
+          </OLFormGroup>
+          <OLFormGroup controlId="publish-template-form-category">
+            <SettingsTemplateCategory
+              setCategory={setCategory}
+              category={category}
+            />
+          </OLFormGroup>
+          <OLFormGroup controlId="publish-template-form-author">
+            <OLFormLabel>{t('Author')}</OLFormLabel>
+            <OLFormControl
+              type="text"
+              placeholder="Anonymous"
+              value={author}
+              onChange={event => setAuthor(event.target.value)}
+            />
+          </OLFormGroup>
+          <OLFormGroup controlId="publish-template-form-license">
+            <OLFormLabel>{t('License')}</OLFormLabel>
+            <OLFormControl
+              type="text"
+              placeholder="Template License"
+              required
+              value={license}
+              onChange={event => setLicense(event.target.value)}
+            />
+          </OLFormGroup>
+          <OLFormGroup controlId="publish-template-form-description">
+            <OLFormLabel>{t('template_description')}</OLFormLabel>
+            <OLFormControl
+              as="textarea"
+              value={description}
+              onChange={event => setDescription(event.target.value)}
+              rows={4}
+              autoFocus
+            />
+          </OLFormGroup>
+        </OLForm>
+        {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
+          variant={override ? "danger" : "primary"}
+          disabled={inFlight || !valid || disablePublish}
+          form="publish-template-form"
+          type="submit"
+        >
+          {inFlight ? <>{t('publishing')}…</> : override ? t('overwrite') : t('publish')}
+        </OLButton>
+      </OLModalFooter>
+    </>
+  )
+}
+
+ManageTemplateModalContent.propTypes = {
+  handleHide: PropTypes.func.isRequired,
+  inFlight: PropTypes.bool,
+  handleAfterPublished: PropTypes.func.isRequired,
+  setInFlight: PropTypes.func.isRequired,
+  projectId: PropTypes.string,
+  projectName: PropTypes.string,
+}
--- a/services/web/frontend/js/features/manage-template-modal/components/manage-template-modal.jsx
+++ b/services/web/frontend/js/features/manage-template-modal/components/manage-template-modal.jsx
@@ -0,0 +1,51 @@
+import React, { memo, useCallback, useState } from 'react'
+import PropTypes from 'prop-types'
+import OLModal from '@/features/ui/components/ol/ol-modal'
+import ManageTemplateModalContent from './manage-template-modal-content'
+
+function ManageTemplateModal({
+  show,
+  handleHide,
+  handleAfterPublished,
+  projectId,
+  projectName,
+}) {
+  const [inFlight, setInFlight] = useState(false)
+
+  const onHide = useCallback(() => {
+    if (!inFlight) {
+      handleHide()
+    }
+  }, [handleHide, inFlight])
+
+  return (
+    <OLModal
+      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>
+  )
+}
+
+ManageTemplateModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  handleHide: PropTypes.func.isRequired,
+  handleAfterPublished: PropTypes.func.isRequired,
+  projectId: PropTypes.string,
+  projectName: PropTypes.string,
+}
+
+export default memo(ManageTemplateModal)
--- a/services/web/frontend/js/features/manage-template-modal/components/settings-template-category.tsx
+++ b/services/web/frontend/js/features/manage-template-modal/components/settings-template-category.tsx
@@ -0,0 +1,51 @@
+import { useMemo, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import getMeta from '../../../utils/meta'
+import SettingsMenuSelect from '@/features/editor-left-menu/components/settings/settings-menu-select'
+import type { Option } from '@/features/editor-left-menu/components/settings/settings-menu-select'
+
+interface ManageTemplateCategoryProps {
+  category: string | null
+  setCategory: (value: string) => void
+}
+
+export default function SettingsTemplateCategory({
+  category,
+  setCategory
+}: ManageTemplateCategoryProps) {
+  const { t } = useTranslation()
+
+  const { templateLinks } = useMemo(
+    () => getMeta('ol-ExposedSettings') || [],
+    []
+  )
+
+  if (templateLinks.length === 0) {
+    return null
+  }
+
+  const options: Option[] = useMemo(
+    () =>
+      templateLinks.map(({ name, url }) => ({
+        value: url,
+        label: name,
+      })),
+    [templateLinks]
+  )
+
+  useEffect(() => {
+    if (!category && options.length > 0) {
+      setCategory(options[0].value)
+    }
+  }, [options, category, setCategory])
+
+  return (
+    <SettingsMenuSelect
+      onChange={setCategory}
+      value={category ?? ""}
+      options={options}
+      label={t('template_category')}
+      name="category"
+    />
+  )
+}
--- a/services/web/frontend/js/features/template-gallery/components/gallery-header-all.tsx
+++ b/services/web/frontend/js/features/template-gallery/components/gallery-header-all.tsx
@@ -0,0 +1,29 @@
+import { useTranslation } from 'react-i18next'
+import OLCol from '@/features/ui/components/ol/ol-col'
+import OLRow from '@/features/ui/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/frontend/js/features/template-gallery/components/gallery-header-tagged.tsx
+++ b/services/web/frontend/js/features/template-gallery/components/gallery-header-tagged.tsx
@@ -0,0 +1,33 @@
+import getMeta from '@/utils/meta'
+import OLCol from '@/features/ui/components/ol/ol-col'
+import OLRow from '@/features/ui/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/frontend/js/features/template-gallery/components/gallery-popular-tags.tsx
+++ b/services/web/frontend/js/features/template-gallery/components/gallery-popular-tags.tsx
@@ -0,0 +1,29 @@
+import { useTranslation } from 'react-i18next'
+import getMeta from '@/utils/meta'
+
+export default function GalleryPopularTags() {
+  const { t } = useTranslation()
+  const { templateLinks } = getMeta('ol-ExposedSettings') || []
+
+  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/frontend/js/features/template-gallery/components/gallery-search-sort-header.tsx
+++ b/services/web/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 '@/features/ui/components/ol/ol-col'
+import OLRow from '@/features/ui/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/frontend/js/features/template-gallery/components/pagination.tsx
+++ b/services/web/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/frontend/js/features/template-gallery/components/search-form.tsx
+++ b/services/web/frontend/js/features/template-gallery/components/search-form.tsx
@@ -0,0 +1,59 @@
+import { useTranslation } from 'react-i18next'
+import { MergeAndOverride } from '../../../../../types/utils'
+import OLForm from '@/features/ui/components/ol/ol-form'
+import OLFormControl from '@/features/ui/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
+        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/frontend/js/features/template-gallery/components/sort/with-content.tsx
+++ b/services/web/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/frontend/js/features/template-gallery/components/template-gallery-entry.tsx
+++ b/services/web/frontend/js/features/template-gallery/components/template-gallery-entry.tsx
@@ -0,0 +1,29 @@
+import { memo } from 'react'
+import { cleanHtml } from '../../../../../modules/template-gallery/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/frontend/js/features/template-gallery/components/template-gallery-root.tsx
+++ b/services/web/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 '@/features/ui/components/bootstrap-5/navbar/default-navbar'
+import Footer from '@/features/ui/components/bootstrap-5/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/frontend/js/features/template-gallery/components/template-gallery.tsx
+++ b/services/web/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 '@/features/ui/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/frontend/js/features/template-gallery/context/template-gallery-context.tsx
+++ b/services/web/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/frontend/js/features/template-gallery/hooks/use-sort.ts
+++ b/services/web/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/frontend/js/features/template-gallery/types/api.ts
+++ b/services/web/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/frontend/js/features/template-gallery/util/api.ts
+++ b/services/web/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/frontend/js/features/template-gallery/util/sort-templates.ts
+++ b/services/web/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/frontend/js/features/template/components/delete-template-button.tsx
+++ b/services/web/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 '@/features/ui/components/ol/ol-button'
+import DeleteTemplateModal from './delete-template-modal'
+import { Template } from '../../../../../types/template'
+import { useTemplateContext } from '../context/template-context'
+import { deleteTemplate } from '@/features/template/util/api'
+
+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/frontend/js/features/template/components/delete-template-modal.tsx
+++ b/services/web/frontend/js/features/template/components/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/frontend/js/features/template/components/edit-template-button.tsx
+++ b/services/web/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 '@/features/ui/components/ol/ol-button'
+import EditTemplateModal from './edit-template-modal'
+import { useTemplateContext } from '../context/template-context'
+import { updateTemplate } from '@/features/template/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/frontend/js/features/template/components/edit-template-modal.tsx
+++ b/services/web/frontend/js/features/template/components/edit-template-modal.tsx
@@ -0,0 +1,153 @@
+import React, { useEffect, useMemo, useState, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import OLForm from '@/features/ui/components/ol/ol-form'
+import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
+import OLFormControl from '@/features/ui/components/ol/ol-form-control'
+import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import withErrorBoundary from '../../../infrastructure/error-boundary'
+import { Template } from '../../../../../types/template'
+import TemplateActionModal from './template-action-modal'
+import { useTemplateContext } from '../context/template-context'
+import SettingsTemplateCategory from './settings/settings-template-category'
+import SettingsLanguage from './settings/settings-language'
+
+type EditTemplateModalProps = {
+  showModal: boolean
+  handleCloseModal: () => void
+  actionHandler: (editedTemplate: Template) => void | Promise<void>
+}
+
+function EditTemplateModal({
+  showModal,
+  handleCloseModal,
+  actionHandler,
+}: EditTemplateModalProps) {
+  const { t } = useTranslation()
+  const { template } = useTemplateContext()
+  const [editedTemplate, setEditedTemplate] = useState<Template>({ ...template })
+  const [actionError, setActionError] = useState<any>(null)
+
+  useEffect(() => {
+    if (showModal) {
+      setEditedTemplate({ ...template })
+      setActionError(null)
+    }
+  }, [showModal, template])
+
+  const isConflictError = actionError?.info?.statusCode === 409
+
+  const valid = useMemo(
+    () => editedTemplate.name.trim().length > 0 && editedTemplate.license.trim().length > 0,
+    [editedTemplate.name, editedTemplate.license]
+  )
+
+  const clearModalErrorRef = useRef<() => void>(() => {})
+
+  return (
+    <TemplateActionModal
+      action="edit"
+      title={t('edit_template')}
+      template={editedTemplate}
+      showModal={showModal}
+      handleCloseModal={handleCloseModal}
+      actionHandler={() =>
+        Promise.resolve(actionHandler(editedTemplate)).catch(err => {
+          setActionError(err)
+          throw err
+        })
+      }
+      renderFooterButtons={({ onConfirm, onCancel, isProcessing }) => (
+        <>
+          <OLButton variant="secondary" onClick={onCancel}>
+            {t('cancel')}
+          </OLButton>
+          <OLButton
+            onClick={onConfirm}
+            variant="primary"
+            type="submit"
+            form="edit-template-form"
+            disabled={!valid || isProcessing || isConflictError}
+          >
+            {t('save')}
+          </OLButton>
+        </>
+      )}
+      onClearError={fn => {
+        clearModalErrorRef.current = fn
+      }}
+    >
+      <OLForm id="edit-template-form" onSubmit={e => e.preventDefault()}>
+        <OLFormGroup controlId="edit-template-form-title">
+          <OLFormLabel>{t('template_title')}</OLFormLabel>
+          <OLFormControl
+            type="text"
+            required
+            value={editedTemplate.name}
+            onChange={e => {
+              setEditedTemplate(prev => ({ ...prev, name: e.target.value }))
+              if (isConflictError) {
+                setActionError(null)
+                clearModalErrorRef.current?.()
+              }
+            }}
+          />
+        </OLFormGroup>
+
+        <OLFormGroup controlId="edit-template-form-category">
+          <SettingsTemplateCategory
+            value={editedTemplate.category}
+            onChange={category =>
+              setEditedTemplate(prev => ({ ...prev, category }))
+            }
+          />
+        </OLFormGroup>
+
+        <OLFormGroup controlId="edit-template-form-author">
+          <OLFormLabel>{t('Author')}</OLFormLabel>
+          <OLFormControl
+            type="text"
+            value={editedTemplate.authorMD}
+            onChange={e =>
+              setEditedTemplate(prev => ({ ...prev, authorMD: e.target.value }))
+            }
+          />
+        </OLFormGroup>
+
+        <OLFormGroup controlId="edit-template-form-license">
+          <OLFormLabel>{t('License')}</OLFormLabel>
+          <OLFormControl
+            type="text"
+            required
+            value={editedTemplate.license}
+            onChange={e =>
+              setEditedTemplate(prev => ({ ...prev, license: e.target.value }))
+            }
+          />
+        </OLFormGroup>
+
+        <OLFormGroup controlId="edit-template-form-description">
+          <OLFormLabel>{t('template_description')}</OLFormLabel>
+          <OLFormControl
+            as="textarea"
+            value={editedTemplate.descriptionMD}
+            onChange={e =>
+              setEditedTemplate(prev => ({ ...prev, descriptionMD: e.target.value }))
+            }
+            rows={6}
+          />
+        </OLFormGroup>
+
+        <OLFormGroup controlId="edit-template-form-language">
+          <SettingsLanguage
+            value={editedTemplate.language}
+            onChange={language =>
+              setEditedTemplate(prev => ({ ...prev, language }))
+            }
+          />
+        </OLFormGroup>
+      </OLForm>
+    </TemplateActionModal>
+  )
+}
+export default withErrorBoundary(React.memo(EditTemplateModal))
--- a/services/web/frontend/js/features/template/components/settings/settings-language.tsx
+++ b/services/web/frontend/js/features/template/components/settings/settings-language.tsx
@@ -0,0 +1,33 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import getMeta from '../../../../utils/meta'
+import SettingsMenuSelect from './settings-menu-select'
+
+export default function SettingsLanguage({ value, onChange }) {
+  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/frontend/js/features/template/components/settings/settings-menu-select.tsx
+++ b/services/web/frontend/js/features/template/components/settings/settings-menu-select.tsx
@@ -0,0 +1,106 @@
+import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
+import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
+import OLFormSelect from '@/features/ui/components/ol/ol-form-select'
+import { ChangeEventHandler, useCallback, useRef } from 'react'
+import { Spinner } from 'react-bootstrap-5'
+
+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> = {
+  label: string
+  name: string
+  options: Array<Option<T>>
+  optgroup?: Optgroup<T>
+  loading?: boolean
+  onChange: (val: T) => void
+  value?: T
+  disabled?: boolean
+}
+
+export default function SettingsMenuSelect<T extends PossibleValue = string>({
+  label,
+  name,
+  options,
+  optgroup,
+  loading,
+  onChange,
+  value,
+  disabled = false,
+}: SettingsMenuSelectProps<T>) {
+  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 (
+    <OLFormGroup
+      controlId={`settings-menu-${name}`}
+      className="left-menu-setting"
+    >
+      <OLFormLabel>{label}</OLFormLabel>
+      {loading ? (
+        <p className="mb-0">
+          <Spinner
+            animation="border"
+            aria-hidden="true"
+            size="sm"
+            role="status"
+          />
+        </p>
+      ) : (
+        <OLFormSelect
+          size="sm"
+          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>
+      )}
+    </OLFormGroup>
+  )
+}
--- a/services/web/frontend/js/features/template/components/settings/settings-template-category.tsx
+++ b/services/web/frontend/js/features/template/components/settings/settings-template-category.tsx
@@ -0,0 +1,44 @@
+import { 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'
+
+export type SettingsTemplateCategoryProps = {
+  value: string
+  onChange: (value: string) => void
+}
+
+export default function SettingsTemplateCategory({
+  value,
+  onChange,
+}: SettingsTemplateCategoryProps) {
+  const { t } = useTranslation()
+
+  const { templateLinks = [] } = getMeta('ol-ExposedSettings') as {
+    templateLinks?: Array<{ name: string; url: string; description: string }>
+  }
+
+  if (templateLinks.length === 0) {
+    return null
+  }
+
+  const options: Option[] = useMemo(
+    () =>
+      templateLinks.map(({ name, url }) => ({
+        value: url,
+        label: name,
+      })),
+    [templateLinks]
+  )
+
+  return (
+    <SettingsMenuSelect
+      name="category"
+      label={t('template_category')}
+      value={value}
+      onChange={onChange}
+      options={options}
+    />
+  )
+}
--- a/services/web/frontend/js/features/template/components/template-action-modal.tsx
+++ b/services/web/frontend/js/features/template/components/template-action-modal.tsx
@@ -0,0 +1,136 @@
+import { memo, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Template } from '../../../../../types/template'
+import { getUserFacingMessage } from '@/infrastructure/fetch-json'
+import useIsMounted from '@/shared/hooks/use-is-mounted'
+import * as eventTracking from '@/infrastructure/event-tracking'
+import { isSmallDevice } from '@/infrastructure/event-tracking'
+import Notification from '@/shared/components/notification'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import OLModal, {
+  OLModalBody,
+  OLModalFooter,
+  OLModalHeader,
+  OLModalTitle,
+} from '@/features/ui/components/ol/ol-modal'
+
+type TemplateActionModalProps = {
+  title?: 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,
+  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()
+
+  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
+      animation
+      show={showModal}
+      onHide={handleCloseModal}
+      id="action-tempate-modal"
+      backdrop="static"
+    >
+      <OLModalHeader closeButton>
+        <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>
+    </OLModal>
+  )
+}
+
+export default memo(TemplateActionModal)
+
--- a/services/web/frontend/js/features/template/components/template-details.tsx
+++ b/services/web/frontend/js/features/template/components/template-details.tsx
@@ -0,0 +1,103 @@
+import { useTranslation } from 'react-i18next'
+import getMeta from '@/utils/meta'
+import OLCol from '@/features/ui/components/ol/ol-col'
+import OLRow from '@/features/ui/components/ol/ol-row'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+import { formatDate, fromNowDate } from '../../../utils/dates'
+import { cleanHtml } from '../../../../../modules/template-gallery/app/src/CleanHtml.mjs'
+import { useTemplateContext } from '../context/template-context'
+import DeleteTemplateButton from './delete-template-button'
+import EditTemplateButton from './edit-template-button'
+
+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>
+          {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/frontend/js/features/template/components/template-preview.tsx
+++ b/services/web/frontend/js/features/template/components/template-preview.tsx
@@ -0,0 +1,23 @@
+import OLCol from '@/features/ui/components/ol/ol-col'
+import OLRow from '@/features/ui/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/frontend/js/features/template/components/template-root.tsx
+++ b/services/web/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 '@/features/ui/components/bootstrap-5/navbar/default-navbar'
+import Footer from '@/features/ui/components/bootstrap-5/footer/footer'
+import getMeta from '@/utils/meta'
+import OLCol from '@/features/ui/components/ol/ol-col'
+import OLRow from '@/features/ui/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 || t('all_templates')
+
+  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={template.category}>
+                <i className="material-symbols material-symbols-rounded" aria-hidden="true">arrow_left_alt</i>
+                {categoryName}
+              </a>
+              {template.category !== '/templates/all' && (
+                <>
+                  <span className="mx-2">/</span>
+                  <a className="previous-page-link" href={'/templates/all'}>
+                    {t('all_templates')}
+                  </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/frontend/js/features/template/context/template-context.tsx
+++ b/services/web/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/frontend/js/features/template/util/api.ts
+++ b/services/web/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/frontend/js/pages/template-gallery.tsx
+++ b/services/web/frontend/js/pages/template-gallery.tsx
@@ -0,0 +1,14 @@
+import './../utils/meta'
+import '../utils/webpack-public-path'
+import './../infrastructure/error-reporter'
+import '@/i18n'
+import '../features/event-tracking'
+import '../features/cookie-banner'
+import '../features/link-helpers/slow-link'
+import ReactDOM from 'react-dom'
+import TemplateGalleryRoot from '../features/template-gallery/components/template-gallery-root'
+
+const element = document.getElementById('template-gallery-root')
+if (element) {
+  ReactDOM.render(<TemplateGalleryRoot />, element)
+}
--- a/services/web/frontend/js/pages/template.tsx
+++ b/services/web/frontend/js/pages/template.tsx
@@ -0,0 +1,14 @@
+import './../utils/meta'
+import '../utils/webpack-public-path'
+import './../infrastructure/error-reporter'
+import '@/i18n'
+import '../features/event-tracking'
+import '../features/cookie-banner'
+import '../features/link-helpers/slow-link'
+import ReactDOM from 'react-dom'
+import TemplateRoot from '../features/template/components/template-root'
+
+const element = document.getElementById('template-root')
+if (element) {
+  ReactDOM.render(<TemplateRoot />, element)
+}
--- a/services/web/frontend/js/shared/components/navbar/logged-in-items.tsx
+++ b/services/web/frontend/js/shared/components/navbar/logged-in-items.tsx
@@ -19,6 +19,9 @@ export default function LoggedInItems({
      <NavLinkItem href="/project" className="nav-item-projects">
        {t('projects')}
      </NavLinkItem>
+      <NavLinkItem href="/templates" className="nav-item-templates">
+        {t('templates')}
+      </NavLinkItem>
      <NavDropdownMenu
        title={t('Account')}
        className="nav-item-account"
--- a/services/web/frontend/js/shared/components/navbar/logged-out-items.tsx
+++ b/services/web/frontend/js/shared/components/navbar/logged-out-items.tsx
@@ -12,6 +12,9 @@ export default function LoggedOutItems({

  return (
    <>
+      <NavLinkItem href="/templates" className="nav-item-templates">
+        {t('templates')}
+      </NavLinkItem>
      {showSignUpLink ? (
        <NavLinkItem
          href="/register"
--- a/services/web/frontend/js/utils/meta.ts
+++ b/services/web/frontend/js/utils/meta.ts
@@ -24,6 +24,7 @@ import {
 } from '../../../types/project/dashboard/notification'
 import { Survey } from '../../../types/project/dashboard/survey'
 import { GetProjectsResponseBody } from '../../../types/project/dashboard/api'
+import { GetTemplatesResponseBody } from '../../../types/template/dashboard/api'
 import { Tag } from '../../../app/src/Features/Tags/types'
 import { Institution } from '../../../types/institution'
 import {
@@ -248,6 +249,7 @@ export interface Meta {
  'ol-postCheckoutRedirect': string
  'ol-postUrl': string
  'ol-prefetchedProjectsBlob': GetProjectsResponseBody | undefined
+  'ol-prefetchedTemplatesBlob': GetTemplatesResponseBody | undefined
  'ol-preventCompileOnLoad'?: boolean
  'ol-primaryEmail': { email: string; confirmed: boolean }
  'ol-project': any // TODO
--- a/services/web/frontend/stylesheets/components/link.scss
+++ b/services/web/frontend/stylesheets/components/link.scss
@@ -9,5 +9,6 @@
  i {
    margin-right: var(--spacing-02);
    padding-bottom: 3px;
+    vertical-align: middle;
  }
 }
--- a/services/web/frontend/stylesheets/pages/templates-v2.scss
+++ b/services/web/frontend/stylesheets/pages/templates-v2.scss
@@ -25,6 +25,32 @@
 }

 .gallery {
+  padding-top: calc($header-height + var(--spacing-10)) !important;
+
+  .gallery-header-sort-btn {
+    border: 0;
+    text-align: left;
+    color: var(--content-secondary);
+    background-color: transparent;
+    padding: 0;
+    font-weight: bold;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      color: var(--content-secondary);
+      text-decoration: none;
+    }
+
+    .material-symbols {
+      vertical-align: bottom;
+      font-size: var(--font-size-06);
+    }
+  }
+
  .gallery-tagged-tags-container-spacing {
    padding: 0 var(--spacing-09);
    margin-bottom: var(--spacing-16);
--- a/services/web/locales/de.json
+++ b/services/web/locales/de.json
@@ -28,6 +28,7 @@
  "about_to_delete_cert": "Du bist dabei, das folgende Zertifikat zu löschen:",
  "about_to_delete_projects": "Du bist dabei, die folgenden Projekte zu löschen:",
  "about_to_delete_tag": "Du bist dabei, das folgende Stichwort zu löschen (darin enthaltene Projekte werden nicht gelöscht):",
+  "about_to_delete_template": "Du bist dabei, die folgende Vorlage zu löschen:",
  "about_to_delete_the_following_project": "Du bist dabei, das folgende Projekt zu löschen",
  "about_to_delete_the_following_projects": "Du bist dabei, die folgenden Projekte zu löschen",
  "about_to_delete_user_preamble": "Du bist dabei, __userName__ (__userEmail__) zu löschen. Das bedeutet:",
@@ -438,6 +439,7 @@
  "delete_figure": "Abbildung löschen",
  "delete_projects": "Projekte löschen",
  "delete_tag": "Stichwort löschen",
+  "delete_template": "Vorlage löschen",
  "delete_token": "Token löschen",
  "delete_user": "Nutzer löschen",
  "delete_your_account": "Lösche dein Konto",
@@ -456,6 +458,7 @@
  "do_not_have_acct_or_do_not_want_to_link": "Wenn du kein <b>__appName__</b>-Konto hast oder nicht mit deinem <b>__institutionName__</b>-Konto verknüpfen möchtest, klicke auf <b>„__clickText__“</b>.",
  "do_not_link_accounts": "Konten nicht verknüpfen",
  "do_you_want_to_change_your_primary_email_address_to": "Willst Du deine primäre E-Mail-Adresse in <b>__email__</b> ändern?",
+  "do_you_want_to_overwrite_it": "Möchtest du es überschreiben?",
  "do_you_want_to_overwrite_them": "Willst Du sie überschreiben?",
  "documentation": "Dokumentation",
  "docx_import_feedback_message": "Das Importieren von Word-Dokumenten ist eine neue Funktion. <0>Sag uns, was du davon hältst</0>",
@@ -506,6 +509,7 @@
  "edit_figure": "Abbildung bearbeiten",
  "edit_tag": "Stichwort bearbeiten",
  "edit_tag_name": "Stichwortname bearbeiten",
+  "edit_template": "Vorlage bearbeiten",
  "edit_your_custom_dictionary": "Bearbeite dein benutzerdefiniertes Wörterbuch",
  "editing": "Bearbeitung",
  "editing_captions": "Beschriftungen bearbeiten",
@@ -566,6 +570,7 @@
  "expiry": "Ablaufdatum",
  "export_csv": "CSV-Datei exportieren",
  "export_project_to_github": "Projekt nach GitHub exportieren",
+  "failed_to_publish_as_a_template": "Veröffentlichung als Vorlage fehlgeschlagen.",
  "failed_to_send_managed_user_invite_to_email": "Der Versand der Einladung für Verwaltete Benutzer an <0>__email__</0> hat nicht funktioniert. Bitte versuche es später noch einmal.",
  "fancy_going_dark": "Lust auf den Dark Mode?",
  "faq_how_does_free_trial_works_answer": "Während deines __len__-tägigen Probe-Abonnements erhältst du vollen Zugriff auf die Funktionen des von dir gewählten __appName__-Abonnements. Es besteht keine Verpflichtung, über die Testperiode hinaus fortzufahren. Deine Karte wird am Ende des __len__-tägigen Testzeitraums belastet, sofern du nicht vorher gekündigt hast. Um zu kündigen, gehe zu deinen Abonnementeinstellungen in deinem Konto.",
@@ -1048,6 +1053,7 @@
  "no_search_results": "Keine Suchergebnisse",
  "no_selection_select_file": "Derzeit ist keine Datei ausgewählt. Bitte wähle eine Datei aus dem Dateibaum aus.",
  "no_symbols_found": "Keine Symbole gefunden",
+  "no_templates_found": "Keine Vorlagen gefunden.",
  "no_thanks_cancel_now": "Nein, danke - Ich möchte nach wie vor jetzt stornieren",
  "no_update_email": "Nein, E-Mail-Adresse aktualisieren",
  "non_blinking_cursor": "Nicht blinkender Cursor",
@@ -1138,6 +1144,8 @@
  "please_ask_the_project_owner_to_upgrade_to_track_changes": "Bitte den Projekteigentümer um ein Upgrade, um Änderungen verfolgen zu können",
  "please_change_primary_to_remove": "Bitte ändere deine primäre E-Mail-Adresse, um sie zu entfernen",
  "please_compile_pdf_before_download": "Bitte kompiliere dein Projekt, bevor du das PDF herunterlädst",
+  "please_compile_pdf_before_publish_as_template": "Bitte kompiliere dein Projekt, bevor du es als Vorlage veröffentlichst.",
+  "please_compile_pdf_before_word_count": "Bitte kompiliere dein Projekt, bevor du eine Wortzählung durchführst.",
  "please_confirm_email": "Bitte bestätige deine E-Mail-Adresse __emailAddress__, indem du auf den Link in der Bestätigungs-E-Mail klickst",
  "please_confirm_primary_email_or_edit": "Bitte bestätige deine primäre E-Mail-Adresse __emailAddress__. Um sie zu bearbeiten, gehe zu <0>Kontoeinstellungen</0>.",
  "please_confirm_secondary_email_or_edit": "Bitte bestätige deine sekundäre E-Mail-Adresse __emailAddress__. Um sie zu bearbeiten, gehe zu <0>Kontoeinstellungen</0>.",
@@ -1442,11 +1450,14 @@
  "take_survey": "An Umfrage teilnehmen",
  "template": "Vorlage",
  "template_approved_by_publisher": "Diese Vorlage wurde vom Verlag genehmigt",
+  "template_category": "Vorlagenkategorie",
  "template_description": "Vorlagenbeschreibung",
  "template_gallery": "Vorlagengalerie",
  "template_not_found_description": "Diese Methode zum Erstellen von Projekten aus Vorlagen wurde entfernt. Besuche unsere Vorlagengalerie, um weitere Vorlagen zu finden.",
+  "template_title": "Vorlagentitel",
  "template_title_taken_from_project_title": "Der Vorlagentitel wird automatisch aus dem Projekttitel übernommen",
  "template_top_pick_by_overleaf": "Diese Vorlage wurde von Overleaf-Mitarbeitern aufgrund ihrer hohen Qualität ausgewählt",
+  "template_with_this_title_exists_and_owned_by_x": "Eine Vorlage mit diesem Namen existiert bereits, und der Besitzer ist: __x__.",
  "templates": "Vorlagen",
  "templates_admin_source_project": "Administration: Quellprojekt",
  "templates_page_title": "Vorlagen - Zeitschriften, Lebensläufe, Präsentationen, Berichte und mehr",
@@ -1529,6 +1540,7 @@
  "try_it_for_free": "Probiere es kostenlos aus",
  "try_now": "Jetzt versuchen",
  "try_premium_for_free": "Teste Premium kostenlos",
+  "try_recompile_project": "Versuche bitte, das Projekt von Grund auf neu zu kompilieren.",
  "try_recompile_project_or_troubleshoot": "Versuche bitte, das Projekt von Grund auf neu zu kompilieren. Wenn das Problem weiterhin besteht, findest Du im <0>Troubleshooting Guide</0> weitere Hilfe",
  "try_to_compile_despite_errors": "Versuche, trotz Fehler zu kompilieren",
  "turn_off": "Deaktivieren",
@@ -1545,6 +1557,7 @@
  "understand_managed_user_accounts": "Verwaltete Konten verstehen",
  "unfold_line": "Zeile ausklappen",
  "university": "Universität",
+  "unknown": "Unbekannt",
  "unlimited": "Unbegrenzt",
  "unlimited_collabs": "Unbeschränkt viele Mitarbeiter",
  "unlimited_projects": "Unbegrenzte Projekte",
@@ -1638,6 +1651,7 @@
  "you_can_now_log_in_sso": "Du kannst dich jetzt über deine Institution anmelden und möglicherweise <0>kostenlose __appName__ „Professionell“-Funktionen</0> erhalten.",
  "you_can_opt_in_and_out_of_the_program_at_any_time_on_this_page": "Du kannst dich jederzeit auf dieser Seite für das Beta-Programm an- und abmelden",
  "you_cant_add_or_change_password_due_to_sso": "Du kannst dein Passwort nicht hinzufügen oder ändern, da deine Gruppe oder Organisation <0>Single Sign-On (SSO)</0> verwendet.",
+  "you_cant_overwrite_it": "Überschreiben ist nicht möglich.",
  "you_dont_have_any_repositories": "Du hast keine Repositories",
  "you_have_added_x_of_group_size_y": "Du hast <0>__addedUsersSize__</0> von <1>__groupSize__</1> verfügbaren Mitgliedern hinzugefügt",
  "you_will_be_able_to_contact_us_any_time_to_share_your_feedback": "Du kannst uns jederzeit kontaktieren, um uns dein Feedback mitzuteilen",
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -29,6 +29,7 @@
  "about_to_delete_cert": "You are about to delete the following certificate:",
  "about_to_delete_projects": "You are about to delete the following projects:",
  "about_to_delete_tag": "You are about to delete the following tag (any projects in them will not be deleted):",
+  "about_to_delete_template": "You are about to delete the following template:",
  "about_to_delete_the_following_project": "You are about to delete the following project",
  "about_to_delete_the_following_projects": "You are about to delete the following projects",
  "about_to_delete_user_preamble": "You’re about to delete __userName__ (__userEmail__). Doing this will mean:",
@@ -607,6 +608,7 @@
  "delete_sso_config": "Delete SSO configuration",
  "delete_table": "Delete table",
  "delete_tag": "Delete Tag",
+  "delete_template": "Delete template",
  "delete_token": "Delete token",
  "delete_user": "Delete user",
  "delete_your_account": "Delete your account",
@@ -744,6 +746,7 @@
  "edit_sso_configuration": "Edit SSO Configuration",
  "edit_tag": "Edit tag",
  "edit_tag_name": "Edit tag name",
+  "edit_template": "Edit template",
  "edit_your_custom_dictionary": "Edit your custom dictionary",
  "editing": "Editing",
  "editing_and_collaboration": "Editing and collaboration",
@@ -856,6 +859,7 @@
  "export_project_to_github": "Export Project to GitHub",
  "failed": "Failed",
  "failed_to_consent_to_workbench_terms": "Failed to consent to workbench terms. Please try again later.",
+  "failed_to_publish_as_a_template": "Failed to publish as a template.",
  "failed_to_send_group_invite_to_email": "Failed to send group invite to <0>__email__</0>. Please try again later.",
  "failed_to_send_managed_user_invite_to_email": "Failed to send Managed User invite to <0>__email__</0>. Please try again later.",
  "failed_to_send_sso_link_invite_to_email": "Failed to send SSO invite reminder to <0>__email__</0>. Please try again later.",
@@ -1675,6 +1679,7 @@
  "no_search_results": "No Search Results",
  "no_selection_select_file": "Currently, no file is selected. Please select a file from the file tree.",
  "no_symbols_found": "No symbols found",
+  "no_templates_found": "No templates found.",
  "no_thanks_cancel_now": "No thanks, I still want to cancel",
  "no_update_email": "No, update email",
  "non_blinking_cursor": "Non-blinking cursor",
@@ -1885,6 +1890,7 @@
  "please_ask_the_project_owner_to_upgrade_to_track_changes": "Please ask the project owner to upgrade to use track changes",
  "please_change_primary_to_remove": "Please change your primary email in order to remove",
  "please_compile_pdf_before_download": "Please compile your project before downloading the PDF",
+  "please_compile_pdf_before_publish_as_template": "Please compile your project before publishing it as a template",
  "please_confirm_email": "Please confirm your email __emailAddress__ by clicking on the link in the confirmation email ",
  "please_confirm_primary_email_or_edit": "Please confirm your primary email address __emailAddress__. To edit it, go to <0>Account settings</0>.",
  "please_confirm_secondary_email_or_edit": "Please confirm your secondary email address __emailAddress__. To edit it, go to <0>Account settings</0>.",
@@ -1931,6 +1937,7 @@
  "presentation_mode": "Presentation mode",
  "press_shift_space_for_suggestions": "Press Shift+Space for suggestions",
  "press_space_to_open_the_ai_assistant": "Press Space to open the AI assistant",
+  "prev": "Prev",
  "preview": "Preview",
  "preview_editor_tabs": "Preview editor tabs",
  "previous_24_hours_only": "previous 24 hours only",
@@ -2008,7 +2015,7 @@
  "pt": "Portuguese",
  "public": "Public",
  "publish": "Publish",
-  "publish_as_template": "Manage Template",
+  "publish_as_template": "Publish as a Template",
  "publisher_account": "Publisher Account",
  "publishing": "Publishing",
  "pull_github_changes_into_sharelatex": "Pull GitHub changes into __appName__",
@@ -2565,11 +2572,14 @@
  "tell_the_project_owner_and_ask_them_to_upgrade": "<0>Tell the project owner</0> and ask them to upgrade their Overleaf plan if you need more compile time.",
  "template": "Template",
  "template_approved_by_publisher": "This template has been approved by the publisher",
+  "template_category": "Template Category",
  "template_description": "Template Description",
  "template_gallery": "Template Gallery",
  "template_not_found_description": "This way of creating projects from templates has been removed. Please visit our template gallery to find more templates.",
+  "template_title": "Template Title",
  "template_title_taken_from_project_title": "The template title will be taken automatically from the project title",
  "template_top_pick_by_overleaf": "This template was hand-picked by Overleaf staff for its high quality",
+  "template_with_this_title_exists_and_owned_by_x": "A template with this title already exists and is owned by __x__.",
  "templates": "Templates",
  "templates_admin_source_project": "Admin: Source Project",
  "templates_admin_v1_link": "Admin: V1 Published Version",
@@ -2794,6 +2804,7 @@
  "try_now": "Try Now",
  "try_overleaf_ai": "Try Overleaf AI",
  "try_premium_for_free": "Try Premium for free",
+  "try_recompile_project": "Please try recompiling the project from scratch.",
  "try_recompile_project_or_troubleshoot": "Please try recompiling the project from scratch, and if that doesn’t help, follow our <0>troubleshooting guide</0>.",
  "try_relinking_provider": "It looks like you need to re-link your __provider__ account.",
  "try_to_compile_despite_errors": "Try to compile despite errors",
@@ -3083,6 +3094,7 @@
  "you_cant_add_or_change_password_due_to_ldap_or_sso": "You can’t add or change your password because your group or organization uses LDAP or SSO.",
  "you_cant_add_or_change_password_due_to_sso": "You can’t add or change your password because your group or organization uses <0>single sign-on (SSO)</0>.",
  "you_cant_join_this_group_subscription": "You can’t join this group subscription",
+  "you_cant_overwrite_it": "You can’t overwrite it.",
  "you_cant_reset_password_due_to_ldap_or_sso": "You can’t reset your password because your group or organization uses LDAP or SSO. Contact your system administrator.",
  "you_cant_reset_password_due_to_sso": "You can’t reset your password because your group or organization uses SSO. <0>Log in with SSO</0>.",
  "you_currently_have_x_linked_with_your_overleaf_account": "You currently have <0>__managers__</0> linked with your __appName__ account.",
--- a/services/web/locales/ru.json
+++ b/services/web/locales/ru.json
@@ -19,6 +19,7 @@
  "about_to_archive_projects": "Вы собираетесь архивировать следующие проекты:",
  "about_to_delete_cert": "Вы собираетесь удалить следующий сертификат:",
  "about_to_delete_projects": "Следующие проекты будут удалены:",
+  "about_to_delete_template": "Следующий шаблон будет удален:",
  "about_to_delete_the_following_project": "Вы собираетесь удалить следующий проект:",
  "about_to_delete_the_following_projects": "Вы собираетесь удалить следующие проекты:",
  "about_to_leave_project": "Вы собираетесь покинуть этот проект:",
@@ -125,9 +126,11 @@
  "delete_account_warning_message_3": "Вы собираетесь <strong>удалить все данные Вашего аккаунта</strong>, включая все Ваши проекты и настройки. Пожалуйста, введите адрес электронной почты и пароль Вашего аккаунта в форму внизу для продолжения.",
  "delete_and_leave_projects": "Удалить или оставить проекты",
  "delete_projects": "Удалить проекты",
+  "delete_template": "Удалить шаблон",
  "delete_your_account": "Удалить аккаунт",
  "deleting": "Удаление",
  "disconnected": "Разъединен",
+  "do_you_want_to_overwrite_it": "Перезаписать?",
  "documentation": "Документация",
  "doesnt_match": "Не совпадает",
  "done": "Готово",
@@ -136,6 +139,7 @@
  "download_zip_file": "Скачать архив (.zip)",
  "dropbox_sync": "Синхронизация с Dropbox",
  "dropbox_sync_description": "Синхронизируйте Ваши __appName__ проекты с Вашим Dropbox. Изменения в __appName__ автоматически сохраняются в Вашем Dropbox, и наоборот.",
+  "edit_template": "Редактировать шаблон",
  "editing": "Редактор",
  "email": "Адрес электронной почты",
  "email_already_registered": "Этот адрес уже зарегистрирован.",
@@ -147,6 +151,7 @@
  "example_project": "Использовать пример",
  "expiry": "Срок действия",
  "export_project_to_github": "Экспорт проекта на GitHub",
+  "failed_to_publish_as_a_template": "Не удалось создать шаблон.",
  "fast": "быстрый",
  "features": "Возможности",
  "february": "Февраль",
@@ -268,6 +273,7 @@
  "no_projects": "Нет проектов",
  "no_search_results": "Ничего не найдено",
  "no_thanks_cancel_now": "Нет, спасибо - я хочу удалить сейчас",
+  "no_templates_found": "Шаблоны не найдены.",
  "normal": "нормальный",
  "not_now": "Не сейчас",
  "november": "Ноябрь",
@@ -294,6 +300,8 @@
  "planned_maintenance": "Плановые работы",
  "plans_and_pricing": "Тарифные планы",
  "please_compile_pdf_before_download": "Пожалуйста, скомпилируйте проект перед загрузкой PDF",
+  "please_compile_pdf_before_publish_as_template": "Пожалуйста, скомпилируйте проект, прежде чем создавать из него шаблон",
+  "please_compile_pdf_before_word_count": "Пожалуйста, скомпилируйте проект, прежде чем подсчитывать количество слов.",
  "please_enter_email": "Пожалуйста, введите адрес электронной почты",
  "please_refresh": "Пожалуйста, обновите страницу для продолжения",
  "please_set_a_password": "Пожалуйста, укажите пароль",
@@ -397,7 +405,10 @@
  "sync_to_github": "Синхронизация с GitHub",
  "syntax_validation": "Проверка кода",
  "take_me_home": "Вернуться в начало",
+  "template_category": "Тип шаблона",
  "template_description": "Описание шаблона",
+  "template_title": "Название шаблона",
+  "template_with_this_title_exists_and_owned_by_x": "Уже есть шаблон с таким названием, его владелец __x__.",
  "templates": "Шаблоны",
  "terminated": "Компиляция отменена",
  "terms": "Условия",
@@ -422,8 +433,10 @@
  "total_words": "Количество слов",
  "tr": "Турецкий",
  "try_now": "Попробуйте",
+  "try_recompile_project": "Попробуйте скомпилировать проект заново.",
  "uk": "Украинский",
  "university": "Университет",
+  "unknown": "Неизвестный",
  "unlimited_collabs": "Неограниченно число соавторов",
  "unlimited_projects": "Неограниченное число проектов",
  "unlink": "Отсоединить",
@@ -451,6 +464,8 @@
  "welcome_to_sl": "Добро пожаловать в __appName__",
  "word_count": "Количество слов",
  "year": "год",
+  "you": "Вы",
+  "you_cant_overwrite_it": "Перезаписать нельзя.",
  "you_have_added_x_of_group_size_y": "Вы добавили <0>__addedUsersSize__</0> из <1>__groupSize__</1> доступных участников",
  "your_plan": "Ваш тариф",
  "your_projects": "Созданные мной",
--- a/services/web/modules/template-gallery/app/src/CleanHtml.mjs
+++ b/services/web/modules/template-gallery/app/src/CleanHtml.mjs
@@ -0,0 +1,22 @@
+import sanitizeHtml from 'sanitize-html'
+
+const sanitizeOptions = {
+  linksOnly: {
+    allowedTags: ["a"],
+    allowedAttributes: { "a": ["href"] }
+  },
+  reachText: {
+    allowedTags: ["h1", "h2", "h3", "h4", "h5", "h6",
+                  "p", "blockquote", "ul", "ol", "li",
+                  "em", "strong", "s", "code", "pre", "hr", "a"],
+    allowedAttributes: { "a": ["href"] }
+  },
+  plainText: {
+    allowedTags: [],
+    allowedAttributes: {},
+  },
+}
+
+export function cleanHtml(text, sanitizeType) {
+  return sanitizeHtml(text, sanitizeOptions[sanitizeType])
+}
--- a/services/web/modules/template-gallery/app/src/TemplateErrors.mjs
+++ b/services/web/modules/template-gallery/app/src/TemplateErrors.mjs
@@ -0,0 +1,13 @@
+import OError from '@overleaf/o-error'
+
+export class TemplateNameConflictError extends OError {
+  constructor(ownerId, message = 'template_with_this_title_exists_and_owned_by_x') {
+    super(message, { ownerId })
+  }
+}
+
+export class RecompileRequiredError extends OError {
+  constructor(message = 'Recompile required') {
+    super(message, { status: 400 })
+  }
+}
--- a/services/web/modules/template-gallery/app/src/TemplateGalleryController.mjs
+++ b/services/web/modules/template-gallery/app/src/TemplateGalleryController.mjs
@@ -0,0 +1,162 @@
+import logger from '@overleaf/logger'
+import ErrorController from '../../../../app/src/Features/Errors/ErrorController.js'
+import Errors from '../../../../app/src/Features/Errors/Errors.js'
+import SessionManager from '../../../../app/src/Features/Authentication/SessionManager.js'
+import TemplateGalleryManager from'./TemplateGalleryManager.mjs'
+import { getUserName } from './TemplateGalleryHelper.mjs'
+import { TemplateNameConflictError, RecompileRequiredError } from './TemplateErrors.mjs'
+import Settings from '@overleaf/settings'
+
+async function createTemplateFromProject(req, res, next) {
+  const t = req.i18n.translate
+  try {
+    const userId = SessionManager.getLoggedInUserId(req.session)
+    const result = await TemplateGalleryManager.createTemplateFromProject({
+      projectId: req.params.Project_id,
+      userId,
+      templateSource: req.body,
+    })
+    if (result.conflict) {
+      const ownerName = (result.templateOwnerName === 'you') ? t('you') : result.templateOwnerName
+      const message = `${t('template_with_this_title_exists_and_owned_by_x', { x: ownerName })} `
+                    + t(result.canOverride ? 'do_you_want_to_overwrite_it' : 'you_cant_overwrite_it')
+      return res.status(409).json({ canOverride: result.canOverride, message })
+    }
+    return res.status(200).json({ template_id: result.templateId })
+  } catch (error) {
+    if (error instanceof Errors.InvalidNameError) {
+      return res.status(error.info?.status || 400).json({ message: error.message })
+    }
+
+    const mainMessage = t('failed_to_publish_as_a_template')
+    if (error instanceof RecompileRequiredError) {
+      return res.status(error.info?.status || 400).json({
+        message: `${mainMessage} ${t('try_recompile_project')}`
+      })
+    }
+    return res.status(400).json({ message: mainMessage })
+  }
+}
+
+async function editTemplate(req, res, next) {
+  const t = req.i18n.translate
+  try {
+    const result = await TemplateGalleryManager.editTemplate({
+      templateId: req.params.template_id,
+      updates: req.body
+    })
+    res.status(200).json(result)
+  } catch (error) {
+    if (error instanceof TemplateNameConflictError) {
+      const ownerId = error.info?.ownerId
+      const userId = SessionManager.getLoggedInUserId(req.session)
+      const ownerName = (ownerId === userId)
+        ? t('you')
+        : await getUserName(ownerId) || t('unknown')
+      const message = t(error.message, { x: ownerName })
+      return res.status(409).json({ message })
+    }
+    if (error instanceof Errors.InvalidNameError) {
+      return res.status(error.info?.status || 400).json({ message: error.message })
+    }
+    logger.error({ error }, 'Failure saving template')
+    return res.status(500).json({ message: t('something_went_wrong_server') })
+  }
+}
+
+async function deleteTemplate(req, res, next) {
+  const t = req.i18n.translate
+  try {
+    await TemplateGalleryManager.deleteTemplate({
+      templateId: req.params.template_id,
+      version: req.body.version
+    })
+    res.sendStatus(200)
+  } catch (error) {
+    logger.error({ error }, 'Failure deleting template')
+    return res.status(500).json({ message: t('something_went_wrong_server') })
+  }
+}
+
+async function getTemplatePreview(req, res, next) {
+  try {
+    const templateId = req.params.template_id
+    const { version, style } = req.query
+
+    const { stream, contentType } = await TemplateGalleryManager.fetchTemplatePreview({ templateId, version, style })
+
+    res.setHeader('Content-Type', contentType)
+    stream.pipe(res)
+  } catch (error) {
+    if (error.info?.status == 404) {
+      return ErrorController.notFound(req, res, next)
+    }
+    return res.status(error.info?.status || 400).json(error.info)
+  }
+}
+
+async function templatesCategoryPage(req, res, next) {
+  const t = req.i18n.translate
+  try {
+    let { category } = req.params
+    const result = await TemplateGalleryManager.getTemplatesPageData(category)
+
+    let title
+    if (result.categoryName) {
+      title = t('latex_templates') + ' — ' + result.categoryName
+    } else {
+      category = null
+      title = t('templates_page_title')
+    }
+    res.render('template_gallery/template-gallery', {
+      title,
+      category,
+    })
+  } catch (error) {
+    next(error)
+  }
+}
+
+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', {
+      title: `${t('template')}: ${template.name}`,
+      template: JSON.stringify(template),
+      languages: Settings.languages,
+    })
+  } catch (error) {
+    return ErrorController.notFound(req, res, next)
+  }
+}
+
+async function getTemplateJSON(req, res, next) {
+  try {
+    const { key, val } = req.query
+    const template = await TemplateGalleryManager.getTemplate(key, val)
+    res.json(template)
+  } catch (error) {
+    next(error)
+  }
+}
+
+async function getCategoryTemplatesJSON(req, res, next) {
+  try {
+    const result = await TemplateGalleryManager.getCategoryTemplates(req.query)
+    res.json(result)
+  } catch (error) {
+    next(error)
+  }
+}
+
+export default {
+  createTemplateFromProject,
+  editTemplate,
+  deleteTemplate,
+  getTemplatePreview,
+  templatesCategoryPage,
+  templateDetailsPage,
+  getTemplateJSON,
+  getCategoryTemplatesJSON,
+}
--- a/services/web/modules/template-gallery/app/src/TemplateGalleryHelper.mjs
+++ b/services/web/modules/template-gallery/app/src/TemplateGalleryHelper.mjs
@@ -0,0 +1,226 @@
+import MarkdownIt from 'markdown-it'
+import request from 'request'
+import logger from '@overleaf/logger'
+import settings from '@overleaf/settings'
+import Errors from '../../../../app/src/Features/Errors/Errors.js'
+import ProjectGetter from '../../../../app/src/Features/Project/ProjectGetter.js'
+import ProjectLocator from '../../../../app/src/Features/Project/ProjectLocator.js'
+import ProjectZipStreamManager from '../../../../app/src/Features/Downloads/ProjectZipStreamManager.mjs'
+import DocumentUpdaterHandler from '../../../../app/src/Features/DocumentUpdater/DocumentUpdaterHandler.js'
+import ClsiManager from '../../../../app/src/Features/Compile/ClsiManager.js'
+import CompileManager from '../../../../app/src/Features/Compile/CompileManager.js'
+import UserGetter from '../../../../app/src/Features/User/UserGetter.js'
+import { fetchStreamWithResponse } from '@overleaf/fetch-utils'
+import { Template } from './models/Template.js'
+import { RecompileRequiredError } from './TemplateErrors.mjs'
+import { cleanHtml }  from './CleanHtml.mjs'
+
+const TIMEOUT = 30000
+
+const MAX_PROJECT_NAME_LENGTH = 150
+const MAX_FORM_INPUT_LENGTH = 512
+const MAX_TEMPLATE_DESCRIPTION_LENGTH = 4096
+
+const markdownIt = new MarkdownIt({ html: false, linkify: true })
+
+function _createZipStreamForProjectAsync(projectId) {
+  return new Promise((resolve, reject) => {
+    ProjectZipStreamManager.createZipStreamForProject(projectId, (err, archive) => {
+      if (err) {
+        return reject(err)
+      }
+      archive.on('error', (err) => reject(err))
+      resolve(archive)
+    })
+  })
+}
+
+export function validateTemplateInput({ name, descriptionMD, authorMD, license }) {
+  if (name?.length > MAX_PROJECT_NAME_LENGTH) {
+    throw new Errors.InvalidNameError(`Template title exceeds the maximum length of ${MAX_PROJECT_NAME_LENGTH} characters.`)
+  }
+  if (descriptionMD?.length > MAX_TEMPLATE_DESCRIPTION_LENGTH) {
+    throw new Errors.InvalidNameError(`Template description exceeds the maximum length of ${MAX_TEMPLATE_DESCRIPTION_LENGTH} characters.`)
+  }
+  if (authorMD?.length > MAX_FORM_INPUT_LENGTH) {
+    throw new Errors.InvalidNameError('Author name is too long.')
+  }
+  if (license?.length > MAX_FORM_INPUT_LENGTH) {
+    throw new Errors.InvalidNameError('License name is too long.')
+  }
+}
+
+export async function canUserOverrideTemplate(template, userId) {
+  let templateOwnerId = template.owner
+  let templateOwnerName = 'you'
+  let userIsOwner = true
+  let userIsAdmin
+  if (templateOwnerId != userId) {
+    userIsOwner = false
+    try {
+      userIsAdmin = (await UserGetter.promises.getUser(userId, { isAdmin: 1 })).isAdmin
+    } catch {
+      logger.error({ error, userId }, 'Logged in user does not exist, strange...')
+      userIsAdmin = false
+    }
+    templateOwnerName = await getUserName(templateOwnerId) || 'unknown'
+  }
+  const canOverride = userIsOwner || userIsAdmin
+  return { canOverride, templateOwnerName }
+}
+
+export async function getUserName(userId) {
+  try {
+    const user = await UserGetter.promises.getUser(userId, {
+      first_name: 1,
+      last_name: 1,
+    })
+    return ((user?.first_name || "") + " " + (user?.last_name || "")).trim()
+  } catch (error) {
+    return 'unknown'
+  }
+}
+
+export async function generateTemplateData(projectId, {
+  descriptionMD,
+  authorMD,
+  category,
+  license,
+  name,
+}) {
+  try {
+    await DocumentUpdaterHandler.promises.flushProjectToMongo(projectId)
+
+    const project = await ProjectGetter.promises.getProject(projectId, {
+      imageName: true,
+      compiler: true,
+      spellCheckLanguage: true,
+      rootDoc_id: true,
+      rootFolder: true,
+    })
+
+    const { path } = await ProjectLocator.promises.findRootDoc({ project })
+    const mainFile = path.fileSystem.replace(/^\/+/, '')
+    const template = {
+      name,
+      category,
+      authorMD,
+      descriptionMD,
+      license,
+      mainFile,
+      compiler: project.compiler,
+      imageName: project.imageName,
+      language: project.spellCheckLanguage,
+      lastUpdated: new Date(),
+    }
+
+    await renderTemplateHtmlFields(template)
+    return template
+  } catch (error) {
+    logger.error({ error, projectId }, 'Failed to retrieve project data')
+    throw error
+  }
+}
+
+export async function uploadTemplateAssets(projectId, userId, build, template) {
+  let zipStream, pdfStream
+  try {
+    [zipStream, pdfStream] = await Promise.all([
+      _createZipStreamForProjectAsync(projectId),
+      CompileManager.promises
+        .getProjectCompileLimits(projectId)
+        .then((limits) =>
+          ClsiManager.promises.getOutputFileStream(projectId, userId, limits, undefined, build, 'output.pdf')
+        )
+    ])
+  } catch (error) {
+    logger.error({ error, projectId }, 'No output.pdf?')
+    throw new RecompileRequiredError()
+  }
+  try {
+    const templateUrl = `${settings.apis.filestore.url}/template/${template._id}/v/${template.version}`
+    const zipUrl = `${templateUrl}/zip`
+    const pdfUrl = `${templateUrl}/pdf`
+    const [zipReq, pdfReq] = await Promise.all([
+      fetchStreamWithResponse(zipUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/octet-stream',
+        },
+        body: zipStream,
+        signal: AbortSignal.timeout(TIMEOUT),
+      }),
+      fetchStreamWithResponse(pdfUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/pdf',
+        },
+        body: pdfStream,
+        signal: AbortSignal.timeout(TIMEOUT),
+      }),
+    ])
+    const uploadErrors = []
+    if (zipReq?.response.status !== 200) {
+      uploadErrors.push({ file: 'zip', uri: zipUrl, statusCode: zipReq.response.status })
+    }
+    if (pdfReq?.response.status !== 200) {
+      uploadErrors.push({ file: 'pdf', uri: pdfUrl, statusCode: pdfReq.response.status })
+    }
+    if (uploadErrors.length > 0) {
+      logger.error({ uploadErrors }, 'Template upload failed')
+      throw new RecompileRequiredError()
+    }
+  } catch (error) {
+    if (error instanceof RecompileRequiredError) throw error
+    throw error
+  }
+}
+
+export async function deleteTemplateAssets(templateId, version, deleteFromDb) {
+  if (deleteFromDb) {
+    try {
+      await Template.deleteOne({ _id: templateId }).exec()
+    } catch (error) {
+      logger.error({ err, templateId }, 'Failed to delete template from MongoDB')
+      throw error
+    }
+  }
+
+  // kick off file deletions, but don't wait
+  const baseUrl = settings.apis.filestore.url
+  const urlTemplate = `${baseUrl}/template/${templateId}/v/${version}/zip`
+  const urlImages = `${baseUrl}/template/${templateId}/v/${version}/pdf`
+
+  const optsTemplate = {
+    method: 'DELETE',
+    uri: urlTemplate,
+    timeout: TIMEOUT,
+  }
+
+  const optsImages = {
+    method: 'DELETE',
+    uri: urlImages,
+    timeout: TIMEOUT,
+  }
+
+  request(optsTemplate, (err, response) => {
+    if (err)
+      logger.warn({ err, templateId }, 'Failed to delete template zip from filestore')
+  })
+
+  request(optsImages, (err, response) => {
+    if (err)
+      logger.warn({ err, templateId }, 'Failed to delete images from filestore')
+  })
+}
+
+export function renderTemplateHtmlFields(updates) {
+  if (updates.descriptionMD !== undefined) {
+    const descriptionRawHTML = markdownIt.render(updates.descriptionMD)
+    updates.description = cleanHtml(descriptionRawHTML, "reachText")
+  }
+  if (updates.authorMD !== undefined) {
+    const authorRawHTML = markdownIt.render(updates.authorMD)
+    updates.author = cleanHtml(authorRawHTML, "linksOnly")
+  }
+}
--- a/services/web/modules/template-gallery/app/src/TemplateGalleryManager.mjs
+++ b/services/web/modules/template-gallery/app/src/TemplateGalleryManager.mjs
@@ -0,0 +1,214 @@
+import _ from 'lodash'
+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 {
+  validateTemplateInput,
+  renderTemplateHtmlFields,
+  uploadTemplateAssets,
+  deleteTemplateAssets,
+  canUserOverrideTemplate,
+  generateTemplateData
+} from './TemplateGalleryHelper.mjs'
+import { cleanHtml }  from './CleanHtml.mjs'
+import { TemplateNameConflictError } from './TemplateErrors.mjs'
+import { fetchStreamWithResponse } from '@overleaf/fetch-utils'
+const TIMEOUT = 30000
+
+async function editTemplate({ templateId, updates }) {
+
+  validateTemplateInput(updates)
+
+  const template = await Template.findById(templateId)
+  if (!template) {
+    throw new OError('Current template not found, strange...', { status: 500, templateId })
+  }
+
+  if (updates.name) {
+    const conflictingTemplate = await Template.findOne(
+      { name: updates.name, _id: { $ne: templateId } },
+      { owner: true }
+    ).exec()
+    if (conflictingTemplate) {
+      throw new TemplateNameConflictError(String(conflictingTemplate.owner))
+    }
+  }
+
+  await renderTemplateHtmlFields(updates)
+  updates.lastUpdated = new Date()
+  Object.assign(template, updates)
+
+  await template.save()
+
+  return updates
+}
+
+async function deleteTemplate({ templateId, version }) {
+  await deleteTemplateAssets(templateId, version, true)
+}
+
+async function createTemplateFromProject({ projectId, userId, templateSource }) {
+  validateTemplateInput(templateSource)
+  let template = await Template.findOne({ name: templateSource.name }).exec()
+
+  if (template && !templateSource.override) {
+    const { canOverride, templateOwnerName } = await canUserOverrideTemplate(template, userId)
+
+    return {
+      conflict: true,
+      canOverride,
+      templateOwnerName
+    }
+  }
+
+  const templateData = await generateTemplateData(projectId, templateSource)
+
+  let previousVersionExists
+  if (!template) {
+    template = new Template(templateData)
+    template.owner = userId
+    previousVersionExists = false
+  } else {
+    Object.assign(template, templateData, {
+      version: template.version + 1,
+    })
+    previousVersionExists = true
+  }
+
+  await uploadTemplateAssets(projectId, userId, templateSource.build, template)
+  await template.save()
+
+  if (previousVersionExists) {
+    deleteTemplateAssets(template._id, template.version - 1, false)
+  }
+  return {
+    conflict: false,
+    templateId: template._id,
+  }
+}
+
+async function fetchTemplatePreview({ templateId, version, style }) {
+  if (!templateId || !version) {
+    throw new OError('Template ID and version are required', { status: 404 })
+  }
+  const styleParam = style ? `style=${style}` : ''
+  const isImage = (style === 'preview' || style === 'thumbnail')
+
+  if (style && !isImage) {
+    throw new OError('Wrong style', { status: 404, style })
+  }
+
+  const pdfUrl = `${settings.apis.filestore.url}/template/${templateId}/v/${version}/pdf?${styleParam}`
+  const { response } = await fetchStreamWithResponse(pdfUrl, {
+    method: 'GET',
+    signal: AbortSignal.timeout(TIMEOUT),
+  })
+
+  if (!response.ok) {
+    throw new OError(`Failed to fetch file: ${response.statusText}`, { status: 400, templateId, version, styleParam })
+  }
+
+  return {
+    stream: Readable.from(response.body),
+    contentType: isImage ? 'application/octet-stream' : 'application/pdf'
+  }
+}
+
+async function getTemplatesPageData(category) {
+  const categoryName = settings.templateLinks.find(item => item.url.endsWith(`/${category}`))?.name
+  const templateLinks = categoryName ? undefined : settings.templateLinks.filter(link => link.url !== '/templates/all')
+  return {
+    categoryName,
+    templateLinks
+  }
+}
+
+async function getTemplate(key, val) {
+  if (!key || !val) {
+    logger.warn('No key or val provided to getTemplate')
+    return null
+  }
+
+  const query = { [key]: val }
+  const template = await Template.findOne(query).exec()
+  if (!template) return null
+
+  return _formatTemplateForPage(template)
+}
+
+async function getCategoryTemplates(reqQuery) {
+  const {
+    category,
+    by = 'lastUpdated',
+    order = 'desc',
+  } = reqQuery || {}
+
+  const query = (category === 'all') ? {} : { category : '/templates/' + category }
+  const projection = { _id : 1, version : 1, name : 1, author : 1, description : 1, lastUpdated : 1 }
+  const allTemplates = await Template.find(query, projection).exec()
+  const formattedTemplates = allTemplates.map(_formatTemplateForList)
+  const sortedTemplates = _sortTemplates(formattedTemplates, { by, order })
+
+  return {
+    totalSize: sortedTemplates.length,
+    templates: sortedTemplates,
+  }
+}
+
+function _sortTemplates(templates, sort) {
+  if (
+    (sort.by && !['lastUpdated', 'name'].includes(sort.by)) ||
+    (sort.order && !['asc', 'desc'].includes(sort.order))
+  ) {
+    throw new OError('Invalid sorting criteria', { status: 400, sort })
+  }
+  const sortedTemplates = _.orderBy(
+    templates,
+    [sort.by || 'lastUpdated'],
+    [sort.order || 'desc']
+  )
+  return sortedTemplates
+}
+
+function _formatTemplateForList(template) {
+  return {
+    id: String(template._id),
+    version: String(template.version),
+    name: template.name,
+    author: cleanHtml(template.author, "plainText"),
+    description: cleanHtml(template.description, "plainText"),
+    lastUpdated: template.lastUpdated,
+  }
+}
+
+function _formatTemplateForPage(template) {
+  return {
+    id: template._id.toString(),
+    version: template.version.toString(),
+    category: template.category,
+    name: template.name,
+    author: cleanHtml(template.author, "linksOnly"),
+    authorMD: template.authorMD,
+    description: cleanHtml(template.description, "reachText"),
+    descriptionMD: template.descriptionMD,
+    license: template.license,
+    lastUpdated: template.lastUpdated,
+    owner: template.owner,
+    mainFile: template.mainFile,
+    compiler: template.compiler,
+    imageName: template.imageName,
+    language: template.language,
+  }
+}
+
+export default {
+  createTemplateFromProject,
+  editTemplate,
+  deleteTemplate,
+  getTemplate,
+  getCategoryTemplates,
+  fetchTemplatePreview,
+  getTemplatesPageData,
+}
--- a/services/web/modules/template-gallery/app/src/TemplateGalleryRouter.mjs
+++ b/services/web/modules/template-gallery/app/src/TemplateGalleryRouter.mjs
@@ -0,0 +1,77 @@
+import logger from '@overleaf/logger'
+
+import AuthenticationController from '../../../../app/src/Features/Authentication/AuthenticationController.js'
+import RateLimiterMiddleware from '../../../../app/src/Features/Security/RateLimiterMiddleware.js'
+import { RateLimiter } from '../../../../app/src/infrastructure/RateLimiter.js'
+import TemplateGalleryController from './TemplateGalleryController.mjs'
+
+const rateLimiter = new RateLimiter('create-project-from-template', {
+  points: 20,
+  duration: 60,
+})
+const rateLimiterThumbnails = new RateLimiter('gallery-thumbnails', {
+  points: 360,
+  duration: 60,
+})
+
+export default {
+  rateLimiter,
+  apply(webRouter) {
+    logger.debug({}, 'Init templates router')
+
+    webRouter.post(
+      '/template/new/:Project_id',
+      AuthenticationController.requireLogin(),
+      RateLimiterMiddleware.rateLimit(rateLimiter),
+      TemplateGalleryController.createTemplateFromProject
+    )
+
+    webRouter.get(
+      '/template/:template_id',
+      RateLimiterMiddleware.rateLimit(rateLimiter),
+      TemplateGalleryController.templateDetailsPage
+    )
+
+    webRouter.post(
+      '/template/:template_id/edit',
+      AuthenticationController.requireLogin(),
+      RateLimiterMiddleware.rateLimit(rateLimiter),
+      TemplateGalleryController.editTemplate
+    )
+
+    webRouter.delete(
+      '/template/:template_id/delete',
+      AuthenticationController.requireLogin(),
+      RateLimiterMiddleware.rateLimit(rateLimiter),
+      TemplateGalleryController.deleteTemplate
+    )
+
+    webRouter.get(
+      '/templates/:category?',
+      RateLimiterMiddleware.rateLimit(rateLimiter),
+      TemplateGalleryController.templatesCategoryPage
+    )
+
+    webRouter.get(
+      '/api/template',
+      RateLimiterMiddleware.rateLimit(rateLimiter),
+      TemplateGalleryController.getTemplateJSON
+    )
+
+    webRouter.get(
+      '/api/templates',
+      RateLimiterMiddleware.rateLimit(rateLimiter),
+      TemplateGalleryController.getCategoryTemplatesJSON
+    )
+
+    webRouter.get(
+      '/template/:template_id/preview',
+      (req, res, next) => {
+        req.query.style === 'thumbnail'
+          ? RateLimiterMiddleware.rateLimit(rateLimiterThumbnails)(req, res, next)
+          : RateLimiterMiddleware.rateLimit(rateLimiter)(req, res, next)
+      },
+      TemplateGalleryController.getTemplatePreview
+    )
+  },
+}
--- a/services/web/modules/template-gallery/app/src/models/Template.js
+++ b/services/web/modules/template-gallery/app/src/models/Template.js
@@ -0,0 +1,33 @@
+const mongoose = require('../../../../../app/src/infrastructure/Mongoose')
+
+const { Schema } = mongoose
+const { ObjectId } = Schema
+
+const TemplateSchema = new Schema(
+  {
+    name: { type: String, required: true },
+    category: { type: String, required: true },
+    description: { type: String },
+    descriptionMD: { type: String },
+    author: { type: String },
+    authorMD: { type: String },
+    license: { type: String, required: true },
+    mainFile: { type: String, required: true },
+    compiler: { type: String, required: true },
+    imageName: { type: String },
+    language: { type: String, required: true },
+    version: { type: Number, default: 1, required: true },
+    owner: { type: ObjectId, ref: 'User' },
+    lastUpdated: {
+      type: Date,
+      default() {
+        return new Date()
+      },
+    required: true
+    },
+  },
+  { minimize: false }
+)
+
+exports.Template = mongoose.model('Template', TemplateSchema)
+exports.TemplateSchema = TemplateSchema
--- a/services/web/modules/template-gallery/index.mjs
+++ b/services/web/modules/template-gallery/index.mjs
@@ -0,0 +1,33 @@
+import Settings from '@overleaf/settings'
+import TemplateGalleryRouter from './app/src/TemplateGalleryRouter.mjs'
+const TemplateGalleryModule = {
+  router: TemplateGalleryRouter,
+}
+
+function boolFromEnv(env) {
+  if (env === undefined || env === null) return undefined
+  if (typeof env === "string") {
+    const envLower = env.toLowerCase()
+    if (envLower === 'true') return true
+    if (envLower === 'false') return false
+  }
+  throw new Error("Invalid value for boolean envirionment variable")
+}
+
+Settings.templates = {
+  nonAdminCanManage: boolFromEnv(process.env.OVERLEAF_NON_ADMIN_CAN_MANAGE_TEMPLATES)
+}
+
+Settings.templateLinks = (`${process.env.OVERLEAF_TEMPLATE_KEYS} all`).split(/\s+/).map(key => {
+  const envKeyBase = key.toUpperCase().replace(/-/g, "_")
+  const name = process.env[`TEMPLATE_${envKeyBase}_NAME`]
+  const description = process.env[`TEMPLATE_${envKeyBase}_DESCRIPTION`]
+
+  return {
+    name: name || key,
+    url: `/templates/${key}`,
+    description: description || "Templates category"
+  }
+})
+
+export default TemplateGalleryModule
--- a/services/web/types/template.ts
+++ b/services/web/types/template.ts
@@ -0,0 +1,16 @@
+export type Template = {
+  id: string
+  version: string
+  name: string
+  lastUpdated: string
+  author: string
+  authorMD: string
+  description: string
+  descriptionMD: string
+  license: string
+  category: string
+  compiler?: string
+  language: string
+  owner: string
+}
+