diff --git a/components/Footer.vue b/components/Footer.vue
index 0e58b97..00733c0 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -2,14 +2,15 @@
     <div class="footer-top text-center">
         <div class="footer-line">
             <NuxtLink :to="localePath('/')" class="footer-title">
-                <div>{{ $t("pages.index") }}</div>
+                <div>Web Shot</div>
             </NuxtLink>
             <div class="text-secondary">{{ $t("index.banner.title") }}</div>
         </div>
     </div>
     <v-container class="footer">
         <v-row>
-            <v-col sm="6" cols="12" class="py-2">
+            <v-col md="6" cols="12" class="py-2"
+                :align="$vuetify.display.mobile ? 'center' : $vuetify.locale.isRtl ? 'right' : 'left'">
                 <v-btn class="mx-1" :to="localePath('docs')" variant="text" prepend-icon="mdi-circle-medium">{{
                     $t("pages.docs") }}</v-btn>
                 <v-btn class="mx-1" :to="localePath('gallery')" variant="text" prepend-icon="mdi-circle-medium">{{
@@ -17,7 +18,7 @@
                 <v-btn class="mx-1" :to="localePath('contact')" variant="text" prepend-icon="mdi-circle-medium">{{
                     $t("pages.contact") }}</v-btn>
             </v-col>
-            <v-col sm="6" cols="12" class="py-2"
+            <v-col md="6" cols="12" class="py-2"
                 :align="$vuetify.display.mobile ? 'center' : $vuetify.locale.isRtl ? 'left' : 'right'">
                 <div class="footer-sen">&copy; {{ $t("copy-right") }}</div>
             </v-col>
@@ -38,6 +39,15 @@ export default defineComponent({
     .v-btn__prepend {
         margin: 0px;
     }
+
+    @media(max-width: 750px) {
+
+        .v-btn {
+            width: 88px;
+            font-size: 13px;
+        }
+    }
+
 }
 
 .footer-top {
diff --git a/components/Header.vue b/components/Header.vue
index 4a3e901..7ba9064 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -1,6 +1,7 @@
 <template>
 	<v-app-bar class="app-bar px-5" :elevation="0" color="white" density="comfortable">
-		<NuxtLink :to="localePath('/')" class="toolbar-title me-6">
+		<NuxtLink :to="localePath('/')" class="toolbar-title me-sm-6 ms-1"
+			:class="$vuetify.locale.isRtl ? '' : 'english-font'">
 			<v-app-bar-title>{{ $t("pages.index") }}</v-app-bar-title>
 		</NuxtLink>
 		<v-toolbar-items class="hidden-sm-and-down">
@@ -13,7 +14,7 @@
 			<template v-slot:activator="{ props }">
 				<v-btn variant="text" color="light" height="80%" v-bind="props">
 					<span class="fi flag mx-1 rounded" :class="`fi-` + currentLang.country" />
-					{{ currentLang.title }}
+					{{ $vuetify.display.smAndUp ? currentLang.title : currentLang.title.slice(0, 2) }}
 				</v-btn>
 			</template>
 			<v-list :elevation="3">
@@ -81,8 +82,11 @@ export default defineComponent({
 .app-bar {
 	.toolbar-title {
 		text-decoration: none;
-		font-family: Audiowide;
 		color: black;
 	}
+
+	.english-font {
+		font-family: Audiowide;
+	}
 }
 </style>
diff --git a/locales/en.json b/locales/en.json
index 1a2fa2a..ddf0c39 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -48,5 +48,16 @@
     "contact.subtitle": "Ways of communication",
     "contact.ways.email": "Email:",
     "contact.ways.phone": "Phone:",
-    "fetch-data.error.server": "Server error"
+    "fetch-data.error.server": "Server error",
+    "api.options.resolution": "Resolution:",
+    "api.options.resolution.custom-btn": "custom",
+    "api.options.width":"Width:",
+    "api.options.height":"Height:",
+    "api.options.timeout":"Timeout:",
+    "api.options.max-age":"Max age:",
+    "api.options.full-page":"Full page:",
+    "api.options.format":"Format:",
+    "api.options.units.px":"px",
+    "api.options.units.second": "s",
+    "api.options.units.ms": "ms"
 }
\ No newline at end of file
diff --git a/locales/fa.json b/locales/fa.json
index 8b4982c..1f5c378 100644
--- a/locales/fa.json
+++ b/locales/fa.json
@@ -48,5 +48,16 @@
     "contact.subtitle": "راه های ارتباطی",
     "contact.ways.email": "ایمیل:",
     "contact.ways.phone": "تلفن:",
-    "fetch-data.error.server": "خطای سرور"
+    "fetch-data.error.server": "خطای سرور",
+    "api.options.resolution": "رزولوشن:",
+    "api.options.resolution.custom-btn": "دلخواه",
+    "api.options.width": "عرض:",
+    "api.options.height": "ارتفاع:",
+    "api.options.timeout": "حداکثر زمان بارگذاری صفحه:",
+    "api.options.max-age": "حداکثر زمان کش تصویر:",
+    "api.options.full-page": "تمام صفحه:",
+    "api.options.format": "فرمت:",
+    "api.options.units.px": "پیکسل",
+    "api.options.units.second": "ثانیه",
+    "api.options.units.ms": "میلی ثانیه"
 }
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 96fcfd6..df8fe1e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,11 +3,13 @@
 		<h1>{{ $t("index.banner.title") }}</h1>
 		<div>{{ $t("index.banner.subtitle") }}</div>
 		<v-row justify="center" class="mt-5">
-			<v-col md="8" sm="10" cols="11">
+			<v-col md="8" sm="10" cols="12">
 				<v-text-field variant="outlined" dir="ltr" v-model="inputData.url" class="px-0">
 					<template v-slot:append-inner>
-						<v-btn color="primary" height="100%" elevation="0" class="rounded-sm px-5 text-secondary"
-							prepend-icon="mdi-camera" @click="onSubmit">{{ $t("index.banner.capture") }}</v-btn>
+						<v-btn color="primary" height="100%" elevation="0"
+							class="rounded-sm px-sm-5 px-2 text-secondary" @click="onSubmit"><v-icon class="me-2"
+								icon="mdi-camera"></v-icon>{{
+							$t("index.banner.capture") }}</v-btn>
 					</template>
 				</v-text-field>
 			</v-col>
@@ -15,116 +17,111 @@
 	</div>
 	<v-container class="mb-15 mt-5">
 		<v-row>
-			<v-col cols="4">
+			<v-col md="4" cols="12">
 				<div class="text-cardTitleGray mb-1">{{ $t("index.api-card.browser-options.title") }}</div>
-				<div class="pa-5 cards">
-					<div>Resolution</div>
-					<v-select :items="resolutionOptios" variant="outlined" v-model="selectedResolution"
-						@update:modelValue="setResolution"></v-select>
-					<div class="mb-2">width:</div>
+				<div class="py-5 px-3 cards">
+					<div>{{ $t("api.options.resolution") }}</div>
 					<v-row>
-						<v-col cols="11" class="pa-0">
-							<v-slider :max="slidersRange.width.max" :min="slidersRange.height.min" :step="1"
-								class="align-center" elevation="5" color="primary" hide-details :thumb-size="18"
-								thumb-color="secondary" v-model="inputData.width">
-								<template v-slot:append>
-									<v-text-field v-model="inputData.width" class="options-input px-0"
-										variant="outlined"></v-text-field>
-								</template>
-							</v-slider>
+						<v-col cols="8" class="pe-0">
+							<v-locale-provider :rtl="false">
+								<v-select v-if="!customResolutionStatus" :items="resolutionOptios" variant="outlined"
+									v-model="selectedResolution" @update:modelValue="setResolution"></v-select>
+								<v-text-field variant="outlined" v-if="customResolutionStatus" :rules="[resolutionRule]"
+									placeholder="width-height:1200-600" v-model="customResolution"
+									@update:modelValue="setCustomResolution"></v-text-field>
+							</v-locale-provider>
 						</v-col>
-						<v-col cols="1" class="pa-0">
-							<span class="text-textGray">px</span>
-						</v-col>
-					</v-row>
-
-					<div class="mb-2 mt-6">height:</div>
-					<v-row>
-						<v-col cols="11" class="pa-0">
-							<v-slider :max="slidersRange.height.max" :min="slidersRange.height.min" :step="1"
-								class="align-center" elevation="5" color="primary" hide-details :thumb-size="18"
-								thumb-color="secondary" v-model="inputData.height">
-								<template v-slot:append>
-									<v-text-field v-model="inputData.height" class="options-input px-0"
-										variant="outlined"></v-text-field>
-								</template>
-							</v-slider>
-						</v-col>
-						<v-col cols="1" class="pa-0">
-							<span class="text-textGray">px</span>
-						</v-col>
-					</v-row>
-
-
-					<div class="mb-2 mt-6">timeout:</div>
-					<v-row>
-						<v-col cols="11" class="pa-0">
-							<v-slider :max="slidersRange.timeout.max" :min="slidersRange.timeout.min" :step="1"
-								class="align-center" elevation="5" color="primary" hide-details :thumb-size="18"
-								thumb-color="secondary" v-model="inputData.timeout">
-								<template v-slot:append>
-									<v-text-field v-model="inputData.timeout" class="options-input px-0"
-										variant="outlined"></v-text-field>
-								</template>
-							</v-slider>
-						</v-col>
-						<v-col cols="1" class="pa-0">
-							<span class="text-textGray">ms</span>
-						</v-col>
-					</v-row>
-
-					<div class="mb-2 mt-6">max age:</div>
-					<v-row>
-						<v-col cols="11" class="pa-0">
-							<v-slider :max="slidersRange.maxAge.max" :min="slidersRange.maxAge.min" :step="1"
-								class="align-center" elevation="5" color="primary" hide-details :thumb-size="18"
-								thumb-color="secondary" v-model="inputData.maxAge">
-								<template v-slot:append>
-									<v-text-field v-model="inputData.maxAge" class="options-input px-0"
-										variant="outlined"></v-text-field>
-								</template>
-							</v-slider>
-						</v-col>
-						<v-col cols="1" class="pa-0">
-							<span class="text-textGray">s</span>
+						<v-col cols="4">
+							<v-btn height="38px" color="primary" @click="toggleCustomResolution">{{
+								$t("api.options.resolution.custom-btn") }}</v-btn>
 						</v-col>
 					</v-row>
+					<div class="mb-2">{{ $t("api.options.width") }}</div>
+					<v-slider :max="slidersRange.width.max" :min="slidersRange.height.min" :step="1"
+						class="align-center" elevation="5" color="primary" hide-details :thumb-size="18"
+						thumb-color="secondary" v-model="inputData.width">
+						<template v-slot:append>
+							<v-text-field v-model="inputData.width" class="options-input px-0"
+								variant="outlined"></v-text-field>
+							<span class="text-textGray units ms-2">{{ $t("api.options.units.px") }}</span>
+						</template>
+					</v-slider>
+					<div class="mb-2 mt-6">{{ $t("api.options.height") }}</div>
+					<v-slider :max="slidersRange.height.max" :min="slidersRange.height.min" :step="1"
+						class="align-center" elevation="5" color="primary" hide-details :thumb-size="18"
+						thumb-color="secondary" v-model="inputData.height">
+						<template v-slot:append>
+							<v-text-field v-model="inputData.height" class="options-input px-0"
+								variant="outlined"></v-text-field>
+							<span class="text-textGray units ms-2">{{ $t("api.options.units.px") }}</span>
+						</template>
+					</v-slider>
+					<div class="mb-2 mt-6">{{ $t("api.options.timeout") }}</div>
+					<v-slider :max="slidersRange.timeout.max" :min="slidersRange.timeout.min" :step="1"
+						class="align-center" elevation="5" color="primary" hide-details :thumb-size="18"
+						thumb-color="secondary" v-model="inputData.timeout">
+						<template v-slot:append>
+							<v-text-field v-model="inputData.timeout" class="options-input px-0"
+								variant="outlined"></v-text-field>
+							<span class="text-textGray units ms-2">{{ $t("api.options.units.ms") }}</span>
+						</template>
+					</v-slider>
+					<div class="mb-2 mt-6">{{ $t("api.options.max-age") }}</div>
+					<v-slider :max="slidersRange.maxAge.max" :min="slidersRange.maxAge.min" :step="1"
+						class="align-center" elevation="5" color="primary" hide-details :thumb-size="18"
+						thumb-color="secondary" v-model="inputData.maxAge">
+						<template v-slot:append>
+							<v-text-field v-model="inputData.maxAge" class="options-input px-0"
+								variant="outlined"></v-text-field>
+							<span class="text-textGray units ms-2">{{ $t("api.options.units.second") }}</span>
+						</template>
+					</v-slider>
 					<v-row class="switch-btn">
-						<v-col cols="3" class="pe-0">
-							<div>full page:</div>
+						<v-col md="4" sm="2" cols="4" class="pe-0 fullPage-title">
+							<div>{{ $t("api.options.full-page") }}</div>
 						</v-col>
-						<v-col cols="9" class="ps-0"><v-switch color="primary"
+						<v-col md="8" sm="10" cols="8" class="ps-0"><v-switch color="primary"
 								v-model="inputData.fullpage"></v-switch></v-col>
 					</v-row>
-
-					<div class="mb-2 mt-4">format:</div>
+					<div class="mb-2 mt-4">{{ $t("api.options.format") }}</div>
 					<v-select :items="formatOptios" variant="outlined" v-model="inputData.format"></v-select>
-
 				</div>
 			</v-col>
-			<v-col cols="8">
+			<v-col md="8" cols="12">
 				<div class="text-cardTitleGray mb-1">{{ $t("index.api-card.screenshot-api.title") }}</div>
-				<div class="px-5 py-7 cards">
+				<div class="px-3 px-sm-5 py-3 py-sm-7 cards">
 					<div class="api-box pt-3">
 						<div class="api-box-header ">
-							<v-row>
-								<v-col cols="2" class="pe-0 py-2">
+							<v-row dir="ltr">
+								<v-col lg="2" sm="3" cols="5" class="pe-0 py-3">
 									<div v-for="i in 3" class="circle ms-3"></div>
 								</v-col>
-								<v-col cols="10" class="py-2">
-									<a v-if="captures.length > 0" class="text-decoration-none" href="url">{{ url }}</a>
+								<v-col v-if="captures.length > 0 && error === false && $vuetify.display.smAndUp" lg="10"
+									sm="9" cols="7" class="py-3 pe-8">
+									<div class="url">
+										<a :href="url">{{ url }}</a>
+									</div>
 								</v-col>
 							</v-row>
 						</div>
 
-						<div class="text-center px-5 pb-10">
+						<div class="text-center px-3 px-sm-5 pb-10">
 							<div class="api-title">{{ $t("index.intro.title") }}</div>
 							<div class="text-contentGray mb-10">{{ $t("index.intro.content") }}</div>
-							<Images :images="images" :error="error" :width="captures.length > 0 ? 600 : 150"
-								:height="captures.length > 0 ? 300 : 75" />
-							<v-btn v-if="captures.length > 0" prepend-icon="mdi-download" :to="url" color="primary"
-								class="mt-5">{{
-								$t("index.api-card.download-image.button") }}</v-btn>
+							<Images :images="images" :error="error"
+								:width="captures.length > 0 ? $vuetify.display.smAndUp ? 470 : 200 : 150"
+								:height="captures.length > 0 ? $vuetify.display.smAndUp ? 235 : 100 : 75" />
+							<div v-if="captures.length > 0 && error === false" class="mt-5">
+								<v-tooltip :text="url" location="top">
+									<template v-slot:activator="{ props }">
+										<v-btn v-bind="props" width="10px" color="blueText" class="me-1"><v-icon
+												icon="mdi-link-variant"></v-icon></v-btn>
+									</template>
+								</v-tooltip>
+								<v-btn prepend-icon="mdi-download" :href="url" color="primary" width="140px">{{
+									$t("index.api-card.download-image.button") }}</v-btn>
+							</div>
+
 						</div>
 					</div>
 				</div>
@@ -133,12 +130,12 @@
 		<div class="home-content text-center text-textGray">
 			<div class="title-of-content mt-15">{{ $t("index.how-to-use.title") }}</div>
 			<div>{{ $t("index.how-to-use.content") }}</div>
-			<div class="code-background pa-2 my-5" dir="ltr">
+			<div class="code-background px-4 py-2 my-5" dir="ltr">
 				&lt;img src="{{ getCaptureURL(inputData.url) }}"&gt;
 			</div>
 			<div class="title-of-content mt-15">{{ $t("index.options.title") }}</div>
 			<div>{{ $t("index.options.content") }}</div>
-			<div class="code-background pa-2 my-5" dir="ltr">{{ `<img
+			<div class="code-background px-4 py-2 my-5" dir="ltr">{{ `<img
 					src="${getCaptureURL(inputData.url, { width: '100', height: '600' })}">` }}
 			</div>
 			<div>{{ $t("index.options.code-explanation") }}</div>
@@ -192,15 +189,17 @@ export default defineComponent({
 			title: this.$t("pages.index"),
 			error: false,
 			captures: [] as IImage[],
+			customResolutionStatus: false,
+			customResolution: '',
 			resolutionOptios: [
-				{ title: '1024 X 768', value: { viewportWidth: '1024', viewportHeight: '768' } },
-				{ title: '1280 X 800', value: { viewportWidth: '1280', viewportHeight: '800' } },
-				{ title: '1680 X 1050', value: { viewportWidth: '1680', viewportHeight: '1050' } },
-				{ title: '1600 X 900', value: { viewportWidth: '1600', viewportHeight: '900' } },
-				{ title: '1440 X 900', value: { viewportWidth: '1440', viewportHeight: '900' } },
-				{ title: '1280 X 1024', value: { viewportWidth: '1280', viewportHeight: '1024' } },
-				{ title: '1366 X 768', value: { viewportWidth: '1366', viewportHeight: '768' } },
-				{ title: '1200 X 600', value: { viewportWidth: '1200', viewportHeight: '600' } }
+				{ title: '1024 × 768', value: { viewportWidth: '1024', viewportHeight: '768' } },
+				{ title: '1280 × 800', value: { viewportWidth: '1280', viewportHeight: '800' } },
+				{ title: '1680 × 1050', value: { viewportWidth: '1680', viewportHeight: '1050' } },
+				{ title: '1600 × 900', value: { viewportWidth: '1600', viewportHeight: '900' } },
+				{ title: '1440 × 900', value: { viewportWidth: '1440', viewportHeight: '900' } },
+				{ title: '1280 × 1024', value: { viewportWidth: '1280', viewportHeight: '1024' } },
+				{ title: '1366 × 768', value: { viewportWidth: '1366', viewportHeight: '768' } },
+				{ title: '1200 × 600', value: { viewportWidth: '1200', viewportHeight: '600' } }
 			],
 			selectedResolution: { viewportWidth: '1200', viewportHeight: '600' },
 			formatOptios: ["jpeg", "png"],
@@ -233,6 +232,27 @@ export default defineComponent({
 		setResolution() {
 			this.inputData.viewportWidth = this.selectedResolution.viewportWidth;
 			this.inputData.viewportHeight = this.selectedResolution.viewportHeight;
+		},
+		toggleCustomResolution() {
+			this.customResolutionStatus = !this.customResolutionStatus;
+			this.inputData.viewportWidth = "1200";
+			this.inputData.viewportHeight = "600";
+			this.selectedResolution = { viewportWidth: '1200', viewportHeight: '600' };
+			this.customResolution = '';
+
+		},
+		resolutionRule(value: string): string | boolean {
+			if (!value) {
+				return "required";
+			}
+			if (!/^\d+\-\d+$/.test(value)) {
+				return "invalid";
+			}
+			return true;
+		},
+		setCustomResolution(){
+			this.inputData.viewportWidth = this.customResolution.substring(0,this.customResolution.indexOf("-"));
+			this.inputData.viewportHeight = this.customResolution.substring(this.customResolution.indexOf("-")+1,this.customResolution.length);
 		}
 	},
 	computed: {
@@ -292,6 +312,17 @@ export default defineComponent({
 		}
 	}
 
+	.url {
+		a {
+			text-decoration: none;
+			color: rgb(var(--v-theme-blueText))
+		}
+
+		white-space: nowrap;
+		overflow-x: auto;
+		text-overflow: ellipsis;
+	}
+
 	.api-title {
 		margin-top: 20px;
 		margin-bottom: 10px;
@@ -299,10 +330,13 @@ export default defineComponent({
 		font-size: 18px;
 		font-weight: 800;
 	}
+
+	.v-btn--size-default {
+		min-width: 20px;
+	}
 }
 
 .home-content {
-
 	.title-of-content {
 		font-size: 16px;
 		font-weight: 800;
@@ -315,6 +349,9 @@ export default defineComponent({
 		color: rgb(var(--v-theme-codeText));
 		font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 		font-size: 14px;
+		white-space: nowrap;
+		overflow-x: auto;
+		text-overflow: ellipsis;
 	}
 }
 
@@ -348,8 +385,12 @@ export default defineComponent({
 	}
 }
 
+.units {
+	font-size: 11px;
+}
+
 .switch-btn {
-	.v-col {
+	.fullPage-title {
 		align-content: center;
 	}
 
diff --git a/plugins/vuetify.ts b/plugins/vuetify.ts
index 7c1b92d..89fa513 100644
--- a/plugins/vuetify.ts
+++ b/plugins/vuetify.ts
@@ -19,7 +19,8 @@ export default defineNuxtPlugin((app) => {
 						subtitleGray: "#6e7880",
 						contentGray: "#7c848b",
 						codeText: "7b8a8b",
-						background:"#fafafa"
+						background:"#fafafa",
+						blueText: "#0277BD"
 					},
 				},
 			},