how to make the UI look the same in all diffrent phones

Question

I have an app that has a UI displays a question answer some letter buttons and stuff . the problem is that this UI looks diffrent in every diffrent phone for exemple:

UI in the Redmi 8 phone

Redmi 8

UI in the Oppo A31:

Oppo A31

UI in the Redmi Note 10 S:

Redmi Note 10 S

the composable resposible for the 12 buttons with letters

@Composable
    fun lettersButtonrow(letterslist1: ArrayList<Char>, buttonNum : Int) {
       
        Button(onClick = {....},
        colors = ButtonDefaults.buttonColors(lightOrange),
            shape = RoundedCornerShape(10.dp), elevation = ButtonDefaults.buttonElevation(10.dp),
            modifier = Modifier.alpha(alpha), enabled = state) {


            Text(text = letterslist1[buttonNum].toString(), color = Color.White, fontSize = 20.sp, fontWeight = FontWeight.Bold,
                modifier = Modifier.wrapContentSize(Alignment.Center))
        }
    }

composable resposible for the top bar

//topbar
            Row(modifier = Modifier.fillMaxWidth().height(50.dp),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.Start) {

                Spacer(modifier = Modifier.width(8.dp))

                Icon(....., modifier = Modifier.size(30.dp))

                Text(text =..., fontSize = 30.sp,...,)
                
                Spacer(modifier = Modifier.width(73.dp))
                Text(text =..., fontSize = 30.sp,...,)
                Spacer(modifier = Modifier.width(100.dp))
                Icon(...,modifier = Modifier
                        .fillMaxHeight()
                        .size(30.dp)
                        .clickable {...})
                }

composable resposible for the question card

 Card( shape = RoundedCornerShape(40.dp),
               modifier = Modifier.size(350.dp).padding(24.dp))
            {
                Column(modifier = Modifier.fillMaxSize() ,
        verticalArrangement = Arrangement.Top,
                horizontalAlignment = Alignment.CenterHorizontally) {

                    Text(..., fontSize = 20.sp, modifier = Modifier.fillMaxHeight(0.1f)
                    )
                    if (...){
                    Image(...,modifier = Modifier.fillMaxHeight(0.8f),
                        contentScale = ContentScale.Crop )}
                    else{
                        Row(modifier = Modifier.fillMaxHeight(0.8f).fillMaxWidth().background(...),
             verticalAlignment = Alignment.CenterVertically,
                        horizontalArrangement = Arrangement.Center) {
                            Text(..., fontSize = 25.sp, modifier = Modifier.padding(8.dp))
                        }
                    }
                        
                        Button(onClick = {...},
            modifier = Modifier.fillMaxWidth().fillMaxHeight()) {
                            Row(
                                modifier = Modifier.fillMaxSize(),
                                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.Center
                            ) {
                            Icon(...)
                            Spacer(modifier = Modifier.width(8.dp))
                            Text(..., fontSize = 20.sp)
                            }}}}

my question is how do i make my UI look the same in diffrent phones with diffrent screen sizes.

by the way for composable size i'm using Dp and for text i'm using Sp