diff --git a/app/assets/v2/js/grants/_detail-component.js b/app/assets/v2/js/grants/_detail-component.js
index a57f4924153..d84a776c85c 100644
--- a/app/assets/v2/js/grants/_detail-component.js
+++ b/app/assets/v2/js/grants/_detail-component.js
@@ -1,8 +1,8 @@
 
-let isStaff = document.contxt.is_staff || false;
+const isStaff = document.contxt.is_staff || false;
 
-let userCode = typeof user_code !== 'undefined' ? user_code : undefined;
-let verificationTweet = typeof verification_tweet !== 'undefined' ? verification_tweet : undefined;
+const userCode = typeof user_code !== 'undefined' ? user_code : undefined;
+const verificationTweet = typeof verification_tweet !== 'undefined' ? verification_tweet : undefined;
 
 Vue.component('v-select', VueSelect.VueSelect);
 Vue.use(VueQuillEditor);
@@ -12,14 +12,14 @@ Quill.register('modules/ImageExtend', ImageExtend);
 Vue.mixin({
   methods: {
     grantInCart: function() {
-      let vm = this;
-      let inCart = CartData.cartContainsGrantWithId(vm.grant.id);
+      const vm = this;
+      const inCart = CartData.cartContainsGrantWithId(vm.grant.id);
 
       vm.$set(vm.grant, 'isInCart', inCart);
       return vm.grant.isInCart;
     },
     addToCart: async function() {
-      let vm = this;
+      const vm = this;
       const grantCartPayloadURL = `/grants/v1/api/${vm.grant.id}/cart_payload`;
       const response = await fetchData(grantCartPayloadURL, 'GET');
 
@@ -31,7 +31,7 @@ Vue.mixin({
 
     },
     removeFromCart: function() {
-      let vm = this;
+      const vm = this;
 
       vm.$set(vm.grant, 'isInCart', false);
       CartData.removeIdFromCart(vm.grant.id);
@@ -41,7 +41,7 @@ Vue.mixin({
 
     },
     editGrantModal: function() {
-      let vm = this;
+      const vm = this;
 
       vm.logoPreview = vm.grant.logo_url;
 
@@ -49,7 +49,7 @@ Vue.mixin({
     },
     saveGrant: function(event) {
       event.preventDefault();
-      let vm = this;
+      const vm = this;
 
       if (!vm.checkForm(event))
         return;
@@ -59,7 +59,7 @@ Vue.mixin({
       };
 
       const apiUrlGrant = `/grants/v1/api/grant/edit/${vm.grant.id}/`;
-      let data = {
+      const data = {
         'title': vm.grant.title,
         'reference_url': vm.grant.reference_url,
         'description': vm.$refs.myQuillEditor.quill.getText(),
@@ -129,9 +129,9 @@ Vue.mixin({
     cancelGrant: function(event) {
       event.preventDefault();
 
-      let vm = this;
+      const vm = this;
 
-      let cancel = window.prompt('Please write "CONFIRM" to cancel the grant.');
+      const cancel = window.prompt('Please write "CONFIRM" to cancel the grant.');
 
       if (cancel !== 'CONFIRM') {
         return;
@@ -153,10 +153,10 @@ Vue.mixin({
 
     },
     toggleFollowingGrant: async function(grantId) {
-      let vm = this;
+      const vm = this;
 
       const favoriteUrl = `/grants/${grantId}/favorite`;
-      let response = await fetchData(favoriteUrl, 'POST');
+      const response = await fetchData(favoriteUrl, 'POST');
 
       if (response.action === 'follow') {
         vm.grant.favorite = true;
@@ -167,7 +167,7 @@ Vue.mixin({
       return true;
     },
     flag: function() {
-      let vm = this;
+      const vm = this;
 
 
       const comment = prompt('What is your reason for flagging this Grant?');
@@ -199,7 +199,7 @@ Vue.mixin({
       });
     },
     userSearch(search, loading) {
-      let vm = this;
+      const vm = this;
 
       if (search.length < 3) {
         return;
@@ -209,9 +209,9 @@ Vue.mixin({
 
     },
     getUser: async function(loading, search, selected) {
-      let vm = this;
-      let myHeaders = new Headers();
-      let url = `/api/v0.1/users_search/?token=${currentProfile.githubToken}&term=${escape(search)}&suppress_non_gitcoiners=true`;
+      const vm = this;
+      const myHeaders = new Headers();
+      const url = `/api/v0.1/users_search/?token=${currentProfile.githubToken}&term=${escape(search)}&suppress_non_gitcoiners=true`;
 
       myHeaders.append('X-Requested-With', 'XMLHttpRequest');
       return new Promise(resolve => {
@@ -235,12 +235,12 @@ Vue.mixin({
       });
     },
     changeColor() {
-      let vm = this;
+      const vm = this;
 
       vm.grant.image_css = `background-color: ${vm.logoBackground};`;
     },
     onFileChange(e) {
-      let vm = this;
+      const vm = this;
 
       if (!e.target) {
         return;
@@ -252,7 +252,7 @@ Vue.mixin({
         return;
       }
       vm.imgTransition = true;
-      let imgCompress = new Compressor(file, {
+      const imgCompress = new Compressor(file, {
         quality: 0.6,
         maxWidth: 2000,
         success(result) {
@@ -267,7 +267,7 @@ Vue.mixin({
       });
     },
     async twitterVerification() {
-      let vm = this;
+      const vm = this;
 
       if (!vm.grant.twitter_handle_1 || vm.grant.twitter_handle_1 == '') {
         _alert('Please add a twitter account to your grant!', 'error', 5000);
@@ -320,13 +320,13 @@ Vue.mixin({
       }
     },
     tweetVerification() {
-      let vm = this;
+      const vm = this;
       const tweetContent = `https://twitter.com/intent/tweet?text=${encodeURIComponent(vm.verification_tweet)}%20${encodeURIComponent(vm.user_code)}`;
 
       window.open(tweetContent, '_blank');
     },
     checkForm: function(e) {
-      let vm = this;
+      const vm = this;
 
       vm.submitted = true;
       vm.errors = {};
@@ -405,7 +405,7 @@ Vue.mixin({
           if (!user?.fields) {
             return user;
           }
-          let newTeam = {};
+          const newTeam = {};
 
           newTeam['id'] = user.pk;
           newTeam['avatar_url'] = `/dynamic/avatar/${user.fields.handle}`;
@@ -425,7 +425,7 @@ Vue.mixin({
       return this.$refs.myQuillEditor.quill;
     },
     filteredMsg: function() {
-      let msgs = [
+      const msgs = [
         '💪 keep up the great work',
         '👍 i appreciate you',
         '🙌 Great Job',
@@ -453,7 +453,7 @@ Vue.mixin({
       );
     },
     isUserLogged() {
-      let vm = this;
+      const vm = this;
 
       if (document.contxt.github_handle) {
         return true;
@@ -487,7 +487,6 @@ Vue.component('grant-details', {
       logo: null,
       logoPreview: null,
       logoBackground: null,
-      relatedGrants: [],
       rows: 0,
       perPage: 4,
       currentPage: 1,
@@ -540,7 +539,7 @@ Vue.component('grant-details', {
     };
   },
   mounted: function() {
-    let vm = this;
+    const vm = this;
 
     vm.grant_twitter_handle_1 = vm.grant.twitter_handle_1;
     vm.grant.description_rich_edited = vm.grant.description_rich;
@@ -553,7 +552,7 @@ Vue.component('grant-details', {
     grant: {
       deep: true,
       handler: function(newVal, oldVal) {
-        let vm = this;
+        const vm = this;
 
         if (this.dirty && this.submitted) {
           this.checkForm();
diff --git a/app/assets/v2/js/grants/_detail.js b/app/assets/v2/js/grants/_detail.js
index 926c998bd03..74a9786d781 100644
--- a/app/assets/v2/js/grants/_detail.js
+++ b/app/assets/v2/js/grants/_detail.js
@@ -7,14 +7,14 @@ Quill.register('modules/ImageExtend', ImageExtend);
 Vue.mixin({
   methods: {
     fetchGrantDetails: function(id) {
-      let vm = this;
+      const vm = this;
 
       vm.loading = true;
       if (!id) {
         id = grantDetails.grant_id;
       }
 
-      let url = `/grants/v1/api/grant/${id}/`;
+      const url = `/grants/v1/api/grant/${id}/`;
 
       return new Promise(resolve => {
 
@@ -32,13 +32,14 @@ Vue.mixin({
           resolve();
         }).catch(console.error);
       });
-
-
+    },
+    paginate: function(array, page_size, page_number) {
+      return array.slice(page_number * page_size, page_number * page_size + page_size);
     },
     fetchRelated: function() {
-      let vm = this;
+      const vm = this;
+      const size = 3;
       let ids;
-      let size = 6;
 
       if (!Object.keys(vm.grant.metadata).length || !vm.grant.metadata?.related?.length) {
         return;
@@ -47,15 +48,20 @@ Vue.mixin({
       ids = vm.grant.metadata.related.map(arr => {
         return arr[0];
       });
+
       vm.relatedGrantsIds = vm.paginate(ids, size, vm.relatedGrantsPage);
 
       vm.relatedGrantsPage += 1;
 
+      vm.relatedGrantsHasNext = vm.relatedGrantsPage + 1 < ids.length / size;
+
       if (!vm.relatedGrantsIds.length) {
         return;
       }
+
       vm.loadingRelated = true;
-      let url = `/grants/v1/api/grants?pks=${vm.relatedGrantsIds}`;
+
+      const url = `/grants/v1/api/grants?pks=${vm.relatedGrantsIds}`;
 
       fetch(url).then(function(res) {
         return res.json();
@@ -66,11 +72,8 @@ Vue.mixin({
         vm.loadingRelated = false;
       }).catch(console.error);
     },
-    paginate: function(array, page_size, page_number) {
-      return array.slice(page_number * page_size, page_number * page_size + page_size);
-    },
     fetchTransactions: function() {
-      let vm = this;
+      const vm = this;
 
       page = vm.transactions.next_page_number;
       if (!page) {
@@ -78,7 +81,7 @@ Vue.mixin({
       }
       vm.loadingTx = true;
 
-      let url = `/grants/v1/api/grant/${vm.grant.id}/contributions?page=${page}`;
+      const url = `/grants/v1/api/grant/${vm.grant.id}/contributions?page=${page}`;
 
       fetch(url).then(function(res) {
         return res.json();
@@ -95,89 +98,21 @@ Vue.mixin({
 
       }).catch(console.error);
     },
-    fetchContributors: function() {
-      let vm = this;
-
-      page = vm.contributors.next_page_number;
-      if (!page) {
-        return;
-      }
-      vm.loadingContributors = true;
-
-      let url = `/grants/v1/api/grant/${vm.grant.id}/contributors?page=${page}`;
-
-      fetch(url).then(function(res) {
-        return res.json();
-      }).then(function(json) {
-        json.contributors.forEach(function(item) {
-          vm.contributors.grantContributors.push(item);
-        });
-
-        vm.contributors.num_pages = json.num_pages;
-        vm.contributors.has_next = json.has_next;
-        vm.contributors.next_page_number = json.next_page_number;
-        vm.contributors.count = json.count;
-        vm.loadingContributors = false;
-
-      }).catch(console.error);
-    },
     backNavigation: function() {
-      let vm = this;
-      var lgi = localStorage.getItem('last_grants_index');
-      var lgt = localStorage.getItem('last_grants_title');
+      const vm = this;
+      const lgi = localStorage.getItem('last_grants_index');
+      const lgt = localStorage.getItem('last_grants_title');
 
       if (lgi && lgt) {
         vm.$set(vm.backLink, 'url', lgi);
         vm.$set(vm.backLink, 'title', lgt);
       }
     },
-    tabChange: function(input) {
-
-      console.log(input);
-      window.location = `${this.grant.details_url}?tab=${input}`;
-    },
-    enableTab: function() {
-      let vm = this;
-      let urlParams = new URLSearchParams(window.location.search);
-
-      vm.tab = urlParams.get('tab');
-
-      switch (vm.tab) {
-        case 'sybil_profile':
-          vm.tabSelected = 4;
-          break;
-        case 'stats':
-          vm.tabSelected = 5;
-          break;
-        default:
-          vm.tabSelected = 0;
-      }
-      window.history.replaceState({}, document.title, `${window.location.pathname}`);
-    },
     scrollToElement(element) {
-      let container = this.$refs[element];
+      const container = this.$refs[element];
 
       container.scrollIntoViewIfNeeded({behavior: 'smooth', block: 'start'});
     }
-  },
-  computed: {
-    // contributors() {
-    //   let obj = this.transactions.grantTransactions.map((contributor) => {
-    //     let newContributor = {};
-
-    //     newContributor['id'] = contributor.subscription.id;
-    //     newContributor['contributor_profile'] = contributor.subscription.contributor_profile;
-    //     newContributor['avatar_url'] = `/dynamic/avatar/${contributor.subscription.contributor_profile}`;
-    //     return newContributor;
-    //   })
-
-    //   return obj.reduce((user, current) => {
-    //     return Object.assign(user, {
-    //       [current.contributor_profile]: current
-    //     });
-    //   }, {});
-
-    // }
   }
 });
 
@@ -190,25 +125,21 @@ if (document.getElementById('gc-grant-detail')) {
     },
     data() {
       return {
-        loadingContributors: false,
+        loading: false,
         loadingTx: false,
         loadingRelated: false,
-        loading: false,
-        isStaff: isStaff,
+        relatedGrants: [],
+        relatedGrantsPage: 0,
+        relatedGrantsHasNext: false,
+        relatedGrantsIds: [],
         transactions: {
           grantTransactions: [],
           next_page_number: 1
         },
-        contributors: {
-          grantContributors: [],
-          next_page_number: 1
-        },
+        isStaff: isStaff,
         grant: {},
         tabSelected: 0,
         tab: null,
-        relatedGrants: [],
-        relatedGrantsPage: 0,
-        relatedGrantsIds: [],
         backLink: {
           url: '/grants',
           title: 'Grants'
@@ -216,7 +147,6 @@ if (document.getElementById('gc-grant-detail')) {
       };
     },
     mounted: function() {
-      this.enableTab();
       this.backNavigation();
       this.fetchGrantDetails();
     }
diff --git a/app/assets/v2/scss/gitcoin.scss b/app/assets/v2/scss/gitcoin.scss
index f7938dc171e..c30611a3ee5 100644
--- a/app/assets/v2/scss/gitcoin.scss
+++ b/app/assets/v2/scss/gitcoin.scss
@@ -90,6 +90,14 @@
   color: rgba(0, 0, 0, 0.7)!important;
 }
 
+.text-grey-300 { 
+  color: #A7A2B6; 
+}
+
+.text-grey-400 {
+  color: #757087;
+}
+
 .text-current {
   color: currentColor !important;
 }
@@ -191,7 +199,6 @@
   background-repeat: no-repeat;
 }
 
-
 .bg-lightblue {
   background-color: var(--main-bg);
 }
@@ -253,6 +260,10 @@
   font-size: 0.55rem;
 }
 
+.font-smaller-8 {
+  font-size: 0.5rem;
+}
+
 .font-smallest {
   font-size: 0.1rem;
 }
diff --git a/app/assets/v2/scss/grants/grant.scss b/app/assets/v2/scss/grants/grant.scss
index 87fe67096a7..107e22e7431 100644
--- a/app/assets/v2/scss/grants/grant.scss
+++ b/app/assets/v2/scss/grants/grant.scss
@@ -576,9 +576,9 @@
   font-size: 1.3rem;
 }
 
-.grant-description h3{
-  font-size: 1.2rem;
-}
+// .grant-description h3{
+//   font-size: 1.2rem;
+// }
 
 .grant-description h4{
   font-size: 1.1rem;
diff --git a/app/assets/v2/scss/town_square.scss b/app/assets/v2/scss/town_square.scss
index 9ccf212fa06..117ba61a4ad 100644
--- a/app/assets/v2/scss/town_square.scss
+++ b/app/assets/v2/scss/town_square.scss
@@ -938,7 +938,6 @@ body.green.offer_view .announce {
   background-color: var(--badge-blue-bg);
   color: var(--badge-blue-text);
   border: 1px solid transparent;
-  margin-bottom: 0.5rem !important;
 }
 
 #status .btn-group-toggle .btn-radio.active {
diff --git a/app/dashboard/templates/profiles/status_box.html b/app/dashboard/templates/profiles/status_box.html
index 5aea90b6d12..41f77a8b474 100644
--- a/app/dashboard/templates/profiles/status_box.html
+++ b/app/dashboard/templates/profiles/status_box.html
@@ -10,7 +10,15 @@
     ></textarea>
     <input type="hidden" name="what" value="{{what}}:{{whatid}}">
     <div id="textarea-dropdown" class="dropdown-menu" style="top: initial; left: initial;"></div>
-    <small class="d-block" style="float: right;">Press SHIFT + ENTER to send</small>
+    <div class="d-block float-right">
+      <small class="d-block">Press SHIFT + ENTER to send</small>
+      <div class="d-flex justify-content-end w-100">
+        <button class="btn btn-primary mt-3 mt-md-2" id="btn_post" disabled="true">
+          Post
+        </button>
+      </div>
+    </div>
+
     <div class="status-menu position-absolute d-flex flex-wrap" style="width: 3.8em; right: 0; top: 0px;">
       <button id="emoji-button" class="btn btn-sm p-1" data-toggle="tooltip" title="Add an emoji to post." style="bottom: 3.5em; right: 0;"><i class="far fa-fw fa-smile"></i></button>
       {% if is_alpha_tester %}
@@ -39,10 +47,10 @@
     <div class="d-none" id="bg-selector">
     </div>
   </div>
-  <div class="btn-group-toggle text-center text-md-left activity_type_selector" {% if not suppress_data_toggle %} data-toggle="buttons" {%endif%}>
+  <div class="btn-group-toggle text-left activity_type_selector" {% if not suppress_data_toggle %} data-toggle="buttons" {%endif%}>
     {% if tags %}
       {% for tag in tags %}
-        <label class="btn btn-radio mr-2 mb-2 mb-md-0 frontend font-weight-semibold font-caption py-1 px-2" data-toggle="tooltip"  title="{{tag.2}}" >
+        <label class="btn btn-radio mr-2 mb-1 frontend font-weight-semibold font-caption py-1 px-2" data-toggle="tooltip"  title="{{tag.2}}" >
           <input type="checkbox" name="" value="{{tag.0}}" autocomplete="off">
           <i class="fas fa-{{tag.1}} mr-2"></i>
         {{tag.0}}
@@ -52,17 +60,12 @@
     {% if options %}
       {% for option in options %}
         <input id={{option.1}} type="checkbox" name="activity_type" value="{{option.0}}" autocomplete="off">
-        <label class="mr-2 mb-2 mb-md-0 frontend font-weight-semibold font-caption py-1 px-2" data-toggle="tooltip" title="{{option.2}}" for='{{option.1}}' >
+        <label class="mr-2 mb-1 frontend font-weight-semibold font-caption py-1 px-2" data-toggle="tooltip" title="{{option.2}}" for='{{option.1}}' >
           <i class="fas fa-{{option.1}} mr-2"></i>
         {{option.0}}
         </label>
       {% endfor %}
     {% endif %}
-    <div class="text-right mb-2">
-      <button class="btn btn-primary font-smaller-7 font-weight-bold" id="btn_post" disabled="true">
-        POST
-      </button>
-    </div>
   </div>
   <div id="attach-dropdown" class="attach text-left mt-4" style="display: none">
       <div class="row">
diff --git a/app/grants/templates/grants/detail/_index.html b/app/grants/templates/grants/detail/_index.html
index 4faed903af5..5f05800b234 100644
--- a/app/grants/templates/grants/detail/_index.html
+++ b/app/grants/templates/grants/detail/_index.html
@@ -50,7 +50,7 @@
           <a style="color:white;" href="{{grant.admin_url}}">{% trans "View Admin" %}</a>
         </div>
       {% endif %}
-      <div class="bg-lightblue pb-5" id="gc-grant-detail"  v-cloak>
+      <div id="gc-grant-detail"  v-cloak>
 
         <b-skeleton-wrapper :loading="loading">
           <template #loading>
@@ -60,378 +60,219 @@
               </b-col>
             </b-row>
             <b-container>
-
               <b-row>
-                <b-col cols="7">
+                <b-col cols="9">
                   <b-skeleton width="45%" class="mb-3"></b-skeleton>
                   <b-skeleton width="100%" height="33px" class="mb-2"></b-skeleton>
                   <b-skeleton width="65%" class="mb-2"></b-skeleton>
                   <b-skeleton width="55%" class="mb-2 mt-3"></b-skeleton>
                   <b-skeleton width="45%" class="mb-2"></b-skeleton>
-
                 </b-col>
-                <b-col cols="5">
-                  <b-row class="mt-3">
-                    <b-skeleton-img no-aspect height="380px"></b-skeleton-img>
-                  </b-row>
-                  <b-row class="mt-3">
-                    <b-skeleton-img no-aspect height="235px"></b-skeleton-img>
+                <b-col cols="3">
+                  <b-row class="mt-3 mb-5">
+                    <b-skeleton-img no-aspect height="250px"></b-skeleton-img>
                   </b-row>
                 </b-col>
               </b-row>
             </b-container>
           </template>
         </b-skeleton-wrapper>
-        <div class="" v-if="grant">
-          <grant-details :grant="grant" v-if="grant.id">
+        <div v-if="grant">
+          <grant-details :grant="grant" v-if="grant?.id">
             <img :src="grant.logo_url" alt="" height="290px" class="d-block w-100 mb-4" style="object-fit: contain; background: black;" :style="grant.image_css">
             <div class="container mb-3">
               <a :href="backLink.url" class="font-body"><i class="fas fa-chevron-left mr-2"></i>Back to [[backLink.title]] </a>
             </div>
           </grant-details>
 
-          <div class="container" ref="grant-tabs">
-            <b-tabs  content-class="mt-3" v-model="tabSelected" >
-              <b-tab :title-link-class="'nav-line'">
-                <template v-slot:title>ACTIVITY</template>
-                <div class="">
-                    {% if is_team_member %}
-                      {% include 'profiles/status_box.html' with suppress_tags=1 placeholder="Update Grant's Funders" what="grant" whatid=grant.pk max_length=1000 suppress_data_toggle=1  %}
-                    {% else %}
-                      {% include 'profiles/status_box.html' with suppress_tags=1 placeholder="Write on grants wall" what="grant" whatid=grant.pk  suppress_data_toggle=1 %}
-                    {% endif %}
-                    <div id="activities" class="activity_stream container px-0">
-                      {% include 'shared/activity_container.html' with pinned=False %}
-                    </div>
-                </div>
-              </b-tab>
-
-              <b-tab :title-link-class="'nav-line'" lazy @click="fetchTransactions">
-                <template v-slot:title>TRANSACTIONS</template>
-
-                {% if is_team_member %}
-                  <div class="float-right font-body">
-                    {% if is_owner %}
-                      <a href="/settings/account#financials" target="_blank">
-                        Export Transactions (OWNER ONLY)
-                      </a> |
-                    {% endif %}
-
-                    <a href="/grants/v1/api/export_addresses/grant{{grant.pk}}.json" target="_blank">
-                      All Contributor Addresses for this Grant (TEAM ONLY)
-                    </a>
+          <div class="container grid grid-template-sidebar-row" ref="grant-tabs">
+            <div class="grant-data">
+              <b-tabs content-class="mt-3" v-model="tabSelected" >
+                <b-tab :title-link-class="'nav-line'">
+                  <template v-slot:title>Activity</template>
+                  <h3 class="pt-2">
+                    {% trans "Recent Activity" %}
+                  </h3>
+                  {% if is_team_member %}
+                    {% include 'profiles/status_box.html' with suppress_tags=1 placeholder="Update Grant's Funders" what="grant" whatid=grant.pk max_length=1000 suppress_data_toggle=1  %}
+                  {% else %}
+                    {% include 'profiles/status_box.html' with suppress_tags=1 placeholder="Write on grants wall" what="grant" whatid=grant.pk  suppress_data_toggle=1 %}
+                  {% endif %}
+                  <div id="activities" class="activity_stream container px-0">
+                    {% include 'shared/activity_container.html' with pinned=False %}
                   </div>
-                  <br class="break">
-                {% endif %}
-                <h4 class="m-auto text-center font-weight-semibold" v-if="!transactions.grantTransactions?.length && !loadingTx">{% trans "No Activity for this Grant!" %}</h4>
-
-
-                <div class="px-0">
-                  <div class="row mb-3 py-2 px-0 mx-sm-0">
-                    <div class="col-12 px-0">
-
-                      <div id="contributions" v-if="transactions.grantTransactions">
-                        <p class="font-body font-weight-semibold subtitle mb-0">
-                          <i class="g-icon g-icon__dot-circle mr-2"></i>  {% trans "Contributions" %} ([[transactions?.count]])
-                        </p>
-                        <div class="" v-for="transaction in transactions.grantTransactions">
-                          <div class="py-2 mx-sm-0 row transaction-history">
-                            <div class="d-none d-sm-block col-1 col-sm-3 col-md-2 font-subheader text-center text-md-left my-auto">
-                              <time :datetime="transaction.created_on" v-b-tooltip.hover.top="transaction.created_on" class="mr-3">[[transaction.created_on | moment]]</time>
-                              <a :href="`/_administrationgrants/contribution/${transaction.id}/change/`" target="_blank" v-if="isStaff">
-                                <i class="fas fa-external-link-alt"></i>
-                              </a>
-                            </div>
-                            <div class="col-3 col-sm-2 justify-content-center special_tag d-flex">
-                              <a :href="`/profile/${transaction.subscription.contributor_profile}`" v-if="!transaction.anonymous" class="d-flex align-items-center">
-                                <b-img-lazy class="rounded-circle bg-white mr-2" width="40" height="40" :src="`/dynamic/avatar/${ transaction.subscription.contributor_profile }`"></b-img-lazy>
-                                <span>[[transaction.subscription.contributor_profile]]</span>
-                              </a>
-                              <span class="d-flex align-items-center" v-else>
-                                <b-img-lazy class="rounded-circle bg-white mr-2" width="40" height="40" src="/dynamic/avatar/Anonymous"></b-img-lazy>
-                                <span>anonymous</span>
-                              </span>
-                            </div>
-                            <div class="col-1 my-auto tags font-caption">
-                              <span v-if="!transaction.success">
-                                (Failed)
-                              </span>
-                              <span v-if="!transaction.tx_cleared">
-                                (Pending)
-                              </span>
-                            </div>
-                            <div class="d-none d-md-block col-md-2 font-body my-auto txn-link">
-                              <a class="tx_link" :href="`https://etherscan.io/tx/${ transaction.tx_id }`" target="_blank" rel="noopener noreferrer" v-if="transaction.tx_id">
-                                View Etherscan
+                </b-tab>
+          
+                <!-- Contributions -->
+                <b-tab :title-link-class="'nav-line'" lazy @click="fetchTransactions">
+                  <template v-slot:title>Contributions</template>
+                  <h3 class="pt-2">
+                    {% trans "Latest Contributions" %}
+                  </h3>
+                  <h5 class="py-3 text-muted" v-if="!transactions.grantTransactions?.length && !loadingTx">{% trans "No Activity for this Grant!" %}</h5>
+                  <div class="px-0" v-if="transactions.grantTransactions?.length && !loadingTx">
+                    <div class="mb-5 pb-2 px-0 mx-sm-0">
+                      <div class="col-12 px-0">
+                        <div id="contributions">
+                          <!-- <div class="align-items-center d-flex float-right" style="margin-top: 28px;">
+                            <a class="pr-2">View All</a>
+                            <svg width="19" height="8" viewBox="0 0 19 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3536 4.35355C18.5488 4.15829 18.5488 3.84171 18.3536 3.64645L15.1716 0.464465C14.9763 0.269203 14.6597 0.269203 14.4645 0.464465C14.2692 0.659727 14.2692 0.976309 14.4645 1.17157L17.2929 4L14.4645 6.82843C14.2692 7.02369 14.2692 7.34027 14.4645 7.53553C14.6597 7.73079 14.9763 7.73079 15.1716 7.53553L18.3536 4.35355ZM4.37114e-08 4.5L18 4.5L18 3.5L-4.37114e-08 3.5L4.37114e-08 4.5Z" fill="#6F3FF5"></path></svg>
+                          </div> -->
+                          {% if is_team_member %}
+                            <div class="font-body text-right mb-3">
+                              {% if is_owner %}
+                                <a href="/settings/account#financials" target="_blank">
+                                  Export Transactions (OWNER ONLY)
+                                </a> |
+                              {% endif %}
+          
+                              <a href="/grants/v1/api/export_addresses/grant{{grant.pk}}.json" target="_blank">
+                                All Contributor Addresses for this Grant (TEAM ONLY)
                               </a>
                             </div>
-                            <div class="d-none d-md-block col-md-2 font-body my-auto txn-link">
-                              <div class="tag tag-lg token">
-                                <p v-b-tooltip.hover.top="transaction.subscription.amount_per_period">
-                                  [[transaction.subscription.amount_per_period | formatNumberWithDecimal ]]
-                                  <span>[[transaction.subscription.token_symbol]]</span>
-                                </p>
+                          {% endif %}
+                          <div class="container py-3" v-for="transaction in transactions.grantTransactions">
+                            <div class="row transaction-history">
+                              <div class="col">
+                                <div class="row">
+                                  <div class="d-flex mr-2">
+                                    <a :href="`/profile/${transaction.subscription.contributor_profile}`" v-if="!transaction.anonymous">
+                                      <b-img-lazy class="rounded-circle bg-light mr-2" width="40" height="40" :src="`/dynamic/avatar/${ transaction.subscription.contributor_profile }`"></b-img-lazy>
+                                    </a>
+                                  </div>
+                                  <div class="col">
+                                    <div class="row">
+                                      <a :href="`/profile/${transaction.subscription.contributor_profile}`" v-if="!transaction.anonymous">[[transaction.subscription.contributor_profile]]</a>
+                                    </div>
+                                    <div class="row">
+                                      <time :datetime="transaction.created_on" v-b-tooltip.hover.top="transaction.created_on" class="mr-3 text-grey-400">[[transaction.created_on | moment]]</time>
+                                      <a :href="`/_administrationgrants/contribution/${transaction.id}/change/`" target="_blank" v-if="isStaff">
+                                        <i class="fas fa-external-link-alt"></i>
+                                      </a>
+                                    </div>
+                                  </div>
+                                </div>  
                               </div>
-                            </div>
-                            <div class="col-2 my-auto tags font-caption">
-                              <div class="tag tag-lg usd" v-b-tooltip.hover.top="transaction.subscription.amount_per_period_usdt">
-                                <p>
-                                  ($ [[transaction.subscription.amount_per_period_usdt | formatNumberWithDecimal ]])
-                                </p>
+        
+                              <div class="col">
+                                <div class="row justify-content-end text-secondary" >
+                                  <span v-b-tooltip.hover.top="transaction.subscription.amount_per_period">
+                                    [[transaction.subscription.amount_per_period | formatNumberWithDecimal ]]
+                                    [[transaction.subscription.token_symbol]]
+                                  </span>
+                                </div>
+                                <div class="row justify-content-end text-secondary">
+                                  <span v-if="!transaction.success">
+                                    (Failed)
+                                  </span>
+                                  <span v-if="!transaction.tx_cleared">
+                                    (Pending)&nbsp;
+                                  </span>
+                                  <span v-b-tooltip.hover.top="transaction.subscription.amount_per_period_usdt">
+                                    [[transaction.subscription.amount_per_period_usdt | formatNumberWithDecimal ]] USD
+                                  </span>
+                                </div>
                               </div>
                             </div>
-                            <div class="col-1 my-auto d-none d-xl-block tags font-caption" v-if="transaction.subscription.amount_per_period_to_gitcoin && transaction.subscription.amount_per_period_to_gitcoin != 0">
-                              (includes [[transaction.subscription.amount_per_period_to_gitcoin| formatNumberWithDecimal ]]  [[transaction.subscription.token_symbol ]] => <a href="https://gitcoin.co/grants/86/gitcoin-sustainability-fund"> Grants Dev Fund</a>)
+                            <div class="row pt-2" v-if="transaction.subscription.comments">
+                              <div class="rounded w-100 py-3 px-2" style="background: rgba(0, 0, 0, 0.03); margin-left: 55px;">
+                                [[transaction.subscription.comments]]
+                              </div>
                             </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-
-                <b-skeleton-wrapper :loading="loadingTx">
-                  <template #loading>
-                    <b-container>
-                      <b-row class="" v-for="index in 4" :key="index">
-                        <b-col cols="12" class="py-2">
-                          <b-skeleton width="100%" height="48px" class="mb-2"></b-skeleton>
+        
+                  <b-skeleton-wrapper :loading="loadingTx">
+                    <template #loading>
+                      <b-row class="mb-3">
+                        <b-col cols="12">
+                          <b-skeleton width="50%" height="35px"></b-skeleton>
                         </b-col>
                       </b-row>
-                    </b-container>
-                  </template>
-                </b-skeleton-wrapper>
-                <div class="text-center">
-                  <button class="btn btn-primary btn-sm" v-if="transactions.next_page_number" @click="fetchTransactions()" :disabled="loadingTx">Load more</button>
-                </div>
-
-
-              </b-tab>
-
-              <b-tab :title-link-class="'nav-line'" lazy @click="fetchRelated">
-                <template v-slot:title>RELATED GRANTS <span class="nav-badge">([[grant?.metadata?.related?.length || 0]])</span></template>
-                <h4 class="m-auto text-center font-weight-semibold" v-if="!relatedGrants.length && !loadingRelated">{% trans "No related grants." %}</h4>
-
-                <div class="row">
-                  <div class="col-12 col-md-6 col-xl-4 mb-4 infinite-item grant-card" v-for="relgrant in relatedGrants">
-                    <a class="text-decoration-none" :href="relgrant.details_url">
-                      <div class="card">
-                        <b-img-lazy :src="relgrant.logo_url" class="card-img-top" :alt="relgrant.title"></b-img-lazy>
-                        <div class="card-body">
-                          <h5 class="card-title">[[relgrant.title]]</h5>
-                          <p class="card-text">[[relgrant.description | truncate(150)]]</p>
-                          <div class="d-flex">
-                            <div v-for="member in relgrant.team_members" :key="member.pk">
-                              <b-img-lazy class="rounded-circle bg-white" width="40" height="40" :src="`/dynamic/avatar/${member.fields.handle}`" alt="member.fields.handle"></b-img-lazy>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </a>
-                  </div>
-                </div>
-                <b-skeleton-wrapper :loading="loadingRelated">
-                  <template #loading>
-
-                      <b-row class="mb-3">
-                        <b-col cols="12" md="6" xl="4" v-for="index in 3" :key="index">
-                          <b-card img-top no-body>
-                            <b-skeleton-img card-img="top" ></b-skeleton-img>
-                            <b-card-body>
-                              <b-skeleton width="85%"></b-skeleton>
-                              <b-skeleton width="55%"></b-skeleton>
-                              <b-skeleton width="70%"></b-skeleton>
-                              <b-skeleton type="avatar"></b-skeleton>
-                            </b-card-body>
-                          </b-card>
+                      <b-row class="mb-3" v-for="index in 2" :key="index">
+                        <b-col cols="12">
+                          <b-row>
+                            <b-col cols="6">
+                              <b-skeleton width="80%" height="25px" class="col mb-2"></b-skeleton>
+                            </b-col>
+                            <b-col cols="6">
+                              <b-skeleton width="40%" height="25px" class="col mb-2 ml-auto"></b-skeleton>
+                            </b-col>
+                          </b-row>
+                        </b-col>
+                        <b-col cols="12">
+                          <b-skeleton width="100%" height="30px" class="mb-2"></b-skeleton>
                         </b-col>
                       </b-row>
+                    </template>
+                  </b-skeleton-wrapper>
 
-                  </template>
-                </b-skeleton-wrapper>
-                <div class="text-center">
-                  <button class="btn btn-primary btn-sm" v-if="relatedGrantsIds.length" @click="fetchRelated()" :disabled="loadingRelated">Load more</button>
-                </div>
-              </b-tab>
-
-              <b-tab :title-link-class="'nav-line'" @click="fetchContributors">
-                <template v-slot:title>CONTRIBUTORS</template>
-                <h4 class="m-auto text-center font-weight-semibold" v-if="!contributors.grantContributors?.length && !loadingContributors">{% trans "No contributors." %}</h4>
-
-                <div class="d-flex flex-wrap" v-if="contributors.grantContributors">
-                  <a :href="`/profile/${contributor.user}`" class="d-flex align-items-center m-2" v-for="contributor in contributors.grantContributors">
-                    <b-img-lazy class="rounded-circle bg-white mr-2" width="40" height="40" :src="`/dynamic/avatar/${contributor.user}`"></b-img-lazy>
-                    <span class="font-weight-semibold">[[contributor.user]]</span>
-                  </a>
-                </div>
-                <b-skeleton-wrapper :loading="loadingContributors" class="d-flex">
-                  <template #loading>
-                    <span v-for="index in 4" class="d-flex align-items-center mr-2">
-                      <b-skeleton type="avatar"></b-skeleton>
-                      <b-skeleton width="100px" height="20px" class="ml-1"></b-skeleton>
-                    </span>
-                  </template>
-                </b-skeleton-wrapper>
-                <div class="text-center">
-                  <button class="btn btn-primary btn-sm" v-if="contributors.next_page_number" @click="fetchContributors()" :disabled="loadingContributors">Load more</button>
-                </div>
-              </b-tab>
-
-
-              {% if is_staff %}
-              <b-tab :title-link-class="'nav-line'" @click="tabChange('sybil_profile')">
-                <template v-slot:title>SYBIL PROFILE</template>
-
-
-                  <h4>Grant Sybil Profile</h4>
-
-                  <hr>
-                  <i class="fa fa-lock" aria-hidden="true"></i>
-                  SybilScore ™️: {{ grant.sybil_score }}
-                  <br>
-                  <i class="fa fa-lock" aria-hidden="true"></i>
-                  RiskScore ™️: {{ grant.weighted_risk_score }}
-                  <pre>
-
-                  A grant's SybilScore ™️ is calculated off of the total of suspicious activity on each of the following vectors:
-                  - Account Metadata
-                  - Suspicious Interactions
-                  - Grant Flags Reports
-                  - BrightID Trust Score (coming soon)
-                  - KYC (maybe coming soon)
-                  - MACI (maybe coming soon)
-
-                  a grant's RiskScore ™️ is equal to its (SybilScore ™️)^2 * sqrt(its matching funds for this round).
-                  </pre>
-                  <div id="section-nav-sybil">
-                    {% for ele in sybil_profiles%}
-                    <h4>{{ele.0}}: (avg {{ele.1.1|floatformat:2}})</h4>
-                    <table>
-                      <tr>
-                        <td>
-                          Index
-                        </td>
-                        <td>
-                          Contributors
-                        </td>
-                        <td>
-                          Contributors (pct)
-                        </td>
-                        <td>
-                          Contributions/Contributor
-                        </td>
-                        <td>
-                          Profiles
-                        </td>
-                      </tr>
-                    {% for sp in ele.1.0 %}
-                      <tr style="border-top: 1px solid grey;">
-                        <td>
-                          {% if '0x' in sp.0 %}
-                          <a href="https://etherscan.io/address/{{sp.0}}">{{sp.0}}</a>
-                          {% else %}
-                          {{sp.0}}
-                          {% endif %}
-                        </td>
-                        <td>
-                          {{sp.1}}
-                        </td>
-                        <td>
-                          {{sp.5}}%
-                        </td>
-                        <td>
-                          {{sp.3|floatformat:2}}
-                        </td>
-                        <td>
-                          <div style="max-height: 50px; overflow: scroll;">
-                            {% for this_profile in sp.4 %}
-                                  <a href="/{{this_profile}}">
-                                    {% if forloop.counter < 20 %}
-                                      <b-img-lazy class="rounded-circle bg-white" width="30" height="30" src="/dynamic/avatar/{{this_profile}}"></b-img-lazy>
-                                    {% endif %}
-                                    @{{this_profile}}
-                                  </a>
-                            {% endfor %}
-                          </div>
-                        </td>
-                      </tr>
-                    {% endfor %}
-                    </table>
-                      <canvas id="myChart{{forloop.counter0}}" width="400" height="40"></canvas>
-
-
-                    {% endfor %}
+                  <div class="text-center" v-if="transactions.grantTransactions?.length && !loadingTx">
+                    <button class="btn btn-outline-primary btn-sm mt-n4 mb-4" v-if="transactions.next_page_number" @click="fetchTransactions()" :disabled="loadingTx">Load more</button>
                   </div>
-              </b-tab>
-              {% endif %}
-              {% if is_team_member or is_staff  %}
-              <b-tab :title-link-class="'nav-line'" @click="tabChange('stats')">
-                <template v-slot:title>STATS</template>
-                {% if tab == 'stats' %}
-                  <div id=grant_stats_graph class="content-block content-block--white">
+                </b-tab>
+                
+                <b-tab :title-link-class="'nav-line'" lazy @click="fetchRelated">
+                  <template v-slot:title>Related Grants <span class="nav-badge">([[grant?.metadata?.related?.length || 0]])</span></template>
+                  <h3 class="pt-2 pb-3">
+                    {% trans "Related Grants" %}
+                  </h3>
+                  <h5 class="mb-5 text-muted" v-if="!relatedGrants.length && !loadingRelated">{% trans "No related grants." %}</h5>
+                  <!-- Related grants -->
+                  <div class="pb-5" v-if="relatedGrants.length && !loadingRelated">
                     <div class="container">
-
-                      <div class="value-container">
-                        <div class="chart_container chart_container--big">
-                          {% if stats_history|length %}
-                          <p class="sub-title font-weight-semibold font-caption mb-1 pt-1">Marketing History Over Time</p>
-                          <table id=stats_history>
-                            <tr class="table_header">
-                              <td>
-                                When
-                              </td>
-                              <td>
-                                Impressions
-                              </td>
-                              <td>
-                                Added to Cart
-                              </td>
-                              <td>
-                                Contributions
-                              </td>
-                            </tr>
-                          {% for ele in stats_history %}
-                            <tr>
-                              <td>
-                                {{ele.created_on|date:"Y/m/d"}}
-                              </td>
-                              <td>
-                                {{ele.data.impressions}}
-                              </td>
-                              <td>
-                                {{ele.data.in_cart}}
-                              </td>
-                              <td>
-                                {{ele.data.contributions}}
-                              </td>
-                            </tr>
-                          {% endfor %}
-                          </table>
-                          {% endif %}
-
-                          <p class="sub-title font-weight-semibold font-caption mt-4 mb-1 pt-1">Contribution History (in USD)</p>
-                          <div class="chart_container__content">
-                            <div id="grant_chart"></div>
-                          </div>
-                          <div class="grant-status-list">
-                            <p><span class="box box_1"></span>{% trans "Contributions" %}</p>
-                            <p><span class="box box_2"></span>{% trans "CLR Matching Funds" %}</p>
-                          </div>
+                      <div class="row">
+                        <div class="col-12 col-md-6 col-xl-4 mb-4 infinite-item grant-card" v-for="relgrant in relatedGrants">
+                          <a class="text-decoration-none" :href="relgrant.details_url">
+                            <div class="card">
+                              <b-img-lazy :src="relgrant.logo_url" class="card-img-top" :alt="relgrant.title"></b-img-lazy>
+                              <div class="card-body">
+                                <h5 class="card-title">[[relgrant.title]]</h5>
+                                <p class="card-text">[[relgrant.description | truncate(150)]]</p>
+                                <div class="d-flex">
+                                  <div v-for="member in relgrant.team_members" :key="member.pk">
+                                    <b-img-lazy class="rounded-circle bg-white" width="40" height="40" :src="`/dynamic/avatar/${member.fields.handle}`" alt="member.fields.handle"></b-img-lazy>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </a>
                         </div>
                       </div>
-
                     </div>
                   </div>
-                {% endif %}
-              </b-tab>
-              {% endif %}
 
-            </b-tabs>
+                  <b-skeleton-wrapper :loading="loadingRelated">
+                    <template #loading>
+                        <b-row class="mb-3">
+                          <b-col cols="12" md="6" xl="4" v-for="index in 3" :key="index" class="mb-3">
+                            <b-card img-top no-body>
+                              <b-skeleton-img card-img="top" ></b-skeleton-img>
+                              <b-card-body>
+                                <b-skeleton width="85%"></b-skeleton>
+                                <b-skeleton width="55%"></b-skeleton>
+                                <b-skeleton width="70%"></b-skeleton>
+                                <b-skeleton type="avatar"></b-skeleton>
+                              </b-card-body>
+                            </b-card>
+                          </b-col>
+                        </b-row>
+                    </template>
+                  </b-skeleton-wrapper>
+
+                  <div class="text-center">
+                    <button class="btn btn-outline-primary btn-sm mt-n4 mb-4" v-if="relatedGrantsIds.length && relatedGrantsHasNext" @click="fetchRelated()" :disabled="loadingRelated">Load more</button>
+                  </div>
+                </b-tab>
+              </b-tabs>
+            </div>
           </div>
-
-
         </div>
 
+
         <div id="side-cart" class="grant-side-cart px-5 px-md-4 pb-5 pb-md-0 pt-md-0" style="display: none;">
           {% include 'grants/detail/side-cart.html' %}
         </div>
@@ -451,8 +292,8 @@ <h4>{{ele.0}}: (avg {{ele.1.1|floatformat:2}})</h4>
       {{user_code|json_script:"user_code"}}
       <script>
         var grantDetails = {
-                  grant_id: "{{ grant.id }}"
-                };
+          grant_id: "{{ grant.id }}"
+        };
         var user_code = JSON.parse(document.getElementById('user_code').textContent);
         var verification_tweet = JSON.parse(document.getElementById('verification_tweet').textContent);
 
diff --git a/app/grants/templates/grants/detail/template-grant-details.html b/app/grants/templates/grants/detail/template-grant-details.html
index d730e5ead64..82fd83586a4 100644
--- a/app/grants/templates/grants/detail/template-grant-details.html
+++ b/app/grants/templates/grants/detail/template-grant-details.html
@@ -2,182 +2,230 @@
 <script type="text/x-template" id="template-grant-details">
   <div>
     <slot></slot>
-    <div class="container grid grid-template-sidebar mb-5">
-      <div class="grant-data w-100">
-        <div class="d-flex align-items-baseline">
-          <h1 class="h3">
+    <div class="container grid grid-template-sidebar">
+      <div class="grant-data">
+        <div class="d-flex align-items-center mt-3 mb-2 mb-sm-0">
+          <h2 class="mb-0">
             [[grant.title]]
-          </h1>
-          <time :datetime="grant.last_update" v-b-tooltip.hover.top="grant.last_update" class="font-smaller-3 ml-3">Updated: [[grant.last_update | moment]]</time>
+          </h2>
+          <time :datetime="grant.last_update" v-b-tooltip.hover.top="grant.last_update" class="font-smaller-3 ml-3 text-grey-400">Updated: [[grant.last_update | moment]]</time>
         </div>
-        <div class="font-smaller-3">
-          <template v-if="grant.tenants && grant.tenants.indexOf('ETH') > -1">
-            <span class="" v-b-tooltip.hover.top="grant.admin_address"><i class="fab fa-fw fa-ethereum"></i> [[grant.admin_address | truncateHash]] <copy-clipboard class="btn btn-sm text-highlight-dark-blue" :string="grant.admin_address"><i class="far fa-copy"></i></copy-clipboard></span>
-
-            <a target="_blank" :href="`https://etherscan.io/address/${grant.admin_address}`" class="col-auto" id="wallet-etherscan-link">View on Etherscan (L1) <i class="ml-1 fas fa-external-link-alt"></i></a>
-            <a target="_blank" :href="`https://zkscan.io/explorer/accounts/${grant.admin_address}`" class="col-auto" id="wallet-zkscan-link">View on zkScan (L2) <i class="ml-1 fas fa-external-link-alt"></i></a>
-          </template>
-          <template v-if="grant.tenants && grant.tenants.indexOf('ZCASH') > -1">
-            <div class="d-flex align-items-center">
-              <img class="mr-1" src="{% static 'v2/images/chains/zcash.svg' %}" alt="" width="16">
-              <a target="_blank" :href="`https://sochain.com/address/ZEC/${grant.zcash_payout_address}`">
-                <span id="z-cash-address" class="wallet-address" v-b-tooltip.hover.top="grant.zcash_payout_address">
-                  [[grant.zcash_payout_address | truncateHash]]
-                </span>
-              </a>
-              <copy-clipboard class="btn btn-sm text-highlight-dark-blue" :string="grant.zcash_payout_address"><i class="far fa-copy"></i></copy-clipboard>
-            </div>
-          </template>
-
-          <template v-if="grant.tenants && grant.tenants.indexOf('CELO') > -1">
-            <div class="d-flex align-items-center">
-              <img class="mr-1" src="{% static 'v2/images/chains/celo.svg' %}" alt="" width="16">
-              <a target="_blank" :href="`https://explorer.celo.org/address/${grant.celo_payout_address}`">
-                <span id="celo-address" class="wallet-address" v-b-tooltip.hover.top="grant.celo_payout_address">
-                  [[grant.celo_payout_address | truncateHash]]
-                </span>
-              </a>
-              <copy-clipboard class="btn btn-sm text-highlight-dark-blue" :string="grant.celo_payout_address"><i class="far fa-copy"></i></copy-clipboard>
-            </div>
-          </template>
-
-          <template v-if="grant.tenants && grant.tenants.indexOf('ZIL') > -1">
-            <div class="d-flex align-items-center">
-              <img class="mr-1" src="{% static 'v2/images/chains/zilliqa.svg' %}" alt="" width="16">
-              <a target="_blank" :href="`https://viewblock.io/zilliqa/address/${grant.zil_payout_address}`">
-                <span id="zil-address" class="wallet-address" v-b-tooltip.hover.top="grant.zil_payout_address">
-                  [[grant.zil_payout_address | truncateHash]]
-                </span>
-              </a>
-              <copy-clipboard class="btn btn-sm text-highlight-dark-blue" :string="grant.zil_payout_address"><i class="far fa-copy"></i></copy-clipboard>
+        <div class="border-bottom font-smaller-3 pb-3">
+
+          <!-- Owner/Project links -->
+          <div class="row">
+            <div class="col-auto text-center my-auto">
+              <i class="fas fa-fw fa-globe text-grey-300"></i> <a target="_blank" :href="grant.reference_url">[[grant.reference_url]]</a>
             </div>
-          </template>
-
-          <template v-if="grant.tenants && grant.tenants.indexOf('HARMONY') > -1">
-            <div class="d-flex align-items-center">
-              <img class="mr-1" src="{% static 'v2/images/chains/harmony.svg' %}" alt="" width="16">
-              <a target="_blank" :href="`https://explorer.harmony.one/#/address/${grant.harmony_payout_address}`">
-                <span id="harmony-address" class="wallet-address" v-b-tooltip.hover.top="grant.harmony_payout_address">
-                  [[grant.harmony_payout_address | truncateHash]]
-                </span>
-              </a>
-              <copy-clipboard class="btn btn-sm text-highlight-dark-blue" :string="grant.harmony_payout_address"><i class="far fa-copy"></i></copy-clipboard>
+            <div class="col-auto text-center my-auto">
+              <i class="text-grey-300 fab fa-fw fa-twitter-square "></i> <a target="_blank" :href="`https://twitter.com/${grant.twitter_handle_1}`">@[[grant.twitter_handle_1]]</a>
+              <span v-if="grant.verified" class="py-0 position-relative px-0 btn btn-sm animate-verify" id="tooltip-verify">
+                <b-tooltip target="tooltip-verify" triggers="hover" variant="light">
+                  <p class="h6 my-2 text-left">
+                    Verified Ownership
+                    <img width="18" src="{% static "v2/images/badge-verify.svg" %}">
+                  </p>
+                  <p class="text-left">Grant owner has verified ownership of their twitter account.</p>
+                </b-tooltip>
+                <img width="13" src="{% static 'v2/images/badge-verify.svg' %}" alt="">
+              </span>
             </div>
-          </template>
-
-          <template v-if="grant.tenants && grant.tenants.indexOf('BINANCE') > -1">
-            <div class="d-flex align-items-center">
-              <img class="mr-1" src="{% static 'v2/images/chains/binance.svg' %}" alt="" width="16">
-              <a target="_blank" :href="`https://bscscan.com/address/${grant.binance_payout_address}`">
-                <span id="binance-address" class="wallet-address" v-b-tooltip.hover.top="grant.binance_payout_address">
-                  [[grant.binance_payout_address | truncateHash]]
-                </span>
-              </a>
-              <copy-clipboard class="btn btn-sm text-highlight-dark-blue" :string="grant.binance_payout_address"><i class="far fa-copy"></i></copy-clipboard>
-             </div>
-          </template>
-
-          <template v-if="grant.tenants && grant.tenants.indexOf('POLKADOT') > -1">
-            <div class="d-flex align-items-center">
-              <img class="mr-1" src="{% static 'v2/images/chains/polkadot.svg' %}" alt="" width="16">
-              <a target="_blank" :href="`https://polkadot.subscan.io/account/${grant.polkadot_payout_address}`">
-                <span id="polkadot-address" class="wallet-address" v-b-tooltip.hover.top="grant.polkadot_payout_address">
-                  [[grant.polkadot_payout_address | truncateHash]]
-                </span>
-              </a>
-              <copy-clipboard class="btn btn-sm text-highlight-dark-blue" :string="grant.polkadot_payout_address"><i class="far fa-copy"></i></copy-clipboard>
+            <div class="col-auto text-center my-auto">
+              <!-- <div v-if="grant.funding_info" class="flex-fill text-md-left text-center ">
+                <svg class="provider-icon font-smaller-8" viewBox="0 0 27 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path fill-rule="evenodd" clip-rule="evenodd" d="M24.0073 2.673C24.7408 2.55584 25.2403 1.86631 25.1232 1.13289C25.006 0.399463 24.3165 -0.100121 23.5831 0.0170346L4.15319 3.12073C1.76047 3.50293 0 5.56693 0 7.98999V22.8621C0 24.5951 1.40489 26 3.13791 26H22.8985C24.6315 26 26.0364 24.5951 26.0364 22.8621V9.86219C26.0364 8.13001 24.6332 6.72429 22.8993 6.72429H4.96759C4.22487 6.72429 3.62277 7.32638 3.62277 8.0691C3.62277 8.81183 4.22487 9.41392 4.96759 9.41392H22.8993C23.1461 9.41392 23.3468 9.61378 23.3468 9.86219V13.474C23.2419 13.457 23.1344 13.4482 23.0248 13.4482H17.7261C16.6215 13.4482 15.7261 14.3436 15.7261 15.4482V17.0274C15.7261 18.132 16.6215 19.0274 17.7261 19.0274H23.0248C23.1344 19.0274 23.2419 19.0186 23.3468 19.0016V22.8621C23.3468 23.1097 23.1461 23.3104 22.8985 23.3104H3.13791C2.89033 23.3104 2.68963 23.1097 2.68963 22.8621V7.98999C2.68963 6.8886 3.48985 5.95042 4.57745 5.77669L24.0073 2.673ZM19.4451 16.2377C19.4451 16.7513 19.0288 17.1676 18.5152 17.1676C18.0017 17.1676 17.5854 16.7513 17.5854 16.2377C17.5854 15.7242 18.0017 15.3078 18.5152 15.3078C19.0288 15.3078 19.4451 15.7242 19.4451 16.2377Z" fill="currentColor"></path>
+                </svg>
+                <span>[[grant.funding_info]]</span>
+              </div> -->
+
+              <template v-if="grant.tenants && grant.tenants.indexOf('ETH') > -1">
+                <span v-b-tooltip.hover.bottom="grant.admin_address">
+                  <i class="text-grey-300 fab fa-fw fa-ethereum"></i> 
+                  <a :href="`https://etherscan.io/address/${grant.admin_address}`">[[grant.admin_address | truncateHash]]</a>
+                  <copy-clipboard class="btn btn-sm text-highlight-dark-blue" :string="grant.admin_address"><i class="far fa-copy"></i></copy-clipboard></span>
+                  <!-- <a target="_blank" :href="`https://etherscan.io/address/${grant.admin_address}`" class="col-auto" id="wallet-etherscan-link">View on Etherscan (L1) <i class="ml-1 fas fa-external-link-alt"></i></a> -->
+                  <!-- <a target="_blank" :href="`https://zkscan.io/explorer/accounts/${grant.admin_address}`" class="col-auto" id="wallet-zkscan-link">View on zkScan (L2) <i class="ml-1 fas fa-external-link-alt"></i></a> -->
+              </template>
+               
+              <template v-if="grant.tenants && grant.tenants.indexOf('ZCASH') > -1">
+                <div class="d-flex align-items-center">
+                  <img class="mr-1 text-grey-300" src="{% static 'v2/images/chains/zcash.svg' %}" alt="" width="16">
+                  <a target="_blank" :href="`https://sochain.com/address/ZEC/${grant.zcash_payout_address}`">
+                    <span id="z-cash-address" class="wallet-address" v-b-tooltip.hover.bottom="grant.zcash_payout_address">
+                      [[grant.zcash_payout_address | truncateHash]]
+                    </span>
+                  </a>
+                  <copy-clipboard class="btn btn-sm text-highlight-dark-blue" :string="grant.zcash_payout_address"><i class="far fa-copy"></i></copy-clipboard>
+                </div>
+              </template>
+
+              <template v-if="grant.tenants && grant.tenants.indexOf('CELO') > -1">
+                <div class="d-flex align-items-center">
+                  <img class="mr-1 text-grey-300" src="{% static 'v2/images/chains/celo.svg' %}" alt="" width="16">
+                  <a target="_blank" :href="`https://explorer.celo.org/address/${grant.celo_payout_address}`">
+                    <span id="celo-address" class="wallet-address" v-b-tooltip.hover.bottom="grant.celo_payout_address">
+                      [[grant.celo_payout_address | truncateHash]]
+                    </span>
+                  </a>
+                  <copy-clipboard class="btn btn-sm text-highlight-dark-blue" :string="grant.celo_payout_address"><i class="far fa-copy"></i></copy-clipboard>
+                </div>
+              </template>
+
+              <template v-if="grant.tenants && grant.tenants.indexOf('ZIL') > -1">
+                <div class="d-flex align-items-center">
+                  <img class="mr-1 text-grey-300" src="{% static 'v2/images/chains/zilliqa.svg' %}" alt="" width="16">
+                  <a target="_blank" :href="`https://viewblock.io/zilliqa/address/${grant.zil_payout_address}`">
+                    <span id="zil-address" class="wallet-address" v-b-tooltip.hover.bottom="grant.zil_payout_address">
+                      [[grant.zil_payout_address | truncateHash]]
+                    </span>
+                  </a>
+                  <copy-clipboard class="btn btn-sm text-highlight-dark-blue" :string="grant.zil_payout_address"><i class="far fa-copy"></i></copy-clipboard>
+                </div>
+              </template>
+
+              <template v-if="grant.tenants && grant.tenants.indexOf('HARMONY') > -1">
+                <div class="d-flex align-items-center">
+                  <img class="mr-1 text-grey-300" src="{% static 'v2/images/chains/harmony.svg' %}" alt="" width="16">
+                  <a target="_blank" :href="`https://explorer.harmony.one/#/address/${grant.harmony_payout_address}`">
+                    <span id="harmony-address" class="wallet-address" v-b-tooltip.hover.bottom="grant.harmony_payout_address">
+                      [[grant.harmony_payout_address | truncateHash]]
+                    </span>
+                  </a>
+                  <copy-clipboard class="btn btn-sm text-highlight-dark-blue" :string="grant.harmony_payout_address"><i class="far fa-copy"></i></copy-clipboard>
+                </div>
+              </template>
+
+              <template v-if="grant.tenants && grant.tenants.indexOf('BINANCE') > -1">
+                <div class="d-flex align-items-center">
+                  <img class="mr-1 text-grey-300" src="{% static 'v2/images/chains/binance.svg' %}" alt="" width="16">
+                  <a target="_blank" :href="`https://bscscan.com/address/${grant.binance_payout_address}`">
+                    <span id="binance-address" class="wallet-address" v-b-tooltip.hover.bottom="grant.binance_payout_address">
+                      [[grant.binance_payout_address | truncateHash]]
+                    </span>
+                  </a>
+                  <copy-clipboard class="btn btn-sm text-highlight-dark-blue" :string="grant.binance_payout_address"><i class="far fa-copy"></i></copy-clipboard>
+                </div>
+              </template>
+
+              <template v-if="grant.tenants && grant.tenants.indexOf('POLKADOT') > -1">
+                <div class="d-flex align-items-center">
+                  <img class="mr-1 text-grey-300" src="{% static 'v2/images/chains/polkadot.svg' %}" alt="" width="16">
+                  <a target="_blank" :href="`https://polkadot.subscan.io/account/${grant.polkadot_payout_address}`">
+                    <span id="polkadot-address" class="wallet-address" v-b-tooltip.hover.bottom="grant.polkadot_payout_address">
+                      [[grant.polkadot_payout_address | truncateHash]]
+                    </span>
+                  </a>
+                  <copy-clipboard class="btn btn-sm text-highlight-dark-blue" :string="grant.polkadot_payout_address"><i class="far fa-copy"></i></copy-clipboard>
+                </div>
+              </template>
+
+              <template v-if="grant.tenants && grant.tenants.indexOf('KUSAMA') > -1">
+                <div class="d-flex align-items-center">
+                  <img class="mr-1 text-grey-300" src="{% static 'v2/images/chains/kusama.svg' %}" alt="" width="16">
+                  <a target="_blank" :href="`https://kusama.subscan.io/account/${grant.kusama_payout_address}`">
+                    <span id="kusama-address" class="wallet-address" v-b-tooltip.hover.bottom="grant.kusama_payout_address">
+                      [[grant.kusama_payout_address | truncateHash]]
+                    </span>
+                  </a>
+                  <copy-clipboard class="btn btn-sm text-highlight-dark-blue" :string="grant.kusama_payout_address"><i class="far fa-copy"></i></copy-clipboard>
+                </div>
+              </template>
+
+              <template v-if="grant.tenants && grant.tenants.indexOf('RSK') > -1">
+                <div class="d-flex align-items-center">
+                  <img class="mr-1 text-grey-300" src="{% static 'v2/images/chains/rsk.svg' %}" alt="" width="16">
+                  <a target="_blank" :href="`https://explorer.rsk.co/address/${grant.rsk_payout_address}`">
+                    <span id="rsk-address" class="wallet-address" v-b-tooltip.hover.bottom="grant.rsk_payout_address">
+                      [[grant.rsk_payout_address | truncateHash]]
+                    </span>
+                  </a>
+                  <copy-clipboard class="btn btn-sm text-highlight-dark-blue" :string="grant.rsk_payout_address"><i class="far fa-copy"></i></copy-clipboard>
+                </div>
+              </template>
+
             </div>
-          </template>
-
-          <template v-if="grant.tenants && grant.tenants.indexOf('KUSAMA') > -1">
-            <div class="d-flex align-items-center">
-              <img class="mr-1" src="{% static 'v2/images/chains/kusama.svg' %}" alt="" width="16">
-              <a target="_blank" :href="`https://kusama.subscan.io/account/${grant.kusama_payout_address}`">
-                <span id="kusama-address" class="wallet-address" v-b-tooltip.hover.top="grant.kusama_payout_address">
-                  [[grant.kusama_payout_address | truncateHash]]
-                </span>
-              </a>
-              <copy-clipboard class="btn btn-sm text-highlight-dark-blue" :string="grant.kusama_payout_address"><i class="far fa-copy"></i></copy-clipboard>
+            <div class="col-auto text-center my-auto">
+              <div class="d-flex justify-content-end font-body">
+                <div class="flex-fill text-md-left text-center" v-if="isUserLogged">
+                  <button @click="toggleFollowingGrant(grant.id, $event)" v-b-tooltip.hover.bottom="!grant.favorite ? 'follow' : 'unfollow'" :class="`btn btn-link font-smaller-5 mx-0 my-auto ${!grant.favorite ? 'text-grey-300' : 'text-primary'}`" :data-grant="grant.id">
+                    <i :class="`${!grant.favorite ? 'far' : 'fa' } fa-star`" ></i>
+                  </button>
+                </div>
+              </div>
             </div>
-          </template>
-
-          <template v-if="grant.tenants && grant.tenants.indexOf('RSK') > -1">
-            <div class="d-flex align-items-center">
-              <img class="mr-1" src="{% static 'v2/images/chains/rsk.svg' %}" alt="" width="16">
-              <a target="_blank" :href="`https://explorer.rsk.co/address/${grant.rsk_payout_address}`">
-                <span id="rsk-address" class="wallet-address" v-b-tooltip.hover.top="grant.rsk_payout_address">
-                  [[grant.rsk_payout_address | truncateHash]]
-                </span>
-              </a>
-              <copy-clipboard class="btn btn-sm text-highlight-dark-blue" :string="grant.rsk_payout_address"><i class="far fa-copy"></i></copy-clipboard>
+          </div>
+
+          <!-- Category Details -->
+          <div class="row mt-5">
+            <template v-if="grant.region && grant.region.label != 'undefined'">
+              <div class="col">
+                <span class="px-2">Region</span>
+                <a :href="`/grants/${item.fields.name}`" v-for="item in grant.grant_type" class="badge badge-pill bg-lightpurple text-primary py-1 px-2 font-smaller-2 font-weight-normal mr-2">[[item.fields.label]]</a>
+              </div>
+            </template>
+            <div class="col">
+              <span class="px-2">Category</span>
+              <a :href="`/grants/${item.fields.name}`" v-for="item in grant.grant_type" class="badge badge-pill bg-lightpurple text-primary py-1 px-2 font-smaller-2 font-weight-normal mr-2">[[item.fields.label]]</a>
             </div>
-          </template>
+            <template v-if="grant.categories && grant.categories.length > 0">
+              <div class="col">
+                <span class="px-2">Subcategory</span>
+                <a :href="`/grants/${grant.grant_type[0].fields.name}?category=${item.fields.category}`" v-for="item in grant.categories" class="badge badge-pill bg-lightpurple text-primary py-1 px-2 font-smaller-2 font-weight-normal mr-2">[[item.fields.category]]</a>
+              </div>
+            </template>
+          </div>
 
         </div>
-        <div class="grant-description mt-4 mb-5">
-          <render-quill :delta="grant.description_rich"></render-quill>
-        </div>
 
-        <div class="d-flex justify-content-between align-items-center font-body">
-
-          <span class="flex-fill text-md-left text-center ">
-            <i class="text-black-70 fab fa-fw fa-twitter-square "></i> <a target="_blank" :href="`https://twitter.com/${grant.twitter_handle_1}`">@[[grant.twitter_handle_1]]</a>
-            <span v-if="grant.verified" class="py-0 position-relative px-0 btn btn-sm animate-verify" id="tooltip-verify">
-              <b-tooltip target="tooltip-verify" triggers="hover" variant="light">
-                <p class="h6 my-2 text-left">
-                  Verified Ownership
-                  <img width="18" src="{% static "v2/images/badge-verify.svg" %}">
-                </p>
-                <p class="text-left">Grant owner has verified ownership of their twitter account.</p>
-              </b-tooltip>
-              <img width="13" src="{% static 'v2/images/badge-verify.svg' %}" alt="">
-            </span>
-          </span>
-
-          <div v-if="grant.github_project_url" class="flex-fill text-md-left text-center ">
-            <i class="text-black-70 fab fa-fw fa-github"></i> <a target="_blank" :href="grant.github_project_url">Project repo</a>
-          </div>
-          <div class="flex-fill text-md-left text-center ">
-            <i class="text-black-70 fas fa-fw fa-link"></i> <a target="_blank" :href="grant.reference_url">[[grant.reference_url]]</a>
-          </div>
-          <div v-if="grant.funding_info" class="flex-fill text-md-left text-center ">
-            <i class="text-black-70 fas fa-fw fa-donate"></i> <span>[[grant.funding_info]]</span>
-          </div>
-          <div class="flex-fill text-md-left text-center" v-if="isUserLogged">
-            <button @click="toggleFollowingGrant(grant.id, $event)" :class="`text-decoration-none btn btn-link star-action m-0 p-0 gc-text-blue ${!grant.favorite ? 'text-muted' : ''}`" :data-grant="grant.id">
-              <i :class="`${!grant.favorite ? 'far' : 'fa' } fa-star`" ></i>
-              <span class="ml-1 font-body">[[ !grant.favorite ? 'Follow' : 'Following' ]]</span>
-            </button>
+        <!-- CLR details -->
+        <div class="border-bottom mt-3 pb-3">
+          <div class="row">
+            <h3 class="col-12" v-if="grant.clr_round_num && grant.is_clr_eligible">
+              Grants Round [[grant.clr_round_num]]
+            </h3>
+            <h3 class="col-12" v-else>
+              Not in an active CLR round
+            </h3>
           </div>
-        </div>
-        <div class="mt-5">
-          <h6 class="font-smaller-1 font-weight-bold mb-3 text-black-70">TEAM</h6>
-          <div class="d-flex" style="gap: 16px;">
-            <div v-for="member in teamFormatted" :key="member.id" class="d-flex flex-column align-items-center" v-if="member?.text">
-              <b-img-lazy class="rounded-circle bg-white" width="50" height="50" :src="member.avatar_url" :alt="member.text"></b-img-lazy>
-              <a :href="`/profile/${member.text}`" class="">[[member.text]]</a>
+          <div class="row mt-2">
+            <div class="col col-4">
+              <h2>$[[grant.amount_received | round ]]</h2>
+              <span>raised from [[grant.positive_round_contributor_count]] contributors</span>
+            </div>
+            <div v-if="[[ grant?.clr_prediction_curve?.[0]?.[1] ]] > 0" class="col col-4">
+              <h2 class="text-secondary">+$[[ grant?.clr_prediction_curve?.[0]?.[1] || 0 | round | formatNumber ]]</h2>
+              <span v-if="grant.clr_round_num && grant.is_clr_eligible">estimated QF matching</span>
+              <span v-if="!grant.clr_round_num || !grant.is_clr_eligible">Total QF matched</span>
             </div>
           </div>
         </div>
+        
+        <!-- About -->
+        <div class="grant-description mt-4 mb-1">
+          <h3>About</h3>
 
+          <render-quill :delta="grant.description_rich"></render-quill>
+        </div>
       </div>
 
+      <!-- Grant Management -->
       <div class="grant-managment">
         <div class="my-0 mx-0" v-if="grant.active && !grant.verified">
-          <div class="bs-alert alert alert-warning pt-0 pb-0 pr-2 pl-2 d-flex">
-            <div class="font-body">
+          <div class="bs-alert alert alert-warning pt-2 pb-0 pr-2 pl-2 d-flex">
+            <div class="text-center">
               <i class="fas fa-exclamation-triangle verification__warning__icon mr-1 my-2 d-inline-block" style="font-size:1rem"></i>
-              <div class="uppercase font-weight-semibold d-inline">
+              <div class="d-inline-block uppercase">
                 Warning: This grant has not verified their ownership of the twitter account listed.
               </div>
               <template v-if="grant.is_on_team && user_code">
                 <div class="my-2 d-inline-block font-weight-semibold text-center w-100">
-                  <b-button v-b-modal.modal-start-twitter-verification size="sm" variant="twitter" class="font-weight-semibold font-caption">
+                  <b-button v-b-modal.modal-start-twitter-verification variant="primary">
                     <i class="fab fa-twitter mr-2"></i>
                     VERIFY GRANT
                   </b-button>
-                  <span class="mx-2">OR</span>
-                  <a class="font-caption" target="_blank" href="https://github.com/gitcoinco/web/issues/new?assignees=&labels=help%20wanted&template=custom.md&title=Verify%20Grant%20Issue">SUBMIT SUPPORT REQUEST</a>.
+                  <br/> 
+                  <span class="small px-2">OR</span> 
+                  <a class="d-inline-block font-caption pt-2" target="_blank" href="https://github.com/gitcoinco/web/issues/new?assignees=&labels=help%20wanted&template=custom.md&title=Verify%20Grant%20Issue">SUBMIT SUPPORT REQUEST</a>.
                 </div>
               </template>
               <template v-else-if="grant.is_on_team && !user_code">
@@ -193,109 +241,23 @@ <h6 class="font-smaller-1 font-weight-bold mb-3 text-black-70">TEAM</h6>
         <a class="btn btn-block btn-primary" :href="grant.details_url" target="_blank" v-else-if="!fullview && (grant.active && grant.is_on_team)">Edit Grant</a>
       </div>
 
+      <!-- CLR details and Add-to/remove-from cart -->
       <div class="grant-checkout rounded shadow-sm bg-white p-3 border">
-        <div v-if="grant.clr_round_num && grant.is_clr_eligible" class="">
-          <div class="d-flex justify-content-between mb-2">
-            <div class="flex-fill mr-2">
-              <div class="clr-label label font-caption font-weight-semibold mb-1 p-1">
-                <span class="text-capitalize">[[grant.clr_round_num]]</span>
-                MATCH ROUND
-              </div>
-
-              <div class="gc-text-green font-weight-bold">
-                [[ grant.clr_prediction_curve[0][1] || 0 | round | formatNumber ]]
-                <span>USD</span>
-              </div>
-              <div class="gc-text-green">
-                Estimated match
-              </div>
-
-            </div>
-
-            <div class="flex-fill ml-2">
-              <div class="text-black-70">
-                <div class="text-uppercase py-1 font-weight-semibold font-caption">[[grant.clr_round_num]]</div>
-              </div>
-              <div class="gc-text-darkblue font-weight-bold">
-                [[grant.amount_received_in_round || 0 | round | formatNumber ]]
-                <span>USD</span>
-              </div>
-              <div class="gc-text-darkblue">
-                [[grant.positive_round_contributor_count]] Contributors
-              </div>
+        <div v-if="grant.clr_prediction_curve?.length" style="max-width: 250px;" :class="`mx-auto mb-3 mt-2 position-relative${grant.clr_round_num && grant.is_clr_eligible ? '' : ' clr-disabled'}`">
+          <svg width="145" height="77" viewBox="0 0 145 77" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M1.15491 76.0846C1.15491 22.2514 19.2304 -0.706763 108.423 1.27248" stroke="#C4C1CF" stroke-width="2"/>
+            <line x1="19" y1="21.5" x2="145" y2="21.5" stroke="#11BC92" stroke-dasharray="5 5"/>
+            <line x1="2" y1="74.5" x2="145" y2="74.5" stroke="#11BC92" stroke-dasharray="5 5"/>
+          </svg>
+          <div class="d-inline-flex flex-column-reverse mt-n4 position-absolute" style="right: 0px;">
+            <div v-for="(prediction, index) in grant.clr_prediction_curve" v-if="grant.clr_prediction_curve && (index == 1 || index == 3)" class="bg-white d-flex flex-column" style="flex: 1 1 50%;margin-top: 14px;">
+              <!-- 1, 100 $ matching (reversed to display against fake chart) -->
+              <span>$[[prediction[0] ]] contribution</span>
+              <span class="text-secondary"><b>$[[prediction[2] || 0 | round]] match</b></span>
             </div>
           </div>
-          <!-- [[grant.clr_prediction_curve]] -->
-          <div class="arrow_box mb-3">
-            <div class="align-items-center d-flex font-smaller-2 justify-content-between px-3 py-2" style="border-bottom: 1px solid #0FCE7C;">
-              Your Contribution Goes A Long Way!
-
-              <img v-if="grant.tenants.indexOf('ETH') > -1" class="" height="24"
-                src="{% static "v2/images/diamonds_high_fiving.gif" %}"
-              />
-
-              <img v-if="grant.tenants.indexOf('ZCASH') > -1" class="" height="24"
-                src="{% static "v2/images/chains/zcash.svg" %}"
-              />
-
-              <img v-if="grant.tenants.indexOf('CELO') > -1" class="" height="24"
-                src="{% static "v2/images/chains/celo.svg" %}"
-              />
+        </div>        
 
-              <img v-if="grant.tenants.indexOf('ZIL') > -1" class="" height="24"
-                src="{% static "v2/images/chains/zillqa.svg" %}"
-              />
-
-            </div>
-
-            <div class="d-flex d-flex flex-wrap justify-content-between mt-2 px-3 py-2 font-body">
-              <div v-for="(prediction, index) in grant.clr_prediction_curve" v-if="grant.clr_prediction_curve && index >= 1 && index <= 4" class="d-flex flex-column" style="flex: 1 1 50%;">
-                <!-- 1, 10, 100, 1000 usd matching -->
-                <span>[[prediction[0] ]] USD contribution</span>
-                <span class="gc-text-green"><i class="fas fa-arrow-circle-right"></i> + <b>[[prediction[2] || 0 | round]] USD</b> match</span>
-              </div>
-            </div>
-            <div class="w-100 text-center text-black-70 pb-1 font-smaller-5">
-              Next update : [[grant.safe_next_clr_calc_date ]]
-              <span class="mx-1">|</span>
-              Last updated : [[grant.last_clr_calc_date ]]
-            </div>
-          </div>
-        </div>
-
-
-
-        <div v-else>
-          <div class="d-flex justify-content-between mb-2">
-            <div class="flex-fill mr-2">
-              <div class="clr-label label font-caption font-weight-semibold mb-1 p-1">
-                LAST MATCH ROUND
-              </div>
-
-              <div class="gc-text-green font-weight-bold" v-if="grant?.clr_prediction_curve">
-                [[ grant?.clr_prediction_curve[0][1] || 0 | round | formatNumber ]]
-                <span>USD</span>
-              </div>
-              <div class="gc-text-green">
-                Final match
-              </div>
-
-            </div>
-
-            <div class="flex-fill ml-2">
-              <div class="text-black-70">
-                <div class="text-uppercase py-1 font-weight-semibold font-caption">All Time Funding</div>
-              </div>
-              <div class="gc-text-darkblue font-weight-bold">
-                [[grant.amount_received | round ]]
-                <span>USD</span>
-              </div>
-              <div class="gc-text-darkblue">
-                [[grant.positive_round_contributor_count]] Contributors
-              </div>
-            </div>
-          </div>
-        </div>
         <template v-if="grant.link_to_new_grant">
           <a :href="grant.link_to_new_grant" class="btn btn-block btn-primary">Visit the active grant to fund</a>
         </template>
@@ -305,15 +267,13 @@ <h6 class="font-smaller-1 font-weight-bold mb-3 text-black-70">TEAM</h6>
           </button>
         </template>
         <template v-else>
-
           <button class="btn btn-block btn-outline-danger" @click="removeFromCart()" v-if="grant.isInCart">Remove From Cart</button>
           <button class="btn btn-block btn-primary" @click="addToCart()" v-else >Add to Cart</button>
         </template>
 
-
-        <div class="d-flex justify-content-between mt-2">
-          <div class="d-flex align-items-center font-smaller-2" id="popover-target-1">
-            <span class="fa-stack font-smaller-6 mr-2">
+        <div class="d-flex justify-content-end mt-2">
+          <div class="d-flex align-items-center font-smaller-2 text-muted cursor-pointer" id="popover-target-1">
+            <span class="fa-stack font-smaller-8 mr-1 small text-muted">
               <i class="fas fa-circle fa-stack-2x"></i>
               <i class="fas fa-info fa-stack-1x fa-inverse"></i>
             </span> Rules
@@ -328,8 +288,8 @@ <h6 class="font-smaller-1 font-weight-bold mb-3 text-black-70">TEAM</h6>
             </ul>
             Read all the <a href="https://gitcoin.co/wiki/grants/">rules here</a>.  If you see someone breaking the rules, please use 'Flag Grant' to report them.
           </b-popover>
-          <button @click="flag" class="btn btn-danger btn-sm font-caption font-weight-semibold px-3">
-            Flag <i class="ml-2 far fa-flag"></i>
+          <button @click="flag" class="btn text-muted ml-3 px-1">
+            <i class="fas fa-flag mr-1"></i> Flag 
           </button>
         </div>
         {% if should_show_claim_match_button %}
@@ -345,64 +305,23 @@ <h6 class="font-smaller-1 font-weight-bold mb-3 text-black-70">TEAM</h6>
         {% endif %}
       </div>
 
-      <div class="grant-cat rounded shadow-sm bg-white p-3 border">
-
-        <template v-if="grant.region && grant.region.label != 'undefined'">
-          <h6 class="font-smaller-1 font-weight-bold mb-2 text-black-70">
-            REGION
-          </h6>
-          <div class="d-flex flex-wrap mb-4">
-            <span class="btn btn-outline-primary py-1 font-smaller-4 text-capitalize mr-1">[[grant.region.label]]</span>
-          </div>
-        </template>
-
-        <h6 class="font-smaller-1 font-weight-bold mb-2 text-black-70">
-          CATEGORY
-        </h6>
-        <div class="d-flex flex-wrap">
-          <a :href="`/grants/${item.fields.name}`" v-for="item in grant.grant_type" class="btn btn-outline-primary py-1 font-smaller-4 text-capitalize mr-1">[[item.fields.label]]</a>
-        </div>
-
-        <template v-if="grant.categories && grant.categories.length > 0">
-          <h6 class="font-smaller-1 font-weight-bold mt-4 mb-2 text-black-70">SUB-CATEGORY</h6>
-          <div class="d-flex flex-wrap">
-            <a :href="`/grants/${grant.grant_type[0].fields.name}?category=${item.fields.category}`" v-for="item in grant.categories" class="btn btn-outline-secondary py-1 font-smaller-4 text-capitalize mr-1 mb-1">[[item.fields.category]]</a>
-          </div>
-        </template>
-      </div>
-
-      <div class="grant-wall bg-white p-4 rounded shadow-sm border" v-if="filteredMsg?.length">
-        <div class="font-smaller-1 font-weight-bold mb-3 text-black-70">WALL OF LOVE</div>
-        <div class="d-flex justify-content-between">
-          <!-- [[Object.keys(grant?.metadata).length > 0]] -->
-          <div v-for="msg in filteredMsg" class="" v-if="filteredMsg && grant.metadata" >
-            <div v-if="msg[0].includes('💪 keep up the great work')" class="bg-light rounded px-2 py-1 h2 mb-0"> 💪 <span class="badge badge-primary badge-pill position-absolute font-smaller-5 mt-n2">[[ msg[1] ]]</span></div>
-            <div v-if="msg[0].includes('👍 i appreciate you')" class="bg-light rounded px-2 py-1 h2 mb-0"> 👍 <span class="badge badge-primary badge-pill position-absolute font-smaller-5 mt-n2">[[ msg[1] ]]</span></div>
-            <div v-if="msg[0].includes('🙌 Great Job')" class="bg-light rounded px-2 py-1 h2 mb-0"> 🙌 <span class="badge badge-primary badge-pill position-absolute font-smaller-5 mt-n2">[[ msg[1] ]]</span></div>
-            <div v-if="msg[0].includes('😍 love the mission of your project')" class="bg-light rounded px-2 py-1 h2 mb-0"> 😍 <span class="badge badge-primary badge-pill position-absolute font-smaller-5 mt-n2">[[ msg[1] ]]</span></div>
-          </div>
-        </div>
-
-        <div id="msg-list" class="font-smaller-2">
-          <div v-for="msg in itemsForList " v-if="grant.metadata" class="bg-light rounded p-3 my-3">
-            [[ msg[0] ]]
+      <!-- Grants Team -->
+      <div class="grant-team">
+        <div class="">
+          <h3>Team</h3>
+          <div class="d-flex" style="gap: 16px;">
+            <div v-for="member in teamFormatted" :key="member.id" class="d-flex flex-column align-items-center" v-if="member?.text">
+              <b-img-lazy class="rounded-circle bg-light" width="50" height="50" :src="member.avatar_url" :alt="member.text"></b-img-lazy>
+              <a :href="`/profile/${member.text}`" class="">[[member.text]]</a>
+            </div>
           </div>
         </div>
 
-        <b-pagination
-          pills
-          size="sm"
-          align="center"
-          v-model="currentPage"
-          :total-rows="rows"
-          :per-page="perPage"
-          aria-controls="msg-list"
-          v-if="itemsForList"
-        ></b-pagination>
       </div>
 
     </div>
 
+    <!-- Verify Twitter (step 1) -->
     <b-modal ref="startTwitterVerification" id="modal-start-twitter-verification" hide-footer no-stacking header-class="border-bottom-0" content-class="text-center px-4">
       <img height="45" class="mb-4" src="{% static "v2/images/badge-verify.svg" %}" >
       <h5 class="font-weight-bold mb-3">Verify Grant Ownership</h5>
@@ -410,6 +329,7 @@ <h5 class="font-weight-bold mb-3">Verify Grant Ownership</h5>
       <b-button v-b-modal.modal-twitter-verification size="lg" variant="gc-blue">Verify with twitter</b-button>
     </b-modal>
 
+    <!-- Verify Twitter (step 2) -->
     <b-modal ref="twitterVerification" id="modal-twitter-verification" hide-footer no-stacking header-class="border-bottom-0" content-class="text-center px-4">
       <img height="45" class="mb-4" src="{% static "v2/images/badge-verify.svg" %}" >
       <h5 class="font-weight-bold mb-3">Verify Grant Ownership with Twitter</h5>
@@ -426,6 +346,7 @@ <h5 class="font-weight-bold mb-3">Verify Grant Ownership with Twitter</h5>
       <span class="error" id="validation-errors"></span>
     </b-modal>
 
+    <!-- Edit Grant Details -->
     <b-sidebar
       id="sidebar-grant-edit"
       title="Edit Grant"
@@ -471,12 +392,12 @@ <h5 class="font-weight-bold mb-3">Verify Grant Ownership with Twitter</h5>
 
           ></quill-editor>
 
-
           <div class="text-danger" v-if="errors.description">
             [[errors.description]]
           </div>
         </div>
 
+        <!-- Project url -->
         <div class="col-12 mb-3">
           <label class="font-caption letter-spacing text-black-60 text-uppercase" for="reference_url">Project Website</label>
           <span class="font-smaller-6 badge badge-greylight text-capitalize ml-2">Required</span>
@@ -515,8 +436,7 @@ <h5 class="font-weight-bold mb-3">Verify Grant Ownership with Twitter</h5>
           <input v-model.trim="grant.github_project_url" name="github_project_url" class="form__input form__input-lg" maxlength="150" type="url" placeholder="https://github.com/humanfund"/>
         </div>
 
-
-
+        <!-- Team Members -->
         <div class="col-12 mb-3">
           <label class="font-caption letter-spacing text-black-60 text-uppercase" for="team_members">Team Members</label>
           <v-select id="team_members" label="text" :close-on-select="false" @search="userSearch"  :options="usersOptions" placeholder="Add your team Gitcoin usernames" v-model="teamFormatted" multiple>
@@ -542,9 +462,9 @@ <h5 class="font-weight-bold mb-3">Verify Grant Ownership with Twitter</h5>
           </v-select>
         </div>
 
+        <!-- Region -->
         <div class="col-12 mb-3">
           <label class="font-caption letter-spacing text-black-60 text-uppercase" for="grant_region">Region</label>
-
           <v-select placeholder="Pick your region" :options="grantRegions" label="label" v-model="grant.region">
             <template v-slot:option="option">
               <span class="font-weight-semibold">[[ option.label ]]</span>
@@ -552,6 +472,7 @@ <h5 class="font-weight-bold mb-3">Verify Grant Ownership with Twitter</h5>
           </v-select>
         </div>
 
+        <!-- Save/Cancel -->
         <div class="col-12 mb-3 text-right">
           <button @click="saveGrant($event)" class="btn btn-primary">SAVE CHANGES</button>
         </div>
@@ -567,17 +488,13 @@ <h4 class="alert-heading pt-2 mb-2">Cancel Your Grant</h4>
         </div>
       </form>
     </b-sidebar>
+
   </div>
+
 </script>
 
 <style>
 
-  .grant-description {
-    max-height: 600px;
-    overflow-y: auto;
-    will-change: height;
-  }
-
   .blur-img {
     filter: blur(9px);
     transition: 0.5s all linear;
@@ -589,6 +506,15 @@ <h4 class="alert-heading pt-2 mb-2">Cancel Your Grant</h4>
     object-fit: contain;
     background: black;
   }
+  
+  .ql-editor {
+    padding: 12px 0px;
+  }
+
+  .ql-editor p {
+    color: #757087;
+    font-weight: 300;
+  }
 
   .ql-editor .ql-video {
     height: max(170px, 360px);
@@ -618,6 +544,10 @@ <h4 class="alert-heading pt-2 mb-2">Cancel Your Grant</h4>
     background: white;
   }
 
+  .clr-disabled {
+    opacity: 0.2;
+  }
+
   .grid {
     display: grid;
     margin: auto;
@@ -627,21 +557,19 @@ <h4 class="alert-heading pt-2 mb-2">Cancel Your Grant</h4>
     grid-area: grant-data;
   }
 
-
   .grant-checkout {
     grid-area: auto / grant-checkout;
   }
 
-  .grant-cat {
-    grid-area: auto / grant-cat;
+  .grant-team {
+    grid-area: auto / grant-team;
 
   }
-  .grant-wall {
-    grid-area: auto / grant-wall;
-  }
+
   .grant-managment {
     grid-area: grant-managment;
   }
+
   input[type=color]{
     width: 20px;
     height: 20px;
@@ -650,43 +578,45 @@ <h4 class="alert-heading pt-2 mb-2">Cancel Your Grant</h4>
     background: none;
     padding: 0;
   }
+
   input[type="color"]::-webkit-color-swatch-wrapper {
     padding: 0;
   }
+
   input[type="color"]::-webkit-color-swatch {
     border: solid 1px rgb(58, 58, 58);
     border-radius: 40px;
   }
+
   .grid-template-sidebar {
     grid-template-areas:
       "grant-data"
       "grant-managment"
-      "grant-cat"
       "grant-checkout"
-      "grant-wall";
+      "grant-team"
+      "grant-team";
     gap: 1.5em;
   }
-  @media (min-width: 620px) {
-    .grid {
-      /* max-width: 90%; */
-    }
 
+  .grid-template-sidebar-row {
+    grid-template-areas: "grant-data";
+    gap: 1.5em;
   }
+
   @media (min-width: 960px) {
     .grid-template-sidebar {
       grid-template-areas:
         "grant-data grant-data grant-data grant-managment"
         "grant-data grant-data grant-data grant-checkout"
-        "grant-data grant-data grant-data grant-cat"
-        "grant-data grant-data grant-data grant-wall";
+        "grant-data grant-data grant-data grant-team"
+        "grant-data grant-data grant-data grant-team";
       gap: 1.5em;
-      grid-auto-columns: 1fr 1fr 1fr 2fr;
+      grid-auto-columns: 1fr 1fr 1fr 1.2fr;
     }
 
+    .grid-template-sidebar-row {
+      grid-auto-columns: 1fr 1fr 1fr 1.2fr;
+    }
   }
-  @media (min-width: 700px) {
-
-  }
-
 
 </style>
diff --git a/app/grants/templates/grants/index.html b/app/grants/templates/grants/index.html
index 6141eb6a04b..bcca756b13e 100644
--- a/app/grants/templates/grants/index.html
+++ b/app/grants/templates/grants/index.html
@@ -29,6 +29,12 @@
     <link rel="stylesheet" type="text/x-scss" href={% static "v2/scss/grants/side-cart.scss" %} />
   {% endcompress %}
   <style>
+    
+    #sidebar-quick-view header.b-sidebar-header > strong {
+      font-weight: normal;
+      font-family: 'Miriam Libre';
+    }
+
     .select2-selection .select2-selection--single {
       background: none;
       outline: none;
@@ -133,6 +139,7 @@
                   ref="sidebar-quick-view"
                   title="Grant Details"
                   backdrop-variant="dark"
+                  bg-variant="white"
                   backdrop
                   shadow
                   width="max(80vw, 1000px)"
diff --git a/app/grants/views.py b/app/grants/views.py
index 4f8f9f2792d..3e7e0ca6800 100644
--- a/app/grants/views.py
+++ b/app/grants/views.py
@@ -1571,7 +1571,7 @@ def grant_details_contributions(request, grant_id):
 
         contribution_json['subscription'] = {
             k: getattr(contribution.subscription, k) for k in
-            ['id', 'contributor_profile', 'token_symbol', 'amount_per_period', 'amount_per_period_minus_gas_price', 'amount_per_period_usdt', 'amount_per_period_to_gitcoin']}
+            ['id', 'contributor_profile', 'token_symbol', 'amount_per_period', 'amount_per_period_minus_gas_price', 'amount_per_period_usdt', 'amount_per_period_to_gitcoin', 'comments']}
 
 
         # contribution_json['subscription']