diff --git a/content/blog/.gitkeep b/content/blog/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/content/docs/.gitkeep b/content/docs/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/content/docs/sample-subject/_index.md b/content/docs/sample-subject/_index.md
new file mode 100644
index 0000000..f4bdcbd
--- /dev/null
+++ b/content/docs/sample-subject/_index.md
@@ -0,0 +1,11 @@
+---
+weight: 999
+title: "Example"
+description: "Sujet d'exemple pour faire un sujet"
+icon: "function"
+date: "2023-08-26T20:43:23+01:00"
+lastmod: "2023-08-26T20:43:23+01:00"
+draft: false
+toc: true
+katex: false
+---
diff --git a/content/docs/sample-subject/markdown.md b/content/docs/sample-subject/markdown.md
new file mode 100644
index 0000000..74e51a0
--- /dev/null
+++ b/content/docs/sample-subject/markdown.md
@@ -0,0 +1,73 @@
+---
+weight: 500
+title: "Ecrire un sujet"
+description: "Comment les sujets sont écrits ?"
+icon: "fluid_med"
+date: "2023-08-26T20:43:23+01:00"
+lastmod: "2023-08-26T20:43:23+01:00"
+draft: false
+toc: true
+katex: true
+---
+
+### Markdown ?
+
+Le LaTeX c'est bien beau mais si on doit faire tous nos cours comme ça, ça nous prendrait une éternité pour couvrir tous les chapitres :c.
+
+C'est pour ça que les sujets sont écrits en `Markdown`.
+Enfin, on écrit un fichier en Markdown et `Hugo` nous permet de le transformer en page `Html` automatiquement.
+
+Le `Markdown` est un langage de balisage (un peu comme le `Html`) créer avec comme objectif d'offrire une syntaxe facile à lire et à écrire. 
+
+#### Pourquoi faire du Markdown ?
+
+Si vous utilisez **Discord** alors vous avez peut-être déjà entendu parlé de `Markdown`, sinon vous allez voir que c'est vraiment très simple à prendre en main :)
+
+Voici un exemple montrant la simplicité du `Markdown` par rapport au `Html` et `LaTex`
+
+{{< tabs tabTotal="3">}}
+{{% tab title="Html" %}}
+
+**Html demo**
+
+```html
+<p>Ce<b>Mot</b> en gras et celui-là <strong>aussi</strong>.</p>
+```
+
+<p>Ce<b>Mot</b> en gras et celui-là <strong>aussi</strong>.</p>
+
+{{% /tab %}}
+{{% tab title="LaTex" %}}
+
+**LaTeX demo**
+
+```latex
+Ce \textbf{Mot} en gras et celui-là \textbf{aussi}.
+```
+
+{{< katex >}}
+$$
+Ce\ \textbf{Mot}\ en\ gras\ et\ celui-là\ \textbf{aussi}.
+$$
+{{< /katex >}}
+
+{{% /tab %}}
+{{% tab title="Markdown" %}}
+
+**MarkDown demo**
+
+```markdown
+Ce **Mot** en gras et celui-là **aussi**.
+```
+
+Ce **Mot** en gras et celui-là **aussi**.
+
+{{% /tab %}}
+{{< /tabs >}}
+
+#### Comment faire du Markdown ?
+
+|format|Markdown|Résultat|
+|--------|--------|--------|
+|    Italique    |    `*lorem*`    |    *lorem ipsum*   |
+|    C    |    D    ||
diff --git a/content/docs/sample-subject/overview.md b/content/docs/sample-subject/overview.md
new file mode 100644
index 0000000..95f2f4a
--- /dev/null
+++ b/content/docs/sample-subject/overview.md
@@ -0,0 +1,29 @@
+---
+weight: 500
+title: "Aperçu"
+description: "Comment faire un sujet"
+icon: "local_library"
+date: "2023-08-26T20:43:23+01:00"
+lastmod: "2023-08-26T20:43:23+01:00"
+draft: false
+toc: true
+katex: false
+---
+
+### Hugo ? Kesako ??
+
+`Hugo` est un framework pour fabriquer des sites web.
+C'est l'un des framework les plus populaires pour créer des sites statiques ;
+c'est à dire des sites qui n'ont pas de traitement côté serveur et donc pas de base de données.
+
+Le site est donc uniquement composé de `HTML`, `CSS` et `Javascript`,
+les pages sont "fixes"et toute fonctionnalité *dynamique* est executé sur le navigateur de l'utilisateur grâce au *javascript*.
+
+De plus, `Hugo` est très simple d'utilisation et a une documentation complète et propose une large sélection de thèmes et
+vous permet également de créer votre propre thème (nous avons assemblé plusieurs thèmes pour obtenir le thème qui fait fonctionner le site).
+
+Vous pourrez retrouver le documentation et les comment installer `Hugo` sur leur [site web](https://gohugo.io/).
+
+#### Le thème Hugo
+
+Vous pourrez retrouver le thème Hugo B2B sur [github](https://github.com/BackToBasicsEpita/b2b-theme) ainsi que la documentation pour pour l'utiliser pour faire votre propre site :)
diff --git "a/content/docs/sp\303\251/_index.md" "b/content/docs/sp\303\251/_index.md"
deleted file mode 100644
index c981dd1..0000000
--- "a/content/docs/sp\303\251/_index.md"
+++ /dev/null
@@ -1,10 +0,0 @@
----
-weight: 999
-title: "Spé"
-description: ""
-icon: "article"
-date: "2024-08-20T12:33:45+02:00"
-lastmod: "2024-08-20T12:33:45+02:00"
-draft: true
-toc: true
----
\ No newline at end of file
diff --git "a/content/docs/sp\303\251/tps/_index.md" "b/content/docs/sp\303\251/tps/_index.md"
deleted file mode 100644
index ae289a5..0000000
--- "a/content/docs/sp\303\251/tps/_index.md"
+++ /dev/null
@@ -1,10 +0,0 @@
----
-weight: 999
-title: "Tps"
-description: ""
-icon: "article"
-date: "2024-08-20T12:34:28+02:00"
-lastmod: "2024-08-20T12:34:28+02:00"
-draft: true
-toc: true
----
\ No newline at end of file
diff --git a/content/docs/sup/_index.md b/content/docs/sup/_index.md
deleted file mode 100644
index b4cee8a..0000000
--- a/content/docs/sup/_index.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-weight: 999
-title: "Sup"
-description: ""
-icon: "article"
-date: "2024-08-20T12:30:18+02:00"
-lastmod: "2024-08-20T12:30:18+02:00"
-draft: true
-toc: true
----
\ No newline at end of file
diff --git a/content/docs/sup/example-page.md b/content/docs/sup/example-page.md
deleted file mode 100644
index a2e5870..0000000
--- a/content/docs/sup/example-page.md
+++ /dev/null
@@ -1,5 +0,0 @@
-+++
-title = 'Example Page'
-date = 2024-08-20T12:02:23+02:00
-draft = true
-+++
diff --git a/content/spe/.gitkeep b/content/spe/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/content/sup/.gitkeep b/content/sup/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/content/sup/caca/_index.md b/content/sup/caca/_index.md
deleted file mode 100644
index 6b98663..0000000
--- a/content/sup/caca/_index.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-weight: 999
-title: "Caca"
-description: ""
-icon: "article"
-date: "2024-08-20T12:30:18+02:00"
-lastmod: "2024-08-20T12:30:18+02:00"
-draft: true
-toc: true
----
\ No newline at end of file
diff --git a/content/sup/caca/example-page.md b/content/sup/caca/example-page.md
deleted file mode 100644
index 8b663dc..0000000
--- a/content/sup/caca/example-page.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: "Code"
-description: ""
-icon: "code"
-date: "2023-05-22T00:44:31+01:00"
-lastmod: "2023-05-22T00:44:31+01:00"
-draft: false
-toc: true
-weight: 210
----
-
-{{% alert context="warning" text="The front matter `description` value for this page has been intentionally left empty in order to demonstrate FlexSearch's suggested results fallback behaviour." /%}}
-
-## Code Block Examples
-
-Code block language examples
-
-### Go
-
-```go
-package main
-
-import "fmt"
-
-func main() {
-    fmt.Println("hello world")
-}
-```
-
-### HTML
-
-```html
-<!DOCTYPE html>
-<html>
-<body>
-
-<h1>My First Heading</h1>
-
-<p>My first paragraph.</p>
-
-</body>
-</html>
-```
-
-### Markdown
-
-```md
-# H1 heading
-
-**Some bold text**
-
-*Italic text example*
-```
\ No newline at end of file
diff --git a/hugo.toml b/hugo.toml
index 96afc7c..2737836 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -13,6 +13,9 @@ title = 'BackToBasics'
         path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v5"
         disable = false
 
+[markup.goldmark.renderer]
+  unsafe = true # allow html in md files
+
 [params]
     [params.docs]
         darkMode = true
diff --git a/themes/lotusdocs/layouts/spe/_markup/render-codeblock-mermaid.html b/themes/lotusdocs/layouts/spe/_markup/render-codeblock-mermaid.html
new file mode 100644
index 0000000..3844cd7
--- /dev/null
+++ b/themes/lotusdocs/layouts/spe/_markup/render-codeblock-mermaid.html
@@ -0,0 +1,4 @@
+<pre class="mermaid">
+    {{- .Inner }}
+</pre>
+{{ .Page.Store.Set "hasMermaid" true }}
\ No newline at end of file
diff --git a/themes/lotusdocs/layouts/spe/_markup/render-codeblock.html b/themes/lotusdocs/layouts/spe/_markup/render-codeblock.html
new file mode 100644
index 0000000..4328638
--- /dev/null
+++ b/themes/lotusdocs/layouts/spe/_markup/render-codeblock.html
@@ -0,0 +1,85 @@
+<!-- Prism Render Hook -->
+{{ if eq .Page.Site.Params.docs.prism true }}
+  {{- $attributes := .Attributes }}
+  {{- $ordinal := .Ordinal }}
+
+  <!-- Create SHA1 Hash of Code Block-->
+  {{ $innerRemoveLB := replaceRE "\r\n?|\n" "" .Inner | string }}
+  {{ $innerHash := substr (sha1 (printf "%s%s" $innerRemoveLB $ordinal)) 0 7 }}
+
+  {{- $classes := slice (printf "language-%s" .Type) .Attributes.class }}
+
+  <!-- Options List -->
+  {{- $options := .Options }}
+  {{ $optionslist := newScratch }}
+  {{ range $k, $v := $options }}
+    {{ $optionslist.Add "options" (printf " %s" $k) }}
+  {{ end }}
+  {{ $optionsclasslist := $optionslist.Get "options" }}
+
+  <!-- Line Number Highlight -->
+  {{- if isset .Options "hl_lines" }}
+    {{ $lines := .Options.hl_lines }}
+
+    {{ $offset := 0 }}
+    {{- if isset .Options "linenostart" }}
+      {{ $offset = .Options.linenostart }}
+    {{ else }}
+      {{ $offset = 1 }}
+    {{ end }}
+
+    {{ $data := newScratch }}
+    {{ range $value := $lines }}
+      {{ $value = uniq $value }}
+      {{ if lt (len $value) 2 }}
+        {{ $value = slice (add $offset (index $value 0)) }}
+      {{ else }}
+        {{ $value = slice (delimit (slice (add $offset (index $value 0)) (add $offset (index $value 1))) "-") }}
+      {{ end }}
+      {{ $data.Add "lines" $value }}
+    {{ end }}
+    {{ $lines = delimit ($data.Get "lines") "," }}
+
+    {{- $attributes = merge $attributes (dict "data-line" $lines) }}
+
+    <!-- https://github.com/PrismJS/prism/issues/2714 -->
+    {{- if and (isset .Options "linenos") (ne .Options.linenos false) }}
+      {{- $attributes = merge $attributes (dict "data-line-offset" (string $offset)) }}
+    {{ else }}
+      {{- $attributes = merge $attributes (dict "data-line-offset" (string (sub $offset 1))) }}
+    {{ end }}
+
+  {{ end -}}
+
+  <!-- Line Numbers -->
+  {{- if and (isset .Options "linenos") (ne .Options.linenos false) }}
+    {{- $classes = $classes | append "line-numbers" }} <!-- https://discourse.gohugo.io/t/scope-issue-inside-conditional-block-i-think/29273/4 -->
+  {{ end -}}
+
+  <!-- Line Number Start -->
+  {{- if isset .Options "linenostart" }}
+    {{- $attributes = merge $attributes (dict "data-start" (string .Options.linenostart)) }}
+  {{ end -}}
+
+  <!-- Linkable Line Numbers -->
+  {{- if and (isset .Options "anchorlinenos") (ne .Options.anchorlinenos false) }}
+    {{- $classes = $classes | append "linkable-line-numbers" }}
+  {{ end -}}
+
+  {{- $attributes = merge $attributes (dict "class" (delimit $classes " ")) }}
+
+  <div class="prism-codeblock {{ $optionsclasslist }}">
+  <pre id="{{ $innerHash }}"
+    {{- range $k, $v := $attributes }}
+      {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+    {{- end -}}
+  >
+  <code>
+  {{- .Inner -}}
+  </code>
+  </pre>
+  </div>
+{{ else }}
+    {{ $result := transform.HighlightCodeBlock . }}
+    {{ $result.Wrapped }}
+{{ end }}
\ No newline at end of file
diff --git a/themes/lotusdocs/layouts/spe/_markup/render-heading.html b/themes/lotusdocs/layouts/spe/_markup/render-heading.html
new file mode 100644
index 0000000..e4f1a21
--- /dev/null
+++ b/themes/lotusdocs/layouts/spe/_markup/render-heading.html
@@ -0,0 +1 @@
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h{{ .Level }}>
\ No newline at end of file
diff --git a/themes/lotusdocs/layouts/spe/_markup/render-image.html b/themes/lotusdocs/layouts/spe/_markup/render-image.html
new file mode 100644
index 0000000..8f46d6b
--- /dev/null
+++ b/themes/lotusdocs/layouts/spe/_markup/render-image.html
@@ -0,0 +1,33 @@
+{{ $dest := .Destination }}
+{{ $text := .PlainText }}
+{{ $url := urls.Parse $dest }}
+
+{{ $image := newScratch }}
+{{ with $url.Scheme }}
+  {{  $image.Set "resource" (resources.GetRemote $dest) }}
+{{ else }}
+  {{  $image.Set "resource" (resources.Get $dest) }}
+{{ end }}
+
+{{ if .Title }}
+  <figure>
+    {{ with ($image.Get "resource") }}
+      {{ if eq .MediaType.SubType "svg" }}
+        {{ .Content | safeHTML }}
+      {{ else }}
+        <img src="{{ .RelPermalink | safeURL }}" alt="{{ $text }}" width="{{ .Width }}" height="{{ .Height }}" loading="lazy">
+      {{ end }}
+    {{ else }}
+      <img src="{{ .Destination | safeURL }}" alt="{{ $text }}" width="{{ .Width }}" height="{{ .Height }}" loading="lazy">
+    {{ end }}
+    <figcaption>{{ .Title | markdownify }}</figcaption>
+  </figure>
+{{ else }}
+  {{ with ($image.Get "resource") }}
+    {{ if eq .MediaType.SubType "svg" }}
+      {{ .Content | safeHTML }}
+    {{ else }}
+      <img src="{{ .RelPermalink | safeURL }}" alt="{{ $text }}" width="{{ .Width }}" height="{{ .Height }}" loading="lazy">
+    {{ end }}
+  {{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/themes/lotusdocs/layouts/spe/_markup/render-link.html b/themes/lotusdocs/layouts/spe/_markup/render-link.html
new file mode 100644
index 0000000..8737c91
--- /dev/null
+++ b/themes/lotusdocs/layouts/spe/_markup/render-link.html
@@ -0,0 +1,262 @@
+{{- /* Last modified: 2023-09-04T09:23:04-07:00 */}}
+
+{{- /*
+Copyright 2023 Veriphor LLC
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+*/}}
+
+{{- /*
+This render hook resolves internal destinations by looking for a matching:
+
+  1. Content page
+  2. Page resource (a file in the current page bundle)
+  3. Section resource (a file in the current section)
+  4. Global resource (a file in the assets directory)
+
+It skips the section resource lookup if the current page is a leaf bundle.
+
+External destinations are not modified.
+
+You must place global resources in the assets directory. If you have placed
+your resources in the static directory, and you are unable or unwilling to move
+them, you must mount the static directory to the assets directory by including
+both of these entries in your site configuration:
+
+  [[module.mounts]]
+  source = 'assets'
+  target = 'assets'
+
+  [[module.mounts]]
+  source = 'static'
+  target = 'assets'
+
+By default, if this render hook is unable to resolve a destination, including a
+fragment if present, it passes the destination through without modification. To
+emit a warning or error, set the error level in your site configuration:
+
+  [params.render_hooks.link]
+  errorLevel = 'warning' # ignore (default), warning, or error (fails the build)
+
+When you set the error level to warning, and you are in a development
+environment, you can visually highlight broken internal links:
+
+  [params.render_hooks.link]
+  errorLevel = 'warning' # ignore (default), warning, or error (fails the build)
+  highlightBroken = true # true or false (default)
+
+This will add a "broken" class to anchor elements with invalid src attributes.
+Add a rule to your CSS targeting the broken links:
+
+  a.broken {
+    background: #ff0;
+    border: 2px solid #f00;
+    padding: 0.1em 0.2em;
+  }
+
+This render hook may be unable to resolve destinations created with the ref and
+relref shortcodes. Unless you set the error level to ignore you should not use
+either of these shortcodes in conjunction with this render hook.
+
+@context {string} Destination The link destination.
+@context {page} Page A reference to the page containing the link.
+@context {string} PlainText The link description as plain text.
+@context {string} Text The link description.
+@context {string} Title The link title.
+
+@returns {template.html}
+*/}}
+
+{{- /* Initialize. */}}
+{{- $renderHookName := "link" }}
+
+{{- /* Verify minimum required version. */}}
+{{- $minHugoVersion := "0.114.0" }}
+{{- if lt hugo.Version $minHugoVersion }}
+  {{- errorf "The %q render hook requires Hugo v%s or later." $renderHookName $minHugoVersion }}
+{{- end }}
+
+{{- /* Error level when unable to resolve destination: ignore, warning, or error. */}}
+{{- $errorLevel := or site.Params.render_hooks.link.errorLevel "ignore" | lower }}
+
+{{- /* If true, adds "broken" class to broken links. Applicable in development environment when errorLevel is warning. */}}
+{{- $highlightBrokenLinks := or site.Params.render_hooks.link.highlightBroken false }}
+
+{{- /* Validate error level. */}}
+{{- if not (in (slice "ignore" "warning" "error") $errorLevel) }}
+  {{- errorf "The %q render hook is misconfigured. The errorLevel %q is invalid. Please check your site configuration." $renderHookName $errorLevel }}
+{{- end }}
+
+{{- /* Determine content path for warning and error messages. */}}
+{{- $contentPath := "" }}
+{{- with .Page.File }}
+  {{- $contentPath = .Path }}
+{{- else }}
+  {{- $contentPath = .Path }}
+{{- end }}
+
+{{- /* Parse destination. */}}
+{{- $u := urls.Parse .Destination }}
+
+{{- /* Set common message. */}}
+{{- $msg := printf "The %q render hook was unable to resolve the destination %q in %s" $renderHookName $u.String $contentPath }}
+
+{{- /* Set attributes for anchor element. */}}
+{{- $attrs := dict "href" $u.String }}
+{{- if $u.IsAbs }}
+  {{- /* Destination is a remote resource. */}}
+  {{- with .Page.Site.Params.docs.extLinkNewTab | default true }}
+    {{- $attrs = merge $attrs (dict "rel" "external" "target" "_blank") }}
+  {{- else }}
+    {{- $attrs = merge $attrs (dict "rel" "external") }}
+  {{- end -}}
+{{- else }}
+  {{- with $u.Path }}
+    {{- with $p := or ($.Page.GetPage .) ($.Page.GetPage (strings.TrimRight "/" .)) }}
+      {{- /* Destination is a page. */}}
+      {{- $href := .RelPermalink }}
+      {{- $tooltipDelay := dict "show" 550 "hide" 300 | jsonify | htmlEscape }}
+      {{- $pathDesc := .Description }}
+      {{- $pathTitle := .Title }}
+      {{- $pathParentSection := .Parent.Title | upper }}
+      {{- $pathHTML := printf "<a href='%s'><p>%s</p><strong>%s</strong><br>%s</a>" $href $pathParentSection $pathTitle $pathDesc }}
+      {{- with $u.RawQuery }}
+        {{- $href = printf "%s?%s" $href . }}
+      {{- end }}
+      {{- with $u.Fragment }}
+        {{- $ctx := dict
+          "contentPath" $contentPath
+          "errorLevel" $errorLevel
+          "page" $p
+          "parsedURL" $u
+          "renderHookName" $renderHookName
+        }}
+        {{- partial "inline/h-rh-l/validate-fragment.html" $ctx }}
+        {{- $href = printf "%s#%s" $href . }}
+      {{- end }}
+      {{- if eq .Page.Site.Params.docs.intLinkTooltip true }}
+        {{- $attrs = dict "href" $href "data-bs-toggle" "tooltip" "data-bs-delay" $tooltipDelay "data-bs-html" "true" "data-bs-title" $pathHTML }}
+      {{- else }}
+        {{- $attrs = dict "href" $href }}
+      {{- end -}}
+    {{- else }}
+      {{- with $.Page.Resources.Get $u.Path }}
+        {{- /* Destination is a page resource; drop query and fragment. */}}
+        {{- $attrs = dict "href" .RelPermalink }}
+      {{- else }}
+        {{- with (and (ne $.Page.BundleType "leaf") ($.Page.CurrentSection.Resources.Get $u.Path)) }}
+          {{- /* Destination is a section resource, and current page is not a leaf bundle. */}}
+          {{- $attrs = dict "href" .RelPermalink }}
+        {{- else }}
+          {{- with resources.Get $u.Path }}
+            {{- /* Destination is a global resource; drop query and fragment. */}}
+            {{- $attrs = dict "href" .RelPermalink }}
+          {{- else }}
+            {{- if eq $errorLevel "warning" }}
+              {{- warnf $msg }}
+              {{- if and $highlightBrokenLinks (eq hugo.Environment "development") }}
+                {{- $attrs = merge $attrs (dict "class" "broken") }}
+              {{- end }}
+            {{- else if eq $errorLevel "error" }}
+              {{- errorf $msg }}
+            {{- end }}
+          {{- end }}
+        {{- end }}
+      {{- end }}
+    {{- end }}
+  {{- else }}
+    {{- with $u.Fragment }}
+      {{- /* Destination is on the same page; prepend relative permalink. */}}
+      {{- $ctx := dict
+        "contentPath" $contentPath
+        "errorLevel" $errorLevel
+        "page" $.Page
+        "parsedURL" $u
+        "renderHookName" $renderHookName
+      }}
+      {{- partial "inline/h-rh-l/validate-fragment.html" $ctx }}
+      {{- $attrs = dict "href" (printf "%s#%s" $.Page.RelPermalink .) }}
+    {{- else }}
+      {{- if eq $errorLevel "warning" }}
+        {{- warnf $msg }}
+        {{- if and $highlightBrokenLinks (eq hugo.Environment "development") }}
+          {{- $attrs = merge $attrs (dict "class" "broken") }}
+        {{- end }}
+      {{- else if eq $errorLevel "error" }}
+        {{- errorf $msg }}
+      {{- end }}
+    {{- end }}
+  {{- end }}
+{{- end }}
+{{- with .Title }}
+  {{- $attrs = merge $attrs (dict "title" .) }}
+{{- end -}}
+
+{{- /* Render anchor element. */ -}}
+<a
+  {{- range $k, $v := $attrs }}
+    {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+  {{- end -}}
+>{{ .Text | safeHTML }}{{- if $u.IsAbs }}{{ with .Page.Site.Params.docs.extLinkNewTab | default true }}<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M14 5c-.552 0-1-.448-1-1s.448-1 1-1h6c.552 0 1 .448 1 1v6c0 .552-.448 1-1 1s-1-.448-1-1v-3.586l-7.293 7.293c-.391.39-1.024.39-1.414 0-.391-.391-.391-1.024 0-1.414l7.293-7.293h-3.586zm-9 2c-.552 0-1 .448-1 1v11c0 .552.448 1 1 1h11c.552 0 1-.448 1-1v-4.563c0-.552.448-1 1-1s1 .448 1 1v4.563c0 1.657-1.343 3-3 3h-11c-1.657 0-3-1.343-3-3v-11c0-1.657 1.343-3 3-3h4.563c.552 0 1 .448 1 1s-.448 1-1 1h-4.563z"/></svg>{{ end }}{{ end }}</a>
+
+{{- define "partials/inline/h-rh-l/validate-fragment.html" }}
+  {{- /*
+  Validates the fragment portion of a link destination.
+
+  @context {string} contentPath The page containing the link.
+  @context {srting} errorLevel The error level when unable to resolve destination; ignore (default), warning, or error.
+  @context {page} page The page corresponding to the link destination
+  @context {struct} parsedURL The link destination parsed by urls.Parse.
+  @context {string} renderHookName The name of the render hook.
+  */}}
+
+  {{- /* Initialize. */}}
+  {{- $contentPath := .contentPath }}
+  {{- $errorLevel := .errorLevel }}
+  {{- $p := .page }}
+  {{- $u := .parsedURL }}
+  {{- $renderHookName := .renderHookName }}
+
+  {{- /* Validate. */}}
+  {{- with $u.Fragment }}
+    {{- if $p.Fragments.Identifiers.Contains . }}
+      {{- if gt ($p.Fragments.Identifiers.Count .) 1 }}
+        {{- $msg := printf "The %q render hook detected duplicate heading IDs %q in %s" $renderHookName . $contentPath }}
+        {{- if eq $errorLevel "warning" }}
+          {{- warnf $msg }}
+        {{- else if eq $errorLevel "error" }}
+          {{- errorf $msg }}
+        {{- end }}
+      {{- end }}
+    {{- else }}
+      {{- /* Determine target path for warning and error message. */}}
+      {{- $targetPath := "" }}
+      {{- with $p.File }}
+        {{- $targetPath = .Path }}
+      {{- else }}
+        {{- $targetPath = .Path }}
+      {{- end }}
+      {{- /* Set common message. */}}
+      {{- $msg := printf "The %q render hook was unable to find heading ID %q in %s. See %s" $renderHookName . $targetPath $contentPath }}
+      {{- if eq $targetPath $contentPath }}
+        {{- $msg = printf "The %q render hook was unable to find heading ID %q in %s" $renderHookName . $targetPath }}
+      {{- end }}
+      {{- /* Throw warning or error. */}}
+      {{- if eq $errorLevel "warning" }}
+        {{- warnf $msg }}
+      {{- else if eq $errorLevel "error" }}
+        {{- errorf $msg }}
+      {{- end }}
+    {{- end }}
+  {{- end }}
+{{- end -}}
\ No newline at end of file
diff --git a/themes/lotusdocs/layouts/spe/baseof.html b/themes/lotusdocs/layouts/spe/baseof.html
new file mode 100644
index 0000000..ec76bd7
--- /dev/null
+++ b/themes/lotusdocs/layouts/spe/baseof.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+{{ $.Scratch.Delete "social_list" }}
+{{ $.Scratch.Set "pathName" (printf "%s" (.Site.Params.docs.pathName | default "docs")) }}
+<!-- social_list -->
+{{ $social_params := slice "github" "twitter" "instagram" "rss" }}
+{{ range $social_params }}
+    {{ if isset site.Params.social . }}
+        {{ $.Scratch.Add "social_list" (slice .) }}
+    {{ end }}
+{{ end }}
+<html lang="{{ site.LanguageCode }}">
+    {{- partial (printf "%s/%s" ($.Scratch.Get "pathName") "head.html") . -}}
+    <body>
+        <div class="content">
+            <div class="page-wrapper toggled">
+                {{- partial (printf "%s/%s" ($.Scratch.Get "pathName") "sidebar.html") . -}}
+                    <!-- Start Page Content -->
+                    <main class="page-content bg-transparent">
+                        {{ if .Site.IsMultiLingual }}
+                            {{- partial (printf "%s/%s" ($.Scratch.Get "pathName") "top-header.html") . -}}
+                        {{ else }}
+                            {{- partialCached (printf "%s/%s" ($.Scratch.Get "pathName") "top-header.html") . -}}
+                        {{ end }}
+                            <div class="container-fluid">
+                                <div class="layout-spacing">
+                                    {{ $currentPage := . -}}
+                                    {{ if site.Params.docs.breadcrumbs | default true }}
+                                        <div class="d-md-flex justify-content-between align-items-center">
+                                            {{- partial (printf "%s/%s" ($.Scratch.Get "pathName") "breadcrumbs.html") . -}}
+                                        </div>
+                                    {{ end }}
+                                    <div class="row flex-xl-nowrap">
+                                        {{ if site.Params.docs.toc | default true }}
+                                        <div class="docs-toc col-xl-3 {{ if .IsNode }}visually-hidden{{ else }}{{end}} {{ if and (ne .Params.toc false) (ne .TableOfContents "<nav id=\"TableOfContents\"></nav>") }}{{ else }}visually-hidden{{ end }} {{ if site.Params.docs.toc | default true }}{{ else }}visually-hidden{{ end }} d-xl-block">
+                                            {{- partial (printf "%s/%s" ($.Scratch.Get "pathName") "toc.html") . -}}
+                                        </div>
+                                        {{ end }}
+                                        {{ if site.Params.docs.tocMobile | default true }}
+                                        <div class="docs-toc-mobile {{ if .IsNode }}visually-hidden{{ else }}{{end}} {{ if and (ne .Params.toc false) (ne .TableOfContents "<nav id=\"TableOfContents\"></nav>") }}{{ else }}visually-hidden{{ end }} {{ if site.Params.docs.tocMobile | default true }}{{ else }}visually-hidden{{ end }} d-print-none d-xl-none">
+                                            <button id="toc-dropdown-btn" class="btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-offset="0,0" aria-expanded="false">
+                                                Table of Contents
+                                            </button>
+                                            {{- partial (printf "%s/%s" ($.Scratch.Get "pathName") "toc-mobile.html") . -}}
+                                        </div>
+                                        {{ end -}}
+                                        <div class="docs-content col-12 {{ if .IsNode }}{{ else }}{{ if site.Params.docs.toc | default true }}{{ if and (ne .Params.toc false) (ne .TableOfContents "<nav id=\"TableOfContents\"></nav>") }}col-xl-9{{else}}{{end}}{{ else }}{{ end }}{{ end }} mt-0">
+                                            <div class="mb-0 d-flex">
+                                                {{ if site.Params.docs.titleIcon | default false }}
+                                                <i class="material-icons title-icon me-2">{{- .Params.icon | default "article" }}</i>
+                                                {{ end }}
+                                                <h1 class="content-title mb-0">
+                                                    {{ $currentPage.Title }}
+                                                    {{ if .Draft }}
+                                                        <span class="badge bg-default fs-6 mb-1 align-middle">DRAFT</span>
+                                                    {{ end }}
+                                                </h1>
+                                            </div>
+                                            {{ if site.Params.docs.descriptions | default false }}
+                                                <p class="lead mb-3">{{ $currentPage.Description | markdownify }}</p>
+                                            {{ end }}
+                                            <div id="content" class="main-content" {{ if eq .Site.Params.docs.toc true -}}data-bs-spy="scroll" data-bs-root-margin="0px 0px -65%" data-bs-target="#toc-mobile"{{ end }}>
+                                                {{ block "main" . }}{{ end }}
+                                            </div>
+                                            <div>
+                                                {{- partial (printf "%s/%s" ($.Scratch.Get "pathName") "doc-nav.html") . -}}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            {{- partialCached (printf "%s/%s" ($.Scratch.Get "pathName") "footer.html") . -}}
+
+                    </main>
+            </div>
+        </div>
+
+        {{ if site.Params.docs.backToTop | default true }}
+        <!-- Back to top -->
+        <button onclick="topFunction()" id="back-to-top" aria-label="Back to Top Button" class="back-to-top fs-5"><svg width="24" height="24"><path d="M12,10.224l-6.3,6.3L4.32,15.152,12,7.472l7.68,7.68L18.3,16.528Z" style="fill:#fff"/></svg></button>
+        <!-- Back to top -->
+        {{ end }}
+
+        <!-- Dark Mode Switch JS -->
+        {{ if eq .Site.Params.docs.darkMode true -}}
+            {{ $darkModeSwitch := resources.Get (printf "/%s/%s" ($.Scratch.Get "pathName") "js/darkmode-switch.js") | js.Build | minify }}
+            <script>{{ $darkModeSwitch.Content | safeJS }}</script>
+        {{ end -}}
+
+        {{- partialCached (printf "%s/%s" ($.Scratch.Get "pathName") "footer/footer-scripts.html") . -}}
+
+        <!-- DocSearch Config -->
+        {{ if and (.Site.Params.docsearch.appID) (.Site.Params.docsearch.apiKey) -}}
+            {{- partialCached (printf "%s/%s" ($.Scratch.Get "pathName") "footer/docsearch.html") . -}}
+        {{ end }}
+
+        <!-- FlexSearch Config -->
+        {{ if or (not (isset .Site.Params.flexsearch "enabled")) (eq .Site.Params.flexsearch.enabled true) -}}
+            {{ if and (.Site.Params.docsearch.appID) (.Site.Params.docsearch.apiKey) -}}
+            {{ else }}
+                {{- partialCached (printf "%s/%s" ($.Scratch.Get "pathName") "footer/flexsearch.html") . -}}
+            {{ end }}
+        {{ end }}
+    </body>
+</html>
\ No newline at end of file
diff --git a/themes/lotusdocs/layouts/spe/list.html b/themes/lotusdocs/layouts/spe/list.html
new file mode 100644
index 0000000..a19f9b1
--- /dev/null
+++ b/themes/lotusdocs/layouts/spe/list.html
@@ -0,0 +1,24 @@
+{{ define "main" }}
+    <div class="row flex-xl-wrap">
+        {{ range .Pages.ByWeight }}
+        <div id="list-item" class="col-md-4 col-12 mt-4 pt-2">
+            <a class="text-decoration-none text-reset" href="{{ .Permalink }}">
+                <div class="card h-100 features feature-full-bg rounded p-4 position-relative overflow-hidden border-1">
+                    <span class="icon-color d-flex my-3">
+                        <i class="material-icons align-middle">{{- .Params.icon | default "article" }}</i>
+                        {{ if .Draft }}<span class="badge bg-default ms-2 fs-6 align-middle">DRAFT</span>{{ end }}
+                        {{ if .IsSection }}<i class="material-icons icon-faint align-middle ms-auto" title="Directory">folder</i>{{ end }}
+                    </span>
+                    <div class="card-body p-0 content">
+                        <p class="fs-5 fw-semibold card-title mb-1">{{ .Title }}</p>
+                        <p class="para card-text mb-0">{{ .Description | truncate (.Site.Params.docs.listDescTrunc | default 100) | markdownify }}</p>
+                    </div>
+                    <!-- <div class="position-absolute top-0 end-0">
+                        <i class="material-icons opacity-05">{{- .Params.icon }}</i>
+                    </div> -->
+                </div>
+            </a>
+        </div><!--end col-->
+        {{ end }}
+    </div>
+{{ end }}
\ No newline at end of file
diff --git a/themes/lotusdocs/layouts/spe/single.html b/themes/lotusdocs/layouts/spe/single.html
new file mode 100644
index 0000000..49301a7
--- /dev/null
+++ b/themes/lotusdocs/layouts/spe/single.html
@@ -0,0 +1,37 @@
+{{ define "main" }}
+    <!-- override Prism's default copy messages to 'empty'. Required by CSS styling.
+         see: https://prismjs.com/plugins/copy-to-clipboard/#styling -->
+    <div data-prismjs-copy="" data-prismjs-copy-success="" data-prismjs-copy-error="">
+        {{ .Content }}
+    </div>
+
+    {{ if and .GitInfo .Site.Params.docs.repoURL -}}
+        {{ partial (printf "%s/%s" ($.Scratch.Get "pathName") "gitinfo") . }}
+    {{ end -}}
+
+    {{ if .Page.Store.Get "hasMermaid" }}
+    {{ $mermaid := resources.Get (printf "%s/%s" ($.Scratch.Get "pathName") "js/mermaid.min.js") }}
+    {{ if hugo.IsProduction }}
+        {{ $mermaid = $mermaid | fingerprint "sha384" }}
+    {{ end }}
+    <script src="{{ $mermaid.RelPermalink }}" {{ if hugo.IsProduction }}integrity="{{ $mermaid.Data.Integrity }}"{{ end }}></script>
+    <script>
+        const config = {
+            startOnLoad:true,
+            logLevel: "error",
+            align: "center",
+            theme:"null"
+        };
+        mermaid.initialize(config);
+    </script>
+    {{ end }}
+
+    {{ if .Site.Params.feedback.enabled | default false -}}
+        {{ if or (.Site.Params.plausible.dataDomain) (.Site.GoogleAnalytics) }}
+            {{- partial (printf "%s/%s" ($.Scratch.Get "pathName") "footer/feedback.html") . -}}
+        {{ else }}
+            {{ errorf "Either Google Analytics or Plausible Analytics must be configured before enabling the Feedback Widget." }}
+        {{ end }}
+    {{ end -}}
+
+{{ end }}
\ No newline at end of file