diff --git a/.husky/pre-commit b/.husky/pre-commit
deleted file mode 100644
index 98475b5..0000000
--- a/.husky/pre-commit
+++ /dev/null
@@ -1 +0,0 @@
-pnpm test
diff --git a/.husky/pre-push b/.husky/pre-push
deleted file mode 100644
index 678f1d9..0000000
--- a/.husky/pre-push
+++ /dev/null
@@ -1,2 +0,0 @@
-# Full checks before pushing
-pnpm lint
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..ef9e65e
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["carb", "CATEG", "headlessui", "tiktok"]
+}
diff --git a/src/app/about.txt b/public/about.txt
similarity index 100%
rename from src/app/about.txt
rename to public/about.txt
diff --git a/src/app/favicon.ico b/public/favicon.ico
similarity index 100%
rename from src/app/favicon.ico
rename to public/favicon.ico
diff --git a/src/app/android-chrome-192x192.png b/public/favicon/android-chrome-192x192.png
similarity index 100%
rename from src/app/android-chrome-192x192.png
rename to public/favicon/android-chrome-192x192.png
diff --git a/src/app/android-chrome-512x512.png b/public/favicon/android-chrome-512x512.png
similarity index 100%
rename from src/app/android-chrome-512x512.png
rename to public/favicon/android-chrome-512x512.png
diff --git a/src/app/apple-touch-icon.png b/public/favicon/apple-touch-icon.png
similarity index 100%
rename from src/app/apple-touch-icon.png
rename to public/favicon/apple-touch-icon.png
diff --git a/src/app/favicon-16x16.png b/public/favicon/favicon-16x16.png
similarity index 100%
rename from src/app/favicon-16x16.png
rename to public/favicon/favicon-16x16.png
diff --git a/src/app/favicon-32x32.png b/public/favicon/favicon-32x32.png
similarity index 100%
rename from src/app/favicon-32x32.png
rename to public/favicon/favicon-32x32.png
diff --git a/src/api/index.ts b/src/api/index.ts
index 12684b3..3e1be8b 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -9,6 +9,8 @@ type ApiConfig = RequestInit & {
   timeout?: number;
 };
 
+type ExtendedRequestInit = RequestInit & { includeHeaders?: boolean };
+
 export class Api {
   private baseUrl: string;
   private defaultOptions: RequestInit;
@@ -55,7 +57,7 @@ export class Api {
     method: string,
     endpoint: string,
     response: Response,
-    duration: number,
+    duration: number
   ) {
     if (!this.debugMode) return;
 
@@ -65,7 +67,7 @@ export class Api {
         headers: Object.fromEntries(response.headers.entries()),
         statusText: response.statusText,
         body: await response.clone().json(),
-      },
+      }
     );
   }
 
@@ -73,7 +75,7 @@ export class Api {
     method: string,
     endpoint: string,
     error: Error,
-    duration: number,
+    duration: number
   ) {
     if (!this.debugMode) return;
 
@@ -88,39 +90,39 @@ export class Api {
     endpoint: string,
     options: RequestInit,
     schema: SchemaType,
-    includeHeaders: true,
+    includeHeaders: true
   ): Promise<{ data: ZodInfer<SchemaType>; headers: Headers }>;
 
   async request<SchemaType extends ZodSchema>(
     endpoint: string,
     options: RequestInit,
     schema: SchemaType,
-    includeHeaders?: false,
+    includeHeaders?: false
   ): Promise<ZodInfer<SchemaType>>;
 
   async request(
     endpoint: string,
     options: RequestInit,
-    includeHeaders: true,
+    includeHeaders: true
   ): Promise<{ data: unknown; headers: Headers }>;
 
   async request<DataType extends object>(
     endpoint: string,
     options: RequestInit,
-    includeHeaders: true,
+    includeHeaders: true
   ): Promise<{ data: DataType; headers: Headers }>;
 
   async request(
     endpoint: string,
     options?: RequestInit,
-    includeHeaders?: boolean,
+    includeHeaders?: boolean
   ): Promise<unknown>;
 
   async request<SchemaType extends ZodSchema>(
     endpoint: string,
     options: RequestInit = {},
     schemaOrIncludeHeaders?: SchemaType | boolean,
-    includeHeadersFlag?: boolean,
+    includeHeadersFlag?: boolean
   ): Promise<unknown> {
     const url = new URL(endpoint, this.baseUrl);
     const controller = new AbortController();
@@ -170,7 +172,7 @@ export class Api {
         throw new ApiError(
           `Non-JSON response from ${url.href}`,
           500,
-          "Invalid Content-Type",
+          "Invalid Content-Type"
         );
       }
 
@@ -183,7 +185,7 @@ export class Api {
         if (!parseResult.success) {
           throw new ValidationError(
             `Response validation failed for ${url.href}`,
-            parseResult.error.issues,
+            parseResult.error.issues
           );
         }
         parsedData = parseResult.data;
@@ -212,7 +214,7 @@ export class Api {
         "Unknown error occurred",
         0,
         "UNKNOWN_ERROR",
-        String(error),
+        String(error)
       );
     } finally {
       controller.abort();
@@ -223,25 +225,25 @@ export class Api {
 
   async get<T>(
     endpoint: string,
-    options: RequestInit & { includeHeaders: true },
+    options: RequestInit & { includeHeaders: true }
   ): Promise<{ data: T; headers: Headers }>;
 
   async get<T>(
     endpoint: string,
     schema: ZodSchema<T>,
-    options?: RequestInit,
+    options?: RequestInit
   ): Promise<T>;
 
   async get<T>(
     endpoint: string,
     schema: ZodSchema<T>,
-    options: RequestInit & { includeHeaders: true },
+    options: RequestInit & { includeHeaders: true }
   ): Promise<{ data: T; headers: Headers }>;
 
   async get<T>(
     endpoint: string,
     arg1?: ZodSchema<T> | RequestInit,
-    arg2?: RequestInit,
+    arg2?: RequestInit
   ): Promise<T | { data: T; headers: Headers }> {
     let options: RequestInit = {};
     let includeHeaders = false;
@@ -264,59 +266,57 @@ export class Api {
   async post<T>(
     endpoint: string,
     body: BodyInit | Record<string, unknown>,
-    options?: RequestInit,
+    options?: RequestInit
   ): Promise<T>;
 
   async post<T>(
     endpoint: string,
     body: BodyInit | Record<string, unknown>,
-    options: RequestInit & { includeHeaders: true },
+    options: RequestInit & { includeHeaders: true }
   ): Promise<{ data: T; headers: Headers }>;
 
   async post<T>(
     endpoint: string,
     body: BodyInit | Record<string, unknown>,
     schema: ZodSchema<T>,
-    options?: RequestInit,
+    options?: RequestInit
   ): Promise<T>;
 
   async post<T>(
     endpoint: string,
     body: BodyInit | Record<string, unknown>,
     schema: ZodSchema<T>,
-    options: RequestInit & { includeHeaders: true },
+    options: RequestInit & { includeHeaders: true }
   ): Promise<{ data: T; headers: Headers }>;
 
   async post<T>(
     endpoint: string,
-    body: BodyInit | Record<string, unknown>,
-    arg1?: ZodSchema<T> | RequestInit,
-    arg2?: RequestInit,
+    body: BodyInit | Record<string, unknown> | FormData,
+    arg1?: ZodSchema<T> | ExtendedRequestInit,
+    arg2?: ExtendedRequestInit
   ): Promise<T | { data: T; headers: Headers }> {
     let schema: ZodSchema<T> | undefined;
-    let options: RequestInit = {};
+    let options: ExtendedRequestInit = {};
     let includeHeaders = false;
 
-    if (arg1 instanceof ZodSchema) {
+    if (this.isZodSchema<T>(arg1)) {
       schema = arg1;
       options = arg2 ?? {};
-      includeHeaders =
-        (arg2 as { includeHeaders?: boolean })?.includeHeaders ?? false;
     } else {
       options = arg1 ?? {};
-      includeHeaders =
-        (arg1 as { includeHeaders?: boolean })?.includeHeaders ?? false;
     }
 
+    includeHeaders = options.includeHeaders ?? false;
+
     const headers = new Headers(
       this.cleanHeaders({
         ...this.defaultOptions.headers,
         ...options.headers,
-      }),
+      })
     );
 
-    const isJson = !(body instanceof FormData) && !headers.has("Content-Type");
-    const bodyPayload = JSON.stringify(body);
+    const isFormData = body instanceof FormData;
+    const isJson = !isFormData && !headers.has("Content-Type");
 
     if (isJson) {
       headers.set("Content-Type", "application/json");
@@ -325,7 +325,7 @@ export class Api {
     const mergedOptions: RequestInit = {
       ...options,
       method: "POST",
-      body: bodyPayload,
+      body: isJson ? JSON.stringify(body) : (body as BodyInit),
       headers,
     };
 
@@ -333,38 +333,41 @@ export class Api {
       T | { data: T; headers: Headers }
     >;
   }
+  isZodSchema<T>(arg: any): arg is ZodSchema<T> {
+    return typeof arg?.safeParse === "function";
+  }
 
   async put<T>(
     endpoint: string,
     body: BodyInit | Record<string, unknown>,
-    options?: RequestInit,
+    options?: RequestInit
   ): Promise<T>;
 
   async put<T>(
     endpoint: string,
     body: BodyInit | Record<string, unknown>,
-    options: RequestInit & { includeHeaders: true },
+    options: RequestInit & { includeHeaders: true }
   ): Promise<{ data: T; headers: Headers }>;
 
   async put<T>(
     endpoint: string,
     body: BodyInit | Record<string, unknown>,
     schema: ZodSchema<T>,
-    options?: RequestInit,
+    options?: RequestInit
   ): Promise<T>;
 
   async put<T>(
     endpoint: string,
     body: BodyInit | Record<string, unknown>,
     schema: ZodSchema<T>,
-    options: RequestInit & { includeHeaders: true },
+    options: RequestInit & { includeHeaders: true }
   ): Promise<{ data: T; headers: Headers }>;
 
   async put<T>(
     endpoint: string,
     body: BodyInit | Record<string, unknown>,
     arg1?: ZodSchema<T> | RequestInit,
-    arg2?: RequestInit,
+    arg2?: RequestInit
   ): Promise<T | { data: T; headers: Headers }> {
     let schema: ZodSchema<T> | undefined;
     let options: RequestInit = {};
@@ -385,7 +388,7 @@ export class Api {
       this.cleanHeaders({
         ...this.defaultOptions.headers,
         ...options.headers,
-      }),
+      })
     );
 
     const isJson = !(body instanceof FormData) && !headers.has("Content-Type");
@@ -411,25 +414,25 @@ export class Api {
 
   async delete<T>(
     endpoint: string,
-    options: RequestInit & { includeHeaders: true },
+    options: RequestInit & { includeHeaders: true }
   ): Promise<{ data: T; headers: Headers }>;
 
   async delete<T>(
     endpoint: string,
     schema: ZodSchema<T>,
-    options?: RequestInit,
+    options?: RequestInit
   ): Promise<T>;
 
   async delete<T>(
     endpoint: string,
     schema: ZodSchema<T>,
-    options: RequestInit & { includeHeaders: true },
+    options: RequestInit & { includeHeaders: true }
   ): Promise<{ data: T; headers: Headers }>;
 
   async delete<T>(
     endpoint: string,
     arg1?: ZodSchema<T> | RequestInit,
-    arg2?: RequestInit,
+    arg2?: RequestInit
   ): Promise<T | { data: T; headers: Headers }> {
     let schema: ZodSchema<T> | undefined;
     let options: RequestInit = {};
@@ -449,12 +452,12 @@ export class Api {
     return this.request(
       endpoint,
       { ...options, method: "DELETE" },
-      includeHeaders,
+      includeHeaders
     ) as Promise<T | { data: T; headers: Headers }>;
   }
 
   private cleanHeaders(
-    headers: Record<string, unknown>,
+    headers: Record<string, unknown>
   ): Record<string, string> {
     return Object.fromEntries(
       Object.entries(headers)
@@ -462,7 +465,7 @@ export class Api {
         .map(([key, value]) => [
           key,
           String(value as NonNullable<typeof value>),
-        ]),
+        ])
     );
   }
 }
diff --git a/src/app/(pages)/(protected)/create/form.tsx b/src/app/(pages)/(protected)/create/form.tsx
index 3620343..4cc6c51 100644
--- a/src/app/(pages)/(protected)/create/form.tsx
+++ b/src/app/(pages)/(protected)/create/form.tsx
@@ -10,10 +10,12 @@ import {
   Textarea,
   TagInput,
   Submit,
+  Dropdown,
 } from "@/context/form";
 import { ingredientParser, instructionParser } from "@/context/form/fn";
 import { z } from "zod";
 import { ApiError } from "@/api/error";
+import { createRecipe } from "./server";
 
 const err = (message: string) => `${message}. Please check and try again.`;
 
@@ -66,9 +68,11 @@ export const recipeSchema = z.object({
       err("Duration exceeds 24 hours—double-check this!")
     )
     .default(0),
-  cookingMethod: z.coerce
-    .string()
-    .min(1, err("Specify a cooking method (e.g., 'Bake' or 'Stir-fry')")),
+  cookingMethod: z.array(
+    z
+      .string()
+      .min(1, err("Specify a cooking method (e.g., 'Bake' or 'Stir-fry')"))
+  ),
   ingredients: z
     .array(ingredientSchema)
     .min(1, err("Your recipe needs at least one ingredient!"))
@@ -87,7 +91,7 @@ export const recipeSchema = z.object({
     .array(z.string().min(1, err("Tags can't be empty (e.g., 'Vegetarian')")))
     .optional()
     .default([]),
-  draft: z.boolean().default(false),
+  draft: z.coerce.boolean().default(false),
 });
 
 export const CreateRecipeForm = ({
@@ -98,75 +102,73 @@ export const CreateRecipeForm = ({
   const createRecipeAction = createAction(recipeSchema, async (_, formData) => {
     try {
       console.log("Form data:", formData);
-      // const formDataToSend = new FormData();
 
-      // // Handle arrays properly
-      // const arraysToProcess = {
-      //   ingredients: formData.ingredients,
-      //   instructions: formData.instructions,
-      //   tags: formData.tags,
-      // };
+      const formDataToSend = new FormData();
 
-      // Object.entries(arraysToProcess).forEach(([key, value]) => {
-      //   if (Array.isArray(value)) {
-      //     value.forEach((item, index) => {
-      //       if (key === "ingredients") {
-      //         if (typeof item === "object" && "value" in item) {
-      //           formDataToSend.append(`${key}[${index}][value]`, item.value);
-      //         }
-      //         if (typeof item === "object" && "quantity" in item) {
-      //           formDataToSend.append(
-      //             `${key}[${index}][quantity]`,
-      //             String(item.quantity)
-      //           );
-      //         }
-      //         if (typeof item === "object" && "unitsOfMeasurement" in item) {
-      //           formDataToSend.append(
-      //             `${key}[${index}][unitsOfMeasurement]`,
-      //             item.unitsOfMeasurement
-      //           );
-      //         }
-      //       } else {
-      //         // Handle simple arrays (instructions/tags)
-      //         formDataToSend.append(
-      //           `${key}[]`,
-      //           typeof item === "object" ? JSON.stringify(item) : item
-      //         );
-      //       }
-      //     });
-      //   }
-      // });
+      // // Handle arrays properly
+      const arraysToProcess = {
+        ingredients: formData.ingredients,
+        instructions: formData.instructions,
+        cookingMethod: formData.cookingMethod,
+        tags: formData.tags,
+      };
 
-      // // Handle draft boolean
-      // formDataToSend.append("draft", formData.draft ? "true" : "false");
+      Object.entries(arraysToProcess).forEach(([key, value]) => {
+        if (Array.isArray(value)) {
+          value.forEach((item, index) => {
+            if (key === "ingredients") {
+              if (typeof item === "object" && "value" in item) {
+                formDataToSend.append(
+                  `${key}[${index}][value]`,
+                  item.value.trim()
+                );
+              }
+              if (typeof item === "object" && "quantity" in item) {
+                formDataToSend.append(
+                  `${key}[${index}][quantity]`,
+                  String(item.quantity).trim()
+                );
+              }
+              if (typeof item === "object" && "unitsOfMeasurement" in item) {
+                formDataToSend.append(
+                  `${key}[${index}][unitsOfMeasurement]`,
+                  item.unitsOfMeasurement.trim()
+                );
+              }
+            } else {
+              formDataToSend.append(
+                `${key}[${index}]`,
+                typeof item === "object" ? JSON.stringify(item) : item.trim()
+              );
+            }
+          });
+        }
+      });
 
-      // // Handle file upload
-      // if (formData.src instanceof File) {
-      //   formDataToSend.append("src", formData.src);
-      // }
+      // Handle draft boolean
+      formDataToSend.append("draft", formData.draft ? "true" : "false");
 
-      // // Add simple fields
-      // const simpleFields = [
-      //   "title",
-      //   "description",
-      //   "portions",
-      //   "cookingDuration",
-      //   "cookingMethod",
-      // ];
-      // simpleFields.forEach((field) => {
-      //   formDataToSend.append(
-      //     field,
-      //     String(formData[field as keyof typeof formData])
-      //   );
-      // });
+      // Handle file upload
+      if (formData.src instanceof File) {
+        formDataToSend.append("src", formData.src);
+      }
 
-      // const response = await API.post("/recipes", formDataToSend, {
-      //   headers: {
-      //     Authorization: `Bearer ${sessionToken}`,
-      //     "Content-Type": "multipart/form-data",
-      //   },
-      // });
+      // Add simple fields
+      const simpleFields = [
+        "title",
+        "description",
+        "portions",
+        "cookingDuration",
+      ];
+      simpleFields.forEach((field) => {
+        formDataToSend.append(
+          field,
+          String(formData[field as keyof typeof formData])
+        );
+      });
 
+      console.log("formData to send: ", formDataToSend);
+      createRecipe(formDataToSend, sessionToken);
       return {
         success: true,
         message: "Recipe created successfully!",
@@ -191,6 +193,43 @@ export const CreateRecipeForm = ({
       };
     }
   });
+  enum UnitsOfMeasurement {
+    MG = "mg",
+    G = "g",
+    KG = "kg",
+    ML = "ml",
+    L = "l",
+    CUP = "cup",
+    TBSP = "tbsp",
+    TSP = "tsp",
+    OZ = "oz",
+    LB = "lb",
+    PINT = "pint",
+    QT = "qt",
+    GAL = "gal",
+    PN = "pinch",
+    PC = "piece",
+    SLICE = "slice",
+    STALK = "stalk",
+    CLOVES = "cloves",
+    BUNCH = "bunch",
+    CUBE = "cube",
+    BOTTLE = "bottle",
+    CAN = "can",
+    JAR = "jar",
+    BOWL = "bowl",
+    STICK = "stick",
+    TABLE = "table",
+  }
+  enum CookingMethod {
+    FryingPan = "Frying Pan",
+    Oven = "Oven",
+    Microwave = "Microwave",
+    AirFryer = "Air Fryer",
+    Blender = "Blender",
+    Boil = "Boil",
+    None = "None",
+  }
 
   return (
     <FormProvider
@@ -218,19 +257,21 @@ export const CreateRecipeForm = ({
           placeholder="Cooking Duration (in minutes)"
           min={0}
         />
-        <Input
+        <TagInput
+          suggestions={Object.values(CookingMethod)}
           name="cookingMethod"
-          type="text"
           placeholder="Cooking Method (e.g., Baking, Frying)"
+          maxTags={3}
+          allowCustomTags={false}
         />
-        <TagInput
+        {/* <TagInput
           name="tags"
           maxTags={10}
           allowCustomTags
           placeholder="Add tags..."
           validateTag={(tag) => tag.length > 0}
-        />
-        <div className="flex items-center gap-2">
+        /> */}
+        {/* <div className="flex items-center gap-2">
           <Input
             name="draft"
             type="checkbox"
@@ -240,7 +281,7 @@ export const CreateRecipeForm = ({
           <label htmlFor="draft-checkbox" className="text-sm">
             Save as draft
           </label>
-        </div>
+        </div> */}
         <Submit className="mt-4">Create Recipe</Submit>
       </div>
       <div className="col-span-5 col-start-3 flex flex-col gap-5">
@@ -255,15 +296,14 @@ export const CreateRecipeForm = ({
                 name={`ingredients.${index}.quantity`}
                 type="number"
                 placeholder="Qty"
-                className="w-20"
                 onPaste={handlePaste}
                 min={0}
                 step="0.1"
               />
-              <Input
+              <Dropdown
+                defaultOptionLabel="Unit"
+                options={Object.values(UnitsOfMeasurement)}
                 name={`ingredients.${index}.unitsOfMeasurement`}
-                placeholder="Unit"
-                className="w-24"
               />
               <Input
                 name={`ingredients.${index}.value`}
@@ -281,7 +321,6 @@ export const CreateRecipeForm = ({
           parser={instructionParser}
           renderField={(index, handlePaste) => (
             <div className="flex gap-2.5 w-full items-center">
-              <span className="text-gray-500 w-6">{index + 1}.</span>
               <Textarea
                 name={`instructions.${index}`}
                 placeholder={`Step ${index + 1}`}
diff --git a/src/app/(pages)/(protected)/create/server.ts b/src/app/(pages)/(protected)/create/server.ts
new file mode 100644
index 0000000..6118c92
--- /dev/null
+++ b/src/app/(pages)/(protected)/create/server.ts
@@ -0,0 +1,15 @@
+"use server";
+
+import { API } from "@/api";
+import { log } from "console";
+
+export async function createRecipe(formdata: FormData, sessionToken: string) {
+  const res = await API.post("/recipes", formdata, {
+    headers: {
+      Authorization: `Bearer ${sessionToken}`,
+      "Content-Type": "multipart/form-data",
+    },
+    credentials: "include",
+  });
+  log(res);
+}
diff --git a/src/app/(pages)/(public)/(home)/page.tsx b/src/app/(pages)/(public)/(home)/page.tsx
index 27bcf2e..96a0ec2 100644
--- a/src/app/(pages)/(public)/(home)/page.tsx
+++ b/src/app/(pages)/(public)/(home)/page.tsx
@@ -44,7 +44,13 @@ export default async function Home() {
                   Or looking for more recipes?
                 </h4>
                 <div className="flex gap-5 uppercase font-extrabold">
-                  <Button as="link" shape="square" href="/browse">
+                  <Button
+                    as="link"
+                    // className="bg-white "
+                    variant="primary"
+                    shape="rounded"
+                    href="/browse"
+                  >
                     Browse recipes
                   </Button>
                   <Button
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index efd38ec..c685785 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,10 +1,10 @@
-import type { Metadata } from "next";
+import type {Metadata} from "next";
 import "@/styles/globals.css";
 import clsx from "clsx";
-import { Knewave, Plus_Jakarta_Sans, Mulish } from "next/font/google";
-import { ContextProvider } from "@/context";
-import { Navbar, Footer, NavbarProps } from "@/components";
-import { validateSession } from "@/context/auth/actions";
+import {Knewave, Plus_Jakarta_Sans, Mulish} from "next/font/google";
+import {ContextProvider} from "@/context";
+import {Navbar, Footer, NavbarProps} from "@/components";
+import {validateSession} from "@/context/auth/actions";
 
 const jakarta = Plus_Jakarta_Sans({
   variable: "--font-jakarta-sans",
@@ -41,44 +41,62 @@ export const metadata: Metadata = {
 };
 
 export default async function RootLayout({
-  children,
-}: {
+                                           children,
+                                         }: {
   children: React.ReactNode;
 }) {
   const isLoggedIn = await validateSession();
 
   const navbarProps: NavbarProps = {
     leftLinks: [
-      { href: "/recipes", label: "Recipes" },
-      { href: "/browse", label: "Browse" },
-      { href: "/create", label: "Create" },
+      {href: "/recipes", label: "Recipes"},
+      {href: "/browse", label: "Browse"},
+      {href: "/create", label: "Create"},
     ],
     rightLinks: isLoggedIn
       ? [
-          { href: "/profile", label: "Profile" },
-          { href: "/favorites", label: "Favourites" },
-        ]
+        {href: "/profile", label: "Profile"},
+        {href: "/favorites", label: "Favourites"},
+      ]
       : [
-          { href: "/login", label: "Log In" },
-          { href: "/signup", label: "Sign Up" },
-        ],
+        {href: "/login", label: "Log In"},
+        {href: "/signup", label: "Sign Up"},
+      ],
   };
 
   return (
     <ContextProvider>
       <html lang="en">
-        <body
-          className={clsx(
-            jakarta.variable,
-            knewave.variable,
-            mulish.variable,
-            "antialiased min-h-screen bg-background text-black",
-          )}
-        >
-          <Navbar {...navbarProps} />
-          {children}
-          <Footer />
-        </body>
+      <body
+        className={clsx(
+          jakarta.variable,
+          knewave.variable,
+          mulish.variable,
+          "antialiased min-h-screen bg-background text-black",
+        )}
+      >
+      <Navbar {...navbarProps} />
+      <div className="md:block hidden">{children}      </div>
+      <div
+        className="w-full h-screen md:hidden flex flex-col items-center justify-center bg-background p-4 text-center">
+        <div className="max-w-md mx-auto">
+          <h1 className={`${knewave.className} text-4xl text-primary mb-4`}>
+            🍳 Flave
+          </h1>
+          <p className="text-lg text-gray-600 mb-4">
+            Whoops! Our kitchen is currently optimized for larger screens.
+          </p>
+          <div className="space-y-2 text-gray-500">
+            <p>Please visit us from your desktop computer</p>
+            <p>to browse and create delicious recipes!</p>
+          </div>
+          <div className="mt-8 text-3xl">
+            📱👩🍳
+          </div>
+        </div>
+      </div>
+      <Footer/>
+      </body>
       </html>
     </ContextProvider>
   );
diff --git a/src/app/manifest.ts b/src/app/manifest.ts
index 4b2c6bf..e745e5c 100644
--- a/src/app/manifest.ts
+++ b/src/app/manifest.ts
@@ -10,14 +10,16 @@ export default function manifest(): MetadataRoute.Manifest {
     dir: "auto",
     icons: [
       {
-        src: "/android-chrome-192x192.png",
+        src: "/favicon/android-chrome-192x192.png",
         sizes: "192x192",
         type: "image/png",
+        purpose: "monochrome",
       },
       {
-        src: "/android-chrome-512x512.png",
+        src: "/favicon/android-chrome-512x512.png",
         sizes: "512x512",
         type: "image/png",
+        purpose: "monochrome",
       },
     ],
     theme_color: "#f5c518",
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 1e99320..ec2ec6d 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 import { Logo } from "./logo";
 
 export const Footer = () => (
-  <footer className="flex w-full py-20 text-gray-200 bg-black text-white min-h-[40%] max-h-96 place-content-between">
+  <footer className="flex md:flex-row flex-col w-full py-20 text-gray-200 bg-black text-white min-h-[40%] max-h-96 place-content-between">
     <div className="flex flex-col gap-6 w-80">
       <div className="max-w-45">
         {<Logo type="dark" className="max-h-30" />}
@@ -17,7 +17,7 @@ export const Footer = () => (
         </p>
       </div>
     </div>
-    <section className={`flex gap-20 max-w-max`}>
+    <section className={`md:flex hidden gap-20 max-w-max`}>
       <div className="flex flex-col gap-4">
         <h3 className="text-white">Have Questions?</h3>
         <nav className="flex flex-col gap-2">
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 127d904..5e1abdf 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -13,7 +13,7 @@ export const Navbar: React.FC<NavbarProps> = ({
   <header className="fixed top-0 w-full bg-background backdrop-blur-md shadow z-50 h-20">
     <div className="container mx-auto px-5 sm:px-5 lg:px-10 h-full">
       <div className="flex items-center justify-between h-full">
-        <nav className="flex items-center gap-5">
+        <nav className="md:flex hidden items-center gap-5">
           {leftLinks.map(({ label, href }, idx) => (
             <Link
               href={href}
@@ -31,7 +31,7 @@ export const Navbar: React.FC<NavbarProps> = ({
           </Link>
         </div>
 
-        <div className="flex items-center gap-5">
+        <div className="md:flex hidden items-center gap-5">
           <nav className="hidden md:flex items-center gap-5">
             {rightLinks.map(({ label, href }, idx) => (
               <Link
diff --git a/src/context/form/components/dropdown.tsx b/src/context/form/components/dropdown.tsx
index ceaa2d0..52c7cb9 100644
--- a/src/context/form/components/dropdown.tsx
+++ b/src/context/form/components/dropdown.tsx
@@ -18,6 +18,7 @@ export function Dropdown<T extends FieldValues>({
 }: {
   name: Path<T>;
   label?: string;
+  defaultOptionLabel?: string;
   options: (
     | string
     | {
@@ -70,7 +71,7 @@ export function Dropdown<T extends FieldValues>({
                   />
                 </div>
               )}
-              {selectedOption?.label || "Select..."}
+              {selectedOption?.label || props.defaultOptionLabel || "Select..."}
             </div>
           </ListboxButton>
           <ListboxOptions className="absolute z-10 mt-1 w-full bg-white shadow-lg rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none">
diff --git a/src/styles/globals.css b/src/styles/globals.css
index e2fbb3e..a19e723 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -169,17 +169,17 @@ body {
     text-decoration: none;
   }
 
-  input:invalid {
+  input:invalid,
+  textarea:invalid {
     @apply border-error-dark ring-1 ring-error-dark;
   }
 
-  input:valid {
-    @apply border-success-dark ring-1 ring-success-dark;
-  }
-  input:focus {
+  input:focus,
+  textarea:focus {
     @apply border-yellow-dark ring-0;
   }
-  input:focus-visible {
+  input:focus-visible,
+  textarea:focus-visible {
     @apply border-yellow-dark ring-0;
   }