diff --git a/app/soapbox/features/edit_profile/components/profile_preview.js b/app/soapbox/features/edit_profile/components/profile_preview.js
index dbb6881d5..69be6a365 100644
--- a/app/soapbox/features/edit_profile/components/profile_preview.js
+++ b/app/soapbox/features/edit_profile/components/profile_preview.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import { Link } from 'react-router-dom';
 import { getAcct, isVerified } from 'soapbox/utils/accounts';
 import StillImage from 'soapbox/components/still_image';
 import VerificationBadge from 'soapbox/components/verification_badge';
@@ -13,7 +14,7 @@ const mapStateToProps = state => ({
 
 const ProfilePreview = ({ account, displayFqn }) => (
   <div className='card h-card'>
-    <a target='_blank' rel='noopener' href={account.get('url')}>
+    <Link to={`/@${account.get('acct')}`}>
       <div className='card__img'>
         <StillImage alt='' src={account.get('header')} />
       </div>
@@ -32,7 +33,7 @@ const ProfilePreview = ({ account, displayFqn }) => (
           <span>@{getAcct(account, displayFqn)}</span>
         </div>
       </div>
-    </a>
+    </Link>
   </div>
 );
 
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index 50e87e600..5c61002f6 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -3,7 +3,9 @@
     display: block;
     text-decoration: none;
     color: inherit;
-    box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+    overflow: hidden;
 
     @media screen and (max-width: $no-gap-breakpoint) {
       box-shadow: none;
@@ -13,7 +15,7 @@
     &:active,
     &:focus {
       .card__bar {
-        background: var(--foreground-color);
+        background-color: var(--brand-color--faint);
       }
     }
   }
@@ -22,7 +24,6 @@
     height: 130px;
     position: relative;
     background: var(--background-color);
-    border-radius: 4px 4px 0 0;
 
     .still-image {
       display: block;
@@ -30,7 +31,6 @@
       height: 100%;
       margin: 0;
       object-fit: cover;
-      border-radius: 4px 4px 0 0;
     }
 
     @media screen and (max-width: 600px) {
@@ -48,12 +48,8 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    background: var(--brand-color--faint);
-    border-radius: 0 0 4px 4px;
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      border-radius: 0;
-    }
+    background: var(--background-color);
+    transition: 0.2s;
 
     .avatar {
       flex: 0 0 auto;