diff --git a/package-lock.json b/package-lock.json
index f47dd46..c51c360 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "barcode-scanner",
       "version": "1.0.0",
       "dependencies": {
-        "@heroicons/react": "^2.1.4",
+        "@heroicons/react": "^2.1.5",
         "@material-tailwind/react": "^2.1.9",
         "@tsparticles/react": "^3.0.0",
         "@tsparticles/slim": "^3.5.0",
@@ -2384,9 +2384,9 @@
       "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
     },
     "node_modules/@heroicons/react": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.4.tgz",
-      "integrity": "sha512-ju0wj0wwrUTMQ2Yceyrma7TKuI3BpSjp+qKqV81K9KGcUHdvTMdiwfRc2cwXBp3uXtKuDZkh0v03nWOQnJFv2Q==",
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.5.tgz",
+      "integrity": "sha512-FuzFN+BsHa+7OxbvAERtgBTNeZpUjgM/MIizfVkSCL2/edriN0Hx/DWRCR//aPYwO5QX/YlgLGXk+E3PcfZwjA==",
       "peerDependencies": {
         "react": ">= 16"
       }
diff --git a/package.json b/package.json
index bcd8940..1cdfbb6 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "generate-pwa-assets": "pwa-assets-generator --preset minimal public/images/ic-logo.svg"
   },
   "dependencies": {
-    "@heroicons/react": "^2.1.4",
+    "@heroicons/react": "^2.1.5",
     "@material-tailwind/react": "^2.1.9",
     "@tsparticles/react": "^3.0.0",
     "@tsparticles/slim": "^3.5.0",
diff --git a/src/App.jsx b/src/App.jsx
index 8ba6ec6..228b879 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,6 +5,10 @@ import BarcodeScanner from "./components/BarcodeScanner";
 
 const App = () => {
   const [_init, setInit] = useState(false);
+
+  const backgroundColor = "#ECEFF1";
+  const particlesColor = "#78909C";
+
   // this should be run only once per application lifetime
   useEffect(() => {
     initParticlesEngine(async (engine) => {
@@ -13,8 +17,9 @@ const App = () => {
       // starting from v2 you can add only the features you need reducing the bundle size
       //await loadAll(engine);
       //await loadFull(engine);
-      await loadSlim(engine);
       //await loadBasic(engine);
+
+      await loadSlim(engine);
     }).then(() => {
       setInit(true);
     });
@@ -26,7 +31,7 @@ const App = () => {
 
   const options = {
     background: {
-      color: "#eceff1",
+      color: backgroundColor,
     },
     particles: {
       number: {
@@ -37,7 +42,7 @@ const App = () => {
         },
       },
       color: {
-        value: ["#78909C"],
+        value: [particlesColor],
       },
       shape: {
         type: "circle",
@@ -51,7 +56,7 @@ const App = () => {
       links: {
         enable: true,
         distance: 150,
-        color: "#78909C",
+        color: particlesColor,
         opacity: 0.4,
         width: 1,
       },
@@ -71,7 +76,7 @@ const App = () => {
           mode: "grab",
         },
         onClick: {
-          enable: true,
+          enable: false,
           mode: "push",
         },
       },
diff --git a/tailwind.config.js b/tailwind.config.js
index 72da033..40bfa3a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,7 +3,15 @@ const withMT = require("@material-tailwind/react/utils/withMT");
 module.exports = withMT({
   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: {
+          light: "#78909C",
+          DEFAULT: "#78909C", // Default primary color
+          dark: "#78909C",
+        },
+      },
+    },
   },
   plugins: [],
 });