diff --git a/frontend/app/discover/BlogArticles.tsx b/frontend/app/discover/BlogArticles.tsx
new file mode 100644
index 0000000..5c4de2c
--- /dev/null
+++ b/frontend/app/discover/BlogArticles.tsx
@@ -0,0 +1,111 @@
+import React from "react";
+import styles from "./blogArticles.module.css";
+import { BlogCard } from "@/components/blog-card/BlogCard";
+import "dotenv/config";
+import PaginationButton from "./PaginationButton";
+
+const PAGINATION_INTERVAL = 9;
+
+const getArticles = async (
+    searchParams:
+        | {
+              [key: string]: string | string[] | undefined;
+          }
+        | undefined
+) => {
+    if (searchParams === undefined) {
+        const res = await fetch(
+            `${process.env.NEXT_PUBLIC_SERVER_ROUTE}api/articles?pagination[start]=0&pagination[limit]=${PAGINATION_INTERVAL}&pagination[withCount]=true&sort[0]=updatedAt:desc`,
+            {
+                cache: "no-store",
+            }
+        );
+        if (!res.ok) {
+            throw new Error("Failed to fetch data");
+        }
+        return res.json();
+    }
+
+    let strapiQueryString = `${process.env.NEXT_PUBLIC_SERVER_ROUTE}api/articles?`;
+
+    if (searchParams.category !== undefined) {
+        strapiQueryString = `${strapiQueryString}filters[category][id][$eq]=${searchParams.category}`;
+    }
+
+    if (searchParams.tags !== undefined) {
+        if (searchParams.category !== undefined) {
+            strapiQueryString = `${strapiQueryString}&`;
+        }
+
+        let tagQueryStr = "";
+
+        if (Array.isArray(searchParams.tags)) {
+            searchParams.tags.map((t) => {
+                tagQueryStr = `${tagQueryStr}filters[$and][${t}][tags][id][$eq]=${t}&`;
+            });
+            tagQueryStr = tagQueryStr.slice(0, -1); // Remove last &
+        } else {
+            tagQueryStr = `${tagQueryStr}filters[tags][id][$eq]=${searchParams.tags}`;
+        }
+
+        strapiQueryString = `${strapiQueryString}${tagQueryStr}`;
+    }
+
+    if (
+        searchParams.category !== undefined ||
+        searchParams.tags !== undefined
+    ) {
+        strapiQueryString = `${strapiQueryString}&`;
+    }
+    if (searchParams.pagination !== undefined) {
+        strapiQueryString = `${strapiQueryString}pagination[start]=0&pagination[limit]=${searchParams.pagination}&pagination[withCount]=true&sort[0]=updatedAt:desc`;
+    } else {
+        strapiQueryString = `${strapiQueryString}pagination[start]=0&pagination[limit]=${PAGINATION_INTERVAL}&pagination[withCount]=true&sort[0]=updatedAt:desc`;
+    }
+
+    const res = await fetch(`${strapiQueryString}`, {
+        cache: "no-store",
+    });
+    if (!res.ok) {
+        throw new Error("Failed to fetch data");
+    }
+    return res.json();
+    // Example full query: http://localhost:1337/api/articles?filters[$and][0][category][id][$eq]=1&filters[$and][1][tags][id][$eq]=2&populate=*
+};
+
+type Article = {
+    data: any;
+};
+
+export const BlogArticles = async ({
+    searchParams,
+}: {
+    searchParams?: { [key: string]: string | string[] | undefined };
+}) => {
+    const articles = await getArticles(searchParams);
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.articlesContainer}>
+                {articles.data.map((a: any) => (
+                    <BlogCard
+                        key={a.id}
+                        blogId={a.id}
+                        title={a.attributes.title}
+                        shortTitle={a.attributes.shortTitle}
+                        description={a.attributes.description}
+                        author={a.attributes.author}
+                        readTime={7}
+                        gradient={a.attributes.gradient}
+                    />
+                ))}
+            </div>
+            {articles.meta.pagination.total !== articles.data.length && (
+                <PaginationButton
+                    paginationInterval={PAGINATION_INTERVAL}
+                    searchParams={searchParams}
+                />
+            )}
+        </div>
+    );
+};
diff --git a/frontend/app/discover/CategorySection.tsx b/frontend/app/discover/CategorySection.tsx
deleted file mode 100644
index b6b2146..0000000
--- a/frontend/app/discover/CategorySection.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-"use client";
-import React, { useEffect, useState } from "react";
-import styles from "./categorySection.module.css";
-import { BlogCard } from "@/components/blog-card/BlogCard";
-import 'dotenv/config'
-
-const getCategoryArticles = async (categoryId: any, pagination: number) => {
-    const res = await fetch(
-        `${process.env.NEXT_PUBLIC_SERVER_ROUTE}api/articles?filters[category][id][$eq]=${categoryId}&pagination[start]=0&pagination[limit]=${pagination}&pagination[withCount]=true&sort[0]=updatedAt:desc`,
-        {
-            cache: "no-store",
-        }
-    );
-    http: if (!res.ok) {
-        throw new Error("Failed to fetch data");
-    }
-    return res.json();
-};
-
-type Article = {
-    data: any;
-};
-
-export const CategorySection = ({
-    categoryId,
-    name,
-}: {
-    categoryId: string;
-    name: string;
-}) => {
-    // const articles = await getCategoryArticles(categoryId);
-    const [articles, setArticles] = useState<any>({
-        data: [],
-        meta: { pagination: { total: 0 } },
-    });
-    const [articleNum, setArticleNum] = useState(3);
-    useEffect(() => {
-        const setArticlesInit = async () => {
-            const res = await getCategoryArticles(categoryId, articleNum);
-            setArticles(res);
-        };
-        setArticlesInit();
-    }, [categoryId, articleNum]);
-
-    return (
-        <div className={styles.container}>
-            <h2>{name}</h2>
-            <div className={styles.articlesContainer}>
-                {articles.data.map((a: any) => (
-                    <BlogCard
-                        key={a.id}
-                        blogId={a.id}
-                        title={a.attributes.title}
-                        shortTitle={a.attributes.shortTitle}
-                        description={a.attributes.description}
-                        author={a.attributes.author}
-                        readTime={7}
-                        gradient={a.attributes.gradient}
-                    />
-                ))}
-            </div>
-            {articles.meta.pagination.total !== articles.data.length && (
-                <button
-                    className={styles.seeMoreBtn}
-                    onClick={() => setArticleNum((prev) => prev + 3)}
-                >
-                    See More
-                </button>
-            )}
-        </div>
-    );
-};
diff --git a/frontend/app/discover/DiscoverPageHeader.tsx b/frontend/app/discover/DiscoverPageHeader.tsx
new file mode 100644
index 0000000..367c7a5
--- /dev/null
+++ b/frontend/app/discover/DiscoverPageHeader.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import styles from "./styles.module.css";
+import { ListFilter } from "lucide-react";
+import Filter from "./Filter";
+import { useHoverDirty } from "react-use";
+
+export const DiscoverPageHeader = ({
+    tags = [],
+    categories = [],
+    searchParams,
+}: {
+    tags: { id: string; name: string }[];
+    categories: { id: string; name: string }[];
+    searchParams?: { [key: string]: string | string[] | undefined };
+}) => {
+    const [isFilterOpen, setIsFilterOpen] = useState(false);
+
+    const filterRef = useRef<HTMLDivElement>(null);
+    const isFilterHovered = useHoverDirty(filterRef);
+
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const isButtonHovered = useHoverDirty(buttonRef);
+
+    useEffect(() => {
+        const handleOutsideOpenFilterClick = (e: MouseEvent) => {
+            if (isFilterOpen && !isFilterHovered && !isButtonHovered) {
+                setIsFilterOpen(false);
+            }
+        };
+        window.addEventListener("click", handleOutsideOpenFilterClick);
+
+        return () => {
+            window.removeEventListener("click", handleOutsideOpenFilterClick);
+        };
+    }, [isFilterOpen, isFilterHovered, isButtonHovered]);
+
+    return (
+        <div>
+            <div className={styles.header}>
+                <h1>Discover</h1>
+                <button
+                    ref={buttonRef}
+                    className={styles.filterBtn}
+                    type="button"
+                    onClick={() => setIsFilterOpen((prev) => !prev)}
+                >
+                    <ListFilter size={16} />
+                    <span>Filter</span>
+                </button>
+                <Filter
+                    ref={filterRef}
+                    isOpen={isFilterOpen}
+                    tags={tags}
+                    categories={categories}
+                    searchParams={searchParams}
+                    closeFilter={() => {
+                        setIsFilterOpen(false);
+                    }}
+                />
+            </div>
+        </div>
+    );
+};
diff --git a/frontend/app/discover/Filter.tsx b/frontend/app/discover/Filter.tsx
new file mode 100644
index 0000000..3dc0af5
--- /dev/null
+++ b/frontend/app/discover/Filter.tsx
@@ -0,0 +1,160 @@
+import React, { useState, forwardRef } from "react";
+import styles from "./filter.module.css";
+import { useRouter } from "next/navigation";
+import Select, { SingleValue } from "react-select";
+
+const initSelectedTags = (
+    tags: { id: string; name: string }[],
+    searchParams?: { [key: string]: string | string[] | undefined }
+) => {
+    let tagsInit: { [key: string]: boolean } = {};
+    tags.forEach((t) => {
+        tagsInit[t.id] = false;
+    });
+    if (searchParams !== undefined && Array.isArray(searchParams.tags)) {
+        searchParams.tags.forEach((tid) => {
+            tagsInit[tid] = true;
+        });
+    }
+
+    return tagsInit;
+};
+
+const initSelectedCategory = (searchParams?: {
+    [key: string]: string | string[] | undefined;
+}) => {
+    if (searchParams !== undefined && searchParams.category !== undefined) {
+        return searchParams.category;
+    } else {
+        return "-1";
+    }
+};
+
+type Props = {
+    isOpen: boolean;
+    tags: { id: string; name: string }[];
+    categories: { id: string; name: string }[];
+    searchParams?: { [key: string]: string | string[] | undefined };
+    closeFilter: () => void;
+};
+
+const Filter = forwardRef<HTMLDivElement, Props>(function Filter(
+    { isOpen, tags, categories, searchParams, closeFilter },
+    ref
+) {
+    const [selectedCategory, setSelectedCategory] = useState(
+        initSelectedCategory(searchParams)
+    );
+    const [selectedTags, setSelectedTags] = useState<{
+        [key: string]: boolean;
+    }>(initSelectedTags(tags, searchParams));
+
+    const router = useRouter();
+
+    const handleSubmit = () => {
+        let url = "/discover";
+        let categoryParam = "";
+        if (selectedCategory !== "-1") {
+            categoryParam = `category=${selectedCategory}`;
+        }
+        let tagsParam = "";
+        let tagsParamArr = [];
+        for (const t in selectedTags) {
+            if (selectedTags[t] === true) {
+                tagsParamArr.push(t);
+            }
+        }
+        if (tagsParamArr.length !== 0) {
+            tagsParam = `tags=${tagsParamArr.join("&tags=")}`;
+        }
+
+        if (categoryParam !== "" && tagsParam !== "") {
+            url = `${url}?${categoryParam}&${tagsParam}`;
+        } else if (categoryParam !== "") {
+            url = `${url}?${categoryParam}`;
+        } else if (tagsParam !== "") {
+            url = `${url}?${tagsParam}`;
+        }
+
+        router.push(url);
+        closeFilter();
+    };
+
+    const selectOptions = [{ id: "-1", name: "All" }, ...categories].map(
+        (c) => {
+            return {
+                value: c.id,
+                label: c.name,
+            };
+        }
+    );
+
+    const handleSelect = (
+        selectedOption: SingleValue<{
+            value: string;
+            label: string;
+        }>
+    ) => {
+        if (selectedOption) setSelectedCategory(selectedOption.value);
+    };
+
+    return (
+        <div
+            ref={ref}
+            className={
+                isOpen
+                    ? `${styles.container} ${styles.openContainer}`
+                    : `${styles.container}`
+            }
+        >
+            <div className={styles.content}>
+                <div className={styles.categoriesContainer}>
+                    <label htmlFor="categories" className={styles.title}>
+                        Category
+                    </label>
+                    <Select
+                        options={selectOptions}
+                        onChange={handleSelect}
+                        name="categories"
+                        id="categories"
+                    />
+                </div>
+                <div className={styles.tagsContainer}>
+                    <div className={styles.title}>Tags</div>
+                    <div className={styles.tagsGrid}>
+                        {tags.map((t) => {
+                            return (
+                                <div key={t.id}>
+                                    <input
+                                        type="checkbox"
+                                        id={t.id}
+                                        name={t.id}
+                                        checked={selectedTags[t.id]}
+                                        onChange={(e) => {
+                                            const newSelectedTags = {
+                                                ...selectedTags,
+                                            };
+                                            newSelectedTags[t.id] =
+                                                e.target.checked;
+                                            setSelectedTags(newSelectedTags);
+                                        }}
+                                    />
+                                    <label htmlFor={t.id}>{t.name}</label>
+                                </div>
+                            );
+                        })}
+                    </div>
+                </div>
+                <button
+                    className={styles.filterBtn}
+                    type="button"
+                    onClick={handleSubmit}
+                >
+                    Apply Filter
+                </button>
+            </div>
+        </div>
+    );
+});
+
+export default Filter;
diff --git a/frontend/app/discover/PaginationButton.tsx b/frontend/app/discover/PaginationButton.tsx
new file mode 100644
index 0000000..6a3a778
--- /dev/null
+++ b/frontend/app/discover/PaginationButton.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import React from "react";
+import styles from "./blogArticles.module.css";
+import { useRouter } from "next/navigation";
+
+export default function PaginationButton({
+    paginationInterval,
+    searchParams,
+}: {
+    paginationInterval: number;
+    searchParams?: { [key: string]: string | string[] | undefined };
+}) {
+    const router = useRouter();
+    return (
+        <button
+            className={styles.seeMoreBtn}
+            onClick={() => {
+                if (searchParams === undefined) {
+                    let pageNum = paginationInterval + paginationInterval;
+                    router.push(`/discover?pagination=${pageNum}`);
+                    return;
+                }
+
+                let queryParams = "";
+                if (searchParams.category !== undefined) {
+                    queryParams = `category=${searchParams.category}`;
+                }
+
+                if (searchParams.tags !== undefined) {
+                    if (searchParams.category !== undefined) {
+                        queryParams = `${queryParams}&`;
+                    }
+                    let tagsParam = "";
+
+                    if (Array.isArray(searchParams.tags)) {
+                        tagsParam = `tags=${searchParams.tags.join("&tags=")}`;
+                    } else {
+                        tagsParam = `tags=${searchParams.tags}`;
+                    }
+                    queryParams = `${queryParams}${tagsParam}`;
+                }
+
+                let pagination = "";
+                if (searchParams.pagination === undefined) {
+                    let pageNum = paginationInterval + paginationInterval;
+                    pagination = pageNum.toString();
+                } else {
+                    if (!Array.isArray(searchParams.pagination)) {
+                        let pageNum =
+                            parseInt(searchParams.pagination) +
+                            paginationInterval;
+                        pagination = pageNum.toString();
+                    }
+                }
+
+                if (queryParams !== "") {
+                    queryParams = `${queryParams}&`;
+                }
+                queryParams = `${queryParams}pagination=${pagination}`;
+
+                router.push(`/discover?${queryParams}`);
+            }}
+        >
+            See More
+        </button>
+    );
+}
diff --git a/frontend/app/discover/SearchBar.tsx b/frontend/app/discover/SearchBar.tsx
deleted file mode 100644
index 9731821..0000000
--- a/frontend/app/discover/SearchBar.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-"use client";
-import React, { ChangeEvent, useState } from "react";
-import styles from "./searchBar.module.css";
-
-export default function SearchBar() {
-    const [searchInput, setSearchInput] = useState<string>("");
-
-    return (
-        <input
-            className={styles.container}
-            type="text"
-            value={searchInput}
-            onChange={(e: ChangeEvent) =>
-                setSearchInput((e.target as HTMLInputElement).value)
-            }
-        />
-    );
-}
diff --git a/frontend/app/discover/categorySection.module.css b/frontend/app/discover/blogArticles.module.css
similarity index 93%
rename from frontend/app/discover/categorySection.module.css
rename to frontend/app/discover/blogArticles.module.css
index 3dcde72..4207445 100644
--- a/frontend/app/discover/categorySection.module.css
+++ b/frontend/app/discover/blogArticles.module.css
@@ -16,7 +16,7 @@
 	all: unset;
 	cursor: pointer;
 	align-self: flex-end;
-	padding: 5px 10px;
+	padding: 4px 6px;
 	border-radius: 4px;
 
 	border-width: 1px;
@@ -25,7 +25,7 @@
 	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 
 	color: rgb(156 163 175);
-	font-size: 14px;
+	font-size: 12px;
 }
 
 .seeMoreBtn:hover {
diff --git a/frontend/app/discover/filter.module.css b/frontend/app/discover/filter.module.css
new file mode 100644
index 0000000..5fd3e10
--- /dev/null
+++ b/frontend/app/discover/filter.module.css
@@ -0,0 +1,75 @@
+.container {
+    position: absolute;
+    right: 0;
+    top: 60px;
+    box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px 0px;
+    border-radius: 4px;
+    width: 350px;
+    background-color: white;
+
+    transform: translateY(2px);
+    opacity: 0;
+    height: 0;
+    overflow: hidden;
+
+    transition: all 100ms ease-in;
+}
+
+.openContainer {
+    transform: translateY(0);
+    opacity: 1;
+    height: auto;
+}
+
+.content {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+}
+
+.title {
+    margin-bottom: 10px;
+    font-weight: bold;
+}
+
+.categoriesContainer {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 10px;
+}
+
+.tagsContainer {
+    margin-bottom: 10px;
+}
+
+.tagsGrid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+
+.filterBtn {
+    all: unset;
+    box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 4px;
+    border: 1px solid rgb(223, 225, 228);
+    color: rgb(60, 65, 73);
+    height: fit-content;
+    padding: 5px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    user-select: none;
+    font-size: 14px;
+    transition: background-color 100ms ease-in;
+    display: flex;
+    gap: 5px;
+    width: fit-content;
+    align-self: flex-end;
+}
+
+.filterBtn:hover {
+    background-color: rgb(0, 0, 0, 0.025);
+}
+
+
+.filterBtn:active {
+    background-color: rgb(0, 0, 0, 0.05);
+}
\ No newline at end of file
diff --git a/frontend/app/discover/page.tsx b/frontend/app/discover/page.tsx
index fa7505c..21a7fe2 100644
--- a/frontend/app/discover/page.tsx
+++ b/frontend/app/discover/page.tsx
@@ -1,9 +1,8 @@
-import { BlogCard } from "@/components/blog-card/BlogCard";
 import React from "react";
-import 'dotenv/config'
+import "dotenv/config";
 import styles from "./styles.module.css";
-import { CategorySection } from "./CategorySection";
-import SearchBar from "./SearchBar";
+import { DiscoverPageHeader } from "./DiscoverPageHeader";
+import { BlogArticles } from "./BlogArticles";
 
 async function getCategories() {
     const res = await fetch(`${process.env.SERVER_ROUTE}api/categories/`, {
@@ -12,31 +11,65 @@ async function getCategories() {
     if (!res.ok) {
         throw new Error("Failed to fetch data");
     }
-    return res.json();
+
+    const data = await res.json();
+
+    const categories: any[] = data.data.map((c: any) => {
+        return {
+            id: c.id,
+            name: c.attributes.name,
+        };
+    });
+
+    return categories;
 }
 
-export default async function DiscoverPage() {
-    const categories = await getCategories();
-    console.log(categories);
+async function getTags() {
+    const res = await fetch(`${process.env.SERVER_ROUTE}api/tags/`, {
+        cache: "no-store",
+    });
+    if (!res.ok) {
+        throw new Error("Failed to fetch data");
+    }
+    const data = await res.json();
+
+    const tags: any[] = data.data.map((t: any) => {
+        return {
+            id: t.id,
+            name: t.attributes.name,
+        };
+    });
+
+    return tags;
+}
+
+export default async function DiscoverPage({
+    searchParams,
+}: {
+    searchParams?: { [key: string]: string | string[] | undefined };
+}) {
+    const categories: { id: string; name: string }[] = await getCategories();
+    const tags: { id: string; name: string }[] = await getTags();
+
     return (
         <div className={styles.page}>
             <div className={styles.container}>
-                <h1>Discover</h1>
-                {/* <div className={styles.searchBarContainer}>
-                    <SearchBar />
-                    <input type="text" className={styles.searchBar} />
-                    <button className={styles.filterBtn}>Filter</button>
-                </div> */}
+                <DiscoverPageHeader
+                    tags={tags}
+                    categories={categories}
+                    searchParams={searchParams}
+                />
                 <div className={styles.articles}>
-                    {categories.data.map((category: any) => {
+                    <BlogArticles searchParams={searchParams} />
+                    {/* {categories.map((category: any) => {
                         return (
                             <CategorySection
                                 key={category.id}
                                 categoryId={category.id}
-                                name={category.attributes.name}
+                                name={category.name}
                             />
                         );
-                    })}
+                    })} */}
                 </div>
             </div>
         </div>
diff --git a/frontend/app/discover/searchBar.module.css b/frontend/app/discover/searchBar.module.css
deleted file mode 100644
index 794571f..0000000
--- a/frontend/app/discover/searchBar.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.container {
-    flex: 1;
-}
diff --git a/frontend/app/discover/styles.module.css b/frontend/app/discover/styles.module.css
index d72209c..799cc89 100644
--- a/frontend/app/discover/styles.module.css
+++ b/frontend/app/discover/styles.module.css
@@ -11,4 +11,36 @@
 
 .searchBar {
 	flex: 1;
+}
+
+.header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	position: relative;
+}
+
+.filterBtn {
+	all: unset;
+	box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 4px;
+	border: 1px solid rgb(223, 225, 228);
+	color: rgb(60, 65, 73);
+	height: fit-content;
+	padding: 5px 10px;
+	border-radius: 4px;
+	cursor: pointer;
+	user-select: none;
+	font-size: 14px;
+	transition: background-color 100ms ease-in;
+	display: flex;
+	gap: 5px;
+}
+
+.filterBtn:hover {
+	background-color: rgb(0, 0, 0, 0.025);
+}
+
+
+.filterBtn:active {
+	background-color: rgb(0, 0, 0, 0.05);
 }
\ No newline at end of file
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index e55af8a..fb0749d 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,28 +1,28 @@
-import Navbar from '@/components/navbar/Navbar';
-import './globals.css';
-import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
-import Footer from '@/components/footer/Footer';
+import Navbar from "@/components/navbar/Navbar";
+import "./globals.css";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import Footer from "@/components/footer/Footer";
 
-const inter = Inter({ subsets: ['latin'] });
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-	title: 'Create Next App',
-	description: 'Generated by create next app',
+    title: "Create Next App",
+    description: "Generated by create next app",
 };
 
 export default function RootLayout({
-	children,
+    children,
 }: {
-	children: React.ReactNode;
+    children: React.ReactNode;
 }) {
-	return (
-		<html lang='en'>
-			<body className={inter.className}>
-				<Navbar />
-				{children}
-				<Footer />
-			</body>
-		</html>
-	);
+    return (
+        <html lang="en">
+            <body className={inter.className}>
+                <Navbar />
+                {children}
+                <Footer />
+            </body>
+        </html>
+    );
 }
diff --git a/frontend/components/blog-card/styles.module.css b/frontend/components/blog-card/styles.module.css
index d9df376..6dd4a10 100644
--- a/frontend/components/blog-card/styles.module.css
+++ b/frontend/components/blog-card/styles.module.css
@@ -26,7 +26,7 @@
     justify-content: center;
     align-items: center;
     color: white;
-    border-radius: 12px;
+    border-radius: 8px;
 }
 
 .title {
@@ -53,4 +53,4 @@
     display: flex;
     align-items: center;
     gap: 5px;
-}
\ No newline at end of file
+}
diff --git a/frontend/components/footer/Footer.tsx b/frontend/components/footer/Footer.tsx
index 7a21af3..240cbcb 100644
--- a/frontend/components/footer/Footer.tsx
+++ b/frontend/components/footer/Footer.tsx
@@ -1,22 +1,25 @@
-'use client';
+import React from "react";
+import styles from "./styles.module.css";
 
-import React from 'react';
-import styles from './styles.module.css';
-
-import 'dotenv/config'
-import FooterContent from './FooterContent';
+import "dotenv/config";
+import FooterContent from "./FooterContent";
 
 async function getFooter() {
-	const res = await fetch(
-		`${process.env.NEXT_PUBLIC_SERVER_ROUTE}api/footer`);
-	if (!res.ok) {
-		throw new Error('Failed to fetch data');
-	}
-	return res.json();
+    const res = await fetch(
+        `${process.env.NEXT_PUBLIC_SERVER_ROUTE}api/footer`
+    );
+    if (!res.ok) {
+        throw new Error("Failed to fetch data");
+    }
+    return res.json();
 }
 
 export default async function Footer() {
     const footer = await getFooter();
-    return <footer className={styles.footer}><FooterContent content={footer.data.attributes.content} /></footer>;
+    return (
+        <footer className={styles.footer}>
+            <FooterContent content={footer.data.attributes.content} />
+        </footer>
+    );
     // return <footer className={styles.footer}><p>MIT Licensed • Made with ❤ by CSESoc Education</p><p>2023, Sydney</p></footer>
-}
\ No newline at end of file
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1fb4eae..4adeaf0 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,7 +19,9 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-markdown": "^8.0.7",
+        "react-select": "^5.7.7",
         "react-syntax-highlighter": "^15.5.0",
+        "react-use": "^17.4.0",
         "typescript": "5.2.2"
       },
       "devDependencies": {
@@ -34,6 +36,186 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@babel/code-frame": {
+      "version": "7.22.13",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
+      "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
+      "dependencies": {
+        "@babel/highlight": "^7.22.13",
+        "chalk": "^2.4.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+    },
+    "node_modules/@babel/code-frame/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
+      "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+      "dependencies": {
+        "@babel/types": "^7.22.15"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
+      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
+      "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "chalk": "^2.4.2",
+        "js-tokens": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+    },
+    "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@babel/runtime": {
       "version": "7.22.15",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz",
@@ -45,6 +227,140 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/types": {
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
+      "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache/node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz",
+      "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz",
+      "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -97,6 +413,28 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
+      "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "dependencies": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.11",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
@@ -336,6 +674,11 @@
         "@types/unist": "^2"
       }
     },
+    "node_modules/@types/js-cookie": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
+      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -359,6 +702,11 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.3.tgz",
       "integrity": "sha512-HksnYH4Ljr4VQgEy2lTStbCKv/P590tmPe5HqOnv9Gprffgv5WXAY+Y5Gqniu0GGqeTCUdBnzC3QSrzPkBkAMA=="
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.6",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.6.tgz",
@@ -391,6 +739,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.7.tgz",
+      "integrity": "sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.3",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
@@ -498,6 +854,11 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@xobotyi/scrollbar-width": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
+      "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ=="
+    },
     "node_modules/acorn": {
       "version": "8.10.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
@@ -729,6 +1090,20 @@
         "dequal": "^2.0.3"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
     "node_modules/bail": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@@ -890,6 +1265,34 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
+    "node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+    },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -903,6 +1306,26 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-in-js-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz",
+      "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.3"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@@ -1013,6 +1436,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dotenv": {
       "version": "16.3.1",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
@@ -1041,6 +1473,22 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/error-stack-parser": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
+      "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
+      "dependencies": {
+        "stackframe": "^1.3.4"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.22.2",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.2.tgz",
@@ -1601,6 +2049,21 @@
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
     },
+    "node_modules/fast-loops": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.3.tgz",
+      "integrity": "sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g=="
+    },
+    "node_modules/fast-shallow-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
+      "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
+    },
+    "node_modules/fastest-stable-stringify": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
+      "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q=="
+    },
     "node_modules/fastq": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
@@ -1643,6 +2106,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -2016,6 +2484,19 @@
         "node": "*"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -2066,6 +2547,15 @@
       "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
       "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
     },
+    "node_modules/inline-style-prefixer": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.4.tgz",
+      "integrity": "sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==",
+      "dependencies": {
+        "css-in-js-utils": "^3.1.0",
+        "fast-loops": "^1.1.3"
+      }
+    },
     "node_modules/internal-slot": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
@@ -2114,6 +2604,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+    },
     "node_modules/is-async-function": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
@@ -2463,6 +2958,11 @@
         "set-function-name": "^2.0.1"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2484,6 +2984,11 @@
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -2560,6 +3065,11 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -2690,6 +3200,16 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+    },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3163,6 +3683,25 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "node_modules/nano-css": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.5.tgz",
+      "integrity": "sha512-vSB9X12bbNu4ALBu7nigJgRViZ6ja3OU7CeuiV1zMIbXOdmkLahgtPmh3GBOlDxbKY0CitqlPdOReGlBLSp+yg==",
+      "dependencies": {
+        "css-tree": "^1.1.2",
+        "csstype": "^3.0.6",
+        "fastest-stable-stringify": "^2.0.2",
+        "inline-style-prefixer": "^6.0.0",
+        "rtl-css-js": "^1.14.0",
+        "sourcemap-codec": "^1.4.8",
+        "stacktrace-js": "^2.0.2",
+        "stylis": "^4.0.6"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@@ -3429,6 +3968,23 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -3630,6 +4186,26 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
+    "node_modules/react-select": {
+      "version": "5.7.7",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.7.tgz",
+      "integrity": "sha512-HhashZZJDRlfF/AKj0a0Lnfs3sRdw/46VJIRd8IbB9/Ovr74+ZIwkAdSBjSPXsFMG+u72c5xShqwLSKIJllzqw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.1.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-syntax-highlighter": {
       "version": "15.5.0",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
@@ -3645,6 +4221,55 @@
         "react": ">= 0.14.0"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
+    "node_modules/react-universal-interface": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
+      "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==",
+      "peerDependencies": {
+        "react": "*",
+        "tslib": "*"
+      }
+    },
+    "node_modules/react-use": {
+      "version": "17.4.0",
+      "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.4.0.tgz",
+      "integrity": "sha512-TgbNTCA33Wl7xzIJegn1HndB4qTS9u03QUwyNycUnXaweZkE4Kq2SB+Yoxx8qbshkZGYBDvUXbXWRUmQDcZZ/Q==",
+      "dependencies": {
+        "@types/js-cookie": "^2.2.6",
+        "@xobotyi/scrollbar-width": "^1.9.5",
+        "copy-to-clipboard": "^3.3.1",
+        "fast-deep-equal": "^3.1.3",
+        "fast-shallow-equal": "^1.0.0",
+        "js-cookie": "^2.2.1",
+        "nano-css": "^5.3.1",
+        "react-universal-interface": "^0.6.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.1.0",
+        "set-harmonic-interval": "^1.0.1",
+        "throttle-debounce": "^3.0.1",
+        "ts-easing": "^0.2.0",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz",
@@ -3736,6 +4361,11 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.6",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.6.tgz",
@@ -3791,6 +4421,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rtl-css-js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
+      "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -3862,6 +4500,17 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/semver": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -3889,6 +4538,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/set-harmonic-interval": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
+      "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==",
+      "engines": {
+        "node": ">=6.9"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -3929,6 +4586,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -3937,6 +4602,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead"
+    },
     "node_modules/space-separated-tokens": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
@@ -3946,6 +4617,46 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/stack-generator": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz",
+      "integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==",
+      "dependencies": {
+        "stackframe": "^1.3.4"
+      }
+    },
+    "node_modules/stackframe": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
+      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
+    },
+    "node_modules/stacktrace-gps": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz",
+      "integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==",
+      "dependencies": {
+        "source-map": "0.5.6",
+        "stackframe": "^1.3.4"
+      }
+    },
+    "node_modules/stacktrace-gps/node_modules/source-map": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+      "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stacktrace-js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
+      "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
+      "dependencies": {
+        "error-stack-parser": "^2.0.6",
+        "stack-generator": "^2.0.5",
+        "stacktrace-gps": "^3.0.4"
+      }
+    },
     "node_modules/streamsearch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
@@ -4075,6 +4786,11 @@
         }
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz",
+      "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ=="
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -4110,6 +4826,22 @@
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
     },
+    "node_modules/throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -4121,6 +4853,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+    },
     "node_modules/trim-lines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
@@ -4150,6 +4887,11 @@
         "typescript": ">=4.2.0"
       }
     },
+    "node_modules/ts-easing": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
+      "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ=="
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.14.2",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz",
@@ -4373,6 +5115,19 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/uvu": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/uvu/-/uvu-0.5.6.tgz",
@@ -4534,6 +5289,14 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index ea49645..885aeb9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,7 +20,9 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-markdown": "^8.0.7",
+    "react-select": "^5.7.7",
     "react-syntax-highlighter": "^15.5.0",
+    "react-use": "^17.4.0",
     "typescript": "5.2.2"
   },
   "devDependencies": {