diff --git a/src/components/pages/Front.page.js b/src/components/pages/Front.page.js
index 6c84ab5..495a020 100644
--- a/src/components/pages/Front.page.js
+++ b/src/components/pages/Front.page.js
@@ -11,6 +11,7 @@ import React from 'react';
 import AppearText from '../text/AppearText';
 import Cdiv from '../core/Cdiv';
 import FadeComponent from '../core/FadeComponent';
+import Introduction from '../sections/Introduction';
 
 //============================================================
 // Component
@@ -67,8 +68,10 @@ const FrontPage = () => {
               d="M0,96L80,85.3C160,75,320,53,480,58.7C640,64,800,96,960,101.3C1120,107,1280,85,1360,74.7L1440,64L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
           </svg>
         </FadeComponent>
+        <FadeComponent delay={2500}>
+          <Introduction />
+        </FadeComponent>
       </div>
-      <Cdiv className="bg-frost-200"></Cdiv>
     </>
   );
 };
diff --git a/src/components/sections/Introduction.js b/src/components/sections/Introduction.js
new file mode 100644
index 0000000..c5e71a5
--- /dev/null
+++ b/src/components/sections/Introduction.js
@@ -0,0 +1,25 @@
+//============================================================
+// Essential Imports
+//============================================================
+
+import React from 'react';
+
+//============================================================
+// Component
+//============================================================
+
+const Introduction = () => {
+  return (
+    <div className="w-full flex justify-center bg-frost-200">
+      <div className="w-full max-w-5xl flex flex-col">
+        <h1 className="text-7xl font-display font-bold text-polar-night-400">Hi, I'm John</h1>
+        <br />
+        <p className="text-xl text-polar-night-400">
+          Eu eu laborum in ea enim. Anim reprehenderit quis magna sint nulla aliquip ullamco aliquip
+          ad cillum nisi tempor id. Ea eu et irure cupidatat. Amet duis in id cupidatat.
+        </p>
+      </div>
+    </div>
+  );
+};
+export default Introduction;
diff --git a/src/fonts/Calibre/CalibreBlack.otf b/src/fonts/Calibre/CalibreBlack.otf
new file mode 100644
index 0000000..0537913
Binary files /dev/null and b/src/fonts/Calibre/CalibreBlack.otf differ
diff --git a/src/fonts/Calibre/CalibreBlackItalic.otf b/src/fonts/Calibre/CalibreBlackItalic.otf
new file mode 100644
index 0000000..a58a59c
Binary files /dev/null and b/src/fonts/Calibre/CalibreBlackItalic.otf differ
diff --git a/src/fonts/Calibre/CalibreBold.otf b/src/fonts/Calibre/CalibreBold.otf
new file mode 100644
index 0000000..d510929
Binary files /dev/null and b/src/fonts/Calibre/CalibreBold.otf differ
diff --git a/src/fonts/Calibre/CalibreBoldItalic.otf b/src/fonts/Calibre/CalibreBoldItalic.otf
new file mode 100644
index 0000000..5805531
Binary files /dev/null and b/src/fonts/Calibre/CalibreBoldItalic.otf differ
diff --git a/src/fonts/Calibre/CalibreLight.otf b/src/fonts/Calibre/CalibreLight.otf
new file mode 100644
index 0000000..741c3f6
Binary files /dev/null and b/src/fonts/Calibre/CalibreLight.otf differ
diff --git a/src/fonts/Calibre/CalibreLightItalic.otf b/src/fonts/Calibre/CalibreLightItalic.otf
new file mode 100644
index 0000000..595e7f4
Binary files /dev/null and b/src/fonts/Calibre/CalibreLightItalic.otf differ
diff --git a/src/fonts/Calibre/CalibreMedium.otf b/src/fonts/Calibre/CalibreMedium.otf
new file mode 100644
index 0000000..f9f11eb
Binary files /dev/null and b/src/fonts/Calibre/CalibreMedium.otf differ
diff --git a/src/fonts/Calibre/CalibreMediumItalic.otf b/src/fonts/Calibre/CalibreMediumItalic.otf
new file mode 100644
index 0000000..472a401
Binary files /dev/null and b/src/fonts/Calibre/CalibreMediumItalic.otf differ
diff --git a/src/fonts/Calibre/CalibreRegular.otf b/src/fonts/Calibre/CalibreRegular.otf
new file mode 100644
index 0000000..3801b70
Binary files /dev/null and b/src/fonts/Calibre/CalibreRegular.otf differ
diff --git a/src/fonts/Calibre/CalibreRegularItalic.otf b/src/fonts/Calibre/CalibreRegularItalic.otf
new file mode 100644
index 0000000..1b3b4f6
Binary files /dev/null and b/src/fonts/Calibre/CalibreRegularItalic.otf differ
diff --git a/src/fonts/Calibre/CalibreSemibold.otf b/src/fonts/Calibre/CalibreSemibold.otf
new file mode 100644
index 0000000..b30ed49
Binary files /dev/null and b/src/fonts/Calibre/CalibreSemibold.otf differ
diff --git a/src/fonts/Calibre/CalibreSemiboldItalic.otf b/src/fonts/Calibre/CalibreSemiboldItalic.otf
new file mode 100644
index 0000000..302ee9f
Binary files /dev/null and b/src/fonts/Calibre/CalibreSemiboldItalic.otf differ
diff --git a/src/fonts/Calibre/CalibreThin.otf b/src/fonts/Calibre/CalibreThin.otf
new file mode 100644
index 0000000..44f9382
Binary files /dev/null and b/src/fonts/Calibre/CalibreThin.otf differ
diff --git a/src/fonts/Calibre/CalibreThinItalic.otf b/src/fonts/Calibre/CalibreThinItalic.otf
new file mode 100644
index 0000000..8f826be
Binary files /dev/null and b/src/fonts/Calibre/CalibreThinItalic.otf differ
diff --git a/tailwind.config.js b/tailwind.config.js
index 943293a..1335791 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,35 +1,35 @@
 module.exports = {
   content: ['./src/**/*.{js, jsx}'],
   theme: {
-    colors: {
-      'polar-night': {
-        100: '#4C566A',
-        200: '#434C5E',
-        300: '#3B4252',
-        400: '#2E3440',
-      },
-      'snow-storm': {
-        100: '#ECEFF4',
-        200: '#E5E9F0',
-        300: '#D8DEE9',
-      },
-      frost: {
-        100: '#8FBCBB',
-        200: '#88C0D0',
-        300: '#81A1C1',
-        400: '#5E81AC',
-      },
-      aurora: {
-        red: '#BF616A',
-        orange: '#D08770',
-        yellow: '#EBCB8B',
-        green: '#A3BE8C',
-        purple: '#B48EAD',
-      },
-    },
     extend: {
+      colors: {
+        'polar-night': {
+          100: '#4C566A',
+          200: '#434C5E',
+          300: '#3B4252',
+          400: '#2E3440',
+        },
+        'snow-storm': {
+          100: '#ECEFF4',
+          200: '#E5E9F0',
+          300: '#D8DEE9',
+        },
+        frost: {
+          100: '#8FBCBB',
+          200: '#88C0D0',
+          300: '#81A1C1',
+          400: '#5E81AC',
+        },
+        aurora: {
+          red: '#BF616A',
+          orange: '#D08770',
+          yellow: '#EBCB8B',
+          green: '#A3BE8C',
+          purple: '#B48EAD',
+        },
+      },
       fontFamily: {
-        display: ['Open Sans'],
+        display: ['Calibre'],
       },
     },
   },
diff --git a/webpack.config.js b/webpack.config.js
index 8eb9530..2ff32dc 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -27,6 +27,18 @@ module.exports = {
         include: path.resolve(__dirname, 'src'),
         use: ['style-loader', 'css-loader', 'postcss-loader'],
       },
+      {
+        test: /\.(woff(2)?|ttf|eot|otf)(\?v=\d+\.\d+\.\d+)?$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: 'fonts/',
+            },
+          },
+        ],
+      },
     ],
   },
   plugins: [