diff --git a/components/Breadcrumb.tsx b/components/Breadcrumb.tsx
index 2e7fa48..8c62816 100644
--- a/components/Breadcrumb.tsx
+++ b/components/Breadcrumb.tsx
@@ -8,7 +8,7 @@ const Breadcrumb: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =>
     const { path } = query
     if (Array.isArray(path)) {
       return (
-        <div className="pb-4 text-sm text-gray-600 dark:text-gray-300 flex overflow-x-scroll">
+        <div className="pb-4 text-sm text-gray-600 dark:text-gray-300 flex overflow-x-scroll no-scrollbar">
           <div className="p-1 hover:text-black dark:hover:text-gray-400 transition-all duration-75 flex-shrink-0">
             <Link href="/">🚩 Home</Link>
           </div>
diff --git a/components/FileListing.tsx b/components/FileListing.tsx
index 1dbca1c..f8355b0 100644
--- a/components/FileListing.tsx
+++ b/components/FileListing.tsx
@@ -167,7 +167,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
     })
 
     return (
-      <div className="bg-white dark:bg-gray-900 dark:text-white shadow rounded">
+      <div className="bg-white dark:bg-gray-900 dark:text-gray-100 shadow rounded">
         <div className="p-3 grid grid-cols-10 items-center space-x-2 border-b border-gray-200 dark:border-gray-700">
           <div className="col-span-10 md:col-span-7 font-bold">Name</div>
           <div className="hidden md:block font-bold col-span-2">Last Modified</div>
diff --git a/styles/globals.css b/styles/globals.css
index 8106792..70ca3d1 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -4,6 +4,20 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer utilities {
+  @variants responsive {
+    /* Chrome, Safari and Opera */
+    .no-scrollbar::-webkit-scrollbar {
+      display: none;
+    }
+
+    .no-scrollbar {
+      -ms-overflow-style: none; /* IE and Edge */
+      scrollbar-width: none; /* Firefox */
+    }
+  }
+}
+
 .react-pdf__Page__canvas {
   @apply mx-auto;
   @apply shadow-md;