diff --git a/src/components/Layout/Settings/Item/SettingsItem.jsx b/src/components/Layout/Settings/Item/SettingsItem.jsx
index fa1b583e..20854636 100644
--- a/src/components/Layout/Settings/Item/SettingsItem.jsx
+++ b/src/components/Layout/Settings/Item/SettingsItem.jsx
@@ -1,19 +1,19 @@
-function Row(props) {
-  const classes = `${props.final ? 'settingsRow settingsNoBorder' : 'settingsRow'} ${props.inactive ? 'preferencesInactive' : ''}`;
+const Row = (props) => {
+  const classes = `${props.final ? 'settingsRow settingsNoBorder' : 'settingsRow'} ${props.inactive ? 'opacity-50 pointer-events-none transition-400 ease-in-out' : ''}`;
   return <div className={classes}>{props.children}</div>;
-}
+};
 
-function Content(props) {
+const Content = (props) => {
   return (
     <div className="content">
       <span className="title">{props.title}</span>
       <span className="subtitle">{props.subtitle}</span>
     </div>
   );
-}
+};
 
-function Action(props) {
+const Action = (props) => {
   return <div className="action">{props.children}</div>;
-}
+};
 
-export { Row, Content, Action };
+export { Row, Content, Action };
\ No newline at end of file
diff --git a/src/components/Layout/Settings/PreferencesWrapper/PreferencesWrapper.jsx b/src/components/Layout/Settings/PreferencesWrapper/PreferencesWrapper.jsx
index 1b0bfa21..063065e8 100644
--- a/src/components/Layout/Settings/PreferencesWrapper/PreferencesWrapper.jsx
+++ b/src/components/Layout/Settings/PreferencesWrapper/PreferencesWrapper.jsx
@@ -16,7 +16,7 @@ const PreferencesWrapper = ({ children, ...props }) => {
   });
 
   return (
-    <div className={shown ? 'preferences' : 'preferencesInactive'}>
+    <div className={shown ? 'preferences' : 'opacity-50 pointer-events-none transition-400 ease-in-out'}>
       {props.zoomSetting && (
         <Row>
           <Content