diff --git a/frontend/src/components/InputWithLabel/InputWithLabel.tsx b/frontend/src/components/InputWithLabel/InputWithLabel.tsx
index a36cde7f75e2..70348293a9e4 100644
--- a/frontend/src/components/InputWithLabel/InputWithLabel.tsx
+++ b/frontend/src/components/InputWithLabel/InputWithLabel.tsx
@@ -13,6 +13,7 @@ function InputWithLabel({
 	onClose,
 	labelAfter,
 	onChange,
+	className,
 }: {
 	label: string;
 	initialValue?: string | number;
@@ -21,6 +22,7 @@ function InputWithLabel({
 	onClose?: () => void;
 	labelAfter?: boolean;
 	onChange: (value: string) => void;
+	className?: string;
 }): JSX.Element {
 	const [inputValue, setInputValue] = useState<string>(
 		initialValue ? initialValue.toString() : '',
@@ -33,7 +35,7 @@ function InputWithLabel({
 
 	return (
 		<div
-			className={cx('input-with-label', {
+			className={cx('input-with-label', className, {
 				labelAfter,
 			})}
 		>
@@ -63,6 +65,7 @@ InputWithLabel.defaultProps = {
 	onClose: undefined,
 	labelAfter: false,
 	initialValue: undefined,
+	className: undefined,
 };
 
 export default InputWithLabel;
diff --git a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
index 6a25d5642a84..ecab3a877e3a 100644
--- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
@@ -392,11 +392,19 @@
 		align-items: flex-start;
 		gap: 8px;
 
+		flex-wrap: wrap;
+
+		.query-search-container {
+			flex: 1;
+		}
+
 		.traces-search-filter-container {
 			display: flex;
 			flex-direction: row;
 			align-items: center;
 			gap: 8px;
+
+			width: 180px;
 		}
 
 		.ant-select {
diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.styles.scss b/frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.styles.scss
index d33a667e1c48..de0efc2a19f1 100644
--- a/frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.styles.scss
@@ -47,6 +47,7 @@
 	.metrics-aggregation-section-content {
 		display: flex;
 		flex-direction: row;
+		flex-wrap: wrap;
 		gap: 8px;
 
 		.metrics-aggregation-section-content-item {
@@ -78,10 +79,6 @@
 				}
 			}
 		}
-
-		.space-aggregation-select {
-			min-width: 480px !important;
-		}
 	}
 }
 
diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss
index 561d5c5714ff..ce83d1288a24 100644
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss
@@ -5,6 +5,7 @@
 
 	.add-ons-tabs {
 		display: flex;
+		flex-wrap: wrap;
 
 		.add-on-tab-title {
 			display: flex;
@@ -21,7 +22,7 @@
 		.tab {
 			border: 1px solid var(--bg-slate-400);
 			border-left: none;
-			min-width: 114px;
+			min-width: 120px;
 			height: 36px;
 			line-height: 36px;
 
@@ -111,7 +112,7 @@
 					font-size: 12px !important;
 					font-weight: 500 !important;
 					margin-top: -2px !important;
-					min-width: 400px !important;
+					width: 100% !important;
 					position: absolute !important;
 					top: 38px !important;
 					left: 0px !important;
@@ -164,6 +165,7 @@
 							overflow: hidden;
 
 							font-family: 'Space Mono', monospace !important;
+							color: var(--bg-vanilla-100) !important;
 
 							.cm-completionIcon {
 								display: none !important;
@@ -252,7 +254,7 @@
 
 .selected-add-ons-content {
 	display: grid;
-	grid-template-columns: repeat(2, 1fr);
+	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
 	gap: 8px;
 	padding-bottom: 8px;
 	position: relative;
@@ -264,6 +266,7 @@
 
 		max-width: 100%;
 		min-width: 100%;
+		min-width: 420px;
 
 		box-sizing: border-box;
 		position: relative;
diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss
index f061e25a1f85..49dff7012470 100644
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss
@@ -7,6 +7,12 @@
 		flex-direction: row;
 		gap: 8px;
 		align-items: flex-start;
+		flex-wrap: wrap;
+
+		.query-aggregation-select-container {
+			flex: 1;
+			min-width: 400px;
+		}
 
 		.query-aggregation-options-input {
 			width: 100%;
@@ -29,7 +35,15 @@
 			flex-direction: row;
 			align-items: center;
 			gap: 8px;
-			width: 400px;
+			max-width: 360px;
+
+			.query-aggregation-interval-input-container {
+				.query-aggregation-interval-input {
+					input {
+						max-width: 120px;
+					}
+				}
+			}
 		}
 
 		.query-aggregation-select-container {
diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx
index c0fea178967f..21e1d4475061 100644
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx
@@ -44,6 +44,7 @@ function QueryAggregationOptions({
 						<div className="query-aggregation-interval-input-container">
 							<InputWithLabel
 								initialValue="60"
+								className="query-aggregation-interval-input"
 								label="Seconds"
 								placeholder="60"
 								type="number"
diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss
index 927e01472af3..443b0a4ec197 100644
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss
@@ -12,7 +12,7 @@
 
 		.query-where-clause-editor {
 			flex: 1;
-			min-width: 0;
+			min-width: 400px;
 		}
 
 		.query-status-container {
diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx b/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx
index 75fc5089aef7..9028505ec14d 100644
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx
@@ -153,7 +153,9 @@ export const QueryV2 = memo(function QueryV2({
 						)}
 
 						<div className="qb-search-filter-container">
-							<QuerySearch />
+							<div className="query-search-container">
+								<QuerySearch />
+							</div>
 
 							{showSpanScopeSelector && (
 								<div className="traces-search-filter-container">
diff --git a/frontend/src/container/TopNav/DateTimeSelectionV2/DateTimeSelectionV2.styles.scss b/frontend/src/container/TopNav/DateTimeSelectionV2/DateTimeSelectionV2.styles.scss
index 601b513f8fc4..0cdc9bafd57b 100644
--- a/frontend/src/container/TopNav/DateTimeSelectionV2/DateTimeSelectionV2.styles.scss
+++ b/frontend/src/container/TopNav/DateTimeSelectionV2/DateTimeSelectionV2.styles.scss
@@ -31,6 +31,10 @@
 		}
 	}
 
+	.refresh-text-container {
+		display: none;
+	}
+
 	.refresh-actions {
 		display: flex;
 		flex-direction: row;
@@ -309,3 +313,11 @@
 		border-color: var(--bg-vanilla-300);
 	}
 }
+
+@media (min-width: 1400px) {
+	.date-time-selector {
+		.refresh-text-container {
+			display: block;
+		}
+	}
+}
diff --git a/frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx b/frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx
index 3ca773569fbb..e19ab3dc4272 100644
--- a/frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx
+++ b/frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx
@@ -782,18 +782,22 @@ function DateTimeSelection({
 					</Button>
 				</FormItem>
 			)}
+
 			{showOldExplorerCTA && (
 				<div style={{ marginRight: 12 }}>
 					<NewExplorerCTA />
 				</div>
 			)}
+
 			{!hasSelectedTimeError && !refreshButtonHidden && showRefreshText && (
-				<RefreshText
-					{...{
-						onLastRefreshHandler,
-					}}
-					refreshButtonHidden={refreshButtonHidden}
-				/>
+				<div className="refresh-text-container">
+					<RefreshText
+						{...{
+							onLastRefreshHandler,
+						}}
+						refreshButtonHidden={refreshButtonHidden}
+					/>
+				</div>
 			)}
 			<Form
 				form={formSelector}