diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 7af4b5c..a0ce58b 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,6 +1,36 @@
 ---
 ---
 
-<footer class="">
-	
-</footer>
+<footer class="flex flex-col bg-slate-100 py-4 px-6 min-h-48 rounded-t-2xl">
+    <div class="flex flex-row gap-2">
+        <ul>
+            <!-- <h4 class="mx-2 mb-0">Main</h4> -->
+            <li><a class="my-0 text-sm m-2 text-slate-900 hover:text-text transition-all p-0 text-ctp-subtext0 hover:text-ctp-text hover:scale-105 hover:underline underline-offset-6" href="/">Strona główna</a></li>
+            <li><a class="my-0 text-sm m-2 text-slate-900 hover:text-text transition-all p-0 text-ctp-subtext0 hover:text-ctp-text hover:scale-105 hover:underline underline-offset-6" href="/uslugi">Usługi</a></li>
+            <li><a class="my-0 text-sm m-2 text-slate-900 hover:text-text transition-all p-0 text-ctp-subtext0 hover:text-ctp-text hover:scale-105 hover:underline underline-offset-6" href="/portfolio">Portfolio</a></li>
+            <li><a class="my-0 text-sm m-2 text-slate-900 hover:text-text transition-all p-0 text-ctp-subtext0 hover:text-ctp-text hover:scale-105 hover:underline underline-offset-6" href="/kontakt">Kontakt</a></li>
+        </ul>
+    </div>
+
+    <hr class="my-1.5 border rounded-full border-slate-300" />
+
+    <div class="flex flex-row">
+        <!-- Credits -->
+        <div class="flex flex-col grow"> 
+            <span class="flex flex-row text-sm text-ctp-subtext0">
+                Strona stworzona przy użyciu
+                <a class="my-0 text-sm m-2 text-sky-400 hover:text-purple-400 transition-all text-ctp-subtext0 hover:text-ctp-text hover:scale-105 p-0 hover:underline underline-offset-6" target="_blank" href="https://astro.build/">Astro</a>
+                i
+                <a class="my-0 text-sm m-2 text-sky-400 hover:text-purple-400 transition-all text-ctp-subtext0 hover:text-ctp-text hover:scale-105 p-0 hover:underline underline-offset-6" target="_blank" href="https://tailwindcss.com/">Tailwind</a>
+                przez
+                <span class="ml-1 font-bold text-ctp-text">Dark Steveneq</span>.
+            </span>
+            <span class="flex flex-row text-sm text-ctp-subtext0">
+                Font:
+                <a class="my-0 text-sm m-2 text-sky-400 hover:text-purple-400 transition-all text-ctp-subtext0 hover:text-ctp-text hover:scale-105 p-0 hover:underline underline-offset-6" href="https://fonts.google.com/specimen/Montserrat" target="_blank">Montserrat</a>
+                wydany na licencji
+                <a class="my-0 text-sm m-2 text-sky-400 hover:text-purple-400 transition-all text-ctp-subtext0 hover:text-ctp-text hover:scale-105 p-0 hover:underline underline-offset-6" href="https://fonts.google.com/specimen/Montserrat/license" target="_blank">Open Font License</a>
+            </span>
+        </div>
+    </div>
+</footer>
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 4575729..ceed848 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,5 +1,6 @@
 ---
 import Header from '../components/Header.astro'
+import Footer from '../components/Footer.astro'
 import '../styles/global.css'
 
 const { tytul, bezTla } = Astro.props
@@ -7,7 +8,7 @@ const { tytul, bezTla } = Astro.props
 
 <!doctype html>
 <html class="
-	m-0 w-svw h-svh 
+	m-0 w-dvw h-dvh
 	text-slate-950 bg-slate-200 select-none
 " lang="pl">
 	<head>
@@ -17,16 +18,17 @@ const { tytul, bezTla } = Astro.props
 		<meta name="generator" content={Astro.generator} />
 		<title>{tytul ? `${tytul} - Jakiś Fotograf` : 'Jakiś Fotograf'}</title>
 	</head>
-	<body style="animation: wsun 0.5s ease-in-out" class="flex flex-col p-2">
+	<body style="animation: wsun 0.5s ease-in-out" class="flex flex-col p-2 w-dvw h-dvh">
 		<Header />
 		<main class=`
+			flex flex-col
 			grow
-			mx-auto p-4 rounded-md
-			w-368 max-w-full
-			${bezTla ? '' : 'bg-slate-100 drop-shadow-slate-300 drop-shadow-md'}
-			block
+			mb-10
 		`>
-			<slot />
+			<div class=`w-368 max-w-full mx-auto p-4 rounded-md ${bezTla ? '' : 'bg-slate-100 drop-shadow-slate-300 drop-shadow-md'}`>
+				<slot />
+			</div>
 		</main>
+		<Footer />
 	</body>
 </html>
diff --git a/src/pages/kontakt/Kafelek.astro b/src/pages/kontakt/Kafelek.astro
index b2083d2..ff3a6c1 100644
--- a/src/pages/kontakt/Kafelek.astro
+++ b/src/pages/kontakt/Kafelek.astro
@@ -1,13 +1,21 @@
 ---
-const { className, tytul, tresc, ikona } = Astro.props;
+const { className, tytul, tresc, link } = Astro.props;
 ---
 
-<div style="animation: odwroc 1s cubic-bezier(0.16, 1, 0.3, 1)" class=`
-    rounded-md size-36 flex flex-col text-center p-1.5
-    bg-slate-100 drop-shadow-md drop-shadow-slate-400
+{link ? <a style="animation: odwroc 1.5s cubic-bezier(0.16, 1, 0.3, 1)" class=`
+    rounded-md size-48 flex flex-col text-center p-1.5
+    bg-slate-100 drop-shadow-md drop-shadow-slate-400 transition-all hover:scale-105
+    ${className}
+`} href={link} target="_blank">
+    <slot/>
+    <h3 class="text-sky-600 hover:text-purple-600 transition-all">{tytul}</h3>
+    <h4 class="text-sm text-sky-800 hover:text-purple-800 transition">{tresc}</h4>
+</a>: <div style="animation: odwroc 1.5s cubic-bezier(0.16, 1, 0.3, 1)" class=`
+    rounded-md size-48 flex flex-col text-center p-1.5
+    bg-slate-100 drop-shadow-md drop-shadow-slate-400 transition-all hover:scale-105
     ${className}
 `}>
     <slot/>
     <h3>{tytul}</h3>
     <h4 class="text-sm text-slate-700">{tresc}</h4>
-</div>
\ No newline at end of file
+</div>}
\ No newline at end of file
diff --git a/src/pages/kontakt/index.astro b/src/pages/kontakt/index.astro
index f38b631..e4a1481 100644
--- a/src/pages/kontakt/index.astro
+++ b/src/pages/kontakt/index.astro
@@ -1,21 +1,71 @@
 ---
 import Layout from "../../layouts/Layout.astro"
-import { Phone, Mail } from "@lucide/astro"
+import { Phone, Mail, Instagram, Facebook, Twitter } from "@lucide/astro"
 import Kafelek from "./Kafelek.astro"
+
+var alphabet: Record<string, string> = {
+    'a': '.-',    'b': '-...',  'c': '-.-.', 'd': '-..',
+    'e': '.',     'f': '..-.',  'g': '--.',  'h': '....',
+    'i': '..',    'j': '.---',  'k': '-.-',  'l': '.-..',
+    'm': '--',    'n': '-.',    'o': '---',  'p': '.--.',
+    'q': '--.-',  'r': '.-.',   's': '...',  't': '-',
+    'u': '..-',   'v': '...-',  'w': '.--',  'x': '-..-',
+    'y': '-.--',  'z': '--..',  ' ': '  ',
+    '1': '.----', '2': '..---', '3': '...--', '4': '....-', 
+    '5': '.....', '6': '-....', '7': '--...', '8': '---..', 
+    '9': '----.', '0': '-----', 
+}
 ---
 
 <Layout tytul="Kontakt">
     <h2 class="text-xl mb-1">Kontakt</h2>
     <hr>
     Sposoby kontaktu ze mną
-    <div class="
-        flex flex-row flex-wrap m-3 gap-5 justify-center lg:justify-start
-    ">
-        <Kafelek className="delay-75" tytul="Telefon" tresc="+48 123 456 789">
-            <Phone class="grow m-auto" stroke-width={1} width={32}/>
-        </Kafelek>
-        <Kafelek className="delay-100" tytul="E-mail" tresc="ja@jakisfotograf.xd">
-            <Mail class="grow m-auto" stroke-width={1} width={32}/>
-        </Kafelek>
+    <div class="flex flex-col my-1">
+        <div class="
+            flex flex-row flex-wrap m-3 gap-5 justify-center lg:justify-start
+            mx-auto
+        ">
+            <Kafelek className="delay-75" tytul="Telefon" tresc="+48 123 456 789" link="https://www.ktoto.info/numer/123456789/">
+                <Phone class="grow m-auto" stroke-width={1} width={64}/>
+            </Kafelek>
+            <Kafelek className="delay-275" tytul="E-mail" tresc="ja@jakisfotograf.xd" link="mailto:ja@jakisfotograf.xd">
+                <Mail class="grow m-auto" stroke-width={1} width={64}/>
+            </Kafelek>
+            <Kafelek className="delay-675" tytul="Facebook" tresc="Jakiś fotograf" link="https://facebook.com/jakisfotografxd">
+                <Facebook class="grow m-auto" stroke-width={1} width={64}/>
+            </Kafelek>
+            <Kafelek className="delay-475" tytul="Instagram" tresc="@jakisfotografxd" link="https://instagram.com/jakisfotografxd">
+                <Instagram class="grow m-auto" stroke-width={1} width={64}/>
+            </Kafelek>
+            <Kafelek className="delay-100" tytul="Głąb" tresc="@jakisfotografxd" link="https://twitter.com/jakisfotografxd">
+                <Twitter class="grow m-auto" stroke-width={1} width={64}/>
+            </Kafelek>
+        </div>
+    </div>
+    Ewentualnie możesz mi wysłać list na dwa sposoby
+    <div class="flex flex-col my-1">
+        <div class="grid grid-cols-2 gap-4 mx-auto">
+            <div style="animation: odwroc 1.5s cubic-bezier(0.16, 1, 0.3, 1)" class=`
+                rounded-md w-96 flex flex-col py-2 px-2.5
+                bg-slate-100 drop-shadow-md drop-shadow-slate-400 transition-all hover:scale-105
+            `}>
+                <header class="text-xl font-semibold mb-1">Poczta polska</header>
+                Opcja dla tych dla których "kiedyś to było"
+                <p>Jakiś Fotograf</p>
+                <p>ul. Bekowa 2137</p>
+                <p>Zadupie dolne, Polska, Ziema, Droga mleczna</p>
+            </div>
+            <div style="animation: odwroc 1.5s cubic-bezier(0.16, 1, 0.3, 1)" class=`
+                rounded-md w-96 flex flex-col py-2 px-2.5
+                bg-slate-100 drop-shadow-md drop-shadow-slate-400 transition-all hover:scale-105
+            `}>
+                <header class="text-xl font-semibold mb-1">Gołąb pocztowy</header>
+                Opcja dla fanatyków ptaków, oto mój adres po gołębiemu:
+                <pre class="text-wrap">{btoa("\u009d¨Û\u0096,ìÏ'î¯\u0006¥\u0092ì.").split('').map(e => {
+                    return alphabet[e.toLowerCase()].replaceAll(".", "frr ").replaceAll("-", "gurr ");
+                }).join(' ')}</pre>
+            </div>
+        </div>
     </div>
 </Layout>
\ No newline at end of file
