diff --git a/.eslintrc.js b/.eslintrc.js
index 2bf4e26..721fbad 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -28,6 +28,7 @@ module.exports = {
 	rules: {
 		'react/prop-types': 'off', // Disable prop-types as we use TypeScript for type checking
 		'@typescript-eslint/explicit-function-return-type': 'off',
+		'@typescript-eslint/no-explicit-any': 'off',
 		'@typescript-eslint/explicit-module-boundary-types': 'off',
 	},
 	overrides: [
diff --git a/babel-plugin-macros.config.js b/babel-plugin-macros.config.js
deleted file mode 100644
index f893a0e..0000000
--- a/babel-plugin-macros.config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-module.exports = {
-	twin: {
-		config: 'tailwind.config.js',
-		preset: 'emotion',
-		debugProp: true,
-		debugPlugins: false,
-		debug: false,
-	},
-};
diff --git a/gatsby-browser.js b/gatsby-browser.js
index 8ac0335..eb4a188 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -1,11 +1 @@
-/**
- * Implement Gatsby's Browser APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/browser-apis/
- */
-
-// You can delete this file if you're not using it
-
-import 'tailwindcss/dist/base.min.css';
-import 'tailwindcss/dist/components.css';
-import 'tailwindcss/dist/utilities.css';
+import './src/index.css';
diff --git a/gatsby-config.js b/gatsby-config.js
index b2bfd00..d654e5b 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -5,6 +5,7 @@ module.exports = {
 		author: `@gatsbyjs`,
 	},
 	plugins: [
+		`gatsby-plugin-postcss`,
 		`gatsby-plugin-emotion`,
 		`gatsby-plugin-react-helmet`,
 		{
diff --git a/package-lock.json b/package-lock.json
index f81084c..b94bf27 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8857,6 +8857,16 @@
         "micromatch": "^3.1.10"
       }
     },
+    "gatsby-plugin-postcss": {
+      "version": "2.3.11",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-postcss/-/gatsby-plugin-postcss-2.3.11.tgz",
+      "integrity": "sha512-IHZ2s0iLspL3spYKpFz4SUqQHPPImvPhvVAFEBkGNRA65ffmgOLqucsaXzINjFcpdy5o3+dS+GJuMePaSGYIbg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.10.3",
+        "postcss-loader": "^3.0.0"
+      }
+    },
     "gatsby-plugin-react-helmet": {
       "version": "3.3.10",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-3.3.10.tgz",
diff --git a/package.json b/package.json
index 6c65ff9..146a29a 100644
--- a/package.json
+++ b/package.json
@@ -23,11 +23,13 @@
     "@emotion/styled": "^10.0.27",
     "@typescript-eslint/eslint-plugin": "^3.8.0",
     "@typescript-eslint/parser": "^3.8.0",
+    "autoprefixer": "^9.8.6",
     "eslint": "^7.6.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.5",
     "gatsby-plugin-emotion": "^4.3.10",
+    "gatsby-plugin-postcss": "^2.3.11",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.11",
     "prettier": "2.0.5",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..8a91d5f
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,3 @@
+module.exports = () => ({
+	plugins: [require('tailwindcss'), require('autoprefixer')],
+});
diff --git a/src/components/home/Headline.tsx b/src/components/home/Headline.tsx
index a5c4513..d91b09e 100644
--- a/src/components/home/Headline.tsx
+++ b/src/components/home/Headline.tsx
@@ -1,14 +1,22 @@
 import React from 'react';
 import tw, { styled } from 'twin.macro';
+import { Button } from '~/components/ui/controls/Button';
 
-const HeadlineContainer = styled.div`
-	${tw`flex justify-between`}
+const Root = styled.header`
+	${tw`bg-gray-200 py-5`}
 `;
+
+const Container = styled.div`
+	${tw`container flex justify-between items-center`}
+`;
+
 export default function Headline() {
 	return (
-		<HeadlineContainer>
-			<span>Here</span>
-			<div>Another one</div>
-		</HeadlineContainer>
+		<Root>
+			<Container>
+				<span>Here</span>
+				<Button>CONTACT ME</Button>
+			</Container>
+		</Root>
 	);
 }
diff --git a/src/components/ui/controls/Button.tsx b/src/components/ui/controls/Button.tsx
new file mode 100644
index 0000000..8f1d35f
--- /dev/null
+++ b/src/components/ui/controls/Button.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import 'twin.macro';
+
+type Props = {
+	size?: 'sm' | 'lg';
+	bgColor?: string;
+	rounded?: boolean;
+	textColor?: string;
+	children: any;
+};
+export const Button: React.FC<Props> = ({
+	size = 'sm',
+	bgColor = 'cta',
+	textColor = 'white',
+	children,
+	rounded = true,
+}) => {
+	const sizeClass =
+		{
+			sm: 'text-xs',
+			lg: 'text-xl',
+		}[size] || '';
+
+	let bgClass = '';
+	if (bgColor) {
+		bgClass = `bg-${bgColor}`;
+	}
+
+	return (
+		<button
+			className={`${bgClass} text-${textColor} ${sizeClass} font-semibold py-2 px-4 ${
+				rounded ? 'rounded' : ''
+			}`}
+		>
+			{children}
+		</button>
+	);
+};
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
index 59253e3..8973dc9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,23 @@
 module.exports = {
 	purge: ['./src/**/*.js', './src/**/*.jsx', './src/**/*.ts', './src/**/*.tsx'],
 	theme: {
-		extend: {},
+		extend: {
+			colors: {
+				secondary: '#d1e0f4',
+				primary: '#0288d1',
+				cta: '#d10220',
+				info: '#2ecbf6',
+				warning: '#e4ca52',
+				success: '#49d96a',
+				danger: '#e75160',
+			},
+		},
+		container: {
+			center: true,
+		},
+	},
+	corePlugins: {
+		container: true,
 	},
 	variants: {},
 	plugins: [],