diff --git a/pages/bookings/index.tsx b/pages/bookings/index.tsx
index 370eda4a..c48d14ad 100644
--- a/pages/bookings/index.tsx
+++ b/pages/bookings/index.tsx
@@ -9,6 +9,7 @@ import { Menu, Transition } from "@headlessui/react";
 import { DotsHorizontalIcon } from "@heroicons/react/solid";
 import classNames from "@lib/classNames";
 import { ClockIcon, XIcon } from "@heroicons/react/outline";
+import Loader from "@components/Loader";
 
 export default function Bookings({ bookings }) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -17,7 +18,7 @@ export default function Bookings({ bookings }) {
   const router = useRouter();
 
   if (loading) {
-    return <p className="text-gray-400">Loading...</p>;
+    return <Loader />;
   }
 
   async function confirmBookingHandler(booking, confirm: boolean) {
diff --git a/pages/settings/teams.tsx b/pages/settings/teams.tsx
index 260d06b3..d78299d2 100644
--- a/pages/settings/teams.tsx
+++ b/pages/settings/teams.tsx
@@ -8,6 +8,7 @@ import { getSession, useSession } from "next-auth/client";
 import { UsersIcon } from "@heroicons/react/outline";
 import TeamList from "../../components/team/TeamList";
 import TeamListItem from "../../components/team/TeamListItem";
+import Loader from "@components/Loader";
 
 export default function Teams() {
   const [, loading] = useSession();
@@ -38,7 +39,7 @@ export default function Teams() {
   }, []);
 
   if (loading) {
-    return <p className="text-gray-400">Loading...</p>;
+    return <Loader />;
   }
 
   const createTeam = (e) => {