diff --git a/client/src/app/site/motions/motion-detail/motion-detail.component.html b/client/src/app/site/motions/motion-detail/motion-detail.component.html
index 53a402dc6..6d954e780 100644
--- a/client/src/app/site/motions/motion-detail/motion-detail.component.html
+++ b/client/src/app/site/motions/motion-detail/motion-detail.component.html
@@ -33,171 +33,227 @@
     </mat-menu>
 </mat-toolbar>
 
-<mat-accordion multi='true' class='on-transition-fade'>
+<ng-container *ngIf="vp.isMobile ; then mobileView; else desktopView"></ng-container>
 
-    <!-- MetaInfo -->
-    <!-- <mat-expansion-panel #metaInfoPanel [expanded]='true' class='meta-info-panel'> -->
-    <mat-expansion-panel #metaInfoPanel [expanded]='this.editMotion && this.newMotion' class='meta-info-panel'>
-        <mat-expansion-panel-header>
-            <mat-panel-title>
-                <fa-icon icon='info-circle' [fixedWidth]="true"></fa-icon>
-                <span translate>Meta information</span>
-            </mat-panel-title>
-        </mat-expansion-panel-header>
+<ng-template #mobileView>
+    <mat-accordion multi='true' class='on-transition-fade'>
 
-        <!-- Meta info -->
-        <form [formGroup]='metaInfoForm' class='expansion-panel-custom-body' (ngSubmit)='saveMotion()'>
+        <!-- MetaInfo Panel-->
+        <mat-expansion-panel #metaInfoPanel [expanded]='this.editMotion && this.newMotion' class='meta-info-block meta-info-panel'>
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    <fa-icon icon='info-circle' [fixedWidth]="true"></fa-icon>
+                    <span translate>Meta information</span>
+                </mat-panel-title>
+            </mat-expansion-panel-header>
 
-            <!-- Identifier -->
-            <div *ngIf="editMotion && !newMotion">
-                <!-- <div *ngIf="editMotion"> -->
-                <div *ngIf='!editMotion'>
-                    <h3 translate>Identifier</h3>
-                    {{motion.identifier}}
-                </div>
-                <mat-form-field *ngIf="editMotion">
-                    <input matInput placeholder='Identifier' formControlName='identifier' [value]='motionCopy.identifier'>
-                </mat-form-field>
+            <!-- Meta info -->
+            <div class="expansion-panel-custom-body">
+                <ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container>
+            </div>
+        </mat-expansion-panel>
+
+        <!-- Personal Note -->
+        <mat-expansion-panel>
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    <fa-icon icon='file-signature' [fixedWidth]="true"></fa-icon>
+                    <span translate>Personal note</span>
+                </mat-panel-title>
+            </mat-expansion-panel-header>
+            TEST
+        </mat-expansion-panel>
+
+        <!-- Content -->
+        <mat-expansion-panel #contentPanel [expanded]='true' class='content-panel'>
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    <fa-icon icon='align-left' [fixedWidth]="true"></fa-icon>
+                    <span translate>Content</span>
+                </mat-panel-title>
+            </mat-expansion-panel-header>
+
+            <div class="expansion-panel-custom-body">
+                <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+            </div>
+        </mat-expansion-panel>
+    </mat-accordion>
+</ng-template>
+
+<ng-template #desktopView>
+    <div class="desktop-view">
+        <div class="desktop-left on-transition-fade">
+
+            <!-- Meta Info -->
+            <div class="meta-info-block meta-info-desktop">
+                <ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container>
             </div>
 
-            <!-- Submitter -->
-            <div *ngIf="motion && motion.submitters || editMotion">
-                <h3 translate>Submitters</h3>
-                {{motion.submitterAsUser}}
+            <!-- Personal Note -->
+            <div class="personal-note">
+                <mat-card>
+                    <mat-card-header>
+                        <mat-card-title>
+                            <span translate>Personal Note</span>
+                            <div class="title-right">
+                                <fa-icon icon="pen" [fixedWidth]=" true"></fa-icon>
+                                <fa-icon icon="ellipsis-v" [fixedWidth]="true"></fa-icon>
+                            </div>
+
+                        </mat-card-title>
+                    </mat-card-header>
+                    <mat-card-content>
+                        Hier könnte ihre Werbung stehen. 1 2 3 4 5 6 Hier könnte ihre Werbung stehen. 1 2 3 4 5 6
+                    </mat-card-content>
+                </mat-card>
             </div>
 
-            <!-- Supporter -->
-            <div *ngIf='motion && motion.supporters_id && motion.supporters_id.length > 0 || editMotion'>
-                <h3 translate>Supporters</h3>
-                <!-- print all motion supporters -->
+        </div>
+        <div class="desktop-right ">
+
+            <!-- Content -->
+            <mat-card class="content-panel">
+                <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+            </mat-card>
+        </div>
+    </div>
+</ng-template>
+
+<ng-template #metaInfoTemplate>
+    <form [formGroup]='metaInfoForm' (ngSubmit)='saveMotion()'>
+
+        <!-- Identifier -->
+        <div *ngIf="editMotion && !newMotion">
+            <!-- <div *ngIf="editMotion"> -->
+            <div *ngIf='!editMotion'>
+                <h3 translate>Identifier</h3>
+                {{motion.identifier}}
             </div>
+            <mat-form-field *ngIf="editMotion">
+                <input matInput placeholder='Identifier' formControlName='identifier' [value]='motionCopy.identifier'>
+            </mat-form-field>
+        </div>
 
-            <!-- State -->
-            <div *ngIf='!newMotion && motion && motion.workflow && motion.state_id || editMotion'>
-                <div *ngIf='!editMotion'>
-                    <h3 translate>State</h3>
-                    {{motion.state}}
-                </div>
-                <mat-form-field *ngIf="editMotion && !newMotion">
-                    <mat-select placeholder='State' formControlName='state_id'>
-                        <mat-option [value]="motionCopy.state.id">{{motionCopy.state}}</mat-option>
-                        <mat-divider></mat-divider>
-                        <mat-option *ngFor="let state of motionCopy.nextStates" [value]="state.id">{{state}}</mat-option>
-                        <mat-divider></mat-divider>
-                        <mat-option>
-                            <fa-icon icon='exclamation-triangle'></fa-icon> <span translate>Reset State</span>
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
+        <!-- Submitter -->
+        <div *ngIf="motion && motion.submitters || editMotion">
+            <h3 translate>Submitters</h3>
+            {{motion.submitterAsUser}}
+        </div>
+
+        <!-- Supporter -->
+        <div *ngIf='motion && motion.supporters_id && motion.supporters_id.length > 0 || editMotion'>
+            <h3 translate>Supporters</h3>
+            <!-- print all motion supporters -->
+        </div>
+
+        <!-- State -->
+        <div *ngIf='!newMotion && motion && motion.workflow && motion.state_id || editMotion'>
+            <div *ngIf='!editMotion'>
+                <h3 translate>State</h3>
+                {{motion.state}}
             </div>
+            <mat-form-field *ngIf="editMotion && !newMotion">
+                <mat-select placeholder='State' formControlName='state_id'>
+                    <mat-option [value]="motionCopy.state.id">{{motionCopy.state}}</mat-option>
+                    <mat-divider></mat-divider>
+                    <mat-option *ngFor="let state of motionCopy.nextStates" [value]="state.id">{{state}}</mat-option>
+                    <mat-divider></mat-divider>
+                    <mat-option>
+                        <fa-icon icon='exclamation-triangle'></fa-icon> <span translate>Reset State</span>
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
 
-            <!-- Recommendation -->
-            <!-- The suggestion of the work group weather or not a motion should be accepted -->
-            <div *ngIf='motion && motion.recomBy && (motion.recommendation_id || editMotion)'>
-                <div *ngIf='!editMotion'>
-                    <h3>{{motion.recomBy}}</h3>
-                    {{motion.recommendation.name}}
-                </div>
-                <mat-form-field *ngIf="motion && editMotion">
-                    <mat-select placeholder='Recommendation' formControlName='recommendation_id'>
-                        <mat-option *ngFor="let state of motionCopy.nextStates" [value]="state.id">{{state}}</mat-option>
-                        <mat-divider></mat-divider>
-
-                        <!-- TODO has no effect -->
-                        <mat-option>
-                            <fa-icon icon='exclamation-triangle'></fa-icon>
-                            <span translate>Reset recommendation</span>
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
+        <!-- Recommendation -->
+        <!-- The suggestion of the work group weather or not a motion should be accepted -->
+        <div *ngIf='motion && motion.recomBy && (motion.recommendation_id || editMotion)'>
+            <div *ngIf='!editMotion'>
+                <h3>{{motion.recomBy}}</h3>
+                {{motion.recommendation.name}}
             </div>
+            <mat-form-field *ngIf="motion && editMotion">
+                <mat-select placeholder='Recommendation' formControlName='recommendation_id'>
+                    <mat-option *ngFor="let state of motionCopy.nextStates" [value]="state.id">{{state}}</mat-option>
+                    <mat-divider></mat-divider>
 
-            <!-- Category -->
-            <div *ngIf="motion && motion.category_id || editMotion">
-                <div *ngIf='!editMotion'>
-                    <h3 translate> Category</h3>
-                    {{motion.category}}
-                </div>
-                <mat-form-field *ngIf="motion && editMotion">
-                    <mat-select placeholder='Category' formControlName='category_id'>
-                        <mat-option>None</mat-option>
-                        <mat-divider></mat-divider>
-                        <mat-option *ngFor="let cat of getMotionCategories()" [value]="cat.id">{{cat}}</mat-option>
-                    </mat-select>
-                </mat-form-field>
+                    <!-- TODO has no effect -->
+                    <mat-option>
+                        <fa-icon icon='exclamation-triangle'></fa-icon>
+                        <span translate>Reset recommendation</span>
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+
+        <!-- Category -->
+        <div *ngIf="motion && motion.category_id || editMotion">
+            <div *ngIf='!editMotion'>
+                <h3 translate> Category</h3>
+                {{motion.category}}
             </div>
+            <mat-form-field *ngIf="motion && editMotion">
+                <mat-select placeholder='Category' formControlName='category_id'>
+                    <mat-option>None</mat-option>
+                    <mat-divider></mat-divider>
+                    <mat-option *ngFor="let cat of getMotionCategories()" [value]="cat.id">{{cat}}</mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
 
-            <!-- Origin -->
-            <div *ngIf="motion && motion.origin || editMotion">
-                <div *ngIf='!editMotion'>
-                    <h3 translate> Origin</h3>
-                    {{motion.origin}}
-                </div>
-                <mat-form-field *ngIf="editMotion">
-                    <input matInput placeholder='Origin' formControlName='origin' [value]='motionCopy.origin'>
-                </mat-form-field>
+        <!-- Origin -->
+        <div *ngIf="motion && motion.origin || editMotion">
+            <div *ngIf='!editMotion'>
+                <h3 translate> Origin</h3>
+                {{motion.origin}}
             </div>
+            <mat-form-field *ngIf="editMotion">
+                <input matInput placeholder='Origin' formControlName='origin' [value]='motionCopy.origin'>
+            </mat-form-field>
+        </div>
 
-            <!-- Voting -->
-            <!-- <div *ngIf='motion.polls && motion.polls.length > 0 || editMotion'>
+        <!-- Voting -->
+        <!-- <div *ngIf='motion.polls && motion.polls.length > 0 || editMotion'>
                 <h3 translate>Voting</h3>
             </div> -->
-        </form>
-    </mat-expansion-panel>
+    </form>
+</ng-template>
 
-    <!-- Personal Note -->
-    <mat-expansion-panel>
-        <mat-expansion-panel-header>
-            <mat-panel-title>
-                <fa-icon icon='file-signature' [fixedWidth]="true"></fa-icon>
-                <span translate>Personal note</span>
-            </mat-panel-title>
-        </mat-expansion-panel-header>
-        TEST
-    </mat-expansion-panel>
+<ng-template #contentTemplate>
+    <form [formGroup]='contentForm' (ngSubmit)='saveMotion()'>
 
-    <!-- Content -->
-    <mat-expansion-panel #contentPanel [expanded]='true' class='content-panel'>
-        <mat-expansion-panel-header>
-            <mat-panel-title>
-                <fa-icon icon='align-left' [fixedWidth]="true"></fa-icon>
-                <span translate>Content</span>
-            </mat-panel-title>
-        </mat-expansion-panel-header>
-
-        <form [formGroup]='contentForm' class='expansion-panel-custom-body' (ngSubmit)='saveMotion()'>
-
-            <!-- Title -->
-            <div *ngIf="motion && motion.currentTitle || editMotion">
-                <div *ngIf='!editMotion'>
-                    <h2>{{motion.currentTitle}}</h2>
-                </div>
-                <mat-form-field *ngIf="editMotion" class='wide-text'>
-                    <input matInput placeholder='Title' formControlName='currentTitle' [value]='motionCopy.currentTitle'>
-                </mat-form-field>
+        <!-- Title -->
+        <div *ngIf="motion && motion.currentTitle || editMotion">
+            <div *ngIf='!editMotion'>
+                <h2>{{motion.currentTitle}}</h2>
             </div>
-
-            <!-- Text -->
-            <!-- TODO: this is a config variable. Read it out -->
-            <h3 translate>The assembly may decide:</h3>
-            <div *ngIf='motion && !editMotion'>
-                <div [innerHtml]='motion.currentText'></div>
-            </div>
-            <mat-form-field *ngIf="motion && editMotion" class='wide-text'>
-                <textarea matInput placeholder='Motion Text' formControlName='currentText' [value]='motionCopy.currentText'></textarea>
+            <mat-form-field *ngIf="editMotion" class="wide-form">
+                <input matInput placeholder='Title' formControlName='currentTitle' [value]='motionCopy.currentTitle'>
             </mat-form-field>
 
-            <!-- Reason -->
-            <div *ngIf="motion && motion.currentReason || editMotion">
-                <div *ngIf='!editMotion'>
-                    <h4 translate>Reason</h4>
-                    <div [innerHtml]='motion.currentReason'></div>
-                </div>
-                <mat-form-field *ngIf="editMotion" class='wide-text'>
-                    <textarea matInput placeholder="Reason" formControlName='currentReason' [value]='motionCopy.currentReason'></textarea>
-                </mat-form-field>
-            </div>
+        </div>
 
-        </form>
-    </mat-expansion-panel>
-</mat-accordion>
+        <!-- Text -->
+        <!-- TODO: this is a config variable. Read it out -->
+        <h3 translate>The assembly may decide:</h3>
+        <div *ngIf='motion && !editMotion'>
+            <div [innerHtml]='motion.currentText'></div>
+        </div>
+        <mat-form-field *ngIf="motion && editMotion" class="wide-form">
+            <textarea matInput placeholder='Motion Text' formControlName='currentText' [value]='motionCopy.currentText'></textarea>
+        </mat-form-field>
+
+
+        <!-- Reason -->
+        <div *ngIf="motion && motion.currentReason || editMotion">
+            <div *ngIf='!editMotion'>
+                <h4 translate>Reason</h4>
+                <div [innerHtml]='motion.currentReason'></div>
+            </div>
+            <mat-form-field *ngIf="editMotion" class="wide-form">
+                <textarea matInput placeholder="Reason" formControlName='currentReason' [value]='motionCopy.currentReason'></textarea>
+            </mat-form-field>
+        </div>
+
+    </form>
+</ng-template>
diff --git a/client/src/app/site/motions/motion-detail/motion-detail.component.scss b/client/src/app/site/motions/motion-detail/motion-detail.component.scss
index 4043eaee2..e54d18361 100644
--- a/client/src/app/site/motions/motion-detail/motion-detail.component.scss
+++ b/client/src/app/site/motions/motion-detail/motion-detail.component.scss
@@ -27,13 +27,7 @@ mat-panel-title {
     }
 }
 
-.meta-info-panel {
-    padding-top: 25px;
-
-    a:hover {
-        cursor: pointer;
-    }
-
+.meta-info-block {
     h3 {
         display: block;
         margin-top: 12px; //distance between heading and text
@@ -62,11 +56,21 @@ mat-panel-title {
     }
 }
 
-.wide-text {
-    width: 95%;
-
+.wide-form {
     textarea {
-        height: 200px;
+        height: 25vh;
+    }
+
+    ::ng-deep {
+        width: 100%;
+    }
+}
+
+.meta-info-panel {
+    padding-top: 25px;
+
+    a:hover {
+        cursor: pointer;
     }
 }
 
@@ -95,3 +99,61 @@ mat-expansion-panel {
         font-size: 100%;
     }
 }
+
+.desktop-view {
+    .desktop-left {
+        width: 30%;
+        float: left;
+
+        .meta-info-desktop {
+            padding: 40px 20px 10px 20px;
+        }
+
+        .personal-note {
+            mat-card {
+                padding: 0px;
+                margin: 20px;
+                min-width: 10hv;
+                min-width: 200px;
+
+                .mat-card-header-text {
+                    width: 100%;
+                }
+
+                mat-card-header {
+                    display: inherit;
+                    padding: 15px;
+                    margin: 0;
+                    background-color: #eee;
+
+                    .title-right {
+                        float: right;
+                        fa-icon {
+                            padding-left: 10px;
+                        }
+                    }
+
+                    mat-card-title {
+                        font-weight: bold;
+                        display: inline;
+                    }
+                }
+
+                mat-card-content {
+                    padding: 30px 15px 15px 15px;
+                }
+            }
+        }
+    }
+
+    .desktop-right {
+        display: grid;
+
+        min-width: 70%;
+
+        mat-card {
+            display: inline;
+            margin: 20px;
+        }
+    }
+}
diff --git a/client/src/app/site/motions/motion-detail/motion-detail.component.ts b/client/src/app/site/motions/motion-detail/motion-detail.component.ts
index c4ff3a259..4abc80dd8 100644
--- a/client/src/app/site/motions/motion-detail/motion-detail.component.ts
+++ b/client/src/app/site/motions/motion-detail/motion-detail.component.ts
@@ -1,11 +1,13 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { MatExpansionPanel } from '@angular/material';
+
 import { BaseComponent } from '../../../base.component';
 import { Motion } from '../../../shared/models/motions/motion';
 import { Category } from '../../../shared/models/motions/category';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { MatExpansionPanel } from '@angular/material';
 import { DataSendService } from '../../../core/services/data-send.service';
+import { ViewportService } from '../../../core/services/viewport.service';
 
 /**
  * Component for the motion detail view
@@ -59,11 +61,14 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
     /**
      * Constuct the detail view.
      *
-     *
+     * @param vp the viewport service
+     * @param router to navigate back to the motion list and to an existing motion
      * @param route determine if this is a new or an existing motion
      * @param formBuilder For reactive forms. Form Group and Form Control
+     * @param dataSend To send changes of the motion
      */
     public constructor(
+        public vp: ViewportService,
         private router: Router,
         private route: ActivatedRoute,
         private formBuilder: FormBuilder,
@@ -180,8 +185,11 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
             this.motionCopy = new Motion();
             this.motionCopy.patchValues(this.motion);
             this.patchForm(this.motionCopy);
-            this.metaInfoPanel.open();
-            this.contentPanel.open();
+
+            if (this.vp.isMobile) {
+                this.metaInfoPanel.open();
+                this.contentPanel.open();
+            }
         } else {
             this.saveMotion();
         }
diff --git a/client/src/app/site/motions/motion-list/motion-list.component.html b/client/src/app/site/motions/motion-list/motion-list.component.html
index 6e7cea8dd..abdbf21dd 100644
--- a/client/src/app/site/motions/motion-list/motion-list.component.html
+++ b/client/src/app/site/motions/motion-list/motion-list.component.html
@@ -1,24 +1,3 @@
-<!-- <mat-toolbar color='primary'>
-
-    <button class='generic-plus-button on-transition-fade' routerLink='new' mat-fab>
-        <fa-icon icon='plus'></fa-icon>
-    </button>
-
-    <span class='app-name on-transition-fade' translate>Motions</span>
-
-
-    <span class='spacer'></span>
-    <button class='on-transition-fade' mat-icon-button [matMenuTriggerFor]="motionExtraMenu">
-        <fa-icon icon='ellipsis-v'></fa-icon>
-    </button>
-    <mat-menu #motionExtraMenu="matMenu">
-
-        <button mat-menu-item translate><fa-icon icon='download'></fa-icon> Export As...</button>
-        <button mat-menu-item routerLink='category' translate>Categories</button>
-    </mat-menu>
-
-</mat-toolbar> -->
-
 <os-head-bar appName="Motions" plusButton=true (plusButtonClicked)=onPlusButton() [menuList]=motionMenuList (ellipsisMenuItem)=onEllipsisItem($event)>
 </os-head-bar>
 
@@ -71,4 +50,4 @@
     <mat-row (click)='selectMotion(row)' *matRowDef="let row; columns: columnsToDisplayMinWidth"></mat-row>
 </mat-table>
 
-<mat-paginator class="on-transition-fade" [pageSizeOptions]="[25, 50, 75, 100, 125]"></mat-paginator>
\ No newline at end of file
+<mat-paginator class="on-transition-fade" [pageSizeOptions]="[25, 50, 75, 100, 125]"></mat-paginator>