diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2785d595ff6b3fa05849caebd409ca87552716af..5b559302c9e17d8a9b43d5b0af9440171496479e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,5 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 * Styling of the query filters (even columns where all filters are aligned horizontally).
 * UTF8 operator symbols for the query filters instead of ascii based ones (e.g.
   `≥` instead of `>=`).
+* [IndiScale#8](https://gitlab.indiscale.com/caosdb/src/caosdb-webui-core-components/-/issues/8)
+  files-ui-react dependency would load fonts from google.com.
 
 ### Security
diff --git a/package.json b/package.json
index 604016ee64a378a2a8c7c233a7ef4ea9d8469212..2958a59c454fd100197ff197f42f66e195725c49 100644
--- a/package.json
+++ b/package.json
@@ -23,8 +23,8 @@
     "i18n": "i18next --config .i18next-parser.config.js \"src/**/*.{js,jsx}\""
   },
   "dependencies": {
-    "@files-ui/react": "^1.0.8",
     "@indiscale/caosdb-webui-info-service": "^0.0.2",
+    "@indiscale/files-ui-react": "^1.2.4",
     "i18next": "^23.4.9",
     "i18next-resources-to-backend": "^1.1.4",
     "prop-types": "^15.8.1",
@@ -63,7 +63,7 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.2",
     "react-dom": "^18.2.0",
-    "sass": "^1.58.3",
+    "sass": "^1.58.3 <1.77.7",
     "sass-loader": "^13.2.0",
     "style-loader": "^3.3.1",
     "webpack": "^5.75.0",
diff --git a/src/components/FileUpload.jsx b/src/components/FileUpload.jsx
index 0a8cd36c00b9f2fd55db326438aca7746980bcb2..f9d6a8aacc7f32ea6bd9d5efae7baef6baad7057 100644
--- a/src/components/FileUpload.jsx
+++ b/src/components/FileUpload.jsx
@@ -6,7 +6,7 @@ import React, {
   useState,
   useCallback,
 } from "react";
-import { Dropzone, FileMosaic } from "@files-ui/react";
+import { Dropzone, FileMosaic } from "@indiscale/files-ui-react";
 import { Message } from "./Message";
 import { Await } from "./Await";
 import { LoadingInfo } from "./LoadingInfo";
diff --git a/src/index.scss b/src/index.scss
index fa3ce4f0d774c0308117a9ab21b5b7606daef2c2..bd8c45d95542010f4972cc9458f0eb86857b11d8 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -3,68 +3,74 @@
 $footer-body-color: lightgray;
 
 .user-component .alert {
-  padding-top: 0.375rem;
-  padding-bottom: 0.375rem;
-  font-size: 1rem;
-  margin: 0;
+    padding-top: 0.375rem;
+    padding-bottom: 0.375rem;
+    font-size: 1rem;
+    margin: 0;
 }
 
 header {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 0;
 }
 
 footer {
-  color: darken($footer-body-color, 30%);
-
-  .nav {
-    border-bottom: 1px solid darken($footer-body-color, 20%);
-  }
-  .nav-link {
-    color: darken($footer-body-color, 30%) !important;
-  }
-  .nav-link:hover {
-    color: darken($footer-body-color, 40%) !important;
-  }
-  .footer-body {
-    border-top: 1px solid darken($footer-body-color, 10%);
-    background-color: $footer-body-color;
-    min-height: 20rem;
-  }
-  .footer-border {
-    height: 3rem;
-    box-shadow: 0px -5px 7px -5px rgba(0, 0, 0, 0.4) inset;
-    -webkit-box-shadow: 0px -5px 7px -5px rgba(0, 0, 0, 0.4) inset;
-    -moz-box-shadow: 0px -5px 6px -7px rgba(0, 0, 0, 0.4) inset;
-  }
+    color: darken($footer-body-color, 30%);
+
+    .nav {
+        border-bottom: 1px solid darken($footer-body-color, 20%);
+    }
+
+    .nav-link {
+        color: darken($footer-body-color, 30%) !important;
+    }
+
+    .nav-link:hover {
+        color: darken($footer-body-color, 40%) !important;
+    }
+
+    .footer-body {
+        border-top: 1px solid darken($footer-body-color, 10%);
+        background-color: $footer-body-color;
+        min-height: 20rem;
+    }
+
+    .footer-border {
+        height: 3rem;
+        box-shadow: 0px -5px 7px -5px rgba(0, 0, 0, 0.4) inset;
+        -webkit-box-shadow: 0px -5px 7px -5px rgba(0, 0, 0, 0.4) inset;
+        -moz-box-shadow: 0px -5px 6px -7px rgba(0, 0, 0, 0.4) inset;
+    }
 }
 
 .caosdb-checkbox {
-  .caosdb-checkbox-icon {
-    font-size: 1.3em;
-  }
+    .caosdb-checkbox-icon {
+        font-size: 1.3em;
+    }
 
-  .caosdb-check-box-input {
-    display: none;
-  }
+    .caosdb-check-box-input {
+        display: none;
+    }
 
-  cursor: pointer;
+    & {
+        cursor: pointer;
+    }
 
-  &.read-only {
-    cursor: auto;
-  }
+    &.read-only {
+        cursor: auto;
+    }
 }
 
 .color-light-green {
-  color: #b4e600;
+    color: #b4e600;
 }
 
 .minicard {
-  border: 1px solid red;
-  width: 400px;
-  display: flex;
+    border: 1px solid red;
+    width: 400px;
+    display: flex;
 
-  .minicard-title {
-    background-color: red;
-  }
+    .minicard-title {
+        background-color: red;
+    }
 }