diff --git a/lib/Styles/Adw/Avatar.scss b/lib/Styles/Adw/Avatar.scss
new file mode 100644
index 000000000..e6c936572
--- /dev/null
+++ b/lib/Styles/Adw/Avatar.scss
@@ -0,0 +1,100 @@
+avatar {
+    border-radius: 9999px;
+    box-shadow: 
+        highlight(),
+        shadow(1);
+
+    background-clip: border-box;
+    background-color: #{'@accent_color'};
+    border-color: color-mix(black, transparent, 25%) ;
+    color: color-mix(black, transparent, 50%) ;
+
+    &.color1 {
+        background-color: $BLUEBERRY_300;
+        border-color: rgba($BLUEBERRY_500, 0.5);
+        color: $BLUEBERRY_900;
+    }
+
+    &.color2 {
+        background-color: $BLUEBERRY_100;
+        border-color: rgba($BLUEBERRY_300, 0.5);
+        color: $BLUEBERRY_700;
+    }
+
+    &.color3 {
+        background-color: $MINT_300;
+        border-color: rgba($MINT_500, 0.5);
+        color: $MINT_900;
+    }
+
+    &.color4 {
+        background-color: $LIME_300;
+        border-color: rgba($LIME_500, 0.5);
+        color: $LIME_900;
+    }
+
+    &.color5 {
+        background-color: $BANANA_500;
+        border-color: rgba($BANANA_700, 0.5);
+        color: $BANANA_900;
+    }
+
+    &.color6 {
+        background-color: mix($BANANA_500, $ORANGE_300, $weight: 50%);
+        border-color: rgba(mix($BANANA_700, $ORANGE_500, $weight: 50%), 0.5);
+        color: mix($BANANA_900, $ORANGE_900, $weight: 50%);
+    }
+
+    &.color7 {
+        background-color: $ORANGE_300;
+        border-color: rgba($ORANGE_500, 0.5);
+        color: $ORANGE_900;
+    }
+
+    &.color8 {
+        background-color: $STRAWBERRY_300;
+        border-color: rgba($STRAWBERRY_500, 0.5);
+        color: $STRAWBERRY_900;
+    }
+
+    &.color9 {
+        background-color: $BUBBLEGUM_300;
+        border-color: rgba($BUBBLEGUM_500, 0.5);
+        color: $BUBBLEGUM_900;
+    }
+
+    &.color10 {
+        background-color: $GRAPE_300;
+        border-color: rgba($GRAPE_500, 0.5);
+        color: $GRAPE_900;
+    }
+
+    &.color11 {
+        background-color: mix($BLUEBERRY_700, $GRAPE_300, $weight: 50%);
+        border-color: rgba(mix($BLUEBERRY_700, $GRAPE_500, $weight: 50%), 0.5);
+        color: mix($BLUEBERRY_900, $GRAPE_900, $weight: 50%);
+    }
+
+    &.color12 {
+        background-color: mix($BANANA_100, $COCOA_100, $weight: 50%);
+        border-color: rgba(mix($BANANA_500, $COCOA_500, $weight: 50%), 0.5);
+        color: mix($BANANA_700, $COCOA_900, $weight: 50%);
+    }
+
+    &.color13 {
+        background-color: $COCOA_300;
+        border-color: rgba($COCOA_500, 0.5);
+        color: $COCOA_900;
+    }
+
+    &.color14 {
+        background-color: $SLATE_300;
+        border-color: rgba($SLATE_500, 0.5);
+        color: $SLATE_900;
+    }
+
+    &.image {
+        border-color: $border-color;
+        background: none;
+    }
+}
diff --git a/lib/Styles/Adw/Index.scss b/lib/Styles/Adw/Index.scss
new file mode 100644
index 000000000..b34afec7b
--- /dev/null
+++ b/lib/Styles/Adw/Index.scss
@@ -0,0 +1 @@
+@import 'Avatar.scss';
diff --git a/lib/Styles/Index-dark.scss b/lib/Styles/Index-dark.scss
index 67612f686..4d7fa75c7 100644
--- a/lib/Styles/Index-dark.scss
+++ b/lib/Styles/Index-dark.scss
@@ -49,6 +49,9 @@ $warning-icon-color: $BANANA_500;
 // Gtk Widgets
 // @import 'Gtk/Index.scss';
 
+// Adw widgets
+@import 'Adw/Index.scss';
+
 // Granite widgets
 @import 'Granite/Index.scss';
 
diff --git a/lib/Styles/Index.scss b/lib/Styles/Index.scss
index 3faa7061b..b5d2e91e3 100644
--- a/lib/Styles/Index.scss
+++ b/lib/Styles/Index.scss
@@ -49,6 +49,9 @@ $warning-icon-color: mix($BANANA_500, $BANANA_700, $weight: 50%);
 // Gtk Widgets
 // @import 'Gtk/Index.scss';
 
+// Adw widgets
+@import 'Adw/Index.scss';
+
 // Granite widgets
 @import 'Granite/Index.scss';