diff --git a/packages/web-app-app-store/src/views/AppDetails.vue b/packages/web-app-app-store/src/views/AppDetails.vue
index bf25a8c7f6b..f200eb2130e 100644
--- a/packages/web-app-app-store/src/views/AppDetails.vue
+++ b/packages/web-app-app-store/src/views/AppDetails.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="app-details">
-    <div class="back-to-list">
+  <div class="app-details oc-card oc-card-default oc-card-rounded">
+    <div class="oc-p-xs">
       <router-link :to="{ name: `${APPID}-list` }" class="oc-flex oc-flex-middle">
         <oc-icon name="arrow-left-s" fill-type="line" />
         <span v-text="$gettext('Back to list')" />
       </router-link>
     </div>
     <app-cover :app="app" />
-    <div class="app-content">
+    <div class="app-content oc-card-body oc-p">
       <div class="oc-flex oc-flex-middle">
         <h2 class="oc-my-s oc-text-truncate">{{ app.name }}</h2>
         <span class="oc-ml-s oc-text-muted oc-text-small oc-mt-s">
@@ -15,26 +15,26 @@
         </span>
       </div>
       <p class="oc-my-rm">{{ app.subtitle }}</p>
-    </div>
-    <div v-if="app.description">
-      <h3>{{ $gettext('Details') }}</h3>
-      <p class="oc-my-s">{{ app.description }}</p>
-    </div>
-    <div v-if="app.tags">
-      <h3>{{ $gettext('Tags') }}</h3>
-      <app-tags :app="app" @search="onTagClicked" />
-    </div>
-    <div v-if="app.authors">
-      <h3>{{ $gettext('Author') }}</h3>
-      <app-authors :app="app" />
-    </div>
-    <div v-if="app.resources">
-      <h3>{{ $gettext('Resources') }}</h3>
-      <app-resources :app="app" />
-    </div>
-    <div v-if="app.versions">
-      <h3>{{ $gettext('Releases') }}</h3>
-      <app-versions :app="app" />
+      <div v-if="app.description">
+        <h3>{{ $gettext('Details') }}</h3>
+        <p class="oc-my-s">{{ app.description }}</p>
+      </div>
+      <div v-if="app.tags">
+        <h3>{{ $gettext('Tags') }}</h3>
+        <app-tags :app="app" @search="onTagClicked" />
+      </div>
+      <div v-if="app.authors">
+        <h3>{{ $gettext('Author') }}</h3>
+        <app-authors :app="app" />
+      </div>
+      <div v-if="app.resources">
+        <h3>{{ $gettext('Resources') }}</h3>
+        <app-resources :app="app" />
+      </div>
+      <div v-if="app.versions">
+        <h3>{{ $gettext('Releases') }}</h3>
+        <app-versions :app="app" />
+      </div>
     </div>
   </div>
 </template>
@@ -81,18 +81,15 @@ export default defineComponent({
 <style lang="scss">
 .app-details {
   background-color: var(--oc-color-background-highlight);
-  border-radius: 5px;
-  padding: var(--oc-space-large);
+  box-shadow: none;
   max-width: 600px;
   margin: 0 auto;
+  outline: 1px solid var(--oc-color-border);
 
-  display: flex;
-  flex-flow: column;
-  gap: 1rem;
-
-  .back-to-list {
-    border-bottom: 1px solid var(--oc-color-input-border);
-    margin-bottom: var(--oc-space-medium);
+  .app-content {
+    display: flex;
+    flex-flow: column;
+    gap: 1rem;
   }
 }
 </style>