diff --git a/src/app/[lng]/components/ContractBox/ContractBase.tsx b/src/app/[lng]/components/ContractBox/ContractBase.tsx
index 4e0fa37..38d0f0c 100644
--- a/src/app/[lng]/components/ContractBox/ContractBase.tsx
+++ b/src/app/[lng]/components/ContractBox/ContractBase.tsx
@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEye } from '@fortawesome/free-solid-svg-icons';
 import Image from 'next/image';
-import { maxCharacters } from '@/app/utils/contract';
 import { Contract } from '@/app/type/type';
+import { faMessage, faEnvelope } from '@fortawesome/free-regular-svg-icons';
 
 export const ContractBase = ({ t, fitXs, r }: { t: any; fitXs: boolean; r: Contract }) => {
 	const {
@@ -16,8 +16,8 @@ export const ContractBase = ({ t, fitXs, r }: { t: any; fitXs: boolean; r: Contr
 		monthly_rental,
 		modify_time,
 		view = 128,
-		description,
 		creator,
+		processing_fee,
 	} = r;
 	const currency = 'NTD';
 	const selection = {
@@ -46,6 +46,13 @@ export const ContractBase = ({ t, fitXs, r }: { t: any; fitXs: boolean; r: Contr
 			return '無法計算';
 		}
 	};
+	const price = () => {
+		let d = new Date(expiry_date).getTime();
+		let now = new Date().getTime();
+
+		const monthCount = Math.round(Math.abs(d - now) / 1000 / 60 / 60 / 24 / 30);
+		return monthly_rental * monthCount + processing_fee;
+	};
 	return (
 		<div
 			className={`contract-box box-border block h-full w-full cursor-pointer rounded-xl bg-[linear-gradient(to_right,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('/world_gym.jpg')] bg-cover p-5 text-white opacity-90 hover:opacity-100 md:gap-5 ${
@@ -61,42 +68,64 @@ export const ContractBase = ({ t, fitXs, r }: { t: any; fitXs: boolean; r: Contr
 				<Image src={world_gym} width={200} alt="wg" className="h-full w-full" />
 			</div>
 
-			<div className={`text-box-left text-left md:py-2 ${fitXs ? '' : 'md:w-2/6 md:flex-auto'}`}>
-				<p className="m-0 text-2xl md:text-xl">{maxCharacters(title, 15)}</p>
-				<p className="m-0 text-sm">
+			<div
+				className={`text-box-left flex flex-wrap py-2 text-left md:gap-2 ${
+					fitXs ? 'md:gap-0' : 'md:w-2/6 md:flex-auto'
+				}`}
+			>
+				<div className="m-0 w-full overflow-hidden text-ellipsis whitespace-nowrap text-2xl md:text-xl">
+					{title}
+				</div>
+				<div className="m-0 text-sm">
 					{gym_typeCaption()} {store}
-				</p>
-				<p
-					id="description"
-					className={`m-0 hidden text-sm text-charcoal md:block ${fitXs && 'md:hidden'}`}
-				>
-					{maxCharacters(description)}
-				</p>
-				<p className={`hidden text-sm md:block ${fitXs && 'md:hidden'}`}>
+				</div>
+				<div className={`hidden w-full text-sm md:block ${fitXs && 'md:hidden'}`}>
 					{t('creator')}: {creator.first_name}
-				</p>
+				</div>
+				<div className={`hidden w-full flex-wrap gap-2 md:flex ${fitXs && 'md:hidden'}`}>
+					<FontAwesomeIcon
+						icon={faMessage}
+						className={`cursor-pointer text-3xl ${creator.mobile ? '' : 'opacity-20'}`}
+						title={creator.mobile}
+					/>
+					<FontAwesomeIcon
+						icon={faEnvelope}
+						className={`cursor-pointer text-3xl ${creator.email ? '' : 'opacity-20'}`}
+						title={creator.email}
+					/>
+				</div>
 			</div>
-			<div className={`text-box-right text-right md:py-2 ${fitXs ? '' : 'md:w-3/6 md:flex-auto'}`}>
-				<p className="m-0 text-2xl">
+			<div
+				className={`text-box-right flex flex-wrap py-2 text-right md:gap-2 ${
+					fitXs ? 'md:gap-0' : 'md:w-3/6 md:flex-auto'
+				}`}
+			>
+				<div className={`m-0 hidden w-full text-2xl md:block ${fitXs ? 'hidden md:hidden' : ''}`}>
 					<span className={`${fitXs ? '' : 'md:text-dodgerBlue'}`}>
-						{currency} ${monthly_rental}
-					</span>{' '}
-					{t('monthly')}
-				</p>
-				<div>
+						{currency} ${price()}
+					</span>
+				</div>
+				<div
+					className={`w-full text-2xl md:text-slateGrey ${
+						fitXs ? 'text-2xl md:text-2xl md:text-white' : 'md:text-base md:text-slateGrey'
+					}`}
+				>
+					{currency} ${monthly_rental}&nbsp;{t('Monthly')}
+				</div>
+				<div className="w-full">
 					<p className="m-0 text-sm">
 						{t('expiryDate')}: {mm_yyyy()}
 					</p>
 					<div style={{ clear: 'both' }}></div>
 				</div>
-				<div>
+				<div className="w-full">
 					<p className="m-0 text-sm">
 						{t('updateDate')}: {mm_yyyy_modify_time()}
 					</p>
 					<div style={{ clear: 'both' }}></div>
 				</div>
 			</div>
-			<div className={`view-count text-sm ${fitXs ? 'hidden' : 'md:hidden'}`}>
+			<div className={`view-count hidden text-sm`}>
 				<FontAwesomeIcon icon={faEye} />
 				&nbsp; {view}
 			</div>
diff --git a/src/app/[lng]/contracts/[id]/page.tsx b/src/app/[lng]/contracts/[id]/page.tsx
index 7fcec61..c0a478b 100644
--- a/src/app/[lng]/contracts/[id]/page.tsx
+++ b/src/app/[lng]/contracts/[id]/page.tsx
@@ -50,7 +50,7 @@ export default async function Page({ params: { lng, id: recordId } }: any) {
 		let d = new Date(expiry_date).getTime();
 		let now = new Date().getTime();
 
-		const monthCount = Math.round((d - now) / 1000 / 60 / 60 / 24 / 30);
+		const monthCount = Math.round(Math.abs(d - now) / 1000 / 60 / 60 / 24 / 30);
 		return monthly_rental * monthCount + processing_fee;
 	};
 	const gym_typeCaption = (v: any) => {
@@ -94,12 +94,16 @@ export default async function Page({ params: { lng, id: recordId } }: any) {
 								<div className="flex flex-wrap gap-2">
 									<FontAwesomeIcon
 										icon={faMessage}
-										className="cursor-pointer text-3xl opacity-70 hover:opacity-100"
+										className={`text-3xl opacity-70 ${
+											creator.mobile ? 'cursor-pointer hover:opacity-100' : 'opacity-20'
+										}`}
 										title={creator.mobile}
 									/>
 									<FontAwesomeIcon
 										icon={faEnvelope}
-										className="cursor-pointer text-3xl opacity-70 hover:opacity-100"
+										className={`text-3xl opacity-70 ${
+											creator.email ? 'cursor-pointer hover:opacity-100' : 'opacity-20'
+										}`}
 										title={creator.email}
 									/>
 								</div>
diff --git a/src/app/[lng]/contracts/[id]/update/page.tsx b/src/app/[lng]/contracts/[id]/update/page.tsx
index 921ccff..424e1d4 100644
--- a/src/app/[lng]/contracts/[id]/update/page.tsx
+++ b/src/app/[lng]/contracts/[id]/update/page.tsx
@@ -133,7 +133,7 @@ export default function Page({ params: { lng, id: recordId } }: any) {
 		if (d) {
 			let now = new Date().getTime();
 
-			const monthCount = Math.round((d - now) / 1000 / 60 / 60 / 24 / 30);
+			const monthCount = Math.round(Math.abs(d - now) / 1000 / 60 / 60 / 24 / 30);
 			const v = monthly_rental * monthCount + processing_fee;
 			setPrice(v);
 		}
diff --git a/src/app/[lng]/contracts/page.tsx b/src/app/[lng]/contracts/page.tsx
index bc1f19a..30fbbdd 100644
--- a/src/app/[lng]/contracts/page.tsx
+++ b/src/app/[lng]/contracts/page.tsx
@@ -1,12 +1,8 @@
-// 'use client';
 import React from 'react';
-// import { useState, useEffect } from 'react';
 import { ContractBox } from '../components/ContractBox';
 import SearchBox from '../components/SearchBox';
 import loadingGif from '../../../../public/loading.gif';
 import { getContracts } from '../../apis/api';
-import selections from '../../../../public/selections.json';
-import zipCode from '../../../../public/twZipCode.json';
 import Link from 'next/link';
 import Image from 'next/image';
 import { Contract } from '../../type/type';
@@ -19,7 +15,6 @@ const Contract = async ({ params: { lng }, searchParams }: any) => {
 	const { t } = await useTranslation(lng, 'contracts');
 	const currentPage = Number(searchParams.page) || 1;
 	const defaultPageSize = 10;
-	// TODO: expiry_date is a key feature, should be set as order
 
 	const { results: contracts, count: recordCount }: { results: Contract[]; count: number } =
 		await getContracts({
@@ -27,26 +22,6 @@ const Contract = async ({ params: { lng }, searchParams }: any) => {
 			county: searchParams?.county,
 			q: searchParams?.q,
 		});
-	const selection = {
-		zipCode,
-		gym_types: selections[0].list,
-	};
-	// useEffect(() => {
-	// 	let ret: any[] = [];
-	// 	let selectedDistricts = selection.zipCode.find((item: any) => item.name === filter.county);
-
-	// 	if (selectedDistricts) {
-	// 		ret = selectedDistricts.districts;
-	// 	}
-	// 	setDistricts(ret);
-	// }, [filter.county, selection.zipCode]);
-
-	// function handleFilterChange(event: any) {
-	// 	setFilter({ ...filter, [event.target.name]: event.target.value });
-	// }
-	// function handleSorterChange(event: any) {
-	// 	setOrdering({ ...ordering, [event.target.name]: event.target.value });
-	// }
 
 	return (
 		<div className="contracts h-full w-full p-5 md:py-0">
diff --git a/src/app/[lng]/setting/new-contract/page.tsx b/src/app/[lng]/setting/new-contract/page.tsx
index 995af0c..8c6b333 100644
--- a/src/app/[lng]/setting/new-contract/page.tsx
+++ b/src/app/[lng]/setting/new-contract/page.tsx
@@ -124,7 +124,7 @@ export default function Page({ params: { lng, id: recordId } }: any) {
 		if (d) {
 			let now = new Date().getTime();
 
-			const monthCount = Math.round((d - now) / 1000 / 60 / 60 / 24 / 30);
+			const monthCount = Math.round(Math.abs(d - now) / 1000 / 60 / 60 / 24 / 30);
 			const v = monthly_rental * monthCount + processing_fee;
 			setPrice(v);
 		}
diff --git a/src/app/i18n/locales/en/contracts.json b/src/app/i18n/locales/en/contracts.json
index c9b9069..cbd33c0 100644
--- a/src/app/i18n/locales/en/contracts.json
+++ b/src/app/i18n/locales/en/contracts.json
@@ -17,7 +17,7 @@
 	"soldOut": "Sold Out",
 	"updateDate": "Update Date",
 	"creator": "Creator",
-	"monthly": "per month",
+	"Monthly": "Monthly",
 	"all": "All",
 	"month": "Month",
 	"expired": "Expired",
diff --git a/src/app/i18n/locales/zh/contracts.json b/src/app/i18n/locales/zh/contracts.json
index de823fd..f1260d1 100644
--- a/src/app/i18n/locales/zh/contracts.json
+++ b/src/app/i18n/locales/zh/contracts.json
@@ -17,7 +17,7 @@
 	"soldOut": "已售出",
 	"updateDate": "更新日期",
 	"creator": "刊登會員",
-	"monthly": "/月",
+	"Monthly": "/月",
 	"all": "全部區域",
 	"month": "月",
 	"expired": "過期",