diff --git a/app/lib/frontend/templates/views/pkg/info_box.dart b/app/lib/frontend/templates/views/pkg/info_box.dart
index f2c370ee53..06b9edc8ec 100644
--- a/app/lib/frontend/templates/views/pkg/info_box.dart
+++ b/app/lib/frontend/templates/views/pkg/info_box.dart
@@ -68,9 +68,9 @@ d.Node packageInfoBoxNode({
     }
   }
   return d.fragment([
-    _oneClickInstall(package.name!),
     imageCarousel(),
     labeledScores,
+    _oneClickInstall(package.name!),
     if (thumbnailUrl != null)
       d.div(classes: [
         'detail-screenshot-thumbnail'
diff --git a/app/lib/frontend/templates/views/pkg/one_click_install.dart b/app/lib/frontend/templates/views/pkg/one_click_install.dart
index a204deebff..21f8caba7a 100644
--- a/app/lib/frontend/templates/views/pkg/one_click_install.dart
+++ b/app/lib/frontend/templates/views/pkg/one_click_install.dart
@@ -7,31 +7,46 @@ import '../../../static_files.dart';
 
 d.Node oneClickInstallNode({required String packageName}) {
   return d.fragment([
-    d.text('dart pub add $packageName'),
-    d.span(
-      classes: ['pkg-page-install-copy'],
+    d.div(
+      classes: ['pkg-page-install-wrapper'],
       children: [
-        d.img(
-          classes: ['pkg-page-install-copy-icon'],
-          attributes: {
-            'data-copy-content': 'dart pub add $packageName',
-            'data-ga-click-event': 'copy-package-version',
-          },
-          image: d.Image(
-            src: staticUrls.getAssetUrl('/static/img/content-copy-icon.svg'),
-            alt: 'copy "dart pub add $packageName" to clipboard',
-            width: 18,
-            height: 18,
+        d.h3(classes: ['title'], child: d.text('Install command')),
+        d.div(classes: [
+          'pkg-page-install'
+        ], children: [
+          d.span(classes: [
+            'pkg-page-install-code'
+          ], children: [
+            d.pre(children: [d.text('dart pub add $packageName')])
+          ]),
+          d.span(
+            classes: ['pkg-page-install-copy'],
+            children: [
+              d.img(
+                classes: ['pkg-page-install-copy-icon'],
+                attributes: {
+                  'data-copy-content': 'dart pub add $packageName',
+                  'data-ga-click-event': 'copy-package-version',
+                },
+                image: d.Image(
+                  src: staticUrls
+                      .getAssetUrl('/static/img/content-copy-icon.svg'),
+                  alt: 'copy "dart pub add $packageName" to clipboard',
+                  width: 18,
+                  height: 18,
+                ),
+                title: 'Copy "dart pub add $packageName" to clipboard',
+              ),
+              d.div(
+                classes: ['pkg-page-install-copy-feedback'],
+                children: [
+                  d.span(classes: ['code'], text: '$packageName'),
+                  d.text(' copied to clipboard'),
+                ],
+              ),
+            ],
           ),
-          title: 'Copy "dart pub add $packageName" to clipboard',
-        ),
-        d.div(
-          classes: ['pkg-page-install-copy-feedback'],
-          children: [
-            d.span(classes: ['code'], text: '$packageName'),
-            d.text(' copied to clipboard'),
-          ],
-        ),
+        ]),
       ],
     ),
   ]);
diff --git a/pkg/web_css/lib/src/_pkg.scss b/pkg/web_css/lib/src/_pkg.scss
index 7be698cc67..67575154a5 100644
--- a/pkg/web_css/lib/src/_pkg.scss
+++ b/pkg/web_css/lib/src/_pkg.scss
@@ -278,6 +278,38 @@
   }
 }
 
+.pkg-page-install-wrapper {
+  h3.title {
+    font-size: 16px;
+  }
+  .pkg-page-install {
+    background: $color-grey-bg;
+    border-radius: 5px;
+    padding: 10px 5px;
+    display: flex;
+    align-items: center;
+
+    .pkg-page-install-code {
+      font-size: 13px;
+      pre {
+        background: inherit;
+        line-height: inherit;
+        padding: 0px;
+        overflow-x: inherit;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        color: #d14; 
+      }
+    }
+
+    &:hover {
+      .pkg-page-install-copy-icon {
+        opacity: 0.5;
+      }
+    }
+  }
+}
+
 .pkg-page-title-copy,
 .pkg-page-install-copy {
   position: relative;
@@ -330,10 +362,6 @@
   }
 }
 
-.pkg-page-install-copy {
-  top: 5px;
-}
-
 .tool-env-info {
   margin-top: 40px;
   font-size: 14px;
diff --git a/pkg/web_css/lib/src/_variables.scss b/pkg/web_css/lib/src/_variables.scss
index b7c8e9df06..5eaefbcd64 100644
--- a/pkg/web_css/lib/src/_variables.scss
+++ b/pkg/web_css/lib/src/_variables.scss
@@ -33,5 +33,7 @@ $color-input-primary: #0175C2;
 $color-input-danger: #ff4242;
 $color-link: $color-input-primary;
 
+$color-grey-bg: #f5f5f7;
+
 // NOTE: keep in sync with hoverable.dart 900ms delay
 $copy-feedback-transition-opacity-delay: 0.9s;