diff --git a/frontend/src/Event/ListEvents.js b/frontend/src/Event/ListEvents.js
index b6c61a7..1a84377 100644
--- a/frontend/src/Event/ListEvents.js
+++ b/frontend/src/Event/ListEvents.js
@@ -36,6 +36,7 @@ const ListEvents = (props) => {
   
   const {data:events, isSuccess} = useGetEventsQuery(); 
   const navigate = useNavigate();
+  
     return (
       <div>
         <NavBar/>
diff --git a/frontend/src/System/InternationList.js b/frontend/src/System/InternationList.js
new file mode 100644
index 0000000..35138fd
--- /dev/null
+++ b/frontend/src/System/InternationList.js
@@ -0,0 +1,25 @@
+import {
+    Card,
+    Header
+} from "semantic-ui-react";
+import { useNavigate } from 'react-router-dom'
+import SystemCard from "./SystemCard";
+
+
+const InternationList = (other) => {
+    
+    const navigate = useNavigate();
+    let international = [];
+    international.push((<Header as="h2" id="international">International</Header>))
+    international.push((
+        <Card.Group itemsPerRow={4} stackable={true}>
+            {other &&
+                other.map((system) => {
+                    return <SystemCard system={system} key={system.shortName} onClick={(e) => navigate("/system/" + system.shortName)} />
+                })}
+        </Card.Group>
+    ))
+    return international;
+}
+
+export default InternationList;
\ No newline at end of file
diff --git a/frontend/src/System/ListSystems.js b/frontend/src/System/ListSystems.js
index fb76803..8b23176 100644
--- a/frontend/src/System/ListSystems.js
+++ b/frontend/src/System/ListSystems.js
@@ -1,6 +1,6 @@
-import React, { Component, useRef } from "react";
+import { Component, useRef } from "react";
 import { Link, useNavigate } from 'react-router-dom'
-import SystemCard from "./SystemCard";
+
 import { useSelector, useDispatch } from 'react-redux'
 import {
   Container,
@@ -18,6 +18,9 @@ import {
 import NavBar from "../Common/NavBar"
 import { selectAllSystems, selectActiveSystems, } from "../features/systems/systemsSlice";
 import { useGetSystemsQuery, } from '../features/api/apiSlice'
+import StateLinkList from "./StateLinkList";
+import SystemsByState from "./SystemsByState";
+import InternationList from "./InternationList";
 // ----------------------------------------------------
 
 const ListSystems = (props) => {
@@ -25,6 +28,8 @@ const ListSystems = (props) => {
   const { data: allSystems, isSuccess } = useGetSystemsQuery();
   const systems = useSelector(selectActiveSystems)
   const contextRef = useRef();
+
+  // Sorts the systems by State and also creates an International Arry
   let states = {};
   let other = []
   for (var i = 0; i < systems.length; i++) {
@@ -37,51 +42,12 @@ const ListSystems = (props) => {
     } else {
       other.push(system);
     }
-
-  }
-  let keys = Object.keys(states);
-  keys.sort();
-
-  let stateList = [];
-  for (var i = 0; i < keys.length; ++i) {
-    const state = keys[i];
-    stateList.push((
-
-      <List.Item>
-        <List.Content>
-          <List.Header><a href={"#" + state}>{state}</a></List.Header>
-        </List.Content>
-      </List.Item>
-
-    ))
   }
 
-  let systemsByState = [];
+  const stateList = StateLinkList(states);
+  const systemsByState = SystemsByState(states);
+  const international = InternationList(other);
 
-  for (var i = 0; i < keys.length; ++i) {
-    const state = keys[i];
-
-    systemsByState.push((<Header as="h2" id={state}>{state}</Header>))
-    systemsByState.push((
-      <Card.Group key={state} itemsPerRow={4} stackable={true}>
-        {states[state] &&
-          states[state].map((system) => {
-            return <SystemCard system={system} key={system.shortName} onClick={(e) => navigate("/system/" + system.shortName)} />
-          })}
-      </Card.Group>
-    ))
-  }
-  let international = [];
-  international.push((<Header as="h2" id="international">International</Header>))
-  international.push((
-    <Card.Group itemsPerRow={4} stackable={true}>
-      {other &&
-        other.map((system) => {
-          return <SystemCard system={system} key={system.shortName} onClick={(e) => navigate("/system/" + system.shortName)} />
-        })}
-    </Card.Group>
-  ))
-  const navigate = useNavigate();
   return (
     <div ref={contextRef}>
       <NavBar />
diff --git a/frontend/src/System/StateLinkList.js b/frontend/src/System/StateLinkList.js
new file mode 100644
index 0000000..249bbb0
--- /dev/null
+++ b/frontend/src/System/StateLinkList.js
@@ -0,0 +1,30 @@
+import {
+
+    List,
+
+} from "semantic-ui-react";
+
+const StateLinkList = (states) => {
+    let stateList = [];
+    if (states) {
+        let keys = Object.keys(states);
+        keys.sort();
+
+
+        for (var i = 0; i < keys.length; ++i) {
+            const state = keys[i];
+            stateList.push((
+
+                <List.Item key={"short-"+state}>
+                    <List.Content>
+                        <List.Header><a href={"#" + state}>{state}</a></List.Header>
+                    </List.Content>
+                </List.Item>
+
+            ))
+        }
+    }
+    return stateList;
+}
+
+export default StateLinkList
\ No newline at end of file
diff --git a/frontend/src/System/SystemsByState.js b/frontend/src/System/SystemsByState.js
new file mode 100644
index 0000000..65a5629
--- /dev/null
+++ b/frontend/src/System/SystemsByState.js
@@ -0,0 +1,35 @@
+import {
+    Card,
+    Header
+} from "semantic-ui-react";
+import { useNavigate } from 'react-router-dom'
+import SystemCard from "./SystemCard";
+
+
+const SystemsByState = (states) => {
+    const navigate = useNavigate();
+    let systemsByState = [];
+
+    if (states) {
+
+        let keys = Object.keys(states);
+        keys.sort();
+
+        for (var i = 0; i < keys.length; ++i) {
+            const state = keys[i];
+
+            systemsByState.push((<Header key={"header-" +state} as="h2" id={state}>{state}</Header>))
+            systemsByState.push((
+                <Card.Group  key={"group-" +state} itemsPerRow={4} stackable={true}>
+                    {states[state] &&
+                        states[state].map((system) => {
+                            return <SystemCard system={system} key={system.shortName} onClick={(e) => navigate("/system/" + system.shortName)} />
+                        })}
+                </Card.Group>
+            ))
+        }
+    }
+    return systemsByState;
+}
+
+export default SystemsByState;
\ No newline at end of file
diff --git a/frontend/src/features/api/apiSlice.js b/frontend/src/features/api/apiSlice.js
index 1f90b87..c1c3116 100644
--- a/frontend/src/features/api/apiSlice.js
+++ b/frontend/src/features/api/apiSlice.js
@@ -23,11 +23,15 @@ export const apiSlice = createApi({
         }),
         getEvents: builder.query({
             // The URL for the request is '/fakeApi/posts'
-            query: () => ({ url: '/events' })
+            query: () => ({ url: '/events' }),
+            transformResponse: responseData => {
+                return responseData.sort(function compareFn(a, b) { if (a.createdAt < b.createdAt) return 1; else return -1; })
+              }
         }),
         getEvent: builder.query({
             // The URL for the request is '/fakeApi/posts'
-            query: (eventId) => ({ url: `/events/${eventId}` })
+            query: (eventId) => ({ url: `/events/${eventId}` }),
+
         }),
         getTalkgroups: builder.query({
             // The URL for the request is '/fakeApi/posts'