diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000..e4d5e97
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,76 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="7">
+            <item index="0" class="java.lang.String" itemvalue="nobr" />
+            <item index="1" class="java.lang.String" itemvalue="noembed" />
+            <item index="2" class="java.lang.String" itemvalue="comment" />
+            <item index="3" class="java.lang.String" itemvalue="noscript" />
+            <item index="4" class="java.lang.String" itemvalue="embed" />
+            <item index="5" class="java.lang.String" itemvalue="script" />
+            <item index="6" class="java.lang.String" itemvalue="card-tech" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
+    <inspection_tool class="SecurityAdvisoriesInspection" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="optionConfiguration">
+        <list>
+          <option value="barryvdh/laravel-debugbar" />
+          <option value="behat/behat" />
+          <option value="brianium/paratest" />
+          <option value="codeception/codeception" />
+          <option value="codedungeon/phpunit-result-printer" />
+          <option value="composer/composer" />
+          <option value="doctrine/coding-standard" />
+          <option value="filp/whoops" />
+          <option value="friendsofphp/php-cs-fixer" />
+          <option value="humbug/humbug" />
+          <option value="infection/infection" />
+          <option value="jakub-onderka/php-parallel-lint" />
+          <option value="johnkary/phpunit-speedtrap" />
+          <option value="kalessil/production-dependencies-guard" />
+          <option value="mikey179/vfsStream" />
+          <option value="mockery/mockery" />
+          <option value="mybuilder/phpunit-accelerator" />
+          <option value="orchestra/testbench" />
+          <option value="pdepend/pdepend" />
+          <option value="phan/phan" />
+          <option value="phing/phing" />
+          <option value="phpcompatibility/php-compatibility" />
+          <option value="phpmd/phpmd" />
+          <option value="phpro/grumphp" />
+          <option value="phpspec/phpspec" />
+          <option value="phpspec/prophecy" />
+          <option value="phpstan/phpstan" />
+          <option value="phpunit/phpunit" />
+          <option value="povils/phpmnd" />
+          <option value="roave/security-advisories" />
+          <option value="satooshi/php-coveralls" />
+          <option value="sebastian/phpcpd" />
+          <option value="slevomat/coding-standard" />
+          <option value="spatie/phpunit-watcher" />
+          <option value="squizlabs/php_codesniffer" />
+          <option value="sstalle/php7cc" />
+          <option value="symfony/debug" />
+          <option value="symfony/maker-bundle" />
+          <option value="symfony/phpunit-bridge" />
+          <option value="symfony/var-dumper" />
+          <option value="vimeo/psalm" />
+          <option value="wimg/php-compatibility" />
+          <option value="wp-coding-standards/wpcs" />
+          <option value="yiisoft/yii2-coding-standards" />
+          <option value="yiisoft/yii2-debug" />
+          <option value="yiisoft/yii2-gii" />
+          <option value="zendframework/zend-coding-standard" />
+          <option value="zendframework/zend-debug" />
+          <option value="zendframework/zend-test" />
+        </list>
+      </option>
+    </inspection_tool>
+  </profile>
+</component>
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c4765d1..d002f34 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- Contact mediums are build programmatically
+- Contact mediums have border radius to fit the site homogeneity
+
+### Fixed
+- Fixed few styles on techs
 
 ## [0.1.0] - 2023-11-28
 ### Added
diff --git a/src/components/CardTech.astro b/src/components/CardTech.astro
index 6a02c91..173fb94 100644
--- a/src/components/CardTech.astro
+++ b/src/components/CardTech.astro
@@ -2,16 +2,16 @@
 const { tech } = Astro.props;
 import { Image } from 'astro:assets'
 
-let imgClass = "w-[50%] sm:w-[35%] h-auto self-center sm:self-left m-3";
+let imgClass = "w-[35%] lg:w-[45%] h-auto self-center sm:self-left sm:m-3";
 imgClass = tech.invertOnDark ? imgClass + " dark:invert" : imgClass;
 ---
 <card-tech class="hidden" data-techId={tech.order}></card-tech>
 <div
   id={"tech-card-" + tech.order}
-  class="card flex flex-col justify-around border-2 rounded-xl border-black dark:border-white space-y-6 md:min-w-[170px] md:min-h-[200px] will-change-[opacity]"
+  class="card flex flex-col py-3 lg:py-0 md:justify-center border-2 rounded-xl border-black dark:border-white space-y-4 sm:space-y-7 md:min-w-[170px] md:min-h-[200px] will-change-[opacity]"
 >
   <pre
-    class="self-left ml-2 text-black dark:text-white opacity-40">#{tech.order}</pre>
+    class="ml-0 sm:ml-3 text-sm md:text-base text-black dark:text-white opacity-40">#{tech.order}</pre>
   <Image
     src={tech.imagePath}
     width={tech.imageWidth}
@@ -20,9 +20,7 @@ imgClass = tech.invertOnDark ? imgClass + " dark:invert" : imgClass;
     format="webp"
     class={imgClass}
   />
-  <h2 class="self-center text-xl sm:text-2xl text-black dark:text-white">
-    {tech.name}
-  </h2>
+  <h2 class="self-center text-xl sm:text-2xl text-black dark:text-white">{tech.name}</h2>
 </div>
 
 <script>
diff --git a/src/components/Contact.astro b/src/components/Contact.astro
index 4bd452c..a41cc27 100644
--- a/src/components/Contact.astro
+++ b/src/components/Contact.astro
@@ -1,5 +1,40 @@
 ---
-import { Icon } from 'astro-icon/components'
+import {Icon} from 'astro-icon/components'
+
+interface IContactMedium {
+    href: string,
+    iconName: string,
+    class?: string,
+    iconClass?: string,
+    iconSize?: number,
+}
+
+const baseContactClass = "mx-auto mt-8 rounded-xl border border-gray-800 dark:border-gray-200 py-4 px-8";
+const baseIconClass = "gray-800 dark:gray-100";
+const baseIconSize = 45;
+
+const contactMediums: IContactMedium[] = [
+    {
+        href: "mailto:r.sickenberg@gmail.com",
+        iconName: "arcticons:mail",
+    },
+    {
+        href: "https://github.com/RSickenberg",
+        iconName: "arcticons:github",
+    },
+    {
+        href: "https://www.linkedin.com/in/romain-sickenberg",
+        iconName: "arcticons:linkedin",
+    },
+    {
+        href: "https://twitter.com/haux49",
+        iconName: "arcticons:x-twitter",
+    },
+    {
+        href: "/assets/pdf/onepage.pdf",
+        iconName: "arcticons:document-viewer",
+    },
+];
 ---
 
 <section class="min-h-screen flex justify-center items-center">
@@ -7,44 +42,22 @@ import { Icon } from 'astro-icon/components'
         <article class="py-6 px-8 text-center sm:text-left">
             <h2 class="text-4xl dark:text-white text-black font-bold opacity-0 contact-me">Say Hello!</h2>
             <!-- Line -->
-            <div class="h-16 w-0.5 bg-gray-700 dark:bg-gray-200 my-6 mx-auto md:m-6 line opacity-0" />
+            <div class="h-16 w-0.5 bg-gray-700 dark:bg-gray-200 my-6 mx-auto md:m-6 line opacity-0"/>
             <div class="opacity-0 text-center sm:text-left contact-me-methods">
                 <p class="text-center md:text-justify">
-                    Here are few ways to learn more of me!<br> If you have a project, an idea or a coffee to share, be free to contact me!<br><br>
-                    I'll try my best to make it <a class="underline decoration-2 decoration-gray-500 dark:decoration-gray-200">for you</a>.
+                    Here are few ways to learn more of me!<br> If you have a project, an idea or a coffee to share, be
+                    free to contact me!<br><br>
+                    I'll try my best to make it <a
+                        class="underline decoration-2 decoration-gray-500 dark:decoration-gray-200">for you</a>.
                 </p>
 
-                <div class="grid grid-cols-2 md:grid-cols-5 gap-3 md:gap-4">
-                    <a
-                            href="mailto:r.sickenberg@gmail.com"
-                            class="mx-auto mt-8 inline-flex border border-gray-800 dark:border-gray-200 py-4 px-8 items-center"
-                    >
-                        <Icon name="arcticons:mail" size="45" class="gray-800 dark:gray-100"/>
-                    </a>
-                    <a
-                            href="https://github.com/RSickenberg"
-                            class="mx-auto mt-8 inline-flex border border-gray-800 dark:border-gray-200 py-4 px-8 items-center"
-                    >
-                        <Icon name="arcticons:github" size="45" class="gray-800 dark:gray-100" />
-                    </a>
-                    <a
-                            href="https://www.linkedin.com/in/romain-sickenberg"
-                            class="mx-auto mt-8 inline-flex border border-gray-800 dark:border-gray-200 py-4 px-8 items-center"
-                    >
-                        <Icon name="arcticons:linkedin" size="45" class="gray-800 dark:gray-100" />
-                    </a>
-                    <a
-                            href="https://twitter.com/haux49"
-                            class="mx-auto mt-8 inline-flex border border-gray-800 dark:border-gray-200 py-4 px-8 items-center"
-                    >
-                        <Icon name="arcticons:x-twitter" size="45" class="gray-800 dark:gray-100" />
-                    </a>
-                    <a
-                            href="/assets/pdf/onepage.pdf"
-                            class="mx-auto mt-8 inline-flex border border-gray-800 dark:border-gray-200 py-4 px-8 items-center"
-                    >
-                        <Icon name="arcticons:document-viewer" size="45" class="gray-800 dark:gray-100" />
-                    </a>
+                <div class=`grid grid-cols-2 md:grid-cols-${contactMediums.length} gap-3 md:gap-4`>
+                    {contactMediums.map((medium => {
+                        return <a href={medium.href} class={medium.class ?? baseContactClass}>
+                            <Icon name={medium.iconName} size={medium.iconSize ?? baseIconSize}
+                                  class={medium.iconClass ?? baseIconClass}/>
+                        </a>
+                    }))}
                 </div>
             </div>
         </article>