diff --git a/src/App.tsx b/src/App.tsx
index 97bf2b0..2c2c1ff 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -62,7 +62,7 @@ function Dashboard() {
 }
 
 function Header() {
-	const [open, setOpen] = useState(false);
+	// const [open, setOpen] = useState(false);
 
 	return (
 		<nav className="ka-nav">
@@ -73,40 +73,41 @@ function Header() {
 
 			<a onClick={ev => {
 				ev.preventDefault();
-				setOpen(!open);
+				console.log("not provide features");
+				// setOpen(!open);
 			}}>
 				<DynamicIcon className="link" name="more-vertical" />
 			</a>
-			<MenuView open={open} setOpen={setOpen} />
+			{/* <MenuView open={open} setOpen={setOpen} /> */}
 		</nav>
 	);
 }
 
 // TODO: create menu modal
-function MenuView({ open, setOpen }: { open: boolean; setOpen: (value: boolean) => void }) {
-	return (
-		<div className={`ka-menu ${open ? "open" : ""}`}>
-			<MenuItem icon="panel-left-close" name="Close" block={() => {
-				setOpen(false);
-			}} />
-		</div>
-	);
-}
+// function MenuView({ open, setOpen }: { open: boolean; setOpen: (value: boolean) => void }) {
+// 	return (
+// 		<div className={`ka-menu ${open ? "open" : ""}`}>
+// 			<MenuItem icon="panel-left-close" name="Close" block={() => {
+// 				setOpen(false);
+// 			}} />
+// 		</div>
+// 	);
+// }
 
-function MenuItem({ icon, name, block }: { icon: IconName, name: string, block?: () => void }) {
-	return (
-		<a className={"ka-menu-item link"} onClick={ev => {
-			ev.preventDefault();
-			if (typeof block === "undefined")
-				return;
+// function MenuItem({ icon, name, block }: { icon: IconName, name: string, block?: () => void }) {
+// 	return (
+// 		<a className={"ka-menu-item link"} onClick={ev => {
+// 			ev.preventDefault();
+// 			if (typeof block === "undefined")
+// 				return;
 
-			block();
-		}}>
-			<DynamicIcon name={icon} />
-			<span>{name}</span>
-		</a>
-	);
-}
+// 			block();
+// 		}}>
+// 			<DynamicIcon name={icon} />
+// 			<span>{name}</span>
+// 		</a>
+// 	);
+// }
 
 function Footer() {
 	const path = usePath();
diff --git a/src/components/directory/directory.scss b/src/components/directory/directory.scss
index 84300f0..e91fefc 100644
--- a/src/components/directory/directory.scss
+++ b/src/components/directory/directory.scss
@@ -4,23 +4,30 @@
 	display: flex;
 	margin: 10px 0;
 	flex-direction: column;
-	border-bottom: solid 2px var(--foreground);
+	border-bottom: 1px solid var(--foreground);
 
 	.ka-dir-top {
-		border-bottom: solid 2px var(--foreground);
+		background-color: var(--nav-color);
+		border-top: 1px solid var(--foreground);
+		border-bottom: 1px solid var(--foreground);
 	}
 
 	.ka-dir-row {
-		padding: 0 10px;
 		width: 100%;
-		height: 25px;
 		display: grid;
+		padding: 0.25rem 10px;
+		place-items: left center;
+		transition-duration: 300ms;
 		grid-template-columns: 0.1fr 2fr 1fr 1fr;
 
+		&:hover {
+			transition-duration: 300ms;
+			background-color: rgba(0, 0, 0, 0.15);
+		}
+
 		.ka-dir-item {
 			display: flex;
 			align-items: center;
-			
 		}
 		
 		a:hover.ka-dir-item {