diff --git a/assets/css/pages/groups/pages/settings.css b/assets/css/pages/groups/pages/settings.css
index 46dd9f1e..36d1251d 100644
--- a/assets/css/pages/groups/pages/settings.css
+++ b/assets/css/pages/groups/pages/settings.css
@@ -20,7 +20,6 @@
 }
 
 .group-settings-container .groupLogoSettingsContainer {
-    margin-top: 100px;
     text-align: center;
 }
 
diff --git a/assets/js/pages/groups/pages/settings.js b/assets/js/pages/groups/pages/settings.js
index 168258fb..15662504 100644
--- a/assets/js/pages/groups/pages/settings.js
+++ b/assets/js/pages/groups/pages/settings.js
@@ -329,18 +329,12 @@ const GroupSettingsPage = {
 		/**
 		 * Group account image
 		 */
-		var groupLogoSettingsContainer = createElem2({
-			appendTo: formContainer,
+		const groupLogoSettingsContainer = createElem2({
+			appendTo: settingsPage,
 			type: "div",
-			class: "groupLogoSettingsContainer"
-		});
+			innerHTML: "<div class='box box-primary'><div class='box-header'><h3 class='box-title'>"+tr("Group logo")+"</h3></div><div class='box-body groupLogoSettingsContainer'></div></di>",
+		}).querySelector(".box-body");
 
-		createElem2({
-			appendTo: groupLogoSettingsContainer,
-			type: "h3",
-			class: "title",
-			innerHTML: "Group logo"
-		});
 
 		//Display group logo (img)
 		var groupLogo = createElem2({