diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js
index 2a5fdade..c59df432 100644
--- a/frontend/pages/_app.js
+++ b/frontend/pages/_app.js
@@ -1,51 +1,69 @@
-import React from "react";
+/** @jsx jsx */
+import { jsx } from "@emotion/react";
+import { useEffect, useState } from "react";
 import "/styles/styles.css";
+import "/styles/nprogress.css";
 import "/styles/sidebar.css";
 import "highlight.js/styles/github.css";
-import App from "next/app";
+import "react-mde/lib/styles/css/react-mde-all.css";
+import "focus-visible/dist/focus-visible";
 import dynamic from "next/dynamic";
-import { QueryClient, QueryClientProvider } from "react-query";
-import HeadSEO from "../src/components/HeadSEO";
-import HeadLinks from "../src/components/HeadLinks";
+import { ReactQueryCacheProvider, QueryCache } from "react-query";
+import { ReactQueryDevtools } from "react-query-devtools";
+import { HeadSEO, HeadLinks } from "../src/components";
 const AppContext = dynamic(() => import("../src/AppContext"), {
   ssr: false,
 });
-const DefaultLayout = dynamic(() => import("../src/layouts"), {
-  ssr: false,
-});
-import router from "next/router";
+import DefaultLayout from "../src/layouts";
+import { useRouter } from "next/router";
+import NProgress from "nprogress";
 
-export default class CachingApp extends App {
-  constructor(props) {
-    super(props);
-    this.state = { queryClient: new QueryClient() };
-  }
+export default function CachingApp({ Component, pageProps }) {
+  const [queryCache] = useState(new QueryCache());
 
-  render() {
-    const { Component, pageProps } = this.props;
-    const getLayout =
-      Component.getLayout || ((page) => <DefaultLayout>{page}</DefaultLayout>);
+  const router = useRouter();
 
-    console.warn("rendering _app in path:,", router.asPath);
-    return (
-      <>
-        <style global jsx>{`
-          html,
-          body,
-          body > div:first-child,
-          div#__next,
-          div#__next > div {
-            height: 100% !important;
-            width: 100%;
-            overflow: hidden;
-          }
-        `}</style>
-        {pageProps.metaTags && <HeadSEO {...pageProps.metaTags} />}
-        {pageProps.preloads && <HeadLinks links={pageProps.preloads} />}
-        <QueryClientProvider client={this.state.queryClient}>
-          <AppContext>{getLayout(<Component {...pageProps} />)}</AppContext>
-        </QueryClientProvider>
-      </>
-    );
-  }
+  useEffect(() => {
+    const handleStart = (url) => {
+      NProgress.start();
+    };
+    const handleStop = () => {
+      NProgress.done();
+    };
+
+    router.events.on("routeChangeStart", handleStart);
+    router.events.on("routeChangeComplete", handleStop);
+    router.events.on("routeChangeError", handleStop);
+
+    console.log("_app", router.asPath);
+    return () => {
+      router.events.off("routeChangeStart", handleStart);
+      router.events.off("routeChangeComplete", handleStop);
+      router.events.off("routeChangeError", handleStop);
+    };
+  }, [router]);
+  const getLayout =
+    Component.getLayout || ((page) => <DefaultLayout>{page}</DefaultLayout>);
+
+  return (
+    <>
+      <style global jsx>{`
+        html,
+        body,
+        body > div:first-child,
+        div#__next,
+        div#__next > div {
+          height: 100% !important;
+          width: 100%;
+          overflow: hidden;
+        }
+      `}</style>
+      {pageProps.metaTags && <HeadSEO {...pageProps.metaTags} />}
+      {pageProps.preloads && <HeadLinks links={pageProps.preloads} />}
+      <ReactQueryCacheProvider queryCache={queryCache}>
+        <ReactQueryDevtools initialIsOpen={false} />
+        <AppContext>{getLayout(<Component {...pageProps} />)}</AppContext>
+      </ReactQueryCacheProvider>
+    </>
+  );
 }