diff --git a/app/javascript/styles/cybre-light.scss b/app/javascript/styles/cybre-light.scss
index fb29c0521..403b30862 100644
--- a/app/javascript/styles/cybre-light.scss
+++ b/app/javascript/styles/cybre-light.scss
@@ -1,54 +1,25 @@
-@import 'mastodon-light/variables';
-
-// $ui-base-color: #f7e8ed; // "darkest"
-// $ui-base-lighter-color: darken($ui-base-color, 40%); // Lighter darkest
-// $ui-secondary-color: #ead0d6; // "lightest"
-// $ui-primary-color: #bf5677; // "lighter"
-// $ui-highlight-color: #bf5677; // "vibrant"
-// $primary-text-color: #382b32;
-// $secondary-text-color: #382b32;
-// 
-// $icon-button-inactive-color: lighten(desaturate($ui-base-lighter-color, 20%), 20%);
-// $action-button-color: $icon-button-inactive-color;
-// 
-// $about-page-text: $primary-text-color;
-
 $ui-base-color: #f7e8ed; // "darkest"
-$ui-base-lighter-color: lighten($ui-base-color, 40%); // Lighter darkest
-$ui-primary-color: #ed9aad; // "lighter"
-$ui-secondary-color: #6d3e4d;
-$ui-highlight-color: #bf5677; // "vibrant"
 $ui-base-alt: #f9f2f5;
+$ui-base-lighter-color: darken($ui-base-color, 40%); // Lighter darkest
+$ui-secondary-color: #ead0d6; // "lightest"
+$ui-primary-color: #bf5677; // "lighter"
+$ui-highlight-color: #bf5677; // "vibrant"
+$primary-text-color: #382b32;
+$secondary-text-color: #382b32;
 
-$header-color: $ui-highlight-color;
+$header-color: $ui-primary-color;
 $header-text-color: #fff;
-
-$darker-text-color: #38282c;
-$dark-text-color: #5b4348;
-
-$lighter-text-color: #38282c;
-$light-text-color: #5b4348;
-
-$icon-button-inactive-color: darken(desaturate($ui-base-lighter-color, 10%), 20%);
+$icon-button-inactive-color: lighten(desaturate($ui-base-lighter-color, 20%), 20%);
 $action-button-color: $icon-button-inactive-color;
 
-@import 'cybre-base';
+$about-page-text: $primary-text-color;
+
+@import 'application';
 
-@import 'mastodon-light/diff';
 
 $gold-star: #dd9d08;
 
-//Un-invert darkened and lightened functions
-@function darken($color, $amount) {
-  @return hsl(hue($color), saturation($color), lightness($color) - $amount);
-}
-
-@function lighten($color, $amount) {
-  @return hsl(hue($color), saturation($color), lightness($color) + $amount);
-}
-
-
-// cybre-specific additions
+/* cybre-specific additions */
 
 .column .static-content.getting-started {
   background-image: url('../images/logo-cybre-light.png');
@@ -61,14 +32,207 @@ $gold-star: #dd9d08;
   background: $ui-base-color url('../images/background-cybre-light.png');
 }
 
-// about.scss 
-#mastodon-timeline {
-  .column-header {
-    color:white;
+.drawer__inner__mastodon {
+  display: none;
+}
+
+.landing-page .header-wrapper {
+    background-image:url('../images/header-cybre-alt.jpg');
+    background-size:cover;
+    background-position:50% 50%;
+}
+
+.landing-page.alternative .header {
+    background-image:url('../images/header-cybre-colour.jpg');
+    background-repeat: repeat-x;
+    background-size:contain;
+    height:45vh;
+    width: 100%;
+    position:absolute;
+    z-index: 1;
+    text-align:center;
+
+    display: unset!important;
+}
+
+.landing-page.alternative .header img {
+    margin: auto;
+    max-height:45vh;
+}
+
+
+.landing-page.alternative .grid {
+    position: relative;
+    z-index:2;
+    margin-top:15vh;
+}
+
+.landing-page.alternative .landing-page__hero img {
+    visibility: hidden;
+    max-height:170px;
+}
+
+.landing-page.alternative .landing-page__forms {
+    height:auto;
+}
+
+.landing-page.alternative .column-1 {
+    display:flex;
+    align-items:flex-end;
+}
+
+.landing-page.alternative .column {
+    max-height:initial;
+}
+
+.landing-page.alternative .row__mascot {
+    .floats {
+        position:absolute;
+        img {
+            width:100%;
+            height:100%;
+        }
+        transition: all 0.1s linear;
+        animation-name: floating;
+        animation-iteration-count: infinite;
+        animation-direction: alternate;
+        animation-timing-function: ease-in-out;
+    }
+
+    .float-1 {
+        width:50px;
+        height:50px;
+        bottom:60px;
+        left:110px;
+        animation-duration: 3s;
+    }
+
+    .float-2 {
+        width:130px;
+        height:130px;
+        left:85px;
+        bottom: -60px;
+        animation-duration: 3.5s;
+        animation-delay: 0.2s;
+    }
+
+    .float-3 {
+        width:100px;
+        height:100px;
+        right: 50;
+        top: -10px;
+        animation-duration: 4s;
+        animation-delay: 0.5s;
+    }
+}
+
+/* about.scss */
+
+.landing-page {
+  h1 {
+    color: $about-page-text;
+    small {
+      color: lighten($about-page-text, 10%);
+    }
+  }
+  p, li {
+    color: $about-page-text;
+  }
+
+  .header-wrapper {
+    padding-top:0px;
+
+    background-size:cover;
+    background-position:50% 55%;
+  }
+
+  .header-wrapper {
+    .mascot {
+        width:500px;
+        bottom:-52px;
+        left:-120px;
+    }
+  }
+
+  .container.links {
+     background-color: $ui-base-color;
+     border-top: 5px solid $ui-primary-color;
+     width:100%;
+     max-width:100%;
+     padding:0px calc(50% - 400px);
+
+     a {
+        &:hover {
+          color: lighten($ui-primary-color, 10%);
+        }
+     }
+  }
+
+  .container.hero {
+      .floats {
+          display:none;
+      }
+
+      .closed-registrations-message, form {
+          border-top: 50px solid #5f4770;
+          -webkit-box-shadow: 0 0 6px rgba(0,0,0,.1);
+          box-shadow: 0 0 6px rgba(0,0,0,.1);
+
+          &:before {
+              font-size: 16px;
+              font-family:inherit;
+              line-height:inherit;
+              font-weight:normal;
+              color:white;
+              position:absolute;
+              top:-35px;
+          }
+      }
+
+      .closed-registrations-message:before {
+          content: "Registrations closed";
+      }
+
+      form:before {
+          content: "Register now";
+      }
+  }
+
+  #mastodon-timeline {
+    .column-header {
+      color:white;
+    }
   }
 }
 
-// components.scss
+.features-list__row {
+  .text {
+    color: $about-page-text;
+  }
+}
+
+.information-board {
+  .panel {
+    .panel-header {
+      color: $primary-text-color;
+      border-bottom: 1px solid lighten($ui-secondary-color, 4%);
+
+      a,
+      span {
+        font-weight: 400;
+        color: lighten($ui-primary-color, 4%);
+      }
+    }
+  }
+}
+
+/* components.scss */
+
+.onboarding-modal__page {
+  p {
+    color: $primary-text-color;
+  }
+}
 
 .column-header {
   background: $header-color;
@@ -112,47 +276,154 @@ $gold-star: #dd9d08;
   background: darken($ui-base-alt, 2%);
 }
 
-/* More colorful compose form */
+.empty-column-indicator,
+.error-column {
+  color: darken($ui-base-lighter-color, 15%);
+}
+
+
 .compose-form {
   .autosuggest-textarea__textarea,
   .spoiler-input__input {
     color: $primary-text-color;
-    border: 1px solid $ui-highlight-color;
+    border: 1px solid $ui-primary-color;
   }
 
   .autosuggest-textarea__textarea {
     border-bottom-width:0px;
   }
   .compose-form__modifiers {
-    border: 1px solid $ui-highlight-color;
+    border: 1px solid $ui-primary-color;
     border-top-width:0px;
   }
 
   .compose-form__buttons button.active:last-child {
     border-radius:3px;
     background: $ui-base-color;
-    color: $ui-highlight-color;
+    color: $ui-primary-color;
   }
   .compose-form__buttons-wrapper {
-    background-color:$ui-highlight-color;
+    background-color:$ui-primary-color;
   }
 
   .icon-button.inverted {
-    color: $white;
+    color:white;
 
     &:hover {
-      color:darken($ui-base-color, 5%);
+      color:$ui-secondary-color;
     }
   }
 }
-.compose-form .compose-form__buttons-wrapper .character-counter__wrapper
-.character-counter {
-  color: $white;
+
+button.icon-button {
+  &.disabled {
+  }
 }
 
-/* Fix the privacy dropdown options */
-.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
+.icon-button {
+  &.inverted {
+    color: darken($ui-base-lighter-color, 10%);
+  }
+
+  &.overlayed {
+    background: rgba($base-overlay-background, 0.2);
+    color: rgba($white, 0.7);
+
+    &:hover {
+      background: rgba($base-overlay-background, 0.4);
+    }
+  }
+
+  &.disabled {
+    color: desaturate($icon-button-inactive-color, 5%);
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: desaturate($icon-button-inactive-color, 5%);
+    }
+  }
+
+  color: $icon-button-inactive-color;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: darken($icon-button-inactive-color, 5%);
+  }
+}
+
+.icon-button.star-icon,
+.icon-button.star-icon:active {
+  background:transparent;
+  border:none;
+}
+
+.icon-button.star-icon.active {
+  color: $gold-star;
+  &:active,  &:hover, &:focus {
+    color: $gold-star;
+  }
+}
+
+.text-icon-button {
+  color: $white;
+  &.active {
+    background: $ui-base-color;
+    color: $ui-primary-color;
+  }
+  &:focus, &:hover {
+    color: darken($ui-base-color, 3%);
+  }
+}
+.status.status-direct {
+  background: darken($ui-base-alt, 5%);
+  .icon-button.disabled {
+    color: lighten($ui-base-lighter-color, 10%);
+  }
+}
+
+.account__header, .account-card {
+  & > div {
+    background: rgba(lighten($ui-base-color, 4%), 0.6);
+  }
+
+  .account__header__content {
+    color: $primary-text-color;
+  }
+
+  .detailed-status__display-name .display-name strong {
     color: $ui-highlight-color;
+  }
+
+  .icon-button {
+    &, &:hover {
+      color:desaturate($ui-base-lighter-color, 20%);
+    }
+    &.active {
+      &, &:hover {
+        color:$ui-base-lighter-color;
+      }
+    }
+  }
+}
+
+.account__section-headline a {
+  &.active {
+    color: $primary-text-color;
+
+    &::after {
+      border-bottom-color: $ui-base-alt;
+    }
+
+    &::after {
+      border-bottom-color: $ui-base-alt;
+    }
+  }
+}
+
+.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
+    color: $ui-primary-color;
 }
 
 .privacy-dropdown__option {
@@ -176,76 +447,463 @@ $gold-star: #dd9d08;
   }
 }
 
-/* Fix the CW button */
-.text-icon-button {
-  color: $white;
-  &.active {
-    background: $ui-base-color;
+.emoji-picker-dropdown__menu {
+  .emoji-search-wrapper {
+    border-color: darken($ui-base-color, 10%);
+  }
+  .emoji-search {
+    background: darken($ui-base-color, 5%);
+    border-color: darken($ui-base-color, 10%);
+  }
+  .emoji-mart {
     color: $ui-primary-color;
   }
-  &:focus, &:hover {
-    color: darken($ui-base-color, 3%);
+}
+
+.search-popout {
+  background: $ui-base-color;
+  color: $ui-primary-color;
+
+  h4 {
+    color: $ui-primary-color;
   }
+
+  em {
+    color: $ui-highlight-color;
+  }
+}
+.search__icon .fa.active {
+  opacity:1.0;
+}
+.search-results__hashtag {
+  color: darken($ui-primary-color, 10%);
+  &:hover {
+    color: lighten($ui-primary-color, 5%);
+  }
+}
+
+.static-content {
+    /*color: $primary-text-color;*/
+}
+
+#Getting-started {
+  background: $ui-primary-color;
+  border-bottom:0px;
+  color:white;
+}
+
+.getting-started {
+  p {
+    color: $primary-text-color;
+  }
+
+  a {
+    color: darken($ui-base-lighter-color, 10%);
+  }
+}
+.getting-started__wrapper {
+  flex: 0 0.5 auto;
 }
 
 .column-link {
-  background: lighten($ui-highlight-color, 5%);
+  background: lighten($ui-primary-color, 5%);
   color:$white;
   &:hover {
-    background: lighten($ui-highlight-color, 10%);
+    background: lighten($ui-primary-color, 10%);
   }
 }
 .column-link__badge {
-  background: saturate(darken($ui-highlight-color, 5%), 5%);
+  background: saturate(darken($ui-primary-color, 5%), 5%);
 }
 .column-subheading {
-  background: darken($ui-highlight-color, 5%);
+  background: darken($ui-primary-color, 5%);
   color:$white;
 }
 
+.media-spoiler,
+.video-player__spoiler.active {
+  color: $white;
+  &:hover {
+    color: darken($white, 5%);
+  }
+}
+
+.status {
+  border-bottom: 1px solid $ui-secondary-color;
+}
+
 .status__relative-time, .status__display-name {
-  color: darken($ui-base-color, 60%);
+  color: darken($ui-base-color, 40%);
 }
 
 .status__content {
   .status__content__spoiler-link {
     background: $ui-base-lighter-color;
-    color: $white;
 
     &:hover {
       background: lighten($ui-base-lighter-color, 5%);
-      color: $white;
     }
   }
 }
 
-.modal-root__overlay {
-  background: rgba(0,0,0,.7);
+.muted .status__content p {
+  color: $icon-button-inactive-color;
 }
 
-.reply-indicator {
-  background-color: $ui-highlight-color;
-  color: $white;
+.dropdown-menu__item {
+  & > a {
+    color: $primary-text-color;
+    &:hover {
+      color: $ui-base-color;
+    }
+  }
 }
-.reply-indicator__display-name,
-.reply-indicator__content {
-  color: $white;
+
+.dropdown--active .dropdown__content {
+  & > ul {
+    background: $ui-base-color;
+    box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
+    & > li > a {
+      background: $ui-base-color;
+      color: $primary-text-color;
+
+      &:hover {
+        background: $ui-highlight-color;
+        color: $ui-base-color;
+      }
+    }
+  }
 }
+
+.boost-modal,
+.confirmation-modal,
+.report-modal,
+.actions-modal,
+.mute-modal
+{
+  color: $primary-text-color;
+}
+.boost-modal__action-bar,
+.confirmation-modal__action-bar,
+.mute-modal__action-bar,
+.report-modal__action-bar,
+.mute-modal__action-bar  {
+  & > div {
+    color: $ui-primary-color;
+  }
+}
+
+.actions-modal
+{
+  ul {
+    li:not(:empty) {
+      a {
+        color: $primary-text-color;
+        button {
+
+        }
+        &.active, &:hover, &:active, &:focus {
+          color: $white;
+          button {
+            color: $white;
+          }
+        }
+      }
+    }
+  }
+}
+
+.react-toggle-track {
+  background-color: $icon-button-inactive-color;
+}
+
+.report-modal__comment .setting-text {
+  color: $primary-text-color;
+  border-bottom-color: lighten($ui-primary-color, 10%);
+  &:focus, &:active {
+    color: $primary-text-color;
+  }
+}
+
+.status.light {
+  .status__content {
+    color: $primary-text-color;
+  }
+  .display-name strong {
+    color: $primary-text-color;
+  }
+}
+
 .reply-indicator__content a {
-   color: lighten($ui-primary-color, 10%);
+  color: lighten($ui-highlight-color, 30%);
+}
+
+.status__content
+{
+  a {
+    color: $ui-highlight-color;
+
+    &:hover {
+      .fa {
+        color: darken($ui-base-color, 40%);
+      }
+    }
+  }
+}
+
+.detailed-status__display-name {
+  color: $ui-base-lighter-color;
 }
 
 .drawer .drawer__inner {
+  overflow: visible;
+  height:inherit;
   background:$ui-base-alt;
 }
 
+.drawer__pager {
+  overflow-y:auto;
+}
+
 .drawer .drawer__header {
   background: $ui-base-color;
   border-radius:3px;
 }
 
+.onboarding-modal__page h1 {
+  background-color: darken($ui-primary-color, 5%);
+}
+
+/* forms.scss */
+.block-button, .button, button {
+  background-color: $ui-primary-color;
+  color: $white;
+
+  &.button-alternative {
+    color: $ui-base-color;
+  }
+}
+
+.simple_form {
+  p.hint {
+    color: $primary-text-color;
+  }
+
+  .block-button, .button, button {
+    background-color: $ui-primary-color;
+    color: $white;
+
+    &:hover {
+      background-color: lighten($ui-primary-color, 5%);
+    }
+
+    &:active,
+    &:focus {
+      background-color: darken($ui-primary-color, 5%);
+    }
+
+  }
+}
+
+/* admin.scss */
+
+.table > thead > tr > th {
+  border-bottom-color:  $ui-secondary-color;
+}
+
+.simple_form h4 {
+  border-bottom: 1px solid $ui-highlight-color;
+}
+
+.admin-wrapper {
+  .content {
+    h2, p.hint, h4, h6 {
+      color: $primary-text-color;
+    }
+
+    .muted-hint {
+      color: $primary-text-color;
+    }
+  }
+
+  .sidebar {
+    .logo {
+      -webkit-filter: invert(100%);
+      filter: invert(100%);
+    }
+
+    ul {
+      ul {
+        a {
+          &.selected {
+            background-color: $ui-primary-color;
+            color: $white;
+
+            &:hover {
+              background-color: lighten($ui-primary-color, 10%);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.pagination .current {
+  color: $ui-primary-color;
+}
+
+.report-accounts__item > strong {
+  color: $primary-text-color;
+}
+
+.admin-wrapper .content { 
+  & > p {
+    color: $primary-text-color;
+  }
+  hr {
+    border-color: $ui-highlight-color;
+  }
+}
+
+/* accounts.scss */
+.card {
+  .name {
+    color: $white;
+  }
+
+  .counter {
+    .counter-number {
+      color: $white;
+    }
+  }
+}
+
+/* stream_entries.scss */
+.activity-stream {
+  .entry {
+  }
+  .status.light {
+    .display-name {
+      strong {
+        color: $primary-text-color;
+      }
+    }
+    .status__content {
+      color: $primary-text-color;
+    }
+  }
+  .detailed-status.light {
+    .detailed-status__display-name {
+      .display-name {
+        strong {
+          color: $primary-text-color;
+        }
+      }
+    }
+    .status__content {
+      color: $primary-text-color;
+    }
+    .status-card,
+    .status-card__title,
+    .status-card__description {
+      color: $primary-text-color;
+    }
+  }
+}
+
+/* accounts.scss */
+.card {
+  .name {
+    color: darken($ui-primary-color, 15%);
+  }
+  .counter {
+    .counter-number {
+      color: darken($ui-primary-color, 15%);
+    }
+    border-color: $ui-primary-color;
+  }
+}
+
+.activity-stream-tabs {
+  a {
+    color: lighten($ui-primary-color, 10%);
+    &.active {
+      color: darken($ui-primary-color, 10%);
+    }
+  }
+}
+
+/* uncategorized */
+
+@media screen and (min-width: 1300px) {
+  .column {
+    flex-grow: 1 !important;
+    max-width: 400px;
+  }
+
+  .drawer {
+    width: 17%;
+    max-width: 400px;
+    min-width: 330px;
+  }
+}
+
+.status time:after,
+.detailed-status__datetime span:after {
+  font: normal normal normal 14px/1 FontAwesome;
+  content: "\00a0\00a0\f08e";
+}
+
+
 .column {
+  max-height:100vh;
   & > .scrollable {
     background-color: $ui-base-alt;
   }
 }
+
+.empty-column-indicator, .error-column {
+  background-color: $ui-base-alt;
+}
+
+
+.media-gallery,
+.video-player {
+  max-height:30vh;
+  height:30vh !important;
+  position:relative;
+  margin-top:20px;
+  margin-left:-68px;
+  width: calc(100% + 80px) !important;
+  max-width: calc(100% + 80px);
+}
+
+.detailed-status .media-gallery,
+.detailed-status .video-player {
+  margin-left:-10px;
+  width: calc(100% + 22px);
+  max-width: calc(100% + 22px);
+}
+
+.video-player video {
+  transform: unset;
+  top: unset;
+}
+
+.detailed-status .media-spoiler,
+.status .media-spoiler {
+  height:100% !important;
+  vertical-align:middle;
+}
+
+.actions .button.button-alternative {
+    background: $ui-highlight-color;
+    color: $white;
+
+    &:active,
+    &:focus,
+    &:hover {
+      background-color: lighten($ui-highlight-color, 4%);
+    }
+}