diff --git a/packages/client/src/components/RoomsSelectorInput/StyledComponents.js b/packages/client/src/components/RoomsSelectorInput/StyledComponents.js
new file mode 100644
index 0000000000..f15f93c476
--- /dev/null
+++ b/packages/client/src/components/RoomsSelectorInput/StyledComponents.js
@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+const StyledBodyWrapper = styled.div`
+  margin: 16px 0;
+  max-width: ${(props) => (props.maxWidth ? props.maxWidth : "350px")};
+`;
+
+export { StyledBodyWrapper };
diff --git a/packages/client/src/components/RoomsSelectorInput/index.js b/packages/client/src/components/RoomsSelectorInput/index.js
new file mode 100644
index 0000000000..0e0c1a2b8f
--- /dev/null
+++ b/packages/client/src/components/RoomsSelectorInput/index.js
@@ -0,0 +1,120 @@
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { withTranslation } from "react-i18next";
+
+import { FileInput } from "@docspace/shared/components/file-input";
+
+import RoomSelector from "@docspace/shared/selectors/Room";
+import { StyledBodyWrapper } from "./StyledComponents";
+
+import { Aside } from "@docspace/shared/components/aside";
+import { Backdrop } from "@docspace/shared/components/backdrop";
+
+const RoomsSelectorInput = (props) => {
+  const {
+    t,
+    isDisabled,
+    isError,
+    maxWidth,
+
+    id,
+    className,
+    style,
+    isDocumentIcon,
+    isLoading,
+
+    roomType,
+    onCancel,
+    withCancelButton,
+    cancelButtonLabel,
+
+    excludeItems,
+
+    withSearch,
+
+    isMultiSelect,
+
+    submitButtonLabel,
+    onSubmit,
+
+    withHeader,
+    headerProps,
+
+    setIsDataReady,
+  } = props;
+
+  const [isPanelVisible, setIsPanelVisible] = useState(false);
+  const BasePath = `DocSpace / ${t("Common:Rooms")} `;
+  const [path, setPath] = useState(BasePath);
+
+  const handleOnSubmit = (rooms) => {
+    setPath(BasePath + "/ " + rooms[0].label);
+    onSubmit(rooms);
+    setIsPanelVisible(false);
+  };
+
+  const handleOnCancel = (e) => {
+    onCancel(e);
+    setIsPanelVisible(false);
+  };
+
+  const onClick = () => {
+    setIsPanelVisible(true);
+  };
+
+  const onClose = () => {
+    setIsPanelVisible(false);
+  };
+
+  const SelectorBody = (
+    <RoomSelector
+      id={id}
+      style={style}
+      onCancel={handleOnCancel}
+      withCancelButton={withCancelButton}
+      cancelButtonLabel={cancelButtonLabel}
+      excludeItems={excludeItems}
+      withSearch={withSearch}
+      isMultiSelect={isMultiSelect}
+      submitButtonLabel={submitButtonLabel}
+      onSubmit={handleOnSubmit}
+      withHeader={withHeader}
+      headerProps={headerProps}
+      setIsDataReady={setIsDataReady}
+      roomType={roomType}
+    />
+  );
+
+  return (
+    <StyledBodyWrapper maxWidth={maxWidth} className={className}>
+      <FileInput
+        onClick={onClick}
+        fromStorage
+        path={path}
+        isLoading={isLoading}
+        isDisabled={isDisabled || isLoading}
+        hasError={isError}
+        scale
+        isDocumentIcon={isDocumentIcon}
+      />
+
+      <Backdrop
+        visible={isPanelVisible}
+        isAside
+        withBackground
+        zIndex={309}
+        onClick={onClose}
+      />
+      <Aside
+        visible={isPanelVisible}
+        withoutBodyScroll
+        zIndex={310}
+        onClose={onClose}
+      >
+        {SelectorBody}
+      </Aside>
+    </StyledBodyWrapper>
+  );
+};
+
+export default withTranslation(["Common"])(observer(RoomsSelectorInput));
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/index.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/index.js
index e800b6f71f..de41fd06b9 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/index.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { withTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
 import { useNavigate } from "react-router-dom";
@@ -40,6 +40,11 @@ const SDKContainer = styled(Box)`
   css`
     width: 100%;
   `}
+
+  .presets-flex {
+    display: flex;
+    flex-direction: column;
+  }
 `;
 
 const CategoryHeader = styled.div`
@@ -88,6 +93,16 @@ const PresetsContainer = styled.div`
 const PortalIntegration = (props) => {
   const { t, setDocumentTitle, currentColorScheme, sdkLink, theme } = props;
 
+  const isSmall = useRef(
+    (() => {
+      const content = document.querySelector(".section-wrapper-content");
+      const rect = content.getBoundingClientRect();
+      return rect.width <= 600;
+    })(),
+  );
+
+  const [isFlex, setIsFlex] = useState(isSmall.current);
+
   setDocumentTitle(t("JavascriptSdk"));
 
   const navigate = useNavigate();
@@ -145,6 +160,23 @@ const PortalIntegration = (props) => {
     },
   ];
 
+  const onResize = (entries) => {
+    const belowThreshold = entries[0].contentRect.width <= 600;
+    if (belowThreshold !== isSmall.current) {
+      isSmall.current = belowThreshold;
+      setIsFlex(belowThreshold);
+    }
+  };
+
+  useEffect(() => {
+    const observer = new ResizeObserver(onResize);
+    const content = document.querySelector(".section-wrapper-content");
+    observer.observe(content);
+    return () => {
+      observer.unobserve(content);
+    };
+  }, []);
+
   return (
     <SDKContainer>
       <CategoryDescription>
@@ -164,7 +196,7 @@ const PortalIntegration = (props) => {
       <Text lineHeight="20px" color={theme.sdkPresets.secondaryColor}>
         {t("InitializeSDK")}
       </Text>
-      <PresetsContainer>
+      <PresetsContainer className={`${isFlex ? "presets-flex" : ""}`}>
         {presetsData.map((data) => (
           <PresetTile
             t={t}
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js
index c7084ede32..8f5004196f 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js
@@ -101,7 +101,9 @@ const DocSpace = (props) => {
 
   useEffect(() => {
     const scroll = document.getElementsByClassName("section-scroll")[0];
-    scroll.scrollTop = 0;
+    if (scroll) {
+      scroll.scrollTop = 0;
+    }
     loadFrame();
     return () => destroyFrame();
   });
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Editor.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Editor.js
index bac548887a..a8a5696edc 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Editor.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Editor.js
@@ -90,7 +90,9 @@ const Editor = (props) => {
 
   useEffect(() => {
     const scroll = document.getElementsByClassName("section-scroll")[0];
-    scroll.scrollTop = 0;
+    if (scroll) {
+      scroll.scrollTop = 0;
+    }
     loadFrame();
     return () => destroyFrame();
   });
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/FileSelector.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/FileSelector.js
index 2b36b68332..e0f7616d17 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/FileSelector.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/FileSelector.js
@@ -181,7 +181,9 @@ const FileSelector = (props) => {
 
   useEffect(() => {
     const scroll = document.getElementsByClassName("section-scroll")[0];
-    scroll.scrollTop = 0;
+    if (scroll) {
+      scroll.scrollTop = 0;
+    }
     loadFrame();
     return () => destroyFrame();
   });
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js
index 84200d1e20..3225938050 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js
@@ -313,7 +313,9 @@ const Manager = (props) => {
 
   useEffect(() => {
     const scroll = document.getElementsByClassName("section-scroll")[0];
-    scroll.scrollTop = 0;
+    if (scroll) {
+      scroll.scrollTop = 0;
+    }
     loadFrame();
     return () => destroyFrame();
   });
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/RoomSelector.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/RoomSelector.js
index d1a35564a3..8e032fad4d 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/RoomSelector.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/RoomSelector.js
@@ -155,7 +155,9 @@ const RoomSelector = (props) => {
 
   useEffect(() => {
     const scroll = document.getElementsByClassName("section-scroll")[0];
-    scroll.scrollTop = 0;
+    if (scroll) {
+      scroll.scrollTop = 0;
+    }
     loadFrame();
     return destroyFrame;
   });
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/SimpleRoom.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/SimpleRoom.js
index c85cf40893..1756691165 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/SimpleRoom.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/SimpleRoom.js
@@ -8,7 +8,7 @@ import { Label } from "@docspace/shared/components/label";
 import { Text } from "@docspace/shared/components/text";
 import { ComboBox } from "@docspace/shared/components/combobox";
 import { TabsContainer } from "@docspace/shared/components/tabs-container";
-import FilesSelectorInput from "SRC_DIR/components/FilesSelectorInput";
+import RoomsSelectorInput from "SRC_DIR/components/RoomsSelectorInput";
 import { objectToGetParams, loadScript } from "@docspace/shared/utils/common";
 import { inject, observer } from "mobx-react";
 
@@ -27,6 +27,8 @@ import { useNavigate } from "react-router-dom";
 import { Link } from "@docspace/shared/components/link";
 import FilesFilter from "@docspace/shared/api/files/filter";
 
+import { RoomsType } from "@docspace/shared/enums";
+
 import TitleUrl from "PUBLIC_DIR/images/sdk-presets_title.react.svg?url";
 import SearchUrl from "PUBLIC_DIR/images/sdk-presets_search.react.svg?url";
 
@@ -131,7 +133,9 @@ const SimpleRoom = (props) => {
 
   useEffect(() => {
     const scroll = document.getElementsByClassName("section-scroll")[0];
-    scroll.scrollTop = 0;
+    if (scroll) {
+      scroll.scrollTop = 0;
+    }
     loadFrame();
     return () => destroyFrame();
   });
@@ -156,46 +160,48 @@ const SimpleRoom = (props) => {
     setHeight(e.target.value);
   };
 
-  const onChangeFolderId = async (id, publicInPath) => {
-    let newConfig = { id, requestToken: null, rootPath: "/rooms/shared/" };
+  const onChangeFolderId = async (rooms) => {
 
-    if (!!publicInPath) {
-      const links = await fetchExternalLinks(publicInPath.id);
+    const publicRoom = rooms[0];
 
-      if (links.length > 1) {
-        const linksOptions = links.map((link) => {
-          const { id, title, requestToken } = link.sharedTo;
-          const linkSettings = [];
+    let newConfig = {
+      id: publicRoom.id,
+      requestToken: null,
+      rootPath: "/rooms/shared/",
+    };
 
-          if ("password" in link.sharedTo) {
-            linkSettings.push("password");
-          }
-          if ("expirationDate" in link.sharedTo) {
-            linkSettings.push("expirationDate");
-          }
-          if (link.sharedTo.denyDownload) {
-            linkSettings.push("denyDownload");
-          }
+    const links = await fetchExternalLinks(publicRoom.id);
 
-          return {
-            key: id,
-            label: title,
-            requestToken: requestToken,
-            settings: linkSettings,
-          };
-        });
+    if (links.length > 1) {
+      const linksOptions = links.map((link) => {
+        const { id, title, requestToken } = link.sharedTo;
+        const linkSettings = [];
 
-        setSelectedLink(linksOptions[0]);
-        setSharedLinks(linksOptions);
-      }
+        if ("password" in link.sharedTo) {
+          linkSettings.push("password");
+        }
+        if ("expirationDate" in link.sharedTo) {
+          linkSettings.push("expirationDate");
+        }
+        if (link.sharedTo.denyDownload) {
+          linkSettings.push("denyDownload");
+        }
 
-      newConfig.requestToken = links[0].sharedTo?.requestToken;
-      newConfig.rootPath = "/rooms/share";
-    } else {
-      setSelectedLink(null);
-      setSharedLinks(null);
+        return {
+          key: id,
+          label: title,
+          requestToken: requestToken,
+          settings: linkSettings,
+        };
+      });
+
+      setSelectedLink(linksOptions[0]);
+      setSharedLinks(linksOptions);
     }
 
+    newConfig.requestToken = links[0].sharedTo?.requestToken;
+    newConfig.rootPath = "/rooms/share";
+
     setConfig((config) => {
       return { ...config, ...newConfig, init: true };
     });
@@ -348,10 +354,13 @@ const SimpleRoom = (props) => {
                 />
               </LabelGroup>
               <FilesSelectorInputWrapper>
-                <FilesSelectorInput
-                  onSelectFolder={onChangeFolderId}
-                  isSelect
-                  isRoomsOnly
+                <RoomsSelectorInput
+                  roomType={RoomsType.PublicRoom}
+                  withSearch
+                  withCancelButton
+                  onSubmit={onChangeFolderId}
+                  withHeader
+                  headerProps={{ headerLabel: t("Common:SelectAction") }}
                 />
               </FilesSelectorInputWrapper>
             </ControlsGroup>
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/StyledPresets.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/StyledPresets.js
index 00ac747674..370182bd82 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/StyledPresets.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/StyledPresets.js
@@ -198,12 +198,14 @@ export const Container = styled(Box)`
   gap: 48px;
 
   @media ${tablet} {
-    flex-direction: column;
+    flex-direction: column-reverse;
+    gap: 48px;
   }
 
   ${isMobile() &&
   css`
-    flex-direction: column;
+    flex-direction: column-reverse;
+    gap: 48px;
   `}
 `;
 
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Viewer.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Viewer.js
index e0a184e128..3541c06efd 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Viewer.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Viewer.js
@@ -97,7 +97,9 @@ const Viewer = (props) => {
 
   useEffect(() => {
     const scroll = document.getElementsByClassName("section-scroll")[0];
-    scroll.scrollTop = 0;
+    if (scroll) {
+      scroll.scrollTop = 0;
+    }
     loadFrame();
     return () => destroyFrame();
   });