diff --git a/src/lib/components/molecules/CustomDropdown.svelte b/src/lib/components/molecules/CustomDropdown.svelte
new file mode 100644
index 0000000..26c8568
--- /dev/null
+++ b/src/lib/components/molecules/CustomDropdown.svelte
@@ -0,0 +1,51 @@
+<script>
+	/** @type {{value: string, name: string}[]} */
+	export let options;
+	/** @type {string} */
+	let value = '';
+	let open = false;
+</script>
+
+<div class="w-full max-w-sm">
+	<div class="relative">
+		<input
+			class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+			type="text"
+			id="combobox"
+			bind:value
+			on:focus={() => (open = true)}
+			on:blur={() => (open = false)}
+		/>
+		<button type="button" class="absolute inset-y-0 right-0 flex items-center pr-2">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="h-5 w-5 text-gray-400"
+			>
+				<path d="m6 9 6 6 6-6"></path>
+			</svg>
+		</button>
+		{#if open}
+			<div
+				class="absolute z-50 min-w-[8rem] wßfull overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none"
+			>
+				{#each options as option}
+					<div
+						class="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50"
+					>
+						<button on:click={() => (value = option.value)}>
+							{option.name}
+						</button>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/src/routes/(app)/articles/createArticleDialog.svelte b/src/routes/(app)/articles/createArticleDialog.svelte
index 462764f..c68baaa 100644
--- a/src/routes/(app)/articles/createArticleDialog.svelte
+++ b/src/routes/(app)/articles/createArticleDialog.svelte
@@ -1,16 +1,19 @@
 <script>
 	import ProBadge from '$lib/components/molecules/probadge.svelte';
+	import CustomDropdown from '$lib/components/molecules/CustomDropdown.svelte';
 	import { Button, buttonVariants } from '$lib/components/ui/button';
 	import * as Dialog from '$lib/components/ui/dialog';
 	import * as Form from '$lib/components/ui/form';
 	import * as Select from '$lib/components/ui/select';
 	import { Switch } from '$lib/components/ui/switch';
+	import { Input } from '$lib/components/ui/input';
 	import { toast } from 'svelte-sonner';
 	import { superForm } from 'sveltekit-superforms';
 	import { zodClient } from 'sveltekit-superforms/adapters';
 	import { createFormSchema } from './schema';
 	import { page } from '$app/stores';
-	import { Field } from 'formsnap';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	export let videos;
 	export let tier;
@@ -45,6 +48,9 @@
 	//         toast.error(msg);
 	//     }
 	// });
+	$: {
+		console.log($formData.video_id);
+	}
 </script>
 
 <Dialog.Root bind:open>
@@ -65,39 +71,68 @@
 		>
 			<Form.Field {form} name="video_id">
 				<Form.Control let:attrs>
-					<div class="grid gap-4 mb-4">
+					<div class="mb-4 grid gap-4" style="margin-bottom: 0.5rem !important">
 						<div class="grid grid-cols-4 items-center gap-4">
-							<Form.Label class="text-right">Youtube video*</Form.Label>
+							<Form.Label class="text-right">Youtube video link*</Form.Label>
 							<!-- <Input
                                 id="youtube_url"
                                 placeholder="www.youtube.com/watch?v=..."
                                 class="col-span-3"
                             /> -->
 							<Select.Root>
-								<Select.Trigger class="w-[300px]">
-									<Select.Value />
-								</Select.Trigger>
+								<SelectPrimitive.Trigger
+									class={cn(
+										'col-span-2 flex h-10 w-[300px] items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1'
+									)}
+									{...$$restProps}
+									let:builder
+									on:click
+									on:keydown
+									asChild={true}
+								>
+									<!-- <div {...builder}>
+									<Input class="border-0 bg-transparent" />
+								</div> -->
+									<div {...builder} use:builder.action class="col-span-2 w-[300px]">
+										<SelectPrimitive.Value asChild={true}>
+											<Input
+												placeholder="Paste a video link or select a video"
+												class="col-span-2 w-[300px]"
+												bind:value={$formData.video_id}
+												{...attrs}
+											/>
+										</SelectPrimitive.Value>
+									</div>
+								</SelectPrimitive.Trigger>
+
 								<Select.Content>
 									<Select.Group>
 										{#each videos as video}
 											<Select.Item
+												on:click={() =>
+													($formData.video_id = 'https://youtu.be/' + video.snippet.resourceId.videoId)}
 												value={video.snippet.resourceId.videoId}
-												label={video.snippet.title}>{video.snippet.title}</Select.Item
-											>
+												label={video.snippet.title}
+												>{video.snippet.title}
+											</Select.Item>
 										{/each}
 									</Select.Group>
 								</Select.Content>
 								<Select.Input bind:value={$formData.video_id} {...attrs} />
 							</Select.Root>
+							<!-- <CustomDropdown options={videos.map((/** @type {any} */ x) => ({name: x.snippet.title,value: x.snippet.resourceId.videoId}))}/> -->
+							<!-- <CustomDropdown options={[{name: "my youtube video", value: "my"}]}/> -->
 						</div>
 					</div>
 				</Form.Control>
-				<Form.Description />
-				<Form.FieldErrors />
+				<div class="grid grid-cols-4 items-center gap-4 mb" style="margin-top: 0.5rem !important">
+					<Form.FieldErrors class="col-start-2 mb-2" />
+				</div>
+				<!-- <Form.Description /> -->
 			</Form.Field>
 			<Form.Field {form} name="length">
 				<Form.Control let:attrs>
-					<div class="grid gap-4 mb-4">
+					<div class="mb-4 grid gap-4">
 						<div class="grid grid-cols-4 items-center gap-4">
 							<Form.Label class="text-right">Article length</Form.Label>
 							<Select.Root portal={null} name="length">
@@ -109,20 +144,15 @@
 										<Select.Item value="700" label="Short (~700 words)"
 											>Short (~700 words)</Select.Item
 										>
-										<Select.Item
-											value="1500"
-											label="Medium (~1500 words)"
+										<Select.Item value="1500" label="Medium (~1500 words)"
 											>Medium (~1500 words)
 											<!-- <ProBadge /> -->
-											</Select.Item>
-											<!-- disabled={['free', 'basic'].includes(tier)} -->
-										<Select.Item
-											value="2500"
-											label="Long (~2500 words)"
+										</Select.Item>
+										<!-- disabled={['free', 'basic'].includes(tier)} -->
+										<Select.Item value="2500" label="Long (~2500 words)"
 											>Long (~2500 words)
 											<!-- <ProBadge /> -->
-											</Select.Item
-										>
+										</Select.Item>
 									</Select.Group>
 								</Select.Content>
 								<Select.Input {...attrs} />
@@ -133,7 +163,7 @@
 			</Form.Field>
 			<Form.Field {form} name="format">
 				<Form.Control let:attrs>
-					<div class="grid gap-4 mb-4">
+					<div class="mb-4 grid gap-4">
 						<div class="grid grid-cols-4 items-center gap-4">
 							<Form.Label class="text-right">Format</Form.Label>
 							<Select.Root portal={null} name="format">
diff --git a/src/routes/(app)/articles/schema.js b/src/routes/(app)/articles/schema.js
index 98227fb..a7c44dc 100644
--- a/src/routes/(app)/articles/schema.js
+++ b/src/routes/(app)/articles/schema.js
@@ -1,7 +1,7 @@
 import { z } from "zod";
  
 export const createFormSchema = z.object({
-  video_id: z.string(),
+  video_id: z.string().regex(/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/, "Invalid Youtube URL"),
   // length: z.number().optional(),
   // format: z.enum(["summary", "listicle", "product review", "news report", "tutorial"]).optional(),
 });