Tweaked layout.

src/app/CommandResponsesChart.tsx

@@ -11,11 +11,8 @@ const CommandResponsesChart = ({
   lineChartData
 }: CommandResponsesChartProps): JSX.Element => {
   return (
-    <VStack gap={4} w="100%">
-      <Heading
-        as="h4"
-        fontSize="2xl"
-      >{`Commands Responded To (Past 30 Days)`}</Heading>
+    <VStack gap={6} w="100%">
+      <Heading as="h4" fontSize="2xl">{`Commands Responded To`}</Heading>
       <LineChartComponent data={lineChartData} label="Command Responses" />
     </VStack>
   );

src/app/LinksDeletedChart.tsx

@@ -11,8 +11,8 @@ const LinksDeletedChart = ({
   lineChartData
 }: LinksDeletedChartProps): JSX.Element => {
   return (
-    <VStack gap={4} w="100%">
-      <Heading as="h4" fontSize="2xl">{`Links Deleted (Past 30 Days)`}</Heading>
+    <VStack gap={6} w="100%">
+      <Heading as="h4" fontSize="2xl">{`Links Deleted`}</Heading>
       <LineChartComponent data={lineChartData} label="Links Deleted" />
     </VStack>
   );

src/app/StatsList.tsx

@@ -1,5 +1,5 @@
 import { JSX } from "react";
-import { Heading, Flex, VStack } from "@chakra-ui/react";
+import { Heading, Flex, Text, VStack } from "@chakra-ui/react";
 import { CombinedError } from "urql";
 import SingleStatComponent from "@/components/stats/SingleStat";
 
@@ -24,9 +24,14 @@ const StatsList = ({
 }: StatsListProps): JSX.Element => {
   return (
     <VStack gap={6} w="100%">
-      <Heading as="h3" fontSize="3xl">
-        {title}
-      </Heading>
+      <VStack gap={1}>
+        <Heading as="h3" fontSize="3xl">
+          {title}
+        </Heading>
+        <Text textAlign="center" fontSize="sm" color="whiteAlpha.800">
+          {groups ? "Updates every 24 hours" : "At time of page load"}
+        </Text>
+      </VStack>
       <Flex w="80%" flexDirection={{ base: "column", md: "row" }} gap={4}>
         {groups ? (
           <SingleStatComponent

src/app/TimesTriggeredChart.tsx

@@ -11,11 +11,8 @@ const TimedTriggeredChart = ({
   lineChartData
 }: TimedTriggeredChartProps): JSX.Element => {
   return (
-    <VStack gap={4} w="100%">
-      <Heading
-        as="h4"
-        fontSize="2xl"
-      >{`Times Bot Was Triggered (Past 30 Days)`}</Heading>
+    <VStack gap={6} w="100%">
+      <Heading as="h4" fontSize="2xl">{`Times Bot Was Triggered`}</Heading>
       <LineChartComponent data={lineChartData} label="Times Triggered" />
     </VStack>
   );

src/app/page.tsx

@@ -104,7 +104,7 @@ export default function Home() {
         py="5vh"
         minW="fit-content"
       >
-        <VStack w={{ base: "100%", md: "90%" }} gap={6} minW="fit-content">
+        <VStack w={{ base: "100%", md: "90%" }} gap={10} minW="fit-content">
           <VStack w="80%" gap={10}>
             <Icon h="7.5rem" color="whiteAlpha">
               <svg
@@ -171,7 +171,12 @@ export default function Home() {
             />
           </VStack>
           <VStack w="95%" gap="5vh">
-            <Heading as="h1" fontSize="3xl">{`30 Day Stats`}</Heading>
+            <VStack gap={1}>
+              <Heading as="h1" fontSize="3xl">{`30 Day Stats`}</Heading>
+              <Text textAlign="center" fontSize="sm" color="whiteAlpha.800">
+                {"Updates every 24 hours"}
+              </Text>
+            </VStack>
             <Skeleton w="100%" h="auto" loading={thirtyDayStatsFetching}>
               <LinksDeletedChart lineChartData={lineChartArrState} />
             </Skeleton>