diff --git a/src/components/shared/recipes/components/header/header.styles.jsx b/src/components/shared/recipes/components/header/header.styles.jsx
index a72b4dc..b2c7c16 100644
--- a/src/components/shared/recipes/components/header/header.styles.jsx
+++ b/src/components/shared/recipes/components/header/header.styles.jsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
 
 export const HeaderContainer = styled.div`
-  margin: 2% 2% 2% 0%;
+  /* margin: 2%; */
 `
\ No newline at end of file
diff --git a/src/components/shared/recipes/components/pagination/pagination.component.jsx b/src/components/shared/recipes/components/pagination/pagination.component.jsx
index b73a6b9..a4aa9bc 100644
--- a/src/components/shared/recipes/components/pagination/pagination.component.jsx
+++ b/src/components/shared/recipes/components/pagination/pagination.component.jsx
@@ -1,5 +1,5 @@
 import "./pagination.styles.jsx";
-import { PaginationContainer, PaginationButtonsContainer } from "./pagination.styles.jsx";
+import { PaginationButtonsContainer, PaginationContainer } from "./pagination.styles.jsx";
 
 import React, { Component, useContext } from "react";
 import { RecipesContext } from "../../../../../contexts/shared/recipes/recipes.context";
@@ -24,19 +24,27 @@ const Pagination = () => {
   };
     
   return (
-    <PaginationContainer>
-      <PaginationButtonsContainer>
-        <Button type="button" onClick={ handlePreviousPage }
-          style={{ visibility: `${displayPreviousPage === false ? "hidden" : ""}` }}>
-          {`< Page ${previousPageNumber}`}
-        </Button>
-        
-        <Button type="button" onClick={ handleNextPage }
-          style={{ visibility: `${displayNextPage === false ? "hidden" : ""}` }}>
-          {`Page ${nextPageNumber} >`}
-        </Button>
-      </PaginationButtonsContainer>
-    </PaginationContainer>
+    <div className="container">
+      <PaginationContainer>
+        <div className="row justify-content-center">
+          <PaginationButtonsContainer>
+            <div className="col-sm-12 col-md-6 col-lg-6">
+              <Button type="button" onClick={ handlePreviousPage }
+                style={{ visibility: `${displayPreviousPage === false ? "hidden" : ""}` }}>
+                {`< Page ${previousPageNumber}`}
+              </Button>
+            </div>
+
+            <div className="col-sm-12 col-md-6 col-lg-6">
+              <Button type="button" onClick={ handleNextPage }
+                style={{ visibility: `${displayNextPage === false ? "hidden" : ""}` }}>
+                {`Page ${nextPageNumber} >`}
+              </Button>
+            </div>
+          </PaginationButtonsContainer>
+        </div>
+      </PaginationContainer>
+    </div>
   );
 
 };
diff --git a/src/components/shared/recipes/components/pagination/pagination.styles.jsx b/src/components/shared/recipes/components/pagination/pagination.styles.jsx
index 8fb71cc..896b5a8 100644
--- a/src/components/shared/recipes/components/pagination/pagination.styles.jsx
+++ b/src/components/shared/recipes/components/pagination/pagination.styles.jsx
@@ -1,6 +1,9 @@
 import styled from "styled-components";
 
 export const PaginationContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
   margin: 2% 0% 2% 0%;
   padding: 2%;
 `
diff --git a/src/components/shared/recipes/components/recipe/ingredients/ingredients.styles.jsx b/src/components/shared/recipes/components/recipe/ingredients/ingredients.styles.jsx
index 7eb98b6..cf968d8 100644
--- a/src/components/shared/recipes/components/recipe/ingredients/ingredients.styles.jsx
+++ b/src/components/shared/recipes/components/recipe/ingredients/ingredients.styles.jsx
@@ -10,5 +10,5 @@ export const IngredientQuantitiesContainer = styled.div`
   display: block;
   align-items: center;
   justify-content: center;
-  padding: 2% 0% 2% 0%;
+  padding: 2%;
 `
\ No newline at end of file
diff --git a/src/components/shared/recipes/components/recipe/nutrient-prediction/nutrient-prediction.component.jsx b/src/components/shared/recipes/components/recipe/nutrient-prediction/nutrient-prediction.component.jsx
index 085146e..4614a3a 100644
--- a/src/components/shared/recipes/components/recipe/nutrient-prediction/nutrient-prediction.component.jsx
+++ b/src/components/shared/recipes/components/recipe/nutrient-prediction/nutrient-prediction.component.jsx
@@ -17,7 +17,7 @@ import { selectNutritionTrackedDays } from "../../../../../../store/signed-out/n
 import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants"
 
 const outlinedCardStyles = {
-  backgroundColor: COLOR_CODES.general["5"]
+  backgroundColor: COLOR_CODES.general["0"]
 }
 
 const NutrientPrediction = () => {
diff --git a/src/components/shared/recipes/components/recipe/recipe.component.jsx b/src/components/shared/recipes/components/recipe/recipe.component.jsx
index 673dc97..b3c02b0 100644
--- a/src/components/shared/recipes/components/recipe/recipe.component.jsx
+++ b/src/components/shared/recipes/components/recipe/recipe.component.jsx
@@ -21,6 +21,15 @@ const cardStyles = {
   margin: "1% 0% 1% 0%"
 }
 
+const nutrientPredictionCardStyles = {
+  backgroundColor: COLOR_CODES.general["6"],
+  margin: "1% 0% 1% 0%",
+  overflow: "scroll",
+  height: "70rem",
+  scrollbarColor: `${COLOR_CODES.scrollbar.scroll} ${COLOR_CODES.scrollbar.background}`,
+  scrollbarWidth: "thin"
+}
+
 const Recipe = () => {
   const { displayedRecipe } = useContext(RecipesContext)
 
@@ -36,7 +45,7 @@ const Recipe = () => {
 
       {
         displayedRecipe.nutrientPredictions !== undefined && displayedRecipe.nutrientPredictions.length !== 0 ? (
-        <OutlinedCard styles={ cardStyles }>
+        <OutlinedCard styles={ nutrientPredictionCardStyles }>
           <NutrientPrediction></NutrientPrediction>
         </OutlinedCard>) : null
       }
diff --git a/src/components/shared/recipes/components/recipe/recipe.styles.jsx b/src/components/shared/recipes/components/recipe/recipe.styles.jsx
index f5bb257..4a5b155 100644
--- a/src/components/shared/recipes/components/recipe/recipe.styles.jsx
+++ b/src/components/shared/recipes/components/recipe/recipe.styles.jsx
@@ -4,6 +4,5 @@ export const RecipeContainer = styled.div`
   display: block;
   justify-content: center;
   align-items: center;
-  margin: 0% 2% 2% 2%;
-  width: 45%;
+  padding: 1% 0% 1% 1%;
 `
\ No newline at end of file
diff --git a/src/components/shared/recipes/components/recipe/servings/servings.styles.jsx b/src/components/shared/recipes/components/recipe/servings/servings.styles.jsx
index 3e87786..d20d675 100644
--- a/src/components/shared/recipes/components/recipe/servings/servings.styles.jsx
+++ b/src/components/shared/recipes/components/recipe/servings/servings.styles.jsx
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 
 export const ServingsContainer = styled.div`
+  display: block;
   justify-content: space-between;
   align-items: center;
   padding: 2%;
diff --git a/src/components/shared/recipes/components/search-result/search-result.component.jsx b/src/components/shared/recipes/components/search-result/search-result.component.jsx
index 0cab198..c166520 100644
--- a/src/components/shared/recipes/components/search-result/search-result.component.jsx
+++ b/src/components/shared/recipes/components/search-result/search-result.component.jsx
@@ -1,5 +1,5 @@
 import "./search-result.styles.jsx";
-import { SearchResultContainer } from "./search-result.styles.jsx";
+import { RecipeResult } from "./search-result.styles.jsx";
 
 import { useContext } from "react";
 import { RecipesContext } from "../../../../../contexts/shared/recipes/recipes.context";
@@ -20,10 +20,10 @@ const SearchResult = ({ recipe }) => {
   }
 
   return (
-    <SearchResultContainer onClick={ handleClick }>
+    <RecipeResult onClick={ handleClick }>
       <Typography variant="subtitle1">{`${recipe.title}`}</Typography>
       <Typography variant="body2">{`${recipe.publisher}`}</Typography>
-    </SearchResultContainer>
+    </RecipeResult>
   )
 };
 
diff --git a/src/components/shared/recipes/components/search-result/search-result.styles.jsx b/src/components/shared/recipes/components/search-result/search-result.styles.jsx
index daff286..54d816a 100644
--- a/src/components/shared/recipes/components/search-result/search-result.styles.jsx
+++ b/src/components/shared/recipes/components/search-result/search-result.styles.jsx
@@ -1,15 +1,16 @@
 import styled from "styled-components";
 import { COLOR_CODES } from "../../../../../utils/constants/shared.constants";
 
-export const SearchResultContainer = styled.div`
+export const RecipeResult = styled.div`
+  display: block;
   justify-content: space-between;
   align-items: center;
   padding: 1%;
   margin: 0.5%;
-  background-color: ${COLOR_CODES.general["5"]};
+  /* background-color: ${COLOR_CODES.general["5"]}; */
 
-  &:hover {
+  /* &:hover {
     background-color: ${COLOR_CODES.general["1"]};
     border: none;
-  }
+  } */
 `
\ No newline at end of file
diff --git a/src/components/shared/recipes/components/search-results/search-results.component.jsx b/src/components/shared/recipes/components/search-results/search-results.component.jsx
index 934fef2..1c6fc80 100644
--- a/src/components/shared/recipes/components/search-results/search-results.component.jsx
+++ b/src/components/shared/recipes/components/search-results/search-results.component.jsx
@@ -1,5 +1,7 @@
 import "./search-results.styles"
-import { SearchResultsContainer, PaginationContainer } from "./search-results.styles";
+import { SearchResultsContainer, SearchResultContainer,
+  PaginationContainer 
+} from "./search-results.styles";
 
 import React, { Component, useState, useContext, Fragment } from "react";
 import Pagination from "../pagination/pagination.component";
@@ -14,7 +16,7 @@ import { Paper } from "@mui/material";
 
 const paperStyles = {
   searchResults: {
-    backgroundColor: COLOR_CODES.general["0"]
+    backgroundColor: COLOR_CODES.general["2"]
   },
   searchResult: {
     backgroundColor: COLOR_CODES.general["0"]
@@ -31,7 +33,9 @@ const SearchResults = () => {
           displayedRecipesOnPage.map((recipe, index) => {
             return (
               <Paper styles={ paperStyles.searchResult }>
-                <SearchResult key={ recipe.id } recipe={ recipe }></SearchResult>
+                <SearchResultContainer>
+                    <SearchResult key={ recipe.id } recipe={ recipe }></SearchResult>
+                </SearchResultContainer>
               </Paper>
             )
           })
diff --git a/src/components/shared/recipes/components/search-results/search-results.styles.jsx b/src/components/shared/recipes/components/search-results/search-results.styles.jsx
index c28968f..91e9f20 100644
--- a/src/components/shared/recipes/components/search-results/search-results.styles.jsx
+++ b/src/components/shared/recipes/components/search-results/search-results.styles.jsx
@@ -1,10 +1,20 @@
 import styled from "styled-components";
+import { COLOR_CODES } from "../../../../../utils/constants/shared.constants";
 
 export const SearchResultsContainer = styled.div`
   display: block;
   justify-content: center;
   align-items: center;
-  width: 50%;
+  padding: 1% 1% 1% 0%;
+`
+
+export const SearchResultContainer = styled.div`
+  background-color: ${COLOR_CODES.general["0"]};
+
+  &:hover {
+    background-color: ${COLOR_CODES.general["1"]};
+    border: none;
+  }
 `
 
 export const PaginationContainer = styled.div`
diff --git a/src/pages/shared/recipes/recipes.component.jsx b/src/pages/shared/recipes/recipes.component.jsx
index f8903e7..7e98ac3 100644
--- a/src/pages/shared/recipes/recipes.component.jsx
+++ b/src/pages/shared/recipes/recipes.component.jsx
@@ -10,6 +10,7 @@ import RecipesView from "../../../components/shared/recipes/components/recipes-v
 
 import { RecipesContext } from "../../../contexts/shared/recipes/recipes.context.js";
 import { Divider, Typography } from "@mui/material";
+import { COLOR_CODES } from "../../../utils/constants/shared.constants.js";
 
 const Recipes = () => {
   const { displayedRecipe, displayedRecipesOnPage } = useContext(RecipesContext);
@@ -17,20 +18,30 @@ const Recipes = () => {
   return (
     <Fragment>
       <SearchResultsRecipeContainer>
-      <Typography sx={{ display: "flex", justifyContent: "center" }} variant="h6">Search some recipes</Typography>
+      <Typography sx={{ display: "flex", justifyContent: "center", color: COLOR_CODES.general["6"] }} 
+        variant="h6">Search some recipes</Typography>
       <Header></Header>
 
-      <Divider sx={{ marginRight: "2%" }}/>
+      <br></br>
 
         { 
           displayedRecipesOnPage.length !== 0 &&
-          <SearchResultsMainContainer>
-              <SearchResults></SearchResults>
-              {
-                displayedRecipe !== undefined && displayedRecipe !== null &&
-                <RecipesView ></RecipesView>
-              }
-          </SearchResultsMainContainer>
+          <div className="container">
+            <SearchResultsMainContainer>
+              <div className="row">
+                <div className="col-sm-12 col-md-6 col-lg-6">
+                  <SearchResults></SearchResults>
+                </div>
+
+                <div className="col-sm-12 col-md-6 col-lg-6">
+                  {
+                    displayedRecipe !== undefined && displayedRecipe !== null &&
+                    <RecipesView ></RecipesView>
+                  }
+                </div>
+              </div>
+            </SearchResultsMainContainer>
+          </div>
         }
       </SearchResultsRecipeContainer>
     </Fragment>
diff --git a/src/pages/shared/recipes/recipes.styles.jsx b/src/pages/shared/recipes/recipes.styles.jsx
index ac1a01b..f4f73be 100644
--- a/src/pages/shared/recipes/recipes.styles.jsx
+++ b/src/pages/shared/recipes/recipes.styles.jsx
@@ -3,13 +3,9 @@ import styled from "styled-components";
 export const SearchResultsRecipeContainer = styled.div`
   justify-content: center;
   align-items: center;
-  margin: 2% 20% 2% 18%;
-  width: 75%;
+  margin: 2% 10% 2% 10%;
 `
 export const SearchResultsMainContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: normal;
-  margin: 2% 0% 2% 0%;
-  width: 100%;
+  justify-content: top;
+  align-items: top;
 `
\ No newline at end of file