diff --git a/crates/ezidam/templates/pages/oauth/authorize.html.tera b/crates/ezidam/templates/pages/oauth/authorize.html.tera
index 91b143b..ca16672 100644
--- a/crates/ezidam/templates/pages/oauth/authorize.html.tera
+++ b/crates/ezidam/templates/pages/oauth/authorize.html.tera
@@ -1,5 +1,7 @@
 {% extends "base" %}
 
+{% import "utils/avatar" as avatar %}
+
 {% block page %}
 <body class=" d-flex flex-column">
 <script src="/js/demo-theme.min.js"></script>
@@ -25,8 +27,7 @@
                     <form action="" method="post" autocomplete="off" novalidate class="mt-4">
                         {% if user %}
                         <div class="mb-4 text-center">
-                            <span class="avatar avatar-xl mb-3"
-                                  style="background-image: url(/avatar/{{ user.sub }}?size=250)"></span>
+                            {{ avatar::avatar(username=user.username, name=user.name, size="xl", css="mb-3") }}
                             <h3>
                                 {% if user.name %}
                                 {{ user.name }}
diff --git a/crates/ezidam/templates/pages/oauth/redirect.html.tera b/crates/ezidam/templates/pages/oauth/redirect.html.tera
index 4ae3469..f2cc3f3 100644
--- a/crates/ezidam/templates/pages/oauth/redirect.html.tera
+++ b/crates/ezidam/templates/pages/oauth/redirect.html.tera
@@ -1,5 +1,7 @@
 {% extends "base" %}
 
+{% import "utils/avatar" as avatar %}
+
 {% block page %}
 <body class=" d-flex flex-column">
 <script src="/js/demo-theme.min.js"></script>
@@ -17,8 +19,7 @@
                             <p class="text-muted">Preparing application</p>
                         </div>
                         <div class="mb-4">
-                            <span class="avatar avatar-xl mb-3"
-                                  style="background-image: url(/avatar/{{ user_id }}?size=250)"></span>
+                            {{ avatar::avatar(username=username, name=name, size="xl", css="mb-3") }}
                             <h3>
                                 {% if name %}
                                 {{ name }}
diff --git a/crates/ezidam/templates/shell.html.tera b/crates/ezidam/templates/shell.html.tera
index bb42643..15ab6cb 100644
--- a/crates/ezidam/templates/shell.html.tera
+++ b/crates/ezidam/templates/shell.html.tera
@@ -1,4 +1,7 @@
 {% extends "base" %}
+
+{% import "utils/avatar" as avatar %}
+
 {% block page %}
 <body>
 <script src="/js/demo-theme.min.js"></script>
diff --git a/crates/ezidam/templates/shell/header.html.tera b/crates/ezidam/templates/shell/header.html.tera
index 4f23f15..765068e 100644
--- a/crates/ezidam/templates/shell/header.html.tera
+++ b/crates/ezidam/templates/shell/header.html.tera
@@ -11,8 +11,7 @@
             <div class="nav-item dropdown">
                 <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown"
                    aria-label="Open user menu">
-                    <span class="avatar avatar-sm"
-                          style="background-image: url(/avatar/{{ user.sub }}?size=250)"></span>
+                    {{ avatar::avatar(username=user.username, name=user.name, size="sm", css="") }}
                     <div class="d-none d-xl-block ps-2">
                         {% if user.name %}
                         <div>{{ user.name }}</div>
diff --git a/crates/ezidam/templates/utils/avatar.html.tera b/crates/ezidam/templates/utils/avatar.html.tera
new file mode 100644
index 0000000..fe164b2
--- /dev/null
+++ b/crates/ezidam/templates/utils/avatar.html.tera
@@ -0,0 +1,23 @@
+{% macro avatar(username, name, size, css) %}
+
+{% if name %}
+
+{% set name_array = name | split(pat=" ") %}
+{% set first_name_array = name_array | first | split(pat="") %}
+{% set last_name_array = name_array | last | split(pat="") %}
+
+{% set avatar = first_name_array[1] ~ last_name_array[1] %}
+
+{% else %}
+
+{% set username_array = username | split(pat="") %}
+{% set username_array_rev = username_array | reverse %}
+
+{% set avatar = username_array[1] ~ username_array_rev[1] %}
+
+{% endif %}
+
+<span class="avatar avatar-{{ size }} {{ css }}">
+    {{ avatar }}
+</span>
+{% endmacro avatar %}
