diff --git a/src/lib/components/contact.svelte b/src/lib/components/contact.svelte
index 5626557..a5a190b 100644
--- a/src/lib/components/contact.svelte
+++ b/src/lib/components/contact.svelte
@@ -1,68 +1,94 @@
 <script>
-    import darkmode from "../stores/darkmode";
+    import { DateTime } from "luxon";
+    import { onMount } from "svelte";
+    import Location from "./icons/location.svelte";
+
+    let time = DateTime.now();
+    onMount(() => {
+        let i = setInterval(() => {
+            time = DateTime.now();
+        }, 1000);
+        return () => clearInterval(i);
+    });
 </script>
 
-<div class="contact" class:dark={$darkmode}>
-    <div class="address">Prague, Czech Republic</div>
+<div class="rounded-lg bg-dark-800 text-gray-300 max-w-100 m-auto mb-5 mt-15 p-5">
+    <a href="https://goo.gl/maps/pM3bGyx9u5uBuqqv5" class="flex items-center justify-center w-full p-5" rel="noreferrer noopener" target="_blank">
+        <div class="text-gray-400 h-7 w-7">
+            <Location />
+        </div>
+        Prague, Czech Republic
+    </a>
     <div class="profiles">
         <a href="https://github.com/danbulant" rel="noreferrer noopener" target="_blank">
-            <div class="github" title="GitHub">
-                <img src="/tech/github.png" alt="Github Icon" draggable={false}>
-                <span>danbulant</span>
+            <span class="platform">GitHub</span>
+            <div class="main">
+                <img src="/tech/github.png" alt="" draggable={false}>
+                <span class="name">danbulant</span>
+            </div>
+        </a>
+        <a href="https://www.linkedin.com/in/danbulant/" rel="noreferrer noopener" target="_blank">
+            <span class="platform">LinkedIn</span>
+            <div class="main">
+                <img src="/tech/linkedin.png" class="rounded-1" alt="" draggable={false}>
+                <span class="name">danbulant</span>
             </div>
         </a>
         <a href="https://discord.gg/XKPbz5xRuK" rel="noreferrer noopener" target="_blank">
-            <div class="discord" title="Discord">
-                <img src="/tech/discord.png" alt="Discord Icon" draggable={false}>
-                <span>TechmandanCZ#3372</span>
+            <span class="platform">Discord</span>
+            <div class="main">
+                <img src="/tech/discord.png" alt="" draggable={false}>
+                <span class="name">TechmandanCZ#3372</span>
             </div>
         </a>
+        <a href="https://twitter.com/danbulant" rel="noreferrer noopener" target="_blank">
+            <span class="platform">Twitter</span>
+            <div class="main">
+                <img src="/tech/twitter.png" alt="" draggable={false}>
+                <span class="name">danbulant</span>
+            </div>
+        </a>
+        <a href="mailto:me@danbulant.eu">
+            <span class="platform">Email</span>
+            <div class="main">
+                <img src="/tech/mail.svg" alt="" draggable={false}>
+                <span class="name">me@danbulant.eu</span>
+            </div>
+        </a>
+        <div>
+            <div class="platform">Time</div>
+            <div class="main">
+                <img src="/tech/clock.svg" alt="" draggable={false}>
+                <div class="name">GMT+1 - {time.setZone("Europe/Prague", { keepLocalTime: true }).toFormat("HH:mm:ss")}</div>
+            </div>
+        </div>
     </div>
 </div>
 
 <style>
-    .contact {
-        text-align: center;
-        margin: 120px 0;
+    .platform {
+        @apply text-gray-400;
     }
-    .address {
-        color: #202020d5;
-        margin-bottom: 15px;
-    }
-    .dark .address {
-        color: rgba(191, 191, 191, 0.835);
+    .main {
+        @apply flex gap-3 pt-1;
     }
     .profiles {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 2em;
+        @apply max-w-80 m-auto flex flex-col;
     }
-    .profiles a {
-        height: 100%;
+    a:active, a:hover {
+        @apply no-underline;
     }
-    .profiles a div {
-        height: 100%;
-        display: flex;
-        align-items: center;
+    a:active .main, a:hover .main {
+        @apply underline;
     }
-    .profiles a div span {
-        padding: 0 5px;
+    .profiles > * {
+        @apply py-1.5;
     }
-    .profiles a:hover {
-        text-decoration: none;
+    .profiles > div {
+        @apply m-0 p-0;
     }
     img {
         height: 2em;
         width: 2em;
     }
-    .github {
-        color: #333333;
-    }
-    .dark .github {
-        color: rgb(191, 191, 191);
-    }
-    .discord {
-        color: #7289DA;
-    }
 </style>
diff --git a/src/lib/components/icons/location.svelte b/src/lib/components/icons/location.svelte
new file mode 100644
index 0000000..f5ea88f
--- /dev/null
+++ b/src/lib/components/icons/location.svelte
@@ -0,0 +1 @@
+<svg class="max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M168.3 499.2C116.1 435 0 279.4 0 192C0 85.96 85.96 0 192 0C298 0 384 85.96 384 192C384 279.4 267 435 215.7 499.2C203.4 514.5 180.6 514.5 168.3 499.2H168.3zM192 256C227.3 256 256 227.3 256 192C256 156.7 227.3 128 192 128C156.7 128 128 156.7 128 192C128 227.3 156.7 256 192 256z"/></svg>
\ No newline at end of file
diff --git a/static/tech/clock.svg b/static/tech/clock.svg
new file mode 100644
index 0000000..00350e9
--- /dev/null
+++ b/static/tech/clock.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512zM232 256C232 264 236 271.5 242.7 275.1L338.7 339.1C349.7 347.3 364.6 344.3 371.1 333.3C379.3 322.3 376.3 307.4 365.3 300L280 243.2V120C280 106.7 269.3 96 255.1 96C242.7 96 231.1 106.7 231.1 120L232 256z" fill="white"/></svg>
\ No newline at end of file
diff --git a/static/tech/linkedin.png b/static/tech/linkedin.png
new file mode 100644
index 0000000..5cf2964
Binary files /dev/null and b/static/tech/linkedin.png differ
diff --git a/static/tech/mail.svg b/static/tech/mail.svg
new file mode 100644
index 0000000..94a0861
--- /dev/null
+++ b/static/tech/mail.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M464 64C490.5 64 512 85.49 512 112C512 127.1 504.9 141.3 492.8 150.4L275.2 313.6C263.8 322.1 248.2 322.1 236.8 313.6L19.2 150.4C7.113 141.3 0 127.1 0 112C0 85.49 21.49 64 48 64H464zM217.6 339.2C240.4 356.3 271.6 356.3 294.4 339.2L512 176V384C512 419.3 483.3 448 448 448H64C28.65 448 0 419.3 0 384V176L217.6 339.2z" fill="white"/></svg>
\ No newline at end of file
diff --git a/static/tech/twitter.png b/static/tech/twitter.png
new file mode 100644
index 0000000..e381646
Binary files /dev/null and b/static/tech/twitter.png differ
diff --git a/windi.config.js b/windi.config.js
new file mode 100644
index 0000000..54afaa2
--- /dev/null
+++ b/windi.config.js
@@ -0,0 +1,19 @@
+// @ts-check - enable TS check for js file
+import { defineConfig } from 'windicss/helpers';
+
+export default defineConfig({
+    darkMode: "class",
+    theme: {
+        extend: {
+            colors: {
+                github: "#fafafa",
+                discord: "#7289da"
+            }
+        }
+    },
+    plugins: [
+        require('windicss/plugin/filters'),
+        require('windicss/plugin/aspect-ratio'),
+        require('windicss/plugin/line-clamp'),
+    ]
+})
\ No newline at end of file