diff --git a/apps/cli/cli-core/src/trpc.ts b/apps/cli/cli-core/src/trpc.ts
index e913bda9..2f3be660 100644
--- a/apps/cli/cli-core/src/trpc.ts
+++ b/apps/cli/cli-core/src/trpc.ts
@@ -343,7 +343,7 @@ export const cliApiRouter = t.router({
       fs.mkdirSync(fullPath);
 
       return {
-        route,
+        route: `/${route}/`,
       };
     }),
 
@@ -367,7 +367,7 @@ export const cliApiRouter = t.router({
       fs.writeFileSync(fullPath, "{}");
 
       return {
-        route,
+        route: `/${route}`,
       };
     }),
 
diff --git a/apps/cli/cli-web/src/components/filebrowser.tsx b/apps/cli/cli-web/src/components/filebrowser.tsx
index cc693c19..24302599 100644
--- a/apps/cli/cli-web/src/components/filebrowser.tsx
+++ b/apps/cli/cli-web/src/components/filebrowser.tsx
@@ -122,6 +122,13 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
                 </Menu.Button>
               </div>
 
+              {/* TODO: Igor, check Marks button  <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"
+            onClick={() => openFolder({ path })}
+          >
+            {`Open Folder`}
+          </button> */}
+
               <Transition
                 as={Fragment}
                 enter="transition ease-out duration-100"
diff --git a/apps/cli/cli-web/src/components/filerunner.tsx b/apps/cli/cli-web/src/components/filerunner.tsx
index d6166353..53fce56b 100644
--- a/apps/cli/cli-web/src/components/filerunner.tsx
+++ b/apps/cli/cli-web/src/components/filerunner.tsx
@@ -148,69 +148,73 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
 
   return (
     <>
-      <div className="flex min-h-0 flex-col divide-y divide-gray-200 first-line:w-full">
-        {/* breadcrumbs */}
-        <Nav
-          path={file}
-          actions={[
-            {
-              type: "splitButton",
-              label: "Open File",
-              onClick: () => openFolder({ path: file }),
-              items: [
-                {
-                  name: "hookname.json",
-                  action: () => openFolder({ path: file }),
-                },
-                {
-                  name: "hookname.config.json",
-                  action: () =>
-                    // this is creating a folder instead of a file on windows
-                    openFolder({ path: file.replace(".json", ".config.json") }),
+      <div className="flex h-full w-full flex-col">
+        <div className="flex min-h-0 w-full grow flex-col overflow-y-scroll px-4">
+          {/* breadcrumbs */}
+          <Nav
+            path={file}
+            actions={[
+              {
+                type: "splitButton",
+                label: "Open File",
+                onClick: () => openFolder({ path: file }),
+                items: [
+                  {
+                    name: "hookname.json",
+                    action: () => openFolder({ path: file }),
+                  },
+                  {
+                    name: "hookname.config.json",
+                    action: () =>
+                      // this is creating a folder instead of a file on windows
+                      openFolder({
+                        path: file.replace(".json", ".config.json"),
+                      }),
+                  },
+                ],
+              },
+              {
+                type: "button",
+                label: (
+                  <>
+                    {`Run`}
+                    <PlayIcon className="h-4" />
+                  </>
+                ),
+                onClick: () => {
+                  void trigger();
+                  if (JSON.stringify(prefill) !== JSON.stringify(getValues())) {
+                    updateHook(
+                      {
+                        name: getValues("name"),
+                        body: getValues("body") ?? "",
+                        config: generateConfigFromState(
+                          getValues("config") ?? {}
+                        ),
+                        path,
+                      },
+                      { onSuccess: () => runFile({ file: decodeURI(file) }) }
+                    );
+                  } else {
+                    runFile({ file: decodeURI(file) });
+                  }
                 },
-              ],
-            },
-            {
-              type: "button",
-              label: (
-                <>
-                  {`Run`}
-                  <PlayIcon className="h-4" />
-                </>
-              ),
-              onClick: () => {
-                void trigger();
-                if (JSON.stringify(prefill) !== JSON.stringify(getValues())) {
-                  updateHook(
-                    {
-                      name: getValues("name"),
-                      body: getValues("body") ?? "",
-                      config: generateConfigFromState(
-                        getValues("config") ?? {}
-                      ),
-                      path,
-                    },
-                    { onSuccess: () => runFile({ file: decodeURI(file) }) }
-                  );
-                } else {
-                  runFile({ file: decodeURI(file) });
-                }
               },
-            },
-          ]}
-        />
+            ]}
+          />
 
-        <div>
-          <div className="flex min-h-0 w-full grow flex-col overflow-y-scroll">
-            <div className="flex flex-row items-center justify-between">
-              <div className="flex flex-col">
-                <h3 className="text-lg font-medium leading-6 text-gray-900">
-                  {`Settings: ${prefill.name}`}
-                </h3>
-                <div className="mt-2 flex flex-col gap-2">
-                  <p className="text-sm text-gray-500">
-                    {`Configure your webhook below.`}
-                  </p>
+          <div>
+            <div className="flex min-h-0 w-full grow flex-col overflow-y-scroll">
+              <div className="flex flex-row items-center justify-between">
+                <div className="flex flex-col">
+                  <h3 className="text-lg font-medium leading-6 text-gray-900">
+                    {`Settings: ${prefill.name}`}
+                  </h3>
+                  <div className="mt-2 flex flex-col gap-2">
+                    <p className="text-sm text-gray-500">
+                      {`Configure your webhook below.`}
+                    </p>
+                  </div>
                 </div>
               </div>
             </div>
@@ -233,7 +237,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
                 </p>
                 <input
                   id="url"
-                  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"
+                  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"
                   {...register("config.url", {
                     onBlur: (e: React.FormEvent<HTMLInputElement>) => {
                       void trigger();
@@ -290,7 +294,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 px-3 py-1.5 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 p-1 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
                                 index === 0 ? "rounded-tl-md" : ""
                               )}
                               {...register(
@@ -309,7 +313,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 px-3 py-1.5 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 p-1 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                               {...register(
                                 `config.headers.${index}.value` as const
                               )}
@@ -335,7 +339,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.5 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 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"
@@ -368,7 +372,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 px-3 py-1.5 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 p-1 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
                                 index === 0 ? "rounded-tl-md" : ""
                               )}
                               {...(register(
@@ -396,7 +400,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 px-3 py-1.5 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 p-1 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                               {...register(
                                 `config.query.${index}.value` as const,
                                 {
diff --git a/apps/cli/cli/CHANGELOG.md b/apps/cli/cli/CHANGELOG.md
index 49402e3b..d432aeca 100644
--- a/apps/cli/cli/CHANGELOG.md
+++ b/apps/cli/cli/CHANGELOG.md
@@ -1,5 +1,11 @@
 # webhookthing
 
+## 0.6.2
+
+### Patch Changes
+
+- Fix nested folder creation on open, ui tidying and contrast improvements
+
 ## 0.6.1
 
 ### Patch Changes
diff --git a/apps/cli/cli/package.json b/apps/cli/cli/package.json
index 78cccb6c..4783d43e 100644
--- a/apps/cli/cli/package.json
+++ b/apps/cli/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "webhookthing",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "main": "./src/index.ts",
   "exports": "./dist/index.js",
   "type": "commonjs",
diff --git a/apps/cli/cli/src/utils/forceThingExists.ts b/apps/cli/cli/src/utils/forceThingExists.ts
index eef5dfbb..b3c99172 100644
--- a/apps/cli/cli/src/utils/forceThingExists.ts
+++ b/apps/cli/cli/src/utils/forceThingExists.ts
@@ -1,6 +1,8 @@
 import fs from "fs/promises";
 import path from "path";
 
+import logger from "@captain/logger";
+
 const THING_PATH = path.join(process.cwd(), ".thing");
 const HOOK_PATH = path.join(THING_PATH, "hooks");
 
@@ -8,12 +10,14 @@ export default async function forceThingExists() {
   try {
     await fs.access(THING_PATH);
   } catch (error) {
+    logger.warn("No .thing directory found, creating one now.");
     await fs.mkdir(THING_PATH);
   }
 
   try {
     await fs.access(HOOK_PATH);
   } catch (error) {
+    logger.warn("No .thing/hooks directory found, creating one now.");
     await fs.mkdir(HOOK_PATH);
   }
 }
diff --git a/packages/logger/src/index.ts b/packages/logger/src/index.ts
index 6cdb168d..470fcaa1 100644
--- a/packages/logger/src/index.ts
+++ b/packages/logger/src/index.ts
@@ -120,7 +120,12 @@ class logger implements Logger {
   private log(level: LogLevels, message: string, optionalParams: any[]) {
     const ts = Date.now();
 
-    console[level](consoleFormat(level, message), ...optionalParams);
+    const defaultLevel =
+      process.env.NODE_ENV === "development" ? "trace" : "info";
+
+    if (getLogLevels(defaultLevel).includes(level)) {
+      console[level](consoleFormat(level, message), ...optionalParams);
+    }
 
     this.subscriptions.forEach(({ fn, level: subLevel }) => {
       if (getLogLevels(subLevel).includes(level)) fn({ message, level, ts });