diff --git a/web/chat/chat-input-bar.css b/web/chat/chat-input-bar.css
index b50b10f13..553013a69 100644
--- a/web/chat/chat-input-bar.css
+++ b/web/chat/chat-input-bar.css
@@ -1,110 +1,110 @@
 div.inputBar {
   display: flex;
   flex-direction: column;
   border-top: 1px solid var(--border-color);
 }
 div.inputBarWrapper {
   padding: 16px;
   display: flex;
   flex-direction: row;
   align-items: center;
 }
 div.inputBarTextInput {
   display: flex;
   background: var(--text-input-bg);
   border-radius: 4px;
   padding: 8px;
   align-items: center;
   flex-grow: 1;
 }
 div.inputBarTextInput > textarea {
   flex: 1;
   display: flex;
   border: none;
   resize: none;
   background: var(--text-input-bg);
   color: var(--fg);
 }
 div.inputBarTextInput > textarea:focus {
   outline: none;
 }
 div.joinButtonContainer {
   background: var(--join-bg);
   padding-top: 8px;
   padding-bottom: 8px;
   display: flex;
   flex-direction: row;
   width: 100%;
   justify-content: center;
 }
 button.joinButton {
   display: flex;
   align-items: center;
   background: var(--button-bg);
   border: none;
   padding: 12px 24px;
   border-radius: 4px;
   color: var(--fg);
   font-size: var(--m-font-16);
   font-weight: var(--semi-bold);
   cursor: pointer;
 }
 
 button.joinButton {
   display: flex;
   border-radius: 4px;
   justify-content: center;
   cursor: pointer;
 }
 p.joinButtonText {
   font-size: var(--m-font-16);
   font-weight: var(--semi-bold);
   color: var(--fg);
   padding-left: 12px;
 }
 span.explanation {
-  color: #777777;
+  color: var(--permission-color);
   text-align: center;
-  padding-top: 4px;
+  padding-top: 20px;
   padding-bottom: 8px;
 }
 a.multimediaUpload {
   cursor: pointer;
   position: relative;
   padding-right: 12px;
 }
 a.multimediaUpload > input[type='file'] {
   visibility: hidden;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: 0;
   padding: 0;
 }
 
 a.multimediaUpload > svg {
   color: var(--fg);
 }
 
 div.previews {
   display: flex;
   overflow-x: auto;
   white-space: nowrap;
 }
 div.previews > span.multimedia {
   margin: 10px;
 }
 div.previews > span.multimedia > span.multimediaImage > img {
   max-height: 200px;
   max-width: 200px;
 }
 
 a.sendButton {
   padding: 8px 0 0 10px;
 }
 
 a.sendButton svg {
   color: var(--fg);
 }
diff --git a/web/theme.css b/web/theme.css
index b40da9ad9..3b5a3ec6d 100644
--- a/web/theme.css
+++ b/web/theme.css
@@ -1,98 +1,99 @@
 :root {
   /* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below 
      
      The reason we never use color values defined here directly in CSS is
 
       1. It makes changing themes from light / dark / user generated impossible.
       2. Gives the programmer context into the color being used.
       3. If our color system changes it's much easier to change color values in one place.
 
      Add a color value to the theme below, and then use it in your CSS.
      naming convention:
      - bg: background.
      - fg: foreground.
      - color: text-color
    */
   --shades-white-100: #ffffff;
   --shades-white-90: #f5f5f5;
   --shades-white-80: #ebebeb;
   --shades-white-70: #e0e0e0;
   --shades-white-60: #cccccc;
 
   --shades-black-100: #0a0a0a;
   --shades-black-90: #1f1f1f;
   --shades-black-80: #404040;
   --shades-black-70: #666666;
   --shades-black-60: #808080;
 
   --violet-dark-100: #7e57c2;
   --violet-dark-80: #6d49ab;
   --violet-dark-60: #563894;
   --violet-dark-40: #44297a;
   --violet-dark-20: #331f5c;
 
   --violet-light-100: #ae94db;
   --violet-light-80: #b9a4df;
   --violet-light-60: #d3c6ec;
   --violet-light-40: #e8e0f5;
   --violet-light-20: #f3f0fa;
 
   --success-light-10: #d5f6e3;
   --success-light-50: #6cdf9c;
   --success-primary: #00c853;
   --success-dark-50: #029841;
   --success-dark-90: #034920;
 
   --error-light-10: #feebe6;
   --error-light-50: #f9947b;
   --error-primary: #f53100;
   --error-dark-50: #b62602;
   --error-dark-90: #4f1203;
 
   --bg: var(--shades-black-100);
   --fg: var(--shades-white-100);
   --color-disabled: var(--shades-black-60);
   --text-input-bg: var(--shades-black-80);
   --text-input-color: var(--shades-white-60);
   --text-input-placeholder: var(--shades-white-60);
   --border: var(--shades-black-80);
   --error: var(--error-primary);
   --success: var(--success-dark-50);
 
   /* Color Theme */
   --btn-bg-primary: var(--violet-dark-100);
   --btn-bg-danger: var(--error-primary);
   --chat-bg: var(--violet-dark-80);
   --chat-confirmation-icon: var(--violet-dark-100);
   --keyserver-selection: var(--violet-dark-60);
   --thread-selection: var(--violet-light-80);
   --selected-thread-bg: var(--shades-black-90);
   --chat-timestamp-color: var(--shades-black-60);
   --tool-tip-bg: var(--shades-black-80);
   --tool-tip-color: var(--shades-black-60);
   --border-color: var(--shades-black-60);
   --calendar-chevron: var(--shades-black-60);
   --calendar-day-bg: var(--shades-black-60);
   --calendar-day-selected-color: var(--violet-dark-80);
   --community-bg: var(--shades-black-90);
   --unread-bg: var(--error-primary);
   --settings-btn-bg: var(--violet-dark-100);
   --modal-bg: var(--shades-black-90);
   --join-bg: var(--shades-black-90);
   --help-color: var(--shades-black-60);
   --modal-bg: var(--shades-black-90);
   --breadcrumb-color: var(--shades-black-60);
   --breadcrumb-color-unread: var(--shades-white-60);
   --join-bg: var(--shades-black-90);
   --btn-secondary-border: var(--shades-black-60);
   --thread-color-read: var(--shades-black-60);
   --thread-from-color-read: var(--shades-black-80);
   --thread-last-message-color-read: var(--shades-black-60);
   --relationship-button-green: var(--success-dark-50);
   --relationship-button-red: var(--error-primary);
   --relationship-button-text: var(--fg);
   --disconnected-bar-alert-bg: var(--error-dark-50);
   --disconnected-bar-alert-color: var(--shades-white-100);
   --disconnected-bar-connecting-bg: var(--shades-white-70);
   --disconnected-bar-connecting-color: var(--shades-black-100);
+  --permission-color: var(--shades-white-60);
 }