diff --git a/client/src/components/Logs.css b/client/src/components/Logs.css
deleted file mode 100644
index 062bb8d7d1..0000000000
--- a/client/src/components/Logs.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.modal-title {
-  font-size: 27px;
-  font-weight: 600;
-}
-
-.log-nav {
-  position: sticky;
-  top: -1em;
-}
diff --git a/client/src/components/Logs.module.scss b/client/src/components/Logs.module.scss
new file mode 100644
index 0000000000..e1e73a9231
--- /dev/null
+++ b/client/src/components/Logs.module.scss
@@ -0,0 +1,6 @@
+.modalHeader {
+  & :global(.modal-title) {
+    font-size: 27px;
+    font-weight: 600;
+  }
+}
diff --git a/client/src/components/Logs.tsx b/client/src/components/Logs.tsx
index bc4e8ba246..6c0a96ac6c 100644
--- a/client/src/components/Logs.tsx
+++ b/client/src/components/Logs.tsx
@@ -44,7 +44,8 @@ import { Loader } from "./Loader";
 
 import cx from "classnames";
 import { ArrowRepeat, FileEarmarkArrowDown } from "react-bootstrap-icons";
-import "./Logs.css";
+
+import styles from "./Logs.module.scss";
 
 export interface ILogs {
   data: Record<string, string>;
@@ -395,7 +396,7 @@ function EnvironmentLogsPresent({
       }}
     >
       <ModalHeader
-        className="header-multiline"
+        className={cx(styles.modalHeader, "header-multiline")}
         toggle={() => {
           toggleLogs(name);
         }}