diff --git a/pages/categories/[category].tsx b/pages/categories/[category].tsx
index ed245f6e..35251ae0 100644
--- a/pages/categories/[category].tsx
+++ b/pages/categories/[category].tsx
@@ -6,6 +6,7 @@ import styles from "../../styles/category.module.css";
 import homeStyles from "../../styles/Home.module.css";
 import Quest from "../../components/quests/quest";
 import BackButton from "../../components/UI/backButton";
+import Blur from "../../components/shapes/blur";
 
 const CategoriesPage: NextPage = () => {
   const router = useRouter();
@@ -20,8 +21,11 @@ const CategoriesPage: NextPage = () => {
   }, [categories, categoryName]);
 
   return (
-    <div className={homeStyles.screen}>
-      <div className={homeStyles.backButton}>
+    <div className={styles.screen}>
+      <div className={homeStyles.blur1}>
+        <Blur />
+      </div>
+      <div className={styles.backButton}>
         <BackButton onClick={() => router.back()} />
       </div>
       <h1 className={homeStyles.title}>Onboarding quests</h1>
diff --git a/styles/Home.module.css b/styles/Home.module.css
index 4a97e990..057f9597 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -103,6 +103,7 @@
   position: absolute;
   left: 0;
   top: 0;
+  z-index: -1;
 }
 
 .blur2 {
@@ -113,6 +114,7 @@
 
 .backButton {
   margin-left: 63px;
+  z-index: 10;
 }
 
 .controls {
diff --git a/styles/category.module.css b/styles/category.module.css
index 4e4ff350..cad8ab82 100644
--- a/styles/category.module.css
+++ b/styles/category.module.css
@@ -1,3 +1,23 @@
+.screen {
+  z-index: 0;
+  position: relative;
+  padding-top: 12vh;
+  background-color: var(--background);
+  width: 100%;
+  min-height: calc(100vh - 117px - 112px + 2em);
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  margin-bottom: calc(112px - 2em);
+}
+
+.backButton {
+  position: absolute;
+  margin-left: 63px;
+  z-index: 10;
+  top: 12vh;
+}
+
 .questList {
   display: flex;
   gap: 1rem;