diff --git a/components/navigation/BlogPostCard.stories.tsx b/components/navigation/BlogPostCard.stories.tsx
new file mode 100644
index 00000000000..47d57094fa1
--- /dev/null
+++ b/components/navigation/BlogPostCard.stories.tsx
@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import BlogPostItem from './BlogPostItem';
+
+const meta: Meta<typeof BlogPostItem> = {
+  title: 'Components/BlogPostCard',
+  component: BlogPostItem,
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          maxWidth: '400px'
+        }}
+      >
+        <Story />
+      </div>
+    )
+  ]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BlogPostItem>;
+
+export const BlogPostCard: Story = {
+  args: {
+    post: {
+      title: 'Blog Post Title',
+      date: '2024-07-28T06:30:00.000Z',
+      type: 'Blog Category',
+      tags: ['Tag 1', 'Tag 2'],
+      cover: '/img/posts/release-notes-3.0.0/cover.webp',
+      authors: [
+        {
+          name: 'Author Name',
+          photo: '/favicon-194x194.png',
+          link: 'https://x.com/AsyncAPISpec',
+          byline: 'Author Byline'
+        }
+      ],
+      excerpt: 'This is a blog post excerpt.',
+      toc: [
+        {
+          content: 'Table of Content 1',
+          slug: 'table-of-content-1',
+          lvl: 1,
+          i: 0,
+          seen: 0
+        },
+        {
+          content: 'Table of Content 2',
+          slug: 'table-of-content-2',
+          lvl: 2,
+          i: 1,
+          seen: 0
+        },
+        {
+          content: 'Table of Content 3',
+          slug: 'table-of-content-3',
+          lvl: 2,
+          i: 2,
+          seen: 0
+        }
+      ],
+      readingTime: 22,
+      sectionSlug: '/blog-section-slug',
+      sectionWeight: 0,
+      id: 'pages/blog/blog-post-slug',
+      isIndex: false,
+      slug: '/blog-post-slug',
+      featured: false
+    }
+  }
+};
diff --git a/components/tools/FiltersDropdown.tsx b/components/tools/FiltersDropdown.tsx
index fbf2d5c7a20..4acdf84b3f1 100644
--- a/components/tools/FiltersDropdown.tsx
+++ b/components/tools/FiltersDropdown.tsx
@@ -34,7 +34,9 @@ export default function FiltersDropdown({
 
   return (
     <div
-      className={twMerge(`max-w-lg flex gap-2 flex-wrap p-2 duration-200 delay-150 ${className}`)}
+      className={twMerge(
+        `max-w-lg flex flex-col max-h-[40vh] gap-1 overflow-y-auto p-2 px-0 duration-200 delay-150 bg-gray-400 ${className}`
+      )}
       data-testid='FiltersDropdown-div'
     >
       {dataList.map((data, index) => {
@@ -44,7 +46,7 @@ export default function FiltersDropdown({
           <div
             key={index}
             className={twMerge(
-              `border border-secondary-600 text-secondary-600 p-1 pb-0 rounded-2xl flex gap-1 cursor-pointer items-start ${checked ? 'bg-secondary-600 text-white' : ''}`
+              `hover:bg-gray-500 text-black p-1 gap-1 flex cursor-pointer items-start ${checked ? 'bg-gray-600 text-white' : ''}`
             )}
             onClick={(event) => handleClickOption(event, data.name)}
           >
diff --git a/public/img/illustrations/icons/CheckedIcon.svg b/public/img/illustrations/icons/CheckedIcon.svg
index 591b807daf7..50697b1ac6e 100644
--- a/public/img/illustrations/icons/CheckedIcon.svg
+++ b/public/img/illustrations/icons/CheckedIcon.svg
@@ -2,7 +2,7 @@
 <circle cx="6" cy="6.5" r="4" fill="white"/>
 <circle cx="6" cy="6.5" r="5.5" stroke="white"/>
 <g clip-path="url(#clip0_827_2273)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.893 4.85427C8.01692 4.96125 8.03599 5.155 7.93559 5.28704L5.79656 8.10022C5.7446 8.16855 5.66769 8.20993 5.58524 8.2139C5.50278 8.21787 5.42268 8.18406 5.36514 8.12101L4.08172 6.71442C3.97055 6.59258 3.97313 6.39778 4.08747 6.27932C4.20182 6.16087 4.38464 6.16361 4.49582 6.28545L5.55254 7.44359L7.48685 4.89965C7.58724 4.76761 7.76909 4.7473 7.893 4.85427Z" fill="#0B81C4" stroke="#0B81C4" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.893 4.85427C8.01692 4.96125 8.03599 5.155 7.93559 5.28704L5.79656 8.10022C5.7446 8.16855 5.66769 8.20993 5.58524 8.2139C5.50278 8.21787 5.42268 8.18406 5.36514 8.12101L4.08172 6.71442C3.97055 6.59258 3.97313 6.39778 4.08747 6.27932C4.20182 6.16087 4.38464 6.16361 4.49582 6.28545L5.55254 7.44359L7.48685 4.89965C7.58724 4.76761 7.76909 4.7473 7.893 4.85427Z" fill="#636363" stroke="#636363" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 <defs>
 <clipPath id="clip0_827_2273">
diff --git a/public/img/illustrations/icons/UncheckedIcon.svg b/public/img/illustrations/icons/UncheckedIcon.svg
index d57fb6e3885..57d4281a6c9 100644
--- a/public/img/illustrations/icons/UncheckedIcon.svg
+++ b/public/img/illustrations/icons/UncheckedIcon.svg
@@ -1,3 +1,3 @@
 <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="6" cy="6.5" r="5.5" stroke="#0B81C4"/>
+<circle cx="6" cy="6.5" r="5.5" stroke="#636363"/>
 </svg>