diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4e85edb..f136f90 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -95,9 +95,9 @@ export default function Home() {
     <Fragment>
       <VStack
         bg="cyan.950"
-        minH="100vh"
+        minH="100dvh"
         h="100%"
-        py="5vh"
+        py="5dvh"
         minW="fit-content"
         textAlign="center"
       >
@@ -194,7 +194,7 @@ export default function Home() {
               />
             )}
           </VStack>
-          <VStack w="95%" gap="5vh">
+          <VStack w="95%" gap="5dvh">
             <VStack gap={1}>
               <Heading as="h1" fontSize="3xl">{`30 Day Stats`}</Heading>
               <Text textAlign="center" fontSize="sm" color="whiteAlpha.800">
@@ -240,7 +240,7 @@ export default function Home() {
           rgb(147, 40, 142)
            )`}
         w="100%"
-        py="5vh"
+        py="5dvh"
         textAlign="center"
       >
         <VStack
@@ -263,7 +263,7 @@ export default function Home() {
             minW="fit-content"
             w={{ base: "100%", sm: "auto" }}
             bg="blackAlpha.600"
-            maxW={{ base: "", sm: "62vw" }}
+            maxW={{ base: "", sm: "62dvw" }}
             px={2}
           >
             {"Down with fascism! Fuck MAGA! Fuck Trump! Fuck Nazis!"}
@@ -273,7 +273,7 @@ export default function Home() {
             minW="fit-content"
             w={{ base: "100%", sm: "auto" }}
             bg="blackAlpha.600"
-            maxW={{ base: "", sm: "62vw" }}
+            maxW={{ base: "", sm: "62dvw" }}
             px={2}
           >
             {
diff --git a/src/components/charts/LineChart.tsx b/src/components/charts/LineChart.tsx
index cc6a882..7c9833e 100644
--- a/src/components/charts/LineChart.tsx
+++ b/src/components/charts/LineChart.tsx
@@ -25,7 +25,7 @@ const LineChartComponent = ({
   });
 
   return (
-    <Chart.Root maxH="xs" chart={chart} maxW="100vw">
+    <Chart.Root maxH="xs" chart={chart} maxW="100dvw">
       <LineChart data={chart.data}>
         <CartesianGrid stroke={chart.color("border")} vertical={false} />
         <XAxis
@@ -40,7 +40,7 @@ const LineChartComponent = ({
           tickLine={false}
           tickMargin={10}
           stroke={chart.color("border")}
-          // label={{ value: label, position: "left", angle: -90 }}
+        // label={{ value: label, position: "left", angle: -90 }}
         />
         <Tooltip
           animationDuration={100}
diff --git a/src/data/botCommands.ts b/src/data/botCommands.ts
new file mode 100644
index 0000000..4ca6d09
--- /dev/null
+++ b/src/data/botCommands.ts
@@ -0,0 +1,56 @@
+// * Commands *
+
+interface Commands {
+  command: String;
+  description: String;
+  groups: boolean;
+  private: boolean;
+}
+
+const botInfo: Commands = {
+  command: "/botInfo",
+  description:
+    "Lists information about the bot such as: creator, reason for creation, purpose, etc",
+  groups: true,
+  private: true
+};
+
+const getGroupStats: Commands = {
+  command: "/groupStats",
+  description:
+    "Displays the number of times the bot has deleted links in your group for the lifetime of the bot",
+  groups: true,
+  private: false
+};
+
+const help: Commands = {
+  command: "/help",
+  description:
+    "Lists information about how to use and setup the bot and the list of available commands for the bot",
+  groups: true,
+  private: true
+};
+
+const registerGroup: Commands = {
+  command: "/registerGroup",
+  description: `Will add your group to the database, if your group doesn't exist already, to add to the "total groups" count on the bot stats website`,
+  groups: true,
+  private: true
+};
+
+const botStatsSite: Commands = {
+  command: "/botStats",
+  description: "Provides the bot stats website link as an embed",
+  groups: true,
+  private: true
+};
+
+const commands: Commands[] = [
+  botInfo,
+  getGroupStats,
+  help,
+  registerGroup,
+  botStatsSite
+];
+
+export default commands;