diff --git a/src/utils/appUtils.js b/src/utils/appUtils.js
new file mode 100644
index 00000000..94d5b09a
--- /dev/null
+++ b/src/utils/appUtils.js
@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+
+export const formatFileSize=(bytes)=> {
+  if (bytes < 1024) return bytes + " B";
+  else if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + " KB";
+  else return (bytes / (1024 * 1024)).toFixed(2) + " MB";
+}
+export const AppColorconfig = {
+  colors: {
+    primary: '#696cff',
+    secondary: '#8592a3',
+    success: '#71dd37',
+    info: '#03c3ec',
+    warning: '#ffab00',
+    danger: '#ff3e1d',
+    dark: '#233446',
+    black: '#000',
+    white: '#fff',
+    cardColor: '#fff',
+    bodyBg: '#f5f5f9',
+    bodyColor: '#697a8d',
+    headingColor: '#566a7f',
+    textMuted: '#a1acb8',
+    borderColor: '#eceef1'
+  }
+};
+export const getColorNameFromHex = (hex) => {
+  const normalizedHex = hex?.replace(/'/g, '').toLowerCase(); 
+  const colors = AppColorconfig.colors;
+
+  for (const [name, value] of Object.entries(colors)) {
+    if (value.toLowerCase() === normalizedHex) {
+      return name;
+    }
+  }
+
+  return null; //
+};
+
+export const useDebounce = (value, delay = 500) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+
+  return debouncedValue;
+};
\ No newline at end of file