diff --git a/app/root.tsx b/app/root.tsx
index afe3dcc..674e361 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -15,11 +15,13 @@ export function Layout({ children }: PropsWithChildren) {
         <Links />
       </head>
       <body className={'h-full'}>
-        <header className={'p-4 bg-gray-50 dark:bg-gray-900 fixed w-full z-10'}>
+        <header className={'p-4 px-10 bg-gray-50 dark:bg-gray-900 fixed w-full z-10'}>
           <nav>
             <ul className={'flex gap-4'}>
               <li>
-                <Link to={'/'}>Home</Link>
+                <Link to={'/'} className={'text-xl hover:underline'}>
+                  Home
+                </Link>
               </li>
             </ul>
           </nav>
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index afda954..78f2cb0 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -21,9 +21,11 @@ export const loader = async () => {
 
 export default function Index() {
   const { keywords } = useLoaderData<typeof loader>()
+
   return (
     <div>
       <h1 className={'text-2xl font-semibold mb-6'}>Compare vacancies trends over time</h1>
+      <h2 className={'text-lg mb-2'}>Select a preset:</h2>
       <div className={'flex flex-col gap-2'} role={'list'}>
         {Object.entries(keywords?.presets ?? {}).map(([label, values]) => {
           if (values.length === 0) return null
@@ -32,7 +34,7 @@ export default function Index() {
             <Tooltip content={<TooltipContent values={values} />} key={label}>
               <Link
                 role={'listitem'}
-                className={'text-blue-300 hover:underline w-max'}
+                className={'text-sky-500 hover:underline w-max'}
                 to={{
                   pathname: '/trends',
                   search: new URLSearchParams({
