diff --git a/components/index/cards/hackathons.js b/components/index/cards/hackathons.js
index 5234d3dd..6c00be83 100644
--- a/components/index/cards/hackathons.js
+++ b/components/index/cards/hackathons.js
@@ -1,10 +1,8 @@
 import CardModel from './card-model'
-import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
+import {Box, Flex, Grid, Image, Link, Text} from 'theme-ui'
 import Buttons from './button'
-import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
 import Dot from '../../dot'
-import { formatDate } from '../../../lib/dates'
+import {formatDate} from '../../../lib/dates'
 
 /** @jsxImportSource theme-ui */
 const Cover = () => (
diff --git a/pages/index.js b/pages/index.js
index 05a4d353..6fc2c913 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,7 +1,7 @@
-import { Badge, Box, Button, Card, Flex, Grid, Heading, Link, Text } from 'theme-ui'
-import React, { useEffect, useRef, useState } from 'react'
+import {Badge, Box, Button, Card, Flex, Grid, Heading, Link, Text} from 'theme-ui'
+import React, {useEffect, useRef, useState} from 'react'
 import Head from 'next/head'
-import { useRouter } from 'next/router'
+import {useRouter} from 'next/router'
 import Meta from '@hackclub/meta'
 import Nav from '../components/nav'
 import BGImg from '../components/background-image'
@@ -1225,6 +1225,7 @@ export async function getStaticProps() {
   } catch (error) {
     hackathonsData = [] // or some default value if an error occurs
   }
+  hackathonsData.sort((a, b) => new Date(a.start) - new Date(b.start));
 
   let events = await fetch(
     'https://events.hackclub.com/api/events/upcoming/'