diff --git a/App.tsx b/App.tsx
index 02911f1..0189c38 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,7 +1,14 @@
+import { useLoadFonts } from '@hooks/useLoadFonts';
 import MainNavigator from '@navigators/MainNavigator';
 import { StatusBar } from 'expo-status-bar';
 
 export default function App() {
+  const { loaded } = useLoadFonts();
+
+  if (!loaded) {
+    return null;
+  }
+
   return (
     <>
       <StatusBar style="auto" />
diff --git a/assets/fonts/Poppins-Bold.ttf b/assets/fonts/Poppins-Bold.ttf
new file mode 100644
index 0000000..00559ee
Binary files /dev/null and b/assets/fonts/Poppins-Bold.ttf differ
diff --git a/assets/fonts/Poppins-Medium.ttf b/assets/fonts/Poppins-Medium.ttf
new file mode 100644
index 0000000..6bcdcc2
Binary files /dev/null and b/assets/fonts/Poppins-Medium.ttf differ
diff --git a/assets/fonts/Poppins-Regular.ttf b/assets/fonts/Poppins-Regular.ttf
new file mode 100644
index 0000000..9f0c71b
Binary files /dev/null and b/assets/fonts/Poppins-Regular.ttf differ
diff --git a/assets/fonts/Poppins-SemiBold.ttf b/assets/fonts/Poppins-SemiBold.ttf
new file mode 100644
index 0000000..74c726e
Binary files /dev/null and b/assets/fonts/Poppins-SemiBold.ttf differ
diff --git a/babel.config.js b/babel.config.js
index afc68a6..140b8be 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -10,6 +10,7 @@ module.exports = function (api) {
         {
           root: ['./src'],
           alias: {
+            '@hooks': './src/hooks',
             '@theme': './src/theme',
             '@screens': './src/screens',
             '@components': './src/components',
diff --git a/src/components/core/Button.tsx b/src/components/core/Button.tsx
index 7bf60c5..6cca554 100644
--- a/src/components/core/Button.tsx
+++ b/src/components/core/Button.tsx
@@ -7,7 +7,7 @@ type Props = {
 };
 
 const Button = ({ title, onPress }: Props) => (
-  <TouchableOpacity onPress={onPress} className="px-6 py-2.5 bg-slate-500 rounded-md">
+  <TouchableOpacity onPress={onPress} className="px-6 py-2.5 bg-teal-600 rounded-md">
     <Text className={text({ type: 'headline', isCenter: true, class: 'text-white' })}>{title}</Text>
   </TouchableOpacity>
 );
diff --git a/src/hooks/useLoadFonts.ts b/src/hooks/useLoadFonts.ts
new file mode 100644
index 0000000..8c33e12
--- /dev/null
+++ b/src/hooks/useLoadFonts.ts
@@ -0,0 +1,12 @@
+import { useFonts } from 'expo-font';
+
+export const useLoadFonts = () => {
+  const [loaded] = useFonts({
+    Bold: require('../../assets/fonts/Poppins-Bold.ttf'),
+    Medium: require('../../assets/fonts/Poppins-Medium.ttf'),
+    Regular: require('../../assets/fonts/Poppins-Regular.ttf'),
+    SemiBold: require('../../assets/fonts/Poppins-SemiBold.ttf'),
+  });
+
+  return { loaded };
+};
diff --git a/src/screens/Test/index.tsx b/src/screens/Test/index.tsx
index 312278e..4c755a3 100644
--- a/src/screens/Test/index.tsx
+++ b/src/screens/Test/index.tsx
@@ -6,7 +6,7 @@ const TestScreen = () => (
   <SafeAreaView>
     <View className="px-4">
       <Text className={text({ type: 'title1', class: 'my-2' })}>Test Screen</Text>
-      <Button title="Press me!" />
+      <Button title="Get Your Website" />
     </View>
   </SafeAreaView>
 );
diff --git a/tsconfig.json b/tsconfig.json
index 1bfd629..95fdfc5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,6 +4,7 @@
     "strict": true,
     "baseUrl": "./src",
     "paths": {
+      "@hooks/*": ["./hooks/*"],
       "@theme/*": ["./theme/*"],
       "@screens/*":["./screens/*"],
       "@components/*": ["./components/*"],