Добавим немного красоты в мой сайт. будем использовать bootstrap. вот код:
index.ejs:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="/css/main.css" />
	<link rel="stylesheet" href="/jquery-ui/themes/base/all.css" />
<script src="/jquery/dist/jquery.min.js"></script>
<script src="/jquery-ui/dist/jquery-ui.min.js"></script>
    <title>Home</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <% if (userLoggedIn) { %>
          <li><a href="/profile/<%= musician.id %>">Hello, <%= username %></a></li>
          <li><a href="/logout">Logout</a></li>
          <% } else { %>
          <li><a href="/register">Register</a></li>
          <li><a href="/login">Login</a></li>
          <% } %>
        </ul>
		
		
      </nav>
    </header>
    <main>
      <!-- добавляет форму с поиском музыкантом -->
	  <form method="get" action="/search">
		<label for="query">Search by name or genre:</label> <input id="query" name="query" type="text" value="<%= query %>"><br>
		<br>
		<label for="role">Search by role:</label> <select id="role" name="role">
			<option value="">
				All
			</option>
			<option value="Band">
				Band
			</option>
			<option value="Artist">
				Artist
			</option>
		</select>
		
		<label for="genre">Search by genre:</label> <select id="genre" name="genre">
			<option value="">
				All
			</option>
			<option value="Rock">
				Rock
			</option>
			<option value="Pop">
				Pop
			</option>
		</select>
		
<label for="city">Search by location:</label>
<input id="city" name="city" type="text" autocomplete="on" value="<%= city %>" data-value="">

		<br>
		<!-- Add new input field for location -->


		<br>
		
		<br>
		<button type="submit">Search</button>
	</form><%if (musicians.length > 0) { %>
	<h2>Results:</h2>
	<ul>
  <% musicians.forEach(musician => { %>
    <li>
      <a href="<%= musician.profileLink %>">
        <img src="/img/<%= musician.thumbnail || 'avatar.jpg' %>" alt="Musician Thumbnail">
        <div class="musician-info">
          <span class="name"><%= musician.name %></span>
          <span class="genre"><%= musician.genre %></span>
        </div>
      </a>
    </li>
  <% }); %>
</ul><%} else if (query || role) { %>
	<p>No musicians found.</p><%} %>
	<!--  -->
  <h2>New Musicians</h2>
  <ul>
  <% musicians.forEach(musician => { %>
    <li>
      <a href="<%= musician.profileLink %>">
        <img src="/img/<%= musician.thumbnail || 'avatar.jpg' %>" alt="Musician Thumbnail">
        <div class="musician-info">
          <span class="name"><%= musician.name %></span>
          <span class="genre"><%= musician.genre %></span>
        </div>
      </a>
    </li>
  <% }); %>
</ul>
</div>
    </main>
	<script>
	$("#city").autocomplete({
    source: '/autocomplete/cities',
    minLength: 1,
  });

  const queryInput = document.querySelector("#query");
  const roleInput = document.querySelector("#role");
  const cityInput = document.querySelector("#city");

  queryInput.value = "<%= query %>";
  roleInput.value = "<%= role %>";
  cityInput.value = cityInput.getAttribute('data-value');

  const query = queryInput.value;
  const role = roleInput.value;
  const city = cityInput.value;
	</script>
  </body>
</html>

search.ejs:
<!DOCTYPE html>
<html>
<head>
	<title>Search Musicians</title>
	<link rel="stylesheet" href="/jquery-ui/themes/base/all.css" />
	<link rel="stylesheet" href="/css/main.css" />
<script src="/jquery/dist/jquery.min.js"></script>
<script src="/jquery-ui/dist/jquery-ui.min.js"></script>

</head>
<body>
	<h1>Search Musicians</h1>
	<form action="/search" method="get">
		<label for="query">Search by name or genre:</label> <input id="query" name="query" type="text" value="<%= query %>"><br>
		<br>
		<label for="role">Search by role:</label> <select id="role" name="role">
			<option value="">
				All
			</option>
			<option value="Band">
				Band
			</option>
			<option value="Artist">
				Artist
			</option>
		</select>
		
		<label for="genre">Search by genre:</label> <select id="genre" name="genre">
			<option value="">
				All
			</option>
			<option value="Rock">
				Rock
			</option>
			<option value="Pop">
				Pop
			</option>
		</select>
		
<label for="city">Search by location:</label>
<input id="city" name="city" type="text" autocomplete="on" value="<%= city %>" data-value="">

		<br>
		<!-- Add new input field for location -->


		<br>
		
		<br>
		<button type="submit">Search</button>
	</form><%if (musicians.length > 0) { %>
	<h2>Results:</h2>
	<ul>
  <% musicians.forEach(musician => { %>
    <li>
      <a href="<%= musician.profileLink %>">
        <img src="/img/<%= musician.thumbnail || 'avatar.jpg' %>" alt="Musician Thumbnail">
        <div class="musician-info">
          <span class="name"><%= musician.name %></span>
          <span class="genre"><%= musician.genre %></span>
        </div>
      </a>
    </li>
  <% }); %>
</ul><%} else if (query || role || city || genre) { %>
	<p>No musicians found.</p><%} %>
	
<script>



  

  $("#city").autocomplete({
    source: '/autocomplete/cities',
    minLength: 1,
  });

  const queryInput = document.querySelector("#query");
  const roleInput = document.querySelector("#role");
  const cityInput = document.querySelector("#city");

  queryInput.value = "<%= query %>";
  roleInput.value = "<%= role %>";
  cityInput.value = cityInput.getAttribute('data-value');

  const query = queryInput.value;
  const role = roleInput.value;
  const city = cityInput.value;

</script>
</body>
</html>

и главный css, main.css:

.musician-info {
  display: inline-block;
  margin-left: 10px;
  vertical-align: top;
  
}

.name {
  font-weight: bold;
  font-size: 1.2em;
}

.genre {
  display: block;
  font-size: 0.9em;
  color: #666;
}

ul li a img {
max-width: 200px;
height: auto;
}