diff --git a/web/vite/src/OrderSets.tsx b/web/vite/src/OrderSets.tsx
index 6096ca3..d437ca0 100644
--- a/web/vite/src/OrderSets.tsx
+++ b/web/vite/src/OrderSets.tsx
@@ -8,6 +8,7 @@ import {
   Box,
   RingProgress,
   Alert,
+  Grid,
 } from "@mantine/core";
 import { IconAlertTriangle } from "@tabler/icons-react";
 import { TimeValue } from "@mantine/dates";
@@ -119,7 +120,7 @@ export const OrderSets: React.FC<OrderSetProps> = ({
           }
         }}
       >
-        <Flex gap="md" wrap="wrap">
+        <Grid gutter="md">
           {orderSets
             ? orderSets.map(
                 ({
@@ -133,95 +134,96 @@ export const OrderSets: React.FC<OrderSetProps> = ({
                   probability,
                   punishment_pool_name,
                 }) => (
-                  <Card
-                    key={id}
-                    shadow="sm"
-                    padding="lg"
-                    radius="md"
-                    withBorder
-                    bg="gray.2"
-                    w="400px"
-                    mb="0"
-                  >
-                    <Flex direction="column" gap="md" h="100%">
-                      <Title order={4}>{name}</Title>
-                      {scheduled ? (
-                        <>
-                          <Flex gap="xs">
-                            <Text>
-                              <b>Scheduled:</b>
-                            </Text>
-                            {time.split(",").map((time) => (
-                              <div key={time}>
-                                <TimeValue
-                                  key={time}
-                                  value={time}
-                                  format="12h"
-                                />
-                              </div>
-                            ))}
-                          </Flex>
-                          <Flex gap="md" align="center">
-                            {weekdays ? (
-                              <Badge color="blue">Weekdays</Badge>
-                            ) : null}
-                            {weekends ? (
-                              <Badge color="blue">Weekends</Badge>
-                            ) : null}
-                            <RingProgress
-                              size={30}
-                              thickness={5}
-                              label={
-                                <Text size="xs" ml="lg">
-                                  {probability * 100}%
-                                </Text>
-                              }
-                              sections={[
-                                { color: "cyan", value: probability * 100 },
-                              ]}
-                            />
-                          </Flex>
-                        </>
-                      ) : null}
-                      {punishment_pool_name ? (
-                        <Text flex={1}>
-                          <b>Punishments:</b> {punishment_pool_name}
-                        </Text>
-                      ) : null}
-                      <Flex justify="end" align="flex-end" gap="md">
-                        {orders.length > 0 ? (
-                          <DonutChart
-                            flex={1}
-                            size={130}
-                            thickness={30}
-                            data={orders.map(({ name, weight }, idx) => ({
-                              name,
-                              value: weight,
-                              color:
-                                COLORS_ROTATION[idx % COLORS_ROTATION.length],
-                            }))}
-                            tooltipDataSource="segment"
-                          />
+                  <Grid.Col span={{ base: 12, sm: 6 }}>
+                    <Card
+                      key={id}
+                      shadow="sm"
+                      padding="lg"
+                      radius="md"
+                      withBorder
+                      bg="gray.2"
+                      mb="0"
+                    >
+                      <Flex direction="column" gap="md" h="100%">
+                        <Title order={4}>{name}</Title>
+                        {scheduled ? (
+                          <>
+                            <Flex gap="xs">
+                              <Text>
+                                <b>Scheduled:</b>
+                              </Text>
+                              {time.split(",").map((time) => (
+                                <div key={time}>
+                                  <TimeValue
+                                    key={time}
+                                    value={time}
+                                    format="12h"
+                                  />
+                                </div>
+                              ))}
+                            </Flex>
+                            <Flex gap="md" align="center">
+                              {weekdays ? (
+                                <Badge color="blue">Weekdays</Badge>
+                              ) : null}
+                              {weekends ? (
+                                <Badge color="blue">Weekends</Badge>
+                              ) : null}
+                              <RingProgress
+                                size={30}
+                                thickness={5}
+                                label={
+                                  <Text size="xs" ml="lg">
+                                    {probability * 100}%
+                                  </Text>
+                                }
+                                sections={[
+                                  { color: "cyan", value: probability * 100 },
+                                ]}
+                              />
+                            </Flex>
+                          </>
                         ) : null}
-                        <ConfirmDialogButton
-                          buttonColor="red.8"
-                          buttonText="Delete"
-                          text={`Are you sure you want to delete ${name}?`}
-                          onConfirm={() => handleDelete(id)}
-                        >
-                          <IconTrash />
-                        </ConfirmDialogButton>
-                        <NavigateButton to={`/orders/${username}/${id}`}>
-                          <IconPencil style={{ marginRight: "0.5rem" }} />
-                          Edit
-                        </NavigateButton>
+                        {punishment_pool_name ? (
+                          <Text flex={1}>
+                            <b>Punishments:</b> {punishment_pool_name}
+                          </Text>
+                        ) : null}
+                        <Flex justify="end" align="flex-end" gap="md">
+                          {orders.length > 0 ? (
+                            <DonutChart
+                              flex={1}
+                              size={130}
+                              thickness={30}
+                              data={orders.map(({ name, weight }, idx) => ({
+                                name,
+                                value: weight,
+                                color:
+                                  COLORS_ROTATION[idx % COLORS_ROTATION.length],
+                              }))}
+                              tooltipDataSource="segment"
+                            />
+                          ) : null}
+                          <ConfirmDialogButton
+                            buttonColor="red.8"
+                            buttonText="Delete"
+                            text={`Are you sure you want to delete ${name}?`}
+                            onConfirm={() => handleDelete(id)}
+                          >
+                            <IconTrash />
+                          </ConfirmDialogButton>
+                          <NavigateButton to={`/orders/${username}/${id}`}>
+                            <IconPencil style={{ marginRight: "0.5rem" }} />
+                            Edit
+                          </NavigateButton>
+                        </Flex>
                       </Flex>
-                    </Flex>
-                  </Card>
+                    </Card>
+                  </Grid.Col>
                 ),
               )
             : null}
-        </Flex>
+        </Grid>
       </div>
       <Box my="lg">
         <NavigateButton to={`/orders/${username}/new`}>