diff --git a/source/friends.md b/source/friends.md
index d8e8e42..a8facdf 100644
--- a/source/friends.md
+++ b/source/friends.md
@@ -25,7 +25,8 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css">
 <script src="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"></script-->
 
-<div class="card">
+<div class="columns">
+<div class="card column">
 <div class="card-content">
   <div class="media">
       <div class="media-left">
@@ -44,7 +45,7 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
     <a href="https://xiaojin233.cn" class="card-footer-item">Home Page</a>
   </footer>
 </div>
-<div class="card">
+<div class="card column">
 <div class="card-content">
   <div class="media">
       <div class="media-left">
@@ -63,7 +64,7 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
     <a href="https://blog.restent.win/" class="card-footer-item">Blog</a>
   </footer>
 </div>
-<div class="card">
+<div class="card column">
 <div class="card-content">
   <div class="media">
       <div class="media-left">
@@ -82,7 +83,7 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
     <a href="https://www.cubik65536.top" class="card-footer-item">Home Page</a>
   </footer>
 </div>
-<div class="card">
+<div class="card column">
 <div class="card-content">
   <div class="media">
       <div class="media-left">
@@ -101,7 +102,7 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
     <a href="https://mashirl.com/" class="card-footer-item">Blog</a>
   </footer>
 </div>
-<div class="card">
+<div class="card column">
 <div class="card-content">
   <div class="media">
       <div class="media-left">
@@ -139,7 +140,7 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
     <a href="https://xiaohaoxh.cn/" class="card-footer-item">Blog</a>
   </footer>
 </div -->
-<div class="card">
+<div class="card column">
 <div class="card-content">
   <div class="media">
       <div class="media-left">
@@ -158,7 +159,7 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
     <a href="https://blog.charlie.moe" class="card-footer-item">Blog</a>
   </footer>
 </div>
-<div class="card">
+<div class="card column">
 <div class="card-content">
   <div class="media">
       <div class="media-left">
@@ -177,7 +178,7 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
     <a href="https://blog.smallxu.com/" class="card-footer-item">Blog</a>
   </footer>
 </div>
-<div class="card">
+<div class="card column">
 <div class="card-content">
   <div class="media">
       <div class="media-left">
@@ -196,7 +197,7 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
     <a href="https://blog.skk.moe/" class="card-footer-item">Blog</a>
   </footer>
 </div>
-<div class="card">
+<div class="card column">
 <div class="card-content">
   <div class="media">
       <div class="media-left">
@@ -215,7 +216,7 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
     <a href="https://blog.moeworld.tech/" class="card-footer-item">Blog</a>
   </footer>
 </div>
-<div class="card">
+<div class="card column">
 <div class="card-content">
   <div class="media">
       <div class="media-left">
@@ -234,7 +235,7 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
     <a href="https://ivampiresp.com/" class="card-footer-item">Blog</a>
   </footer>
 </div>
-<div class="card">
+<div class="card column">
 <div class="card-content">
   <div class="media">
       <div class="media-left">
@@ -253,7 +254,7 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
     <a href="https://www.littleqiu.net/" class="card-footer-item">Blog</a>
   </footer>
 </div>
-<div class="card">
+<div class="card column">
 <div class="card-content">
   <div class="media">
       <div class="media-left">
@@ -272,7 +273,7 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
     <a href="https://www.feizhuqwq.com/" class="card-footer-item">Home Page</a>
   </footer>
 </div>
-<div class="card">
+<div class="card column">
 <div class="card-content">
   <div class="media">
       <div class="media-left">
@@ -291,7 +292,7 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
     <a href="https://blog.becomingcelia.com/" class="card-footer-item">Blog</a>
   </footer>
 </div>
-<div class="card">
+<div class="card column">
 <div class="card-content">
   <div class="media">
       <div class="media-left">
@@ -310,7 +311,7 @@ avatar: https://pic.rmb.bdstatic.com/bjh/020a46e8318d66b55d73afe31805d653.jpeg
     <a href="http://wc215.byethost10.com/" class="card-footer-item">Blog</a>
   </footer>
 </div>
-<div class="card">
+<div class="card column">
 <div class="card-content">
   <div class="media">
       <div class="media-left">