diff --git a/layouts/partials/css.html b/layouts/partials/css.html
new file mode 100644
index 0000000..80d2ff2
--- /dev/null
+++ b/layouts/partials/css.html
@@ -0,0 +1,61 @@
+<!-- Include all theme CSS filenames here -->
+{{- $page := . -}}
+
+{{- $inServerMode := hugo.IsServer -}}
+{{- $serverOpts := cond ($inServerMode) (dict "enableSourceMap" true) (dict "outputStyle" "compressed") -}}
+{{- $sassCompiler := dict "transpiler" "dartsass" -}}
+{{- $cssOpts := collections.Merge $sassCompiler $serverOpts -}}
+
+<!-- Fonts -->
+{{ with $fonts := .Site.Params.fonts -}}
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+{{ range $fonts }}
+{{- $fontFace := replace .name " " "+" -}}
+{{- $fontSizes := delimit (.weights | default (slice 300 400 600 700)) ";" -}}
+{{- $fontUrl := printf "https://fonts.googleapis.com/css2?family=%s:wght@%s" $fontFace $fontSizes -}}
+<link rel="stylesheet" href="{{ $fontUrl }}">
+{{- end }}
+{{- end }}
+
+<link rel="icon" href="{{ "images/favicon.ico" | relURL }}" />
+
+<!-- Fallback font for symbols (such as "🛈"). --
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2">
+
+<!-- Process and include Sass files. -->
+{{- $sass := append (resources.Get "theme-css/sphinx-design/index.scss")
+                    (resources.Get "theme-css/pst/bootstrap.scss")
+                    (resources.Get "theme-css/pst/pydata-sphinx-theme.scss")
+                    (resources.Get "theme-css/spht/index.scss")
+                    (resources.Match "theme-css/*.scss")
+           | append (resources.Match "css/*.scss") -}}
+
+{{- range $sass -}}
+  {{ with . }}  <!-- Skips nil elements from appending empty resources.Match slices. -->
+    {{- $targetFile := printf "%s.css" .RelPermalink -}}
+    {{- if $inServerMode -}}
+      {{ $css := resources.ExecuteAsTemplate $targetFile $page . | toCSS $cssOpts -}}
+      <link rel="stylesheet" type="text/css" href="{{ $css.RelPermalink }}">
+    {{ else }}
+      {{ $css := resources.ExecuteAsTemplate $targetFile $page . | toCSS $cssOpts | minify | fingerprint -}}
+      <link rel="stylesheet" type="text/css" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
+    {{- end -}}
+  {{- end -}}
+{{- end -}}
+
+<!-- Process and include plain CSS files. -->
+{{- $themeCssFiles := resources.Match "theme-css/*.css" -}}
+{{- $userCssFiles := resources.Match "css/*.css" -}}
+{{- $cssFiles := $themeCssFiles | append $userCssFiles }}
+
+{{- range $cssFiles -}}
+  {{ if $inServerMode -}}
+    {{ $custom_style := . | resources.ExecuteAsTemplate . $page -}}
+    <link rel="stylesheet" href="{{ $custom_style.RelPermalink }}">
+  {{ else }}
+    {{ $custom_style := . | resources.ExecuteAsTemplate . $page | minify | fingerprint -}}
+    <link rel="stylesheet" href="{{ $custom_style.RelPermalink }}" integrity="{{ $custom_style.Data.Integrity }}">
+  {{- end -}}
+{{- end -}}
diff --git a/layouts/partials/javascript.html b/layouts/partials/javascript.html
new file mode 100644
index 0000000..084d7b5
--- /dev/null
+++ b/layouts/partials/javascript.html
@@ -0,0 +1,48 @@
+{{- $inServerMode := hugo.IsServer -}}
+
+<!-- Font Awesome -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js" integrity="sha384-3ve3u7etWcm2heCe4TswfZSAYSg2jR/EJxRHuKM5foOiKS8IJL/xRlvmjCaHELBz" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+
+<!-- Custom JS -->
+<!-- All JS files under static/js are included -->
+{{- $jsFiles := collections.Sort (resources.Match "js/*.js") "Name" -}}
+{{- if $inServerMode -}}
+{{- $js := $jsFiles | resources.Concat "js/bundle.js" }}
+<script type="text/javascript" src={{ $js.RelPermalink }}></script>
+{{ else }}
+{{- $js := $jsFiles | resources.Concat "js/bundle.js" | resources.Minify }}
+<script type="text/javascript" src={{ $js.RelPermalink }}></script>
+{{- end -}}
+
+<script type="text/javascript">setupShortcuts(maxLevel={{ default 2 .Page.Params.shortcutDepth }});</script>
+
+{{- if .HasShortcode "youtube" }}
+<script type="text/javascript">
+  var buttons = document.getElementsByClassName("video-transcript-button");
+  var i;
+
+  for (i = 0; i < buttons.length; i++) {
+    buttons[i].addEventListener("click", function() {
+      this.classList.toggle("active");
+      var content = this.nextElementSibling;
+      if (content.style.display === "block") {
+        content.style.display = "none";
+      } else {
+        content.style.display = "block";
+      }
+    });
+  }
+</script>
+{{ end -}}
+
+{{- if .Page.Store.Get "hasMermaid" }}
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.8.0/dist/mermaid.esm.min.mjs';
+
+  const theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'default';
+
+  mermaid.initialize({ startOnLoad: false, theme: theme });
+  await mermaid.run({ querySelector: '.mermaid' });
+</script>
+{{ end -}}