diff --git a/src/components/Card.js b/src/components/Card.js
index 6e8931e..e8f183f 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -4,7 +4,7 @@ import Link from 'gatsby-link'
 import ImgSprint from '../images/wow-we-did-design-sprint-remotely.png'
 
 const Card = ({ ...props }) => (
-  <div className="m-3 w-full rounded overflow-hidden shadow-lg">
+  <div className="m-4 w-full rounded overflow-hidden shadow-md hover:shadow-lg">
     <img className="w-full" src={ImgSprint} alt="Sprint Work" />
     <div className="px-6 py-4">
       <div className="font-bold text-xl mb-2">
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 258ab5c..6eb3579 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -5,34 +5,64 @@ import Button from './Button'
 import LogoSaburly from '../images/logo-saburly-colorful.svg'
 
 let menuClasses =
-  'no-underline mt-4 lg:inline-block opacity-75 lg:mt-0 text-white  hover:opacity-100 uppercase mr-4'
+  'no-underline mt-4 lg:inline-block opacity-100 lg:mt-0 text-white  hover:opacity-100 uppercase mr-4'
 
 const Footer = () => (
   <footer className="bg-indigo-darker">
-    <img src={LogoSaburly} alt="Saburly Logo" className="max-w-xs" />
-    <p className="text-white font-light">
-      Nam imperdiet et massa ut lacinia. Praesent nec sem ut sem efficitur
-      imperdiet.
-    </p>
-    <h4>Home</h4>
-    <ul className="text-sm">
-      <Link to="/services">
-        <li className={menuClasses}>What We Do</li>
-      </Link>
-      <Link to="/about">
-        <li className={menuClasses}>TEAM</li>
-      </Link>
-      <Link to="/blog">
-        <li className={menuClasses}>BLOG</li>
-      </Link>
-    </ul>
+    <div className="container mx-auto pt-10 pb-10 lg:flex">
+      <div className="lg:w-1/4 p-4">
+        <img src={LogoSaburly} alt="Saburly Logo" className="max-w-full" />
+        <a href="mailto:info@saburly.com">E: info@saburly.com</a>
+        <a href="tel:+46760477717">P: +46760477717</a>
+      </div>
 
-    <Button
-      text="Contact Us"
-      standard
-      classes="rounded-full text-white hover:shadow"
-      url="/contact"
-    />
+      <div className="lg:w-3/4 ml-10 p-4">
+        <div className="lg:flex items-center justify-between">
+          <h3 className="text-white font-light">
+            Let's start a new project together
+          </h3>
+          <Button
+            text="Contact Us"
+            standard
+            classes="rounded-full text-white hover:shadow"
+            url="/contact"
+          />
+        </div>
+
+        <div className="mt-4 lg:flex justify-between">
+          <nav>
+            <p className="font-thin text-white opacity-70">Sitemap</p>
+            <ul className="list-reset text-sm inline-block">
+              <Link className="block my-2" to="/">
+                <li className={menuClasses}>Home</li>
+              </Link>
+              <Link className="block my-2" to="/services">
+                <li className={menuClasses}>What We Do</li>
+              </Link>
+              <Link className="block my-2" to="/about">
+                <li className={menuClasses}>TEAM</li>
+              </Link>
+              <Link className="block my-2" to="/blog">
+                <li className={menuClasses}>BLOG</li>
+              </Link>
+            </ul>
+          </nav>
+          <div>
+            <p className="font-thin text-white opacity-70">Office - Sweden</p>
+            <p className="text-white my-2 leading-normal">
+              Saburly AB<br />Vretenvägen 13<br />171 54 Solna<br />Sweden
+            </p>
+          </div>
+          <div>
+            <p className="font-thin text-white opacity-70">Office - Bosnia</p>
+            <p className="text-white my-2 leading-normal">
+              Saburly d.o.o<br />Hakije Turajlica 2<br />71 000 Sarajevo<br />Bosnia
+              & Herzegovina
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
   </footer>
 )
 
diff --git a/src/components/Header.js b/src/components/Header.js
index 55a4c43..a25033d 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -22,7 +22,7 @@ const Header = () => (
       </button>
 
       <div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-right lg:w-auto justify-end lg:flex-grow">
-        <ul className="text-sm">
+        <ul className="list-reset text-sm">
           <Link to="/services">
             <li className={menuClasses}>What We Do</li>
           </Link>
diff --git a/src/components/SectionIntro.js b/src/components/SectionIntro.js
index a0e8f5d..4c1be0b 100644
--- a/src/components/SectionIntro.js
+++ b/src/components/SectionIntro.js
@@ -22,7 +22,7 @@ const IntroDefault = ({ ...props }) => (
     </h1>
     <p
       className={`${props.light ? headlineDark : ''} 
-    font-light leading-normal opacity-75`}
+    font-light leading-normal opacity-70`}
     >
       {props.text}
     </p>
diff --git a/src/components/Service.js b/src/components/Service.js
index e9f5d52..6b065bf 100644
--- a/src/components/Service.js
+++ b/src/components/Service.js
@@ -9,7 +9,7 @@ const Service = ({ ...props }) => (
       alt={`${props.title} agency`}
     />
     <InfoBox
-      classes="bg-white p-8 shadow lg:m-0 opacity-75 lg:max-w-sm"
+      classes="bg-white p-8 shadow lg:m-0 opacity-70 lg:max-w-sm"
       headline={props.title}
       text={props.text}
     />
diff --git a/src/pages/index.js b/src/pages/index.js
index 41150be..9445a1f 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -55,7 +55,7 @@ const IndexPage = () => (
         classes="max-w-lg m-auto"
         intro="Services"
         headline="Because beautiful code makes our heart pound"
-        text="We have a passion for great software and design with the help of modern technologies. Custom end-to-end solutions is our speciality and our skilled team can even help you with initial analysis, architecture design, testing and deployments"
+        text="We have a passion for great software and design with the help of modern technologies. Our speciality is custom end-to-end solutions and our skilled team can even help you with initial analysis, architecture design, testing and deployments"
       />
     </section>
 
@@ -130,7 +130,7 @@ const IndexPage = () => (
       />
     </section>
 
-    <section className="text-center p-3">
+    <section className="container mx-auto text-center p-3">
       <SectionIntro
         intro="Blog & Social Media"
         headline="But occasionally we find the time to have fun and publish stuff"
@@ -138,9 +138,13 @@ const IndexPage = () => (
       <div className="lg:flex justify-center mt-8">
         <Card />
         <Card />
-        <Card />
       </div>
-      <Button filled text="More Posts" url="/blog" classes="rounded-full" />
+      <Button
+        standard
+        text="More Posts"
+        url="/blog"
+        classes="mt-2 mb-8 rounded-full text-grey-darker hover:shadow"
+      />
     </section>
   </main>
 )
diff --git a/src/styles/custom.css b/src/styles/custom.css
index 8fcfa6d..32cfbcb 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -10,12 +10,14 @@
 .bg-saburly-indigo svg {
   position: absolute;
   bottom: 0;
+  margin-bottom: -1px;
 }
 
 .bg-saburly-indigolight svg {
   position: absolute;
   top: 0;
   transform: rotate(180deg);
+  margin-top: -1px;
 }
 
 .bg-saburly-indigolight {
diff --git a/src/styles/index.css b/src/styles/index.css
index bf7c28b..64fab05 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -3402,12 +3402,28 @@ table {
   opacity: .25;
 }
 
+.opacity-30 {
+  opacity: .3;
+}
+
 .opacity-50 {
   opacity: .5;
 }
 
-.opacity-75 {
-  opacity: .75;
+.opacity-60 {
+  opacity: .6;
+}
+
+.opacity-70 {
+  opacity: .7;
+}
+
+.opacity-80 {
+  opacity: .8;
+}
+
+.opacity-90 {
+  opacity: .9;
 }
 
 .opacity-100 {
@@ -3422,12 +3438,28 @@ table {
   opacity: .25;
 }
 
+.hover\:opacity-30:hover {
+  opacity: .3;
+}
+
 .hover\:opacity-50:hover {
   opacity: .5;
 }
 
-.hover\:opacity-75:hover {
-  opacity: .75;
+.hover\:opacity-60:hover {
+  opacity: .6;
+}
+
+.hover\:opacity-70:hover {
+  opacity: .7;
+}
+
+.hover\:opacity-80:hover {
+  opacity: .8;
+}
+
+.hover\:opacity-90:hover {
+  opacity: .9;
 }
 
 .hover\:opacity-100:hover {
@@ -7646,12 +7678,28 @@ table {
     opacity: .25;
   }
 
+  .sm\:opacity-30 {
+    opacity: .3;
+  }
+
   .sm\:opacity-50 {
     opacity: .5;
   }
 
-  .sm\:opacity-75 {
-    opacity: .75;
+  .sm\:opacity-60 {
+    opacity: .6;
+  }
+
+  .sm\:opacity-70 {
+    opacity: .7;
+  }
+
+  .sm\:opacity-80 {
+    opacity: .8;
+  }
+
+  .sm\:opacity-90 {
+    opacity: .9;
   }
 
   .sm\:opacity-100 {
@@ -7666,12 +7714,28 @@ table {
     opacity: .25;
   }
 
+  .sm\:hover\:opacity-30:hover {
+    opacity: .3;
+  }
+
   .sm\:hover\:opacity-50:hover {
     opacity: .5;
   }
 
-  .sm\:hover\:opacity-75:hover {
-    opacity: .75;
+  .sm\:hover\:opacity-60:hover {
+    opacity: .6;
+  }
+
+  .sm\:hover\:opacity-70:hover {
+    opacity: .7;
+  }
+
+  .sm\:hover\:opacity-80:hover {
+    opacity: .8;
+  }
+
+  .sm\:hover\:opacity-90:hover {
+    opacity: .9;
   }
 
   .sm\:hover\:opacity-100:hover {
@@ -11875,12 +11939,28 @@ table {
     opacity: .25;
   }
 
+  .md\:opacity-30 {
+    opacity: .3;
+  }
+
   .md\:opacity-50 {
     opacity: .5;
   }
 
-  .md\:opacity-75 {
-    opacity: .75;
+  .md\:opacity-60 {
+    opacity: .6;
+  }
+
+  .md\:opacity-70 {
+    opacity: .7;
+  }
+
+  .md\:opacity-80 {
+    opacity: .8;
+  }
+
+  .md\:opacity-90 {
+    opacity: .9;
   }
 
   .md\:opacity-100 {
@@ -11895,12 +11975,28 @@ table {
     opacity: .25;
   }
 
+  .md\:hover\:opacity-30:hover {
+    opacity: .3;
+  }
+
   .md\:hover\:opacity-50:hover {
     opacity: .5;
   }
 
-  .md\:hover\:opacity-75:hover {
-    opacity: .75;
+  .md\:hover\:opacity-60:hover {
+    opacity: .6;
+  }
+
+  .md\:hover\:opacity-70:hover {
+    opacity: .7;
+  }
+
+  .md\:hover\:opacity-80:hover {
+    opacity: .8;
+  }
+
+  .md\:hover\:opacity-90:hover {
+    opacity: .9;
   }
 
   .md\:hover\:opacity-100:hover {
@@ -16104,12 +16200,28 @@ table {
     opacity: .25;
   }
 
+  .lg\:opacity-30 {
+    opacity: .3;
+  }
+
   .lg\:opacity-50 {
     opacity: .5;
   }
 
-  .lg\:opacity-75 {
-    opacity: .75;
+  .lg\:opacity-60 {
+    opacity: .6;
+  }
+
+  .lg\:opacity-70 {
+    opacity: .7;
+  }
+
+  .lg\:opacity-80 {
+    opacity: .8;
+  }
+
+  .lg\:opacity-90 {
+    opacity: .9;
   }
 
   .lg\:opacity-100 {
@@ -16124,12 +16236,28 @@ table {
     opacity: .25;
   }
 
+  .lg\:hover\:opacity-30:hover {
+    opacity: .3;
+  }
+
   .lg\:hover\:opacity-50:hover {
     opacity: .5;
   }
 
-  .lg\:hover\:opacity-75:hover {
-    opacity: .75;
+  .lg\:hover\:opacity-60:hover {
+    opacity: .6;
+  }
+
+  .lg\:hover\:opacity-70:hover {
+    opacity: .7;
+  }
+
+  .lg\:hover\:opacity-80:hover {
+    opacity: .8;
+  }
+
+  .lg\:hover\:opacity-90:hover {
+    opacity: .9;
   }
 
   .lg\:hover\:opacity-100:hover {
@@ -20333,12 +20461,28 @@ table {
     opacity: .25;
   }
 
+  .xl\:opacity-30 {
+    opacity: .3;
+  }
+
   .xl\:opacity-50 {
     opacity: .5;
   }
 
-  .xl\:opacity-75 {
-    opacity: .75;
+  .xl\:opacity-60 {
+    opacity: .6;
+  }
+
+  .xl\:opacity-70 {
+    opacity: .7;
+  }
+
+  .xl\:opacity-80 {
+    opacity: .8;
+  }
+
+  .xl\:opacity-90 {
+    opacity: .9;
   }
 
   .xl\:opacity-100 {
@@ -20353,12 +20497,28 @@ table {
     opacity: .25;
   }
 
+  .xl\:hover\:opacity-30:hover {
+    opacity: .3;
+  }
+
   .xl\:hover\:opacity-50:hover {
     opacity: .5;
   }
 
-  .xl\:hover\:opacity-75:hover {
-    opacity: .75;
+  .xl\:hover\:opacity-60:hover {
+    opacity: .6;
+  }
+
+  .xl\:hover\:opacity-70:hover {
+    opacity: .7;
+  }
+
+  .xl\:hover\:opacity-80:hover {
+    opacity: .8;
+  }
+
+  .xl\:hover\:opacity-90:hover {
+    opacity: .9;
   }
 
   .xl\:hover\:opacity-100:hover {
diff --git a/tailwind.config.js b/tailwind.config.js
index 984c336..6f959a7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -764,8 +764,12 @@ module.exports = {
   opacity: {
     '0': '0',
     '25': '.25',
+    '30': '.3',
     '50': '.5',
-    '75': '.75',
+    '60': '.6',
+    '70': '.7',
+    '80': '.8',
+    '90': '.9',
     '100': '1',
   },