diff --git a/src/App.tsx b/src/App.tsx
index 4ba4f96..6413bbf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,87 +1,13 @@
-import { FC, useEffect, useState } from 'react'
-import { Container, Dimmer, Loader } from 'semantic-ui-react'
-import { Settings, Ticker } from './lib/types'
-import { getInit } from './lib/api'
-import ErrorView from './views/ErrorView'
-import ActiveView from './views/ActiveView'
-import InactiveView from './views/InactiveView'
+import { FC } from 'react'
+import { TickerProvider } from './components/useTicker'
+import Ticker from './Ticker'
 
 const App: FC = () => {
-  const [ticker, setTicker] = useState<Ticker | null>(null)
-  const [settings, setSettings] = useState<Settings>()
-  const [isLoading, setIsLoading] = useState<boolean>(true)
-  const [isOffline, setIsOffline] = useState<boolean>(false)
-  const [gotError, setGotError] = useState<boolean>(false)
-
-  const fetchInit = () => {
-    getInit()
-      .then(response => {
-        if (response.data.settings) {
-          setSettings(response.data.settings)
-        }
-
-        if (response.data.ticker?.active) {
-          setTicker(response.data.ticker)
-        }
-
-        setIsLoading(false)
-      })
-      .catch(error => {
-        if (error instanceof TypeError) {
-          setIsOffline(true)
-        } else {
-          setGotError(true)
-        }
-        setIsLoading(false)
-      })
-  }
-
-  useEffect(() => {
-    fetchInit()
-    // This should only be executed once on load (~ componentDidMount)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  useEffect(() => {
-    if (ticker?.title) {
-      document.title = ticker.title
-    }
-  }, [ticker])
-
-  if (isLoading) {
-    return (
-      <Container>
-        <Dimmer active>
-          <Loader content="Loading" size="large" />
-        </Dimmer>
-      </Container>
-    )
-  }
-
-  if (gotError) {
-    return (
-      <ErrorView message="There seems to be a problem connecting to the server." />
-    )
-  }
-
-  if (isOffline) {
-    return <ErrorView message="It seems that you are offline." />
-  }
-
-  if (ticker?.active) {
-    return (
-      <ActiveView
-        refreshInterval={settings?.refresh_interval || 0}
-        ticker={ticker}
-      />
-    )
-  }
-
-  if (ticker === null && settings?.inactive_settings !== undefined) {
-    return <InactiveView settings={settings.inactive_settings} />
-  }
-
-  return <div>...</div>
+  return (
+    <TickerProvider>
+      <Ticker />
+    </TickerProvider>
+  )
 }
 
 export default App
diff --git a/src/App.test.tsx b/src/Ticker.test.tsx
similarity index 87%
rename from src/App.test.tsx
rename to src/Ticker.test.tsx
index f729e5c..d670525 100644
--- a/src/App.test.tsx
+++ b/src/Ticker.test.tsx
@@ -1,9 +1,10 @@
-import App from './App'
+import Ticker from './Ticker'
 import { render, screen } from '@testing-library/react'
 import * as api from './lib/api'
-import { Settings, Ticker } from './lib/types'
+import { Settings, Ticker as TickerType } from './lib/types'
+import { TickerProvider } from './components/useTicker'
 
-describe('App', function () {
+describe('Ticker', function () {
   const initSettings = {
     refresh_interval: 1000,
     inactive_settings: {
@@ -30,11 +31,19 @@ describe('App', function () {
       twitter: 'systemli',
       facebook: 'betternot',
     },
-  } as Ticker
+  } as TickerType
+
+  const renderTicker = () => {
+    return render(
+      <TickerProvider>
+        <Ticker />
+      </TickerProvider>
+    )
+  }
 
   test('renders OfflineView', async function () {
     jest.spyOn(api, 'getInit').mockRejectedValue(new TypeError())
-    render(<App />)
+    renderTicker()
 
     expect(screen.getByText('Loading')).toBeInTheDocument()
 
@@ -51,7 +60,7 @@ describe('App', function () {
           'The server responses with an error: Internal Server Error (500)'
         )
       )
-    render(<App />)
+    renderTicker()
 
     expect(screen.getByText('Loading')).toBeInTheDocument()
 
@@ -69,7 +78,7 @@ describe('App', function () {
         ticker: null,
       },
     })
-    render(<App />)
+    renderTicker()
 
     expect(screen.getByText('Loading')).toBeInTheDocument()
 
@@ -96,7 +105,7 @@ describe('App', function () {
     window.IntersectionObserver = jest
       .fn()
       .mockImplementation(intersectionObserverMock)
-    render(<App />)
+    renderTicker()
 
     expect(screen.getByText('Loading')).toBeInTheDocument()
 
diff --git a/src/Ticker.tsx b/src/Ticker.tsx
new file mode 100644
index 0000000..b3c0ef0
--- /dev/null
+++ b/src/Ticker.tsx
@@ -0,0 +1,48 @@
+import { FC, useEffect } from 'react'
+import { Container, Dimmer, Loader } from 'semantic-ui-react'
+import ErrorView from './views/ErrorView'
+import ActiveView from './views/ActiveView'
+import InactiveView from './views/InactiveView'
+import useTicker from './components/useTicker'
+
+const Ticker: FC = () => {
+  const { ticker, settings, isLoading, isOffline, hasError } = useTicker()
+
+  useEffect(() => {
+    if (ticker?.title) {
+      document.title = ticker.title
+    }
+  }, [ticker])
+
+  if (isLoading) {
+    return (
+      <Container>
+        <Dimmer active>
+          <Loader content="Loading" size="large" />
+        </Dimmer>
+      </Container>
+    )
+  }
+
+  if (hasError) {
+    return (
+      <ErrorView message="There seems to be a problem connecting to the server." />
+    )
+  }
+
+  if (isOffline) {
+    return <ErrorView message="It seems that you are offline." />
+  }
+
+  if (ticker?.active) {
+    return <ActiveView />
+  }
+
+  if (ticker === null && settings?.inactive_settings !== undefined) {
+    return <InactiveView settings={settings.inactive_settings} />
+  }
+
+  return <div>...</div>
+}
+
+export default Ticker
diff --git a/src/components/About.tsx b/src/components/About.tsx
index 59ab191..1e5a6d3 100644
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -3,50 +3,56 @@ import ReactMarkdown from 'react-markdown'
 import { Button, Card, Icon, List, Modal } from 'semantic-ui-react'
 import Credits from './Credits'
 import DescriptionItem from './DescriptionItem'
-import { DescriptionTypes, Ticker } from '../lib/types'
+import { DescriptionTypes } from '../lib/types'
 import { getAtomFeedUrl, getRssFeedUrl } from '../lib/api'
+import useTicker from './useTicker'
 
 interface Props {
-  ticker: Ticker
   isModal?: boolean
 }
 
-const About: FC<Props> = props => {
+const About: FC<Props> = ({ isModal }) => {
+  const { ticker } = useTicker()
+
+  if (!ticker) {
+    return null
+  }
+
   const renderDescriptionList = () => (
     <List>
-      {props.ticker.information.author && (
+      {ticker.information.author && (
         <DescriptionItem
-          info={props.ticker.information.author}
+          info={ticker.information.author}
           type={DescriptionTypes.Author}
         />
       )}
-      {props.ticker.information.email && (
+      {ticker.information.email && (
         <DescriptionItem
-          info={props.ticker.information.email}
+          info={ticker.information.email}
           type={DescriptionTypes.Email}
         />
       )}
-      {props.ticker.information.url && (
+      {ticker.information.url && (
         <DescriptionItem
-          info={props.ticker.information.url}
+          info={ticker.information.url}
           type={DescriptionTypes.Homepage}
         />
       )}
-      {props.ticker.information.twitter && (
+      {ticker.information.twitter && (
         <DescriptionItem
-          info={props.ticker.information.twitter}
+          info={ticker.information.twitter}
           type={DescriptionTypes.Twitter}
         />
       )}
-      {props.ticker.information.facebook && (
+      {ticker.information.facebook && (
         <DescriptionItem
-          info={props.ticker.information.facebook}
+          info={ticker.information.facebook}
           type={DescriptionTypes.Facebook}
         />
       )}
-      {props.ticker.information.telegram && (
+      {ticker.information.telegram && (
         <DescriptionItem
-          info={props.ticker.information.telegram}
+          info={ticker.information.telegram}
           type={DescriptionTypes.Telegram}
         />
       )}
@@ -60,7 +66,7 @@ const About: FC<Props> = props => {
     </List>
   )
 
-  if (props.isModal) {
+  if (isModal) {
     return (
       <Modal
         closeIcon
@@ -73,7 +79,7 @@ const About: FC<Props> = props => {
       >
         <Modal.Header>About</Modal.Header>
         <Modal.Content>
-          <ReactMarkdown>{props.ticker.description}</ReactMarkdown>
+          <ReactMarkdown>{ticker.description || ''}</ReactMarkdown>
         </Modal.Content>
         <Modal.Content>
           {renderDescriptionList()}
@@ -90,7 +96,7 @@ const About: FC<Props> = props => {
           <Card.Header>About</Card.Header>
         </Card.Content>
         <Card.Content>
-          <ReactMarkdown>{props.ticker.description}</ReactMarkdown>
+          <ReactMarkdown>{ticker.description || ''}</ReactMarkdown>
         </Card.Content>
         <Card.Content>{renderDescriptionList()}</Card.Content>
       </Card>
diff --git a/src/components/DynamicMetaTags.tsx b/src/components/DynamicMetaTags.tsx
index 41acc1b..620b175 100644
--- a/src/components/DynamicMetaTags.tsx
+++ b/src/components/DynamicMetaTags.tsx
@@ -1,12 +1,14 @@
 import { FC } from 'react'
 import { Helmet } from 'react-helmet'
-import { Ticker } from '../lib/types'
+import useTicker from './useTicker'
 
-interface Props {
-  ticker: Ticker
-}
+const DynamicMetaTags: FC = () => {
+  const { ticker } = useTicker()
+
+  if (!ticker) {
+    return null
+  }
 
-const DynamicMetaTags: FC<Props> = ({ ticker }) => {
   return (
     <Helmet>
       <meta content={ticker.description} name="description" />
diff --git a/src/components/Map.tsx b/src/components/Map.tsx
index 606a28a..368389b 100644
--- a/src/components/Map.tsx
+++ b/src/components/Map.tsx
@@ -56,7 +56,7 @@ const Map: FC<Props> = props => {
 
     if (
       features.length === 1 &&
-      // FIXME: Type is currently not defined by DefinitelyTyped?
+      // Type is currently not defined by DefinitelyTyped
       // @ts-ignore
       features[0].feature.geometry.type === 'Point'
     ) {
diff --git a/src/components/MessageList.test.tsx b/src/components/MessageList.test.tsx
index e50063c..db35c58 100644
--- a/src/components/MessageList.test.tsx
+++ b/src/components/MessageList.test.tsx
@@ -14,7 +14,7 @@ describe('MessageList', function () {
       .fn()
       .mockImplementation(intersectionObserverMock)
 
-    render(<MessageList refreshInterval={10} />)
+    render(<MessageList />)
 
     expect(screen.getByText('Loading messages')).toBeInTheDocument()
     expect(
diff --git a/src/components/MessageList.tsx b/src/components/MessageList.tsx
index 2c05268..f7af77b 100644
--- a/src/components/MessageList.tsx
+++ b/src/components/MessageList.tsx
@@ -3,16 +3,15 @@ import { Dimmer, Header, Icon, Loader, Segment } from 'semantic-ui-react'
 import { Message as MessageType } from '../lib/types'
 import Message from './Message'
 import { getTimeline } from '../lib/api'
+import useTicker from './useTicker'
 
-interface Props {
-  refreshInterval: number
-}
-
-const MessageList: FC<Props> = props => {
+const MessageList: FC = () => {
   const [isLoading, setIsLoading] = useState<boolean>(true)
   const [messages, setMessages] = useState<MessageType[]>([])
   const [lastMessageReceived, setLastMessageReceived] = useState<boolean>(false)
 
+  const { settings } = useTicker()
+
   const loadMoreSpinnerRef = useRef<HTMLDivElement>(null)
 
   const fetchMessages = useCallback(() => {
@@ -98,10 +97,13 @@ const MessageList: FC<Props> = props => {
 
   // periodically fetch new messages
   useEffect(() => {
-    const interval = setInterval(() => fetchMessages(), props.refreshInterval)
+    const interval = setInterval(
+      () => fetchMessages(),
+      settings?.refresh_interval || 60000
+    )
 
     return () => clearInterval(interval)
-  }, [fetchMessages, messages, props.refreshInterval])
+  }, [fetchMessages, messages, settings?.refresh_interval])
 
   const renderPlaceholder = () => (
     <Segment placeholder>
diff --git a/src/components/useTicker.tsx b/src/components/useTicker.tsx
new file mode 100644
index 0000000..fe3d418
--- /dev/null
+++ b/src/components/useTicker.tsx
@@ -0,0 +1,80 @@
+import React, {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+} from 'react'
+import { getInit } from '../lib/api'
+import { Settings, Ticker } from '../lib/types'
+import { useState } from 'react'
+
+interface TickerContext {
+  ticker: Ticker | null
+  settings?: Settings
+  isLoading: boolean
+  isOffline: boolean
+  hasError: boolean
+}
+
+const TickerContext = createContext<TickerContext>({} as TickerContext)
+
+export function TickerProvider({
+  children,
+}: {
+  children: ReactNode
+}): JSX.Element {
+  const [ticker, setTicker] = useState<Ticker | null>(null)
+  const [settings, setSettings] = useState<Settings>()
+  const [isLoading, setIsLoading] = useState<boolean>(true)
+  const [isOffline, setIsOffline] = useState<boolean>(false)
+  const [hasError, setHasError] = useState<boolean>(false)
+
+  const fetchInit = () => {
+    getInit()
+      .then(response => {
+        if (response.data.settings) {
+          setSettings(response.data.settings)
+        }
+
+        if (response.data.ticker?.active) {
+          setTicker(response.data.ticker)
+        }
+
+        setIsLoading(false)
+      })
+      .catch(error => {
+        if (error instanceof TypeError) {
+          setIsOffline(true)
+        } else {
+          setHasError(true)
+        }
+        setIsLoading(false)
+      })
+  }
+
+  useEffect(() => {
+    fetchInit()
+  }, [])
+
+  const memoedValue = useMemo(
+    () => ({
+      ticker,
+      settings,
+      isLoading,
+      isOffline,
+      hasError,
+    }),
+    [ticker, settings, isLoading, isOffline, hasError]
+  )
+
+  return (
+    <TickerContext.Provider value={memoedValue}>
+      {children}
+    </TickerContext.Provider>
+  )
+}
+
+export default function useTicker() {
+  return useContext(TickerContext)
+}
diff --git a/src/views/ActiveView.tsx b/src/views/ActiveView.tsx
index 40f4876..85df211 100644
--- a/src/views/ActiveView.tsx
+++ b/src/views/ActiveView.tsx
@@ -2,12 +2,12 @@ import { FC, useCallback, useState } from 'react'
 import { Container, Grid, Header, Sticky } from 'semantic-ui-react'
 import styled from 'styled-components'
 import { spacing } from '../lib/theme'
-import { Ticker } from '../lib/types'
 import { isMobile } from '../lib/helper'
 import About from '../components/About'
 import ReloadInfo from '../components/ReloadInfo'
 import MessageList from '../components/MessageList'
 import DynamicMetaTags from '../components/DynamicMetaTags'
+import useTicker from '../components/useTicker'
 
 const Wrapper = styled(Container)`
   padding: ${spacing.normal} 0;
@@ -17,15 +17,11 @@ const HeaderWrapper = styled(Header)`
   margin: 0 0 ${spacing.normal} !important;
 `
 
-interface Props {
-  ticker: Ticker
-  refreshInterval: number
-}
-
 type StickyContext = Document | Window | HTMLElement | React.Ref<HTMLElement>
 
-const ActiveView: FC<Props> = ({ ticker, refreshInterval }) => {
+const ActiveView: FC = () => {
   const [stickyContext, setStickyContext] = useState<StickyContext>()
+  const { ticker } = useTicker()
 
   const headline =
     ticker === null || ticker.title == undefined ? 'Ticker' : ticker.title
@@ -37,30 +33,30 @@ const ActiveView: FC<Props> = ({ ticker, refreshInterval }) => {
   if (isMobile()) {
     return (
       <Wrapper>
-        <DynamicMetaTags ticker={ticker} />
-        <About isModal ticker={ticker} />
+        <DynamicMetaTags />
+        <About isModal />
         {headline && <HeaderWrapper content={headline} size={'large'} />}
         <ReloadInfo />
-        <MessageList refreshInterval={refreshInterval} />
+        <MessageList />
       </Wrapper>
     )
   }
 
   return (
     <Wrapper>
-      <DynamicMetaTags ticker={ticker} />
+      <DynamicMetaTags />
       {headline && <HeaderWrapper content={headline} size={'large'} />}
       <ReloadInfo />
       <Grid divided={'vertically'}>
         <Grid.Row columns={2}>
           <Grid.Column computer={10} tablet={10}>
             <div ref={handleContextRef}>
-              <MessageList refreshInterval={refreshInterval} />
+              <MessageList />
             </div>
           </Grid.Column>
           <Grid.Column computer={6} tablet={6}>
             <Sticky context={stickyContext} offset={30}>
-              <About ticker={ticker} />
+              <About />
             </Sticky>
           </Grid.Column>
         </Grid.Row>