diff --git a/app/char.webp b/app/char.webp
new file mode 100644
index 0000000..28fd62d
Binary files /dev/null and b/app/char.webp differ
diff --git a/app/css/misc.css b/app/css/misc.css
index 76835e2..33a2f8a 100644
--- a/app/css/misc.css
+++ b/app/css/misc.css
@@ -3,40 +3,11 @@
     border-color: var(--color) !important;
 }
 
-.cover-img {
-    object-fit: cover;
-    height: 400px;
-}
-
-.cover-img[src=""] {
-    display: none;
-}
-
 .contain-img {
     object-fit: contain
 }
 
-.banner {
-    opacity: 0.85
-}
-
-.cover-wrapper:not(.mt-nc)+div {
-    justify-content: flex-end;
-}
-
-.mt-nc {
-    margin-top: -150px !important
-}
-
-.view {
-    min-height: 100%;
-}
-
-.desc {
-    max-height: 250px
-}
-
-.desc>p {
+.desc p {
     margin-bottom: 0;
     margin-top: 0;
 }
@@ -50,7 +21,8 @@
     margin: 0
 }
 
-.gallery .details span+span::before {
+.gallery .details span+span::before,
+#viewMediaInfo span+span::before{
     content: " • "
 }
 
@@ -86,21 +58,6 @@ section:target {
     height: 100%
 }
 
-.w-60 {
-    width: 6rem;
-}
-
-#ep::-webkit-inner-spin-button {
-    margin-right: 0 !important
-}
-
-::-webkit-inner-spin-button {
-    opacity: 1;
-    margin-left: .4rem;
-    margin-right: -.5rem;
-    filter: invert(.84);
-}
-
 .material-icons {
     font-size: 18px;
     align-self: center
@@ -136,10 +93,6 @@ section:target {
     padding-bottom: 56.25%;
 }
 
-#episodes img {
-    max-height: 150px;
-}
-
 #episodes>div {
     flex: none
 }
@@ -169,7 +122,31 @@ section:target {
 nav {
     transition: top .4s cubic-bezier(.25,.8,.25,1);
 }
-
+#view {
+    background: no-repeat center center fixed;
+    background-size: cover;
+}
+#view > div{
+    backdrop-filter: blur(10px) brightness(0.5);
+}
+#viewEpisodesWrapper.hidden{
+    opacity: 0;
+    height: 0
+}
+#viewEpisodesWrapper{
+    opacity: 1;
+    height: auto;
+    transition: opacity .2s cubic-bezier(.25,.8,.25,1);
+    overflow: hidden;
+}
+#view .details{
+    background-color: var(--dm-button-bg-color) !important;
+    background-image: var(--dm-button-bg-image) !important;
+    box-shadow: var(--dm-button-box-shadow) !important;
+}
+.modal-dialog {
+    top: 0 !important
+}
 @keyframes load {
     from {
         left: -150px;
diff --git a/app/index.html b/app/index.html
index dbcec91..529e811 100644
--- a/app/index.html
+++ b/app/index.html
@@ -48,60 +48,59 @@
             </div>
         </div>
     </div>
-    <div class="modal modal-full ie-scroll-fix" id="view" tabindex="-1" role="dialog">
-        <div class="modal-dialog" role="document">
-            <div class="view modal-content m-0 p-0">
-                <button class="close bg-dark-light pointer" data-dismiss="modal" type="button" aria-label="Close">
-                    <span>&times;</span>
+    <div class="modal modal-full bg-dark-light" id="view" tabindex="-1" role="dialog">
+        <div class="modal-dialog bg-transparent" role="document">
+            <div class="view modal-content bg-transparent">
+                <button class="close pointer" data-dismiss="modal" type="button" aria-label="Close">
+                    <span>×</span>
                 </button>
-                <div class="banner">
-                    <img class="cover-img w-full h-full">
-
-                </div>
-                <div class="bg-dark">
-                    <div class="container row">
-                        <div
-                            class="col-md-3 mt-10 mt-nc pb-20 d-flex flex-column justify-content-between align-items-center cover-wrapper">
-                            <img class="contain-img rounded w-full">
-                            <div class="input-group pt-10">
-                                <div class="input-group-prepend flex-grow-1">
-                                    <button class="btn bg-primary pr-5 pl-10 w-full" type="button" id="play">Play
-                                        Episode</button>
-                                </div>
-                                <input type="number" id="ep"
-                                    class="form-control flex-reset w-60 bg-primary px-5 text-right" placeholder="#"
-                                    value="1" min="1">
-                            </div>
+                <div class="row">
+                    <div class="col-md-2">
+                        <img class="contain-img rounded w-full mb-15"
+                            src=""
+                            id="viewImg">
+                        <div class="d-flex flex-column flex-wrap">
+                            <button class="btn btn-primary d-flex align-items-end mb-5" type="button" id="viewPlay">
+                                <span class="material-icons mr-10 font-size-20">
+                                    play_arrow
+                                </span>
+                                Play
+                            </button>
+                            <button class="btn d-flex align-items-end mb-5" type="button" id="viewTrailer">
+                                <span class="material-icons mr-10 font-size-20">
+                                    theaters
+                                </span>
+                                Trailer
+                            </button>
+                            </button>
+                            <button class="btn d-flex align-items-end mb-20" type="button" id="viewEpisodes">
+                                <span class="material-icons mr-10 font-size-20">
+                                    video_library
+                                </span>
+                                Episodes
+                            </button>
                         </div>
-                        <div class="col-md-9 p-20 d-flex flex-column">
-                            <h4 class="title font-weight-bold">
-                            </h4>
-                            <p class="text-muted desc overflow-y-scroll my-0">
+                    </div>
+                    <div class="col-md-8">
+                        <div class="px-20 ml-20 d-flex flex-column font-size-12 text-muted">
+                            <span class="title font-weight-bold font-size-24 text-white pb-5" id="viewTitle"></span>
+                            <span id="viewSeason" class="text-capitalize">Fall 2020</span>
+                            <span id="viewMediaInfo" class="text-capitalize"><span>TV Show</span> • 24 Episodes • 24 min</span>
+                            <p class="text-muted desc overflow-y-scroll my-0 font-size-12 pt-20" id="viewDesc">
                             </p>
                         </div>
                     </div>
+
+                    <div class="col-md-2">
+                        <div class="card m-0 py-5 details font-size-12" id="viewDetails">
+                        </div>
+                    </div>
                 </div>
-                <div class="bg-very-dark">
-                    <div class="container">
-                        <div class="row py-20">
-                            <div class="col-md-3">
-                                <div class="card m-0 py-5 details">
-                                </div>
-                            </div>
-                            <div class="col-9 px-20">
-                                <div class="pb-20">
-                                    <span class="font-weight-bold font-size-22">Episodes</span>
-                                    <div id="episodes" class="pt-10 d-flex overflow-x-scroll justify-content-between">
-                                    </div>
-                                </div>
-                                <div class="d-flex flex-column">
-                                    <span class="font-weight-bold font-size-22 pb-10">Trailer</span>
-                                    <div class="trailer w-full position-relative">
-                                        <iframe id="trailer" src="https://www.youtube.com/embed/vtBy-KHATR0"
-                                            frameborder="0" allowfullscreen="allowfullscreen"
-                                            class="w-full h-full position-absolute rounded top-0 left-0"></iframe>
-                                    </div>
-                                </div>
+                <div class="row py-20">
+                    <div class="col-12 px-20">
+                        <div class="pb-20 hidden" id="viewEpisodesWrapper">
+                            <span class="font-weight-bold font-size-22">Episodes</span>
+                            <div id="episodes" class="pt-10 d-flex overflow-x-auto justify-content-between">
                             </div>
                         </div>
                     </div>
@@ -109,23 +108,37 @@
             </div>
         </div>
     </div>
+    <div class="modal" id="trailer" tabindex="-1" role="dialog">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content w-three-quarter h-full bg-transparent d-flex justify-content-center flex-column">
+                <button class="close pointer" data-dismiss="modal" type="button" aria-label="Close">
+                    <span>&times;</span>
+                </button>
+                <div class="trailer w-full position-relative">
+                    <iframe id="trailerVideo" src="" frameborder="0"
+                        allowfullscreen="allowfullscreen"
+                        class="w-full h-full position-absolute rounded top-0 left-0"></iframe>
+                </div>
+            </div>
+        </div>
+    </div>
     <div id="pageWrapper" class="page-wrapper with-navbar">
         <div class="sticky-alerts"></div>
         <nav class="navbar bg-dark">
-            <a href="#player" class="navbar-brand mt-5">
+            <a href="#player" class="navbar-brand mt-5 ml-10">
                 <img src="logo_cut.png" alt="logo">
             </a>
-            <a href="#list" class="navbar-brand pointer ml-auto" data-toggle="tooltip" data-placement="bottom"
-                data-title="Anime Watch List">
+            <a href="#browse" class="navbar-brand pointer ml-auto" data-toggle="tooltip" data-placement="bottom"
+                data-title="Anime Watch List" id="navList">
                 <span class="material-icons font-size-20">list_alt</span>
             </a>
             </a>
             <a href="#releases" class="navbar-brand pointer" data-toggle="tooltip" data-placement="bottom"
-                data-title="Latest Releases Feed">
+                data-title="Latest Releases Feed" id="navNew">
                 <span class="material-icons font-size-20">fiber_new</span>
             </a>
             <a href="#browse" class="navbar-brand pointer" data-toggle="tooltip" data-placement="bottom"
-            data-title="Currently Trending Anime">
+                data-title="Currently Trending Anime" id="navTrending">
                 <span class="material-icons font-size-20">trending_up</span>
             </a>
             <form class="form-inline d-flex" action="javascript:searchBox()">
@@ -133,8 +146,8 @@
                     <div class="input-group-prepend">
                         <span class="input-group-text d-flex material-icons bg-dark-light pr-0">search</span>
                     </div>
-                    <input id="search" type="text" class="form-control bg-dark-light border-left-0"
-                        placeholder="Search" autocomplete="off">
+                    <input id="search" type="text" class="form-control bg-dark-light border-left-0" placeholder="Search"
+                        autocomplete="off">
                 </div>
             </form>
             <a href="#settingsTab" class="navbar-brand pointer font-size-20 mr-5">
diff --git a/app/js/animeHandler.js b/app/js/animeHandler.js
index 2689931..ad4be22 100644
--- a/app/js/animeHandler.js
+++ b/app/js/animeHandler.js
@@ -4,6 +4,9 @@ function searchBox() {
     search.value = ""
     document.location.hash = "#browse"
 }
+navNew.onclick = () => {hsRss()}
+navTrending.onclick = () =>{searchAnime()}
+navList.onclick = () =>{searchAnime()}
 async function alRequest(a, b) {
     let query,
         variables = {
@@ -219,12 +222,12 @@ async function searchAnime(a) {
 let detailsfrag = document.createDocumentFragment()
 let details = {
     averageScore: "Average Score",
-    duration: "Episode Duration",
-    episodes: "Episodes",
-    format: "Format",
+    // duration: "Episode Duration",
+    // episodes: "Episodes",
+    // format: "Format",
     genres: "Genres",
-    season: "Season",
-    seasonYear: "Year",
+    // season: "Season",
+    // seasonYear: "Year",
     status: "Status",
     english: "English",
     romaji: "Romaji",
@@ -234,51 +237,60 @@ let details = {
 const episodeRx = /Episode (\d+) - (.*)/;
 function viewAnime(media) {
     halfmoon.toggleModal("view")
-    if (media.bannerImage != null) {
-        document.querySelector(".view .banner img").src = media.bannerImage
-        document.querySelector(".view .cover-wrapper").classList.add("mt-nc")
-    } else {
-        document.querySelector(".view .banner img").src = ""
-        document.querySelector(".view .cover-wrapper").classList.remove("mt-nc")
-    }
-    document.querySelector(".view .contain-img").src = media.coverImage.extraLarge
-    document.querySelector(".view .title").textContent = media.title.userPreferred
-    document.querySelector(".view .desc").innerHTML = media.description || ""
-    document.querySelector(".view .details").innerHTML = ""
+    view.setAttribute("style", `background-image: url(${media.bannerImage}) !important`)
+    viewImg.src = media.coverImage.extraLarge
+    viewTitle.textContent = media.title.userPreferred
+    viewDesc.innerHTML = media.description || ""
+
+    viewDetails.innerHTML = ""
     detailsCreator(media)
-    document.querySelector(".view .details").appendChild(detailsfrag)
+    viewDetails.appendChild(detailsfrag)
     if (media.nextAiringEpisode) {
         let temp = document.createElement("p")
         temp.innerHTML = `<span class="font-weight-bold">Airing</span><br><span class="text-muted"> Episode ${media.nextAiringEpisode.episode}: ${toTS(media.nextAiringEpisode.timeUntilAiring)}</span>`
-        document.querySelector(".view .details").prepend(temp)
+        viewDetails.prepend(temp)
     }
-    trailer.src = ""
+    viewSeason.innerHTML = `${(media.season ? media.season.toLowerCase() + " " : "") + (media.seasonYear ? media.seasonYear : "")}`
+    viewMediaInfo.innerHTML = `${media.format ? "<span>" + media.format + "</span>" : ""}${media.episodes ? "<span>" + media.episodes + " Episodes</span>" : ""}${media.duration ? "<span>" + media.duration + " Minutes</span>" : ""}`
+    viewPlay.onclick = () => { nyaaSearch(media, 1); halfmoon.toggleModal("view") }
     if (media.trailer) {
-        switch (media.trailer.site) {
-            case "youtube":
-                trailer.src = "https://www.youtube.com/embed/" + media.trailer.id
-                break;
-        }
+        viewTrailer.removeAttribute("disabled", "")
+        viewTrailer.onclick = () =>
+            trailerPopup(media.trailer)
+    } else {
+        viewTrailer.setAttribute("disabled", "")
+    }
+    viewEpisodes.onclick = () => {
+        viewEpisodesWrapper.classList.toggle("hidden")
     }
     episodes.innerHTML = ""
     if (media.streamingEpisodes) {
+        viewEpisodes.removeAttribute("disabled", "")
         let frag = document.createDocumentFragment()
         media.streamingEpisodes.forEach(episode => {
             let temp = document.createElement("div")
             temp.classList.add("position-relative", "w-250", "rounded", "mr-10", "overflow-hidden", "pointer")
             temp.innerHTML = `
-            <img src="${episode.thumbnail}" class="w-full">
+            <img src="${episode.thumbnail}" class="w-full h-full">
             <div class="position-absolute ep-title w-full p-10 text-truncate bottom-0">${episode.title}</div>`
             temp.onclick = () => { nyaaSearch(media, episodeRx.exec(episode.title)[1]); halfmoon.toggleModal("view") }
             frag.appendChild(temp)
         })
         episodes.appendChild(frag)
+    } else {
+        viewEpisodes.setAttribute("disabled", "")
     }
-    play.onclick = () => { nyaaSearch(media, ep.value); halfmoon.toggleModal("view") }
-    ep.value = 1
-    ep.max = media.episodes || 999
 }
+function trailerPopup(trailer) {
+    trailerVideo.src = ""
+    halfmoon.toggleModal("trailer")
+    switch (trailer.site) {
+        case "youtube":
+            trailerVideo.src = "https://www.youtube.com/embed/" + trailer.id
+            break;
+    }
 
+}
 function detailsCreator(entry) {
     if (entry) {
         Object.entries(entry).forEach(value => {