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>
       )}
diff --git a/src/components/project/index.jsx b/src/components/project/index.jsx
index 53351d1..d4ad894 100644
--- a/src/components/project/index.jsx
+++ b/src/components/project/index.jsx
@@ -131,9 +131,9 @@ const Project = ({ repo, 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-3 flex items-center justify-between">
+                <div className="mx-3 flex items-center justify-between mb-2">
                   <h5 className="card-title">
                     {loading ? (
                       skeleton({ width: 'w-28', height: 'h-8' })
@@ -154,14 +154,14 @@ const Project = ({ repo, loading }) => {
                     </a>
                   )}
                 </div>
+                <div className="col-span-2">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {loading || !repo ? renderSkeleton() : renderProjects()}
+                  </div>
+                </div>
               </div>
             </div>
           </div>
-          <div className="col-span-2">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              {loading || !repo ? renderSkeleton() : renderProjects()}
-            </div>
-          </div>
         </div>
       </div>
     </Fragment>