diff --git a/app/activity/[id]/components/activity-info.tsx b/app/activity/[id]/components/activity-info.tsx
index a4ff129..8dffee3 100644
--- a/app/activity/[id]/components/activity-info.tsx
+++ b/app/activity/[id]/components/activity-info.tsx
@@ -4,7 +4,7 @@ import { Heading, Box, Text, VStack } from '@chakra-ui/react'
 
 type ActivityInfoProps = {
   memo: string | null | undefined
-  cost: number | null | undefined
+  cost: string | null | undefined
 }
 
 export const ActivityInfo = ({ memo, cost }: ActivityInfoProps) => {
diff --git a/app/components/customDateTimePicker/dateTimePickerWrapper.tsx b/app/components/customDateTimePicker/dateTimePickerWrapper.tsx
index 689a9fd..1e87eaa 100644
--- a/app/components/customDateTimePicker/dateTimePickerWrapper.tsx
+++ b/app/components/customDateTimePicker/dateTimePickerWrapper.tsx
@@ -8,6 +8,7 @@ import 'react-calendar/dist/Calendar.css'
 type ValuePiece = Date | null
 type Value = ValuePiece | [ValuePiece, ValuePiece]
 
+// TODO Delete this and use react date picker for time as well
 export const CustomDateTimePicker = ({
   onChange,
   value
@@ -20,7 +21,7 @@ export const CustomDateTimePicker = ({
   return (
     <>
       <style>{`
-       
+
         .react-calendar{
           margin-top: 12%;
         }
diff --git a/app/components/date/custom-date-picker.tsx b/app/components/date/custom-date-picker.tsx
new file mode 100644
index 0000000..8cbde6d
--- /dev/null
+++ b/app/components/date/custom-date-picker.tsx
@@ -0,0 +1,106 @@
+import DatePicker from 'react-datepicker'
+import { Box, useColorMode } from '@chakra-ui/react'
+import { FiCalendar } from 'react-icons/fi'
+import 'react-datepicker/dist/react-datepicker.css'
+import { InputForm } from '@/components/input'
+
+type DatePickerProps = {
+  selectedDate: Date | null
+  onChange: (date: Date) => void
+  placeholderText: string
+  dateFormat?: string | string[] | undefined
+}
+
+export const CustomDatePicker = ({
+  selectedDate,
+  onChange,
+  placeholderText,
+  dateFormat
+}: DatePickerProps) => {
+  const { colorMode } = useColorMode()
+
+  const datePickerStyles = {
+    '.react-datepicker-wrapper': {
+      width: '100%'
+    },
+    '.react-datepicker-popper': {
+      right: { base: 0, md: 'unset' }
+    },
+    '.react-datepicker ': {
+      width: '100%',
+      border: 'none',
+      boxShadow: '0px 2px 16px 0px rgba(0,0,0,.25);',
+      fontSize: 'sm'
+    },
+    '.react-datepicker__month-container': {
+      backgroundColor: colorMode === 'dark' ? 'gray.700' : 'white',
+      width: { base: '100%', md: '400px' }
+    },
+    '.react-datepicker__triangle': {
+      display: 'none'
+    },
+    '.react-datepicker__header': {
+      backgroundColor: colorMode === 'dark' ? 'gray.700' : 'white',
+      borderBottomColor: colorMode === 'dark' ? 'gray.500' : 'gray.300'
+    },
+    '.react-datepicker__current-month': {
+      color: colorMode === 'dark' ? 'primary.700' : 'primary.800',
+      paddingY: '8px',
+      fontSize: 'lg'
+    },
+    '.react-datepicker__navigation': {
+      top: '11px'
+    },
+    '.react-datepicker__navigation--previous': {
+      left: '32px'
+    },
+    '.react-datepicker__navigation--next': {
+      right: '32px'
+    },
+    '.react-datepicker__navigation-icon': {
+      '&::before': {
+        borderColor: colorMode === 'dark' ? 'gray.500' : 'gray.400'
+      }
+    },
+    '.react-datepicker__month': {
+      margin: '1rem'
+    },
+    '.react-datepicker__day-names': {
+      paddingY: '4px'
+    },
+    '.react-datepicker__day-name': {
+      width: { base: '2.4rem', md: '2.8rem' },
+      lineHeight: { base: '2.4rem', md: '2.8rem' },
+      color: colorMode === 'dark' ? 'gray.300' : 'black'
+    },
+    '.react-datepicker__day': {
+      width: { base: '2.4rem', md: '2.8rem' },
+      lineHeight: { base: '2.2rem', md: '2.4rem' },
+      ':hover': {
+        backgroundColor: colorMode === 'dark' ? 'gray.600' : 'gray.100'
+      },
+      color: colorMode === 'dark' ? 'gray.300' : 'black'
+    },
+    '.react-datepicker__day--selected': {
+      fontWeight: 'bold',
+      color: 'white',
+      backgroundColor: colorMode === 'dark' ? 'primary.700' : 'primary.500'
+    },
+    '.react-datepicker__day--keyboard-selected': {
+      background: 'none'
+    }
+  }
+
+  return (
+    <Box sx={datePickerStyles}>
+      <DatePicker
+        selected={selectedDate}
+        placeholderText={placeholderText}
+        onChange={onChange}
+        dateFormat={dateFormat}
+        popperPlacement="bottom-start"
+        customInput={<InputForm rightIcon={FiCalendar} />}
+      />
+    </Box>
+  )
+}
diff --git a/app/components/date/index.ts b/app/components/date/index.ts
new file mode 100644
index 0000000..6ec423b
--- /dev/null
+++ b/app/components/date/index.ts
@@ -0,0 +1 @@
+export { CustomDatePicker } from './custom-date-picker'
diff --git a/app/components/date/stories/custom-date-picker.stories.tsx b/app/components/date/stories/custom-date-picker.stories.tsx
new file mode 100644
index 0000000..b5c1ebb
--- /dev/null
+++ b/app/components/date/stories/custom-date-picker.stories.tsx
@@ -0,0 +1,20 @@
+import { useState } from 'react'
+import { Meta } from '@storybook/react'
+import { CustomDatePicker } from '@/components/date'
+
+const meta: Meta<typeof CustomDatePicker> = {
+  title: 'CustomDatePicker',
+  component: CustomDatePicker
+}
+export default meta
+
+export const Default = () => {
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date())
+  return (
+    <CustomDatePicker
+      selectedDate={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
+      placeholderText="Select Date"
+    />
+  )
+}
diff --git a/app/components/input/index.ts b/app/components/input/index.ts
index 9ce8684..3da76d4 100644
--- a/app/components/input/index.ts
+++ b/app/components/input/index.ts
@@ -1,3 +1,3 @@
-export { InputSearch } from './input-search'
 export { InputForm } from './input-form'
+export { InputIconButton } from './input-icon-button'
 export { TextareaForm } from './textarea-form'
diff --git a/app/components/input/input-form.tsx b/app/components/input/input-form.tsx
index 03a5c4d..237044f 100644
--- a/app/components/input/input-form.tsx
+++ b/app/components/input/input-form.tsx
@@ -1,19 +1,24 @@
+import { IconType } from 'react-icons'
 import {
   Input as ChakraFormInput,
   InputProps as ChakraInputProps,
   InputGroup,
+  InputRightElement,
   forwardRef,
   useColorModeValue
 } from '@chakra-ui/react'
 
-export const InputForm = forwardRef(
-  (props: ChakraInputProps, ref: React.Ref<HTMLInputElement>) => {
+type InputFormProps = {
+  rightIcon?: IconType
+}
+export const InputForm = forwardRef<ChakraInputProps & InputFormProps, 'input'>(
+  ({ rightIcon: RightIcon, ...props }, ref) => {
     const bgColor = useColorModeValue('white', 'gray.700')
     const borderColor = useColorModeValue('gray.300', 'gray.500')
     const placeholdercolor = useColorModeValue('gray.400', 'gray.600')
 
     return (
-      <InputGroup minW={{ base: '100%', md: '23.75rem' }}>
+      <InputGroup minW={'100%'}>
         <ChakraFormInput
           {...props}
           ref={ref}
@@ -24,6 +29,11 @@ export const InputForm = forwardRef(
             color: placeholdercolor
           }}
         />
+        {RightIcon && (
+          <InputRightElement color="gray.500">
+            <RightIcon />
+          </InputRightElement>
+        )}
       </InputGroup>
     )
   }
diff --git a/app/components/input/input-search.tsx b/app/components/input/input-icon-button.tsx
similarity index 67%
rename from app/components/input/input-search.tsx
rename to app/components/input/input-icon-button.tsx
index 11c1462..ec92215 100644
--- a/app/components/input/input-search.tsx
+++ b/app/components/input/input-icon-button.tsx
@@ -1,3 +1,4 @@
+import { IconType } from 'react-icons'
 import {
   Input as ChakraInput,
   InputProps as ChakraInputProps,
@@ -7,16 +8,17 @@ import {
   forwardRef,
   useColorModeValue
 } from '@chakra-ui/react'
-import { FiSearch } from 'react-icons/fi'
 
-type InputSearchProps = {
+type InputIconButtonProps = {
   ariaLabel: string
+  icon: IconType
+  onClick?: () => void
 }
 
-export const InputSearch = forwardRef<
-  ChakraInputProps & InputSearchProps,
+export const InputIconButton = forwardRef<
+  ChakraInputProps & InputIconButtonProps,
   'input'
->(({ ariaLabel, ...props }, ref) => {
+>(({ ariaLabel, icon: Icon, onClick, ...props }, ref) => {
   const bgColor = useColorModeValue('white', 'gray.700')
   const borderColor = useColorModeValue('primary.700', 'gray.500')
 
@@ -34,10 +36,12 @@ export const InputSearch = forwardRef<
         <IconButton
           aria-label={ariaLabel}
           variant="unstyled"
-          type="submit"
+          type={onClick ? 'button' : 'submit'}
+          onClick={onClick}
           color="primary.700"
+          isDisabled={props.isDisabled}
         >
-          <FiSearch size="24px" />
+          <Icon size="24px" />
         </IconButton>
       </InputRightElement>
     </InputGroup>
diff --git a/app/components/input/stories/inputForm.stories.tsx b/app/components/input/stories/input-form.stories.tsx
similarity index 100%
rename from app/components/input/stories/inputForm.stories.tsx
rename to app/components/input/stories/input-form.stories.tsx
diff --git a/app/components/input/stories/input-icon-button.stories.tsx b/app/components/input/stories/input-icon-button.stories.tsx
new file mode 100644
index 0000000..a2a6456
--- /dev/null
+++ b/app/components/input/stories/input-icon-button.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { FiSearch } from 'react-icons/fi'
+import { InputIconButton } from '@/components/input'
+
+const meta: Meta<typeof InputIconButton> = {
+  title: 'Input Icon Button',
+  component: InputIconButton
+}
+export default meta
+type Story = StoryObj<typeof InputIconButton>
+
+export const Default: Story = {
+  args: {
+    ariaLabel: 'Search',
+    placeholder: 'Search...',
+    icon: FiSearch
+  }
+}
diff --git a/app/components/input/stories/inputSearch.stories.tsx b/app/components/input/stories/inputSearch.stories.tsx
deleted file mode 100644
index ef5196f..0000000
--- a/app/components/input/stories/inputSearch.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react'
-import { InputSearch } from '../index'
-
-const meta: Meta<typeof InputSearch> = {
-  title: 'Input Search',
-  component: InputSearch
-}
-export default meta
-type Story = StoryObj<typeof InputSearch>
-
-export const Default: Story = {
-  args: {
-    ariaLabel: 'Search',
-    placeholder: 'Search...'
-  }
-}
diff --git a/app/components/loading/loading.tsx b/app/components/loading/loading.tsx
index fcb529f..5a724a1 100644
--- a/app/components/loading/loading.tsx
+++ b/app/components/loading/loading.tsx
@@ -1,14 +1,18 @@
 import { VStack, Spinner } from '@chakra-ui/react'
 
-export const Loading = () => {
+type LoadingProps = {
+  size?: string
+  p?: string
+}
+export const Loading = ({ size = 'xl', p = '60px' }: LoadingProps) => {
   return (
-    <VStack align="center" p="60px">
+    <VStack align="center" p={p}>
       <Spinner
         thickness="4px"
         speed="0.6s"
         emptyColor="gray.200"
         color="primary.500"
-        size="xl"
+        size={size}
       />
     </VStack>
   )
diff --git a/app/libs/utils/date.ts b/app/libs/utils/date.ts
index edd625a..0178c53 100644
--- a/app/libs/utils/date.ts
+++ b/app/libs/utils/date.ts
@@ -1,5 +1,42 @@
+import { toDate, utcToZonedTime, format } from 'date-fns-tz'
+
+/*
+ * NOTE: This timezone is used for the entire application.
+ * All form inputs for date or date time should have offset of +09:00 e.g."2024-01-01T00:00:00+09:00", which is Tokyo timezone.
+ * See "formatToISODate" function.
+ */
+const TIMEZONE = 'Asia/Tokyo'
+
+/**
+ *
+ * @param isoString - ISO date string
+ * @returns - Date Object ex. Mon Jan 01 2024 00:00:00 GMT-0800 (Pacific Standard Time)
+ */
+export const getDateObj = (isoString: string) => {
+  const parsedDate = toDate(isoString, { timeZone: TIMEZONE })
+  const dateObj = utcToZonedTime(parsedDate, TIMEZONE)
+  return dateObj
+}
+
+export const getOneNextDate = (isoString: string) => {
+  const dateObj = getDateObj(isoString)
+  dateObj.setDate(dateObj.getDate() + 1)
+  return dateObj
+}
+
+/**
+ * @param date - Date Object
+ * @returns - ISO date string with Tokyo timezone ex.2024-01-01T12:00:00+09:00
+ */
+export const formatToISODate = (date: Date) => {
+  const isoString = format(date, "yyyy-MM-dd'T'HH:mm:ssXXX", {
+    timeZone: TIMEZONE
+  })
+  return isoString
+}
+
 /**
- * @param date - ISO date string e.g. '2023-01-01'
+ * @param date - ISO date string
  * @param type - 'dayMonthYear' | 'dayMonth'
  * @returns - Formatted date string for 'dayMonthYear' e.g. '2023/01/01'
  * @returns - Formatted date string for 'dayMonth' e.g. '01/01'
@@ -10,47 +47,47 @@ export const formatDateToSlash = (
 ) => {
   if (!date) return ''
 
-  const parts = date.split('-')
-
-  if (type === 'dayMonthYear') return `${parts[0]}/${parts[1]}/${parts[2]}`
+  const dateObj = getDateObj(date)
+  const formattedDateMonthYear = format(dateObj, 'yyyy/MM/dd')
+  const formattedDateMonth = format(dateObj, 'MM/dd')
 
-  if (type === 'dayMonth') return `${parts[1]}/${parts[2]}`
+  if (type === 'dayMonthYear') return formattedDateMonthYear
+  if (type === 'dayMonth') return formattedDateMonth
 }
 
 /**
- * @param date - ISO date string e.g. '2021-01-01T12:00:00+00:00'
- * @returns - Formatted time string e.g. '12:00'
+ * @param date  - ISO date string
+ * @returns - Formatted date string e.g. '2023/01/01 10:00'
  */
-export const extractTimeFromDate = (date: string | undefined | null) => {
+export const formatToDateTime = (date: string | null | undefined) => {
   if (!date) return ''
 
-  const parts = date.split('T')
-  const hours = parts[1].split(':')[0]
-  const minutes = parts[1].split(':')[1]
-
-  return `${hours}:${minutes}`
+  const dateObj = getDateObj(date)
+  const formattedDate = format(dateObj, 'yyyy/MM/dd HH:mm')
+  return formattedDate
 }
 
 /**
- * @param date  - ISO date string
- * @returns - Formatted date string e.g. '2023-01-01'
+ * @param date - ISO date string
+ * @returns - Formatted time string e.g. '12:00'
  */
-export const formatDbTimeToDate = (date: string | null | undefined) => {
+export const extractTimeFromDate = (date: string | undefined | null) => {
   if (!date) return ''
-  const formattedDate = date.split('T')[0]
-  return formattedDate
+
+  const dateObj = getDateObj(date)
+  const formattedTime = format(dateObj, 'HH:mm')
+  return formattedTime
 }
 
+// TODO
 /**
  * @param date  - ISO date string
- * @returns - Formatted date string e.g. '2023-01-01 10:00'
+ * @returns - Formatted date string e.g. '2023-01-01'
  */
-export const formatToDateTime = (date: string | null | undefined) => {
+export const formatDbTimeToDate = (date: string | null | undefined) => {
   if (!date) return ''
-  const parts = date.split('T')
-  const monthDay = date.split('T')[0]
-  const hours = parts[1].split(':')[0]
-  const minutes = parts[1].split(':')[1]
 
-  return `${monthDay} ${hours}:${minutes}`
+  const dateObj = getDateObj(date)
+  const formattedDate = format(dateObj, 'yyyy-MM-dd')
+  return formattedDate
 }
diff --git a/app/libs/utils/index.ts b/app/libs/utils/index.ts
index eb4ca56..3672c4f 100644
--- a/app/libs/utils/index.ts
+++ b/app/libs/utils/index.ts
@@ -1,6 +1,9 @@
 export {
+  getDateObj,
+  getOneNextDate,
+  formatToISODate,
   formatDateToSlash,
+  formatToDateTime,
   extractTimeFromDate,
-  formatDbTimeToDate,
-  formatToDateTime
+  formatDbTimeToDate
 } from './date'
diff --git a/app/page.tsx b/app/page.tsx
index 0c53943..d7938fa 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,4 +1,5 @@
 'use client'
+
 import {
   Heading,
   Box,
@@ -12,9 +13,9 @@ import {
 import { useRouter } from 'next/navigation'
 import { PrimaryButton } from '@/components/button'
 import { Loading } from '@/components/loading'
-import { useUserId } from '@/providers/session-provider'
+
 import { TripSearch, TripSort, TripCard } from '@/trip/components'
-import { useTripsCollectionQuery, TripsOrderBy } from '@generated/api'
+import { useTripsGet } from '@/trip/hooks'
 
 export default function Top({ searchParams }: { searchParams: { q: string } }) {
   const router = useRouter()
@@ -22,48 +23,17 @@ export default function Top({ searchParams }: { searchParams: { q: string } }) {
   const color = useColorModeValue('black', 'gray.300')
 
   const searchWord = searchParams.q
-  const userId = useUserId()
-
-  const { data, loading, fetchMore, refetch } = useTripsCollectionQuery({
-    variables: {
-      filter: {
-        user_id: { eq: userId },
-        ...(searchWord &&
-          searchWord.length && { title: { like: `%${searchWord}%` } })
-      },
-      first: 6,
-      after: null
-    }
-  })
 
-  const handleSortBy = (sortObj: TripsOrderBy) => {
-    refetch({
-      orderBy: sortObj
-    })
-  }
+  const {
+    tripsData,
+    loading,
+    error,
+    handleSortBy,
+    handleLoadMore,
+    refetchLoading
+  } = useTripsGet(searchWord)
 
-  const handleLoadMore = () => {
-    fetchMore({
-      variables: {
-        after: data?.tripsCollection?.pageInfo.endCursor
-      },
-      updateQuery: (previousQueryResult, { fetchMoreResult }) => {
-        const newEdges = fetchMoreResult?.tripsCollection?.edges
-        const pageInfo = fetchMoreResult?.tripsCollection?.pageInfo
-        const previousCollection = previousQueryResult?.tripsCollection
-        return newEdges && newEdges.length && pageInfo && previousCollection
-          ? {
-              tripsCollection: {
-                __typename: previousCollection.__typename,
-                edges: [...previousCollection.edges, ...newEdges],
-                pageInfo
-              },
-              __typename: previousQueryResult.__typename
-            }
-          : previousQueryResult
-      }
-    })
-  }
+  if (error) throw new Error('Failed to fetch trips')
 
   return (
     <Box as="main" minH="100vh" bg={bg} color={color}>
@@ -101,7 +71,7 @@ export default function Top({ searchParams }: { searchParams: { q: string } }) {
             <TripSort sortBy={handleSortBy} />
           </GridItem>
         </Grid>
-        {loading || !data?.tripsCollection ? (
+        {loading || refetchLoading || !tripsData ? (
           <Loading />
         ) : (
           <>
@@ -110,16 +80,19 @@ export default function Top({ searchParams }: { searchParams: { q: string } }) {
               mt={{ base: '38px', md: '40px' }}
               flexWrap={'wrap'}
             >
-              {data.tripsCollection.edges.length === 0 && (
+              {tripsData.edges.length === 0 && (
                 <Text>We couldn&apos;t find any results</Text>
               )}
-              {data.tripsCollection.edges.map((trip) => (
+              {tripsData.edges.map((trip) => (
                 <TripCard key={trip.node.id} data={trip} />
               ))}
             </Flex>
-            {data.tripsCollection.pageInfo.hasNextPage && (
+            {tripsData.pageInfo.hasNextPage && (
               <Box textAlign="center" mt={{ base: '40px', md: '60px' }}>
-                <PrimaryButton variant="outline" onClick={handleLoadMore}>
+                <PrimaryButton
+                  variant="outline"
+                  onClick={() => handleLoadMore(tripsData.pageInfo.endCursor)}
+                >
                   Load More
                 </PrimaryButton>
               </Box>
diff --git a/app/trip/[id]/__test__/mock.ts b/app/trip/[id]/__test__/mock.ts
index b172605..15a50c9 100644
--- a/app/trip/[id]/__test__/mock.ts
+++ b/app/trip/[id]/__test__/mock.ts
@@ -18,8 +18,8 @@ export const tripDetailsMock1 = [
                 id: 'trip-uuid-1',
                 image_storage_object_id: null,
                 title: 'Tokyo',
-                date_from: '2021-01-01',
-                date_to: '2021-01-01',
+                date_from: '2024-01-01T00:00:00+09:00',
+                date_to: '2024-01-10T00:00:00+09:00',
                 invitationsCollection: {
                   edges: [
                     {
@@ -49,8 +49,8 @@ export const tripDetailsMock1 = [
                     {
                       node: {
                         address: 'Shibuya',
-                        time_from: '2021-01-01T10:00:00+00:00',
-                        time_to: '2021-01-01T11:00:00+00:00',
+                        time_from: '2024-01-01T10:00:00+09:00',
+                        time_to: '2024-01-01T11:00:00+09:00',
                         title: 'Activity 1',
                         id: 'abc1'
                       }
@@ -58,8 +58,8 @@ export const tripDetailsMock1 = [
                     {
                       node: {
                         address: 'Asakusa',
-                        time_from: '2021-01-02T10:00:00+00:00',
-                        time_to: '2021-01-02T11:00:00+00:00',
+                        time_from: '2024-01-02T10:00:00+09:00',
+                        time_to: '2024-01-02T11:00:00+09:00',
                         title: 'Activity 2',
                         id: 'abc2'
                       }
@@ -67,8 +67,8 @@ export const tripDetailsMock1 = [
                     {
                       node: {
                         address: 'Shinjuku',
-                        time_from: '2021-01-03T11:00:00+00:00',
-                        time_to: '2021-01-03T12:00:00+00:00',
+                        time_from: '2024-01-03T11:00:00+09:00',
+                        time_to: '2024-01-03T12:00:00+09:00',
                         title: 'Activity 3',
                         id: 'abc3'
                       }
@@ -76,8 +76,8 @@ export const tripDetailsMock1 = [
                     {
                       node: {
                         address: 'Yoyogi',
-                        time_from: '2021-01-03T14:00:00+00:00',
-                        time_to: '2021-01-03T08:00:00+00:00',
+                        time_from: '2024-01-03T14:00:00+09:00',
+                        time_to: '2024-01-03T18:00:00+09:00',
                         title: 'Activity 4',
                         id: 'abc4'
                       }
@@ -111,8 +111,8 @@ export const tripDetailsMock2 = [
                 id: 'trip-uuid-2',
                 image_storage_object_id: null,
                 title: 'Tokyo',
-                date_from: '2021-01-01',
-                date_to: '2021-01-01',
+                date_from: '2024-01-01T00:00:00+09:00',
+                date_to: '2024-01-010T00:00:00+09:00',
                 invitationsCollection: {
                   edges: [
                     {
@@ -142,8 +142,8 @@ export const tripDetailsMock2 = [
                     {
                       node: {
                         address: 'Shibuya',
-                        time_from: '2021-01-01T10:00:00+00:00',
-                        time_to: '2021-01-01T11:00:00+00:00',
+                        time_from: '2021-01-01T10:00:00+09:00',
+                        time_to: '2021-01-01T11:00:00+09:00',
                         title: 'Activity 1',
                         id: 'abc1'
                       }
@@ -151,8 +151,8 @@ export const tripDetailsMock2 = [
                     {
                       node: {
                         address: 'Asakusa',
-                        time_from: '2021-01-01T12:00:00+00:00',
-                        time_to: '2021-01-03T11:00:00+00:00',
+                        time_from: '2021-01-01T12:00:00+09:00',
+                        time_to: '2021-01-03T11:00:00+09:00',
                         title: 'Activity 2',
                         id: 'abc2'
                       }
@@ -160,8 +160,8 @@ export const tripDetailsMock2 = [
                     {
                       node: {
                         address: 'Shinjuku',
-                        time_from: '2021-01-03T11:00:00+00:00',
-                        time_to: '2021-01-03T12:00:00+00:00',
+                        time_from: '2021-01-03T11:00:00+09:00',
+                        time_to: '2021-01-03T12:00:00+09:00',
                         title: 'Activity 3',
                         id: 'abc3'
                       }
@@ -169,8 +169,8 @@ export const tripDetailsMock2 = [
                     {
                       node: {
                         address: 'Yoyogi',
-                        time_from: '2021-01-03T14:00:00+00:00',
-                        time_to: '2021-01-04T08:00:00+00:00',
+                        time_from: '2021-01-03T14:00:00+09:00',
+                        time_to: '2021-01-04T08:00:00+09:00',
                         title: 'Activity 4',
                         id: 'abc4'
                       }
diff --git a/app/trip/[id]/components/activity-card.tsx b/app/trip/[id]/components/activity-card.tsx
index 281cbc6..2a4a2c6 100644
--- a/app/trip/[id]/components/activity-card.tsx
+++ b/app/trip/[id]/components/activity-card.tsx
@@ -15,9 +15,10 @@ import { FiTrash2, FiMapPin, FiMoreHorizontal, FiEdit3 } from 'react-icons/fi'
 import { Link } from '@/components/link'
 import { ConfirmModal } from '@/components/modal'
 import {
-  formatDbTimeToDate,
   formatDateToSlash,
-  extractTimeFromDate
+  extractTimeFromDate,
+  getOneNextDate,
+  getDateObj
 } from '@/libs/utils'
 import { ActivityType } from '../components'
 
@@ -41,45 +42,21 @@ export const ActivityCard = ({ activity, selectedDate }: ActivityCardProps) => {
   const differentDate = (displayPlace: 'timeFrom' | 'timeTo') => {
     if (!activity.timeTo) return null
 
-    const timeFromDate = formatDbTimeToDate(activity.timeFrom)
-    const timeToDate = formatDbTimeToDate(activity.timeTo)
+    const timeFromDateObj = getDateObj(activity.timeFrom)
+    const timeToDateObj = getDateObj(activity.timeTo)
+    const selectedDateObj = getDateObj(selectedDate)
+    const nextDate = getOneNextDate(selectedDate)
 
-    if (timeFromDate === timeToDate) return null
-
-    const [yearSelected, monthSelected, daySelected] = selectedDate
-      .split('-')
-      .map(Number)
-
-    const [yearTimeFrom, monthTimeFrom, dayTimeFrom] = timeFromDate
-      .split('-')
-      .map(Number)
-
-    const [yearTimeTo, monthTimeTo, dayTimeTo] = timeToDate
-      .split('-')
-      .map(Number)
-
-    const selectedDateObj = new Date(
-      yearSelected,
-      monthSelected - 1,
-      daySelected
-    )
-
-    const timeFromDateObj = new Date(
-      yearTimeFrom,
-      monthTimeFrom - 1,
-      dayTimeFrom
-    )
-
-    const timeToDateObj = new Date(yearTimeTo, monthTimeTo - 1, dayTimeTo)
+    if (timeFromDateObj === timeToDateObj) return null
 
     // To display below TimeFrom if the selected date is before than the timeFrom date
     if (displayPlace === 'timeFrom' && timeFromDateObj < selectedDateObj) {
-      return formatDateToSlash(timeFromDate, 'dayMonth')
+      return formatDateToSlash(activity.timeFrom, 'dayMonth')
     }
 
     // To display below TimeTo if the selected date is later than the timeTo date
-    if (displayPlace === 'timeTo' && timeToDateObj > selectedDateObj) {
-      return formatDateToSlash(timeToDate, 'dayMonth')
+    if (displayPlace === 'timeTo' && timeToDateObj > nextDate) {
+      return formatDateToSlash(activity.timeTo, 'dayMonth')
     }
   }
 
diff --git a/app/trip/[id]/components/trip-details-header.tsx b/app/trip/[id]/components/trip-details-header.tsx
index 9d18582..d7fc10b 100644
--- a/app/trip/[id]/components/trip-details-header.tsx
+++ b/app/trip/[id]/components/trip-details-header.tsx
@@ -20,11 +20,12 @@ type TripDetailsHeaderProps = {
   title: string
   dateFrom: string | null | undefined
   dateTo: string | null | undefined
+  cost: string | null | undefined
+  costUnit: string | null | undefined
   users: {
     id: string | undefined
     image: string | null | undefined
   }[]
-
   tags: { id: string | undefined; name: string | undefined }[]
 }
 
@@ -34,6 +35,8 @@ export const TripDetailsHeader = ({
   title,
   dateFrom,
   dateTo,
+  cost,
+  costUnit,
   tags,
   users
 }: TripDetailsHeaderProps) => {
@@ -89,10 +92,16 @@ export const TripDetailsHeader = ({
               mt={{ base: '4px', md: '8px' }}
               fontSize={{ base: 'sm', md: 'md' }}
               color={{ base: 'gray.100', md: color }}
+              fontWeight="bold"
             >
               {formatDateToSlash(dateFrom, 'dayMonthYear')} -{' '}
               {formatDateToSlash(dateTo, 'dayMonthYear')}
             </Box>
+            {cost && (
+              <Box mt="4px" display={{ base: 'none', md: 'block' }}>
+                Total Cost: {cost} {costUnit}
+              </Box>
+            )}
           </Box>
 
           <Flex gap={{ base: '10px', md: '28px' }}>
@@ -127,9 +136,9 @@ export const TripDetailsHeader = ({
 
         <Flex
           flexDir={{ base: 'column', md: 'row' }}
-          mt={{ base: '24px', md: '28px' }}
+          mt={{ base: '24px', md: '20px' }}
           justifyContent="space-between"
-          gap={'16px'}
+          gap={'14px'}
         >
           <Flex align="center" gap="18px">
             {!!users.length && (
@@ -172,6 +181,7 @@ export const TripDetailsHeader = ({
               Manage
             </Link>
           </Flex>
+
           <Flex gap="12px" maxW={{ base: '100%', md: '50%' }} flexWrap="wrap">
             {tags.map((tag) => (
               <Tag
@@ -187,6 +197,12 @@ export const TripDetailsHeader = ({
               </Tag>
             ))}
           </Flex>
+
+          {cost && (
+            <Box display={{ base: 'block', md: 'none' }} fontWeight="bold">
+              Total Cost: {cost} {costUnit}
+            </Box>
+          )}
         </Flex>
       </Box>
     </Box>
diff --git a/app/trip/[id]/components/trip-details-tabs.tsx b/app/trip/[id]/components/trip-details-tabs.tsx
index 7fc5f67..be4668f 100644
--- a/app/trip/[id]/components/trip-details-tabs.tsx
+++ b/app/trip/[id]/components/trip-details-tabs.tsx
@@ -10,7 +10,12 @@ import {
   VStack,
   Heading
 } from '@chakra-ui/react'
-import { formatDbTimeToDate, formatDateToSlash } from '@/libs/utils'
+import {
+  formatDbTimeToDate,
+  formatDateToSlash,
+  getDateObj,
+  formatToISODate
+} from '@/libs/utils'
 import { ActivityCard } from '../components'
 
 export type ActivityType = {
@@ -30,8 +35,8 @@ export const TripDetailsTabs = ({ activities }: TripDetailsTabsProps) => {
 
   const sortedActivities = useMemo(() => {
     return activities.sort((a, b) => {
-      const dateA = new Date(a.timeFrom).getTime()
-      const dateB = new Date(b.timeFrom).getTime()
+      const dateA = getDateObj(a.timeFrom).getTime()
+      const dateB = getDateObj(b.timeFrom).getTime()
 
       return dateA - dateB
     })
@@ -49,15 +54,21 @@ export const TripDetailsTabs = ({ activities }: TripDetailsTabsProps) => {
       // Array list for all dates
       const allDates: string[] = []
       sortedActivities.forEach((activity) => {
-        const startDate = new Date(formatDbTimeToDate(activity.timeFrom))
-        const endDate = new Date(formatDbTimeToDate(activity.timeTo))
+        const startDate = getDateObj(activity.timeFrom)
+        const endDate = activity.timeTo ? getDateObj(activity.timeTo) : null
 
         const currentDate = startDate
 
-        while (currentDate <= endDate) {
-          const formattedDate = currentDate.toISOString().split('T')[0] // Format to yyyy-mm-dd
-          if (!allDates.includes(formattedDate)) {
-            allDates.push(formattedDate)
+        while (endDate && currentDate <= endDate) {
+          const formattedFromDate = formatToISODate(currentDate).split('T')[0]
+          const formattedToDate = formatToISODate(endDate).split('T')[0]
+
+          if (!allDates.includes(formattedFromDate)) {
+            allDates.push(formattedFromDate)
+          }
+
+          if (!allDates.includes(formattedToDate)) {
+            allDates.push(formattedToDate)
           }
 
           // Move to the next day
@@ -69,7 +80,7 @@ export const TripDetailsTabs = ({ activities }: TripDetailsTabsProps) => {
         const activitiesForDate = sortedActivities.filter(
           (activity) =>
             formatDbTimeToDate(activity.timeFrom) === dateKey ||
-            formatDbTimeToDate(activity.timeTo) === dateKey
+            (activity.timeTo && formatDbTimeToDate(activity.timeTo) === dateKey)
         )
 
         result[dateKey] = activitiesForDate
@@ -82,12 +93,12 @@ export const TripDetailsTabs = ({ activities }: TripDetailsTabsProps) => {
   const [tabIndex, setTabIndex] = useState(0)
 
   const [selectedDate, setSelectedDate] = useState(
-    Object.keys(activitiesByDate)[0]
+    `${Object.keys(activitiesByDate)[0]}T00:00:00+09:00`
   )
 
   const handleTabsChange = (index: number) => {
     setTabIndex(index)
-    setSelectedDate(Object.keys(activitiesByDate)[index])
+    setSelectedDate(`${Object.keys(activitiesByDate)[index]}T00:00:00+09:00`)
   }
 
   return (
diff --git a/app/trip/[id]/edit/page.tsx b/app/trip/[id]/edit/page.tsx
new file mode 100644
index 0000000..e97d48f
--- /dev/null
+++ b/app/trip/[id]/edit/page.tsx
@@ -0,0 +1,140 @@
+'use client'
+
+import { NetworkStatus } from '@apollo/client'
+import { Box, Container, Heading, useColorModeValue } from '@chakra-ui/react'
+import { Loading } from '@/components/loading'
+import { useUserId } from '@/providers/session-provider'
+import { TripForm } from '../../components'
+import {
+  useTagsCollectionQuery,
+  useTripDetailsQuery,
+  useTripTagsCollectionQuery
+} from '@generated/api'
+
+export default function TripEditPage({ params }: { params: { id: string } }) {
+  const bg = useColorModeValue('white', 'gray.800')
+  const color = useColorModeValue('black', 'gray.300')
+
+  const userId = useUserId()
+
+  // Trip Details
+  const {
+    data: tripData,
+    loading: tripLoading,
+    refetch: tripRefetch,
+    networkStatus: tripNetWorkStatus
+  } = useTripDetailsQuery({
+    variables: {
+      id: params.id
+    },
+    notifyOnNetworkStatusChange: true
+  })
+
+  const tripDataCollection = tripData?.tripsCollection?.edges[0]?.node
+  const tripDetailsRefetch = () => {
+    tripRefetch()
+  }
+  const tripDetailsRefetchLoading = tripNetWorkStatus === NetworkStatus.refetch
+
+  // Trip Tags
+  const {
+    data: tripTagsData,
+    loading: tripTagsLoading,
+    refetch: tripTagsRefetch,
+    networkStatus: tripTagsNetWorkStatus
+  } = useTripTagsCollectionQuery({
+    variables: {
+      filter: {
+        trip_id: { eq: params.id }
+      }
+    },
+    notifyOnNetworkStatusChange: true
+  })
+
+  // Tags
+  const tripsTagsDataArray = tripTagsData?.trip_tagsCollection?.edges.map(
+    (tag) => ({
+      id: tag.node.id,
+      tag_id: tag.node.tag_id || '',
+      trip_id: tag.node.trip_id || ''
+    })
+  )
+  const tripTagsCollectionRefetch = () => {
+    tripTagsRefetch()
+  }
+  const tripTagsRefetchLoading = tripTagsNetWorkStatus === NetworkStatus.refetch
+
+  const {
+    data: tagsData,
+    loading: tagsLoading,
+    refetch: tagsRefetch,
+    networkStatus: tagsNetWorkStatus
+  } = useTagsCollectionQuery({
+    variables: { userId },
+    notifyOnNetworkStatusChange: true
+  })
+
+  const tagsCollectionRefetch = () => {
+    tagsRefetch()
+  }
+  const tagsRefetchLoading = tagsNetWorkStatus === NetworkStatus.refetch
+
+  if (
+    (!tripData && !tripLoading) ||
+    (!tripTagsData && !tripTagsLoading) ||
+    (!tagsData && !tagsLoading)
+  )
+    throw new Error('No trip data found')
+
+  return (
+    <Box as="main" minH="100svh" bg={bg} color={color}>
+      <Container
+        maxW={{ base: '100%', lg: 'container.sm' }}
+        pt={{ base: '20px', md: '30px' }}
+        pb={{ base: '40px', md: '80px' }}
+      >
+        <Heading as="h1" fontSize={{ base: '2xl', md: '4xl' }}>
+          Edit Trip
+        </Heading>
+        <Box mt="40px">
+          {!tripDataCollection || tripLoading || !tripsTagsDataArray ? (
+            <Loading />
+          ) : (
+            <TripForm
+              tripDetails={{
+                id: tripDataCollection.id,
+                image: tripDataCollection.image_storage_object_id,
+                title: tripDataCollection.title,
+                dateFrom: tripDataCollection.date_from,
+                dateTo: tripDataCollection.date_to,
+                cost: tripDataCollection.cost,
+                costUnit: tripDataCollection.cost_unit,
+                refetch: tripDetailsRefetch,
+                refetchLoading: tripDetailsRefetchLoading
+              }}
+              tripTags={{
+                data:
+                  tripTagsData?.trip_tagsCollection?.edges.map((tripTag) => ({
+                    id: tripTag.node.id,
+                    tag_id: tripTag.node.tag_id || '',
+                    trip_id: tripTag.node.trip_id || ''
+                  })) || [],
+                refetch: tripTagsCollectionRefetch,
+                refetchLoading: tripTagsRefetchLoading
+              }}
+              tags={{
+                data:
+                  tagsData?.tagsCollection?.edges.map((tag) => ({
+                    id: tag.node.id,
+                    name: tag.node.name
+                  })) || [],
+                refetch: tagsCollectionRefetch,
+                refetchLoading: tagsRefetchLoading
+              }}
+            />
+          )}
+        </Box>
+      </Container>
+    </Box>
+  )
+}
diff --git a/app/trip/[id]/page.tsx b/app/trip/[id]/page.tsx
index 47eb991..6c29c01 100644
--- a/app/trip/[id]/page.tsx
+++ b/app/trip/[id]/page.tsx
@@ -28,7 +28,7 @@ export default function TripDetailsPage({
   const tripDataCollection = tripData?.tripsCollection
 
   return (
-    <Box as="main" minH="100vh" bg={bg} color={color}>
+    <Box as="main" minH="100svh" bg={bg} color={color}>
       <Container
         maxW={{ base: '100%', lg: 'container.xl' }}
         pt={{ base: '0px', md: '30px' }}
@@ -44,6 +44,8 @@ export default function TripDetailsPage({
               title={tripDataCollection.edges[0].node.title}
               dateFrom={tripDataCollection.edges[0].node.date_from}
               dateTo={tripDataCollection.edges[0].node.date_to}
+              cost={tripDataCollection.edges[0].node.cost}
+              costUnit={tripDataCollection.edges[0].node.cost_unit}
               users={
                 tripDataCollection.edges[0].node.invitationsCollection?.edges.map(
                   (invitation) => ({
diff --git a/app/trip/components/index.ts b/app/trip/components/index.ts
index ddcac6d..c641ef0 100644
--- a/app/trip/components/index.ts
+++ b/app/trip/components/index.ts
@@ -1,3 +1,5 @@
+export { TagFormModal } from './tag-form-modal'
 export { TripCard } from './trip-card'
+export { TripForm } from './trip-form'
 export { TripSearch } from './trip-search'
 export { TripSort } from './trip-sort'
diff --git a/app/trip/components/tag-form-modal.tsx b/app/trip/components/tag-form-modal.tsx
new file mode 100644
index 0000000..ef4f307
--- /dev/null
+++ b/app/trip/components/tag-form-modal.tsx
@@ -0,0 +1,116 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  FormErrorMessage,
+  FormControl,
+  Flex,
+  Tag,
+  useColorModeValue,
+  Box,
+  Heading
+} from '@chakra-ui/react'
+import { FiPlusCircle, FiX } from 'react-icons/fi'
+import { InputIconButton } from '@/components/input'
+import { Loading } from '@/components/loading'
+import { useTagCreateDelete } from '../hooks'
+
+type TagFormModalProps = {
+  isOpen: boolean
+  onClose: () => void
+  allTags: { id: string; name: string }[]
+  tagsCollectionRefetch: () => void
+}
+
+export const TagFormModal = ({
+  isOpen,
+  onClose,
+  allTags,
+  tagsCollectionRefetch
+}: TagFormModalProps) => {
+  const tagBgColor = useColorModeValue('primary.700', 'primary.800')
+
+  const {
+    addEnterHandler,
+    addTag,
+    deleteTag,
+    isCreating,
+    isDeleting,
+    register,
+    errors
+  } = useTagCreateDelete(tagsCollectionRefetch)
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent maxW="30rem">
+        <ModalCloseButton />
+        <ModalBody pt="48px">
+          <Flex flexDir="column" gap="30px">
+            <Box as="form">
+              <Heading as="h2" fontSize="xl">
+                Tag List
+              </Heading>
+              <Flex columnGap="20px" rowGap="10px" flexWrap="wrap" mt="8px">
+                {isCreating || isDeleting ? (
+                  <Loading p="10px" size="md" />
+                ) : (
+                  <>
+                    {allTags.map((tag) => (
+                      <Tag
+                        key={tag.id}
+                        variant="solid"
+                        bgColor={tagBgColor}
+                        borderRadius="full"
+                        px="14px"
+                        py="6px"
+                        gap="8px"
+                      >
+                        {tag.name}
+                        <Box
+                          as="button"
+                          cursor="pointer"
+                          _hover={{
+                            opacity: '.7'
+                          }}
+                          type="button"
+                          onClick={() => deleteTag(tag.id)}
+                        >
+                          <FiX size="18" />
+                        </Box>
+                      </Tag>
+                    ))}
+                  </>
+                )}
+              </Flex>
+            </Box>
+            <Box as="form">
+              <Heading as="h2" fontSize="xl">
+                Add New Tag
+              </Heading>
+              <Box mt="8px">
+                <FormControl isInvalid={!!errors.name}>
+                  <InputIconButton
+                    type={'text'}
+                    placeholder={'Add tag'}
+                    ariaLabel={'Add tag'}
+                    icon={FiPlusCircle}
+                    isDisabled={isCreating}
+                    onKeyDown={(e) => addEnterHandler(e)}
+                    onClick={addTag}
+                    {...register('name')}
+                  />
+                  <FormErrorMessage>{errors?.name?.message}</FormErrorMessage>
+                </FormControl>
+              </Box>
+            </Box>
+          </Flex>
+        </ModalBody>
+        <ModalFooter />
+      </ModalContent>
+    </Modal>
+  )
+}
diff --git a/app/trip/components/trip-form.tsx b/app/trip/components/trip-form.tsx
new file mode 100644
index 0000000..bcf9112
--- /dev/null
+++ b/app/trip/components/trip-form.tsx
@@ -0,0 +1,236 @@
+import { useForm, Controller } from 'react-hook-form'
+import {
+  FormControl,
+  FormLabel,
+  FormErrorMessage,
+  Image,
+  VStack,
+  HStack,
+  useColorModeValue,
+  CheckboxGroup,
+  Flex,
+  Checkbox,
+  Box,
+  useDisclosure
+} from '@chakra-ui/react'
+import { PrimaryButton, SecondaryButton } from '@/components/button'
+import { CustomDatePicker } from '@/components/date'
+import { InputForm } from '@/components/input'
+import { Loading } from '@/components/loading'
+import { getDateObj } from '@/libs/utils'
+import { TagFormModal } from '../components'
+import { useTripCreate, useTripUpdate, useTripTagCreateDelete } from '../hooks'
+import { TripSchema, tripSchemaResolver } from '../schema'
+
+export type TripDetailsArgs = {
+  id: string
+  image: string | null | undefined
+  title: string
+  dateFrom: string
+  dateTo: string | null | undefined
+  cost: string | null | undefined
+  costUnit: string | null | undefined
+  refetch: () => void
+  refetchLoading: boolean
+}
+
+export type TripTagsArgs = {
+  data: { id: string; tag_id: string; trip_id: string }[]
+  refetch: () => void
+  refetchLoading: boolean
+}
+
+export type TagsArgs = {
+  data: { id: string; name: string }[]
+  refetch: () => void
+  refetchLoading: boolean
+}
+
+type TripFormProps = {
+  tripDetails?: TripDetailsArgs
+  tripTags?: TripTagsArgs
+  tags: TagsArgs
+}
+
+export const TripForm = ({ tripDetails, tags, tripTags }: TripFormProps) => {
+  const imageSrc = useColorModeValue(
+    '/images/no_image_light.jpg',
+    '/images/no_image_dark.jpg'
+  )
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  const { createTrip, isTripCreating } = useTripCreate()
+
+  const { updateTrip, isTripUpdating } = useTripUpdate(tripTags, tripDetails)
+
+  const { isTripTagCreating, isTripTagDeleting } = useTripTagCreateDelete(
+    String(tripDetails?.id),
+    tripTags
+  )
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    formState: { errors }
+  } = useForm<TripSchema>({
+    defaultValues: {
+      title: tripDetails?.title,
+      date_from: tripDetails?.dateFrom
+        ? getDateObj(tripDetails.dateFrom)
+        : undefined,
+      date_to: tripDetails?.dateTo ? getDateObj(tripDetails.dateTo) : null,
+      image_storage_object_id: tripDetails?.image || null,
+      selectedTags: tripTags ? tripTags.data.map((tag) => tag.tag_id) : [],
+      cost: tripDetails?.cost ? tripDetails.cost.toString() : null,
+      cost_unit: tripDetails?.costUnit
+    },
+    resolver: tripSchemaResolver
+  })
+
+  const mutateFun = tripDetails ? updateTrip : createTrip
+  const isMutating = isTripCreating || isTripUpdating
+
+  return (
+    <>
+      <VStack
+        as="form"
+        gap={{ base: '30px', md: '40px' }}
+        onSubmit={handleSubmit(mutateFun)}
+      >
+        <FormControl isInvalid={!!errors.title}>
+          <FormLabel>Title</FormLabel>
+          <InputForm
+            type="text"
+            placeholder="Asakusa Temple"
+            {...register('title')}
+          />
+          <FormErrorMessage>{errors?.title?.message}</FormErrorMessage>
+        </FormControl>
+
+        <FormControl isInvalid={!!errors.date_from}>
+          <FormLabel>Date From</FormLabel>
+          <Controller
+            name="date_from"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <CustomDatePicker
+                onChange={onChange}
+                selectedDate={value}
+                placeholderText={'2024/01/01'}
+                dateFormat="yyyy/MM/dd"
+              />
+            )}
+          />
+          <FormErrorMessage>{errors?.date_from?.message}</FormErrorMessage>
+        </FormControl>
+
+        <FormControl isInvalid={!!errors.date_to}>
+          <FormLabel>Date To</FormLabel>
+
+          <Controller
+            name="date_to"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <CustomDatePicker
+                onChange={onChange}
+                selectedDate={value}
+                placeholderText={'2024/01/01'}
+                dateFormat="yyyy/MM/dd"
+              />
+            )}
+          />
+          <FormErrorMessage>{errors?.date_to?.message}</FormErrorMessage>
+        </FormControl>
+
+        {/* TODO Image Upload to storage & Send the URL string to DB */}
+        <FormControl isInvalid={!!errors.image_storage_object_id}>
+          <FormLabel>Image</FormLabel>
+          <HStack gap={{ base: '20px', md: '34px' }}>
+            <Image alt="" src={tripDetails?.image || imageSrc} width="50%" />
+            <PrimaryButton variant="outline">Select Image </PrimaryButton>
+          </HStack>
+          <FormErrorMessage>
+            {errors?.image_storage_object_id?.message}
+          </FormErrorMessage>
+        </FormControl>
+
+        <FormControl isInvalid={!!errors?.selectedTags}>
+          <FormLabel>Tag</FormLabel>
+
+          <Controller
+            name="selectedTags"
+            control={control}
+            render={({ field: { onChange } }) => (
+              <CheckboxGroup
+                defaultValue={tripTags?.data.map((tag) => tag.tag_id)}
+                onChange={onChange}
+              >
+                <Flex columnGap={'20px'} rowGap={'10px'} flexWrap={'wrap'}>
+                  {tags.refetchLoading ? (
+                    <Loading p="4px" size="md" />
+                  ) : (
+                    <>
+                      {tags.data.map((tag) => (
+                        <Checkbox
+                          key={tag.id}
+                          value={tag.id}
+                          isDisabled={isTripTagCreating || isTripTagDeleting}
+                        >
+                          {tag.name}
+                        </Checkbox>
+                      ))}
+                    </>
+                  )}
+                </Flex>
+              </CheckboxGroup>
+            )}
+          />
+
+          <FormErrorMessage>{errors?.selectedTags?.message}</FormErrorMessage>
+
+          <Box mt="20px">
+            <SecondaryButton variant={'outline'} size="sm" onClick={onOpen}>
+              Manage Tags
+            </SecondaryButton>
+          </Box>
+        </FormControl>
+
+        <Flex gap="20px" justify={'start'} width="100%">
+          <FormControl w={'180px'} isInvalid={!!errors.cost}>
+            <FormLabel>Cost</FormLabel>
+            <InputForm
+              type="text"
+              placeholder="10"
+              minW={'auto'}
+              {...register('cost')}
+            />
+            <FormErrorMessage>{errors?.cost?.message}</FormErrorMessage>
+          </FormControl>
+
+          <FormControl w={'90px'} isInvalid={!!errors.cost_unit}>
+            <FormLabel>Unit</FormLabel>
+            <InputForm
+              type="text"
+              placeholder="$"
+              minW={'10px'}
+              {...register('cost_unit')}
+            />
+            <FormErrorMessage>{errors?.cost_unit?.message}</FormErrorMessage>
+          </FormControl>
+        </Flex>
+
+        <PrimaryButton size="lg" type="submit" isDisabled={isMutating}>
+          Save Trip
+        </PrimaryButton>
+      </VStack>
+
+      <TagFormModal
+        isOpen={isOpen}
+        onClose={onClose}
+        allTags={tags.data}
+        tagsCollectionRefetch={tags.refetch}
+      />
+    </>
+  )
+}
diff --git a/app/trip/components/trip-search.tsx b/app/trip/components/trip-search.tsx
index 86ebaf0..a6fc3b7 100644
--- a/app/trip/components/trip-search.tsx
+++ b/app/trip/components/trip-search.tsx
@@ -2,7 +2,8 @@
 import { useRef, FormEvent, KeyboardEvent } from 'react'
 import { Box } from '@chakra-ui/react'
 import { useRouter } from 'next/navigation'
-import { InputSearch } from '@/components/input'
+import { FiSearch } from 'react-icons/fi'
+import { InputIconButton } from '@/components/input'
 
 export const TripSearch = () => {
   const router = useRouter()
@@ -37,13 +38,14 @@ export const TripSearch = () => {
 
   return (
     <Box as="form" onSubmit={submitHandler}>
-      <InputSearch
+      <InputIconButton
         type={'text'}
         name={'searchWord'}
         placeholder={'Search trips by title'}
         ariaLabel={'Search trips by title'}
         onKeyDown={(e) => submitByEnter(e)}
         ref={inputRef}
+        icon={FiSearch}
       />
     </Box>
   )
diff --git a/app/trip/create/page.tsx b/app/trip/create/page.tsx
index 8721b75..9255633 100644
--- a/app/trip/create/page.tsx
+++ b/app/trip/create/page.tsx
@@ -1,17 +1,57 @@
 'use client'
+
+import { NetworkStatus } from '@apollo/client'
 import { Heading, Box, Container, useColorModeValue } from '@chakra-ui/react'
+import { useUserId } from '@/providers/session-provider'
+import { TripForm } from '../components'
+import { useTagsCollectionQuery } from '@generated/api'
 
 export default function CreateTripPage() {
   const bg = useColorModeValue('white', 'gray.800')
   const color = useColorModeValue('black', 'gray.300')
+
+  const userId = useUserId()
+
+  const {
+    data: tagsData,
+    loading: tagsLoading,
+    refetch: tagsRefetch,
+    networkStatus: tagsNetWorkStatus
+  } = useTagsCollectionQuery({
+    variables: { userId },
+    notifyOnNetworkStatusChange: true
+  })
+
+  const tagsCollectionRefetch = () => {
+    tagsRefetch()
+  }
+  const tagsRefetchLoading = tagsNetWorkStatus === NetworkStatus.refetch
+
+  if (!tagsData && !tagsLoading) throw new Error('No tags data found')
+
   return (
-    <Box as="main" minH="100vh" bg={bg} color={color}>
+    <Box as="main" minH="100svh" bg={bg} color={color}>
       <Container
-        maxW={{ base: '100%', lg: 'container.xl' }}
+        maxW={{ base: '100%', lg: 'container.sm' }}
         pt={{ base: '20px', md: '30px' }}
         pb={{ base: '40px', md: '80px' }}
       >
-        <Heading>Create Trip</Heading>
+        <Heading as="h1" fontSize={{ base: '2xl', md: '4xl' }}>
+          Create Trip
+        </Heading>
+        <Box mt="40px">
+          <TripForm
+            tags={{
+              data:
+                tagsData?.tagsCollection?.edges.map((tag) => ({
+                  id: tag.node.id,
+                  name: tag.node.name
+                })) || [],
+              refetch: tagsCollectionRefetch,
+              refetchLoading: tagsRefetchLoading
+            }}
+          />
+        </Box>
       </Container>
     </Box>
   )
diff --git a/app/trip/graphql/mutation/createTag.graphql b/app/trip/graphql/mutation/createTag.graphql
new file mode 100644
index 0000000..1eb11e7
--- /dev/null
+++ b/app/trip/graphql/mutation/createTag.graphql
@@ -0,0 +1,9 @@
+mutation createTag($name: String!, $userId: UUID!) {
+  insertIntotagsCollection(objects: [{ name: $name, user_id: $userId }]) {
+    records {
+      __typename
+      id
+      name
+    }
+  }
+}
diff --git a/app/trip/graphql/mutation/createTrip.graphql b/app/trip/graphql/mutation/createTrip.graphql
index ccbf4b1..dc099a5 100644
--- a/app/trip/graphql/mutation/createTrip.graphql
+++ b/app/trip/graphql/mutation/createTrip.graphql
@@ -1,19 +1,5 @@
-mutation createTrip(
-  $user_id: UUID!
-  $title: String!
-  $date_from: Date
-  $date_to: Date
-) {
-  insertIntotripsCollection(
-    objects: [
-      {
-        user_id: $user_id
-        title: $title
-        date_from: $date_from
-        date_to: $date_to
-      }
-    ]
-  ) {
+mutation createTrip($object: tripsInsertInput!) {
+  insertIntotripsCollection(objects: [$object]) {
     records {
       __typename
       id
diff --git a/app/trip/graphql/mutation/createTripTag.graphql b/app/trip/graphql/mutation/createTripTag.graphql
new file mode 100644
index 0000000..9a77c36
--- /dev/null
+++ b/app/trip/graphql/mutation/createTripTag.graphql
@@ -0,0 +1,12 @@
+mutation createTripTag($tripId: UUID!, $tagId: UUID!) {
+  insertIntotrip_tagsCollection(
+    objects: [{ trip_id: $tripId, tag_id: $tagId }]
+  ) {
+    records {
+      __typename
+      id
+      tag_id
+      trip_id
+    }
+  }
+}
diff --git a/app/trip/graphql/mutation/deleteTag.graphql b/app/trip/graphql/mutation/deleteTag.graphql
new file mode 100644
index 0000000..b312002
--- /dev/null
+++ b/app/trip/graphql/mutation/deleteTag.graphql
@@ -0,0 +1,9 @@
+mutation deleteTag($id: UUID!) {
+  deleteFromtagsCollection(filter: { id: { eq: $id } }) {
+    records {
+      __typename
+      id
+      name
+    }
+  }
+}
diff --git a/app/trip/graphql/mutation/deleteTripTag.graphql b/app/trip/graphql/mutation/deleteTripTag.graphql
new file mode 100644
index 0000000..0beb20e
--- /dev/null
+++ b/app/trip/graphql/mutation/deleteTripTag.graphql
@@ -0,0 +1,8 @@
+mutation deleteTripTag($id: UUID!) {
+  deleteFromtrip_tagsCollection(filter: { id: { eq: $id } }) {
+    records {
+      __typename
+      id
+    }
+  }
+}
diff --git a/app/trip/graphql/mutation/updateTrip.graphql b/app/trip/graphql/mutation/updateTrip.graphql
new file mode 100644
index 0000000..eae35f7
--- /dev/null
+++ b/app/trip/graphql/mutation/updateTrip.graphql
@@ -0,0 +1,8 @@
+mutation updateTrip($id: UUID!, $set: tripsUpdateInput!) {
+  updatetripsCollection(set: $set, filter: { id: { eq: $id } }) {
+    records {
+      id
+      title
+    }
+  }
+}
diff --git a/app/trip/graphql/query/tagsCollection.graphql b/app/trip/graphql/query/tagsCollection.graphql
new file mode 100644
index 0000000..77af9bf
--- /dev/null
+++ b/app/trip/graphql/query/tagsCollection.graphql
@@ -0,0 +1,13 @@
+query tagsCollection($userId: UUID!) {
+  tagsCollection(
+    filter: { user_id: { eq: $userId } }
+    orderBy: { created_at: AscNullsLast }
+  ) {
+    edges {
+      node {
+        id
+        name
+      }
+    }
+  }
+}
diff --git a/app/trip/graphql/query/tripDetails.graphql b/app/trip/graphql/query/tripDetails.graphql
index 46480da..4918ae8 100644
--- a/app/trip/graphql/query/tripDetails.graphql
+++ b/app/trip/graphql/query/tripDetails.graphql
@@ -7,6 +7,8 @@ query tripDetails($id: UUID!) {
         date_from
         date_to
         image_storage_object_id
+        cost
+        cost_unit
         invitationsCollection {
           edges {
             node {
diff --git a/app/trip/graphql/query/tripTagsCollection.graphql b/app/trip/graphql/query/tripTagsCollection.graphql
new file mode 100644
index 0000000..07d45ae
--- /dev/null
+++ b/app/trip/graphql/query/tripTagsCollection.graphql
@@ -0,0 +1,11 @@
+query tripTagsCollection($filter: trip_tagsFilter) {
+  trip_tagsCollection(filter: $filter) {
+    edges {
+      node {
+        id
+        trip_id
+        tag_id
+      }
+    }
+  }
+}
diff --git a/app/trip/hooks/index.ts b/app/trip/hooks/index.ts
new file mode 100644
index 0000000..d6950e2
--- /dev/null
+++ b/app/trip/hooks/index.ts
@@ -0,0 +1,5 @@
+export { useTripsGet } from './useTripsGet'
+export { useTagCreateDelete } from './useTagCreateDelete'
+export { useTripCreate } from './useTripCreate'
+export { useTripTagCreateDelete } from './useTripTagCreateDelete'
+export { useTripUpdate } from './useTripUpdate'
diff --git a/app/trip/hooks/useTagCreateDelete.ts b/app/trip/hooks/useTagCreateDelete.ts
new file mode 100644
index 0000000..18b38e1
--- /dev/null
+++ b/app/trip/hooks/useTagCreateDelete.ts
@@ -0,0 +1,88 @@
+import { KeyboardEvent } from 'react'
+import { useForm } from 'react-hook-form'
+import { useToast } from '@chakra-ui/react'
+import { useUserId } from '@/providers/session-provider'
+import { TagSchema, tagSchemaResolver } from '../schema'
+import { useCreateTagMutation, useDeleteTagMutation } from '@generated/api'
+
+export const useTagCreateDelete = (tagsCollectionRefetch: () => void) => {
+  const userId = useUserId()
+  const toast = useToast()
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors }
+  } = useForm<TagSchema>({
+    resolver: tagSchemaResolver
+  })
+
+  const [createTagMutation, { loading: isCreating }] = useCreateTagMutation()
+  const [deleteTagMutation, { loading: isDeleting }] = useDeleteTagMutation()
+
+  const addTag = async (input: TagSchema) => {
+    try {
+      await createTagMutation({
+        variables: {
+          name: input.name,
+          userId: userId
+        }
+      })
+
+      reset()
+      tagsCollectionRefetch()
+    } catch (error) {
+      console.error(error)
+      toast({
+        title: "We're sorry, but you failed to create a tag",
+        description:
+          error instanceof Error ? error.message : 'Please try again later.',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+        position: 'top'
+      })
+    }
+  }
+
+  const addEnterHandler = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      handleSubmit(addTag)()
+    }
+  }
+
+  const deleteTag = async (id: string) => {
+    try {
+      await deleteTagMutation({
+        variables: {
+          id: id
+        }
+      })
+
+      tagsCollectionRefetch()
+    } catch (error) {
+      console.error(error)
+      toast({
+        title: "We're sorry, but you failed to delete a tag",
+        description:
+          error instanceof Error ? error.message : 'Please try again later.',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+        position: 'top'
+      })
+    }
+  }
+
+  return {
+    addEnterHandler,
+    addTag: handleSubmit((d) => addTag(d)),
+    deleteTag,
+    isCreating,
+    isDeleting,
+    register,
+    errors
+  }
+}
diff --git a/app/trip/hooks/useTripCreate.ts b/app/trip/hooks/useTripCreate.ts
new file mode 100644
index 0000000..2aee89d
--- /dev/null
+++ b/app/trip/hooks/useTripCreate.ts
@@ -0,0 +1,84 @@
+import { useToast } from '@chakra-ui/react'
+import { useRouter } from 'next/navigation'
+import { formatToISODate } from '@/libs/utils'
+import { useUserId } from '@/providers/session-provider'
+import { TripSchema } from '../schema'
+import { useTripsGet } from '.'
+import { useCreateTripMutation, useCreateTripTagMutation } from '@generated/api'
+
+export const useTripCreate = () => {
+  const toast = useToast()
+  const router = useRouter()
+  const userId = useUserId()
+  const [createTripMutation, { loading: isTripCreating }] =
+    useCreateTripMutation()
+
+  const [createTripTagMutation, { loading: isTripTagCreating }] =
+    useCreateTripTagMutation()
+
+  const { tripsRefetch } = useTripsGet()
+
+  const createTrip = async (data: TripSchema) => {
+    try {
+      const res = await createTripMutation({
+        variables: {
+          object: {
+            title: data.title,
+            date_from: formatToISODate(data.date_from),
+            date_to: data.date_to ? formatToISODate(data.date_to) : null,
+            image_storage_object_id: data.image_storage_object_id,
+            cost: data.cost,
+            cost_unit: data.cost_unit,
+            user_id: userId
+          }
+        }
+      })
+
+      const createdTripId = res.data?.insertIntotripsCollection?.records[0]?.id
+
+      if (!createdTripId) throw new Error('Failed to create a trip')
+
+      const selectedTags = data.selectedTags
+      const createPromises = selectedTags.map((tag) =>
+        createTripTagMutation({
+          variables: {
+            tripId: createdTripId,
+            tagId: tag
+          }
+        })
+      )
+
+      await Promise.all([...createPromises])
+
+      tripsRefetch()
+      router.push('/')
+
+      toast({
+        title: 'Successfully created!',
+        status: 'success',
+        duration: 2000,
+        isClosable: true,
+        position: 'top'
+      })
+    } catch (error) {
+      console.error(error)
+      window.scroll({ top: 0 })
+
+      toast({
+        title: "We're sorry, but you failed to create a trip",
+        description:
+          error instanceof Error ? error.message : 'Please try again later.',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+        position: 'top'
+      })
+    }
+  }
+
+  return {
+    createTrip,
+    isTripCreating,
+    isTripTagsUpdating: isTripTagCreating
+  }
+}
diff --git a/app/trip/hooks/useTripTagCreateDelete.ts b/app/trip/hooks/useTripTagCreateDelete.ts
new file mode 100644
index 0000000..a740afe
--- /dev/null
+++ b/app/trip/hooks/useTripTagCreateDelete.ts
@@ -0,0 +1,64 @@
+import { useToast } from '@chakra-ui/react'
+import { TripTagsArgs } from '../components/trip-form'
+import {
+  useCreateTripTagMutation,
+  useDeleteTripTagMutation
+} from '@generated/api'
+
+export const useTripTagCreateDelete = (
+  tripId: string,
+  tripTags?: TripTagsArgs
+) => {
+  const toast = useToast()
+  const [createTripTagMutation, { loading: isTripTagCreating }] =
+    useCreateTripTagMutation()
+  const [deleteTripTagMutation, { loading: isTripTagDeleting }] =
+    useDeleteTripTagMutation()
+
+  const tagClickHandler = async (selectedTagId: string) => {
+    try {
+      const isTagIdAlreadyExists = tripTags?.data.find(
+        (tripTag) => tripTag.tag_id === selectedTagId
+      )
+
+      if (isTagIdAlreadyExists) {
+        await deleteTripTagMutation({
+          variables: {
+            id: isTagIdAlreadyExists.id
+          }
+        })
+        tripTags?.refetch()
+        return
+      }
+
+      if (!isTagIdAlreadyExists) {
+        await createTripTagMutation({
+          variables: {
+            tripId: tripId,
+            tagId: selectedTagId
+          }
+        })
+        tripTags?.refetch()
+      }
+    } catch (error) {
+      console.error(error)
+      window.scroll({ top: 0 })
+
+      toast({
+        title: "We're sorry, but you failed to update a tag",
+        description:
+          error instanceof Error ? error.message : 'Please try again later.',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+        position: 'top'
+      })
+    }
+  }
+
+  return {
+    tagClickHandler,
+    isTripTagCreating,
+    isTripTagDeleting
+  }
+}
diff --git a/app/trip/hooks/useTripUpdate.ts b/app/trip/hooks/useTripUpdate.ts
new file mode 100644
index 0000000..cab109d
--- /dev/null
+++ b/app/trip/hooks/useTripUpdate.ts
@@ -0,0 +1,109 @@
+import { useToast } from '@chakra-ui/react'
+import { useRouter } from 'next/navigation'
+import { formatToISODate } from '@/libs/utils'
+import { TripDetailsArgs, TripTagsArgs } from '../components/trip-form'
+import { TripSchema } from '../schema'
+import { useTripsGet } from '.'
+import {
+  useUpdateTripMutation,
+  useCreateTripTagMutation,
+  useDeleteTripTagMutation
+} from '@generated/api'
+
+export const useTripUpdate = (
+  tripTags?: TripTagsArgs,
+  tripDetails?: TripDetailsArgs
+) => {
+  const toast = useToast()
+  const router = useRouter()
+  const [updateTripMutation, { loading: isTripUpdating }] =
+    useUpdateTripMutation()
+
+  const [createTripTagMutation, { loading: isTripTagCreating }] =
+    useCreateTripTagMutation()
+  const [deleteTripTagMutation, { loading: isTripTagDeleting }] =
+    useDeleteTripTagMutation()
+
+  const { tripsRefetch } = useTripsGet()
+
+  const updateTrip = async (data: TripSchema) => {
+    if (!tripDetails) throw new Error('Trip details is not found')
+
+    try {
+      // Trip Update
+      await updateTripMutation({
+        variables: {
+          id: tripDetails.id,
+          set: {
+            title: data.title,
+            date_from: formatToISODate(data.date_from),
+            date_to: data.date_to ? formatToISODate(data.date_to) : null,
+            image_storage_object_id: data.image_storage_object_id,
+            cost: data.cost,
+            cost_unit: data.cost_unit
+          }
+        }
+      })
+
+      // TripTags Update
+      const selectedTags = data.selectedTags
+      const tripTagsArray = tripTags?.data || []
+
+      const deletePromises = tripTagsArray
+        .filter((tag) => !selectedTags.includes(tag.tag_id))
+        .map((tag) =>
+          deleteTripTagMutation({
+            variables: {
+              id: tag.id
+            }
+          })
+        )
+      const createPromises = selectedTags
+        .filter((tag) => !tripTagsArray.find((t) => t.tag_id === tag))
+        .map((tag) =>
+          createTripTagMutation({
+            variables: {
+              tripId: tripDetails.id,
+              tagId: tag
+            }
+          })
+        )
+
+      await Promise.all([...deletePromises, ...createPromises])
+
+      tripDetails.refetch()
+      tripTags?.refetch()
+      tripsRefetch()
+      router.push(`/trip/${tripDetails.id}`)
+
+      toast({
+        title: 'Successfully updated!',
+        status: 'success',
+        duration: 2000,
+        isClosable: true,
+        position: 'top'
+      })
+    } catch (error) {
+      console.error(error)
+      // NOTE: For case tripTags (one or all) updating failed, refetch tripTags to show the latest data
+      tripTags?.refetch()
+      window.scroll({ top: 0 })
+
+      toast({
+        title: "We're sorry, but you failed to update a trip",
+        description:
+          error instanceof Error ? error.message : 'Please try again later.',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+        position: 'top'
+      })
+    }
+  }
+
+  return {
+    updateTrip,
+    isTripUpdating,
+    isTripTagsUpdating: isTripTagCreating || isTripTagDeleting
+  }
+}
diff --git a/app/trip/hooks/useTripsGet.ts b/app/trip/hooks/useTripsGet.ts
new file mode 100644
index 0000000..13203a3
--- /dev/null
+++ b/app/trip/hooks/useTripsGet.ts
@@ -0,0 +1,73 @@
+import { NetworkStatus } from '@apollo/client'
+import { useUserId } from '@/providers/session-provider'
+import { useTripsCollectionQuery, TripsOrderBy } from '@generated/api'
+
+export const useTripsGet = (searchWord?: string) => {
+  const userId = useUserId()
+
+  const { data, loading, error, fetchMore, refetch, networkStatus } =
+    useTripsCollectionQuery({
+      variables: {
+        filter: {
+          user_id: { eq: userId },
+          ...(searchWord &&
+            searchWord.length && { title: { like: `%${searchWord}%` } })
+        },
+        first: 12,
+        after: null
+      }
+    })
+
+  const refetchLoading = networkStatus === NetworkStatus.refetch
+
+  const tripsRefetch = () => {
+    refetch({
+      filter: {
+        user_id: { eq: userId },
+        ...(searchWord &&
+          searchWord.length && { title: { like: `%${searchWord}%` } })
+      },
+      first: 12,
+      after: null
+    })
+  }
+
+  const handleSortBy = (sortObj: TripsOrderBy) => {
+    refetch({
+      orderBy: sortObj
+    })
+  }
+
+  const handleLoadMore = (endCursor: string | null | undefined) => {
+    fetchMore({
+      variables: {
+        after: endCursor
+      },
+      updateQuery: (previousQueryResult, { fetchMoreResult }) => {
+        const newEdges = fetchMoreResult?.tripsCollection?.edges
+        const pageInfo = fetchMoreResult?.tripsCollection?.pageInfo
+        const previousCollection = previousQueryResult?.tripsCollection
+        return newEdges && newEdges.length && pageInfo && previousCollection
+          ? {
+              tripsCollection: {
+                __typename: previousCollection.__typename,
+                edges: [...previousCollection.edges, ...newEdges],
+                pageInfo
+              },
+              __typename: previousQueryResult.__typename
+            }
+          : previousQueryResult
+      }
+    })
+  }
+
+  return {
+    tripsData: data?.tripsCollection,
+    loading,
+    error,
+    handleSortBy,
+    handleLoadMore,
+    tripsRefetch,
+    refetchLoading
+  }
+}
diff --git a/app/trip/schema.ts b/app/trip/schema.ts
new file mode 100644
index 0000000..b220989
--- /dev/null
+++ b/app/trip/schema.ts
@@ -0,0 +1,25 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import * as z from 'zod'
+
+const tripSchema = z.object({
+  title: z.string().min(1, { message: 'Please enter a title' }),
+  date_from: z.date({
+    required_error: 'Please select a date from',
+    invalid_type_error: "That's not a date"
+  }),
+  date_to: z.date().nullable(),
+  image_storage_object_id: z.string().nullable(),
+  selectedTags: z.array(z.string()),
+  cost: z.string().nullable(),
+  cost_unit: z.string().nullable()
+})
+
+export type TripSchema = z.infer<typeof tripSchema>
+export const tripSchemaResolver = zodResolver(tripSchema)
+
+const tagSchema = z.object({
+  name: z.string().min(1, { message: 'Tag name is required' })
+})
+
+export type TagSchema = z.infer<typeof tagSchema>
+export const tagSchemaResolver = zodResolver(tagSchema)
diff --git a/graphql-codegen/codegen.ts b/graphql-codegen/codegen.ts
index eac0db0..327bbea 100644
--- a/graphql-codegen/codegen.ts
+++ b/graphql-codegen/codegen.ts
@@ -50,8 +50,8 @@ const config: CodegenConfig = {
       Time: 'string',
       Datetime: 'string',
       JSON: 'string',
-      BigInt: 'number',
-      BigFloat: 'number',
+      BigInt: 'string',
+      BigFloat: 'string',
       Opaque: 'any'
     }
   },
diff --git a/graphql-codegen/generated/api.ts b/graphql-codegen/generated/api.ts
index 35f4905..e00e5f1 100644
--- a/graphql-codegen/generated/api.ts
+++ b/graphql-codegen/generated/api.ts
@@ -28,8 +28,8 @@ export type Scalars = {
   Boolean: { input: boolean; output: boolean }
   Int: { input: number; output: number }
   Float: { input: number; output: number }
-  BigFloat: { input: number; output: number }
-  BigInt: { input: number; output: number }
+  BigFloat: { input: string; output: string }
+  BigInt: { input: string; output: string }
   Cursor: { input: any; output: any }
   Date: { input: string; output: string }
   Datetime: { input: string; output: string }
@@ -468,6 +468,7 @@ export type Activity = Node & {
   __typename?: 'activity'
   address?: Maybe<Scalars['String']['output']>
   cost?: Maybe<Scalars['BigFloat']['output']>
+  cost_unit?: Maybe<Scalars['String']['output']>
   id: Scalars['UUID']['output']
   image_storage_object_id?: Maybe<Scalars['UUID']['output']>
   memo?: Maybe<Scalars['String']['output']>
@@ -504,6 +505,7 @@ export type ActivityEdge = {
 export type ActivityFilter = {
   address?: InputMaybe<StringFilter>
   cost?: InputMaybe<BigFloatFilter>
+  cost_unit?: InputMaybe<StringFilter>
   id?: InputMaybe<UuidFilter>
   image_storage_object_id?: InputMaybe<UuidFilter>
   memo?: InputMaybe<StringFilter>
@@ -518,6 +520,7 @@ export type ActivityFilter = {
 export type ActivityInsertInput = {
   address?: InputMaybe<Scalars['String']['input']>
   cost?: InputMaybe<Scalars['BigFloat']['input']>
+  cost_unit?: InputMaybe<Scalars['String']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   image_storage_object_id?: InputMaybe<Scalars['UUID']['input']>
   memo?: InputMaybe<Scalars['String']['input']>
@@ -539,6 +542,7 @@ export type ActivityInsertResponse = {
 export type ActivityOrderBy = {
   address?: InputMaybe<OrderByDirection>
   cost?: InputMaybe<OrderByDirection>
+  cost_unit?: InputMaybe<OrderByDirection>
   id?: InputMaybe<OrderByDirection>
   image_storage_object_id?: InputMaybe<OrderByDirection>
   memo?: InputMaybe<OrderByDirection>
@@ -552,6 +556,7 @@ export type ActivityOrderBy = {
 export type ActivityUpdateInput = {
   address?: InputMaybe<Scalars['String']['input']>
   cost?: InputMaybe<Scalars['BigFloat']['input']>
+  cost_unit?: InputMaybe<Scalars['String']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   image_storage_object_id?: InputMaybe<Scalars['UUID']['input']>
   memo?: InputMaybe<Scalars['String']['input']>
@@ -677,11 +682,14 @@ export type Permission_Level_EnumFilter = {
 
 export type Tags = Node & {
   __typename?: 'tags'
+  created_at: Scalars['Datetime']['output']
   id: Scalars['UUID']['output']
   name: Scalars['String']['output']
   /** Globally Unique Record Identifier */
   nodeId: Scalars['ID']['output']
   trip_tagsCollection?: Maybe<Trip_TagsConnection>
+  user_id: Scalars['UUID']['output']
+  users: Users
 }
 
 export type TagsTrip_TagsCollectionArgs = {
@@ -714,14 +722,18 @@ export type TagsEdge = {
 }
 
 export type TagsFilter = {
+  created_at?: InputMaybe<DatetimeFilter>
   id?: InputMaybe<UuidFilter>
   name?: InputMaybe<StringFilter>
   nodeId?: InputMaybe<IdFilter>
+  user_id?: InputMaybe<UuidFilter>
 }
 
 export type TagsInsertInput = {
+  created_at?: InputMaybe<Scalars['Datetime']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   name?: InputMaybe<Scalars['String']['input']>
+  user_id?: InputMaybe<Scalars['UUID']['input']>
 }
 
 export type TagsInsertResponse = {
@@ -733,13 +745,17 @@ export type TagsInsertResponse = {
 }
 
 export type TagsOrderBy = {
+  created_at?: InputMaybe<OrderByDirection>
   id?: InputMaybe<OrderByDirection>
   name?: InputMaybe<OrderByDirection>
+  user_id?: InputMaybe<OrderByDirection>
 }
 
 export type TagsUpdateInput = {
+  created_at?: InputMaybe<Scalars['Datetime']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   name?: InputMaybe<Scalars['String']['input']>
+  user_id?: InputMaybe<Scalars['UUID']['input']>
 }
 
 export type TagsUpdateResponse = {
@@ -889,9 +905,10 @@ export type Trips = Node & {
   __typename?: 'trips'
   activityCollection?: Maybe<ActivityConnection>
   cost?: Maybe<Scalars['BigFloat']['output']>
+  cost_unit?: Maybe<Scalars['String']['output']>
   created_at: Scalars['Datetime']['output']
-  date_from: Scalars['Date']['output']
-  date_to?: Maybe<Scalars['Date']['output']>
+  date_from: Scalars['Datetime']['output']
+  date_to?: Maybe<Scalars['Datetime']['output']>
   description?: Maybe<Scalars['String']['output']>
   id: Scalars['UUID']['output']
   image_storage_object_id?: Maybe<Scalars['UUID']['output']>
@@ -953,9 +970,10 @@ export type TripsEdge = {
 
 export type TripsFilter = {
   cost?: InputMaybe<BigFloatFilter>
+  cost_unit?: InputMaybe<StringFilter>
   created_at?: InputMaybe<DatetimeFilter>
-  date_from?: InputMaybe<DateFilter>
-  date_to?: InputMaybe<DateFilter>
+  date_from?: InputMaybe<DatetimeFilter>
+  date_to?: InputMaybe<DatetimeFilter>
   description?: InputMaybe<StringFilter>
   id?: InputMaybe<UuidFilter>
   image_storage_object_id?: InputMaybe<UuidFilter>
@@ -966,9 +984,10 @@ export type TripsFilter = {
 
 export type TripsInsertInput = {
   cost?: InputMaybe<Scalars['BigFloat']['input']>
+  cost_unit?: InputMaybe<Scalars['String']['input']>
   created_at?: InputMaybe<Scalars['Datetime']['input']>
-  date_from?: InputMaybe<Scalars['Date']['input']>
-  date_to?: InputMaybe<Scalars['Date']['input']>
+  date_from?: InputMaybe<Scalars['Datetime']['input']>
+  date_to?: InputMaybe<Scalars['Datetime']['input']>
   description?: InputMaybe<Scalars['String']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   image_storage_object_id?: InputMaybe<Scalars['UUID']['input']>
@@ -986,6 +1005,7 @@ export type TripsInsertResponse = {
 
 export type TripsOrderBy = {
   cost?: InputMaybe<OrderByDirection>
+  cost_unit?: InputMaybe<OrderByDirection>
   created_at?: InputMaybe<OrderByDirection>
   date_from?: InputMaybe<OrderByDirection>
   date_to?: InputMaybe<OrderByDirection>
@@ -998,9 +1018,10 @@ export type TripsOrderBy = {
 
 export type TripsUpdateInput = {
   cost?: InputMaybe<Scalars['BigFloat']['input']>
+  cost_unit?: InputMaybe<Scalars['String']['input']>
   created_at?: InputMaybe<Scalars['Datetime']['input']>
-  date_from?: InputMaybe<Scalars['Date']['input']>
-  date_to?: InputMaybe<Scalars['Date']['input']>
+  date_from?: InputMaybe<Scalars['Datetime']['input']>
+  date_to?: InputMaybe<Scalars['Datetime']['input']>
   description?: InputMaybe<Scalars['String']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   image_storage_object_id?: InputMaybe<Scalars['UUID']['input']>
@@ -1025,6 +1046,7 @@ export type Users = Node & {
   /** Globally Unique Record Identifier */
   nodeId: Scalars['ID']['output']
   profile_picture_url?: Maybe<Scalars['String']['output']>
+  tagsCollection?: Maybe<TagsConnection>
   tripsCollection?: Maybe<TripsConnection>
 }
 
@@ -1037,6 +1059,15 @@ export type UsersInvitationsCollectionArgs = {
   orderBy?: InputMaybe<Array<InvitationsOrderBy>>
 }
 
+export type UsersTagsCollectionArgs = {
+  after?: InputMaybe<Scalars['Cursor']['input']>
+  before?: InputMaybe<Scalars['Cursor']['input']>
+  filter?: InputMaybe<TagsFilter>
+  first?: InputMaybe<Scalars['Int']['input']>
+  last?: InputMaybe<Scalars['Int']['input']>
+  orderBy?: InputMaybe<Array<TagsOrderBy>>
+}
+
 export type UsersTripsCollectionArgs = {
   after?: InputMaybe<Scalars['Cursor']['input']>
   before?: InputMaybe<Scalars['Cursor']['input']>
@@ -1152,18 +1183,28 @@ export type ActivityCollectionQuery = {
         address?: string | null
         url?: string | null
         memo?: string | null
-        cost?: number | null
+        cost?: string | null
         image_storage_object_id?: string | null
       }
     }>
   } | null
 }
 
+export type CreateTagMutationVariables = Exact<{
+  name: Scalars['String']['input']
+  userId: Scalars['UUID']['input']
+}>
+
+export type CreateTagMutation = {
+  __typename: 'Mutation'
+  insertIntotagsCollection?: {
+    __typename: 'tagsInsertResponse'
+    records: Array<{ __typename: 'tags'; id: string; name: string }>
+  } | null
+}
+
 export type CreateTripMutationVariables = Exact<{
-  user_id: Scalars['UUID']['input']
-  title: Scalars['String']['input']
-  date_from?: InputMaybe<Scalars['Date']['input']>
-  date_to?: InputMaybe<Scalars['Date']['input']>
+  object: TripsInsertInput
 }>
 
 export type CreateTripMutation = {
@@ -1174,6 +1215,76 @@ export type CreateTripMutation = {
   } | null
 }
 
+export type CreateTripTagMutationVariables = Exact<{
+  tripId: Scalars['UUID']['input']
+  tagId: Scalars['UUID']['input']
+}>
+
+export type CreateTripTagMutation = {
+  __typename: 'Mutation'
+  insertIntotrip_tagsCollection?: {
+    __typename: 'trip_tagsInsertResponse'
+    records: Array<{
+      __typename: 'trip_tags'
+      id: string
+      tag_id?: string | null
+      trip_id?: string | null
+    }>
+  } | null
+}
+
+export type DeleteTagMutationVariables = Exact<{
+  id: Scalars['UUID']['input']
+}>
+
+export type DeleteTagMutation = {
+  __typename: 'Mutation'
+  deleteFromtagsCollection: {
+    __typename: 'tagsDeleteResponse'
+    records: Array<{ __typename: 'tags'; id: string; name: string }>
+  }
+}
+
+export type DeleteTripTagMutationVariables = Exact<{
+  id: Scalars['UUID']['input']
+}>
+
+export type DeleteTripTagMutation = {
+  __typename: 'Mutation'
+  deleteFromtrip_tagsCollection: {
+    __typename: 'trip_tagsDeleteResponse'
+    records: Array<{ __typename: 'trip_tags'; id: string }>
+  }
+}
+
+export type UpdateTripMutationVariables = Exact<{
+  id: Scalars['UUID']['input']
+  set: TripsUpdateInput
+}>
+
+export type UpdateTripMutation = {
+  __typename: 'Mutation'
+  updatetripsCollection: {
+    __typename: 'tripsUpdateResponse'
+    records: Array<{ __typename: 'trips'; id: string; title: string }>
+  }
+}
+
+export type TagsCollectionQueryVariables = Exact<{
+  userId: Scalars['UUID']['input']
+}>
+
+export type TagsCollectionQuery = {
+  __typename: 'Query'
+  tagsCollection?: {
+    __typename: 'tagsConnection'
+    edges: Array<{
+      __typename: 'tagsEdge'
+      node: { __typename: 'tags'; id: string; name: string }
+    }>
+  } | null
+}
+
 export type TripDetailsQueryVariables = Exact<{
   id: Scalars['UUID']['input']
 }>
@@ -1191,6 +1302,8 @@ export type TripDetailsQuery = {
         date_from: string
         date_to?: string | null
         image_storage_object_id?: string | null
+        cost?: string | null
+        cost_unit?: string | null
         invitationsCollection?: {
           __typename: 'invitationsConnection'
           edges: Array<{
@@ -1234,6 +1347,26 @@ export type TripDetailsQuery = {
   } | null
 }
 
+export type TripTagsCollectionQueryVariables = Exact<{
+  filter?: InputMaybe<Trip_TagsFilter>
+}>
+
+export type TripTagsCollectionQuery = {
+  __typename: 'Query'
+  trip_tagsCollection?: {
+    __typename: 'trip_tagsConnection'
+    edges: Array<{
+      __typename: 'trip_tagsEdge'
+      node: {
+        __typename: 'trip_tags'
+        id: string
+        trip_id?: string | null
+        tag_id?: string | null
+      }
+    }>
+  } | null
+}
+
 export type TripsCollectionQueryVariables = Exact<{
   filter?: InputMaybe<TripsFilter>
   orderBy?: InputMaybe<Array<TripsOrderBy> | TripsOrderBy>
@@ -1460,24 +1593,66 @@ export function refetchActivityCollectionQuery(
 ) {
   return { query: ActivityCollectionDocument, variables: variables }
 }
+export const CreateTagDocument = gql`
+  mutation createTag($name: String!, $userId: UUID!) {
+    __typename
+    insertIntotagsCollection(objects: [{ name: $name, user_id: $userId }]) {
+      __typename
+      records {
+        __typename
+        id
+        name
+      }
+    }
+  }
+`
+export type CreateTagMutationFn = Apollo.MutationFunction<
+  CreateTagMutation,
+  CreateTagMutationVariables
+>
+
+/**
+ * __useCreateTagMutation__
+ *
+ * To run a mutation, you first call `useCreateTagMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateTagMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createTagMutation, { data, loading, error }] = useCreateTagMutation({
+ *   variables: {
+ *      name: // value for 'name'
+ *      userId: // value for 'userId'
+ *   },
+ * });
+ */
+export function useCreateTagMutation(
+  baseOptions?: Apollo.MutationHookOptions<
+    CreateTagMutation,
+    CreateTagMutationVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<CreateTagMutation, CreateTagMutationVariables>(
+    CreateTagDocument,
+    options
+  )
+}
+export type CreateTagMutationHookResult = ReturnType<
+  typeof useCreateTagMutation
+>
+export type CreateTagMutationResult = Apollo.MutationResult<CreateTagMutation>
+export type CreateTagMutationOptions = Apollo.BaseMutationOptions<
+  CreateTagMutation,
+  CreateTagMutationVariables
+>
 export const CreateTripDocument = gql`
-  mutation createTrip(
-    $user_id: UUID!
-    $title: String!
-    $date_from: Date
-    $date_to: Date
-  ) {
+  mutation createTrip($object: tripsInsertInput!) {
     __typename
-    insertIntotripsCollection(
-      objects: [
-        {
-          user_id: $user_id
-          title: $title
-          date_from: $date_from
-          date_to: $date_to
-        }
-      ]
-    ) {
+    insertIntotripsCollection(objects: [$object]) {
       __typename
       records {
         __typename
@@ -1505,10 +1680,7 @@ export type CreateTripMutationFn = Apollo.MutationFunction<
  * @example
  * const [createTripMutation, { data, loading, error }] = useCreateTripMutation({
  *   variables: {
- *      user_id: // value for 'user_id'
- *      title: // value for 'title'
- *      date_from: // value for 'date_from'
- *      date_to: // value for 'date_to'
+ *      object: // value for 'object'
  *   },
  * });
  */
@@ -1532,6 +1704,322 @@ export type CreateTripMutationOptions = Apollo.BaseMutationOptions<
   CreateTripMutation,
   CreateTripMutationVariables
 >
+export const CreateTripTagDocument = gql`
+  mutation createTripTag($tripId: UUID!, $tagId: UUID!) {
+    __typename
+    insertIntotrip_tagsCollection(
+      objects: [{ trip_id: $tripId, tag_id: $tagId }]
+    ) {
+      __typename
+      records {
+        __typename
+        id
+        tag_id
+        trip_id
+      }
+    }
+  }
+`
+export type CreateTripTagMutationFn = Apollo.MutationFunction<
+  CreateTripTagMutation,
+  CreateTripTagMutationVariables
+>
+
+/**
+ * __useCreateTripTagMutation__
+ *
+ * To run a mutation, you first call `useCreateTripTagMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateTripTagMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createTripTagMutation, { data, loading, error }] = useCreateTripTagMutation({
+ *   variables: {
+ *      tripId: // value for 'tripId'
+ *      tagId: // value for 'tagId'
+ *   },
+ * });
+ */
+export function useCreateTripTagMutation(
+  baseOptions?: Apollo.MutationHookOptions<
+    CreateTripTagMutation,
+    CreateTripTagMutationVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<
+    CreateTripTagMutation,
+    CreateTripTagMutationVariables
+  >(CreateTripTagDocument, options)
+}
+export type CreateTripTagMutationHookResult = ReturnType<
+  typeof useCreateTripTagMutation
+>
+export type CreateTripTagMutationResult =
+  Apollo.MutationResult<CreateTripTagMutation>
+export type CreateTripTagMutationOptions = Apollo.BaseMutationOptions<
+  CreateTripTagMutation,
+  CreateTripTagMutationVariables
+>
+export const DeleteTagDocument = gql`
+  mutation deleteTag($id: UUID!) {
+    __typename
+    deleteFromtagsCollection(filter: { id: { eq: $id } }) {
+      __typename
+      records {
+        __typename
+        id
+        name
+      }
+    }
+  }
+`
+export type DeleteTagMutationFn = Apollo.MutationFunction<
+  DeleteTagMutation,
+  DeleteTagMutationVariables
+>
+
+/**
+ * __useDeleteTagMutation__
+ *
+ * To run a mutation, you first call `useDeleteTagMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDeleteTagMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [deleteTagMutation, { data, loading, error }] = useDeleteTagMutation({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useDeleteTagMutation(
+  baseOptions?: Apollo.MutationHookOptions<
+    DeleteTagMutation,
+    DeleteTagMutationVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<DeleteTagMutation, DeleteTagMutationVariables>(
+    DeleteTagDocument,
+    options
+  )
+}
+export type DeleteTagMutationHookResult = ReturnType<
+  typeof useDeleteTagMutation
+>
+export type DeleteTagMutationResult = Apollo.MutationResult<DeleteTagMutation>
+export type DeleteTagMutationOptions = Apollo.BaseMutationOptions<
+  DeleteTagMutation,
+  DeleteTagMutationVariables
+>
+export const DeleteTripTagDocument = gql`
+  mutation deleteTripTag($id: UUID!) {
+    __typename
+    deleteFromtrip_tagsCollection(filter: { id: { eq: $id } }) {
+      __typename
+      records {
+        __typename
+        id
+      }
+    }
+  }
+`
+export type DeleteTripTagMutationFn = Apollo.MutationFunction<
+  DeleteTripTagMutation,
+  DeleteTripTagMutationVariables
+>
+
+/**
+ * __useDeleteTripTagMutation__
+ *
+ * To run a mutation, you first call `useDeleteTripTagMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDeleteTripTagMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [deleteTripTagMutation, { data, loading, error }] = useDeleteTripTagMutation({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useDeleteTripTagMutation(
+  baseOptions?: Apollo.MutationHookOptions<
+    DeleteTripTagMutation,
+    DeleteTripTagMutationVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<
+    DeleteTripTagMutation,
+    DeleteTripTagMutationVariables
+  >(DeleteTripTagDocument, options)
+}
+export type DeleteTripTagMutationHookResult = ReturnType<
+  typeof useDeleteTripTagMutation
+>
+export type DeleteTripTagMutationResult =
+  Apollo.MutationResult<DeleteTripTagMutation>
+export type DeleteTripTagMutationOptions = Apollo.BaseMutationOptions<
+  DeleteTripTagMutation,
+  DeleteTripTagMutationVariables
+>
+export const UpdateTripDocument = gql`
+  mutation updateTrip($id: UUID!, $set: tripsUpdateInput!) {
+    __typename
+    updatetripsCollection(set: $set, filter: { id: { eq: $id } }) {
+      __typename
+      records {
+        __typename
+        id
+        title
+      }
+    }
+  }
+`
+export type UpdateTripMutationFn = Apollo.MutationFunction<
+  UpdateTripMutation,
+  UpdateTripMutationVariables
+>
+
+/**
+ * __useUpdateTripMutation__
+ *
+ * To run a mutation, you first call `useUpdateTripMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useUpdateTripMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [updateTripMutation, { data, loading, error }] = useUpdateTripMutation({
+ *   variables: {
+ *      id: // value for 'id'
+ *      set: // value for 'set'
+ *   },
+ * });
+ */
+export function useUpdateTripMutation(
+  baseOptions?: Apollo.MutationHookOptions<
+    UpdateTripMutation,
+    UpdateTripMutationVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<UpdateTripMutation, UpdateTripMutationVariables>(
+    UpdateTripDocument,
+    options
+  )
+}
+export type UpdateTripMutationHookResult = ReturnType<
+  typeof useUpdateTripMutation
+>
+export type UpdateTripMutationResult = Apollo.MutationResult<UpdateTripMutation>
+export type UpdateTripMutationOptions = Apollo.BaseMutationOptions<
+  UpdateTripMutation,
+  UpdateTripMutationVariables
+>
+export const TagsCollectionDocument = gql`
+  query tagsCollection($userId: UUID!) {
+    __typename
+    tagsCollection(
+      filter: { user_id: { eq: $userId } }
+      orderBy: { created_at: AscNullsLast }
+    ) {
+      __typename
+      edges {
+        __typename
+        node {
+          __typename
+          id
+          name
+        }
+      }
+    }
+  }
+`
+
+/**
+ * __useTagsCollectionQuery__
+ *
+ * To run a query within a React component, call `useTagsCollectionQuery` and pass it any options that fit your needs.
+ * When your component renders, `useTagsCollectionQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useTagsCollectionQuery({
+ *   variables: {
+ *      userId: // value for 'userId'
+ *   },
+ * });
+ */
+export function useTagsCollectionQuery(
+  baseOptions: Apollo.QueryHookOptions<
+    TagsCollectionQuery,
+    TagsCollectionQueryVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<TagsCollectionQuery, TagsCollectionQueryVariables>(
+    TagsCollectionDocument,
+    options
+  )
+}
+export function useTagsCollectionLazyQuery(
+  baseOptions?: Apollo.LazyQueryHookOptions<
+    TagsCollectionQuery,
+    TagsCollectionQueryVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<TagsCollectionQuery, TagsCollectionQueryVariables>(
+    TagsCollectionDocument,
+    options
+  )
+}
+export function useTagsCollectionSuspenseQuery(
+  baseOptions?: Apollo.SuspenseQueryHookOptions<
+    TagsCollectionQuery,
+    TagsCollectionQueryVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useSuspenseQuery<
+    TagsCollectionQuery,
+    TagsCollectionQueryVariables
+  >(TagsCollectionDocument, options)
+}
+export type TagsCollectionQueryHookResult = ReturnType<
+  typeof useTagsCollectionQuery
+>
+export type TagsCollectionLazyQueryHookResult = ReturnType<
+  typeof useTagsCollectionLazyQuery
+>
+export type TagsCollectionSuspenseQueryHookResult = ReturnType<
+  typeof useTagsCollectionSuspenseQuery
+>
+export type TagsCollectionQueryResult = Apollo.QueryResult<
+  TagsCollectionQuery,
+  TagsCollectionQueryVariables
+>
+export function refetchTagsCollectionQuery(
+  variables: TagsCollectionQueryVariables
+) {
+  return { query: TagsCollectionDocument, variables: variables }
+}
 export const TripDetailsDocument = gql`
   query tripDetails($id: UUID!) {
     __typename
@@ -1546,6 +2034,8 @@ export const TripDetailsDocument = gql`
           date_from
           date_to
           image_storage_object_id
+          cost
+          cost_unit
           invitationsCollection {
             __typename
             edges {
@@ -1660,6 +2150,94 @@ export type TripDetailsQueryResult = Apollo.QueryResult<
 export function refetchTripDetailsQuery(variables: TripDetailsQueryVariables) {
   return { query: TripDetailsDocument, variables: variables }
 }
+export const TripTagsCollectionDocument = gql`
+  query tripTagsCollection($filter: trip_tagsFilter) {
+    __typename
+    trip_tagsCollection(filter: $filter) {
+      __typename
+      edges {
+        __typename
+        node {
+          __typename
+          id
+          trip_id
+          tag_id
+        }
+      }
+    }
+  }
+`
+
+/**
+ * __useTripTagsCollectionQuery__
+ *
+ * To run a query within a React component, call `useTripTagsCollectionQuery` and pass it any options that fit your needs.
+ * When your component renders, `useTripTagsCollectionQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useTripTagsCollectionQuery({
+ *   variables: {
+ *      filter: // value for 'filter'
+ *   },
+ * });
+ */
+export function useTripTagsCollectionQuery(
+  baseOptions?: Apollo.QueryHookOptions<
+    TripTagsCollectionQuery,
+    TripTagsCollectionQueryVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<
+    TripTagsCollectionQuery,
+    TripTagsCollectionQueryVariables
+  >(TripTagsCollectionDocument, options)
+}
+export function useTripTagsCollectionLazyQuery(
+  baseOptions?: Apollo.LazyQueryHookOptions<
+    TripTagsCollectionQuery,
+    TripTagsCollectionQueryVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<
+    TripTagsCollectionQuery,
+    TripTagsCollectionQueryVariables
+  >(TripTagsCollectionDocument, options)
+}
+export function useTripTagsCollectionSuspenseQuery(
+  baseOptions?: Apollo.SuspenseQueryHookOptions<
+    TripTagsCollectionQuery,
+    TripTagsCollectionQueryVariables
+  >
+) {
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useSuspenseQuery<
+    TripTagsCollectionQuery,
+    TripTagsCollectionQueryVariables
+  >(TripTagsCollectionDocument, options)
+}
+export type TripTagsCollectionQueryHookResult = ReturnType<
+  typeof useTripTagsCollectionQuery
+>
+export type TripTagsCollectionLazyQueryHookResult = ReturnType<
+  typeof useTripTagsCollectionLazyQuery
+>
+export type TripTagsCollectionSuspenseQueryHookResult = ReturnType<
+  typeof useTripTagsCollectionSuspenseQuery
+>
+export type TripTagsCollectionQueryResult = Apollo.QueryResult<
+  TripTagsCollectionQuery,
+  TripTagsCollectionQueryVariables
+>
+export function refetchTripTagsCollectionQuery(
+  variables?: TripTagsCollectionQueryVariables
+) {
+  return { query: TripTagsCollectionDocument, variables: variables }
+}
 export const TripsCollectionDocument = gql`
   query tripsCollection(
     $filter: tripsFilter
diff --git a/graphql-codegen/generated/gql.ts b/graphql-codegen/generated/gql.ts
index f4b387f..4b7ea10 100644
--- a/graphql-codegen/generated/gql.ts
+++ b/graphql-codegen/generated/gql.ts
@@ -17,10 +17,24 @@ const documents = {
     types.GetUserDocument,
   'query activityCollection($id: UUID!) {\n  activityCollection(filter: {id: {eq: $id}}) {\n    edges {\n      node {\n        id\n        trip_id\n        title\n        time_from\n        time_to\n        address\n        url\n        memo\n        cost\n        image_storage_object_id\n      }\n    }\n  }\n}':
     types.ActivityCollectionDocument,
-  'mutation createTrip($user_id: UUID!, $title: String!, $date_from: Date, $date_to: Date) {\n  insertIntotripsCollection(\n    objects: [{user_id: $user_id, title: $title, date_from: $date_from, date_to: $date_to}]\n  ) {\n    records {\n      __typename\n      id\n      title\n    }\n  }\n}':
+  'mutation createTag($name: String!, $userId: UUID!) {\n  insertIntotagsCollection(objects: [{name: $name, user_id: $userId}]) {\n    records {\n      __typename\n      id\n      name\n    }\n  }\n}':
+    types.CreateTagDocument,
+  'mutation createTrip($object: tripsInsertInput!) {\n  insertIntotripsCollection(objects: [$object]) {\n    records {\n      __typename\n      id\n      title\n    }\n  }\n}':
     types.CreateTripDocument,
-  'query tripDetails($id: UUID!) {\n  tripsCollection(filter: {id: {eq: $id}}) {\n    edges {\n      node {\n        id\n        title\n        date_from\n        date_to\n        image_storage_object_id\n        invitationsCollection {\n          edges {\n            node {\n              users {\n                id\n                profile_picture_url\n              }\n            }\n          }\n        }\n        activityCollection {\n          edges {\n            node {\n              id\n              title\n              time_from\n              time_to\n              address\n            }\n          }\n        }\n        trip_tagsCollection {\n          edges {\n            node {\n              tags {\n                id\n                name\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}':
+  'mutation createTripTag($tripId: UUID!, $tagId: UUID!) {\n  insertIntotrip_tagsCollection(objects: [{trip_id: $tripId, tag_id: $tagId}]) {\n    records {\n      __typename\n      id\n      tag_id\n      trip_id\n    }\n  }\n}':
+    types.CreateTripTagDocument,
+  'mutation deleteTag($id: UUID!) {\n  deleteFromtagsCollection(filter: {id: {eq: $id}}) {\n    records {\n      __typename\n      id\n      name\n    }\n  }\n}':
+    types.DeleteTagDocument,
+  'mutation deleteTripTag($id: UUID!) {\n  deleteFromtrip_tagsCollection(filter: {id: {eq: $id}}) {\n    records {\n      __typename\n      id\n    }\n  }\n}':
+    types.DeleteTripTagDocument,
+  'mutation updateTrip($id: UUID!, $set: tripsUpdateInput!) {\n  updatetripsCollection(set: $set, filter: {id: {eq: $id}}) {\n    records {\n      id\n      title\n    }\n  }\n}':
+    types.UpdateTripDocument,
+  'query tagsCollection($userId: UUID!) {\n  tagsCollection(\n    filter: {user_id: {eq: $userId}}\n    orderBy: {created_at: AscNullsLast}\n  ) {\n    edges {\n      node {\n        id\n        name\n      }\n    }\n  }\n}':
+    types.TagsCollectionDocument,
+  'query tripDetails($id: UUID!) {\n  tripsCollection(filter: {id: {eq: $id}}) {\n    edges {\n      node {\n        id\n        title\n        date_from\n        date_to\n        image_storage_object_id\n        cost\n        cost_unit\n        invitationsCollection {\n          edges {\n            node {\n              users {\n                id\n                profile_picture_url\n              }\n            }\n          }\n        }\n        activityCollection {\n          edges {\n            node {\n              id\n              title\n              time_from\n              time_to\n              address\n            }\n          }\n        }\n        trip_tagsCollection {\n          edges {\n            node {\n              tags {\n                id\n                name\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}':
     types.TripDetailsDocument,
+  'query tripTagsCollection($filter: trip_tagsFilter) {\n  trip_tagsCollection(filter: $filter) {\n    edges {\n      node {\n        id\n        trip_id\n        tag_id\n      }\n    }\n  }\n}':
+    types.TripTagsCollectionDocument,
   'query tripsCollection($filter: tripsFilter, $orderBy: [tripsOrderBy!], $first: Int!, $after: Cursor) {\n  tripsCollection(\n    filter: $filter\n    first: $first\n    after: $after\n    orderBy: $orderBy\n  ) {\n    edges {\n      node {\n        id\n        id\n        title\n        date_from\n        date_to\n        image_storage_object_id\n        created_at\n        invitationsCollection {\n          edges {\n            node {\n              users {\n                id\n                profile_picture_url\n              }\n            }\n          }\n        }\n        activityCollection {\n          edges {\n            node {\n              id\n            }\n          }\n        }\n      }\n    }\n    pageInfo {\n      startCursor\n      endCursor\n      hasPreviousPage\n      hasNextPage\n    }\n  }\n}':
     types.TripsCollectionDocument
 }
@@ -55,14 +69,56 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: 'mutation createTrip($user_id: UUID!, $title: String!, $date_from: Date, $date_to: Date) {\n  insertIntotripsCollection(\n    objects: [{user_id: $user_id, title: $title, date_from: $date_from, date_to: $date_to}]\n  ) {\n    records {\n      __typename\n      id\n      title\n    }\n  }\n}'
-): (typeof documents)['mutation createTrip($user_id: UUID!, $title: String!, $date_from: Date, $date_to: Date) {\n  insertIntotripsCollection(\n    objects: [{user_id: $user_id, title: $title, date_from: $date_from, date_to: $date_to}]\n  ) {\n    records {\n      __typename\n      id\n      title\n    }\n  }\n}']
+  source: 'mutation createTag($name: String!, $userId: UUID!) {\n  insertIntotagsCollection(objects: [{name: $name, user_id: $userId}]) {\n    records {\n      __typename\n      id\n      name\n    }\n  }\n}'
+): (typeof documents)['mutation createTag($name: String!, $userId: UUID!) {\n  insertIntotagsCollection(objects: [{name: $name, user_id: $userId}]) {\n    records {\n      __typename\n      id\n      name\n    }\n  }\n}']
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: 'query tripDetails($id: UUID!) {\n  tripsCollection(filter: {id: {eq: $id}}) {\n    edges {\n      node {\n        id\n        title\n        date_from\n        date_to\n        image_storage_object_id\n        invitationsCollection {\n          edges {\n            node {\n              users {\n                id\n                profile_picture_url\n              }\n            }\n          }\n        }\n        activityCollection {\n          edges {\n            node {\n              id\n              title\n              time_from\n              time_to\n              address\n            }\n          }\n        }\n        trip_tagsCollection {\n          edges {\n            node {\n              tags {\n                id\n                name\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}'
-): (typeof documents)['query tripDetails($id: UUID!) {\n  tripsCollection(filter: {id: {eq: $id}}) {\n    edges {\n      node {\n        id\n        title\n        date_from\n        date_to\n        image_storage_object_id\n        invitationsCollection {\n          edges {\n            node {\n              users {\n                id\n                profile_picture_url\n              }\n            }\n          }\n        }\n        activityCollection {\n          edges {\n            node {\n              id\n              title\n              time_from\n              time_to\n              address\n            }\n          }\n        }\n        trip_tagsCollection {\n          edges {\n            node {\n              tags {\n                id\n                name\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}']
+  source: 'mutation createTrip($object: tripsInsertInput!) {\n  insertIntotripsCollection(objects: [$object]) {\n    records {\n      __typename\n      id\n      title\n    }\n  }\n}'
+): (typeof documents)['mutation createTrip($object: tripsInsertInput!) {\n  insertIntotripsCollection(objects: [$object]) {\n    records {\n      __typename\n      id\n      title\n    }\n  }\n}']
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: 'mutation createTripTag($tripId: UUID!, $tagId: UUID!) {\n  insertIntotrip_tagsCollection(objects: [{trip_id: $tripId, tag_id: $tagId}]) {\n    records {\n      __typename\n      id\n      tag_id\n      trip_id\n    }\n  }\n}'
+): (typeof documents)['mutation createTripTag($tripId: UUID!, $tagId: UUID!) {\n  insertIntotrip_tagsCollection(objects: [{trip_id: $tripId, tag_id: $tagId}]) {\n    records {\n      __typename\n      id\n      tag_id\n      trip_id\n    }\n  }\n}']
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: 'mutation deleteTag($id: UUID!) {\n  deleteFromtagsCollection(filter: {id: {eq: $id}}) {\n    records {\n      __typename\n      id\n      name\n    }\n  }\n}'
+): (typeof documents)['mutation deleteTag($id: UUID!) {\n  deleteFromtagsCollection(filter: {id: {eq: $id}}) {\n    records {\n      __typename\n      id\n      name\n    }\n  }\n}']
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: 'mutation deleteTripTag($id: UUID!) {\n  deleteFromtrip_tagsCollection(filter: {id: {eq: $id}}) {\n    records {\n      __typename\n      id\n    }\n  }\n}'
+): (typeof documents)['mutation deleteTripTag($id: UUID!) {\n  deleteFromtrip_tagsCollection(filter: {id: {eq: $id}}) {\n    records {\n      __typename\n      id\n    }\n  }\n}']
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: 'mutation updateTrip($id: UUID!, $set: tripsUpdateInput!) {\n  updatetripsCollection(set: $set, filter: {id: {eq: $id}}) {\n    records {\n      id\n      title\n    }\n  }\n}'
+): (typeof documents)['mutation updateTrip($id: UUID!, $set: tripsUpdateInput!) {\n  updatetripsCollection(set: $set, filter: {id: {eq: $id}}) {\n    records {\n      id\n      title\n    }\n  }\n}']
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: 'query tagsCollection($userId: UUID!) {\n  tagsCollection(\n    filter: {user_id: {eq: $userId}}\n    orderBy: {created_at: AscNullsLast}\n  ) {\n    edges {\n      node {\n        id\n        name\n      }\n    }\n  }\n}'
+): (typeof documents)['query tagsCollection($userId: UUID!) {\n  tagsCollection(\n    filter: {user_id: {eq: $userId}}\n    orderBy: {created_at: AscNullsLast}\n  ) {\n    edges {\n      node {\n        id\n        name\n      }\n    }\n  }\n}']
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: 'query tripDetails($id: UUID!) {\n  tripsCollection(filter: {id: {eq: $id}}) {\n    edges {\n      node {\n        id\n        title\n        date_from\n        date_to\n        image_storage_object_id\n        cost\n        cost_unit\n        invitationsCollection {\n          edges {\n            node {\n              users {\n                id\n                profile_picture_url\n              }\n            }\n          }\n        }\n        activityCollection {\n          edges {\n            node {\n              id\n              title\n              time_from\n              time_to\n              address\n            }\n          }\n        }\n        trip_tagsCollection {\n          edges {\n            node {\n              tags {\n                id\n                name\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}'
+): (typeof documents)['query tripDetails($id: UUID!) {\n  tripsCollection(filter: {id: {eq: $id}}) {\n    edges {\n      node {\n        id\n        title\n        date_from\n        date_to\n        image_storage_object_id\n        cost\n        cost_unit\n        invitationsCollection {\n          edges {\n            node {\n              users {\n                id\n                profile_picture_url\n              }\n            }\n          }\n        }\n        activityCollection {\n          edges {\n            node {\n              id\n              title\n              time_from\n              time_to\n              address\n            }\n          }\n        }\n        trip_tagsCollection {\n          edges {\n            node {\n              tags {\n                id\n                name\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}']
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: 'query tripTagsCollection($filter: trip_tagsFilter) {\n  trip_tagsCollection(filter: $filter) {\n    edges {\n      node {\n        id\n        trip_id\n        tag_id\n      }\n    }\n  }\n}'
+): (typeof documents)['query tripTagsCollection($filter: trip_tagsFilter) {\n  trip_tagsCollection(filter: $filter) {\n    edges {\n      node {\n        id\n        trip_id\n        tag_id\n      }\n    }\n  }\n}']
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/graphql-codegen/generated/graphql.ts b/graphql-codegen/generated/graphql.ts
index 1ad1470..bb308c2 100644
--- a/graphql-codegen/generated/graphql.ts
+++ b/graphql-codegen/generated/graphql.ts
@@ -28,9 +28,9 @@ export type Scalars = {
   Int: { input: number; output: number }
   Float: { input: number; output: number }
   /** A high precision floating point value represented as a string */
-  BigFloat: { input: number; output: number }
+  BigFloat: { input: string; output: string }
   /** An arbitrary size integer represented as a string */
-  BigInt: { input: number; output: number }
+  BigInt: { input: string; output: string }
   /** An opaque string using for tracking a position in results during pagination */
   Cursor: { input: any; output: any }
   /** A date wihout time information */
@@ -476,6 +476,7 @@ export type Activity = Node & {
   __typename?: 'activity'
   address?: Maybe<Scalars['String']['output']>
   cost?: Maybe<Scalars['BigFloat']['output']>
+  cost_unit?: Maybe<Scalars['String']['output']>
   id: Scalars['UUID']['output']
   image_storage_object_id?: Maybe<Scalars['UUID']['output']>
   memo?: Maybe<Scalars['String']['output']>
@@ -512,6 +513,7 @@ export type ActivityEdge = {
 export type ActivityFilter = {
   address?: InputMaybe<StringFilter>
   cost?: InputMaybe<BigFloatFilter>
+  cost_unit?: InputMaybe<StringFilter>
   id?: InputMaybe<UuidFilter>
   image_storage_object_id?: InputMaybe<UuidFilter>
   memo?: InputMaybe<StringFilter>
@@ -526,6 +528,7 @@ export type ActivityFilter = {
 export type ActivityInsertInput = {
   address?: InputMaybe<Scalars['String']['input']>
   cost?: InputMaybe<Scalars['BigFloat']['input']>
+  cost_unit?: InputMaybe<Scalars['String']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   image_storage_object_id?: InputMaybe<Scalars['UUID']['input']>
   memo?: InputMaybe<Scalars['String']['input']>
@@ -547,6 +550,7 @@ export type ActivityInsertResponse = {
 export type ActivityOrderBy = {
   address?: InputMaybe<OrderByDirection>
   cost?: InputMaybe<OrderByDirection>
+  cost_unit?: InputMaybe<OrderByDirection>
   id?: InputMaybe<OrderByDirection>
   image_storage_object_id?: InputMaybe<OrderByDirection>
   memo?: InputMaybe<OrderByDirection>
@@ -560,6 +564,7 @@ export type ActivityOrderBy = {
 export type ActivityUpdateInput = {
   address?: InputMaybe<Scalars['String']['input']>
   cost?: InputMaybe<Scalars['BigFloat']['input']>
+  cost_unit?: InputMaybe<Scalars['String']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   image_storage_object_id?: InputMaybe<Scalars['UUID']['input']>
   memo?: InputMaybe<Scalars['String']['input']>
@@ -685,11 +690,14 @@ export type Permission_Level_EnumFilter = {
 
 export type Tags = Node & {
   __typename?: 'tags'
+  created_at: Scalars['Datetime']['output']
   id: Scalars['UUID']['output']
   name: Scalars['String']['output']
   /** Globally Unique Record Identifier */
   nodeId: Scalars['ID']['output']
   trip_tagsCollection?: Maybe<Trip_TagsConnection>
+  user_id: Scalars['UUID']['output']
+  users: Users
 }
 
 export type TagsTrip_TagsCollectionArgs = {
@@ -722,14 +730,18 @@ export type TagsEdge = {
 }
 
 export type TagsFilter = {
+  created_at?: InputMaybe<DatetimeFilter>
   id?: InputMaybe<UuidFilter>
   name?: InputMaybe<StringFilter>
   nodeId?: InputMaybe<IdFilter>
+  user_id?: InputMaybe<UuidFilter>
 }
 
 export type TagsInsertInput = {
+  created_at?: InputMaybe<Scalars['Datetime']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   name?: InputMaybe<Scalars['String']['input']>
+  user_id?: InputMaybe<Scalars['UUID']['input']>
 }
 
 export type TagsInsertResponse = {
@@ -741,13 +753,17 @@ export type TagsInsertResponse = {
 }
 
 export type TagsOrderBy = {
+  created_at?: InputMaybe<OrderByDirection>
   id?: InputMaybe<OrderByDirection>
   name?: InputMaybe<OrderByDirection>
+  user_id?: InputMaybe<OrderByDirection>
 }
 
 export type TagsUpdateInput = {
+  created_at?: InputMaybe<Scalars['Datetime']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   name?: InputMaybe<Scalars['String']['input']>
+  user_id?: InputMaybe<Scalars['UUID']['input']>
 }
 
 export type TagsUpdateResponse = {
@@ -897,9 +913,10 @@ export type Trips = Node & {
   __typename?: 'trips'
   activityCollection?: Maybe<ActivityConnection>
   cost?: Maybe<Scalars['BigFloat']['output']>
+  cost_unit?: Maybe<Scalars['String']['output']>
   created_at: Scalars['Datetime']['output']
-  date_from: Scalars['Date']['output']
-  date_to?: Maybe<Scalars['Date']['output']>
+  date_from: Scalars['Datetime']['output']
+  date_to?: Maybe<Scalars['Datetime']['output']>
   description?: Maybe<Scalars['String']['output']>
   id: Scalars['UUID']['output']
   image_storage_object_id?: Maybe<Scalars['UUID']['output']>
@@ -961,9 +978,10 @@ export type TripsEdge = {
 
 export type TripsFilter = {
   cost?: InputMaybe<BigFloatFilter>
+  cost_unit?: InputMaybe<StringFilter>
   created_at?: InputMaybe<DatetimeFilter>
-  date_from?: InputMaybe<DateFilter>
-  date_to?: InputMaybe<DateFilter>
+  date_from?: InputMaybe<DatetimeFilter>
+  date_to?: InputMaybe<DatetimeFilter>
   description?: InputMaybe<StringFilter>
   id?: InputMaybe<UuidFilter>
   image_storage_object_id?: InputMaybe<UuidFilter>
@@ -974,9 +992,10 @@ export type TripsFilter = {
 
 export type TripsInsertInput = {
   cost?: InputMaybe<Scalars['BigFloat']['input']>
+  cost_unit?: InputMaybe<Scalars['String']['input']>
   created_at?: InputMaybe<Scalars['Datetime']['input']>
-  date_from?: InputMaybe<Scalars['Date']['input']>
-  date_to?: InputMaybe<Scalars['Date']['input']>
+  date_from?: InputMaybe<Scalars['Datetime']['input']>
+  date_to?: InputMaybe<Scalars['Datetime']['input']>
   description?: InputMaybe<Scalars['String']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   image_storage_object_id?: InputMaybe<Scalars['UUID']['input']>
@@ -994,6 +1013,7 @@ export type TripsInsertResponse = {
 
 export type TripsOrderBy = {
   cost?: InputMaybe<OrderByDirection>
+  cost_unit?: InputMaybe<OrderByDirection>
   created_at?: InputMaybe<OrderByDirection>
   date_from?: InputMaybe<OrderByDirection>
   date_to?: InputMaybe<OrderByDirection>
@@ -1006,9 +1026,10 @@ export type TripsOrderBy = {
 
 export type TripsUpdateInput = {
   cost?: InputMaybe<Scalars['BigFloat']['input']>
+  cost_unit?: InputMaybe<Scalars['String']['input']>
   created_at?: InputMaybe<Scalars['Datetime']['input']>
-  date_from?: InputMaybe<Scalars['Date']['input']>
-  date_to?: InputMaybe<Scalars['Date']['input']>
+  date_from?: InputMaybe<Scalars['Datetime']['input']>
+  date_to?: InputMaybe<Scalars['Datetime']['input']>
   description?: InputMaybe<Scalars['String']['input']>
   id?: InputMaybe<Scalars['UUID']['input']>
   image_storage_object_id?: InputMaybe<Scalars['UUID']['input']>
@@ -1033,6 +1054,7 @@ export type Users = Node & {
   /** Globally Unique Record Identifier */
   nodeId: Scalars['ID']['output']
   profile_picture_url?: Maybe<Scalars['String']['output']>
+  tagsCollection?: Maybe<TagsConnection>
   tripsCollection?: Maybe<TripsConnection>
 }
 
@@ -1045,6 +1067,15 @@ export type UsersInvitationsCollectionArgs = {
   orderBy?: InputMaybe<Array<InvitationsOrderBy>>
 }
 
+export type UsersTagsCollectionArgs = {
+  after?: InputMaybe<Scalars['Cursor']['input']>
+  before?: InputMaybe<Scalars['Cursor']['input']>
+  filter?: InputMaybe<TagsFilter>
+  first?: InputMaybe<Scalars['Int']['input']>
+  last?: InputMaybe<Scalars['Int']['input']>
+  orderBy?: InputMaybe<Array<TagsOrderBy>>
+}
+
 export type UsersTripsCollectionArgs = {
   after?: InputMaybe<Scalars['Cursor']['input']>
   before?: InputMaybe<Scalars['Cursor']['input']>
@@ -1160,18 +1191,28 @@ export type ActivityCollectionQuery = {
         address?: string | null
         url?: string | null
         memo?: string | null
-        cost?: number | null
+        cost?: string | null
         image_storage_object_id?: string | null
       }
     }>
   } | null
 }
 
+export type CreateTagMutationVariables = Exact<{
+  name: Scalars['String']['input']
+  userId: Scalars['UUID']['input']
+}>
+
+export type CreateTagMutation = {
+  __typename: 'Mutation'
+  insertIntotagsCollection?: {
+    __typename: 'tagsInsertResponse'
+    records: Array<{ __typename: 'tags'; id: string; name: string }>
+  } | null
+}
+
 export type CreateTripMutationVariables = Exact<{
-  user_id: Scalars['UUID']['input']
-  title: Scalars['String']['input']
-  date_from?: InputMaybe<Scalars['Date']['input']>
-  date_to?: InputMaybe<Scalars['Date']['input']>
+  object: TripsInsertInput
 }>
 
 export type CreateTripMutation = {
@@ -1182,6 +1223,76 @@ export type CreateTripMutation = {
   } | null
 }
 
+export type CreateTripTagMutationVariables = Exact<{
+  tripId: Scalars['UUID']['input']
+  tagId: Scalars['UUID']['input']
+}>
+
+export type CreateTripTagMutation = {
+  __typename: 'Mutation'
+  insertIntotrip_tagsCollection?: {
+    __typename: 'trip_tagsInsertResponse'
+    records: Array<{
+      __typename: 'trip_tags'
+      id: string
+      tag_id?: string | null
+      trip_id?: string | null
+    }>
+  } | null
+}
+
+export type DeleteTagMutationVariables = Exact<{
+  id: Scalars['UUID']['input']
+}>
+
+export type DeleteTagMutation = {
+  __typename: 'Mutation'
+  deleteFromtagsCollection: {
+    __typename: 'tagsDeleteResponse'
+    records: Array<{ __typename: 'tags'; id: string; name: string }>
+  }
+}
+
+export type DeleteTripTagMutationVariables = Exact<{
+  id: Scalars['UUID']['input']
+}>
+
+export type DeleteTripTagMutation = {
+  __typename: 'Mutation'
+  deleteFromtrip_tagsCollection: {
+    __typename: 'trip_tagsDeleteResponse'
+    records: Array<{ __typename: 'trip_tags'; id: string }>
+  }
+}
+
+export type UpdateTripMutationVariables = Exact<{
+  id: Scalars['UUID']['input']
+  set: TripsUpdateInput
+}>
+
+export type UpdateTripMutation = {
+  __typename: 'Mutation'
+  updatetripsCollection: {
+    __typename: 'tripsUpdateResponse'
+    records: Array<{ __typename: 'trips'; id: string; title: string }>
+  }
+}
+
+export type TagsCollectionQueryVariables = Exact<{
+  userId: Scalars['UUID']['input']
+}>
+
+export type TagsCollectionQuery = {
+  __typename: 'Query'
+  tagsCollection?: {
+    __typename: 'tagsConnection'
+    edges: Array<{
+      __typename: 'tagsEdge'
+      node: { __typename: 'tags'; id: string; name: string }
+    }>
+  } | null
+}
+
 export type TripDetailsQueryVariables = Exact<{
   id: Scalars['UUID']['input']
 }>
@@ -1199,6 +1310,8 @@ export type TripDetailsQuery = {
         date_from: string
         date_to?: string | null
         image_storage_object_id?: string | null
+        cost?: string | null
+        cost_unit?: string | null
         invitationsCollection?: {
           __typename: 'invitationsConnection'
           edges: Array<{
@@ -1242,6 +1355,26 @@ export type TripDetailsQuery = {
   } | null
 }
 
+export type TripTagsCollectionQueryVariables = Exact<{
+  filter?: InputMaybe<Trip_TagsFilter>
+}>
+
+export type TripTagsCollectionQuery = {
+  __typename: 'Query'
+  trip_tagsCollection?: {
+    __typename: 'trip_tagsConnection'
+    edges: Array<{
+      __typename: 'trip_tagsEdge'
+      node: {
+        __typename: 'trip_tags'
+        id: string
+        trip_id?: string | null
+        tag_id?: string | null
+      }
+    }>
+  } | null
+}
+
 export type TripsCollectionQueryVariables = Exact<{
   filter?: InputMaybe<TripsFilter>
   orderBy?: InputMaybe<Array<TripsOrderBy> | TripsOrderBy>
@@ -1543,52 +1676,204 @@ export const ActivityCollectionDocument = {
   ActivityCollectionQuery,
   ActivityCollectionQueryVariables
 >
-export const CreateTripDocument = {
-  __meta__: { hash: '995473133e320e5f7ef165df54d56100c62b3a75' },
+export const CreateTagDocument = {
+  __meta__: { hash: '9ecd6081f83febe06337ebd01345eef596b81cf9' },
   kind: 'Document',
   definitions: [
     {
       kind: 'OperationDefinition',
       operation: 'mutation',
-      name: { kind: 'Name', value: 'createTrip' },
+      name: { kind: 'Name', value: 'createTag' },
       variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'name' } },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'String' } }
+          }
+        },
         {
           kind: 'VariableDefinition',
           variable: {
             kind: 'Variable',
-            name: { kind: 'Name', value: 'user_id' }
+            name: { kind: 'Name', value: 'userId' }
           },
           type: {
             kind: 'NonNullType',
             type: { kind: 'NamedType', name: { kind: 'Name', value: 'UUID' } }
           }
-        },
+        }
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'insertIntotagsCollection' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'objects' },
+                value: {
+                  kind: 'ListValue',
+                  values: [
+                    {
+                      kind: 'ObjectValue',
+                      fields: [
+                        {
+                          kind: 'ObjectField',
+                          name: { kind: 'Name', value: 'name' },
+                          value: {
+                            kind: 'Variable',
+                            name: { kind: 'Name', value: 'name' }
+                          }
+                        },
+                        {
+                          kind: 'ObjectField',
+                          name: { kind: 'Name', value: 'user_id' },
+                          value: {
+                            kind: 'Variable',
+                            name: { kind: 'Name', value: 'userId' }
+                          }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'records' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: '__typename' }
+                      },
+                      { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                      { kind: 'Field', name: { kind: 'Name', value: 'name' } }
+                    ]
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }
+  ]
+} as unknown as DocumentNode<CreateTagMutation, CreateTagMutationVariables>
+export const CreateTripDocument = {
+  __meta__: { hash: '68140ac8465fd7c6f5bab39db9eec02dab9501ef' },
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'mutation',
+      name: { kind: 'Name', value: 'createTrip' },
+      variableDefinitions: [
         {
           kind: 'VariableDefinition',
           variable: {
             kind: 'Variable',
-            name: { kind: 'Name', value: 'title' }
+            name: { kind: 'Name', value: 'object' }
           },
           type: {
             kind: 'NonNullType',
-            type: { kind: 'NamedType', name: { kind: 'Name', value: 'String' } }
+            type: {
+              kind: 'NamedType',
+              name: { kind: 'Name', value: 'tripsInsertInput' }
+            }
           }
-        },
+        }
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'insertIntotripsCollection' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'objects' },
+                value: {
+                  kind: 'ListValue',
+                  values: [
+                    {
+                      kind: 'Variable',
+                      name: { kind: 'Name', value: 'object' }
+                    }
+                  ]
+                }
+              }
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'records' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: '__typename' }
+                      },
+                      { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                      { kind: 'Field', name: { kind: 'Name', value: 'title' } }
+                    ]
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }
+  ]
+} as unknown as DocumentNode<CreateTripMutation, CreateTripMutationVariables>
+export const CreateTripTagDocument = {
+  __meta__: { hash: 'b86b0c68b8ee2697ff1b539e5df92575cedb30f0' },
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'mutation',
+      name: { kind: 'Name', value: 'createTripTag' },
+      variableDefinitions: [
         {
           kind: 'VariableDefinition',
           variable: {
             kind: 'Variable',
-            name: { kind: 'Name', value: 'date_from' }
+            name: { kind: 'Name', value: 'tripId' }
           },
-          type: { kind: 'NamedType', name: { kind: 'Name', value: 'Date' } }
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'UUID' } }
+          }
         },
         {
           kind: 'VariableDefinition',
           variable: {
             kind: 'Variable',
-            name: { kind: 'Name', value: 'date_to' }
+            name: { kind: 'Name', value: 'tagId' }
           },
-          type: { kind: 'NamedType', name: { kind: 'Name', value: 'Date' } }
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'UUID' } }
+          }
         }
       ],
       selectionSet: {
@@ -1597,7 +1882,7 @@ export const CreateTripDocument = {
           { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
           {
             kind: 'Field',
-            name: { kind: 'Name', value: 'insertIntotripsCollection' },
+            name: { kind: 'Name', value: 'insertIntotrip_tagsCollection' },
             arguments: [
               {
                 kind: 'Argument',
@@ -1610,34 +1895,18 @@ export const CreateTripDocument = {
                       fields: [
                         {
                           kind: 'ObjectField',
-                          name: { kind: 'Name', value: 'user_id' },
-                          value: {
-                            kind: 'Variable',
-                            name: { kind: 'Name', value: 'user_id' }
-                          }
-                        },
-                        {
-                          kind: 'ObjectField',
-                          name: { kind: 'Name', value: 'title' },
-                          value: {
-                            kind: 'Variable',
-                            name: { kind: 'Name', value: 'title' }
-                          }
-                        },
-                        {
-                          kind: 'ObjectField',
-                          name: { kind: 'Name', value: 'date_from' },
+                          name: { kind: 'Name', value: 'trip_id' },
                           value: {
                             kind: 'Variable',
-                            name: { kind: 'Name', value: 'date_from' }
+                            name: { kind: 'Name', value: 'tripId' }
                           }
                         },
                         {
                           kind: 'ObjectField',
-                          name: { kind: 'Name', value: 'date_to' },
+                          name: { kind: 'Name', value: 'tag_id' },
                           value: {
                             kind: 'Variable',
-                            name: { kind: 'Name', value: 'date_to' }
+                            name: { kind: 'Name', value: 'tagId' }
                           }
                         }
                       ]
@@ -1661,7 +1930,14 @@ export const CreateTripDocument = {
                         name: { kind: 'Name', value: '__typename' }
                       },
                       { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                      { kind: 'Field', name: { kind: 'Name', value: 'title' } }
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'tag_id' }
+                      },
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'trip_id' }
+                      }
                     ]
                   }
                 }
@@ -1672,15 +1948,18 @@ export const CreateTripDocument = {
       }
     }
   ]
-} as unknown as DocumentNode<CreateTripMutation, CreateTripMutationVariables>
-export const TripDetailsDocument = {
-  __meta__: { hash: '911f735030ae63fca4ef8cefcc3c07e92924ea00' },
+} as unknown as DocumentNode<
+  CreateTripTagMutation,
+  CreateTripTagMutationVariables
+>
+export const DeleteTagDocument = {
+  __meta__: { hash: 'c661c9a00fdae1dbac69eeb283611e0c9202cf55' },
   kind: 'Document',
   definitions: [
     {
       kind: 'OperationDefinition',
-      operation: 'query',
-      name: { kind: 'Name', value: 'tripDetails' },
+      operation: 'mutation',
+      name: { kind: 'Name', value: 'deleteTag' },
       variableDefinitions: [
         {
           kind: 'VariableDefinition',
@@ -1697,7 +1976,7 @@ export const TripDetailsDocument = {
           { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
           {
             kind: 'Field',
-            name: { kind: 'Name', value: 'tripsCollection' },
+            name: { kind: 'Name', value: 'deleteFromtagsCollection' },
             arguments: [
               {
                 kind: 'Argument',
@@ -1732,7 +2011,7 @@ export const TripDetailsDocument = {
                 { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
                 {
                   kind: 'Field',
-                  name: { kind: 'Name', value: 'edges' },
+                  name: { kind: 'Name', value: 'records' },
                   selectionSet: {
                     kind: 'SelectionSet',
                     selections: [
@@ -1740,12 +2019,389 @@ export const TripDetailsDocument = {
                         kind: 'Field',
                         name: { kind: 'Name', value: '__typename' }
                       },
-                      {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'node' },
-                        selectionSet: {
-                          kind: 'SelectionSet',
-                          selections: [
+                      { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                      { kind: 'Field', name: { kind: 'Name', value: 'name' } }
+                    ]
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }
+  ]
+} as unknown as DocumentNode<DeleteTagMutation, DeleteTagMutationVariables>
+export const DeleteTripTagDocument = {
+  __meta__: { hash: '1a4d048db574dedfebd859dc737e16a42021f3ff' },
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'mutation',
+      name: { kind: 'Name', value: 'deleteTripTag' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'id' } },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'UUID' } }
+          }
+        }
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'deleteFromtrip_tagsCollection' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'filter' },
+                value: {
+                  kind: 'ObjectValue',
+                  fields: [
+                    {
+                      kind: 'ObjectField',
+                      name: { kind: 'Name', value: 'id' },
+                      value: {
+                        kind: 'ObjectValue',
+                        fields: [
+                          {
+                            kind: 'ObjectField',
+                            name: { kind: 'Name', value: 'eq' },
+                            value: {
+                              kind: 'Variable',
+                              name: { kind: 'Name', value: 'id' }
+                            }
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              }
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'records' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: '__typename' }
+                      },
+                      { kind: 'Field', name: { kind: 'Name', value: 'id' } }
+                    ]
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }
+  ]
+} as unknown as DocumentNode<
+  DeleteTripTagMutation,
+  DeleteTripTagMutationVariables
+>
+export const UpdateTripDocument = {
+  __meta__: { hash: '7b9783d44e5c70098239e977664434de3eae6204' },
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'mutation',
+      name: { kind: 'Name', value: 'updateTrip' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'id' } },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'UUID' } }
+          }
+        },
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'set' } },
+          type: {
+            kind: 'NonNullType',
+            type: {
+              kind: 'NamedType',
+              name: { kind: 'Name', value: 'tripsUpdateInput' }
+            }
+          }
+        }
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'updatetripsCollection' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'set' },
+                value: {
+                  kind: 'Variable',
+                  name: { kind: 'Name', value: 'set' }
+                }
+              },
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'filter' },
+                value: {
+                  kind: 'ObjectValue',
+                  fields: [
+                    {
+                      kind: 'ObjectField',
+                      name: { kind: 'Name', value: 'id' },
+                      value: {
+                        kind: 'ObjectValue',
+                        fields: [
+                          {
+                            kind: 'ObjectField',
+                            name: { kind: 'Name', value: 'eq' },
+                            value: {
+                              kind: 'Variable',
+                              name: { kind: 'Name', value: 'id' }
+                            }
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              }
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'records' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: '__typename' }
+                      },
+                      { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                      { kind: 'Field', name: { kind: 'Name', value: 'title' } }
+                    ]
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }
+  ]
+} as unknown as DocumentNode<UpdateTripMutation, UpdateTripMutationVariables>
+export const TagsCollectionDocument = {
+  __meta__: { hash: '994a2e7e0694c279cbfeff6c8696cbbe6a0c687c' },
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'query',
+      name: { kind: 'Name', value: 'tagsCollection' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: {
+            kind: 'Variable',
+            name: { kind: 'Name', value: 'userId' }
+          },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'UUID' } }
+          }
+        }
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'tagsCollection' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'filter' },
+                value: {
+                  kind: 'ObjectValue',
+                  fields: [
+                    {
+                      kind: 'ObjectField',
+                      name: { kind: 'Name', value: 'user_id' },
+                      value: {
+                        kind: 'ObjectValue',
+                        fields: [
+                          {
+                            kind: 'ObjectField',
+                            name: { kind: 'Name', value: 'eq' },
+                            value: {
+                              kind: 'Variable',
+                              name: { kind: 'Name', value: 'userId' }
+                            }
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              },
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'orderBy' },
+                value: {
+                  kind: 'ObjectValue',
+                  fields: [
+                    {
+                      kind: 'ObjectField',
+                      name: { kind: 'Name', value: 'created_at' },
+                      value: { kind: 'EnumValue', value: 'AscNullsLast' }
+                    }
+                  ]
+                }
+              }
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'edges' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: '__typename' }
+                      },
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'node' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: '__typename' }
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'id' }
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'name' }
+                            }
+                          ]
+                        }
+                      }
+                    ]
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }
+  ]
+} as unknown as DocumentNode<TagsCollectionQuery, TagsCollectionQueryVariables>
+export const TripDetailsDocument = {
+  __meta__: { hash: '12df849b2205e5cf49fd291f6cb8582aa49100c3' },
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'query',
+      name: { kind: 'Name', value: 'tripDetails' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'id' } },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'UUID' } }
+          }
+        }
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'tripsCollection' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'filter' },
+                value: {
+                  kind: 'ObjectValue',
+                  fields: [
+                    {
+                      kind: 'ObjectField',
+                      name: { kind: 'Name', value: 'id' },
+                      value: {
+                        kind: 'ObjectValue',
+                        fields: [
+                          {
+                            kind: 'ObjectField',
+                            name: { kind: 'Name', value: 'eq' },
+                            value: {
+                              kind: 'Variable',
+                              name: { kind: 'Name', value: 'id' }
+                            }
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              }
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'edges' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: '__typename' }
+                      },
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'node' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
                             {
                               kind: 'Field',
                               name: { kind: 'Name', value: '__typename' }
@@ -1773,6 +2429,14 @@ export const TripDetailsDocument = {
                                 value: 'image_storage_object_id'
                               }
                             },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'cost' }
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'cost_unit' }
+                            },
                             {
                               kind: 'Field',
                               name: {
@@ -2033,6 +2697,97 @@ export const TripDetailsDocument = {
     }
   ]
 } as unknown as DocumentNode<TripDetailsQuery, TripDetailsQueryVariables>
+export const TripTagsCollectionDocument = {
+  __meta__: { hash: 'f4142b2a2f4ab96ce0e69488851fdff976486652' },
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'query',
+      name: { kind: 'Name', value: 'tripTagsCollection' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: {
+            kind: 'Variable',
+            name: { kind: 'Name', value: 'filter' }
+          },
+          type: {
+            kind: 'NamedType',
+            name: { kind: 'Name', value: 'trip_tagsFilter' }
+          }
+        }
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'trip_tagsCollection' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'filter' },
+                value: {
+                  kind: 'Variable',
+                  name: { kind: 'Name', value: 'filter' }
+                }
+              }
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: '__typename' } },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'edges' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: '__typename' }
+                      },
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'node' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: '__typename' }
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'id' }
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'trip_id' }
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'tag_id' }
+                            }
+                          ]
+                        }
+                      }
+                    ]
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }
+  ]
+} as unknown as DocumentNode<
+  TripTagsCollectionQuery,
+  TripTagsCollectionQueryVariables
+>
 export const TripsCollectionDocument = {
   __meta__: { hash: '70a61f873c23f1db13cef7cd265a9845e9bfc53e' },
   kind: 'Document',
diff --git a/graphql-codegen/generated/persisted-documents.json b/graphql-codegen/generated/persisted-documents.json
index a3a76ec..5a56c77 100644
--- a/graphql-codegen/generated/persisted-documents.json
+++ b/graphql-codegen/generated/persisted-documents.json
@@ -1,7 +1,14 @@
 {
   "00c528b2b1c851c06119aedb1fba6b5c885713cf": "query getUser($id: UUID!) { __typename usersCollection(filter: {id: {eq: $id}}) { __typename edges { __typename node { __typename email id name profile_picture_url } } } }",
   "2d419044f6b09dcfdf15e868fceccda14add69f4": "query activityCollection($id: UUID!) { __typename activityCollection(filter: {id: {eq: $id}}) { __typename edges { __typename node { __typename address cost id image_storage_object_id memo time_from time_to title trip_id url } } } }",
-  "995473133e320e5f7ef165df54d56100c62b3a75": "mutation createTrip($date_from: Date, $date_to: Date, $title: String!, $user_id: UUID!) { __typename insertIntotripsCollection( objects: [{user_id: $user_id, title: $title, date_from: $date_from, date_to: $date_to}] ) { __typename records { __typename id title } } }",
-  "911f735030ae63fca4ef8cefcc3c07e92924ea00": "query tripDetails($id: UUID!) { __typename tripsCollection(filter: {id: {eq: $id}}) { __typename edges { __typename node { __typename activityCollection { __typename edges { __typename node { __typename address id time_from time_to title } } } date_from date_to id image_storage_object_id invitationsCollection { __typename edges { __typename node { __typename users { __typename id profile_picture_url } } } } title trip_tagsCollection { __typename edges { __typename node { __typename tags { __typename id name } } } } } } } }",
+  "9ecd6081f83febe06337ebd01345eef596b81cf9": "mutation createTag($name: String!, $userId: UUID!) { __typename insertIntotagsCollection(objects: [{name: $name, user_id: $userId}]) { __typename records { __typename id name } } }",
+  "68140ac8465fd7c6f5bab39db9eec02dab9501ef": "mutation createTrip($object: tripsInsertInput!) { __typename insertIntotripsCollection(objects: [$object]) { __typename records { __typename id title } } }",
+  "b86b0c68b8ee2697ff1b539e5df92575cedb30f0": "mutation createTripTag($tagId: UUID!, $tripId: UUID!) { __typename insertIntotrip_tagsCollection(objects: [{trip_id: $tripId, tag_id: $tagId}]) { __typename records { __typename id tag_id trip_id } } }",
+  "c661c9a00fdae1dbac69eeb283611e0c9202cf55": "mutation deleteTag($id: UUID!) { __typename deleteFromtagsCollection(filter: {id: {eq: $id}}) { __typename records { __typename id name } } }",
+  "1a4d048db574dedfebd859dc737e16a42021f3ff": "mutation deleteTripTag($id: UUID!) { __typename deleteFromtrip_tagsCollection(filter: {id: {eq: $id}}) { __typename records { __typename id } } }",
+  "7b9783d44e5c70098239e977664434de3eae6204": "mutation updateTrip($id: UUID!, $set: tripsUpdateInput!) { __typename updatetripsCollection(set: $set, filter: {id: {eq: $id}}) { __typename records { __typename id title } } }",
+  "994a2e7e0694c279cbfeff6c8696cbbe6a0c687c": "query tagsCollection($userId: UUID!) { __typename tagsCollection( filter: {user_id: {eq: $userId}} orderBy: {created_at: AscNullsLast} ) { __typename edges { __typename node { __typename id name } } } }",
+  "12df849b2205e5cf49fd291f6cb8582aa49100c3": "query tripDetails($id: UUID!) { __typename tripsCollection(filter: {id: {eq: $id}}) { __typename edges { __typename node { __typename activityCollection { __typename edges { __typename node { __typename address id time_from time_to title } } } cost cost_unit date_from date_to id image_storage_object_id invitationsCollection { __typename edges { __typename node { __typename users { __typename id profile_picture_url } } } } title trip_tagsCollection { __typename edges { __typename node { __typename tags { __typename id name } } } } } } } }",
+  "f4142b2a2f4ab96ce0e69488851fdff976486652": "query tripTagsCollection($filter: trip_tagsFilter) { __typename trip_tagsCollection(filter: $filter) { __typename edges { __typename node { __typename id tag_id trip_id } } } }",
   "70a61f873c23f1db13cef7cd265a9845e9bfc53e": "query tripsCollection($after: Cursor, $filter: tripsFilter, $first: Int!, $orderBy: [tripsOrderBy!]) { __typename tripsCollection( filter: $filter first: $first after: $after orderBy: $orderBy ) { __typename edges { __typename node { __typename activityCollection { __typename edges { __typename node { __typename id } } } created_at date_from date_to id id image_storage_object_id invitationsCollection { __typename edges { __typename node { __typename users { __typename id profile_picture_url } } } } title } } pageInfo { __typename endCursor hasNextPage hasPreviousPage startCursor } } }"
 }
diff --git a/package.json b/package.json
index 0dc97a4..1e450e5 100644
--- a/package.json
+++ b/package.json
@@ -24,12 +24,14 @@
     "@emotion/styled": "^11.11.0",
     "@graphql-codegen/client-preset": "^4.1.0",
     "@types/jest": "^29.5.11",
+    "date-fns-tz": "^2.0.0",
     "framer-motion": "^10.16.4",
     "graphql": "^16.8.1",
     "next": "14.0.1",
     "react": "^18",
     "react-calendar": "^4.7.0",
     "react-clock": "^4.6.0",
+    "react-datepicker": "^5.0.0",
     "react-datetime-picker": "^5.6.0",
     "react-dom": "^18",
     "react-dropzone": "^14.2.3",
@@ -60,6 +62,7 @@
     "@testing-library/user-event": "^14.5.1",
     "@types/node": "^20",
     "@types/react": "^18",
+    "@types/react-datepicker": "^4.19.5",
     "@types/react-dom": "^18",
     "@types/react-slick": "^0.23.12",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7111f07..caf40b4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ dependencies:
   '@types/jest':
     specifier: ^29.5.11
     version: 29.5.11
+  date-fns-tz:
+    specifier: ^2.0.0
+    version: 2.0.0(date-fns@2.30.0)
   framer-motion:
     specifier: ^10.16.4
     version: 10.16.4(react-dom@18.2.0)(react@18.2.0)
@@ -47,6 +50,9 @@ dependencies:
   react-clock:
     specifier: ^4.6.0
     version: 4.6.0(@types/react@18.2.36)(react-dom@18.2.0)(react@18.2.0)
+  react-datepicker:
+    specifier: ^5.0.0
+    version: 5.0.0(react-dom@18.2.0)(react@18.2.0)
   react-datetime-picker:
     specifier: ^5.6.0
     version: 5.6.0(@types/react-dom@18.2.14)(@types/react@18.2.36)(react-dom@18.2.0)(react@18.2.0)
@@ -133,6 +139,9 @@ devDependencies:
   '@types/react':
     specifier: ^18
     version: 18.2.36
+  '@types/react-datepicker':
+    specifier: ^4.19.5
+    version: 4.19.5(react-dom@18.2.0)(react@18.2.0)
   '@types/react-dom':
     specifier: ^18
     version: 18.2.14
@@ -3157,6 +3166,12 @@ packages:
       '@floating-ui/utils': 0.1.6
     dev: true
 
+  /@floating-ui/core@1.6.0:
+    resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==}
+    dependencies:
+      '@floating-ui/utils': 0.2.1
+    dev: false
+
   /@floating-ui/dom@1.5.3:
     resolution: {integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==}
     dependencies:
@@ -3164,6 +3179,13 @@ packages:
       '@floating-ui/utils': 0.1.6
     dev: true
 
+  /@floating-ui/dom@1.6.0:
+    resolution: {integrity: sha512-SZ0BEXzsaaS6THZfZJUcAobbZTD+MvfGM42bxgeg0Tnkp4/an/avqwAXiVLsFtIBZtfsx3Ymvwx0+KnnhdA/9g==}
+    dependencies:
+      '@floating-ui/core': 1.6.0
+      '@floating-ui/utils': 0.2.1
+    dev: false
+
   /@floating-ui/react-dom@2.0.2(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==}
     peerDependencies:
@@ -3175,10 +3197,38 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
+  /@floating-ui/react-dom@2.0.7(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-B5GJxKUyPcGsvE1vua+Abvw0t6zVMyTbtG+Jk7BoI4hfc5Ahv50dstRIAn0nS0274kR9gnKwxIXyGA8EzBZJrA==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      '@floating-ui/dom': 1.6.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@floating-ui/react@0.26.7(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-0uMI9IBJBPPt8N+8uRg4gazJvQReWTu/fVUHHLfAOuy1WB6f242jtjWm52hLJG8nzuZVuU+2crW4lJbJQoqeIA==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      '@floating-ui/react-dom': 2.0.7(react-dom@18.2.0)(react@18.2.0)
+      '@floating-ui/utils': 0.2.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      tabbable: 6.2.0
+    dev: false
+
   /@floating-ui/utils@0.1.6:
     resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
     dev: true
 
+  /@floating-ui/utils@0.2.1:
+    resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
+    dev: false
+
   /@graphql-codegen/add@5.0.0(graphql@16.8.1):
     resolution: {integrity: sha512-ynWDOsK2yxtFHwcJTB9shoSkUd7YXd6ZE57f0nk7W5cu/nAgxZZpEsnTPEpZB/Mjf14YRGe2uJHQ7AfElHjqUQ==}
     peerDependencies:
@@ -7180,6 +7230,18 @@ packages:
     resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
     dev: true
 
+  /@types/react-datepicker@4.19.5(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-tKpuj19p9T4sBQm3Bw13CPuhalo4CFOe/LcSUGJ5z6DmHoiBX3uq33iMKePeSEq7OxyU8O1rh5emAm92nyXZLg==}
+    dependencies:
+      '@popperjs/core': 2.11.8
+      '@types/react': 18.2.36
+      date-fns: 2.30.0
+      react-popper: 2.3.0(@popperjs/core@2.11.8)(react-dom@18.2.0)(react@18.2.0)
+    transitivePeerDependencies:
+      - react
+      - react-dom
+    dev: true
+
   /@types/react-dom@18.2.14:
     resolution: {integrity: sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ==}
     dependencies:
@@ -9725,6 +9787,20 @@ packages:
     resolution: {integrity: sha512-8YnDaaf7N3k/q5HnTJVuzSyLETjoZjVmHc4AeKAzOvKHEFQKcn64OKBfzHYtE9zGjctNM7V9I0MfnUVLpi7M5g==}
     dev: true
 
+  /date-fns-tz@2.0.0(date-fns@2.30.0):
+    resolution: {integrity: sha512-OAtcLdB9vxSXTWHdT8b398ARImVwQMyjfYGkKD2zaGpHseG2UPHbHjXELReErZFxWdSLph3c2zOaaTyHfOhERQ==}
+    peerDependencies:
+      date-fns: '>=2.0.0'
+    dependencies:
+      date-fns: 2.30.0
+    dev: false
+
+  /date-fns@2.30.0:
+    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
+    engines: {node: '>=0.11'}
+    dependencies:
+      '@babel/runtime': 7.23.2
+
   /debounce@1.2.1:
     resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==}
     dev: true
@@ -15083,6 +15159,21 @@ packages:
       - '@types/react-dom'
     dev: false
 
+  /react-datepicker@5.0.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-AYpBCzinlE0fpltMtjjcpkiIyZVI3o9rbrhaMuf7oZcFp4LyRW2veCwORVFdcj4ProqnKTwNJBrTtauyanjMwg==}
+    peerDependencies:
+      react: ^16.9.0 || ^17 || ^18
+      react-dom: ^16.9.0 || ^17 || ^18
+    dependencies:
+      '@floating-ui/react': 0.26.7(react-dom@18.2.0)(react@18.2.0)
+      classnames: 2.5.1
+      date-fns: 2.30.0
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-onclickoutside: 6.13.0(react-dom@18.2.0)(react@18.2.0)
+    dev: false
+
   /react-datetime-picker@5.6.0(@types/react-dom@18.2.14)(@types/react@18.2.36)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-zbYSuYuiRj4/6lR9xGjAgw7V4gpTGtzOwZIfw1TONj6K6OKuaDreczS+6ijJjwLYlMcx8V+Sw1IMP+K059wnnA==}
     peerDependencies:
@@ -15249,6 +15340,30 @@ packages:
   /react-is@18.1.0:
     resolution: {integrity: sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==}
 
+  /react-onclickoutside@6.13.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==}
+    peerDependencies:
+      react: ^15.5.x || ^16.x || ^17.x || ^18.x
+      react-dom: ^15.5.x || ^16.x || ^17.x || ^18.x
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /react-popper@2.3.0(@popperjs/core@2.11.8)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==}
+    peerDependencies:
+      '@popperjs/core': ^2.0.0
+      react: ^16.8.0 || ^17 || ^18
+      react-dom: ^16.8.0 || ^17 || ^18
+    dependencies:
+      '@popperjs/core': 2.11.8
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-fast-compare: 3.2.2
+      warning: 4.0.3
+    dev: true
+
   /react-refresh@0.11.0:
     resolution: {integrity: sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==}
     engines: {node: '>=0.10.0'}
@@ -16614,6 +16729,10 @@ packages:
     resolution: {integrity: sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==}
     dev: true
 
+  /tabbable@6.2.0:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+    dev: false
+
   /tapable@1.1.3:
     resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==}
     engines: {node: '>=6'}
@@ -17517,6 +17636,12 @@ packages:
       makeerror: 1.0.12
     dev: true
 
+  /warning@4.0.3:
+    resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: true
+
   /watchpack-chokidar2@2.0.1:
     resolution: {integrity: sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==}
     requiresBuild: true