diff --git a/androidApp/src/main/java/bou/amine/apps/readerforselfossv2/android/utils/CircleImageView.kt b/androidApp/src/main/java/bou/amine/apps/readerforselfossv2/android/utils/CircleImageView.kt
new file mode 100644
index 0000000..2ebd1d4
--- /dev/null
+++ b/androidApp/src/main/java/bou/amine/apps/readerforselfossv2/android/utils/CircleImageView.kt
@@ -0,0 +1,61 @@
+package bou.amine.apps.readerforselfossv2.android.utils
+
+import android.content.Context
+import android.graphics.drawable.GradientDrawable
+import android.util.AttributeSet
+import android.view.LayoutInflater
+import android.view.View
+import android.widget.RelativeLayout
+import android.widget.TextView
+import bou.amine.apps.readerforselfossv2.android.R
+import com.google.android.material.imageview.ShapeableImageView
+import kotlin.math.abs
+
+class CircleImageView @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null,
+    defStyleAttr: Int = 0
+) : RelativeLayout(context, attrs, defStyleAttr) {
+    val view: View
+    val imageView: ShapeableImageView
+    val textView: TextView
+
+    private val colorScheme = listOf(
+    -0x1a8c8d,
+    -0xf9d6e,
+    -0x459738,
+    -0x6a8a33,
+    -0x867935,
+    -0x9b4a0a,
+    -0xb03c09,
+    -0xb22f1f,
+    -0xb24954,
+    -0x7e387c,
+    -0x512a7f,
+    -0x759b,
+    -0x2b1ea9,
+    -0x2ab1,
+    -0x48b3,
+    -0x5e7781,
+    -0x6f5b52
+    )
+
+    init {
+        view = LayoutInflater.from(context).inflate(R.layout.circle_image_view, this, true)
+        imageView = view.findViewById(R.id.circleImage)
+        textView = view.findViewById(R.id.circleText)
+    }
+
+    fun setBackgroundAndText(colorIdentifier: String, text: String) {
+        val circleDrawable = GradientDrawable()
+        val color = colorFromIdentifier(colorIdentifier)
+        circleDrawable.setColor(color)
+        imageView.setImageDrawable(circleDrawable)
+
+        textView.text = text
+    }
+
+    private fun colorFromIdentifier(key: String): Int {
+        return colorScheme[abs(key.hashCode()) % colorScheme.size]
+    }
+}
\ No newline at end of file
diff --git a/androidApp/src/main/res/layout/circle_image_view.xml b/androidApp/src/main/res/layout/circle_image_view.xml
new file mode 100644
index 0000000..040361b
--- /dev/null
+++ b/androidApp/src/main/res/layout/circle_image_view.xml
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content">
+
+    <com.google.android.material.imageview.ShapeableImageView
+        android:id="@+id/circleImage"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:scaleType="centerCrop"
+        app:shapeAppearanceOverlay="@style/circleImageView"
+        app:srcCompat="@drawable/background_splash" />
+
+    <TextView
+        android:id="@+id/circleText"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:ellipsize="none"
+        android:gravity="center"
+        android:singleLine="true"
+        android:textColor="@color/white"
+        android:textIsSelectable="false"
+        android:textSize="20sp"
+        android:typeface="normal" />
+</RelativeLayout>
diff --git a/androidApp/src/main/res/values/styles.xml b/androidApp/src/main/res/values/styles.xml
index 9ba9049..166644e 100644
--- a/androidApp/src/main/res/values/styles.xml
+++ b/androidApp/src/main/res/values/styles.xml
@@ -32,4 +32,10 @@
         <item name="android:colorBackgroundCacheHint">@null</item>
         <item name="android:windowIsTranslucent">true</item>
     </style>
+
+    <style name="circleImageView" parent="">
+        <item name="cornerFamily">rounded</item>
+        <item name="cornerSize">50%</item>
+    </style>
+
 </resources>