diff --git a/view/templates/widget/remote_friends_common.tpl b/view/templates/widget/remote_friends_common.tpl
index 74d8e66804..27728fec6a 100644
--- a/view/templates/widget/remote_friends_common.tpl
+++ b/view/templates/widget/remote_friends_common.tpl
@@ -1,18 +1,20 @@
-<div id="remote-friends-in-common" class="bigwidget">
-	<div id="rfic-desc">{{$desc nofilter}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{if $linkmore}}<a href="profile/{{$nickname}}/contacts/common">{{$more}}</a>{{/if}}</div>
-	{{foreach $contacts as $contact}}
-	<div class="profile-match-wrapper">
-		<div class="profile-match-photo">
-			<a href="{{$contact.url}}">
-				<img src="{{$contact.photo}}" width="80" height="80" alt="{{$contact.name}}" title="{{$contact.name}}" />
-			</a>
+<div id="rfic-desc" onclick="openClose('remote-friends-in-common-wrapper');">{{$desc nofilter}}&emsp;&emsp;{{if $linkmore}}<a href="profile/{{$nickname}}/contacts/common">{{$more}}</a>{{/if}}</div>
+	<div id="remote-friends-in-common-wrapper">
+		<div id="remote-friends-in-common" class="bigwidget" >
+			{{foreach $contacts as $contact}}
+			<div class="profile-match-wrapper">
+				<div class="profile-match-photo">
+					<a href="{{$contact.url}}">
+						<img src="{{$contact.photo}}" width="80" height="80" alt="{{$contact.name}}" title="{{$contact.name}}" />
+					</a>
+				</div>
+				<div class="profile-match-break"></div>
+				<div class="profile-match-name">
+					<a href="{{$contact.url}}" title="{{$contact.name}}">{{$contact.name}}</a>
+				</div>
+				<div class="profile-match-end"></div>
+			</div>
+			{{/foreach}}
+			<div id="rfic-end" class="clear"></div>
 		</div>
-		<div class="profile-match-break"></div>
-		<div class="profile-match-name">
-			<a href="{{$contact.url}}" title="{{$contact.name}}">{{$contact.name}}</a>
-		</div>
-		<div class="profile-match-end"></div>
 	</div>
-	{{/foreach}}
-	<div id="rfic-end" class="clear"></div>
-</div>
diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 74fc0001ca..be71399a86 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -2231,6 +2231,8 @@ img.acpopup-img {
 /* Birthday and Event Reminders  */
 #birthday-notice,
 #birthday-wrapper,
+#rfic-desc,
+#remote-friends-in-common,
 #event-notice,
 #event-wrapper {
 	margin-bottom: 5px;
@@ -2241,6 +2243,20 @@ img.acpopup-img {
 	-webkit-box-shadow: 0 0 3px #dadada;
 	-moz-box-shadow: 0 0 3px #dadada;
 	border-radius: 4px;
+	cursor: pointer;
+}
+#remote-friends-in-common {
+	background-color: rgba(247, 247, 247, $contentbg_transp)
+	border-radius: 4px;
+	color: #444;
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	grid-gap: 10px;
+	margin-bottom: 15px;
+	padding: 10px;
+}
+#remote-friends-in-common-wrapper{
+	display: none;
 }
 
 /* Menubar Tabs */
@@ -3489,10 +3505,32 @@ body .tread-wrapper .hovercard:hover .hover-card-content a {
  * some temporary workarounds until this will solved
  * elsewhere (e.g. new templates)
  */
+
 section .profile-match-wrapper {
 	float: left;
 }
 
+.profile-match-photo {
+	align-items: center;
+	display: flex;
+	justify-content: center;
+}
+
+.profile-match-name {
+	align-items: center;
+	display: flex;
+	justify-content: center;
+	text-align: center;
+}
+
+.profile-match-break {
+	display: none;
+}
+
+.profile-match-end {
+	display: none;
+}
+
 /**
  * Login page
  */
diff --git a/view/theme/vier/style.css b/view/theme/vier/style.css
index b2ef72f5f5..3231c7a703 100644
--- a/view/theme/vier/style.css
+++ b/view/theme/vier/style.css
@@ -221,12 +221,20 @@ div.pager {
 	margin-bottom: 5px; */
 }
 
-.birthday-notice, .event-notice {
+.birthday-notice, .event-notice, #rfic-desc {
 	margin-top: 5px;
 	margin-bottom: 5px;
 	background-color: #F5F5F5;
 }
 
+#remote-friends-in-common-wrapper {
+	display: none;
+}
+
+#rfic-desc {
+	cursor: pointer;
+}
+
 #live-network {
 	/* border-bottom: 1px solid #BDCDD4; */
 	border-bottom: 1px solid #D2D2D2;