diff --git a/angular.json b/angular.json
index dd51ccc..9cc4e64 100644
--- a/angular.json
+++ b/angular.json
@@ -87,5 +87,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }
diff --git a/src/app/app.css b/src/app/app.css
index 84936b0..121c205 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -1,5 +1,6 @@
 main {
     width: 100%;
     margin: 2rem;
-    display: flex;    
+    display: flex;  
+    justify-content: center;  
 }
diff --git a/src/app/pages/potd/potd.html b/src/app/pages/potd/potd.html
index d9aaa80..dd5310d 100644
--- a/src/app/pages/potd/potd.html
+++ b/src/app/pages/potd/potd.html
@@ -1,4 +1,4 @@
-<div class="card bg-base-100 w-96 shadow-sm">
+<!-- <div class="card bg-base-100 w-96 shadow-sm">
     <div class="card-body">
       <h2 class="card-title">{{nasaPOTD()?.title}}</h2>
       <p>{{nasaPOTD()?.explanation}}</p>
@@ -8,4 +8,22 @@
         src={{nasaPOTD()?.url}}
         alt="Nasa picture of the day" />
     </figure>
-  </div>
\ No newline at end of file
+  </div> -->
+
+<div class="hero bg-base-200 min-h-screen">
+  <div class="hero-content flex-col lg:flex-col">
+    <img
+      src={{nasaPOTD()?.url}}
+      class="max-w-mid rounded-lg shadow-2xl"
+    />
+    <div>
+      <h1 class="text-5xl font-bold">{{nasaPOTD()?.title}}</h1>
+      <p class="text-2x2 font-semibold">Copyright: {{nasaPOTD()?.copyright}}</p>
+      <p class="py-6">
+        {{nasaPOTD()?.explanation}}
+      </p>
+      <!-- TODO: button to erase or find a usage -->
+      <!-- <button class="btn btn-primary">Get Started</button> -->
+    </div>
+  </div>
+</div>
diff --git a/src/app/pages/search/search.css b/src/app/pages/search/search.css
index 416f8a7..6d2572b 100644
--- a/src/app/pages/search/search.css
+++ b/src/app/pages/search/search.css
@@ -1,5 +1,5 @@
 .searchcontainer {
-    width:100vw;  
+    width:80vw;  
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -8,5 +8,7 @@
 }
 
 .inputSearch {
-    margin-bottom: 1rem;  
+    margin-bottom: 1rem; 
+    display: flex;
+    flex-direction: row; 
 }
\ No newline at end of file
diff --git a/src/app/pages/search/search.html b/src/app/pages/search/search.html
index 0e37296..d1a3fde 100644
--- a/src/app/pages/search/search.html
+++ b/src/app/pages/search/search.html
@@ -24,26 +24,30 @@
   <button class="btn">Submit</button>
 </form>
 
+@if(searchResults()!==null && searchResults()!.collection.items.length==0){
+  <div class="resultsContainer">
+    <p>No results for this search</p>
+  </div>
+}
 
-
-
+@if(searchResults()!==null && searchResults()!.collection.items.length!==0){
   <div class="resultsContainer">
     <ul class="list bg-base-100 rounded-box shadow-md">
   
       <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Results</li>
             <!-- TODO why the fuck is nasaData an array?-->
-            @if(searchResults()!==null){
+            
               @for(el of searchResults()!.collection.items; track el.data[0].nasa_id){
                 <li class="list-row">
                   <!-- 2 for small image -->
-                  <div><img class="size-10 rounded-box" src="{{el.links[1].href}}"/></div>
+                  <div><a><img class="size-25 rounded-box" src="{{el.links[1].href}}"/></a></div>
                   <div>
                     <div>{{el.data[0].title}}</div>
                     <div class="text-xs uppercase font-semibold opacity-60">Photographer: {{el.data[0].photographer}}</div>
-                  </div>
-                  <p class="list-col-wrap text-xs">
+                    <p class="list-col-wrap text-xs">
                     {{el.data[0].description}}
                   </p>
+                  </div>                  
                   <button class="btn btn-square btn-ghost" (click)="onClick(el.data[0].nasa_id)">
                     <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
                   </button>
@@ -51,9 +55,9 @@
                     <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
                   </button> -->
                 </li>                   
-              }
-            }       
+              }                
 
     </ul>    
   </div>
+  }  
 </div>
diff --git a/src/app/pages/video/video.html b/src/app/pages/video/video.html
index f8e4bd5..431a331 100644
--- a/src/app/pages/video/video.html
+++ b/src/app/pages/video/video.html
@@ -1,5 +1,18 @@
-<p></p>
-<video width="320" height="240" controls>
+@if(isLoading()){
+<div class="spinner">
+  <span class="loading loading-spinner loading-xl"></span>
+  <p>Chargement de la vidéo...</p>
+</div>
+}
+@if(!isLoading() && asset()){
+<div class="videocontainer">
+  <video width="320" height="240" controls>
     <source src="{{asset()!.items[3].href}}" type="video/mp4">
-  Your browser does not support the video tag.
-</video> 
\ No newline at end of file
+    Your browser does not support the video tag.
+  </video>
+</div>
+}
+
+@if(!isLoading() && !asset()){
+  <p>Impossible de charger la vidéo.</p>
+}
\ No newline at end of file
diff --git a/src/app/pages/video/video.ts b/src/app/pages/video/video.ts
index 9950ab0..6b6b504 100644
--- a/src/app/pages/video/video.ts
+++ b/src/app/pages/video/video.ts
@@ -14,22 +14,22 @@ export class Video {
   asset=signal<Collection|null>(null);
   //TODO: nom de merde pour le service a changer
   private nasaApi: NAPOD = inject(NAPOD)
-  
+  isLoading = signal<boolean>(true);
+
   ngOnInit(){
     const nasaId=this.route.snapshot.params['id'];
 
     this.nasaApi.getAssetDetail(nasaId).subscribe({
       next: (data)=>{
         this.asset.set(data.collection);
+        this.isLoading.set(false); 
         console.log(this.asset());
         
       },
       error: error =>{
-        console.log(error);        
+        console.log(error);
+        this.isLoading.set(false);         
       }
     })
   }
-
-
-
 }