diff --git a/generate/build.tsx b/generate/build.tsx
index b938b45..30dda74 100644
--- a/generate/build.tsx
+++ b/generate/build.tsx
@@ -6,7 +6,6 @@ import { renderToString } from "react-dom/server";
 import fs from "fs";
 import exec from "child_process";
 import Base from "./templates/Base";
-import Header from "./templates/Header";
 import YearPhotos from "./templates/YearPhotos";
 import Tags from "./templates/Tags";
 
@@ -123,7 +122,6 @@ Object.keys(items).forEach((year) => {
 
 const html = renderToString(
   <Base isDev={ENVIRONMENT == "dev"}>
-    <Header />
     <Tags tags={tags} />
     <div className="container mx-auto p-4 flex flex-col gap-4">
       {Object.keys(items).sort().reverse().map((year) => (
diff --git a/generate/static/css/tailwind.css b/generate/static/css/tailwind.css
index a812576..0a9178f 100644
--- a/generate/static/css/tailwind.css
+++ b/generate/static/css/tailwind.css
@@ -563,6 +563,9 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
@@ -620,6 +623,9 @@
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
+  .w-24 {
+    width: calc(var(--spacing) * 24);
+  }
   .w-full {
     width: 100%;
   }
@@ -647,6 +653,9 @@
   .items-center {
     align-items: center;
   }
+  .justify-between {
+    justify-content: space-between;
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -668,6 +677,10 @@
   .rounded-sm {
     border-radius: var(--radius-sm);
   }
+  .rounded-t-lg {
+    border-top-left-radius: var(--radius-lg);
+    border-top-right-radius: var(--radius-lg);
+  }
   .rounded-b-lg {
     border-bottom-right-radius: var(--radius-lg);
     border-bottom-left-radius: var(--radius-lg);
@@ -679,6 +692,9 @@
   .bg-\[\#121B2C\] {
     background-color: #121B2C;
   }
+  .bg-\[\#262626\] {
+    background-color: #262626;
+  }
   .bg-\[\#FF478B\] {
     background-color: #FF478B;
   }
@@ -788,6 +804,11 @@
       align-items: center;
     }
   }
+  .md\:justify-between {
+    @media (width >= 48rem) {
+      justify-content: space-between;
+    }
+  }
   .md\:gap-2 {
     @media (width >= 48rem) {
       gap: calc(var(--spacing) * 2);
diff --git a/generate/templates/Base.tsx b/generate/templates/Base.tsx
index d473d26..2dceb81 100644
--- a/generate/templates/Base.tsx
+++ b/generate/templates/Base.tsx
@@ -1,3 +1,6 @@
+import Footer from "./Footer";
+import Header from "./Header";
+
 interface BaseProps {
   children: React.ReactNode;
   isDev?: boolean;
@@ -10,7 +13,7 @@ export default function Base({ children, isDev }: BaseProps) {
         <meta charSet="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Radiquum/Photos</title>
-        <link rel="stylesheet" href="/static/css/tailwind.css" />
+        <link rel="stylesheet" href="./static/css/tailwind.css" />
         {isDev ? <script src="/static/js/hotreload.js"></script> : ""}
 
         <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -40,8 +43,10 @@ export default function Base({ children, isDev }: BaseProps) {
 
       </head>
       <body className="bg-[#121B2C] text-white">
+        <Header />
         {children}
-        <script src="/static/js/initGalleries.js" />
+        <Footer />
+        <script src="./static/js/initGalleries.js" />
         </body>
     </html>
   );
diff --git a/generate/templates/Footer.tsx b/generate/templates/Footer.tsx
new file mode 100644
index 0000000..4b986e8
--- /dev/null
+++ b/generate/templates/Footer.tsx
@@ -0,0 +1,12 @@
+export default function Footer() {
+    return (
+        <div className="bg-[#262626] text-white w-full rounded-t-lg">
+            <div className="container mx-auto p-4 flex flex-col md:flex-row md:items-center">
+                <a href="https://creativecommons.org/licenses/by-sa/4.0/" className="flex gap-2 items-center">
+                    <p>Licensed Under CC BY-SA 4.0</p>
+                    <img alt="CC BY-SA 4.0" src="https://licensebuttons.net/l/by-sa/4.0/88x31.png" className="w-24" />
+                </a>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/generate/templates/Header.tsx b/generate/templates/Header.tsx
index 52477d9..d8fa4f2 100644
--- a/generate/templates/Header.tsx
+++ b/generate/templates/Header.tsx
@@ -2,8 +2,10 @@ export default function Header() {
   return (
     <header className="bg-[#FF478B] text-white w-full rounded-b-lg">
       <div className="flex items-center container mx-auto p-4 gap-4">
-        <img src="https://radiquum.wah.su/static/avatar_512.jpg" alt="" className="w-16 h-16 rounded-lg" />
-        <h1 className="text-2xl font-bold xl:text-3xl 2xl:text-4xl inter-semibold">RADIQUUM/PHOTOS</h1>
+        <a href="/" className="flex items-center gap-4">
+          <img src="https://radiquum.wah.su/static/avatar_512.jpg" alt="" className="w-16 h-16 rounded-lg" />
+          <h1 className="text-2xl font-bold xl:text-3xl 2xl:text-4xl inter-semibold">KENTAI RADIQUUM</h1>
+        </a>
       </div>
     </header>
   );
diff --git a/generate/templates/Tags.tsx b/generate/templates/Tags.tsx
index 3c47cd0..dd1931f 100644
--- a/generate/templates/Tags.tsx
+++ b/generate/templates/Tags.tsx
@@ -1,6 +1,6 @@
 export default function Tags({ tags }: { tags: string[] }) {
   return (
-    <div className="container mx-auto">
+    <div className="container mx-auto mt-2">
       <div className="flex overflow-x-auto px-4 py-2 gap-2 scrollbar-thin scrollbar-corner-rounded-sm scrollbar-thumb-gray-700 scrollbar-track-gray-900">
         <button
           className="bg-gray-800 rounded-lg px-4 py-1 text-sm"
