diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css
index 97dc38a9fe..8c257a0e26 100644
--- a/public/assets/css/left/left.css
+++ b/public/assets/css/left/left.css
@@ -83,6 +83,7 @@
       weight: auto;
       width: 25%;
       margin-right: var(--small-size);
+      clip-path: circle(2.5em at center);
 }
 
 .info {
diff --git a/public/assets/css/left/left_mid.css b/public/assets/css/left/left_mid.css
index 7abe703ed1..f426fd488c 100644
--- a/public/assets/css/left/left_mid.css
+++ b/public/assets/css/left/left_mid.css
@@ -92,6 +92,7 @@
       height: calc(5 * var(--unit-size));
       width: 25%;
       margin-right: var(--small-size);
+      clip-path: circle(2.5em at center);
 }
 
 .info {
diff --git a/public/assets/css/left/left_small.css b/public/assets/css/left/left_small.css
index 7cb494091e..24e74a4e77 100644
--- a/public/assets/css/left/left_small.css
+++ b/public/assets/css/left/left_small.css
@@ -90,8 +90,9 @@
 .icon-avatar {
       order: 1;
       height: calc(5 * var(--unit-size));
-      width: 25%;
+      width: 5em;
       margin-right: var(--small-size);
+      clip-path: circle(2.5em at center);
 }
 
 .info {
diff --git a/public/assets/css/settings/settings.css b/public/assets/css/settings/settings.css
index 322ac65a45..55a47f141e 100644
--- a/public/assets/css/settings/settings.css
+++ b/public/assets/css/settings/settings.css
@@ -218,4 +218,17 @@ select {
 
 .form-single input[type=checkbox] {
       margin-left: var(--unit-size);
+}
+
+/* JS Cropping */
+#img-cropped {
+      display: block;
+      max-width: 100%;
+}
+#img-container {
+      display: flex;
+      margin-top: var(--main-size);
+      margin-left: auto;
+      margin-right: auto;
+      max-width: 500px;
 }
\ No newline at end of file
diff --git a/public/assets/css/settings/settings_mid.css b/public/assets/css/settings/settings_mid.css
index 01dec2d96b..2e33330dff 100644
--- a/public/assets/css/settings/settings_mid.css
+++ b/public/assets/css/settings/settings_mid.css
@@ -217,3 +217,16 @@ select {
 .form-single input[type=checkbox] {
       margin-left: var(--unit-size);
 }
+
+/* JS Cropping */
+#img-cropped {
+      display: block;
+      max-width: 100%;
+}
+#img-container {
+      display: flex;
+      margin-top: var(--main-size);
+      margin-left: auto;
+      margin-right: auto;
+      max-width: 500px;
+}
diff --git a/public/assets/css/settings/settings_small.css b/public/assets/css/settings/settings_small.css
index c8fa7f17d1..a29ed44c75 100644
--- a/public/assets/css/settings/settings_small.css
+++ b/public/assets/css/settings/settings_small.css
@@ -218,3 +218,16 @@ select {
       margin-left: var(--unit-size);
       float: right;
 }
+
+/* JS Cropping */
+#img-cropped {
+      display: block;
+      max-width: 100%;
+}
+#img-container {
+      display: flex;
+      margin-top: var(--main-size);
+      margin-left: auto;
+      margin-right: auto;
+      max-width: 500px;
+}
\ No newline at end of file
diff --git a/public/assets/javascript/cropperjs b/public/assets/javascript/cropperjs
new file mode 160000
index 0000000000..c665070ac8
--- /dev/null
+++ b/public/assets/javascript/cropperjs
@@ -0,0 +1 @@
+Subproject commit c665070ac8acffd3822e9bbcb6db07774e6334d8
diff --git a/src/Controller/UserPanel.php b/src/Controller/UserPanel.php
index 607e35e3ec..1096c9db06 100644
--- a/src/Controller/UserPanel.php
+++ b/src/Controller/UserPanel.php
@@ -48,6 +48,7 @@ use Misd\PhoneNumberBundle\Form\Type\PhoneNumberType;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
 use Symfony\Component\Form\Extension\Core\Type\FileType;
+use Symfony\Component\Form\Extension\Core\Type\HiddenType;
 use Symfony\Component\Form\Extension\Core\Type\LanguageType;
 use Symfony\Component\Form\Extension\Core\Type\SubmitType;
 use Symfony\Component\Form\Extension\Core\Type\TextareaType;
@@ -99,10 +100,22 @@ class UserPanel extends AbstractController
     public function avatar(Request $request)
     {
         $avatar = Form::create([
-            ['avatar',   FileType::class,   ['label' => _m('Avatar'), 'help' => _m('You can upload your personal avatar. The maximum file size is 10MB.')]],
+            ['avatar',   FileType::class,   ['label' => _m('Avatar'), 'help' => _m('You can upload your personal avatar. The maximum file size is 2MB.')]],
+            ['hidden', HiddenType::class, []],
             ['save',     SubmitType::class, ['label' => _m('Submit')]],
         ]);
 
+        $avatar->handleRequest($request);
+
+        if ($avatar->isSubmitted() && $avatar->isValid()) {
+            $data              = $avatar->getData()['hidden'];
+            list($type, $data) = explode(';', $data);
+            list(, $data)      = explode(',', $data);
+            $data              = base64_decode($data);
+
+            file_put_contents('/tmp/image.png', $data);
+        }
+
         return ['_template' => 'settings/avatar.html.twig', 'avatar' => $avatar->createView()];
     }
 
diff --git a/templates/left/left.html.twig b/templates/left/left.html.twig
index f4965bea03..e6696e1729 100644
--- a/templates/left/left.html.twig
+++ b/templates/left/left.html.twig
@@ -17,9 +17,7 @@
             <div class='navbar'>
                 <div class="left-nav">
                     <div class='profile'>
-                        <svg class="icon icon-avatar">
-                            <use xlink:href="#icon-avatar"></use>
-                        </svg>
+                        <img src='{{ asset('assets/image.png') }}' class="icon icon-avatar">
                         <div class="info">
                             <b id="nick">{{ app.user.username }}</b>
                             <div class="tags">
diff --git a/templates/settings/avatar.html.twig b/templates/settings/avatar.html.twig
index 728ca516dc..4f6abb8c41 100644
--- a/templates/settings/avatar.html.twig
+++ b/templates/settings/avatar.html.twig
@@ -2,6 +2,12 @@
 
 {% block title %}Avatar Settings{% endblock %}
 
+{% block stylesheets %}
+      {{ parent() }}
+      <link  href="{{ asset('assets/javascript/cropperjs/dist/cropper.css') }}" rel="stylesheet">
+      <script src="{{ asset('assets/javascript/cropperjs/dist/cropper.js') }}"></script>
+{% endblock %}
+
 {% block body %}
       {{ parent() }}
 {% endblock body %}
@@ -9,5 +15,8 @@
 {% block form %}
       <div class='form'>
             {{ form(avatar) }}
+            <div id="img-container">
+                  <img id="img-cropped">
+            </div>
       </div>
 {% endblock form %}