diff --git a/app/api/TokenCache.ts b/app/api/TokenCache.ts
index 37ecfd8..c40fbb2 100644
--- a/app/api/TokenCache.ts
+++ b/app/api/TokenCache.ts
@@ -1,6 +1,6 @@
 import { type TokenStore, type TokenCache } from '@commercetools/ts-client'
 
-export class SessionStorageTokenCache implements TokenCache {
+export class LocalStorageTokenCache implements TokenCache {
   private readonly key: string
 
   constructor(key: string) {
@@ -19,14 +19,14 @@ export class SessionStorageTokenCache implements TokenCache {
   }
 
   public get(): TokenStore {
-    const raw = globalThis.sessionStorage.getItem(this.key)
+    const raw = globalThis.localStorage.getItem(this.key)
     const value: unknown = JSON.parse(String(raw))
 
     if (value === null) {
       return { token: '', expirationTime: 0 }
     }
 
-    if (!SessionStorageTokenCache.isTokenStore(value)) {
+    if (!LocalStorageTokenCache.isTokenStore(value)) {
       throw new Error('Token cache not found')
     }
 
@@ -34,10 +34,10 @@ export class SessionStorageTokenCache implements TokenCache {
   }
 
   public set(cache: TokenStore): void {
-    globalThis.sessionStorage.setItem(this.key, JSON.stringify(cache))
+    globalThis.localStorage.setItem(this.key, JSON.stringify(cache))
   }
 
   public remove(): void {
-    globalThis.sessionStorage.removeItem(this.key)
+    globalThis.localStorage.removeItem(this.key)
   }
 }
diff --git a/app/api/client.ts b/app/api/client.ts
index 28fc0bd..bf0f0d6 100644
--- a/app/api/client.ts
+++ b/app/api/client.ts
@@ -1,14 +1,16 @@
-import { type AuthMiddlewareOptions, ClientBuilder, type HttpMiddlewareOptions } from '@commercetools/ts-client'
+import { ClientBuilder, type HttpMiddlewareOptions } from '@commercetools/ts-client'
 import {
+  type ByProjectKeyMeRequestBuilder,
+  type ApiRequest,
   type ByProjectKeyRequestBuilder,
   type ClientResponse,
   createApiBuilderFromCtpClient,
   type Customer,
   type CustomerSignInResult
 } from '@commercetools/platform-sdk'
-import { SessionStorageTokenCache } from '~/api/TokenCache'
+import { LocalStorageTokenCache } from '~/api/TokenCache'
 
-type ApiClientProperties = {
+type ApiClientProps = {
   authUri?: string
   baseUri?: string
   clientId?: string
@@ -42,6 +44,8 @@ type SignupPayload = {
   password: string
 }
 
+export const LANG = 'en-US'
+
 export class CtpApiClient {
   private readonly authUri: string
   private readonly baseUri: string
@@ -50,9 +54,12 @@ export class CtpApiClient {
   private readonly projectKey: string
   private readonly scopes: string
 
-  private readonly tokenCache = new SessionStorageTokenCache('token')
+  private readonly publicTokenCache = new LocalStorageTokenCache('public')
+  private readonly protectedTokenCache = new LocalStorageTokenCache('protected')
+
+  private readonly anonymousIdStorageKey = 'anonymous_id'
 
-  private readonly public: ByProjectKeyRequestBuilder
+  private public: ByProjectKeyRequestBuilder
   private protected?: ByProjectKeyRequestBuilder
   private current: ByProjectKeyRequestBuilder
 
@@ -63,7 +70,7 @@ export class CtpApiClient {
     clientSecret = String(import.meta.env.VITE_CTP_CLIENT_SECRET),
     projectKey = String(import.meta.env.VITE_CTP_PROJECT_KEY),
     scopes = String(import.meta.env.VITE_CTP_SCOPES)
-  }: ApiClientProperties = {}) {
+  }: ApiClientProps = {}) {
     this.authUri = authUri
     this.baseUri = baseUri
     this.clientId = clientId
@@ -74,7 +81,7 @@ export class CtpApiClient {
     this.public = this.createPublic()
 
     if (this.hasToken) {
-      this.protected = this.createPublic(true)
+      this.protected = this.createProtectedWithToken()
       this.current = this.protected
     } else {
       this.current = this.public
@@ -87,62 +94,101 @@ export class CtpApiClient {
 
   public get hasToken(): boolean {
     try {
-      return this.tokenCache.get().token !== ''
+      return this.protectedTokenCache.get().token !== ''
     } catch {
       return false
     }
   }
 
+  private static isAnonymousIdError(error: unknown): boolean {
+    return (
+      typeof error === 'object' &&
+      error !== null &&
+      'statusCode' in error &&
+      error.statusCode === 400 &&
+      'message' in error &&
+      typeof error.message === 'string' &&
+      error.message.includes('anonymousId')
+    )
+  }
+
   public async login(email: string, password: string): Promise<ClientResponse<Customer>> {
-    this.logout()
+    const request: () => ApiRequest<CustomerSignInResult> = () =>
+      this.public
+        .me()
+        .login()
+        .post({
+          body: {
+            email,
+            password,
+            activeCartSignInMode: 'UseAsNewActiveCustomerCart',
+            updateProductData: true
+          }
+        })
+
+    try {
+      await request().execute()
+    } catch (error) {
+      await this.handleError<CustomerSignInResult>({ error, request })
+    }
 
-    this.protected = this.createProtected(email, password)
+    this.protected = this.createProtectedWithCredentials(email, password)
     this.current = this.protected
 
     return await this.getCurrentCustomer()
   }
 
   public logout(): void {
-    this.tokenCache.remove()
-    this.current = this.public
+    this.protectedTokenCache.remove()
+    this.publicTokenCache.remove()
+    this.public = this.createPublic()
     this.protected = undefined
+    this.current = this.public
+  }
+
+  public getCurrentCustomerBuilder(): ByProjectKeyMeRequestBuilder {
+    return this.current.me()
   }
 
   public async getCurrentCustomer(): Promise<ClientResponse<Customer>> {
-    return await this.current.me().get().execute()
+    return await this.getCurrentCustomerBuilder().get().execute()
   }
 
   public async signup(payload: SignupPayload): Promise<ClientResponse<CustomerSignInResult>> {
-    this.logout()
-
     const billingAddressIndex = payload.addresses.findIndex(({ type }) => type === CUSTOMER_ADDRESS_TYPE.BILLING)
     const shippingAddressIndex = payload.addresses.findIndex(({ type }) => type === CUSTOMER_ADDRESS_TYPE.SHIPPING)
 
-    return this.current
-      .me()
-      .signup()
-      .post({
-        body: {
-          addresses: payload.addresses.map(
-            (address): Omit<CustomerAddress, 'type'> => ({
-              city: address.city,
-              country: address.country,
-              firstName: payload.firstName,
-              lastName: payload.lastName,
-              postalCode: address.postalCode,
-              streetName: address.streetName
-            })
-          ),
-          dateOfBirth: payload.dateOfBirth,
-          defaultBillingAddress: billingAddressIndex === -1 ? undefined : billingAddressIndex,
-          defaultShippingAddress: shippingAddressIndex === -1 ? undefined : shippingAddressIndex,
-          email: payload.email,
-          firstName: payload.firstName,
-          lastName: payload.lastName,
-          password: payload.password
-        }
-      })
-      .execute()
+    const request: () => ApiRequest<CustomerSignInResult> = () =>
+      this.public
+        .me()
+        .signup()
+        .post({
+          body: {
+            addresses: payload.addresses.map(
+              (address): Omit<CustomerAddress, 'type'> => ({
+                city: address.city,
+                country: address.country,
+                firstName: payload.firstName,
+                lastName: payload.lastName,
+                postalCode: address.postalCode,
+                streetName: address.streetName
+              })
+            ),
+            dateOfBirth: payload.dateOfBirth,
+            defaultBillingAddress: billingAddressIndex === -1 ? undefined : billingAddressIndex,
+            defaultShippingAddress: shippingAddressIndex === -1 ? undefined : shippingAddressIndex,
+            email: payload.email,
+            firstName: payload.firstName,
+            lastName: payload.lastName,
+            password: payload.password
+          }
+        })
+
+    try {
+      return await request().execute()
+    } catch (error) {
+      return await this.handleError<CustomerSignInResult>({ error, request })
+    }
   }
 
   private getHttpOptions(): HttpMiddlewareOptions {
@@ -154,22 +200,23 @@ export class CtpApiClient {
     }
   }
 
-  private createPublic(withTokenCache: boolean = false): ByProjectKeyRequestBuilder {
-    const authOptions: AuthMiddlewareOptions = {
-      credentials: { clientId: this.clientId, clientSecret: this.clientSecret },
-      host: this.authUri,
-      httpClient: fetch,
-      projectKey: this.projectKey,
-      scopes: [this.scopes]
-    }
-
-    if (withTokenCache) {
-      authOptions.tokenCache = this.tokenCache
-    }
+  private createPublic(): ByProjectKeyRequestBuilder {
+    const anonymousId = this.getOrCreateAnonymousId()
 
     const client = new ClientBuilder()
       .withProjectKey(this.projectKey)
-      .withClientCredentialsFlow(authOptions)
+      .withAnonymousSessionFlow({
+        credentials: {
+          clientId: this.clientId,
+          clientSecret: this.clientSecret,
+          anonymousId
+        },
+        host: this.authUri,
+        httpClient: fetch,
+        projectKey: this.projectKey,
+        scopes: [this.scopes],
+        tokenCache: this.publicTokenCache
+      })
       .withHttpMiddleware(this.getHttpOptions())
       .withLoggerMiddleware()
       .build()
@@ -179,7 +226,7 @@ export class CtpApiClient {
     })
   }
 
-  private createProtected(email: string, password: string): ByProjectKeyRequestBuilder {
+  private createProtectedWithCredentials(email: string, password: string): ByProjectKeyRequestBuilder {
     const client = new ClientBuilder()
       .withProjectKey(this.projectKey)
       .withPasswordFlow({
@@ -188,7 +235,33 @@ export class CtpApiClient {
         httpClient: fetch,
         projectKey: this.projectKey,
         scopes: [this.scopes],
-        tokenCache: this.tokenCache
+        tokenCache: this.protectedTokenCache
+      })
+      .withHttpMiddleware(this.getHttpOptions())
+      .withLoggerMiddleware()
+      .build()
+
+    return createApiBuilderFromCtpClient(client).withProjectKey({
+      projectKey: this.projectKey
+    })
+  }
+
+  private createProtectedWithToken(): ByProjectKeyRequestBuilder {
+    const { refreshToken } = this.protectedTokenCache.get()
+
+    if (refreshToken === undefined) {
+      throw new Error('Refresh token is missing')
+    }
+
+    const client = new ClientBuilder()
+      .withProjectKey(this.projectKey)
+      .withRefreshTokenFlow({
+        credentials: { clientId: this.clientId, clientSecret: this.clientSecret },
+        host: this.authUri,
+        httpClient: fetch,
+        projectKey: this.projectKey,
+        tokenCache: this.protectedTokenCache,
+        refreshToken
       })
       .withHttpMiddleware(this.getHttpOptions())
       .withLoggerMiddleware()
@@ -198,6 +271,42 @@ export class CtpApiClient {
       projectKey: this.projectKey
     })
   }
+
+  private async handleError<T>({
+    error,
+    request
+  }: {
+    error: unknown
+    request: () => ApiRequest<T>
+  }): Promise<ClientResponse<T>> {
+    if (!CtpApiClient.isAnonymousIdError(error)) {
+      throw error
+    }
+
+    console.log('Anonymous ID is already in use. Creating new anonymous ID...')
+
+    this.logout()
+    return await request().execute()
+  }
+
+  private getOrCreateAnonymousId(): string {
+    let id = this.getAnonymousIdFromStorage()
+
+    if (id === null || !this.hasToken) {
+      id = crypto.randomUUID()
+      this.saveAnonymousIdToStorage(id)
+    }
+
+    return id
+  }
+
+  private getAnonymousIdFromStorage(): string | null {
+    return localStorage.getItem(this.anonymousIdStorageKey)
+  }
+
+  private saveAnonymousIdToStorage(id: string): void {
+    localStorage.setItem(this.anonymousIdStorageKey, id)
+  }
 }
 
 export const ctpApiClient = new CtpApiClient()
diff --git a/app/api/namespaces/cart.ts b/app/api/namespaces/cart.ts
index 7f08d9b..23d0f72 100644
--- a/app/api/namespaces/cart.ts
+++ b/app/api/namespaces/cart.ts
@@ -1,2 +1,147 @@
-// TODO: implement
-export {}
+import { ctpApiClient, type CtpApiClient } from '~/api/client'
+import { type Cart, type ClientResponse, type DiscountCodePagedQueryResponse } from '@commercetools/platform-sdk'
+
+type CartApiProps = {
+  client: CtpApiClient
+}
+
+export class CartApi {
+  private readonly client: CtpApiClient
+
+  private readonly cartIdStorageKey = 'cart_id'
+  private readonly currency = 'USD'
+
+  constructor({ client }: CartApiProps) {
+    this.client = client
+  }
+
+  public async addProduct(productId: string, quantity: number = 1): Promise<ClientResponse<Cart>> {
+    const cart = await this.getCart()
+
+    return this.client
+      .getCurrentCustomerBuilder()
+      .carts()
+      .withId({ ID: cart.id })
+      .post({ body: { actions: [{ action: 'addLineItem', productId, quantity }], version: cart.version } })
+      .execute()
+  }
+
+  public async removeProduct(productId: string, quantity: number = 1): Promise<ClientResponse<Cart>> {
+    const cart = await this.getCart()
+    const lineItemId = cart.lineItems.find((lineItem) => lineItem.productId === productId)?.id
+
+    if (lineItemId === undefined) {
+      throw new Error(`Could not find lineItem for product with ID ${productId}`)
+    }
+
+    return this.client
+      .getCurrentCustomerBuilder()
+      .carts()
+      .withId({ ID: cart.id })
+      .post({
+        body: { actions: [{ action: 'removeLineItem', lineItemId, quantity }], version: cart.version }
+      })
+      .execute()
+  }
+
+  public async updateProductQuantity(productId: string, quantity: number): Promise<ClientResponse<Cart>> {
+    const cart = await this.getCart()
+    const lineItemId = cart.lineItems.find((lineItem) => lineItem.productId === productId)?.id
+
+    if (lineItemId === undefined) {
+      throw new Error(`Could not find lineItem for product with ID ${productId}`)
+    }
+
+    return this.client
+      .getCurrentCustomerBuilder()
+      .carts()
+      .withId({ ID: cart.id })
+      .post({
+        body: { actions: [{ action: 'changeLineItemQuantity', lineItemId, quantity }], version: cart.version }
+      })
+      .execute()
+  }
+
+  public async clearCart(): Promise<Cart> {
+    let cart = await this.getCart()
+
+    for (const { id, quantity } of cart.lineItems) {
+      const { body } = await this.client
+        .getCurrentCustomerBuilder()
+        .carts()
+        .withId({ ID: cart.id })
+        .post({
+          body: { actions: [{ action: 'removeLineItem', lineItemId: id, quantity }], version: cart.version }
+        })
+        .execute()
+
+      cart = body
+    }
+
+    return cart
+  }
+
+  public async getCart(): Promise<Cart> {
+    const carts = await this.client.getCurrentCustomerBuilder().carts().get().execute()
+
+    if (carts.body.results.length === 0) {
+      const cart = await this.client
+        .getCurrentCustomerBuilder()
+        .carts()
+        .post({ body: { currency: this.currency } })
+        .execute()
+
+      this.saveCartIdToStorage(cart.body.id)
+
+      return cart.body
+    }
+
+    const cart = carts.body.results.find(
+      ({ id, cartState }) => id === this.getCartIdFromStorage() && cartState === 'Active'
+    )
+
+    if (cart !== undefined) {
+      return cart
+    }
+
+    const nonEmptyCart = carts.body.results.find(
+      ({ lineItems, cartState }) => lineItems.length > 0 && cartState === 'Active'
+    )
+
+    if (nonEmptyCart !== undefined) {
+      return nonEmptyCart
+    }
+
+    const activeCart = await this.client.getCurrentCustomerBuilder().activeCart().get().execute()
+
+    return activeCart.body
+  }
+
+  public async getDiscountCodes(): Promise<ClientResponse<DiscountCodePagedQueryResponse>> {
+    return this.client.root
+      .discountCodes()
+      .get({ queryArgs: { where: 'isActive = true' } })
+      .execute()
+  }
+
+  public async applyDiscountCode(code: string): Promise<ClientResponse<Cart>> {
+    const cart = await this.getCart()
+
+    return this.client
+      .getCurrentCustomerBuilder()
+      .carts()
+      .withId({ ID: cart.id })
+      .post({ body: { actions: [{ action: 'addDiscountCode', code }], version: cart.version } })
+      .execute()
+  }
+
+  private getCartIdFromStorage(): string | null {
+    return localStorage.getItem(this.cartIdStorageKey)
+  }
+
+  private saveCartIdToStorage(id: string): void {
+    localStorage.setItem(this.cartIdStorageKey, id)
+  }
+}
+
+export const cartApi = new CartApi({ client: ctpApiClient })
diff --git a/app/api/namespaces/product.ts b/app/api/namespaces/product.ts
index bd0f47e..bc9c980 100644
--- a/app/api/namespaces/product.ts
+++ b/app/api/namespaces/product.ts
@@ -1,4 +1,4 @@
-import { ctpApiClient, type CtpApiClient } from '~/api/client'
+import { ctpApiClient, type CtpApiClient, LANG } from '~/api/client'
 import {
   type ClientResponse,
   type ByProjectKeyProductProjectionsSearchRequestBuilder,
@@ -8,7 +8,7 @@ import {
   type ProductProjection
 } from '@commercetools/platform-sdk'
 
-type ProductApiProperties = {
+type ProductApiProps = {
   client: CtpApiClient
 }
 
@@ -68,6 +68,7 @@ export type ProductListAppliedSort = {
   value: 'asc' | 'desc'
 }[]
 
+export const PRODUCT_LIST_ITEMS_PER_PAGE = 12
 export const PRODUCT_LIST_FILTER_TRUE = 'T'
 export const PRODUCT_LIST_FILTER_FALSE = 'F'
 export const PRODUCT_LIST_FILTER_NONE = 'none'
@@ -92,22 +93,29 @@ export const PRODUCT_LIST_DEFAULT_APPLIED_SORT: ProductListAppliedSort = [
 export class ProductApi {
   private readonly client: CtpApiClient
 
-  constructor({ client }: ProductApiProperties) {
+  constructor({ client }: ProductApiProps) {
     this.client = client
   }
 
+  public static getPaginationQueryParameters(page: number): { limit: number; offset: number } {
+    return {
+      limit: PRODUCT_LIST_ITEMS_PER_PAGE,
+      offset: (page - 1) * PRODUCT_LIST_ITEMS_PER_PAGE
+    }
+  }
+
   private static convertAttributeToFilter({ label, type, name }: AttributeDefinition): ProductListFilter {
     const options: ProductListFilterFromAttributes['options'] =
       type.name === 'set' && 'values' in type.elementType
         ? type.elementType.values.map((value) => ({
             value: value.key,
-            label: typeof value.label === 'object' && 'en-US' in value.label ? value.label['en-US'] : 'Unknown label'
+            label: typeof value.label === 'object' && LANG in value.label ? value.label[LANG] : 'Unknown label'
           }))
         : []
 
     return {
       key: name,
-      label: label['en-US'],
+      label: label[LANG],
       options,
       type: type.name
     }
@@ -177,7 +185,7 @@ export class ProductApi {
             ]
           }),
           ...(sort.length > 0 && { sort: ProductApi.convertSortToQuery(sort) }),
-          ...(searchText.length > 0 && { 'text.en-US': searchText, fuzzy: true })
+          ...(searchText.length > 0 && { [`text.${LANG}`]: searchText, fuzzy: true })
         }
       })
       .execute()
diff --git a/app/api/namespaces/user.ts b/app/api/namespaces/user.ts
index 7d0304a..ea7ead7 100644
--- a/app/api/namespaces/user.ts
+++ b/app/api/namespaces/user.ts
@@ -2,14 +2,14 @@ import { type Address, type ClientResponse, type Customer } from '@commercetools
 import { formatDateForSdk } from '~/utils/formatDate'
 import { ctpApiClient, type CtpApiClient } from '~/api/client'
 
-type UserApiProperties = {
+type UserApiProps = {
   client: CtpApiClient
 }
 
 export class UserApi {
   private readonly client: CtpApiClient
 
-  constructor({ client }: UserApiProperties) {
+  constructor({ client }: UserApiProps) {
     this.client = client
   }
 
diff --git a/app/app.tsx b/app/app.tsx
index 32d321d..3144ddf 100644
--- a/app/app.tsx
+++ b/app/app.tsx
@@ -48,6 +48,7 @@ export function RoutesPublic(): ReactElement {
           </AccessPublic>
         }
       />
+      <Route path={ROUTES.CART} element={<Cart />} />
     </Route>
   )
 }
@@ -63,14 +64,6 @@ export function RoutesProtected(): ReactElement {
           </AccessProtected>
         }
       />
-      <Route
-        path={ROUTES.CART}
-        element={
-          <AccessProtected>
-            <Cart />
-          </AccessProtected>
-        }
-      />
       <Route
         path={ROUTES.LOGOUT}
         element={
diff --git a/app/assets/images/github-icon.png b/app/assets/images/github-icon.png
new file mode 100644
index 0000000..9490ffc
Binary files /dev/null and b/app/assets/images/github-icon.png differ
diff --git a/app/assets/images/school-logo.svg b/app/assets/images/school-logo.svg
new file mode 100644
index 0000000..324df31
--- /dev/null
+++ b/app/assets/images/school-logo.svg
@@ -0,0 +1,56 @@
+<svg width="173" height="64" viewBox="0 0 173 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1506_3141)">
+<path d="M88.9321 21.1981L97.1273 20.6682C97.3143 22.0087 97.6571 23.0062 98.218 23.7232C99.1216 24.8455 100.368 25.4066 102.02 25.4066C103.235 25.4066 104.201 25.1261 104.855 24.5337C105.478 24.0661 105.852 23.318 105.852 22.5386C105.852 21.7904 105.51 21.0734 104.917 20.6058C104.294 20.0447 102.83 19.4836 100.524 18.9848C96.7534 18.1431 94.0424 17.0208 92.4533 15.5868C90.8641 14.2464 89.9604 12.2824 90.0227 10.1938C90.0227 8.75976 90.459 7.32576 91.2692 6.14115C92.204 4.80068 93.4816 3.74076 95.0084 3.14846C96.6599 2.43146 98.9658 2.05737 101.864 2.05737C105.416 2.05737 108.127 2.71202 109.997 4.0525C111.866 5.36181 112.988 7.48163 113.331 10.3808L105.229 10.8484C105.011 9.60145 104.575 8.69741 103.858 8.10511C103.141 7.5128 102.207 7.23224 100.991 7.23224C99.9941 7.23224 99.2462 7.45046 98.7477 7.85572C98.2803 8.2298 97.9687 8.79093 97.9998 9.41441C97.9998 9.88202 98.2491 10.3185 98.623 10.599C99.0281 10.9731 99.9941 11.316 101.521 11.6278C105.291 12.4383 107.971 13.2488 109.623 14.0905C111.274 14.9322 112.458 15.9609 113.175 17.1767C113.923 18.4237 114.297 19.8577 114.266 21.3228C114.266 23.0686 113.767 24.8143 112.77 26.2795C111.742 27.807 110.308 28.9916 108.626 29.7086C106.849 30.488 104.606 30.8932 101.926 30.8932C97.1897 30.8932 93.9178 29.9892 92.0793 28.1499C90.2409 26.3107 89.1502 24.0038 88.9321 21.1981ZM1.96311 30.4256V2.55616H16.3281C18.9768 2.55616 21.0333 2.77437 22.4356 3.24198C23.8066 3.67842 25.0219 4.58246 25.8321 5.79824C26.7357 7.13872 27.172 8.69741 27.1408 10.3185C27.2343 13.0618 25.8321 15.6804 23.4327 17.052C22.4979 17.582 21.4696 17.9561 20.4101 18.1431C21.1892 18.3613 21.9682 18.7354 22.6537 19.1718C23.1834 19.6083 23.6197 20.1071 24.0248 20.637C24.4922 21.167 24.8973 21.7593 25.24 22.3828L29.4155 30.4568H19.6311L15.0194 21.884C14.4273 20.7929 13.9288 20.0759 13.4613 19.733C12.8381 19.2965 12.0903 19.0783 11.3424 19.0783H10.5946V30.3944H1.96311V30.4256ZM10.5946 13.8411H14.2404C15.0194 13.7788 15.7672 13.6541 16.5151 13.467C17.076 13.3735 17.5745 13.0618 17.9173 12.5941C18.7586 11.4719 18.634 9.88202 17.6057 8.91563C17.0448 8.44802 15.9542 8.19863 14.3962 8.19863H10.5946V13.8411ZM0 54.3048L8.19522 53.7749C8.38218 55.1153 8.72495 56.1129 9.28583 56.8299C10.1583 57.9522 11.4359 58.5445 13.0874 58.5445C14.3027 58.5445 15.2687 58.2639 15.923 57.6716C16.5462 57.1728 16.9202 56.4558 16.9202 55.6765C16.9202 54.9283 16.5774 54.2113 15.9853 53.7437C15.3621 53.1825 13.8976 52.6214 11.5606 52.1226C7.79013 51.2809 5.07916 50.1587 3.48998 48.7247C1.90079 47.3842 0.997137 45.4203 1.05946 43.3316C1.05946 41.8976 1.4957 40.4636 2.30588 39.279C3.24069 37.9385 4.51828 36.8786 6.04514 36.2863C7.69665 35.5693 10.0025 35.1952 12.9005 35.1952C16.4528 35.1952 19.1637 35.8499 21.0333 37.1903C22.903 38.5308 23.9936 40.6195 24.3364 43.5186L16.2346 43.9863C16.0165 42.7393 15.5803 41.8353 14.8636 41.243C14.178 40.6507 13.2121 40.3701 11.9968 40.4013C10.9997 40.4013 10.2518 40.6195 9.75324 41.0559C9.25467 41.43 8.97423 41.9911 9.00539 42.6146C9.00539 43.0822 9.25467 43.5186 9.6286 43.7992C10.0337 44.1733 10.9997 44.5162 12.5265 44.8279C16.297 45.6385 18.9768 46.449 20.6283 47.2907C22.2798 48.1324 23.4639 49.1611 24.1806 50.3769C24.9284 51.6239 25.3023 53.0579 25.3023 54.4919C25.3023 56.2376 24.7726 57.9522 23.8066 59.4173C22.7783 60.9449 21.345 62.1295 19.6623 62.8465C17.8861 63.6258 15.6426 64.0311 12.9628 64.0311C8.22638 64.0311 4.95452 63.127 3.11605 61.2878C1.27758 59.4173 0.249284 57.1105 0 54.3048Z" fill="#F5A73F"/>
+<path d="M41.4438 52.1227L48.9846 54.3984C48.5796 56.3 47.7382 58.1081 46.5853 59.698C45.5258 61.1008 44.1236 62.1919 42.5344 62.9089C40.9141 63.6259 38.8575 64 36.3646 64C33.3421 64 30.8492 63.5636 28.9484 62.6907C27.0165 61.8178 25.365 60.2591 23.9628 58.0458C22.5605 55.8324 21.875 52.9956 21.875 49.5353C21.875 44.9216 23.0903 41.3677 25.5519 38.905C28.0136 36.4423 31.4724 35.1953 35.9596 35.1953C39.4807 35.1953 42.2228 35.9123 44.2483 37.3151C46.2425 38.7491 47.7382 40.9313 48.7354 43.8617L41.1322 45.545C40.9452 44.8904 40.6648 44.2357 40.2909 43.6746C39.8235 43.02 39.2314 42.5212 38.5147 42.1471C37.798 41.773 36.9879 41.6171 36.1777 41.6171C34.2146 41.6171 32.7189 42.3965 31.6906 43.9864C30.9115 45.1398 30.5065 46.979 30.5065 49.473C30.5065 52.5592 30.9739 54.679 31.9087 55.8324C32.8435 56.9859 34.1522 57.547 35.8661 57.547C37.5176 57.547 38.764 57.0794 39.6053 56.1753C40.4467 55.209 41.0699 53.8685 41.4438 52.1227ZM59.0495 35.6629H67.6498V45.4203H77.0603V35.6629H85.7229V63.5324H77.0603V52.2474H67.6498V63.5324H59.0495V35.6629Z" fill="#F5A73F"/>
+<path d="M84.5391 49.5976C84.5391 45.0462 85.8166 41.4924 88.3406 38.9673C90.8647 36.4422 94.4169 35.1641 98.9352 35.1641C103.578 35.1641 107.13 36.411 109.654 38.9049C112.178 41.3988 113.425 44.8903 113.425 49.3794C113.425 52.6526 112.864 55.3024 111.773 57.391C110.714 59.4485 109.062 61.1319 107.037 62.2542C104.949 63.4076 102.363 63.9999 99.278 63.9999C96.1308 63.9999 93.5445 63.5011 91.4879 62.5036C89.3689 61.4437 87.624 59.7914 86.471 57.7651C85.1934 55.583 84.5391 52.8708 84.5391 49.5976ZM93.1394 49.6287C93.1394 52.4344 93.6691 54.4607 94.6974 55.7077C95.7257 56.9234 97.1591 57.5469 98.9664 57.5469C100.805 57.5469 102.238 56.9546 103.267 55.7388C104.295 54.523 104.793 52.372 104.793 49.2547C104.793 46.6361 104.264 44.7033 103.204 43.5187C102.145 42.3029 100.711 41.7106 98.9041 41.7106C97.3149 41.6482 95.788 42.3341 94.7286 43.5498C93.6691 44.7656 93.1394 46.7919 93.1394 49.6287ZM122.243 49.5976C122.243 45.0462 123.521 41.4924 126.045 38.9673C128.569 36.4422 132.121 35.1641 136.639 35.1641C141.282 35.1641 144.866 36.411 147.359 38.9049C149.852 41.3988 151.129 44.8903 151.129 49.3794C151.129 52.6526 150.568 55.3024 149.478 57.391C148.418 59.4485 146.767 61.1319 144.741 62.2542C142.653 63.4076 140.067 63.9999 136.982 63.9999C133.835 63.9999 131.249 63.5011 129.192 62.5036C127.073 61.4437 125.328 59.7914 124.175 57.7651C122.898 55.583 122.243 52.8708 122.243 49.5976ZM130.844 49.6287C130.844 52.4344 131.373 54.4607 132.402 55.7077C133.43 56.9234 134.863 57.5469 136.671 57.5469C138.509 57.5469 139.942 56.9546 140.971 55.7388C141.999 54.523 142.498 52.372 142.498 49.2547C142.498 46.6361 141.968 44.7033 140.908 43.5187C139.849 42.3029 138.416 41.7106 136.608 41.7106C135.019 41.6482 133.461 42.3341 132.433 43.5498C131.373 44.7656 130.844 46.7919 130.844 49.6287Z" fill="#F5A73F"/>
+<path d="M150.225 35.6628H158.825V56.674H172.255V63.5323H150.193V35.6628H150.225Z" fill="#F5A73F"/>
+<mask id="mask0_1506_3141" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="112" y="3" width="38" height="36">
+<path d="M140.745 34.0547C149.404 27.5268 152.074 16.4612 146.709 9.33874C141.344 2.21634 129.975 1.73432 121.317 8.26214C112.658 14.7899 109.988 25.8556 115.353 32.978C120.718 40.1005 132.086 40.5825 140.745 34.0547Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1506_3141)">
+<mask id="mask1_1506_3141" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="93" y="-17" width="76" height="76">
+<path d="M93.2715 17.626L138.016 -16.1069L168.977 24.9968L124.233 58.7297L93.2715 17.626Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_1506_3141)">
+<mask id="mask2_1506_3141" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="112" y="3" width="38" height="36">
+<path d="M140.745 34.0547C149.404 27.5268 152.074 16.4612 146.709 9.33874C141.344 2.21634 129.975 1.73432 121.317 8.26214C112.658 14.7899 109.988 25.8556 115.353 32.978C120.718 40.1005 132.086 40.5825 140.745 34.0547Z" fill="white"/>
+</mask>
+<g mask="url(#mask2_1506_3141)">
+<mask id="mask3_1506_3141" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="105" y="-4" width="52" height="51">
+<path d="M105.73 20.3706L137.062 -3.24939L156.509 22.5684L125.177 46.1884L105.73 20.3706Z" fill="white"/>
+</mask>
+<g mask="url(#mask3_1506_3141)">
+<path d="M140.745 34.0547C149.404 27.5268 152.074 16.4612 146.709 9.33874C141.344 2.21634 129.975 1.73432 121.317 8.26214C112.658 14.7899 109.988 25.8556 115.353 32.978C120.718 40.1005 132.086 40.5825 140.745 34.0547Z" stroke="#F5A73F" stroke-width="4" stroke-miterlimit="10"/>
+</g>
+<mask id="mask4_1506_3141" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="110" y="-2" width="43" height="47">
+<path d="M110.197 35.8774L121.013 -1.8517L152.072 7.05731L141.257 44.7865L110.197 35.8774Z" fill="white"/>
+</mask>
+<g mask="url(#mask4_1506_3141)">
+<path d="M105.732 20.3723L137.065 -3.24914L156.51 22.5671L125.178 46.1886L105.732 20.3723Z" stroke="#F5A73F" stroke-width="4" stroke-miterlimit="10"/>
+</g>
+<path d="M140.745 34.0547C149.404 27.5268 152.074 16.4612 146.709 9.33874C141.344 2.21634 129.975 1.73432 121.317 8.26214C112.658 14.7899 109.988 25.8556 115.353 32.978C120.718 40.1005 132.086 40.5825 140.745 34.0547Z" stroke="#F5A73F" stroke-width="4" stroke-miterlimit="10"/>
+<mask id="mask5_1506_3141" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="105" y="-4" width="52" height="51">
+<path d="M105.73 20.3706L137.062 -3.24939L156.509 22.5684L125.177 46.1884L105.73 20.3706Z" fill="white"/>
+</mask>
+<g mask="url(#mask5_1506_3141)">
+<path d="M140.745 34.0547C149.404 27.5268 152.074 16.4612 146.709 9.33874C141.344 2.21634 129.975 1.73432 121.317 8.26214C112.658 14.7899 109.988 25.8556 115.353 32.978C120.718 40.1005 132.086 40.5825 140.745 34.0547Z" stroke="#F5A73F" stroke-width="4" stroke-miterlimit="10"/>
+</g>
+<mask id="mask6_1506_3141" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="110" y="-2" width="43" height="47">
+<path d="M110.197 35.8774L121.013 -1.8517L152.072 7.05731L141.257 44.7865L110.197 35.8774Z" fill="white"/>
+</mask>
+<g mask="url(#mask6_1506_3141)">
+<path d="M105.732 20.3723L137.065 -3.24914L156.51 22.5671L125.178 46.1886L105.732 20.3723Z" stroke="#F5A73F" stroke-width="4" stroke-miterlimit="10"/>
+</g>
+<path d="M93.2715 17.626L138.016 -16.1069L168.977 24.9968L124.233 58.7297L93.2715 17.626Z" stroke="#F5A73F" stroke-width="4" stroke-miterlimit="10"/>
+</g>
+<path d="M140.745 34.0547C149.404 27.5268 152.074 16.4612 146.709 9.33874C141.344 2.21634 129.975 1.73432 121.317 8.26214C112.658 14.7899 109.988 25.8556 115.353 32.978C120.718 40.1005 132.086 40.5825 140.745 34.0547Z" stroke="#F5A73F" stroke-width="4" stroke-miterlimit="10"/>
+<path d="M122.273 19.1095L125.389 16.9273L129.221 22.3828C129.876 23.2556 130.374 24.1909 130.748 25.2196C130.966 25.9989 130.904 26.8406 130.592 27.5888C130.187 28.524 129.533 29.3034 128.66 29.8645C127.632 30.5815 126.76 30.9868 126.012 31.1115C125.295 31.2362 124.547 31.1115 123.862 30.7997C123.114 30.4256 122.46 29.8957 121.961 29.2099L124.641 26.7159C124.859 27.0589 125.139 27.3706 125.451 27.62C125.669 27.7759 125.918 27.8694 126.199 27.8694C126.417 27.8694 126.635 27.7759 126.791 27.6512C127.102 27.4641 127.321 27.09 127.289 26.7159C127.196 26.186 126.978 25.656 126.635 25.2508L122.273 19.1095ZM131.621 22.5698L134.456 20.3253C134.768 20.6994 135.173 20.9799 135.609 21.1358C136.232 21.3229 136.887 21.1982 137.417 20.7929C137.79 20.5435 138.102 20.2006 138.227 19.7642C138.414 19.203 138.102 18.5796 137.541 18.3925C137.448 18.3613 137.354 18.3302 137.261 18.3302C136.887 18.299 136.232 18.4549 135.266 18.8601C133.677 19.5148 132.431 19.7642 131.496 19.6706C130.592 19.5771 129.751 19.1095 129.252 18.3302C128.879 17.8002 128.692 17.1767 128.66 16.5533C128.66 15.8363 128.847 15.1193 129.252 14.527C129.845 13.6853 130.561 12.9683 131.434 12.4071C132.742 11.5031 133.895 11.0667 134.893 11.0667C135.89 11.0667 136.825 11.5343 137.697 12.5006L134.893 14.714C134.332 13.997 133.272 13.8411 132.556 14.4023L132.462 14.4958C132.15 14.6828 131.932 14.9634 131.808 15.3063C131.714 15.5557 131.776 15.8363 131.932 16.0545C132.057 16.2103 132.244 16.335 132.462 16.335C132.711 16.3662 133.148 16.2415 133.771 15.961C135.329 15.3063 136.513 14.9322 137.323 14.8075C138.009 14.6828 138.725 14.7452 139.38 15.0257C139.972 15.2751 140.47 15.7116 140.813 16.2415C141.249 16.865 141.499 17.6132 141.53 18.3925C141.561 19.203 141.343 19.9824 140.907 20.6682C140.346 21.5099 139.629 22.2269 138.788 22.788C137.074 23.9726 135.672 24.4714 134.55 24.2844C133.335 24.0973 132.337 23.4739 131.621 22.5698Z" fill="#F5A73F"/>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1506_3141">
+<rect width="172.255" height="64" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/app/components/Loading.tsx b/app/components/Loading.tsx
index d9e5a06..aa1a997 100644
--- a/app/components/Loading.tsx
+++ b/app/components/Loading.tsx
@@ -2,9 +2,9 @@ import { type ReactElement } from 'react'
 
 export function Loading(): ReactElement {
   return (
-    <div className="flex flex-col items-center justify-center min-h-[200px] gap-2 text-blue-600">
-      <div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-300 border-t-transparent" />
-      <p className="text-sm font-medium text-blue-500">Loading...</p>
+    <div className="flex flex-col items-center justify-center min-h-[200px] gap-2 text-neural-600">
+      <div className="h-8 w-8 animate-spin rounded-full border-4 border-neural-300 border-t-transparent" />
+      <p className="text-sm font-medium text-neural-500">Loading...</p>
     </div>
   )
 }
diff --git a/app/components/product/ProductImage.tsx b/app/components/product/ProductImage.tsx
new file mode 100644
index 0000000..e4d53e8
--- /dev/null
+++ b/app/components/product/ProductImage.tsx
@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react'
+import { AspectRatio } from '../ui/AspectRatio'
+
+export function ProductImage({ imageUrl, alt }: { imageUrl: string | undefined; alt: string }): ReactElement {
+  return (
+    <AspectRatio ratio={4 / 3} className="bg-white rounded-md">
+      {imageUrl && <img src={imageUrl} alt={alt} className="w-full h-full object-contain" />}
+    </AspectRatio>
+  )
+}
diff --git a/app/components/product/ProductPrice.test.tsx b/app/components/product/ProductPrice.test.tsx
index 050faac..95df003 100644
--- a/app/components/product/ProductPrice.test.tsx
+++ b/app/components/product/ProductPrice.test.tsx
@@ -9,7 +9,8 @@ describe('ProductPrice', () => {
 
     renderWithProviders(<ProductPrice startPrice={startPrice} discountPrice={discountPrice} />)
 
-    expect(screen.getByText('$1', { selector: 'div:not(.text-green-400)' })).toBeInTheDocument()
-    expect(screen.getByText('$0.5', { selector: '.text-green-400' })).toBeInTheDocument()
+    expect(screen.queryByTestId('start-price')).toHaveTextContent('$1')
+
+    expect(screen.queryByTestId('discount-price')).toHaveTextContent('$0.5')
   })
 })
diff --git a/app/components/product/ProductPrice.tsx b/app/components/product/ProductPrice.tsx
index 819816c..c444409 100644
--- a/app/components/product/ProductPrice.tsx
+++ b/app/components/product/ProductPrice.tsx
@@ -1,23 +1,29 @@
 import { type ReactElement } from 'react'
 import { formatProductItemPrice } from '~/utils/formatPrice'
 
-type ProductPriceProperties = {
+type ProductPriceProps = {
   startPrice: number
   discountPrice?: number
 }
 
-export function ProductPrice({ startPrice, discountPrice }: ProductPriceProperties): ReactElement {
+export function ProductPrice({ startPrice, discountPrice }: ProductPriceProps): ReactElement {
   const hasDiscount = discountPrice !== undefined && discountPrice < startPrice
 
   const formattedStartPrice = formatProductItemPrice(startPrice)
+  const formattedDiscountPrice = formatProductItemPrice(discountPrice)
 
   if (hasDiscount) {
     return (
       <div className="flex gap-1">
-        <div className="relative before:content-[''] before:absolute before:bg-red-500 before:h-[2px] before:w-full before:top-[50%] before:translate-y-[-50%] before:rotate-10 before:opacity-60">
+        <div
+          data-testid="start-price"
+          className="relative before:content-[''] before:absolute before:bg-red-500 before:h-[2px] before:w-full before:top-[50%] before:translate-y-[-50%] before:rotate-10 before:opacity-60"
+        >
           {formattedStartPrice}
         </div>
-        <div className="text-green-400">{formatProductItemPrice(discountPrice)}</div>
+        <div data-testid="discount-price" className="text-green-400">
+          {formattedDiscountPrice}
+        </div>
       </div>
     )
   }
diff --git a/app/components/ui/Alert.tsx b/app/components/ui/Alert.tsx
index eea1a66..6d36ee1 100644
--- a/app/components/ui/Alert.tsx
+++ b/app/components/ui/Alert.tsx
@@ -1,6 +1,5 @@
-import { type ReactElement } from 'react'
+import { type ComponentProps, type ReactElement } from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
-
 import { cn } from '~/utils/ui'
 
 const alertVariants = cva(
@@ -21,22 +20,22 @@ const alertVariants = cva(
 export function Alert({
   className,
   variant,
-  ...properties
-}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>): ReactElement {
-  return <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...properties} />
+  ...props
+}: ComponentProps<'div'> & VariantProps<typeof alertVariants>): ReactElement {
+  return <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
 }
 
-export function AlertTitle({ className, ...properties }: React.ComponentProps<'div'>): ReactElement {
+export function AlertTitle({ className, ...props }: ComponentProps<'div'>): ReactElement {
   return (
     <div
       data-slot="alert-title"
       className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function AlertDescription({ className, ...properties }: React.ComponentProps<'div'>): ReactElement {
+export function AlertDescription({ className, ...props }: ComponentProps<'div'>): ReactElement {
   return (
     <div
       data-slot="alert-description"
@@ -44,7 +43,7 @@ export function AlertDescription({ className, ...properties }: React.ComponentPr
         'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-xs [&_p]:leading-relaxed',
         className
       )}
-      {...properties}
+      {...props}
     />
   )
 }
diff --git a/app/components/ui/AlertDialog.tsx b/app/components/ui/AlertDialog.tsx
new file mode 100644
index 0000000..9f20251
--- /dev/null
+++ b/app/components/ui/AlertDialog.tsx
@@ -0,0 +1,111 @@
+import { type ComponentProps, type ReactElement } from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+import { cn } from '~/utils/ui'
+import { buttonVariants } from '~/components/ui/Button'
+
+export function AlertDialog({ ...props }: ComponentProps<typeof AlertDialogPrimitive.Root>): ReactElement {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+export function AlertDialogTrigger({ ...props }: ComponentProps<typeof AlertDialogPrimitive.Trigger>): ReactElement {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+}
+
+export function AlertDialogPortal({ ...props }: ComponentProps<typeof AlertDialogPrimitive.Portal>): ReactElement {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+}
+
+export function AlertDialogOverlay({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Overlay>): ReactElement {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function AlertDialogContent({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Content>): ReactElement {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+export function AlertDialogHeader({ className, ...props }: ComponentProps<'div'>): ReactElement {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+export function AlertDialogFooter({ className, ...props }: ComponentProps<'div'>): ReactElement {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+      {...props}
+    />
+  )
+}
+
+export function AlertDialogTitle({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Title>): ReactElement {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn('text-lg font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+export function AlertDialogDescription({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Description>): ReactElement {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export function AlertDialogAction({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Action>): ReactElement {
+  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />
+}
+
+export function AlertDialogCancel({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Cancel>): ReactElement {
+  return <AlertDialogPrimitive.Cancel className={cn(buttonVariants({ variant: 'outline' }), className)} {...props} />
+}
diff --git a/app/components/ui/AspectRatio.tsx b/app/components/ui/AspectRatio.tsx
index 3ad4998..6cf6ad2 100644
--- a/app/components/ui/AspectRatio.tsx
+++ b/app/components/ui/AspectRatio.tsx
@@ -1,6 +1,6 @@
 import { Root } from '@radix-ui/react-aspect-ratio'
 import { type ComponentProps, type ReactElement } from 'react'
 
-export function AspectRatio({ ...properties }: ComponentProps<typeof Root>): ReactElement {
-  return <Root data-slot="aspect-ratio" {...properties} />
+export function AspectRatio({ ...props }: ComponentProps<typeof Root>): ReactElement {
+  return <Root data-slot="aspect-ratio" {...props} />
 }
diff --git a/app/components/ui/Badge.tsx b/app/components/ui/Badge.tsx
index fbc25dc..f2dc2bb 100644
--- a/app/components/ui/Badge.tsx
+++ b/app/components/ui/Badge.tsx
@@ -25,9 +25,9 @@ export function Badge({
   className,
   variant,
   asChild = false,
-  ...properties
+  ...props
 }: ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }): ReactElement {
   const Comp = asChild ? Slot : 'span'
 
-  return <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...properties} />
+  return <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
 }
diff --git a/app/components/ui/Breadcrumb.tsx b/app/components/ui/Breadcrumb.tsx
index 81378db..5e6f13d 100644
--- a/app/components/ui/Breadcrumb.tsx
+++ b/app/components/ui/Breadcrumb.tsx
@@ -3,11 +3,11 @@ import { Slot } from '@radix-ui/react-slot'
 import { ChevronRight, MoreHorizontal } from 'lucide-react'
 import { cn } from '~/utils/ui'
 
-export function Breadcrumb({ ...properties }: ComponentProps<'nav'>): ReactElement {
-  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...properties} />
+export function Breadcrumb({ ...props }: ComponentProps<'nav'>): ReactElement {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
 }
 
-export function BreadcrumbList({ className, ...properties }: ComponentProps<'ol'>): ReactElement {
+export function BreadcrumbList({ className, ...props }: ComponentProps<'ol'>): ReactElement {
   return (
     <ol
       data-slot="breadcrumb-list"
@@ -15,36 +15,30 @@ export function BreadcrumbList({ className, ...properties }: ComponentProps<'ol'
         'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
         className
       )}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function BreadcrumbItem({ className, ...properties }: ComponentProps<'li'>): ReactElement {
-  return (
-    <li data-slot="breadcrumb-item" className={cn('inline-flex items-center gap-1.5', className)} {...properties} />
-  )
+export function BreadcrumbItem({ className, ...props }: ComponentProps<'li'>): ReactElement {
+  return <li data-slot="breadcrumb-item" className={cn('inline-flex items-center gap-1.5', className)} {...props} />
 }
 
 export function BreadcrumbLink({
   asChild,
   className,
-  ...properties
+  ...props
 }: ComponentProps<'a'> & {
   asChild?: boolean
 }): ReactElement {
   const Comp = asChild ? Slot : 'a'
 
   return (
-    <Comp
-      data-slot="breadcrumb-link"
-      className={cn('hover:text-foreground transition-colors', className)}
-      {...properties}
-    />
+    <Comp data-slot="breadcrumb-link" className={cn('hover:text-foreground transition-colors', className)} {...props} />
   )
 }
 
-export function BreadcrumbPage({ className, ...properties }: ComponentProps<'span'>): ReactElement {
+export function BreadcrumbPage({ className, ...props }: ComponentProps<'span'>): ReactElement {
   return (
     <span
       data-slot="breadcrumb-page"
@@ -52,33 +46,33 @@ export function BreadcrumbPage({ className, ...properties }: ComponentProps<'spa
       aria-disabled="true"
       aria-current="page"
       className={cn('text-foreground font-normal', className)}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function BreadcrumbSeparator({ children, className, ...properties }: ComponentProps<'li'>): ReactElement {
+export function BreadcrumbSeparator({ children, className, ...props }: ComponentProps<'li'>): ReactElement {
   return (
     <li
       data-slot="breadcrumb-separator"
       role="presentation"
       aria-hidden="true"
       className={cn('[&>svg]:size-3.5', className)}
-      {...properties}
+      {...props}
     >
       {children ?? <ChevronRight />}
     </li>
   )
 }
 
-export function BreadcrumbEllipsis({ className, ...properties }: ComponentProps<'span'>): ReactElement {
+export function BreadcrumbEllipsis({ className, ...props }: ComponentProps<'span'>): ReactElement {
   return (
     <span
       data-slot="breadcrumb-ellipsis"
       role="presentation"
       aria-hidden="true"
       className={cn('flex size-9 items-center justify-center', className)}
-      {...properties}
+      {...props}
     >
       <MoreHorizontal className="size-4" />
       <span className="sr-only">More</span>
diff --git a/app/components/ui/Button.tsx b/app/components/ui/Button.tsx
index c6b6268..771f9eb 100644
--- a/app/components/ui/Button.tsx
+++ b/app/components/ui/Button.tsx
@@ -8,16 +8,17 @@ export const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 cursor-pointer',
         destructive:
           'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
         outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 cursor-pointer',
         secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
         link: 'text-primary underline-offset-4 hover:underline',
         blue: 'px-4 py-2 bg-blue-600 hover:bg-blue-800 text-white rounded-xl transition',
-        gray: 'px-4 py-2 bg-gray-300 hover:bg-gray-400 text-black rounded-xl transition'
+        gray: 'px-4 py-2 bg-gray-300 hover:bg-gray-400 text-black rounded-xl transition',
+        neutral: 'px-4 py-2 bg-neutral-800 hover:bg-neutral-900 text-white rounded-xl transition'
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',
@@ -38,12 +39,12 @@ export function Button({
   variant,
   size,
   asChild = false,
-  ...properties
+  ...props
 }: ComponentProps<'button'> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean
   }): ReactElement {
   const Comp = asChild ? Slot : 'button'
 
-  return <Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...properties} />
+  return <Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />
 }
diff --git a/app/components/ui/Calendar.tsx b/app/components/ui/Calendar.tsx
index 568a54c..f286163 100644
--- a/app/components/ui/Calendar.tsx
+++ b/app/components/ui/Calendar.tsx
@@ -5,9 +5,9 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '~
 import { buttonVariants } from '~/components/ui/Button'
 import { cn } from '~/utils/ui'
 
-export type CalendarProperties = ComponentProps<typeof DayPicker>
+export type CalendarProps = ComponentProps<typeof DayPicker>
 
-function getClassNames(properties: CalendarProperties): CalendarProperties['classNames'] {
+function getClassNames(props: CalendarProps): CalendarProps['classNames'] {
   return {
     months: 'flex flex-col justify-center sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
     month: 'space-y-3',
@@ -29,7 +29,7 @@ function getClassNames(properties: CalendarProperties): CalendarProperties['clas
     row: 'flex justify-center w-full mt-2',
     cell: cn(
       'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent',
-      properties.mode === 'range'
+      props.mode === 'range'
         ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
         : '[&:has([aria-selected])]:rounded-md'
     ),
@@ -43,7 +43,7 @@ function getClassNames(properties: CalendarProperties): CalendarProperties['clas
     day_disabled: 'text-muted-foreground opacity-50',
     day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
     day_hidden: 'invisible',
-    ...properties.classNames
+    ...props.classNames
   }
 }
 
@@ -66,17 +66,17 @@ function IconRight(): ReactElement {
   return <ChevronRightIcon className="h-4 w-4" />
 }
 
-function Dropdown({ ...properties }: DropdownProps): ReactElement {
+function Dropdown({ ...props }: DropdownProps): ReactElement {
   return (
     <Select
-      {...properties}
+      {...props}
       onValueChange={(value) => {
-        if (properties.onChange) {
-          handleCalendarChange(value, properties.onChange)
+        if (props.onChange) {
+          handleCalendarChange(value, props.onChange)
         }
       }}
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      value={properties.value as string}
+      value={props.value as string}
     >
       <SelectTrigger
         className={cn(
@@ -84,11 +84,11 @@ function Dropdown({ ...properties }: DropdownProps): ReactElement {
           'px-2 py-1 h-7 border-none shadow-none font-medium [.is-between_&]:hidden [.is-end_&]:hidden [.is-start.is-end_&]:flex'
         )}
       >
-        <SelectValue placeholder={properties?.caption}>{properties?.caption}</SelectValue>
+        <SelectValue placeholder={props?.caption}>{props?.caption}</SelectValue>
       </SelectTrigger>
       <SelectContent className="max-h-[calc(var(--radix-popper-available-height) - 50px)] overflow-y-auto scrolling-auto min-w-[var(--radix-popper-anchor-width)]">
-        {properties.children &&
-          Children.map(properties.children, (child) => (
+        {props.children &&
+          Children.map(props.children, (child) => (
             <SelectItem
               // @ts-expect-error https://github.com/shadcn-ui/ui/discussions/1553
               // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-unsafe-assignment
@@ -110,19 +110,19 @@ function Dropdown({ ...properties }: DropdownProps): ReactElement {
 export function Calendar({
   className,
   showOutsideDays = true,
-  ...properties
-}: CalendarProperties & { onChange?: ChangeEventHandler<HTMLSelectElement> }): ReactElement {
+  ...props
+}: CalendarProps & { onChange?: ChangeEventHandler<HTMLSelectElement> }): ReactElement {
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn('p-3', className)}
-      classNames={getClassNames(properties)}
+      classNames={getClassNames(props)}
       components={{
         IconLeft,
         IconRight,
         Dropdown
       }}
-      {...properties}
+      {...props}
     />
   )
 }
diff --git a/app/components/ui/Card.tsx b/app/components/ui/Card.tsx
index 0f36092..d659bc5 100644
--- a/app/components/ui/Card.tsx
+++ b/app/components/ui/Card.tsx
@@ -1,7 +1,7 @@
 import { type ComponentProps, type ReactElement } from 'react'
 import { cn } from '~/utils/ui'
 
-export function Card({ className, ...properties }: ComponentProps<'div'>): ReactElement {
+export function Card({ className, ...props }: ComponentProps<'div'>): ReactElement {
   return (
     <div
       data-slot="card"
@@ -9,12 +9,12 @@ export function Card({ className, ...properties }: ComponentProps<'div'>): React
         'mx-auto bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
         className
       )}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function CardHeader({ className, ...properties }: ComponentProps<'div'>): ReactElement {
+export function CardHeader({ className, ...props }: ComponentProps<'div'>): ReactElement {
   return (
     <div
       data-slot="card-header"
@@ -22,39 +22,39 @@ export function CardHeader({ className, ...properties }: ComponentProps<'div'>):
         '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
         className
       )}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function CardTitle({ className, ...properties }: ComponentProps<'div'>): ReactElement {
-  return <div data-slot="card-title" className={cn('leading-none font-semibold', className)} {...properties} />
+export function CardTitle({ className, ...props }: ComponentProps<'div'>): ReactElement {
+  return <div data-slot="card-title" className={cn('leading-none font-semibold', className)} {...props} />
 }
 
-export function CardAction({ className, ...properties }: ComponentProps<'div'>): ReactElement {
+export function CardAction({ className, ...props }: ComponentProps<'div'>): ReactElement {
   return (
     <div
       data-slot="card-action"
       className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function CardContent({ className, ...properties }: ComponentProps<'div'>): ReactElement {
-  return <div data-slot="card-content" className={cn('space-y-6 px-6', className)} {...properties} />
+export function CardContent({ className, ...props }: ComponentProps<'div'>): ReactElement {
+  return <div data-slot="card-content" className={cn('space-y-6 px-6', className)} {...props} />
 }
 
-export function CardFooter({ className, ...properties }: ComponentProps<'div'>): ReactElement {
+export function CardFooter({ className, ...props }: ComponentProps<'div'>): ReactElement {
   return (
     <div
       data-slot="card-footer"
       className={cn('mt-[25px] flex items-center justify-center px-6 [.border-t]:pt-6', className)}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function CardDescription({ className, ...properties }: ComponentProps<'div'>): ReactElement {
-  return <div data-slot="card-description" className={cn('text-muted-foreground text-sm', className)} {...properties} />
+export function CardDescription({ className, ...props }: ComponentProps<'div'>): ReactElement {
+  return <div data-slot="card-description" className={cn('text-muted-foreground text-sm', className)} {...props} />
 }
diff --git a/app/components/ui/Collapsible.tsx b/app/components/ui/Collapsible.tsx
index 885e6bc..210324e 100644
--- a/app/components/ui/Collapsible.tsx
+++ b/app/components/ui/Collapsible.tsx
@@ -5,14 +5,14 @@ import {
   CollapsibleContent as RadixCollapsibleContent
 } from '@radix-ui/react-collapsible'
 
-export function Collapsible({ ...properties }: ComponentProps<typeof Root>): ReactElement {
-  return <Root data-slot="collapsible" {...properties} />
+export function Collapsible({ ...props }: ComponentProps<typeof Root>): ReactElement {
+  return <Root data-slot="collapsible" {...props} />
 }
 
-export function CollapsibleTrigger({ ...properties }: ComponentProps<typeof RadixCollapsibleTrigger>): ReactElement {
-  return <RadixCollapsibleTrigger data-slot="collapsible-trigger" {...properties} />
+export function CollapsibleTrigger({ ...props }: ComponentProps<typeof RadixCollapsibleTrigger>): ReactElement {
+  return <RadixCollapsibleTrigger data-slot="collapsible-trigger" {...props} />
 }
 
-export function CollapsibleContent({ ...properties }: ComponentProps<typeof RadixCollapsibleContent>): ReactElement {
-  return <RadixCollapsibleContent data-slot="collapsible-content" {...properties} />
+export function CollapsibleContent({ ...props }: ComponentProps<typeof RadixCollapsibleContent>): ReactElement {
+  return <RadixCollapsibleContent data-slot="collapsible-content" {...props} />
 }
diff --git a/app/components/ui/Dialog.tsx b/app/components/ui/Dialog.tsx
index eba4386..2d2a522 100644
--- a/app/components/ui/Dialog.tsx
+++ b/app/components/ui/Dialog.tsx
@@ -8,20 +8,20 @@ export { Root as Dialog, Trigger as DialogTrigger } from '@radix-ui/react-dialog
 const DialogPortal = Portal
 export const DialogClose = Close
 
-const DialogOverlay = ({ className, ...properties }: ComponentPropsWithoutRef<typeof Overlay>): ReactElement => (
+const DialogOverlay = ({ className, ...props }: ComponentPropsWithoutRef<typeof Overlay>): ReactElement => (
   <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
     )}
-    {...properties}
+    {...props}
   />
 )
 
 export const DialogContent = ({
   className,
   children,
-  ...properties
+  ...props
 }: ComponentPropsWithoutRef<typeof Content>): ReactElement => (
   <DialogPortal>
     <DialogOverlay />
@@ -30,7 +30,7 @@ export const DialogContent = ({
         'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg',
         className
       )}
-      {...properties}
+      {...props}
     >
       {children}
       <DialogClose className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
@@ -41,21 +41,21 @@ export const DialogContent = ({
   </DialogPortal>
 )
 
-export const DialogHeader = ({ className, ...properties }: HTMLAttributes<HTMLDivElement>): ReactElement => (
-  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...properties} />
+export const DialogHeader = ({ className, ...props }: HTMLAttributes<HTMLDivElement>): ReactElement => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
 )
 
-export const DialogFooter = ({ className, ...properties }: HTMLAttributes<HTMLDivElement>): ReactElement => (
-  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...properties} />
+export const DialogFooter = ({ className, ...props }: HTMLAttributes<HTMLDivElement>): ReactElement => (
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
 )
 
-export const DialogTitle = ({ className, ...properties }: ComponentPropsWithoutRef<typeof Title>): ReactElement => (
-  <Title className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...properties} />
+export const DialogTitle = ({ className, ...props }: ComponentPropsWithoutRef<typeof Title>): ReactElement => (
+  <Title className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
 )
 
 export const DialogDescription = ({
   className,
-  ...properties
+  ...props
 }: ComponentPropsWithoutRef<typeof Description>): ReactElement => (
-  <Description className={cn('text-sm text-muted-foreground', className)} {...properties} />
+  <Description className={cn('text-sm text-muted-foreground', className)} {...props} />
 )
diff --git a/app/components/ui/Form.tsx b/app/components/ui/Form.tsx
index 9d5096d..8fe59fd 100644
--- a/app/components/ui/Form.tsx
+++ b/app/components/ui/Form.tsx
@@ -27,11 +27,11 @@ export const FormField = <
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 >({
-  ...properties
+  ...props
 }: ControllerProps<TFieldValues, TName>): ReactElement => {
   return (
-    <FormFieldContext.Provider value={{ name: properties.name }}>
-      <Controller {...properties} />
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
     </FormFieldContext.Provider>
   )
 }
@@ -71,17 +71,17 @@ type FormItemContextValue = {
 
 const FormItemContext = createContext<FormItemContextValue>({})
 
-export function FormItem({ className, ...properties }: ComponentProps<'div'>): ReactElement {
+export function FormItem({ className, ...props }: ComponentProps<'div'>): ReactElement {
   const id = useId()
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div data-slot="form-item" className={cn('grid gap-2', className)} {...properties} />
+      <div data-slot="form-item" className={cn('grid gap-2', className)} {...props} />
     </FormItemContext.Provider>
   )
 }
 
-export function FormLabel({ className, ...properties }: ComponentProps<typeof Root>): ReactElement {
+export function FormLabel({ className, ...props }: ComponentProps<typeof Root>): ReactElement {
   const { error, formItemId } = useFormField()
 
   return (
@@ -90,12 +90,12 @@ export function FormLabel({ className, ...properties }: ComponentProps<typeof Ro
       data-error={!!error}
       className={cn('data-[error=true]:text-destructive', className)}
       htmlFor={formItemId}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function FormControl({ ...properties }: ComponentProps<typeof Slot>): ReactElement {
+export function FormControl({ ...props }: ComponentProps<typeof Slot>): ReactElement {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
 
   return (
@@ -104,12 +104,12 @@ export function FormControl({ ...properties }: ComponentProps<typeof Slot>): Rea
       id={formItemId}
       aria-describedby={error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`}
       aria-invalid={!!error}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function FormDescription({ className, ...properties }: ComponentProps<'p'>): ReactElement {
+export function FormDescription({ className, ...props }: ComponentProps<'p'>): ReactElement {
   const { formDescriptionId } = useFormField()
 
   return (
@@ -117,26 +117,21 @@ export function FormDescription({ className, ...properties }: ComponentProps<'p'
       data-slot="form-description"
       id={formDescriptionId}
       className={cn('text-muted-foreground text-sm', className)}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function FormMessage({ className, ...properties }: ComponentProps<'p'>): ReactElement | undefined {
+export function FormMessage({ className, ...props }: ComponentProps<'p'>): ReactElement | undefined {
   const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? '') : properties.children
+  const body = error ? String(error?.message ?? '') : props.children
 
   if (!body) {
     return undefined
   }
 
   return (
-    <p
-      data-slot="form-message"
-      id={formMessageId}
-      className={cn('text-destructive text-sm', className)}
-      {...properties}
-    >
+    <p data-slot="form-message" id={formMessageId} className={cn('text-destructive text-sm', className)} {...props}>
       {body}
     </p>
   )
diff --git a/app/components/ui/Input.tsx b/app/components/ui/Input.tsx
index 37791f5..4b530b9 100644
--- a/app/components/ui/Input.tsx
+++ b/app/components/ui/Input.tsx
@@ -1,7 +1,7 @@
 import { type ComponentProps, type ReactElement } from 'react'
 import { cn } from '~/utils/ui'
 
-export function Input({ className, type, ...properties }: ComponentProps<'input'>): ReactElement {
+export function Input({ className, type, ...props }: ComponentProps<'input'>): ReactElement {
   return (
     <input
       type={type}
@@ -12,7 +12,7 @@ export function Input({ className, type, ...properties }: ComponentProps<'input'
         'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
         className
       )}
-      {...properties}
+      {...props}
     />
   )
 }
diff --git a/app/components/ui/Label.tsx b/app/components/ui/Label.tsx
index c9ae7ea..0cfa051 100644
--- a/app/components/ui/Label.tsx
+++ b/app/components/ui/Label.tsx
@@ -2,7 +2,7 @@ import { type ComponentProps, type ReactElement } from 'react'
 import { Root } from '@radix-ui/react-label'
 import { cn } from '~/utils/ui'
 
-export function Label({ className, ...properties }: ComponentProps<typeof Root>): ReactElement {
+export function Label({ className, ...props }: ComponentProps<typeof Root>): ReactElement {
   return (
     <Root
       data-slot="label"
@@ -10,7 +10,7 @@ export function Label({ className, ...properties }: ComponentProps<typeof Root>)
         'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
         className
       )}
-      {...properties}
+      {...props}
     />
   )
 }
diff --git a/app/components/ui/NavigationMenu.tsx b/app/components/ui/NavigationMenu.tsx
index 3b11029..42baff5 100644
--- a/app/components/ui/NavigationMenu.tsx
+++ b/app/components/ui/NavigationMenu.tsx
@@ -7,11 +7,11 @@ import { cn } from '~/utils/ui'
 export { Item as NavigationMenuItem, Link as NavigationMenuLink } from '@radix-ui/react-navigation-menu'
 
 export const NavigationMenu = forwardRef<ComponentRef<typeof Root>, ComponentPropsWithoutRef<typeof Root>>(
-  ({ className, children, ...properties }, reference): ReactElement => (
+  ({ className, children, ...props }, reference): ReactElement => (
     <Root
       ref={reference}
       className={cn('relative z-10 flex max-w-max flex-1 items-center justify-center', className)}
-      {...properties}
+      {...props}
     >
       {children}
       <NavigationMenuViewport />
@@ -22,11 +22,11 @@ export const NavigationMenu = forwardRef<ComponentRef<typeof Root>, ComponentPro
 NavigationMenu.displayName = Root.displayName
 
 export const NavigationMenuList = forwardRef<ComponentRef<typeof List>, ComponentPropsWithoutRef<typeof List>>(
-  ({ className, ...properties }, reference): ReactElement => (
+  ({ className, ...props }, reference): ReactElement => (
     <List
       ref={reference}
       className={cn('group flex flex-1 list-none items-center justify-center space-x-1', className)}
-      {...properties}
+      {...props}
     />
   )
 )
@@ -38,8 +38,8 @@ export const navigationMenuTriggerStyle = cva(
 )
 
 export const NavigationMenuTrigger = forwardRef<ComponentRef<typeof Trigger>, ComponentPropsWithoutRef<typeof Trigger>>(
-  ({ className, children, ...properties }, reference): ReactElement => (
-    <Trigger ref={reference} className={cn(navigationMenuTriggerStyle(), 'group', className)} {...properties}>
+  ({ className, children, ...props }, reference): ReactElement => (
+    <Trigger ref={reference} className={cn(navigationMenuTriggerStyle(), 'group', className)} {...props}>
       {children}{' '}
       <ChevronDown
         className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
@@ -52,14 +52,14 @@ export const NavigationMenuTrigger = forwardRef<ComponentRef<typeof Trigger>, Co
 NavigationMenuTrigger.displayName = Trigger.displayName
 
 export const NavigationMenuContent = forwardRef<ComponentRef<typeof Content>, ComponentPropsWithoutRef<typeof Content>>(
-  ({ className, ...properties }, reference): ReactElement => (
+  ({ className, ...props }, reference): ReactElement => (
     <Content
       ref={reference}
       className={cn(
         'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ',
         className
       )}
-      {...properties}
+      {...props}
     />
   )
 )
@@ -70,7 +70,7 @@ export const NavigationMenuViewport = forwardRef<
   ComponentRef<typeof Viewport>,
   ComponentPropsWithoutRef<typeof Viewport>
 >(
-  ({ className, ...properties }, reference): ReactElement => (
+  ({ className, ...props }, reference): ReactElement => (
     <div className={cn('absolute left-0 top-full flex justify-center')}>
       <Viewport
         className={cn(
@@ -78,7 +78,7 @@ export const NavigationMenuViewport = forwardRef<
           className
         )}
         ref={reference}
-        {...properties}
+        {...props}
       />
     </div>
   )
@@ -90,14 +90,14 @@ export const NavigationMenuIndicator = forwardRef<
   ComponentRef<typeof Indicator>,
   ComponentPropsWithoutRef<typeof Indicator>
 >(
-  ({ className, ...properties }, reference): ReactElement => (
+  ({ className, ...props }, reference): ReactElement => (
     <Indicator
       ref={reference}
       className={cn(
         'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
         className
       )}
-      {...properties}
+      {...props}
     >
       <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
     </Indicator>
diff --git a/app/components/ui/Pagination.tsx b/app/components/ui/Pagination.tsx
new file mode 100644
index 0000000..beae913
--- /dev/null
+++ b/app/components/ui/Pagination.tsx
@@ -0,0 +1,118 @@
+import { type ComponentProps, type ReactElement } from 'react'
+import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeft, ChevronsRight, MoreHorizontalIcon } from 'lucide-react'
+import { type Button } from '~/components/ui/Button'
+import { buttonVariants } from '~/components/ui/Button'
+import { cn } from '~/utils/ui'
+
+export function Pagination({ className, ...props }: ComponentProps<'nav'>): ReactElement {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn('mx-auto flex w-full justify-center my-4', className)}
+      {...props}
+    />
+  )
+}
+
+export function PaginationContent({ className, ...props }: ComponentProps<'ul'>): ReactElement {
+  return <ul data-slot="pagination-content" className={cn('flex flex-row items-center gap-1', className)} {...props} />
+}
+
+export function PaginationItem({ ...props }: ComponentProps<'li'>): ReactElement {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ComponentProps<typeof Button>, 'size'> &
+  ComponentProps<'a'>
+
+export function PaginationLink({ className, isActive, size = 'icon', ...props }: PaginationLinkProps): ReactElement {
+  return (
+    <a
+      aria-current={isActive ? 'page' : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? 'outline' : 'ghost',
+          size
+        }),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function PaginationPrevious({ className, ...props }: ComponentProps<typeof PaginationLink>): ReactElement {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  )
+}
+
+export function PaginationNext({ className, ...props }: ComponentProps<typeof PaginationLink>): ReactElement {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  )
+}
+
+export function PaginationStart({ className, ...props }: ComponentProps<typeof PaginationLink>): ReactElement {
+  return (
+    <PaginationLink
+      aria-label="Go to first page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
+      {...props}
+    >
+      <ChevronsLeft />
+      <span className="hidden sm:block">Start</span>
+    </PaginationLink>
+  )
+}
+
+export function PaginationEnd({ className, ...props }: ComponentProps<typeof PaginationLink>): ReactElement {
+  return (
+    <PaginationLink
+      aria-label="Go to last page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
+      {...props}
+    >
+      <span className="hidden sm:block">End</span>
+      <ChevronsRight />
+    </PaginationLink>
+  )
+}
+
+export function PaginationEllipsis({ className, ...props }: ComponentProps<'span'>): ReactElement {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
diff --git a/app/components/ui/Popover.tsx b/app/components/ui/Popover.tsx
index 6ac8cb0..9173fe9 100644
--- a/app/components/ui/Popover.tsx
+++ b/app/components/ui/Popover.tsx
@@ -2,19 +2,19 @@ import { type ComponentProps, type ReactElement } from 'react'
 import { Root, Trigger, Portal, Content, Anchor } from '@radix-ui/react-popover'
 import { cn } from '~/utils/ui'
 
-export function Popover({ ...properties }: ComponentProps<typeof Root>): ReactElement {
-  return <Root data-slot="popover" {...properties} />
+export function Popover({ ...props }: ComponentProps<typeof Root>): ReactElement {
+  return <Root data-slot="popover" {...props} />
 }
 
-export function PopoverTrigger({ ...properties }: ComponentProps<typeof Trigger>): ReactElement {
-  return <Trigger data-slot="popover-trigger" {...properties} />
+export function PopoverTrigger({ ...props }: ComponentProps<typeof Trigger>): ReactElement {
+  return <Trigger data-slot="popover-trigger" {...props} />
 }
 
 export function PopoverContent({
   className,
   align = 'center',
   sideOffset = 4,
-  ...properties
+  ...props
 }: ComponentProps<typeof Content>): ReactElement {
   return (
     <Portal>
@@ -26,12 +26,12 @@ export function PopoverContent({
           'bg-popover text-popover-foreground 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
           className
         )}
-        {...properties}
+        {...props}
       />
     </Portal>
   )
 }
 
-export function PopoverAnchor({ ...properties }: ComponentProps<typeof Anchor>): ReactElement {
-  return <Anchor data-slot="popover-anchor" {...properties} />
+export function PopoverAnchor({ ...props }: ComponentProps<typeof Anchor>): ReactElement {
+  return <Anchor data-slot="popover-anchor" {...props} />
 }
diff --git a/app/components/ui/Select.tsx b/app/components/ui/Select.tsx
index 06f5487..4bb994c 100644
--- a/app/components/ui/Select.tsx
+++ b/app/components/ui/Select.tsx
@@ -19,23 +19,23 @@ import {
 } from '@radix-ui/react-select'
 import { cn } from '~/utils/ui'
 
-export function Select({ ...properties }: ComponentProps<typeof Root>): ReactElement {
-  return <Root data-slot="select" {...properties} />
+export function Select({ ...props }: ComponentProps<typeof Root>): ReactElement {
+  return <Root data-slot="select" {...props} />
 }
 
-export function SelectGroup({ ...properties }: ComponentProps<typeof Group>): ReactElement {
-  return <Group data-slot="select-group" {...properties} />
+export function SelectGroup({ ...props }: ComponentProps<typeof Group>): ReactElement {
+  return <Group data-slot="select-group" {...props} />
 }
 
-export function SelectValue({ ...properties }: ComponentProps<typeof Value>): ReactElement {
-  return <Value data-slot="select-value" {...properties} />
+export function SelectValue({ ...props }: ComponentProps<typeof Value>): ReactElement {
+  return <Value data-slot="select-value" {...props} />
 }
 
 export function SelectTrigger({
   className,
   size = 'default',
   children,
-  ...properties
+  ...props
 }: ComponentProps<typeof Trigger> & {
   size?: 'sm' | 'default'
 }): ReactElement {
@@ -47,7 +47,7 @@ export function SelectTrigger({
         "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
-      {...properties}
+      {...props}
     >
       {children}
       <Icon asChild>
@@ -61,7 +61,7 @@ export function SelectContent({
   className,
   children,
   position = 'popper',
-  ...properties
+  ...props
 }: ComponentProps<typeof Content>): ReactElement {
   return (
     <Portal>
@@ -74,7 +74,7 @@ export function SelectContent({
           className
         )}
         position={position}
-        {...properties}
+        {...props}
       >
         <SelectScrollUpButton />
         <Viewport
@@ -92,17 +92,13 @@ export function SelectContent({
   )
 }
 
-export function SelectLabel({ className, ...properties }: ComponentProps<typeof Label>): ReactElement {
+export function SelectLabel({ className, ...props }: ComponentProps<typeof Label>): ReactElement {
   return (
-    <Label
-      data-slot="select-label"
-      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
-      {...properties}
-    />
+    <Label data-slot="select-label" className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)} {...props} />
   )
 }
 
-export function SelectItem({ className, children, ...properties }: ComponentProps<typeof Item>): ReactElement {
+export function SelectItem({ className, children, ...props }: ComponentProps<typeof Item>): ReactElement {
   return (
     <Item
       data-slot="select-item"
@@ -110,7 +106,7 @@ export function SelectItem({ className, children, ...properties }: ComponentProp
         "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
-      {...properties}
+      {...props}
     >
       <span className="absolute right-2 flex size-3.5 items-center justify-center">
         <ItemIndicator>
@@ -122,40 +118,34 @@ export function SelectItem({ className, children, ...properties }: ComponentProp
   )
 }
 
-export function SelectSeparator({ className, ...properties }: ComponentProps<typeof Separator>): ReactElement {
+export function SelectSeparator({ className, ...props }: ComponentProps<typeof Separator>): ReactElement {
   return (
     <Separator
       data-slot="select-separator"
       className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function SelectScrollUpButton({
-  className,
-  ...properties
-}: ComponentProps<typeof ScrollUpButton>): ReactElement {
+export function SelectScrollUpButton({ className, ...props }: ComponentProps<typeof ScrollUpButton>): ReactElement {
   return (
     <ScrollUpButton
       data-slot="select-scroll-up-button"
       className={cn('flex cursor-default items-center justify-center py-1', className)}
-      {...properties}
+      {...props}
     >
       <ChevronUpIcon className="size-4" />
     </ScrollUpButton>
   )
 }
 
-export function SelectScrollDownButton({
-  className,
-  ...properties
-}: ComponentProps<typeof ScrollDownButton>): ReactElement {
+export function SelectScrollDownButton({ className, ...props }: ComponentProps<typeof ScrollDownButton>): ReactElement {
   return (
     <ScrollDownButton
       data-slot="select-scroll-down-button"
       className={cn('flex cursor-default items-center justify-center py-1', className)}
-      {...properties}
+      {...props}
     >
       <ChevronDownIcon className="size-4" />
     </ScrollDownButton>
diff --git a/app/components/ui/Separator.tsx b/app/components/ui/Separator.tsx
index f021929..c06bea7 100644
--- a/app/components/ui/Separator.tsx
+++ b/app/components/ui/Separator.tsx
@@ -6,7 +6,7 @@ function Separator({
   className,
   orientation = 'horizontal',
   decorative = true,
-  ...properties
+  ...props
 }: ComponentProps<typeof SeparatorPrimitive.Root>): ReactElement {
   return (
     <SeparatorPrimitive.Root
@@ -17,7 +17,7 @@ function Separator({
         'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
         className
       )}
-      {...properties}
+      {...props}
     />
   )
 }
diff --git a/app/components/ui/Sheet.tsx b/app/components/ui/Sheet.tsx
index 2340cfe..659b1f9 100644
--- a/app/components/ui/Sheet.tsx
+++ b/app/components/ui/Sheet.tsx
@@ -3,23 +3,23 @@ import { XIcon } from 'lucide-react'
 import { Root, Trigger, Close, Portal, Overlay, Content, Title, Description } from '@radix-ui/react-dialog'
 import { cn } from '~/utils/ui'
 
-export function Sheet({ ...properties }: ComponentProps<typeof Root>): ReactElement {
-  return <Root data-slot="sheet" {...properties} />
+export function Sheet({ ...props }: ComponentProps<typeof Root>): ReactElement {
+  return <Root data-slot="sheet" {...props} />
 }
 
-export function SheetTrigger({ ...properties }: ComponentProps<typeof Trigger>): ReactElement {
-  return <Trigger data-slot="sheet-trigger" {...properties} />
+export function SheetTrigger({ ...props }: ComponentProps<typeof Trigger>): ReactElement {
+  return <Trigger data-slot="sheet-trigger" {...props} />
 }
 
-export function SheetClose({ ...properties }: ComponentProps<typeof Close>): ReactElement {
-  return <Close data-slot="sheet-close" {...properties} />
+export function SheetClose({ ...props }: ComponentProps<typeof Close>): ReactElement {
+  return <Close data-slot="sheet-close" {...props} />
 }
 
-function SheetPortal({ ...properties }: ComponentProps<typeof Portal>): ReactElement {
-  return <Portal data-slot="sheet-portal" {...properties} />
+function SheetPortal({ ...props }: ComponentProps<typeof Portal>): ReactElement {
+  return <Portal data-slot="sheet-portal" {...props} />
 }
 
-function SheetOverlay({ className, ...properties }: ComponentProps<typeof Overlay>): ReactElement {
+function SheetOverlay({ className, ...props }: ComponentProps<typeof Overlay>): ReactElement {
   return (
     <Overlay
       data-slot="sheet-overlay"
@@ -27,7 +27,7 @@ function SheetOverlay({ className, ...properties }: ComponentProps<typeof Overla
         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
         className
       )}
-      {...properties}
+      {...props}
     />
   )
 }
@@ -36,7 +36,7 @@ export function SheetContent({
   className,
   children,
   side = 'right',
-  ...properties
+  ...props
 }: ComponentProps<typeof Content> & {
   side?: 'top' | 'right' | 'bottom' | 'left'
 }): ReactElement {
@@ -57,7 +57,7 @@ export function SheetContent({
             'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
           className
         )}
-        {...properties}
+        {...props}
       >
         {children}
         <Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
@@ -69,24 +69,20 @@ export function SheetContent({
   )
 }
 
-export function SheetHeader({ className, ...properties }: ComponentProps<'div'>): ReactElement {
-  return <div data-slot="sheet-header" className={cn('flex flex-col gap-1.5 p-4', className)} {...properties} />
+export function SheetHeader({ className, ...props }: ComponentProps<'div'>): ReactElement {
+  return <div data-slot="sheet-header" className={cn('flex flex-col gap-1.5 p-4', className)} {...props} />
 }
 
-export function SheetFooter({ className, ...properties }: ComponentProps<'div'>): ReactElement {
-  return <div data-slot="sheet-footer" className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...properties} />
+export function SheetFooter({ className, ...props }: ComponentProps<'div'>): ReactElement {
+  return <div data-slot="sheet-footer" className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />
 }
 
-export function SheetTitle({ className, ...properties }: ComponentProps<typeof Title>): ReactElement {
-  return <Title data-slot="sheet-title" className={cn('text-foreground font-semibold', className)} {...properties} />
+export function SheetTitle({ className, ...props }: ComponentProps<typeof Title>): ReactElement {
+  return <Title data-slot="sheet-title" className={cn('text-foreground font-semibold', className)} {...props} />
 }
 
-export function SheetDescription({ className, ...properties }: ComponentProps<typeof Description>): ReactElement {
+export function SheetDescription({ className, ...props }: ComponentProps<typeof Description>): ReactElement {
   return (
-    <Description
-      data-slot="sheet-description"
-      className={cn('text-muted-foreground text-sm', className)}
-      {...properties}
-    />
+    <Description data-slot="sheet-description" className={cn('text-muted-foreground text-sm', className)} {...props} />
   )
 }
diff --git a/app/components/ui/Sidebar.tsx b/app/components/ui/Sidebar.tsx
index f92f0e2..7c83039 100644
--- a/app/components/ui/Sidebar.tsx
+++ b/app/components/ui/Sidebar.tsx
@@ -29,7 +29,7 @@ const SIDEBAR_WIDTH_MOBILE = '16rem'
 const SIDEBAR_WIDTH_ICON = '3rem'
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
 
-type SidebarContextProperties = {
+type SidebarContextProps = {
   state: 'expanded' | 'collapsed'
   open: boolean
   setOpen: (open: boolean) => void
@@ -39,9 +39,9 @@ type SidebarContextProperties = {
   toggleSidebar: () => void
 }
 
-const SidebarContext = createContext<SidebarContextProperties | null | undefined>(undefined)
+const SidebarContext = createContext<SidebarContextProps | null | undefined>(undefined)
 
-export function useSidebar(): SidebarContextProperties {
+export function useSidebar(): SidebarContextProps {
   const context = useContext(SidebarContext)
   if (!context) {
     throw new Error('useSidebar must be used within a SidebarProvider.')
@@ -58,7 +58,7 @@ export function SidebarProvider({
   className,
   style,
   children,
-  ...properties
+  ...props
 }: ComponentProps<'div'> & {
   defaultOpen?: boolean
   open?: boolean
@@ -109,7 +109,7 @@ export function SidebarProvider({
   // This makes it easier to style the sidebar with Tailwind classes.
   const state = open ? 'expanded' : 'collapsed'
 
-  const contextValue = useMemo<SidebarContextProperties>(
+  const contextValue = useMemo<SidebarContextProps>(
     () => ({
       state,
       open,
@@ -136,7 +136,7 @@ export function SidebarProvider({
             } as CSSProperties
           }
           className={cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh', className)}
-          {...properties}
+          {...props}
         >
           {children}
         </div>
@@ -152,7 +152,7 @@ export function Sidebar({
   collapsible = 'offcanvas',
   className,
   children,
-  ...properties
+  ...props
 }: ComponentProps<'div'> & {
   side?: 'left' | 'right'
   variant?: 'sidebar' | 'floating' | 'inset'
@@ -165,7 +165,7 @@ export function Sidebar({
       <div
         data-slot="sidebar"
         className={cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', className)}
-        {...properties}
+        {...props}
       >
         {children}
       </div>
@@ -174,7 +174,7 @@ export function Sidebar({
 
   if (isMobile) {
     return (
-      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...properties}>
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
         <SheetContent
           data-sidebar="sidebar"
           data-slot="sidebar"
@@ -232,7 +232,7 @@ export function Sidebar({
             : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
           className
         )}
-        {...properties}
+        {...props}
       >
         <div
           data-sidebar="sidebar"
@@ -246,7 +246,7 @@ export function Sidebar({
   )
 }
 
-export function SidebarTrigger({ className, onClick, ...properties }: ComponentProps<typeof Button>): ReactElement {
+export function SidebarTrigger({ className, onClick, ...props }: ComponentProps<typeof Button>): ReactElement {
   const { toggleSidebar } = useSidebar()
 
   return (
@@ -260,7 +260,7 @@ export function SidebarTrigger({ className, onClick, ...properties }: ComponentP
         onClick?.(event)
         toggleSidebar()
       }}
-      {...properties}
+      {...props}
     >
       <SlidersHorizontal />
       <span className="sr-only">Toggle Sidebar</span>
@@ -268,7 +268,7 @@ export function SidebarTrigger({ className, onClick, ...properties }: ComponentP
   )
 }
 
-export function SidebarRail({ className, ...properties }: ComponentProps<'button'>): ReactElement {
+export function SidebarRail({ className, ...props }: ComponentProps<'button'>): ReactElement {
   const { toggleSidebar } = useSidebar()
 
   return (
@@ -288,12 +288,12 @@ export function SidebarRail({ className, ...properties }: ComponentProps<'button
         '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
         className
       )}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function SidebarInset({ className, ...properties }: ComponentProps<'main'>): ReactElement {
+export function SidebarInset({ className, ...props }: ComponentProps<'main'>): ReactElement {
   return (
     <main
       data-slot="sidebar-inset"
@@ -302,56 +302,56 @@ export function SidebarInset({ className, ...properties }: ComponentProps<'main'
         'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
         className
       )}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function SidebarInput({ className, ...properties }: ComponentProps<typeof Input>): ReactElement {
+export function SidebarInput({ className, ...props }: ComponentProps<typeof Input>): ReactElement {
   return (
     <Input
       data-slot="sidebar-input"
       data-sidebar="input"
       className={cn('bg-background h-8 w-full shadow-none', className)}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function SidebarHeader({ className, ...properties }: ComponentProps<'div'>): ReactElement {
+export function SidebarHeader({ className, ...props }: ComponentProps<'div'>): ReactElement {
   return (
     <div
       data-slot="sidebar-header"
       data-sidebar="header"
       className={cn('flex flex-col gap-2 p-2', className)}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function SidebarFooter({ className, ...properties }: ComponentProps<'div'>): ReactElement {
+export function SidebarFooter({ className, ...props }: ComponentProps<'div'>): ReactElement {
   return (
     <div
       data-slot="sidebar-footer"
       data-sidebar="footer"
       className={cn('flex flex-col gap-2 p-2', className)}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function SidebarSeparator({ className, ...properties }: ComponentProps<typeof Separator>): ReactElement {
+export function SidebarSeparator({ className, ...props }: ComponentProps<typeof Separator>): ReactElement {
   return (
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
       className={cn('bg-sidebar-border mx-2 w-auto', className)}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function SidebarContent({ className, ...properties }: ComponentProps<'div'>): ReactElement {
+export function SidebarContent({ className, ...props }: ComponentProps<'div'>): ReactElement {
   return (
     <div
       data-slot="sidebar-content"
@@ -360,18 +360,18 @@ export function SidebarContent({ className, ...properties }: ComponentProps<'div
         'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
         className
       )}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function SidebarGroup({ className, ...properties }: ComponentProps<'div'>): ReactElement {
+export function SidebarGroup({ className, ...props }: ComponentProps<'div'>): ReactElement {
   return (
     <div
       data-slot="sidebar-group"
       data-sidebar="group"
       className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
-      {...properties}
+      {...props}
     />
   )
 }
@@ -379,7 +379,7 @@ export function SidebarGroup({ className, ...properties }: ComponentProps<'div'>
 export function SidebarGroupLabel({
   className,
   asChild = false,
-  ...properties
+  ...props
 }: ComponentProps<'div'> & { asChild?: boolean }): ReactElement {
   const Comp = asChild ? Slot : 'div'
 
@@ -392,7 +392,7 @@ export function SidebarGroupLabel({
         'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
         className
       )}
-      {...properties}
+      {...props}
     />
   )
 }
@@ -400,7 +400,7 @@ export function SidebarGroupLabel({
 export function SidebarGroupAction({
   className,
   asChild = false,
-  ...properties
+  ...props
 }: ComponentProps<'button'> & { asChild?: boolean }): ReactElement {
   const Comp = asChild ? Slot : 'button'
 
@@ -415,40 +415,40 @@ export function SidebarGroupAction({
         'group-data-[collapsible=icon]:hidden',
         className
       )}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function SidebarGroupContent({ className, ...properties }: ComponentProps<'div'>): ReactElement {
+export function SidebarGroupContent({ className, ...props }: ComponentProps<'div'>): ReactElement {
   return (
     <div
       data-slot="sidebar-group-content"
       data-sidebar="group-content"
       className={cn('w-full text-sm', className)}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function SidebarMenu({ className, ...properties }: ComponentProps<'ul'>): ReactElement {
+export function SidebarMenu({ className, ...props }: ComponentProps<'ul'>): ReactElement {
   return (
     <ul
       data-slot="sidebar-menu"
       data-sidebar="menu"
       className={cn('flex w-full min-w-0 flex-col gap-1', className)}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function SidebarMenuItem({ className, ...properties }: ComponentProps<'li'>): ReactElement {
+export function SidebarMenuItem({ className, ...props }: ComponentProps<'li'>): ReactElement {
   return (
     <li
       data-slot="sidebar-menu-item"
       data-sidebar="menu-item"
       className={cn('group/menu-item relative', className)}
-      {...properties}
+      {...props}
     />
   )
 }
@@ -482,7 +482,7 @@ export function SidebarMenuButton({
   size = 'default',
   tooltip,
   className,
-  ...properties
+  ...props
 }: ComponentProps<'button'> & {
   asChild?: boolean
   isActive?: boolean
@@ -497,7 +497,7 @@ export function SidebarMenuButton({
       data-size={size}
       data-active={isActive}
       className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-      {...properties}
+      {...props}
     />
   )
   if (!tooltip) {
@@ -520,7 +520,7 @@ export function SidebarMenuAction({
   className,
   asChild = false,
   showOnHover = false,
-  ...properties
+  ...props
 }: ComponentProps<'button'> & {
   asChild?: boolean
   showOnHover?: boolean
@@ -543,12 +543,12 @@ export function SidebarMenuAction({
           'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
         className
       )}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function SidebarMenuBadge({ className, ...properties }: ComponentProps<'div'>): ReactElement {
+export function SidebarMenuBadge({ className, ...props }: ComponentProps<'div'>): ReactElement {
   return (
     <div
       data-slot="sidebar-menu-badge"
@@ -562,7 +562,7 @@ export function SidebarMenuBadge({ className, ...properties }: ComponentProps<'d
         'group-data-[collapsible=icon]:hidden',
         className
       )}
-      {...properties}
+      {...props}
     />
   )
 }
@@ -570,7 +570,7 @@ export function SidebarMenuBadge({ className, ...properties }: ComponentProps<'d
 export function SidebarMenuSkeleton({
   className,
   showIcon = false,
-  ...properties
+  ...props
 }: ComponentProps<'div'> & {
   showIcon?: boolean
 }): ReactElement {
@@ -584,7 +584,7 @@ export function SidebarMenuSkeleton({
       data-slot="sidebar-menu-skeleton"
       data-sidebar="menu-skeleton"
       className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
-      {...properties}
+      {...props}
     >
       {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
       <Skeleton
@@ -601,7 +601,7 @@ export function SidebarMenuSkeleton({
   )
 }
 
-export function SidebarMenuSub({ className, ...properties }: ComponentProps<'ul'>): ReactElement {
+export function SidebarMenuSub({ className, ...props }: ComponentProps<'ul'>): ReactElement {
   return (
     <ul
       data-slot="sidebar-menu-sub"
@@ -611,18 +611,18 @@ export function SidebarMenuSub({ className, ...properties }: ComponentProps<'ul'
         'group-data-[collapsible=icon]:hidden',
         className
       )}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function SidebarMenuSubItem({ className, ...properties }: ComponentProps<'li'>): ReactElement {
+export function SidebarMenuSubItem({ className, ...props }: ComponentProps<'li'>): ReactElement {
   return (
     <li
       data-slot="sidebar-menu-sub-item"
       data-sidebar="menu-sub-item"
       className={cn('group/menu-sub-item relative', className)}
-      {...properties}
+      {...props}
     />
   )
 }
@@ -632,7 +632,7 @@ export function SidebarMenuSubButton({
   size = 'md',
   isActive = false,
   className,
-  ...properties
+  ...props
 }: React.ComponentProps<'a'> & {
   asChild?: boolean
   size?: 'sm' | 'md'
@@ -654,7 +654,7 @@ export function SidebarMenuSubButton({
         'group-data-[collapsible=icon]:hidden',
         className
       )}
-      {...properties}
+      {...props}
     />
   )
 }
diff --git a/app/components/ui/Skeleton.tsx b/app/components/ui/Skeleton.tsx
index d236e2f..e53eaf5 100644
--- a/app/components/ui/Skeleton.tsx
+++ b/app/components/ui/Skeleton.tsx
@@ -1,6 +1,13 @@
 import { type ComponentProps, type ReactElement } from 'react'
 import { cn } from '~/utils/ui'
 
-export function Skeleton({ className, ...properties }: ComponentProps<'div'>): ReactElement {
-  return <div data-slot="skeleton" className={cn('bg-accent animate-pulse rounded-md', className)} {...properties} />
+export function Skeleton({ className, ...props }: ComponentProps<'div'>): ReactElement {
+  return (
+    <div
+      data-testid="skeleton"
+      data-slot="skeleton"
+      className={cn('bg-accent animate-pulse rounded-md', className)}
+      {...props}
+    />
+  )
 }
diff --git a/app/components/ui/Slider.tsx b/app/components/ui/Slider.tsx
index f664521..a8f3bfc 100644
--- a/app/components/ui/Slider.tsx
+++ b/app/components/ui/Slider.tsx
@@ -18,7 +18,7 @@ export function Slider({
   value,
   min = 0,
   max = 100,
-  ...properties
+  ...props
 }: ComponentProps<typeof Root>): ReactElement {
   const actualDefaultValue = Array.isArray(defaultValue) ? defaultValue : [min, max]
 
@@ -35,7 +35,7 @@ export function Slider({
         'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
         className
       )}
-      {...properties}
+      {...props}
     >
       <Track
         data-slot="slider-track"
diff --git a/app/components/ui/Sonner.tsx b/app/components/ui/Sonner.tsx
index e7efed7..d6452c7 100644
--- a/app/components/ui/Sonner.tsx
+++ b/app/components/ui/Sonner.tsx
@@ -3,7 +3,7 @@ import { useTheme } from 'next-themes'
 import { type ToasterProps } from 'sonner'
 import { Toaster as Sonner } from 'sonner'
 
-export const Toaster = ({ ...properties }: ToasterProps): ReactElement => {
+export const Toaster = ({ ...props }: ToasterProps): ReactElement => {
   const { theme = 'system' } = useTheme()
 
   return (
@@ -19,7 +19,7 @@ export const Toaster = ({ ...properties }: ToasterProps): ReactElement => {
           '--normal-border': 'var(--border)'
         } as CSSProperties
       }
-      {...properties}
+      {...props}
     />
   )
 }
diff --git a/app/components/ui/Switch.tsx b/app/components/ui/Switch.tsx
index 654fdb1..6cd7353 100644
--- a/app/components/ui/Switch.tsx
+++ b/app/components/ui/Switch.tsx
@@ -2,7 +2,7 @@ import { type ComponentProps, type ReactElement } from 'react'
 import { Root, Thumb } from '@radix-ui/react-switch'
 import { cn } from '~/utils/ui'
 
-export function Switch({ className, ...properties }: ComponentProps<typeof Root>): ReactElement {
+export function Switch({ className, ...props }: ComponentProps<typeof Root>): ReactElement {
   return (
     <Root
       data-slot="switch"
@@ -10,7 +10,7 @@ export function Switch({ className, ...properties }: ComponentProps<typeof Root>
         'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
-      {...properties}
+      {...props}
     >
       <Thumb
         data-slot="switch-thumb"
diff --git a/app/components/ui/Tabs.tsx b/app/components/ui/Tabs.tsx
index 255bc34..e903d30 100644
--- a/app/components/ui/Tabs.tsx
+++ b/app/components/ui/Tabs.tsx
@@ -3,11 +3,11 @@ import { Root, List, Trigger, Content } from '@radix-ui/react-tabs'
 
 import { cn } from '~/utils/ui'
 
-export function Tabs({ className, ...properties }: ComponentProps<typeof Root>): ReactElement {
-  return <Root data-slot="tabs" className={cn('flex flex-col gap-2', className)} {...properties} />
+export function Tabs({ className, ...props }: ComponentProps<typeof Root>): ReactElement {
+  return <Root data-slot="tabs" className={cn('flex flex-col gap-2', className)} {...props} />
 }
 
-export function TabsList({ className, ...properties }: ComponentProps<typeof List>): ReactElement {
+export function TabsList({ className, ...props }: ComponentProps<typeof List>): ReactElement {
   return (
     <List
       data-slot="tabs-list"
@@ -15,12 +15,12 @@ export function TabsList({ className, ...properties }: ComponentProps<typeof Lis
         'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
         className
       )}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function TabsTrigger({ className, ...properties }: ComponentProps<typeof Trigger>): ReactElement {
+export function TabsTrigger({ className, ...props }: ComponentProps<typeof Trigger>): ReactElement {
   return (
     <Trigger
       data-slot="tabs-trigger"
@@ -28,11 +28,11 @@ export function TabsTrigger({ className, ...properties }: ComponentProps<typeof
         "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
-      {...properties}
+      {...props}
     />
   )
 }
 
-export function TabsContent({ className, ...properties }: ComponentProps<typeof Content>): ReactElement {
-  return <Content data-slot="tabs-content" className={cn('flex-1 outline-none', className)} {...properties} />
+export function TabsContent({ className, ...props }: ComponentProps<typeof Content>): ReactElement {
+  return <Content data-slot="tabs-content" className={cn('flex-1 outline-none', className)} {...props} />
 }
diff --git a/app/components/ui/Tooltip.tsx b/app/components/ui/Tooltip.tsx
index 613b708..096f879 100644
--- a/app/components/ui/Tooltip.tsx
+++ b/app/components/ui/Tooltip.tsx
@@ -5,28 +5,28 @@ import type { ComponentProps, ReactElement } from 'react'
 
 function TooltipProvider({
   delayDuration = 0,
-  ...properties
+  ...props
 }: ComponentProps<typeof TooltipPrimitive.Provider>): ReactElement {
-  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...properties} />
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />
 }
 
-function Tooltip({ ...properties }: ComponentProps<typeof TooltipPrimitive.Root>): ReactElement {
+function Tooltip({ ...props }: ComponentProps<typeof TooltipPrimitive.Root>): ReactElement {
   return (
     <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...properties} />
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
     </TooltipProvider>
   )
 }
 
-function TooltipTrigger({ ...properties }: ComponentProps<typeof TooltipPrimitive.Trigger>): ReactElement {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...properties} />
+function TooltipTrigger({ ...props }: ComponentProps<typeof TooltipPrimitive.Trigger>): ReactElement {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
 }
 
 function TooltipContent({
   className,
   sideOffset = 0,
   children,
-  ...properties
+  ...props
 }: ComponentProps<typeof TooltipPrimitive.Content>): ReactElement {
   return (
     <TooltipPrimitive.Portal>
@@ -37,7 +37,7 @@ function TooltipContent({
           'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
           className
         )}
-        {...properties}
+        {...props}
       >
         {children}
         <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
diff --git a/app/components/ui/typography/Blockquote.tsx b/app/components/ui/typography/Blockquote.tsx
index e744a93..045d52a 100644
--- a/app/components/ui/typography/Blockquote.tsx
+++ b/app/components/ui/typography/Blockquote.tsx
@@ -1,6 +1,6 @@
 import { type HTMLAttributes, type ReactElement } from 'react'
 import { cn } from '~/utils/ui'
 
-export function Blockquote({ className, ...properties }: HTMLAttributes<HTMLQuoteElement>): ReactElement {
-  return <blockquote className={cn('mt-6 border-l-2 pl-6 italic', className)} {...properties} />
+export function Blockquote({ className, ...props }: HTMLAttributes<HTMLQuoteElement>): ReactElement {
+  return <blockquote className={cn('mt-6 border-l-2 pl-6 italic', className)} {...props} />
 }
diff --git a/app/components/ui/typography/H1.tsx b/app/components/ui/typography/H1.tsx
index d03193e..e9d2a3d 100644
--- a/app/components/ui/typography/H1.tsx
+++ b/app/components/ui/typography/H1.tsx
@@ -1,8 +1,6 @@
 import { type HTMLAttributes, type ReactElement } from 'react'
 import { cn } from '~/utils/ui'
 
-export function H1({ className, ...properties }: HTMLAttributes<HTMLHeadingElement>): ReactElement {
-  return (
-    <h1 className={cn('scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl', className)} {...properties} />
-  )
+export function H1({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): ReactElement {
+  return <h1 className={cn('scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl', className)} {...props} />
 }
diff --git a/app/components/ui/typography/H2.tsx b/app/components/ui/typography/H2.tsx
index 7351271..29b17d3 100644
--- a/app/components/ui/typography/H2.tsx
+++ b/app/components/ui/typography/H2.tsx
@@ -1,6 +1,6 @@
 import { type HTMLAttributes, type ReactElement } from 'react'
 import { cn } from '~/utils/ui'
 
-export function H2({ className, ...properties }: HTMLAttributes<HTMLHeadingElement>): ReactElement {
-  return <h2 className={cn('scroll-m-20 text-3xl font-semibold tracking-tight', className)} {...properties} />
+export function H2({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): ReactElement {
+  return <h2 className={cn('scroll-m-20 text-3xl font-semibold tracking-tight', className)} {...props} />
 }
diff --git a/app/components/ui/typography/H3.tsx b/app/components/ui/typography/H3.tsx
index 4886532..5768779 100644
--- a/app/components/ui/typography/H3.tsx
+++ b/app/components/ui/typography/H3.tsx
@@ -1,6 +1,6 @@
 import { type HTMLAttributes, type ReactElement } from 'react'
 import { cn } from '~/utils/ui'
 
-export function H3({ className, ...properties }: HTMLAttributes<HTMLHeadingElement>): ReactElement {
-  return <h3 className={cn('scroll-m-20 text-xl font-semibold tracking-tight', className)} {...properties} />
+export function H3({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): ReactElement {
+  return <h3 className={cn('scroll-m-20 text-xl font-semibold tracking-tight', className)} {...props} />
 }
diff --git a/app/components/ui/typography/H4.tsx b/app/components/ui/typography/H4.tsx
index f8722e8..c572cf7 100644
--- a/app/components/ui/typography/H4.tsx
+++ b/app/components/ui/typography/H4.tsx
@@ -1,6 +1,6 @@
 import { type HTMLAttributes, type ReactElement } from 'react'
 import { cn } from '~/utils/ui'
 
-export function H4({ className, ...properties }: HTMLAttributes<HTMLHeadingElement>): ReactElement {
-  return <h4 className={cn('scroll-m-20 text-lg tracking-tight', className)} {...properties} />
+export function H4({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): ReactElement {
+  return <h4 className={cn('scroll-m-20 text-lg tracking-tight', className)} {...props} />
 }
diff --git a/app/components/ui/typography/H5.tsx b/app/components/ui/typography/H5.tsx
index 17a13d3..13666c8 100644
--- a/app/components/ui/typography/H5.tsx
+++ b/app/components/ui/typography/H5.tsx
@@ -1,6 +1,6 @@
 import { type HTMLAttributes, type ReactElement } from 'react'
 import { cn } from '~/utils/ui'
 
-export function H5({ className, ...properties }: HTMLAttributes<HTMLHeadingElement>): ReactElement {
-  return <h5 className={cn('scroll-m-20 text-md font-semibold tracking-tight', className)} {...properties} />
+export function H5({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): ReactElement {
+  return <h5 className={cn('scroll-m-20 text-md font-semibold tracking-tight', className)} {...props} />
 }
diff --git a/app/components/ui/typography/P.tsx b/app/components/ui/typography/P.tsx
index 00b583f..9586a56 100644
--- a/app/components/ui/typography/P.tsx
+++ b/app/components/ui/typography/P.tsx
@@ -1,6 +1,6 @@
 import { type HTMLAttributes, type ReactElement } from 'react'
 import { cn } from '~/utils/ui'
 
-export function P({ className, ...properties }: HTMLAttributes<HTMLParagraphElement>): ReactElement {
-  return <p className={cn('leading-7 [&:not(:first-child)]:mt-6', className)} {...properties} />
+export function P({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): ReactElement {
+  return <p className={cn('leading-7 [&:not(:first-child)]:mt-6', className)} {...props} />
 }
diff --git a/app/hooks/useFetchCart.ts b/app/hooks/useFetchCart.ts
new file mode 100644
index 0000000..f3509c4
--- /dev/null
+++ b/app/hooks/useFetchCart.ts
@@ -0,0 +1,9 @@
+import { useEffect } from 'react'
+import { useAppDispatch } from '~/store/hooks'
+import { getCart } from '~/store/cart'
+
+export function useFetchCart(): void {
+  const dispatch = useAppDispatch()
+
+  useEffect(() => void dispatch(getCart()), [])
+}
diff --git a/app/layouts/components/Footer.tsx b/app/layouts/components/Footer.tsx
index 2dfa946..db1d6e1 100644
--- a/app/layouts/components/Footer.tsx
+++ b/app/layouts/components/Footer.tsx
@@ -1,5 +1,5 @@
 import { type ReactElement } from 'react'
 
 export function Footer(): ReactElement {
-  return <footer className="bg-sky-500/40 text-gray-600 text-center text-sm p-4 mt-auto">Call Stack © 2025</footer>
+  return <footer className="bg-neutral-900/90 text-white text-center text-sm p-4 mt-auto">Call Stack © 2025</footer>
 }
diff --git a/app/layouts/components/Header.tsx b/app/layouts/components/Header.tsx
index efe1cfe..63d7ac4 100644
--- a/app/layouts/components/Header.tsx
+++ b/app/layouts/components/Header.tsx
@@ -4,15 +4,15 @@ import { Button } from '~/components/ui/Button'
 import { Navigation } from './Navigation'
 import { ROUTES } from '~/routes'
 
-interface HeaderProperties {
+type HeaderProps = {
   isAuth: boolean
 }
 
-export default function Header({ isAuth }: HeaderProperties): ReactElement {
+export default function Header({ isAuth }: HeaderProps): ReactElement {
   return (
-    <header className="bg-sky-500/40 shadow-md">
+    <header className="bg-neutral-900/90 shadow-md">
       <nav className="container mx-auto md:flex items-center justify-between p-4">
-        <Button asChild variant="link" className="text-xl font-semibold">
+        <Button asChild variant="link" className="text-xl font-semibold text-white">
           <NavLink to={ROUTES.HOME}>Shop</NavLink>
         </Button>
         <Navigation isAuth={isAuth} />
diff --git a/app/layouts/components/Navigation.tsx b/app/layouts/components/Navigation.tsx
index 75fe194..096d336 100644
--- a/app/layouts/components/Navigation.tsx
+++ b/app/layouts/components/Navigation.tsx
@@ -8,12 +8,14 @@ import {
   NavigationMenuLink
 } from '~/components/ui/NavigationMenu'
 import { ROUTES } from '~/routes'
+import { useAppSelector } from '~/store/hooks'
+import { selectCartItemCount } from '~/store/cart'
 
-interface NavigationProperties {
+type NavigationProps = {
   isAuth: boolean
 }
 
-interface NavItem {
+type NavItem = {
   to: string
   label: string
   icon: ElementType
@@ -24,31 +26,41 @@ const navItems: NavItem[] = [
   { to: ROUTES.HOME, label: 'Home', icon: Home },
   { to: ROUTES.CATALOG, label: 'Catalog', icon: FolderOpen },
   { to: ROUTES.ABOUT, label: 'About', icon: Info },
-  { to: ROUTES.CART, label: 'Cart', icon: ShoppingCart, auth: true },
+  { to: ROUTES.CART, label: 'Cart', icon: ShoppingCart },
   { to: ROUTES.PROFILE, label: 'Profile', icon: User2, auth: true },
   { to: ROUTES.LOGIN, label: 'Login', icon: LogIn, auth: false },
   { to: ROUTES.REGISTER, label: 'Register', icon: UserPlus, auth: false },
   { to: ROUTES.LOGOUT, label: 'LogOut', icon: UserMinus, auth: true }
 ]
 
-export function Navigation({ isAuth }: NavigationProperties): ReactElement {
+export function Navigation({ isAuth }: NavigationProps): ReactElement {
   const filteredItems = navItems.filter((item) => item.auth === undefined || item.auth === isAuth)
-
+  const count = useAppSelector(selectCartItemCount)
   return (
     <NavigationMenu>
       <NavigationMenuList className="grid grid-cols-3 sm:flex justify-center gap-2">
-        {filteredItems.map(({ to, label, icon: Icon }) => (
-          <NavigationMenuItem key={label}>
-            <NavigationMenuLink
-              asChild
-              className="flex items-center gap-2 text-sm font-medium hover:underline px-4 py-2"
-            >
-              <NavLink to={to}>
-                <Icon className="size-4" /> {label}
-              </NavLink>
-            </NavigationMenuLink>
-          </NavigationMenuItem>
-        ))}
+        {filteredItems.map(({ to, label, icon: Icon }) => {
+          const isCart = label === 'Cart'
+
+          return (
+            <NavigationMenuItem key={label}>
+              <NavigationMenuLink
+                asChild
+                className="flex items-center gap-2 text-sm font-medium hover:underline px-4 py-2 relative"
+              >
+                <NavLink to={to} className="text-white">
+                  <Icon className="size-4" />
+                  {label}
+                  {isCart && count > 0 && (
+                    <span className="absolute -top-2 -right-2 bg-red-500 text-white text-[10px] font-semibold w-4 h-4 rounded-full flex items-center justify-center">
+                      {count}
+                    </span>
+                  )}
+                </NavLink>
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+          )
+        })}
       </NavigationMenuList>
     </NavigationMenu>
   )
diff --git a/app/pages/NotFound.tsx b/app/pages/NotFound.tsx
index d1e8d68..3c12614 100644
--- a/app/pages/NotFound.tsx
+++ b/app/pages/NotFound.tsx
@@ -5,7 +5,7 @@ import { ROUTES } from '~/routes'
 
 export default function NotFound(): ReactElement {
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center bg-sky-100 text-center p-6">
+    <div className="min-h-screen flex flex-col items-center justify-center bg-neural-100 text-center p-6">
       <h1 className="text-6xl animate-bounce font-bold text-red-400 mb-2">404</h1>
       <p className="text-2xl text-gray-700 mb-6">Page not found</p>
       <p className="text-xl text-gray-500 mb-8">Oops! The page you're looking for doesn't exist.</p>
diff --git a/app/pages/about/AboutText.tsx b/app/pages/about/AboutText.tsx
new file mode 100644
index 0000000..4c61fd4
--- /dev/null
+++ b/app/pages/about/AboutText.tsx
@@ -0,0 +1,15 @@
+import { type ReactElement } from 'react'
+import { H1, P } from '~/components/ui/typography'
+
+export function AboutText({ text }: { text: string }): ReactElement {
+  return (
+    <div className="max-w-7xl mx-auto text-left">
+      <H1 className="text-4xl font-bold mb-6 text-center">About us</H1>
+      {text.split('\n\n').map((paragraph, index) => (
+        <P key={index} className="text-lg text-muted-foreground mb-6">
+          {paragraph}
+        </P>
+      ))}
+    </div>
+  )
+}
diff --git a/app/pages/about/GithubLink.tsx b/app/pages/about/GithubLink.tsx
new file mode 100644
index 0000000..9c88176
--- /dev/null
+++ b/app/pages/about/GithubLink.tsx
@@ -0,0 +1,11 @@
+import type { ReactElement } from 'react'
+import GithubIcon from '~/assets/images/github-icon.png'
+
+export function GithubLink({ url }: { url: string }): ReactElement {
+  return (
+    <a href={url} target="_blank" className="flex items-center gap-2 hover:opacity-80 transition" rel="noreferrer">
+      <img src={GithubIcon} alt="GitHub" className="w-5 h-5" />
+      <span className="text-base text-[#24292f] hover:underline font-semibold">{url.split('/').pop()}</span>
+    </a>
+  )
+}
diff --git a/app/pages/about/InfoLine.tsx b/app/pages/about/InfoLine.tsx
new file mode 100644
index 0000000..6bcbe84
--- /dev/null
+++ b/app/pages/about/InfoLine.tsx
@@ -0,0 +1,11 @@
+import type { ReactElement } from 'react'
+import { P } from '~/components/ui/typography'
+
+export function InfoLine({ label, text }: { label: string; text?: string }): ReactElement | undefined {
+  if (!text) return undefined
+  return (
+    <P className="!mt-1">
+      <span className="font-bold">{label}:</span> {text}
+    </P>
+  )
+}
diff --git a/app/pages/about/SchoolLogo.tsx b/app/pages/about/SchoolLogo.tsx
new file mode 100644
index 0000000..6860814
--- /dev/null
+++ b/app/pages/about/SchoolLogo.tsx
@@ -0,0 +1,12 @@
+import { type ReactElement } from 'react'
+import SchoolIcon from '~/assets/images/school-logo.svg'
+
+export function SchoolLogo(): ReactElement {
+  return (
+    <div className="flex justify-center mt-8">
+      <a href="https://rs.school/" target="_blank" title="RSSchool">
+        <img src={SchoolIcon} alt="RSSchool logo" className="h-12 transition-all hover:brightness-90" />
+      </a>
+    </div>
+  )
+}
diff --git a/app/pages/about/TeamMember.tsx b/app/pages/about/TeamMember.tsx
new file mode 100644
index 0000000..8885408
--- /dev/null
+++ b/app/pages/about/TeamMember.tsx
@@ -0,0 +1,44 @@
+import { type ReactElement } from 'react'
+import { H2 } from '~/components/ui/typography'
+import { GithubLink } from './GithubLink'
+import { InfoLine } from './InfoLine'
+
+type TeamMemberProps = {
+  name: string
+  location?: string
+  education?: string
+  courses: string
+  about: string
+  github: string
+  imageUrl: string
+}
+
+export function TeamMember({
+  name,
+  location,
+  education,
+  courses,
+  about,
+  github,
+  imageUrl
+}: TeamMemberProps): ReactElement {
+  return (
+    <div className="max-w-7xl mx-auto flex flex-col md:flex-row gap-8 items-center">
+      <img
+        src={imageUrl}
+        width={300}
+        height={500}
+        className="rounded-2xl md:w-[300px] md:h-auto object-cover"
+        alt={name}
+      />
+      <div className="flex flex-col text-left self-start">
+        <H2>{name}</H2>
+        <InfoLine label="Location" text={location} />
+        <InfoLine label="Education" text={education} />
+        <InfoLine label="Courses" text={courses} />
+        <InfoLine label="About me" text={about} />
+        <GithubLink url={github} />
+      </div>
+    </div>
+  )
+}
diff --git a/app/pages/about/aboutData.tsx b/app/pages/about/aboutData.tsx
new file mode 100644
index 0000000..0cd5391
--- /dev/null
+++ b/app/pages/about/aboutData.tsx
@@ -0,0 +1,38 @@
+export const teamMembers = [
+  {
+    name: 'MIKHAIL',
+    courses: 'RSSchool JavaScript/Front-end, NodeJS',
+    about:
+      "I'm a frontend developer with a background in full-stack development, currently sharpening my JavaScript skills through RS School. I'm passionate about frontend technologies, enjoy exploring frameworks, and enjoy learning through community-driven collaboration.",
+    github: 'https://github.com/bitbybit',
+    imageUrl: 'https://live.staticflickr.com/65535/54588004201_88d9183d76_c.jpg',
+    reverse: false
+  },
+  {
+    name: 'MERU',
+    location: 'Aktau, Kazakhstan',
+    education: 'Al-Farabi Kazakh National University, accounting and auditing',
+    courses: 'RSSchool JavaScript/Front-end Pre-school, JavaScript/Front-end, NodeJS',
+    about:
+      'Wherever I worked before, I always felt drawn to programming. To pursue this goal, I’m currently finishing a course at RS School. Through tons of practice and great learning projects, I’m gaining the experience I need to become a frontend developer. I use Javascript, Typescript, React, and Node.js in my projects.',
+    github: 'https://github.com/merucoding',
+    imageUrl: 'https://raw.githubusercontent.com/merucoding/school-project-pictures/main/IMG_1996_1.jpeg',
+    reverse: true
+  },
+  {
+    name: 'KATE',
+    location: 'Tbilisi, Georgia',
+    education: 'Samara University. Applied mathematics and computer science',
+    courses: 'RSSchool JavaScript/Front-end',
+    about:
+      "I'm deeply interested in frontend development and love the process of turning ideas into interactive, user-friendly interfaces. Through RSSchool, I’ve been actively improving my skills in JavaScript, TypeScript, and React - and I genuinely enjoy exploring how all the parts of a web app come together.",
+    github: 'https://github.com/zhuravel17',
+    imageUrl: 'https://raw.github.com/zhuravel17/rsschool-cv/main/kate.jpg',
+    reverse: false
+  }
+]
+export const aboutUsText = `Our team put a lot of effort into building this final project, working together in a coordinated and thoughtful way. Each team member made a significant contribution, taking ownership of key parts of the application and actively participating in the collaborative development process.
+
+Mikhail laid the technical foundation of the project from the start: he set up the repository, organized the task board, and ensured a solid structure for our teamwork. He developed the registration page and user profile page, and also worked on the cart page together with Meru. In addition to his development work, Mikhail shared his experience through code reviews — his feedback and suggestions helped improve code quality and deepen our understanding of the implementation. Meru focused on key user-facing pages — she implemented the login page and the product catalog. Together with Mikhail, she also contributed to the development of the cart page, ensuring both its functionality and consistency with the rest of the UI. Kate worked on the overall interface and layout. She created the header and footer, the main page, the detailed product page, and the “About Us” page. Her contribution brought coherence, accessibility, and a polished visual style to the application.
+
+Each of us not only worked on specific components but also actively participated in discussions, testing, and refinement. As a result, we were able to deliver a cohesive, functional, and well-crafted web product.`
diff --git a/app/pages/about/index.tsx b/app/pages/about/index.tsx
index 6fcfd6d..cbd890f 100644
--- a/app/pages/about/index.tsx
+++ b/app/pages/about/index.tsx
@@ -1,8 +1,24 @@
 import { type ReactElement } from 'react'
 import { useTitle } from '~/hooks/useTitle'
+import { teamMembers, aboutUsText } from './aboutData'
+import { AboutText } from './AboutText'
+import { SchoolLogo } from './SchoolLogo'
+import { TeamMember } from './TeamMember'
 
-export default function Routes(): ReactElement {
+export default function About(): ReactElement {
   useTitle('About')
 
-  return <>About</>
+  return (
+    <section className="w-full px-6 md:px-8 py-16 bg-background text-foreground ">
+      <AboutText text={aboutUsText} />
+      <div className="flex flex-col max-w-7xl gap-8 mx-auto">
+        {teamMembers.map((member) => (
+          <div key={member.name} className="group even:[&>*]:md:flex-row-reverse">
+            <TeamMember {...member} />
+          </div>
+        ))}
+      </div>
+      <SchoolLogo />
+    </section>
+  )
 }
diff --git a/app/pages/cart/CartItem/CartItem.tsx b/app/pages/cart/CartItem/CartItem.tsx
new file mode 100644
index 0000000..7624aae
--- /dev/null
+++ b/app/pages/cart/CartItem/CartItem.tsx
@@ -0,0 +1,43 @@
+import { type ReactElement, type MouseEvent } from 'react'
+import { type LineItem } from '@commercetools/platform-sdk'
+import { removeProduct, updateQuantity } from '~/store/cart'
+import { useAppDispatch, useAppSelector } from '~/store/hooks'
+import { CART_TABLE_STATUS } from '~/store/cart/types'
+import { CartItemView } from './CartItemView'
+import { LANG } from '~/api/client'
+
+type CartItemProps = {
+  lineItem: LineItem
+}
+
+export function CartItem({ lineItem }: CartItemProps): ReactElement {
+  const { name, productId, quantity, price, totalPrice, variant } = lineItem
+  const dispatch = useAppDispatch()
+  const imageUrl = variant.images?.[0]?.url
+
+  const { status } = useAppSelector((state) => state.cart)
+  const isCartLoading = status === CART_TABLE_STATUS.LOADING
+
+  const handleQuantityChange = async (newQuantity: number): Promise<void> => {
+    if (isCartLoading || newQuantity < 1) return
+    await dispatch(updateQuantity({ productId, quantity: newQuantity })).unwrap()
+  }
+
+  const handleDeleteItem = async (event: MouseEvent<HTMLButtonElement>): Promise<void> => {
+    event.preventDefault()
+    if (isCartLoading) return
+    await dispatch(removeProduct({ productId, quantity })).unwrap()
+  }
+
+  return (
+    <CartItemView
+      name={name[LANG]}
+      imageUrl={imageUrl}
+      price={price}
+      quantity={quantity}
+      totalPrice={totalPrice.centAmount}
+      onQuantityChange={(newQuantity) => void handleQuantityChange(newQuantity)}
+      onDelete={(event) => void handleDeleteItem(event)}
+    />
+  )
+}
diff --git a/app/pages/cart/CartItem/CartItemView.test.tsx b/app/pages/cart/CartItem/CartItemView.test.tsx
new file mode 100644
index 0000000..e430839
--- /dev/null
+++ b/app/pages/cart/CartItem/CartItemView.test.tsx
@@ -0,0 +1,77 @@
+import type { LineItem } from '@commercetools/platform-sdk'
+import { renderWithProviders } from '~/utils/test'
+import { CartItemView } from './CartItemView'
+import { screen } from '@testing-library/react'
+import { formatProductItemPrice } from '~/utils/formatPrice'
+
+const mockCartItem: LineItem = {
+  id: '3a334a02-1663-4aa0-b9ca-6d95e0be07b',
+  productId: 'e37dbed7-9a2d-4e78-bd77-3c1c0d02e12e',
+  name: {
+    'en-US': 'Home coffee table – White'
+  },
+  productType: {
+    id: '251d23e8-5488-480c-8293-60e589124072',
+    typeId: 'product-type'
+  },
+  variant: {
+    id: 1,
+    images: [
+      {
+        url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==',
+        dimensions: {
+          w: 500,
+          h: 500
+        }
+      }
+    ]
+  },
+  price: {
+    id: '7da4c77b-cf10-4f54-a499-196c32aed7b2',
+    value: {
+      centAmount: 19_999,
+      currencyCode: 'USD',
+      fractionDigits: 2,
+      type: 'centPrecision'
+    }
+  },
+  quantity: 1,
+  totalPrice: {
+    centAmount: 16_999,
+    currencyCode: 'USD',
+    fractionDigits: 2,
+    type: 'centPrecision'
+  },
+  discountedPricePerQuantity: [],
+  taxedPricePortions: [],
+  state: [],
+  perMethodTaxRate: [],
+  priceMode: 'Platform',
+  lineItemMode: 'Standard'
+}
+
+describe('CartItemView', () => {
+  it('renders cart item: name, quantity, price, totalPrice, image', () => {
+    const { name, quantity, price, totalPrice, variant } = mockCartItem
+    const LOCALE = 'en-US'
+
+    renderWithProviders(
+      <CartItemView
+        name={name[LOCALE]}
+        imageUrl={variant.images?.[0].url}
+        price={price}
+        quantity={quantity}
+        totalPrice={totalPrice.centAmount}
+        onQuantityChange={() => {}}
+        onDelete={() => {}}
+      />
+    )
+    const image = screen.getByRole('img')
+    expect(screen.getByText(name[LOCALE])).toBeInTheDocument()
+    expect(image).toHaveAttribute('src', variant.images?.[0].url)
+    expect(image).toHaveAttribute('alt', name[LOCALE])
+    expect(screen.getByText(quantity.toString())).toBeInTheDocument()
+    expect(screen.getByText(formatProductItemPrice(+price.value.centAmount))).toBeInTheDocument()
+    expect(screen.getByText(`Total: ${formatProductItemPrice(+totalPrice.centAmount)}`)).toBeInTheDocument()
+  })
+})
diff --git a/app/pages/cart/CartItem/CartItemView.tsx b/app/pages/cart/CartItem/CartItemView.tsx
new file mode 100644
index 0000000..26b7e69
--- /dev/null
+++ b/app/pages/cart/CartItem/CartItemView.tsx
@@ -0,0 +1,53 @@
+import { type ReactElement, type MouseEvent } from 'react'
+import { Trash2 } from 'lucide-react'
+import { type Price } from '@commercetools/platform-sdk'
+import { Card, CardContent, CardTitle } from '~/components/ui/Card'
+import { Button } from '~/components/ui/Button'
+import { ProductImage } from '~/components/product/ProductImage'
+import { ProductPrice } from '~/components/product/ProductPrice'
+import { QuantityControl } from './QuantityControl'
+import { formatProductItemPrice } from '~/utils/formatPrice'
+
+type CartItemViewProps = {
+  name: string
+  imageUrl?: string
+  price: Price
+  quantity: number
+  totalPrice: number
+  onQuantityChange: (quantity: number) => void
+  onDelete: (event: MouseEvent<HTMLButtonElement>) => void
+}
+
+export function CartItemView({
+  name,
+  imageUrl,
+  price,
+  quantity,
+  totalPrice,
+  onQuantityChange,
+  onDelete
+}: CartItemViewProps): ReactElement {
+  return (
+    <Card className="w-full max-w-2xl py-4 sm:py-6">
+      <CardContent className="space-y-2 px-4 sm:px-6">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex flex-col gap-y-4 items-start">
+            <CardTitle>{name}</CardTitle>
+            <ProductPrice startPrice={price.value.centAmount} discountPrice={price.discounted?.value?.centAmount} />
+          </div>
+          <div className="w-[100px]">
+            <ProductImage imageUrl={imageUrl} alt={name} />
+          </div>
+        </div>
+        <hr />
+        <div className="flex items-center justify-between gap-2">
+          <QuantityControl quantity={quantity} onQuantityChange={onQuantityChange} />
+          <div className="text-sm">Total: {formatProductItemPrice(totalPrice)}</div>
+          <Button variant="outline" onClick={onDelete}>
+            <Trash2 />
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/app/pages/cart/CartItem/QuantityControl.test.tsx b/app/pages/cart/CartItem/QuantityControl.test.tsx
new file mode 100644
index 0000000..f67f1e9
--- /dev/null
+++ b/app/pages/cart/CartItem/QuantityControl.test.tsx
@@ -0,0 +1,36 @@
+import { QuantityControl } from './QuantityControl'
+import { renderWithProviders } from '~/utils/test'
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+describe('QuantityControl', () => {
+  it('display cart item quantity', () => {
+    const QUANTITY = 1
+    renderWithProviders(<QuantityControl quantity={QUANTITY} onQuantityChange={() => {}} />)
+    expect(screen.getByText(QUANTITY)).toBeInTheDocument()
+  })
+
+  it('increase cart item quantity', async () => {
+    const QUANTITY = 1
+    const handleChange = vi.fn()
+    const user = userEvent.setup()
+
+    renderWithProviders(<QuantityControl quantity={QUANTITY} onQuantityChange={handleChange} />)
+    const increaseButton = screen.getByLabelText('increase-button')
+
+    await user.click(increaseButton)
+    expect(handleChange).toHaveBeenCalledWith(2)
+  })
+
+  it('display and decrease cart item quantity', async () => {
+    const QUANTITY = 2
+    const handleChange = vi.fn()
+    const user = userEvent.setup()
+
+    renderWithProviders(<QuantityControl quantity={QUANTITY} onQuantityChange={handleChange} />)
+    const decreaseButton = screen.getByLabelText('decrease-button')
+
+    await user.click(decreaseButton)
+    expect(handleChange).toHaveBeenCalledWith(1)
+  })
+})
diff --git a/app/pages/cart/CartItem/QuantityControl.tsx b/app/pages/cart/CartItem/QuantityControl.tsx
new file mode 100644
index 0000000..0eda451
--- /dev/null
+++ b/app/pages/cart/CartItem/QuantityControl.tsx
@@ -0,0 +1,41 @@
+import { Minus, Plus } from 'lucide-react'
+import type { ReactElement } from 'react'
+import { Button } from '~/components/ui/Button'
+
+type QuantityControlProps = {
+  quantity: number
+  onQuantityChange: (quantity: number) => void
+}
+
+export function QuantityControl({ quantity, onQuantityChange }: QuantityControlProps): ReactElement {
+  const handleDecrease = (): void => {
+    if (quantity > 1) onQuantityChange(quantity - 1)
+  }
+
+  const handleIncrease = (): void => {
+    onQuantityChange(quantity + 1)
+  }
+
+  return (
+    <div className="flex gap-2">
+      <Button
+        variant="gray"
+        className="w-6 h-6 rounded-sm cursor-pointer"
+        onClick={handleDecrease}
+        disabled={quantity === 1}
+        aria-label="decrease-button"
+      >
+        <Minus />
+      </Button>
+      <div className="w-6 h-6 flex justify-center items-center">{quantity}</div>
+      <Button
+        variant="gray"
+        className="w-6 h-6 rounded-sm cursor-pointer"
+        onClick={handleIncrease}
+        aria-label="increase-button"
+      >
+        <Plus />
+      </Button>
+    </div>
+  )
+}
diff --git a/app/pages/cart/CartTopPanel.tsx b/app/pages/cart/CartTopPanel.tsx
new file mode 100644
index 0000000..4bd08e3
--- /dev/null
+++ b/app/pages/cart/CartTopPanel.tsx
@@ -0,0 +1,22 @@
+import type { ReactElement } from 'react'
+import { Card, CardContent } from '~/components/ui/Card'
+import { CartTotalPrice } from './CartTotalPrice'
+import { ClearCartButton } from './ClearCartButton'
+import { useAppSelector } from '~/store/hooks'
+
+type CartTopPanelProps = {
+  onClearCart: () => void
+}
+
+export function CartTopPanel({ onClearCart }: CartTopPanelProps): ReactElement {
+  const { cart } = useAppSelector((state) => state.cart)
+
+  return (
+    <Card className="w-full max-w-2xl">
+      <CardContent className="flex justify-between items-center gap-2 flex-wrap">
+        {cart && <CartTotalPrice totalPrice={cart?.totalPrice?.centAmount} discount={cart?.discountOnTotalPrice} />}
+        <ClearCartButton onClearCart={onClearCart} />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/app/pages/cart/CartTotalPrice.tsx b/app/pages/cart/CartTotalPrice.tsx
new file mode 100644
index 0000000..b9d826b
--- /dev/null
+++ b/app/pages/cart/CartTotalPrice.tsx
@@ -0,0 +1,21 @@
+import type { DiscountOnTotalPrice } from '@commercetools/platform-sdk'
+import type { ReactElement } from 'react'
+import { formatProductItemPrice } from '~/utils/formatPrice'
+
+type CartTotalPriceProps = {
+  totalPrice?: number
+  discount?: DiscountOnTotalPrice
+}
+
+export function CartTotalPrice({ totalPrice, discount }: CartTotalPriceProps): ReactElement {
+  const hasDiscount = discount !== undefined
+  const fullPrice = (totalPrice ?? 0) + (discount?.discountedAmount?.centAmount ?? 0)
+  const discountedPrice = totalPrice ?? 0
+
+  return (
+    <div className="text-center m-0 text-sm sm:text-base font-semibold justify-items-start">
+      <div>Total price: {formatProductItemPrice(fullPrice)}</div>
+      {hasDiscount && <div>Total price with discount code applied: {formatProductItemPrice(discountedPrice)}</div>}
+    </div>
+  )
+}
diff --git a/app/pages/cart/ClearCartButton.tsx b/app/pages/cart/ClearCartButton.tsx
new file mode 100644
index 0000000..a90adbc
--- /dev/null
+++ b/app/pages/cart/ClearCartButton.tsx
@@ -0,0 +1,37 @@
+import { type ReactElement } from 'react'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from '~/components/ui/AlertDialog'
+import { Button } from '~/components/ui/Button'
+
+type ClearCartButtonProps = { onClearCart: () => void }
+
+export function ClearCartButton({ onClearCart }: ClearCartButtonProps): ReactElement {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="default">Clear Shopping Cart</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will permanently delete all products from your cart. This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={onClearCart}>Yes, clear it</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/app/pages/cart/CodeForm.tsx b/app/pages/cart/CodeForm.tsx
new file mode 100644
index 0000000..6a37be2
--- /dev/null
+++ b/app/pages/cart/CodeForm.tsx
@@ -0,0 +1,52 @@
+import { type ReactElement } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { Form } from '~/components/ui/Form'
+import { Card, CardContent, CardHeader, CardTitle } from '~/components/ui/Card'
+import { Button } from '~/components/ui/Button'
+import { Input } from '~/components/ui/Input'
+import { useAppDispatch, useAppSelector } from '~/store/hooks'
+import { applyCode } from '~/store/cart'
+import { CART_TABLE_STATUS } from '~/store/cart/types'
+
+const schema = z.object({
+  code: z.string()
+})
+
+const defaultValues = {
+  code: ''
+}
+
+export type SchemaType = typeof schema
+
+export const CodeForm = (): ReactElement => {
+  const dispatch = useAppDispatch()
+  const { status, errorMessage } = useAppSelector((state) => state.cart)
+
+  const form = useForm<z.infer<typeof schema>>({
+    resolver: zodResolver(schema),
+    defaultValues
+  })
+
+  const handleApplyCode = (payload: z.infer<SchemaType>): void => void dispatch(applyCode(payload))
+
+  return (
+    <Card className="md:max-w-2xl m-6 gap-2 mx-auto">
+      <CardHeader>
+        <CardTitle>APPLY CODE</CardTitle>
+      </CardHeader>
+      {status === CART_TABLE_STATUS.ERROR && <div className="px-6 text-red-900">{errorMessage}</div>}
+      <Form {...form}>
+        <form onSubmit={(event) => void form.handleSubmit(handleApplyCode)(event)}>
+          <fieldset disabled={status === CART_TABLE_STATUS.LOADING}>
+            <CardContent className="flex gap-2">
+              <Input type="text" placeholder="Code" {...form.register('code')} />
+              <Button type="submit">Submit</Button>
+            </CardContent>
+          </fieldset>
+        </form>
+      </Form>
+    </Card>
+  )
+}
diff --git a/app/pages/cart/EmptyCart.tsx b/app/pages/cart/EmptyCart.tsx
new file mode 100644
index 0000000..32b4b81
--- /dev/null
+++ b/app/pages/cart/EmptyCart.tsx
@@ -0,0 +1,22 @@
+import { ShoppingCart } from 'lucide-react'
+import type { ReactElement } from 'react'
+import { NavLink } from 'react-router'
+import { ROUTES } from '~/routes'
+
+export function EmptyCart(): ReactElement {
+  return (
+    <div className="w-full h-full flex items-center justify-center p-[10px]">
+      <div className="max-w-md flex flex-col items-center justify-center gap-4 text-center">
+        <ShoppingCart size={60} className="text-black" />
+        <p className="text-xl sm:text-3xl font-semibold">Your cart is empty.</p>
+        <p className="text-base">
+          Time to start shopping!{' '}
+          <NavLink to={ROUTES.CATALOG} className="underline-offset-4 hover:underline font-semibold text-neutral-800">
+            Browse our catalog
+          </NavLink>{' '}
+          and start adding your favorites!
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/app/pages/cart/index.test.tsx b/app/pages/cart/index.test.tsx
new file mode 100644
index 0000000..705eaa8
--- /dev/null
+++ b/app/pages/cart/index.test.tsx
@@ -0,0 +1,47 @@
+import { CART_TABLE_STATUS } from '~/store/cart/types'
+import { renderWithProviders } from '~/utils/test'
+import { screen, waitForElementToBeRemoved } from '@testing-library/react'
+import Cart from '.'
+import { makeStore } from '~/store'
+
+const emptyCartState = makeStore({
+  cart: {
+    cart: {
+      lineItems: [],
+      id: '123',
+      version: 0,
+      customLineItems: [],
+      totalPrice: {
+        centAmount: 16_999,
+        currencyCode: 'USD',
+        fractionDigits: 2,
+        type: 'centPrecision'
+      },
+      taxMode: '',
+      taxRoundingMode: '',
+      taxCalculationMode: '',
+      inventoryMode: '',
+      cartState: '',
+      shippingMode: '',
+      shipping: [],
+      itemShippingAddresses: [],
+      discountCodes: [],
+      directDiscounts: [],
+      refusedGifts: [],
+      origin: '',
+      createdAt: '',
+      lastModifiedAt: ''
+    },
+    status: CART_TABLE_STATUS.READY,
+    errorMessage: ''
+  }
+})
+
+describe('Empty cart', () => {
+  it('display empty cart message when cart is empty', async () => {
+    renderWithProviders(<Cart />, emptyCartState)
+
+    await waitForElementToBeRemoved(() => screen.getByText('Loading...'), { timeout: 5000 })
+    expect(screen.getByText('Your cart is empty.')).toBeInTheDocument()
+  })
+})
diff --git a/app/pages/cart/index.tsx b/app/pages/cart/index.tsx
index 239457e..2d24fdf 100644
--- a/app/pages/cart/index.tsx
+++ b/app/pages/cart/index.tsx
@@ -1,8 +1,45 @@
 import { type ReactElement } from 'react'
 import { useTitle } from '~/hooks/useTitle'
+import { useFetchCart } from '~/hooks/useFetchCart'
+import { useAppDispatch, useAppSelector } from '~/store/hooks'
+import { clearCart, selectCartItems, selectIsEmptyCart } from '~/store/cart'
+import { CART_TABLE_STATUS } from '~/store/cart/types'
+import { Loading } from '~/components/Loading'
+import { EmptyCart } from './EmptyCart'
+import { CartItem } from './CartItem/CartItem'
+import { CodeForm } from './CodeForm'
+import { CartTopPanel } from './CartTopPanel'
 
-export default function Routes(): ReactElement {
+export default function Cart(): ReactElement {
   useTitle('Cart')
+  useFetchCart()
 
-  return <>Cart</>
+  const dispatch = useAppDispatch()
+  const { status } = useAppSelector((state) => state.cart)
+  const isEmptyCart = useAppSelector(selectIsEmptyCart) && status === CART_TABLE_STATUS.READY
+  const cartItems = useAppSelector(selectCartItems)
+
+  if (status === CART_TABLE_STATUS.LOADING) {
+    return <Loading />
+  }
+
+  if (isEmptyCart) {
+    return <EmptyCart />
+  }
+
+  const handleClearCart = async (): Promise<void> => {
+    await dispatch(clearCart()).unwrap()
+  }
+
+  return (
+    <div className="py-6 px-4 flex-grow w-full text-center">
+      <CartTopPanel onClearCart={() => void handleClearCart()} />
+      <CodeForm />
+      <div className="flex flex-col justify-start gap-y-4">
+        {cartItems.map((lineItem) => (
+          <CartItem key={lineItem.productId} lineItem={lineItem} />
+        ))}
+      </div>
+    </div>
+  )
 }
diff --git a/app/pages/catalog/AddToCartButton.tsx b/app/pages/catalog/AddToCartButton.tsx
new file mode 100644
index 0000000..7ea4822
--- /dev/null
+++ b/app/pages/catalog/AddToCartButton.tsx
@@ -0,0 +1,46 @@
+import { type ReactElement, type MouseEvent, useState } from 'react'
+import { Check, ShoppingCart } from 'lucide-react'
+import { type ProductProjection } from '@commercetools/platform-sdk'
+import { cn } from '~/utils/ui'
+import { Button } from '~/components/ui/Button'
+import { useAppDispatch, useAppSelector } from '~/store/hooks'
+import { addProduct, selectIsInCart } from '~/store/cart'
+
+type AddToCartButtonProps = { product: ProductProjection }
+
+export function AddToCartButton({ product }: AddToCartButtonProps): ReactElement {
+  const dispatch = useAppDispatch()
+  const isProductInCart = useAppSelector(selectIsInCart(product))
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+
+  const handleClick = async (event: MouseEvent<HTMLButtonElement>): Promise<void> => {
+    event.stopPropagation()
+    setIsLoading(true)
+    try {
+      await dispatch(addProduct({ productId: product.id, quantity: 1 })).unwrap()
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  if (isLoading) {
+    // TODO: move to separate component
+    return <>...</>
+  }
+
+  return (
+    <Button
+      variant={isProductInCart ? 'secondary' : 'outline'}
+      size="icon"
+      className={cn(
+        'relative cursor-pointer disabled:opacity-100',
+        isProductInCart ? 'cursor-not-allowed' : 'cursor-pointer'
+      )}
+      disabled={isProductInCart}
+      onClick={(event) => void handleClick(event)}
+    >
+      <ShoppingCart size={16} />
+      {isProductInCart && <Check className="text-green-400 absolute bottom-0 right-0" />}
+    </Button>
+  )
+}
diff --git a/app/pages/catalog/FilterForm/Categories.tsx b/app/pages/catalog/FilterForm/Categories.tsx
index 23584f6..da8b7c4 100644
--- a/app/pages/catalog/FilterForm/Categories.tsx
+++ b/app/pages/catalog/FilterForm/Categories.tsx
@@ -1,41 +1,17 @@
-import { type ReactElement, type MouseEvent, useState } from 'react'
-import { generatePath, useNavigate, useParams } from 'react-router'
+import { type ReactElement, useState } from 'react'
 import { ChevronsUpDown } from 'lucide-react'
 import { SidebarGroup } from '~/components/ui/Sidebar'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '~/components/ui/Collapsible'
 import { Button } from '~/components/ui/Button'
 import { type ProductListCategory } from '~/api/namespaces/product'
-import { ROUTES } from '~/routes'
+import { CategoryLink } from './CategoryLink'
 
-type LinkProperties = {
-  category: ProductListCategory
-}
-
-type CategoriesProperties = {
+type CategoriesProps = {
   categories: ProductListCategory[]
+  onClick: () => void
 }
 
-function Link({ category }: LinkProperties): ReactElement {
-  const navigate = useNavigate()
-  const { categoryId } = useParams()
-
-  const handleClick = async (event: MouseEvent, categoryId: string): Promise<void> => {
-    event.preventDefault()
-    return navigate(generatePath(ROUTES.CATEGORY, { categoryId }))
-  }
-
-  return (
-    <a
-      href="#"
-      onClick={(event) => void handleClick(event, category.id)}
-      className={`underline hover:no-underline ${category.id === categoryId ? 'text-blue-500 no-underline! font-semibold' : ''}`}
-    >
-      {category.label}
-    </a>
-  )
-}
-
-export function Categories({ categories }: CategoriesProperties): ReactElement {
+export function Categories({ categories, onClick }: CategoriesProps): ReactElement {
   const [open, setOpen] = useState<Record<string, boolean>>(() =>
     Object.fromEntries(categories.map((category) => [category.id, true]))
   )
@@ -52,7 +28,7 @@ export function Categories({ categories }: CategoriesProperties): ReactElement {
                 onOpenChange={() => setOpen((previous) => ({ ...previous, [category.id]: !previous[category.id] }))}
               >
                 <div className="flex justify-between items-center cursor-pointer">
-                  <Link category={category} />
+                  <CategoryLink category={category} onClick={onClick} />
                   <CollapsibleTrigger asChild>
                     <Button type="button" variant="ghost" size="icon" className="size-8 cursor-pointer">
                       <ChevronsUpDown />
@@ -61,12 +37,12 @@ export function Categories({ categories }: CategoriesProperties): ReactElement {
                 </div>
                 <CollapsibleContent>
                   <div className="pl-3">
-                    <Categories categories={category.subCategories} />
+                    <Categories categories={category.subCategories} onClick={onClick} />
                   </div>
                 </CollapsibleContent>
               </Collapsible>
             ) : (
-              <Link category={category} />
+              <CategoryLink category={category} onClick={onClick} />
             )}
           </li>
         ))}
diff --git a/app/pages/catalog/FilterForm/CategoryLink.tsx b/app/pages/catalog/FilterForm/CategoryLink.tsx
new file mode 100644
index 0000000..ba06267
--- /dev/null
+++ b/app/pages/catalog/FilterForm/CategoryLink.tsx
@@ -0,0 +1,30 @@
+import type { MouseEvent, ReactElement } from 'react'
+import { generatePath, useNavigate, useParams } from 'react-router'
+import { ROUTES } from '~/routes'
+import type { ProductListCategory } from '~/api/namespaces/product'
+
+type CategoryLinkProps = {
+  category: ProductListCategory
+  onClick: () => void
+}
+
+export function CategoryLink({ category, onClick }: CategoryLinkProps): ReactElement {
+  const navigate = useNavigate()
+  const { categoryId } = useParams()
+
+  const handleClick = async (event: MouseEvent, categoryId: string): Promise<void> => {
+    event.preventDefault()
+    onClick()
+    return navigate(generatePath(ROUTES.CATEGORY, { categoryId }))
+  }
+
+  return (
+    <a
+      href="#"
+      onClick={(event) => void handleClick(event, category.id)}
+      className={`underline hover:no-underline ${category.id === categoryId ? 'text-neural-500 no-underline! font-semibold' : ''}`}
+    >
+      {category.label}
+    </a>
+  )
+}
diff --git a/app/pages/catalog/FilterForm/FilterForm.utils.ts b/app/pages/catalog/FilterForm/FilterForm.utils.ts
new file mode 100644
index 0000000..2914821
--- /dev/null
+++ b/app/pages/catalog/FilterForm/FilterForm.utils.ts
@@ -0,0 +1,113 @@
+import {
+  PRODUCT_LIST_DEFAULT_APPLIED_FILTERS,
+  PRODUCT_LIST_FILTER_FALSE,
+  PRODUCT_LIST_FILTER_NONE,
+  PRODUCT_LIST_FILTER_TRUE,
+  PRODUCT_LIST_SORT_ASC,
+  PRODUCT_LIST_SORT_DESC,
+  type ProductListAppliedFilters,
+  type ProductListAppliedSort,
+  type ProductListFilter,
+  type ProductListSort
+} from '~/api/namespaces/product'
+import { LANG } from '~/api/client'
+
+export type FormValues = Record<string, unknown>
+
+export const SORT_KEY_PREFIX = 'sort_'
+
+export const sorts: ProductListSort[] = [
+  {
+    key: `${SORT_KEY_PREFIX}price`,
+    label: 'Price',
+    defaultValue: PRODUCT_LIST_SORT_DESC,
+    options: [
+      { label: 'Price', value: PRODUCT_LIST_FILTER_NONE },
+      { label: 'Price ↑', value: PRODUCT_LIST_SORT_ASC },
+      { label: 'Price ↓', value: PRODUCT_LIST_SORT_DESC }
+    ]
+  },
+  {
+    key: `${SORT_KEY_PREFIX}name_${LANG}`,
+    label: 'Name',
+    defaultValue: PRODUCT_LIST_FILTER_NONE,
+    options: [
+      { label: 'Name', value: PRODUCT_LIST_FILTER_NONE },
+      { label: 'Name ↑', value: PRODUCT_LIST_SORT_ASC },
+      { label: 'Name ↓', value: PRODUCT_LIST_SORT_DESC }
+    ]
+  }
+]
+
+export const convertFormValuesToAppliedFilters = (
+  data: FormValues,
+  filters: ProductListFilter[]
+): ProductListAppliedFilters => {
+  return filters
+    .map((filter) => {
+      const formValue = data[filter.key]
+
+      if (
+        formValue === undefined ||
+        formValue === '' ||
+        formValue === PRODUCT_LIST_FILTER_NONE ||
+        (Array.isArray(formValue) && formValue.length === 0) ||
+        filter.key.startsWith(SORT_KEY_PREFIX)
+      ) {
+        return
+      }
+
+      let value = formValue
+      if (value === true) {
+        value = PRODUCT_LIST_FILTER_TRUE
+      } else if (value === false) {
+        value = PRODUCT_LIST_FILTER_FALSE
+      }
+
+      return {
+        key: filter.key,
+        type: filter.type,
+        value
+      }
+    })
+    .filter((filter): filter is ProductListAppliedFilters[number] => filter !== undefined)
+}
+
+export const convertFormValuesToSort = (data: FormValues, sorts: ProductListSort[]): ProductListAppliedSort => {
+  return sorts
+    .map((sort) => {
+      const formValue = data[sort.key]
+
+      if (!sort.key.startsWith(SORT_KEY_PREFIX) || formValue === PRODUCT_LIST_FILTER_NONE) {
+        return
+      }
+
+      return {
+        key: sort.key.slice(SORT_KEY_PREFIX.length),
+        value: formValue
+      }
+    })
+    .filter((item): item is ProductListAppliedSort[number] => item !== undefined)
+}
+
+export const getDefaultFormValues = (filters: ProductListFilter[], sorts: ProductListSort[]): FormValues => {
+  return {
+    ...Object.fromEntries(
+      filters
+        .filter((filter) => filter.type === 'range')
+        .map(({ key, options }) => [key, options.map(({ value }) => value)])
+    ),
+    ...Object.fromEntries(
+      filters
+        .filter((filter) => filter.type === 'boolean')
+        .map(({ key }) => [
+          key,
+          PRODUCT_LIST_DEFAULT_APPLIED_FILTERS.find(
+            (defaultAppliedFilter) => defaultAppliedFilter.type === 'boolean' && defaultAppliedFilter.key === key
+          )?.value === PRODUCT_LIST_FILTER_TRUE
+        ])
+    ),
+    ...Object.fromEntries(filters.filter((filter) => filter.type === 'set').map(({ key }) => [key, ''])),
+    ...Object.fromEntries(sorts.map((sort) => [sort.key, sort.defaultValue]))
+  }
+}
diff --git a/app/pages/catalog/FilterForm/FilterFormBody.tsx b/app/pages/catalog/FilterForm/FilterFormBody.tsx
index a56d2a0..7f4f5a4 100644
--- a/app/pages/catalog/FilterForm/FilterFormBody.tsx
+++ b/app/pages/catalog/FilterForm/FilterFormBody.tsx
@@ -1,176 +1,38 @@
 import { type ReactElement } from 'react'
 import { useForm } from 'react-hook-form'
-import {
-  PRODUCT_LIST_FILTER_FALSE,
-  PRODUCT_LIST_FILTER_TRUE,
-  PRODUCT_LIST_FILTER_NONE,
-  type ProductListAppliedFilters,
-  type ProductListAppliedSort,
-  type ProductListFilter,
-  type ProductListSort,
-  PRODUCT_LIST_SORT_ASC,
-  PRODUCT_LIST_SORT_DESC,
-  type ProductListCategory,
-  PRODUCT_LIST_DEFAULT_APPLIED_FILTERS
-} from '~/api/namespaces/product'
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarProvider,
-  SidebarTrigger
-} from '~/components/ui/Sidebar'
+import { type ProductListFilter, type ProductListCategory, PRODUCT_LIST_ITEMS_PER_PAGE } from '~/api/namespaces/product'
+import { Sidebar, SidebarContent, SidebarGroup, SidebarProvider, SidebarTrigger } from '~/components/ui/Sidebar'
 import { Button } from '~/components/ui/Button'
-import { FilterFormField } from './FilterFormField'
-import { SortFormField } from './SortFormField'
 import { Categories } from './Categories'
+import { FilterFormFields } from './FilterFormFields'
 import { type UseCatalogDataResult } from '../hooks/useCatalogData'
-
-// TODO: items per page
-export const PRODUCTS_LIMIT = 100
-
-type FilterFormBodyProperties = {
+import {
+  sorts,
+  type FormValues,
+  getDefaultFormValues,
+  convertFormValuesToAppliedFilters,
+  convertFormValuesToSort
+} from './FilterForm.utils'
+
+type FilterFormBodyProps = {
   filters: ProductListFilter[]
   categories: ProductListCategory[]
   fetch: UseCatalogDataResult['fetchProducts']
+  onApply: () => void
 }
 
-const SORT_KEY_PREFIX = 'sort_'
-
-const sorts: ProductListSort[] = [
-  {
-    key: `${SORT_KEY_PREFIX}price`,
-    label: 'Price',
-    defaultValue: PRODUCT_LIST_SORT_DESC,
-    options: [
-      { label: 'Price', value: PRODUCT_LIST_FILTER_NONE },
-      { label: 'Price ↑', value: PRODUCT_LIST_SORT_ASC },
-      { label: 'Price ↓', value: PRODUCT_LIST_SORT_DESC }
-    ]
-  },
-  {
-    key: `${SORT_KEY_PREFIX}name_en-US`,
-    label: 'Name',
-    defaultValue: PRODUCT_LIST_FILTER_NONE,
-    options: [
-      { label: 'Name', value: PRODUCT_LIST_FILTER_NONE },
-      { label: 'Name ↑', value: PRODUCT_LIST_SORT_ASC },
-      { label: 'Name ↓', value: PRODUCT_LIST_SORT_DESC }
-    ]
-  }
-]
-
-export type FormValues = Record<string, unknown>
-
-const convertFormValuesToAppliedFilters = (
-  data: FormValues,
-  filters: ProductListFilter[]
-): ProductListAppliedFilters => {
-  return filters
-    .map((filter) => {
-      const formValue = data[filter.key]
-
-      if (
-        formValue === undefined ||
-        formValue === '' ||
-        formValue === PRODUCT_LIST_FILTER_NONE ||
-        (Array.isArray(formValue) && formValue.length === 0) ||
-        filter.key.startsWith(SORT_KEY_PREFIX)
-      ) {
-        return
-      }
-
-      let value = formValue
-      if (value === true) {
-        value = PRODUCT_LIST_FILTER_TRUE
-      } else if (value === false) {
-        value = PRODUCT_LIST_FILTER_FALSE
-      }
-
-      return {
-        key: filter.key,
-        type: filter.type,
-        value
-      }
-    })
-    .filter((filter): filter is ProductListAppliedFilters[number] => filter !== undefined)
-}
-
-const convertFormValuesToSort = (data: FormValues, sorts: ProductListSort[]): ProductListAppliedSort => {
-  return sorts
-    .map((sort) => {
-      const formValue = data[sort.key]
-
-      if (!sort.key.startsWith(SORT_KEY_PREFIX) || formValue === PRODUCT_LIST_FILTER_NONE) {
-        return
-      }
-
-      return {
-        key: sort.key.slice(SORT_KEY_PREFIX.length),
-        value: formValue
-      }
-    })
-    .filter((item): item is ProductListAppliedSort[number] => item !== undefined)
-}
-
-function getDefaultFormValues(filters: ProductListFilter[], sorts: ProductListSort[]): FormValues {
-  return {
-    ...Object.fromEntries(
-      filters
-        .filter((filter) => filter.type === 'range')
-        .map(({ key, options }) => [key, options.map(({ value }) => value)])
-    ),
-    ...Object.fromEntries(
-      filters
-        .filter((filter) => filter.type === 'boolean')
-        .map(({ key }) => [
-          key,
-          PRODUCT_LIST_DEFAULT_APPLIED_FILTERS.find(
-            (defaultAppliedFilter) => defaultAppliedFilter.type === 'boolean' && defaultAppliedFilter.key === key
-          )?.value === PRODUCT_LIST_FILTER_TRUE
-        ])
-    ),
-    ...Object.fromEntries(filters.filter((filter) => filter.type === 'set').map(({ key }) => [key, ''])),
-    ...Object.fromEntries(sorts.map((sort) => [sort.key, sort.defaultValue]))
-  }
-}
-
-function FilterFormFields({
-  filters,
-  form
-}: {
-  filters: ProductListFilter[]
-  form: ReturnType<typeof useForm<FormValues>>
-}): ReactElement {
-  return (
-    <>
-      <SidebarGroup className="gap-3">
-        <SidebarGroupLabel>Filters</SidebarGroupLabel>
-        {filters.map((filter, index) => (
-          <FilterFormField control={form.control} filter={filter} key={`${filter.type}-${filter.key}-${index}`} />
-        ))}
-      </SidebarGroup>
-      <SidebarGroup className="gap-3">
-        <SidebarGroupLabel>Sort</SidebarGroupLabel>
-        {sorts.map((sort, index) => (
-          <SortFormField sort={sort} sorts={sorts} key={`${sort.key}-${index}`} form={form} />
-        ))}
-      </SidebarGroup>
-    </>
-  )
-}
-
-export function FilterFormBody({ filters, categories, fetch }: FilterFormBodyProperties): ReactElement {
+export function FilterFormBody({ filters, categories, fetch, onApply }: FilterFormBodyProps): ReactElement {
   const defaultValues = getDefaultFormValues(filters, sorts)
   const form = useForm<FormValues>({ defaultValues })
 
-  const handleApply = (data: FormValues): Promise<void> =>
-    fetch(
-      { limit: PRODUCTS_LIMIT },
+  const handleApply = (data: FormValues): Promise<void> => {
+    onApply()
+    return fetch(
+      { limit: PRODUCT_LIST_ITEMS_PER_PAGE },
       convertFormValuesToAppliedFilters(data, filters),
       convertFormValuesToSort(data, sorts)
     )
+  }
 
   const handleReset = (): Promise<void> => {
     form.reset(defaultValues)
@@ -182,7 +44,7 @@ export function FilterFormBody({ filters, categories, fetch }: FilterFormBodyPro
       <Sidebar>
         <SidebarContent className="p-4">
           <form onSubmit={(event) => void form.handleSubmit(handleApply)(event)} className="space-y-4">
-            <Categories categories={categories} />
+            <Categories categories={categories} onClick={onApply} />
             <FilterFormFields filters={filters} form={form} />
             <SidebarGroup>
               <div className="flex justify-between">
diff --git a/app/pages/catalog/FilterForm/FilterFormField.tsx b/app/pages/catalog/FilterForm/FilterFormField.tsx
index 1c12e91..9801d36 100644
--- a/app/pages/catalog/FilterForm/FilterFormField.tsx
+++ b/app/pages/catalog/FilterForm/FilterFormField.tsx
@@ -1,135 +1,10 @@
 import { type ReactElement } from 'react'
-import { type Control, Controller } from 'react-hook-form'
-import { type ProductListFilter } from '~/api/namespaces/product'
-import { FilterPrice } from './fields/FilterPrice'
-import { FilterSwitch } from './fields/FilterSwitch'
-import { FilterSelect } from './fields/FilterSelect'
+import { type FilterFormFieldProps } from './FilterFormField.utils'
+import { FilterPriceController } from './fields/controllers/FilterPriceController'
+import { FilterSwitchController } from './fields/controllers/FilterSwitchController'
+import { FilterSelectController } from './fields/controllers/FilterSelectController'
 
-type FilterFormFieldProperties = {
-  control: Control
-  filter: ProductListFilter
-}
-
-function getDefaultFilterValue(filter: ProductListFilter): number[] | boolean | string {
-  if (filter.type === 'range') {
-    return filter.options.map(({ value }) => value)
-  }
-
-  if (filter.type === 'boolean') {
-    return false
-  }
-
-  if (filter.type === 'set') {
-    return ''
-  }
-
-  throw new Error('Can not get default value for unknown filter type')
-}
-
-function isRangeFilterValue(value: unknown): value is number[] {
-  return Array.isArray(value) && typeof value?.[0] === 'number' && typeof value?.[1] === 'number'
-}
-
-function isBooleanFilterValue(value: unknown): value is boolean {
-  return typeof value === 'boolean'
-}
-
-function isSetFilterValue(value: unknown): value is string {
-  return typeof value === 'string'
-}
-
-export function FilterPriceController({ control, filter }: FilterFormFieldProperties): ReactElement {
-  if (filter.type !== 'range') {
-    throw new Error('Price filter controller must be a range type')
-  }
-
-  const defaultValue = getDefaultFilterValue(filter)
-
-  if (!isRangeFilterValue(defaultValue)) {
-    throw new TypeError('Range filter value must be a number tuple')
-  }
-
-  const [min, max] = defaultValue
-
-  return (
-    <Controller
-      key={filter.key}
-      name={filter.key}
-      control={control}
-      defaultValue={[min, max]}
-      render={({ field }) => (
-        <FilterPrice
-          label={filter.label}
-          value={isRangeFilterValue(field.value) ? field.value : [min, max]}
-          range={[min, max]}
-          onChange={field.onChange}
-        />
-      )}
-    />
-  )
-}
-
-export function FilterSwitchController({ control, filter }: FilterFormFieldProperties): ReactElement {
-  if (filter.type !== 'boolean') {
-    throw new Error('Switch filter controller must be a boolean type')
-  }
-
-  const defaultValue = getDefaultFilterValue(filter)
-
-  if (!isBooleanFilterValue(defaultValue)) {
-    throw new TypeError('Boolean filter value must be a boolean')
-  }
-
-  return (
-    <Controller
-      key={filter.key}
-      name={filter.key}
-      control={control}
-      defaultValue={defaultValue}
-      render={({ field }) => (
-        <FilterSwitch
-          label={filter.label}
-          onChange={field.onChange}
-          value={isBooleanFilterValue(field.value) ? field.value : defaultValue}
-        />
-      )}
-    />
-  )
-}
-
-export function FilterSelectController({ control, filter }: FilterFormFieldProperties): ReactElement {
-  if (filter.type !== 'set') {
-    throw new Error('Select filter controller must be a set type')
-  }
-
-  const defaultValue = getDefaultFilterValue(filter)
-
-  if (!isSetFilterValue(defaultValue)) {
-    throw new TypeError('Set filter value must be a string')
-  }
-
-  return (
-    <Controller
-      key={filter.key}
-      name={filter.key}
-      control={control}
-      defaultValue={defaultValue}
-      render={({ field }) => (
-        <FilterSelect
-          label={filter.label}
-          options={filter.options.map((option) => ({
-            ...option,
-            value: option.value
-          }))}
-          onChange={field.onChange}
-          value={isSetFilterValue(field.value) ? field.value : defaultValue}
-        />
-      )}
-    />
-  )
-}
-
-export function FilterFormField({ control, filter }: FilterFormFieldProperties): ReactElement {
+export function FilterFormField({ control, filter }: FilterFormFieldProps): ReactElement {
   if (filter.type === 'range' && filter.key === 'price') {
     return <FilterPriceController control={control} filter={filter} />
   }
diff --git a/app/pages/catalog/FilterForm/FilterFormField.utils.ts b/app/pages/catalog/FilterForm/FilterFormField.utils.ts
new file mode 100644
index 0000000..d306ac5
--- /dev/null
+++ b/app/pages/catalog/FilterForm/FilterFormField.utils.ts
@@ -0,0 +1,35 @@
+import { type Control } from 'react-hook-form'
+import { type ProductListFilter } from '~/api/namespaces/product'
+
+export type FilterFormFieldProps = {
+  control: Control
+  filter: ProductListFilter
+}
+
+export function getDefaultFilterValue(filter: ProductListFilter): number[] | boolean | string {
+  if (filter.type === 'range') {
+    return filter.options.map(({ value }) => value)
+  }
+
+  if (filter.type === 'boolean') {
+    return false
+  }
+
+  if (filter.type === 'set') {
+    return ''
+  }
+
+  throw new Error('Can not get default value for unknown filter type')
+}
+
+export function isRangeFilterValue(value: unknown): value is number[] {
+  return Array.isArray(value) && typeof value?.[0] === 'number' && typeof value?.[1] === 'number'
+}
+
+export function isBooleanFilterValue(value: unknown): value is boolean {
+  return typeof value === 'boolean'
+}
+
+export function isSetFilterValue(value: unknown): value is string {
+  return typeof value === 'string'
+}
diff --git a/app/pages/catalog/FilterForm/FilterFormFields.tsx b/app/pages/catalog/FilterForm/FilterFormFields.tsx
new file mode 100644
index 0000000..2deef6c
--- /dev/null
+++ b/app/pages/catalog/FilterForm/FilterFormFields.tsx
@@ -0,0 +1,31 @@
+import { type ReactElement } from 'react'
+import { type useForm } from 'react-hook-form'
+import { type ProductListFilter } from '~/api/namespaces/product'
+import { SidebarGroup, SidebarGroupLabel } from '~/components/ui/Sidebar'
+import { FilterFormField } from './FilterFormField'
+import { SortFormField } from './SortFormField'
+import { type FormValues, sorts } from './FilterForm.utils'
+
+type FilterFormFieldsProps = {
+  filters: ProductListFilter[]
+  form: ReturnType<typeof useForm<FormValues>>
+}
+
+export function FilterFormFields({ filters, form }: FilterFormFieldsProps): ReactElement {
+  return (
+    <>
+      <SidebarGroup className="gap-3">
+        <SidebarGroupLabel>Filters</SidebarGroupLabel>
+        {filters.map((filter, index) => (
+          <FilterFormField control={form.control} filter={filter} key={`${filter.type}-${filter.key}-${index}`} />
+        ))}
+      </SidebarGroup>
+      <SidebarGroup className="gap-3">
+        <SidebarGroupLabel>Sort</SidebarGroupLabel>
+        {sorts.map((sort, index) => (
+          <SortFormField sort={sort} sorts={sorts} key={`${sort.key}-${index}`} form={form} />
+        ))}
+      </SidebarGroup>
+    </>
+  )
+}
diff --git a/app/pages/catalog/FilterForm/SortFormField.tsx b/app/pages/catalog/FilterForm/SortFormField.tsx
index 1c9b822..96eded3 100644
--- a/app/pages/catalog/FilterForm/SortFormField.tsx
+++ b/app/pages/catalog/FilterForm/SortFormField.tsx
@@ -2,15 +2,15 @@ import { type ReactElement } from 'react'
 import { type useForm, Controller } from 'react-hook-form'
 import { PRODUCT_LIST_FILTER_NONE, type ProductListSort } from '~/api/namespaces/product'
 import { FilterSelect } from './fields/FilterSelect'
-import { type FormValues } from './FilterFormBody'
+import { type FormValues } from './FilterForm.utils'
 
-type FilterFormFieldProperties = {
+type SortFormFieldProps = {
   form: ReturnType<typeof useForm<FormValues>>
   sort: ProductListSort
   sorts: ProductListSort[]
 }
 
-export function SortFormField({ form, sort, sorts }: FilterFormFieldProperties): ReactElement {
+export function SortFormField({ form, sort, sorts }: SortFormFieldProps): ReactElement {
   const resetSortFields = (): void => {
     form.reset({
       ...form.getValues(),
diff --git a/app/pages/catalog/FilterForm/fields/FilterPrice.tsx b/app/pages/catalog/FilterForm/fields/FilterPrice.tsx
index 85e3984..72d580a 100644
--- a/app/pages/catalog/FilterForm/fields/FilterPrice.tsx
+++ b/app/pages/catalog/FilterForm/fields/FilterPrice.tsx
@@ -4,29 +4,29 @@ import { Slider } from '~/components/ui/Slider'
 import { SidebarGroupLabel } from '~/components/ui/Sidebar'
 import { formatProductItemPrice } from '~/utils/formatPrice'
 
-interface FilterPriceProperties {
+type FilterPriceProps = {
   label: string
   onChange: (value: number[]) => void
   range: [number, number]
   value: number[]
 }
 
-export function FilterPrice(properties: FilterPriceProperties): ReactElement {
-  const [min, max] = properties.range
+export function FilterPrice(props: FilterPriceProps): ReactElement {
+  const [min, max] = props.range
 
   return (
     <div className="flex flex-col gap-y-[15px]">
-      <SidebarGroupLabel>{properties.label}</SidebarGroupLabel>
+      <SidebarGroupLabel>{props.label}</SidebarGroupLabel>
       <div className="flex justify-between">
         <Button variant="outline" className="pointer-events-none cursor-default w-[80px]">
-          {formatProductItemPrice(properties.value[0])}
+          {formatProductItemPrice(props.value[0])}
         </Button>
         <Button variant="outline" className="pointer-events-none cursor-default w-[80px]">
-          {formatProductItemPrice(properties.value[1])}
+          {formatProductItemPrice(props.value[1])}
         </Button>
       </div>
 
-      <Slider min={min} max={max} value={properties.value} onValueChange={properties.onChange} />
+      <Slider min={min} max={max} value={props.value} onValueChange={props.onChange} />
     </div>
   )
 }
diff --git a/app/pages/catalog/FilterForm/fields/FilterSelect.tsx b/app/pages/catalog/FilterForm/fields/FilterSelect.tsx
index 8536987..9efa7d2 100644
--- a/app/pages/catalog/FilterForm/fields/FilterSelect.tsx
+++ b/app/pages/catalog/FilterForm/fields/FilterSelect.tsx
@@ -1,7 +1,7 @@
 import { type ReactElement } from 'react'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '~/components/ui/Select'
 
-interface FilterSelectProperties {
+type FilterSelectProps = {
   label: string
   options: {
     value: string
@@ -11,14 +11,14 @@ interface FilterSelectProperties {
   value: string
 }
 
-export function FilterSelect(properties: FilterSelectProperties): ReactElement {
+export function FilterSelect(props: FilterSelectProps): ReactElement {
   return (
-    <Select onValueChange={properties.onChange} value={properties.value}>
+    <Select onValueChange={props.onChange} value={props.value}>
       <SelectTrigger className="w-full">
-        <SelectValue placeholder={properties.label} />
+        <SelectValue placeholder={props.label} />
       </SelectTrigger>
       <SelectContent>
-        {properties.options.map((option, index) => {
+        {props.options.map((option, index) => {
           return (
             <SelectItem key={`${option.value}-${index}`} value={option.value}>
               {option.label}
diff --git a/app/pages/catalog/FilterForm/fields/FilterSwitch.tsx b/app/pages/catalog/FilterForm/fields/FilterSwitch.tsx
index 5c4a246..69ec991 100644
--- a/app/pages/catalog/FilterForm/fields/FilterSwitch.tsx
+++ b/app/pages/catalog/FilterForm/fields/FilterSwitch.tsx
@@ -2,17 +2,17 @@ import { type ReactElement } from 'react'
 import { Switch } from '~/components/ui/Switch'
 import { Label } from '~/components/ui/Label'
 
-interface FilterSwitchProperties {
+type FilterSwitchProps = {
   label: string
   onChange: (value: boolean) => void
   value: boolean
 }
 
-export function FilterSwitch(properties: FilterSwitchProperties): ReactElement {
+export function FilterSwitch(props: FilterSwitchProps): ReactElement {
   return (
     <div className="flex flex-row items-center justify-between rounded-md border p-2">
-      <Label>{properties.label}</Label>
-      <Switch checked={properties.value} onCheckedChange={properties.onChange} />
+      <Label>{props.label}</Label>
+      <Switch checked={props.value} onCheckedChange={props.onChange} />
     </div>
   )
 }
diff --git a/app/pages/catalog/FilterForm/fields/controllers/FilterPriceController.tsx b/app/pages/catalog/FilterForm/fields/controllers/FilterPriceController.tsx
new file mode 100644
index 0000000..362ddc3
--- /dev/null
+++ b/app/pages/catalog/FilterForm/fields/controllers/FilterPriceController.tsx
@@ -0,0 +1,35 @@
+import { type ReactElement } from 'react'
+import { Controller } from 'react-hook-form'
+import { FilterPrice } from '../FilterPrice'
+import { type FilterFormFieldProps, getDefaultFilterValue, isRangeFilterValue } from '../../FilterFormField.utils'
+
+export function FilterPriceController({ control, filter }: FilterFormFieldProps): ReactElement {
+  if (filter.type !== 'range') {
+    throw new Error('Price filter controller must be a range type')
+  }
+
+  const defaultValue = getDefaultFilterValue(filter)
+
+  if (!isRangeFilterValue(defaultValue)) {
+    throw new TypeError('Range filter value must be a number tuple')
+  }
+
+  const [min, max] = defaultValue
+
+  return (
+    <Controller
+      key={filter.key}
+      name={filter.key}
+      control={control}
+      defaultValue={[min, max]}
+      render={({ field }) => (
+        <FilterPrice
+          label={filter.label}
+          value={isRangeFilterValue(field.value) ? field.value : [min, max]}
+          range={[min, max]}
+          onChange={field.onChange}
+        />
+      )}
+    />
+  )
+}
diff --git a/app/pages/catalog/FilterForm/fields/controllers/FilterSelectController.tsx b/app/pages/catalog/FilterForm/fields/controllers/FilterSelectController.tsx
new file mode 100644
index 0000000..807f50d
--- /dev/null
+++ b/app/pages/catalog/FilterForm/fields/controllers/FilterSelectController.tsx
@@ -0,0 +1,36 @@
+import { type ReactElement } from 'react'
+import { Controller } from 'react-hook-form'
+import { FilterSelect } from '../FilterSelect'
+import { type FilterFormFieldProps, getDefaultFilterValue, isSetFilterValue } from '../../FilterFormField.utils'
+
+export function FilterSelectController({ control, filter }: FilterFormFieldProps): ReactElement {
+  if (filter.type !== 'set') {
+    throw new Error('Select filter controller must be a set type')
+  }
+
+  const defaultValue = getDefaultFilterValue(filter)
+
+  if (!isSetFilterValue(defaultValue)) {
+    throw new TypeError('Set filter value must be a string')
+  }
+
+  return (
+    <Controller
+      key={filter.key}
+      name={filter.key}
+      control={control}
+      defaultValue={defaultValue}
+      render={({ field }) => (
+        <FilterSelect
+          label={filter.label}
+          options={filter.options.map((option) => ({
+            ...option,
+            value: option.value
+          }))}
+          onChange={field.onChange}
+          value={isSetFilterValue(field.value) ? field.value : defaultValue}
+        />
+      )}
+    />
+  )
+}
diff --git a/app/pages/catalog/FilterForm/fields/controllers/FilterSwitchController.tsx b/app/pages/catalog/FilterForm/fields/controllers/FilterSwitchController.tsx
new file mode 100644
index 0000000..acd6a56
--- /dev/null
+++ b/app/pages/catalog/FilterForm/fields/controllers/FilterSwitchController.tsx
@@ -0,0 +1,32 @@
+import { type ReactElement } from 'react'
+import { Controller } from 'react-hook-form'
+import { FilterSwitch } from '../FilterSwitch'
+import { type FilterFormFieldProps, getDefaultFilterValue, isBooleanFilterValue } from '../../FilterFormField.utils'
+
+export function FilterSwitchController({ control, filter }: FilterFormFieldProps): ReactElement {
+  if (filter.type !== 'boolean') {
+    throw new Error('Switch filter controller must be a boolean type')
+  }
+
+  const defaultValue = getDefaultFilterValue(filter)
+
+  if (!isBooleanFilterValue(defaultValue)) {
+    throw new TypeError('Boolean filter value must be a boolean')
+  }
+
+  return (
+    <Controller
+      key={filter.key}
+      name={filter.key}
+      control={control}
+      defaultValue={defaultValue}
+      render={({ field }) => (
+        <FilterSwitch
+          label={filter.label}
+          onChange={field.onChange}
+          value={isBooleanFilterValue(field.value) ? field.value : defaultValue}
+        />
+      )}
+    />
+  )
+}
diff --git a/app/pages/catalog/NoProductsFound.tsx b/app/pages/catalog/NoProductsFound.tsx
new file mode 100644
index 0000000..3e8bd3f
--- /dev/null
+++ b/app/pages/catalog/NoProductsFound.tsx
@@ -0,0 +1,13 @@
+import { Sparkles } from 'lucide-react'
+import type { ReactElement } from 'react'
+
+export function NoProductsFound(): ReactElement {
+  return (
+    <div className="w-full h-full flex items-center justify-center">
+      <div className="max-w-xs flex flex-col items-center justify-center gap-4 text-center">
+        <Sparkles size={60} className="text-neural-200" />
+        <p className="text-sm">We couldn’t find any products matching your search.</p>
+      </div>
+    </div>
+  )
+}
diff --git a/app/pages/catalog/PaginationControls.tsx b/app/pages/catalog/PaginationControls.tsx
new file mode 100644
index 0000000..11fbe54
--- /dev/null
+++ b/app/pages/catalog/PaginationControls.tsx
@@ -0,0 +1,56 @@
+import type { ReactElement } from 'react'
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEnd,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious,
+  PaginationStart
+} from '~/components/ui/Pagination'
+
+type PaginationControlsProps = {
+  page: number
+  totalPage: number
+  onPageChange: (page: number) => void
+}
+
+export function PaginationControls({ page, totalPage, onPageChange }: PaginationControlsProps): ReactElement {
+  const isFirstPage = page === 1
+  const isLastPage = page === totalPage
+  const classNamesDisabled = 'pointer-events-none opacity-50'
+
+  return (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationStart
+            onClick={() => !isFirstPage && onPageChange(1)}
+            className={isFirstPage ? classNamesDisabled : ''}
+          />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationPrevious
+            onClick={() => !isFirstPage && onPageChange(page - 1)}
+            className={isFirstPage ? classNamesDisabled : ''}
+          />
+        </PaginationItem>
+        <PaginationItem className="px-2.5 sm:pl-2.5 border rounded-sm">
+          {page} / {totalPage}
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext
+            onClick={() => !isLastPage && onPageChange(page + 1)}
+            className={isLastPage ? classNamesDisabled : ''}
+          />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEnd
+            onClick={() => !isLastPage && onPageChange(totalPage)}
+            className={isLastPage ? classNamesDisabled : ''}
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
diff --git a/app/pages/catalog/ProductItem.tsx b/app/pages/catalog/ProductItem.tsx
index 06d29cb..03f6f9d 100644
--- a/app/pages/catalog/ProductItem.tsx
+++ b/app/pages/catalog/ProductItem.tsx
@@ -2,20 +2,20 @@ import { type ProductProjection } from '@commercetools/platform-sdk'
 import { type ReactElement } from 'react'
 import { generatePath, useNavigate } from 'react-router'
 import { Card, CardContent, CardDescription, CardTitle } from '~/components/ui/Card'
-import { ShoppingCart } from 'lucide-react'
-import { Button } from '~/components/ui/Button'
 import { SaleBadge } from '~/components/product/SaleBadge'
-import { AspectRatio } from '~/components/ui/AspectRatio'
 import { ProductPrice } from '~/components/product/ProductPrice'
 import { ROUTES } from '~/routes'
+import { AddToCartButton } from './AddToCartButton'
+import { ProductImage } from '~/components/product/ProductImage'
+import { LANG } from '~/api/client'
 
-type ProductItemProperties = { product: ProductProjection }
+type ProductItemProps = { product: ProductProjection }
 
-export function ProductItem({ product }: ProductItemProperties): ReactElement {
+export function ProductItem({ product }: ProductItemProps): ReactElement {
   const navigate = useNavigate()
 
-  const name = product.name['en-US']
-  const description = product.description?.['en-US'] ?? name
+  const name = product.name[LANG]
+  const description = product.description?.[LANG] ?? name
   const image = product.masterVariant.images?.[0]?.url
   const price = product.masterVariant.prices?.[0]?.value?.centAmount ?? 0
   const discountPrice = product.masterVariant.prices?.[0].discounted?.value?.centAmount
@@ -26,22 +26,18 @@ export function ProductItem({ product }: ProductItemProperties): ReactElement {
 
   return (
     <Card
-      className="w-full m-0 max-w-2xs aspect-[3/4] hover:scale-105 hover:shadow-xl/30 transition duration-300 cursor-pointer hover:bg-stone-50"
+      className="w-full m-0 max-w-2xs aspect-[3/4] hover:scale-105 hover:shadow-xl/30 transition duration-300 hover:bg-stone-50 cursor-pointer"
       onClick={() => void navigateTo(product.id)}
     >
       <CardContent className="space-y-0 h-full flex flex-col justify-between gap-y-2 relative">
         {discountPrice !== undefined && <SaleBadge />}
-        <AspectRatio ratio={4 / 3} className="bg-white rounded-md">
-          <img src={image} alt={name} className="w-full h-full object-contain" />
-        </AspectRatio>
+        <ProductImage imageUrl={image} alt={name} />
         <hr />
         <CardTitle className="leading-normal line-clamp-1">{name}</CardTitle>
         <CardDescription className="flex-1 line-clamp-2">{description}</CardDescription>
         <div className="flex justify-between items-center">
           <ProductPrice startPrice={price} discountPrice={discountPrice} />
-          <Button variant="outline" size="icon">
-            <ShoppingCart size={16} />
-          </Button>
+          <AddToCartButton product={product} />
         </div>
       </CardContent>
     </Card>
diff --git a/app/pages/catalog/ProductList.test.tsx b/app/pages/catalog/ProductList.test.tsx
index aa07ae3..bf587cc 100644
--- a/app/pages/catalog/ProductList.test.tsx
+++ b/app/pages/catalog/ProductList.test.tsx
@@ -3,6 +3,7 @@ import { ProductList } from './ProductList'
 import { CATALOG_STATUS } from './hooks/useCatalogData'
 import { renderWithProviders } from '~/utils/test'
 import type { ProductProjection } from '@commercetools/platform-sdk'
+import { PRODUCT_LIST_ITEMS_PER_PAGE } from '~/api/namespaces/product'
 
 const mockProduct: ProductProjection = {
   id: '8fec3465-6f2a-490b-bdb5-b4179cd84ff3',
@@ -64,16 +65,11 @@ const mockProduct: ProductProjection = {
 const mockProducts = [mockProduct]
 
 describe('ProductList', () => {
-  it('when no products found', () => {
-    renderWithProviders(<ProductList products={[]} status={CATALOG_STATUS.READY} />)
-    expect(screen.getByText('We couldn’t find any products matching your search.')).toBeInTheDocument()
-  })
-
   it('display skeletons while loading products', () => {
     renderWithProviders(<ProductList products={[]} status={CATALOG_STATUS.LOADING} />)
 
-    const skeletons = document.querySelectorAll('[data-slot="skeleton"]')
-    expect(skeletons.length).toBe(8)
+    const skeletons = screen.queryAllByTestId('skeleton')
+    expect(skeletons.length).toBe(PRODUCT_LIST_ITEMS_PER_PAGE)
   })
 
   it('when products were loaded', () => {
diff --git a/app/pages/catalog/ProductList.tsx b/app/pages/catalog/ProductList.tsx
index a221454..56c6824 100644
--- a/app/pages/catalog/ProductList.tsx
+++ b/app/pages/catalog/ProductList.tsx
@@ -3,37 +3,21 @@ import { type ProductProjection } from '@commercetools/platform-sdk'
 import { Skeleton } from '~/components/ui/Skeleton'
 import { ProductItem } from './ProductItem'
 import { CATALOG_STATUS } from './hooks/useCatalogData'
-import { Sparkles } from 'lucide-react'
+import { PRODUCT_LIST_ITEMS_PER_PAGE } from '~/api/namespaces/product'
 
-// TODO: items per page
-const SKELETON_COUNT = 8
-
-type ProductListProperties = {
+type ProductListProps = {
   products: ProductProjection[]
   status: CATALOG_STATUS
 }
 
-export function ProductList({ products, status }: ProductListProperties): ReactElement {
+export function ProductList({ products, status }: ProductListProps): ReactElement {
   const isNotReady = status !== CATALOG_STATUS.READY
-  const isEmpty = !isNotReady && products.length === 0
-
-  if (isEmpty) {
-    // TODO: move to separate component
-    return (
-      <div className="w-full h-full flex items-center justify-center">
-        <div className="max-w-xs flex flex-col items-center justify-center gap-4 text-center">
-          <Sparkles size={60} className="text-sky-200" />
-          <p className="text-sm">We couldn’t find any products matching your search.</p>
-        </div>
-      </div>
-    )
-  }
 
   return (
     <div className="flex gap-3 flex-wrap px-2 pt-1 pb-3">
       {isNotReady
         ? // TODO: move to separate component
-          Array.from({ length: SKELETON_COUNT }).map((_, index) => (
+          Array.from({ length: PRODUCT_LIST_ITEMS_PER_PAGE }).map((_, index) => (
             <Skeleton className="w-2xs aspect-[3/4] mx-auto" key={index} />
           ))
         : products.map((product) => <ProductItem product={product} key={product.id} />)}
diff --git a/app/pages/catalog/SearchForm/SearchFomBody.tsx b/app/pages/catalog/SearchForm/SearchFormBody.tsx
similarity index 64%
rename from app/pages/catalog/SearchForm/SearchFomBody.tsx
rename to app/pages/catalog/SearchForm/SearchFormBody.tsx
index 7a86ec1..374f638 100644
--- a/app/pages/catalog/SearchForm/SearchFomBody.tsx
+++ b/app/pages/catalog/SearchForm/SearchFormBody.tsx
@@ -3,19 +3,23 @@ import { useForm } from 'react-hook-form'
 import { Search } from 'lucide-react'
 import { Input } from '~/components/ui/Input'
 import { Button } from '~/components/ui/Button'
-import { PRODUCTS_LIMIT } from '../FilterForm/FilterFormBody'
 import { type UseCatalogDataResult } from '../hooks/useCatalogData'
+import { PRODUCT_LIST_ITEMS_PER_PAGE } from '~/api/namespaces/product'
 
-type SearchFormBodyProperties = {
+type SearchFormBodyProps = {
   fetch: UseCatalogDataResult['fetchProducts']
+  setSearch: (search: string) => void
+  onSearch: () => void
 }
 
-export function SearchFormBody({ fetch }: SearchFormBodyProperties): ReactElement {
+export function SearchFormBody({ fetch, setSearch, onSearch }: SearchFormBodyProps): ReactElement {
   const { register, handleSubmit, getValues } = useForm<{ search: string }>()
 
-  function onSubmit(): void {
+  const onSubmit = (): Promise<void> => {
+    onSearch()
     const { search } = getValues()
-    void fetch({ limit: PRODUCTS_LIMIT }, [], [], search)
+    setSearch(search)
+    return fetch({ limit: PRODUCT_LIST_ITEMS_PER_PAGE }, [], [], search)
   }
 
   return (
@@ -23,7 +27,7 @@ export function SearchFormBody({ fetch }: SearchFormBodyProperties): ReactElemen
       <div className="flex w-full items-center gap-2">
         <Input
           type="text"
-          className="h-[40px] border-blue-200 shadow-sm"
+          className="h-[40px] border-neural-200 shadow-sm"
           placeholder="Search products..."
           {...register('search')}
         />
diff --git a/app/pages/catalog/hooks/useCatalogData.ts b/app/pages/catalog/hooks/useCatalogData.ts
index 1a16112..9e88d83 100644
--- a/app/pages/catalog/hooks/useCatalogData.ts
+++ b/app/pages/catalog/hooks/useCatalogData.ts
@@ -1,5 +1,6 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, type Dispatch, type SetStateAction } from 'react'
 import { useParams } from 'react-router'
+import { PRODUCT_LIST_ITEMS_PER_PAGE } from '~/api/namespaces/product'
 import { useCatalogCategoriesData, type UseCatalogCategoriesDataResult } from './useCatalogCategoriesData'
 import { useCatalogProductsData, type UseCatalogProductsDataResult } from './useCatalogProductsData'
 import { useCatalogFiltersData, type UseCatalogFiltersDataResult } from './useCatalogFiltersData'
@@ -11,25 +12,52 @@ export enum CATALOG_STATUS {
 }
 
 export type UseCatalogDataResult = {
+  categories: UseCatalogCategoriesDataResult['categories']
+  currentPage: number
   fetchProducts: UseCatalogProductsDataResult['fetchProducts']
   filters: UseCatalogFiltersDataResult['filters']
+  hasNoProducts: boolean
+  pagesCount: number
   products: UseCatalogProductsDataResult['products']
-  categories: UseCatalogCategoriesDataResult['categories']
+  resetCurrentPageAndSearchText: () => void
+  searchText: string
+  setCurrentPage: Dispatch<SetStateAction<number>>
+  setSearchText: Dispatch<SetStateAction<string>>
   status: CATALOG_STATUS
 }
 
 export function useCatalogData(): UseCatalogDataResult {
   const [status, setStatus] = useState<CATALOG_STATUS>(CATALOG_STATUS.LOADING)
-
+  const [currentPage, setCurrentPage] = useState<number>(1)
+  const [searchText, setSearchText] = useState<string>('')
   const { categoryId = '' } = useParams()
-
   const { categories, fetchCategories } = useCatalogCategoriesData({ setStatus })
-  const { products, fetchProducts } = useCatalogProductsData({ setStatus })
+  const { products, fetchProducts, total } = useCatalogProductsData({ setStatus })
   const { filters, fetchFilters } = useCatalogFiltersData({ setStatus })
+  const hasNoProducts = status === CATALOG_STATUS.READY && products.length === 0
+  const pagesCount = Math.ceil(total / PRODUCT_LIST_ITEMS_PER_PAGE)
+
+  const resetCurrentPageAndSearchText = (): void => {
+    setCurrentPage(1)
+    setSearchText('')
+  }
 
   useEffect(() => void Promise.all([fetchFilters(), fetchProducts(), fetchCategories()]), [])
 
   useEffect(() => void fetchProducts(), [categoryId])
 
-  return { products, filters, categories, status, fetchProducts }
+  return {
+    categories,
+    currentPage,
+    fetchProducts,
+    filters,
+    hasNoProducts,
+    pagesCount,
+    products,
+    resetCurrentPageAndSearchText,
+    searchText,
+    setCurrentPage,
+    setSearchText,
+    status
+  }
 }
diff --git a/app/pages/catalog/hooks/useCatalogProductsData.ts b/app/pages/catalog/hooks/useCatalogProductsData.ts
index e10aa84..f8db257 100644
--- a/app/pages/catalog/hooks/useCatalogProductsData.ts
+++ b/app/pages/catalog/hooks/useCatalogProductsData.ts
@@ -3,6 +3,7 @@ import { useParams } from 'react-router'
 import { type ProductProjection } from '@commercetools/platform-sdk'
 import { toast } from 'sonner'
 import {
+  PRODUCT_LIST_ITEMS_PER_PAGE,
   PRODUCT_LIST_DEFAULT_APPLIED_FILTERS,
   PRODUCT_LIST_DEFAULT_APPLIED_SORT,
   productApi,
@@ -20,6 +21,7 @@ export type UseCatalogProductsDataResult = {
     sort?: ProductListAppliedSort,
     searchText?: string
   ) => Promise<void>
+  total: number
 }
 
 export type ProductListAppliedPayload = {
@@ -46,6 +48,7 @@ export function useCatalogProductsData({
   setStatus: Dispatch<SetStateAction<CATALOG_STATUS>>
 }): UseCatalogProductsDataResult {
   const [products, setProducts] = useState<ProductProjection[]>([])
+  const [total, setTotal] = useState<number>(0)
   const { categoryId = '' } = useParams()
 
   const fetchProducts = async (
@@ -60,14 +63,14 @@ export function useCatalogProductsData({
 
     try {
       const response = await productApi.getProducts(
-        { ...parameters, limit: 100 },
+        { ...parameters, limit: PRODUCT_LIST_ITEMS_PER_PAGE },
         cache.filters,
         cache.sort,
         searchText,
         categoryId
       )
-
       setProducts(response.body.results)
+      setTotal(response.body.total ?? 0)
       setStatus(CATALOG_STATUS.READY)
     } catch (error) {
       setStatus(CATALOG_STATUS.ERROR)
@@ -76,5 +79,5 @@ export function useCatalogProductsData({
     }
   }
 
-  return { products, fetchProducts }
+  return { products, fetchProducts, total }
 }
diff --git a/app/pages/catalog/index.tsx b/app/pages/catalog/index.tsx
index 14573e0..2c8465d 100644
--- a/app/pages/catalog/index.tsx
+++ b/app/pages/catalog/index.tsx
@@ -1,26 +1,51 @@
 import { type ReactElement } from 'react'
 import { useTitle } from '~/hooks/useTitle'
+import { useFetchCart } from '~/hooks/useFetchCart'
+import { ProductApi } from '~/api/namespaces/product'
 import { Loading } from '~/components/Loading'
 import { ProductList } from './ProductList'
 import { FilterFormBody } from './FilterForm/FilterFormBody'
 import { useCatalogData } from './hooks/useCatalogData'
-import { SearchFormBody } from './SearchForm/SearchFomBody'
+import { SearchFormBody } from './SearchForm/SearchFormBody'
+import { NoProductsFound } from './NoProductsFound'
+import { PaginationControls } from './PaginationControls'
 
 export default function Catalog(): ReactElement {
   useTitle('Catalog')
+  useFetchCart()
+  const data = useCatalogData()
 
-  const { products, filters, status, categories, fetchProducts } = useCatalogData()
+  const handlePageChange = (page: number): void => {
+    data.setCurrentPage(page)
+    void data.fetchProducts(ProductApi.getPaginationQueryParameters(page), [], [], data.searchText)
+  }
 
-  if (filters.length === 0) {
+  if (data.filters.length === 0) {
     return <Loading />
   }
 
   return (
     <div className="flex h-full w-full">
-      <FilterFormBody filters={filters} categories={categories} fetch={fetchProducts} />
+      <FilterFormBody
+        filters={data.filters}
+        categories={data.categories}
+        fetch={data.fetchProducts}
+        onApply={data.resetCurrentPageAndSearchText}
+      />
       <div className="flex-grow">
-        <SearchFormBody fetch={fetchProducts} />
-        <ProductList products={products} status={status} />
+        <SearchFormBody
+          fetch={data.fetchProducts}
+          setSearch={data.setSearchText}
+          onSearch={() => data.setCurrentPage(1)}
+        />
+        {data.hasNoProducts ? (
+          <NoProductsFound />
+        ) : (
+          <div>
+            <ProductList products={data.products} status={data.status} />
+            <PaginationControls page={data.currentPage} totalPage={data.pagesCount} onPageChange={handlePageChange} />
+          </div>
+        )}
       </div>
     </div>
   )
diff --git a/app/pages/home/Discounts.tsx b/app/pages/home/Discounts.tsx
new file mode 100644
index 0000000..9e5b99e
--- /dev/null
+++ b/app/pages/home/Discounts.tsx
@@ -0,0 +1,33 @@
+import { type ReactElement } from 'react'
+import { useDiscountsData } from './hooks/useDiscountsData'
+import { Card, CardContent, CardDescription, CardTitle } from '~/components/ui/Card'
+import { H2 } from '~/components/ui/typography'
+import { LANG } from '~/api/client'
+
+export function Discounts(): ReactElement {
+  const { discounts } = useDiscountsData()
+
+  if (discounts.length === 0) {
+    return <></>
+  }
+
+  return (
+    <div className="mt-6 mx-3">
+      <H2 className="text-center mb-6">Discount codes</H2>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        {discounts.map(({ id, code, description }) => (
+          <Card key={id} className="flex-grow w-full max-w-xs p-2 border-black p-2">
+            <CardContent className="p-2">
+              <CardTitle className="mb-2 animate-bounce bg-gradient-to-r from-pink-500 to-violet-500 bg-clip-text text-transparent text-center">
+                {code}
+              </CardTitle>
+              {description !== undefined && (
+                <CardDescription className="text-center text-violet-950">{description[LANG]}</CardDescription>
+              )}
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/app/pages/home/Welcome.tsx b/app/pages/home/Welcome.tsx
new file mode 100644
index 0000000..4ea6431
--- /dev/null
+++ b/app/pages/home/Welcome.tsx
@@ -0,0 +1,33 @@
+import { type ReactElement } from 'react'
+import { NavLink } from 'react-router'
+import { H2, P } from '~/components/ui/typography'
+import { Button } from '~/components/ui/Button'
+import { useAppSelector } from '~/store/hooks'
+import { selectIsAuth } from '~/store/auth'
+import { ROUTES } from '~/routes'
+
+export function Welcome(): ReactElement {
+  const isAuth = useAppSelector(selectIsAuth)
+  const userName = useAppSelector((state) => state.auth.customer?.email ?? '')
+  const greeting = isAuth ? `Welcome back, ${userName}!` : 'Welcome to our store!'
+
+  return (
+    <div className="text-center">
+      <H2>{greeting}</H2>
+
+      <P className="mb-6 text-gray-600">Discover products, manage your profile, and enjoy smooth shopping!</P>
+
+      <div className="flex gap-4 flex-wrap justify-center">
+        <Button variant="neutral" asChild>
+          <NavLink to={ROUTES.CATALOG}>Browse Catalog</NavLink>
+        </Button>
+
+        {!isAuth && (
+          <Button variant="gray" asChild>
+            <NavLink to={ROUTES.LOGIN}>Login</NavLink>
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/app/pages/home/hooks/useDiscountsData.tsx b/app/pages/home/hooks/useDiscountsData.tsx
new file mode 100644
index 0000000..3765d9b
--- /dev/null
+++ b/app/pages/home/hooks/useDiscountsData.tsx
@@ -0,0 +1,38 @@
+import { type DiscountCode } from '@commercetools/platform-sdk'
+import { useState, useEffect } from 'react'
+import { toast } from 'sonner'
+import { cartApi } from '~/api/namespaces/cart'
+
+export enum DISCOUNTS_STATUS {
+  LOADING = 'LOADING',
+  READY = 'READY',
+  ERROR = 'ERROR'
+}
+
+type UseDiscountsDataResult = {
+  discounts: DiscountCode[]
+  status: DISCOUNTS_STATUS
+}
+
+export function useDiscountsData(): UseDiscountsDataResult {
+  const [discounts, setDiscounts] = useState<DiscountCode[]>([])
+  const [status, setStatus] = useState<DISCOUNTS_STATUS>(DISCOUNTS_STATUS.LOADING)
+
+  useEffect(() => {
+    async function fetchDiscountsData(): Promise<void> {
+      setStatus(DISCOUNTS_STATUS.LOADING)
+      try {
+        const response = await cartApi.getDiscountCodes()
+        setDiscounts(response.body.results)
+        setStatus(DISCOUNTS_STATUS.READY)
+      } catch (error) {
+        setStatus(DISCOUNTS_STATUS.ERROR)
+        toast(error instanceof Error ? error.message : 'Unknown error while getting discounts data')
+      }
+    }
+
+    void fetchDiscountsData()
+  }, [])
+
+  return { discounts, status }
+}
diff --git a/app/pages/home/index.tsx b/app/pages/home/index.tsx
index 32e193a..1d9df8b 100644
--- a/app/pages/home/index.tsx
+++ b/app/pages/home/index.tsx
@@ -1,36 +1,15 @@
 import { type ReactElement } from 'react'
 import { useTitle } from '~/hooks/useTitle'
-import { NavLink } from 'react-router'
-import { H2, P } from '~/components/ui/typography'
-import { Button } from '~/components/ui/Button'
-import { useAppSelector } from '~/store/hooks'
-import { selectIsAuth } from '~/store/auth'
-import { ROUTES } from '~/routes'
+import { Welcome } from './Welcome'
+import { Discounts } from './Discounts'
 
 export default function Home(): ReactElement {
   useTitle('eCommerce')
 
-  const isAuth = useAppSelector(selectIsAuth)
-  const userName = useAppSelector((state) => state.auth.customer?.email ?? '')
-  const greeting = isAuth ? `Welcome back, ${userName}!` : 'Welcome to our store!'
-
   return (
-    <div className="text-center">
-      <H2>{greeting}</H2>
-
-      <P className="mb-6 text-gray-600">Discover products, manage your profile, and enjoy smooth shopping!</P>
-
-      <div className="flex gap-4 flex-wrap justify-center">
-        <Button variant="blue" asChild>
-          <NavLink to={ROUTES.CATALOG}>Browse Catalog</NavLink>
-        </Button>
-
-        {!isAuth && (
-          <Button variant="gray" asChild>
-            <NavLink to={ROUTES.LOGIN}>Login</NavLink>
-          </Button>
-        )}
-      </div>
+    <div>
+      <Welcome />
+      <Discounts />
     </div>
   )
 }
diff --git a/app/pages/product/ProductDetail/CartToggleButton.tsx b/app/pages/product/ProductDetail/CartToggleButton.tsx
new file mode 100644
index 0000000..b7e0342
--- /dev/null
+++ b/app/pages/product/ProductDetail/CartToggleButton.tsx
@@ -0,0 +1,50 @@
+import { type ReactElement, useState, type MouseEvent } from 'react'
+import { type ProductProjection } from '@commercetools/platform-sdk'
+import { useAppDispatch, useAppSelector } from '~/store/hooks'
+import { addProduct, removeProduct, selectIsInCart } from '~/store/cart'
+import { Button } from '~/components/ui/Button'
+import { toast } from 'sonner'
+import { P } from '~/components/ui/typography'
+
+type CartToggleButtonProps = { product: ProductProjection }
+
+export function CartToggleButton({ product }: CartToggleButtonProps): ReactElement {
+  const dispatch = useAppDispatch()
+  const isInCart = useAppSelector(selectIsInCart(product))
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | undefined>()
+
+  const handleClick = async (event: MouseEvent<HTMLButtonElement>): Promise<void> => {
+    event.stopPropagation()
+    setIsLoading(true)
+    setError(undefined)
+    try {
+      if (isInCart) {
+        await dispatch(removeProduct({ productId: product.id, quantity: 1 })).unwrap()
+        toast('❌ Removed from Cart')
+      } else {
+        await dispatch(addProduct({ productId: product.id, quantity: 1 })).unwrap()
+        toast('🛒 Added to Cart')
+      }
+    } catch (error) {
+      setError('An error occurred. Please try again.')
+      toast(error instanceof Error ? error.message : '❌ Failed to update the cart')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <Button
+        variant={isInCart ? 'secondary' : 'default'}
+        disabled={isLoading}
+        onClick={(event) => void handleClick(event)}
+        className="w-[220px] h-10 text-base"
+      >
+        {isLoading ? 'Loading...' : isInCart ? 'Remove from Cart' : 'Add to Cart'}
+      </Button>
+      {error && <P className="text-red-500 mt-2 text-sm">{error}</P>}
+    </>
+  )
+}
diff --git a/app/pages/product/ProductDetail/ImageSwiper.tsx b/app/pages/product/ProductDetail/ImageSwiper.tsx
index 47b55d8..87bf623 100644
--- a/app/pages/product/ProductDetail/ImageSwiper.tsx
+++ b/app/pages/product/ProductDetail/ImageSwiper.tsx
@@ -7,7 +7,7 @@ import 'swiper/css'
 import 'swiper/css/navigation'
 import 'swiper/css/pagination'
 
-type ImageSwiperProperties = {
+type ImageSwiperProps = {
   images?: Image[]
   onClick?: (index: number) => void
   initialSlide?: number
@@ -21,7 +21,7 @@ export function ImageSwiper({
   initialSlide = 0,
   swiperClassName = '',
   showPagination = true
-}: ImageSwiperProperties): ReactElement {
+}: ImageSwiperProps): ReactElement {
   return (
     <Swiper
       spaceBetween={50}
diff --git a/app/pages/product/ProductDetail/ProductBreadcrumbs.test.tsx b/app/pages/product/ProductDetail/ProductBreadcrumbs.test.tsx
index 727874b..5900345 100644
--- a/app/pages/product/ProductDetail/ProductBreadcrumbs.test.tsx
+++ b/app/pages/product/ProductDetail/ProductBreadcrumbs.test.tsx
@@ -13,17 +13,10 @@ describe('ProductBreadcrumbs', () => {
     ]
 
     renderWithProviders(<ProductBreadcrumbs breadcrumbs={breadcrumbs} />)
-
-    expect(screen.getByText('Case')).toBeInTheDocument()
-    expect(screen.getByText('Table')).toBeInTheDocument()
-
-    expect(screen.getByText('Case').closest('a')).toHaveAttribute(
-      'href',
-      generatePath(ROUTES.CATEGORY, { categoryId: 'case' })
-    )
-    expect(screen.getByText('Table').closest('a')).toHaveAttribute(
-      'href',
-      generatePath(ROUTES.CATEGORY, { categoryId: 'table' })
-    )
+    for (const { id, label } of breadcrumbs) {
+      const link = screen.getByText(label)
+      expect(link).toBeInTheDocument()
+      expect(link.closest('a')).toHaveAttribute('href', generatePath(ROUTES.CATEGORY, { categoryId: id }))
+    }
   })
 })
diff --git a/app/pages/product/ProductDetail/ProductDetailBody.tsx b/app/pages/product/ProductDetail/ProductDetailBody.tsx
index e322867..09b73f6 100644
--- a/app/pages/product/ProductDetail/ProductDetailBody.tsx
+++ b/app/pages/product/ProductDetail/ProductDetailBody.tsx
@@ -5,27 +5,7 @@ import { ProductImages } from './ProductImages'
 import { ProductInfo } from './ProductInfo'
 import { ProductBreadcrumbs } from './ProductBreadcrumbs'
 import { type ProductListCategory } from '~/api/namespaces/product'
-
-function getBreadcrumbs(
-  categories: ProductListCategory[],
-  categoryId: string,
-  breadcrumbs: ProductListCategory[] = []
-): ProductListCategory[] {
-  for (const category of categories) {
-    const newBreadcrumbs = [...breadcrumbs, category]
-
-    if (category.id === categoryId) {
-      return newBreadcrumbs
-    }
-
-    if (category.subCategories !== undefined && category.subCategories.length > 0) {
-      const result = getBreadcrumbs(category.subCategories, categoryId, newBreadcrumbs)
-      if (result) return result
-    }
-  }
-
-  return []
-}
+import { useProductInfo } from '../hooks/useProductInfo'
 
 export function ProductDetailBody({
   categories,
@@ -38,13 +18,7 @@ export function ProductDetailBody({
     throw new Error('Product not found')
   }
 
-  const name = product.name
-  const description = product.description ?? name
-  const price = product.masterVariant.prices?.[0]?.value?.centAmount ?? 0
-  const images = product.masterVariant.images ?? []
-  const discount = product.masterVariant.prices?.[0].discounted?.value?.centAmount ?? undefined
-  const breadcrumbs =
-    product.categories?.[0]?.id === undefined ? [] : getBreadcrumbs(categories, product.categories[0].id)
+  const { breadcrumbs, images } = useProductInfo(product, categories)
 
   return (
     <div className="w-full flex flex-col flex-grow items-start gap-10 p-6">
@@ -52,7 +26,7 @@ export function ProductDetailBody({
       <Card className="w-full flex-grow rounded-xl border border-muted bg-card shadow-sm overflow-hidden">
         <CardContent className="flex flex-wrap items-start p-0">
           <ProductImages images={images} />
-          <ProductInfo name={name} description={description} price={price} discount={discount} />
+          <ProductInfo product={product} />
         </CardContent>
       </Card>
     </div>
diff --git a/app/pages/product/ProductDetail/ProductImages.tsx b/app/pages/product/ProductDetail/ProductImages.tsx
index 4f74853..6805117 100644
--- a/app/pages/product/ProductDetail/ProductImages.tsx
+++ b/app/pages/product/ProductDetail/ProductImages.tsx
@@ -15,7 +15,7 @@ export function ProductImages({ images = [] }: { images?: Image[] }): ReactEleme
           <ImageSwiper
             images={images}
             onClick={setStartIndex}
-            swiperClassName="w-[300px] max-w-full sm:w-[500px] rounded-lg"
+            swiperClassName="w-[90vw] max-w-[500px] rounded-lg"
             showPagination
           />
         </div>
diff --git a/app/pages/product/ProductDetail/ProductInfo.test.tsx b/app/pages/product/ProductDetail/ProductInfo.test.tsx
index 248695f..f0e0779 100644
--- a/app/pages/product/ProductDetail/ProductInfo.test.tsx
+++ b/app/pages/product/ProductDetail/ProductInfo.test.tsx
@@ -1,16 +1,49 @@
-import { type LocalizedString } from '@commercetools/platform-sdk'
+import { type ProductProjection } from '@commercetools/platform-sdk'
 import { screen } from '@testing-library/react'
 import { renderWithProviders } from '~/utils/test'
 import { ProductInfo } from './ProductInfo'
-
+const mockProductProjection: ProductProjection = {
+  id: 'product-id-1',
+  version: 1,
+  createdAt: new Date().toISOString(),
+  lastModifiedAt: new Date().toISOString(),
+  productType: { typeId: 'product-type', id: 'type-id' },
+  name: { 'en-US': 'Test Product' },
+  description: {
+    'en-US': 'Test description'
+  },
+  slug: { 'en-US': 'mock-product' },
+  masterVariant: {
+    id: 1,
+    prices: [
+      {
+        id: '1',
+        value: {
+          type: 'centPrecision',
+          currencyCode: 'USD',
+          centAmount: 1000,
+          fractionDigits: 2
+        },
+        key: 'price-usd'
+      }
+    ],
+    images: [
+      {
+        url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
+        dimensions: { w: 500, h: 500 }
+      }
+    ]
+  },
+  variants: [],
+  hasStagedChanges: false,
+  published: true,
+  categories: []
+}
 describe('ProductInfo', () => {
-  const name: LocalizedString = { 'en-US': 'Test Product' }
-  const description: LocalizedString = { 'en-US': 'This is a great product.' }
-
   it('renders product name and description', () => {
-    renderWithProviders(<ProductInfo name={name} description={description} price={100} />)
+    renderWithProviders(<ProductInfo product={mockProductProjection} />)
 
-    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Test Product')
-    expect(screen.getByText('This is a great product.')).toBeInTheDocument()
+    expect(screen.getByText('Test Product')).toBeInTheDocument()
+    expect(screen.getByText((text) => text.includes('Test description'))).toBeInTheDocument()
   })
 })
diff --git a/app/pages/product/ProductDetail/ProductInfo.tsx b/app/pages/product/ProductDetail/ProductInfo.tsx
index 3c3faca..5f559c3 100644
--- a/app/pages/product/ProductDetail/ProductInfo.tsx
+++ b/app/pages/product/ProductDetail/ProductInfo.tsx
@@ -1,28 +1,21 @@
-import { type LocalizedString } from '@commercetools/platform-sdk'
+import { type ProductProjection } from '@commercetools/platform-sdk'
 import { type ReactElement } from 'react'
 import { H1, H3, P } from '~/components/ui/typography'
 import { ProductPrice } from '~/components/product/ProductPrice'
+import { CartToggleButton } from './CartToggleButton'
+import { useProductInfo } from '../hooks/useProductInfo'
+import { LANG } from '~/api/client'
 
-const LANG = 'en-US'
-
-export function ProductInfo({
-  name,
-  description,
-  price,
-  discount
-}: {
-  name: LocalizedString
-  description: LocalizedString
-  price: number
-  discount?: number
-}): ReactElement {
+export function ProductInfo({ product }: { product: ProductProjection }): ReactElement {
+  const { name, description, price, discount } = useProductInfo(product)
   return (
     <div className="flex-1 flex flex-col justify-start gap-4 text-left mx-6">
       <H1 className="text-2xl font-semibold">{name[LANG]}</H1>
-      <P className="text-muted-foreground">{description[LANG]}</P>
+      {description && <P className="text-muted-foreground">{description[LANG]}</P>}
       <H3>
         <ProductPrice startPrice={price} discountPrice={discount} />
       </H3>
+      <CartToggleButton product={product} />
     </div>
   )
 }
diff --git a/app/pages/product/hooks/useProductInfo.tsx b/app/pages/product/hooks/useProductInfo.tsx
new file mode 100644
index 0000000..e273810
--- /dev/null
+++ b/app/pages/product/hooks/useProductInfo.tsx
@@ -0,0 +1,52 @@
+import { type ProductProjection } from '@commercetools/platform-sdk'
+import { type ProductListCategory } from '~/api/namespaces/product'
+
+type ProductInfoResult = {
+  name: ProductProjection['name']
+  description: ProductProjection['description'] | ProductProjection['name']
+  price: number
+  discount?: number
+  images: NonNullable<ProductProjection['masterVariant']['images']>
+  breadcrumbs: ProductListCategory[]
+}
+
+export function getBreadcrumbs(
+  categories: ProductListCategory[],
+  categoryId: string,
+  breadcrumbs: ProductListCategory[] = []
+): ProductListCategory[] {
+  for (const category of categories) {
+    const newBreadcrumbs = [...breadcrumbs, category]
+
+    if (category.id === categoryId) {
+      return newBreadcrumbs
+    }
+
+    if (category.subCategories !== undefined && category.subCategories.length > 0) {
+      const result = getBreadcrumbs(category.subCategories, categoryId, newBreadcrumbs)
+      if (result) return result
+    }
+  }
+
+  return []
+}
+
+export function useProductInfo(product: ProductProjection, categories?: ProductListCategory[]): ProductInfoResult {
+  const name = product.name
+  const description = product.description ?? name
+  const price = product.masterVariant.prices?.[0]?.value?.centAmount ?? 0
+  const discount = product.masterVariant.prices?.[0]?.discounted?.value?.centAmount
+  const images = product.masterVariant.images ?? []
+
+  const breadcrumbs =
+    categories && product.categories?.[0]?.id ? getBreadcrumbs(categories, product.categories[0].id) : []
+
+  return {
+    name,
+    description,
+    price,
+    discount,
+    images,
+    breadcrumbs
+  }
+}
diff --git a/app/pages/product/index.tsx b/app/pages/product/index.tsx
index a841936..cbf0d00 100644
--- a/app/pages/product/index.tsx
+++ b/app/pages/product/index.tsx
@@ -1,12 +1,13 @@
 import { type ReactElement } from 'react'
 import { useTitle } from '~/hooks/useTitle'
+import { useFetchCart } from '~/hooks/useFetchCart'
 import { Loading } from '~/components/Loading'
 import { ProductDetailBody } from './ProductDetail/ProductDetailBody'
 import { useProductData, PRODUCT_STATUS } from './hooks/useProductData'
 
 export default function Product(): ReactElement {
   useTitle('Product')
-
+  useFetchCart()
   const { categories, product, status } = useProductData()
 
   if (status !== PRODUCT_STATUS.READY) {
diff --git a/app/pages/profile/UserDetail/EditableSwitch.tsx b/app/pages/profile/UserDetail/EditableSwitch.tsx
index 49ec5e7..d6832f3 100644
--- a/app/pages/profile/UserDetail/EditableSwitch.tsx
+++ b/app/pages/profile/UserDetail/EditableSwitch.tsx
@@ -2,9 +2,9 @@ import { type ReactElement } from 'react'
 import { Switch } from '~/components/ui/Switch'
 import { Label } from '~/components/ui/Label'
 
-type EditableSwitchProperties = { value: boolean; onChange: (value: boolean) => void }
+type EditableSwitchProps = { value: boolean; onChange: (value: boolean) => void }
 
-export function EditableSwitch({ value, onChange }: EditableSwitchProperties): ReactElement {
+export function EditableSwitch({ value, onChange }: EditableSwitchProps): ReactElement {
   return (
     <div className="flex items-center gap-2 py-3">
       <Switch checked={value} onCheckedChange={onChange} id="editable-switch" />
diff --git a/app/pages/profile/UserDetail/UserAddresses.tsx b/app/pages/profile/UserDetail/UserAddresses.tsx
index b17d998..8023b37 100644
--- a/app/pages/profile/UserDetail/UserAddresses.tsx
+++ b/app/pages/profile/UserDetail/UserAddresses.tsx
@@ -5,9 +5,9 @@ import { UserAddressFormBody } from './UserDetailEdit/UseAddressForm/UserAddress
 import { AddUserAddressFormBody } from './UserDetailEdit/UseAddressForm/AddUserAddressFormBody'
 import { useAppSelector } from '~/store/hooks'
 
-type UserAddressesProperties = { isEdit: boolean }
+type UserAddressesProps = { isEdit: boolean }
 
-export const UserAddresses = ({ isEdit }: UserAddressesProperties): ReactElement => {
+export const UserAddresses = ({ isEdit }: UserAddressesProps): ReactElement => {
   const addresses = useAppSelector((state) => state.auth.customer?.addresses ?? [])
   const defaultBillingAddressId = useAppSelector((state) => state.auth.customer?.defaultBillingAddressId ?? '')
   const defaultShippingAddressId = useAppSelector((state) => state.auth.customer?.defaultShippingAddressId ?? '')
@@ -20,7 +20,7 @@ export const UserAddresses = ({ isEdit }: UserAddressesProperties): ReactElement
         </CardHeader>
         <CardContent className="divide-y space-y-4">
           {addresses.map((address, index) => {
-            const commonProperties = {
+            const commonProps = {
               address,
               defaultBillingAddressId,
               defaultShippingAddressId,
@@ -28,10 +28,10 @@ export const UserAddresses = ({ isEdit }: UserAddressesProperties): ReactElement
             }
 
             if (isEdit) {
-              return <UserAddressFormBody {...commonProperties} />
+              return <UserAddressFormBody {...commonProps} />
             }
 
-            return <UserAddress {...commonProperties} />
+            return <UserAddress {...commonProps} />
           })}
         </CardContent>
       </Card>
diff --git a/app/pages/profile/UserDetail/UserDetailEdit/UseAddressForm/UserAddressFormBody.tsx b/app/pages/profile/UserDetail/UserDetailEdit/UseAddressForm/UserAddressFormBody.tsx
index b9b0126..a114be0 100644
--- a/app/pages/profile/UserDetail/UserDetailEdit/UseAddressForm/UserAddressFormBody.tsx
+++ b/app/pages/profile/UserDetail/UserDetailEdit/UseAddressForm/UserAddressFormBody.tsx
@@ -13,22 +13,22 @@ import { useRemoveAddress } from '../../../hooks/useRemoveAddress'
 import { useSetBillingAddress } from '../../../hooks/useSetBillingAddress'
 import { useSetShippingAddress } from '../../../hooks/useSetShippingAddress'
 
-type UserAddressFormBodyProviderProperties = {
+type UserAddressFormBodyProviderProps = {
   address: Address
   defaultBillingAddressId: string
   defaultShippingAddressId: string
   form: FormType<SchemaType>
 }
 
-type UserAddressFormBodyProperties = {
+type UserAddressFormBodyProps = {
   address: Address
   defaultBillingAddressId: string
   defaultShippingAddressId: string
 }
 
-const UserAddressFormBodyProvider = (properties: UserAddressFormBodyProviderProperties): ReactElement => {
-  const isBilling = properties.address.id === properties.defaultBillingAddressId
-  const isShipping = properties.address.id === properties.defaultShippingAddressId
+const UserAddressFormBodyProvider = (props: UserAddressFormBodyProviderProps): ReactElement => {
+  const isBilling = props.address.id === props.defaultBillingAddressId
+  const isShipping = props.address.id === props.defaultShippingAddressId
   const { status: changeAddressStatus, changeAddress } = useChangeAddress()
   const { removeAddress } = useRemoveAddress()
   const { setBillingAddress } = useSetBillingAddress()
@@ -36,7 +36,7 @@ const UserAddressFormBodyProvider = (properties: UserAddressFormBodyProviderProp
 
   const handleChangeAddress = (payload: z.infer<typeof schema>): Promise<void> =>
     changeAddress({
-      ...properties.address,
+      ...props.address,
       city: payload.city,
       country: payload.country,
       firstName: payload.firstName,
@@ -50,14 +50,14 @@ const UserAddressFormBodyProvider = (properties: UserAddressFormBodyProviderProp
       <div className="flex gap-2 pb-2">
         {isBilling && <Badge>Default billing</Badge>} {isShipping && <Badge>Default shipping</Badge>}
       </div>
-      <Form {...properties.form}>
-        <form onSubmit={(event) => void properties.form.handleSubmit(handleChangeAddress)(event)} className="space-y-6">
+      <Form {...props.form}>
+        <form onSubmit={(event) => void props.form.handleSubmit(handleChangeAddress)(event)} className="space-y-6">
           <UserAddressFormFields
-            form={properties.form}
+            form={props.form}
             status={changeAddressStatus}
-            onRemove={() => removeAddress(properties.address.id)}
-            onSetAsBilling={() => setBillingAddress(properties.address.id)}
-            onSetAsShipping={() => setShippingAddress(properties.address.id)}
+            onRemove={() => removeAddress(props.address.id)}
+            onSetAsBilling={() => setBillingAddress(props.address.id)}
+            onSetAsShipping={() => setShippingAddress(props.address.id)}
           />
         </form>
       </Form>
@@ -69,7 +69,7 @@ export const UserAddressFormBody = ({
   address,
   defaultBillingAddressId,
   defaultShippingAddressId
-}: UserAddressFormBodyProperties): ReactElement => {
+}: UserAddressFormBodyProps): ReactElement => {
   const form = useForm<z.infer<typeof schema>>({
     resolver: zodResolver(schema),
     mode: 'onChange',
diff --git a/app/pages/profile/UserDetail/UserDetailEdit/UseAddressForm/UserAddressFormFields.tsx b/app/pages/profile/UserDetail/UserDetailEdit/UseAddressForm/UserAddressFormFields.tsx
index 377d695..10a935e 100644
--- a/app/pages/profile/UserDetail/UserDetailEdit/UseAddressForm/UserAddressFormFields.tsx
+++ b/app/pages/profile/UserDetail/UserDetailEdit/UseAddressForm/UserAddressFormFields.tsx
@@ -11,7 +11,7 @@ import { type FormType } from '~/utils/form'
 import { type SchemaType } from './schema'
 import { ADDRESS_ACTION_STATUS } from '~/pages/profile/UserDetail/status'
 
-type UserAddressFormFieldsProperties = {
+type UserAddressFormFieldsProps = {
   form: FormType<SchemaType>
   isAdd?: boolean
   onRemove?: () => Promise<void> | void
@@ -29,7 +29,7 @@ export const UserAddressFormFields = ({
   onSetAsShipping = (): void => {},
   status,
   submitText = 'Save'
-}: UserAddressFormFieldsProperties): ReactElement => {
+}: UserAddressFormFieldsProps): ReactElement => {
   return (
     <fieldset disabled={status === ADDRESS_ACTION_STATUS.LOADING}>
       <CardContent className="px-0">
diff --git a/app/pages/profile/UserDetail/UserDetailEdit/UserInfoForm/UserInfoFormFields.tsx b/app/pages/profile/UserDetail/UserDetailEdit/UserInfoForm/UserInfoFormFields.tsx
index c3272da..ce1c174 100644
--- a/app/pages/profile/UserDetail/UserDetailEdit/UserInfoForm/UserInfoFormFields.tsx
+++ b/app/pages/profile/UserDetail/UserDetailEdit/UserInfoForm/UserInfoFormFields.tsx
@@ -9,12 +9,12 @@ import { CHANGE_INFO_STATUS } from '../../../hooks/useChangeInfo'
 import { type FormType } from '~/utils/form'
 import { type SchemaType } from './schema'
 
-type UserInfoFormFieldsProperties = {
+type UserInfoFormFieldsProps = {
   form: FormType<SchemaType>
   status: CHANGE_INFO_STATUS
 }
 
-export const UserInfoFormFields = ({ form, status }: UserInfoFormFieldsProperties): ReactElement => {
+export const UserInfoFormFields = ({ form, status }: UserInfoFormFieldsProps): ReactElement => {
   return (
     <fieldset disabled={status === CHANGE_INFO_STATUS.LOADING}>
       <CardContent>
diff --git a/app/pages/profile/UserDetail/UserDetailView/UserAddress.tsx b/app/pages/profile/UserDetail/UserDetailView/UserAddress.tsx
index 9e70960..1ffe6c5 100644
--- a/app/pages/profile/UserDetail/UserDetailView/UserAddress.tsx
+++ b/app/pages/profile/UserDetail/UserDetailView/UserAddress.tsx
@@ -4,15 +4,15 @@ import { countries } from '~/utils/countries'
 import { Badge } from '~/components/ui/Badge'
 import { UserAddressField } from './UserAddressField'
 
-type UserAddressProperties = {
+type UserAddressProps = {
   address: Address
   defaultBillingAddressId: string
   defaultShippingAddressId: string
 }
 
-export const UserAddress = (properties: UserAddressProperties): ReactElement => {
-  const isBilling = properties.address.id === properties.defaultBillingAddressId
-  const isShipping = properties.address.id === properties.defaultShippingAddressId
+export const UserAddress = (props: UserAddressProps): ReactElement => {
+  const isBilling = props.address.id === props.defaultBillingAddressId
+  const isShipping = props.address.id === props.defaultShippingAddressId
 
   return (
     <div>
@@ -22,12 +22,12 @@ export const UserAddress = (properties: UserAddressProperties): ReactElement =>
       </div>
       <div className="grid gap-4 md:grid-cols-2 items-start">
         {[
-          { label: 'First Name', value: properties.address.firstName },
-          { label: 'Last Name', value: properties.address.lastName },
-          { label: 'Country', value: countries[properties.address.country] },
-          { label: 'City', value: properties.address.city },
-          { label: 'Street name', value: properties.address.streetName },
-          { label: 'Postal code', value: properties.address.postalCode }
+          { label: 'First Name', value: props.address.firstName },
+          { label: 'Last Name', value: props.address.lastName },
+          { label: 'Country', value: countries[props.address.country] },
+          { label: 'City', value: props.address.city },
+          { label: 'Street name', value: props.address.streetName },
+          { label: 'Postal code', value: props.address.postalCode }
         ].map((field) => (
           <UserAddressField label={field.label} value={field.value} key={field.label} />
         ))}
diff --git a/app/pages/profile/UserDetail/UserDetailView/UserAddressField.tsx b/app/pages/profile/UserDetail/UserDetailView/UserAddressField.tsx
index 5d05dc3..e3a26db 100644
--- a/app/pages/profile/UserDetail/UserDetailView/UserAddressField.tsx
+++ b/app/pages/profile/UserDetail/UserDetailView/UserAddressField.tsx
@@ -1,9 +1,9 @@
 import { type ReactElement } from 'react'
 import { Label } from '~/components/ui/Label'
 
-type UserAddressFieldProperties = { label: string; value: string | undefined }
+type UserAddressFieldProps = { label: string; value: string | undefined }
 
-export const UserAddressField = ({ label, value }: UserAddressFieldProperties): ReactElement => {
+export const UserAddressField = ({ label, value }: UserAddressFieldProps): ReactElement => {
   return (
     <div className="flex flex-col gap-2">
       <Label>{label}</Label>
diff --git a/app/pages/profile/UserDetail/UserDetailView/UserInfoField.tsx b/app/pages/profile/UserDetail/UserDetailView/UserInfoField.tsx
index a497ecf..dee3052 100644
--- a/app/pages/profile/UserDetail/UserDetailView/UserInfoField.tsx
+++ b/app/pages/profile/UserDetail/UserDetailView/UserInfoField.tsx
@@ -1,9 +1,9 @@
 import { type ReactElement } from 'react'
 import { Label } from '~/components/ui/Label'
 
-type UserInfoFieldProperties = { label: string; value: string | undefined }
+type UserInfoFieldProps = { label: string; value: string | undefined }
 
-export const UserInfoField = ({ label, value }: UserInfoFieldProperties): ReactElement => {
+export const UserInfoField = ({ label, value }: UserInfoFieldProps): ReactElement => {
   return (
     <div className="flex flex-col gap-2">
       <Label>{label}</Label>
diff --git a/app/root.tsx b/app/root.tsx
index ff9b4bc..620875c 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -7,13 +7,19 @@ import { App } from '~/app'
 document.addEventListener('DOMContentLoaded', () => {
   const element = document.querySelector<HTMLDivElement>('#app')
 
+  const isDevelopment = import.meta.env.MODE === 'development'
+
   if (element !== null) {
     createRoot(element).render(
-      <StrictMode>
-        <Provider store={store}>
+      <Provider store={store}>
+        {isDevelopment ? (
           <App />
-        </Provider>
-      </StrictMode>
+        ) : (
+          <StrictMode>
+            <App />
+          </StrictMode>
+        )}
+      </Provider>
     )
   }
 })
diff --git a/app/store/auth/index.ts b/app/store/auth/index.ts
index 5de2cf6..d0aeee5 100644
--- a/app/store/auth/index.ts
+++ b/app/store/auth/index.ts
@@ -1,4 +1,4 @@
-import { createSelector } from '@reduxjs/toolkit'
+import { createSelector, type Selector } from '@reduxjs/toolkit'
 import { type RootState } from '~/store/types'
 import { createAppSlice } from '~/store/hooks'
 import { AUTH_STATUS, type AuthState } from '~/store/auth/types'
@@ -35,9 +35,12 @@ const auth = createAppSlice({
   })
 })
 
-const selectAuthSlice = (state: RootState): AuthState => state.auth
+const selectAuthSlice: Selector<RootState, AuthState> = (state: RootState): AuthState => state.auth
 
-export const selectIsAuth = createSelector([selectAuthSlice], (auth) => auth.customer !== undefined)
+export const selectIsAuth: Selector<RootState, boolean> = createSelector(
+  [selectAuthSlice],
+  (auth) => auth.customer !== undefined
+)
 
 export const { signIn, signUp, logOut, checkAuth, resetAuthError, setCustomer } = auth.actions
 export default auth.reducer
diff --git a/app/store/cart/index.ts b/app/store/cart/index.ts
index d4a6958..208af7d 100644
--- a/app/store/cart/index.ts
+++ b/app/store/cart/index.ts
@@ -1,22 +1,52 @@
-import { type PayloadAction } from '@reduxjs/toolkit'
+import { createSelector, type Selector } from '@reduxjs/toolkit'
+import { type LineItem, type ProductProjection } from '@commercetools/platform-sdk'
+import { type RootState } from '~/store/types'
 import { createAppSlice } from '~/store/hooks'
-import { type CartState } from '~/store/cart/types'
+import { CART_TABLE_STATUS, type CartState } from '~/store/cart/types'
+import { createAddProductThunk } from '~/store/cart/reducers/addProduct'
+import { createRemoveProductThunk } from '~/store/cart/reducers/removeProduct'
+import { createGetCartThunk } from '~/store/cart/reducers/getCart'
+import { createApplyCodeThunk } from '~/store/cart/reducers/applyCode'
+import { createUpdateQuantityThunk } from '~/store/cart/reducers/updateQuantity'
+import { createClearCartThunk } from '~/store/cart/reducers/clearCart'
 
 const initialState: CartState = {
-  value: undefined
+  cart: undefined,
+  status: CART_TABLE_STATUS.READY,
+  errorMessage: ''
 }
 
 const cart = createAppSlice({
   name: 'cart',
   initialState,
 
-  reducers: {
-    setValue(state, action: PayloadAction<undefined>) {
-      state.value = action.payload
-    }
-  }
+  reducers: (create) => ({
+    addProduct: createAddProductThunk(create),
+    removeProduct: createRemoveProductThunk(create),
+    updateQuantity: createUpdateQuantityThunk(create),
+    getCart: createGetCartThunk(create),
+    clearCart: createClearCartThunk(create),
+    applyCode: createApplyCodeThunk(create)
+  })
 })
 
-export const { setValue } = cart.actions
+const selectCartSlice: Selector<RootState, CartState> = (state: RootState): CartState => state.cart
+
+export const selectIsEmptyCart: Selector<RootState, boolean> = createSelector(
+  [selectCartSlice],
+  (cart) => (cart.cart?.lineItems?.length ?? 0) === 0
+)
+
+export const selectCartItems: Selector<RootState, LineItem[]> = createSelector(
+  [selectCartSlice],
+  (cart) => cart.cart?.lineItems ?? []
+)
+
+export const selectIsInCart = (product: ProductProjection): Selector<RootState, boolean> =>
+  createSelector([selectCartItems], (items) => items.some(({ productId }) => productId === product.id))
+
+export const selectCartItemCount = createSelector([selectCartSlice], (cart) => cart.cart?.totalLineItemQuantity ?? 0)
+
+export const { addProduct, removeProduct, updateQuantity, getCart, clearCart, applyCode } = cart.actions
 
 export default cart.reducer
diff --git a/app/store/cart/reducers/addProduct.ts b/app/store/cart/reducers/addProduct.ts
new file mode 100644
index 0000000..f9553db
--- /dev/null
+++ b/app/store/cart/reducers/addProduct.ts
@@ -0,0 +1,48 @@
+import { type ReducerCreators } from '@reduxjs/toolkit'
+import { cartApi, type CartApi } from '~/api/namespaces/cart'
+import { CART_TABLE_STATUS, type CartState } from '~/store/cart/types'
+
+type AddProductThunkResult = Awaited<ReturnType<CartApi['addProduct']>>['body']
+
+type AddProductThunkPayload = {
+  productId: Parameters<CartApi['addProduct']>[0]
+  quantity: Parameters<CartApi['addProduct']>[1]
+}
+
+type AddProductThunkConfig = { rejectValue: string }
+
+export const createAddProductThunk = (
+  create: ReducerCreators<CartState>
+): ReturnType<typeof create.asyncThunk<AddProductThunkResult, AddProductThunkPayload, AddProductThunkConfig>> =>
+  create.asyncThunk<AddProductThunkResult, AddProductThunkPayload, AddProductThunkConfig>(
+    async ({ productId, quantity }, { rejectWithValue }) => {
+      try {
+        const response = await cartApi.addProduct(productId, quantity)
+
+        return response.body
+      } catch (error) {
+        if (error instanceof Error) {
+          return rejectWithValue(error.message)
+        }
+
+        return rejectWithValue(String(error))
+      }
+    },
+
+    {
+      pending: (state) => {
+        state.errorMessage = ''
+        state.status = CART_TABLE_STATUS.LOADING
+      },
+
+      fulfilled: (state, action) => {
+        state.cart = action.payload
+        state.status = CART_TABLE_STATUS.READY
+      },
+
+      rejected: (state, action) => {
+        state.errorMessage = action.payload ?? 'Unknown error while adding product to cart'
+        state.status = CART_TABLE_STATUS.ERROR
+      }
+    }
+  )
diff --git a/app/store/cart/reducers/applyCode.ts b/app/store/cart/reducers/applyCode.ts
new file mode 100644
index 0000000..0fe71f1
--- /dev/null
+++ b/app/store/cart/reducers/applyCode.ts
@@ -0,0 +1,47 @@
+import { type ReducerCreators } from '@reduxjs/toolkit'
+import { cartApi, type CartApi } from '~/api/namespaces/cart'
+import { CART_TABLE_STATUS, type CartState } from '~/store/cart/types'
+
+type ApplyCodeThunkResult = Awaited<ReturnType<CartApi['applyDiscountCode']>>['body']
+
+type ApplyCodeThunkPayload = {
+  code: Parameters<CartApi['applyDiscountCode']>[0]
+}
+
+type ApplyCodeThunkConfig = { rejectValue: string }
+
+export const createApplyCodeThunk = (
+  create: ReducerCreators<CartState>
+): ReturnType<typeof create.asyncThunk<ApplyCodeThunkResult, ApplyCodeThunkPayload, ApplyCodeThunkConfig>> =>
+  create.asyncThunk<ApplyCodeThunkResult, ApplyCodeThunkPayload, ApplyCodeThunkConfig>(
+    async ({ code }, { rejectWithValue }) => {
+      try {
+        const response = await cartApi.applyDiscountCode(code)
+
+        return response.body
+      } catch (error) {
+        if (error instanceof Error) {
+          return rejectWithValue(error.message)
+        }
+
+        return rejectWithValue(String(error))
+      }
+    },
+
+    {
+      pending: (state) => {
+        state.errorMessage = ''
+        state.status = CART_TABLE_STATUS.LOADING
+      },
+
+      fulfilled: (state, action) => {
+        state.cart = action.payload
+        state.status = CART_TABLE_STATUS.READY
+      },
+
+      rejected: (state, action) => {
+        state.errorMessage = action.payload ?? 'Unknown error while adding product to cart'
+        state.status = CART_TABLE_STATUS.ERROR
+      }
+    }
+  )
diff --git a/app/store/cart/reducers/clearCart.ts b/app/store/cart/reducers/clearCart.ts
new file mode 100644
index 0000000..5ab4258
--- /dev/null
+++ b/app/store/cart/reducers/clearCart.ts
@@ -0,0 +1,41 @@
+import { type ReducerCreators } from '@reduxjs/toolkit'
+import { cartApi, type CartApi } from '~/api/namespaces/cart'
+import { CART_TABLE_STATUS, type CartState } from '~/store/cart/types'
+
+type ClearCartThunkResult = Awaited<ReturnType<CartApi['clearCart']>>
+
+type ClearCartThunkConfig = { rejectValue: string }
+
+export const createClearCartThunk = (
+  create: ReducerCreators<CartState>
+): ReturnType<typeof create.asyncThunk<ClearCartThunkResult, undefined, ClearCartThunkConfig>> =>
+  create.asyncThunk<ClearCartThunkResult, undefined, ClearCartThunkConfig>(
+    async (_, { rejectWithValue }) => {
+      try {
+        return await cartApi.clearCart()
+      } catch (error) {
+        if (error instanceof Error) {
+          return rejectWithValue(error.message)
+        }
+
+        return rejectWithValue(String(error))
+      }
+    },
+
+    {
+      pending: (state) => {
+        state.errorMessage = ''
+        state.status = CART_TABLE_STATUS.LOADING
+      },
+
+      fulfilled: (state, action) => {
+        state.cart = action.payload
+        state.status = CART_TABLE_STATUS.READY
+      },
+
+      rejected: (state, action) => {
+        state.errorMessage = action.payload ?? 'Unknown error while clearing cart'
+        state.status = CART_TABLE_STATUS.ERROR
+      }
+    }
+  )
diff --git a/app/store/cart/reducers/getCart.ts b/app/store/cart/reducers/getCart.ts
new file mode 100644
index 0000000..9a24e8c
--- /dev/null
+++ b/app/store/cart/reducers/getCart.ts
@@ -0,0 +1,42 @@
+import { type ReducerCreators } from '@reduxjs/toolkit'
+import { cartApi, type CartApi } from '~/api/namespaces/cart'
+import { CART_TABLE_STATUS, type CartState } from '~/store/cart/types'
+
+type GetCartThunkResult = Awaited<ReturnType<CartApi['getCart']>>
+
+type GetCartThunkConfig = { rejectValue: string }
+
+export const createGetCartThunk = (
+  create: ReducerCreators<CartState>
+): ReturnType<typeof create.asyncThunk<GetCartThunkResult, undefined, GetCartThunkConfig>> =>
+  create.asyncThunk<GetCartThunkResult, undefined, GetCartThunkConfig>(
+    async (_, { rejectWithValue }) => {
+      try {
+        return await cartApi.getCart()
+      } catch (error) {
+        if (error instanceof Error) {
+          return rejectWithValue(error.message)
+        }
+
+        return rejectWithValue(String(error))
+      }
+    },
+
+    {
+      pending: (state) => {
+        state.cart = undefined
+        state.errorMessage = ''
+        state.status = CART_TABLE_STATUS.LOADING
+      },
+
+      fulfilled: (state, action) => {
+        state.cart = action.payload
+        state.status = CART_TABLE_STATUS.READY
+      },
+
+      rejected: (state, action) => {
+        state.errorMessage = action.payload ?? 'Unknown error while getting cart'
+        state.status = CART_TABLE_STATUS.ERROR
+      }
+    }
+  )
diff --git a/app/store/cart/reducers/removeProduct.ts b/app/store/cart/reducers/removeProduct.ts
new file mode 100644
index 0000000..4399ae7
--- /dev/null
+++ b/app/store/cart/reducers/removeProduct.ts
@@ -0,0 +1,50 @@
+import { type ReducerCreators } from '@reduxjs/toolkit'
+import { cartApi, type CartApi } from '~/api/namespaces/cart'
+import { CART_TABLE_STATUS, type CartState } from '~/store/cart/types'
+
+type RemoveProductThunkResult = Awaited<ReturnType<CartApi['removeProduct']>>['body']
+
+type RemoveProductThunkPayload = {
+  productId: Parameters<CartApi['removeProduct']>[0]
+  quantity: Parameters<CartApi['removeProduct']>[1]
+}
+
+type RemoveProductThunkConfig = { rejectValue: string }
+
+export const createRemoveProductThunk = (
+  create: ReducerCreators<CartState>
+): ReturnType<
+  typeof create.asyncThunk<RemoveProductThunkResult, RemoveProductThunkPayload, RemoveProductThunkConfig>
+> =>
+  create.asyncThunk<RemoveProductThunkResult, RemoveProductThunkPayload, RemoveProductThunkConfig>(
+    async ({ productId, quantity }, { rejectWithValue }) => {
+      try {
+        const response = await cartApi.removeProduct(productId, quantity)
+
+        return response.body
+      } catch (error) {
+        if (error instanceof Error) {
+          return rejectWithValue(error.message)
+        }
+
+        return rejectWithValue(String(error))
+      }
+    },
+
+    {
+      pending: (state) => {
+        state.errorMessage = ''
+        state.status = CART_TABLE_STATUS.LOADING
+      },
+
+      fulfilled: (state, action) => {
+        state.cart = action.payload
+        state.status = CART_TABLE_STATUS.READY
+      },
+
+      rejected: (state, action) => {
+        state.errorMessage = action.payload ?? 'Unknown error while removing product from cart'
+        state.status = CART_TABLE_STATUS.ERROR
+      }
+    }
+  )
diff --git a/app/store/cart/reducers/updateQuantity.ts b/app/store/cart/reducers/updateQuantity.ts
new file mode 100644
index 0000000..bfecf39
--- /dev/null
+++ b/app/store/cart/reducers/updateQuantity.ts
@@ -0,0 +1,50 @@
+import { type ReducerCreators } from '@reduxjs/toolkit'
+import { cartApi, type CartApi } from '~/api/namespaces/cart'
+import { CART_TABLE_STATUS, type CartState } from '~/store/cart/types'
+
+type UpdateQuantityThunkResult = Awaited<ReturnType<CartApi['updateProductQuantity']>>['body']
+
+type UpdateQuantityThunkPayload = {
+  productId: Parameters<CartApi['updateProductQuantity']>[0]
+  quantity: Parameters<CartApi['updateProductQuantity']>[1]
+}
+
+type UpdateQuantityThunkConfig = { rejectValue: string }
+
+export const createUpdateQuantityThunk = (
+  create: ReducerCreators<CartState>
+): ReturnType<
+  typeof create.asyncThunk<UpdateQuantityThunkResult, UpdateQuantityThunkPayload, UpdateQuantityThunkConfig>
+> =>
+  create.asyncThunk<UpdateQuantityThunkResult, UpdateQuantityThunkPayload, UpdateQuantityThunkConfig>(
+    async ({ productId, quantity }, { rejectWithValue }) => {
+      try {
+        const response = await cartApi.updateProductQuantity(productId, quantity)
+
+        return response.body
+      } catch (error) {
+        if (error instanceof Error) {
+          return rejectWithValue(error.message)
+        }
+
+        return rejectWithValue(String(error))
+      }
+    },
+
+    {
+      pending: (state) => {
+        state.errorMessage = ''
+        state.status = CART_TABLE_STATUS.LOADING
+      },
+
+      fulfilled: (state, action) => {
+        state.cart = action.payload
+        state.status = CART_TABLE_STATUS.READY
+      },
+
+      rejected: (state, action) => {
+        state.errorMessage = action.payload ?? 'Unknown error while updating product quantity'
+        state.status = CART_TABLE_STATUS.ERROR
+      }
+    }
+  )
diff --git a/app/store/cart/types.ts b/app/store/cart/types.ts
index 2018a13..6c0eecf 100644
--- a/app/store/cart/types.ts
+++ b/app/store/cart/types.ts
@@ -1,3 +1,13 @@
+import { type Cart } from '@commercetools/platform-sdk'
+
+export enum CART_TABLE_STATUS {
+  LOADING = 'LOADING',
+  READY = 'READY',
+  ERROR = 'ERROR'
+}
+
 export type CartState = {
-  value: undefined
+  cart: Cart | undefined
+  errorMessage: string
+  status: CART_TABLE_STATUS
 }
diff --git a/eslint.config.mts b/eslint.config.mts
index 7717546..cf58f2c 100644
--- a/eslint.config.mts
+++ b/eslint.config.mts
@@ -28,6 +28,12 @@ const rules = {
       replacements: {
         env: {
           environment: false
+        },
+        props: {
+          properties: false
+        },
+        utils: {
+          utilities: false
         }
       }
     }
diff --git a/package.json b/package.json
index 5a95006..c4f02df 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@commercetools/platform-sdk": "8.9.0",
     "@commercetools/ts-client": "3.3.1",
     "@hookform/resolvers": "5.0.1",
+    "@radix-ui/react-alert-dialog": "1.1.14",
     "@radix-ui/react-aspect-ratio": "1.1.7",
     "@radix-ui/react-collapsible": "1.1.11",
     "@radix-ui/react-dialog": "1.1.14",
@@ -64,6 +65,7 @@
     "@tailwindcss/vite": "4.1.7",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
+    "@testing-library/user-event": "14.6.1",
     "@types/node": "22.15.18",
     "@types/react": "19.1.4",
     "@types/react-dom": "19.1.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b18dcb8..abefda9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,6 +16,9 @@ importers:
       '@hookform/resolvers':
         specifier: 5.0.1
         version: 5.0.1(react-hook-form@7.56.4(react@19.1.0))
+      '@radix-ui/react-alert-dialog':
+        specifier: 1.1.14
+        version: 1.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-aspect-ratio':
         specifier: 1.1.7
         version: 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -131,6 +134,9 @@ importers:
       '@testing-library/react':
         specifier: 16.3.0
         version: 16.3.0(@testing-library/dom@10.4.0)(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@testing-library/user-event':
+        specifier: 14.6.1
+        version: 14.6.1(@testing-library/dom@10.4.0)
       '@types/node':
         specifier: 22.15.18
         version: 22.15.18
@@ -277,6 +283,11 @@ packages:
       { integrity: sha512-1x3D2xEk2fRo3PAhwQwu5UubzgiVWSXTBfWpVd2Mx2AzRqJuDJCsgaDVZ7HB5iGzDW1Hl1sWN2mFyKjmR9uAog== }
     engines: { node: '>=6.9.0' }
 
+  '@babel/runtime@7.27.6':
+    resolution:
+      { integrity: sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q== }
+    engines: { node: '>=6.9.0' }
+
   '@babel/types@7.27.1':
     resolution:
       { integrity: sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q== }
@@ -904,6 +915,20 @@ packages:
     resolution:
       { integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA== }
 
+  '@radix-ui/react-alert-dialog@1.1.14':
+    resolution:
+      { integrity: sha512-IOZfZ3nPvN6lXpJTBCunFQPRSvK8MDgSc1FB85xnIpUKOw9en0dJj8JmCAxV7BiZdtYlUpmrQjoTFkVYtdoWzQ== }
+    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
+
   '@radix-ui/react-arrow@1.1.6':
     resolution:
       { integrity: sha512-2JMfHJf/eVnwq+2dewT3C0acmCWD3XiVA1Da+jTDqo342UlU13WvXtqHhG+yJw5JeQmu4ue2eMy6gcEArLBlcw== }
@@ -1753,6 +1778,13 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@testing-library/user-event@14.6.1':
+    resolution:
+      { integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw== }
+    engines: { node: '>=12', npm: '>=6' }
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+
   '@tybys/wasm-util@0.9.0':
     resolution:
       { integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw== }
@@ -2204,13 +2236,13 @@ packages:
       { integrity: sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ== }
     engines: { node: '>=10' }
 
-  brace-expansion@1.1.11:
+  brace-expansion@1.1.12:
     resolution:
-      { integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA== }
+      { integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg== }
 
-  brace-expansion@2.0.1:
+  brace-expansion@2.0.2:
     resolution:
-      { integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA== }
+      { integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ== }
 
   braces@3.0.3:
     resolution:
@@ -5650,6 +5682,8 @@ snapshots:
 
   '@babel/runtime@7.27.1': {}
 
+  '@babel/runtime@7.27.6': {}
+
   '@babel/types@7.27.1':
     dependencies:
       '@babel/helper-string-parser': 7.27.1
@@ -6141,6 +6175,20 @@ snapshots:
 
   '@radix-ui/primitive@1.1.2': {}
 
+  '@radix-ui/react-alert-dialog@1.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-dialog': 1.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.4)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
   '@radix-ui/react-arrow@1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -6812,7 +6860,7 @@ snapshots:
   '@testing-library/dom@10.4.0':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/runtime': 7.27.1
+      '@babel/runtime': 7.27.6
       '@types/aria-query': 5.0.4
       aria-query: 5.3.0
       chalk: 4.1.2
@@ -6840,6 +6888,10 @@ snapshots:
       '@types/react': 19.1.4
       '@types/react-dom': 19.1.5(@types/react@19.1.4)
 
+  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.0)':
+    dependencies:
+      '@testing-library/dom': 10.4.0
+
   '@tybys/wasm-util@0.9.0':
     dependencies:
       tslib: 2.8.1
@@ -7258,12 +7310,12 @@ snapshots:
       widest-line: 3.1.0
       wrap-ansi: 7.0.0
 
-  brace-expansion@1.1.11:
+  brace-expansion@1.1.12:
     dependencies:
       balanced-match: 1.0.2
       concat-map: 0.0.1
 
-  brace-expansion@2.0.1:
+  brace-expansion@2.0.2:
     dependencies:
       balanced-match: 1.0.2
 
@@ -8938,11 +8990,11 @@ snapshots:
 
   minimatch@3.1.2:
     dependencies:
-      brace-expansion: 1.1.11
+      brace-expansion: 1.1.12
 
   minimatch@9.0.5:
     dependencies:
-      brace-expansion: 2.0.1
+      brace-expansion: 2.0.2
 
   minimist@1.2.7: {}