diff --git a/client/src/app/site/motions/components/motion-detail/motion-detail.component.html b/client/src/app/site/motions/components/motion-detail/motion-detail.component.html
index 3cc37d37c..73fc3c193 100644
--- a/client/src/app/site/motions/components/motion-detail/motion-detail.component.html
+++ b/client/src/app/site/motions/components/motion-detail/motion-detail.component.html
@@ -174,18 +174,14 @@
         </div>
 
         <!-- State -->
-        <div *ngIf='!newMotion && motion && motion.workflow && motion.state || 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>
+        <div *ngIf='motion && motion.state'>
+            <mat-form-field *ngIf="!editMotion && !newMotion">
+                <mat-select placeholder='State' formControlName='state_id' (selectionChange)="onChangeState($event)">
+                    <mat-option [value]="motion.state_id">{{motion.state}}</mat-option>
                     <mat-divider></mat-divider>
-                    <mat-option *ngFor="let state of motionCopy.nextStates" [value]="state.id">{{state}}</mat-option>
+                    <mat-option *ngFor="let state of motion.nextStates" [value]="state.id">{{state}}</mat-option>
                     <mat-divider></mat-divider>
-                    <mat-option>
+                    <mat-option [value]="null">
                         <mat-icon>replay</mat-icon><span translate>Reset State</span>
                     </mat-option>
                 </mat-select>
@@ -194,21 +190,10 @@
 
         <!-- Recommendation -->
         <!-- The suggestion of the work group weather or not a motion should be accepted -->
-        <div *ngIf='motion && motion.recommender && (motion.recommendation_id || editMotion)'>
-            <div *ngIf='!editMotion'>
-                <h3>{{motion.recommender}}</h3>
-                {{motion.recommendation}}
-            </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>
-                        <mat-icon>replay</mat-icon>
-                        <span translate>Reset recommendation</span>
-                    </mat-option>
+        <div *ngIf='motion && motion.state && recommender'>
+            <mat-form-field *ngIf="!editMotion && !newMotion">
+                <mat-select [placeholder]=recommender formControlName='recommendation_id' (selectionChange)="onChangerRecommenderState($event)">
+                    <mat-option *ngFor="let state of motion.possibleRecommendations" [value]="state.id">{{state}}</mat-option>
                 </mat-select>
             </mat-form-field>
         </div>
diff --git a/client/src/app/site/motions/components/motion-detail/motion-detail.component.ts b/client/src/app/site/motions/components/motion-detail/motion-detail.component.ts
index 6fcd7a2a3..56890c265 100644
--- a/client/src/app/site/motions/components/motion-detail/motion-detail.component.ts
+++ b/client/src/app/site/motions/components/motion-detail/motion-detail.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MatDialog, MatExpansionPanel } from '@angular/material';
+import { MatDialog, MatExpansionPanel, MatSelectChange } from '@angular/material';
 
 import { BaseComponent } from '../../../../base.component';
 import { Category } from '../../../../shared/models/motions/category';
@@ -123,6 +123,11 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
      */
     public scrollToChange: ViewUnifiedChange = null;
 
+    /**
+     * Custom recommender as set in the settings
+     */
+    public recommender: string;
+
     /**
      * Constuct the detail view.
      *
@@ -204,7 +209,10 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
             // load existing motion
             this.route.params.subscribe(params => {
                 this.repo.getViewModelObservable(params.id).subscribe(newViewMotion => {
-                    this.motion = newViewMotion;
+                    if (newViewMotion) {
+                        this.motion = newViewMotion;
+                        this.patchForm(this.motion);
+                    }
                 });
                 this.changeRecoRepo
                     .getChangeRecosOfMotionObservable(parseInt(params.id, 10))
@@ -452,6 +460,31 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
         }
     }
 
+    /**
+     * Executed after selecting a state
+     * @param selection MatSelectChange that contains the workflow id
+     */
+    public onChangeState(selection: MatSelectChange): void {
+        this.repo.setState(this.motion, selection.value);
+    }
+
+    /**
+     * Executed after selecting the recommenders state
+     * @param selection MatSelectChange that contains the workflow id
+     */
+    public onChangerRecommenderState(selection: MatSelectChange): void {
+        this.repo.setRecommenderState(this.motion, selection.value);
+    }
+
+    /**
+     * Observes the repository for changes in the motion recommender
+     */
+    public getRecommender(): void {
+        this.repo.getRecommenderObservable().subscribe(newRecommender => {
+            this.recommender = newRecommender;
+        });
+    }
+
     /**
      * Determine if the user has the correct requirements to alter the motion
      */
@@ -461,8 +494,10 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
 
     /**
      * Init.
+     * Calls getRecommender and sets the surrounding motions to navigate back and forth
      */
     public ngOnInit(): void {
+        this.getRecommender();
         this.repo.getViewModelListObservable().subscribe(newMotionList => {
             if (newMotionList) {
                 this.allMotions = newMotionList;
diff --git a/client/src/app/site/motions/models/view-motion.ts b/client/src/app/site/motions/models/view-motion.ts
index 8a49d6e7c..f137c0a51 100644
--- a/client/src/app/site/motions/models/view-motion.ts
+++ b/client/src/app/site/motions/models/view-motion.ts
@@ -124,21 +124,14 @@ export class ViewMotion extends BaseViewModel {
         return this.motion && this.motion.recommendation_id ? this.motion.recommendation_id : null;
     }
 
-    /**
-     * FIXME:
-     * name of recommender exist in a config
-     * previously solved using `this.DS.filter<Config>(Config)`
-     * and checking: motionsRecommendationsByConfig.value
-     *
-     */
-    public get recommender(): string {
-        return null;
-    }
-
     public get recommendation(): WorkflowState {
         return this.recommendation_id && this.workflow ? this.workflow.getStateById(this.recommendation_id) : null;
     }
 
+    public get possibleRecommendations(): WorkflowState[] {
+        return this.recommendation && this.workflow ? this.workflow.states : null;
+    }
+
     public get origin(): string {
         return this.motion ? this.motion.origin : null;
     }
diff --git a/client/src/app/site/motions/services/motion-repository.service.ts b/client/src/app/site/motions/services/motion-repository.service.ts
index 45dba692d..28b0d43d3 100644
--- a/client/src/app/site/motions/services/motion-repository.service.ts
+++ b/client/src/app/site/motions/services/motion-repository.service.ts
@@ -16,6 +16,9 @@ import { MotionChangeReco } from '../../../shared/models/motions/motion-change-r
 import { ViewUnifiedChange } from '../models/view-unified-change';
 import { Identifiable } from '../../../shared/models/base/identifiable';
 import { CollectionStringModelMapperService } from '../../../core/services/collectionStringModelMapper.service';
+import { HttpService } from 'app/core/services/http.service';
+import { ConfigService } from 'app/core/services/config.service';
+import { Observable } from 'rxjs';
 
 /**
  * Repository Services for motions (and potentially categories)
@@ -45,6 +48,8 @@ export class MotionRepositoryService extends BaseRepository<ViewMotion, Motion>
         DS: DataStoreService,
         mapperService: CollectionStringModelMapperService,
         private dataSend: DataSendService,
+        private httpService: HttpService,
+        private configService: ConfigService,
         private readonly lineNumbering: LinenumberingService,
         private readonly diff: DiffService
     ) {
@@ -113,6 +118,37 @@ export class MotionRepositoryService extends BaseRepository<ViewMotion, Motion>
         await this.dataSend.deleteModel(viewMotion.motion);
     }
 
+    /**
+     * Set the state of a motion
+     *
+     * @param viewMotion target motion
+     * @param stateId the number that indicates the state
+     */
+    public async setState(viewMotion: ViewMotion, stateId: number): Promise<void> {
+        const restPath = `/rest/motions/motion/${viewMotion.id}/set_state/`;
+        await this.httpService.put(restPath, { state: stateId });
+    }
+
+    /**
+     * Set the recommenders state of a motion
+     *
+     * @param viewMotion target motion
+     * @param stateId the number that indicates the state
+     */
+    public async setRecommenderState(viewMotion: ViewMotion, stateId: number): Promise<void> {
+        const restPath = `/rest/motions/motion/${viewMotion.id}/set_recommendation/`;
+        await this.httpService.put(restPath, { recommendation: stateId });
+    }
+
+    /**
+     * Returns the motions_recommendations_by observable from the config service
+     *
+     * @return an observable that contains the motions "Recommended by" string
+     */
+    public getRecommenderObservable(): Observable<string> {
+        return this.configService.get('motions_recommendations_by');
+    }
+
     /**
      * Format the motion text using the line numbering and change
      * reco algorithm.