diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 49ffe6c..9626077 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -68,6 +68,14 @@ html[data-theme='light'] {
   }
 }
 
+.site-logo {
+  @apply transition-all duration-300;
+}
+
+html[data-theme='dark'] .site-logo {
+  filter: invert(0.9) brightness(1.2);
+}
+
 @keyframes fadeInUp {
   from {
     opacity: 0;
diff --git a/assets/images/palina.png b/assets/images/palina.png
new file mode 100644
index 0000000..d22ab34
Binary files /dev/null and b/assets/images/palina.png differ
diff --git a/partials/header.hbs b/partials/header.hbs
index fa5106c..e064b7d 100644
--- a/partials/header.hbs
+++ b/partials/header.hbs
@@ -1,7 +1,11 @@
 <header class="text-[var(--text-primary)] body-font shadow-lg bg-[var(--bg-primary)]">
     <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center justify-between">
         <a href="{{@site.url}}" class="flex title-font font-medium items-center text-[var(--text-primary)] mb-4 md:mb-0">
-            <span class="ml-3 text-xl">{{@site.title}}</span>
+            {{#if @site.logo}}
+                <img src="{{@site.logo}}" alt="{{@site.title}}" class="h-10 w-auto site-logo">
+            {{else}}
+                <img src="{{asset "images/palina.png"}}" alt="{{@site.title}}" class="h-10 w-auto site-logo">
+            {{/if}}
         </a>
 
         <div class="flex items-center">