diff --git a/QandA/frontend/src/App.css b/QandA/frontend/src/App.module.css
similarity index 100%
rename from QandA/frontend/src/App.css
rename to QandA/frontend/src/App.module.css
diff --git a/QandA/frontend/src/App.tsx b/QandA/frontend/src/App.tsx
index f601372..4b1e4ba 100644
--- a/QandA/frontend/src/App.tsx
+++ b/QandA/frontend/src/App.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Header } from './Header';
-import './App.css';
+import style from './App.module.css';
 import { HomePage } from './HomePage';
 
 function App() {
   return (
-    <div className="container">
+    <div className={style.container}>
       <Header />
       <HomePage />
     </div>
diff --git a/QandA/frontend/src/Header.css b/QandA/frontend/src/Header.module.css
similarity index 100%
rename from QandA/frontend/src/Header.css
rename to QandA/frontend/src/Header.module.css
diff --git a/QandA/frontend/src/Header.tsx b/QandA/frontend/src/Header.tsx
index 7db8761..b9a07c8 100644
--- a/QandA/frontend/src/Header.tsx
+++ b/QandA/frontend/src/Header.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { UserIcon } from './Icons';
-import './Header.css';
+import style from './Header.module.css';
 
 export const Header = () => {
   const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -8,7 +8,7 @@ export const Header = () => {
   };
 
   return (
-    <div className="container">
+    <div className={style.container}>
       <a href="./">Q & A</a>
       <input
         type="text"