diff --git a/apps/cli/cli-web/src/App.tsx b/apps/cli/cli-web/src/App.tsx
index d6c51736..bfebf8fa 100644
--- a/apps/cli/cli-web/src/App.tsx
+++ b/apps/cli/cli-web/src/App.tsx
@@ -104,11 +104,11 @@ export default function AppCore() {
 
         <main className="-mt-32 h-[calc(100vh-5rem)]">
           <div className="mx-auto flex h-full w-full max-w-6xl flex-col gap-2 px-2 lg:h-full lg:flex-row">
-            <div className="flex h-3/5 w-full flex-col divide-y divide-gray-200 overflow-y-auto rounded-lg bg-white p-4 shadow lg:h-full lg:w-3/5 ">
+            <div className="flex h-3/5 w-full flex-col divide-y divide-gray-200 overflow-y-auto rounded-lg bg-gray-100 p-4 shadow lg:h-full lg:w-3/5 ">
               {/* File browser / Hook Editor / 404 */}
               <PageContent />
             </div>
-            <div className="flex h-2/5 w-full rounded-lg bg-white p-4 shadow lg:h-full lg:w-2/5">
+            <div className="flex h-2/5 w-full rounded-lg bg-gray-100 p-4 shadow lg:h-full lg:w-2/5">
               {/* Logs */}
               <ResponseViewer />
             </div>
diff --git a/apps/cli/cli-web/src/components/filebrowser.tsx b/apps/cli/cli-web/src/components/filebrowser.tsx
index 7d75c57a..07c54ffe 100644
--- a/apps/cli/cli-web/src/components/filebrowser.tsx
+++ b/apps/cli/cli-web/src/components/filebrowser.tsx
@@ -144,7 +144,7 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
         </ol>
         <div className="flex flex-row gap-1">
           <button
-            className="flex items-center justify-center rounded-md border border-transparent border-gray-50 px-2 py-1 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+            className="flex items-center justify-center rounded-md bg-white px-2 py-1 text-sm font-medium leading-4 text-gray-600 shadow-sm  hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
             onClick={() => openFolder({ path })}
           >
             {`Open Folder`}
@@ -154,7 +154,7 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
           <FileFormModal openState={addHookModalState} path={pathArr} />
           <Menu as="div" className="relative inline-block text-left">
             <div>
-              <Menu.Button className="flex items-center justify-center rounded-md border border-transparent border-gray-50 px-2 py-1 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+              <Menu.Button className="flex items-center justify-center rounded-md bg-white px-2 py-1 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                 <span className="sr-only">{`Open create menu`}</span>
                 <PlusIcon
                   className="h-5 w-5 flex-shrink-0"
@@ -180,7 +180,7 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
                         <button
                           className={classNames(
                             active
-                              ? "bg-gray-100 text-indigo-700"
+                              ? "bg-gray-200 text-indigo-700"
                               : "text-gray-700",
                             "flex w-full flex-row items-center justify-start gap-2 px-4 py-2 text-sm"
                           )}
@@ -200,7 +200,7 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
                         <button
                           className={classNames(
                             active
-                              ? "bg-gray-100 text-indigo-700"
+                              ? "bg-gray-200 text-indigo-700"
                               : "text-gray-700",
                             "flex w-full flex-row items-center justify-start gap-2 px-4 py-2 text-sm"
                           )}
@@ -228,12 +228,12 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
         <h3 className="text-lg font-medium leading-6 text-gray-900">
           {`Folders`}
         </h3>
-        <div className="flex h-28 flex-row space-x-3 overflow-x-auto py-2">
+        <div className="flex h-28 flex-row space-x-3 overflow-x-auto px-1 py-2">
           {data.folders.map((folder) => (
             <div key={folder} className="w-1/5 min-w-[8rem]">
               <Tooltip content={folder} placement="bottom">
                 <Link href={pathArrToUrl(pathArr, folder)}>
-                  <div className="flex w-full flex-col items-center justify-center space-y-1 truncate rounded-md border border-gray-50 px-6 py-4 text-sm font-medium text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md">
+                  <button className="flex w-full flex-col items-center justify-center space-y-1 truncate rounded-md bg-white px-6 py-4 text-sm font-medium text-gray-600 shadow-sm  hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                     <FolderIcon
                       className="h-5 w-5 flex-shrink-0"
                       aria-hidden="true"
@@ -241,14 +241,14 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
                     <span className="w-full truncate text-center">
                       {folder}
                     </span>
-                  </div>
+                  </button>
                 </Link>
               </Tooltip>
             </div>
           ))}
           <div className="w-1/5 min-w-[8rem]">
             <button
-              className="flex w-full flex-col items-center justify-center space-y-1 truncate rounded-md border border-gray-50 px-6 py-4 text-sm font-medium text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md"
+              className="flex w-full flex-col items-center justify-center space-y-1 truncate rounded-md bg-white px-6 py-4 text-sm font-medium text-gray-600 shadow-sm  hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
               onClick={() => addFolderModalState[1](true)}
             >
               <FolderPlusOutline
@@ -267,7 +267,7 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
         <h3 className="text-lg font-medium leading-6 text-gray-900">
           {`Files`}
         </h3>
-        <div className="w-full overflow-y-auto">
+        <div className="w-full overflow-y-auto px-1">
           {data.files.length === 0 ? (
             <div className="text-center">
               <DocumentDuplicateIcon className="mx-auto h-12 w-12 text-gray-400" />
@@ -307,7 +307,7 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
               {data.files.map((file) => (
                 <li key={file.name} className="flex w-full flex-row gap-2">
                   <Link href={pathArrToUrl(pathArr, file.name)}>
-                    <div className="group flex grow flex-row items-start justify-between gap-2 overflow-hidden rounded-md border border-gray-50 px-6 py-2 font-medium text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md">
+                    <button className="group flex grow flex-row items-start justify-between gap-2 overflow-hidden rounded-md bg-white px-6 py-2 font-medium text-gray-600 shadow-sm   hover:text-indigo-600  hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                       {file.name}
                       <div className="flex flex-row gap-2">
                         {!file.config?.url ? (
@@ -325,11 +325,11 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
                           )
                         )}
                       </div>
-                    </div>
+                    </button>
                   </Link>
                   <button
-                    className="flex items-center justify-center rounded-md border border-transparent border-gray-50 px-3 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 
-                    disabled:cursor-not-allowed disabled:text-gray-400 disabled:hover:text-gray-400 disabled:hover:shadow-sm"
+                    className="flex items-center justify-center rounded-md border border-transparent bg-white px-3 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 
+                    disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-400 disabled:hover:text-gray-400 disabled:hover:shadow-sm"
                     onClick={() => {
                       runFile({
                         file: `${path}/${file.name}`,
diff --git a/apps/cli/cli-web/src/components/filerunner.tsx b/apps/cli/cli-web/src/components/filerunner.tsx
index e76c1f4a..3cd203b6 100644
--- a/apps/cli/cli-web/src/components/filerunner.tsx
+++ b/apps/cli/cli-web/src/components/filerunner.tsx
@@ -147,9 +147,10 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
                 </p>
               </div>
             </div>
-            <div className="flex h-full flex-col items-start justify-start">
+            <div className="flex h-full flex-col items-start justify-start p-1">
               <button
-                className="flex items-center justify-center gap-2 rounded-md border border-transparent border-gray-50 px-3 py-2 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                className="flex items-center justify-center gap-1 rounded-md border border-transparent bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 
+                disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-400 disabled:hover:text-gray-400 disabled:hover:shadow-sm"
                 onClick={() => {
                   void trigger();
                   if (JSON.stringify(prefill) !== JSON.stringify(getValues())) {
@@ -192,7 +193,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
                 </p>
                 <input
                   id="url"
-                  className="block w-full rounded-md border  border-gray-300 p-1 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                  className="block w-full rounded-md border  border-gray-300 px-3 py-1.5 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                   {...register("config.url", {
                     onBlur: (e: React.FormEvent<HTMLInputElement>) => {
                       void trigger();
@@ -249,7 +250,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
                             <input
                               id={`config.headers.${index}.key`}
                               className={classNames(
-                                "relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent p-1 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
+                                "relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent px-3 py-1.5 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
                                 index === 0 ? "rounded-tl-md" : ""
                               )}
                               {...register(
@@ -268,7 +269,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
                             </label>
                             <input
                               id={`config.headers.${index}.value`}
-                              className="relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent p-1 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                              className="relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent px-3 py-1.5 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                               {...register(
                                 `config.headers.${index}.value` as const
                               )}
@@ -294,7 +295,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
                   </div>
                   <button
                     className={classNames(
-                      "-mt-[1px] flex w-full flex-row items-center gap-1  border border-gray-300 bg-white px-4 py-1 text-start text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 ",
+                      "-mt-[1px] flex w-full flex-row items-center gap-1  border border-gray-300 bg-white px-4 py-1.5 text-start text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 ",
                       headerFields.length !== 0 ? "rounded-b-md" : "rounded-md"
                     )}
                     type="button"
@@ -327,7 +328,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
                             <input
                               id={`config.query.${index}.key`}
                               className={classNames(
-                                "relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent p-1 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
+                                "relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent px-3 py-1.5 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
                                 index === 0 ? "rounded-tl-md" : ""
                               )}
                               {...(register(
@@ -355,7 +356,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
                             </label>
                             <input
                               id={`config.query.${index}.value`}
-                              className="relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent p-1 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                              className="relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent px-3 py-1.5 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                               {...register(
                                 `config.query.${index}.value` as const,
                                 {
@@ -395,7 +396,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
                   </div>
                   <button
                     className={classNames(
-                      "-mt-[1px] flex w-full flex-row items-center gap-1  border border-gray-300 bg-white px-4 py-1 text-start text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 ",
+                      "-mt-[1px] flex w-full flex-row items-center gap-1  border border-gray-300 bg-white px-4 py-1.5 text-start text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 ",
                       queryFields.length !== 0 ? "rounded-b-md" : "rounded-md"
                     )}
                     type="button"
diff --git a/apps/cli/cli-web/src/components/response-viewer.tsx b/apps/cli/cli-web/src/components/response-viewer.tsx
index d2367159..e46282fd 100644
--- a/apps/cli/cli-web/src/components/response-viewer.tsx
+++ b/apps/cli/cli-web/src/components/response-viewer.tsx
@@ -6,11 +6,11 @@ import { classNames } from "../utils/classnames";
 import { Tooltip } from "./common/tooltip";
 
 const colorMap = {
-  trace: { label: "text-gray-600", body: "text-gray-700" }, // gray
-  debug: { label: "text-cyan-600", body: "text-cyan-700" }, // cyan
-  info: { label: "text-white", body: "text-gray-100" }, // white
-  warn: { label: "text-yellow-600", body: "text-yellow-700" }, // yellow
-  error: { label: "text-red-600", body: "text-red-700" }, // red
+  trace: { label: "text-gray-500", body: "text-gray-500" }, // gray
+  debug: { label: "text-cyan-500", body: "text-cyan-500" }, // cyan
+  info: { label: "text-white", body: "text-gray-50" }, // white
+  warn: { label: "text-yellow-500", body: "text-yellow-500" }, // yellow
+  error: { label: "text-red-400", body: "text-red-400" }, // red
 } as const;
 
 export const ResponseViewer = () => {
@@ -39,7 +39,7 @@ export const ResponseViewer = () => {
         <h3 className="text-lg font-medium leading-6 text-gray-900">{`Log`}</h3>
       </div>
 
-      <div className="h-full w-full overflow-auto rounded-md !bg-gray-900 px-1 py-4">
+      <div className="h-full w-full overflow-auto rounded-md !bg-gray-800 px-1 py-4">
         <table>
           <tbody>
             {messages.map((message, index) => (
diff --git a/apps/marketing/src/pages/index.tsx b/apps/marketing/src/pages/index.tsx
index fc6ea566..a0e78c5e 100644
--- a/apps/marketing/src/pages/index.tsx
+++ b/apps/marketing/src/pages/index.tsx
@@ -55,7 +55,8 @@ const Home: NextPage = () => {
         <div className="container flex h-full w-full flex-col items-center justify-center gap-12 px-4 py-16">
           {!open ? (
             <button
-              className="flex items-center justify-center gap-2 rounded-md border border-transparent border-gray-50 px-3 py-2 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+              className="flex items-center justify-center gap-1 rounded-md border border-transparent bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 
+            disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-400 disabled:hover:text-gray-400 disabled:hover:shadow-sm"
               onClick={() => {
                 setOpen(true);
                 window.localStorage.setItem("hasClickedRun", "true");