update styling

src/components/playlist/PlaylistViewHeader.tsx

@@ -1,11 +1,17 @@
 import React from 'react';
+import styled from 'styled-components';
 import '../../styles/PlaylistViewHeader.global.css';
 
+const StyledImg = styled.img`
+  border-radius: 85px;
+  box-shadow: 0 0 20px #000;
+`;
+
 const PlaylistViewHeader = ({ name, comment, image, songCount }: any) => {
   return (
     <div id="playlist__header" className="container__playlist">
       <div className="playlist__column_left">
-        <img src={image} alt="playlist-img" />
+        <StyledImg src={image} alt="playlist-img" />
       </div>
       <div className="playlist__column_middle">
         <h1 className="playlist__title">{name}</h1>

src/components/scrollingmenu/ScrollingMenu.tsx

@@ -10,6 +10,7 @@ const ScrollMenuContainer = styled.div`
 `;
 
 const StyledPanel = styled(Panel)`
+  text-align: center;
   width: 150px;
   height: 200px;
   margin: 10px;
@@ -19,7 +20,6 @@ const StyledPanel = styled(Panel)`
 `;
 
 const InfoPanel = styled(Panel)`
-  text-align: center;
   width: 150px;
 `;
 
@@ -27,14 +27,11 @@ const InfoSpan = styled.div`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  width: 150px;
   padding: 0 10px 0px 10px;
 `;
 
 const CardImg = styled.img`
-  width: 150px;
-  height: 150px;
-  object-fit: contain;
+  max-height: 150px;
 `;
 
 const Overlay = styled.div`
@@ -45,7 +42,8 @@ const Overlay = styled.div`
 `;
 
 const Title = styled.h1`
-  font-size: 24px !important;
+  margin-left: 20px;
+  font-size: 20px !important;
 `;
 
 const LeftArrow = () => {