diff --git a/package-lock.json b/package-lock.json
index 75d8a03..7ad058c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,6 @@
       "dependencies": {
         "@fvilers/disable-react-devtools": "^1.3.0",
         "@hookform/resolvers": "^3.3.4",
-        "@tanstack/query-core": "^5.17.10",
         "@tanstack/react-query": "^5.17.9",
         "@tanstack/react-query-devtools": "^5.17.9",
         "axios": "^1.6.5",
@@ -22,9 +21,7 @@
         "react-hook-form": "^7.49.2",
         "react-hot-toast": "^2.4.1",
         "react-router-dom": "^6.21.1",
-        "react-spinners": "^0.13.8",
         "tailwind-merge": "^2.2.0",
-        "wonka": "^6.3.4",
         "zod": "^3.22.4"
       },
       "devDependencies": {
@@ -790,9 +787,8 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.17.10",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.17.10.tgz",
-      "integrity": "sha512-bJ2oQUDBftvHcEkLS3gyzzShSeZpJyzNNRu8oHK13iNdsofyaDXtNO/c1Zy/PZYVX+PhqOXwoT42gMiEMRSSfQ==",
+      "version": "5.17.9",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
@@ -835,15 +831,6 @@
         "react": "^18.0.0"
       }
     },
-    "node_modules/@tanstack/react-query/node_modules/@tanstack/query-core": {
-      "version": "5.17.9",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.17.9.tgz",
-      "integrity": "sha512-8xcvpWIPaRMDNLMvG9ugcUJMgFK316ZsqkPPbsI+TMZsb10N9jk0B6XgPk4/kgWC2ziHyWR7n7wUhxmD0pChQw==",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "dev": true,
@@ -901,12 +888,12 @@
     },
     "node_modules/@types/prop-types": {
       "version": "15.7.11",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.2.47",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -924,7 +911,7 @@
     },
     "node_modules/@types/scheduler": {
       "version": "0.16.8",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/semver": {
@@ -1500,7 +1487,6 @@
     },
     "node_modules/csstype": {
       "version": "3.1.3",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/debug": {
@@ -2344,8 +2330,7 @@
     },
     "node_modules/jotai-tanstack-query": {
       "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/jotai-tanstack-query/-/jotai-tanstack-query-0.8.1.tgz",
-      "integrity": "sha512-pwovDx7tnMR+YzJv05sJykisXEDVD5b400NUCVMM3VvXq9aR9EnwUvSPF8/fqaULDgMmua168gWoe3QpuF5DkQ==",
+      "license": "MIT",
       "peerDependencies": {
         "@tanstack/query-core": "*",
         "jotai": ">=1.11.0",
@@ -3068,15 +3053,6 @@
         "react-dom": ">=16.8"
       }
     },
-    "node_modules/react-spinners": {
-      "version": "0.13.8",
-      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
-      "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
-      "peerDependencies": {
-        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "dev": true,
@@ -3710,8 +3686,7 @@
     },
     "node_modules/wonka": {
       "version": "6.3.4",
-      "resolved": "https://registry.npmjs.org/wonka/-/wonka-6.3.4.tgz",
-      "integrity": "sha512-CjpbqNtBGNAeyNS/9W6q3kSkKE52+FjIj7AkFlLr11s/VWGUu6a2CdYSdGxocIhIVjaW/zchesBQUKPVU69Cqg=="
+      "license": "MIT"
     },
     "node_modules/wrap-ansi": {
       "version": "8.1.0",
diff --git a/package.json b/package.json
index 0be97ea..63520ef 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,6 @@
   "dependencies": {
     "@fvilers/disable-react-devtools": "^1.3.0",
     "@hookform/resolvers": "^3.3.4",
-    "@tanstack/query-core": "^5.17.10",
     "@tanstack/react-query": "^5.17.9",
     "@tanstack/react-query-devtools": "^5.17.9",
     "axios": "^1.6.5",
@@ -25,9 +24,7 @@
     "react-hook-form": "^7.49.2",
     "react-hot-toast": "^2.4.1",
     "react-router-dom": "^6.21.1",
-    "react-spinners": "^0.13.8",
     "tailwind-merge": "^2.2.0",
-    "wonka": "^6.3.4",
     "zod": "^3.22.4"
   },
   "devDependencies": {
@@ -49,4 +46,4 @@
     "typescript": "^5.3.3",
     "vite": "^5.0.11"
   }
-}
+}
\ No newline at end of file
diff --git a/src/atoms/quiz.ts b/src/atoms/quiz.ts
deleted file mode 100644
index 3114170..0000000
--- a/src/atoms/quiz.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { api } from "@/api/axios";
-import { QuizResponse } from "@/api/types/quiz";
-import { atom } from "jotai";
-import { atomWithQuery } from "jotai-tanstack-query";
-
-interface updateParamsAtom {
-  newName: string | undefined;
-  newSlug: string | undefined;
-}
-
-interface updateCurrTermProps {
-  value: number;
-  length: number;
-}
-
-export const userNameAtom = atom<string | undefined>("");
-export const quizSlugAtom = atom<string | undefined>("");
-export const currTermAtom = atom<number>(0);
-
-export const quizNameAtom = atom<string>(
-  get => get(quizAtom).data?.data.name ?? "Go Back"
-);
-
-export const quizLengthAtom = atom<number>(
-  get => get(quizAtom).data?.data.questions.length ?? 0
-);
-
-export const quizAtom = atomWithQuery(get => ({
-  queryKey: ["quiz", get(userNameAtom), get(quizSlugAtom)],
-  queryFn: () =>
-    api.get<QuizResponse>(
-      `/api/v1/Quiz/${get(userNameAtom)}/${get(quizSlugAtom)}`
-    ),
-}));
-
-export const updateParamsAtom = atom(
-  null,
-  (get, set, { newName, newSlug }: updateParamsAtom) => {
-    if (newName !== get(userNameAtom) || newSlug !== get(quizSlugAtom)) {
-      set(userNameAtom, newName);
-      set(quizSlugAtom, newSlug);
-      set(currTermAtom, 0);
-    }
-  }
-);
-
-export const updateCurrTermAtom = atom(
-  null,
-  (get, set, { value, length }: updateCurrTermProps) => {
-    const prev = get(currTermAtom);
-    value > 0
-      ? prev === length - 1
-        ? set(currTermAtom, 0)
-        : set(currTermAtom, prev + 1)
-      : prev === 0
-        ? set(currTermAtom, length - 1)
-        : set(currTermAtom, prev - 1);
-  }
-);
diff --git a/src/components/App.tsx b/src/components/App.tsx
index e24dae1..966e7c3 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -11,11 +11,7 @@ import Verified from "./pages/Auth/Verified";
 import Home from "./pages/Home/Home";
 import PersistLogin from "./router/PersistLogin";
 import Flashcards from "./pages/Quiz/Flashcards/Flashcards";
-import NotFound from "./pages/Status/NotFound/NotFound";
-import QuizLayout from "./layout/QuizLayout";
-import Error from "./pages/Status/Error";
-import Loading from "./pages/Status/Loading";
-import Unauthorized from "./pages/Status/Unauthorized";
+import NotFound from "./pages/Status/NotFound";
 
 export default function App() {
   return (
@@ -36,21 +32,10 @@ export default function App() {
 
           <Route path="/:userName/:quizSlug" element={<Quiz />} />
 
-          {/* <Route path="*" element={<NotFound />} /> */}
-          <Route path="/error" element={<Error />} />
-          <Route path="/notfound" element={<NotFound />} />
-          <Route path="/loading" element={<Loading />} />
-          <Route path="/unauthorized" element={<Unauthorized />} />
-        </Route>
-
-        <Route path="/" element={<QuizLayout />}>
-          <Route path="/flashcards" element={<Flashcards />} />
-          <Route
-            path="/:userName/:quizSlug/flashcards"
-            element={<Flashcards />}
-          />
-          <Route path="/test" element={<Test />} />
+          <Route path="*" element={<NotFound />} />
         </Route>
+        <Route path="/flashcards" element={<Flashcards />} />
+        <Route path="/test" element={<Test />} />
       </Route>
     </Routes>
   );
diff --git a/src/components/layout/Background/Background.tsx b/src/components/layout/Background/Background.tsx
deleted file mode 100644
index 8bcb250..0000000
--- a/src/components/layout/Background/Background.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import Left from "./Left";
-import Right from "./Right";
-
-export default function Background() {
-  return (
-    <>
-      <div className="absolute top-0 w-full h-full bg-primary z-[-100]" />
-      <Right />
-      <Left />
-    </>
-  );
-}
diff --git a/src/components/layout/Background/Left.tsx b/src/components/layout/Background/Left.tsx
deleted file mode 100644
index e2b865e..0000000
--- a/src/components/layout/Background/Left.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-export default function Left() {
-  return (
-    <svg
-      width="287"
-      height="254"
-      viewBox="0 0 287 254"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className="absolute z-10 left-0 top-[50vh]"
-    >
-      <path
-        opacity="0.1"
-        d="M286.5 0.5L-14.5 254.5V69.5L286.5 0.5Z"
-        fill="url(#paint0_linear_111:578)"
-      ></path>
-      <defs>
-        <linearGradient
-          id="paint0_linear_111:578"
-          x1="-40.5"
-          y1="117"
-          x2="301.926"
-          y2="-97.1485"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#4A6CF7"></stop>
-          <stop offset="1" stopColor="#4A6CF7" stopOpacity="0"></stop>
-        </linearGradient>
-      </defs>
-    </svg>
-  );
-}
diff --git a/src/components/layout/Background/Right.tsx b/src/components/layout/Background/Right.tsx
deleted file mode 100644
index a8825e9..0000000
--- a/src/components/layout/Background/Right.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-export default function Right() {
-  return (
-    <svg
-      width="628"
-      height="258"
-      viewBox="0 0 628 258"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className="absolute z-10 right-0 top-0"
-    >
-      <path
-        opacity="0.1"
-        d="M669.125 257.002L345.875 31.9983L524.571 -15.8832L669.125 257.002Z"
-        fill="url(#paint0_linear_0:1)"
-      ></path>
-      <path
-        opacity="0.1"
-        d="M0.0716344 182.78L101.988 -15.0769L142.154 81.4093L0.0716344 182.78Z"
-        fill="url(#paint1_linear_0:1)"
-      ></path>
-      <defs>
-        <linearGradient
-          id="paint0_linear_0:1"
-          x1="644"
-          y1="221"
-          x2="429.946"
-          y2="37.0429"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#4A6CF7"></stop>
-          <stop offset="1" stopColor="#4A6CF7" stopOpacity="0"></stop>
-        </linearGradient>
-        <linearGradient
-          id="paint1_linear_0:1"
-          x1="18.3648"
-          y1="166.016"
-          x2="105.377"
-          y2="32.3398"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#4A6CF7"></stop>
-          <stop offset="1" stopColor="#4A6CF7" stopOpacity="0"></stop>
-        </linearGradient>
-      </defs>
-    </svg>
-  );
-}
diff --git a/src/components/layout/Header/QuizHeader.tsx b/src/components/layout/Header/QuizHeader.tsx
index 3533d50..60d20a1 100644
--- a/src/components/layout/Header/QuizHeader.tsx
+++ b/src/components/layout/Header/QuizHeader.tsx
@@ -1,33 +1,30 @@
 import MainLogo from "@/assets/images/light.png";
 import { X } from "lucide-react";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import DarkModeButton from "./DarkModeButton";
 import Logo from "./Logo";
-import { useAtomValue } from "jotai";
-import { quizNameAtom } from "@/atoms/quiz";
 
-export default function QuizHeader() {
-  const navigate = useNavigate();
-  const name = useAtomValue(quizNameAtom);
+interface QuizHeaderProps {
+  name: string;
+}
 
+export default function QuizHeader({ name }: QuizHeaderProps) {
   return (
     <nav className="bg-primary text-white top-0 w-full z-10 font-primary">
-      <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 container mx-auto px-4 sm:px-6 py-2 sm:py-3 lg:py-4 xl:px-8 2xl:px-12 z-50">
+      <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 container mx-auto px-4 sm:px-6 py-2 sm:py-3 lg:py-4 xl:px-8 2xl:px-12">
         <div className="col-start-1 flex items-center">
           <Logo logo={MainLogo} />
         </div>
         <div className="hidden sm:flex sm:items-center sm:justify-center sm:col-start-2">
-          <p className="textHover hidden sm:block text-lg font-semibold md:text-xl xl:text-2xl z-50">
-            <button onClick={() => navigate(-1)}>{name}</button>
+          <p className="textHover hidden sm:block text-lg font-semibold md:text-xl xl:text-2xl">
+            {name}
           </p>
         </div>
 
         <div className="col-start-2 sm:col-start-3 flex items-center ml-auto">
           <DarkModeButton />
           <Link to="/quiz" className="flex pl-3">
-            <button onClick={() => navigate(-1)}>
-              <X className="w-10 h-10 z-50" />
-            </button>
+            <X className="w-10 h-10" />
           </Link>
         </div>
       </div>
diff --git a/src/components/layout/Other/FillHeight.tsx b/src/components/layout/Other/FillHeight.tsx
new file mode 100644
index 0000000..2e17879
--- /dev/null
+++ b/src/components/layout/Other/FillHeight.tsx
@@ -0,0 +1,5 @@
+export default function FillHeight() {
+  return (
+    <div className="absolute top-0 w-full h-full bg-primary -z-[100]"></div>
+  );
+}
diff --git a/src/components/layout/QuizLayout.tsx b/src/components/layout/QuizLayout.tsx
index 8c3de86..32ecc15 100644
--- a/src/components/layout/QuizLayout.tsx
+++ b/src/components/layout/QuizLayout.tsx
@@ -1,14 +1,12 @@
 import { Toaster } from "react-hot-toast";
 import { Outlet } from "react-router-dom";
 import QuizHeader from "./Header/QuizHeader";
-// import Background from "./Background/Background";
 
 export default function QuizLayout() {
   return (
     <>
       <Toaster />
-      <QuizHeader />
-      {/* <Background /> */}
+      <QuizHeader name="Test" />
       <Outlet />
     </>
   );
diff --git a/src/components/other/HomePageButton.tsx b/src/components/other/HomePageButton.tsx
deleted file mode 100644
index 7c06528..0000000
--- a/src/components/other/HomePageButton.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Link } from "react-router-dom";
-
-export default function HomePageButton() {
-  return (
-    <Link
-      to="/"
-      className="bg-lightBlue py-4 px-8 rounded-md hover:bg-opacity-95 z-50"
-    >
-      Home Page
-    </Link>
-  );
-}
diff --git a/src/components/pages/Auth/ForgotPassword.tsx b/src/components/pages/Auth/ForgotPassword.tsx
index 6695deb..c2ee112 100644
--- a/src/components/pages/Auth/ForgotPassword.tsx
+++ b/src/components/pages/Auth/ForgotPassword.tsx
@@ -4,7 +4,7 @@ import ContentBox from "../../layout/ContentBox/ContentBox";
 import WarningIcon from "../../layout/ContentBox/Icons/WarningIcon";
 import Text from "../../layout/ContentBox/Text";
 import Title from "../../layout/ContentBox/Title";
-import FillHeight from "../../layout/Background/Background";
+import FillHeight from "../../layout/Other/FillHeight";
 
 export default function ForgotPassword() {
   return (
diff --git a/src/components/pages/Auth/PasswordReset.tsx b/src/components/pages/Auth/PasswordReset.tsx
index 695804f..0f04024 100644
--- a/src/components/pages/Auth/PasswordReset.tsx
+++ b/src/components/pages/Auth/PasswordReset.tsx
@@ -3,7 +3,7 @@ import ContentBox from "../../layout/ContentBox/ContentBox";
 import LockIcon from "../../layout/ContentBox/Icons/LockIcon";
 import Text from "../../layout/ContentBox/Text";
 import Title from "../../layout/ContentBox/Title";
-import FillHeight from "../../layout/Background/Background";
+import FillHeight from "../../layout/Other/FillHeight";
 
 export default function PasswordReset() {
   return (
diff --git a/src/components/pages/Auth/Verification.tsx b/src/components/pages/Auth/Verification.tsx
index d7c91f9..adc936c 100644
--- a/src/components/pages/Auth/Verification.tsx
+++ b/src/components/pages/Auth/Verification.tsx
@@ -3,7 +3,7 @@ import ContentBox from "../../layout/ContentBox/ContentBox";
 import EmailIcon from "../../layout/ContentBox/Icons/EmailIcon";
 import Text from "../../layout/ContentBox/Text";
 import Title from "../../layout/ContentBox/Title";
-import FillHeight from "../../layout/Background/Background";
+import FillHeight from "../../layout/Other/FillHeight";
 
 export default function Verification() {
   // const { token } = useParams();
diff --git a/src/components/pages/Auth/Verified.tsx b/src/components/pages/Auth/Verified.tsx
index c0ad332..bb383ce 100644
--- a/src/components/pages/Auth/Verified.tsx
+++ b/src/components/pages/Auth/Verified.tsx
@@ -2,7 +2,7 @@ import ContentBox from "../../layout/ContentBox/ContentBox";
 import Title from "../../layout/ContentBox/Title";
 import Text from "../../layout/ContentBox/Text";
 import { Button } from "../../layout/ContentBox/Button";
-import FillHeight from "../../layout/Background/Background";
+import FillHeight from "../../layout/Other/FillHeight";
 import { Link } from "react-router-dom";
 import CheckmarkIcon from "../../layout/ContentBox/Icons/CheckmarkIcon";
 
diff --git a/src/components/pages/Home/TileGrid/TileGrid.tsx b/src/components/pages/Home/TileGrid/TileGrid.tsx
index 6be6f6a..f6f1a1c 100644
--- a/src/components/pages/Home/TileGrid/TileGrid.tsx
+++ b/src/components/pages/Home/TileGrid/TileGrid.tsx
@@ -4,7 +4,7 @@ import { useQuery } from "@tanstack/react-query";
 import Loading from "../../Status/Loading";
 import { QuizResponse } from "@/api/types/quiz";
 import QuizTile from "./QuizTile";
-import NotFound from "../../Status/NotFound/NotFound";
+import NotFound from "../../Status/NotFound";
 
 export type TileGridViewProps = {
   quizes: QuizResponse[];
diff --git a/src/components/pages/Quiz/Category.tsx b/src/components/pages/Quiz/Category.tsx
index 440f290..72c6f1f 100644
--- a/src/components/pages/Quiz/Category.tsx
+++ b/src/components/pages/Quiz/Category.tsx
@@ -1,19 +1,15 @@
-import { Link } from "react-router-dom";
-
 interface CategoryProps {
   text: string;
-  to?: string;
 }
 
-export default function Category({ text, to }: CategoryProps) {
+export default function Category({ text }: CategoryProps) {
   return (
-    <Link
-      to={to ? to : "/"}
+    <button
       className="bg-secondary flex items-center gap-3 rounded-md px-4 py-3 font-medium w-full
                     max-w-[592px] sm:max-w-[500px] hover:bg-opacity-90"
     >
       <div className="bg-lightBlue w-8 h-8 rounded-md"></div>
       {text}
-    </Link>
+    </button>
   );
 }
diff --git a/src/components/pages/Quiz/ControlBar.tsx b/src/components/pages/Quiz/ControlBar.tsx
new file mode 100644
index 0000000..9717b38
--- /dev/null
+++ b/src/components/pages/Quiz/ControlBar.tsx
@@ -0,0 +1,26 @@
+interface ControlBarProps {
+  curr: number;
+  max: number;
+  left: () => void;
+  right: () => void;
+}
+
+export default function ControlBar({
+  curr,
+  max,
+  left,
+  right,
+}: ControlBarProps) {
+  return (
+    <>
+      {max <= 0 && <div className="flex items-center justify-center gap-8">
+        <p>No answers</p>
+      </div>}
+      {max > 0 && <div className="flex items-center justify-center gap-8">
+        <button onClick={left} className="bg-lightBlue w-12 h-12 rounded-3xl" />
+        <p>{`${curr} / ${max}`}</p>
+        <button onClick={right} className="bg-lightBlue w-12 h-12 rounded-3xl" />
+      </div>}
+    </>
+  );
+}
diff --git a/src/components/pages/Quiz/Flashcards/Arrow.tsx b/src/components/pages/Quiz/Flashcards/Arrow.tsx
deleted file mode 100644
index c3495e4..0000000
--- a/src/components/pages/Quiz/Flashcards/Arrow.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { twMerge } from "tailwind-merge";
-
-interface ArrowProps {
-  onClick: () => void;
-  dir: "left" | "right";
-}
-
-export default function Arrow({ onClick, dir }: ArrowProps) {
-  return (
-    <button
-      onClick={onClick}
-      aria-label={`${dir === "right" ? "Next question" : "Previous question"}`}
-      className="group flex w-10 h-10 md:w-12 md:h-12 items-center justify-center 
-      rounded-full shadow-md transition bg-secondary ring-[0.5px] ring-lightBlueB/30 hover:ring-lightBlue/60"
-    >
-      <svg
-        viewBox="0 0 16 16"
-        aria-hidden="true"
-        className={twMerge(
-          "w-4 h-4 md:w-6 md:h-6 stroke-lightBlueB group-hover:stroke-lightBlue transition",
-          dir === "right" ? "rotate-180" : ""
-        )}
-      >
-        <path
-          d="M7.25 11.25 3.75 8m0 0 3.5-3.25M3.75 8h8.5"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        ></path>
-      </svg>
-    </button>
-  );
-}
diff --git a/src/components/pages/Quiz/Flashcards/Flashcard.tsx b/src/components/pages/Quiz/Flashcards/Flashcard.tsx
index d33783c..0bd58eb 100644
--- a/src/components/pages/Quiz/Flashcards/Flashcard.tsx
+++ b/src/components/pages/Quiz/Flashcards/Flashcard.tsx
@@ -1,71 +1,35 @@
-import { useState } from "react";
 import { QuestionResponse } from "@/api/types/quiz";
-import Arrow from "./Arrow";
-import { useAtom, useAtomValue } from "jotai";
-import { currTermAtom, quizLengthAtom, updateCurrTermAtom } from "@/atoms/quiz";
-import { twMerge } from "tailwind-merge";
+import { useState } from "react";
 
 interface FlashcardProps {
-  questions: QuestionResponse[];
-  style: string;
+  question: QuestionResponse | undefined;
 }
 
-export default function Flashcard({ questions, style }: FlashcardProps) {
+export default function Flashcard({ question }: FlashcardProps) {
   const [isFlipped, setIsFlipped] = useState<boolean>(false);
-  const currTerm = useAtomValue(currTermAtom);
-  const [, updateCurrTerm] = useAtom(updateCurrTermAtom);
-  const length = useAtomValue(quizLengthAtom);
+  if(!question) return (<></>);
 
   const handleFlip = () => {
     setIsFlipped(!isFlipped);
   };
 
-  const decrement = () => {
-    updateCurrTerm({ value: -1, length: length });
-  };
-
-  const increment = () => {
-    updateCurrTerm({ value: 1, length: length });
-  };
-
   return (
-    <>
-      <div
-        className={twMerge(
-          "flex items-center justify-center [perspective:1000px]",
-          style
-        )}
-      >
-        <button
-          onClick={handleFlip}
-          className={`w-full h-full transition-transform duration-300 [transform-style:preserve-3d] ${
-            isFlipped ? `[transform:rotateX(180deg)]` : ``
-          }`}
-        >
-          <div className="bg-secondary flex items-center justify-center rounded-md p-4 absolute w-full h-full [backface-visibility:hidden]">
-            <p className="text-xl sm:text-2xl xl:text-3xl">
-              {length > 0
-                ? questions[currTerm].question
-                : "No questions available"}
-            </p>
-          </div>
-          <div className="bg-secondary flex items-center justify-center rounded-md p-4 w-full h-full overflow-auto [backface-visibility:hidden] [transform:rotateX(180deg)]">
-            <p className="text-xl sm:text-2xl xl:text-3xl">
-              {length > 0
-                ? questions[currTerm].answers[0].text
-                : "No questions available"}
-            </p>
-          </div>
-        </button>
+    <button
+      onClick={handleFlip}
+      className={`w-full h-full transition-transform duration-300 [transform-style:preserve-3d] ${
+        isFlipped ? `[transform:rotateX(180deg)]` : ``
+      }`}
+    >
+      <div className="bg-secondary flex items-center justify-center rounded-md p-4 absolute w-full h-full [backface-visibility:hidden]">
+        <p className="text-xl sm:text-2xl xl:text-3xl">
+          {question.question}
+        </p>
       </div>
-
-      {length > 0 && (
-        <div className="flex items-center justify-center gap-8">
-          <Arrow onClick={decrement} dir="left" />
-          <p>{`${currTerm + 1} / ${length}`}</p>
-          <Arrow onClick={increment} dir="right" />
-        </div>
-      )}
-    </>
+      <div className="bg-secondary flex items-center justify-center rounded-md p-4 w-full h-full overflow-auto [backface-visibility:hidden] [transform:rotateX(180deg)]">
+        <p className="text-xl sm:text-2xl xl:text-3xl">
+          {question.answers[0].text}
+        </p>
+      </div>
+    </button>
   );
 }
diff --git a/src/components/pages/Quiz/Flashcards/Flashcards.tsx b/src/components/pages/Quiz/Flashcards/Flashcards.tsx
index 578a8c6..70b59b0 100644
--- a/src/components/pages/Quiz/Flashcards/Flashcards.tsx
+++ b/src/components/pages/Quiz/Flashcards/Flashcards.tsx
@@ -1,32 +1,47 @@
+import { useState } from "react";
 import { Toaster } from "react-hot-toast";
-import GetQuizData from "@/hooks/GetQuizData";
-import Loading from "../../Status/Loading";
-import NotFound from "../../Status/NotFound/NotFound";
-import Error from "../../Status/Error";
-import Flashcard from "./Flashcard";
+import ControlBar from "../ControlBar";
+import QuizHeader from "../../../layout/Header/QuizHeader";
+import { TermProps } from "../Term";
 
 export default function Flashcards() {
-  const { isLoading, isError, quiz } = GetQuizData();
+  const [currTerm, setCurrTerm] = useState<number>(0);
 
-  if (isLoading || isError || !quiz) {
-    return (
-      <>
-        {isLoading && <Loading />}
-        {isError && <NotFound />}
-        {!quiz && <Error msg="Quiz is undefined" />}
-      </>
-    );
-  }
+  const terms: TermProps[] = [
+    { term: "Quicksort1", desc: "XXXXXXXXX1" },
+    { term: "Quicksort2", desc: "XXXXXXXXX2" },
+    { term: "Quicksort3", desc: "XXXXXXXXX3" },
+    { term: "Quicksort4", desc: "XXXXXXXXX4" },
+    { term: "Quicksort5", desc: "XXXXXXXXX5" },
+  ];
 
+  const increment = () => {
+    currTerm === terms.length - 1
+      ? setCurrTerm(0)
+      : setCurrTerm(prev => prev + 1);
+  };
+
+  const decrement = () => {
+    currTerm === 0
+      ? setCurrTerm(terms.length - 1)
+      : setCurrTerm(prev => prev - 1);
+  };
   return (
     <>
       <Toaster />
-      <div className="bg-primary text-white fixed w-full h-[100vh] px-4 py-12 sm:py-16 md:py-20 lg:py-24">
+      <QuizHeader name={"Karaluch"} />
+      <div className="bg-primary text-white fixed w-full h-[100vh] px-4 py-14 sm:py-16 md:py-20 lg:py-24">
         <div className="mx-auto rounded-md max-w-[592px] md:max-w-[720px] lg:max-w-[976px]">
           <div className="flex flex-col gap-10 w-full mb-16">
-            <Flashcard
-              questions={quiz.questions}
-              style="h-[420px] sm:h-[460px] md:h-[460px] lg:h-[500px]"
+            <div className="flex items-center justify-center h-[420px] sm:h-[460px] md:h-[460px] lg:h-[500px] [perspective:1000px]">
+              {/* <Flashcard currTerm={currTerm} question={terms} /> */}
+            </div>
+
+            <ControlBar
+              curr={currTerm + 1}
+              max={terms.length}
+              left={decrement}
+              right={increment}
             />
           </div>
         </div>
diff --git a/src/components/pages/Quiz/Quiz.tsx b/src/components/pages/Quiz/Quiz.tsx
index c7a3993..b07d609 100644
--- a/src/components/pages/Quiz/Quiz.tsx
+++ b/src/components/pages/Quiz/Quiz.tsx
@@ -1,16 +1,25 @@
+import { api } from "@/api/axios";
+import { QuizResponse } from "@/api/types/quiz";
 import Loading from "@/components/pages/Status/Loading";
-import NotFound from "@/components/pages/Status/NotFound/NotFound";
+import NotFound from "@/components/pages/Status/NotFound";
+import { useQuery } from "@tanstack/react-query";
+import { useParams } from "react-router-dom";
 import QuizView from "./QuizView";
-import GetQuizData from "@/hooks/GetQuizData";
 
 export default function Quiz() {
-  const { isLoading, isError, quiz } = GetQuizData();
+  const { userName, quizSlug } = useParams();
+
+  const { isLoading, isError, data } = useQuery({
+    queryKey: ["quiz", userName, quizSlug],
+    queryFn: () =>
+      api.get<QuizResponse>(`/api/v1/Quiz/${userName}/${quizSlug}`),
+  });
 
   return (
     <>
       {isLoading && <Loading />}
       {isError && <NotFound />}
-      {quiz && <QuizView quiz={quiz} />}
+      {data?.data && <QuizView quiz={data.data} />}
     </>
   );
 }
diff --git a/src/components/pages/Quiz/QuizView.tsx b/src/components/pages/Quiz/QuizView.tsx
index 1782b1c..9ce305f 100644
--- a/src/components/pages/Quiz/QuizView.tsx
+++ b/src/components/pages/Quiz/QuizView.tsx
@@ -1,5 +1,7 @@
-import { QuizResponse } from "@/api/types/quiz";
+import { QuestionResponse, QuizResponse } from "@/api/types/quiz";
+import { useState } from "react";
 import Category from "./Category";
+import ControlBar from "./ControlBar";
 import Flashcard from "./Flashcards/Flashcard";
 import Term from "./Term";
 
@@ -8,18 +10,43 @@ export type QuizViewProps = {
 };
 
 export default function QuizView({ quiz }: QuizViewProps) {
+  const [currTerm, setCurrTerm] = useState<number>(0);
+
+  const getNumberOfQuestions = (questions: QuestionResponse[] | undefined) => {
+    if (!questions) return 0;
+    return questions.length;
+  };
+
+  const increment = () => {
+    currTerm === getNumberOfQuestions(quiz.questions) - 1
+      ? setCurrTerm(0)
+      : setCurrTerm(prev => prev + 1);
+  };
+
+  const decrement = () => {
+    currTerm === 0
+      ? setCurrTerm(getNumberOfQuestions(quiz.questions) - 1)
+      : setCurrTerm(prev => prev - 1);
+  };
+
   return (
     <div className="bg-primary w-full text-white px-4 py-10 sm:py-12 md:py-16 lg:py-20">
       <div className="mx-auto rounded-md max-w-[592px] md:max-w-[720px] lg:max-w-[976px]">
         <h2 className="text-2xl font-bold mb-10 xl:text-3xl">{quiz.name}</h2>
         <div className="flex flex-col gap-10 w-full mb-16">
-          <Flashcard
-            questions={quiz.questions}
-            style="h-[280px] sm:h-[320px] md:h-[360px] lg:h-[420px]"
+          <div className="flex items-center justify-center h-[280px] sm:h-[320px] md:h-[360px] lg:h-[420px] [perspective:1000px]">
+            <Flashcard question={quiz.questions[currTerm]} />
+          </div>
+
+          <ControlBar
+            curr={currTerm + 1}
+            max={getNumberOfQuestions(quiz.questions)}
+            left={decrement}
+            right={increment}
           />
 
           <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
-            <Category text="Flashcards" to={`/${quiz.location}/flashcards`} />
+            <Category text="Fiszki" />
             <Category text="Ucz się" />
             <Category text="Test" />
             <Category text="Dopasowania" />
diff --git a/src/components/pages/Quiz/Test.tsx b/src/components/pages/Quiz/Test.tsx
index b094c9f..97a2d1d 100644
--- a/src/components/pages/Quiz/Test.tsx
+++ b/src/components/pages/Quiz/Test.tsx
@@ -6,7 +6,7 @@ export default function Test() {
   return (
     <>
       <Toaster />
-      <QuizHeader />
+      <QuizHeader name={"Karaluch"} />
       <div className="bg-primary text-white px-4 py-10 sm:py-14 md:py-16 lg:py-20">
         <div className="mx-auto rounded-md max-w-[592px] md:max-w-[720px] lg:max-w-[976px]">
           <div className="flex flex-col gap-10 w-full mb-16">
diff --git a/src/components/pages/Status/Error.tsx b/src/components/pages/Status/Error.tsx
deleted file mode 100644
index b065984..0000000
--- a/src/components/pages/Status/Error.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import Background from "@/components/layout/Background/Background";
-import HomePageButton from "../../other/HomePageButton";
-
-interface ErrorProps {
-  msg?: string;
-}
-
-export default function Error({ msg }: ErrorProps) {
-  return (
-    <>
-      <Background />
-      <div className="text-white w-full h-[80vh] top-0 left-0 flex flex-col gap-16 items-center justify-center font-bold caret-transparent">
-        <p className="text-4xl text-center">
-          {msg ? msg : "Error has occurred!"}
-        </p>
-        <HomePageButton />
-      </div>
-    </>
-  );
-}
diff --git a/src/components/pages/Status/Loading.tsx b/src/components/pages/Status/Loading.tsx
index 6f5fa43..9f48200 100644
--- a/src/components/pages/Status/Loading.tsx
+++ b/src/components/pages/Status/Loading.tsx
@@ -1,14 +1,3 @@
-import Background from "@/components/layout/Background/Background";
-import { HashLoader } from "react-spinners";
-
 export default function Loading() {
-  return (
-    <>
-      <Background />
-      <div className="text-white w-full h-[80vh] top-0 left-0 flex flex-col gap-16 items-center justify-center font-bold caret-transparent">
-        <HashLoader color="white" size={80} />
-        <p className="text-3xl text-center">Loading...</p>
-      </div>
-    </>
-  );
+  return <div className="text-red-600">Loading...</div>;
 }
diff --git a/src/components/pages/Status/NotFound.tsx b/src/components/pages/Status/NotFound.tsx
new file mode 100644
index 0000000..0c4c8fa
--- /dev/null
+++ b/src/components/pages/Status/NotFound.tsx
@@ -0,0 +1,3 @@
+export default function NotFound() {
+  return <div className="text-red-600">NotFound</div>;
+}
diff --git a/src/components/pages/Status/NotFound/NotFound.tsx b/src/components/pages/Status/NotFound/NotFound.tsx
deleted file mode 100644
index 92a72b1..0000000
--- a/src/components/pages/Status/NotFound/NotFound.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Background from "@/components/layout/Background/Background";
-import NotFoundSvg from "./NotFoundSvg";
-import HomePageButton from "../../../other/HomePageButton";
-
-export default function NotFound() {
-  return (
-    <>
-      <Background />
-      <div className="text-white w-full h-[80vh] top-0 left-0 flex flex-col gap-10 items-center justify-center font-bold caret-transparent">
-        <NotFoundSvg />
-        <p className="text-4xl text-center">This page can't be reached</p>
-        <HomePageButton />
-      </div>
-    </>
-  );
-}
diff --git a/src/components/pages/Status/NotFound/NotFoundSvg.tsx b/src/components/pages/Status/NotFound/NotFoundSvg.tsx
deleted file mode 100644
index a0860f3..0000000
--- a/src/components/pages/Status/NotFound/NotFoundSvg.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-export default function NotFoundSvg() {
-  return (
-    <svg
-      className="mx-auto w-full text-center"
-      height="210"
-      viewBox="0 0 474 210"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        opacity="0.5"
-        d="M25 163.051H101.211V191H133.308V163.051H153V136.111H133.308V32H91.2871L25 136.577V163.051ZM101.831 136.111H58.8025V134.869L100.591 68.6445H101.831V136.111Z"
-        stroke="url(#paint0_linear_116:1137)"
-        stroke-width="3"
-      ></path>
-      <path
-        opacity="0.5"
-        d="M307 133.051H383.211V161H415.308V133.051H435V106.111H415.308V2H373.287L307 106.577V133.051ZM383.831 106.111H340.803V104.869L382.591 38.6445H383.831V106.111Z"
-        stroke="url(#paint1_linear_116:1137)"
-        stroke-width="3"
-      ></path>
-      <circle
-        opacity="0.8"
-        cx="227.5"
-        cy="81.5"
-        r="68.5"
-        fill="#4A6CF7"
-      ></circle>
-      <mask
-        id="mask0_116:1137"
-        maskUnits="userSpaceOnUse"
-        x="159"
-        y="13"
-        width="137"
-        height="137"
-      >
-        <circle
-          opacity="0.8"
-          cx="227.5"
-          cy="81.5"
-          r="68.5"
-          fill="#4A6CF7"
-        ></circle>
-      </mask>
-      <g mask="url(#mask0_116:1137)">
-        <circle
-          opacity="0.8"
-          cx="227.5"
-          cy="81.5"
-          r="68.5"
-          fill="url(#paint2_radial_116:1137)"
-        ></circle>
-        <g opacity="0.8" filter="url(#filter0_f_116:1137)">
-          <circle cx="233.543" cy="49.2645" r="28.2059" fill="white"></circle>
-        </g>
-      </g>
-      <path
-        d="M0 182H83.5V209H150.5V178H169.5V148.5C169.5 148.5 194 165 229.5 165C265 165 294 134.5 294 134.5V152H306.5H361V178H435V152H474"
-        stroke="white"
-        stroke-opacity="0.08"
-        stroke-width="2"
-      ></path>
-      <defs>
-        <filter
-          id="filter0_f_116:1137"
-          x="175.337"
-          y="-8.94141"
-          width="116.412"
-          height="116.412"
-          filterUnits="userSpaceOnUse"
-          color-interpolation-filters="sRGB"
-        >
-          <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="BackgroundImageFix"
-            result="shape"
-          ></feBlend>
-          <feGaussianBlur
-            stdDeviation="15"
-            result="effect1_foregroundBlur_116:1137"
-          ></feGaussianBlur>
-        </filter>
-        <linearGradient
-          id="paint0_linear_116:1137"
-          x1="25"
-          y1="183"
-          x2="126.155"
-          y2="27.0837"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stop-color="#4A6CF7" stop-opacity="0"></stop>
-          <stop offset="1" stop-color="#4A6CF7"></stop>
-        </linearGradient>
-        <linearGradient
-          id="paint1_linear_116:1137"
-          x1="307"
-          y1="153"
-          x2="408.155"
-          y2="-2.91631"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stop-color="#4A6CF7" stop-opacity="0"></stop>
-          <stop offset="1" stop-color="#4A6CF7"></stop>
-        </linearGradient>
-        <radialGradient
-          id="paint2_radial_116:1137"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(227.5 81.5) rotate(90) scale(73.5368)"
-        >
-          <stop stop-opacity="0.47"></stop>
-          <stop offset="1" stop-opacity="0"></stop>
-        </radialGradient>
-      </defs>
-    </svg>
-  );
-}
diff --git a/src/components/pages/Status/Unauthorized.tsx b/src/components/pages/Status/Unauthorized.tsx
index 296c631..95a3f6b 100644
--- a/src/components/pages/Status/Unauthorized.tsx
+++ b/src/components/pages/Status/Unauthorized.tsx
@@ -1,17 +1,15 @@
-import Background from "@/components/layout/Background/Background";
-import HomePageButton from "../../other/HomePageButton";
+import { useNavigate } from "react-router-dom";
 
 export default function Unauthorized() {
+  const navigate = useNavigate();
+
   return (
-    <>
-      <Background />
-      <div className="text-white w-full h-[80vh] top-0 left-0 flex flex-col gap-6 items-center justify-center font-bold caret-transparent">
-        <p className="text-4xl text-center">401</p>
-        <p className="text-xl sm:text-2xl text-textPrimary text-center mb-8 px-4">
-          You're not authorized to reach this page
-        </p>
-        <HomePageButton />
+    <section>
+      <h1>Unauthorized</h1>
+      <p>You do not have access to the requested page</p>
+      <div className="flex-grow">
+        <button onClick={() => navigate(-1)}>Go back</button>
       </div>
-    </>
+    </section>
   );
 }
diff --git a/src/hooks/GetQuizData.tsx b/src/hooks/GetQuizData.tsx
deleted file mode 100644
index d3ce76a..0000000
--- a/src/hooks/GetQuizData.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useParams } from "react-router-dom";
-import { useAtom } from "jotai";
-import { quizAtom, updateParamsAtom } from "@/atoms/quiz";
-
-export default function GetQuizData() {
-  const { userName, quizSlug } = useParams();
-  const [, updateParams] = useAtom(updateParamsAtom);
-  updateParams({ newName: userName, newSlug: quizSlug });
-
-  const [{ isLoading, isError, data }] = useAtom(quizAtom);
-  const quiz = data?.data;
-
-  return { isLoading, isError, quiz };
-}
diff --git a/tailwind.config.js b/tailwind.config.js
index 44b7dad..dfca575 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,7 +7,6 @@ export default {
         primary: "#090E34",
         secondary: "#1D2144",
         lightBlue: "#4A6CF7",
-        lightBlueB: "#6f86e0",
         textHover: "#9BA1B3",
         textPrimary: "#959CB1",
         input: "#242B51",