diff --git a/components/Loader.tsx b/components/Loader.tsx
index b66dfe184f..b6c49c947d 100644
--- a/components/Loader.tsx
+++ b/components/Loader.tsx
@@ -1,3 +1,7 @@
-export default function Loader(){
-    return <div className="loader"><span className="loader-inner"></span></div>
-}
\ No newline at end of file
+export default function Loader() {
+  return (
+    <div className="loader border-black dark:border-white">
+      <span className="loader-inner bg-black dark:bg-white"></span>
+    </div>
+  );
+}
diff --git a/components/booking/AvailableTimes.tsx b/components/booking/AvailableTimes.tsx
index e2d6af3e90..bb69050862 100644
--- a/components/booking/AvailableTimes.tsx
+++ b/components/booking/AvailableTimes.tsx
@@ -2,6 +2,8 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import Slots from "./Slots";
 import { ExclamationIcon } from "@heroicons/react/solid";
+import React from "react";
+import Loader from "@components/Loader";
 
 const AvailableTimes = ({
   date,
@@ -49,7 +51,7 @@ const AvailableTimes = ({
         </div>
       )}
 
-      {!isFullyBooked && slots.length === 0 && !hasErrors && <div className="loader" />}
+      {!isFullyBooked && slots.length === 0 && !hasErrors && <Loader />}
 
       {hasErrors && (
         <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4">
diff --git a/styles/globals.css b/styles/globals.css
index 30beee13d9..59a997fcb6 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -144,7 +144,8 @@
   height: 30px;
   margin: 60px auto;
   position: relative;
-  border: 4px solid #000;
+  border-width: 4px;
+  border-style: solid;
   animation: loader 2s infinite ease;
 }
 
@@ -152,7 +153,6 @@
   vertical-align: top;
   display: inline-block;
   width: 100%;
-  background-color: #000;
   animation: loader-inner 2s infinite ease-in;
 }