diff --git a/src/components/Bubble/Bubble.css b/src/components/Bubble/Bubble.css
deleted file mode 100644
index a578841..0000000
--- a/src/components/Bubble/Bubble.css
+++ /dev/null
@@ -1,92 +0,0 @@
-/*********** INFO BUBBLE ***********/
-
-.bubble {
-  position: relative;
-
-  display: grid;
-  grid-template-columns: 150px 1fr;
-  grid-gap: 12px;
-  align-items: center;
-
-  padding: 20px;
-  margin-bottom: 30px;
-  min-height: 200px;
-
-  background: var(--bubble-color);
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-  border-radius: 8px;
-  color: white;
-  font-weight: 100;
-}
-
-@media (max-width: 640px) {
-  .bubble {
-    grid-template-columns: 1fr;
-  }
-}
-
-.bubble.no-image {
-  grid-template-columns: 1fr;
-}
-
-.bubble.no-image h2 {
-  font-size: 1.3em;
-}
-
-.bubble .bubble-img img {
-  border-radius: 8px;
-}
-
-.bubble.invisible,
-.bubble.invisible {
-  opacity: 0;
-}
-
-.bubble.fade-in,
-.bubble.fade-in {
-  opacity: 1;
-  transition: opacity 0.12s;
-  transition-timing-function: ease-in;
-}
-
-.bubble a {
-  color: white;
-}
-
-.bubble:after {
-  content: '';
-  position: absolute;
-  width: 0;
-  height: 0;
-  top: 55%;
-  left: 100%;
-  border-top: 20px solid transparent;
-  border-bottom: 20px solid transparent;
-  border-right: 20px solid transparent;
-  border-left: 30px solid var(--bubble-color);
-}
-
-.bubble.lower:after {
-  top: 20%;
-}
-
-@media (max-width: 960px) {
-  .bubble:after {
-    top: 100%;
-    left: 20%;
-    border-bottom: 20px solid transparent;
-    border-top: 30px solid var(--bubble-color);
-    border-right: 20px solid transparent;
-    border-left: 20px solid transparent;
-  }
-
-  .bubble.lower:after {
-    top: 100%;
-    left: 40%;
-  }
-}
-
-.bubble img {
-  width: 100%;
-  box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
-}
diff --git a/src/components/Bubble/Bubble.js b/src/components/Bubble/Bubble.js
index c605da3..c8f8412 100644
--- a/src/components/Bubble/Bubble.js
+++ b/src/components/Bubble/Bubble.js
@@ -1,5 +1,3 @@
-import './Bubble.css';
-
 /**
  * Component creates speech bubble with or without image, with given header and optional sentences.
  * Component accepts following inputs:
diff --git a/src/sass/abstracts/_mixins.scss b/src/sass/abstracts/_mixins.scss
new file mode 100644
index 0000000..efc17d2
--- /dev/null
+++ b/src/sass/abstracts/_mixins.scss
@@ -0,0 +1,41 @@
+@use '../abstracts/variables' as *;
+
+@mixin centerer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin animal-background($amount, $path) {
+  background: linear-gradient(transparentize(white, $amount), transparentize(white, $amount)), url($path), no-repeat;
+  background-size: 290px;
+  background-position: center center;
+}
+
+@mixin arrow($arrow-root) {
+  @each $side in $sides {
+    @if $side == $arrow-root {
+      border-#{$side}: 30px solid $bubble-color;
+    } @else {
+      border-#{$side}: 20px solid transparent;
+    }
+  }
+}
+
+@mixin bp-min-max($point-1, $point-2) {
+  @media (min-width: #{$point-1}) and (max-width: #{$point-2}) {
+    @content;
+  }
+}
+
+@mixin bp-max($point) {
+  @media (max-width: #{$point}) {
+    @content;
+  }
+}
+
+@mixin bp-min($point) {
+  @media (min-width: #{$point}) {
+    @content;
+  }
+}
diff --git a/src/sass/abstracts/_variables.scss b/src/sass/abstracts/_variables.scss
new file mode 100644
index 0000000..cf6a5aa
--- /dev/null
+++ b/src/sass/abstracts/_variables.scss
@@ -0,0 +1,18 @@
+$bg-color: #8ab0ab;
+$btn-color: #658080;
+$secondary-btn-color: #655010;
+$hover-btn-color: #3e505b;
+$bubble-color: #410606;
+
+$media-alpha: 320px;
+$media-beta: 480px;
+$media-gamma: 640px;
+$media-delta: 960px;
+
+$sides: top, bottom, left, right;
+
+$animal-list: (
+  dog: '../adoption-dog.jpg',
+  cat: '../adoption-cat.jpg',
+  bird: '../adoption-bird.jpg',
+);
diff --git a/src/sass/base/_base.scss b/src/sass/base/_base.scss
new file mode 100644
index 0000000..4674514
--- /dev/null
+++ b/src/sass/base/_base.scss
@@ -0,0 +1,14 @@
+@use '../abstracts/variables' as *;
+
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  font-size: 16px;
+}
+
+body {
+  background-color: $bg-color;
+}
diff --git a/src/sass/components/_bubble.scss b/src/sass/components/_bubble.scss
new file mode 100644
index 0000000..29e29b2
--- /dev/null
+++ b/src/sass/components/_bubble.scss
@@ -0,0 +1,89 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+/*********** INFO BUBBLE ***********/
+
+.bubble {
+  position: relative;
+
+  display: grid;
+  grid-template-columns: 150px 1fr;
+  grid-gap: 12px;
+  align-items: center;
+
+  padding: 20px;
+  margin-bottom: 30px;
+  min-height: 180px;
+
+  background: $bubble-color;
+  box-shadow: 0 0 20px transparentize(black, 0.4);
+  border-radius: 8px;
+  color: white;
+  font-weight: 100;
+
+  @include bp-max($media-gamma) {
+    & {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  &.no-image {
+    grid-template-columns: 1fr;
+  }
+
+  &.no-image h2 {
+    font-size: 1.3em;
+  }
+
+  .bubble-img img {
+    border-radius: 8px;
+  }
+
+  &.invisible,
+  &.invisible {
+    opacity: 0;
+  }
+
+  &.fade-in,
+  &.fade-in {
+    opacity: 1;
+    transition: opacity 0.12s;
+    transition-timing-function: ease-in;
+  }
+
+  a {
+    color: white;
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    top: 55%;
+    left: 100%;
+    @include arrow(left);
+  }
+
+  &.lower:after {
+    top: 20%;
+  }
+
+  @include bp-max($media-delta) {
+    &:after {
+      top: 100%;
+      left: 20%;
+      @include arrow(top);
+    }
+
+    &.lower:after {
+      top: 100%;
+      left: 40%;
+    }
+  }
+
+  img {
+    width: 100%;
+    box-shadow: 0 0 30px transparentize(white, 0.5);
+  }
+}
diff --git a/src/sass/layout/_bubble-space.scss b/src/sass/layout/_bubble-space.scss
new file mode 100644
index 0000000..a68570a
--- /dev/null
+++ b/src/sass/layout/_bubble-space.scss
@@ -0,0 +1,33 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+.main-page,
+.credits-page {
+  .info {
+    grid-area: info;
+    display: flex;
+    align-items: start;
+    flex-direction: row;
+
+    @include bp-max($media-delta) {
+      & {
+        align-items: center;
+        flex-direction: column;
+      }
+    }
+  }
+
+  @include bp-max($media-delta) {
+    .bubbles {
+      width: 80%;
+    }
+
+    .animal {
+      width: 60%;
+    }
+  }
+
+  .animal img {
+    width: 100%;
+  }
+}
diff --git a/src/sass/layout/_grid.scss b/src/sass/layout/_grid.scss
new file mode 100644
index 0000000..9c1ea34
--- /dev/null
+++ b/src/sass/layout/_grid.scss
@@ -0,0 +1,17 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+.container.main-page,
+.container.credits-page {
+  display: grid;
+  grid-template-areas:
+    'header header'
+    'nav info';
+  grid-gap: 10px;
+
+  @include bp-max($media-delta) {
+    & {
+      grid-template-columns: 1fr;
+    }
+  }
+}
diff --git a/src/sass/layout/_header.scss b/src/sass/layout/_header.scss
new file mode 100644
index 0000000..38b9696
--- /dev/null
+++ b/src/sass/layout/_header.scss
@@ -0,0 +1,19 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+.main-page .header,
+.adoption-page .header,
+.credits-page .header {
+  grid-area: header;
+
+  h1 {
+    margin: 20px 0;
+    font-size: 8vw;
+  }
+
+  @include bp-max($media-beta) {
+    h1 {
+      font-size: 38px;
+    }
+  }
+}
diff --git a/src/sass/style.scss b/src/sass/style.scss
index 31e6bce..6df3b6c 100644
--- a/src/sass/style.scss
+++ b/src/sass/style.scss
@@ -1 +1,21 @@
 // Entry point for scss
+
+// Abstracts
+@use 'abstracts/variables';
+@use 'abstracts/mixins';
+
+// Base
+@use 'base/base';
+
+// Components
+@use 'components/bubble';
+
+// Layout
+@use 'layout/grid';
+@use 'layout/header';
+@use 'layout/bubble-space';
+
+// Views
+@use 'views/main-page';
+@use 'views/adoption-page';
+@use 'views/credits-page';
diff --git a/src/sass/views/_adoption-page.scss b/src/sass/views/_adoption-page.scss
new file mode 100644
index 0000000..bd1e937
--- /dev/null
+++ b/src/sass/views/_adoption-page.scss
@@ -0,0 +1,107 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+.adoption-page {
+  /********** CONTAINER ****************/
+
+  &.container {
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-areas:
+      'header'
+      'text'
+      'options'
+      'animal';
+    grid-gap: 10px;
+  }
+
+  /*********** TEXT SPACE ******************/
+
+  .text-container {
+    grid-area: text;
+
+    p {
+      margin: 10px 0;
+      font-size: 40px;
+      font-weight: bold;
+      color: white;
+    }
+  }
+
+  /*********** NAVIGATION ******************/
+  .navigation-container {
+    margin: 10px 0;
+
+    ul {
+      grid-area: options;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: nowrap;
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+    }
+
+    @include bp-max($media-delta) {
+      ul {
+        flex-direction: column;
+      }
+
+      li {
+        margin-bottom: 20px;
+      }
+    }
+
+    a {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      width: 290px;
+      height: 200px;
+      text-decoration: none;
+      border-radius: 10px;
+    }
+
+    @each $animal, $path in $animal-list {
+      .#{$animal} {
+        @include animal-background(0.7, $path);
+      }
+
+      .#{$animal}:hover {
+        @include animal-background(1, $path);
+        transform: scale(1.1);
+        transition: ease-in-out all 0.4s;
+      }
+    }
+
+    span {
+      color: white;
+      font-size: 40px;
+      font-weight: 900;
+      text-shadow: 4px 4px 4px #000000;
+    }
+  }
+
+  .go-home {
+    margin-top: 40px;
+  }
+
+  /******* ANIMAL SPACE ******/
+
+  .main-animal {
+    grid-area: animal;
+
+    @include centerer();
+    flex-direction: row;
+
+    img {
+      max-width: 400px;
+    }
+
+    @include bp-max($media-delta) {
+      img {
+        max-width: 80%;
+      }
+    }
+  }
+}
diff --git a/src/sass/views/_credits-page.scss b/src/sass/views/_credits-page.scss
new file mode 100644
index 0000000..f629aa4
--- /dev/null
+++ b/src/sass/views/_credits-page.scss
@@ -0,0 +1,69 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+.credits-page {
+  /********** CONTAINER ****************/
+
+  @include bp-min($media-delta) {
+    &.container {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @include bp-max($media-delta) {
+    &.container {
+      grid-template-areas:
+        'header'
+        'info'
+        'nav';
+    }
+  }
+
+  /************ NAVIGATION ************/
+
+  .navigation-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 10px;
+
+    @include bp-max($media-beta) {
+      & {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .wrapper:nth-child(1),
+    .wrapper:nth-last-child(2),
+    .wrapper:nth-last-child(1) {
+      grid-column: 1 / -1;
+      justify-content: center;
+    }
+
+    .mentor {
+      background-color: $secondary-btn-color;
+    }
+
+    .go-home {
+      margin-top: 40px;
+    }
+  }
+
+  button {
+    margin: 15px 5px;
+  }
+
+  /********** BUBBLE SPACE *********/
+  .animal {
+    align-self: center;
+  }
+
+  @media (min-width: $media-delta) {
+    .bubbles {
+      width: 35%;
+    }
+
+    .animal {
+      width: 75%;
+    }
+  }
+}
diff --git a/src/sass/views/_main-page.scss b/src/sass/views/_main-page.scss
new file mode 100644
index 0000000..430a4f6
--- /dev/null
+++ b/src/sass/views/_main-page.scss
@@ -0,0 +1,54 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+.main-page {
+  /********** CONTAINER ****************/
+
+  @include bp-min($media-delta) {
+    &.container {
+      grid-template-columns: 2fr 5fr;
+    }
+  }
+
+  @include bp-max($media-delta) {
+    &.container {
+      grid-template-areas:
+        'header'
+        'nav'
+        'info';
+    }
+  }
+
+  /************ NAVIGATION *******************/
+
+  .navigation-container {
+    grid-area: nav;
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    flex-direction: column;
+    flex-wrap: nowrap;
+
+    @include bp-min-max($media-alpha, $media-delta) {
+      & button {
+        width: 50vw;
+      }
+    }
+  }
+
+  /********** BUBBLE SPACE *********/
+
+  .animal {
+    align-self: center;
+  }
+
+  @include bp-min($media-delta) {
+    .bubbles {
+      width: 60%;
+    }
+
+    .animal {
+      width: 40%;
+    }
+  }
+}
diff --git a/src/style.css b/src/style.css
index ba045e2..e69de29 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,97 +0,0 @@
-/********** GENERAL ****************/
-
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  /* margin-top: 60px; */
-  font-size: 16px;
-}
-
-:root {
-  --bg-color: #8ab0ab;
-  --btn-color: #658080;
-  --secondary-btn-color: #655010;
-  --hover-btn-color: #3e505b;
-  --bubble-color: #410606;
-}
-
-body {
-  background-color: var(--bg-color);
-}
-
-/********** CONTAINER ****************/
-.container.main-page,
-.container.credits-page {
-  display: grid;
-  grid-template-areas:
-    'header header'
-    'nav info';
-  grid-gap: 10px;
-}
-
-@media (max-width: 960px) {
-  .container.main-page,
-  .container.credits-page {
-    grid-template-columns: 1fr;
-  }
-}
-
-/************ HEADER *****************/
-
-.main-page .header,
-.adoption-page .header,
-.credits-page .header {
-  grid-area: header;
-}
-
-.main-page .header h1,
-.adoption-page .header h1,
-.credits-page .header h1 {
-  margin: 20px 0;
-  font-size: 8vw;
-}
-
-@media (max-width: 480px) {
-  .main-page .header h1,
-  .adoption-page .header h1,
-  .credits-page .header h1 {
-    font-size: 38px;
-  }
-}
-
-/********** BUBBLE SPACE *********/
-.main-page .info,
-.credits-page .info {
-  grid-area: info;
-  display: flex;
-  align-items: start;
-  flex-direction: row;
-}
-
-@media (max-width: 960px) {
-  .main-page .info,
-  .credits-page .info {
-    align-items: center;
-    flex-direction: column;
-  }
-}
-
-@media (max-width: 960px) {
-  .main-page .bubbles,
-  .credits-page .bubbles {
-    width: 80%;
-  }
-
-  .main-page .animal,
-  .credits-page .animal {
-    width: 60%;
-  }
-}
-
-.main-page .animal img,
-.credits-page .animal img {
-  width: 100%;
-}
diff --git a/src/views/AdoptionPage/AdoptionPage.css b/src/views/AdoptionPage/AdoptionPage.css
deleted file mode 100644
index ba781e6..0000000
--- a/src/views/AdoptionPage/AdoptionPage.css
+++ /dev/null
@@ -1,134 +0,0 @@
-/********** CONTAINER ****************/
-
-.adoption-page.container {
-  display: grid;
-  grid-template-rows: 1fr;
-  grid-template-areas:
-    'header'
-    'text'
-    'options'
-    'animal';
-  grid-gap: 10px;
-}
-
-/*********** TEXT SPACE ******************/
-
-.adoption-page .text-container {
-  grid-area: text;
-}
-
-.adoption-page .text-container p {
-  margin: 10px 0;
-  font-size: 40px;
-  font-weight: bold;
-  color: white;
-}
-
-/*********** NAVIGATION ******************/
-.adoption-page .navigation-container {
-  margin: 10px 0;
-}
-
-.adoption-page .navigation-container ul {
-  grid-area: options;
-  display: flex;
-  justify-content: space-around;
-  flex-wrap: nowrap;
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-}
-
-@media (max-width: 960px) {
-  .adoption-page .navigation-container ul {
-    flex-direction: column;
-  }
-
-  .adoption-page .navigation-container li {
-    margin-bottom: 20px;
-  }
-}
-
-.adoption-page .navigation-container a {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  width: 290px;
-  height: 200px;
-  text-decoration: none;
-  border-radius: 10px;
-}
-
-.adoption-page .navigation-container .dog {
-  background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(./adoption-dog.jpg), no-repeat;
-  background-size: 290px;
-  background-position: center center;
-}
-
-.adoption-page .navigation-container .dog:hover {
-  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(./adoption-dog.jpg), no-repeat;
-  background-size: 290px;
-  background-position: center center;
-  transform: scale(1.1);
-  transition: ease-in-out all 0.4s;
-}
-
-.adoption-page .navigation-container .cat {
-  background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(./adoption-cat.jpg), no-repeat;
-  background-size: 290px;
-  background-position: center center;
-}
-
-.adoption-page .navigation-container .cat:hover {
-  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(./adoption-cat.jpg), no-repeat;
-  background-size: 290px;
-  background-position: center center;
-  transform: scale(1.1);
-  transition: ease-in-out all 0.4s;
-}
-
-.adoption-page .navigation-container .bird {
-  background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(./adoption-bird.jpg), no-repeat;
-  background-size: 290px;
-  background-position: center center;
-}
-
-.adoption-page .navigation-container .bird:hover {
-  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(./adoption-bird.jpg), no-repeat;
-  background-size: 300px;
-  background-position: center center;
-  transform: scale(1.1);
-  transition: ease-in-out all 0.4s;
-}
-
-.adoption-page .navigation-container span {
-  color: white;
-  font-size: 40px;
-  font-weight: 900;
-  text-shadow: 4px 4px 4px #000000;
-}
-
-.adoption-page .go-home {
-  margin-top: 40px;
-}
-
-/******* ANIMAL SPACE ******/
-
-.adoption-page .main-animal {
-  grid-area: animal;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: row;
-}
-
-.adoption-page .main-animal img {
-  max-width: 400px;
-}
-
-@media (max-width: 960px) {
-  .adoption-page .main-animal img {
-    max-width: 80%;
-  }
-}
diff --git a/src/views/AdoptionPage/AdoptionPage.js b/src/views/AdoptionPage/AdoptionPage.js
index ecd3091..2404906 100644
--- a/src/views/AdoptionPage/AdoptionPage.js
+++ b/src/views/AdoptionPage/AdoptionPage.js
@@ -1,4 +1,3 @@
-import './AdoptionPage.css';
 import Button from '../../components/Button/Button';
 
 const PAGE_TITLE = 'ADOPTION';
@@ -43,7 +42,7 @@ function renderNavigation() {
 
   ANIMAL_TYPES.forEach((animal) => {
     const animalOption = document.createElement('li');
-    animalOption.innerHTML = `<a href="${animal.pathOrUrl}" class="option ${
+    animalOption.innerHTML = `<a href="${animal.pathOrUrl}" target="_blank" class="option ${
       animal.type
     }"><span>${animal.type.toUpperCase()}</span></a>`;
     animalList.append(animalOption);
diff --git a/src/views/CreditsPage/CreditsPage.css b/src/views/CreditsPage/CreditsPage.css
deleted file mode 100644
index 3376a17..0000000
--- a/src/views/CreditsPage/CreditsPage.css
+++ /dev/null
@@ -1,62 +0,0 @@
-/********** CONTAINER ****************/
-
-@media (min-width: 961px) {
-  .credits-page.container {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-@media (max-width: 960px) {
-  .credits-page.container {
-    grid-template-areas:
-      'header'
-      'info'
-      'nav';
-  }
-}
-
-/************ NAVIGATION ************/
-
-.credits-page .navigation-container {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-gap: 10px;
-}
-
-@media (max-width: 480px) {
-  .credits-page .navigation-container {
-    grid-template-columns: 1fr;
-  }
-}
-
-.credits-page .navigation-container .wrapper:nth-child(1),
-.credits-page .navigation-container .wrapper:nth-last-child(2),
-.credits-page .navigation-container .wrapper:nth-last-child(1) {
-  grid-column: 1 / -1;
-  justify-content: center;
-}
-
-.credits-page button {
-  margin: 15px 5px;
-}
-
-.credits-page .navigation-container .mentor {
-  background-color: var(--secondary-btn-color);
-}
-
-.credits-page .navigation-container .go-home {
-  margin-top: 40px;
-}
-
-/********** BUBBLE SPACE *********/
-
-@media (min-width: 961px) {
-  .credits-page .bubbles {
-    width: 35%;
-  }
-
-  .credits-page .animal {
-    width: 75%;
-    align-self: center;
-  }
-}
diff --git a/src/views/CreditsPage/CreditsPage.js b/src/views/CreditsPage/CreditsPage.js
index ac89eb6..4142109 100644
--- a/src/views/CreditsPage/CreditsPage.js
+++ b/src/views/CreditsPage/CreditsPage.js
@@ -1,4 +1,3 @@
-import './CreditsPage.css';
 import Button from '../../components/Button/Button';
 import Bubble from '../../components/Bubble/Bubble';
 
diff --git a/src/views/MainPage/MainPage.css b/src/views/MainPage/MainPage.css
deleted file mode 100644
index 19e788f..0000000
--- a/src/views/MainPage/MainPage.css
+++ /dev/null
@@ -1,46 +0,0 @@
-/********** CONTAINER ****************/
-
-@media (min-width: 961px) {
-  .main-page.container {
-    grid-template-columns: 2fr 5fr;
-  }
-}
-
-@media (max-width: 960px) {
-  .main-page.container {
-    grid-template-areas:
-      'header'
-      'nav'
-      'info';
-  }
-}
-
-/************ NAVIGATION *******************/
-
-.main-page .navigation-container {
-  grid-area: nav;
-  display: flex;
-  align-items: center;
-  justify-content: start;
-  flex-direction: column;
-  flex-wrap: nowrap;
-}
-
-@media (min-width: 320px) and (max-width: 960px) {
-  .main-page .navigation-container button {
-    width: 50vw;
-  }
-}
-
-/********** BUBBLE SPACE *********/
-
-@media (min-width: 961px) {
-  .main-page .bubbles {
-    width: 60%;
-  }
-
-  .main-page .animal {
-    width: 40%;
-    align-self: center;
-  }
-}
diff --git a/src/views/MainPage/MainPage.js b/src/views/MainPage/MainPage.js
index 8bc0d69..ce0a789 100644
--- a/src/views/MainPage/MainPage.js
+++ b/src/views/MainPage/MainPage.js
@@ -1,4 +1,3 @@
-import './MainPage.css';
 import Button from '../../components/Button/Button';
 import Bubble from '../../components/Bubble/Bubble';
 import ImageFact from '../../model/ImageFact';
@@ -9,7 +8,7 @@ const PAGE_TITLE = 'ANIMALIADA';
 const MAIN_ANIMAL_IMG = { pathOrUrl: './kangoroo.png', alt: 'kangoroo that tells informations' };
 const FACT_HEADER = 'Did you know?';
 const AdoptionBubbleContent = {
-  IMG: { pathOrUrl: 'https://placedog.net/300/400?random', alt: 'the animal to adoption' },
+  IMG: { pathOrUrl: 'https://placedog.net/150/150?random', alt: 'the animal to adoption' },
   HEADER_TEXT: "Maybe you'd like to adopt your own pet?",
   SENTENCES: ['This one is looking for home', 'See more here: <a href="#adoption-page">Adoption Page</a>'],
 };
@@ -97,7 +96,6 @@ async function renderFactBubbleContent() {
     },
     false,
   );
-
   renderAnimalFactImg(imageFact, imageObject);
 }