diff --git a/.gitignore b/.gitignore
index a547bf3..2bd1803 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,5 @@
+.env
+
 # Logs
 logs
 *.log
diff --git a/@/components/plate-ui/avatar.tsx b/@/components/plate-ui/avatar.tsx
new file mode 100644
index 0000000..2a33939
--- /dev/null
+++ b/@/components/plate-ui/avatar.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+import { cn } from '../../lib/utils';
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full', className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center rounded-full bg-muted',
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/@/components/plate-ui/blockquote-element.tsx b/@/components/plate-ui/blockquote-element.tsx
new file mode 100644
index 0000000..721652b
--- /dev/null
+++ b/@/components/plate-ui/blockquote-element.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import React from 'react';
+import { PlateElement, PlateElementProps } from '@udecode/plate-common';
+
+import { cn } from '../../lib/utils';
+
+const BlockquoteElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <PlateElement
+      asChild
+      ref={ref}
+      className={cn('my-1 border-l-2 pl-6 italic', className)}
+      {...props}
+    >
+      <blockquote>{children}</blockquote>
+    </PlateElement>
+  );
+});
+BlockquoteElement.displayName = 'BlockquoteElement';
+
+export { BlockquoteElement };
diff --git a/@/components/plate-ui/button.tsx b/@/components/plate-ui/button.tsx
new file mode 100644
index 0000000..28de1c7
--- /dev/null
+++ b/@/components/plate-ui/button.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        inlineLink: 'text-base text-primary underline underline-offset-4',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        xs: 'h-8 rounded-md px-3',
+        sm: 'h-9 rounded-md px-3',
+        sms: 'h-9 w-9 rounded-md px-0',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+        none: '',
+      },
+      isMenu: {
+        true: 'h-auto w-full cursor-pointer justify-start',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, isMenu, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ isMenu, variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/@/components/plate-ui/caption.tsx b/@/components/plate-ui/caption.tsx
new file mode 100644
index 0000000..99ed424
--- /dev/null
+++ b/@/components/plate-ui/caption.tsx
@@ -0,0 +1,52 @@
+import React, { ComponentProps } from 'react';
+import {
+  Caption as CaptionPrimitive,
+  CaptionTextarea as CaptionTextareaPrimitive,
+} from '@udecode/plate-caption';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const captionVariants = cva('max-w-full', {
+  variants: {
+    align: {
+      left: 'mr-auto',
+      center: 'mx-auto',
+      right: 'ml-auto',
+    },
+  },
+  defaultVariants: {
+    align: 'center',
+  },
+});
+
+const Caption = React.forwardRef<
+  React.ElementRef<typeof CaptionPrimitive>,
+  ComponentProps<typeof CaptionPrimitive> & VariantProps<typeof captionVariants>
+>(({ className, align, ...props }, ref) => (
+  <CaptionPrimitive
+    ref={ref}
+    className={cn(captionVariants({ align }), className)}
+    {...props}
+  />
+));
+Caption.displayName = 'Caption';
+
+const CaptionTextarea = React.forwardRef<
+  React.ElementRef<typeof CaptionTextareaPrimitive>,
+  ComponentProps<typeof CaptionTextareaPrimitive>
+>(({ className, ...props }, ref) => (
+  <CaptionTextareaPrimitive
+    ref={ref}
+    className={cn(
+      'mt-2 w-full resize-none border-none bg-inherit p-0 font-[inherit] text-inherit',
+      'focus:outline-none focus:[&::placeholder]:opacity-0',
+      'text-center print:placeholder:text-transparent',
+      className
+    )}
+    {...props}
+  />
+));
+CaptionTextarea.displayName = 'CaptionTextarea';
+
+export { Caption, CaptionTextarea };
diff --git a/@/components/plate-ui/checkbox.tsx b/@/components/plate-ui/checkbox.tsx
new file mode 100644
index 0000000..880eae1
--- /dev/null
+++ b/@/components/plate-ui/checkbox.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn('flex items-center justify-center text-current')}
+    >
+      <Icons.check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
diff --git a/@/components/plate-ui/code-block-combobox.tsx b/@/components/plate-ui/code-block-combobox.tsx
new file mode 100644
index 0000000..f918f53
--- /dev/null
+++ b/@/components/plate-ui/code-block-combobox.tsx
@@ -0,0 +1,90 @@
+'use client';
+
+import React, { useState } from 'react';
+import {
+  CODE_BLOCK_LANGUAGES,
+  CODE_BLOCK_LANGUAGES_POPULAR,
+  useCodeBlockCombobox,
+  useCodeBlockComboboxState,
+} from '@udecode/plate-code-block';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+
+import { Button } from './button';
+import {
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from './command';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+
+const languages: { value: string; label: string }[] = [
+  { value: 'text', label: 'Plain Text' },
+  ...Object.entries({
+    ...CODE_BLOCK_LANGUAGES_POPULAR,
+    ...CODE_BLOCK_LANGUAGES,
+  }).map(([key, val]) => ({
+    value: key,
+    label: val as string,
+  })),
+];
+
+export function CodeBlockCombobox() {
+  const state = useCodeBlockComboboxState();
+  const { commandItemProps } = useCodeBlockCombobox(state);
+
+  const [open, setOpen] = useState(false);
+
+  if (state.readOnly) return null;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          role="combobox"
+          aria-expanded={open}
+          className="h-5 justify-between px-1 text-xs"
+          size="xs"
+        >
+          {state.value
+            ? languages.find((language) => language.value === state.value)
+                ?.label
+            : 'Plain Text'}
+          <Icons.chevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder="Search language..." />
+          <CommandEmpty>No language found.</CommandEmpty>
+
+          <CommandList>
+            {languages.map((language) => (
+              <CommandItem
+                key={language.value}
+                value={language.value}
+                className="cursor-pointer"
+                onSelect={(_value) => {
+                  commandItemProps.onSelect(_value);
+                  setOpen(false);
+                }}
+              >
+                <Icons.check
+                  className={cn(
+                    'mr-2 h-4 w-4',
+                    state.value === language.value ? 'opacity-100' : 'opacity-0'
+                  )}
+                />
+                {language.label}
+              </CommandItem>
+            ))}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/@/components/plate-ui/code-block-element.css b/@/components/plate-ui/code-block-element.css
new file mode 100644
index 0000000..3fc7834
--- /dev/null
+++ b/@/components/plate-ui/code-block-element.css
@@ -0,0 +1,434 @@
+/**
+ * One Light theme for prism.js
+ * Based on Atom's One Light theme: https://github.com/atom/atom/tree/master/packages/one-light-syntax
+ */
+
+/**
+ * One Light colours (accurate as of commit eb064bf on 19 Feb 2021)
+ * From colors.less
+ * --mono-1: hsl(230, 8%, 24%);
+ * --mono-2: hsl(230, 6%, 44%);
+ * --mono-3: hsl(230, 4%, 64%)
+ * --hue-1: hsl(198, 99%, 37%);
+ * --hue-2: hsl(221, 87%, 60%);
+ * --hue-3: hsl(301, 63%, 40%);
+ * --hue-4: hsl(119, 34%, 47%);
+ * --hue-5: hsl(5, 74%, 59%);
+ * --hue-5-2: hsl(344, 84%, 43%);
+ * --hue-6: hsl(35, 99%, 36%);
+ * --hue-6-2: hsl(35, 99%, 40%);
+ * --syntax-fg: hsl(230, 8%, 24%);
+ * --syntax-bg: hsl(230, 1%, 98%);
+ * --syntax-gutter: hsl(230, 1%, 62%);
+ * --syntax-guide: hsla(230, 8%, 24%, 0.2);
+ * --syntax-accent: hsl(230, 100%, 66%);
+ * From syntax-variables.less
+ * --syntax-selection-color: hsl(230, 1%, 90%);
+ * --syntax-gutter-background-color-selected: hsl(230, 1%, 90%);
+ * --syntax-cursor-line: hsla(230, 8%, 24%, 0.05);
+ */
+
+.slate-code_block code[class*='language-'],
+.slate-code_block pre[class*='language-'] {
+  background: hsl(230, 1%, 98%);
+  color: hsl(230, 8%, 24%);
+  font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono',
+    monospace;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  line-height: 1.5;
+  -moz-tab-size: 2;
+  -o-tab-size: 2;
+  tab-size: 2;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/* Selection */
+.slate-code_block code[class*='language-']::-moz-selection,
+.slate-code_block code[class*='language-'] *::-moz-selection,
+.slate-code_block pre[class*='language-'] *::-moz-selection {
+  background: hsl(230, 1%, 90%);
+  color: inherit;
+}
+
+.slate-code_block code[class*='language-']::selection,
+.slate-code_block code[class*='language-'] *::selection,
+.slate-code_block pre[class*='language-'] *::selection {
+  background: hsl(230, 1%, 90%);
+  color: inherit;
+}
+
+/* Code blocks */
+.slate-code_block pre[class*='language-'] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border-radius: 0.3em;
+}
+
+/* Inline code */
+.slate-code_block :not(pre) > code[class*='language-'] {
+  padding: 0.2em 0.3em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.cdata {
+  color: hsl(230, 4%, 64%);
+}
+
+.token.doctype,
+.token.punctuation,
+.token.entity {
+  color: hsl(230, 8%, 24%);
+}
+
+.token.attr-name,
+.token.class-name,
+.token.boolean,
+.token.constant,
+.token.number,
+.token.atrule {
+  color: hsl(35, 99%, 36%);
+}
+
+.token.keyword {
+  color: hsl(301, 63%, 40%);
+}
+
+.token.property,
+.token.tag,
+.token.symbol,
+.token.deleted,
+.token.important {
+  color: hsl(5, 74%, 59%);
+}
+
+.token.selector,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted,
+.token.regex,
+.token.attr-value,
+.token.attr-value > .token.punctuation {
+  color: hsl(119, 34%, 47%);
+}
+
+.token.variable,
+.token.operator,
+.token.function {
+  color: hsl(221, 87%, 60%);
+}
+
+.token.url {
+  color: hsl(198, 99%, 37%);
+}
+
+/* HTML overrides */
+.token.attr-value > .token.punctuation.attr-equals,
+.token.special-attr > .token.attr-value > .token.value.css {
+  color: hsl(230, 8%, 24%);
+}
+
+/* CSS overrides */
+.language-css .token.selector {
+  color: hsl(5, 74%, 59%);
+}
+
+.language-css .token.property {
+  color: hsl(230, 8%, 24%);
+}
+
+.language-css .token.function,
+.language-css .token.url > .token.function {
+  color: hsl(198, 99%, 37%);
+}
+
+.language-css .token.url > .token.string.url {
+  color: hsl(119, 34%, 47%);
+}
+
+.language-css .token.important,
+.language-css .token.atrule .token.rule {
+  color: hsl(301, 63%, 40%);
+}
+
+/* JS overrides */
+.language-javascript .token.operator {
+  color: hsl(301, 63%, 40%);
+}
+
+.language-javascript
+  .token.template-string
+  > .token.interpolation
+  > .token.interpolation-punctuation.punctuation {
+  color: hsl(344, 84%, 43%);
+}
+
+/* JSON overrides */
+.language-json .token.operator {
+  color: hsl(230, 8%, 24%);
+}
+
+.language-json .token.null.keyword {
+  color: hsl(35, 99%, 36%);
+}
+
+/* MD overrides */
+.language-markdown .token.url,
+.language-markdown .token.url > .token.operator,
+.language-markdown .token.url-reference.url > .token.string {
+  color: hsl(230, 8%, 24%);
+}
+
+.language-markdown .token.url > .token.content {
+  color: hsl(221, 87%, 60%);
+}
+
+.language-markdown .token.url > .token.url,
+.language-markdown .token.url-reference.url {
+  color: hsl(198, 99%, 37%);
+}
+
+.language-markdown .token.blockquote.punctuation,
+.language-markdown .token.hr.punctuation {
+  color: hsl(230, 4%, 64%);
+  font-style: italic;
+}
+
+.language-markdown .token.code-snippet {
+  color: hsl(119, 34%, 47%);
+}
+
+.language-markdown .token.bold .token.content {
+  color: hsl(35, 99%, 36%);
+}
+
+.language-markdown .token.italic .token.content {
+  color: hsl(301, 63%, 40%);
+}
+
+.language-markdown .token.strike .token.content,
+.language-markdown .token.strike .token.punctuation,
+.language-markdown .token.list.punctuation,
+.language-markdown .token.title.important > .token.punctuation {
+  color: hsl(5, 74%, 59%);
+}
+
+/* General */
+.token.bold {
+  font-weight: bold;
+}
+
+.token.comment,
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.token.namespace {
+  opacity: 0.8;
+}
+
+/* Plugin overrides */
+/* Selectors should have higher specificity than those in the plugins' default stylesheets */
+
+/* Show Invisibles plugin overrides */
+.token.token.tab:not(:empty):before,
+.token.token.cr:before,
+.token.token.lf:before,
+.token.token.space:before {
+  color: hsla(230, 8%, 24%, 0.2);
+}
+
+/* Toolbar plugin overrides */
+/* Space out all buttons and move them away from the right edge of the code block */
+div.code-toolbar > .toolbar.toolbar > .toolbar-item {
+  margin-right: 0.4em;
+}
+
+/* Styling the buttons */
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > button,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > span {
+  background: hsl(230, 1%, 90%);
+  color: hsl(230, 6%, 44%);
+  padding: 0.1em 0.4em;
+  border-radius: 0.3em;
+}
+
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
+  background: hsl(230, 1%, 78%); /* custom: darken(--syntax-bg, 20%) */
+  color: hsl(230, 8%, 24%);
+}
+
+/* Line Highlight plugin overrides */
+/* The highlighted line itself */
+.line-highlight.line-highlight {
+  background: hsla(230, 8%, 24%, 0.05);
+}
+
+/* Default line numbers in Line Highlight plugin */
+.line-highlight.line-highlight:before,
+.line-highlight.line-highlight[data-end]:after {
+  background: hsl(230, 1%, 90%);
+  color: hsl(230, 8%, 24%);
+  padding: 0.1em 0.6em;
+  border-radius: 0.3em;
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */
+}
+
+/* Hovering over a linkable line number (in the gutter area) */
+/* Requires Line Numbers plugin as well */
+pre[id].linkable-line-numbers.linkable-line-numbers
+  span.line-numbers-rows
+  > span:hover:before {
+  background-color: hsla(230, 8%, 24%, 0.05);
+}
+
+/* Line Numbers and Command Line plugins overrides */
+/* Line separating gutter from coding area */
+.line-numbers.line-numbers .line-numbers-rows,
+.command-line .command-line-prompt {
+  border-right-color: hsla(230, 8%, 24%, 0.2);
+}
+
+/* Stuff in the gutter */
+.line-numbers .line-numbers-rows > span:before,
+.command-line .command-line-prompt > span:before {
+  color: hsl(230, 1%, 62%);
+}
+
+/* Match Braces plugin overrides */
+/* Note: Outline colour is inherited from the braces */
+.rainbow-braces .token.token.punctuation.brace-level-1,
+.rainbow-braces .token.token.punctuation.brace-level-5,
+.rainbow-braces .token.token.punctuation.brace-level-9 {
+  color: hsl(5, 74%, 59%);
+}
+
+.rainbow-braces .token.token.punctuation.brace-level-2,
+.rainbow-braces .token.token.punctuation.brace-level-6,
+.rainbow-braces .token.token.punctuation.brace-level-10 {
+  color: hsl(119, 34%, 47%);
+}
+
+.rainbow-braces .token.token.punctuation.brace-level-3,
+.rainbow-braces .token.token.punctuation.brace-level-7,
+.rainbow-braces .token.token.punctuation.brace-level-11 {
+  color: hsl(221, 87%, 60%);
+}
+
+.rainbow-braces .token.token.punctuation.brace-level-4,
+.rainbow-braces .token.token.punctuation.brace-level-8,
+.rainbow-braces .token.token.punctuation.brace-level-12 {
+  color: hsl(301, 63%, 40%);
+}
+
+/* Diff Highlight plugin overrides */
+/* Taken from https://github.com/atom/github/blob/master/styles/variables.less */
+pre.diff-highlight > code .token.token.deleted:not(.prefix),
+pre > code.diff-highlight .token.token.deleted:not(.prefix) {
+  background-color: hsla(353, 100%, 66%, 0.15);
+}
+
+pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection,
+pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection,
+pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection,
+pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection {
+  background-color: hsla(353, 95%, 66%, 0.25);
+}
+
+pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection,
+pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection,
+pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection,
+pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection {
+  background-color: hsla(353, 95%, 66%, 0.25);
+}
+
+pre.diff-highlight > code .token.token.inserted:not(.prefix),
+pre > code.diff-highlight .token.token.inserted:not(.prefix) {
+  background-color: hsla(137, 100%, 55%, 0.15);
+}
+
+pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection,
+pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection,
+pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection,
+pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection {
+  background-color: hsla(135, 73%, 55%, 0.25);
+}
+
+pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection,
+pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection,
+pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection,
+pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
+  background-color: hsla(135, 73%, 55%, 0.25);
+}
+
+/* Previewers plugin overrides */
+/* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-light-ui */
+/* Border around popup */
+.prism-previewer.prism-previewer:before,
+.prism-previewer-gradient.prism-previewer-gradient div {
+  border-color: hsl(0, 0, 95%);
+}
+
+/* Angle and time should remain as circles and are hence not included */
+.prism-previewer-color.prism-previewer-color:before,
+.prism-previewer-gradient.prism-previewer-gradient div,
+.prism-previewer-easing.prism-previewer-easing:before {
+  border-radius: 0.3em;
+}
+
+/* Triangles pointing to the code */
+.prism-previewer.prism-previewer:after {
+  border-top-color: hsl(0, 0, 95%);
+}
+
+.prism-previewer-flipped.prism-previewer-flipped.after {
+  border-bottom-color: hsl(0, 0, 95%);
+}
+
+/* Background colour within the popup */
+.prism-previewer-angle.prism-previewer-angle:before,
+.prism-previewer-time.prism-previewer-time:before,
+.prism-previewer-easing.prism-previewer-easing {
+  background: hsl(0, 0%, 100%);
+}
+
+/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */
+/* For time, this is the alternate colour */
+.prism-previewer-angle.prism-previewer-angle circle,
+.prism-previewer-time.prism-previewer-time circle {
+  stroke: hsl(230, 8%, 24%);
+  stroke-opacity: 1;
+}
+
+/* Stroke colours of the handle, direction point, and vector itself */
+.prism-previewer-easing.prism-previewer-easing circle,
+.prism-previewer-easing.prism-previewer-easing path,
+.prism-previewer-easing.prism-previewer-easing line {
+  stroke: hsl(230, 8%, 24%);
+}
+
+/* Fill colour of the handle */
+.prism-previewer-easing.prism-previewer-easing circle {
+  fill: transparent;
+}
diff --git a/@/components/plate-ui/code-block-element.tsx b/@/components/plate-ui/code-block-element.tsx
new file mode 100644
index 0000000..9c751f3
--- /dev/null
+++ b/@/components/plate-ui/code-block-element.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import './code-block-element.css';
+
+import React, { forwardRef } from 'react';
+import {
+  TCodeBlockElement,
+  useCodeBlockElementState,
+} from '@udecode/plate-code-block';
+import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';
+
+import { cn } from '../../lib/utils';
+
+import { CodeBlockCombobox } from './code-block-combobox';
+
+const CodeBlockElement = forwardRef<
+  HTMLDivElement,
+  PlateElementProps<Value, TCodeBlockElement>
+>(({ className, ...props }, ref) => {
+  const { children, element } = props;
+
+  const state = useCodeBlockElementState({ element });
+
+  return (
+    <PlateElement
+      ref={ref}
+      className={cn('relative py-1', state.className, className)}
+      {...props}
+    >
+      <pre className="overflow-x-auto rounded-md bg-muted px-6 py-8 font-mono text-sm leading-[normal] [tab-size:2]">
+        <code>{children}</code>
+      </pre>
+
+      {state.syntax && (
+        <div
+          className="absolute right-2 top-2 z-10 select-none"
+          contentEditable={false}
+        >
+          <CodeBlockCombobox />
+        </div>
+      )}
+    </PlateElement>
+  );
+});
+CodeBlockElement.displayName = 'CodeBlockElement';
+
+export { CodeBlockElement };
diff --git a/@/components/plate-ui/code-leaf.tsx b/@/components/plate-ui/code-leaf.tsx
new file mode 100644
index 0000000..dc3fdec
--- /dev/null
+++ b/@/components/plate-ui/code-leaf.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import React from 'react';
+import { PlateLeaf, PlateLeafProps } from '@udecode/plate-common';
+
+import { cn } from '../../lib/utils';
+
+export function CodeLeaf({ className, children, ...props }: PlateLeafProps) {
+  return (
+    <PlateLeaf
+      asChild
+      className={cn(
+        'whitespace-pre-wrap',
+        'rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm',
+        className
+      )}
+      {...props}
+    >
+      <code>{children}</code>
+    </PlateLeaf>
+  );
+}
diff --git a/@/components/plate-ui/code-line-element.tsx b/@/components/plate-ui/code-line-element.tsx
new file mode 100644
index 0000000..316f450
--- /dev/null
+++ b/@/components/plate-ui/code-line-element.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import React, { forwardRef } from 'react';
+import { PlateElement, PlateElementProps } from '@udecode/plate-common';
+
+const CodeLineElement = forwardRef<HTMLDivElement, PlateElementProps>(
+  (props, ref) => <PlateElement ref={ref} {...props} />
+);
+CodeLineElement.displayName = 'CodeLineElement';
+
+export { CodeLineElement };
diff --git a/@/components/plate-ui/code-syntax-leaf.tsx b/@/components/plate-ui/code-syntax-leaf.tsx
new file mode 100644
index 0000000..266e234
--- /dev/null
+++ b/@/components/plate-ui/code-syntax-leaf.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import React from 'react';
+import { useCodeSyntaxLeaf } from '@udecode/plate-code-block';
+import { PlateLeaf, PlateLeafProps } from '@udecode/plate-common';
+
+export function CodeSyntaxLeaf({ children, ...props }: PlateLeafProps) {
+  const { leaf } = props;
+
+  const { tokenProps } = useCodeSyntaxLeaf({ leaf });
+
+  return (
+    <PlateLeaf {...props}>
+      <span {...tokenProps}>{children}</span>
+    </PlateLeaf>
+  );
+}
diff --git a/@/components/plate-ui/combobox.tsx b/@/components/plate-ui/combobox.tsx
new file mode 100644
index 0000000..4bd1a64
--- /dev/null
+++ b/@/components/plate-ui/combobox.tsx
@@ -0,0 +1,156 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import * as Popover from '@radix-ui/react-popover';
+import {
+  comboboxActions,
+  ComboboxContentItemProps,
+  ComboboxContentProps,
+  ComboboxProps,
+  Data,
+  NoData,
+  TComboboxItem,
+  useActiveComboboxStore,
+  useComboboxContent,
+  useComboboxContentState,
+  useComboboxControls,
+  useComboboxItem,
+  useComboboxSelectors,
+} from '@udecode/plate-combobox';
+import { useEditorState, useEventEditorSelectors } from '@udecode/plate-common';
+import { createVirtualRef } from '@udecode/plate-floating';
+
+import { cn } from '../../lib/utils';
+
+export function ComboboxItem<TData extends Data = NoData>({
+  combobox,
+  index,
+  item,
+  onRenderItem,
+}: ComboboxContentItemProps<TData>) {
+  const { props } = useComboboxItem({ item, index, combobox, onRenderItem });
+
+  return (
+    <div
+      className={cn(
+        'relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',
+        'hover:bg-accent hover:text-accent-foreground data-[highlighted=true]:bg-accent data-[highlighted=true]:text-accent-foreground'
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ComboboxContent<TData extends Data = NoData>(
+  props: ComboboxContentProps<TData>
+) {
+  const {
+    component: Component,
+    items,
+    portalElement,
+    combobox,
+    onRenderItem,
+  } = props;
+
+  const editor = useEditorState();
+
+  const filteredItems =
+    useComboboxSelectors.filteredItems() as TComboboxItem<TData>[];
+  const activeComboboxStore = useActiveComboboxStore()!;
+
+  const state = useComboboxContentState({ items, combobox });
+  const { menuProps, targetRange } = useComboboxContent(state);
+
+  return (
+    <Popover.Root open>
+      <Popover.PopoverAnchor
+        virtualRef={createVirtualRef(editor, targetRange ?? undefined)}
+      />
+
+      <Popover.Portal container={portalElement}>
+        <Popover.Content
+          {...menuProps}
+          sideOffset={5}
+          side="bottom"
+          align="start"
+          className={cn(
+            'z-[500] m-0 max-h-[288px] w-[300px] overflow-scroll rounded-md bg-popover p-0 shadow-md'
+          )}
+          onOpenAutoFocus={(event) => event.preventDefault()}
+        >
+          {Component ? Component({ store: activeComboboxStore }) : null}
+
+          {filteredItems.map((item, index) => (
+            <ComboboxItem
+              key={item.key}
+              item={item}
+              combobox={combobox}
+              index={index}
+              onRenderItem={onRenderItem}
+            />
+          ))}
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
+
+/**
+ * Register the combobox id, trigger, onSelectItem
+ * Renders the combobox if active.
+ */
+export function Combobox<TData extends Data = NoData>({
+  id,
+  trigger,
+  searchPattern,
+  onSelectItem,
+  controlled,
+  maxSuggestions,
+  filter,
+  sort,
+  disabled: _disabled,
+  ...props
+}: ComboboxProps<TData>) {
+  const storeItems = useComboboxSelectors.items();
+  const disabled =
+    _disabled ?? (storeItems.length === 0 && !props.items?.length);
+
+  const focusedEditorId = useEventEditorSelectors.focus?.();
+  const combobox = useComboboxControls();
+  const activeId = useComboboxSelectors.activeId();
+  const editor = useEditorState();
+
+  useEffect(() => {
+    comboboxActions.setComboboxById({
+      id,
+      trigger,
+      searchPattern,
+      controlled,
+      onSelectItem,
+      maxSuggestions,
+      filter,
+      sort,
+    });
+  }, [
+    id,
+    trigger,
+    searchPattern,
+    controlled,
+    onSelectItem,
+    maxSuggestions,
+    filter,
+    sort,
+  ]);
+
+  if (
+    !combobox ||
+    !editor.selection ||
+    focusedEditorId !== editor.id ||
+    activeId !== id ||
+    disabled
+  ) {
+    return null;
+  }
+
+  return <ComboboxContent combobox={combobox} {...props} />;
+}
diff --git a/@/components/plate-ui/command.tsx b/@/components/plate-ui/command.tsx
new file mode 100644
index 0000000..72ae042
--- /dev/null
+++ b/@/components/plate-ui/command.tsx
@@ -0,0 +1,156 @@
+'use client';
+
+import * as React from 'react';
+import { DialogProps } from '@radix-ui/react-dialog';
+import { Command as CommandPrimitive } from 'cmdk';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+
+import { Dialog, DialogContent } from './dialog';
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+function CommandDialog({ children, ...props }: CommandDialogProps) {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Icons.search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn('max-h-[500px] overflow-y-auto overflow-x-hidden', className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 h-px bg-border', className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      className={cn(
+        'ml-auto text-xs tracking-widest text-muted-foreground',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+CommandShortcut.displayName = 'CommandShortcut';
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
diff --git a/@/components/plate-ui/comment-avatar.tsx b/@/components/plate-ui/comment-avatar.tsx
new file mode 100644
index 0000000..e43665b
--- /dev/null
+++ b/@/components/plate-ui/comment-avatar.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import React from 'react';
+import { useUserById } from '@udecode/plate-comments';
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from './avatar';
+
+export function CommentAvatar({ userId }: { userId: string | null }) {
+  const user = useUserById(userId);
+  if (!user) return null;
+
+  return (
+    <Avatar className="h-5 w-5">
+      <AvatarImage src={user.avatarUrl} alt={user.name} />
+      <AvatarFallback>{user.name?.[0]}</AvatarFallback>
+    </Avatar>
+  );
+}
diff --git a/@/components/plate-ui/comment-create-form.tsx b/@/components/plate-ui/comment-create-form.tsx
new file mode 100644
index 0000000..5af4380
--- /dev/null
+++ b/@/components/plate-ui/comment-create-form.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import React from 'react';
+import {
+  CommentNewSubmitButton,
+  CommentNewTextarea,
+  useCommentsSelectors,
+} from '@udecode/plate-comments';
+
+import { cn } from '../../lib/utils';
+import { buttonVariants } from './button';
+import { inputVariants } from './input';
+
+import { CommentAvatar } from './comment-avatar';
+
+export function CommentCreateForm() {
+  const myUserId = useCommentsSelectors().myUserId();
+
+  return (
+    <div className="flex w-full space-x-2">
+      <CommentAvatar userId={myUserId} />
+
+      <div className="flex grow flex-col items-end gap-2">
+        <CommentNewTextarea className={inputVariants()} />
+
+        <CommentNewSubmitButton
+          className={cn(buttonVariants({ size: 'sm' }), 'w-[90px]')}
+        >
+          Comment
+        </CommentNewSubmitButton>
+      </div>
+    </div>
+  );
+}
diff --git a/@/components/plate-ui/comment-item.tsx b/@/components/plate-ui/comment-item.tsx
new file mode 100644
index 0000000..c4068ba
--- /dev/null
+++ b/@/components/plate-ui/comment-item.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import React from 'react';
+import {
+  CommentProvider,
+  useCommentById,
+  useCommentItemContentState,
+} from '@udecode/plate-comments';
+import { formatDistance } from 'date-fns';
+
+import { CommentAvatar } from './comment-avatar';
+import { CommentMoreDropdown } from './comment-more-dropdown';
+import { CommentResolveButton } from './comment-resolve-button';
+import { CommentValue } from './comment-value';
+
+type PlateCommentProps = {
+  commentId: string;
+};
+
+function CommentItemContent() {
+  const {
+    comment,
+    isMyComment,
+    isReplyComment,
+    user,
+    editingValue,
+    commentText,
+  } = useCommentItemContentState();
+
+  return (
+    <div>
+      <div className="relative flex items-center gap-2">
+        <CommentAvatar userId={comment.userId} />
+
+        <h4 className="text-sm font-semibold leading-none">{user?.name}</h4>
+
+        <div className="text-xs leading-none text-muted-foreground">
+          {formatDistance(comment.createdAt, Date.now())} ago
+        </div>
+
+        {isMyComment && (
+          <div className="absolute -right-0.5 -top-0.5 flex space-x-1">
+            {isReplyComment ? null : <CommentResolveButton />}
+
+            <CommentMoreDropdown />
+          </div>
+        )}
+      </div>
+
+      <div className="mb-4 pl-7 pt-0.5">
+        {editingValue ? (
+          <CommentValue />
+        ) : (
+          <div className="whitespace-pre-wrap text-sm">{commentText}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function CommentItem({ commentId }: PlateCommentProps) {
+  const comment = useCommentById(commentId);
+  if (!comment) return null;
+
+  return (
+    <CommentProvider key={commentId} id={commentId}>
+      <CommentItemContent />
+    </CommentProvider>
+  );
+}
diff --git a/@/components/plate-ui/comment-leaf.tsx b/@/components/plate-ui/comment-leaf.tsx
new file mode 100644
index 0000000..e228f8b
--- /dev/null
+++ b/@/components/plate-ui/comment-leaf.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import React from 'react';
+import {
+  TCommentText,
+  useCommentLeaf,
+  useCommentLeafState,
+} from '@udecode/plate-comments';
+import { PlateLeaf, PlateLeafProps, Value } from '@udecode/plate-common';
+
+import { cn } from '../../lib/utils';
+
+export function CommentLeaf({
+  className,
+  ...props
+}: PlateLeafProps<Value, TCommentText>) {
+  const { children, nodeProps, leaf } = props;
+
+  const state = useCommentLeafState({ leaf });
+  const { props: rootProps } = useCommentLeaf(state);
+
+  // hide resolved comments
+  if (!state.commentCount) return <>{children}</>;
+
+  let aboveChildren = <>{children}</>;
+
+  if (!state.isActive) {
+    for (let i = 1; i < state.commentCount; i++) {
+      aboveChildren = <span className="bg-primary/20">{aboveChildren}</span>;
+    }
+  }
+
+  return (
+    <PlateLeaf
+      {...props}
+      className={cn(
+        'border-b-2 border-b-primary/40',
+        state.isActive ? 'bg-primary/40' : 'bg-primary/20',
+        className
+      )}
+      nodeProps={{
+        ...rootProps,
+        ...nodeProps,
+      }}
+    >
+      {aboveChildren}
+    </PlateLeaf>
+  );
+}
diff --git a/@/components/plate-ui/comment-more-dropdown.tsx b/@/components/plate-ui/comment-more-dropdown.tsx
new file mode 100644
index 0000000..039586d
--- /dev/null
+++ b/@/components/plate-ui/comment-more-dropdown.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import React from 'react';
+import {
+  useCommentDeleteButton,
+  useCommentDeleteButtonState,
+  useCommentEditButton,
+  useCommentEditButtonState,
+} from '@udecode/plate-comments';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+import { Button } from './button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './dropdown-menu';
+
+export function CommentMoreDropdown() {
+  const editButtonState = useCommentEditButtonState();
+  const editProps = useCommentEditButton(editButtonState);
+  const deleteButtonState = useCommentDeleteButtonState();
+  const deleteProps = useCommentDeleteButton(deleteButtonState);
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className={cn('h-6 p-1 text-muted-foreground')}>
+          <Icons.more className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem {...(editProps as any)}>
+          Edit comment
+        </DropdownMenuItem>
+        <DropdownMenuItem {...(deleteProps as any)}>
+          Delete comment
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/@/components/plate-ui/comment-reply-items.tsx b/@/components/plate-ui/comment-reply-items.tsx
new file mode 100644
index 0000000..57a4d0f
--- /dev/null
+++ b/@/components/plate-ui/comment-reply-items.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import React from 'react';
+import {
+  SCOPE_ACTIVE_COMMENT,
+  useCommentReplies,
+} from '@udecode/plate-comments';
+
+import { CommentItem } from './comment-item';
+
+export function CommentReplyItems() {
+  const commentReplies = useCommentReplies(SCOPE_ACTIVE_COMMENT);
+
+  return (
+    <>
+      {Object.keys(commentReplies).map((id) => (
+        <CommentItem key={id} commentId={id} />
+      ))}
+    </>
+  );
+}
diff --git a/@/components/plate-ui/comment-resolve-button.tsx b/@/components/plate-ui/comment-resolve-button.tsx
new file mode 100644
index 0000000..51d3db2
--- /dev/null
+++ b/@/components/plate-ui/comment-resolve-button.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import React from 'react';
+import {
+  CommentResolveButton as CommentResolveButtonPrimitive,
+  useComment,
+} from '@udecode/plate-comments';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+import { buttonVariants } from './button';
+
+export function CommentResolveButton() {
+  const comment = useComment()!;
+
+  return (
+    <CommentResolveButtonPrimitive
+      className={cn(
+        buttonVariants({ variant: 'ghost' }),
+        'h-6 p-1 text-muted-foreground'
+      )}
+    >
+      {comment.isResolved ? (
+        <Icons.refresh className="h-4 w-4" />
+      ) : (
+        <Icons.check className="h-4 w-4" />
+      )}
+    </CommentResolveButtonPrimitive>
+  );
+}
diff --git a/@/components/plate-ui/comment-value.tsx b/@/components/plate-ui/comment-value.tsx
new file mode 100644
index 0000000..fcb5d0b
--- /dev/null
+++ b/@/components/plate-ui/comment-value.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import React from 'react';
+import {
+  CommentEditActions,
+  CommentEditTextarea,
+  useCommentValue,
+} from '@udecode/plate-comments';
+
+import { cn } from '../../lib/utils';
+import { buttonVariants } from './button';
+import { inputVariants } from './input';
+
+export function CommentValue() {
+  const { textareaRef } = useCommentValue();
+
+  return (
+    <div className="my-2 flex flex-col items-end gap-2">
+      <CommentEditTextarea
+        ref={textareaRef}
+        className={cn(inputVariants(), 'min-h-[60px]')}
+      />
+
+      <div className="flex space-x-2">
+        <CommentEditActions.CancelButton
+          className={buttonVariants({ variant: 'outline', size: 'xs' })}
+        >
+          Cancel
+        </CommentEditActions.CancelButton>
+
+        <CommentEditActions.SaveButton
+          className={buttonVariants({ variant: 'default', size: 'xs' })}
+        >
+          Save
+        </CommentEditActions.SaveButton>
+      </div>
+    </div>
+  );
+}
diff --git a/@/components/plate-ui/comments-popover.tsx b/@/components/plate-ui/comments-popover.tsx
new file mode 100644
index 0000000..01fff71
--- /dev/null
+++ b/@/components/plate-ui/comments-popover.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import React from 'react';
+import {
+  CommentProvider,
+  CommentsPositioner,
+  SCOPE_ACTIVE_COMMENT,
+  useFloatingCommentsContentState,
+  useFloatingCommentsState,
+} from '@udecode/plate-comments';
+import { PortalBody } from '@udecode/plate-common';
+
+import { cn } from '../../lib/utils';
+import { popoverVariants } from './popover';
+
+import { CommentCreateForm } from './comment-create-form';
+import { CommentItem } from './comment-item';
+import { CommentReplyItems } from './comment-reply-items';
+
+export type FloatingCommentsContentProps = {
+  disableForm?: boolean;
+};
+
+export function CommentsPopoverContent(props: FloatingCommentsContentProps) {
+  const { disableForm } = props;
+
+  const { ref, activeCommentId, hasNoComment, myUserId } =
+    useFloatingCommentsContentState();
+
+  return (
+    <CommentProvider
+      key={activeCommentId}
+      id={activeCommentId}
+      scope={SCOPE_ACTIVE_COMMENT}
+    >
+      <div ref={ref} className={cn(popoverVariants(), 'relative w-[310px]')}>
+        {!hasNoComment && (
+          <>
+            <CommentItem key={activeCommentId} commentId={activeCommentId} />
+
+            <CommentReplyItems />
+          </>
+        )}
+
+        {!!myUserId && !disableForm && <CommentCreateForm />}
+      </div>
+    </CommentProvider>
+  );
+}
+
+export function CommentsPopover() {
+  const { loaded, activeCommentId } = useFloatingCommentsState();
+
+  if (!loaded || !activeCommentId) return null;
+
+  return (
+    <PortalBody>
+      <CommentsPositioner className="absolute z-50 w-[418px] pb-4">
+        <CommentsPopoverContent />
+      </CommentsPositioner>
+    </PortalBody>
+  );
+}
diff --git a/@/components/plate-ui/dialog.tsx b/@/components/plate-ui/dialog.tsx
new file mode 100644
index 0000000..36a504b
--- /dev/null
+++ b/@/components/plate-ui/dialog.tsx
@@ -0,0 +1,123 @@
+'use client';
+
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = ({
+  className,
+  ...props
+}: DialogPrimitive.DialogPortalProps) => (
+  <DialogPrimitive.Portal className={cn(className)} {...props} />
+);
+DialogPortal.displayName = DialogPrimitive.Portal.displayName;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <Icons.close className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-1.5 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/@/components/plate-ui/draggable.tsx b/@/components/plate-ui/draggable.tsx
new file mode 100644
index 0000000..5fd07b4
--- /dev/null
+++ b/@/components/plate-ui/draggable.tsx
@@ -0,0 +1,157 @@
+'use client';
+
+import React, { forwardRef } from 'react';
+import { ClassNames, PlateElementProps, TEditor } from '@udecode/plate-common';
+import {
+  DragItemNode,
+  useDraggable,
+  useDraggableState,
+} from '@udecode/plate-dnd';
+import { DropTargetMonitor } from 'react-dnd';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
+
+export interface DraggableProps
+  extends PlateElementProps,
+    ClassNames<{
+      /**
+       * Block and gutter.
+       */
+      blockAndGutter: string;
+
+      /**
+       * Block.
+       */
+      block: string;
+
+      /**
+       * Gutter at the left side of the editor.
+       * It has the height of the block
+       */
+      gutterLeft: string;
+
+      /**
+       * Block toolbar wrapper in the gutter left.
+       * It has the height of a line of the block.
+       */
+      blockToolbarWrapper: string;
+
+      /**
+       * Block toolbar in the gutter.
+       */
+      blockToolbar: string;
+
+      blockWrapper: string;
+
+      /**
+       * Button to dnd the block, in the block toolbar.
+       */
+      dragHandle: string;
+
+      /**
+       * Icon of the drag button, in the drag icon.
+       */
+      dragIcon: string;
+
+      /**
+       * Show a dropline above or below the block when dragging a block.
+       */
+      dropLine: string;
+    }> {
+  /**
+   * Intercepts the drop handling.
+   * If `false` is returned, the default drop behavior is called after.
+   * If `true` is returned, the default behavior is not called.
+   */
+  onDropHandler?: (
+    editor: TEditor,
+    props: {
+      monitor: DropTargetMonitor<DragItemNode, unknown>;
+      dragItem: DragItemNode;
+      nodeRef: any;
+      id: string;
+    }
+  ) => boolean;
+}
+
+const dragHandle = (
+  <Tooltip>
+    <TooltipTrigger>
+      <Icons.dragHandle className="h-4 w-4 text-muted-foreground" />
+    </TooltipTrigger>
+    <TooltipContent>Drag to move</TooltipContent>
+  </Tooltip>
+);
+
+const Draggable = forwardRef<HTMLDivElement, DraggableProps>(
+  ({ className, classNames = {}, onDropHandler, ...props }, ref) => {
+    const { children, element } = props;
+
+    const state = useDraggableState({ element, onDropHandler });
+    const { dropLine, isDragging, isHovered } = state;
+    const {
+      groupProps,
+      droplineProps,
+      gutterLeftProps,
+      previewRef,
+      handleRef,
+    } = useDraggable(state);
+
+    return (
+      <div
+        className={cn(
+          'relative',
+          isDragging && 'opacity-50',
+          'group',
+          className
+        )}
+        ref={ref}
+        {...groupProps}
+      >
+        <div
+          className={cn(
+            'pointer-events-none absolute top-0 flex h-full -translate-x-full cursor-text opacity-0 group-hover:opacity-100',
+            classNames.gutterLeft
+          )}
+          {...gutterLeftProps}
+        >
+          <div className={cn('flex h-[1.5em]', classNames.blockToolbarWrapper)}>
+            <div
+              className={cn(
+                'pointer-events-auto mr-1 flex items-center',
+                classNames.blockToolbar
+              )}
+            >
+              <div ref={handleRef} className="h-4 w-4">
+                {isHovered && dragHandle}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className={cn('', classNames.blockWrapper)} ref={previewRef}>
+          {children}
+
+          {!!dropLine && (
+            <div
+              className={cn(
+                'absolute inset-x-0 h-0.5 opacity-100',
+                'bg-ring',
+                dropLine === 'top' && '-top-px',
+                dropLine === 'bottom' && '-bottom-px',
+                classNames.dropLine
+              )}
+              {...droplineProps}
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+Draggable.displayName = 'Draggable';
+
+export { Draggable };
diff --git a/@/components/plate-ui/dropdown-menu.tsx b/@/components/plate-ui/dropdown-menu.tsx
new file mode 100644
index 0000000..fa5f455
--- /dev/null
+++ b/@/components/plate-ui/dropdown-menu.tsx
@@ -0,0 +1,239 @@
+'use client';
+
+import * as React from 'react';
+import { useCallback, useState } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <Icons.chevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+export const menuItemVariants = cva(
+  cn(
+    'relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',
+    'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'
+  ),
+  {
+    variants: {
+      inset: {
+        true: 'pl-8',
+      },
+    },
+  }
+);
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> &
+    VariantProps<typeof menuItemVariants>
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(menuItemVariants({ inset }), className)}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'cursor-pointer',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Icons.check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+interface DropdownMenuRadioItemProps
+  extends React.ComponentPropsWithoutRef<
+    typeof DropdownMenuPrimitive.RadioItem
+  > {
+  hideIcon?: boolean;
+}
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  DropdownMenuRadioItemProps
+>(({ className, children, hideIcon, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex select-none items-center rounded-sm pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'h-9 cursor-pointer px-2 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground',
+      className
+    )}
+    {...props}
+  >
+    {!hideIcon && (
+      <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <Icons.check className="h-4 w-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+    )}
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      'select-none px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      {...props}
+    />
+  );
+}
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
+
+export const useOpenState = () => {
+  const [open, setOpen] = useState(false);
+
+  const onOpenChange = useCallback(
+    (_value = !open) => {
+      setOpen(_value);
+    },
+    [open]
+  );
+
+  return {
+    open,
+    onOpenChange,
+  };
+};
diff --git a/@/components/plate-ui/editor.tsx b/@/components/plate-ui/editor.tsx
new file mode 100644
index 0000000..8bdf9f4
--- /dev/null
+++ b/@/components/plate-ui/editor.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { PlateContent } from '@udecode/plate-common';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+import type { PlateContentProps } from '@udecode/plate-common';
+import type { VariantProps } from 'class-variance-authority';
+
+const editorVariants = cva(
+  cn(
+    'relative overflow-x-auto whitespace-pre-wrap break-words',
+    'min-h-[80px] w-full rounded-md bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none',
+    '[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100',
+    '[&_[data-slate-placeholder]]:top-[auto_!important]',
+    '[&_strong]:font-bold'
+  ),
+  {
+    variants: {
+      variant: {
+        outline: 'border border-input',
+        ghost: '',
+      },
+      focused: {
+        true: 'ring-2 ring-ring ring-offset-2',
+      },
+      disabled: {
+        true: 'cursor-not-allowed opacity-50',
+      },
+      focusRing: {
+        true: 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        false: '',
+      },
+      size: {
+        sm: 'text-sm',
+        md: 'text-base',
+      },
+    },
+    defaultVariants: {
+      variant: 'outline',
+      focusRing: true,
+      size: 'sm',
+    },
+  }
+);
+
+export type EditorProps = PlateContentProps &
+  VariantProps<typeof editorVariants>;
+
+const Editor = React.forwardRef<HTMLDivElement, EditorProps>(
+  (
+    {
+      className,
+      disabled,
+      focused,
+      focusRing,
+      readOnly,
+      size,
+      variant,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div ref={ref} className="relative w-full">
+        <PlateContent
+          className={cn(
+            editorVariants({
+              disabled,
+              focused,
+              focusRing,
+              size,
+              variant,
+            }),
+            className
+          )}
+          disableDefaultStyles
+          readOnly={disabled ?? readOnly}
+          aria-disabled={disabled}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+Editor.displayName = 'Editor';
+
+export { Editor };
diff --git a/@/components/plate-ui/emoji-combobox.tsx b/@/components/plate-ui/emoji-combobox.tsx
new file mode 100644
index 0000000..9bc4e95
--- /dev/null
+++ b/@/components/plate-ui/emoji-combobox.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { ComboboxItemProps } from '@udecode/plate-combobox';
+import {
+  EmojiItemData,
+  KEY_EMOJI,
+  TEmojiCombobox,
+  useEmojiComboboxState,
+} from '@udecode/plate-emoji';
+
+import { Combobox } from './combobox';
+
+export function EmojiComboboxItem({ item }: ComboboxItemProps<EmojiItemData>) {
+  const {
+    data: { id, emoji },
+  } = item;
+
+  return (
+    <div>
+      {emoji} :{id}:
+    </div>
+  );
+}
+
+export function EmojiCombobox<TData extends EmojiItemData = EmojiItemData>({
+  pluginKey = KEY_EMOJI,
+  id = pluginKey,
+  ...props
+}: TEmojiCombobox<TData>) {
+  const { trigger, onSelectItem } = useEmojiComboboxState({ pluginKey });
+
+  return (
+    <Combobox
+      id={id}
+      trigger={trigger}
+      controlled
+      onSelectItem={onSelectItem}
+      onRenderItem={EmojiComboboxItem}
+      {...props}
+    />
+  );
+}
diff --git a/@/components/plate-ui/excalidraw-element.tsx b/@/components/plate-ui/excalidraw-element.tsx
new file mode 100644
index 0000000..4b4d6cf
--- /dev/null
+++ b/@/components/plate-ui/excalidraw-element.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';
+import {
+  TExcalidrawElement,
+  useExcalidrawElement,
+} from '@udecode/plate-excalidraw';
+
+export function ExcalidrawElement({
+  nodeProps,
+  ...props
+}: PlateElementProps<Value, TExcalidrawElement>) {
+  const { children, element } = props;
+
+  const { Excalidraw, excalidrawProps } = useExcalidrawElement({
+    element,
+  });
+
+  return (
+    <PlateElement {...props}>
+      <div contentEditable={false}>
+        <div className="h-[600px]">
+          {Excalidraw && (
+            <Excalidraw {...nodeProps} {...(excalidrawProps as any)} />
+          )}
+        </div>
+      </div>
+      {children}
+    </PlateElement>
+  );
+}
diff --git a/@/components/plate-ui/fixed-toolbar-buttons.tsx b/@/components/plate-ui/fixed-toolbar-buttons.tsx
new file mode 100644
index 0000000..5a1e002
--- /dev/null
+++ b/@/components/plate-ui/fixed-toolbar-buttons.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import {
+  MARK_BOLD,
+  MARK_CODE,
+  MARK_ITALIC,
+  MARK_STRIKETHROUGH,
+  MARK_UNDERLINE,
+} from '@udecode/plate-basic-marks';
+import { useEditorReadOnly } from '@udecode/plate-common';
+
+import { Icons } from './icons';
+
+import { InsertDropdownMenu } from './insert-dropdown-menu';
+import { MarkToolbarButton } from './mark-toolbar-button';
+import { ModeDropdownMenu } from './mode-dropdown-menu';
+import { ToolbarGroup } from './toolbar';
+import { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';
+
+export function FixedToolbarButtons() {
+  const readOnly = useEditorReadOnly();
+
+  return (
+    <div className="w-full overflow-hidden">
+      <div
+        className="flex flex-wrap"
+        style={{
+          transform: 'translateX(calc(-1px))',
+        }}
+      >
+        {!readOnly && (
+          <>
+            <ToolbarGroup noSeparator>
+              <InsertDropdownMenu />
+              <TurnIntoDropdownMenu />
+            </ToolbarGroup>
+
+            <ToolbarGroup>
+              <MarkToolbarButton tooltip="Bold (⌘+B)" nodeType={MARK_BOLD}>
+                <Icons.bold />
+              </MarkToolbarButton>
+              <MarkToolbarButton tooltip="Italic (⌘+I)" nodeType={MARK_ITALIC}>
+                <Icons.italic />
+              </MarkToolbarButton>
+              <MarkToolbarButton
+                tooltip="Underline (⌘+U)"
+                nodeType={MARK_UNDERLINE}
+              >
+                <Icons.underline />
+              </MarkToolbarButton>
+
+              <MarkToolbarButton
+                tooltip="Strikethrough (⌘+⇧+M)"
+                nodeType={MARK_STRIKETHROUGH}
+              >
+                <Icons.strikethrough />
+              </MarkToolbarButton>
+              <MarkToolbarButton tooltip="Code (⌘+E)" nodeType={MARK_CODE}>
+                <Icons.code />
+              </MarkToolbarButton>
+            </ToolbarGroup>
+          </>
+        )}
+
+        <div className="grow" />
+
+        <ToolbarGroup noSeparator>
+          <ModeDropdownMenu />
+        </ToolbarGroup>
+      </div>
+    </div>
+  );
+}
diff --git a/@/components/plate-ui/fixed-toolbar.tsx b/@/components/plate-ui/fixed-toolbar.tsx
new file mode 100644
index 0000000..a2abcb6
--- /dev/null
+++ b/@/components/plate-ui/fixed-toolbar.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { cn } from '../../lib/utils';
+
+import { Toolbar, ToolbarProps } from './toolbar';
+
+const FixedToolbar = React.forwardRef<HTMLDivElement, ToolbarProps>(
+  ({ className, ...props }: ToolbarProps, ref) => {
+    return (
+      <Toolbar
+        ref={ref}
+        className={cn(
+          'supports-backdrop-blur:bg-background/60 sticky left-0 top-[57px] z-50 w-full justify-between overflow-x-auto rounded-t-lg border-b border-b-border bg-background/95 backdrop-blur',
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+FixedToolbar.displayName = 'FixedToolbar';
+
+export { FixedToolbar };
diff --git a/@/components/plate-ui/floating-toolbar-buttons.tsx b/@/components/plate-ui/floating-toolbar-buttons.tsx
new file mode 100644
index 0000000..a7a64d1
--- /dev/null
+++ b/@/components/plate-ui/floating-toolbar-buttons.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+  MARK_BOLD,
+  MARK_CODE,
+  MARK_ITALIC,
+  MARK_STRIKETHROUGH,
+  MARK_UNDERLINE,
+} from '@udecode/plate-basic-marks';
+import { useEditorReadOnly } from '@udecode/plate-common';
+
+import { Icons } from './icons';
+
+import { MarkToolbarButton } from './mark-toolbar-button';
+import { MoreDropdownMenu } from './more-dropdown-menu';
+import { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';
+
+export function FloatingToolbarButtons() {
+  const readOnly = useEditorReadOnly();
+
+  return (
+    <>
+      {!readOnly && (
+        <>
+          <TurnIntoDropdownMenu />
+
+          <MarkToolbarButton nodeType={MARK_BOLD} tooltip="Bold (⌘+B)">
+            <Icons.bold />
+          </MarkToolbarButton>
+          <MarkToolbarButton nodeType={MARK_ITALIC} tooltip="Italic (⌘+I)">
+            <Icons.italic />
+          </MarkToolbarButton>
+          <MarkToolbarButton
+            nodeType={MARK_UNDERLINE}
+            tooltip="Underline (⌘+U)"
+          >
+            <Icons.underline />
+          </MarkToolbarButton>
+          <MarkToolbarButton
+            nodeType={MARK_STRIKETHROUGH}
+            tooltip="Strikethrough (⌘+⇧+M)"
+          >
+            <Icons.strikethrough />
+          </MarkToolbarButton>
+          <MarkToolbarButton nodeType={MARK_CODE} tooltip="Code (⌘+E)">
+            <Icons.code />
+          </MarkToolbarButton>
+        </>
+      )}
+
+      <MoreDropdownMenu />
+    </>
+  );
+}
diff --git a/@/components/plate-ui/floating-toolbar.tsx b/@/components/plate-ui/floating-toolbar.tsx
new file mode 100644
index 0000000..1f54572
--- /dev/null
+++ b/@/components/plate-ui/floating-toolbar.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+import React from 'react';
+import { PortalBody, useComposedRef } from '@udecode/plate-common';
+import {
+  flip,
+  FloatingToolbarState,
+  offset,
+  useFloatingToolbar,
+  useFloatingToolbarState,
+} from '@udecode/plate-floating';
+
+import { cn } from '../../lib/utils';
+
+import { Toolbar, ToolbarProps } from './toolbar';
+
+export interface FloatingToolbarProps extends ToolbarProps {
+  state?: FloatingToolbarState;
+}
+
+const FloatingToolbar = React.forwardRef<
+  React.ElementRef<typeof Toolbar>,
+  FloatingToolbarProps
+>(({ state, children, ...props }, componentRef) => {
+  const floatingToolbarState = useFloatingToolbarState({
+    ...state,
+    floatingOptions: {
+      placement: 'top',
+      middleware: [
+        offset(12),
+        flip({
+          padding: 12,
+          fallbackPlacements: [
+            'top-start',
+            'top-end',
+            'bottom-start',
+            'bottom-end',
+          ],
+        }),
+      ],
+      ...state?.floatingOptions,
+    },
+  });
+
+  const {
+    ref: floatingRef,
+    props: rootProps,
+    hidden,
+  } = useFloatingToolbar(floatingToolbarState);
+
+  const ref = useComposedRef<HTMLDivElement>(componentRef, floatingRef);
+
+  if (hidden) return null;
+
+  return (
+    <PortalBody>
+      <Toolbar
+        ref={ref}
+        className={cn(
+          'absolute z-50 whitespace-nowrap border bg-popover px-1 opacity-100 shadow-md print:hidden'
+        )}
+        {...rootProps}
+        {...props}
+      >
+        {children}
+      </Toolbar>
+    </PortalBody>
+  );
+});
+FloatingToolbar.displayName = 'FloatingToolbar';
+
+export { FloatingToolbar };
diff --git a/@/components/plate-ui/heading-element.tsx b/@/components/plate-ui/heading-element.tsx
new file mode 100644
index 0000000..7235ae1
--- /dev/null
+++ b/@/components/plate-ui/heading-element.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { PlateElement, PlateElementProps } from '@udecode/plate-common';
+import { cva, VariantProps } from 'class-variance-authority';
+
+const headingVariants = cva('', {
+  variants: {
+    variant: {
+      h1: 'mb-1 mt-[2em] font-heading text-4xl font-bold',
+      h2: 'mb-px mt-[1.4em] font-heading text-2xl font-semibold tracking-tight',
+      h3: 'mb-px mt-[1em] font-heading text-xl font-semibold tracking-tight',
+      h4: 'mt-[0.75em] font-heading text-lg font-semibold tracking-tight',
+      h5: 'mt-[0.75em] text-lg font-semibold tracking-tight',
+      h6: 'mt-[0.75em] text-base font-semibold tracking-tight',
+    },
+    isFirstBlock: {
+      true: 'mt-0',
+      false: '',
+    },
+  },
+});
+
+export function HeadingElement({
+  className,
+  variant = 'h1',
+  isFirstBlock,
+  children,
+  ...props
+}: PlateElementProps & VariantProps<typeof headingVariants>) {
+  const { element, editor } = props;
+
+  const Element = variant!;
+
+  return (
+    <PlateElement
+      asChild
+      className={headingVariants({
+        variant,
+        className,
+        isFirstBlock: element === editor.children[0],
+      })}
+      {...props}
+    >
+      <Element>{children}</Element>
+    </PlateElement>
+  );
+}
diff --git a/@/components/plate-ui/highlight-leaf.tsx b/@/components/plate-ui/highlight-leaf.tsx
new file mode 100644
index 0000000..a3ba121
--- /dev/null
+++ b/@/components/plate-ui/highlight-leaf.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { PlateLeaf, PlateLeafProps } from '@udecode/plate-common';
+
+import { cn } from '../../lib/utils';
+
+export function HighlightLeaf({
+  className,
+  children,
+  ...props
+}: PlateLeafProps) {
+  return (
+    <PlateLeaf
+      asChild
+      className={cn('bg-primary/20 text-inherit dark:bg-primary/40', className)}
+      {...props}
+    >
+      <mark>{children}</mark>
+    </PlateLeaf>
+  );
+}
diff --git a/@/components/plate-ui/hr-element.tsx b/@/components/plate-ui/hr-element.tsx
new file mode 100644
index 0000000..a5e89a8
--- /dev/null
+++ b/@/components/plate-ui/hr-element.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { PlateElement, PlateElementProps } from '@udecode/plate-common';
+import { useFocused, useSelected } from 'slate-react';
+
+import { cn } from '../../lib/utils';
+
+const HrElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ className, nodeProps, ...props }, ref) => {
+  const { children } = props;
+
+  const selected = useSelected();
+  const focused = useFocused();
+
+  return (
+    <PlateElement ref={ref} {...props}>
+      <div className="py-6" contentEditable={false}>
+        <hr
+          {...nodeProps}
+          className={cn(
+            'h-0.5 cursor-pointer rounded-sm border-none bg-muted bg-clip-content',
+            selected && focused && 'ring-2 ring-ring ring-offset-2',
+            className
+          )}
+        />
+      </div>
+      {children}
+    </PlateElement>
+  );
+});
+HrElement.displayName = 'HrElement';
+
+export { HrElement };
diff --git a/@/components/plate-ui/image-element.tsx b/@/components/plate-ui/image-element.tsx
new file mode 100644
index 0000000..b09c58b
--- /dev/null
+++ b/@/components/plate-ui/image-element.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';
+import {
+  ELEMENT_IMAGE,
+  Image,
+  TImageElement,
+  useMediaState,
+} from '@udecode/plate-media';
+import { useResizableStore } from '@udecode/plate-resizable';
+
+import { cn } from '../../lib/utils';
+
+import { Caption, CaptionTextarea } from './caption';
+import { MediaPopover } from './media-popover';
+import {
+  mediaResizeHandleVariants,
+  Resizable,
+  ResizeHandle,
+} from './resizable';
+
+export function ImageElement({
+  className,
+  children,
+  nodeProps,
+  ...props
+}: PlateElementProps<Value, TImageElement>) {
+  const { readOnly, focused, selected, align = 'center' } = useMediaState();
+  const width = useResizableStore().get.width();
+
+  return (
+    <MediaPopover pluginKey={ELEMENT_IMAGE}>
+      <PlateElement className={cn('py-2.5', className)} {...props}>
+        <figure className="group relative m-0" contentEditable={false}>
+          <Resizable
+            align={align}
+            options={{
+              align,
+              readOnly,
+            }}
+          >
+            <ResizeHandle
+              options={{ direction: 'left' }}
+              className={mediaResizeHandleVariants({ direction: 'left' })}
+            />
+            <Image
+              className={cn(
+                'block w-full max-w-full cursor-pointer object-cover px-0',
+                'rounded-sm',
+                focused && selected && 'ring-2 ring-ring ring-offset-2'
+              )}
+              alt=""
+              {...nodeProps}
+            />
+            <ResizeHandle
+              options={{ direction: 'right' }}
+              className={mediaResizeHandleVariants({ direction: 'right' })}
+            />
+          </Resizable>
+
+          <Caption align={align} style={{ width }}>
+            <CaptionTextarea
+              placeholder="Write a caption..."
+              readOnly={readOnly}
+            />
+          </Caption>
+        </figure>
+
+        {children}
+      </PlateElement>
+    </MediaPopover>
+  );
+}
diff --git a/@/components/plate-ui/input.tsx b/@/components/plate-ui/input.tsx
new file mode 100644
index 0000000..ee5ff92
--- /dev/null
+++ b/@/components/plate-ui/input.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+export const inputVariants = cva(
+  'flex w-full rounded-md bg-transparent text-sm file:border-0 file:bg-background file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default:
+          'border border-input ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        ghost: 'border-none focus-visible:ring-transparent',
+      },
+      h: {
+        sm: 'h-9 px-3 py-2',
+        md: 'h-10 px-3 py-2',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      h: 'md',
+    },
+  }
+);
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    VariantProps<typeof inputVariants> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, variant, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(inputVariants({ variant }), className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/@/components/plate-ui/insert-dropdown-menu.tsx b/@/components/plate-ui/insert-dropdown-menu.tsx
new file mode 100644
index 0000000..31e7c97
--- /dev/null
+++ b/@/components/plate-ui/insert-dropdown-menu.tsx
@@ -0,0 +1,222 @@
+'use client';
+
+import React from 'react';
+import { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+import { ELEMENT_BLOCKQUOTE } from '@udecode/plate-block-quote';
+import {
+  focusEditor,
+  insertEmptyElement,
+  useEditorState,
+} from '@udecode/plate-common';
+import { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3 } from '@udecode/plate-heading';
+import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
+
+import { Icons } from './icons';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  useOpenState,
+} from './dropdown-menu';
+import { ToolbarButton } from './toolbar';
+
+const items = [
+  {
+    label: 'Basic blocks',
+    items: [
+      {
+        value: ELEMENT_PARAGRAPH,
+        label: 'Paragraph',
+        description: 'Paragraph',
+        icon: Icons.paragraph,
+      },
+      {
+        value: ELEMENT_H1,
+        label: 'Heading 1',
+        description: 'Heading 1',
+        icon: Icons.h1,
+      },
+      {
+        value: ELEMENT_H2,
+        label: 'Heading 2',
+        description: 'Heading 2',
+        icon: Icons.h2,
+      },
+      {
+        value: ELEMENT_H3,
+        label: 'Heading 3',
+        description: 'Heading 3',
+        icon: Icons.h3,
+      },
+      {
+        value: ELEMENT_BLOCKQUOTE,
+        label: 'Quote',
+        description: 'Quote (⌘+⇧+.)',
+        icon: Icons.blockquote,
+      },
+      // {
+      //   value: ELEMENT_TABLE,
+      //   label: 'Table',
+      //   description: 'Table',
+      //   icon: Icons.table,
+      // },
+      // {
+      //   value: 'ul',
+      //   label: 'Bulleted list',
+      //   description: 'Bulleted list',
+      //   icon: Icons.ul,
+      // },
+      // {
+      //   value: 'ol',
+      //   label: 'Numbered list',
+      //   description: 'Numbered list',
+      //   icon: Icons.ol,
+      // },
+      // {
+      //   value: ELEMENT_HR,
+      //   label: 'Divider',
+      //   description: 'Divider (---)',
+      //   icon: Icons.hr,
+      // },
+    ],
+  },
+  // {
+  //   label: 'Media',
+  //   items: [
+  //     {
+  //       value: ELEMENT_CODE_BLOCK,
+  //       label: 'Code',
+  //       description: 'Code (```)',
+  //       icon: Icons.codeblock,
+  //     },
+  //     {
+  //       value: ELEMENT_IMAGE,
+  //       label: 'Image',
+  //       description: 'Image',
+  //       icon: Icons.image,
+  //     },
+  //     {
+  //       value: ELEMENT_MEDIA_EMBED,
+  //       label: 'Embed',
+  //       description: 'Embed',
+  //       icon: Icons.embed,
+  //     },
+  //     {
+  //       value: ELEMENT_EXCALIDRAW,
+  //       label: 'Excalidraw',
+  //       description: 'Excalidraw',
+  //       icon: Icons.excalidraw,
+  //     },
+  //   ],
+  // },
+  // {
+  //   label: 'Inline',
+  //   items: [
+  //     {
+  //       value: ELEMENT_LINK,
+  //       label: 'Link',
+  //       description: 'Link',
+  //       icon: Icons.link,
+  //     },
+  //   ],
+  // },
+];
+
+export function InsertDropdownMenu(props: DropdownMenuProps) {
+  const editor = useEditorState();
+  const openState = useOpenState();
+
+  return (
+    <DropdownMenu modal={false} {...openState} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton pressed={openState.open} tooltip="Insert" isDropdown>
+          <Icons.add />
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        align="start"
+        className="flex max-h-[500px] min-w-0 flex-col gap-0.5 overflow-y-auto"
+      >
+        {items.map(({ items: nestedItems, label }, index) => (
+          <React.Fragment key={label}>
+            {index !== 0 && <DropdownMenuSeparator />}
+
+            <DropdownMenuLabel>{label}</DropdownMenuLabel>
+            {nestedItems.map(
+              ({ value: type, label: itemLabel, icon: Icon }) => (
+                <DropdownMenuItem
+                  key={type}
+                  className="min-w-[180px]"
+                  onSelect={async () => {
+                    switch (type) {
+                      // case ELEMENT_CODE_BLOCK: {
+                      //   insertEmptyCodeBlock(editor);
+                      //
+                      //   break;
+                      // }
+                      // case ELEMENT_IMAGE: {
+                      //   await insertMedia(editor, { type: ELEMENT_IMAGE });
+                      //
+                      //   break;
+                      // }
+                      // case ELEMENT_MEDIA_EMBED: {
+                      //   await insertMedia(editor, {
+                      //     type: ELEMENT_MEDIA_EMBED,
+                      //   });
+                      //
+                      //   break;
+                      // }
+                      // case 'ul':
+                      // case 'ol': {
+                      //   insertEmptyElement(editor, ELEMENT_PARAGRAPH, {
+                      //     select: true,
+                      //     nextBlock: true,
+                      //   });
+                      //
+                      //   if (settingsStore.get.checkedId(KEY_LIST_STYLE_TYPE)) {
+                      //     toggleIndentList(editor, {
+                      //       listStyleType: type === 'ul' ? 'disc' : 'decimal',
+                      //     });
+                      //   } else if (settingsStore.get.checkedId('list')) {
+                      //     toggleList(editor, { type });
+                      //   }
+                      //
+                      //   break;
+                      // }
+                      // case ELEMENT_TABLE: {
+                      //   insertTable(editor);
+                      //
+                      //   break;
+                      // }
+                      // case ELEMENT_LINK: {
+                      //   triggerFloatingLink(editor, { focused: true });
+                      //
+                      //   break;
+                      // }
+                      default: {
+                        insertEmptyElement(editor, type, {
+                          select: true,
+                          nextBlock: true,
+                        });
+                      }
+                    }
+
+                    focusEditor(editor);
+                  }}
+                >
+                  <Icon className="mr-2 h-5 w-5" />
+                  {itemLabel}
+                </DropdownMenuItem>
+              )
+            )}
+          </React.Fragment>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/@/components/plate-ui/kbd-leaf.tsx b/@/components/plate-ui/kbd-leaf.tsx
new file mode 100644
index 0000000..c4e8157
--- /dev/null
+++ b/@/components/plate-ui/kbd-leaf.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { PlateLeaf, PlateLeafProps } from '@udecode/plate-common';
+
+import { cn } from '../../lib/utils';
+
+export function KbdLeaf({ className, children, ...props }: PlateLeafProps) {
+  return (
+    <PlateLeaf
+      asChild
+      className={cn(
+        'rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-sm shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(248,_249,_250)_0px_1px_5px_0px_inset,_rgb(193,_200,_205)_0px_0px_0px_0.5px,_rgb(193,_200,_205)_0px_2px_1px_-1px,_rgb(193,_200,_205)_0px_1px_0px_0px] dark:shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(26,_29,_30)_0px_1px_5px_0px_inset,_rgb(76,_81,_85)_0px_0px_0px_0.5px,_rgb(76,_81,_85)_0px_2px_1px_-1px,_rgb(76,_81,_85)_0px_1px_0px_0px]',
+        className
+      )}
+      {...props}
+    >
+      <kbd>{children}</kbd>
+    </PlateLeaf>
+  );
+}
diff --git a/@/components/plate-ui/link-element.tsx b/@/components/plate-ui/link-element.tsx
new file mode 100644
index 0000000..00acc10
--- /dev/null
+++ b/@/components/plate-ui/link-element.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';
+import { TLinkElement, useLink } from '@udecode/plate-link';
+
+import { cn } from '../../lib/utils';
+
+const LinkElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps<Value, TLinkElement>
+>(({ className, children, ...props }, ref) => {
+  const { props: linkProps } = useLink({ element: props.element });
+
+  return (
+    <PlateElement
+      asChild
+      ref={ref}
+      className={cn(
+        'font-medium text-primary underline decoration-primary underline-offset-4',
+        className
+      )}
+      {...linkProps}
+      {...(props as any)}
+    >
+      <a>{children}</a>
+    </PlateElement>
+  );
+});
+LinkElement.displayName = 'LinkElement';
+
+export { LinkElement };
diff --git a/@/components/plate-ui/link-floating-toolbar.tsx b/@/components/plate-ui/link-floating-toolbar.tsx
new file mode 100644
index 0000000..4c3f61f
--- /dev/null
+++ b/@/components/plate-ui/link-floating-toolbar.tsx
@@ -0,0 +1,158 @@
+'use client';
+
+import React from 'react';
+import {
+  flip,
+  offset,
+  UseVirtualFloatingOptions,
+} from '@udecode/plate-floating';
+import {
+  FloatingLinkUrlInput,
+  LinkFloatingToolbarState,
+  LinkOpenButton,
+  useFloatingLinkEdit,
+  useFloatingLinkEditState,
+  useFloatingLinkInsert,
+  useFloatingLinkInsertState,
+} from '@udecode/plate-link';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+
+import { buttonVariants } from './button';
+import { inputVariants } from './input';
+import { popoverVariants } from './popover';
+import { Separator } from './separator';
+
+const floatingOptions: UseVirtualFloatingOptions = {
+  placement: 'bottom-start',
+  middleware: [
+    offset(12),
+    flip({
+      padding: 12,
+      fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],
+    }),
+  ],
+};
+
+export interface LinkFloatingToolbarProps {
+  state?: LinkFloatingToolbarState;
+}
+
+export function LinkFloatingToolbar({ state }: LinkFloatingToolbarProps) {
+  const insertState = useFloatingLinkInsertState({
+    ...state,
+    floatingOptions: {
+      ...floatingOptions,
+      ...state?.floatingOptions,
+    },
+  });
+  const {
+    props: insertProps,
+    ref: insertRef,
+    hidden,
+    textInputProps,
+  } = useFloatingLinkInsert(insertState);
+
+  const editState = useFloatingLinkEditState({
+    ...state,
+    floatingOptions: {
+      ...floatingOptions,
+      ...state?.floatingOptions,
+    },
+  });
+  const {
+    props: editProps,
+    ref: editRef,
+    editButtonProps,
+    unlinkButtonProps,
+  } = useFloatingLinkEdit(editState);
+
+  if (hidden) return null;
+
+  const input = (
+    <div className="flex w-[330px] flex-col">
+      <div className="flex items-center">
+        <div className="flex items-center pl-3 text-muted-foreground">
+          <Icons.link className="h-4 w-4" />
+        </div>
+
+        <FloatingLinkUrlInput
+          className={inputVariants({ variant: 'ghost', h: 'sm' })}
+          placeholder="Paste link"
+        />
+      </div>
+
+      <Separator />
+
+      <div className="flex items-center">
+        <div className="flex items-center pl-3 text-muted-foreground">
+          <Icons.text className="h-4 w-4" />
+        </div>
+        <input
+          className={inputVariants({ variant: 'ghost', h: 'sm' })}
+          placeholder="Text to display"
+          {...textInputProps}
+        />
+      </div>
+    </div>
+  );
+
+  const editContent = editState.isEditing ? (
+    input
+  ) : (
+    <div className="box-content flex h-9 items-center gap-1">
+      <button
+        type="button"
+        className={buttonVariants({ variant: 'ghost', size: 'sm' })}
+        {...editButtonProps}
+      >
+        Edit link
+      </button>
+
+      <Separator orientation="vertical" />
+
+      <LinkOpenButton
+        className={buttonVariants({
+          variant: 'ghost',
+          size: 'sms',
+        })}
+      >
+        <Icons.externalLink width={18} />
+      </LinkOpenButton>
+
+      <Separator orientation="vertical" />
+
+      <button
+        type="button"
+        className={buttonVariants({
+          variant: 'ghost',
+          size: 'sms',
+        })}
+        {...unlinkButtonProps}
+      >
+        <Icons.unlink width={18} />
+      </button>
+    </div>
+  );
+
+  return (
+    <>
+      <div
+        ref={insertRef}
+        className={cn(popoverVariants(), 'w-auto p-1')}
+        {...insertProps}
+      >
+        {input}
+      </div>
+
+      <div
+        ref={editRef}
+        className={cn(popoverVariants(), 'w-auto p-1')}
+        {...editProps}
+      >
+        {editContent}
+      </div>
+    </>
+  );
+}
diff --git a/@/components/plate-ui/mark-toolbar-button.tsx b/@/components/plate-ui/mark-toolbar-button.tsx
new file mode 100644
index 0000000..dfc3edf
--- /dev/null
+++ b/@/components/plate-ui/mark-toolbar-button.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import React from 'react';
+import {
+  useMarkToolbarButton,
+  useMarkToolbarButtonState,
+} from '@udecode/plate-common';
+
+import { ToolbarButton, ToolbarButtonProps } from './toolbar';
+
+export interface MarkToolbarButtonProps
+  extends Pick<ToolbarButtonProps, 'tooltip' | 'children'> {
+  nodeType: string;
+  clear?: string | string[];
+}
+
+/**
+ * Toolbar button to toggle the mark of the leaves in selection.
+ */
+export function MarkToolbarButton({
+  clear,
+  nodeType,
+  ...props
+}: MarkToolbarButtonProps) {
+  const state = useMarkToolbarButtonState({ clear, nodeType });
+  const { props: buttonProps } = useMarkToolbarButton(state);
+
+  return <ToolbarButton {...buttonProps} {...props} />;
+}
diff --git a/@/components/plate-ui/media-embed-element.tsx b/@/components/plate-ui/media-embed-element.tsx
new file mode 100644
index 0000000..3159515
--- /dev/null
+++ b/@/components/plate-ui/media-embed-element.tsx
@@ -0,0 +1,141 @@
+import React from 'react';
+import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';
+import {
+  ELEMENT_MEDIA_EMBED,
+  parseTwitterUrl,
+  parseVideoUrl,
+  TMediaEmbedElement,
+  useMediaState,
+} from '@udecode/plate-media';
+import { useResizableStore } from '@udecode/plate-resizable';
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import { Tweet } from 'react-tweet';
+
+import { cn } from '../../lib/utils';
+
+import { Caption, CaptionTextarea } from './caption';
+import { MediaPopover } from './media-popover';
+import {
+  mediaResizeHandleVariants,
+  Resizable,
+  ResizeHandle,
+} from './resizable';
+
+const MediaEmbedElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps<Value, TMediaEmbedElement>
+>(({ className, children, ...props }, ref) => {
+  const {
+    align = 'center',
+    focused,
+    readOnly,
+    selected,
+    embed,
+    isTweet,
+    isVideo,
+    isYoutube,
+  } = useMediaState({
+    urlParsers: [parseTwitterUrl, parseVideoUrl],
+  });
+  const width = useResizableStore().get.width();
+  const provider = embed?.provider;
+
+  return (
+    <MediaPopover pluginKey={ELEMENT_MEDIA_EMBED}>
+      <PlateElement
+        ref={ref}
+        className={cn('relative py-2.5', className)}
+        {...props}
+      >
+        <figure className="group relative m-0 w-full" contentEditable={false}>
+          <Resizable
+            align={align}
+            options={{
+              align,
+              maxWidth: isTweet ? 550 : '100%',
+              minWidth: isTweet ? 300 : 100,
+            }}
+          >
+            <ResizeHandle
+              options={{ direction: 'left' }}
+              className={mediaResizeHandleVariants({ direction: 'left' })}
+            />
+
+            {isVideo ? (
+              isYoutube ? (
+                <LiteYouTubeEmbed
+                  id={embed!.id!}
+                  title="youtube"
+                  wrapperClass={cn(
+                    'rounded-sm',
+                    focused && selected && 'ring-2 ring-ring ring-offset-2',
+                    'relative block cursor-pointer bg-black bg-cover bg-center [contain:content]',
+                    '[&.lyt-activated]:before:absolute [&.lyt-activated]:before:top-0 [&.lyt-activated]:before:h-[60px] [&.lyt-activated]:before:w-full [&.lyt-activated]:before:bg-top [&.lyt-activated]:before:bg-repeat-x [&.lyt-activated]:before:pb-[50px] [&.lyt-activated]:before:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]',
+                    '[&.lyt-activated]:before:bg-[url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==)]',
+                    'after:block after:pb-[var(--aspect-ratio)] after:content-[""]',
+                    '[&_>_iframe]:absolute [&_>_iframe]:left-0 [&_>_iframe]:top-0 [&_>_iframe]:h-full [&_>_iframe]:w-full',
+                    '[&_>_.lty-playbtn]:z-[1] [&_>_.lty-playbtn]:h-[46px] [&_>_.lty-playbtn]:w-[70px] [&_>_.lty-playbtn]:rounded-[14%] [&_>_.lty-playbtn]:bg-[#212121] [&_>_.lty-playbtn]:opacity-80 [&_>_.lty-playbtn]:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]',
+                    '[&:hover_>_.lty-playbtn]:bg-[red] [&:hover_>_.lty-playbtn]:opacity-100',
+                    '[&_>_.lty-playbtn]:before:border-y-[11px] [&_>_.lty-playbtn]:before:border-l-[19px] [&_>_.lty-playbtn]:before:border-r-0 [&_>_.lty-playbtn]:before:border-[transparent_transparent_transparent_#fff] [&_>_.lty-playbtn]:before:content-[""]',
+                    '[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]',
+                    '[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:[transform:translate3d(-50%,-50%,0)]',
+                    '[&.lyt-activated]:cursor-[unset]',
+                    '[&.lyt-activated]:before:pointer-events-none [&.lyt-activated]:before:opacity-0',
+                    '[&.lyt-activated_>_.lty-playbtn]:pointer-events-none [&.lyt-activated_>_.lty-playbtn]:!opacity-0'
+                  )}
+                />
+              ) : (
+                <div
+                  className={cn(
+                    provider === 'vimeo' && 'pb-[75%]',
+                    provider === 'youku' && 'pb-[56.25%]',
+                    provider === 'dailymotion' && 'pb-[56.0417%]',
+                    provider === 'coub' && 'pb-[51.25%]'
+                  )}
+                >
+                  <iframe
+                    className={cn(
+                      'absolute left-0 top-0 h-full w-full rounded-sm',
+                      isVideo && 'border-0',
+                      focused && selected && 'ring-2 ring-ring ring-offset-2'
+                    )}
+                    src={embed!.url}
+                    title="embed"
+                    allowFullScreen
+                  />
+                </div>
+              )
+            ) : null}
+
+            {isTweet && (
+              <div
+                className={cn(
+                  '[&_.react-tweet-theme]:my-0',
+                  !readOnly &&
+                    selected &&
+                    '[&_.react-tweet-theme]:ring-2 [&_.react-tweet-theme]:ring-ring [&_.react-tweet-theme]:ring-offset-2'
+                )}
+              >
+                <Tweet id={embed!.id!} />
+              </div>
+            )}
+
+            <ResizeHandle
+              options={{ direction: 'right' }}
+              className={mediaResizeHandleVariants({ direction: 'right' })}
+            />
+          </Resizable>
+
+          <Caption align={align} style={{ width }}>
+            <CaptionTextarea placeholder="Write a caption..." />
+          </Caption>
+        </figure>
+
+        {children}
+      </PlateElement>
+    </MediaPopover>
+  );
+});
+MediaEmbedElement.displayName = 'MediaEmbedElement';
+
+export { MediaEmbedElement };
diff --git a/@/components/plate-ui/media-popover.tsx b/@/components/plate-ui/media-popover.tsx
new file mode 100644
index 0000000..90fddf3
--- /dev/null
+++ b/@/components/plate-ui/media-popover.tsx
@@ -0,0 +1,89 @@
+import React, { useEffect } from 'react';
+import {
+  isCollapsed,
+  useEditorState,
+  useElement,
+  useRemoveNodeButton,
+} from '@udecode/plate-common';
+import {
+  floatingMediaActions,
+  FloatingMedia as FloatingMediaPrimitive,
+  useFloatingMediaSelectors,
+} from '@udecode/plate-media';
+import { useReadOnly, useSelected } from 'slate-react';
+
+import { Icons } from './icons';
+
+import { Button, buttonVariants } from './button';
+import { inputVariants } from './input';
+import { Popover, PopoverAnchor, PopoverContent } from './popover';
+import { Separator } from './separator';
+
+export interface MediaPopoverProps {
+  pluginKey?: string;
+  children: React.ReactNode;
+}
+
+export function MediaPopover({ pluginKey, children }: MediaPopoverProps) {
+  const readOnly = useReadOnly();
+  const selected = useSelected();
+  const editor = useEditorState();
+
+  const isOpen = !readOnly && selected && isCollapsed(editor.selection);
+  const isEditing = useFloatingMediaSelectors().isEditing();
+
+  useEffect(() => {
+    if (!isOpen && isEditing) {
+      floatingMediaActions.isEditing(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
+  const element = useElement();
+  const { props: buttonProps } = useRemoveNodeButton({ element });
+
+  if (readOnly) return <>{children}</>;
+
+  return (
+    <Popover open={isOpen} modal={false}>
+      <PopoverAnchor>{children}</PopoverAnchor>
+
+      <PopoverContent
+        className="w-auto p-1"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        {isEditing ? (
+          <div className="flex w-[330px] flex-col">
+            <div className="flex items-center">
+              <div className="flex items-center pl-3 text-muted-foreground">
+                <Icons.link className="h-4 w-4" />
+              </div>
+
+              <FloatingMediaPrimitive.UrlInput
+                className={inputVariants({ variant: 'ghost', h: 'sm' })}
+                placeholder="Paste the embed link..."
+                options={{
+                  pluginKey,
+                }}
+              />
+            </div>
+          </div>
+        ) : (
+          <div className="box-content flex h-9 items-center gap-1">
+            <FloatingMediaPrimitive.EditButton
+              className={buttonVariants({ variant: 'ghost', size: 'sm' })}
+            >
+              Edit link
+            </FloatingMediaPrimitive.EditButton>
+
+            <Separator orientation="vertical" className="my-1" />
+
+            <Button variant="ghost" size="sms" {...buttonProps}>
+              <Icons.delete className="h-4 w-4" />
+            </Button>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/@/components/plate-ui/mention-combobox.tsx b/@/components/plate-ui/mention-combobox.tsx
new file mode 100644
index 0000000..e2d65f2
--- /dev/null
+++ b/@/components/plate-ui/mention-combobox.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { ComboboxProps, Data, NoData } from '@udecode/plate-combobox';
+import { getPluginOptions, useEditorRef } from '@udecode/plate-common';
+import {
+  ELEMENT_MENTION,
+  getMentionOnSelectItem,
+  MentionPlugin,
+} from '@udecode/plate-mention';
+
+import { Combobox } from './combobox';
+
+export interface MentionComboboxProps<TData extends Data = NoData>
+  extends Partial<ComboboxProps<TData>> {
+  pluginKey?: string;
+}
+
+export function MentionCombobox<TData extends Data = NoData>({
+  pluginKey = ELEMENT_MENTION,
+  id = pluginKey,
+  ...props
+}: MentionComboboxProps<TData>) {
+  const editor = useEditorRef();
+
+  const { trigger } = getPluginOptions<MentionPlugin>(editor, pluginKey);
+
+  return (
+    <Combobox
+      id={id}
+      trigger={trigger!}
+      controlled
+      onSelectItem={getMentionOnSelectItem({
+        key: pluginKey,
+      })}
+      {...props}
+    />
+  );
+}
diff --git a/@/components/plate-ui/mention-element.tsx b/@/components/plate-ui/mention-element.tsx
new file mode 100644
index 0000000..9a05d93
--- /dev/null
+++ b/@/components/plate-ui/mention-element.tsx
@@ -0,0 +1,57 @@
+import React, { forwardRef } from 'react';
+import {
+  getHandler,
+  PlateElement,
+  PlateElementProps,
+  Value,
+} from '@udecode/plate-common';
+import { TMentionElement } from '@udecode/plate-mention';
+import { useFocused, useSelected } from 'slate-react';
+
+import { cn } from '../../lib/utils';
+
+export interface MentionElementProps
+  extends PlateElementProps<Value, TMentionElement> {
+  /**
+   * Prefix rendered before mention
+   */
+  prefix?: string;
+  onClick?: (mentionNode: any) => void;
+  renderLabel?: (mentionable: TMentionElement) => string;
+}
+
+const MentionElement = forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  MentionElementProps
+>(({ prefix, renderLabel, className, onClick, ...props }, ref) => {
+  const { children, element } = props;
+
+  const selected = useSelected();
+  const focused = useFocused();
+
+  return (
+    <PlateElement
+      ref={ref}
+      className={cn(
+        'inline-block cursor-pointer rounded-md bg-muted px-1.5 py-0.5 align-baseline text-sm font-medium',
+        selected && focused && 'ring-2 ring-ring',
+        element.children[0].bold === true && 'font-bold',
+        element.children[0].italic === true && 'italic',
+        element.children[0].underline === true && 'underline',
+        className
+      )}
+      data-slate-value={element.value}
+      contentEditable={false}
+      onClick={getHandler(onClick, element)}
+      {...props}
+    >
+      {prefix}
+      {renderLabel ? renderLabel(element) : element.value}
+      {children}
+    </PlateElement>
+  );
+});
+
+MentionElement.displayName = 'MentionElement';
+
+export { MentionElement };
diff --git a/@/components/plate-ui/mention-input-element.tsx b/@/components/plate-ui/mention-input-element.tsx
new file mode 100644
index 0000000..fe2402f
--- /dev/null
+++ b/@/components/plate-ui/mention-input-element.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  getHandler,
+  PlateElement,
+  PlateElementProps,
+  Value,
+} from '@udecode/plate-common';
+import { TMentionElement } from '@udecode/plate-mention';
+import { useFocused, useSelected } from 'slate-react';
+
+import { cn } from '../../lib/utils';
+
+export interface MentionInputElementProps
+  extends PlateElementProps<Value, TMentionElement> {
+  onClick?: (mentionNode: any) => void;
+}
+
+const MentionInputElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  MentionInputElementProps
+>(({ className, onClick, ...props }, ref) => {
+  const { children, element } = props;
+
+  const selected = useSelected();
+  const focused = useFocused();
+
+  return (
+    <PlateElement
+      asChild
+      ref={ref}
+      data-slate-value={element.value}
+      className={cn(
+        'inline-block rounded-md bg-muted px-1.5 py-0.5 align-baseline text-sm',
+        selected && focused && 'ring-2 ring-ring',
+        className
+      )}
+      onClick={getHandler(onClick, element)}
+      {...props}
+    >
+      <span>{children}</span>
+    </PlateElement>
+  );
+});
+MentionInputElement.displayName = 'MentionInputElement';
+
+export { MentionInputElement };
diff --git a/@/components/plate-ui/mode-dropdown-menu.tsx b/@/components/plate-ui/mode-dropdown-menu.tsx
new file mode 100644
index 0000000..b34c4f6
--- /dev/null
+++ b/@/components/plate-ui/mode-dropdown-menu.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+import {
+  focusEditor,
+  useEditorReadOnly,
+  useEditorState,
+  usePlateStore,
+} from '@udecode/plate-common';
+
+import { Icons } from './icons';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  useOpenState,
+} from './dropdown-menu';
+import { ToolbarButton } from './toolbar';
+
+export function ModeDropdownMenu(props: DropdownMenuProps) {
+  const editor = useEditorState();
+  const setReadOnly = usePlateStore().set.readOnly();
+  const readOnly = useEditorReadOnly();
+  const openState = useOpenState();
+
+  let value = 'editing';
+  if (readOnly) value = 'viewing';
+
+  const item: any = {
+    editing: (
+      <>
+        <Icons.editing className="mr-2 h-5 w-5" />
+        <span className="hidden lg:inline">Editing</span>
+      </>
+    ),
+    viewing: (
+      <>
+        <Icons.viewing className="mr-2 h-5 w-5" />
+        <span className="hidden lg:inline">Viewing</span>
+      </>
+    ),
+  };
+
+  return (
+    <DropdownMenu modal={false} {...openState} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton
+          pressed={openState.open}
+          tooltip="Editing mode"
+          isDropdown
+          className="min-w-[auto] lg:min-w-[130px]"
+        >
+          {item[value]}
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="start" className="min-w-[180px]">
+        <DropdownMenuRadioGroup
+          className="flex flex-col gap-0.5"
+          value={value}
+          onValueChange={(newValue) => {
+            if (newValue !== 'viewing') {
+              setReadOnly(false);
+            }
+
+            if (newValue === 'viewing') {
+              setReadOnly(true);
+              return;
+            }
+
+            if (newValue === 'editing') {
+              focusEditor(editor);
+              return;
+            }
+          }}
+        >
+          <DropdownMenuRadioItem value="editing">
+            {item.editing}
+          </DropdownMenuRadioItem>
+
+          <DropdownMenuRadioItem value="viewing">
+            {item.viewing}
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/@/components/plate-ui/more-dropdown-menu.tsx b/@/components/plate-ui/more-dropdown-menu.tsx
new file mode 100644
index 0000000..c54168b
--- /dev/null
+++ b/@/components/plate-ui/more-dropdown-menu.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+import { MARK_SUBSCRIPT, MARK_SUPERSCRIPT } from '@udecode/plate-basic-marks';
+import { focusEditor, toggleMark, useEditorState } from '@udecode/plate-common';
+
+import { Icons } from './icons';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  useOpenState,
+} from './dropdown-menu';
+import { ToolbarButton } from './toolbar';
+
+export function MoreDropdownMenu(props: DropdownMenuProps) {
+  const editor = useEditorState();
+  const openState = useOpenState();
+
+  return (
+    <DropdownMenu modal={false} {...openState} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton pressed={openState.open} tooltip="Insert">
+          <Icons.more />
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        align="start"
+        className="flex max-h-[500px] min-w-[180px] flex-col gap-0.5 overflow-y-auto"
+      >
+        <DropdownMenuItem
+          onSelect={() => {
+            toggleMark(editor, {
+              key: MARK_SUBSCRIPT,
+              clear: MARK_SUPERSCRIPT,
+            });
+            focusEditor(editor);
+          }}
+        >
+          <Icons.superscript className="mr-2 h-5 w-5" />
+          Superscript
+          {/* (⌘+,) */}
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onSelect={() => {
+            toggleMark(editor, {
+              key: MARK_SUPERSCRIPT,
+              clear: MARK_SUBSCRIPT,
+            });
+            focusEditor(editor);
+          }}
+        >
+          <Icons.subscript className="mr-2 h-5 w-5" />
+          Subscript
+          {/* (⌘+.) */}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/@/components/plate-ui/paragraph-element.tsx b/@/components/plate-ui/paragraph-element.tsx
new file mode 100644
index 0000000..81285b6
--- /dev/null
+++ b/@/components/plate-ui/paragraph-element.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { PlateElement, PlateElementProps } from '@udecode/plate-common';
+
+import { cn } from '../../lib/utils';
+
+const ParagraphElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ className, children, ...props }: PlateElementProps, ref) => {
+  return (
+    <PlateElement
+      ref={ref}
+      className={cn('m-0 px-0 py-1', className)}
+      {...props}
+    >
+      {children}
+    </PlateElement>
+  );
+});
+ParagraphElement.displayName = 'ParagraphElement';
+
+export { ParagraphElement };
diff --git a/@/components/plate-ui/placeholder.tsx b/@/components/plate-ui/placeholder.tsx
new file mode 100644
index 0000000..849a124
--- /dev/null
+++ b/@/components/plate-ui/placeholder.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import {
+  createNodeHOC,
+  createNodesHOC,
+  PlaceholderProps,
+  usePlaceholderState,
+} from '@udecode/plate-common';
+import { ELEMENT_H1 } from '@udecode/plate-heading';
+import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
+
+import { cn } from '../../lib/utils';
+
+export const Placeholder = (props: PlaceholderProps) => {
+  const { children, placeholder, nodeProps } = props;
+
+  const { enabled } = usePlaceholderState(props);
+
+  return React.Children.map(children, (child) => {
+    return React.cloneElement(child, {
+      className: child.props.className,
+      nodeProps: {
+        ...nodeProps,
+        className: cn(
+          enabled &&
+            'before:absolute before:cursor-text before:opacity-30 before:content-[attr(placeholder)]'
+        ),
+        placeholder,
+      },
+    });
+  });
+};
+
+export const withPlaceholder = createNodeHOC(Placeholder);
+export const withPlaceholdersPrimitive = createNodesHOC(Placeholder);
+
+export const withPlaceholders = (components: any) =>
+  withPlaceholdersPrimitive(components, [
+    {
+      key: ELEMENT_PARAGRAPH,
+      placeholder: 'Type a paragraph',
+      hideOnBlur: true,
+      query: {
+        maxLevel: 1,
+      },
+    },
+    {
+      key: ELEMENT_H1,
+      placeholder: 'Untitled',
+      hideOnBlur: false,
+    },
+  ]);
diff --git a/@/components/plate-ui/popover.tsx b/@/components/plate-ui/popover.tsx
new file mode 100644
index 0000000..4b64b90
--- /dev/null
+++ b/@/components/plate-ui/popover.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+export const popoverVariants = cva(
+  'w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 print:hidden'
+);
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, style, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(popoverVariants(), className)}
+      style={{ zIndex: 1000, ...style }}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent };
diff --git a/@/components/plate-ui/resizable.tsx b/@/components/plate-ui/resizable.tsx
new file mode 100644
index 0000000..06dae96
--- /dev/null
+++ b/@/components/plate-ui/resizable.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import React, { ComponentProps } from 'react';
+import {
+  Resizable as ResizablePrimitive,
+  ResizeHandle as ResizeHandlePrimitive,
+} from '@udecode/plate-resizable';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+export const mediaResizeHandleVariants = cva(
+  cn(
+    'top-0 flex w-6 select-none flex-col justify-center',
+    "after:flex after:h-16 after:w-[3px] after:rounded-[6px] after:bg-ring after:opacity-0 after:content-['_'] group-hover:after:opacity-100"
+  ),
+  {
+    variants: {
+      direction: {
+        left: '-left-3 -ml-3 pl-3',
+        right: '-right-3 -mr-3 items-end pr-3',
+      },
+    },
+  }
+);
+
+const resizeHandleVariants = cva(cn('absolute z-40'), {
+  variants: {
+    direction: {
+      left: 'h-full cursor-col-resize',
+      right: 'h-full cursor-col-resize',
+      top: 'w-full cursor-row-resize',
+      bottom: 'w-full cursor-row-resize',
+    },
+  },
+});
+
+const ResizeHandle = React.forwardRef<
+  React.ElementRef<typeof ResizeHandlePrimitive>,
+  ComponentProps<typeof ResizeHandlePrimitive> &
+    Omit<VariantProps<typeof resizeHandleVariants>, 'direction'>
+>(({ className, ...props }, ref) => (
+  <ResizeHandlePrimitive
+    ref={ref}
+    className={cn(
+      resizeHandleVariants({ direction: props.options?.direction }),
+      className
+    )}
+    {...props}
+  />
+));
+ResizeHandle.displayName = 'ResizeHandle';
+
+const resizableVariants = cva('', {
+  variants: {
+    align: {
+      left: 'mr-auto',
+      center: 'mx-auto',
+      right: 'ml-auto',
+    },
+  },
+});
+
+const Resizable = React.forwardRef<
+  React.ElementRef<typeof ResizablePrimitive>,
+  ComponentProps<typeof ResizablePrimitive> &
+    VariantProps<typeof resizableVariants>
+>(({ className, align, ...props }, ref) => (
+  <ResizablePrimitive
+    ref={ref}
+    className={cn(resizableVariants({ align }), className)}
+    {...props}
+  />
+));
+Resizable.displayName = 'Resizable';
+
+export { Resizable, ResizeHandle };
diff --git a/@/components/plate-ui/separator.tsx b/@/components/plate-ui/separator.tsx
new file mode 100644
index 0000000..3d43af8
--- /dev/null
+++ b/@/components/plate-ui/separator.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from '../../lib/utils';
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/@/components/plate-ui/table-cell-element.tsx b/@/components/plate-ui/table-cell-element.tsx
new file mode 100644
index 0000000..be358de
--- /dev/null
+++ b/@/components/plate-ui/table-cell-element.tsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';
+import {
+  TTableCellElement,
+  useTableCellElement,
+  useTableCellElementResizable,
+  useTableCellElementResizableState,
+  useTableCellElementState,
+} from '@udecode/plate-table';
+
+import { cn } from '../../lib/utils';
+
+import { ResizeHandle } from './resizable';
+
+export interface TableCellElementProps
+  extends PlateElementProps<Value, TTableCellElement> {
+  hideBorder?: boolean;
+  isHeader?: boolean;
+}
+
+const TableCellElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  TableCellElementProps
+>(({ children, className, style, hideBorder, isHeader, ...props }, ref) => {
+  const { element } = props;
+
+  const {
+    colIndex,
+    rowIndex,
+    readOnly,
+    selected,
+    hovered,
+    hoveredLeft,
+    rowSize,
+    borders,
+    isSelectingCell,
+  } = useTableCellElementState();
+  const { props: cellProps } = useTableCellElement({ element: props.element });
+  const resizableState = useTableCellElementResizableState({
+    colIndex,
+    rowIndex,
+  });
+  const { rightProps, bottomProps, leftProps, hiddenLeft } =
+    useTableCellElementResizable(resizableState);
+
+  const Cell = isHeader ? 'th' : 'td';
+
+  return (
+    <PlateElement
+      asChild
+      ref={ref}
+      className={cn(
+        'relative overflow-visible border-none bg-background p-0',
+        hideBorder && 'before:border-none',
+        element.background ? 'bg-[--cellBackground]' : 'bg-background',
+        !hideBorder &&
+          cn(
+            isHeader && 'text-left [&_>_*]:m-0',
+            'before:h-full before:w-full',
+            selected && 'before:z-10 before:bg-muted',
+            "before:absolute before:box-border before:select-none before:content-['']",
+            borders &&
+              cn(
+                borders.bottom?.size &&
+                  `before:border-b before:border-b-border`,
+                borders.right?.size && `before:border-r before:border-r-border`,
+                borders.left?.size && `before:border-l before:border-l-border`,
+                borders.top?.size && `before:border-t before:border-t-border`
+              )
+          ),
+        className
+      )}
+      {...cellProps}
+      {...props}
+      style={
+        {
+          '--cellBackground': element.background,
+          ...style,
+        } as React.CSSProperties
+      }
+    >
+      <Cell>
+        <div
+          className="relative z-20 box-border h-full px-3 py-2"
+          style={{
+            minHeight: rowSize,
+          }}
+        >
+          {children}
+        </div>
+
+        {!isSelectingCell && (
+          <div
+            className="group absolute top-0 h-full w-full select-none"
+            contentEditable={false}
+            suppressContentEditableWarning={true}
+          >
+            {!readOnly && (
+              <>
+                <ResizeHandle
+                  {...rightProps}
+                  className="-top-3 right-[-5px] w-[10px]"
+                />
+                <ResizeHandle
+                  {...bottomProps}
+                  className="bottom-[-5px] h-[10px]"
+                />
+                {!hiddenLeft && (
+                  <ResizeHandle
+                    {...leftProps}
+                    className="-top-3 left-[-5px] w-[10px]"
+                  />
+                )}
+
+                {hovered && (
+                  <div
+                    className={cn(
+                      'absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring',
+                      'right-[-1.5px]'
+                    )}
+                  />
+                )}
+                {hoveredLeft && (
+                  <div
+                    className={cn(
+                      'absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring',
+                      'left-[-1.5px]'
+                    )}
+                  />
+                )}
+              </>
+            )}
+          </div>
+        )}
+      </Cell>
+    </PlateElement>
+  );
+});
+TableCellElement.displayName = 'TableCellElement';
+
+const TableCellHeaderElement = React.forwardRef<
+  React.ElementRef<typeof TableCellElement>,
+  TableCellElementProps
+>((props, ref) => {
+  return <TableCellElement ref={ref} {...props} isHeader />;
+});
+TableCellHeaderElement.displayName = 'TableCellHeaderElement';
+
+export { TableCellElement, TableCellHeaderElement };
diff --git a/@/components/plate-ui/table-element.tsx b/@/components/plate-ui/table-element.tsx
new file mode 100644
index 0000000..05ecd09
--- /dev/null
+++ b/@/components/plate-ui/table-element.tsx
@@ -0,0 +1,195 @@
+import React, { forwardRef } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { PopoverAnchor, PopoverContentProps } from '@radix-ui/react-popover';
+import {
+  isCollapsed,
+  PlateElement,
+  PlateElementProps,
+  useEditorState,
+  useElement,
+  useRemoveNodeButton,
+} from '@udecode/plate-common';
+import {
+  TTableElement,
+  useTableBordersDropdownMenuContentState,
+  useTableElement,
+  useTableElementState,
+} from '@udecode/plate-table';
+import { useReadOnly, useSelected } from 'slate-react';
+
+import { cn } from '../../lib/utils';
+import { Icons, iconVariants } from './icons';
+
+import { Button } from './button';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+} from './dropdown-menu';
+import { Popover, PopoverContent, popoverVariants } from './popover';
+import { Separator } from './separator';
+
+const TableBordersDropdownMenuContent = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>((props, ref) => {
+  const {
+    getOnSelectTableBorder,
+    hasOuterBorders,
+    hasBottomBorder,
+    hasLeftBorder,
+    hasNoBorders,
+    hasRightBorder,
+    hasTopBorder,
+  } = useTableBordersDropdownMenuContentState();
+
+  return (
+    <DropdownMenuContent
+      ref={ref}
+      className={cn('min-w-[220px]')}
+      side="right"
+      align="start"
+      sideOffset={0}
+      {...props}
+    >
+      <DropdownMenuCheckboxItem
+        checked={hasBottomBorder}
+        onCheckedChange={getOnSelectTableBorder('bottom')}
+      >
+        <Icons.borderBottom className={iconVariants({ size: 'sm' })} />
+        <div>Bottom Border</div>
+      </DropdownMenuCheckboxItem>
+      <DropdownMenuCheckboxItem
+        checked={hasTopBorder}
+        onCheckedChange={getOnSelectTableBorder('top')}
+      >
+        <Icons.borderTop className={iconVariants({ size: 'sm' })} />
+        <div>Top Border</div>
+      </DropdownMenuCheckboxItem>
+      <DropdownMenuCheckboxItem
+        checked={hasLeftBorder}
+        onCheckedChange={getOnSelectTableBorder('left')}
+      >
+        <Icons.borderLeft className={iconVariants({ size: 'sm' })} />
+        <div>Left Border</div>
+      </DropdownMenuCheckboxItem>
+      <DropdownMenuCheckboxItem
+        checked={hasRightBorder}
+        onCheckedChange={getOnSelectTableBorder('right')}
+      >
+        <Icons.borderRight className={iconVariants({ size: 'sm' })} />
+        <div>Right Border</div>
+      </DropdownMenuCheckboxItem>
+
+      <Separator />
+
+      <DropdownMenuCheckboxItem
+        checked={hasNoBorders}
+        onCheckedChange={getOnSelectTableBorder('none')}
+      >
+        <Icons.borderNone className={iconVariants({ size: 'sm' })} />
+        <div>No Border</div>
+      </DropdownMenuCheckboxItem>
+      <DropdownMenuCheckboxItem
+        checked={hasOuterBorders}
+        onCheckedChange={getOnSelectTableBorder('outer')}
+      >
+        <Icons.borderAll className={iconVariants({ size: 'sm' })} />
+        <div>Outside Borders</div>
+      </DropdownMenuCheckboxItem>
+    </DropdownMenuContent>
+  );
+});
+TableBordersDropdownMenuContent.displayName = 'TableBordersDropdownMenuContent';
+
+const TableFloatingToolbar = React.forwardRef<
+  React.ElementRef<typeof PopoverContent>,
+  PopoverContentProps
+>(({ children, ...props }, ref) => {
+  const element = useElement<TTableElement>();
+  const { props: buttonProps } = useRemoveNodeButton({ element });
+
+  const readOnly = useReadOnly();
+  const selected = useSelected();
+  const editor = useEditorState();
+  const open = !readOnly && selected && isCollapsed(editor.selection);
+
+  return (
+    <Popover open={open} modal={false}>
+      <PopoverAnchor asChild>{children}</PopoverAnchor>
+      <PopoverContent
+        ref={ref}
+        className={cn(popoverVariants(), 'flex w-[220px] flex-col gap-1 p-1')}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        {...props}
+      >
+        <DropdownMenu modal={false}>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" isMenu>
+              <Icons.borderAll className="mr-2 h-4 w-4" />
+              Borders
+            </Button>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuPortal>
+            <TableBordersDropdownMenuContent />
+          </DropdownMenuPortal>
+        </DropdownMenu>
+
+        <Button contentEditable={false} variant="ghost" isMenu {...buttonProps}>
+          <Icons.delete className="mr-2 h-4 w-4" />
+          Delete
+        </Button>
+      </PopoverContent>
+    </Popover>
+  );
+});
+TableFloatingToolbar.displayName = 'TableFloatingToolbar';
+
+const TableElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ className, children, ...props }, ref) => {
+  const { colSizes, isSelectingCell, minColumnWidth, marginLeft } =
+    useTableElementState();
+  const { props: tableProps, colGroupProps } = useTableElement();
+
+  return (
+    <TableFloatingToolbar>
+      <div style={{ paddingLeft: marginLeft }}>
+        <PlateElement
+          asChild
+          ref={ref}
+          className={cn(
+            'my-4 ml-px mr-0 table h-px w-full table-fixed border-collapse',
+            isSelectingCell && '[&_*::selection]:bg-none',
+            className
+          )}
+          {...tableProps}
+          {...props}
+        >
+          <table>
+            <colgroup {...colGroupProps}>
+              {colSizes.map((width, index) => (
+                <col
+                  key={index}
+                  style={{
+                    minWidth: minColumnWidth,
+                    width: width || undefined,
+                  }}
+                />
+              ))}
+            </colgroup>
+
+            <tbody className="min-w-full">{children}</tbody>
+          </table>
+        </PlateElement>
+      </div>
+    </TableFloatingToolbar>
+  );
+});
+TableElement.displayName = 'TableElement';
+
+export { TableElement, TableFloatingToolbar, TableBordersDropdownMenuContent };
diff --git a/@/components/plate-ui/table-row-element.tsx b/@/components/plate-ui/table-row-element.tsx
new file mode 100644
index 0000000..77b9754
--- /dev/null
+++ b/@/components/plate-ui/table-row-element.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { PlateElement, PlateElementProps } from '@udecode/plate-common';
+
+import { cn } from '../../lib/utils';
+
+export interface PlateTableRowElementProps extends PlateElementProps {
+  hideBorder?: boolean;
+}
+
+const TableRowElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateTableRowElementProps
+>(({ hideBorder, children, ...props }, ref) => {
+  return (
+    <PlateElement
+      asChild
+      ref={ref}
+      className={cn('h-full', hideBorder && 'border-none')}
+      {...props}
+    >
+      <tr>{children}</tr>
+    </PlateElement>
+  );
+});
+TableRowElement.displayName = 'TableRowElement';
+
+export { TableRowElement };
diff --git a/@/components/plate-ui/todo-list-element.tsx b/@/components/plate-ui/todo-list-element.tsx
new file mode 100644
index 0000000..5efd270
--- /dev/null
+++ b/@/components/plate-ui/todo-list-element.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';
+import {
+  TTodoListItemElement,
+  useTodoListElement,
+  useTodoListElementState,
+} from '@udecode/plate-list';
+
+import { cn } from '../../lib/utils';
+
+import { Checkbox } from './checkbox';
+
+export type TodoListElementProps = PlateElementProps<
+  Value,
+  TTodoListItemElement
+>;
+
+export function TodoListElement({
+  className,
+  children,
+  ...props
+}: TodoListElementProps) {
+  const { element } = props;
+  const state = useTodoListElementState({ element });
+  const { checkboxProps } = useTodoListElement(state);
+
+  return (
+    <PlateElement className={cn('flex flex-row py-1', className)} {...props}>
+      <div
+        className="mr-1.5 flex select-none items-center justify-center"
+        contentEditable={false}
+      >
+        <Checkbox {...checkboxProps} />
+      </div>
+      <span
+        className={cn(
+          'flex-1 focus:outline-none',
+          state.checked && 'text-muted-foreground line-through'
+        )}
+        contentEditable={!state.readOnly}
+        suppressContentEditableWarning
+      >
+        {children}
+      </span>
+    </PlateElement>
+  );
+}
diff --git a/@/components/plate-ui/toggle.tsx b/@/components/plate-ui/toggle.tsx
new file mode 100644
index 0000000..1a33aca
--- /dev/null
+++ b/@/components/plate-ui/toggle.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const toggleVariants = cva(
+  cn(
+    'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+    '[&_svg:not([data-icon])]:h-5 [&_svg:not([data-icon])]:w-5'
+  ),
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-transparent hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+        outline:
+          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+        floating: 'rounded-full bg-primary text-primary-foreground',
+      },
+      size: {
+        default: 'h-10 px-3',
+        sm: 'h-9 px-2',
+        lg: 'h-11 px-5',
+        circle: 'p-3',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export type ToggleProps = React.ComponentPropsWithoutRef<
+  typeof TogglePrimitive.Root
+> &
+  VariantProps<typeof toggleVariants>;
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  ToggleProps
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };
diff --git a/@/components/plate-ui/toolbar.tsx b/@/components/plate-ui/toolbar.tsx
new file mode 100644
index 0000000..c30794c
--- /dev/null
+++ b/@/components/plate-ui/toolbar.tsx
@@ -0,0 +1,204 @@
+'use client';
+
+import * as React from 'react';
+import { ReactNode } from 'react';
+import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+
+import { Separator } from './separator';
+import { ToggleProps, toggleVariants } from './toggle';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
+} from './tooltip';
+
+const toolbarVariants = cva(
+  'relative flex select-none items-stretch gap-1 bg-background'
+);
+
+export const linkVariants = cva('font-medium underline underline-offset-4');
+
+const ToolbarToggleGroup = ToolbarPrimitive.ToggleGroup;
+
+export interface ToolbarProps
+  extends React.ComponentPropsWithoutRef<typeof Toolbar> {}
+
+const Toolbar = React.forwardRef<
+  React.ElementRef<typeof ToolbarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Root> &
+    VariantProps<typeof toolbarVariants>
+>(({ className, ...props }, ref) => (
+  <ToolbarPrimitive.Root
+    ref={ref}
+    className={cn(toolbarVariants(), className)}
+    {...props}
+  />
+));
+Toolbar.displayName = ToolbarPrimitive.Root.displayName;
+
+const ToolbarLink = React.forwardRef<
+  React.ElementRef<typeof ToolbarPrimitive.Link>,
+  React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Link> &
+    VariantProps<typeof linkVariants>
+>(({ className, ...props }, ref) => (
+  <ToolbarPrimitive.Link
+    ref={ref}
+    className={cn(linkVariants(), className)}
+    {...props}
+  />
+));
+ToolbarLink.displayName = ToolbarPrimitive.Link.displayName;
+
+const ToolbarSeparator = React.forwardRef<
+  React.ElementRef<typeof ToolbarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ToolbarPrimitive.Separator
+    ref={ref}
+    className={cn('shrink-0 bg-border', 'my-1 w-[1px]', className)}
+    {...props}
+  />
+));
+ToolbarSeparator.displayName = ToolbarPrimitive.Separator.displayName;
+
+export interface ToolbarButtonProps
+  extends React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Button>,
+    VariantProps<typeof toggleVariants>,
+    Omit<ToggleProps, 'type'> {
+  buttonType?: 'button' | 'toggle';
+  pressed?: boolean;
+  tooltip?: ReactNode;
+  isDropdown?: boolean;
+}
+
+const ToolbarButton = React.forwardRef<
+  React.ElementRef<typeof ToolbarPrimitive.Button>,
+  ToolbarButtonProps
+>(
+  (
+    {
+      className,
+      variant,
+      size = 'sm',
+      isDropdown,
+      children,
+      pressed,
+      value,
+      tooltip,
+      ...props
+    },
+    ref
+  ) => {
+    const [isLoaded, setIsLoaded] = React.useState(false);
+
+    React.useEffect(() => {
+      setIsLoaded(true);
+    }, []);
+
+    const content =
+      typeof pressed === 'boolean' ? (
+        <ToolbarToggleGroup
+          type="single"
+          value={pressed ? 'single' : undefined}
+        >
+          <ToolbarToggleItem
+            ref={ref}
+            className={cn(
+              toggleVariants({
+                variant,
+                size,
+              }),
+              isDropdown && 'my-1 justify-between pr-1',
+              className
+            )}
+            value="single"
+            {...props}
+          >
+            <div className="flex flex-1">{children}</div>
+            <div>
+              {isDropdown && (
+                <Icons.arrowDown className="ml-0.5 h-4 w-4" data-icon />
+              )}
+            </div>
+          </ToolbarToggleItem>
+        </ToolbarToggleGroup>
+      ) : (
+        <ToolbarPrimitive.Button
+          ref={ref}
+          className={cn(
+            toggleVariants({
+              variant,
+              size,
+            }),
+            isDropdown && 'pr-1',
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </ToolbarPrimitive.Button>
+      );
+
+    return isLoaded && tooltip ? (
+      <Tooltip>
+        <TooltipTrigger>{content}</TooltipTrigger>
+
+        <TooltipPortal>
+          <TooltipContent>{tooltip}</TooltipContent>
+        </TooltipPortal>
+      </Tooltip>
+    ) : (
+      <>{content}</>
+    );
+  }
+);
+ToolbarButton.displayName = ToolbarPrimitive.Button.displayName;
+
+const ToolbarToggleItem = React.forwardRef<
+  React.ElementRef<typeof ToolbarPrimitive.ToggleItem>,
+  React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.ToggleItem> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <ToolbarPrimitive.ToggleItem
+    ref={ref}
+    className={cn(toggleVariants({ variant, size }), className)}
+    {...props}
+  />
+));
+ToolbarToggleItem.displayName = ToolbarPrimitive.ToggleItem.displayName;
+
+const ToolbarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { noSeparator?: boolean }
+>(({ noSeparator, className, children }, ref) => {
+  const childArr = React.Children.map(children, (c) => c);
+  if (!childArr || childArr.length === 0) return null;
+
+  return (
+    <div ref={ref} className={cn('flex', className)}>
+      {!noSeparator && (
+        <div className="h-full py-1">
+          <Separator orientation="vertical" />
+        </div>
+      )}
+
+      <div className="mx-1 flex items-center gap-1">{children}</div>
+    </div>
+  );
+});
+ToolbarGroup.displayName = 'ToolbarGroup';
+
+export {
+  Toolbar,
+  ToolbarLink,
+  ToolbarToggleGroup,
+  ToolbarSeparator,
+  ToolbarToggleItem,
+  ToolbarButton,
+  ToolbarGroup,
+};
diff --git a/@/components/plate-ui/tooltip.tsx b/@/components/plate-ui/tooltip.tsx
new file mode 100644
index 0000000..b0ec9b9
--- /dev/null
+++ b/@/components/plate-ui/tooltip.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '../../lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipPortal = TooltipPrimitive.Portal;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md',
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipPortal,
+  TooltipContent,
+  TooltipProvider,
+};
diff --git a/@/components/plate-ui/turn-into-dropdown-menu.tsx b/@/components/plate-ui/turn-into-dropdown-menu.tsx
new file mode 100644
index 0000000..a080b65
--- /dev/null
+++ b/@/components/plate-ui/turn-into-dropdown-menu.tsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+import { ELEMENT_BLOCKQUOTE } from '@udecode/plate-block-quote';
+import {
+  collapseSelection,
+  findNode,
+  focusEditor,
+  isBlock,
+  isCollapsed,
+  TElement,
+  toggleNodeType,
+  useEditorState,
+} from '@udecode/plate-common';
+import { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3 } from '@udecode/plate-heading';
+import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
+
+import { Icons } from './icons';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  useOpenState,
+} from './dropdown-menu';
+import { ToolbarButton } from './toolbar';
+
+const items = [
+  {
+    value: ELEMENT_PARAGRAPH,
+    label: 'Paragraph',
+    description: 'Paragraph',
+    icon: Icons.paragraph,
+  },
+  {
+    value: ELEMENT_H1,
+    label: 'Heading 1',
+    description: 'Heading 1',
+    icon: Icons.h1,
+  },
+  {
+    value: ELEMENT_H2,
+    label: 'Heading 2',
+    description: 'Heading 2',
+    icon: Icons.h2,
+  },
+  {
+    value: ELEMENT_H3,
+    label: 'Heading 3',
+    description: 'Heading 3',
+    icon: Icons.h3,
+  },
+  {
+    value: ELEMENT_BLOCKQUOTE,
+    label: 'Quote',
+    description: 'Quote (⌘+⇧+.)',
+    icon: Icons.blockquote,
+  },
+  // {
+  //   value: 'ul',
+  //   label: 'Bulleted list',
+  //   description: 'Bulleted list',
+  //   icon: Icons.ul,
+  // },
+  // {
+  //   value: 'ol',
+  //   label: 'Numbered list',
+  //   description: 'Numbered list',
+  //   icon: Icons.ol,
+  // },
+];
+
+const defaultItem = items.find((item) => item.value === ELEMENT_PARAGRAPH)!;
+
+export function TurnIntoDropdownMenu(props: DropdownMenuProps) {
+  const editor = useEditorState();
+  const openState = useOpenState();
+
+  let value: string = ELEMENT_PARAGRAPH;
+  if (isCollapsed(editor?.selection)) {
+    const entry = findNode<TElement>(editor!, {
+      match: (n) => isBlock(editor, n),
+    });
+    if (entry) {
+      value =
+        items.find((item) => item.value === entry[0].type)?.value ??
+        ELEMENT_PARAGRAPH;
+    }
+  }
+
+  const selectedItem =
+    items.find((item) => item.value === value) ?? defaultItem;
+  const { icon: SelectedItemIcon, label: selectedItemLabel } = selectedItem;
+
+  return (
+    <DropdownMenu modal={false} {...openState} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton
+          pressed={openState.open}
+          tooltip="Turn into"
+          isDropdown
+          className="lg:min-w-[130px]"
+        >
+          <SelectedItemIcon className="h-5 w-5 lg:hidden" />
+          <span className="max-lg:hidden">{selectedItemLabel}</span>
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="start" className="min-w-0">
+        <DropdownMenuLabel>Turn into</DropdownMenuLabel>
+
+        <DropdownMenuRadioGroup
+          className="flex flex-col gap-0.5"
+          value={value}
+          onValueChange={(type) => {
+            // if (type === 'ul' || type === 'ol') {
+            //   if (settingsStore.get.checkedId(KEY_LIST_STYLE_TYPE)) {
+            //     toggleIndentList(editor, {
+            //       listStyleType: type === 'ul' ? 'disc' : 'decimal',
+            //     });
+            //   } else if (settingsStore.get.checkedId('list')) {
+            //     toggleList(editor, { type });
+            //   }
+            // } else {
+            //   unwrapList(editor);
+            toggleNodeType(editor, { activeType: type });
+            // }
+
+            collapseSelection(editor);
+            focusEditor(editor);
+          }}
+        >
+          {items.map(({ value: itemValue, label, icon: Icon }) => (
+            <DropdownMenuRadioItem
+              key={itemValue}
+              value={itemValue}
+              className="min-w-[180px]"
+            >
+              <Icon className="mr-2 h-5 w-5" />
+              {label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/@/components/plate-ui/with-draggables.tsx b/@/components/plate-ui/with-draggables.tsx
new file mode 100644
index 0000000..400ba29
--- /dev/null
+++ b/@/components/plate-ui/with-draggables.tsx
@@ -0,0 +1,107 @@
+import { FC } from 'react';
+import { ELEMENT_BLOCKQUOTE } from '@udecode/plate-block-quote';
+import { ELEMENT_CODE_BLOCK } from '@udecode/plate-code-block';
+import { createNodesWithHOC } from '@udecode/plate-common';
+import {
+  WithDraggableOptions,
+  withDraggable as withDraggablePrimitive,
+} from '@udecode/plate-dnd';
+import {
+  ELEMENT_H1,
+  ELEMENT_H2,
+  ELEMENT_H3,
+  ELEMENT_H4,
+  ELEMENT_H5,
+  ELEMENT_H6,
+} from '@udecode/plate-heading';
+import { ELEMENT_OL, ELEMENT_UL } from '@udecode/plate-list';
+import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
+
+import { Draggable, DraggableProps } from './draggable';
+
+export const withDraggable = (
+  Component: FC,
+  options?: WithDraggableOptions<
+    Partial<Omit<DraggableProps, 'editor' | 'element' | 'children'>>
+  >
+) =>
+  withDraggablePrimitive<DraggableProps>(Draggable, Component, options as any);
+
+export const withDraggablesPrimitive = createNodesWithHOC(withDraggable);
+
+export const withDraggables = (components: any) => {
+  return withDraggablesPrimitive(components, [
+    {
+      keys: [ELEMENT_PARAGRAPH, ELEMENT_UL, ELEMENT_OL],
+      level: 0,
+    },
+    {
+      key: ELEMENT_H1,
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'px-0 pb-1 text-[1.875em]',
+          blockToolbarWrapper: 'h-[1.3em]',
+        },
+      },
+    },
+    {
+      key: ELEMENT_H2,
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'px-0 pb-1 text-[1.5em]',
+          blockToolbarWrapper: 'h-[1.3em]',
+        },
+      },
+    },
+    {
+      key: ELEMENT_H3,
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'pt-[2px] px-0 pb-1 text-[1.25em]',
+          blockToolbarWrapper: 'h-[1.3em]',
+        },
+      },
+    },
+    {
+      keys: [ELEMENT_H4, ELEMENT_H5],
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'pt-[3px] px-0 pb-0 text-[1.1em]',
+          blockToolbarWrapper: 'h-[1.3em]',
+        },
+      },
+    },
+    {
+      keys: [ELEMENT_PARAGRAPH],
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'pt-[3px] px-0 pb-0',
+        },
+      },
+    },
+    {
+      keys: [ELEMENT_H6, ELEMENT_UL, ELEMENT_OL],
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'px-0 pb-0',
+        },
+      },
+    },
+    {
+      key: ELEMENT_BLOCKQUOTE,
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'px-0 pb-0',
+        },
+      },
+    },
+    {
+      key: ELEMENT_CODE_BLOCK,
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'pt-8 px-0 pb-0',
+        },
+      },
+    },
+  ]);
+};
diff --git a/@/components/ui/accordion.tsx b/@/components/ui/accordion.tsx
new file mode 100644
index 0000000..c4a2600
--- /dev/null
+++ b/@/components/ui/accordion.tsx
@@ -0,0 +1,58 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      className
+    )}
+    {...props}
+  >
+    <div className="pb-4 pt-0">{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/@/components/ui/badge.tsx b/@/components/ui/badge.tsx
new file mode 100644
index 0000000..f000e3e
--- /dev/null
+++ b/@/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/@/components/ui/button.tsx b/@/components/ui/button.tsx
new file mode 100644
index 0000000..a58fca5
--- /dev/null
+++ b/@/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/@/components/ui/card.tsx b/@/components/ui/card.tsx
new file mode 100644
index 0000000..c1b6fbb
--- /dev/null
+++ b/@/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/@/components/ui/carousel.tsx b/@/components/ui/carousel.tsx
new file mode 100644
index 0000000..9782265
--- /dev/null
+++ b/@/components/ui/carousel.tsx
@@ -0,0 +1,257 @@
+import * as React from "react"
+import useEmblaCarousel, {
+  type EmblaCarouselType as CarouselApi,
+  type EmblaOptionsType as CarouselOptions,
+  type EmblaPluginType as CarouselPlugin,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin[]
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on("reInit", onSelect)
+      api.on("select", onSelect)
+
+      return () => {
+        api?.off("select", onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}
diff --git a/@/components/ui/checkbox.tsx b/@/components/ui/checkbox.tsx
new file mode 100644
index 0000000..03dd301
--- /dev/null
+++ b/@/components/ui/checkbox.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+const Checkbox = React.forwardRef<
+	React.ElementRef<typeof CheckboxPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<CheckboxPrimitive.Root
+		ref={ref}
+		className={cn(
+			"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+			className
+		)}
+		{...props}
+	>
+		<CheckboxPrimitive.Indicator
+			className={cn("flex items-center justify-center text-current")}
+		>
+			<Check className="h-4 w-4" />
+		</CheckboxPrimitive.Indicator>
+	</CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
diff --git a/@/components/ui/command.tsx b/@/components/ui/command.tsx
new file mode 100644
index 0000000..d623ee0
--- /dev/null
+++ b/@/components/ui/command.tsx
@@ -0,0 +1,153 @@
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/@/components/ui/context-menu.tsx b/@/components/ui/context-menu.tsx
new file mode 100644
index 0000000..3e52999
--- /dev/null
+++ b/@/components/ui/context-menu.tsx
@@ -0,0 +1,198 @@
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
diff --git a/@/components/ui/dialog.tsx b/@/components/ui/dialog.tsx
new file mode 100644
index 0000000..bcaf970
--- /dev/null
+++ b/@/components/ui/dialog.tsx
@@ -0,0 +1,120 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/@/components/ui/dropdown-menu.tsx b/@/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..769ff7a
--- /dev/null
+++ b/@/components/ui/dropdown-menu.tsx
@@ -0,0 +1,198 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/@/components/ui/form.tsx b/@/components/ui/form.tsx
new file mode 100644
index 0000000..68eba47
--- /dev/null
+++ b/@/components/ui/form.tsx
@@ -0,0 +1,176 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "../../lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/@/components/ui/hover-card.tsx b/@/components/ui/hover-card.tsx
new file mode 100644
index 0000000..863ff01
--- /dev/null
+++ b/@/components/ui/hover-card.tsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/@/components/ui/input.tsx b/@/components/ui/input.tsx
new file mode 100644
index 0000000..7b9d75c
--- /dev/null
+++ b/@/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/@/components/ui/label.tsx b/@/components/ui/label.tsx
new file mode 100644
index 0000000..c23cb40
--- /dev/null
+++ b/@/components/ui/label.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/@/components/ui/navigation-menu.tsx b/@/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..54d2566
--- /dev/null
+++ b/@/components/ui/navigation-menu.tsx
@@ -0,0 +1,128 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}
diff --git a/@/components/ui/popover.tsx b/@/components/ui/popover.tsx
new file mode 100644
index 0000000..bbba7e0
--- /dev/null
+++ b/@/components/ui/popover.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }
diff --git a/@/components/ui/radio-group.tsx b/@/components/ui/radio-group.tsx
new file mode 100644
index 0000000..43b43b4
--- /dev/null
+++ b/@/components/ui/radio-group.tsx
@@ -0,0 +1,42 @@
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }
diff --git a/@/components/ui/resizable.tsx b/@/components/ui/resizable.tsx
new file mode 100644
index 0000000..cd3cb0e
--- /dev/null
+++ b/@/components/ui/resizable.tsx
@@ -0,0 +1,43 @@
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/@/components/ui/scroll-area.tsx b/@/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..cf253cf
--- /dev/null
+++ b/@/components/ui/scroll-area.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/@/components/ui/separator.tsx b/@/components/ui/separator.tsx
new file mode 100644
index 0000000..6d7f122
--- /dev/null
+++ b/@/components/ui/separator.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/@/components/ui/switch.tsx b/@/components/ui/switch.tsx
new file mode 100644
index 0000000..aa58baa
--- /dev/null
+++ b/@/components/ui/switch.tsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/@/components/ui/table.tsx b/@/components/ui/table.tsx
new file mode 100644
index 0000000..c7bed95
--- /dev/null
+++ b/@/components/ui/table.tsx
@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("bg-primary font-medium text-primary-foreground", className)}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/@/components/ui/tabs.tsx b/@/components/ui/tabs.tsx
new file mode 100644
index 0000000..f57fffd
--- /dev/null
+++ b/@/components/ui/tabs.tsx
@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/@/components/ui/textarea.tsx b/@/components/ui/textarea.tsx
new file mode 100644
index 0000000..9f9a6dc
--- /dev/null
+++ b/@/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/@/components/ui/toast.tsx b/@/components/ui/toast.tsx
new file mode 100644
index 0000000..a822477
--- /dev/null
+++ b/@/components/ui/toast.tsx
@@ -0,0 +1,127 @@
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}
diff --git a/@/components/ui/toaster.tsx b/@/components/ui/toaster.tsx
new file mode 100644
index 0000000..a2209ba
--- /dev/null
+++ b/@/components/ui/toaster.tsx
@@ -0,0 +1,33 @@
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast"
+import { useToast } from "@/components/ui/use-toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/@/components/ui/tooltip.tsx b/@/components/ui/tooltip.tsx
new file mode 100644
index 0000000..e121f0a
--- /dev/null
+++ b/@/components/ui/tooltip.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/@/components/ui/use-toast.ts b/@/components/ui/use-toast.ts
new file mode 100644
index 0000000..1671307
--- /dev/null
+++ b/@/components/ui/use-toast.ts
@@ -0,0 +1,192 @@
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }
diff --git a/@/lib/utils.ts b/@/lib/utils.ts
new file mode 100644
index 0000000..ec79801
--- /dev/null
+++ b/@/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+ 
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..e24d493
--- /dev/null
+++ b/components.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
\ No newline at end of file
diff --git a/example.env b/example.env
new file mode 100644
index 0000000..7303ee7
--- /dev/null
+++ b/example.env
@@ -0,0 +1 @@
+VITE_BACKEND_URL=""
\ No newline at end of file
diff --git a/index.html b/index.html
index e4b78ea..0057fce 100644
--- a/index.html
+++ b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Grader</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/package-lock.json b/package-lock.json
index 0cd3857..55de72e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,15 +11,97 @@
         "@fortawesome/fontawesome-svg-core": "^6.4.2",
         "@fortawesome/free-solid-svg-icons": "^6.4.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
+        "@hookform/resolvers": "^3.3.2",
+        "@monaco-editor/react": "^4.6.0",
+        "@radix-ui/react-accordion": "^1.1.2",
+        "@radix-ui/react-avatar": "^1.0.4",
+        "@radix-ui/react-checkbox": "^1.0.4",
+        "@radix-ui/react-context-menu": "^2.1.5",
+        "@radix-ui/react-dialog": "^1.0.5",
+        "@radix-ui/react-dropdown-menu": "^2.0.6",
+        "@radix-ui/react-hover-card": "^1.0.7",
+        "@radix-ui/react-label": "^2.0.2",
+        "@radix-ui/react-navigation-menu": "^1.1.4",
+        "@radix-ui/react-popover": "^1.0.7",
+        "@radix-ui/react-radio-group": "^1.1.3",
+        "@radix-ui/react-scroll-area": "^1.0.5",
+        "@radix-ui/react-separator": "^1.0.3",
+        "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-switch": "^1.0.3",
+        "@radix-ui/react-tabs": "^1.0.4",
+        "@radix-ui/react-toast": "^1.1.5",
+        "@radix-ui/react-toggle": "^1.0.3",
+        "@radix-ui/react-toolbar": "^1.0.4",
+        "@radix-ui/react-tooltip": "^1.0.7",
+        "@udecode/plate-alignment": "^24.5.2",
+        "@udecode/plate-autoformat": "^24.5.2",
+        "@udecode/plate-basic-marks": "^24.5.2",
+        "@udecode/plate-block-quote": "^24.5.2",
+        "@udecode/plate-break": "^24.5.2",
+        "@udecode/plate-caption": "^24.5.2",
+        "@udecode/plate-code-block": "^24.5.2",
+        "@udecode/plate-combobox": "^24.5.2",
+        "@udecode/plate-comments": "^24.5.2",
+        "@udecode/plate-cursor": "^24.3.5",
+        "@udecode/plate-dnd": "^24.5.2",
+        "@udecode/plate-emoji": "^24.5.2",
+        "@udecode/plate-excalidraw": "^24.5.2",
+        "@udecode/plate-floating": "^24.5.2",
+        "@udecode/plate-font": "^24.5.2",
+        "@udecode/plate-heading": "^24.5.2",
+        "@udecode/plate-highlight": "^24.5.2",
+        "@udecode/plate-horizontal-rule": "^24.5.2",
+        "@udecode/plate-indent": "^24.5.2",
+        "@udecode/plate-indent-list": "^24.5.2",
+        "@udecode/plate-juice": "^24.5.2",
+        "@udecode/plate-kbd": "^24.5.2",
+        "@udecode/plate-line-height": "^24.5.2",
+        "@udecode/plate-link": "^24.5.2",
+        "@udecode/plate-list": "^24.5.2",
+        "@udecode/plate-media": "^24.5.2",
+        "@udecode/plate-mention": "^24.5.2",
+        "@udecode/plate-node-id": "^24.5.2",
+        "@udecode/plate-paragraph": "^24.5.2",
+        "@udecode/plate-reset-node": "^24.5.2",
+        "@udecode/plate-resizable": "^24.5.2",
+        "@udecode/plate-select": "^24.5.2",
+        "@udecode/plate-selection": "^24.5.2",
+        "@udecode/plate-serializer-csv": "^24.5.2",
+        "@udecode/plate-serializer-docx": "^24.5.2",
+        "@udecode/plate-serializer-md": "^24.5.2",
+        "@udecode/plate-tabbable": "^24.5.2",
+        "@udecode/plate-table": "^24.5.2",
+        "@udecode/plate-trailing-block": "^24.5.2",
+        "axios": "^1.6.2",
         "bootstrap": "^5.3.1",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.0.0",
+        "cmdk": "^0.2.0",
+        "embla-carousel-react": "^8.0.0-rc19",
+        "lucide-react": "^0.288.0",
+        "prop-types": "^15.8.1",
         "react": "^18.2.0",
+        "react-dnd": "^16.0.1",
+        "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^18.2.0",
+        "react-hook-form": "^7.47.0",
+        "react-lite-youtube-embed": "^2.3.52",
+        "react-resizable-panels": "^1.0.7",
         "react-router-dom": "^6.15.0",
-        "reactstrap": "^9.2.0"
+        "react-sortablejs": "^6.1.4",
+        "react-tweet": "^3.1.1",
+        "reactstrap": "^9.2.0",
+        "sortablejs": "^1.15.1",
+        "styled-components": "^6.1.1",
+        "tailwind-merge": "^1.14.0",
+        "tailwindcss-animate": "^1.0.7",
+        "zod": "^3.22.4"
       },
       "devDependencies": {
+        "@types/node": "^20.11.0",
         "@types/react": "^18.2.15",
         "@types/react-dom": "^18.2.7",
+        "@types/sortablejs": "^1.15.7",
         "@typescript-eslint/eslint-plugin": "^6.0.0",
         "@typescript-eslint/parser": "^6.0.0",
         "@vitejs/plugin-react-swc": "^3.3.2",
@@ -46,7 +128,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -65,6 +146,29 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emoji-mart/data": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.1.2.tgz",
+      "integrity": "sha512-1HP8BxD2azjqWJvxIaWAMyTySeZY0Osr83ukYjltPVkNXeJvTz7yDrPLBtnrD5uqJ3tg4CcLuuBW09wahqL/fg=="
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "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/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
@@ -473,6 +577,54 @@
         "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/react": {
+      "version": "0.22.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.22.3.tgz",
+      "integrity": "sha512-RlF+7yU3/abTZcUez44IHoEH89yDHHonkYzZocynTWbl6J6MiMINMbyZSmSKdRKdadrC+MwQLdEexu++irvZhQ==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^1.3.0",
+        "aria-hidden": "^1.1.3",
+        "tabbable": "^6.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-1.3.0.tgz",
+      "integrity": "sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.2.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "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/@fortawesome/fontawesome-common-types": {
       "version": "6.4.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
@@ -518,6 +670,14 @@
         "react": ">=16.3"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.3.2.tgz",
+      "integrity": "sha512-Tw+GGPnBp+5DOsSg4ek3LCPgkBOuOgS5DsDV7qsWNH9LZc433kgsWICjlsh2J9p04H2K66hsXPPb9qn9ILdUtA==",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.11",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
@@ -555,7 +715,6 @@
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
       "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.0.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -569,7 +728,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
       "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -578,7 +736,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
       "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -586,24 +743,51 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.19",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz",
       "integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
+      "peer": true
+    },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.4.0.tgz",
+      "integrity": "sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.21.0 < 1"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.6.0.tgz",
+      "integrity": "sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.4.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -616,7 +800,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -625,7 +808,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -643,450 +825,2574 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
-    "node_modules/@remix-run/router": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.8.0.tgz",
-      "integrity": "sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg==",
-      "engines": {
-        "node": ">=14.0.0"
+    "node_modules/@radix-ui/number": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz",
+      "integrity": "sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
       }
     },
-    "node_modules/@swc/core": {
-      "version": "1.3.82",
-      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.82.tgz",
-      "integrity": "sha512-jpC1a18HMH67018Ij2jh+hT7JBFu7ZKcQVfrZ8K6JuEY+kjXmbea07P9MbQUZbAe0FB+xi3CqEVCP73MebodJQ==",
-      "dev": true,
-      "hasInstallScript": true,
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
       "dependencies": {
-        "@swc/types": "^0.1.4"
-      },
-      "engines": {
-        "node": ">=10"
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.1.2.tgz",
+      "integrity": "sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collapsible": "1.0.3",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/swc"
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
       },
-      "optionalDependencies": {
-        "@swc/core-darwin-arm64": "1.3.82",
-        "@swc/core-darwin-x64": "1.3.82",
-        "@swc/core-linux-arm-gnueabihf": "1.3.82",
-        "@swc/core-linux-arm64-gnu": "1.3.82",
-        "@swc/core-linux-arm64-musl": "1.3.82",
-        "@swc/core-linux-x64-gnu": "1.3.82",
-        "@swc/core-linux-x64-musl": "1.3.82",
-        "@swc/core-win32-arm64-msvc": "1.3.82",
-        "@swc/core-win32-ia32-msvc": "1.3.82",
-        "@swc/core-win32-x64-msvc": "1.3.82"
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
+      "integrity": "sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
       },
       "peerDependencies": {
-        "@swc/helpers": "^0.5.0"
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
       },
       "peerDependenciesMeta": {
-        "@swc/helpers": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
           "optional": true
         }
       }
     },
-    "node_modules/@swc/core-darwin-arm64": {
-      "version": "1.3.82",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.82.tgz",
-      "integrity": "sha512-JfsyDW34gVKD3uE0OUpUqYvAD3yseEaicnFP6pB292THtLJb0IKBBnK50vV/RzEJtc1bR3g1kNfxo2PeurZTrA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=10"
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.0.4.tgz",
+      "integrity": "sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@swc/core-darwin-x64": {
-      "version": "1.3.82",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.82.tgz",
-      "integrity": "sha512-ogQWgNMq7qTpITjcP3dnzkFNj7bh6SwMr859GvtOTrE75H7L7jDWxESfH4f8foB/LGxBKiDNmxKhitCuAsZK4A==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=10"
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz",
+      "integrity": "sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@swc/core-linux-arm-gnueabihf": {
-      "version": "1.3.82",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.82.tgz",
-      "integrity": "sha512-7TMXG1lXlNhD0kUiEqs+YlGV4irAdBa2quuy+XI3oJf2fBK6dQfEq4xBy65B3khrorzQS3O0oDGQ+cmdpHExHA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz",
+      "integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@swc/core-linux-arm64-gnu": {
-      "version": "1.3.82",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.82.tgz",
-      "integrity": "sha512-26JkOujbzcItPAmIbD5vHJxQVy5ihcSu3YHTKwope1h28sApZdtE7S3e2G3gsZRTIdsCQkXUtAQeqHxGWWR3pw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
+      "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@swc/core-linux-arm64-musl": {
-      "version": "1.3.82",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.82.tgz",
-      "integrity": "sha512-8Izj9tuuMpoc3cqiPBRtwqpO1BZ/+sfZVsEhLxrbOFlcSb8LnKyMle1g3JMMUwI4EU75RGVIzZMn8A6GOKdJbA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@swc/core-linux-x64-gnu": {
-      "version": "1.3.82",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.82.tgz",
-      "integrity": "sha512-0GSrIBScQwTaPv46T2qB7XnDYxndRCpwH4HMjh6FN+I+lfPUhTSJKW8AonqrqT1TbpFIgvzQs7EnTsD7AnSCow==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@swc/core-linux-x64-musl": {
-      "version": "1.3.82",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.82.tgz",
-      "integrity": "sha512-KJUnaaepDKNzrEbwz4jv0iC3/t9x0NSoe06fnkAlhh2+NFKWKKJhVCOBTrpds8n7eylBDIXUlK34XQafjVMUdg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-win32-arm64-msvc": {
-      "version": "1.3.82",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.82.tgz",
-      "integrity": "sha512-TR3MHKhDYIyGyFcyl2d/p1ftceXcubAhX5wRSOdtOyr5+K/v3jbyCCqN7bbqO5o43wQVCwwR/drHleYyDZvg8Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
+    "node_modules/@radix-ui/react-context-menu": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.1.5.tgz",
+      "integrity": "sha512-R5XaDj06Xul1KGb+WP8qiOh7tKJNz2durpLBXAGZjSVtctcRFCuEvy2gtMwRJGePwQQE5nV77gs4FwRi8T+r2g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-menu": "2.0.6",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@swc/core-win32-ia32-msvc": {
-      "version": "1.3.82",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.82.tgz",
-      "integrity": "sha512-ZX4HzVVt6hs84YUg70UvyBJnBOIspmQQM0iXSzBvOikk3zRoN7BnDwQH4GScvevCEBuou60+i4I6d5kHLOfh8Q==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
+      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@swc/core-win32-x64-msvc": {
-      "version": "1.3.82",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.82.tgz",
-      "integrity": "sha512-4mJMnex21kbQoaHeAmHnVwQN9/XAfPszJ6n9HI7SVH+aAHnbBIR0M59/b50/CJMjTj5niUGk7EwQ3nhVNOG32g==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
+      "integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@swc/types": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.4.tgz",
-      "integrity": "sha512-z/G02d+59gyyUb7KYhKi9jOhicek6QD2oMaotUyG+lUkybpXoV49dY9bj7Ah5Q+y7knK2jU67UTX9FyfGzaxQg==",
-      "dev": true
-    },
-    "node_modules/@types/json-schema": {
-      "version": "7.0.12",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
-      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
-      "dev": true
-    },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.5",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
-      "dev": true
-    },
-    "node_modules/@types/react": {
-      "version": "18.2.21",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.21.tgz",
-      "integrity": "sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==",
-      "dev": true,
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
+      "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==",
       "dependencies": {
-        "@types/prop-types": "*",
-        "@types/scheduler": "*",
-        "csstype": "^3.0.2"
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-escape-keydown": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@types/react-dom": {
-      "version": "18.2.7",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz",
-      "integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==",
-      "dev": true,
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.6.tgz",
+      "integrity": "sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==",
       "dependencies": {
-        "@types/react": "*"
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-menu": "2.0.6",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.3",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
-      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
-      "dev": true
-    },
-    "node_modules/@types/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-cJRQXpObxfNKkFAZbJl2yjWtJCqELQIdShsogr1d2MilP8dKD9TE/nEKHkJgUNHdGKCQaf9HbIynuV2csLGVLg==",
-      "dev": true
-    },
-    "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.6.0.tgz",
-      "integrity": "sha512-CW9YDGTQnNYMIo5lMeuiIG08p4E0cXrXTbcZ2saT/ETE7dWUrNxlijsQeU04qAAKkILiLzdQz+cGFxCJjaZUmA==",
-      "dev": true,
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
+      "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
       "dependencies": {
-        "@eslint-community/regexpp": "^4.5.1",
-        "@typescript-eslint/scope-manager": "6.6.0",
-        "@typescript-eslint/type-utils": "6.6.0",
-        "@typescript-eslint/utils": "6.6.0",
-        "@typescript-eslint/visitor-keys": "6.6.0",
-        "debug": "^4.3.4",
-        "graphemer": "^1.4.0",
-        "ignore": "^5.2.4",
-        "natural-compare": "^1.4.0",
-        "semver": "^7.5.4",
-        "ts-api-utils": "^1.0.1"
+        "@babel/runtime": "^7.13.10"
       },
-      "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
+      "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^6.0.0 || ^6.0.0-alpha",
-        "eslint": "^7.0.0 || ^8.0.0"
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
       },
       "peerDependenciesMeta": {
-        "typescript": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
           "optional": true
         }
       }
     },
-    "node_modules/@typescript-eslint/parser": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.6.0.tgz",
-      "integrity": "sha512-setq5aJgUwtzGrhW177/i+DMLqBaJbdwGj2CPIVFFLE0NCliy5ujIdLHd2D1ysmlmsjdL2GWW+hR85neEfc12w==",
-      "dev": true,
+    "node_modules/@radix-ui/react-hover-card": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.0.7.tgz",
+      "integrity": "sha512-OcUN2FU0YpmajD/qkph3XzMcK/NmSk9hGWnjV68p6QiZMgILugusgQwnLSDs3oFSJYGKf3Y49zgFedhGh04k9A==",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "6.6.0",
-        "@typescript-eslint/types": "6.6.0",
-        "@typescript-eslint/typescript-estree": "6.6.0",
-        "@typescript-eslint/visitor-keys": "6.6.0",
-        "debug": "^4.3.4"
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
       },
-      "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
       },
       "peerDependencies": {
-        "eslint": "^7.0.0 || ^8.0.0"
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
       },
       "peerDependenciesMeta": {
-        "typescript": {
+        "@types/react": {
           "optional": true
         }
       }
     },
-    "node_modules/@typescript-eslint/scope-manager": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.6.0.tgz",
-      "integrity": "sha512-pT08u5W/GT4KjPUmEtc2kSYvrH8x89cVzkA0Sy2aaOUIw6YxOIjA8ilwLr/1fLjOedX1QAuBpG9XggWqIIfERw==",
-      "dev": true,
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.2.tgz",
+      "integrity": "sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==",
       "dependencies": {
-        "@typescript-eslint/types": "6.6.0",
-        "@typescript-eslint/visitor-keys": "6.6.0"
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
       },
-      "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@typescript-eslint/type-utils": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.6.0.tgz",
-      "integrity": "sha512-8m16fwAcEnQc69IpeDyokNO+D5spo0w1jepWWY2Q6y5ZKNuj5EhVQXjtVAeDDqvW6Yg7dhclbsz6rTtOvcwpHg==",
-      "dev": true,
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.6.tgz",
+      "integrity": "sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==",
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "6.6.0",
-        "@typescript-eslint/utils": "6.6.0",
-        "debug": "^4.3.4",
-        "ts-api-utils": "^1.0.1"
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
       },
-      "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-navigation-menu": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.1.4.tgz",
+      "integrity": "sha512-Cc+seCS3PmWmjI51ufGG7zp1cAAIRqHVw7C9LOA2TZ+R4hG6rDvHcTqIsEEFLmZO3zNVH72jOOE7kKNy8W+RtA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-visually-hidden": "1.0.3"
       },
       "peerDependencies": {
-        "eslint": "^7.0.0 || ^8.0.0"
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
       },
       "peerDependenciesMeta": {
-        "typescript": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
           "optional": true
         }
       }
     },
-    "node_modules/@typescript-eslint/types": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.6.0.tgz",
-      "integrity": "sha512-CB6QpJQ6BAHlJXdwUmiaXDBmTqIE2bzGTDLADgvqtHWuhfNP3rAOK7kAgRMAET5rDRr9Utt+qAzRBdu3AhR3sg==",
-      "dev": true,
-      "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.0.7.tgz",
+      "integrity": "sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz",
+      "integrity": "sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-rect": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1",
+        "@radix-ui/rect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper/node_modules/@floating-ui/react-dom": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz",
+      "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
+      "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
+      "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.1.3.tgz",
+      "integrity": "sha512-x+yELayyefNeKeTx4fjK6j99Fs6c4qKm3aY38G3swQVTN6xMpsrbigC0uHs2L//g8q4qR7qOcww8430jJmi2ag==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
+      "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.5.tgz",
+      "integrity": "sha512-b6PAgH4GQf9QEn8zbT2XUHpW5z8BzqEc7Kl11TwDrvuTrxlkcjTD5qa/bxgKr+nmuXKu4L/W5UZ4mlP/VG/5Gw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/number": "1.0.1",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz",
+      "integrity": "sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.0.3.tgz",
+      "integrity": "sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.4.tgz",
+      "integrity": "sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.1.5.tgz",
+      "integrity": "sha512-fRLn227WHIBRSzuRzGJ8W+5YALxofH23y0MlPLddaIpLpCDqdE0NZlS2NRQDRiptfxDeeCjgFIpexB1/zkxDlw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-visually-hidden": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz",
+      "integrity": "sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz",
+      "integrity": "sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-toggle": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.0.4.tgz",
+      "integrity": "sha512-tBgmM/O7a07xbaEkYJWYTXkIdU/1pW4/KZORR43toC/4XWyBCURK0ei9kMUdp+gTPPKBgYLxXmRSH1EVcIDp8Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-separator": "1.0.3",
+        "@radix-ui/react-toggle-group": "1.0.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz",
+      "integrity": "sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-visually-hidden": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+      "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz",
+      "integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz",
+      "integrity": "sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/rect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz",
+      "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz",
+      "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz",
+      "integrity": "sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@react-dnd/asap": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
+      "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
+    },
+    "node_modules/@react-dnd/invariant": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz",
+      "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
+    },
+    "node_modules/@react-dnd/shallowequal": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
+      "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.8.0.tgz",
+      "integrity": "sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@swc/core": {
+      "version": "1.3.82",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.82.tgz",
+      "integrity": "sha512-jpC1a18HMH67018Ij2jh+hT7JBFu7ZKcQVfrZ8K6JuEY+kjXmbea07P9MbQUZbAe0FB+xi3CqEVCP73MebodJQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "@swc/types": "^0.1.4"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/swc"
+      },
+      "optionalDependencies": {
+        "@swc/core-darwin-arm64": "1.3.82",
+        "@swc/core-darwin-x64": "1.3.82",
+        "@swc/core-linux-arm-gnueabihf": "1.3.82",
+        "@swc/core-linux-arm64-gnu": "1.3.82",
+        "@swc/core-linux-arm64-musl": "1.3.82",
+        "@swc/core-linux-x64-gnu": "1.3.82",
+        "@swc/core-linux-x64-musl": "1.3.82",
+        "@swc/core-win32-arm64-msvc": "1.3.82",
+        "@swc/core-win32-ia32-msvc": "1.3.82",
+        "@swc/core-win32-x64-msvc": "1.3.82"
+      },
+      "peerDependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependenciesMeta": {
+        "@swc/helpers": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@swc/core-darwin-arm64": {
+      "version": "1.3.82",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.82.tgz",
+      "integrity": "sha512-JfsyDW34gVKD3uE0OUpUqYvAD3yseEaicnFP6pB292THtLJb0IKBBnK50vV/RzEJtc1bR3g1kNfxo2PeurZTrA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-darwin-x64": {
+      "version": "1.3.82",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.82.tgz",
+      "integrity": "sha512-ogQWgNMq7qTpITjcP3dnzkFNj7bh6SwMr859GvtOTrE75H7L7jDWxESfH4f8foB/LGxBKiDNmxKhitCuAsZK4A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm-gnueabihf": {
+      "version": "1.3.82",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.82.tgz",
+      "integrity": "sha512-7TMXG1lXlNhD0kUiEqs+YlGV4irAdBa2quuy+XI3oJf2fBK6dQfEq4xBy65B3khrorzQS3O0oDGQ+cmdpHExHA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-gnu": {
+      "version": "1.3.82",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.82.tgz",
+      "integrity": "sha512-26JkOujbzcItPAmIbD5vHJxQVy5ihcSu3YHTKwope1h28sApZdtE7S3e2G3gsZRTIdsCQkXUtAQeqHxGWWR3pw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-musl": {
+      "version": "1.3.82",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.82.tgz",
+      "integrity": "sha512-8Izj9tuuMpoc3cqiPBRtwqpO1BZ/+sfZVsEhLxrbOFlcSb8LnKyMle1g3JMMUwI4EU75RGVIzZMn8A6GOKdJbA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-gnu": {
+      "version": "1.3.82",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.82.tgz",
+      "integrity": "sha512-0GSrIBScQwTaPv46T2qB7XnDYxndRCpwH4HMjh6FN+I+lfPUhTSJKW8AonqrqT1TbpFIgvzQs7EnTsD7AnSCow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-musl": {
+      "version": "1.3.82",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.82.tgz",
+      "integrity": "sha512-KJUnaaepDKNzrEbwz4jv0iC3/t9x0NSoe06fnkAlhh2+NFKWKKJhVCOBTrpds8n7eylBDIXUlK34XQafjVMUdg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-arm64-msvc": {
+      "version": "1.3.82",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.82.tgz",
+      "integrity": "sha512-TR3MHKhDYIyGyFcyl2d/p1ftceXcubAhX5wRSOdtOyr5+K/v3jbyCCqN7bbqO5o43wQVCwwR/drHleYyDZvg8Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-ia32-msvc": {
+      "version": "1.3.82",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.82.tgz",
+      "integrity": "sha512-ZX4HzVVt6hs84YUg70UvyBJnBOIspmQQM0iXSzBvOikk3zRoN7BnDwQH4GScvevCEBuou60+i4I6d5kHLOfh8Q==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-x64-msvc": {
+      "version": "1.3.82",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.82.tgz",
+      "integrity": "sha512-4mJMnex21kbQoaHeAmHnVwQN9/XAfPszJ6n9HI7SVH+aAHnbBIR0M59/b50/CJMjTj5niUGk7EwQ3nhVNOG32g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.3.tgz",
+      "integrity": "sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@swc/types": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.4.tgz",
+      "integrity": "sha512-z/G02d+59gyyUb7KYhKi9jOhicek6QD2oMaotUyG+lUkybpXoV49dY9bj7Ah5Q+y7knK2jU67UTX9FyfGzaxQg==",
+      "dev": true
+    },
+    "node_modules/@types/is-hotkey": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@types/is-hotkey/-/is-hotkey-0.1.8.tgz",
+      "integrity": "sha512-4zW6OgrfVWR14IqHt32L5zpsE5IJgAu9uimQmAOFPdKPdv+M5RgXeoB2UCJZSKvVNGzUdLgbKdtCSZ66N2HdTA==",
+      "peer": true
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
+      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
+      "dev": true
+    },
+    "node_modules/@types/lodash": {
+      "version": "4.14.200",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.200.tgz",
+      "integrity": "sha512-YI/M/4HRImtNf3pJgbF+W6FrXovqj+T+/HpENLTooK9PnkacBsDpeP3IpHab40CClUfhNmdM2WTNP2sa2dni5Q==",
+      "peer": true
+    },
+    "node_modules/@types/mdast": {
+      "version": "3.0.14",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.14.tgz",
+      "integrity": "sha512-gVZ04PGgw1qLZKsnWnyFv4ORnaJ+DXLdHTVSFbU8yX6xZ34Bjg4Q32yPkmveUP1yItXReKfB0Aknlh/3zxTKAw==",
+      "dependencies": {
+        "@types/unist": "^2"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "20.11.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.0.tgz",
+      "integrity": "sha512-o9bjXmDNcF7GbM4CNQpmi+TutCgap/K3w1JyKgxAjqx41zp9qlIAVFi0IhCNsJcXolEqLWhbFbEeL0PvYm4pcQ==",
+      "devOptional": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
+      "devOptional": true
+    },
+    "node_modules/@types/react": {
+      "version": "18.2.21",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.21.tgz",
+      "integrity": "sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==",
+      "devOptional": true,
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.2.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz",
+      "integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==",
+      "devOptional": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
+      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
+      "devOptional": true
+    },
+    "node_modules/@types/semver": {
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.1.tgz",
+      "integrity": "sha512-cJRQXpObxfNKkFAZbJl2yjWtJCqELQIdShsogr1d2MilP8dKD9TE/nEKHkJgUNHdGKCQaf9HbIynuV2csLGVLg==",
+      "dev": true
+    },
+    "node_modules/@types/sortablejs": {
+      "version": "1.15.7",
+      "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.7.tgz",
+      "integrity": "sha512-PvgWCx1Lbgm88FdQ6S7OGvLIjWS66mudKPlfdrWil0TjsO5zmoZmzoKiiwRShs1dwPgrlkr0N4ewuy0/+QUXYQ=="
+    },
+    "node_modules/@types/stylis": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.4.tgz",
+      "integrity": "sha512-36ZrGJ8fgtBr6nwNnuJ9jXIj+bn/pF6UoqmrQT7+Y99+tFFeHHsoR54+194dHdyhPjgbeoNz3Qru0oRt0l6ASQ=="
+    },
+    "node_modules/@types/unist": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.9.tgz",
+      "integrity": "sha512-zC0iXxAv1C1ERURduJueYzkzZ2zaGyc+P2c95hgkikHPr3z8EdUZOlgEQ5X0DRmwDZn+hekycQnoeiiRVrmilQ=="
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.6.0.tgz",
+      "integrity": "sha512-CW9YDGTQnNYMIo5lMeuiIG08p4E0cXrXTbcZ2saT/ETE7dWUrNxlijsQeU04qAAKkILiLzdQz+cGFxCJjaZUmA==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.5.1",
+        "@typescript-eslint/scope-manager": "6.6.0",
+        "@typescript-eslint/type-utils": "6.6.0",
+        "@typescript-eslint/utils": "6.6.0",
+        "@typescript-eslint/visitor-keys": "6.6.0",
+        "debug": "^4.3.4",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.4",
+        "natural-compare": "^1.4.0",
+        "semver": "^7.5.4",
+        "ts-api-utils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^6.0.0 || ^6.0.0-alpha",
+        "eslint": "^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.6.0.tgz",
+      "integrity": "sha512-setq5aJgUwtzGrhW177/i+DMLqBaJbdwGj2CPIVFFLE0NCliy5ujIdLHd2D1ysmlmsjdL2GWW+hR85neEfc12w==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "6.6.0",
+        "@typescript-eslint/types": "6.6.0",
+        "@typescript-eslint/typescript-estree": "6.6.0",
+        "@typescript-eslint/visitor-keys": "6.6.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.6.0.tgz",
+      "integrity": "sha512-pT08u5W/GT4KjPUmEtc2kSYvrH8x89cVzkA0Sy2aaOUIw6YxOIjA8ilwLr/1fLjOedX1QAuBpG9XggWqIIfERw==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "6.6.0",
+        "@typescript-eslint/visitor-keys": "6.6.0"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.6.0.tgz",
+      "integrity": "sha512-8m16fwAcEnQc69IpeDyokNO+D5spo0w1jepWWY2Q6y5ZKNuj5EhVQXjtVAeDDqvW6Yg7dhclbsz6rTtOvcwpHg==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "6.6.0",
+        "@typescript-eslint/utils": "6.6.0",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.6.0.tgz",
+      "integrity": "sha512-CB6QpJQ6BAHlJXdwUmiaXDBmTqIE2bzGTDLADgvqtHWuhfNP3rAOK7kAgRMAET5rDRr9Utt+qAzRBdu3AhR3sg==",
+      "dev": true,
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.6.0.tgz",
+      "integrity": "sha512-hMcTQ6Al8MP2E6JKBAaSxSVw5bDhdmbCEhGW/V8QXkb9oNsFkA4SBuOMYVPxD3jbtQ4R/vSODBsr76R6fP3tbA==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "6.6.0",
+        "@typescript-eslint/visitor-keys": "6.6.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.5.4",
+        "ts-api-utils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.6.0.tgz",
+      "integrity": "sha512-mPHFoNa2bPIWWglWYdR0QfY9GN0CfvvXX1Sv6DlSTive3jlMTUy+an67//Gysc+0Me9pjitrq0LJp0nGtLgftw==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@types/json-schema": "^7.0.12",
+        "@types/semver": "^7.5.0",
+        "@typescript-eslint/scope-manager": "6.6.0",
+        "@typescript-eslint/types": "6.6.0",
+        "@typescript-eslint/typescript-estree": "6.6.0",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.6.0.tgz",
+      "integrity": "sha512-L61uJT26cMOfFQ+lMZKoJNbAEckLe539VhTxiGHrWl5XSKQgA0RTBZJW2HFPy5T0ZvPVSD93QsrTKDkfNwJGyQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "6.6.0",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@udecode/plate-alignment": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-alignment/-/plate-alignment-24.5.2.tgz",
+      "integrity": "sha512-6oki4hDEmk4HsqcFxm50YiVyI7f0tKDLOBEc7Zd3lTjrgiWRvxwz3WviTR2X2G/KWLbnSAAO+zg9I8pUKzNeow==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-autoformat": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-autoformat/-/plate-autoformat-24.5.2.tgz",
+      "integrity": "sha512-3OVAw/L7F8jZpirPvonfsHgIreOYqDTj3RidxZM0k2d3TUlXULYSklSLbzgpKSfiDQfyrtdIIYjzwGyr7qbUMQ==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2",
+        "lodash": "^4.17.21"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
       }
     },
-    "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.6.0.tgz",
-      "integrity": "sha512-hMcTQ6Al8MP2E6JKBAaSxSVw5bDhdmbCEhGW/V8QXkb9oNsFkA4SBuOMYVPxD3jbtQ4R/vSODBsr76R6fP3tbA==",
-      "dev": true,
+    "node_modules/@udecode/plate-basic-marks": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-basic-marks/-/plate-basic-marks-24.5.2.tgz",
+      "integrity": "sha512-P5ZqRhBBT9GWmm8kTGPVbntIUa6RumJ5WAQe1/5oUk5udGiDQv6Nam7yxzUWvv3CZojiZE1/UaPg/5taw+80Ug==",
       "dependencies": {
-        "@typescript-eslint/types": "6.6.0",
-        "@typescript-eslint/visitor-keys": "6.6.0",
-        "debug": "^4.3.4",
-        "globby": "^11.1.0",
-        "is-glob": "^4.0.3",
-        "semver": "^7.5.4",
-        "ts-api-utils": "^1.0.1"
+        "@udecode/plate-common": "24.5.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-block-quote": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-block-quote/-/plate-block-quote-24.5.2.tgz",
+      "integrity": "sha512-3ej13FhvzZWapUIHGb6xe2M61EZYXZKrsplSqohE0oNRHh6xRUyyXZWk6TASute4QKJaEcGBHoSdRuSronRt/Q==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-break": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-break/-/plate-break-24.5.2.tgz",
+      "integrity": "sha512-9GcNOrd9LfGPzsaK7U8CeiOmPtQWoSwTxtxhthOEbK04t/3sR+JklwBqJtm7DsNRm1oqbQECRC5I+LKs7bJ2+w==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-caption": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-caption/-/plate-caption-24.5.2.tgz",
+      "integrity": "sha512-XsIObHL4kkCkmFLJ9a6U8NOLmFWUdAcXS1xUXMyawAxkPaTqhzrIeGR6SU9Zpu35d9jC1CN8fZgXpb3sgTQZAA==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2",
+        "react-textarea-autosize": "^8.5.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-code-block": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-code-block/-/plate-code-block-24.5.2.tgz",
+      "integrity": "sha512-5KDObxbm7nXU0EkGxlMGKtAhdKvgvSGJFqSYGWjN1emoPvDFhwAl3W3h+ivktP+jQa8qD/vsudZoI76SyGv+kA==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2",
+        "prismjs": "^1.29.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-combobox": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-combobox/-/plate-combobox-24.5.2.tgz",
+      "integrity": "sha512-5cLz49kHQLno9yLsDi8xe8gNoh1JLtobBoLGjH5BpdlysNCCwBhowf8g+sWraR65LEJL1HofiTgHaZBq0iRKDw==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2",
+        "downshift": "^6.1.12"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-comments": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-comments/-/plate-comments-24.5.2.tgz",
+      "integrity": "sha512-FxER5NG0d2q8je04w0bv+NGFxA3Ph3DS97goRzyRPdjMOqLfnsgTospsRyu/WE+e1xilKgaecspvwgmIma/wAA==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2",
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-common": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-common/-/plate-common-24.5.2.tgz",
+      "integrity": "sha512-UbaQGWc2BXyxrMVkQMBb8JK5QclDYRwjFYgbNp8KpjbsaxqU3g5siPHuzU34PbJfqSVB7sdudO/JO4g9GUfBSQ==",
+      "dependencies": {
+        "@udecode/plate-core": "24.4.0",
+        "@udecode/plate-utils": "24.5.2",
+        "@udecode/slate": "24.3.6",
+        "@udecode/slate-react": "24.4.0",
+        "@udecode/slate-utils": "24.3.6",
+        "@udecode/utils": "24.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-core": {
+      "version": "24.4.0",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-core/-/plate-core-24.4.0.tgz",
+      "integrity": "sha512-xg/ZzqpnNQmtXQBM02KMBLHczy2LpGQ2HLEjZVXWsHU1YLyiUCyVW/DCi/woPY1dSuSy60ZnVGPKnxs4Ao7zCQ==",
+      "dependencies": {
+        "@udecode/slate": "24.3.6",
+        "@udecode/slate-react": "24.4.0",
+        "@udecode/slate-utils": "24.3.6",
+        "@udecode/utils": "24.3.0",
+        "@udecode/zustood": "^1.1.3",
+        "clsx": "^1.2.1",
+        "is-hotkey": "^0.2.0",
+        "jotai": "1.7.2",
+        "lodash": "^4.17.21",
+        "nanoid": "^3.3.6",
+        "react-hotkeys-hook": "^4.4.1",
+        "use-deep-compare": "^1.1.0",
+        "zustand": "^3.7.2"
       },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-core/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": ">=6"
+      }
+    },
+    "node_modules/@udecode/plate-cursor": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-cursor/-/plate-cursor-24.5.2.tgz",
+      "integrity": "sha512-LlBARgTzPaZ2nuK8CWgEpk5Al0NiHbg0ywKmwY3fzxG34gl4Fpy8B8sEd+nj4EFIVBHoGrUacFKCnyrC3wjtWg==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-dnd": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-dnd/-/plate-dnd-24.5.2.tgz",
+      "integrity": "sha512-qjA/HJWcodWgdBUospWF6a3qTkf3aYucevNrfyqZpImDYquu8C1x1BTBBK75YBJb6rKyzcACJ/xpNXRLG6Gg9w==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2",
+        "lodash": "^4.17.21",
+        "raf": "^3.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dnd": ">=14.0.0",
+        "react-dnd-html5-backend": ">=14.0.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-emoji": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-emoji/-/plate-emoji-24.5.2.tgz",
+      "integrity": "sha512-hGOixmInPqiOjXSDPG4iy5irEYUfIHirfQLasacyI94220x2Oef7qJdvot1zlMC/BOyz7e5srUBLNCramFdtuQ==",
+      "dependencies": {
+        "@emoji-mart/data": "^1.1.2",
+        "@udecode/plate-combobox": "24.5.2",
+        "@udecode/plate-common": "24.5.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-excalidraw": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-excalidraw/-/plate-excalidraw-24.5.2.tgz",
+      "integrity": "sha512-z14i2H8unKo0ybnedntsswF5pq2wp5nzLSv3d5f52EazmlZhe+bP5RepFksehrqyeBhajAi7c7BCjg+sO13rkw==",
+      "dependencies": {
+        "@excalidraw/excalidraw": "0.12.0",
+        "@udecode/plate-common": "24.5.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-excalidraw/node_modules/@excalidraw/excalidraw": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@excalidraw/excalidraw/-/excalidraw-0.12.0.tgz",
+      "integrity": "sha512-xMPmKmOEgKij43k5m6Koaevb+SBw6La7MT9UDY8Iq7nQCMhA1HQwcUURfSkZ3ERibdQmMsAGtjSLbkX7hrA3+A==",
+      "dependencies": {
+        "dotenv": "10.0.0"
+      },
+      "peerDependencies": {
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+      }
+    },
+    "node_modules/@udecode/plate-floating": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-floating/-/plate-floating-24.5.2.tgz",
+      "integrity": "sha512-m8wsD/fp+iBLPXd8uPuxFmRIQwwmK0F8i0L9fCu0oIVb1OyDYQzYl1T/jm3u1HRZwBmlvZ5VT6S0ZZJ2uaCZag==",
+      "dependencies": {
+        "@floating-ui/core": "^1.3.1",
+        "@floating-ui/react": "^0.22.3",
+        "@radix-ui/react-dropdown-menu": "^2.0.5",
+        "@udecode/plate-common": "24.5.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-font": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-font/-/plate-font-24.5.2.tgz",
+      "integrity": "sha512-sdi6kW0sCVg6C/+RWlQg0ul0etS1v8svxcTQVGvdcGLBSyDaA4EjSm0mHXv4QeYvadAMmJFHrEatrGqMu90SYw==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2",
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-heading": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-heading/-/plate-heading-24.5.2.tgz",
+      "integrity": "sha512-kN2ujjoy7Q1a2/rSMKpYoky7nV9/2jRW6y/8xRIFekvlrKXfXQGPuKFxoiJXxcGD7MRBFqg5QvwS94xroAuXiQ==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-highlight": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-highlight/-/plate-highlight-24.5.2.tgz",
+      "integrity": "sha512-bzFLHurm22qxczDoWTKQPVCsLvu6nXhOCuGhtay4E/6+mlQkc4E/WR95QJGRXKToo49BqhAhiqkpQUKHgZ0vGA==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-horizontal-rule": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-horizontal-rule/-/plate-horizontal-rule-24.5.2.tgz",
+      "integrity": "sha512-EuszMzbf4iqvOfxz9XnyKqAmXpukLHVOilfuGmfE5oPBJWDjrSRPP7rWcyVCT4ksxo/qzzfGT1TlKyMDtI1ylw==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-indent": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-indent/-/plate-indent-24.5.2.tgz",
+      "integrity": "sha512-HocUEjTpHe5/wt6X5PyyB1Og71PjnMVM4c1Y90iGvCPKwN2FlSEVhdzvdOghbsTf5ISA55+3u0s5y3yZeFzF3A==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-indent-list": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-indent-list/-/plate-indent-list-24.5.2.tgz",
+      "integrity": "sha512-m+TZqqEXW1dU6SMNiEJo2yjZTl7JJMPu1YkBZ4gS3/50sPZnFJoY9FBAJjCHhxShmNoL+qe7TO+v3ZV8A8SVYA==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2",
+        "@udecode/plate-indent": "24.5.2",
+        "@udecode/plate-list": "24.5.2",
+        "clsx": "^1.2.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-indent-list/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@udecode/plate-juice": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-juice/-/plate-juice-24.5.2.tgz",
+      "integrity": "sha512-CesHl9tdu7zI50gbs00X5voCRaLQVX8Z96Dv0nmQTUxmFvGVygHbJ2RwFitWsR1Noiz/w9G9wfUFdFpAB/+kiA==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2",
+        "juice": "^8.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-kbd": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-kbd/-/plate-kbd-24.5.2.tgz",
+      "integrity": "sha512-boJlBz6IlJclsUE21d5OH0vbO1W+c4HqXW2o3qfB/lQcickaleh3VluSIW06kn9ik2Rb9uYzl2M6tFBTyLzvQA==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-line-height": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-line-height/-/plate-line-height-24.5.2.tgz",
+      "integrity": "sha512-9K+aHjTcKk2qg0QDFQ05TYy7WzHkYfAcGmT3WCspzmpOEujf377TWLBTh1WzHMLDNYxoicMskbXxyzfTsKyuzw==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-link": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-link/-/plate-link-24.5.2.tgz",
+      "integrity": "sha512-fIIGoxn/CynuX+qrZ1vXOReAzIbeiIM2RW6cp9U1CtTtr9PzwLk2Ozoz4V6IKOYhp4MwQ7K56ExJe91dbx8Y8A==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2",
+        "@udecode/plate-floating": "24.5.2",
+        "@udecode/plate-normalizers": "24.5.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-list": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-list/-/plate-list-24.5.2.tgz",
+      "integrity": "sha512-03u3f7SxPOYkqqxvEoWr/VzvhsGo0CdGrGyzQOAmwiT14vMAhrwacmxTAEauqOEhmDhu09ql6Xt8cS4SrO2Hpg==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2",
+        "@udecode/plate-reset-node": "24.5.2",
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-media": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-media/-/plate-media-24.5.2.tgz",
+      "integrity": "sha512-6UWX8+SWLMVg43SX5LbueLumaOYzuTlQ17rA9L5TteMH8JvCY9JLMyrIeJJD4bJ51xrwRakew0v2Rn6AU5FyAQ==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2",
+        "js-video-url-parser": "^0.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-mention": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-mention/-/plate-mention-24.5.2.tgz",
+      "integrity": "sha512-HQ2XWC9lN/TqdfoUUY8sQolZWGO1SYGHaJQ14JwZunysWy1LCpofDQEpxzCgVxCWnVWzFLibIbZK4qyM8UqCFQ==",
+      "dependencies": {
+        "@udecode/plate-combobox": "24.5.2",
+        "@udecode/plate-common": "24.5.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-node-id": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-node-id/-/plate-node-id-24.5.2.tgz",
+      "integrity": "sha512-KoStOYH420FfCjNv5wmqK1/BR+GoHywiT/9iMClYI4EuS+oR660KP9/3fAOb1SuvVfndLPSGWhuO02JRaAqTQQ==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2",
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-normalizers": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-normalizers/-/plate-normalizers-24.5.2.tgz",
+      "integrity": "sha512-itSo6foWumPbyMGm/tSipbXcZULyVizAnKdpoNpJRP2tNhS9MCthkQuiBAKqwIK+oL5NgYYlkEYIUkUy+XRewg==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2",
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-paragraph": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-paragraph/-/plate-paragraph-24.5.2.tgz",
+      "integrity": "sha512-H62t+Fh5SLLRHL0MSAdPKXnc8tzIK/KJrhWBo7evRkI3zX09VRtbgksJPS53UMbiOW1/oT59sTsXg7wmBDWiBQ==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-reset-node": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-reset-node/-/plate-reset-node-24.5.2.tgz",
+      "integrity": "sha512-jbBYWjYcb7AkOpZnsHZu1i8bG7YkNmjqI/wkI4j8asx4DesKkfHasYcIRBcHi7aDFsm/JQlpEMnGWfoB1PXfbA==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-resizable": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-resizable/-/plate-resizable-24.5.2.tgz",
+      "integrity": "sha512-l97li5rfqxSedP2hx9nfQkrcm1ijVuMZhZsCmJpcHDEHqLjeFicfewmBQuI7EyreMiRZI1OtAfkCV/udTb5Wzg==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-select": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-select/-/plate-select-24.5.2.tgz",
+      "integrity": "sha512-uuL3zHcrewQpuuu/q7VeL0EyNuwfph5qlv1WGSpsgPMgpmsOK1Lo7jctpbfB030d5KtkD/e5PuPbZsLMtseSXA==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-selection": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-selection/-/plate-selection-24.5.2.tgz",
+      "integrity": "sha512-j+9ynM5Nw300ZbsFDKgmMXbijmBoJdN7yNtBcMsSxqDxtCK+CQl+pSqRO9HyOJiY8o01AEsk47uezWCDdgkrJQ==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2",
+        "@viselect/vanilla": "3.2.5",
+        "copy-to-clipboard": "^3.3.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-serializer-csv": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-serializer-csv/-/plate-serializer-csv-24.5.2.tgz",
+      "integrity": "sha512-OgGX5+xmC0OvYudttEOOtm0EkuzEuFnBZu2KxoWmv2sGFhs5CB8YNPXeH+OpkEntJNitQSw7hvSfTPZ79Guutw==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2",
+        "@udecode/plate-table": "24.5.2",
+        "papaparse": "^5.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-serializer-docx": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-serializer-docx/-/plate-serializer-docx-24.5.2.tgz",
+      "integrity": "sha512-jUUBe+I+OeIpVbhEPkg7bE8OyWWElAQ3sIi2uGcwqAiSgxJcgqnn9+VJJMN9gsbWYBNFTwPNsY+W6nFUI1nPIA==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2",
+        "@udecode/plate-heading": "24.5.2",
+        "@udecode/plate-indent": "24.5.2",
+        "@udecode/plate-indent-list": "24.5.2",
+        "@udecode/plate-media": "24.5.2",
+        "@udecode/plate-paragraph": "24.5.2",
+        "@udecode/plate-table": "24.5.2",
+        "validator": "^13.9.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-serializer-md": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-serializer-md/-/plate-serializer-md-24.5.2.tgz",
+      "integrity": "sha512-wSBH2Cz6Y+al/ptvlYYtNh6rApafdNJ5RGIajKgAArz5aTcf2VpSoOWDUeZiur/FoiIu0mdb3j+ut0oLZusTqA==",
+      "dependencies": {
+        "@udecode/plate-basic-marks": "24.5.2",
+        "@udecode/plate-block-quote": "24.5.2",
+        "@udecode/plate-code-block": "24.5.2",
+        "@udecode/plate-common": "24.5.2",
+        "@udecode/plate-heading": "24.5.2",
+        "@udecode/plate-horizontal-rule": "24.5.2",
+        "@udecode/plate-link": "24.5.2",
+        "@udecode/plate-list": "24.5.2",
+        "@udecode/plate-media": "24.5.2",
+        "@udecode/plate-paragraph": "24.5.2",
+        "remark-parse": "^9.0.0",
+        "unified": "^9.2.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-tabbable": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-tabbable/-/plate-tabbable-24.5.2.tgz",
+      "integrity": "sha512-J83i3QyQFxRojvUEBUhVpiYHsDVD1Ui3vunREqyJ3/7+B6nGRuCTA+JtzsCAa3YL3l3SfotY8v1ojGQmw5WLAg==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2",
+        "tabbable": "^6.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-table": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-table/-/plate-table-24.5.2.tgz",
+      "integrity": "sha512-h5XvFTA0hqoa5WjThJ+j3A9xKjWXVTtI4mKPXg5qYIn5xutH9LQoAI6zMLUD28HETonXS2hW1eJ/FfwfYuUIEw==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2",
+        "@udecode/plate-resizable": "24.5.2",
+        "lodash": "^4.17.21"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-trailing-block": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-trailing-block/-/plate-trailing-block-24.5.2.tgz",
+      "integrity": "sha512-21vKEi/AmFBjey8v6r6tjhW5oIBcSX76khhGkC0uyqGuGlKSyS7VVmgYm9c/Sxit5QGE3tm5bSkVBsE6Xm2zGQ==",
+      "dependencies": {
+        "@udecode/plate-common": "24.5.2"
       },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
       }
     },
-    "node_modules/@typescript-eslint/utils": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.6.0.tgz",
-      "integrity": "sha512-mPHFoNa2bPIWWglWYdR0QfY9GN0CfvvXX1Sv6DlSTive3jlMTUy+an67//Gysc+0Me9pjitrq0LJp0nGtLgftw==",
-      "dev": true,
+    "node_modules/@udecode/plate-utils": {
+      "version": "24.5.2",
+      "resolved": "https://registry.npmjs.org/@udecode/plate-utils/-/plate-utils-24.5.2.tgz",
+      "integrity": "sha512-cd00XYvVWOIRqwNWEMk7ZiAr3OEgHNX2xAd5IADW0KSfDWfaFRiFfgmrlwYjHpfkpW6XVJJpuUbyRSl0MyDNbw==",
       "dependencies": {
-        "@eslint-community/eslint-utils": "^4.4.0",
-        "@types/json-schema": "^7.0.12",
-        "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "6.6.0",
-        "@typescript-eslint/types": "6.6.0",
-        "@typescript-eslint/typescript-estree": "6.6.0",
-        "semver": "^7.5.4"
+        "@radix-ui/react-slot": "^1.0.2",
+        "@udecode/plate-core": "24.4.0",
+        "@udecode/slate": "24.3.6",
+        "@udecode/slate-react": "24.4.0",
+        "@udecode/slate-utils": "24.3.6",
+        "@udecode/utils": "24.3.0",
+        "clsx": "^1.2.1",
+        "lodash": "^4.17.21"
       },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-hyperscript": ">=0.66.0",
+        "slate-react": ">=0.99.0"
+      }
+    },
+    "node_modules/@udecode/plate-utils/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
       "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+        "node": ">=6"
+      }
+    },
+    "node_modules/@udecode/slate": {
+      "version": "24.3.6",
+      "resolved": "https://registry.npmjs.org/@udecode/slate/-/slate-24.3.6.tgz",
+      "integrity": "sha512-NfIR4Qkndoba/Ncw+nZ4fNPcd/F+mAHtoOqunRtZR5HdOJN1uBGnSK39duvZST/iB78nPueAVG5hrZ3awGcb4w==",
+      "dependencies": {
+        "@udecode/utils": "24.3.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
+      "peerDependencies": {
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0"
+      }
+    },
+    "node_modules/@udecode/slate-react": {
+      "version": "24.4.0",
+      "resolved": "https://registry.npmjs.org/@udecode/slate-react/-/slate-react-24.4.0.tgz",
+      "integrity": "sha512-qQ+k6j5a5n0NIVGhgCpK8AbAFN+dxYtQLvbQEIoqr4vWtq9zR9PvJTuPurD8UWATt+ngJ7B1gC6bvSwMh8Uikg==",
+      "dependencies": {
+        "@udecode/slate": "24.3.6",
+        "@udecode/utils": "24.3.0"
       },
       "peerDependencies": {
-        "eslint": "^7.0.0 || ^8.0.0"
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0",
+        "slate-react": ">=0.99.0"
       }
     },
-    "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.6.0.tgz",
-      "integrity": "sha512-L61uJT26cMOfFQ+lMZKoJNbAEckLe539VhTxiGHrWl5XSKQgA0RTBZJW2HFPy5T0ZvPVSD93QsrTKDkfNwJGyQ==",
-      "dev": true,
+    "node_modules/@udecode/slate-utils": {
+      "version": "24.3.6",
+      "resolved": "https://registry.npmjs.org/@udecode/slate-utils/-/slate-utils-24.3.6.tgz",
+      "integrity": "sha512-bYyj0UYn6pWF1jqraWNQFxhLnUsPcbgrv6MDDKu6I8RlUkrc/ykGaRSoQLwJdRaRmLc4xivUrOnJXLyMfadqLQ==",
       "dependencies": {
-        "@typescript-eslint/types": "6.6.0",
-        "eslint-visitor-keys": "^3.4.1"
+        "@udecode/slate": "24.3.6",
+        "@udecode/utils": "24.3.0",
+        "lodash": "^4.17.21"
       },
-      "engines": {
-        "node": "^16.0.0 || >=18.0.0"
+      "peerDependencies": {
+        "slate": ">=0.94.0",
+        "slate-history": ">=0.93.0"
+      }
+    },
+    "node_modules/@udecode/utils": {
+      "version": "24.3.0",
+      "resolved": "https://registry.npmjs.org/@udecode/utils/-/utils-24.3.0.tgz",
+      "integrity": "sha512-/Y2lh/Ih1wx4zN35Ky2Z1G1/5f7cSAS7F6dkhrcbJUnDF0srTidoEIRabK+og/yIK/MCEFfOsQGetoV7Ert5hg=="
+    },
+    "node_modules/@udecode/zustood": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@udecode/zustood/-/zustood-1.1.3.tgz",
+      "integrity": "sha512-f3mxHDaOF+q2XvDh/mMvLhCNs0LfCLhIBl8jGmvZT/i3WWq7YujzGXgnbK8mxIkun9irfe6wlPhg9sTIB9Gnug==",
+      "dependencies": {
+        "immer": "^9.0.6",
+        "react-tracked": "^1.7.9"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
+      "peerDependencies": {
+        "zustand": ">=3.5.10"
       }
     },
+    "node_modules/@viselect/vanilla": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/@viselect/vanilla/-/vanilla-3.2.5.tgz",
+      "integrity": "sha512-8Ut9aAbf+BKFr4LZb+Hb+rE1XJzr3yw+CUU7PVK+rD65qveMpD11IB+E5KCp8ReuNE6spwn5qNZbBWVyZWEBlA=="
+    },
     "node_modules/@vitejs/plugin-react-swc": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.3.2.tgz",
@@ -1136,6 +3442,14 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-colors": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
+      "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -1163,14 +3477,12 @@
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -1182,8 +3494,7 @@
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
     },
     "node_modules/argparse": {
       "version": "2.0.1",
@@ -1191,6 +3502,17 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz",
+      "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -1200,6 +3522,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.15",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz",
@@ -1237,21 +3564,43 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/bail": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
+      "integrity": "sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+    },
     "node_modules/bootstrap": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.1.tgz",
@@ -1274,7 +3623,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -1284,7 +3632,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -1337,11 +3684,18 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001525",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001525.tgz",
@@ -1378,11 +3732,72 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/character-entities": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/cheerio": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.10.tgz",
+      "integrity": "sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==",
+      "dependencies": {
+        "cheerio-select": "^1.5.0",
+        "dom-serializer": "^1.3.2",
+        "domhandler": "^4.2.0",
+        "htmlparser2": "^6.1.0",
+        "parse5": "^6.0.1",
+        "parse5-htmlparser2-tree-adapter": "^6.0.1",
+        "tslib": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-1.6.0.tgz",
+      "integrity": "sha512-eq0GdBvxVFbqWgmCm7M3XGs1I8oLy/nExUnh6oLqmBditPO9AqQJrkslDpMun/hZ0yyTs8L0m85OHp4ho6Qm9g==",
+      "dependencies": {
+        "css-select": "^4.3.0",
+        "css-what": "^6.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.3.1",
+        "domutils": "^2.8.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -1401,26 +3816,295 @@
       "engines": {
         "node": ">= 8.10.0"
       },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "dependencies": {
+        "clsx": "2.0.0"
+      },
+      "funding": {
+        "url": "https://joebell.co.uk"
+      }
+    },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
+    },
+    "node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cmdk": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-0.2.0.tgz",
+      "integrity": "sha512-JQpKvEOb86SnvMZbYaFKYhvzFntWBeSZdyii0rZPhKJj9uwJBxu4DaVYDrRN7r3mPop56oPhRw+JYWTKs66TYw==",
+      "dependencies": {
+        "@radix-ui/react-dialog": "1.0.0",
+        "command-score": "0.1.2"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/primitive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz",
+      "integrity": "sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz",
+      "integrity": "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-context": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.0.tgz",
+      "integrity": "sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.0.tgz",
+      "integrity": "sha512-Yn9YU+QlHYLWwV1XfKiqnGVpWYWk6MeBVM6x/bcoyPvxgjQGoeT35482viLPctTMWoMw0PoHgqfSox7Ig+957Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-dismissable-layer": "1.0.0",
+        "@radix-ui/react-focus-guards": "1.0.0",
+        "@radix-ui/react-focus-scope": "1.0.0",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-portal": "1.0.0",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.0",
+        "@radix-ui/react-slot": "1.0.0",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz",
+      "integrity": "sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.0",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-escape-keydown": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz",
+      "integrity": "sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.0.tgz",
+      "integrity": "sha512-C4SWtsULLGf/2L4oGeIHlvWQx7Rf+7cX/vKOAD2dXW0A1b5QXwi3wWeaEgW+wn+SEVrraMUk05vLU9fZZz5HbQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.0",
+        "@radix-ui/react-use-callback-ref": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-id": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz",
+      "integrity": "sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-portal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.0.tgz",
+      "integrity": "sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-presence": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.0.tgz",
+      "integrity": "sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz",
+      "integrity": "sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.0.tgz",
+      "integrity": "sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz",
+      "integrity": "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz",
+      "integrity": "sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz",
+      "integrity": "sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
       }
     },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz",
+      "integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==",
       "dependencies": {
-        "is-glob": "^4.0.1"
+        "@babel/runtime": "^7.13.10"
       },
-      "engines": {
-        "node": ">= 6"
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
       }
     },
-    "node_modules/classnames": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
-      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    "node_modules/cmdk/node_modules/react-remove-scroll": {
+      "version": "2.5.4",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.4.tgz",
+      "integrity": "sha512-xGVKJJr0SJGQVirVFAUZ2k1QLyO6m+2fy0l8Qawbp5Jgrv3DeLalrfMNBFSlmz5kriGGzsVBtGVnf4pTKIhhWA==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
     },
     "node_modules/color-convert": {
       "version": "2.0.1",
@@ -1440,20 +4124,47 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/command-score": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/command-score/-/command-score-0.1.2.tgz",
+      "integrity": "sha512-VtDvQpIJBvBatnONUsPzXYFVKQQAhuf3XTNOAsdBxCNO/QCtUUd8LSgjn0GVarBkCad6aJCZfXgrjYbl/KRr7w=="
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
     },
+    "node_modules/compute-scroll-into-view": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
+      "integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg=="
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+    },
+    "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/cross-spawn": {
       "version": "7.0.3",
@@ -1469,11 +4180,54 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/css-select": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
+      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.0.1",
+        "domhandler": "^4.3.1",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -1486,11 +4240,25 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -1509,11 +4277,31 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-1.0.0.tgz",
+      "integrity": "sha512-/Nd1EQbQbI9UbSHrMiKZjFLrXSnU328iQdZKPQf78XQI6C+gutkFUeoHpG5J08Ioa6HeRbRNFpSIclh1xyG0mw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
     "node_modules/dir-glob": {
       "version": "3.0.1",
@@ -1527,11 +4315,33 @@
         "node": ">=8"
       }
     },
+    "node_modules/direction": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/direction/-/direction-1.0.4.tgz",
+      "integrity": "sha512-GYqKi1aH7PJXxdhTeZBFrg8vUBeKXi+cNprXsC1kpJcbcVnV9wBsrOu1cQEdG0WeQwlfHiy3XvnKfIrJ2R0NzQ==",
+      "peer": true,
+      "bin": {
+        "direction": "cli.js"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
+    },
+    "node_modules/dnd-core": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
+      "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
+      "dependencies": {
+        "@react-dnd/asap": "^5.0.1",
+        "@react-dnd/invariant": "^4.0.1",
+        "redux": "^4.2.0"
+      }
     },
     "node_modules/doctrine": {
       "version": "3.0.0",
@@ -1554,12 +4364,124 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/downshift": {
+      "version": "6.1.12",
+      "resolved": "https://registry.npmjs.org/downshift/-/downshift-6.1.12.tgz",
+      "integrity": "sha512-7XB/iaSJVS4T8wGFT3WRXmSF1UlBHAA40DshZtkrIscIN+VC+Lh363skLxFTvJwtNgHxAMDGEHT4xsyQFWL+UA==",
+      "dependencies": {
+        "@babel/runtime": "^7.14.8",
+        "compute-scroll-into-view": "^1.0.17",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.12.0"
+      }
+    },
+    "node_modules/downshift/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.508",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.508.tgz",
       "integrity": "sha512-FFa8QKjQK/A5QuFr2167myhMesGrhlOBD+3cYNxO9/S4XzHEXesyTD/1/xF644gC8buFPz3ca6G1LOQD0tZrrg==",
       "dev": true
     },
+    "node_modules/embla-carousel": {
+      "version": "8.0.0-rc19",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.0.0-rc19.tgz",
+      "integrity": "sha512-PAChVyYoVZo8subkBN8LjZ7+0vk4CmVvMnxH0Y2ux76VUEUBl1wk5xDo8+MUhH5MXU6ZrgkBpMe++bKob1Z+2g=="
+    },
+    "node_modules/embla-carousel-react": {
+      "version": "8.0.0-rc19",
+      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.0.0-rc19.tgz",
+      "integrity": "sha512-4BBj1HvlUqhWXFyDJOL/JbQ74jtekfdH646B1wQzM9QmWn6CEcbD/SmovKqc6B5jYTKaaGEGEEw7bpUJRajA8w==",
+      "dependencies": {
+        "embla-carousel": "8.0.0-rc19",
+        "embla-carousel-reactive-utils": "8.0.0-rc19"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.1 || ^18.0.0"
+      }
+    },
+    "node_modules/embla-carousel-reactive-utils": {
+      "version": "8.0.0-rc19",
+      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.0.0-rc19.tgz",
+      "integrity": "sha512-ed9NppY0OxTtrSIwTCYNcMLlQfSNcNy8Zsw8uIG0te3qrhvQ2ePPsbcElK2SRAV8VMU6G7JQweQIb6amzYMDXA==",
+      "peerDependencies": {
+        "embla-carousel": "8.0.0-rc19"
+      }
+    },
+    "node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -1606,6 +4528,17 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-goat": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-3.0.0.tgz",
+      "integrity": "sha512-w3PwNZJwRxlp47QGzhuEBldEqVHHhh8/tIPcl6ecf2Bou99cdAt0knihBV0Ecc7CGxYduXVBDheH1K2oADRlvw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -1780,17 +4713,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-glob": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
       "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -1806,7 +4742,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -1830,7 +4765,6 @@
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
       "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
-      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -1851,7 +4785,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -1895,6 +4828,38 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
+      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.6.tgz",
@@ -1911,14 +4876,12 @@
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -1931,8 +4894,15 @@
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "engines": {
+        "node": ">=6"
+      }
     },
     "node_modules/glob": {
       "version": "7.2.3",
@@ -1958,7 +4928,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -2011,7 +4980,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1"
       },
@@ -2028,6 +4996,32 @@
         "node": ">=8"
       }
     },
+    "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/htmlparser2": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -2037,6 +5031,15 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "9.0.21",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
+      "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2066,7 +5069,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "dev": true,
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -2075,14 +5077,42 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "node_modules/is-alphabetical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+      "dependencies": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
     },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -2090,11 +5120,32 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-buffer": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+      "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/is-core-module": {
       "version": "2.13.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
       "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
-      "dev": true,
       "dependencies": {
         "has": "^1.0.3"
       },
@@ -2102,11 +5153,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-decimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2115,7 +5174,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -2123,11 +5181,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-hexadecimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-hotkey": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.2.0.tgz",
+      "integrity": "sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw=="
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -2141,6 +5212,23 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-plain-obj": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+      "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -2151,16 +5239,69 @@
       "version": "1.19.3",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.3.tgz",
       "integrity": "sha512-5eEbBDQT/jF1xg6l36P+mWGGoH9Spuy0PCdSr2dtWRDGC6ph/w9ZCL4lmESW8f8F7MwT3XKescfP0wnZWAKL9w==",
-      "dev": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jotai": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/jotai/-/jotai-1.7.2.tgz",
+      "integrity": "sha512-ksvpW1Wu+/HwW1iDYq23PpXLu2df5Vv+eWw70jRAx7IEY4c+qRsORULnqPFurSy/X8LSoPcRhVDJx/cyf8jjMg==",
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "*",
+        "@babel/template": "*",
+        "@urql/core": "*",
+        "immer": "*",
+        "optics-ts": "*",
+        "react": ">=16.8",
+        "react-query": "*",
+        "valtio": "*",
+        "wonka": "*",
+        "xstate": "*"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@babel/template": {
+          "optional": true
+        },
+        "@urql/core": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "optics-ts": {
+          "optional": true
+        },
+        "react-query": {
+          "optional": true
+        },
+        "valtio": {
+          "optional": true
+        },
+        "wonka": {
+          "optional": true
+        },
+        "xstate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
+    "node_modules/js-video-url-parser": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/js-video-url-parser/-/js-video-url-parser-0.5.1.tgz",
+      "integrity": "sha512-/vwqT67k0AyIGMHAvSOt+n4JfrZWF7cPKgKswDO35yr27GfW4HtjpQVlTx6JLF45QuPm8mkzFHkZgFVnFm4x/w=="
+    },
     "node_modules/js-yaml": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -2191,6 +5332,32 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/juice": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/juice/-/juice-8.1.0.tgz",
+      "integrity": "sha512-FLzurJrx5Iv1e7CfBSZH68dC04EEvXvvVvPYB7Vx1WAuhCp1ZPIMtqxc+WTWxVkpTIC2Ach/GAv0rQbtGf6YMA==",
+      "dependencies": {
+        "cheerio": "1.0.0-rc.10",
+        "commander": "^6.1.0",
+        "mensch": "^0.3.4",
+        "slick": "^1.12.2",
+        "web-resource-inliner": "^6.0.1"
+      },
+      "bin": {
+        "juice": "bin/juice"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/juice/node_modules/commander": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.3",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.3.tgz",
@@ -2217,7 +5384,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
       "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -2225,8 +5391,7 @@
     "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==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -2243,6 +5408,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -2272,20 +5442,75 @@
         "node": ">=10"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.288.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.288.0.tgz",
+      "integrity": "sha512-ikhb/9LOkq9orPoLV9lLC4UYyoXQycBhIgH7H59ahOkk0mkcAqkD52m84RXedE/qVqZHW8rEJquInT4xGmsNqw==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/mdast-util-from-markdown": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",
+      "integrity": "sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-to-string": "^2.0.0",
+        "micromark": "~2.11.0",
+        "parse-entities": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz",
+      "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mensch": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/mensch/-/mensch-0.3.4.tgz",
+      "integrity": "sha512-IAeFvcOnV9V0Yk+bFhYR07O3yNina9ANIN5MoXBKYJ/RLYPurd2d0yw14MDhpr9/momp0WofT1bPUh3hkzdi/g=="
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
     },
+    "node_modules/micromark": {
+      "version": "2.11.4",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz",
+      "integrity": "sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "debug": "^4.0.0",
+        "parse-entities": "^2.0.0"
+      }
+    },
     "node_modules/micromatch": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-      "dev": true,
       "dependencies": {
         "braces": "^3.0.2",
         "picomatch": "^2.3.1"
@@ -2294,11 +5519,40 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+      "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -2306,17 +5560,21 @@
         "node": "*"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.44.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.44.0.tgz",
+      "integrity": "sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q==",
+      "peer": true
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
@@ -2327,7 +5585,6 @@
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
       "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -2347,6 +5604,25 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
@@ -2357,7 +5633,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2371,6 +5646,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -2383,7 +5669,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -2392,7 +5677,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -2444,6 +5728,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/papaparse": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.1.tgz",
+      "integrity": "sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw=="
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -2456,6 +5745,36 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-entities": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+      "dependencies": {
+        "character-entities": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "character-reference-invalid": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz",
+      "integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==",
+      "dependencies": {
+        "parse5": "^6.0.1"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -2469,7 +5788,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2486,8 +5804,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-type": {
       "version": "4.0.0",
@@ -2498,17 +5815,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -2520,7 +5840,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2529,16 +5848,14 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.29",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz",
-      "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==",
-      "dev": true,
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -2566,7 +5883,6 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -2583,7 +5899,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
       "dependencies": {
         "camelcase-css": "^2.0.1"
       },
@@ -2602,7 +5917,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
       "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
-      "dev": true,
       "dependencies": {
         "lilconfig": "^2.0.5",
         "yaml": "^2.1.1"
@@ -2631,7 +5945,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
       "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
-      "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.11"
       },
@@ -2650,7 +5963,6 @@
       "version": "6.0.13",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
       "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
-      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -2662,8 +5974,7 @@
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
@@ -2674,6 +5985,14 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -2684,6 +6003,16 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-compare": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-2.4.0.tgz",
+      "integrity": "sha512-FD8KmQUQD6Mfpd0hywCOzcon/dbkFP8XBd9F1ycbKtvVsfv6TsFUKJ2eC0Iz2y+KzlkdT1Z8SY6ZSgm07zOyqg=="
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
@@ -2697,7 +6026,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -2713,6 +6041,14 @@
         }
       ]
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -2724,6 +6060,43 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-dnd": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
+      "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
+      "dependencies": {
+        "@react-dnd/invariant": "^4.0.1",
+        "@react-dnd/shallowequal": "^4.0.1",
+        "dnd-core": "^16.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "peerDependencies": {
+        "@types/hoist-non-react-statics": ">= 3.3.1",
+        "@types/node": ">= 12",
+        "@types/react": ">= 16",
+        "react": ">= 16.14"
+      },
+      "peerDependenciesMeta": {
+        "@types/hoist-non-react-statics": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-dnd-html5-backend": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
+      "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
+      "dependencies": {
+        "dnd-core": "^16.0.1"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -2741,11 +6114,44 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
       "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
     },
+    "node_modules/react-hook-form": {
+      "version": "7.47.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.47.0.tgz",
+      "integrity": "sha512-F/TroLjTICipmHeFlMrLtNLceO2xr1jU3CyiNla5zdwsGUGu2UOxxR4UyJgLlhMwLW/Wzp4cpJ7CPfgJIeKdSg==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
+    "node_modules/react-hotkeys-hook": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.4.1.tgz",
+      "integrity": "sha512-sClBMBioFEgFGYLTWWRKvhxcCx1DRznd+wkFHwQZspnRBkHTgruKIHptlK/U/2DPX8BhHoRGzpMVWUXMmdZlmw==",
+      "peerDependencies": {
+        "react": ">=16.8.1",
+        "react-dom": ">=16.8.1"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-lite-youtube-embed": {
+      "version": "2.3.52",
+      "resolved": "https://registry.npmjs.org/react-lite-youtube-embed/-/react-lite-youtube-embed-2.3.52.tgz",
+      "integrity": "sha512-G010PvCavA4EqL8mZ/Sv9XXiHnjMfONW+lmNeCRnSEPluPdptv2lZ0cNlngrj7K9j7luc8pbpyrmNpKbD9VMmw==",
+      "peerDependencies": {
+        "react": ">=16.0.8",
+        "react-dom": ">=16.0.8"
+      }
+    },
     "node_modules/react-popper": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
@@ -2760,6 +6166,60 @@
         "react-dom": "^16.8.0 || ^17 || ^18"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
+      "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
+      "dependencies": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-resizable-panels": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-1.0.7.tgz",
+      "integrity": "sha512-CluJkHQheeNqIJly2FYDfri3ME+2h2nCXpf0Y+hTO1K1eVtNxXFA5hVp5cUD6NS70iiufswOmnku9QZiLr1hYg==",
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.15.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.15.0.tgz",
@@ -2790,6 +6250,92 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-sortablejs": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/react-sortablejs/-/react-sortablejs-6.1.4.tgz",
+      "integrity": "sha512-fc7cBosfhnbh53Mbm6a45W+F735jwZ1UFIYSrIqcO/gRIFoDyZeMtgKlpV4DdyQfbCzdh5LoALLTDRxhMpTyXQ==",
+      "dependencies": {
+        "classnames": "2.3.1",
+        "tiny-invariant": "1.2.0"
+      },
+      "peerDependencies": {
+        "@types/sortablejs": "1",
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0",
+        "sortablejs": "1"
+      }
+    },
+    "node_modules/react-sortablejs/node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
+    "node_modules/react-sortablejs/node_modules/tiny-invariant": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
+      "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-textarea-autosize": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz",
+      "integrity": "sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "use-composed-ref": "^1.3.0",
+        "use-latest": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-tracked": {
+      "version": "1.7.11",
+      "resolved": "https://registry.npmjs.org/react-tracked/-/react-tracked-1.7.11.tgz",
+      "integrity": "sha512-+XXv4dJH7NnLtSD/cPVL9omra4A3KRK91L33owevXZ81r7qF/a9DdCsVZa90jMGht/V1Ym9sasbmidsJykhULQ==",
+      "dependencies": {
+        "proxy-compare": "2.4.0",
+        "use-context-selector": "1.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": "*",
+        "react-native": "*",
+        "scheduler": ">=0.19.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -2805,6 +6351,29 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-tweet": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/react-tweet/-/react-tweet-3.1.1.tgz",
+      "integrity": "sha512-8GQLa5y0G56kvGQkN7OiaKkjFAhWYVdyFq62ioY2qVtpMrjchVU+3KnqneCyp0+BemOQZkg6WWp/qoCNeEMH6A==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.1",
+        "clsx": "^1.2.1",
+        "date-fns": "^2.30.0",
+        "swr": "^2.2.0"
+      },
+      "peerDependencies": {
+        "react": ">= 18.0.0",
+        "react-dom": ">= 18.0.0"
+      }
+    },
+    "node_modules/react-tweet/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/reactstrap": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.2.0.tgz",
@@ -2826,7 +6395,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "dependencies": {
         "pify": "^2.3.0"
       }
@@ -2835,7 +6403,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -2843,16 +6410,35 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
       "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
     },
+    "node_modules/remark-parse": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-9.0.0.tgz",
+      "integrity": "sha512-geKatMwSzEXKHuzBNU1z676sGcDcFoChMK38TgdHJNAYfFtsfHDQG7MoJAjs6sgYMqyLduCYWDIWZIxiPeafEw==",
+      "dependencies": {
+        "mdast-util-from-markdown": "^0.8.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.4",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz",
       "integrity": "sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -2878,7 +6464,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -2919,7 +6504,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -2946,6 +6530,21 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/scroll-into-view-if-needed": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz",
+      "integrity": "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==",
+      "peer": true,
+      "dependencies": {
+        "compute-scroll-into-view": "^3.0.2"
+      }
+    },
+    "node_modules/scroll-into-view-if-needed/node_modules/compute-scroll-into-view": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
+      "integrity": "sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg==",
+      "peer": true
+    },
     "node_modules/semver": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -2961,6 +6560,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -2991,15 +6595,99 @@
         "node": ">=8"
       }
     },
+    "node_modules/slate": {
+      "version": "0.100.0",
+      "resolved": "https://registry.npmjs.org/slate/-/slate-0.100.0.tgz",
+      "integrity": "sha512-cK+xwLBrbQof4rEfTzgC8loBWsDFEXq8nOBY7QahwY59Zq4bsBNcwiMw2VIzTv+WGNsmyHp4eAk/HJbz2aAUkQ==",
+      "peer": true,
+      "dependencies": {
+        "immer": "^10.0.3",
+        "is-plain-object": "^5.0.0",
+        "tiny-warning": "^1.0.3"
+      }
+    },
+    "node_modules/slate-history": {
+      "version": "0.100.0",
+      "resolved": "https://registry.npmjs.org/slate-history/-/slate-history-0.100.0.tgz",
+      "integrity": "sha512-x5rUuWLNtH97hs9PrFovGgt3Qc5zkTm/5mcUB+0NR/TK923eLax4HsL6xACLHMs245nI6aJElyM1y6hN0y5W/Q==",
+      "peer": true,
+      "dependencies": {
+        "is-plain-object": "^5.0.0"
+      },
+      "peerDependencies": {
+        "slate": ">=0.65.3"
+      }
+    },
+    "node_modules/slate-hyperscript": {
+      "version": "0.100.0",
+      "resolved": "https://registry.npmjs.org/slate-hyperscript/-/slate-hyperscript-0.100.0.tgz",
+      "integrity": "sha512-fb2KdAYg6RkrQGlqaIi4wdqz3oa0S4zKNBJlbnJbNOwa23+9FLD6oPVx9zUGqCSIpy+HIpOeqXrg0Kzwh/Ii4A==",
+      "peer": true,
+      "dependencies": {
+        "is-plain-object": "^5.0.0"
+      },
+      "peerDependencies": {
+        "slate": ">=0.65.3"
+      }
+    },
+    "node_modules/slate-react": {
+      "version": "0.100.0",
+      "resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.100.0.tgz",
+      "integrity": "sha512-cWq3tiOvYDJE96ISjnZrX/5IrGcqT4tVVW+PeGquUbrEK/Vq9/850juucjXMLl4zQAtXehy+fxWaJQWPeclUDQ==",
+      "peer": true,
+      "dependencies": {
+        "@juggle/resize-observer": "^3.4.0",
+        "@types/is-hotkey": "^0.1.8",
+        "@types/lodash": "^4.14.200",
+        "direction": "^1.0.4",
+        "is-hotkey": "^0.2.0",
+        "is-plain-object": "^5.0.0",
+        "lodash": "^4.17.21",
+        "scroll-into-view-if-needed": "^3.1.0",
+        "tiny-invariant": "1.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=18.2.0",
+        "react-dom": ">=18.2.0",
+        "slate": ">=0.99.0"
+      }
+    },
+    "node_modules/slate/node_modules/immer": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.0.3.tgz",
+      "integrity": "sha512-pwupu3eWfouuaowscykeckFmVTpqbzW+rXFCX8rQLkZzM9ftBmU/++Ra+o+L27mz03zJTlyV4UUr+fdKNffo4A==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/slick": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/slick/-/slick-1.12.2.tgz",
+      "integrity": "sha512-4qdtOGcBjral6YIBCWJ0ljFSKNLz9KkhbWtuGvUyRowl1kxfuE1x/Z/aJcaiilpb3do9bl5K7/1h9XC5wWpY/A==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/sortablejs": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.1.tgz",
+      "integrity": "sha512-P5Cjvb0UG1ZVNiDPj/n4V+DinttXG6K8n7vM/HQf0C25K3YKQTQY6fsr/sEGsJGpQ9exmPxluHxKBc0mLKU1lQ=="
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -3024,11 +6712,42 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/styled-components": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.1.tgz",
+      "integrity": "sha512-cpZZP5RrKRIClBW5Eby4JM1wElLVP4NQrJbJ0h10TidTyJf4SIIwa3zLXOoPb4gJi8MsJ8mjq5mu2IrEhZIAcQ==",
+      "dependencies": {
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@emotion/unitless": "^0.8.0",
+        "@types/stylis": "^4.0.2",
+        "css-to-react-native": "^3.2.0",
+        "csstype": "^3.1.2",
+        "postcss": "^8.4.31",
+        "shallowequal": "^1.1.0",
+        "stylis": "^4.3.0",
+        "tslib": "^2.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
+    "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/sucrase": {
       "version": "3.34.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
       "integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
@@ -3050,7 +6769,6 @@
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
       "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -3082,7 +6800,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -3090,11 +6807,36 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swr": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.4.tgz",
+      "integrity": "sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==",
+      "dependencies": {
+        "client-only": "^0.0.1",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
+    "node_modules/tailwind-merge": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
+      "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
       "integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==",
-      "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -3127,6 +6869,14 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -3137,7 +6887,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0"
       }
@@ -3146,7 +6895,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
       },
@@ -3154,11 +6902,22 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
+      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==",
+      "peer": true
+    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
+      "peer": true
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -3166,6 +6925,25 @@
         "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/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
+    "node_modules/trough": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz",
+      "integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.2.tgz",
@@ -3181,8 +6959,12 @@
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
+    },
+    "node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -3221,6 +7003,41 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "devOptional": true
+    },
+    "node_modules/unified": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-9.2.2.tgz",
+      "integrity": "sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ==",
+      "dependencies": {
+        "bail": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-buffer": "^2.0.0",
+        "is-plain-obj": "^2.0.0",
+        "trough": "^1.0.0",
+        "vfile": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+      "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
+      "dependencies": {
+        "@types/unist": "^2.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
@@ -3260,11 +7077,170 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
+      "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-composed-ref": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
+      "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/use-context-selector": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/use-context-selector/-/use-context-selector-1.4.1.tgz",
+      "integrity": "sha512-Io2ArvcRO+6MWIhkdfMFt+WKQX+Vb++W8DS2l03z/Vw/rz3BclKpM0ynr4LYGyU85Eke+Yx5oIhTY++QR0ZDoA==",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": "*",
+        "react-native": "*",
+        "scheduler": ">=0.19.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-deep-compare": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/use-deep-compare/-/use-deep-compare-1.1.0.tgz",
+      "integrity": "sha512-6yY3zmKNCJ1jjIivfZMZMReZjr8e6iC6Uqtp701jvWJ6ejC/usXD+JjmslZDPJQgX8P4B1Oi5XSLHkOLeYSJsA==",
+      "dependencies": {
+        "dequal": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.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/use-latest": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz",
+      "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==",
+      "dependencies": {
+        "use-isomorphic-layout-effect": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "node_modules/valid-data-url": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/valid-data-url/-/valid-data-url-3.0.1.tgz",
+      "integrity": "sha512-jOWVmzVceKlVVdwjNSenT4PbGghU0SBIizAev8ofZVgivk/TVHXSbNL8LP6M3spZvkR9/QolkyJavGSX5Cs0UA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/validator": {
+      "version": "13.11.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.11.0.tgz",
+      "integrity": "sha512-Ii+sehpSfZy+At5nPdnyMhx78fEoPDkR2XW/zimHEL3MyGJQOCQ7WeP20jPYRz7ZCpcKLB21NxuXHF3bxjStBQ==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/vfile": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz",
+      "integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "is-buffer": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0",
+        "vfile-message": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
+      "integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
     },
     "node_modules/vite": {
       "version": "4.4.9",
@@ -3329,6 +7305,64 @@
         "loose-envify": "^1.0.0"
       }
     },
+    "node_modules/web-resource-inliner": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/web-resource-inliner/-/web-resource-inliner-6.0.1.tgz",
+      "integrity": "sha512-kfqDxt5dTB1JhqsCUQVFDj0rmY+4HLwGQIsLPbyrsN9y9WV/1oFDSx3BQ4GfCv9X+jVeQ7rouTqwK53rA/7t8A==",
+      "dependencies": {
+        "ansi-colors": "^4.1.1",
+        "escape-goat": "^3.0.0",
+        "htmlparser2": "^5.0.0",
+        "mime": "^2.4.6",
+        "node-fetch": "^2.6.0",
+        "valid-data-url": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/web-resource-inliner/node_modules/domhandler": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.3.0.tgz",
+      "integrity": "sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA==",
+      "dependencies": {
+        "domelementtype": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/web-resource-inliner/node_modules/htmlparser2": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-5.0.1.tgz",
+      "integrity": "sha512-vKZZra6CSe9qsJzh0BjBGXo8dvzNsq/oGvsjfRdOrrryfeD9UOBEEQdeoqCRmKZchF5h2zOBMQ6YuQ0uRUmdbQ==",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^3.3.0",
+        "domutils": "^2.4.2",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/htmlparser2?sponsor=1"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -3347,8 +7381,7 @@
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "node_modules/yallist": {
       "version": "4.0.0",
@@ -3360,7 +7393,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.2.tgz",
       "integrity": "sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==",
-      "dev": true,
       "engines": {
         "node": ">= 14"
       }
@@ -3376,6 +7408,30 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.22.4",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz",
+      "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zustand": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz",
+      "integrity": "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==",
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 3f5873b..6388ab9 100644
--- a/package.json
+++ b/package.json
@@ -13,15 +13,97 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@hookform/resolvers": "^3.3.2",
+    "@monaco-editor/react": "^4.6.0",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-context-menu": "^2.1.5",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-hover-card": "^1.0.7",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-toggle": "^1.0.3",
+    "@radix-ui/react-toolbar": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "@udecode/plate-alignment": "^24.5.2",
+    "@udecode/plate-autoformat": "^24.5.2",
+    "@udecode/plate-basic-marks": "^24.5.2",
+    "@udecode/plate-block-quote": "^24.5.2",
+    "@udecode/plate-break": "^24.5.2",
+    "@udecode/plate-caption": "^24.5.2",
+    "@udecode/plate-code-block": "^24.5.2",
+    "@udecode/plate-combobox": "^24.5.2",
+    "@udecode/plate-comments": "^24.5.2",
+    "@udecode/plate-cursor": "^24.3.5",
+    "@udecode/plate-dnd": "^24.5.2",
+    "@udecode/plate-emoji": "^24.5.2",
+    "@udecode/plate-excalidraw": "^24.5.2",
+    "@udecode/plate-floating": "^24.5.2",
+    "@udecode/plate-font": "^24.5.2",
+    "@udecode/plate-heading": "^24.5.2",
+    "@udecode/plate-highlight": "^24.5.2",
+    "@udecode/plate-horizontal-rule": "^24.5.2",
+    "@udecode/plate-indent": "^24.5.2",
+    "@udecode/plate-indent-list": "^24.5.2",
+    "@udecode/plate-juice": "^24.5.2",
+    "@udecode/plate-kbd": "^24.5.2",
+    "@udecode/plate-line-height": "^24.5.2",
+    "@udecode/plate-link": "^24.5.2",
+    "@udecode/plate-list": "^24.5.2",
+    "@udecode/plate-media": "^24.5.2",
+    "@udecode/plate-mention": "^24.5.2",
+    "@udecode/plate-node-id": "^24.5.2",
+    "@udecode/plate-paragraph": "^24.5.2",
+    "@udecode/plate-reset-node": "^24.5.2",
+    "@udecode/plate-resizable": "^24.5.2",
+    "@udecode/plate-select": "^24.5.2",
+    "@udecode/plate-selection": "^24.5.2",
+    "@udecode/plate-serializer-csv": "^24.5.2",
+    "@udecode/plate-serializer-docx": "^24.5.2",
+    "@udecode/plate-serializer-md": "^24.5.2",
+    "@udecode/plate-tabbable": "^24.5.2",
+    "@udecode/plate-table": "^24.5.2",
+    "@udecode/plate-trailing-block": "^24.5.2",
+    "axios": "^1.6.2",
     "bootstrap": "^5.3.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "cmdk": "^0.2.0",
+    "embla-carousel-react": "^8.0.0-rc19",
+    "lucide-react": "^0.288.0",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.47.0",
+    "react-lite-youtube-embed": "^2.3.52",
+    "react-resizable-panels": "^1.0.7",
     "react-router-dom": "^6.15.0",
-    "reactstrap": "^9.2.0"
+    "react-sortablejs": "^6.1.4",
+    "react-tweet": "^3.1.1",
+    "reactstrap": "^9.2.0",
+    "sortablejs": "^1.15.1",
+    "styled-components": "^6.1.1",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@types/node": "^20.11.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/sortablejs": "^1.15.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..8ae80dc
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/src/App.tsx b/src/App.tsx
index 8e97296..5123a99 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,15 +1,60 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
+import { useEffect, useState } from "react";
 import "./App.css";
-import Router from "./Router";
+import { Toaster } from "./components/shadcn/Toaster";
+import { CourseNavSidebarContext, getCourseNavSidebarContextStateValue } from "./contexts/CourseNavSidebarContexnt";
+import { LoginContext } from "./contexts/LoginContext";
+import { NavSidebarContext } from "./contexts/NavSidebarContext";
+import Router from "./router";
+import { AuthService } from "./services/Auth.service";
 
 function App() {
+	const [isLogin, setIsLogin] = useState<boolean|null>(null);
+	const [section, setSection] = useState("");
+	const [isOpenNavSidebar, setIsOpenNavSidebar] = useState(false);
+
+	useEffect(() => {
+		const token = localStorage.getItem("token");
+		const account_id = String(localStorage.getItem("account_id"));
+
+		if (!token || !account_id) {
+			setIsLogin(false)
+			return;
+		}
+
+		AuthService.authorize({ token, account_id }).then((response) => {
+			if (response.data.result) {
+				setIsLogin(true);
+			}
+			else {
+				setIsLogin(false)
+				localStorage.removeItem("token");
+				localStorage.removeItem("account_id");
+				localStorage.removeItem("username");
+
+			}
+		});
+	}, []);
 
 	return (
 		<div>
 			<div className="App">
-				<Router />
+				<LoginContext.Provider value={{ isLogin, setIsLogin }}>
+					<NavSidebarContext.Provider
+						value={{
+							section,
+							setSection,
+							isOpen: isOpenNavSidebar,
+							setIsOpen: setIsOpenNavSidebar,
+						}}
+					>
+						<CourseNavSidebarContext.Provider
+							value = {getCourseNavSidebarContextStateValue()}
+						>
+							<Router />
+							<Toaster />
+						</CourseNavSidebarContext.Provider>
+					</NavSidebarContext.Provider>
+				</LoginContext.Provider>
 			</div>
 		</div>
 	);
diff --git a/src/components/CardContainer.tsx b/src/components/CardContainer.tsx
new file mode 100644
index 0000000..f2a85e4
--- /dev/null
+++ b/src/components/CardContainer.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { ScrollArea } from "./shadcn/ScrollArea";
+
+const CardContainer = ({children,className=""}: {
+    children: React.ReactNode
+	className?: string
+}) => {
+	return (
+		<ScrollArea className={"mt-6 h-[80vh] md:h-[75vh] pr-5 " + className}>
+			<div className="grid gap-y-3">
+                {children}
+            </div>
+		</ScrollArea>
+				);
+};
+
+export default CardContainer;
diff --git a/src/components/Cards/AccountCards/AccountCheckboxCard.tsx b/src/components/Cards/AccountCards/AccountCheckboxCard.tsx
new file mode 100644
index 0000000..53f2e56
--- /dev/null
+++ b/src/components/Cards/AccountCards/AccountCheckboxCard.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { AccountSecureModel } from "../../../types/models/Account.model";
+import { Card } from "../../shadcn/Card";
+import { Checkbox } from "../../shadcn/Checkbox";
+
+export type AccountCheckboxCardOnClickCallback = {
+	checked: boolean;
+	setChecked: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const AccountCheckboxCard = ({
+	account,
+	checked=false,
+    onClick=()=>{}
+}: {
+	account: AccountSecureModel;
+	checked?: boolean;
+    onClick?: () => void;
+}) => {
+	return (
+		<Card
+			onClick={onClick}
+			className={`p-3 cursor-pointer ${
+				checked ? "border-green-500 bg-green-100 " : ""
+			}`}
+		>
+			<div className="flex items-center">
+				<Checkbox checked={checked} className="mr-2" />
+				<p>{account?.username}</p>
+			</div>
+		</Card>
+	);
+};
+
+export default AccountCheckboxCard;
diff --git a/src/components/Cards/AccountCards/AccountMiniCard.tsx b/src/components/Cards/AccountCards/AccountMiniCard.tsx
new file mode 100644
index 0000000..4fc18f4
--- /dev/null
+++ b/src/components/Cards/AccountCards/AccountMiniCard.tsx
@@ -0,0 +1,77 @@
+import {
+	User
+} from "lucide-react";
+import { useState } from "react";
+import { AccountModel, AccountSecureModel } from "../../../types/models/Account.model";
+import { Card } from "../../shadcn/Card";
+
+const AccountMiniCard = ({
+	// problem,
+    account,
+	disabled=false,
+	disabledHighlight=false,
+	onClick=()=>{}
+}: {
+	// problem: ProblemPopulateTestcases | ProblemSecureModel | ProblemModel;
+    account: AccountModel | AccountSecureModel;
+	disabled?: boolean;
+	disabledHighlight?: boolean;
+	onClick?: () => void;
+}) => {
+
+	const [highlightTitle, setHighlightTitle] = useState(false);
+
+	const handleMouseOver = () => {
+		setHighlightTitle(true);
+	};
+	const handleMouseOut = () => {
+		setHighlightTitle(false);
+	};
+
+	const customCardCSS = ():string => {
+		let className = "py-3 px-5 cursor-pointer ";
+
+		if (disabled) {
+			className += "opacity-50 ";
+		}
+		else{
+			if (highlightTitle && !disabledHighlight) {
+				className += "border-green-500 bg-green-100 ";
+			}
+		} 
+		return className;
+	}
+
+	return (
+		account && (
+			// <MyCollectionContextMenu problem={problem}>
+			<Card
+				onClick={() => onClick()}
+				onMouseOver={handleMouseOver}
+				onMouseOut={handleMouseOut}
+				className={customCardCSS()}
+
+				// className={`pt-6 px-5 ${disabled ? "opacity-50" : }`}`}
+			>
+				{/* <CardContent> */}
+					<div className="flex items-stretch justify-between">
+						<div className="flex items-center w-1/2">
+							<User className="text-red-400 mr-2" />
+							{(!highlightTitle || disabled || disabledHighlight) && (
+								<h1 className="	font-bold">{account.username}</h1>
+							)}
+							{(highlightTitle && !disabled && !disabledHighlight) && (
+								<h1 className="font-bold text-green-600">
+									{account.username}
+								</h1>
+							)}
+						</div>
+					</div>
+				{/* </CardContent> */}
+			</Card>
+		// </MyCollectionContextMenu>
+		)
+	);
+};
+
+export default AccountMiniCard;
diff --git a/src/components/Cards/AccountCards/AccountMiniCard2.tsx b/src/components/Cards/AccountCards/AccountMiniCard2.tsx
new file mode 100644
index 0000000..11bba7e
--- /dev/null
+++ b/src/components/Cards/AccountCards/AccountMiniCard2.tsx
@@ -0,0 +1,71 @@
+import {
+	User
+} from "lucide-react";
+import { useState } from "react";
+import { AccountModel, AccountSecureModel } from "../../../types/models/Account.model";
+import { Card } from "../../shadcn/Card";
+
+const AccountMiniCard2 = ({
+	// problem,
+    account,
+	disabled=false,
+	disabledHighlight=false,
+	onClick=()=>{}
+}: {
+	// problem: ProblemPopulateTestcases | ProblemSecureModel | ProblemModel;
+    account: AccountModel | AccountSecureModel;
+	disabled?: boolean;
+	disabledHighlight?: boolean;
+	onClick?: () => void;
+}) => {
+
+	const [highlightTitle, setHighlightTitle] = useState(false);
+
+	const handleMouseOver = () => {
+		setHighlightTitle(true);
+	};
+	const handleMouseOut = () => {
+		setHighlightTitle(false);
+	};
+
+	const customCardCSS = ():string => {
+		let className = "p-2 cursor-pointer ";
+
+		if (disabled) {
+			className += "opacity-50 ";
+		}
+		else{
+			if (highlightTitle && !disabledHighlight) {
+				className += "border-green-500 bg-green-100 ";
+			}
+		} 
+		return className;
+	}
+
+	return (
+		account && (
+			// <MyCollectionContextMenu problem={problem}>
+			<Card
+				onClick={() => onClick()}
+				onMouseOver={handleMouseOver}
+				onMouseOut={handleMouseOut}
+				className={customCardCSS()}
+
+				// className={`pt-6 px-5 ${disabled ? "opacity-50" : }`}`}
+			>
+				<div className="flex items-center justify-between font-medium text-base ">
+					<div className="flex items-center">
+						<User size={20} className="text-red-400 mr-2" />
+						<p className="">{account.username}</p>
+					</div>
+					{/* <div className="bg-red-600 w-4 h-4 text-center text-white rounded-full text-xs">
+						{collection.problems.length}
+					</div> */}
+				</div>
+			</Card>
+		// </MyCollectionContextMenu>
+		)
+	);
+};
+
+export default AccountMiniCard2;
diff --git a/src/components/Cards/CollectionCards/MyCollectionCard.tsx b/src/components/Cards/CollectionCards/MyCollectionCard.tsx
new file mode 100644
index 0000000..35cc7e3
--- /dev/null
+++ b/src/components/Cards/CollectionCards/MyCollectionCard.tsx
@@ -0,0 +1,94 @@
+import { FileSpreadsheet, Folder } from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { CollectionPopulateCollectionProblemPopulateProblemModel } from "../../../types/models/Collection.model";
+import { onMiddleClickOpenInNewTab } from "../../../utilities/OnMiddleClickOpenInNewTab";
+import { readableDateFormat } from "../../../utilities/ReadableDateFormat";
+import Checkmark from "../../Checkmark";
+import MyCollectionContextMenu from "../../ContextMenus/MyCollectionContextMenu";
+import { Card, CardContent } from "../../shadcn/Card";
+
+const MyCollectionCard = ({
+	collection
+}:{
+	collection: CollectionPopulateCollectionProblemPopulateProblemModel
+}) => {
+	const navigate = useNavigate();
+
+	const [highlightTitle, setHighlightTitle] = useState(false);
+
+	const handleMouseOver = () => {
+		setHighlightTitle(true);
+	};
+
+	const handleMouseOut = () => {
+		setHighlightTitle(false);
+	};
+
+	return (
+		<MyCollectionContextMenu collection={collection}>
+			<Card
+			onMouseDown={(e) => onMiddleClickOpenInNewTab(e,`/my/collections/${collection.collection_id}/edit`)}
+			onClick={() => navigate(`/my/collections/${collection.collection_id}/edit`)}
+			onMouseOver={handleMouseOver}
+			onMouseOut={handleMouseOut}
+			className={`pt-6 px-5 cursor-pointer ${
+				highlightTitle ? "border-green-500 bg-green-100" : ""
+			}`}
+		>
+			<CardContent>
+				<div className="flex items-center font-bold mb-2">
+					<Folder className="text-yellow-400 mr-2" />
+					{highlightTitle ? (
+						<h1 className="text-green-600">{collection.name}</h1>
+					): collection.name}
+				</div>
+				<div className="flex text-sm font-medium items-stretch">
+					<div className="w-1/6 self-end grid gap-y-2">
+						<div>
+							<p className="">Lasted Updated</p>
+							<p className="text-gray-400">{readableDateFormat(collection.updated_date)}</p>
+						</div>
+
+						<div>
+							<p className="">Created Date</p>
+							<p className="text-gray-400">{readableDateFormat(collection.created_date)}</p>
+						</div>
+					</div>
+
+					<div className="w-2/6 grid gap-y-2">
+						<div>
+							<p className="">Visibility</p>
+							<p className="text-gray-400">Public</p>
+						</div>
+					</div>
+
+					<div className="w-1/6 self-center">
+						<p className="flex items-center">
+							<FileSpreadsheet className="text-blue-400 mr-2" />
+							Problems ({collection.problems.length})
+						</p>
+					</div>
+
+					<div className="grid gap-y-1">
+						<div className="flex items-center">
+							<Checkmark status />
+							Source Code (10/10)
+						</div>
+						<div className="flex items-center">
+							<Checkmark status />
+							Testcases (10/10)
+						</div>
+						<div className="flex items-center">
+							<Checkmark status />
+							No Runtime Error (10/10)
+						</div>
+					</div>
+				</div>
+			</CardContent>
+		</Card>
+		</MyCollectionContextMenu>
+	);
+};
+
+export default MyCollectionCard;
diff --git a/src/components/Cards/CollectionCards/MyCollectionMiniCard.tsx b/src/components/Cards/CollectionCards/MyCollectionMiniCard.tsx
new file mode 100644
index 0000000..6ee0a7b
--- /dev/null
+++ b/src/components/Cards/CollectionCards/MyCollectionMiniCard.tsx
@@ -0,0 +1,88 @@
+import {
+	FileSpreadsheet,
+	Folder
+} from "lucide-react";
+import { useState } from "react";
+import { CollectionPopulateProblemSecureModel } from "../../../types/models/Collection.model";
+import { Card } from "../../shadcn/Card";
+
+
+
+const MyCollectionMiniCard = ({
+	// problem,
+    collection,
+	disabled=false,
+	disabledHighlight=false,
+	onClick=()=>{}
+}: {
+	// problem: ProblemPopulateTestcases | ProblemSecureModel | ProblemModel;
+    collection:CollectionPopulateProblemSecureModel
+	disabled?: boolean;
+	disabledHighlight?: boolean;
+	onClick?: () => void;
+}) => {
+
+	const [highlightTitle, setHighlightTitle] = useState(false);
+
+	const handleMouseOver = () => {
+		setHighlightTitle(true);
+	};
+	const handleMouseOut = () => {
+		setHighlightTitle(false);
+	};
+
+	const customCardCSS = ():string => {
+		let className = "py-3 px-5 cursor-pointer ";
+
+		if (disabled) {
+			className += "opacity-50 ";
+		}
+		else{
+			if (highlightTitle && !disabledHighlight) {
+				className += "border-green-500 bg-green-100 ";
+			}
+		} 
+		return className;
+	}
+
+	return (
+		collection && (
+			// <MyCollectionContextMenu problem={problem}>
+			<Card
+				onClick={() => onClick()}
+				onMouseOver={handleMouseOver}
+				onMouseOut={handleMouseOut}
+				className={customCardCSS()}
+
+				// className={`pt-6 px-5 ${disabled ? "opacity-50" : }`}`}
+			>
+				{/* <CardContent> */}
+					<div className="flex items-stretch justify-between">
+						<div className="flex items-center w-1/2">
+							<Folder className="text-yellow-400 mr-2" />
+							{(!highlightTitle || disabled || disabledHighlight) && (
+								<h1 className="	font-bold">{collection.name}</h1>
+							)}
+							{(highlightTitle && !disabled && !disabledHighlight) && (
+								<h1 className="font-bold text-green-600">
+									{collection.name}
+								</h1>
+							)}
+						</div>
+
+						<div className="flex gap-1 text-sm font-medium self-center">
+                            <div className="flex">
+                                <FileSpreadsheet className="text-blue-400 mr-2" />
+                                <p>Problems ({collection.problems.length})</p>
+                            </div>
+						
+						</div>
+					</div>
+				{/* </CardContent> */}
+			</Card>
+		// </MyCollectionContextMenu>
+		)
+	);
+};
+
+export default MyCollectionMiniCard;
diff --git a/src/components/Cards/CollectionCards/MyCollectionMiniCard2.tsx b/src/components/Cards/CollectionCards/MyCollectionMiniCard2.tsx
new file mode 100644
index 0000000..a1e72d4
--- /dev/null
+++ b/src/components/Cards/CollectionCards/MyCollectionMiniCard2.tsx
@@ -0,0 +1,75 @@
+import {
+	Folder
+} from "lucide-react";
+import { useState } from "react";
+import {
+	CollectionPopulateCollectionProblemPopulateProblemModel,
+	CollectionPopulateProblemSecureModel
+} from "../../../types/models/Collection.model";
+import { onMiddleClickOpenInNewTab } from "../../../utilities/OnMiddleClickOpenInNewTab";
+import MyCollectionContextMenu from "../../ContextMenus/MyCollectionContextMenu";
+import { Card } from "../../shadcn/Card";
+
+
+
+const MyCollectionMiniCard2 = ({
+	collection,
+	disabled = false,
+	disabledHighlight = false,
+	onClick = () => {},
+}: {
+	collection: CollectionPopulateProblemSecureModel | CollectionPopulateCollectionProblemPopulateProblemModel;
+	disabled?: boolean;
+	disabledHighlight?: boolean;
+	onClick?: () => void;
+}) => {
+
+	const [highlightTitle, setHighlightTitle] = useState(false);
+
+	const handleMouseOver = () => {
+		setHighlightTitle(true);
+	};
+	const handleMouseOut = () => {
+		setHighlightTitle(false);
+	};
+
+	const customCardCSS = (): string => {
+		let className = "p-2 cursor-pointer ";
+
+		if (disabled) {
+			className += "opacity-50 ";
+		} else {
+			if (highlightTitle && !disabledHighlight) {
+				className += "border-green-500 bg-green-100 ";
+			}
+		}
+		return className;
+	};
+
+	return (
+		collection && (
+			<MyCollectionContextMenu collection={collection}>
+			<Card
+				onMouseDown={(e) => onMiddleClickOpenInNewTab(e,`/my/collections/${collection.collection_id}`)}
+				onClick={() => onClick()}
+				onMouseOver={handleMouseOver}
+				onMouseOut={handleMouseOut}
+				className={customCardCSS()}
+
+			>
+				<div className="flex items-center justify-between font-medium text-base ">
+					<div className="flex items-center w-11/12">
+						<Folder size={20} className="text-yellow-400 mr-2" />
+						<p className="line-clamp-1">{collection.name}</p>
+					</div>
+					<div className="bg-blue-600 w-4 h-4 text-center text-white rounded-full text-xs">
+						{collection.problems.length}
+					</div>
+				</div>
+			</Card>
+			</MyCollectionContextMenu>
+		)
+	);
+};
+
+export default MyCollectionMiniCard2;
diff --git a/src/components/Cards/CollectionCards/TopicCollectionAccordionCard.tsx b/src/components/Cards/CollectionCards/TopicCollectionAccordionCard.tsx
new file mode 100644
index 0000000..44a5104
--- /dev/null
+++ b/src/components/Cards/CollectionCards/TopicCollectionAccordionCard.tsx
@@ -0,0 +1,85 @@
+import { Check, FileCheck, Folder } from "lucide-react";
+import { CollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel } from "../../../types/models/Collection.model";
+import ReadOnlyPlate from "../../ReadOnlyPlate";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "../../shadcn/Accordion";
+import { Badge } from "../../shadcn/Badge";
+import { Card } from "../../shadcn/Card";
+import { ScrollArea } from "../../shadcn/ScrollArea";
+import PublicProblemMiniCard from "../ProblemCards/PublicProblemMiniCard";
+
+const isPassed = (collection: CollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel):boolean => {
+	return collection.problems.filter(
+		(collectionProblem) =>
+			collectionProblem.problem.best_submission
+				?.is_passed
+	).length === collection.problems.length
+}
+const TopicCollectionAccordianCard = ({
+	collection,
+}: {
+	collection: CollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel;
+}) => {
+	return (
+		<Card className="px-5 cursor-pointer">
+			<Accordion type="multiple" className="">
+				<AccordionItem value="1" className="border-none">
+					<AccordionTrigger className="flex items-center">
+						<div className="flex items-center w-6/12">
+							<Folder className="text-yellow-400 mr-2" />
+							{collection.name}
+						</div>
+
+						<div className="flex text-base items-center font-mono w-4/12">
+							<FileCheck
+								size={20}
+								className="text-green-600 mr-2"
+							/>
+							<div className={isPassed(collection) ? "text-green-600 font-bold" : ""}>
+								(
+								{
+									collection.problems.filter(
+										(collectionProblem) =>
+											collectionProblem.problem
+												.best_submission?.is_passed
+									).length
+								}
+								/{collection.problems.length})
+							</div>
+						</div>
+
+						<div className="w-2/12">
+							{isPassed(collection) && (
+								<Badge>
+									<Check className="mr-2" size={18} />
+									Completed
+								</Badge>
+							)}
+						</div>
+					</AccordionTrigger>
+					<AccordionContent>
+						<ReadOnlyPlate
+							value={JSON.parse(String(collection.description))}
+						/>
+
+						<ScrollArea className="mt-6 pr-5">
+							<div className="grid gap-y-2">
+								{collection.problems.map((problem) => (
+									<PublicProblemMiniCard
+										problem={problem.problem}
+									/>
+								))}
+							</div>
+						</ScrollArea>
+					</AccordionContent>
+				</AccordionItem>
+			</Accordion>
+		</Card>
+	);
+};
+
+export default TopicCollectionAccordianCard;
diff --git a/src/components/Cards/CourseCards/MyCourseCard.tsx b/src/components/Cards/CourseCards/MyCourseCard.tsx
new file mode 100644
index 0000000..967d3c4
--- /dev/null
+++ b/src/components/Cards/CourseCards/MyCourseCard.tsx
@@ -0,0 +1,83 @@
+import { Folder, LibraryBig } from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { TopicPopulateTopicCollectionPopulateCollectionModel } from "../../../types/models/Topic.model";
+import { onMiddleClickOpenInNewTab } from "../../../utilities/OnMiddleClickOpenInNewTab";
+import { readableDateFormat } from "../../../utilities/ReadableDateFormat";
+import MyCourseContextMenu from "../../ContextMenus/MyCourseContextMenu";
+import { Card, CardContent } from "../../shadcn/Card";
+
+const MyCourseCard = ({
+	course,
+}: {
+	course: TopicPopulateTopicCollectionPopulateCollectionModel;
+}) => {
+	const navigate = useNavigate();
+	const [mouseOver, setMouseOver] = useState(false);
+
+	return (
+		<MyCourseContextMenu course={course}>
+			<Card
+				onMouseDown={(e) =>
+					onMiddleClickOpenInNewTab(
+						e,
+						`/my/courses/${course.topic_id}`
+					)
+				}
+				onClick={() => navigate(`/my/courses/${course.topic_id}/edit`)}
+				onMouseOver={() => setMouseOver(true)}
+				onMouseOut={() => setMouseOver(false)}
+				className={`pt-6 px-5 cursor-pointer ${
+					mouseOver ? "border-green-500 bg-green-100" : ""
+				}`}
+			>
+				{/* <div className="flex">
+				<img src={`${BASE_URL}${course.image_url}`} className="h-40" /> */}
+
+				<CardContent className="w-5/6">
+					<div className="flex items-center font-bold mb-2">
+						<LibraryBig className="text-purple-400 mr-2" />
+						{mouseOver ? (
+							<h1 className="text-green-600">{course.name}</h1>
+						) : (
+							course.name
+						)}
+					</div>
+					<div className="flex text-sm font-medium items-stretch">
+						<div className="w-1/6 self-end grid gap-y-2">
+							<div>
+								<p className="">Lasted Updated</p>
+								<p className="text-gray-400">
+									{readableDateFormat(course.updated_date)}
+								</p>
+							</div>
+							<div>
+								<p className="">Created Date</p>
+								<p className="text-gray-400">
+									{readableDateFormat(course.created_date)}
+								</p>
+							</div>
+						</div>
+
+						<div className="w-2/6 grid gap-y-2">
+							<div>
+								<p className="">Visibility</p>
+								<p className="text-gray-400">Public</p>
+							</div>
+						</div>
+
+						<div className="w-1/6 self-center">
+							<p className="flex items-center">
+								<Folder className="text-yellow-400 mr-2" />
+								Collections ({course.collections.length})
+							</p>
+						</div>
+					</div>
+				</CardContent>
+				{/* </div> */}
+			</Card>
+		</MyCourseContextMenu>
+	);
+};
+
+export default MyCourseCard;
diff --git a/src/components/Cards/CourseCards/PublicCourseCard.tsx b/src/components/Cards/CourseCards/PublicCourseCard.tsx
new file mode 100644
index 0000000..3555102
--- /dev/null
+++ b/src/components/Cards/CourseCards/PublicCourseCard.tsx
@@ -0,0 +1,28 @@
+import { LibraryBig, StepForward } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { TopicModel } from "../../../types/models/Topic.model";
+import { Button } from "../../shadcn/Button";
+import { Card } from "../../shadcn/Card";
+
+const PublicCourseCard = ({ course }: { course: TopicModel }) => {
+    
+	const navigate = useNavigate();
+
+	return (
+		<Card className="p-6">
+			<div className="flex items-start font-bold text-xl">
+				<LibraryBig size={30} className="mr-2 text-purple-400" />
+				<p className="line-clamp-2 w-11/12 h-[6ex]">{course?.name}</p>
+			</div>
+
+			<div className="mt-3 flex justify-end">
+				<Button onClick={() => navigate(`/courses/${course.topic_id}`)}>
+					<StepForward className="mr-2" />
+					Continue
+				</Button>
+			</div>
+		</Card>
+	);
+};
+
+export default PublicCourseCard;
diff --git a/src/components/Cards/MyGroupCard.tsx b/src/components/Cards/MyGroupCard.tsx
new file mode 100644
index 0000000..b73186a
--- /dev/null
+++ b/src/components/Cards/MyGroupCard.tsx
@@ -0,0 +1,71 @@
+import { User, Users } from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { GroupPopulateGroupMemberPopulateAccountSecureModel } from "../../types/models/Group.model";
+import { onMiddleClickOpenInNewTab } from "../../utilities/OnMiddleClickOpenInNewTab";
+import { readableDateFormat } from "../../utilities/ReadableDateFormat";
+import { Card, CardContent } from "../shadcn/Card";
+
+const MyGroupCard = ({
+    group
+}: {
+    group: GroupPopulateGroupMemberPopulateAccountSecureModel;
+}) => {
+	const navigate = useNavigate();
+	const [mouseOver, setMouseOver] = useState(false);
+
+	
+
+	return (
+		<Card
+			onMouseDown={(e) => onMiddleClickOpenInNewTab(e,`/my/groups/${group?.group_id}/edit`)}
+			onMouseOver={() => setMouseOver(true)}
+			onMouseOut={() => setMouseOver(false)}
+			className={`pt-6 px-5 cursor-pointer ${
+				mouseOver ? "border-green-500 bg-green-100" : ""
+			}`}
+			onClick={() => navigate(`/my/groups/${group?.group_id}/edit`)}
+		>
+			<CardContent>
+				<div className="flex items-center font-bold mb-2">
+					{group && group.color && <Users style={{
+						color: group.color
+					}} className={`mr-2`} />}
+					{mouseOver ? (
+						<h1 className="text-green-600">{group?.name}</h1>
+					) : (
+						group?.name
+					)}
+				</div>
+
+				<div className="flex text-sm font-medium items-stretch">
+					<div className="w-1/6 self-end grid gap-y-2">
+						<div>
+							<p className="">Lasted Updated</p>
+							<p className="text-gray-400">
+								
+								{readableDateFormat(group?.updated_date)}
+							</p>
+						</div>
+						<div>
+							<p className="">Created Date</p>
+							<p className="text-gray-400">
+								
+								{readableDateFormat(group?.created_date)}
+							</p>
+						</div>
+					</div>
+
+					<div className="w-1/6 self-center">
+						<p className="flex items-center">
+							<User className="text-yellow-400 mr-2" />
+							Members ({group?.members?.length})
+						</p>
+					</div>
+				</div>
+			</CardContent>
+		</Card>
+	);
+};
+
+export default MyGroupCard;
diff --git a/src/components/Cards/ProblemCards/MyProblemCard.tsx b/src/components/Cards/ProblemCards/MyProblemCard.tsx
new file mode 100644
index 0000000..c4c3b51
--- /dev/null
+++ b/src/components/Cards/ProblemCards/MyProblemCard.tsx
@@ -0,0 +1,118 @@
+import {
+	FileSpreadsheet
+} from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+	ProblemPopulateTestcases,
+	TestcaseModel
+} from "../../../types/models/Problem.model";
+import { onMiddleClickOpenInNewTab } from "../../../utilities/OnMiddleClickOpenInNewTab";
+import { readableDateFormat } from "../../../utilities/ReadableDateFormat";
+import Checkmark from "../../Checkmark";
+import MyProblemContextMenu from "../../ContextMenus/MyProblemContextMenu";
+import { Card, CardContent } from "../../shadcn/Card";
+
+const checkRuntimeStatus = (testcases: TestcaseModel[]) => {
+	for (const testcase of testcases) {
+		if (testcase.runtime_status !== "OK") {
+			return false;
+		}
+	}
+	return true;
+};
+
+
+const MyProblemCard = ({ problem }: { problem: ProblemPopulateTestcases }) => {
+	const navigate = useNavigate();
+
+	const [highlightTitle, setHighlightTitle] = useState(false);
+
+	const handleMouseOver = () => {
+		setHighlightTitle(true);
+	};
+	const handleMouseOut = () => {
+		setHighlightTitle(false);
+	};
+
+
+	return (
+		<MyProblemContextMenu problem={problem}>
+			
+			<Card
+				onMouseDown={(e) => onMiddleClickOpenInNewTab(e,`/my/problems/${problem.problem_id}/edit`)}
+				onClick={() => navigate(`/my/problems/${problem.problem_id}/edit`)}
+				onMouseOver={handleMouseOver}
+				onMouseOut={handleMouseOut}
+				className={`pt-6 px-5 cursor-pointer ${
+					highlightTitle ? "border-green-500 bg-green-100" : ""
+				}`}
+			>
+				<CardContent>
+					<div className="flex items-center mb-2">
+						<FileSpreadsheet className="text-blue-400 mr-2"/>
+						{!highlightTitle && (
+							<h1 className="	font-bold">{problem.title}</h1>
+						)}
+						{highlightTitle && (
+							<h1 className="font-bold text-green-600">
+								{problem.title}
+							</h1>
+						)}
+					</div>
+
+					<div className="flex text-sm font-medium items-stretch">
+						<div className="w-1/6 self-end grid gap-y-2">
+							<div>
+								<p className="">Lasted Updated</p>
+								<p className="text-gray-400">
+									{readableDateFormat(problem.updated_date)}
+								</p>
+							</div>
+
+							<div>
+								<p className="">Created Date</p>
+								<p className="text-gray-400">
+									{readableDateFormat(problem.created_date)}
+								</p>
+							</div>
+						</div>
+
+						<div className="w-1/6 self-end grid gap-y-2">
+							<div>
+								<p className="">Time Limited</p>
+								<p className="text-gray-400">
+									{problem.time_limit}s
+								</p>
+							</div>
+
+							<div>
+								<p className="">Visibility</p>
+								<p className="text-gray-400">
+									{problem.is_private ? "Private" : "Public"}
+								</p>
+							</div>
+						</div>
+
+						<div className="grid gap-y-1">
+							<div className="flex items-center">
+								<Checkmark status={problem.solution !== ""} />
+								Source Code
+							</div>
+							<div className="flex items-center">
+								<Checkmark status={problem.testcases.length !== 0} />
+								Testcases ({problem.testcases.length})
+							</div>
+							<div className="flex items-center">
+								<Checkmark status={checkRuntimeStatus(problem.testcases)} />
+								No Runtime Error
+							</div>
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+		</MyProblemContextMenu>
+	);
+};
+
+export default MyProblemCard;
diff --git a/src/components/Cards/ProblemCards/MyProblemMiniCard.tsx b/src/components/Cards/ProblemCards/MyProblemMiniCard.tsx
new file mode 100644
index 0000000..b7269ad
--- /dev/null
+++ b/src/components/Cards/ProblemCards/MyProblemMiniCard.tsx
@@ -0,0 +1,140 @@
+import {
+	FileSpreadsheet,
+	PencilIcon,
+	Trash
+} from "lucide-react";
+import React, { useState } from "react";
+import {
+	ProblemModel,
+	ProblemPopulateTestcases,
+	ProblemSecureModel
+} from "../../../types/models/Problem.model";
+import Checkmark from "../../Checkmark";
+import DeleteProblemConfirmationDialog from "../../Dialogs/DeleteProblemConfirmationDialog";
+import { Card } from "../../shadcn/Card";
+import {
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuTrigger,
+} from "../../shadcn/ContextMenu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../shadcn/Tooltip";
+
+
+
+const MyProblemContextMenu = ({
+	children,
+	problem,
+}: {
+	children: React.ReactNode;
+	problem: ProblemPopulateTestcases | ProblemSecureModel | ProblemModel;
+}) => {
+	const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
+
+	return (
+		<ContextMenu>
+			<DeleteProblemConfirmationDialog
+				problem={problem}
+				open={openDeleteDialog}
+				setOpen={setOpenDeleteDialog}
+				afterDelete={() => window.location.reload()}
+			/>
+			<ContextMenuTrigger>{children}</ContextMenuTrigger>
+			<ContextMenuContent>
+				<ContextMenuItem>
+					<PencilIcon className="mr-2" size={16} />
+					Edit
+				</ContextMenuItem>
+				<ContextMenuItem onClick={() => setOpenDeleteDialog(true)}>
+					<Trash className="mr-2" size={16} />
+					Delete
+				</ContextMenuItem>
+			</ContextMenuContent>
+		</ContextMenu>
+	);
+};
+
+const MyProblemMiniCard = ({
+	problem,
+	disabled=false,
+	disabledHighlight=false,
+	onClick=()=>{}
+}: {
+	problem: ProblemPopulateTestcases | ProblemSecureModel | ProblemModel;
+	disabled?: boolean;
+	disabledHighlight?: boolean;
+	onClick?: () => void;
+}) => {
+
+	const [highlightTitle, setHighlightTitle] = useState(false);
+
+	const handleMouseOver = () => {
+		setHighlightTitle(true);
+	};
+	const handleMouseOut = () => {
+		setHighlightTitle(false);
+	};
+
+	const customCardCSS = ():string => {
+		let className = "py-3 px-5 cursor-pointer ";
+
+		if (disabled) {
+			className += "opacity-50 ";
+		}
+		else{
+			if (highlightTitle && !disabledHighlight) {
+				className += "border-green-500 bg-green-100 ";
+			}
+		} 
+		return className;
+	}
+
+	return (
+		problem && (
+			<MyProblemContextMenu problem={problem}>
+			<Card
+				onClick={() => onClick()}
+				onMouseOver={handleMouseOver}
+				onMouseOut={handleMouseOut}
+				className={customCardCSS()}
+
+				// className={`pt-6 px-5 ${disabled ? "opacity-50" : }`}`}
+			>
+				{/* <CardContent> */}
+					<div className="flex items-stretch justify-between">
+						<div className="flex items-center w-1/2">
+							<FileSpreadsheet className="text-blue-400 mr-2" />
+							{(!highlightTitle || disabled || disabledHighlight) && (
+								<h1 className="	font-bold">{problem.title}</h1>
+							)}
+							{(highlightTitle && !disabled && !disabledHighlight) && (
+								<h1 className="font-bold text-green-600">
+									{problem.title}
+								</h1>
+							)}
+						</div>
+
+						<div className="flex gap-1 text-sm font-medium self-center">
+                            <Tooltip>
+                                <TooltipTrigger><Checkmark variant="circle" status/></TooltipTrigger>
+                                <TooltipContent>Source Code</TooltipContent>
+                            </Tooltip>
+                            <Tooltip>
+                                <TooltipTrigger><Checkmark variant="circle" status={false}/></TooltipTrigger>
+                                <TooltipContent>Testcase</TooltipContent>
+                            </Tooltip>
+                            <Tooltip>
+                                <TooltipTrigger><Checkmark variant="circle" status/></TooltipTrigger>
+                                <TooltipContent>No Runtime Error</TooltipContent>
+                            </Tooltip>
+						
+						</div>
+					</div>
+				{/* </CardContent> */}
+			</Card>
+		</MyProblemContextMenu>
+		)
+	);
+};
+
+export default MyProblemMiniCard;
diff --git a/src/components/Cards/ProblemCards/MyProblemMiniCard2.tsx b/src/components/Cards/ProblemCards/MyProblemMiniCard2.tsx
new file mode 100644
index 0000000..b329b5e
--- /dev/null
+++ b/src/components/Cards/ProblemCards/MyProblemMiniCard2.tsx
@@ -0,0 +1,78 @@
+import {
+	FileSpreadsheet
+} from "lucide-react";
+import { useState } from "react";
+import {
+	ProblemModel,
+	ProblemPopulateTestcases,
+	ProblemSecureModel
+} from "../../../types/models/Problem.model";
+import { onMiddleClickOpenInNewTab } from "../../../utilities/OnMiddleClickOpenInNewTab";
+import MyProblemContextMenu from "../../ContextMenus/MyProblemContextMenu";
+import { Card } from "../../shadcn/Card";
+
+const MyProblemMiniCard2 = ({
+	problem,
+	disabled = false,
+	disabledHighlight = false,
+	onClick = () => {},
+}: {
+	problem: ProblemPopulateTestcases | ProblemSecureModel | ProblemModel;
+	disabled?: boolean;
+	disabledHighlight?: boolean;
+	onClick?: () => void;
+}) => {
+
+	const [highlightTitle, setHighlightTitle] = useState(false);
+
+	const handleMouseOver = () => {
+		setHighlightTitle(true);
+	};
+	const handleMouseOut = () => {
+		setHighlightTitle(false);
+	};
+
+	const customCardCSS = (): string => {
+		let className = "p-2 cursor-pointer ";
+
+		if (disabled) {
+			className += "opacity-50 ";
+		} else {
+			if (highlightTitle && !disabledHighlight) {
+				className += "border-green-500 bg-green-100 ";
+			}
+		}
+		return className;
+	};
+
+	return (
+		problem && (
+			<MyProblemContextMenu problem={problem}>
+				<Card
+					onMouseDown={(e) => onMiddleClickOpenInNewTab(e,`/my/problems/${problem.problem_id}`)}
+					onClick={() => onClick()}
+					onMouseOver={handleMouseOver}
+					onMouseOut={handleMouseOut}
+					className={customCardCSS()}
+
+					// className={`pt-6 px-5 ${disabled ? "opacity-50" : }`}`}
+				>
+					<div className="flex items-center justify-between font-medium text-base ">
+						<div className="flex items-center w-full">
+							<FileSpreadsheet
+								size={20}
+								className="text-blue-400 mr-2"
+							/>
+							<p className="font-mono line-clamp-1 w-4/5">{problem.title}</p>
+						</div>
+						{/* <div className="bg-blue-600 w-4 h-4 text-center text-white rounded-full text-xs">
+							{collection.problems.length}
+						</div> */}
+					</div>
+				</Card>
+			</MyProblemContextMenu>
+		)
+	);
+};
+
+export default MyProblemMiniCard2;
diff --git a/src/components/Cards/ProblemCards/PublicProblemCard.tsx b/src/components/Cards/ProblemCards/PublicProblemCard.tsx
new file mode 100644
index 0000000..1e6298b
--- /dev/null
+++ b/src/components/Cards/ProblemCards/PublicProblemCard.tsx
@@ -0,0 +1,93 @@
+import { FileSpreadsheet, Puzzle } from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { ProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel } from "../../../types/models/Problem.model";
+import { onMiddleClickOpenInNewTab } from "../../../utilities/OnMiddleClickOpenInNewTab";
+import { readableDateFormat } from "../../../utilities/ReadableDateFormat";
+import TestcasesGradingIndicator from "../../TestcasesGradingIndicator";
+import { Button } from "../../shadcn/Button";
+import { Card, CardContent } from "../../shadcn/Card";
+import { Label } from "../../shadcn/Label";
+
+const PublicProblemCard = ({
+	problem,
+}: {
+	problem: ProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel;
+}) => {
+	const navigate = useNavigate();
+	const [isHovering, setIsHovering] = useState(false);
+
+	return (
+		<Card
+			onMouseEnter={() => setIsHovering(true)}
+			onMouseLeave={() => setIsHovering(false)}
+			className={`pt-6 px-5 cursor-pointer ${
+				isHovering ? "border-green-500 bg-green-100" : ""
+			}`}
+		>
+			<CardContent>
+				<div>
+					<div className="flex items-center">
+						<FileSpreadsheet className="text-blue-400 mr-2" />
+						<h1
+							className={`font-bold ${
+								isHovering ? "text-green-600" : ""
+							}`}
+						>
+							{problem.title}
+						</h1>
+					</div>
+					<div className="flex items-stretch">
+						<div className="w-2/12">
+							<div className="">
+								<Label>Author</Label>
+							</div>
+							<div className="leading-3 text-gray-400">
+								<Label>{problem.creator.username}</Label>
+							</div>
+						</div>
+						<div className="w-3/12">
+							<div className="">
+								<Label>Updated Date</Label>
+							</div>
+							<div className="leading-3 text-gray-400">
+								<Label>
+									{readableDateFormat(problem.updated_date)}
+								</Label>
+							</div>
+						</div>
+						<div className={`w-4/12 xxl:w-5/12 self-end`}>
+							<Label>Best Submission</Label>
+							{problem.best_submission ? (
+								<TestcasesGradingIndicator
+									disableHover
+									submissionTestcases={
+										problem.best_submission?.runtime_output
+									}
+								/>
+							) : (
+								<div className="text-gray-400">
+									-
+								</div>
+							)}
+						</div>
+						<div className="w-3/12 xxl:w-2/12 self-center">
+							<Button
+								onMouseDown={(e) => onMiddleClickOpenInNewTab(e,`/problems/${problem.problem_id}`)}
+								onClick={() =>
+									navigate(`/problems/${problem.problem_id}`)
+								}
+								// className="bg-white border-green-500 border-2 text-green-500 hover:bg-green-500 hover:text-white"
+							>
+								<Puzzle className="mr-2" />
+								Solve This Problem
+							</Button>
+						</div>
+					</div>
+				</div>
+			</CardContent>
+		</Card>
+	);
+};
+
+export default PublicProblemCard;
diff --git a/src/components/Cards/ProblemCards/PublicProblemMiniCard.tsx b/src/components/Cards/ProblemCards/PublicProblemMiniCard.tsx
new file mode 100644
index 0000000..d0afb12
--- /dev/null
+++ b/src/components/Cards/ProblemCards/PublicProblemMiniCard.tsx
@@ -0,0 +1,64 @@
+import { FileSpreadsheet, Puzzle } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { ProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel } from "../../../types/models/Problem.model";
+import { onMiddleClickOpenInNewTab } from "../../../utilities/OnMiddleClickOpenInNewTab";
+import TestcasesGradingIndicator from "../../TestcasesGradingIndicator";
+import { Button } from "../../shadcn/Button";
+import { Card } from "../../shadcn/Card";
+
+const PublicProblemMiniCard = ({
+	problem,
+}: {
+	problem: ProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel;
+}) => {
+
+	const navigate = useNavigate();
+
+	return (
+		<Card className="px-5 cursor-pointer py-2">
+			<div className="flex items-center">
+				<h1 className="font-bold flex items-center w-3/12 font-mono text-base">
+					<FileSpreadsheet size={18} className="text-blue-400 mr-2" />
+					{problem?.title}
+				</h1>
+
+				{/* <div className="flex w-2/12">
+					<p className="font-medium mr-2">Created by</p>
+					<p className="font-medium text-gray-400">
+						{problem.creator.username}
+					</p>
+				</div> */}
+
+				<div className="flex w-5/12 items-center">
+					{/* <p className="font-medium mr-2">Best Submission</p> */}
+					{problem.best_submission ? (
+						<TestcasesGradingIndicator
+							sizeX={1}
+							sizeY={3}
+							submissionTestcases={
+								problem.best_submission.runtime_output
+							}
+						/>
+					) : (
+						"-"
+					)}
+				</div>
+
+				<div>
+					<Button
+						onMouseDown={(e) => onMiddleClickOpenInNewTab(e,`/problems/${problem.problem_id}`)}
+						onClick={() =>
+							navigate(`./problems/${problem.problem_id}`)
+						}
+						// className="bg-white border-green-500 border-2 text-green-500 hover:bg-green-500 hover:text-white"
+					>
+						<Puzzle className="mr-2" />
+						Solve This Problem
+					</Button>
+				</div>
+			</div>
+		</Card>
+	);
+};
+
+export default PublicProblemMiniCard;
diff --git a/src/components/Cards/SubmissionCard.tsx b/src/components/Cards/SubmissionCard.tsx
new file mode 100644
index 0000000..d63cacc
--- /dev/null
+++ b/src/components/Cards/SubmissionCard.tsx
@@ -0,0 +1,56 @@
+import { FileSpreadsheet, StepForward } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { SubmissionPopulateSubmissionTestcaseAndProblemSecureModel } from "../../types/models/Submission.model";
+import { readableDateFormat } from "../../utilities/ReadableDateFormat";
+import TestcasesGradingIndicator from "../TestcasesGradingIndicator";
+import { Button } from "../shadcn/Button";
+import { Card } from "../shadcn/Card";
+
+const SubmissionCard = ({
+	submission,
+}: {
+	submission: SubmissionPopulateSubmissionTestcaseAndProblemSecureModel;
+}) => {
+
+    const navigate = useNavigate()
+
+    const handleNavigateProblem = () => {
+        if (submission.topic) {
+            navigate(`/courses/${submission.topic}/problems/${submission.problem.problem_id}`)
+        }
+        else {
+            navigate(`/problems/${submission.problem.problem_id}`)
+        }
+    }
+
+	return (
+		<Card className="p-5">
+			<p className="text-2xl font-bold flex">
+				<FileSpreadsheet size={30} className="text-blue-400 mr-2" />
+				{submission.problem.title}
+			</p>
+
+			<div className="text-sm font-medium my-3">
+				<p>Submitted Date</p>
+                <p className="text-gray-400">{readableDateFormat(submission.date)}</p>
+			</div>
+
+			<div className="flex justify-between">
+				<TestcasesGradingIndicator
+                    sizeX={1}
+                    sizeY={3}
+					submissionTestcases={submission.runtime_output}
+				/>
+
+				<Button
+                    onClick={handleNavigateProblem}
+                >
+					<StepForward className="mr-2" />
+					Continue
+				</Button>
+			</div>
+		</Card>
+	);
+};
+
+export default SubmissionCard;
diff --git a/src/components/Checkmark.tsx b/src/components/Checkmark.tsx
new file mode 100644
index 0000000..a620e82
--- /dev/null
+++ b/src/components/Checkmark.tsx
@@ -0,0 +1,26 @@
+import { Check, X } from 'lucide-react';
+
+const Checkmark = ({ status,variant="check" }: { 
+	status: boolean,
+	variant?: "check" | "circle"
+}) => {
+
+	switch(variant){
+		case "check":
+			return status ? (
+				<Check
+				size={20} className="mr-2 text-green-400" />
+			) : (
+				<X size={20} className="mr-2 text-red-400" />
+			)
+
+		case "circle":
+			return status ? (
+				<div className='p-2 rounded-full bg-green-400'></div>
+			) : (
+				<div className='p-2 rounded-full bg-red-400'></div>
+			)
+	}
+}
+
+export default Checkmark
\ No newline at end of file
diff --git a/src/components/ContextMenus/MyCollectionContextMenu.tsx b/src/components/ContextMenus/MyCollectionContextMenu.tsx
new file mode 100644
index 0000000..8bb322f
--- /dev/null
+++ b/src/components/ContextMenus/MyCollectionContextMenu.tsx
@@ -0,0 +1,125 @@
+import { CopyPlus, PencilIcon, Trash } from "lucide-react";
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { CollectionService } from "../../services/Collection.service";
+import { ProblemService } from "../../services/Problem.service";
+import { transformCollectionPopulateCollectionProblemsPopulateProblemAndCollectionGroupPermissionsPopulateGroupModel2CreateCollectionRequest } from "../../types/adapters/Collection.adapter";
+import { transformCreateCollectionRequestForm2CreateCollectionRequestForm } from "../../types/adapters/CreateCollectionRequestForm.adapter";
+import { CollectionModel } from "../../types/models/Collection.model";
+import DeleteCollectionConfirmationDialog from "../Dialogs/DeleteCollectionConfirmationDialog";
+import {
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuSeparator,
+	ContextMenuTrigger,
+} from "../shadcn/ContextMenu";
+import { toast } from "../shadcn/UseToast";
+
+const MyCollectionContextMenu = ({
+	children,
+	collection,
+}: {
+	children: React.ReactNode;
+	collection: CollectionModel;
+}) => {
+	const accountId = String(localStorage.getItem("account_id"));
+	const navigate = useNavigate();
+	const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
+
+	const handleCloneCollection = async () => {
+		const response = await CollectionService.get(
+			collection.collection_id,
+			accountId
+		);
+
+		let createRequest =
+			transformCollectionPopulateCollectionProblemsPopulateProblemAndCollectionGroupPermissionsPopulateGroupModel2CreateCollectionRequest(
+				response.data
+			);
+
+		createRequest.title += " (Copy)";
+
+		const { request, groups, problemIds, problemGroupPermissions } =
+			transformCreateCollectionRequestForm2CreateCollectionRequestForm(
+				createRequest
+			);
+
+		CollectionService.create(accountId, request)
+			.then((response) => {
+				return CollectionService.updateProblem(
+					response.data.collection_id,
+					problemIds
+				);
+			})
+			.then((response) => {
+				return CollectionService.updateGroupPermissions(
+					response.data.collection_id,
+					accountId,
+					groups
+				);
+			})
+			.then((response) => {
+				let promise = [];
+				for (const problem of problemGroupPermissions) {
+					promise.push(
+						ProblemService.updateGroupPermissions(
+							problem.problem_id,
+							accountId,
+							problem.groupPermissions
+						)
+					);
+				}
+
+				return {
+					promise: Promise.all(promise),
+					collection_id: response.data.collection_id,
+				};
+			})
+			.then((response) => {
+				toast({
+					title: "Create Completed",
+				});
+				window.open(`/my/collections/${response.collection_id}`,'_blank');
+			});
+	};
+
+	return (
+		<ContextMenu>
+			<DeleteCollectionConfirmationDialog
+				collection={collection}
+				open={openDeleteDialog}
+				setOpen={setOpenDeleteDialog}
+				afterDelete={() => window.location.reload()}
+			/>
+			<ContextMenuTrigger>{children}</ContextMenuTrigger>
+			<ContextMenuContent>
+				<ContextMenuItem disabled>
+					<div className="font-medium">{collection.name}</div>
+				</ContextMenuItem>
+				<ContextMenuSeparator />
+				<ContextMenuItem
+					onClick={() =>
+						navigate(`/my/collections/${collection.collection_id}/edit`)
+					}
+				>
+					<PencilIcon className="mr-2" size={16} />
+					Edit Collection
+				</ContextMenuItem>
+				<ContextMenuItem onClick={handleCloneCollection}>
+					<CopyPlus className="mr-2" size={16} />
+					Clone Collection
+				</ContextMenuItem>
+				<ContextMenuItem
+					onClick={() => setOpenDeleteDialog(true)}
+					className="text-red-400"
+				>
+					<Trash className="mr-2" size={16} />
+					Delete Collection
+				</ContextMenuItem>
+			</ContextMenuContent>
+		</ContextMenu>
+	);
+};
+
+export default MyCollectionContextMenu;
diff --git a/src/components/ContextMenus/MyCourseContextMenu.tsx b/src/components/ContextMenus/MyCourseContextMenu.tsx
new file mode 100644
index 0000000..214965e
--- /dev/null
+++ b/src/components/ContextMenus/MyCourseContextMenu.tsx
@@ -0,0 +1,125 @@
+import { CopyPlus, PencilIcon, Trash } from "lucide-react";
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { CollectionService } from "../../services/Collection.service";
+import { TopicService } from "../../services/Topic.service";
+import { transformCreateCourseRequestForm2CreateTopicRequest } from "../../types/adapters/CreateCourseRequestForm.adapter";
+import { transformTopicPopulateTopicCollectionPopulateCollectionAndTopicGroupPermissionPopulateGroupModel2CreateCourseRequest } from "../../types/adapters/Topic.adapter";
+import { TopicModel } from "../../types/models/Topic.model";
+import DeleteCourseConfirmationDialog from "../Dialogs/DeleteCourseConfirmationDialog";
+import {
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuSeparator,
+	ContextMenuTrigger,
+} from "../shadcn/ContextMenu";
+import { toast } from "../shadcn/UseToast";
+
+const MyCourseContextMenu = ({
+	children,
+	course,
+}: {
+	children: React.ReactNode;
+	course: TopicModel;
+}) => {
+	const accountId = String(localStorage.getItem("account_id"));
+	const navigate = useNavigate();
+	const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
+
+	const handleCloneCourse = async () => {
+		const response = await TopicService.get(
+			accountId,
+			course.topic_id
+		);
+
+		let createRequest =
+			transformTopicPopulateTopicCollectionPopulateCollectionAndTopicGroupPermissionPopulateGroupModel2CreateCourseRequest(
+				response.data
+			);
+
+		createRequest.title += " (Copy)";
+
+		const { formData, groups, collectionIds, collectionGroupsPermissions } =
+			transformCreateCourseRequestForm2CreateTopicRequest(
+				createRequest
+			);
+
+			TopicService.create(accountId, formData)
+			.then((response) => {
+				return TopicService.updateCollections(
+					response.data.topic_id,
+					collectionIds
+				);
+			})
+			.then((response) => {
+				return TopicService.updateGroupPermissions(
+					response.data.topic_id,
+					accountId,
+					groups
+				);
+			})
+			.then((response) => {
+				let promise = [];
+				for (const collection of collectionGroupsPermissions) {
+					promise.push(
+						CollectionService.updateGroupPermissions(
+							collection.collection_id,
+							accountId,
+							collection.groupPermissions
+						)
+					);
+				}
+
+				return {
+					promise: Promise.all(promise),
+					topic_id: response.data.topic_id,
+				};
+			})
+			.then(({ topic_id }) => {
+				toast({
+					title: "Create Completed",
+				});
+				window.open(`/my/courses/${topic_id}`,'_blank');
+			});
+	};
+
+	return (
+		<ContextMenu>
+			<DeleteCourseConfirmationDialog
+				course={course}
+				open={openDeleteDialog}
+				setOpen={setOpenDeleteDialog}
+				afterDelete={() => window.location.reload()}
+			/>
+			<ContextMenuTrigger>{children}</ContextMenuTrigger>
+			<ContextMenuContent>
+				<ContextMenuItem disabled>
+					<div className="font-medium">{course.name}</div>
+				</ContextMenuItem>
+				<ContextMenuSeparator />
+				<ContextMenuItem
+					onClick={() =>
+						navigate(`/my/courses/${course.topic_id}/edit`)
+					}
+				>
+					<PencilIcon className="mr-2" size={16} />
+					Edit Course
+				</ContextMenuItem>
+				<ContextMenuItem onClick={handleCloneCourse}>
+					<CopyPlus className="mr-2" size={16} />
+					Clone Course
+				</ContextMenuItem>
+				<ContextMenuItem
+					onClick={() => setOpenDeleteDialog(true)}
+					className="text-red-400"
+				>
+					<Trash className="mr-2" size={16} />
+					Delete Course
+				</ContextMenuItem>
+			</ContextMenuContent>
+		</ContextMenu>
+	);
+};
+
+export default MyCourseContextMenu;
diff --git a/src/components/ContextMenus/MyProblemContextMenu.tsx b/src/components/ContextMenus/MyProblemContextMenu.tsx
new file mode 100644
index 0000000..3769102
--- /dev/null
+++ b/src/components/ContextMenus/MyProblemContextMenu.tsx
@@ -0,0 +1,105 @@
+import { CopyPlus, PencilIcon, Trash } from "lucide-react";
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { ProblemService } from "../../services/Problem.service";
+import { transformCreateProblemRequestForm2CreateProblemRequest } from "../../types/adapters/CreateProblemRequestForm.adapter";
+import {
+	ProblemModel,
+	ProblemPopulateTestcases,
+	ProblemSecureModel,
+} from "../../types/models/Problem.model";
+import DeleteProblemConfirmationDialog from "../Dialogs/DeleteProblemConfirmationDialog";
+import {
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuSeparator,
+	ContextMenuTrigger,
+} from "../shadcn/ContextMenu";
+import { toast } from "../shadcn/UseToast";
+import { transformProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel2CreateProblemRequestForm } from "./../../types/adapters/Problem.adapter";
+
+const MyProblemContextMenu = ({
+	children,
+	problem,
+}: {
+	children: React.ReactNode;
+	problem: ProblemModel | ProblemPopulateTestcases | ProblemSecureModel;
+}) => {
+	const accountId = String(localStorage.getItem("account_id"));
+	const navigate = useNavigate();
+	const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
+
+	const handleCloneProblem = async () => {
+		const response = await ProblemService.get(
+			accountId,
+			problem.problem_id
+		);
+
+		let createRequest = transformProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel2CreateProblemRequestForm(
+			response.data
+		)
+
+		createRequest.title += " (Copy)"
+
+		const { request, groups } =
+			transformCreateProblemRequestForm2CreateProblemRequest(
+				createRequest
+			);
+
+		ProblemService.create(accountId, request)
+			.then((response) => {
+				return ProblemService.updateGroupPermissions(
+					response.data.problem_id,
+					accountId,
+					groups
+				);
+			})
+			.then((response) => {
+				// setLoading(false);
+				toast({
+					title: `Cloned ${response.data.title}`,
+				});
+				window.open(`/my/problems/${response.data.problem_id}`, "_blank");
+			});
+	};
+
+	return (
+		<ContextMenu>
+			<DeleteProblemConfirmationDialog
+				problem={problem}
+				open={openDeleteDialog}
+				setOpen={setOpenDeleteDialog}
+				afterDelete={() => window.location.reload()}
+			/>
+			<ContextMenuTrigger>{children}</ContextMenuTrigger>
+			<ContextMenuContent>
+				<ContextMenuItem disabled>
+					<div className="font-medium">{problem.title}</div>
+				</ContextMenuItem>
+				<ContextMenuSeparator />
+				<ContextMenuItem
+					onClick={() =>
+						navigate(`/my/problems/${problem.problem_id}/edit`)
+					}
+				>
+					<PencilIcon className="mr-2" size={16} />
+					Edit Problem
+				</ContextMenuItem>
+				<ContextMenuItem onClick={handleCloneProblem}>
+					<CopyPlus className="mr-2" size={16} />
+					Clone Problem
+				</ContextMenuItem>
+				<ContextMenuItem
+					onClick={() => setOpenDeleteDialog(true)}
+					className="text-red-400"
+				>
+					<Trash className="mr-2" size={16} />
+					Delete Problem
+				</ContextMenuItem>
+			</ContextMenuContent>
+		</ContextMenu>
+	);
+};
+
+export default MyProblemContextMenu;
diff --git a/src/components/CoursePlaylist/CollectionCard.tsx b/src/components/CoursePlaylist/CollectionCard.tsx
new file mode 100644
index 0000000..e22af71
--- /dev/null
+++ b/src/components/CoursePlaylist/CollectionCard.tsx
@@ -0,0 +1,15 @@
+import { Card, CardContent, CardDescription } from "../shadcn/Card";
+
+const MyCollectionCard = () => {
+	return (
+		<Card>
+			<CardContent className="p-2 pl-5">
+				<CardDescription>
+					Chapter 1 - Lorem ipsum dolor sit
+				</CardDescription>
+			</CardContent>
+		</Card>
+	);
+};
+
+export default MyCollectionCard;
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
new file mode 100644
index 0000000..3422aad
--- /dev/null
+++ b/src/components/DataTable.tsx
@@ -0,0 +1,44 @@
+import { Props } from "../types/Props";
+import {
+	Table,
+	TableBody,
+	TableCaption,
+	TableHead,
+	TableHeader,
+	TableRow
+} from "./shadcn/Table";
+
+
+
+const DataTable = ({children}:Props) => {
+	return (
+		<Table>
+			<TableCaption>A list of your recent invoices.</TableCaption>
+			<TableHeader>
+				<TableRow>
+					<TableHead className="w-[100px]">Invoice</TableHead>
+					<TableHead>Status</TableHead>
+					<TableHead>Method</TableHead>
+					<TableHead className="text-right">Amount</TableHead>
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+                {children}
+				{/* {invoices.map((invoice) => (
+					<TableRow key={invoice.invoice}>
+						<TableCell className="font-medium">
+							{invoice.invoice}
+						</TableCell>
+						<TableCell>{invoice.paymentStatus}</TableCell>
+						<TableCell>{invoice.paymentMethod}</TableCell>
+						<TableCell className="text-right">
+							{invoice.totalAmount}
+						</TableCell>
+					</TableRow>
+				))} */}
+			</TableBody>
+		</Table>
+	);
+};
+
+export default DataTable;
diff --git a/src/components/DetailPlateEditor.tsx b/src/components/DetailPlateEditor.tsx
new file mode 100644
index 0000000..6283f1d
--- /dev/null
+++ b/src/components/DetailPlateEditor.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import { CommentsProvider } from '@udecode/plate-comments';
+import { Plate } from '@udecode/plate-common';
+import { useRef } from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
+import { commentsUsers, myUserId } from '../lib/plate/comments';
+import { MENTIONABLES } from '../lib/plate/mentionables';
+import { plugins } from '../lib/plate/plate-plugins';
+import { cn } from '../lib/utils';
+import { PlateEditorValueType } from '../types/PlateEditorValueType';
+import { CommentsPopover } from './plate-ui/comments-popover';
+import { CursorOverlay } from './plate-ui/cursor-overlay';
+import { Editor } from './plate-ui/editor';
+import { FixedToolbar } from './plate-ui/fixed-toolbar';
+import { FixedToolbarButtons } from './plate-ui/fixed-toolbar-buttons';
+import { FloatingToolbar } from './plate-ui/floating-toolbar';
+import { FloatingToolbarButtons } from './plate-ui/floating-toolbar-buttons';
+import { MentionCombobox } from './plate-ui/mention-combobox';
+
+export default function DetailPlateEditor({value,onChange}:{
+    value?: PlateEditorValueType,
+    onChange?: (value: PlateEditorValueType) => void
+}) {
+  const containerRef = useRef(null);
+
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <CommentsProvider users={commentsUsers} myUserId={myUserId}>
+        <Plate plugins={plugins} initialValue={value} onChange={(e) => {
+            onChange && onChange(e)
+        }}>
+          <div
+            ref={containerRef}
+            className={cn(
+              // Block selection
+              '[&_.slate-start-area-left]:!w-[64px] [&_.slate-start-area-right]:!w-[64px] [&_.slate-start-area-top]:!h-4'
+            )}
+          >
+            <FixedToolbar>
+              <FixedToolbarButtons />
+            </FixedToolbar>
+
+            <Editor
+              
+              className="px-[96px] py-16 h-[60vh] md:h-[58vh] overflow-y-scroll"
+              autoFocus
+              focusRing={false}
+              variant="ghost"
+              size="md"
+            />
+
+            <FloatingToolbar>
+              <FloatingToolbarButtons />
+            </FloatingToolbar>
+
+            <MentionCombobox items={MENTIONABLES} />
+
+            <CommentsPopover />
+
+            <CursorOverlay containerRef={containerRef} />
+          </div>
+        </Plate>
+      </CommentsProvider>
+    </DndProvider>
+  );
+}
diff --git a/src/components/Dialogs/DeleteCollectionConfirmationDialog.tsx b/src/components/Dialogs/DeleteCollectionConfirmationDialog.tsx
new file mode 100644
index 0000000..ed31153
--- /dev/null
+++ b/src/components/Dialogs/DeleteCollectionConfirmationDialog.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { CollectionService } from "../../services/Collection.service";
+import { CollectionModel } from "../../types/models/Collection.model";
+import { Button } from "../shadcn/Button";
+import { Dialog, DialogContent } from "../shadcn/Dialog";
+
+const DeleteCollectionConfirmationDialog = ({
+  open,
+  setOpen,
+  collection,
+  afterDelete=()=>{}
+}:{
+  collection: CollectionModel,
+  open: boolean,
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>,
+  afterDelete?: () => void
+}) => {
+
+	const accountId = String(localStorage.getItem("account_id"));
+
+  const handleDelete = () => {
+    setOpen(false)
+    CollectionService.delete(collection.collection_id,accountId).then(() => afterDelete())
+    
+  }
+
+	return (
+		<Dialog open={open} onOpenChange={() => setOpen(false)}>
+			<DialogContent>
+				<div>
+					<div>Are you sure you want to delete this collection?</div>
+					<div className="font-bold">{collection.name}</div>
+				</div>
+				<div className="flex justify-end gap-2">
+					<Button onClick={handleDelete} className="bg-red-500 hover:bg-red-400">
+						Delete
+					</Button>
+					<Button onClick={() => setOpen(false)} className="bg-gray-500 hover:bg-gray-400">
+						Cancel
+					</Button>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+export default DeleteCollectionConfirmationDialog;
diff --git a/src/components/Dialogs/DeleteCourseConfirmationDialog.tsx b/src/components/Dialogs/DeleteCourseConfirmationDialog.tsx
new file mode 100644
index 0000000..c6f79af
--- /dev/null
+++ b/src/components/Dialogs/DeleteCourseConfirmationDialog.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { TopicService } from "../../services/Topic.service";
+import { TopicModel } from "../../types/models/Topic.model";
+import { Button } from "../shadcn/Button";
+import { Dialog, DialogContent } from "../shadcn/Dialog";
+
+const DeleteCourseConfirmationDialog = ({
+	open,
+	setOpen,
+	course,
+	afterDelete = () => {},
+}: {
+	course: TopicModel;
+	open: boolean;
+	setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+	afterDelete?: () => void;
+}) => {
+	const accountId = String(localStorage.getItem("account_id"));
+
+	const handleDelete = () => {
+		setOpen(false);
+		TopicService.delete(course.topic_id,accountId).then(() =>
+			afterDelete()
+		);
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={() => setOpen(false)}>
+			<DialogContent>
+				<div>
+					<div>Are you sure you want to delete this course?</div>
+					<div className="font-bold">{course.name}</div>
+				</div>
+				<div className="flex justify-end gap-2">
+					<Button
+						onClick={handleDelete}
+						className="bg-red-500 hover:bg-red-400"
+					>
+						Delete
+					</Button>
+					<Button
+						onClick={() => setOpen(false)}
+						className="bg-gray-500 hover:bg-gray-400"
+					>
+						Cancel
+					</Button>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+export default DeleteCourseConfirmationDialog;
diff --git a/src/components/Dialogs/DeleteProblemConfirmationDialog.tsx b/src/components/Dialogs/DeleteProblemConfirmationDialog.tsx
new file mode 100644
index 0000000..0160ad8
--- /dev/null
+++ b/src/components/Dialogs/DeleteProblemConfirmationDialog.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { ProblemService } from "../../services/Problem.service";
+import { ProblemModel, ProblemPopulateTestcases, ProblemSecureModel } from "../../types/models/Problem.model";
+import { Button } from "../shadcn/Button";
+import { Dialog, DialogContent } from "../shadcn/Dialog";
+
+const DeleteProblemConfirmationDialog = ({
+  open,
+  setOpen,
+  problem,
+  afterDelete=()=>{}
+}:{
+  problem: ProblemPopulateTestcases | ProblemSecureModel | ProblemModel,
+  open: boolean,
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>,
+  afterDelete?: () => void
+}) => {
+
+  const handleDelete = () => {
+    setOpen(false)
+    ProblemService.delete(problem.problem_id).then(() => afterDelete())
+    
+  }
+
+	return (
+		<Dialog open={open} onOpenChange={() => setOpen(false)}>
+			<DialogContent>
+				<div>
+					<div>Are you sure you want to delete this problem?</div>
+					<div className="font-bold">{problem.title}</div>
+				</div>
+				<div className="flex justify-end gap-2">
+					<Button onClick={handleDelete} className="bg-red-500 hover:bg-red-400">
+						Delete
+					</Button>
+					<Button onClick={() => setOpen(false)} className="bg-gray-500 hover:bg-gray-400">
+						Cancel
+					</Button>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+export default DeleteProblemConfirmationDialog;
diff --git a/src/components/Forms/CreateCollectionForm/GeneralDetail.tsx b/src/components/Forms/CreateCollectionForm/GeneralDetail.tsx
new file mode 100644
index 0000000..01274b3
--- /dev/null
+++ b/src/components/Forms/CreateCollectionForm/GeneralDetail.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { CreateCollectionRequestForm } from '../../../types/forms/CreateCollectionRequestForm';
+import DetailPlateEditor from '../../DetailPlateEditor';
+import { Input } from '../../shadcn/Input';
+import { Label } from '../../shadcn/Label';
+import { PlateEditorValueType } from '../../../types/PlateEditorValueType';
+
+const GeneralDetail = ({
+	createRequest,
+	setCreateRequest,
+}: {
+	createRequest: CreateCollectionRequestForm;
+	setCreateRequest: React.Dispatch<React.SetStateAction<CreateCollectionRequestForm>>;
+}) => {
+	// const [editorUpdateCooldown, setEditorUpdateCooldown] = useState(false);
+
+	const handleEditorChange = (value: PlateEditorValueType) => {
+	// 	// if (!editorUpdateCooldown) {
+			setCreateRequest({ ...createRequest, description: value });
+
+	// 		// setEditorUpdateCooldown(true);
+	// 		// setTimeout(() => {
+	// 		// 	setEditorUpdateCooldown(false);
+	// 		// }, 1000);
+	// 	}
+	};
+
+	return (
+		<div>
+			<Label>Title</Label>
+			<Input
+				value={createRequest.title}
+				onChange={(e) =>
+					setCreateRequest({
+						...createRequest,
+						title: e.target.value,
+					})
+				}
+				type="text"
+			/>
+
+			<Label>Detail</Label>
+			<div className="rounded-lg border bg-background shadow">
+				<DetailPlateEditor
+					value={createRequest.description}
+					onChange={(e) => handleEditorChange(e)}
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default GeneralDetail
\ No newline at end of file
diff --git a/src/components/Forms/CreateCollectionForm/ManageGroups.tsx b/src/components/Forms/CreateCollectionForm/ManageGroups.tsx
new file mode 100644
index 0000000..f533f38
--- /dev/null
+++ b/src/components/Forms/CreateCollectionForm/ManageGroups.tsx
@@ -0,0 +1,371 @@
+import React, { useEffect, useState } from "react";
+import {
+	CollectionGroupPermissionRequestForm,
+	CreateCollectionRequestForm,
+} from "../../../types/forms/CreateCollectionRequestForm";
+import GroupAndPermissionManager, {
+	GroupAndPermissionManagerOnAddGroupsCallback,
+	GroupAndPermissionManagerOnRemoveGroupCallback,
+} from "../GroupAndPermissionManager";
+import CollectionPermissionSwitchGroup from "../PermissionSwitchGroups/CollectionPermissionSwitchGroup";
+import { GroupModel } from "../../../types/models/Group.model";
+import { GroupService } from "../../../services/Group.service";
+import { Tabs, TabsList, TabsTrigger } from "../../shadcn/Tabs";
+import PermissionSwitchScrollArea from "../../Permissions/PermissionSwitchScrollArea";
+import MyProblemMiniCard2 from "../../Cards/ProblemCards/MyProblemMiniCard2";
+import { Switch } from "../../shadcn/Switch";
+
+const ManageGroups = ({
+	createRequest,
+	setCreateRequest,
+}: {
+	createRequest: CreateCollectionRequestForm;
+	setCreateRequest: React.Dispatch<
+		React.SetStateAction<CreateCollectionRequestForm>
+	>;
+}) => {
+	const accountId = String(localStorage.getItem("account_id"));
+
+	const [groupPermission, setGroupPermission] =
+		useState<CollectionGroupPermissionRequestForm>();
+
+	const [selectedIndex, setSelectedIndex] = useState<number>(-1);
+	const [currentGroupId, setCurrentGroupId] = useState<string>("");
+
+	const handleAddGroups = ({
+		addingGroups,
+	}: GroupAndPermissionManagerOnAddGroupsCallback) => {
+		const newGroupPermissions = addingGroups.map((group) => ({
+			group_id: group.group_id,
+			group,
+			manageCollections: group.permission_manage_collections,
+			viewCollections: group.permission_view_collections,
+		}));
+
+		setCreateRequest({
+			...createRequest,
+			groupPermissions: [
+				...createRequest.groupPermissions,
+				...newGroupPermissions,
+			],
+		});
+	};
+
+	const handleRemoveGroup = ({
+		index,
+	}: GroupAndPermissionManagerOnRemoveGroupCallback) => {
+		setCreateRequest({
+			...createRequest,
+			groupPermissions: createRequest.groupPermissions.filter(
+				(_, i) => i !== index
+			),
+		});
+	};
+
+	useEffect(() => {
+		if (
+			selectedIndex >= 0 &&
+			selectedIndex < createRequest.groupPermissions.length
+		) {
+			setGroupPermission(createRequest.groupPermissions[selectedIndex]);
+			setCurrentGroupId(
+				createRequest.groupPermissions[selectedIndex].group_id
+			);
+		}
+	}, [selectedIndex]);
+
+	useEffect(() => {
+		if (groupPermission) {
+			setCreateRequest({
+				...createRequest,
+				groupPermissions: [
+					...createRequest.groupPermissions.slice(0, selectedIndex),
+					groupPermission,
+					...createRequest.groupPermissions.slice(selectedIndex + 1),
+				],
+			});
+		}
+	}, [groupPermission]);
+
+	const [tabValue, setTabValue] = useState<string>("collection");
+	const [allGroups, setAllGroups] = useState<GroupModel[]>([]);
+
+	useEffect(() => {
+		GroupService.getAllAsCreator(accountId).then((response) => {
+			setAllGroups(response.data.groups);
+		});
+	}, [accountId]);
+
+	return (
+		<>
+			<div className="flex justify-end">
+				<Tabs value={tabValue} onValueChange={(e) => setTabValue(e)}>
+					<TabsList>
+						<TabsTrigger value="collection">
+							Collection Permissions
+						</TabsTrigger>
+						<TabsTrigger value="problems">
+							Problem Permissions
+						</TabsTrigger>
+					</TabsList>
+				</Tabs>
+			</div>
+			<GroupAndPermissionManager
+				allGroups={allGroups}
+				createRequest={createRequest}
+				// setCreateRequest={setCreateRequest}
+				onAddGroups={(e) => handleAddGroups(e)}
+				onRemoveGroup={(e) => handleRemoveGroup(e)}
+				selectedIndex={selectedIndex}
+				setSelectedIndex={setSelectedIndex}
+			>
+				<>
+					{tabValue === "collection" && (
+						<PermissionSwitchScrollArea>
+							{groupPermission && selectedIndex >= 0 && (
+								<CollectionPermissionSwitchGroup
+									manageCollectionsChecked={
+										groupPermission.manageCollections
+									}
+									viewCollectionsChecked={
+										groupPermission.viewCollections
+									}
+									onClickManageCollections={() => {
+										setGroupPermission({
+											...groupPermission,
+											manageCollections:
+												!groupPermission.manageCollections,
+										});
+									}}
+									onClickViewCollections={() => {
+										setGroupPermission({
+											...groupPermission,
+											viewCollections:
+												!groupPermission.viewCollections,
+										});
+									}}
+								/>
+							)}
+						</PermissionSwitchScrollArea>
+					)}
+
+					{tabValue === "problems" &&
+						groupPermission &&
+						selectedIndex >= 0 && (
+							<div className="grid gap-y-2 p-2 rounded-md">
+								{createRequest.problemsInterface.map(
+									(collectionProblem) => (
+										<div className="flex items-center justify-between pr-5">
+											<div className="w-1/2">
+												<MyProblemMiniCard2
+													disabledHighlight
+													problem={
+														collectionProblem.problem
+													}
+												/>
+											</div>
+
+											<div className="text-base font-medium flex items-center">
+												View Problem
+												<Switch
+													checked={
+														collectionProblem.groupPermissions?.find(
+															(gp) =>
+																gp.group
+																	.group_id ===
+																currentGroupId
+														)?.viewProblems ||
+														false
+													}
+													onClick={() => {
+														const findGroup =
+														collectionProblem.groupPermissions?.find(
+																(gp) =>
+																	gp.group
+																		.group_id ===
+																	currentGroupId
+															);
+
+														const newGroupPermissions =
+															collectionProblem.groupPermissions.map(
+																(gp) => {
+																	if (
+																		gp.group
+																			.group_id ===
+																		currentGroupId
+																	) {
+																		return {
+																			...gp,
+																			viewProblems:
+																				!gp.viewProblems,
+																		};
+																	} else {
+																		return gp;
+																	}
+																}
+															);
+
+														if (
+															!findGroup ||
+															newGroupPermissions.length ===
+																0
+														) {
+															newGroupPermissions.push(
+																{
+																	groupId:
+																		currentGroupId,
+																	group: allGroups.find(
+																		(g) =>
+																			g.group_id ===
+																			currentGroupId
+																	)!,
+																	viewProblems:
+																		true,
+																	manageProblems:
+																		false,
+																}
+															);
+														}
+
+														if (
+															!createRequest.collection
+														) {
+															return;
+														}
+
+														setCreateRequest({
+															...createRequest,
+															problemsInterface:
+																createRequest.problemsInterface.map(
+																	(cp) => {
+																		if (
+																			cp
+																				.problem
+																				.problem_id ===
+																			collectionProblem
+																				.problem
+																				.problem_id
+																		) {
+																			return {
+																				...cp,
+																				groupPermissions:
+																					newGroupPermissions,
+																			};
+																		} else {
+																			return cp;
+																		}
+																	}
+																),
+														});
+													}}
+													className="ml-2"
+												/>
+											</div>
+											<div className="text-base font-medium flex items-center">
+												Manage Problem
+												<Switch
+													checked={
+														collectionProblem.groupPermissions?.find(
+															(gp) =>
+																gp.group
+																	.group_id ===
+																currentGroupId
+														)?.manageProblems ||
+														false
+													}
+													onClick={() => {
+														const findGroup =
+															collectionProblem.groupPermissions?.find(
+																(gp) =>
+																	gp.group
+																		.group_id ===
+																	currentGroupId
+															);
+
+														const newGroupPermissions =
+															collectionProblem.groupPermissions.map(
+																(gp) => {
+																	if (
+																		gp.group
+																			.group_id ===
+																		currentGroupId
+																	) {
+																		return {
+																			...gp,
+																			manageProblems:
+																				!gp.manageProblems,
+																		};
+																	} else {
+																		return gp;
+																	}
+																}
+															);
+
+														if (
+															!findGroup ||
+															newGroupPermissions.length ===
+																0
+														) {
+															newGroupPermissions.push(
+																{
+																	groupId:
+																		currentGroupId,
+																	group: allGroups.find(
+																		(g) =>
+																			g.group_id ===
+																			currentGroupId
+																	)!,
+																	viewProblems:
+																		false,
+																	manageProblems:
+																		true,
+																}
+															);
+														}
+
+														if (
+															!createRequest.collection
+														) {
+															return;
+														}
+
+														setCreateRequest({
+															...createRequest,
+															problemsInterface:
+																createRequest.problemsInterface.map(
+																	(cp) => {
+																		if (
+																			cp
+																				.problem
+																				.problem_id ===
+																			collectionProblem
+																				.problem
+																				.problem_id
+																		) {
+																			return {
+																				...cp,
+																				groupPermissions:
+																					newGroupPermissions,
+																			};
+																		} else {
+																			return cp;
+																		}
+																	}
+																),
+														});
+													}}
+													className="ml-2"
+												/>
+											</div>
+										</div>
+									)
+								)}
+							</div>
+						)}
+				</>
+			</GroupAndPermissionManager>
+		</>
+	);
+};
+
+export default ManageGroups;
diff --git a/src/components/Forms/CreateCollectionForm/ManageProblems.tsx b/src/components/Forms/CreateCollectionForm/ManageProblems.tsx
new file mode 100644
index 0000000..7b6c7e1
--- /dev/null
+++ b/src/components/Forms/CreateCollectionForm/ManageProblems.tsx
@@ -0,0 +1,205 @@
+import React, { useEffect, useState } from "react";
+import { ReactSortable } from "react-sortablejs";
+import { ProblemService } from "../../../services/Problem.service";
+import { transformProblemModel2ProblemHashedTable } from "../../../types/adapters/Problem.adapter";
+import {
+	CreateCollectionRequestForm,
+	ProblemItemInterface,
+} from "../../../types/forms/CreateCollectionRequestForm";
+import { ProblemHashedTable } from "../../../types/models/Problem.model";
+import MyProblemMiniCard2 from "../../Cards/ProblemCards/MyProblemMiniCard2";
+import { Input } from "../../shadcn/Input";
+import { ScrollArea } from "../../shadcn/ScrollArea";
+import { Separator } from "../../shadcn/Seperator";
+
+const ManageProblems = ({
+	createRequest,
+	setCreateRequest,
+}: {
+	createRequest: CreateCollectionRequestForm;
+	setCreateRequest: React.Dispatch<
+		React.SetStateAction<CreateCollectionRequestForm>
+	>;
+}) => {
+	const accountId = String(localStorage.getItem("account_id"));
+
+	const [allProblemsSortable, setAllProblemsSortable] = useState<
+		ProblemItemInterface[]
+	>([]);
+	const [selectedProblemsSortable, setSelectedProblemsSortable] = useState<
+		ProblemItemInterface[]
+	>([]);
+	const [allProblems, setAllProblems] = useState<ProblemHashedTable>({});
+
+	const [initial, setInitial] = useState(true);
+	const [selectedProblemSortableIds, setSelectedProblemSortableIds] =
+		useState<string[]>([]);
+
+	useEffect(() => {
+		setSelectedProblemSortableIds(
+			selectedProblemsSortable.map((item) => item.id as string)
+		);
+	}, [selectedProblemsSortable]);
+
+	const handleRemoveSelectedProblem = (id: string) => {
+		setSelectedProblemsSortable([
+			...selectedProblemsSortable.filter((item) => item.id !== id),
+		]);
+	};
+
+	const handleQuickToggleSelectedProblem = (item: ProblemItemInterface) => {
+		// if (selectedProblemsSortable.find((item1) => item1.id === item.id)) {
+		// 	console.log("Remove");
+		// 	handleRemoveSelectedProblem(item.id as string);
+		// } else {
+		// 	console.log("Add");
+		// 	setSelectedProblemsSortable([...selectedProblemsSortable, item]);
+		// }
+
+		if (selectedProblemSortableIds.includes(item.id as string)) {
+			handleRemoveSelectedProblem(item.id as string);
+		} else {
+			setSelectedProblemsSortable([...selectedProblemsSortable, item]);
+		}
+	};
+
+	useEffect(() => {
+		setCreateRequest({
+			...createRequest,
+			problemsInterface: [...selectedProblemsSortable],
+		});
+	}, [selectedProblemsSortable]);
+
+	useEffect(() => {
+		ProblemService.getAllAsCreator(accountId).then((response) => {
+			setAllProblems(
+				transformProblemModel2ProblemHashedTable(response.data.problems)
+			);
+			setAllProblemsSortable(
+				response.data.problems.map((problem) => ({
+					id: problem.problem_id,
+					name: problem.title,
+					problem: problem,
+					groupPermissions: [],
+				}))
+			);
+		});
+	}, [accountId]);
+
+	useEffect(() => {
+		if (createRequest.collection) {
+			setAllProblems({
+				...allProblems,
+				...transformProblemModel2ProblemHashedTable(
+					createRequest.collection.problems.map((cp) => cp.problem)
+				),
+			});
+		}
+	}, [createRequest.collection, allProblems]);
+
+	useEffect(() => {
+		if (initial) {
+			console.log("AAA",createRequest)
+			// setSelectedProblemsSortable(createRequest.problemsInterface);
+			setSelectedProblemsSortable(
+				createRequest.collection?.problems.map((cp) => ({
+					id: cp.problem.problem_id,
+					name: cp.problem.title,
+					problem: cp.problem,
+					groupPermissions: cp.problem.group_permissions.map((gc) => ({
+						groupId: gc.group.group_id,
+						group: gc.group,
+						manageProblems: gc.permission_manage_problems,
+						viewProblems: gc.permission_view_problems,
+					})),
+				})) ?? ([] as ProblemItemInterface[])
+			);
+			setInitial(false);
+		}
+
+		// console.log("Create Request", createRequest);
+	}, [createRequest]);
+
+	return (
+		<div>
+			<div className="flex">
+				<div className="w-1/2">
+					<div className="mt-6 pr-5">
+						<div className="grid gap-y-3">
+							<ScrollArea className="mt-6 h-[80vh] md:h-[60vh] pr-5">
+								<ReactSortable
+									animation={150}
+									group="shared"
+									list={selectedProblemsSortable}
+									setList={setSelectedProblemsSortable}
+									className="grid gap-y-2 p-2 rounded-md"
+								>
+									{selectedProblemsSortable?.map((item) => (
+										<MyProblemMiniCard2
+											disabledHighlight
+											onClick={() =>
+												handleRemoveSelectedProblem(
+													item.id as string
+												)
+											}
+											key={item.id}
+											problem={item.problem}
+										/>
+									))}
+								</ReactSortable>
+							</ScrollArea>
+						</div>
+					</div>
+				</div>
+
+				<div className="mx-3">
+					<Separator orientation="vertical" />
+				</div>
+
+				<div className="w-1/2">
+					<Input className="mt-2" />
+					<ScrollArea className="mt-6 h-[80vh] md:h-[60vh] pr-5">
+						<ReactSortable
+							group={{
+								name: "shared",
+								pull: "clone",
+								put: false,
+							}}
+							animation={150}
+							sort={false}
+							list={allProblemsSortable}
+							setList={setAllProblemsSortable}
+							filter=".selected"
+							className="grid grid-cols-3 gap-2 p-2 rounded-md"
+						>
+							{allProblemsSortable?.map((item) => (
+								<div
+									className={
+										selectedProblemsSortable.includes(item)
+											? "selected"
+											: ""
+									}
+								>
+									<MyProblemMiniCard2
+										onClick={() =>
+											handleQuickToggleSelectedProblem(
+												item
+											)
+										}
+										disabled={selectedProblemSortableIds.includes(
+											item.id as string
+										)}
+										key={item.id}
+										problem={item.problem}
+									/>
+								</div>
+							))}
+						</ReactSortable>
+					</ScrollArea>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default ManageProblems;
diff --git a/src/components/Forms/CreateCollectionForm/index.tsx b/src/components/Forms/CreateCollectionForm/index.tsx
new file mode 100644
index 0000000..24ae478
--- /dev/null
+++ b/src/components/Forms/CreateCollectionForm/index.tsx
@@ -0,0 +1,115 @@
+import { ArrowLeft } from "lucide-react";
+import React, { useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { CreateCollectionRequestForm } from "../../../types/forms/CreateCollectionRequestForm";
+import { Tabs, TabsList, TabsTrigger } from "../../shadcn/Tabs";
+import FormSaveButton from "../FormSaveButton";
+import GeneralDetail from "./GeneralDetail";
+import ManageGroups from "./ManageGroups";
+import ManageProblems from "./ManageProblems";
+
+const TabList = [
+	{
+		value: "general",
+		label: "General Detail",
+	},
+	{
+		value: "problems",
+		label: "Manage Problems",
+	},
+	{
+		value: "groups",
+		label: "Manage Groups & Permissions",
+	},
+];
+
+export type OnCollectionSavedCallback = {
+	setLoading?: React.Dispatch<React.SetStateAction<boolean>>;
+	createRequest?: CreateCollectionRequestForm;
+};
+
+const CreateCollectionForm = ({
+	createRequestInitialValue,
+	onCollectionSave,
+}: {
+	createRequestInitialValue: CreateCollectionRequestForm;
+	onCollectionSave: (callback: OnCollectionSavedCallback) => void;
+}) => {
+	const navigate = useNavigate();
+	const [currentForm, setCurrentForm] = useSearchParams();
+
+	const [loading, setLoading] = useState(false);
+	const [createRequest, setCreateRequest] =
+		useState<CreateCollectionRequestForm>(createRequestInitialValue);
+
+	const handleSave = () => {
+		onCollectionSave({
+			setLoading,
+			createRequest,
+		});
+	};
+
+	return (
+		<div className="w-[96%] mx-auto mt-10">
+			<div className="flex justify-between">
+				<h1 className="text-3xl font-bold tracking-tight flex">
+					<ArrowLeft
+						size={40}
+						className="text-gray-400 transition-all pr-0 hover:pr-1 cursor-pointer mr-2"
+						onClick={() => navigate(-1)}
+					/>
+					{createRequest.title === ""
+						? "Create Problem"
+						: createRequest.title}
+				</h1>
+				<div>
+					<div className="flex">
+						<Tabs value={currentForm.get("section") || "general"}>
+							<TabsList>
+								{TabList.map((tab, index) => (
+									<TabsTrigger
+										key={index}
+										value={tab.value}
+										onClick={() =>
+											setCurrentForm({section: tab.value})
+										}
+									>
+										{tab.label}
+									</TabsTrigger>
+								))}
+							</TabsList>
+						</Tabs>
+						<FormSaveButton
+							disabled={loading}
+							onClick={handleSave}
+						/>
+					</div>
+				</div>
+			</div>
+
+			<div className="mt-3">
+				{(!currentForm.get("section") || currentForm.get("section") === "general") && (
+					<GeneralDetail
+						createRequest={createRequest}
+						setCreateRequest={setCreateRequest}
+					/>
+				)}
+				{currentForm.get("section") === "problems" && (
+					<ManageProblems
+						createRequest={createRequest}
+						setCreateRequest={setCreateRequest}
+					/>
+				)}
+
+				{currentForm.get("section") === "groups" && (
+					<ManageGroups
+						createRequest={createRequest}
+						setCreateRequest={setCreateRequest}
+					/>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default CreateCollectionForm;
diff --git a/src/components/Forms/CreateCourseForm/GeneralDetail.tsx b/src/components/Forms/CreateCourseForm/GeneralDetail.tsx
new file mode 100644
index 0000000..42adf32
--- /dev/null
+++ b/src/components/Forms/CreateCourseForm/GeneralDetail.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { CreateCourseRequestForm } from '../../../types/forms/CreateCourseRequestForm';
+import DetailPlateEditor from '../../DetailPlateEditor';
+import { Input } from '../../shadcn/Input';
+import { Label } from '../../shadcn/Label';
+import { PlateEditorValueType } from '../../../types/PlateEditorValueType';
+
+const GeneralDetail = ({
+	createRequest,
+	setCreateRequest,
+}: {
+	createRequest: CreateCourseRequestForm;
+	setCreateRequest: React.Dispatch<React.SetStateAction<CreateCourseRequestForm>>;
+}) => {
+	// const [editorUpdateCooldown, setEditorUpdateCooldown] = useState(false);
+
+	const handleEditorChange = (value: PlateEditorValueType) => {
+	// 	if (!editorUpdateCooldown) {
+			setCreateRequest({ ...createRequest, description: value });
+
+	// 		// setEditorUpdateCooldown(true);
+	// 		// setTimeout(() => {
+	// 		// 	setEditorUpdateCooldown(false);
+	// 		// }, 1000);
+	// 	}
+	};
+
+	
+
+	return (
+		<div>
+			<Label>Title</Label>
+			<Input
+				value={createRequest.title}
+				onChange={(e) =>
+					setCreateRequest({
+						...createRequest,
+						title: e.target.value,
+					})
+				}
+				type="text"
+			/>
+
+			<Label>Detail</Label>
+			<div className="rounded-lg border bg-background shadow">
+				<DetailPlateEditor
+					value={createRequest.description}
+					onChange={(e) => handleEditorChange(e)}
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default GeneralDetail
\ No newline at end of file
diff --git a/src/components/Forms/CreateCourseForm/ManageCollections.tsx b/src/components/Forms/CreateCourseForm/ManageCollections.tsx
new file mode 100644
index 0000000..502275e
--- /dev/null
+++ b/src/components/Forms/CreateCourseForm/ManageCollections.tsx
@@ -0,0 +1,225 @@
+import React, { useEffect, useState } from "react";
+import { ReactSortable } from "react-sortablejs";
+import { CollectionService } from "../../../services/Collection.service";
+import { transformCollectionPopulateProblemSecureModel2CollectionHashedTable } from "../../../types/adapters/Collection.adapter";
+import {
+	CollectionItemInterface,
+	CreateCourseRequestForm,
+} from "../../../types/forms/CreateCourseRequestForm";
+import {
+	CollectionHashedTable,
+	CollectionPopulateCollectionProblemPopulateProblemModel,
+} from "../../../types/models/Collection.model";
+import MyCollectionMiniCard2 from "../../Cards/CollectionCards/MyCollectionMiniCard2";
+import { Input } from "../../shadcn/Input";
+import { ScrollArea } from "../../shadcn/ScrollArea";
+import { Separator } from "../../shadcn/Seperator";
+
+const ManageCollections = ({
+	createRequest,
+	setCreateRequest,
+}: {
+	createRequest: CreateCourseRequestForm;
+	setCreateRequest: React.Dispatch<
+		React.SetStateAction<CreateCourseRequestForm>
+	>;
+}) => {
+	const accountId = String(localStorage.getItem("account_id"));
+
+	const [allCollectionsSortable, setAllCollectionsSortable] = useState<
+		CollectionItemInterface[]
+	>([]);
+	const [selectedCollectionsSortable, setSelectedCollectionsSortable] =
+		useState<CollectionItemInterface[]>([]);
+
+	const [allCollections, setAllCollections] = useState<CollectionHashedTable>(
+		{}
+	);
+
+	const [initial, setInitial] = useState(true);
+	const [selectedCollectionsSortableIds, setSelectedCollectionsSortableIds] =
+		useState<string[]>([]);
+
+	useEffect(() => {
+		setSelectedCollectionsSortableIds(
+			selectedCollectionsSortable.map((item) => item.id as string)
+		);
+	}, [selectedCollectionsSortable]);
+
+	const handleRemoveSelectedCollection = (id: string) => {
+		setSelectedCollectionsSortable([
+			...selectedCollectionsSortable.filter((item) => item.id !== id),
+		]);
+	};
+
+	const handleQuickToggleSelectedCollection = (
+		item: CollectionItemInterface
+	) => {
+		// if (selectedCollectionsSortable.find((item1) => item1.id === item.id)) {
+		// 	console.log("Remove");
+		// 	handleRemoveSelectedCollection(item.id as string);
+		// } else {
+		// 	console.log("Add");
+		// 	setSelectedCollectionsSortable([...selectedCollectionsSortable, item]);
+		// }
+
+		if (selectedCollectionsSortableIds.includes(item.id as string)) {
+			handleRemoveSelectedCollection(item.id as string);
+		} else {
+			setSelectedCollectionsSortable([
+				...selectedCollectionsSortable,
+				item,
+			]);
+		}
+	};
+
+	useEffect(() => {
+		setCreateRequest({
+			...createRequest,
+			collectionsInterface: [...selectedCollectionsSortable],
+		});
+	}, [selectedCollectionsSortable]);
+
+	useEffect(() => {
+		CollectionService.getAllAsCreator(accountId).then((response) => {
+			setAllCollections(
+				transformCollectionPopulateProblemSecureModel2CollectionHashedTable(
+					response.data.collections
+				)
+			);
+
+			setAllCollectionsSortable(
+				response.data.collections.map((collection) => ({
+					id: collection.collection_id,
+					name: collection.name,
+					collection: collection,
+					groupPermissions: [],
+				}))
+			);
+		});
+	}, [accountId]);
+
+	useEffect(() => {
+		if (createRequest.course) {
+			setAllCollections({
+				...allCollections,
+				...transformCollectionPopulateProblemSecureModel2CollectionHashedTable(
+					createRequest.course.collections.map(
+						(cc) =>
+							cc.collection as CollectionPopulateCollectionProblemPopulateProblemModel
+					)
+				),
+			});
+		}
+	}, [createRequest.course, allCollections]);
+
+	useEffect(() => {
+		if (initial) {
+			setSelectedCollectionsSortable(
+				createRequest.course?.collections.map((cc) => ({
+					id: cc.collection.collection_id,
+					name: cc.collection.name,
+					collection: cc.collection,
+					groupPermissions: cc.collection.group_permissions.map(
+						(gc) => ({
+							group_id: gc.group.group_id,
+							group: gc.group,
+							manageCollections: gc.permission_manage_collections,
+							viewCollections: gc.permission_view_collections,
+						})
+					),
+				})) ?? ([] as CollectionItemInterface[])
+			);
+			setInitial(false);
+		}
+
+		console.log("Create Request", createRequest);
+	}, [createRequest]);
+
+	return (
+		<div>
+			<div className="flex">
+				<div className="w-1/2">
+					<div className="mt-6 pr-5">
+						<div className="grid gap-y-3">
+							<ScrollArea className="mt-6 h-[80vh] md:h-[60vh] pr-5">
+								<ReactSortable
+									animation={150}
+									group="shared"
+									list={selectedCollectionsSortable}
+									setList={setSelectedCollectionsSortable}
+									className="grid gap-y-2 p-2 rounded-md"
+								>
+									{selectedCollectionsSortable?.map(
+										(item) => (
+											<MyCollectionMiniCard2
+												disabledHighlight
+												onClick={() =>
+													handleRemoveSelectedCollection(
+														item.id as string
+													)
+												}
+												key={item.id}
+												collection={item.collection}
+											/>
+										)
+									)}
+								</ReactSortable>
+							</ScrollArea>
+						</div>
+					</div>
+				</div>
+
+				<div className="mx-3">
+					<Separator orientation="vertical" />
+				</div>
+
+				<div className="w-1/2">
+					<Input className="mt-2" />
+					<ScrollArea className="mt-6 h-[80vh] md:h-[60vh] pr-5">
+						<ReactSortable
+							group={{
+								name: "shared",
+								pull: "clone",
+								put: false,
+							}}
+							animation={150}
+							sort={false}
+							list={allCollectionsSortable}
+							setList={setAllCollectionsSortable}
+							filter=".selected"
+							className="grid grid-cols-3 gap-2 p-2 rounded-md"
+						>
+							{allCollectionsSortable?.map((item) => (
+								<div
+									className={
+										selectedCollectionsSortable.includes(
+											item
+										)
+											? "selected"
+											: ""
+									}
+								>
+									<MyCollectionMiniCard2
+										onClick={() =>
+											handleQuickToggleSelectedCollection(
+												item
+											)
+										}
+										disabled={selectedCollectionsSortableIds.includes(
+											item.id as string
+										)}
+										key={item.id}
+										collection={item.collection}
+									/>
+								</div>
+							))}
+						</ReactSortable>
+					</ScrollArea>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default ManageCollections;
diff --git a/src/components/Forms/CreateCourseForm/ManageGroups.tsx b/src/components/Forms/CreateCourseForm/ManageGroups.tsx
new file mode 100644
index 0000000..3b0861c
--- /dev/null
+++ b/src/components/Forms/CreateCourseForm/ManageGroups.tsx
@@ -0,0 +1,384 @@
+import React, { useEffect, useState } from "react";
+import { GroupService } from "../../../services/Group.service";
+import {
+	CourseGroupPermissionRequestForm,
+	CreateCourseRequestForm,
+} from "../../../types/forms/CreateCourseRequestForm";
+import { CollectionPopulateCollectionProblemPopulateProblemModel } from "../../../types/models/Collection.model";
+import { GroupModel } from "../../../types/models/Group.model";
+import MyCollectionMiniCard2 from "../../Cards/CollectionCards/MyCollectionMiniCard2";
+import PermissionSwitchScrollArea from "../../Permissions/PermissionSwitchScrollArea";
+import { Switch } from "../../shadcn/Switch";
+import { Tabs, TabsList, TabsTrigger } from "../../shadcn/Tabs";
+import GroupAndPermissionManager, {
+	GroupAndPermissionManagerOnAddGroupsCallback,
+	GroupAndPermissionManagerOnRemoveGroupCallback,
+} from "../GroupAndPermissionManager";
+import CoursePermissionSwitchGroup from "../PermissionSwitchGroups/CoursePermissionSwitchGroup";
+
+const ManageGroups = ({
+	createRequest,
+	setCreateRequest,
+}: {
+	createRequest: CreateCourseRequestForm;
+	setCreateRequest: React.Dispatch<
+		React.SetStateAction<CreateCourseRequestForm>
+	>;
+}) => {
+	const accountId = String(localStorage.getItem("account_id"));
+
+	const [groupPermission, setGroupPermission] =
+		useState<CourseGroupPermissionRequestForm>();
+
+	const [selectedIndex, setselectedIndex] = useState<number>(-1);
+	const [currentGroupId, setCurrentGroupId] = useState<string>("");
+
+	const handleAddGroups = ({
+		addingGroups,
+	}: GroupAndPermissionManagerOnAddGroupsCallback) => {
+		const newGroupPermissions = addingGroups.map((group) => ({
+			group_id: group.group_id,
+			group,
+			manageCourses: group.permission_manage_topics,
+			viewCourseLogs: group.permission_view_topics_log,
+			viewCourses: group.permission_view_topics,
+		}));
+
+		setCreateRequest({
+			...createRequest,
+			groupPermissions: [
+				...createRequest.groupPermissions,
+				...newGroupPermissions,
+			],
+		});
+	};
+
+	const handleRemoveGroup = ({
+		index,
+	}: GroupAndPermissionManagerOnRemoveGroupCallback) => {
+		if (index === selectedIndex) {
+			setselectedIndex(-1);
+		}
+		setCreateRequest({
+			...createRequest,
+			groupPermissions: createRequest.groupPermissions.filter(
+				(_, i) => i !== index
+			),
+		});
+	};
+
+	useEffect(() => {
+		if (
+			selectedIndex >= 0 &&
+			selectedIndex < createRequest.groupPermissions.length
+		) {
+			setGroupPermission(createRequest.groupPermissions[selectedIndex]);
+			setCurrentGroupId(
+				createRequest.groupPermissions[selectedIndex].group_id
+			);
+		}
+	}, [selectedIndex]);
+
+	useEffect(() => {
+		if (groupPermission) {
+			setCreateRequest({
+				...createRequest,
+				groupPermissions: [
+					...createRequest.groupPermissions.slice(0, selectedIndex),
+					groupPermission,
+					...createRequest.groupPermissions.slice(selectedIndex + 1),
+				],
+			});
+		}
+	}, [groupPermission]);
+
+	const [tabValue, setTabValue] = useState("course");
+	const [allGroups, setAllGroups] = useState<GroupModel[]>([]);
+
+	useEffect(() => {
+		GroupService.getAllAsCreator(accountId).then((response) => {
+			setAllGroups(response.data.groups);
+		});
+	}, [accountId]);
+
+	return (
+		<>
+			<div className="flex justify-end">
+				<Tabs value={tabValue} onValueChange={(e) => setTabValue(e)}>
+					<TabsList>
+						<TabsTrigger value="course">
+							Course Permissions
+						</TabsTrigger>
+						<TabsTrigger value="collections">
+							Collection Permissions
+						</TabsTrigger>
+					</TabsList>
+				</Tabs>
+			</div>
+			<GroupAndPermissionManager
+				allGroups={allGroups}
+				createRequest={createRequest}
+				// setCreateRequest={setCreateRequest}
+				onAddGroups={(e) => handleAddGroups(e)}
+				onRemoveGroup={(e) => handleRemoveGroup(e)}
+				selectedIndex={selectedIndex}
+				setSelectedIndex={setselectedIndex}
+			>
+				<>
+					{tabValue === "course" && (
+						<PermissionSwitchScrollArea>
+							{groupPermission && selectedIndex >= 0 && (
+								<CoursePermissionSwitchGroup
+									manageCoursesChecked={
+										groupPermission.manageCourses
+									}
+									viewCourseLogsChecked={
+										groupPermission.viewCourseLogs
+									}
+									viewCoursesChecked={
+										groupPermission.viewCourses
+									}
+									onClickManageCourses={() =>
+										setGroupPermission({
+											...groupPermission,
+											manageCourses:
+												!groupPermission.manageCourses,
+										})
+									}
+									onClickViewCourseLogs={() =>
+										setGroupPermission({
+											...groupPermission,
+											viewCourseLogs:
+												!groupPermission.viewCourseLogs,
+										})
+									}
+									onClickViewCourses={() =>
+										setGroupPermission({
+											...groupPermission,
+											viewCourses:
+												!groupPermission.viewCourses,
+										})
+									}
+								/>
+							)}
+						</PermissionSwitchScrollArea>
+					)}
+
+					{tabValue === "collections" &&
+						groupPermission &&
+						selectedIndex >= 0 && (
+							<div className="grid gap-y-2 p-2 rounded-md">
+								{createRequest.collectionsInterface?.map(
+									(courseCollection) => (
+										<div className="flex items-center justify-between pr-5">
+											<div className="w-1/2">
+												<MyCollectionMiniCard2
+													disabledHighlight
+													collection={
+														courseCollection.collection as CollectionPopulateCollectionProblemPopulateProblemModel
+													}
+												/>
+											</div>
+
+											<div className="text-base font-medium flex items-center">
+												View Collection
+												<Switch
+													checked={
+														courseCollection.groupPermissions?.find(
+															(gp) =>
+																gp.group
+																	.group_id ===
+																currentGroupId
+														)?.viewCollections || false
+													}
+													onClick={() => {
+														const findGroup =
+															courseCollection.groupPermissions?.find(
+																(gp) =>
+																	gp.group
+																		.group_id ===
+																	currentGroupId
+															);
+
+														const newGroupPermissions =
+															courseCollection.groupPermissions.map(
+																(gp) => {
+																	if (
+																		gp.group
+																			.group_id ===
+																		currentGroupId
+																	) {
+																		return {
+																			...gp,
+																			viewCollections:
+																				!gp.viewCollections,
+																		};
+																	} else {
+																		return gp;
+																	}
+																}
+															);
+
+														if (
+															!findGroup ||
+															newGroupPermissions.length ===
+																0
+														) {
+															newGroupPermissions.push(
+																{
+																	group_id:
+																		currentGroupId,
+																	group: allGroups.find(
+																		(g) =>
+																			g.group_id ===
+																			currentGroupId
+																	)!,
+																	viewCollections:
+																		true,
+																	manageCollections:
+																		false,
+																}
+															);
+														}
+
+														if (
+															!createRequest.course
+														) {
+															return;
+														}
+
+														setCreateRequest({
+															...createRequest,
+															collectionsInterface:
+																createRequest.collectionsInterface.map(
+																	(cc) => {
+																		if (
+																			cc
+																				.collection
+																				.collection_id ===
+																			courseCollection
+																				.collection
+																				.collection_id
+																		) {
+																			return {
+																				...cc,
+																				groupPermissions:
+																					newGroupPermissions,
+																			};
+																		} else {
+																			return cc;
+																		}
+																	}
+																),
+														});
+													}}
+													className="ml-2"
+												/>
+											</div>
+											<div className="text-base font-medium flex items-center">
+												Manage Collection
+												<Switch
+													checked={
+														courseCollection.groupPermissions?.find(
+															(gp) =>
+																gp.group
+																	.group_id ===
+																currentGroupId
+														)?.manageCollections || false
+													}
+													onClick={() => {
+														const findGroup =
+															courseCollection.groupPermissions?.find(
+																(gp) =>
+																	gp.group
+																		.group_id ===
+																	currentGroupId
+															);
+
+														const newGroupPermissions =
+															courseCollection.groupPermissions.map(
+																(gp) => {
+																	if (
+																		gp.group
+																			.group_id ===
+																		currentGroupId
+																	) {
+																		return {
+																			...gp,
+																			manageCollections:
+																				!gp.manageCollections,
+																		};
+																	} else {
+																		return gp;
+																	}
+																}
+															);
+
+														if (
+															!findGroup ||
+															newGroupPermissions.length ===
+																0
+														) {
+															newGroupPermissions.push(
+																{
+																	group_id:
+																		currentGroupId,
+																	group: allGroups.find(
+																		(g) =>
+																			g.group_id ===
+																			currentGroupId
+																	)!,
+																	viewCollections:
+																		false,
+																	manageCollections:
+																		true,
+																}
+															);
+														}
+
+														if (
+															!createRequest.course
+														) {
+															return;
+														}
+
+														setCreateRequest({
+															...createRequest,
+															collectionsInterface:
+																createRequest.collectionsInterface.map(
+																	(cc) => {
+																		if (
+																			cc
+																				.collection
+																				.collection_id ===
+																			courseCollection
+																				.collection
+																				.collection_id
+																		) {
+																			return {
+																				...cc,
+																				groupPermissions:
+																					newGroupPermissions,
+																			};
+																		} else {
+																			return cc;
+																		}
+																	}
+																),
+														});
+													}}
+													className="ml-2"
+												/>
+											</div>
+										</div>
+									)
+								)}
+							</div>
+						)}
+				</>
+			</GroupAndPermissionManager>
+		</>
+	);
+};
+
+export default ManageGroups;
diff --git a/src/components/Forms/CreateCourseForm/index.tsx b/src/components/Forms/CreateCourseForm/index.tsx
new file mode 100644
index 0000000..a67b1cd
--- /dev/null
+++ b/src/components/Forms/CreateCourseForm/index.tsx
@@ -0,0 +1,132 @@
+import { ArrowLeft } from "lucide-react";
+import React, { useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { CreateCourseRequestForm } from "../../../types/forms/CreateCourseRequestForm";
+import { Tabs, TabsList, TabsTrigger } from "../../shadcn/Tabs";
+import FormSaveButton from "../FormSaveButton";
+import GeneralDetail from "./GeneralDetail";
+import ManageCollections from "./ManageCollections";
+import ManageGroups from "./ManageGroups";
+
+const TabList = [
+	{
+		value: "general",
+		label: "General Detail",
+	},
+	{
+		value: "collections",
+		label: "Manage Collections",
+	},
+	{
+		value: "groups",
+		label: "Manage Groups & Permissions",
+	},
+];
+
+export type OnCourseSavedCallback = {
+	setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+	// courseId: string;
+	// setCourseId: React.Dispatch<React.SetStateAction<string>>;
+	createRequest: CreateCourseRequestForm;
+};
+
+const CreateCourseForm = ({
+	createRequestInitialValue,
+	onCourseSave,
+}: // onCollectionSave,
+{
+	createRequestInitialValue: CreateCourseRequestForm;
+	onCourseSave: (callback: OnCourseSavedCallback) => void;
+	// onCollectionSave: (callback: OnCollectionSavedCallback) => void;
+}) => {
+	const accountId = String(localStorage.getItem("account_id"));
+
+	const [currentForm, setCurrentForm] = useSearchParams();
+
+	const navigate = useNavigate();
+	// const [currentForm, setCurrentForm] = useState(searchParams.get("section"));
+	const [loading, setLoading] = useState(false);
+
+
+	const [createRequest, setCreateRequest] = useState<CreateCourseRequestForm>(
+		createRequestInitialValue
+	);
+
+	const handleSave = () => {
+		onCourseSave({
+			setLoading,
+			createRequest,
+			// courseId,
+			// setCourseId,
+		});
+	};
+
+	return (
+		<div className="w-[96%] mx-auto mt-10">
+			<div className="flex justify-between">
+				<h1 className="text-3xl font-bold tracking-tight flex">
+					<ArrowLeft
+						size={40}
+						className="text-gray-400 transition-all pr-0 hover:pr-1 cursor-pointer mr-2"
+						onClick={() => navigate(-1)}
+					/>
+					{createRequest.title === ""
+						? "Create Course"
+						: createRequest.title}
+				</h1>
+				<div>
+					<div className="flex">
+						<Tabs value={currentForm.get("section") || "general"}>
+							<TabsList>
+								{TabList.map((tab, index) => (
+									<TabsTrigger
+										key={index}
+										value={tab.value}
+										disabled={
+											tab.value === "groups" &&
+											createRequest.course?.creator !==
+												accountId
+										}
+										onClick={() =>
+											setCurrentForm({section: tab.value})
+										}
+									>
+										{tab.label}
+									</TabsTrigger>
+								))}
+							</TabsList>
+						</Tabs>
+						<FormSaveButton
+							disabled={loading}
+							onClick={handleSave}
+						/>
+					</div>
+				</div>
+			</div>
+
+			<div className="mt-3">
+				{(!currentForm.get("section") || currentForm.get("section") === "general") && (
+					<GeneralDetail
+						createRequest={createRequest}
+						setCreateRequest={setCreateRequest}
+					/>
+				)}
+				{currentForm.get("section") === "collections" && (
+					<ManageCollections
+						createRequest={createRequest}
+						setCreateRequest={setCreateRequest}
+					/>
+				)}
+
+				{currentForm.get("section") === "groups" && (
+					<ManageGroups
+						createRequest={createRequest}
+						setCreateRequest={setCreateRequest}
+					/>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default CreateCourseForm;
diff --git a/src/components/Forms/CreateGroupForm/GeneralDetail.tsx b/src/components/Forms/CreateGroupForm/GeneralDetail.tsx
new file mode 100644
index 0000000..b12307b
--- /dev/null
+++ b/src/components/Forms/CreateGroupForm/GeneralDetail.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { CreateGroupRequestForm } from '../../../types/forms/CreateGroupRequestForm';
+import { Input } from '../../shadcn/Input';
+import { Label } from '../../shadcn/Label';
+import { Textarea } from '../../shadcn/Textarea';
+
+const GeneralDetail = ({
+	createRequest,
+	setCreateRequest,
+}: {
+	createRequest: CreateGroupRequestForm;
+	setCreateRequest: React.Dispatch<React.SetStateAction<CreateGroupRequestForm>>;
+}) => {
+
+	return (
+		<div>
+			<Label>Title</Label>
+			<Input
+				value={createRequest.name}
+				onChange={(e) =>
+					setCreateRequest({
+						...createRequest,
+						name: e.target.value,
+					})
+				}
+				type="text"
+			/>
+
+			<Label>Detail</Label>
+			<Textarea
+				value={String(createRequest.description)}
+				onChange={(e) =>
+					setCreateRequest({
+						...createRequest,
+						description: e.target.value,
+					})
+				}
+			/>
+
+			<Label>Color</Label>
+			<Input
+				value={String(createRequest.color)}
+				onChange={(e) =>
+					setCreateRequest({
+						...createRequest,
+						color: e.target.value,
+					})
+				}
+			type="color"/>
+		</div>
+	);
+};
+
+export default GeneralDetail
\ No newline at end of file
diff --git a/src/components/Forms/CreateGroupForm/ManageMembers.tsx b/src/components/Forms/CreateGroupForm/ManageMembers.tsx
new file mode 100644
index 0000000..a17cd0f
--- /dev/null
+++ b/src/components/Forms/CreateGroupForm/ManageMembers.tsx
@@ -0,0 +1,165 @@
+import React, { useEffect, useState } from "react";
+import { ReactSortable } from "react-sortablejs";
+import { AccountService } from "../../../services/Account.service";
+import { transformAccountModels2AccountHashedTable } from "../../../types/adapters/Account.adapter";
+import { CreateGroupRequestForm } from "../../../types/forms/CreateGroupRequestForm";
+import { AccountHashedTable, AccountSecureModel } from "../../../types/models/Account.model";
+import AccountMiniCard2 from "../../Cards/AccountCards/AccountMiniCard2";
+import { Button } from "../../shadcn/Button";
+import { Input } from "../../shadcn/Input";
+import { ScrollArea } from "../../shadcn/ScrollArea";
+import { Separator } from "../../shadcn/Seperator";
+import { ItemInterface } from "./../../../../node_modules/react-sortablejs/dist/index.d";
+
+const ManageMembers = ({
+	createRequest,
+	setCreateRequest,
+}: {
+	createRequest: CreateGroupRequestForm;
+	setCreateRequest: React.Dispatch<
+		React.SetStateAction<CreateGroupRequestForm>
+	>;
+}) => {
+	const accountId = String(localStorage.getItem("account_id"));
+
+	const [allAccountsSortable, setAllAccountsSortable] = useState<
+		ItemInterface[]
+	>([]);
+	const [selectedAccountsSortable, setSelectedAccountsSortable] = useState<
+		ItemInterface[]
+	>([]);
+	const [allAccounts, setAllAccounts] = useState<AccountHashedTable>({});
+
+	const [initial, setInitial] = useState(true);
+	const [selectedAccountsSortableIds, setSelectedAccountsSortableIds] =
+		useState<string[]>([]);
+
+	useEffect(() => {
+		setSelectedAccountsSortableIds(
+			selectedAccountsSortable?.map((item) => item.id as string)
+		);
+	}, [selectedAccountsSortable]);
+
+	const handleRemoveSelectedCollection = (id: string) => {
+		setSelectedAccountsSortable([
+			...selectedAccountsSortable.filter((item) => item.id !== id),
+		]);
+	};
+
+	const handleQuickToggleSelectedCollection = (item: ItemInterface) => {
+		if (selectedAccountsSortableIds.includes(item.id as string)) {
+			handleRemoveSelectedCollection(item.id as string);
+		} else {
+			setSelectedAccountsSortable([...selectedAccountsSortable, item]);
+		}
+	};
+
+	useEffect(() => {
+		setCreateRequest({
+			...createRequest,
+			membersInterface: selectedAccountsSortable,
+		});
+	}, [selectedAccountsSortable]);
+
+	useEffect(() => {
+		AccountService.getAll().then((response) => {
+			setAllAccounts(transformAccountModels2AccountHashedTable(response.data.accounts))
+
+			setAllAccountsSortable(
+				response.data.accounts.map((account) => ({
+					id: account.account_id,
+					name: account.username,
+				}))
+			)
+		})
+	}, [accountId]);
+
+	useEffect(() => {
+		if (initial) {
+			setSelectedAccountsSortable(createRequest.membersInterface);
+			setInitial(false);
+		}
+
+		console.log("Create Request", createRequest);
+	}, [createRequest]);
+
+	return (
+		<div>
+			<div className="flex justify-between">
+				<h1 className="text-2xl font-bold">Manage Collections</h1>
+
+				<Button>Add Collections</Button>
+			</div>
+
+			<div className="flex">
+				<div className="w-1/2">
+					<div className="mt-6 pr-5">
+						<div className="grid gap-y-3">
+							<ScrollArea className="mt-6 h-[80vh] md:h-[60vh] pr-5">
+								<ReactSortable
+									animation={150}
+									group="shared"
+									list={selectedAccountsSortable}
+									setList={setSelectedAccountsSortable}
+									className="grid gap-y-2 p-2 rounded-md"
+									sort={false}
+								>
+									{selectedAccountsSortable?.map((item) => (
+										<AccountMiniCard2
+											disabledHighlight
+											onClick={() => handleRemoveSelectedCollection(item.id as string)}
+											key={item.id}
+											account={allAccounts[item.id as string] as AccountSecureModel}
+										/>
+									))}
+								</ReactSortable>
+							</ScrollArea>
+						</div>
+					</div>
+				</div>
+
+				<div className="mx-3">
+					<Separator orientation="vertical" />
+				</div>
+
+				<div className="w-1/2">
+					<Input className="mt-2" />
+					<ScrollArea className="mt-6 h-[80vh] md:h-[60vh] pr-5">
+						<ReactSortable
+							group={{
+								name: "shared",
+								pull: "clone",
+								put: false,
+							}}
+							animation={150}
+							sort={false}
+							list={allAccountsSortable}
+							setList={setAllAccountsSortable}
+							filter=".selected"
+							className="grid grid-cols-3 gap-2 p-2 rounded-md"
+						>
+							{allAccountsSortable?.map((item) => (
+								<div
+									className={
+										selectedAccountsSortable?.includes(item)
+											? "selected"
+											: ""
+									}
+								>
+									<AccountMiniCard2
+											disabled={selectedAccountsSortableIds.includes(item.id as string)}
+											onClick={() => handleQuickToggleSelectedCollection(item)}
+											key={item.id}
+											account={allAccounts[item.id as string] as AccountSecureModel}
+										/>
+								</div>
+							))}
+						</ReactSortable>
+					</ScrollArea>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default ManageMembers;
diff --git a/src/components/Forms/CreateGroupForm/ManagePermissions.tsx b/src/components/Forms/CreateGroupForm/ManagePermissions.tsx
new file mode 100644
index 0000000..be88e60
--- /dev/null
+++ b/src/components/Forms/CreateGroupForm/ManagePermissions.tsx
@@ -0,0 +1,88 @@
+import React from "react";
+import { CreateGroupRequestForm } from "../../../types/forms/CreateGroupRequestForm";
+import PermissionSwitchScrollArea from "../../Permissions/PermissionSwitchScrollArea";
+import CollectionPermissionSwitchGroup from "../PermissionSwitchGroups/CollectionPermissionSwitchGroup";
+import CoursePermissionSwitchGroup from "../PermissionSwitchGroups/CoursePermissionSwitchGroup";
+import ProblemPermissionSwitchGroup from "../PermissionSwitchGroups/ProblemPermissionSwitchGroup";
+
+const ManagePermissions = ({
+	createRequest,
+	setCreateRequest,
+}: {
+	createRequest: CreateGroupRequestForm;
+	setCreateRequest: React.Dispatch<
+		React.SetStateAction<CreateGroupRequestForm>
+	>;
+}) => {
+	return (
+		<div>
+			<p className="font-bold text-2xl">Manage Permissions</p>
+
+			<div className="mt-5">
+				<PermissionSwitchScrollArea
+					className="h-[70vh] xxl:h-[75vh]"
+					childrenClassName="w-[95%]"
+				>
+					<p className="font-bold text-base text-green-600 mt-3">
+						Course Permission
+					</p>
+					<CoursePermissionSwitchGroup
+						manageCoursesChecked={createRequest.manageCourses}
+						viewCourseLogsChecked={createRequest.viewCourseLogs}
+						viewCoursesChecked={createRequest.viewCourses}
+						onClickManageCourses={() =>
+							setCreateRequest({
+								...createRequest,
+								manageCourses: !createRequest.manageCourses,
+							})
+						}
+						onClickViewCourseLogs={() =>
+							setCreateRequest({
+								...createRequest,
+								viewCourseLogs: !createRequest.viewCourseLogs,
+							})
+						}
+						onClickViewCourses={() =>
+							setCreateRequest({
+								...createRequest,
+								viewCourses: !createRequest.viewCourses,
+							})
+						}
+					/>
+					<p className="font-bold text-base text-green-600 mt-3">
+						Collection Permission
+					</p>
+					<CollectionPermissionSwitchGroup
+						manageCollectionsChecked={createRequest.manageCollections}
+						viewCollectionsChecked={createRequest.viewCollections}
+						onClickManageCollections={() => setCreateRequest({
+							...createRequest,
+							manageCollections: !createRequest.manageCollections
+						})}
+						onClickViewCollections={() => setCreateRequest({
+							...createRequest,
+							viewCollections: !createRequest.viewCollections
+						})}
+					/>
+					<p className="font-bold text-base text-green-600 mt-3">
+						Problem Permission
+					</p>
+					<ProblemPermissionSwitchGroup
+						manageProblemsChecked={createRequest.manageProblems}
+						viewProblemsChecked={createRequest.viewProblems}
+						onClickManageProblems={() => setCreateRequest({
+							...createRequest,
+							manageProblems: !createRequest.manageProblems
+						})}
+						onClickViewProblems={() => setCreateRequest({
+							...createRequest,
+							viewProblems: !createRequest.viewProblems
+						})}
+					/>
+				</PermissionSwitchScrollArea>
+			</div>
+		</div>
+	);
+};
+
+export default ManagePermissions;
diff --git a/src/components/Forms/CreateGroupForm/index.tsx b/src/components/Forms/CreateGroupForm/index.tsx
new file mode 100644
index 0000000..e442796
--- /dev/null
+++ b/src/components/Forms/CreateGroupForm/index.tsx
@@ -0,0 +1,127 @@
+import { ArrowLeft } from "lucide-react";
+import React, { useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { CreateGroupRequestForm } from "../../../types/forms/CreateGroupRequestForm";
+import { Tabs, TabsList, TabsTrigger } from "../../shadcn/Tabs";
+// import GeneralDetail from "./GeneralDetail";
+// import ManageCollections from "./ManageCollections";
+import FormSaveButton from "../FormSaveButton";
+import GeneralDetail from "./GeneralDetail";
+import ManageMembers from "./ManageMembers";
+import ManagePermissions from "./ManagePermissions";
+
+const TabList = [
+	{
+		value: "general",
+		label: "General Detail",
+	},
+	{
+		value: "members",
+		label: "Manage Members",
+	},
+	{
+		value: "permissions",
+		label: "Permissions",
+	},
+];
+
+export type OnGroupSavedCallback = {
+	setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+	// groupId: string;
+	// setGroupId: React.Dispatch<React.SetStateAction<string>>;
+	createRequest: CreateGroupRequestForm;
+}
+
+const CreateGroupForm = ({
+	createRequestInitialValue,
+	onCourseSave,
+}: // onCollectionSave,
+{
+	createRequestInitialValue: CreateGroupRequestForm;
+	onCourseSave: (callback: OnGroupSavedCallback) => void;
+	// onCollectionSave: (callback: OnCollectionSavedCallback) => void;
+}) => {
+	const navigate = useNavigate();
+	const [currentForm, setCurrentForm] = useSearchParams();
+	const [loading, setLoading] = useState(false);
+
+
+	const [createRequest, setCreateRequest] = useState<CreateGroupRequestForm>(
+		createRequestInitialValue
+	);
+
+	const handleSave = () => {
+		console.log(createRequest)
+		onCourseSave({
+			setLoading,
+			createRequest,
+			// groupId,
+			// setGroupId,
+		});
+	};
+
+	return (
+		<div className="w-[96%] mx-auto mt-10">
+			<div className="flex justify-between">
+				<h1 className="text-3xl font-bold tracking-tight flex">
+					<ArrowLeft
+						size={40}
+						className="text-gray-400 transition-all pr-0 hover:pr-1 cursor-pointer mr-2"
+						onClick={() => navigate(-1)}
+					/>
+					{createRequest.name === ""
+						? "Create Group"
+						: createRequest.name}
+				</h1>
+				<div>
+					<div className="flex">
+						<Tabs value={currentForm.get("section") || "general"}>
+							<TabsList>
+								{TabList.map((tab, index) => (
+									<TabsTrigger
+										key={index}
+										value={tab.value}
+										onClick={() =>
+											setCurrentForm({section: tab.value})
+										}
+									>
+										{tab.label}
+									</TabsTrigger>
+								))}
+							</TabsList>
+						</Tabs>
+						<FormSaveButton
+							disabled={loading}
+							onClick={handleSave}
+						/>
+					</div>
+				</div>
+			</div>
+
+			<div className="mt-3">
+				{(!currentForm.get("section") || currentForm.get("section") === "general") && (
+					<GeneralDetail
+						createRequest={createRequest}
+						setCreateRequest={setCreateRequest}
+					/>
+				)}
+				{currentForm.get("section") === "members" && (
+					<ManageMembers
+						createRequest={createRequest}
+						setCreateRequest={setCreateRequest}
+					/>
+				)}
+				{currentForm.get("section") === "permissions" && (
+					<ManagePermissions
+						createRequest={createRequest}
+						setCreateRequest={setCreateRequest}
+					/>
+				)}
+
+
+			</div>
+		</div>
+	);
+};
+
+export default CreateGroupForm;
diff --git a/src/components/Forms/CreateProblemForm/GeneralDetail.tsx b/src/components/Forms/CreateProblemForm/GeneralDetail.tsx
new file mode 100644
index 0000000..79b2af9
--- /dev/null
+++ b/src/components/Forms/CreateProblemForm/GeneralDetail.tsx
@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react';
+import { PlateEditorValueType } from '../../../types/PlateEditorValueType';
+import { CreateProblemRequestForm } from '../../../types/forms/CreateProblemRequestForm';
+import DetailPlateEditor from '../../DetailPlateEditor';
+import { Input } from '../../shadcn/Input';
+import { Label } from '../../shadcn/Label';
+
+const GeneralDetail = ({
+	createRequest,
+	setCreateRequest,
+}: {
+	createRequest: CreateProblemRequestForm;
+	setCreateRequest: React.Dispatch<React.SetStateAction<CreateProblemRequestForm>>;
+}) => {
+	// const [editorUpdateCooldown, setEditorUpdateCooldown] = useState(false);
+
+	const handleEditorChange = (value: PlateEditorValueType) => {
+		// if (!editorUpdateCooldown) {
+			setCreateRequest({ ...createRequest, description: value });
+
+			// setEditorUpdateCooldown(true);
+			// setTimeout(() => {
+			// 	setEditorUpdateCooldown(false);
+			// }, 1000);
+		// }
+	};
+
+	useEffect(()=>{
+		console.log("General Detail",createRequest)
+	},[createRequest])
+
+	return (
+		<div>
+			<Label>Title</Label>
+			<Input
+				value={createRequest.title}
+				onChange={(e) =>
+					setCreateRequest({
+						...createRequest,
+						title: e.target.value,
+					})
+				}
+				type="text"
+			/>
+
+			<Label>Detail</Label>
+			<div className="rounded-lg border bg-background shadow">
+				<DetailPlateEditor
+					value={createRequest.description}
+					onChange={(e) => handleEditorChange(e)}
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default GeneralDetail
\ No newline at end of file
diff --git a/src/components/Forms/CreateProblemForm/ManageGroups.tsx b/src/components/Forms/CreateProblemForm/ManageGroups.tsx
new file mode 100644
index 0000000..880851a
--- /dev/null
+++ b/src/components/Forms/CreateProblemForm/ManageGroups.tsx
@@ -0,0 +1,135 @@
+import React, { useEffect, useState } from "react";
+import {
+	CreateProblemRequestForm,
+	ProblemGroupPermissionRequestForm,
+} from "../../../types/forms/CreateProblemRequestForm";
+import GroupAndPermissionManager, {
+	GroupAndPermissionManagerOnAddGroupsCallback,
+	GroupAndPermissionManagerOnRemoveGroupCallback,
+} from "../GroupAndPermissionManager";
+import { GroupModel } from "../../../types/models/Group.model";
+import { GroupService } from "../../../services/Group.service";
+import PermissionSwitchScrollArea from "../../Permissions/PermissionSwitchScrollArea";
+import ProblemPermissionSwitchGroup from "../PermissionSwitchGroups/ProblemPermissionSwitchGroup";
+
+const ManageGroups = ({
+	createRequest,
+	setCreateRequest,
+}: {
+	createRequest: CreateProblemRequestForm;
+	setCreateRequest: React.Dispatch<
+		React.SetStateAction<CreateProblemRequestForm>
+	>;
+}) => {
+	createRequest;
+	setCreateRequest;
+
+	const accountId = String(localStorage.getItem("account_id"));
+
+	const [groupPermission, setGroupPermission] =
+		useState<ProblemGroupPermissionRequestForm>();
+
+	const [selectedIndex, setselectedIndex] = useState<number>(-1);
+	// const [currentGroupId, setCurrentGroupId] = useState<string>("");
+
+	const handleAddGroups = ({
+		addingGroups,
+	}: GroupAndPermissionManagerOnAddGroupsCallback) => {
+		const newGroupPermissions = addingGroups.map((group) => ({
+			groupId: group.group_id,
+			group,
+			manageProblems: group.permission_manage_problems,
+			viewProblems: group.permission_view_problems,
+		}));
+
+		setCreateRequest({
+			...createRequest,
+			groupPermissions: [
+				...createRequest.groupPermissions,
+				...newGroupPermissions,
+			],
+		});
+	};
+
+	const handleRemoveGroup = ({
+		index,
+	}: GroupAndPermissionManagerOnRemoveGroupCallback) => {
+		if (index === selectedIndex) {
+			setselectedIndex(-1);
+		}
+		setCreateRequest({
+			...createRequest,
+			groupPermissions: createRequest.groupPermissions.filter(
+				(_, i) => i !== index
+			),
+		});
+	};
+
+	useEffect(() => {
+		if (
+			selectedIndex >= 0 &&
+			selectedIndex < createRequest.groupPermissions.length
+		) {
+			setGroupPermission(createRequest.groupPermissions[selectedIndex]);
+			// setCurrentGroupId(
+			// 	createRequest.groupPermissions[selectedIndex].groupId
+			// );
+		}
+	}, [selectedIndex]);
+
+	useEffect(() => {
+		if (groupPermission) {
+			setCreateRequest({
+				...createRequest,
+				groupPermissions: [
+					...createRequest.groupPermissions.slice(0, selectedIndex),
+					groupPermission,
+					...createRequest.groupPermissions.slice(selectedIndex + 1),
+				],
+			});
+		}
+	}, [groupPermission]);
+
+	const [allGroups, setAllGroups] = useState<GroupModel[]>([]);
+
+	useEffect(() => {
+		GroupService.getAllAsCreator(accountId).then((response) => {
+			setAllGroups(response.data.groups);
+		});
+	}, [accountId]);
+
+	return (
+		<GroupAndPermissionManager
+			allGroups={allGroups}
+			createRequest={createRequest}
+			// setCreateRequest={setCreateRequest}
+			onAddGroups={(e) => handleAddGroups(e)}
+			onRemoveGroup={(e) => handleRemoveGroup(e)}
+			selectedIndex={selectedIndex}
+			setSelectedIndex={setselectedIndex}
+		>
+			<PermissionSwitchScrollArea>
+				{groupPermission && selectedIndex >= 0 && (
+					<ProblemPermissionSwitchGroup
+						manageProblemsChecked={groupPermission?.manageProblems}
+						viewProblemsChecked={groupPermission?.viewProblems}
+						onClickManageProblems={() => {
+							setGroupPermission({
+								...groupPermission,
+								manageProblems: !groupPermission.manageProblems,
+							});
+						}}
+            onClickViewProblems={() => {
+              setGroupPermission({
+                ...groupPermission,
+                viewProblems: !groupPermission.viewProblems,
+              });
+            }}
+					/>
+				)}
+			</PermissionSwitchScrollArea>
+		</GroupAndPermissionManager>
+	);
+};
+
+export default ManageGroups;
diff --git a/src/components/Forms/CreateProblemForm/Privacy.tsx b/src/components/Forms/CreateProblemForm/Privacy.tsx
new file mode 100644
index 0000000..7d5214a
--- /dev/null
+++ b/src/components/Forms/CreateProblemForm/Privacy.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { CreateProblemRequestForm } from '../../../types/forms/CreateProblemRequestForm';
+import { Label } from '../../shadcn/Label';
+import { Switch } from '../../shadcn/Switch';
+
+const Privacy = ({
+	createRequest,
+	setCreateRequest,
+}: {
+	createRequest: CreateProblemRequestForm;
+	setCreateRequest: React.Dispatch<React.SetStateAction<CreateProblemRequestForm>>;
+}) => {
+	createRequest;
+	setCreateRequest;
+
+	return (
+		<div>
+			<div className="flex items-center space-x-2">
+				<Label htmlFor="airplane-mode">Visibility</Label>
+				<Switch id="airplane-mode" />
+			</div>
+
+			<div className="flex items-center space-x-2">
+				<Label htmlFor="airplane-mode">Allow Reference</Label>
+				<Switch id="airplane-mode" />
+			</div>
+		</div>
+	);
+};
+
+export default Privacy
\ No newline at end of file
diff --git a/src/components/Forms/CreateProblemForm/Requirement.tsx b/src/components/Forms/CreateProblemForm/Requirement.tsx
new file mode 100644
index 0000000..fe90438
--- /dev/null
+++ b/src/components/Forms/CreateProblemForm/Requirement.tsx
@@ -0,0 +1,117 @@
+import React, { ReactNode, useEffect } from "react";
+import { ProgrammingLanguageOptions } from "../../../constants/ProgrammingLanguage";
+import { CreateProblemRequestForm } from "../../../types/forms/CreateProblemRequestForm";
+import { Checkbox } from "../../shadcn/Checkbox";
+import { Input } from "../../shadcn/Input";
+import { Label } from "../../shadcn/Label";
+
+const AllowedLanguageCheckbox = ({
+	children,
+	checked = false,
+	onClick = () => {},
+}: {
+	children: ReactNode;
+	checked?: boolean;
+	onClick?: () => void;
+}) => {
+	return (
+		<div className="flex items-center">
+			<Checkbox checked={checked} onClick={() => onClick()} />
+			<div className="ml-2 text-base">{children}</div>
+		</div>
+	);
+};
+
+const Requirement = ({
+	createRequest,
+	setCreateRequest,
+}: {
+	createRequest: CreateProblemRequestForm;
+	setCreateRequest: React.Dispatch<
+		React.SetStateAction<CreateProblemRequestForm>
+	>;
+}) => {
+	const hasSelectedAllLanguage = () => {
+		return (
+			createRequest.allowedLanguage.filter((lang) => lang !== "")
+				.length === ProgrammingLanguageOptions.length
+		);
+	};
+
+	const handleAllOption = () => {
+		if (hasSelectedAllLanguage()) {
+			setCreateRequest({
+				...createRequest,
+				allowedLanguage: [],
+			});
+		} else {
+			setCreateRequest({
+				...createRequest,
+				allowedLanguage: ProgrammingLanguageOptions.map(
+					(proLang) => proLang.value
+				),
+			});
+		}
+	};
+
+	const handleOnClick = (language: string) => {
+		if (createRequest.allowedLanguage.includes(language)) {
+			setCreateRequest({
+				...createRequest,
+				allowedLanguage: createRequest.allowedLanguage.filter(
+					(lang) => lang !== language
+				),
+			});
+		} else {
+			setCreateRequest({
+				...createRequest,
+				allowedLanguage: [...createRequest.allowedLanguage, language],
+			});
+		}
+	};
+
+	useEffect(() => {
+		console.log(createRequest);
+	}, [createRequest]);
+
+	return (
+		<div>
+			<Label>Time Limit Exceeded (seconds)</Label>
+			<Input
+				type="number"
+				value={createRequest.time_limit}
+				onChange={(e) =>
+					setCreateRequest({
+						...createRequest,
+						time_limit: Number(e.target.value),
+					})
+				}
+			/>
+
+			<Label>Allowed Languages</Label>
+			<div className="mb-1">
+				<AllowedLanguageCheckbox
+					checked={hasSelectedAllLanguage()}
+					onClick={handleAllOption}
+				>
+					All
+				</AllowedLanguageCheckbox>
+			</div>
+
+			<div className="grid grid-cols-2 w-1/3 gap-y-1">
+				{ProgrammingLanguageOptions.map((proLang) => (
+					<AllowedLanguageCheckbox
+						checked={createRequest.allowedLanguage.includes(
+							proLang.value
+						)}
+						onClick={() => handleOnClick(proLang.value)}
+					>
+						{proLang.label}
+					</AllowedLanguageCheckbox>
+				))}
+			</div>
+		</div>
+	);
+};
+
+export default Requirement;
diff --git a/src/components/Forms/CreateProblemForm/Scoring.tsx b/src/components/Forms/CreateProblemForm/Scoring.tsx
new file mode 100644
index 0000000..1c14a2b
--- /dev/null
+++ b/src/components/Forms/CreateProblemForm/Scoring.tsx
@@ -0,0 +1,169 @@
+import { Editor as MonacoEditor } from "@monaco-editor/react";
+import { Loader2 } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { ProgrammingLanguageOptions } from "../../../constants/ProgrammingLanguage";
+import { ProblemService } from "../../../services/Problem.service";
+import { ValidateProgramResponse } from "../../../types/apis/Problem.api";
+import { CreateProblemRequestForm } from "../../../types/forms/CreateProblemRequestForm";
+import {
+	testcaseParse
+} from "../../../utilities/TestcaseFormat";
+import TestcaseValidationAccordion from "../../TestcaseValidationAccordion";
+import { Button } from "../../shadcn/Button";
+import { Combobox } from "../../shadcn/Combobox";
+import { Input } from "../../shadcn/Input";
+import { Label } from "../../shadcn/Label";
+import { Separator } from "../../shadcn/Seperator";
+
+const Scoring = ({
+	createRequest,
+	setCreateRequest,
+}: {
+	createRequest: CreateProblemRequestForm;
+	setCreateRequest: React.Dispatch<
+		React.SetStateAction<CreateProblemRequestForm>
+	>;
+}) => {
+	const [loading, setLoading] = useState(false);
+	const [displayResult, setDisplayResult] = useState(false);
+
+	const [selectedLanguage, setSelectedLanguage] = useState("python");
+
+	const [validationResult, setValidationResult] =
+		useState<ValidateProgramResponse>();
+
+	const handleValidation = () => {
+		setLoading(true);
+
+		// console.log({
+		// 	og: createRequest.testcases,
+		// 	testcaseFormat: testcaseFormat(createRequest.testcases)
+		// });
+		ProblemService.validateProgram({
+			source_code: createRequest.solution.replace(/\r\n/g, "\n"),
+			testcases: testcaseParse(
+				createRequest.testcases,
+				createRequest.testcase_delimeter
+			),
+			time_limited: createRequest.time_limit,
+			language: selectedLanguage,
+		}).then((response) => {
+			console.log(response.data);
+			setValidationResult(response.data);
+			setDisplayResult(true);
+			setLoading(false);
+		});
+	};
+
+	useEffect(() => {
+		console.log(selectedLanguage);
+	}, [selectedLanguage]);
+
+	return (
+		<div className="flex h-[80vh]">
+			<div className="w-1/2  overflow-y-scroll">
+				<div className="flex justify-between mb-1">
+					<div>
+						<Label>Source Code</Label>
+					</div>
+					<div>
+						<Combobox
+							label="Select Language"
+							options={ProgrammingLanguageOptions}
+							onSelect={(value) =>
+								setCreateRequest({
+									...createRequest,
+									language: value,
+								})
+							}
+							// initialValue={selectedLanguage}
+							value={selectedLanguage}
+							setValue={setSelectedLanguage}
+						/>
+					</div>
+				</div>
+				<MonacoEditor
+					theme="vs-dark"
+					height="35vh"
+					defaultLanguage="python"
+					value={createRequest.solution}
+					onChange={(e) =>
+						setCreateRequest({
+							...createRequest,
+							solution: String(e),
+						})
+					}
+					language={createRequest.language}
+				/>
+
+				<div className="my-1 flex justify-between items-center">
+					<Label className="">Testcase</Label>
+					<div className="flex w-1/2 items-center">
+						<Label className="mr-3">
+							Delimeter (For seperate each testcase)
+						</Label>
+						<Input
+							className="w-1/2"
+							value={createRequest.testcase_delimeter}
+							onChange={(e) =>
+								setCreateRequest({
+									...createRequest,
+									testcase_delimeter: e.target.value,
+								})
+							}
+						/>
+					</div>
+				</div>
+				<MonacoEditor
+					value={createRequest.testcases}
+					onChange={(e) =>
+						setCreateRequest({
+							...createRequest,
+							testcases: String(e),
+						})
+					}
+					theme="vs-dark"
+					height="35vh"
+					defaultLanguage="python"
+				/>
+			</div>
+			<div className="">
+				<Separator className="mx-2" orientation="vertical" />
+			</div>
+
+			<div className="w-1/2 grid content-between">
+				<div className="pr-5 overflow-y-scroll h-[70vh]">
+					{((displayResult && validationResult) ||
+						createRequest.validated_testcases) && (
+						<TestcaseValidationAccordion
+							runtimeResults={
+								validationResult?.runtime_results
+									? validationResult.runtime_results
+									: createRequest.validated_testcases
+							}
+						/>
+					)}
+				</div>
+				<div className="flex justify-end">
+					<Button disabled={loading} onClick={handleValidation} className="px-10">
+						{
+							loading ? (
+								<>
+								<Loader2 className="animate-spin mr-2"/>
+								Validating
+								</>
+							) : (
+								<>
+								Validate
+								</>
+							)
+						}
+						
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Scoring;
diff --git a/src/components/Forms/CreateProblemForm/index.tsx b/src/components/Forms/CreateProblemForm/index.tsx
new file mode 100644
index 0000000..c8fe8ec
--- /dev/null
+++ b/src/components/Forms/CreateProblemForm/index.tsx
@@ -0,0 +1,150 @@
+import { ArrowLeft } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { CreateProblemRequestForm } from "../../../types/forms/CreateProblemRequestForm";
+import { TestcaseModel } from "../../../types/models/Problem.model";
+import { Tabs, TabsList, TabsTrigger } from "../../shadcn/Tabs";
+import FormSaveButton from "../FormSaveButton";
+import GeneralDetail from "./GeneralDetail";
+import ManageGroups from "./ManageGroups";
+import Privacy from "./Privacy";
+import Requirement from "./Requirement";
+import Scoring from "./Scoring";
+
+const TabList = [
+	{
+		value: "general",
+		label: "General Detail",
+	},
+	{
+		value: "scoring",
+		label: "Scoring",
+	},
+	{
+		value: "requirement",
+		label: "Requirement",
+	},
+	{
+		value: "privacy",
+		label: "Privacy",
+	},
+	{
+		value: "groups",
+		label: "Manage Groups & Permissions",
+	},
+];
+
+export type OnProblemSaveCallback = (
+	setLoading: React.Dispatch<React.SetStateAction<boolean>>,
+	// problemid: string,
+	// setProblemId: React.Dispatch<React.SetStateAction<number>>,
+	createRequest: CreateProblemRequestForm
+) => void;
+
+const CreateProblemForm = ({
+	createRequestInitialValue,
+	onProblemSave,
+	validatedTestcases = [],
+}: {
+	createRequestInitialValue: CreateProblemRequestForm;
+	onProblemSave: OnProblemSaveCallback;
+	validatedTestcases?: TestcaseModel[];
+}) => {
+	const navigate = useNavigate();
+
+	const [loading, setLoading] = useState(false);
+
+	const [currentForm, setCurrentForm] = useSearchParams();
+	const [createRequest, setCreateRequest] =
+		useState<CreateProblemRequestForm>(createRequestInitialValue);
+
+
+	const handleSave = () => {
+		onProblemSave(setLoading, createRequest);
+	};
+
+
+	useEffect(() => {
+		if (validatedTestcases.length !== 0) {
+			setCreateRequest({
+				...createRequest,
+				validated_testcases: validatedTestcases,
+			});
+		}
+	}, [validatedTestcases]);
+
+	return (
+		<div className="w-[96%] mx-auto mt-10">
+			<div className="flex justify-between">
+				<h1 className="text-3xl font-bold tracking-tight flex">
+					<ArrowLeft
+						size={40}
+						className="text-gray-400 transition-all pr-0 hover:pr-1 cursor-pointer mr-2"
+						onClick={() => navigate(-1)}
+					/>
+					{createRequest.title === ""
+						? "Create Problem"
+						: createRequest.title}
+				</h1>
+				<div>
+					<div className="flex">
+						<Tabs value={currentForm.get("section") || "general"}>
+							<TabsList>
+								{TabList.map((tab, index) => (
+									<TabsTrigger
+										key={index}
+										value={tab.value}
+										onClick={() =>
+											setCurrentForm({section: tab.value})
+										}
+									>
+										{tab.label}
+									</TabsTrigger>
+								))}
+							</TabsList>
+						</Tabs>
+						<FormSaveButton
+							disabled={loading}
+							onClick={handleSave}
+						/>
+					</div>
+				</div>
+			</div>
+
+			<div className="mt-3">
+				{(!currentForm.get("section") || currentForm.get("section") === "general")  && (
+					<GeneralDetail
+						createRequest={createRequest}
+						setCreateRequest={setCreateRequest}
+					/>
+				)}
+				{currentForm.get("section") === "scoring" && (
+					<Scoring
+						createRequest={createRequest}
+						setCreateRequest={setCreateRequest}
+					/>
+				)}
+				{currentForm.get("section") === "requirement" && (
+					<Requirement
+						createRequest={createRequest}
+						setCreateRequest={setCreateRequest}
+					/>
+				)}
+				{currentForm.get("section") === "privacy" && (
+					<Privacy
+						createRequest={createRequest}
+						setCreateRequest={setCreateRequest}
+					/>
+				)}
+				{currentForm.get("section") === "groups" && (
+					<ManageGroups
+						createRequest={createRequest}
+						setCreateRequest={setCreateRequest}
+					/>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default CreateProblemForm;
diff --git a/src/components/Forms/FormSaveButton.tsx b/src/components/Forms/FormSaveButton.tsx
new file mode 100644
index 0000000..83940bd
--- /dev/null
+++ b/src/components/Forms/FormSaveButton.tsx
@@ -0,0 +1,35 @@
+import { ArrowDownToLine, Loader2, Plus } from "lucide-react";
+import { useParams } from "react-router-dom";
+import { Button } from "../shadcn/Button";
+
+const FormSaveButton = ({
+    disabled,
+    onClick,
+}:{
+    disabled: boolean
+    onClick: () => void
+}) => {
+
+	const {problemId,courseId,collectionId,groupId} = useParams()
+
+
+	return (
+		<Button disabled={disabled} onClick={onClick} className="px-10 ml-5">
+			{disabled ? (
+				<>
+					<Loader2 className="animate-spin mr-2" />
+					{(problemId || courseId || collectionId || groupId) ? "Saving" : "Creating"}
+				</>
+			) : (
+				<>
+					
+					{(problemId || courseId || collectionId || groupId) ? <ArrowDownToLine size={20} className="mr-2"/> : <Plus size={20} className="mr-2"/>}
+					{(problemId || courseId || collectionId || groupId) ? "Save" : "Create"}
+				</>
+			)}
+			{/* {loading ? "Saving..." : "Save"} */}
+		</Button>
+	);
+};
+
+export default FormSaveButton;
diff --git a/src/components/Forms/GroupAndPermissionManager.tsx b/src/components/Forms/GroupAndPermissionManager.tsx
new file mode 100644
index 0000000..b39fbf8
--- /dev/null
+++ b/src/components/Forms/GroupAndPermissionManager.tsx
@@ -0,0 +1,236 @@
+import { Eye, PlusCircle, Users, X } from "lucide-react";
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { CreateCollectionRequestForm } from "../../types/forms/CreateCollectionRequestForm";
+import {
+	CreateCourseRequestForm
+} from "../../types/forms/CreateCourseRequestForm";
+import { CreateProblemRequestForm } from "../../types/forms/CreateProblemRequestForm";
+import { GroupModel } from "../../types/models/Group.model";
+import GroupCheckbox from "../GroupCheckbox";
+import { Button } from "../shadcn/Button";
+import {
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuTrigger,
+} from "../shadcn/ContextMenu";
+import { Dialog, DialogContent } from "../shadcn/Dialog";
+import { ScrollArea } from "../shadcn/ScrollArea";
+import { Separator } from "../shadcn/Seperator";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../shadcn/Tooltip";
+
+export type GroupAndPermissionManagerOnAddGroupsCallback = {
+	addingGroups: GroupModel[];
+}
+
+export type GroupAndPermissionManagerOnRemoveGroupCallback = {
+	index: number;
+}
+
+const GroupListItem = ({
+	hexColor = "#000000",
+	name = "Group Name",
+	hightlighted = false,
+}: {
+	hexColor?: string;
+	name?: string;
+	hightlighted?: boolean;
+}) => {
+	const customStyle = () => {
+		let style =
+			"font-bold text-base flex items-center cursor-pointer py-1 px-3 rounded-md ";
+		if (hightlighted) {
+			style += " bg-green-100 text-white";
+		}
+
+		return style;
+	};
+
+	return (
+		<div
+			style={{
+				backgroundColor: hightlighted ? hexColor : "#FFFFFF",
+			}}
+			className={customStyle()}
+		>
+			<div
+				style={{
+					backgroundColor: hightlighted ? "#FFFFFF" : hexColor,
+				}}
+				className="w-3 h-3 rounded-full mr-2"
+			></div>
+			<div>{name}</div>
+		</div>
+	);
+};
+
+const GroupListItemContextMenu = ({
+	children,
+	onClickRemove = () => {},
+	onClickViewGroup = () => {},
+}: {
+	children: React.ReactNode;
+	onClickRemove?: () => void;
+	onClickViewGroup?: () => void;
+}) => {
+	return (
+		<ContextMenu>
+			<ContextMenuTrigger>{children}</ContextMenuTrigger>
+			<ContextMenuContent>
+				<ContextMenuItem onClick={() => onClickViewGroup()}>
+					<Eye size={16} className="mr-2" />
+					View Group
+				</ContextMenuItem>
+				<ContextMenuItem onClick={() => onClickRemove()}>
+					<X size={16} className="mr-2" />
+					Remove
+				</ContextMenuItem>
+			</ContextMenuContent>
+		</ContextMenu>
+	);
+};
+
+const GroupAndPermissionManager = ({
+	allGroups=[],
+	createRequest,
+	// setCreateRequest,
+	onAddGroups=()=>{},
+	onRemoveGroup=()=>{},
+	selectedIndex=-1,
+	setSelectedIndex=()=>{},
+	children,
+}: {
+	allGroups: GroupModel[];
+	createRequest: CreateCourseRequestForm | CreateCollectionRequestForm | CreateProblemRequestForm;
+	// setCreateRequest: 
+	// 	React.Dispatch<React.SetStateAction<CreateCourseRequestForm>> |
+	// 	React.Dispatch<React.SetStateAction<CreateCollectionRequestForm>> |
+	// 	React.Dispatch<React.SetStateAction<CreateProblemRequestForm>>;
+
+	onAddGroups?: (e: GroupAndPermissionManagerOnAddGroupsCallback) => void;
+	onRemoveGroup?: (e: GroupAndPermissionManagerOnRemoveGroupCallback) => void;
+	selectedIndex?: number;
+	setSelectedIndex?: React.Dispatch<React.SetStateAction<number>>;
+	children: React.ReactNode;
+}) => {
+	const navigate = useNavigate();
+
+	const [openAddGroupsDialog, setOpenAddGroupsDialog] =
+		useState<boolean>(false);
+	const [selectedGroupIds, setSelectedGroupIds] = useState<string[]>([]);
+
+	const handleSelectGroupCheckbox = (groupId: string) => {
+		if (selectedGroupIds.includes(groupId)) {
+			setSelectedGroupIds(selectedGroupIds.filter((g) => g !== groupId));
+		} else {
+			setSelectedGroupIds([...selectedGroupIds, groupId]);
+		}
+	};
+
+	const handleRemoveGroupPermission = (index: number) => {
+		onRemoveGroup({index})
+	}
+
+	const getNotInPermissionGroup = () => {
+		const inPermissiongroupIds = createRequest.groupPermissions.map(
+			(groupPermission) => groupPermission.group.group_id
+		);
+		return allGroups.filter(
+			(group) => !inPermissiongroupIds.includes(group.group_id)
+		);
+	};
+
+	const handleAddGroups = () => {
+		const addingGroups = allGroups.filter((group) =>
+			selectedGroupIds.includes(group.group_id)
+		);
+		onAddGroups({addingGroups})
+		setSelectedGroupIds([]);
+		setOpenAddGroupsDialog(false);
+	};
+
+	return (
+		<div className="flex">
+			<div className="w-1/6 h-[75vh]">
+				<div className="flex text-green-600 items-center justify-between">
+					<p className="flex font-bold text-base">
+						<Users size={20} className="mr-2" />
+						Groups
+					</p>
+					<Tooltip>
+						<TooltipTrigger>
+							<PlusCircle
+								onClick={() => setOpenAddGroupsDialog(true)}
+								size={20}
+							/>
+						</TooltipTrigger>
+						<TooltipContent>Add Group</TooltipContent>
+					</Tooltip>
+				</div>
+				<ScrollArea className="mt-2">
+					<div className="grid gap-y-1">
+						{createRequest.groupPermissions.map(
+							(groupPermission, index) => (
+								<div onClick={() => setSelectedIndex(index)}>
+									<GroupListItemContextMenu
+										onClickViewGroup={() => navigate(`/my/groups/${groupPermission.group.group_id}/edit`)}
+										onClickRemove={() => handleRemoveGroupPermission(index)}
+									>
+										<GroupListItem
+											key={index}
+											name={groupPermission.group.name}
+											hexColor={
+												groupPermission.group.color
+											}
+											hightlighted={
+												selectedIndex === index
+											}
+										/>
+									</GroupListItemContextMenu>
+								</div>
+							)
+						)}
+					</div>
+				</ScrollArea>
+			</div>
+			<div>
+				<Separator orientation="vertical" className="mx-3" />
+			</div>
+			<ScrollArea className="w-5/6 h-[75vh]">
+					{children}
+			</ScrollArea>
+
+			<Dialog
+				open={openAddGroupsDialog}
+				onOpenChange={setOpenAddGroupsDialog}
+			>
+				<DialogContent className="max-w-[80%]">
+					<p className="font-bold">Add Groups</p>
+					<ScrollArea>
+						<div className="grid grid-cols-4 gap-2">
+							{getNotInPermissionGroup().map((group) => (
+								<GroupCheckbox
+									onClick={() =>
+										handleSelectGroupCheckbox(
+											group.group_id
+										)
+									}
+									checked={selectedGroupIds.includes(
+										group.group_id
+									)}
+									group={group}
+								/>
+							))}
+						</div>
+					</ScrollArea>
+					<div className="flex justify-end">
+						<Button onClick={handleAddGroups}>Add Groups</Button>
+					</div>
+				</DialogContent>
+			</Dialog>
+		</div>
+	);
+};
+
+export default GroupAndPermissionManager;
diff --git a/src/components/Forms/PermissionSwitchGroups/CollectionPermissionSwitchGroup.tsx b/src/components/Forms/PermissionSwitchGroups/CollectionPermissionSwitchGroup.tsx
new file mode 100644
index 0000000..d1a8e97
--- /dev/null
+++ b/src/components/Forms/PermissionSwitchGroups/CollectionPermissionSwitchGroup.tsx
@@ -0,0 +1,60 @@
+import PermissionSwitch from "../../Permissions/PermissionSwitch";
+import { Switch } from "../../shadcn/Switch";
+
+const CollectionPermissionSwitchGroup = ({
+	manageCollectionsChecked = false,
+	viewCollectionsChecked = false,
+	onClickManageCollections = () => {},
+	onClickViewCollections = () => {},
+	variant = "normal",
+}: {
+	manageCollectionsChecked?: boolean;
+	viewCollectionsChecked?: boolean;
+	onClickManageCollections?: () => void | undefined;
+	onClickViewCollections?: () => void | undefined;
+	variant?: "normal" | "minimal";
+}) => {
+	const CollectionPermissions = [
+		{
+			title: "Manage Collections",
+			description:
+				"Can edit collections name and description. Can add or remove problems from collection as well.",
+			checked: manageCollectionsChecked,
+			onClick: onClickManageCollections,
+		},
+		{
+			title: "View Collections",
+			description:
+				"Can view collection and thier problems. Note that those problems must be accessible as well.",
+			checked: viewCollectionsChecked,
+			onClick: onClickViewCollections,
+		},
+	];
+
+	return (
+		(variant === "normal" && (
+			<>
+				{CollectionPermissions.map((permission) => (
+					<PermissionSwitch
+						title={permission.title}
+						description={permission.description}
+						checked={permission.checked}
+						onClick={permission.onClick}
+					/>
+				))}
+			</>
+		)) ||
+		(variant === "minimal" && (
+			<>
+				{CollectionPermissions.map((permission) => (
+					<div className="flex items-center font-medium text-sm">
+						{permission.title}
+						<Switch className="ml-2" />
+					</div>
+				))}
+			</>
+		))
+	);
+};
+
+export default CollectionPermissionSwitchGroup;
diff --git a/src/components/Forms/PermissionSwitchGroups/CoursePermissionSwitchGroup.tsx b/src/components/Forms/PermissionSwitchGroups/CoursePermissionSwitchGroup.tsx
new file mode 100644
index 0000000..d9d784a
--- /dev/null
+++ b/src/components/Forms/PermissionSwitchGroups/CoursePermissionSwitchGroup.tsx
@@ -0,0 +1,50 @@
+import PermissionSwitch from "../../Permissions/PermissionSwitch";
+
+const CoursePermissionSwitchGroup = ({
+	disabled = false,
+	manageCoursesChecked=false,
+	viewCourseLogsChecked=false,
+	viewCoursesChecked=false,
+	onClickManageCourses=()=>{},
+	onClickViewCourseLogs=()=>{},
+	onClickViewCourses=()=>{},
+}: {
+	disabled?: boolean;
+	manageCoursesChecked?: boolean;
+	viewCourseLogsChecked?: boolean;
+	viewCoursesChecked?: boolean;
+	onClickManageCourses?: () => void | undefined
+	onClickViewCourseLogs?: () => void | undefined
+	onClickViewCourses?: () => void | undefined
+}) => {
+	return (
+		<>
+			<PermissionSwitch
+				title="Manage Courses"
+				description="Can edit course name and description. Can add or remove collections from course as well."
+				checked={manageCoursesChecked}
+				onClick={() => onClickManageCourses()}
+				disabled={disabled}
+			/>
+			<PermissionSwitch
+				title="View Courses Update Log"
+				description="Can view update log and insight in courses
+						(submissions, members, etc.)."
+				checked={viewCourseLogsChecked}
+				onClick={() => onClickViewCourseLogs()}
+				disabled={disabled}
+			/>
+			<PermissionSwitch
+				title="View Courses"
+				description="Can view course and thier resources including
+						collections and problems. Note that those
+						collections and problems must be accessible as well."
+				checked={viewCoursesChecked}
+				onClick={() => onClickViewCourses()}
+				disabled={disabled}
+			/>
+		</>
+	);
+};
+
+export default CoursePermissionSwitchGroup;
diff --git a/src/components/Forms/PermissionSwitchGroups/ProblemPermissionSwitchGroup.tsx b/src/components/Forms/PermissionSwitchGroups/ProblemPermissionSwitchGroup.tsx
new file mode 100644
index 0000000..ec4e61d
--- /dev/null
+++ b/src/components/Forms/PermissionSwitchGroups/ProblemPermissionSwitchGroup.tsx
@@ -0,0 +1,32 @@
+import PermissionSwitch from "../../Permissions/PermissionSwitch";
+
+const ProblemPermissionSwitchGroup = ({
+	manageProblemsChecked = false,
+	viewProblemsChecked = false,
+	onClickManageProblems = () => {},
+	onClickViewProblems = () => {},
+}: {
+	manageProblemsChecked?: boolean;
+	viewProblemsChecked?: boolean;
+	onClickManageProblems?: () => void | undefined;
+	onClickViewProblems?: () => void | undefined;
+}) => {
+	return (
+		<>
+			<PermissionSwitch
+				title="Manage Problems"
+				description="Can edit problem."
+				checked={manageProblemsChecked}
+				onClick={() => onClickManageProblems()}
+			/>
+			<PermissionSwitch
+				title="View Problems"
+				description="Can view problems."
+				checked={viewProblemsChecked}
+				onClick={() => onClickViewProblems()}
+			/>
+		</>
+	);
+};
+
+export default ProblemPermissionSwitchGroup;
diff --git a/src/components/GroupCheckbox.tsx b/src/components/GroupCheckbox.tsx
new file mode 100644
index 0000000..5397c3d
--- /dev/null
+++ b/src/components/GroupCheckbox.tsx
@@ -0,0 +1,33 @@
+import { GroupModel } from "../types/models/Group.model";
+import { Checkbox } from "./shadcn/Checkbox";
+
+const GroupCheckbox = ({
+    group,
+    checked=true,
+    onClick=()=>{}
+}:{
+    group: GroupModel
+    checked?:boolean
+    onClick?:()=>void
+}) => {
+
+    const customStyle = () => {
+        let style = "border rounded-md p-2 flex items-center justify-between cursor-pointer "
+        if (checked) {
+            style += "bg-green-100 text-green-800 border-green-600 "
+        }
+        return style
+    }
+
+	return (
+		<div className={customStyle()} onClick={onClick}>
+			<div className="flex items-center">
+				<div style={{backgroundColor: group.color}} className="w-3 rounded-full h-3 mr-2"></div>
+				<p className="font-medium">{group.name}</p>
+			</div>
+            <Checkbox checked={checked}/>
+		</div>
+	);
+};
+
+export default GroupCheckbox;
diff --git a/src/components/MonacoEditor.tsx b/src/components/MonacoEditor.tsx
new file mode 100644
index 0000000..c402aea
--- /dev/null
+++ b/src/components/MonacoEditor.tsx
@@ -0,0 +1,11 @@
+import { Editor } from '@monaco-editor/react'
+
+const MonacoEditor = () => {
+  return (
+    <div className=''>
+        <Editor theme='vs-dark'  height="35vh" defaultLanguage="python"/>
+    </div>
+  )
+}
+
+export default MonacoEditor
\ No newline at end of file
diff --git a/src/components/NavbarCollectionsProblemsAccordion.tsx b/src/components/NavbarCollectionsProblemsAccordion.tsx
new file mode 100644
index 0000000..6f5ccf0
--- /dev/null
+++ b/src/components/NavbarCollectionsProblemsAccordion.tsx
@@ -0,0 +1,127 @@
+import { FileCheck, FileSpreadsheet, Folder } from "lucide-react";
+import { useContext } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { CourseNavSidebarContext } from "../contexts/CourseNavSidebarContexnt";
+import { ProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel } from "../types/models/Problem.model";
+import { TopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel } from "../types/models/Topic.model";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "./shadcn/Accordion";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./shadcn/Tooltip";
+import { onMiddleClickOpenInNewTab } from "../utilities/OnMiddleClickOpenInNewTab";
+
+const NavbarCollectionProblemCard = ({
+	problem
+}:{
+	problem: ProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel
+}) => {
+
+	const {courseId,problemId} = useParams()
+
+	const navigate = useNavigate()
+
+	const backgroundCustomStyle = () => {
+		let result = "flex text-base items-center p-1 rounded cursor-pointer "
+		if (problem.best_submission?.is_passed) {
+			result += "hover:bg-green-100 "
+		}
+		else {
+			result += "hover:bg-blue-100 "
+		}
+
+		if (problem.problem_id === String(problemId)) {
+			if (problem.best_submission?.is_passed) {
+				result += "bg-green-100 "
+			}
+			else {
+				result += "bg-blue-100 "
+			}
+		}
+		return result
+	}
+
+	return (
+		<div 
+		onMouseDown={(e) => onMiddleClickOpenInNewTab(e,`/courses/${courseId}/problems/${problem.problem_id}`)}
+		onClick={() => {
+			navigate(`/courses/${courseId}/problems/${problem.problem_id}`)
+			window.location.reload()
+		}} className={backgroundCustomStyle()}>
+			{problem.best_submission?.is_passed ? <FileCheck size={18} className="text-green-500 mr-2"/> : <FileSpreadsheet size={18} className="text-blue-400 mr-2" />}
+			<p className="w-5/6 line-clamp-1 text-left font-mono">{problem.title}</p>
+		</div>
+	);
+};
+
+const NavbarCollectionsProblemsAccordion = ({
+	collections,
+}: {
+	collections: TopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel[];
+}) => {
+
+	const {
+        recentOpenCollection,
+        setRecentOpenCollection
+    } = useContext(CourseNavSidebarContext)
+
+	const handleAccordionTrigger = (index:number) => {
+		if (recentOpenCollection.length > 0 && recentOpenCollection.includes(String(index))) {
+			setRecentOpenCollection(recentOpenCollection.filter((value) => value !== String(index)))
+		}
+		else {
+			setRecentOpenCollection([...recentOpenCollection,String(index)])
+		}
+	}
+
+	// useEffect(() => {
+	// 	const recentOpenStorage = localStorage.getItem("recent_open_collection")
+	// 	console.log(recentOpenStorage)
+
+	// 	if (recentOpenStorage) {
+	// 		setRecentOpenCollection(JSON.parse(String(recentOpenStorage)))
+	// 	}
+	// },[])
+
+	// useEffect(()=>{
+	// 	localStorage.setItem("recent_open_collection",JSON.stringify(recentOpenCollection))
+	// },[recentOpenCollection])
+
+	return (
+		<Accordion type="multiple" value={recentOpenCollection}>
+			{collections?.map((topicCollection,index) => (
+				<AccordionItem value={String(index)} className="">
+					<AccordionTrigger onClick={() => handleAccordionTrigger(index)} className="py-0 p-3">
+						<Tooltip>
+							<TooltipTrigger>
+							<div className="flex items-center text-base">
+							<Folder
+								size={18}
+								className="text-yellow-400 mr-2"
+							/>
+							<p className="w-5/6 line-clamp-1 text-left">{topicCollection.collection.name}</p>
+						</div>
+							</TooltipTrigger>
+							<TooltipContent>
+								{topicCollection.collection.name}
+							</TooltipContent>
+						</Tooltip>
+					</AccordionTrigger>
+					<AccordionContent>
+						<div className="ml-5 w-[80%] grid gap-y-1">
+							{topicCollection.collection.problems.map((collectionProblem) => (
+
+								<NavbarCollectionProblemCard problem={collectionProblem.problem}/>
+							))}
+							
+						</div>
+					</AccordionContent>
+				</AccordionItem>
+			))}
+		</Accordion>
+	);
+};
+
+export default NavbarCollectionsProblemsAccordion;
diff --git a/src/components/NavigationBar/CourseNavSidebar.tsx b/src/components/NavigationBar/CourseNavSidebar.tsx
new file mode 100644
index 0000000..fcddf23
--- /dev/null
+++ b/src/components/NavigationBar/CourseNavSidebar.tsx
@@ -0,0 +1,101 @@
+import { useContext, useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { CourseNavSidebarContext } from "../../contexts/CourseNavSidebarContexnt";
+import { TopicService } from "../../services/Topic.service";
+import { Separator } from "../shadcn/Seperator";
+import { ChevronLeft, ChevronRight, LibraryBig } from "lucide-react";
+import NavbarCollectionsProblemsAccordion from "../NavbarCollectionsProblemsAccordion";
+import { TopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel } from "../../types/models/Topic.model";
+import { ScrollArea } from "../shadcn/ScrollArea";
+
+const CourseNavSidebar = () => {
+	const navigate = useNavigate();
+	const accountId = String(localStorage.getItem("account_id"));
+	const { courseId } = useParams();
+
+	const courseNavSidebarContext = useContext(CourseNavSidebarContext);
+	const { isOpen, setIsOpen, setSection, course, setCourse,setRecentOpenCollection } = courseNavSidebarContext;
+
+
+
+	useEffect(() => {
+		TopicService.getPublicByAccount(accountId, String(courseId)).then(
+			(response) => {
+				console.log(response.data);
+				setCourse(response.data);
+			}
+		);
+	}, [accountId, courseId]);
+
+	useEffect(() => {
+		console.log('open',isOpen)
+	},[isOpen])
+
+	// useEffect(()=>{
+	// 	// localStorage.setItem("recent_open_collection",JSON.stringify(recentOpenCollection))
+	// 	console.log('recent',recentOpenCollection)
+	// },[recentOpenCollection])
+
+	useEffect(() => {
+		const courseNavSidebarContextStorage = localStorage.getItem("courseNavSidebarContext")
+		if (courseNavSidebarContextStorage) {
+			setCourse(JSON.parse(courseNavSidebarContextStorage).course)
+			setIsOpen(JSON.parse(courseNavSidebarContextStorage).isOpen)
+			setSection(JSON.parse(courseNavSidebarContextStorage).section)
+			setRecentOpenCollection(JSON.parse(courseNavSidebarContextStorage).recentOpenCollection)
+		}
+	},[])
+
+	useEffect(() => {
+		localStorage.setItem("courseNavSidebarContext",JSON.stringify(courseNavSidebarContext))
+	},[ courseNavSidebarContext ])
+
+
+
+	return (
+		<>
+			<div className="h-screen pt-10 sticky top-0">
+				{isOpen ? (
+					<div>
+						<div className="flex">
+							<div
+								onClick={() => navigate(`/courses/${courseId}`)}
+								className="flex items-center px-2 py-4 cursor-pointer w-11/12"
+							>
+								<LibraryBig
+									size={20}
+									className="text-purple-400 mx-1"
+								/>
+								<p className="font-medium text-base w-11/12 line-clamp-1 text-left">
+									{course?.name}
+								</p>
+							</div>
+							<div
+								onClick={() => setIsOpen(false)}
+								className="cursor-pointer border-l py-4"
+							>
+								<ChevronLeft />
+							</div>
+						</div>
+						<Separator />
+						<ScrollArea className="h-[80vh]">
+							<NavbarCollectionsProblemsAccordion
+								collections={
+									course?.collections as TopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel[]
+								}
+							/>
+						</ScrollArea>
+					</div>
+				) : (
+					<div>
+						<div onClick={() => setIsOpen(true)} className="p-2 border-b cursor-pointer">
+							<ChevronRight />
+						</div>
+					</div>
+				)}
+			</div>
+		</>
+	);
+};
+
+export default CourseNavSidebar;
diff --git a/src/components/NavigationBar/NavSidebar.tsx b/src/components/NavigationBar/NavSidebar.tsx
new file mode 100644
index 0000000..1727515
--- /dev/null
+++ b/src/components/NavigationBar/NavSidebar.tsx
@@ -0,0 +1,175 @@
+import { FileSpreadsheet, Folder, LibraryBig, Users } from "lucide-react";
+import React, { useContext } from "react";
+import { useNavigate } from "react-router-dom";
+import { NavSidebarContext } from "../../contexts/NavSidebarContext";
+import { Separator } from "../shadcn/Seperator";
+
+const SectionButton = ({
+	selected = false,
+	children,
+	onClick = () => {},
+}: {
+	selected?: boolean;
+	children?: React.ReactNode;
+	onClick?: (e?: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}) => {
+	return (
+		<div
+			className={`flex font-medium cursor-pointer w-[90%] p-2 rounded-lg items-center ${
+				selected ? "bg-green-600 text-white" : "hover:bg-green-100"
+			}`}
+			onClick={(e) => onClick(e)}
+		>
+			{children}
+		</div>
+	);
+};
+
+const NavSidebar = () => {
+	const navigate = useNavigate();
+
+	const { isOpen, setIsOpen } = useContext(NavSidebarContext);
+	
+	const { section } = useContext(NavSidebarContext);
+
+	const customIconBehaviour = (selected: boolean) => {
+		if (selected) return "mr-2 text-white";
+		return "mr-2 text-green-600";
+	};
+
+	const customMiniIconBehaviour = (selected: boolean) => {
+		if (selected) return "text-white";
+		return "text-green-600";
+	};
+
+	return (
+		<>
+			{!isOpen ? (
+				<div className="w-1/8 h-screen pr-5 pt-10">
+					<div>
+						<div className="grid ml-3 gap-1 gap-y-1">
+							<p onClick={() => setIsOpen(true)}>Open</p>
+							<SectionButton
+								selected={section === "PROBLEMS"}
+								onClick={() => navigate("/my/problems")}
+							>
+								<FileSpreadsheet
+									size={30}
+									className={customMiniIconBehaviour(
+										section === "PROBLEMS"
+									)}
+								/>
+								
+							</SectionButton>
+							<SectionButton
+								selected={section === "COLLECTIONS"}
+								onClick={() => navigate("/my/collections")}
+							>
+								<Folder
+									size={30}
+									className={customMiniIconBehaviour(
+										section === "COLLECTIONS"
+									)}
+								/>
+								
+							</SectionButton>
+							<SectionButton
+								selected={section === "COURSES"}
+								onClick={() => navigate("/my/courses")}
+							>
+								<LibraryBig
+									size={30}
+									className={customMiniIconBehaviour(
+										section === "COURSES"
+									)}
+								/>
+								
+							</SectionButton>
+							<SectionButton
+								selected={section === "GROUPS"}
+								onClick={() => navigate("/my/groups")}
+							>
+								<Users
+									size={30}
+									className={customMiniIconBehaviour(
+										section === "GROUPS"
+									)}
+								/>
+								
+							</SectionButton>
+						</div>
+
+						<div className="mt-5">
+							<Separator />
+						</div>
+
+					</div>
+				</div>
+			) : (
+				<div className="w-1/6 h-screen pt-10">
+					<div>
+						<div className="grid ml-3 gap-1 gap-y-1">
+							<p onClick={() => setIsOpen(false)}>Close</p>
+							<SectionButton
+								selected={section === "PROBLEMS"}
+								onClick={() => navigate("/my/problems")}
+							>
+								<FileSpreadsheet
+									size={30}
+									className={customIconBehaviour(
+										section === "PROBLEMS"
+									)}
+								/>
+								Problems
+							</SectionButton>
+							<SectionButton
+								selected={section === "COLLECTIONS"}
+								onClick={() => navigate("/my/collections")}
+							>
+								<Folder
+									size={30}
+									className={customIconBehaviour(
+										section === "COLLECTIONS"
+									)}
+								/>
+								Collections
+							</SectionButton>
+							<SectionButton
+								selected={section === "COURSES"}
+								onClick={() => navigate("/my/courses")}
+							>
+								<LibraryBig
+									size={30}
+									className={customIconBehaviour(
+										section === "COURSES"
+									)}
+								/>
+								Courses
+							</SectionButton>
+							<SectionButton
+								selected={section === "GROUPS"}
+								onClick={() => navigate("/my/groups")}
+							>
+								<Users
+									size={30}
+									className={customIconBehaviour(
+										section === "GROUPS"
+									)}
+								/>
+								Groups
+							</SectionButton>
+						</div>
+
+						<div className="mt-5">
+							<Separator />
+						</div>
+
+						<p className="ml-5">Recent Edited</p>
+					</div>
+				</div>
+			)}
+		</>
+	);
+};
+
+export default NavSidebar;
diff --git a/src/components/NavigationBar/NavigationBar.tsx b/src/components/NavigationBar/NavigationBar.tsx
new file mode 100644
index 0000000..666cd33
--- /dev/null
+++ b/src/components/NavigationBar/NavigationBar.tsx
@@ -0,0 +1,164 @@
+import { useContext } from "react";
+import {
+	NavigationMenu,
+	NavigationMenuItem,
+	NavigationMenuLink,
+	NavigationMenuList,
+	navigationMenuTriggerStyle
+} from "../shadcn/NevigationMenu";
+
+
+import { LoginContext } from "../../contexts/LoginContext";
+import ProfileDropdown from './ProfileDropdown';
+
+
+
+const NavigationBar = (/* { isLogin = false }: { isLogin?: boolean } */) => {
+
+	const {isLogin} = useContext(LoginContext);
+
+	const customNavigationMenuTriggerStyle = () => {
+		return (
+			navigationMenuTriggerStyle() +
+			" bg-green-600 hover:bg-green-700 hover:text-white text-white cursor-pointer"
+		);
+	};
+
+	
+
+	return (
+		<NavigationMenu className="bg-green-600">
+			{/* <div className="flex w-screen"> */}
+			<NavigationMenuList className="flex w-screen justify-between">
+				<div className="flex gap-1">
+					<NavigationMenuItem className="">
+						<NavigationMenuLink
+							className={customNavigationMenuTriggerStyle()}
+							href="/"
+						>
+							Home
+						</NavigationMenuLink>
+						<NavigationMenuLink
+							className={customNavigationMenuTriggerStyle()}
+							href="/explore"
+						>
+							Explore
+						</NavigationMenuLink>
+						{/* <NavigationMenuLink
+							className={customNavigationMenuTriggerStyle()}
+							href="/courses"
+						>
+							Courses
+						</NavigationMenuLink> */}
+						<NavigationMenuLink
+							className={customNavigationMenuTriggerStyle()}
+							href="/dashboard"
+						>
+							Dashboard
+						</NavigationMenuLink>
+					</NavigationMenuItem>
+					{/* <NavigationMenuItem>
+						<NavigationMenuTrigger>
+							Getting started
+						</NavigationMenuTrigger>
+						<NavigationMenuContent>
+							<ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+								<li className="row-span-3">
+									<NavigationMenuLink asChild>
+										<a
+											className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+											href="/"
+										> */}
+					{/* <Icons.logo className="h-6 w-6" /> */}
+					{/* <div className="mb-2 mt-4 text-lg font-medium">
+												shadcn/ui
+											</div>
+											<p className="text-sm leading-tight text-muted-foreground">
+												Beautifully designed components
+												built with Radix UI and Tailwind
+												CSS.
+											</p>
+										</a>
+									</NavigationMenuLink>
+								</li>
+								<ListItem href="/docs" title="Introduction">
+									Re-usable components built using Radix UI
+									and Tailwind CSS.
+								</ListItem>
+								<ListItem
+									href="/docs/installation"
+									title="Installation"
+								>
+									How to install dependencies and structure
+									your app.
+								</ListItem>
+								<ListItem
+									href="/docs/primitives/typography"
+									title="Typography"
+								>
+									Styles for headings, paragraphs, lists...etc
+								</ListItem>
+							</ul>
+						</NavigationMenuContent>
+					</NavigationMenuItem>
+					<NavigationMenuItem>
+						<NavigationMenuTrigger>
+							Components
+						</NavigationMenuTrigger>
+						<NavigationMenuContent>
+							<ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+								{components.map((component) => (
+									<ListItem
+										key={component.title}
+										title={component.title}
+										href={component.href}
+									>
+										{component.description}
+									</ListItem>
+								))}
+							</ul>
+						</NavigationMenuContent>
+					</NavigationMenuItem> */}
+				</div>
+				<div className="flex gap-1 pr-1">
+					{!isLogin ? (
+						<>
+							<NavigationMenuItem>
+								<NavigationMenuLink
+									href="/login"
+									className={customNavigationMenuTriggerStyle()}
+								>
+									Login
+								</NavigationMenuLink>
+							</NavigationMenuItem>
+							<NavigationMenuItem>
+								<NavigationMenuLink
+									href="/register"
+									className={customNavigationMenuTriggerStyle()}
+								>
+									Register
+								</NavigationMenuLink>
+							</NavigationMenuItem>
+						</>
+					) : (
+						<>
+							<NavigationMenuItem>
+								<ProfileDropdown>
+									<NavigationMenuLink
+										className={customNavigationMenuTriggerStyle()}
+										href="#"
+									>
+										{localStorage.getItem("username")}
+									</NavigationMenuLink>
+								</ProfileDropdown>
+							</NavigationMenuItem>
+						</>
+					)}
+				</div>
+			</NavigationMenuList>
+			{/* </div> */}
+		</NavigationMenu>
+	);
+};
+
+export default NavigationBar;
diff --git a/src/components/NavigationBar/ProfileDropdown.tsx b/src/components/NavigationBar/ProfileDropdown.tsx
new file mode 100644
index 0000000..2e9592e
--- /dev/null
+++ b/src/components/NavigationBar/ProfileDropdown.tsx
@@ -0,0 +1,140 @@
+import { ReactNode } from 'react';
+
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger
+} from "../shadcn/DropdownMenu";
+
+import {
+	FileSpreadsheet,
+	Folder,
+	LibraryBig,
+	LogOut,
+	Users
+} from "lucide-react";
+import { useNavigate } from 'react-router-dom';
+import { AuthService } from '../../services/Auth.service';
+
+const ProfileDropdown = ({ children }: { children: ReactNode }) => {
+
+    const navigate = useNavigate()
+
+    const username = localStorage.getItem('username')
+    const account_id = String(localStorage.getItem('account_id'))
+    const token = localStorage.getItem('token')
+
+    const handleLogout = async () => {
+
+        if (!token) {
+            return
+        }
+
+        const {status} = await AuthService.logout({account_id,token})
+
+        if (status === 200) {
+            localStorage.removeItem('account_id')
+            localStorage.removeItem('username')
+            localStorage.removeItem('token')
+            window.location.reload()
+        }
+
+    }
+
+  return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+			<DropdownMenuContent className="w-56">
+				<DropdownMenuLabel>{username}</DropdownMenuLabel>
+				<DropdownMenuSeparator />
+				<DropdownMenuGroup>
+					{/* <DropdownMenuItem dis>
+						<User className="mr-2 h-4 w-4" />
+						<span>Profile</span> */}
+						{/* <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut> */}
+					{/* </DropdownMenuItem> */}
+					<DropdownMenuItem onClick={() => navigate("/my/problems")}>
+						<FileSpreadsheet className="mr-2 h-4 w-4" />
+						<span>My Problems</span>
+						{/* <DropdownMenuShortcut>⌘B</DropdownMenuShortcut> */}
+					</DropdownMenuItem>
+					<DropdownMenuItem onClick={() => navigate("/my/collections")}>
+						<Folder className="mr-2 h-4 w-4" />
+						<span>My Collections</span>
+						{/* <DropdownMenuShortcut>⌘S</DropdownMenuShortcut> */}
+					</DropdownMenuItem>
+					<DropdownMenuItem onClick={() => navigate("/my/courses")}>
+						<LibraryBig className="mr-2 h-4 w-4" />
+						<span>My Courses</span>
+						{/* <DropdownMenuShortcut>⌘K</DropdownMenuShortcut> */}
+					</DropdownMenuItem>
+					<DropdownMenuItem onClick={() => navigate("/my/groups")}>
+						<Users className="mr-2 h-4 w-4" />
+						<span>My Groups</span>
+						{/* <DropdownMenuShortcut>⌘K</DropdownMenuShortcut> */}
+					</DropdownMenuItem>
+				</DropdownMenuGroup>
+				{/* <DropdownMenuSeparator />
+				<DropdownMenuGroup>
+					<DropdownMenuItem>
+						<Users className="mr-2 h-4 w-4" />
+						<span>Team</span>
+					</DropdownMenuItem>
+					<DropdownMenuSub>
+						<DropdownMenuSubTrigger>
+							<UserPlus className="mr-2 h-4 w-4" />
+							<span>Invite users</span>
+						</DropdownMenuSubTrigger>
+						<DropdownMenuPortal>
+							<DropdownMenuSubContent>
+								<DropdownMenuItem>
+									<Mail className="mr-2 h-4 w-4" />
+									<span>Email</span>
+								</DropdownMenuItem>
+								<DropdownMenuItem>
+									<MessageSquare className="mr-2 h-4 w-4" />
+									<span>Message</span>
+								</DropdownMenuItem>
+								<DropdownMenuSeparator />
+								<DropdownMenuItem>
+									<PlusCircle className="mr-2 h-4 w-4" />
+									<span>More...</span>
+								</DropdownMenuItem>
+							</DropdownMenuSubContent>
+						</DropdownMenuPortal>
+					</DropdownMenuSub>
+					<DropdownMenuItem>
+						<Plus className="mr-2 h-4 w-4" />
+						<span>New Team</span>
+						<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+					</DropdownMenuItem>
+				</DropdownMenuGroup>
+				<DropdownMenuSeparator />
+				<DropdownMenuItem>
+					<Github className="mr-2 h-4 w-4" />
+					<span>GitHub</span>
+				</DropdownMenuItem>
+				<DropdownMenuItem>
+					<LifeBuoy className="mr-2 h-4 w-4" />
+					<span>Support</span>
+				</DropdownMenuItem>
+				<DropdownMenuItem disabled>
+					<Cloud className="mr-2 h-4 w-4" />
+					<span>API</span>
+				</DropdownMenuItem> */}
+				<DropdownMenuSeparator />
+				<DropdownMenuItem onClick={handleLogout}>
+					<LogOut className="mr-2 h-4 w-4" />
+					<span>Log out</span>
+					{/* <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut> */}
+				</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	
+  )
+}
+export default ProfileDropdown
\ No newline at end of file
diff --git a/src/components/Permissions/PermissionSwitch.tsx b/src/components/Permissions/PermissionSwitch.tsx
new file mode 100644
index 0000000..e95d02c
--- /dev/null
+++ b/src/components/Permissions/PermissionSwitch.tsx
@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+import { Separator } from "../shadcn/Seperator";
+import { Switch } from "../shadcn/Switch";
+
+const PermissionSwitch = ({
+	title = "Title",
+	description = "Description",
+	checked = false,
+	onClick = () => {},
+	disabled = false,
+}: {
+	title?: ReactNode;
+	description?: ReactNode;
+	checked?: boolean;
+	onClick?: () => void;
+	disabled?: boolean;
+}) => {
+	return (
+		<div  onClick={onClick} className="pt-3 hover:bg-green-100 hover:text-green-800 cursor-pointer">
+			<div className="px-2">
+				<div className="flex justify-between">
+					<p className="font-bold">{title}</p>
+					<Switch disabled={disabled} checked={checked} />
+				</div>
+				<p className="text-base my-3">{description}</p>
+			</div>
+			<Separator className="" />
+		</div>
+	);
+};
+
+export default PermissionSwitch;
diff --git a/src/components/Permissions/PermissionSwitchScrollArea.tsx b/src/components/Permissions/PermissionSwitchScrollArea.tsx
new file mode 100644
index 0000000..a84f529
--- /dev/null
+++ b/src/components/Permissions/PermissionSwitchScrollArea.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { ScrollArea } from "../shadcn/ScrollArea";
+
+const PermissionSwitchScrollArea = ({
+	children,
+	className = "",
+	childrenClassName = "",
+}: {
+	children: React.ReactNode;
+	className?: string;
+	childrenClassName?: string;
+}) => {
+	return (
+		<ScrollArea className={" " + className}>
+			<div className={" " + childrenClassName}>{children}</div>
+		</ScrollArea>
+	);
+};
+
+export default PermissionSwitchScrollArea;
diff --git a/src/components/PlateEditor.tsx b/src/components/PlateEditor.tsx
new file mode 100644
index 0000000..d7b7081
--- /dev/null
+++ b/src/components/PlateEditor.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+import { CommentsProvider } from '@udecode/plate-comments';
+import { Plate } from '@udecode/plate-common';
+import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
+import { useRef } from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
+import { commentsUsers, myUserId } from '../lib/plate/comments';
+import { MENTIONABLES } from '../lib/plate/mentionables';
+import { plugins } from '../lib/plate/plate-plugins';
+import { cn } from '../lib/utils';
+import { CommentsPopover } from './plate-ui/comments-popover';
+import { CursorOverlay } from './plate-ui/cursor-overlay';
+import { Editor } from './plate-ui/editor';
+import { FixedToolbar } from './plate-ui/fixed-toolbar';
+import { FixedToolbarButtons } from './plate-ui/fixed-toolbar-buttons';
+import { FloatingToolbar } from './plate-ui/floating-toolbar';
+import { FloatingToolbarButtons } from './plate-ui/floating-toolbar-buttons';
+import { MentionCombobox } from './plate-ui/mention-combobox';
+
+export default function PlateEditor() {
+  const containerRef = useRef(null);
+
+  const initialValue = [
+    {
+      id: '1',
+      type: ELEMENT_PARAGRAPH,
+      children: [{ text: 'Hello, World!' }],
+    },
+  ];
+
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <CommentsProvider users={commentsUsers} myUserId={myUserId}>
+        <Plate plugins={plugins} initialValue={initialValue}>
+          <div
+            ref={containerRef}
+            className={cn(
+              // Block selection
+              '[&_.slate-start-area-left]:!w-[64px] [&_.slate-start-area-right]:!w-[64px] [&_.slate-start-area-top]:!h-4'
+            )}
+          >
+            <FixedToolbar>
+              <FixedToolbarButtons />
+            </FixedToolbar>
+
+            <Editor
+              
+              className="px-[96px] py-16 h-[60vh] overflow-y-scroll"
+              autoFocus
+              focusRing={false}
+              variant="ghost"
+              size="md"
+            />
+
+            <FloatingToolbar>
+              <FloatingToolbarButtons />
+            </FloatingToolbar>
+
+            <MentionCombobox items={MENTIONABLES} />
+
+            <CommentsPopover />
+
+            <CursorOverlay containerRef={containerRef} />
+          </div>
+        </Plate>
+      </CommentsProvider>
+    </DndProvider>
+  );
+}
diff --git a/src/components/PreviousSubmissionsCombobox.tsx b/src/components/PreviousSubmissionsCombobox.tsx
new file mode 100644
index 0000000..5d63163
--- /dev/null
+++ b/src/components/PreviousSubmissionsCombobox.tsx
@@ -0,0 +1,192 @@
+"use client";
+
+import { Check, ChevronsUpDown } from "lucide-react";
+import * as React from "react";
+
+import { ProgrammingLanguageLabel } from "../constants/ProgrammingLanguage";
+import { TestcaseStatusIndicatorColor } from "../constants/TestcaseStatusIndicatorColor";
+import { cn } from "../lib/utils";
+import {
+	SubmissionPopulateSubmissionTestcasesSecureModel,
+	SubmissionTestcaseSecureModel
+} from "../types/models/Submission.model";
+import { readableDateFormat } from "../utilities/ReadableDateFormat";
+import { Button } from "./shadcn/Button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+} from "./shadcn/Command";
+import { Popover, PopoverContent, PopoverTrigger } from "./shadcn/Popover";
+import { Separator } from "./shadcn/Seperator";
+
+const TestcaseGradingMiniResult = ({
+	status,
+}: {
+	status: TestcaseGradingResultStatus;
+}) => {
+	return (
+		<div
+			className={
+				"px-1 py-2 cursor-pointer " +
+				"bg-" +
+				TestcaseStatusIndicatorColor[status]
+			}
+		></div>
+	);
+};
+
+const TestcasesGradingMiniIndicator = ({
+	submissionTestcases,
+}: {
+	submissionTestcases?: SubmissionTestcaseSecureModel[];
+}) => {
+	return (
+		<div className="flex gap-0.5 items-center">
+			{submissionTestcases?.map((testcase, index) => (
+				<TestcaseGradingMiniResult
+					key={index}
+					status={
+						testcase.runtime_status as TestcaseGradingResultStatus
+					}
+				/>
+			))}
+		</div>
+	);
+};
+
+export function PreviousSubmissionsCombobox({
+	submissions = [],
+	bestSubmission,
+	onSelect,
+}: {
+	submissions: SubmissionPopulateSubmissionTestcasesSecureModel[];
+	bestSubmission: SubmissionPopulateSubmissionTestcasesSecureModel ;
+	onSelect?: (value: string) => void;
+}) {
+	const [open, setOpen] = React.useState(false);
+	const [value, setValue] = React.useState("");
+
+	const bestOptions = {
+		label: (
+			<div className="w-full">
+				<div className="flex justify-between items-center">
+					<div className="font-mono">
+						{readableDateFormat(bestSubmission?.date)} {ProgrammingLanguageLabel[bestSubmission?.language]}
+					</div>
+					<div>
+						<TestcasesGradingMiniIndicator
+							submissionTestcases={bestSubmission?.runtime_output}
+						/>
+					</div>
+				</div>
+			</div>
+		),
+		value: String(bestSubmission?.submission_id),
+	};
+
+	const options = submissions.map(
+		(submission) => ({
+			label: (
+				<div className="w-full">
+					<div className="flex justify-between items-center">
+						<div className="font-mono">
+							{readableDateFormat(submission?.date)} {ProgrammingLanguageLabel[submission?.language]}
+						</div>
+						<div>
+							<TestcasesGradingMiniIndicator
+								submissionTestcases={submission?.runtime_output}
+							/>
+						</div>
+					</div>
+				</div>
+			),
+			value: String(submission?.submission_id),
+		})
+	);
+
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<PopoverTrigger disabled={submissions.length === 0} asChild>
+				<Button
+					variant="outline"
+					role="combobox"
+					aria-expanded={open}
+					className="w-[500px] justify-between"
+				>
+					{value
+						? options.find((framework) => framework.value === value)
+								?.label
+						: (submissions.length === 0 ?  "No Previous Submission" : "Previous Submissions")}
+					<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-[500px] p-0">
+				<Command>
+					<CommandInput
+						placeholder={"Select Previous Submissions ..."}
+					/>
+					<CommandEmpty>{"Not found"}</CommandEmpty>
+                    <div className="mt-2 ml-2 text-sm font-bold">Best Submission</div>
+					<CommandGroup className="">
+						<CommandItem
+							key={bestOptions.value}
+							value={bestOptions.value}
+							onSelect={(currentValue) => {
+								if (onSelect) {
+									onSelect(currentValue);
+								}
+								// setValue(currentValue === value ? "" : currentValue)
+								setValue(currentValue);
+								setOpen(false);
+							}}
+						>
+							<Check
+								className={cn(
+									"mr-2 h-4 w-4 text-green-400",
+									value === bestOptions.value
+										? "opacity-100"
+										: "opacity-0"
+								)}
+							/>
+
+							{bestOptions.label}
+						</CommandItem>
+					</CommandGroup>
+                    <Separator/>
+					<CommandGroup className="h-[50vh] overflow-y-scroll">
+						{options.map((framework) => (
+							<CommandItem
+								key={framework.value}
+								value={framework.value}
+								onSelect={(currentValue) => {
+									if (onSelect) {
+										onSelect(currentValue);
+									}
+									// setValue(currentValue === value ? "" : currentValue)
+									setValue(currentValue);
+									setOpen(false);
+								}}
+							>
+								<Check
+									className={cn(
+										"mr-2 h-4 w-4 text-green-400",
+										value === framework.value
+											? "opacity-100"
+											: "opacity-0"
+									)}
+								/>
+
+								{framework.label}
+							</CommandItem>
+						))}
+					</CommandGroup>
+				</Command>
+			</PopoverContent>
+		</Popover>
+	);
+}
+
+export default PreviousSubmissionsCombobox;
diff --git a/src/components/ProblemViewLayout.tsx b/src/components/ProblemViewLayout.tsx
new file mode 100644
index 0000000..813b7b8
--- /dev/null
+++ b/src/components/ProblemViewLayout.tsx
@@ -0,0 +1,208 @@
+import { Editor as MonacoEditor } from "@monaco-editor/react";
+import { ArrowLeft, Loader2 } from "lucide-react";
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+import { ProgrammingLanguageOptions } from "../constants/ProgrammingLanguage";
+import { ProblemPoplulateCreatorModel, ProblemPopulateCreatorSecureModel } from "../types/models/Problem.model";
+import { GetSubmissionByAccountProblemResponse, SubmissionPopulateSubmissionTestcasesSecureModel } from "../types/models/Submission.model";
+import { handleDeprecatedDescription } from "../utilities/HandleDeprecatedDescription";
+import { readableDateFormat } from "../utilities/ReadableDateFormat";
+import PreviousSubmissionsCombobox from "./PreviousSubmissionsCombobox";
+import ReadOnlyPlate from "./ReadOnlyPlate";
+import TestcasesGradingIndicator from "./TestcasesGradingIndicator";
+import { Button } from "./shadcn/Button";
+import { Combobox } from "./shadcn/Combobox";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./shadcn/Resizable";
+
+export type OnSubmitProblemViewLayoutCallback = {
+    setGrading: React.Dispatch<React.SetStateAction<boolean>>
+    setLastedSubmission: React.Dispatch<React.SetStateAction<SubmissionPopulateSubmissionTestcasesSecureModel | undefined>>
+    selectedLanguage: string
+    submitCodeValue: string
+}
+
+const ProblemViewLayout = ({
+    onSubmit,
+    problem,
+    previousSubmissions
+}:{
+    onSubmit: (callback: OnSubmitProblemViewLayoutCallback) => void
+    problem: ProblemPoplulateCreatorModel | ProblemPopulateCreatorSecureModel
+    previousSubmissions: GetSubmissionByAccountProblemResponse
+}) => {
+
+    const navigate = useNavigate();
+
+    // const [problem, setProblem] = useState<ProblemPoplulateCreatorModel>();
+	const [selectedLanguage, setSelectedLanguage] = useState("python");
+	const [grading, setGrading] = useState<boolean>(false);
+	const [submitCodeValue, setSubmitCodeValue] = useState<any>("");
+
+    // const [previousSubmissions, setPreviousSubmissions] =
+		useState<GetSubmissionByAccountProblemResponse>();
+	const [lastedSubmission, setLastedSubmission] =
+		useState<SubmissionPopulateSubmissionTestcasesSecureModel>();
+
+    const handleSubmit = () => {
+        onSubmit({setGrading, setLastedSubmission,selectedLanguage,submitCodeValue})
+    }
+
+    const handleSelectPreviousSubmission = (submissionId: string) => {
+		let submission = null;
+		if (
+			submissionId === previousSubmissions?.best_submission?.submission_id
+		) {
+			submission = previousSubmissions?.best_submission;
+		} else {
+			previousSubmissions?.submissions?.forEach((sub) => {
+				if (sub.submission_id === submissionId) {
+					submission = sub;
+					return;
+				}
+			});
+		}
+
+		if (submission) {
+			setSubmitCodeValue(submission.submission_code);
+			setLastedSubmission(submission);
+			setSelectedLanguage(submission.language);
+		}
+	};
+
+
+	// useEffect(() => {
+
+	// 	console.log('pb',JSON.parse(
+	// 		handleDeprecatedDescription(
+	// 			String(problem?.description)
+	// 		)
+	// 	))
+	// },[problem])
+
+	return (
+		<ResizablePanelGroup direction="horizontal" className="flex xxl:mt-10 md:mt-5 h-[80vh] xl:h-[90vh]">
+			<ResizablePanel defaultSize={50} className="w-1/2 grid content-between">
+				<div className="ml-3">
+					<div className="text-3xl text-green-700 font-bold mb-2 flex">
+						<ArrowLeft
+							size={40}
+							className="cursor-pointer mr-2"
+							onClick={() => navigate(-1)}
+						/>
+						{problem?.title}
+					</div>
+					<div className="flex text-base">
+						<div className="flex mr-10">
+							<b className="mr-2">Author</b>
+							<p className="">{problem?.creator.username}</p>
+						</div>
+
+						<div className="flex">
+							<b className="mr-2">Updated Date</b>
+							<p className="">
+								{readableDateFormat(
+									String(problem?.updated_date)
+								)}
+							</p>
+						</div>
+					</div>
+				</div>
+				<div>
+					{problem && (
+						<ReadOnlyPlate
+							value={JSON.parse(
+								handleDeprecatedDescription(
+									String(problem.description)
+								)
+							)}
+							className="h-[70vh] xl:h-[80vh]"
+						/>
+					)}
+				</div>
+			</ResizablePanel>
+			{/* <div className="mx-3">
+				<Separator orientation="vertical" />
+			</div> */}
+			<ResizableHandle className="mx-3"/>
+			<ResizablePanel defaultSize={50} className="w-1/2 mr-5">
+				<div className="flex justify-between mb-1 items-center">
+					<div className="flex gap-2">
+						<Combobox
+							label="Select Language"
+							options={ProgrammingLanguageOptions.filter(lang => problem?.allowed_languages.includes(lang.value))}
+							onSelect={(value) => setSelectedLanguage(value)}
+							// initialValue={selectedLanguage}
+							value={selectedLanguage}
+							setValue={setSelectedLanguage}
+						/>
+					</div>
+					<div>
+						{lastedSubmission && !grading && (
+							<TestcasesGradingIndicator
+								submissionTestcases={
+									lastedSubmission.runtime_output
+								}
+							/>
+						)}
+						{grading && (
+							<div className="flex items-center">
+								<Loader2 className="animate-spin mr-2 text-green-400" />
+								Grading ...
+							</div>
+						)}
+					</div>
+				</div>
+				<div className="">
+					<MonacoEditorWrapper>
+						<MonacoEditor
+							onChange={(e) => setSubmitCodeValue(e)}
+							value={submitCodeValue}
+							theme="vs-dark"
+							defaultLanguage="python"
+							language={selectedLanguage}
+						/>
+					</MonacoEditorWrapper>
+				</div>
+
+				<div className="flex justify-between mt-1">
+					<PreviousSubmissionsCombobox
+						bestSubmission={
+							previousSubmissions?.best_submission as SubmissionPopulateSubmissionTestcasesSecureModel
+						}
+						submissions={
+							previousSubmissions?.submissions as SubmissionPopulateSubmissionTestcasesSecureModel[]
+						}
+						onSelect={(submissionId) =>
+							handleSelectPreviousSubmission(String(submissionId))
+						}
+					/>
+					<Button
+						disabled={grading || !submitCodeValue || ProgrammingLanguageOptions.filter(lang => problem?.allowed_languages.includes(lang.value)).length === 0}
+						onClick={handleSubmit}
+						className="px-10"
+					>
+						{grading ? (
+							<>
+								<Loader2 className="animate-spin mr-2" />
+								Submitting
+							</>
+						) : (
+							<>Submit</>
+						)}
+					</Button>
+				</div>
+			</ResizablePanel>
+		</ResizablePanelGroup>
+	);
+};
+
+const MonacoEditorWrapper = styled.div`
+	height: 80vh;
+
+	@media (max-height: 900px) {
+		height: 75vh;
+	}
+`;
+
+export default ProblemViewLayout;
diff --git a/src/components/ReadOnlyPlate.tsx b/src/components/ReadOnlyPlate.tsx
new file mode 100644
index 0000000..a914e3e
--- /dev/null
+++ b/src/components/ReadOnlyPlate.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { CommentsProvider } from "@udecode/plate-comments";
+import { Plate } from "@udecode/plate-common";
+import { useRef } from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+
+import { EmptyEditorValue } from "../constants/DummyEditorValue";
+import { commentsUsers, myUserId } from "../lib/plate/comments";
+import { MENTIONABLES } from "../lib/plate/mentionables";
+import { plugins } from "../lib/plate/plate-plugins";
+import { cn } from "../lib/utils";
+import { PlateEditorValueType } from "../types/PlateEditorValueType";
+import { CommentsPopover } from "./plate-ui/comments-popover";
+import { CursorOverlay } from "./plate-ui/cursor-overlay";
+import { Editor } from "./plate-ui/editor";
+import { MentionCombobox } from "./plate-ui/mention-combobox";
+
+export default function ReadOnlyPlate({
+	className,
+	value = EmptyEditorValue,
+}: {
+	className?: string;
+	value?: PlateEditorValueType;
+}) {
+	const containerRef = useRef(null);
+
+	return (
+		<DndProvider backend={HTML5Backend}>
+			<CommentsProvider users={commentsUsers} myUserId={myUserId}>
+				{(value) && (
+					<Plate
+						readOnly
+						id="view-problem-plate"
+						plugins={plugins}
+						initialValue={value}
+						// value={value}
+					>
+						<div
+							ref={containerRef}
+							className={cn(
+								// Block selection
+								"[&_.slate-start-area-left]:!w-[64px] [&_.slate-start-area-right]:!w-[64px] [&_.slate-start-area-top]:!h-4"
+							)}
+						>
+								<Editor
+									className={/* "px-[96px] py-0 " + */ "" + className}
+									autoFocus
+									focusRing={false}
+									variant="ghost"
+									size="md"
+									readOnly
+								/>
+
+							{/* <FloatingToolbar>
+              <FloatingToolbarButtons />
+            </FloatingToolbar> */}
+
+							<MentionCombobox items={MENTIONABLES} />
+
+							<CommentsPopover />
+
+							<CursorOverlay containerRef={containerRef} />
+						</div>
+					</Plate>
+				)}
+			</CommentsProvider>
+		</DndProvider>
+	);
+}
diff --git a/src/components/RolesCombobox.tsx b/src/components/RolesCombobox.tsx
new file mode 100644
index 0000000..825806e
--- /dev/null
+++ b/src/components/RolesCombobox.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "../lib/utils"
+import { Button } from "./shadcn/Button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "./shadcn/Command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "./shadcn/Popover"
+
+const frameworks = [
+  {
+    value: "next.js",
+    label: "Next.js",
+  },
+  {
+    value: "sveltekit",
+    label: "SvelteKit",
+  },
+  {
+    value: "nuxt.js",
+    label: "Nuxt.js",
+  },
+  {
+    value: "remix",
+    label: "Remix",
+  },
+  {
+    value: "astro",
+    label: "Astro",
+  },
+]
+
+export function RolesCombobox() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("")
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[200px] justify-between"
+        >
+          {value
+            ? frameworks.find((framework) => framework.value === value)?.label
+            : "Select framework..."}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder="Search framework..." />
+          <CommandEmpty>No framework found.</CommandEmpty>
+          <CommandGroup>
+            {frameworks.map((framework) => (
+              <CommandItem
+                key={framework.value}
+                value={framework.value}
+                onSelect={(currentValue) => {
+                  setValue(currentValue === value ? "" : currentValue)
+                  setOpen(false)
+                }}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    value === framework.value ? "opacity-100" : "opacity-0"
+                  )}
+                />
+                {framework.label}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/src/components/SortableCardContainer.tsx b/src/components/SortableCardContainer.tsx
new file mode 100644
index 0000000..20c9f96
--- /dev/null
+++ b/src/components/SortableCardContainer.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { ReactSortable } from "react-sortablejs";
+import { ScrollArea } from "./shadcn/ScrollArea";
+
+const SortableCardContainer = ({
+	children,
+    ...args
+}: {
+	children: React.ReactNode;
+}) => {
+	return (
+		<ScrollArea className="mt-6 h-[80vh] md:h-[60vh] pr-5">
+
+			<ReactSortable className="grid gap-y-3 p-2 rounded-md" {...args}>{children}</ReactSortable>
+		</ScrollArea>
+		// </div>
+	);
+};
+
+export default SortableCardContainer;
diff --git a/src/components/TestcaseValidationAccordion.tsx b/src/components/TestcaseValidationAccordion.tsx
new file mode 100644
index 0000000..a9e42d0
--- /dev/null
+++ b/src/components/TestcaseValidationAccordion.tsx
@@ -0,0 +1,112 @@
+import { TestcaseStatusIndicatorColor } from "../constants/TestcaseStatusIndicatorColor";
+import { RuntimeResult } from "../types/apis/Problem.api";
+import { TestcaseModel } from "../types/models/Problem.model";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "./shadcn/Accordion";
+import { Badge } from "./shadcn/Badge";
+import { Label } from "./shadcn/Label";
+import { Textarea } from "./shadcn/Textarea";
+
+const TestcaseValidationInstance = ({
+	value,
+	inputValue,
+	outputValue,
+	status,
+}: {
+	value: string;
+	inputValue: string;
+	outputValue: string | null;
+	status: string;
+}) => {
+	// const [inputValue, setInputValue] = useState("1 2 3");
+	// const [outputValue, setOutputValue] = useState("Hello World!");
+
+	// useEffect(() => {
+	// 	console.log(inputValue, outputValue, status);
+	// }, [outputValue]);
+
+	return (
+		<AccordionItem value={value}>
+			<AccordionTrigger>
+				Testcase #{value}
+				{status === "OK" ? (
+					<Badge className="bg-green-400">OK</Badge>
+				) : status === "ERROR" ? (
+					<Badge className="bg-red-400">ERROR</Badge>
+				) : status === "TIMEOUT" ? (
+					<Badge className="bg-yellow-400">TIMEOUT</Badge>
+				) : (
+					<Badge className="bg-red-400">FAILED</Badge>
+				)}
+			</AccordionTrigger>
+			<AccordionContent>
+				<div className="flex gap-5 pl-1">
+					<div className="w-5/12">
+						<Label>Input</Label>
+						<Textarea
+							rows={inputValue?.split("\n").length}
+							readOnly
+							className="mt-1 font-mono cursor-pointer"
+							value={inputValue}
+							onClick={() =>
+								navigator.clipboard.writeText(inputValue)
+							}
+						/>
+					</div>
+					<div className="w-5/12">
+						<Label>Output</Label>
+						<Textarea
+							rows={outputValue?.split("\n").length}
+							readOnly
+							className="mt-1 font-mono cursor-pointer"
+							value={outputValue ?? ""}
+							onClick={() =>
+								navigator.clipboard.writeText(outputValue ?? "")
+							}
+						/>
+					</div>
+					<div className="w-2/12">
+						<Label>Runtime Status</Label>
+						<p
+							className={`text-xl font-bold text-${
+								TestcaseStatusIndicatorColor[
+									status as TestcaseGradingResultStatus
+								]
+							}`}
+						>
+							{status}
+						</p>
+					</div>
+				</div>
+			</AccordionContent>
+		</AccordionItem>
+	);
+};
+
+const TestcaseValidationAccordian = ({
+	runtimeResults = [],
+}: {
+	runtimeResults?: RuntimeResult[] | TestcaseModel[];
+}) => {
+	return (
+		<Accordion type="multiple">
+			{runtimeResults?.map((result, index) => (
+				<TestcaseValidationInstance
+					key={index}
+					value={String(index + 1)}
+					inputValue={result.input}
+					outputValue={result.output}
+					status={
+						result.runtime_status ? result.runtime_status : "OK"
+					}
+				/>
+			))}
+		</Accordion>
+	);
+};
+
+export default TestcaseValidationAccordian;
diff --git a/src/components/TestcasesGradingIndicator.tsx b/src/components/TestcasesGradingIndicator.tsx
new file mode 100644
index 0000000..8c7ea9c
--- /dev/null
+++ b/src/components/TestcasesGradingIndicator.tsx
@@ -0,0 +1,87 @@
+import { SubmissionTestcaseSecureModel } from "../types/models/Submission.model";
+import {
+	HoverCard,
+	HoverCardContent,
+	HoverCardTrigger,
+} from "./shadcn/HoverCard";
+
+type TestcaseGradingResultStatus = "OK" | "TIMEOUT" | "ERROR" | "FAILED"
+
+const TestcaseGradingResult = ({ no,status,disableHover=false,sizeX=2,sizeY=4 }: {
+	no: number | string;
+	status: "OK" | "TIMEOUT" | "ERROR" | "FAILED";
+	disableHover?: boolean;
+	sizeX?: number;
+	sizeY?: number;
+}) => {
+
+	const chartStyledFunction = () => {
+		let result = `px-${sizeX} py-${sizeY} cursor-pointer `
+		if (status === "OK") {
+			result += `bg-green-400`
+		} else if (status === "TIMEOUT") {
+			result += `bg-yellow-400`
+		} else if (status === "FAILED") {
+			result += `bg-red-400`
+		} else if (status === "ERROR") {
+			result += `bg-zinc-300`
+		}
+
+		return result
+	}
+
+	const textStyledFunction = () => {
+		let result = `font-bold `
+		if (status === "OK") {
+			result += `text-green-400`
+		} else if (status === "TIMEOUT") {
+			result += `text-yellow-400`
+		} else if (status === "FAILED") {
+			result += `text-red-400`
+		} else if (status === "ERROR") {
+			result += `text-zinc-500`
+		}
+
+		return result
+	}
+
+	return (
+		<HoverCard>
+			<HoverCardTrigger>
+				<div className={chartStyledFunction()}></div>
+				{/* {status === "OK" && <div className={"px-2 py-4 cursor-pointer " + 'bg-green-400'}></div>}
+				{status === "TIMEOUT" && <div className={"px-2 py-4 cursor-pointer " + 'bg-yellow-400'}></div>}
+				{status === "ERROR" && <div className={"px-2 py-4 cursor-pointer " + 'bg-red-400'}></div>}
+				{status === "FAILED" && <div className={"px-2 py-4 cursor-pointer " + 'bg-zinc-300'}></div>} */}
+			</HoverCardTrigger>
+			{!disableHover && <HoverCardContent>
+        		<p className="font-bold">Testcase #{no}</p>
+				<p className="font-bold">Status: <span className={textStyledFunction()}>{status}</span></p>
+				<p className="font-bold text-sm">Time Used: <span className="font-normal">1.234 seconds</span></p>
+			</HoverCardContent>}
+		</HoverCard>
+	);
+};
+
+const TestcasesGradingIndicator = ({submissionTestcases,disableHover=false,className="",sizeX=2,sizeY=4}: {
+	submissionTestcases?: SubmissionTestcaseSecureModel[];
+	disableHover?: boolean;
+	className?: string;
+	sizeX?: number;
+	sizeY?: number;
+}) => {
+	// useEffect(()=>{
+	// 	console.log(submissionTestcases)
+	// },[submissionTestcases])
+	return (
+		<div className={"flex gap-0.5 items-center" + className}>
+			{
+				submissionTestcases?.map((testcase,index) => (
+					<TestcaseGradingResult sizeX={sizeX} sizeY={sizeY} disableHover={disableHover} key={index} no={index+1} status={testcase.runtime_status as TestcaseGradingResultStatus} />
+				))	
+			}
+		</div>
+	);
+};
+
+export default TestcasesGradingIndicator;
diff --git a/src/components/TestcasesGradingMiniIndicator.tsx b/src/components/TestcasesGradingMiniIndicator.tsx
new file mode 100644
index 0000000..a25dbef
--- /dev/null
+++ b/src/components/TestcasesGradingMiniIndicator.tsx
@@ -0,0 +1,40 @@
+import { TestcaseStatusIndicatorColor } from '../constants/TestcaseStatusIndicatorColor';
+import { SubmissionTestcaseSecureModel } from '../types/models/Submission.model';
+
+const TestcaseGradingMiniResult = ({
+	status,
+}: {
+	status: TestcaseGradingResultStatus;
+}) => {
+	return (
+		<div
+			className={
+				"px-1 py-2 cursor-pointer " +
+				"bg-" +
+				TestcaseStatusIndicatorColor[status]
+			}
+		></div>
+	);
+};
+
+const TestcasesGradingMiniIndicator = ({
+	submissionTestcases,
+}: {
+	submissionTestcases?: SubmissionTestcaseSecureModel[];
+}) => {
+	return (
+		<div className="flex gap-0.5 items-center">
+			{submissionTestcases?.map((testcase, index) => (
+				<TestcaseGradingMiniResult
+					key={index}
+					status={
+						testcase.runtime_status as TestcaseGradingResultStatus
+					}
+				/>
+			))}
+		</div>
+	);
+};
+
+
+export default TestcasesGradingMiniIndicator
\ No newline at end of file
diff --git a/src/components/TopicCollectionsAccordion.tsx b/src/components/TopicCollectionsAccordion.tsx
new file mode 100644
index 0000000..0fafe17
--- /dev/null
+++ b/src/components/TopicCollectionsAccordion.tsx
@@ -0,0 +1,57 @@
+import { FileSpreadsheet, Folder } from "lucide-react";
+import { TopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel } from "../types/models/Topic.model";
+import PublicProblemMiniCard from "./Cards/ProblemCards/PublicProblemMiniCard";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "./shadcn/Accordion";
+import { ScrollArea } from "./shadcn/ScrollArea";
+
+const TopicCollectionsAccordian = ({
+	collections,
+}: {
+	collections: TopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel[];
+}) => {
+	return (
+		<Accordion type="multiple" className="">
+			{collections?.map((tp,index) => (
+				<AccordionItem id={String(`collection-${index+1}`)} value={String(index+1)} className="border-none">
+					<AccordionTrigger className="flex items-center">
+						<div className="flex items-center text-2xl w-1/2">
+							<Folder size={28} className="text-yellow-400 mr-5" />
+							{tp.collection.name}
+						</div>
+
+						<div className="flex items-center font-bold">
+							<FileSpreadsheet className="text-blue-400 mr-2" />(
+							{
+								tp.collection.problems.filter(
+									(collectionProblem) =>
+										collectionProblem.problem
+											.best_submission?.is_passed
+								).length
+							}
+							/{tp.collection.problems.length})
+						</div>
+						
+					</AccordionTrigger>
+					<AccordionContent>
+						<ScrollArea className="mt-6 pr-5">
+							<div className="grid gap-y-2">
+								{tp.collection.problems.map((problem) => (
+									<PublicProblemMiniCard
+										problem={problem.problem}
+									/>
+								))}
+							</div>
+						</ScrollArea>
+					</AccordionContent>
+				</AccordionItem>
+			))}
+		</Accordion>
+	);
+};
+
+export default TopicCollectionsAccordian;
diff --git a/src/components/plate-ui/align-dropdown-menu.tsx b/src/components/plate-ui/align-dropdown-menu.tsx
new file mode 100644
index 0000000..6fc14c1
--- /dev/null
+++ b/src/components/plate-ui/align-dropdown-menu.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+import {
+  useAlignDropdownMenu,
+  useAlignDropdownMenuState,
+} from '@udecode/plate-alignment';
+
+import { Icons, iconVariants } from './icons';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  useOpenState,
+} from './dropdown-menu';
+import { ToolbarButton } from './toolbar';
+
+const items = [
+  {
+    value: 'left',
+    icon: Icons.alignLeft,
+  },
+  {
+    value: 'center',
+    icon: Icons.alignCenter,
+  },
+  {
+    value: 'right',
+    icon: Icons.alignRight,
+  },
+  {
+    value: 'justify',
+    icon: Icons.alignJustify,
+  },
+];
+
+export interface AlignDropdownMenuProps extends DropdownMenuProps {}
+
+export function AlignDropdownMenu({
+  children,
+  ...props
+}: AlignDropdownMenuProps) {
+  const state = useAlignDropdownMenuState();
+  const { radioGroupProps } = useAlignDropdownMenu(state);
+
+  const openState = useOpenState();
+  const IconValue =
+    items.find((item) => item.value === radioGroupProps.value)?.icon ??
+    Icons.alignLeft;
+
+  return (
+    <DropdownMenu modal={false} {...openState} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton pressed={openState.open} tooltip="Align" isDropdown>
+          <IconValue />
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="start" className="min-w-0">
+        <DropdownMenuRadioGroup
+          className="flex flex-col gap-0.5"
+          {...radioGroupProps}
+        >
+          {items.map(({ value: itemValue, icon: Icon }) => (
+            <DropdownMenuRadioItem key={itemValue} value={itemValue} hideIcon>
+              <Icon className={iconVariants({ variant: 'toolbar' })} />
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/plate-ui/avatar.tsx b/src/components/plate-ui/avatar.tsx
new file mode 100644
index 0000000..2a33939
--- /dev/null
+++ b/src/components/plate-ui/avatar.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+import { cn } from '../../lib/utils';
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full', className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center rounded-full bg-muted',
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/src/components/plate-ui/blockquote-element.tsx b/src/components/plate-ui/blockquote-element.tsx
new file mode 100644
index 0000000..721652b
--- /dev/null
+++ b/src/components/plate-ui/blockquote-element.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import React from 'react';
+import { PlateElement, PlateElementProps } from '@udecode/plate-common';
+
+import { cn } from '../../lib/utils';
+
+const BlockquoteElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <PlateElement
+      asChild
+      ref={ref}
+      className={cn('my-1 border-l-2 pl-6 italic', className)}
+      {...props}
+    >
+      <blockquote>{children}</blockquote>
+    </PlateElement>
+  );
+});
+BlockquoteElement.displayName = 'BlockquoteElement';
+
+export { BlockquoteElement };
diff --git a/src/components/plate-ui/button.tsx b/src/components/plate-ui/button.tsx
new file mode 100644
index 0000000..28de1c7
--- /dev/null
+++ b/src/components/plate-ui/button.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        inlineLink: 'text-base text-primary underline underline-offset-4',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        xs: 'h-8 rounded-md px-3',
+        sm: 'h-9 rounded-md px-3',
+        sms: 'h-9 w-9 rounded-md px-0',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+        none: '',
+      },
+      isMenu: {
+        true: 'h-auto w-full cursor-pointer justify-start',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, isMenu, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ isMenu, variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/src/components/plate-ui/caption.tsx b/src/components/plate-ui/caption.tsx
new file mode 100644
index 0000000..99ed424
--- /dev/null
+++ b/src/components/plate-ui/caption.tsx
@@ -0,0 +1,52 @@
+import React, { ComponentProps } from 'react';
+import {
+  Caption as CaptionPrimitive,
+  CaptionTextarea as CaptionTextareaPrimitive,
+} from '@udecode/plate-caption';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const captionVariants = cva('max-w-full', {
+  variants: {
+    align: {
+      left: 'mr-auto',
+      center: 'mx-auto',
+      right: 'ml-auto',
+    },
+  },
+  defaultVariants: {
+    align: 'center',
+  },
+});
+
+const Caption = React.forwardRef<
+  React.ElementRef<typeof CaptionPrimitive>,
+  ComponentProps<typeof CaptionPrimitive> & VariantProps<typeof captionVariants>
+>(({ className, align, ...props }, ref) => (
+  <CaptionPrimitive
+    ref={ref}
+    className={cn(captionVariants({ align }), className)}
+    {...props}
+  />
+));
+Caption.displayName = 'Caption';
+
+const CaptionTextarea = React.forwardRef<
+  React.ElementRef<typeof CaptionTextareaPrimitive>,
+  ComponentProps<typeof CaptionTextareaPrimitive>
+>(({ className, ...props }, ref) => (
+  <CaptionTextareaPrimitive
+    ref={ref}
+    className={cn(
+      'mt-2 w-full resize-none border-none bg-inherit p-0 font-[inherit] text-inherit',
+      'focus:outline-none focus:[&::placeholder]:opacity-0',
+      'text-center print:placeholder:text-transparent',
+      className
+    )}
+    {...props}
+  />
+));
+CaptionTextarea.displayName = 'CaptionTextarea';
+
+export { Caption, CaptionTextarea };
diff --git a/src/components/plate-ui/checkbox.tsx b/src/components/plate-ui/checkbox.tsx
new file mode 100644
index 0000000..c01e1ba
--- /dev/null
+++ b/src/components/plate-ui/checkbox.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn('flex items-center justify-center text-current')}
+    >
+      <Icons.check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
diff --git a/src/components/plate-ui/code-block-combobox.tsx b/src/components/plate-ui/code-block-combobox.tsx
new file mode 100644
index 0000000..6ba2176
--- /dev/null
+++ b/src/components/plate-ui/code-block-combobox.tsx
@@ -0,0 +1,90 @@
+'use client';
+
+import {
+  CODE_BLOCK_LANGUAGES,
+  CODE_BLOCK_LANGUAGES_POPULAR,
+  useCodeBlockCombobox,
+  useCodeBlockComboboxState,
+} from '@udecode/plate-code-block';
+import { useState } from 'react';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+
+import { Button } from './button';
+import {
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from './command';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+
+const languages: { value: string; label: string }[] = [
+  { value: 'text', label: 'Plain Text' },
+  ...Object.entries({
+    ...CODE_BLOCK_LANGUAGES_POPULAR,
+    ...CODE_BLOCK_LANGUAGES,
+  }).map(([key, val]) => ({
+    value: key,
+    label: val as string,
+  })),
+];
+
+export function CodeBlockCombobox() {
+  const state = useCodeBlockComboboxState();
+  const { commandItemProps } = useCodeBlockCombobox(state);
+
+  const [open, setOpen] = useState(false);
+
+  if (state.readOnly) return null;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          role="combobox"
+          aria-expanded={open}
+          className="h-5 justify-between px-1 text-xs"
+          size="xs"
+        >
+          {state.value
+            ? languages.find((language) => language.value === state.value)
+                ?.label
+            : 'Plain Text'}
+          <Icons.chevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder="Search language..." />
+          <CommandEmpty>No language found.</CommandEmpty>
+
+          <CommandList>
+            {languages.map((language) => (
+              <CommandItem
+                key={language.value}
+                value={language.value}
+                className="cursor-pointer"
+                onSelect={(_value) => {
+                  commandItemProps.onSelect(_value);
+                  setOpen(false);
+                }}
+              >
+                <Icons.check
+                  className={cn(
+                    'mr-2 h-4 w-4',
+                    state.value === language.value ? 'opacity-100' : 'opacity-0'
+                  )}
+                />
+                {language.label}
+              </CommandItem>
+            ))}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/src/components/plate-ui/code-block-element.css b/src/components/plate-ui/code-block-element.css
new file mode 100644
index 0000000..3fc7834
--- /dev/null
+++ b/src/components/plate-ui/code-block-element.css
@@ -0,0 +1,434 @@
+/**
+ * One Light theme for prism.js
+ * Based on Atom's One Light theme: https://github.com/atom/atom/tree/master/packages/one-light-syntax
+ */
+
+/**
+ * One Light colours (accurate as of commit eb064bf on 19 Feb 2021)
+ * From colors.less
+ * --mono-1: hsl(230, 8%, 24%);
+ * --mono-2: hsl(230, 6%, 44%);
+ * --mono-3: hsl(230, 4%, 64%)
+ * --hue-1: hsl(198, 99%, 37%);
+ * --hue-2: hsl(221, 87%, 60%);
+ * --hue-3: hsl(301, 63%, 40%);
+ * --hue-4: hsl(119, 34%, 47%);
+ * --hue-5: hsl(5, 74%, 59%);
+ * --hue-5-2: hsl(344, 84%, 43%);
+ * --hue-6: hsl(35, 99%, 36%);
+ * --hue-6-2: hsl(35, 99%, 40%);
+ * --syntax-fg: hsl(230, 8%, 24%);
+ * --syntax-bg: hsl(230, 1%, 98%);
+ * --syntax-gutter: hsl(230, 1%, 62%);
+ * --syntax-guide: hsla(230, 8%, 24%, 0.2);
+ * --syntax-accent: hsl(230, 100%, 66%);
+ * From syntax-variables.less
+ * --syntax-selection-color: hsl(230, 1%, 90%);
+ * --syntax-gutter-background-color-selected: hsl(230, 1%, 90%);
+ * --syntax-cursor-line: hsla(230, 8%, 24%, 0.05);
+ */
+
+.slate-code_block code[class*='language-'],
+.slate-code_block pre[class*='language-'] {
+  background: hsl(230, 1%, 98%);
+  color: hsl(230, 8%, 24%);
+  font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono',
+    monospace;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  line-height: 1.5;
+  -moz-tab-size: 2;
+  -o-tab-size: 2;
+  tab-size: 2;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/* Selection */
+.slate-code_block code[class*='language-']::-moz-selection,
+.slate-code_block code[class*='language-'] *::-moz-selection,
+.slate-code_block pre[class*='language-'] *::-moz-selection {
+  background: hsl(230, 1%, 90%);
+  color: inherit;
+}
+
+.slate-code_block code[class*='language-']::selection,
+.slate-code_block code[class*='language-'] *::selection,
+.slate-code_block pre[class*='language-'] *::selection {
+  background: hsl(230, 1%, 90%);
+  color: inherit;
+}
+
+/* Code blocks */
+.slate-code_block pre[class*='language-'] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border-radius: 0.3em;
+}
+
+/* Inline code */
+.slate-code_block :not(pre) > code[class*='language-'] {
+  padding: 0.2em 0.3em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.cdata {
+  color: hsl(230, 4%, 64%);
+}
+
+.token.doctype,
+.token.punctuation,
+.token.entity {
+  color: hsl(230, 8%, 24%);
+}
+
+.token.attr-name,
+.token.class-name,
+.token.boolean,
+.token.constant,
+.token.number,
+.token.atrule {
+  color: hsl(35, 99%, 36%);
+}
+
+.token.keyword {
+  color: hsl(301, 63%, 40%);
+}
+
+.token.property,
+.token.tag,
+.token.symbol,
+.token.deleted,
+.token.important {
+  color: hsl(5, 74%, 59%);
+}
+
+.token.selector,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted,
+.token.regex,
+.token.attr-value,
+.token.attr-value > .token.punctuation {
+  color: hsl(119, 34%, 47%);
+}
+
+.token.variable,
+.token.operator,
+.token.function {
+  color: hsl(221, 87%, 60%);
+}
+
+.token.url {
+  color: hsl(198, 99%, 37%);
+}
+
+/* HTML overrides */
+.token.attr-value > .token.punctuation.attr-equals,
+.token.special-attr > .token.attr-value > .token.value.css {
+  color: hsl(230, 8%, 24%);
+}
+
+/* CSS overrides */
+.language-css .token.selector {
+  color: hsl(5, 74%, 59%);
+}
+
+.language-css .token.property {
+  color: hsl(230, 8%, 24%);
+}
+
+.language-css .token.function,
+.language-css .token.url > .token.function {
+  color: hsl(198, 99%, 37%);
+}
+
+.language-css .token.url > .token.string.url {
+  color: hsl(119, 34%, 47%);
+}
+
+.language-css .token.important,
+.language-css .token.atrule .token.rule {
+  color: hsl(301, 63%, 40%);
+}
+
+/* JS overrides */
+.language-javascript .token.operator {
+  color: hsl(301, 63%, 40%);
+}
+
+.language-javascript
+  .token.template-string
+  > .token.interpolation
+  > .token.interpolation-punctuation.punctuation {
+  color: hsl(344, 84%, 43%);
+}
+
+/* JSON overrides */
+.language-json .token.operator {
+  color: hsl(230, 8%, 24%);
+}
+
+.language-json .token.null.keyword {
+  color: hsl(35, 99%, 36%);
+}
+
+/* MD overrides */
+.language-markdown .token.url,
+.language-markdown .token.url > .token.operator,
+.language-markdown .token.url-reference.url > .token.string {
+  color: hsl(230, 8%, 24%);
+}
+
+.language-markdown .token.url > .token.content {
+  color: hsl(221, 87%, 60%);
+}
+
+.language-markdown .token.url > .token.url,
+.language-markdown .token.url-reference.url {
+  color: hsl(198, 99%, 37%);
+}
+
+.language-markdown .token.blockquote.punctuation,
+.language-markdown .token.hr.punctuation {
+  color: hsl(230, 4%, 64%);
+  font-style: italic;
+}
+
+.language-markdown .token.code-snippet {
+  color: hsl(119, 34%, 47%);
+}
+
+.language-markdown .token.bold .token.content {
+  color: hsl(35, 99%, 36%);
+}
+
+.language-markdown .token.italic .token.content {
+  color: hsl(301, 63%, 40%);
+}
+
+.language-markdown .token.strike .token.content,
+.language-markdown .token.strike .token.punctuation,
+.language-markdown .token.list.punctuation,
+.language-markdown .token.title.important > .token.punctuation {
+  color: hsl(5, 74%, 59%);
+}
+
+/* General */
+.token.bold {
+  font-weight: bold;
+}
+
+.token.comment,
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.token.namespace {
+  opacity: 0.8;
+}
+
+/* Plugin overrides */
+/* Selectors should have higher specificity than those in the plugins' default stylesheets */
+
+/* Show Invisibles plugin overrides */
+.token.token.tab:not(:empty):before,
+.token.token.cr:before,
+.token.token.lf:before,
+.token.token.space:before {
+  color: hsla(230, 8%, 24%, 0.2);
+}
+
+/* Toolbar plugin overrides */
+/* Space out all buttons and move them away from the right edge of the code block */
+div.code-toolbar > .toolbar.toolbar > .toolbar-item {
+  margin-right: 0.4em;
+}
+
+/* Styling the buttons */
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > button,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > span {
+  background: hsl(230, 1%, 90%);
+  color: hsl(230, 6%, 44%);
+  padding: 0.1em 0.4em;
+  border-radius: 0.3em;
+}
+
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
+  background: hsl(230, 1%, 78%); /* custom: darken(--syntax-bg, 20%) */
+  color: hsl(230, 8%, 24%);
+}
+
+/* Line Highlight plugin overrides */
+/* The highlighted line itself */
+.line-highlight.line-highlight {
+  background: hsla(230, 8%, 24%, 0.05);
+}
+
+/* Default line numbers in Line Highlight plugin */
+.line-highlight.line-highlight:before,
+.line-highlight.line-highlight[data-end]:after {
+  background: hsl(230, 1%, 90%);
+  color: hsl(230, 8%, 24%);
+  padding: 0.1em 0.6em;
+  border-radius: 0.3em;
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */
+}
+
+/* Hovering over a linkable line number (in the gutter area) */
+/* Requires Line Numbers plugin as well */
+pre[id].linkable-line-numbers.linkable-line-numbers
+  span.line-numbers-rows
+  > span:hover:before {
+  background-color: hsla(230, 8%, 24%, 0.05);
+}
+
+/* Line Numbers and Command Line plugins overrides */
+/* Line separating gutter from coding area */
+.line-numbers.line-numbers .line-numbers-rows,
+.command-line .command-line-prompt {
+  border-right-color: hsla(230, 8%, 24%, 0.2);
+}
+
+/* Stuff in the gutter */
+.line-numbers .line-numbers-rows > span:before,
+.command-line .command-line-prompt > span:before {
+  color: hsl(230, 1%, 62%);
+}
+
+/* Match Braces plugin overrides */
+/* Note: Outline colour is inherited from the braces */
+.rainbow-braces .token.token.punctuation.brace-level-1,
+.rainbow-braces .token.token.punctuation.brace-level-5,
+.rainbow-braces .token.token.punctuation.brace-level-9 {
+  color: hsl(5, 74%, 59%);
+}
+
+.rainbow-braces .token.token.punctuation.brace-level-2,
+.rainbow-braces .token.token.punctuation.brace-level-6,
+.rainbow-braces .token.token.punctuation.brace-level-10 {
+  color: hsl(119, 34%, 47%);
+}
+
+.rainbow-braces .token.token.punctuation.brace-level-3,
+.rainbow-braces .token.token.punctuation.brace-level-7,
+.rainbow-braces .token.token.punctuation.brace-level-11 {
+  color: hsl(221, 87%, 60%);
+}
+
+.rainbow-braces .token.token.punctuation.brace-level-4,
+.rainbow-braces .token.token.punctuation.brace-level-8,
+.rainbow-braces .token.token.punctuation.brace-level-12 {
+  color: hsl(301, 63%, 40%);
+}
+
+/* Diff Highlight plugin overrides */
+/* Taken from https://github.com/atom/github/blob/master/styles/variables.less */
+pre.diff-highlight > code .token.token.deleted:not(.prefix),
+pre > code.diff-highlight .token.token.deleted:not(.prefix) {
+  background-color: hsla(353, 100%, 66%, 0.15);
+}
+
+pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection,
+pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection,
+pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection,
+pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection {
+  background-color: hsla(353, 95%, 66%, 0.25);
+}
+
+pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection,
+pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection,
+pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection,
+pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection {
+  background-color: hsla(353, 95%, 66%, 0.25);
+}
+
+pre.diff-highlight > code .token.token.inserted:not(.prefix),
+pre > code.diff-highlight .token.token.inserted:not(.prefix) {
+  background-color: hsla(137, 100%, 55%, 0.15);
+}
+
+pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection,
+pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection,
+pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection,
+pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection {
+  background-color: hsla(135, 73%, 55%, 0.25);
+}
+
+pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection,
+pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection,
+pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection,
+pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
+  background-color: hsla(135, 73%, 55%, 0.25);
+}
+
+/* Previewers plugin overrides */
+/* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-light-ui */
+/* Border around popup */
+.prism-previewer.prism-previewer:before,
+.prism-previewer-gradient.prism-previewer-gradient div {
+  border-color: hsl(0, 0, 95%);
+}
+
+/* Angle and time should remain as circles and are hence not included */
+.prism-previewer-color.prism-previewer-color:before,
+.prism-previewer-gradient.prism-previewer-gradient div,
+.prism-previewer-easing.prism-previewer-easing:before {
+  border-radius: 0.3em;
+}
+
+/* Triangles pointing to the code */
+.prism-previewer.prism-previewer:after {
+  border-top-color: hsl(0, 0, 95%);
+}
+
+.prism-previewer-flipped.prism-previewer-flipped.after {
+  border-bottom-color: hsl(0, 0, 95%);
+}
+
+/* Background colour within the popup */
+.prism-previewer-angle.prism-previewer-angle:before,
+.prism-previewer-time.prism-previewer-time:before,
+.prism-previewer-easing.prism-previewer-easing {
+  background: hsl(0, 0%, 100%);
+}
+
+/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */
+/* For time, this is the alternate colour */
+.prism-previewer-angle.prism-previewer-angle circle,
+.prism-previewer-time.prism-previewer-time circle {
+  stroke: hsl(230, 8%, 24%);
+  stroke-opacity: 1;
+}
+
+/* Stroke colours of the handle, direction point, and vector itself */
+.prism-previewer-easing.prism-previewer-easing circle,
+.prism-previewer-easing.prism-previewer-easing path,
+.prism-previewer-easing.prism-previewer-easing line {
+  stroke: hsl(230, 8%, 24%);
+}
+
+/* Fill colour of the handle */
+.prism-previewer-easing.prism-previewer-easing circle {
+  fill: transparent;
+}
diff --git a/src/components/plate-ui/code-block-element.tsx b/src/components/plate-ui/code-block-element.tsx
new file mode 100644
index 0000000..542182f
--- /dev/null
+++ b/src/components/plate-ui/code-block-element.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import './code-block-element.css';
+
+import {
+  TCodeBlockElement,
+  useCodeBlockElementState,
+} from '@udecode/plate-code-block';
+import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';
+import { forwardRef } from 'react';
+
+import { cn } from '../../lib/utils';
+
+import { CodeBlockCombobox } from './code-block-combobox';
+
+const CodeBlockElement = forwardRef<
+  HTMLDivElement,
+  PlateElementProps<Value, TCodeBlockElement>
+>(({ className, ...props }, ref) => {
+  const { children, element } = props;
+
+  const state = useCodeBlockElementState({ element });
+
+  return (
+    <PlateElement
+      ref={ref}
+      className={cn('relative py-1', state.className, className)}
+      {...props}
+    >
+      <pre className="overflow-x-auto rounded-md bg-muted px-6 py-8 font-mono text-sm leading-[normal] [tab-size:2]">
+        <code>{children}</code>
+      </pre>
+
+      {state.syntax && (
+        <div
+          className="absolute right-2 top-2 z-10 select-none"
+          contentEditable={false}
+        >
+          <CodeBlockCombobox />
+        </div>
+      )}
+    </PlateElement>
+  );
+});
+CodeBlockElement.displayName = 'CodeBlockElement';
+
+export { CodeBlockElement };
diff --git a/src/components/plate-ui/code-leaf.tsx b/src/components/plate-ui/code-leaf.tsx
new file mode 100644
index 0000000..d4ca07e
--- /dev/null
+++ b/src/components/plate-ui/code-leaf.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { PlateLeaf, PlateLeafProps } from '@udecode/plate-common';
+
+import { cn } from '../../lib/utils';
+
+export function CodeLeaf({ className, children, ...props }: PlateLeafProps) {
+  return (
+    <PlateLeaf
+      asChild
+      className={cn(
+        'whitespace-pre-wrap',
+        'rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm',
+        className
+      )}
+      {...props}
+    >
+      <code>{children}</code>
+    </PlateLeaf>
+  );
+}
diff --git a/src/components/plate-ui/code-line-element.tsx b/src/components/plate-ui/code-line-element.tsx
new file mode 100644
index 0000000..1d996d9
--- /dev/null
+++ b/src/components/plate-ui/code-line-element.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import { PlateElement, PlateElementProps } from '@udecode/plate-common';
+import { forwardRef } from 'react';
+
+const CodeLineElement = forwardRef<HTMLDivElement, PlateElementProps>(
+  (props, ref) => <PlateElement ref={ref} {...props} />
+);
+CodeLineElement.displayName = 'CodeLineElement';
+
+export { CodeLineElement };
diff --git a/src/components/plate-ui/code-syntax-leaf.tsx b/src/components/plate-ui/code-syntax-leaf.tsx
new file mode 100644
index 0000000..11b3b14
--- /dev/null
+++ b/src/components/plate-ui/code-syntax-leaf.tsx
@@ -0,0 +1,16 @@
+'use client';
+
+import { useCodeSyntaxLeaf } from '@udecode/plate-code-block';
+import { PlateLeaf, PlateLeafProps } from '@udecode/plate-common';
+
+export function CodeSyntaxLeaf({ children, ...props }: PlateLeafProps) {
+  const { leaf } = props;
+
+  const { tokenProps } = useCodeSyntaxLeaf({ leaf });
+
+  return (
+    <PlateLeaf {...props}>
+      <span {...tokenProps}>{children}</span>
+    </PlateLeaf>
+  );
+}
diff --git a/src/components/plate-ui/color-constants.ts b/src/components/plate-ui/color-constants.ts
new file mode 100644
index 0000000..243a39c
--- /dev/null
+++ b/src/components/plate-ui/color-constants.ts
@@ -0,0 +1,436 @@
+export const DEFAULT_COLORS = [
+  {
+    name: 'black',
+    value: '#000000',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark grey 4',
+    value: '#434343',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark grey 3',
+    value: '#666666',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark grey 2',
+    value: '#999999',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark grey 1',
+    value: '#B7B7B7',
+    isBrightColor: false,
+  },
+  {
+    name: 'grey',
+    value: '#CCCCCC',
+    isBrightColor: false,
+  },
+  {
+    name: 'light grey 1',
+    value: '#D9D9D9',
+    isBrightColor: false,
+  },
+  {
+    name: 'light grey 2',
+    value: '#EFEFEF',
+    isBrightColor: true,
+  },
+  {
+    name: 'light grey 3',
+    value: '#F3F3F3',
+    isBrightColor: true,
+  },
+  {
+    name: 'white',
+    value: '#FFFFFF',
+    isBrightColor: true,
+  },
+  {
+    name: 'red berry',
+    value: '#980100',
+    isBrightColor: false,
+  },
+  {
+    name: 'red',
+    value: '#FE0000',
+    isBrightColor: false,
+  },
+  {
+    name: 'orange',
+    value: '#FE9900',
+    isBrightColor: false,
+  },
+  {
+    name: 'yellow',
+    value: '#FEFF00',
+    isBrightColor: true,
+  },
+  {
+    name: 'green',
+    value: '#00FF00',
+    isBrightColor: false,
+  },
+  {
+    name: 'cyan',
+    value: '#00FFFF',
+    isBrightColor: false,
+  },
+  {
+    name: 'cornflower blue',
+    value: '#4B85E8',
+    isBrightColor: false,
+  },
+  {
+    name: 'blue',
+    value: '#1300FF',
+    isBrightColor: false,
+  },
+  {
+    name: 'purple',
+    value: '#9900FF',
+    isBrightColor: false,
+  },
+  {
+    name: 'magenta',
+    value: '#FF00FF',
+    isBrightColor: false,
+  },
+
+  {
+    name: 'light red berry 3',
+    value: '#E6B8AF',
+    isBrightColor: false,
+  },
+  {
+    name: 'light red 3',
+    value: '#F4CCCC',
+    isBrightColor: false,
+  },
+  {
+    name: 'light orange 3',
+    value: '#FCE4CD',
+    isBrightColor: true,
+  },
+  {
+    name: 'light yellow 3',
+    value: '#FFF2CC',
+    isBrightColor: true,
+  },
+  {
+    name: 'light green 3',
+    value: '#D9EAD3',
+    isBrightColor: true,
+  },
+  {
+    name: 'light cyan 3',
+    value: '#D0DFE3',
+    isBrightColor: false,
+  },
+  {
+    name: 'light cornflower blue 3',
+    value: '#C9DAF8',
+    isBrightColor: false,
+  },
+  {
+    name: 'light blue 3',
+    value: '#CFE1F3',
+    isBrightColor: true,
+  },
+  {
+    name: 'light purple 3',
+    value: '#D9D2E9',
+    isBrightColor: true,
+  },
+  {
+    name: 'light magenta 3',
+    value: '#EAD1DB',
+    isBrightColor: true,
+  },
+
+  {
+    name: 'light red berry 2',
+    value: '#DC7E6B',
+    isBrightColor: false,
+  },
+  {
+    name: 'light red 2',
+    value: '#EA9999',
+    isBrightColor: false,
+  },
+  {
+    name: 'light orange 2',
+    value: '#F9CB9C',
+    isBrightColor: false,
+  },
+  {
+    name: 'light yellow 2',
+    value: '#FFE598',
+    isBrightColor: true,
+  },
+  {
+    name: 'light green 2',
+    value: '#B7D6A8',
+    isBrightColor: false,
+  },
+  {
+    name: 'light cyan 2',
+    value: '#A1C4C9',
+    isBrightColor: false,
+  },
+  {
+    name: 'light cornflower blue 2',
+    value: '#A4C2F4',
+    isBrightColor: false,
+  },
+  {
+    name: 'light blue 2',
+    value: '#9FC5E8',
+    isBrightColor: false,
+  },
+  {
+    name: 'light purple 2',
+    value: '#B5A7D5',
+    isBrightColor: false,
+  },
+  {
+    name: 'light magenta 2',
+    value: '#D5A6BD',
+    isBrightColor: false,
+  },
+
+  {
+    name: 'light red berry 1',
+    value: '#CC4125',
+    isBrightColor: false,
+  },
+  {
+    name: 'light red 1',
+    value: '#E06666',
+    isBrightColor: false,
+  },
+  {
+    name: 'light orange 1',
+    value: '#F6B26B',
+    isBrightColor: false,
+  },
+  {
+    name: 'light yellow 1',
+    value: '#FFD966',
+    isBrightColor: false,
+  },
+  {
+    name: 'light green 1',
+    value: '#93C47D',
+    isBrightColor: false,
+  },
+  {
+    name: 'light cyan 1',
+    value: '#76A5AE',
+    isBrightColor: false,
+  },
+  {
+    name: 'light cornflower blue 1',
+    value: '#6C9EEB',
+    isBrightColor: false,
+  },
+  {
+    name: 'light blue 1',
+    value: '#6FA8DC',
+    isBrightColor: false,
+  },
+  {
+    name: 'light purple 1',
+    value: '#8D7CC3',
+    isBrightColor: false,
+  },
+  {
+    name: 'light magenta 1',
+    value: '#C27BA0',
+    isBrightColor: false,
+  },
+
+  {
+    name: 'dark red berry 1',
+    value: '#A61B00',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark red 1',
+    value: '#CC0000',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark orange 1',
+    value: '#E59138',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark yellow 1',
+    value: '#F1C231',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark green 1',
+    value: '#6AA74F',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark cyan 1',
+    value: '#45818E',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark cornflower blue 1',
+    value: '#3B78D8',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark blue 1',
+    value: '#3E84C6',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark purple 1',
+    value: '#664EA6',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark magenta 1',
+    value: '#A64D78',
+    isBrightColor: false,
+  },
+
+  {
+    name: 'dark red berry 2',
+    value: '#84200D',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark red 2',
+    value: '#990001',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark orange 2',
+    value: '#B45F05',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark yellow 2',
+    value: '#BF9002',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark green 2',
+    value: '#38761D',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark cyan 2',
+    value: '#124F5C',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark cornflower blue 2',
+    value: '#1155CB',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark blue 2',
+    value: '#0C5394',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark purple 2',
+    value: '#351C75',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark magenta 2',
+    value: '#741B47',
+    isBrightColor: false,
+  },
+
+  {
+    name: 'dark red berry 3',
+    value: '#5B0F00',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark red 3',
+    value: '#660000',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark orange 3',
+    value: '#783F04',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark yellow 3',
+    value: '#7E6000',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark green 3',
+    value: '#274E12',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark cyan 3',
+    value: '#0D343D',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark cornflower blue 3',
+    value: '#1B4487',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark blue 3',
+    value: '#083763',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark purple 3',
+    value: '#1F124D',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark magenta 3',
+    value: '#4C1130',
+    isBrightColor: false,
+  },
+];
+
+export const DEFAULT_CUSTOM_COLORS = [
+  {
+    name: 'dark orange 3',
+    value: '#783F04',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark grey 3',
+    value: '#666666',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark grey 2',
+    value: '#999999',
+    isBrightColor: false,
+  },
+  {
+    name: 'light cornflower blue 1',
+    value: '#6C9EEB',
+    isBrightColor: false,
+  },
+  {
+    name: 'dark magenta 3',
+    value: '#4C1130',
+    isBrightColor: false,
+  },
+];
diff --git a/src/components/plate-ui/color-dropdown-menu-items.tsx b/src/components/plate-ui/color-dropdown-menu-items.tsx
new file mode 100644
index 0000000..3405118
--- /dev/null
+++ b/src/components/plate-ui/color-dropdown-menu-items.tsx
@@ -0,0 +1,97 @@
+'use client';
+
+import React from 'react';
+import { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+import { buttonVariants } from './button';
+import { DropdownMenuItem } from './dropdown-menu';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from './tooltip';
+
+import { TColor } from './color-dropdown-menu';
+
+type ColorDropdownMenuItemProps = {
+  value: string;
+  isBrightColor: boolean;
+  isSelected: boolean;
+  updateColor: (color: string) => void;
+  name?: string;
+} & DropdownMenuItemProps;
+
+export function ColorDropdownMenuItem({
+  name,
+  value,
+  isBrightColor,
+  isSelected,
+  updateColor,
+  className,
+  ...props
+}: ColorDropdownMenuItemProps) {
+  const content = (
+    <DropdownMenuItem
+      className={cn(
+        buttonVariants({
+          variant: 'outline',
+          isMenu: true,
+        }),
+        'h-6 w-6 border border-solid border-muted p-0',
+        !isBrightColor && 'border-transparent text-white',
+        className
+      )}
+      style={{ backgroundColor: value }}
+      onSelect={(e) => {
+        e.preventDefault();
+        updateColor(value);
+      }}
+      {...props}
+    >
+      {isSelected ? <Icons.check /> : null}
+    </DropdownMenuItem>
+  );
+
+  return name ? (
+    <Tooltip>
+      <TooltipTrigger>{content}</TooltipTrigger>
+      <TooltipContent>{name}</TooltipContent>
+    </Tooltip>
+  ) : (
+    content
+  );
+}
+
+type ColorDropdownMenuItemsProps = {
+  color?: string;
+  colors: TColor[];
+  updateColor: (color: string) => void;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export function ColorDropdownMenuItems({
+  color,
+  colors,
+  updateColor,
+  className,
+  ...props
+}: ColorDropdownMenuItemsProps) {
+  return (
+    <div
+      className={cn('grid grid-cols-[repeat(10,1fr)] gap-1', className)}
+      {...props}
+    >
+      {colors.map(({ name, value, isBrightColor }) => (
+        <ColorDropdownMenuItem
+          key={name ?? value}
+          name={name}
+          value={value}
+          isBrightColor={isBrightColor}
+          isSelected={color === value}
+          updateColor={updateColor}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/plate-ui/color-dropdown-menu.tsx b/src/components/plate-ui/color-dropdown-menu.tsx
new file mode 100644
index 0000000..aebad22
--- /dev/null
+++ b/src/components/plate-ui/color-dropdown-menu.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+import { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+import {
+  useColorDropdownMenu,
+  useColorDropdownMenuState,
+} from '@udecode/plate-font';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from './dropdown-menu';
+import { ToolbarButton } from './toolbar';
+
+import { DEFAULT_COLORS, DEFAULT_CUSTOM_COLORS } from './color-constants';
+import { ColorPicker } from './color-picker';
+
+export type TColor = {
+  name: string;
+  value: string;
+  isBrightColor: boolean;
+};
+
+type ColorDropdownMenuProps = {
+  nodeType: string;
+  tooltip?: string;
+} & DropdownMenuProps;
+
+export function ColorDropdownMenu({
+  nodeType,
+  tooltip,
+  children,
+}: ColorDropdownMenuProps) {
+  const state = useColorDropdownMenuState({
+    nodeType,
+    colors: DEFAULT_COLORS,
+    customColors: DEFAULT_CUSTOM_COLORS,
+    closeOnSelect: true,
+  });
+
+  const { menuProps, buttonProps } = useColorDropdownMenu(state);
+
+  return (
+    <DropdownMenu modal={false} {...menuProps}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton tooltip={tooltip} {...buttonProps}>
+          {children}
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="start">
+        <ColorPicker
+          color={state.selectedColor || state.color}
+          colors={state.colors}
+          customColors={state.customColors}
+          updateColor={state.updateColorAndClose}
+          updateCustomColor={state.updateColor}
+          clearColor={state.clearColor}
+        />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/plate-ui/color-input.tsx b/src/components/plate-ui/color-input.tsx
new file mode 100644
index 0000000..caa4e4c
--- /dev/null
+++ b/src/components/plate-ui/color-input.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import React from 'react';
+import { useColorInput } from '@udecode/plate-font';
+
+import { cn } from '../../lib/utils';
+
+export function ColorInput({
+  value = '#000000',
+  onChange,
+  children,
+  className,
+  ...props
+}: React.InputHTMLAttributes<HTMLInputElement>) {
+  const { inputRef, childProps } = useColorInput();
+
+  return (
+    <div className={cn('flex flex-col items-center', className)} {...props}>
+      {React.Children.map(children, (child) => {
+        if (!child) return child;
+
+        return React.cloneElement(child as React.ReactElement, childProps);
+      })}
+
+      <input
+        ref={inputRef}
+        className="h-0 w-0 overflow-hidden border-0 p-0"
+        type="color"
+        value={value}
+        onChange={onChange}
+      />
+    </div>
+  );
+}
diff --git a/src/components/plate-ui/color-picker.tsx b/src/components/plate-ui/color-picker.tsx
new file mode 100644
index 0000000..1fb1a2e
--- /dev/null
+++ b/src/components/plate-ui/color-picker.tsx
@@ -0,0 +1,71 @@
+'use client';
+
+import React from 'react';
+
+import { cn } from '../../lib/utils';
+import { buttonVariants } from './button';
+import { DropdownMenuItem } from './dropdown-menu';
+import { Separator } from './separator';
+
+import { TColor } from './color-dropdown-menu';
+import { ColorDropdownMenuItems } from './color-dropdown-menu-items';
+import { ColorsCustom } from './colors-custom';
+
+type ColorPickerProps = {
+  color?: string;
+  colors: TColor[];
+  customColors: TColor[];
+  updateColor: (color: string) => void;
+  updateCustomColor: (color: string) => void;
+  clearColor: () => void;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export function ColorPickerContent({
+  color,
+  colors,
+  customColors,
+  updateColor,
+  updateCustomColor,
+  clearColor,
+  className,
+  ...props
+}: ColorPickerProps) {
+  return (
+    <div className={cn('flex flex-col gap-4 p-4', className)} {...props}>
+      <ColorsCustom
+        color={color}
+        colors={colors}
+        customColors={customColors}
+        updateColor={updateColor}
+        updateCustomColor={updateCustomColor}
+      />
+
+      <Separator />
+
+      <ColorDropdownMenuItems
+        color={color}
+        colors={colors}
+        updateColor={updateColor}
+      />
+      {color && (
+        <DropdownMenuItem
+          className={buttonVariants({
+            variant: 'outline',
+            isMenu: true,
+          })}
+          onClick={clearColor}
+        >
+          Clear
+        </DropdownMenuItem>
+      )}
+    </div>
+  );
+}
+
+export const ColorPicker = React.memo(
+  ColorPickerContent,
+  (prev, next) =>
+    prev.color === next.color &&
+    prev.colors === next.colors &&
+    prev.customColors === next.customColors
+);
diff --git a/src/components/plate-ui/colors-custom.tsx b/src/components/plate-ui/colors-custom.tsx
new file mode 100644
index 0000000..d2174a3
--- /dev/null
+++ b/src/components/plate-ui/colors-custom.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import { useColorsCustom, useColorsCustomState } from '@udecode/plate-font';
+
+import { buttonVariants } from './button';
+import { DropdownMenuItem } from './dropdown-menu';
+
+import { TColor } from './color-dropdown-menu';
+import { ColorDropdownMenuItems } from './color-dropdown-menu-items';
+import { ColorInput } from './color-input';
+
+type ColorsCustomProps = {
+  color?: string;
+  colors: TColor[];
+  customColors: TColor[];
+  updateCustomColor: (color: string) => void;
+  updateColor: (color: string) => void;
+};
+
+export function ColorsCustom({
+  color,
+  colors,
+  customColors,
+  updateColor,
+  updateCustomColor,
+}: ColorsCustomProps) {
+  const state = useColorsCustomState({
+    color,
+    colors,
+    customColors,
+    updateCustomColor,
+  });
+  const { inputProps, menuItemProps } = useColorsCustom(state);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <ColorInput {...inputProps}>
+        <DropdownMenuItem
+          className={buttonVariants({
+            variant: 'outline',
+            isMenu: true,
+          })}
+          {...menuItemProps}
+        >
+          CUSTOM
+        </DropdownMenuItem>
+      </ColorInput>
+
+      <ColorDropdownMenuItems
+        color={color}
+        colors={state.computedColors}
+        updateColor={updateColor}
+      />
+    </div>
+  );
+}
diff --git a/src/components/plate-ui/combobox.tsx b/src/components/plate-ui/combobox.tsx
new file mode 100644
index 0000000..f0a00fe
--- /dev/null
+++ b/src/components/plate-ui/combobox.tsx
@@ -0,0 +1,156 @@
+'use client';
+
+import * as Popover from '@radix-ui/react-popover';
+import {
+  comboboxActions,
+  ComboboxContentItemProps,
+  ComboboxContentProps,
+  ComboboxProps,
+  Data,
+  NoData,
+  TComboboxItem,
+  useActiveComboboxStore,
+  useComboboxContent,
+  useComboboxContentState,
+  useComboboxControls,
+  useComboboxItem,
+  useComboboxSelectors,
+} from '@udecode/plate-combobox';
+import { useEditorState, useEventEditorSelectors } from '@udecode/plate-common';
+import { createVirtualRef } from '@udecode/plate-floating';
+import { useEffect } from 'react';
+
+import { cn } from '../../lib/utils';
+
+export function ComboboxItem<TData extends Data = NoData>({
+  combobox,
+  index,
+  item,
+  onRenderItem,
+}: ComboboxContentItemProps<TData>) {
+  const { props } = useComboboxItem({ item, index, combobox, onRenderItem });
+
+  return (
+    <div
+      className={cn(
+        'relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',
+        'hover:bg-accent hover:text-accent-foreground data-[highlighted=true]:bg-accent data-[highlighted=true]:text-accent-foreground'
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ComboboxContent<TData extends Data = NoData>(
+  props: ComboboxContentProps<TData>
+) {
+  const {
+    component: Component,
+    items,
+    portalElement,
+    combobox,
+    onRenderItem,
+  } = props;
+
+  const editor = useEditorState();
+
+  const filteredItems =
+    useComboboxSelectors.filteredItems() as TComboboxItem<TData>[];
+  const activeComboboxStore = useActiveComboboxStore()!;
+
+  const state = useComboboxContentState({ items, combobox });
+  const { menuProps, targetRange } = useComboboxContent(state);
+
+  return (
+    <Popover.Root open>
+      <Popover.PopoverAnchor
+        virtualRef={createVirtualRef(editor, targetRange ?? undefined)}
+      />
+
+      <Popover.Portal container={portalElement}>
+        <Popover.Content
+          {...menuProps}
+          sideOffset={5}
+          side="bottom"
+          align="start"
+          className={cn(
+            'z-[500] m-0 max-h-[288px] w-[300px] overflow-scroll rounded-md bg-popover p-0 shadow-md'
+          )}
+          onOpenAutoFocus={(event) => event.preventDefault()}
+        >
+          {Component ? Component({ store: activeComboboxStore }) : null}
+
+          {filteredItems.map((item, index) => (
+            <ComboboxItem
+              key={item.key}
+              item={item}
+              combobox={combobox}
+              index={index}
+              onRenderItem={onRenderItem}
+            />
+          ))}
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
+
+/**
+ * Register the combobox id, trigger, onSelectItem
+ * Renders the combobox if active.
+ */
+export function Combobox<TData extends Data = NoData>({
+  id,
+  trigger,
+  searchPattern,
+  onSelectItem,
+  controlled,
+  maxSuggestions,
+  filter,
+  sort,
+  disabled: _disabled,
+  ...props
+}: ComboboxProps<TData>) {
+  const storeItems = useComboboxSelectors.items();
+  const disabled =
+    _disabled ?? (storeItems.length === 0 && !props.items?.length);
+
+  const focusedEditorId = useEventEditorSelectors.focus?.();
+  const combobox = useComboboxControls();
+  const activeId = useComboboxSelectors.activeId();
+  const editor = useEditorState();
+
+  useEffect(() => {
+    comboboxActions.setComboboxById({
+      id,
+      trigger,
+      searchPattern,
+      controlled,
+      onSelectItem,
+      maxSuggestions,
+      filter,
+      sort,
+    });
+  }, [
+    id,
+    trigger,
+    searchPattern,
+    controlled,
+    onSelectItem,
+    maxSuggestions,
+    filter,
+    sort,
+  ]);
+
+  if (
+    !combobox ||
+    !editor.selection ||
+    focusedEditorId !== editor.id ||
+    activeId !== id ||
+    disabled
+  ) {
+    return null;
+  }
+
+  return <ComboboxContent combobox={combobox} {...props} />;
+}
diff --git a/src/components/plate-ui/command.tsx b/src/components/plate-ui/command.tsx
new file mode 100644
index 0000000..72ae042
--- /dev/null
+++ b/src/components/plate-ui/command.tsx
@@ -0,0 +1,156 @@
+'use client';
+
+import * as React from 'react';
+import { DialogProps } from '@radix-ui/react-dialog';
+import { Command as CommandPrimitive } from 'cmdk';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+
+import { Dialog, DialogContent } from './dialog';
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+function CommandDialog({ children, ...props }: CommandDialogProps) {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Icons.search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn('max-h-[500px] overflow-y-auto overflow-x-hidden', className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 h-px bg-border', className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      className={cn(
+        'ml-auto text-xs tracking-widest text-muted-foreground',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+CommandShortcut.displayName = 'CommandShortcut';
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
diff --git a/src/components/plate-ui/comment-avatar.tsx b/src/components/plate-ui/comment-avatar.tsx
new file mode 100644
index 0000000..d569e9b
--- /dev/null
+++ b/src/components/plate-ui/comment-avatar.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { useUserById } from '@udecode/plate-comments';
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from './avatar';
+
+export function CommentAvatar({ userId }: { userId: string | null }) {
+  const user = useUserById(userId);
+  if (!user) return null;
+
+  return (
+    <Avatar className="h-5 w-5">
+      <AvatarImage src={user.avatarUrl} alt={user.name} />
+      <AvatarFallback>{user.name?.[0]}</AvatarFallback>
+    </Avatar>
+  );
+}
diff --git a/src/components/plate-ui/comment-create-form.tsx b/src/components/plate-ui/comment-create-form.tsx
new file mode 100644
index 0000000..96b5ef0
--- /dev/null
+++ b/src/components/plate-ui/comment-create-form.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import {
+  CommentNewSubmitButton,
+  CommentNewTextarea,
+  useCommentsSelectors,
+} from '@udecode/plate-comments';
+
+import { cn } from '../../lib/utils';
+import { buttonVariants } from './button';
+import { inputVariants } from './input';
+
+import { CommentAvatar } from './comment-avatar';
+
+export function CommentCreateForm() {
+  const myUserId = useCommentsSelectors().myUserId();
+
+  return (
+    <div className="flex w-full space-x-2">
+      <CommentAvatar userId={myUserId} />
+
+      <div className="flex grow flex-col items-end gap-2">
+        <CommentNewTextarea className={inputVariants()} />
+
+        <CommentNewSubmitButton
+          className={cn(buttonVariants({ size: 'sm' }), 'w-[90px]')}
+        >
+          Comment
+        </CommentNewSubmitButton>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/plate-ui/comment-item.tsx b/src/components/plate-ui/comment-item.tsx
new file mode 100644
index 0000000..8cf45c0
--- /dev/null
+++ b/src/components/plate-ui/comment-item.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import {
+  CommentProvider,
+  useCommentById,
+  useCommentItemContentState,
+} from '@udecode/plate-comments';
+import { formatDistance } from 'date-fns';
+
+import { CommentAvatar } from './comment-avatar';
+import { CommentMoreDropdown } from './comment-more-dropdown';
+import { CommentResolveButton } from './comment-resolve-button';
+import { CommentValue } from './comment-value';
+
+type PlateCommentProps = {
+  commentId: string;
+};
+
+function CommentItemContent() {
+  const {
+    comment,
+    isMyComment,
+    isReplyComment,
+    user,
+    editingValue,
+    commentText,
+  } = useCommentItemContentState();
+
+  return (
+    <div>
+      <div className="relative flex items-center gap-2">
+        <CommentAvatar userId={comment.userId} />
+
+        <h4 className="text-sm font-semibold leading-none">{user?.name}</h4>
+
+        <div className="text-xs leading-none text-muted-foreground">
+          {formatDistance(comment.createdAt, Date.now())} ago
+        </div>
+
+        {isMyComment && (
+          <div className="absolute -right-0.5 -top-0.5 flex space-x-1">
+            {isReplyComment ? null : <CommentResolveButton />}
+
+            <CommentMoreDropdown />
+          </div>
+        )}
+      </div>
+
+      <div className="mb-4 pl-7 pt-0.5">
+        {editingValue ? (
+          <CommentValue />
+        ) : (
+          <div className="whitespace-pre-wrap text-sm">{commentText}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function CommentItem({ commentId }: PlateCommentProps) {
+  const comment = useCommentById(commentId);
+  if (!comment) return null;
+
+  return (
+    <CommentProvider key={commentId} id={commentId}>
+      <CommentItemContent />
+    </CommentProvider>
+  );
+}
diff --git a/src/components/plate-ui/comment-leaf.tsx b/src/components/plate-ui/comment-leaf.tsx
new file mode 100644
index 0000000..7c1bb39
--- /dev/null
+++ b/src/components/plate-ui/comment-leaf.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import {
+  TCommentText,
+  useCommentLeaf,
+  useCommentLeafState,
+} from '@udecode/plate-comments';
+import { PlateLeaf, PlateLeafProps, Value } from '@udecode/plate-common';
+
+import { cn } from '../../lib/utils';
+
+export function CommentLeaf({
+  className,
+  ...props
+}: PlateLeafProps<Value, TCommentText>) {
+  const { children, nodeProps, leaf } = props;
+
+  const state = useCommentLeafState({ leaf });
+  const { props: rootProps } = useCommentLeaf(state);
+
+  // hide resolved comments
+  if (!state.commentCount) return <>{children}</>;
+
+  let aboveChildren = <>{children}</>;
+
+  if (!state.isActive) {
+    for (let i = 1; i < state.commentCount; i++) {
+      aboveChildren = <span className="bg-primary/20">{aboveChildren}</span>;
+    }
+  }
+
+  return (
+    <PlateLeaf
+      {...props}
+      className={cn(
+        'border-b-2 border-b-primary/40',
+        state.isActive ? 'bg-primary/40' : 'bg-primary/20',
+        className
+      )}
+      nodeProps={{
+        ...rootProps,
+        ...nodeProps,
+      }}
+    >
+      {aboveChildren}
+    </PlateLeaf>
+  );
+}
diff --git a/src/components/plate-ui/comment-more-dropdown.tsx b/src/components/plate-ui/comment-more-dropdown.tsx
new file mode 100644
index 0000000..3c7afbe
--- /dev/null
+++ b/src/components/plate-ui/comment-more-dropdown.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import {
+  useCommentDeleteButton,
+  useCommentDeleteButtonState,
+  useCommentEditButton,
+  useCommentEditButtonState,
+} from '@udecode/plate-comments';
+
+import { cn } from '../../lib/utils';
+import { Button } from './button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './dropdown-menu';
+import { Icons } from './icons';
+
+export function CommentMoreDropdown() {
+  const editButtonState = useCommentEditButtonState();
+  const editProps = useCommentEditButton(editButtonState);
+  const deleteButtonState = useCommentDeleteButtonState();
+  const deleteProps = useCommentDeleteButton(deleteButtonState);
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className={cn('h-6 p-1 text-muted-foreground')}>
+          <Icons.more className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem {...(editProps as any)}>
+          Edit comment
+        </DropdownMenuItem>
+        <DropdownMenuItem {...(deleteProps as any)}>
+          Delete comment
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/plate-ui/comment-reply-items.tsx b/src/components/plate-ui/comment-reply-items.tsx
new file mode 100644
index 0000000..5329562
--- /dev/null
+++ b/src/components/plate-ui/comment-reply-items.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import {
+  SCOPE_ACTIVE_COMMENT,
+  useCommentReplies,
+} from '@udecode/plate-comments';
+
+import { CommentItem } from './comment-item';
+
+export function CommentReplyItems() {
+  const commentReplies = useCommentReplies(SCOPE_ACTIVE_COMMENT);
+
+  return (
+    <>
+      {Object.keys(commentReplies).map((id) => (
+        <CommentItem key={id} commentId={id} />
+      ))}
+    </>
+  );
+}
diff --git a/src/components/plate-ui/comment-resolve-button.tsx b/src/components/plate-ui/comment-resolve-button.tsx
new file mode 100644
index 0000000..a00aa24
--- /dev/null
+++ b/src/components/plate-ui/comment-resolve-button.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import {
+  CommentResolveButton as CommentResolveButtonPrimitive,
+  useComment,
+} from '@udecode/plate-comments';
+
+import { cn } from '../../lib/utils';
+import { buttonVariants } from './button';
+import { Icons } from './icons';
+
+export function CommentResolveButton() {
+  const comment = useComment()!;
+
+  return (
+    <CommentResolveButtonPrimitive
+      className={cn(
+        buttonVariants({ variant: 'ghost' }),
+        'h-6 p-1 text-muted-foreground'
+      )}
+    >
+      {comment.isResolved ? (
+        <Icons.refresh className="h-4 w-4" />
+      ) : (
+        <Icons.check className="h-4 w-4" />
+      )}
+    </CommentResolveButtonPrimitive>
+  );
+}
diff --git a/src/components/plate-ui/comment-toolbar-button.tsx b/src/components/plate-ui/comment-toolbar-button.tsx
new file mode 100644
index 0000000..63b6120
--- /dev/null
+++ b/src/components/plate-ui/comment-toolbar-button.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { useCommentAddButton } from '@udecode/plate-comments';
+
+import { Icons } from './icons';
+
+import { ToolbarButton } from './toolbar';
+
+export function CommentToolbarButton() {
+  const { hidden, props } = useCommentAddButton();
+
+  if (hidden) return null;
+
+  return (
+    <ToolbarButton tooltip="Comment (⌘+⇧+M)" {...props}>
+      <Icons.commentAdd />
+    </ToolbarButton>
+  );
+}
diff --git a/src/components/plate-ui/comment-value.tsx b/src/components/plate-ui/comment-value.tsx
new file mode 100644
index 0000000..fe718f2
--- /dev/null
+++ b/src/components/plate-ui/comment-value.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import {
+  CommentEditActions,
+  CommentEditTextarea,
+  useCommentValue,
+} from '@udecode/plate-comments';
+
+import { cn } from '../../lib/utils';
+import { buttonVariants } from './button';
+import { inputVariants } from './input';
+
+export function CommentValue() {
+  const { textareaRef } = useCommentValue();
+
+  return (
+    <div className="my-2 flex flex-col items-end gap-2">
+      <CommentEditTextarea
+        ref={textareaRef}
+        className={cn(inputVariants(), 'min-h-[60px]')}
+      />
+
+      <div className="flex space-x-2">
+        <CommentEditActions.CancelButton
+          className={buttonVariants({ variant: 'outline', size: 'xs' })}
+        >
+          Cancel
+        </CommentEditActions.CancelButton>
+
+        <CommentEditActions.SaveButton
+          className={buttonVariants({ variant: 'default', size: 'xs' })}
+        >
+          Save
+        </CommentEditActions.SaveButton>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/plate-ui/comments-popover.tsx b/src/components/plate-ui/comments-popover.tsx
new file mode 100644
index 0000000..ee95e14
--- /dev/null
+++ b/src/components/plate-ui/comments-popover.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import {
+  CommentProvider,
+  CommentsPositioner,
+  SCOPE_ACTIVE_COMMENT,
+  useFloatingCommentsContentState,
+  useFloatingCommentsState,
+} from '@udecode/plate-comments';
+import { PortalBody } from '@udecode/plate-common';
+
+import { cn } from '../../lib/utils';
+import { popoverVariants } from './popover';
+
+import { CommentCreateForm } from './comment-create-form';
+import { CommentItem } from './comment-item';
+import { CommentReplyItems } from './comment-reply-items';
+
+export type FloatingCommentsContentProps = {
+  disableForm?: boolean;
+};
+
+export function CommentsPopoverContent(props: FloatingCommentsContentProps) {
+  const { disableForm } = props;
+
+  const { ref, activeCommentId, hasNoComment, myUserId } =
+    useFloatingCommentsContentState();
+
+  return (
+    <CommentProvider
+      key={activeCommentId}
+      id={activeCommentId}
+      scope={SCOPE_ACTIVE_COMMENT}
+    >
+      <div ref={ref} className={cn(popoverVariants(), 'relative w-[310px]')}>
+        {!hasNoComment && (
+          <>
+            <CommentItem key={activeCommentId} commentId={activeCommentId} />
+
+            <CommentReplyItems />
+          </>
+        )}
+
+        {!!myUserId && !disableForm && <CommentCreateForm />}
+      </div>
+    </CommentProvider>
+  );
+}
+
+export function CommentsPopover() {
+  const { loaded, activeCommentId } = useFloatingCommentsState();
+
+  if (!loaded || !activeCommentId) return null;
+
+  return (
+    <PortalBody>
+      <CommentsPositioner className="absolute z-50 w-[418px] pb-4">
+        <CommentsPopoverContent />
+      </CommentsPositioner>
+    </PortalBody>
+  );
+}
diff --git a/src/components/plate-ui/cursor-overlay.tsx b/src/components/plate-ui/cursor-overlay.tsx
new file mode 100644
index 0000000..d92bb7e
--- /dev/null
+++ b/src/components/plate-ui/cursor-overlay.tsx
@@ -0,0 +1,70 @@
+import { createStore } from '@udecode/plate-common';
+import {
+  CursorData,
+  CursorOverlay as CursorOverlayPrimitive,
+  CursorOverlayProps,
+  CursorProps,
+} from '@udecode/plate-cursor';
+
+import { cn } from '../../lib/utils';
+
+export const cursorStore = createStore('cursor')({
+  cursors: {},
+});
+
+export function Cursor({
+  data,
+  selectionRects,
+  caretPosition,
+  disableCaret,
+  disableSelection,
+  classNames,
+}: CursorProps<CursorData>) {
+  if (!data) {
+    return null;
+  }
+
+  const { style, selectionStyle = style } = data;
+
+  return (
+    <>
+      {!disableSelection &&
+        selectionRects.map((position, i) => (
+          <div
+            key={i}
+            className={cn(
+              'pointer-events-none absolute z-10 opacity-[0.3]',
+              classNames?.selectionRect
+            )}
+            style={{
+              ...selectionStyle,
+              ...position,
+            }}
+          />
+        ))}
+      {!disableCaret && caretPosition && (
+        <div
+          className={cn(
+            'pointer-events-none absolute z-10 w-0.5',
+            classNames?.caret
+          )}
+          style={{ ...caretPosition, ...style }}
+        />
+      )}
+    </>
+  );
+}
+
+export function CursorOverlay({ cursors, ...props }: CursorOverlayProps) {
+  const dynamicCursors = cursorStore.use.cursors();
+
+  const allCursors = { ...cursors, ...dynamicCursors };
+
+  return (
+    <CursorOverlayPrimitive
+      {...props}
+      cursors={allCursors}
+      onRenderCursor={Cursor}
+    />
+  );
+}
diff --git a/src/components/plate-ui/dialog.tsx b/src/components/plate-ui/dialog.tsx
new file mode 100644
index 0000000..2832b99
--- /dev/null
+++ b/src/components/plate-ui/dialog.tsx
@@ -0,0 +1,117 @@
+'use client';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = ({
+  // className,
+  ...props
+}: DialogPrimitive.DialogPortalProps) => (
+  <DialogPrimitive.Portal /* className={cn(className)} */ {...props} />
+);
+DialogPortal.displayName = DialogPrimitive.Portal.displayName;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <Icons.close className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-1.5 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger
+};
diff --git a/src/components/plate-ui/draggable.tsx b/src/components/plate-ui/draggable.tsx
new file mode 100644
index 0000000..77c8f86
--- /dev/null
+++ b/src/components/plate-ui/draggable.tsx
@@ -0,0 +1,145 @@
+'use client';
+
+import { ClassNames, PlateElementProps, TEditor } from '@udecode/plate-common';
+import {
+  DragItemNode,
+  useDraggable,
+  useDraggableState,
+} from '@udecode/plate-dnd';
+import { forwardRef } from 'react';
+import { DropTargetMonitor } from 'react-dnd';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
+
+export interface DraggableProps
+  extends PlateElementProps,
+    ClassNames<{
+      /**
+       * Block and gutter.
+       */
+      blockAndGutter: string;
+
+      /**
+       * Block.
+       */
+      block: string;
+
+      /**
+       * Gutter at the left side of the editor.
+       * It has the height of the block
+       */
+      gutterLeft: string;
+
+      /**
+       * Block toolbar wrapper in the gutter left.
+       * It has the height of a line of the block.
+       */
+      blockToolbarWrapper: string;
+
+      /**
+       * Block toolbar in the gutter.
+       */
+      blockToolbar: string;
+
+      blockWrapper: string;
+
+      /**
+       * Button to dnd the block, in the block toolbar.
+       */
+      dragHandle: string;
+
+      /**
+       * Icon of the drag button, in the drag icon.
+       */
+      dragIcon: string;
+
+      /**
+       * Show a dropline above or below the block when dragging a block.
+       */
+      dropLine: string;
+    }> {
+  /**
+   * Intercepts the drop handling.
+   * If `false` is returned, the default drop behavior is called after.
+   * If `true` is returned, the default behavior is not called.
+   */
+  onDropHandler?: (
+    editor: TEditor,
+    props: {
+      monitor: DropTargetMonitor<DragItemNode, unknown>;
+      dragItem: DragItemNode;
+      nodeRef: any;
+      id: string;
+    }
+  ) => boolean;
+}
+
+const Draggable = forwardRef<HTMLDivElement, DraggableProps>(
+  ({ className, classNames = {}, onDropHandler, ...props }, ref) => {
+    const { children, element } = props;
+
+    const state = useDraggableState({ element, onDropHandler });
+    const { dropLine, isDragging } = state;
+    const { droplineProps, gutterLeftProps, previewRef, handleRef } =
+      useDraggable(state);
+
+    return (
+      <div
+        className={cn(
+          'relative',
+          isDragging && 'opacity-50',
+          'group',
+          className
+        )}
+        ref={ref}
+      >
+        <div
+          className={cn(
+            'pointer-events-none absolute top-0 flex h-full -translate-x-full cursor-text opacity-0 group-hover:opacity-100',
+            classNames.gutterLeft
+          )}
+          {...gutterLeftProps}
+        >
+          <div className={cn('flex h-[1.5em]', classNames.blockToolbarWrapper)}>
+            <div
+              className={cn(
+                'pointer-events-auto mr-1 flex items-center',
+                classNames.blockToolbar
+              )}
+            >
+              <Tooltip>
+                <TooltipTrigger ref={handleRef}>
+                  <Icons.dragHandle className="h-4 w-4 text-muted-foreground" />
+                </TooltipTrigger>
+                <TooltipContent>Drag to move</TooltipContent>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+
+        <div className={cn('', classNames.blockWrapper)} ref={previewRef}>
+          {children}
+
+          {!!dropLine && (
+            <div
+              className={cn(
+                'absolute inset-x-0 h-0.5 opacity-100',
+                'bg-ring',
+                dropLine === 'top' && '-top-px',
+                dropLine === 'bottom' && '-bottom-px',
+                classNames.dropLine
+              )}
+              {...droplineProps}
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+Draggable.displayName = 'Draggable';
+
+export { Draggable };
diff --git a/src/components/plate-ui/dropdown-menu.tsx b/src/components/plate-ui/dropdown-menu.tsx
new file mode 100644
index 0000000..fa5f455
--- /dev/null
+++ b/src/components/plate-ui/dropdown-menu.tsx
@@ -0,0 +1,239 @@
+'use client';
+
+import * as React from 'react';
+import { useCallback, useState } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <Icons.chevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+export const menuItemVariants = cva(
+  cn(
+    'relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',
+    'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'
+  ),
+  {
+    variants: {
+      inset: {
+        true: 'pl-8',
+      },
+    },
+  }
+);
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> &
+    VariantProps<typeof menuItemVariants>
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(menuItemVariants({ inset }), className)}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'cursor-pointer',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Icons.check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+interface DropdownMenuRadioItemProps
+  extends React.ComponentPropsWithoutRef<
+    typeof DropdownMenuPrimitive.RadioItem
+  > {
+  hideIcon?: boolean;
+}
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  DropdownMenuRadioItemProps
+>(({ className, children, hideIcon, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex select-none items-center rounded-sm pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'h-9 cursor-pointer px-2 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground',
+      className
+    )}
+    {...props}
+  >
+    {!hideIcon && (
+      <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <Icons.check className="h-4 w-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+    )}
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      'select-none px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      {...props}
+    />
+  );
+}
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
+
+export const useOpenState = () => {
+  const [open, setOpen] = useState(false);
+
+  const onOpenChange = useCallback(
+    (_value = !open) => {
+      setOpen(_value);
+    },
+    [open]
+  );
+
+  return {
+    open,
+    onOpenChange,
+  };
+};
diff --git a/src/components/plate-ui/editor.tsx b/src/components/plate-ui/editor.tsx
new file mode 100644
index 0000000..8bdf9f4
--- /dev/null
+++ b/src/components/plate-ui/editor.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { PlateContent } from '@udecode/plate-common';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+import type { PlateContentProps } from '@udecode/plate-common';
+import type { VariantProps } from 'class-variance-authority';
+
+const editorVariants = cva(
+  cn(
+    'relative overflow-x-auto whitespace-pre-wrap break-words',
+    'min-h-[80px] w-full rounded-md bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none',
+    '[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100',
+    '[&_[data-slate-placeholder]]:top-[auto_!important]',
+    '[&_strong]:font-bold'
+  ),
+  {
+    variants: {
+      variant: {
+        outline: 'border border-input',
+        ghost: '',
+      },
+      focused: {
+        true: 'ring-2 ring-ring ring-offset-2',
+      },
+      disabled: {
+        true: 'cursor-not-allowed opacity-50',
+      },
+      focusRing: {
+        true: 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        false: '',
+      },
+      size: {
+        sm: 'text-sm',
+        md: 'text-base',
+      },
+    },
+    defaultVariants: {
+      variant: 'outline',
+      focusRing: true,
+      size: 'sm',
+    },
+  }
+);
+
+export type EditorProps = PlateContentProps &
+  VariantProps<typeof editorVariants>;
+
+const Editor = React.forwardRef<HTMLDivElement, EditorProps>(
+  (
+    {
+      className,
+      disabled,
+      focused,
+      focusRing,
+      readOnly,
+      size,
+      variant,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div ref={ref} className="relative w-full">
+        <PlateContent
+          className={cn(
+            editorVariants({
+              disabled,
+              focused,
+              focusRing,
+              size,
+              variant,
+            }),
+            className
+          )}
+          disableDefaultStyles
+          readOnly={disabled ?? readOnly}
+          aria-disabled={disabled}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+Editor.displayName = 'Editor';
+
+export { Editor };
diff --git a/src/components/plate-ui/emoji-combobox.tsx b/src/components/plate-ui/emoji-combobox.tsx
new file mode 100644
index 0000000..5717ab3
--- /dev/null
+++ b/src/components/plate-ui/emoji-combobox.tsx
@@ -0,0 +1,40 @@
+import { ComboboxItemProps } from '@udecode/plate-combobox';
+import {
+  EmojiItemData,
+  KEY_EMOJI,
+  TEmojiCombobox,
+  useEmojiComboboxState,
+} from '@udecode/plate-emoji';
+
+import { Combobox } from './combobox';
+
+export function EmojiComboboxItem({ item }: ComboboxItemProps<EmojiItemData>) {
+  const {
+    data: { id, emoji },
+  } = item;
+
+  return (
+    <div>
+      {emoji} :{id}:
+    </div>
+  );
+}
+
+export function EmojiCombobox<TData extends EmojiItemData = EmojiItemData>({
+  pluginKey = KEY_EMOJI,
+  id = pluginKey,
+  ...props
+}: TEmojiCombobox<TData>) {
+  const { trigger, onSelectItem } = useEmojiComboboxState({ pluginKey });
+
+  return (
+    <Combobox
+      id={id}
+      trigger={trigger}
+      controlled
+      onSelectItem={onSelectItem}
+      onRenderItem={EmojiComboboxItem}
+      {...props}
+    />
+  );
+}
diff --git a/src/components/plate-ui/emoji-dropdown-menu.tsx b/src/components/plate-ui/emoji-dropdown-menu.tsx
new file mode 100644
index 0000000..9e67e4d
--- /dev/null
+++ b/src/components/plate-ui/emoji-dropdown-menu.tsx
@@ -0,0 +1,49 @@
+import {
+  EmojiDropdownMenuOptions,
+  useEmojiDropdownMenuState,
+} from '@udecode/plate-emoji';
+
+import { EmojiToolbarDropdown } from './emoji-toolbar-dropdown';
+import { Icons } from './icons';
+import {
+  ToolbarButton,
+  ToolbarButtonProps,
+} from './toolbar';
+
+import { emojiCategoryIcons, emojiSearchIcons } from './emoji-icons';
+import { EmojiPicker } from './emoji-picker';
+
+type EmojiDropdownMenuProps = {
+  options?: EmojiDropdownMenuOptions;
+} & ToolbarButtonProps;
+
+export function EmojiDropdownMenu({
+  options,
+  ...props
+}: EmojiDropdownMenuProps) {
+  const { isOpen, setIsOpen, emojiPickerState } =
+    useEmojiDropdownMenuState(options);
+
+  return (
+    <EmojiToolbarDropdown
+      control={
+        <ToolbarButton pressed={isOpen} isDropdown tooltip="Emoji" {...props}>
+          <Icons.emoji />
+        </ToolbarButton>
+      }
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+    >
+      <EmojiPicker
+        {...emojiPickerState}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        icons={{
+          categories: emojiCategoryIcons,
+          search: emojiSearchIcons,
+        }}
+        settings={options?.settings}
+      />
+    </EmojiToolbarDropdown>
+  );
+}
diff --git a/src/components/plate-ui/emoji-icons.tsx b/src/components/plate-ui/emoji-icons.tsx
new file mode 100644
index 0000000..0759f03
--- /dev/null
+++ b/src/components/plate-ui/emoji-icons.tsx
@@ -0,0 +1,156 @@
+import React from 'react';
+import { EmojiCategoryList } from '@udecode/plate-emoji';
+
+export const emojiCategoryIcons: Record<
+  EmojiCategoryList,
+  { outline: React.ReactElement; solid: React.ReactElement }
+> = {
+  activity: {
+    outline: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12 6.628 0 12-5.373 12-12 0-6.628-5.372-12-12-12m9.949 11H17.05c.224-2.527 1.232-4.773 1.968-6.113A9.966 9.966 0 0 1 21.949 11M13 11V2.051a9.945 9.945 0 0 1 4.432 1.564c-.858 1.491-2.156 4.22-2.392 7.385H13zm-2 0H8.961c-.238-3.165-1.536-5.894-2.393-7.385A9.95 9.95 0 0 1 11 2.051V11zm0 2v8.949a9.937 9.937 0 0 1-4.432-1.564c.857-1.492 2.155-4.221 2.393-7.385H11zm4.04 0c.236 3.164 1.534 5.893 2.392 7.385A9.92 9.92 0 0 1 13 21.949V13h2.04zM4.982 4.887C5.718 6.227 6.726 8.473 6.951 11h-4.9a9.977 9.977 0 0 1 2.931-6.113M2.051 13h4.9c-.226 2.527-1.233 4.771-1.969 6.113A9.972 9.972 0 0 1 2.051 13m16.967 6.113c-.735-1.342-1.744-3.586-1.968-6.113h4.899a9.961 9.961 0 0 1-2.931 6.113" />
+      </svg>
+    ),
+    solid: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <path d="M16.17 337.5c0 44.98 7.565 83.54 13.98 107.9C35.22 464.3 50.46 496 174.9 496c9.566 0 19.59-.4707 29.84-1.271L17.33 307.3C16.53 317.6 16.17 327.7 16.17 337.5zM495.8 174.5c0-44.98-7.565-83.53-13.98-107.9c-4.688-17.54-18.34-31.23-36.04-35.95C435.5 27.91 392.9 16 337 16c-9.564 0-19.59 .4707-29.84 1.271l187.5 187.5C495.5 194.4 495.8 184.3 495.8 174.5zM26.77 248.8l236.3 236.3c142-36.1 203.9-150.4 222.2-221.1L248.9 26.87C106.9 62.96 45.07 177.2 26.77 248.8zM256 335.1c0 9.141-7.474 16-16 16c-4.094 0-8.188-1.564-11.31-4.689L164.7 283.3C161.6 280.2 160 276.1 160 271.1c0-8.529 6.865-16 16-16c4.095 0 8.189 1.562 11.31 4.688l64.01 64C254.4 327.8 256 331.9 256 335.1zM304 287.1c0 9.141-7.474 16-16 16c-4.094 0-8.188-1.564-11.31-4.689L212.7 235.3C209.6 232.2 208 228.1 208 223.1c0-9.141 7.473-16 16-16c4.094 0 8.188 1.562 11.31 4.688l64.01 64.01C302.5 279.8 304 283.9 304 287.1zM256 175.1c0-9.141 7.473-16 16-16c4.094 0 8.188 1.562 11.31 4.688l64.01 64.01c3.125 3.125 4.688 7.219 4.688 11.31c0 9.133-7.468 16-16 16c-4.094 0-8.189-1.562-11.31-4.688l-64.01-64.01C257.6 184.2 256 180.1 256 175.1z" />
+      </svg>
+    ),
+  },
+
+  custom: {
+    outline: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+        <path d="M417.1 368c-5.937 10.27-16.69 16-27.75 16c-5.422 0-10.92-1.375-15.97-4.281L256 311.4V448c0 17.67-14.33 32-31.1 32S192 465.7 192 448V311.4l-118.3 68.29C68.67 382.6 63.17 384 57.75 384c-11.06 0-21.81-5.734-27.75-16c-8.828-15.31-3.594-34.88 11.72-43.72L159.1 256L41.72 187.7C26.41 178.9 21.17 159.3 29.1 144C36.63 132.5 49.26 126.7 61.65 128.2C65.78 128.7 69.88 130.1 73.72 132.3L192 200.6V64c0-17.67 14.33-32 32-32S256 46.33 256 64v136.6l118.3-68.29c3.838-2.213 7.939-3.539 12.07-4.051C398.7 126.7 411.4 132.5 417.1 144c8.828 15.31 3.594 34.88-11.72 43.72L288 256l118.3 68.28C421.6 333.1 426.8 352.7 417.1 368z" />
+      </svg>
+    ),
+    solid: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+        <path d="M417.1 368c-5.937 10.27-16.69 16-27.75 16c-5.422 0-10.92-1.375-15.97-4.281L256 311.4V448c0 17.67-14.33 32-31.1 32S192 465.7 192 448V311.4l-118.3 68.29C68.67 382.6 63.17 384 57.75 384c-11.06 0-21.81-5.734-27.75-16c-8.828-15.31-3.594-34.88 11.72-43.72L159.1 256L41.72 187.7C26.41 178.9 21.17 159.3 29.1 144C36.63 132.5 49.26 126.7 61.65 128.2C65.78 128.7 69.88 130.1 73.72 132.3L192 200.6V64c0-17.67 14.33-32 32-32S256 46.33 256 64v136.6l118.3-68.29c3.838-2.213 7.939-3.539 12.07-4.051C398.7 126.7 411.4 132.5 417.1 144c8.828 15.31 3.594 34.88-11.72 43.72L288 256l118.3 68.28C421.6 333.1 426.8 352.7 417.1 368z" />
+      </svg>
+    ),
+  },
+
+  flags: {
+    outline: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M0 0l6.084 24H8L1.916 0zM21 5h-4l-1-4H4l3 12h3l1 4h13L21 5zM6.563 3h7.875l2 8H8.563l-2-8zm8.832 10l-2.856 1.904L12.063 13h3.332zM19 13l-1.5-6h1.938l2 8H16l3-2z" />
+      </svg>
+    ),
+    solid: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <path d="M64 496C64 504.8 56.75 512 48 512h-32C7.25 512 0 504.8 0 496V32c0-17.75 14.25-32 32-32s32 14.25 32 32V496zM476.3 0c-6.365 0-13.01 1.35-19.34 4.233c-45.69 20.86-79.56 27.94-107.8 27.94c-59.96 0-94.81-31.86-163.9-31.87C160.9 .3055 131.6 4.867 96 15.75v350.5c32-9.984 59.87-14.1 84.85-14.1c73.63 0 124.9 31.78 198.6 31.78c31.91 0 68.02-5.971 111.1-23.09C504.1 355.9 512 344.4 512 332.1V30.73C512 11.1 495.3 0 476.3 0z" />
+      </svg>
+    ),
+  },
+
+  foods: {
+    outline: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M17 4.978c-1.838 0-2.876.396-3.68.934.513-1.172 1.768-2.934 4.68-2.934a1 1 0 0 0 0-2c-2.921 0-4.629 1.365-5.547 2.512-.064.078-.119.162-.18.244C11.73 1.838 10.798.023 9.207.023 8.579.022 7.85.306 7 .978 5.027 2.54 5.329 3.902 6.492 4.999 3.609 5.222 0 7.352 0 12.969c0 4.582 4.961 11.009 9 11.009 1.975 0 2.371-.486 3-1 .629.514 1.025 1 3 1 4.039 0 9-6.418 9-11 0-5.953-4.055-8-7-8M8.242 2.546c.641-.508.943-.523.965-.523.426.169.975 1.405 1.357 3.055-1.527-.629-2.741-1.352-2.98-1.846.059-.112.241-.356.658-.686M15 21.978c-1.08 0-1.21-.109-1.559-.402l-.176-.146c-.367-.302-.816-.452-1.266-.452s-.898.15-1.266.452l-.176.146c-.347.292-.477.402-1.557.402-2.813 0-7-5.389-7-9.009 0-5.823 4.488-5.991 5-5.991 1.939 0 2.484.471 3.387 1.251l.323.276a1.995 1.995 0 0 0 2.58 0l.323-.276c.902-.78 1.447-1.251 3.387-1.251.512 0 5 .168 5 6 0 3.617-4.187 9-7 9" />
+      </svg>
+    ),
+    solid: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <path d="M481.9 270.1C490.9 279.1 496 291.3 496 304C496 316.7 490.9 328.9 481.9 337.9C472.9 346.9 460.7 352 448 352H64C51.27 352 39.06 346.9 30.06 337.9C21.06 328.9 16 316.7 16 304C16 291.3 21.06 279.1 30.06 270.1C39.06 261.1 51.27 256 64 256H448C460.7 256 472.9 261.1 481.9 270.1zM475.3 388.7C478.3 391.7 480 395.8 480 400V416C480 432.1 473.3 449.3 461.3 461.3C449.3 473.3 432.1 480 416 480H96C79.03 480 62.75 473.3 50.75 461.3C38.74 449.3 32 432.1 32 416V400C32 395.8 33.69 391.7 36.69 388.7C39.69 385.7 43.76 384 48 384H464C468.2 384 472.3 385.7 475.3 388.7zM50.39 220.8C45.93 218.6 42.03 215.5 38.97 211.6C35.91 207.7 33.79 203.2 32.75 198.4C31.71 193.5 31.8 188.5 32.99 183.7C54.98 97.02 146.5 32 256 32C365.5 32 457 97.02 479 183.7C480.2 188.5 480.3 193.5 479.2 198.4C478.2 203.2 476.1 207.7 473 211.6C469.1 215.5 466.1 218.6 461.6 220.8C457.2 222.9 452.3 224 447.3 224H64.67C59.73 224 54.84 222.9 50.39 220.8zM372.7 116.7C369.7 119.7 368 123.8 368 128C368 131.2 368.9 134.3 370.7 136.9C372.5 139.5 374.1 141.6 377.9 142.8C380.8 143.1 384 144.3 387.1 143.7C390.2 143.1 393.1 141.6 395.3 139.3C397.6 137.1 399.1 134.2 399.7 131.1C400.3 128 399.1 124.8 398.8 121.9C397.6 118.1 395.5 116.5 392.9 114.7C390.3 112.9 387.2 111.1 384 111.1C379.8 111.1 375.7 113.7 372.7 116.7V116.7zM244.7 84.69C241.7 87.69 240 91.76 240 96C240 99.16 240.9 102.3 242.7 104.9C244.5 107.5 246.1 109.6 249.9 110.8C252.8 111.1 256 112.3 259.1 111.7C262.2 111.1 265.1 109.6 267.3 107.3C269.6 105.1 271.1 102.2 271.7 99.12C272.3 96.02 271.1 92.8 270.8 89.88C269.6 86.95 267.5 84.45 264.9 82.7C262.3 80.94 259.2 79.1 256 79.1C251.8 79.1 247.7 81.69 244.7 84.69V84.69zM116.7 116.7C113.7 119.7 112 123.8 112 128C112 131.2 112.9 134.3 114.7 136.9C116.5 139.5 118.1 141.6 121.9 142.8C124.8 143.1 128 144.3 131.1 143.7C134.2 143.1 137.1 141.6 139.3 139.3C141.6 137.1 143.1 134.2 143.7 131.1C144.3 128 143.1 124.8 142.8 121.9C141.6 118.1 139.5 116.5 136.9 114.7C134.3 112.9 131.2 111.1 128 111.1C123.8 111.1 119.7 113.7 116.7 116.7L116.7 116.7z" />
+      </svg>
+    ),
+  },
+
+  frequent: {
+    outline: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M13 4h-2l-.001 7H9v2h2v2h2v-2h4v-2h-4z" />
+        <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10" />
+      </svg>
+    ),
+    solid: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <path d="M256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512zM232 256C232 264 236 271.5 242.7 275.1L338.7 339.1C349.7 347.3 364.6 344.3 371.1 333.3C379.3 322.3 376.3 307.4 365.3 300L280 243.2V120C280 106.7 269.3 96 255.1 96C242.7 96 231.1 106.7 231.1 120L232 256z" />
+      </svg>
+    ),
+  },
+
+  nature: {
+    outline: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M15.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 15.5 8M8.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 8.5 8" />
+        <path d="M18.933 0h-.027c-.97 0-2.138.787-3.018 1.497-1.274-.374-2.612-.51-3.887-.51-1.285 0-2.616.133-3.874.517C7.245.79 6.069 0 5.093 0h-.027C3.352 0 .07 2.67.002 7.026c-.039 2.479.276 4.238 1.04 5.013.254.258.882.677 1.295.882.191 3.177.922 5.238 2.536 6.38.897.637 2.187.949 3.2 1.102C8.04 20.6 8 20.795 8 21c0 1.773 2.35 3 4 3 1.648 0 4-1.227 4-3 0-.201-.038-.393-.072-.586 2.573-.385 5.435-1.877 5.925-7.587.396-.22.887-.568 1.104-.788.763-.774 1.079-2.534 1.04-5.013C23.929 2.67 20.646 0 18.933 0M3.223 9.135c-.237.281-.837 1.155-.884 1.238-.15-.41-.368-1.349-.337-3.291.051-3.281 2.478-4.972 3.091-5.031.256.015.731.27 1.265.646-1.11 1.171-2.275 2.915-2.352 5.125-.133.546-.398.858-.783 1.313M12 22c-.901 0-1.954-.693-2-1 0-.654.475-1.236 1-1.602V20a1 1 0 1 0 2 0v-.602c.524.365 1 .947 1 1.602-.046.307-1.099 1-2 1m3-3.48v.02a4.752 4.752 0 0 0-1.262-1.02c1.092-.516 2.239-1.334 2.239-2.217 0-1.842-1.781-2.195-3.977-2.195-2.196 0-3.978.354-3.978 2.195 0 .883 1.148 1.701 2.238 2.217A4.8 4.8 0 0 0 9 18.539v-.025c-1-.076-2.182-.281-2.973-.842-1.301-.92-1.838-3.045-1.853-6.478l.023-.041c.496-.826 1.49-1.45 1.804-3.102 0-2.047 1.357-3.631 2.362-4.522C9.37 3.178 10.555 3 11.948 3c1.447 0 2.685.192 3.733.57 1 .9 2.316 2.465 2.316 4.48.313 1.651 1.307 2.275 1.803 3.102.035.058.068.117.102.178-.059 5.967-1.949 7.01-4.902 7.19m6.628-8.202c-.037-.065-.074-.13-.113-.195a7.587 7.587 0 0 0-.739-.987c-.385-.455-.648-.768-.782-1.313-.076-2.209-1.241-3.954-2.353-5.124.531-.376 1.004-.63 1.261-.647.636.071 3.044 1.764 3.096 5.031.027 1.81-.347 3.218-.37 3.235" />
+      </svg>
+    ),
+    solid: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+        <path d="M332.7 19.85C334.6 8.395 344.5 0 356.1 0C363.6 0 370.6 3.52 375.1 9.502L392 32H444.1C456.8 32 469.1 37.06 478.1 46.06L496 64H552C565.3 64 576 74.75 576 88V112C576 156.2 540.2 192 496 192H426.7L421.6 222.5L309.6 158.5L332.7 19.85zM448 64C439.2 64 432 71.16 432 80C432 88.84 439.2 96 448 96C456.8 96 464 88.84 464 80C464 71.16 456.8 64 448 64zM416 256.1V480C416 497.7 401.7 512 384 512H352C334.3 512 320 497.7 320 480V364.8C295.1 377.1 268.8 384 240 384C211.2 384 184 377.1 160 364.8V480C160 497.7 145.7 512 128 512H96C78.33 512 64 497.7 64 480V249.8C35.23 238.9 12.64 214.5 4.836 183.3L.9558 167.8C-3.331 150.6 7.094 133.2 24.24 128.1C41.38 124.7 58.76 135.1 63.05 152.2L66.93 167.8C70.49 182 83.29 191.1 97.97 191.1H303.8L416 256.1z" />
+      </svg>
+    ),
+  },
+
+  objects: {
+    outline: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M12 0a9 9 0 0 0-5 16.482V21s2.035 3 5 3 5-3 5-3v-4.518A9 9 0 0 0 12 0zm0 2c3.86 0 7 3.141 7 7s-3.14 7-7 7-7-3.141-7-7 3.14-7 7-7zM9 17.477c.94.332 1.946.523 3 .523s2.06-.19 3-.523v.834c-.91.436-1.925.689-3 .689a6.924 6.924 0 0 1-3-.69v-.833zm.236 3.07A8.854 8.854 0 0 0 12 21c.965 0 1.888-.167 2.758-.451C14.155 21.173 13.153 22 12 22c-1.102 0-2.117-.789-2.764-1.453z" />
+        <path d="M14.745 12.449h-.004c-.852-.024-1.188-.858-1.577-1.824-.421-1.061-.703-1.561-1.182-1.566h-.009c-.481 0-.783.497-1.235 1.537-.436.982-.801 1.811-1.636 1.791l-.276-.043c-.565-.171-.853-.691-1.284-1.794-.125-.313-.202-.632-.27-.913-.051-.213-.127-.53-.195-.634C7.067 9.004 7.039 9 6.99 9A1 1 0 0 1 7 7h.01c1.662.017 2.015 1.373 2.198 2.134.486-.981 1.304-2.058 2.797-2.075 1.531.018 2.28 1.153 2.731 2.141l.002-.008C14.944 8.424 15.327 7 16.979 7h.032A1 1 0 1 1 17 9h-.011c-.149.076-.256.474-.319.709a6.484 6.484 0 0 1-.311.951c-.429.973-.79 1.789-1.614 1.789" />
+      </svg>
+    ),
+    solid: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+        <path d="M112.1 454.3c0 6.297 1.816 12.44 5.284 17.69l17.14 25.69c5.25 7.875 17.17 14.28 26.64 14.28h61.67c9.438 0 21.36-6.401 26.61-14.28l17.08-25.68c2.938-4.438 5.348-12.37 5.348-17.7L272 415.1h-160L112.1 454.3zM191.4 .0132C89.44 .3257 16 82.97 16 175.1c0 44.38 16.44 84.84 43.56 115.8c16.53 18.84 42.34 58.23 52.22 91.45c.0313 .25 .0938 .5166 .125 .7823h160.2c.0313-.2656 .0938-.5166 .125-.7823c9.875-33.22 35.69-72.61 52.22-91.45C351.6 260.8 368 220.4 368 175.1C368 78.61 288.9-.2837 191.4 .0132zM192 96.01c-44.13 0-80 35.89-80 79.1C112 184.8 104.8 192 96 192S80 184.8 80 176c0-61.76 50.25-111.1 112-111.1c8.844 0 16 7.159 16 16S200.8 96.01 192 96.01z" />
+      </svg>
+    ),
+  },
+
+  people: {
+    outline: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10" />
+        <path d="M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0" />
+      </svg>
+    ),
+    solid: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <path d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 432C332.1 432 396.2 382 415.2 314.1C419.1 300.4 407.8 288 393.6 288H118.4C104.2 288 92.92 300.4 96.76 314.1C115.8 382 179.9 432 256 432V432zM176.4 160C158.7 160 144.4 174.3 144.4 192C144.4 209.7 158.7 224 176.4 224C194 224 208.4 209.7 208.4 192C208.4 174.3 194 160 176.4 160zM336.4 224C354 224 368.4 209.7 368.4 192C368.4 174.3 354 160 336.4 160C318.7 160 304.4 174.3 304.4 192C304.4 209.7 318.7 224 336.4 224z" />
+      </svg>
+    ),
+  },
+
+  places: {
+    outline: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M6.5 12C5.122 12 4 13.121 4 14.5S5.122 17 6.5 17 9 15.879 9 14.5 7.878 12 6.5 12m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5M17.5 12c-1.378 0-2.5 1.121-2.5 2.5s1.122 2.5 2.5 2.5 2.5-1.121 2.5-2.5-1.122-2.5-2.5-2.5m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5" />
+        <path d="M22.482 9.494l-1.039-.346L21.4 9h.6c.552 0 1-.439 1-.992 0-.006-.003-.008-.003-.008H23c0-1-.889-2-1.984-2h-.642l-.731-1.717C19.262 3.012 18.091 2 16.764 2H7.236C5.909 2 4.738 3.012 4.357 4.283L3.626 6h-.642C1.889 6 1 7 1 8h.003S1 8.002 1 8.008C1 8.561 1.448 9 2 9h.6l-.043.148-1.039.346a2.001 2.001 0 0 0-1.359 2.097l.751 7.508a1 1 0 0 0 .994.901H3v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h6v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h1.096a.999.999 0 0 0 .994-.901l.751-7.508a2.001 2.001 0 0 0-1.359-2.097M6.273 4.857C6.402 4.43 6.788 4 7.236 4h9.527c.448 0 .834.43.963.857L19.313 9H4.688l1.585-4.143zM7 21H5v-1h2v1zm12 0h-2v-1h2v1zm2.189-3H2.811l-.662-6.607L3 11h18l.852.393L21.189 18z" />
+      </svg>
+    ),
+    solid: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <path d="M39.61 196.8L74.8 96.29C88.27 57.78 124.6 32 165.4 32H346.6C387.4 32 423.7 57.78 437.2 96.29L472.4 196.8C495.6 206.4 512 229.3 512 256V448C512 465.7 497.7 480 480 480H448C430.3 480 416 465.7 416 448V400H96V448C96 465.7 81.67 480 64 480H32C14.33 480 0 465.7 0 448V256C0 229.3 16.36 206.4 39.61 196.8V196.8zM109.1 192H402.9L376.8 117.4C372.3 104.6 360.2 96 346.6 96H165.4C151.8 96 139.7 104.6 135.2 117.4L109.1 192zM96 256C78.33 256 64 270.3 64 288C64 305.7 78.33 320 96 320C113.7 320 128 305.7 128 288C128 270.3 113.7 256 96 256zM416 320C433.7 320 448 305.7 448 288C448 270.3 433.7 256 416 256C398.3 256 384 270.3 384 288C384 305.7 398.3 320 416 320z" />
+      </svg>
+    ),
+  },
+
+  symbols: {
+    outline: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M0 0h11v2H0zM4 11h3V6h4V4H0v2h4zM15.5 17c1.381 0 2.5-1.116 2.5-2.493s-1.119-2.493-2.5-2.493S13 13.13 13 14.507 14.119 17 15.5 17m0-2.986c.276 0 .5.222.5.493 0 .272-.224.493-.5.493s-.5-.221-.5-.493.224-.493.5-.493M21.5 19.014c-1.381 0-2.5 1.116-2.5 2.493S20.119 24 21.5 24s2.5-1.116 2.5-2.493-1.119-2.493-2.5-2.493m0 2.986a.497.497 0 0 1-.5-.493c0-.271.224-.493.5-.493s.5.222.5.493a.497.497 0 0 1-.5.493M22 13l-9 9 1.513 1.5 8.99-9.009zM17 11c2.209 0 4-1.119 4-2.5V2s.985-.161 1.498.949C23.01 4.055 23 6 23 6s1-1.119 1-3.135C24-.02 21 0 21 0h-2v6.347A5.853 5.853 0 0 0 17 6c-2.209 0-4 1.119-4 2.5s1.791 2.5 4 2.5M10.297 20.482l-1.475-1.585a47.54 47.54 0 0 1-1.442 1.129c-.307-.288-.989-1.016-2.045-2.183.902-.836 1.479-1.466 1.729-1.892s.376-.871.376-1.336c0-.592-.273-1.178-.818-1.759-.546-.581-1.329-.871-2.349-.871-1.008 0-1.79.293-2.344.879-.556.587-.832 1.181-.832 1.784 0 .813.419 1.748 1.256 2.805-.847.614-1.444 1.208-1.794 1.784a3.465 3.465 0 0 0-.523 1.833c0 .857.308 1.56.924 2.107.616.549 1.423.823 2.42.823 1.173 0 2.444-.379 3.813-1.137L8.235 24h2.819l-2.09-2.383 1.333-1.135zm-6.736-6.389a1.02 1.02 0 0 1 .73-.286c.31 0 .559.085.747.254a.849.849 0 0 1 .283.659c0 .518-.419 1.112-1.257 1.784-.536-.651-.805-1.231-.805-1.742a.901.901 0 0 1 .302-.669M3.74 22c-.427 0-.778-.116-1.057-.349-.279-.232-.418-.487-.418-.766 0-.594.509-1.288 1.527-2.083.968 1.134 1.717 1.946 2.248 2.438-.921.507-1.686.76-2.3.76" />
+      </svg>
+    ),
+    solid: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <path d="M500.3 7.251C507.7 13.33 512 22.41 512 31.1V175.1C512 202.5 483.3 223.1 447.1 223.1C412.7 223.1 383.1 202.5 383.1 175.1C383.1 149.5 412.7 127.1 447.1 127.1V71.03L351.1 90.23V207.1C351.1 234.5 323.3 255.1 287.1 255.1C252.7 255.1 223.1 234.5 223.1 207.1C223.1 181.5 252.7 159.1 287.1 159.1V63.1C287.1 48.74 298.8 35.61 313.7 32.62L473.7 .6198C483.1-1.261 492.9 1.173 500.3 7.251H500.3zM74.66 303.1L86.5 286.2C92.43 277.3 102.4 271.1 113.1 271.1H174.9C185.6 271.1 195.6 277.3 201.5 286.2L213.3 303.1H239.1C266.5 303.1 287.1 325.5 287.1 351.1V463.1C287.1 490.5 266.5 511.1 239.1 511.1H47.1C21.49 511.1-.0019 490.5-.0019 463.1V351.1C-.0019 325.5 21.49 303.1 47.1 303.1H74.66zM143.1 359.1C117.5 359.1 95.1 381.5 95.1 407.1C95.1 434.5 117.5 455.1 143.1 455.1C170.5 455.1 191.1 434.5 191.1 407.1C191.1 381.5 170.5 359.1 143.1 359.1zM440.3 367.1H496C502.7 367.1 508.6 372.1 510.1 378.4C513.3 384.6 511.6 391.7 506.5 396L378.5 508C372.9 512.1 364.6 513.3 358.6 508.9C352.6 504.6 350.3 496.6 353.3 489.7L391.7 399.1H336C329.3 399.1 323.4 395.9 321 389.6C318.7 383.4 320.4 376.3 325.5 371.1L453.5 259.1C459.1 255 467.4 254.7 473.4 259.1C479.4 263.4 481.6 271.4 478.7 278.3L440.3 367.1zM116.7 219.1L19.85 119.2C-8.112 90.26-6.614 42.31 24.85 15.34C51.82-8.137 93.26-3.642 118.2 21.83L128.2 32.32L137.7 21.83C162.7-3.642 203.6-8.137 231.6 15.34C262.6 42.31 264.1 90.26 236.1 119.2L139.7 219.1C133.2 225.6 122.7 225.6 116.7 219.1H116.7z" />
+      </svg>
+    ),
+  },
+};
+
+export const emojiSearchIcons = {
+  loupe: (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+      <path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z" />
+    </svg>
+  ),
+
+  delete: (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+      <path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" />
+    </svg>
+  ),
+};
diff --git a/src/components/plate-ui/emoji-picker-content.tsx b/src/components/plate-ui/emoji-picker-content.tsx
new file mode 100644
index 0000000..f1d9fd1
--- /dev/null
+++ b/src/components/plate-ui/emoji-picker-content.tsx
@@ -0,0 +1,197 @@
+import {
+  Emoji,
+  EmojiSettings,
+  GridRow,
+  UseEmojiPickerType,
+} from '@udecode/plate-emoji';
+import { memo, useCallback } from 'react';
+
+import { cn } from '../../lib/utils';
+
+export type EmojiPickerContentProps = Pick<
+  UseEmojiPickerType,
+  | 'i18n'
+  | 'onMouseOver'
+  | 'onSelectEmoji'
+  | 'emojiLibrary'
+  | 'isSearching'
+  | 'searchResult'
+  | 'visibleCategories'
+  | 'refs'
+  | 'settings'
+>;
+
+export type EmojiButtonProps = {
+  index: number;
+  emoji: Emoji;
+  onSelect: (emoji: Emoji) => void;
+  onMouseOver: (emoji?: Emoji) => void;
+};
+
+export type RowOfButtonsProps = Pick<
+  UseEmojiPickerType,
+  'onMouseOver' | 'onSelectEmoji' | 'emojiLibrary'
+> & {
+  row: GridRow;
+};
+
+const Button = memo(
+  ({ index, emoji, onSelect, onMouseOver }: EmojiButtonProps) => {
+    return (
+      <button
+        type="button"
+        aria-label={emoji.skins[0].native}
+        tabIndex={-1}
+        data-index={index}
+        onClick={() => onSelect(emoji)}
+        onMouseEnter={() => onMouseOver(emoji)}
+        onMouseLeave={() => onMouseOver()}
+        className="group relative flex h-[36px] w-[36px] cursor-pointer items-center justify-center border-none bg-transparent text-2xl leading-none"
+      >
+        <div
+          aria-hidden="true"
+          className="absolute inset-0 rounded-full bg-[rgba(0,0,0,0.05)] opacity-0 group-hover:opacity-100"
+        />
+        <span data-emoji-set="native" style={{ position: 'relative' }}>
+          {emoji.skins[0].native}
+        </span>
+      </button>
+    );
+  }
+);
+Button.displayName = 'Button';
+
+const RowOfButtons = memo(
+  ({ row, emojiLibrary, onSelectEmoji, onMouseOver }: RowOfButtonsProps) => (
+    <div key={row.id} data-index={row.id} className="flex">
+      {row.elements.map((emojiId, index) => (
+        <Button
+          key={emojiId}
+          index={index}
+          emoji={emojiLibrary.getEmoji(emojiId)}
+          onSelect={onSelectEmoji}
+          onMouseOver={onMouseOver}
+        />
+      ))}
+    </div>
+  )
+);
+RowOfButtons.displayName = 'RowOfButtons';
+
+export function EmojiPickerContent({
+  i18n,
+  onSelectEmoji,
+  onMouseOver,
+  emojiLibrary,
+  isSearching = false,
+  searchResult,
+  visibleCategories,
+  refs,
+  settings = EmojiSettings,
+}: EmojiPickerContentProps) {
+  const getRowWidth = settings.perLine.value * settings.buttonSize.value;
+
+  const isCategoryVisible = useCallback(
+    (categoryId: any) => {
+      return visibleCategories.has(categoryId)
+        ? visibleCategories.get(categoryId)
+        : false;
+    },
+    [visibleCategories]
+  );
+
+  const EmojiList = useCallback(() => {
+    return emojiLibrary
+      .getGrid()
+      .sections()
+      .map(({ id: categoryId }) => {
+        const section = emojiLibrary.getGrid().section(categoryId);
+        const { buttonSize } = settings;
+
+        return (
+          <div
+            key={categoryId}
+            data-id={categoryId}
+            ref={section.root}
+            style={{ width: getRowWidth }}
+          >
+            <div className="sticky -top-px z-[1] bg-background/90 p-1 backdrop-blur-[4px]">
+              {i18n.categories[categoryId]}
+            </div>
+            <div
+              className="relative flex flex-wrap"
+              style={{ height: section.getRows().length * buttonSize.value }}
+            >
+              {isCategoryVisible(categoryId) &&
+                section
+                  .getRows()
+                  .map((row: GridRow, index) => (
+                    <RowOfButtons
+                      key={index}
+                      emojiLibrary={emojiLibrary}
+                      row={row}
+                      onSelectEmoji={onSelectEmoji}
+                      onMouseOver={onMouseOver}
+                    />
+                  ))}
+            </div>
+          </div>
+        );
+      });
+  }, [
+    emojiLibrary,
+    getRowWidth,
+    i18n.categories,
+    isCategoryVisible,
+    onSelectEmoji,
+    onMouseOver,
+    settings,
+  ]);
+
+  const SearchList = useCallback(() => {
+    return (
+      <div data-id="search" style={{ width: getRowWidth }}>
+        <div className="sticky -top-px z-[1] bg-background/90 p-1 backdrop-blur-[4px]">
+          {i18n.searchResult}
+        </div>
+        <div className="relative flex flex-wrap">
+          {searchResult.map((emoji: Emoji, index: number) => (
+            <Button
+              key={emoji.id}
+              index={index}
+              emoji={emojiLibrary.getEmoji(emoji.id)}
+              onSelect={onSelectEmoji}
+              onMouseOver={onMouseOver}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }, [
+    emojiLibrary,
+    getRowWidth,
+    i18n.searchResult,
+    searchResult,
+    onSelectEmoji,
+    onMouseOver,
+  ]);
+
+  return (
+    <div
+      className={cn(
+        'h-full min-h-[50%] overflow-y-auto overflow-x-hidden px-3',
+        '[&::-webkit-scrollbar]:w-4',
+        '[&::-webkit-scrollbar-button]:hidden [&::-webkit-scrollbar-button]:h-0 [&::-webkit-scrollbar-button]:w-0',
+        ':hover:[&::-webkit-scrollbar-thumb]:bg-[#f3f4f6]',
+        '[&::-webkit-scrollbar-thumb]:min-h-[65px] [&::-webkit-scrollbar-thumb]:rounded-2xl [&::-webkit-scrollbar-thumb]:border-4 [&::-webkit-scrollbar-thumb]:border-white',
+        '[&::-webkit-scrollbar-track]:border-0'
+      )}
+      data-id="scroll"
+      ref={refs.current.contentRoot}
+    >
+      <div ref={refs.current.content} className="h-full">
+        {isSearching ? SearchList() : EmojiList()}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/plate-ui/emoji-picker-navigation.tsx b/src/components/plate-ui/emoji-picker-navigation.tsx
new file mode 100644
index 0000000..65bc094
--- /dev/null
+++ b/src/components/plate-ui/emoji-picker-navigation.tsx
@@ -0,0 +1,79 @@
+import {
+  EmojiCategoryList,
+  IEmojiFloatingLibrary,
+  UseEmojiPickerType,
+} from '@udecode/plate-emoji';
+
+import { cn } from '../../lib/utils';
+
+export type EmojiPickerNavigationProps = Pick<
+  UseEmojiPickerType,
+  'i18n' | 'emojiLibrary' | 'icons' | 'focusedCategory'
+> & {
+  onClick: (id: EmojiCategoryList) => void;
+};
+
+const getBarProperty = (
+  emojiLibrary: IEmojiFloatingLibrary,
+  focusedCategory?: EmojiCategoryList
+) => {
+  let width = 0;
+  let position = 0;
+  if (focusedCategory) {
+    width = 100 / emojiLibrary.getGrid().size;
+    position = focusedCategory
+      ? emojiLibrary.indexOf(focusedCategory) * 100
+      : 0;
+  }
+
+  return { width, position };
+};
+
+export function EmojiPickerNavigation({
+  i18n,
+  icons,
+  emojiLibrary,
+  focusedCategory,
+  onClick,
+}: EmojiPickerNavigationProps) {
+  const { width, position } = getBarProperty(emojiLibrary, focusedCategory);
+
+  return (
+    <nav
+      id="emoji-nav"
+      className="mb-2.5 border-0 border-b border-solid border-b-gray-100 p-3"
+    >
+      <div className="relative flex">
+        {emojiLibrary
+          .getGrid()
+          .sections()
+          .map(({ id }) => (
+            <button
+              key={id}
+              aria-label={i18n.categories[id]}
+              title={i18n.categories[id]}
+              type="button"
+              className={cn(
+                'flex grow cursor-pointer items-center justify-center border-none bg-transparent fill-current text-sm text-gray-500 hover:text-gray-800',
+                id === focusedCategory &&
+                  'pointer-events-none fill-current text-blue-600'
+              )}
+              onClick={() => onClick(id)}
+            >
+              <span style={{ width: '20px', height: '20px' }}>
+                {icons.categories[id].outline}
+              </span>
+            </button>
+          ))}
+        <div
+          className="absolute -bottom-3 left-0 h-[3px] w-full rounded-t bg-blue-600 opacity-100 transition-transform duration-200"
+          style={{
+            visibility: `${focusedCategory ? 'visible' : 'hidden'}`,
+            width: `${width}%`,
+            transform: `translateX(${position}%)`,
+          }}
+        />
+      </div>
+    </nav>
+  );
+}
diff --git a/src/components/plate-ui/emoji-picker-preview.tsx b/src/components/plate-ui/emoji-picker-preview.tsx
new file mode 100644
index 0000000..2287d4c
--- /dev/null
+++ b/src/components/plate-ui/emoji-picker-preview.tsx
@@ -0,0 +1,74 @@
+import { UseEmojiPickerType } from '@udecode/plate-emoji';
+
+export type EmojiPickerPreviewProps = Pick<
+  UseEmojiPickerType,
+  'emoji' | 'hasFound' | 'isSearching' | 'i18n'
+>;
+
+export type EmojiPreviewProps = Pick<UseEmojiPickerType, 'emoji'>;
+
+export type NoEmojiPreviewProps = Pick<UseEmojiPickerType, 'i18n'>;
+export type PickAnEmojiPreviewProps = NoEmojiPreviewProps;
+
+function EmojiPreview({ emoji }: EmojiPreviewProps) {
+  return (
+    <div className="flex items-center border-t border-gray-100 p-2">
+      <div className="flex items-center justify-center text-3xl">
+        {emoji?.skins[0].native}
+      </div>
+      <div className="overflow-hidden pl-2">
+        <div className="truncate text-sm text-gray-600">{emoji?.name}</div>
+        <div className="truncate text-xs text-muted-foreground">{`:${emoji?.id}:`}</div>
+      </div>
+    </div>
+  );
+}
+
+function NoEmoji({ i18n }: NoEmojiPreviewProps) {
+  return (
+    <div className="flex items-center border-t border-gray-100 p-2">
+      <div className="flex items-center justify-center text-3xl">😢</div>
+      <div className="overflow-hidden pl-2">
+        <div className="truncate text-sm text-gray-600">
+          {i18n.searchNoResultsTitle}
+        </div>
+        <div className="truncate text-xs text-muted-foreground">
+          {i18n.searchNoResultsSubtitle}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function PickAnEmoji({ i18n }: PickAnEmojiPreviewProps) {
+  return (
+    <div className="flex items-center border-t border-gray-100 p-2">
+      <div className="flex items-center justify-center text-3xl">☝️</div>
+      <div className="overflow-hidden pl-2">
+        <div className="truncate text-lg text-muted-foreground">
+          {i18n.pick}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function EmojiPickerPreview({
+  emoji,
+  hasFound = true,
+  isSearching = false,
+  i18n,
+  ...props
+}: EmojiPickerPreviewProps) {
+  const showPickEmoji = !emoji && !(isSearching && !hasFound);
+  const showNoEmoji = isSearching && !hasFound;
+  const showPreview = emoji;
+
+  return (
+    <>
+      {showPreview && <EmojiPreview emoji={emoji} {...props} />}
+      {showPickEmoji && <PickAnEmoji i18n={i18n} {...props} />}
+      {showNoEmoji && <NoEmoji i18n={i18n} {...props} />}
+    </>
+  );
+}
diff --git a/src/components/plate-ui/emoji-picker-search-and-clear.tsx b/src/components/plate-ui/emoji-picker-search-and-clear.tsx
new file mode 100644
index 0000000..433e42c
--- /dev/null
+++ b/src/components/plate-ui/emoji-picker-search-and-clear.tsx
@@ -0,0 +1,40 @@
+import { UseEmojiPickerType } from '@udecode/plate-emoji';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+
+export type EmojiPickerSearchAndClearProps = Pick<
+  UseEmojiPickerType,
+  'i18n' | 'searchValue' | 'clearSearch'
+>;
+
+export function EmojiPickerSearchAndClear({
+  i18n,
+  searchValue,
+  clearSearch,
+}: EmojiPickerSearchAndClearProps) {
+  return (
+    <>
+      <span
+        className={cn(
+          'absolute left-2 top-1/2 z-10 flex h-5 w-5 -translate-y-1/2'
+        )}
+      >
+        <Icons.search />
+      </span>
+      {searchValue && (
+        <button
+          title={i18n.clear}
+          aria-label="Clear"
+          type="button"
+          className={cn(
+            'absolute right-0 top-1/2 flex h-8 w-8 -translate-y-1/2 cursor-pointer border-none bg-transparent'
+          )}
+          onClick={clearSearch}
+        >
+          <Icons.clear className="h-full w-full" />
+        </button>
+      )}
+    </>
+  );
+}
diff --git a/src/components/plate-ui/emoji-picker-search-bar.tsx b/src/components/plate-ui/emoji-picker-search-bar.tsx
new file mode 100644
index 0000000..1f2a153
--- /dev/null
+++ b/src/components/plate-ui/emoji-picker-search-bar.tsx
@@ -0,0 +1,30 @@
+import { UseEmojiPickerType } from '@udecode/plate-emoji';
+import { ReactNode } from 'react';
+
+export type EmojiPickerSearchBarProps = {
+  children: ReactNode;
+} & Pick<UseEmojiPickerType, 'i18n' | 'searchValue' | 'setSearch'>;
+
+export function EmojiPickerSearchBar({
+  i18n,
+  searchValue,
+  setSearch,
+  children,
+}: EmojiPickerSearchBarProps) {
+  return (
+    <div className="flex items-center px-2">
+      <div className="relative flex grow">
+        <input
+          type="text"
+          placeholder={i18n.search}
+          autoComplete="off"
+          aria-label="Search"
+          className="block w-full appearance-none rounded-lg border-0 bg-gray-100 px-8 py-2 outline-none"
+          onChange={(event) => setSearch(event.target.value)}
+          value={searchValue}
+        />
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/plate-ui/emoji-picker.tsx b/src/components/plate-ui/emoji-picker.tsx
new file mode 100644
index 0000000..daec8a3
--- /dev/null
+++ b/src/components/plate-ui/emoji-picker.tsx
@@ -0,0 +1,74 @@
+import { EmojiSettings, UseEmojiPickerType } from '@udecode/plate-emoji';
+
+import { cn } from '../../lib/utils';
+
+import { EmojiPickerContent } from './emoji-picker-content';
+import { EmojiPickerNavigation } from './emoji-picker-navigation';
+import { EmojiPickerPreview } from './emoji-picker-preview';
+import { EmojiPickerSearchAndClear } from './emoji-picker-search-and-clear';
+import { EmojiPickerSearchBar } from './emoji-picker-search-bar';
+
+export function EmojiPicker({
+  i18n,
+  searchValue,
+  setSearch,
+  clearSearch,
+  isSearching,
+  hasFound,
+  searchResult,
+  emoji,
+  onSelectEmoji,
+  onMouseOver,
+  emojiLibrary,
+  icons,
+  handleCategoryClick,
+  focusedCategory,
+  visibleCategories,
+  refs,
+  settings = EmojiSettings,
+}: UseEmojiPickerType) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col rounded bg-background',
+        'h-[350px] w-[316px] shadow-[rgb(15_15_15_/_5%)_0_0_0_1px,_rgb(15_15_15_/_10%)_0_3px_6px,_rgb(15_15_15_/_20%)_0_9px_24px]'
+      )}
+    >
+      <EmojiPickerNavigation
+        i18n={i18n}
+        emojiLibrary={emojiLibrary}
+        icons={icons}
+        focusedCategory={focusedCategory}
+        onClick={handleCategoryClick}
+      />
+      <EmojiPickerSearchBar
+        i18n={i18n}
+        setSearch={setSearch}
+        searchValue={searchValue}
+      >
+        <EmojiPickerSearchAndClear
+          i18n={i18n}
+          clearSearch={clearSearch}
+          searchValue={searchValue}
+        />
+      </EmojiPickerSearchBar>
+      <EmojiPickerContent
+        i18n={i18n}
+        emojiLibrary={emojiLibrary}
+        isSearching={isSearching}
+        searchResult={searchResult}
+        visibleCategories={visibleCategories}
+        settings={settings}
+        onSelectEmoji={onSelectEmoji}
+        onMouseOver={onMouseOver}
+        refs={refs}
+      />
+      <EmojiPickerPreview
+        i18n={i18n}
+        emoji={emoji}
+        hasFound={hasFound}
+        isSearching={isSearching}
+      />
+    </div>
+  );
+}
diff --git a/src/components/plate-ui/emoji-toolbar-dropdown.tsx b/src/components/plate-ui/emoji-toolbar-dropdown.tsx
new file mode 100644
index 0000000..cf51f9d
--- /dev/null
+++ b/src/components/plate-ui/emoji-toolbar-dropdown.tsx
@@ -0,0 +1,26 @@
+import * as Popover from '@radix-ui/react-popover';
+import { ReactNode } from 'react';
+
+type EmojiToolbarDropdownProps = {
+  control: ReactNode;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  children: ReactNode;
+};
+
+export function EmojiToolbarDropdown({
+  control,
+  isOpen,
+  setIsOpen,
+  children,
+}: EmojiToolbarDropdownProps) {
+  return (
+    <Popover.Root open={isOpen} onOpenChange={setIsOpen}>
+      <Popover.Trigger asChild>{control}</Popover.Trigger>
+
+      <Popover.Portal>
+        <Popover.Content className="z-[100]">{children}</Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
diff --git a/src/components/plate-ui/excalidraw-element.tsx b/src/components/plate-ui/excalidraw-element.tsx
new file mode 100644
index 0000000..bb93be4
--- /dev/null
+++ b/src/components/plate-ui/excalidraw-element.tsx
@@ -0,0 +1,29 @@
+import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';
+import {
+  TExcalidrawElement,
+  useExcalidrawElement,
+} from '@udecode/plate-excalidraw';
+
+export function ExcalidrawElement({
+  nodeProps,
+  ...props
+}: PlateElementProps<Value, TExcalidrawElement>) {
+  const { children, element } = props;
+
+  const { Excalidraw, excalidrawProps } = useExcalidrawElement({
+    element,
+  });
+
+  return (
+    <PlateElement {...props}>
+      <div contentEditable={false}>
+        <div className="h-[600px]">
+          {Excalidraw && (
+            <Excalidraw {...nodeProps} {...(excalidrawProps as any)} />
+          )}
+        </div>
+      </div>
+      {children}
+    </PlateElement>
+  );
+}
diff --git a/src/components/plate-ui/fixed-toolbar-buttons.tsx b/src/components/plate-ui/fixed-toolbar-buttons.tsx
new file mode 100644
index 0000000..cf0f05d
--- /dev/null
+++ b/src/components/plate-ui/fixed-toolbar-buttons.tsx
@@ -0,0 +1,123 @@
+import {
+  MARK_BOLD,
+  MARK_CODE,
+  MARK_ITALIC,
+  MARK_STRIKETHROUGH,
+  MARK_UNDERLINE,
+} from '@udecode/plate-basic-marks';
+import { useEditorReadOnly } from '@udecode/plate-common';
+import { MARK_BG_COLOR, MARK_COLOR } from '@udecode/plate-font';
+import { ListStyleType } from '@udecode/plate-indent-list';
+import { ELEMENT_IMAGE } from '@udecode/plate-media';
+
+import { AlignDropdownMenu } from './align-dropdown-menu';
+import { ColorDropdownMenu } from './color-dropdown-menu';
+import { CommentToolbarButton } from './comment-toolbar-button';
+import { EmojiDropdownMenu } from './emoji-dropdown-menu';
+import { Icons, iconVariants } from './icons';
+import { IndentListToolbarButton } from './indent-list-toolbar-button';
+import { IndentToolbarButton } from './indent-toolbar-button';
+import { LineHeightDropdownMenu } from './line-height-dropdown-menu';
+import { LinkToolbarButton } from './link-toolbar-button';
+import { MediaToolbarButton } from './media-toolbar-button';
+import { MoreDropdownMenu } from './more-dropdown-menu';
+import { OutdentToolbarButton } from './outdent-toolbar-button';
+import { TableDropdownMenu } from './table-dropdown-menu';
+
+import { InsertDropdownMenu } from './insert-dropdown-menu';
+import { MarkToolbarButton } from './mark-toolbar-button';
+import { ModeDropdownMenu } from './mode-dropdown-menu';
+import { ToolbarGroup } from './toolbar';
+import { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';
+
+export function FixedToolbarButtons() {
+  const readOnly = useEditorReadOnly();
+
+  return (
+    <div className="w-full overflow-hidden">
+      <div
+        className="flex flex-wrap"
+        style={{
+          transform: 'translateX(calc(-1px))',
+        }}
+      >
+        {!readOnly && (
+          <>
+            <ToolbarGroup noSeparator>
+              <InsertDropdownMenu />
+              <TurnIntoDropdownMenu />
+            </ToolbarGroup>
+
+            <ToolbarGroup>
+              <MarkToolbarButton tooltip="Bold (⌘+B)" nodeType={MARK_BOLD}>
+                <Icons.bold />
+              </MarkToolbarButton>
+              <MarkToolbarButton tooltip="Italic (⌘+I)" nodeType={MARK_ITALIC}>
+                <Icons.italic />
+              </MarkToolbarButton>
+              <MarkToolbarButton
+                tooltip="Underline (⌘+U)"
+                nodeType={MARK_UNDERLINE}
+              >
+                <Icons.underline />
+              </MarkToolbarButton>
+
+              <MarkToolbarButton
+                tooltip="Strikethrough (⌘+⇧+M)"
+                nodeType={MARK_STRIKETHROUGH}
+              >
+                <Icons.strikethrough />
+              </MarkToolbarButton>
+              <MarkToolbarButton tooltip="Code (⌘+E)" nodeType={MARK_CODE}>
+                <Icons.code />
+              </MarkToolbarButton>
+            </ToolbarGroup>
+
+            <ToolbarGroup>
+              <ColorDropdownMenu nodeType={MARK_COLOR} tooltip="Text Color">
+                <Icons.color className={iconVariants({ variant: 'toolbar' })} />
+              </ColorDropdownMenu>
+              <ColorDropdownMenu
+                nodeType={MARK_BG_COLOR}
+                tooltip="Highlight Color"
+              >
+                <Icons.bg className={iconVariants({ variant: 'toolbar' })} />
+              </ColorDropdownMenu>
+            </ToolbarGroup>
+
+            <ToolbarGroup>
+              <AlignDropdownMenu />
+
+              <LineHeightDropdownMenu />
+
+              <IndentListToolbarButton nodeType={ListStyleType.Disc} />
+              <IndentListToolbarButton nodeType={ListStyleType.Decimal} />
+
+              <OutdentToolbarButton />
+              <IndentToolbarButton />
+            </ToolbarGroup>
+
+            <ToolbarGroup>
+              <LinkToolbarButton />
+
+              <MediaToolbarButton nodeType={ELEMENT_IMAGE} />
+
+              <TableDropdownMenu />
+
+              <EmojiDropdownMenu />
+
+              <MoreDropdownMenu />
+            </ToolbarGroup>
+          </>
+        )}
+
+        <div className="grow" />
+
+        <ToolbarGroup noSeparator>
+          <CommentToolbarButton />
+          <ModeDropdownMenu />
+        </ToolbarGroup>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/plate-ui/fixed-toolbar.tsx b/src/components/plate-ui/fixed-toolbar.tsx
new file mode 100644
index 0000000..a2abcb6
--- /dev/null
+++ b/src/components/plate-ui/fixed-toolbar.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { cn } from '../../lib/utils';
+
+import { Toolbar, ToolbarProps } from './toolbar';
+
+const FixedToolbar = React.forwardRef<HTMLDivElement, ToolbarProps>(
+  ({ className, ...props }: ToolbarProps, ref) => {
+    return (
+      <Toolbar
+        ref={ref}
+        className={cn(
+          'supports-backdrop-blur:bg-background/60 sticky left-0 top-[57px] z-50 w-full justify-between overflow-x-auto rounded-t-lg border-b border-b-border bg-background/95 backdrop-blur',
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+FixedToolbar.displayName = 'FixedToolbar';
+
+export { FixedToolbar };
diff --git a/src/components/plate-ui/floating-toolbar-buttons.tsx b/src/components/plate-ui/floating-toolbar-buttons.tsx
new file mode 100644
index 0000000..fdc757f
--- /dev/null
+++ b/src/components/plate-ui/floating-toolbar-buttons.tsx
@@ -0,0 +1,58 @@
+import {
+  MARK_BOLD,
+  MARK_CODE,
+  MARK_ITALIC,
+  MARK_STRIKETHROUGH,
+  MARK_UNDERLINE,
+} from '@udecode/plate-basic-marks';
+import { useEditorReadOnly } from '@udecode/plate-common';
+
+import { CommentToolbarButton } from './comment-toolbar-button';
+import { Icons } from './icons';
+import { LinkToolbarButton } from './link-toolbar-button';
+
+import { MarkToolbarButton } from './mark-toolbar-button';
+import { MoreDropdownMenu } from './more-dropdown-menu';
+import { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';
+
+export function FloatingToolbarButtons() {
+  const readOnly = useEditorReadOnly();
+
+  return (
+    <>
+      {!readOnly && (
+        <>
+          <TurnIntoDropdownMenu />
+
+          <MarkToolbarButton nodeType={MARK_BOLD} tooltip="Bold (⌘+B)">
+            <Icons.bold />
+          </MarkToolbarButton>
+          <MarkToolbarButton nodeType={MARK_ITALIC} tooltip="Italic (⌘+I)">
+            <Icons.italic />
+          </MarkToolbarButton>
+          <MarkToolbarButton
+            nodeType={MARK_UNDERLINE}
+            tooltip="Underline (⌘+U)"
+          >
+            <Icons.underline />
+          </MarkToolbarButton>
+          <MarkToolbarButton
+            nodeType={MARK_STRIKETHROUGH}
+            tooltip="Strikethrough (⌘+⇧+M)"
+          >
+            <Icons.strikethrough />
+          </MarkToolbarButton>
+          <MarkToolbarButton nodeType={MARK_CODE} tooltip="Code (⌘+E)">
+            <Icons.code />
+          </MarkToolbarButton>
+
+          <LinkToolbarButton />
+        </>
+      )}
+
+      <CommentToolbarButton />
+
+      <MoreDropdownMenu />
+    </>
+  );
+}
diff --git a/src/components/plate-ui/floating-toolbar.tsx b/src/components/plate-ui/floating-toolbar.tsx
new file mode 100644
index 0000000..1f54572
--- /dev/null
+++ b/src/components/plate-ui/floating-toolbar.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+import React from 'react';
+import { PortalBody, useComposedRef } from '@udecode/plate-common';
+import {
+  flip,
+  FloatingToolbarState,
+  offset,
+  useFloatingToolbar,
+  useFloatingToolbarState,
+} from '@udecode/plate-floating';
+
+import { cn } from '../../lib/utils';
+
+import { Toolbar, ToolbarProps } from './toolbar';
+
+export interface FloatingToolbarProps extends ToolbarProps {
+  state?: FloatingToolbarState;
+}
+
+const FloatingToolbar = React.forwardRef<
+  React.ElementRef<typeof Toolbar>,
+  FloatingToolbarProps
+>(({ state, children, ...props }, componentRef) => {
+  const floatingToolbarState = useFloatingToolbarState({
+    ...state,
+    floatingOptions: {
+      placement: 'top',
+      middleware: [
+        offset(12),
+        flip({
+          padding: 12,
+          fallbackPlacements: [
+            'top-start',
+            'top-end',
+            'bottom-start',
+            'bottom-end',
+          ],
+        }),
+      ],
+      ...state?.floatingOptions,
+    },
+  });
+
+  const {
+    ref: floatingRef,
+    props: rootProps,
+    hidden,
+  } = useFloatingToolbar(floatingToolbarState);
+
+  const ref = useComposedRef<HTMLDivElement>(componentRef, floatingRef);
+
+  if (hidden) return null;
+
+  return (
+    <PortalBody>
+      <Toolbar
+        ref={ref}
+        className={cn(
+          'absolute z-50 whitespace-nowrap border bg-popover px-1 opacity-100 shadow-md print:hidden'
+        )}
+        {...rootProps}
+        {...props}
+      >
+        {children}
+      </Toolbar>
+    </PortalBody>
+  );
+});
+FloatingToolbar.displayName = 'FloatingToolbar';
+
+export { FloatingToolbar };
diff --git a/src/components/plate-ui/heading-element.tsx b/src/components/plate-ui/heading-element.tsx
new file mode 100644
index 0000000..c11a98d
--- /dev/null
+++ b/src/components/plate-ui/heading-element.tsx
@@ -0,0 +1,45 @@
+import { PlateElement, PlateElementProps } from '@udecode/plate-common';
+import { VariantProps, cva } from 'class-variance-authority';
+
+const headingVariants = cva('', {
+  variants: {
+    variant: {
+      h1: 'mb-1 mt-[2em] font-heading text-4xl font-bold',
+      h2: 'mb-px mt-[1.4em] font-heading text-2xl font-semibold tracking-tight',
+      h3: 'mb-px mt-[1em] font-heading text-xl font-semibold tracking-tight',
+      h4: 'mt-[0.75em] font-heading text-lg font-semibold tracking-tight',
+      h5: 'mt-[0.75em] text-lg font-semibold tracking-tight',
+      h6: 'mt-[0.75em] text-base font-semibold tracking-tight',
+    },
+    isFirstBlock: {
+      true: 'mt-0',
+      false: '',
+    },
+  },
+});
+
+export function HeadingElement({
+  className,
+  variant = 'h1',
+  isFirstBlock,
+  children,
+  ...props
+}: PlateElementProps & VariantProps<typeof headingVariants>) {
+  const { element, editor } = props;
+
+  const Element = variant!;
+
+  return (
+    <PlateElement
+      asChild
+      className={headingVariants({
+        variant,
+        className,
+        isFirstBlock: element === editor.children[0],
+      })}
+      {...props}
+    >
+      <Element>{children}</Element>
+    </PlateElement>
+  );
+}
diff --git a/src/components/plate-ui/highlight-leaf.tsx b/src/components/plate-ui/highlight-leaf.tsx
new file mode 100644
index 0000000..e13cd82
--- /dev/null
+++ b/src/components/plate-ui/highlight-leaf.tsx
@@ -0,0 +1,19 @@
+import { PlateLeaf, PlateLeafProps } from '@udecode/plate-common';
+
+import { cn } from '../../lib/utils';
+
+export function HighlightLeaf({
+  className,
+  children,
+  ...props
+}: PlateLeafProps) {
+  return (
+    <PlateLeaf
+      asChild
+      className={cn('bg-primary/20 text-inherit dark:bg-primary/40', className)}
+      {...props}
+    >
+      <mark>{children}</mark>
+    </PlateLeaf>
+  );
+}
diff --git a/src/components/plate-ui/hr-element.tsx b/src/components/plate-ui/hr-element.tsx
new file mode 100644
index 0000000..a5e89a8
--- /dev/null
+++ b/src/components/plate-ui/hr-element.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { PlateElement, PlateElementProps } from '@udecode/plate-common';
+import { useFocused, useSelected } from 'slate-react';
+
+import { cn } from '../../lib/utils';
+
+const HrElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ className, nodeProps, ...props }, ref) => {
+  const { children } = props;
+
+  const selected = useSelected();
+  const focused = useFocused();
+
+  return (
+    <PlateElement ref={ref} {...props}>
+      <div className="py-6" contentEditable={false}>
+        <hr
+          {...nodeProps}
+          className={cn(
+            'h-0.5 cursor-pointer rounded-sm border-none bg-muted bg-clip-content',
+            selected && focused && 'ring-2 ring-ring ring-offset-2',
+            className
+          )}
+        />
+      </div>
+      {children}
+    </PlateElement>
+  );
+});
+HrElement.displayName = 'HrElement';
+
+export { HrElement };
diff --git a/src/components/plate-ui/icons.tsx b/src/components/plate-ui/icons.tsx
new file mode 100644
index 0000000..9107f2d
--- /dev/null
+++ b/src/components/plate-ui/icons.tsx
@@ -0,0 +1,255 @@
+import { cva } from 'class-variance-authority';
+import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  Baseline,
+  Bold,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  ChevronsUpDown,
+  Code2,
+  Edit2,
+  ExternalLink,
+  Eye,
+  FileCode,
+  GripVertical,
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+  Heading5,
+  Heading6,
+  Image,
+  Indent,
+  Italic,
+  Keyboard,
+  Link2,
+  Link2Off,
+  List,
+  ListOrdered,
+  LucideProps,
+  MessageSquare,
+  MessageSquarePlus,
+  Minus,
+  Moon,
+  MoreHorizontal,
+  Outdent,
+  PaintBucket,
+  Pilcrow,
+  Plus,
+  Quote,
+  RectangleHorizontal,
+  RectangleVertical,
+  RotateCcw,
+  Search,
+  Settings,
+  Smile,
+  Strikethrough,
+  Subscript,
+  SunMedium,
+  Superscript,
+  Table,
+  Text,
+  Trash,
+  Twitter,
+  Underline,
+  WrapText,
+  X
+} from 'lucide-react';
+
+import type { LucideIcon } from 'lucide-react';
+
+export type Icon = LucideIcon;
+
+const borderAll = (props: LucideProps) => (
+  <svg
+    viewBox="0 0 24 24"
+    height="48"
+    width="48"
+    focusable="false"
+    role="img"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6zm10 13h5a1 1 0 0 0 1-1v-5h-6v6zm-2-6H5v5a1 1 0 0 0 1 1h5v-6zm2-2h6V6a1 1 0 0 0-1-1h-5v6zm-2-6H6a1 1 0 0 0-1 1v5h6V5z" />
+  </svg>
+);
+
+const borderBottom = (props: LucideProps) => (
+  <svg
+    viewBox="0 0 24 24"
+    height="48"
+    width="48"
+    focusable="false"
+    role="img"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M13 5a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zm-8 6a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm-2 7a1 1 0 1 1 2 0 1 1 0 0 0 1 1h12a1 1 0 0 0 1-1 1 1 0 1 1 2 0 3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm17-8a1 1 0 0 0-1 1v2a1 1 0 1 0 2 0v-2a1 1 0 0 0-1-1zM7 4a1 1 0 0 0-1-1 3 3 0 0 0-3 3 1 1 0 0 0 2 0 1 1 0 0 1 1-1 1 1 0 0 0 1-1zm11-1a1 1 0 1 0 0 2 1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3z" />
+  </svg>
+);
+
+const borderLeft = (props: LucideProps) => (
+  <svg
+    viewBox="0 0 24 24"
+    height="48"
+    width="48"
+    focusable="false"
+    role="img"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M6 21a1 1 0 1 0 0-2 1 1 0 0 1-1-1V6a1 1 0 0 1 1-1 1 1 0 0 0 0-2 3 3 0 0 0-3 3v12a3 3 0 0 0 3 3zm7-16a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zm6 6a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0v-2zm-5 9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zm4-17a1 1 0 1 0 0 2 1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3zm-1 17a1 1 0 0 0 1 1 3 3 0 0 0 3-3 1 1 0 1 0-2 0 1 1 0 0 1-1 1 1 1 0 0 0-1 1z" />
+  </svg>
+);
+
+const borderNone = (props: LucideProps) => (
+  <svg
+    viewBox="0 0 24 24"
+    height="48"
+    width="48"
+    focusable="false"
+    role="img"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M14 4a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zm-9 7a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm14 0a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0v-2zm-6 10a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zM7 4a1 1 0 0 0-1-1 3 3 0 0 0-3 3 1 1 0 0 0 2 0 1 1 0 0 1 1-1 1 1 0 0 0 1-1zm11-1a1 1 0 1 0 0 2 1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3zM7 20a1 1 0 0 1-1 1 3 3 0 0 1-3-3 1 1 0 1 1 2 0 1 1 0 0 0 1 1 1 1 0 0 1 1 1zm11 1a1 1 0 1 1 0-2 1 1 0 0 0 1-1 1 1 0 1 1 2 0 3 3 0 0 1-3 3z" />
+  </svg>
+);
+
+const borderRight = (props: LucideProps) => (
+  <svg
+    viewBox="0 0 24 24"
+    height="48"
+    width="48"
+    focusable="false"
+    role="img"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M13 5a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zm-8 6a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm9 9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zM6 3a1 1 0 0 1 0 2 1 1 0 0 0-1 1 1 1 0 0 1-2 0 3 3 0 0 1 3-3zm1 17a1 1 0 0 1-1 1 3 3 0 0 1-3-3 1 1 0 1 1 2 0 1 1 0 0 0 1 1 1 1 0 0 1 1 1zm11 1a1 1 0 1 1 0-2 1 1 0 0 0 1-1V6a1 1 0 0 0-1-1 1 1 0 1 1 0-2 3 3 0 0 1 3 3v12a3 3 0 0 1-3 3z" />
+  </svg>
+);
+
+const borderTop = (props: LucideProps) => (
+  <svg
+    viewBox="0 0 24 24"
+    height="48"
+    width="48"
+    focusable="false"
+    role="img"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M3 6a1 1 0 0 0 2 0 1 1 0 0 1 1-1h12a1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3zm2 5a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm14 0a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0v-2zm-5 9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zm-8 1a1 1 0 1 0 0-2 1 1 0 0 1-1-1 1 1 0 1 0-2 0 3 3 0 0 0 3 3zm11-1a1 1 0 0 0 1 1 3 3 0 0 0 3-3 1 1 0 1 0-2 0 1 1 0 0 1-1 1 1 1 0 0 0-1 1z" />
+  </svg>
+);
+
+export const Icons = {
+  add: Plus,
+  alignCenter: AlignCenter,
+  alignJustify: AlignJustify,
+  alignLeft: AlignLeft,
+  alignRight: AlignRight,
+  arrowDown: ChevronDown,
+  bg: PaintBucket,
+  blockquote: Quote,
+  bold: Bold,
+  borderAll,
+  borderBottom,
+  borderLeft,
+  borderNone,
+  borderRight,
+  borderTop,
+  check: Check,
+  chevronRight: ChevronRight,
+  chevronsUpDown: ChevronsUpDown,
+  clear: X,
+  close: X,
+  code: Code2,
+  codeblock: FileCode,
+  color: Baseline,
+  column: RectangleVertical,
+  comment: MessageSquare,
+  commentAdd: MessageSquarePlus,
+  delete: Trash,
+  dragHandle: GripVertical,
+  editing: Edit2,
+  emoji: Smile,
+  externalLink: ExternalLink,
+  h1: Heading1,
+  h2: Heading2,
+  h3: Heading3,
+  h4: Heading4,
+  h5: Heading5,
+  h6: Heading6,
+  image: Image,
+  indent: Indent,
+  italic: Italic,
+  kbd: Keyboard,
+  lineHeight: WrapText,
+  link: Link2,
+  minus: Minus,
+  more: MoreHorizontal,
+  ol: ListOrdered,
+  outdent: Outdent,
+  paragraph: Pilcrow,
+  refresh: RotateCcw,
+  row: RectangleHorizontal,
+  search: Search,
+  settings: Settings,
+  strikethrough: Strikethrough,
+  subscript: Subscript,
+  superscript: Superscript,
+  table: Table,
+  text: Text,
+  trash: Trash,
+  ul: List,
+  underline: Underline,
+  unlink: Link2Off,
+  viewing: Eye,
+
+  // www
+  gitHub: (props: LucideProps) => (
+    <svg viewBox="0 0 438.549 438.549" {...props}>
+      <path
+        fill="currentColor"
+        d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+      ></path>
+    </svg>
+  ),
+  logo: (props: LucideProps) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M11.572 0c-.176 0-.31.001-.358.007a19.76 19.76 0 0 1-.364.033C7.443.346 4.25 2.185 2.228 5.012a11.875 11.875 0 0 0-2.119 5.243c-.096.659-.108.854-.108 1.747s.012 1.089.108 1.748c.652 4.506 3.86 8.292 8.209 9.695.779.25 1.6.422 2.534.525.363.04 1.935.04 2.299 0 1.611-.178 2.977-.577 4.323-1.264.207-.106.247-.134.219-.158-.02-.013-.9-1.193-1.955-2.62l-1.919-2.592-2.404-3.558a338.739 338.739 0 0 0-2.422-3.556c-.009-.002-.018 1.579-.023 3.51-.007 3.38-.01 3.515-.052 3.595a.426.426 0 0 1-.206.214c-.075.037-.14.044-.495.044H7.81l-.108-.068a.438.438 0 0 1-.157-.171l-.05-.106.006-4.703.007-4.705.072-.092a.645.645 0 0 1 .174-.143c.096-.047.134-.051.54-.051.478 0 .558.018.682.154.035.038 1.337 1.999 2.895 4.361a10760.433 10760.433 0 0 0 4.735 7.17l1.9 2.879.096-.063a12.317 12.317 0 0 0 2.466-2.163 11.944 11.944 0 0 0 2.824-6.134c.096-.66.108-.854.108-1.748 0-.893-.012-1.088-.108-1.747-.652-4.506-3.859-8.292-8.208-9.695a12.597 12.597 0 0 0-2.499-.523A33.119 33.119 0 0 0 11.573 0zm4.069 7.217c.347 0 .408.005.486.047a.473.473 0 0 1 .237.277c.018.06.023 1.365.018 4.304l-.006 4.218-.744-1.14-.746-1.14v-3.066c0-1.982.01-3.097.023-3.15a.478.478 0 0 1 .233-.296c.096-.05.13-.054.5-.054z"
+      />
+    </svg>
+  ),
+  moon: Moon,
+  sun: SunMedium,
+  twitter: Twitter,
+};
+
+export const iconVariants = cva('', {
+  variants: {
+    variant: {
+      toolbar: 'h-5 w-5',
+      menuItem: 'mr-2 h-5 w-5',
+    },
+    size: {
+      sm: 'mr-2 h-4 w-4',
+      md: 'mr-2 h-6 w-6',
+    },
+  },
+  defaultVariants: {},
+});
diff --git a/src/components/plate-ui/image-element.tsx b/src/components/plate-ui/image-element.tsx
new file mode 100644
index 0000000..6875734
--- /dev/null
+++ b/src/components/plate-ui/image-element.tsx
@@ -0,0 +1,71 @@
+import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';
+import {
+  ELEMENT_IMAGE,
+  Image,
+  TImageElement,
+  useMediaState,
+} from '@udecode/plate-media';
+import { useResizableStore } from '@udecode/plate-resizable';
+
+import { cn } from '../../lib/utils';
+
+import { Caption, CaptionTextarea } from './caption';
+import { MediaPopover } from './media-popover';
+import {
+  Resizable,
+  ResizeHandle,
+  mediaResizeHandleVariants,
+} from './resizable';
+
+export function ImageElement({
+  className,
+  children,
+  nodeProps,
+  ...props
+}: PlateElementProps<Value, TImageElement>) {
+  const { readOnly, focused, selected, align = 'center' } = useMediaState();
+  const width = useResizableStore().get.width();
+
+  return (
+    <MediaPopover pluginKey={ELEMENT_IMAGE}>
+      <PlateElement className={cn('py-2.5', className)} {...props}>
+        <figure className="group relative m-0" contentEditable={false}>
+          <Resizable
+            align={align}
+            options={{
+              align,
+              readOnly,
+            }}
+          >
+            <ResizeHandle
+              options={{ direction: 'left' }}
+              className={mediaResizeHandleVariants({ direction: 'left' })}
+            />
+            <Image
+              className={cn(
+                'block w-full max-w-full cursor-pointer object-cover px-0',
+                'rounded-sm',
+                focused && selected && 'ring-2 ring-ring ring-offset-2'
+              )}
+              alt=""
+              {...nodeProps}
+            />
+            <ResizeHandle
+              options={{ direction: 'right' }}
+              className={mediaResizeHandleVariants({ direction: 'right' })}
+            />
+          </Resizable>
+
+          <Caption align={align} style={{ width }}>
+            <CaptionTextarea
+              placeholder="Write a caption..."
+              readOnly={readOnly}
+            />
+          </Caption>
+        </figure>
+
+        {children}
+      </PlateElement>
+    </MediaPopover>
+  );
+}
diff --git a/src/components/plate-ui/indent-list-toolbar-button.tsx b/src/components/plate-ui/indent-list-toolbar-button.tsx
new file mode 100644
index 0000000..b5afa93
--- /dev/null
+++ b/src/components/plate-ui/indent-list-toolbar-button.tsx
@@ -0,0 +1,27 @@
+import {
+  ListStyleType,
+  useIndentListToolbarButton,
+  useIndentListToolbarButtonState,
+} from '@udecode/plate-indent-list';
+
+import { Icons } from './icons';
+
+import { ToolbarButton, ToolbarButtonProps } from './toolbar';
+
+export function IndentListToolbarButton({
+  nodeType = ListStyleType.Disc,
+}: ToolbarButtonProps & { nodeType?: ListStyleType }) {
+  const state = useIndentListToolbarButtonState({ nodeType });
+  const { props } = useIndentListToolbarButton(state);
+
+  return (
+    <ToolbarButton
+      tooltip={
+        nodeType === ListStyleType.Disc ? 'Bulleted List' : 'Numbered List'
+      }
+      {...props}
+    >
+      {nodeType === ListStyleType.Disc ? <Icons.ul /> : <Icons.ol />}
+    </ToolbarButton>
+  );
+}
diff --git a/src/components/plate-ui/indent-toolbar-button.tsx b/src/components/plate-ui/indent-toolbar-button.tsx
new file mode 100644
index 0000000..74e705f
--- /dev/null
+++ b/src/components/plate-ui/indent-toolbar-button.tsx
@@ -0,0 +1,15 @@
+import { useIndentButton } from '@udecode/plate-indent';
+
+import { Icons } from './icons';
+
+import { ToolbarButton } from './toolbar';
+
+export function IndentToolbarButton() {
+  const { props } = useIndentButton();
+
+  return (
+    <ToolbarButton tooltip="Indent" {...props}>
+      <Icons.indent />
+    </ToolbarButton>
+  );
+}
diff --git a/src/components/plate-ui/input.tsx b/src/components/plate-ui/input.tsx
new file mode 100644
index 0000000..ee5ff92
--- /dev/null
+++ b/src/components/plate-ui/input.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+export const inputVariants = cva(
+  'flex w-full rounded-md bg-transparent text-sm file:border-0 file:bg-background file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default:
+          'border border-input ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        ghost: 'border-none focus-visible:ring-transparent',
+      },
+      h: {
+        sm: 'h-9 px-3 py-2',
+        md: 'h-10 px-3 py-2',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      h: 'md',
+    },
+  }
+);
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    VariantProps<typeof inputVariants> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, variant, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(inputVariants({ variant }), className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/src/components/plate-ui/insert-dropdown-menu.tsx b/src/components/plate-ui/insert-dropdown-menu.tsx
new file mode 100644
index 0000000..31e7c97
--- /dev/null
+++ b/src/components/plate-ui/insert-dropdown-menu.tsx
@@ -0,0 +1,222 @@
+'use client';
+
+import React from 'react';
+import { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+import { ELEMENT_BLOCKQUOTE } from '@udecode/plate-block-quote';
+import {
+  focusEditor,
+  insertEmptyElement,
+  useEditorState,
+} from '@udecode/plate-common';
+import { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3 } from '@udecode/plate-heading';
+import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
+
+import { Icons } from './icons';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  useOpenState,
+} from './dropdown-menu';
+import { ToolbarButton } from './toolbar';
+
+const items = [
+  {
+    label: 'Basic blocks',
+    items: [
+      {
+        value: ELEMENT_PARAGRAPH,
+        label: 'Paragraph',
+        description: 'Paragraph',
+        icon: Icons.paragraph,
+      },
+      {
+        value: ELEMENT_H1,
+        label: 'Heading 1',
+        description: 'Heading 1',
+        icon: Icons.h1,
+      },
+      {
+        value: ELEMENT_H2,
+        label: 'Heading 2',
+        description: 'Heading 2',
+        icon: Icons.h2,
+      },
+      {
+        value: ELEMENT_H3,
+        label: 'Heading 3',
+        description: 'Heading 3',
+        icon: Icons.h3,
+      },
+      {
+        value: ELEMENT_BLOCKQUOTE,
+        label: 'Quote',
+        description: 'Quote (⌘+⇧+.)',
+        icon: Icons.blockquote,
+      },
+      // {
+      //   value: ELEMENT_TABLE,
+      //   label: 'Table',
+      //   description: 'Table',
+      //   icon: Icons.table,
+      // },
+      // {
+      //   value: 'ul',
+      //   label: 'Bulleted list',
+      //   description: 'Bulleted list',
+      //   icon: Icons.ul,
+      // },
+      // {
+      //   value: 'ol',
+      //   label: 'Numbered list',
+      //   description: 'Numbered list',
+      //   icon: Icons.ol,
+      // },
+      // {
+      //   value: ELEMENT_HR,
+      //   label: 'Divider',
+      //   description: 'Divider (---)',
+      //   icon: Icons.hr,
+      // },
+    ],
+  },
+  // {
+  //   label: 'Media',
+  //   items: [
+  //     {
+  //       value: ELEMENT_CODE_BLOCK,
+  //       label: 'Code',
+  //       description: 'Code (```)',
+  //       icon: Icons.codeblock,
+  //     },
+  //     {
+  //       value: ELEMENT_IMAGE,
+  //       label: 'Image',
+  //       description: 'Image',
+  //       icon: Icons.image,
+  //     },
+  //     {
+  //       value: ELEMENT_MEDIA_EMBED,
+  //       label: 'Embed',
+  //       description: 'Embed',
+  //       icon: Icons.embed,
+  //     },
+  //     {
+  //       value: ELEMENT_EXCALIDRAW,
+  //       label: 'Excalidraw',
+  //       description: 'Excalidraw',
+  //       icon: Icons.excalidraw,
+  //     },
+  //   ],
+  // },
+  // {
+  //   label: 'Inline',
+  //   items: [
+  //     {
+  //       value: ELEMENT_LINK,
+  //       label: 'Link',
+  //       description: 'Link',
+  //       icon: Icons.link,
+  //     },
+  //   ],
+  // },
+];
+
+export function InsertDropdownMenu(props: DropdownMenuProps) {
+  const editor = useEditorState();
+  const openState = useOpenState();
+
+  return (
+    <DropdownMenu modal={false} {...openState} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton pressed={openState.open} tooltip="Insert" isDropdown>
+          <Icons.add />
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        align="start"
+        className="flex max-h-[500px] min-w-0 flex-col gap-0.5 overflow-y-auto"
+      >
+        {items.map(({ items: nestedItems, label }, index) => (
+          <React.Fragment key={label}>
+            {index !== 0 && <DropdownMenuSeparator />}
+
+            <DropdownMenuLabel>{label}</DropdownMenuLabel>
+            {nestedItems.map(
+              ({ value: type, label: itemLabel, icon: Icon }) => (
+                <DropdownMenuItem
+                  key={type}
+                  className="min-w-[180px]"
+                  onSelect={async () => {
+                    switch (type) {
+                      // case ELEMENT_CODE_BLOCK: {
+                      //   insertEmptyCodeBlock(editor);
+                      //
+                      //   break;
+                      // }
+                      // case ELEMENT_IMAGE: {
+                      //   await insertMedia(editor, { type: ELEMENT_IMAGE });
+                      //
+                      //   break;
+                      // }
+                      // case ELEMENT_MEDIA_EMBED: {
+                      //   await insertMedia(editor, {
+                      //     type: ELEMENT_MEDIA_EMBED,
+                      //   });
+                      //
+                      //   break;
+                      // }
+                      // case 'ul':
+                      // case 'ol': {
+                      //   insertEmptyElement(editor, ELEMENT_PARAGRAPH, {
+                      //     select: true,
+                      //     nextBlock: true,
+                      //   });
+                      //
+                      //   if (settingsStore.get.checkedId(KEY_LIST_STYLE_TYPE)) {
+                      //     toggleIndentList(editor, {
+                      //       listStyleType: type === 'ul' ? 'disc' : 'decimal',
+                      //     });
+                      //   } else if (settingsStore.get.checkedId('list')) {
+                      //     toggleList(editor, { type });
+                      //   }
+                      //
+                      //   break;
+                      // }
+                      // case ELEMENT_TABLE: {
+                      //   insertTable(editor);
+                      //
+                      //   break;
+                      // }
+                      // case ELEMENT_LINK: {
+                      //   triggerFloatingLink(editor, { focused: true });
+                      //
+                      //   break;
+                      // }
+                      default: {
+                        insertEmptyElement(editor, type, {
+                          select: true,
+                          nextBlock: true,
+                        });
+                      }
+                    }
+
+                    focusEditor(editor);
+                  }}
+                >
+                  <Icon className="mr-2 h-5 w-5" />
+                  {itemLabel}
+                </DropdownMenuItem>
+              )
+            )}
+          </React.Fragment>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/plate-ui/kbd-leaf.tsx b/src/components/plate-ui/kbd-leaf.tsx
new file mode 100644
index 0000000..4027fde
--- /dev/null
+++ b/src/components/plate-ui/kbd-leaf.tsx
@@ -0,0 +1,18 @@
+import { PlateLeaf, PlateLeafProps } from '@udecode/plate-common';
+
+import { cn } from '../../lib/utils';
+
+export function KbdLeaf({ className, children, ...props }: PlateLeafProps) {
+  return (
+    <PlateLeaf
+      asChild
+      className={cn(
+        'rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-sm shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(248,_249,_250)_0px_1px_5px_0px_inset,_rgb(193,_200,_205)_0px_0px_0px_0.5px,_rgb(193,_200,_205)_0px_2px_1px_-1px,_rgb(193,_200,_205)_0px_1px_0px_0px] dark:shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(26,_29,_30)_0px_1px_5px_0px_inset,_rgb(76,_81,_85)_0px_0px_0px_0.5px,_rgb(76,_81,_85)_0px_2px_1px_-1px,_rgb(76,_81,_85)_0px_1px_0px_0px]',
+        className
+      )}
+      {...props}
+    >
+      <kbd>{children}</kbd>
+    </PlateLeaf>
+  );
+}
diff --git a/src/components/plate-ui/line-height-dropdown-menu.tsx b/src/components/plate-ui/line-height-dropdown-menu.tsx
new file mode 100644
index 0000000..8ac7751
--- /dev/null
+++ b/src/components/plate-ui/line-height-dropdown-menu.tsx
@@ -0,0 +1,54 @@
+import { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+import {
+  useLineHeightDropdownMenu,
+  useLineHeightDropdownMenuState,
+} from '@udecode/plate-line-height';
+
+import { Icons } from './icons';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  useOpenState,
+} from './dropdown-menu';
+import { ToolbarButton } from './toolbar';
+
+export function LineHeightDropdownMenu({ ...props }: DropdownMenuProps) {
+  const openState = useOpenState();
+  const state = useLineHeightDropdownMenuState();
+  const { radioGroupProps } = useLineHeightDropdownMenu(state);
+
+  return (
+    <DropdownMenu modal={false} {...openState} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton
+          pressed={openState.open}
+          tooltip="Line height"
+          isDropdown
+        >
+          <Icons.lineHeight />
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="start" className="min-w-0">
+        <DropdownMenuRadioGroup
+          className="flex flex-col gap-0.5"
+          {...radioGroupProps}
+        >
+          {state.values.map((_value) => (
+            <DropdownMenuRadioItem
+              key={_value}
+              value={_value}
+              className="min-w-[180px]"
+            >
+              {_value}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/plate-ui/link-element.tsx b/src/components/plate-ui/link-element.tsx
new file mode 100644
index 0000000..00acc10
--- /dev/null
+++ b/src/components/plate-ui/link-element.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';
+import { TLinkElement, useLink } from '@udecode/plate-link';
+
+import { cn } from '../../lib/utils';
+
+const LinkElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps<Value, TLinkElement>
+>(({ className, children, ...props }, ref) => {
+  const { props: linkProps } = useLink({ element: props.element });
+
+  return (
+    <PlateElement
+      asChild
+      ref={ref}
+      className={cn(
+        'font-medium text-primary underline decoration-primary underline-offset-4',
+        className
+      )}
+      {...linkProps}
+      {...(props as any)}
+    >
+      <a>{children}</a>
+    </PlateElement>
+  );
+});
+LinkElement.displayName = 'LinkElement';
+
+export { LinkElement };
diff --git a/src/components/plate-ui/link-floating-toolbar.tsx b/src/components/plate-ui/link-floating-toolbar.tsx
new file mode 100644
index 0000000..a42edf8
--- /dev/null
+++ b/src/components/plate-ui/link-floating-toolbar.tsx
@@ -0,0 +1,157 @@
+'use client';
+
+import {
+  flip,
+  offset,
+  UseVirtualFloatingOptions,
+} from '@udecode/plate-floating';
+import {
+  FloatingLinkUrlInput,
+  LinkFloatingToolbarState,
+  LinkOpenButton,
+  useFloatingLinkEdit,
+  useFloatingLinkEditState,
+  useFloatingLinkInsert,
+  useFloatingLinkInsertState,
+} from '@udecode/plate-link';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+
+import { buttonVariants } from './button';
+import { inputVariants } from './input';
+import { popoverVariants } from './popover';
+import { Separator } from './separator';
+
+const floatingOptions: UseVirtualFloatingOptions = {
+  placement: 'bottom-start',
+  middleware: [
+    offset(12),
+    flip({
+      padding: 12,
+      fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],
+    }),
+  ],
+};
+
+export interface LinkFloatingToolbarProps {
+  state?: LinkFloatingToolbarState;
+}
+
+export function LinkFloatingToolbar({ state }: LinkFloatingToolbarProps) {
+  const insertState = useFloatingLinkInsertState({
+    ...state,
+    floatingOptions: {
+      ...floatingOptions,
+      ...state?.floatingOptions,
+    },
+  });
+  const {
+    props: insertProps,
+    ref: insertRef,
+    hidden,
+    textInputProps,
+  } = useFloatingLinkInsert(insertState);
+
+  const editState = useFloatingLinkEditState({
+    ...state,
+    floatingOptions: {
+      ...floatingOptions,
+      ...state?.floatingOptions,
+    },
+  });
+  const {
+    props: editProps,
+    ref: editRef,
+    editButtonProps,
+    unlinkButtonProps,
+  } = useFloatingLinkEdit(editState);
+
+  if (hidden) return null;
+
+  const input = (
+    <div className="flex w-[330px] flex-col">
+      <div className="flex items-center">
+        <div className="flex items-center pl-3 text-muted-foreground">
+          <Icons.link className="h-4 w-4" />
+        </div>
+
+        <FloatingLinkUrlInput
+          className={inputVariants({ variant: 'ghost', h: 'sm' })}
+          placeholder="Paste link"
+        />
+      </div>
+
+      <Separator />
+
+      <div className="flex items-center">
+        <div className="flex items-center pl-3 text-muted-foreground">
+          <Icons.text className="h-4 w-4" />
+        </div>
+        <input
+          className={inputVariants({ variant: 'ghost', h: 'sm' })}
+          placeholder="Text to display"
+          {...textInputProps}
+        />
+      </div>
+    </div>
+  );
+
+  const editContent = editState.isEditing ? (
+    input
+  ) : (
+    <div className="box-content flex h-9 items-center gap-1">
+      <button
+        type="button"
+        className={buttonVariants({ variant: 'ghost', size: 'sm' })}
+        {...editButtonProps}
+      >
+        Edit link
+      </button>
+
+      <Separator orientation="vertical" />
+
+      <LinkOpenButton
+        className={buttonVariants({
+          variant: 'ghost',
+          size: 'sms',
+        })}
+      >
+        <Icons.externalLink width={18} />
+      </LinkOpenButton>
+
+      <Separator orientation="vertical" />
+
+      <button
+        type="button"
+        className={buttonVariants({
+          variant: 'ghost',
+          size: 'sms',
+        })}
+        {...unlinkButtonProps}
+      >
+        <Icons.unlink width={18} />
+      </button>
+    </div>
+  );
+
+  return (
+    <>
+      <div
+        ref={insertRef}
+        className={cn(popoverVariants(), 'w-auto p-1')}
+        {...insertProps}
+      >
+        {input}
+      </div>
+
+      <div
+        ref={editRef}
+        className={cn(popoverVariants(), 'w-auto p-1')}
+        {...editProps}
+      >
+        {editContent}
+      </div>
+    </>
+  );
+}
diff --git a/src/components/plate-ui/link-toolbar-button.tsx b/src/components/plate-ui/link-toolbar-button.tsx
new file mode 100644
index 0000000..afa9fcb
--- /dev/null
+++ b/src/components/plate-ui/link-toolbar-button.tsx
@@ -0,0 +1,19 @@
+import {
+  useLinkToolbarButton,
+  useLinkToolbarButtonState,
+} from '@udecode/plate-link';
+
+import { Icons } from './icons';
+
+import { ToolbarButton } from './toolbar';
+
+export function LinkToolbarButton() {
+  const state = useLinkToolbarButtonState();
+  const { props } = useLinkToolbarButton(state);
+
+  return (
+    <ToolbarButton tooltip="Link" {...props}>
+      <Icons.link />
+    </ToolbarButton>
+  );
+}
diff --git a/src/components/plate-ui/list-element.tsx b/src/components/plate-ui/list-element.tsx
new file mode 100644
index 0000000..b9799a2
--- /dev/null
+++ b/src/components/plate-ui/list-element.tsx
@@ -0,0 +1,32 @@
+import { PlateElement, PlateElementProps } from '@udecode/plate-common';
+import { VariantProps, cva } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const listVariants = cva('m-0 ps-6', {
+  variants: {
+    variant: {
+      ul: 'list-disc [&_ul]:list-[circle] [&_ul_ul]:list-[square]',
+      ol: 'list-decimal',
+    },
+  },
+});
+
+export function ListElement({
+  className,
+  children,
+  variant = 'ul',
+  ...props
+}: PlateElementProps & VariantProps<typeof listVariants>) {
+  const Element = variant!;
+
+  return (
+    <PlateElement
+      asChild
+      className={cn(listVariants({ variant }), className)}
+      {...props}
+    >
+      <Element>{children}</Element>
+    </PlateElement>
+  );
+}
diff --git a/src/components/plate-ui/list-toolbar-button.tsx b/src/components/plate-ui/list-toolbar-button.tsx
new file mode 100644
index 0000000..208866c
--- /dev/null
+++ b/src/components/plate-ui/list-toolbar-button.tsx
@@ -0,0 +1,27 @@
+import {
+  ELEMENT_UL,
+  useListToolbarButton,
+  useListToolbarButtonState,
+} from '@udecode/plate-list';
+
+import { Icons } from './icons';
+
+import { ToolbarButton } from './toolbar';
+
+export function ListToolbarButton({
+  nodeType = ELEMENT_UL,
+}: {
+  nodeType?: string;
+}) {
+  const state = useListToolbarButtonState({ nodeType });
+  const { props } = useListToolbarButton(state);
+
+  return (
+    <ToolbarButton
+      tooltip={nodeType === ELEMENT_UL ? 'Bulleted List' : 'Numbered List'}
+      {...props}
+    >
+      {nodeType === ELEMENT_UL ? <Icons.ul /> : <Icons.ol />}
+    </ToolbarButton>
+  );
+}
diff --git a/src/components/plate-ui/mark-toolbar-button.tsx b/src/components/plate-ui/mark-toolbar-button.tsx
new file mode 100644
index 0000000..381e11f
--- /dev/null
+++ b/src/components/plate-ui/mark-toolbar-button.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import {
+  useMarkToolbarButton,
+  useMarkToolbarButtonState,
+} from '@udecode/plate-common';
+
+import { ToolbarButton, ToolbarButtonProps } from './toolbar';
+
+export interface MarkToolbarButtonProps
+  extends Pick<ToolbarButtonProps, 'tooltip' | 'children'> {
+  nodeType: string;
+  clear?: string | string[];
+}
+
+/**
+ * Toolbar button to toggle the mark of the leaves in selection.
+ */
+export function MarkToolbarButton({
+  clear,
+  nodeType,
+  ...props
+}: MarkToolbarButtonProps) {
+  const state = useMarkToolbarButtonState({ clear, nodeType });
+  const { props: buttonProps } = useMarkToolbarButton(state);
+
+  return <ToolbarButton {...buttonProps} {...props} />;
+}
diff --git a/src/components/plate-ui/media-embed-element.tsx b/src/components/plate-ui/media-embed-element.tsx
new file mode 100644
index 0000000..3159515
--- /dev/null
+++ b/src/components/plate-ui/media-embed-element.tsx
@@ -0,0 +1,141 @@
+import React from 'react';
+import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';
+import {
+  ELEMENT_MEDIA_EMBED,
+  parseTwitterUrl,
+  parseVideoUrl,
+  TMediaEmbedElement,
+  useMediaState,
+} from '@udecode/plate-media';
+import { useResizableStore } from '@udecode/plate-resizable';
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import { Tweet } from 'react-tweet';
+
+import { cn } from '../../lib/utils';
+
+import { Caption, CaptionTextarea } from './caption';
+import { MediaPopover } from './media-popover';
+import {
+  mediaResizeHandleVariants,
+  Resizable,
+  ResizeHandle,
+} from './resizable';
+
+const MediaEmbedElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps<Value, TMediaEmbedElement>
+>(({ className, children, ...props }, ref) => {
+  const {
+    align = 'center',
+    focused,
+    readOnly,
+    selected,
+    embed,
+    isTweet,
+    isVideo,
+    isYoutube,
+  } = useMediaState({
+    urlParsers: [parseTwitterUrl, parseVideoUrl],
+  });
+  const width = useResizableStore().get.width();
+  const provider = embed?.provider;
+
+  return (
+    <MediaPopover pluginKey={ELEMENT_MEDIA_EMBED}>
+      <PlateElement
+        ref={ref}
+        className={cn('relative py-2.5', className)}
+        {...props}
+      >
+        <figure className="group relative m-0 w-full" contentEditable={false}>
+          <Resizable
+            align={align}
+            options={{
+              align,
+              maxWidth: isTweet ? 550 : '100%',
+              minWidth: isTweet ? 300 : 100,
+            }}
+          >
+            <ResizeHandle
+              options={{ direction: 'left' }}
+              className={mediaResizeHandleVariants({ direction: 'left' })}
+            />
+
+            {isVideo ? (
+              isYoutube ? (
+                <LiteYouTubeEmbed
+                  id={embed!.id!}
+                  title="youtube"
+                  wrapperClass={cn(
+                    'rounded-sm',
+                    focused && selected && 'ring-2 ring-ring ring-offset-2',
+                    'relative block cursor-pointer bg-black bg-cover bg-center [contain:content]',
+                    '[&.lyt-activated]:before:absolute [&.lyt-activated]:before:top-0 [&.lyt-activated]:before:h-[60px] [&.lyt-activated]:before:w-full [&.lyt-activated]:before:bg-top [&.lyt-activated]:before:bg-repeat-x [&.lyt-activated]:before:pb-[50px] [&.lyt-activated]:before:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]',
+                    '[&.lyt-activated]:before:bg-[url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==)]',
+                    'after:block after:pb-[var(--aspect-ratio)] after:content-[""]',
+                    '[&_>_iframe]:absolute [&_>_iframe]:left-0 [&_>_iframe]:top-0 [&_>_iframe]:h-full [&_>_iframe]:w-full',
+                    '[&_>_.lty-playbtn]:z-[1] [&_>_.lty-playbtn]:h-[46px] [&_>_.lty-playbtn]:w-[70px] [&_>_.lty-playbtn]:rounded-[14%] [&_>_.lty-playbtn]:bg-[#212121] [&_>_.lty-playbtn]:opacity-80 [&_>_.lty-playbtn]:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]',
+                    '[&:hover_>_.lty-playbtn]:bg-[red] [&:hover_>_.lty-playbtn]:opacity-100',
+                    '[&_>_.lty-playbtn]:before:border-y-[11px] [&_>_.lty-playbtn]:before:border-l-[19px] [&_>_.lty-playbtn]:before:border-r-0 [&_>_.lty-playbtn]:before:border-[transparent_transparent_transparent_#fff] [&_>_.lty-playbtn]:before:content-[""]',
+                    '[&_>_.lty-playbtn]:absolute [&_>_.lty-playbtn]:left-1/2 [&_>_.lty-playbtn]:top-1/2 [&_>_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]',
+                    '[&_>_.lty-playbtn]:before:absolute [&_>_.lty-playbtn]:before:left-1/2 [&_>_.lty-playbtn]:before:top-1/2 [&_>_.lty-playbtn]:before:[transform:translate3d(-50%,-50%,0)]',
+                    '[&.lyt-activated]:cursor-[unset]',
+                    '[&.lyt-activated]:before:pointer-events-none [&.lyt-activated]:before:opacity-0',
+                    '[&.lyt-activated_>_.lty-playbtn]:pointer-events-none [&.lyt-activated_>_.lty-playbtn]:!opacity-0'
+                  )}
+                />
+              ) : (
+                <div
+                  className={cn(
+                    provider === 'vimeo' && 'pb-[75%]',
+                    provider === 'youku' && 'pb-[56.25%]',
+                    provider === 'dailymotion' && 'pb-[56.0417%]',
+                    provider === 'coub' && 'pb-[51.25%]'
+                  )}
+                >
+                  <iframe
+                    className={cn(
+                      'absolute left-0 top-0 h-full w-full rounded-sm',
+                      isVideo && 'border-0',
+                      focused && selected && 'ring-2 ring-ring ring-offset-2'
+                    )}
+                    src={embed!.url}
+                    title="embed"
+                    allowFullScreen
+                  />
+                </div>
+              )
+            ) : null}
+
+            {isTweet && (
+              <div
+                className={cn(
+                  '[&_.react-tweet-theme]:my-0',
+                  !readOnly &&
+                    selected &&
+                    '[&_.react-tweet-theme]:ring-2 [&_.react-tweet-theme]:ring-ring [&_.react-tweet-theme]:ring-offset-2'
+                )}
+              >
+                <Tweet id={embed!.id!} />
+              </div>
+            )}
+
+            <ResizeHandle
+              options={{ direction: 'right' }}
+              className={mediaResizeHandleVariants({ direction: 'right' })}
+            />
+          </Resizable>
+
+          <Caption align={align} style={{ width }}>
+            <CaptionTextarea placeholder="Write a caption..." />
+          </Caption>
+        </figure>
+
+        {children}
+      </PlateElement>
+    </MediaPopover>
+  );
+});
+MediaEmbedElement.displayName = 'MediaEmbedElement';
+
+export { MediaEmbedElement };
diff --git a/src/components/plate-ui/media-popover.tsx b/src/components/plate-ui/media-popover.tsx
new file mode 100644
index 0000000..90fddf3
--- /dev/null
+++ b/src/components/plate-ui/media-popover.tsx
@@ -0,0 +1,89 @@
+import React, { useEffect } from 'react';
+import {
+  isCollapsed,
+  useEditorState,
+  useElement,
+  useRemoveNodeButton,
+} from '@udecode/plate-common';
+import {
+  floatingMediaActions,
+  FloatingMedia as FloatingMediaPrimitive,
+  useFloatingMediaSelectors,
+} from '@udecode/plate-media';
+import { useReadOnly, useSelected } from 'slate-react';
+
+import { Icons } from './icons';
+
+import { Button, buttonVariants } from './button';
+import { inputVariants } from './input';
+import { Popover, PopoverAnchor, PopoverContent } from './popover';
+import { Separator } from './separator';
+
+export interface MediaPopoverProps {
+  pluginKey?: string;
+  children: React.ReactNode;
+}
+
+export function MediaPopover({ pluginKey, children }: MediaPopoverProps) {
+  const readOnly = useReadOnly();
+  const selected = useSelected();
+  const editor = useEditorState();
+
+  const isOpen = !readOnly && selected && isCollapsed(editor.selection);
+  const isEditing = useFloatingMediaSelectors().isEditing();
+
+  useEffect(() => {
+    if (!isOpen && isEditing) {
+      floatingMediaActions.isEditing(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
+  const element = useElement();
+  const { props: buttonProps } = useRemoveNodeButton({ element });
+
+  if (readOnly) return <>{children}</>;
+
+  return (
+    <Popover open={isOpen} modal={false}>
+      <PopoverAnchor>{children}</PopoverAnchor>
+
+      <PopoverContent
+        className="w-auto p-1"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        {isEditing ? (
+          <div className="flex w-[330px] flex-col">
+            <div className="flex items-center">
+              <div className="flex items-center pl-3 text-muted-foreground">
+                <Icons.link className="h-4 w-4" />
+              </div>
+
+              <FloatingMediaPrimitive.UrlInput
+                className={inputVariants({ variant: 'ghost', h: 'sm' })}
+                placeholder="Paste the embed link..."
+                options={{
+                  pluginKey,
+                }}
+              />
+            </div>
+          </div>
+        ) : (
+          <div className="box-content flex h-9 items-center gap-1">
+            <FloatingMediaPrimitive.EditButton
+              className={buttonVariants({ variant: 'ghost', size: 'sm' })}
+            >
+              Edit link
+            </FloatingMediaPrimitive.EditButton>
+
+            <Separator orientation="vertical" className="my-1" />
+
+            <Button variant="ghost" size="sms" {...buttonProps}>
+              <Icons.delete className="h-4 w-4" />
+            </Button>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/src/components/plate-ui/media-toolbar-button.tsx b/src/components/plate-ui/media-toolbar-button.tsx
new file mode 100644
index 0000000..6356c3a
--- /dev/null
+++ b/src/components/plate-ui/media-toolbar-button.tsx
@@ -0,0 +1,23 @@
+import {
+  ELEMENT_IMAGE,
+  ELEMENT_MEDIA_EMBED,
+  useMediaToolbarButton,
+} from '@udecode/plate-media';
+
+import { Icons } from './icons';
+
+import { ToolbarButton } from './toolbar';
+
+export function MediaToolbarButton({
+  nodeType,
+}: {
+  nodeType?: typeof ELEMENT_IMAGE | typeof ELEMENT_MEDIA_EMBED;
+}) {
+  const { props } = useMediaToolbarButton({ nodeType });
+
+  return (
+    <ToolbarButton {...props}>
+      <Icons.image />
+    </ToolbarButton>
+  );
+}
diff --git a/src/components/plate-ui/mention-combobox.tsx b/src/components/plate-ui/mention-combobox.tsx
new file mode 100644
index 0000000..00c9d4d
--- /dev/null
+++ b/src/components/plate-ui/mention-combobox.tsx
@@ -0,0 +1,36 @@
+import { ComboboxProps, Data, NoData } from '@udecode/plate-combobox';
+import { getPluginOptions, useEditorRef } from '@udecode/plate-common';
+import {
+  ELEMENT_MENTION,
+  MentionPlugin,
+  getMentionOnSelectItem,
+} from '@udecode/plate-mention';
+
+import { Combobox } from './combobox';
+
+export interface MentionComboboxProps<TData extends Data = NoData>
+  extends Partial<ComboboxProps<TData>> {
+  pluginKey?: string;
+}
+
+export function MentionCombobox<TData extends Data = NoData>({
+  pluginKey = ELEMENT_MENTION,
+  id = pluginKey,
+  ...props
+}: MentionComboboxProps<TData>) {
+  const editor = useEditorRef();
+
+  const { trigger } = getPluginOptions<MentionPlugin>(editor, pluginKey);
+
+  return (
+    <Combobox
+      id={id}
+      trigger={trigger!}
+      controlled
+      onSelectItem={getMentionOnSelectItem({
+        key: pluginKey,
+      })}
+      {...props}
+    />
+  );
+}
diff --git a/src/components/plate-ui/mention-element.tsx b/src/components/plate-ui/mention-element.tsx
new file mode 100644
index 0000000..9a05d93
--- /dev/null
+++ b/src/components/plate-ui/mention-element.tsx
@@ -0,0 +1,57 @@
+import React, { forwardRef } from 'react';
+import {
+  getHandler,
+  PlateElement,
+  PlateElementProps,
+  Value,
+} from '@udecode/plate-common';
+import { TMentionElement } from '@udecode/plate-mention';
+import { useFocused, useSelected } from 'slate-react';
+
+import { cn } from '../../lib/utils';
+
+export interface MentionElementProps
+  extends PlateElementProps<Value, TMentionElement> {
+  /**
+   * Prefix rendered before mention
+   */
+  prefix?: string;
+  onClick?: (mentionNode: any) => void;
+  renderLabel?: (mentionable: TMentionElement) => string;
+}
+
+const MentionElement = forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  MentionElementProps
+>(({ prefix, renderLabel, className, onClick, ...props }, ref) => {
+  const { children, element } = props;
+
+  const selected = useSelected();
+  const focused = useFocused();
+
+  return (
+    <PlateElement
+      ref={ref}
+      className={cn(
+        'inline-block cursor-pointer rounded-md bg-muted px-1.5 py-0.5 align-baseline text-sm font-medium',
+        selected && focused && 'ring-2 ring-ring',
+        element.children[0].bold === true && 'font-bold',
+        element.children[0].italic === true && 'italic',
+        element.children[0].underline === true && 'underline',
+        className
+      )}
+      data-slate-value={element.value}
+      contentEditable={false}
+      onClick={getHandler(onClick, element)}
+      {...props}
+    >
+      {prefix}
+      {renderLabel ? renderLabel(element) : element.value}
+      {children}
+    </PlateElement>
+  );
+});
+
+MentionElement.displayName = 'MentionElement';
+
+export { MentionElement };
diff --git a/src/components/plate-ui/mention-input-element.tsx b/src/components/plate-ui/mention-input-element.tsx
new file mode 100644
index 0000000..fe2402f
--- /dev/null
+++ b/src/components/plate-ui/mention-input-element.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  getHandler,
+  PlateElement,
+  PlateElementProps,
+  Value,
+} from '@udecode/plate-common';
+import { TMentionElement } from '@udecode/plate-mention';
+import { useFocused, useSelected } from 'slate-react';
+
+import { cn } from '../../lib/utils';
+
+export interface MentionInputElementProps
+  extends PlateElementProps<Value, TMentionElement> {
+  onClick?: (mentionNode: any) => void;
+}
+
+const MentionInputElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  MentionInputElementProps
+>(({ className, onClick, ...props }, ref) => {
+  const { children, element } = props;
+
+  const selected = useSelected();
+  const focused = useFocused();
+
+  return (
+    <PlateElement
+      asChild
+      ref={ref}
+      data-slate-value={element.value}
+      className={cn(
+        'inline-block rounded-md bg-muted px-1.5 py-0.5 align-baseline text-sm',
+        selected && focused && 'ring-2 ring-ring',
+        className
+      )}
+      onClick={getHandler(onClick, element)}
+      {...props}
+    >
+      <span>{children}</span>
+    </PlateElement>
+  );
+});
+MentionInputElement.displayName = 'MentionInputElement';
+
+export { MentionInputElement };
diff --git a/src/components/plate-ui/mode-dropdown-menu.tsx b/src/components/plate-ui/mode-dropdown-menu.tsx
new file mode 100644
index 0000000..e1dadce
--- /dev/null
+++ b/src/components/plate-ui/mode-dropdown-menu.tsx
@@ -0,0 +1,89 @@
+import { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+import {
+  focusEditor,
+  useEditorReadOnly,
+  useEditorState,
+  usePlateStore,
+} from '@udecode/plate-common';
+
+import { Icons } from './icons';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  useOpenState,
+} from './dropdown-menu';
+import { ToolbarButton } from './toolbar';
+
+export function ModeDropdownMenu(props: DropdownMenuProps) {
+  const editor = useEditorState();
+  const setReadOnly = usePlateStore().set.readOnly();
+  const readOnly = useEditorReadOnly();
+  const openState = useOpenState();
+
+  let value = 'editing';
+  if (readOnly) value = 'viewing';
+
+  const item: any = {
+    editing: (
+      <>
+        <Icons.editing className="mr-2 h-5 w-5" />
+        <span className="hidden lg:inline">Editing</span>
+      </>
+    ),
+    viewing: (
+      <>
+        <Icons.viewing className="mr-2 h-5 w-5" />
+        <span className="hidden lg:inline">Viewing</span>
+      </>
+    ),
+  };
+
+  return (
+    <DropdownMenu modal={false} {...openState} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton
+          pressed={openState.open}
+          tooltip="Editing mode"
+          isDropdown
+          className="min-w-[auto] lg:min-w-[130px]"
+        >
+          {item[value]}
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="start" className="min-w-[180px]">
+        <DropdownMenuRadioGroup
+          className="flex flex-col gap-0.5"
+          value={value}
+          onValueChange={(newValue) => {
+            if (newValue !== 'viewing') {
+              setReadOnly(false);
+            }
+
+            if (newValue === 'viewing') {
+              setReadOnly(true);
+              return;
+            }
+
+            if (newValue === 'editing') {
+              focusEditor(editor);
+              return;
+            }
+          }}
+        >
+          <DropdownMenuRadioItem value="editing">
+            {item.editing}
+          </DropdownMenuRadioItem>
+
+          <DropdownMenuRadioItem value="viewing">
+            {item.viewing}
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/plate-ui/more-dropdown-menu.tsx b/src/components/plate-ui/more-dropdown-menu.tsx
new file mode 100644
index 0000000..8b1b58f
--- /dev/null
+++ b/src/components/plate-ui/more-dropdown-menu.tsx
@@ -0,0 +1,60 @@
+import { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+import { MARK_SUBSCRIPT, MARK_SUPERSCRIPT } from '@udecode/plate-basic-marks';
+import { focusEditor, toggleMark, useEditorState } from '@udecode/plate-common';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  useOpenState,
+} from './dropdown-menu';
+import { Icons } from './icons';
+import { ToolbarButton } from './toolbar';
+
+export function MoreDropdownMenu(props: DropdownMenuProps) {
+  const editor = useEditorState();
+  const openState = useOpenState();
+
+  return (
+    <DropdownMenu modal={false} {...openState} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton pressed={openState.open} tooltip="Insert">
+          <Icons.more />
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        align="start"
+        className="flex max-h-[500px] min-w-[180px] flex-col gap-0.5 overflow-y-auto"
+      >
+        <DropdownMenuItem
+          onSelect={() => {
+            toggleMark(editor, {
+              key: MARK_SUBSCRIPT,
+              clear: MARK_SUPERSCRIPT,
+            });
+            focusEditor(editor);
+          }}
+        >
+          <Icons.superscript className="mr-2 h-5 w-5" />
+          Superscript
+          {/* (⌘+,) */}
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onSelect={() => {
+            toggleMark(editor, {
+              key: MARK_SUPERSCRIPT,
+              clear: MARK_SUBSCRIPT,
+            });
+            focusEditor(editor);
+          }}
+        >
+          <Icons.subscript className="mr-2 h-5 w-5" />
+          Subscript
+          {/* (⌘+.) */}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/plate-ui/outdent-toolbar-button.tsx b/src/components/plate-ui/outdent-toolbar-button.tsx
new file mode 100644
index 0000000..903385f
--- /dev/null
+++ b/src/components/plate-ui/outdent-toolbar-button.tsx
@@ -0,0 +1,15 @@
+import { useOutdentButton } from '@udecode/plate-indent';
+
+import { Icons } from './icons';
+
+import { ToolbarButton } from './toolbar';
+
+export function OutdentToolbarButton() {
+  const { props } = useOutdentButton();
+
+  return (
+    <ToolbarButton tooltip="Outdent" {...props}>
+      <Icons.outdent />
+    </ToolbarButton>
+  );
+}
diff --git a/src/components/plate-ui/paragraph-element.tsx b/src/components/plate-ui/paragraph-element.tsx
new file mode 100644
index 0000000..81285b6
--- /dev/null
+++ b/src/components/plate-ui/paragraph-element.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { PlateElement, PlateElementProps } from '@udecode/plate-common';
+
+import { cn } from '../../lib/utils';
+
+const ParagraphElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ className, children, ...props }: PlateElementProps, ref) => {
+  return (
+    <PlateElement
+      ref={ref}
+      className={cn('m-0 px-0 py-1', className)}
+      {...props}
+    >
+      {children}
+    </PlateElement>
+  );
+});
+ParagraphElement.displayName = 'ParagraphElement';
+
+export { ParagraphElement };
diff --git a/src/components/plate-ui/placeholder.tsx b/src/components/plate-ui/placeholder.tsx
new file mode 100644
index 0000000..849a124
--- /dev/null
+++ b/src/components/plate-ui/placeholder.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import {
+  createNodeHOC,
+  createNodesHOC,
+  PlaceholderProps,
+  usePlaceholderState,
+} from '@udecode/plate-common';
+import { ELEMENT_H1 } from '@udecode/plate-heading';
+import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
+
+import { cn } from '../../lib/utils';
+
+export const Placeholder = (props: PlaceholderProps) => {
+  const { children, placeholder, nodeProps } = props;
+
+  const { enabled } = usePlaceholderState(props);
+
+  return React.Children.map(children, (child) => {
+    return React.cloneElement(child, {
+      className: child.props.className,
+      nodeProps: {
+        ...nodeProps,
+        className: cn(
+          enabled &&
+            'before:absolute before:cursor-text before:opacity-30 before:content-[attr(placeholder)]'
+        ),
+        placeholder,
+      },
+    });
+  });
+};
+
+export const withPlaceholder = createNodeHOC(Placeholder);
+export const withPlaceholdersPrimitive = createNodesHOC(Placeholder);
+
+export const withPlaceholders = (components: any) =>
+  withPlaceholdersPrimitive(components, [
+    {
+      key: ELEMENT_PARAGRAPH,
+      placeholder: 'Type a paragraph',
+      hideOnBlur: true,
+      query: {
+        maxLevel: 1,
+      },
+    },
+    {
+      key: ELEMENT_H1,
+      placeholder: 'Untitled',
+      hideOnBlur: false,
+    },
+  ]);
diff --git a/src/components/plate-ui/popover.tsx b/src/components/plate-ui/popover.tsx
new file mode 100644
index 0000000..4b64b90
--- /dev/null
+++ b/src/components/plate-ui/popover.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+export const popoverVariants = cva(
+  'w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 print:hidden'
+);
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, style, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(popoverVariants(), className)}
+      style={{ zIndex: 1000, ...style }}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent };
diff --git a/src/components/plate-ui/resizable.tsx b/src/components/plate-ui/resizable.tsx
new file mode 100644
index 0000000..06dae96
--- /dev/null
+++ b/src/components/plate-ui/resizable.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import React, { ComponentProps } from 'react';
+import {
+  Resizable as ResizablePrimitive,
+  ResizeHandle as ResizeHandlePrimitive,
+} from '@udecode/plate-resizable';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+export const mediaResizeHandleVariants = cva(
+  cn(
+    'top-0 flex w-6 select-none flex-col justify-center',
+    "after:flex after:h-16 after:w-[3px] after:rounded-[6px] after:bg-ring after:opacity-0 after:content-['_'] group-hover:after:opacity-100"
+  ),
+  {
+    variants: {
+      direction: {
+        left: '-left-3 -ml-3 pl-3',
+        right: '-right-3 -mr-3 items-end pr-3',
+      },
+    },
+  }
+);
+
+const resizeHandleVariants = cva(cn('absolute z-40'), {
+  variants: {
+    direction: {
+      left: 'h-full cursor-col-resize',
+      right: 'h-full cursor-col-resize',
+      top: 'w-full cursor-row-resize',
+      bottom: 'w-full cursor-row-resize',
+    },
+  },
+});
+
+const ResizeHandle = React.forwardRef<
+  React.ElementRef<typeof ResizeHandlePrimitive>,
+  ComponentProps<typeof ResizeHandlePrimitive> &
+    Omit<VariantProps<typeof resizeHandleVariants>, 'direction'>
+>(({ className, ...props }, ref) => (
+  <ResizeHandlePrimitive
+    ref={ref}
+    className={cn(
+      resizeHandleVariants({ direction: props.options?.direction }),
+      className
+    )}
+    {...props}
+  />
+));
+ResizeHandle.displayName = 'ResizeHandle';
+
+const resizableVariants = cva('', {
+  variants: {
+    align: {
+      left: 'mr-auto',
+      center: 'mx-auto',
+      right: 'ml-auto',
+    },
+  },
+});
+
+const Resizable = React.forwardRef<
+  React.ElementRef<typeof ResizablePrimitive>,
+  ComponentProps<typeof ResizablePrimitive> &
+    VariantProps<typeof resizableVariants>
+>(({ className, align, ...props }, ref) => (
+  <ResizablePrimitive
+    ref={ref}
+    className={cn(resizableVariants({ align }), className)}
+    {...props}
+  />
+));
+Resizable.displayName = 'Resizable';
+
+export { Resizable, ResizeHandle };
diff --git a/src/components/plate-ui/search-highlight-leaf.tsx b/src/components/plate-ui/search-highlight-leaf.tsx
new file mode 100644
index 0000000..9a864b2
--- /dev/null
+++ b/src/components/plate-ui/search-highlight-leaf.tsx
@@ -0,0 +1,7 @@
+import { PlateLeaf, PlateLeafProps } from '@udecode/plate-common';
+
+import { cn } from '../../lib/utils';
+
+export function SearchHighlightLeaf({ className, ...props }: PlateLeafProps) {
+  return <PlateLeaf className={cn('bg-yellow-100', className)} {...props} />;
+}
diff --git a/src/components/plate-ui/separator.tsx b/src/components/plate-ui/separator.tsx
new file mode 100644
index 0000000..3d43af8
--- /dev/null
+++ b/src/components/plate-ui/separator.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from '../../lib/utils';
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/src/components/plate-ui/tabbable-element.tsx b/src/components/plate-ui/tabbable-element.tsx
new file mode 100644
index 0000000..69c2cc2
--- /dev/null
+++ b/src/components/plate-ui/tabbable-element.tsx
@@ -0,0 +1,35 @@
+import { PlateElementProps } from '@udecode/plate-common';
+import { CSSProperties } from 'react';
+import { useFocused, useSelected } from 'slate-react';
+
+const boxStyle: CSSProperties = {
+  padding: '8px',
+  marginBottom: '8px',
+};
+
+const unselectedBoxStyle: CSSProperties = {
+  ...boxStyle,
+  border: '1px solid #ccc',
+};
+
+const selectedBoxStyle: CSSProperties = {
+  ...boxStyle,
+  border: '2px solid blue',
+};
+
+export function TabbableElement({ attributes, children }: PlateElementProps) {
+  const selected = useSelected();
+  const focused = useFocused();
+
+  return (
+    // Need contentEditable=false or Firefox has issues with certain input types.
+    <div {...attributes} contentEditable={false}>
+      <div style={selected && focused ? selectedBoxStyle : unselectedBoxStyle}>
+        <p>This is a void element.</p>
+        <button type="button">Button 1</button>{' '}
+        <button type="button">Button 2</button>
+      </div>
+      {children}
+    </div>
+  );
+}
diff --git a/src/components/plate-ui/table-cell-element.tsx b/src/components/plate-ui/table-cell-element.tsx
new file mode 100644
index 0000000..be358de
--- /dev/null
+++ b/src/components/plate-ui/table-cell-element.tsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';
+import {
+  TTableCellElement,
+  useTableCellElement,
+  useTableCellElementResizable,
+  useTableCellElementResizableState,
+  useTableCellElementState,
+} from '@udecode/plate-table';
+
+import { cn } from '../../lib/utils';
+
+import { ResizeHandle } from './resizable';
+
+export interface TableCellElementProps
+  extends PlateElementProps<Value, TTableCellElement> {
+  hideBorder?: boolean;
+  isHeader?: boolean;
+}
+
+const TableCellElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  TableCellElementProps
+>(({ children, className, style, hideBorder, isHeader, ...props }, ref) => {
+  const { element } = props;
+
+  const {
+    colIndex,
+    rowIndex,
+    readOnly,
+    selected,
+    hovered,
+    hoveredLeft,
+    rowSize,
+    borders,
+    isSelectingCell,
+  } = useTableCellElementState();
+  const { props: cellProps } = useTableCellElement({ element: props.element });
+  const resizableState = useTableCellElementResizableState({
+    colIndex,
+    rowIndex,
+  });
+  const { rightProps, bottomProps, leftProps, hiddenLeft } =
+    useTableCellElementResizable(resizableState);
+
+  const Cell = isHeader ? 'th' : 'td';
+
+  return (
+    <PlateElement
+      asChild
+      ref={ref}
+      className={cn(
+        'relative overflow-visible border-none bg-background p-0',
+        hideBorder && 'before:border-none',
+        element.background ? 'bg-[--cellBackground]' : 'bg-background',
+        !hideBorder &&
+          cn(
+            isHeader && 'text-left [&_>_*]:m-0',
+            'before:h-full before:w-full',
+            selected && 'before:z-10 before:bg-muted',
+            "before:absolute before:box-border before:select-none before:content-['']",
+            borders &&
+              cn(
+                borders.bottom?.size &&
+                  `before:border-b before:border-b-border`,
+                borders.right?.size && `before:border-r before:border-r-border`,
+                borders.left?.size && `before:border-l before:border-l-border`,
+                borders.top?.size && `before:border-t before:border-t-border`
+              )
+          ),
+        className
+      )}
+      {...cellProps}
+      {...props}
+      style={
+        {
+          '--cellBackground': element.background,
+          ...style,
+        } as React.CSSProperties
+      }
+    >
+      <Cell>
+        <div
+          className="relative z-20 box-border h-full px-3 py-2"
+          style={{
+            minHeight: rowSize,
+          }}
+        >
+          {children}
+        </div>
+
+        {!isSelectingCell && (
+          <div
+            className="group absolute top-0 h-full w-full select-none"
+            contentEditable={false}
+            suppressContentEditableWarning={true}
+          >
+            {!readOnly && (
+              <>
+                <ResizeHandle
+                  {...rightProps}
+                  className="-top-3 right-[-5px] w-[10px]"
+                />
+                <ResizeHandle
+                  {...bottomProps}
+                  className="bottom-[-5px] h-[10px]"
+                />
+                {!hiddenLeft && (
+                  <ResizeHandle
+                    {...leftProps}
+                    className="-top-3 left-[-5px] w-[10px]"
+                  />
+                )}
+
+                {hovered && (
+                  <div
+                    className={cn(
+                      'absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring',
+                      'right-[-1.5px]'
+                    )}
+                  />
+                )}
+                {hoveredLeft && (
+                  <div
+                    className={cn(
+                      'absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring',
+                      'left-[-1.5px]'
+                    )}
+                  />
+                )}
+              </>
+            )}
+          </div>
+        )}
+      </Cell>
+    </PlateElement>
+  );
+});
+TableCellElement.displayName = 'TableCellElement';
+
+const TableCellHeaderElement = React.forwardRef<
+  React.ElementRef<typeof TableCellElement>,
+  TableCellElementProps
+>((props, ref) => {
+  return <TableCellElement ref={ref} {...props} isHeader />;
+});
+TableCellHeaderElement.displayName = 'TableCellHeaderElement';
+
+export { TableCellElement, TableCellHeaderElement };
diff --git a/src/components/plate-ui/table-dropdown-menu.tsx b/src/components/plate-ui/table-dropdown-menu.tsx
new file mode 100644
index 0000000..759cdac
--- /dev/null
+++ b/src/components/plate-ui/table-dropdown-menu.tsx
@@ -0,0 +1,142 @@
+import { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+import { focusEditor, someNode, useEditorState } from '@udecode/plate-common';
+import {
+  ELEMENT_TABLE,
+  deleteColumn,
+  deleteRow,
+  deleteTable,
+  insertTable,
+  insertTableColumn,
+  insertTableRow,
+} from '@udecode/plate-table';
+
+import { Icons, iconVariants } from './icons';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  useOpenState,
+} from './dropdown-menu';
+import { ToolbarButton } from './toolbar';
+
+export function TableDropdownMenu(props: DropdownMenuProps) {
+  const editor = useEditorState();
+
+  const tableSelected = someNode(editor, {
+    match: { type: ELEMENT_TABLE },
+  });
+
+  const openState = useOpenState();
+
+  return (
+    <DropdownMenu modal={false} {...openState} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton pressed={openState.open} tooltip="Table" isDropdown>
+          <Icons.table />
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        align="start"
+        className="flex w-[180px] min-w-0 flex-col gap-0.5"
+      >
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <Icons.table className={iconVariants({ variant: 'menuItem' })} />
+            <span>Table</span>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            <DropdownMenuItem
+              className="min-w-[180px]"
+              onSelect={async () => {
+                insertTable(editor);
+                focusEditor(editor);
+              }}
+            >
+              <Icons.add className={iconVariants({ variant: 'menuItem' })} />
+              Insert table
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="min-w-[180px]"
+              disabled={!tableSelected}
+              onSelect={async () => {
+                deleteTable(editor);
+                focusEditor(editor);
+              }}
+            >
+              <Icons.trash className={iconVariants({ variant: 'menuItem' })} />
+              Delete table
+            </DropdownMenuItem>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger disabled={!tableSelected}>
+            <Icons.column className={iconVariants({ variant: 'menuItem' })} />
+            <span>Column</span>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            <DropdownMenuItem
+              className="min-w-[180px]"
+              disabled={!tableSelected}
+              onSelect={async () => {
+                insertTableColumn(editor);
+                focusEditor(editor);
+              }}
+            >
+              <Icons.add className={iconVariants({ variant: 'menuItem' })} />
+              Insert column after
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="min-w-[180px]"
+              disabled={!tableSelected}
+              onSelect={async () => {
+                deleteColumn(editor);
+                focusEditor(editor);
+              }}
+            >
+              <Icons.minus className={iconVariants({ variant: 'menuItem' })} />
+              Delete column
+            </DropdownMenuItem>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger disabled={!tableSelected}>
+            <Icons.row className={iconVariants({ variant: 'menuItem' })} />
+            <span>Row</span>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            <DropdownMenuItem
+              className="min-w-[180px]"
+              disabled={!tableSelected}
+              onSelect={async () => {
+                insertTableRow(editor);
+                focusEditor(editor);
+              }}
+            >
+              <Icons.add className={iconVariants({ variant: 'menuItem' })} />
+              Insert row after
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="min-w-[180px]"
+              disabled={!tableSelected}
+              onSelect={async () => {
+                deleteRow(editor);
+                focusEditor(editor);
+              }}
+            >
+              <Icons.minus className={iconVariants({ variant: 'menuItem' })} />
+              Delete row
+            </DropdownMenuItem>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/plate-ui/table-element.tsx b/src/components/plate-ui/table-element.tsx
new file mode 100644
index 0000000..05ecd09
--- /dev/null
+++ b/src/components/plate-ui/table-element.tsx
@@ -0,0 +1,195 @@
+import React, { forwardRef } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { PopoverAnchor, PopoverContentProps } from '@radix-ui/react-popover';
+import {
+  isCollapsed,
+  PlateElement,
+  PlateElementProps,
+  useEditorState,
+  useElement,
+  useRemoveNodeButton,
+} from '@udecode/plate-common';
+import {
+  TTableElement,
+  useTableBordersDropdownMenuContentState,
+  useTableElement,
+  useTableElementState,
+} from '@udecode/plate-table';
+import { useReadOnly, useSelected } from 'slate-react';
+
+import { cn } from '../../lib/utils';
+import { Icons, iconVariants } from './icons';
+
+import { Button } from './button';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+} from './dropdown-menu';
+import { Popover, PopoverContent, popoverVariants } from './popover';
+import { Separator } from './separator';
+
+const TableBordersDropdownMenuContent = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>((props, ref) => {
+  const {
+    getOnSelectTableBorder,
+    hasOuterBorders,
+    hasBottomBorder,
+    hasLeftBorder,
+    hasNoBorders,
+    hasRightBorder,
+    hasTopBorder,
+  } = useTableBordersDropdownMenuContentState();
+
+  return (
+    <DropdownMenuContent
+      ref={ref}
+      className={cn('min-w-[220px]')}
+      side="right"
+      align="start"
+      sideOffset={0}
+      {...props}
+    >
+      <DropdownMenuCheckboxItem
+        checked={hasBottomBorder}
+        onCheckedChange={getOnSelectTableBorder('bottom')}
+      >
+        <Icons.borderBottom className={iconVariants({ size: 'sm' })} />
+        <div>Bottom Border</div>
+      </DropdownMenuCheckboxItem>
+      <DropdownMenuCheckboxItem
+        checked={hasTopBorder}
+        onCheckedChange={getOnSelectTableBorder('top')}
+      >
+        <Icons.borderTop className={iconVariants({ size: 'sm' })} />
+        <div>Top Border</div>
+      </DropdownMenuCheckboxItem>
+      <DropdownMenuCheckboxItem
+        checked={hasLeftBorder}
+        onCheckedChange={getOnSelectTableBorder('left')}
+      >
+        <Icons.borderLeft className={iconVariants({ size: 'sm' })} />
+        <div>Left Border</div>
+      </DropdownMenuCheckboxItem>
+      <DropdownMenuCheckboxItem
+        checked={hasRightBorder}
+        onCheckedChange={getOnSelectTableBorder('right')}
+      >
+        <Icons.borderRight className={iconVariants({ size: 'sm' })} />
+        <div>Right Border</div>
+      </DropdownMenuCheckboxItem>
+
+      <Separator />
+
+      <DropdownMenuCheckboxItem
+        checked={hasNoBorders}
+        onCheckedChange={getOnSelectTableBorder('none')}
+      >
+        <Icons.borderNone className={iconVariants({ size: 'sm' })} />
+        <div>No Border</div>
+      </DropdownMenuCheckboxItem>
+      <DropdownMenuCheckboxItem
+        checked={hasOuterBorders}
+        onCheckedChange={getOnSelectTableBorder('outer')}
+      >
+        <Icons.borderAll className={iconVariants({ size: 'sm' })} />
+        <div>Outside Borders</div>
+      </DropdownMenuCheckboxItem>
+    </DropdownMenuContent>
+  );
+});
+TableBordersDropdownMenuContent.displayName = 'TableBordersDropdownMenuContent';
+
+const TableFloatingToolbar = React.forwardRef<
+  React.ElementRef<typeof PopoverContent>,
+  PopoverContentProps
+>(({ children, ...props }, ref) => {
+  const element = useElement<TTableElement>();
+  const { props: buttonProps } = useRemoveNodeButton({ element });
+
+  const readOnly = useReadOnly();
+  const selected = useSelected();
+  const editor = useEditorState();
+  const open = !readOnly && selected && isCollapsed(editor.selection);
+
+  return (
+    <Popover open={open} modal={false}>
+      <PopoverAnchor asChild>{children}</PopoverAnchor>
+      <PopoverContent
+        ref={ref}
+        className={cn(popoverVariants(), 'flex w-[220px] flex-col gap-1 p-1')}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        {...props}
+      >
+        <DropdownMenu modal={false}>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" isMenu>
+              <Icons.borderAll className="mr-2 h-4 w-4" />
+              Borders
+            </Button>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuPortal>
+            <TableBordersDropdownMenuContent />
+          </DropdownMenuPortal>
+        </DropdownMenu>
+
+        <Button contentEditable={false} variant="ghost" isMenu {...buttonProps}>
+          <Icons.delete className="mr-2 h-4 w-4" />
+          Delete
+        </Button>
+      </PopoverContent>
+    </Popover>
+  );
+});
+TableFloatingToolbar.displayName = 'TableFloatingToolbar';
+
+const TableElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateElementProps
+>(({ className, children, ...props }, ref) => {
+  const { colSizes, isSelectingCell, minColumnWidth, marginLeft } =
+    useTableElementState();
+  const { props: tableProps, colGroupProps } = useTableElement();
+
+  return (
+    <TableFloatingToolbar>
+      <div style={{ paddingLeft: marginLeft }}>
+        <PlateElement
+          asChild
+          ref={ref}
+          className={cn(
+            'my-4 ml-px mr-0 table h-px w-full table-fixed border-collapse',
+            isSelectingCell && '[&_*::selection]:bg-none',
+            className
+          )}
+          {...tableProps}
+          {...props}
+        >
+          <table>
+            <colgroup {...colGroupProps}>
+              {colSizes.map((width, index) => (
+                <col
+                  key={index}
+                  style={{
+                    minWidth: minColumnWidth,
+                    width: width || undefined,
+                  }}
+                />
+              ))}
+            </colgroup>
+
+            <tbody className="min-w-full">{children}</tbody>
+          </table>
+        </PlateElement>
+      </div>
+    </TableFloatingToolbar>
+  );
+});
+TableElement.displayName = 'TableElement';
+
+export { TableElement, TableFloatingToolbar, TableBordersDropdownMenuContent };
diff --git a/src/components/plate-ui/table-row-element.tsx b/src/components/plate-ui/table-row-element.tsx
new file mode 100644
index 0000000..77b9754
--- /dev/null
+++ b/src/components/plate-ui/table-row-element.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { PlateElement, PlateElementProps } from '@udecode/plate-common';
+
+import { cn } from '../../lib/utils';
+
+export interface PlateTableRowElementProps extends PlateElementProps {
+  hideBorder?: boolean;
+}
+
+const TableRowElement = React.forwardRef<
+  React.ElementRef<typeof PlateElement>,
+  PlateTableRowElementProps
+>(({ hideBorder, children, ...props }, ref) => {
+  return (
+    <PlateElement
+      asChild
+      ref={ref}
+      className={cn('h-full', hideBorder && 'border-none')}
+      {...props}
+    >
+      <tr>{children}</tr>
+    </PlateElement>
+  );
+});
+TableRowElement.displayName = 'TableRowElement';
+
+export { TableRowElement };
diff --git a/src/components/plate-ui/todo-list-element.tsx b/src/components/plate-ui/todo-list-element.tsx
new file mode 100644
index 0000000..6d0c792
--- /dev/null
+++ b/src/components/plate-ui/todo-list-element.tsx
@@ -0,0 +1,46 @@
+import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common';
+import {
+  TTodoListItemElement,
+  useTodoListElement,
+  useTodoListElementState,
+} from '@udecode/plate-list';
+
+import { cn } from '../../lib/utils';
+
+import { Checkbox } from './checkbox';
+
+export type TodoListElementProps = PlateElementProps<
+  Value,
+  TTodoListItemElement
+>;
+
+export function TodoListElement({
+  className,
+  children,
+  ...props
+}: TodoListElementProps) {
+  const { element } = props;
+  const state = useTodoListElementState({ element });
+  const { checkboxProps } = useTodoListElement(state);
+
+  return (
+    <PlateElement className={cn('flex flex-row py-1', className)} {...props}>
+      <div
+        className="mr-1.5 flex select-none items-center justify-center"
+        contentEditable={false}
+      >
+        <Checkbox {...checkboxProps} />
+      </div>
+      <span
+        className={cn(
+          'flex-1 focus:outline-none',
+          state.checked && 'text-muted-foreground line-through'
+        )}
+        contentEditable={!state.readOnly}
+        suppressContentEditableWarning
+      >
+        {children}
+      </span>
+    </PlateElement>
+  );
+}
diff --git a/src/components/plate-ui/toggle.tsx b/src/components/plate-ui/toggle.tsx
new file mode 100644
index 0000000..1a33aca
--- /dev/null
+++ b/src/components/plate-ui/toggle.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const toggleVariants = cva(
+  cn(
+    'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+    '[&_svg:not([data-icon])]:h-5 [&_svg:not([data-icon])]:w-5'
+  ),
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-transparent hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+        outline:
+          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+        floating: 'rounded-full bg-primary text-primary-foreground',
+      },
+      size: {
+        default: 'h-10 px-3',
+        sm: 'h-9 px-2',
+        lg: 'h-11 px-5',
+        circle: 'p-3',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export type ToggleProps = React.ComponentPropsWithoutRef<
+  typeof TogglePrimitive.Root
+> &
+  VariantProps<typeof toggleVariants>;
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  ToggleProps
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };
diff --git a/src/components/plate-ui/toolbar.tsx b/src/components/plate-ui/toolbar.tsx
new file mode 100644
index 0000000..c30794c
--- /dev/null
+++ b/src/components/plate-ui/toolbar.tsx
@@ -0,0 +1,204 @@
+'use client';
+
+import * as React from 'react';
+import { ReactNode } from 'react';
+import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+import { Icons } from './icons';
+
+import { Separator } from './separator';
+import { ToggleProps, toggleVariants } from './toggle';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
+} from './tooltip';
+
+const toolbarVariants = cva(
+  'relative flex select-none items-stretch gap-1 bg-background'
+);
+
+export const linkVariants = cva('font-medium underline underline-offset-4');
+
+const ToolbarToggleGroup = ToolbarPrimitive.ToggleGroup;
+
+export interface ToolbarProps
+  extends React.ComponentPropsWithoutRef<typeof Toolbar> {}
+
+const Toolbar = React.forwardRef<
+  React.ElementRef<typeof ToolbarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Root> &
+    VariantProps<typeof toolbarVariants>
+>(({ className, ...props }, ref) => (
+  <ToolbarPrimitive.Root
+    ref={ref}
+    className={cn(toolbarVariants(), className)}
+    {...props}
+  />
+));
+Toolbar.displayName = ToolbarPrimitive.Root.displayName;
+
+const ToolbarLink = React.forwardRef<
+  React.ElementRef<typeof ToolbarPrimitive.Link>,
+  React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Link> &
+    VariantProps<typeof linkVariants>
+>(({ className, ...props }, ref) => (
+  <ToolbarPrimitive.Link
+    ref={ref}
+    className={cn(linkVariants(), className)}
+    {...props}
+  />
+));
+ToolbarLink.displayName = ToolbarPrimitive.Link.displayName;
+
+const ToolbarSeparator = React.forwardRef<
+  React.ElementRef<typeof ToolbarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ToolbarPrimitive.Separator
+    ref={ref}
+    className={cn('shrink-0 bg-border', 'my-1 w-[1px]', className)}
+    {...props}
+  />
+));
+ToolbarSeparator.displayName = ToolbarPrimitive.Separator.displayName;
+
+export interface ToolbarButtonProps
+  extends React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Button>,
+    VariantProps<typeof toggleVariants>,
+    Omit<ToggleProps, 'type'> {
+  buttonType?: 'button' | 'toggle';
+  pressed?: boolean;
+  tooltip?: ReactNode;
+  isDropdown?: boolean;
+}
+
+const ToolbarButton = React.forwardRef<
+  React.ElementRef<typeof ToolbarPrimitive.Button>,
+  ToolbarButtonProps
+>(
+  (
+    {
+      className,
+      variant,
+      size = 'sm',
+      isDropdown,
+      children,
+      pressed,
+      value,
+      tooltip,
+      ...props
+    },
+    ref
+  ) => {
+    const [isLoaded, setIsLoaded] = React.useState(false);
+
+    React.useEffect(() => {
+      setIsLoaded(true);
+    }, []);
+
+    const content =
+      typeof pressed === 'boolean' ? (
+        <ToolbarToggleGroup
+          type="single"
+          value={pressed ? 'single' : undefined}
+        >
+          <ToolbarToggleItem
+            ref={ref}
+            className={cn(
+              toggleVariants({
+                variant,
+                size,
+              }),
+              isDropdown && 'my-1 justify-between pr-1',
+              className
+            )}
+            value="single"
+            {...props}
+          >
+            <div className="flex flex-1">{children}</div>
+            <div>
+              {isDropdown && (
+                <Icons.arrowDown className="ml-0.5 h-4 w-4" data-icon />
+              )}
+            </div>
+          </ToolbarToggleItem>
+        </ToolbarToggleGroup>
+      ) : (
+        <ToolbarPrimitive.Button
+          ref={ref}
+          className={cn(
+            toggleVariants({
+              variant,
+              size,
+            }),
+            isDropdown && 'pr-1',
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </ToolbarPrimitive.Button>
+      );
+
+    return isLoaded && tooltip ? (
+      <Tooltip>
+        <TooltipTrigger>{content}</TooltipTrigger>
+
+        <TooltipPortal>
+          <TooltipContent>{tooltip}</TooltipContent>
+        </TooltipPortal>
+      </Tooltip>
+    ) : (
+      <>{content}</>
+    );
+  }
+);
+ToolbarButton.displayName = ToolbarPrimitive.Button.displayName;
+
+const ToolbarToggleItem = React.forwardRef<
+  React.ElementRef<typeof ToolbarPrimitive.ToggleItem>,
+  React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.ToggleItem> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <ToolbarPrimitive.ToggleItem
+    ref={ref}
+    className={cn(toggleVariants({ variant, size }), className)}
+    {...props}
+  />
+));
+ToolbarToggleItem.displayName = ToolbarPrimitive.ToggleItem.displayName;
+
+const ToolbarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { noSeparator?: boolean }
+>(({ noSeparator, className, children }, ref) => {
+  const childArr = React.Children.map(children, (c) => c);
+  if (!childArr || childArr.length === 0) return null;
+
+  return (
+    <div ref={ref} className={cn('flex', className)}>
+      {!noSeparator && (
+        <div className="h-full py-1">
+          <Separator orientation="vertical" />
+        </div>
+      )}
+
+      <div className="mx-1 flex items-center gap-1">{children}</div>
+    </div>
+  );
+});
+ToolbarGroup.displayName = 'ToolbarGroup';
+
+export {
+  Toolbar,
+  ToolbarLink,
+  ToolbarToggleGroup,
+  ToolbarSeparator,
+  ToolbarToggleItem,
+  ToolbarButton,
+  ToolbarGroup,
+};
diff --git a/src/components/plate-ui/tooltip.tsx b/src/components/plate-ui/tooltip.tsx
new file mode 100644
index 0000000..b0ec9b9
--- /dev/null
+++ b/src/components/plate-ui/tooltip.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '../../lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipPortal = TooltipPrimitive.Portal;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md',
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipPortal,
+  TooltipContent,
+  TooltipProvider,
+};
diff --git a/src/components/plate-ui/turn-into-dropdown-menu.tsx b/src/components/plate-ui/turn-into-dropdown-menu.tsx
new file mode 100644
index 0000000..1367db7
--- /dev/null
+++ b/src/components/plate-ui/turn-into-dropdown-menu.tsx
@@ -0,0 +1,148 @@
+import { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+import { ELEMENT_BLOCKQUOTE } from '@udecode/plate-block-quote';
+import {
+  collapseSelection,
+  findNode,
+  focusEditor,
+  isBlock,
+  isCollapsed,
+  TElement,
+  toggleNodeType,
+  useEditorState,
+} from '@udecode/plate-common';
+import { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3 } from '@udecode/plate-heading';
+import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
+
+import { Icons } from './icons';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  useOpenState,
+} from './dropdown-menu';
+import { ToolbarButton } from './toolbar';
+
+const items = [
+  {
+    value: ELEMENT_PARAGRAPH,
+    label: 'Paragraph',
+    description: 'Paragraph',
+    icon: Icons.paragraph,
+  },
+  {
+    value: ELEMENT_H1,
+    label: 'Heading 1',
+    description: 'Heading 1',
+    icon: Icons.h1,
+  },
+  {
+    value: ELEMENT_H2,
+    label: 'Heading 2',
+    description: 'Heading 2',
+    icon: Icons.h2,
+  },
+  {
+    value: ELEMENT_H3,
+    label: 'Heading 3',
+    description: 'Heading 3',
+    icon: Icons.h3,
+  },
+  {
+    value: ELEMENT_BLOCKQUOTE,
+    label: 'Quote',
+    description: 'Quote (⌘+⇧+.)',
+    icon: Icons.blockquote,
+  },
+  // {
+  //   value: 'ul',
+  //   label: 'Bulleted list',
+  //   description: 'Bulleted list',
+  //   icon: Icons.ul,
+  // },
+  // {
+  //   value: 'ol',
+  //   label: 'Numbered list',
+  //   description: 'Numbered list',
+  //   icon: Icons.ol,
+  // },
+];
+
+const defaultItem = items.find((item) => item.value === ELEMENT_PARAGRAPH)!;
+
+export function TurnIntoDropdownMenu(props: DropdownMenuProps) {
+  const editor = useEditorState();
+  const openState = useOpenState();
+
+  let value: string = ELEMENT_PARAGRAPH;
+  if (isCollapsed(editor?.selection)) {
+    const entry = findNode<TElement>(editor!, {
+      match: (n) => isBlock(editor, n),
+    });
+    if (entry) {
+      value =
+        items.find((item) => item.value === entry[0].type)?.value ??
+        ELEMENT_PARAGRAPH;
+    }
+  }
+
+  const selectedItem =
+    items.find((item) => item.value === value) ?? defaultItem;
+  const { icon: SelectedItemIcon, label: selectedItemLabel } = selectedItem;
+
+  return (
+    <DropdownMenu modal={false} {...openState} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton
+          pressed={openState.open}
+          tooltip="Turn into"
+          isDropdown
+          className="lg:min-w-[130px]"
+        >
+          <SelectedItemIcon className="h-5 w-5 lg:hidden" />
+          <span className="max-lg:hidden">{selectedItemLabel}</span>
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="start" className="min-w-0">
+        <DropdownMenuLabel>Turn into</DropdownMenuLabel>
+
+        <DropdownMenuRadioGroup
+          className="flex flex-col gap-0.5"
+          value={value}
+          onValueChange={(type) => {
+            // if (type === 'ul' || type === 'ol') {
+            //   if (settingsStore.get.checkedId(KEY_LIST_STYLE_TYPE)) {
+            //     toggleIndentList(editor, {
+            //       listStyleType: type === 'ul' ? 'disc' : 'decimal',
+            //     });
+            //   } else if (settingsStore.get.checkedId('list')) {
+            //     toggleList(editor, { type });
+            //   }
+            // } else {
+            //   unwrapList(editor);
+            toggleNodeType(editor, { activeType: type });
+            // }
+
+            collapseSelection(editor);
+            focusEditor(editor);
+          }}
+        >
+          {items.map(({ value: itemValue, label, icon: Icon }) => (
+            <DropdownMenuRadioItem
+              key={itemValue}
+              value={itemValue}
+              className="min-w-[180px]"
+            >
+              <Icon className="mr-2 h-5 w-5" />
+              {label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/plate-ui/with-draggables.tsx b/src/components/plate-ui/with-draggables.tsx
new file mode 100644
index 0000000..400ba29
--- /dev/null
+++ b/src/components/plate-ui/with-draggables.tsx
@@ -0,0 +1,107 @@
+import { FC } from 'react';
+import { ELEMENT_BLOCKQUOTE } from '@udecode/plate-block-quote';
+import { ELEMENT_CODE_BLOCK } from '@udecode/plate-code-block';
+import { createNodesWithHOC } from '@udecode/plate-common';
+import {
+  WithDraggableOptions,
+  withDraggable as withDraggablePrimitive,
+} from '@udecode/plate-dnd';
+import {
+  ELEMENT_H1,
+  ELEMENT_H2,
+  ELEMENT_H3,
+  ELEMENT_H4,
+  ELEMENT_H5,
+  ELEMENT_H6,
+} from '@udecode/plate-heading';
+import { ELEMENT_OL, ELEMENT_UL } from '@udecode/plate-list';
+import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
+
+import { Draggable, DraggableProps } from './draggable';
+
+export const withDraggable = (
+  Component: FC,
+  options?: WithDraggableOptions<
+    Partial<Omit<DraggableProps, 'editor' | 'element' | 'children'>>
+  >
+) =>
+  withDraggablePrimitive<DraggableProps>(Draggable, Component, options as any);
+
+export const withDraggablesPrimitive = createNodesWithHOC(withDraggable);
+
+export const withDraggables = (components: any) => {
+  return withDraggablesPrimitive(components, [
+    {
+      keys: [ELEMENT_PARAGRAPH, ELEMENT_UL, ELEMENT_OL],
+      level: 0,
+    },
+    {
+      key: ELEMENT_H1,
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'px-0 pb-1 text-[1.875em]',
+          blockToolbarWrapper: 'h-[1.3em]',
+        },
+      },
+    },
+    {
+      key: ELEMENT_H2,
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'px-0 pb-1 text-[1.5em]',
+          blockToolbarWrapper: 'h-[1.3em]',
+        },
+      },
+    },
+    {
+      key: ELEMENT_H3,
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'pt-[2px] px-0 pb-1 text-[1.25em]',
+          blockToolbarWrapper: 'h-[1.3em]',
+        },
+      },
+    },
+    {
+      keys: [ELEMENT_H4, ELEMENT_H5],
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'pt-[3px] px-0 pb-0 text-[1.1em]',
+          blockToolbarWrapper: 'h-[1.3em]',
+        },
+      },
+    },
+    {
+      keys: [ELEMENT_PARAGRAPH],
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'pt-[3px] px-0 pb-0',
+        },
+      },
+    },
+    {
+      keys: [ELEMENT_H6, ELEMENT_UL, ELEMENT_OL],
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'px-0 pb-0',
+        },
+      },
+    },
+    {
+      key: ELEMENT_BLOCKQUOTE,
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'px-0 pb-0',
+        },
+      },
+    },
+    {
+      key: ELEMENT_CODE_BLOCK,
+      draggableProps: {
+        classNames: {
+          gutterLeft: 'pt-8 px-0 pb-0',
+        },
+      },
+    },
+  ]);
+};
diff --git a/src/components/shadcn/Accordion.tsx b/src/components/shadcn/Accordion.tsx
new file mode 100644
index 0000000..8985e1a
--- /dev/null
+++ b/src/components/shadcn/Accordion.tsx
@@ -0,0 +1,58 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      className
+    )}
+    {...props}
+  >
+    <div className="pb-4 pt-0">{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/src/components/shadcn/Badge.tsx b/src/components/shadcn/Badge.tsx
new file mode 100644
index 0000000..a448338
--- /dev/null
+++ b/src/components/shadcn/Badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/src/components/shadcn/Button.tsx b/src/components/shadcn/Button.tsx
new file mode 100644
index 0000000..6969c05
--- /dev/null
+++ b/src/components/shadcn/Button.tsx
@@ -0,0 +1,55 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/src/components/shadcn/Card.tsx b/src/components/shadcn/Card.tsx
new file mode 100644
index 0000000..c1b6fbb
--- /dev/null
+++ b/src/components/shadcn/Card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/components/shadcn/Carousel.tsx b/src/components/shadcn/Carousel.tsx
new file mode 100644
index 0000000..7819ecb
--- /dev/null
+++ b/src/components/shadcn/Carousel.tsx
@@ -0,0 +1,255 @@
+import useEmblaCarousel from 'embla-carousel-react';
+import {
+  EmblaCarouselType as CarouselApi,
+  EmblaOptionsType as CarouselOptions,
+  EmblaPluginType as CarouselPlugin,
+} from "embla-carousel"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+import { Button } from "./Button"
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin[]
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on("reInit", onSelect)
+      api.on("select", onSelect)
+
+      return () => {
+        api?.off("select", onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi
+}
diff --git a/src/components/shadcn/Checkbox.tsx b/src/components/shadcn/Checkbox.tsx
new file mode 100644
index 0000000..03dd301
--- /dev/null
+++ b/src/components/shadcn/Checkbox.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+const Checkbox = React.forwardRef<
+	React.ElementRef<typeof CheckboxPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<CheckboxPrimitive.Root
+		ref={ref}
+		className={cn(
+			"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+			className
+		)}
+		{...props}
+	>
+		<CheckboxPrimitive.Indicator
+			className={cn("flex items-center justify-center text-current")}
+		>
+			<Check className="h-4 w-4" />
+		</CheckboxPrimitive.Indicator>
+	</CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
diff --git a/src/components/shadcn/Combobox.tsx b/src/components/shadcn/Combobox.tsx
new file mode 100644
index 0000000..42efa35
--- /dev/null
+++ b/src/components/shadcn/Combobox.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { Check, ChevronsUpDown } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { Button } from "./Button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+} from "./Command";
+import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
+
+// const options = [
+//   {
+//     value: "next.js",
+//     label: "Next.js",
+//   },
+//   {
+//     value: "sveltekit",
+//     label: "SvelteKit",
+//   },
+//   {
+//     value: "nuxt.js",
+//     label: "Nuxt.js",
+//   },
+//   {
+//     value: "remix",
+//     label: "Remix",
+//   },
+//   {
+//     value: "astro",
+//     label: "Astro",
+//   },
+// ]
+
+export type ComboboxOption = {
+	value: string;
+	label: string;
+};
+
+export function Combobox({
+	label,
+	options = [],
+	placeholder,
+	emptyMessage,
+	onSelect,
+	// initialValue,
+	value,
+	setValue
+}: {
+	label?: string;
+	options?: ComboboxOption[];
+	placeholder?: string;
+	emptyMessage?: string;
+	// initialValue?: string;
+	onSelect?: (value: string) => void;
+  value: string;
+  setValue: (value: string) => void;
+}) {
+	const [open, setOpen] = React.useState(false);
+  
+  React.useEffect(()=>{
+    console.log("value", value)
+  },[value])
+
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<PopoverTrigger asChild>
+				<Button
+					variant="outline"
+					role="combobox"
+					aria-expanded={open}
+					className="w-[200px] justify-between"
+				>
+					{value
+						? options.find((option) => option.value === value)
+								?.label
+						: label}
+					<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-[200px] p-0">
+				<Command>
+					<CommandInput placeholder={placeholder} />
+					<CommandEmpty>{emptyMessage}</CommandEmpty>
+					<CommandGroup>
+						{options.map((option) => (
+							<CommandItem
+								key={option.value}
+								value={option.value}
+								onSelect={(currentValue) => {
+									if (onSelect) {
+										onSelect(currentValue);
+									}
+									// setValue(currentValue === value ? "" : currentValue)
+									setValue(currentValue);
+									setOpen(false);
+								}}
+							>
+								<Check
+									className={cn(
+										"mr-2 h-4 w-4",
+										value === option.value
+											? "opacity-100"
+											: "opacity-0"
+									)}
+								/>
+								{option.label}
+							</CommandItem>
+						))}
+					</CommandGroup>
+				</Command>
+			</PopoverContent>
+		</Popover>
+	);
+}
diff --git a/src/components/shadcn/Command.tsx b/src/components/shadcn/Command.tsx
new file mode 100644
index 0000000..26527f9
--- /dev/null
+++ b/src/components/shadcn/Command.tsx
@@ -0,0 +1,153 @@
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+import { Dialog, DialogContent } from "./Dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/src/components/shadcn/ContextMenu.tsx b/src/components/shadcn/ContextMenu.tsx
new file mode 100644
index 0000000..4ffa0ec
--- /dev/null
+++ b/src/components/shadcn/ContextMenu.tsx
@@ -0,0 +1,198 @@
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
diff --git a/src/components/shadcn/Dialog.tsx b/src/components/shadcn/Dialog.tsx
new file mode 100644
index 0000000..a258f59
--- /dev/null
+++ b/src/components/shadcn/Dialog.tsx
@@ -0,0 +1,120 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/src/components/shadcn/DropdownMenu.tsx b/src/components/shadcn/DropdownMenu.tsx
new file mode 100644
index 0000000..68b4d53
--- /dev/null
+++ b/src/components/shadcn/DropdownMenu.tsx
@@ -0,0 +1,198 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/src/components/shadcn/Form.tsx b/src/components/shadcn/Form.tsx
new file mode 100644
index 0000000..9f68063
--- /dev/null
+++ b/src/components/shadcn/Form.tsx
@@ -0,0 +1,176 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "../../lib/utils"
+import { Label } from "./Label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/src/components/shadcn/HoverCard.tsx b/src/components/shadcn/HoverCard.tsx
new file mode 100644
index 0000000..8c491a4
--- /dev/null
+++ b/src/components/shadcn/HoverCard.tsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "../../lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/src/components/shadcn/Input.tsx b/src/components/shadcn/Input.tsx
new file mode 100644
index 0000000..7b9d75c
--- /dev/null
+++ b/src/components/shadcn/Input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/src/components/shadcn/Label.tsx b/src/components/shadcn/Label.tsx
new file mode 100644
index 0000000..c23cb40
--- /dev/null
+++ b/src/components/shadcn/Label.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/src/components/shadcn/ListItem.tsx b/src/components/shadcn/ListItem.tsx
new file mode 100644
index 0000000..367f495
--- /dev/null
+++ b/src/components/shadcn/ListItem.tsx
@@ -0,0 +1,29 @@
+import React from "react"
+import { cn } from "../../lib/utils"
+import { NavigationMenuLink } from "./NevigationMenu"
+
+export const ListItem = React.forwardRef<
+    React.ElementRef<"a">,
+    React.ComponentPropsWithoutRef<"a">
+  >(({ className, title, children, ...props }, ref) => {
+    return (
+      <li>
+        <NavigationMenuLink asChild>
+          <a
+            ref={ref}
+            className={cn(
+              "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+              className
+            )}
+            {...props}
+          >
+            <div className="text-sm font-medium leading-none">{title}</div>
+            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+              {children}
+            </p>
+          </a>
+        </NavigationMenuLink>
+      </li>
+    )
+  })
+  ListItem.displayName = "ListItem"
\ No newline at end of file
diff --git a/src/components/shadcn/NevigationMenu.tsx b/src/components/shadcn/NevigationMenu.tsx
new file mode 100644
index 0000000..54d2566
--- /dev/null
+++ b/src/components/shadcn/NevigationMenu.tsx
@@ -0,0 +1,128 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}
diff --git a/src/components/shadcn/Popover.tsx b/src/components/shadcn/Popover.tsx
new file mode 100644
index 0000000..c992736
--- /dev/null
+++ b/src/components/shadcn/Popover.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "../../lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }
diff --git a/src/components/shadcn/RadioGroup.tsx b/src/components/shadcn/RadioGroup.tsx
new file mode 100644
index 0000000..2efd889
--- /dev/null
+++ b/src/components/shadcn/RadioGroup.tsx
@@ -0,0 +1,42 @@
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }
diff --git a/src/components/shadcn/Resizable.tsx b/src/components/shadcn/Resizable.tsx
new file mode 100644
index 0000000..5132aeb
--- /dev/null
+++ b/src/components/shadcn/Resizable.tsx
@@ -0,0 +1,43 @@
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "../../lib/utils"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/src/components/shadcn/ScrollArea.tsx b/src/components/shadcn/ScrollArea.tsx
new file mode 100644
index 0000000..f7629b0
--- /dev/null
+++ b/src/components/shadcn/ScrollArea.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "../../lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/src/components/shadcn/Seperator.tsx b/src/components/shadcn/Seperator.tsx
new file mode 100644
index 0000000..ffdf7a1
--- /dev/null
+++ b/src/components/shadcn/Seperator.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "../../lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/src/components/shadcn/Switch.tsx b/src/components/shadcn/Switch.tsx
new file mode 100644
index 0000000..51c263b
--- /dev/null
+++ b/src/components/shadcn/Switch.tsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "../../lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/src/components/shadcn/Table.tsx b/src/components/shadcn/Table.tsx
new file mode 100644
index 0000000..c7bed95
--- /dev/null
+++ b/src/components/shadcn/Table.tsx
@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("bg-primary font-medium text-primary-foreground", className)}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/src/components/shadcn/Tabs.tsx b/src/components/shadcn/Tabs.tsx
new file mode 100644
index 0000000..f5087f9
--- /dev/null
+++ b/src/components/shadcn/Tabs.tsx
@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "../../lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/src/components/shadcn/Textarea.tsx b/src/components/shadcn/Textarea.tsx
new file mode 100644
index 0000000..6d1cb75
--- /dev/null
+++ b/src/components/shadcn/Textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/src/components/shadcn/Toast.tsx b/src/components/shadcn/Toast.tsx
new file mode 100644
index 0000000..883cb56
--- /dev/null
+++ b/src/components/shadcn/Toast.tsx
@@ -0,0 +1,127 @@
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}
diff --git a/src/components/shadcn/Toaster.tsx b/src/components/shadcn/Toaster.tsx
new file mode 100644
index 0000000..c16aaa5
--- /dev/null
+++ b/src/components/shadcn/Toaster.tsx
@@ -0,0 +1,33 @@
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "./Toast"
+import { useToast } from "./UseToast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/src/components/shadcn/Tooltip.tsx b/src/components/shadcn/Tooltip.tsx
new file mode 100644
index 0000000..5503ba1
--- /dev/null
+++ b/src/components/shadcn/Tooltip.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "../../lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/src/components/shadcn/UseToast.ts b/src/components/shadcn/UseToast.ts
new file mode 100644
index 0000000..62559e8
--- /dev/null
+++ b/src/components/shadcn/UseToast.ts
@@ -0,0 +1,192 @@
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "./Toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }
diff --git a/src/constants/BackendBaseURL.ts b/src/constants/BackendBaseURL.ts
new file mode 100644
index 0000000..d8bb4b6
--- /dev/null
+++ b/src/constants/BackendBaseURL.ts
@@ -0,0 +1,6 @@
+import axios from "axios";
+
+// export const BASE_URL = 'http://192.168.0.11:8000';
+export const BASE_URL = String(import.meta.env.VITE_BACKEND_URL);
+// axios.defaults.headers.common['account_id'] = localStorage.getItem('account_id') || null;
+axios.defaults.headers.common['Authorization'] = localStorage.getItem('token') || null;
diff --git a/src/constants/DummyEditorValue.ts b/src/constants/DummyEditorValue.ts
new file mode 100644
index 0000000..5490180
--- /dev/null
+++ b/src/constants/DummyEditorValue.ts
@@ -0,0 +1,190 @@
+import { ELEMENT_PARAGRAPH } from "@udecode/plate-paragraph";
+
+export const DummyEditorValue = [
+    {
+      type: 'h1',
+      children: [
+        {
+          text: '🌳 Blocks',
+        },
+      ],
+      id: '1',
+    },
+    {
+      type: 'p',
+      children: [
+        {
+          text: 'Easily create headings of various levels, from H1 to H6, to structure your content and make it more organized.',
+        },
+      ],
+      id: '2',
+    },
+    {
+      type: 'blockquote',
+      children: [
+        {
+          text: 'Create blockquotes to emphasize important information or highlight quotes from external sources.',
+        },
+      ],
+      id: '3',
+    },
+    {
+      type: 'code_block',
+      lang: 'javascript',
+      children: [
+        {
+          type: 'code_line',
+          children: [
+            {
+              text: '// Use code blocks to showcase code snippets',
+            },
+          ],
+        },
+        {
+          type: 'code_line',
+          children: [
+            {
+              text: 'function greet() {',
+            },
+          ],
+        },
+        {
+          type: 'code_line',
+          children: [
+            {
+              text: "  console.info('Hello World!');",
+            },
+          ],
+        },
+        {
+          type: 'code_line',
+          children: [
+            {
+              text: '}',
+            },
+          ],
+        },
+      ],
+      id: '4',
+    },
+    {
+      type: 'h1',
+      children: [
+        {
+          text: '🌱 Marks',
+        },
+      ],
+      id: '1',
+    },
+    {
+      type: 'p',
+      children: [
+        {
+          text: 'Add style and emphasis to your text using the mark plugins, which offers a variety of formatting options.',
+        },
+      ],
+      id: '2',
+    },
+    {
+      type: 'p',
+      children: [
+        {
+          text: 'Make text ',
+        },
+        {
+          text: 'bold',
+          bold: true,
+        },
+        {
+          text: ', ',
+        },
+        {
+          text: 'italic',
+          italic: true,
+        },
+        {
+          text: ', ',
+        },
+        {
+          text: 'underlined',
+          underline: true,
+        },
+        {
+          text: ', or apply a ',
+        },
+        {
+          text: 'combination',
+          bold: true,
+          italic: true,
+          underline: true,
+        },
+        {
+          text: ' of these styles for a visually striking effect.',
+        },
+      ],
+      id: '3',
+    },
+    {
+      type: 'p',
+      children: [
+        {
+          text: 'Add ',
+        },
+        {
+          text: 'strikethrough',
+          strikethrough: true,
+        },
+        {
+          text: ' to indicate deleted or outdated content.',
+        },
+      ],
+      id: '4',
+    },
+    {
+      type: 'p',
+      children: [
+        {
+          text: 'Write code snippets with inline ',
+        },
+        {
+          text: 'code',
+          code: true,
+        },
+        {
+          text: ' formatting for easy readability.',
+        },
+      ],
+      id: '5',
+    },
+    {
+      type: 'p',
+      children: [
+        {
+          text: 'Press ',
+        },
+        {
+          text: '⌘+B',
+          kbd: true,
+        },
+        {
+          text: ' to apply bold mark or ',
+        },
+        {
+          text: '⌘+I',
+          kbd: true,
+        },
+        {
+          text: ' for italic mark.',
+        },
+      ],
+      id: '6',
+    },
+  ];
+
+export const EmptyEditorValue = [
+  {
+    id: "1",
+    type: ELEMENT_PARAGRAPH,
+    children: [{ text: "" }],
+  },
+]
\ No newline at end of file
diff --git a/src/constants/ErrorResponseTypes.ts b/src/constants/ErrorResponseTypes.ts
new file mode 100644
index 0000000..e261710
--- /dev/null
+++ b/src/constants/ErrorResponseTypes.ts
@@ -0,0 +1,5 @@
+
+export const ErrorResponseTypes = {
+    DUPLICATED_USERNAME: "UNIQUE constraint failed: api_account.username",
+    DUPLICATED_EMAIL: "UNIQUE constraint failed: api_account.email",
+}
\ No newline at end of file
diff --git a/src/constants/NavigationBarData.ts b/src/constants/NavigationBarData.ts
new file mode 100644
index 0000000..a178e9e
--- /dev/null
+++ b/src/constants/NavigationBarData.ts
@@ -0,0 +1,37 @@
+export const components: { title: string; href: string; description: string }[] = [
+	{
+		title: "Alert Dialog",
+		href: "/docs/primitives/alert-dialog",
+		description:
+			"A modal dialog that interrupts the user with important content and expects a response.",
+	},
+	{
+		title: "Hover Card",
+		href: "/docs/primitives/hover-card",
+		description:
+			"For sighted users to preview content available behind a link.",
+	},
+	{
+		title: "Progress",
+		href: "/docs/primitives/progress",
+		description:
+			"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+	},
+	{
+		title: "Scroll-area",
+		href: "/docs/primitives/scroll-area",
+		description: "Visually or semantically separates content.",
+	},
+	{
+		title: "Tabs",
+		href: "/docs/primitives/tabs",
+		description:
+			"A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+	},
+	{
+		title: "Tooltip",
+		href: "/docs/primitives/tooltip",
+		description:
+			"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+	},
+];
\ No newline at end of file
diff --git a/src/constants/ProgrammingLanguage.ts b/src/constants/ProgrammingLanguage.ts
new file mode 100644
index 0000000..7f47c0e
--- /dev/null
+++ b/src/constants/ProgrammingLanguage.ts
@@ -0,0 +1,27 @@
+export const ProgrammingLanguageOptions = [
+    {
+        value: 'c',
+        label: 'C'
+    },
+    {
+        value: 'cpp',
+        label: 'C++'
+    },
+    {
+        value: 'python',
+        label: 'Python'
+    },
+    {
+        value: 'javascript',
+        label: 'Javascript'
+    },
+]
+
+export const ProgrammingLanguageLabel:{
+    [key: string]: string
+} = {
+    'c': 'C',
+    'cpp': 'C++',
+    'python': 'Python',
+    'javascript': 'Javascript'
+}
\ No newline at end of file
diff --git a/src/constants/TestcaseStatusIndicatorColor.ts b/src/constants/TestcaseStatusIndicatorColor.ts
new file mode 100644
index 0000000..4846d31
--- /dev/null
+++ b/src/constants/TestcaseStatusIndicatorColor.ts
@@ -0,0 +1,6 @@
+export const TestcaseStatusIndicatorColor = {
+    "OK": "green-400",
+    "TIMEOUT": "yellow-400",
+    "FAILED": "red-400",
+    "ERROR": "zinc-300"
+}
\ No newline at end of file
diff --git a/src/contexts/CourseNavSidebarContexnt.ts b/src/contexts/CourseNavSidebarContexnt.ts
new file mode 100644
index 0000000..7ee856d
--- /dev/null
+++ b/src/contexts/CourseNavSidebarContexnt.ts
@@ -0,0 +1,44 @@
+import { createContext, useState } from "react";
+import { TopicPopulateTopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel } from "../types/models/Topic.model";
+
+export type CourseNavSidebarContextType = {
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    section: string;
+    setSection: React.Dispatch<React.SetStateAction<string>>;
+    course?: TopicPopulateTopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel
+    setCourse: React.Dispatch<React.SetStateAction<TopicPopulateTopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel | undefined>>;
+    recentOpenCollection: string[];
+    setRecentOpenCollection: React.Dispatch<React.SetStateAction<string[]>>;
+}
+
+const iCourseNavSidebarContextState: CourseNavSidebarContextType = {
+    isOpen: true,
+    setIsOpen: () => {},
+    section: "",
+    setSection: () => {},
+    course: undefined,
+    setCourse: () => {},
+    recentOpenCollection: [],
+    setRecentOpenCollection: () => {}
+}
+
+export const getCourseNavSidebarContextStateValue = ():CourseNavSidebarContextType => {
+    const [course, setCourse] = useState<TopicPopulateTopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel>();
+	const [isOpen, setIsOpen] = useState(false);
+	const [section, setSection] = useState("");
+    const [recentOpenCollection, setRecentOpenCollection] = useState<string[]>([]);
+
+    return {
+        course,
+        setCourse,
+        isOpen,
+        setIsOpen,
+        section,
+        setSection,
+        recentOpenCollection,
+        setRecentOpenCollection
+    }
+}
+
+export const CourseNavSidebarContext = createContext<CourseNavSidebarContextType>(iCourseNavSidebarContextState);
\ No newline at end of file
diff --git a/src/contexts/LoginContext.ts b/src/contexts/LoginContext.ts
new file mode 100644
index 0000000..9fd9d94
--- /dev/null
+++ b/src/contexts/LoginContext.ts
@@ -0,0 +1,13 @@
+import { createContext } from "react";
+
+export type LoginContextType = {
+	isLogin: boolean | null;
+	setIsLogin: React.Dispatch<React.SetStateAction<boolean|null>>; 
+}
+
+const iLoginContextState: LoginContextType = {
+	isLogin: null,
+	setIsLogin: () => {},
+}
+
+export const LoginContext = createContext<LoginContextType>(iLoginContextState);
\ No newline at end of file
diff --git a/src/contexts/NavSidebarContext.ts b/src/contexts/NavSidebarContext.ts
new file mode 100644
index 0000000..a4cfafa
--- /dev/null
+++ b/src/contexts/NavSidebarContext.ts
@@ -0,0 +1,17 @@
+import { createContext } from "react";
+
+export type NavSidebarContextType = {
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    section: string;
+    setSection: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const iNavSidebarContextState: NavSidebarContextType = {
+    isOpen: true,
+    setIsOpen: () => {},
+    section: "",
+    setSection: () => {},
+}
+
+export const NavSidebarContext = createContext<NavSidebarContextType>(iNavSidebarContextState);
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 5bffe95..ae01955 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,87 +1,61 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+ 
 
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
-
-
-/* :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
+@layer base {
   :root {
-    color: #213547;
-    background-color: #ffffff;
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 142.1 76.2% 36.3%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 142.1 76.2% 36.3%;
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 0 0% 95%;
+    --card: 24 9.8% 10%;
+    --card-foreground: 0 0% 95%;
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 95%;
+    --primary: 142.1 70.6% 45.3%;
+    --primary-foreground: 144.9 80.4% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 142.4 71.8% 29.2%;
   }
-  a:hover {
-    color: #747bff;
+}
+
+ 
+@layer base {
+  * {
+    @apply border-border;
   }
-  button {
-    background-color: #f9f9f9;
+  body {
+    @apply bg-background text-foreground;
   }
-} */
+}
\ No newline at end of file
diff --git a/src/layout/CenterLayout.tsx b/src/layout/CenterLayout.tsx
new file mode 100644
index 0000000..b1aa4f0
--- /dev/null
+++ b/src/layout/CenterLayout.tsx
@@ -0,0 +1,20 @@
+import { Props } from "../types/Props";
+import NavbarMenuLayout from "./NavbarMenuLayout";
+
+const CenterContainer = ({ children, className = "" }: Props) => {
+	return (
+		<NavbarMenuLayout yPad={false} xPad={false}>
+			<div className="flex h-screen">
+				<div
+					className={
+						"m-auto " + className
+					} /* className="m-auto w-1/2" */
+				>
+					{children}
+				</div>
+			</div>
+		</NavbarMenuLayout>
+	);
+};
+
+export default CenterContainer;
diff --git a/src/layout/CourseNavbarSidebarLayout.tsx b/src/layout/CourseNavbarSidebarLayout.tsx
new file mode 100644
index 0000000..e72a219
--- /dev/null
+++ b/src/layout/CourseNavbarSidebarLayout.tsx
@@ -0,0 +1,40 @@
+import React, { useContext } from "react";
+import NavbarMenuLayout from "./NavbarMenuLayout";
+import CourseNavSidebar from "../components/NavigationBar/CourseNavSidebar";
+import { Separator } from "../components/shadcn/Seperator";
+import { CourseNavSidebarContext } from "../contexts/CourseNavSidebarContexnt";
+
+const CourseNavbarSidebarLayout = ({
+	children,
+}: {
+	children?: React.ReactNode;
+}) => {
+
+	const {isOpen} = useContext(CourseNavSidebarContext)
+
+	const widthAdjuster = () => {
+		if (isOpen) {
+			return ["w-1/6 ", "w-5/6 "];
+		}
+
+		else {
+			return ["", "w-full "];
+		}
+	}
+
+	return (
+		<NavbarMenuLayout xPad={false} yPad={false}>
+			<div className="flex">
+				<div className={widthAdjuster()[0]}>
+					<CourseNavSidebar />
+				</div>
+				<div>
+					<Separator orientation="vertical" className="" />
+				</div>
+				<div className={"pt-10 " + widthAdjuster()[1]}>{children}</div>
+			</div>
+		</NavbarMenuLayout>
+	);
+};
+
+export default CourseNavbarSidebarLayout;
diff --git a/src/layout/NavbarMenuLayout.tsx b/src/layout/NavbarMenuLayout.tsx
new file mode 100644
index 0000000..b780cb6
--- /dev/null
+++ b/src/layout/NavbarMenuLayout.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import NavigationBar from "../components/NavigationBar/NavigationBar";
+
+
+export const NavbarMenuLayout = ({ children, yPad=true, xPad=true }:{
+    children: React.ReactNode,
+    yPad?: boolean,
+    xPad?: boolean
+}) => {
+	return (
+		<div>
+            <div className="z-50 fixed w-full">
+                <NavigationBar/>
+            </div>
+            <div className={(yPad ? "pt-10" : "") + " " + (xPad ? "pl-10" : "")}>
+			    {children}
+            </div>
+		</div>
+	);
+};
+
+export default NavbarMenuLayout;
diff --git a/src/layout/NavbarSidebarLayout.tsx b/src/layout/NavbarSidebarLayout.tsx
new file mode 100644
index 0000000..51acf25
--- /dev/null
+++ b/src/layout/NavbarSidebarLayout.tsx
@@ -0,0 +1,29 @@
+import React, { useContext } from "react";
+import NavSidebar from "../components/NavigationBar/NavSidebar";
+import { Separator } from "../components/shadcn/Seperator";
+import { LoginContext } from "../contexts/LoginContext";
+import NavbarMenuLayout from "./NavbarMenuLayout";
+
+const NavbarSidebarLayout = ({ children }: { children: React.ReactNode }) => {
+	const { isLogin } = useContext(LoginContext);
+
+	return (
+		<NavbarMenuLayout xPad={false} yPad={false}>
+			{
+				isLogin ? (
+					<div className="flex">
+				<NavSidebar />
+				<div>
+					<Separator orientation="vertical" className="" />
+				</div>
+				<div className="w-full pt-10">{children}</div>
+			</div>
+				) : (
+					<p>No Access</p>
+				)
+			}
+		</NavbarMenuLayout>
+	);
+};
+
+export default NavbarSidebarLayout;
diff --git a/src/lib/fonts.ts b/src/lib/fonts.ts
new file mode 100644
index 0000000..1ad9bcb
--- /dev/null
+++ b/src/lib/fonts.ts
@@ -0,0 +1,14 @@
+// import {
+//   JetBrains_Mono as FontMono,
+//   Inter as FontSans,
+// } from 'next/font/google';
+
+// export const fontSans = FontSans({
+//   subsets: ['latin'],
+//   variable: '--font-sans',
+// });
+
+// export const fontMono = FontMono({
+//   subsets: ['latin'],
+//   variable: '--font-mono',
+// });
diff --git a/src/lib/plate/autoformatBlocks.ts b/src/lib/plate/autoformatBlocks.ts
new file mode 100644
index 0000000..1b5da1d
--- /dev/null
+++ b/src/lib/plate/autoformatBlocks.ts
@@ -0,0 +1,88 @@
+import { AutoformatRule } from '@udecode/plate-autoformat';
+import { ELEMENT_BLOCKQUOTE } from '@udecode/plate-block-quote';
+import {
+  ELEMENT_CODE_BLOCK,
+  insertEmptyCodeBlock,
+} from '@udecode/plate-code-block';
+import { ELEMENT_DEFAULT, insertNodes, setNodes } from '@udecode/plate-common';
+import {
+  ELEMENT_H1,
+  ELEMENT_H2,
+  ELEMENT_H3,
+  ELEMENT_H4,
+  ELEMENT_H5,
+  ELEMENT_H6,
+} from '@udecode/plate-heading';
+import { ELEMENT_HR } from '@udecode/plate-horizontal-rule';
+
+import { preFormat } from './autoformatUtils';
+
+export const autoformatBlocks: AutoformatRule[] = [
+  {
+    mode: 'block',
+    type: ELEMENT_H1,
+    match: '# ',
+    preFormat,
+  },
+  {
+    mode: 'block',
+    type: ELEMENT_H2,
+    match: '## ',
+    preFormat,
+  },
+  {
+    mode: 'block',
+    type: ELEMENT_H3,
+    match: '### ',
+    preFormat,
+  },
+  {
+    mode: 'block',
+    type: ELEMENT_H4,
+    match: '#### ',
+    preFormat,
+  },
+  {
+    mode: 'block',
+    type: ELEMENT_H5,
+    match: '##### ',
+    preFormat,
+  },
+  {
+    mode: 'block',
+    type: ELEMENT_H6,
+    match: '###### ',
+    preFormat,
+  },
+  {
+    mode: 'block',
+    type: ELEMENT_BLOCKQUOTE,
+    match: '> ',
+    preFormat,
+  },
+  {
+    mode: 'block',
+    type: ELEMENT_CODE_BLOCK,
+    match: '```',
+    triggerAtBlockStart: false,
+    preFormat,
+    format: (editor) => {
+      insertEmptyCodeBlock(editor, {
+        defaultType: ELEMENT_DEFAULT,
+        insertNodesOptions: { select: true },
+      });
+    },
+  },
+  {
+    mode: 'block',
+    type: ELEMENT_HR,
+    match: ['---', '—-', '___ '],
+    format: (editor) => {
+      setNodes(editor, { type: ELEMENT_HR });
+      insertNodes(editor, {
+        type: ELEMENT_DEFAULT,
+        children: [{ text: '' }],
+      });
+    },
+  },
+];
diff --git a/src/lib/plate/autoformatIndentLists.ts b/src/lib/plate/autoformatIndentLists.ts
new file mode 100644
index 0000000..9d5aa06
--- /dev/null
+++ b/src/lib/plate/autoformatIndentLists.ts
@@ -0,0 +1,24 @@
+import { AutoformatRule } from '@udecode/plate-autoformat';
+import { ListStyleType, toggleIndentList } from '@udecode/plate-indent-list';
+
+export const autoformatIndentLists: AutoformatRule[] = [
+  {
+    mode: 'block',
+    type: 'list',
+    match: ['* ', '- '],
+    format: (editor) => {
+      toggleIndentList(editor, {
+        listStyleType: ListStyleType.Disc,
+      });
+    },
+  },
+  {
+    mode: 'block',
+    type: 'list',
+    match: ['1. ', '1) '],
+    format: (editor) =>
+      toggleIndentList(editor, {
+        listStyleType: ListStyleType.Decimal,
+      }),
+  },
+];
diff --git a/src/lib/plate/autoformatLists.ts b/src/lib/plate/autoformatLists.ts
new file mode 100644
index 0000000..a0664e4
--- /dev/null
+++ b/src/lib/plate/autoformatLists.ts
@@ -0,0 +1,46 @@
+import { AutoformatRule } from '@udecode/plate-autoformat';
+import { isBlock, setNodes } from '@udecode/plate-common';
+import {
+  ELEMENT_LI,
+  ELEMENT_OL,
+  ELEMENT_TODO_LI,
+  ELEMENT_UL,
+  TTodoListItemElement,
+} from '@udecode/plate-list';
+
+import { formatList, preFormat } from './autoformatUtils';
+
+export const autoformatLists: AutoformatRule[] = [
+  {
+    mode: 'block',
+    type: ELEMENT_LI,
+    match: ['* ', '- '],
+    preFormat,
+    format: (editor) => formatList(editor, ELEMENT_UL),
+  },
+  {
+    mode: 'block',
+    type: ELEMENT_LI,
+    match: ['1. ', '1) '],
+    preFormat,
+    format: (editor) => formatList(editor, ELEMENT_OL),
+  },
+  {
+    mode: 'block',
+    type: ELEMENT_TODO_LI,
+    match: '[] ',
+  },
+  {
+    mode: 'block',
+    type: ELEMENT_TODO_LI,
+    match: '[x] ',
+    format: (editor) =>
+      setNodes<TTodoListItemElement>(
+        editor,
+        { type: ELEMENT_TODO_LI, checked: true },
+        {
+          match: (n) => isBlock(editor, n),
+        }
+      ),
+  },
+];
diff --git a/src/lib/plate/autoformatMarks.ts b/src/lib/plate/autoformatMarks.ts
new file mode 100644
index 0000000..5f980b8
--- /dev/null
+++ b/src/lib/plate/autoformatMarks.ts
@@ -0,0 +1,85 @@
+import {
+  MARK_BOLD,
+  MARK_CODE,
+  MARK_ITALIC,
+  MARK_STRIKETHROUGH,
+  MARK_SUBSCRIPT,
+  MARK_SUPERSCRIPT,
+  MARK_UNDERLINE,
+} from '@udecode/plate-basic-marks';
+import { MARK_HIGHLIGHT } from '@udecode/plate-highlight';
+
+import { MyAutoformatRule } from './plate-types';
+
+export const autoformatMarks: MyAutoformatRule[] = [
+  {
+    mode: 'mark',
+    type: [MARK_BOLD, MARK_ITALIC],
+    match: '***',
+  },
+  {
+    mode: 'mark',
+    type: [MARK_UNDERLINE, MARK_ITALIC],
+    match: '__*',
+  },
+  {
+    mode: 'mark',
+    type: [MARK_UNDERLINE, MARK_BOLD],
+    match: '__**',
+  },
+  {
+    mode: 'mark',
+    type: [MARK_UNDERLINE, MARK_BOLD, MARK_ITALIC],
+    match: '___***',
+  },
+  {
+    mode: 'mark',
+    type: MARK_BOLD,
+    match: '**',
+  },
+  {
+    mode: 'mark',
+    type: MARK_UNDERLINE,
+    match: '__',
+  },
+  {
+    mode: 'mark',
+    type: MARK_ITALIC,
+    match: '*',
+  },
+  {
+    mode: 'mark',
+    type: MARK_ITALIC,
+    match: '_',
+  },
+  {
+    mode: 'mark',
+    type: MARK_STRIKETHROUGH,
+    match: '~~',
+  },
+  {
+    mode: 'mark',
+    type: MARK_SUPERSCRIPT,
+    match: '^',
+  },
+  {
+    mode: 'mark',
+    type: MARK_SUBSCRIPT,
+    match: '~',
+  },
+  {
+    mode: 'mark',
+    type: MARK_HIGHLIGHT,
+    match: '==',
+  },
+  {
+    mode: 'mark',
+    type: MARK_HIGHLIGHT,
+    match: '≡',
+  },
+  {
+    mode: 'mark',
+    type: MARK_CODE,
+    match: '`',
+  },
+];
diff --git a/src/lib/plate/autoformatPlugin.ts b/src/lib/plate/autoformatPlugin.ts
new file mode 100644
index 0000000..2cfbedd
--- /dev/null
+++ b/src/lib/plate/autoformatPlugin.ts
@@ -0,0 +1,11 @@
+import { AutoformatPlugin } from '@udecode/plate-autoformat';
+import { PlatePlugin } from '@udecode/plate-common';
+
+import { autoformatRules } from './autoformatRules';
+
+export const autoformatPlugin: Partial<PlatePlugin<AutoformatPlugin>> = {
+  options: {
+    rules: autoformatRules as any,
+    enableUndoOnDelete: true,
+  },
+};
diff --git a/src/lib/plate/autoformatRules.ts b/src/lib/plate/autoformatRules.ts
new file mode 100644
index 0000000..46707b6
--- /dev/null
+++ b/src/lib/plate/autoformatRules.ts
@@ -0,0 +1,25 @@
+import {
+  autoformatArrow,
+  autoformatLegal,
+  autoformatLegalHtml,
+  autoformatMath,
+  autoformatPunctuation,
+  autoformatSmartQuotes,
+} from '@udecode/plate-autoformat';
+
+import { autoformatBlocks } from './autoformatBlocks';
+import { autoformatIndentLists } from './autoformatIndentLists';
+import { autoformatMarks } from './autoformatMarks';
+import { MyAutoformatRule } from './plate-types';
+
+export const autoformatRules = [
+  ...autoformatBlocks,
+  ...autoformatIndentLists,
+  ...autoformatMarks,
+  ...(autoformatSmartQuotes as MyAutoformatRule[]),
+  ...(autoformatPunctuation as MyAutoformatRule[]),
+  ...(autoformatLegal as MyAutoformatRule[]),
+  ...(autoformatLegalHtml as MyAutoformatRule[]),
+  ...(autoformatArrow as MyAutoformatRule[]),
+  ...(autoformatMath as MyAutoformatRule[]),
+];
diff --git a/src/lib/plate/autoformatUtils.ts b/src/lib/plate/autoformatUtils.ts
new file mode 100644
index 0000000..2ad1adc
--- /dev/null
+++ b/src/lib/plate/autoformatUtils.ts
@@ -0,0 +1,42 @@
+import { AutoformatBlockRule } from '@udecode/plate-autoformat';
+import {
+  ELEMENT_CODE_BLOCK,
+  ELEMENT_CODE_LINE,
+} from '@udecode/plate-code-block';
+import {
+  getParentNode,
+  isElement,
+  isType,
+  PlateEditor,
+} from '@udecode/plate-common';
+import { toggleList, unwrapList } from '@udecode/plate-list';
+
+export const preFormat: AutoformatBlockRule['preFormat'] = (editor) =>
+  unwrapList(editor);
+
+export const format = (editor: PlateEditor, customFormatting: any) => {
+  if (editor.selection) {
+    const parentEntry = getParentNode(editor, editor.selection);
+    if (!parentEntry) return;
+    const [node] = parentEntry;
+    if (
+      isElement(node) &&
+      !isType(editor, node, ELEMENT_CODE_BLOCK) &&
+      !isType(editor, node, ELEMENT_CODE_LINE)
+    ) {
+      customFormatting();
+    }
+  }
+};
+
+export const formatList = (editor: PlateEditor, elementType: string) => {
+  format(editor, () =>
+    toggleList(editor, {
+      type: elementType,
+    })
+  );
+};
+
+export const formatText = (editor: PlateEditor, text: string) => {
+  format(editor, () => editor.insertText(text));
+};
diff --git a/src/lib/plate/comments.ts b/src/lib/plate/comments.ts
new file mode 100644
index 0000000..58bcb7c
--- /dev/null
+++ b/src/lib/plate/comments.ts
@@ -0,0 +1,9 @@
+export const commentsUsers = {
+  1: {
+    id: '1',
+    name: 'zbeyens',
+    avatarUrl: 'https://avatars.githubusercontent.com/u/19695832?s=96&v=4',
+  },
+};
+
+export const myUserId = '1';
diff --git a/src/lib/plate/dragOverCursorPlugin.ts b/src/lib/plate/dragOverCursorPlugin.ts
new file mode 100644
index 0000000..c69edde
--- /dev/null
+++ b/src/lib/plate/dragOverCursorPlugin.ts
@@ -0,0 +1,39 @@
+import { findEventRange, PlatePlugin } from '@udecode/plate-common';
+
+import { cursorStore } from '../../components/plate-ui/cursor-overlay';
+
+export const KEY_DRAG_OVER_CURSOR = 'dragOverCursor';
+
+export const dragOverCursorPlugin: PlatePlugin = {
+  key: KEY_DRAG_OVER_CURSOR,
+  handlers: {
+    onDragOver: (editor) => (event) => {
+      if (editor.isDragging) return;
+
+      const range = findEventRange(editor, event);
+      if (!range) return;
+
+      cursorStore.set.cursors({
+        drag: {
+          key: 'drag',
+          data: {
+            style: {
+              backgroundColor: 'hsl(222.2 47.4% 11.2%)',
+              width: 3,
+            },
+          },
+          selection: range,
+        },
+      });
+    },
+    onDragLeave: () => () => {
+      cursorStore.set.cursors({});
+    },
+    onDragEnd: () => () => {
+      cursorStore.set.cursors({});
+    },
+    onDrop: () => () => {
+      cursorStore.set.cursors({});
+    },
+  },
+};
diff --git a/src/lib/plate/mentionables.ts b/src/lib/plate/mentionables.ts
new file mode 100644
index 0000000..4c1ea95
--- /dev/null
+++ b/src/lib/plate/mentionables.ts
@@ -0,0 +1,79 @@
+import { TComboboxItem } from '@udecode/plate-combobox';
+
+export const MENTIONABLES: TComboboxItem[] = [
+  { key: '0', text: 'Aayla Secura' },
+  { key: '1', text: 'Adi Gallia' },
+  {
+    key: '2',
+    text: 'Admiral Dodd Rancit',
+  },
+  {
+    key: '3',
+    text: 'Admiral Firmus Piett',
+  },
+  {
+    key: '4',
+    text: 'Admiral Gial Ackbar',
+  },
+  { key: '5', text: 'Admiral Ozzel' },
+  { key: '6', text: 'Admiral Raddus' },
+  {
+    key: '7',
+    text: 'Admiral Terrinald Screed',
+  },
+  { key: '8', text: 'Admiral Trench' },
+  {
+    key: '9',
+    text: 'Admiral U.O. Statura',
+  },
+  { key: '10', text: 'Agen Kolar' },
+  { key: '11', text: 'Agent Kallus' },
+  {
+    key: '12',
+    text: 'Aiolin and Morit Astarte',
+  },
+  { key: '13', text: 'Aks Moe' },
+  { key: '14', text: 'Almec' },
+  { key: '15', text: 'Alton Kastle' },
+  { key: '16', text: 'Amee' },
+  { key: '17', text: 'AP-5' },
+  { key: '18', text: 'Armitage Hux' },
+  { key: '19', text: 'Artoo' },
+  { key: '20', text: 'Arvel Crynyd' },
+  { key: '21', text: 'Asajj Ventress' },
+  { key: '22', text: 'Aurra Sing' },
+  { key: '23', text: 'AZI-3' },
+  { key: '24', text: 'Bala-Tik' },
+  { key: '25', text: 'Barada' },
+  { key: '26', text: 'Bargwill Tomder' },
+  { key: '27', text: 'Baron Papanoida' },
+  { key: '28', text: 'Barriss Offee' },
+  { key: '29', text: 'Baze Malbus' },
+  { key: '30', text: 'Bazine Netal' },
+  { key: '31', text: 'BB-8' },
+  { key: '32', text: 'BB-9E' },
+  { key: '33', text: 'Ben Quadinaros' },
+  { key: '34', text: 'Berch Teller' },
+  { key: '35', text: 'Beru Lars' },
+  { key: '36', text: 'Bib Fortuna' },
+  {
+    key: '37',
+    text: 'Biggs Darklighter',
+  },
+  { key: '38', text: 'Black Krrsantan' },
+  { key: '39', text: 'Bo-Katan Kryze' },
+  { key: '40', text: 'Boba Fett' },
+  { key: '41', text: 'Bobbajo' },
+  { key: '42', text: 'Bodhi Rook' },
+  { key: '43', text: 'Borvo the Hutt' },
+  { key: '44', text: 'Boss Nass' },
+  { key: '45', text: 'Bossk' },
+  {
+    key: '46',
+    text: 'Breha Antilles-Organa',
+  },
+  { key: '47', text: 'Bren Derlin' },
+  { key: '48', text: 'Brendol Hux' },
+  { key: '49', text: 'BT-1' },
+  { key: '50', text: 'C-3PO' },
+];
diff --git a/src/lib/plate/plate-plugins.ts b/src/lib/plate/plate-plugins.ts
new file mode 100644
index 0000000..174dc10
--- /dev/null
+++ b/src/lib/plate/plate-plugins.ts
@@ -0,0 +1,420 @@
+import { createAlignPlugin } from '@udecode/plate-alignment';
+import { createAutoformatPlugin } from '@udecode/plate-autoformat';
+import {
+  createBoldPlugin,
+  createCodePlugin,
+  createItalicPlugin,
+  createStrikethroughPlugin,
+  createSubscriptPlugin,
+  createSuperscriptPlugin,
+  createUnderlinePlugin,
+  MARK_BOLD,
+  MARK_CODE,
+  MARK_ITALIC,
+  MARK_STRIKETHROUGH,
+  MARK_SUBSCRIPT,
+  MARK_SUPERSCRIPT,
+  MARK_UNDERLINE,
+} from '@udecode/plate-basic-marks';
+import {
+  createBlockquotePlugin,
+  ELEMENT_BLOCKQUOTE,
+} from '@udecode/plate-block-quote';
+import {
+  createExitBreakPlugin,
+  createSoftBreakPlugin,
+} from '@udecode/plate-break';
+import { createCaptionPlugin } from '@udecode/plate-caption';
+import {
+  createCodeBlockPlugin,
+  ELEMENT_CODE_BLOCK,
+  ELEMENT_CODE_LINE,
+  ELEMENT_CODE_SYNTAX,
+  isCodeBlockEmpty,
+  isSelectionAtCodeBlockStart,
+  unwrapCodeBlock,
+} from '@udecode/plate-code-block';
+import { createComboboxPlugin } from '@udecode/plate-combobox';
+import { createCommentsPlugin, MARK_COMMENT } from '@udecode/plate-comments';
+import {
+  createPlugins,
+  isBlockAboveEmpty,
+  isSelectionAtBlockStart,
+  PlateElement,
+  PlateLeaf,
+  RenderAfterEditable,
+  someNode,
+  withProps,
+} from '@udecode/plate-common';
+import { createDndPlugin } from '@udecode/plate-dnd';
+import { createEmojiPlugin } from '@udecode/plate-emoji';
+import {
+  createExcalidrawPlugin,
+  ELEMENT_EXCALIDRAW,
+} from '@udecode/plate-excalidraw';
+import {
+  createFontBackgroundColorPlugin,
+  createFontColorPlugin,
+  createFontSizePlugin,
+} from '@udecode/plate-font';
+import {
+  createHeadingPlugin,
+  ELEMENT_H1,
+  ELEMENT_H2,
+  ELEMENT_H3,
+  ELEMENT_H4,
+  ELEMENT_H5,
+  ELEMENT_H6,
+  KEYS_HEADING,
+} from '@udecode/plate-heading';
+import {
+  createHighlightPlugin,
+  MARK_HIGHLIGHT,
+} from '@udecode/plate-highlight';
+import {
+  createHorizontalRulePlugin,
+  ELEMENT_HR,
+} from '@udecode/plate-horizontal-rule';
+import { createIndentPlugin } from '@udecode/plate-indent';
+import {
+  createIndentListPlugin,
+  KEY_LIST_STYLE_TYPE,
+} from '@udecode/plate-indent-list';
+import { createJuicePlugin } from '@udecode/plate-juice';
+import { createKbdPlugin, MARK_KBD } from '@udecode/plate-kbd';
+import { createLineHeightPlugin } from '@udecode/plate-line-height';
+import { createLinkPlugin, ELEMENT_LINK } from '@udecode/plate-link';
+import {
+  createTodoListPlugin,
+  ELEMENT_LI,
+  ELEMENT_OL,
+  ELEMENT_TODO_LI,
+  ELEMENT_UL,
+} from '@udecode/plate-list';
+import {
+  createImagePlugin,
+  createMediaEmbedPlugin,
+  ELEMENT_IMAGE,
+  ELEMENT_MEDIA_EMBED,
+} from '@udecode/plate-media';
+import {
+  createMentionPlugin,
+  ELEMENT_MENTION,
+  ELEMENT_MENTION_INPUT,
+} from '@udecode/plate-mention';
+import { createNodeIdPlugin } from '@udecode/plate-node-id';
+import {
+  createParagraphPlugin,
+  ELEMENT_PARAGRAPH,
+} from '@udecode/plate-paragraph';
+import { createResetNodePlugin } from '@udecode/plate-reset-node';
+import { createSelectOnBackspacePlugin } from '@udecode/plate-select';
+import { createBlockSelectionPlugin } from '@udecode/plate-selection';
+import { createDeserializeDocxPlugin } from '@udecode/plate-serializer-docx';
+import { createDeserializeMdPlugin } from '@udecode/plate-serializer-md';
+import { createTabbablePlugin } from '@udecode/plate-tabbable';
+import {
+  createTablePlugin,
+  ELEMENT_TABLE,
+  ELEMENT_TD,
+  ELEMENT_TH,
+  ELEMENT_TR,
+} from '@udecode/plate-table';
+import { createTrailingBlockPlugin } from '@udecode/plate-trailing-block';
+
+import { autoformatPlugin } from './autoformatPlugin';
+import { dragOverCursorPlugin } from './dragOverCursorPlugin';
+import { BlockquoteElement } from '../../components/plate-ui/blockquote-element';
+import { CodeBlockElement } from '../../components/plate-ui/code-block-element';
+import { CodeLeaf } from '../../components/plate-ui/code-leaf';
+import { CodeLineElement } from '../../components/plate-ui/code-line-element';
+import { CodeSyntaxLeaf } from '../../components/plate-ui/code-syntax-leaf';
+import { CommentLeaf } from '../../components/plate-ui/comment-leaf';
+import { EmojiCombobox } from '../../components/plate-ui/emoji-combobox';
+import { ExcalidrawElement } from '../../components/plate-ui/excalidraw-element';
+import { HeadingElement } from '../../components/plate-ui/heading-element';
+import { HighlightLeaf } from '../../components/plate-ui/highlight-leaf';
+import { HrElement } from '../../components/plate-ui/hr-element';
+import { ImageElement } from '../../components/plate-ui/image-element';
+import { KbdLeaf } from '../../components/plate-ui/kbd-leaf';
+import { LinkElement } from '../../components/plate-ui/link-element';
+import { LinkFloatingToolbar } from '../../components/plate-ui/link-floating-toolbar';
+import { ListElement } from '../../components/plate-ui/list-element';
+import { MediaEmbedElement } from '../../components/plate-ui/media-embed-element';
+import { MentionElement } from '../../components/plate-ui/mention-element';
+import { MentionInputElement } from '../../components/plate-ui/mention-input-element';
+import { ParagraphElement } from '../../components/plate-ui/paragraph-element';
+import { withPlaceholders } from '../../components/plate-ui/placeholder';
+import {
+  TableCellElement,
+  TableCellHeaderElement,
+} from '../../components/plate-ui/table-cell-element';
+import { TableElement } from '../../components/plate-ui/table-element';
+import { TableRowElement } from '../../components/plate-ui/table-row-element';
+import { TodoListElement } from '../../components/plate-ui/todo-list-element';
+import { withDraggables } from '../../components/plate-ui/with-draggables';
+import { TabbableElement } from '../../components/plate-ui/tabbable-element';
+
+const resetBlockTypesCommonRule = {
+  types: [ELEMENT_BLOCKQUOTE, ELEMENT_TODO_LI],
+  defaultType: ELEMENT_PARAGRAPH,
+};
+
+const resetBlockTypesCodeBlockRule = {
+  types: [ELEMENT_CODE_BLOCK],
+  defaultType: ELEMENT_PARAGRAPH,
+  onReset: unwrapCodeBlock,
+};
+
+export const plugins = createPlugins(
+  [
+    // Nodes
+    createParagraphPlugin(),
+    createHeadingPlugin(),
+    createBlockquotePlugin(),
+    createCodeBlockPlugin(),
+    createHorizontalRulePlugin(),
+    createLinkPlugin({
+      renderAfterEditable: LinkFloatingToolbar as RenderAfterEditable,
+    }),
+    createImagePlugin(),
+    createMediaEmbedPlugin(),
+    createCaptionPlugin({
+      options: { pluginKeys: [ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED] },
+    }),
+    createMentionPlugin(),
+    createTablePlugin(),
+    createTodoListPlugin(),
+    createExcalidrawPlugin(),
+
+    // Marks
+    createBoldPlugin(),
+    createItalicPlugin(),
+    createUnderlinePlugin(),
+    createStrikethroughPlugin(),
+    createCodePlugin(),
+    createSubscriptPlugin(),
+    createSuperscriptPlugin(),
+    createFontColorPlugin(),
+    createFontBackgroundColorPlugin(),
+    createFontSizePlugin(),
+    createHighlightPlugin(),
+    createKbdPlugin(),
+
+    // Block Style
+    createAlignPlugin({
+      inject: {
+        props: {
+          validTypes: [ELEMENT_PARAGRAPH, ELEMENT_H1, ELEMENT_H2, ELEMENT_H3],
+        },
+      },
+    }),
+    createIndentPlugin({
+      inject: {
+        props: {
+          validTypes: [
+            ELEMENT_PARAGRAPH,
+            ELEMENT_H1,
+            ELEMENT_H2,
+            ELEMENT_H3,
+            ELEMENT_BLOCKQUOTE,
+            ELEMENT_CODE_BLOCK,
+          ],
+        },
+      },
+    }),
+    createIndentListPlugin({
+      inject: {
+        props: {
+          validTypes: [
+            ELEMENT_PARAGRAPH,
+            ELEMENT_H1,
+            ELEMENT_H2,
+            ELEMENT_H3,
+            ELEMENT_BLOCKQUOTE,
+            ELEMENT_CODE_BLOCK,
+          ],
+        },
+      },
+    }),
+    createLineHeightPlugin({
+      inject: {
+        props: {
+          defaultNodeValue: 1.5,
+          validNodeValues: [1, 1.2, 1.5, 2, 3],
+          validTypes: [ELEMENT_PARAGRAPH, ELEMENT_H1, ELEMENT_H2, ELEMENT_H3],
+        },
+      },
+    }),
+
+    // Functionality
+    createAutoformatPlugin(autoformatPlugin),
+    createBlockSelectionPlugin({
+      options: {
+        sizes: {
+          top: 0,
+          bottom: 0,
+        },
+      },
+    }),
+    createComboboxPlugin(),
+    createDndPlugin({
+      options: { enableScroller: true },
+    }),
+    createEmojiPlugin({
+      renderAfterEditable: EmojiCombobox as RenderAfterEditable,
+    }),
+    createExitBreakPlugin({
+      options: {
+        rules: [
+          {
+            hotkey: 'mod+enter',
+          },
+          {
+            hotkey: 'mod+shift+enter',
+            before: true,
+          },
+          {
+            hotkey: 'enter',
+            query: {
+              start: true,
+              end: true,
+              allow: KEYS_HEADING,
+            },
+            relative: true,
+            level: 1,
+          },
+        ],
+      },
+    }),
+    createNodeIdPlugin(),
+    createResetNodePlugin({
+      options: {
+        rules: [
+          {
+            ...resetBlockTypesCommonRule,
+            hotkey: 'Enter',
+            predicate: isBlockAboveEmpty,
+          },
+          {
+            ...resetBlockTypesCommonRule,
+            hotkey: 'Backspace',
+            predicate: isSelectionAtBlockStart,
+          },
+          {
+            ...resetBlockTypesCodeBlockRule,
+            hotkey: 'Enter',
+            predicate: isCodeBlockEmpty,
+          },
+          {
+            ...resetBlockTypesCodeBlockRule,
+            hotkey: 'Backspace',
+            predicate: isSelectionAtCodeBlockStart,
+          },
+        ],
+      },
+    }),
+    createSelectOnBackspacePlugin({
+      options: {
+        query: {
+          allow: [ELEMENT_IMAGE, ELEMENT_HR],
+        },
+      },
+    }),
+
+    createSoftBreakPlugin({
+      options: {
+        rules: [
+          { hotkey: 'shift+enter' },
+          {
+            hotkey: 'enter',
+            query: {
+              allow: [ELEMENT_CODE_BLOCK, ELEMENT_BLOCKQUOTE, ELEMENT_TD],
+            },
+          },
+        ],
+      },
+    }),
+    createTabbablePlugin({
+      options: {
+        query: (editor) => {
+          if (isSelectionAtBlockStart(editor)) return false;
+
+          return !someNode(editor, {
+            match: (n) => {
+              return !!(
+                n.type &&
+                ([ELEMENT_TABLE, ELEMENT_LI, ELEMENT_CODE_BLOCK].includes(
+                  n.type as string
+                ) ||
+                  n[KEY_LIST_STYLE_TYPE])
+              );
+            },
+          });
+        },
+      },
+      plugins: [
+        {
+          key: 'tabbable_element',
+          isElement: true,
+          isVoid: true,
+          component: TabbableElement,
+        },
+      ],
+    }),
+    createTrailingBlockPlugin({
+      options: { type: ELEMENT_PARAGRAPH },
+    }),
+    dragOverCursorPlugin,
+
+    // Collaboration
+    createCommentsPlugin(),
+
+    // Deserialization
+    createDeserializeDocxPlugin(),
+    createDeserializeMdPlugin(),
+    createJuicePlugin(),
+  ],
+  {
+    components: withDraggables(
+      withPlaceholders({
+        [ELEMENT_BLOCKQUOTE]: BlockquoteElement,
+        [ELEMENT_CODE_BLOCK]: CodeBlockElement,
+        [ELEMENT_CODE_LINE]: CodeLineElement,
+        [ELEMENT_CODE_SYNTAX]: CodeSyntaxLeaf,
+        [ELEMENT_HR]: HrElement,
+        [ELEMENT_H1]: withProps(HeadingElement, { variant: 'h1' }),
+        [ELEMENT_H2]: withProps(HeadingElement, { variant: 'h2' }),
+        [ELEMENT_H3]: withProps(HeadingElement, { variant: 'h3' }),
+        [ELEMENT_H4]: withProps(HeadingElement, { variant: 'h4' }),
+        [ELEMENT_H5]: withProps(HeadingElement, { variant: 'h5' }),
+        [ELEMENT_H6]: withProps(HeadingElement, { variant: 'h6' }),
+        [ELEMENT_IMAGE]: ImageElement,
+        [ELEMENT_LI]: withProps(PlateElement, { as: 'li' }),
+        [ELEMENT_LINK]: LinkElement,
+        [ELEMENT_MEDIA_EMBED]: MediaEmbedElement,
+        [ELEMENT_MENTION]: MentionElement,
+        [ELEMENT_MENTION_INPUT]: MentionInputElement,
+        [ELEMENT_UL]: withProps(ListElement, { variant: 'ul' }),
+        [ELEMENT_OL]: withProps(ListElement, { variant: 'ol' }),
+        [ELEMENT_PARAGRAPH]: ParagraphElement,
+        [ELEMENT_TABLE]: TableElement,
+        [ELEMENT_TD]: TableCellElement,
+        [ELEMENT_TH]: TableCellHeaderElement,
+        [ELEMENT_TODO_LI]: TodoListElement,
+        [ELEMENT_TR]: TableRowElement,
+        [ELEMENT_EXCALIDRAW]: ExcalidrawElement,
+        [MARK_BOLD]: withProps(PlateLeaf, { as: 'strong' }),
+        [MARK_CODE]: CodeLeaf,
+        [MARK_HIGHLIGHT]: HighlightLeaf,
+        [MARK_ITALIC]: withProps(PlateLeaf, { as: 'em' }),
+        [MARK_KBD]: KbdLeaf,
+        [MARK_STRIKETHROUGH]: withProps(PlateLeaf, { as: 's' }),
+        [MARK_SUBSCRIPT]: withProps(PlateLeaf, { as: 'sub' }),
+        [MARK_SUPERSCRIPT]: withProps(PlateLeaf, { as: 'sup' }),
+        [MARK_UNDERLINE]: withProps(PlateLeaf, { as: 'u' }),
+        [MARK_COMMENT]: CommentLeaf,
+      })
+    ),
+  }
+);
diff --git a/src/lib/plate/plate-types.ts b/src/lib/plate/plate-types.ts
new file mode 100644
index 0000000..4007855
--- /dev/null
+++ b/src/lib/plate/plate-types.ts
@@ -0,0 +1,399 @@
+import React from 'react';
+import { AutoformatRule } from '@udecode/plate-autoformat';
+import { ELEMENT_BLOCKQUOTE } from '@udecode/plate-block-quote';
+import {
+  ELEMENT_CODE_BLOCK,
+  ELEMENT_CODE_LINE,
+} from '@udecode/plate-code-block';
+import { TCommentText } from '@udecode/plate-comments';
+import {
+  createPlateEditor,
+  CreatePlateEditorOptions,
+  createPluginFactory,
+  createPlugins,
+  createTEditor,
+  Decorate,
+  DecorateEntry,
+  DOMHandler,
+  EDescendant,
+  EElement,
+  EElementEntry,
+  EElementOrText,
+  EMarks,
+  ENode,
+  ENodeEntry,
+  EText,
+  ETextEntry,
+  getTEditor,
+  InjectComponent,
+  InjectProps,
+  KeyboardHandler,
+  NoInfer,
+  OnChange,
+  OverrideByKey,
+  PlateEditor,
+  PlateId,
+  PlatePlugin,
+  PlatePluginComponent,
+  PlatePluginInsertData,
+  PlatePluginProps,
+  PlateProps,
+  PluginOptions,
+  SerializeHtml,
+  TElement,
+  TNodeEntry,
+  TReactEditor,
+  TText,
+  useEditorRef,
+  useEditorState,
+  usePlateActions,
+  usePlateSelectors,
+  usePlateStates,
+  WithOverride,
+} from '@udecode/plate-common';
+import {
+  ELEMENT_EXCALIDRAW,
+  TExcalidrawElement,
+} from '@udecode/plate-excalidraw';
+import {
+  ELEMENT_H1,
+  ELEMENT_H2,
+  ELEMENT_H3,
+  ELEMENT_H4,
+  ELEMENT_H5,
+  ELEMENT_H6,
+} from '@udecode/plate-heading';
+import { ELEMENT_HR } from '@udecode/plate-horizontal-rule';
+import { ELEMENT_LINK, TLinkElement } from '@udecode/plate-link';
+import {
+  ELEMENT_LI,
+  ELEMENT_OL,
+  ELEMENT_TODO_LI,
+  ELEMENT_UL,
+  TTodoListItemElement,
+} from '@udecode/plate-list';
+import {
+  ELEMENT_IMAGE,
+  ELEMENT_MEDIA_EMBED,
+  TImageElement,
+  TMediaEmbedElement,
+} from '@udecode/plate-media';
+import {
+  ELEMENT_MENTION,
+  ELEMENT_MENTION_INPUT,
+  TMentionElement,
+  TMentionInputElement,
+} from '@udecode/plate-mention';
+import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
+import {
+  ELEMENT_TABLE,
+  ELEMENT_TD,
+  ELEMENT_TR,
+  TTableElement,
+} from '@udecode/plate-table';
+
+/**
+ * Text
+ */
+
+export type EmptyText = {
+  text: '';
+};
+
+export type PlainText = {
+  text: string;
+};
+
+export interface RichText extends TText, TCommentText {
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  strikethrough?: boolean;
+  code?: boolean;
+  kbd?: boolean;
+  subscript?: boolean;
+  backgroundColor?: React.CSSProperties['backgroundColor'];
+  fontFamily?: React.CSSProperties['fontFamily'];
+  color?: React.CSSProperties['color'];
+  fontSize?: React.CSSProperties['fontSize'];
+  fontWeight?: React.CSSProperties['fontWeight'];
+}
+
+/**
+ * Inline Elements
+ */
+
+export interface MyLinkElement extends TLinkElement {
+  type: typeof ELEMENT_LINK;
+  children: RichText[];
+}
+
+export interface MyMentionInputElement extends TMentionInputElement {
+  type: typeof ELEMENT_MENTION_INPUT;
+  children: [PlainText];
+}
+
+export interface MyMentionElement extends TMentionElement {
+  type: typeof ELEMENT_MENTION;
+  children: [EmptyText];
+}
+
+export type MyInlineElement =
+  | MyLinkElement
+  | MyMentionElement
+  | MyMentionInputElement;
+export type MyInlineDescendant = MyInlineElement | RichText;
+export type MyInlineChildren = MyInlineDescendant[];
+
+/**
+ * Block props
+ */
+
+export interface MyIndentProps {
+  indent?: number;
+}
+
+export interface MyIndentListProps extends MyIndentProps {
+  listStart?: number;
+  listRestart?: number;
+  listStyleType?: string;
+}
+
+export interface MyLineHeightProps {
+  lineHeight?: React.CSSProperties['lineHeight'];
+}
+
+export interface MyAlignProps {
+  align?: React.CSSProperties['textAlign'];
+}
+
+export interface MyBlockElement
+  extends TElement,
+    MyIndentListProps,
+    MyLineHeightProps {
+  id?: PlateId;
+}
+
+/**
+ * Blocks
+ */
+
+export interface MyParagraphElement extends MyBlockElement {
+  type: typeof ELEMENT_PARAGRAPH;
+  children: MyInlineChildren;
+}
+
+export interface MyH1Element extends MyBlockElement {
+  type: typeof ELEMENT_H1;
+  children: MyInlineChildren;
+}
+
+export interface MyH2Element extends MyBlockElement {
+  type: typeof ELEMENT_H2;
+  children: MyInlineChildren;
+}
+
+export interface MyH3Element extends MyBlockElement {
+  type: typeof ELEMENT_H3;
+  children: MyInlineChildren;
+}
+
+export interface MyH4Element extends MyBlockElement {
+  type: typeof ELEMENT_H4;
+  children: MyInlineChildren;
+}
+
+export interface MyH5Element extends MyBlockElement {
+  type: typeof ELEMENT_H5;
+  children: MyInlineChildren;
+}
+
+export interface MyH6Element extends MyBlockElement {
+  type: typeof ELEMENT_H6;
+  children: MyInlineChildren;
+}
+
+export interface MyBlockquoteElement extends MyBlockElement {
+  type: typeof ELEMENT_BLOCKQUOTE;
+  children: MyInlineChildren;
+}
+
+export interface MyCodeBlockElement extends MyBlockElement {
+  type: typeof ELEMENT_CODE_BLOCK;
+  children: MyCodeLineElement[];
+}
+
+export interface MyCodeLineElement extends TElement {
+  type: typeof ELEMENT_CODE_LINE;
+  children: PlainText[];
+}
+
+export interface MyTableElement extends TTableElement, MyBlockElement {
+  type: typeof ELEMENT_TABLE;
+  children: MyTableRowElement[];
+}
+
+export interface MyTableRowElement extends TElement {
+  type: typeof ELEMENT_TR;
+  children: MyTableCellElement[];
+}
+
+export interface MyTableCellElement extends TElement {
+  type: typeof ELEMENT_TD;
+  children: MyNestableBlock[];
+}
+
+export interface MyBulletedListElement extends TElement, MyBlockElement {
+  type: typeof ELEMENT_UL;
+  children: MyListItemElement[];
+}
+
+export interface MyNumberedListElement extends TElement, MyBlockElement {
+  type: typeof ELEMENT_OL;
+  children: MyListItemElement[];
+}
+
+export interface MyListItemElement extends TElement, MyBlockElement {
+  type: typeof ELEMENT_LI;
+  children: MyInlineChildren;
+}
+
+export interface MyTodoListElement
+  extends TTodoListItemElement,
+    MyBlockElement {
+  type: typeof ELEMENT_TODO_LI;
+  children: MyInlineChildren;
+}
+
+export interface MyImageElement extends TImageElement, MyBlockElement {
+  type: typeof ELEMENT_IMAGE;
+  children: [EmptyText];
+}
+
+export interface MyMediaEmbedElement
+  extends TMediaEmbedElement,
+    MyBlockElement {
+  type: typeof ELEMENT_MEDIA_EMBED;
+  children: [EmptyText];
+}
+
+export interface MyHrElement extends MyBlockElement {
+  type: typeof ELEMENT_HR;
+  children: [EmptyText];
+}
+
+export interface MyExcalidrawElement
+  extends TExcalidrawElement,
+    MyBlockElement {
+  type: typeof ELEMENT_EXCALIDRAW;
+  children: [EmptyText];
+}
+
+export type MyNestableBlock = MyParagraphElement;
+
+export type MyBlock = Exclude<MyElement, MyInlineElement>;
+export type MyBlockEntry = TNodeEntry<MyBlock>;
+
+export type MyRootBlock =
+  | MyParagraphElement
+  | MyH1Element
+  | MyH2Element
+  | MyH3Element
+  | MyH4Element
+  | MyH5Element
+  | MyH6Element
+  | MyBlockquoteElement
+  | MyCodeBlockElement
+  | MyTableElement
+  | MyBulletedListElement
+  | MyNumberedListElement
+  | MyTodoListElement
+  | MyImageElement
+  | MyMediaEmbedElement
+  | MyHrElement
+  | MyExcalidrawElement;
+
+export type MyValue = MyRootBlock[];
+
+/**
+ * Editor types
+ */
+
+export type MyEditor = PlateEditor<MyValue> & { isDragging?: boolean };
+export type MyReactEditor = TReactEditor<MyValue>;
+export type MyNode = ENode<MyValue>;
+export type MyNodeEntry = ENodeEntry<MyValue>;
+export type MyElement = EElement<MyValue>;
+export type MyElementEntry = EElementEntry<MyValue>;
+export type MyText = EText<MyValue>;
+export type MyTextEntry = ETextEntry<MyValue>;
+export type MyElementOrText = EElementOrText<MyValue>;
+export type MyDescendant = EDescendant<MyValue>;
+export type MyMarks = EMarks<MyValue>;
+export type MyMark = keyof MyMarks;
+
+/**
+ * Plate types
+ */
+
+export type MyDecorate<P = PluginOptions> = Decorate<P, MyValue, MyEditor>;
+export type MyDecorateEntry = DecorateEntry<MyValue>;
+export type MyDOMHandler<P = PluginOptions> = DOMHandler<P, MyValue, MyEditor>;
+export type MyInjectComponent = InjectComponent<MyValue>;
+export type MyInjectProps = InjectProps<MyValue>;
+export type MyKeyboardHandler<P = PluginOptions> = KeyboardHandler<
+  P,
+  MyValue,
+  MyEditor
+>;
+export type MyOnChange<P = PluginOptions> = OnChange<P, MyValue, MyEditor>;
+export type MyOverrideByKey = OverrideByKey<MyValue, MyEditor>;
+export type MyPlatePlugin<P = PluginOptions> = PlatePlugin<
+  P,
+  MyValue,
+  MyEditor
+>;
+export type MyPlatePluginInsertData = PlatePluginInsertData<MyValue>;
+export type MyPlatePluginProps = PlatePluginProps<MyValue>;
+export type MyPlateProps = PlateProps<MyValue, MyEditor>;
+export type MySerializeHtml = SerializeHtml<MyValue>;
+export type MyWithOverride<P = PluginOptions> = WithOverride<
+  P,
+  MyValue,
+  MyEditor
+>;
+
+/**
+ * Plate store, Slate context
+ */
+
+export const getMyEditor = (editor: MyEditor) =>
+  getTEditor<MyValue, MyEditor>(editor);
+export const useMyEditorRef = () => useEditorRef<MyValue, MyEditor>();
+export const useMyEditorState = () => useEditorState<MyValue, MyEditor>();
+export const useMyPlateSelectors = (id?: PlateId) =>
+  usePlateSelectors<MyValue, MyEditor>(id);
+export const useMyPlateActions = (id?: PlateId) =>
+  usePlateActions<MyValue, MyEditor>(id);
+export const useMyPlateStates = (id?: PlateId) =>
+  usePlateStates<MyValue, MyEditor>(id);
+
+/**
+ * Utils
+ */
+export const createMyEditor = () => createTEditor() as MyEditor;
+export const createMyPlateEditor = (
+  options: CreatePlateEditorOptions<MyValue, MyEditor> = {}
+) => createPlateEditor<MyValue, MyEditor>(options);
+export const createMyPluginFactory = <P = PluginOptions>(
+  defaultPlugin: PlatePlugin<NoInfer<P>, MyValue, MyEditor>
+) => createPluginFactory(defaultPlugin);
+export const createMyPlugins = (
+  plugins: PlatePlugin[],
+  options?: {
+    components?: Record<string, PlatePluginComponent>;
+    overrideByKey?: OverrideByKey;
+  }
+) => createPlugins<MyValue, MyEditor>(plugins, options);
+
+export type MyAutoformatRule = AutoformatRule<MyValue, MyEditor>;
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..90ffa14
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,8 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+import type { ClassValue } from 'clsx';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/src/main.tsx b/src/main.tsx
index 1c4aad0..5d6e38f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,14 +1,16 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
 import App from "./App.tsx";
+import { TooltipProvider } from "./components/plate-ui/tooltip.tsx";
 import "./index.css";
-import { BrowserRouter } from "react-router-dom";
-import 'bootstrap/dist/css/bootstrap.min.css';
+// import 'bootstrap/dist/css/bootstrap.min.css';
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
 	// <React.StrictMode>
 	<BrowserRouter>
-		<App />
+		<TooltipProvider>
+			<App />
+		</TooltipProvider>
 	</BrowserRouter>
 	// </React.StrictMode>,
 );
diff --git a/src/router.tsx b/src/router.tsx
index 8e902f1..7b41ffd 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -1,15 +1,72 @@
-import React from "react";
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes, useNavigate } from "react-router-dom";
+import CourseManagement from "./views/CourseManagement";
+import Dashboard from "./views/Dashboard";
+import ExploreCourses from "./views/ExploreCourses";
+import ExploreProblems from "./views/ExploreProblems";
 import Home from "./views/Home";
 import Login from "./views/Login";
+import CreateCollection from "./views/My/Collections/CreateCollection";
+import EditCollection from "./views/My/Collections/EditCollection";
+import MyCollections from "./views/My/Collections/MyCollections";
+import CreateCourse from "./views/My/Courses/CreateCourse";
+import EditCourse from "./views/My/Courses/EditCourse";
+import MyCourses from "./views/My/Courses/MyCourses";
+import CreateGroup from "./views/My/Groups/CreateGroup";
+import EditGroup from "./views/My/Groups/EditGroup";
+import MyGroups from "./views/My/Groups/MyGroups";
+import CreateProblem from "./views/My/Problems/CreateProblem";
+import EditProblem from "./views/My/Problems/EditProblem";
+import MyProblems from "./views/My/Problems/MyProblems";
 import Register from "./views/Register";
+import ViewCourse from "./views/ViewCourse";
+import ViewCourseProblem from "./views/ViewCourseProblem";
+import ViewProblem from "./views/ViewProblem";
+import { useContext, useEffect } from "react";
+import { LoginContext } from "./contexts/LoginContext";
 
 const Router = () => {
+
+	const navigate = useNavigate();
+	const {isLogin} = useContext(LoginContext);
+	useEffect(() => {
+		if (isLogin !== null && !isLogin) {
+			navigate("/login")
+		}
+	},[isLogin])
+
 	return (
 		<Routes>
 			<Route path="/" element={<Home />} />
+			<Route path="/explore" element={<ExploreProblems />} />
+			<Route path="/courses" element={<ExploreCourses />} />
 			<Route path="/login" element={<Login />} />
 			<Route path="/register" element={<Register />} />
+
+			{isLogin && (<>
+			<Route path="/dashboard" element={<Dashboard />} />
+			<Route path="/management" element={<CourseManagement />} />
+
+			<Route path="/my/problems" element={<MyProblems />} />
+			<Route path="/my/problems/create" element={<CreateProblem />} />
+			<Route path="/my/problems/:problemId/edit" element={<EditProblem />} />
+
+			<Route path="/my/collections" element={<MyCollections />} />
+			<Route path="/my/collections/create" element={<CreateCollection />} />
+			<Route path="/my/collections/:collectionId/edit" element={<EditCollection />} />
+
+			<Route path="/my/courses" element={<MyCourses />} />
+			<Route path="/my/courses/create" element={<CreateCourse />} />
+			<Route path="/my/courses/:courseId/edit" element={<EditCourse />} />
+
+			<Route path="/my/groups" element={<MyGroups />} />
+			<Route path="/my/groups/create" element={<CreateGroup />} />
+			<Route path="/my/groups/:groupId/edit" element={<EditGroup />} />
+			
+			<Route path="/problems/:problemId" element={<ViewProblem />} />
+			<Route path="/courses/:courseId" element={<ViewCourse />} />
+			<Route path="/courses/:courseId/problems/:problemId" element={<ViewCourseProblem />} />
+			</>)}
+			
 		</Routes>
 	);
 };
diff --git a/src/services/Account.service.ts b/src/services/Account.service.ts
new file mode 100644
index 0000000..da8a0a5
--- /dev/null
+++ b/src/services/Account.service.ts
@@ -0,0 +1,21 @@
+import axios from 'axios';
+import { BASE_URL } from "../constants/BackendBaseURL";
+import { AccountServiceAPI } from "../types/apis/Account.api";
+import { AccountModel } from "../types/models/Account.model";
+
+export const AccountService: AccountServiceAPI = {
+    create: async (request) => {
+        const response = await axios.post<AccountModel>(`${BASE_URL}/api/accounts`, request);
+        return response;
+    },
+
+    getAll: async () => {
+        const response = await axios.get<{accounts: AccountModel[]}>(`${BASE_URL}/api/accounts`);
+        return response;
+    },
+
+    get: async (id) => {
+        const response = await axios.get<AccountModel>(`${BASE_URL}/api/accounts/${id}`);
+        return response;
+    }
+}
\ No newline at end of file
diff --git a/src/services/Auth.service.ts b/src/services/Auth.service.ts
new file mode 100644
index 0000000..34491f3
--- /dev/null
+++ b/src/services/Auth.service.ts
@@ -0,0 +1,23 @@
+import axios from "axios";
+import { AuthServiceAPI } from "../types/apis/Auth.api";
+import { BASE_URL } from "../constants/BackendBaseURL";
+import { AccountModel } from "../types/models/Account.model";
+import { AuthenticationResultResponse } from "../types/models/Auth.model";
+
+export const AuthService: AuthServiceAPI = {
+    login: async (request) => {
+        const response = await axios.post<AccountModel>(`${BASE_URL}/api/login`, request);
+        return response;
+    },
+
+    logout: async (request) => {
+        const response = await axios.post<AccountModel>(`${BASE_URL}/api/logout`, request);
+        return response;
+    },
+
+    authorize: async (request) => {
+        const response = await axios.put<AuthenticationResultResponse>(`${BASE_URL}/api/token`, request);
+        return response;
+    }
+
+}
\ No newline at end of file
diff --git a/src/services/Collection.service.ts b/src/services/Collection.service.ts
new file mode 100644
index 0000000..65121ce
--- /dev/null
+++ b/src/services/Collection.service.ts
@@ -0,0 +1,43 @@
+import axios from "axios";
+import { BASE_URL } from "../constants/BackendBaseURL";
+import { CollectionServiceAPI, GetCollectionByAccountResponse } from "../types/apis/Collection.api";
+import { CollectionModel, CollectionPopulateCollectionProblemsPopulateProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupAndCollectionGroupPermissionsPopulateGroupModel } from "../types/models/Collection.model";
+
+export const CollectionService: CollectionServiceAPI = {
+    create: (accountId,request) => {
+        return axios.post<CollectionModel>(`${BASE_URL}/api/accounts/${accountId}/collections`,request);
+    },
+
+    get: (collectionId,accountId) => {
+        return axios.get<CollectionPopulateCollectionProblemsPopulateProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupAndCollectionGroupPermissionsPopulateGroupModel>(`${BASE_URL}/api/accounts/${accountId}/collections/${collectionId}`);
+    },
+
+    getAllAsCreator: (accountId) => {
+        return axios.get<GetCollectionByAccountResponse>(`${BASE_URL}/api/accounts/${accountId}/collections`);
+    },
+
+    update: (collectionId,accountId,request) => {
+        return axios.put<CollectionModel>(`${BASE_URL}/api/accounts/${accountId}/collections/${collectionId}`,request);
+    },
+
+    delete: (collectionId,accountId) => {
+        return axios.delete<null>(`${BASE_URL}/api/accounts/${accountId}/collections/${collectionId}`);
+    },
+
+    addProblem: (collectionId,problemIds) => {
+        return axios.put<CollectionModel>(`${BASE_URL}/api/collections/${collectionId}/problems/add`,{problemIds});
+    },
+
+    removeProblem: (collectionId,problemIds) => {
+        return axios.put(`${BASE_URL}/api/collections/${collectionId}/problems/remove`,{data:{problemIds}});
+    },
+
+    updateProblem: (collectionId,problemIds) => {
+        return axios.put<CollectionModel>(`${BASE_URL}/api/collections/${collectionId}/problems/update`,{problem_ids: problemIds});
+    },
+
+    updateGroupPermissions: (collectionId,accountId,groups) => {
+        return axios.put<CollectionModel>(`${BASE_URL}/api/accounts/${accountId}/collections/${collectionId}/groups`,{groups});
+    }
+    
+}
\ No newline at end of file
diff --git a/src/services/Group.service.ts b/src/services/Group.service.ts
new file mode 100644
index 0000000..5737e7b
--- /dev/null
+++ b/src/services/Group.service.ts
@@ -0,0 +1,47 @@
+import axios from "axios";
+import { GroupSerivceAPI } from "../types/apis/Group.api";
+import { BASE_URL } from "../constants/BackendBaseURL";
+
+export const GroupService: GroupSerivceAPI = {
+    get: async (groupId:string,query?:any) => {
+        const response = await axios.get(`${BASE_URL}/api/groups/${groupId}`,{
+            params: query
+        })
+
+        return response;
+    },
+
+    getAllAsCreator: async (accountId:string,query?:any) => {
+        const response = await axios.get(`${BASE_URL}/api/accounts/${accountId}/groups`,{
+            params: query,
+        })
+
+        return response;
+    },
+
+    create: async (accountId,request) => {
+        const response = await axios.post(`${BASE_URL}/api/accounts/${accountId}/groups`,request)
+
+        return response;
+    },
+
+    update: async (groupId,request) => {
+        const response = await axios.put(`${BASE_URL}/api/groups/${groupId}`,request)
+
+        return response;
+    },
+
+    delete: async (groupId) => {
+        const response = await axios.delete(`${BASE_URL}/api/groups/${groupId}`)
+
+        return response;
+    },
+
+    updateMembers: async (groupId,accountIds) => {
+        const response = await axios.put(`${BASE_URL}/api/groups/${groupId}/members`,{
+            account_ids: accountIds
+        })
+
+        return response;
+    }
+}
\ No newline at end of file
diff --git a/src/services/Problem.service.ts b/src/services/Problem.service.ts
new file mode 100644
index 0000000..d39f16d
--- /dev/null
+++ b/src/services/Problem.service.ts
@@ -0,0 +1,46 @@
+import axios from "axios";
+import { BASE_URL } from "../constants/BackendBaseURL";
+import { GetAllProblemsByAccountResponse, GetAllProblemsResponse, ProblemServiceAPI, ValidateProgramResponse } from "../types/apis/Problem.api";
+import { ProblemModel, ProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel, ProblemPopulateCreatorSecureModel } from "../types/models/Problem.model";
+
+export const ProblemService: ProblemServiceAPI = {
+    create: async (accountId,request) => {
+        return axios.post<ProblemModel>(`${BASE_URL}/api/accounts/${accountId}/problems`, request);
+    },
+
+    getAll: async () => {
+        return axios.get<GetAllProblemsResponse>(`${BASE_URL}/api/problems`);
+    },
+
+    getAllAsCreator: async (accountId) => {
+        return axios.get<GetAllProblemsByAccountResponse>(`${BASE_URL}/api/accounts/${accountId}/problems`);
+    },
+
+    get: async (accountId,problemId) => {
+        return axios.get<ProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel>(`${BASE_URL}/api/accounts/${accountId}/problems/${problemId}`);
+    },
+
+    update: async (problemId,request) => {
+        return axios.put<ProblemModel>(`${BASE_URL}/api/problems/${problemId}`, request);
+    },
+
+    delete: async (problemId) => {
+        return axios.delete<null>(`${BASE_URL}/api/problems/${problemId}`);
+    },
+
+    // deleteMultiple: async (problemIds) => {
+    //     return axios.delete<null>(`${BASE_URL}/api/problems/`, {problem: problemIds});
+    // },
+
+    updateGroupPermissions: async (problemId, accountId,groups) => {
+        return axios.put<ProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel>(`${BASE_URL}/api/accounts/${accountId}/problems/${problemId}/groups`, {groups});
+    },
+
+    validateProgram: async (request) => {
+        return axios.post<ValidateProgramResponse>(`${BASE_URL}/api/problems/validate`, request);
+    },
+
+    getPublic: async (problemId) => {
+        return axios.get<ProblemPopulateCreatorSecureModel>(`${BASE_URL}/api/problems/${problemId}`);
+    },
+}
\ No newline at end of file
diff --git a/src/services/Submission.service.ts b/src/services/Submission.service.ts
new file mode 100644
index 0000000..3f5e6fe
--- /dev/null
+++ b/src/services/Submission.service.ts
@@ -0,0 +1,31 @@
+import axios from "axios";
+import { BASE_URL } from "../constants/BackendBaseURL";
+import { GetAllSubmissionsResponse, SubmissionServiceAPI } from "../types/apis/Submission.api";
+import { GetSubmissionByAccountProblemResponse, SubmissionPopulateSubmissionTestcasesSecureModel } from "../types/models/Submission.model";
+
+export const SubmissionService: SubmissionServiceAPI = {
+    submit: async (accountId, problemId, request) => {
+        const response = await axios.post<SubmissionPopulateSubmissionTestcasesSecureModel>(`${BASE_URL}/api/accounts/${accountId}/problems/${problemId}/submissions`,request);
+        return response;
+    },
+
+    topicSubmit: async (accountId,topicId, problemId, request) => {
+        const response = await axios.post<SubmissionPopulateSubmissionTestcasesSecureModel>(`${BASE_URL}/api/accounts/${accountId}/topics/${topicId}/problems/${problemId}/submissions`,request);
+        return response;
+    },
+
+    getByAccountProblem: async (accountId, problemId) => {
+        const response = await axios.get<GetSubmissionByAccountProblemResponse>(`${BASE_URL}/api/accounts/${accountId}/problems/${problemId}/submissions`);
+        return response;
+    },
+
+    getByAccountProblemInTopic: async (accountId, problemId, topicId) => {
+        const response = await axios.get<GetSubmissionByAccountProblemResponse>(`${BASE_URL}/api/accounts/${accountId}/topics/${topicId}/problems/${problemId}/submissions`);
+        return response;
+    },
+
+    getAll: async (query) => {
+        const response = await axios.get<GetAllSubmissionsResponse>(`${BASE_URL}/api/submissions`,{params:query});
+        return response;
+    }
+}
\ No newline at end of file
diff --git a/src/services/Topic.service.ts b/src/services/Topic.service.ts
new file mode 100644
index 0000000..e362c80
--- /dev/null
+++ b/src/services/Topic.service.ts
@@ -0,0 +1,55 @@
+import axios from "axios";
+import { BASE_URL } from "../constants/BackendBaseURL";
+import { GetAllTopicsByAccountResponse, TopicSerivceAPI } from "../types/apis/Topic.api";
+import { TopicModel, TopicPopulateTopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel, TopicPopulateTopicCollectionPopulateCollectionPopulateCollectionProblemsPopulateProblemAndCollectionGroupPermissionsPopulateGroupAndTopicGroupPermissionPopulateGroupModel } from "../types/models/Topic.model";
+
+export const TopicService: TopicSerivceAPI = {
+    create: async (accountId, request) => {
+        const response = await axios.post<TopicModel>(`${BASE_URL}/api/accounts/${accountId}/topics`, request);
+        return response;
+    },
+
+    get: async (accountId,topicId) => {
+        const response = await axios.get<TopicPopulateTopicCollectionPopulateCollectionPopulateCollectionProblemsPopulateProblemAndCollectionGroupPermissionsPopulateGroupAndTopicGroupPermissionPopulateGroupModel>(`${BASE_URL}/api/accounts/${accountId}/topics/${topicId}`);
+        return response;
+    },
+
+    getAllAccessibleByAccount: async (accountId) => {
+        const response = await axios.get<GetAllTopicsByAccountResponse>(`${BASE_URL}/api/accounts/${accountId}/access/topics`);
+        return response;
+    },
+
+    update: async (topicId,accountId, request) => {
+        const response = await axios.put<TopicModel>(`${BASE_URL}/api/accounts/${accountId}/topics/${topicId}`, request);
+        return response;
+    },
+
+    delete: async (topicId,accountId) => {
+        const response = await axios.delete<null>(`${BASE_URL}/api/accounts/${accountId}/topics/${topicId}`);
+        return response;
+    },
+
+    getAllAsCreator: async (accountId) => {
+        const response = await axios.get<GetAllTopicsByAccountResponse>(`${BASE_URL}/api/accounts/${accountId}/topics`);
+        return response;
+    },
+
+    updateCollections: async (topicId, collectionIds) => {
+        const response = await axios.put<TopicModel>(`${BASE_URL}/api/topics/${topicId}/collections/update`, {
+            collection_ids: collectionIds
+        });
+        return response;
+    },
+
+    getPublicByAccount: async (accountId,topicId) => {
+        const response = await axios.get<TopicPopulateTopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel>(`${BASE_URL}/api/topics/${topicId}?account_id=${accountId}`);
+        return response;
+    },
+
+    updateGroupPermissions: async (topicId,accountId, groups) => {
+        const response = await axios.put<TopicModel>(`${BASE_URL}/api/accounts/${accountId}/topics/${topicId}/groups`, {
+            groups: groups
+        });
+        return response;
+    }
+}
\ No newline at end of file
diff --git a/src/types/PlateEditorValueType.ts b/src/types/PlateEditorValueType.ts
new file mode 100644
index 0000000..d4a5e37
--- /dev/null
+++ b/src/types/PlateEditorValueType.ts
@@ -0,0 +1,7 @@
+export type PlateEditorValueType = {
+    id: string;
+    type: string;
+    children: {
+        text: string;
+    }[];
+}[]
\ No newline at end of file
diff --git a/src/types/Props.ts b/src/types/Props.ts
new file mode 100644
index 0000000..28421c2
--- /dev/null
+++ b/src/types/Props.ts
@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+
+export type Props = {
+    children?: string | JSX.Element | JSX.Element[] | ReactNode | null;
+    className?: string;
+}
\ No newline at end of file
diff --git a/src/types/TestcaseGradingResultStatus.ts b/src/types/TestcaseGradingResultStatus.ts
new file mode 100644
index 0000000..4912a5d
--- /dev/null
+++ b/src/types/TestcaseGradingResultStatus.ts
@@ -0,0 +1 @@
+type TestcaseGradingResultStatus = "OK" | "TIMEOUT" | "ERROR" | "FAILED"
\ No newline at end of file
diff --git a/src/types/adapters/Account.adapter.ts b/src/types/adapters/Account.adapter.ts
new file mode 100644
index 0000000..91b00b9
--- /dev/null
+++ b/src/types/adapters/Account.adapter.ts
@@ -0,0 +1,19 @@
+import { ItemInterface } from "react-sortablejs";
+import { AccountHashedTable, AccountModel, AccountSecureModel } from "../models/Account.model";
+
+export function transformAccounts2ReactSortableItemInterfaces(accounts: AccountModel[] | AccountSecureModel[]): ItemInterface[] {
+    return accounts.map(account => (
+        {
+            id: account.account_id,
+            content: account.username
+        }
+    ))
+}
+
+export function transformAccountModels2AccountHashedTable(accounts: AccountModel[] | AccountSecureModel[]): AccountHashedTable {
+    let result:AccountHashedTable = {}
+    for (const account of accounts) {
+        result[account.account_id] = account
+    }
+    return result
+}
\ No newline at end of file
diff --git a/src/types/adapters/Collection.adapter.ts b/src/types/adapters/Collection.adapter.ts
new file mode 100644
index 0000000..2c6742b
--- /dev/null
+++ b/src/types/adapters/Collection.adapter.ts
@@ -0,0 +1,36 @@
+import { CreateCollectionRequestForm } from "../forms/CreateCollectionRequestForm";
+import { CollectionHashedTable, CollectionPopulateCollectionProblemPopulateProblemModel, CollectionPopulateCollectionProblemsPopulateProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupAndCollectionGroupPermissionsPopulateGroupModel } from "../models/Collection.model";
+
+export function transformCollectionPopulateProblemSecureModel2CollectionHashedTable(collections: CollectionPopulateCollectionProblemPopulateProblemModel[] ): CollectionHashedTable {
+    let result:CollectionHashedTable = {};
+    for (const collection of collections) {
+        result[collection.collection_id] = collection;
+    }
+    return result;
+}
+
+export function transformCollectionPopulateCollectionProblemsPopulateProblemAndCollectionGroupPermissionsPopulateGroupModel2CreateCollectionRequest(collection: CollectionPopulateCollectionProblemsPopulateProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupAndCollectionGroupPermissionsPopulateGroupModel): CreateCollectionRequestForm {
+
+    return {
+        title: collection.name,
+        description: JSON.parse(String(collection.description)),
+        problemsInterface: collection.problems.map((cp) => ({
+            id: cp.problem.problem_id,
+            name: cp.problem.title,
+            problem: cp.problem,
+            groupPermissions: cp.problem.group_permissions.map((pgp) => ({
+                groupId: pgp.group.group_id,
+                group: pgp.group,
+                manageProblems: pgp.permission_manage_problems,
+                viewProblems: pgp.permission_view_problems,
+            })),
+        })),
+        groupPermissions: collection.group_permissions.map((cgp) => ({
+            group_id: cgp.group.group_id,
+            group: cgp.group,
+            manageCollections: cgp.permission_manage_collections,
+            viewCollections: cgp.permission_view_collections,
+        })),
+        collection: collection,
+    }
+}
\ No newline at end of file
diff --git a/src/types/adapters/CreateCollectionRequestForm.adapter.ts b/src/types/adapters/CreateCollectionRequestForm.adapter.ts
new file mode 100644
index 0000000..9ecea93
--- /dev/null
+++ b/src/types/adapters/CreateCollectionRequestForm.adapter.ts
@@ -0,0 +1,43 @@
+import { CollectionGroupPermissionCreateRequest } from "../apis/Collection.api";
+import { ProblemGroupPermissionCreateRequest } from "../apis/Problem.api";
+import { CreateCollectionRequestForm } from "../forms/CreateCollectionRequestForm";
+import { CollectionCreateRequest } from "../models/Collection.model";
+
+export function transformCreateCollectionRequestForm2CreateCollectionRequestForm(
+	createRequest: CreateCollectionRequestForm
+): {
+	request: CollectionCreateRequest;
+	problemIds: string[];
+	groups: CollectionGroupPermissionCreateRequest[];
+	problemGroupPermissions: {
+		problem_id: string;
+		groupPermissions: ProblemGroupPermissionCreateRequest[];
+	}[];
+} {
+	const request = {
+		name: createRequest.title,
+		description: JSON.stringify(createRequest.description),
+	};
+
+	const problemIds = createRequest.problemsInterface.map(
+		(problem) => problem.id as string
+	);
+
+	const groups = createRequest.groupPermissions.map((groupPermission) => ({
+		group_id: groupPermission.group_id,
+		permission_manage_collections: groupPermission.manageCollections,
+		permission_view_collections: groupPermission.viewCollections,
+	}));
+
+	const problemGroupPermissions =
+		createRequest.problemsInterface.map((cp) => ({
+			problem_id: cp.problem.problem_id,
+			groupPermissions: cp.groupPermissions.map((gp) => ({
+				group_id: gp.group.group_id,
+				permission_manage_problems: gp.manageProblems,
+				permission_view_problems: gp.viewProblems,
+			})),
+		})) ?? [];
+
+	return { request, problemIds, groups, problemGroupPermissions };
+}
diff --git a/src/types/adapters/CreateCourseRequestForm.adapter.ts b/src/types/adapters/CreateCourseRequestForm.adapter.ts
new file mode 100644
index 0000000..aae9023
--- /dev/null
+++ b/src/types/adapters/CreateCourseRequestForm.adapter.ts
@@ -0,0 +1,44 @@
+import { CollectionGroupPermissionCreateRequest } from "../apis/Collection.api";
+import { CourseGroupPermissionCreateRequest } from "../apis/Topic.api";
+import { CreateCourseRequestForm } from "../forms/CreateCourseRequestForm";
+
+export function transformCreateCourseRequestForm2CreateTopicRequest(
+	createRequest: CreateCourseRequestForm
+): {
+	formData: FormData;
+	collectionIds: string[];
+	groups: CourseGroupPermissionCreateRequest[];
+	collectionGroupsPermissions: {
+		collection_id: string;
+		groupPermissions: CollectionGroupPermissionCreateRequest[];
+	}[]
+} {
+	const formData = new FormData();
+	formData.append("name", createRequest.title);
+	formData.append("description", JSON.stringify(createRequest.description));
+	// formData.append("image_url", createRequest.image);
+	formData.append("is_private", createRequest.isPrivate ? "true" : "false");
+
+	const collectionIds: string[] = createRequest.collectionsInterface.map(
+		(collection) => collection.id as string
+	);
+	const groups = createRequest.groupPermissions.map((groupPermission) => ({
+		group_id: groupPermission.group_id,
+		permission_manage_topics: groupPermission.manageCourses,
+		permission_view_topics: groupPermission.viewCourses,
+		permission_view_topics_log: groupPermission.viewCourseLogs,
+	}));
+
+	const collectionGroupsPermissions = createRequest.collectionsInterface.map((cc) => ({
+		collection_id: cc.collection.collection_id,
+		groupPermissions: cc.groupPermissions.map((gp) => ({
+			group_id: gp.group.group_id,
+			permission_manage_collections: gp.manageCollections,
+			permission_view_collections: gp.viewCollections,
+		}))
+	})) ?? []
+
+	console.log("collectionGroupsPermissions", collectionGroupsPermissions)
+
+	return { formData, collectionIds, groups, collectionGroupsPermissions };
+}
diff --git a/src/types/adapters/CreateGroupRequestForm.adapter.ts b/src/types/adapters/CreateGroupRequestForm.adapter.ts
new file mode 100644
index 0000000..9af55b9
--- /dev/null
+++ b/src/types/adapters/CreateGroupRequestForm.adapter.ts
@@ -0,0 +1,17 @@
+import { GroupCreateRequest } from "../apis/Group.api";
+import { CreateGroupRequestForm } from "../forms/CreateGroupRequestForm";
+
+export function transformCreateGroupRequestForm2CreateGroupRequest(createRequest: CreateGroupRequestForm): GroupCreateRequest {
+    return {
+        name: createRequest.name,
+        description: createRequest.description,
+        color: createRequest.color,
+        permission_manage_topics: createRequest.manageCourses,
+        permission_view_topics: createRequest.viewCourses,
+        permission_view_topics_log: createRequest.viewCourseLogs,
+        permission_manage_collections: createRequest.manageCollections,
+        permission_view_collections: createRequest.viewCollections,
+        permission_manage_problems: createRequest.manageProblems,
+        permission_view_problems: createRequest.viewProblems
+    }
+}
\ No newline at end of file
diff --git a/src/types/adapters/CreateProblemRequestForm.adapter.ts b/src/types/adapters/CreateProblemRequestForm.adapter.ts
new file mode 100644
index 0000000..9b12702
--- /dev/null
+++ b/src/types/adapters/CreateProblemRequestForm.adapter.ts
@@ -0,0 +1,32 @@
+import { testcaseParse } from "../../utilities/TestcaseFormat";
+import { CreateProblemRequest, ProblemGroupPermissionCreateRequest } from "../apis/Problem.api";
+import { CreateProblemRequestForm } from "../forms/CreateProblemRequestForm";
+
+export const transformCreateProblemRequestForm2CreateProblemRequest = (
+	createRequest: CreateProblemRequestForm
+): {
+	request: CreateProblemRequest
+	groups: ProblemGroupPermissionCreateRequest[]
+} => {
+
+	const request = {
+		title: createRequest.title,
+		language: createRequest.language,
+		description: JSON.stringify(createRequest.description),
+		solution: createRequest.solution,
+		testcases: testcaseParse(
+			createRequest.testcases,
+			createRequest.testcase_delimeter
+		),
+		time_limit: createRequest.time_limit,
+		allowed_languages: createRequest.allowedLanguage.filter((language) => language !== "").join(","),
+	}
+
+	const groups = createRequest.groupPermissions.map((groupPermission) => ({
+		group_id: groupPermission.groupId,
+		permission_manage_problems: groupPermission.manageProblems,
+		permission_view_problems: groupPermission.viewProblems,
+	}))
+
+	return {request, groups};
+};
\ No newline at end of file
diff --git a/src/types/adapters/Group.adapter.ts b/src/types/adapters/Group.adapter.ts
new file mode 100644
index 0000000..a18ee2c
--- /dev/null
+++ b/src/types/adapters/Group.adapter.ts
@@ -0,0 +1,25 @@
+import { CreateGroupRequestForm } from "../forms/CreateGroupRequestForm";
+import { GroupPopulateGroupMemberPopulateAccountSecureModel } from "../models/Group.model";
+
+export function transformGroupPopulateGroupMemberPopulateAccountSecureModel2CreateGroupRequestForm(group: GroupPopulateGroupMemberPopulateAccountSecureModel): CreateGroupRequestForm {
+    return {
+        name: group.name,
+        description: group.description,
+        color: group.color,
+        membersInterface: group.members.map(member => {
+            return {
+                id: member.account.account_id,
+                name: member.account.username,
+                group: member.group,
+                created_date: member.created_date
+            }
+        }),
+        manageCourses: group.permission_manage_topics,
+        viewCourseLogs: group.permission_view_topics_log,
+        viewCourses: group.permission_view_topics,
+        manageCollections: group.permission_manage_collections,
+        viewCollections: group.permission_view_collections,
+        manageProblems: group.permission_manage_problems,
+        viewProblems: group.permission_view_problems
+    }
+}
\ No newline at end of file
diff --git a/src/types/adapters/Problem.adapter.ts b/src/types/adapters/Problem.adapter.ts
new file mode 100644
index 0000000..e823493
--- /dev/null
+++ b/src/types/adapters/Problem.adapter.ts
@@ -0,0 +1,29 @@
+import { CreateProblemRequestForm } from "../forms/CreateProblemRequestForm";
+import { ProblemHashedTable, ProblemModel, ProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel, ProblemPopulateTestcases } from "../models/Problem.model";
+
+export function transformProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel2CreateProblemRequestForm(problem: ProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel): CreateProblemRequestForm {
+    return {
+        title: problem.title,
+        description: JSON.parse(String(problem.description)),
+        language: problem.language,
+        solution: problem.solution,
+        testcases: problem.testcases.map(testcase => testcase.input).join(":::\n"),
+        testcase_delimeter: ":::",
+        time_limit: problem.time_limit,
+        groupPermissions: problem.group_permissions.map((permission) => ({
+            groupId: permission.group.group_id,
+            group: permission.group,
+            manageProblems: permission.permission_manage_problems,
+            viewProblems: permission.permission_view_problems
+        })),
+        allowedLanguage: problem.allowed_languages.split(",")
+    }
+}
+
+export function transformProblemModel2ProblemHashedTable(problems: ProblemModel[] | ProblemPopulateTestcases[]): ProblemHashedTable {
+    let result:ProblemHashedTable = {}
+    for (const problem of problems) {
+        result[problem.problem_id] = problem
+    }
+    return result
+}
\ No newline at end of file
diff --git a/src/types/adapters/Submission.adapter.ts b/src/types/adapters/Submission.adapter.ts
new file mode 100644
index 0000000..f02a8df
--- /dev/null
+++ b/src/types/adapters/Submission.adapter.ts
@@ -0,0 +1,18 @@
+import { SubmitProblemResponse } from "../apis/Submission.api";
+import { GetSubmissionByAccountProblemSubmissionModel } from "../models/Submission.model";
+
+export function SubmitProblemResponse2GetSubmissionByAccountProblemResponse(submission: SubmitProblemResponse):GetSubmissionByAccountProblemSubmissionModel  {
+    return {
+        submission_id: submission.submission_id,
+        problem: submission.problem.problem_id,
+        language: submission.language,
+        submission_code: submission.submission_code,
+        is_passed: submission.is_passed,
+        date: submission.date,
+        score: submission.score,
+        max_score: submission.max_score,
+        passed_ratio: submission.passed_ratio,
+        account: submission.account,
+        runtime_output: submission.runtime_output
+    }
+}
\ No newline at end of file
diff --git a/src/types/adapters/Topic.adapter.ts b/src/types/adapters/Topic.adapter.ts
new file mode 100644
index 0000000..a336d71
--- /dev/null
+++ b/src/types/adapters/Topic.adapter.ts
@@ -0,0 +1,40 @@
+import { CreateCourseRequestForm } from "../forms/CreateCourseRequestForm";
+import { TopicPopulateTopicCollectionPopulateCollectionPopulateCollectionProblemsPopulateProblemAndCollectionGroupPermissionsPopulateGroupAndTopicGroupPermissionPopulateGroupModel } from "../models/Topic.model";
+
+export function transformTopicPopulateTopicCollectionPopulateCollectionAndTopicGroupPermissionPopulateGroupModel2CreateCourseRequest(topic:TopicPopulateTopicCollectionPopulateCollectionPopulateCollectionProblemsPopulateProblemAndCollectionGroupPermissionsPopulateGroupAndTopicGroupPermissionPopulateGroupModel): CreateCourseRequestForm {
+    return {
+        title: topic.name,
+        description: JSON.parse(String(topic.description)),
+        image: topic.image_url,
+        isPrivate: topic.is_private,
+        collectionsInterface: topic.collections.map((tc) => ({
+            id: tc.collection.collection_id,
+            name: tc.collection.name,
+            collection: tc.collection,
+            groupPermissions: tc.collection.group_permissions.map((gp) => ({
+                group_id: gp.group.group_id,
+                group: gp.group,
+                manageCollections: gp.permission_manage_collections,
+                viewCollections: gp.permission_view_collections,
+            })),
+        })),
+        groupPermissions: topic.group_permissions.map((gp) => ({
+            group_id: gp.group.group_id,
+            group: gp.group,
+            manageCourses: gp.permission_manage_topics,
+            viewCourses: gp.permission_view_topics,
+            viewCourseLogs: gp.permission_view_topics_log,
+        })),
+        course: topic,
+        // collectionGroupPermissions: topic.collections.map((tc) => ({
+        //     collection_id: tc.collection.collection_id,
+        //     collection: tc.collection,
+        //     groupPermissions: tc.collection.group_permissions.map((gp) => ({
+        //         group_id: gp.group.group_id,
+        //         group: gp.group,
+        //         manageCollections: gp.permission_manage_collections,
+        //         viewCollections: gp.permission_view_collections,
+        //     }))
+        // }))
+    }
+}
\ No newline at end of file
diff --git a/src/types/apis/Account.api.ts b/src/types/apis/Account.api.ts
new file mode 100644
index 0000000..4ecdb16
--- /dev/null
+++ b/src/types/apis/Account.api.ts
@@ -0,0 +1,14 @@
+import { AxiosResponse } from "axios";
+import { AccountModel, AccountSecureModel } from "../models/Account.model";
+
+export type AccountCreateRequest = {
+    username: string;
+    password: string;
+    email: string;
+}
+
+export type AccountServiceAPI = {
+    create: (request: AccountCreateRequest) => Promise<AxiosResponse<AccountModel>>;
+    getAll: () => Promise<AxiosResponse<{accounts: AccountSecureModel[]}>>;
+    get: (accountId:string) => Promise<AxiosResponse<AccountModel>>;
+}
\ No newline at end of file
diff --git a/src/types/apis/Auth.api.ts b/src/types/apis/Auth.api.ts
new file mode 100644
index 0000000..a406a14
--- /dev/null
+++ b/src/types/apis/Auth.api.ts
@@ -0,0 +1,24 @@
+import { AxiosResponse } from "axios";
+import { AccountModel } from "../models/Account.model";
+import { AuthenticationResultResponse } from "../models/Auth.model";
+
+export type LoginRequest = {
+    username: string;
+    password: string;
+}
+
+export type LogoutRequest = {
+    account_id: string;
+    token: string;
+}
+
+export type AuthorizationRequest = {
+    account_id: string;
+    token: string;
+}
+
+export type AuthServiceAPI = {
+    login: (request: LoginRequest) => Promise<AxiosResponse<AccountModel>>;
+    logout: (request: LogoutRequest) => Promise<AxiosResponse<AccountModel>>;
+    authorize: (request: AuthorizationRequest) => Promise<AxiosResponse<AuthenticationResultResponse>>;
+}
\ No newline at end of file
diff --git a/src/types/apis/Collection.api.ts b/src/types/apis/Collection.api.ts
new file mode 100644
index 0000000..f810106
--- /dev/null
+++ b/src/types/apis/Collection.api.ts
@@ -0,0 +1,26 @@
+import { AxiosResponse } from "axios";
+import { CollectionCreateRequest, CollectionModel, CollectionPopulateCollectionProblemPopulateProblemModel, CollectionPopulateCollectionProblemsPopulateProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupAndCollectionGroupPermissionsPopulateGroupModel, CollectionUpdateRequest } from "../models/Collection.model";
+
+export type GetCollectionByAccountResponse = {
+    collections: CollectionPopulateCollectionProblemPopulateProblemModel[];
+    manageable_collections: CollectionPopulateCollectionProblemPopulateProblemModel[];
+
+}
+
+export type CollectionGroupPermissionCreateRequest = {
+    group_id: string;
+    permission_manage_collections?: boolean
+    permission_view_collections?: boolean
+}
+
+export type CollectionServiceAPI = {
+    create: (accountId:string,request:CollectionCreateRequest) => Promise<AxiosResponse<CollectionModel>>;
+    get: (collectionId:string,accountId:string) => Promise<AxiosResponse<CollectionPopulateCollectionProblemsPopulateProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupAndCollectionGroupPermissionsPopulateGroupModel>>;
+    update: (collectionId:string,accountId:string,request:CollectionUpdateRequest) => Promise<AxiosResponse<CollectionModel>>;
+    delete: (collectionId:string,accountId:string) => Promise<AxiosResponse<null>>;
+    getAllAsCreator: (accountId:string) => Promise<AxiosResponse<GetCollectionByAccountResponse>>;
+    addProblem: (collectionId:string,problemIds:string[]) => Promise<AxiosResponse<CollectionModel>>;
+    removeProblem: (collectionId:string,problemIds:string[]) => Promise<AxiosResponse<null>>;
+    updateProblem: (collectionId:string,problemIds:string[]) => Promise<AxiosResponse<CollectionModel>>;
+    updateGroupPermissions: (collectionId:string,accountId:string,groups:CollectionGroupPermissionCreateRequest[]) => Promise<AxiosResponse<CollectionModel>>;
+}
\ No newline at end of file
diff --git a/src/types/apis/ErrorHandling.ts b/src/types/apis/ErrorHandling.ts
new file mode 100644
index 0000000..848e908
--- /dev/null
+++ b/src/types/apis/ErrorHandling.ts
@@ -0,0 +1,10 @@
+export type ErrorResponseType = {
+    DUPLICATED_USERNAME: "UNIQUE constraint failed: api_account.username";
+    DUPLICATED_EMAIL: "UNIQUE constraint failed: api_account.email";
+    [key: string]: string;
+}
+
+export type ErrorResponse = {
+    message: ErrorResponseType | string;
+}
+
diff --git a/src/types/apis/Group.api.ts b/src/types/apis/Group.api.ts
new file mode 100644
index 0000000..7e37af9
--- /dev/null
+++ b/src/types/apis/Group.api.ts
@@ -0,0 +1,32 @@
+import { AxiosResponse } from "axios";
+import { GroupModel, GroupPopulateGroupMemberPopulateAccountSecureModel } from "../models/Group.model";
+
+export type GroupCreateRequest = {
+    name: string;
+    description?: string | null;
+    color?: string | null;
+    permission_manage_topics?: boolean
+    permission_view_topics?: boolean
+    permission_view_topics_log?: boolean
+    permission_manage_collections?: boolean
+    permission_view_collections?: boolean
+    permission_manage_problems?: boolean
+    permission_view_problems?: boolean
+}
+
+export type GroupgetAllAsCreatorResponse = {
+    groups: GroupModel[] | GroupPopulateGroupMemberPopulateAccountSecureModel[];
+}
+
+export type GroupGetQuery = {
+    populate_members?: boolean;
+}
+
+export type GroupSerivceAPI = {
+    get: (groupId:string,query?:GroupGetQuery) => Promise<AxiosResponse<GroupModel | GroupPopulateGroupMemberPopulateAccountSecureModel>>;
+    getAllAsCreator: (accountId:string,query?:GroupGetQuery) => Promise<AxiosResponse<GroupgetAllAsCreatorResponse>>;
+    create: (accountId:string,request:GroupCreateRequest) => Promise<AxiosResponse<GroupModel>>;
+    update: (groupId:string,request:GroupCreateRequest) => Promise<AxiosResponse<GroupModel>>;
+    delete: (groupId:string) => Promise<AxiosResponse<null>>;
+    updateMembers: (groupId:string,accountIds:string[]) => Promise<AxiosResponse<GroupPopulateGroupMemberPopulateAccountSecureModel>>;
+}
\ No newline at end of file
diff --git a/src/types/apis/Problem.api.ts b/src/types/apis/Problem.api.ts
new file mode 100644
index 0000000..cc300a3
--- /dev/null
+++ b/src/types/apis/Problem.api.ts
@@ -0,0 +1,102 @@
+import { AxiosResponse } from "axios";
+import { GroupModel, ProblemGroupPermissionModel } from "../models/Group.model";
+import {
+	ProblemModel,
+	ProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel,
+	ProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel,
+	ProblemPopulateCreatorSecureModel,
+	ProblemPopulateTestcases
+} from "../models/Problem.model";
+
+export type CreateProblemRequest = {
+	title: string;
+	language: string;
+	description: string | null;
+	solution: string;
+	testcases: string[];
+	time_limit: number;
+	allowed_languages: string;
+};
+
+export type UpdateProblemRequest = {
+	title?: string;
+	language?: string;
+	description?: string;
+	solution?: string;
+	testcases?: string[];
+	time_limit?: number;
+};
+
+export type GetAllProblemsByAccountResponse = {
+	problems: ProblemPopulateTestcases[];
+	manageable_problems: ProblemPopulateTestcases[];
+};
+
+export type ValidateProgramRequest = {
+	language: string;
+	source_code: string;
+	testcases: string[];
+	time_limited: number;
+};
+
+export type RuntimeResult = {
+	input: string;
+	output: string | null;
+	runtime_status: string;
+};
+
+export type ValidateProgramResponse = {
+	runnable: boolean;
+	has_error: boolean;
+	has_timeout: boolean;
+	runtime_results: RuntimeResult[];
+};
+
+export type GetAllProblemsResponse = {
+	problems: ProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel[];
+};
+
+export type ProblemGroupPermissionCreateRequest = {
+	group_id: string;
+	permission_manage_problems?: boolean;
+	permission_view_problems?: boolean;
+};
+
+export type ProblemGroupPermissionPopulateGroupModel =
+	ProblemGroupPermissionModel & {
+		group: GroupModel;
+	};
+
+export type ProblemServiceAPI = {
+	create: (
+		accountId: string,
+		request: CreateProblemRequest
+	) => Promise<AxiosResponse<ProblemModel>>;
+	getAll: () => Promise<AxiosResponse<GetAllProblemsResponse>>;
+	getAllAsCreator: (
+		accountId: string
+	) => Promise<AxiosResponse<GetAllProblemsByAccountResponse>>;
+	get: (
+		accountId: string,
+		problemId: string
+	) => Promise<
+		AxiosResponse<ProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel>
+	>;
+	update: (
+		problemId: string,
+		request: UpdateProblemRequest | CreateProblemRequest
+	) => Promise<AxiosResponse<ProblemModel>>;
+	// deleteMultiple: (problemIds:string[]) => Promise<AxiosResponse<null>>;
+	delete: (problemId: string) => Promise<AxiosResponse<null>>;
+	updateGroupPermissions: (
+		problemId: string,
+		accountId: string,
+		groups: ProblemGroupPermissionCreateRequest[]
+	) => Promise<
+		AxiosResponse<ProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel>
+	>;
+	validateProgram: (
+		request: ValidateProgramRequest
+	) => Promise<AxiosResponse<ValidateProgramResponse>>;
+	getPublic: (problemId: string) => Promise<AxiosResponse<ProblemPopulateCreatorSecureModel>>;
+};
diff --git a/src/types/apis/Submission.api.ts b/src/types/apis/Submission.api.ts
new file mode 100644
index 0000000..f794db2
--- /dev/null
+++ b/src/types/apis/Submission.api.ts
@@ -0,0 +1,44 @@
+import { AxiosResponse } from "axios";
+import { ProblemPopulateAccountSecureModel } from "../models/Problem.model";
+import { GetSubmissionByAccountProblemResponse, SubmissionPopulateSubmissionTestcaseAndProblemSecureModel, SubmissionPopulateSubmissionTestcasesSecureModel, SubmissionTestcaseSecureModel } from "../models/Submission.model";
+
+export type SubmitProblemRequest = {
+    language: string
+    submission_code: string
+}
+
+export type SubmitProblemResponse = {
+    submission_id: string
+    problem: ProblemPopulateAccountSecureModel
+    language: string
+    submission_code: string
+    is_passed: boolean
+    date: string
+    score: number
+    max_score: number
+    passed_ratio: number
+    account: number
+    runtime_output: SubmissionTestcaseSecureModel[]
+}
+
+export type GetAllSubmissionsQuery = {
+    problem_id?: string
+    account_id?: string
+    passed?: number
+    sort_date?: number
+    sort_score?: number
+    start?: number
+    end?: number
+}
+
+export type GetAllSubmissionsResponse = {
+    submissions: SubmissionPopulateSubmissionTestcaseAndProblemSecureModel[]
+}
+
+export type SubmissionServiceAPI = {
+    submit: (accountId:string,problemId:string,request: SubmitProblemRequest) => Promise<AxiosResponse<SubmissionPopulateSubmissionTestcasesSecureModel>>;
+    topicSubmit: (accountId:string,topicId:string,problemId:string,request: SubmitProblemRequest) => Promise<AxiosResponse<SubmissionPopulateSubmissionTestcasesSecureModel>>;
+    getByAccountProblem: (accountId:string,problemId:string) => Promise<AxiosResponse<GetSubmissionByAccountProblemResponse>>;
+    getByAccountProblemInTopic: (accountId:string,problemId:string,topicId:string) => Promise<AxiosResponse<GetSubmissionByAccountProblemResponse>>;
+    getAll: (query?:GetAllSubmissionsQuery) => Promise<AxiosResponse<GetAllSubmissionsResponse>>;
+}
\ No newline at end of file
diff --git a/src/types/apis/Topic.api.ts b/src/types/apis/Topic.api.ts
new file mode 100644
index 0000000..da28fd6
--- /dev/null
+++ b/src/types/apis/Topic.api.ts
@@ -0,0 +1,30 @@
+import { AxiosResponse } from "axios";
+import { TopicModel, TopicPopulateTopicCollectionPopulateCollectionModel, TopicPopulateTopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel, TopicPopulateTopicCollectionPopulateCollectionPopulateCollectionProblemsPopulateProblemAndCollectionGroupPermissionsPopulateGroupAndTopicGroupPermissionPopulateGroupModel } from "../models/Topic.model";
+
+export type GetAllTopicsByAccountResponse = {
+    topics: TopicPopulateTopicCollectionPopulateCollectionModel[];
+    manageable_topics: TopicPopulateTopicCollectionPopulateCollectionModel[];
+}
+
+export type GetAllTopicsByAccessibleAccountResponse = {
+    topics: TopicModel[];
+}
+
+export type CourseGroupPermissionCreateRequest = {
+    group_id: string;
+    permission_manage_topics?: boolean
+    permission_view_topics?: boolean
+    permission_view_topics_log?: boolean
+}
+
+export type TopicSerivceAPI = {
+    create: (accountid: string,request: FormData) => Promise<AxiosResponse<TopicModel>>;
+    get: (accountId: string,courseId:string) => Promise<AxiosResponse<TopicPopulateTopicCollectionPopulateCollectionPopulateCollectionProblemsPopulateProblemAndCollectionGroupPermissionsPopulateGroupAndTopicGroupPermissionPopulateGroupModel>>;
+    getAllAsCreator: (accountId:string) => Promise<AxiosResponse<GetAllTopicsByAccountResponse>>;
+    getAllAccessibleByAccount: (accountId:string) => Promise<AxiosResponse<GetAllTopicsByAccessibleAccountResponse>>;
+    getPublicByAccount: (accountId:string,courseId:string) => Promise<AxiosResponse<TopicPopulateTopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel>>;
+    update: (courseId:string,accountId:string,request: FormData) => Promise<AxiosResponse<TopicModel>>;
+    delete: (courseId:string,accountId:string) => Promise<AxiosResponse<null>>;
+    updateCollections: (topicId:string,collectionIds:string[]) => Promise<AxiosResponse<TopicModel>>;
+    updateGroupPermissions: (topicId:string,accountId:string,groups:CourseGroupPermissionCreateRequest[]) => Promise<AxiosResponse<TopicModel>>;
+}
\ No newline at end of file
diff --git a/src/types/forms/CreateCollectionRequestForm.ts b/src/types/forms/CreateCollectionRequestForm.ts
new file mode 100644
index 0000000..2abbfca
--- /dev/null
+++ b/src/types/forms/CreateCollectionRequestForm.ts
@@ -0,0 +1,25 @@
+import { ItemInterface } from "react-sortablejs";
+import { PlateEditorValueType } from "../PlateEditorValueType";
+import { CollectionPopulateCollectionProblemsPopulateProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupAndCollectionGroupPermissionsPopulateGroupModel } from "../models/Collection.model";
+import { GroupModel } from "../models/Group.model";
+import { ProblemPopulateTestcases } from "../models/Problem.model";
+import { CollectionPermissionRequestForm } from "./CreateGroupRequestForm";
+import { ProblemGroupPermissionRequestForm } from "./CreateProblemRequestForm";
+
+export type CollectionGroupPermissionRequestForm = {
+    group_id: string;
+    group: GroupModel;
+} & CollectionPermissionRequestForm
+
+export type ProblemItemInterface = ItemInterface & {
+    problem: ProblemPopulateTestcases;
+    groupPermissions: ProblemGroupPermissionRequestForm[];
+}
+
+export type CreateCollectionRequestForm = {
+    title: string;
+    description: PlateEditorValueType;
+    problemsInterface: ProblemItemInterface[];
+    groupPermissions: CollectionGroupPermissionRequestForm[];
+    collection: null | CollectionPopulateCollectionProblemsPopulateProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupAndCollectionGroupPermissionsPopulateGroupModel;
+}
\ No newline at end of file
diff --git a/src/types/forms/CreateCourseRequestForm.ts b/src/types/forms/CreateCourseRequestForm.ts
new file mode 100644
index 0000000..4713542
--- /dev/null
+++ b/src/types/forms/CreateCourseRequestForm.ts
@@ -0,0 +1,34 @@
+import { ItemInterface } from "react-sortablejs";
+import { PlateEditorValueType } from "../PlateEditorValueType";
+import { CollectionPopulateCollectionProblemPopulateProblemModel, CollectionPopulateCollectionProblemsPopulateProblemAndCollectionGroupPermissionsPopulateGroupModel } from "../models/Collection.model";
+import { GroupModel } from "../models/Group.model";
+import { TopicPopulateTopicCollectionPopulateCollectionPopulateCollectionProblemsPopulateProblemAndCollectionGroupPermissionsPopulateGroupAndTopicGroupPermissionPopulateGroupModel } from "../models/Topic.model";
+import { CollectionGroupPermissionRequestForm } from "./CreateCollectionRequestForm";
+import { CoursePermissionRequestForm } from "./CreateGroupRequestForm";
+
+export type CourseGroupPermissionRequestForm = {
+    group_id: string;
+    group: GroupModel;
+} & CoursePermissionRequestForm
+
+export type CourseCollectionsGroupPermissionRequestForm = {
+    collection_id: string;
+    collection: CollectionPopulateCollectionProblemsPopulateProblemAndCollectionGroupPermissionsPopulateGroupModel;
+    groupPermissions: CollectionGroupPermissionRequestForm[];
+}
+
+export type CollectionItemInterface = ItemInterface & {
+    collection: CollectionPopulateCollectionProblemPopulateProblemModel;
+    groupPermissions: CollectionGroupPermissionRequestForm[];
+}
+
+export type CreateCourseRequestForm = {
+    title: string;
+    description: PlateEditorValueType;
+    image?: File | string | null;
+    isPrivate?: boolean;
+    collectionsInterface: CollectionItemInterface[] //ItemInterface[];
+    groupPermissions: CourseGroupPermissionRequestForm[];
+    course: null | TopicPopulateTopicCollectionPopulateCollectionPopulateCollectionProblemsPopulateProblemAndCollectionGroupPermissionsPopulateGroupAndTopicGroupPermissionPopulateGroupModel //| TopicPopulateTopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemAndTopicGroupPermissionPopulateGroupModel | TopicPopulateTopicCollectionPopulateCollectionAndTopicGroupPermissionPopulateGroupModel | null;
+    // collectionGroupPermissions: CourseCollectionsGroupPermissionRequestForm[];
+}
diff --git a/src/types/forms/CreateGroupRequestForm.ts b/src/types/forms/CreateGroupRequestForm.ts
new file mode 100644
index 0000000..3371a7d
--- /dev/null
+++ b/src/types/forms/CreateGroupRequestForm.ts
@@ -0,0 +1,24 @@
+import { ItemInterface } from "react-sortablejs";
+
+export type CoursePermissionRequestForm = {
+    manageCourses: boolean;
+    viewCourseLogs: boolean;
+    viewCourses: boolean;
+}
+
+export type CollectionPermissionRequestForm = {
+    manageCollections: boolean;
+    viewCollections: boolean;
+}
+
+export type ProblemPermissionRequestForm = {
+    manageProblems: boolean;
+    viewProblems: boolean;
+}
+
+export type CreateGroupRequestForm = {
+    name: string;
+    description: string | null;
+    color: string | null;
+    membersInterface: ItemInterface[];
+} & CoursePermissionRequestForm & CollectionPermissionRequestForm & ProblemPermissionRequestForm
\ No newline at end of file
diff --git a/src/types/forms/CreateProblemRequestForm.ts b/src/types/forms/CreateProblemRequestForm.ts
new file mode 100644
index 0000000..273d197
--- /dev/null
+++ b/src/types/forms/CreateProblemRequestForm.ts
@@ -0,0 +1,22 @@
+import { PlateEditorValueType } from "../PlateEditorValueType";
+import { GroupModel } from "../models/Group.model";
+import { TestcaseModel } from "../models/Problem.model";
+import { ProblemPermissionRequestForm } from "./CreateGroupRequestForm";
+
+export type ProblemGroupPermissionRequestForm = {
+	groupId: string;
+	group: GroupModel
+} & ProblemPermissionRequestForm
+
+export type CreateProblemRequestForm = {
+	title: string;
+	description: PlateEditorValueType;
+	language: string;
+	solution: string;
+	testcases: string;
+	testcase_delimeter: string;
+	time_limit: number;
+	validated_testcases?: TestcaseModel[];
+	groupPermissions: ProblemGroupPermissionRequestForm[];
+	allowedLanguage: string[];
+};
\ No newline at end of file
diff --git a/src/types/models/Account.model.ts b/src/types/models/Account.model.ts
new file mode 100644
index 0000000..e943acb
--- /dev/null
+++ b/src/types/models/Account.model.ts
@@ -0,0 +1,19 @@
+export type AccountModel = {
+    account_id: string
+    email: string
+    username: string
+    password: string
+    token: string | null
+    token_expire: string | null
+    is_active: boolean
+    is_private: boolean
+}
+
+export type AccountSecureModel = {
+    account_id: string
+    username: string
+}
+
+export type AccountHashedTable = {
+    [id:string]: AccountModel | AccountSecureModel
+}
\ No newline at end of file
diff --git a/src/types/models/Auth.model.ts b/src/types/models/Auth.model.ts
new file mode 100644
index 0000000..7529225
--- /dev/null
+++ b/src/types/models/Auth.model.ts
@@ -0,0 +1,3 @@
+export type AuthenticationResultResponse = {
+    result: string;
+}
\ No newline at end of file
diff --git a/src/types/models/Collection.model.ts b/src/types/models/Collection.model.ts
new file mode 100644
index 0000000..f8a2ccf
--- /dev/null
+++ b/src/types/models/Collection.model.ts
@@ -0,0 +1,104 @@
+import { GroupModel } from "./Group.model";
+import {
+	ProblemModel,
+	ProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel,
+	ProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel,
+	ProblemSecureModel,
+} from "./Problem.model";
+
+export type CollectionModel = {
+	collection_id: string;
+	creator: string;
+	name: string;
+	description: string | null;
+	is_active: boolean;
+	is_private: boolean;
+	created_date: string;
+	updated_date: string;
+};
+
+export type CollectionPopulateProblemSecureModel = CollectionModel & {
+	problems: ProblemSecureModel[];
+};
+
+export type CollectionProblemModel = CollectionModel & {
+	problems: CollectionProblemPopulateProblemSecureModel[];
+};
+
+export type CollectionCreateRequest = {
+	name: string;
+	description?: string;
+};
+
+export type CollectionUpdateRequest = {
+	name?: string;
+	description?: string;
+};
+
+export type CollectionProblemPopulateProblemModel = {
+	id: string;
+	problem: ProblemModel;
+	order: number;
+	collection: number;
+};
+
+export type CollectionProblemPopulateProblemSecureModel = {
+	id: string;
+	problem: ProblemSecureModel;
+	order: number;
+	collection: number;
+};
+
+export type CollectionHashedTable = {
+	[
+		collection_id: string
+	]: CollectionPopulateCollectionProblemPopulateProblemModel;
+};
+
+export type CollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel =
+	{
+		id: string;
+		problem: ProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel;
+		order: number;
+		collection: number;
+	};
+
+export type CollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel =
+	CollectionModel & {
+		problems: CollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel[];
+	};
+
+export type CollectionPopulateCollectionProblemPopulateProblemModel =
+	CollectionModel & {
+		problems: CollectionProblemPopulateProblemModel[];
+	};
+
+export type CollectionGroupPermissionModel = {
+	collection_group_permission_id: string;
+	group: string;
+	permission_manage_collections: boolean;
+	permission_view_collections: boolean;
+	collection: string;
+};
+
+export type CollectionGroupPermissionPopulateGroupModel =
+	CollectionGroupPermissionModel & {
+		group: GroupModel;
+	};
+
+export type CollectionPopulateCollectionProblemsPopulateProblemAndCollectionGroupPermissionsPopulateGroupModel =
+	CollectionModel & {
+		problems: CollectionProblemPopulateProblemModel[];
+		group_permissions: CollectionGroupPermissionPopulateGroupModel[];
+	};
+
+export type CollectionProblemsPopulateProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel =
+	CollectionProblemModel & {
+		problem: ProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel;
+	};
+
+export type CollectionPopulateCollectionProblemsPopulateProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupAndCollectionGroupPermissionsPopulateGroupModel =
+	CollectionModel & {
+		group_permissions: CollectionGroupPermissionPopulateGroupModel[];
+		problems: CollectionProblemsPopulateProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel[];
+	};
diff --git a/src/types/models/Group.model.ts b/src/types/models/Group.model.ts
new file mode 100644
index 0000000..8085037
--- /dev/null
+++ b/src/types/models/Group.model.ts
@@ -0,0 +1,58 @@
+import { AccountSecureModel } from "./Account.model";
+
+export type GroupModel = {
+    group_id: string;
+    creator: string;
+    name: string;
+    description: string | null;
+    color: string;
+    created_date: string;
+    updated_date: string;
+    permission_manage_topics: boolean;
+    permission_view_topics: boolean;
+    permission_view_topics_log: boolean;
+    permission_manage_collections: boolean;
+    permission_view_collections: boolean;
+    permission_manage_problems: boolean;
+    permission_view_problems: boolean;
+}
+
+export type GroupMemberModel = {
+    group_member_id: string;
+    group: number;
+    account: number;
+    created_date: string;
+}  
+
+export type GroupMemberPopulateAccountSecureModel = GroupMemberModel & {
+    account: AccountSecureModel;
+}
+
+export type GroupPopulateGroupMemberPopulateAccountSecureModel = GroupModel & {
+    members: GroupMemberPopulateAccountSecureModel[]
+}
+
+export type GroupHashedTable = {
+    [id:string]: GroupModel | GroupPopulateGroupMemberPopulateAccountSecureModel
+}
+
+export type TopicGroupPermissionModel = {
+    topic_group_permission_id: string
+    group: string
+    permission_manage_topics: boolean
+    permission_view_topics: boolean
+    permission_view_topics_log: boolean
+    topic: string
+}
+
+export type ProblemGroupPermissionModel = {
+    problem_group_permission_id: string
+    group: string
+    permission_manage_problems: boolean
+    permission_view_problems: boolean
+    problem: string
+}
+
+export type TopicGroupPermissionPopulateGroupModel = TopicGroupPermissionModel & {
+    group: GroupModel
+}
\ No newline at end of file
diff --git a/src/types/models/Problem.model.ts b/src/types/models/Problem.model.ts
new file mode 100644
index 0000000..db63125
--- /dev/null
+++ b/src/types/models/Problem.model.ts
@@ -0,0 +1,81 @@
+import { ProblemGroupPermissionPopulateGroupModel } from "../apis/Problem.api"
+import { AccountModel, AccountSecureModel } from "./Account.model"
+import { SubmissionPopulateSubmissionTestcasesSecureModel } from "./Submission.model"
+
+export type TestcaseModel = {
+    testcase_id: string
+    input: string
+    output: string | null
+    problem: number
+    runtime_status: string
+}
+
+export type ProblemModel = {
+    problem_id: string
+    language: string
+    title: string
+    description: string | null
+    solution: string
+    time_limit: number
+    is_active: boolean
+    is_private: boolean
+    submission_regex: string
+    creator: string
+    testcases: TestcaseModel[]
+    created_date: string;
+    updated_date: string;
+    allowed_languages: string
+}
+
+export type ProblemSecureModel = {
+    problem_id: string
+    language: string
+    title: string
+    description: string
+    time_limit: string
+    created_date: string
+    updated_date: string
+    allowed_languages: string
+    creator: string
+}
+
+export type ProblemPopulateCreatorSecureModel = ProblemSecureModel & {
+    creator: AccountSecureModel
+}
+
+export type ProblemPoplulateCreatorModel = ProblemModel & {
+    creator: AccountSecureModel
+}
+
+export type ProblemPopulateAccountSecureModel = {
+    problem_id: string
+    title: string
+    description: string | null
+    creator: AccountSecureModel
+}
+
+
+export type ProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel = ProblemPoplulateCreatorModel & {
+    best_submission: SubmissionPopulateSubmissionTestcasesSecureModel | null
+}
+
+export type ProblemPopulateTestcases = ProblemModel & {
+    testcases: TestcaseModel[]
+}
+
+export type ProblemHashedTable = {
+    [id:string]: ProblemModel | ProblemPopulateTestcases | ProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel
+}
+
+export type ProblemHealth = {
+    has_source_code: boolean
+    testcase_count: number
+    no_runtime_error: boolean
+}
+
+export type ProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel =
+	ProblemModel & {
+		creator: AccountModel;
+		testcases: TestcaseModel[];
+		group_permissions: ProblemGroupPermissionPopulateGroupModel[];
+	};
\ No newline at end of file
diff --git a/src/types/models/Submission.model.ts b/src/types/models/Submission.model.ts
new file mode 100644
index 0000000..0693779
--- /dev/null
+++ b/src/types/models/Submission.model.ts
@@ -0,0 +1,106 @@
+import { ProblemModel, ProblemSecureModel } from "./Problem.model";
+
+export type SubmissionTestcaseModel = {
+    submission_testcase_id: string;
+    submission: number;
+    testcase: number;
+    output: string;
+    is_passed: boolean;
+    runtime_status: string;
+}
+
+export type SubmissionTestcaseSecureModel = {
+	is_passed: boolean;
+	runtime_status: string;
+};
+
+export type SubmissionModel = {
+	submission_id: string;
+	problem: number;
+    topic: number | null;
+    language: string;
+	submission_code: string;
+	is_passed: boolean;
+	date: string;
+	score: number;
+	max_score: number;
+	passed_ratio: number;
+	account: number;
+};
+
+export type SubmissionPopulateProblemModel = {
+    submission_id: string;
+    account: number;
+    problem: ProblemModel;
+    language:  string;
+    submission_code: string;
+    is_passed: boolean;
+    date: string;
+    score: number;
+    max_score: number;
+    passed_ratio: number;
+    runtime_output: SubmissionTestcaseSecureModel[];
+}
+
+export type SubmissionPoplulateProblemSecureModel = {
+    submission_id: string;
+	problem: ProblemModel;
+	submission_code: string;
+	is_passed: boolean;
+	date: string;
+	score: number;
+	max_score: number;
+	passed_ratio: number;
+	account: number;
+}
+
+export type SubmissionPopulateSubmissionTestcaseSecureModel = {
+    submission_id: string
+    problem: number
+    language: string
+    submission_code: string
+    is_passed: boolean
+    date: string
+    score: number
+    max_score: number
+    passed_ratio: number
+    account: number
+    runtime_output: SubmissionTestcaseSecureModel[]
+}
+
+export type GetSubmissionByAccountProblemSubmissionModel = {
+    submission_id: string
+    problem: string
+    language: string
+    submission_code: string
+    is_passed: boolean
+    date: string
+    score: number
+    max_score: number
+    passed_ratio: number
+    account: number
+    runtime_output: SubmissionTestcaseSecureModel[]
+}
+
+export type GetSubmissionByAccountProblemResponse = {
+    best_submission: SubmissionPopulateSubmissionTestcasesSecureModel
+    submissions: SubmissionPopulateSubmissionTestcasesSecureModel[]
+}
+
+export type SubmissionPopulateSubmissionTestcasesSecureModel = {
+    submission_id: string
+    problem: number
+    language: string
+    submission_code: string
+    is_passed: boolean
+    date: string
+    score: number
+    max_score: number
+    passed_ratio: number
+    runtime_output: SubmissionTestcaseSecureModel[]
+}
+
+export type SubmissionPopulateSubmissionTestcaseAndProblemSecureModel = SubmissionModel & {
+    problem: ProblemSecureModel;
+    runtime_output: SubmissionTestcaseSecureModel[];
+}
\ No newline at end of file
diff --git a/src/types/models/Topic.model.ts b/src/types/models/Topic.model.ts
new file mode 100644
index 0000000..f85d09b
--- /dev/null
+++ b/src/types/models/Topic.model.ts
@@ -0,0 +1,77 @@
+import { CollectionModel, CollectionPopulateCollectionProblemPopulateProblemModel, CollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel, CollectionPopulateCollectionProblemsPopulateProblemAndCollectionGroupPermissionsPopulateGroupModel } from "./Collection.model"
+import { TopicGroupPermissionPopulateGroupModel } from "./Group.model"
+
+export type TopicModel = {
+    topic_id: string
+    creator: string
+    name: string
+    description: string | null
+    image_url: string | null
+    is_active: boolean
+    is_private: boolean
+    created_date: string
+    updated_date: string
+}
+
+export type TopicSecureModel = {
+    topic_id: string
+    creator: string
+    name: string
+    description: string | null
+    image_url: string | null
+    created_date: string
+    updated_date: string
+}
+
+export type TopicCollectionModel = {
+    topic: TopicModel;
+    collection: CollectionModel[]
+}
+
+export type TopicCollectionPopulateCollectionModel = {
+    id: string;
+    collection: CollectionModel;
+    order: number;
+    topic: number;
+}
+
+export type TopicPopulateTopicCollectionPopulateCollectionModel = TopicModel & {
+    collections: TopicCollectionPopulateCollectionModel[]
+}
+
+export type TopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel = {
+    id: string;
+    collection: CollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel;
+    order: number;
+    topic: number;
+}
+
+export type TopicPopulateTopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel = TopicSecureModel & {
+    collections: TopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel[]
+}
+
+export type TopicPopulateTopicCollectionPopulateCollectionAndTopicGroupPermissionPopulateGroupModel = TopicModel & {
+    collections: TopicCollectionPopulateCollectionModel[]
+    group_permissions: TopicGroupPermissionPopulateGroupModel[]
+}
+
+export type TopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemModel = TopicCollectionPopulateCollectionModel & {
+    collection: CollectionPopulateCollectionProblemPopulateProblemModel
+}
+
+export type TopicPopulateTopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemAndTopicGroupPermissionPopulateGroupModel = TopicModel & {
+    collections: TopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemModel[]
+    group_permissions: TopicGroupPermissionPopulateGroupModel[]
+}
+
+export type TopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemAndCollectionGroupPermissionsPopulateGroupModel = {
+    id: string;
+    collection: CollectionPopulateCollectionProblemsPopulateProblemAndCollectionGroupPermissionsPopulateGroupModel;
+    order: number;
+    topic: number;
+}
+
+export type TopicPopulateTopicCollectionPopulateCollectionPopulateCollectionProblemsPopulateProblemAndCollectionGroupPermissionsPopulateGroupAndTopicGroupPermissionPopulateGroupModel = TopicModel & {
+    collections: TopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemAndCollectionGroupPermissionsPopulateGroupModel[]
+    group_permissions: TopicGroupPermissionPopulateGroupModel[]
+}
\ No newline at end of file
diff --git a/src/utilities/HandleDeprecatedDescription.ts b/src/utilities/HandleDeprecatedDescription.ts
new file mode 100644
index 0000000..12e4e20
--- /dev/null
+++ b/src/utilities/HandleDeprecatedDescription.ts
@@ -0,0 +1,15 @@
+import { ELEMENT_PARAGRAPH } from "@udecode/plate-paragraph";
+
+export function handleDeprecatedDescription(description: string): string{
+	if (description[0] === "[") {
+		return description;
+	} else {
+		return JSON.stringify([
+			{
+				id: "1",
+				type: ELEMENT_PARAGRAPH,
+				children: [{ text: description }],
+			},
+		]);
+	}
+};
\ No newline at end of file
diff --git a/src/utilities/OnMiddleClickOpenInNewTab.ts b/src/utilities/OnMiddleClickOpenInNewTab.ts
new file mode 100644
index 0000000..ae0d5b6
--- /dev/null
+++ b/src/utilities/OnMiddleClickOpenInNewTab.ts
@@ -0,0 +1,9 @@
+export function onMiddleClickOpenInNewTab(
+	e: React.MouseEvent<HTMLDivElement, MouseEvent> | React.MouseEvent<HTMLButtonElement, MouseEvent>,
+	url: string
+) {
+	if (e.button === 1) {
+		const win = window.open(url, "_blank");
+		if (win) win.focus();
+	}
+}
diff --git a/src/utilities/ReadableDateFormat.ts b/src/utilities/ReadableDateFormat.ts
new file mode 100644
index 0000000..736f212
--- /dev/null
+++ b/src/utilities/ReadableDateFormat.ts
@@ -0,0 +1,4 @@
+export function readableDateFormat(date:string): string{
+    let spt = String(new Date(date)).split(' ')
+    return (`${spt[0]} ${spt[2]}/${spt[1]}/${spt[3]} (${spt[4]})`)
+}
\ No newline at end of file
diff --git a/src/utilities/TestcaseFormat.ts b/src/utilities/TestcaseFormat.ts
new file mode 100644
index 0000000..3e37515
--- /dev/null
+++ b/src/utilities/TestcaseFormat.ts
@@ -0,0 +1,8 @@
+export function testcaseParse(testcases: string, delimeter: string): string[] {
+    if (testcases === "") return [];
+	return testcases.replace(/\r\n/g, "\n").split(delimeter + "\n");
+};
+
+export function testcasesStringify(testcases: string[], delimeter: string): string {
+    return testcases.join(delimeter + "\n");
+}
\ No newline at end of file
diff --git a/src/views/CourseManagement.tsx b/src/views/CourseManagement.tsx
new file mode 100644
index 0000000..d08bcd3
--- /dev/null
+++ b/src/views/CourseManagement.tsx
@@ -0,0 +1,57 @@
+import MyCollectionCard from "../components/CoursePlaylist/CollectionCard";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "../components/shadcn/Accordion";
+import NavbarMenuLayout from "../layout/NavbarMenuLayout";
+
+const CourseManagement = () => {
+	return (
+		<NavbarMenuLayout yPad={false} xPad={false}>
+			<div className="flex">
+				<div className="w-1/6 border-2 h-screen pt-10">
+					{/* <h1>Course Management</h1> */}
+
+					<Accordion type="single" collapsible className="w-full">
+						<AccordionItem value="item-1">
+							<AccordionTrigger>
+								Introduction course
+							</AccordionTrigger>
+							<AccordionContent>
+								<div className="grid gap-y-1">
+									<MyCollectionCard />
+									<MyCollectionCard />
+									<MyCollectionCard />
+									<MyCollectionCard />
+								</div>
+							</AccordionContent>
+						</AccordionItem>
+					</Accordion>
+
+                    <Accordion type="single" collapsible className="w-full">
+						<AccordionItem value="item-1">
+							<AccordionTrigger>
+								Introduction course 2
+							</AccordionTrigger>
+							<AccordionContent>
+								<div className="grid gap-y-1">
+									<MyCollectionCard />
+									<MyCollectionCard />
+									<MyCollectionCard />
+									<MyCollectionCard />
+								</div>
+							</AccordionContent>
+						</AccordionItem>
+					</Accordion>
+				</div>
+				<div className="pt-10">
+					<h1>Course Management</h1>
+				</div>
+			</div>
+		</NavbarMenuLayout>
+	);
+};
+
+export default CourseManagement;
diff --git a/src/views/Dashboard.tsx b/src/views/Dashboard.tsx
new file mode 100644
index 0000000..499276b
--- /dev/null
+++ b/src/views/Dashboard.tsx
@@ -0,0 +1,97 @@
+import { useEffect, useState } from "react";
+import PublicCourseCard from "../components/Cards/CourseCards/PublicCourseCard";
+import SubmissionCard from "../components/Cards/SubmissionCard";
+import {
+	Carousel,
+	CarouselContent,
+	CarouselItem,
+	CarouselNext,
+	CarouselPrevious,
+} from "../components/shadcn/Carousel";
+import NavbarMenuLayout from "../layout/NavbarMenuLayout";
+import { SubmissionService } from "../services/Submission.service";
+import { TopicService } from "../services/Topic.service";
+import { SubmissionPopulateSubmissionTestcaseAndProblemSecureModel } from "../types/models/Submission.model";
+import { TopicModel } from "../types/models/Topic.model";
+
+const Dashboard = () => {
+	const accountId = String(localStorage.getItem("account_id"));
+	const username = localStorage.getItem("username");
+
+	const [previousAttemptedProblems, setPreviousAttemptedProblems] = useState<
+		SubmissionPopulateSubmissionTestcaseAndProblemSecureModel[]
+	>([]);
+
+	const [accessibleCourses, setAccessibleCourses] = useState<TopicModel[]>(
+		[]
+	);
+
+	useEffect(() => {
+		SubmissionService.getAll({
+			account_id: accountId,
+			sort_date: 1,
+			start: 0,
+			end: 10,
+		}).then((response) => {
+			setPreviousAttemptedProblems(response.data.submissions);
+			// console.log(response.data.submissions);
+		});
+
+		TopicService.getAllAccessibleByAccount(accountId).then((response) => {
+			console.log("result", response.data.topics);
+			setAccessibleCourses(response.data.topics);
+		});
+	}, [accountId]);
+
+	return (
+		<NavbarMenuLayout xPad={false}>
+			<div className="mt-10 w-[90%] mx-auto">
+				<p className="text-4xl font-bold">
+					Welcome back,{" "}
+					<span className="text-green-600">{username}</span>
+				</p>
+
+				<p className="text-3xl font-bold mt-8 mb-3">
+					Previous Attempted
+				</p>
+
+				<Carousel>
+					<CarouselContent>
+						{previousAttemptedProblems.map((submission, index) => (
+							<CarouselItem className="basis-1/4">
+								<SubmissionCard
+									key={index}
+									submission={submission}
+								/>
+							</CarouselItem>
+						))}
+					</CarouselContent>
+					<CarouselNext />
+					<CarouselPrevious />
+				</Carousel>
+
+				{/* <div className="grid grid-cols-4 gap-4">
+					{previousAttemptedProblems.map((submission, index) => (
+						<SubmissionCard key={index} submission={submission} />
+					))}
+				</div> */}
+
+				<p className="text-3xl font-bold mt-8 mb-3">Courses</p>
+				<Carousel>
+					<CarouselContent>
+						{accessibleCourses.map((course,index) => (
+						<CarouselItem className="basis-1/4">
+							<PublicCourseCard key={index} course={course} />
+						</CarouselItem>
+					))}
+					</CarouselContent>
+					<CarouselNext />
+					<CarouselPrevious />
+				</Carousel>
+				
+			</div>
+		</NavbarMenuLayout>
+	);
+};
+
+export default Dashboard;
diff --git a/src/views/ExploreCourses.tsx b/src/views/ExploreCourses.tsx
new file mode 100644
index 0000000..411f1fb
--- /dev/null
+++ b/src/views/ExploreCourses.tsx
@@ -0,0 +1,36 @@
+import { useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import { Separator } from '../components/shadcn/Seperator'
+import NavbarMenuLayout from '../layout/NavbarMenuLayout'
+import { TopicService } from '../services/Topic.service'
+
+const ExploreCourses = () => {
+
+	const accountId = String(localStorage.getItem("account_id"))
+	const {courseId} = useParams()
+
+	useEffect(( )=> {
+		TopicService.getPublicByAccount(accountId,String(courseId)).then(response => {
+			console.log(response.data)
+		
+		})
+	},[accountId,courseId])
+
+  return (
+    <NavbarMenuLayout>
+        <div className="mx-auto w-[90%] mt-10">
+				<h1 className="text-3xl font-bold">Explore Public Course</h1>
+				<div>
+					{/* <CardContainer className="w-3/4">
+						{problems.map((problem) => (
+							<PublicProblemCard problem={problem} />
+						))}
+					</CardContainer> */}
+                <Separator orientation="vertical"/>
+				</div>
+			</div>
+    </NavbarMenuLayout>
+  )
+}
+
+export default ExploreCourses
\ No newline at end of file
diff --git a/src/views/ExploreProblems.tsx b/src/views/ExploreProblems.tsx
new file mode 100644
index 0000000..cd06804
--- /dev/null
+++ b/src/views/ExploreProblems.tsx
@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+import CardContainer from "../components/CardContainer";
+import PublicProblemCard from "../components/Cards/ProblemCards/PublicProblemCard";
+import { Separator } from "../components/shadcn/Seperator";
+import NavbarMenuLayout from "../layout/NavbarMenuLayout";
+import { ProblemService } from "../services/Problem.service";
+import { ProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel } from "../types/models/Problem.model";
+
+const ExploreProblems = () => {
+	const [problems, setProblems] = useState<
+		ProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel[]
+	>([]);
+
+	useEffect(() => {
+		ProblemService.getAll().then((response) => {
+      console.log('prob',response.data.problems)
+			setProblems(response.data.problems);
+		});
+	}, []);
+
+	return (
+		<NavbarMenuLayout>
+			<div className="mx-auto w-[90%] mt-10">
+				<h1 className="text-3xl font-bold">Explore Public Problems</h1>
+				<div>
+					<CardContainer className="w-3/4">
+						{problems.map((problem) => (
+							<PublicProblemCard problem={problem} />
+						))}
+					</CardContainer>
+          <Separator orientation="vertical"/>
+				</div>
+			</div>
+		</NavbarMenuLayout>
+	);
+};
+
+export default ExploreProblems;
diff --git a/src/views/Home.tsx b/src/views/Home.tsx
index 1b1db95..6b82ace 100644
--- a/src/views/Home.tsx
+++ b/src/views/Home.tsx
@@ -1,12 +1,12 @@
-import React from "react";
-import { Button } from "reactstrap";
+import CenterContainer from "../layout/CenterLayout";
 
 const Home = () => {
 	return (
-		<div>
-			<h1 className="border-2">Home</h1>
-			<Button color="danger">Click</Button>
-		</div>
+		<CenterContainer>
+			<h1 className="mx-auto text-6xl font-bold">
+				Welcome to <span className="text-green-500">Grader</span>
+			</h1>
+		</CenterContainer>
 	);
 };
 
diff --git a/src/views/Login.tsx b/src/views/Login.tsx
index ca8000d..438e41b 100644
--- a/src/views/Login.tsx
+++ b/src/views/Login.tsx
@@ -1,118 +1,155 @@
-import { faKey } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React, { useEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import React, { useState } from "react";
+
+import { Loader2 } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { Button } from "../components/shadcn/Button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "../components/shadcn/Card";
+import { Checkbox } from "../components/shadcn/Checkbox";
 import {
-	Button,
 	Form,
-	FormFeedback,
-	FormGroup,
-	Input,
-	Label,
-} from "reactstrap";
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "../components/shadcn/Form";
+import { Input } from "../components/shadcn/Input";
+import CenterContainer from "../layout/CenterLayout";
+import { AuthService } from "../services/Auth.service";
 // import { getAuthorization, login } from "../services/auth.service";
 
 const Login = () => {
-	const nevigate = useNavigate();
-
-	const [invalid, setInvalid] = useState({
-		username: false,
-		password: false,
-	});
+	const form = useForm();
 
-	const [loading, setloading] = useState(false);
+	const [loading, setLoading] = useState(false);
+	const [userNotFound, setUserNotFound] = useState(false);
+	const [wrongPassword, setWrongPassword] = useState(false);
 
-	const handleSubmit = (e:any) => {
-		// e.preventDefault();
-		// const body = {
-		// 	username: e.target.username.value,
-		// 	password: e.target.password.value,
-		// };
-		// setloading(true);
-		// login(body)
-		// 	.then((response) => {
-		// 		localStorage.setItem("account_id", response.data.account_id);
-		// 		localStorage.setItem("username", response.data.username);
-		// 		localStorage.setItem("token", response.data.token);
-		// 		window.location.reload(false);
-		// 		// nevigate("/my");
-		// 		setloading(false);
-		// 	})
-		// 	.catch((err) => {
-		// 		if (err.response.status === 404) {
-		// 			setInvalid({ ...invalid, username: true, password: false });
-		// 		} else {
-		// 			setInvalid({ ...invalid, username: false, password: true });
-		// 		}
-		// 		setloading(false);
-		// 	});
+	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		setLoading(true);
+		setWrongPassword(false);
+		setUserNotFound(false);
+		const { username, password } = form.getValues();
+		AuthService.login({
+			username,
+			password,
+		}).then((response) => {
+			if (response.status === 202) {
+				const account = response.data;
+				localStorage.setItem("account_id", String(account.account_id));
+				localStorage.setItem("username", account.username);
+				if (account.token) {
+					localStorage.setItem("token", account.token);
+				}
+				window.location.href = "/dashboard";
+			}
+			setLoading(false);
+		}).catch((error) => {
+			if (error.response.status === 404) {
+				setUserNotFound(true);
+			}
+			else if (error.response.status === 406) {
+				setWrongPassword(true);
+			}
+			setLoading(false);
+		})
 	};
 
-	useEffect(() => {
-		// getAuthorization().then((response) => {
-		// 	if (response.data.result) {
-		// 		nevigate("/problems");
-		// 	}
-		// });
-	}, [nevigate]);
-
 	return (
-		<div className="flex h-screen">
-			<div className="m-auto w-1/2">
-				<h1>Login</h1>
-				<Form onSubmit={(e) => handleSubmit(e)}>
-					<FormGroup>
-						<Label for="username">Username</Label>
-						<Input
-							// onChange={(e) => setTestcases(e.target.value)}
-							// value={testcases}
-							invalid={invalid.username}
-							id="username"
-							name="username"
-							type="text"
-							required={true}
-						/>
-						<FormFeedback>
-							<p className="text-sm">
-								This username doesn't exists!
-							</p>
-						</FormFeedback>
-					</FormGroup>
-					<FormGroup>
-						<Label for="password">Password</Label>
-						<Input
-							// onChange={(e) => setTestcases(e.target.value)}
-							// value={testcases}
-							invalid={invalid.password}
-							id="password"
-							name="password"
-							type="password"
-							required={true}
-						/>
-						<FormFeedback>
-							<p className="text-sm">
-								Incorrect password! Please try again.
-							</p>
-						</FormFeedback>
-					</FormGroup>
-					<Button
-						className="px-10"
-						type="submit"
-						color="tertiary"
-						size="lg"
-						disabled={loading}
-					>
-						<FontAwesomeIcon className="mr-2" icon={faKey} />
-						Login
-					</Button>
+		<CenterContainer className="w-[350px]">
+			<Card>
+				<CardHeader>
+					<CardTitle>Login</CardTitle>
+					<CardDescription>Login to your account</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Form {...form}>
+						<form
+							onSubmit={(e) => handleSubmit(e)}
+							className="space-y-4"
+						>
+							<FormField
+								control={form.control}
+								name="username"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Username</FormLabel>
+										<FormControl>
+											<Input {...field} />
+										</FormControl>
+										<FormMessage>
+											{userNotFound && "User doesn't exist."}
+										</FormMessage>
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="password"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Password</FormLabel>
+										<FormControl>
+											<Input type="password" {...field} />
+										</FormControl>
+										<FormMessage>
+											{wrongPassword && "Wrong password."}
+										</FormMessage>
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="remember"
+								render={({ field }) => (
+									<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md pt-2">
+										<FormControl>
+											<Checkbox
+												checked={field.value}
+												onCheckedChange={field.onChange}
+											/>
+										</FormControl>
+										<FormLabel className="cursor-pointer">
+											Remember Me
+										</FormLabel>
+									</FormItem>
+								)}
+							/>
 
-					<p className="text-base mt-2">
-						Doesn't has an account?{" "}
-						<Link to={"/register"}>Create here</Link>
-					</p>
-				</Form>
-			</div>
-		</div>
+							<Button
+								disabled={loading}
+								className="w-full"
+								type="submit"
+							>
+								{loading ? (
+									<>
+										<Loader2 className="animate-spin mr-2" />
+										Logging
+									</>
+								) : (
+									<>Login</>
+								)}
+							</Button>
+						</form>
+					</Form>
+					<CardDescription className="mt-2">
+						Doesn't has an account? Create one{" "}
+						<a className="underline text-blue-700" href="/register">
+							here
+						</a>
+					</CardDescription>
+				</CardContent>
+			</Card>
+		</CenterContainer>
 	);
 };
 
diff --git a/src/views/My/Collections/CreateCollection.tsx b/src/views/My/Collections/CreateCollection.tsx
new file mode 100644
index 0000000..6fa6b86
--- /dev/null
+++ b/src/views/My/Collections/CreateCollection.tsx
@@ -0,0 +1,98 @@
+import { ELEMENT_PARAGRAPH } from "@udecode/plate-paragraph";
+import { useNavigate } from "react-router-dom";
+import CreateCollectionForm, {
+	OnCollectionSavedCallback,
+} from "../../../components/Forms/CreateCollectionForm";
+import { toast } from "../../../components/shadcn/UseToast";
+import NavbarSidebarLayout from "../../../layout/NavbarSidebarLayout";
+import { CollectionService } from "../../../services/Collection.service";
+import { ProblemService } from "../../../services/Problem.service";
+import { transformCreateCollectionRequestForm2CreateCollectionRequestForm } from "../../../types/adapters/CreateCollectionRequestForm.adapter";
+import { CreateCollectionRequestForm } from "../../../types/forms/CreateCollectionRequestForm";
+
+const formInitialValue: CreateCollectionRequestForm = {
+	title: "",
+	description: [
+		{
+			id: "1",
+			type: ELEMENT_PARAGRAPH,
+			children: [{ text: "" }],
+		},
+	],
+	problemsInterface: [],
+	groupPermissions: [],
+	collection: null,
+};
+
+const CreateCollection = () => {
+	const accountId = String(localStorage.getItem("account_id"));
+	const navigate = useNavigate();
+
+	const handleSave = ({
+		createRequest,
+		setLoading,
+	}: OnCollectionSavedCallback) => {
+		if (!setLoading || !createRequest) {
+			return;
+		}
+
+		const { request, problemIds, problemGroupPermissions,groups } =
+			transformCreateCollectionRequestForm2CreateCollectionRequestForm(
+				createRequest as CreateCollectionRequestForm
+			);
+
+		setLoading(true);
+
+		CollectionService.create(accountId, request)
+			.then((response) => {
+				return CollectionService.updateProblem(
+					response.data.collection_id,
+					problemIds
+				);
+			})
+			.then((response) => {
+				return CollectionService.updateGroupPermissions(
+					response.data.collection_id,
+					accountId,
+					groups
+				);
+			})
+			.then((response) => {
+				let promise = [];
+				for (const problem of problemGroupPermissions) {
+					promise.push(
+						ProblemService.updateGroupPermissions(
+							problem.problem_id,
+							accountId,
+							problem.groupPermissions
+						)
+					);
+				}
+
+				return {
+					promise: Promise.all(promise),
+					collection_id: response.data.collection_id,
+				};
+			})
+			.then((response) => {
+				toast({
+					title: "Create Completed",
+				});
+				navigate(`/my/collections/${response.collection_id}/edit`);
+				setLoading(false);
+			});
+	};
+
+	return (
+		<NavbarSidebarLayout>
+			<CreateCollectionForm
+				onCollectionSave={({ createRequest, setLoading }) =>
+					handleSave({ createRequest, setLoading })
+				}
+				createRequestInitialValue={formInitialValue}
+			/>
+		</NavbarSidebarLayout>
+	);
+};
+
+export default CreateCollection;
diff --git a/src/views/My/Collections/EditCollection.tsx b/src/views/My/Collections/EditCollection.tsx
new file mode 100644
index 0000000..f921fa6
--- /dev/null
+++ b/src/views/My/Collections/EditCollection.tsx
@@ -0,0 +1,99 @@
+import React, { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import CreateCollectionForm, {
+	OnCollectionSavedCallback,
+} from "../../../components/Forms/CreateCollectionForm";
+import { toast } from "../../../components/shadcn/UseToast";
+import NavbarSidebarLayout from "../../../layout/NavbarSidebarLayout";
+import { CollectionService } from "../../../services/Collection.service";
+import { transformCollectionPopulateCollectionProblemsPopulateProblemAndCollectionGroupPermissionsPopulateGroupModel2CreateCollectionRequest } from "../../../types/adapters/Collection.adapter";
+import { transformCreateCollectionRequestForm2CreateCollectionRequestForm } from "../../../types/adapters/CreateCollectionRequestForm.adapter";
+import { CreateCollectionRequestForm } from "../../../types/forms/CreateCollectionRequestForm";
+import { ProblemService } from "../../../services/Problem.service";
+
+const EditCollection = () => {
+	const accountId = String(localStorage.getItem("account_id"));
+
+	const { collectionId } = useParams();
+	const editCollectionId = String(collectionId);
+
+	const [createRequest, setCreateRequest] =
+		React.useState<CreateCollectionRequestForm>();
+
+	const handleSave = ({
+		setLoading,
+		createRequest,
+	}: OnCollectionSavedCallback) => {
+		if (!setLoading || !createRequest) {
+			return;
+		}
+
+		const { request, problemIds, groups, problemGroupPermissions } =
+			transformCreateCollectionRequestForm2CreateCollectionRequestForm(
+				createRequest as CreateCollectionRequestForm
+			);
+
+		setLoading(true);
+
+		CollectionService.update(editCollectionId,accountId, request)
+			.then((response) => {
+				return CollectionService.updateProblem(
+					response.data.collection_id,
+					problemIds
+				);
+			})
+			.then((response) => {
+				return CollectionService.updateGroupPermissions(
+					response.data.collection_id,
+					accountId,
+					groups
+				);
+			})
+            .then(() => {
+				let promise = [];
+				for (const problem of problemGroupPermissions) {
+					promise.push(
+						ProblemService.updateGroupPermissions(
+							problem.problem_id,
+							accountId,
+							problem.groupPermissions
+						)
+					);
+				}
+
+				return Promise.all(promise);
+			})
+			.then(() => {
+				setLoading(false);
+				console.log("Save");
+				toast({
+					title: "Update Completed",
+				});
+			});
+	};
+
+	useEffect(() => {
+		CollectionService.get(editCollectionId, accountId).then((response) => {
+			setCreateRequest(
+				transformCollectionPopulateCollectionProblemsPopulateProblemAndCollectionGroupPermissionsPopulateGroupModel2CreateCollectionRequest(
+					response.data
+				)
+			);
+		});
+	}, [editCollectionId]);
+
+	return (
+		<NavbarSidebarLayout>
+			{createRequest && (
+				<CreateCollectionForm
+					onCollectionSave={({ setLoading, createRequest }) =>
+						handleSave({ setLoading, createRequest })
+					}
+					createRequestInitialValue={createRequest}
+				/>
+			)}
+		</NavbarSidebarLayout>
+	);
+};
+
+export default EditCollection;
diff --git a/src/views/My/Collections/MyCollections.tsx b/src/views/My/Collections/MyCollections.tsx
new file mode 100644
index 0000000..04ec72c
--- /dev/null
+++ b/src/views/My/Collections/MyCollections.tsx
@@ -0,0 +1,109 @@
+import { FolderPlus } from "lucide-react";
+import { useContext, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import CardContainer from "../../../components/CardContainer";
+import MyCollectionCard from "../../../components/Cards/CollectionCards/MyCollectionCard";
+import { Button } from "../../../components/shadcn/Button";
+import { Input } from "../../../components/shadcn/Input";
+import { Tabs, TabsList, TabsTrigger } from "../../../components/shadcn/Tabs";
+import { NavSidebarContext } from "../../../contexts/NavSidebarContext";
+import NavbarSidebarLayout from "../../../layout/NavbarSidebarLayout";
+import { CollectionService } from "../../../services/Collection.service";
+import {
+	CollectionPopulateCollectionProblemPopulateProblemModel
+} from "../../../types/models/Collection.model";
+
+const MyCollections = () => {
+	const navigate = useNavigate();
+	const accountId = String(localStorage.getItem("account_id"));
+
+	const [collections, setCollections] = useState<
+		CollectionPopulateCollectionProblemPopulateProblemModel[]
+	>([]);
+	const [manageableCollections, setManageableCollections] = useState<
+		CollectionPopulateCollectionProblemPopulateProblemModel[]
+	>([]);
+	const [filteredCollections, setFilteredCollections] = useState<
+		CollectionPopulateCollectionProblemPopulateProblemModel[]
+	>([]);
+	const [filteredManageableCollections, setFilteredManageableCollections] = useState<
+		CollectionPopulateCollectionProblemPopulateProblemModel[]
+	>([]);
+
+	const { setSection } = useContext(NavSidebarContext);
+
+	const [tabValue, setTabValue] = useState("personal");
+	const [searchValue, setSearchValue] = useState("")
+
+	useEffect(() => {
+		if (!searchValue || searchValue === "") {
+			setFilteredCollections(collections)
+			setFilteredManageableCollections(manageableCollections)
+		}
+		else {
+			setFilteredCollections(collections.filter((collection) => collection.name.toLowerCase().includes(searchValue.toLowerCase())))
+			setFilteredManageableCollections(manageableCollections.filter((collection) => collection.name.toLowerCase().includes(searchValue.toLowerCase())))
+		}
+	},[searchValue,collections,manageableCollections])
+
+	useEffect(() => {
+		setSection("COLLECTIONS");
+		CollectionService.getAllAsCreator(accountId).then((response) => {
+			setCollections(response.data.collections);
+			setManageableCollections(response.data.manageable_collections);
+		});
+	}, []);
+
+	return (
+		<NavbarSidebarLayout>
+			<div className="w-[96%] mx-auto mt-10">
+				<div className="flex justify-between gap">
+					<div>
+						<h1 className="text-3xl font-bold tracking-tight">
+							My Collections
+						</h1>
+					</div>
+					<div className="w-7/12 md:w-5/12">
+						<Input value={searchValue} onChange={(e) => setSearchValue(e.target.value)} placeholder="Search ..." />
+					</div>
+					<div>
+						<Tabs
+							value={tabValue}
+							onValueChange={(e) => setTabValue(e)}
+						>
+							<TabsList>
+								<TabsTrigger value="personal">
+									Personal
+								</TabsTrigger>
+								<TabsTrigger value="manageable">
+									Manageable
+								</TabsTrigger>
+							</TabsList>
+						</Tabs>
+					</div>
+					<div>
+						<Button
+							onClick={() => navigate("/my/collections/create")}
+						>
+							<FolderPlus size={20} className="mr-2" />
+							Create Collection
+						</Button>
+					</div>
+				</div>
+
+				<CardContainer>
+					{tabValue === "personal" &&
+						filteredCollections.map((collection) => (
+							<MyCollectionCard collection={collection} />
+						))}
+					{tabValue === "manageable" &&
+						filteredManageableCollections.map((collection) => (
+							<MyCollectionCard collection={collection} />
+						))}
+				</CardContainer>
+			</div>
+		</NavbarSidebarLayout>
+	);
+};
+
+export default MyCollections;
diff --git a/src/views/My/Courses/CreateCourse.tsx b/src/views/My/Courses/CreateCourse.tsx
new file mode 100644
index 0000000..2d0aabc
--- /dev/null
+++ b/src/views/My/Courses/CreateCourse.tsx
@@ -0,0 +1,103 @@
+import { useNavigate } from "react-router-dom";
+import CreateCourseForm, {
+	OnCourseSavedCallback,
+} from "../../../components/Forms/CreateCourseForm";
+import { toast } from "../../../components/shadcn/UseToast";
+import { EmptyEditorValue } from "../../../constants/DummyEditorValue";
+import NavbarSidebarLayout from "../../../layout/NavbarSidebarLayout";
+import { CollectionService } from "../../../services/Collection.service";
+import { TopicService } from "../../../services/Topic.service";
+import { transformCreateCourseRequestForm2CreateTopicRequest } from "../../../types/adapters/CreateCourseRequestForm.adapter";
+import { CreateCourseRequestForm } from "../../../types/forms/CreateCourseRequestForm";
+
+const formInitialValue: CreateCourseRequestForm = {
+	title: "",
+	description: EmptyEditorValue,
+	image: null,
+	isPrivate: false,
+	collectionsInterface: [],
+	groupPermissions: [],
+	course: null,
+	// collectionGroupPermissions: [],
+};
+
+const CreateCourse = () => {
+	const navigate = useNavigate();
+	const accountId = String(localStorage.getItem("account_id"));
+
+	const handleSave = ({
+		setLoading,
+		createRequest,
+	}: OnCourseSavedCallback) => {
+		if (!setLoading || !createRequest) {
+			return;
+		}
+
+		const { formData, collectionIds, groups, collectionGroupsPermissions } =
+			transformCreateCourseRequestForm2CreateTopicRequest(createRequest);
+
+		setLoading(true);
+		TopicService.create(accountId, formData)
+			.then((response) => {
+				return TopicService.updateCollections(
+					response.data.topic_id,
+					collectionIds
+				);
+			})
+			.then((response) => {
+				return TopicService.updateGroupPermissions(
+					response.data.topic_id,
+					accountId,
+					groups
+				);
+			})
+			.then((response) => {
+				let promise = [];
+				for (const collection of collectionGroupsPermissions) {
+					promise.push(
+						CollectionService.updateGroupPermissions(
+							collection.collection_id,
+							accountId,
+							collection.groupPermissions
+						)
+					);
+				}
+
+				return {
+					promise: Promise.all(promise),
+					topic_id: response.data.topic_id,
+				};
+			})
+			.then(({ topic_id }) => {
+				setLoading(false);
+				toast({
+					title: "Create Completed",
+				});
+				navigate(`/my/courses/${topic_id}/edit`);
+			});
+	};
+
+	return (
+		<NavbarSidebarLayout>
+			<CreateCourseForm
+				// onCollectionSave={({ createRequest,collectionId,setCollectionId,setLoading }) =>
+				// 	handleSave({ createRequest,collectionId,setCollectionId,setLoading })
+				// }
+				onCourseSave={({
+					createRequest,
+
+					setLoading,
+				}) =>
+					handleSave({
+						createRequest,
+
+						setLoading,
+					})
+				}
+				createRequestInitialValue={formInitialValue}
+			/>
+		</NavbarSidebarLayout>
+	);
+};
+
+export default CreateCourse;
diff --git a/src/views/My/Courses/EditCourse.tsx b/src/views/My/Courses/EditCourse.tsx
new file mode 100644
index 0000000..ea8e0de
--- /dev/null
+++ b/src/views/My/Courses/EditCourse.tsx
@@ -0,0 +1,108 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import CreateCourseForm, {
+	OnCourseSavedCallback,
+} from "../../../components/Forms/CreateCourseForm";
+import { toast } from "../../../components/shadcn/UseToast";
+import NavbarSidebarLayout from "../../../layout/NavbarSidebarLayout";
+import { TopicService } from "../../../services/Topic.service";
+import { transformCreateCourseRequestForm2CreateTopicRequest } from "../../../types/adapters/CreateCourseRequestForm.adapter";
+import { transformTopicPopulateTopicCollectionPopulateCollectionAndTopicGroupPermissionPopulateGroupModel2CreateCourseRequest } from "../../../types/adapters/Topic.adapter";
+import { CreateCourseRequestForm } from "../../../types/forms/CreateCourseRequestForm";
+import { CollectionService } from "../../../services/Collection.service";
+
+const EditCourse = () => {
+	const { courseId } = useParams();
+	const editCourseId = String(courseId);
+	const accountId = String(localStorage.getItem("account_id"));
+
+	const [createRequest, setCreateRequest] =
+		useState<CreateCourseRequestForm>();
+
+	const handleSave = ({
+		setLoading,
+		createRequest,
+	}: OnCourseSavedCallback) => {
+		if (!setLoading || !createRequest || !courseId) {
+			return;
+		}
+
+		const { formData, collectionIds, groups, collectionGroupsPermissions } =
+			transformCreateCourseRequestForm2CreateTopicRequest(createRequest);
+
+		console.log(formData.get("name"));
+
+		setLoading(true);
+		TopicService.update(editCourseId, accountId, formData)
+			.then(() => {
+				return TopicService.updateCollections(
+					editCourseId,
+					collectionIds
+				);
+			})
+			.then(() => {
+				return TopicService.updateGroupPermissions(
+					editCourseId,
+					accountId,
+					groups
+				);
+			})
+			.then(() => {
+				let promise = [];
+				for (const collection of collectionGroupsPermissions) {
+					promise.push(
+						CollectionService.updateGroupPermissions(
+							collection.collection_id,
+							accountId,
+							collection.groupPermissions
+						)
+					);
+				}
+
+				return Promise.all(promise);
+			})
+			.then(() => {
+				setLoading(false);
+				toast({
+					title: "Update Completed",
+				});
+			});
+	};
+
+	useEffect(() => {
+		TopicService.get(accountId, editCourseId).then((response) => {
+			const { data } = response;
+			console.log(data);
+			setCreateRequest(
+				transformTopicPopulateTopicCollectionPopulateCollectionAndTopicGroupPermissionPopulateGroupModel2CreateCourseRequest(
+					data
+				)
+			);
+		});
+	}, [editCourseId]);
+
+	return (
+		<NavbarSidebarLayout>
+			{createRequest && (
+				<CreateCourseForm
+					onCourseSave={({
+						createRequest,
+
+						setLoading,
+					}) =>
+						handleSave({
+							createRequest,
+
+							setLoading,
+						})
+					}
+					createRequestInitialValue={
+						createRequest as CreateCourseRequestForm
+					}
+				/>
+			)}
+		</NavbarSidebarLayout>
+	);
+};
+
+export default EditCourse;
diff --git a/src/views/My/Courses/MyCourses.tsx b/src/views/My/Courses/MyCourses.tsx
new file mode 100644
index 0000000..cbe5671
--- /dev/null
+++ b/src/views/My/Courses/MyCourses.tsx
@@ -0,0 +1,100 @@
+import { LibraryBig } from "lucide-react";
+import { useContext, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import CardContainer from "../../../components/CardContainer";
+import MyCourseCard from "../../../components/Cards/CourseCards/MyCourseCard";
+import { Button } from "../../../components/shadcn/Button";
+import { Input } from "../../../components/shadcn/Input";
+import { Tabs, TabsList, TabsTrigger } from "../../../components/shadcn/Tabs";
+import { NavSidebarContext } from "../../../contexts/NavSidebarContext";
+import NavbarSidebarLayout from "../../../layout/NavbarSidebarLayout";
+import { TopicService } from "../../../services/Topic.service";
+import { TopicPopulateTopicCollectionPopulateCollectionModel } from "../../../types/models/Topic.model";
+
+const MyCourses = () => {
+
+    const navigate = useNavigate();
+	const accountId = String(localStorage.getItem("account_id"));
+    const {setSection} = useContext(NavSidebarContext)
+
+	const [topics, setTopics] = useState<TopicPopulateTopicCollectionPopulateCollectionModel[]>([])
+	const [manageableTopics, setManageableTopics] = useState<TopicPopulateTopicCollectionPopulateCollectionModel[]>([])
+	
+	const [filteredTopics, setFilteredTopics] = useState<TopicPopulateTopicCollectionPopulateCollectionModel[]>([])
+	const [filteredManageableTopics, setFilteredManageableTopics] = useState<TopicPopulateTopicCollectionPopulateCollectionModel[]>([])
+
+	const [tabValue, setTabValue] = useState("personal")
+	const [searchValue, setSearchValue] = useState("")
+
+	useEffect(() => {
+		if (!searchValue || searchValue === "") {
+			setFilteredTopics(topics)
+			setFilteredManageableTopics(manageableTopics)
+		}
+		else {
+			setFilteredTopics(topics.filter((topic) => topic.name.toLowerCase().includes(searchValue.toLowerCase())))
+			setFilteredManageableTopics(manageableTopics.filter((topic) => topic.name.toLowerCase().includes(searchValue.toLowerCase())))
+		}
+	},[searchValue,topics,manageableTopics])
+	
+
+    useEffect(( )=> {
+        setSection("COURSES")
+		TopicService.getAllAsCreator(accountId).then((response) => {
+			setTopics(response.data.topics)
+			setManageableTopics(response.data.manageable_topics)
+		})
+    },[])
+
+	return (
+		<NavbarSidebarLayout>
+			<div className="w-[96%] mx-auto mt-10">
+				<div className="flex justify-between gap">
+					<div>
+						<h1 className="text-3xl font-bold tracking-tight">
+							My Courses
+						</h1>
+					</div>
+					<div className="xl:w-7/12 w-5/12">
+						<Input value={searchValue} onChange={(e) => setSearchValue(e.target.value)} placeholder="Search ..." />
+					</div>
+					<div>
+						<Tabs value={tabValue} onValueChange={(e) => setTabValue(e)}>
+							<TabsList>
+								<TabsTrigger value="personal">
+									Personal
+								</TabsTrigger>
+								<TabsTrigger value="manageable">
+									Manageable
+								</TabsTrigger>
+							</TabsList>
+						</Tabs>
+					</div>
+					<div>
+						<Button
+							onClick={() => navigate("/my/courses/create")}
+						>
+							<LibraryBig size={20} className="mr-2" />
+							Create Course
+						</Button>
+					</div>
+				</div>
+
+				<CardContainer>
+					{
+						tabValue === "personal" && filteredTopics.map(topic => (
+							<MyCourseCard course={topic}/>
+						))
+					}
+					{
+						tabValue === "manageable" && filteredManageableTopics.map(topic => (
+							<MyCourseCard course={topic}/>
+						))
+					}
+				</CardContainer>
+			</div>
+		</NavbarSidebarLayout>
+	);
+};
+
+export default MyCourses;
diff --git a/src/views/My/Groups/CreateGroup.tsx b/src/views/My/Groups/CreateGroup.tsx
new file mode 100644
index 0000000..fc69522
--- /dev/null
+++ b/src/views/My/Groups/CreateGroup.tsx
@@ -0,0 +1,63 @@
+import { useNavigate } from "react-router-dom";
+import CreateGroupForm, {
+	OnGroupSavedCallback,
+} from "../../../components/Forms/CreateGroupForm";
+import NavbarSidebarLayout from "../../../layout/NavbarSidebarLayout";
+import { GroupService } from "../../../services/Group.service";
+import { transformCreateGroupRequestForm2CreateGroupRequest } from "../../../types/adapters/CreateGroupRequestForm.adapter";
+import { CreateGroupRequestForm } from "../../../types/forms/CreateGroupRequestForm";
+
+const formInitialValue: CreateGroupRequestForm = {
+	name: "",
+	description: "",
+	color: "#f87171",
+	membersInterface: [],
+	manageCourses: false,
+	viewCourseLogs: false,
+	viewCourses: false,
+	manageCollections: false,
+	viewCollections: false,
+	manageProblems: false,
+	viewProblems: false
+};
+
+const CreateGroup = () => {
+	const navigate = useNavigate();
+	const accountId = String(localStorage.getItem("account_id"));
+
+	const handleSave = ({
+		createRequest,
+		setLoading,
+	}: OnGroupSavedCallback) => {
+		const request =
+			transformCreateGroupRequestForm2CreateGroupRequest(createRequest);
+		const memberIds = createRequest.membersInterface.map(
+			(item) => item.id as string
+		);
+
+		setLoading(true);
+		console.log(createRequest,request)
+		GroupService.create(accountId, request)
+			.then((response) => {
+				return GroupService.updateMembers(
+					response.data.group_id,
+					memberIds
+				);
+			})
+			.then((response) => {
+				setLoading(false);
+				navigate(`/my/groups/${response.data.group_id}/edit`);
+			});
+	};
+
+	return (
+		<NavbarSidebarLayout>
+			<CreateGroupForm
+				onCourseSave={(e) => handleSave(e)}
+				createRequestInitialValue={formInitialValue}
+			/>
+		</NavbarSidebarLayout>
+	);
+};
+
+export default CreateGroup;
diff --git a/src/views/My/Groups/EditGroup.tsx b/src/views/My/Groups/EditGroup.tsx
new file mode 100644
index 0000000..9ecb201
--- /dev/null
+++ b/src/views/My/Groups/EditGroup.tsx
@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import CreateGroupForm, { OnGroupSavedCallback } from "../../../components/Forms/CreateGroupForm";
+import NavbarSidebarLayout from "../../../layout/NavbarSidebarLayout";
+import { GroupService } from "../../../services/Group.service";
+import { transformCreateGroupRequestForm2CreateGroupRequest } from "../../../types/adapters/CreateGroupRequestForm.adapter";
+import { transformGroupPopulateGroupMemberPopulateAccountSecureModel2CreateGroupRequestForm } from "../../../types/adapters/Group.adapter";
+import { CreateGroupRequestForm } from "../../../types/forms/CreateGroupRequestForm";
+import { GroupPopulateGroupMemberPopulateAccountSecureModel } from "../../../types/models/Group.model";
+
+const EditGroup = () => {
+	const { groupId } = useParams();
+
+	const [createRequest, setCreateRequest] =
+		useState<CreateGroupRequestForm>();
+
+	useEffect(() => {
+		GroupService.get(String(groupId), {
+			populate_members: true,
+		}).then((response) => {
+			const data =
+				response.data as GroupPopulateGroupMemberPopulateAccountSecureModel;
+			setCreateRequest(transformGroupPopulateGroupMemberPopulateAccountSecureModel2CreateGroupRequestForm(data));
+			console.log(data)
+		});
+	}, [groupId]);
+
+	const handleSave = ({setLoading,createRequest}:OnGroupSavedCallback) => {
+		const request = transformCreateGroupRequestForm2CreateGroupRequest(createRequest)
+		const memberIds = createRequest.membersInterface.map((item) => item.id as string)
+		
+		setLoading(true)
+		console.log("EditGroup",request)
+		GroupService.update(String(groupId),request).then((response) => {
+			return GroupService.updateMembers(response.data.group_id,memberIds)
+		}).then(() => {
+			setLoading(false)
+		})
+	}
+
+	return (
+		<NavbarSidebarLayout>
+			{createRequest && (
+				<CreateGroupForm
+					onCourseSave={(e) => handleSave(e)}
+					createRequestInitialValue={createRequest}
+				/>
+			)}
+		</NavbarSidebarLayout>
+	);
+};
+
+export default EditGroup;
diff --git a/src/views/My/Groups/MyGroups.tsx b/src/views/My/Groups/MyGroups.tsx
new file mode 100644
index 0000000..cbd2840
--- /dev/null
+++ b/src/views/My/Groups/MyGroups.tsx
@@ -0,0 +1,75 @@
+import { LibraryBig } from "lucide-react";
+import { useContext, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import CardContainer from "../../../components/CardContainer";
+import MyGroupCard from "../../../components/Cards/MyGroupCard";
+import { Button } from "../../../components/shadcn/Button";
+import { Input } from "../../../components/shadcn/Input";
+import { NavSidebarContext } from "../../../contexts/NavSidebarContext";
+import NavbarSidebarLayout from "../../../layout/NavbarSidebarLayout";
+import { GroupService } from "../../../services/Group.service";
+import { GroupPopulateGroupMemberPopulateAccountSecureModel } from "../../../types/models/Group.model";
+
+const MyGroups = () => {
+
+    const navigate = useNavigate();
+	const accountId = String(localStorage.getItem("account_id"));
+    const {setSection} = useContext(NavSidebarContext)
+
+	const [groups, setGroups] = useState<GroupPopulateGroupMemberPopulateAccountSecureModel[]>([])
+	const [filteredGroups, setFilteredGroups] = useState<GroupPopulateGroupMemberPopulateAccountSecureModel[]>([])
+	const [searchValue, setSearchValue] = useState("")
+
+	useEffect(() => {
+		if (!searchValue || searchValue === "") {
+			setFilteredGroups(groups)
+		}
+		else {
+			setFilteredGroups(groups.filter((group) => group.name.toLowerCase().includes(searchValue.toLowerCase())))
+		}
+	},[searchValue,groups])
+
+    useEffect(( )=> {
+        setSection("GROUPS")
+		GroupService.getAllAsCreator(accountId,{
+			populate_members: true,
+		}).then((response) => {
+			setGroups(response.data.groups as GroupPopulateGroupMemberPopulateAccountSecureModel[]);
+		})
+    },[])
+
+	return (
+		<NavbarSidebarLayout>
+			<div className="w-[96%] mx-auto mt-10">
+				<div className="flex justify-between gap">
+					<div>
+						<h1 className="text-3xl font-bold tracking-tight">
+							My Groups
+						</h1>
+					</div>
+					<div className="xl:w-9/12 w-7/12">
+						<Input placeholder="Search ..." value={searchValue} onChange={(e) => setSearchValue(e.target.value)}/>
+					</div>
+					<div>
+						<Button
+							onClick={() => navigate("/my/groups/create")}
+						>
+							<LibraryBig size={20} className="mr-2" />
+							Create Groups
+						</Button>
+					</div>
+				</div>
+
+				<CardContainer>
+					{
+						filteredGroups.map((group) => (
+							<MyGroupCard group={group}/>
+						))
+					}
+				</CardContainer>
+			</div>
+		</NavbarSidebarLayout>
+	);
+};
+
+export default MyGroups;
diff --git a/src/views/My/Problems/CreateProblem.tsx b/src/views/My/Problems/CreateProblem.tsx
new file mode 100644
index 0000000..b47da0f
--- /dev/null
+++ b/src/views/My/Problems/CreateProblem.tsx
@@ -0,0 +1,65 @@
+import { ELEMENT_PARAGRAPH } from "@udecode/plate-paragraph";
+import { useNavigate } from "react-router-dom";
+import CreateProblemForm, { OnProblemSaveCallback } from "../../../components/Forms/CreateProblemForm";
+import { toast } from "../../../components/shadcn/UseToast";
+import NavbarSidebarLayout from "../../../layout/NavbarSidebarLayout";
+import { ProblemService } from "../../../services/Problem.service";
+import { transformCreateProblemRequestForm2CreateProblemRequest } from "../../../types/adapters/CreateProblemRequestForm.adapter";
+import { CreateProblemRequestForm } from "../../../types/forms/CreateProblemRequestForm";
+
+const formInitialValue: CreateProblemRequestForm = {
+	title: "",
+	description: [
+		{
+			id: "1",
+			type: ELEMENT_PARAGRAPH,
+			children: [{ text: "" }],
+		},
+	],
+	language: "python",
+	solution: "",
+	testcases: "",
+	testcase_delimeter: ":::",
+	time_limit: 1.5,
+	groupPermissions: [],
+	allowedLanguage: [],
+};
+
+const CreateProblem = () => {
+
+	const accountId = String(localStorage.getItem("account_id"));
+	const navigate = useNavigate();
+
+
+	const handleSave:OnProblemSaveCallback = (setLoading, createRequest) => {
+		setLoading(true);
+
+		const {request,groups} = transformCreateProblemRequestForm2CreateProblemRequest(createRequest)
+		
+		ProblemService.create(
+			accountId,
+			request
+		).then((response) => {
+			return ProblemService.updateGroupPermissions(response.data.problem_id,accountId,groups)
+		}).then((response) => {
+			setLoading(false);
+			toast({
+				title: "Create Completed",
+			});
+			navigate(`/my/problems/${response.data.problem_id}/edit`);
+		});
+	};
+
+	return (
+		<NavbarSidebarLayout>
+			<CreateProblemForm
+				createRequestInitialValue={formInitialValue}
+				onProblemSave={(setLoading, createRequest) =>
+					handleSave(setLoading, createRequest)
+				}
+			/>
+		</NavbarSidebarLayout>
+	);
+};
+
+export default CreateProblem;
diff --git a/src/views/My/Problems/EditProblem.tsx b/src/views/My/Problems/EditProblem.tsx
new file mode 100644
index 0000000..df5def0
--- /dev/null
+++ b/src/views/My/Problems/EditProblem.tsx
@@ -0,0 +1,74 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import CreateProblemForm, {
+	OnProblemSaveCallback,
+} from "../../../components/Forms/CreateProblemForm";
+import { toast } from "../../../components/shadcn/UseToast";
+import NavbarSidebarLayout from "../../../layout/NavbarSidebarLayout";
+import { ProblemService } from "../../../services/Problem.service";
+import { transformCreateProblemRequestForm2CreateProblemRequest } from "../../../types/adapters/CreateProblemRequestForm.adapter";
+import { transformProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel2CreateProblemRequestForm } from "../../../types/adapters/Problem.adapter";
+import { CreateProblemRequestForm } from "../../../types/forms/CreateProblemRequestForm";
+import { ProblemPoplulateCreatorModel } from "../../../types/models/Problem.model";
+
+const EditProblem = () => {
+	
+	const accountId = String(localStorage.getItem("account_id"));
+
+	const { problemId } = useParams();
+	const editProblemId = String(problemId);
+
+	const [problem,setProblem] = useState<ProblemPoplulateCreatorModel>();
+
+	const [createRequest, setCreateRequest] = useState<CreateProblemRequestForm>();
+
+	const handleSave: OnProblemSaveCallback = (
+		setLoading,
+		createRequest
+	) => {
+		setLoading(true);
+
+		const { request,groups } = transformCreateProblemRequestForm2CreateProblemRequest(createRequest)
+
+		ProblemService.update(
+			String(editProblemId),
+			request
+		).then((response) => {
+			return ProblemService.updateGroupPermissions(response.data.problem_id,accountId,groups)
+		}).then((response) => {
+			console.log("Update Completed", response.data);
+			setLoading(false);
+			toast({
+				title: "Problem Updated",
+			});
+		});
+	};
+
+	useEffect(() => {
+		ProblemService.get(accountId,editProblemId).then((response) => {
+			setProblem(response.data)
+			setCreateRequest(transformProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel2CreateProblemRequestForm(response.data));
+		});
+	}, []);
+	return (
+		<NavbarSidebarLayout>
+			{createRequest && <CreateProblemForm
+				createRequestInitialValue={createRequest}
+				validatedTestcases={problem?.testcases}
+				onProblemSave={(
+					setLoading,
+				
+					createRequest
+				) =>
+					handleSave(
+						setLoading,
+						
+						createRequest
+					)
+				}
+			/>}
+		</NavbarSidebarLayout>
+	);
+};
+
+export default EditProblem;
diff --git a/src/views/My/Problems/MyProblems.tsx b/src/views/My/Problems/MyProblems.tsx
new file mode 100644
index 0000000..31ae15a
--- /dev/null
+++ b/src/views/My/Problems/MyProblems.tsx
@@ -0,0 +1,93 @@
+import { FilePlus } from "lucide-react";
+import { useContext, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import CardContainer from "../../../components/CardContainer";
+import MyProblemCard from "../../../components/Cards/ProblemCards/MyProblemCard";
+import { Button } from "../../../components/shadcn/Button";
+import { Input } from "../../../components/shadcn/Input";
+import { Tabs, TabsList, TabsTrigger } from "../../../components/shadcn/Tabs";
+import { NavSidebarContext } from "../../../contexts/NavSidebarContext";
+import NavbarSidebarLayout from "../../../layout/NavbarSidebarLayout";
+import { ProblemService } from "../../../services/Problem.service";
+import { ProblemPopulateTestcases } from "../../../types/models/Problem.model";
+
+const MyProblems = () => {
+	const accountId = String(localStorage.getItem("account_id"));
+	const navigate = useNavigate();
+
+	const [problems, setProblems] = useState<ProblemPopulateTestcases[]>([]);
+	const [manageableProblems, setManageableProblems] = useState<ProblemPopulateTestcases[]>([]);
+	const [filteredProblems, setFilteredProblems] = useState<ProblemPopulateTestcases[]>([]);
+	const [filteredManageableProblems, setFilteredManageableProblems] = useState<ProblemPopulateTestcases[]>([]);
+	
+	const {setSection} = useContext(NavSidebarContext)
+
+	const [tabValue, setTabValue] = useState("personal")
+	const [searchValue, setSearchValue] = useState("")
+
+	useEffect(() => {
+		if (!searchValue || searchValue === "") {
+			setFilteredProblems(problems)
+			setFilteredManageableProblems(manageableProblems)
+		}
+		else {
+			setFilteredProblems(problems.filter((problem) => problem.title.toLowerCase().includes(searchValue.toLowerCase())))
+			setFilteredManageableProblems(manageableProblems.filter((problem) => problem.title.toLowerCase().includes(searchValue.toLowerCase())))
+		}
+	},[searchValue,problems,manageableProblems])
+
+	useEffect(() => {
+		ProblemService.getAllAsCreator(accountId).then((response) => {
+			setProblems(response.data.problems);
+			setManageableProblems(response.data.manageable_problems)
+		});
+
+		setSection("PROBLEMS")
+	}, [accountId]);
+
+	return (
+		<NavbarSidebarLayout>
+			<div className="w-[96%] mx-auto mt-10">
+				<div className="flex justify-between gap">
+					<div>
+						<h1 className="text-3xl font-bold tracking-tight">
+							My Problems
+						</h1>
+					</div>
+					<div className="w-7/12 md:w-5/12">
+						<Input value={searchValue} onChange={(e) => setSearchValue(e.target.value)} placeholder="Search ..." />
+					</div>
+					<div>
+						<Tabs value={tabValue} onValueChange={(e) => setTabValue(e)}>
+							<TabsList>
+								<TabsTrigger value="personal">
+									Personal
+								</TabsTrigger>
+								<TabsTrigger value="manageable">
+									Manageable
+								</TabsTrigger>
+							</TabsList>
+						</Tabs>
+					</div>
+					<div>
+						<Button onClick={() => navigate("/my/problems/create")}>
+							<FilePlus size={20} className="mr-2" />
+							Create Problem
+						</Button>
+					</div>
+				</div>
+
+				<CardContainer>
+					{tabValue === "personal" && filteredProblems.map((problem, index) => (
+						<MyProblemCard problem={problem} key={index} />
+					))}
+					{tabValue === "manageable" && filteredManageableProblems.map((problem, index) => (
+						<MyProblemCard problem={problem} key={index} />
+					))}
+				</CardContainer>
+			</div>
+		</NavbarSidebarLayout>
+	);
+};
+
+export default MyProblems;
diff --git a/src/views/Register.tsx b/src/views/Register.tsx
index 84e1963..2bb60c7 100644
--- a/src/views/Register.tsx
+++ b/src/views/Register.tsx
@@ -1,120 +1,237 @@
-import { faUserPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React, { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { Button, Form, FormGroup, Input, Label } from "reactstrap";
-// import { emitError, emitSuccess } from "../modules/swal.module";
-// import { register } from "../services/account.service";
+import { Loader2 } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
+import { Button } from "../components/shadcn/Button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "../components/shadcn/Card";
+import { Checkbox } from "../components/shadcn/Checkbox";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "../components/shadcn/Form";
+import { Input } from "../components/shadcn/Input";
+import { ErrorResponseTypes } from "../constants/ErrorResponseTypes";
+import CenterContainer from "../layout/CenterLayout";
+import { AccountService } from "../services/Account.service";
+
+type RegisterForm = {
+	username: string;
+	email: string;
+	password: string;
+	confirmation_password: string;
+	agreed_to_tac: boolean;
+};
 
 const Register = () => {
 	const nevigate = useNavigate();
-	const [regisBody, setregisBody] = useState({
-		username: "",
-		email: "",
-		password: "",
-	});
-	const [confirmPassword, setconfirmPassword] = useState("");
-	const [loading, setloading] = useState(false);
-
-	const handleSubmit = (e) => {
+	const form = useForm();
+
+	const [loading, setLoading] = useState(false);
+
+	const [invalidPasswordLength, setInvalidPasswordLength] = useState(false);
+	const [invalidConfirmationPassword, setInvalidConfirmationPassword] = useState(false);
+	const [invalidAgreedToTAC, setInvalidAgreedToTAC] = useState(false);
+	const [invalidUsername, setInvalidUsername] = useState(false);
+	const [invalidEmail, setInvalidEmail] = useState(false);
+
+	const validatedForm = (formData: RegisterForm): Boolean => {
+		// Password longer than 8 characters
+		const PASSWORD_LONGER_THAN_8_CHARACTERS = formData.password.length >= 8
+		setInvalidPasswordLength(!PASSWORD_LONGER_THAN_8_CHARACTERS)
+		// Confirmation same as password
+		const CONFIRMATION_SAME_AS_PASSWORD = formData.password === formData.confirmation_password
+		setInvalidConfirmationPassword(!CONFIRMATION_SAME_AS_PASSWORD)
+		// Agreed to TOS
+		const AGREED_TO_TAC = formData.agreed_to_tac
+		setInvalidAgreedToTAC(!AGREED_TO_TAC)
+
+		return PASSWORD_LONGER_THAN_8_CHARACTERS && CONFIRMATION_SAME_AS_PASSWORD && AGREED_TO_TAC
+	}
+
+	const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
 		e.preventDefault();
-		if (regisBody.password.length < 8) {
-			emitError("The password length must be greater than or equal to 8");
-		} else if (regisBody.password !== confirmPassword) {
-			emitError("Password and Confirmation Password doesn't match");
-		} else {
-			setloading(true);
-			register(regisBody).then((response) => {
-				emitSuccess("Your account has been created!");
-				setloading(false);
-				nevigate("/login");
-			});
+
+		setLoading(true)
+
+		setInvalidPasswordLength(false)
+		setInvalidConfirmationPassword(false)
+		setInvalidAgreedToTAC(false)
+		setInvalidUsername(false)
+		setInvalidEmail(false)
+
+		const data = form.getValues() as RegisterForm
+		if (validatedForm(data)) {
+			AccountService.create({
+				username: data.username,
+				email: data.email,
+				password: data.password,
+			}).then(() => {
+				nevigate("/login")
+				setLoading(false)
+			}).catch(error => {
+				const errorType = error.response.data.message
+				if (errorType === ErrorResponseTypes.DUPLICATED_USERNAME) {
+					console.log("Username already exists")
+					setInvalidUsername(true)
+				}
+				else if (errorType === ErrorResponseTypes.DUPLICATED_EMAIL) {
+					console.log("Email already exists")
+					setInvalidEmail(true)
+				}
+				setLoading(false)
+			})
+		}
+		else {
+			setLoading(false)
 		}
 	};
 
 	return (
-		<div className="flex h-screen">
-			<div className="m-auto w-1/2 pt-10">
-				<h1>Account Register</h1>
-				<Form onSubmit={(e) => handleSubmit(e)}>
-					<FormGroup>
-						<Label for="username">Username</Label>
-						<Input
-							onChange={(e) =>
-								setregisBody({
-									...regisBody,
-									username: e.target.value,
-								})
-							}
-							value={regisBody.username}
-							id="username"
-							name="username"
-							type="text"
-							required={true}
-						/>
-					</FormGroup>
-					<FormGroup>
-						<Label for="email">Email</Label>
-						<Input
-							onChange={(e) =>
-								setregisBody({
-									...regisBody,
-									email: e.target.value,
-								})
-							}
-							value={regisBody.email}
-							id="email"
-							name="email"
-							type="email"
-							required={true}
-						/>
-					</FormGroup>
-					<FormGroup>
-						<Label for="password">Password</Label>
-						<Input
-							onChange={(e) =>
-								setregisBody({
-									...regisBody,
-									password: e.target.value,
-								})
-							}
-							value={regisBody.password}
-							id="password"
-							name="password"
-							type="password"
-							required={true}
-						/>
-					</FormGroup>
-					<FormGroup>
-						<Label for="confirmation_password">
-							Confirmation Password
-						</Label>
-						<Input
-							onChange={(e) => setconfirmPassword(e.target.value)}
-							value={confirmPassword}
-							id="confirmation_password"
-							name="confirmation_password"
-							type="password"
-							required={true}
-						/>
-					</FormGroup>
-					<Button
-						className="px-10"
-						type="submit"
-						color="tertiary"
-						size="lg"
-						disabled={loading}
-					>
-						<FontAwesomeIcon className="mr-2" icon={faUserPlus} />
-						Register
-					</Button>
-
-					<p className="text-base mt-2">
-						Already had an account? <Link to={"/login"}>Login</Link>
-					</p>
-				</Form>
-			</div>
-		</div>
+		<CenterContainer className="w-[700px]">
+			<Card>
+				<CardHeader>
+					<CardTitle>Registration</CardTitle>
+					<CardDescription>Create new account</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Form {...form}>
+						<form
+							onSubmit={(e) => handleSubmit(e)}
+							className="space-y-4"
+						>
+							<FormField
+								control={form.control}
+								name="username"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Username</FormLabel>
+										<FormControl>
+											<Input required {...field} />
+										</FormControl>
+										{
+											invalidUsername &&
+											<FormMessage>
+												Username already exists.
+											</FormMessage>
+										}
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="email"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Email</FormLabel>
+										<FormControl>
+											<Input required type="email" {...field} />
+										</FormControl>
+										{
+											invalidEmail &&
+											<FormMessage>
+												Email already exists.
+											</FormMessage>
+										}
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="password"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Password</FormLabel>
+										<FormControl>
+											<Input required type="password" {...field} />
+										</FormControl>
+										{
+											invalidPasswordLength &&
+											<FormMessage>
+												Password must be longer than 8 characters.
+											</FormMessage>
+										}
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="confirmation_password"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>
+											Confirmation Password
+										</FormLabel>
+										<FormControl>
+											<Input required type="password" {...field} />
+										</FormControl>
+										{
+											invalidConfirmationPassword &&
+											<FormMessage>
+												Confirmation password must be the same as password.
+											</FormMessage>
+										}
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="agreed_to_tac"
+								render={({ field }) => (
+									<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md pt-2">
+										<FormControl>
+											<Checkbox
+												checked={field.value}
+												onCheckedChange={field.onChange}
+											/>
+										</FormControl>
+										<FormLabel>
+											I have read and agreed with{" "}
+											<a className="underline" href="#">
+												Terms & Conditions
+											</a>
+										</FormLabel>
+										{
+											invalidAgreedToTAC &&
+											<FormMessage>
+												You must agree to Terms & Conditions.
+											</FormMessage>
+										}
+									</FormItem>
+								)}
+							/>
+
+							<Button className="w-full" type="submit">
+							{loading ? (
+								<>
+									<Loader2 className="animate-spin mr-2" />
+									Registering
+								</>
+							) : (
+								<>Register</>
+							)}
+							</Button>
+						</form>
+					</Form>
+
+					<CardDescription className="mt-2">Already have an account? Login <a className="underline text-blue-700" href="/login">here</a></CardDescription>
+
+				</CardContent>
+			</Card>
+		</CenterContainer>
 	);
 };
 
diff --git a/src/views/ViewCourse.tsx b/src/views/ViewCourse.tsx
new file mode 100644
index 0000000..fe245b0
--- /dev/null
+++ b/src/views/ViewCourse.tsx
@@ -0,0 +1,39 @@
+import { LibraryBig } from "lucide-react";
+import { useContext } from "react";
+import TopicCollectionAccordionCard from "../components/Cards/CollectionCards/TopicCollectionAccordionCard";
+import ReadOnlyPlate from "../components/ReadOnlyPlate";
+import { ScrollArea } from "../components/shadcn/ScrollArea";
+import { CourseNavSidebarContext } from "../contexts/CourseNavSidebarContexnt";
+import CourseNavbarSidebarLayout from "../layout/CourseNavbarSidebarLayout";
+
+const ViewCourse = () => {
+	const { course } = useContext(CourseNavSidebarContext);
+
+	return (
+		<CourseNavbarSidebarLayout>
+			<div className="mt-10 mx-auto w-[95%]">
+				<h1 className="text-3xl font-bold flex items-center">
+					<LibraryBig size={36} className="text-purple-400 mr-2" />
+					{course?.name}
+				</h1>
+				{course && (
+					<ReadOnlyPlate
+						value={JSON.parse(String(course.description))}
+					/>
+				)}
+
+				<ScrollArea className="h-[70vh]">
+					<div className="grid gap-y-2">
+						{course?.collections.map((tc) => (
+							<TopicCollectionAccordionCard
+								collection={tc.collection}
+							/>
+						))}
+					</div>
+				</ScrollArea>
+			</div>
+		</CourseNavbarSidebarLayout>
+	);
+};
+
+export default ViewCourse;
diff --git a/src/views/ViewCourseProblem.tsx b/src/views/ViewCourseProblem.tsx
new file mode 100644
index 0000000..d8ef133
--- /dev/null
+++ b/src/views/ViewCourseProblem.tsx
@@ -0,0 +1,78 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import ProblemViewLayout, {
+	OnSubmitProblemViewLayoutCallback,
+} from "../components/ProblemViewLayout";
+import CourseNavbarSidebarLayout from "../layout/CourseNavbarSidebarLayout";
+import { ProblemService } from "../services/Problem.service";
+import { SubmissionService } from "../services/Submission.service";
+import { ProblemPopulateCreatorSecureModel } from "../types/models/Problem.model";
+import { GetSubmissionByAccountProblemResponse } from "../types/models/Submission.model";
+
+const ViewCourseProblem = () => {
+	const accountId = String(localStorage.getItem("account_id"));
+	const { courseId, problemId } = useParams();
+
+
+	const [problem, setProblem] = useState<ProblemPopulateCreatorSecureModel>();
+	const [previousSubmissions, setPreviousSubmissions] =
+		useState<GetSubmissionByAccountProblemResponse>();
+
+	useEffect(() => {
+		ProblemService.getPublic(String(problemId)).then((response) => {
+			setProblem(response.data);
+		});
+
+		SubmissionService.getByAccountProblemInTopic(
+			accountId,
+			String(problemId),
+			String(courseId)
+		).then((response) => {
+			setPreviousSubmissions(response.data);
+		});
+	}, [accountId, problemId, courseId]);
+
+	const handleSubmit = ({
+		setGrading,
+		setLastedSubmission,
+		selectedLanguage,
+		submitCodeValue,
+	}: OnSubmitProblemViewLayoutCallback) => {
+		setGrading(true);
+		SubmissionService.topicSubmit(
+			accountId,
+			String(courseId),
+			String(problemId),
+			{
+				language: selectedLanguage,
+				submission_code: String(submitCodeValue),
+			}
+		).then((response) => {
+			setLastedSubmission(response.data);
+			SubmissionService.getByAccountProblemInTopic(
+				accountId,
+				String(problemId),
+				String(courseId)
+			).then((response) => {
+				setPreviousSubmissions(response.data);
+			});
+			setGrading(false);
+		});
+	};
+
+	return (
+		<CourseNavbarSidebarLayout>
+			<div className="ml-5">
+				<ProblemViewLayout
+					onSubmit={(e) => handleSubmit(e)}
+					problem={problem as ProblemPopulateCreatorSecureModel}
+					previousSubmissions={
+						previousSubmissions as GetSubmissionByAccountProblemResponse
+					}
+				/>
+			</div>
+		</CourseNavbarSidebarLayout>
+	);
+};
+
+export default ViewCourseProblem;
diff --git a/src/views/ViewProblem.tsx b/src/views/ViewProblem.tsx
new file mode 100644
index 0000000..645b8a4
--- /dev/null
+++ b/src/views/ViewProblem.tsx
@@ -0,0 +1,74 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import ProblemViewLayout, {
+	OnSubmitProblemViewLayoutCallback,
+} from "../components/ProblemViewLayout";
+import NavbarMenuLayout from "../layout/NavbarMenuLayout";
+import { ProblemService } from "../services/Problem.service";
+import { SubmissionService } from "../services/Submission.service";
+import { ProblemPopulateCreatorSecureModel } from "../types/models/Problem.model";
+import {
+	GetSubmissionByAccountProblemResponse
+} from "../types/models/Submission.model";
+
+const ViewProblem = () => {
+	const { problemId } = useParams();
+	const accountId = String(localStorage.getItem("account_id"));
+
+	const [problem, setProblem] = useState<ProblemPopulateCreatorSecureModel>();
+
+	const [previousSubmissions, setPreviousSubmissions] =
+		useState<GetSubmissionByAccountProblemResponse>()
+
+	useEffect(() => {
+		ProblemService.getPublic(String(problemId)).then((response) => {
+			setProblem(response.data);
+		});
+
+		SubmissionService.getByAccountProblem(
+			accountId,
+			String(problemId)
+		).then((response) => {
+			setPreviousSubmissions(response.data);
+		});
+	}, []);
+
+	const handleSubmit = ({
+		setGrading,
+		setLastedSubmission,
+		selectedLanguage,
+		submitCodeValue,
+	}: OnSubmitProblemViewLayoutCallback) => {
+		setGrading(true);
+		SubmissionService.submit(accountId, String(problemId), {
+			language: selectedLanguage,
+			submission_code: String(submitCodeValue),
+		}).then((response) => {
+			console.log(response.data);
+			setLastedSubmission(response.data);
+			SubmissionService.getByAccountProblem(
+				accountId,
+				String(problemId)
+			).then((response) => {
+				setPreviousSubmissions(response.data);
+			});
+			setGrading(false);
+		});
+	};
+
+	return (
+		<NavbarMenuLayout xPad={false}>
+			<div className="ml-10">
+				<ProblemViewLayout
+					onSubmit={(e) => handleSubmit(e)}
+					problem={problem as ProblemPopulateCreatorSecureModel}
+					previousSubmissions={
+						previousSubmissions as GetSubmissionByAccountProblemResponse
+					}
+				/>
+			</div>
+		</NavbarMenuLayout>
+	);
+};
+
+export default ViewProblem;
diff --git a/tailwind.config.js b/tailwind.config.js
index d37737f..0377ea1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,12 +1,76 @@
 /** @type {import('tailwindcss').Config} */
-export default {
+module.exports = {
+  darkMode: ["class"],
   content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+	],
   theme: {
-    extend: {},
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
   },
-  plugins: [],
-}
-
+  plugins: [require("tailwindcss-animate")],
+}
\ No newline at end of file
diff --git a/vite.config.ts.timestamp-1698066206977-802b7db80f7fd.mjs b/vite.config.ts.timestamp-1698066206977-802b7db80f7fd.mjs
new file mode 100644
index 0000000..83f00f1
--- /dev/null
+++ b/vite.config.ts.timestamp-1698066206977-802b7db80f7fd.mjs
@@ -0,0 +1,10 @@
+// vite.config.ts
+import { defineConfig } from "file:///E:/Coding/ModelGrader/Grader-Frontend/node_modules/vite/dist/node/index.js";
+import react from "file:///E:/Coding/ModelGrader/Grader-Frontend/node_modules/@vitejs/plugin-react-swc/index.mjs";
+var vite_config_default = defineConfig({
+  plugins: [react()]
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJFOlxcXFxDb2RpbmdcXFxcTW9kZWxHcmFkZXJcXFxcR3JhZGVyLUZyb250ZW5kXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCJFOlxcXFxDb2RpbmdcXFxcTW9kZWxHcmFkZXJcXFxcR3JhZGVyLUZyb250ZW5kXFxcXHZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9FOi9Db2RpbmcvTW9kZWxHcmFkZXIvR3JhZGVyLUZyb250ZW5kL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcclxuaW1wb3J0IHJlYWN0IGZyb20gJ0B2aXRlanMvcGx1Z2luLXJlYWN0LXN3YydcclxuXHJcbi8vIGh0dHBzOi8vdml0ZWpzLmRldi9jb25maWcvXHJcbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XHJcbiAgcGx1Z2luczogW3JlYWN0KCldLFxyXG59KVxyXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQXlTLFNBQVMsb0JBQW9CO0FBQ3RVLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQ25CLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==