diff --git a/app/javascript/src/javascripts/post_search.js b/app/javascript/src/javascripts/post_search.js
index 78cb1a5ea..2b519ae98 100644
--- a/app/javascript/src/javascripts/post_search.js
+++ b/app/javascript/src/javascripts/post_search.js
@@ -39,14 +39,16 @@ PostSearch.initialize_input = function ($form) {
 
 PostSearch.initialize_wiki_preview = function ($preview) {
   let visible = LStorage.Posts.WikiExcerpt;
-  if (visible)
-    $preview.removeClass("hidden");
+  if (visible) $preview.addClass("open");
+  window.setTimeout(() => { // Disable the rollout on first load
+    $preview.removeClass("loading");
+  }, 250);
 
-  $($preview.find("a.wiki-excerpt-toggle")).on("click", (event) => {
+  $($preview.find("h3.wiki-excerpt-toggle")).on("click", (event) => {
     event.preventDefault();
 
     visible = !visible;
-    $preview.toggleClass("hidden", !visible);
+    $preview.toggleClass("open", visible);
     LStorage.Posts.WikiExcerpt = visible;
 
     return false;
diff --git a/app/javascript/src/styles/specific/post_index.scss b/app/javascript/src/styles/specific/post_index.scss
index 497115070..da8caad4f 100644
--- a/app/javascript/src/styles/specific/post_index.scss
+++ b/app/javascript/src/styles/specific/post_index.scss
@@ -34,82 +34,6 @@
       flex-flow: column;
       gap: 1em;
 
-      .wiki-excerpt {
-        display: flex;
-        flex-flow: column;
-        position: relative;
-        padding: 1em 1em 0;
-        gap: 0.5em;
-
-        background: var(--color-section);
-        max-width: 60em;
-
-        .wiki-excerpt-toggle {
-          position: absolute;
-          top: 0;
-          right: 0;
-          padding: 1em;
-          outline: none;
-
-          transition: transform 0.25s;
-
-          &::after {
-            @include font-awesome-icon;
-            content: unicode("f0d8");
-          }
-        }
-
-        .styled-dtext {
-          background: linear-gradient(to top, var(--color-section), var(--color-text));
-          -webkit-background-clip: text;
-          background-clip: text;
-          color: transparent;
-          max-height: 10em;
-          overflow: hidden;
-
-          transition: max-height 0.25s;
-
-          // Disable links
-          pointer-events: none;
-          cursor: unset;
-
-          a {
-            color: unset;
-            text-decoration: underline;
-            &::after { content: none; }
-          }
-        }
-
-        .wiki-excerpt-readmore {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          height: 3em;
-
-          // Makes the button appear in the middle of the animation
-          transition: visibility 0s 0.125s;
-
-          span {
-            padding: 0.5em 1em;
-            background: var(--color-section);
-            border-radius: 6px;
-          }
-        }
-
-        &.hidden{
-          .wiki-excerpt-toggle { transform: rotate(-90deg); }
-          .styled-dtext {
-            max-height: 0;
-          }
-          .wiki-excerpt-readmore { visibility: hidden; }
-        }
-      }
-
       .paginator {
         padding: 1em 0;
       }
@@ -147,3 +71,97 @@
     grid-template-rows: min-content 1fr;
   }
 }
+
+
+// FEATURES
+// Wiki Excerpt
+.wiki-excerpt {
+  display: flex;
+  flex-flow: column;
+  position: relative;
+
+  background: var(--color-section);
+
+  // header
+  h3 {
+    cursor: pointer;
+    padding: 0.5em 1em 0.5em 1.5em;
+
+    &::after {
+      @include font-awesome-icon;
+      content: unicode("f0da");
+
+      transition: transform 0.25s;
+
+      position: absolute;
+      top: 0;
+      left: 0;
+      padding: 0.5em;
+    }
+  }
+
+  // body
+  .styled-dtext {
+    background: linear-gradient(to top, var(--color-section), var(--color-text));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+
+    max-height: 0em;
+    max-width: 50rem;
+    overflow: hidden;
+    padding: 0 0.5em;
+
+    transition: max-height 0.25s;
+
+    // Disable links
+    pointer-events: none;
+    cursor: unset;
+
+    a {
+      color: unset;
+      text-decoration: underline;
+      &::after { content: none; }
+    }
+
+    p:last-child { margin-bottom: 0; }
+  }
+
+  // wiki link
+  .wiki-excerpt-readmore {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    height: 3em;
+    max-width: 50rem;
+    box-sizing: border-box;
+
+    // Makes the button appear in the middle of the animation
+    transition: visibility 0s 0.125s;
+    visibility: hidden;
+
+    span {
+      padding: 0.5em 1em;
+      background: var(--color-section);
+      border-radius: 6px;
+    }
+  }
+
+  &.open{
+    .wiki-excerpt-toggle::after { transform: rotate(90deg); }
+    .styled-dtext {
+      max-height: 10em;
+    }
+    .wiki-excerpt-readmore { visibility: visible; }
+  }
+
+  &.loading {
+    h3::after, .styled-dtext { transition: none; }
+  }
+}
diff --git a/app/views/posts/partials/index/_posts.html.erb b/app/views/posts/partials/index/_posts.html.erb
index ef5aa5225..64be54b83 100644
--- a/app/views/posts/partials/index/_posts.html.erb
+++ b/app/views/posts/partials/index/_posts.html.erb
@@ -1,8 +1,7 @@
 <div id="posts" class="post-index-gallery user-disable-cropped-<%= Danbooru.config.enable_image_cropping? && CurrentUser.user.disable_cropped_thumbnails? %>">
   <% if @wiki_text.present? %>
-    <section class="wiki-excerpt hidden">
-      <h3><%= @wiki_page.pretty_title %></h3>
-      <a href="" class="wiki-excerpt-toggle" role="button"></a>
+    <section class="wiki-excerpt loading">
+      <h3 role="button" class="wiki-excerpt-toggle"><%= @wiki_page.pretty_title %></h3>
       <%= format_text(@wiki_text, allow_color: true, max_thumbs: 0) %>
       <a href="<%= wiki_page_path(@wiki_page) %>" class="wiki-excerpt-readmore"><span>Read More</span></a>
     </section>