diff --git a/src/less/components/settings.less b/src/less/components/settings.less
index 0ef77318b3..15ad39b85f 100644
--- a/src/less/components/settings.less
+++ b/src/less/components/settings.less
@@ -147,29 +147,52 @@
       background: rgba(255, 255, 255, 0.1);
       padding: 10px;
       margin: 0 10px 10px 0;
-      display: flex;
-      justify-content: flex-start;
       cursor: pointer;
+      border-radius: 15px;
 
       &:hover {
         background: rgba(255, 255, 255, 0.15);
       }
 
-      h5,
       p {
         margin-bottom: 0;
       }
 
-      .avatar {
-        height: 100px;
-        width: 100px;
-        background-size: contain;
-        margin-right: 10px;
+      .header {
+        display: flex;
+        margin-bottom: 3px;
+        justify-content: flex-start;
+
+        .avatar {
+          margin-right: 8px;
+          height: 40px;
+          width: 40px;
+          border-radius: 50%;
+          box-shadow: 0px 0px 6px 0px #101601;
+        }
+
+        .info {
+          display: flex;
+          flex-direction: column;
+
+          .name {
+            margin-bottom: 2px;
+            font-size: 14px;
+            font-weight: bold;
+          }
+
+          .location {
+            font-style: oblique;
+            font-size: 12px;
+          }
+        }
       }
 
-      .details {
-        max-width: 190px;
-        overflow: auto;
+      .bio {
+        height: 58px;
+        word-break: break-word;
+        font-size: smaller;
+        overflow: scroll;
       }
     }
   }
diff --git a/src/renderer/components/settings-credits.tsx b/src/renderer/components/settings-credits.tsx
index 3c72c46177..bd05750472 100644
--- a/src/renderer/components/settings-credits.tsx
+++ b/src/renderer/components/settings-credits.tsx
@@ -53,13 +53,6 @@ export class CreditsSettings extends React.Component<
     const { contributors } = this.state;
 
     return contributors.map(({ name, avatar, url, login, location, bio }) => {
-      const maybeLocation = location ? (
-        <p className="location">📍 {location}</p>
-      ) : null;
-      const maybeBio = bio ? <small className="bio">{bio}</small> : null;
-      const style: React.CSSProperties = {
-        backgroundImage: `url(${avatar})`,
-      };
       const onClick = () => shell.openExternal(url);
 
       return (
@@ -67,14 +60,17 @@ export class CreditsSettings extends React.Component<
           interactive={true}
           key={login}
           className="contributor"
+          elevation={2}
           onClick={onClick}
         >
-          <div className="avatar" style={style} />
-          <div className="details">
-            <h5 className="name">{name || login}</h5>
-            {maybeLocation}
-            {maybeBio}
+          <div className="header">
+            <img src={avatar} alt="avatar" className="avatar" />
+            <div className="info">
+              <p className="name">{name || login}</p>
+              {location && <p className="location">📍 {location}</p>}
+            </div>
           </div>
+          {bio && <p className="bio">{bio}</p>}
         </Card>
       );
     });
diff --git a/tests/renderer/components/__snapshots__/settings-credits-spec.tsx.snap b/tests/renderer/components/__snapshots__/settings-credits-spec.tsx.snap
index 30c142041b..dc32280b87 100644
--- a/tests/renderer/components/__snapshots__/settings-credits-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/settings-credits-spec.tsx.snap
@@ -29,39 +29,40 @@ exports[`CreditsSettings component renders 1`] = `
   >
     <Blueprint3.Card
       className="contributor"
-      elevation={0}
+      elevation={2}
       interactive={true}
       key="felixrieseberg"
       onClick={[Function]}
     >
       <div
-        className="avatar"
-        style={
-          Object {
-            "backgroundImage": "url(https://avatars3.githubusercontent.com/u/1426799?v=4)",
-          }
-        }
-      />
-      <div
-        className="details"
+        className="header"
       >
-        <h5
-          className="name"
-        >
-          Felix Rieseberg
-        </h5>
-        <p
-          className="location"
-        >
-          📍 
-          San Francisco
-        </p>
-        <small
-          className="bio"
+        <img
+          alt="avatar"
+          className="avatar"
+          src="https://avatars3.githubusercontent.com/u/1426799?v=4"
+        />
+        <div
+          className="info"
         >
-          🙇 ✨🌳 
-        </small>
+          <p
+            className="name"
+          >
+            Felix Rieseberg
+          </p>
+          <p
+            className="location"
+          >
+            📍 
+            San Francisco
+          </p>
+        </div>
       </div>
+      <p
+        className="bio"
+      >
+        🙇 ✨🌳 
+      </p>
     </Blueprint3.Card>
   </div>
 </div>
@@ -81,27 +82,28 @@ exports[`CreditsSettings component renders for contributors with less data 1`] =
   >
     <Blueprint3.Card
       className="contributor"
-      elevation={0}
+      elevation={2}
       interactive={true}
       key="felixrieseberg"
       onClick={[Function]}
     >
       <div
-        className="avatar"
-        style={
-          Object {
-            "backgroundImage": "url(https://avatars3.githubusercontent.com/u/1426799?v=4)",
-          }
-        }
-      />
-      <div
-        className="details"
+        className="header"
       >
-        <h5
-          className="name"
+        <img
+          alt="avatar"
+          className="avatar"
+          src="https://avatars3.githubusercontent.com/u/1426799?v=4"
+        />
+        <div
+          className="info"
         >
-          felixrieseberg
-        </h5>
+          <p
+            className="name"
+          >
+            felixrieseberg
+          </p>
+        </div>
       </div>
     </Blueprint3.Card>
   </div>