diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0b1cbf1..3f87220 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,6 +14,7 @@
         "bootstrap": "^5.3.2",
         "bootswatch": "^5.3.2",
         "flag-icons": "^7.1.0",
+        "ip-address": "^9.0.5",
         "is-cidr": "^5.0.3",
         "is-ip": "^5.0.1",
         "pinia": "^2.1.7",
@@ -914,6 +915,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/ip-address": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz",
+      "integrity": "sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==",
+      "license": "MIT",
+      "dependencies": {
+        "jsbn": "1.1.0",
+        "sprintf-js": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/ip-regex": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-5.0.0.tgz",
@@ -962,6 +976,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/jsbn": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz",
+      "integrity": "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==",
+      "license": "MIT"
+    },
     "node_modules/magic-string": {
       "version": "0.30.5",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
@@ -1117,6 +1137,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sprintf-js": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
+      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/super-regex": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/super-regex/-/super-regex-0.2.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 5e89f46..74aab2b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,6 +14,7 @@
     "bootstrap": "^5.3.2",
     "bootswatch": "^5.3.2",
     "flag-icons": "^7.1.0",
+    "ip-address": "^9.0.5",
     "is-cidr": "^5.0.3",
     "is-ip": "^5.0.1",
     "pinia": "^2.1.7",
diff --git a/frontend/src/helpers/utils.js b/frontend/src/helpers/utils.js
index 6d3e11f..f09c763 100644
--- a/frontend/src/helpers/utils.js
+++ b/frontend/src/helpers/utils.js
@@ -1,3 +1,13 @@
-export function ipToLong(ip) {
-  return ip.split('.').reduce((acc, octet) => (acc << 8) + parseInt(octet, 10), 0);
+import { Address4, Address6 } from "ip-address"
+
+export function ipToBigInt(ip) {
+  // Check if it's an IPv4 address
+  if (ip.includes(".")) {
+    const addr = new Address4(ip)
+    return addr.bigInteger()
+  }
+
+  // Otherwise, assume it's an IPv6 address
+  const addr = new Address6(ip)
+  return addr.bigInteger()
 }
diff --git a/frontend/src/stores/peers.js b/frontend/src/stores/peers.js
index 9b843dd..62415f8 100644
--- a/frontend/src/stores/peers.js
+++ b/frontend/src/stores/peers.js
@@ -4,7 +4,7 @@ import {notify} from "@kyvg/vue3-notification";
 import {interfaceStore} from "./interfaces";
 import {freshPeer, freshStats} from '@/helpers/models';
 import { base64_url_encode } from '@/helpers/encoding';
-import { ipToLong } from '@/helpers/utils';
+import { ipToBigInt } from '@/helpers/utils';
 
 const baseUrl = `/peer`
 
@@ -47,8 +47,8 @@ export const peerStore = defineStore({
         let aValue = a[state.sortKey];
         let bValue = b[state.sortKey];
         if (state.sortKey === 'Addresses') {
-          aValue = aValue.length > 0 ? ipToLong(aValue[0]) : 0;
-          bValue = bValue.length > 0 ? ipToLong(bValue[0]) : 0;
+          aValue = aValue.length > 0 ? ipToBigInt(aValue[0]) : 0;
+          bValue = bValue.length > 0 ? ipToBigInt(bValue[0]) : 0;
         }
         if (state.sortKey === 'IsConnected') {
           aValue = state.statsEnabled && state.stats[a.Identifier]?.IsConnected ? 1 : 0;
diff --git a/frontend/src/stores/profile.js b/frontend/src/stores/profile.js
index 5f93146..40a30e1 100644
--- a/frontend/src/stores/profile.js
+++ b/frontend/src/stores/profile.js
@@ -4,7 +4,7 @@ import {notify} from "@kyvg/vue3-notification";
 import {authStore} from "@/stores/auth";
 import { base64_url_encode } from '@/helpers/encoding';
 import {freshStats} from "@/helpers/models";
-import { ipToLong } from '@/helpers/utils';
+import { ipToBigInt } from '@/helpers/utils';
 
 const baseUrl = `/user`
 
@@ -43,8 +43,8 @@ export const profileStore = defineStore({
         let aValue = a[state.sortKey];
         let bValue = b[state.sortKey];
         if (state.sortKey === 'Addresses') {
-          aValue = aValue.length > 0 ? ipToLong(aValue[0]) : 0;
-          bValue = bValue.length > 0 ? ipToLong(bValue[0]) : 0;
+          aValue = aValue.length > 0 ? ipToBigInt(aValue[0]) : 0;
+          bValue = bValue.length > 0 ? ipToBigInt(bValue[0]) : 0;
         }
         if (state.sortKey === 'IsConnected') {
           aValue = state.statsEnabled && state.stats[a.Identifier]?.IsConnected ? 1 : 0;