diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index fcee4dc..9d0df9b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11292,6 +11292,24 @@
         "postcss-values-parser": "^2.0.0"
       }
     },
+    "postcss-import": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-12.0.1.tgz",
+      "integrity": "sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw==",
+      "requires": {
+        "postcss": "^7.0.1",
+        "postcss-value-parser": "^3.2.3",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        }
+      }
+    },
     "postcss-initial": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-3.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index c18f9eb..ab66d5e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,6 +22,7 @@
     "date-fns": "2.13.0",
     "npm-run-all": "4.1.5",
     "postcss-cli": "7.1.1",
+    "postcss-import": "^12.0.1",
     "prettier": "2.0.5",
     "react": "16.13.1",
     "react-dom": "16.13.1",
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
index 47b970a..f060db0 100644
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -8,8 +8,10 @@ const purgecss = require("@fullhuman/postcss-purgecss")({
 
 module.exports = {
   plugins: [
+    require("postcss-import"),
     require("tailwindcss"),
     require("autoprefixer"),
+
     ...(process.env.NODE_ENV === "production" ? [purgecss] : []),
   ],
 };
diff --git a/frontend/src/components/ReportListens.tsx b/frontend/src/components/ReportListens.tsx
index 1d6073c..8f80b93 100644
--- a/frontend/src/components/ReportListens.tsx
+++ b/frontend/src/components/ReportListens.tsx
@@ -78,7 +78,7 @@ export const ReportListens: React.FC = () => {
           </div>
           {isLoading && (
             <div>
-              <span>Loading Listens</span>
+              <div className="loader rounded-full border-8 h-64 w-64"></div>
             </div>
           )}
           {report.length === 0 && (
diff --git a/frontend/src/loader.css b/frontend/src/loader.css
new file mode 100644
index 0000000..2679f95
--- /dev/null
+++ b/frontend/src/loader.css
@@ -0,0 +1,23 @@
+.loader {
+  border-top-color: theme("colors.green.500");
+  -webkit-animation: spinner 1.5s linear infinite;
+  animation: spinner 1.5s linear infinite;
+}
+
+@-webkit-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/frontend/src/tailwind.css b/frontend/src/tailwind.css
index 7f39374..69135c8 100644
--- a/frontend/src/tailwind.css
+++ b/frontend/src/tailwind.css
@@ -1,3 +1,5 @@
+@import "loader.css";
+
 @tailwind base;
 
 @tailwind components;