diff --git a/apps/rowboat/app/layout.tsx b/apps/rowboat/app/layout.tsx
index 64b0fc79..0b66eb1f 100644
--- a/apps/rowboat/app/layout.tsx
+++ b/apps/rowboat/app/layout.tsx
@@ -20,7 +20,7 @@ export default function RootLayout({
 }>) {
   return <html lang="en" className="h-dvh">
     <UserProvider>
-      <body className={`${inter.className} h-full text-base [scrollbar-width:thin]`}>
+      <body className={`${inter.className} h-full text-base [scrollbar-width:thin] bg-gray-100`}>
         <Providers className='h-full flex flex-col'>
           {children}
         </Providers>
diff --git a/apps/rowboat/app/projects/[projectId]/layout.tsx b/apps/rowboat/app/projects/[projectId]/layout.tsx
index 180aced5..34685124 100644
--- a/apps/rowboat/app/projects/[projectId]/layout.tsx
+++ b/apps/rowboat/app/projects/[projectId]/layout.tsx
@@ -9,7 +9,7 @@ export default async function Layout({
 }) {
     return <div className="flex h-full">
         <Nav projectId={params.projectId} />
-        <div className="grow p-4 overflow-auto">
+        <div className="grow p-4 overflow-auto bg-white rounded-tl-lg">
             {children}
         </div>
     </div >;
diff --git a/apps/rowboat/app/projects/[projectId]/menu.tsx b/apps/rowboat/app/projects/[projectId]/menu.tsx
index e832a9fe..23f77e78 100644
--- a/apps/rowboat/app/projects/[projectId]/menu.tsx
+++ b/apps/rowboat/app/projects/[projectId]/menu.tsx
@@ -3,17 +3,17 @@ import { usePathname } from "next/navigation";
 import { Tooltip } from "@nextui-org/react";
 import Link from "next/link";
 import clsx from "clsx";
-import { WorkflowIcon } from "@/app/lib/components/icons";
+import { SettingsIcon, WorkflowIcon } from "lucide-react";
 
 function NavLink({ href, label, icon, collapsed, selected = false }: { href: string, label: string, icon: React.ReactNode, collapsed: boolean, selected?: boolean }) {
     return <Link
         href={href}
-        className={clsx("flex px-2 py-3 gap-3 items-center rounded-lg hover:bg-gray-200", {
-            "bg-gray-200": selected,
+        className={clsx("flex px-2 py-2 gap-2 items-center rounded-lg text-sm hover:text-black", {
+            "text-black": selected,
             "justify-center": collapsed,
         })}
     >
-        {collapsed && Tooltip && <Tooltip content={label} showArrow placement="right">
+        {collapsed && <Tooltip content={label} showArrow placement="right">
             <div className="shrink-0">
                 {icon}
             </div>
@@ -36,7 +36,7 @@ export default function Menu({
 }) {
     const pathname = usePathname();
 
-    return <div className="flex flex-col">
+    return <div className="flex flex-col text-gray-500">
         {/* <NavLink
             href={`/projects/${projectId}/playground`}
             label="Playground"
@@ -50,7 +50,7 @@ export default function Menu({
             href={`/projects/${projectId}/workflow`}
             label="Workflow"
             collapsed={collapsed}
-            icon={<WorkflowIcon />}
+            icon={<WorkflowIcon size={16} />}
             selected={pathname.startsWith(`/projects/${projectId}/workflow`)}
         />
         {/* <NavLink
@@ -66,10 +66,7 @@ export default function Menu({
             href={`/projects/${projectId}/config`}
             label="Config"
             collapsed={collapsed}
-            icon=<svg className="w-[24px] h-[24px]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" d="M21 13v-2a1 1 0 0 0-1-1h-.757l-.707-1.707.535-.536a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0l-.536.535L14 4.757V4a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v.757l-1.707.707-.536-.535a1 1 0 0 0-1.414 0L4.929 6.343a1 1 0 0 0 0 1.414l.536.536L4.757 10H4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h.757l.707 1.707-.535.536a1 1 0 0 0 0 1.414l1.414 1.414a1 1 0 0 0 1.414 0l.536-.535 1.707.707V20a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-.757l1.707-.708.536.536a1 1 0 0 0 1.414 0l1.414-1.414a1 1 0 0 0 0-1.414l-.535-.536.707-1.707H20a1 1 0 0 0 1-1Z" />
-                <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
-            </svg>
+            icon={<SettingsIcon size={16} />}
             selected={pathname.startsWith(`/projects/${projectId}/config`)}
         />
         {/*<NavLink
diff --git a/apps/rowboat/app/projects/[projectId]/nav.tsx b/apps/rowboat/app/projects/[projectId]/nav.tsx
index f63ce4e5..8b0c2802 100644
--- a/apps/rowboat/app/projects/[projectId]/nav.tsx
+++ b/apps/rowboat/app/projects/[projectId]/nav.tsx
@@ -7,6 +7,7 @@ import Menu from "./menu";
 import { Project } from "@/app/lib/types";
 import { z } from "zod";
 import { getProjectConfig } from "@/app/actions";
+import { ChevronsLeftIcon, ChevronsRightIcon } from "lucide-react";
 
 export function Nav({
     projectId,
@@ -37,27 +38,23 @@ export function Nav({
         setCollapsed(!collapsed);
     }
 
-    return <div className={clsx("bg-gray-50 shrink-0 flex flex-col gap-6 border-r-1 border-gray-100 relative p-4", {
-        "w-64": !collapsed,
-        "w-16": collapsed
+    return <div className={clsx("shrink-0 flex flex-col gap-2 border-r-1 border-gray-100 relative p-2", {
+        "w-40": !collapsed,
+        "w-10": collapsed
     })}>
         <Tooltip content={collapsed ? "Expand" : "Collapse"} showArrow placement="right">
-            <button onClick={toggleCollapse} className="absolute bottom-[100px] right-[-16px] rounded-full border bg-white text-gray-400 border-gray-400 hover:border-black hover:text-black w-[28px] h-[28px] shadow-sm">
-                {!collapsed && <svg className="m-auto w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                    <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" d="m17 16-4-4 4-4m-6 8-4-4 4-4" />
-                </svg>}
-                {collapsed && <svg className="m-auto w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                    <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
-                </svg>}
+            <button onClick={toggleCollapse} className="absolute bottom-[50px] left-2 text-gray-400 hover:text-black w-[28px] h-[28px]">
+                {!collapsed && <ChevronsLeftIcon size={16} className="m-auto" />}
+                {collapsed && <ChevronsRightIcon size={16} className="m-auto" />}
             </button>
         </Tooltip>
         {!collapsed && project && <div className="flex flex-col gap-1">
             <Tooltip content="Change project" showArrow placement="bottom-end">
-                <Link className="relative group flex flex-col px-3 py-3 border border-gray-200 rounded-md hover:border-gray-500" href="/projects">
-                    <div className="absolute top-[-7px] left-1 px-2 bg-gray-50 text-xs text-gray-400 group-hover:text-gray-600">
+                <Link className="relative group flex flex-col px-2 py-2 border border-gray-200 rounded-md hover:border-gray-500" href="/projects">
+                    <div className="absolute top-[-7px] left-1 px-1 bg-gray-100 text-xs text-gray-400 group-hover:text-gray-600">
                         Project
                     </div>
-                    <div className="truncate">
+                    <div className="truncate text-sm">
                         {project.name}
                     </div>
                 </Link>
diff --git a/apps/rowboat/app/projects/app.tsx b/apps/rowboat/app/projects/app.tsx
index 5a9449eb..798f5b92 100644
--- a/apps/rowboat/app/projects/app.tsx
+++ b/apps/rowboat/app/projects/app.tsx
@@ -56,7 +56,7 @@ export default function App() {
                         <NextLink
                             key={project._id}
                             href={`/projects/${project._id}`}
-                            className="flex flex-col gap-2 border border-gray-300 hover:border-gray-500 rounded p-4"
+                            className="flex flex-col gap-2 border border-gray-300 hover:border-gray-500 rounded p-4 bg-white"
                         >
                             <div className="text-lg">
                                 {project.name}
diff --git a/apps/rowboat/app/projects/new/page.tsx b/apps/rowboat/app/projects/new/page.tsx
index e44f0a8b..a741ebc1 100644
--- a/apps/rowboat/app/projects/new/page.tsx
+++ b/apps/rowboat/app/projects/new/page.tsx
@@ -4,7 +4,7 @@ import { Submit } from "./submit";
 
 export default async function Page() {
     return <div className="h-full pt-4 px-4 overflow-auto">
-        <div className="max-w-[768px] mx-auto">
+        <div className="max-w-[768px] mx-auto p-4 bg-white rounded-lg">
             <div className="text-lg pb-2 border-b border-b-gray-100">Create new Project</div>
             <form className="mt-4 flex flex-col gap-4" action={createProject}>
                 <Input
diff --git a/apps/rowboat/public/rowboat-logo.png b/apps/rowboat/public/rowboat-logo.png
index 78b16888..074d0cbf 100644
Binary files a/apps/rowboat/public/rowboat-logo.png and b/apps/rowboat/public/rowboat-logo.png differ
