diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
index 244ec2d6..c8815cf9 100644
--- a/assets/css/_page/_single.scss
+++ b/assets/css/_page/_single.scss
@@ -1,5 +1,6 @@
 @import '../_partials/_single/toc';
 @import '../_partials/_single/fixit-decryptor';
+@import '../_partials/_single/collections';
 
 .single {
   .single-title {
@@ -441,7 +442,6 @@
   }
 
   @import '../_partials/_single/reward';
-  @import '../_partials/_single/collection-card';
   @import '../_partials/_single/footer';
   @import '../_partials/_single/comment';
 }
diff --git a/assets/css/_partials/_single/_collection-card.scss b/assets/css/_partials/_single/_collection-card.scss
deleted file mode 100644
index db12fe12..00000000
--- a/assets/css/_partials/_single/_collection-card.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-.collection-card {
-  font-size: 0.875rem;
-  background-color: darken($global-background-color, 3%);
-  margin-top: 0.5rem;
-  padding: 1rem 1.25rem;
-  position: relative;
-  @include border-radius($global-border-radius * 1.5);
-  @include user-select(none);
-
-  [data-theme='dark'] & {
-    background-color: lighten($global-background-color-dark, 3%);
-  }
-
-  &:has(.collection-nav-item:nth-child(2))::before {
-    content: '';
-    position: absolute;
-    left: 50%;
-    bottom: 0.75rem;
-    width: 1px;
-    height: 2rem;
-    background: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0.03),
-      rgba(0, 0, 0, 0.05) 50%,
-      rgba(0, 0, 0, 0.03) 100%
-    );
-
-    [data-theme='dark'] & {
-      background: linear-gradient(
-        to bottom,
-        rgba(255, 255, 255, 0.03),
-        rgba(255, 255, 255, 0.05) 50%,
-        rgba(255, 255, 255, 0.03) 100%
-      );
-    }
-  }
-
-  .collection-title {
-    @include link(false, false);
-  }
-
-  .collection-nav {
-    display: flex;
-    justify-content: space-between;
-    gap: 1rem;
-
-    &:not(:empty) {
-      margin-top: 0.5rem;
-    }
-
-    .collection-nav-item {
-      flex-grow: 1;
-      max-width: 50%;
-      font-weight: 500;
-      display: flex;
-      align-items: center;
-      @include transition(all 0.3s ease-out);
-
-      &:only-child {
-        max-width: 100%;
-      }
-
-      i {
-        flex-shrink: 0;
-      }
-
-      span {
-        flex-grow: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      &[rel='next'] {
-        text-align: right;
-      }
-
-      &[rel='prev']:hover {
-        @include transform(translateX(-4px));
-      }
-
-      &[rel='next']:hover {
-        @include transform(translateX(4px));
-      }
-    }
-  }
-}
diff --git a/assets/css/_partials/_single/_collections.scss b/assets/css/_partials/_single/_collections.scss
new file mode 100644
index 00000000..1140f635
--- /dev/null
+++ b/assets/css/_partials/_single/_collections.scss
@@ -0,0 +1,185 @@
+// Collection Navigation
+.collection-card {
+  font-size: 0.875rem;
+  background-color: darken($global-background-color, 3%);
+  margin-top: 0.5rem;
+  padding: 1rem 1.25rem;
+  position: relative;
+  @include border-radius($global-border-radius * 1.5);
+  @include user-select(none);
+
+  [data-theme='dark'] & {
+    background-color: lighten($global-background-color-dark, 3%);
+  }
+
+  &:has(.collection-nav-item:nth-child(2))::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: 0.75rem;
+    width: 1px;
+    height: 2rem;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.03) 100%);
+
+    [data-theme='dark'] & {
+      background: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0.03),
+        rgba(255, 255, 255, 0.05) 50%,
+        rgba(255, 255, 255, 0.03) 100%
+      );
+    }
+  }
+
+  .collection-title {
+    @include link(false, false);
+  }
+
+  .collection-nav {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+
+    &:not(:empty) {
+      margin-top: 0.5rem;
+    }
+
+    .collection-nav-item {
+      flex-grow: 1;
+      max-width: 50%;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      @include transition(all 0.3s ease-out);
+
+      &:only-child {
+        max-width: 100%;
+      }
+
+      i {
+        flex-shrink: 0;
+      }
+
+      span {
+        flex-grow: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &[rel='next'] {
+        text-align: right;
+      }
+
+      &[rel='prev']:hover {
+        @include transform(translateX(-4px));
+      }
+
+      &[rel='next']:hover {
+        @include transform(translateX(4px));
+      }
+    }
+  }
+}
+
+// Collection List
+.collection-details {
+
+  &:not(:last-of-type) {
+    margin-bottom: 0.5rem;
+  }
+
+  &.open {
+    .collection-summary {
+      background-color: darken($global-background-color, 4%);
+
+      [data-theme='dark'] & {
+        background-color: lighten($global-background-color-dark, 4%);
+      }
+    }
+  }
+
+  .collection-summary {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.2rem 0.5rem;
+    background-color: darken($global-background-color, 3%);
+
+    [data-theme='dark'] & {
+      background-color: lighten($global-background-color-dark, 3%);
+    }
+
+    .details-icon {
+      flex-shrink: 0;
+    }
+
+    .collection-name {
+      font-weight: bold;
+    }
+
+    @include user-select(none);
+  }
+
+  .collection-content {
+    font-size: $toc-content-font-size;
+    background-color: darken($global-background-color, 2%);
+
+    [data-theme='dark'] & {
+      background-color: lighten($global-background-color-dark, 2%);
+    }
+
+    .collection-list {
+      margin: 0;
+      padding-inline: 1.6rem 0.8rem;
+      padding-block: 0.4rem;
+      text-indent: -0.8rem;
+      list-style: none;
+      overflow-y: scroll;
+      max-height: 60vh;
+
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+
+      .collection-item > a::before,
+      .collection-item > span::before {
+        content: '|';
+        font-weight: 600;
+        margin-right: 0.5rem;
+        position: relative;
+        bottom: 2px;
+        color: $single-link-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-color-dark;
+        }
+      }
+
+      .active {
+        font-weight: bold;
+        color: $single-link-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-color-dark;
+        }
+      }
+    }
+
+    .collection-nav-simple {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      background-color: darken($global-background-color, 3%);
+
+      [data-theme='dark'] & {
+        background-color: lighten($global-background-color-dark, 3%);
+      }
+
+      > i.collection-nav-item {
+        cursor: not-allowed;
+      }
+    }
+  }
+}
diff --git a/assets/css/_partials/_single/_toc.scss b/assets/css/_partials/_single/_toc.scss
index d5044831..4d9e7e5f 100644
--- a/assets/css/_partials/_single/_toc.scss
+++ b/assets/css/_partials/_single/_toc.scss
@@ -17,6 +17,8 @@
         content: '|';
         font-weight: bolder;
         margin-right: 0.5rem;
+        position: relative;
+        bottom: 2px;
         color: $single-link-color;
 
         [data-theme='dark'] & {
@@ -71,6 +73,8 @@
       content: '|';
       font-weight: bolder;
       margin-right: 0.5rem;
+      position: relative;
+      bottom: 2px;
       color: $global-border-color;
 
       [data-theme='dark'] & {
diff --git a/assets/js/theme.js b/assets/js/theme.js
index 87ba815c..2b3161f6 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -482,7 +482,7 @@ class FixIt {
       $tocCore.parentElement.replaceChild($newTocCore, $tocCore);
       $tocCore = $newTocCore;
     }
-    if (document.getElementById('toc-static').dataset.kept === true || this.util.isTocStatic()) {
+    if (document.getElementById('toc-static').dataset.kept === 'true' || this.util.isTocStatic()) {
       const $tocContentStatic = document.getElementById('toc-content-static');
       if ($tocCore.parentElement !== $tocContentStatic) {
         $tocCore.parentElement.removeChild($tocCore);
diff --git a/hugo.toml b/hugo.toml
index fad26691..10f63327 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -428,6 +428,10 @@ enableEmoji = true
     endFlag = ""
     # FixIt 0.2.18 | NEW whether to enable instant.page
     instantPage = false
+    # FixIt 0.3.0 | NEW whether to enable collection list at the sidebar
+    collectionList = false
+    # FixIt 0.3.0 | NEW whether to enable collection navigation at the end of the post
+    collectionNavigation = false
 
     # FixIt 0.2.15 | NEW Repost config
     [params.page.repost]
diff --git a/layouts/partials/single/collection-list.html b/layouts/partials/single/collection-list.html
new file mode 100644
index 00000000..3ca7332b
--- /dev/null
+++ b/layouts/partials/single/collection-list.html
@@ -0,0 +1,53 @@
+{{- /* Collection List */ -}}
+{{- $params := .Scratch.Get "params" -}}
+
+{{- if .Params.collections | and $params.collectionList -}}
+  {{- range .Params.collections -}}
+    {{- $term := $.Site.GetPage "/collections" . -}}
+    {{- $pages := $term.Pages.ByDate -}}
+    {{- $open := eq (index $.Params.collections 0) . -}}
+    {{- $currentKey := 0 -}}
+
+    <div class="details collection-details{{ if $open }} open{{ end }}">
+      <div class="details-summary collection-summary">
+        <span class="collection-title">
+          {{ dict "Class" "fa-solid fa-layer-group fa-fw" | partial "plugin/icon.html" }}
+          <span class="collection-name">{{ T "collections" }}・{{ $term.LinkTitle }}</span>
+          <span class="text-secondary">{{ $pages.Len }}</span>
+        </span>
+        {{- dict "Class" "details-icon fa-solid fa-angle-right fa-fw" | partial "plugin/icon.html" -}}
+      </div>
+      <div class="details-content collection-content">
+        <nav>
+          <ul class="collection-list">
+            {{- range $key, $value := $pages -}}
+              {{- if $value.LinkTitle | eq $.LinkTitle -}}
+                {{- $currentKey = $key | add 1 -}}
+                <li class="collection-item"><span class="active" title="{{ $value.LinkTitle }}">{{ $value.LinkTitle }}</span></li>
+              {{- else }}
+                <li class="collection-item"><a href="{{ $value.RelPermalink }}" title="{{ $value.LinkTitle }}">{{ $value.LinkTitle }}</a></li>
+              {{- end }}
+            {{- end -}}
+          </ul>
+          <div class="collection-nav-simple">
+            {{- with $pages.Next $ -}}
+              <a href="{{ .RelPermalink }}" class="collection-nav-item" rel="prev" title="{{ .LinkTitle }}">
+                {{- dict "Class" "fa-solid fa-angle-left fa-fw" | partial "plugin/icon.html" -}}
+              </a>
+            {{- else -}}
+              {{- dict "Class" "fa-solid fa-angle-left fa-fw collection-nav-item text-secondary" | partial "plugin/icon.html" -}}
+            {{- end -}}
+            <span class="text-secondary">{{ $currentKey }}/{{ $pages.Len }}</span>
+            {{- with $pages.Prev $ -}}
+              <a href="{{ .RelPermalink }}" class="collection-nav-item" rel="next" title="{{ .LinkTitle }}">
+                {{- dict "Class" "fa-solid fa-angle-right fa-fw" | partial "plugin/icon.html" -}}
+              </a>
+            {{- else -}}
+              {{- dict "Class" "fa-solid fa-angle-right fa-fw collection-nav-item text-secondary" | partial "plugin/icon.html" -}}
+            {{- end -}}
+          </div>
+        </nav>
+      </div>
+    </div>
+  {{- end -}}
+{{- end -}}
diff --git a/layouts/posts/single.html b/layouts/posts/single.html
index 8680793f..30ab6c60 100644
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -7,7 +7,7 @@
 
   <aside class="aside-collection" aria-label="{{ T "collections" }}">
     {{- /* Collection List */ -}}
-    {{/*  {{- partial "single/collection-list.html" . -}}  */}}
+    {{- partial "single/collection-list.html" . -}}
      {{- /* Custom part for aside */ -}}
     {{- partial (.Scratch.Get "customFilePath").aside . -}}
   </aside>