diff --git a/public/index.html b/public/index.html
index f528475..bd451c7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,20 +10,7 @@
 			content="A frontend to search for an artist and display its albums"
 		/>
 		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-		<!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
 		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-		<!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
 		<link
 			rel="stylesheet"
 			href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
@@ -38,14 +25,5 @@
 	<body>
 		<noscript>You need to enable JavaScript to run this app.</noscript>
 		<div id="root"></div>
-		<!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    --></body>
+	</body>
 </html>
diff --git a/src/components/Album.tsx b/src/components/Album.tsx
new file mode 100644
index 0000000..bab3ed6
--- /dev/null
+++ b/src/components/Album.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Box, Heading, Image } from 'grommet';
+
+export const Album = ({ image, name }: { image: string; name: string }) => {
+	return (
+		<Box round='xxsmall' elevation='small' overflow='hidden'>
+			<Box height='300px'>
+				<Image src={image} fit='cover' />
+			</Box>
+			<Heading
+				level='4'
+				margin={{ bottom: 'small', top: 'small', left: 'small' }}
+			>
+				{name}
+			</Heading>
+		</Box>
+	);
+};
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
deleted file mode 100644
index 01cf181..0000000
--- a/src/components/Card.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { Box, Heading, Image } from 'grommet';
-
-export const Card = ({ image, name }: { image: string; name: string }) => {
-	return (
-		<Box round='xxsmall' elevation='small' overflow='hidden'>
-			<Box height='300px'>
-				<Image src={image} fit='cover' />
-			</Box>
-
-			<Box pad={{ horizontal: 'small' }}>
-				<Box
-					margin={{ top: 'small' }}
-					direction='row'
-					align='center'
-					justify='between'
-				>
-					<Box>
-						<Heading level='4' margin={{bottom: "small", top : "xsmall"}}>
-							{name}
-						</Heading>
-					</Box>
-				</Box>
-			</Box>
-		</Box>
-	);
-};
diff --git a/src/components/Other.tsx b/src/components/Other.tsx
new file mode 100644
index 0000000..9773fc8
--- /dev/null
+++ b/src/components/Other.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Box, Heading, Image } from 'grommet';
+
+export const Other = ({ image, name }: { image: string; name: string }) => {
+	return (
+		<Box round='xxsmall' overflow='hidden' align='center' pad='small'>
+			<Heading
+				level='4'
+				margin={{ bottom: 'small', top: 'small', left: 'small' }}
+			>
+				{name}
+			</Heading>
+			<Box
+				height='small'
+				width='small'
+				round='full'
+				background={{
+					repeat: 'no-repeat',
+					size: 'cover',
+					image: `url(${image})`,
+				}}
+			/>
+		</Box>
+	);
+};
diff --git a/src/components/Results.tsx b/src/components/Results.tsx
index 90fdad1..ef7ad83 100644
--- a/src/components/Results.tsx
+++ b/src/components/Results.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import { Box, Grid, Avatar, Image, ResponsiveContext, Heading } from 'grommet';
+import { Box, Grid, ResponsiveContext, Heading } from 'grommet';
 
-import { Card as Album } from './Card';
+import { Album } from './Album';
 import { Artists } from '../interfaces';
-import { size } from 'lodash';
+import { Other } from './Other';
 
 export const Results = ({ artists }: { artists: Artists }) => {
 	const {
@@ -14,38 +14,72 @@ export const Results = ({ artists }: { artists: Artists }) => {
 
 	return (
 		<Grid
+			as='section'
 			rows={['fit', 'fit']}
-			columns={['1/4', '3/4']}
+			columns={['fit', '2/3']}
 			gap='small'
 			areas={[
+				['artist-title', 'other-title'],
 				['artist', 'other'],
+				['disco-title', 'disco-title'],
 				['discography', 'discography'],
 			]}
 		>
-			<Box gridArea='artist' height='300px' >
-				<h1>{selectedName}</h1>
-				<Image src={selectedImage} fit='cover' />
-			</Box>
-			<Box gridArea='other' background='light-2'>
-				<h3>Other results</h3>
-				{artists.map((artist) => (
-					<Box gridArea='artist' key={artist.id}>
-						<Avatar src={artist.image} />
-						<h4>{artist.name}</h4>
+			<Heading
+				level='1'
+				gridArea='artist-title'
+				margin={{ vertical: 'none' }}
+			>
+				{selectedName}
+			</Heading>
+			<Grid
+				gridArea='artist'
+				margin={{ bottom: 'medium' }}
+			>
+				<Box
+					round='full'
+					background={{
+						repeat: 'no-repeat',
+						size: 'cover',
+						image: `url(${selectedImage})`,
+					}}
+					height='300px'
+					width='300px'
+				/>
+			</Grid>
+			<Heading
+				level='2'
+				gridArea='other-title'
+				margin={{ vertical: 'none' }}
+				alignSelf='end'
+				size="small"
+			>
+				Other results
+			</Heading>
+			<ResponsiveContext.Consumer>
+				{(size) => (
+					<Box gridArea='other' direction='row' wrap>
+						{artists.slice(1, artists.length).map((artist) => (
+							<Other
+								key={artist.id}
+								image={artist.image}
+								name={artist.name}
+							/>
+						))}
 					</Box>
-				))}
-			</Box>
+				)}
+			</ResponsiveContext.Consumer>
+			<Heading level='2' gridArea='disco-title' size='large'>
+				Discography
+			</Heading>
 			<ResponsiveContext.Consumer>
 				{(size) => (
 					<Grid
 						gridArea='discography'
 						align='start'
 						columns={{ count: 'fill', size: '300px' }}
-						gap='medium'
+						gap='large'
 					>
-						<Heading level='1'>
-							Discography
-						</Heading>
 						{selectedAlbums.map((album) => (
 							<Album
 								key={album.id}
