diff --git a/src/screens/PageNotFound/PageNotFound.module.css b/src/screens/PageNotFound/PageNotFound.module.css
deleted file mode 100644
index 3c1b9a3413..0000000000
--- a/src/screens/PageNotFound/PageNotFound.module.css
+++ /dev/null
@@ -1,109 +0,0 @@
-.notfound {
-  position: relative;
-  bottom: 20px;
-}
-
-.notfound h3 {
-  font-family: 'Roboto', sans-serif;
-  font-weight: normal;
-  letter-spacing: 1px;
-}
-
-.notfound .brand span {
-  margin-top: 50px;
-  font-size: 40px;
-}
-.notfound .brand h3 {
-  font-weight: 300;
-  margin: 10px 0 0 0;
-}
-.notfound h1.head {
-  font-size: 250px;
-  font-weight: 900;
-  color: #31bb6b;
-  letter-spacing: 25px;
-  margin: 10px 0 0 0;
-}
-.notfound h1.head span {
-  position: relative;
-  display: inline-block;
-}
-.notfound h1.head span:before,
-.notfound h1.head span:after {
-  position: absolute;
-  top: 50%;
-  width: 50%;
-  height: 1px;
-  background: #fff;
-  content: '';
-}
-.notfound h1.head span:before {
-  left: -55%;
-}
-.notfound h1.head span:after {
-  right: -55%;
-}
-
-@media (max-width: 1024px) {
-  .notfound h1.head {
-    font-size: 200px;
-    letter-spacing: 25px;
-  }
-}
-
-@media (max-width: 768px) {
-  .notfound h1.head {
-    font-size: 150px;
-    letter-spacing: 25px;
-  }
-}
-
-@media (max-width: 640px) {
-  .notfound h1.head {
-    font-size: 150px;
-    letter-spacing: 0;
-  }
-}
-
-@media (max-width: 480px) {
-  .notfound .brand h3 {
-    font-size: 20px;
-  }
-  .notfound h1.head {
-    font-size: 130px;
-    letter-spacing: 0;
-  }
-  .notfound h1.head span:before,
-  .notfound h1.head span:after {
-    width: 40%;
-  }
-  .notfound h1.head span:before {
-    left: -45%;
-  }
-  .notfound h1.head span:after {
-    right: -45%;
-  }
-  .notfound p {
-    font-size: 18px;
-  }
-}
-
-@media (max-width: 320px) {
-  .notfound .brand h3 {
-    font-size: 16px;
-  }
-  .notfound h1.head {
-    font-size: 100px;
-    letter-spacing: 0;
-  }
-  .notfound h1.head span:before,
-  .notfound h1.head span:after {
-    width: 25%;
-  }
-  .notfound h1.head span:before {
-    left: -30%;
-  }
-  .notfound h1.head span:after {
-    right: -30%;
-  }
-}
diff --git a/src/screens/PageNotFound/PageNotFound.tsx b/src/screens/PageNotFound/PageNotFound.tsx
index 037aeecbab..e50ede56a2 100644
--- a/src/screens/PageNotFound/PageNotFound.tsx
+++ b/src/screens/PageNotFound/PageNotFound.tsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import useLocalStorage from 'utils/useLocalstorage';
 
-import styles from './PageNotFound.module.css';
+import styles from '../../style/app.module.css'
 import Logo from 'assets/images/talawa-logo-600x600.png';
 
 /**
@@ -28,7 +28,7 @@ const PageNotFound = (): JSX.Element => {
   const adminFor = getItem('AdminFor');
 
   return (
-    <section className={styles.notfound}>
+    <section className={styles.pageNotFound}>
       <div className="container text-center">
         <div className="brand">
           <img src={Logo} alt="Logo" className="img-fluid" />
diff --git a/src/style/app.module.css b/src/style/app.module.css
index 982cec9672..d21c2bb845 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -539,6 +539,116 @@ hr {
   color: var(--bs-primary) !important;
 }
 
+.pageNotFound {
+  position: relative;
+  bottom: 20px;
+}
+
+.pageNotFound h3 {
+  font-family: 'Roboto', sans-serif;
+  font-weight: normal;
+  letter-spacing: 1px;
+}
+
+.pageNotFound .brand span {
+  margin-top: 50px;
+  font-size: 40px;
+}
+.pageNotFound .brand h3 {
+  font-weight: 300;
+  margin: 10px 0 0 0;
+}
+.pageNotFound h1.head {
+  font-size: 250px;
+  font-weight: 900;
+  color: #31bb6b;
+  letter-spacing: 25px;
+  margin: 10px 0 0 0;
+}
+.pageNotFound h1.head span {
+  position: relative;
+  display: inline-block;
+}
+.pageNotFound h1.head span:before,
+.pageNotFound h1.head span:after {
+  position: absolute;
+  top: 50%;
+  width: 50%;
+  height: 1px;
+  background: #fff;
+  content: '';
+}
+.pageNotFound h1.head span:before {
+  left: -55%;
+}
+.pageNotFound h1.head span:after {
+  right: -55%;
+}
+
+@media (max-width: 1024px) {
+  .pageNotFound h1.head {
+    font-size: 200px;
+    letter-spacing: 25px;
+  }
+}
+
+@media (max-width: 768px) {
+  .pageNotFound h1.head {
+    font-size: 150px;
+    letter-spacing: 25px;
+  }
+}
+
+@media (max-width: 640px) {
+  .pageNotFound h1.head {
+    font-size: 150px;
+    letter-spacing: 0;
+  }
+}
+
+@media (max-width: 480px) {
+  .pageNotFound .brand h3 {
+    font-size: 20px;
+  }
+  .pageNotFound h1.head {
+    font-size: 130px;
+    letter-spacing: 0;
+  }
+  .pageNotFound h1.head span:before,
+  .pageNotFound h1.head span:after {
+    width: 40%;
+  }
+  .pageNotFound h1.head span:before {
+    left: -45%;
+  }
+  .pageNotFound h1.head span:after {
+    right: -45%;
+  }
+  .pageNotFound p {
+    font-size: 18px;
+  }
+}
+
+@media (max-width: 320px) {
+  .pageNotFound .brand h3 {
+    font-size: 16px;
+  }
+  .pageNotFound h1.head {
+    font-size: 100px;
+    letter-spacing: 0;
+  }
+  .pageNotFound h1.head span:before,
+  .pageNotFound h1.head span:after {
+    width: 25%;
+  }
+  .pageNotFound h1.head span:before {
+    left: -30%;
+  }
+  .pageNotFound h1.head span:after {
+    right: -30%;
+  }
+}
+
 @media (max-width: 520px) {
   .btnsContainer {
     margin-bottom: 0;