diff --git a/resources/js/index.js b/resources/js/index.js
index d288dac..12e4f64 100644
--- a/resources/js/index.js
+++ b/resources/js/index.js
@@ -164,9 +164,12 @@ async function setBackgroundImage() {
  */
 async function handleFavoriteInput() {
   const ip = document.querySelector('#ip').value
+  const port = document.querySelector('#port').value
   const ipArr = await getFavIps()
 
-  if (!ip || !ipArr.includes(ip)) {
+  const addr = `${ip}:${port}`
+
+  if (!ip || !ipArr.includes(addr)) {
     document.querySelector('#star').src = 'icons/star_empty.svg'
   } else {
     document.querySelector('#star').src = 'icons/star_filled.svg'
@@ -180,13 +183,18 @@ async function handleFavoriteInput() {
  */
 async function setIp(ip) {
   const ipInput = document.querySelector('#ip')
+  const portInput = document.querySelector('#port')
+
+  const parseIp = ip.split(':')[0]
+  const parsePort = ip.split(':')[1]
 
   // Set star
   if (ip) {
     document.querySelector('#star').src = 'icons/star_filled.svg'
   }
 
-  ipInput.value = ip
+  ipInput.value = parseIp
+  portInput.value = parsePort
 }
 
 /**
diff --git a/resources/js/options.js b/resources/js/options.js
index 65eb8a1..43c227b 100644
--- a/resources/js/options.js
+++ b/resources/js/options.js
@@ -77,8 +77,11 @@ async function handleLanguageChange(elm) {
  */
  async function setFavorite() {
   const ip = document.querySelector('#ip').value
+  const port = document.querySelector('#port').value
   const ipArr = await getFavIps()
 
+  const addr = `${ip}:${port}`
+
   // Set star icon
   const star = document.querySelector('#star')
 
@@ -86,13 +89,13 @@ async function handleLanguageChange(elm) {
     star.src = 'icons/star_empty.svg'
 
     // remove from list
-    ipArr.splice(ipArr.indexOf(ip), 1)
+    ipArr.splice(ipArr.indexOf(addr), 1)
   } else {
     star.src = 'icons/star_filled.svg'
 
     // add to list
-    if (ip && !ipArr.includes(ip)) {
-      ipArr.push(ip)
+    if (ip && !ipArr.includes(addr)) {
+      ipArr.push(addr)
     }
   }