diff --git a/src/App.js b/src/App.js
index 04f57e5..f85c3b5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -35,7 +35,7 @@ class App {
   render() {
     return (
       `
-      <div className="App">
+      <div class="App">
         ${
           Header()
         }
diff --git a/src/components/Categories/categories.js b/src/components/Categories/categories.js
index a2e30ef..948050b 100644
--- a/src/components/Categories/categories.js
+++ b/src/components/Categories/categories.js
@@ -5,8 +5,8 @@ import './categories.css';
 function Categories(props) {
     return (
         `
-        <div className="categories-wrapper">
-            <div className="categories-inner">
+        <div class="categories-wrapper">
+            <div class="categories-inner">
             ${
                 props.categories.map((category) => (
                     CategoryCard({
diff --git a/src/components/CategoryCard/categorycard.js b/src/components/CategoryCard/categorycard.js
index afd95bd..bea277a 100644
--- a/src/components/CategoryCard/categorycard.js
+++ b/src/components/CategoryCard/categorycard.js
@@ -11,17 +11,17 @@ function toTitleCase(str) {
 export default function CategoryCard(props) {
     return (
         `
-        <div className="category-card" >
-            <div className="category-card-left">
-                <img className="category-card-image" src=${props.category.image} alt=${props.category.name} />
+        <div class="category-card" >
+            <div class="category-card-left">
+                <img class="category-card-image" src=${props.category.image} alt=${props.category.name} />
             </div>
-            <div className="category-card-right">
-                <div className="category-card-title">
+            <div class="category-card-right">
+                <div class="category-card-title">
                     ${
                         toTitleCase(props.category.name)
                     }
                 </div>
-                <div className="category-card-subtitle">
+                <div class="category-card-subtitle">
                     ${
                         `${props.category.restaurants} Resturants`
                     }
diff --git a/src/components/Header/header.js b/src/components/Header/header.js
index 165a71e..350af5d 100644
--- a/src/components/Header/header.js
+++ b/src/components/Header/header.js
@@ -10,11 +10,11 @@ export default function Header() {
                 headerCSS
             }
         </style>
-        <div className="header-row">
-            <div className="header-text">
+        <div class="header-row">
+            <div class="header-text">
                 What would you like to eat?
             </div>
-            <span className="header-icon-notification mdi mdi-bell-outline">
+            <span class="header-icon-notification mdi mdi-bell-outline">
             </span>
         </div>
         `
diff --git a/src/components/RecipeCard/recipecard.js b/src/components/RecipeCard/recipecard.js
index 45d5742..2d2a6e1 100644
--- a/src/components/RecipeCard/recipecard.js
+++ b/src/components/RecipeCard/recipecard.js
@@ -11,48 +11,48 @@ function toTitleCase(str) {
 export default function RecipeCard(props) {
     return (
         `
-        <div className="recipe-card" >
-            <div className="recipe-card-top">
-                <img className="recipe-card-image" src=${props.recipe.image} alt=${props.recipe.name} />
+        <div class="recipe-card" >
+            <div class="recipe-card-top">
+                <img class="recipe-card-image" src=${props.recipe.image} alt=${props.recipe.name} />
             </div>
-            <div className="recipe-card-bottom">
-                <div className="recipe-card-desc">
-                    <div className="recipe-card-logo-wrapper">
-                        <img className="recipe-card-logo" src=${props.recipe.icon} alt=${props.recipe.name} />
+            <div class="recipe-card-bottom">
+                <div class="recipe-card-desc">
+                    <div class="recipe-card-logo-wrapper">
+                        <img class="recipe-card-logo" src=${props.recipe.icon} alt=${props.recipe.name} />
                     </div>
-                    <div className="recipe-card-title-container">
-                        <div className="recipe-card-title">
+                    <div class="recipe-card-title-container">
+                        <div class="recipe-card-title">
                             ${
                                 toTitleCase(props.recipe.name)
                             }
                         </div>
-                        <div className="recipe-card-rating">
+                        <div class="recipe-card-rating">
                             ${
                                 new Array(props.recipe.rating).map(_useless => (
                                     `
-                                    <div className="recipe-card-star">
+                                    <div class="recipe-card-star">
                                     </div>
                                     `
                                 ))
                             }
                         </div>
                     </div>
-                    <div className="recipe-card-price">
-                        <div className="recipe-card-price-number">
+                    <div class="recipe-card-price">
+                        <div class="recipe-card-price-number">
                             ${
                                 `$${props.recipe.price}`
                             }
                         </div>
-                        <div className="recipe-card-price-suffix">
+                        <div class="recipe-card-price-suffix">
                             Min Order
                         </div>
                     </div>
                 </div>
-                <div className="recipe-card-tags">
+                <div class="recipe-card-tags">
                     ${
                         props.recipe.tags.map(tag => (
                             `
-                            <div className="recipe-card-tag">
+                            <div class="recipe-card-tag">
                                 ${
                                     toTitleCase(tag)
                                 }
diff --git a/src/components/Recipes/recipes.js b/src/components/Recipes/recipes.js
index a8c210c..8ac5ba7 100644
--- a/src/components/Recipes/recipes.js
+++ b/src/components/Recipes/recipes.js
@@ -5,7 +5,7 @@ import './recipes.css';
 function Recipes(props) {
     return (
         `
-        <div className="recipes-wrapper">
+        <div class="recipes-wrapper">
             ${
                 props.recipes.map((recipe) => (
                     RecipeCard({