diff --git a/src/components/avatarBar/index.tsx b/src/components/avatarBar/index.tsx
index 6f9a228..61d0e6b 100644
--- a/src/components/avatarBar/index.tsx
+++ b/src/components/avatarBar/index.tsx
@@ -35,7 +35,7 @@ export default function AvatarBar({ onClose }: { onClose?: () => void }) {
                                     onChange={(e) => setFilter({ ...filter, name: e.target.value, locale: locale })}
                                 />
                             </div>
-                            <div className="grid grid-cols-4  lg:grid-cols-7 mb-1 mx-1 gap-2 w-full max-h-[17vh] min-h-[5vh] overflow-y-auto">
+                            <div className="grid grid-cols-7 sm:grid-cols-4  lg:grid-cols-7 mb-1 mx-1 gap-2 w-full max-h-[17vh] min-h-[5vh] overflow-y-auto">
                                 {Object.keys(listElement).map((key, index) => (
                                     <div
                                         key={index}
@@ -55,7 +55,7 @@ export default function AvatarBar({ onClose }: { onClose?: () => void }) {
                                 ))}
                             </div>
 
-                            <div className="grid grid-cols-4 lg:grid-cols-8 mb-1 mx-1 gap-2 overflow-y-auto w-full max-h-[17vh] min-h-[5vh]">
+                            <div className="grid grid-cols-8 sm:grid-cols-4 lg:grid-cols-8 mb-1 mx-1 gap-2 overflow-y-auto w-full max-h-[17vh] min-h-[5vh]">
                                 {Object.keys(listPath).map((key, index) => (
                                     <div
                                         key={index}
@@ -80,7 +80,7 @@ export default function AvatarBar({ onClose }: { onClose?: () => void }) {
                         </div>
 
                         <div className="flex items-start h-full">
-                            <ul className="grid grid-cols-2 lg:grid-cols-3 gap-2 w-full h-[65vh] overflow-y-scroll overflow-x-hidden">
+                            <ul className="grid grid-cols-4 sm:grid-cols-2 lg:grid-cols-3 gap-2 w-full h-[65vh] overflow-y-scroll overflow-x-hidden">
                                 {listAvatar.map((item, index) => (
                                     <div key={index} onClick={() => {
                                         setAvatarSelected(item); 
diff --git a/src/components/lightconeBar/index.tsx b/src/components/lightconeBar/index.tsx
index c16c572..0cb087f 100644
--- a/src/components/lightconeBar/index.tsx
+++ b/src/components/lightconeBar/index.tsx
@@ -67,7 +67,7 @@ export default function LightconeBar() {
                     <div>Filter</div>
                     <div className="grid grid-cols-12 mt-1 w-full">
                         <div className="grid justify-items-start col-span-8">
-                            <div className="grid grid-cols-3 md:grid-cols-6 lg:grid-cols-8 mb-1 mx-1 gap-2">
+                            <div className="grid grid-cols-4 sm:grid-cols-3 md:grid-cols-6 lg:grid-cols-8 mb-1 mx-1 gap-2">
                                 {Object.keys(listPath).map((key, index) => (
                                     <div
                                         key={index}
@@ -89,7 +89,7 @@ export default function LightconeBar() {
                         </div>
 
                         <div className="grid justify-items-end col-span-4 w-full">
-                            <div className="grid grid-cols-1 sm:grid-cols-3 mb-1 mx-1 gap-2">
+                            <div className="grid grid-cols-2 sm:grid-cols-3 mb-1 mx-1 gap-2">
                                 {Object.keys(listRank).map((key, index) => (
                                     <div
                                         key={index}