diff --git a/pages/dashboard/index.tsx b/pages/dashboard/index.tsx
index 0491ca49..89d45109 100644
--- a/pages/dashboard/index.tsx
+++ b/pages/dashboard/index.tsx
@@ -1,5 +1,7 @@
 import {
   Card,
+  FormControl,
+  FormHelperText,
   Grid,
   InputLabel,
   LinearProgress,
@@ -398,8 +400,35 @@ export const Dashboard: NextPage = () => {
     gradesPage = (
       <>
         <div className="h-full m-4">
+          <Card className="h-96 p-4 m-4">
+            <GraphChoice
+              form="Bar"
+              title="Grades"
+              xaxisLabels={[
+                'A+',
+                'A',
+                'A-',
+                'B+',
+                'B',
+                'B-',
+                'C+',
+                'C',
+                'C-',
+                'D+',
+                'D',
+                'D-',
+                'F',
+                'W',
+              ]}
+              yaxisFormatter={(value) => Number(value).toFixed(0) + '%'}
+              series={gradesData}
+            />
+          </Card>
           <div className="flex justify-center gap-2">
-            <div>
+            <FormControl
+              error={startingSession > endingSession}
+              variant="standard"
+            >
               <InputLabel id="startingSessionLabel">From</InputLabel>
               <Select
                 labelId="startingSessionLabel"
@@ -417,17 +446,17 @@ export const Dashboard: NextPage = () => {
                   ),
                 )}
               </Select>
-            </div>
-            <div>
+            </FormControl>
+            <FormControl
+              error={startingSession > endingSession}
+              variant="standard"
+            >
               <InputLabel id="endingSessionLabel">To</InputLabel>
               <Select
                 labelId="endingSessionLabel"
                 defaultValue={9999}
                 onChange={(e) => setEndingSession(e.target.value as number)}
               >
-                <MenuItem key="Last available" value="9999">
-                  Last available
-                </MenuItem>
                 {possibleAcademicSessions.map(
                   (session: academicSessionType) => (
                     <MenuItem key={session.name} value={session.place}>
@@ -435,33 +464,17 @@ export const Dashboard: NextPage = () => {
                     </MenuItem>
                   ),
                 )}
+                <MenuItem key="Last available" value="9999">
+                  Last available
+                </MenuItem>
               </Select>
-            </div>
+            </FormControl>
           </div>
-          <Card className="h-96 p-4 m-4" elevation={darkModeElevation}>
-            <GraphChoice
-              form="Bar"
-              title="Grades"
-              xaxisLabels={[
-                'A+',
-                'A',
-                'A-',
-                'B+',
-                'B',
-                'B-',
-                'C+',
-                'C',
-                'C-',
-                'D+',
-                'D',
-                'D-',
-                'F',
-                'W',
-              ]}
-              yaxisFormatter={(value) => Number(value).toFixed(0) + '%'}
-              series={gradesData}
-            />
-          </Card>
+          {startingSession > endingSession ? (
+            <FormHelperText className="text-center" error={true}>
+              Starting academic session must be before ending academic session
+            </FormHelperText>
+          ) : null}
         </div>
       </>
     );