diff --git a/frontend/src/pages/GeneralSettings/Settings/components/MessageDirection/index.jsx b/frontend/src/pages/GeneralSettings/Settings/components/MessageDirection/index.jsx
index 8e89178996c..48b2f4f3ab3 100644
--- a/frontend/src/pages/GeneralSettings/Settings/components/MessageDirection/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Settings/components/MessageDirection/index.jsx
@@ -48,7 +48,7 @@ function ItemDirection({ active, reverse, onSelect, msg }) {
       data-tooltip-id="alignment-choice-item"
       data-tooltip-content={msg}
       type="button"
-      className={`flex:1 p-4 bg-transparent hover:light:bg-gray-100 hover:bg-gray-700/20 rounded-xl border w-[250px] ${active ? "border-primary-button" : " border-theme-border-sidebar-item"}`}
+      className={`flex:1 p-4 bg-transparent hover:light:bg-gray-100 hover:bg-gray-700/20 rounded-xl border w-[250px] ${active ? "border-primary-button" : " border-theme-sidebar-border"}`}
       onClick={onSelect}
     >
       <div className="space-y-4">