diff --git a/src/components/client-layout.tsx b/src/components/client-layout.tsx
index a7ba354..6b6859d 100644
--- a/src/components/client-layout.tsx
+++ b/src/components/client-layout.tsx
@@ -17,7 +17,7 @@ function ClientLayout({ children }: PropsWithChildren<{}>) {
     >
       <NavigationBar />
       {children}
-      <Toaster />
+      <Toaster position="top-center" />
     </ThemeProvider>
   );
 }
diff --git a/src/components/flashcard/answer-buttons.tsx b/src/components/flashcard/answer-buttons.tsx
index 7be7c50..83b5cd8 100644
--- a/src/components/flashcard/answer-buttons.tsx
+++ b/src/components/flashcard/answer-buttons.tsx
@@ -28,7 +28,11 @@ function AnswerButton({
     <TooltipProvider key={rating}>
       <Tooltip>
         <TooltipTrigger asChild>
-          <Button variant="outline" onClick={() => onRating(rating)}>
+          <Button
+            className="h-full"
+            variant="outline"
+            onClick={() => onRating(rating)}
+          >
             <p>{rating}</p>
           </Button>
         </TooltipTrigger>
@@ -52,7 +56,7 @@ export default function AnswerButtons({
   const ratingsToShow: Rating[] = ["Again", "Hard", "Good", "Easy"];
 
   return (
-    <div className="grid w-80 grid-cols-2 gap-x-2 gap-y-2 sm:w-96 md:grid-cols-4">
+    <div className="grid h-12 w-screen grid-cols-2 gap-x-2 gap-y-2 px-2 sm:w-96 md:grid-cols-4">
       {open ? (
         ratingsToShow.map((rating) => {
           return (
@@ -70,7 +74,7 @@ export default function AnswerButtons({
       ) : (
         <Button
           variant="secondary"
-          className="col-span-2 font-mono hover:animate-pulse md:col-span-4"
+          className="invisible col-span-2 h-full font-mono hover:animate-pulse sm:visible md:col-span-4"
           onClick={() => setOpen(true)}
         >
           space to reveal
diff --git a/src/components/flashcard/flashcard.tsx b/src/components/flashcard/flashcard.tsx
index 1f787f6..5489fee 100644
--- a/src/components/flashcard/flashcard.tsx
+++ b/src/components/flashcard/flashcard.tsx
@@ -16,7 +16,6 @@ import {
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { buttonVariants } from "@/components/ui/button";
-import { UiCard } from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
@@ -38,7 +37,7 @@ import { cn } from "@/utils/ui";
 import { zodResolver } from "@hookform/resolvers/zod";
 import _ from "lodash";
 import { FilePenIcon, Info, Telescope, TrashIcon } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 
 type Props = {
@@ -174,10 +173,7 @@ export default function Flashcard({
       </div>
 
       <Form {...form}>
-        <form
-          action=""
-          className="col-span-8 grid grid-cols-8 place-items-end gap-x-4 gap-y-4 sm:grid-rows-[2fr_1fr]"
-        >
+        <div className="col-span-8 grid grid-cols-8 place-items-end gap-x-4 gap-y-4 sm:grid-rows-[2fr_1fr]">
           <div
             className={cn(
               "col-span-8 flex h-full min-h-80 w-full items-center overflow-y-auto border border-input sm:col-span-4 sm:min-h-96",
@@ -221,7 +217,9 @@ export default function Flashcard({
             />
           </div>
 
-          <div className="col-span-8 flex justify-center self-start justify-self-center">
+          <div className="h-40 sm:hidden"></div>
+
+          <div className="fixed bottom-8 z-20 col-span-8 flex justify-center self-start justify-self-center sm:static">
             <AnswerButtons
               schemaRatingToReviewDay={schemaRatingToReviewDay}
               onRating={onRating}
@@ -229,7 +227,7 @@ export default function Flashcard({
               setOpen={setOpen}
             />
           </div>
-        </form>
+        </div>
       </Form>
     </div>
   );
diff --git a/src/hooks/card/use-grade-card.ts b/src/hooks/card/use-grade-card.ts
index 1c4623e..c786d85 100644
--- a/src/hooks/card/use-grade-card.ts
+++ b/src/hooks/card/use-grade-card.ts
@@ -32,6 +32,7 @@ export function useGradeCard(options?: GradeMutationOptions): GradeMutation {
     },
 
     async onSuccess() {
+      await utils.card.sessionData.cancel();
       const sessionData = utils.card.sessionData.getData();
       // Refetch periodically to get more cards
       // We don't use infinite queries here because there is no pagination
@@ -43,6 +44,7 @@ export function useGradeCard(options?: GradeMutationOptions): GradeMutation {
       )
         return;
 
+      console.log("Invalidated");
       await utils.card.sessionData.invalidate();
     },