diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 8530fc0..7942a4f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -3521,6 +3521,8 @@
     },
     "@testing-library/jest-dom": {
       "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-4.2.4.tgz",
+      "integrity": "sha512-j31Bn0rQo12fhCWOUWy9fl7wtqkp7In/YP2p5ZFyRuiiB9Qs3g+hS4gAmDWONbAHcRmVooNJ5eOHQDCOmUFXHg==",
       "requires": {
         "@babel/runtime": "^7.5.1",
         "chalk": "^2.4.1",
@@ -3545,6 +3547,8 @@
     },
     "@testing-library/react": {
       "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-9.5.0.tgz",
+      "integrity": "sha512-di1b+D0p+rfeboHO5W7gTVeZDIK5+maEgstrZbWZSSvxDyfDRkkyBE1AJR5Psd6doNldluXlCWqXriUfqu/9Qg==",
       "requires": {
         "@babel/runtime": "^7.8.4",
         "@testing-library/dom": "^6.15.0",
@@ -3552,7 +3556,9 @@
       }
     },
     "@testing-library/user-event": {
-      "version": "7.2.1"
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz",
+      "integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA=="
     },
     "@types/babel__core": {
       "version": "7.1.10",
@@ -10431,6 +10437,8 @@
     },
     "node-sass": {
       "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz",
+      "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==",
       "requires": {
         "async-foreach": "^0.1.3",
         "chalk": "^1.1.1",
@@ -10564,7 +10572,9 @@
       }
     },
     "normalize.css": {
-      "version": "8.0.1"
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
     },
     "npm-run-path": {
       "version": "2.0.2",
@@ -12428,6 +12438,8 @@
     },
     "react": {
       "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -12647,6 +12659,8 @@
     },
     "react-dom": {
       "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
+      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -12712,6 +12726,8 @@
     },
     "react-scripts": {
       "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.3.tgz",
+      "integrity": "sha512-oSnoWmii/iKdeQiwaO6map1lUaZLmG0xIUyb/HwCVFLT7gNbj8JZ9RmpvMCZ4fB98ZUMRfNmp/ft8uy/xD1RLA==",
       "requires": {
         "@babel/core": "7.9.0",
         "@svgr/webpack": "4.3.3",
diff --git a/frontend/src/pages/Book.jsx b/frontend/src/pages/Book.jsx
index 23f568f..26ee957 100644
--- a/frontend/src/pages/Book.jsx
+++ b/frontend/src/pages/Book.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
+import './book.scss';
 import { useParams } from 'react-router-dom';
-
 import { bookURL } from '../SERVER';
 
 export default function Book() {
@@ -21,17 +21,27 @@ export default function Book() {
 	}, []);
 
 	return (
-		<>
-			<h2 className="PageTitle">{book.title}</h2>
-			<dl>
-				<dt>author</dt>
-				<dd>{book.author}</dd>
-				<dt>genre</dt>
-				<dd>{book.genre}</dd>
-				<dt>year</dt>
-				<dd>{book.yearPublished}</dd>
-			</dl>
-			<img src={`https://picsum.photos/200/300`} alt="book cover" width={200} height={300} />
-		</>
+			<section className="Section">
+				<div className="Section__row">
+					<h2 className="PageTitle">{book.title}</h2>	
+					<div className="BookDetails">
+					<img src={`https://picsum.photos/500/500`} alt="book cover" width={500} height={500} />
+					</div>
+					<div className="BookDetails"> 
+						<dl>
+							<dt>title</dt>
+							<dd>{book.title}</dd>
+							<dt>author</dt>
+							<dd>{book.author}</dd>
+							<dt>genre</dt>
+							<dd>{book.genre}</dd>
+							<dt>year</dt>
+							<dd>{book.yearPublished}</dd>
+						</dl> 	
+					</div>
+					<button className="Button Button__back">go back</button>
+					<button className="Button Button__add">add to list</button>
+				</div>	
+			</section>
 	);
 }
diff --git a/frontend/src/pages/book.scss b/frontend/src/pages/book.scss
new file mode 100644
index 0000000..cd21d8f
--- /dev/null
+++ b/frontend/src/pages/book.scss
@@ -0,0 +1,65 @@
+@import '../fonts/fontWeight.scss';
+
+.PageTitle {
+    margin: 0 0 1.25em ;
+    font: $regular 2.25em/1.5 'Quicksand', sans-serif;
+    text-transform: uppercase;
+}
+
+.Section {
+    padding: 2em;
+
+    &__row::after {
+        content: "";
+        clear: both;
+        display: table;
+    }
+}
+
+.BookDetails {
+    float: left;
+    text-align: center;
+    width: 40em;
+
+    dt {
+      float: left;
+      clear: left;
+      width: 5em;
+      text-align: right;
+      text-transform: uppercase;
+      font: $regular 1.5em/1.5 'Quicksand', sans-serif;
+    }
+
+    dt::after {
+      content: ":";
+    }
+
+    dd {
+      margin: 0.5em;
+      //padding-left: 0.5em;
+      padding: 0 0 3.5em 0;
+      font-style: 'Quicksand', sans-serif;
+      font-size: larger;
+    }
+}
+
+.Button {
+    border: none;
+    color: white;
+    padding: 0.5em ;
+    text-align: center;
+    font-size: 1.5em;
+    margin: 0 2em;
+    display: inline-block;
+    text-transform: uppercase;
+    cursor: pointer;
+    border-radius: 0.5em;
+
+    &__back {
+        background-color: #db5127;
+    }
+
+    &__add {
+        background-color: #3e8e41;
+    }   
+}