diff --git a/src/assets/img/bg-dark.png b/src/assets/img/bg-dark.png
new file mode 100644
index 0000000..35d1e26
Binary files /dev/null and b/src/assets/img/bg-dark.png differ
diff --git a/src/assets/img/bg-light.png b/src/assets/img/bg-light.png
new file mode 100644
index 0000000..91c6e81
Binary files /dev/null and b/src/assets/img/bg-light.png differ
diff --git a/src/assets/svg/Flag_of_Palestine.svg b/src/assets/svg/Flag_of_Palestine.svg
new file mode 100644
index 0000000..acf7e97
--- /dev/null
+++ b/src/assets/svg/Flag_of_Palestine.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 6 3"><rect fill="#009639" width="6" height="3"/><rect fill="#FFF" width="6" height="2"/><rect width="6" height="1"/><path fill="#ED2E38" d="M0,0l2,1.5L0,3Z"/></svg>
\ No newline at end of file
diff --git a/src/layouts/header.jsx b/src/layouts/header.jsx
index 6679558..2f147f9 100644
--- a/src/layouts/header.jsx
+++ b/src/layouts/header.jsx
@@ -1,13 +1,15 @@
 // Assets
 import githubLogoDark from '../assets/svg/github-mark-white.svg';
 import githubLogoLight from '../assets/svg/github-mark.svg';
+import palestineSvg from '@/assets/svg/Flag_of_Palestine.svg';
 
 // Components
-import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { ModeToggle } from '@/components/mode-toggle';
 import NavLinks from '@/components/ui/NavLinks';
+import { Button } from '@/components/ui/button'
 import { useTheme } from '@/components/theme-provider';
+import { useEffect } from 'react';
 
 function Header() {
   const { theme, setTheme } = useTheme();
@@ -21,7 +23,7 @@ function Header() {
   });
 
   return (
-    <header className="container px-6 py-3 flex justify-between items-center backdrop-blur-3xl">
+    <header className="container px-6 py-3 flex justify-between items-center backdrop-blur-md sticky top-0 z-50">
       <Logo />
       <Navigation />
     </header>
@@ -44,6 +46,7 @@ function Navigation() {
 
   return (
     <nav className="flex items-center gap-6">
+      <DonateToPalestine />
       <NavLinks
         logo={theme === 'dark' ? githubLogoDark : githubLogoLight}
         name="Github"
@@ -54,4 +57,16 @@ function Navigation() {
   );
 }
 
+function DonateToPalestine() {
+  return (
+    <Button variant="outline" asChild>
+      <a className='space-x-2 flex items-center' href="https://donate.unrwa.org/gaza/~my-donation?_cv=1" target='_blank' rel='noopener noreferrer'>
+        <img className="size-4" src={palestineSvg} alt="Palestine" />
+        <span>Donate Now</span>
+      </a>
+    </Button>
+  )
+}
+
+
 export default Header;
diff --git a/tailwind.config.js b/tailwind.config.js
index c7a404c..c4db5f1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,5 @@
+import tailwindCssAnimate from "tailwindcss-animate";
+
 /** @type {import('tailwindcss').Config} */
 export default {
   darkMode: ["class"],
@@ -76,5 +78,5 @@ export default {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [tailwindCssAnimate],
 }
\ No newline at end of file