diff --git a/assets/scss/header.scss b/assets/scss/header.scss
index 2e32c0b..895dd7d 100644
--- a/assets/scss/header.scss
+++ b/assets/scss/header.scss
@@ -94,18 +94,6 @@
     display: block;
 }
 
-.header-contact-button {
-    background-color: {{ .Site.Params.color.primary }};
-    color: white;
-    border-radius: 4px;
-    padding: 0.5rem 1.5rem;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 1rem;
-    margin-left: 2.5rem
-}
-
 @media screen and (max-width: 600px) {
     .header {
         padding: 0.5rem;
diff --git a/assets/scss/hero.scss b/assets/scss/hero.scss
index 0b61ffe..9b17d53 100644
--- a/assets/scss/hero.scss
+++ b/assets/scss/hero.scss
@@ -1,25 +1,14 @@
 .hero {
     height: 700px;
-    background-image: url({{ .hero.background }}) !important;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center center;
+    {{ with .hero.background }}
+        background-image: url({{ . }}) !important;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+    {{ end }}
 }
 
 .hero-icon-container {
     padding: 1rem;
     margin: auto;
-}
-
-.hero-button {
-    background-color: {{ .color.primary }};
-    color: white;
-    border: 2px solid {{ .color.primary }};
-    border-radius: 4px;
-    padding: 0.5rem 1.5rem;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 1rem;
-    margin-top: 1rem;
 }
\ No newline at end of file
diff --git a/assets/scss/index.scss b/assets/scss/index.scss
index 1c10bb0..44b4835 100644
--- a/assets/scss/index.scss
+++ b/assets/scss/index.scss
@@ -1,11 +1,25 @@
-$font: {{ .Param "font" }};
+$font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 
-@font-face {
-    font-family: $font;
-    src: url("/fonts/#{$font}/#{$font}-Regular.woff2") format('woff2');
-    font-weight: 400;
-    font-style: normal;
-}
+{{ with .Site.Params.font }}
+
+    {{ if .name }}
+
+        $font: {{ .name }} !important;
+
+    {{ end }}
+
+    {{ if .url }}
+
+        @font-face {
+            font-family: $font;
+            src: url({{ .url }}) format( {{ .format | default "ttf" }} );
+            font-weight: 400;
+            font-style: normal;
+        }
+
+    {{ end }}
+
+{{ end }}
 
 * {
     box-sizing: border-box;
@@ -25,7 +39,7 @@ body {
     display: flex;
     flex-direction: column;
     color: #333;
-    font-family: $font !important;
+    font-family: $font;
     font-weight: 400;
     font-style: normal;
 }
@@ -332,7 +346,19 @@ button {
     object-fit: contain;
 }
 
-.service-button {
+.button-filled {
+    background-color: {{ .Site.Params.color.primary }};
+    color: white;
+    border: 2px solid {{ .Site.Params.color.primary }};
+    border-radius: 4px;
+    padding: 0.5rem 1.5rem;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 1rem;
+}
+
+.button-outlined {
     background-color: transparent;
     color: {{ .Site.Params.color.primary }};
     border: 2px solid {{ .Site.Params.color.primary }};
@@ -342,10 +368,9 @@ button {
     text-decoration: none;
     display: inline-block;
     font-size: 1rem;
-    margin-top: 2rem;
 }
 
-.service-button:hover {
+.button-outlined:hover {
     background-color: {{ .Site.Params.color.primary }};
     color: white;
 }
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index d349f6c..dbafc46 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -27,7 +27,7 @@
       {{ $pages := where $.Site.RegularPages "Section" $id }}
       {{- partial "team.html" (dict "id" $id "team" .Params "pages" $pages "defaultimage" $.Site.Params.defaultimage "odd" $odd) -}}
     {{ else if eq .Params.type "contact" }}
-      {{- partial "contact.html" (dict "id" $id "contact" .Params "odd" $odd) -}}
+      {{- partial "contact.html" (dict "id" $id "contact" .Params "content" .Content "odd" $odd) -}}
     {{ else if eq .Params.type "logos" }}
       {{- partial "logos.html" (dict "id" $id "logos" .Params "odd" $odd) -}}
     {{ else if eq .Params.type "links" }}
diff --git a/layouts/partials/components/button.html b/layouts/partials/components/button.html
new file mode 100644
index 0000000..e52aa2e
--- /dev/null
+++ b/layouts/partials/components/button.html
@@ -0,0 +1,7 @@
+{{ $outlined := "outlined"}}
+<a class="{{if eq .type $outlined}} button-outlined {{else}} button-filled {{end}}" href="{{ .url }}">
+  {{ with .icon }}
+    <i class="icon-{{ . }}"></i>
+  {{ end }}
+  {{ .text }}
+</a>
\ No newline at end of file
diff --git a/layouts/partials/contact.html b/layouts/partials/contact.html
index 479e3ba..c862789 100644
--- a/layouts/partials/contact.html
+++ b/layouts/partials/contact.html
@@ -1,4 +1,5 @@
 {{- $contact := .contact }}
+{{- $content := .content }}
 {{- $id := "contact"}}
 {{if $contact.id}}
     {{- $id = $contact.id}}
@@ -9,7 +10,7 @@
     <div class="section-content contact">
         <div class="contact-text">
             <h1>{{ $contact.title }}</h1> 
-            <p>{{ $contact.subtitle }}</p>
+            <p>{{ $content }}</p>
         </div>
         <div class="contact-button-container">
             <a class="contact-button" href="{{ $contact.button.url }}">{{ $contact.button.text }}</a>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 4404d2e..cd22901 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -16,23 +16,25 @@
         <a class="home" href="/#"><img id="logo" class="logo" src="{{ .Site.Params.logo }}" alt="Logo"></a>
         <div class="header-items" id="header-items">
             {{- range $links}}
-            {{ if .links }}
-            <div class="header-item dropdown">
-                <button class="dropbtn">{{ .text }} 
-                    <i class="icon-caret-down"></i>
-                </button>
-                <div class="dropdown-content">
-                    {{- range .links}}
-                        <a href="{{ .url }}">{{ .text }}</a>
-                    {{- end }}
-                </div>
-            </div>
-            {{ else }}
-            <a class="header-item" href="{{ .url }}">{{ .text }}</a>
-            {{ end }}
+                {{ if .links }}
+                    <div class="header-item dropdown">
+                        <button class="dropbtn">{{ .text }} 
+                            <i class="icon-caret-down"></i>
+                        </button>
+                        <div class="dropdown-content">
+                            {{- range .links}}
+                                <a href="{{ .url }}">{{ .text }}</a>
+                            {{- end }}
+                        </div>
+                    </div>
+                {{ else }}
+                    <a class="header-item" href="{{ .url }}">{{ .text }}</a>
+                {{ end }}
             {{- end }}
             {{ if $header.button }}
-                <a class="header-contact-button" href="{{ $header.button.url }}">{{ $header.button.text }}</a>
+                {{- range $header.button }}
+                    {{ partial "components/button.html" . }}
+                {{- end }}
             {{ end }}
         </div>
     </div>
diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html
index 63a2897..9343c5c 100644
--- a/layouts/partials/hero.html
+++ b/layouts/partials/hero.html
@@ -21,9 +21,12 @@
                 <div class="divider"></div>
             </div>
             <p>{{ $content }}</p>
-            {{if $hero.button.visible}}
-            <a class="hero-button" href="{{ $hero.button.url }}">{{ $hero.button.text }}</a>
-            {{end}}
+            <br />
+            {{ with $hero.button }}
+                {{- range .}}
+                    {{ partial "components/button.html" . }}
+                {{- end }}
+            {{ end }}
         </div>
         <div class="hero-icon-container col-7">
             <img class="service-icon" alt="{{ $hero.image.alt }}" src="{{ $hero.image.url }}">
diff --git a/layouts/partials/service.html b/layouts/partials/service.html
index 504cb1d..d8449ec 100644
--- a/layouts/partials/service.html
+++ b/layouts/partials/service.html
@@ -20,9 +20,12 @@
                 <div class="divider"></div>
             </div>
             <p>{{ $content }}</p>
-            {{if and ($service.button) ($service.button.visible)}}
-            <a class="service-button" href="{{ $service.button.url }}">{{ $service.button.text }}</a>
-            {{end}}
+            <br />
+            {{ if $service.button }}
+                {{- range $service.button }}
+                    {{ partial "components/button.html" . }}
+                {{- end }}
+            {{ end }}
         </div>
         {{if and ($service.image) (eq $service.image.direction "right")}}
         <div class="service-icon-container col-4">