diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 622e375..c833e4e 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,7 +1,7 @@
 import { FaGithub } from "react-icons/fa";
 const Header = () => {
   return (
-    <div className="w-full h-14 flex items-center px-4 gap-2">
+    <div className="w-full py-4 flex items-center px-4 gap-4">
       <p className="text-gray-300">
         Built by -{" "}
         <a
@@ -23,8 +23,22 @@ const Header = () => {
       >
         <FaGithub className="text-2xl" />
       </a>
+      <ProductHuntBadge />
     </div>
   );
 };
 
 export default Header;
+
+export const ProductHuntBadge = () => (
+  <a
+    href="https://www.producthunt.com/posts/code-to-image-converter?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-code&#0045;to&#0045;image&#0045;converter"
+    target="_blank"
+  >
+    <img
+      src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=346242&theme=dark"
+      alt="Code&#0032;to&#0032;Image&#0032;Converter - Convert&#0032;your&#0032;code&#0032;snippets&#0032;to&#0032;beautiful&#0032;images | Product Hunt"
+      className="h-12"
+    />
+  </a>
+);