diff --git a/src/components/CreateDirButton.tsx b/src/components/CreateDirButton.tsx
index bf4f3c6..73e7e42 100644
--- a/src/components/CreateDirButton.tsx
+++ b/src/components/CreateDirButton.tsx
@@ -20,7 +20,7 @@ const CreateDirButton: React.FC<Props> = (props) => {
 	},[show])
 
 	return (
-		<div>
+		<div className="flex">
 			<button
 				onClick={()=>{
 					setShow(!show)
@@ -29,7 +29,7 @@ const CreateDirButton: React.FC<Props> = (props) => {
 			>
 				<MdCreateNewFolder size="40"/>
 			</button>
-			<div className={`${!show?"hidden":""} flex`}>
+			<div className={`my-auto ${show?"w-44":"w-0"} overflow-hidden transition-all`} >
 				<form 
 					onSubmit={(e)=>{
 						e.preventDefault()
@@ -38,6 +38,7 @@ const CreateDirButton: React.FC<Props> = (props) => {
 						setShow(false)
 					}}>
 					<input
+						className="bg-transparent dark:text-gray-300 outline-none mx-1 border-b"
 						type="text"
 						onChange={(e)=>setName(e.target.value)}
 						value={name}