diff --git a/src/handlers/acct.py b/src/handlers/acct.py
index 0c8df305..2adb0f97 100644
--- a/src/handlers/acct.py
+++ b/src/handlers/acct.py
@@ -63,10 +63,6 @@ async def get(self, acct_id: int = None):
 
             prolist2.append(tmp)
 
-        def chunk_list(la, size):
-            for i in range(0, len(la), size):
-                yield la[i : i + size]
-
         rate_data["rate"] = math.floor(rate_data["rate"])
         rate_data["ac_pro_cnt"] = ac_pro_cnt
 
@@ -80,7 +76,7 @@ def chunk_list(la, size):
             acct=acct,
             rate=rate_data,
             total_pro_cnt=len(prolist),
-            prolist=chunk_list(prolist2, 10),
+            prolist=prolist2
         )
 
 
diff --git a/src/static/templ/acct/profile.html b/src/static/templ/acct/profile.html
index 71704e6a..d79babe6 100644
--- a/src/static/templ/acct/profile.html
+++ b/src/static/templ/acct/profile.html
@@ -6,40 +6,68 @@
     }
 
     #summary {
-      height: 512px;
-      margin-top: -512px;
-      color: #FCFAF2;
-      background-color: rgba(32, 32, 32, 0.6);
-      position: relative;
-      z-index: 100;
-      overflow: hidden;
+        height: 512px;
+        margin-top: -512px;
+        color: #FCFAF2;
+        background-color: rgba(32, 32, 32, 0.6);
+        position: relative;
+        z-index: 100;
+        overflow: hidden;
     }
     #summary > img#photo {
-      width: 100%;
-      height: auto;
-      display: block;
-      border-radius: 10px;
-      object-fit: cover;
+        width: 100%;
+        height: auto;
+        display: block;
+        border-radius: 10px;
+        object-fit: cover;
     }
     #summary > h1 {
-      margin-top: 8px;
-      margin-bottom: 0px;
-      text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.6);
+        margin-top: 8px;
+        margin-bottom: 0px;
+        text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.6);
     }
     #summary > table {
-      width: 86%;
-      color: #FCFAF2;
+        width: 86%;
+        color: #FCFAF2;
     }
     #summary > table td.value {
-      text-align: right;
+        text-align: right;
     }
     #summary > table td.value a {
-      color: #0F0;
-      font-size: 100%;
+        color: #0F0;
+        font-size: 100%;
+    }
+
+    #progrid {
+        display: grid;
+        font-size: 130%;
+        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+        border: 1px solid gray;
+        overflow: hidden;
+    }
+
+    @media (min-width: 768px) {
+        #progrid {
+            grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
+        }
+    }
+
+    @media (min-width: 992px) {
+        #progrid {
+            grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
+        }
     }
 
-    table td._state {
-        text-align: center;
+    a.topcoder {
+        font-weight: bolder;
+    }
+
+    a._state {
+        display: flex;
+        padding: 8px 4px;
+        margin-bottom: -1px;
+        justify-content: center;
+        border-bottom: 1px solid gray;
     }
 
     a._state-1 {
@@ -125,27 +153,18 @@ <h3>Stats</h3>
         </form>
     </div>
     <div class="col-lg-9">
-        <table class="table" style="font-size: 130%;" border="1px" bordercolor="gray">
-            <tbody>
-                {% for chunk in prolist %}
-                    <tr>
-                        {% for cnt, pro in enumerate(chunk, start=1) %}
-                            {% if pro['state'] == ChalConst.STATE_NOTSTARTED or pro['state'] is None %}
-                                <td class="_state"><a class="_state-4" href="{{ url(f'/pro/{ pro['pro_id'] }/') }}">{{pro['pro_id']}}</a></td>
-                            {% elif pro['state'] == ChalConst.STATE_AC %}
-                                <td class="_state"><a class="_state-1" {% if pro['is_topcoder'] %}style="font-weight: bolder;"{% end %} href="{{ url(f'/pro/{ pro['pro_id'] }/') }}">{{pro['pro_id']}}</a></td>
-                            {% elif pro['state'] in (ChalConst.STATE_PC, ChalConst.STATE_WA) and pro['score'] > 0 %}
-                                <td class="_state"><a class="_state-2" {% if pro['is_topcoder'] %}style="font-weight: bolder;"{% end %} href="{{ url(f'/pro/{ pro['pro_id'] }/') }}">{{pro['pro_id']}}</a></td>
-                            {% else %}
-                                <td class="_state"><a class="_state-3" href="{{ url(f'/pro/{ pro['pro_id'] }/') }}">{{pro['pro_id']}}</a></td>
-                            {% end %}
-                        {% end %}
-                        {% for _ in range(10 - len(chunk)) %}
-                            <td></td>
-                        {% end %}
-                    </tr>
+        <div id="progrid">
+            {% for pro in prolist %}
+                {% if pro['state'] == ChalConst.STATE_NOTSTARTED or pro['state'] is None %}
+                    <a class="_state _state-4" href="{{ url(f'/pro/{ pro['pro_id'] }/') }}">{{pro['pro_id']}}</a>
+                {% elif pro['state'] == ChalConst.STATE_AC %}
+                    <a class="_state _state-1 {% if pro['is_topcoder'] %}topcoder{% end %}" href="{{ url(f'/pro/{ pro['pro_id'] }/') }}">{{pro['pro_id']}}</a>
+                {% elif pro['state'] in (ChalConst.STATE_PC, ChalConst.STATE_WA) and pro['score'] > 0 %}
+                    <a class="_state _state-2 {% if pro['is_topcoder'] %}topcoder{% end %}" href="{{ url(f'/pro/{ pro['pro_id'] }/') }}">{{pro['pro_id']}}</a>
+                {% else %}
+                    <a class="_state _state-3" href="{{ url(f'/pro/{ pro['pro_id'] }/') }}">{{pro['pro_id']}}</a>
                 {% end %}
-            </tbody>
-       </table>
+            {% end %}
+        </div>
     </div>
 </div>