diff --git a/sass/components/_collection.scss b/sass/components/_collection.scss
new file mode 100644
index 0000000000..b4d3fbd71c
--- /dev/null
+++ b/sass/components/_collection.scss
@@ -0,0 +1,107 @@
+
+// Collections
+.collection {
+  margin: $element-top-margin 0 $element-bottom-margin 0;
+  border: 1px solid $collection-border-color;
+  border-radius: $collection-border-radius;
+  overflow: hidden;
+  position: relative;
+
+  .collection-item {
+    background-color: $collection-bg-color;
+    line-height: $collection-line-height;
+    padding: 10px 20px;
+    margin: 0;
+    border-bottom: 1px solid $collection-border-color;
+
+    // Avatar Collection
+    &.avatar {
+      min-height: 84px;
+      padding-left: 72px;
+      position: relative;
+
+      // Don't style circles inside preloader classes.
+      &:not(.circle-clipper) > .circle,
+      :not(.circle-clipper) > .circle {
+        position: absolute;
+        width: 42px;
+        height: 42px;
+        overflow: hidden;
+        left: 15px;
+        display: inline-block;
+        vertical-align: middle;
+      }
+      i.circle {
+        font-size: 18px;
+        line-height: 42px;
+        color: #fff;
+        background-color: #999;
+        text-align: center;
+      }
+
+
+      .title {
+        font-size: 16px;
+      }
+
+      p {
+        margin: 0;
+      }
+
+      .secondary-content {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+      }
+
+    }
+
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &.active {
+      background-color: $collection-active-bg-color;
+      color: $collection-active-color;
+
+      .secondary-content {
+        color: #fff;
+      }
+    }
+  }
+  a.collection-item{
+    display: block;
+    transition: .25s;
+    color: $collection-link-color;
+    &:not(.active) {
+      &:hover {
+        background-color: $collection-hover-bg-color;
+      }
+    }
+  }
+
+  &.with-header {
+    .collection-header {
+      background-color: $collection-bg-color;
+      border-bottom: 1px solid $collection-border-color;
+      padding: 10px 20px;
+    }
+    .collection-item {
+      padding-left: 30px;
+    }
+    .collection-item.avatar {
+      padding-left: 72px;
+    }
+  }
+
+}
+// Made less specific to allow easier overriding
+.secondary-content {
+  float: right;
+  color: $secondary-color;
+}
+.collapsible .collection {
+  margin: 0;
+  border: none;
+}
\ No newline at end of file
diff --git a/sass/components/_global.scss b/sass/components/_global.scss
index fe38cf026b..5c53e3ba52 100644
--- a/sass/components/_global.scss
+++ b/sass/components/_global.scss
@@ -516,115 +516,6 @@ td, th{
 }
 
 
-// Collections
-.collection {
-  margin: $element-top-margin 0 $element-bottom-margin 0;
-  border: 1px solid $collection-border-color;
-  border-radius: 2px;
-  overflow: hidden;
-  position: relative;
-
-  .collection-item {
-    background-color: $collection-bg-color;
-    line-height: $collection-line-height;
-    padding: 10px 20px;
-    margin: 0;
-    border-bottom: 1px solid $collection-border-color;
-
-    // Avatar Collection
-    &.avatar {
-      min-height: 84px;
-      padding-left: 72px;
-      position: relative;
-
-      // Don't style circles inside preloader classes.
-      &:not(.circle-clipper) > .circle,
-      :not(.circle-clipper) > .circle {
-        position: absolute;
-        width: 42px;
-        height: 42px;
-        overflow: hidden;
-        left: 15px;
-        display: inline-block;
-        vertical-align: middle;
-      }
-      i.circle {
-        font-size: 18px;
-        line-height: 42px;
-        color: #fff;
-        background-color: #999;
-        text-align: center;
-      }
-
-
-      .title {
-        font-size: 16px;
-      }
-
-      p {
-        margin: 0;
-      }
-
-      .secondary-content {
-        position: absolute;
-        top: 16px;
-        right: 16px;
-      }
-
-    }
-
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    &.active {
-      background-color: $collection-active-bg-color;
-      color: $collection-active-color;
-
-      .secondary-content {
-        color: #fff;
-      }
-    }
-  }
-  a.collection-item{
-    display: block;
-    transition: .25s;
-    color: $collection-link-color;
-    &:not(.active) {
-      &:hover {
-        background-color: $collection-hover-bg-color;
-      }
-    }
-  }
-
-  &.with-header {
-    .collection-header {
-      background-color: $collection-bg-color;
-      border-bottom: 1px solid $collection-border-color;
-      padding: 10px 20px;
-    }
-    .collection-item {
-      padding-left: 30px;
-    }
-    .collection-item.avatar {
-      padding-left: 72px;
-    }
-  }
-
-}
-// Made less specific to allow easier overriding
-.secondary-content {
-  float: right;
-  color: $secondary-color;
-}
-.collapsible .collection {
-  margin: 0;
-  border: none;
-}
-
-
-
 // Responsive Videos
 .video-container {
     position: relative;
diff --git a/sass/components/_variables.scss b/sass/components/_variables.scss
index b95003fcdf..0249486add 100644
--- a/sass/components/_variables.scss
+++ b/sass/components/_variables.scss
@@ -343,6 +343,7 @@ $collection-active-color: lighten($secondary-color, 55%) !default;
 $collection-hover-bg-color: #ddd !default;
 $collection-link-color: $secondary-color !default;
 $collection-line-height: 1.5rem !default;
+$collection-border-radius: 2px !default;
 
 
 // 24. Progress Bar
diff --git a/sass/materialize.scss b/sass/materialize.scss
index 6a51657b04..124536d5a0 100644
--- a/sass/materialize.scss
+++ b/sass/materialize.scss
@@ -12,6 +12,7 @@
 
 // components
 @import "components/global";
+@import "components/collection";
 @import "components/badges";
 @import "components/icons-material-design";
 @import "components/grid";