diff --git a/components/personal-card/elements/ContactsButtons.tsx b/components/personal-card/elements/ContactsButtons.tsx
index 0cfe13d..f0f97b7 100644
--- a/components/personal-card/elements/ContactsButtons.tsx
+++ b/components/personal-card/elements/ContactsButtons.tsx
@@ -30,15 +30,17 @@ const typeToIcon: { [key in ContactType]: [IconDefinition, string?] } = {
 const ContactComp = ({ id, type }: Contact) => {
   const iconDescr = typeToIcon[type];
   return (
-    <a
-      className={'text-5xl p-3 text-gray-600' + ' ' + iconDescr[1]}
-      href={contactToLink({ id, type })}
-      target="_blank">
-      <FontAwesomeIcon key={type} icon={iconDescr[0]} />
-    </a>
+    <div className={'p-3 '}>
+      <a
+        className={'text-5xl text-gray-600' + ' ' + iconDescr[1]}
+        href={contactToLink({ id, type })}
+        target="_blank">
+        <FontAwesomeIcon key={type} icon={iconDescr[0]} />
+      </a>
+    </div>
   );
 };
 
 export default ({ contacts }: Props) => (
-  <div className={'text-center'}>{contacts.map((c) => ContactComp(c))}</div>
+  <div className={'flex flex-row  justify-center'}>{contacts.map((c) => ContactComp(c))}</div>
 );
diff --git a/pages/index.tsx b/pages/index.tsx
index 35cc3fa..2299110 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -4,7 +4,7 @@ import PersonalCard from '../components/personal-card/PersonalCard';
 
 const Home = () => {
   return (
-    <div className="bg-gray-100 flex flex-col h-screen justify-between">
+    <div className="bg-gray-50 flex flex-col h-auto justify-between">
       <PersonalCard />
       <Footer />
     </div>