diff --git a/packages/desktop/src/styles/index.css b/packages/desktop/src/styles/index.css
index e04f61c..5439243 100644
--- a/packages/desktop/src/styles/index.css
+++ b/packages/desktop/src/styles/index.css
@@ -69,3 +69,11 @@ button {
 ::-webkit-scrollbar-thumb:hover {
   background-color: #a8bbbf;
 }
+
+.scrollbar-left {
+  direction: rtl;
+}
+
+.direction-ltr {
+  direction: ltr;
+}
diff --git a/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx b/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx
index 5935506..f862f78 100644
--- a/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx
+++ b/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx
@@ -131,7 +131,7 @@ export default React.memo(function LineRow({
       onClick={handleActivateLine}
       role={'presentation'}
       className={`flex flex-row items-center justify-start gap-2 px-4 py-4 hover:bg-gray-200 
-      cursor-pointer transition-all relative z-50 rounded 
+      cursor-pointer transition-all relative z-50 rounded direction-ltr 
       ${isUserToggleTuned && ' bg-gray-100 shadow-2xl '}
       ${isSelected && ' bg-gray-200 scale-110 shadow-2xl translate-x-3 '}
       `}
diff --git a/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx b/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx
index 29faeb8..ee06145 100644
--- a/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx
+++ b/packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx
@@ -99,7 +99,7 @@ export default function SidePanel() {
       )}
 
       {/* rest of the lines */}
-      <div className={'flex flex-col flex-1 mr-[-100px] pr-[100px] overflow-y-auto'}>
+      <div className={'flex flex-col flex-1 mr-[-100px] pr-[100px] overflow-y-auto scrollbar-left'}>
         {initialRoomsFetch.loading ? (
           <Skeleton />
         ) : (