diff --git a/src/components/blog/index.jsx b/src/components/blog/index.jsx
index 04586a2..162fd2b 100644
--- a/src/components/blog/index.jsx
+++ b/src/components/blog/index.jsx
@@ -183,7 +183,13 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
         <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 shadow-sm glass">
+              <div
+                className={`card compact ${
+                  loading || (articles && articles.length)
+                    ? 'bg-gradient-to-b to-base-300 from-base-100'
+                    : 'bg-base-100 shadow-lg'
+                }`}
+              >
                 <div className="card-body">
                   <div className="mx-3 mb-2">
                     <h5 className="card-title">
diff --git a/src/components/project/index.jsx b/src/components/project/index.jsx
index 30641d4..03b5c1e 100644
--- a/src/components/project/index.jsx
+++ b/src/components/project/index.jsx
@@ -130,7 +130,7 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
       <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 shadow-sm glass">
+            <div className="card compact bg-gradient-to-b to-base-300 from-base-100">
               <div className="card-body">
                 <div className="mx-3 flex items-center justify-between mb-2">
                   <h5 className="card-title">