diff --git a/src/components/blog/index.jsx b/src/components/blog/index.jsx
index b3699bb..381750c 100644
--- a/src/components/blog/index.jsx
+++ b/src/components/blog/index.jsx
@@ -178,9 +178,9 @@ const Blog = ({ loading }) => {
         <div className="col-span-1 lg:col-span-2">
           <div className="grid grid-cols-2 gap-6">
             <div className="col-span-2">
-              <div className="card compact bg-base-100 shadow-sm">
+              <div className="card compact shadow-sm glass">
                 <div className="card-body">
-                  <div className="mx-3n">
+                  <div className="mx-3 mb-2">
                     <h5 className="card-title">
                       {loading ? (
                         skeleton({ width: 'w-28', height: 'h-8' })
@@ -189,14 +189,16 @@ const Blog = ({ loading }) => {
                       )}
                     </h5>
                   </div>
+                  <div className="col-span-2">
+                    <div className="grid grid-cols-1 gap-6">
+                      {loading || !articles
+                        ? renderSkeleton()
+                        : renderArticles()}
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
-            <div className="col-span-2">
-              <div className="grid grid-cols-1 gap-6">
-                {loading || !articles ? renderSkeleton() : renderArticles()}
-              </div>
-            </div>
           </div>
         </div>
       )}