diff --git a/src/components/CscCall.vue b/src/components/CscCall.vue
index efcad0df..d5b4b3ce 100644
--- a/src/components/CscCall.vue
+++ b/src/components/CscCall.vue
@@ -351,7 +351,7 @@
     }
 
     .csc-call .q-card {
-        margin:0;
+        margin: 0;
     }
 
     .csc-call .q-card-main {
diff --git a/src/components/CscPage.vue b/src/components/CscPage.vue
index c48534f5..c0b6eaf7 100644
--- a/src/components/CscPage.vue
+++ b/src/components/CscPage.vue
@@ -47,8 +47,9 @@
 
     .page {
         position: relative;
-        padding: 60px;
+        padding: 30px;
         padding-top: 100px;
+        margin: 0px;
     }
 
     .page h2 {
@@ -60,8 +61,6 @@
 
     .page .page-title {
         padding: 30px;
-        padding-left: 60px;
-        padding-right: 60px;
         z-index: 1000;
         right: 0;
         background: -moz-linear-gradient(top, rgba(255,255,255,1) 44%, rgba(255,255,255,0.86) 71%, rgba(255,255,255,0) 100%);
@@ -80,9 +79,15 @@
 
     @media (max-width: $breakpoint-sm) {
         .page {
-            padding: 30px;
-            padding-top: 100px;
+            padding: 16px;
+            padding-top: 70px;
+            margin: 0px;
         }
+        .page .page-content {
+            margin: 0px;
+            padding: 0px;
+        }
+
         .page h2 {
             margin: 0px;
             font-size: 22px;
@@ -90,7 +95,7 @@
         }
 
         .page .page-title {
-            padding: 30px;
+            padding: 16px;
         }
     }
 
diff --git a/src/components/layouts/Default.vue b/src/components/layouts/Default.vue
index 7772618e..b9250b22 100644
--- a/src/components/layouts/Default.vue
+++ b/src/components/layouts/Default.vue
@@ -373,13 +373,13 @@
     }
 
     .q-card {
-        margin:15px;
+        margin: 15px;
         margin-left: 0px;
         margin-right: 0px;
     }
 
     .q-card.page {
-        padding: 15px;
+        padding: 0px;
         margin: 0;
     }
 
diff --git a/src/components/pages/CallForward/CscAddDestinationForm.vue b/src/components/pages/CallForward/CscAddDestinationForm.vue
index e24f14bb..e844e486 100644
--- a/src/components/pages/CallForward/CscAddDestinationForm.vue
+++ b/src/components/pages/CallForward/CscAddDestinationForm.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="add-destination-form">
-        <q-btn v-if="!isFormEnabled" flat color="primary" icon="fa-plus">
+        <q-btn v-if="!isFormEnabled" flat color="primary" icon="fa-plus" class="add-destination-button">
             {{ $t('pages.callForward.addDestinationButton') }}
             <q-popover ref="popover">
                 <q-list separator link>
@@ -151,8 +151,12 @@
     @import '../../../themes/quasar.variables.styl'
 
     .add-destination-form
-        margin 0 15px
+        margin 0
         .q-slider.label-always
             padding 15px 0 5px
             height 50px
+
+    .add-destination-button
+        padding-left 0px
+        padding-right 0px
 </style>
diff --git a/src/components/pages/CallForward/CscAddTimeForm.vue b/src/components/pages/CallForward/CscAddTimeForm.vue
index d2e9f036..3106ca2f 100644
--- a/src/components/pages/CallForward/CscAddTimeForm.vue
+++ b/src/components/pages/CallForward/CscAddTimeForm.vue
@@ -1,44 +1,41 @@
 <template>
-    <div class="add-times">
-        <div class="title" v-if="typeIsNew">
-            {{ title }}
-        </div>
-        <div class="row no-wrap">
-            <q-field class="col-8">
-                <q-select v-model="selectedWeekday"
+    <q-item class="csc-add-time-form">
+        <q-item-main>
+            <q-item-tile class="row no-wrap">
+                <q-select
+                    class="col" 
+                    v-model="selectedWeekday"
                     :options="selectOptions" />
-            </q-field>
-            <q-field class="col-2">
-                    <q-datetime
-                        color="primary"
-                        v-model="timeFromConverted"
-                        align="right"
-                        type="time"
-                        format24h />
-            </q-field>
-            <q-field class="col-2"
-                :error="timeHasError"
-                :error-label="$t('pages.callForward.times.selectValidTime')">
-                    <q-datetime
-                        color="primary"
-                        v-model="timeToConverted"
-                        align="right"
-                        type="time"
-                        format24h />
-            </q-field>
-        </div>
-        <q-btn flat dark @click="disableForm()">
-            {{ $t('buttons.cancel') }}
-        </q-btn>
-        <q-btn flat color="primary" icon-right="fa-save" @click="addTime()">
-            {{ $t('buttons.save') }}
-        </q-btn>
-    </div>
+                <q-datetime
+                    class="col"
+                    color="primary"
+                    v-model="timeFromConverted"
+                    align="right"
+                    type="time"
+                    format24h />
+                <q-datetime
+                    class="col"
+                    color="primary"
+                    v-model="timeToConverted"
+                    align="right"
+                    type="time"
+                    format24h />
+            </q-item-tile>
+            <q-item-tile>
+                <q-btn flat dark @click="disableForm()">
+                    {{ $t('buttons.cancel') }}
+                </q-btn>
+                <q-btn flat color="primary" icon-right="fa-save" @click="addTime()">
+                    {{ $t('buttons.save') }}
+                </q-btn>
+            </q-item-tile>
+        </q-item-main>
+    </q-item>
 </template>
 
 <script>
     import { mapState } from 'vuex'
-    import { QField, QSelect, QDatetime, QCardTitle,
+    import { QField, QSelect, QDatetime, QList, QItem, QItemMain, QItemTile,
         QBtn, date } from 'quasar-framework'
     import { showGlobalError } from '../../../helpers/ui'
     export default {
@@ -68,7 +65,10 @@
             QField,
             QSelect,
             QDatetime,
-            QCardTitle,
+            QList, 
+            QItem, 
+            QItemMain, 
+            QItemTile,
             QBtn,
             date
         },
@@ -147,12 +147,35 @@
 <style lang="stylus" rel="stylesheet/stylus">
     @import '../../../themes/quasar.variables.styl'
 
+    .csc-add-time-form
+        padding 0
+        width calc(100% - 56px)
+
+    @media only screen and (min-width: 320px) {
+        .csc-add-time-form {
+            width calc(100% - 43px)
+        }
+    }
+
+    @media only screen and (min-width: 360px) {
+        .csc-add-time-form {
+            width calc(100% - 50.09px)
+        }
+    }
+
+    @media only screen and (min-width: 411px) {
+        .csc-add-time-form {
+            width calc(100% - 56px)
+        }
+    }
+
     .add-times
-        margin-right 30px
+        width 100%
 
         .title
             color $primary
             line-height $csc-subtitle-line-height
             font-size $csc-subtitle-font-size
             font-weight $csc-subtitle-font-weight
+  
 </style>
diff --git a/src/components/pages/CallForward/CscCallForwardDestinations.vue b/src/components/pages/CallForward/CscCallForwardDestinations.vue
index 1ee4d95e..0db05824 100644
--- a/src/components/pages/CallForward/CscCallForwardDestinations.vue
+++ b/src/components/pages/CallForward/CscCallForwardDestinations.vue
@@ -1,21 +1,21 @@
 <template>
-    <q-card class="dest-card">
+    <div class="dest-card">
         <csc-destinations :title="$t('pages.callForward.whenOnline')"
             :group="destinations.online"
             group-name="cfu"
             :timeset="timeset"
-            icon="signal_wifi_4_bar" />
+            icon="smartphone" />
         <csc-destinations :title="$t('pages.callForward.whenBusy')"
             :group="destinations.busy"
             group-name="cfb"
             :timeset="timeset"
-            icon="record_voice_over" />
+            icon="phonelink_ring" />
         <csc-destinations :title="$t('pages.callForward.whenOffline')"
             :group="destinations.offline"
             group-name="cfna"
             :timeset="timeset"
-            icon="signal_wifi_off" />
-    </q-card>
+            icon="phonelink_erase" />
+    </div>
 </template>
 
 <script>
@@ -144,4 +144,8 @@
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
+
+    .dest-card
+        max-width 100%
+        margin auto
 </style>
diff --git a/src/components/pages/CallForward/CscCallForwardTime.vue b/src/components/pages/CallForward/CscCallForwardTime.vue
index d0028882..f8d80ab4 100644
--- a/src/components/pages/CallForward/CscCallForwardTime.vue
+++ b/src/components/pages/CallForward/CscCallForwardTime.vue
@@ -1,38 +1,42 @@
 <template>
-    <q-field>
-        <div class="row no-wrap">
-            <q-input class="col-7"
-                v-model="weekday"
-                readonly />
-            <q-datetime
-                class="col-2"
-                color="primary"
-                v-model="from"
-                align="right"
-                type="time"
-                format24h
-                readonly />
-            <q-datetime
-                class="col-2"
-                color="primary"
-                v-model="to"
-                align="right"
-                type="time"
-                format24h
-                readonly />
+    <q-item>
+        <q-item-main>
+            <q-item-tile class="row no-wrap">
+                <q-input 
+                    class="col"
+                    v-model="weekday"
+                    readonly />
+                <q-datetime
+                    class="col"
+                    color="primary"
+                    v-model="from"
+                    align="right"
+                    type="time"
+                    format24h
+                    readonly />
+                <q-datetime
+                    class="col"
+                    color="primary"
+                    v-model="to"
+                    align="right"
+                    type="time"
+                    format24h
+                    readonly />
+            </q-item-tile>
+        </q-item-main>
+        <q-item-side>
             <q-btn flat
-                class="col-1"
                 color="negative"
                 icon="delete"
                 @click="deleteTime(index)">
             </q-btn>
-        </div>
-    </q-field>
+        </q-item-side>
+    </q-item>
 </template>
 
 <script>
     import { QField, QInput, QDatetime, Dialog,
-        QBtn, Alert, date } from 'quasar-framework'
+        QBtn, QItem, QItemMain, QItemTile, QItemSide, Alert, date } from 'quasar-framework'
     import { mapGetters } from 'vuex'
     import 'quasar-extras/animate/bounceInRight.css'
     import 'quasar-extras/animate/bounceOutRight.css'
@@ -51,7 +55,11 @@
             QInput,
             QDatetime,
             Dialog,
-            QBtn
+            QBtn,
+            QItem,
+            QItemMain, 
+            QItemTile, 
+            QItemSide
         },
         computed: {
             ...mapGetters('callForward', {
@@ -124,4 +132,10 @@
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
+
+    div.q-item-side.q-item-side-left.q-item-section
+        margin-left 0
+
+    i.q-icon.material-icons.on-left
+        margin-right 0
 </style>
diff --git a/src/components/pages/CallForward/CscCallForwardTimes.vue b/src/components/pages/CallForward/CscCallForwardTimes.vue
index 53e84164..435ab797 100644
--- a/src/components/pages/CallForward/CscCallForwardTimes.vue
+++ b/src/components/pages/CallForward/CscCallForwardTimes.vue
@@ -1,32 +1,25 @@
 <template>
-    <q-card class="times-card" flat>
-        <q-card-title class="times-title">
-            Times
-        </q-card-title>
-        <q-card-main>
-            <csc-call-forward-time v-if="times.length > 0" v-for="(time, index) in times"
-                :time="time" :index="index" />
-            <csc-add-time-form v-if="activeTimeForm" type="existing" :title="$t('pages.callForward.times.addCompanyHours')" :timesetName="timesetName" ref="addFormExisting" />
-        </q-card-main>
-        <q-card-actions v-if="!activeTimeForm">
-            <q-field>
-                <q-btn color="primary"
-                    class="add-time"
-                    icon="fa-plus" flat
-                    @click="enableAddForm()">
-                        {{ $t('pages.callForward.times.addTimeButton') }}
-                </q-btn>
-            </q-field>
-        </q-card-actions>
-    </q-card>
+    <div class="times-card" flat>
+        <q-list no-border>
+            <csc-call-forward-time class="csc-call-forward-times" v-if="times.length > 0" v-for="(time, index) in times"
+                :key="index" :time="time" :index="index" />
+        </q-list>
+        <csc-add-time-form v-if="activeTimeForm" type="existing" :title="$t('pages.callForward.times.addCompanyHours')" timeset="Company Hours" ref="addFormExisting" />
+        <q-btn v-else
+            color="primary"
+            class="add-time"
+            icon="fa-plus" flat
+            @click="enableAddForm()">
+                {{ $t('pages.callForward.times.addTimeButton') }}
+        </q-btn>
+    </div>
 </template>
 
 <script>
     import { mapState } from 'vuex'
     import CscCallForwardTime from './CscCallForwardTime'
     import CscAddTimeForm from './CscAddTimeForm'
-    import { QCard, QCardTitle, QCardMain, QCardActions,
-        QField, QBtn } from 'quasar-framework'
+    import { QField, QBtn, QList } from 'quasar-framework'
     export default {
         name: 'csc-call-forward-times',
         props: [
@@ -41,12 +34,9 @@
         components: {
             CscCallForwardTime,
             CscAddTimeForm,
-            QCard,
-            QCardTitle,
-            QCardMain,
-            QCardActions,
             QField,
-            QBtn
+            QBtn,
+            QList
         },
         computed: {
             ...mapState('callForward', [
@@ -67,6 +57,16 @@
 <style lang="stylus" rel="stylesheet/stylus">
     @import '../../../themes/quasar.variables.styl'
 
-    .times-title
-        color $primary
+    .csc-call-forward-times
+        padding 0
+
+    .times-card
+        max-width 100%
+        margin auto
+        margin-bottom 30px
+
+    .add-time
+        margin-top 0
+        padding-left 0
+        padding-right 0
 </style>
diff --git a/src/components/pages/CallForward/CscDestination.vue b/src/components/pages/CallForward/CscDestination.vue
index 81c86539..583ba1e3 100644
--- a/src/components/pages/CallForward/CscDestination.vue
+++ b/src/components/pages/CallForward/CscDestination.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
-        <q-item v-for="(destination, index) in destinations">
+        <q-item class="csc-destination" :key="index" v-for="(destination, index) in destinations">
             <q-item-main>
-                <div class="dest-row" :class="{ terminated: destination.terminated}">
+                <div class="dest-row" :class="{ terminated: destination.terminated }">
                     <span v-if="index == 0">
                         {{ $t('pages.callForward.firstRing') }}
                     </span>
@@ -28,27 +28,23 @@
                     </q-tooltip>
                 </div>
             </q-item-main>
-            <q-item-side class="dest-btns" right>
-                <span v-if="destinations.length > 1">
-                    <q-btn flat
-                        :class="{btnhidden: hasNoDownOption(index)}"
-                        color="secondary"
-                        icon="keyboard_arrow_down"
-                        @click="moveDestination('down', index)">
-                    </q-btn>
-                    <q-btn flat
-                        :class="{btnhidden: hasNoUpOption(index)}"
-                        color="secondary"
-                        icon="keyboard_arrow_up"
-                        @click="moveDestination('up', index)">
-                    </q-btn>
-                </span>
-                <q-btn flat
-                    color="negative"
-                    icon="delete"
-                    @click="deleteDestination(index)">
-                        {{ $t('buttons.remove') }}
-                </q-btn>
+            <q-item-side class="dest-btns" icon="more_vert" right>
+                <q-popover ref="popover">
+                    <q-list separator link>
+                        <q-item v-if="destinations.length > 1 && !hasNoUpOption(index)" @click="moveDestination('up', index), $refs.popover[index].close()">
+                            <q-item-main :label="$t('buttons.moveUp')" />
+                            <q-item-side icon="keyboard_arrow_up" color="secondary"></q-item-side>
+                        </q-item>
+                        <q-item v-if="destinations.length > 1 && !hasNoDownOption(index)" @click="moveDestination('down', index), $refs.popover[index].close()">
+                            <q-item-main :label="$t('buttons.moveDown')" />
+                            <q-item-side icon="keyboard_arrow_down" color="secondary"></q-item-side>
+                        </q-item>
+                        <q-item @click="deleteDestination(index), $refs.popover[index].close()">
+                            <q-item-main :label="$t('buttons.remove')" />
+                            <q-item-side icon="delete" color="negative"></q-item-side>
+                        </q-item>
+                    </q-list>
+                </q-popover>
             </q-item-side>
         </q-item>
     </div>
@@ -61,7 +57,7 @@
     import { startLoading, stopLoading,
         showGlobalError } from '../../../helpers/ui'
     import { QItem, QItemMain, QItemSide,
-        Dialog, QBtn, QTooltip } from 'quasar-framework'
+        Dialog, QBtn, QTooltip, QPopover, QList } from 'quasar-framework'
     export default {
         name: 'csc-destination',
         props: [
@@ -76,7 +72,9 @@
             QItemSide,
             Dialog,
             QBtn,
-            QTooltip
+            QTooltip,
+            QPopover,
+            QList
         },
         computed: {
             ...mapState('callForward', [
@@ -160,7 +158,15 @@
 <style lang="stylus" rel="stylesheet/stylus">
     @import '../../../themes/quasar.variables.styl'
 
+
+    .q-item.csc-destination
+        padding 0px
+
     .dest-row
+        color $secondary
+        white-space nowrap
+        overflow hidden
+        font-size 16px
         .dest-values
             font-weight 500
 
@@ -169,6 +175,8 @@
 
     .dest-btns
         display inline-block
+        position absolute
+        right 0px
 
     .btnhidden
         opacity 0
diff --git a/src/components/pages/CallForward/CscDestinations.vue b/src/components/pages/CallForward/CscDestinations.vue
index b35c7b3a..3269b87d 100644
--- a/src/components/pages/CallForward/CscDestinations.vue
+++ b/src/components/pages/CallForward/CscDestinations.vue
@@ -1,19 +1,15 @@
 <template>
     <div class="dest-section">
-        <q-card-title class="dest-title">
+        <div class="dest-title">
             <q-icon :name="icon" class="dest-icon" />
             {{ title }}
-        </q-card-title>
-        <q-card-main>
+        </div>
+        <div>
             <q-list no-border>
-                <div v-if="group.length === 0">
-                    <q-item>
-                        <div class="dest-row">
-                            <span> {{ $t('pages.callForward.forwardToNowhere') }} </span>
-                        </div>
-                    </q-item>
-                </div>
-                <div v-else v-for="(destinationset, index) in group">
+                <q-item v-if="group.length === 0" class="dest-row csc-no-destination">
+                    <span> {{ $t('pages.callForward.forwardToNowhere') }} </span>
+                </q-item>
+                <div v-else :key="index" v-for="(destinationset, index) in group">
                     <csc-destination v-bind="destinationset"
                         :prev-dest-id="previousDestinationsetId(index)"
                         :next-dest-id="nextDestinationsetId(index)"
@@ -21,7 +17,7 @@
                 </div>
             </q-list>
             <csc-add-destination-form v-bind="lastDestinationset" />
-        </q-card-main>
+        </div>
     </div>
 </template>
 
@@ -29,8 +25,7 @@
     import _ from 'lodash'
     import CscDestination from './CscDestination'
     import CscAddDestinationForm from './CscAddDestinationForm'
-    import { QCardTitle, QCardMain, QCardSeparator,
-        QItem, QList, QIcon } from 'quasar-framework'
+    import {  QList, QItem, QIcon } from 'quasar-framework'
     export default {
         name: 'csc-destinations',
         props: [
@@ -41,11 +36,8 @@
             'timeset'
         ],
         components: {
-            QCardTitle,
-            QCardMain,
             QList,
             QItem,
-            QCardSeparator,
             QIcon,
             CscDestination,
             CscAddDestinationForm
@@ -76,21 +68,17 @@
     @import '../../../themes/quasar.variables.styl'
 
     .dest-section
-        .dest-title
-            padding 0 15px
-        .dest-title:first-child
-            padding 20px 15px 0 15px
-        .q-item
-            padding 0 15px
-        .q-list
-            margin-bottom 0
-
-    .dest-row
-        inline-block
+        padding-top 30px
+        padding-bottom 30px
 
     .dest-title
-        color $primary
+        color $secondary
+        font-size 16px
 
     .dest-icon
         margin-right 5px
+
+    .q-item.csc-no-destination
+        margin-left 0px
+        padding 0
 </style>
diff --git a/src/locales/en.json b/src/locales/en.json
index bfc18960..952ccd98 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -10,7 +10,9 @@
         "save": "Save",
         "remove": "Remove",
         "edit": "Edit",
-        "add": "Add"
+        "add": "Add",
+        "moveUp": "Move up",
+        "moveDown": "Move down"
     },
     "toasts": {
         "callAvailable": "You are now able to start and receive calls",