diff --git a/assets/css/extended/newsletter.scss b/assets/css/extended/newsletter.scss
new file mode 100644
index 0000000..0dc5235
--- /dev/null
+++ b/assets/css/extended/newsletter.scss
@@ -0,0 +1,99 @@
+/*
+color candidates:
+#CB3A56 茜色
+#F05654 銀紅
+#F20C00 石榴紅
+#FF2D51 火紅
+*/
+body.type-newsletter {
+  --signature: #CB3A56;
+  --signature-bg: rgba(203, 58, 87, 0.239);
+  --signature-bg-dim: rgba(203, 58, 87, 0.147);
+  --main-border: 5px solid var(--signature);
+  --link-hover-color: var(--signature);
+
+
+  /* regular page layout */
+}
+
+body.type-newsletter.kind-section {
+  /* section page layout */
+
+  .main {
+    border: var(--main-border);
+    background-color: var(--theme);
+    margin-top: var(--content-gap);
+    min-height: calc(100vh - var(--header-height) - var(--footer-height) - var(--content-gap));
+    max-width: calc(var(--nav-width));
+  }
+
+  .main-logo {
+    position: absolute;
+    left: 0; top: 0;
+    width: 50px;
+    height: 50px;
+    line-height: 45px;
+    border-right: var(--main-border);
+    border-bottom: var(--main-border);
+    background-color: var(--signature);
+    color: var(--theme);
+    font-size: 32px;
+    text-align: center;
+  }
+}
+
+body.type-newsletter.kind-page {
+  .newsletter-brand {
+    display: flex;
+    background-color: var(--signature-bg-dim);
+    transition: var(--link-transition);
+    font-size: 32px;
+    margin-bottom: calc(var(--content-gap) * 2);
+    line-height: 50px;
+
+    .icon, .name {
+      height: 50px;
+    }
+    .icon {
+      width: 50px;
+      color: var(--theme);
+      text-align: center;
+      background-color: var(--signature);
+    }
+    .name {
+      padding: 0 20px;
+      font-weight: bolder;
+      color: var(--signature);
+    }
+    .issueno {
+      color: var(--signature);
+      font-weight: 300;
+      transition: var(--link-transition);
+    }
+    .arrow {
+      margin-left: auto;
+      color: transparent;
+      display: flex;
+      align-items: center;
+      padding-right: 15px;
+      transition: var(--link-transition);
+    }
+
+    &:hover, &:active {
+      background-color: var(--signature-bg);
+      .arrow {
+        color: var(--signature);
+      }
+      .issueno {
+        color: transparent;
+      }
+    }
+  }
+
+  .post-title {
+    font-size: 36px;
+  }
+  .post-footer {
+    border-bottom: 0;
+  }
+}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index e74c03e..0d78fad 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -12,8 +12,7 @@
 {{- end -}}
 {{- if eq site.Params.defaultTheme `dark` -}}
 {{- print " dark" }}
-{{- end -}}
-{{- block "bodyClass" . }}{{ end }}
+{{- end }} type-{{ .Type }} kind-{{ .Kind -}}
 " id="top">
     {{- partialCached "header.html" . .Page -}}
     <main class="main {{- if (eq .Kind `page`) -}}{{- print " post" -}}{{- end -}}">
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index c71f66d..7109cdb 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,15 +1,31 @@
 {{- define "main" }}
+{{- $isNewsletter := eq .Type "newsletter" }}
 
 <article class="post-single">
   <header class="post-header">
     {{ partial "breadcrumbs.html" . }}
+
+    {{- if $isNewsletter -}}
+      <a class="newsletter-brand" href="{{ .Parent.Permalink }}">
+        <div class="icon">＠</div>
+        <div class="name">{{ .Param "newsletterName" }}</div>
+        <div class="issueno">#{{ .Param "issueno" }}</div>
+        <div class="arrow">
+          <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
+        </div>
+      </a>
+    {{- end -}}
     <h1 class="post-title">
-      {{ .Title }}
-      {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
+      {{- if $isNewsletter -}}
+        {{- replace .Title (.Param "titlePrefix") (.Param "titlePrefixReplace") -}}
+      {{- else -}}
+        {{- .Title -}}
+      {{- end -}}
+      {{- if .Draft -}}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end -}}
     </h1>
     {{- if .Description }}
     <div class="post-description">
-      {{ .Description }}
+      {{- .Description -}}
     </div>
     {{- end }}
     {{- if not (.Param "hideMeta") }}
diff --git a/layouts/newsletter/section.html b/layouts/newsletter/section.html
index 07aab27..344810a 100644
--- a/layouts/newsletter/section.html
+++ b/layouts/newsletter/section.html
@@ -1,11 +1,10 @@
 {{/* section is AKA list */}}
-{{- define "bodyClass" }} theme-newsletter{{- end }}
 
 {{- define "main" }}
-<div class="main-logo">@</div>
+<div class="main-logo">＠</div>
 
 <header class="page-header">
-  <h1>{{ .Title }} Newsletter</h1>
+  <h1>{{ .Title }}</h1>
   {{- with .Param "archivesSlug" }}
   <div>
     <a href="{{ $.RelPermalink }}{{ . }}/">Archives</a>