diff --git a/web/avatars/edit-avatar-menu.css b/web/avatars/edit-avatar-menu.css
--- a/web/avatars/edit-avatar-menu.css
+++ b/web/avatars/edit-avatar-menu.css
@@ -11,7 +11,7 @@
   background-color: var(--button-background-primary-default);
   /* We want the border color of the edit avatar badge to always 
   match the panel background color */
-  border: 2px solid var(--panel-background-primary-default);
+  border: 2px solid var(--frame-background-primary-default);
   border-radius: 50%;
   cursor: pointer;
   transition-duration: 200ms;
diff --git a/web/components/keyserver-pill.css b/web/components/keyserver-pill.css
--- a/web/components/keyserver-pill.css
+++ b/web/components/keyserver-pill.css
@@ -4,7 +4,7 @@
   align-items: center;
   padding: 5px 10px;
   border-radius: 8px;
-  background-color: var(--panel-background-primary-default);
+  background-color: var(--frame-background-primary-default);
   column-gap: 4px;
 }
 
diff --git a/web/navigation-panels/settings-switcher.css b/web/navigation-panels/settings-switcher.css
--- a/web/navigation-panels/settings-switcher.css
+++ b/web/navigation-panels/settings-switcher.css
@@ -2,7 +2,7 @@
   width: 160px;
   padding-top: 12px;
   height: 100%;
-  background-color: var(--panel-background-primary-default);
+  background-color: var(--frame-background-primary-default);
 }
 
 .navigationPanelTab {
diff --git a/web/navigation-sidebar/navigation-sidebar.css b/web/navigation-sidebar/navigation-sidebar.css
--- a/web/navigation-sidebar/navigation-sidebar.css
+++ b/web/navigation-sidebar/navigation-sidebar.css
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  background-color: var(--panel-background-secondary-default);
+  background-color: var(--frame-background-secondary-default);
 }
 
 .footer {
diff --git a/web/settings/account-settings.css b/web/settings/account-settings.css
--- a/web/settings/account-settings.css
+++ b/web/settings/account-settings.css
@@ -1,6 +1,6 @@
 .container {
   flex: 1;
-  background-color: var(--panel-background-primary-default);
+  background-color: var(--frame-background-primary-default);
   overflow: auto;
 }
 
diff --git a/web/settings/danger-zone.css b/web/settings/danger-zone.css
--- a/web/settings/danger-zone.css
+++ b/web/settings/danger-zone.css
@@ -1,6 +1,6 @@
 .container {
   flex: 1;
-  background-color: var(--panel-background-primary-default);
+  background-color: var(--frame-background-primary-default);
 }
 
 .contentContainer {
diff --git a/web/settings/keyserver-selection-list.css b/web/settings/keyserver-selection-list.css
--- a/web/settings/keyserver-selection-list.css
+++ b/web/settings/keyserver-selection-list.css
@@ -1,6 +1,6 @@
 .container {
   flex: 1;
-  background-color: var(--panel-background-primary-default);
+  background-color: var(--frame-background-primary-default);
   padding: 40px;
   max-width: 456px;
 }
diff --git a/web/sidebar/community-creation/community-creation-keyserver-label.css b/web/sidebar/community-creation/community-creation-keyserver-label.css
--- a/web/sidebar/community-creation/community-creation-keyserver-label.css
+++ b/web/sidebar/community-creation/community-creation-keyserver-label.css
@@ -3,7 +3,7 @@
   justify-content: center;
   align-items: center;
   height: 40px;
-  background-color: var(--panel-background-tertiary-default);
+  background-color: var(--frame-background-tertiary-default);
   margin-top: 20px;
 }
 
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -254,10 +254,10 @@
 
 /* Dark theme (default CSS theme) */
 :root {
-  /* Panel */
-  --panel-background-primary-default: var(--shades-black-95);
-  --panel-background-secondary-default: var(--shades-black-85);
-  --panel-background-tertiary-default: var(--shades-black-75);
+  /* Frame */
+  --frame-background-primary-default: var(--shades-black-95);
+  --frame-background-secondary-default: var(--shades-black-85);
+  --frame-background-tertiary-default: var(--shades-black-75);
 
   /* Text */
   --text-background-primary-default: var(--shades-white-100);
@@ -340,10 +340,10 @@
 
 /* Light theme */
 [data-theme='light'] {
-  /* Panel */
-  --panel-background-primary-default: var(--shades-white-100);
-  --panel-background-secondary-default: var(--shades-white-80);
-  --panel-background-tertiary-default: var(--shades-white-60);
+  /* Frame */
+  --frame-background-primary-default: var(--shades-white-100);
+  --frame-background-secondary-default: var(--shades-white-80);
+  --frame-background-tertiary-default: var(--shades-white-60);
 
   /* Text */
   --text-background-primary-default: var(--shades-black-95);