diff --git a/app/components/Button/Button.tsx b/app/components/Button/Button.tsx
index 6ae047d..3538153 100644
--- a/app/components/Button/Button.tsx
+++ b/app/components/Button/Button.tsx
@@ -68,23 +68,23 @@ function classNames({
 }): string {
   // Base classes
   let buttonStyles = `${
-    icon ? "rounded-full" : "rounded-md"
+    icon ? "rounded-full" : "rounded-md font-medium"
   } transition-all box-border`;
   // Set classes for different variants
   let variantStyles = "";
   switch (variant) {
     case "primary":
-      variantStyles = "text-white bg-stone-600 hover:opacity-80";
+      variantStyles = "text-white bg-primary-600 hover:opacity-80";
       break;
     case "secondary":
-      variantStyles = "text-stone-700 bg-stone-200 hover:opacity-80";
+      variantStyles = "text-neutral-800 bg-neutral-300 hover:opacity-80";
       break;
     case "outlined":
       variantStyles =
-        "bg-inherit text-stone-800 border-stone-400 border hover:bg-stone-200";
+        "bg-inherit text-primary-500 border-primary-500 border hover:bg-primary-100";
       break;
     case "text":
-      variantStyles = "hover:bg-stone-200 text-stone-700";
+      variantStyles = "hover:bg-neutral-200 text-neutral-700";
       break;
   }
   buttonStyles = append(buttonStyles, variantStyles);
diff --git a/app/components/Dialog/Dialog.tsx b/app/components/Dialog/Dialog.tsx
index 5439aaa..86c4652 100644
--- a/app/components/Dialog/Dialog.tsx
+++ b/app/components/Dialog/Dialog.tsx
@@ -24,7 +24,7 @@ export const Dialog: React.FC<PropsWithChildren<Props>> = ({
       className="relative z-10"
       data-testid="dialog"
     >
-      <div className="fixed inset-0 bg-stone-900 bg-opacity-25" />
+      <div className="fixed inset-0 bg-neutral-900 bg-opacity-25" />
       <div className="fixed inset-0 overflow-y-auto min-h-screen md:min-h-min">
         <div className="flex h-full justify-center pt-4 md:pb-4 md:px-4 text-center ">
           <HeadlessDialog.Panel className="w-full h-full md:h-auto md:max-w-md transform overflow-hidden rounded-2xl bg-white p-8 text-left align-middle shadow-xl transition-all relative">
@@ -57,13 +57,13 @@ export const Dialog: React.FC<PropsWithChildren<Props>> = ({
             </Button>
             <HeadlessDialog.Title
               as="h2"
-              className="text-3xl font-medium leading-6 text-stone-900"
+              className="text-3xl font-medium leading-6 text-neutral-900"
             >
               {title}
             </HeadlessDialog.Title>
             {description && (
               <div className="mt-2">
-                <p className="text-sm text-stone-500">{description}</p>
+                <p className="text-sm text-neutral-500">{description}</p>
               </div>
             )}
 
diff --git a/app/components/Input/Input.tsx b/app/components/Input/Input.tsx
index 013c10c..699c51e 100644
--- a/app/components/Input/Input.tsx
+++ b/app/components/Input/Input.tsx
@@ -8,7 +8,7 @@ export const Input: React.FC<InputHTMLAttributes<HTMLInputElement>> =
         data-testid="input"
         className={[
           !props.hidden && "block",
-          "w-full bg-inherit focus:outline-none placeholder-stone-400",
+          "w-full bg-inherit focus:outline-none placeholder-neutral-400",
           className,
         ].join(" ")}
         {...props}
diff --git a/app/components/MarkingInput/MarkingInput.tsx b/app/components/MarkingInput/MarkingInput.tsx
index d19bbd2..db16b03 100644
--- a/app/components/MarkingInput/MarkingInput.tsx
+++ b/app/components/MarkingInput/MarkingInput.tsx
@@ -67,7 +67,7 @@ export const MarkingInput: React.FC<Props> = ({ marking, deleteMark }) => {
           style={{
             width: `${mark.length || 1}ch`,
           }}
-          className="font-mono rounded-sm !bg-stone-200 w-auto"
+          className="font-mono rounded-sm !bg-neutral-200 w-auto"
         />
         <Button
           variant="text"
diff --git a/app/components/NavBar/NavBar.tsx b/app/components/NavBar/NavBar.tsx
index 600818d..54c26c1 100644
--- a/app/components/NavBar/NavBar.tsx
+++ b/app/components/NavBar/NavBar.tsx
@@ -6,19 +6,42 @@ type Props = {};
 
 export const NavBar: React.FC<Props> = () => {
   return (
-    <nav className="bg-stone-300 py-4 px-2" data-testid="navbar">
-      <div className="flex container max-w-xl mx-auto">
-        <div className="flex-1">PubJam</div>
+    <nav className="bg-neutral-200 py-4 px-2" data-testid="navbar">
+      <div className="flex container max-w-xl mx-auto bg-neutral-50 px-4 py-3 rounded-2xl items-center shadow-md">
+        <div className="flex-1">
+          <div className="flex items-center">
+            <div>
+              <img
+                src="/tune_binder_logo.svg"
+                alt="TuneBunder Logo"
+                className="object-contain w-7"
+              />
+            </div>
+            {/* <div className="flex-1">TuneBinder</div> */}
+          </div>
+        </div>
         <div className="space-x-6">
           <NavLink
             to={"/songs"}
-            className={({ isActive }) => `${isActive && "underline font-bold"}`}
+            className={({ isActive }) =>
+              `${
+                isActive
+                  ? "text-primary-600 border-primary-500 font-medium"
+                  : "text-neutral-500 hover:opacity-80 hover:text-primary-600"
+              } uppercase text-sm transition-all border-b-2 border-transparent`
+            }
           >
             Songs
           </NavLink>
           <NavLink
             to={"/setlists"}
-            className={({ isActive }) => `${isActive && "underline font-bold"}`}
+            className={({ isActive }) =>
+              `${
+                isActive
+                  ? "text-primary-600 border-primary-500 font-medium"
+                  : "text-neutral-500 hover:opacity-80 hover:text-primary-600"
+              } uppercase text-sm transition-all border-b-2 border-transparent`
+            }
           >
             Setlists
           </NavLink>
diff --git a/app/components/Search/Search.tsx b/app/components/Search/Search.tsx
index 65f2151..1629adf 100644
--- a/app/components/Search/Search.tsx
+++ b/app/components/Search/Search.tsx
@@ -8,17 +8,17 @@ interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
 export const Search: React.FC<Props> = ({ onSearch, ...props }) => {
   return (
     <div
-      className="border-stone-400 border rounded-md px-3 py-2 flex items-center focus-within:border-stone-800 flex-row-reverse transition-colors"
+      className="border-neutral-400 border rounded-md px-3 py-2 flex items-center focus-within:border-neutral-800 flex-row-reverse transition-colors"
       data-testid="search"
     >
       <input
         type={"search"}
-        className="peer bg-inherit placeholder-stone-500 w-full outline-none"
+        className="peer bg-inherit placeholder-neutral-500 w-full outline-none"
         placeholder="Search"
         onChange={onSearch}
         {...props}
       />
-      <div className="pr-3 text-stone-500 peer-focus:text-stone-700 transition-colors">
+      <div className="pr-3 text-neutral-500 peer-focus:text-neutral-700 transition-colors">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
diff --git a/app/components/Select/Select.tsx b/app/components/Select/Select.tsx
index 29a3a9b..5c7be70 100644
--- a/app/components/Select/Select.tsx
+++ b/app/components/Select/Select.tsx
@@ -1,5 +1,5 @@
 import { Listbox } from "@headlessui/react";
-import type { InputHTMLAttributes} from "react";
+import type { InputHTMLAttributes } from "react";
 import { useEffect } from "react";
 import React, { useState } from "react";
 import { Input } from "../Input";
@@ -48,7 +48,7 @@ export function Select({
         <div className="relative">
           <Listbox.Button
             className={[
-              "relative w-full cursor-default rounded-sm bg-inherit py-2 pr-10 text-left focus:outline-none focus-visible:ring-1 focus-visible:ring-stone-300 focus-visible:ring-offset-2 focus-visible:ring-offset-stone-300 sm:text-sm",
+              "relative w-full cursor-default rounded-sm bg-inherit py-2 pr-10 text-left focus:outline-none focus-visible:ring-1 focus-visible:ring-neutral-300 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-300 sm:text-sm",
               className,
             ].join(" ")}
           >
@@ -81,7 +81,7 @@ export function Select({
                 key={option.value}
                 className={({ active }) =>
                   `relative cursor-default select-none py-2 pl-10 pr-4 ${
-                    active ? "bg-stone-100 text-stone-900" : "text-gray-900"
+                    active ? "bg-neutral-100 text-neutral-900" : "text-gray-900"
                   }`
                 }
                 value={option}
@@ -96,7 +96,7 @@ export function Select({
                       {option.name}
                     </span>
                     {selected ? (
-                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-stone-600 text-sm">
+                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-600 text-sm">
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
                           fill="none"
diff --git a/app/components/Stanza/Stanza.tsx b/app/components/Stanza/Stanza.tsx
index 0b5b1bd..051f48f 100644
--- a/app/components/Stanza/Stanza.tsx
+++ b/app/components/Stanza/Stanza.tsx
@@ -20,7 +20,7 @@ export const Stanza: React.FC<Props> = ({ stanza }) => {
                 {line.markings?.map((mark) => (
                   <div
                     key={mark.id}
-                    className="inline-block text-center bg-stone-200 text-stone-800 font-mono outline-none rounded-sm absolute top-0"
+                    className="inline-block text-center bg-neutral-200 text-neutral-800 font-mono outline-none rounded-sm absolute top-0"
                     style={{ left: `${mark.indent}ch` }}
                   >
                     {mark.mark}
diff --git a/app/components/Textarea/Textarea.tsx b/app/components/Textarea/Textarea.tsx
index 23bbc76..5d3d2e7 100644
--- a/app/components/Textarea/Textarea.tsx
+++ b/app/components/Textarea/Textarea.tsx
@@ -30,7 +30,7 @@ export const Textarea: React.FC<InputHTMLAttributes<HTMLTextAreaElement>> =
         wrap={"soft"}
         className={[
           !props.hidden && "block",
-          "w-full bg-inherit focus:outline-none resize-none overflow-hidden placeholder-stone-400",
+          "w-full bg-inherit focus:outline-none resize-none overflow-hidden placeholder-neutral-400",
           className,
         ].join(" ")}
       />
diff --git a/app/components/dialogs/AddSongs/AddSongs.tsx b/app/components/dialogs/AddSongs/AddSongs.tsx
index 97ff819..30c3f9c 100644
--- a/app/components/dialogs/AddSongs/AddSongs.tsx
+++ b/app/components/dialogs/AddSongs/AddSongs.tsx
@@ -46,7 +46,7 @@ export function AddSongs() {
           <div key={song.id} className="flex items-center">
             <div className="flex-1">
               <h3 className="text-xl">{song.title}</h3>
-              <p className="text-stone-500 text-xs uppercase font-bold">
+              <p className="text-neutral-500 text-xs uppercase font-bold">
                 {song.attribution}
               </p>
             </div>
diff --git a/app/components/forms/logout/index.tsx b/app/components/forms/logout/index.tsx
index de417c5..23cf74d 100644
--- a/app/components/forms/logout/index.tsx
+++ b/app/components/forms/logout/index.tsx
@@ -4,7 +4,9 @@ import { Button } from "~/components/Button";
 export const LogoutButton = () => {
   return (
     <Form action="/logout" method="post">
-      <Button variant="text">Logout</Button>
+      <Button variant="text" size="sm" className="opacity-50 uppercase text-xs">
+        Logout
+      </Button>
     </Form>
   );
 };
diff --git a/app/components/forms/setlist/SetlistForm.tsx b/app/components/forms/setlist/SetlistForm.tsx
index d917572..782315c 100644
--- a/app/components/forms/setlist/SetlistForm.tsx
+++ b/app/components/forms/setlist/SetlistForm.tsx
@@ -19,7 +19,7 @@ const SetlistForm = forwardRef<
       className="space-y-3"
     >
       <div className="space-y-1">
-        <label className="uppercase text-xs font-medium text-stone-400">
+        <label className="uppercase text-xs font-medium text-neutral-400">
           Name
         </label>
         <Input
@@ -27,18 +27,18 @@ const SetlistForm = forwardRef<
           defaultValue={setlist?.name}
           placeholder="Rapunzels 10/9/23"
           autoFocus
-          className="border border-stone-200 px-4 py-3 rounded-md focus:border-stone-400"
+          className="border border-neutral-200 px-4 py-3 rounded-md focus:border-neutral-400"
         />
       </div>
       <div className="space-y-1">
-        <label className="uppercase text-xs font-medium text-stone-400">
+        <label className="uppercase text-xs font-medium text-neutral-400">
           Description <span className="font-normal">(optional)</span>
         </label>
         <Textarea
           name="description"
           defaultValue={setlist?.description}
           placeholder="An all sea shanty show in honor of Lief Erickson Day."
-          className="border border-stone-200 px-4 py-3 rounded-md focus:border-stone-400"
+          className="border border-neutral-200 px-4 py-3 rounded-md focus:border-neutral-400"
         />
       </div>
       <div>
diff --git a/app/components/forms/song/LineFields/LineFields.tsx b/app/components/forms/song/LineFields/LineFields.tsx
index 1fbd676..3373605 100644
--- a/app/components/forms/song/LineFields/LineFields.tsx
+++ b/app/components/forms/song/LineFields/LineFields.tsx
@@ -87,7 +87,7 @@ export const LineFields: React.FC<Props> = ({
             style={styles.popper}
             {...attributes.popper}
           >
-            <Menu.Button className="bg-stone-200 h-full rounded-sm text-stone-600 text-sm px-0.5">
+            <Menu.Button className="bg-neutral-200 h-full rounded-sm text-neutral-600 text-sm px-0.5">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -111,7 +111,7 @@ export const LineFields: React.FC<Props> = ({
                 <button
                   type="button"
                   className={`${
-                    active ? "bg-stone-200" : "text-stone-900"
+                    active ? "bg-neutral-200" : "text-neutral-900"
                   } group flex w-full items-center rounded-md px-4 py-3`}
                   onClick={() => setShowNotes((x) => !x)}
                 >
@@ -153,7 +153,7 @@ export const LineFields: React.FC<Props> = ({
               <button
                 key={index}
                 onClick={insertMark(index)}
-                className="bg-stone-200 text-stone-500 opacity-0 transition-opacity active:opacity-60 hover:opacity-100 focus:opacity-100 font-mono rounded-sm"
+                className="bg-neutral-200 text-neutral-500 opacity-0 transition-opacity active:opacity-60 hover:opacity-100 focus:opacity-100 font-mono rounded-sm"
               >
                 +
               </button>
diff --git a/app/components/forms/song/SongForm.tsx b/app/components/forms/song/SongForm.tsx
index 1cf0dce..7d20391 100644
--- a/app/components/forms/song/SongForm.tsx
+++ b/app/components/forms/song/SongForm.tsx
@@ -62,7 +62,7 @@ const SongForm = forwardRef<
       </div>
       {/* <button
           type="submit"
-          className="bg-stone-200 px-5 py-2 rounded-md text-stone-800 mt-4"
+          className="bg-neutral-200 px-5 py-2 rounded-md text-neutral-800 mt-4"
         >
           Save
         </button> */}
diff --git a/app/components/forms/song/StanzaFields/StanzaFields.tsx b/app/components/forms/song/StanzaFields/StanzaFields.tsx
index 23e0743..a37b9a7 100644
--- a/app/components/forms/song/StanzaFields/StanzaFields.tsx
+++ b/app/components/forms/song/StanzaFields/StanzaFields.tsx
@@ -43,7 +43,7 @@ export const StanzaFields: React.FC<{
 
   return (
     <>
-      <div className="group/stanza py-2 border-y-2 focus-within:border-stone-200 hover:border-stone-200 border-transparent transition-all">
+      <div className="group/stanza py-2 border-y-2 focus-within:border-neutral-200 hover:border-neutral-200 border-transparent transition-all">
         <div className="flex">
           <div className="flex-1">
             <Select
@@ -60,7 +60,7 @@ export const StanzaFields: React.FC<{
           <div>
             <button
               type="button"
-              className="hover:bg-stone-200 rounded-sm text-stone-600 text-sm p-2 group-hover/stanza:opacity-100 opacity-0 transition-colors whitespace-nowrap inline-flex items-center"
+              className="hover:bg-neutral-200 rounded-sm text-neutral-600 text-sm p-2 group-hover/stanza:opacity-100 opacity-0 transition-colors whitespace-nowrap inline-flex items-center"
               onClick={confirmAndDelete}
             >
               <span className="mr-1">
@@ -84,7 +84,7 @@ export const StanzaFields: React.FC<{
               type="button"
               aria-label="Add Line"
               onClick={insertLine(index)}
-              className="block bg-stone-200 text-stone-600 opacity-0 hover:opacity-100 transition-all w-full rounded-sm py-1 h-2 hover:h-6 font-mono text-sm leading-none"
+              className="block bg-neutral-200 text-neutral-600 opacity-0 hover:opacity-100 transition-all w-full rounded-sm py-1 h-2 hover:h-6 font-mono text-sm leading-none"
             >
               + Add Line
             </button>
@@ -95,7 +95,7 @@ export const StanzaFields: React.FC<{
             type="button"
             aria-label="Add Line"
             onClick={insertLine(0)}
-            className="block bg-stone-200 text-stone-600 opacity-0 hover:opacity-100 transition-all w-full rounded-sm py-1 h-2 hover:h-6 font-mono text-sm leading-none"
+            className="block bg-neutral-200 text-neutral-600 opacity-0 hover:opacity-100 transition-all w-full rounded-sm py-1 h-2 hover:h-6 font-mono text-sm leading-none"
           >
             + Add Line
           </button>
@@ -105,7 +105,7 @@ export const StanzaFields: React.FC<{
         type="button"
         aria-label="Add Line"
         onClick={insertStanza}
-        className="block bg-stone-200 text-stone-600 opacity-0 hover:opacity-100 transition-all w-full rounded-sm py-1 h-2 hover:h-6 font-mono text-sm leading-none"
+        className="block bg-neutral-200 text-neutral-600 opacity-0 hover:opacity-100 transition-all w-full rounded-sm py-1 h-2 hover:h-6 font-mono text-sm leading-none"
       >
         + New Stanza
       </button>
diff --git a/app/routes/__app.tsx b/app/routes/__app.tsx
index 261ad3a..de5eb5d 100644
--- a/app/routes/__app.tsx
+++ b/app/routes/__app.tsx
@@ -9,7 +9,7 @@ export default function App() {
   return (
     <>
       <NavBar />
-      <main className="bg-stone-300 min-h-screen py-4 px-2 md:px-0">
+      <main className="bg-neutral-200 min-h-screen py-4 px-2 md:px-0">
         <Outlet />
       </main>
       <ModalRouter>
diff --git a/app/routes/__app/setlists/$id/index.tsx b/app/routes/__app/setlists/$id/index.tsx
index 05cf955..94e4777 100644
--- a/app/routes/__app/setlists/$id/index.tsx
+++ b/app/routes/__app/setlists/$id/index.tsx
@@ -60,7 +60,7 @@ export default function ViewSetlist() {
           </Button.Link>
         </div>
       </div>
-      <div className="bg-stone-50  rounded-lg shadow-lg p-8 flex relative">
+      <div className="bg-neutral-50  rounded-lg shadow-lg p-8 flex relative">
         <Button.Link
           to={`/setlists/${setlist.id}?modal=edit-setlist`}
           className="absolute top-2 right-4 text-xs flex items-center"
@@ -92,7 +92,9 @@ export default function ViewSetlist() {
         <div className="flex-1">
           <h1 className="text-4xl">{setlist.name}</h1>
           <p className="mb-2">{setlist.description}</p>
-          <p className="text-stone-500 text-xs">{setlist.songs.length} Songs</p>
+          <p className="text-neutral-500 text-xs">
+            {setlist.songs.length} Songs
+          </p>
         </div>
       </div>
       <div className="flex">
@@ -160,16 +162,16 @@ const SetlistSong: React.FC<{
         <div className="shadow-md transition-all relative">
           <div
             className={`bg-white sticky top-0 bg-inherit w-full outline-none  ${
-              open && "border-b border-stone-300"
+              open && "border-b border-neutral-300"
             } ${open ? "rounded-t-md" : "rounded-md"} flex items-center`}
             style={{ zIndex: order }}
           >
             <Disclosure.Button
               className={"flex-1 pl-4 py-5 flex items-center group"}
             >
-              <div className="mr-3 p-2 group-hover:bg-stone-200 transition-all rounded-full">
+              <div className="mr-3 p-2 group-hover:bg-neutral-200 transition-all rounded-full">
                 <PlayIcon
-                  className={`${open && "rotate-90"} text-stone-600`}
+                  className={`${open && "rotate-90"} text-neutral-600`}
                   width="1em"
                 />
               </div>
@@ -177,7 +179,7 @@ const SetlistSong: React.FC<{
                 <h2 className="text-lg">
                   {song.title || `Untitled ${song.createdAt.toLocaleString()}`}
                 </h2>
-                <p className="text-xs font-bold text-stone-500 uppercase">
+                <p className="text-xs font-bold text-neutral-500 uppercase">
                   {song.attribution || "Unknown Artist"}
                 </p>
               </div>
@@ -195,7 +197,7 @@ const SetlistSong: React.FC<{
                       <Link
                         to={`/songs/${song.id}/edit`}
                         className={`${
-                          active && "bg-stone-200"
+                          active && "bg-neutral-200"
                         } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
                       >
                         <PencilIcon
diff --git a/app/routes/__app/setlists/index.tsx b/app/routes/__app/setlists/index.tsx
index eb7178e..266b987 100644
--- a/app/routes/__app/setlists/index.tsx
+++ b/app/routes/__app/setlists/index.tsx
@@ -1,5 +1,6 @@
+import { PlusIcon } from "@heroicons/react/24/solid";
 import type { Setlist } from "@prisma/client";
-import { Link } from "@remix-run/react";
+import { Form, Link } from "@remix-run/react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { Button } from "~/components/Button";
 import { Search } from "~/components/Search";
@@ -49,11 +50,26 @@ export default function SetlistsIndex() {
       </div>
       <Search onSearch={onSearch} />
       <div className="space-y-2">
+        {!setlists.length && (
+          <div className="border-2 border-primary-500 rounded-md p-8">
+            <h2 className="text-2xl font-medium mb-4 text-primary-700">
+              Easily share a group of songs with friends and bandmates.
+            </h2>
+            <Form method="post" action="/setlists/new">
+              <Button type="submit" className="inline-flex items-center">
+                <span className="mr-2">
+                  <PlusIcon width={"1em"} />
+                </span>
+                Create A Setlist
+              </Button>
+            </Form>
+          </div>
+        )}
         {results.map((setlist) => (
           <Link
             to={`/setlists/${setlist.id}`}
             key={setlist.id}
-            className="bg-stone-100 px-7 py-5 rounded-md shadow-md hover:shadow-xl hover:bg-white transition-all flex items-start"
+            className="bg-neutralal-100 px-7 py-5 rounded-md shadow-md hover:shadow-xl hover:bg-white transition-all flex items-start"
           >
             <div className="mr-2">
               <span
@@ -66,10 +82,10 @@ export default function SetlistsIndex() {
                 {setlist.name ||
                   `Untitled ${setlist.createdAt.toLocaleString()}`}
               </h2>
-              <p className="text-sm text-stone-500 mb-2">
+              <p className="text-sm text-neutralal-500 mb-2">
                 {setlist.description}
               </p>
-              <p className="text-xs text-stone-500">
+              <p className="text-xs text-neutralal-500">
                 {setlist.songs.length} Songs
               </p>
             </div>
diff --git a/app/routes/__app/songs/$id/edit.tsx b/app/routes/__app/songs/$id/edit.tsx
index ce48455..d21cddf 100644
--- a/app/routes/__app/songs/$id/edit.tsx
+++ b/app/routes/__app/songs/$id/edit.tsx
@@ -36,7 +36,7 @@ export default function EditSong() {
         <div className="flex-1">
           <Button.Link
             to="/songs"
-            className="inline-flex items-center text-sm"
+            className="inline-flex items-center text-sm opacity-70"
             variant="text"
             size="sm"
           >
@@ -64,7 +64,7 @@ export default function EditSong() {
           <Button.Link
             to={`/songs/${song.id}`}
             size="md"
-            variant="outlined"
+            variant="secondary"
             className="inline-flex items-center text-sm"
           >
             <span className="mr-2">
@@ -74,10 +74,10 @@ export default function EditSong() {
           </Button.Link>
         </div>
       </div>
-      <div className="bg-stone-50  rounded-lg shadow-lg relative">
+      <div className="bg-neutral-50  rounded-lg shadow-lg relative">
         <ClientOnly>
           {() => (
-            <div className="absolute top-4 right-4 text-xs text-stone-400">
+            <div className="absolute top-4 right-4 text-xs text-neutral-400">
               {hasUnsavedChanges ? "Saving..." : "Saved"}
             </div>
           )}
diff --git a/app/routes/__app/songs/$id/index.tsx b/app/routes/__app/songs/$id/index.tsx
index 3b8885a..6781ed7 100644
--- a/app/routes/__app/songs/$id/index.tsx
+++ b/app/routes/__app/songs/$id/index.tsx
@@ -26,7 +26,7 @@ export default function () {
         <div className="flex-1">
           <Button.Link
             to="/songs"
-            className="inline-flex items-center text-sm"
+            className="inline-flex items-center text-sm  opacity-70"
             variant="text"
             size="sm"
           >
@@ -54,7 +54,7 @@ export default function () {
           <Button.Link
             to={`/songs/${song.id}/edit`}
             size="md"
-            variant="outlined"
+            variant="secondary"
             className="inline-flex items-center text-sm"
           >
             <span className="mr-2">
@@ -78,13 +78,13 @@ export default function () {
           </Button.Link>
         </div>
       </div>
-      <div className="bg-stone-50  rounded-lg shadow-lg relative">
+      <div className="bg-neutral-50  rounded-lg shadow-lg relative">
         <div className="px-10 py-8">
           <div className="mb-4">
             <h1 className="text-4xl w-full bg-inherit py-1 outline-none hover:cursor-text resize-none">
               {song.title}
             </h1>
-            <p className="text-xl w-full bg-inherit py-1 outline-none hover:cursor-text resize-none text-stone-500">
+            <p className="text-xl w-full bg-inherit py-1 outline-none hover:cursor-text resize-none text-neutral-500">
               {song.attribution}
             </p>
           </div>
diff --git a/app/routes/__app/songs/index.tsx b/app/routes/__app/songs/index.tsx
index 123a6c3..427d78d 100644
--- a/app/routes/__app/songs/index.tsx
+++ b/app/routes/__app/songs/index.tsx
@@ -35,8 +35,8 @@ export default function SongsIndex() {
       <Search onSearch={onSearch} />
       <div className="space-y-2">
         {!songs.length && (
-          <div className="border border-stone-500 rounded-md p-8">
-            <h2 className="text-2xl font-bold mb-4">
+          <div className="border-2 border-primary-500 rounded-md p-8">
+            <h2 className="text-2xl font-medium mb-4 text-primary-700">
               Add a song and start jamming!
             </h2>
             <Form method="post" action="/songs/new">
@@ -53,12 +53,12 @@ export default function SongsIndex() {
           <Link
             to={`/songs/${song.id}`}
             key={song.id}
-            className="block bg-stone-100 px-7 py-5 rounded-md shadow-md hover:shadow-xl hover:bg-white transition-all"
+            className="block bg-white px-7 py-5 rounded-md shadow-md hover:shadow-xl hover:bg-white transition-all"
           >
             <h2 className="text-lg">
               {song.title || `Untitled ${song.createdAt.toLocaleString()}`}
             </h2>
-            <p className="text-xs font-bold text-stone-500 uppercase">
+            <p className="text-xs font-bold text-neutral-500 uppercase">
               {song.attribution || "Unknown Artist"}
             </p>
           </Link>
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
index 1d98448..cb590e4 100644
--- a/app/routes/index.tsx
+++ b/app/routes/index.tsx
@@ -12,7 +12,7 @@ export const loader = async ({ request }: LoaderArgs) => {
 
 export default function Landing() {
   return (
-    <div className="h-screen flex items-center flex-col justify-center bg-stone-300">
+    <div className="h-screen flex items-center flex-col justify-center bg-neutral-300">
       <h1 className="text-center text-3xl mb-4">👋 Welcome to TuneBinder</h1>
       <div className="flex flex-col md:flex-row md:space-y-0 space-y-3 items-center justify-center md:space-x-3">
         <SignupButton />
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
index 312c68a..a93dcab 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -16,13 +16,13 @@
   /* 2 */
   border-style: solid;
   /* 2 */
-  border-color: #e5e7eb;
+  border-color: currentColor;
   /* 2 */
 }
 
 ::before,
 ::after {
-  --tw-content: "";
+  --tw-content: '';
 }
 
 /*
@@ -41,11 +41,9 @@ html {
   -moz-tab-size: 4;
   /* 3 */
   -o-tab-size: 4;
-  tab-size: 4;
+     tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
@@ -84,7 +82,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
 
 abbr:where([title]) {
   -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
+          text-decoration: underline dotted;
 }
 
 /*
@@ -128,8 +126,7 @@ code,
 kbd,
 samp,
 pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   /* 1 */
   font-size: 1em;
   /* 2 */
@@ -220,9 +217,9 @@ select {
 */
 
 button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
+[type='button'],
+[type='reset'],
+[type='submit'] {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -269,7 +266,7 @@ Correct the cursor style of increment and decrement buttons in Safari.
 2. Correct the outline style in Safari.
 */
 
-[type="search"] {
+[type='search'] {
   -webkit-appearance: textfield;
   /* 1 */
   outline-offset: -2px;
@@ -354,8 +351,7 @@ textarea {
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
 
-input::-moz-placeholder,
-textarea::-moz-placeholder {
+input::-moz-placeholder, textarea::-moz-placeholder {
   opacity: 1;
   /* 1 */
   color: #9ca3af;
@@ -423,9 +419,7 @@ video {
   display: none;
 }
 
-*,
-::before,
-::after {
+*, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -435,16 +429,16 @@ video {
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
-  --tw-pan-x: ;
-  --tw-pan-y: ;
-  --tw-pinch-zoom: ;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
-  --tw-ordinal: ;
-  --tw-slashed-zero: ;
-  --tw-numeric-figure: ;
-  --tw-numeric-spacing: ;
-  --tw-numeric-fraction: ;
-  --tw-ring-inset: ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
   --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -452,24 +446,24 @@ video {
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
-  --tw-blur: ;
-  --tw-brightness: ;
-  --tw-contrast: ;
-  --tw-grayscale: ;
-  --tw-hue-rotate: ;
-  --tw-invert: ;
-  --tw-saturate: ;
-  --tw-sepia: ;
-  --tw-drop-shadow: ;
-  --tw-backdrop-blur: ;
-  --tw-backdrop-brightness: ;
-  --tw-backdrop-contrast: ;
-  --tw-backdrop-grayscale: ;
-  --tw-backdrop-hue-rotate: ;
-  --tw-backdrop-invert: ;
-  --tw-backdrop-opacity: ;
-  --tw-backdrop-saturate: ;
-  --tw-backdrop-sepia: ;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
 }
 
 ::backdrop {
@@ -482,16 +476,16 @@ video {
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
-  --tw-pan-x: ;
-  --tw-pan-y: ;
-  --tw-pinch-zoom: ;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
-  --tw-ordinal: ;
-  --tw-slashed-zero: ;
-  --tw-numeric-figure: ;
-  --tw-numeric-spacing: ;
-  --tw-numeric-fraction: ;
-  --tw-ring-inset: ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
   --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -499,24 +493,24 @@ video {
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
-  --tw-blur: ;
-  --tw-brightness: ;
-  --tw-contrast: ;
-  --tw-grayscale: ;
-  --tw-hue-rotate: ;
-  --tw-invert: ;
-  --tw-saturate: ;
-  --tw-sepia: ;
-  --tw-drop-shadow: ;
-  --tw-backdrop-blur: ;
-  --tw-backdrop-brightness: ;
-  --tw-backdrop-contrast: ;
-  --tw-backdrop-grayscale: ;
-  --tw-backdrop-hue-rotate: ;
-  --tw-backdrop-invert: ;
-  --tw-backdrop-opacity: ;
-  --tw-backdrop-saturate: ;
-  --tw-backdrop-sepia: ;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
 }
 
 .container {
@@ -766,6 +760,10 @@ video {
   width: 1.25rem;
 }
 
+.w-7 {
+  width: 1.75rem;
+}
+
 .max-w-xl {
   max-width: 36rem;
 }
@@ -780,22 +778,16 @@ video {
 
 .-translate-x-9 {
   --tw-translate-x: -2.25rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .rotate-90 {
   --tw-rotate: 90deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .cursor-default {
@@ -804,8 +796,8 @@ video {
 
 .select-none {
   -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
 .resize-none {
@@ -888,11 +880,6 @@ video {
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
-.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-divide-opacity));
-}
-
 .overflow-auto {
   overflow: auto;
 }
@@ -935,6 +922,10 @@ video {
   border-radius: 0.5rem;
 }
 
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
 .rounded-t-md {
   border-top-left-radius: 0.375rem;
   border-top-right-radius: 0.375rem;
@@ -949,6 +940,10 @@ video {
   border-width: 1px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-y-2 {
   border-top-width: 2px;
   border-bottom-width: 2px;
@@ -958,17 +953,21 @@ video {
   border-bottom-width: 1px;
 }
 
-.border-stone-400 {
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
+.border-neutral-400 {
   --tw-border-opacity: 1;
   border-color: rgb(168 162 158 / var(--tw-border-opacity));
 }
 
-.border-stone-200 {
+.border-neutral-200 {
   --tw-border-opacity: 1;
   border-color: rgb(231 229 228 / var(--tw-border-opacity));
 }
 
-.border-stone-500 {
+.border-neutral-500 {
   --tw-border-opacity: 1;
   border-color: rgb(120 113 108 / var(--tw-border-opacity));
 }
@@ -977,31 +976,51 @@ video {
   border-color: transparent;
 }
 
-.border-stone-300 {
+.border-neutral-300 {
   --tw-border-opacity: 1;
   border-color: rgb(214 211 209 / var(--tw-border-opacity));
 }
 
-.bg-stone-300 {
+.border-primary-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(251 146 60 / var(--tw-border-opacity));
+}
+
+.border-primary-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(194 65 12 / var(--tw-border-opacity));
+}
+
+.border-primary-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(249 115 22 / var(--tw-border-opacity));
+}
+
+.bg-neutral-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(231 229 228 / var(--tw-bg-opacity));
+}
+
+.bg-neutral-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(214 211 209 / var(--tw-bg-opacity));
 }
 
-.bg-stone-600 {
+.bg-primary-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(87 83 78 / var(--tw-bg-opacity));
+  background-color: rgb(234 88 12 / var(--tw-bg-opacity));
 }
 
-.bg-stone-200 {
+.bg-secondary-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(231 229 228 / var(--tw-bg-opacity));
+  background-color: rgb(165 243 252 / var(--tw-bg-opacity));
 }
 
 .bg-inherit {
   background-color: inherit;
 }
 
-.bg-stone-900 {
+.bg-neutral-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(28 25 23 / var(--tw-bg-opacity));
 }
@@ -1011,35 +1030,65 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.\!bg-stone-200 {
+.\!bg-neutral-200 {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(231 229 228 / var(--tw-bg-opacity)) !important;
 }
 
-.bg-stone-100 {
+.bg-neutral-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 244 / var(--tw-bg-opacity));
 }
 
-.bg-red-200 {
+.bg-neutral-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+  background-color: rgb(250 250 249 / var(--tw-bg-opacity));
 }
 
-.bg-stone-50 {
+.bg-primary-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(250 250 249 / var(--tw-bg-opacity));
+  background-color: rgb(255 247 237 / var(--tw-bg-opacity));
+}
+
+.bg-primary-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 215 170 / var(--tw-bg-opacity));
+}
+
+.bg-primary-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 186 116 / var(--tw-bg-opacity));
+}
+
+.bg-primary-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
 }
 
-.bg-red-100 {
+.bg-secondary-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+  background-color: rgb(207 250 254 / var(--tw-bg-opacity));
+}
+
+.bg-secondary-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 211 238 / var(--tw-bg-opacity));
+}
+
+.bg-neutral-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(168 162 158 / var(--tw-bg-opacity));
 }
 
 .bg-opacity-25 {
   --tw-bg-opacity: 0.25;
 }
 
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -1189,8 +1238,7 @@ video {
 }
 
 .font-mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 .text-3xl {
@@ -1255,6 +1303,14 @@ video {
   font-weight: 400;
 }
 
+.font-thin {
+  font-weight: 100;
+}
+
+.font-light {
+  font-weight: 300;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -1272,76 +1328,81 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-stone-700 {
+.text-neutral-700 {
   --tw-text-opacity: 1;
   color: rgb(68 64 60 / var(--tw-text-opacity));
 }
 
-.text-stone-800 {
+.text-neutral-800 {
   --tw-text-opacity: 1;
   color: rgb(41 37 36 / var(--tw-text-opacity));
 }
 
-.text-stone-900 {
+.text-neutral-900 {
   --tw-text-opacity: 1;
   color: rgb(28 25 23 / var(--tw-text-opacity));
 }
 
-.text-stone-500 {
+.text-neutral-500 {
   --tw-text-opacity: 1;
   color: rgb(120 113 108 / var(--tw-text-opacity));
 }
 
-.text-gray-900 {
+.text-neutral-600 {
   --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
+  color: rgb(87 83 78 / var(--tw-text-opacity));
 }
 
-.text-stone-600 {
+.text-neutral-400 {
   --tw-text-opacity: 1;
-  color: rgb(87 83 78 / var(--tw-text-opacity));
+  color: rgb(168 162 158 / var(--tw-text-opacity));
 }
 
-.text-stone-400 {
+.text-primary-800 {
   --tw-text-opacity: 1;
-  color: rgb(168 162 158 / var(--tw-text-opacity));
+  color: rgb(154 52 18 / var(--tw-text-opacity));
+}
+
+.text-primary-700 {
+  --tw-text-opacity: 1;
+  color: rgb(194 65 12 / var(--tw-text-opacity));
 }
 
-.text-red-900 {
+.text-primary-600 {
   --tw-text-opacity: 1;
-  color: rgb(127 29 29 / var(--tw-text-opacity));
+  color: rgb(234 88 12 / var(--tw-text-opacity));
 }
 
-.text-red-800 {
+.text-primary-500 {
   --tw-text-opacity: 1;
-  color: rgb(153 27 27 / var(--tw-text-opacity));
+  color: rgb(249 115 22 / var(--tw-text-opacity));
 }
 
-.text-red-700 {
+.text-primary-400 {
   --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
+  color: rgb(251 146 60 / var(--tw-text-opacity));
 }
 
 .underline {
   text-decoration-line: underline;
 }
 
-.placeholder-stone-400::-moz-placeholder {
+.placeholder-neutral-400::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(168 162 158 / var(--tw-placeholder-opacity));
 }
 
-.placeholder-stone-400::placeholder {
+.placeholder-neutral-400::placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(168 162 158 / var(--tw-placeholder-opacity));
 }
 
-.placeholder-stone-500::-moz-placeholder {
+.placeholder-neutral-500::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(120 113 108 / var(--tw-placeholder-opacity));
 }
 
-.placeholder-stone-500::placeholder {
+.placeholder-neutral-500::placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(120 113 108 / var(--tw-placeholder-opacity));
 }
@@ -1354,30 +1415,36 @@ video {
   opacity: 0.75;
 }
 
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.opacity-70 {
+  opacity: 0.7;
+}
+
 .shadow-xl {
-  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
-    0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
-    0 8px 10px -6px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
-    0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
-    0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
-    0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .outline-none {
@@ -1386,12 +1453,9 @@ video {
 }
 
 .ring-1 {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-    calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
 .ring-black {
@@ -1410,8 +1474,7 @@ video {
 }
 
 .transition-colors {
-  transition-property: color, background-color, border-color,
-    text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -1422,12 +1485,12 @@ video {
   transition-duration: 150ms;
 }
 
-.focus-within\:border-stone-800:focus-within {
+.focus-within\:border-neutral-800:focus-within {
   --tw-border-opacity: 1;
   border-color: rgb(41 37 36 / var(--tw-border-opacity));
 }
 
-.focus-within\:border-stone-200:focus-within {
+.focus-within\:border-neutral-200:focus-within {
   --tw-border-opacity: 1;
   border-color: rgb(231 229 228 / var(--tw-border-opacity));
 }
@@ -1440,21 +1503,41 @@ video {
   cursor: text;
 }
 
-.hover\:border-stone-200:hover {
+.hover\:border-neutral-200:hover {
   --tw-border-opacity: 1;
   border-color: rgb(231 229 228 / var(--tw-border-opacity));
 }
 
-.hover\:bg-stone-200:hover {
+.hover\:bg-neutral-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(231 229 228 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-primary-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-white:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-neutral-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 244 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-primary-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 215 170 / var(--tw-bg-opacity));
+}
+
+.hover\:text-primary-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(234 88 12 / var(--tw-text-opacity));
+}
+
 .hover\:opacity-80:hover {
   opacity: 0.8;
 }
@@ -1464,15 +1547,12 @@ video {
 }
 
 .hover\:shadow-xl:hover {
-  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
-    0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
-    0 8px 10px -6px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.focus\:border-stone-400:focus {
+.focus\:border-neutral-400:focus {
   --tw-border-opacity: 1;
   border-color: rgb(168 162 158 / var(--tw-border-opacity));
 }
@@ -1487,15 +1567,12 @@ video {
 }
 
 .focus-visible\:ring-1:focus-visible {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-    calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 #0000);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus-visible\:ring-stone-300:focus-visible {
+.focus-visible\:ring-neutral-300:focus-visible {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(214 211 209 / var(--tw-ring-opacity));
 }
@@ -1504,7 +1581,7 @@ video {
   --tw-ring-offset-width: 2px;
 }
 
-.focus-visible\:ring-offset-stone-300:focus-visible {
+.focus-visible\:ring-offset-neutral-300:focus-visible {
   --tw-ring-offset-color: #d6d3d1;
 }
 
@@ -1516,7 +1593,7 @@ video {
   display: block;
 }
 
-.group:hover .group-hover\:bg-stone-200 {
+.group:hover .group-hover\:bg-neutral-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(231 229 228 / var(--tw-bg-opacity));
 }
@@ -1529,7 +1606,7 @@ video {
   opacity: 1;
 }
 
-.peer:focus ~ .peer-focus\:text-stone-700 {
+.peer:focus ~ .peer-focus\:text-neutral-700 {
   --tw-text-opacity: 1;
   color: rgb(68 64 60 / var(--tw-text-opacity));
 }
diff --git a/public/tune_binder_logo.svg b/public/tune_binder_logo.svg
index 7f67985..82dd823 100644
--- a/public/tune_binder_logo.svg
+++ b/public/tune_binder_logo.svg
@@ -1,18 +1,11 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 534 534" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
-    <g transform="matrix(1,0,0,1,-149.177,-51.3771)">
-        <g id="Artboard1" transform="matrix(1,0,0,1,-919.067,-12.2187)">
-            <rect x="919.067" y="12.219" width="748.416" height="613.589" style="fill:none;"/>
-            <g transform="matrix(1,0,0,1,919.067,12.2187)">
-                <rect x="149.177" y="51.377" width="533.447" height="533.447" style="fill:url(#_Linear1);"/>
-            </g>
+<svg width="100%" height="100%" viewBox="0 0 402 347" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g transform="matrix(1,0,0,1,-215.016,-916.038)">
+        <g transform="matrix(1,0,0,1,-919.067,766.152)">
             <g transform="matrix(0.941927,-0.00065305,0.00065305,0.941927,820.177,71.1818)">
-                <path d="M546.231,88.182L755.266,447.648L337.195,447.648L546.231,88.182ZM546.231,297.725L619.77,424.186L472.692,424.186L546.231,297.725ZM443.56,424.186L379.047,424.186L546.231,136.689L713.415,424.186L648.902,424.186L546.231,247.629L443.56,424.186Z" style="fill:white;stroke:white;stroke-width:5.84px;"/>
+                <path d="M546.231,88.182L755.266,447.648L337.195,447.648L546.231,88.182ZM546.231,297.725L619.77,424.186L472.692,424.186L546.231,297.725ZM443.56,424.186L379.047,424.186L546.231,136.689L713.415,424.186L648.902,424.186L546.231,247.629L443.56,424.186Z" style="fill:rgb(255,86,0);stroke:rgb(255,86,0);stroke-width:8.49px;"/>
             </g>
         </g>
     </g>
-    <defs>
-        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(533.447,0,0,533.447,149.177,318.101)"><stop offset="0" style="stop-color:rgb(255,113,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,77,0);stop-opacity:1"/></linearGradient>
-    </defs>
 </svg>
diff --git a/tailwind.config.js b/tailwind.config.js
index 03ae114..ce877dd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,20 @@
+const colors = require("tailwindcss/colors");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./app/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {},
+    colors: {
+      transparent: "transparent",
+      current: "currentColor",
+      inherit: "inherit",
+      black: colors.black,
+      white: colors.white,
+      neutral: colors.stone,
+      primary: colors.orange,
+      secondary: colors.cyan,
+    },
   },
   plugins: [],
 };