diff --git a/src/app/page.tsx b/src/app/page.tsx
index c7488eb..8dc549f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,5 @@
 import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
 import { toolLinks } from "@/constants";
 
 export default function Home() {
@@ -6,17 +7,20 @@ export default function Home() {
     <div className="h-screen w-screen bg-black text-white font-noto flex flex-col items-center">
       <Navbar renderHomeLink={false} />
       <div className="w-screen h-screen flex flex-col items-center justify-center">
-        <div className="grid grid-cols-3 gap-4">
+        <div className="grid grid-cols-3 gap-6">
           {toolLinks.map((tool) => (
             <div
               key={tool.title}
-              className="border-2 border-white p-3 flex justify-center rounded-2xl"
+              className="text-2xl border-2 border-white p-5 flex justify-center rounded-2xl shadow-md
+              shadow-white hover:scale-110 hover:transition-scale hover:duration-200
+              hover:text-blue-400 hover:border-blue-400 hover:shadow-blue-400"
             >
               <a href={tool.link}>{tool.title}</a>
             </div>
           ))}
         </div>
       </div>
+      <Footer />
     </div>
   );
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..087e34c
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+interface NavProps {
+  className?: string;
+}
+
+const navbar = (props: NavProps) => {
+  return (
+    <div className={`h-18 w-full p-3 ` + props.className}>
+      <div className="text-md text-white font-bold flex flex-row items-center justify-center">
+        <text>made by</text>
+        <a
+          className="mx-2 hover:underline hover:text-blue-400"
+          href="https://github.com/AuriomTex"
+        >
+          Domi
+        </a>
+        <text>and</text>
+        <a
+          className="mx-2 hover:underline hover:text-blue-400"
+          href="https://github.com/theoleuthardt"
+        >
+          Theo.
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default navbar;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index f357f4d..b0a267f 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -9,7 +9,7 @@ interface NavProps {
 
 const navbar = (props: NavProps) => {
   return (
-    <div className={`h-18 w-full p-3` + props.className}>
+    <div className={`h-18 w-full p-3 ` + props.className}>
       <nav className="bg-black text-white font-bold flex flex-row items-center justify-between">
         <div className="justify-items-start flex flex-1 flex-row items-center">
           <Image
@@ -19,11 +19,14 @@ const navbar = (props: NavProps) => {
             height={64}
             className="invert"
           />
-          <div className="text-white ml-5">werkzeugkiste.</div>
+          <div className="text-white text-2xl ml-5">werkzeugkiste.</div>
         </div>
         <div className="flex flex-auto justify-center">
           {props.renderHomeLink ? (
-            <a href="#" className="justify-center">
+            <a
+              href="#"
+              className="justify-center text-2xl hover:underline hover:transition-underline hover:duration-300 hover:text-blue-400"
+            >
               home
             </a>
           ) : null}
@@ -31,7 +34,7 @@ const navbar = (props: NavProps) => {
         <div className="flex flex-auto justify-end">
           <a
             href="https://github.com/theoleuthardt/werkzeugkiste"
-            className="items-end mr-3"
+            className="items-end mr-3 text-2xl hover:underline hover:transition-underline hover:duration-300 hover:text-blue-400"
           >
             github
           </a>