diff --git a/public/placeholder.jpeg b/public/placeholder.jpeg
new file mode 100644
index 0000000..bb1655c
Binary files /dev/null and b/public/placeholder.jpeg differ
diff --git a/src/app/awards/AwardCard.tsx b/src/app/awards/AwardCard.tsx
new file mode 100644
index 0000000..316a9d4
--- /dev/null
+++ b/src/app/awards/AwardCard.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import Image from "next/image";
+
+import { cn } from "~/utils";
+
+import { type Award } from "./page";
+
+export function AwardCard({ award }: { award: Award }) {
+  const label = award.awardType === "WORD_COUNT" ? "words" : "sentences";
+
+  const numberAward = (
+    <p className="text-2xl">
+      {award.awardValue ?? 0} {label}
+    </p>
+  );
+
+  const masteryAward = (
+    <p className="text-2xl">{award.word && <p>{award.word?.word}</p>}</p>
+  );
+
+  return (
+    <div className="flex flex-col items-center bg-gray-200">
+      {award.word ? masteryAward : numberAward}
+
+      <Image
+        key={award.id}
+        src={award.image?.imageUrl ?? "/placeholder.jpeg"}
+        alt={"Award image"}
+        width={256}
+        height={256}
+        className={cn("rounded-md", {
+          "border-4 border-yellow-400": !award.imageId,
+        })}
+      />
+    </div>
+  );
+}
diff --git a/src/app/awards/AwardImageChoice.tsx b/src/app/awards/AwardImageChoice.tsx
new file mode 100644
index 0000000..0306eaf
--- /dev/null
+++ b/src/app/awards/AwardImageChoice.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import Image from "next/image";
+
+import { trpc } from "~/app/_trpc/client";
+import { ButtonLoading } from "~/components/ButtonLoading";
+
+import { type AwardImage } from "./page";
+
+export function AwardImageChoice({
+  image,
+  shouldClickToClaim,
+}: {
+  image: AwardImage;
+  shouldClickToClaim: boolean;
+}) {
+  const utils = trpc.useContext();
+
+  const addImageIdToAward = trpc.awardRouter.addImageIdToAward.useMutation();
+
+  const handleAddImageIdToAward = async (imageId: string) => {
+    // confirm add
+    const shouldAdd = confirm(
+      "Are you sure you want to add this image to the award?"
+    );
+    if (!shouldAdd) {
+      return;
+    }
+
+    await addImageIdToAward.mutateAsync({
+      imageId,
+    });
+
+    await utils.awardRouter.getAllAwardsForProfile.invalidate();
+  };
+
+  const deleteImage = trpc.awardRouter.deleteImage.useMutation();
+
+  const handleDeleteImage = async (imageId: string) => {
+    await deleteImage.mutateAsync({
+      imageId,
+    });
+
+    await utils.awardRouter.getAllAwardImages.invalidate();
+  };
+
+  return (
+    <div>
+      <Image
+        key={image.id}
+        src={image.imageUrl}
+        alt={"Award image"}
+        width={256}
+        height={256}
+        onClick={() => shouldClickToClaim && handleAddImageIdToAward(image.id)}
+      />
+      <ButtonLoading
+        onClick={() => handleDeleteImage(image.id)}
+        isLoading={deleteImage.isLoading}
+      >
+        Delete
+      </ButtonLoading>
+    </div>
+  );
+}
diff --git a/src/app/awards/AwardList.tsx b/src/app/awards/AwardList.tsx
new file mode 100644
index 0000000..7b896a2
--- /dev/null
+++ b/src/app/awards/AwardList.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { AwardCard } from "./AwardCard";
+import { type Award } from "./page";
+
+export function AwardList({ awards = [] }: { awards?: Award[] }) {
+  return (
+    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+      {awards.map((award) => (
+        <AwardCard key={award.id} award={award} />
+      ))}
+    </div>
+  );
+}
diff --git a/src/app/awards/page.tsx b/src/app/awards/page.tsx
index ff25928..706acbe 100644
--- a/src/app/awards/page.tsx
+++ b/src/app/awards/page.tsx
@@ -1,16 +1,27 @@
 "use client";
 
 import { useState } from "react";
-import Image from "next/image";
 
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
 import { trpc } from "~/app/_trpc/client";
 import { ButtonLoading } from "~/components/ButtonLoading";
 import { Textarea } from "~/components/ui/textarea";
 import { type RouterOutputs } from "~/utils/api";
 
-type Award = RouterOutputs["awardRouter"]["getAllAwardsForProfile"][number];
+import { AwardImageChoice } from "./AwardImageChoice";
+import { AwardList } from "./AwardList";
 
-type AwardImage = RouterOutputs["awardRouter"]["getAllAwardImages"][number];
+export type Award =
+  RouterOutputs["awardRouter"]["getAllAwardsForProfile"][number];
+
+export type AwardImage =
+  RouterOutputs["awardRouter"]["getAllAwardImages"][number];
 
 export default function AwardsPage() {
   const { data: awards } = trpc.awardRouter.getAllAwardsForProfile.useQuery();
@@ -61,139 +72,93 @@ export default function AwardsPage() {
     Math.ceil(((currentSentenceCount ?? 0) + 1) / 10) * 10;
 
   return (
-    <div>
+    <div className="flex flex-col items-center gap-4">
       <h1>Awards</h1>
-
-      <h2>Word count awards</h2>
-
-      <p>Current word count: {currentWordCount}</p>
-      <p>Next award at: {nextWordAward}</p>
-
-      <AwardList awards={wordCountAwards} />
-
-      <h2>Sentence count awards</h2>
-
-      <p>Current sentence count: {currentSentenceCount}</p>
-      <p>Next award at: {nextSentenceAward}</p>
-
-      <AwardList awards={sentenceCountAwards} />
-
-      <h2>Word mastery awards</h2>
-
-      <AwardList awards={wordMasteryAwards} />
+      <Card className="max-w-4xl">
+        <CardHeader>
+          <CardTitle>Word count awards</CardTitle>
+          <CardDescription>
+            Word count awards are given every 100 correct words.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p>Current word count: {currentWordCount}</p>
+          <p>Next award at: {nextWordAward}</p>
+          <AwardList awards={wordCountAwards} />
+        </CardContent>
+      </Card>
+
+      <Card className="max-w-4xl">
+        <CardHeader>
+          <CardTitle>Sentence count awards</CardTitle>
+          <CardDescription>
+            Awards are given every 10 sentences.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p>Current sentence count: {currentSentenceCount}</p>
+          <p>Next award at: {nextSentenceAward}</p>
+          <AwardList awards={sentenceCountAwards} />
+        </CardContent>
+      </Card>
+
+      <Card className="max-w-4xl">
+        <CardHeader>
+          <CardTitle>Word mastery awards</CardTitle>
+          <CardDescription>
+            Given when the interval on a word reaches the max: 60d.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <AwardList awards={wordMasteryAwards} />
+        </CardContent>
+      </Card>
 
       {hasUnclaimedAwards && (
         <>
-          <h2>Award images</h2>
-
-          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
-            {(allAwardImages ?? []).map((image) => (
-              <AwardImageChoice
-                key={image.id}
-                image={image}
-                shouldClickToClaim={hasUnclaimedAwards}
-              />
-            ))}
-          </div>
+          <Card className="max-w-4xl">
+            <CardHeader>
+              <CardTitle>Pick new awards</CardTitle>
+              <CardDescription>
+                Click an image to add to your awards.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {" "}
+              <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+                {(allAwardImages ?? []).map((image) => (
+                  <AwardImageChoice
+                    key={image.id}
+                    image={image}
+                    shouldClickToClaim={hasUnclaimedAwards}
+                  />
+                ))}
+              </div>
+            </CardContent>
+          </Card>
         </>
       )}
 
-      <Textarea
-        value={imageUrls}
-        onChange={(e) => setImageUrls(e.target.value)}
-      />
-      <ButtonLoading
-        onClick={handleAddAwardImages}
-        isLoading={addAwardImages.isLoading}
-      >
-        Add URLs
-      </ButtonLoading>
-    </div>
-  );
-}
-
-function AwardCard({ award }: { award: Award }) {
-  return (
-    <div className="flex  flex-col items-center bg-gray-200">
-      <p>{award.awardType}</p>
-      <p>{award.awardValue ?? 0}</p>
-      {award.word && <p>{award.word.word}</p>}
-      {award.image && (
-        <Image
-          key={award.id}
-          src={award.image.imageUrl}
-          alt={"Award image"}
-          width={256}
-          height={256}
-        />
-      )}
-    </div>
-  );
-}
-
-function AwardImageChoice({
-  image,
-  shouldClickToClaim,
-}: {
-  image: AwardImage;
-  shouldClickToClaim: boolean;
-}) {
-  const utils = trpc.useContext();
-
-  const addImageIdToAward = trpc.awardRouter.addImageIdToAward.useMutation();
-
-  const handleAddImageIdToAward = async (imageId: string) => {
-    // confirm add
-    const shouldAdd = confirm(
-      "Are you sure you want to add this image to the award?"
-    );
-    if (!shouldAdd) {
-      return;
-    }
-
-    await addImageIdToAward.mutateAsync({
-      imageId,
-    });
-
-    await utils.awardRouter.getAllAwardsForProfile.invalidate();
-  };
-
-  const deleteImage = trpc.awardRouter.deleteImage.useMutation();
-
-  const handleDeleteImage = async (imageId: string) => {
-    await deleteImage.mutateAsync({
-      imageId,
-    });
-
-    await utils.awardRouter.getAllAwardImages.invalidate();
-  };
-
-  return (
-    <div>
-      <Image
-        key={image.id}
-        src={image.imageUrl}
-        alt={"Award image"}
-        width={256}
-        height={256}
-        onClick={() => shouldClickToClaim && handleAddImageIdToAward(image.id)}
-      />
-      <ButtonLoading
-        onClick={() => handleDeleteImage(image.id)}
-        isLoading={deleteImage.isLoading}
-      >
-        Delete
-      </ButtonLoading>
-    </div>
-  );
-}
-
-function AwardList({ awards = [] }: { awards?: Award[] }) {
-  return (
-    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
-      {awards.map((award) => (
-        <AwardCard key={award.id} award={award} />
-      ))}
+      <Card className="max-w-4xl">
+        <CardHeader>
+          <CardTitle>Add images to award choices</CardTitle>
+          <CardDescription>
+            Paste a set of image URLs here to add to DB
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Textarea
+            value={imageUrls}
+            onChange={(e) => setImageUrls(e.target.value)}
+          />
+          <ButtonLoading
+            onClick={handleAddAwardImages}
+            isLoading={addAwardImages.isLoading}
+          >
+            Add URLs
+          </ButtonLoading>
+        </CardContent>
+      </Card>
     </div>
   );
 }
diff --git a/src/components/SentenceQuestionPractice.tsx b/src/components/SentenceQuestionPractice.tsx
index 6bf32b9..709d98f 100644
--- a/src/components/SentenceQuestionPractice.tsx
+++ b/src/components/SentenceQuestionPractice.tsx
@@ -159,97 +159,95 @@ export function SentenceQuestionPractice() {
   return (
     <div>
       {firstSentence && (
-        <div>
-          <Card>
-            <CardContent>
-              <div className="flex flex-col items-center gap-1">
-                <div className="flex flex-wrap items-center gap-1">
-                  <div className="flex gap-1">
-                    <DropdownMenu>
-                      <DropdownMenuTrigger>
-                        <Icons.baseline />
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent>
-                        <DropdownMenuLabel>Font Settings</DropdownMenuLabel>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem
-                          onClick={() => {
-                            setFontSize(fontSize + 1);
-                          }}
-                          onSelect={(evt) => evt.preventDefault()}
-                        >
-                          <Icons.zoomIn /> <span>Larger font</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          onClick={() => {
-                            setFontSize(fontSize - 1);
-                          }}
-                          onSelect={(evt) => evt.preventDefault()}
-                        >
-                          <Icons.zoomOut /> <span>Smaller font</span>
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </div>
-                  <div className="flex items-center justify-center">
-                    <Button
-                      onClick={handlePreviousQuestion}
-                      disabled={activeQuestionIndex === 0}
-                      variant={"outline"}
-                      size="sm"
-                    >
-                      <Icons.chevronLeft />
-                    </Button>
-
-                    <div className="flex flex-col items-center px-2">
-                      <div>{activeQuestionIndex + 1}</div>
-                      <div>{sentencesToUse?.length ?? 0}</div>
-                    </div>
-
-                    <Button
-                      onClick={handleNextQuestion}
-                      disabled={
-                        activeQuestionIndex === sentencesToUse?.length - 1
-                      }
-                      variant={"outline"}
-                      size="sm"
-                    >
-                      <Icons.chevronRight />
-                    </Button>
-                  </div>
-                  <div className="flex">
-                    <ButtonLoading
-                      onClick={handleSubmitSentence}
-                      isLoading={submitSentenceMutation.isLoading}
-                    >
-                      Save
-                    </ButtonLoading>
-                  </div>
+        <Card className="max-w-3xl">
+          <CardContent>
+            <div className="flex flex-col items-center gap-1">
+              <div className="flex flex-wrap items-center gap-1">
+                <div className="flex gap-1">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger>
+                      <Icons.baseline />
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                      <DropdownMenuLabel>Font Settings</DropdownMenuLabel>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem
+                        onClick={() => {
+                          setFontSize(fontSize + 1);
+                        }}
+                        onSelect={(evt) => evt.preventDefault()}
+                      >
+                        <Icons.zoomIn /> <span>Larger font</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        onClick={() => {
+                          setFontSize(fontSize - 1);
+                        }}
+                        onSelect={(evt) => evt.preventDefault()}
+                      >
+                        <Icons.zoomOut /> <span>Smaller font</span>
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
                 </div>
+                <div className="flex items-center justify-center">
+                  <Button
+                    onClick={handlePreviousQuestion}
+                    disabled={activeQuestionIndex === 0}
+                    variant={"outline"}
+                    size="sm"
+                  >
+                    <Icons.chevronLeft />
+                  </Button>
+
+                  <div className="flex flex-col items-center px-2">
+                    <div>{activeQuestionIndex + 1}</div>
+                    <div>{sentencesToUse?.length ?? 0}</div>
+                  </div>
 
-                <div
-                  style={{
-                    fontSize: `${fontSize}rem`,
-                    gap: `${fontSize / 4}rem`,
-                    rowGap: 0,
-                    lineHeight: `${fontSize}rem`,
-                  }}
-                  className="flex flex-wrap py-2"
-                >
-                  {wordsToRender.map((wordToRender, idx) => (
-                    <WordInSentence
-                      key={idx}
-                      wordToRender={wordToRender}
-                      onUpdateScore={(score) => {
-                        handleScore(wordToRender, score);
-                      }}
-                    />
-                  ))}
+                  <Button
+                    onClick={handleNextQuestion}
+                    disabled={
+                      activeQuestionIndex === sentencesToUse?.length - 1
+                    }
+                    variant={"outline"}
+                    size="sm"
+                  >
+                    <Icons.chevronRight />
+                  </Button>
+                </div>
+                <div className="flex">
+                  <ButtonLoading
+                    onClick={handleSubmitSentence}
+                    isLoading={submitSentenceMutation.isLoading}
+                  >
+                    Save
+                  </ButtonLoading>
                 </div>
               </div>
-            </CardContent>
-          </Card>
-        </div>
+
+              <div
+                style={{
+                  fontSize: `${fontSize}rem`,
+                  gap: `${fontSize / 4}rem`,
+                  rowGap: 0,
+                  lineHeight: `${fontSize}rem`,
+                }}
+                className="flex flex-wrap py-2"
+              >
+                {wordsToRender.map((wordToRender, idx) => (
+                  <WordInSentence
+                    key={idx}
+                    wordToRender={wordToRender}
+                    onUpdateScore={(score) => {
+                      handleScore(wordToRender, score);
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
       )}
     </div>
   );