diff --git a/Maquetado/images/logo-wolox.png b/Maquetado/images/logo-wolox.png
new file mode 100644
index 0000000..f4ae649
Binary files /dev/null and b/Maquetado/images/logo-wolox.png differ
diff --git a/Maquetado/scss/book-details.scss b/Maquetado/scss/book-details.scss
index 54ce1f2..7265cc6 100644
--- a/Maquetado/scss/book-details.scss
+++ b/Maquetado/scss/book-details.scss
@@ -2,6 +2,7 @@
@import 'mixins';
.front-page {
+ background-color: $white;
box-shadow: 3px 3px 7px $gray;
display: flex;
gap: 25px;
diff --git a/Maquetado/scss/book-list.scss b/Maquetado/scss/book-list.scss
index 787160a..40244d9 100644
--- a/Maquetado/scss/book-list.scss
+++ b/Maquetado/scss/book-list.scss
@@ -1,12 +1,39 @@
@import 'colors';
@import 'mixins';
+body {
+ background-color: $wild-sand;
+}
+
+.nav-bar {
+ background-color: $white;
+ border-top: 5px solid $cerulean;
+ box-shadow: 0 3px 7px $gray;
+ position: fixed;
+ top: 0;
+ width: 100%;
+
+ ul {
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+ margin: 0 10%;
+ }
+
+ .logo-image {
+ height: 50px;
+ width: 160px;
+ }
+}
+
.book-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
+ margin-top: 60px;
.item {
+ background-color: $white;
box-shadow: 3px 3px 7px $gray;
margin: 20px;
padding: 25px;
diff --git a/Maquetado/scss/colors.scss b/Maquetado/scss/colors.scss
index 1bf1213..9b20e9b 100644
--- a/Maquetado/scss/colors.scss
+++ b/Maquetado/scss/colors.scss
@@ -1,3 +1,6 @@
-$gray: #808080;
$black: #000000;
+$cerulean: #00adee;
$earls-green: #bed23c;
+$gray: #808080;
+$white: #ffffff;
+$wild-sand: #f4f4f4;
diff --git a/Maquetado/views/book-list.html b/Maquetado/views/book-list.html
index 43afc95..e806c9c 100644
--- a/Maquetado/views/book-list.html
+++ b/Maquetado/views/book-list.html
@@ -9,6 +9,20 @@
+