diff --git a/php/index.php b/php/index.php
index 3abc533..b86e2ab 100644
--- a/php/index.php
+++ b/php/index.php
@@ -31,12 +31,6 @@ $files = array_filter($files, function ($file) {
 		</script>
 		<script type="module" crossorigin src="./assets/index.js"></script>
 		<link rel="stylesheet" href="./assets/index.css">
-		<style>
-			.preload img {
-				width: 1em;
-				height: 1em
-			}
-		</style>
 	</head>
 	<body>
 		<div id="wrapper">
@@ -56,18 +50,20 @@ $files = array_filter($files, function ($file) {
 			</header>
 			<div id="introduction">
 				<p><?= count($files) ?> pixel-perfect icons, free to use for all your projects!</p>
-				<p>These pixel-art icons are all carefully crafted in 9x9 pixel grids, then saved in SVG vector format.</p>
+				<p>These pixel-art icons are all carefully crafted in 9x9 pixel grids, saved in SVG vector format.</p>
 				<p>To download, please click the icons you want, or click the [Download All] button above.</p>
 			</div>
 			<div id="root">
-				<?php foreach ($files as $file): ?>
-					<div class="preload">
-						<a href="download.php?icon=<?= $file ?>" target="_blank">
-							<img src="./icons/<?= $file ?>" alt="<?= str_replace(".svg", "", $file) ?>">
-							<?= str_replace(".svg", "", $file) ?>
-						</a>
-					</div>
-				<?php endforeach ?>
+				<ul class="icon-list show-name">
+					<?php foreach ($files as $file): ?>
+							<li>
+								<a href="download.php?icon=<?= $file ?>" target="_blank">
+									<img class="icon" src="./icons/<?= $file ?>" alt="<?= str_replace(".svg", "", $file) ?>">
+									<div className='name'><?= str_replace(".svg", "", $file) ?></div>
+								</a>
+							</li>
+					<?php endforeach ?>
+				</ul>
 			</div>
 			<footer>
 				<p>Made by <a href="https://sqkhor.com">Shuqi Khor</a></p>
diff --git a/src/App.css b/src/App.css
index a40785e..5960907 100644
--- a/src/App.css
+++ b/src/App.css
@@ -66,6 +66,11 @@ ul.icon-list .name {
 	font-family: "Open Sans PX";
 }
 
+.no-result {
+	text-align: center;
+	padding: 6rem 0;
+}
+
 @media (hover:hover) {
 	ul.icon-list>li:hover img.icon {
 		transform: translateY(-6px);
diff --git a/src/App.jsx b/src/App.jsx
index 514e5d7..5d207d5 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux'
 import { setQuery } from './app/searchSlice'
 import { setShowName } from './app/displaySlice'
 import { IconList } from './IconList'
-import './App.css'
+// import './App.css'
 
 function App() {
 	const inputSearch = useRef()
@@ -25,7 +25,7 @@ function App() {
 	return (
 		<>
 			<div className="pixel-input">
-				<input type='text' id='search' ref={ inputSearch } onChange={ queryOnChange } placeholder="Search an icon — try ‘fruit’, ‘logo’, ‘ui’" autoComplete='no' />
+				<input type='text' id='search' ref={ inputSearch } onChange={ queryOnChange } placeholder="Search an icon — try 'animal', 'fruit', 'logo', 'ui' or 'red'" autoComplete='no' />
 			</div>
 			<div id='display-options'>
 				<input type="checkbox" name="checkShowName" ref={ checkShowName } onChange={ showNameOnChange } id='checkShowName' />
diff --git a/src/IconList.jsx b/src/IconList.jsx
index 6249893..cdecd31 100644
--- a/src/IconList.jsx
+++ b/src/IconList.jsx
@@ -33,6 +33,14 @@ export const IconList = function () {
 		window.open(`download.php?icon=${filename}`)
 	}
 
+	if (icons.length == 0) {
+		return (
+			<div className="no-result">
+				No icon found for<br />"{query}"
+			</div>
+		)
+	}
+
 	return (
 		<ul className={ `icon-list ${ showName ? 'show-name' : ''}` }>
 			{ icons.map( (filename, index) => (
diff --git a/src/index.css b/src/index.css
index 5732569..4c4c4ea 100644
--- a/src/index.css
+++ b/src/index.css
@@ -69,7 +69,8 @@ p {
 }
 
 input[type="text"] {
-	font-family: 'Silkscreen', sans-serif;
+	font-family: 'Open Sans PX', sans-serif;
+	font-size: 20px;
 	padding: 9px;
 	color: var(--font-color);
 	border: 2px solid var(--grey-color);
@@ -271,6 +272,80 @@ img.theme-icon {
 	margin-left: auto
 }
 
-@media (prefers-color-scheme: light) {
 
+
+#root {
+	width: 100%;
+}
+
+input#search {
+	width: 100%;
+}
+
+#display-options {
+	margin-top: 18px;
+	font-size: 1em;
+	line-height: 18px;
+	display: flex;
+	gap: 0.5em;
+}
+
+ul.icon-list {
+	list-style: none;
+	margin: 36px 0 0;
+	padding: 0;
+	display: flex;
+	flex-wrap: wrap;
+	/* display: grid;
+	grid-template-columns: repeat( auto-fit, minmax( 54px, 1fr ) ); */
+	gap: 18px;
+}
+
+ul.icon-list.show-name {
+	/* grid-template-columns: repeat( auto-fit, minmax( 99px, 1fr ) ); */
+}
+
+ul.icon-list>li {
+	box-sizing: border-box;
+	width: 54px;
+	padding: 9px;
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+ul.icon-list.show-name>li {
+	padding: 9px;
+	width: 99px;
+	height: 126px;
+	/* border: 1px solid #ccc; */
+}
+
+ul.icon-list img.icon {
+	width: 36px;
+	height: auto;
+	cursor: pointer;
+}
+
+ul.icon-list .name {
+	font-size: 20px;
+	line-height: 24px;
+	margin-top: 9px;
+	font-family: "Open Sans PX";
+}
+
+ul.icon-list a {
+	color: var(--font-color);
+}
+
+.no-result {
+	text-align: center;
+	padding: 6rem 0;
+}
+
+@media (hover:hover) {
+	ul.icon-list>li:hover img.icon {
+		transform: translateY(-6px);
+	}
 }
