diff --git a/src/components/HeaderFilter.tsx b/src/components/HeaderFilter.tsx
new file mode 100644
index 0000000..ea1e866
--- /dev/null
+++ b/src/components/HeaderFilter.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import React, { FC, useEffect, useState, ReactNode } from "react";
+import Heading from "@/shared/Heading";
+import Nav from "@/shared/Nav";
+import NavItem from "@/shared/NavItem";
+import ButtonSecondary from "@/shared/ButtonSecondary";
+import { ArrowRightIcon } from "@heroicons/react/24/outline";
+
+export interface HeaderFilterProps {
+  tabActive: string;
+  tabs: string[];
+  heading: ReactNode;
+  subHeading?: ReactNode;
+  onClickTab?: (item: string) => void;
+}
+
+const HeaderFilter: FC<HeaderFilterProps> = ({
+  tabActive,
+  tabs,
+  subHeading = "",
+  heading = "Latest Articles 🎈",
+  onClickTab = () => {},
+}) => {
+  const [tabActiveState, setTabActiveState] = useState(tabActive);
+
+  useEffect(() => {
+    setTabActiveState(tabActive);
+  }, [tabActive]);
+
+  const handleClickTab = (item: string) => {
+    onClickTab(item);
+    setTabActiveState(item);
+  };
+
+  return (
+    <div className="flex flex-col mb-8 relative">
+      <Heading desc={subHeading}>{heading}</Heading>
+      <div className="flex items-center justify-between">
+        <Nav
+          className="sm:space-x-2"
+          containerClassName="relative flex w-full overflow-x-auto text-sm md:text-base hiddenScrollbar"
+        >
+          {tabs.map((item, index) => (
+            <NavItem
+              key={index}
+              isActive={tabActiveState === item}
+              onClick={() => handleClickTab(item)}
+            >
+              {item}
+            </NavItem>
+          ))}
+        </Nav>
+        <span className="hidden sm:block flex-shrink-0">
+          <ButtonSecondary href="/listing-stay" className="!leading-none">
+            <div className="flex items-center justify-center">
+              <span>View all</span>
+              <ArrowRightIcon className="w-5 h-5 ml-3" />
+            </div>
+          </ButtonSecondary>
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default HeaderFilter;