diff --git a/app/src/components/Sidebar/History.tsx b/app/src/components/Sidebar/History.tsx
index 60582e2..42badd9 100644
--- a/app/src/components/Sidebar/History.tsx
+++ b/app/src/components/Sidebar/History.tsx
@@ -5,7 +5,7 @@ import { Theme, withStyles } from '@material-ui/core/styles'
 
 interface HistoryItem {
   title: JSX.Element | string
-  value: string | any
+  value: string
   selected?: boolean
 }
 
diff --git a/app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx b/app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx
index 17930c9..5a59ea3 100644
--- a/app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx
+++ b/app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx
@@ -53,7 +53,7 @@ class MessageHistory extends React.Component<Props, State> {
     const history = node.messageHistory.toArray()
     const historyElements = history.reverse().map(message => ({
       title: <DateFormatter date={message.received} />,
-      value: message.value,
+      value: message.value ? Base64Message.toUnicodeString(message.value) : '',
       selected: message && message === this.props.selected,
     }))
 
diff --git a/app/src/components/Tree/TreeNodeTitle.tsx b/app/src/components/Tree/TreeNodeTitle.tsx
index 223ba17..a0e97d4 100644
--- a/app/src/components/Tree/TreeNodeTitle.tsx
+++ b/app/src/components/Tree/TreeNodeTitle.tsx
@@ -37,7 +37,7 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
 
   private renderValue() {
     return this.props.treeNode.message && this.props.treeNode.message.value && this.props.treeNode.message.length > 0
-      ? <span className={this.props.classes.value}> = {Base64Message.toUnicodeString(this.props.treeNode.message.value).toString().slice(0, 120)}</span>
+      ? <span className={this.props.classes.value}> = {Base64Message.toUnicodeString(this.props.treeNode.message.value).slice(0, 120)}</span>
       : null
   }
 
diff --git a/backend/src/index.ts b/backend/src/index.ts
index 46ac21b..26d03b5 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -1,3 +1,6 @@
+import { Base64Message } from './Model/Base64Message'
+import { DataSource, MqttSource } from './DataSource'
+import { UpdateInfo } from 'builder-util-runtime'
 import {
   AddMqttConnection,
   EventDispatcher,
@@ -12,8 +15,6 @@ import {
   updateAvailable,
 } from '../../events'
 
-import { DataSource, MqttSource } from './DataSource'
-import { UpdateInfo } from 'builder-util-runtime'
 
 export class ConnectionManager {
   private connections: {[s: string]: DataSource<any>} = {}
@@ -57,7 +58,7 @@ export class ConnectionManager {
         buffer = buffer.slice(0, 10000)
       }
 
-      backendEvents.emit(messageEvent, { topic, payload: buffer.toString(), qos: packet.qos, retain: packet.retain })
+      backendEvents.emit(messageEvent, { topic, payload: Base64Message.fromBuffer(buffer), qos: packet.qos, retain: packet.retain })
     })
   }