diff --git a/CHANGELOG.md b/CHANGELOG.md
index 50cc6549..9f5a25b4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,8 @@ way to update this template, but currently, we follow a pattern:
   [#864](https://github.com/sharetribe/flex-template-web/pull/864)
 * [fix] Fix passing initial message sending error to transaction page.
   [#863](https://github.com/sharetribe/flex-template-web/pull/863)
+* [fix] Fix listing page host section layout bug.
+  [#862](https://github.com/sharetribe/flex-template-web/pull/862)
 * [fix] Fix initial message input clearing too early in checkout page.
   [#861](https://github.com/sharetribe/flex-template-web/pull/861)
 * [fix] Fix setting Topbar search input initial value.
diff --git a/src/components/UserCard/UserCard.css b/src/components/UserCard/UserCard.css
index ea065495..48a08f9a 100644
--- a/src/components/UserCard/UserCard.css
+++ b/src/components/UserCard/UserCard.css
@@ -53,6 +53,7 @@
   display: none;
 
   @media (--viewportMedium) {
+    margin-top: 16px;
     display: block;
   }
 }
@@ -64,12 +65,17 @@
 
 .links {
   @apply --marketplaceH4FontStyles;
+  margin-top: 13px;
+
+  @media (--viewportMedium) {
+    margin: 16px 0 0 0;
+  }
 }
 
 .withBioMissingAbove {
   @media (--viewportMedium) {
     /* Fix baseline alignment if bio is missing from above */
-    margin-top: 18px;
+    margin-top: 16px;
   }
 }
 
@@ -77,3 +83,39 @@
   margin: 0 10px;
   color: var(--marketplaceColor);
 }
+
+.headingRow {
+  display: flex;
+  flex-direction: column;
+
+  @media (--viewportMedium) {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+}
+
+.editProfileDesktop {
+  @apply --marketplaceH4FontStyles;
+  display: none;
+  margin-bottom: 0;
+  white-space: nowrap;
+
+  @media (--viewportMedium) {
+    display: inline;
+  }
+}
+
+.editProfileMobile {
+  @apply --marketplaceH4FontStyles;
+  display: inline;
+
+  @media (--viewportMedium) {
+    display: none;
+  }
+}
+
+.contact {
+  @apply --marketplaceH4FontStyles;
+  margin: 0;
+}
diff --git a/src/components/UserCard/UserCard.example.js b/src/components/UserCard/UserCard.example.js
index 86f79892..d534f5c9 100644
--- a/src/components/UserCard/UserCard.example.js
+++ b/src/components/UserCard/UserCard.example.js
@@ -31,6 +31,48 @@ export const WithoutBioCurrentUser = {
   group: 'users',
 };
 
+export const WithProfileImageAndBioCurrentUser = {
+  component: UserCard,
+  props: {
+    user: {
+      id: new UUID('full-user'),
+      type: 'user',
+      attributes: {
+        banned: false,
+        profile: {
+          displayName: 'Has P',
+          abbreviatedName: 'HP',
+          bio:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+        },
+      },
+      profileImage: {
+        id: new UUID('profile-image'),
+        type: 'image',
+        attributes: {
+          variants: {
+            'square-small': {
+              name: 'square-small',
+              width: 240,
+              height: 240,
+              url: 'https://lorempixel.com/240/240/people/',
+            },
+            'square-small2x': {
+              name: 'square-small2x',
+              width: 480,
+              height: 480,
+              url: 'https://lorempixel.com/480/480/people/',
+            },
+          },
+        },
+      },
+    },
+    currentUser: createCurrentUser('full-user'),
+    onContactUser: user => console.log('concact user:', user),
+  },
+  group: 'users',
+};
+
 export const WithProfileImageAndBio = {
   component: UserCard,
   props: {
diff --git a/src/components/UserCard/UserCard.js b/src/components/UserCard/UserCard.js
index e9ece456..6af87e3b 100644
--- a/src/components/UserCard/UserCard.js
+++ b/src/components/UserCard/UserCard.js
@@ -83,20 +83,36 @@ const UserCard = props => {
     [css.withBioMissingAbove]: !hasBio,
   });
 
-  const hideContact = currentUser && isCurrentUser;
-  const separator = hideContact ? null : <span className={css.linkSeparator}>•</span>;
-  const contact = hideContact ? null : (
-    <InlineTextButton onClick={handleContactUserClick}>
+  const separator = isCurrentUser ? null : <span className={css.linkSeparator}>•</span>;
+
+  const contact = (
+    <InlineTextButton className={css.contact} onClick={handleContactUserClick}>
       <FormattedMessage id="UserCard.contactUser" />
     </InlineTextButton>
   );
+
+  const editProfileMobile = (
+    <span className={css.editProfileMobile}>
+      <span className={css.linkSeparator}>•</span>
+      <NamedLink name="ProfileSettingsPage">
+        <FormattedMessage id="ListingPage.editProfileLink" />
+      </NamedLink>
+    </span>
+  );
+
+  const editProfileDesktop = isCurrentUser ? (
+    <NamedLink className={css.editProfileDesktop} name="ProfileSettingsPage">
+      <FormattedMessage id="ListingPage.editProfileLink" />
+    </NamedLink>
+  ) : null;
+
   const links = ensuredUser.id ? (
     <p className={linkClasses}>
       <NamedLink className={css.link} name="ProfilePage" params={{ id: ensuredUser.id.uuid }}>
         <FormattedMessage id="UserCard.viewProfileLink" />
       </NamedLink>
       {separator}
-      {contact}
+      {isCurrentUser ? editProfileMobile : contact}
     </p>
   ) : null;
 
@@ -105,9 +121,12 @@ const UserCard = props => {
       <div className={css.content}>
         <AvatarLarge className={css.avatar} user={user} />
         <div className={css.info}>
-          <h3 className={css.heading}>
-            <FormattedMessage id="UserCard.heading" values={{ name: displayName }} />
-          </h3>
+          <div className={css.headingRow}>
+            <h3 className={css.heading}>
+              <FormattedMessage id="UserCard.heading" values={{ name: displayName }} />
+            </h3>
+            {editProfileDesktop}
+          </div>
           {hasBio ? <ExpandableBio className={css.desktopBio} bio={bio} /> : null}
           {links}
         </div>
diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css
index 7545cc9c..1a56843c 100644
--- a/src/containers/ListingPage/ListingPage.css
+++ b/src/containers/ListingPage/ListingPage.css
@@ -526,24 +526,6 @@
   }
 }
 
-.editProfileLink {
-  @apply --marketplaceH4FontStyles;
-  position: absolute;
-  margin: 0;
-
-  /* Align to same baseline as the "Your host" heading */
-  top: 2px;
-  right: 24px;
-
-  @media (--viewportMedium) {
-    margin: 0;
-
-    /* Align to same baseline as the "Hello, ..." heading */
-    top: 74px;
-    right: 0;
-  }
-}
-
 .map {
   /* Dimensions: Map takes all available space from viewport (excludes action button and section title) */
   height: calc(100vh - 193px);
diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
index 84199c73..74a0c369 100644
--- a/src/containers/ListingPage/ListingPage.js
+++ b/src/containers/ListingPage/ListingPage.js
@@ -451,7 +451,6 @@ export class ListingPageComponent extends Component {
                   <SectionHost
                     title={title}
                     listing={currentListing}
-                    isOwnListing={isOwnListing}
                     authorDisplayName={authorDisplayName}
                     onContactUser={this.onContactUser}
                     isEnquiryModalOpen={isAuthenticated && this.state.enquiryModalOpen}
diff --git a/src/containers/ListingPage/SectionHost.js b/src/containers/ListingPage/SectionHost.js
index d24b39e6..b23f8986 100644
--- a/src/containers/ListingPage/SectionHost.js
+++ b/src/containers/ListingPage/SectionHost.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { NamedLink, UserCard, Modal } from '../../components';
+import { UserCard, Modal } from '../../components';
 import { EnquiryForm } from '../../forms';
 
 import css from './ListingPage.css';
@@ -9,7 +9,6 @@ const SectionHost = props => {
   const {
     title,
     listing,
-    isOwnListing,
     authorDisplayName,
     onContactUser,
     isEnquiryModalOpen,
@@ -25,11 +24,6 @@ const SectionHost = props => {
       <h2 className={css.yourHostHeading}>
         <FormattedMessage id="ListingPage.yourHostHeading" />
       </h2>
-      {isOwnListing ? (
-        <NamedLink className={css.editProfileLink} name="ProfileSettingsPage">
-          <FormattedMessage id="ListingPage.editProfileLink" />
-        </NamedLink>
-      ) : null}
       <UserCard user={listing.author} currentUser={currentUser} onContactUser={onContactUser} />
       <Modal
         id="ListingPage.enquiry"
diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
index bfaabcfa..ef469cdf 100644
--- a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
+++ b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
@@ -216,7 +216,6 @@ exports[`ListingPage matches snapshot 1`] = `
                 }
               }
               isEnquiryModalOpen={false}
-              isOwnListing={false}
               listing={
                 Object {
                   "attributes": Object {