diff --git a/app/assets/stylesheets/dmp-assistant/blocks/_alerts.scss b/app/assets/stylesheets/dmp-assistant/blocks/_alerts.scss
new file mode 100644
index 0000000000..6320a84eeb
--- /dev/null
+++ b/app/assets/stylesheets/dmp-assistant/blocks/_alerts.scss
@@ -0,0 +1,4 @@
+.alert-info, .alert-warning, .alert-danger {
+  display: inline-block;
+  width: 100%;
+}
diff --git a/app/assets/stylesheets/dmp-assistant/blocks/_buttons.scss b/app/assets/stylesheets/dmp-assistant/blocks/_buttons.scss
new file mode 100644
index 0000000000..9030704c75
--- /dev/null
+++ b/app/assets/stylesheets/dmp-assistant/blocks/_buttons.scss
@@ -0,0 +1,7 @@
+@use '../variables/colours' as *;
+
+/* link button AND change color of search icon AND all the buttons*/
+.btn-default, .btn-primary, #search-addon {
+    color: $color-alliance-darker-yellow !important;
+    background-color: $color-alliance-digital-grey !important;
+  }
diff --git a/app/assets/stylesheets/dmp-assistant/blocks/_close.scss b/app/assets/stylesheets/dmp-assistant/blocks/_close.scss
new file mode 100644
index 0000000000..2f4e87aa93
--- /dev/null
+++ b/app/assets/stylesheets/dmp-assistant/blocks/_close.scss
@@ -0,0 +1,9 @@
+/* Notification close icon visibility and position*/
+.close {
+  opacity: 1 !important;
+}
+
+button.close{
+  position: relative;
+  margin-right: -12px;
+}
diff --git a/app/assets/stylesheets/dmp-assistant/blocks/_font_awesomes.scss b/app/assets/stylesheets/dmp-assistant/blocks/_font_awesomes.scss
new file mode 100644
index 0000000000..20d5ed9f5e
--- /dev/null
+++ b/app/assets/stylesheets/dmp-assistant/blocks/_font_awesomes.scss
@@ -0,0 +1,5 @@
+@use '../variables/colours' as *;
+
+.fas{
+  color: $color-alliance-yellow;
+}
diff --git a/app/assets/stylesheets/dmp-assistant/blocks/_index.scss b/app/assets/stylesheets/dmp-assistant/blocks/_index.scss
index 87cfa0381b..909d126e3a 100644
--- a/app/assets/stylesheets/dmp-assistant/blocks/_index.scss
+++ b/app/assets/stylesheets/dmp-assistant/blocks/_index.scss
@@ -1 +1,10 @@
-@use 'password_checklist';
\ No newline at end of file
+@use 'alerts';
+@use 'buttons';
+@use 'close';
+@use 'font_awesomes';
+@use 'logos';
+@use 'navbars';
+@use 'navs';
+@use 'panels';
+@use 'password_checklist';
+@use 'tables';
diff --git a/app/assets/stylesheets/dmp-assistant/blocks/_logos.scss b/app/assets/stylesheets/dmp-assistant/blocks/_logos.scss
new file mode 100644
index 0000000000..b4d282f46d
--- /dev/null
+++ b/app/assets/stylesheets/dmp-assistant/blocks/_logos.scss
@@ -0,0 +1,6 @@
+.app-logo {
+    width: 150px !important;
+    height: 86px !important;
+    padding: 0%;
+    margin-top: 0.6em;
+}
diff --git a/app/assets/stylesheets/dmp-assistant/blocks/_navbars.scss b/app/assets/stylesheets/dmp-assistant/blocks/_navbars.scss
new file mode 100644
index 0000000000..5fe73dd804
--- /dev/null
+++ b/app/assets/stylesheets/dmp-assistant/blocks/_navbars.scss
@@ -0,0 +1,20 @@
+@use '../variables/colours' as *;
+
+.navbar-nav{
+    margin-left: 2.5em;
+}
+
+#org-navbar{
+    margin: auto;
+}
+
+/* For org navbar custom background color */
+@media (min-width: 768px) {
+    #admin-dropdown ul li a, #super-admin-dropdown ul li a {
+      &:hover,
+      &:focus{
+        color: $color-alliance-darker-yellow !important;
+        background-color: $color-alliance-digital-grey;
+      }
+    }
+  }
diff --git a/app/assets/stylesheets/dmp-assistant/blocks/_navs.scss b/app/assets/stylesheets/dmp-assistant/blocks/_navs.scss
new file mode 100644
index 0000000000..5678c877ec
--- /dev/null
+++ b/app/assets/stylesheets/dmp-assistant/blocks/_navs.scss
@@ -0,0 +1,51 @@
+@use '../variables/colours' as *;
+
+.nav-tabs, .nav-pills {
+    background-color: $color-alliance-digital-grey;
+}
+
+/* Styling for the Sign in & Create account .nav-tabs container */
+.sign-in .nav-tabs {
+  background: $color-white;
+  border: 1px solid #000;
+  border-bottom: none;
+  overflow: hidden;
+  display: flex;
+}
+
+/* Make the Sign in & Create account .nav-tabs evenly spaced */
+.sign-in .nav-tabs > li {
+  flex: 1;
+}
+
+/* General styling for the clickable Sign in & Create account tabs */
+.sign-in .nav-tabs > li > a {
+  color: $color-alliance-digital-grey;
+  text-align: center;
+  width: 100%; /* ensures the <a> fills the <li> */
+}
+
+/* Styling for the selected .sign-in tab */
+.sign-in .nav-tabs > li > a.active,
+.sign-in .nav-tabs > li > a.active:hover,
+.sign-in .nav-tabs > li.active > a,
+.sign-in .nav-tabs > li.active:hover > a {
+  color: $color-alliance-darker-yellow !important;
+  background: $color-alliance-digital-grey !important;
+  font-weight: bold;
+  border-bottom: 3px solid $color-alliance-darker-yellow;
+}
+
+/* nav-tabs overiding on active */
+.nav-tabs > li > a:hover,
+.nav-tabs > li > a:focus,
+.nav-tabs > li > a.active,
+.nav-tabs > li > a.active:hover,
+.nav-tabs > li > a.active:focus,
+.nav-tabs > li.active > a,
+.nav-tabs > li:hover > a,
+.nav-tabs > li:focus > a,
+.nav-tabs > li.active:hover > a,
+.nav-tabs > li.active:focus > a {
+  color: $color-alliance-digital-grey !important;
+}
diff --git a/app/assets/stylesheets/dmp-assistant/blocks/_panels.scss b/app/assets/stylesheets/dmp-assistant/blocks/_panels.scss
new file mode 100644
index 0000000000..f173d884d4
--- /dev/null
+++ b/app/assets/stylesheets/dmp-assistant/blocks/_panels.scss
@@ -0,0 +1,31 @@
+@use '../variables/colours' as *;
+
+/* This is added to the header of the Write Plan section in the Plans*/
+.heading-button > .panel-heading, .panel-default > .panel-heading {
+  color: $color-alliance-digital-grey;
+  background-color: $color-alliance-lighter-grey;
+  border-top: 3px solid $color-alliance-yellow;
+  cursor: pointer;
+  transition: color 1s ease, background 1s ease; /* Combine transitions */
+
+  &:hover,
+  &:focus {
+    background-color: $color-alliance-yellow;
+    i.fas.fa-plus.pull-right,
+    i.fas.pull-right.fa-minus{
+      color: $color-alliance-digital-grey;
+    }
+  }
+}
+
+/* Guidance collapse bar in Templates section icon color issues fix on-hover OR on focus*/
+.panel-heading {
+  &:hover,
+  &:focus {
+    i.fas.pull-left.fa-minus,
+    i.fas.fa-plus.pull-left,
+    i.fas.fa-arrows-alt.pull-right{
+      color: $color-alliance-digital-grey !important;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/dmp-assistant/blocks/_tables.scss b/app/assets/stylesheets/dmp-assistant/blocks/_tables.scss
new file mode 100644
index 0000000000..7a8dc14364
--- /dev/null
+++ b/app/assets/stylesheets/dmp-assistant/blocks/_tables.scss
@@ -0,0 +1,10 @@
+@use '../variables/colours' as *;
+
+/** Table content shadow added to make it look good**/
+.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
+   box-shadow: 5px 5px 5px $color-alliance-light-grey, 0px -5px 5px $color-alliance-light-grey;
+  }
+
+thead th {
+    background-color: $color-alliance-digital-grey;
+}
diff --git a/app/assets/stylesheets/grey-branding.scss b/app/assets/stylesheets/grey-branding.scss
index 61e8b60341..a980d6d0b1 100644
--- a/app/assets/stylesheets/grey-branding.scss
+++ b/app/assets/stylesheets/grey-branding.scss
@@ -11,96 +11,6 @@
   color: $color-alliance-darkest-yellow;
 }
 
-//logo style apply for all screen size
-//_logos.scss
-.app-logo{
-    width: 150px !important;
-    height: 86px !important;
-    padding: 0%;
-}
-
-.fas{
-  color: $color-alliance-yellow;
-}
-
-
-/*****
-Forms & Tables
-*****/
-.nav-tabs, .nav-pills{ //_navs.scss
-    background-color: $color-alliance-digital-grey;
-}
-
-
-//_table.scss
-thead th{
-    background-color: $color-alliance-digital-grey;
-}
-
-/* For org navbar custom background color */
-@media (min-width: 768px) {
-    #admin-dropdown ul li a, #super-admin-dropdown ul li a {
-      &:hover,
-      &:focus{
-        color: $color-alliance-darker-yellow !important;
-        background-color: $color-alliance-digital-grey;
-      }
-    }
-  }
-
-/* link button AND change color of search icon AND all the buttons*/
-.btn-default, .btn-primary, #search-addon {
-    color: $color-alliance-darker-yellow !important;
-    background-color: $color-alliance-digital-grey !important;
-  }
-
-/* Styling for the Sign in & Create account .nav-tabs container */
-.sign-in .nav-tabs {
-  background: $color-white;
-  border: 1px solid #000;
-  border-bottom: none;
-  overflow: hidden;
-  display: flex;
-}
-
-/* Make the Sign in & Create account .nav-tabs evenly spaced */
-.sign-in .nav-tabs > li {
-  flex: 1;
-}
-
-/* General styling for the clickable Sign in & Create account tabs */
-.sign-in .nav-tabs > li > a {
-  color: $color-alliance-digital-grey;
-  text-align: center;
-  width: 100%; /* ensures the <a> fills the <li> */
-}
-
-/* Styling for the selected .sign-in tab */
-.sign-in .nav-tabs > li > a.active,
-.sign-in .nav-tabs > li > a.active:hover,
-.sign-in .nav-tabs > li.active > a,
-.sign-in .nav-tabs > li.active:hover > a {
-  color: $color-alliance-darker-yellow !important;
-  background: $color-alliance-digital-grey !important;
-  font-weight: bold;
-  border-bottom: 3px solid $color-alliance-darker-yellow;
-}
-
-/* nav-tabs overiding on active */
-.nav-tabs > li > a:hover,
-.nav-tabs > li > a:focus,
-.nav-tabs > li > a.active,
-.nav-tabs > li > a.active:hover,
-.nav-tabs > li > a.active:focus,
-.nav-tabs > li.active > a,
-.nav-tabs > li:hover > a,
-.nav-tabs > li:focus > a,
-.nav-tabs > li.active:hover > a,
-.nav-tabs > li.active:focus > a {
-  color: $color-alliance-digital-grey !important;
-}
-
-
  /* Drop downs of the college lists in create plans section */
 
  .ui-menu {
@@ -130,18 +40,3 @@ thead th{
 a#language-menu, a#reference-menu, a#user-menu{
   margin-bottom: 3px !important;
 }
-
-/* Notification close icon visibility and position*/
-.close {
-  opacity: 1 !important;
-}
-
-button.close{
-  position: relative;
-  margin-right: -12px;
-} 
-
-.alert-info, .alert-warning, .alert-danger {
-  display: inline-block;
-  width: 100%;
-}
\ No newline at end of file
diff --git a/app/assets/stylesheets/rebranding-animation.scss b/app/assets/stylesheets/rebranding-animation.scss
index 6bba68d3c7..def098a3d9 100644
--- a/app/assets/stylesheets/rebranding-animation.scss
+++ b/app/assets/stylesheets/rebranding-animation.scss
@@ -1,10 +1,5 @@
 @use './dmp-assistant/variables/colours' as *;
 
- /** Table content shadow added to make it look good**/
-.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
-   box-shadow: 5px 5px 5px $color-alliance-light-grey, 0px -5px 5px $color-alliance-light-grey;
-  }
-
 /* General styling for link visibility/accessibility */
 a,
 .btn.btn-link.dropdown-toggle, // "Actions" dropdown buttons
@@ -31,36 +26,6 @@ a.btn,
   text-decoration: none;
 }
 
-  /* This is added to the header of the Write Plan section in the Plans*/
-  .heading-button > .panel-heading,
-  .panel-default > .panel-heading {
-  color: $color-alliance-digital-grey;
-  background-color: $color-alliance-lighter-grey;
-  border-top: 3px solid $color-alliance-yellow;
-  cursor: pointer;
-  transition: color 1s ease, background 1s ease; /* Combine transitions */
-
-  &:hover,
-  &:focus {
-    background-color: $color-alliance-yellow;
-    i.fas.fa-plus.pull-right,
-    i.fas.pull-right.fa-minus{
-      color: $color-alliance-digital-grey;
-    }
-  }
-}
-
-/* Guidance collapse bar in Templates section icon color issues fix on-hover OR on focus*/
-.panel-heading {
-  &:hover,
-  &:focus {
-    i.fas.pull-left.fa-minus,
-    i.fas.fa-plus.pull-left,
-    i.fas.fa-arrows-alt.pull-right{
-      color: $color-alliance-digital-grey !important;
-    }
-  }
-}
 // form > fieldset > button.btn.btn-default {
 //   animation: wiggle 2s linear infinite;
 // }
diff --git a/app/assets/stylesheets/rebranding.scss b/app/assets/stylesheets/rebranding.scss
index 60db125da6..03ded651bb 100644
--- a/app/assets/stylesheets/rebranding.scss
+++ b/app/assets/stylesheets/rebranding.scss
@@ -13,35 +13,15 @@ h1, h2, h3, h4, h5, h6{
     font-weight: bold;
 }
 
-
-/***********************
-Individual Changes
-defined by the original reference in each scss sheet (see comments) for easier move around
-************************/
-
 /*****
 navigation
 *****/
 
-//logo style apply for all screen size
-//_logos.scss
-.app-logo{
-    height: 200px;
-    margin-top: 0.6em;
-    // padding: 0;
-}
-
-
 //overriding the row margins to the zero. needs to addressed while refractoring css
 .row.no-row-margin{
     margin: 0px !important;
 }
 
-
-.navbar-nav{
-    margin-left: 2.5em;
-}
-
 .sign-in{
     margin-top: 5%;
 }
@@ -87,10 +67,6 @@ navigation
         }
     }
 
-    #org-navbar{ //_navbars.scss
-        margin: auto;
-    }
-
     #main{
         margin-top: 1em;
     }
@@ -110,18 +86,6 @@ navigation
     font-weight: 700;
 }
 
-/*****
-Forms & Tables
-*****/
-.nav-tabs, .nav-pills{ //_navs.scss
-    background-color: $color-alliance-darker-yellow;
-}
-
-//_table.scss
-thead th{
-    background-color: $color-alliance-darker-yellow;
-}
-
 //for the on focus and hover change the border left
 
 /****