diff --git a/new-page.html b/new-page.html
index 039c11a..79eb91a 100644
--- a/new-page.html
+++ b/new-page.html
@@ -456,11 +456,13 @@
       box-shadow: .2rem .2rem .4rem #c8d0e7, -.2rem -.2rem .4rem #ffffff;
     }
     .url-card .url-img {
-      width: 40px;
-      height: 40px;
+      width: 60px;
+      height: 60px;
+      line-height: 60px;
       -webkit-box-flex: 0;
       -ms-flex: none;
       flex: none;
+      border-radius: 1.8em;
       background: rgba(255, 255, 255, 0);
       overflow: hidden;
     }
@@ -491,14 +493,24 @@
       <div class="section-title text-left">
         <h3 class="iconfont">&#xe60e;我的DIY</h3>
       </div>
-      <div class="row io-mx-n2 ajax-list-body">
-        <div class="url-card col-12 col-sm-12 col-md-4 col-xl-5a col-xxl-6a   mb-4">
+      <div class="diy-menu row">
+        <div class="col-md-12">
+          <div class="button-group filter-button-group text-left">
+            <button class="active " data-filter="*">全部</button>
+            <button class=""  data-filter=".api_html">前端</button>
+            <button class=""  data-filter=".api_api">后端</button>
+            <button class=""  data-filter=".api_middle">中间件</button> 
+          </div>
+        </div>
+      </div>
+      <div class="diy-list row mt-3">
+        <div class="url-card col-12 col-sm-6 col-md-4  mb-4">
           <div class="url-body">
             <a href="https://www.dafeiyang.cn/" target="_blank" class="no-c" title="致力于 职业规划和财务提升...">
               <div class="card-body">
                 <div class="d-flex align-items-center">
                   <div class="url-img mr-2 d-flex align-items-center justify-content-center">
-                    <img class="lazy loaded" src="https://docs.apachecn.org/assets/images/logos/logo_red.jpg" data-src="/assets/images/logos/logo_red.jpg" onerror="javascript:this.src='/assets\/images\/logos\/default.webp'" alt="片刻 职业规划" data-was-processed="true">
+                    <img class="lazy loaded" src="/static/img/logo_red.jpg" data-src="/static/img/logo_red.jpg" alt="片刻 职业规划" data-was-processed="true">
                   </div>
                   <div class="url-info flex-fill">
                     <div class="text-sm overflowClip_1">
@@ -512,13 +524,13 @@
           </div>
         </div>
 
-        <div class="url-card col-12 col-sm-12 col-md-4 col-xl-5a col-xxl-6a mb-4">
-          <div class="url-body default">
+        <div class="url-card col-12 col-sm-6 col-md-4 mb-4">
+          <div class="url-body ">
             <a href="https://cs183.apachecn.org/#/" target="_blank" class="no-c" title="斯坦福 CS183 &amp; YC 创业课系列中文笔记📚">
               <div class="card-body">
                 <div class="url-content d-flex align-items-center">
                   <div class="url-img mr-2 d-flex align-items-center justify-content-center">
-                    <img class="lazy loaded" src="https://docs.apachecn.org/assets/images/编程语言/yc.png" data-src="https://docs.apachecn.org/assets/images/编程语言/yc.png" alt="斯坦福 CS183 &amp; YC 创业课系列中文笔记📚" data-was-processed="true">
+                    <img class="lazy loaded" src="/static/img/default.webp" data-src="/static/img/default.webp"  alt="斯坦福 CS183 &amp; YC 创业课系列中文笔记📚">
                   </div>
                   <div class="url-info flex-fill">
                     <div class="text-sm overflowClip_1">
@@ -532,13 +544,13 @@
           </div>
         </div>
 
-        <div class="url-card col-12 col-sm-12 col-md-4 col-xl-5a col-xxl-6a  mb-4">
-          <div class="url-body default">
+        <div class="url-card col-12 col-sm-6 col-md-4  mb-4">
+          <div class="url-body">
             <a href="https://gitcode.net/apachecn/awesome-indie-zh.git" target="_blank"  class="no-c" title="独立开发/自由职业/远程工作资源列表📝">
               <div class="card-body">
                 <div class="url-content d-flex align-items-center">
                   <div class="url-img mr-2 d-flex align-items-center justify-content-center">
-                    <img class="lazy loaded" src="https://docs.apachecn.org/assets/images/编程语言/biz.png" data-src="https://docs.apachecn.org/assets/images/编程语言/biz.png"  alt="独立开发/自由职业/远程工作资源列表📝" data-was-processed="true">
+                    <img class="lazy loaded" src="/static/img/default.webp" data-src="/static/img/default.webp"  alt="独立开发/自由职业/远程工作资源列表📝">
                   </div>
                   <div class="url-info flex-fill">
                     <div class="text-sm overflowClip_1">
@@ -552,13 +564,13 @@
           </div>
         </div>
 
-        <div class="url-card col-12 col-sm-12 col-md-4 col-xl-5a col-xxl-6a mb-4">
-          <div class="url-body default">
+        <div class="url-card col-12 col-sm-6 col-md-4 mb-4">
+          <div class="url-body">
             <a href="https://idw.apachecn.org"  class="no-c " title="ApacheCN 独立开发/自由职业/远程工作/数字游民知识库📚">
               <div class="card-body">
                 <div class="url-content d-flex align-items-center">
                   <div class="url-img mr-2 d-flex align-items-center justify-content-center">
-                    <img class="lazy error" src="https://docs.apachecn.org/assets/images/logos/default.webp" data-src="https://docs.apachecn.org/assets/images/编程语言/sns.png" alt="ApacheCN 独立开发/自由职业/远程工作/数字游民知识库📚" data-was-processed="true">
+                    <img class="lazy error" src="/static/img/default.webp" data-src="/static/img/default.webp" alt="ApacheCN 独立开发/自由职业/远程工作/数字游民知识库📚" >
                   </div>
                   <div class="url-info flex-fill">
                     <div class="text-sm overflowClip_1">
diff --git a/static/img/default.webp b/static/img/default.webp
new file mode 100644
index 0000000..cd98518
Binary files /dev/null and b/static/img/default.webp differ
diff --git a/static/img/logo_red.jpg b/static/img/logo_red.jpg
new file mode 100644
index 0000000..4244724
Binary files /dev/null and b/static/img/logo_red.jpg differ