diff --git a/.angular-cli.json b/.angular-cli.json
index dda057afc1..45162d2987 100644
--- a/.angular-cli.json
+++ b/.angular-cli.json
@@ -17,8 +17,7 @@
       "prefix": "app",
       "styles": [
         "../node_modules/material-design-icons/iconfont/material-icons.css",
-        "styles.scss",
-        "planet-mat-theme.scss"
+        "styles.scss"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {
diff --git a/src/app/variables.scss b/src/app/_variables.scss
similarity index 70%
rename from src/app/variables.scss
rename to src/app/_variables.scss
index 6cfb6b8240..5a895e340e 100644
--- a/src/app/variables.scss
+++ b/src/app/_variables.scss
@@ -1,5 +1,34 @@
+@import '~@angular/material/theming';
+
+$primary-hue: 500;
+$accent-hue: 500;
+$warn-hue: 500;
+
+$planet-primary: $mat-blue;
+$planet-accent: $mat-amber;
+$planet-warn: $mat-red;
+
+$planet-app-primary: mat-palette($planet-primary, $primary-hue);
+$planet-app-accent: mat-palette($planet-accent, $accent-hue);
+$planet-app-warn: mat-palette($planet-warn, $warn-hue);
+
+$planet-app-theme: mat-light-theme($planet-app-primary, $planet-app-accent, $planet-app-warn);
+
+$primary: mat-color($planet-app-primary, $primary-hue);
+$accent: mat-color($planet-app-accent, $accent-hue);
+$primary-text: mat-contrast($planet-primary, $primary-hue);
+$accent-text: mat-contrast($planet-accent, $accent-hue);
+$light-grey: mat-color($mat-grey, 100);
+$grey: mat-color($mat-grey, 400);
+$primary-light: mat-color($planet-app-primary, 100);
+
 $font-family: Roboto, sans-serif;
 
+/*
+ * Old Planet Material Colors
+ * Saved in case we want to revert
+ * We can delete once UX finalizes colors
+
 $ole-blue-light: rgb(76, 165, 211);
 $ole-blue: rgb(42, 121, 200);
 $ole-blue-dark: rgb(0, 62, 99);
@@ -13,10 +42,6 @@ $pending: #ed9121; // Dogi's WIP label color
 $error-red: #a94442;
 // $body-margin: 8px; we won't need to use this if we use bootstrap's container class
 
-/*
- * Old Planet Material Colors
- * Saved in case we want to revert
- * We can delete once UX finalizes colors
 $planet-primary: (
   50 : #e5eff8,
   100 : #bfd7ef,
diff --git a/src/app/courses/request-courses/courses-request.component.scss b/src/app/courses/request-courses/courses-request.component.scss
deleted file mode 100755
index a23b71df25..0000000000
--- a/src/app/courses/request-courses/courses-request.component.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@import '../../variables';
-
-/* from the angular docs */
-// moved it here for now because it may cause issues with other forms
-.ng-valid[required],
-.ng-dirty.ng-valid:not(form) {
-  border-left: 5px solid $ole-green;
-  border-color: $ole-green;
-}
-
-.ng-dirty.ng-invalid:not(form) {
-  border-left: 5px solid $error-red;
-  border-color: $error-red;
-}
-
-.ng-dirty.ng-pending:not(form) {
-  border-left: 5px solid $pending;
-  border-color: $pending;
-}
diff --git a/src/app/courses/request-courses/courses-request.component.ts b/src/app/courses/request-courses/courses-request.component.ts
index d3edcfdee3..987473ec3b 100644
--- a/src/app/courses/request-courses/courses-request.component.ts
+++ b/src/app/courses/request-courses/courses-request.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  templateUrl: 'courses-request.component.html',
-  styleUrls: [ 'courses-request.component.scss' ]
+  templateUrl: 'courses-request.component.html'
 })
 export class CoursesRequestComponent {}
diff --git a/src/planet-mat-theme.scss b/src/planet-mat-theme.scss
index b1b4074c98..ae0147770a 100644
--- a/src/planet-mat-theme.scss
+++ b/src/planet-mat-theme.scss
@@ -5,29 +5,7 @@
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
 @include mat-core();
-@import './app/variables';
-
-$primary-hue: 500;
-$accent-hue: 500;
-$warn-hue: 500;
-
-$planet-primary: $mat-blue;
-$planet-accent: $mat-amber;
-$planet-warn: $mat-red;
-
-$planet-app-primary: mat-palette($planet-primary, $primary-hue);
-$planet-app-accent: mat-palette($planet-accent, $accent-hue);
-$planet-app-warn: mat-palette($planet-warn, $warn-hue);
-
-$planet-app-theme: mat-light-theme($planet-app-primary, $planet-app-accent, $planet-app-warn);
-
-$primary: mat-color($planet-app-primary, $primary-hue);
-$accent: mat-color($planet-app-accent, $accent-hue);
-$primary-text: mat-contrast($planet-primary, $primary-hue);
-$accent-text: mat-contrast($planet-accent, $accent-hue);
-$light-grey: mat-color($mat-grey, 100);
-$grey: mat-color($mat-grey, 400);
-$primary-light: mat-color($planet-app-primary, 100);
+@import './app/_variables';
 
 @include angular-material-theme($planet-app-theme);