diff --git a/frontend/src/container/AlertHistory/AlertHistory.styles.scss b/frontend/src/container/AlertHistory/AlertHistory.module.scss
similarity index 51%
rename from frontend/src/container/AlertHistory/AlertHistory.styles.scss
rename to frontend/src/container/AlertHistory/AlertHistory.module.scss
index 39fce3ca29..1defea4236 100644
--- a/frontend/src/container/AlertHistory/AlertHistory.styles.scss
+++ b/frontend/src/container/AlertHistory/AlertHistory.module.scss
@@ -1,5 +1,5 @@
-.alert-history {
+.alertHistory {
 	display: flex;
 	flex-direction: column;
-	gap: 24px;
+	gap: var(--spacing-10);
 }
diff --git a/frontend/src/container/AlertHistory/AlertHistory.tsx b/frontend/src/container/AlertHistory/AlertHistory.tsx
index 7fa9a819a2..e811a1be8e 100644
--- a/frontend/src/container/AlertHistory/AlertHistory.tsx
+++ b/frontend/src/container/AlertHistory/AlertHistory.tsx
@@ -3,13 +3,13 @@ import { useState } from 'react';
 import Statistics from './Statistics/Statistics';
 import Timeline from './Timeline/Timeline';
 
-import './AlertHistory.styles.scss';
+import styles from './AlertHistory.module.scss';
 
 function AlertHistory(): JSX.Element {
 	const [totalCurrentTriggers, setTotalCurrentTriggers] = useState(0);
 
 	return (
-		<div className="alert-history">
+		<div className={styles.alertHistory}>
 			<Statistics
 				totalCurrentTriggers={totalCurrentTriggers}
 				setTotalCurrentTriggers={setTotalCurrentTriggers}