diff --git a/projects/common/src/fm/components/avatar/avatar.component.html b/projects/common/src/fm/components/avatar/avatar.component.html
index 013152f..5e2d47e 100644
--- a/projects/common/src/fm/components/avatar/avatar.component.html
+++ b/projects/common/src/fm/components/avatar/avatar.component.html
@@ -1,5 +1,6 @@
 <span class="avatar-container" [title]="name">
 	<ngx-avatar 
+		class="farmmaps-avatar"
 		[src]="src" 
 		[name]="name" 
 		[size]="size"
diff --git a/projects/common/src/fm/components/avatar/avatar.component.css b/projects/common/src/fm/components/avatar/avatar.component.scss
similarity index 75%
rename from projects/common/src/fm/components/avatar/avatar.component.css
rename to projects/common/src/fm/components/avatar/avatar.component.scss
index 43063a0..5193576 100644
--- a/projects/common/src/fm/components/avatar/avatar.component.css
+++ b/projects/common/src/fm/components/avatar/avatar.component.scss
@@ -1,6 +1,7 @@
 .avatar-container {
     position: relative;
 }
+
 .avatar-text {
     position: absolute;
     top: 25px;
@@ -10,4 +11,8 @@
     color: white;
     padding-left: 20px;
     padding-right: 20px;
+}
+
+.farmmaps-avatar /deep/ .avatar-content {
+    vertical-align: top;
 }
\ No newline at end of file
diff --git a/projects/common/src/fm/components/avatar/avatar.component.ts b/projects/common/src/fm/components/avatar/avatar.component.ts
index 5672e66..9b03331 100644
--- a/projects/common/src/fm/components/avatar/avatar.component.ts
+++ b/projects/common/src/fm/components/avatar/avatar.component.ts
@@ -5,7 +5,7 @@ import { AppConfig } from '../../shared/app.config';
 @Component({
   selector: 'fm-avatar',
   templateUrl: './avatar.component.html',
-  styleUrls: ['./avatar.component.css']
+  styleUrls: ['./avatar.component.scss']
 })
 export class AvatarComponent implements OnInit {