diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php
index 8c248414..4035893a 100644
--- a/app/Http/Controllers/UserController.php
+++ b/app/Http/Controllers/UserController.php
@@ -188,12 +188,33 @@ class UserController extends Controller
         return json(trans('user.verification.success'), 0);
     }
 
-    public function profile()
+    public function profile(Filter $filter)
     {
         $user = Auth::user();
 
+        $grid = [
+            'layout' => [
+                ['md-6', 'md-6'],
+            ],
+            'widgets' => [
+                [
+                    [
+                        'user.widgets.profile.avatar',
+                        'user.widgets.profile.password'
+                    ],
+                    [
+                        'user.widgets.profile.nickname',
+                        'user.widgets.profile.email',
+                        'user.widgets.profile.delete-account',
+                    ],
+                ],
+            ],
+        ];
+        $grid = $filter->apply('grid:user.profile', $grid);
+
         return view('user.profile')
             ->with('user', $user)
+            ->with('grid', $grid)
             ->with('site_name', option_localized('site_name'));
     }
 
diff --git a/resources/views/shared/grid.twig b/resources/views/shared/grid.twig
new file mode 100644
index 00000000..db412d9a
--- /dev/null
+++ b/resources/views/shared/grid.twig
@@ -0,0 +1,12 @@
+{% for row in grid.widgets %}
+  <div class="row">
+    {% set layout = grid.layout[loop.index0] %}
+    {% for col in row %}
+      <div class="col-{{ layout[loop.index0] }}">
+        {% for widget in col %}
+          {{ include(widget) }}
+        {% endfor %}
+      </div>
+    {% endfor %}
+  </div>
+{% endfor %}
diff --git a/resources/views/user/profile.twig b/resources/views/user/profile.twig
index e592bc26..736b22cd 100644
--- a/resources/views/user/profile.twig
+++ b/resources/views/user/profile.twig
@@ -3,124 +3,7 @@
 {% block title %}{{ trans('general.profile') }}{% endblock %}
 
 {% block content %}
-  <div class="row">
-    <div class="col-md-6">
-      <div class="card card-primary">
-        <div class="card-header">
-          <h3 class="card-title">
-            {{ trans('user.profile.avatar.title') }}
-          </h3>
-        </div>
-        <div class="card-body">
-          {{ trans('user.profile.avatar.notice')|raw }}
-        </div>
-        <div class="card-footer">
-          <button class="btn btn-primary" id="reset-avatar">
-            {{ trans('user.profile.avatar.reset') }}
-          </button>
-        </div>
-      </div>
-
-      <form class="card card-warning" method="post" id="change-password">
-        <div class="card-header">
-          <h3 class="card-title">
-            {{ trans('user.profile.password.title') }}
-          </h3>
-        </div>
-        <div class="card-body">
-          <div class="form-group">
-            <label>{{ trans('user.profile.password.old') }}</label>
-            <input type="password" class="form-control" name="oldPassword" required>
-          </div>
-
-          <div class="form-group">
-            <label>{{ trans('user.profile.password.new') }}</label>
-            <input type="password" class="form-control" name="newPassword" required
-              minlength="8" maxlength="32">
-          </div>
-
-          <div class="form-group">
-            <label>{{ trans('user.profile.password.confirm') }}</label>
-            <input type="password" class="form-control" name="confirm" required
-              minlength="8" maxlength="32">
-          </div>
-        </div>
-        <div class="card-footer">
-          <button class="btn btn-primary" type="submit">
-            {{ trans('user.profile.password.button') }}
-          </button>
-        </div>
-      </form>
-    </div>
-    <div class="col-md-6">
-      <form class="card card-primary" method="post" id="change-nickname">
-        <div class="card-header">
-          <h3 class="card-title">
-            {{ trans('user.profile.nickname.title') }}
-          </h3>
-        </div>
-        <div class="card-body">
-          <div class="form-group">
-            <input type="text" class="form-control" name="nickname" required
-              placeholder="{{ trans('user.profile.nickname.rule') }}">
-          </div>
-        </div>
-        <div class="card-footer">
-          <button class="btn btn-primary" type="submit">
-            {{ trans('general.submit') }}
-          </button>
-        </div>
-      </form>
-
-      <form class="card card-warning" method="post" id="change-email">
-        <div class="card-header">
-          <h3 class="card-title">
-            {{ trans('user.profile.email.title') }}
-          </h3>
-        </div>
-        <div class="card-body">
-          <div class="form-group">
-            <input type="email" class="form-control" name="email" required
-              placeholder="{{ trans('user.profile.email.new') }}">
-          </div>
-          <div class="form-group">
-            <input type="password" class="form-control" name="password" required
-              placeholder="{{ trans('user.profile.email.password') }}">
-          </div>
-        </div>
-        <div class="card-footer">
-          <button class="btn btn-primary" type="submit">
-            {{ trans('user.profile.email.button') }}
-          </button>
-        </div>
-      </form>
-
-      <div class="card card-danger">
-        <div class="card-header">
-          <h3 class="card-title">
-            {{ trans('user.profile.delete.title') }}
-          </h3>
-        </div>
-        <div class="card-body">
-          {% if user.admin %}
-            <p>{{ trans('user.profile.delete.admin') }}</p>
-            <button class="btn btn-danger" disabled="disabled">
-              {{ trans('user.profile.delete.button') }}
-            </button>
-          {% else %}
-            <p>{{ trans('user.profile.delete.notice', { site: site_name }) }}</p>
-            <button
-              class="btn btn-danger"
-              data-toggle="modal"
-              data-target="#modal-delete-account"
-            >
-              {{ trans('user.profile.delete.button') }}
-            </button>
-          {% endif %}
-        </div>
-      </div>
-    </div>
-  </div>
+  {{ include('shared.grid') }}
 
   <form id="modal-delete-account" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered" role="document">
@@ -151,12 +34,3 @@
     </div>
   </form>
 {% endblock %}
-
-{% block before_foot %}
-  <script>
-    Object.defineProperty(blessing, 'extra', {
-      configurable: false,
-      get: () => Object.freeze({{ extra|json_encode|raw }}),
-    })
-  </script>
-{% endblock %}
diff --git a/resources/views/user/widgets/profile/avatar.twig b/resources/views/user/widgets/profile/avatar.twig
new file mode 100644
index 00000000..595bc9b2
--- /dev/null
+++ b/resources/views/user/widgets/profile/avatar.twig
@@ -0,0 +1,15 @@
+<div class="card card-primary">
+  <div class="card-header">
+    <h3 class="card-title">
+      {{ trans('user.profile.avatar.title') }}
+    </h3>
+  </div>
+  <div class="card-body">
+    {{ trans('user.profile.avatar.notice')|raw }}
+  </div>
+  <div class="card-footer">
+    <button class="btn btn-primary" id="reset-avatar">
+      {{ trans('user.profile.avatar.reset') }}
+    </button>
+  </div>
+</div>
diff --git a/resources/views/user/widgets/profile/delete-account.twig b/resources/views/user/widgets/profile/delete-account.twig
new file mode 100644
index 00000000..e8ebec6b
--- /dev/null
+++ b/resources/views/user/widgets/profile/delete-account.twig
@@ -0,0 +1,24 @@
+<div class="card card-danger">
+  <div class="card-header">
+    <h3 class="card-title">
+      {{ trans('user.profile.delete.title') }}
+    </h3>
+  </div>
+  <div class="card-body">
+    {% if user.admin %}
+      <p>{{ trans('user.profile.delete.admin') }}</p>
+      <button class="btn btn-danger" disabled="disabled">
+        {{ trans('user.profile.delete.button') }}
+      </button>
+    {% else %}
+      <p>{{ trans('user.profile.delete.notice', { site: site_name }) }}</p>
+      <button
+        class="btn btn-danger"
+        data-toggle="modal"
+        data-target="#modal-delete-account"
+      >
+        {{ trans('user.profile.delete.button') }}
+      </button>
+    {% endif %}
+  </div>
+</div>
diff --git a/resources/views/user/widgets/profile/email.twig b/resources/views/user/widgets/profile/email.twig
new file mode 100644
index 00000000..78b10026
--- /dev/null
+++ b/resources/views/user/widgets/profile/email.twig
@@ -0,0 +1,22 @@
+<form class="card card-warning" method="post" id="change-email">
+  <div class="card-header">
+    <h3 class="card-title">
+      {{ trans('user.profile.email.title') }}
+    </h3>
+  </div>
+  <div class="card-body">
+    <div class="form-group">
+      <input type="email" class="form-control" name="email" required
+        placeholder="{{ trans('user.profile.email.new') }}">
+    </div>
+    <div class="form-group">
+      <input type="password" class="form-control" name="password" required
+        placeholder="{{ trans('user.profile.email.password') }}">
+    </div>
+  </div>
+  <div class="card-footer">
+    <button class="btn btn-primary" type="submit">
+      {{ trans('user.profile.email.button') }}
+    </button>
+  </div>
+</form>
diff --git a/resources/views/user/widgets/profile/nickname.twig b/resources/views/user/widgets/profile/nickname.twig
new file mode 100644
index 00000000..f992cf3e
--- /dev/null
+++ b/resources/views/user/widgets/profile/nickname.twig
@@ -0,0 +1,18 @@
+<form class="card card-primary" method="post" id="change-nickname">
+  <div class="card-header">
+    <h3 class="card-title">
+      {{ trans('user.profile.nickname.title') }}
+    </h3>
+  </div>
+  <div class="card-body">
+    <div class="form-group">
+      <input type="text" class="form-control" name="nickname" required
+        placeholder="{{ trans('user.profile.nickname.rule') }}">
+    </div>
+  </div>
+  <div class="card-footer">
+    <button class="btn btn-primary" type="submit">
+      {{ trans('general.submit') }}
+    </button>
+  </div>
+</form>
diff --git a/resources/views/user/widgets/profile/password.twig b/resources/views/user/widgets/profile/password.twig
new file mode 100644
index 00000000..97ac7dc5
--- /dev/null
+++ b/resources/views/user/widgets/profile/password.twig
@@ -0,0 +1,30 @@
+<form class="card card-warning" method="post" id="change-password">
+  <div class="card-header">
+    <h3 class="card-title">
+      {{ trans('user.profile.password.title') }}
+    </h3>
+  </div>
+  <div class="card-body">
+    <div class="form-group">
+      <label>{{ trans('user.profile.password.old') }}</label>
+      <input type="password" class="form-control" name="oldPassword" required>
+    </div>
+
+    <div class="form-group">
+      <label>{{ trans('user.profile.password.new') }}</label>
+      <input type="password" class="form-control" name="newPassword" required
+        minlength="8" maxlength="32">
+    </div>
+
+    <div class="form-group">
+      <label>{{ trans('user.profile.password.confirm') }}</label>
+      <input type="password" class="form-control" name="confirm" required
+        minlength="8" maxlength="32">
+    </div>
+  </div>
+  <div class="card-footer">
+    <button class="btn btn-primary" type="submit">
+      {{ trans('user.profile.password.button') }}
+    </button>
+  </div>
+</form>