diff --git a/src/components/Analytics.tsx b/src/components/analytics.tsx
similarity index 100%
rename from src/components/Analytics.tsx
rename to src/components/analytics.tsx
diff --git a/src/components/App.tsx b/src/components/app.tsx
similarity index 91%
rename from src/components/App.tsx
rename to src/components/app.tsx
index 0458b72..71dddec 100644
--- a/src/components/App.tsx
+++ b/src/components/app.tsx
@@ -1,7 +1,7 @@
-import Analytics from "@/components/Analytics";
-import ControlArea from "@/components/ControlArea";
-import Footer from "@/components/Footer";
-import Marquee from "@/components/Marquee";
+import Analytics from "@/components/analytics";
+import ControlArea from "@/components/control-area";
+import Footer from "@/components/footer";
+import Marquee from "@/components/marquee";
 import { useAppDispatch } from "@/redux/hooks";
 import { setIsFullscreen } from "@/redux/reducers/app";
 import { JSX, useEffect, useRef } from "react";
diff --git a/src/components/ColorPickerModal.tsx b/src/components/color-picker-modal.tsx
similarity index 100%
rename from src/components/ColorPickerModal.tsx
rename to src/components/color-picker-modal.tsx
diff --git a/src/components/ColorPicker.tsx b/src/components/color-picker.tsx
similarity index 92%
rename from src/components/ColorPicker.tsx
rename to src/components/color-picker.tsx
index 4bf5749..de4131d 100644
--- a/src/components/ColorPicker.tsx
+++ b/src/components/color-picker.tsx
@@ -1,4 +1,4 @@
-import ColorPickerModal from "@/components/ColorPickerModal";
+import ColorPickerModal from "@/components/color-picker-modal";
 import { Input } from "@nextui-org/react";
 import { JSX, useState } from "react";
 
diff --git a/src/components/ControlArea.tsx b/src/components/control-area.tsx
similarity index 97%
rename from src/components/ControlArea.tsx
rename to src/components/control-area.tsx
index 6c7d314..75d5f7d 100644
--- a/src/components/ControlArea.tsx
+++ b/src/components/control-area.tsx
@@ -1,5 +1,5 @@
-import ColorPicker from "@/components/ColorPicker";
-import ColorPickerModal from "@/components/ColorPickerModal";
+import ColorPicker from "@/components/color-picker";
+import ColorPickerModal from "@/components/color-picker-modal";
 import { useAppSelector } from "@/redux/hooks";
 import {
 	setBackgroundColor,
diff --git a/src/components/Footer.tsx b/src/components/footer.tsx
similarity index 100%
rename from src/components/Footer.tsx
rename to src/components/footer.tsx
diff --git a/src/components/MarqueeShell.tsx b/src/components/marquee-shell.tsx
similarity index 100%
rename from src/components/MarqueeShell.tsx
rename to src/components/marquee-shell.tsx
diff --git a/src/components/Marquee.tsx b/src/components/marquee.tsx
similarity index 97%
rename from src/components/Marquee.tsx
rename to src/components/marquee.tsx
index 17e722b..6154b41 100644
--- a/src/components/Marquee.tsx
+++ b/src/components/marquee.tsx
@@ -1,4 +1,4 @@
-import MarqueeShell from "@/components/MarqueeShell";
+import MarqueeShell from "@/components/marquee-shell";
 import { useAppSelector } from "@/redux/hooks";
 import clsx from "clsx";
 import { JSX, RefObject, useEffect, useRef, useState } from "react";
diff --git a/src/index.css b/src/globals.css
similarity index 100%
rename from src/index.css
rename to src/globals.css
diff --git a/src/main.tsx b/src/main.tsx
index 6816c1a..a3767d9 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,5 +1,5 @@
-import App from "@/components/App";
-import "@/index.css";
+import App from "@/components/app";
+import "@/globals.css";
 import store from "@/redux/store";
 import translationEnUs from "@/translations/en-us.json";
 import translationZhCn from "@/translations/zh-cn.json";