diff --git a/src/components/FileTree.tsx b/src/components/FileTree.tsx
index 3d30c5c..5f5c205 100644
--- a/src/components/FileTree.tsx
+++ b/src/components/FileTree.tsx
@@ -111,19 +111,21 @@ export const HeadingNode: Component<{
 
   return (
     <div>
-        <span class={`${hasChildren ? "" : "invisible" } ${isExpanded() ? "rotate-90" : ""} inline-block transition-transform cursor-pointer mr-1 text-gray-400 text-xs w-3 flex-shrink-0`}
+      <div class="flex flex-row">
+        <span class={`cursor-pointer mr-1 text-gray-400 text-xs w-3 flex-shrink-0`}
               style={{ "margin-left": `${indent + 8}px` }}
               onClick={handleExpand}
         >
-          ▶
+          <span class={`${hasChildren ? "" : "invisible" } ${isExpanded() ? "rotate-90" : ""} mt-1 inline-block transition-transform `}>▶</span>
         </span>
-      <a
-        href={href}
-        class="inline-flex items-center py-0.5 px-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded truncate cursor-pointer"
-        onClick={handleClick}
-      >
-        <span class="truncate">{props.node.title}</span>
-      </a>
+        <a
+            href={href}
+            class="inline-flex items-center py-0.5 px-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded truncate cursor-pointer"
+            onClick={handleClick}
+        >
+          {props.node.title}
+        </a>
+      </div>
       <Show when={hasChildren && isExpanded()}>
         <div>
           {props.node.children!.map((child) => (