diff --git a/backend/apimanager/initialize_data.py b/backend/apimanager/initialize_data.py
index d68fb40..3756f5e 100644
--- a/backend/apimanager/initialize_data.py
+++ b/backend/apimanager/initialize_data.py
@@ -3,6 +3,6 @@ userdata = {
 	"intro_content": "<p>Write something about yourself</p>",
 	"profile_photo": "",
 	"default_theme": "darkTheme",
-	"dark_theme": "{\"theme\": \"Dark Mode\",\"background\": \"bg-dark\",\"textColor\": \"text-white\",\"linkBackground\": \"bg-light\",\"linkTextColor\": \"text-black\",\"captionColor\": \"#8a8a8a\",\"fontAwesomeIcon\": \"faSun\",\"borderColor\": \"secondary\",\"buttonColor\": \"light\",\"navBar\": {\"navBarTheme\": \"navbar-dark\",\"background\": \"bg-secondary\",\"buttonColor\": \"light\"},\"footer\": {\"background\": \"bg-secondary\",\"text\": \"text-black\"}}",
-	"light_theme": "{\"theme\": \"Light Mode\",\"background\": \"bg-light\",\"textColor\": \"text-black\",\"linkBackground\": \"bg-dark\",\"linkTextColor\": \"text-white\",\"captionColor\": \"#605f5f\",\"fontAwesomeIcon\": \"faMoon\",\"borderColor\": \"secondary\",\"buttonColor\": \"dark\",\"navBar\": {\"navBarTheme\": \"navbar-light\",\"background\": \"bg-secondary\",\"buttonColor\": \"light\"},\"footer\": {\"background\": \"bg-secondary\",\"text\": \"text-white\"}}"
+	"dark_theme": "{\"theme\": \"Dark Mode\",\"background\": \"bg-dark\",\"textColor\": \"text-white\",\"linkBackground\": \"bg-light\",\"linkTextColor\": \"text-black\",\"captionColor\": \"#8a8a8a\",\"fontAwesomeIcon\": \"faSun\",\"borderColor\": \"border-light\",\"buttonColor\": \"light\",\"navBar\": {\"navBarTheme\": \"navbar-dark\",\"background\": \"bg-secondary\",\"buttonColor\": \"light\"},\"footer\": {\"background\": \"bg-secondary\",\"text\": \"text-white\"}}",
+	"light_theme": "{\"theme\": \"Light Mode\",\"background\": \"bg-light\",\"textColor\": \"text-black\",\"linkBackground\": \"bg-dark\",\"linkTextColor\": \"text-white\",\"captionColor\": \"#605f5f\",\"fontAwesomeIcon\": \"faMoon\",\"borderColor\": \"border-secondary\",\"buttonColor\": \"dark\",\"navBar\": {\"navBarTheme\": \"navbar-light\",\"background\": \"bg-secondary\",\"buttonColor\": \"light\"},\"footer\": {\"background\": \"bg-secondary\",\"text\": \"text-black\"}}"
 }
\ No newline at end of file
diff --git a/backend/apimanager/media_views.py b/backend/apimanager/media_views.py
index 266ca68..b61bc9f 100644
--- a/backend/apimanager/media_views.py
+++ b/backend/apimanager/media_views.py
@@ -49,9 +49,10 @@ class MediaUpload(APIView):
                 else:
                     file_path = f"{file_path_base}/{resource_type}/media/{file_unique_slug+resource_id+f.name}"
 
-                # Reduce image quality if the file is an image
+                # Reduce image quality if the file is an images
+                print(f.content_type)
                 if f.content_type.startswith('image'):
-                    reduced_image = self.reduce_image_quality(f, quality=65)
+                    reduced_image = self.reduce_image_quality(f, quality=40)
                     default_storage.save(file_path, reduced_image)
                 else:
                     # Save non-image files directly
diff --git a/backend/apimanager/migrations/0013_auto_20240609_1447.py b/backend/apimanager/migrations/0013_auto_20240609_1447.py
index 0e6a6ef..4f3d7d8 100644
--- a/backend/apimanager/migrations/0013_auto_20240609_1447.py
+++ b/backend/apimanager/migrations/0013_auto_20240609_1447.py
@@ -7,8 +7,8 @@ def add_initial_values(apps, schema_editor):
         "intro_content": "<p>Write something about yourself</p>",
         "profile_photo": "",
         "default_theme": "darkTheme",
-        "dark_theme": "{\"theme\": \"Dark Mode\",\"background\": \"bg-dark\",\"textColor\": \"text-white\",\"linkBackground\": \"bg-light\",\"linkTextColor\": \"text-black\",\"captionColor\": \"#8a8a8a\",\"fontAwesomeIcon\": \"faSun\",\"borderColor\": \"secondary\",\"buttonColor\": \"light\",\"navBar\": {\"navBarTheme\": \"navbar-dark\",\"background\": \"bg-secondary\",\"buttonColor\": \"light\"},\"footer\": {\"background\": \"bg-secondary\",\"text\": \"text-black\"}}",
-        "light_theme": "{\"theme\": \"Light Mode\",\"background\": \"bg-light\",\"textColor\": \"text-black\",\"linkBackground\": \"bg-dark\",\"linkTextColor\": \"text-white\",\"captionColor\": \"#605f5f\",\"fontAwesomeIcon\": \"faMoon\",\"borderColor\": \"secondary\",\"buttonColor\": \"dark\",\"navBar\": {\"navBarTheme\": \"navbar-light\",\"background\": \"bg-secondary\",\"buttonColor\": \"light\"},\"footer\": {\"background\": \"bg-secondary\",\"text\": \"text-white\"}}"
+        "dark_theme": "{\"theme\": \"Dark Mode\",\"background\": \"bg-dark\",\"textColor\": \"text-white\",\"linkBackground\": \"bg-light\",\"linkTextColor\": \"text-black\",\"captionColor\": \"#8a8a8a\",\"fontAwesomeIcon\": \"faSun\",\"borderColor\": \"border-light\",\"buttonColor\": \"light\",\"navBar\": {\"navBarTheme\": \"navbar-dark\",\"background\": \"bg-secondary\",\"buttonColor\": \"light\"},\"footer\": {\"background\": \"bg-secondary\",\"text\": \"text-white\"}}",
+        "light_theme": "{\"theme\": \"Light Mode\",\"background\": \"bg-light\",\"textColor\": \"text-black\",\"linkBackground\": \"bg-dark\",\"linkTextColor\": \"text-white\",\"captionColor\": \"#605f5f\",\"fontAwesomeIcon\": \"faMoon\",\"borderColor\": \"border-secondary\",\"buttonColor\": \"dark\",\"navBar\": {\"navBarTheme\": \"navbar-light\",\"background\": \"bg-secondary\",\"buttonColor\": \"light\"},\"footer\": {\"background\": \"bg-secondary\",\"text\": \"text-black\"}}"
     }
     UserData = apps.get_model('apimanager', 'userdata')
     UserData.objects.create(
diff --git a/frontend/editable-ui/src/components/blog.jsx b/frontend/editable-ui/src/components/blog.jsx
index aee3bb1..7d64151 100755
--- a/frontend/editable-ui/src/components/blog.jsx
+++ b/frontend/editable-ui/src/components/blog.jsx
@@ -110,7 +110,8 @@ function Blog(props) {
                 <img
                   src={EditableMediaService.getMedia(blogData.coverImage)}
                   alt='Banner'
-                  style={{ width: '100%', height: 'auto', maxHeight: '20vh', objectFit: 'cover' }}
+                  className='rounded'
+                  style={{ width: '100%', height: 'auto', maxHeight: '50vh', objectFit: 'cover' }}
                 />:''
             }
           </Col>
diff --git a/frontend/editable-ui/src/components/shared/card-list-viewer.jsx b/frontend/editable-ui/src/components/shared/card-list-viewer.jsx
index aa24b9c..8a08416 100755
--- a/frontend/editable-ui/src/components/shared/card-list-viewer.jsx
+++ b/frontend/editable-ui/src/components/shared/card-list-viewer.jsx
@@ -72,7 +72,7 @@ function CardListViewer(props) {
       return (
         <>
           <ModalComponent modalText={modalText} modalTitle={modalTitle} modal={modal} toggle={toggle} confirmAction={deleteResource}/>
-          <Card color={props.borderColor} outline className={`my-2 ${props.bgColor}`} style={{'width': props.cardType === 'smallCard' ? '18rem': '100%'}}>
+          <Card outline className={`my-2 ${props.borderColor} ${props.bgColor}`} style={{'width': props.cardType === 'smallCard' ? '18rem': '100%'}}>
             <CardBody>
               <CardTitle className={`mb-3 ${props.textColor}`} tag='h5'>
                 <InputGroup>
@@ -123,7 +123,7 @@ function CardListViewer(props) {
       )
     else
       return (
-        <Card color={props.borderColor} outline className={`my-2 ${props.bgColor}`} style={{'width': props.cardType === 'smallCard' ? '18rem': '100%'}}>
+        <Card outline className={`my-2  ${props.borderColor} ${props.bgColor}`} style={{'width': props.cardType === 'smallCard' ? '18rem': '100%'}}>
           {itemObject.coverImage !== '' ? <CardImg src={EditableMediaService.getMedia(itemObject.coverImage)} style={{ 'height': '180px', 'objectFit': 'cover' }} top width='100%' /> : ''}
           <CardBody>
             <Link to={`/${props.resourceType}/${itemObject.id}`}>
diff --git a/frontend/viewable-ui/src/components/blog.jsx b/frontend/viewable-ui/src/components/blog.jsx
index 42c0de5..b59f2ee 100755
--- a/frontend/viewable-ui/src/components/blog.jsx
+++ b/frontend/viewable-ui/src/components/blog.jsx
@@ -69,7 +69,8 @@ function Blog(props) {
                 <img
                   src={MediaService.getMedia(blogData.coverImage)}
                   alt="Banner"
-                  style={{ width: '100%', height: 'auto', maxHeight: '20vh', objectFit: 'cover' }}
+                  className='rounded'
+                  style={{ width: '100%', height: 'auto', maxHeight: '50vh', objectFit: 'cover' }}
                 />:''
             }
           </Col>
diff --git a/frontend/viewable-ui/src/components/shared/card-list-viewer.jsx b/frontend/viewable-ui/src/components/shared/card-list-viewer.jsx
index 2875146..320800d 100755
--- a/frontend/viewable-ui/src/components/shared/card-list-viewer.jsx
+++ b/frontend/viewable-ui/src/components/shared/card-list-viewer.jsx
@@ -14,10 +14,10 @@ function CardListViewer(props) {
 
   if (props.totalItems > 0 && itemObject && Object.keys(itemObject).length !== 0)
     return (
-      <Card color={props.borderColor} outline className={`my-2 ${props.bgColor}`} style={{'width': props.cardType === 'smallCard' ? '18rem': '100%'}}>
-        {itemObject.coverImage ? <CardImg src={MediaService.getMedia(itemObject.coverImage)} style={{ 'height': '180px', 'objectFit': 'cover' }} top width='100%' /> : ''}
-        <CardBody>
-          <Link to={`/${props.resourceType}/${itemObject.id}`}>
+      <Card outline className={`my-2 ${props.borderColor} ${props.bgColor}`} style={{'width': props.cardType === 'smallCard' ? '18rem': '100%'}}>
+        <Link to={`/${props.resourceType}/${itemObject.id}`}>
+          {itemObject.coverImage ? <CardImg src={MediaService.getMedia(itemObject.coverImage)} style={{ 'height': '180px', 'objectFit': 'cover' }} top width='100%' /> : ''}
+          <CardBody>
             <CardTitle className={`${props.textColor}`} tag='h5'>
               {itemObject.name}
             </CardTitle>
@@ -29,8 +29,8 @@ function CardListViewer(props) {
                 {itemObject.tagLine}
               </small>
             </CardText>
-          </Link>
-        </CardBody>
+          </CardBody>
+        </Link>
       </Card>
     )
   else