diff --git a/frontend/src/App.css b/frontend/src/App.css
index 45836b1..5459e23 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -25,6 +25,7 @@ body {
   flex-direction: column;
   background-color: #f1f4f5;
   justify-content: space-evenly;
+  
 }
 
 .search-box {
@@ -46,11 +47,14 @@ body {
 .imgBx{
   display: flex;
   justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 80%;
 }
 
 .imgBx img {
-  width:360px;
-  height: 360px;
+  width:100%;
+  height: 100%;
   border: none;
   border-radius: 10px;
   align-items: center;
@@ -435,7 +439,63 @@ background-color: #5773ff;
 }
 
 
-@media(max-width: 1072px) {
+@media(max-width: 1450px) {
+  .player {
+    width: 50vh;
+    height: 80vh; 
+    padding: 20px 14px 8px 14px;
+    border: none;
+    border-top-left-radius: 15px;
+    border-bottom-left-radius: 15px;
+    display: flex;
+    flex-direction: column;
+    background-color: #f1f4f5;
+    justify-content: space-evenly;
+  }
+
+  .search-box {
+    width: 35vh;
+    height: 80vh;
+    max-height: 90vh; 
+    padding: 20px 14px 8px 14px;
+    border: none;
+    border-top-right-radius: 15px;
+    border-bottom-right-radius: 15px;
+    background-color:#e8ecef;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@media(max-width: 1200px) {
+  .player {
+    width: 40vh;
+    height: 60vh; 
+    padding: 20px 14px 8px 14px;
+    border: none;
+    border-top-left-radius: 15px;
+    border-bottom-left-radius: 15px;
+    display: flex;
+    flex-direction: column;
+    background-color: #f1f4f5;
+    justify-content: space-evenly;
+  }
+
+  .search-box {
+    width: 30vh;
+    height: 60vh;
+    max-height: 90vh; 
+    padding: 20px 14px 8px 14px;
+    border: none;
+    border-top-right-radius: 15px;
+    border-bottom-right-radius: 15px;
+    background-color:#e8ecef;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@media(max-width: 980px) {
   .ui {
     width: 100vw;
     padding: 5vh 4vw;