diff --git a/app/Http/Controllers/Api/Web/ArtistsController.php b/app/Http/Controllers/Api/Web/ArtistsController.php
index 652ff0eb..11feafa8 100644
--- a/app/Http/Controllers/Api/Web/ArtistsController.php
+++ b/app/Http/Controllers/Api/Web/ArtistsController.php
@@ -31,6 +31,8 @@ use Poniverse\Ponyfm\Models\User;
 use Illuminate\Support\Facades\App;
 use Illuminate\Support\Facades\Input;
 use Illuminate\Support\Facades\Response;
+use ColorThief\ColorThief;
+use Helpers;
 
 class ArtistsController extends ApiControllerBase
 {
@@ -157,6 +159,9 @@ class ArtistsController extends ApiControllerBase
             ];
         }
 
+        $palette = ColorThief::getPalette($user->getAvatarUrl(Image::SMALL), 2);
+        $formatted_palette = array_map("Helpers::rgb2hex", $palette);
+
         return Response::json([
             'artist' => [
                 'id' => $user->id,
@@ -167,6 +172,7 @@ class ArtistsController extends ApiControllerBase
                     'small' => $user->getAvatarUrl(Image::SMALL),
                     'normal' => $user->getAvatarUrl(Image::NORMAL)
                 ],
+                'avatar_colors' => $formatted_palette,
                 'created_at' => $user->created_at,
                 'followers' => [],
                 'following' => [],
diff --git a/app/Library/Helpers.php b/app/Library/Helpers.php
index b7124a4a..d9b004c0 100644
--- a/app/Library/Helpers.php
+++ b/app/Library/Helpers.php
@@ -75,4 +75,19 @@ class Helpers
 
         return '<abbr class="timeago" title="' . $title . '">' . $content . '</abbr>';
     }
+
+    /**
+     * Converts an RGB array to a hex string
+     *
+     * @param array[int] $rgb RGB values in an array
+     * @return string
+     */
+    public static function rgb2hex($rgb) {
+        $hex = "#";
+        $hex .= str_pad(dechex($rgb[0]), 2, "0", STR_PAD_LEFT);
+        $hex .= str_pad(dechex($rgb[1]), 2, "0", STR_PAD_LEFT);
+        $hex .= str_pad(dechex($rgb[2]), 2, "0", STR_PAD_LEFT);
+
+        return $hex;
+    }
 }
diff --git a/composer.json b/composer.json
index 3ac3ffbd..79145682 100644
--- a/composer.json
+++ b/composer.json
@@ -16,7 +16,8 @@
         "pda/pheanstalk": "~3.0",
         "cviebrock/laravel-elasticsearch": "^1.0",
         "barryvdh/laravel-debugbar": "^2.1",
-        "predis/predis": "^1.0"
+        "predis/predis": "^1.0",
+        "ksubileau/color-thief-php": "^1.3"
     },
     "require-dev": {
         "fzaninotto/faker": "~1.4",
diff --git a/composer.lock b/composer.lock
index e4f495c5..4c1fc94b 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,8 +4,8 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
         "This file is @generated automatically"
     ],
-    "hash": "a12fe5f5687e21aac441868ccc882fa2",
-    "content-hash": "95039400d11d1851dabe46e4c0456965",
+    "hash": "34abdcf2e916a26919b81059ba38fa47",
+    "content-hash": "afae7bc6603035b2573af4b56c91c0dd",
     "packages": [
         {
             "name": "barryvdh/laravel-debugbar",
@@ -1385,6 +1385,59 @@
             ],
             "time": "2015-12-05 17:17:57"
         },
+        {
+            "name": "ksubileau/color-thief-php",
+            "version": "v1.3.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/ksubileau/color-thief-php.git",
+                "reference": "f0e1bc5da3dd86abd3e8c95a553c3e8f25e0fe7e"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/ksubileau/color-thief-php/zipball/f0e1bc5da3dd86abd3e8c95a553c3e8f25e0fe7e",
+                "reference": "f0e1bc5da3dd86abd3e8c95a553c3e8f25e0fe7e",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "4.*",
+                "squizlabs/php_codesniffer": "2.*"
+            },
+            "suggest": {
+                "ext-gd": "to use the GD image adapter.",
+                "ext-gmagick": "to use the Gmagick image adapter.",
+                "ext-imagick": "to use the Imagick image adapter."
+            },
+            "type": "library",
+            "autoload": {
+                "psr-0": {
+                    "ColorThief": "lib/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "CC-BY-2.5"
+            ],
+            "authors": [
+                {
+                    "name": "Kevin Subileau",
+                    "homepage": "http://www.kevinsubileau.fr"
+                }
+            ],
+            "description": "Grabs the dominant color or a representative color palette from an image.",
+            "homepage": "http://www.kevinsubileau.fr/projets/color-thief-php",
+            "keywords": [
+                "color",
+                "dominant",
+                "palette",
+                "php",
+                "thief"
+            ],
+            "time": "2016-01-17 18:55:16"
+        },
         {
             "name": "laravel/framework",
             "version": "v5.1.28",
diff --git a/public/templates/artists/_show_layout.html b/public/templates/artists/_show_layout.html
index a580e778..e58942cf 100644
--- a/public/templates/artists/_show_layout.html
+++ b/public/templates/artists/_show_layout.html
@@ -1,23 +1,24 @@
 <div class="resource-details artist-details" ng-class="::{'x-archived': artist.is_archived}">
-    <ul class="dropdowns">
-        <li class="dropdown">
-            <a href="#" class="btn btn-small" ng-class="{'btn-primary': !artist.user_data.is_following}" ng-show="::auth.isLogged && auth.user.id != artist.id" pfm-eat-click ng-click="toggleFollow()">
+
+    <header ng-style="{{::gradient}}">
+        <img src="{{::artist.avatars.normal}}">
+        <div class="artist-right">
+            <h1>{{::artist.name}}</h1>
+            <a href="#" class="btn btn-default" ng-class="{'btn-primary': !artist.user_data.is_following}" ng-show="::auth.isLogged && auth.user.id != artist.id" pfm-eat-click ng-click="toggleFollow()">
                 <span ng-hide="artist.user_data.is_following">Follow</span>
                 <span ng-show="artist.user_data.is_following">Following!</span>
             </a>
-        </li>
-    </ul>
-    <header>
-        <h1>{{::artist.name}}</h1>
-        <ul class="tabs">
-            <li ui-sref-active="active"><a ui-sref=".profile">Profile</a></li>
-            <li ui-sref-active="active"><a ui-sref=".content">Content</a></li>
-            <li ng-if="::!artist.is_archived" ui-sref-active="active">
-                <a ui-sref=".favourites">Favourites</a>
-            </li>
-            <li ng-if="::artist.permissions.edit" ui-sref-active="{active: '.account'}"><a ui-sref=".account.settings">Manage Account</a></li>
-        </ul>
+
+        </div>
     </header>
+    <ul class="tabs">
+        <li ui-sref-active="active"><a ui-sref=".profile">Profile</a></li>
+        <li ui-sref-active="active"><a ui-sref=".content">Content</a></li>
+        <li ng-if="::!artist.is_archived" ui-sref-active="active">
+            <a ui-sref=".favourites">Favourites</a>
+        </li>
+        <li ng-if="::artist.permissions.edit" ui-sref-active="{active: '.account'}"><a ui-sref=".account.settings">Manage Account</a></li>
+    </ul>
     <div class="stretch-to-bottom">
         <ui-view></ui-view>
     </div>
diff --git a/resources/assets/scripts/app/controllers/artist.coffee b/resources/assets/scripts/app/controllers/artist.coffee
index 64a3c600..a7688246 100644
--- a/resources/assets/scripts/app/controllers/artist.coffee
+++ b/resources/assets/scripts/app/controllers/artist.coffee
@@ -26,6 +26,9 @@ module.exports = angular.module('ponyfm').controller "artist", [
         artists.fetch($state.params.slug)
             .done (artistResponse) ->
                 $scope.artist = artistResponse.artist
+                $scope.gradient = {
+                    'background-image': 'linear-gradient(135deg, ' + $scope.artist.avatar_colors[0] + ' 15%, ' + $scope.artist.avatar_colors[1] + ' 100%)'
+                }
 
         $scope.toggleFollow = () ->
             follow.toggle('artist', $scope.artist.id).then (res) ->
diff --git a/resources/assets/styles/content.less b/resources/assets/styles/content.less
index 42cd25cf..a40a1bb7 100644
--- a/resources/assets/styles/content.less
+++ b/resources/assets/styles/content.less
@@ -144,19 +144,31 @@
 
   &.artist-details {
     > header {
-      .tabs {
-        clear: left;
-        margin: 0px;
-        margin-top: 5px;
-        border: none;
-        font-size: 9pt;
+      padding: 15px;
 
-        li.active {
-          a {
-            border: none;
-            background: #C1889E;
-            color: #fff;
-          }
+      > img {
+        width: 150px;
+        height: 150px;
+        float: left;
+        background: #fff;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+      }
+
+      > .artist-right {
+        margin-left: 165px;
+        margin-top: 5px;
+
+        > h1 {
+          font-size: 20pt;
+          color: #fff;
+          background: rgba(0,0,0,0.5);
+          display: inline;
+          padding: 5px 10px;
+        }
+
+        > .btn {
+          display: table;
+          margin-top: 10px;
         }
       }
     }
diff --git a/resources/assets/styles/mobile.less b/resources/assets/styles/mobile.less
index a1be52fc..7d072cfb 100644
--- a/resources/assets/styles/mobile.less
+++ b/resources/assets/styles/mobile.less
@@ -128,4 +128,28 @@
   .stretch-to-bottom {
     overflow-y: initial !important;
   }
+
+  .artist-details {
+    > header {
+      > img {
+        float: none !important;
+        display: block;
+        width: 50% !important;
+        height: 50% !important;
+        margin-left: auto;
+        margin-right: auto;
+      }
+
+      > .artist-right {
+        margin-left: 0px !important;
+        margin-top: 15px !important;
+        text-align: center;
+
+        > .btn {
+          margin-left: auto;
+          margin-right: auto;
+        }
+      }
+    }
+  }
 }