diff --git a/public/s/css/f0ck.css b/public/s/css/f0ck.css
index 1428f70..ed89d38 100644
--- a/public/s/css/f0ck.css
+++ b/public/s/css/f0ck.css
@@ -2991,4 +2991,28 @@ button#togglebg {
 
 .fader-out {
     animation: fadeOut  .8s steps(100) forwards
-} 
\ No newline at end of file
+} 
+
+.settings {
+  display: grid;
+  justify-content: center;
+}
+
+input[name="i_avatar"] {
+  text-align: center;
+  width: 50px;
+  padding: 10px;
+}
+
+input#s_avatar {
+  padding: 5px;
+  border: 1px solid var(--black);
+  border-radius: 3px;
+  background-image: linear-gradient(to bottom, var(--nav-link-background-linear-gradient));
+  box-shadow: var(--nav-link-box-shadow);
+  cursor: pointer;
+}
+
+#s_avatar:hover {
+  background: #ffffff0f;
+}
\ No newline at end of file
diff --git a/views/settings.html b/views/settings.html
index e402e73..c523ed3 100644
--- a/views/settings.html
+++ b/views/settings.html
@@ -1,7 +1,6 @@
 @include(snippets/header)
-<div id="main">
+<div class="settings">
   <h1>Settings</h1>
-  @if(session.avatar)<a href="/{{ session.avatar }}"><img id="img_avatar" src="/t/{{ session.avatar }}.webp"></a>@endif
   <h2>Account</h2>
   <table class="table">
     <tbody>
@@ -18,7 +17,7 @@
         <td>{!! session.user !!}</td>
       </tr>
       <tr>
-        <td>avatar</td>
+        <td>@if(session.avatar)<a href="/{{ session.avatar }}"><img id="img_avatar" src="/t/{{ session.avatar }}.webp"></a>@endif</td>
         <td><input type="text" class="input" name="i_avatar" value="{{ session.avatar }}"></td>
       </tr>
       <tr>