diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
index ff49b3831..ffee00cd2 100644
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@@ -1,5 +1,8 @@
 <component name="ProjectCodeStyleConfiguration">
   <code_scheme name="Project" version="173">
+    <AndroidXmlCodeStyleSettings>
+      <option name="ARRANGEMENT_SETTINGS_MIGRATED_TO_191" value="true" />
+    </AndroidXmlCodeStyleSettings>
     <JavaCodeStyleSettings>
       <option name="FIELD_NAME_PREFIX" value="m" />
       <option name="STATIC_FIELD_NAME_PREFIX" value="s" />
@@ -59,6 +62,7 @@
               <match>
                 <AND>
                   <NAME>xmlns:android</NAME>
+                  <XML_ATTRIBUTE />
                   <XML_NAMESPACE>^$</XML_NAMESPACE>
                 </AND>
               </match>
@@ -69,6 +73,7 @@
               <match>
                 <AND>
                   <NAME>xmlns:.*</NAME>
+                  <XML_ATTRIBUTE />
                   <XML_NAMESPACE>^$</XML_NAMESPACE>
                 </AND>
               </match>
@@ -80,6 +85,7 @@
               <match>
                 <AND>
                   <NAME>.*:id</NAME>
+                  <XML_ATTRIBUTE />
                   <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
                 </AND>
               </match>
@@ -90,6 +96,7 @@
               <match>
                 <AND>
                   <NAME>.*:name</NAME>
+                  <XML_ATTRIBUTE />
                   <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
                 </AND>
               </match>
@@ -100,6 +107,7 @@
               <match>
                 <AND>
                   <NAME>name</NAME>
+                  <XML_ATTRIBUTE />
                   <XML_NAMESPACE>^$</XML_NAMESPACE>
                 </AND>
               </match>
@@ -110,6 +118,7 @@
               <match>
                 <AND>
                   <NAME>style</NAME>
+                  <XML_ATTRIBUTE />
                   <XML_NAMESPACE>^$</XML_NAMESPACE>
                 </AND>
               </match>
@@ -120,74 +129,23 @@
               <match>
                 <AND>
                   <NAME>.*</NAME>
+                  <XML_ATTRIBUTE />
                   <XML_NAMESPACE>^$</XML_NAMESPACE>
                 </AND>
               </match>
               <order>BY_NAME</order>
             </rule>
           </section>
-          <section>
-            <rule>
-              <match>
-                <AND>
-                  <NAME>.*:layout_width</NAME>
-                  <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
-                </AND>
-              </match>
-            </rule>
-          </section>
-          <section>
-            <rule>
-              <match>
-                <AND>
-                  <NAME>.*:layout_height</NAME>
-                  <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
-                </AND>
-              </match>
-            </rule>
-          </section>
-          <section>
-            <rule>
-              <match>
-                <AND>
-                  <NAME>.*:layout_.*</NAME>
-                  <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
-                </AND>
-              </match>
-              <order>BY_NAME</order>
-            </rule>
-          </section>
-          <section>
-            <rule>
-              <match>
-                <AND>
-                  <NAME>.*:width</NAME>
-                  <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
-                </AND>
-              </match>
-              <order>BY_NAME</order>
-            </rule>
-          </section>
-          <section>
-            <rule>
-              <match>
-                <AND>
-                  <NAME>.*:height</NAME>
-                  <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
-                </AND>
-              </match>
-              <order>BY_NAME</order>
-            </rule>
-          </section>
           <section>
             <rule>
               <match>
                 <AND>
                   <NAME>.*</NAME>
+                  <XML_ATTRIBUTE />
                   <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
                 </AND>
               </match>
-              <order>BY_NAME</order>
+              <order>ANDROID_ATTRIBUTE_ORDER</order>
             </rule>
           </section>
           <section>
@@ -195,6 +153,7 @@
               <match>
                 <AND>
                   <NAME>.*</NAME>
+                  <XML_ATTRIBUTE />
                   <XML_NAMESPACE>.*</XML_NAMESPACE>
                 </AND>
               </match>
diff --git a/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt b/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
index 5819fc20b..8852cce64 100644
--- a/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
+++ b/app/src/main/java/com/automattic/portkey/compose/emoji/EmojiPickerFragment.kt
@@ -8,11 +8,13 @@ import android.view.ViewGroup
 import android.widget.TextView
 import androidx.coordinatorlayout.widget.CoordinatorLayout
 import androidx.core.content.ContextCompat
+import androidx.emoji.text.EmojiCompat
 import androidx.recyclerview.widget.GridLayoutManager
 import androidx.recyclerview.widget.RecyclerView
 import com.automattic.photoeditor.PhotoEditor
 import com.automattic.portkey.R
 import com.automattic.portkey.compose.hideStatusBar
+import com.automattic.portkey.util.getDisplayPixelWidth
 import com.google.android.material.bottomsheet.BottomSheetBehavior
 import com.google.android.material.bottomsheet.BottomSheetDialogFragment
 import kotlinx.android.synthetic.main.fragment_bottom_sticker_emoji_dialog.view.*
@@ -20,6 +22,7 @@ import kotlinx.android.synthetic.main.row_emoji.view.*
 
 class EmojiPickerFragment : BottomSheetDialogFragment() {
     private var listener: EmojiListener? = null
+    private var emojiViewWidth: Int? = null
 
     private val bottomSheetBehaviorCallback = object : BottomSheetBehavior.BottomSheetCallback() {
         override fun onStateChanged(bottomSheet: View, newState: Int) {
@@ -44,6 +47,25 @@ class EmojiPickerFragment : BottomSheetDialogFragment() {
     override fun onResume() {
         super.onResume()
         dialog?.window?.let { hideStatusBar(it) }
+        context?.let {
+            emojiViewWidth = getEmojiViewWidthForScreenWidthAndColumns(getDisplayPixelWidth(it), COLUMNS)
+        }
+    }
+
+    private fun getEmojiViewWidthForScreenWidthAndColumns(screenWidth: Int, columns: Int): Int {
+        // let's calculate the emoji view width here, given the dialog may be displayed while the user goes
+        // out to change the fontSize manually in Settings -> Accessibility
+        val itemPadding = resources.getDimension(R.dimen.emoji_picker_item_padding) / resources.displayMetrics.density
+        val itemMargin = resources.getDimension(R.dimen.emoji_picker_item_margin) / resources.displayMetrics.density
+        val startEndMargin =
+            resources.getDimension(R.dimen.emoji_picker_whole_list_side_margin) / resources.displayMetrics.density
+
+        val wholeListTakenSpace = (itemPadding * 2) + (itemMargin * 2) + (startEndMargin * 2)
+
+        val remainingScreenOperatingSpace = screenWidth - wholeListTakenSpace
+        val maxEmojiWidth = remainingScreenOperatingSpace / columns
+
+        return maxEmojiWidth.toInt()
     }
 
     @SuppressLint("RestrictedApi")
@@ -71,11 +93,33 @@ class EmojiPickerFragment : BottomSheetDialogFragment() {
     inner class EmojiAdapter(internal val emojiList: List<String>) : RecyclerView.Adapter<EmojiAdapter.ViewHolder>() {
         override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
             val view = LayoutInflater.from(parent.context).inflate(R.layout.row_emoji, parent, false)
+            emojiViewWidth?.let {
+                val params = view.layoutParams
+                // Changes the height and width to the specified dp
+                params.height = it
+                params.width = it
+                view.layoutParams = params
+            }
             return ViewHolder(view)
         }
 
         override fun onBindViewHolder(holder: ViewHolder, position: Int) {
-            holder.txtEmojiRef.text = emojiList[position]
+            // use EmojiCompat to process the string and make sure we have an emoji that can be rendered
+            EmojiCompat.get().registerInitCallback(object : EmojiCompat.InitCallback() {
+                override fun onInitialized() {
+                    EmojiCompat.get().unregisterInitCallback(this)
+
+                    val compat = EmojiCompat.get()
+                    holder.txtEmojiRef.text = compat.process(emojiList[position])
+                }
+
+                override fun onFailed(throwable: Throwable?) {
+                    EmojiCompat.get().unregisterInitCallback(this)
+
+                    // just fallback to setting the text
+                    holder.txtEmojiRef.text = emojiList[position]
+                }
+            })
         }
 
         override fun getItemCount(): Int {
diff --git a/app/src/main/res/layout/fragment_bottom_sticker_emoji_dialog.xml b/app/src/main/res/layout/fragment_bottom_sticker_emoji_dialog.xml
index f7c6d0007..9893fcc0f 100644
--- a/app/src/main/res/layout/fragment_bottom_sticker_emoji_dialog.xml
+++ b/app/src/main/res/layout/fragment_bottom_sticker_emoji_dialog.xml
@@ -1,63 +1,19 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:background="@android:color/transparent"
-    android:orientation="vertical">
+    android:background="@android:color/transparent">
 
-
-    <androidx.constraintlayout.widget.ConstraintLayout
+    <androidx.recyclerview.widget.RecyclerView
+        xmlns:android="http://schemas.android.com/apk/res/android"
+        xmlns:app="http://schemas.android.com/apk/res-auto"
+        android:id="@+id/rvEmoji"
         android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:layout_marginEnd="16dp"
-        android:layout_marginStart="16dp">
-
-        <TextView
-            android:id="@+id/txtClose"
-            android:layout_width="wrap_content"
-            android:layout_height="?attr/actionBarSize"
-            android:layout_marginStart="8dp"
-            android:gravity="center"
-            android:text="Close"
-            android:textAppearance="@style/TextAppearance.AppCompat.Large.Inverse"
-            android:visibility="gone"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent" />
-
-        <View
-            android:id="@+id/lineView"
-            android:layout_width="match_parent"
-            android:layout_height="2px"
-            android:background="@android:color/white"
-            android:visibility="gone"
-            app:layout_constraintTop_toBottomOf="@+id/txtClose" />
-
-        <androidx.recyclerview.widget.RecyclerView
-            android:id="@+id/rvEmoji"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_margin="8dp"
-            app:layout_behavior="@string/bottom_sheet_behavior"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@+id/lineView" />
-
-        <TextView
-            android:id="@+id/txtDone"
-            android:layout_width="wrap_content"
-            android:layout_height="?attr/actionBarSize"
-            android:layout_marginEnd="8dp"
-            android:gravity="center"
-            android:text="Done"
-            android:textAppearance="@style/TextAppearance.AppCompat.Large.Inverse"
-            android:visibility="gone"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toTopOf="parent" />
-
-
-    </androidx.constraintlayout.widget.ConstraintLayout>
-
-</LinearLayout>
+        android:layout_height="wrap_content"
+        android:layout_centerHorizontal="true"
+        android:layout_marginEnd="@dimen/emoji_picker_whole_list_side_margin"
+        android:layout_marginStart="@dimen/emoji_picker_whole_list_side_margin"
+        />
+</RelativeLayout>
 
diff --git a/app/src/main/res/layout/row_emoji.xml b/app/src/main/res/layout/row_emoji.xml
index 065c82106..711ed4162 100644
--- a/app/src/main/res/layout/row_emoji.xml
+++ b/app/src/main/res/layout/row_emoji.xml
@@ -1,15 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<TextView xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
-    android:layout_width="match_parent"
-    android:layout_height="wrap_content">
-
-    <androidx.emoji.widget.EmojiTextView
-        android:id="@+id/txtEmoji"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_margin="4dp"
-        android:padding="2dp"
-        android:textColor="#FFFFFF"
-        android:textSize="35sp"/>
-</LinearLayout>
\ No newline at end of file
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/txtEmoji"
+    android:layout_width="@dimen/emoji_picker_initial_size"
+    android:layout_height="@dimen/emoji_picker_initial_size"
+    android:layout_margin="@dimen/emoji_picker_item_margin"
+    android:padding="@dimen/emoji_picker_item_padding"
+    android:textColor="#FFFFFF"
+    android:textAlignment="center"
+    app:autoSizeTextType="uniform" />
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
index 1f67d013e..8f6d9e73c 100644
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@@ -39,6 +39,13 @@
     <dimen name="save_button_total_height">40dp</dimen>
 
     <dimen name="editor_initial_text_size">40sp</dimen>
+    <dimen name="emoji_picker_initial_text_size">35sp</dimen>
+<!-- emoji_picker_initial_size can be anything, it needs be fixed but we are going to calculate it
+ on runtime later depending on screen size -->
+    <dimen name="emoji_picker_initial_size">48dp</dimen>
+    <dimen name="emoji_picker_item_padding">2dp</dimen>
+    <dimen name="emoji_picker_item_margin">4dp</dimen>
+    <dimen name="emoji_picker_whole_list_side_margin">16dp</dimen>
 
     <dimen name="gradient_top_height">72dp</dimen>
     <dimen name="gradient_bottom_height">152dp</dimen>