diff --git a/index.html b/index.html
index 7dea02c..23f9fe9 100644
--- a/index.html
+++ b/index.html
@@ -28,9 +28,9 @@
         </ul>
         <button id="load-more" class="rick-btn">Load More</button>
     </aside>
-    <main>
+    <section role="main">
 
-    </main>
+    </section>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/script.js b/src/script.js
index 16bf207..d49c5b0 100644
--- a/src/script.js
+++ b/src/script.js
@@ -20,25 +20,25 @@ $(function () {
 
     $(".episodes").on("click", "li", function (e) {
         var id = $(e.target).attr("data-episode");
-        var mainId = $('main').attr("id");
+        var mainId = $('[role="main"]').attr("id");
         if ("episode-" + id != mainId)
             show(id, "episode")
     });
 
-    $('main').on("click", ".character-card", function (e) {
+    $('[role="main"]').on("click", ".character-card", function (e) {
         var id = $(e.currentTarget).attr("data-character");
         show(id, "character")
     });
 
-    $('main').on("click", ".episode-card", function (e) {
+    $('[role="main"]').on("click", ".episode-card", function (e) {
         var id = $(e.currentTarget).attr("data-episode");
         show(id, "episode")
     });
 
-    $('main').on("click", ".morty-btn", function (e) {
-        var characterId = $(e.target).closest('main').attr("id").split("-")[1];
+    $('[role="main"]').on("click", ".morty-btn", function (e) {
+        var characterId = $(e.target).closest('[role="main"]').attr("id").split("-")[1];
         var character = controller.characters[characterId];
-        if(character.origin.name == "unknown") return;
+        if (character.origin.name == "unknown") return;
         show(characterId, "location")
     });
 
@@ -72,8 +72,8 @@ function populateData(urls, type) {
 /* SHOW TYPE FUNCTIONS */
 
 function show(id, type) {
-    $('main').empty();
-    $('main').attr("id", type + "-" + id);
+    $('[role="main"]').empty();
+    $('[role="main"]').attr("id", type + "-" + id);
     if (type == "episode")
         showEpisode(id);
     else if (type == "character")
@@ -84,27 +84,27 @@ function show(id, type) {
 
 function showEpisode(id) {
     var episode = controller.episodes[id];
-    $('main').append(createTemplate(episode, "episode"));
+    $('[role="main"]').append(createTemplate(episode, "episode"));
     populateData(episode.characters, "characters");
 }
 
 function showCharacter(id) {
     var character = controller.characters[id];
-    $('main').append(createTemplate(character, "character"));
+    $('[role="main"]').append(createTemplate(character, "character"));
     populateData(character.episode, "episodes");
 }
 
 function showLocation(characterId) {
     var character = controller.characters[characterId];
-    var originId = getIdFromURL(character.origin.url);    
+    var originId = getIdFromURL(character.origin.url);
     if (originId in controller.locations) {
         var origin = controller.locations[originId];
-        $('main').append(createTemplate(origin, "location"));
+        $('[role="main"]').append(createTemplate(origin, "location"));
         populateData(origin.residents, "characters")
     } else {
         getData(character.origin.url).then(function (location) {
             controller.locations[location.id] = location;
-            $('main').append(createTemplate(location, "location"));
+            $('[role="main"]').append(createTemplate(location, "location"));
             populateData(location.residents, "characters")
         });
     }
@@ -129,16 +129,13 @@ function createLocationTemplate(location) {
 }
 
 function createCharacterTemplate(character) {
-    return $(`<div class="character-header">
-                    <img src="${character.image}"/>
-                    <div class="character-info">
-                        <h1>${character.name}</h1>
-                        <p>${character.species} <strong>|</strong> ${character.status} <strong>|</strong> ${character.gender} <strong>|</strong> ${character.origin.name}</p>
-                        <button class="morty-btn">Location</button>
-                    </div>
-                </div>
-                <div class="cards-list"></div>
-            `);
+    return $("<div class=\"character-header\"><img src=\"" + character.image +
+        "\"/><div class=\"character-info\"><h1>" + character.name +
+        "</h1><p>" + character.species +
+        " <strong>|</strong> " + character.status +
+        "<strong>|</strong> " + character.gender +
+        " <strong>|</strong> " + character.origin.name +
+        "</p><button class=\"morty-btn\">Location</button></div> </div><div class=\"cards-list\"></div>");
 }
 
 function createEpisodeTemplate(episode) {
@@ -165,10 +162,9 @@ function createCharacterCard(character) {
 }
 
 function createEpisodeCard(episode) {
-    return $(`<div class="episode-card" data-episode="${episode.id}">
-                <h2><strong>${episode.name}</strong></h2>
-                <p>${episode.episode}</p>
-                </div>`);
+    return $("<div class=\"episode-card\" data-episode=\"" + episode.id +
+                "\"><h2><strong>" + episode.name +
+                "</strong></h2><p>" + episode.episode + "</p></div>");
 }
 
 /* AJAX FUNCTIONS */
diff --git a/src/styles/style.css b/src/styles/style.css
index 03ba567..63d354f 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -34,7 +34,7 @@ body {
     -ms-grid-rows: 15vh 85vh;
     grid-template-rows: 15vh 85vh;
     grid-template-areas: "header header"
-                         "sidebar main";
+        "sidebar main";
     background-image: url("../../assets/img/wp1822796-rick-and-morty-wallpapers.jpg");
     background-size: cover;
     font-family: 'Grandstander', cursive;
@@ -45,15 +45,21 @@ header {
     -ms-grid-column: 1;
     -ms-grid-column-span: 2;
     grid-area: header;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
     align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
     justify-content: center;
     text-align: center;
 }
 
 /* MAIN CONTAINER STYLE */
 
-main {
+[role="main"] {
     -ms-grid-row: 2;
     -ms-grid-column: 2;
     grid-area: main;
@@ -62,12 +68,17 @@ main {
     margin: 1rem 3rem 3rem 0rem;
     text-align: center;
     padding: 1rem;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
     flex-direction: column;
     overflow-y: auto;
 }
 
-main h1 {
+[role="main"] h1 {
     color: var(--rick-blue);
     margin: 1.5rem;
     word-break: break-all;
@@ -86,8 +97,13 @@ strong {
 }
 
 .cards-list {
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
     justify-content: center;
+    -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     margin-top: 1rem;
     overflow: visible;
@@ -95,6 +111,8 @@ strong {
 
 .cards-list>*:hover {
     cursor: pointer;
+    -webkit-transform: scale(1.05);
+    -ms-transform: scale(1.05);
     transform: scale(1.05);
 }
 
@@ -115,7 +133,11 @@ strong {
 }
 
 .character-header {
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
     justify-content: start;
     padding: 1rem 2rem;
 }
@@ -145,8 +167,14 @@ strong {
 
 .episode-card {
     width: 300px;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
     flex-direction: column;
+    -ms-flex-pack: distribute;
     justify-content: space-around;
     padding: 1rem;
     margin: .7rem;
@@ -181,8 +209,15 @@ aside {
     grid-area: sidebar;
     text-align: center;
     padding: 1rem .5rem 0rem;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
     flex-direction: column;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
     justify-content: space-between;
     margin-bottom: 3rem;
     opacity: 1;
@@ -192,6 +227,8 @@ aside {
     display: none;
     position: absolute;
     top: 15vh;
+    -webkit-transform: translate(-50%, 50%);
+    -ms-transform: translate(-50%, 50%);
     transform: translate(-50%, 50%);
     right: 1rem;
     font-size: 2.5rem;
@@ -223,6 +260,8 @@ aside h1 {
 
 .episodes li:hover {
     cursor: pointer;
+    -webkit-transform: scale(1.1);
+    -ms-transform: scale(1.1);
     transform: scale(1.1);
 }
 
@@ -243,6 +282,8 @@ aside h1 {
 
 button:hover {
     cursor: pointer;
+    -webkit-transform: scale(1.1);
+    -ms-transform: scale(1.1);
     transform: scale(1.1);
 }
 
@@ -273,7 +314,8 @@ button:hover {
     h1 {
         font-size: 3.5rem;
     }
-    main {
+
+    [role="main"] {
         margin: 1rem 1.5rem 3rem 0rem;
     }
 }
@@ -281,6 +323,8 @@ button:hover {
 @media(min-width: 900px) {
     aside {
         opacity: 1 !important;
+        display: -webkit-box !important;
+        display: -ms-flexbox !important;
         display: flex !important;
     }
 }
@@ -296,10 +340,10 @@ button:hover {
         -ms-grid-columns: 1fr;
         grid-template-columns: 1fr;
         grid-template-areas: "header"
-                            "main";
+            "main";
     }
 
-    main {
+    [role="main"] {
         -ms-grid-row: 2;
         -ms-grid-column: 1;
         margin: 0rem 1rem 1rem;
@@ -317,6 +361,7 @@ button:hover {
         height: 80vh;
         background: url(../../assets/img/wp1822796-rick-and-morty-wallpapers.jpg) no-repeat;
         background-position: bottom;
+        -webkit-box-shadow: 5px 5px 5px #44465D;
         box-shadow: 5px 5px 5px #44465D;
         border-radius: 0 0px 15px 0;
         opacity: 0;
@@ -346,8 +391,15 @@ button:hover {
     }
 
     .character-header {
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        -ms-flex-direction: column;
         flex-direction: column;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
         justify-content: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
         align-items: center;
     }
 
@@ -360,7 +412,7 @@ button:hover {
         text-align: center;
     }
 
-    .character-info > * {
+    .character-info>* {
         margin: 0 !important;
         margin-bottom: 1rem !important;
     }