diff --git a/README.md b/README.md
index 20db06c..8affff4 100644
--- a/README.md
+++ b/README.md
@@ -50,6 +50,222 @@ This app has the following default slide separators:
 - Horizontal separator: `---` (`← →`)
 - Vertical separator: `--` (`↓ ↑`)
 
+## Using Templates
+
+To use the templates in the presentation viewer, use the front matter to provide default metadata followed by slide
+contents.
+
+The front matter is used to define the default values for the presentation and will be applied to every slides. The
+default metadata can be defined as below:
+
+```markdown
+---
+slide: <default-slide-type>
+presenter: <name-of-the-presenter>
+logo: <path-to-logo>
+color: <font-color-for-slide-title>
+footer: <footer-content>
+aboutUs:
+    - title: <about-us-title1>
+      text: <text-for-title1>
+    - title: <about-us-title2>
+      text: <text-for-title2>
+    - title: <about-us-title3>
+      text: <text-for-title3>
+---
+```
+
+These are the supported metadata required for the presentation template.
+
+| Default Metadata | Description                                                                                                                                                |
+|------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `slide`          | Default slide for presentation. Most used slide template can be given in the default metadata.                                                             |
+| `presenter`      | Name of the presenter.                                                                                                                                     |
+| `logo`           | Logo appears on the top right corner of the slide. The logo path should be relative to the markdown file.                                                  |
+| `color`          | Font color of the slide title.                                                                                                                             |
+| `footer`         | Content to be shown in the footer of the slide.                                                                                                            |
+| `aboutUs`        | Column wise content to be shown in the about-us slide. Use this metadata only if about-us slide is used for the presentation. More [here](#slide-about-us) |
+| `aboutUs:title`  | Title for each column in about-us slide.                                                                                                                   |
+| `aboutUs:text`   | Text under each title for column in about-us slide.                                                                                                        |
+
+Following the front matter, create slides as described in [Creating Presentation](#creating-presentation)
+
+Besides default metadata, you can also provide inline metadata for each slide. This will be useful when you want to
+override the default metadata for a specific slide and this will be applied to that slide only. The inline metadata can
+be defined by adding metadata directly on the slide title as below:
+
+```markdown
+# Title of the slide ::metadata_key_1:metadata_value_1 ::metadata_key_2:metadata_value_2
+```
+
+Example:
+```markdown
+# Title of slide ::slide:title-content-image ::logo:logo.png
+```
+
+For this slide, the `slide` template will be set to `title-content-image`, and the `logo` will be set to `logo.png`.
+
+### Slide Templates
+
+The slide template should be provided in the default metadata. The slide type set in the default metadata will be used as the default. The mostly used slide template can be set as default. When you set a slide template in the default metadata, you don’t need to specify the slide type again in the inline metadata for slides that are already defined in the default metadata.
+
+| Slide Template        | Desctiption                                                                       | Usage                         |
+|-----------------------|-----------------------------------------------------------------------------------|-------------------------------|
+| `cover`               | This slide template can be used for cover slide                                   | `::slide:cover`               |
+| `title-content`       | A slide with a title and some content (the content can also be an image)          | `::slide:title-content`       |
+| `title-content-image` | A slide with a title, and content on the left side and an image on the right side | `::slide:title-content-image` |
+| `about-us`            | The slide with about-us info (e.g., Values, mission, Vision)                      | `::slide:about-us`            |
+
+#### Slide "Cover"
+
+Code:
+
+```markdown
+# TITLE ::slide:cover
+```
+
+Preview:
+
+```text
+┌────────────────────────────────────────────────────┐
+│                                                    │
+│                                                    │
+│                      LOGO                          │
+│                      TITLE                         │
+│                   PRESENTER NAME                   │
+│                                                    │
+│                                                    │
+├────────────────────────────────────────────────────┤
+│                                              LOGO  │
+└────────────────────────────────────────────────────┘
+```
+
+#### Slide "title-content"
+
+Code:
+
+```markdown
+# TITLE ::slide:title-content
+
+CONTENT
+```
+
+Preview:
+
+```text
+┌────────────────────────────────────────────────────┐
+│ TITLE                                        LOGO  │
+├────────────────────────────────────────────────────┤
+│                                                    │
+│                                                    │
+│ CONTENT                                            │
+│                                                    │
+│                                                    │
+├────────────────────────────────────────────────────┤
+│  FOOTER                                     PAGENR │
+└────────────────────────────────────────────────────┘
+```
+
+Image can also be included in the content of the slide.
+
+Code:
+
+```markdown
+# TITLE ::slide:title-content
+
+CONTENT
+
+![This is image description](./image.png)
+```
+
+Preview:
+
+```text
+┌────────────────────────────────────────────────────┐
+│ TITLE                                        LOGO  │
+├────────────────────────────────────────────────────┤
+│ CONTENT                                            │
+├────────────────────────────────────────────────────┤
+│                                                    │
+│                       IMAGE                        │
+│                                                    │
+├────────────────────────────────────────────────────┤
+│  FOOTER                                    PAGENR  │
+└────────────────────────────────────────────────────┘
+```
+
+#### Slide "title-content-image"
+
+Code:
+
+```markdown
+# TITLE ::slide:title-content-image
+
+CONTENT
+
+![This is image description](image.png)
+```
+
+Preview:
+
+```text
+┌────────────────────────────────────────────────────┐
+│ TITLE                                         LOGO │
+├──────────────────────────┬─────────────────────────┤
+│                          │                         │
+│                          │                         │
+│  CONTENT                 │          IMAGE          │
+│                          │                         │
+│                          │                         │
+├──────────────────────────┴─────────────────────────┤
+│  FOOTER                                     PAGENR │
+└────────────────────────────────────────────────────┘
+```
+
+#### Slide "about-us"
+
+Code:
+
+```markdown
+# TITLE ::slide:about-us
+
+CONTENT
+```
+
+The `title` and `text` can be provided via default metadata in front matter as:
+
+```markdown
+---
+aboutUs:
+  - title: Title 1
+    text: Some text under title 1
+  - title: Title 2
+    text: Some text under title 2
+  - title: Title 3
+    text: Some text under title 3
+---
+```
+
+Preview:
+
+```text
+┌────────────────────────────────────────────────────┐
+│ TITLE                                         LOGO │
+├────────────────────────────────────────────────────┤
+│                                                    │
+│   ┌────────────────────────────────────────────┐   │
+│   │                CONTENT                     │   │
+│   └────────────────────────────────────────────┘   │
+│   ┌────────┐    │    ┌────────┐   │   ┌────────┐   │
+│   │ TITLE  │    │    │ TITLE  │   │   │ TITLE  │   │
+│   │ TEXT   │    │    │ TEXT   │   │   │ TEXT   │   │
+│   └────────┘    │    └────────┘   │   └────────┘   │
+│                                                    │
+├────────────────────────────────────────────────────┤
+│  FOOTER                                    PAGENR  │
+└────────────────────────────────────────────────────┘
+```
+
 ## Development
 
 > [!IMPORTANT] When switching between OpenCloud and oCIS, make sure to clean the browser cache!
diff --git a/public/templates/about-us-template.html b/public/templates/about-us-template.html
new file mode 100644
index 0000000..7524a3d
--- /dev/null
+++ b/public/templates/about-us-template.html
@@ -0,0 +1,40 @@
+<script type="x-tmpl-mustache">
+<div class="content-container">
+<div class="title">
+<h1>
+
+{{{ title }}}
+
+</h1>
+<div class="logo">
+<img src="{{{ metadata.logo }}}" alt="Logo">
+</div>
+</div>
+
+<div class="content-wrapper">
+<div class="content">
+<div class="about-us-text">
+
+{{{ content }}}
+
+</div>
+<div class="info-section">
+
+{{#metadata.aboutUs}}
+<div class="info-box">
+<h3>{{ title }}</h3>
+<p>{{ text }}</p>
+</div>
+<div class="divider"></div>
+{{/metadata.aboutUs}}
+
+</div>
+
+</div>
+</div>
+</div>
+<footer>
+<div class="footer-content">{{{ metadata.footer }}}</div>
+<div class="custom-slide-number"></div>
+</footer>
+</script>
diff --git a/public/templates/cover-template.html b/public/templates/cover-template.html
new file mode 100644
index 0000000..b040ced
--- /dev/null
+++ b/public/templates/cover-template.html
@@ -0,0 +1,16 @@
+<script type="x-tmpl-mustache">
+<div class="content-container">
+<div class="logo">
+<img src="{{{ metadata.logo }}}" alt="Logo">
+</div>
+
+<div class="content">
+<h1>{{{ title }}}</h1>
+
+<p>
+By: {{{ metadata.presenter }}}
+</p>
+
+</div>
+</div>
+</script>
diff --git a/public/templates/title-content-image-template.html b/public/templates/title-content-image-template.html
new file mode 100644
index 0000000..07d97e3
--- /dev/null
+++ b/public/templates/title-content-image-template.html
@@ -0,0 +1,26 @@
+<script type="x-tmpl-mustache">
+<div class="content-container">
+<div class="title">
+<h1>
+
+{{{ title }}}
+
+</h1>
+<div class="logo">
+<img src="{{{ metadata.logo }}}" alt="Logo">
+</div>
+</div>
+
+<div class="content-wrapper">
+<div class="content">
+
+{{{ content }}}
+
+</div>
+</div>
+</div>
+<footer>
+<div class="footer-content">{{{ metadata.footer }}}</div>
+<div class="custom-slide-number"></div>
+</footer>
+</script>
diff --git a/public/templates/title-content-template.html b/public/templates/title-content-template.html
new file mode 100644
index 0000000..07d97e3
--- /dev/null
+++ b/public/templates/title-content-template.html
@@ -0,0 +1,26 @@
+<script type="x-tmpl-mustache">
+<div class="content-container">
+<div class="title">
+<h1>
+
+{{{ title }}}
+
+</h1>
+<div class="logo">
+<img src="{{{ metadata.logo }}}" alt="Logo">
+</div>
+</div>
+
+<div class="content-wrapper">
+<div class="content">
+
+{{{ content }}}
+
+</div>
+</div>
+</div>
+<footer>
+<div class="footer-content">{{{ metadata.footer }}}</div>
+<div class="custom-slide-number"></div>
+</footer>
+</script>
diff --git a/src/App.vue b/src/App.vue
index 38242db..d13fadd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     id="presentation-viewer-main"
+    ref="presentationViewerRef"
     class="presentation-viewer"
     :class="{ 'dark-mode': isDarkMode }"
   >
@@ -39,6 +40,7 @@ import 'reveal.js/dist/reveal.css'
 import 'reveal.js/plugin/highlight/monokai.css'
 import 'reveal.js/dist/theme/white.css'
 import './css/variables.css'
+import './css/templates.css'
 
 import { getMediaMimeTypes } from './helpers/mediaMimeTypes'
 import { id as appId } from '../public/manifest.json'
@@ -58,12 +60,19 @@ const revealContainer = ref<HTMLElement>()
 const mdTextarea = ref<HTMLElement>()
 const mediaUrls = ref<string[]>([])
 const isReadyToShow = ref<boolean>(false)
+const presentationViewerRef = ref<HTMLElement>()
 
 const dataSeparator = '\r?\n---\r?\n'
 const dataSeparatorVertical = '\r?\n--\r?\n'
 const mdImageRegex = /!\[.*\]\((?!(?:http|data))(.*)\)/g
+const headingSlideRegex = /^#+\s.*::slide:\s*([\w-]+)/m
+const logoRegex = /(?<=logo:\s?)([^.]+\.[a-zA-Z]{3,4})/g
 
 let reveal: Reveal.Api
+const awesoMd = RevealAwesoMD()
+const baseUrl = `${window.location.origin}/assets/apps/${appId}`
+awesoMd.setBaseUrl(baseUrl)
+let loadTemplate = false
 
 const { url } = defineProps({
   url: {
@@ -96,13 +105,19 @@ onMounted(async () => {
           const imageUrl = await updateImageUrls(imgPath)
           line = line.replace(`(${imgPath})`, `(${imageUrl})`)
         }
+        const logoMatches = line.matchAll(logoRegex)
+        for (const logoMatch of logoMatches) {
+          const logoPath = logoMatch[1].trim()
+          const logoUrl = await updateImageUrls(logoPath)
+          line = line.replace(`${logoPath}`, `${logoUrl}`)
+        }
         parsedData.push(line)
       }
       unref(mdTextarea).textContent = parsedData.join('\n')
     })
 
   reveal = new Reveal(unref(revealContainer), {
-    plugins: [RevealAwesoMD, RevealHighlight, RevealMermaid]
+    plugins: [awesoMd, RevealHighlight, RevealMermaid]
   })
 
   await reveal.initialize({
@@ -113,12 +128,30 @@ onMounted(async () => {
     controlsLayout: 'edges'
   })
 
+  if (reveal.isReady()) {
+    applyTemplateIfNeeded()
+    addCustomSlideNumber()
+    updateImageStructure()
+    fitContent()
+    adjustFontSize()
+  }
+
+  reveal.addEventListener('slidechanged', function () {
+    fitContent()
+    adjustFontSize()
+  })
+
   isReadyToShow.value = true
 })
 onBeforeUnmount(() => {
+  presentationViewerRef.value.classList.remove('md-template')
+  loadTemplate = false
   unref(mediaUrls).forEach((url) => {
     revokeUrl(url)
   })
+  if (reveal) {
+    reveal.destroy()
+  }
 })
 
 // COMPUTED
@@ -207,6 +240,172 @@ function dirname(path: string) {
 function basename(path: string) {
   return path.split('/').reverse()[0]
 }
+
+// TEMPLATE RELATED
+function addCustomSlideNumber() {
+  const allSlides = reveal.getSlides()
+  for (const [slideNumber, slide] of Array.from(allSlides).entries()) {
+    const customSlideNumber = slide.querySelector('.custom-slide-number')
+    if (!customSlideNumber) {
+      continue
+    }
+    customSlideNumber.textContent = `${slideNumber + 1}`
+  }
+}
+function updateImageStructure() {
+  if (!slideContainer.value) return
+  const pTags = slideContainer.value.querySelectorAll('section p > img')
+  pTags.forEach((img) => {
+    const pTag = img.parentNode
+    const divContainer = document.createElement('div')
+    divContainer.classList.add('image-container')
+    const divWrapper = document.createElement('div')
+    divWrapper.classList.add('image-wrapper')
+    divWrapper.appendChild(img)
+    divContainer.appendChild(divWrapper)
+    pTag.parentNode?.replaceChild(divContainer, pTag)
+  })
+}
+function adjustFontSize() {
+  const currentSlide = reveal.getCurrentSlide()
+
+  function getTotalHeightOfChildren(container) {
+    let totalHeight = 0
+    for (const child of container.children) {
+      if (currentSlide.classList.contains('title-content-image')) {
+        if (child.className !== 'image-container') {
+          totalHeight += getHeightWithMargin(child)
+        }
+      } else {
+        totalHeight += getHeightWithMargin(child)
+      }
+    }
+    return totalHeight
+  }
+
+  function getHeightWithMargin(element) {
+    const style = getComputedStyle(element)
+    const marginTop = parseFloat(style.marginTop)
+    const marginBottom = parseFloat(style.marginBottom)
+    const paddingTop = parseFloat(style.paddingTop)
+    const paddingBottom = parseFloat(style.paddingBottom)
+    return element.offsetHeight + marginTop + marginBottom + paddingTop + paddingBottom
+  }
+
+  const contentWrapper = currentSlide.querySelector('.content-wrapper') as HTMLElement
+  const content = currentSlide.querySelector('.content') as HTMLElement
+
+  if (!contentWrapper || !content) return
+
+  const contentWrapperHeight = contentWrapper.offsetHeight
+  let totalHeight = getTotalHeightOfChildren(content)
+
+  // set minimum font size from where the image starts to get reduced as well
+  // this is to prevent the font size to get too small and becomes hard to read
+  const fontSizeToStartReducingImage = 12
+  let fontSize = parseFloat(getComputedStyle(content).fontSize)
+
+  while (totalHeight > contentWrapperHeight) {
+    const scaleFactor = contentWrapperHeight / totalHeight
+    fontSize = Math.floor(scaleFactor * fontSize)
+
+    const wrapperElements = Array.from(content.children) as HTMLElement[]
+    wrapperElements.forEach((wrapperElement) => {
+      wrapperElement.style.fontSize = `${fontSize}px`
+      const style = getComputedStyle(wrapperElement)
+      const marginTop = Math.floor(parseFloat(style.marginTop) * scaleFactor)
+      const marginBottom = Math.floor(parseFloat(style.marginBottom) * scaleFactor)
+      wrapperElement.style.marginTop = `${marginTop}px`
+      wrapperElement.style.marginBottom = `${marginBottom}px`
+    })
+
+    // reduce image size if font size gets smaller than minimum font size
+    const images = content.querySelectorAll(
+      '.image-container .image-wrapper img'
+    ) as NodeListOf<HTMLImageElement>
+    if (fontSize <= fontSizeToStartReducingImage && images.length > 0) {
+      images.forEach((image) => {
+        const currentWidth = image.offsetWidth
+        const currentHeight = image.offsetHeight
+        image.style.width = `${Math.floor(currentWidth * scaleFactor)}px`
+        image.style.height = `${Math.floor(currentHeight * scaleFactor)}px`
+      })
+    }
+    totalHeight = getTotalHeightOfChildren(content)
+  }
+
+  if (currentSlide.classList.contains('about-us')) {
+    const content = currentSlide.querySelector('.content') as HTMLElement
+    const infoSection = currentSlide.querySelector('.info-section') as HTMLElement
+    const contentWidth = content.offsetWidth
+    let infoSectionWidth = infoSection.scrollWidth
+    while (infoSectionWidth > contentWidth) {
+      const scaleFactor = contentWidth / infoSectionWidth
+      fontSize = Math.floor(scaleFactor * fontSize)
+
+      const infoBoxes = infoSection.querySelectorAll('.info-box') as NodeListOf<HTMLElement>
+      infoBoxes.forEach((box) => {
+        box.style.fontSize = `${fontSize}px`
+        const style = getComputedStyle(box)
+        const padding = parseFloat(style.padding) * scaleFactor
+        box.style.padding = `${Math.max(2, Math.floor(padding))}px`
+        box.style.margin = `${Math.max(2, Math.floor(parseFloat(style.margin) * scaleFactor))}px`
+      })
+      infoSectionWidth = infoSection.scrollWidth
+    }
+  }
+}
+function fitContent() {
+  const images = slideContainer.value.querySelectorAll('img')
+  if (!images) {
+    return
+  }
+  let imagesLoaded = 0
+
+  images.forEach((img) => {
+    if (img.complete) {
+      imagesLoaded++
+    } else {
+      img.addEventListener('load', () => {
+        imagesLoaded++
+        if (imagesLoaded === images.length) {
+          adjustFontSize()
+        }
+      })
+    }
+  })
+
+  if (images.length === 0) {
+    adjustFontSize()
+  }
+}
+function separateFrontmatterAndMarkdown() {
+  const options = {}
+  const rawMarkdown = unref(mdTextarea).value
+  return awesoMd.parseFrontMatter(rawMarkdown, options)
+}
+function setFontColor() {
+  const frontMatter = separateFrontmatterAndMarkdown()[1]
+  const color = frontMatter.metadata.color
+  slideContainer.value.querySelectorAll('.title p, h1').forEach((el) => {
+    el.style.color = color
+  })
+  slideContainer.value.querySelectorAll('.about-us-text').forEach((el) => {
+    el.style.backgroundColor = color
+  })
+  slideContainer.value.querySelectorAll('.info-box h3').forEach((el) => {
+    el.style.color = color
+  })
+}
+function applyTemplateIfNeeded() {
+  const [markdown, frontMatter] = separateFrontmatterAndMarkdown()
+  loadTemplate = !!(frontMatter.metadata?.slide || markdown.match(headingSlideRegex))
+  if (loadTemplate) {
+    presentationViewerRef.value.classList.add('md-template')
+    setFontColor()
+  }
+  return loadTemplate
+}
 </script>
 
 <style lang="scss">
diff --git a/src/css/templates.css b/src/css/templates.css
new file mode 100644
index 0000000..2fb3341
--- /dev/null
+++ b/src/css/templates.css
@@ -0,0 +1,215 @@
+.md-template .slides {
+    font-size: 28px;
+}
+
+.md-template #slideContainer > section {
+    justify-content: flex-start !important;
+    align-items: flex-start;
+}
+
+.md-template #slideContainer h1,
+.md-template #slideContainer h2,
+.md-template #slideContainer h3,
+.md-template #slideContainer h4,
+.md-template #slideContainer h5,
+.md-template #slideContainer h6,
+.md-template #slideContainer p,
+.md-template #slideContainer img,
+.md-template #slideContainer ul,
+.md-template #slideContainer li,
+.md-template #slideContainer ol,
+.md-template #slideContainer div,
+.md-template #slideContainer footer {
+    margin-left: 0;
+    padding: 0;
+    text-transform: none;
+}
+
+
+.md-template .title {
+    top: 0;
+    text-align: left;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.md-template .title h1 {
+    margin: 0;
+}
+
+.md-template .title p {
+    font-size: 42px;
+}
+
+.md-template .logo {
+    height: 80px;
+    float: right;
+    display: flex;
+    align-items: center;
+}
+
+.md-template .logo img {
+    margin: 0;
+}
+
+.md-template footer {
+    width: 100%;
+    height: 10%;
+    font-size: 22px;
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.md-template .content-container {
+    width: 100%;
+    height: 90%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.md-template .content-container ul,
+.md-template .content-container ol {
+    padding-left: 20px !important;
+}
+
+.md-template .slides section:not(.cover) .content-container .content-wrapper {
+    min-height: 0;
+    padding: 10px;
+    width: 100%;
+    height: 95%;
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.md-template .slides section:not(.cover) .content-container .content-wrapper .content {
+    max-width: 100%;
+    max-height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.md-template .title-content-image .content-container .content-wrapper .content {
+    position: relative;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.md-template .title-content-image .content-container .content-wrapper .content > p:has(img){
+    height: 100%;
+    width: 50%;
+    float: right;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}
+
+.md-template .cover .content-container {
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.md-template .cover .content-container .logo {
+    height: 40%;
+    padding: 10px;
+}
+
+.md-template .image-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.md-template .image-container .image-wrapper {
+    max-width: 100%;
+    max-height: 100px;
+    padding: 5px;
+}
+
+.md-template .image-container .image-wrapper > img {
+    height: auto;
+    width: auto;
+    display: block;
+    margin: 0;
+}
+
+.md-template .title-content-image .content-container .content-wrapper .content {
+    position: relative;
+    width: 100%;
+}
+
+
+
+.md-template .title-content-image .content-container .content-wrapper .content > ul,
+.md-template .title-content-image .content-container .content-wrapper .content > ol,
+.md-template .title-content-image .content-container .content-wrapper .content > p,
+.md-template .title-content-image .content-container .content-wrapper .content > table {
+    width: 50%;
+}
+
+.md-template .title-content-image .content-container .content-wrapper .content .image-container {
+    height: 100%;
+    width: 50%;
+    float: right;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}
+
+.md-template .title-content-image .content-container .content-wrapper .content .image-container img {
+    max-width: 100%;
+    height: auto;
+    width: auto;
+    max-height: 80vh;
+}
+
+.md-template .about-us-text {
+    width: 100%;
+    color: #fff;
+    text-align: center;
+    padding: 20px;
+}
+
+.md-template .info-section {
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-start;
+    text-align: center;
+    gap: 30px;
+    margin-top: 30px;
+}
+
+.md-template .info-box {
+    padding: 10px 20px;
+}
+
+.md-template .info-box h3 {
+    margin: 10px 0;
+}
+
+.md-template .divider {
+    width: 2px;
+    background-color: #000000;
+    opacity: 0.5;
+    align-self: stretch;
+}
+
+.md-template .about-us .content-container .content-wrapper {
+    justify-content: center;
+}
+
+.md-template .info-section .divider:last-child {
+    display: none;
+}
diff --git a/tests/unit/App.spec.ts b/tests/unit/App.spec.ts
index 2caad9d..b3233dc 100644
--- a/tests/unit/App.spec.ts
+++ b/tests/unit/App.spec.ts
@@ -1,6 +1,150 @@
 import { shallowMount, flushPromises } from '@vue/test-utils'
 import App from '../../src/App.vue'
 
+// mock XMLHttpRequest for templates loading
+global.XMLHttpRequest = class XMLHttpRequest {
+  private responseText: string
+  private status: number
+
+  open(method, templatePath) {
+    const templateName = templatePath.split('/').pop()
+
+    switch (templateName) {
+      case 'cover-template.html':
+        this.status = 200
+        this.responseText = `<script type="x-tmpl-mustache">
+<div class="content-container">
+<div class="logo">
+<img src="{{{ metadata.logo }}}" alt="Logo">
+</div>
+
+<div class="content">
+<h1>{{{ title }}}</h1>
+
+<p>
+By: {{{ metadata.presenter }}}
+</p>
+
+</div>
+</div>
+</script>
+`
+        break
+      case 'title-content-template.html':
+        this.status = 200
+        this.responseText = `<script type="x-tmpl-mustache">
+<div class="content-container">
+<div class="title">
+<h1>
+
+{{{ title }}}
+
+</h1>
+<div class="logo">
+<img src="{{{ metadata.logo }}}" alt="Logo">
+</div>
+</div>
+
+<div class="content-wrapper">
+<div class="content">
+
+{{{ content }}}
+
+</div>
+</div>
+</div>
+<footer>
+<div class="footer-content">{{{ metadata.footer }}}</div>
+<div class="custom-slide-number"></div>
+</footer>
+</script>
+`
+        break
+      case 'title-content-image-template.html':
+        this.status = 200
+        this.responseText = `<script type="x-tmpl-mustache">
+<div class="content-container">
+<div class="title">
+<h1>
+
+{{{ title }}}
+
+</h1>
+<div class="logo">
+<img src="{{{ metadata.logo }}}" alt="Logo">
+</div>
+</div>
+
+<div class="content-wrapper">
+<div class="content">
+
+{{{ content }}}
+
+</div>
+</div>
+</div>
+<footer>
+<div class="footer-content">{{{ metadata.footer }}}</div>
+<div class="custom-slide-number"></div>
+</footer>
+</script>
+`
+        break
+      case 'about-us-template.html':
+        this.status = 200
+        this.responseText = `<script type="x-tmpl-mustache">
+<div class="content-container">
+<div class="title">
+<h1>
+
+{{{ title }}}
+
+</h1>
+<div class="logo">
+<img src="{{{ metadata.logo }}}" alt="Logo">
+</div>
+</div>
+
+<div class="content-wrapper">
+<div class="content">
+<div class="about-us-text">
+
+{{{ content }}}
+
+</div>
+<div class="info-section">
+
+{{#metadata.aboutUs}}
+<div class="info-box">
+<h3>{{ title }}</h3>
+<p>{{ text }}</p>
+</div>
+<div class="divider"></div>
+{{/metadata.aboutUs}}
+
+</div>
+
+</div>
+</div>
+</div>
+<footer>
+<div class="footer-content">{{{ metadata.footer }}}</div>
+<div class="custom-slide-number"></div>
+</footer>
+</script>
+`
+        break
+      default:
+        this.status = 404
+        return '<p>Template for slide "' + templateName + '" not found.</p>'
+    }
+  }
+
+  send() {
+    return
+  }
+}
+
 // mock modules
 vi.mock('@ownclouders/web-pkg', () => ({
   useAppDefaults: vi.fn().mockImplementation(() => ({
@@ -35,7 +179,7 @@ vi.mock('@ownclouders/web-pkg', () => ({
   AppLoadingSpinner: vi.fn()
 }))
 // global mocks
-global.fetch = vi.fn().mockImplementation(() =>
+const defaultFetchMock = vi.fn().mockImplementation(() =>
   Promise.resolve({
     text: () =>
       Promise.resolve(`### Slide 1
@@ -96,6 +240,7 @@ code block
       )
   })
 )
+global.fetch = defaultFetchMock
 URL.createObjectURL = vi
   .fn()
   .mockImplementation(() => 'blob:nodedata:0295bafb-5976-468a-a263-685a8872cb96')
@@ -113,3 +258,197 @@ function getWrapper() {
     propsData: { url: 'https://localhost:9200/slides.md' }
   })
 }
+
+// eslint-disable-next-line require-await
+describe('Template Features', async () => {
+  beforeEach(() => {
+    global.fetch = defaultFetchMock
+  })
+
+  it('should return template not found error message', async () => {
+    global.fetch = vi.fn().mockImplementation(() => {
+      return Promise.resolve({
+        text: () =>
+          Promise.resolve(`---
+slide: non-existent
+---
+`),
+        blob: () => Promise.resolve(new Blob([], { type: 'text/markdown' }))
+      })
+    })
+    const vm = getWrapper()
+    await flushPromises()
+    expect(vm.html()).toContain('Template for slide "non-existent" not found.')
+  })
+
+  it('should return sanitized error message', async () => {
+    global.fetch = vi.fn().mockImplementation(() => {
+      return Promise.resolve({
+        text: () =>
+          Promise.resolve(`---
+slide: title-content
+presenter: John Doe
+logo: https://external:9200/cat.jpg
+---
+# Reveal Js Templates in Web App Presentation Viewer ::slide:<a href="jankari.tech">jankaritech</a>
+`),
+        blob: () => Promise.resolve(new Blob([], { type: 'text/markdown' }))
+      })
+    })
+    const vm = getWrapper()
+    await flushPromises()
+    expect(vm.html()).toContain(
+      'Template for slide "<a href="jankari.tech">jankaritech</a>" not found.'
+    )
+  })
+
+  it('should return yaml parsing error', async () => {
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    global.fetch = vi.fn().mockImplementation(() => {
+      return Promise.resolve({
+        text: () =>
+          Promise.resolve(`---
+slide: title-content
+logo: [invalid yaml
+---
+`),
+        blob: () => Promise.resolve(new Blob([], { type: 'text/markdown' }))
+      })
+    })
+
+    const vm = getWrapper()
+    await flushPromises()
+    expect(errorSpy).toHaveBeenCalled()
+    expect(vm.html()).toContain(
+      'YAMLException: unexpected end of the stream within a flow collection at line 3, column 1'
+    )
+  })
+
+  it('should render cover template', async () => {
+    global.fetch = vi.fn().mockImplementation(() => {
+      return Promise.resolve({
+        text: () =>
+          Promise.resolve(`---
+slide: title-content
+presenter: John Doe
+logo: https://external:9200/cat.jpg
+---
+# Reveal Js Templates in Web App Presentation Viewer ::slide:cover
+`),
+        blob: () => Promise.resolve(new Blob([], { type: 'text/markdown' }))
+      })
+    })
+    const vm = getWrapper()
+    await flushPromises()
+    await vi.waitFor(
+      () => {
+        expect(vm.classes('md-template')).toBe(true)
+      },
+      { timeout: 1000 }
+    )
+    expect(vm.find('.reveal .slides').html()).toMatchSnapshot()
+  })
+
+  it('should render title content template', async () => {
+    global.fetch = vi.fn().mockImplementation(() => {
+      return Promise.resolve({
+        text: () =>
+          Promise.resolve(`---
+slide: title-content
+presenter: John Doe
+logo: https://external:9200/cat.jpg
+---
+# Title Content Slide
+
+- Introduction to mountain ecosystems
+- Basic concepts of quantum encryption
+- Exploring culinary traditions in Southeast Asia
+- Overview of blockchain consensus mechanisms
+- Setting up a personal productivity system
+- Writing clean, maintainable JavaScript code
+- Understanding modern art movements
+- History of aviation and early flight experiments
+- Managing team dynamics in remote work
+`),
+        blob: () => Promise.resolve(new Blob([], { type: 'text/markdown' }))
+      })
+    })
+    const vm = getWrapper()
+    await flushPromises()
+    await vi.waitFor(
+      () => {
+        expect(vm.classes('md-template')).toBe(true)
+      },
+      { timeout: 1000 }
+    )
+    expect(vm.find('.reveal .slides').html()).toMatchSnapshot()
+  })
+
+  it('should render title content image template', async () => {
+    global.fetch = vi.fn().mockImplementation(() => {
+      return Promise.resolve({
+        text: () =>
+          Promise.resolve(`---
+slide: title-content
+presenter: John Doe
+logo: https://external:9200/cat.jpg
+---
+# Title Content Image Slide ::slide:title-content-image
+
+- Introduction to mountain ecosystems
+- Basic concepts of quantum encryption
+- Exploring culinary traditions in Southeast Asia
+- Overview of blockchain consensus mechanisms
+
+![cat](https://external:9200/cat.jpg)
+`),
+        blob: () => Promise.resolve(new Blob([], { type: 'text/markdown' }))
+      })
+    })
+    const vm = getWrapper()
+    await flushPromises()
+    await vi.waitFor(
+      () => {
+        expect(vm.classes('md-template')).toBe(true)
+      },
+      { timeout: 1000 }
+    )
+    expect(vm.find('.reveal .slides').html()).toMatchSnapshot()
+  })
+
+  it('should render about us template', async () => {
+    global.fetch = vi.fn().mockImplementation(() => {
+      return Promise.resolve({
+        text: () =>
+          Promise.resolve(`---
+slide: title-content
+presenter: John Doe
+logo: https://external:9200/cat.jpg
+aboutUs:
+  - title: WWW
+    text: www.example.com
+  - title: LINKEDIN
+    text: www.linkedin.com/company/example
+  - title: FACEBOOK
+    text: www.facebook.com/example
+  - title: X
+    text: www.x.com/example
+---
+# About Us ::slide:about-us
+
+Some content about us.
+`),
+        blob: () => Promise.resolve(new Blob([], { type: 'text/markdown' }))
+      })
+    })
+    const vm = getWrapper()
+    await flushPromises()
+    await vi.waitFor(
+      () => {
+        expect(vm.classes('md-template')).toBe(true)
+      },
+      { timeout: 1000 }
+    )
+    expect(vm.find('.reveal .slides').html()).toMatchSnapshot()
+  })
+})
diff --git a/tests/unit/__snapshots__/App.spec.ts.snap b/tests/unit/__snapshots__/App.spec.ts.snap
index 1880c02..789fc71 100644
--- a/tests/unit/__snapshots__/App.spec.ts.snap
+++ b/tests/unit/__snapshots__/App.spec.ts.snap
@@ -98,3 +98,158 @@ exports[`App component > render markdown slides 1`] = `
   </div>
 </div>"
 `;
+
+exports[`Template Features > should render about us template 1`] = `
+"<div id="slideContainer" class="slides" style="width: 960px; height: 700px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.2);">
+  <section class="about-us present" data-markdown="" data-markdown-parsed="true" style="top: 350px; display: block;">
+    <div class="content-container">
+      <div class="title">
+        <h1>
+
+          <p>About Us</p>
+        </h1>
+        <div class="logo">
+          <img src="https://external:9200/cat.jpg" alt="Logo">
+        </div>
+      </div>
+
+      <div class="content-wrapper">
+        <div class="content">
+          <div class="about-us-text">
+
+            <p>Some content about us.</p>
+          </div>
+          <div class="info-section">
+
+            <div class="info-box">
+              <h3>WWW</h3>
+              <p>www.example.com</p>
+            </div>
+            <div class="divider"></div>
+            <div class="info-box">
+              <h3>LINKEDIN</h3>
+              <p>www.linkedin.com/company/example</p>
+            </div>
+            <div class="divider"></div>
+            <div class="info-box">
+              <h3>FACEBOOK</h3>
+              <p>www.facebook.com/example</p>
+            </div>
+            <div class="divider"></div>
+            <div class="info-box">
+              <h3>X</h3>
+              <p>www.x.com/example</p>
+            </div>
+            <div class="divider"></div>
+
+          </div>
+
+        </div>
+      </div>
+    </div>
+    <footer>
+      <div class="footer-content"></div>
+      <div class="custom-slide-number">1</div>
+    </footer>
+
+  </section>
+</div>"
+`;
+
+exports[`Template Features > should render cover template 1`] = `
+"<div id="slideContainer" class="slides" style="width: 960px; height: 700px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.2);">
+  <section class="cover present" data-markdown="" data-markdown-parsed="true" style="top: 350px; display: block;">
+    <div class="content-container">
+      <div class="logo">
+        <img src="https://external:9200/cat.jpg" alt="Logo">
+      </div>
+
+      <div class="content">
+        <h1>Reveal Js Templates in Web App Presentation Viewer</h1>
+
+        <p>
+          By: John Doe
+        </p>
+
+      </div>
+    </div>
+
+  </section>
+</div>"
+`;
+
+exports[`Template Features > should render title content image template 1`] = `
+"<div id="slideContainer" class="slides" style="width: 960px; height: 700px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.2);">
+  <section class="title-content-image present" data-markdown="" data-markdown-parsed="true" style="top: 350px; display: block;">
+    <div class="content-container">
+      <div class="title">
+        <h1>
+
+          <p>Title Content Image Slide</p>
+        </h1>
+        <div class="logo">
+          <img src="https://external:9200/cat.jpg" alt="Logo">
+        </div>
+      </div>
+
+      <div class="content-wrapper">
+        <div class="content">
+
+          <ul>
+            <li>Introduction to mountain ecosystems</li>
+            <li>Basic concepts of quantum encryption</li>
+            <li>Exploring culinary traditions in Southeast Asia</li>
+            <li>Overview of blockchain consensus mechanisms</li>
+          </ul>
+          <p><img src="https://external:9200/cat.jpg" alt="cat"></p>
+        </div>
+      </div>
+    </div>
+    <footer>
+      <div class="footer-content"></div>
+      <div class="custom-slide-number">1</div>
+    </footer>
+
+  </section>
+</div>"
+`;
+
+exports[`Template Features > should render title content template 1`] = `
+"<div id="slideContainer" class="slides" style="width: 960px; height: 700px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.2);">
+  <section class="title-content present" data-markdown="" data-markdown-parsed="true" style="top: 350px; display: block;">
+    <div class="content-container">
+      <div class="title">
+        <h1>
+
+          <p>Title Content Slide</p>
+        </h1>
+        <div class="logo">
+          <img src="https://external:9200/cat.jpg" alt="Logo">
+        </div>
+      </div>
+
+      <div class="content-wrapper">
+        <div class="content">
+
+          <ul>
+            <li>Introduction to mountain ecosystems</li>
+            <li>Basic concepts of quantum encryption</li>
+            <li>Exploring culinary traditions in Southeast Asia</li>
+            <li>Overview of blockchain consensus mechanisms</li>
+            <li>Setting up a personal productivity system</li>
+            <li>Writing clean, maintainable JavaScript code</li>
+            <li>Understanding modern art movements</li>
+            <li>History of aviation and early flight experiments</li>
+            <li>Managing team dynamics in remote work</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <footer>
+      <div class="footer-content"></div>
+      <div class="custom-slide-number">1</div>
+    </footer>
+
+  </section>
+</div>"
+`;