diff --git a/webapp/assets/styles/main.scss b/webapp/assets/styles/main.scss
index fbab1d78f..0ab0e990c 100644
--- a/webapp/assets/styles/main.scss
+++ b/webapp/assets/styles/main.scss
@@ -141,10 +141,9 @@ hr {
   }
 }
 
-.ds-card .ds-section {
+.base-card > .ds-section {
   padding: 0;
-  margin-left: -$space-base;
-  margin-right: -$space-base;
+  margin: -$space-base;
 
   .ds-container {
     padding: $space-base;
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 6b6e78bec..4d1dece7b 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -1,14 +1,11 @@
 <template>
   <div>
-    <ds-card v-if="user && user.image">
-      <p>PROFILE IMAGE</p>
-    </ds-card>
     <ds-space />
     <ds-flex v-if="user" :width="{ base: '100%' }" gutter="base">
       <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
-        <ds-card
+        <base-card
           :class="{ 'disabled-content': user.disabled }"
-          style="position: relative; height: auto;"
+          style="position: relative; height: auto; overflow: visible;"
         >
           <hc-upload v-if="myProfile" :user="user">
             <user-avatar :user="user" class="profile-avatar" size="large"></user-avatar>
@@ -87,12 +84,12 @@
               <ds-text color="soft" size="small" class="hyphenate-text">{{ user.about }}</ds-text>
             </ds-space>
           </template>
-        </ds-card>
+        </base-card>
         <ds-space />
         <ds-heading tag="h3" soft style="text-align: center; margin-bottom: 10px;">
           {{ $t('profile.network.title') }}
         </ds-heading>
-        <ds-card style="position: relative; height: auto;">
+        <base-card style="position: relative; height: auto;">
           <ds-space v-if="user.following && user.following.length" margin="x-small">
             <ds-text tag="h5" color="soft">
               {{ userName | truncate(15) }} {{ $t('profile.network.following') }}
@@ -120,9 +117,9 @@
               {{ userName }} {{ $t('profile.network.followingNobody') }}
             </p>
           </template>
-        </ds-card>
+        </base-card>
         <ds-space />
-        <ds-card style="position: relative; height: auto;">
+        <base-card style="position: relative; height: auto;">
           <ds-space v-if="user.followedBy && user.followedBy.length" margin="x-small">
             <ds-text tag="h5" color="soft">
               {{ userName | truncate(15) }} {{ $t('profile.network.followedBy') }}
@@ -150,9 +147,9 @@
               {{ userName }} {{ $t('profile.network.followedByNobody') }}
             </p>
           </template>
-        </ds-card>
+        </base-card>
         <ds-space v-if="user.socialMedia && user.socialMedia.length" margin="large">
-          <ds-card style="position: relative; height: auto;">
+          <base-card style="position: relative; height: auto;">
             <ds-space margin="x-small">
               <ds-text tag="h5" color="soft">
                 {{ $t('profile.socialMedia') }} {{ userName | truncate(15) }}?
@@ -166,14 +163,14 @@
                 </ds-space>
               </template>
             </ds-space>
-          </ds-card>
+          </base-card>
         </ds-space>
       </ds-flex-item>
 
       <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
         <masonry-grid>
           <ds-grid-item class="profile-top-navigation" :row-span="3" column-span="fullWidth">
-            <ds-card class="ds-tab-nav">
+            <base-card class="ds-tab-nav">
               <ul class="Tabs">
                 <li class="Tabs__tab pointer" :class="{ active: tabActive === 'post' }">
                   <a @click="handleTab('post')">
@@ -213,7 +210,7 @@
                   </a>
                 </li>
               </ul>
-            </ds-card>
+            </base-card>
           </ds-grid-item>
 
           <ds-grid-item :row-span="2" column-span="fullWidth">
@@ -562,18 +559,17 @@ export default {
   top: 53px;
   z-index: 2;
 }
-.ds-tab-nav {
-  .ds-card-content {
-    padding: 0 !important;
-    .ds-tab-nav-item {
-      &.ds-tab-nav-item-active {
-        border-bottom: 3px solid #17b53f;
-        &:first-child {
-          border-bottom-left-radius: $border-radius-x-large;
-        }
-        &:last-child {
-          border-bottom-right-radius: $border-radius-x-large;
-        }
+.ds-tab-nav.base-card {
+  padding: 0;
+
+  .ds-tab-nav-item {
+    &.ds-tab-nav-item-active {
+      border-bottom: 3px solid #17b53f;
+      &:first-child {
+        border-bottom-left-radius: $border-radius-x-large;
+      }
+      &:last-child {
+        border-bottom-right-radius: $border-radius-x-large;
       }
     }
   }