diff --git a/frontend/app/components/books/BookCard.tsx b/frontend/app/components/books/BookCard.tsx
index 769dd6e3..7eb2a3d0 100644
--- a/frontend/app/components/books/BookCard.tsx
+++ b/frontend/app/components/books/BookCard.tsx
@@ -15,13 +15,23 @@ const BookCard = ({ book }: BookCardProps) => {
 	return (
 		<Card shadow="sm" radius="md" pb="xs" withBorder>
 			<Card.Section withBorder inheritPadding>
-				<BookCardHeader id={book.id} stock={book.stock} />
+				<BookCardHeader
+					id={book.id}
+					stock={book.stock}
+					thumbnail={book.thumbnail}
+				/>
 			</Card.Section>
 			<Card.Section withBorder inheritPadding py="xs">
 				<BookCardThumbnail id={book.id} thumbnail={book.thumbnail} />
 			</Card.Section>
 
-			{!!user && <BookCardFooter id={book.id} stock={book.stock} />}
+			{!!user && (
+				<BookCardFooter
+					id={book.id}
+					stock={book.stock}
+					thumbnail={book.thumbnail}
+				/>
+			)}
 		</Card>
 	);
 };
diff --git a/frontend/app/components/books/BookCardCartButton.tsx b/frontend/app/components/books/BookCardCartButton.tsx
index 5beb1cb3..57fa666f 100644
--- a/frontend/app/components/books/BookCardCartButton.tsx
+++ b/frontend/app/components/books/BookCardCartButton.tsx
@@ -2,16 +2,22 @@ import { Button } from '@mantine/core';
 import { useAtom } from 'jotai';
 import { BiSolidCartAdd } from 'react-icons/bi';
 import { cartAtom } from '~/stores/cartAtom';
+import { addBooksToCart } from '~/utils/cart';
 
 interface BookCardCartButtonProps {
 	id: number;
 	stock: number;
+	thumbnail?: string;
 }
 
-const BookCardCartButton = ({ id, stock }: BookCardCartButtonProps) => {
+const BookCardCartButton = ({
+	id,
+	stock,
+	thumbnail,
+}: BookCardCartButtonProps) => {
 	const [cart, setCart] = useAtom(cartAtom);
 	const addCart = () => {
-		setCart([...cart, { id, stock }]);
+		setCart(addBooksToCart(cart, [{ id, stock, thumbnail }]));
 	};
 	return (
 		<Button
diff --git a/frontend/app/components/books/BookCardFooter.tsx b/frontend/app/components/books/BookCardFooter.tsx
index dc6753c3..a3cb1a08 100644
--- a/frontend/app/components/books/BookCardFooter.tsx
+++ b/frontend/app/components/books/BookCardFooter.tsx
@@ -4,12 +4,13 @@ import BookCardCartButton from './BookCardCartButton';
 interface BookCardFooterProps {
 	id: number;
 	stock: number;
+	thumbnail?: string;
 }
 
-const BookCardFooter = ({ id, stock }: BookCardFooterProps) => {
+const BookCardFooter = ({ id, stock, thumbnail }: BookCardFooterProps) => {
 	return (
 		<Center pt={10}>
-			<BookCardCartButton id={id} stock={stock} />
+			<BookCardCartButton id={id} stock={stock} thumbnail={thumbnail} />
 		</Center>
 	);
 };
diff --git a/frontend/app/components/books/BookCardHeader.tsx b/frontend/app/components/books/BookCardHeader.tsx
index cd7770f5..09235cc9 100644
--- a/frontend/app/components/books/BookCardHeader.tsx
+++ b/frontend/app/components/books/BookCardHeader.tsx
@@ -1,29 +1,29 @@
 import { Checkbox, Group } from '@mantine/core';
 import { useAtom } from 'jotai';
-import { selectedBooksAtom } from '~/stores/bookAtom';
-import type { CartProps } from '~/stores/cartAtom';
+import { SelectedBookProps, selectedBooksAtom } from '~/stores/bookAtom';
 import { userAtom } from '~/stores/userAtom';
 import BookCardHeaderBadge from './BookCardHeaderBadge';
 
 interface BookCardHeaderProps {
 	id: number;
 	stock: number;
+	thumbnail?: string;
 }
 
-const BookCardHeader = ({ id, stock }: BookCardHeaderProps) => {
+const BookCardHeader = ({ id, stock, thumbnail }: BookCardHeaderProps) => {
 	const [selectedBook, setSelectedBook] = useAtom(selectedBooksAtom);
 	const [user] = useAtom(userAtom);
 	//  選択されている本のIDと表示する本のIDを比較する関数
-	const selectedCheck = (element: CartProps) => element.id === id;
+	const isSelected = (element: SelectedBookProps) => element.id === id;
 
-	const selectedBookAdd = () => {
+	const switchBookSelect = () => {
 		// チェックボックスの状態が変化した時に
-		if (selectedBook.some(selectedCheck)) {
+		if (selectedBook.some(isSelected)) {
 			// すでに選択されていた場合は選択を外す
 			setSelectedBook(selectedBook.filter((element) => element.id !== id));
 		} else {
 			// 選択されていなかった場合は選択する
-			setSelectedBook([...selectedBook, { id, stock }]);
+			setSelectedBook([...selectedBook, { id, stock, thumbnail }]);
 		}
 	};
 
@@ -32,8 +32,8 @@ const BookCardHeader = ({ id, stock }: BookCardHeaderProps) => {
 			{!!user && (
 				<Checkbox
 					value={id}
-					checked={selectedBook.some(selectedCheck)}
-					onChange={selectedBookAdd}
+					checked={selectedBook.some(isSelected)}
+					onChange={switchBookSelect}
 				/>
 			)}
 			<BookCardHeaderBadge stock={stock} />
diff --git a/frontend/app/components/books/BookCardThumbnail.tsx b/frontend/app/components/books/BookCardThumbnail.tsx
index 052cceb9..4a9f8a22 100644
--- a/frontend/app/components/books/BookCardThumbnail.tsx
+++ b/frontend/app/components/books/BookCardThumbnail.tsx
@@ -1,5 +1,5 @@
 import { AspectRatio, Image, Overlay, rem } from '@mantine/core';
-import { useNavigate } from '@remix-run/react';
+import { useLocation, useNavigate } from '@remix-run/react';
 import NoImage from '~/img/noImage.png';
 
 interface BookCardThumbnailProps {
@@ -9,12 +9,19 @@ interface BookCardThumbnailProps {
 
 const BookCardThumbnail = ({ id, thumbnail }: BookCardThumbnailProps) => {
 	const navigate = useNavigate();
+	const location = useLocation();
+	const toNavigate = location.pathname.includes('global')
+		? location.pathname + `/books/${id}`
+		: `/home/books/${id}`;
 	return (
 		<AspectRatio
 			ratio={10 / 14}
-			style={{ flex: `0 0 ${rem(400)}`, cursor: id ? 'pointer' : undefined }}
+			style={{
+				flex: `0 0 ${rem(400)}`,
+				cursor: id ? 'pointer' : undefined,
+			}}
 			component="div"
-			onClick={() => id && navigate(`books/${id}`)}
+			onClick={() => id && navigate(toNavigate)}
 		>
 			<Image src={thumbnail ? thumbnail : NoImage} alt="Book cover" />
 			{!id && <Overlay color="gray" backgroundOpacity={0.5} />}
diff --git a/frontend/app/components/books/BookCards.tsx b/frontend/app/components/books/BookCards.tsx
index d2fc259f..79d29ad4 100644
--- a/frontend/app/components/books/BookCards.tsx
+++ b/frontend/app/components/books/BookCards.tsx
@@ -27,6 +27,7 @@ const BookCards = ({ books }: BookCardsProps) => {
 						'1400px': 6,
 						'1700px': 7,
 					}}
+					// 画面幅が300pxを超えた場合、カードの間をxlにする
 					spacing={{ base: 10, '300px': 'xl' }}
 				>
 					{books.map((book) => (
diff --git a/frontend/app/components/books/BookSelectedDialog.tsx b/frontend/app/components/books/BookSelectedDialog.tsx
index 3bb5138a..507d2878 100644
--- a/frontend/app/components/books/BookSelectedDialog.tsx
+++ b/frontend/app/components/books/BookSelectedDialog.tsx
@@ -3,6 +3,7 @@ import { useSubmit } from '@remix-run/react';
 import { useAtom } from 'jotai';
 import { selectedBooksAtom } from '~/stores/bookAtom';
 import { cartAtom } from '~/stores/cartAtom';
+import { addBooksToCart } from '~/utils/cart';
 import { successNotification } from '~/utils/notification';
 
 const BookSelectedDialog = () => {
@@ -29,7 +30,7 @@ const BookSelectedDialog = () => {
 					fz="xs"
 					color="yellow"
 					onClick={() => {
-						setCart([...cart, ...selectedBook]);
+						setCart(addBooksToCart(cart, selectedBook));
 						setSelectedBook([]);
 
 						successNotification('カートに追加しました');
diff --git a/frontend/app/components/cart/CartCard.tsx b/frontend/app/components/cart/CartCard.tsx
new file mode 100644
index 00000000..2337dd46
--- /dev/null
+++ b/frontend/app/components/cart/CartCard.tsx
@@ -0,0 +1,28 @@
+import { Card } from '@mantine/core';
+import { CartProps } from '~/stores/cartAtom';
+import BookCardThumbnail from '../books/BookCardThumbnail';
+import CartCardHeader from './CartCardHeader';
+
+interface CartCardProps {
+	book: CartProps;
+}
+
+const CartCard = ({ book }: CartCardProps) => {
+	return (
+		<Card shadow="sm" radius="md" pb="xs" withBorder>
+			<Card.Section withBorder inheritPadding>
+				<CartCardHeader
+					id={book.id}
+					stock={book.stock}
+					volume={book.volume}
+					thumbnail={book.thumbnail}
+				/>
+			</Card.Section>
+			<Card.Section withBorder inheritPadding py="xs">
+				<BookCardThumbnail id={book.id} thumbnail={book.thumbnail} />
+			</Card.Section>
+		</Card>
+	);
+};
+
+export default CartCard;
diff --git a/frontend/app/components/cart/CartCardHeader.tsx b/frontend/app/components/cart/CartCardHeader.tsx
new file mode 100644
index 00000000..3a405125
--- /dev/null
+++ b/frontend/app/components/cart/CartCardHeader.tsx
@@ -0,0 +1,77 @@
+import { Checkbox, Group } from '@mantine/core';
+import { useAtom } from 'jotai';
+import { cartAtom, CartProps, selectedCartBooksAtom } from '~/stores/cartAtom';
+import CartCardNumberInput from './CartCardNumberInput';
+
+interface CartCardHeaderProps {
+	id: number;
+	stock: number;
+	volume: number;
+	thumbnail?: string;
+}
+
+const CartCardHeader = ({
+	id,
+	stock,
+	volume,
+	thumbnail,
+}: CartCardHeaderProps) => {
+	const [cart, setCart] = useAtom(cartAtom);
+	const [selectedCartBook, setSelectedCartBook] = useAtom(
+		selectedCartBooksAtom,
+	);
+
+	// 該当する本のvolumeを変更する
+	const handleChangeVolume = (id: number, value: number) => {
+		setCart(
+			cart.map((element) => {
+				if (element.id === id) {
+					return {
+						id: element.id,
+						stock: element.stock,
+						thumbnail: element.thumbnail,
+						volume: value,
+					};
+				}
+				return element;
+			}),
+		);
+	};
+
+	//  選択されている本のIDと表示する本のIDを比較する関数
+	const isSelected = (element: CartProps) => element.id === id;
+
+	const switchBookSelect = () => {
+		// チェックボックスの状態が変化した時に
+		if (selectedCartBook.some(isSelected)) {
+			// すでに選択されていた場合は選択を外す
+			setSelectedCartBook(
+				selectedCartBook.filter((element) => element.id !== id),
+			);
+		} else {
+			// 選択されていなかった場合は選択する
+			setSelectedCartBook([
+				...selectedCartBook,
+				{ id, stock, thumbnail, volume: 1 },
+			]);
+		}
+	};
+
+	return (
+		<Group justify="space-between" py={10}>
+			<Checkbox
+				value={id}
+				checked={selectedCartBook.some(isSelected)}
+				onChange={switchBookSelect}
+			/>
+			<CartCardNumberInput
+				id={id}
+				stock={stock}
+				volume={volume}
+				handleChangeVolume={handleChangeVolume}
+			/>
+		</Group>
+	);
+};
+
+export default CartCardHeader;
diff --git a/frontend/app/components/cart/CartCardNumberInput.tsx b/frontend/app/components/cart/CartCardNumberInput.tsx
new file mode 100644
index 00000000..4434ca9e
--- /dev/null
+++ b/frontend/app/components/cart/CartCardNumberInput.tsx
@@ -0,0 +1,40 @@
+import { Group, Select, Text } from '@mantine/core';
+import { range } from '@mantine/hooks';
+
+interface CartCardHeaderBadgeProps {
+	id: number;
+	stock: number;
+	volume: number;
+	handleChangeVolume: (id: number, value: number) => void;
+}
+
+const CartCardNumberInput = ({
+	id,
+	stock,
+	volume,
+	handleChangeVolume,
+}: CartCardHeaderBadgeProps) => {
+	const stockList = range(0, stock);
+	const dataList = stock >= volume ? stockList : [...stockList, volume];
+	const strList = dataList.map((data) => data.toString());
+
+	const handleOnChange = (volume: string | null) => {
+		if (!volume) return;
+		const numVolume = Number(volume);
+		handleChangeVolume(id, numVolume);
+	};
+	return (
+		<Group justify="flex-end" w="70%">
+			<Text>冊数</Text>
+			<Select
+				w="50%"
+				data={strList}
+				value={String(volume)}
+				error={volume > stock}
+				onChange={(value) => handleOnChange(value)}
+			/>
+		</Group>
+	);
+};
+
+export default CartCardNumberInput;
diff --git a/frontend/app/components/cart/CartCards.tsx b/frontend/app/components/cart/CartCards.tsx
new file mode 100644
index 00000000..2ab0ce6b
--- /dev/null
+++ b/frontend/app/components/cart/CartCards.tsx
@@ -0,0 +1,32 @@
+import { ScrollArea, SimpleGrid } from '@mantine/core';
+import { useAtom } from 'jotai';
+import { cartAtom } from '~/stores/cartAtom';
+import CartCard from './CartCard';
+
+const CartCards = () => {
+	const [cart] = useAtom(cartAtom);
+
+	return (
+		<ScrollArea h="70dh">
+			<SimpleGrid
+				type="container"
+				cols={{
+					base: 2,
+					'500px': 3,
+					'800px': 4,
+					'1100px': 5,
+					'1400px': 6,
+					'1700px': 7,
+				}}
+				// 画面幅が300pxを超えた場合、カードの間をxlにする
+				spacing={{ base: 10, '300px': 'xl' }}
+			>
+				{cart.map((book, index) => (
+					<CartCard key={index} book={book} />
+				))}
+			</SimpleGrid>
+		</ScrollArea>
+	);
+};
+
+export default CartCards;
diff --git a/frontend/app/components/cart/CartListComponent.tsx b/frontend/app/components/cart/CartListComponent.tsx
new file mode 100644
index 00000000..ab5b51af
--- /dev/null
+++ b/frontend/app/components/cart/CartListComponent.tsx
@@ -0,0 +1,34 @@
+import { Stack } from '@mantine/core';
+import CartTitle from './CartTitle';
+import CartCards from './CartCards';
+import CartSelectedDialog from './CartSelectedDialog';
+import { useAtom } from 'jotai';
+import { cartAtom } from '~/stores/cartAtom';
+import NoCartComponent from './NoCartComponent';
+
+interface CartListComponentProps {
+	handleBorrowButtonClick: () => void;
+}
+
+const CartListComponent = ({
+	handleBorrowButtonClick,
+}: CartListComponentProps) => {
+	const [cart] = useAtom(cartAtom);
+	return (
+		<Stack bg="var(--mantine-color-body)" align="stretch" justify="flex-start">
+			<CartTitle />
+			{cart.length == 0 ? (
+				<NoCartComponent />
+			) : (
+				<>
+					<CartCards />
+					<CartSelectedDialog
+						handleBorrowButtonClick={handleBorrowButtonClick}
+					/>
+				</>
+			)}
+		</Stack>
+	);
+};
+
+export default CartListComponent;
diff --git a/frontend/app/components/cart/CartSelectedDialog.tsx b/frontend/app/components/cart/CartSelectedDialog.tsx
new file mode 100644
index 00000000..dae517f5
--- /dev/null
+++ b/frontend/app/components/cart/CartSelectedDialog.tsx
@@ -0,0 +1,56 @@
+import { Button, Dialog, Stack } from '@mantine/core';
+import { useAtom } from 'jotai';
+import { cartAtom, selectedCartBooksAtom } from '~/stores/cartAtom';
+import { removeBooksFromCart } from '~/utils/cart';
+
+interface CartSelectedDialogProps {
+	handleBorrowButtonClick: () => void;
+}
+
+const CartSelectedDialog = ({
+	handleBorrowButtonClick,
+}: CartSelectedDialogProps) => {
+	const [selectedCartBook, setSelectedCartBook] = useAtom(
+		selectedCartBooksAtom,
+	);
+	const [cart, setCart] = useAtom(cartAtom);
+
+	return (
+		<Dialog
+			opened={selectedCartBook.length > 0}
+			onClose={() => setSelectedCartBook([])}
+		>
+			<Stack
+				bg="var(--mantine-color-body)"
+				align="stretch"
+				justify="center"
+				gap="md"
+			>
+				<Button fz="xs" color="blue" onClick={handleBorrowButtonClick}>
+					借りる
+				</Button>
+				<Button
+					fz="xs"
+					color="red"
+					onClick={() => {
+						setCart(removeBooksFromCart(cart, selectedCartBook));
+						setSelectedCartBook([]);
+					}}
+				>
+					カートから削除する
+				</Button>
+				<Button
+					fz="xs"
+					variant="light"
+					bd="solid 2px"
+					onClick={() => setSelectedCartBook([])}
+				>
+					選択を解除する
+				</Button>
+			</Stack>
+		</Dialog>
+	);
+	return <div>CartSelectedDialog</div>;
+};
+
+export default CartSelectedDialog;
diff --git a/frontend/app/components/cart/CartTitle.tsx b/frontend/app/components/cart/CartTitle.tsx
new file mode 100644
index 00000000..b2eeaf31
--- /dev/null
+++ b/frontend/app/components/cart/CartTitle.tsx
@@ -0,0 +1,15 @@
+import { Center, Group, Title } from '@mantine/core';
+import { FaShoppingCart } from 'react-icons/fa';
+
+const CartTitle = () => {
+	return (
+		<Center>
+			<Group justify="center" align="center">
+				<FaShoppingCart size="3.5ch" />
+				<Title order={1}>貸出カート</Title>
+			</Group>
+		</Center>
+	);
+};
+
+export default CartTitle;
diff --git a/frontend/app/components/cart/NoCartComponent.tsx b/frontend/app/components/cart/NoCartComponent.tsx
new file mode 100644
index 00000000..acb76461
--- /dev/null
+++ b/frontend/app/components/cart/NoCartComponent.tsx
@@ -0,0 +1,19 @@
+import { Anchor, Blockquote, Center } from '@mantine/core';
+import { FaInfoCircle } from 'react-icons/fa';
+
+interface NoCartComponentProps {
+	color?: string;
+}
+
+const NoCartComponent = ({ color }: NoCartComponentProps) => {
+	return (
+		<Center h="70dh" w="100%">
+			<Blockquote color={color ?? 'blue'} icon={<FaInfoCircle />} mt="xl">
+				カートに本が入っていません。蔵書一覧は
+				<Anchor href="/home">こちら</Anchor>から。
+			</Blockquote>
+		</Center>
+	);
+};
+
+export default NoCartComponent;
diff --git a/frontend/app/components/global-books/GlobalBookCards.tsx b/frontend/app/components/global-books/GlobalBookCards.tsx
index 1165d6dd..47645629 100644
--- a/frontend/app/components/global-books/GlobalBookCards.tsx
+++ b/frontend/app/components/global-books/GlobalBookCards.tsx
@@ -23,6 +23,7 @@ const GlobalBookCards = ({ books }: GlobalBookCardsProps) => {
 					'1400px': 6,
 					'1700px': 7,
 				}}
+				// 画面幅が300pxを超えた場合、カードの間をxlにする
 				spacing={{ base: 10, '300px': 'xl' }}
 			>
 				{books.map((book) => (
diff --git a/frontend/app/routes/home.cart/route.tsx b/frontend/app/routes/home.cart/route.tsx
new file mode 100644
index 00000000..28c2a180
--- /dev/null
+++ b/frontend/app/routes/home.cart/route.tsx
@@ -0,0 +1,124 @@
+import {
+	ActionFunctionArgs,
+	LoaderFunctionArgs,
+	redirect,
+} from '@remix-run/cloudflare';
+import { useSubmit } from '@remix-run/react';
+import { upsertLoans } from 'client/client';
+import { UpsertLoansBodyItem } from 'client/client.schemas';
+import { useAtom } from 'jotai';
+import { useEffect } from 'react';
+import CartListComponent from '~/components/cart/CartListComponent';
+import { commitSession, getSession } from '~/services/session.server';
+import { cartAtom, selectedCartBooksAtom } from '~/stores/cartAtom';
+import type { CartProps } from '~/stores/cartAtom';
+import { removeBooksFromCart } from '~/utils/cart';
+import { errorNotification } from '~/utils/notification';
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+	const session = await getSession(request.headers.get('Cookie'));
+	if (!session) {
+		return redirect('/login', {
+			headers: {
+				'Set-Cookie': await commitSession(session),
+			},
+		});
+	}
+	return null;
+};
+
+export const action = async ({ request }: ActionFunctionArgs) => {
+	const session = await getSession(request.headers.get('Cookie'));
+
+	// 未ログインの場合
+	const userId = session.get('userId');
+	if (!userId) {
+		return redirect('/login', {
+			headers: {
+				'Set-Cookie': await commitSession(session),
+			},
+		});
+	}
+
+	const cookieHeader = [
+		`__Secure-user_id=${session.get('userId')};`,
+		`__Secure-session_token=${session.get('sessionToken')}`,
+	].join('; ');
+
+	// prettier-ignore
+	const requestBody = await request.json<{ selectedCartBook: CartProps[] }>();
+	const selectedCartBook = requestBody.selectedCartBook;
+	const upsertBody: UpsertLoansBodyItem[] = selectedCartBook.map((book) => {
+		return {
+			bookId: book.id,
+			userId: Number(userId),
+			volume: book.volume,
+		};
+	});
+
+	const response = await upsertLoans(upsertBody, {
+		headers: { Cookie: cookieHeader },
+	});
+
+	switch (response.status) {
+		case 200:
+			session.flash('success', '本を借りました');
+			return redirect('/home', {
+				headers: {
+					'Set-Cookie': await commitSession(session),
+				},
+			});
+
+		case 401:
+			session.flash('error', 'ログインしてください');
+			return redirect('/login', {
+				headers: {
+					'Set-Cookie': await commitSession(session),
+				},
+			});
+
+		default:
+			session.flash('error', '本を借りられませんでした');
+			return redirect('/home/cart', {
+				headers: {
+					'Set-Cookie': await commitSession(session),
+				},
+			});
+	}
+};
+
+const CartListPage = () => {
+	const [selectedCartBook, setSelectedCartBook] = useAtom(
+		selectedCartBooksAtom,
+	);
+	const [cart, setCart] = useAtom(cartAtom);
+	const submit = useSubmit();
+
+	useEffect(() => {
+		// 選択中の書籍をリセットする
+		setSelectedCartBook([]);
+	}, []);
+
+	// volumeがstockを超えていないかチェックする
+	const checkStock = (element: CartProps) => element.stock < element.volume;
+
+	const handleBorrowButtonClick = () => {
+		if (selectedCartBook.length > 0 && !selectedCartBook.some(checkStock)) {
+			submit(JSON.stringify({ selectedCartBook: selectedCartBook }), {
+				action: '/home/cart',
+				method: 'PATCH',
+				encType: 'application/json',
+			});
+			setCart(removeBooksFromCart(cart, selectedCartBook));
+			setSelectedCartBook([]);
+		} else {
+			errorNotification('在庫が足りません');
+		}
+	};
+
+	return (
+		<CartListComponent handleBorrowButtonClick={handleBorrowButtonClick} />
+	);
+};
+
+export default CartListPage;
diff --git a/frontend/app/stores/bookAtom.ts b/frontend/app/stores/bookAtom.ts
index a8308dfe..bdb02398 100644
--- a/frontend/app/stores/bookAtom.ts
+++ b/frontend/app/stores/bookAtom.ts
@@ -3,6 +3,7 @@ import { atom } from 'jotai';
 export interface SelectedBookProps {
 	id: number;
 	stock: number;
+	thumbnail?: string;
 }
 
 // 選択された本を管理するAtom
diff --git a/frontend/app/stores/cartAtom.ts b/frontend/app/stores/cartAtom.ts
index c4769c90..8a245bcb 100644
--- a/frontend/app/stores/cartAtom.ts
+++ b/frontend/app/stores/cartAtom.ts
@@ -1,11 +1,16 @@
 import { atomWithStorage, createJSONStorage } from 'jotai/utils';
+import { SelectedBookProps } from './bookAtom';
+import { atom } from 'jotai';
 
 const storage = createJSONStorage<CartProps[]>(() => sessionStorage);
-export interface CartProps {
-	id: number;
-	stock: number;
+export interface CartProps extends SelectedBookProps {
+	volume: number;
 }
 
 // カートの中身を管理するAtom
 // 生存時間: セッションストレージ(タブが閉じられるまで)
 export const cartAtom = atomWithStorage<CartProps[]>('cart', [], storage);
+
+// 選択されたカートの本を管理するAtom
+// 生存時間: DOM(ページをリロードするまで)
+export const selectedCartBooksAtom = atom<CartProps[]>([]);
diff --git a/frontend/app/utils/cart.ts b/frontend/app/utils/cart.ts
new file mode 100644
index 00000000..2dc4179e
--- /dev/null
+++ b/frontend/app/utils/cart.ts
@@ -0,0 +1,27 @@
+import { SelectedBookProps } from '~/stores/bookAtom';
+import { CartProps } from '~/stores/cartAtom';
+
+export const addBooksToCart = (
+	cart: CartProps[],
+	books: SelectedBookProps[],
+) => {
+	for (const book of books) {
+		const index = cart.findIndex((cartBook) => cartBook.id === book.id);
+		if (index !== -1) {
+			cart[index].volume += 1;
+		} else {
+			cart.push({
+				id: book.id,
+				stock: book.stock,
+				thumbnail: book.thumbnail,
+				volume: 1,
+			});
+		}
+	}
+	return cart;
+};
+
+export const removeBooksFromCart = (cart: CartProps[], books: CartProps[]) => {
+	const idList = books.map((book) => book.id);
+	return cart.filter((cartBook) => !idList.includes(cartBook.id));
+};