diff --git a/ui/build/static/media/logo.34c0c94e.svg b/ui/build/static/media/logo.34c0c94e.svg
diff --git a/ui/build/static/media/logo.69120045.svg b/ui/build/static/media/logo.69120045.svg
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -10,7 +10,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "^3.4.1",
-    "rendition": "^14.3.1",
+    "rendition": "^18.3.0",
     "styled-components": "^5.0.1",
     "typescript": "^3.8.3",
     "whatwg-fetch": "^3.0.0"
@@ -39,6 +39,7 @@
   },
   "devDependencies": {
     "@balena/lint": "^5.0.2",
+    "@types/json-schema": "^7.0.5",
     "husky": "^4.2.3",
     "lint-staged": "^10.0.9"
   }

diff --git a/ui/src/components/NetworkInfoForm.tsx b/ui/src/components/NetworkInfoForm.tsx
@@ -1,11 +1,9 @@
-import { JSONSchema6 } from 'json-schema';
+import { JSONSchema7 as JSONSchema } from 'json-schema';
 import * as React from 'react';
-import { Flex, Heading } from 'rendition';
-import { Form } from 'rendition/dist/unstable';
+import { Flex, Form, Heading, RenditionUiSchema } from 'rendition';
 import { Network, NetworkInfo } from './App';
-import { RenditionUiSchema } from 'rendition/dist/unstable/unstable-typings';
 
-const getSchema = (availableNetworks: Network[]): JSONSchema6 => ({
+const getSchema = (availableNetworks: Network[]): JSONSchema => ({
 	type: 'object',
 	properties: {
 		ssid: {