diff --git a/frontend/src/components/global-header.jsx b/frontend/src/components/global-components.jsx
similarity index 87%
rename from frontend/src/components/global-header.jsx
rename to frontend/src/components/global-components.jsx
index 0ed4f0a..3a8e910 100644
--- a/frontend/src/components/global-header.jsx
+++ b/frontend/src/components/global-components.jsx
@@ -1,13 +1,13 @@
 import React from "react";
 import { Link, Outlet, useLoaderData } from "react-router-dom";
 
-const GlobalHeader = () => {
+const GlobalHeaderAndFooter = () => {
   // get loader data from the router
   const logged = useLoaderData();
   return (
     <>
       <header className="flex justify-between items-center p-3 bg-slate-500/10">
-        <a href="/build/new">
+        <a href="/">
           <h1 className="cinzel text-xl text-bold">
             SW:Lost Centuria Rune Builder
           </h1>
@@ -23,11 +23,12 @@ const GlobalHeader = () => {
         )}
       </header>
       <Outlet />
+      <GlobalFooter />
     </>
   );
 };
 
-export default GlobalHeader;
+export default GlobalHeaderAndFooter;
 
 // discord button
 const DiscordButton = () => {
@@ -71,3 +72,20 @@ const ProfileButton = () => {
     </svg>
   );
 };
+
+const GlobalFooter = () => {
+  return (
+    <footer className="p-3 bg-slate-500/10">
+      <p className="text-center text-sm text-gray-500">
+        Made with ❤️ by{" "}
+        <a href="https://github.com/bolado" className="text-blue-500">
+          bolado
+        </a>{" "}
+        -{" "}
+        <a href="buymeacoffee.com/bolado" className="text-blue-500">
+          Buy me a coffee ☕
+        </a>
+      </p>
+    </footer>
+  );
+};
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index 70a59dc..78b5e63 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -12,13 +12,13 @@ import reportWebVitals from "./reportWebVitals";
 import ErrorPage from "./pages/error-page";
 import Builder from "./pages/build/builder";
 import Callback from "./pages/Callback";
-import GlobalHeader from "./components/global-header";
+import GlobalHeaderAndFooter from "./components/global-components";
 import { hasTokenCookie } from "./utils/queries";
 import Profile from "./pages/profile";
 
 const router = createBrowserRouter([
   {
-    element: <GlobalHeader />,
+    element: <GlobalHeaderAndFooter />,
     loader: async () => {
       return hasTokenCookie();
     },
diff --git a/frontend/src/pages/App.jsx b/frontend/src/pages/App.jsx
index 47a55c4..e02d490 100644
--- a/frontend/src/pages/App.jsx
+++ b/frontend/src/pages/App.jsx
@@ -3,7 +3,15 @@ import ButtonPrimary from "../components/button-primary";
 
 function App() {
   return (
-    <div className="flex items-center	justify-center flex-col gap-4 min-h-[100vh]">
+    <div className="flex items-center	justify-center flex-col gap-4 min-h-[calc(100vh-theme(spacing.24))]">
+      <video
+        className="max-w-[2560px] h-screen fixed left-1/2 top-0 -translate-x-1/2 object-cover -z-10"
+        src="https://hive-fn.qpyou.cn/webdev/smon/20231103_124021_SX6QW4yK1o.mp4"
+        muted
+        playsInline
+        autoPlay
+        loop
+      />
       <img
         src={`https://cdn.streamelements.com/infinity/summoners/logo_lost_centuria.png`}
         className="max-w-[50vh] h-auto"
diff --git a/frontend/src/pages/build/builder.jsx b/frontend/src/pages/build/builder.jsx
index 4d16889..b41db21 100644
--- a/frontend/src/pages/build/builder.jsx
+++ b/frontend/src/pages/build/builder.jsx
@@ -246,6 +246,7 @@ function Builder() {
               type="text"
               value={build.name}
               placeholder="Enter build name"
+              maxLength={25}
               onChange={(e) =>
                 setBuild((prev) => ({ ...prev, name: e.target.value }))
               }