diff --git a/app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx b/app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx
index 832692b8bf92..dda055665aea 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/UI/Add.tsx
@@ -22,7 +22,7 @@ const AddWidgets = (props: { focusSearchInput?: boolean }) => {
         onCloseClick={closeButtonClickHandler}
         titleMessage={EDITOR_PANE_TEXTS.widgets_create_tab_title}
       />
-      <Flex flexDirection="column" gap="spaces-3" overflowX="scroll">
+      <Flex flexDirection="column" gap="spaces-3" overflowX="auto">
         <UIEntitySidebar focusSearchInput={props.focusSearchInput} isActive />
       </Flex>
     </>
diff --git a/app/client/src/pages/Editor/widgetSidebar/UIEntitySidebar.tsx b/app/client/src/pages/Editor/widgetSidebar/UIEntitySidebar.tsx
index c43d9d6720e7..edac5edd3130 100644
--- a/app/client/src/pages/Editor/widgetSidebar/UIEntitySidebar.tsx
+++ b/app/client/src/pages/Editor/widgetSidebar/UIEntitySidebar.tsx
@@ -9,7 +9,7 @@ import type {
   WidgetTags,
 } from "constants/WidgetConstants";
 import { WIDGET_TAGS } from "constants/WidgetConstants";
-import { SearchInput, Text } from "design-system";
+import { Flex, SearchInput, Text } from "design-system";
 import Fuse from "fuse.js";
 import { debounce } from "lodash";
 import React, { useEffect, useMemo, useRef, useState } from "react";
@@ -109,9 +109,10 @@ function UIEntitySidebar({
           type="text"
         />
       </div>
-      <div
-        className="flex-grow px-3 mt-2 overflow-y-scroll"
+      <Flex
+        className="flex-grow px-3 overflow-y-scroll"
         data-testid="t--widget-sidebar-scrollable-wrapper"
+        pt="spaces-2"
       >
         {isEmpty && (
           <Text
@@ -150,7 +151,7 @@ function UIEntitySidebar({
             );
           })}
         </div>
-      </div>
+      </Flex>
     </div>
   );
 }