diff --git a/src/App.tsx b/src/App.tsx
index efe4bbc7..937fc647 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -19,6 +19,7 @@ import {
   setMyNodeInfo,
   setPreferences,
   setReady,
+  setUser,
 } from '@core/slices/meshtasticSlice';
 import { Protobuf, SettingsManager, Types } from '@meshtastic/meshtasticjs';
 import { About } from '@pages/About';
@@ -70,6 +71,10 @@ const App = (): JSX.Element => {
       dispatch(setMyNodeInfo(nodeInfo));
     });
 
+    connection.onUserDataPacket.subscribe((user) => {
+      dispatch(setUser(user));
+    });
+
     connection.onNodeInfoPacket.subscribe((nodeInfoPacket) =>
       dispatch(addNode(nodeInfoPacket.data)),
     );
@@ -117,6 +122,7 @@ const App = (): JSX.Element => {
     return (): void => {
       connection.onDeviceStatus.cancelAll();
       connection.onMyNodeInfo.cancelAll();
+      connection.onUserDataPacket.cancelAll();
       connection.onNodeInfoPacket.cancelAll();
       connection.onAdminPacket.cancelAll();
       connection.onMeshHeartbeat.cancelAll();
diff --git a/src/components/chat/MessageBar.tsx b/src/components/chat/MessageBar.tsx
index 307db01a..f0746447 100644
--- a/src/components/chat/MessageBar.tsx
+++ b/src/components/chat/MessageBar.tsx
@@ -24,7 +24,7 @@ export const MessageBar = (): JSX.Element => {
   const { t } = useTranslation();
   return (
     <div className="flex w-full p-4 mx-auto space-x-2 text-gray-500 bg-gray-50 dark:bg-transparent dark:text-gray-400">
-      <div className="flex w-full max-w-4xl">
+      <div className="flex w-full max-w-4xl mx-auto">
         <div className="flex">
           <Button icon={<EmojiHappyIcon className="w-5 h-5" />} circle />
           <Button icon={<PaperClipIcon className="w-5 h-5" />} circle />
diff --git a/src/components/templates/PrimaryTemplate.tsx b/src/components/templates/PrimaryTemplate.tsx
index 1179a11e..14994474 100644
--- a/src/components/templates/PrimaryTemplate.tsx
+++ b/src/components/templates/PrimaryTemplate.tsx
@@ -32,8 +32,9 @@ export const PrimaryTemplate = ({
           </div>
         </div>
       </div>
-      <div className="flex-auto flex-grow p-6 md:p-10">{children}</div>
-
+      <div className="flex-auto flex-grow p-6 bg-white md:p-10 dark:bg-secondaryDark">
+        {children}
+      </div>
       {footer && (
         <div className="flex p-6 bg-white border-t md:flex-row flex-0 md:items-center md:justify-between md:py-8 md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
           {button && <div className="pr-2 m-auto md:hidden">{button}</div>}
diff --git a/src/core/slices/meshtasticSlice.ts b/src/core/slices/meshtasticSlice.ts
index fcb103f6..ea650fdf 100644
--- a/src/core/slices/meshtasticSlice.ts
+++ b/src/core/slices/meshtasticSlice.ts
@@ -16,6 +16,7 @@ interface AppState {
   lastMeshInterraction: number;
   ready: boolean;
   myNodeInfo: Protobuf.MyNodeInfo;
+  user: Protobuf.User;
   positionPackets: Types.PositionPacket[];
   nodes: Protobuf.NodeInfo[];
   channels: Protobuf.Channel[];
@@ -30,6 +31,7 @@ const initialState: AppState = {
   lastMeshInterraction: 0,
   ready: false,
   myNodeInfo: Protobuf.MyNodeInfo.create(),
+  user: Protobuf.User.create(),
   positionPackets: [],
   nodes: [],
   channels: [],
@@ -55,6 +57,9 @@ export const meshtasticSlice = createSlice({
     },
     setMyNodeInfo: (state, action: PayloadAction<Protobuf.MyNodeInfo>) => {
       state.myNodeInfo = action.payload;
+    }, 
+    setUser: (state, action: PayloadAction<Protobuf.User>) => {
+      state.user = action.payload;
     },
     addPositionPacket: (state, action: PayloadAction<Types.PositionPacket>) => {
       state.positionPackets.push(action.payload);
@@ -124,6 +129,7 @@ export const {
   setLastMeshInterraction,
   setReady,
   setMyNodeInfo,
+  setUser,
   addPositionPacket,
   addNode,
   addChannel,
diff --git a/src/pages/Nodes/Index.tsx b/src/pages/Nodes/Index.tsx
index 6dbea95d..21fecac1 100644
--- a/src/pages/Nodes/Index.tsx
+++ b/src/pages/Nodes/Index.tsx
@@ -9,6 +9,7 @@ import { Drawer } from '@components/generic/Drawer';
 import { SidebarItem } from '@components/generic/SidebarItem';
 import { Tab } from '@headlessui/react';
 import { XCircleIcon } from '@heroicons/react/outline';
+import { Protobuf } from '@meshtastic/meshtasticjs';
 
 import { Node } from './Node';
 
@@ -55,7 +56,11 @@ export const Nodes = (): JSX.Element => {
                 {({ selected }): JSX.Element => (
                   <SidebarItem
                     title={node.user?.longName ?? node.num.toString()}
-                    description="Node info"
+                    description={
+                      node.user?.hwModel
+                        ? Protobuf.HardwareModel[node.user.hwModel]
+                        : 'Unknown Hardware'
+                    }
                     selected={selected}
                     icon={
                       <Avatar
diff --git a/src/pages/settings/Device.tsx b/src/pages/settings/Device.tsx
index d7f261a5..1f908622 100644
--- a/src/pages/settings/Device.tsx
+++ b/src/pages/settings/Device.tsx
@@ -18,15 +18,14 @@ export interface DeviceProps {
 
 export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
   const { t } = useTranslation();
-  const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
+  const user = useAppSelector((state) => state.meshtastic.user);
 
-  const { register, handleSubmit, formState } =
-    useForm<Protobuf.RadioConfig_UserPreferences>({
-      defaultValues: radioConfig,
-    });
+  const { register, handleSubmit, formState } = useForm<Protobuf.User>({
+    defaultValues: user,
+  });
 
   const onSubmit = handleSubmit((data) => {
-    void connection.setPreferences(data);
+    void connection.setOwner(data);
   });
 
   return (
@@ -54,14 +53,9 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
         </Button>
       }
     >
-      <div className="w-full max-w-3xl space-y-2 md:max-w-xl">
-        <form onSubmit={onSubmit}>
-          <Input label={t('strings.wifi_ssid')} {...register('wifiSsid')} />
-          <Input
-            type="password"
-            label={t('strings.wifi_psk')}
-            {...register('wifiPassword')}
-          />
+      <div className="w-full max-w-3xl md:max-w-xl">
+        <form className="space-y-2" onSubmit={onSubmit}>
+          <Input label={'Device Name'} {...register('longName')} />
         </form>
       </div>
     </PrimaryTemplate>
diff --git a/src/pages/settings/Radio.tsx b/src/pages/settings/Radio.tsx
index a0e2e961..78354441 100644
--- a/src/pages/settings/Radio.tsx
+++ b/src/pages/settings/Radio.tsx
@@ -1,11 +1,15 @@
 import React from 'react';
 
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
+import { connection } from '@app/core/connection';
+import { useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
 import { Input } from '@components/generic/Input';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { MenuIcon, SaveIcon } from '@heroicons/react/outline';
+import type { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface RadioProps {
   navOpen: boolean;
@@ -14,7 +18,16 @@ export interface RadioProps {
 
 export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
   const { t } = useTranslation();
+  const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
 
+  const { register, handleSubmit, formState } =
+    useForm<Protobuf.RadioConfig_UserPreferences>({
+      defaultValues: radioConfig,
+    });
+
+  const onSubmit = handleSubmit((data) => {
+    void connection.setPreferences(data);
+  });
   return (
     <PrimaryTemplate
       title="Radio"
@@ -32,6 +45,7 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
         <Button
           className="px-10 ml-auto"
           icon={<SaveIcon className="w-5 h-5" />}
+          disabled={!formState.isDirty}
           active
           border
         >
@@ -39,8 +53,15 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
         </Button>
       }
     >
-      <div className="w-full max-w-3xl space-y-2 md:max-w-xl">
-        <Input label="test" />
+      <div className="w-full max-w-3xl md:max-w-xl">
+        <form className="space-y-2" onSubmit={onSubmit}>
+          <Input label={t('strings.wifi_ssid')} {...register('wifiSsid')} />
+          <Input
+            type="password"
+            label={t('strings.wifi_psk')}
+            {...register('wifiPassword')}
+          />
+        </form>
       </div>
     </PrimaryTemplate>
   );
diff --git a/yarn.lock b/yarn.lock
index 19093d79..51d03153 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -267,11 +267,11 @@
   integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==
 
 "@meshtastic/meshtasticjs@^0.6.16":
-  version "0.6.16"
-  resolved "https://registry.yarnpkg.com/@meshtastic/meshtasticjs/-/meshtasticjs-0.6.16.tgz#aa2fe3808af90b4c4aa43d2e2223dbf420977c65"
-  integrity sha512-nozIJJYdxouDBCWTJtF3oKPqkuJbL8lA9xTuzpSCVz4MRzlNPiSxc0O4C4lwwBrDEi9uymn+DJbub/lWv8m+wA==
+  version "0.6.17"
+  resolved "https://registry.yarnpkg.com/@meshtastic/meshtasticjs/-/meshtasticjs-0.6.17.tgz#e53dc051a9f8fa94162658dc53c8c4fad80fa627"
+  integrity sha512-//1Opyv8IM9FiONGJ52w2TLvv6Gs3d0zaInqw73SzFZl9eRv8ZqiVhZA91wqleVilwPmsudyT+XAljKrrTn9VQ==
   dependencies:
-    "@protobuf-ts/runtime" "^1.0.13"
+    "@protobuf-ts/runtime" "^2.0.1"
     sub-events "^1.8.9"
 
 "@nodelib/fs.scandir@2.1.5":
@@ -417,10 +417,10 @@
     node-gyp "^7.1.0"
     read-package-json-fast "^2.0.1"
 
-"@protobuf-ts/runtime@^1.0.13":
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/@protobuf-ts/runtime/-/runtime-1.0.13.tgz#42d6d84ea6f0ded68d6642ab64ca49f7c17f6e71"
-  integrity sha512-uvYYBUtG4eCYMxo+mzxN8SHvpL/l7PbHEmOpXEnDCwBj/wJ+Ezj8+TlEFjjRWpnFidka+SMdDOXPWSyJv2iNAw==
+"@protobuf-ts/runtime@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@protobuf-ts/runtime/-/runtime-2.0.1.tgz#850ed3b66873a9d503be2f835ee43e8937939fe0"
+  integrity sha512-iYsRGdr35Bta2ZxgyLyL7YWVnzn/gYZ4cv+CxIZnfz27XJ9hxOsx8e/4kQjcAopyw/lGzI9uGJXocXIUVhDK5Q==
 
 "@reduxjs/toolkit@^1.6.0":
   version "1.6.1"