diff --git a/src/components/dao/settings-communication.vue b/src/components/dao/settings-communication.vue
index 7a4646d1c..0f1e4df5e 100644
--- a/src/components/dao/settings-communication.vue
+++ b/src/components/dao/settings-communication.vue
@@ -40,23 +40,25 @@ export default {
 
     template(v-for="(announcement, index) in form.announcements")
       .row.q-mt-sm
-        .col
-          label.h-label Title
-          q-input.q-my-sm.rounded-border(
-            :debounce="200"
-            :disable="!isAdmin"
-            :ref="'announcement.' + index + '.content'"
-            bg-color="white"
-            color="accent"
-            dense
-            lazy-rules
-            outlined
-            placeholder="Enter your message here"
-            rounded
-            v-model="announcement.title"
-          )
-        .col-auto.q-pt-xxl
-          q-toggle(v-model="announcement.enabled" color="secondary" :disable="!isAdmin" @input="(value) => toggleOff('announcements',index, value)")
+        .row.full-width.items-end
+          .col
+            label.h-label Title
+          .col-auto
+            q-toggle(v-model="announcement.enabled" color="secondary" :disable="!isAdmin" @input="(value) => toggleOff('announcements',index, value)")
+          .col-12
+            q-input.q-my-sm.rounded-border(
+              :debounce="200"
+              :disable="!isAdmin"
+              :ref="'announcement.' + index + '.content'"
+              bg-color="white"
+              color="accent"
+              dense
+              lazy-rules
+              outlined
+              placeholder="Enter your message here"
+              rounded
+              v-model="announcement.title"
+            )
         .full-width
             label.h-label Message
             q-field.full-width.q-my-sm.rounded-border(
@@ -84,47 +86,48 @@ export default {
     p.text-sm.text-h-gray.leading-loose.q-mt-md Only for Hypha - Post an alert across all DAOs to let users know about an important update.
 
     template(v-for="(alert, index) in form.alerts")
-      .row.ju.q-mt-sm
-        label.h-label Alert {{ index + 1 }}
-        .row.items-end.full-width.q-my-sm
-          .col-auto
-            q-btn(unelevated padding="0")
-              q-avatar(size="40px" :color="alert.level")
-              q-icon.q-mx-xs(name='fas fa-chevron-down' size='12px')
-              q-menu
-                q-list(style='min-width: 140px')
-                  q-item(clickable v-close-popup @click="alert.level = 'positive'").q-px-sm
-                    q-item-section
-                      q-avatar(size="20px" color="positive")
-                    q-item-section Positive
-
-                  q-item(clickable v-close-popup @click="alert.level = 'negative'").q-px-sm
-                    q-item-section
-                      q-avatar(size="20px" color="negative")
-                    q-item-section Negative
-
-                  q-item(clickable v-close-popup @click="alert.level = 'warning'").q-px-sm
-                    q-item-section
-                      q-avatar(size="20px" color="warning")
-                    q-item-section Warning
+      .row.ju.q-mt-md.items-end
+        .col
+          label.h-label Alert {{ index + 1 }}
+        .col-auto
+          q-toggle(v-model="alert.enabled" color="secondary" :disable="!isAdmin" @input="(value) => toggleOff('alerts',index, value)")
+      .row.items-end.full-width.q-my-sm
+        .col-auto
+          q-btn(unelevated padding="0")
+            q-avatar(size="40px" :color="alert.level")
+            q-icon.q-mx-xs(name='fas fa-chevron-down' size='12px')
+            q-menu
+              q-list(style='min-width: 140px')
+                q-item(clickable v-close-popup @click="alert.level = 'positive'").q-px-sm
+                  q-item-section
+                    q-avatar(size="20px" color="positive")
+                  q-item-section Positive
+
+                q-item(clickable v-close-popup @click="alert.level = 'negative'").q-px-sm
+                  q-item-section
+                    q-avatar(size="20px" color="negative")
+                  q-item-section Negative
+
+                q-item(clickable v-close-popup @click="alert.level = 'warning'").q-px-sm
+                  q-item-section
+                    q-avatar(size="20px" color="warning")
+                  q-item-section Warning
 
-          .col
-            q-input.rounded-border(
-              :debounce="200"
-              :disable="!isAdmin"
-              :ref="'alert.' + index + '.content'"
-              bg-color="white"
-              color="accent"
-              dense
-              lazy-rules
-              maxlength="200"
-              outlined
-              placeholder="Enter your message here"
-              rounded
-              v-model="alert.content"
-            )
-          .col-auto
-            q-toggle(v-model="alert.enabled" color="secondary" :disable="!isAdmin" @input="(value) => toggleOff('alerts',index, value)")
+        .col
+          q-input.rounded-border(
+            :debounce="200"
+            :disable="!isAdmin"
+            :ref="'alert.' + index + '.content'"
+            bg-color="white"
+            color="accent"
+            dense
+            lazy-rules
+            maxlength="200"
+            outlined
+            placeholder="Enter your message here"
+            rounded
+            v-model="alert.content"
+          )
 
       nav.row.full-width.justify-end
         q-btn(:disable="form.alerts.length === 1 || !isAdmin" flat color="primary" no-caps padding="none" @click="form.alerts.splice(index, 1)").text-bold.q-pa-none.q-mr-xs Remove notification -
diff --git a/src/components/dao/settings-design.vue b/src/components/dao/settings-design.vue
index 01d90198e..d6dd27209 100644
--- a/src/components/dao/settings-design.vue
+++ b/src/components/dao/settings-design.vue
@@ -351,11 +351,11 @@ ${backgroundImage
             q-tab(name="BANNERS" label="Banners" :ripple="false")
 
         div(v-if="tab==='GENERAL'").row.justify-between.full-width.q-mt-xl
-            .row.justify-center.items-center.full-width.q-my-xl
+            .row.justify-center.items-center.full-width.q-my-xl(v-if="$q.screen.gt.sm")
                 .col-8
                     img(:src='previewGeneralmage')
 
-            .col-3
+            .col-12.col-md-3
                 .full-width.h-asset.items-start.q-mt-xl.text-center
                     .row.full-width(:style="{'height':'110px'}")
                         .col-6.row.justify-center.items-center(:style="{'background-color': form.primaryColor}")
@@ -435,7 +435,7 @@ ${backgroundImage
                             )
                     q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings
 
-            .col-3
+            .col-12.col-md-3
                 .full-width.h-asset.items-start.q-mt-xl.text-center(:style="{'height':'110px'}")
                     q-avatar(size="110px" font-size="24px" color="primary" text-color="white")
                         img(v-show="form.logo" :src="ipfsy(form.logo)")
@@ -512,7 +512,7 @@ ${backgroundImage
                             )
                     q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings
 
-            .col-3
+            .col-12.col-md-3
                 .full-width.h-asset.items-start.q-mt-xl.text-center(:style="{'height':'110px'}")
                     div.full-width.full-height.rounded-border(:style="{'background': `${form.primaryColor} url('${form.patternBase64}')`, 'background-size': '200px' }")
 
@@ -611,7 +611,36 @@ ${backgroundImage
             .full-width.items-start.q-my-xl
                 template(v-for="(banner, index) in banners")
                     label.h-label {{banner.label}}
+                    .q-mt-sm.row(v-if="!$q.screen.gt.sm")
+                        q-btn.q-mr-xs(
+                            @click="form[banner.image] = null"
+                            color="internal-bg"
+                            icon="fas fa-trash"
+                            padding="12px"
+                            rounded
+                            size="sm"
+                            text-color="primary"
+                            unelevated
+                        )
+                        q-btn.col.q-px-xl.rounded-border.text-bold(
+                            :disable="!isAdmin || banners[index].state === 'UPLOADING'"
+                            @click="$refs.bannerImages[index].chooseFile()"
+                            color="internal-bg"
+                            :label="banners[index].state === 'UPLOADING' ? '...Uploading...' : 'Upload an image (max 3MB)'"
+                            no-caps
+                            rounded
+                            text-color="primary"
+                            unelevated
+                        )
+                        input-file-ipfs(
+                            @uploading="banners[index].state = 'UPLOADING'"
+                            @uploadedFile="form[banner.image] = arguments[0]; banners[index].state = 'FINISHED'"
+                            image
+                            ref="bannerImages"
+                            v-show="false"
+                        )
                     base-banner.q-mt-sm(
+                        :compact="!$q.screen.gt.sm"
                         :title="form[banner.title]"
                         :description="form[banner.paragraph]"
                         :background="ipfsy(form[banner.image])"
@@ -619,7 +648,7 @@ ${backgroundImage
                         :color="form.primaryColor"
                     )
                         template(#top-right)
-                            .q-pa-xl.row
+                            .q-pa-xl.row(v-if="$q.screen.gt.sm")
                                 q-btn.q-mr-xs(
                                     @click="form[banner.image] = null"
                                     color="white"
@@ -668,9 +697,9 @@ ${backgroundImage
                             //-             primary
                             //-         )
 
-                    .row.full-width.justify-between.q-mt-sm
-                        .col-3.q-pr-sm
-                            label.h-label Title
+                    .row.full-width.justify-between(:class="{'q-mt-sm': $q.screen.gt.sm, 'q-mb-xl': !$q.screen.gt.sm}")
+                        .col-12.col-md-3(:class="{'q-pr-sm': $q.screen.gt.sm}")
+                            label.h-label(v-if="$q.screen.gt.sm") Title
                             q-input.q-my-sm.rounded-border(
                                 :debounce="200"
                                 :disable="!isAdmin"
@@ -686,9 +715,10 @@ ${backgroundImage
                                 v-model='form[banner.title]'
                             )
                             q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings
-                        .col-9.q-pl-sm
-                            label.h-label Short paragraph
-                            q-input.q-my-sm.rounded-border(
+                        .col-12.col-md-9(:class="{'q-pl-sm': $q.screen.gt.sm}")
+                            label.h-label(v-if="$q.screen.gt.sm") Short paragraph
+                            q-input.rounded-border(
+                                :class="{'q-my-sm': $q.screen.gt.sm}"
                                 :debounce="200"
                                 :disable="!isAdmin"
                                 :input-style="{ 'resize': 'none' }"
@@ -701,7 +731,7 @@ ${backgroundImage
                                 placeholder="Max 140 characters"
                                 ref="nickname"
                                 rounded
-                                rows='3'
+                                :rows="$q.screen.gt.sm ? 3 : 6"
                                 type="textarea"
                                 v-model='form[banner.paragraph]'
                             )
diff --git a/src/components/dao/settings-general.vue b/src/components/dao/settings-general.vue
index 0dcc8f69a..c3ab6a3ee 100644
--- a/src/components/dao/settings-general.vue
+++ b/src/components/dao/settings-general.vue
@@ -24,8 +24,8 @@ export default {
 widget(title='General' titleImage='/svg/file-checkmark.svg' :bar='true').q-pa-none.full-width
     p.text-sm.text-h-gray.leading-loose.q-mt-md Use general settings to set up some basic parameters such as a link to your main collaboration space and your DAO and use the toggle to enable or disable key features.
 
-    .row.justify-between
-        .col-6.q-pr-sm
+    .row.justify-between.q-col-gutter-x-md
+        .col-12.col-md-6
             .row.items-center.q-col-gutter-xs
                 label.h-label DAO name
                 //- q-icon(name="fas fa-info-circle" size="16px" color="body")
@@ -44,7 +44,7 @@ widget(title='General' titleImage='/svg/file-checkmark.svg' :bar='true').q-pa-no
                 v-model='form.title'
             )
                 q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings
-        .col-6.q-pl-sm
+        .col-12.col-md-6
             .row.items-center.q-col-gutter-xs
                 label.h-label Custom URL
                 //- q-icon(name="fas fa-info-circle" size="16px" color="body")
@@ -66,8 +66,8 @@ widget(title='General' titleImage='/svg/file-checkmark.svg' :bar='true').q-pa-no
                 )
                     q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings
 
-    .row.justify-between.q-mt-sm
-        .col-6.q-pr-sm
+    .row.justify-between.q-mt-sm.q-col-gutter-x-md
+        .col-12.col-md-6
             .row.items-center.q-col-gutter-xs
                 label.h-label Social chat
                 //- q-icon(name="fas fa-info-circle" size="16px" color="body")
@@ -86,7 +86,7 @@ widget(title='General' titleImage='/svg/file-checkmark.svg' :bar='true').q-pa-no
                 v-model='form.socialChat'
             )
                 q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings
-        .col-3.q-pl-sm
+        .col-12.col-md-3
             .row.items-center.q-col-gutter-xs
                 label.h-label Link to documentation
             q-input.q-my-sm(
@@ -103,7 +103,7 @@ widget(title='General' titleImage='/svg/file-checkmark.svg' :bar='true').q-pa-no
                 v-model='form.documentationURL'
             )
                 q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings
-        .col-3.q-pl-sm
+        .col-12.col-md-3
             .row.items-center.q-col-gutter-xs
                 label.h-label Button text
             q-input.q-my-sm(
@@ -121,8 +121,8 @@ widget(title='General' titleImage='/svg/file-checkmark.svg' :bar='true').q-pa-no
             )
                 q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings
 
-    .row.justify-between.q-mt-xl
-        .col-6.q-pr-sm
+    .row.justify-between.q-mt-xl.q-col-gutter-x-md
+        .col-12.col-md-6
             .row.items-center.q-col-gutter-xs
                 label.h-label Proposals creation
                 //- q-icon(name="fas fa-info-circle" size="16px" color="body")
@@ -132,18 +132,18 @@ widget(title='General' titleImage='/svg/file-checkmark.svg' :bar='true').q-pa-no
                 q-toggle(:disable="!isAdmin" color="primary" keep-color v-model="form.proposalsCreationEnabled")
                     q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings
 
-        .col-6.q-pl-sm
+        .col-12.col-md-6
             .row.items-center.q-col-gutter-xs
                 label.h-label Members application
                 //- q-icon(name="fas fa-info-circle" size="16px" color="body")
                 //-     q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle") Add a link to your DAO documentation here. Could be your website or a wiki where users can learn more about your DAO. The link will be added to the Banner on the Organization Page.
-            .row.items-center.justify-between.q-mt-xs
+            .row.items-center.justify-between.q-mt-xs(:class="{'q-mt-xl': !$q.screen.gt.sm}")
                 label.text-xs Activate or deactivate member applications.
                 q-toggle(:disable="!isAdmin" color="primary" keep-color v-model="form.membersApplicationEnabled")
                     q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings
 
-    .row.justify-between.q-mt-xl
-        .col-6.q-pr-sm
+    .row.justify-between.q-mt-xl.q-col-gutter-x-md
+        .col-12.col-md-6
             .row.items-center.q-col-gutter-xs
                 label.h-label Removable banners
                 //- q-icon(name="fas fa-info-circle" size="16px" color="body")
diff --git a/src/components/dao/settings-plan.vue b/src/components/dao/settings-plan.vue
index f4be8f412..b8d7f0ff4 100644
--- a/src/components/dao/settings-plan.vue
+++ b/src/components/dao/settings-plan.vue
@@ -232,7 +232,7 @@ export default {
 <template lang="pug">
 .page-plan(v-if="!loading")
   downgrade-pop-up(:value="isDowngradePopUpOpen" @activatePlan="activatePlan" @hidePopUp="state = 'BILLING'")
-  chip-plan.q-my-sm(v-if="!$q.screen.gt.sm")
+  chip-plan.q-my-sm(v-if="!$q.screen.gt.sm" :plan="selectedDaoPlan.name" :daysLeft="selectedDaoPlan.daysLeft" :graceDaysLeft="selectedDaoPlan.graceDaysLeft" :color="selectedDaoPlan.isExpiring ? 'negative' : 'secondary'")
   widget(title="Select your plan").q-pa-none.full-width
     //- p.text-sm.text-h-gray.leading-loose.q-mt-md Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     .absolute.z-50(:style="{'top': '-60px', 'right': '-30px'}" v-if="$q.screen.gt.sm")
@@ -293,7 +293,7 @@ export default {
             .col.full-width(v-for="token in balances" :key="token.tokenName")
               treasury-token(v-bind="token" :isError="!hasEnoughTokens")
           .col-12.col-sm-12.col-md-12.col-lg-6.row.justify-end
-            nav.col-md-12.col-lg-8.q-my-xl.row.q-col-gutter-x-sm(:class="{ 'q-col-gutter-y-sm': !$q.screen.gt.md}")
+            nav.col-12.col-md-12.col-lg-8.q-my-xl.row.q-col-gutter-x-sm(:class="{ 'q-col-gutter-y-sm': !$q.screen.gt.md}")
               .col-12.col-sm-12.col-md-12.col-lg-6
                 q-btn.rounded-border.text-bold.q-mr-xs.full-width.full-height(
                   :disable="!canActivate || !hasEnoughTokens"
@@ -318,7 +318,7 @@ export default {
   widget(title="Billing history").full-width.q-mt-md
     .calendar-container.q-mt-lg.row.q-gutter-sm
       template(v-for="(bill, index) in BILLING_HISTORY")
-        billing-history-card(v-bind="bill" :key="bill.id")
+        billing-history-card(v-bind="bill" :key="bill.id" :class="{'full-width': !$q.screen.gt.sm}")
 
 </template>
 
diff --git a/src/components/dao/settings-voting.vue b/src/components/dao/settings-voting.vue
index 7493d711e..78a133d41 100644
--- a/src/components/dao/settings-voting.vue
+++ b/src/components/dao/settings-voting.vue
@@ -52,14 +52,14 @@ export default {
 widget(title='Voting' titleImage='/svg/vote.svg' :bar='true').q-pa-none.full-width
     p.text-sm.text-h-gray.leading-loose.q-mt-md Use voting settings to set up your voting parameters including unity (min % of members endorsing it), quorum (min % of total members participating in the vote) and voting duration (how long a vote is open, including updates to your vote).
 
-    .row.q-mt-xl
-      .col-6.q-pr-sm
+    .row.q-mt-xl.q-col-gutter-x-md
+      .col-12.col-md-6
         .row.items-center.q-col-gutter-xs
           label.h-label Vote alignment (Unity)
           q-icon(name="fas fa-info-circle" size="16px" color="body")
             q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle") Unity is the minimum required percentage of members supporting (voting for, vs voting against) a proposal for it to pass. Make this 100% if you wish to have consensus, or 50% for classical majority-rule democracy, etc
         .row.full-width.items-center
-          .col-7.row.q-mr-sm
+          .col-12.col-md-7.row.q-mr-sm
             q-slider(
               :disable="!isAdmin"
               :max="100"
@@ -79,13 +79,13 @@ widget(title='Voting' titleImage='/svg/vote.svg' :bar='true').q-pa-none.full-wid
               v-model.number="form.votingAlignmentPercent"
             )
           q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings
-      .col-6.q-pl-sm
+      .col-12.col-md-6(:class="{'q-mt-md': !$q.screen.gt.sm}")
         .row.items-center.q-col-gutter-xs
           label.h-label Vote quorum
           q-icon(name="fas fa-info-circle" size="16px" color="body")
             q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle") Quorum is the minimum required percentage of total members participating in the vote for it to pass.
         .row.full-width.items-center
-          .col-7.row.q-mr-sm
+          .col-12.col-md-7.row.q-mr-sm
             q-slider(
               :disable="!isAdmin"
               :max="100"
@@ -106,15 +106,15 @@ widget(title='Voting' titleImage='/svg/vote.svg' :bar='true').q-pa-none.full-wid
             )
           q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings
 
-    .row.q-mt-xl
-      .col-6.row.q-pr-sm
+    .row.q-mt-xl.q-col-gutter-x-md
+      .col-12.col-md-6.row
         .row.items-end.full-width
           .row.items-center.q-col-gutter-xs
             label.h-label Vote duration
             q-icon(name="fas fa-info-circle" size="16px" color="body")
               q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle") Is the duration period the vote is active and member can cast one or more votes.
           .q-mt-xs.row.full-width
-            .col-7.row.justify-between.q-mr-sm
+            .col-12.col-md-7.row.justify-between.q-mr-sm
               q-btn.duration-button.text-bold.text-lowercase(
                 :color="form.votingDurationSec === option.value ? 'primary' : 'internal-bg'"
                 :disable="!isAdmin"
@@ -126,7 +126,7 @@ widget(title='Voting' titleImage='/svg/vote.svg' :bar='true').q-pa-none.full-wid
                 unelevated
                 v-for='(option, index) in durationOptions'
               ) {{ option.label }}
-            .col-grow
+            .col-grow(:class="{'q-mt-md': !$q.screen.gt.sm}")
               custom-period-input(:disable="!isAdmin" :isActive="isCustomVotingDuration" @selected="form.votingDurationSec = 0" v-model='form.votingDurationSec')
           q-tooltip(:content-style="{ 'font-size': '1em' }" anchor="top middle" self="bottom middle" v-if="!isAdmin") Only DAO admins can change the settings
 
diff --git a/src/pages/dho/Configuration.vue b/src/pages/dho/Configuration.vue
index 2f0694a93..eec7b8b62 100644
--- a/src/pages/dho/Configuration.vue
+++ b/src/pages/dho/Configuration.vue
@@ -407,6 +407,7 @@ export default {
   //- NAVIGATION
   nav.full-width.q-my-xl.row.justify-end(v-show="isAdmin")
     q-btn.q-px-xl.rounded-border.text-bold.q-mr-xs(
+      :class="{ 'full-width': !$q.screen.gt.sm }"
       :disable="numberOfChanges === 0"
       @click="resetForm"
       color="white"
@@ -416,8 +417,8 @@ export default {
       text-color="primary"
       unelevated
     )
-    div.inline.relative-position
-      q-btn.q-px-xl.rounded-border.text-bold.q-ml-xs(
+    div.inline.relative-position(:class="{ 'full-width q-mt-md': !$q.screen.gt.sm }")
+      q-btn.q-px-xl.rounded-border.text-bold.q-ml-xs.full-width(
         :disable="numberOfChanges === 0"
         @click="saveSettings"
         color="primary"