diff --git a/next/public/images/category/x.svg b/next/public/images/category/x.svg
new file mode 100644
index 0000000..524c6b3
--- /dev/null
+++ b/next/public/images/category/x.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg fill="#fff" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18.8,16l5.5-5.5c0.8-0.8,0.8-2,0-2.8l0,0C24,7.3,23.5,7,23,7c-0.5,0-1,0.2-1.4,0.6L16,13.2l-5.5-5.5  c-0.8-0.8-2.1-0.8-2.8,0C7.3,8,7,8.5,7,9.1s0.2,1,0.6,1.4l5.5,5.5l-5.5,5.5C7.3,21.9,7,22.4,7,23c0,0.5,0.2,1,0.6,1.4  C8,24.8,8.5,25,9,25c0.5,0,1-0.2,1.4-0.6l5.5-5.5l5.5,5.5c0.8,0.8,2.1,0.8,2.8,0c0.8-0.8,0.8-2.1,0-2.8L18.8,16z"/>
+</svg>
\ No newline at end of file
diff --git a/next/public/images/search/icon.svg b/next/public/images/search/icon.svg
new file mode 100644
index 0000000..4f492ad
--- /dev/null
+++ b/next/public/images/search/icon.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M17.0392 15.6244C18.2714 14.084 19.0082 12.1301 19.0082 10.0041C19.0082 5.03127 14.9769 1 10.0041 1C5.03127 1 1 5.03127 1 10.0041C1 14.9769 5.03127 19.0082 10.0041 19.0082C12.1301 19.0082 14.084 18.2714 15.6244 17.0392L21.2921 22.707C21.6828 23.0977 22.3163 23.0977 22.707 22.707C23.0977 22.3163 23.0977 21.6828 22.707 21.2921L17.0392 15.6244ZM10.0041 17.0173C6.1308 17.0173 2.99087 13.8774 2.99087 10.0041C2.99087 6.1308 6.1308 2.99087 10.0041 2.99087C13.8774 2.99087 17.0173 6.1308 17.0173 10.0041C17.0173 13.8774 13.8774 17.0173 10.0041 17.0173Z"
+          fill="#8c8c8c"/>
+</svg>
\ No newline at end of file
diff --git a/next/src/app/blog/(search-bar)/SearchBar.tsx b/next/src/app/blog/(search-bar)/SearchBar.tsx
new file mode 100644
index 0000000..5ef6920
--- /dev/null
+++ b/next/src/app/blog/(search-bar)/SearchBar.tsx
@@ -0,0 +1,124 @@
+'use client';
+import React, { FunctionComponent, useEffect, useRef, useState } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useDebounce } from '@/app/blog/(search-bar)/useDebounce';
+import type { PostsFetchResponse } from '@/components/blog-post-item/types';
+import { db } from '@/scripts/fetch';
+import styles from './styles.module.scss';
+
+const SearchBar: FunctionComponent = () => {
+  const router = useRouter();
+
+  const [isActive, setFormActive] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<PostsFetchResponse['data'] | null>(null);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const debouncedSearchQuery = useDebounce(searchQuery, 500);
+
+  const fetchPosts = async () => {
+    const posts = await db.getPostsBySearchTerm(debouncedSearchQuery);
+    setSearchResults(posts.data);
+  };
+
+  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {
+    const { currentTarget, relatedTarget } = e;
+
+    if (currentTarget.contains(relatedTarget)) {
+      return;
+    }
+
+    setFormActive(false);
+  };
+
+  const handleEscKey = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      searchInputRef.current?.blur();
+      setSearchQuery('');
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+    setFormActive(true);
+  };
+
+  // Keyboard navigation
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+
+      if (!searchResults) {
+        return;
+      }
+
+      setFocusedIndex((prevIndex) => Math.min(prevIndex + 1, searchResults?.length - 1 ?? 0));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+
+      setFocusedIndex((prevIndex) => Math.max(prevIndex - 1, 0));
+    } else if (e.key === 'Enter' && focusedIndex !== -1) {
+      const postToGoTo = searchResults?.find((post, index) => focusedIndex === index);
+
+      if (!postToGoTo) {
+        return;
+      }
+
+      router.push(`/blog/${postToGoTo.attributes.slug}`);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleEscKey);
+
+    return () => {
+      document.removeEventListener('keydown', handleEscKey);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!debouncedSearchQuery || debouncedSearchQuery.length < 2) {
+      setSearchResults([]);
+      return;
+    }
+
+    fetchPosts();
+  }, [debouncedSearchQuery]);
+
+  return (
+    <section className={styles.container} onBlur={handleBlur} onKeyDown={handleKeyDown}>
+      <label className={styles.label}>
+        <Image src={'/images/search/icon.svg'}
+               priority
+               alt={'Search bar'}
+               width={16}
+               height={16}
+               className={styles.image}
+        />
+        <input className={styles.input}
+               type="text"
+               placeholder={'Search blog posts'}
+               onClick={() => setFormActive(true)}
+               onFocus={() => setFormActive(true)}
+               ref={searchInputRef}
+               value={searchQuery}
+               onChange={handleChange}
+        />
+      </label>
+      {Boolean(searchResults?.length && isActive) && (
+        <ul className={styles.results}>
+          {searchResults?.map((post, index) => (
+            <li key={post.id} className={index === focusedIndex ? styles.focused : ''}>
+              <Link href={`/blog/${post.attributes.slug}`}>{post.attributes.title}</Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+};
+
+export default SearchBar;
\ No newline at end of file
diff --git a/next/src/app/blog/(search-bar)/styles.module.scss b/next/src/app/blog/(search-bar)/styles.module.scss
new file mode 100644
index 0000000..75ac984
--- /dev/null
+++ b/next/src/app/blog/(search-bar)/styles.module.scss
@@ -0,0 +1,64 @@
+@import '@/styles/vars';
+
+.container {
+  display: flex;
+  width: 100%;
+  background-color: $color-background;
+  margin-bottom: 2rem;
+  position: relative;
+
+  .label {
+    height: 36px;
+    border-radius: .35rem;
+    border: 1px solid darken($color-text, 40%);
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding-inline: .5rem;
+
+    .input {
+      background-color: inherit;
+      outline: none;
+      border: none;
+      height: 100%;
+      width: 100%;
+      padding-left: .3rem;
+      color: darken($color-text, 40%);
+      font-weight: 300;
+
+      &::placeholder {
+        color: darken($color-text, 60%);
+      }
+    }
+  }
+
+  .results {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    background-color: $color-background;
+    border-radius: .35rem;
+    border: 1px solid darken($color-text, 40%);
+    width: 100%;
+    position: absolute;
+    translate: 0 100%;
+    bottom: -1rem;
+    left: 0;
+    padding-block: .5rem;
+
+    li {
+      width: 100%;
+
+      a {
+        display: flex;
+        width: 100%;
+        padding-inline: 1rem;
+        padding-block: .8rem;
+      }
+
+      &.focused, &:hover {
+        background-color: lighten($color-background, 10%);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/next/src/app/blog/(search-bar)/useDebounce.tsx b/next/src/app/blog/(search-bar)/useDebounce.tsx
new file mode 100644
index 0000000..b1c2493
--- /dev/null
+++ b/next/src/app/blog/(search-bar)/useDebounce.tsx
@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+export const useDebounce = <T, >(value: T, delay: number): T => {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]); // Only re-call effect if value or delay changes
+
+  return debouncedValue;
+};
diff --git a/next/src/app/blog/page.tsx b/next/src/app/blog/page.tsx
index bb103b5..a75f8cf 100644
--- a/next/src/app/blog/page.tsx
+++ b/next/src/app/blog/page.tsx
@@ -5,6 +5,7 @@ import BlogPostItem from '@/components/blog-post-item/BlogPostItem';
 import React from 'react';
 import { db } from '@/scripts/fetch';
 import Categories from '@/components/categories/Categories';
+import SearchBar from '@/app/blog/(search-bar)/SearchBar';
 
 interface Props {
   searchParams: {
@@ -20,6 +21,7 @@ const Page: NextPage<Props> = async ({ searchParams: { category } }) => {
     <main>
       <section className={`${gStyles.section} ${gStyles.paddingInline}`}>
         <h1 className={gStyles.pageHeading}>Blog</h1>
+        <SearchBar />
         <Categories categories={categories.data} activeCategory={category} />
         <div className={`${gStyles.blogs} ${styles.blogs}`}>
           {posts.data.map((post) => <BlogPostItem post={post} key={post.id} />)}
diff --git a/next/src/components/categories/category-link/CategoryLink.tsx b/next/src/components/categories/category-link/CategoryLink.tsx
index 18d09bd..f291f0e 100644
--- a/next/src/components/categories/category-link/CategoryLink.tsx
+++ b/next/src/components/categories/category-link/CategoryLink.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import Image from 'next/image';
 import React, { FunctionComponent } from 'react';
 import styles from './styles.module.scss';
 import { Category } from '@/components/categories/types';
@@ -11,11 +12,22 @@ interface Props {
 const CategoryLink: FunctionComponent<Props> = ({ activeCategory, name }) => {
   const isActiveCategory = name === activeCategory;
 
-  const setActiveCategory = isActiveCategory ? styles.active : '';
+  const setActiveClassName = isActiveCategory ? styles.active : '';
   const setHref = isActiveCategory ? '/blog' : `/blog?category=${name}`;
 
   return (
-    <Link className={`${styles.link} ${setActiveCategory}`} href={setHref}>#{name}</Link>
+    <Link className={`${styles.link} ${setActiveClassName}`} href={setHref}>
+      <span className={styles.text}>#{name}</span>
+      {isActiveCategory && (
+        <Image src={'/images/category/x.svg'}
+               priority
+               alt={'Unselect tag'}
+               width={12}
+               height={12}
+               className={styles.cross}
+        />
+      )}
+    </Link>
   );
 };
 
diff --git a/next/src/components/categories/category-link/styles.module.scss b/next/src/components/categories/category-link/styles.module.scss
index 8329331..57868ce 100644
--- a/next/src/components/categories/category-link/styles.module.scss
+++ b/next/src/components/categories/category-link/styles.module.scss
@@ -1,9 +1,24 @@
 @import '@/styles/vars';
 
 .link {
-  color: darken($color-text, 40%);
+  display: flex;
+  align-items: center;
+
+  .text {
+    color: darken($color-text, 40%);
+  }
+
+  .cross {
+    margin-left: .2rem;
+  }
 
   &.active {
-    color: $color-accent;
+    border-radius: .35rem;
+    padding: .5rem;
+    background-color: darken($color-accent, 10%);
+
+    .text {
+      color: $color-text;
+    }
   }
 }
\ No newline at end of file
diff --git a/next/src/components/categories/styles.module.scss b/next/src/components/categories/styles.module.scss
index e150921..9675e5c 100644
--- a/next/src/components/categories/styles.module.scss
+++ b/next/src/components/categories/styles.module.scss
@@ -3,6 +3,7 @@
 .categories {
   margin-bottom: 3rem;
   justify-content: flex-start;
+  align-items: center;
   display: flex;
   gap: .5rem;
 }
\ No newline at end of file
diff --git a/next/src/scripts/fetch.ts b/next/src/scripts/fetch.ts
index 72113e1..b7f9032 100644
--- a/next/src/scripts/fetch.ts
+++ b/next/src/scripts/fetch.ts
@@ -66,6 +66,22 @@ export const db = {
     const queryString = qs.stringify(queryParams);
     return await fetchWrapper<PostsFetchResponse>(`/posts?${queryString}`);
   },
+  getPostsBySearchTerm: async (searchValue: string) => {
+    const queryParams = {
+      filters: {
+        title: {
+          $containsi: searchValue
+        }
+      },
+      pagination: {
+        pageSize: 10,
+        page: 1
+      }
+    };
+
+    const queryString = qs.stringify(queryParams);
+    return await fetchWrapper<PostsFetchResponse>(`/posts?${queryString}`);
+  },
   getPostSlugs: async () => {
     const queryParams = {
       fields: ['slug']
diff --git a/next/src/styles/about-and-blog-content.module.scss b/next/src/styles/about-and-blog-content.module.scss
index e1a5c5c..d07bb7c 100644
--- a/next/src/styles/about-and-blog-content.module.scss
+++ b/next/src/styles/about-and-blog-content.module.scss
@@ -1,4 +1,4 @@
-$margin-top-value: 1rem;
+$margin-top-value: 1.5rem;
 
 /**
 Typography, spacings and other styles for /about and /blog/[slug]
diff --git a/next/src/styles/global.scss b/next/src/styles/global.scss
index cc2ae57..3922e6d 100644
--- a/next/src/styles/global.scss
+++ b/next/src/styles/global.scss
@@ -4,6 +4,7 @@
   font-family: 'League Spartan', sans-serif;
   color: $color-text;
   text-decoration: none;
+  box-sizing: border-box;
 }
 
 body {