diff --git a/components/Loader.tsx b/components/Loader.tsx
new file mode 100644
index 00000000..b66dfe18
--- /dev/null
+++ b/components/Loader.tsx
@@ -0,0 +1,3 @@
+export default function Loader(){
+    return <div className="loader"><span className="loader-inner"></span></div>
+}
\ No newline at end of file
diff --git a/pages/availability/index.tsx b/pages/availability/index.tsx
index 53bfd4b8..99ce3bb3 100644
--- a/pages/availability/index.tsx
+++ b/pages/availability/index.tsx
@@ -6,7 +6,8 @@ import Shell from "../../components/Shell";
 import { useRouter } from "next/router";
 import { useRef, useState } from "react";
 import { getSession, useSession } from "next-auth/client";
-import { ClockIcon, PlusIcon } from "@heroicons/react/outline";
+import { ClockIcon } from "@heroicons/react/outline";
+import Loader from '@components/Loader';
 
 export default function Availability(props) {
   const [session, loading] = useSession();
@@ -28,7 +29,7 @@ export default function Availability(props) {
   const bufferMinsRef = useRef<HTMLInputElement>();
 
   if (loading) {
-    return <div className="loader"><span className="loader-inner"></span></div>;
+    return <Loader/>;
   }
 
   function toggleAddModal() {
diff --git a/pages/availability/troubleshoot.tsx b/pages/availability/troubleshoot.tsx
index 9ade27ae..a22390a1 100644
--- a/pages/availability/troubleshoot.tsx
+++ b/pages/availability/troubleshoot.tsx
@@ -6,6 +6,7 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { GetServerSideProps } from "next";
 import prisma from "@lib/prisma";
+import Loader from '@components/Loader';
 dayjs.extend(utc);
 
 export default function Troubleshoot({ user }) {
@@ -14,7 +15,7 @@ export default function Troubleshoot({ user }) {
   const [selectedDate, setSelectedDate] = useState(dayjs());
 
   if (loading) {
-    return <div className="loader"><span className="loader-inner"></span></div>;
+    return <Loader/>;
   }
 
   function convertMinsToHrsMins(mins) {
@@ -80,11 +81,7 @@ export default function Troubleshoot({ user }) {
                   </div>
                 </div>
               ))}
-              {availability.length === 0 && (
-                <div className="loader">
-                  <span className="loader-inner"></span>
-                </div>
-              )}
+              {availability.length === 0 && <Loader />}
               <div className="bg-black overflow-hidden rounded-sm">
                 <div className="px-4 sm:px-6 py-2 text-white">
                   Your day ends at {convertMinsToHrsMins(user.endTime)}
diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx
index d3ded115..00cf1d89 100644
--- a/pages/event-types/index.tsx
+++ b/pages/event-types/index.tsx
@@ -20,6 +20,7 @@ import {
   PlusIcon,
   UserIcon,
 } from "@heroicons/react/solid";
+import Loader from '@components/Loader';
 
 export default function Availability({ user, types }) {
   const [session, loading] = useSession();
@@ -65,7 +66,7 @@ export default function Availability({ user, types }) {
   }
 
   if (loading) {
-    return <div className="loader"><span className="loader-inner"></span></div>;
+    return <Loader/>;
   }
 
   return (
diff --git a/pages/index.tsx b/pages/index.tsx
index 894d14ea..9901e8a0 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,3 +1,4 @@
+import Loader from "@components/Loader";
 import { useRouter } from "next/router";
 
 function RedirectPage() {
@@ -6,6 +7,9 @@ function RedirectPage() {
     router.push("/event-types");
     return;
   }
+  return (
+    <Loader/>
+  );
 }
 
 RedirectPage.getInitialProps = (ctx) => {
diff --git a/pages/integrations/[integration].tsx b/pages/integrations/[integration].tsx
index 8cdaa93a..1e997470 100644
--- a/pages/integrations/[integration].tsx
+++ b/pages/integrations/[integration].tsx
@@ -5,6 +5,7 @@ import Shell from "../../components/Shell";
 import { useState } from "react";
 import { useRouter } from "next/router";
 import { useSession, getSession } from "next-auth/client";
+import Loader from '@components/Loader';
 
 export default function integration(props) {
   const router = useRouter();
@@ -12,7 +13,7 @@ export default function integration(props) {
   const [showAPIKey, setShowAPIKey] = useState(false);
 
   if (loading) {
-    return <div className="loader"><span className="loader-inner"></span></div>;
+    return <Loader/>;
   }
 
   function toggleShowAPIKey() {
diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx
index fb3d84e2..36843394 100644
--- a/pages/integrations/index.tsx
+++ b/pages/integrations/index.tsx
@@ -13,6 +13,7 @@ import {
 } from "@heroicons/react/solid";
 import { InformationCircleIcon } from "@heroicons/react/outline";
 import { Switch } from "@headlessui/react";
+import Loader from '@components/Loader';
 
 export default function Home({ integrations }) {
   const [session, loading] = useSession();
@@ -88,9 +89,7 @@ export default function Home({ integrations }) {
 
   if (loading) {
     return (
-      <div className="loader">
-        <span className="loader-inner"></span>
-      </div>
+      <Loader/>
     );
   }
 
diff --git a/pages/settings/embed.tsx b/pages/settings/embed.tsx
index 45409ea2..46e07646 100644
--- a/pages/settings/embed.tsx
+++ b/pages/settings/embed.tsx
@@ -6,13 +6,13 @@ import prisma from "../../lib/prisma";
 import Shell from "../../components/Shell";
 import SettingsShell from "../../components/Settings";
 import {  useSession, getSession } from "next-auth/client";
+import Loader from '@components/Loader';
 
 export default function Embed(props) {
   const [session, loading] = useSession();
-  const router = useRouter();
 
   if (loading) {
-    return <div className="loader"><span className="loader-inner"></span></div>;
+    return <Loader/>;
   }
 
   return (
diff --git a/pages/settings/password.tsx b/pages/settings/password.tsx
index 4e93a373..347d1c3a 100644
--- a/pages/settings/password.tsx
+++ b/pages/settings/password.tsx
@@ -5,7 +5,8 @@ import prisma from "../../lib/prisma";
 import Modal from "../../components/Modal";
 import Shell from "../../components/Shell";
 import SettingsShell from "../../components/Settings";
-import { signIn, useSession, getSession } from "next-auth/client";
+import { useSession, getSession } from "next-auth/client";
+import Loader from '@components/Loader';
 
 export default function Settings(props) {
   const [session, loading] = useSession();
@@ -14,7 +15,7 @@ export default function Settings(props) {
   const newPasswordRef = useRef<HTMLInputElement>();
 
   if (loading) {
-    return <div className="loader"><span className="loader-inner"></span></div>;
+    return <Loader/>;
   }
 
   const closeSuccessModal = () => {