diff --git a/CHANGELOG.md b/CHANGELOG.md
index 207300eb9..3143c63db 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Toggle errors sent via apiCallHandler off (#890)
 - Upgrade webpack-dev-server to 4.0.0 to support conditional headers
 - Upgrade yarn to 3.4.1 to workaround a string-width issue
+- Improved file structure as part of the linter update (#926)
 - Add a ?pyodide=true flag for python project pages
 
 ### Fixed
diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss
index 5a29ca53f..e32b73253 100644
--- a/src/assets/stylesheets/Instructions.scss
+++ b/src/assets/stylesheets/Instructions.scss
@@ -32,6 +32,21 @@
     }
   }
 
+  pre {
+    background-color: $rpf-grey-700;
+    border-radius: 8px;
+    padding: $space-0-5;
+    overflow: auto;
+    margin: $space-1 0;
+  }
+
+  code {
+    color: $rpf-white;
+    background-color: $rpf-grey-700;
+    border-radius: 8px;
+    padding: calc(0.75 * $space-0-125) $space-0-5;
+  }
+
   .c-project-code {
     margin: $space-1 0 $space-1-5 0;
     border-radius: 8px;
@@ -57,25 +72,13 @@
     border-block-end: 1px solid $rpf-grey-600;
   }
 
-  pre {
-    background-color: $rpf-grey-700;
-    border-radius: 8px;
-    padding: $space-0-5;
-    overflow: auto;
-    margin: $space-1 0;
-  }
+
 
   .line-numbers {
     padding-inline-start: $space-3;
     padding-inline-end: $space-1;
   }
 
-  code {
-    color: $rpf-white;
-    background-color: $rpf-grey-700;
-    border-radius: 8px;
-    padding: calc(0.75 * $space-0-125) $space-0-5;
-  }
 
   .line-numbers-rows {
     border-color: $rpf-text-secondary-dark;
@@ -112,6 +115,25 @@
     }
   }
 
+  .language-css {
+    color: $rpf-syntax-1;
+
+    .comment {
+      color: $rpf-syntax-3;
+    }
+    .selector {
+      color: $rpf-syntax-4;
+    }
+
+    .function {
+      color: $rpf-syntax-4;
+    }
+
+    .property, .punctuation {
+      color: $rpf-white;
+    }
+  }
+
   .language-html {
     .tag {
       color: $rpf-syntax-4;
@@ -135,25 +157,6 @@
     }
   }
 
-  .language-css {
-    color: $rpf-syntax-1;
-
-    .comment {
-      color: $rpf-syntax-3;
-    }
-    .selector {
-      color: $rpf-syntax-4;
-    }
-
-    .function {
-      color: $rpf-syntax-4;
-    }
-
-    .property, .punctuation {
-      color: $rpf-white;
-    }
-  }
-
   .c-project-heading--task {
     @extend .rpf-squiggle-heading;
     --rpf-squiggle-color: var(--rpf-blue-800);
diff --git a/src/assets/stylesheets/ProjectListItem.scss b/src/assets/stylesheets/ProjectListItem.scss
index 2f0468718..ad45b076d 100644
--- a/src/assets/stylesheets/ProjectListItem.scss
+++ b/src/assets/stylesheets/ProjectListItem.scss
@@ -7,128 +7,128 @@
 $medium-table-grid: 990px;
 $small-table-grid: 600px;
 
-.editor-project-list {
-  &__info {
-    align-items: center;
+.editor-project-list__info {
+  align-items: center;
+}
+
+.editor-project-list__title {
+  align-items: center;
+  display: flex;
+  grid-column: span 8;
+  min-inline-size: 0;
+  padding: $space-1-5 0;
+
+  @include unique-width($medium-table-grid) {
+    grid-column: span 6;
   }
 
-  &__title {
-    align-items: center;
-    display: flex;
+  @include unique-max-width($small-table-grid) {
     grid-column: span 8;
-    min-inline-size: 0;
-    padding: $space-1-5 0;
+    padding: 0;
+    margin: 0;
+  }
+}
 
-    @include unique-width($medium-table-grid) {
-      grid-column: span 6;
-    }
+.editor-project-list__type {
+  inline-size: 40px;
+  padding-inline-end: $space-1-5;
+}
 
-    @include unique-max-width($small-table-grid) {
-      grid-column: span 8;
-      padding: 0;
-      margin: 0;
-    }
-  }
+.editor-project-list__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: $font-weight-bold;
+}
 
-  &__type {
-    inline-size: 40px;
-    padding-inline-end: $space-1-5;
+.editor-project-list__tag,
+.editor-project-list__heading {
+  @include font-size-0-75(regular);
+
+  .--light & {
+    color: $rpf-text-secondary;
   }
 
-  &__name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-weight: $font-weight-bold;
+  .--dark & {
+    color: $rpf-text-secondary-darkmode;
   }
+}
 
-  &__tag {
-    padding-inline-end: $space-0-5;
-    margin-inline-end: $space-0-5;
+.editor-project-list__actions {
+  display: flex;
+  gap: 8px;
 
-    .--light & {
-      border-inline-end: 1px $rpf-text-secondary solid;
-    }
-
-    .--dark & {
-      border-inline-end: 1px $rpf-text-secondary-darkmode solid;
-    }
+  span {
+    display: none;
   }
 
-  &__actions {
-    display: flex;
-    gap: 8px;
+  svg {
+    margin: 0;
+  }
 
+  @include unique-width($medium-table-grid) {
     span {
-      display: none;
+      display: flex;
     }
+  }
 
-    svg {
-      margin: 0;
-    }
+  @include unique-max-width($small-table-grid) {
+    display: none;
+  }
+}
 
-    @include unique-width($medium-table-grid) {
-      span {
-        display: flex;
-      }
-    }
+.editor-project-list__tag {
+  padding-inline-end: $space-0-5;
+  margin-inline-end: $space-0-5;
+}
 
-    @include unique-max-width($small-table-grid) {
-      display: none;
-    }
-  }
+.--dark .editor-project-list__tag {
+  border-inline-end: 1px $rpf-text-secondary-darkmode solid;
+}
 
-  &__rename {
-    margin: 12px 16px;
-  }
+.--light .editor-project-list__tag {
+  border-inline-end: 1px $rpf-text-secondary solid;
+}
 
-  &__menu {
-    display: none;
-    @include unique-max-width($small-table-grid) {
-      display: block;
-      grid-column: span 1;
-    }
-  }
 
-  &__tag,
-  &__heading {
-    @include font-size-0-75(regular);
 
-    .--light & {
-      color: $rpf-text-secondary;
-    }
+.editor-project-list__rename {
+  margin: 12px 16px;
+}
 
-    .--dark & {
-      color: $rpf-text-secondary-darkmode;
-    }
+.editor-project-list__menu {
+  display: none;
+  @include unique-max-width($small-table-grid) {
+    display: block;
+    grid-column: span 1;
   }
+}
 
-  &__title,
-  &__actions {
-    @include font-size-1(regular);
-    text-decoration: none;
+.editor-project-list__title,
+.editor-project-list__actions {
+  @include font-size-1(regular);
+  text-decoration: none;
 
-    .--light & {
-      color: $rpf-black;
+  .--light & {
+    color: $rpf-black;
 
-      &:active {
-        color: $rpf-teal-900;
-      }
+    &:active {
+      color: $rpf-teal-900;
+    }
 
-      &:hover {
-        color: $rpf-grey-600;
-      }
+    &:hover {
+      color: $rpf-grey-600;
     }
+  }
 
-    .--dark & {
-      color: $rpf-white;
+  .--dark & {
+    color: $rpf-white;
 
-      &:active {
-        color: $rpf-teal-200;
-      }
+    &:active {
+      color: $rpf-teal-200;
+    }
 
-      &:hover {
-        color: $rpf-grey-150;
-      }
+    &:hover {
+      color: $rpf-grey-150;
     }
   }
 }
diff --git a/src/assets/stylesheets/ProjectName.scss b/src/assets/stylesheets/ProjectName.scss
index 82db25969..a8873be56 100644
--- a/src/assets/stylesheets/ProjectName.scss
+++ b/src/assets/stylesheets/ProjectName.scss
@@ -56,25 +56,24 @@
   }
 }
 
-.--light {
+.--dark {
   .project-name__input {
-    background-color: $rpf-grey-50;
+    background-color: $rpf-grey-600;
 
     &:focus-visible {
       background-color: inherit;
-      outline: 2px solid $rpf-text-primary;
+      outline: 2px solid $rpf-white;
     }
   }
 }
 
-.--dark {
+.--light {
   .project-name__input {
-    background-color: $rpf-grey-600;
+    background-color: $rpf-grey-50;
 
     &:focus-visible {
       background-color: inherit;
-      outline: 2px solid $rpf-white;
+      outline: 2px solid $rpf-text-primary;
     }
   }
 }
-
diff --git a/src/assets/stylesheets/WebComponent.scss b/src/assets/stylesheets/WebComponent.scss
index ff7a896f5..d18e0f0bd 100644
--- a/src/assets/stylesheets/WebComponent.scss
+++ b/src/assets/stylesheets/WebComponent.scss
@@ -7,14 +7,11 @@
 }
 
 #wc {
-  background: var(
-    --editor-secondary-theme,
-    transparent
-  ); // you can also access root variables here too
+  background: var(--editor-secondary-theme, transparent);
   font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
-  font-size: 16px; // sets the shadow doms base font size
+  font-size: 16px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   display: flex;
diff --git a/src/assets/stylesheets/rpf_design_system/colours.scss b/src/assets/stylesheets/rpf_design_system/colours.scss
index 4e8bd34db..c9e389a97 100644
--- a/src/assets/stylesheets/rpf_design_system/colours.scss
+++ b/src/assets/stylesheets/rpf_design_system/colours.scss
@@ -1,15 +1,12 @@
-// Basic colors
 $rpf-black: #000000;
 $rpf-white: #ffffff;
 $rpf-off-white: #f5f6f9;
 $rpf-dark-blue: #2a3e4f;
-
 // Text
 $rpf-text-primary: #212121;
 $rpf-text-primary-darkmode: $rpf-white;
 $rpf-text-secondary: #4d575b;
 $rpf-text-secondary-darkmode: #cccccc;
-
 //Greys
 $rpf-grey-50: #f1f2f3;
 $rpf-grey-100: #e3e4e8;