diff --git a/.watchmanconfig b/.watchmanconfig
index 0967ef4..311847d 100644
--- a/.watchmanconfig
+++ b/.watchmanconfig
@@ -1 +1,2 @@
 {}
+
diff --git a/App.js b/App.js
index b9c9a2d..8e4c4aa 100644
--- a/App.js
+++ b/App.js
@@ -1,6 +1,7 @@
-import React from "react";
+import React, {useState} from "react";
 import { Image } from "react-native";
 import { AppLoading } from "expo";
+import { useFonts } from '@use-expo/font';
 import { Asset } from "expo-asset";
 import { Block, GalioProvider } from "galio-framework";
 import { NavigationContainer } from "@react-navigation/native";
@@ -36,44 +37,86 @@ function cacheImages(images) {
   });
 }
 
-export default class App extends React.Component {
-  state = {
-    isLoadingComplete: false
-  };
+export default props => {
+  const [isLoadingComplete, setLoading] = useState(false);
+  let [fontsLoaded] = useFonts({
+    'ArgonExtra': require('./assets/font/argon.ttf'),
+  });
 
-  render() {
-    if (!this.state.isLoadingComplete) {
-      return (
-        <AppLoading
-          startAsync={this._loadResourcesAsync}
-          onError={this._handleLoadingError}
-          onFinish={this._handleFinishLoading}
-        />
-      );
-    } else {
-      return (
-        <NavigationContainer>
-          <GalioProvider theme={argonTheme}>
-            <Block flex>
-              <Screens />
-            </Block>
-          </GalioProvider>
-        </NavigationContainer>
-      );
-    }
+  function _loadResourcesAsync() {
+    console.log('bro');
+    return Promise.all([...cacheImages(assetImages)]);
   }
 
-  _loadResourcesAsync = async () => {
-    return Promise.all([...cacheImages(assetImages)]);
-  };
-
-  _handleLoadingError = error => {
+  function _handleLoadingError(error) {
     // In this case, you might want to report the error to your error
     // reporting service, for example Sentry
     console.warn(error);
   };
 
-  _handleFinishLoading = () => {
-    this.setState({ isLoadingComplete: true });
+ function _handleFinishLoading() {
+    setLoading(true);
   };
+
+  if(!fontsLoaded && !isLoadingComplete) {
+    return (
+      <AppLoading
+        startAsync={_loadResourcesAsync}
+        onError={_handleLoadingError}
+        onFinish={_handleFinishLoading}
+      />
+    );
+  } else if(fontsLoaded) {
+    return (
+      <NavigationContainer>
+        <GalioProvider theme={argonTheme}>
+          <Block flex>
+            <Screens />
+          </Block>
+        </GalioProvider>
+      </NavigationContainer>
+    );
+  }
 }
+
+// export default class App extends React.Component {
+//   state = {
+//     isLoadingComplete: false
+//   };
+
+//   render() {
+//     if (!this.state.isLoadingComplete) {
+//       return (
+//         <AppLoading
+//           startAsync={this._loadResourcesAsync}
+//           onError={this._handleLoadingError}
+//           onFinish={this._handleFinishLoading}
+//         />
+//       );
+//     } else {
+//       return (
+//         <NavigationContainer>
+//           <GalioProvider theme={argonTheme}>
+//             <Block flex>
+//               <Screens />
+//             </Block>
+//           </GalioProvider>
+//         </NavigationContainer>
+//       );
+//     }
+//   }
+
+//   _loadResourcesAsync = async () => {
+//     return Promise.all([...cacheImages(assetImages)]);
+//   };
+
+//   _handleLoadingError = error => {
+//     // In this case, you might want to report the error to your error
+//     // reporting service, for example Sentry
+//     console.warn(error);
+//   };
+
+//   _handleFinishLoading = () => {
+//     this.setState({ isLoadingComplete: true });
+//   };
+// }
diff --git a/package.json b/package.json
index a6648fe..672dcd1 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@react-navigation/drawer": "5.0.0",
     "@react-navigation/native": "5.0.0",
     "@react-navigation/stack": "5.0.0",
+    "@use-expo/font": "^2.0.0",
     "expo": "^37.0.0",
     "expo-asset": "~8.1.5",
     "expo-font": "~8.1.0",