diff --git a/kolibri/core/assets/src/views/AppBar.vue b/kolibri/core/assets/src/views/AppBar.vue
index 7240be71e5..9af9ddc559 100644
--- a/kolibri/core/assets/src/views/AppBar.vue
+++ b/kolibri/core/assets/src/views/AppBar.vue
@@ -373,7 +373,7 @@
   }
 
   .points-popover {
-    @extend %dropshadow-4dp;
+    @extend %dropshadow-6dp;
 
     position: absolute;
     right: 50px;
diff --git a/kolibri/core/assets/src/views/BottomAppBar.vue b/kolibri/core/assets/src/views/BottomAppBar.vue
index fb7c56bd4f..e074b68e1c 100644
--- a/kolibri/core/assets/src/views/BottomAppBar.vue
+++ b/kolibri/core/assets/src/views/BottomAppBar.vue
@@ -35,7 +35,7 @@
   @import '~kolibri-design-system/lib/styles/definitions';
 
   .bottom {
-    @extend %dropshadow-8dp;
+    @extend %dropshadow-6dp;
 
     position: fixed;
     right: 0;
diff --git a/kolibri/core/assets/src/views/BottomNavigationBar.vue b/kolibri/core/assets/src/views/BottomNavigationBar.vue
index cebe134162..70e101e5a1 100644
--- a/kolibri/core/assets/src/views/BottomNavigationBar.vue
+++ b/kolibri/core/assets/src/views/BottomNavigationBar.vue
@@ -115,7 +115,7 @@
   @import '~kolibri-design-system/lib/styles/definitions';
 
   .bottom-bar {
-    @extend %dropshadow-4dp;
+    @extend %dropshadow-2dp;
 
     position: fixed;
     right: 0;
diff --git a/kolibri/core/assets/src/views/CoreBanner.vue b/kolibri/core/assets/src/views/CoreBanner.vue
index 74738a21d9..c95b048752 100644
--- a/kolibri/core/assets/src/views/CoreBanner.vue
+++ b/kolibri/core/assets/src/views/CoreBanner.vue
@@ -101,7 +101,7 @@
   @import '~kolibri-design-system/lib/styles/definitions';
 
   .banner {
-    @extend %dropshadow-16dp;
+    @extend %dropshadow-6dp;
 
     position: relative;
     width: 100%;
diff --git a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
index 44686c46c4..284686528d 100644
--- a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
+++ b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
@@ -204,13 +204,13 @@
   @import '~kolibri-design-system/lib/styles/definitions';
 
   .app-bar {
-    @extend %dropshadow-8dp;
+    @extend %dropshadow-2dp;
 
     width: 100%;
   }
 
   .android-nav-bottom-bar {
-    @extend %dropshadow-4dp;
+    @extend %dropshadow-1dp;
 
     position: fixed;
     right: 0;
diff --git a/kolibri/core/assets/src/views/SideNav.vue b/kolibri/core/assets/src/views/SideNav.vue
index 3db86cc2ad..5ef65c04d7 100644
--- a/kolibri/core/assets/src/views/SideNav.vue
+++ b/kolibri/core/assets/src/views/SideNav.vue
@@ -542,7 +542,7 @@
   }
 
   .side-nav {
-    @extend %dropshadow-16dp;
+    @extend %dropshadow-6dp;
 
     position: fixed;
     top: 0;
diff --git a/kolibri/core/assets/src/views/SkipNavigationLink.vue b/kolibri/core/assets/src/views/SkipNavigationLink.vue
index 6c126c5324..216debd6d2 100644
--- a/kolibri/core/assets/src/views/SkipNavigationLink.vue
+++ b/kolibri/core/assets/src/views/SkipNavigationLink.vue
@@ -71,7 +71,7 @@
   }
 
   .skip-nav-link a {
-    @extend %dropshadow-4dp;
+    @extend %dropshadow-2dp;
 
     position: absolute;
     left: -1000px;
diff --git a/kolibri/core/assets/src/views/sortable/DragContainer.vue b/kolibri/core/assets/src/views/sortable/DragContainer.vue
index aba161fbd2..03e5cd4a9e 100644
--- a/kolibri/core/assets/src/views/sortable/DragContainer.vue
+++ b/kolibri/core/assets/src/views/sortable/DragContainer.vue
@@ -101,7 +101,7 @@
   @import '~kolibri-design-system/lib/styles/definitions';
 
   /deep/ .draggable-mirror {
-    @extend %dropshadow-8dp;
+    @extend %dropshadow-6dp;
 
     z-index: 8;
     cursor: grabbing;
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 1439f7eee1..a186660583 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -962,7 +962,7 @@
     border-radius: 2px;
 
     .ease:hover {
-      @extend %dropshadow-8dp;
+      @extend %dropshadow-6dp;
       @extend %md-decelerate-func;
 
       transition: all $core-time;
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue
index 82294a191e..aefe2e4ede 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue
@@ -132,7 +132,7 @@
 
     &:hover,
     &:focus {
-      @extend %dropshadow-8dp;
+      @extend %dropshadow-6dp;
     }
   }
 
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue
index 26aed6f137..a36b7576bc 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue
@@ -620,7 +620,7 @@
     border-radius: 2px;
 
     .ease:hover {
-      @extend %dropshadow-8dp;
+      @extend %dropshadow-6dp;
       @extend %md-decelerate-func;
 
       transition: all $core-time;
diff --git a/kolibri/plugins/learn/assets/src/views/CardList.vue b/kolibri/plugins/learn/assets/src/views/CardList.vue
index 51f9f68e8f..115ac29bc1 100644
--- a/kolibri/plugins/learn/assets/src/views/CardList.vue
+++ b/kolibri/plugins/learn/assets/src/views/CardList.vue
@@ -255,7 +255,7 @@
     @extend %dropshadow-1dp;
 
     &:hover {
-      @extend %dropshadow-8dp;
+      @extend %dropshadow-6dp;
     }
   }
 
diff --git a/kolibri/plugins/learn/assets/src/views/ChannelCard.vue b/kolibri/plugins/learn/assets/src/views/ChannelCard.vue
index 5bbb7b49ca..6f3725191f 100644
--- a/kolibri/plugins/learn/assets/src/views/ChannelCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/ChannelCard.vue
@@ -201,7 +201,7 @@
     transition: box-shadow $core-time ease;
 
     &:hover {
-      @extend %dropshadow-8dp;
+      @extend %dropshadow-6dp;
     }
 
     &:focus {
diff --git a/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue b/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue
index e9441c50ff..f83dde5b04 100644
--- a/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue
@@ -544,7 +544,7 @@
   }
 
   .modal {
-    @extend %dropshadow-16dp;
+    @extend %dropshadow-6dp;
     @extend %momentum-scroll;
 
     position: absolute;
diff --git a/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/index.vue b/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/index.vue
index 2df849dc4b..141184e08d 100644
--- a/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/index.vue
@@ -135,7 +135,7 @@
     @extend %dropshadow-1dp;
 
     &:hover {
-      @extend %dropshadow-8dp;
+      @extend %dropshadow-6dp;
     }
   }
 
diff --git a/kolibri/plugins/learn/assets/src/views/HybridLearningLessonCard.vue b/kolibri/plugins/learn/assets/src/views/HybridLearningLessonCard.vue
index 31e27ad9b1..00865a5fcf 100644
--- a/kolibri/plugins/learn/assets/src/views/HybridLearningLessonCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/HybridLearningLessonCard.vue
@@ -82,7 +82,7 @@
     @extend %dropshadow-1dp;
 
     &:hover {
-      @extend %dropshadow-4dp;
+      @extend %dropshadow-6dp;
     }
   }
 
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue
index d319be45b1..afa235846c 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue
@@ -141,7 +141,7 @@
     transition: box-shadow $core-time ease;
 
     &:hover {
-      @extend %dropshadow-8dp;
+      @extend %dropshadow-6dp;
     }
 
     &:focus {
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
index 0d876c0e62..d6603aac6c 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -604,7 +604,7 @@
     transition: box-shadow $core-time ease;
 
     &:hover {
-      @extend %dropshadow-8dp;
+      @extend %dropshadow-6dp;
     }
 
     &:focus {
diff --git a/kolibri/plugins/learn/assets/src/views/StorageNotification.vue b/kolibri/plugins/learn/assets/src/views/StorageNotification.vue
index 92ebe77fa1..8dc24384e0 100644
--- a/kolibri/plugins/learn/assets/src/views/StorageNotification.vue
+++ b/kolibri/plugins/learn/assets/src/views/StorageNotification.vue
@@ -260,7 +260,7 @@
   @import '~kolibri-design-system/lib/styles/definitions';
 
   .banner {
-    @extend %dropshadow-16dp;
+    @extend %dropshadow-6dp;
 
     position: relative;
     width: 100%;
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsPanelModal.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsPanelModal.vue
index f0e57b7fca..538d2c7837 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsPanelModal.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsPanelModal.vue
@@ -101,11 +101,15 @@
 
 <style lang="scss" scoped>
 
+  @import '~kolibri-design-system/lib/styles/definitions';
+
   .drawer-panel {
     padding-bottom: 60px;
   }
 
   .side-panel {
+    @extend %dropshadow-2dp;
+
     position: fixed;
     top: 60px;
     left: 0;
@@ -113,7 +117,6 @@
     padding: 24px 24px 0;
     overflow-y: scroll;
     font-size: 14px;
-    box-shadow: 0 3px 3px 0 #00000040;
   }
 
   /*
diff --git a/kolibri/plugins/learn/assets/src/views/cards/CardLink.vue b/kolibri/plugins/learn/assets/src/views/cards/CardLink.vue
index a44c7dc1d5..aa3c5d1df3 100644
--- a/kolibri/plugins/learn/assets/src/views/cards/CardLink.vue
+++ b/kolibri/plugins/learn/assets/src/views/cards/CardLink.vue
@@ -52,7 +52,7 @@
     transition: box-shadow $core-time ease;
 
     &:hover {
-      @extend %dropshadow-8dp;
+      @extend %dropshadow-6dp;
     }
   }
 
diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/SideBar/index.vue b/kolibri/plugins/pdf_viewer/assets/src/views/SideBar/index.vue
index a66924275f..fd6f79f42d 100644
--- a/kolibri/plugins/pdf_viewer/assets/src/views/SideBar/index.vue
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/SideBar/index.vue
@@ -144,9 +144,11 @@
 
 <style scoped lang="scss">
 
+  @import '~kolibri-design-system/lib/styles/definitions';
+
   .pdf-sidebar {
     overflow-y: auto;
-    box-shadow: inset -1px 2px 8px rgba(0, 0, 0, 0.16);
+    @extend %dropshadow-2dp;
   }
 
   .tab:focus-visible {
diff --git a/kolibri/plugins/user_auth/assets/src/views/AuthBase.vue b/kolibri/plugins/user_auth/assets/src/views/AuthBase.vue
index 63d63df39d..9ef1042673 100644
--- a/kolibri/plugins/user_auth/assets/src/views/AuthBase.vue
+++ b/kolibri/plugins/user_auth/assets/src/views/AuthBase.vue
@@ -376,7 +376,7 @@
   }
 
   .box {
-    @extend %dropshadow-16dp;
+    @extend %dropshadow-6dp;
 
     position: relative;
     z-index: 1;
@@ -409,7 +409,7 @@
   }
 
   .footer-cell {
-    @extend %dropshadow-8dp;
+    @extend %dropshadow-6dp;
 
     padding: 16px;
   }
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/index.vue b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
index 01443524d4..5b13d9fe3c 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/index.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
@@ -366,11 +366,15 @@
 
 <style lang="scss" scoped>
 
+  @import '~kolibri-design-system/lib/styles/definitions';
+
   .drawer-panel {
     padding-bottom: 60px;
   }
 
   .side-panel {
+    @extend %dropshadow-2dp;
+
     position: fixed;
     top: 60px;
     left: 0;
@@ -378,7 +382,6 @@
     padding: 24px 24px 0;
     overflow-y: scroll;
     font-size: 14px;
-    box-shadow: 0 3px 3px 0 #00000040;
   }
 
   /*