diff --git a/client/src/templates/Challenges/classic/DesktopLayout.js b/client/src/templates/Challenges/classic/DesktopLayout.js
index 123f8e1255..610d8c4653 100644
--- a/client/src/templates/Challenges/classic/DesktopLayout.js
+++ b/client/src/templates/Challenges/classic/DesktopLayout.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
 import envData from '../../../../../config/env.json';
+import { toSortedArray } from '../../../../../utils/sort-files';
 import EditorTabs from './EditorTabs';
 import ActionRow from './action-row.tsx';
 
@@ -58,7 +59,7 @@ class DesktopLayout extends Component {
 
   getChallengeFile() {
     const { challengeFiles } = this.props;
-    return first(challengeFiles);
+    return first(toSortedArray(challengeFiles));
   }
 
   render() {
diff --git a/client/src/templates/Challenges/classic/EditorTabs.js b/client/src/templates/Challenges/classic/EditorTabs.js
index 275721494d..98318a666a 100644
--- a/client/src/templates/Challenges/classic/EditorTabs.js
+++ b/client/src/templates/Challenges/classic/EditorTabs.js
@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 
+import { toSortedArray } from '../../../../../utils/sort-files';
 import {
   toggleVisibleEditor,
   visibleEditorsSelector,
@@ -38,7 +39,7 @@ class EditorTabs extends Component {
     const { challengeFiles, toggleVisibleEditor, visibleEditors } = this.props;
     return (
       <div className='monaco-editor-tabs'>
-        {challengeFiles.map(challengeFile => (
+        {toSortedArray(challengeFiles).map(challengeFile => (
           <button
             aria-selected={visibleEditors[challengeFile.fileKey]}
             className='monaco-editor-tab'
diff --git a/utils/sort-files.js b/utils/sort-files.js
index 433a1a8e4d..caec9b25dd 100644
--- a/utils/sort-files.js
+++ b/utils/sort-files.js
@@ -5,6 +5,8 @@ exports.toSortedArray = function toSortedArray(challengeFiles) {
   xs.sort((a, b) => {
     if (a.ext === 'html') return -1;
     if (b.ext === 'html') return 1;
+    if (a.ext === 'css') return -1;
+    if (b.ext === 'css') return 1;
     if (a.ext === 'jsx') return -1;
     if (b.ext === 'jsx') return 1;
     if (a.ext === 'js') return -1;
diff --git a/utils/sort-files.test.js b/utils/sort-files.test.js
index bb17949c7f..12675ac086 100644
--- a/utils/sort-files.test.js
+++ b/utils/sort-files.test.js
@@ -14,10 +14,10 @@ describe('sort-files', () => {
       expect(sorted.length).toEqual(expected.length);
     });
 
-    it('should sort the objects into html, js, css order', () => {
+    it('should sort the objects into html, css, jsx, js order', () => {
       const sorted = challengeFiles;
       const sortedKeys = sorted.map(({ fileKey }) => fileKey);
-      const expected = ['indexhtml', 'indexjsx', 'indexjs', 'indexcss'];
+      const expected = ['indexhtml', 'indexcss', 'indexjsx', 'indexjs'];
       expect(sortedKeys).toStrictEqual(expected);
     });
   });