diff --git a/src/components/MessageForm.js b/src/components/MessageForm.js
deleted file mode 100644
index 18ed5b47..00000000
--- a/src/components/MessageForm.js
+++ /dev/null
@@ -1,269 +0,0 @@
-import React from 'react'
-import { postMessage } from '../api/Message'
-import PropTypes from 'prop-types'
-import {
-  Button,
-  Form,
-  Image,
-  Label,
-  Loader,
-  Message as Error,
-} from 'semantic-ui-react'
-import { postUpload } from '../api/Upload'
-import EditMapModal from './EditMapModal'
-
-const initialState = {
-  message: '',
-  counter: 0,
-  counterColor: 'green',
-  geoInformation: {},
-  attachments: [],
-  attachmentPreviews: 0,
-  showEditMapModal: false,
-  formError: false,
-  formErrorMessage: '',
-}
-
-const MESSAGE_LIMIT = 280
-
-export default class MessageForm extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this.fileInputRef = React.createRef()
-
-    this.state = initialState
-  }
-
-  handleInput(event, input) {
-    let color
-    let errorMessage = ''
-    let error = false
-
-    //TODO: Calculate length for Twitter (cutting links to 20 characters)
-    if (input.value.length > MESSAGE_LIMIT) {
-      color = 'red'
-      errorMessage = `The message is too long. You must remove ${
-        input.value.length - MESSAGE_LIMIT
-      } characters.`
-      error = true
-    } else if (input.value.length >= 260) {
-      color = 'orange'
-    } else if (input.value.length >= 220) {
-      color = 'yellow'
-    } else {
-      color = 'green'
-    }
-
-    this.setState({
-      message: input.value,
-      counter: input.value.length,
-      counterColor: color,
-      formError: error,
-      formErrorMessage: errorMessage,
-    })
-  }
-
-  submitMessage() {
-    let message = this.state.message,
-      id = this.props.ticker.id,
-      geoInformation = this.state.geoInformation,
-      attachments = []
-    const { length } = message
-    if (length === 0 || length > MESSAGE_LIMIT) {
-      return
-    }
-
-    if (this.state.attachments.length > 0) {
-      attachments = this.state.attachments.map(attachment => attachment.id)
-    }
-
-    postMessage(id, message, geoInformation, attachments).then(response => {
-      if (response.data !== undefined && response.data.message !== undefined) {
-        this.setState(initialState)
-        this.props.callback()
-      }
-    })
-  }
-
-  uploadAttachment(e) {
-    e.preventDefault()
-
-    const formData = new FormData()
-    for (let i = 0; i < e.target.files.length; i++) {
-      formData.append('files', e.target.files[i])
-    }
-    this.setState({ attachmentPreviews: e.target.files.length })
-    formData.append('ticker', this.props.ticker.id)
-
-    postUpload(formData).then(response => {
-      const attachments = this.state.attachments
-      this.setState({
-        attachments: attachments.concat(response.data.uploads),
-        attachmentPreviews: 0,
-      })
-    })
-  }
-
-  renderAttachmentPreviews() {
-    if (this.state.attachmentPreviews === 0) {
-      return null
-    }
-
-    let images = []
-
-    for (let i = 0; i < this.state.attachmentPreviews; i++) {
-      images[i] = (
-        <div
-          style={{
-            display: 'inline-block',
-            position: 'relative',
-            width: 150,
-            height: 150,
-          }}
-        >
-          <Loader active />
-        </div>
-      )
-    }
-
-    return <div>{images}</div>
-  }
-
-  renderAttachments() {
-    let attachments = this.state.attachments
-
-    if (attachments.length === 0) {
-      return null
-    }
-
-    const images = attachments.map((image, key) => (
-      <div key={key} style={{ display: 'inline-block', position: 'relative' }}>
-        <Image
-          bordered
-          src={image.url}
-          style={{ width: 150, height: 150, objectFit: 'cover' }}
-        />
-        <Button
-          circular
-          color="black"
-          compact
-          icon="delete"
-          onClick={() => {
-            delete attachments[key]
-
-            this.setState({ attachments: attachments })
-          }}
-          size="mini"
-          style={{ position: 'absolute', right: 5, top: 5 }}
-        />
-      </div>
-    ))
-
-    return <Image.Group>{images}</Image.Group>
-  }
-
-  renderEditMapModal() {
-    let position = [52, 12]
-
-    if (undefined !== this.props.ticker.location) {
-      position = [
-        this.props.ticker.location.lat,
-        this.props.ticker.location.lon,
-      ]
-    }
-
-    return (
-      <EditMapModal
-        geoInformation={this.state.geoInformation}
-        onClose={() => this.setState({ showEditMapModal: false })}
-        onSubmit={geoInformation =>
-          this.setState({
-            showEditMapModal: false,
-            geoInformation: geoInformation,
-          })
-        }
-        open={this.state.showEditMapModal}
-        position={position}
-      />
-    )
-  }
-
-  render() {
-    const state = this.state
-
-    return (
-      <Form error={state.formError}>
-        <Form.Field>{this.renderEditMapModal()}</Form.Field>
-        <Form.Field style={{ display: 'none' }}>
-          <Form.TextArea
-            rows="3"
-            value={JSON.stringify(state.geoInformation)}
-          />
-        </Form.Field>
-        <Form.Field>
-          <Form.TextArea
-            onChange={this.handleInput.bind(this)}
-            placeholder="Write a message"
-            rows="5"
-            value={state.message}
-          />
-        </Form.Field>
-        <Error
-          content={state.formErrorMessage}
-          error
-          header="Error"
-          hidden={!state.formError}
-          icon="ban"
-        />
-        {this.renderAttachmentPreviews()}
-        {this.renderAttachments()}
-        <Button
-          color="teal"
-          content="Send"
-          disabled={state.formError}
-          icon="send"
-          onClick={() => this.submitMessage()}
-        />
-        <Button
-          color="orange"
-          content={
-            this.state.geoInformation.type === 'FeatureCollection'
-              ? 'Change Map'
-              : 'Add Map'
-          }
-          icon={
-            this.state.geoInformation.type === 'FeatureCollection'
-              ? 'map'
-              : 'map outline'
-          }
-          onClick={() => this.setState({ showEditMapModal: true })}
-          toggle
-        />
-        <Button
-          color="violet"
-          content="Add Media"
-          icon="images outline"
-          onClick={() => this.fileInputRef.current.click()}
-        />
-        <input
-          ref={this.fileInputRef}
-          hidden
-          multiple
-          onChange={this.uploadAttachment.bind(this)}
-          type="file"
-        />
-        <Label
-          color={state.counterColor}
-          content={`${state.counter}/${MESSAGE_LIMIT}`}
-          style={{ float: 'right' }}
-        />
-      </Form>
-    )
-  }
-}
-
-MessageForm.propTypes = {
-  ticker: PropTypes.object.isRequired,
-  callback: PropTypes.func.isRequired,
-}
diff --git a/src/components/MessageForm.tsx b/src/components/MessageForm.tsx
new file mode 100644
index 00000000..8da1013f
--- /dev/null
+++ b/src/components/MessageForm.tsx
@@ -0,0 +1,97 @@
+import React, {
+  ChangeEvent,
+  FC,
+  FormEvent,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
+import { postMessage } from '../api/Message'
+import {
+  Button,
+  Form,
+  Message as Error,
+  TextAreaProps,
+} from 'semantic-ui-react'
+import { Ticker } from '../api/Ticker'
+import { SubmitHandler, useForm } from 'react-hook-form'
+import { useQueryClient } from 'react-query'
+import MessageFormCounter from './MessageFormCounter'
+
+interface Props {
+  ticker: Ticker
+}
+
+interface FormValues {
+  message: string
+}
+
+export const MESSAGE_LIMIT = 280
+
+const MessageForm: FC<Props> = ({ ticker }) => {
+  const { handleSubmit, register, setValue, watch } = useForm<FormValues>()
+  const queryClient = useQueryClient()
+  const watchMessage = watch('message', '')
+
+  const [errorMessage, setErrorMessage] = useState<string>('')
+
+  const onChange = useCallback(
+    (e: ChangeEvent | FormEvent, { name, value }: TextAreaProps) => {
+      setValue(name, value)
+      if (watchMessage?.length > MESSAGE_LIMIT) {
+        setErrorMessage(
+          `The message is too long. You must remove ${
+            watchMessage?.length - MESSAGE_LIMIT
+          } characters.`
+        )
+      } else if (errorMessage !== '') {
+        setErrorMessage('')
+      }
+    },
+    [errorMessage, setValue, watchMessage?.length]
+  )
+
+  const onSubmit: SubmitHandler<FormValues> = data => {
+    postMessage(ticker.id.toString(), data.message, null, []).finally(() => {
+      queryClient.invalidateQueries('messages')
+    })
+  }
+
+  useEffect(() => {
+    register('message')
+  })
+
+  // TODO: attachments + map
+
+  return (
+    <Form id="sendMessage" onSubmit={handleSubmit(onSubmit)}>
+      <Form.Field>
+        <Form.TextArea
+          defaultValue=""
+          name="message"
+          onChange={onChange}
+          placeholder="Write a message"
+          rows="5"
+        />
+      </Form.Field>
+      <Error
+        content={errorMessage}
+        header="Error"
+        hidden={!errorMessage}
+        icon="ban"
+        negative
+      />
+      <Button
+        color="teal"
+        content="Send"
+        disabled={errorMessage !== '' || watchMessage === ''}
+        form="sendMessage"
+        icon="send"
+        type="submit"
+      />
+      <MessageFormCounter letterCount={watchMessage?.length || 0} />
+    </Form>
+  )
+}
+
+export default MessageForm
diff --git a/src/components/MessageFormCounter.tsx b/src/components/MessageFormCounter.tsx
new file mode 100644
index 00000000..ba79fe97
--- /dev/null
+++ b/src/components/MessageFormCounter.tsx
@@ -0,0 +1,34 @@
+import React, { FC, useEffect, useState } from 'react'
+import { Label, SemanticCOLORS } from 'semantic-ui-react'
+import { MESSAGE_LIMIT } from './MessageForm'
+
+interface Props {
+  letterCount: number
+}
+
+const MessageFormCounter: FC<Props> = ({ letterCount }) => {
+  const [color, setColor] = useState<SemanticCOLORS>('green')
+
+  //TODO: Calculate length for Twitter (cutting links to 20 characters)
+  useEffect(() => {
+    if (letterCount > MESSAGE_LIMIT) {
+      setColor('red')
+    } else if (letterCount >= 260) {
+      setColor('orange')
+    } else if (letterCount >= 220) {
+      setColor('yellow')
+    } else {
+      setColor('green')
+    }
+  }, [letterCount])
+
+  return (
+    <Label
+      color={color}
+      content={`${letterCount}/${MESSAGE_LIMIT}`}
+      style={{ float: 'right' }}
+    />
+  )
+}
+
+export default MessageFormCounter
diff --git a/src/components/MessageList.tsx b/src/components/MessageList.tsx
new file mode 100644
index 00000000..588ff87a
--- /dev/null
+++ b/src/components/MessageList.tsx
@@ -0,0 +1,42 @@
+import React, { FC } from 'react'
+import { Dimmer, Feed, Loader } from 'semantic-ui-react'
+import { Ticker } from '../api/Ticker'
+import { getMessages } from '../api/Message'
+import Message from '../components/Message'
+import withAuth from '../components/withAuth'
+import { useQuery } from 'react-query'
+
+interface Props {
+  ticker: Ticker
+}
+
+const MessageList: FC<Props> = ({ ticker }) => {
+  const { isLoading, error, data } = useQuery(
+    ['messages', ticker.id],
+    () => getMessages(ticker.id),
+    { refetchInterval: false }
+  )
+
+  if (isLoading) {
+    return (
+      <Dimmer active inverted>
+        <Loader inverted>Loading</Loader>
+      </Dimmer>
+    )
+  }
+
+  if (error || data === undefined) {
+    //TODO: Generic Error View
+    return <React.Fragment>Error occured</React.Fragment>
+  }
+
+  return (
+    <Feed>
+      {data.data.messages.map(message => (
+        <Message key={message.id} message={message} />
+      ))}
+    </Feed>
+  )
+}
+
+export default withAuth(MessageList)
diff --git a/src/views/TickerView.tsx b/src/views/TickerView.tsx
index bf81cba9..33fa349c 100644
--- a/src/views/TickerView.tsx
+++ b/src/views/TickerView.tsx
@@ -1,8 +1,6 @@
-import React, { FC, useCallback, useEffect, useState } from 'react'
-import { Container, Feed, Grid, Header, Loader } from 'semantic-ui-react'
+import React, { FC, useState } from 'react'
+import { Container, Grid, Header, Loader } from 'semantic-ui-react'
 import { getTicker, Ticker } from '../api/Ticker'
-import { getMessages, Message as MessageType } from '../api/Message'
-import Message from '../components/Message'
 import withAuth from '../components/withAuth'
 import Navigation from './Navigation'
 import TickerUserList from '../components/TickerUserList'
@@ -13,6 +11,7 @@ import { useQuery } from 'react-query'
 import TickerCard from '../components/TickerCard'
 import { useParams } from 'react-router-dom'
 import { User } from '../api/User'
+import MessageList from '../components/MessageList'
 
 interface Props {
   user: User
@@ -27,45 +26,20 @@ const TickerView: FC<Props> = props => {
   const tickerIdNum = parseInt(tickerId)
 
   const [ticker, setTicker] = useState<Ticker>()
-  const [messages, setMessages] = useState<Array<MessageType>>([])
-  const [isConfigurationLoading, setIsConfigurationLoading] =
-    useState<boolean>(false)
 
   const { isLoading, error, data } = useQuery(
-    ['messages', tickerIdNum],
-    () => getMessages(tickerIdNum),
+    ['ticker', tickerIdNum],
+    () => getTicker(tickerIdNum),
     { refetchInterval: false }
   )
 
-  const loadTicker = useCallback(() => {
-    getTicker(tickerIdNum).then(response => {
-      if (response.data?.ticker !== undefined) {
-        setTicker(response.data.ticker)
-        setIsConfigurationLoading(false)
-      }
-    })
-  }, [tickerIdNum])
-
-  useEffect(() => {
-    loadTicker()
-  }, [loadTicker])
-
-  useEffect(() => {
-    if (data?.data.messages !== undefined) {
-      setMessages(data?.data.messages)
-    }
-  }, [data?.data.messages])
+  if (isLoading) {
+    return <Loader size="large" />
+  }
 
-  const renderMessages = () => {
-    if (messages.length > 0) {
-      return (
-        <Feed>
-          {messages.map(message => (
-            <Message key={message.id} message={message} />
-          ))}
-        </Feed>
-      )
-    }
+  if (error || data === undefined) {
+    //TODO: Generic Error View
+    return <React.Fragment>Error occured</React.Fragment>
   }
 
   const renderUsers = () => {
@@ -92,7 +66,6 @@ const TickerView: FC<Props> = props => {
 
   const reset = () => {
     setTicker(ticker)
-    setMessages([])
   }
 
   const renderTicker = () => {
@@ -105,16 +78,12 @@ const TickerView: FC<Props> = props => {
     <Container>
       <Navigation user={props.user} />
       <Container className="app">
-        <Loader active={isConfigurationLoading || isLoading} size="large" />
         <Grid columns={2}>
           <Grid.Row>
             <Grid.Column width={10}>
               <Header dividing>Messages</Header>
-              {/* <MessageForm
-                callback={this.loadMessages}
-                ticker={this.state.ticker}
-              /> */}
-              {renderMessages()}
+              <MessageForm ticker={data.data.ticker} />
+              <MessageList ticker={data.data.ticker} />
             </Grid.Column>
             <Grid.Column width={6}>
               <Header dividing>Configuration</Header>