diff --git a/client/src/assets/images/Advice.jpg b/client/src/assets/images/Advice.jpg
deleted file mode 100644
index 8f3f00a7..00000000
Binary files a/client/src/assets/images/Advice.jpg and /dev/null differ
diff --git a/client/src/assets/images/family-photo-advice-page.jpg b/client/src/assets/images/family-photo-advice-page.jpg
new file mode 100644
index 00000000..600bbfea
Binary files /dev/null and b/client/src/assets/images/family-photo-advice-page.jpg differ
diff --git a/client/src/components/ScrollDown/ScrollDown.js b/client/src/components/ScrollDown/ScrollDown.js
index 35d6f8c2..1a835ea7 100644
--- a/client/src/components/ScrollDown/ScrollDown.js
+++ b/client/src/components/ScrollDown/ScrollDown.js
@@ -9,7 +9,7 @@ function ScrollDown() {
 	return (
 		<button
 			className="scrolldown-container"
-			onClick={() => scrollTo({ top: 1100, left: 0, behavior: "smooth" })}
+			onClick={() => scrollTo({ top: 780, left: 0, behavior: "smooth" })}
 		>
 			<span className="scrolldown-text">SCROLL DOWN</span>
 			<HiOutlineChevronDoubleDown className="scrolldown_icon" />
diff --git a/client/src/pages/Advice/Advice.css b/client/src/pages/Advice/Advice.css
index 2c7f65cf..90fdc40c 100644
--- a/client/src/pages/Advice/Advice.css
+++ b/client/src/pages/Advice/Advice.css
@@ -1,73 +1,67 @@
-.Advice-container {
+.advice-container {
 	display: flex;
-	height: 700px;
-	width: 1440;
+	height: fit-content;
+	width: 100%;
+	background-color: #fff8f3;
 }
-.Advice-img-container {
-	width: 490px;
-	height: 700px;
+.advice-container .img-container {
+	height: fit-content;
+	width: 40%;
 }
-.Advice-text-container {
-	height: 700px;
-	width: 950px;
+.advice-container .text-container {
+	height: fit-content;
+	width: 65%;
 }
 
-.Advice-header-text {
-	text-align: left;
-	font: normal normal normal 45px/64px Roboto Slab;
-	letter-spacing: 0.45px;
-	color: #0f2420;
-	opacity: 1;
-	margin: 50px;
-	width: 655px;
-	height: 59px;
-}
-
-.Advice-img-color {
-	height: 517px;
+.img-container .color {
+	height: 32.313rem;
 	background-color: #ffffff;
 	box-shadow: 5px 5px 6px #00000029;
-	width: 362px;
-	margin: 20px 15px auto 100px;
-}
-.Advice-img {
-	height: 456px;
-	width: 344px;
+	width: 22.625rem;
+	margin: 20px 15px auto 50px;
 }
-.Advice-main-img {
-	height: 456px;
-	width: 344px;
+
+.main-img img {
+	height: 28.5rem;
+	min-width: 21.5rem;
 	margin: 12px 0px 0px 8px;
 }
-
-.Advice-but {
+.text-container .header {
+	font-weight: 400;
+	font-size: 45px;
+	opacity: 1;
+	margin-top: 2rem;
+	margin-left: 4rem;
+	font-family: "RobotoSlab-Regular";
+}
+.advice-but {
 	display: flex;
 	justify-content: right;
-	margin: 50px 150px;
+	margin: 5.125rem 4.375rem;
 }
-.Advice_button {
-	width: 243px;
+.a-button {
+	width: 15.188rem;
 	background-color: var(--darkgreen-color);
 	border: none;
-	height: 70px;
+	height: 4.375rem;
 	color: var(--white-color);
 	font-size: 24px;
 	font-family: "Ambit SemiBold";
 }
 
-.Advice_button:hover {
+.a-button:hover {
 	background-color: var(--blue-color);
 	cursor: pointer;
 }
-.Advice_button_hover {
+.advice-but .button-hover {
 	background-color: var(--darkgreen-color);
-	width: 200px;
-	height: 40px;
+	width: 12.5rem;
+	height: 2.5rem;
 	border: none;
 	font-size: 18px;
 	font-family: "Ambit SemiBold";
 	color: var(--white-color);
-	margin-right: -100px;
+	margin-right: 100px;
 	margin-top: 80px;
 	position: absolute;
 }
diff --git a/client/src/pages/Advice/Advice.js b/client/src/pages/Advice/Advice.js
index a69f8168..b4472e73 100644
--- a/client/src/pages/Advice/Advice.js
+++ b/client/src/pages/Advice/Advice.js
@@ -1,27 +1,24 @@
 import React, { useState } from "react";
 import "./Advice.css";
-import AdviceImg from "~/assets/images/Advice.jpg";
+import AdviceImg from "~/assets/images/family-photo-advice-page.jpg";
 import AdviceCard from "./AdviceCard";
-
 function Advice() {
 	const [buttonShow, setButtonShow] = useState(false);
 	return (
-		<div className="Advice-container">
-			<div className="Advice-img-container">
-				<div className="Advice-img-color">
-					<div className="Advice-img">
-						<img className="Advice-main-img" src={AdviceImg} alt="Adive" />
+		<div className="advice-container">
+			<div className="img-container">
+				<div className="color">
+					<div className="main-img">
+						<img src={AdviceImg} alt="Adive" />
 					</div>
 				</div>
 			</div>
-			<div className="Advice-text-container">
-				<div className="Advice-header-text">
-					<p className="Advice-p">Ready to get your FREE guide?</p>
-				</div>
-				<AdviceCard />
-				<div className="Advice-but">
+			<div className="text-container">
+					<p className="header">Ready to get your FREE guide?</p>
+						<AdviceCard />
+				<div className="advice-but">
 					<button
-						className="Advice_button"
+						className="a-button"
 						onMouseEnter={() => setButtonShow(true)}
 						onMouseLeave={() => setButtonShow(false)}
 					>
@@ -29,7 +26,7 @@ function Advice() {
 					</button>
 					<br />
 					{buttonShow && (
-						<button className="Advice_button_hover">Download My Guide</button>
+						<button className="button-hover">Download My Guide</button>
 					)}
 				</div>
 			</div>
diff --git a/client/src/pages/Advice/AdviceCard.css b/client/src/pages/Advice/AdviceCard.css
deleted file mode 100644
index ab2a1889..00000000
--- a/client/src/pages/Advice/AdviceCard.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.Advice-card-container {
-	display: grid;
-	width: 640px;
-	grid-template-columns: auto auto auto;
-	column-gap: 10px;
-	padding: 7px;
-	margin: -20px 80px 0px 40px;
-}
-.Advice-Vlue-Title {
-	color: black;
-}
-
-.Advice-value-content {
-	margin-top: 20px;
-	width: 160px;
-	font-family: Ambit Light;
-	text-align: left;
-	font: normal normal 300 20px/25px Ambit;
-	letter-spacing: 0.2px;
-	color: #000000;
-	opacity: 1;
-}
-.Advice-card-index {
-	width: 200px;
-	height: auto;
-	padding: auto;
-}
diff --git a/client/src/pages/Advice/AdviceCard.js b/client/src/pages/Advice/AdviceCard.js
index 22fceaf8..d8b35a6c 100644
--- a/client/src/pages/Advice/AdviceCard.js
+++ b/client/src/pages/Advice/AdviceCard.js
@@ -1,15 +1,15 @@
 import React from "react";
 import "./AdviceCardContent";
-import "./AdviceCard.css";
+import "./Card-ad.css";
 import AdviceCardContent from "./AdviceCardContent";
 
 function AdviceCard() {
 	return (
 		<div className="Advice-card-container">
 			{AdviceCardContent.map((value, index) => (
-				<div className="Advice-card-index" key={index}>
-					<h3 className="Advice-Vlue-Title">{value.Advicetitle}</h3>
-					<p className="Advice-value-content">{value.AdviceContent}</p>
+				<div key={index}>
+					<p className="title">{value.Advicetitle}</p>
+					<p className="content">{value.AdviceContent}</p>
 				</div>
 			))}
 		</div>
diff --git a/client/src/pages/Advice/Card-ad.css b/client/src/pages/Advice/Card-ad.css
new file mode 100644
index 00000000..5cd696f9
--- /dev/null
+++ b/client/src/pages/Advice/Card-ad.css
@@ -0,0 +1,24 @@
+.Advice-card-container {
+	display: flex;
+	width: 100%;
+	height: fit-content;
+}
+
+.Advice-card-container div {
+	width: 30%;
+	margin: 1rem 2rem 0rem 2rem;
+}
+
+div .title {
+	margin-top: 1.5rem;
+	color: black;
+	font-size: 24px;
+	font-family: "Ambit SemiBold";
+}
+div .content {
+	margin-top: 2.5rem;
+	font-size: 20px;
+	font-family: "Ambit Light";
+	color: #000000;
+	opacity: 1;
+}
diff --git a/package-lock.json b/package-lock.json
index 7c120815..66509d65 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11834,6 +11834,14 @@
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/@react-icons/all-files/-/all-files-4.1.0.tgz",
 			"integrity": "sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ==",
+
+			"requires": {}
+		},
+		"@react-pdf-viewer/core": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/@react-pdf-viewer/core/-/core-3.1.0.tgz",
+			"integrity": "sha512-SyS8uTSYmfy6gDVwCHYycRCpdmALvMY96Hsbvzj+5IS0oWP2P1ImQBPzsONobDjrJVyROYv/+3LPAcYdjhneig==",
+
 			"requires": {}
 		},
 		"@sideway/address": {