diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..209a5bd
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,185 @@
+{%- import 'macros/seo.html' as macros_seo %}
+{%- import "macros/macros.html" as macros %}
+{# Load current language i18n data from .toml files in user's '/i18n' folder, use theme as fallback. #}
+{%- set i18n = load_data(path="i18n/" ~ lang ~ '.toml', required=false) -%}
+{%- if not i18n -%}{%- set i18n = load_data(path="themes/abridge/i18n/" ~ lang ~ ".toml", required=false) -%}{%- endif %}
+
+{%- set uglyurls = config.extra.uglyurls | default(value=false) -%}
+{%- if config.extra.offline %}{% set uglyurls = true %}{% endif %}
+<!DOCTYPE html>
+<html lang="{%- if lang != config.default_language %}{{ lang }}{% else %}{{ config.extra.language_code | default(value=lang) }}{% endif %}">
+<head>
+  {%- include "partials/head.html" %}
+
+  {#- Rss / Atom Feed #}
+  {%- block rss %}
+  {%- if config.generate_feed %}
+  <link rel="alternate" type="{% if config.feed_filename is containing('atom') %}application/atom+xml{% else %}application/rss+xml{% endif %}" title="{{ config.title }} Atom/RSS Feed" href="{{ get_url(path=config.feed_filename, trailing_slash=false, lang=lang) | safe }}" />
+  {%- endif %}
+
+  {%- endblock rss %}
+
+  {#- SEO: title, description, etc #}
+  {%- block seo %}
+    {%- if config.extra.title_separator %}
+      {%- set title_separator = " " ~ config.extra.title_separator ~ " " -%}
+    {%- else %}
+      {%- set title_separator = " | " -%}
+    {%- endif %}
+  {%- endblock seo %}
+
+  {%- block comments_init %}
+  {%- endblock comments_init %}
+
+  {%- include "partials/head_js.html" %}
+</head>
+<body>
+{%- block header %}
+  <header>
+    <nav>
+      <div>
+        {%- if config.extra.logo -%}
+
+        <h1><a href="{{ get_url(path="/", lang=lang) }}{%- if uglyurls %}/index.html{%- endif %}" title="{{config.title}}">
+        {%- if config.extra.logo.file -%}
+        <img src="{{ config.base_url | safe }}/{{ config.extra.logo.file | safe }}"{%- if config.extra.logo.alt %} alt="{{ config.extra.logo.alt | safe }}"{%- endif %}{%- if config.extra.logo.width %} width="{{ config.extra.logo.width | safe }}"{%- endif %}{%- if config.extra.logo.height %} height="{{ config.extra.logo.height | safe }}"{%- endif %} />
+        {%- endif -%}
+        {%- if config.extra.logo.text -%}{{ config.extra.logo.text | safe }}{%- endif -%}
+        </a></h1>
+
+        {%- elif config.extra.textlogo -%}
+        <h1><a href="{{ get_url(path="/", lang=lang) }}{%- if uglyurls -%}
+        {%- if lang == config.default_language -%}/{%- endif -%}
+        index.html{%- endif -%}" title="{{config.title}}">{{ config.extra.textlogo | safe }}</a></h1>
+        {%- elif config.title -%}
+        <h1><a href="{{ get_url(path="/", lang=lang) }}{%- if uglyurls %}/index.html{%- endif %}" title="{{config.title}}">{{ config.title | safe }}</a></h1>
+        {%- endif -%}
+      </div>
+      <div>
+
+        <div>
+          <ul>
+
+            {%- set js_switcher=config.extra.js_switcher | default(value=true) %}
+            {%- if config.extra.menu %}
+              {%- for i in config.extra.menu -%}
+                <li><a{%- if i.size %} class="{{ i.size }}"{% endif %} href="{%- if i.url is matching("^http[s]?://") %}{{ i.url }}{%- else -%}{{ get_url(path=i.url, lang=lang, trailing_slash=i.slash) }}{%- if i.slash and uglyurls %}index.html{%- endif %}{%- endif %}"{% if i.blank %} target="_blank"{% endif %}>
+                {%- if lang != config.default_language %} {{ macros::translate(key=i.name|safe, default=i.name|safe, i18n=i18n) }} {% else %} {{ i.name | safe }} {% endif -%}
+                </a></li>
+              {%- endfor -%}
+            {%- endif -%}
+
+            {%- if config.languages | length > 0 %}
+            <li><div class="dropdown"><i class="svgs world" type="reset"></i>
+              {%- if current_url %}
+                <div class="dropdown-content">
+                <span>{{ macros::translate(key="language_name", default="lang_name", i18n=i18n) }}</span>
+                {%- for lcode,language in config.languages -%}
+                  {%- set i18n_menu = load_data(path="i18n/" ~ lcode ~ '.toml', required=false) -%}
+                  {%- if not i18n_menu -%}{%- set i18n_menu = load_data(path="themes/abridge/i18n/" ~ lcode ~ ".toml", required=false) -%}{%- endif %}
+                  {%- if lang != lcode -%}
+                    {%- if lcode == config.default_language -%}
+                    <a href="{{ current_url | replace(from='/' ~ lang ~ '/', to = '/') | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ macros::translate(key="language_name", default="language_name", i18n=i18n_menu) }}</a>
+                    {%- elif lang == config.default_language -%}
+                    <a href="{{ current_url | replace(from=config.base_url, to=config.base_url ~ "/" ~ lcode) | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ macros::translate(key="language_name", default="language_name", i18n=i18n_menu) }}</a>
+                    {%- else -%}
+                    <a href="{{ current_url | replace(from='/' ~ lang ~ '/', to = '/' ~ lcode ~ '/') | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ macros::translate(key="language_name", default="language_name", i18n=i18n_menu) }}</a>
+                    {%- endif -%}
+                  {%- endif -%}
+                {%- endfor -%}
+                </div>
+              {%- endif %}
+            </div></li>
+            {%- endif %}
+
+            {%- if js_switcher -%}
+              {%- set icon_adjust=config.extra.icon_adjust | default(value="svgs adjust") -%}
+              {%- if icon_adjust -%}<li><i type="reset" id="mode" class="js {{ icon_adjust }}"></i>{%- else -%}<i type="reset" id="mode" class="js mode">&#9728;</i></li>{%- endif -%}
+            {%- endif -%}
+
+          </ul>
+        </div>
+
+        <div>
+          {%- if config.build_search_index %}
+          {%- set icon_search=config.extra.icon_search | default(value="svgs search") %}
+          <div>
+            <form autocomplete=off class="js" name="goSearch" id="searchbox">
+              <div class="searchd">
+                <input id="searchinput" type="text" placeholder="{{ macros::translate(key="Search", default="Search", i18n=i18n) }}" title="Search"{% if config.extra.search_library %}{% if config.extra.search_library == "stork" %} data-stork="stork" {% endif %}{% endif %} />
+                <button type="submit" title="Search" class="{%- if icon_search -%}{{ icon_search }}{%- else -%}si{%- endif -%}">{%- if not icon_search -%}&#8981;{%- endif -%}</button>
+              </div>
+              <div class="results"><div id="suggestions"{% if config.extra.search_library %}{% if config.extra.search_library == "stork" %} data-stork="stork-output" {% endif %}{% endif %}></div></div>
+            </form>
+          </div>
+          {%- endif %}
+        </div>
+
+      </div>
+    </nav>
+    {%- if config.extra.sitedesc %}
+    {%- if config.description %}
+    <div>{{ config.description }}</div>
+    {%- endif %}
+    {%- endif %}
+    {%- if config.extra.headhr %}
+    <hr />
+    {%- endif %}
+  </header>
+{%- endblock header %}
+  <main>
+  {%- block content %}
+  {%- endblock content %}
+  </main>
+{%- block footer %}
+  <footer>
+    {%- if config.extra.foothr %}
+    <hr />
+    {%- endif %}
+    <div class="c">
+      {%- include "partials/social.html" %}
+
+      {#- Copyright START #}
+      {%- if config.extra.copyright | default(value=true) -%}
+      {%- set current_year = now() | date(format="%Y") %}
+      {%- set current_year = '<span id="year">' ~ current_year ~ '</span>' %}
+
+        {%- if config.extra.copyright_override -%}
+          {%- if lang != config.default_language %}
+            {%- set copyright_string = macros::translate(key='copyright_override', default='© $CURRENT_YEAR $SITE_TITLE', i18n=i18n) | replace(from="$CURRENT_YEAR", to=current_year) | replace(from="$SITE_TITLE", to=config.title) %}
+          {% else %}
+            {%- set copyright_string = config.extra.copyright_override | replace(from="$CURRENT_YEAR", to=current_year) | replace(from="$SITE_TITLE", to=config.title) %}
+          {% endif -%}
+        {%- else -%}
+          {%- set copyright_string = "&copy; " ~ current_year ~ " " ~ config.title %}
+        {%- endif %}
+      <p{%- if config.extra.footer_size %} class="{{ config.extra.footer_size }}"{% endif %}> {{ copyright_string | safe }}</p>
+      {%- endif -%}
+      {#- Copyright END #}
+
+      {%- if config.extra.menu_footer %}
+      <nav>
+        {%- for i in config.extra.menu_footer -%}
+        {%- if i.url != "sitemap.xml" %}
+        {%- set furl=get_url(path=i.url, lang=lang, trailing_slash=i.slash) %}
+        {%- else %}
+        {%- set furl=get_url(path=i.url, trailing_slash=i.slash) %}
+        {%- endif %}
+        <a{%- if config.extra.footer_size %} class="{{ config.extra.footer_size }}"{% endif %} href="{{ furl | safe }}{%- if i.slash and uglyurls %}index.html{%- endif %}"{% if i.blank %} target="_blank"{% endif %}>{% if lang != config.default_language %} {{ macros::translate(key=i.name|safe, default=i.name|safe, i18n=i18n) }} {% else %} {{ i.name | safe }} {% endif %}</a>
+        {%- endfor %}
+      </nav>
+      {%- endif %}
+      {%- if config.extra.footer_credit | default(value=true) %}
+      {%- if config.extra.footer_credit_override %}
+      {{ config.extra.footer_credit_override | safe }}
+      {%- else %}
+      <p{%- if config.extra.footer_size %} class="{{ config.extra.footer_size }}"{% endif %}>{{ macros::translate(key="Powered_by", default="Powered by", i18n=i18n) }} <a href="https://www.getzola.org/" target="_blank">Zola</a> {{ macros::translate(key="and", default="and", i18n=i18n) }} <a href="https://github.com/jieiku/abridge/" target="_blank">Abridge</a></p>
+      {%- endif %}
+      {%- endif %}
+    </div>
+  </footer>
+{%- endblock footer %}
+{%- block gotop %}
+{%- endblock gotop %}
+</body>
+</html>
diff --git a/templates/partials/head.html b/templates/partials/head.html
new file mode 100644
index 0000000..b3916d0
--- /dev/null
+++ b/templates/partials/head.html
@@ -0,0 +1,118 @@
+
+{#- Theme Switcher Button to toggle between dark/light #}
+  {%- set integrity = config.extra.integrity | default(value=true) -%}
+  {%- if config.extra.offline %}{% set integrity = false %}{% endif %}
+
+  {%- if config.extra.js_switcher | default(value=true) %}
+  {%- set js_theme="js/theme.min.js" %}
+  {%- if config.extra.js_switcher_default %}
+    {%- if config.extra.js_switcher_default == "light" %}{% set js_theme="js/theme_light.min.js" %}{% endif %}
+  {%- endif %}
+  <script src="{{                     get_url(path=js_theme                        , trailing_slash=false) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path=js_theme, sha_type=384, base64=true) | safe }}"{%- endif %}></script>
+  {%- endif %}
+
+
+
+
+
+{#- Style Sheets #}
+  {%- set stylesheets=config.extra.stylesheets | default(value=[ "abridge.css" ]) -%}
+  {%- if stylesheets %}{%- for i in stylesheets %}
+  <link rel="stylesheet" href="{{     get_url(path=i                               , trailing_slash=false, cachebust=true) | safe }}" />
+  {%- endfor %}{%- endif %}
+
+
+
+
+
+{#- meta tags #}
+  <meta charset="utf-8" />
+  <meta http-equiv="x-ua-compatible" content="ie=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="base" content="{{ config.base_url | safe }}" />
+  <meta name="HandheldFriendly" content="True" />
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+
+
+
+
+
+{#- Security: CSP, referrer #}
+  {%- if config.extra.security_header_referrer %}
+  <meta name="referrer" content="{{ config.extra.security_header_referrer | safe }}" />
+  {%- endif %}
+  {%- if config.extra.security_header_csp %}
+  <meta http-equiv="Content-Security-Policy" content="{{ config.extra.security_header_csp | safe }}" />
+  {%- endif %}
+
+
+
+
+
+{#- Favicons #}
+  {%- if config.extra.favicon_theme_color %}
+  <meta name="theme-color" content="{{ config.extra.favicon_theme_color }}" />
+  {%- endif %}
+
+  {%- if config.extra.favicon_ms_color %}
+  <meta name="msapplication-TileColor" content="{{ config.extra.favicon_ms_color }}" />
+  {%- endif %}
+
+  {%- if config.extra.webmanifest %}
+  <link rel="manifest" href="{{ get_url(path=config.extra.webmanifest, trailing_slash=false) | safe }}" />
+  {%- endif %}
+
+  {%- if config.extra.favicon_mask and config.extra.favicon_mask_color %}
+  <link rel="mask-icon" href="{{ get_url(path=config.extra.favicon_mask, trailing_slash=false) | safe }}" color="{{ config.extra.favicon_mask_color }}" />
+  {%- endif %}
+
+  {%- if config.extra.favicon_svg %}
+  <link rel="icon" type="image/svg+xml" href="{{ get_url(path=config.extra.favicon_svg, trailing_slash=false) | safe }}" />
+  {%- endif %}
+
+  {%- if config.extra.favicon180 %}
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ get_url(path=config.extra.favicon180, trailing_slash=false) | safe }}" />
+  {%- endif %}
+
+  {%- if config.extra.favicon32 %}
+  <link rel="icon" type="image/png" sizes="32x32" href="{{ get_url(path=config.extra.favicon32, trailing_slash=false) | safe }}" />
+  {%- endif %}
+
+  {%- if config.extra.favicon16 %}
+  <link rel="icon" type="image/png" sizes="16x16" href="{{ get_url(path=config.extra.favicon16, trailing_slash=false) | safe }}" />
+  {%- endif %}
+
+
+
+
+
+{#- Style Sheets Preload #}
+  {%- set integrity = config.extra.integrity | default(value=true) -%}
+  {%- if config.extra.offline %}{% set integrity = false %}{% endif %}
+
+{%- if config.extra.fonts %}{%- for i in config.extra.fonts %}
+  {%- if i.url is matching("^http[s]?://") %}
+  <link rel="preload" as="style" class="preStyle" href="{{ i.url | safe }}" crossorigin="anonymous" />
+  {%- else %}
+  <link rel="preload" as="font" href="{{ get_url(path=i.url, trailing_slash=false) | safe }}" type="font/woff2" />
+  {%- endif %}
+{%- endfor %}{%- endif %}
+
+{%- if config.extra.fontawesome %}
+  <link rel="preload" as="style" class="preStyle" href="{{ config.extra.fontawesome | safe }}" crossorigin="anonymous" />
+{%- endif %}
+
+{%- if config.extra.math or page.extra.math %}
+
+  {%- set katex_css=config.extra.katex_css | default(value="katex.min.css") -%}
+  {%- if katex_css %}{%- if katex_css is matching("^http[s]?://") %}
+  <link rel="preload" as="style" class="preStyle" href="{{ katex_css | safe }}"{%- if integrity and config.extra.katex_css_integrity %} integrity="{{ config.extra.katex_css_integrity | safe }}"{%- endif %} crossorigin="anonymous" />
+  {%- else %}
+  <link rel="preload" as="style" class="preStyle" href="{{ get_url(path=katex_css, trailing_slash=false) }}"{%- if integrity %} integrity="sha384-{{ get_hash(path=katex_css, sha_type=384, base64=true) | safe }}"{%- endif %} />
+  {%- endif %}{%- endif %}
+
+{%- endif %}
+
+{#- End of head partial -#}
