diff --git a/src/plugins/qmldesigner/components/resources/outputpane-style.css b/src/plugins/qmldesigner/components/resources/outputpane-style.css
index c8a4b256a47..43f9e54e22d 100644
--- a/src/plugins/qmldesigner/components/resources/outputpane-style.css
+++ b/src/plugins/qmldesigner/components/resources/outputpane-style.css
@@ -1,134 +1,44 @@
-QFrame {
-   border: 2px;
-   background-color: #4f4f4f;
-}
-
-QLabel {
+QWidget {
+    background-color: #363636;
     border: none;
-    border-image: none;
-    padding: 0;
-    background: none;
-    color: #E1E1E1;
 }
 
-QScrollArea {
-     border: 0px;
-     background-color: #4f4f4f;
+QTabWidget::pane {
+    background-color: #363636;
+    border: none;
 }
 
-QStackedWidget {
-     border: 0px;
-     background-color: #4f4f4f;
+QAbstractScrollArea {
+    background-color: #363636;
+    border: none;
 }
 
-
-QGraphicsView {
-     border: 0px;
-     background-color: #4f4f4f;
+QPlainTextEdit {
+    background-color: #ababab;
+    border: none;
 }
 
-QTabWidget {
-     border: 0px;
-     background-color: #4f4f4f;
-}
-
-QTabWidget::pane { /* The tab widget frame */
-     border: 0px;
-     background-color: #4f4f4f;
-}
-
-QLineEdit
-{
-     border: 2px solid #8F8F8F;
-     border-radius: 4px;
-     padding: 0 8px;
-     background-color: white;
-     selection-background-color: darkgray;
-}
-
-QLineEdit#itemLibrarySearchInput {
-    color: black;
-    border: 2px solid #0F0F0F;
-    border-radius: 6px;
-    border-width: 1;
-    max-height: 20px;
-    min-height: 20px;
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
-                                      stop: 0 #e0e0e0, stop: 1 #f0f0f0);
-}
-
-
- QTreeView {
-    color: white;
-    selection-color: white
- }
-
- QTreeView::item:selected {
-     color: white;
- }
-
-QTreeView::branch:has-siblings:!adjoins-item {
-     border-image: none;
-     image:none;
- }
-
- QTreeView::branch:has-siblings:adjoins-item {
-     border-image: none;
-     image:none;
- }
-
- QTreeView::branch:!has-children:!has-siblings:adjoins-item {
-     border-image: none;
-     image:none;
- }
-
- QTreeView::branch:has-children:!has-siblings:closed,
- QTreeView::branch:closed:has-children:has-siblings {
-         border-image: none;
-         image: url(:/qmldesigner/images/triangle_horz.png);
- }
-
- QTreeView::branch:open:has-children:!has-siblings,
- QTreeView::branch:open:has-children:has-siblings  {
-         border-image: none;
-         image: url(:/qmldesigner/images/triangle_vert.png);
- }
-
- QListView {
-    color: white;
-    selection-color: white
- }
-
- QListView::item:selected {
-     color: white;
- }
-
-  QComboBox QAbstractItemView {
-     show-decoration-selected: 1; /* make the selection span the entire width of the view */
-	 background-color: #494949; /* sets background of the menu */
-     border: 1px solid black;
-     margin: 0px; /* some spacing around the menu */
-     color: #cacaca;
-	 selection-background-color: #d2d2d2;
-	 selection-color: #404040;
- }
-
 QTabBar::tab {
     border-image: none;
 
-    width: 80px;
+    border-top: 1px solid #000000;
+    border-left: 1px solid #000000;
+    border-right: 1px solid #000000;
+
+    min-width: 80px;
 
     height: 22px;
-    margin-top: 0x;
-    margin-bottom: 0px;
-    margin-left: 0px;
-    margin-right: 0px;
+    margin-top: 2px;
+    margin-bottom: -1px;
+    padding-left: 2px;
+    padding-right: 4px;
+
     font: bold;
-	font-size: 11px;
+    font-size: 11px;
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
     stop: 0 #3c3c3c, stop: 1 #444444);
 
-    color: #EEEEEE;
+    color: #ababab;
 }
 
 QTabBar::tab:hover {
@@ -137,13 +47,9 @@ QTabBar::tab:hover {
 }
 
 QTabBar::tab:selected {
-    border: none; /* no border for a flat push button */
+    border: none;
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
-    stop: 0 #EFEFEF, stop: 1 #EEEEEE);
+    stop: 0 #EEEEEE, stop: 1 #ababab);
     color: #3c3c3c;
 }
 
-QWidget#itemLibrarySearchInputFrame {
-    background-color: #eeeeee;
-}
-
diff --git a/src/plugins/qmldesigner/components/resources/resources.qrc b/src/plugins/qmldesigner/components/resources/resources.qrc
index 82f17fad013..391240a66ae 100644
--- a/src/plugins/qmldesigner/components/resources/resources.qrc
+++ b/src/plugins/qmldesigner/components/resources/resources.qrc
@@ -97,6 +97,7 @@
         <file>images/aspectlockset.png</file>
         <file>images/aspectlockoff.png</file>
         <file>images/button-pressed-left.png</file>
+        <file>outputpane-style.css</file>
         <file>images/button-pressed-middle.png</file>
         <file>images/button-pressed-right.png</file>
         <file>images/button-normal-left.png</file>
diff --git a/src/plugins/qmldesigner/components/resources/scrollbar.css b/src/plugins/qmldesigner/components/resources/scrollbar.css
index 765bedbc212..34e8af8acbd 100644
--- a/src/plugins/qmldesigner/components/resources/scrollbar.css
+++ b/src/plugins/qmldesigner/components/resources/scrollbar.css
@@ -39,7 +39,7 @@
       subcontrol-origin: margin;
   }
   QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
-      border: 0px solid;
+      border: none;
       width: 0px;
       height: 0px;
   }
diff --git a/src/plugins/qmldesigner/designmodewidget.cpp b/src/plugins/qmldesigner/designmodewidget.cpp
index f2afda613f1..49311cbc59f 100644
--- a/src/plugins/qmldesigner/designmodewidget.cpp
+++ b/src/plugins/qmldesigner/designmodewidget.cpp
@@ -29,11 +29,15 @@
 
 #include "designmodewidget.h"
 #include "qmldesignerconstants.h"
+#include "styledoutputpaneplaceholder.h"
 
 #include <model.h>
 #include <rewriterview.h>
 #include <formeditorwidget.h>
 
+#include <coreplugin/coreconstants.h>
+#include <coreplugin/modemanager.h>
+#include <coreplugin/outputpane.h>
 #include <coreplugin/icore.h>
 #include <coreplugin/minisplitter.h>
 #include <coreplugin/sidebar.h>
@@ -146,6 +150,11 @@ DesignModeWidget::DesignModeWidget(QWidget *parent) :
     connect(m_pasteAction, SIGNAL(triggered()), this, SLOT(paste()));
     m_selectAllAction = new Utils::ParameterAction(tr("Select &All"), tr("Select All \"%1\""), Utils::ParameterAction::EnabledWithParameter, this);
     connect(m_selectAllAction, SIGNAL(triggered()), this, SLOT(selectAll()));
+
+    Core::ModeManager *modeManager = Core::ModeManager::instance();
+    Core::IMode *designmode = modeManager->mode(Core::Constants::MODE_DESIGN);
+    m_outputPlaceholderSplitter = new Core::MiniSplitter;
+    m_outputPanePlaceholder = new StyledOutputpanePlaceHolder(designmode, m_outputPlaceholderSplitter);
 }
 
 DesignModeWidget::~DesignModeWidget()
@@ -600,7 +609,15 @@ void DesignModeWidget::setup()
         rightLayout->addWidget(m_fakeToolBar);
         //### we now own these here
         rightLayout->addWidget(m_statesEditorWidget.data());
-        rightLayout->addWidget(m_formEditorView->widget());
+
+        // editor and output panes
+        m_outputPlaceholderSplitter->addWidget(m_formEditorView->widget());
+        m_outputPlaceholderSplitter->addWidget(m_outputPanePlaceholder);
+        m_outputPlaceholderSplitter->setStretchFactor(0, 10);
+        m_outputPlaceholderSplitter->setStretchFactor(1, 0);
+        m_outputPlaceholderSplitter->setOrientation(Qt::Vertical);
+
+        rightLayout->addWidget(m_outputPlaceholderSplitter);
     }
 
     // m_mainSplitter area:
diff --git a/src/plugins/qmldesigner/designmodewidget.h b/src/plugins/qmldesigner/designmodewidget.h
index fc8ebe03e1e..8026a0d95a0 100644
--- a/src/plugins/qmldesigner/designmodewidget.h
+++ b/src/plugins/qmldesigner/designmodewidget.h
@@ -65,6 +65,7 @@ namespace Core {
     class SideBar;
     class OpenEditorsModel;
     class EditorToolBar;
+    class OutputPanePlaceHolder;
 }
 
 namespace QmlDesigner {
@@ -175,6 +176,8 @@ private:
     Core::SideBar *m_leftSideBar;
     Core::SideBar *m_rightSideBar;
     Core::EditorToolBar *m_fakeToolBar;
+    Core::OutputPanePlaceHolder *m_outputPanePlaceholder;
+    Core::MiniSplitter *m_outputPlaceholderSplitter;
 
     bool m_isDisabled;
 
diff --git a/src/plugins/qmldesigner/qmldesignerplugin.pro b/src/plugins/qmldesigner/qmldesignerplugin.pro
index a20079903e0..3049f449a1c 100644
--- a/src/plugins/qmldesigner/qmldesignerplugin.pro
+++ b/src/plugins/qmldesigner/qmldesignerplugin.pro
@@ -23,13 +23,15 @@ HEADERS += qmldesignerconstants.h \
     application.h \
     designersettings.h \
     settingspage.h \
-    designmodecontext.h
+    designmodecontext.h \
+    styledoutputpaneplaceholder.h
 SOURCES += qmldesignerplugin.cpp \
     designmodewidget.cpp \
     application.cpp \
     designersettings.cpp \
     settingspage.cpp \
-    designmodecontext.cpp
+    designmodecontext.cpp \
+    styledoutputpaneplaceholder.cpp
 FORMS += settingspage.ui
 
 OTHER_FILES += QmlDesigner.pluginspec