Okay, I'll do it bits by bits to explain it better. Heads up though, I use a custom google font VT323 so that font won't show up on your profile if you do not have it imported!

LATEST BUTTON

Basic appearance of the Latest button (border, background) etc
.react-select_control.css-13cymwt-control, .react-selectcontrol--is-focused, ._borderless_1idvq_1 .react-select_control {
border: 2px solid #FFFF !important;
background-color: #101010 !important;
border-radius: 0px !important;
}

Font
.css-1dimb5e-singleValue, .css-qr46ko {
font-family: "VT323", monospace;
font-weight: 400;
font-style: normal;
font-size: 17px;
}

LATEST DROPDOWN INSIDE (POPULAR, TRENDING)*

Font
.transparent .react-select__option {
color: #FFF;
font-family: "VT323", monospace;
font-weight: 400;
font-style: normal;
}

Background and border
.css-qr46ko {
background-color: #101010;
border-radius: 0px;
}

Instead of purple "current in focus" color
.transparent .react-select__option--is-selected {
color: #EDBB85;
background-color: #101010;
}

On hover
.react-select_option:hover, .react-selectmenu-portal .react-select_option:hover {
color: #EDBB85;
background-color: #101010;
}

FOLLOW & OPTIONS (i don't have anything about the bell so im guessing it kinda took it from the "follow button)

Centering it
.css-y9k5u7 {
justify-content: center;
}

Follow button (& bell ig)
.Btn {
background: #101010;
font-family: "VT323", monospace;
border-color: #FFFFFF;
border: solid 2px;
border-radius: 0px;
letter-spacing: 1px;
color: #FFFFFF;
overflow: none;
}

Options
.css-15w88gn {
font-family: "VT323", monospace !important;
font-weight: 400 !important;
border-radius: 0px !important;
background: none !important;
border-color: #FFFFFF;
border: solid 2px;
}

Now for the box on my profile. You have to make a new class for it and it also depends where you want to make it.

Mine is at the top of the page (after the pfp and followers and allat) so in my "About me" I just made a div and gave it a class (random name basically)

If you want something to be inside the box (like i have my name and pronouns) all you have to do is write this:
<div class="random_ass_name"> whatever you wish for the box to wrap around </div>

Example, mine looks like this:
<div class="name-box"><h1 class="chakra-heading css-1dklj6k" style="text-align: center;"><span style="color: rgb(237, 187, 133);">KARMA | K</span></h1><span style="color: rgb(255, 255, 255);">› She/he/they › Bi/Ace</span></div>

This does not go in <style> brackets because this is visible on the profile! Also the div name can be quite literally anything, mine just happens to be called name-box lol.

But the name is important because now (to actually make it look like a box) all you have to do is make a simple thing:

.name-box {
border: solid 3px;
}

And this one goes into the style like the rest of where you were putting!

The image beneath the box, the orange thick line, is actually just an image lol.

I hope this makes sense lmao if you have any questions just ask. Also, to mention, maybe some things won't work and it possibly could be because our profile don't share the same class name (the ".blablah").