diff --git a/.changeset/tricky-mugs-learn.md b/.changeset/tricky-mugs-learn.md
new file mode 100644
index 00000000..08dfde98
--- /dev/null
+++ b/.changeset/tricky-mugs-learn.md
@@ -0,0 +1,6 @@
+---
+'@snipcode/front': minor
+'@snipcode/web': minor
+---
+
+Use shadcn ui for web design page
diff --git a/.eslintrc.json b/.eslintrc.json
index afa848f6..970a07a7 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -47,6 +47,14 @@
           "index", // <- index imports
           "unknown" // <- unknown
         ],
+        "pathGroups": [
+          {
+            "pattern": "@snipcode/**",
+            "group": "external",
+            "position": "after"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["builtin"],
         "newlines-between": "always",
         "alphabetize": {
           "order": "asc",
diff --git a/apps/backend/src/app.module.ts b/apps/backend/src/app.module.ts
index 76524cc5..5d4dfc28 100644
--- a/apps/backend/src/app.module.ts
+++ b/apps/backend/src/app.module.ts
@@ -7,6 +7,7 @@ import { Logger, Module } from '@nestjs/common';
 import { ConfigModule, ConfigService } from '@nestjs/config';
 import { GraphQLModule } from '@nestjs/graphql';
 import { ServeStaticModule } from '@nestjs/serve-static';
+
 import { DomainModule } from '@snipcode/domain';
 
 import { EnvironmentVariables, validate } from './configs/environment';
diff --git a/apps/backend/src/configs/auth.guard.ts b/apps/backend/src/configs/auth.guard.ts
index 293e7bed..5651db5e 100644
--- a/apps/backend/src/configs/auth.guard.ts
+++ b/apps/backend/src/configs/auth.guard.ts
@@ -1,5 +1,6 @@
 import { CanActivate, ExecutionContext, Injectable, UnauthorizedException, createParamDecorator } from '@nestjs/common';
 import { GqlExecutionContext } from '@nestjs/graphql';
+
 import { SessionService } from '@snipcode/domain';
 import { errors } from '@snipcode/utils';
 
diff --git a/apps/backend/src/configs/exception.filter.ts b/apps/backend/src/configs/exception.filter.ts
index 484bce3c..bc0b6e39 100644
--- a/apps/backend/src/configs/exception.filter.ts
+++ b/apps/backend/src/configs/exception.filter.ts
@@ -8,10 +8,11 @@ import {
   PrismaClientUnknownRequestError,
   PrismaClientValidationError,
 } from '@prisma/client/runtime/library';
-import { isAppError } from '@snipcode/utils';
 import { Response } from 'express';
 import { GraphQLError } from 'graphql';
 
+import { isAppError } from '@snipcode/utils';
+
 import { INTERNAL_SERVER_ERROR } from '../utils/constants';
 
 type PrismaError =
diff --git a/apps/backend/src/features/app/app.service.spec.ts b/apps/backend/src/features/app/app.service.spec.ts
index d1b70839..eb809b8a 100644
--- a/apps/backend/src/features/app/app.service.spec.ts
+++ b/apps/backend/src/features/app/app.service.spec.ts
@@ -1,8 +1,9 @@
 import { ConfigService } from '@nestjs/config';
 import { Test, TestingModule } from '@nestjs/testing';
-import { PrismaService, RoleService, UserService } from '@snipcode/domain';
 import { mock } from 'jest-mock-extended';
 
+import { PrismaService, RoleService, UserService } from '@snipcode/domain';
+
 import { AppService } from './app.service';
 
 const prismaServiceMock = mock<PrismaService>();
diff --git a/apps/backend/src/features/app/app.service.ts b/apps/backend/src/features/app/app.service.ts
index 8888b536..184872de 100644
--- a/apps/backend/src/features/app/app.service.ts
+++ b/apps/backend/src/features/app/app.service.ts
@@ -1,5 +1,6 @@
 import { Injectable, OnModuleInit } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
+
 import { RoleService, UserService } from '@snipcode/domain';
 
 import { EnvironmentVariables } from '../../configs/environment';
diff --git a/apps/backend/src/features/auth/graphql/auth.integration.spec.ts b/apps/backend/src/features/auth/graphql/auth.integration.spec.ts
index 93d6fdcd..f945768d 100644
--- a/apps/backend/src/features/auth/graphql/auth.integration.spec.ts
+++ b/apps/backend/src/features/auth/graphql/auth.integration.spec.ts
@@ -1,6 +1,7 @@
+import request from 'supertest';
+
 import { SessionService } from '@snipcode/domain';
 import { isValidUUIDV4 } from '@snipcode/utils';
-import request from 'supertest';
 
 import { TestHelper } from '../../../utils/tests/helpers';
 import { TestServer, startTestServer } from '../../../utils/tests/server';
diff --git a/apps/backend/src/features/auth/graphql/auth.resolvers.ts b/apps/backend/src/features/auth/graphql/auth.resolvers.ts
index 2d2f1cfb..d56c5bd3 100644
--- a/apps/backend/src/features/auth/graphql/auth.resolvers.ts
+++ b/apps/backend/src/features/auth/graphql/auth.resolvers.ts
@@ -1,6 +1,7 @@
 import { UseGuards } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import { Args, Context, Mutation, Parent, Query, ResolveField, Resolver } from '@nestjs/graphql';
+
 import {
   CreateSessionInput,
   CreateUserInput,
diff --git a/apps/backend/src/features/auth/rest/auth.controller.ts b/apps/backend/src/features/auth/rest/auth.controller.ts
index 4c1de5fa..955ba0b6 100644
--- a/apps/backend/src/features/auth/rest/auth.controller.ts
+++ b/apps/backend/src/features/auth/rest/auth.controller.ts
@@ -1,5 +1,7 @@
 import { Controller, Get, Logger, Query, Res } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
+import { Response } from 'express';
+
 import {
   CreateSessionInput,
   CreateUserRootFolderInput,
@@ -9,7 +11,6 @@ import {
   UserService,
 } from '@snipcode/domain';
 import { addDayToDate, errors } from '@snipcode/utils';
-import { Response } from 'express';
 
 import { EnvironmentVariables } from '../../../configs/environment';
 import { AUTH_SUCCESS_URL } from '../../../utils/constants';
diff --git a/apps/backend/src/features/auth/rest/auth.provider.integration.spec.ts b/apps/backend/src/features/auth/rest/auth.provider.integration.spec.ts
index f79a013b..c5724976 100644
--- a/apps/backend/src/features/auth/rest/auth.provider.integration.spec.ts
+++ b/apps/backend/src/features/auth/rest/auth.provider.integration.spec.ts
@@ -1,10 +1,11 @@
 import * as url from 'node:url';
 
-import { SessionService } from '@snipcode/domain';
 import { HttpResponse, http } from 'msw';
 import { setupServer } from 'msw/node';
 import request from 'supertest';
 
+import { SessionService } from '@snipcode/domain';
+
 import { TestHelper } from '../../../utils/tests/helpers';
 import { TestServer, startTestServer } from '../../../utils/tests/server';
 import { GitHubUserResponse } from '../types';
diff --git a/apps/backend/src/features/auth/services/github.service.test.ts b/apps/backend/src/features/auth/services/github.service.test.ts
index 14aedc45..ba6b6245 100644
--- a/apps/backend/src/features/auth/services/github.service.test.ts
+++ b/apps/backend/src/features/auth/services/github.service.test.ts
@@ -1,9 +1,10 @@
 import { ConfigService } from '@nestjs/config';
 import { Test, TestingModule } from '@nestjs/testing';
-import { User } from '@snipcode/domain';
 import { HttpResponse, http } from 'msw';
 import { setupServer } from 'msw/node';
 
+import { User } from '@snipcode/domain';
+
 import { GithubService } from './github.service';
 import { GitHubUserResponse } from '../types';
 
diff --git a/apps/backend/src/features/auth/services/github.service.ts b/apps/backend/src/features/auth/services/github.service.ts
index 8621cea6..4eab0d21 100644
--- a/apps/backend/src/features/auth/services/github.service.ts
+++ b/apps/backend/src/features/auth/services/github.service.ts
@@ -1,8 +1,9 @@
 import { Injectable } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
+import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
+
 import { CreateUserInput, UpdateUserInput, User } from '@snipcode/domain';
 import { AppError } from '@snipcode/utils';
-import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
 
 import { EnvironmentVariables } from '../../../configs/environment';
 import { GitHubUserResponse } from '../types';
diff --git a/apps/backend/src/features/folders/graphql/folder.resolvers.ts b/apps/backend/src/features/folders/graphql/folder.resolvers.ts
index b33f78e6..377fed5d 100644
--- a/apps/backend/src/features/folders/graphql/folder.resolvers.ts
+++ b/apps/backend/src/features/folders/graphql/folder.resolvers.ts
@@ -1,5 +1,6 @@
 import { UseGuards } from '@nestjs/common';
 import { Args, Mutation, Parent, Query, ResolveField, Resolver } from '@nestjs/graphql';
+
 import {
   CreateFolderInput,
   Folder,
diff --git a/apps/backend/src/features/snippets/graphql/snippet.resolvers.ts b/apps/backend/src/features/snippets/graphql/snippet.resolvers.ts
index 9f765a7a..30266ba3 100644
--- a/apps/backend/src/features/snippets/graphql/snippet.resolvers.ts
+++ b/apps/backend/src/features/snippets/graphql/snippet.resolvers.ts
@@ -1,5 +1,6 @@
 import { UseGuards } from '@nestjs/common';
 import { Args, Mutation, Parent, Query, ResolveField, Resolver } from '@nestjs/graphql';
+
 import {
   CreateSnippetInput,
   DeleteSnippetInput,
diff --git a/apps/backend/src/features/snippets/rest/snippet.controller.ts b/apps/backend/src/features/snippets/rest/snippet.controller.ts
index e810edfd..c0bbffc8 100644
--- a/apps/backend/src/features/snippets/rest/snippet.controller.ts
+++ b/apps/backend/src/features/snippets/rest/snippet.controller.ts
@@ -1,5 +1,6 @@
 import { Controller, Get, Param } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
+
 import { SnippetService } from '@snipcode/domain';
 import { OEmbedResult, generateOembedMetadata } from '@snipcode/embed';
 
diff --git a/apps/backend/src/features/users/graphql/user.resolvers.ts b/apps/backend/src/features/users/graphql/user.resolvers.ts
index d4d24394..d7a827a4 100644
--- a/apps/backend/src/features/users/graphql/user.resolvers.ts
+++ b/apps/backend/src/features/users/graphql/user.resolvers.ts
@@ -1,5 +1,6 @@
 import { ConfigService } from '@nestjs/config';
 import { Args, Mutation, Resolver } from '@nestjs/graphql';
+
 import { NewsletterService } from '@snipcode/domain';
 
 import { EnvironmentVariables } from '../../../configs/environment';
diff --git a/apps/backend/src/utils/graphql/date-scalar.ts b/apps/backend/src/utils/graphql/date-scalar.ts
index d5bfacb8..58138e1c 100644
--- a/apps/backend/src/utils/graphql/date-scalar.ts
+++ b/apps/backend/src/utils/graphql/date-scalar.ts
@@ -1,8 +1,9 @@
 import { CustomScalar, Scalar } from '@nestjs/graphql';
-import { errors } from '@snipcode/utils';
 import { Kind, ValueNode } from 'graphql';
 import { GraphQLError } from 'graphql';
 
+import { errors } from '@snipcode/utils';
+
 import { DATE_REGEX } from '../constants';
 
 @Scalar('Date')
diff --git a/apps/backend/src/utils/tests/helpers.ts b/apps/backend/src/utils/tests/helpers.ts
index ca845f0a..8fca154e 100644
--- a/apps/backend/src/utils/tests/helpers.ts
+++ b/apps/backend/src/utils/tests/helpers.ts
@@ -1,8 +1,9 @@
 import { INestApplication } from '@nestjs/common';
 import { randEmail, randFullName, randPassword, randWord } from '@ngneat/falso';
+import request from 'supertest';
+
 import { PrismaService, RoleName } from '@snipcode/domain';
 import { generateJwtToken } from '@snipcode/utils';
-import request from 'supertest';
 
 type CreateUserInputArgs = {
   email: string;
diff --git a/apps/web/.eslintrc.js b/apps/web/.eslintrc.js
index 0a96bd95..099f6b00 100644
--- a/apps/web/.eslintrc.js
+++ b/apps/web/.eslintrc.js
@@ -17,6 +17,7 @@ module.exports = {
     'sentry.edge.config.js',
     '.eslintrc.js',
     'vitest.config.ts',
+    'tailwind.config.ts',
   ],
   parserOptions: {
     ecmaVersion: 2023,
@@ -27,9 +28,11 @@ module.exports = {
   rules: {
     camelcase: 'off',
     'import/prefer-default-export': 'off',
-    'react/jsx-filename-extension': 'off',
     'react/jsx-props-no-spreading': 'off',
-    'react/no-unused-prop-types': 'off',
+    'react/boolean-prop-naming': 'error',
+    'react/jsx-no-leaked-render': 'error',
+    'react/no-unused-prop-types': 'error',
+    'react/destructuring-assignment': 'error',
     'react/require-default-props': 'off',
     'import/extensions': 'off',
     quotes: 'off',
diff --git a/apps/web/components.json b/apps/web/components.json
new file mode 100644
index 00000000..45adf9ef
--- /dev/null
+++ b/apps/web/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/tailwind.css",
+    "baseColor": "slate",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
\ No newline at end of file
diff --git a/apps/web/package.json b/apps/web/package.json
index 0bd3dde1..9f40132a 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -13,12 +13,14 @@
   "dependencies": {
     "@apollo/client": "3.10.6",
     "@apollo/experimental-nextjs-app-support": "0.11.2",
-    "@headlessui/react": "2.1.0",
     "@hookform/resolvers": "3.6.0",
+    "@radix-ui/react-slot": "1.1.0",
     "@sentry/nextjs": "8.11.0",
     "@snipcode/front": "workspace:*",
     "@snipcode/utils": "workspace:*",
+    "class-variance-authority": "0.7.0",
     "classnames": "2.5.1",
+    "clsx": "2.1.1",
     "graphql": "16.9.0",
     "next": "14.2.4",
     "next-seo": "6.5.0",
@@ -26,6 +28,8 @@
     "react-cookie": "7.1.4",
     "react-dom": "18.3.1",
     "react-hook-form": "7.52.0",
+    "tailwind-merge": "2.4.0",
+    "tailwindcss-animate": "1.0.7",
     "yup": "1.4.0"
   },
   "devDependencies": {
diff --git a/apps/web/src/app/(protected)/app/browse/container.tsx b/apps/web/src/app/(protected)/app/browse/container.tsx
index 72488b7a..f278836d 100644
--- a/apps/web/src/app/(protected)/app/browse/container.tsx
+++ b/apps/web/src/app/(protected)/app/browse/container.tsx
@@ -1,12 +1,13 @@
 'use client';
 
-import { Button } from '@snipcode/front/forms/button';
+import { useState } from 'react';
+
+import { Button } from '@snipcode/front/components/ui/button';
 import { SelectInput } from '@snipcode/front/forms/select-input';
-import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon, SearchIcon } from '@snipcode/front/icons';
+import { ChevronsLeftIcon, ChevronsRightIcon, SearchIcon } from '@snipcode/front/icons';
 import { usePublicSnippets } from '@snipcode/front/services';
-import { SelectOption } from '@snipcode/front/typings/components';
-import { PublicSnippetItem, PublicSnippetResult } from '@snipcode/front/typings/queries';
-import { useState } from 'react';
+import { SelectOption } from '@snipcode/front/types/components';
+import { PublicSnippetItem, PublicSnippetResult } from '@snipcode/front/types/queries';
 
 import { PublicSnippet } from '@/components/snippets/public-snippet';
 import { usePaginationToken } from '@/hooks/use-pagination-token';
@@ -124,23 +125,13 @@ export const BrowseContainer = ({ data }: Props) => {
               ))}
             </div>
             <div className="w-full flex justify-center mt-10 space-x-4">
-              <Button
-                className="bg-gray-200 w-auto items-center"
-                color="white-gray"
-                disabled={!canGoBack}
-                onClick={onPreviousItemClick}
-              >
-                <ChevronDoubleLeftIcon className="w-6 h-4" />
+              <Button className="w-32" disabled={!canGoBack} onClick={onPreviousItemClick}>
+                <ChevronsLeftIcon />
                 Previous
               </Button>
-              <Button
-                className="bg-gray-200 w-auto items-center"
-                color="white-gray"
-                disabled={!canGoForward}
-                onClick={onNextItemClick}
-              >
+              <Button className="w-32" disabled={!canGoForward} onClick={onNextItemClick}>
                 Next
-                <ChevronDoubleRightIcon className="w-6 h-4" />
+                <ChevronsRightIcon />
               </Button>
             </div>
           </div>
diff --git a/apps/web/src/app/(protected)/app/browse/lib/fetch-snippets.ts b/apps/web/src/app/(protected)/app/browse/lib/fetch-snippets.ts
index 26b94218..a6d5beef 100644
--- a/apps/web/src/app/(protected)/app/browse/lib/fetch-snippets.ts
+++ b/apps/web/src/app/(protected)/app/browse/lib/fetch-snippets.ts
@@ -1,8 +1,9 @@
+import { cookies } from 'next/headers';
+
 import { findPublicSnippetsQuery } from '@snipcode/front/graphql';
 import { PublicSnippetsQuery } from '@snipcode/front/graphql/generated';
+import { SNIPPET_ITEM_PER_PAGE } from '@snipcode/front/lib/constants';
 import { formatPublicSnippetsResult } from '@snipcode/front/services';
-import { SNIPPET_ITEM_PER_PAGE } from '@snipcode/front/utils/constants';
-import { cookies } from 'next/headers';
 
 import { getApolloClient } from '@/lib/apollo/server';
 import { AUTH_COOKIE_NAME } from '@/lib/constants';
diff --git a/apps/web/src/app/(protected)/app/folders/[id]/container.tsx b/apps/web/src/app/(protected)/app/folders/[id]/container.tsx
index 6db305d9..ac264340 100644
--- a/apps/web/src/app/(protected)/app/folders/[id]/container.tsx
+++ b/apps/web/src/app/(protected)/app/folders/[id]/container.tsx
@@ -1,10 +1,12 @@
 'use client';
 
+import { useParams } from 'next/navigation';
+
 import { Directory } from '@snipcode/front/components/directory';
 import { useFindFolder } from '@snipcode/front/services';
-import { useParams } from 'next/navigation';
 
 import { useFolderDirectory } from '@/hooks/use-folder-directory';
+import { EMBEDDABLE_HOST_URL, SHAREABLE_HOST_URL } from '@/lib/constants';
 
 export const ViewFolderContainer = () => {
   const queryParams = useParams<{ id: string }>();
@@ -18,16 +20,18 @@ export const ViewFolderContainer = () => {
 
   return (
     <div className="py-10">
-      {isFolderFound && (
+      {isFolderFound ? (
         <Directory
+          embeddableHostUrl={EMBEDDABLE_HOST_URL}
           folderId={folderId}
           rootFolderId={rootFolderId}
+          shareableHostUrl={SHAREABLE_HOST_URL}
           title={data?.name ?? '-----'}
           onBreadcrumbPathClick={handleBreadcrumbClick}
           onNavigateToFolder={navigateToFolder}
           onSnippetClick={openSnippet}
         />
-      )}
+      ) : null}
     </div>
   );
 };
diff --git a/apps/web/src/app/(protected)/app/home/container.tsx b/apps/web/src/app/(protected)/app/home/container.tsx
index 02b32cbe..d3174ce3 100644
--- a/apps/web/src/app/(protected)/app/home/container.tsx
+++ b/apps/web/src/app/(protected)/app/home/container.tsx
@@ -4,6 +4,7 @@ import { Directory } from '@snipcode/front/components/directory';
 import { useAuthenticatedUser } from '@snipcode/front/services';
 
 import { useFolderDirectory } from '@/hooks/use-folder-directory';
+import { EMBEDDABLE_HOST_URL, SHAREABLE_HOST_URL } from '@/lib/constants';
 
 export const HomeContainer = () => {
   const { data: user } = useAuthenticatedUser();
@@ -12,8 +13,10 @@ export const HomeContainer = () => {
   return (
     <div className="py-10">
       <Directory
+        embeddableHostUrl={EMBEDDABLE_HOST_URL}
         folderId={rootFolderId}
         rootFolderId={rootFolderId}
+        shareableHostUrl={SHAREABLE_HOST_URL}
         title={`Welcome, ${user?.name}`}
         onBreadcrumbPathClick={handleBreadcrumbClick}
         onNavigateToFolder={navigateToFolder}
diff --git a/apps/web/src/app/(protected)/app/snippets/[id]/container.tsx b/apps/web/src/app/(protected)/app/snippets/[id]/container.tsx
index 83514d30..06ed1e65 100644
--- a/apps/web/src/app/(protected)/app/snippets/[id]/container.tsx
+++ b/apps/web/src/app/(protected)/app/snippets/[id]/container.tsx
@@ -1,9 +1,10 @@
 'use client';
 
+import { useParams } from 'next/navigation';
+
 import { BreadCrumb } from '@snipcode/front/components/directory/breadcrumb';
 import { ViewSnippet } from '@snipcode/front/components/directory/snippets/form/view-snippet';
 import { useFindSnippet } from '@snipcode/front/services';
-import { useParams } from 'next/navigation';
 
 import { useFolderDirectory } from '@/hooks/use-folder-directory';
 
@@ -19,7 +20,7 @@ export const ViewSnippetContainer = () => {
 
   return (
     <div className="py-10">
-      {isSnippetFound && (
+      {isSnippetFound ? (
         <div className="max-w-7xl py-8 mx-auto sm:px-6 lg:px-8">
           <BreadCrumb
             current={data.snippet.id}
@@ -31,7 +32,7 @@ export const ViewSnippetContainer = () => {
             <ViewSnippet snippet={data.snippet} />
           </div>
         </div>
-      )}
+      ) : null}
     </div>
   );
 };
diff --git a/apps/web/src/app/(protected)/layout.tsx b/apps/web/src/app/(protected)/layout.tsx
index dfaa0efe..c7f5b4d2 100644
--- a/apps/web/src/app/(protected)/layout.tsx
+++ b/apps/web/src/app/(protected)/layout.tsx
@@ -1,12 +1,20 @@
-import { ToastProvider } from '@snipcode/front/components/toast/provider';
+import '@/styles/globals.css';
+
+import { Inter as FontSans } from 'next/font/google';
 import React, { PropsWithChildren } from 'react';
 
+import { Toaster } from '@snipcode/front/components/ui/toaster';
+
 import { ApolloWrapper } from '@/lib/apollo/client';
 import { generatePageMetadata } from '@/lib/seo';
+import { cn } from '@/lib/utils';
 
 import { AuthenticatedLayout } from './layout/content';
 
-import '@/styles/globals.css';
+const fontSans = FontSans({
+  subsets: ['latin'],
+  variable: '--font-sans',
+});
 
 export const metadata = generatePageMetadata({
   noIndex: true,
@@ -15,12 +23,11 @@ export const metadata = generatePageMetadata({
 const AppLayout = ({ children }: PropsWithChildren) => {
   return (
     <html lang="en">
-      <body>
+      <body className={cn('min-h-screen bg-background font-sans antialiased', fontSans.variable)}>
         <div>
           <ApolloWrapper>
-            <ToastProvider>
-              <AuthenticatedLayout>{children}</AuthenticatedLayout>
-            </ToastProvider>
+            <Toaster />
+            <AuthenticatedLayout>{children}</AuthenticatedLayout>
           </ApolloWrapper>
         </div>
       </body>
diff --git a/apps/web/src/app/(protected)/layout/content.tsx b/apps/web/src/app/(protected)/layout/content.tsx
index c73c86ea..1eb4c7fd 100644
--- a/apps/web/src/app/(protected)/layout/content.tsx
+++ b/apps/web/src/app/(protected)/layout/content.tsx
@@ -1,13 +1,13 @@
 'use client';
 
-import { useAuthenticatedUser } from '@snipcode/front/services';
 import { ReactNode } from 'react';
 
+import { useAuthenticatedUser } from '@snipcode/front/services';
+
+import { Header } from '@/app/(protected)/layout/header';
 import { Loader } from '@/components/common/loader';
 import { Redirect } from '@/components/common/redirect';
 
-import { Header } from './header';
-
 type Props = {
   children?: ReactNode;
 };
@@ -28,7 +28,7 @@ export const AuthenticatedLayout = ({ children }: Props) => {
   }
 
   return (
-    <div className="relative w-full min-h-screen bg-gray-50 flex-grow">
+    <div className="relative w-full min-h-screen bg-white flex-grow">
       <Header />
       {children}
     </div>
diff --git a/apps/web/src/app/(protected)/layout/header.tsx b/apps/web/src/app/(protected)/layout/header.tsx
index f2c0f808..78458feb 100644
--- a/apps/web/src/app/(protected)/layout/header.tsx
+++ b/apps/web/src/app/(protected)/layout/header.tsx
@@ -1,15 +1,24 @@
-'use client';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 
-import { Disclosure, Menu, Transition } from '@snipcode/front';
-import { Link } from '@snipcode/front/components/link';
-import { UserAvatar } from '@snipcode/front/components/user-avatar';
-import { LogoIcon, LogoLightIcon, MenuIcon, XIcon } from '@snipcode/front/icons';
+import { Avatar, AvatarFallback, AvatarImage } from '@snipcode/front/components/ui/avatar';
+import { Button } from '@snipcode/front/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@snipcode/front/components/ui/dropdown-menu';
+import { LogoIcon, LogoLightIcon } from '@snipcode/front/icons';
+import { classNames } from '@snipcode/front/lib/classnames';
+import { COLORS } from '@snipcode/front/lib/constants';
 import { useLogoutUser } from '@snipcode/front/services';
-import { classNames } from '@snipcode/front/utils/classnames';
-import { usePathname } from 'next/navigation';
-import { Fragment } from 'react';
 
 import { useAuth } from '@/hooks/authentication/use-auth';
+import { generateInitials } from '@/lib/utils';
 
 const navigation = [
   { current: true, href: '/app/home', name: 'Home' },
@@ -27,6 +36,11 @@ export const Header = () => {
   const { deleteToken, redirectToHome, user } = useAuth();
   const pathname = usePathname();
 
+  const initials = generateInitials(user?.name);
+
+  const charIndex = initials.charCodeAt(0) - 65;
+  const colorIndex = charIndex % COLORS.length;
+
   const logout = async () => {
     await logoutUserMutation({
       onCompleted: async () => {
@@ -37,131 +51,66 @@ export const Header = () => {
   };
 
   return (
-    <Disclosure as="nav" className="bg-white shadow-sm">
-      {({ open }) => (
-        <>
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div className="flex justify-between h-16">
-              <div className="flex">
-                <div className="flex-shrink-0 flex items-center">
-                  <LogoLightIcon className="block lg:hidden h-8 w-auto" />
-                  <LogoIcon className="hidden lg:block h-8 w-auto" />
-                </div>
-                <div className="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
-                  {navigation.map((item) => (
-                    <Link
-                      aria-current={isActive(pathname, item.href) ? 'page' : undefined}
-                      className={classNames(
-                        isActive(pathname, item.href)
-                          ? 'border-gray-900 text-gray-900'
-                          : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
-                        'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
-                      )}
-                      href={item.href}
-                      key={item.name}
-                    >
-                      {item.name}
-                    </Link>
-                  ))}
-                </div>
-              </div>
-              <div className="hidden sm:ml-6 sm:flex sm:items-center">
-                <Menu as="div" className="ml-3 relative">
-                  <div>
-                    <Menu.Button className="bg-white flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-                      <span className="sr-only">Open user menu</span>
-                      <UserAvatar name={user?.name} url={user?.pictureUrl} />
-                    </Menu.Button>
-                  </div>
-                  <Transition
-                    as={Fragment}
-                    enter="transition ease-out duration-200"
-                    enterFrom="transform opacity-0 scale-95"
-                    enterTo="transform opacity-100 scale-100"
-                    leave="transition ease-in duration-75"
-                    leaveFrom="transform opacity-100 scale-100"
-                    leaveTo="transform opacity-0 scale-95"
-                  >
-                    <Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
-                      <Link
-                        className="block px-4 py-2 text-sm text-gray-700 hover:text-gray-800 hover:bg-gray-100"
-                        href="/app/profile"
-                      >
-                        Profile
-                      </Link>
-                      <Menu.Item>
-                        <button
-                          className="w-full text-left block px-4 py-2 text-sm text-gray-700 hover:text-gray-800 hover:bg-gray-100"
-                          onClick={logout}
-                        >
-                          Sign out
-                        </button>
-                      </Menu.Item>
-                    </Menu.Items>
-                  </Transition>
-                </Menu>
-              </div>
-              <div className="-mr-2 flex items-center sm:hidden">
-                {/* Mobile menu button */}
-                <Disclosure.Button className="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-                  <span className="sr-only">Open main menu</span>
-                  {open ? (
-                    <XIcon aria-hidden="true" className="block h-6 w-6" />
-                  ) : (
-                    <MenuIcon aria-hidden="true" className="block h-6 w-6" />
-                  )}
-                </Disclosure.Button>
-              </div>
-            </div>
+    <div className="bg-white w-full">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex h-16 items-center">
+          <div className="flex-shrink-0 flex items-center">
+            <LogoLightIcon className="block lg:hidden h-8 w-auto" />
+            <LogoIcon className="hidden lg:block h-8 w-auto" />
           </div>
-
-          <Disclosure.Panel className="sm:hidden">
-            <div className="pt-2 pb-3 space-y-1">
-              {navigation.map((item) => (
-                <Disclosure.Button
-                  aria-current={item.current ? 'page' : undefined}
-                  as="a"
-                  className={classNames(
-                    item.current
-                      ? 'bg-indigo-50 border-indigo-500 text-indigo-700'
-                      : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800',
-                    'block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
-                  )}
-                  href={item.href}
-                  key={item.name}
-                >
-                  {item.name}
-                </Disclosure.Button>
-              ))}
-            </div>
-            <div className="pt-4 pb-3 border-t border-gray-200">
-              <div className="flex items-center px-4">
-                <div className="flex-shrink-0">
-                  <UserAvatar name={user?.name} url={user?.pictureUrl} />
-                </div>
-                <div className="ml-3">
-                  <div className="text-base font-medium text-gray-800">{user?.name}</div>
-                  <div className="text-sm font-medium text-gray-500">{user?.email}</div>
-                </div>
-              </div>
-              <div className="mt-3 space-y-1">
-                <Link
-                  className="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100"
-                  href="/app/profile"
-                >
-                  Profile
-                </Link>
-                <Disclosure.Button
-                  className="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100"
-                  onClick={logout}
-                >
+          <nav className="flex items-center space-x-4 lg:space-x-6 sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
+            {navigation.map((item) => (
+              <Link
+                aria-current={isActive(pathname, item.href) ? 'page' : undefined}
+                className={classNames(
+                  isActive(pathname, item.href)
+                    ? 'border-gray-900'
+                    : 'border-transparent hover:text-gray-700 hover:border-gray-300 text-muted-foreground',
+                  'text-sm font-medium transition-colors hover:text-primary',
+                )}
+                href={item.href}
+                key={item.name}
+              >
+                {item.name}
+              </Link>
+            ))}
+          </nav>
+          <div className="ml-auto flex items-center space-x-4">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button className="relative h-10 w-10 rounded-full" variant="ghost">
+                  <Avatar className="h-10 w-10">
+                    <AvatarImage alt={`@${user?.username}`} src={user?.pictureUrl ?? undefined} />
+                    <AvatarFallback className="text-white" style={{ backgroundColor: COLORS[colorIndex] }}>
+                      {generateInitials(user?.name)}
+                    </AvatarFallback>
+                  </Avatar>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-56" forceMount>
+                <DropdownMenuLabel className="font-normal">
+                  <div className="flex flex-col space-y-1">
+                    <p className="text-sm font-medium leading-none">{user?.name}</p>
+                    <p className="text-xs leading-none text-muted-foreground">@{user?.username}</p>
+                  </div>
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  <DropdownMenuItem>
+                    <Link className="w-full" href="/app/profile">
+                      Profile
+                    </Link>
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem className="cursor-pointer" onClick={logout}>
                   Sign out
-                </Disclosure.Button>
-              </div>
-            </div>
-          </Disclosure.Panel>
-        </>
-      )}
-    </Disclosure>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };
diff --git a/apps/web/src/app/(public)/layout.tsx b/apps/web/src/app/(public)/layout.tsx
index 01293878..5d824af7 100644
--- a/apps/web/src/app/(public)/layout.tsx
+++ b/apps/web/src/app/(public)/layout.tsx
@@ -1,19 +1,26 @@
+import '@/styles/globals.css';
+
+import { Inter as FontSans } from 'next/font/google';
 import React, { PropsWithChildren } from 'react';
 
 import { ApolloWrapper } from '@/lib/apollo/client';
 import { generatePageMetadata } from '@/lib/seo';
+import { cn } from '@/lib/utils';
 
 import { PublicFooter } from './layout/footer';
 import { PublicHeader } from './layout/header';
 
-import '@/styles/globals.css';
+const fontSans = FontSans({
+  subsets: ['latin'],
+  variable: '--font-sans',
+});
 
 export const metadata = generatePageMetadata();
 
 const RootLayout = ({ children }: PropsWithChildren) => {
   return (
     <html lang="en">
-      <body>
+      <body className={cn('min-h-screen bg-background font-sans antialiased', fontSans.variable)}>
         <div className="overflow-x-hidden bg-gray-50 min-h-screen">
           <ApolloWrapper>
             <PublicHeader />
diff --git a/apps/web/src/app/(public)/layout/header.tsx b/apps/web/src/app/(public)/layout/header.tsx
index 44dd5a2f..702df054 100644
--- a/apps/web/src/app/(public)/layout/header.tsx
+++ b/apps/web/src/app/(public)/layout/header.tsx
@@ -1,9 +1,10 @@
 'use client';
 
-import { LogoIcon } from '@snipcode/front/icons';
 import Link from 'next/link';
 import { MouseEvent, useState } from 'react';
 
+import { LogoIcon } from '@snipcode/front/icons';
+
 import { useAuth } from '@/hooks/authentication/use-auth';
 
 // TODO - Refactor to server component
@@ -61,7 +62,7 @@ const PublicHeader = () => {
                 </span>
               )}
 
-              {isExpanded && (
+              {isExpanded ? (
                 <span aria-hidden="true">
                   <svg
                     className="w-7 h-7"
@@ -73,7 +74,7 @@ const PublicHeader = () => {
                     <path d="M6 18L18 6M6 6l12 12" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" />
                   </svg>
                 </span>
-              )}
+              ) : null}
             </button>
           </div>
 
@@ -110,7 +111,6 @@ const PublicHeader = () => {
               title="Sign in"
               onClick={redirectToSignInIfAuthenticated}
             >
-              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
               Sign in
             </Link>
 
@@ -120,13 +120,12 @@ const PublicHeader = () => {
               title="Get started"
               onClick={redirectToSignupIfAuthenticated}
             >
-              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
               Get started
             </Link>
           </nav>
         </div>
 
-        {isExpanded && (
+        {isExpanded ? (
           <nav>
             <div className="px-1 py-8">
               <div className="grid gap-y-7">
@@ -176,7 +175,7 @@ const PublicHeader = () => {
               </div>
             </div>
           </nav>
-        )}
+        ) : null}
       </div>
     </header>
   );
diff --git a/apps/web/src/app/(public)/page.test.tsx b/apps/web/src/app/(public)/page.test.tsx
index f78a7727..dbc5e7dc 100644
--- a/apps/web/src/app/(public)/page.test.tsx
+++ b/apps/web/src/app/(public)/page.test.tsx
@@ -1,8 +1,9 @@
 import { MockedProvider } from '@apollo/client/testing';
-import { authenticatedUserQuery } from '@snipcode/front/graphql/users/queries/authenticated-user';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
+import { authenticatedUserQuery } from '@snipcode/front/graphql/users/queries/authenticated-user';
+
 import Home from './page';
 
 const mocks = [
diff --git a/apps/web/src/app/(public)/signin/container.tsx b/apps/web/src/app/(public)/signin/container.tsx
index ac510e77..e2d39c5e 100644
--- a/apps/web/src/app/(public)/signin/container.tsx
+++ b/apps/web/src/app/(public)/signin/container.tsx
@@ -1,16 +1,17 @@
 'use client';
 
 import { yupResolver } from '@hookform/resolvers/yup';
-import { Alert } from '@snipcode/front/components/alert';
-import { Button } from '@snipcode/front/forms/button';
-import { TextInput } from '@snipcode/front/forms/text-input';
-import { GithubIcon, GoogleIcon } from '@snipcode/front/icons';
-import { useLoginUser } from '@snipcode/front/services';
 import Link from 'next/link';
 import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import * as yup from 'yup';
 
+import { Alert } from '@snipcode/front/components/alert';
+import { Button } from '@snipcode/front/components/ui/button';
+import { TextInput } from '@snipcode/front/forms/text-input';
+import { GithubIcon, GoogleIcon, LoaderIcon } from '@snipcode/front/icons';
+import { useLoginUser } from '@snipcode/front/services';
+
 import { useAuth } from '@/hooks/authentication/use-auth';
 import { FORM_ERRORS } from '@/lib/constants';
 
@@ -65,15 +66,15 @@ export const SignInContainer = () => {
           <div className="relative overflow-hidden bg-white rounded-2xl lg:rounded-3xl">
             <div className="px-8 py-8">
               <div className="text-center">
-                <h1 className="text-2xl font-bold text-gray-900">Sign in for Snipcode</h1>
+                <h1 className="text-2xl font-bold text-gray-900">Sign in to Snipcode</h1>
 
-                <div className="flex justify-between">
-                  <Button className="w-[45%]" color="white-gray">
+                <div className="grid grid-cols-2 mt-8 gap-4">
+                  <Button variant="secondary">
                     <GithubIcon />
                     <span className="ml-4">GitHub</span>
                   </Button>
 
-                  <Button className="w-[45%]" color="white-gray">
+                  <Button variant="secondary">
                     <GoogleIcon />
                     <span className="ml-4">Google</span>
                   </Button>
@@ -84,13 +85,14 @@ export const SignInContainer = () => {
 
               <FormProvider {...formMethods}>
                 <form className="mt-8" onSubmit={formMethods.handleSubmit(handleLogin)}>
-                  {loginError && <Alert message={loginError} type="error" />}
+                  {loginError ? <Alert message={loginError} type="destructive" /> : null}
 
                   <TextInput label="Email" name="email" placeholder="teco@email.com" type="email" />
 
                   <TextInput label="Password" name="password" type="password" />
 
-                  <Button className="mt-10 py-3" isLoading={isLoading} type="submit">
+                  <Button className="mt-10 py-3 w-full" type="submit">
+                    {isLoading ? <LoaderIcon className="mr-2 h-4 w-4 animate-spin" /> : null}
                     Sign in
                   </Button>
                 </form>
@@ -99,7 +101,7 @@ export const SignInContainer = () => {
               <p className="mt-5 text-base font-normal text-center text-gray-900">
                 Don&apos;t have an account?{' '}
                 <Link className="font-bold rounded hover:underline" href="/signup" title="Sign in">
-                  Create an account now
+                  Sign up now
                 </Link>
               </p>
             </div>
diff --git a/apps/web/src/app/(public)/signup/container.tsx b/apps/web/src/app/(public)/signup/container.tsx
index 3af9480a..05bab592 100644
--- a/apps/web/src/app/(public)/signup/container.tsx
+++ b/apps/web/src/app/(public)/signup/container.tsx
@@ -1,17 +1,18 @@
 'use client';
 
 import { yupResolver } from '@hookform/resolvers/yup';
-import { Alert } from '@snipcode/front/components/alert';
-import { Link } from '@snipcode/front/components/link';
-import { Button } from '@snipcode/front/forms/button';
-import { TextInput } from '@snipcode/front/forms/text-input';
-import { GithubIcon, GoogleIcon } from '@snipcode/front/icons';
-import { useSignupUser } from '@snipcode/front/services';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import * as yup from 'yup';
 
+import { Alert } from '@snipcode/front/components/alert';
+import { Link } from '@snipcode/front/components/link';
+import { Button } from '@snipcode/front/components/ui/button';
+import { TextInput } from '@snipcode/front/forms/text-input';
+import { GithubIcon, GoogleIcon, LoaderIcon } from '@snipcode/front/icons';
+import { useSignupUser } from '@snipcode/front/services';
+
 import { FORM_ERRORS } from '@/lib/constants';
 
 const MIN_PASSWORD_LENGTH = 8;
@@ -41,8 +42,6 @@ export const SignupContainer = () => {
   });
 
   const handleSignup = async (values: FormValues) => {
-    console.log(values);
-
     setSignupError(null);
 
     await signupUser({
@@ -77,15 +76,15 @@ export const SignupContainer = () => {
           <div className="relative overflow-hidden bg-white rounded-2xl lg:rounded-3xl">
             <div className="px-8 py-8">
               <div className="text-center">
-                <h1 className="text-2xl font-bold text-gray-900 font-pj">Sign up for Snipcode</h1>
+                <h1 className="text-2xl font-bold text-gray-900 font-pj">Sign up to Snipcode</h1>
 
-                <div className="flex justify-between">
-                  <Button className="w-[47%]" color="white-gray">
+                <div className="grid grid-cols-2 mt-8 gap-4">
+                  <Button variant="secondary">
                     <GithubIcon />
                     <span className="ml-4">GitHub</span>
                   </Button>
 
-                  <Button className="w-[47%]" color="white-gray">
+                  <Button variant="secondary">
                     <GoogleIcon />
                     <span className="ml-4">Google</span>
                   </Button>
@@ -96,7 +95,7 @@ export const SignupContainer = () => {
 
               <FormProvider {...formMethods}>
                 <form className="mt-8" onSubmit={formMethods.handleSubmit(handleSignup)}>
-                  {signupError && <Alert message={signupError} type="error" />}
+                  {signupError ? <Alert message={signupError} type="destructive" /> : null}
 
                   <TextInput label="Name" name="name" placeholder="John Doe" type="text" />
 
@@ -116,7 +115,8 @@ export const SignupContainer = () => {
                     type="password"
                   />
 
-                  <Button className="mt-10 py-3" isLoading={isLoading} type="submit">
+                  <Button className="mt-10 py-3 w-full" type="submit">
+                    {isLoading ? <LoaderIcon className="mr-2 h-4 w-4 animate-spin" /> : null}
                     Sign up
                   </Button>
                 </form>
diff --git a/apps/web/src/components/common/page-not-found.tsx b/apps/web/src/components/common/page-not-found.tsx
index fdc9271f..8c94c158 100644
--- a/apps/web/src/components/common/page-not-found.tsx
+++ b/apps/web/src/components/common/page-not-found.tsx
@@ -1,6 +1,7 @@
-import { LogoIcon } from '@snipcode/front/icons';
 import Link from 'next/link';
 
+import { LogoIcon } from '@snipcode/front/icons';
+
 export const PageNotFound = () => {
   return (
     <div className="h-screen pt-16 pb-12 flex flex-col">
diff --git a/apps/web/src/components/home/feature-section.tsx b/apps/web/src/components/home/feature-section.tsx
index 297fbef1..a99d4468 100644
--- a/apps/web/src/components/home/feature-section.tsx
+++ b/apps/web/src/components/home/feature-section.tsx
@@ -1,46 +1,46 @@
 import {
-  CollectionIcon,
-  DocumentSearchIcon,
-  EmbedIcon,
-  ExtensionIcon,
-  ImportIcon,
-  ShareIcon,
+  CloudDownloadIcon,
+  FileSearch2Icon,
+  GalleryVerticalEndIcon,
+  InboxIcon,
+  Share2Icon,
+  SlidersVerticalIcon,
 } from '@snipcode/front/icons';
 
 const features = [
   {
     description: 'Organize related code snippets into folders the same way you manage your file on the computer.',
-    icon: <CollectionIcon />,
+    icon: <GalleryVerticalEndIcon size={20} />,
     id: 'organize-snippets',
     title: 'Organize your snippets',
   },
   {
     description: 'Quickly find a code snippet in your whole directory and access it.',
-    icon: <DocumentSearchIcon />,
+    icon: <FileSearch2Icon size={20} />,
     id: 'find-snippets',
     title: 'Find your snippets',
   },
   {
     description: 'You can easily import all your code snippets from GitHub Gist to keep them all in one place.',
-    icon: <ImportIcon />,
+    icon: <CloudDownloadIcon size={20} />,
     id: 'import-snippets',
     title: 'Import from GitHub Gist',
   },
   {
     description: 'Share your code snippets with other developers. Give them the ability to interact and improve.',
-    icon: <ShareIcon />,
+    icon: <Share2Icon size={20} />,
     id: 'share-snippets',
     title: 'Share your snippets',
   },
   {
     description: 'For content creators, you can embed your snippet on a blog post or a post on social networks.',
-    icon: <EmbedIcon />,
+    icon: <InboxIcon size={20} />,
     id: 'embed-snippets',
     title: 'Embed your snippets',
   },
   {
     description: 'Easily capture and save code snippets while you are browsing on the web.',
-    icon: <ExtensionIcon />,
+    icon: <SlidersVerticalIcon size={20} />,
     id: 'browser-extensions',
     title: 'Browser extensions',
   },
@@ -60,7 +60,7 @@ export const FeatureSection = () => {
         <div className="grid grid-cols-1 mt-12 gap-x-6 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:grid-cols-3 lg:gap-x-8 lg:gap-y-12">
           {features.map((feature) => (
             <div className="p-10 bg-white shadow-lg rounded-xl dark:bg-opacity-5" key={feature.id}>
-              <div>{feature.icon}</div>
+              <div className="h-8 w-8 bg-gray-200 rounded-full flex justify-center items-center">{feature.icon}</div>
               <div className="mt-4">
                 <h3 className="text-lg font-medium dark:text-white">{feature.title}</h3>
                 <p className="mt-2 text-base font-medium text-gray-500 dark:text-gray-400">{feature.description}</p>
diff --git a/apps/web/src/components/home/newsletter/newsletter-alert.tsx b/apps/web/src/components/home/newsletter/newsletter-alert.tsx
index fe9b2b4c..3af7ecc8 100644
--- a/apps/web/src/components/home/newsletter/newsletter-alert.tsx
+++ b/apps/web/src/components/home/newsletter/newsletter-alert.tsx
@@ -1,7 +1,16 @@
-import { Dialog, Transition } from '@headlessui/react';
-import { CheckIcon, CrossIcon } from '@snipcode/front/icons';
 import classNames from 'classnames';
-import React, { Fragment, useState } from 'react';
+import React from 'react';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@snipcode/front/components/ui/alert-dialog';
+import { CircleCheckIcon, CircleXIcon } from '@snipcode/front/icons';
 
 type Props = {
   handleClose: () => void;
@@ -17,7 +26,7 @@ type Content = {
 const alertContentMap: Record<Props['state'], Content> = {
   failure: {
     description: <span>An error occurred while performing the subscription</span>,
-    icon: <CrossIcon />,
+    icon: <CircleXIcon size={48} />,
     title: 'Subscription failure',
   },
   success: {
@@ -28,14 +37,12 @@ const alertContentMap: Record<Props['state'], Content> = {
         You will receive updates on the application progress.
       </span>
     ),
-    icon: <CheckIcon />,
+    icon: <CircleCheckIcon size={48} />,
     title: 'Subscription successful',
   },
 };
 
 export const NewsletterAlert = ({ handleClose, state = 'failure' }: Props) => {
-  const [isOpen, setIsOpen] = useState(true);
-
   const titleClasses = classNames('flex flex-col items-center text-2xl mb-6', {
     'text-green-600': state === 'success',
     'text-red-600': state === 'failure',
@@ -45,59 +52,27 @@ export const NewsletterAlert = ({ handleClose, state = 'failure' }: Props) => {
 
   const closeModal = () => {
     handleClose();
-    setIsOpen(false);
   };
 
   return (
-    <Transition as={Fragment} show={isOpen} appear>
-      <Dialog as="div" className="relative z-10" onClose={closeModal}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-black bg-opacity-25" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 scale-95"
-              enterTo="opacity-100 scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 scale-100"
-              leaveTo="opacity-0 scale-95"
-            >
-              <Dialog.Panel className="w-full max-w-lg transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
-                <div className="mt-2">
-                  <div className={titleClasses}>
-                    {content.icon}
-                    <h3 className="text-lg font-medium leading-6 text-gray-900">{content.title}</h3>
-                  </div>
-
-                  <p className="text-sm text-gray-500 text-center">{content.description}</p>
-                </div>
-
-                <div className="mt-8 flex justify-center">
-                  <button
-                    className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                    type="button"
-                    onClick={closeModal}
-                  >
-                    Got it!
-                  </button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition>
+    <AlertDialog defaultOpen>
+      <AlertDialogContent onEscapeKeyDown={closeModal}>
+        <AlertDialogHeader>
+          <AlertDialogTitle className={titleClasses}>
+            {content.icon}
+            {content.title}
+          </AlertDialogTitle>
+          <AlertDialogDescription className="text-center">{content.description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter className="flex sm:justify-center mt-4">
+          <AlertDialogAction
+            className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+            onClick={closeModal}
+          >
+            Got it!
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 };
diff --git a/apps/web/src/components/home/newsletter/newsletter-form.test.tsx b/apps/web/src/components/home/newsletter/newsletter-form.test.tsx
index e1b827db..9479aadd 100644
--- a/apps/web/src/components/home/newsletter/newsletter-form.test.tsx
+++ b/apps/web/src/components/home/newsletter/newsletter-form.test.tsx
@@ -1,9 +1,10 @@
 import { MockedProvider } from '@apollo/client/testing';
-import { subscribeNewsletterMutation } from '@snipcode/front/graphql';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React, { act } from 'react';
 
+import { subscribeNewsletterMutation } from '@snipcode/front/graphql';
+
 import { NewsletterForm } from './newsletter-form';
 
 describe('Newsletter Form', () => {
@@ -42,7 +43,7 @@ describe('Newsletter Form', () => {
     });
 
     await waitFor(() => {
-      const dialog = screen.getByRole('dialog');
+      const dialog = screen.getByRole('alertdialog');
 
       expect(dialog).toBeInTheDocument();
 
@@ -85,7 +86,7 @@ describe('Newsletter Form', () => {
     });
 
     await waitFor(() => {
-      const dialog = screen.getByRole('dialog');
+      const dialog = screen.getByRole('alertdialog');
 
       expect(dialog).toBeInTheDocument();
 
diff --git a/apps/web/src/components/home/newsletter/newsletter-form.tsx b/apps/web/src/components/home/newsletter/newsletter-form.tsx
index 6c77ffb8..fb66ade5 100644
--- a/apps/web/src/components/home/newsletter/newsletter-form.tsx
+++ b/apps/web/src/components/home/newsletter/newsletter-form.tsx
@@ -1,9 +1,10 @@
 'use client';
 
-import { SpinnerIcon } from '@snipcode/front/icons';
-import { useSubscribeToNewsletter } from '@snipcode/front/services';
 import { useState } from 'react';
 
+import { LoaderIcon } from '@snipcode/front/icons';
+import { useSubscribeToNewsletter } from '@snipcode/front/services';
+
 import { useBooleanState } from '@/hooks/use-boolean-state';
 import { REGEX_EMAIL } from '@/lib/constants';
 
@@ -41,7 +42,7 @@ export const NewsletterForm = () => {
 
   return (
     <div className="relative">
-      {isAlertOpened && <NewsletterAlert handleClose={closeAlert} state={subscriptionState ?? 'success'} />}
+      {isAlertOpened ? <NewsletterAlert handleClose={closeAlert} state={subscriptionState ?? 'success'} /> : null}
       <input
         className="block w-full px-5 py-6 text-base font-normal text-black placeholder-gray-600 bg-white border border-gray-300 rounded-xl focus:border-black focus:ring-1 focus:ring-black font-pj focus:outline-none"
         disabled={isLoading}
@@ -58,7 +59,7 @@ export const NewsletterForm = () => {
           className="inline-flex items-center justify-center w-full px-8 py-4 text-base font-bold text-white transition-all duration-200 bg-gray-900 border border-transparent sm:w-auto sm:py-3 hover:bg-opacity-90 rounded-xl"
           onClick={handleSubscribe}
         >
-          {isLoading && <SpinnerIcon />}
+          {isLoading ? <LoaderIcon className="mr-2 animate-spin" /> : null}
           Get updates
         </button>
       </div>
diff --git a/apps/web/src/components/snippets/public-snippet.tsx b/apps/web/src/components/snippets/public-snippet.tsx
index b658f544..c05738ec 100644
--- a/apps/web/src/components/snippets/public-snippet.tsx
+++ b/apps/web/src/components/snippets/public-snippet.tsx
@@ -1,6 +1,6 @@
 import { Link } from '@snipcode/front/components/link';
 import { UserAvatar } from '@snipcode/front/components/user-avatar';
-import { PublicSnippetResult } from '@snipcode/front/typings/queries';
+import { PublicSnippetResult } from '@snipcode/front/types/queries';
 
 type Props = {
   snippet: PublicSnippetResult['items'][number];
@@ -12,7 +12,7 @@ export const PublicSnippet = ({ snippet }: Props) => {
   const htmlCode = snippet.content;
 
   return (
-    <div className="rounded-md border border-gray-300 shadow-sm rounded p-3 bg-gray-50">
+    <div className="rounded border border-gray-300 shadow-sm p-3 bg-gray-50">
       <div className="flex justify-between w-full">
         <div className="flex items-center">
           <div>
diff --git a/apps/web/src/hooks/authentication/use-auth.ts b/apps/web/src/hooks/authentication/use-auth.ts
index 3f5731d7..5f4d7c72 100644
--- a/apps/web/src/hooks/authentication/use-auth.ts
+++ b/apps/web/src/hooks/authentication/use-auth.ts
@@ -1,9 +1,10 @@
 import { useApolloClient } from '@apollo/client';
-import { useAuthenticatedUser } from '@snipcode/front/services';
-import { addDayToDate } from '@snipcode/utils';
 import { useRouter } from 'next/navigation';
 import { useCookies } from 'react-cookie';
 
+import { useAuthenticatedUser } from '@snipcode/front/services';
+import { addDayToDate } from '@snipcode/utils';
+
 import { AUTH_COOKIE_NAME } from '@/lib/constants';
 
 export const useAuth = () => {
diff --git a/apps/web/src/hooks/use-folder-directory.ts b/apps/web/src/hooks/use-folder-directory.ts
index 7d856bb7..46ac9b34 100644
--- a/apps/web/src/hooks/use-folder-directory.ts
+++ b/apps/web/src/hooks/use-folder-directory.ts
@@ -1,6 +1,7 @@
-import { useAuthenticatedUser, useLazyListDirectory } from '@snipcode/front/services';
 import { useRouter } from 'next/navigation';
 
+import { useAuthenticatedUser, useLazyListDirectory } from '@snipcode/front/services';
+
 export const useFolderDirectory = () => {
   const router = useRouter();
   const { data: user } = useAuthenticatedUser();
diff --git a/apps/web/src/lib/constants.ts b/apps/web/src/lib/constants.ts
index 7538296e..fa8a5214 100644
--- a/apps/web/src/lib/constants.ts
+++ b/apps/web/src/lib/constants.ts
@@ -14,3 +14,5 @@ export const FORM_ERRORS = {
 export const BAD_LOGIN_MESSAGE = 'The email or password is invalid.';
 
 export const APP_URL = process.env.NEXT_PUBLIC_APP_URL;
+export const SHAREABLE_HOST_URL = 'https://snipcode.dev';
+export const EMBEDDABLE_HOST_URL = 'https://api.snipcode.dev';
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
new file mode 100644
index 00000000..c8e82455
--- /dev/null
+++ b/apps/web/src/lib/utils.ts
@@ -0,0 +1,23 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs));
+};
+
+export const generateInitials = (name?: string | null) => {
+  if (!name) {
+    return 'JD';
+  }
+
+  const nameArray = name.trim().split(' ');
+
+  const [firstName, secondName] = nameArray;
+
+  const initials = [firstName, secondName]
+    .filter(Boolean)
+    .map((name) => name.charAt(0))
+    .join('');
+
+  return initials.toUpperCase();
+};
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
deleted file mode 100644
index 25234a6d..00000000
--- a/apps/web/tailwind.config.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const defaultTheme = require('tailwindcss/defaultTheme');
-
-module.exports = {
-  content: [
-    './src/app/**/*.{js,ts,jsx,tsx}',
-    './src/components/**/*.{js,ts,jsx,tsx}',
-    '../../packages/front/**/*.{js,ts,jsx,tsx}',
-  ],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      animation: {
-        'spin-fast': 'spin .5s linear infinite',
-      },
-      maxHeight: {
-        0: '0',
-        xl: '36rem',
-      },
-      fontFamily: {
-        sans: ['Inter', ...defaultTheme.fontFamily.sans],
-      },
-    },
-    screens: {
-      xs: { max: '639px' },
-      ...defaultTheme.screens,
-    },
-  },
-  plugins: [require('@tailwindcss/forms')],
-};
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
new file mode 100644
index 00000000..93221946
--- /dev/null
+++ b/apps/web/tailwind.config.ts
@@ -0,0 +1,52 @@
+import type { Config } from 'tailwindcss';
+import defaultTheme from 'tailwindcss/defaultTheme';
+
+const config = {
+  content: [
+    './src/app/**/*.{js,ts,jsx,tsx}',
+    './src/components/**/*.{js,ts,jsx,tsx}',
+    '../../packages/front/**/*.{js,ts,jsx,tsx}',
+  ],
+  darkMode: ['class'],
+  prefix: '',
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      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',
+        'spin-fast': 'spin .5s linear infinite',
+      },
+      maxHeight: {
+        0: '0',
+        xl: '36rem',
+      },
+      fontFamily: {
+        sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans],
+      },
+    },
+    screens: {
+      xs: { max: '639px' },
+      ...defaultTheme.screens,
+    },
+  },
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/forms')],
+} satisfies Config;
+
+export default config;
diff --git a/packages/domain/.gitignore b/packages/domain/.gitignore
index bcd7cae8..c456d557 100644
--- a/packages/domain/.gitignore
+++ b/packages/domain/.gitignore
@@ -3,3 +3,4 @@ dist
 .env
 .env.local
 coverage
+dbdata
diff --git a/packages/domain/package.json b/packages/domain/package.json
index a7a673de..6b467c20 100644
--- a/packages/domain/package.json
+++ b/packages/domain/package.json
@@ -12,7 +12,7 @@
     "clean": "rm -rf .turbo dist coverage",
     "lint": "eslint --fix",
     "env": "dotenv -e .env.local",
-    "db:local": "docker run -d --rm -e MYSQL_ROOT_PASSWORD=secret -e MYSQL_DATABASE=snipcode --name snipcode-local-db -p 3311:3306 mysql:8.0.39",
+    "db:local": "docker run -d --rm -e MYSQL_ROOT_PASSWORD=secret -e MYSQL_DATABASE=snipcode -v ./dbdata/snipcode:/var/lib/mysql --name snipcode-local-db -p 3311:3306 mysql:8.0.39",
     "db:local:stop": "docker kill snipcode-local-db && docker container prune -f",
     "db:generate": "yarn env -- prisma generate",
     "db:migrate": "yarn env -- prisma migrate dev",
diff --git a/packages/embed/src/renderer/content/html-generator.ts b/packages/embed/src/renderer/content/html-generator.ts
index 76195fe0..557b2d28 100644
--- a/packages/embed/src/renderer/content/html-generator.ts
+++ b/packages/embed/src/renderer/content/html-generator.ts
@@ -1,6 +1,7 @@
-import { Snippet } from '@snipcode/domain';
 import { Lang } from 'shiki';
 
+import { Snippet } from '@snipcode/domain';
+
 import { generateLineHighlightOptions, parseHTMLSnippetCode } from './utils';
 import { Shiki } from '../types';
 
diff --git a/packages/embed/src/server/index.ts b/packages/embed/src/server/index.ts
index f1d042fd..647dddce 100644
--- a/packages/embed/src/server/index.ts
+++ b/packages/embed/src/server/index.ts
@@ -1,10 +1,11 @@
 import http from 'http';
 import path from 'path';
 
-import { dbClient } from '@snipcode/domain';
 import dotenv from 'dotenv';
 import express from 'express';
 
+import { dbClient } from '@snipcode/domain';
+
 import { renderSnippetToHtml } from '../renderer';
 
 dotenv.config({ override: true });
diff --git a/packages/front/.eslintrc.js b/packages/front/.eslintrc.js
index ae010f6f..d8837d6d 100644
--- a/packages/front/.eslintrc.js
+++ b/packages/front/.eslintrc.js
@@ -6,7 +6,8 @@ module.exports = {
     "tailwind.config.js",
     "jest.config.ts",
     "generated.ts",
-    '.eslintrc.js'
+    '.eslintrc.js',
+    'tailwind.config.ts'
   ],
   "parserOptions": {
     "ecmaVersion": 2023,
diff --git a/packages/front/components.json b/packages/front/components.json
new file mode 100644
index 00000000..ac9fbc41
--- /dev/null
+++ b/packages/front/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "packages/front/components",
+    "utils": "lib/utils"
+  }
+}
diff --git a/packages/front/components/alert.tsx b/packages/front/components/alert.tsx
index 4d9b0c60..f1c8d1b7 100644
--- a/packages/front/components/alert.tsx
+++ b/packages/front/components/alert.tsx
@@ -1,34 +1,26 @@
-import { classNames } from '../utils/classnames';
+import { AlertCircle } from 'lucide-react';
 
-type AlertType = 'success' | 'error' | 'info';
+import { AlertDescription, Alert as AlertRoot, AlertTitle } from './ui/alert';
+
+type AlertType = 'destructive' | 'info' | 'success';
 
 type Props = {
   message: string;
-  title?: string;
   type?: AlertType;
 };
 
-const alertTypeMapToString: Record<AlertType, string> = {
-  error: 'Error',
+const alertTypeMap: Record<AlertType, string> = {
+  destructive: 'Error',
   info: 'Info',
   success: 'Success',
 };
 
-const alertStyleMap: Record<AlertType, string> = {
-  error: 'bg-red-200 border-red-600 text-red-600',
-  info: 'bg-blue-200 border-blue-600 text-blue-600',
-  success: 'bg-green-200 border-green-600 text-green-600',
-};
-
-const Alert = ({ message, title, type = 'info' }: Props) => {
-  const classes = classNames('border-l-4 p-4 mb-8', alertStyleMap[type]);
-
+export const Alert = ({ message, type = 'info' }: Props) => {
   return (
-    <div className={classes} role="alert">
-      <p className="font-bold">{title ?? alertTypeMapToString[type]}</p>
-      <p>{message}</p>
-    </div>
+    <AlertRoot variant={type} className="mb-8">
+      <AlertCircle className="h-4 w-4" />
+      <AlertTitle>{alertTypeMap[type]}</AlertTitle>
+      <AlertDescription>{message}</AlertDescription>
+    </AlertRoot>
   );
 };
-
-export { Alert };
diff --git a/packages/front/components/dialog/confirm-dialog.tsx b/packages/front/components/dialog/confirm-dialog.tsx
index 3967b93c..98a75407 100644
--- a/packages/front/components/dialog/confirm-dialog.tsx
+++ b/packages/front/components/dialog/confirm-dialog.tsx
@@ -1,7 +1,15 @@
-import { Description, Dialog, DialogPanel, DialogTitle } from '@headlessui/react';
-import { useRef } from 'react';
+import { Loader2 } from 'lucide-react';
 
-import { Button } from '../../forms/button';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '../ui/alert-dialog';
 
 type Props = {
   cancelText?: string;
@@ -22,45 +30,26 @@ const ConfirmDialog = ({
   onConfirmButtonClick,
   open,
 }: Props) => {
-  const cancelButtonRef = useRef<any>(null);
-
   return (
-    <Dialog
-      as="div"
-      static
-      className="fixed z-10 inset-0 overflow-y-auto"
-      initialFocus={cancelButtonRef}
-      open={open}
-      onClose={onCancelButtonClick}
-    >
-      <DialogPanel className="max-w-lg space-y-4 bg-white p-12">
-        <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-          <DialogTitle className="font-bold">Confirm Action</DialogTitle>
-          <Description>{messageText}</Description>
-
-          <div className="bg-gray-50 px-6 py-3 flex justify-end space-x-4">
-            <Button
-              className="w-auto mt-2"
-              color="white-gray"
-              type="button"
-              onClick={onCancelButtonClick}
-              ref={cancelButtonRef}
-            >
-              {cancelText}
-            </Button>
-            <Button
-              className="w-auto mt-2"
-              color="red"
-              type="button"
-              isLoading={isLoading}
-              onClick={onConfirmButtonClick}
-            >
-              {confirmText}
-            </Button>
-          </div>
-        </div>
-      </DialogPanel>
-    </Dialog>
+    <AlertDialog open={open}>
+      <AlertDialogContent onEscapeKeyDown={onCancelButtonClick}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Confirm Action</AlertDialogTitle>
+          <AlertDialogDescription>{messageText}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter className="mt-4">
+          <AlertDialogCancel onClick={onCancelButtonClick}>{cancelText}</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={onConfirmButtonClick}
+            disabled={isLoading}
+            className="bg-red-600 hover:bg-red-700"
+          >
+            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            {confirmText}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 };
 
diff --git a/packages/front/components/directory/breadcrumb.tsx b/packages/front/components/directory/breadcrumb.tsx
index 5efd3a1a..5e2a08a2 100644
--- a/packages/front/components/directory/breadcrumb.tsx
+++ b/packages/front/components/directory/breadcrumb.tsx
@@ -1,7 +1,7 @@
-import { ChevronRightIcon, HomeIcon } from '@heroicons/react/20/solid';
+import { ChevronRightIcon, HomeIcon } from 'lucide-react';
 
-import { FilePath } from '../../typings/components';
-import { classNames } from '../../utils/classnames';
+import { classNames } from '../../lib/classnames';
+import { FilePath } from '../../types/components';
 
 type Props = {
   current: string;
@@ -37,7 +37,7 @@ const BreadcrumbItem = ({ isCurrent, isHome, label }: BreadcrumbItemProps) => {
   );
 };
 
-const BreadCrumb = ({ current, onPathClick, paths, rootFolderId }: Props) => {
+export const BreadCrumb = ({ current, onPathClick, paths, rootFolderId }: Props) => {
   const onItemClick = async (folderId: string, path?: string) => {
     if (!path || current === folderId) {
       return;
@@ -50,7 +50,7 @@ const BreadCrumb = ({ current, onPathClick, paths, rootFolderId }: Props) => {
     <nav className="flex" aria-label="Breadcrumb">
       <ol role="list" className="flex items-center space-x-4">
         <li onClick={() => onItemClick(rootFolderId, '/app/home')}>
-          <BreadcrumbItem isCurrent={current === rootFolderId} isHome label="Home" />
+          <BreadcrumbItem isCurrent={current === rootFolderId} label="Home" isHome={true} />
         </li>
         {paths.map((path) => (
           <li key={path.id} onClick={() => onItemClick(path.id, `/app/folders/${path.id}`)}>
@@ -61,5 +61,3 @@ const BreadCrumb = ({ current, onPathClick, paths, rootFolderId }: Props) => {
     </nav>
   );
 };
-
-export { BreadCrumb };
diff --git a/packages/front/components/directory/folders/empty.tsx b/packages/front/components/directory/folders/empty.tsx
deleted file mode 100644
index 53c24825..00000000
--- a/packages/front/components/directory/folders/empty.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { PlusIcon } from '@heroicons/react/20/solid';
-
-import { Button } from '../../../forms/button';
-
-type Props = {
-  handleCreateFolder: () => void;
-  handleCreateSnippet: () => void;
-};
-
-const EmptyFolder = ({ handleCreateFolder, handleCreateSnippet }: Props) => {
-  return (
-    <div className="text-center">
-      <svg
-        className="mx-auto h-12 w-12 text-gray-400"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-        aria-hidden="true"
-      >
-        <path
-          vectorEffect="non-scaling-stroke"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
-        />
-      </svg>
-      <h3 className="mt-2 text-sm font-medium text-gray-900">No Files</h3>
-      <p className="mt-1 text-sm text-gray-500">Get started by adding a folder or snippet.</p>
-      <div className="mt-6 flex flex-col items-center justify-center">
-        <Button className="mt-0 w-2/5" color="white-gray" onClick={handleCreateSnippet}>
-          <PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
-          New Snippet
-        </Button>
-        <Button className="mt-4 w-2/5" onClick={handleCreateFolder}>
-          <PlusIcon className="-ml-1 mr-2" aria-hidden="true" />
-          New Folder
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export { EmptyFolder };
diff --git a/packages/front/components/directory/folders/folder-empty.tsx b/packages/front/components/directory/folders/folder-empty.tsx
new file mode 100644
index 00000000..5998b71c
--- /dev/null
+++ b/packages/front/components/directory/folders/folder-empty.tsx
@@ -0,0 +1,28 @@
+import { FolderPlusIcon, PlusIcon } from 'lucide-react';
+
+import { Button } from '../../ui/button';
+
+type Props = {
+  handleCreateFolder: () => void;
+  handleCreateSnippet: () => void;
+};
+
+export const EmptyFolder = ({ handleCreateFolder, handleCreateSnippet }: Props) => {
+  return (
+    <div className="text-center">
+      <FolderPlusIcon size={32} className="mx-auto text-gray-400" />
+      <h3 className="mt-2 text-sm font-medium text-gray-900">No Files</h3>
+      <p className="mt-1 text-sm text-gray-500">Get started by adding a folder or snippet.</p>
+      <div className="mt-6 flex flex-col items-center justify-center">
+        <Button className="mt-0 w-2/5" onClick={handleCreateSnippet}>
+          <PlusIcon className="-ml-1 mr-2" aria-hidden="true" />
+          New Snippet
+        </Button>
+        <Button variant="secondary" className="mt-4 w-2/5" onClick={handleCreateFolder}>
+          <PlusIcon className="-ml-1 mr-2" aria-hidden="true" />
+          New Folder
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/front/components/directory/folders/folder-form.tsx b/packages/front/components/directory/folders/folder-form.tsx
new file mode 100644
index 00000000..2e39abb9
--- /dev/null
+++ b/packages/front/components/directory/folders/folder-form.tsx
@@ -0,0 +1,123 @@
+'use client';
+
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Loader2 } from 'lucide-react';
+import { FormProvider, useForm } from 'react-hook-form';
+import * as yup from 'yup';
+
+import { TextInput } from '../../../forms/text-input';
+import { useToast } from '../../../hooks/use-toast';
+import { FOLDER_NAME_REGEX, FORM_ERRORS } from '../../../lib/constants';
+import { useCreateFolder } from '../../../services/folders/create-folder';
+import { useUpdateFolder } from '../../../services/folders/update-folder';
+import { FolderItem } from '../../../types/components';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '../../ui/alert-dialog';
+
+type Props = {
+  closeModal: () => void;
+  currentFolder: FolderItem | null;
+  parentFolderId: string;
+};
+
+const MIN_NAME_LENGTH = 1;
+const MAX_NAME_LENGTH = 100;
+const formSchema = yup.object().shape({
+  name: yup
+    .string()
+    .required(FORM_ERRORS.fieldRequired)
+    .min(MIN_NAME_LENGTH, FORM_ERRORS.minCharacters(MIN_NAME_LENGTH))
+    .max(MAX_NAME_LENGTH, FORM_ERRORS.minCharacters(MAX_NAME_LENGTH))
+    .matches(FOLDER_NAME_REGEX, { excludeEmptyString: false, message: FORM_ERRORS.folderNameInvalid }),
+});
+
+type FormValues = { name: string };
+
+export const FolderFormContainer = ({ closeModal, currentFolder, parentFolderId }: Props) => {
+  const { toastError, toastSuccess } = useToast();
+  const { createFolder, isLoading: isCreateFolderLoading } = useCreateFolder();
+  const { isLoading: isUpdateFolderLoading, updateFolder } = useUpdateFolder(parentFolderId);
+
+  const isLoading = isCreateFolderLoading || isUpdateFolderLoading;
+
+  const formMethods = useForm<FormValues>({
+    defaultValues: {
+      name: currentFolder?.name,
+    },
+    resolver: yupResolver(formSchema),
+  });
+
+  const submitCreateFolder = async (values: FormValues) => {
+    await createFolder({
+      input: {
+        name: values.name,
+        parentId: parentFolderId,
+      },
+      onError: (message) => {
+        toastError(`Failed to create: ${message}`);
+      },
+      onSuccess: () => {
+        toastSuccess('Folder created!');
+        closeModal();
+      },
+    });
+  };
+
+  const submitUpdateFolder = async (values: FormValues) => {
+    if (!currentFolder || currentFolder.name === values.name) {
+      return;
+    }
+
+    await updateFolder({
+      id: currentFolder.id,
+      input: {
+        name: values.name,
+      },
+      onError: (message) => {
+        toastError(`Failed to update: ${message}`);
+      },
+      onSuccess: () => {
+        toastSuccess('Folder updated!');
+
+        closeModal();
+      },
+    });
+  };
+
+  const handleSubmit = async (values: FormValues) => {
+    if (currentFolder) {
+      return submitUpdateFolder(values);
+    }
+
+    return submitCreateFolder(values);
+  };
+
+  return (
+    <AlertDialog defaultOpen>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{currentFolder ? 'Rename folder' : 'Create a new folder'}</AlertDialogTitle>
+          <AlertDialogDescription />
+          <FormProvider {...formMethods}>
+            <TextInput className="mt-6 w-full" type="text" name="name" />
+          </FormProvider>
+        </AlertDialogHeader>
+        <AlertDialogFooter className="mt-4">
+          <AlertDialogCancel onClick={closeModal}>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={formMethods.handleSubmit(handleSubmit)} disabled={isLoading}>
+            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            {currentFolder ? 'Update' : 'Create'}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
diff --git a/packages/front/components/directory/folders/folder.tsx b/packages/front/components/directory/folders/folder.tsx
index 4a09039d..0f1f2484 100644
--- a/packages/front/components/directory/folders/folder.tsx
+++ b/packages/front/components/directory/folders/folder.tsx
@@ -1,8 +1,8 @@
-import { FolderIcon, FolderOpenIcon, PencilIcon, TrashIcon } from '@heroicons/react/20/solid';
+import { FolderIcon, FolderOpenIcon, PencilIcon, TrashIcon } from 'lucide-react';
 
-import { useHover } from '../../../hooks/use-hover';
-import { FolderItem, MenuItemAction } from '../../../typings/components';
-import { displayItemLabel, truncate } from '../../../utils/text';
+// import { useHover } from '../../../hooks/use-hover';
+import { displayItemLabel, truncate } from '../../../lib/text';
+import { FolderItem, MenuItemAction } from '../../../types/components';
 import { DotMenu } from '../../menus/dot-menu';
 
 type Props = {
@@ -14,8 +14,8 @@ type Props = {
 
 const FOLDER_NAME_MAX_LENGTH = 20;
 
-const Folder = ({ item, onDeleteClick, onNavigate, onRenameClick }: Props) => {
-  const [hoverRef, isHovered] = useHover<HTMLDivElement>();
+export const Folder = ({ item, onDeleteClick, onNavigate, onRenameClick }: Props) => {
+  /*const [hoverRef, isHovered] = useHover<HTMLDivElement>();*/
 
   const handleDoubleClick = () => {
     onNavigate(item.id);
@@ -23,17 +23,17 @@ const Folder = ({ item, onDeleteClick, onNavigate, onRenameClick }: Props) => {
 
   const menuActions: MenuItemAction[] = [
     {
-      icon: <FolderOpenIcon className="mr-3 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />,
+      icon: <FolderOpenIcon size={16} className="mr-3 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />,
       label: 'Open',
       onClick: handleDoubleClick,
     },
     {
-      icon: <PencilIcon className="mr-3 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />,
+      icon: <PencilIcon size={16} className="mr-3 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />,
       label: 'Rename',
       onClick: () => onRenameClick(item),
     },
     {
-      icon: <TrashIcon className="mr-3 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />,
+      icon: <TrashIcon size={16} className="mr-3 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />,
       label: 'Delete',
       onClick: () => onDeleteClick(item),
     },
@@ -44,12 +44,13 @@ const Folder = ({ item, onDeleteClick, onNavigate, onRenameClick }: Props) => {
       className="relative block pb-4 px-4 border border-gray-100 shadow-sm rounded-md cursor-default bg-white hover:bg-gray-100 transition"
       onDoubleClick={handleDoubleClick}
       title={item.name}
-      ref={hoverRef}
+      // ref={hoverRef}
     >
       <div className="mt-4 text-gray-500">
         <div className="flex justify-between items-center">
           <FolderIcon className="h-6 w-6" />
-          {isHovered && <DotMenu data={menuActions} />}
+          <DotMenu data={menuActions} />
+          {/*{isHovered && <DotMenu data={menuActions} />}*/}
         </div>
         <div className="mt-4 text-base font-bold text-gray-900">{truncate(item.name, FOLDER_NAME_MAX_LENGTH)}</div>
         <p className="hidden mt-2 text-sm sm:block">{displayItemLabel(item.fileCount, 'item')}</p>
@@ -57,5 +58,3 @@ const Folder = ({ item, onDeleteClick, onNavigate, onRenameClick }: Props) => {
     </div>
   );
 };
-
-export { Folder };
diff --git a/packages/front/components/directory/folders/form/edit-folder.tsx b/packages/front/components/directory/folders/form/edit-folder.tsx
deleted file mode 100644
index 661294a4..00000000
--- a/packages/front/components/directory/folders/form/edit-folder.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import { Dialog, Transition } from '@headlessui/react';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { Fragment, useRef } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
-import * as yup from 'yup';
-
-import { Button } from '../../../../forms/button';
-import { TextInput } from '../../../../forms/text-input';
-import { useCreateFolder } from '../../../../services/folders/create-folder';
-import { useUpdateFolder } from '../../../../services/folders/update-folder';
-import { FolderItem } from '../../../../typings/components';
-import { FOLDER_NAME_REGEX, FORM_ERRORS } from '../../../../utils/constants';
-import { useToast } from '../../../toast/provider';
-
-type Props = {
-  closeModal: () => void;
-  currentFolder: FolderItem | null;
-  parentFolderId: string;
-};
-
-const MIN_NAME_LENGTH = 1;
-const MAX_NAME_LENGTH = 100;
-const formSchema = yup.object().shape({
-  name: yup
-    .string()
-    .required(FORM_ERRORS.fieldRequired)
-    .min(MIN_NAME_LENGTH, FORM_ERRORS.minCharacters(MIN_NAME_LENGTH))
-    .max(MAX_NAME_LENGTH, FORM_ERRORS.minCharacters(MAX_NAME_LENGTH))
-    .matches(FOLDER_NAME_REGEX, { excludeEmptyString: false, message: FORM_ERRORS.folderNameInvalid }),
-});
-
-type FormValues = { name: string };
-
-const EditFolderContainer = ({ closeModal, currentFolder, parentFolderId }: Props) => {
-  const cancelButtonRef = useRef(null);
-  const { toastError, toastSuccess } = useToast();
-  const { createFolder, isLoading: isCreateFolderLoading } = useCreateFolder();
-  const { isLoading: isUpdateFolderLoading, updateFolder } = useUpdateFolder(parentFolderId);
-
-  const isLoading = isCreateFolderLoading || isUpdateFolderLoading;
-
-  const formMethods = useForm<FormValues>({
-    defaultValues: {
-      name: currentFolder?.name,
-    },
-    resolver: yupResolver(formSchema),
-  });
-
-  const submitCreateFolder = async (values: FormValues) => {
-    await createFolder({
-      input: {
-        name: values.name,
-        parentId: parentFolderId,
-      },
-      onError: (message) => {
-        toastError({ message: `Failed to create: ${message}` });
-      },
-      onSuccess: () => {
-        toastSuccess({ message: 'Folder created!' });
-        closeModal();
-      },
-    });
-  };
-
-  const submitUpdateFolder = async (values: FormValues) => {
-    if (!currentFolder || currentFolder.name === values.name) {
-      return;
-    }
-
-    await updateFolder({
-      id: currentFolder.id,
-      input: {
-        name: values.name,
-      },
-      onError: (message) => {
-        toastError({ message: `Failed to update: ${message}` });
-      },
-      onSuccess: () => {
-        toastSuccess({ message: 'Folder updated!' });
-
-        closeModal();
-      },
-    });
-  };
-
-  const handleSubmit = async (values: FormValues) => {
-    if (currentFolder) {
-      return submitUpdateFolder(values);
-    }
-
-    return submitCreateFolder(values);
-  };
-
-  return (
-    <Transition.Root show as={Fragment}>
-      <Dialog as="div" className="relative z-10" initialFocus={cancelButtonRef} onClose={closeModal}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed z-10 inset-0 overflow-y-auto">
-          <div className="flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full sm:p-6">
-                <div className="sm:flex sm:items-start">
-                  <div className="mt-3 text-center sm:mt-0 sm:text-left w-full">
-                    <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
-                      {currentFolder ? 'Rename folder' : 'Create a new folder'}
-                    </Dialog.Title>
-                    <div className="mt-2">
-                      <FormProvider {...formMethods}>
-                        <TextInput className="mt-6 w-full" type="text" name="name" />
-                      </FormProvider>
-                    </div>
-                  </div>
-                </div>
-                <div className="mt-5 sm:mt-4 sm:flex justify-end space-x-6">
-                  <Button className="w-auto" color="white-gray" onClick={closeModal} ref={cancelButtonRef}>
-                    Cancel
-                  </Button>
-                  <Button
-                    className="w-auto"
-                    onClick={formMethods.handleSubmit(handleSubmit)}
-                    disabled={isLoading}
-                    isLoading={isLoading}
-                  >
-                    {currentFolder ? 'Update' : 'Create'}
-                  </Button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
-
-export { EditFolderContainer };
diff --git a/packages/front/components/directory/index.tsx b/packages/front/components/directory/index.tsx
index 0f426ad1..2b406ab9 100644
--- a/packages/front/components/directory/index.tsx
+++ b/packages/front/components/directory/index.tsx
@@ -3,27 +3,29 @@
 import { useState } from 'react';
 
 import { BreadCrumb } from './breadcrumb';
-import { EmptyFolder } from './folders/empty';
 import { Folder } from './folders/folder';
-import { EditFolderContainer } from './folders/form/edit-folder';
+import { EmptyFolder } from './folders/folder-empty';
+import { FolderFormContainer } from './folders/folder-form';
 import { CreateSnippetContainer } from './snippets/form/create-snippet';
 import { Snippet } from './snippets/snippet';
-import { useBooleanState } from '../../hooks';
+import { useBooleanState } from '../../hooks/use-boolean-state';
+import { useToast } from '../../hooks/use-toast';
+import { displayItemLabel } from '../../lib/text';
 import { useDeleteFolders } from '../../services/folders/delete-folders';
 import { useListDirectory } from '../../services/folders/list-directory';
 import { useDeleteSnippet } from '../../services/snippets/delete-snippet';
-import { FolderItem, SnippetItem } from '../../typings/components';
-import { displayItemLabel } from '../../utils/text';
+import { FolderItem, SnippetItem } from '../../types/components';
 import { ConfirmDialog } from '../dialog/confirm-dialog';
 import { MenuAction } from '../menu-action';
-import { useToast } from '../toast/provider';
 
 type Props = {
+  embeddableHostUrl: string;
   folderId: string;
   onBreadcrumbPathClick: (folderId: string, path: string) => Promise<void>;
   onNavigateToFolder: (folderId: string) => void;
   onSnippetClick: (snippetId: string) => void;
   rootFolderId: string;
+  shareableHostUrl: string;
   title: string;
 };
 
@@ -54,12 +56,14 @@ const generateConfirmDialogMessage = (item: ItemToDelete | null, folders: Folder
   return `This folder has ${displayItemLabel(folderItem.fileCount, 'item')}; are you sure you want to delete it?`;
 };
 
-const Directory = ({
+export const Directory = ({
+  embeddableHostUrl,
   folderId,
   onBreadcrumbPathClick,
   onNavigateToFolder,
   onSnippetClick,
   rootFolderId,
+  shareableHostUrl,
   title,
 }: Props) => {
   const [isNewFolderOpened, openNewFolderModal, closeNewFolderModal] = useBooleanState(false);
@@ -101,10 +105,10 @@ const Directory = ({
     await deleteSnippet({
       id: itemToDelete.id,
       onError: (message) => {
-        toastError({ message: `Failed to delete: ${message}` });
+        toastError(`Failed to delete: ${message}`);
       },
       onSuccess: () => {
-        toastSuccess({ message: 'Snippet deleted!' });
+        toastSuccess('Snippet deleted!');
 
         closeConfirmDialog();
         setItemToDelete(null);
@@ -132,10 +136,10 @@ const Directory = ({
     await deleteFolders({
       ids: [itemToDelete.id],
       onError: (message) => {
-        toastError({ message: `Failed to delete: ${message}` });
+        toastError(`Failed to delete: ${message}`);
       },
       onSuccess: () => {
-        toastSuccess({ message: 'Folder deleted!' });
+        toastSuccess('Folder deleted!');
 
         closeConfirmDialog();
         setItemToDelete(null);
@@ -197,7 +201,14 @@ const Directory = ({
               <div className="my-8 text-md font-bold text-gray-500">Files</div>
               <div className="mt-6 grid grid-cols-4 gap-4">
                 {snippets.map((snippet) => (
-                  <Snippet item={snippet} key={snippet.id} onClick={openSnippet} onDeleteClick={onDeleteSnippet} />
+                  <Snippet
+                    embeddableHostUrl={embeddableHostUrl}
+                    item={snippet}
+                    key={snippet.id}
+                    shareableHostUrl={shareableHostUrl}
+                    onClick={openSnippet}
+                    onDeleteClick={onDeleteSnippet}
+                  />
                 ))}
               </div>
             </div>
@@ -205,7 +216,7 @@ const Directory = ({
         </div>
       </main>
       {isNewFolderOpened && (
-        <EditFolderContainer
+        <FolderFormContainer
           closeModal={closeNewFolderModal}
           currentFolder={selectedFolder}
           parentFolderId={folderId}
@@ -224,5 +235,3 @@ const Directory = ({
     </>
   );
 };
-
-export { Directory };
diff --git a/packages/front/components/directory/snippets/form/create-snippet.tsx b/packages/front/components/directory/snippets/form/create-snippet.tsx
index 6f3bf840..76002ed1 100644
--- a/packages/front/components/directory/snippets/form/create-snippet.tsx
+++ b/packages/front/components/directory/snippets/form/create-snippet.tsx
@@ -1,17 +1,25 @@
-import { Dialog, Transition } from '@headlessui/react';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { Fragment, useRef } from 'react';
+import { Loader2 } from 'lucide-react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import { SnippetTextEditor } from './editor';
 import { SnippetFormValues, formSchema } from './form-schema';
 import { generateSnippetLanguageOptions } from './utils';
-import { Button } from '../../../../forms/button';
-import { useCodeHighlighter } from '../../../../hooks';
+import { useCodeHighlighter } from '../../../../hooks/use-code-highlighter';
+import { useToast } from '../../../../hooks/use-toast';
+import { CODE_HIGHLIGHT_OPTIONS, THEME_OPTIONS } from '../../../../lib/constants';
+import { extractLanguageFromName, lineHighlightToString } from '../../../../lib/snippets';
 import { useCreateSnippet } from '../../../../services/snippets/create-snippet';
-import { CODE_HIGHLIGHT_OPTIONS, THEME_OPTIONS } from '../../../../utils/constants';
-import { extractLanguageFromName, lineHighlightToString } from '../../../../utils/snippets';
-import { useToast } from '../../../toast/provider';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '../../../ui/alert-dialog';
 
 type Props = {
   closeModal: () => void;
@@ -20,7 +28,6 @@ type Props = {
 };
 
 const CreateSnippetContainer = ({ closeModal, folderId, open }: Props) => {
-  const cancelButtonRef = useRef(null);
   const { highlighter } = useCodeHighlighter();
   const { toastError, toastSuccess } = useToast();
   const { createSnippet, isLoading } = useCreateSnippet();
@@ -66,78 +73,39 @@ const CreateSnippetContainer = ({ closeModal, folderId, open }: Props) => {
         visibility: values.isPrivate ? 'private' : 'public',
       },
       onError: (message) => {
-        toastError({ message: `Failed to create: ${message}` });
+        toastError(`Failed to create: ${message}`);
       },
       onSuccess: () => {
-        toastSuccess({ message: 'Snippet created!' });
+        toastSuccess('Snippet created!');
         handleCloseModal();
       },
     });
   };
 
   return (
-    <Transition.Root show={open} as={Fragment}>
-      <Dialog as="div" className="relative z-10" initialFocus={cancelButtonRef} onClose={handleCloseModal}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed z-10 inset-0 overflow-y-auto">
-          <div className="flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-[60%] sm:w-full sm:p-6">
-                <div className="sm:flex sm:items-start">
-                  <div className="mt-3 text-center sm:mt-0 sm:text-left w-full">
-                    <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
-                      Create a new snippet
-                    </Dialog.Title>
-                    <div className="mt-2">
-                      <FormProvider {...formMethods}>
-                        <SnippetTextEditor
-                          highlighter={highlighter}
-                          languageOptions={generateSnippetLanguageOptions()}
-                          codeHighlightOptions={CODE_HIGHLIGHT_OPTIONS}
-                          themeOptions={THEME_OPTIONS}
-                        />
-                      </FormProvider>
-                    </div>
-                  </div>
-                </div>
-                <div className="mt-5 sm:mt-4 sm:flex justify-end space-x-6">
-                  <Button className="w-auto" color="white-gray" onClick={handleCloseModal} ref={cancelButtonRef}>
-                    Cancel
-                  </Button>
-                  <Button
-                    className="w-auto"
-                    onClick={formMethods.handleSubmit(submitCreateSnippet)}
-                    disabled={isLoading}
-                    isLoading={isLoading}
-                  >
-                    Create
-                  </Button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <AlertDialog open={open}>
+      <AlertDialogContent className="sm:max-w-[60%] sm:w-full">
+        <AlertDialogHeader>
+          <AlertDialogTitle>Create a new snippet</AlertDialogTitle>
+          <AlertDialogDescription />
+          <FormProvider {...formMethods}>
+            <SnippetTextEditor
+              highlighter={highlighter}
+              languageOptions={generateSnippetLanguageOptions()}
+              codeHighlightOptions={CODE_HIGHLIGHT_OPTIONS}
+              themeOptions={THEME_OPTIONS}
+            />
+          </FormProvider>
+        </AlertDialogHeader>
+        <AlertDialogFooter className="mt-4">
+          <AlertDialogCancel onClick={handleCloseModal}>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={formMethods.handleSubmit(submitCreateSnippet)} disabled={isLoading}>
+            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Create
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 };
 
diff --git a/packages/front/components/directory/snippets/form/editor/hooks/use-editor.ts b/packages/front/components/directory/snippets/form/editor/hooks/use-editor.ts
index 49f2d46c..d0b44269 100644
--- a/packages/front/components/directory/snippets/form/editor/hooks/use-editor.ts
+++ b/packages/front/components/directory/snippets/form/editor/hooks/use-editor.ts
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { BUNDLED_LANGUAGES } from 'shiki';
 
-import { HighLightOption, HighlightSnippetArgs, TextSelection } from '../../../../../../typings/snippet-form';
+import { HighLightOption, HighlightSnippetArgs, TextSelection } from '../../../../../../types/snippet-form';
 
 const languageNames = BUNDLED_LANGUAGES.map((language) => [language.id].concat(language.aliases ?? [])).flat();
 
@@ -60,7 +60,7 @@ export const useEditor = () => {
   const getLanguageFromExtension = (fileName?: string) => {
     const DEFAULT_LANGUAGE = 'txt';
 
-    if (!fileName || !fileName.includes('.')) {
+    if (!fileName?.includes('.')) {
       return DEFAULT_LANGUAGE;
     }
 
diff --git a/packages/front/components/directory/snippets/form/editor/hooks/use-form-editor.ts b/packages/front/components/directory/snippets/form/editor/hooks/use-form-editor.ts
index 44399a1c..c57ad85c 100644
--- a/packages/front/components/directory/snippets/form/editor/hooks/use-form-editor.ts
+++ b/packages/front/components/directory/snippets/form/editor/hooks/use-form-editor.ts
@@ -3,8 +3,8 @@ import { useFormContext } from 'react-hook-form';
 import { Highlighter } from 'shiki';
 
 import { useEditor } from './use-editor';
-import { EditorFormValues } from '../../../../../../typings/snippet-form';
-import { CODE_HIGHLIGHT_OPTIONS } from '../../../../../../utils/constants';
+import { CODE_HIGHLIGHT_OPTIONS } from '../../../../../../lib/constants';
+import { EditorFormValues } from '../../../../../../types/snippet-form';
 
 export const useFormEditor = () => {
   const { setValue, watch } = useFormContext<EditorFormValues>();
@@ -23,7 +23,6 @@ export const useFormEditor = () => {
   const language = watch('language');
   const lineHighlight = watch('lineHighlight');
   const codeHighlight = watch('codeHighlight');
-  const isSnippetPrivate = watch('isPrivate');
 
   const codeLanguage = language?.id ?? getLanguageFromExtension(name);
 
@@ -70,7 +69,6 @@ export const useFormEditor = () => {
     code,
     handleEditorSelect,
     highlightSnippet,
-    isSnippetPrivate,
     language,
     name,
     onHighlight,
diff --git a/packages/front/components/directory/snippets/form/editor/index.tsx b/packages/front/components/directory/snippets/form/editor/index.tsx
index 8460714f..83e1f230 100644
--- a/packages/front/components/directory/snippets/form/editor/index.tsx
+++ b/packages/front/components/directory/snippets/form/editor/index.tsx
@@ -2,13 +2,14 @@ import { Controller, useFormContext } from 'react-hook-form';
 import Editor from 'react-simple-code-editor';
 import { Highlighter } from 'shiki';
 
+import { useFormEditor } from './hooks/use-form-editor';
 import { SelectInput } from '../../../../../forms/select-input';
-import { SwitchInput } from '../../../../../forms/switch-input';
 import { TextInput } from '../../../../../forms/text-input';
-import { SelectOption } from '../../../../../typings/components';
-import { EditorFormValues } from '../../../../../typings/snippet-form';
-import { THEME_BACKGROUND_COLOR_MAP } from '../../../../../utils/constants';
-import { useFormEditor } from './hooks/use-form-editor';
+import { THEME_BACKGROUND_COLOR_MAP } from '../../../../../lib/constants';
+import { SelectOption } from '../../../../../types/components';
+import { EditorFormValues } from '../../../../../types/snippet-form';
+import { Label } from '../../../../ui/label';
+import { Switch } from '../../../../ui/switch';
 
 type Props = {
   codeHighlightOptions: SelectOption[];
@@ -17,9 +18,9 @@ type Props = {
   themeOptions: SelectOption[];
 };
 
-const SnippetTextEditor = ({ codeHighlightOptions, highlighter, languageOptions, themeOptions }: Props) => {
+export const SnippetTextEditor = ({ codeHighlightOptions, highlighter, languageOptions, themeOptions }: Props) => {
   const { control, setValue } = useFormContext<EditorFormValues>();
-  const { code, handleEditorSelect, isSnippetPrivate, onHighlight, theme } = useFormEditor();
+  const { code, handleEditorSelect, onHighlight, theme } = useFormEditor();
 
   const handleCodeHighlight = (codeToHighlight: string) => {
     const highlightedCode = onHighlight(highlighter)(codeToHighlight);
@@ -36,7 +37,12 @@ const SnippetTextEditor = ({ codeHighlightOptions, highlighter, languageOptions,
           name="isPrivate"
           control={control}
           render={({ field }) => (
-            <SwitchInput className="w-1/5 mt-2" defaultValue={isSnippetPrivate} label="Make private?" {...field} />
+            <div className="w-1/5 mt-2 flex items-center">
+              <Label htmlFor="isPrivate" className="mr-2">
+                Make private?
+              </Label>
+              <Switch id="isPrivate" checked={field.value} onCheckedChange={field.onChange} />
+            </div>
           )}
         />
         <TextInput
@@ -60,22 +66,25 @@ const SnippetTextEditor = ({ codeHighlightOptions, highlighter, languageOptions,
               name="language"
               control={control}
               render={({ field }) => (
-                <SelectInput className="w-36" options={languageOptions} placeholder="Language" {...field} />
+                <SelectInput className="w-40" options={languageOptions} placeholder="Language" {...field} />
               )}
             />
             <Controller
               name="codeHighlight"
               control={control}
-              render={({ field }) => <SelectInput className="w-36" options={codeHighlightOptions} {...field} />}
+              render={({ field }) => (
+                <SelectInput className="w-36" options={codeHighlightOptions} placeholder="Code style" {...field} />
+              )}
             />
             <Controller
               name="theme"
               control={control}
-              render={({ field }) => <SelectInput className="w-36" options={themeOptions} {...field} />}
+              render={({ field }) => (
+                <SelectInput className="w-36" options={themeOptions} placeholder="Theme" {...field} />
+              )}
             />
           </div>
         </div>
-        {/* @ts-ignore */}
         <Editor
           value={code}
           onValueChange={(code) => setValue('code', code)}
@@ -98,5 +107,3 @@ const SnippetTextEditor = ({ codeHighlightOptions, highlighter, languageOptions,
     </div>
   );
 };
-
-export { SnippetTextEditor };
diff --git a/packages/front/components/directory/snippets/form/form-schema.ts b/packages/front/components/directory/snippets/form/form-schema.ts
index deaec505..345052a1 100644
--- a/packages/front/components/directory/snippets/form/form-schema.ts
+++ b/packages/front/components/directory/snippets/form/form-schema.ts
@@ -1,7 +1,7 @@
 import * as yup from 'yup';
 
-import { EditorFormValues } from '../../../../typings/snippet-form';
-import { FORM_ERRORS } from '../../../../utils/constants';
+import { FORM_ERRORS } from '../../../../lib/constants';
+import { EditorFormValues } from '../../../../types/snippet-form';
 
 const MIN_NAME_LENGTH = 1;
 const MAX_NAME_LENGTH = 100;
diff --git a/packages/front/components/directory/snippets/form/utils.ts b/packages/front/components/directory/snippets/form/utils.ts
index f7c65729..28ac849b 100644
--- a/packages/front/components/directory/snippets/form/utils.ts
+++ b/packages/front/components/directory/snippets/form/utils.ts
@@ -1,7 +1,7 @@
 import { capitalize } from 'lodash';
 import { BUNDLED_LANGUAGES } from 'shiki';
 
-import { SelectOption } from '../../../../typings/components';
+import { SelectOption } from '../../../../types/components';
 
 export const generateSnippetLanguageOptions = (): SelectOption[] => {
   return BUNDLED_LANGUAGES.map((language) => ({
diff --git a/packages/front/components/directory/snippets/form/view-snippet.tsx b/packages/front/components/directory/snippets/form/view-snippet.tsx
index f25c9c5b..79db0600 100644
--- a/packages/front/components/directory/snippets/form/view-snippet.tsx
+++ b/packages/front/components/directory/snippets/form/view-snippet.tsx
@@ -1,17 +1,18 @@
 import { yupResolver } from '@hookform/resolvers/yup';
+import { Loader2 } from 'lucide-react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import { SnippetTextEditor } from './editor';
 import { SnippetFormValues, formSchema } from './form-schema';
 import { generateSnippetLanguageOptions } from './utils';
-import { Button } from '../../../../forms/button';
-import { useCodeHighlighter } from '../../../../hooks';
+import { useCodeHighlighter } from '../../../../hooks/use-code-highlighter';
+import { useToast } from '../../../../hooks/use-toast';
+import { CODE_HIGHLIGHT_OPTIONS, THEME_OPTIONS } from '../../../../lib/constants';
+import { extractLanguageFromName, lineHighlightToString } from '../../../../lib/snippets';
 import { useUpdateSnippet } from '../../../../services/snippets/update-snippet';
-import { SelectOption } from '../../../../typings/components';
-import { SnippetItem } from '../../../../typings/queries';
-import { CODE_HIGHLIGHT_OPTIONS, THEME_OPTIONS } from '../../../../utils/constants';
-import { extractLanguageFromName, lineHighlightToString } from '../../../../utils/snippets';
-import { useToast } from '../../../toast/provider';
+import { SelectOption } from '../../../../types/components';
+import { SnippetItem } from '../../../../types/queries';
+import { Button } from '../../../ui/button';
 
 type Props = {
   snippet: SnippetItem;
@@ -27,7 +28,7 @@ const selectLanguageOptionValue = (options: SelectOption[], language: string) =>
   return options.find((option) => option.id === language);
 };
 
-const ViewSnippet = ({ snippet }: Props) => {
+export const ViewSnippet = ({ snippet }: Props) => {
   const { highlighter } = useCodeHighlighter();
   const { toastError, toastSuccess } = useToast();
 
@@ -63,10 +64,10 @@ const ViewSnippet = ({ snippet }: Props) => {
         visibility: values.isPrivate ? 'private' : 'public',
       },
       onError: (message) => {
-        toastError({ message: `Failed to update: ${message}` });
+        toastError(`Failed to update: ${message}`);
       },
       onSuccess: () => {
-        toastSuccess({ message: 'Snippet updated!' });
+        toastSuccess('Snippet updated!');
       },
     });
   };
@@ -81,12 +82,8 @@ const ViewSnippet = ({ snippet }: Props) => {
           themeOptions={THEME_OPTIONS}
         />
         <div className="mt-5 flex justify-end space-x-6">
-          <Button
-            className="w-auto"
-            onClick={formMethods.handleSubmit(submitUpdateSnippet)}
-            disabled={isLoading}
-            isLoading={isLoading}
-          >
+          <Button className="w-auto" onClick={formMethods.handleSubmit(submitUpdateSnippet)} disabled={isLoading}>
+            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
             Update
           </Button>
         </div>
@@ -94,5 +91,3 @@ const ViewSnippet = ({ snippet }: Props) => {
     </div>
   );
 };
-
-export { ViewSnippet };
diff --git a/packages/front/components/directory/snippets/snippet.tsx b/packages/front/components/directory/snippets/snippet.tsx
index 74bf561a..c1f51e8c 100644
--- a/packages/front/components/directory/snippets/snippet.tsx
+++ b/packages/front/components/directory/snippets/snippet.tsx
@@ -1,43 +1,34 @@
-import {
-  ClipboardIcon,
-  CodeBracketIcon,
-  DocumentIcon,
-  PencilIcon,
-  ShareIcon,
-  TrashIcon,
-} from '@heroicons/react/20/solid';
+import { ClipboardIcon, CodeXmlIcon, FileIcon, PencilIcon, ShareIcon, TrashIcon } from 'lucide-react';
 import React from 'react';
 
 import { useCopyToClipboard } from '../../../hooks/use-copy-to-clipboard';
-import { useHover } from '../../../hooks/use-hover';
-import { MenuItemAction, SnippetItem } from '../../../typings/components';
-import { COLORS } from '../../../utils/constants';
-import { generateEmbeddableLink, generateShareableLink } from '../../../utils/snippets';
-import { truncate } from '../../../utils/text';
+// import { useHover } from '../../../hooks/use-hover';
+import { truncate } from '../../../lib/text';
+import { MenuItemAction, SnippetItem } from '../../../types/components';
 import { DotMenu } from '../../menus/dot-menu';
 
 type Props = {
+  embeddableHostUrl: string;
   item: SnippetItem;
   onClick: (snippet: SnippetItem) => void;
   onDeleteClick: (snippet: SnippetItem) => void;
+  shareableHostUrl: string;
 };
 
 const FILE_NAME_MAX_LENGTH = 30;
 
-const Snippet = ({ item, onClick, onDeleteClick }: Props) => {
-  const [hoverRef, isHovered] = useHover<HTMLDivElement>();
+export const Snippet = ({ embeddableHostUrl, item, onClick, onDeleteClick, shareableHostUrl }: Props) => {
+  // const [hoverRef, isHovered] = useHover<HTMLDivElement>();
   const [, copyToClipboard] = useCopyToClipboard();
-  const charIndex = item.language.charCodeAt(0) - 65;
-  const colorIndex = charIndex % COLORS.length;
 
   const handleCopyShareableLink = async () => {
-    const link = generateShareableLink(item.id);
+    const link = `${shareableHostUrl}/snippets/${item.id}`;
 
     await copyToClipboard(link);
   };
 
   const handleEmbeddableLink = async () => {
-    const link = generateEmbeddableLink(item.id);
+    const link = `${embeddableHostUrl}/${item.id}`;
 
     await copyToClipboard(link);
   };
@@ -50,27 +41,27 @@ const Snippet = ({ item, onClick, onDeleteClick }: Props) => {
 
   const menuActions: MenuItemAction[] = [
     {
-      icon: <PencilIcon className="mr-3 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />,
+      icon: <PencilIcon size={16} className="mr-3 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />,
       label: 'Edit',
       onClick: () => onClick(item),
     },
     {
-      icon: <ShareIcon className="mr-3 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />,
+      icon: <ShareIcon size={16} className="mr-3 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />,
       label: 'Copy shareable link',
       onClick: handleCopyShareableLink,
     },
     {
-      icon: <CodeBracketIcon className="mr-3 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />,
+      icon: <CodeXmlIcon size={16} className="mr-3 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />,
       label: 'Copy embeddable link',
       onClick: handleEmbeddableLink,
     },
     {
-      icon: <ClipboardIcon className="mr-3 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />,
+      icon: <ClipboardIcon size={16} className="mr-3 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />,
       label: 'Copy to clipboard',
       onClick: handleCopyToClipboard,
     },
     {
-      icon: <TrashIcon className="mr-3 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />,
+      icon: <TrashIcon size={16} className="mr-3 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />,
       label: 'Delete',
       onClick: () => onDeleteClick(item),
     },
@@ -80,19 +71,18 @@ const Snippet = ({ item, onClick, onDeleteClick }: Props) => {
     <div
       className="relative block pb-4 px-4 border border-gray-100 shadow-sm rounded-md cursor-default bg-white hover:bg-gray-100 transition"
       title={item.name}
-      ref={hoverRef}
+      // ref={hoverRef}
     >
       <div className="mt-4 text-gray-500 flex items-center justify-between">
         <div className="flex items-center">
-          <DocumentIcon className="h-6 w-6 mr-2" style={{ color: COLORS[colorIndex] }} />
+          <FileIcon className="h-6 w-6 mr-2" />
           <div className="text-sm font-bold text-gray-900 cursor-pointer" onClick={() => onClick(item)}>
             {truncate(item.name, FILE_NAME_MAX_LENGTH)}
           </div>
         </div>
-        {isHovered && <DotMenu data={menuActions} />}
+        {/*{isHovered && <DotMenu data={menuActions} />}*/}
+        <DotMenu data={menuActions} className="w-56" />
       </div>
     </div>
   );
 };
-
-export { Snippet };
diff --git a/packages/front/components/link.tsx b/packages/front/components/link.tsx
index 04b35800..8b4f03a3 100644
--- a/packages/front/components/link.tsx
+++ b/packages/front/components/link.tsx
@@ -3,7 +3,7 @@ import { PropsWithChildren } from 'react';
 
 type Props = PropsWithChildren<LinkProps & { className?: string; title?: string }>;
 
-const Link = ({ children, ...props }: Props) => {
+export const Link = ({ children, ...props }: Props) => {
   if (props.href.toString().startsWith('/')) {
     return <NextLink {...props}>{children}</NextLink>;
   }
@@ -14,5 +14,3 @@ const Link = ({ children, ...props }: Props) => {
     </a>
   );
 };
-
-export { Link };
diff --git a/packages/front/components/menu-action.tsx b/packages/front/components/menu-action.tsx
index b3990992..d38a49ca 100644
--- a/packages/front/components/menu-action.tsx
+++ b/packages/front/components/menu-action.tsx
@@ -1,56 +1,38 @@
-import { Menu, Transition } from '@headlessui/react';
-import { ChevronDownIcon, DocumentPlusIcon, FolderPlusIcon } from '@heroicons/react/20/solid';
-import { Fragment } from 'react';
+import { ChevronsUpDownIcon, FilePlusIcon, FolderPlusIcon } from 'lucide-react';
+
+import { Button } from './ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu';
 
 type Props = {
   onNewFolderClick: () => void;
   onNewSnippetClick: () => void;
 };
 
-const MenuAction = ({ onNewFolderClick, onNewSnippetClick }: Props) => {
+export const MenuAction = ({ onNewFolderClick, onNewSnippetClick }: Props) => {
   return (
-    <Menu as="div" className="relative inline-block text-left">
-      <div>
-        <Menu.Button className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
-          New
-          <ChevronDownIcon className="mr-1 ml-2" aria-hidden="true" />
-        </Menu.Button>
-      </div>
-
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items className="origin-top-right absolute right-0 mt-2 z-10 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
-          <div className="py-1">
-            <Menu.Item>
-              <button
-                className="w-full text-gray-700 block px-4 py-2 text-sm hover:text-gray-800 hover:bg-gray-100"
-                onClick={onNewSnippetClick}
-              >
-                <DocumentPlusIcon className="mr-3 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />
-                New Snippet
-              </button>
-            </Menu.Item>
-            <Menu.Item>
-              <button
-                className="w-full text-gray-700 block px-4 py-2 text-sm hover:text-gray-800 hover:bg-gray-100"
-                onClick={onNewFolderClick}
-              >
-                <FolderPlusIcon className="mr-3 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />
-                New Folder
-              </button>
-            </Menu.Item>
-          </div>
-        </Menu.Items>
-      </Transition>
-    </Menu>
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Button variant="outline">
+          New <ChevronsUpDownIcon size={16} className="mr-1 ml-2" aria-hidden="true" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56" forceMount>
+        <DropdownMenuItem className="cursor-pointer py-2" onClick={onNewSnippetClick}>
+          <FilePlusIcon size={18} className="mx-2" />
+          New Snippet
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="cursor-pointer py-2" onClick={onNewFolderClick}>
+          <FolderPlusIcon size={18} className="mx-2" />
+          New Folder
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 };
-
-export { MenuAction };
diff --git a/packages/front/components/menus/dot-menu.tsx b/packages/front/components/menus/dot-menu.tsx
index 2a0174d7..dfd7b735 100644
--- a/packages/front/components/menus/dot-menu.tsx
+++ b/packages/front/components/menus/dot-menu.tsx
@@ -1,68 +1,40 @@
-import { Menu, Transition } from '@headlessui/react';
-import { EllipsisVerticalIcon } from '@heroicons/react/20/solid';
+import { EllipsisVerticalIcon } from 'lucide-react';
 import React, { Fragment } from 'react';
 
-import { MenuItemAction } from '../../typings/components';
-import { classNames } from '../../utils/classnames';
-
-type MenuItemProps = {
-  icon?: React.ReactNode;
-  label: string;
-  onClick: () => void;
-};
+import { cn } from '../../lib/utils';
+import { MenuItemAction } from '../../types/components';
+import { Button } from '../ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu';
 
 type Props = {
+  className?: string;
   data: MenuItemAction[];
 };
 
-const MenuItem = ({ icon, label, onClick }: MenuItemProps) => {
-  return (
-    <Menu.Item>
-      {({ active }) => (
-        <button
-          type="button"
-          className={classNames(
-            active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-            'block w-full group flex text-left px-4 py-2 text-sm',
-          )}
-          onClick={onClick}
-        >
-          {icon} {label}
-        </button>
-      )}
-    </Menu.Item>
-  );
-};
-
-const DotMenu = ({ data }: Props) => {
+export const DotMenu = ({ className, data }: Props) => {
   return (
-    <Menu as="div" className="relative inline-block text-left">
-      <div>
-        <Menu.Button className="bg-transparent rounded-full flex items-center text-gray-400 hover:text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-gray-500">
-          <span className="sr-only">Open options</span>
-          <EllipsisVerticalIcon aria-hidden="true" />
-        </Menu.Button>
-      </div>
-
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
-          <div className="py-1">
-            {data.map((item) => (
-              <MenuItem key={item.label} icon={item.icon} label={item.label} onClick={item.onClick} />
-            ))}
-          </div>
-        </Menu.Items>
-      </Transition>
-    </Menu>
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Button variant="ghost" size="icon" className="w-auto h-auto">
+          <EllipsisVerticalIcon size={18} />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className={cn('w-40', className)} forceMount>
+        {data.map(({ icon, label, onClick }, index) => (
+          <Fragment key={label}>
+            <DropdownMenuItem className="cursor-pointer" onClick={onClick}>
+              {icon} {label}
+            </DropdownMenuItem>
+            {index !== data.length - 1 && <DropdownMenuSeparator />}
+          </Fragment>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 };
-
-export { DotMenu };
diff --git a/packages/front/components/toast/provider.tsx b/packages/front/components/toast/provider.tsx
deleted file mode 100644
index 73cadacf..00000000
--- a/packages/front/components/toast/provider.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-'use client';
-
-import { PropsWithChildren, createContext, useContext } from 'react';
-
-import { Toast } from './toast';
-import { ToastContextType } from './types';
-import { defaultToastAction, useToastManager } from './use-toast-manager';
-
-type Props = PropsWithChildren<{}>;
-
-const ToastContext = createContext<ToastContextType>(defaultToastAction);
-
-const ToastProvider = ({ children }: Props) => {
-  const { closeToast, list, toastError, toastSuccess, toastWarning } = useToastManager();
-
-  return (
-    <ToastContext.Provider value={{ toastError, toastSuccess, toastWarning }}>
-      {children}
-      <div
-        aria-live="assertive"
-        className="fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start z-20"
-      >
-        <div className="w-full flex flex-col items-center space-y-4 sm:items-end">
-          {list.map((item) => {
-            return (
-              <Toast
-                key={item.id}
-                message={item.message}
-                onClose={() => closeToast(item.id)}
-                type={item.type}
-                title={item.title}
-              />
-            );
-          })}
-        </div>
-      </div>
-    </ToastContext.Provider>
-  );
-};
-
-const useToast = () => {
-  const context = useContext(ToastContext);
-
-  if (context === undefined) {
-    throw new Error('useToast must be used within a ToastProvider!');
-  }
-
-  return context;
-};
-
-export { ToastProvider, useToast };
diff --git a/packages/front/components/toast/toast.tsx b/packages/front/components/toast/toast.tsx
deleted file mode 100644
index 5418be64..00000000
--- a/packages/front/components/toast/toast.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Transition } from '@headlessui/react';
-import { XMarkIcon } from '@heroicons/react/20/solid';
-import { CheckCircleIcon, ExclamationCircleIcon, XCircleIcon } from '@heroicons/react/24/outline';
-import { Fragment } from 'react';
-
-import { ToastType } from './types';
-
-type Props = {
-  message: string;
-  onClose: () => void;
-  title?: string;
-  type: ToastType;
-};
-
-const defaultTitleMappedToType: Record<ToastType, string> = {
-  error: 'Error',
-  success: 'Success',
-  warning: 'Warning',
-};
-
-const renderToastIcon = (type: ToastType) => {
-  switch (type) {
-    case 'error':
-      return <XCircleIcon className="h-6 w-6 text-red-400" aria-hidden="true" />;
-    case 'success':
-      return <CheckCircleIcon className="h-6 w-6 text-green-400" aria-hidden="true" />;
-
-    default:
-      return <ExclamationCircleIcon className="h-6 w-6 text-yellow-500" aria-hidden="true" />;
-  }
-};
-
-const Toast = ({ message, onClose, title, type }: Props) => {
-  const toastTitle = title ?? defaultTitleMappedToType[type];
-
-  return (
-    <Transition
-      show
-      as={Fragment}
-      enter="transform ease-out duration-300 transition"
-      enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-      enterTo="translate-y-0 opacity-100 sm:translate-x-0"
-      leave="transition ease-in duration-100"
-      leaveFrom="opacity-100"
-      leaveTo="opacity-0"
-    >
-      <div className="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden">
-        <div className="p-4">
-          <div className="flex items-start">
-            <div className="flex-shrink-0">{renderToastIcon(type)}</div>
-            <div className="ml-3 w-0 flex-1 pt-0.5">
-              <p className="text-sm font-medium text-gray-900">{toastTitle}</p>
-              <p className="mt-1 text-sm text-gray-500">{message}</p>
-            </div>
-            <div className="ml-4 flex-shrink-0 flex">
-              <button
-                type="button"
-                className="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-                onClick={onClose}
-              >
-                <span className="sr-only">Close</span>
-                <XMarkIcon aria-hidden="true" />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  );
-};
-
-export { Toast };
diff --git a/packages/front/components/toast/types.ts b/packages/front/components/toast/types.ts
deleted file mode 100644
index 6be95952..00000000
--- a/packages/front/components/toast/types.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export type ToastType = 'error' | 'success' | 'warning';
-
-export type ToastData = {
-  id: string;
-  message: string;
-  timerId: any;
-  title?: string;
-  type: ToastType;
-};
-
-export type ToastShowArgs = {
-  message: string;
-  title?: string;
-};
-
-export type AddToastArgs = ToastShowArgs & { type: ToastType };
-
-export type ToastContextType = {
-  toastError: (args: ToastShowArgs) => void;
-  toastSuccess: (args: ToastShowArgs) => void;
-  toastWarning: (args: ToastShowArgs) => void;
-};
diff --git a/packages/front/components/toast/use-toast-manager.ts b/packages/front/components/toast/use-toast-manager.ts
deleted file mode 100644
index e49f55c9..00000000
--- a/packages/front/components/toast/use-toast-manager.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { generateRandomId } from '@snipcode/utils';
-import { useState } from 'react';
-
-import { AddToastArgs, ToastContextType, ToastData, ToastShowArgs } from './types';
-
-const TOAST_TIMEOUT = 3000;
-const TOAST_ERROR_TIMEOUT = 5000;
-
-export const defaultToastAction: ToastContextType = {
-  toastError: (args) => console.log(args),
-  toastSuccess: (args) => console.log(args),
-  toastWarning: (args) => console.log(args),
-};
-
-export const useToastManager = () => {
-  const [list, setList] = useState<ToastData[]>([]);
-
-  const removeToast = (id: string) => {
-    setList(list.filter((item) => item.id !== id));
-  };
-
-  const addToast = ({ message, title, type }: AddToastArgs) => {
-    const id = generateRandomId();
-    const timeout = type === 'error' ? TOAST_ERROR_TIMEOUT : TOAST_TIMEOUT;
-
-    const data: ToastData = {
-      id,
-      message,
-      timerId: setTimeout(() => {
-        removeToast(id);
-      }, timeout),
-      title,
-      type,
-    };
-
-    const newList = [...list, data];
-
-    setList(newList);
-  };
-
-  const toastSuccess = (args: ToastShowArgs) => {
-    addToast({ ...args, type: 'success' });
-  };
-
-  const toastError = (args: ToastShowArgs) => {
-    addToast({ ...args, type: 'error' });
-  };
-
-  const toastWarning = (args: ToastShowArgs) => {
-    addToast({ ...args, type: 'warning' });
-  };
-
-  const closeToast = (id: string) => {
-    const toast = list.find((item) => item.id === id);
-
-    if (!toast) {
-      return;
-    }
-
-    clearTimeout(toast.timerId);
-    removeToast(id);
-  };
-
-  return {
-    closeToast,
-    list,
-    toastError,
-    toastSuccess,
-    toastWarning,
-  };
-};
diff --git a/packages/front/components/ui/alert-dialog.tsx b/packages/front/components/ui/alert-dialog.tsx
new file mode 100644
index 00000000..9f440f1e
--- /dev/null
+++ b/packages/front/components/ui/alert-dialog.tsx
@@ -0,0 +1,116 @@
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as React from 'react';
+
+import { buttonVariants } from './button';
+import { cn } from '../../lib/utils';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.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 border-slate-200 bg-white 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 dark:border-slate-800 dark:bg-slate-950',
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+);
+
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+);
+
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold', className)} {...props} />
+));
+
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-slate-500 dark:text-slate-400', className)}
+    {...props}
+  />
+));
+
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
+    {...props}
+  />
+));
+
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};
diff --git a/packages/front/components/ui/alert.tsx b/packages/front/components/ui/alert.tsx
new file mode 100644
index 00000000..e2ad2d9c
--- /dev/null
+++ b/packages/front/components/ui/alert.tsx
@@ -0,0 +1,50 @@
+import { type VariantProps, cva } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border border-slate-200 p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-slate-950 dark:border-slate-800 dark:[&>svg]:text-slate-50',
+  {
+    defaultVariants: {
+      variant: 'default',
+    },
+    variants: {
+      variant: {
+        default: 'bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50',
+        destructive:
+          'border-red-500/50 text-red-500 dark:border-red-500 [&>svg]:text-red-500 dark:border-red-900/50 dark:text-red-900 dark:dark:border-red-900 dark:[&>svg]:text-red-900',
+        info: 'border-blue-500/50 text-blue-500 dark:border-blue-500 [&>svg]:text-blue-500 dark:border-blue-900/50 dark:text-blue-900 dark:dark:border-blue-900 dark:[&>svg]:text-blue-900',
+        success:
+          'border-green-500/50 text-green-500 dark:border-green-500 [&>svg]:text-green-500 dark:border-green-900/50 dark:text-green-900 dark:dark:border-green-900 dark:[&>svg]:text-green-900',
+      },
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+));
+
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props} />
+  ),
+);
+
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
+  ),
+);
+
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };
diff --git a/packages/front/components/ui/avatar.tsx b/packages/front/components/ui/avatar.tsx
new file mode 100644
index 00000000..51d7bd47
--- /dev/null
+++ b/packages/front/components/ui/avatar.tsx
@@ -0,0 +1,44 @@
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as React from 'react';
+
+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-slate-100 dark:bg-slate-800',
+      className,
+    )}
+    {...props}
+  />
+));
+
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/packages/front/components/ui/button.tsx b/packages/front/components/ui/button.tsx
new file mode 100644
index 00000000..2888ff3a
--- /dev/null
+++ b/packages/front/components/ui/button.tsx
@@ -0,0 +1,52 @@
+import { Slot } from '@radix-ui/react-slot';
+import { type VariantProps, cva } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300',
+  {
+    defaultVariants: {
+      size: 'default',
+      variant: 'default',
+    },
+    variants: {
+      size: {
+        default: 'h-10 px-4 py-2',
+        icon: 'h-10 w-10',
+        lg: 'h-11 rounded-md px-8',
+        sm: 'h-9 rounded-md px-3',
+      },
+      variant: {
+        default:
+          'bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90',
+        destructive:
+          'bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90',
+        ghost: 'hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50',
+        link: 'text-slate-900 underline-offset-4 hover:underline dark:text-slate-50',
+        outline:
+          'border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50',
+        secondary:
+          'bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80',
+      },
+    },
+  },
+);
+
+export type ButtonProps = {
+  asChild?: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants>;
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ asChild = false, className, size, variant, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+
+    return <Comp className={cn(buttonVariants({ className, size, variant }))} ref={ref} {...props} />;
+  },
+);
+
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/packages/front/components/ui/dropdown-menu.tsx b/packages/front/components/ui/dropdown-menu.tsx
new file mode 100644
index 00000000..2fef9e68
--- /dev/null
+++ b/packages/front/components/ui/dropdown-menu.tsx
@@ -0,0 +1,192 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+import * as React from '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;
+  }
+>(({ children, className, inset, ...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-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-800 dark:data-[state=open]:bg-slate-800',
+      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 border-slate-200 bg-white p-1 text-slate-950 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 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50',
+      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 border-slate-200 bg-white p-1 text-slate-950 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 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50',
+        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-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-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>
+>(({ checked, children, className, ...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-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-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>
+>(({ children, className, ...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-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-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-slate-100 dark:bg-slate-800', 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/packages/front/components/ui/input.tsx b/packages/front/components/ui/input.tsx
new file mode 100644
index 00000000..d6e093e6
--- /dev/null
+++ b/packages/front/components/ui/input.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+export type InputProps = {} & 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-slate-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-slate-950 placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:file:text-slate-50 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/packages/front/components/ui/label.tsx b/packages/front/components/ui/label.tsx
new file mode 100644
index 00000000..f590206b
--- /dev/null
+++ b/packages/front/components/ui/label.tsx
@@ -0,0 +1,18 @@
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { type VariantProps, cva } from 'class-variance-authority';
+import * as React from 'react';
+
+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/packages/front/components/ui/select.tsx b/packages/front/components/ui/select.tsx
new file mode 100644
index 00000000..668e683e
--- /dev/null
+++ b/packages/front/components/ui/select.tsx
@@ -0,0 +1,154 @@
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ children, className, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus:ring-slate-300',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ children, className, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white text-slate-950 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 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label ref={ref} className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)} {...props} />
+));
+
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ children, className, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800', className)}
+    {...props}
+  />
+));
+
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
diff --git a/packages/front/components/ui/switch.tsx b/packages/front/components/ui/switch.tsx
new file mode 100644
index 00000000..a5a50595
--- /dev/null
+++ b/packages/front/components/ui/switch.tsx
@@ -0,0 +1,28 @@
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as React from 'react';
+
+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-slate-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-slate-900 data-[state=unchecked]:bg-slate-200 dark:focus-visible:ring-slate-300 dark:focus-visible:ring-offset-slate-950 dark:data-[state=checked]:bg-slate-50 dark:data-[state=unchecked]:bg-slate-800',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 dark:bg-slate-950',
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
diff --git a/packages/front/components/ui/toast.tsx b/packages/front/components/ui/toast.tsx
new file mode 100644
index 00000000..1de9b1b5
--- /dev/null
+++ b/packages/front/components/ui/toast.tsx
@@ -0,0 +1,120 @@
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { type VariantProps, cva } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import * as React from '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:top-0 sm:right-0 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 border-slate-200 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 dark:border-slate-800',
+  {
+    defaultVariants: {
+      variant: 'default',
+    },
+    variants: {
+      variant: {
+        default: 'border bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50',
+        destructive:
+          'destructive group border-white bg-white text-red-600 dark:border-slate-950 dark:bg-slate-950 dark:text-red-600',
+        success:
+          'success group border-white bg-white text-green-600 dark:border-slate-950 dark:bg-slate-950 dark:text-green-600',
+      },
+    },
+  },
+);
+
+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 border-slate-200 bg-transparent px-3 text-sm font-medium ring-offset-white transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-slate-100/40 group-[.destructive]:hover:border-red-500/30 group-[.destructive]:hover:bg-red-500 group-[.destructive]:hover:text-slate-50 group-[.destructive]:focus:ring-red-500 dark:border-slate-800 dark:ring-offset-slate-950 dark:hover:bg-slate-800 dark:focus:ring-slate-300 dark:group-[.destructive]:border-slate-800/40 dark:group-[.destructive]:hover:border-red-900/30 dark:group-[.destructive]:hover:bg-red-900 dark:group-[.destructive]:hover:text-slate-50 dark:group-[.destructive]:focus:ring-red-900',
+      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-slate-950/50 opacity-0 transition-opacity hover:text-slate-950 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 dark:text-slate-50/50 dark:hover:text-slate-50',
+      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/packages/front/components/ui/toaster.tsx b/packages/front/components/ui/toaster.tsx
new file mode 100644
index 00000000..810a7a2e
--- /dev/null
+++ b/packages/front/components/ui/toaster.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from './toast';
+import { useToast } from '../../hooks/use-toast';
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ action, description, id, title, ...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/packages/front/components/user-avatar.tsx b/packages/front/components/user-avatar.tsx
index 85dd4ee5..44af9d9f 100644
--- a/packages/front/components/user-avatar.tsx
+++ b/packages/front/components/user-avatar.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image';
 
-import { COLORS } from '../utils/constants';
+import { COLORS } from '../lib/constants';
 
 type Props = {
   name?: string | null;
@@ -24,7 +24,7 @@ const generateInitials = (name?: string | null) => {
   return initials.toUpperCase();
 };
 
-const UserAvatar = ({ name, url }: Props) => {
+export const UserAvatar = ({ name, url }: Props) => {
   if (url) {
     return <Image className="h-8 w-8 rounded-full" src={url} alt="User picture" width={40} height={40} />;
   }
@@ -43,5 +43,3 @@ const UserAvatar = ({ name, url }: Props) => {
     </span>
   );
 };
-
-export { UserAvatar };
diff --git a/packages/front/forms/button.tsx b/packages/front/forms/button.tsx
deleted file mode 100644
index 7e4db277..00000000
--- a/packages/front/forms/button.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import classNames from 'classnames';
-import { ButtonHTMLAttributes, DetailedHTMLProps, PropsWithChildren, forwardRef } from 'react';
-
-import SpinnerIcon from '../icons/spinner';
-import { ColorVariants } from '../typings/components';
-
-const colors: Record<ColorVariants, string> = {
-  primary: 'text-white bg-gray-900 hover:bg-gray-600',
-  red: 'text-white bg-red-500 hover:bg-red-600',
-  'white-gray': 'text-gray-900 bg-gray-100 hover:bg-gray-200',
-};
-
-type ButtonProps = PropsWithChildren<
-  {
-    color?: ColorVariants;
-    isLoading?: boolean;
-  } & DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
->;
-
-const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: ButtonProps, ref) => {
-  const { children, className, color = 'primary', isLoading, ...buttonProps } = props;
-  const buttonClasses = classNames(
-    className,
-    'flex items-center justify-center w-full px-8 py-2 mt-6 text-base font-bold transition-all duration-200 border border-transparent rounded-xl',
-    colors[color],
-    {
-      'cursor-not-allowed': Boolean(buttonProps.disabled) || isLoading,
-    },
-  );
-
-  return (
-    <button disabled={buttonProps.disabled} type="button" className={buttonClasses} {...buttonProps} ref={ref}>
-      {isLoading && <SpinnerIcon />}
-      {children}
-    </button>
-  );
-});
-
-Button.displayName = 'Button';
-
-export { Button };
diff --git a/packages/front/forms/select-input.tsx b/packages/front/forms/select-input.tsx
index cb0f6dfd..c89e3327 100644
--- a/packages/front/forms/select-input.tsx
+++ b/packages/front/forms/select-input.tsx
@@ -1,80 +1,45 @@
-import { Listbox, Transition } from '@headlessui/react';
-import { ChevronUpDownIcon } from '@heroicons/react/20/solid';
-import { Fragment, forwardRef } from 'react';
-
-import { SelectOption } from '../typings/components';
-import { classNames } from '../utils/classnames';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../components/ui/select';
+import { SelectOption } from '../types/components';
 
 type Props = {
   className?: string;
-  label?: string;
   onChange: (value: SelectOption) => void;
   options: SelectOption[];
   placeholder?: string;
   value?: SelectOption;
 };
 
-const SelectInput = forwardRef<HTMLDivElement, Props>((props: Props, ref) => {
-  const { className = 'w-40', label, onChange, options, placeholder = 'Select value...', value: selectedValue } = props;
+export const SelectInput = ({
+  className = 'w-44',
+  onChange,
+  options,
+  placeholder = 'Select value...',
+  value: selectedValue,
+}: Props) => {
+  const handleOnChange = (value: string) => {
+    const option = options.find((option) => option.id === value);
 
-  const generateOptionClasses = (isActive: boolean) => {
-    return classNames(
-      'cursor-default select-none relative py-2 pl-2 pr-4',
-      isActive ? 'text-gray-100 bg-gray-900' : 'text-gray-900',
-    );
-  };
+    if (!option) {
+      console.error(`[Select Input] No option found for the value "${value}"`);
 
-  const generateOptionLabelClasses = (isSelected: boolean) => {
-    return classNames('block', isSelected ? 'font-medium' : 'font-normal');
+      return;
+    }
+
+    onChange(option);
   };
 
   return (
-    <div ref={ref} className={className}>
-      <Listbox value={selectedValue} onChange={onChange}>
-        {({ open }) => (
-          <>
-            {label && <Listbox.Label className="block text-sm font-medium text-gray-700">{label}</Listbox.Label>}
-            <div className="mt-1 relative">
-              <Listbox.Button className="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm">
-                <span className={`block truncate ${selectedValue?.label ? '' : 'text-gray-400'}`}>
-                  {selectedValue?.label ?? placeholder}
-                </span>
-                <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                  <ChevronUpDownIcon className="text-gray-400" aria-hidden="true" />
-                </span>
-              </Listbox.Button>
-
-              <Transition
-                show={open}
-                as={Fragment}
-                leave="transition ease-in duration-100"
-                leaveFrom="opacity-100"
-                leaveTo="opacity-0"
-              >
-                <Listbox.Options className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
-                  {options.map((option) => (
-                    <Listbox.Option
-                      key={option.id}
-                      className={({ active }) => generateOptionClasses(active)}
-                      value={option}
-                    >
-                      {({ selected }) => (
-                        <>
-                          <span className={generateOptionLabelClasses(selected)}>{option.label}</span>
-                        </>
-                      )}
-                    </Listbox.Option>
-                  ))}
-                </Listbox.Options>
-              </Transition>
-            </div>
-          </>
-        )}
-      </Listbox>
-    </div>
+    <Select onValueChange={handleOnChange} defaultValue={selectedValue?.id}>
+      <SelectTrigger className={className}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent className="w-full">
+        {options.map((option) => (
+          <SelectItem key={option.id} value={option.id}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
   );
-});
-
-SelectInput.displayName = 'SelectInput';
-
-export { SelectInput };
+};
diff --git a/packages/front/forms/switch-input.tsx b/packages/front/forms/switch-input.tsx
deleted file mode 100644
index 4d83bc38..00000000
--- a/packages/front/forms/switch-input.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Switch } from '@headlessui/react';
-import { forwardRef, useState } from 'react';
-
-import { classNames } from '../utils/classnames';
-
-type Props = {
-  className?: string;
-  defaultValue?: boolean;
-  label?: string;
-  onChange: (value: boolean) => void;
-};
-
-const SwitchInput = forwardRef<HTMLDivElement, Props>(
-  ({ className = '', defaultValue = false, label, onChange }: Props, ref) => {
-    const [enabled, setEnabled] = useState(defaultValue);
-
-    const handleValueChange = (value: boolean) => {
-      setEnabled(value);
-      onChange(value);
-    };
-
-    return (
-      <div ref={ref} className={className}>
-        <Switch.Group as="div" className="flex items-center">
-          {label && (
-            <Switch.Label as="span" className="mr-3">
-              <span className="text-sm font-medium text-gray-900">{label}</span>
-            </Switch.Label>
-          )}
-          <Switch
-            checked={enabled}
-            onChange={handleValueChange}
-            className={classNames(
-              enabled ? 'bg-gray-900' : 'bg-gray-200',
-              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500',
-            )}
-          >
-            <span
-              aria-hidden="true"
-              className={classNames(
-                enabled ? 'translate-x-5' : 'translate-x-0',
-                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
-              )}
-            />
-          </Switch>
-        </Switch.Group>
-      </div>
-    );
-  },
-);
-
-SwitchInput.displayName = 'SwitchInput';
-
-export { SwitchInput };
diff --git a/packages/front/forms/text-input.tsx b/packages/front/forms/text-input.tsx
index e91a0bf0..403300d7 100644
--- a/packages/front/forms/text-input.tsx
+++ b/packages/front/forms/text-input.tsx
@@ -2,7 +2,9 @@ import classNames from 'classnames';
 import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
 import { useFormContext } from 'react-hook-form';
 
-import { getInputErrorMessage } from '../utils/forms';
+import { Input } from '../components/ui/input';
+import { Label } from '../components/ui/label';
+import { getInputErrorMessage } from '../lib/forms';
 
 type Props = {
   groupClassName?: string;
@@ -10,7 +12,7 @@ type Props = {
   label?: string;
 } & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 
-const TextInput = (props: Props) => {
+export const TextInput = (props: Props) => {
   const {
     formState: { errors },
     register,
@@ -18,22 +20,19 @@ const TextInput = (props: Props) => {
   const { className, groupClassName = '', isRequired, label, ...inputProps } = props;
   const errorMessage = getInputErrorMessage(errors, inputProps.name);
 
-  const inputClasses = classNames(
-    'block w-full px-4 py-2 text-gray-900 placeholder-gray-600 bg-white border border-gray-300 rounded-lg caret-gray-900 placeholder:text-xs placeholder:font-normal',
-    className,
-  );
+  const inputClasses = classNames('block w-full', className);
   const inputLabel = label ? `${label}${isRequired ? '*' : ''}` : undefined;
   const formGroupClasses = classNames(inputLabel ? 'mb-4' : '', groupClassName);
 
   return (
     <div className={formGroupClasses}>
       {inputLabel && (
-        <label htmlFor={inputProps.name} className="text-base font-medium text-gray-900">
+        <Label htmlFor={inputProps.name} className="text-base font-medium text-gray-900">
           {inputLabel}
-        </label>
+        </Label>
       )}
       <div className="mt-1">
-        <input
+        <Input
           autoComplete="off"
           id={inputProps.name}
           className={inputClasses}
@@ -45,5 +44,3 @@ const TextInput = (props: Props) => {
     </div>
   );
 };
-
-export { TextInput };
diff --git a/packages/front/graphql/folders/mutations/create-folder.ts b/packages/front/graphql/folders/mutations/create-folder.ts
index 6e050dd6..fc9356dd 100644
--- a/packages/front/graphql/folders/mutations/create-folder.ts
+++ b/packages/front/graphql/folders/mutations/create-folder.ts
@@ -10,8 +10,6 @@ const mutationDocument = gql`
   }
 `;
 
-const useCreateFolderMutation = () => {
+export const useCreateFolderMutation = () => {
   return useMutation<CreateFolderMutation, CreateFolderMutationVariables>(mutationDocument);
 };
-
-export default useCreateFolderMutation;
diff --git a/packages/front/graphql/folders/mutations/delete-folders.ts b/packages/front/graphql/folders/mutations/delete-folders.ts
index 26dc388f..77f43295 100644
--- a/packages/front/graphql/folders/mutations/delete-folders.ts
+++ b/packages/front/graphql/folders/mutations/delete-folders.ts
@@ -8,8 +8,6 @@ const mutationDocument = gql`
   }
 `;
 
-const useDeleteFoldersMutation = () => {
+export const useDeleteFoldersMutation = () => {
   return useMutation<DeleteFoldersMutation, DeleteFoldersMutationVariables>(mutationDocument);
 };
-
-export default useDeleteFoldersMutation;
diff --git a/packages/front/graphql/folders/mutations/update-folder.ts b/packages/front/graphql/folders/mutations/update-folder.ts
index 96007087..4b769956 100644
--- a/packages/front/graphql/folders/mutations/update-folder.ts
+++ b/packages/front/graphql/folders/mutations/update-folder.ts
@@ -13,8 +13,6 @@ const mutationDocument = gql`
   }
 `;
 
-const useUpdateFolderMutation = () => {
+export const useUpdateFolderMutation = () => {
   return useMutation<UpdateFolderMutation, UpdateFolderMutationVariables>(mutationDocument);
 };
-
-export default useUpdateFolderMutation;
diff --git a/packages/front/graphql/newsletters/mutations/subscribe-newsletter.ts b/packages/front/graphql/newsletters/mutations/subscribe-newsletter.ts
index dcbb3fd8..c2a6fcbc 100644
--- a/packages/front/graphql/newsletters/mutations/subscribe-newsletter.ts
+++ b/packages/front/graphql/newsletters/mutations/subscribe-newsletter.ts
@@ -2,7 +2,7 @@ import { gql, useMutation } from '@apollo/client';
 
 import { SubscribeNewsletterMutation, SubscribeNewsletterMutationVariables } from '../../generated';
 
-const subscribeNewsletterMutation = gql`
+export const subscribeNewsletterMutation = gql`
   mutation subscribeNewsletter($email: String!) {
     subscribeToNewsletter(email: $email) {
       message
@@ -10,9 +10,6 @@ const subscribeNewsletterMutation = gql`
   }
 `;
 
-const useSubscribeToNewsletterMutation = () => {
+export const useSubscribeToNewsletterMutation = () => {
   return useMutation<SubscribeNewsletterMutation, SubscribeNewsletterMutationVariables>(subscribeNewsletterMutation);
 };
-
-export default useSubscribeToNewsletterMutation;
-export { subscribeNewsletterMutation };
diff --git a/packages/front/graphql/snippets/mutations/create-snippet.ts b/packages/front/graphql/snippets/mutations/create-snippet.ts
index 5c9de61f..ced022b5 100644
--- a/packages/front/graphql/snippets/mutations/create-snippet.ts
+++ b/packages/front/graphql/snippets/mutations/create-snippet.ts
@@ -10,8 +10,6 @@ const mutationDocument = gql`
   }
 `;
 
-const useCreateSnippetMutation = () => {
+export const useCreateSnippetMutation = () => {
   return useMutation<CreateSnippetMutation, CreateSnippetMutationVariables>(mutationDocument);
 };
-
-export default useCreateSnippetMutation;
diff --git a/packages/front/graphql/snippets/mutations/delete-snippet.ts b/packages/front/graphql/snippets/mutations/delete-snippet.ts
index f344a0fa..6275bcb0 100644
--- a/packages/front/graphql/snippets/mutations/delete-snippet.ts
+++ b/packages/front/graphql/snippets/mutations/delete-snippet.ts
@@ -8,8 +8,6 @@ const mutationDocument = gql`
   }
 `;
 
-const useDeleteSnippetMutation = () => {
+export const useDeleteSnippetMutation = () => {
   return useMutation<DeleteSnippetMutation, DeleteSnippetMutationVariables>(mutationDocument);
 };
-
-export default useDeleteSnippetMutation;
diff --git a/packages/front/graphql/snippets/mutations/update-snippet.ts b/packages/front/graphql/snippets/mutations/update-snippet.ts
index 2c3b014c..fee754d1 100644
--- a/packages/front/graphql/snippets/mutations/update-snippet.ts
+++ b/packages/front/graphql/snippets/mutations/update-snippet.ts
@@ -19,8 +19,6 @@ const mutationDocument = gql`
   }
 `;
 
-const useUpdateSnippetMutation = () => {
+export const useUpdateSnippetMutation = () => {
   return useMutation<UpdateSnippetMutation, UpdateSnippetMutationVariables>(mutationDocument);
 };
-
-export default useUpdateSnippetMutation;
diff --git a/packages/front/graphql/users/mutations/login-user.ts b/packages/front/graphql/users/mutations/login-user.ts
index dbf8a109..cc9f3c09 100644
--- a/packages/front/graphql/users/mutations/login-user.ts
+++ b/packages/front/graphql/users/mutations/login-user.ts
@@ -11,8 +11,6 @@ const queryDocument = gql`
   }
 `;
 
-const useLoginUserMutation = () => {
+export const useLoginUserMutation = () => {
   return useMutation<LoginUserMutation, LoginUserMutationVariables>(queryDocument);
 };
-
-export default useLoginUserMutation;
diff --git a/packages/front/graphql/users/mutations/signup-user.ts b/packages/front/graphql/users/mutations/signup-user.ts
index 74227bfc..f40f0a55 100644
--- a/packages/front/graphql/users/mutations/signup-user.ts
+++ b/packages/front/graphql/users/mutations/signup-user.ts
@@ -10,8 +10,6 @@ const queryDocument = gql`
   }
 `;
 
-const useSignupUserMutation = () => {
+export const useSignupUserMutation = () => {
   return useMutation<SignupUserMutation, SignupUserMutationVariables>(queryDocument);
 };
-
-export default useSignupUserMutation;
diff --git a/packages/front/hooks/index.ts b/packages/front/hooks/index.ts
deleted file mode 100644
index b56fe573..00000000
--- a/packages/front/hooks/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import useBooleanState from './use-boolean-state';
-import { useCodeHighlighter } from './use-code-highlighter';
-
-export { useBooleanState, useCodeHighlighter };
diff --git a/packages/front/hooks/use-boolean-state.ts b/packages/front/hooks/use-boolean-state.ts
index 8a61d8a8..c69e0bc5 100644
--- a/packages/front/hooks/use-boolean-state.ts
+++ b/packages/front/hooks/use-boolean-state.ts
@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
 
-const useBooleanState = (initialState = false) => {
+export const useBooleanState = (initialState = false) => {
   const [boolean, setBoolean] = useState(initialState);
 
   const setToTrue = useCallback(() => setBoolean(true), []);
@@ -9,5 +9,3 @@ const useBooleanState = (initialState = false) => {
 
   return [boolean, setToTrue, setToFalse] as const;
 };
-
-export default useBooleanState;
diff --git a/packages/front/hooks/use-copy-to-clipboard.ts b/packages/front/hooks/use-copy-to-clipboard.ts
index c9aff9e2..cee47c0c 100644
--- a/packages/front/hooks/use-copy-to-clipboard.ts
+++ b/packages/front/hooks/use-copy-to-clipboard.ts
@@ -6,7 +6,7 @@ type CopyFn = (text: string) => Promise<boolean>;
 /**
  * @link https://usehooks-ts.com/react-hook/use-copy-to-clipboard
  */
-const useCopyToClipboard = (): [CopiedValue, CopyFn] => {
+export const useCopyToClipboard = (): [CopiedValue, CopyFn] => {
   const [copiedText, setCopiedText] = useState<CopiedValue>(null);
 
   const copy: CopyFn = async (text) => {
@@ -31,5 +31,3 @@ const useCopyToClipboard = (): [CopiedValue, CopyFn] => {
 
   return [copiedText, copy];
 };
-
-export { useCopyToClipboard };
diff --git a/packages/front/hooks/use-hover.ts b/packages/front/hooks/use-hover.ts
index b2df2c6a..0a8b1190 100644
--- a/packages/front/hooks/use-hover.ts
+++ b/packages/front/hooks/use-hover.ts
@@ -3,7 +3,7 @@ import { useCallback, useRef, useState } from 'react';
 /**
  * @link https://gist.github.com/mbelsky/72c1117a63489daf8e6067049d4532d0
  */
-const useHover = <T extends HTMLElement>(): [(node?: T | null) => void, boolean] => {
+export const useHover = <T extends HTMLElement>(): [(node?: T | null) => void, boolean] => {
   const [value, setValue] = useState(false);
 
   // Wrap in useCallback so we can use in dependencies below
@@ -36,5 +36,3 @@ const useHover = <T extends HTMLElement>(): [(node?: T | null) => void, boolean]
 
   return [callbackRef, value];
 };
-
-export { useHover };
diff --git a/packages/front/hooks/use-toast.ts b/packages/front/hooks/use-toast.ts
new file mode 100644
index 00000000..6f83064c
--- /dev/null
+++ b/packages/front/hooks/use-toast.ts
@@ -0,0 +1,206 @@
+import { useEffect, useState } from 'react';
+
+import type { ToastActionElement, ToastProps } from '../components/ui/toast';
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+  action?: ToastActionElement;
+  description?: React.ReactNode;
+  id: string;
+  title?: React.ReactNode;
+};
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      toast: ToasterToast;
+      type: ActionType['ADD_TOAST'];
+    }
+  | {
+      toast: Partial<ToasterToast>;
+      type: ActionType['UPDATE_TOAST'];
+    }
+  | {
+      toastId?: ToasterToast['id'];
+      type: ActionType['DISMISS_TOAST'];
+    }
+  | {
+      toastId?: ToasterToast['id'];
+      type: ActionType['REMOVE_TOAST'];
+    };
+
+type 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);
+    // eslint-disable-next-line no-use-before-define
+    dispatch({
+      toastId,
+      type: 'REMOVE_TOAST',
+    });
+  }, 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) => {
+          const isDefined = t.id === toastId || toastId === undefined;
+
+          return isDefined ? { ...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({
+      toast: { ...props, id },
+      type: 'UPDATE_TOAST',
+    });
+  const dismiss = () => dispatch({ toastId: id, type: 'DISMISS_TOAST' });
+
+  dispatch({
+    toast: {
+      ...props,
+      id,
+      onOpenChange: (open) => {
+        if (!open) {
+          dismiss();
+        }
+      },
+      open: true,
+    },
+    type: 'ADD_TOAST',
+  });
+
+  return {
+    dismiss,
+    id,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = useState<State>(memoryState);
+
+  useEffect(() => {
+    listeners.push(setState);
+
+    return () => {
+      const index = listeners.indexOf(setState);
+
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  const toastSuccess = (message: string) => {
+    toast({
+      description: message,
+      title: 'Success',
+      variant: 'success',
+    });
+  };
+
+  const toastError = (message: string) => {
+    toast({
+      description: message,
+      title: 'Error',
+      variant: 'destructive',
+    });
+  };
+
+  return {
+    ...state,
+    dismiss: (toastId?: string) => dispatch({ toastId, type: 'DISMISS_TOAST' }),
+    toast,
+    toastError,
+    toastSuccess,
+  };
+}
+
+export { useToast, toast };
diff --git a/packages/front/icons/check.tsx b/packages/front/icons/check.tsx
deleted file mode 100644
index bcead5cb..00000000
--- a/packages/front/icons/check.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-const CheckIcon = () => {
-  return (
-    <svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-      />
-    </svg>
-  );
-};
-
-export default CheckIcon;
diff --git a/packages/front/icons/collection.tsx b/packages/front/icons/collection.tsx
deleted file mode 100644
index d03f7382..00000000
--- a/packages/front/icons/collection.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-const CollectionIcon = () => {
-  return (
-    <svg
-      className="feature-icon"
-      fill="none"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-      />
-    </svg>
-  );
-};
-
-export default CollectionIcon;
diff --git a/packages/front/icons/cross.tsx b/packages/front/icons/cross.tsx
deleted file mode 100644
index 6c8aeee5..00000000
--- a/packages/front/icons/cross.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-const CrossIcon = () => {
-  return (
-    <svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-      />
-    </svg>
-  );
-};
-
-export default CrossIcon;
diff --git a/packages/front/icons/document-search.tsx b/packages/front/icons/document-search.tsx
deleted file mode 100644
index 75c2197b..00000000
--- a/packages/front/icons/document-search.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-const DocumentSearchIcon = () => {
-  return (
-    <svg
-      className="feature-icon"
-      fill="none"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        d="M10 21h7a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v11m0 5l4.879-4.879m0 0a3 3 0 104.243-4.242 3 3 0 00-4.243 4.242z"
-      />
-    </svg>
-  );
-};
-
-export default DocumentSearchIcon;
diff --git a/packages/front/icons/embed.tsx b/packages/front/icons/embed.tsx
deleted file mode 100644
index 54267d57..00000000
--- a/packages/front/icons/embed.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-const EmbedIcon = () => {
-  return (
-    <svg
-      className="feature-icon"
-      fill="none"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
-      />
-    </svg>
-  );
-};
-
-export default EmbedIcon;
diff --git a/packages/front/icons/extension.tsx b/packages/front/icons/extension.tsx
deleted file mode 100644
index b241090e..00000000
--- a/packages/front/icons/extension.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-const ExtensionIcon = () => {
-  return (
-    <svg
-      className="feature-icon"
-      fill="none"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
-      />
-    </svg>
-  );
-};
-
-export default ExtensionIcon;
diff --git a/packages/front/icons/github.tsx b/packages/front/icons/github.tsx
index f3e432f8..5674ece5 100644
--- a/packages/front/icons/github.tsx
+++ b/packages/front/icons/github.tsx
@@ -1,4 +1,4 @@
-const GithubIcon = () => {
+export const GithubIcon = () => {
   return (
     <svg className="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
       <path
@@ -9,5 +9,3 @@ const GithubIcon = () => {
     </svg>
   );
 };
-
-export default GithubIcon;
diff --git a/packages/front/icons/google.tsx b/packages/front/icons/google.tsx
index f97cc092..89923d92 100644
--- a/packages/front/icons/google.tsx
+++ b/packages/front/icons/google.tsx
@@ -1,4 +1,4 @@
-const GoogleIcon = () => {
+export const GoogleIcon = () => {
   return (
     <svg className="w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -28,5 +28,3 @@ const GoogleIcon = () => {
     </svg>
   );
 };
-
-export default GoogleIcon;
diff --git a/packages/front/icons/import.tsx b/packages/front/icons/import.tsx
deleted file mode 100644
index 48002dc4..00000000
--- a/packages/front/icons/import.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-const ImportIcon = () => {
-  return (
-    <svg
-      className="feature-icon"
-      fill="none"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"
-      />
-    </svg>
-  );
-};
-
-export default ImportIcon;
diff --git a/packages/front/icons/index.tsx b/packages/front/icons/index.tsx
index f2ed0e9a..5a3d0133 100644
--- a/packages/front/icons/index.tsx
+++ b/packages/front/icons/index.tsx
@@ -1,64 +1,42 @@
 import {
-  CalendarIcon,
-  ChartBarIcon,
-  ChevronDoubleLeftIcon,
-  ChevronDoubleRightIcon,
-  ChevronDownIcon,
-  DocumentPlusIcon as DocumentAddIcon,
-  FolderPlusIcon as FolderAddIcon,
-  FolderIcon,
-  HomeIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
+  CircleCheckIcon,
+  CircleXIcon,
+  CloudDownloadIcon,
+  FileSearch2Icon,
+  GalleryVerticalEndIcon,
   InboxIcon,
-  Bars3Icon as MenuIcon,
-  MagnifyingGlassIcon as SearchIcon,
-  UsersIcon,
-  XMarkIcon as XIcon,
-} from '@heroicons/react/24/outline';
+  Loader2 as LoaderIcon,
+  SearchIcon,
+  Share2Icon,
+  SlidersVerticalIcon,
+} from 'lucide-react';
 
-import CheckIcon from './check';
-import CollectionIcon from './collection';
-import CrossIcon from './cross';
-import DocumentSearchIcon from './document-search';
-import EmbedIcon from './embed';
-import ExtensionIcon from './extension';
-import GithubIcon from './github';
-import GoogleIcon from './google';
-import ImportIcon from './import';
-import LogoIcon from './logo';
-import LogoLightIcon from './logo-light';
-import ProductHuntIcon from './product-hunt';
-import ShareIcon from './share';
-import SpinnerIcon from './spinner';
-import TwitterIcon from './twitter';
+import { GithubIcon } from './github';
+import { GoogleIcon } from './google';
+import { LogoIcon } from './logo';
+import { LogoLightIcon } from './logo-light';
+import { ProductHuntIcon } from './product-hunt';
+import { TwitterIcon } from './twitter';
 
 export {
-  CalendarIcon,
-  ChartBarIcon,
-  CheckIcon,
-  ChevronDoubleLeftIcon,
-  ChevronDoubleRightIcon,
-  ChevronDownIcon,
-  CollectionIcon,
-  CrossIcon,
-  DocumentAddIcon,
-  DocumentSearchIcon,
-  EmbedIcon,
-  ExtensionIcon,
-  FolderIcon,
-  FolderAddIcon,
+  CircleCheckIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
+  GalleryVerticalEndIcon,
+  CircleXIcon,
+  InboxIcon,
+  SlidersVerticalIcon,
+  FileSearch2Icon,
   GithubIcon,
   GoogleIcon,
-  HomeIcon,
-  ImportIcon,
-  InboxIcon,
+  CloudDownloadIcon,
+  LoaderIcon,
   LogoIcon,
   LogoLightIcon,
-  MenuIcon,
   ProductHuntIcon,
   SearchIcon,
-  ShareIcon,
-  SpinnerIcon,
+  Share2Icon,
   TwitterIcon,
-  UsersIcon,
-  XIcon,
 };
diff --git a/packages/front/icons/logo-light.tsx b/packages/front/icons/logo-light.tsx
index 7d1a9169..5afff47f 100644
--- a/packages/front/icons/logo-light.tsx
+++ b/packages/front/icons/logo-light.tsx
@@ -1,36 +1,7 @@
-import { IconProps } from '../typings/components';
+import { IconProps } from '../types/components';
 
-const LogoLightIcon = ({ className, height = 32, width = 32 }: IconProps) => {
+export const LogoLightIcon = ({ className, height = 32, width = 32 }: IconProps) => {
   return (
-    /*<svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 712.44 154"
-      fill="#1a1a1a"
-      height={height}
-      width={width}
-      className={className}
-    >
-      <g>
-        <g>
-          <path d="M73.5,75.67a7.18,7.18,0,1,1-7.18,7.18,7.19,7.19,0,0,1,7.18-7.18m0-5A12.17,12.17,0,1,0,85.67,82.85,12.15,12.15,0,0,0,73.5,70.69Z" />
-          <path d="M109,60.24c-2-1.31-4-2.53-6.1-3.74-4.53-18.85-14.16-34.3-28-50C63.09,21.71,43,44.14,53,93a37.89,37.89,0,0,0,4.65-.6l-6.3,20.72q-6-9-12.08-18c1.55-.27,3.1-.45,4.63-.74-.33-3.67-1.22-8.65-1.39-12.12C40.46,46.56,53.66,20.32,74.84,0c8,7.24,24,24.71,30.33,43.87A95.34,95.34,0,0,1,109,60.24Z" />
-          <path d="M35.09,66.62c-.14,2.37-.2,4.73-.19,7.16C20.84,87.13,12.28,103.19,5.64,123c19,2.61,48.52,8.82,85.79-24.29A38.57,38.57,0,0,0,88.59,95l21.09-4.9c-3.19,6.48-6.36,13-9.53,19.45-1-1.21-1.94-2.46-3-3.64-3,2.12-6.88,5.38-9.81,7.26C57.52,132.82,28.19,134.51,0,126.32c2.28-10.53,9.41-33.11,22.83-48.19A95.68,95.68,0,0,1,35.09,66.62Z" />
-          <path d="M78.18,125.5c2.12-1.06,4.19-2.2,6.29-3.41,18.59,5.5,36.78,4.88,57.29.7C134.5,105,125.14,76.37,77.83,60.65A41.56,41.56,0,0,0,76,65L61.24,49.16c7.2-.48,14.42-1,21.61-1.48-.55,1.48-1.17,2.91-1.68,4.38,3.34,1.56,8.1,3.27,11.19,4.86C124.29,73,140.42,97.54,147.43,126c-10.27,3.29-33.39,8.41-53.16,4.32A94.37,94.37,0,0,1,78.18,125.5Z" />
-          <path d="M100.09,24.21A65,65,0,0,1,138,92.81q2.07,3.36,3.89,6.91A70.22,70.22,0,0,0,95.1,16.83C96.8,19.15,98.47,21.62,100.09,24.21Z" />
-          <path d="M112.49,135.93a65,65,0,0,1-79.2-1c-.81,0-1.62.06-2.44.06-1.81,0-3.65-.06-5.48-.16a70.12,70.12,0,0,0,95.68.57C118.29,135.69,115.42,135.86,112.49,135.93Z" />
-          <path d="M8.75,91.15A65.13,65.13,0,0,1,52,22.18q1.93-3.34,4.14-6.59A70.22,70.22,0,0,0,4.88,98.87C6,96.33,7.33,93.74,8.75,91.15Z" />
-          <path d="M196.82,71.54q0,3.72,10.56,6.38a50.79,50.79,0,0,1,6.73,1.92,29.69,29.69,0,0,1,6.1,3.13,14.19,14.19,0,0,1,4.81,5.4,16.66,16.66,0,0,1,1.74,7.77q0,8.94-6.73,13.81t-16.59,4.76q-17.88,0-24.38-13.81l13-7.31q2.67,7.55,11.38,7.54,8,0,8-5,0-3.7-10.56-6.38c-2.63-.7-4.87-1.39-6.73-2.09a33.81,33.81,0,0,1-6-3.08,13.57,13.57,0,0,1-4.94-5.22,15.81,15.81,0,0,1-1.68-7.48q0-8.6,6.27-13.46t15.78-5a26.25,26.25,0,0,1,12.88,3.19,23.22,23.22,0,0,1,9.17,9.11l-12.76,7a9.56,9.56,0,0,0-9.29-5.92,8.2,8.2,0,0,0-4.81,1.34A4,4,0,0,0,196.82,71.54Z" />
-          <path d="M268.66,53.44q9.63,0,15.66,6.38,6.27,6.5,6.27,17.64v35.63h-15V79.31c0-3.79-1-6.73-3.07-8.82a11.31,11.31,0,0,0-8.42-3.13q-5.91,0-9.34,3.66t-3.42,10.73v31.34h-15V31.85h15V61.56Q256.7,53.43,268.66,53.44Z" />
-          <path d="M347.46,61.91V55.06h15v58h-15v-6.85q-6.73,8.48-18.92,8.47a26.54,26.54,0,0,1-20-8.82,31,31,0,0,1-8.24-21.82,30.87,30.87,0,0,1,8.24-21.7q8.35-8.94,20-8.93Q340.72,53.44,347.46,61.91Zm-27.62,34a16.82,16.82,0,0,0,23,0,16,16,0,0,0,4.65-11.84,15.64,15.64,0,0,0-4.65-11.72,16.53,16.53,0,0,0-23,0,15.86,15.86,0,0,0-4.53,11.72A16.24,16.24,0,0,0,319.84,95.91Z" />
-          <path d="M391,55.06V65a15.47,15.47,0,0,1,6.74-8.3,20.88,20.88,0,0,1,10.91-2.84V70.61a17.05,17.05,0,0,0-12.31,2.79c-3.55,2.4-5.34,6.38-5.34,11.95v27.74H376v-58Z" />
-          <path d="M424.74,48.1a9.31,9.31,0,0,1-9.16-9.17,9,9,0,0,1,2.72-6.5,8.72,8.72,0,0,1,6.44-2.79,8.84,8.84,0,0,1,6.56,2.79,9,9,0,0,1,2.73,6.5,8.8,8.8,0,0,1-2.73,6.44A8.93,8.93,0,0,1,424.74,48.1Zm7.55,65h-15v-58h15Z" />
-          <path d="M478.24,53.44q9.64,0,15.67,6.38,6.27,6.5,6.27,17.64v35.63h-15V79.31q0-5.69-3.08-8.82a11.27,11.27,0,0,0-8.41-3.13q-5.93,0-9.34,3.66T461,81.75v31.34H446v-58h15v6.5Q466.29,53.43,478.24,53.44Z" />
-          <path d="M557.39,62.25V55.06H572V110.3q0,13.35-8.94,20.54t-21.35,7.08q-19.74,0-27.51-14.16L527,116.45q4.29,8.13,15.2,8.13,7.08,0,11.14-3.72t4.06-10.56V104q-6.61,8.82-18.57,8.82a27.67,27.67,0,0,1-20.65-8.58,29.84,29.84,0,0,1-8.24-21.13,29.22,29.22,0,0,1,8.35-21,27.37,27.37,0,0,1,20.54-8.7Q550.77,53.44,557.39,62.25Zm-4.58,32.33a15.3,15.3,0,0,0,4.58-11.44,14.62,14.62,0,0,0-4.64-11.25,15.72,15.72,0,0,0-11.61-4.53,16.35,16.35,0,0,0-11.72,4.53,14.81,14.81,0,0,0-4.52,11.25,15.26,15.26,0,0,0,4.58,11.44,17.48,17.48,0,0,0,23.33,0Z" />
-          <path d="M629.69,61.91V55.06h15v58h-15v-6.85q-6.74,8.48-18.91,8.47a26.56,26.56,0,0,1-20-8.82,31,31,0,0,1-8.24-21.82,30.87,30.87,0,0,1,8.24-21.7q8.36-8.94,20-8.93Q623,53.44,629.69,61.91Zm-27.62,34a16.84,16.84,0,0,0,23,0,16,16,0,0,0,4.64-11.84,15.67,15.67,0,0,0-4.64-11.72,16.55,16.55,0,0,0-23,0,15.86,15.86,0,0,0-4.52,11.72A16.23,16.23,0,0,0,602.07,95.91Z" />
-          <path d="M690.5,53.44q9.63,0,15.67,6.38,6.27,6.5,6.27,17.64v35.63h-15V79.31q0-5.69-3.07-8.82A11.29,11.29,0,0,0,686,67.36q-5.93,0-9.35,3.66t-3.42,10.73v31.34h-15v-58h15v6.5Q678.55,53.43,690.5,53.44Z" />
-        </g>
-      </g>
-    </svg>*/
     <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 250 261.15"
@@ -53,5 +24,3 @@ const LogoLightIcon = ({ className, height = 32, width = 32 }: IconProps) => {
     </svg>
   );
 };
-
-export default LogoLightIcon;
diff --git a/packages/front/icons/logo.tsx b/packages/front/icons/logo.tsx
index dcc41d3e..44423027 100644
--- a/packages/front/icons/logo.tsx
+++ b/packages/front/icons/logo.tsx
@@ -1,6 +1,6 @@
-import { IconProps } from '../typings/components';
+import { IconProps } from '../types/components';
 
-const LogoIcon = ({ className, height = 32, width = 160 }: IconProps) => {
+export const LogoIcon = ({ className, height = 32, width = 160 }: IconProps) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -32,5 +32,3 @@ const LogoIcon = ({ className, height = 32, width = 160 }: IconProps) => {
     </svg>
   );
 };
-
-export default LogoIcon;
diff --git a/packages/front/icons/product-hunt.tsx b/packages/front/icons/product-hunt.tsx
index a2cfe3d3..b8ad2fc6 100644
--- a/packages/front/icons/product-hunt.tsx
+++ b/packages/front/icons/product-hunt.tsx
@@ -1,4 +1,4 @@
-const ProductHuntIcon = () => {
+export const ProductHuntIcon = () => {
   return (
     <svg className="w-6 h-6" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
       <title>Product Hunt</title>
@@ -6,5 +6,3 @@ const ProductHuntIcon = () => {
     </svg>
   );
 };
-
-export default ProductHuntIcon;
diff --git a/packages/front/icons/share.tsx b/packages/front/icons/share.tsx
deleted file mode 100644
index 6a08d613..00000000
--- a/packages/front/icons/share.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-const ShareIcon = () => {
-  return (
-    <svg
-      className="feature-icon"
-      fill="none"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
-      />
-    </svg>
-  );
-};
-
-export default ShareIcon;
diff --git a/packages/front/icons/spinner.tsx b/packages/front/icons/spinner.tsx
deleted file mode 100644
index 703ae014..00000000
--- a/packages/front/icons/spinner.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-const SpinnerIcon = () => {
-  return (
-    <svg
-      className="animate-spin-fast -ml-1 mr-3 h-5 w-5 text-white"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-      <path
-        className="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      />
-    </svg>
-  );
-};
-
-export default SpinnerIcon;
diff --git a/packages/front/icons/twitter.tsx b/packages/front/icons/twitter.tsx
index 66f0a303..18fd56f5 100644
--- a/packages/front/icons/twitter.tsx
+++ b/packages/front/icons/twitter.tsx
@@ -1,9 +1,7 @@
-const TwitterIcon = () => {
+export const TwitterIcon = () => {
   return (
     <svg className="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
       <path d="M19.633 7.997c.013.175.013.349.013.523 0 5.325-4.053 11.461-11.46 11.461-2.282 0-4.402-.661-6.186-1.809.324.037.636.05.973.05a8.07 8.07 0 0 0 5.001-1.721 4.036 4.036 0 0 1-3.767-2.793c.249.037.499.062.761.062.361 0 .724-.05 1.061-.137a4.027 4.027 0 0 1-3.23-3.953v-.05c.537.299 1.16.486 1.82.511a4.022 4.022 0 0 1-1.796-3.354c0-.748.199-1.434.548-2.032a11.457 11.457 0 0 0 8.306 4.215c-.062-.3-.1-.611-.1-.923a4.026 4.026 0 0 1 4.028-4.028c1.16 0 2.207.486 2.943 1.272a7.957 7.957 0 0 0 2.556-.973 4.02 4.02 0 0 1-1.771 2.22 8.073 8.073 0 0 0 2.319-.624 8.645 8.645 0 0 1-2.019 2.083z" />
     </svg>
   );
 };
-
-export default TwitterIcon;
diff --git a/packages/front/index.tsx b/packages/front/index.tsx
deleted file mode 100644
index 9105402d..00000000
--- a/packages/front/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from '@headlessui/react';
diff --git a/packages/front/utils/classnames.ts b/packages/front/lib/classnames.ts
similarity index 100%
rename from packages/front/utils/classnames.ts
rename to packages/front/lib/classnames.ts
diff --git a/packages/front/utils/constants.ts b/packages/front/lib/constants.ts
similarity index 96%
rename from packages/front/utils/constants.ts
rename to packages/front/lib/constants.ts
index 59995216..b57a8c07 100644
--- a/packages/front/utils/constants.ts
+++ b/packages/front/lib/constants.ts
@@ -1,4 +1,4 @@
-import { SelectOption } from '../typings/components';
+import { SelectOption } from '../types/components';
 
 export const REGEX_EMAIL = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
 export const FOLDER_NAME_REGEX = /^((\w)+\s?\-*)+$/;
diff --git a/packages/front/utils/forms.ts b/packages/front/lib/forms.ts
similarity index 100%
rename from packages/front/utils/forms.ts
rename to packages/front/lib/forms.ts
diff --git a/packages/front/utils/snippets.ts b/packages/front/lib/snippets.ts
similarity index 54%
rename from packages/front/utils/snippets.ts
rename to packages/front/lib/snippets.ts
index 5057f3af..f875ead3 100644
--- a/packages/front/utils/snippets.ts
+++ b/packages/front/lib/snippets.ts
@@ -11,11 +11,3 @@ export const extractLanguageFromName = (name: string): string => {
 
   return nameArrayPart[nameArrayPart.length - 1];
 };
-
-export const generateShareableLink = (snippetId: string): string => {
-  return `${process.env.SHAREABLE_HOST}/snippets/${snippetId}`;
-};
-
-export const generateEmbeddableLink = (snippetId: string): string => {
-  return `${process.env.EMBEDDABLE_HOST}/${snippetId}`;
-};
diff --git a/packages/front/utils/text.ts b/packages/front/lib/text.ts
similarity index 72%
rename from packages/front/utils/text.ts
rename to packages/front/lib/text.ts
index e7767794..c954e9c1 100644
--- a/packages/front/utils/text.ts
+++ b/packages/front/lib/text.ts
@@ -1,7 +1,7 @@
 const DEFAULT_MAX_LENGTH = 15;
 const DOT_COUNT = 3;
 
-const truncate = (text: string, maxLength: number = DEFAULT_MAX_LENGTH) => {
+export const truncate = (text: string, maxLength: number = DEFAULT_MAX_LENGTH) => {
   if (text.length <= maxLength) {
     return text;
   }
@@ -19,10 +19,8 @@ const numberToString = (value: number): string => {
   return value < 10 ? `0${value}` : value.toString();
 };
 
-const displayItemLabel = (itemCount: number, itemLabel: string) => {
+export const displayItemLabel = (itemCount: number, itemLabel: string) => {
   const label = itemCount < 2 ? itemLabel : `${itemLabel}s`;
 
   return `${numberToString(itemCount)} ${label}`;
 };
-
-export { truncate, displayItemLabel };
diff --git a/packages/front/lib/utils.ts b/packages/front/lib/utils.ts
new file mode 100644
index 00000000..bff778ea
--- /dev/null
+++ b/packages/front/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs));
+};
diff --git a/packages/front/package.json b/packages/front/package.json
index 5cae5c1b..0da93d2b 100644
--- a/packages/front/package.json
+++ b/packages/front/package.json
@@ -8,21 +8,33 @@
   "scripts": {
     "gql:gen:types": "graphql-codegen --config codegen.yml",
     "build": "tsc --project tsconfig.json",
-    "clean": "rm -rf .turbo dist"
+    "clean": "rm -rf .turbo dist",
+    "lint": "eslint . --fix"
   },
   "dependencies": {
-    "@heroicons/react": "2.1.3",
+    "@radix-ui/react-alert-dialog": "1.1.1",
+    "@radix-ui/react-avatar": "1.1.0",
+    "@radix-ui/react-dropdown-menu": "2.1.1",
+    "@radix-ui/react-label": "2.1.0",
+    "@radix-ui/react-select": "2.1.1",
+    "@radix-ui/react-slot": "1.1.0",
+    "@radix-ui/react-switch": "1.1.0",
+    "@radix-ui/react-toast": "1.2.1",
+    "lucide-react": "0.408.0",
     "react-simple-code-editor": "0.13.1",
     "shiki": "0.14.7"
   },
   "peerDependencies": {
     "@apollo/client": "3.10.6",
-    "@headlessui/react": "1.7.18",
     "@hookform/resolvers": "3.6.0",
+    "class-variance-authority": "0.7.0",
     "classnames": "2.5.1",
+    "clsx": "2.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-hook-form": "7.52.0",
+    "tailwind-merge": "2.4.0",
+    "tailwindcss-animate": "1.0.7",
     "yup": "1.4.0"
   },
   "devDependencies": {
@@ -30,7 +42,6 @@
     "@graphql-codegen/cli": "5.0.2",
     "@graphql-codegen/typescript": "4.0.7",
     "@graphql-codegen/typescript-operations": "4.2.1",
-    "@headlessui/react": "2.1.0",
     "@tailwindcss/forms": "0.5.7",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
diff --git a/packages/front/services/folders/create-folder.ts b/packages/front/services/folders/create-folder.ts
index ffe29cab..31cfd1bd 100644
--- a/packages/front/services/folders/create-folder.ts
+++ b/packages/front/services/folders/create-folder.ts
@@ -1,4 +1,4 @@
-import useCreateFolderMutation from '../../graphql/folders/mutations/create-folder';
+import { useCreateFolderMutation } from '../../graphql/folders/mutations/create-folder';
 import { listDirectoryQueryDocument } from '../../graphql/folders/queries/list-directory';
 import { CreateFolderInput } from '../../graphql/generated';
 
diff --git a/packages/front/services/folders/delete-folders.ts b/packages/front/services/folders/delete-folders.ts
index df2840fc..f51a0693 100644
--- a/packages/front/services/folders/delete-folders.ts
+++ b/packages/front/services/folders/delete-folders.ts
@@ -1,4 +1,4 @@
-import useDeleteFoldersMutation from '../../graphql/folders/mutations/delete-folders';
+import { useDeleteFoldersMutation } from '../../graphql/folders/mutations/delete-folders';
 import { listDirectoryQueryDocument } from '../../graphql/folders/queries/list-directory';
 
 type MutationArgs = {
diff --git a/packages/front/services/folders/find-folder.ts b/packages/front/services/folders/find-folder.ts
index 6433fbcb..5450c63a 100644
--- a/packages/front/services/folders/find-folder.ts
+++ b/packages/front/services/folders/find-folder.ts
@@ -1,6 +1,6 @@
 import { useFindFolderQuery } from '../../graphql/folders/queries/find-folder';
 import { FindFolderQuery } from '../../graphql/generated';
-import { FindFolderData } from '../../typings/queries';
+import { FindFolderData } from '../../types/queries';
 
 const formatFindFolderResult = (data?: FindFolderQuery): FindFolderData | undefined => {
   if (!data?.findFolder) {
diff --git a/packages/front/services/folders/list-directory.ts b/packages/front/services/folders/list-directory.ts
index 6a738a78..d4119e92 100644
--- a/packages/front/services/folders/list-directory.ts
+++ b/packages/front/services/folders/list-directory.ts
@@ -1,6 +1,6 @@
 import { useLazyListDirectoryQuery, useListDirectoryQuery } from '../../graphql/folders/queries/list-directory';
 import { ListDirectoryQuery } from '../../graphql/generated';
-import { DirectoryList } from '../../typings/queries';
+import { DirectoryList } from '../../types/queries';
 
 const formatListDirectoryResult = (folderId: string, data?: ListDirectoryQuery): DirectoryList | undefined => {
   if (!data?.listDirectory) {
diff --git a/packages/front/services/folders/update-folder.ts b/packages/front/services/folders/update-folder.ts
index edc6418b..6a973b96 100644
--- a/packages/front/services/folders/update-folder.ts
+++ b/packages/front/services/folders/update-folder.ts
@@ -1,4 +1,4 @@
-import useUpdateFolderMutation from '../../graphql/folders/mutations/update-folder';
+import { useUpdateFolderMutation } from '../../graphql/folders/mutations/update-folder';
 import { findFolderQueryDocument } from '../../graphql/folders/queries/find-folder';
 import { listDirectoryQueryDocument } from '../../graphql/folders/queries/list-directory';
 import { UpdateFolderInput } from '../../graphql/generated';
diff --git a/packages/front/services/newsletters/subscribe-to-newsletter.ts b/packages/front/services/newsletters/subscribe-to-newsletter.ts
index 9c0ba7d0..5338033a 100644
--- a/packages/front/services/newsletters/subscribe-to-newsletter.ts
+++ b/packages/front/services/newsletters/subscribe-to-newsletter.ts
@@ -1,4 +1,4 @@
-import useSubscribeToNewsletterMutation from '../../graphql/newsletters/mutations/subscribe-newsletter';
+import { useSubscribeToNewsletterMutation } from '../../graphql/newsletters/mutations/subscribe-newsletter';
 
 type MutationArgs = {
   input: { email: string };
diff --git a/packages/front/services/snippets/create-snippet.ts b/packages/front/services/snippets/create-snippet.ts
index ae04ba7e..65f9ac20 100644
--- a/packages/front/services/snippets/create-snippet.ts
+++ b/packages/front/services/snippets/create-snippet.ts
@@ -1,6 +1,6 @@
 import { listDirectoryQueryDocument } from '../../graphql/folders/queries/list-directory';
 import { CreateSnippetInput } from '../../graphql/generated';
-import useCreateSnippetMutation from '../../graphql/snippets/mutations/create-snippet';
+import { useCreateSnippetMutation } from '../../graphql/snippets/mutations/create-snippet';
 
 type MutationArgs = {
   input: CreateSnippetInput;
diff --git a/packages/front/services/snippets/delete-snippet.ts b/packages/front/services/snippets/delete-snippet.ts
index 27f80709..749caf02 100644
--- a/packages/front/services/snippets/delete-snippet.ts
+++ b/packages/front/services/snippets/delete-snippet.ts
@@ -1,5 +1,5 @@
 import { listDirectoryQueryDocument } from '../../graphql/folders/queries/list-directory';
-import useDeleteSnippetMutation from '../../graphql/snippets/mutations/delete-snippet';
+import { useDeleteSnippetMutation } from '../../graphql/snippets/mutations/delete-snippet';
 
 type MutationArgs = {
   id: string;
diff --git a/packages/front/services/snippets/find-snippet.ts b/packages/front/services/snippets/find-snippet.ts
index d5aaa6ce..de238238 100644
--- a/packages/front/services/snippets/find-snippet.ts
+++ b/packages/front/services/snippets/find-snippet.ts
@@ -1,6 +1,6 @@
 import { FindSnippetQuery } from '../../graphql/generated';
 import { useFindSnippetQuery } from '../../graphql/snippets/queries/find-snippet';
-import { SnippetInfo } from '../../typings/queries';
+import { SnippetInfo } from '../../types/queries';
 
 const formatFindSnippetResult = (data?: FindSnippetQuery): SnippetInfo | undefined => {
   if (!data?.findSnippet) {
diff --git a/packages/front/services/snippets/public-snippets.ts b/packages/front/services/snippets/public-snippets.ts
index 4ccbd260..0db4e18b 100644
--- a/packages/front/services/snippets/public-snippets.ts
+++ b/packages/front/services/snippets/public-snippets.ts
@@ -1,6 +1,6 @@
 import { PublicSnippetsQuery } from '../../graphql/generated';
 import { useLazyPublicSnippetsQuery } from '../../graphql/snippets/queries/public-snippets';
-import { PublicSnippetResult } from '../../typings/queries';
+import { PublicSnippetResult } from '../../types/queries';
 
 type FindPublicSnippetsArgs = {
   input: {
diff --git a/packages/front/services/snippets/update-snippet.ts b/packages/front/services/snippets/update-snippet.ts
index ad11af47..65734519 100644
--- a/packages/front/services/snippets/update-snippet.ts
+++ b/packages/front/services/snippets/update-snippet.ts
@@ -1,6 +1,6 @@
 import { listDirectoryQueryDocument } from '../../graphql/folders/queries/list-directory';
 import { UpdateSnippetInput } from '../../graphql/generated';
-import useUpdateSnippetMutation from '../../graphql/snippets/mutations/update-snippet';
+import { useUpdateSnippetMutation } from '../../graphql/snippets/mutations/update-snippet';
 import { findSnippetQueryDocument } from '../../graphql/snippets/queries/find-snippet';
 
 type MutationArgs = {
diff --git a/packages/front/services/users/authenticated-user.ts b/packages/front/services/users/authenticated-user.ts
index ee836655..4c6ca8a7 100644
--- a/packages/front/services/users/authenticated-user.ts
+++ b/packages/front/services/users/authenticated-user.ts
@@ -1,6 +1,6 @@
 import { AuthenticatedUserQuery } from '../../graphql/generated';
 import { useAuthenticatedUserQuery } from '../../graphql/users/queries/authenticated-user';
-import { AuthenticatedUser } from '../../typings/queries';
+import { AuthenticatedUser } from '../../types/queries';
 
 const formatAuthenticatedUserResult = (data?: AuthenticatedUserQuery): AuthenticatedUser | undefined => {
   if (!data?.authenticatedUser) {
diff --git a/packages/front/services/users/login-user.ts b/packages/front/services/users/login-user.ts
index b012025b..0af1fcf8 100644
--- a/packages/front/services/users/login-user.ts
+++ b/packages/front/services/users/login-user.ts
@@ -1,5 +1,5 @@
-import useLoginUserMutation from '../../graphql/users/mutations/login-user';
-import { LoginInput } from '../../typings/queries';
+import { useLoginUserMutation } from '../../graphql/users/mutations/login-user';
+import { LoginInput } from '../../types/queries';
 
 type MutationArgs = {
   input: LoginInput;
diff --git a/packages/front/services/users/signup-user.ts b/packages/front/services/users/signup-user.ts
index a275ef81..416a6377 100644
--- a/packages/front/services/users/signup-user.ts
+++ b/packages/front/services/users/signup-user.ts
@@ -1,5 +1,5 @@
-import useSignupUserMutation from '../../graphql/users/mutations/signup-user';
-import { SignupUserInput } from '../../typings/queries';
+import { useSignupUserMutation } from '../../graphql/users/mutations/signup-user';
+import { SignupUserInput } from '../../types/queries';
 
 type MutationArgs = {
   input: SignupUserInput;
diff --git a/packages/front/src/graphql/generated.ts b/packages/front/src/graphql/generated.ts
deleted file mode 100644
index 756a7fd7..00000000
--- a/packages/front/src/graphql/generated.ts
+++ /dev/null
@@ -1,440 +0,0 @@
-export type Maybe<T> = T | null;
-export type InputMaybe<T> = Maybe<T>;
-export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
-export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
-export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
-/** All built-in and custom scalars, mapped to their actual values */
-export type Scalars = {
-  ID: string;
-  String: string;
-  Boolean: boolean;
-  Int: number;
-  Float: number;
-  Date: any;
-};
-
-export type CreateFolderInput = {
-  name: Scalars['String'];
-  parentId: Scalars['String'];
-};
-
-export type CreateSnippetInput = {
-  content: Scalars['String'];
-  contentHighlighted: Scalars['String'];
-  description?: InputMaybe<Scalars['String']>;
-  folderId: Scalars['String'];
-  language: Scalars['String'];
-  lineHighlight?: InputMaybe<Scalars['String']>;
-  name: Scalars['String'];
-  theme: Scalars['String'];
-  visibility: SnippetVisibility;
-};
-
-export type Directory = {
-  __typename?: 'Directory';
-  folders: Array<Folder>;
-  paths: Array<Folder>;
-  snippets: Array<Snippet>;
-};
-
-export type Folder = {
-  __typename?: 'Folder';
-  createdAt: Scalars['Date'];
-  id: Scalars['ID'];
-  isFavorite: Scalars['Boolean'];
-  name: Scalars['String'];
-  parent?: Maybe<Folder>;
-  subFolders: Array<Folder>;
-  subFoldersCount: Scalars['Int'];
-  updatedAt: Scalars['Date'];
-  user: User;
-};
-
-export type LoginResult = {
-  __typename?: 'LoginResult';
-  token: Scalars['String'];
-};
-
-export type Mutation = {
-  __typename?: 'Mutation';
-  createFolder: Folder;
-  createSnippet: Snippet;
-  deleteFolders: Scalars['Boolean'];
-  deleteSnippet: Scalars['Boolean'];
-  loginUser: LoginResult;
-  logoutUser: Scalars['Boolean'];
-  signupUser: SignupUserResult;
-  subscribeToNewsletter: Result;
-  updateFolder: Folder;
-  updateSnippet: Snippet;
-};
-
-export type MutationCreateFolderArgs = {
-  input: CreateFolderInput;
-};
-
-export type MutationCreateSnippetArgs = {
-  input: CreateSnippetInput;
-};
-
-export type MutationDeleteFoldersArgs = {
-  folderIds: Array<Scalars['String']>;
-};
-
-export type MutationDeleteSnippetArgs = {
-  id: Scalars['ID'];
-};
-
-export type MutationLoginUserArgs = {
-  email: Scalars['String'];
-  password: Scalars['String'];
-};
-
-export type MutationSignupUserArgs = {
-  input: SignupUserInput;
-};
-
-export type MutationSubscribeToNewsletterArgs = {
-  email: Scalars['String'];
-};
-
-export type MutationUpdateFolderArgs = {
-  id: Scalars['ID'];
-  input: UpdateFolderInput;
-};
-
-export type MutationUpdateSnippetArgs = {
-  id: Scalars['ID'];
-  input: UpdateSnippetInput;
-};
-
-export const OauthProvider = {
-  Github: 'github',
-  Stackoverflow: 'stackoverflow',
-  Twitter: 'twitter',
-} as const;
-
-export type OauthProvider = typeof OauthProvider[keyof typeof OauthProvider];
-export type PublicSnippetsInput = {
-  itemPerPage?: InputMaybe<Scalars['Int']>;
-  keyword?: InputMaybe<Scalars['String']>;
-  nextToken?: InputMaybe<Scalars['String']>;
-  sortMethod?: InputMaybe<SnippetSortMethod>;
-};
-
-export type PublicSnippetsResult = {
-  __typename?: 'PublicSnippetsResult';
-  hasMore: Scalars['Boolean'];
-  itemPerPage?: Maybe<Scalars['Int']>;
-  items: Array<Snippet>;
-  nextToken?: Maybe<Scalars['String']>;
-};
-
-export type Query = {
-  __typename?: 'Query';
-  authenticatedUser: User;
-  findFolder: Folder;
-  findSnippet: SnippetInfo;
-  /** @deprecated No longer supported */
-  hello: Scalars['String'];
-  listDirectory?: Maybe<Directory>;
-  listFolders: Array<Folder>;
-  mySnippets: Array<Snippet>;
-  /** @deprecated https://stackoverflow.com/questions/59868942/graphql-a-schema-must-have-a-query-operation-defined */
-  ping?: Maybe<Scalars['String']>;
-  publicSnippets: PublicSnippetsResult;
-};
-
-export type QueryFindFolderArgs = {
-  folderId: Scalars['String'];
-};
-
-export type QueryFindSnippetArgs = {
-  snippetId: Scalars['String'];
-};
-
-export type QueryListDirectoryArgs = {
-  folderId: Scalars['String'];
-};
-
-export type QueryListFoldersArgs = {
-  folderId?: InputMaybe<Scalars['String']>;
-};
-
-export type QueryPublicSnippetsArgs = {
-  input: PublicSnippetsInput;
-};
-
-export type Result = {
-  __typename?: 'Result';
-  message: Scalars['String'];
-};
-
-export type Role = {
-  __typename?: 'Role';
-  createdAt: Scalars['Date'];
-  description?: Maybe<Scalars['String']>;
-  id: Scalars['ID'];
-  level: Scalars['Int'];
-  name: RoleName;
-  updatedAt: Scalars['Date'];
-};
-
-export const RoleName = {
-  Admin: 'admin',
-  User: 'user',
-} as const;
-
-export type RoleName = typeof RoleName[keyof typeof RoleName];
-export type SignupUserInput = {
-  email: Scalars['String'];
-  name: Scalars['String'];
-  password: Scalars['String'];
-};
-
-export type SignupUserResult = {
-  __typename?: 'SignupUserResult';
-  message: Scalars['String'];
-};
-
-export type Snippet = {
-  __typename?: 'Snippet';
-  content: Scalars['String'];
-  contentHighlighted: Scalars['String'];
-  createdAt: Scalars['Date'];
-  description?: Maybe<Scalars['String']>;
-  folder: Folder;
-  id: Scalars['ID'];
-  language: Scalars['String'];
-  lineHighlight?: Maybe<Scalars['String']>;
-  name: Scalars['String'];
-  size: Scalars['Int'];
-  theme: Scalars['String'];
-  updatedAt: Scalars['Date'];
-  user: User;
-  visibility: SnippetVisibility;
-};
-
-export type SnippetInfo = {
-  __typename?: 'SnippetInfo';
-  paths: Array<Folder>;
-  snippet: Snippet;
-};
-
-export const SnippetSortMethod = {
-  RecentlyCreated: 'recently_created',
-  RecentlyUpdated: 'recently_updated',
-} as const;
-
-export type SnippetSortMethod = typeof SnippetSortMethod[keyof typeof SnippetSortMethod];
-export const SnippetVisibility = {
-  Private: 'private',
-  Public: 'public',
-} as const;
-
-export type SnippetVisibility = typeof SnippetVisibility[keyof typeof SnippetVisibility];
-export type UpdateFolderInput = {
-  name: Scalars['String'];
-};
-
-export type UpdateSnippetInput = {
-  content: Scalars['String'];
-  contentHighlighted: Scalars['String'];
-  description?: InputMaybe<Scalars['String']>;
-  language: Scalars['String'];
-  lineHighlight?: InputMaybe<Scalars['String']>;
-  name: Scalars['String'];
-  theme: Scalars['String'];
-  visibility: SnippetVisibility;
-};
-
-export type User = {
-  __typename?: 'User';
-  createdAt: Scalars['Date'];
-  email: Scalars['String'];
-  folders: Array<Folder>;
-  id: Scalars['ID'];
-  isEnabled: Scalars['Boolean'];
-  name: Scalars['String'];
-  oauthProvider?: Maybe<OauthProvider>;
-  pictureUrl?: Maybe<Scalars['String']>;
-  role: Role;
-  rootFolder: Folder;
-  timezone?: Maybe<Scalars['String']>;
-  updatedAt: Scalars['Date'];
-  username?: Maybe<Scalars['String']>;
-};
-
-export type CreateFolderMutationVariables = Exact<{
-  input: CreateFolderInput;
-}>;
-
-export type CreateFolderMutation = { __typename?: 'Mutation'; createFolder: { __typename?: 'Folder'; id: string } };
-
-export type DeleteFoldersMutationVariables = Exact<{
-  folderIds: Array<Scalars['String']> | Scalars['String'];
-}>;
-
-export type DeleteFoldersMutation = { __typename?: 'Mutation'; deleteFolders: boolean };
-
-export type UpdateFolderMutationVariables = Exact<{
-  id: Scalars['ID'];
-  input: UpdateFolderInput;
-}>;
-
-export type UpdateFolderMutation = {
-  __typename?: 'Mutation';
-  updateFolder: { __typename: 'Folder'; id: string; name: string; updatedAt: any };
-};
-
-export type FindFolderQueryVariables = Exact<{
-  folderId: Scalars['String'];
-}>;
-
-export type FindFolderQuery = { __typename?: 'Query'; findFolder: { __typename?: 'Folder'; id: string; name: string } };
-
-export type ListDirectoryQueryVariables = Exact<{
-  folderId: Scalars['String'];
-}>;
-
-export type ListDirectoryQuery = {
-  __typename?: 'Query';
-  listDirectory?: {
-    __typename?: 'Directory';
-    folders: Array<{ __typename?: 'Folder'; id: string; name: string; subFoldersCount: number }>;
-    snippets: Array<{ __typename?: 'Snippet'; id: string; name: string; language: string; content: string }>;
-    paths: Array<{ __typename?: 'Folder'; id: string; name: string }>;
-  } | null;
-};
-
-export type SubscribeNewsletterMutationVariables = Exact<{
-  email: Scalars['String'];
-}>;
-
-export type SubscribeNewsletterMutation = {
-  __typename?: 'Mutation';
-  subscribeToNewsletter: { __typename?: 'Result'; message: string };
-};
-
-export type CreateSnippetMutationVariables = Exact<{
-  input: CreateSnippetInput;
-}>;
-
-export type CreateSnippetMutation = { __typename?: 'Mutation'; createSnippet: { __typename?: 'Snippet'; id: string } };
-
-export type DeleteSnippetMutationVariables = Exact<{
-  id: Scalars['ID'];
-}>;
-
-export type DeleteSnippetMutation = { __typename?: 'Mutation'; deleteSnippet: boolean };
-
-export type UpdateSnippetMutationVariables = Exact<{
-  id: Scalars['ID'];
-  input: UpdateSnippetInput;
-}>;
-
-export type UpdateSnippetMutation = {
-  __typename?: 'Mutation';
-  updateSnippet: {
-    __typename: 'Snippet';
-    id: string;
-    name: string;
-    description?: string | null;
-    language: string;
-    lineHighlight?: string | null;
-    visibility: SnippetVisibility;
-    content: string;
-    theme: string;
-    updatedAt: any;
-  };
-};
-
-export type FindSnippetQueryVariables = Exact<{
-  snippetId: Scalars['String'];
-}>;
-
-export type FindSnippetQuery = {
-  __typename?: 'Query';
-  findSnippet: {
-    __typename?: 'SnippetInfo';
-    paths: Array<{ __typename?: 'Folder'; id: string; name: string }>;
-    snippet: {
-      __typename: 'Snippet';
-      id: string;
-      name: string;
-      description?: string | null;
-      language: string;
-      lineHighlight?: string | null;
-      visibility: SnippetVisibility;
-      content: string;
-      contentHighlighted: string;
-      theme: string;
-      createdAt: any;
-      updatedAt: any;
-      folder: { __typename?: 'Folder'; id: string };
-    };
-  };
-};
-
-export type PublicSnippetsQueryVariables = Exact<{
-  input: PublicSnippetsInput;
-}>;
-
-export type PublicSnippetsQuery = {
-  __typename?: 'Query';
-  publicSnippets: {
-    __typename: 'PublicSnippetsResult';
-    hasMore: boolean;
-    itemPerPage?: number | null;
-    nextToken?: string | null;
-    items: Array<{
-      __typename: 'Snippet';
-      id: string;
-      name: string;
-      description?: string | null;
-      language: string;
-      lineHighlight?: string | null;
-      contentHighlighted: string;
-      theme: string;
-      createdAt: any;
-      user: { __typename?: 'User'; id: string; username?: string | null; name: string; pictureUrl?: string | null };
-    }>;
-  };
-};
-
-export type LoginUserMutationVariables = Exact<{
-  email: Scalars['String'];
-  password: Scalars['String'];
-}>;
-
-export type LoginUserMutation = { __typename?: 'Mutation'; loginUser: { __typename: 'LoginResult'; token: string } };
-
-export type LogoutUserMutationVariables = Exact<{ [key: string]: never }>;
-
-export type LogoutUserMutation = { __typename?: 'Mutation'; logoutUser: boolean };
-
-export type SignupUserMutationVariables = Exact<{
-  input: SignupUserInput;
-}>;
-
-export type SignupUserMutation = {
-  __typename?: 'Mutation';
-  signupUser: { __typename?: 'SignupUserResult'; message: string };
-};
-
-export type AuthenticatedUserQueryVariables = Exact<{ [key: string]: never }>;
-
-export type AuthenticatedUserQuery = {
-  __typename?: 'Query';
-  authenticatedUser: {
-    __typename: 'User';
-    id: string;
-    email: string;
-    isEnabled: boolean;
-    name: string;
-    pictureUrl?: string | null;
-    username?: string | null;
-    role: { __typename: 'Role'; name: RoleName };
-    rootFolder: { __typename: 'Folder'; id: string };
-  };
-};
diff --git a/packages/front/styles/globals.css b/packages/front/styles/globals.css
new file mode 100644
index 00000000..b5c61c95
--- /dev/null
+++ b/packages/front/styles/globals.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/front/tailwind.config.js b/packages/front/tailwind.config.js
deleted file mode 100644
index cac56082..00000000
--- a/packages/front/tailwind.config.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const defaultTheme = require('tailwindcss/defaultTheme');
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.{js,ts,jsx,tsx}'],
-  darkMode: 'class',
-  plugins: [require('@tailwindcss/forms')],
-  theme: {
-    extend: {
-      animation: {
-        'spin-fast': 'spin .5s linear infinite',
-      },
-      fontFamily: {
-        sans: ['Inter', ...defaultTheme.fontFamily.sans],
-      },
-      maxHeight: {
-        0: '0',
-        xl: '36rem',
-      },
-    },
-    screens: {
-      xs: { max: '639px' },
-      ...defaultTheme.screens,
-    },
-  },
-};
diff --git a/packages/front/tailwind.config.ts b/packages/front/tailwind.config.ts
new file mode 100644
index 00000000..d14b3161
--- /dev/null
+++ b/packages/front/tailwind.config.ts
@@ -0,0 +1,48 @@
+import type { Config } from 'tailwindcss';
+import defaultTheme from 'tailwindcss/defaultTheme';
+
+const config = {
+  content: ['./**/*.{js,ts,jsx,tsx}'],
+  darkMode: ['class'],
+  prefix: '',
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      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',
+        'spin-fast': 'spin .5s linear infinite',
+      },
+      maxHeight: {
+        0: '0',
+        xl: '36rem',
+      },
+      fontFamily: {
+        sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans],
+      },
+    },
+    screens: {
+      xs: { max: '639px' },
+      ...defaultTheme.screens,
+    },
+  },
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/forms')],
+} satisfies Config;
+
+export default config;
diff --git a/packages/front/tsconfig.json b/packages/front/tsconfig.json
index f3d6dffb..d3f6d5e3 100644
--- a/packages/front/tsconfig.json
+++ b/packages/front/tsconfig.json
@@ -26,8 +26,8 @@
     "./hooks/**/*",
     "./icons/**/*",
     "./services/**/*",
-    "./typings/**/*",
-    "./utils/**/*",
+    "./types/**/*",
+    "./lib/**/*"
   ],
   "exclude": ["dist", "build", "node_modules"]
 }
diff --git a/packages/front/typings/components.ts b/packages/front/types/components.ts
similarity index 100%
rename from packages/front/typings/components.ts
rename to packages/front/types/components.ts
diff --git a/packages/front/typings/queries.ts b/packages/front/types/queries.ts
similarity index 100%
rename from packages/front/typings/queries.ts
rename to packages/front/types/queries.ts
diff --git a/packages/front/typings/snippet-form.ts b/packages/front/types/snippet-form.ts
similarity index 100%
rename from packages/front/typings/snippet-form.ts
rename to packages/front/types/snippet-form.ts
diff --git a/yarn.lock b/yarn.lock
index f64b05a6..57ac9540 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2396,29 +2396,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/react-dom@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "@floating-ui/react-dom@npm:2.1.0"
+"@floating-ui/react-dom@npm:^2.0.0":
+  version: 2.1.2
+  resolution: "@floating-ui/react-dom@npm:2.1.2"
   dependencies:
     "@floating-ui/dom": "npm:^1.0.0"
   peerDependencies:
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 10/15be0714379c271ff01347e7c9bcdba96d6b39f3960697380e23de9b9d59fb91ba07bc75b8bdb12d72da7a9272191a9ce73f843a0d5f89939caa9f3137acd8ec
-  languageName: node
-  linkType: hard
-
-"@floating-ui/react@npm:^0.26.16":
-  version: 0.26.17
-  resolution: "@floating-ui/react@npm:0.26.17"
-  dependencies:
-    "@floating-ui/react-dom": "npm:^2.1.0"
-    "@floating-ui/utils": "npm:^0.2.0"
-    tabbable: "npm:^6.0.0"
-  peerDependencies:
-    react: ">=16.8.0"
-    react-dom: ">=16.8.0"
-  checksum: 10/bceabe5a2f515fffaae85b4f652cc3ab8f9066ae09e8d094308932321454340465fa3b2605a0a38a2e999f31e4edf3ed5b741c4656a9a7996b5fb7ad732a5da2
+  checksum: 10/2a67dc8499674e42ff32c7246bded185bb0fdd492150067caf9568569557ac4756a67787421d8604b0f241e5337de10762aee270d9aeef106d078a0ff13596c4
   languageName: node
   linkType: hard
 
@@ -3124,30 +3110,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@headlessui/react@npm:2.1.0":
-  version: 2.1.0
-  resolution: "@headlessui/react@npm:2.1.0"
-  dependencies:
-    "@floating-ui/react": "npm:^0.26.16"
-    "@react-aria/focus": "npm:^3.17.1"
-    "@react-aria/interactions": "npm:^3.21.3"
-    "@tanstack/react-virtual": "npm:3.5.0"
-  peerDependencies:
-    react: ^18
-    react-dom: ^18
-  checksum: 10/9d5101c18c6cf98ceb804fcaeb074cb6b3ed1fec754dcdde8f23c6cd340a71b20c8ce99df78d1591385646e4a21001dd95a062a889ff003914e3c9e00b46546e
-  languageName: node
-  linkType: hard
-
-"@heroicons/react@npm:2.1.3":
-  version: 2.1.3
-  resolution: "@heroicons/react@npm:2.1.3"
-  peerDependencies:
-    react: ">= 16"
-  checksum: 10/b9a1100a1381b13567ac5c5a43d77f39fc5d20682bc3e9a1674eecbe656ad756287e5f1c9024cec8f5a2245607f2372278c956c6279ee9b79ef305a7337fd5b8
-  languageName: node
-  linkType: hard
-
 "@hookform/resolvers@npm:3.6.0":
   version: 3.6.0
   resolution: "@hookform/resolvers@npm:3.6.0"
@@ -4729,78 +4691,675 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-aria/focus@npm:^3.17.1":
-  version: 3.17.1
-  resolution: "@react-aria/focus@npm:3.17.1"
+"@radix-ui/number@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/number@npm:1.1.0"
+  checksum: 10/e4fc7483c19141c25dbaf3d140b75e2b7fed0bfa3ad969f4441f0266ed34b35413f57a35df7b025e2a977152bbe6131849d3444fc6f15a73345dfc2bfdc105fa
+  languageName: node
+  linkType: hard
+
+"@radix-ui/primitive@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/primitive@npm:1.1.0"
+  checksum: 10/7cbf70bfd4b2200972dbd52a9366801b5a43dd844743dc97eb673b3ec8e64f5dd547538faaf9939abbfe8bb275773767ecf5a87295d90ba09c15cba2b5528c89
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-alert-dialog@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-alert-dialog@npm:1.1.1"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.0"
+    "@radix-ui/react-dialog": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-slot": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/5049255a4b31b2d65c36235c32016c54234f7580778639b416c3c169af545a2522f9f452d6eb1d9d31c0d2e4d9ca2ae36cac4876bec31f5cc422e92acba5557c
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-arrow@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-arrow@npm:1.1.0"
   dependencies:
-    "@react-aria/interactions": "npm:^3.21.3"
-    "@react-aria/utils": "npm:^3.24.1"
-    "@react-types/shared": "npm:^3.23.1"
-    "@swc/helpers": "npm:^0.5.0"
-    clsx: "npm:^2.0.0"
+    "@radix-ui/react-primitive": "npm:2.0.0"
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 10/4c3c7b26c983c83119a5ff1595e339b8bf68dcb6ea4349dc3b6bb26af41bbae4be50df8a96b12beea9b9f700c4508addfa4fd4626e7955bce667ec7620693af8
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/8522e0a8095ecc32d3a719f9c3bc0514c677a9c9d5ac26985d5416576dbc487c2a49ba2484397d9de502b54657856cb41ca3ea0b2165563eeeae45a83750885b
   languageName: node
   linkType: hard
 
-"@react-aria/interactions@npm:^3.21.3":
-  version: 3.21.3
-  resolution: "@react-aria/interactions@npm:3.21.3"
+"@radix-ui/react-avatar@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-avatar@npm:1.1.0"
   dependencies:
-    "@react-aria/ssr": "npm:^3.9.4"
-    "@react-aria/utils": "npm:^3.24.1"
-    "@react-types/shared": "npm:^3.23.1"
-    "@swc/helpers": "npm:^0.5.0"
+    "@radix-ui/react-context": "npm:1.1.0"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.0"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.0"
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 10/84fe368a40631f02fb9b9fcc103820a7659132b74a029a3bac3939f4a8bee05c9fe1f023f2d170760adaf3cc110793c6b8db396f016bab740922ffc823f99833
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/27a3c1f3e4f5930f467f944bf50e5294aceb47100cf128e7532ead020b4cbc0c4c59c5f65aacdf2cc15dbca7c2893a48ff3023e88bc9727471ff6c4437b87195
   languageName: node
   linkType: hard
 
-"@react-aria/ssr@npm:^3.9.4":
-  version: 3.9.4
-  resolution: "@react-aria/ssr@npm:3.9.4"
+"@radix-ui/react-collection@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-collection@npm:1.1.0"
   dependencies:
-    "@swc/helpers": "npm:^0.5.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.0"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-slot": "npm:1.1.0"
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 10/c55e5e0bf86bc39c7c0c9f86f4166e923cf62304903b7b5e700619bff64edc4fbeec5a66741aa39635445ff0b26d80ee03d6471c5df02ec764b9a71938dd17de
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/d3e656761773602f3a6be0fb568c328125d07ed202527f5fe839d1cdcc38a05d32f0568d2430199534206b86fad2dbe96725691300810033e65ec1e2e5181ccb
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-compose-refs@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-compose-refs@npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/047a4ed5f87cb848be475507cd62836cf5af5761484681f521ea543ea7c9d59d61d42806d6208863d5e2380bf38cdf4cff73c2bbe5f52dbbe50fb04e1a13ac72
   languageName: node
   linkType: hard
 
-"@react-aria/utils@npm:^3.24.1":
-  version: 3.24.1
-  resolution: "@react-aria/utils@npm:3.24.1"
+"@radix-ui/react-context@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-context@npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/755aea1966dc9b778890e6d330482e9285e9cd9417425da364706cf1d43a041f0b5b2412e6dfebb81e35f68ce47304dd52bcda01f223685c287ac654e6142d7e
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-dialog@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-dialog@npm:1.1.1"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.0"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.0"
+    "@radix-ui/react-focus-guards": "npm:1.1.0"
+    "@radix-ui/react-focus-scope": "npm:1.1.0"
+    "@radix-ui/react-id": "npm:1.1.0"
+    "@radix-ui/react-portal": "npm:1.1.1"
+    "@radix-ui/react-presence": "npm:1.1.0"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-slot": "npm:1.1.0"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+    aria-hidden: "npm:^1.1.1"
+    react-remove-scroll: "npm:2.5.7"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/8c4b4af680e306db4fe113e9e19eb173f633b40b267030906167f6f62adfaa02aa2cb8ee97775ad0c701242a5ef6d0ce3528e1b13e640cbc6ea356eb27836189
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-direction@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-direction@npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/25ad0d1d65ad08c93cebfbefdff9ef2602e53f4573a66b37d2c366ede9485e75ec6fc8e7dd7d2939b34ea5504ca0fe6ac4a3acc2f6ee9b62d131d65486eafd49
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-dismissable-layer@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-dismissable-layer@npm:1.1.0"
   dependencies:
-    "@react-aria/ssr": "npm:^3.9.4"
-    "@react-stately/utils": "npm:^3.10.1"
-    "@react-types/shared": "npm:^3.23.1"
-    "@swc/helpers": "npm:^0.5.0"
-    clsx: "npm:^2.0.0"
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.0"
+    "@radix-ui/react-use-escape-keydown": "npm:1.1.0"
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 10/7acf52f3cdf66aaa0c55bde86959a3772bc266682389bf19865739ca8b77a652db8d9f970dc37600c69b8a7cce78b821913f3d7f066bdcb1224599e3fe35afce
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/08baf3441f811ce88649fa90cf8031f496f81a404cda75fa2a7b42020e3368f8f2a96911a4a1f7065cfa3fb2c091156c009d9255f81feeaf2f7ffadcfd12caf1
   languageName: node
   linkType: hard
 
-"@react-stately/utils@npm:^3.10.1":
-  version: 3.10.1
-  resolution: "@react-stately/utils@npm:3.10.1"
+"@radix-ui/react-dropdown-menu@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@radix-ui/react-dropdown-menu@npm:2.1.1"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.0"
+    "@radix-ui/react-id": "npm:1.1.0"
+    "@radix-ui/react-menu": "npm:2.1.1"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/61f671711cb49f102fc1fc4999968273009f8373b3d11ab0ae1bcf72554c06a297910b044df868b5ec90d55de4e3181a2c8c9e67bbc630add8a7dcd7f6d2b543
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-focus-guards@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-focus-guards@npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/199717e7da1ba9b3fa74b04f6a245aaebf6bdb8ae7d6f4b5f21f95f4086414a3587beebc77399a99be7d3a4b2499eaa52bf72bef660f8e69856b0fd0593b074f
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-focus-scope@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-focus-scope@npm:1.1.0"
+  dependencies:
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/a34dc5caecc56483e293de770fde3addcebd975b94625cb7057bee3f0837d82bba9a672bef7c7902d28d68d31ab9b3847c88285664b5b747ac9141dabf11df3c
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-id@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-id@npm:1.1.0"
+  dependencies:
+    "@radix-ui/react-use-layout-effect": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/6fbc9d1739b3b082412da10359e63967b4f3a60383ebda4c9e56b07a722d29bee53b203b3b1418f88854a29315a7715867133bb149e6e22a027a048cdd20d970
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-label@npm:2.1.0":
+  version: 2.1.0
+  resolution: "@radix-ui/react-label@npm:2.1.0"
+  dependencies:
+    "@radix-ui/react-primitive": "npm:2.0.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/462f3b47f43bd69c937e660dee229eb05990441e1b214923cdcf848aea62226e9f1c4673de6664bb4ad66f8a480acdb0f5d2ce4c88c425652b47432876b3f32f
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-menu@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@radix-ui/react-menu@npm:2.1.1"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-collection": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.0"
+    "@radix-ui/react-direction": "npm:1.1.0"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.0"
+    "@radix-ui/react-focus-guards": "npm:1.1.0"
+    "@radix-ui/react-focus-scope": "npm:1.1.0"
+    "@radix-ui/react-id": "npm:1.1.0"
+    "@radix-ui/react-popper": "npm:1.2.0"
+    "@radix-ui/react-portal": "npm:1.1.1"
+    "@radix-ui/react-presence": "npm:1.1.0"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-roving-focus": "npm:1.1.0"
+    "@radix-ui/react-slot": "npm:1.1.0"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.0"
+    aria-hidden: "npm:^1.1.1"
+    react-remove-scroll: "npm:2.5.7"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/4d523b89a91c0355337cbaafbb0eb4645daa67f6fcef00dbe499a448079ab51e01011a87474f048a54aefbe28829d61f387e67ce30e2ce0aba26734a23c62f1c
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-popper@npm:1.2.0":
+  version: 1.2.0
+  resolution: "@radix-ui/react-popper@npm:1.2.0"
+  dependencies:
+    "@floating-ui/react-dom": "npm:^2.0.0"
+    "@radix-ui/react-arrow": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.0"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.0"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.0"
+    "@radix-ui/react-use-rect": "npm:1.1.0"
+    "@radix-ui/react-use-size": "npm:1.1.0"
+    "@radix-ui/rect": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/33aeb8e3436c4764e53ac97b85617309f77b4a34ac3848e2f2c638ed01590895d4787a4382e4e8cedc1a04fd0346e35108adc296ce600399545d8587f4201d09
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-portal@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-portal@npm:1.1.1"
   dependencies:
-    "@swc/helpers": "npm:^0.5.0"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.0"
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 10/b3fc1367eb26afa1d7a4e3d5cf5cf215be4a4698296db25d34a9096a9eb79cff5c3770da48989970e6b6734199bfb9a10c31cd62a39b20980b2ede78061f8ee9
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/84dab64ce9c9f4ed7d75df6d1d82877dc7976a98cc192287d39ba2ea512415ed7bf34caf02d579a18fe21766403fa9ae41d2482a14dee5514179ee1b09cc333c
   languageName: node
   linkType: hard
 
-"@react-types/shared@npm:^3.23.1":
-  version: 3.23.1
-  resolution: "@react-types/shared@npm:3.23.1"
+"@radix-ui/react-presence@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-presence@npm:1.1.0"
+  dependencies:
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.0"
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 10/1ea30702a408554e45b827e66ebf2a9674aec7d7d04a4f3723f2fe1c677be36701d5f08d4914d6018c4bcb6f2fe07d8c3a5840dfe3299ee69092b78c723c9c03
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/e3ce746560e1551c9c480f0ef1f085763faf7094ac9600ca15d8bacb1bf5c70e59effe889bd2116b56c798f69f8d2bfa32d14defd30b9381fb2dcc555367f11c
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-primitive@npm:2.0.0":
+  version: 2.0.0
+  resolution: "@radix-ui/react-primitive@npm:2.0.0"
+  dependencies:
+    "@radix-ui/react-slot": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/f3dc683f5ba6534739356ac78ba5008d237b2f0e97eb3d578fcb01ecdb869a0729c24adc6dec238bfb1074763629935724381451313c109ca1be2a60fe4c16e3
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-roving-focus@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-roving-focus@npm:1.1.0"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-collection": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.0"
+    "@radix-ui/react-direction": "npm:1.1.0"
+    "@radix-ui/react-id": "npm:1.1.0"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.0"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/f7c3d9b6d9dc1036d56b6005c58a948ee20f07ba21a00063dc1c1a790918feae13f16f9383dea3a1ccc3698ac552b8382c6885844580f0eeb11108a6d4824ea7
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-select@npm:2.1.1":
+  version: 2.1.1
+  resolution: "@radix-ui/react-select@npm:2.1.1"
+  dependencies:
+    "@radix-ui/number": "npm:1.1.0"
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-collection": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.0"
+    "@radix-ui/react-direction": "npm:1.1.0"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.0"
+    "@radix-ui/react-focus-guards": "npm:1.1.0"
+    "@radix-ui/react-focus-scope": "npm:1.1.0"
+    "@radix-ui/react-id": "npm:1.1.0"
+    "@radix-ui/react-popper": "npm:1.2.0"
+    "@radix-ui/react-portal": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-slot": "npm:1.1.0"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.0"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.0"
+    "@radix-ui/react-use-previous": "npm:1.1.0"
+    "@radix-ui/react-visually-hidden": "npm:1.1.0"
+    aria-hidden: "npm:^1.1.1"
+    react-remove-scroll: "npm:2.5.7"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/b2351141c424877bec733a12082aeb064305618af2b5a0586a5f511cb2e24a03bae69e78ec84dca95028417574c034fffaad8f2e6de84fe99bda547e3be26ac7
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-slot@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-slot@npm:1.1.0"
+  dependencies:
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/95e190868418b1c83adf6627256f6b664b0dcbea95d7215de9c64ac2c31102fc09155565d9ca27be6abd20fc63d0b0bacfe1b67d78b2de1d198244c848e1a54e
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-switch@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-switch@npm:1.1.0"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.0"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+    "@radix-ui/react-use-previous": "npm:1.1.0"
+    "@radix-ui/react-use-size": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/847930e2a25699015e83f07ffb5065c2e925ffcf84b2ef2222e63e7862a9753e09ea8cd64504d20cbb689060ece1ad2e3b8a4c04702bc8040c5fda7d13ef71ae
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-toast@npm:1.2.1":
+  version: 1.2.1
+  resolution: "@radix-ui/react-toast@npm:1.2.1"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-collection": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.0"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.0"
+    "@radix-ui/react-portal": "npm:1.1.1"
+    "@radix-ui/react-presence": "npm:1.1.0"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.0"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.0"
+    "@radix-ui/react-visually-hidden": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/aee3f74c27e4f88137c46da870997d713abeb9992528847c200ba2d8c82bbc36f9452372c1d4ee2671980a2778db5bafe46e41a22c5fa01a2287e5983255412f
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-callback-ref@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-use-callback-ref@npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/2ec7903c67e3034b646005556f44fd975dc5204db6885fc58403e3584f27d95f0b573bc161de3d14fab9fda25150bf3b91f718d299fdfc701c736bd0bd2281fa
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-controllable-state@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-use-controllable-state@npm:1.1.0"
+  dependencies:
+    "@radix-ui/react-use-callback-ref": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/9583679150dc521c9de20ee22cb858697dd4f5cefc46ab8ebfc5e7511415a053994e87d4ca3f49de84d27eebc13535b0a6c9892c91ab43e3e553e5d7270f378f
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-escape-keydown@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-use-escape-keydown@npm:1.1.0"
+  dependencies:
+    "@radix-ui/react-use-callback-ref": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/9bf88ea272b32ea0f292afd336780a59c5646f795036b7e6105df2d224d73c54399ee5265f61d571eb545d28382491a8b02dc436e3088de8dae415d58b959b71
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-layout-effect@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-use-layout-effect@npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/271ea0bf1cd74718895a68414a6e95537737f36e02ad08eeb61a82b229d6abda9cff3135a479e134e1f0ce2c3ff97bb85babbdce751985fb755a39b231d7ccf2
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-previous@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-use-previous@npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/8a2407e3db6248ab52bf425f5f4161355d09f1a228038094959250ae53552e73543532b3bb80e452f6ad624621e2e1c6aebb8c702f2dfaa5e89f07ec629d9304
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-rect@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-use-rect@npm:1.1.0"
+  dependencies:
+    "@radix-ui/rect": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/facc9528af43df3b01952dbb915ff751b5924db2c31d41f053ddea19a7cc5cac5b096c4d7a2059e8f564a3f0d4a95bcd909df8faed52fa01709af27337628e2c
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-use-size@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-use-size@npm:1.1.0"
+  dependencies:
+    "@radix-ui/react-use-layout-effect": "npm:1.1.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/01a11d4c07fc620b8a081e53d7ec8495b19a11e02688f3d9f47cf41a5fe0428d1e52ed60b2bf88dfd447dc2502797b9dad2841097389126dd108530913c4d90d
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-visually-hidden@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/react-visually-hidden@npm:1.1.0"
+  dependencies:
+    "@radix-ui/react-primitive": "npm:2.0.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/9e30775dc3bd562722b5671d91545e3e16111f9d1942c98188cb84935eb4a7d31ef1ad1e028e1f1d41e490392f295fbd55424106263869cc7028de9f6141363d
+  languageName: node
+  linkType: hard
+
+"@radix-ui/rect@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@radix-ui/rect@npm:1.1.0"
+  checksum: 10/3ffdc5e3f7bcd91de4d5983513bd11c3a82b89b966e5c1bd8c17690a8f5da2d83fa156474c7b68fc6b9465df2281f81983b146e1d9dc57d332abda05751a9cbc
   languageName: node
   linkType: hard
 
@@ -5483,24 +6042,34 @@ __metadata:
     "@graphql-codegen/cli": "npm:5.0.2"
     "@graphql-codegen/typescript": "npm:4.0.7"
     "@graphql-codegen/typescript-operations": "npm:4.2.1"
-    "@headlessui/react": "npm:2.1.0"
-    "@heroicons/react": "npm:2.1.3"
+    "@radix-ui/react-alert-dialog": "npm:1.1.1"
+    "@radix-ui/react-avatar": "npm:1.1.0"
+    "@radix-ui/react-dropdown-menu": "npm:2.1.1"
+    "@radix-ui/react-label": "npm:2.1.0"
+    "@radix-ui/react-select": "npm:2.1.1"
+    "@radix-ui/react-slot": "npm:1.1.0"
+    "@radix-ui/react-switch": "npm:1.1.0"
+    "@radix-ui/react-toast": "npm:1.2.1"
     "@tailwindcss/forms": "npm:0.5.7"
     "@types/react": "npm:18.3.3"
     "@types/react-dom": "npm:18.3.0"
     autoprefixer: "npm:10.4.19"
+    lucide-react: "npm:0.408.0"
     postcss: "npm:8.4.38"
     react-simple-code-editor: "npm:0.13.1"
     shiki: "npm:0.14.7"
     tailwindcss: "npm:3.4.4"
   peerDependencies:
     "@apollo/client": 3.10.6
-    "@headlessui/react": 1.7.18
     "@hookform/resolvers": 3.6.0
+    class-variance-authority: 0.7.0
     classnames: 2.5.1
+    clsx: 2.1.1
     react: 18.3.1
     react-dom: 18.3.1
     react-hook-form: 7.52.0
+    tailwind-merge: 2.4.0
+    tailwindcss-animate: 1.0.7
     yup: 1.4.0
   languageName: unknown
   linkType: soft
@@ -5524,8 +6093,8 @@ __metadata:
   dependencies:
     "@apollo/client": "npm:3.10.6"
     "@apollo/experimental-nextjs-app-support": "npm:0.11.2"
-    "@headlessui/react": "npm:2.1.0"
     "@hookform/resolvers": "npm:3.6.0"
+    "@radix-ui/react-slot": "npm:1.1.0"
     "@sentry/nextjs": "npm:8.11.0"
     "@snipcode/front": "workspace:*"
     "@snipcode/utils": "workspace:*"
@@ -5539,7 +6108,9 @@ __metadata:
     "@vitejs/plugin-react": "npm:4.3.1"
     "@vitest/coverage-v8": "npm:2.0.2"
     autoprefixer: "npm:10.4.19"
+    class-variance-authority: "npm:0.7.0"
     classnames: "npm:2.5.1"
+    clsx: "npm:2.1.1"
     eslint-config-next: "npm:14.2.4"
     eslint-import-resolver-typescript: "npm:3.6.1"
     eslint-plugin-jest-dom: "npm:5.4.0"
@@ -5553,7 +6124,9 @@ __metadata:
     react-cookie: "npm:7.1.4"
     react-dom: "npm:18.3.1"
     react-hook-form: "npm:7.52.0"
+    tailwind-merge: "npm:2.4.0"
     tailwindcss: "npm:3.4.4"
+    tailwindcss-animate: "npm:1.0.7"
     vite-tsconfig-paths: "npm:4.3.2"
     vitest: "npm:2.0.2"
     yup: "npm:1.4.0"
@@ -5577,15 +6150,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/helpers@npm:^0.5.0":
-  version: 0.5.11
-  resolution: "@swc/helpers@npm:0.5.11"
-  dependencies:
-    tslib: "npm:^2.4.0"
-  checksum: 10/54d66ade8010e6ba526a9d73b8bcdbb01c806a24f2d3786640ef3081065e8fba398d9b890df4847744c33d086412fd9a6570b5e99e8001ea1462efc5ce0f3847
-  languageName: node
-  linkType: hard
-
 "@tailwindcss/forms@npm:0.5.7":
   version: 0.5.7
   resolution: "@tailwindcss/forms@npm:0.5.7"
@@ -5597,25 +6161,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/react-virtual@npm:3.5.0":
-  version: 3.5.0
-  resolution: "@tanstack/react-virtual@npm:3.5.0"
-  dependencies:
-    "@tanstack/virtual-core": "npm:3.5.0"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10/ecb1424b9961ada3c7516b8f05a1bb37fb1b75cb88035e06530a9365e4e565e701b5de9668c17f727bbcb3be1bbe6482f7bd37af9e0b144846e5a67fc9dfd57d
-  languageName: node
-  linkType: hard
-
-"@tanstack/virtual-core@npm:3.5.0":
-  version: 3.5.0
-  resolution: "@tanstack/virtual-core@npm:3.5.0"
-  checksum: 10/76a37734118c59f992bfdd540bb5900aa30d040c723909312c1e7071af1619da6ddedabba1834802fee7e0f6497c38d0fe8bc70ab4950d2d09342558b5c89bb2
-  languageName: node
-  linkType: hard
-
 "@testing-library/dom@npm:10.1.0":
   version: 10.1.0
   resolution: "@testing-library/dom@npm:10.1.0"
@@ -7409,6 +7954,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-hidden@npm:^1.1.1":
+  version: 1.2.4
+  resolution: "aria-hidden@npm:1.2.4"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  checksum: 10/df4bc15423aaaba3729a7d40abcbf6d3fffa5b8fd5eb33d3ac8b7da0110c47552fca60d97f2e1edfbb68a27cae1da499f1c3896966efb3e26aac4e3b57e3cc8b
+  languageName: node
+  linkType: hard
+
 "aria-query@npm:5.3.0, aria-query@npm:^5.0.0, aria-query@npm:^5.3.0":
   version: 5.3.0
   resolution: "aria-query@npm:5.3.0"
@@ -8384,6 +8938,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"class-variance-authority@npm:0.7.0":
+  version: 0.7.0
+  resolution: "class-variance-authority@npm:0.7.0"
+  dependencies:
+    clsx: "npm:2.0.0"
+  checksum: 10/06646e82953e577fb8834100d763f1e5ecb808b8a1fba6244e94b20603865b134ff2296e30432449793baaeb02282cce617afba6981afe18b6846f1f8e9485ca
+  languageName: node
+  linkType: hard
+
 "classnames@npm:2.5.1":
   version: 2.5.1
   resolution: "classnames@npm:2.5.1"
@@ -8505,7 +9068,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:^2.0.0":
+"clsx@npm:2.0.0":
+  version: 2.0.0
+  resolution: "clsx@npm:2.0.0"
+  checksum: 10/943766d1b02fee3538c871e56638d87f973fbc2d6291ce221215ea436fdecb9be97ad323f411839c2d52c45640c449b1a53fbfe7e8b3d529b4e263308b630c9a
+  languageName: node
+  linkType: hard
+
+"clsx@npm:2.1.1":
   version: 2.1.1
   resolution: "clsx@npm:2.1.1"
   checksum: 10/cdfb57fa6c7649bbff98d9028c2f0de2f91c86f551179541cf784b1cfdc1562dcb951955f46d54d930a3879931a980e32a46b598acaea274728dbe068deca919
@@ -9273,6 +9843,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-node-es@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "detect-node-es@npm:1.1.0"
+  checksum: 10/e46307d7264644975b71c104b9f028ed1d3d34b83a15b8a22373640ce5ea630e5640b1078b8ea15f202b54641da71e4aa7597093bd4b91f113db520a26a37449
+  languageName: node
+  linkType: hard
+
 "dezalgo@npm:^1.0.4":
   version: 1.0.4
   resolution: "dezalgo@npm:1.0.4"
@@ -10936,6 +11513,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-nonce@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "get-nonce@npm:1.0.1"
+  checksum: 10/ad5104871d114a694ecc506a2d406e2331beccb961fe1e110dc25556b38bcdbf399a823a8a375976cd8889668156a9561e12ebe3fa6a4c6ba169c8466c2ff868
+  languageName: node
+  linkType: hard
+
 "get-package-type@npm:^0.1.0":
   version: 0.1.0
   resolution: "get-package-type@npm:0.1.0"
@@ -13635,6 +14219,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lucide-react@npm:0.408.0":
+  version: 0.408.0
+  resolution: "lucide-react@npm:0.408.0"
+  peerDependencies:
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10/3849f76a3aec5a60008606d661ba8b540f2769b117a797c4c5300f303f18971a725b9de0410f278b89004bff99d1596e3669acb46c6452aa9bd7b029acd1c758
+  languageName: node
+  linkType: hard
+
 "lz-string@npm:^1.5.0":
   version: 1.5.0
   resolution: "lz-string@npm:1.5.0"
@@ -15775,6 +16368,41 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-remove-scroll-bar@npm:^2.3.4":
+  version: 2.3.6
+  resolution: "react-remove-scroll-bar@npm:2.3.6"
+  dependencies:
+    react-style-singleton: "npm:^2.2.1"
+    tslib: "npm:^2.0.0"
+  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
+  checksum: 10/5ab8eda61d5b10825447d11e9c824486c929351a471457c22452caa19b6898e18c3af6a46c3fa68010c713baed1eb9956106d068b4a1058bdcf97a1a9bbed734
+  languageName: node
+  linkType: hard
+
+"react-remove-scroll@npm:2.5.7":
+  version: 2.5.7
+  resolution: "react-remove-scroll@npm:2.5.7"
+  dependencies:
+    react-remove-scroll-bar: "npm:^2.3.4"
+    react-style-singleton: "npm:^2.2.1"
+    tslib: "npm:^2.1.0"
+    use-callback-ref: "npm:^1.3.0"
+    use-sidecar: "npm:^1.1.2"
+  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
+  checksum: 10/a1285d118e734855be6a1cf6c83a2ee39d8c5a5c3c336a1e9b80ab571326669bf39a52607f1889337c559c18b9e5fd5a0772fa82f748de3fcfe114ee6f772cc6
+  languageName: node
+  linkType: hard
+
 "react-simple-code-editor@npm:0.13.1":
   version: 0.13.1
   resolution: "react-simple-code-editor@npm:0.13.1"
@@ -15785,6 +16413,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-style-singleton@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "react-style-singleton@npm:2.2.1"
+  dependencies:
+    get-nonce: "npm:^1.0.0"
+    invariant: "npm:^2.2.4"
+    tslib: "npm:^2.0.0"
+  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
+  checksum: 10/80c58fd6aac3594e351e2e7b048d8a5b09508adb21031a38b3c40911fe58295572eddc640d4b20a7be364842c8ed1120fe30097e22ea055316b375b88d4ff02a
+  languageName: node
+  linkType: hard
+
 "react@npm:18.3.1":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
@@ -17457,10 +18102,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tabbable@npm:^6.0.0":
-  version: 6.2.0
-  resolution: "tabbable@npm:6.2.0"
-  checksum: 10/980fa73476026e99dcacfc0d6e000d41d42c8e670faf4682496d30c625495e412c4369694f2a15cf1e5252d22de3c396f2b62edbe8d60b5dadc40d09e3f2dde3
+"tailwind-merge@npm:2.4.0":
+  version: 2.4.0
+  resolution: "tailwind-merge@npm:2.4.0"
+  checksum: 10/dda331a95146c9943dd18f152156fe7a5daf450a686d0562fb521ebc027273bd0c8f9503742668b3e90d27e887aa794ea5e79c38faa51216e19e9d0f1ec55925
+  languageName: node
+  linkType: hard
+
+"tailwindcss-animate@npm:1.0.7":
+  version: 1.0.7
+  resolution: "tailwindcss-animate@npm:1.0.7"
+  peerDependencies:
+    tailwindcss: "*"
+  checksum: 10/ef176fbb0bf9dca84178b35b6a9615cd756358ea80be9c575456d12ecd7f3c431e9e571915c7df72959dc798a730959e9a4739d59eab55d8cc6db390870ff0d2
   languageName: node
   linkType: hard
 
@@ -18555,6 +19209,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-callback-ref@npm:^1.3.0":
+  version: 1.3.2
+  resolution: "use-callback-ref@npm:1.3.2"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  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
+  checksum: 10/3be76eae71b52ab233b4fde974eddeff72e67e6723100a0c0297df4b0d60daabedfa706ffb314d0a52645f2c1235e50fdbd53d99f374eb5df68c74d412e98a9b
+  languageName: node
+  linkType: hard
+
+"use-sidecar@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "use-sidecar@npm:1.1.2"
+  dependencies:
+    detect-node-es: "npm:^1.1.0"
+    tslib: "npm:^2.0.0"
+  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
+  checksum: 10/ec99e31aefeb880f6dc4d02cb19a01d123364954f857811470ece32872f70d6c3eadbe4d073770706a9b7db6136f2a9fbf1bb803e07fbb21e936a47479281690
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"