diff --git a/app/client/package.json b/app/client/package.json
index 229aae43cf..b307b2cfff 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -111,7 +111,7 @@
     "d3-geo": "^3.1.0",
     "dayjs": "^1.10.6",
     "deep-diff": "^1.0.2",
-    "design-system": "npm:@appsmithorg/design-system@2.1.38",
+    "design-system": "npm:@appsmithorg/design-system@2.1.39",
     "design-system-old": "npm:@appsmithorg/design-system-old@1.1.16",
     "downloadjs": "^1.4.7",
     "echarts": "^5.4.2",
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx
index 9f9ec6be36..6e09d4d615 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/FileTabs.tsx
@@ -2,8 +2,7 @@ import React, { useEffect } from "react";
 import { useLocation } from "react-router";
 import { useSelector } from "react-redux";
 import clsx from "classnames";
-import type { FlexProps } from "design-system";
-import { Flex, Icon, Tooltip } from "design-system";
+import { Flex, Icon, ScrollArea, Tooltip } from "design-system";
 
 import type { EntityItem } from "@appsmith/entities/IDE/constants";
 import {
@@ -23,9 +22,6 @@ interface Props {
 const FileTabs = (props: Props) => {
   const { navigateToTab, onClose, tabs } = props;
   const isTabsRevampEnabled = useSelector(getIsTabsRevampEnabled);
-  const containerProps: FlexProps = isTabsRevampEnabled
-    ? { overflowX: "auto", overflowY: "hidden" }
-    : {};
 
   const location = useLocation();
 
@@ -46,39 +42,55 @@ const FileTabs = (props: Props) => {
   };
 
   return (
-    <Flex
+    <ScrollArea
+      className="h-[32px]"
       data-testid="t--editor-tabs"
-      gap="spaces-2"
-      height="100%"
-      {...containerProps}
+      options={
+        isTabsRevampEnabled
+          ? {
+              overflow: {
+                x: "scroll",
+                y: "hidden",
+              },
+            }
+          : {
+              overflow: {
+                x: "hidden",
+                y: "hidden",
+              },
+            }
+      }
+      size={"sm"}
     >
-      {tabs.map((tab: EntityItem) => (
-        <StyledTab
-          className={clsx(
-            "editor-tab",
-            currentEntity.id === tab.key && "active",
-          )}
-          data-testid={`t--ide-tab-${tab.title}`}
-          key={tab.key}
-          onClick={() => navigateToTab(tab)}
-          showOverflow={isTabsRevampEnabled}
-        >
-          <TabIconContainer>{tab.icon}</TabIconContainer>
-          <Tooltip content={tab.title} mouseEnterDelay={1}>
-            <TabTextContainer>{tab.title}</TabTextContainer>
-          </Tooltip>
-          {/* not using button component because of the size not matching design */}
-          {isTabsRevampEnabled ? (
-            <Icon
-              className="tab-close rounded-[4px] hover:bg-[var(--ads-v2-colors-action-tertiary-surface-hover-bg)] cursor-pointer p-[2px]"
-              data-testid="t--tab-close-btn"
-              name="close-line"
-              onClick={(e) => onCloseClick(e, tab.key)}
-            />
-          ) : null}
-        </StyledTab>
-      ))}
-    </Flex>
+      <Flex gap="spaces-2" height="100%">
+        {tabs.map((tab: EntityItem) => (
+          <StyledTab
+            className={clsx(
+              "editor-tab",
+              currentEntity.id === tab.key && "active",
+            )}
+            data-testid={`t--ide-tab-${tab.title}`}
+            key={tab.key}
+            onClick={() => navigateToTab(tab)}
+            showOverflow={isTabsRevampEnabled}
+          >
+            <TabIconContainer>{tab.icon}</TabIconContainer>
+            <Tooltip content={tab.title} mouseEnterDelay={1}>
+              <TabTextContainer>{tab.title}</TabTextContainer>
+            </Tooltip>
+            {/* not using button component because of the size not matching design */}
+            {isTabsRevampEnabled ? (
+              <Icon
+                className="tab-close rounded-[4px] hover:bg-[var(--ads-v2-colors-action-tertiary-surface-hover-bg)] cursor-pointer p-[2px]"
+                data-testid="t--tab-close-btn"
+                name="close-line"
+                onClick={(e) => onCloseClick(e, tab.key)}
+              />
+            ) : null}
+          </StyledTab>
+        ))}
+      </Flex>
+    </ScrollArea>
   );
 };
 
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/SplitScreenTabs.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/SplitScreenTabs.tsx
index cf1a399d80..9bcce400f0 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/SplitScreenTabs.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/SplitScreenTabs.tsx
@@ -63,7 +63,7 @@ const SplitScreenTabs = () => {
   };
 
   // TODO: Remove this once release_ide_tabs_revamp_enabled is lifted
-  const Content = () => {
+  const renderContent = () => {
     if (isTabsRevampEnabled) {
       return (
         <>
@@ -96,11 +96,7 @@ const SplitScreenTabs = () => {
 
   return (
     <>
-      {files.length > 0 ? (
-        <Container>
-          <Content />
-        </Container>
-      ) : null}
+      {files.length > 0 ? <Container>{renderContent()}</Container> : null}
       <Announcement />
     </>
   );
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index 6e71e8ae28..a63605e1d4 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -13108,7 +13108,7 @@ __metadata:
     d3-geo: ^3.1.0
     dayjs: ^1.10.6
     deep-diff: ^1.0.2
-    design-system: "npm:@appsmithorg/design-system@2.1.38"
+    design-system: "npm:@appsmithorg/design-system@2.1.39"
     design-system-old: "npm:@appsmithorg/design-system-old@1.1.16"
     diff: ^5.0.0
     dotenv: ^8.1.0
@@ -17148,9 +17148,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"design-system@npm:@appsmithorg/design-system@2.1.38":
-  version: 2.1.38
-  resolution: "@appsmithorg/design-system@npm:2.1.38"
+"design-system@npm:@appsmithorg/design-system@2.1.39":
+  version: 2.1.39
+  resolution: "@appsmithorg/design-system@npm:2.1.39"
   dependencies:
     "@radix-ui/react-dialog": ^1.0.2
     "@radix-ui/react-dropdown-menu": ^2.0.4
@@ -17170,6 +17170,8 @@ __metadata:
     csstype: ^3.1.2
     date-fns: ^2.29.3
     loglevel: ^1.8.1
+    overlayscrollbars: ^2.7.2
+    overlayscrollbars-react: ^0.5.6
     rc-select: ^14.4.3
     rc-table: ^7.35.2
     rc-tooltip: ^5.3.1
@@ -17180,7 +17182,7 @@ __metadata:
     react-dom: ^17.0.2
     react-router-dom: ^5.0.0
     styled-components: ^5.3.6
-  checksum: 382f7f2c05ab4daf7f200dabfa3da8e06a9e551b87f24bc43c50e84824fde99b25ed505632ad82650246ebaafd53d51cd50082769a9112282938355ceaa2f667
+  checksum: 7b9ed99c41a8fc0b45db101b18bd87a5dde5ef54291843196d1e26bb60d217c7e552be01c914a859717a294caf2637aef7149afd07b6e224d81cb92f2c3b91b4
   languageName: node
   linkType: hard
 
@@ -25734,6 +25736,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"overlayscrollbars-react@npm:^0.5.6":
+  version: 0.5.6
+  resolution: "overlayscrollbars-react@npm:0.5.6"
+  peerDependencies:
+    overlayscrollbars: ^2.0.0
+    react: ">=16.8.0"
+  checksum: 4a07dda99543522763c5182b1a1344b35a13534ea3213fb8638604e813ec92ff8f9e63d72e11ded596ab5dbe5829d4f50f6b2d0ffc76ce18e6e67a662c7bdb6a
+  languageName: node
+  linkType: hard
+
+"overlayscrollbars@npm:^2.7.2":
+  version: 2.7.2
+  resolution: "overlayscrollbars@npm:2.7.2"
+  checksum: 32b57ea3a33f72e98cd33c2c1f7d4ef864216656286eef0f7cb71639aa6eb92e9ce32c7db6407fa3f2c053fb13052b7c37507a60785a08b7a3c0684cd474d751
+  languageName: node
+  linkType: hard
+
 "p-cancelable@npm:^2.0.0":
   version: 2.1.1
   resolution: "p-cancelable@npm:2.1.1"