diff --git a/projects/js-packages/components/components/threats-data-views/index.tsx b/projects/js-packages/components/components/threats-data-views/index.tsx
index 27cbfa23935fe..131fad7b66b8c 100644
--- a/projects/js-packages/components/components/threats-data-views/index.tsx
+++ b/projects/js-packages/components/components/threats-data-views/index.tsx
@@ -16,6 +16,7 @@ import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { useCallback, useMemo, useState } from 'react';
 import Badge from '../badge';
+import useBreakpointMatch from '../layout/use-breakpoint-match';
 import ThreatFixerButton from '../threat-fixer-button';
 import ThreatSeverityBadge from '../threat-severity-badge';
 import {
@@ -79,16 +80,7 @@ export default function ThreatsDataViews( {
 	onIgnoreThreats?: ActionButton< Threat >[ 'callback' ];
 	onUnignoreThreats?: ActionButton< Threat >[ 'callback' ];
 } ): JSX.Element {
-	const baseView = {
-		sort: {
-			field: 'severity',
-			direction: 'desc' as SortDirection,
-		},
-		search: '',
-		filters: filters || [],
-		page: 1,
-		perPage: 20,
-	};
+	const [ isSm ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );
 
 	/**
 	 * DataView default layouts.
@@ -97,15 +89,19 @@ export default function ThreatsDataViews( {
 	 *
 	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#defaultlayouts-record-string-view
 	 */
-	const defaultLayouts: SupportedLayouts = {
-		table: {
-			...baseView,
-			fields: [ THREAT_FIELD_SEVERITY, THREAT_FIELD_TYPE, THREAT_FIELD_AUTO_FIX ],
-			titleField: THREAT_FIELD_TITLE,
-			descriptionField: THREAT_FIELD_DESCRIPTION,
-			showMedia: false,
-		},
-		list: {
+	const defaultLayouts: SupportedLayouts = useMemo( () => {
+		const baseView = {
+			sort: {
+				field: 'severity',
+				direction: 'desc' as SortDirection,
+			},
+			search: '',
+			filters: filters || [],
+			page: 1,
+			perPage: 20,
+		};
+
+		const listLayout = {
 			...baseView,
 			fields: [
 				THREAT_FIELD_SEVERITY,
@@ -116,18 +112,41 @@ export default function ThreatsDataViews( {
 			titleField: THREAT_FIELD_TITLE,
 			mediaField: THREAT_FIELD_ICON,
 			showMedia: true,
-		},
-	};
+		};
+
+		const tableLayout = {
+			...baseView,
+			fields: [ THREAT_FIELD_SEVERITY, THREAT_FIELD_TYPE, THREAT_FIELD_AUTO_FIX ],
+			titleField: THREAT_FIELD_TITLE,
+			descriptionField: THREAT_FIELD_DESCRIPTION,
+			showMedia: false,
+		};
+
+		return { table: tableLayout, list: listLayout };
+	}, [ filters ] );
+
+	const tableView: View = useMemo(
+		() => ( {
+			type: 'table',
+			...defaultLayouts.table,
+		} ),
+		[ defaultLayouts.table ]
+	);
+
+	const listView: View = useMemo(
+		() => ( {
+			type: 'list',
+			...defaultLayouts.list,
+		} ),
+		[ defaultLayouts.list ]
+	);
 
 	/**
 	 * DataView view object - configures how the dataset is visible to the user.
 	 *
 	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#view-object
 	 */
-	const [ view, setView ] = useState< View >( {
-		type: 'table',
-		...defaultLayouts.table,
-	} );
+	const [ view, setView ] = useState< View >( isSm ? listView : tableView );
 
 	/**
 	 * Compute values from the provided threats data.
diff --git a/projects/js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx b/projects/js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx
index be7b252b80c22..d0b5a6861a137 100644
--- a/projects/js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx
+++ b/projects/js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx
@@ -94,6 +94,7 @@ export default function ThreatsStatusToggleGroupControl( {
 	 */
 	const isStatusFilterSelected = useMemo(
 		() => ( threatStatuses: ThreatStatus[] ) =>
+			Array.isArray( view.filters ) &&
 			view.filters.some(
 				filter =>
 					filter.field === 'status' &&
diff --git a/projects/plugins/protect/src/js/routes/home/styles.module.scss b/projects/plugins/protect/src/js/routes/home/styles.module.scss
index 987e865644066..c4fd97d1e5211 100644
--- a/projects/plugins/protect/src/js/routes/home/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/home/styles.module.scss
@@ -2,11 +2,6 @@
 	padding-left: 0;
 	padding-right: 0;
 	overflow: hidden;
-
-	> * {
-		margin-left: calc( var( --spacing-base ) * -3 ); // -24px
-		margin-right: calc( var( --spacing-base ) * -3 ); // -24px
-	}
 }
 
 .view-scan-report {
diff --git a/projects/plugins/protect/src/js/routes/scan/styles.module.scss b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
index 6a04aedcda048..0815b6dd2c969 100644
--- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss
+++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -1,3 +1,15 @@
+.scan-results-container {
+	:global {
+		@media ( max-width: 599px ) {
+			div.dataviews-wrapper .dataviews__view-actions {
+				flex-wrap: wrap;
+				justify-content: center;
+				gap: calc( var( --spacing-base ) * 1.5 ); // 12px;
+			}
+		}
+	}
+}
+
 .hero-main {
 	max-width: 512px;
 }
@@ -17,11 +29,6 @@
 	padding-left: 0;
 	padding-right: 0;
 	overflow: hidden;
-
-	> * {
-		margin-left: calc( var( --spacing-base ) * -3 ); // -24px
-		margin-right: calc( var( --spacing-base ) * -3 ); // -24px
-	}
 }
 
 .progress-animation {