diff --git a/package.json b/package.json
index b763418..3dd0c93 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@damillora/shian",
     "description": "Common component library for nanao.moe",
-    "version": "0.2.2",
+    "version": "0.3.0",
     "license": "MIT",
     "author": {
         "email": "developer@damillora.com"
diff --git a/src/sass/app.scss b/src/sass/app.scss
index 25e16b1..fc3fffd 100644
--- a/src/sass/app.scss
+++ b/src/sass/app.scss
@@ -12,6 +12,10 @@
 @import './components/gallery';
 @import './components/mediaitem';
 @import './components/projectitem';
+@import './components/postcard';
+@import './components/postheader';
+@import './components/postlist';
+@import './components/postnavigator';
 @import './components/gameitem';
 @import './components/copyarea';
 @import './components/floatingyuriko';
diff --git a/src/sass/components/_postcard.scss b/src/sass/components/_postcard.scss
new file mode 100644
index 0000000..53d8941
--- /dev/null
+++ b/src/sass/components/_postcard.scss
@@ -0,0 +1,127 @@
+.post-card {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 1rem;
+  @include transition;
+
+  @include screen(md) {
+    display: flex;
+    flex-direction: row;
+  }
+  &__image {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    @include screen(md) {
+      width: 35vw;
+      min-width: 300px;
+      max-width: 450px;
+    }
+    img {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  &__image::after {
+    display: block;
+    content: '';
+    padding-bottom: 56.25%;
+  }
+  &__info {
+    @include screen(md) {
+      padding-left: 1rem;
+    }
+  }
+  
+  &__tag-row {
+    padding-top: 1rem;
+    @include screen(md) {
+      padding-top: 0;
+    }
+
+    * {
+      display: inline-block;
+      padding-right: 0.25rem;
+    }
+  }
+  &__tag-color {
+    display: inline-block;
+    border-radius: 9999px;
+    vertical-align: text-bottom;
+    height: 1rem;
+    width: 1rem;
+  }
+  &__tag-name {
+    font-size: $text-xs;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  &__paywall {
+    font-size: $text-xs;
+    &:hover {
+      text-decoration: underline;
+    }
+    color: var(--accent-color);
+  }
+
+  &__title {
+    @include transition;
+    color: var(--accent-color);
+    font-size: $text-xl;
+    font-weight: lighter;
+
+    @include screen(md) {
+      font-size: $text-2xl;
+    }
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__time {
+    font-size: $text-xs;
+  }
+
+  &__author-list {
+    font-size: $text-xs;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    @include my(0.5rem);
+    @include py(0.5rem);
+  }
+  &__author-images {
+    display: flex;
+    flex-direction: row;
+  }
+  &__author-image {
+    height: 2rem;
+    margin-left: 0.25rem;
+    margin-right: 0.75rem;
+    
+    img {
+      border-radius: 9999px;
+      height: 100%;
+    }
+  }
+  &__author-names {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    justify-content: center;
+
+    a:hover {
+      text-decoration: underline;
+    }
+  }
+  &__excerpt {
+      margin-top: 0.5rem;
+      margin-bottom: 1rem;
+      font-size: $text-sm;
+  }
+}
diff --git a/src/sass/components/_postheader.scss b/src/sass/components/_postheader.scss
new file mode 100644
index 0000000..d976b2a
--- /dev/null
+++ b/src/sass/components/_postheader.scss
@@ -0,0 +1,95 @@
+.post-header {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    @include my(0.5rem);
+  }
+  &__tag-row {
+    padding-top: 1rem;
+    @include screen(md) {
+      padding-top: 0;
+    }
+
+    * {
+      display: inline-block;
+      padding-right: 0.25rem;
+    }
+  }
+
+  &__tag-heading {
+    display: flex;
+    flex-direction: row;
+    h1 {
+        margin-left: 0.5rem;
+    }
+  }
+  &__tag-heading-color {
+    display: inline-block;
+    border-radius: 9999px;
+    vertical-align: text-bottom;
+    height: 4rem;
+    width: 4rem;
+  }
+
+  &__tag-color {
+    display: inline-block;
+    border-radius: 9999px;
+    vertical-align: text-bottom;
+    height: 1rem;
+    width: 1rem;
+  }
+  &__tag-name {
+    font-size: $text-sm;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  &__paywall {
+    font-size: $text-sm;
+    &:hover {
+      text-decoration: underline;
+    }
+    color: var(--accent-color);
+  }
+
+  &__time {
+    font-size: $text-sm;
+  }
+
+  &__author-list {
+    font-size: $text-sm;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    @include my(0.5rem);
+    @include py(0.5rem);
+  }
+  &__author-images {
+    display: flex;
+    flex-direction: row;
+  }
+  &__author-image {
+    height: 2rem;
+    margin-left: 0.25rem;
+    margin-right: 0.75rem;
+
+    img {
+      border-radius: 9999px;
+      height: 100%;
+    }
+  }
+  &__author-names {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    justify-content: center;
+
+    a:hover {
+      text-decoration: underline;
+    }
+  }
+}
diff --git a/src/sass/components/_postlist.scss b/src/sass/components/_postlist.scss
new file mode 100644
index 0000000..77b38a3
--- /dev/null
+++ b/src/sass/components/_postlist.scss
@@ -0,0 +1,6 @@
+.post-list {
+    @include my(2rem);
+    display: grid;
+    grid-template-columns: 1fr;
+    row-gap: 1rem;
+}
\ No newline at end of file
diff --git a/src/sass/components/_postnavigator.scss b/src/sass/components/_postnavigator.scss
new file mode 100644
index 0000000..79fc3b6
--- /dev/null
+++ b/src/sass/components/_postnavigator.scss
@@ -0,0 +1,84 @@
+.post-navigator {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  @include screen(md) {
+    flex-direction: row;
+  }
+  a:hover {
+    color: var(--highlight-color);
+    text-decoration: none;
+  }
+  &__nav {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    padding: 1rem;
+    @include transition;
+
+    @include screen(md) {
+      width: 33.3333%;
+    }
+
+    &:hover {
+      background-color: var(--highlight-bg-color);
+      text-decoration: none;
+    }
+    &:hover &__icon {
+      color: var(--highlight-color);
+    }
+    &:hover &__nav-title {
+      color: var(--highlight-color);
+    }
+
+    &--previous-post {
+      justify-content: start;
+
+      @include screen(md) {
+        justify-content: flex-end;
+      }
+    }
+    &--next-post {
+      justify-content: flex-end;
+
+      @include screen(md) {
+        justify-content: start;
+      }
+    }
+  }
+
+  &__icon {
+    // mr-4 text-yuika-blue-700 text-2xl group-hover:text-white
+    margin-right: 1rem;
+    color: var(--accent-color);
+    font-size: $text-2xl;
+  }
+
+  &__nav-content {
+    display: flex;
+    flex-direction: column;
+    p {
+      margin: 0;
+    }
+
+    &--previous-post {
+      align-items: start;
+
+      @include screen(md) {
+        align-items: flex-end;
+      }
+    }
+    &--next-post {
+      align-items: flex-end;
+
+      @include screen(md) {
+        align-items: start;
+      }
+    }
+  }
+  &__nav-title {
+    font-size: $text-xl;
+    color: var(--accent-color);
+  }
+}
diff --git a/src/sass/utilities/_spacing.scss b/src/sass/utilities/_spacing.scss
index 5a3b9bb..0b3aa4f 100644
--- a/src/sass/utilities/_spacing.scss
+++ b/src/sass/utilities/_spacing.scss
@@ -20,6 +20,8 @@
 
 .container {
     width: 100%;
+    margin-left: auto;
+    margin-right: auto;
     @include screen(sm) {
         max-width: 640px;
     }