added fonts and design

15 files changed, 199 insertions, 47 deletions

diff --git a/src/web/package-lock.json b/src/web/package-lock.json
index adb6cd4..931b97b 100644
--- a/src/web/package-lock.json
+++ b/src/web/package-lock.json
@@ -2816,6 +2816,16 @@
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "dev": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -2914,6 +2924,11 @@
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.1.tgz",
       "integrity": "sha512-SpiDSOcbg4J/PjVSt4ny5eY6j74VbVSjROY4Fb/WIUXBV9cnb5luyR4KnPvNoXuGnBK1T+nJIWqRsvU3yP8Mcg=="
     },
+    "bootstrap-icons": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.4.1.tgz",
+      "integrity": "sha512-EcATaAGsRgyy4NtnwXlNzkgWttpb6PqcXCoLtZZKdZtAYJU/WYqoQFxuGFKAppOlf7NmKpvGtSsC/921H7LIjg=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -5589,6 +5604,13 @@
         }
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -5699,6 +5721,11 @@
       "integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==",
       "dev": true
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -8306,6 +8333,13 @@
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
     },
+    "nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "dev": true,
+      "optional": true
+    },
     "nanoid": {
       "version": "3.1.22",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.22.tgz",
@@ -13761,7 +13795,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
@@ -14519,7 +14557,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
diff --git a/src/web/package.json b/src/web/package.json
index b108059..667d1ac 100644
--- a/src/web/package.json
+++ b/src/web/package.json
@@ -23,6 +23,8 @@
     "@angular/router": "~11.2.1",
     "@schematics/angular": "^9.1.0",
     "bootstrap": "4.1.1",
+    "bootstrap-icons": "^1.4.1",
+    "font-awesome": "^4.7.0",
     "ngx-bootstrap": "^6.2.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
diff --git a/src/web/src/app/app.component.html b/src/web/src/app/app.component.html
index 0680b43..9efd8ad 100644
--- a/src/web/src/app/app.component.html
+++ b/src/web/src/app/app.component.html
@@ -1 +1,53 @@
+<nav
+    class="site-header py-1"
+    style="z-index: 1000; position: relative; background: black"
+>
+    <div
+        class="container d-flex flex-column flex-md-row justify-content-between"
+    >
+        <i
+            style="font-size: 3rem; color: white"
+            class="bi bi-arrow-left-circle-fill icon float-left"
+            [routerLink]="['home']"
+        ></i>
+        <a
+            class="py-2 d-flex flex-row align-items-center justify-content-center"
+            href="#"
+        >
+            <div
+                class="h1 theading"
+                style="font-family: 'Playfair Display', serif"
+            >
+                Stream
+            </div>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="40"
+                height="40"
+                viewBox="0 0 24 24"
+                fill="black"
+                stroke="White"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="d-block"
+            >
+                <circle cx="12" cy="12" r="10"></circle>
+                <line x1="14.31" y1="8" x2="20.05" y2="17.94"></line>
+                <line x1="9.69" y1="8" x2="21.17" y2="8"></line>
+                <line x1="7.38" y1="12" x2="13.12" y2="2.06"></line>
+                <line x1="9.69" y1="16" x2="3.95" y2="6.06"></line>
+                <line x1="14.31" y1="16" x2="2.83" y2="16"></line>
+                <line x1="16.62" y1="12" x2="10.88" y2="21.94"></line>
+            </svg>
+            <div
+                class="h1 theading"
+                style="font-family: 'Playfair Display', serif"
+            >
+                Finder
+            </div>
+        </a>
+        <span></span>
+    </div>
+</nav>
 <router-outlet></router-outlet>
diff --git a/src/web/src/app/film/film.component.css b/src/web/src/app/film/film.component.css
index 9b69d7c..08001a3 100644
--- a/src/web/src/app/film/film.component.css
+++ b/src/web/src/app/film/film.component.css
@@ -1,7 +1,9 @@
 .main-div-wrapper {
-    overflow: auto;
+    overflow: hidden;
+    position: relative;
     height: auto;
     width: 100%;
+    font-family: "Playfair Display", sans-serif;
 }
 .img-s {
     width: 100%;
@@ -12,11 +14,10 @@
 .wrapper-content {
     display: flex;
     justify-content: center;
-    align-items: center;
     width: 100%;
     z-index: 100;
-    top: 0;
-    position: fixed;
+    top: 76px;
+    position: absolute;
     left: 0;
     height: 100%;
     padding: 5% 0px;
@@ -32,6 +33,6 @@
 
 .wrapper-wrapper {
     background-color: rgba(0, 0, 0, 0.8);
-    height: 100%;
+    min-height: 100%;
     font-size: 20px;
 }
diff --git a/src/web/src/app/film/film.component.html b/src/web/src/app/film/film.component.html
index 300494b..f7c8075 100644
--- a/src/web/src/app/film/film.component.html
+++ b/src/web/src/app/film/film.component.html
@@ -4,18 +4,29 @@
     <div class="wrapper-content" *ngIf="!loading">
         <div class="wrapper-wrapper container">
             <div class="main-div container row" style="color: white">
-                <div class="description m-auto p-5">
-                    <h1 class="mt-3 mb-4 col-md-8 pl-0">
-                        <strong> {{ model.original_title }}</strong>
+                <div class="description m-auto px-5 pb-0">
+                    <h1
+                        class="mt-5 mb-4 col-md-8 pl-0"
+                        style="font-size: xxx-large"
+                    >
+                        <strong>
+                            {{
+                                type === "tv"
+                                    ? model.name
+                                    : model.original_title
+                            }}</strong
+                        >
                     </h1>
-                    <p class="mt-5">
+                    <p class="mt-4 text-center" style="font-size: larger">
                         {{ model.overview }}
                     </p>
                 </div>
             </div>
             <div class="h-auto container row">
                 <div class="main-div container p-5">
-                    <h1 class="" style="color: white">Watch it here</h1>
+                    <h1 class="" style="color: white; font-size: xxx-large">
+                        Watch It Here
+                    </h1>
                     <div class="cards-list pt-4">
                         <div class="card">
                             <div class="card-img">
diff --git a/src/web/src/app/film/film.component.ts b/src/web/src/app/film/film.component.ts
index 2e25f41..54a7499 100644
--- a/src/web/src/app/film/film.component.ts
+++ b/src/web/src/app/film/film.component.ts
@@ -26,7 +26,6 @@ export class FilmComponent implements OnInit {
             this.type = x.get('type');
             this.id = x.get('id');
             //Start Scraping and loading the spinner
-            this.loading = false;
 
             //this.data.getUsers().subscribe((data) => {
             // this.users = data;
@@ -35,9 +34,9 @@ export class FilmComponent implements OnInit {
         });
         this.service.searchById(this.type, +this.id).subscribe((x: any) => {
             this.model = x;
+            this.loading = false;
             console.log(this.model);
         });
-        console.log(this.model);
         //
         //Get Providers List
         /*this.service
@@ -52,6 +51,8 @@ export class FilmComponent implements OnInit {
     }
 
     getImage() {
-        return 'https://image.tmdb.org/t/p/original' + this.model.poster_path;
+        return this.model
+            ? 'https://image.tmdb.org/t/p/original' + this.model.poster_path
+            : '';
     }
 }
diff --git a/src/web/src/app/home/home.component.html b/src/web/src/app/home/home.component.html
index d32cdaa..7e59fe0 100644
--- a/src/web/src/app/home/home.component.html
+++ b/src/web/src/app/home/home.component.html
@@ -2,6 +2,7 @@
     <div class="row h-100">
         <div class="offset-lg-1 offset-xs-2 mt-5 col-lg-10 col-xs-8">
             <app-search-bar></app-search-bar>
+            <img src="../../assets/movies.svg" class="cover-img img-fluid" />
         </div>
     </div>
 </div>
diff --git a/src/web/src/app/search-bar/search-bar.component.html b/src/web/src/app/search-bar/search-bar.component.html
index 08a58e0..88d9c1d 100644
--- a/src/web/src/app/search-bar/search-bar.component.html
+++ b/src/web/src/app/search-bar/search-bar.component.html
@@ -4,7 +4,7 @@
         class="example-full-width"
         appearance="outline"
     >
-        <mat-label>Discover</mat-label>
+        <mat-label style="font-size: x-large">Discover</mat-label>
         <input
             type="text"
             placeholder="Movies / TV Shows"
diff --git a/src/web/src/app/search-item/search-item.component.css b/src/web/src/app/search-item/search-item.component.css
index 5a92152..6fe9724 100644
--- a/src/web/src/app/search-item/search-item.component.css
+++ b/src/web/src/app/search-item/search-item.component.css
@@ -3,7 +3,6 @@
 }
 
 .year-wrapper {
-    margin-top: 10px;
 }
 
 .year-wrapper-content {
@@ -11,4 +10,5 @@
     color: #3f51b5;
     padding: 5px;
     box-sizing: border-box;
+    font-size: 1.3rem;
 }
diff --git a/src/web/src/app/search-item/search-item.component.html b/src/web/src/app/search-item/search-item.component.html
index 59f7020..513ba86 100644
--- a/src/web/src/app/search-item/search-item.component.html
+++ b/src/web/src/app/search-item/search-item.component.html
@@ -12,9 +12,13 @@
             </small>
         </div>
     </div>
-    <div class="rating col-sm-2 col-md-2 pl-0 pr-1">
-        <span class="material-icons mt-3">star_rate</span>
-        <div class="rating-content">
+    <div class="rating col-sm-2 col-md-2 pl-0 py-2 pr-1">
+        <div class="row d-flex justify-content-center align-items-center">
+            <i class="bi bi-star-fill" style="font-size: 35px"></i>
+        </div>
+        <div
+            class="rating-content row d-flex justify-content-center align-items-center"
+        >
             <strong>
                 {{ getRating() }}
                 <small class="d-sm-none d-lg-inline-block" *ngIf="isRated">
diff --git a/src/web/src/assets/Playfair_Display_SC.zip b/src/web/src/assets/Playfair_Display_SC.zip
new file mode 100644
index 0000000..ce89b2d
--- /dev/null
+++ b/src/web/src/assets/Playfair_Display_SC.zip
diff --git a/src/web/src/assets/movies.svg b/src/web/src/assets/movies.svg
new file mode 100644
index 0000000..0f5cc91
--- /dev/null
+++ b/src/web/src/assets/movies.svg
@@ -0,0 +1 @@
+<svg id="f89af28b-111d-4872-814f-cbbc169855b4" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="867.10818" height="500.05662" viewBox="0 0 867.10818 500.05662"><defs><clipPath id="a1708186-1525-433e-878d-7c35f03ac629" transform="translate(-166.44591 -199.97169)"><path d="M695.14831,283.9783l-6.77-16.49-90.27,37.06a11.15,11.15,0,0,0-6.91,10.31v97.53h17.83v-93.03Z" fill="none"/></clipPath><linearGradient id="feb2277d-7772-4d61-b1af-dc7db61f73e8" x1="916.58831" y1="601.91813" x2="916.58831" y2="667.79812" gradientTransform="matrix(1, 0, 0, -1, -166.44591, 702.02831)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-opacity="0.12"/><stop offset="0.55" stop-opacity="0.09"/><stop offset="1" stop-opacity="0.02"/></linearGradient></defs><title>movie_night</title><path d="M14.95531,192.03591H300.15287a14,14,0,0,1,14,14v22.23774a0,0,0,0,1,0,0H.95533a0,0,0,0,1,0,0V206.0359A14,14,0,0,1,14.95531,192.03591Z" fill="#3f3d56"/><path d="M461.18569,389.41919a12.84166,12.84166,0,0,0-4.13933.70477,7.75132,7.75132,0,0,0-15.27374,1.88364c0,.03871.00964.07457.01043.11312a13.30859,13.30859,0,0,0-2.85556.59165,7.794,7.794,0,0,0-3.83869-4.94648,12.98613,12.98613,0,0,0,5.60148-6.13088c6.33278-.103,11.436-4.68107,11.436-10.33468,0-5.71823-5.21489-10.35364-11.64784-10.35364a12.84177,12.84177,0,0,0-4.13934.70477,7.73969,7.73969,0,1,0-14.88067,4.20632c-.30949.21533-.59812.4572-.88739.69781a7.34987,7.34987,0,0,0-5.2931-1.76183,12.89142,12.89142,0,0,0-25.06384,4.01374,13.24765,13.24765,0,0,0-3.05478.60918,7.76417,7.76417,0,0,0-.44646-1.27745,9.72676,9.72676,0,0,0,3.2916-7.19254c0-5.71823-5.2149-10.35364-11.64784-10.35364a12.842,12.842,0,0,0-4.13934.70477,7.73969,7.73969,0,1,0-14.88067,4.20632,12.90859,12.90859,0,0,0-5.53212,10.01508c-.10949.09732-.23493.176-.33872.27932a9.2223,9.2223,0,0,0,.301-2.26344c0-5.71823-5.2149-10.35364-11.64784-10.35364a12.84172,12.84172,0,0,0-4.13934.70477,7.73969,7.73969,0,1,0-14.88067,4.20632,12.90822,12.90822,0,0,0,0,21.23873,7.05915,7.05915,0,0,0,0,4.64536,13.06918,13.06918,0,0,0-3.3115,3.34373,7.71691,7.71691,0,0,0-15.12049,1.30685,12.33158,12.33158,0,0,0-3.32777-1.34445A13.01113,13.01113,0,0,0,306.093,381.635c6.33279-.103,11.436-4.68107,11.436-10.33468,0-5.71823-5.2149-10.35364-11.64785-10.35364a12.84171,12.84171,0,0,0-4.13933.70477,7.73969,7.73969,0,1,0-14.88067,4.20632c-.166.11549-.31565.25135-.476.37426-.4038-.0376-.79639-.10853-1.21126-.10853a12.842,12.842,0,0,0-4.13934.70476c-.049-.19526-.12954-.37647-.19274-.56558a7.6278,7.6278,0,0,0-7.92637-9.23416,12.92962,12.92962,0,1,0-20.32085,14.40561,13.39192,13.39192,0,0,0-2.62095.57095A7.69523,7.69523,0,0,0,237.648,367.8419a12.10286,12.10286,0,0,0-9.41916-4.3068,12.84172,12.84172,0,0,0-4.13934.70477,7.73969,7.73969,0,1,0-14.88067,4.20632,12.91366,12.91366,0,0,0-5.56988,10.61936c0,.04013.01153.07694.01185.11691a10.73636,10.73636,0,0,0-5.4454.58786,7.73968,7.73968,0,1,0-14.88066,4.20632,12.889,12.889,0,0,0,10.1868,23.21749,12.89592,12.89592,0,0,0,24.36729,3.31039,12.8992,12.8992,0,0,0,23.50391-.397,12.87909,12.87909,0,0,0,4.45736-.86291,12.8957,12.8957,0,0,0,24.01514.86291,12.66149,12.66149,0,0,0,5.429-1.34334,12.88273,12.88273,0,0,0,23.04354-1.24507,13.04794,13.04794,0,0,0,2.06959-.2166,12.92926,12.92926,0,0,0,23.81451.2166,12.88231,12.88231,0,0,0,3.0077-.44362,12.61784,12.61784,0,0,0,14.01507-5.35218,12.93614,12.93614,0,0,0,24.39178,8.38421,12.66152,12.66152,0,0,0,5.429-1.34334,12.88273,12.88273,0,0,0,23.04354-1.24507,12.66149,12.66149,0,0,0,5.429-1.34334,12.8073,12.8073,0,0,0,19.18652,3.71879,12.887,12.887,0,0,0,23.0527,5.3457,12.85359,12.85359,0,0,0,19.63046-5.13274c6.33279-.103,11.436-4.68107,11.436-10.33468C472.83354,394.0546,467.61864,389.41919,461.18569,389.41919ZM229.8384,384.07712c-.01359.06241-.02307.12639-.03587.18927-.09447-.00348-.184-.024-.27947-.024a7.70783,7.70783,0,0,0-1.15328.11628c.021-.04661.05055-.08831.07093-.13523A12.88755,12.88755,0,0,0,229.8384,384.07712Zm108.14113-4.3068c-.03776-.15072-.10238-.28927-.14867-.43635a13.00467,13.00467,0,0,0,4.49986-5.46419,12.1173,12.1173,0,0,0,8.9994-4.075,7.78885,7.78885,0,0,0-.15182,1.50559,7.68,7.68,0,0,0,.39306,2.32268,12.98976,12.98976,0,0,0-4.81156,6.30782,12.70178,12.70178,0,0,0-8.78027-.16051Zm77.52384.96513c-.00522-.15862.01453-.32213.0041-.47964a7.72736,7.72736,0,0,0,.98646-.067,12.82884,12.82884,0,0,0,2.46581,4.56779c-.2444.06857-.5016.1098-.73952.19053A7.80593,7.80593,0,0,0,415.50337,380.73545Z" transform="translate(-166.44591 -199.97169)" fill="#f9a825"/><path d="M193.47491,404.94965a27.02565,27.02565,0,0,0-26.98872,28.47756l17.52738,241.02034a27.02449,27.02449,0,0,0,26.98871,25.58076H436.99772a27.02449,27.02449,0,0,0,26.98871-25.58076l17.52738-241.02034a27.02565,27.02565,0,0,0-26.98872-28.47756Z" transform="translate(-166.44591 -199.97169)" fill="#3f3d56"/><rect x="39.78147" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><rect x="83.78442" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><rect x="127.78738" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><rect x="171.79034" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><rect x="215.7933" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><rect x="259.79626" y="204.97796" width="15.53046" height="295.07866" fill="#6c63ff"/><path id="a971f948-84ae-4583-a462-a09341ab7c50" data-name="2572ddba-42e8-4159-9036-35cbff74dfb7" d="M695.14831,283.9783l-6.77-16.49-90.27,37.06a11.15,11.15,0,0,0-6.91,10.31v97.53h17.83v-93.03Z" transform="translate(-166.44591 -199.97169)" fill="#3f3d56"/><g clip-path="url(#a1708186-1525-433e-878d-7c35f03ac629)"><rect x="497.66242" y="49.59661" width="19.44" height="61.56999" fill="#6c63ff"/><rect x="466.88239" y="62.55662" width="19.44" height="61.57001" fill="#6c63ff"/><polygon points="456.342 115.217 442.572 119.267 436.902 53.647 456.342 53.647 456.342 115.217" fill="#6c63ff"/><rect x="406.1124" y="122.50663" width="61.57001" height="19.44" fill="#6c63ff"/><rect x="406.12238" y="149.24662" width="61.57001" height="19.44" fill="#6c63ff"/><rect x="406.1124" y="175.98661" width="61.57001" height="19.44" fill="#6c63ff"/></g><polygon points="497.662 500.057 378.572 500.057 349.402 208.387 523.592 208.387 497.662 500.057" fill="#3f3d56"/><rect x="337.25239" y="203.52662" width="199.29999" height="19.44" fill="#3f3d56"/><circle cx="739.31239" cy="67.17019" r="66.97999" fill="#3ad29f"/><polygon points="783.662 67.17 716.622 100.11 716.622 67.17 716.622 34.23 783.662 67.17" fill="url(#feb2277d-7772-4d61-b1af-dc7db61f73e8)"/><polygon points="779.632 67.17 720.642 96.16 720.642 67.17 720.642 38.18 779.632 67.17" fill="#fff"/><path d="M844.2583,274.83188a67,67,0,0,1,118.62-42.66,67,67,0,1,0-108.77,77.64A66.65991,66.65991,0,0,1,844.2583,274.83188Z" transform="translate(-166.44591 -199.97169)" fill="#fff" opacity="0.2" style="isolation:isolate"/><path d="M893.994,614.78026a2.94921,2.94921,0,0,0-2.94653,2.944v79.36a2.94921,2.94921,0,0,0,2.94653,2.944h136.61352a2.94921,2.94921,0,0,0,2.94653-2.944v-79.36a2.94921,2.94921,0,0,0-2.94653-2.944Z" transform="translate(-166.44591 -199.97169)" fill="#3f3d56"/><path d="M909.26082,621.77888a5.49446,5.49446,0,0,0-5.48809,5.48809v60.27462a5.49447,5.49447,0,0,0,5.48809,5.4881h106.08a5.49447,5.49447,0,0,0,5.4881-5.4881V627.267a5.49447,5.49447,0,0,0-5.4881-5.48809Z" transform="translate(-166.44591 -199.97169)" fill="#ff6584"/><rect x="657.92175" y="440.94978" width="71.16175" height="16.48258" fill="#3f3d56"/><path d="M700.53937,614.78026a2.94869,2.94869,0,0,0-2.944,2.944v79.36a2.94869,2.94869,0,0,0,2.944,2.944h136.616a2.94869,2.94869,0,0,0,2.944-2.944v-79.36a2.94869,2.94869,0,0,0-2.944-2.944Z" transform="translate(-166.44591 -199.97169)" fill="#3f3d56"/><path d="M715.80864,621.77888a5.495,5.495,0,0,0-5.49058,5.48809v60.27462a5.495,5.495,0,0,0,5.49058,5.4881H821.88611a5.495,5.495,0,0,0,5.49057-5.4881V627.267a5.495,5.495,0,0,0-5.49057-5.48809Z" transform="translate(-166.44591 -199.97169)" fill="#6c63ff"/></svg>
\ No newline at end of file
diff --git a/src/web/src/assets/netflix.svg b/src/web/src/assets/netflix.svg
new file mode 100644
index 0000000..c4a279c
--- /dev/null
+++ b/src/web/src/assets/netflix.svg
@@ -0,0 +1 @@
+<svg id="a661a32f-c611-43a1-9e61-6cb14e85c52e" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1004.25325" height="711.94329" viewBox="0 0 1004.25325 711.94329"><title>netflix</title><rect x="713.67413" y="564.64779" width="267.14533" height="1.8747" fill="#3f3d56"/><rect x="784.91288" y="601.20452" width="219.34037" height="1.8747" fill="#3f3d56"/><rect x="838.33386" y="231.23309" width="1.8747" height="335.24432" fill="#3f3d56"/><ellipse cx="839.63279" cy="454.32287" rx="36.55673" ry="83.42433" fill="#3f3d56"/><ellipse cx="839.63279" cy="264.04041" rx="36.55673" ry="83.42433" fill="#3f3d56"/><path d="M938.40415,289.91119l-1.796-.53825c.11351-.379,11.13471-38.14721-6.962-62.46069-10.22116-13.73166-27.76035-20.69452-52.13059-20.69452V204.343c24.9991,0,43.04588,7.21917,53.6396,21.457C949.81211,250.8756,938.5204,289.524,938.40415,289.91119Z" transform="translate(-97.87337 -94.02835)" fill="#3f3d56"/><circle cx="779.64226" cy="111.25203" r="23.4338" fill="#6c63ff"/><path d="M854.2104,634.409H829.83925V610.03782H854.2104ZM831.714,632.53427h20.62174V611.91253H831.714Z" transform="translate(-97.87337 -94.02835)" fill="#3f3d56"/><path d="M268.77321,587.55083c.03061,63.03091-37.43,85.05421-83.6489,85.07666q-1.61038.00078-3.20524-.03441-3.21309-.06775-6.35929-.2897c-41.71554-2.93327-74.13856-26.05266-74.167-84.67126-.02946-60.663,77.46487-137.25616,83.2767-142.9195.00508,0,.00508,0,.01022-.00514.22079-.21584.33379-.32374.33379-.32374S268.7426,524.525,268.77321,587.55083Z" transform="translate(-97.87337 -94.02835)" fill="#6c63ff"/><path d="M182.07361,662.9876l30.58807-42.782-30.66285,47.47688-.07976,4.9106q-3.21309-.06775-6.35929-.2897l3.26709-63.05821-.02589-.48794.05639-.09251.31049-5.95857L148.38179,555.141l30.87633,43.10144.07767,1.26357,2.46809-47.643L155.4448,502.7085l26.67862,40.78177,2.546-98.77765.01006-.32872.00016.32358-.39356,77.8964,26.1969-30.89383-26.3067,37.60225-.67271,42.65959,24.46614-40.95038-24.56066,47.2222-.37372,23.72089,35.50712-57.00243-35.6418,65.27752Z" transform="translate(-97.87337 -94.02835)" fill="#3f3d56"/><rect x="3.60656" y="577.64779" width="158.41249" height="1.8747" fill="#3f3d56"/><rect x="193.57643" y="15.93498" width="431.18193" height="1.8747" fill="#3f3d56"/><circle cx="322.37855" cy="17.80969" r="17.80969" fill="#6c63ff"/><path d="M112.21975,457.25631A11.24823,11.24823,0,1,1,123.468,446.00809,11.26082,11.26082,0,0,1,112.21975,457.25631Zm0-20.62174a9.37352,9.37352,0,1,0,9.37352,9.37352A9.38426,9.38426,0,0,0,112.21975,436.63457Z" transform="translate(-97.87337 -94.02835)" fill="#3f3d56"/><path d="M272.02264,415.02253H247.65149V390.65137h24.37115Zm-22.49645-1.87471h20.62174V392.52608H249.52619Z" transform="translate(-97.87337 -94.02835)" fill="#3f3d56"/><ellipse cx="417.5" cy="645.29893" rx="417.5" ry="9.69734" fill="#3f3d56"/><ellipse cx="417.5" cy="677.37474" rx="289.03846" ry="6.71354" fill="#3f3d56"/><ellipse cx="417.63207" cy="706.46676" rx="235.78148" ry="5.47653" fill="#3f3d56"/><path d="M720.887,562.42307l-1.37248,28.82211,65.8791,21.9597s-3.4312-36.37075-1.37248-39.802Z" transform="translate(-97.87337 -94.02835)" fill="#ffb8b8"/><polygon points="515.96 596.722 509.784 620.74 538.606 620.74 538.606 596.722 515.96 596.722" fill="#ffb8b8"/><polygon points="665.561 603.107 678.599 607.702 685.461 590.471 673.795 581.281 665.561 603.107" fill="#a0616a"/><path d="M786.53848,667.22724s19.44232-2.55431,19.44232,13.91546,2.745,56.958-24.70467,52.15429c0,0-12.35233,1.37248-7.54864-13.03857,0,0,4.89-5.86241,3.13122-9.45049s-12.05235-6.333-10.67987-8.39177,16.46978-18.52849,16.46978-18.52849Z" transform="translate(-97.87337 -94.02835)" fill="#2f2e41"/><path d="M786.76606,609.77368,719.51448,586.4415,715.397,602.91127s-100.87737-58.33045-107.05354-18.5285c0,0-5.48992,32.25331,2.745,74.80023l.68624,34.312s17.156,4.11744,25.3909.68624l.68624-37.057s6.86241-24.01842,3.4312-42.54692c0,0,51.468,40.4882,74.80023,45.29188,0,0-81.66263,63.13414-72.05526,83.03512s21.27346,23.33218,36.37075,19.901c10.404-2.36454,56.98215-39.92561,84.9364-63.05047a79.26085,79.26085,0,0,0,28.93353-65.1925C793.76852,625.45918,791.66778,616.63608,786.76606,609.77368Z" transform="translate(-97.87337 -94.02835)" fill="#2f2e41"/><path d="M612.46094,705.84737s-.68624-8.23489-4.80369-4.80369-18.52849,16.46978-18.52849,16.46978-52.15429,5.72481-20.58722,18.76338a78.2751,78.2751,0,0,0,42.54692-5.48992s35.07469,9.00486,34.35024.26754-8.95934-23.32939-8.95934-23.32939-9.60737,7.04343-20.58722-2.56394Z" transform="translate(-97.87337 -94.02835)" fill="#2f2e41"/><circle cx="650.46321" cy="364.08614" r="25.3909" fill="#ffb8b8"/><path d="M768.9238,459.487s4.11745,20.58722,11.66609,25.3909l-41.86067,49.40933-15.78354-15.0973,11.66609-20.58722s13.03857-7.54864,8.92113-17.84225Z" transform="translate(-97.87337 -94.02835)" fill="#ffb8b8"/><path d="M784.0211,486.9366s30.19459,6.17617,33.62579,26.07715-3.4312,56.27173-3.4312,56.27173L799.80463,676.339s-.68624,45.29188-18.5285,37.74323,4.80369-41.86067,4.80369-41.86067L792.256,604.97s2.745-56.958-2.745-63.82038l-21.9597-6.8624S772.355,488.99533,784.0211,486.9366Z" transform="translate(-97.87337 -94.02835)" fill="#ffb8b8"/><path d="M734.61177,498.60269s-20.58722-.68624-33.62579,15.78354-44.60564,28.82211-44.60564,28.82211l-78.91767,30.88082s-14.41106-25.3909-23.33219-16.46977,16.46978,31.56707,28.13587,28.82211,82.34888-24.01843,82.34888-24.01843l56.27173-25.3909Z" transform="translate(-97.87337 -94.02835)" fill="#ffb8b8"/><path d="M779.526,483.24269s-26.38575,35.261-38.05184,34.57474-3.80884-21.53617-3.80884-21.53617L729.43045,498.34s-11.28845,21.53617-12.66094,22.90866c0,0-16.46977,26.76338,2.05873,32.93955l.68624,14.41105s45.97812-2.05872,65.8791,8.23489l4.11744-35.68452s-26.07714-13.03857-11.66609-38.42947c0,0,5.11229-13.30129,10.60221-14.67377Z" transform="translate(-97.87337 -94.02835)" fill="#3f3d56"/><path d="M786.42294,671.87846,681.42812,748.73741S787.10918,686.28951,786.42294,671.87846Z" transform="translate(-97.87337 -94.02835)" opacity="0.1"/><ellipse cx="676.88348" cy="362.02742" rx="1.98247" ry="4.46056" fill="#ffb8b8"/><path d="M720.34188,444.63s-7.11653-48.06537,43.70451-33.23456c0,0,35.95295-7.3129,48.65151,37.59055l12.88906,47.078-5.89984-3.06592-2.60784,6.00244-9.4156,2.57782-4.20315-7.95848-1.77128,9.79659L724.34188,512.63s34.31466-21.19294,34.15871-57.992l-6.47715,7.11335Z" transform="translate(-97.87337 -94.02835)" fill="#2f2e41"/><path id="bf2f48d4-d76c-43f7-acff-29e29e6968d0" data-name="path4155" d="M546.22228,247.18032l-.19564,109.55741-.19564,109.5574-8.99936-25.433V440.797L525.15856,684.6926c11.47744,32.34552,17.60744,49.6269,17.67265,49.6921s6.58649.45649,14.47723.84775c23.86786,1.17383,53.47445,3.71714,75.97285,6.52128,5.217.65213,9.65148.97819,9.97755.71734s.39127-111.77463.32606-247.87363l-.19564-247.41714h-97.167Z" transform="translate(-97.87337 -94.02835)" fill="#b1060f"/><path id="bfab83f1-a1e5-4c79-84d8-61287c2d74b0" data-name="path4157" d="M370.47394,246.85426v247.678c0,136.22942.13043,247.80842.32606,248.00405s8.60809-.65213,18.78126-1.76075,24.19394-2.5433,31.1717-3.13021c10.69488-.913,42.77955-2.93457,46.43147-2.99979,1.10861,0,1.17383-5.54308,1.30425-104.92729l.19564-104.9273,7.76031,21.91148c1.17384,3.39106,1.56511,4.43447,2.73894,7.76032l11.67307-243.83044c-2.47808-6.97777-1.17383-3.32585-3.978-11.28179-9.52106-26.93286-17.60744-49.69212-17.9335-50.73551l-.65213-1.826H370.47392Z" transform="translate(-97.87337 -94.02835)" fill="#b1060f"/><path id="ed196cf9-a066-4498-9a77-a0c0f8894188" data-name="path5721" d="M370.47394,246.85426,468.61911,524.9866v-.13042l7.76032,21.91148c43.10562,122.013,66.25615,187.48662,66.38657,187.617.06521.06521,6.58649.45649,14.47723.84775,23.86786,1.17383,53.47445,3.71714,75.97284,6.52128,5.15181.65213,9.65149.97819,9.91234.71734L545.831,466.22991v.06521l-8.99936-25.433c-8.80372-24.846-14.67287-41.4753-50.08339-141.51164-9.52107-26.93286-17.60744-49.69212-17.93351-50.73551l-.65212-1.826H419.31828l-48.84434.06522Z" transform="translate(-97.87337 -94.02835)" fill="#e50914"/></svg>
\ No newline at end of file
diff --git a/src/web/src/index.html b/src/web/src/index.html
index 004e9bb..8e4a9d4 100644
--- a/src/web/src/index.html
+++ b/src/web/src/index.html
@@ -1,22 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>Client</title>
-    <base href="/" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      rel="stylesheet"
-    />
-  </head>
-  <body class="">
-    <app-root></app-root>
-  </body>
+    <head>
+        <meta charset="utf-8" />
+        <title>Client</title>
+        <base href="/" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" type="image/x-icon" href="favicon.ico" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+            rel="stylesheet"
+        />
+        <link
+            href="https://fonts.googleapis.com/icon?family=Material+Icons"
+            rel="stylesheet"
+        />
+    </head>
+    <body class="">
+        <app-root></app-root>
+    </body>
 </html>
diff --git a/src/web/src/styles.css b/src/web/src/styles.css
index 46e8be8..071fc51 100644
--- a/src/web/src/styles.css
+++ b/src/web/src/styles.css
@@ -1,5 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
-
+@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&display=swap");
+@import "~bootstrap-icons/font/bootstrap-icons.css";
 html,
 body {
     height: 100%;
@@ -11,13 +12,14 @@ body {
 }
 
 .mat-option {
+    font-family: "Playfair Display", sans-serif;
     height: 115px !important;
-    font-family: cascadia code !important;
     font-size: large !important;
     padding: 10px !important;
 }
 .mat-form-field {
-    font-family: cascadia code !important;
+    font-family: "Playfair Display", sans-serif;
+    font-weight: 500;
     font-size: large !important;
 }
 .mat-form-field-flex {
@@ -53,18 +55,23 @@ body {
     white-space: normal;
 }
 
-.searchitem-text .movie-title {
-    font-size: 23px;
+.search-item-text .movie-title {
+    font-size: 1.5rem;
 }
 
 .rating {
     text-align: center;
 }
-.rating .material-icons {
-    font-size: 2rem;
-    color: yellow;
+.rating div i {
+    color: #ffdc3f;
 }
 
+.rating-content {
+    font-size: 1.5rem;
+}
+.mat-input-element {
+    font-size: x-large !important;
+}
 .mat-autocomplete-panel {
     max-height: 600px !important;
 }
@@ -132,3 +139,32 @@ body {
         flex-direction: column;
     }
 }
+
+.cover-img {
+    -webkit-mask-image: -webkit-gradient(
+        linear,
+        left top,
+        left bottom,
+        from(rgba(0, 0, 0, 1)),
+        to(rgba(0, 0, 0, 0))
+    );
+    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
+}
+
+.theading {
+    color: white;
+    padding: 0px 10px;
+}
+
+a {
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: none;
+}
+
+.icon:hover {
+    color: gray !important;
+    transition: 0.4s;
+}