diff --git a/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx b/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx
index 759bc9bab..47f93eaa8 100644
--- a/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx
+++ b/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx
@@ -19,7 +19,7 @@ const AssistTabs = (props: Props) => {
           <>
             <div
               className={stl.btnLink}
-              onClick={() => showModal(<SessionList userId={props.userId} />, { right: true })}
+              onClick={() => showModal(<SessionList userId={props.userId} />, { right: true, width: 700 })}
             >
               Active Sessions
             </div>
diff --git a/frontend/app/components/Assist/components/SessionList/SessionList.tsx b/frontend/app/components/Assist/components/SessionList/SessionList.tsx
index da3ffbf06..a919fcf09 100644
--- a/frontend/app/components/Assist/components/SessionList/SessionList.tsx
+++ b/frontend/app/components/Assist/components/SessionList/SessionList.tsx
@@ -24,45 +24,43 @@ function SessionList(props: Props) {
     }, []);
 
     return (
-        <div style={{ width: '50vw' }}>
-            <div
-                className="border-r shadow h-screen overflow-y-auto"
-                style={{ backgroundColor: '#FAFAFA', zIndex: 999, width: '100%', minWidth: '700px' }}
-            >
-                <div className="p-4">
-                    <div className="text-2xl">
-                        {props.userId}'s <span className="color-gray-medium">Live Sessions</span>{' '}
-                    </div>
+        <div
+            className="border-r shadow h-screen overflow-y-auto"
+            style={{ backgroundColor: '#FAFAFA', zIndex: 999, width: '100%', minWidth: '700px' }}
+        >
+            <div className="p-4">
+                <div className="text-2xl">
+                    {props.userId}'s <span className="color-gray-medium">Live Sessions</span>{' '}
                 </div>
-                <Loader loading={props.loading}>
-                    <NoContent
-                        show={!props.loading && props.list.length === 0}
-                        title={
-                            <div className="flex items-center justify-center flex-col">
-                                <AnimatedSVG name={ICONS.NO_LIVE_SESSIONS} size={170} />
-                                <div className="mt-2" />
-                                <div className="text-center text-gray-600">No live sessions found.</div>
-                            </div>
-                        }
-                    >
-                        <div className="p-4">
-                            {props.list.map((session: any) => (
-                                <div className="mb-6">
-                                    {session.pageTitle && session.pageTitle !== '' && (
-                                        <div className="flex items-center mb-2">
-                                            <Label size="small" className="p-1">
-                                                <span className="color-gray-medium">TAB</span>
-                                            </Label>
-                                            <span className="ml-2 font-medium">{session.pageTitle}</span>
-                                        </div>
-                                    )}
-                                    <SessionItem compact={true} onClick={() => hideModal()} key={session.sessionId} session={session} />
-                                </div>
-                            ))}
-                        </div>
-                    </NoContent>
-                </Loader>
             </div>
+            <Loader loading={props.loading}>
+                <NoContent
+                    show={!props.loading && props.list.length === 0}
+                    title={
+                        <div className="flex items-center justify-center flex-col">
+                            <AnimatedSVG name={ICONS.NO_LIVE_SESSIONS} size={170} />
+                            <div className="mt-2" />
+                            <div className="text-center text-gray-600">No live sessions found.</div>
+                        </div>
+                    }
+                >
+                    <div className="p-4">
+                        {props.list.map((session: any) => (
+                            <div className="mb-6">
+                                {session.pageTitle && session.pageTitle !== '' && (
+                                    <div className="flex items-center mb-2">
+                                        <Label size="small" className="p-1">
+                                            <span className="color-gray-medium">TAB</span>
+                                        </Label>
+                                        <span className="ml-2 font-medium">{session.pageTitle}</span>
+                                    </div>
+                                )}
+                                <SessionItem compact={true} onClick={() => hideModal()} key={session.sessionId} session={session} />
+                            </div>
+                        ))}
+                    </div>
+                </NoContent>
+            </Loader>
         </div>
     );
 }
diff --git a/frontend/app/components/Client/Audit/AuditDetailModal/AuditDetailModal.tsx b/frontend/app/components/Client/Audit/AuditDetailModal/AuditDetailModal.tsx
index 934604dbb..634eace5d 100644
--- a/frontend/app/components/Client/Audit/AuditDetailModal/AuditDetailModal.tsx
+++ b/frontend/app/components/Client/Audit/AuditDetailModal/AuditDetailModal.tsx
@@ -11,7 +11,7 @@ function AuditDetailModal(props: Props) {
     // console.log('jsonResponse', jsonResponse)
 
     return (
-        <div style={{ width: '500px' }} className="bg-white h-screen overflow-y-auto">
+        <div className="bg-white h-screen overflow-y-auto">
             <h1 className="text-2xl p-4">Audit Details</h1>
             <div className="p-4">
                 <h5 className="mb-2">{ 'URL'}</h5>
diff --git a/frontend/app/components/Client/Audit/AuditList/AuditList.tsx b/frontend/app/components/Client/Audit/AuditList/AuditList.tsx
index f795e0c1b..4d7c93a54 100644
--- a/frontend/app/components/Client/Audit/AuditList/AuditList.tsx
+++ b/frontend/app/components/Client/Audit/AuditList/AuditList.tsx
@@ -54,7 +54,7 @@ function AuditList(props: Props) {
                     <AuditListItem
                         key={index}
                         audit={item}
-                        onShowDetails={() => showModal(<AuditDetailModal audit={item} />, { right: true })}
+                        onShowDetails={() => showModal(<AuditDetailModal audit={item} />, { right: true, width: 500 })}
                     />
                 ))}
                 
diff --git a/frontend/app/components/Client/CustomFields/CustomFieldForm.js b/frontend/app/components/Client/CustomFields/CustomFieldForm.js
index adc9ac884..ca13a20b4 100644
--- a/frontend/app/components/Client/CustomFields/CustomFieldForm.js
+++ b/frontend/app/components/Client/CustomFields/CustomFieldForm.js
@@ -24,7 +24,7 @@ class CustomFieldForm extends React.PureComponent {
         const { field, errors } = this.props;
         const exists = field.exists();
         return (
-            <div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
+            <div className="bg-white h-screen overflow-y-auto">
                 <h3 className="p-5 text-2xl">{exists ? 'Update' : 'Add'} Metadata Field</h3>
                 <Form className={styles.wrapper}>
                     <Form.Field>
diff --git a/frontend/app/components/Client/Integrations/Integrations.tsx b/frontend/app/components/Client/Integrations/Integrations.tsx
index 73572c9b0..fe281235b 100644
--- a/frontend/app/components/Client/Integrations/Integrations.tsx
+++ b/frontend/app/components/Client/Integrations/Integrations.tsx
@@ -63,11 +63,11 @@ function Integrations(props: Props) {
         }
     }, []);
 
-    const onClick = (integration: any) => {
+    const onClick = (integration: any, width: number) => {
         if (integration.slug) {
             props.fetch(integration.slug, props.siteId);
         }
-        showModal(integration.component, { right: true });
+        showModal(integration.component, { right: true, width });
     };
 
     const onChangeSelect = ({ value }: any) => {
@@ -100,7 +100,7 @@ function Integrations(props: Props) {
                                 integrated={integratedList.includes(integration.slug)}
                                 key={integration.name}
                                 integration={integration}
-                                onClick={() => onClick(integration)}
+                                onClick={() => onClick(integration, cat.title === "Plugins" ? 500 : 350)}
                                 hide={
                                     (integration.slug === 'github' && integratedList.includes('jira')) ||
                                     (integration.slug === 'jira' && integratedList.includes('github'))
diff --git a/frontend/app/components/Client/Sites/InstallButton/InstallButton.tsx b/frontend/app/components/Client/Sites/InstallButton/InstallButton.tsx
index 0fe5fce65..da1a2fb44 100644
--- a/frontend/app/components/Client/Sites/InstallButton/InstallButton.tsx
+++ b/frontend/app/components/Client/Sites/InstallButton/InstallButton.tsx
@@ -12,7 +12,7 @@ function InstallButton(props: Props) {
     const onClick = () => {
         showModal(
             <TrackingCodeModal title="Tracking Code" subTitle={`(Unique to ${site.host})`} onClose={hideModal} site={site} />,
-            { right: true }
+            { right: true, width: 700 }
         );
     };
     return (
diff --git a/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx b/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
index d1799cc6a..9bd37624d 100644
--- a/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
+++ b/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
@@ -49,7 +49,7 @@ function UserForm(props: Props) {
     }
     
     return useObserver(() => (
-        <div className="bg-white h-screen p-6" style={{ width: '400px'}}>
+        <div className="bg-white h-screen p-6">
             <div className="">
                 <h1 className="text-2xl mb-4">{`${user.exists() ? 'Update' : 'Invite'} User`}</h1>
             </div>
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx
index dbc3c5504..94a3e5c4f 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx
@@ -30,6 +30,7 @@ function CustomMetricTableErrors(props: RouteComponentProps & Props) {
 
         showModal(<ErrorDetailsModal errorId={errorId} />, {
             right: true,
+            width: 1200,
             onClose: () => {
                 if (props.history.location.pathname.includes("/dashboard") || props.history.location.pathname.includes("/metrics/")) {
                     props.history.replace({ search: "" });
diff --git a/frontend/app/components/Dashboard/components/Errors/ErrorDetailsModal/ErrorDetailsModal.tsx b/frontend/app/components/Dashboard/components/Errors/ErrorDetailsModal/ErrorDetailsModal.tsx
index 38f86af66..b8513580b 100644
--- a/frontend/app/components/Dashboard/components/Errors/ErrorDetailsModal/ErrorDetailsModal.tsx
+++ b/frontend/app/components/Dashboard/components/Errors/ErrorDetailsModal/ErrorDetailsModal.tsx
@@ -7,7 +7,7 @@ interface Props {
 function ErrorDetailsModal(props: Props) {
     return (
         <div
-            style={{ width: '85vw', maxWidth: '1200px' }}
+            // style={{ width: '85vw', maxWidth: '1200px' }}
             className="bg-white h-screen p-4 overflow-y-auto"
         >
             <ErrorInfo errorId={props.errorId} />
diff --git a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js
index ecafe6611..e6893ca3e 100644
--- a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js
+++ b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js
@@ -117,7 +117,7 @@ export default withRequest({
 function UserName({ name, userId, hash }) {
     const { showModal } = useModal();
     const onClick = () => {
-        showModal(<UserSessionsModal userId={userId} hash={hash} name={name} />, { right: true });
+        showModal(<UserSessionsModal userId={userId} hash={hash} name={name} />, { right: true, width: 700 });
     };
     return <div onClick={userId ? onClick : () => {}}>{name}</div>;
 }
diff --git a/frontend/app/components/Session_/BugReport/BugReportModal.tsx b/frontend/app/components/Session_/BugReport/BugReportModal.tsx
index da4fa64b7..d7909675d 100644
--- a/frontend/app/components/Session_/BugReport/BugReportModal.tsx
+++ b/frontend/app/components/Session_/BugReport/BugReportModal.tsx
@@ -184,7 +184,7 @@ function BugReportModal({ hideModal, session, width, height, account, xrayProps,
   return (
     <div
       className="bg-white overflow-y-scroll"
-      style={{ maxWidth: '70vw', width: 620, height: '100vh' }}
+      style={{ height: '100vh' }}
     >
       <div className="flex flex-col p-4 gap-8 bg-white relative" ref={reportRef}>
         <Title userName={account.name} />
diff --git a/frontend/app/components/Session_/Multiview/Multiview.tsx b/frontend/app/components/Session_/Multiview/Multiview.tsx
index 420df0602..098fa3267 100644
--- a/frontend/app/components/Session_/Multiview/Multiview.tsx
+++ b/frontend/app/components/Session_/Multiview/Multiview.tsx
@@ -64,12 +64,12 @@ function Multiview({
   };
 
   const openListModal = () => {
-    showModal(<AssistSessionsModal onAdd={hideModal} />, { right: true });
+    showModal(<AssistSessionsModal onAdd={hideModal} />, { right: true, width: 700 });
   };
 
   const replaceSession = (e: React.MouseEvent, sessionId: string) => {
     e.stopPropagation();
-    showModal(<AssistSessionsModal onAdd={hideModal} replaceTarget={sessionId} />, { right: true });
+    showModal(<AssistSessionsModal onAdd={hideModal} replaceTarget={sessionId} />, { right: true, width: 700 });
   };
 
   const deleteSession = (e: React.MouseEvent, sessionId: string) => {
diff --git a/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/StackEventModal.tsx b/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/StackEventModal.tsx
index 51b150add..0afbc6d30 100644
--- a/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/StackEventModal.tsx
+++ b/frontend/app/components/Session_/OverviewPanel/components/StackEventModal/StackEventModal.tsx
@@ -23,7 +23,7 @@ function StackEventModal(props: Props) {
         }
     };
     return (
-        <div className="bg-white h-screen overflow-y-auto" style={{ width: '450px' }}>
+        <div className="bg-white h-screen overflow-y-auto">
             {renderPopupContent()}
         </div>
     );
diff --git a/frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx b/frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx
index 206832329..499c38d25 100644
--- a/frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx
+++ b/frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx
@@ -27,18 +27,18 @@ const TimelinePointer = React.memo((props: Props) => {
     }
 
     if (type === 'ERRORS') {
-      showModal(<ErrorDetailsModal errorId={pointer.errorId} />, { right: true });
+      showModal(<ErrorDetailsModal errorId={pointer.errorId} />, { right: true, width: 1200 });
     }
 
     if (type === 'EVENT') {
-      showModal(<StackEventModal event={pointer} />, { right: true });
+      showModal(<StackEventModal event={pointer} />, { right: true, width: 450 });
     }
 
     if (type === NETWORK) {
       if (pointer.tp === 'graph_ql') {
-        showModal(<GraphQLDetailsModal resource={pointer} />, { right: true });
+        showModal(<GraphQLDetailsModal resource={pointer} />, { right: true, width: 500 });
       } else {
-        showModal(<FetchDetails resource={pointer} fetchPresented={props.fetchPresented} />, { right: true });
+        showModal(<FetchDetails resource={pointer} fetchPresented={props.fetchPresented} />, { right: true, width: 500 });
       }
     }
     // props.toggleBottomBlock(type);
diff --git a/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx b/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx
index 5fba5ea54..c1f192360 100644
--- a/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx
+++ b/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx
@@ -73,7 +73,7 @@ function AssistSessionsModal(props: Props) {
   };
 
   return (
-    <div className="bg-gray-lightest box-shadow h-screen p-4" style={{ width: '1000px', maxWidth: '60vw' }}>
+    <div className="bg-gray-lightest box-shadow h-screen p-4">
       <div className="flex flex-col my-2 w-full gap-2 ">
         <div className="flex items-center gap-2 w-full">
           <Tooltip title="Refresh" placement="top" delay={200}>
diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js
index 55d7cfc31..8e1cfe71e 100644
--- a/frontend/app/components/Session_/Subheader.js
+++ b/frontend/app/components/Session_/Subheader.js
@@ -49,7 +49,7 @@ function SubHeader(props) {
       eventsList: eventsList,
       endTime: endTime,
     }
-    showModal(<BugReportModal width={width} height={height} xrayProps={xrayProps} hideModal={hideModal} />, { right: true });
+    showModal(<BugReportModal width={width} height={height} xrayProps={xrayProps} hideModal={hideModal} />, { right: true, width: 620 });
   };
 
   return (
diff --git a/frontend/app/components/shared/AlertTriggersModal/AlertTriggersModal.tsx b/frontend/app/components/shared/AlertTriggersModal/AlertTriggersModal.tsx
index 594fa0f8b..4f6ee030d 100644
--- a/frontend/app/components/shared/AlertTriggersModal/AlertTriggersModal.tsx
+++ b/frontend/app/components/shared/AlertTriggersModal/AlertTriggersModal.tsx
@@ -31,7 +31,7 @@ function AlertTriggersModal(props: Props) {
     }, [])
 
     return useObserver(() => (
-        <div className="bg-white box-shadow h-screen overflow-y-auto" style={{ width: '350px'}}>
+        <div className="bg-white box-shadow h-screen overflow-y-auto">
             <div className="flex items-center justify-between p-5 text-2xl">
                 <div>Alerts</div>
                 { count > 0 && (
diff --git a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
index 1c7e9c425..f98a2a93d 100644
--- a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
+++ b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
@@ -116,7 +116,8 @@ function ConsolePanel() {
     showModal(
       <ErrorDetailsModal errorId={log.errorId} />, 
       { 
-        right: true, 
+        right: true,
+        width: 1200,
         onClose: () => {
           setIsDetailsModalActive(false)
           timeoutStartAutoscroll()
diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
index 1f2212152..d1de4dca7 100644
--- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
+++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
@@ -234,6 +234,7 @@ function NetworkPanel({ startedAt }: { startedAt: number }) {
       <FetchDetailsModal time={item.time + startedAt} resource={item} rows={filteredList} fetchPresented={fetchList.length > 0} />,
       {
         right: true,
+        width: 500,
         onClose: () => {
           setIsDetailsModalActive(false)
           timeoutStartAutoscroll()
diff --git a/frontend/app/components/shared/DevTools/ProfilerModal/ProfilerModal.tsx b/frontend/app/components/shared/DevTools/ProfilerModal/ProfilerModal.tsx
index a5909ada7..fb562b06f 100644
--- a/frontend/app/components/shared/DevTools/ProfilerModal/ProfilerModal.tsx
+++ b/frontend/app/components/shared/DevTools/ProfilerModal/ProfilerModal.tsx
@@ -9,7 +9,7 @@ function ProfilerModal(props: Props) {
   } = props;
 
   return (
-    <div className="bg-white overflow-y-auto h-screen p-5" style={{ width: '500px' }}>
+    <div className="bg-white overflow-y-auto h-screen p-5">
       <h5 className="mb-2 text-2xl">{name}</h5>
       <h5 className="py-3">{'Arguments'}</h5>
       <ul className="color-gray-medium">
diff --git a/frontend/app/components/shared/DevTools/ProfilerPanel/ProfilerPanel.tsx b/frontend/app/components/shared/DevTools/ProfilerPanel/ProfilerPanel.tsx
index 0eabda0e4..0b7a8bfc1 100644
--- a/frontend/app/components/shared/DevTools/ProfilerPanel/ProfilerPanel.tsx
+++ b/frontend/app/components/shared/DevTools/ProfilerPanel/ProfilerPanel.tsx
@@ -23,7 +23,7 @@ function ProfilerPanel() {
   const filtered = useRegExListFilterMemo(profiles, pr => pr.name, filter)
 
   const onRowClick = (profile: any) => {
-    showModal(<ProfilerModal profile={profile} />, { right: true });
+    showModal(<ProfilerModal profile={profile} />, { right: true, width: 500 });
   };
   return (
     <BottomBlock>
diff --git a/frontend/app/components/shared/DevTools/StackEventModal/StackEventModal.tsx b/frontend/app/components/shared/DevTools/StackEventModal/StackEventModal.tsx
index 991cca1ef..7dc5b0ebf 100644
--- a/frontend/app/components/shared/DevTools/StackEventModal/StackEventModal.tsx
+++ b/frontend/app/components/shared/DevTools/StackEventModal/StackEventModal.tsx
@@ -22,7 +22,7 @@ function StackEventModal(props: Props) {
     }
   };
   return (
-    <div className="bg-white overflow-y-auto h-screen p-5" style={{ width: '500px' }}>
+    <div className="bg-white overflow-y-auto h-screen p-5">
       <h5 className="mb-2 text-2xl">Stack Event</h5>
       {renderPopupContent()}
     </div>
diff --git a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
index e36c17ccf..bfa06f7bb 100644
--- a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
+++ b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
@@ -66,6 +66,7 @@ function StackEventPanel() {
       <StackEventModal event={item} />, 
       { 
         right: true,
+        width: 500,
         onClose: () => {
           setIsDetailsModalActive(false)
           timeoutStartAutoscroll()
diff --git a/frontend/app/components/shared/SavedSearch/SavedSearch.tsx b/frontend/app/components/shared/SavedSearch/SavedSearch.tsx
index 92b6585bc..e9d299292 100644
--- a/frontend/app/components/shared/SavedSearch/SavedSearch.tsx
+++ b/frontend/app/components/shared/SavedSearch/SavedSearch.tsx
@@ -25,7 +25,7 @@ function SavedSearch(props: Props) {
     <div className={cn("flex items-center", { [stl.disabled] : list.size === 0})}>
       <Button
         variant="outline"
-        onClick={() => showModal(<SavedSearchModal />, { right: true })}
+        onClick={() => showModal(<SavedSearchModal />, { right: true, width: 450 })}
       >
         <span className="mr-1">Saved Search</span>
         <span className="font-bold mr-2">{list.size}</span>
diff --git a/frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx b/frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx
index 02fdd236e..0e1cccedd 100644
--- a/frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx
+++ b/frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx
@@ -62,7 +62,7 @@ function SavedSearchModal(props: Props) {
     const shownItems = props.list.filter((item) => item.name.includes(filterQuery));
 
     return (
-        <div className="bg-white box-shadow h-screen" style={{ width: '450px' }}>
+        <div className="bg-white box-shadow h-screen">
             <div className="p-6">
                 <h1 className="text-2xl">
                     Saved Search <span className="color-gray-medium">{props.list.size}</span>
diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx b/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx
index 428b8f153..7b9726000 100644
--- a/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx
@@ -7,7 +7,7 @@ function SessionSettingButton(props: any) {
     const { showModal } = useModal();
 
     const handleClick = () => {
-        showModal(<SessionSettings />, { right: true });
+        showModal(<SessionSettings />, { right: true, width: 450 });
     };
 
     return (
diff --git a/frontend/app/components/shared/SessionSettings/SessionSettings.tsx b/frontend/app/components/shared/SessionSettings/SessionSettings.tsx
index 9a097a47a..ff98fb53c 100644
--- a/frontend/app/components/shared/SessionSettings/SessionSettings.tsx
+++ b/frontend/app/components/shared/SessionSettings/SessionSettings.tsx
@@ -6,7 +6,7 @@ import CaptureRate from './components/CaptureRate';
 
 function SessionSettings() {
     return (
-        <div className="bg-white box-shadow h-screen overflow-y-auto" style={{ width: '450px'}}>
+        <div className="bg-white box-shadow h-screen overflow-y-auto">
             <div className="px-6 pt-6">
                 <h1 className="text-2xl">Sessions Settings</h1>
             </div>
diff --git a/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx b/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx
index 8692133f0..0c8b1b480 100644
--- a/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx
+++ b/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx
@@ -46,7 +46,7 @@ function UserSessionsModal(props: Props) {
     useEffect(fetchData, [filter.page, filter.startDate, filter.endDate]);
 
     return (
-        <div className="h-screen overflow-y-auto bg-white" style={{ width: '700px' }}>
+        <div className="h-screen overflow-y-auto bg-white">
             <div className="flex items-center justify-between w-full px-5 py-3">
                 <div className="text-lg flex items-center">
                     <Avatar isActive={false} seed={hash} isAssist={false} className={''} />
diff --git a/frontend/app/components/ui/ErrorItem/ErrorItem.tsx b/frontend/app/components/ui/ErrorItem/ErrorItem.tsx
index d64d24eb9..19908cbb1 100644
--- a/frontend/app/components/ui/ErrorItem/ErrorItem.tsx
+++ b/frontend/app/components/ui/ErrorItem/ErrorItem.tsx
@@ -15,7 +15,7 @@ function ErrorItem({ error = {}, onJump, inactive, selected }: Props) {
   const { showModal } = useModal();
 
   const onErrorClick = () => {
-    showModal(<ErrorDetailsModal errorId={error.errorId} />, { right: true });
+    showModal(<ErrorDetailsModal errorId={error.errorId} />, { right: true, width: 1200 });
   };
   return (
     <div