diff --git a/src/renderer/components/settings/TrayColorPicker.tsx b/src/renderer/components/settings/TrayColorPicker.tsx
index 4e38dc8..d88f162 100644
--- a/src/renderer/components/settings/TrayColorPicker.tsx
+++ b/src/renderer/components/settings/TrayColorPicker.tsx
@@ -20,12 +20,12 @@ const presets = [
     "#F6BFAC" // Vesktop inpired
 ];
 
-export const trayIconPicker: SettingsComponent = ({ settings }) => {
-    if (!settings.tray) return null; // how to disable instead of hiding?
+export const TrayIconPicker: SettingsComponent = ({ settings }) => {
+    if (!settings.tray) return null;
     return (
-        <div className="tray-settings">
-            <div className="tray-container">
-                <div className="tray-settings-labels">
+        <div className="vcd-tray-settings">
+            <div className="vcd-tray-container">
+                <div className="vcd-tray-settings-labels">
                     <Forms.FormTitle tag="h3">Tray Icon Color</Forms.FormTitle>
                     <Forms.FormText>Choose a color for your tray icon!</Forms.FormText>
                 </div>
diff --git a/src/renderer/components/settings/traySetting.css b/src/renderer/components/settings/traySetting.css
index b4941e3..adb52ca 100644
--- a/src/renderer/components/settings/traySetting.css
+++ b/src/renderer/components/settings/traySetting.css
@@ -1,15 +1,15 @@
-.tray-settings {
+.vcd-tray-settings {
     display: flex;
     flex-direction: column;
 }
 
-.tray-container {
+.vcd-tray-container {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
 }
 
-.tray-settings-labels {
+.vcd-tray-settings-labels {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;