diff --git a/src/app/ClientCommons.tsx b/src/app/ClientCommons.tsx
new file mode 100644
index 0000000..baab38d
--- /dev/null
+++ b/src/app/ClientCommons.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { usePathname } from "next/navigation";
+import { useThemeMode } from "@/utils/useThemeMode";
+
+const ClientCommons = () => {
+  //
+  useThemeMode();
+
+  const pathname = usePathname();
+  //  CUSTOM THEME STYLE
+  useEffect(() => {
+    const $body = document.querySelector("body");
+    if (!$body) return;
+
+    let newBodyClass = "";
+
+    if (pathname === "/home-3") {
+      newBodyClass = "theme-purple-blueGrey";
+    }
+    if (pathname === "/home-2") {
+      newBodyClass = "theme-cyan-blueGrey";
+    }
+
+    newBodyClass && $body.classList.add(newBodyClass);
+    return () => {
+      newBodyClass && $body.classList.remove(newBodyClass);
+    };
+  }, [pathname]);
+
+  return <></>;
+};
+
+export default ClientCommons;
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
new file mode 100644
index 0000000..718d6fe
Binary files /dev/null and b/src/app/favicon.ico differ
diff --git a/src/app/globals.css b/src/app/globals.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/src/app/globals.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;