diff --git a/assets/js/src/newsletters/newsletters.jsx b/assets/js/src/newsletters/newsletters.jsx
index e69de29bb2..edebc5f8bb 100644
--- a/assets/js/src/newsletters/newsletters.jsx
+++ b/assets/js/src/newsletters/newsletters.jsx
@@ -0,0 +1,80 @@
+define(
+ 'newsletters',
+ ['react', 'react-router', 'mailpoet'],
+ function(React, Router, MailPoet) {
+
+ var DefaultRoute = Router.DefaultRoute;
+ var Link = Router.Link;
+ var Route = Router.Route;
+ var RouteHandler = Router.RouteHandler;
+
+ var App = React.createClass({
+ render: function() {
+ return (
+
+
+
+ -
+ Dashboard
+
+ -
+ Inbox
+
+ -
+ Calendar
+
+
+ Logged in as Marco
+
+
+
+
+ );
+ }
+ });
+
+ var Dashboard = React.createClass({
+ render: function () {
+ return (
+
+
Dashboard
+
+ );
+ }
+ });
+
+ var Inbox = React.createClass({
+ render: function () {
+ return (
+
+
Inbox
+
+ );
+ }
+ });
+
+ var Calendar = React.createClass({
+ render: function () {
+ return (
+
+
Calendar
+
+ );
+ }
+ });
+
+ var routes = (
+
+
+
+
+
+ );
+
+ var hook = document.getElementById('newsletters');
+ if (hook) {
+ Router.run(routes, function(Handler) {
+ React.render(, hook);
+ });
+ }
+ });
diff --git a/package.json b/package.json
index fa8bd82184..afbdfaae6d 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
"react-infinity": "^1.2.2",
"react-prefixr": "^0.1.0",
"react-waypoint": "^1.0.2",
+ "react-router": "^0.13.3",
"select2": "3.5.1",
"spectrum-colorpicker": "^1.6.2",
"tinymce": "4.1.10",
diff --git a/views/newsletters.html b/views/newsletters.html
index 823a45f160..21c81c2b67 100644
--- a/views/newsletters.html
+++ b/views/newsletters.html
@@ -2,7 +2,5 @@
<% block content %>
<%= 'Newsletters' %>
-
- <%= 'New' %>
-
+
<% endblock %>