diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..ebe51d3
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false
\ No newline at end of file
diff --git a/app/characters/Leonel%20Morales/page.tsx b/app/characters/Leonel%20Morales/page.tsx
index 02a57fb..7b31735 100644
--- a/app/characters/Leonel%20Morales/page.tsx
+++ b/app/characters/Leonel%20Morales/page.tsx
@@ -1,3 +1,5 @@
+
+
 export default function Leonel() {
     return (
       <>
diff --git "a/app/characters/\133tag\135.ts" "b/app/characters/\133tag\135.ts"
deleted file mode 100644
index e69de29..0000000
--- "a/app/characters/\133tag\135.ts"
+++ /dev/null
diff --git a/components/Character/Abilities.tsx b/components/Character/Abilities.tsx
new file mode 100644
index 0000000..72eeb83
--- /dev/null
+++ b/components/Character/Abilities.tsx
@@ -0,0 +1,9 @@
+
+
+export default function Abilities() {
+  return (
+    <>
+    
+    </>
+  )
+}
\ No newline at end of file
diff --git a/components/NavBar.tsx b/components/NavBar.tsx
index 7c846c9..580e572 100644
--- a/components/NavBar.tsx
+++ b/components/NavBar.tsx
@@ -32,11 +32,11 @@
   const [showChild, setShowChild] = useState<boolean>(false)
   return (
     <div
-    className="flex space-y-1"
+    className="flex min-w-fit"
     onMouseLeave={() => void setShowChild(false)}
     >
       <div
-      className="w-fit px-3 text-slate-200 hover:bg-white hover:bg-opacity-5 rounded py-1 cursor-pointer"
+      className="w-fit px-3 text-slate-200 hover:bg-white hover:bg-opacity-5 rounded py-1 cursor-pointer min-w-fit"
       onClick={() => router.push(title.toLowerCase())}
       onMouseEnter={() => void setShowChild(true)}
       >
@@ -44,7 +44,7 @@
       </div>
       {
         (children)
-        ? <div className={`bg-[#383838] bg-opacity-75 w-fit rounded flex flex-col space-y-1 p-1 ${showChild ? "opacity-100" : "opacity-0"}`}>
+        ? <div className={`bg-[#383838] bg-opacity-75 w-fit rounded flex flex-col space-y-1 p-1 ${showChild ? "opacity-100" : "opacity-0"} min-w-fit`}>
           { children }
         </div>
         : null
@@ -67,11 +67,11 @@
 
   return (
     <div
-    className="flex flex-col space-y-1"
+    className="flex flex-col space-y-1 max-w-[7.5vw]"
     onMouseLeave={() => void setShowChild(false)}
     >
       <div
-      className="w-fit px-3 text-slate-200 hover:bg-white hover:bg-opacity-5 rounded py-1 cursor-pointer"
+      className="w-fit px-3 text-slate-200 hover:bg-white hover:bg-opacity-5 rounded py-1 cursor-pointer min-w-fit"
       onClick={() => router.push(title.toLowerCase())}
       onMouseEnter={() => void setShowChild(true)}
       >
@@ -79,9 +79,11 @@
       </div>
       {
         (subgroups && subgroups.length > 0)
-        ? <div className={`bg-[#383838] bg-opacity-75 w-fit rounded flex flex-col space-y-1 p-1 ${showChild ? "opacity-100" : "opacity-0"}`}>
+        ? <div className={`bg-[#383838] bg-opacity-75 rounded flex flex-col space-y-1 p-1 ${showChild ? "opacity-100" : "opacity-0"} w-fit`}>
           {
-            subgroups.map((item, i) => <div key={i}>{item}</div>)
+            subgroups.map((item, i) => <div
+            key={i}
+            >{item}</div>)
           }
         </div>
         : null