diff --git a/dashboard/public/js/index.js b/dashboard/public/js/index.js
index 3642525dd..cce21f916 100644
--- a/dashboard/public/js/index.js
+++ b/dashboard/public/js/index.js
@@ -74,8 +74,8 @@ app.config(['$routeProvider', function ($routeProvider) {
         controller: 'BrandingController',
         templateUrl: 'views/branding.html?' + window.VITE_CACHE_ID
     }).when('/network', {
-        controller: 'NetworkController',
-        templateUrl: 'views/network.html?' + window.VITE_CACHE_ID
+        // controller: 'NetworkController',
+        // templateUrl: 'views/network.html?' + window.VITE_CACHE_ID
     }).when('/domains', {
         controller: 'DomainsController',
         templateUrl: 'views/domains.html?' + window.VITE_CACHE_ID
diff --git a/dashboard/src/Index.vue b/dashboard/src/Index.vue
index a8c0e1891..6e8fd9368 100644
--- a/dashboard/src/Index.vue
+++ b/dashboard/src/Index.vue
@@ -4,6 +4,7 @@ import { Notification } from 'pankow';
 
 import AppsView from './views/AppsView.vue';
 import AppstoreView from './views/AppstoreView.vue';
+import NetworkView from './views/NetworkView.vue';
 import ProfileView from './views/ProfileView.vue';
 import ServicesView from './views/ServicesView.vue';
 import SupportView from './views/SupportView.vue';
@@ -17,6 +18,7 @@ const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_OR
 const VIEWS = {
   APPS: 'apps',
   APPSTORE: 'appstore',
+  NETWORK: 'network',
   PROFILE: 'profile',
   SUPPORT: 'support',
   SERVICES: 'services',
@@ -29,6 +31,7 @@ export default {
   components: {
     AppsView,
     AppstoreView,
+    NetworkView,
     Notification,
     ProfileView,
     SupportView,
@@ -63,6 +66,8 @@ export default {
         that.view = VIEWS.APPS;
       } else if (view.indexOf(VIEWS.APPSTORE) === 0) {
         that.view = VIEWS.APPSTORE;
+      } else if (view === VIEWS.NETWORK) {
+        that.view = VIEWS.NETWORK;
       } else if (view === VIEWS.PROFILE) {
         that.view = VIEWS.PROFILE;
       } else if (view === VIEWS.SERVICES) {
@@ -92,14 +97,13 @@ export default {
   <div>
     <Notification />
 
-    <TransitionGroup name="grid-animation">
-      <AppsView v-if="view === VIEWS.APPS" />
-      <AppstoreView v-else-if="view === VIEWS.APPSTORE" />
-      <ProfileView v-else-if="view === VIEWS.PROFILE" />
-      <ServicesView v-else-if="view === VIEWS.SERVICES" />
-      <SupportView v-else-if="view === VIEWS.SUPPORT" />
-      <UserDirectoryView v-else-if="view === VIEWS.USER_DIRECTORY" />
-      <VolumesView v-else-if="view === VIEWS.VOLUMES" />
-    </TransitionGroup>
+    <AppsView v-if="view === VIEWS.APPS" />
+    <AppstoreView v-else-if="view === VIEWS.APPSTORE" />
+    <NetworkView v-else-if="view === VIEWS.NETWORK" />
+    <ProfileView v-else-if="view === VIEWS.PROFILE" />
+    <ServicesView v-else-if="view === VIEWS.SERVICES" />
+    <SupportView v-else-if="view === VIEWS.SUPPORT" />
+    <UserDirectoryView v-else-if="view === VIEWS.USER_DIRECTORY" />
+    <VolumesView v-else-if="view === VIEWS.VOLUMES" />
   </div>
 </template>
diff --git a/dashboard/src/models/NetworkModel.js b/dashboard/src/models/NetworkModel.js
new file mode 100644
index 000000000..be29aa4d6
--- /dev/null
+++ b/dashboard/src/models/NetworkModel.js
@@ -0,0 +1,121 @@
+
+import { fetcher } from 'pankow';
+
+function create(origin, accessToken) {
+  return {
+    async getIpv4Config() {
+      let error, result;
+      try {
+        result = await fetcher.get(`${origin}/api/v1/network/ipv4_config`, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body];
+    },
+    async getIpv4() {
+      let error, result;
+      try {
+        result = await fetcher.get(`${origin}/api/v1/network/ipv4`, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body.ip];
+    },
+    async getIpv6Config() {
+      let error, result;
+      try {
+        result = await fetcher.get(`${origin}/api/v1/network/ipv6_config`, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body];
+    },
+    async getIpv6() {
+      let error, result;
+      try {
+        result = await fetcher.get(`${origin}/api/v1/network/ipv6`, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body.ip];
+    },
+    async getDynDnsConfig() {
+      let error, result;
+      try {
+        result = await fetcher.get(`${origin}/api/v1/network/dynamic_dns`, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body];
+    },
+    async setDynDnsConfig(enabled) {
+      let error, result;
+      try {
+        result = await fetcher.post(`${origin}/api/v1/network/dynamic_dns`, { enabled }, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null];
+    },
+    async getBlocklist() {
+      let error, result;
+      try {
+        result = await fetcher.get(`${origin}/api/v1/network/blocklist`, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body.blocklist];
+    },
+    async setBlocklist(blocklist) {
+      let error, result;
+      try {
+        result = await fetcher.post(`${origin}/api/v1/network/blocklist`, { blocklist }, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null];
+    },
+    async getTrustedIps() {
+      let error, result;
+      try {
+        result = await fetcher.get(`${origin}/api/v1/reverseproxy/trusted_ips`, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body.trustedIps];
+    },
+    async setTrustedIps(trustedIps) {
+      let error, result;
+      try {
+        result = await fetcher.post(`${origin}/api/v1/reverseproxy/trusted_ips`, { trustedIps }, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null];
+    },
+  };
+}
+
+export default {
+  create,
+};
diff --git a/dashboard/src/views/NetworkView.vue b/dashboard/src/views/NetworkView.vue
new file mode 100644
index 000000000..c38e56d9e
--- /dev/null
+++ b/dashboard/src/views/NetworkView.vue
@@ -0,0 +1,213 @@
+<script setup>
+
+const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
+
+import { ref, onMounted } from 'vue';
+import { Button } from 'pankow';
+import Section from  '../components/Section.vue';
+import NetworkModel from  '../models/NetworkModel.js';
+
+const networkModel = NetworkModel.create(API_ORIGIN, localStorage.token);
+
+// keep in sync with sysinfo.js
+const ipv4Providers = [
+    { name: 'Disabled', value: 'noop' },
+    { name: 'Public IP', value: 'generic' },
+    { name: 'Static IP Address', value: 'fixed' },
+    { name: 'Network Interface', value: 'network-interface' }
+];
+
+const ipv6Providers = [
+    { name: 'Disabled', value: 'noop' },
+    { name: 'Public IP', value: 'generic' },
+    { name: 'Static IP Address', value: 'fixed' },
+    { name: 'Network Interface', value: 'network-interface' }
+];
+
+function prettyIpProviderName(provider) {
+  switch (provider) {
+    case 'noop': return 'Disabled';
+    case 'generic': return 'Public IP';
+    case 'fixed': return 'Static IP Address';
+    case 'network-interface': return 'Network Interface';
+    default: return 'Unknown';
+  }
+}
+
+// IPv4
+const ipv4Provider = ref('');
+const ipv4Address = ref('');
+const ipv4DetectedAddress = ref('');
+const ipv4InterfaceName = ref('');
+
+async function refreshIpv4() {
+  let [error, result] = await networkModel.getIpv4Config();
+  if (error) return console.error(error);
+
+  ipv4Provider.value = result.provider;
+  ipv4Address.value = result.ip;
+  ipv4InterfaceName.value = result.ifname;
+
+  [error, result] = await networkModel.getIpv4();
+  if (error) return console.error(error);
+
+  ipv4DetectedAddress.value = result;
+}
+
+function onIpv4Configure() {
+
+}
+
+// IPv6
+const ipv6Provider = ref('');
+const ipv6Address = ref('');
+const ipv6DetectedAddress = ref('');
+const ipv6InterfaceName = ref('');
+
+async function refreshIpv6() {
+  let [error, result] = await networkModel.getIpv6Config();
+  if (error) return console.error(error);
+
+  ipv6Provider.value = result.provider;
+  ipv6Address.value = result.ip;
+  ipv6InterfaceName.value = result.ifname;
+
+  [error, result] = await networkModel.getIpv6();
+  if (error) return console.error(error);
+
+  ipv6DetectedAddress.value = result;
+}
+
+function onIpv6Configure() {
+
+}
+
+// Firewall
+
+const blocklistLength = ref(0);
+const blocklist = ref('');
+
+function onBlocklistEdit() {
+
+}
+
+async function refreshBlocklist() {
+  const [error, result] = await networkModel.getBlocklist();
+  if (error) return console.error(error);
+
+  blocklist.value = result;
+  blocklistLength.value = result.split('\n').filter(function (l) { return l.length !== 0 && l[0] !== '#'; }).length;
+}
+
+const trustedIpsLength = ref(0);
+const trustedIps = ref('');
+
+function onTrustedIpsEdit() {
+}
+
+async function refreshTrustedIps() {
+  const [error, result] = await networkModel.getTrustedIps();
+  if (error) return console.error(error);
+
+  trustedIps.value = result;
+  trustedIpsLength.value = result.split('\n').filter(function (l) { return l.length !== 0 && l[0] !== '#'; }).length;
+}
+
+// dyndns
+const dynDnsBusy = ref(false);
+const dynDnsIsEnabled = ref(false);
+
+async function refreshDynDns() {
+  const [error, result] = await networkModel.getDynDnsConfig();
+  if (error) return console.error(error);
+
+  dynDnsIsEnabled.value = result.enabled;
+}
+
+async function onDyndnsToggle() {
+  dynDnsBusy.value = true;
+
+  const [error] = await networkModel.setDynDnsConfig(!dynDnsIsEnabled.value);
+  if (error) return console.error(error);
+
+  await refreshDynDns();
+  dynDnsBusy.value = false;
+}
+
+onMounted(async () => {
+  await refreshIpv4();
+  await refreshIpv6();
+  await refreshDynDns();
+  await refreshBlocklist();
+  await refreshTrustedIps();
+});
+
+</script>
+
+<template>
+  <div class="content">
+    <h1>{{ $t('network.title') }}</h1>
+
+    <Section :title="$t('network.ip.title')">
+      <p>{{ $t('network.ip.description') }}</p>
+
+      <div class="info-row">
+        <div class="info-label">{{ $t('network.ip.provider') }}</div>
+        <div class="info-value">{{ prettyIpProviderName(ipv4Provider) }}</div>
+      </div>
+      <div class="info-row">
+        <div class="info-label">{{ $t('network.ip.address') }}</div>
+        <div class="info-value">{{ ipv4Address || `${ipv4DetectedAddress} (${$t('network.ip.detected')})` }}</div>
+      </div>
+      <div class="info-row" v-show="ipv4InterfaceName">
+        <div class="info-label">{{ $t('network.ip.interface') }}</div>
+        <div class="info-value">{{ ipv4InterfaceName }}</div>
+      </div>
+
+      <Button @click="onIpv4Configure()">{{ $t('network.ip.configure') }}</Button>
+    </Section>
+
+    <Section :title="$t('network.ipv6.title')">
+      <p>{{ $t('network.ipv6.description') }}</p>
+
+      <div class="info-row">
+        <div class="info-label">{{ $t('network.ip.provider') }}</div>
+        <div class="info-value">{{ prettyIpProviderName(ipv6Provider) }}</div>
+      </div>
+      <div class="info-row" v-show="ipv6Provider !== 'noop'">
+        <div class="info-label">{{ $t('network.ip.address') }}</div>
+        <div class="info-value">{{ ipv6Address || `${ipv6DetectedAddress} (${$t('network.ip.detected')})` }}</div>
+        <!-- TODO <span ng-show="ipv6Configure.displayError" class="text-danger">{{ ipv6Configure.displayError }}</span> -->
+      </div>
+      <div class="info-row" v-show="ipv6InterfaceName">
+        <div class="info-label">{{ $t('network.ip.interface') }}</div>
+        <div class="info-value">{{ ipv6InterfaceName }}</div>
+      </div>
+
+      <Button @click="onIpv6Configure()">{{ $t('network.ip.configure') }}</Button>
+    </Section>
+
+    <Section :title="$t('network.firewall.title')">
+      <div class="info-row">
+        <div class="info-label">{{ $t('network.firewall.blockedIpRanges') }}</div>
+        <div class="info-value">{{ $t('network.firewall.blocklist', { blockCount: blocklistLength }) }} <span @click="onBlocklistEdit()"><i class="fa-solid fa-edit text-small"></i></span></div>
+      </div>
+      <div class="info-row">
+        <div class="info-label">{{ $t('network.trustedIpRanges') }}</div>
+        <div class="info-value">{{ $t('network.trustedIps.summary', { trustCount: trustedIpsLength }) }} <span @click="onTrustedIpsEdit()"><i class="fa-solid fa-edit text-small"></i></span></div>
+      </div>
+    </Section>
+
+    <Section :title="$t('network.dyndns.title')">
+      <p>{{ $t('network.dyndns.description') }}</p>
+      <!-- TODO<p class="text-danger" ng-show="dyndnsConfigure.error"><br/>{{ dyndnsConfigure.error }}</p> -->
+
+      <p>
+        <i class="fa-solid fa-circle" :class="{ 'status-active': dynDnsIsEnabled, 'status-inactive': !dynDnsIsEnabled }"></i> {{ $t(dynDnsIsEnabled ? 'main.statusEnabled' : 'main.statusDisabled') }}
+      </p>
+
+      <!-- TODO use toggle component -->
+      <Button :danger="dynDnsIsEnabled ? true : undefined" @click="onDyndnsToggle()" :disabled="dynDnsBusy" :loading="dynDnsBusy">{{ $t(dynDnsIsEnabled ? 'main.disableAction' : 'main.enableAction') }}</Button>
+    </Section>
+  </div>
+</template>