diff --git a/src/backend/src/services/rules.services.ts b/src/backend/src/services/rules.services.ts
index 110014799c..5a37a07dfb 100644
--- a/src/backend/src/services/rules.services.ts
+++ b/src/backend/src/services/rules.services.ts
@@ -1146,6 +1146,7 @@ export default class RulesService {
         parentRuleId: ruleId,
         dateDeleted: null
       },
+      orderBy: { ruleCode: 'asc' },
       ...getRulePreviewQueryArgs()
     });
     return subRules.map((rule) => ruleTransformer(rule));
@@ -1332,6 +1333,7 @@ export default class RulesService {
         },
         dateDeleted: null
       },
+      orderBy: { rule: { ruleCode: 'asc' } },
       ...getProjectRuleQueryArgs()
     });
 
@@ -1374,6 +1376,7 @@ export default class RulesService {
         dateDeleted: null,
         parentRuleId: null
       },
+      orderBy: { ruleCode: 'asc' },
       ...getRulePreviewQueryArgs()
     });
 
diff --git a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/ProjectRules/ProjectRulesTab.tsx b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/ProjectRules/ProjectRulesTab.tsx
index ef6759be0c..15a5b424e7 100644
--- a/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/ProjectRules/ProjectRulesTab.tsx
+++ b/src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/ProjectRules/ProjectRulesTab.tsx
@@ -38,6 +38,8 @@ import { InfoOutlined } from '@mui/icons-material';
 import { useHistory } from 'react-router-dom';
 import { routes } from '../../../../utils/routes';
 import RuleStatusTag from '../../../RulesPage/components/RuleStatusTag';
+import { NERButton } from '../../../../components/NERButton';
+import { compareRuleCodes } from '../../../../utils/rules.utils';
 
 interface ProjectRulesTabProps {
   project: Project;
@@ -84,16 +86,17 @@ export const ProjectRulesTab = ({ project }: ProjectRulesTabProps) => {
   const teamId = project.teams[0]?.teamId || '';
   const teamNames = project.teams.map((team) => team.teamName);
 
-  // Convert project rules to rules
-  const allRules = useMemo(() => {
+  // Convert project rules to rules for display
+  // Sorted by rule code so both top-level rows and their children render in stable numeric order
+  const projectRuleList = useMemo(() => {
     if (!projectRules) return [];
-    return projectRules.map((pr) => pr.rule);
+    return projectRules.map((pr) => pr.rule).sort(compareRuleCodes);
   }, [projectRules]);
 
   // Get top-level rules (rules without a parent)
   const topLevelRules = useMemo(() => {
-    return allRules.filter((rule) => !rule.parentRule);
-  }, [allRules]);
+    return projectRuleList.filter((rule) => !rule.parentRule);
+  }, [projectRuleList]);
 
   // Handle completion update
   const handleStatusUpdate = async (ruleId: string, isComplete: boolean) => {
@@ -126,7 +129,7 @@ export const ProjectRulesTab = ({ project }: ProjectRulesTabProps) => {
     const projectRule = projectRules?.find((pr) => pr.rule.ruleId === rule.ruleId);
     if (projectRule) {
       // Only allow status updates for leaf rules
-      const hasChildren = allRules.some((r) => r.parentRule?.ruleId === rule.ruleId);
+      const hasChildren = projectRuleList.some((r) => r.parentRule?.ruleId === rule.ruleId);
       if (!hasChildren) {
         setSelectedProjectRule(projectRule);
         setStatusPopoverAnchor(event.currentTarget);
@@ -170,13 +173,13 @@ export const ProjectRulesTab = ({ project }: ProjectRulesTabProps) => {
   // Right content for rule rows - status badge. Leaf rules are clickable to open
   // the completion popover; parents show an aggregated, read-only status.
   const renderRightContent = (rule: Rule) => {
-    const isLeafRule = !allRules.some((r) => r.parentRule?.ruleId === rule.ruleId);
+    const isLeafRule = !projectRuleList.some((r) => r.parentRule?.ruleId === rule.ruleId);
     const isPopoverOpenForRule = Boolean(statusPopoverAnchor) && selectedProjectRule?.rule.ruleId === rule.ruleId;
 
     return (
       <RuleStatusTag
         rule={rule}
-        allRules={allRules}
+        allRules={projectRuleList}
         popoverOpen={isPopoverOpenForRule}
         onClick={isLeafRule ? (e) => handleStatusClick(e, rule) : undefined}
       />
@@ -300,7 +303,7 @@ export const ProjectRulesTab = ({ project }: ProjectRulesTabProps) => {
                   <RuleRow
                     key={rule.ruleId}
                     rule={rule}
-                    allRules={allRules}
+                    allRules={projectRuleList}
                     rightContent={renderRightContent}
                     backgroundColor={tableBackgroundColor}
                     textColor={tableTextColor}
@@ -329,24 +332,15 @@ export const ProjectRulesTab = ({ project }: ProjectRulesTabProps) => {
         }}
       >
         <Box sx={{ borderBottom: `2px solid ${theme.palette.divider}`, mb: 2, ml: '30px' }} />
-        <Box sx={{ display: 'flex', justifyContent: 'flex-end', pr: '30px', pb: 1 }}>
-          <Button
+        <Box sx={{ display: 'flex', justifyContent: 'flex-end', pr: '30px', pb: 2 }}>
+          <NERButton
             variant="contained"
+            sx={{ color: '#ededed' }}
             onClick={() => setAddRuleModalOpen(true)}
             disabled={teamNames.length === 0 || hasNoActiveRuleset}
-            sx={{
-              borderRadius: '8px',
-              backgroundColor: '#ef4345',
-              padding: '2px 15px',
-              fontSize: '16px',
-              fontWeight: 700,
-              textTransform: 'none',
-              '&:hover': { backgroundColor: '#b0191a' },
-              '&.Mui-disabled': { backgroundColor: theme.palette.action.disabled, color: theme.palette.text.disabled }
-            }}
           >
             Add Rule
-          </Button>
+          </NERButton>
         </Box>
       </Box>
 
diff --git a/src/frontend/src/pages/RulesPage/AssignRulesTab.tsx b/src/frontend/src/pages/RulesPage/AssignRulesTab.tsx
index 24559b19c3..3ab681c2a5 100644
--- a/src/frontend/src/pages/RulesPage/AssignRulesTab.tsx
+++ b/src/frontend/src/pages/RulesPage/AssignRulesTab.tsx
@@ -28,7 +28,8 @@ import NERModal from '../../components/NERModal';
 import WarningIcon from '@mui/icons-material/Warning';
 import RuleRow from './RuleRow';
 import { useBulkToggleRuleTeam } from '../../hooks/rules.hooks';
-import { getAncestorIds, getRuleAndDescendantIds } from '../../utils/rules.utils';
+import { compareRuleCodes } from '../../utils/rules.utils';
+import { getAncestorIds, getRuleAndDescendantIds, getDescendantLeafRules } from '../../utils/rules.utils';
 
 /*
  * Props for the assign rules tab.
@@ -42,21 +43,23 @@ interface AssignRulesTabProps {
  */
 interface TeamRowProps {
   team: TeamPreview;
-  isSelected: boolean;
+  backgroundColor: string;
+  hoverColor: string;
   onClick: () => void;
 }
 
 /**
  * Row component for displaying a team in the teams table.
  */
-const TeamRow: React.FC<TeamRowProps> = ({ team, isSelected, onClick }) => {
+const TeamRow: React.FC<TeamRowProps> = ({ team, backgroundColor, hoverColor, onClick }) => {
+  const theme = useTheme();
   return (
     <TableRow
       onClick={onClick}
       sx={{
         borderBottom: '1px solid #7d7d7d',
-        backgroundColor: isSelected ? '#b36b6b' : '#CECECE',
-        '&:hover': { backgroundColor: isSelected ? '#a05858' : '#5e5e5e' },
+        backgroundColor,
+        '&:hover': { backgroundColor: hoverColor },
         cursor: 'pointer',
         '&:last-child': { borderBottom: 'none' }
       }}
@@ -67,7 +70,7 @@ const TeamRow: React.FC<TeamRowProps> = ({ team, isSelected, onClick }) => {
           padding: '8px 16px',
           backgroundColor: 'inherit',
           borderBottom: 'none',
-          color: '#000000'
+          color: theme.palette.common.black
         }}
       >
         {team.teamName}
@@ -130,6 +133,16 @@ const AssignRulesTab: React.FC<AssignRulesTabProps> = ({ rules }) => {
     return assignments.has(`${selectedTeamId}:${ruleId}`);
   };
 
+  // A rule is considered selected when all of its leaf rules are assigned to the current team.
+  const isRuleSelected = (rule: Rule) => {
+    const leafIds = getDescendantLeafRules(rule, rules).map((leaf) => leaf.ruleId);
+    return leafIds.length > 0 && leafIds.every((id) => isRuleAssigned(id));
+  };
+
+  // Shared highlight logic for both the team rows and rule rows.
+  const rowBackgroundColor = (isSelected: boolean) => (isSelected ? '#b36b6b' : theme.palette.grey[500]);
+  const rowHoverColor = (isSelected: boolean) => (isSelected ? '#a05858' : theme.palette.grey[700]);
+
   const getAssignedTeamNames = (ruleId: string): string[] => {
     if (!teams) return [];
     const assignedTeamIds = [...assignments].filter((key) => key.endsWith(`:${ruleId}`)).map((key) => key.split(':')[0]);
@@ -281,14 +294,14 @@ const AssignRulesTab: React.FC<AssignRulesTabProps> = ({ rules }) => {
     return <LoadingIndicator />;
   }
 
-  const topLevelRules = rules.filter((rule) => !rule.parentRule);
+  const topLevelRules = rules.filter((rule) => !rule.parentRule).sort(compareRuleCodes);
 
   return (
     <Box sx={{ paddingBottom: '100px' }}>
       <Box sx={{ display: 'flex', gap: 4 }}>
         {/* Teams Column */}
         <Box sx={{ flex: 1 }}>
-          <Typography variant="h4" sx={{ mb: 2, color: '#ffffff' }}>
+          <Typography variant="h4" sx={{ mb: 2, color: theme.palette.text.primary }}>
             Teams:
           </Typography>
           <TableContainer
@@ -301,12 +314,13 @@ const AssignRulesTab: React.FC<AssignRulesTabProps> = ({ rules }) => {
             }}
           >
             <Table sx={{ borderCollapse: 'collapse' }}>
-              <TableBody sx={{ backgroundColor: '#CECECE' }}>
+              <TableBody sx={{ backgroundColor: theme.palette.grey[500] }}>
                 {teams?.map((team) => (
                   <TeamRow
                     key={team.teamId}
                     team={team}
-                    isSelected={selectedTeamId === team.teamId}
+                    backgroundColor={rowBackgroundColor(selectedTeamId === team.teamId)}
+                    hoverColor={rowHoverColor(selectedTeamId === team.teamId)}
                     onClick={() => handleTeamSelect(team.teamId)}
                   />
                 ))}
@@ -317,7 +331,7 @@ const AssignRulesTab: React.FC<AssignRulesTabProps> = ({ rules }) => {
 
         {/* Rules Column */}
         <Box sx={{ flex: 1 }}>
-          <Typography variant="h4" sx={{ mb: 2, color: '#ffffff' }}>
+          <Typography variant="h4" sx={{ mb: 2, color: theme.palette.text.primary }}>
             Rules:
           </Typography>
           <TableContainer
@@ -330,15 +344,15 @@ const AssignRulesTab: React.FC<AssignRulesTabProps> = ({ rules }) => {
             }}
           >
             <Table sx={{ borderCollapse: 'collapse' }}>
-              <TableBody sx={{ backgroundColor: '#CECECE' }}>
+              <TableBody sx={{ backgroundColor: theme.palette.grey[500] }}>
                 {topLevelRules.map((rule) => (
                   <RuleRow
                     key={rule.ruleId}
                     rule={rule}
                     allRules={rules}
-                    backgroundColor={(r) => (isRuleAssigned(r.ruleId) ? '#b36b6b' : '#CECECE')}
-                    hoverColor={(r) => (isRuleAssigned(r.ruleId) ? '#a05858' : '#5e5e5e')}
-                    textColor="#000000"
+                    backgroundColor={(r) => rowBackgroundColor(isRuleSelected(r))}
+                    hoverColor={(r) => rowHoverColor(isRuleSelected(r))}
+                    textColor={theme.palette.common.black}
                     onRowClick={(r) => handleRuleToggle(r.ruleId)}
                     middleContent={() => null}
                     rightContent={(r) => renderTeamTags(r.ruleId)}
@@ -367,21 +381,13 @@ const AssignRulesTab: React.FC<AssignRulesTabProps> = ({ rules }) => {
       >
         <Box
           sx={{
-            borderBottom: '2px solid white',
+            borderBottom: `2px solid ${theme.palette.divider}`,
             mb: 2,
-            ml: '30px'
+            ml: '20px'
           }}
         />
-        <Box sx={{ display: 'flex', justifyContent: 'flex-end', pr: '30px', pb: 1 }}>
-          <NERButton
-            variant="contained"
-            onClick={handleSaveAndExit}
-            disabled={isSaving}
-            sx={{
-              backgroundColor: '#dd514c',
-              '&:hover': { backgroundColor: '#c74340' }
-            }}
-          >
+        <Box sx={{ display: 'flex', justifyContent: 'flex-end', pr: '30px', pb: 2 }}>
+          <NERButton variant="contained" sx={{ color: '#ededed' }} onClick={handleSaveAndExit} disabled={isSaving}>
             {isSaving ? 'Saving...' : 'Save & Exit'}
           </NERButton>
         </Box>
diff --git a/src/frontend/src/pages/RulesPage/RuleRow.tsx b/src/frontend/src/pages/RulesPage/RuleRow.tsx
index 58799b7b75..1fd93fe2f0 100644
--- a/src/frontend/src/pages/RulesPage/RuleRow.tsx
+++ b/src/frontend/src/pages/RulesPage/RuleRow.tsx
@@ -8,6 +8,7 @@ import { useState } from 'react';
 import { Rule } from 'shared';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { useGetChildRules } from '../../hooks/rules.hooks';
+import { compareRuleCodes } from '../../utils/rules.utils';
 
 interface RuleRowProps {
   rule: Rule;
@@ -31,6 +32,8 @@ interface RuleRowProps {
   indentRow?: boolean;
   // Amount of indentation per child depth when indentRow is enabled
   indentWidth?: number;
+  // If a rule's code/name should span the entire row - used for team view header rows
+  fullWidthCode?: (rule: Rule) => boolean;
 }
 
 /**
@@ -56,7 +59,8 @@ const RuleRow: React.FC<RuleRowProps> = ({
   rightWidth = '10%',
   initiallyExpanded = false,
   indentRow = false,
-  indentWidth = 10
+  indentWidth = 10,
+  fullWidthCode
 }) => {
   const [isExpanded, setIsExpanded] = useState(initiallyExpanded);
 
@@ -68,8 +72,9 @@ const RuleRow: React.FC<RuleRowProps> = ({
   // Lazy load if allRules not provided
   const { data: fetchedSubRules = [] } = useGetChildRules(rule.ruleId, !allRules && isExpanded && hasSubRules);
 
-  // Use allRules if provided, otherwise use fetched
-  const subRules = presentSubRules ?? fetchedSubRules;
+  // Use allRules if provided, otherwise use fetched.
+  // Sorted by rule code so children render in a stable numeric order (e.g. F.2 before F.10)
+  const subRules = [...(presentSubRules ?? fetchedSubRules)].sort(compareRuleCodes);
 
   const bgColor = typeof backgroundColor === 'function' ? backgroundColor(rule) : backgroundColor;
   const color = typeof textColor === 'function' ? textColor(rule) : textColor;
@@ -85,9 +90,13 @@ const RuleRow: React.FC<RuleRowProps> = ({
   const handleRowClick = () => {
     if (onRowClick) {
       onRowClick(rule);
+    } else if (hasSubRules) {
+      toggleExpand();
     }
   };
 
+  const rowIsClickable = Boolean(onRowClick) || hasSubRules;
+
   const commonCellStyles = {
     fontSize: '16px',
     padding: `${verticalPadding} ${horizontalPadding}`,
@@ -144,9 +153,11 @@ const RuleRow: React.FC<RuleRowProps> = ({
   return (
     <>
       <TableRow
+        onClick={handleRowClick}
         sx={{
           borderBottom: '1px solid #7d7d7d',
           backgroundColor: indentRow ? 'transparent' : bgColor,
+          cursor: rowIsClickable ? 'pointer' : 'default',
           '&:hover': indentRow
             ? { '& .rule-card-cell': { backgroundColor: hoverBgColor } }
             : { backgroundColor: hoverBgColor },
@@ -156,54 +167,81 @@ const RuleRow: React.FC<RuleRowProps> = ({
           height: rowHeight
         }}
       >
-        <TableCell
-          align="left"
-          className={cardCellClass}
-          sx={{
-            ...commonCellStyles,
-            ...cardCellBg,
-            ...leftCellRadius,
-            // Indent left edge of rule with transparent left border
-            ...(indentRow && {
-              borderLeft: `${level * indentWidth}px solid transparent`,
-              backgroundClip: 'padding-box'
-            }),
-            cursor: onRowClick ? 'pointer' : 'default',
-            width: leftWidth
-          }}
-          onClick={handleRowClick}
-        >
-          {leftContent ? leftContent(rule, level, isExpanded, hasSubRules) : defaultLeftContent}
-        </TableCell>
-        <TableCell
-          align="left"
-          className={cardCellClass}
-          sx={{
-            ...commonCellStyles,
-            ...cardCellBg,
-            width: middleWidth,
-            maxWidth: '700px',
-            wordWrap: 'break-word',
-            overflowWrap: 'break-word',
-            whiteSpace: 'normal'
-          }}
-        >
-          {middleContent
-            ? middleContent(rule, level)
-            : rule.ruleContent && <span style={{ color }}>{rule.ruleContent}</span>}
-        </TableCell>
-        <TableCell
-          align="center"
-          className={cardCellClass}
-          sx={{
-            ...commonCellStyles,
-            ...cardCellBg,
-            ...rightCellRadius,
-            width: rightWidth
-          }}
-        >
-          {rightContent(rule, level)}
-        </TableCell>
+        {fullWidthCode && fullWidthCode(rule) ? (
+          <TableCell
+            align="left"
+            colSpan={3}
+            className={cardCellClass}
+            sx={{
+              ...commonCellStyles,
+              ...cardCellBg,
+              ...leftCellRadius,
+              ...rightCellRadius,
+              // Indent left edge of rule with transparent left border
+              ...(indentRow && {
+                borderLeft: `${level * indentWidth}px solid transparent`,
+                backgroundClip: 'padding-box'
+              }),
+              wordWrap: 'break-word',
+              overflowWrap: 'break-word',
+              whiteSpace: 'normal'
+            }}
+          >
+            {leftContent ? leftContent(rule, level, isExpanded, hasSubRules) : defaultLeftContent}
+          </TableCell>
+        ) : (
+          <>
+            <TableCell
+              align="left"
+              className={cardCellClass}
+              sx={{
+                ...commonCellStyles,
+                ...cardCellBg,
+                ...leftCellRadius,
+                // Indent left edge of rule with transparent left border
+                ...(indentRow && {
+                  borderLeft: `${level * indentWidth}px solid transparent`,
+                  backgroundClip: 'padding-box'
+                }),
+                width: leftWidth
+              }}
+            >
+              {leftContent ? leftContent(rule, level, isExpanded, hasSubRules) : defaultLeftContent}
+            </TableCell>
+            <TableCell
+              align="left"
+              className={cardCellClass}
+              onClick={(e) => e.stopPropagation()}
+              sx={{
+                ...commonCellStyles,
+                ...cardCellBg,
+                width: middleWidth,
+                maxWidth: '700px',
+                wordWrap: 'break-word',
+                overflowWrap: 'break-word',
+                whiteSpace: 'normal'
+              }}
+            >
+              {middleContent
+                ? middleContent(rule, level)
+                : rule.ruleContent && <span style={{ color }}>{rule.ruleContent}</span>}
+            </TableCell>
+            <TableCell
+              align="center"
+              className={cardCellClass}
+              onClick={(e) => e.stopPropagation()}
+              sx={{
+                ...commonCellStyles,
+                ...cardCellBg,
+                ...rightCellRadius,
+                cursor: 'default',
+                width: rightWidth
+              }}
+            >
+              {rightContent(rule, level)}
+            </TableCell>
+          </>
+        )}
       </TableRow>
       {isExpanded &&
         hasSubRules &&
@@ -228,6 +266,7 @@ const RuleRow: React.FC<RuleRowProps> = ({
             rightWidth={rightWidth}
             indentRow={indentRow}
             indentWidth={indentWidth}
+            fullWidthCode={fullWidthCode}
           />
         ))}
     </>
diff --git a/src/frontend/src/pages/RulesPage/RulesetEditPage.tsx b/src/frontend/src/pages/RulesPage/RulesetEditPage.tsx
index bd7992f551..d5a46f24bc 100644
--- a/src/frontend/src/pages/RulesPage/RulesetEditPage.tsx
+++ b/src/frontend/src/pages/RulesPage/RulesetEditPage.tsx
@@ -17,9 +17,10 @@ import AddRuleSectionModal from './components/AddRuleSectionModal';
 import AddRuleModal from './components/AddRuleModal';
 import { AddRuleBox } from './components/AddRuleBox';
 import AssignRulesTab from './AssignRulesTab';
+import { NERButton } from '../../components/NERButton';
 import DeleteRuleModal from './components/DeleteRuleModal';
 import { useDeleteRule, useEditRule, useSingleRuleset, useAllRulesForRuleset } from '../../hooks/rules.hooks';
-import { countRulesToDelete } from '../../utils/rules.utils';
+import { countRulesToDelete, compareRuleCodes } from '../../utils/rules.utils';
 import { Rule } from 'shared';
 
 /**
@@ -158,8 +159,8 @@ const RulesetEditPage: React.FC = () => {
 
   const totalRulesToDelete = ruleToDelete ? countRulesToDelete(ruleToDelete, allRules) : 0;
 
-  // Filter to only show top-level rules
-  const topLevelRules = allRules.filter((rule) => !rule.parentRule);
+  // Filter to only show top-level rules, sorted by rule code for stable numeric order
+  const topLevelRules = allRules.filter((rule) => !rule.parentRule).sort(compareRuleCodes);
 
   return (
     <PageLayout
@@ -188,7 +189,7 @@ const RulesetEditPage: React.FC = () => {
           <Box sx={{ paddingBottom: '100px' }}>
             <TableContainer component={Paper} sx={{ borderRadius: '8px', overflow: 'hidden' }}>
               <Table sx={{ borderCollapse: 'collapse' }}>
-                <TableBody sx={{ backgroundColor: '#9d9d9d' }}>
+                <TableBody sx={{ backgroundColor: theme.palette.grey[500] }}>
                   {topLevelRules.map((rule) => (
                     <RuleRow
                       key={rule.ruleId}
@@ -209,7 +210,7 @@ const RulesetEditPage: React.FC = () => {
                               sx={{
                                 backgroundColor: theme.palette.grey[100],
                                 '& .MuiOutlinedInput-root': {
-                                  color: '#000000',
+                                  color: theme.palette.common.black,
                                   '& fieldset': {
                                     borderColor: '#dd514c'
                                   },
@@ -225,7 +226,9 @@ const RulesetEditPage: React.FC = () => {
                           );
                         }
                         return (
-                          currentRule.ruleContent && <span style={{ color: '#000000' }}>{currentRule.ruleContent}</span>
+                          currentRule.ruleContent && (
+                            <span style={{ color: theme.palette.common.black }}>{currentRule.ruleContent}</span>
+                          )
                         );
                       }}
                       rightContent={(currentRule) => (
@@ -234,12 +237,14 @@ const RulesetEditPage: React.FC = () => {
                           onAdd={handleOpenAddMenu}
                           onRemove={handleRemoveRule}
                           onEdit={handleEditRule}
-                          iconColor="#000000"
+                          iconColor={theme.palette.common.black}
                         />
                       )}
-                      backgroundColor={(currentRule) => (editingRuleId === currentRule.ruleId ? '#c0c0c0' : '#9d9d9d')}
-                      textColor="#000000"
-                      hoverColor="#5e5e5e"
+                      backgroundColor={(currentRule) =>
+                        editingRuleId === currentRule.ruleId ? theme.palette.grey[400] : theme.palette.grey[500]
+                      }
+                      textColor={theme.palette.common.black}
+                      hoverColor={theme.palette.grey[700]}
                       rowHeight="10px"
                       verticalPadding="5px"
                     />
@@ -290,12 +295,12 @@ const RulesetEditPage: React.FC = () => {
             >
               <Box
                 sx={{
-                  borderBottom: '2px solid white',
+                  borderBottom: `2px solid ${theme.palette.divider}`,
                   mb: 2,
-                  ml: '30px'
+                  ml: '20px'
                 }}
               />
-              <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, pr: '30px', pb: 1 }}>
+              <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, pr: '30px', pb: 2 }}>
                 {editingRuleId ? (
                   <>
                     <Button
@@ -317,44 +322,14 @@ const RulesetEditPage: React.FC = () => {
                     >
                       Cancel
                     </Button>
-                    <Button
-                      variant="contained"
-                      onClick={handleSaveEdit}
-                      sx={{
-                        borderRadius: '8px',
-                        color: '#ededed',
-                        backgroundColor: '#dd514c',
-                        padding: '2px 15px',
-                        fontSize: '16px',
-                        fontWeight: 700,
-                        textTransform: 'none',
-                        '&:hover': {
-                          backgroundColor: '#c74340'
-                        }
-                      }}
-                    >
+                    <NERButton variant="contained" sx={{ color: '#ededed' }} onClick={handleSaveEdit}>
                       Save
-                    </Button>
+                    </NERButton>
                   </>
                 ) : (
-                  <Button
-                    variant="contained"
-                    onClick={handleAddRuleSection}
-                    sx={{
-                      borderRadius: '8px',
-                      color: '#ededed',
-                      backgroundColor: '#dd514c',
-                      padding: '2px 15px',
-                      fontSize: '16px',
-                      fontWeight: 700,
-                      textTransform: 'none',
-                      '&:hover': {
-                        backgroundColor: '#c74340'
-                      }
-                    }}
-                  >
+                  <NERButton variant="contained" sx={{ color: '#ededed' }} onClick={handleAddRuleSection}>
                     Add Rule Section
-                  </Button>
+                  </NERButton>
                 )}
               </Box>
             </Box>
diff --git a/src/frontend/src/pages/RulesPage/RulesetPage.tsx b/src/frontend/src/pages/RulesPage/RulesetPage.tsx
index b63fceb5ff..64775f3c7a 100644
--- a/src/frontend/src/pages/RulesPage/RulesetPage.tsx
+++ b/src/frontend/src/pages/RulesPage/RulesetPage.tsx
@@ -82,34 +82,43 @@ const RulesetPage: React.FC = () => {
         title={rulesetType?.name ? `${rulesetType.name} Rulesets` : 'Rulesets'}
         previousPages={[{ name: 'Rules', route: routes.RULES }]}
       >
-        <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: 'calc(100vh - 120px)' }}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: 'calc(100vh - 120px)', pb: '80px' }}>
           <Box sx={{ flexGrow: 1 }}>
             <RulesetTable />
           </Box>
           <Box
             sx={{
               backgroundColor: '#121313',
-              position: 'sticky',
+              position: 'fixed',
               bottom: 0,
+              left: 0,
+              right: 0,
               zIndex: 2,
               width: '100%',
               px: { xs: 1, md: 0 }
             }}
           >
             <Box
-              sx={{
-                borderBottom: '1px solid white',
-                mb: 2
-              }}
+              sx={(theme) => ({
+                borderBottom: `2px solid ${theme.palette.divider}`,
+                mb: 2,
+                ml: '20px'
+              })}
             />
             <Box
               sx={{
                 display: 'flex',
-                justifyContent: { xs: 'center', md: 'flex-end' }
+                justifyContent: { xs: 'center', md: 'flex-end' },
+                pr: '30px',
+                pb: 2
               }}
             >
               {/* Add New File Button */}
-              <NERButton variant="contained" onClick={() => setAddFileModalShow(!AddFileModalShow)}>
+              <NERButton
+                variant="contained"
+                sx={{ color: '#ededed' }}
+                onClick={() => setAddFileModalShow(!AddFileModalShow)}
+              >
                 Add New File
               </NERButton>
               <AddNewFileModal
diff --git a/src/frontend/src/pages/RulesPage/RulesetTypePage.tsx b/src/frontend/src/pages/RulesPage/RulesetTypePage.tsx
index 3259a9bb1c..f92aeaf343 100644
--- a/src/frontend/src/pages/RulesPage/RulesetTypePage.tsx
+++ b/src/frontend/src/pages/RulesPage/RulesetTypePage.tsx
@@ -23,33 +23,42 @@ const RulesetTypePage: React.FC = () => {
   return (
     <>
       <PageLayout title="Ruleset Types">
-        <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: 'calc(100vh - 120px)' }}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: 'calc(100vh - 120px)', pb: '80px' }}>
           <Box sx={{ flexGrow: 1 }}>
             <RulesetTypeTable />
           </Box>
           <Box
             sx={{
               backgroundColor: '#121313',
-              position: 'sticky',
+              position: 'fixed',
               bottom: 0,
+              left: 0,
+              right: 0,
               zIndex: 2,
               width: '100%',
               px: { xs: 1, md: 0 }
             }}
           >
             <Box
-              sx={{
-                borderBottom: '1px solid white',
-                mb: 2
-              }}
+              sx={(theme) => ({
+                borderBottom: `2px solid ${theme.palette.divider}`,
+                mb: 2,
+                ml: '20px'
+              })}
             />
             <Box
               sx={{
                 display: 'flex',
-                justifyContent: { xs: 'center', md: 'flex-end' }
+                justifyContent: { xs: 'center', md: 'flex-end' },
+                pr: '30px',
+                pb: 2
               }}
             >
-              <NERButton variant="contained" onClick={() => setAddRulesetTypeModalShow(!addRulesetTypeModalShow)}>
+              <NERButton
+                variant="contained"
+                sx={{ color: '#ededed' }}
+                onClick={() => setAddRulesetTypeModalShow(!addRulesetTypeModalShow)}
+              >
                 Add Ruleset Type
               </NERButton>
               <AddRulesetTypeModal
diff --git a/src/frontend/src/pages/RulesPage/components/RulesetGeneralView.tsx b/src/frontend/src/pages/RulesPage/components/RulesetGeneralView.tsx
index 5a2e7bcce8..6bb5f75960 100644
--- a/src/frontend/src/pages/RulesPage/components/RulesetGeneralView.tsx
+++ b/src/frontend/src/pages/RulesPage/components/RulesetGeneralView.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Box, Paper, Table, TableBody, TableContainer, useTheme } from '@mui/material';
 import { Rule } from 'shared';
 import RuleRow from '../RuleRow';
@@ -6,6 +6,7 @@ import RuleStatusTag from './RuleStatusTag';
 import UpdateStatusPopover from '../../ProjectDetailPage/ProjectViewContainer/ProjectRules/UpdateStatusPopover';
 import { useSetRuleCompletion } from '../../../hooks/rules.hooks';
 import { useToast } from '../../../hooks/toasts.hooks';
+import { compareRuleCodes } from '../../../utils/rules.utils';
 
 interface RulesetGeneralViewProps {
   allRules: Rule[];
@@ -29,7 +30,9 @@ const RulesetGeneralView: React.FC<RulesetGeneralViewProps> = ({ allRules, rules
   // Completion in general view is for the whole ruleset, so no projectId is passed in
   const { mutateAsync: setCompletion } = useSetRuleCompletion(rulesetId, '');
 
-  const topLevelRules = allRules.filter((rule) => !rule.parentRule);
+  // Sort once by rule code so both top-level rows and their children render in a stable numeric order.
+  const sortedRules = useMemo(() => [...allRules].sort(compareRuleCodes), [allRules]);
+  const topLevelRules = useMemo(() => sortedRules.filter((rule) => !rule.parentRule), [sortedRules]);
 
   const handleStatusClose = () => {
     setStatusPopoverAnchor(null);
@@ -56,11 +59,11 @@ const RulesetGeneralView: React.FC<RulesetGeneralViewProps> = ({ allRules, rules
               <RuleRow
                 key={rule.ruleId}
                 rule={rule}
-                allRules={allRules}
+                allRules={sortedRules}
                 rightContent={(r) => (
                   <RuleStatusTag
                     rule={r}
-                    allRules={allRules}
+                    allRules={sortedRules}
                     popoverOpen={selectedRule?.ruleId === r.ruleId && Boolean(statusPopoverAnchor)}
                     onClick={(e) => {
                       setSelectedRule(r);
diff --git a/src/frontend/src/pages/RulesPage/components/RulesetTeamView.tsx b/src/frontend/src/pages/RulesPage/components/RulesetTeamView.tsx
index 34d79660dd..adb1f7cd38 100644
--- a/src/frontend/src/pages/RulesPage/components/RulesetTeamView.tsx
+++ b/src/frontend/src/pages/RulesPage/components/RulesetTeamView.tsx
@@ -184,6 +184,9 @@ const RulesetTeamView: React.FC<RulesetTeamViewProps> = ({ allRules }) => {
     return { topLevelItems, rowsById: [...sectionRows, ...ruleRows] };
   }, [allRules]);
 
+  // Everything that isn't an actual rule (e.g., unassigned headers) should span the full row width
+  const actualRuleIds = new Set<string>(allRules.map((r) => r.ruleId));
+
   return (
     <Box>
       <TableContainer component={Paper} elevation={0} sx={{ borderRadius: '8px', overflow: 'hidden', backgroundColor }}>
@@ -202,6 +205,7 @@ const RulesetTeamView: React.FC<RulesetTeamViewProps> = ({ allRules }) => {
                 verticalPadding="8px"
                 indentRow
                 initiallyExpanded={item.ruleId.startsWith('team-')}
+                fullWidthCode={(rule) => !actualRuleIds.has(rule.ruleId)}
               />
             ))}
           </TableBody>
diff --git a/src/frontend/src/utils/rules.utils.ts b/src/frontend/src/utils/rules.utils.ts
index 81ac7d92a9..5bd446632a 100644
--- a/src/frontend/src/utils/rules.utils.ts
+++ b/src/frontend/src/utils/rules.utils.ts
@@ -83,3 +83,10 @@ export const getAncestorIds = (ruleId: string, allRules: Rule[]): string[] => {
 
   return ancestorIds;
 };
+
+/**
+ * Comparator that orders rules by their rule code numerically, so codes sort
+ * as F.2 before F.10 rather than alphabetically
+ */
+export const compareRuleCodes = (a: Rule, b: Rule): number =>
+  a.ruleCode.localeCompare(b.ruleCode, undefined, { numeric: true });