diff --git a/src/components/About.vue b/src/components/About.vue
index a9e68c4..f0a2ea5 100644
--- a/src/components/About.vue
+++ b/src/components/About.vue
@@ -9,7 +9,7 @@
     </v-row>
     <v-row justify="center">
       <v-card
-        class="pa-5 rounded-xl"
+        class="pa-5 rounded-xl elevation-24"
         width="90%"
         height="100%"
       >
diff --git a/src/components/AvatarLinks.vue b/src/components/AvatarLinks.vue
index 5262f6b..039083a 100644
--- a/src/components/AvatarLinks.vue
+++ b/src/components/AvatarLinks.vue
@@ -4,7 +4,7 @@
       justify="center"
     >
       <v-card
-        elevation="20"
+        elevation="24"
       >
         <v-row
           class="mx-5 my-5"
diff --git a/src/components/Courses.vue b/src/components/Courses.vue
index 3b3aefe..1a4677e 100644
--- a/src/components/Courses.vue
+++ b/src/components/Courses.vue
@@ -20,6 +20,7 @@
         dense
         multi-sort
         no-data-text="No data"
+        class="elevation-24"
       >
         <template #[`item.url`]="{ item }">
           <v-btn
diff --git a/src/components/Education.vue b/src/components/Education.vue
index ac8e2c0..f63c0fb 100644
--- a/src/components/Education.vue
+++ b/src/components/Education.vue
@@ -11,7 +11,7 @@
     </v-row>
     <v-row justify="center">
       <v-card
-        class="pa-5 rounded-xl"
+        class="pa-5 rounded-xl elevation-24"
         width="90%"
         height="100%"
       >
diff --git a/src/components/Experience.vue b/src/components/Experience.vue
index ea9942d..579bfa3 100644
--- a/src/components/Experience.vue
+++ b/src/components/Experience.vue
@@ -11,7 +11,7 @@
     </v-row>
     <v-row justify="center">
       <v-card
-        class="pa-5 rounded-xl"
+        class="pa-5 rounded-xl elevation-24"
         width="90%"
         height="100%"
       >
diff --git a/src/components/Skills.vue b/src/components/Skills.vue
index b5424ac..100c537 100644
--- a/src/components/Skills.vue
+++ b/src/components/Skills.vue
@@ -4,16 +4,14 @@
       class="ma-auto"
     >
       <v-col>
-        <div class="text-start">
-          <h3>
-            {{ $t("skills.title") }}
-          </h3>
-        </div>
+        <h2 class="text-start">
+          {{ $t("skills.title") }}
+        </h2>
       </v-col>
     </v-row>
     <v-row justify="center">
       <v-card
-        class="pa-5 rounded-xl"
+        class="pa-5 rounded-xl elevation-24"
       >
         <v-row class="ma-5">
           <h4>
@@ -28,9 +26,10 @@
             <v-card
               v-for="skill in skills.programming_languages"
               :key="skill"
-              class="px-5 mx-1 my-2"
+              class="px-5 mx-1 my-2 elevation-24"
               outlined
               tile
+              :color="getThemeColor() === 'dark' ? '#FFFFFF' : '#363636'"
             >
               <p class="text-center">
                 <v-icon
@@ -52,9 +51,10 @@
             <v-card
               v-for="skill in skills.web"
               :key="skill"
-              class="px-5 mx-1 my-2"
+              class="px-5 mx-1 my-2 elevation-24"
               outlined
               tile
+              :color="getThemeColor() === 'dark' ? '#FFFFFF' : '#363636'"
             >
               <p class="text-center">
                 <v-icon
@@ -78,9 +78,10 @@
             <v-card
               v-for="skill in skills.databases"
               :key="skill"
-              class="px-5 mx-1 my-2"
+              class="px-5 mx-1 my-2 elevation-24"
               outlined
               tile
+              :color="getThemeColor() === 'dark' ? '#FFFFFF' : '#363636'"
             >
               <p class="text-center">
                 <v-icon
@@ -105,9 +106,10 @@
             <v-card
               v-for="skill in skills.tech"
               :key="skill"
-              class="px-5 mx-1 my-2"
+              class="px-5 mx-1 my-2 elevation-24"
               outlined
               tile
+              :color="getThemeColor() === 'dark' ? '#FFFFFF' : '#363636'"
             >
               <p class="text-center">
                 <v-icon
@@ -179,7 +181,18 @@ export default {
       }
     }
     return {
-      getIcon
+      getIcon,
+      getThemeColor: () => {
+        const themeValue = localStorage.getItem('theme')
+        if (themeValue) {
+          if (themeValue === 'dark') {
+            return 'light'
+          }
+          else {
+            return 'dark'
+          }
+        }
+      }
     }
   },
   data: () => ({