diff --git a/app/layout.tsx b/app/layout.tsx
index b3dd149..04c5898 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -18,6 +18,13 @@ export const metadata: Metadata = {
   description: "Generated by create next app",
 };
 
+/**
+ * Root layout component that defines the application's HTML structure.
+ *
+ * Wraps the nested content within an HTML document element set to English. Global font styles are applied via imported font variables, and a navigation bar is rendered above the children.
+ *
+ * @param children - The content to be rendered within the layout.
+ */
 export default function RootLayout({
   children,
 }: Readonly<{
diff --git a/components/NavBar.tsx b/components/NavBar.tsx
index 7aab809..cae8913 100644
--- a/components/NavBar.tsx
+++ b/components/NavBar.tsx
@@ -1,5 +1,14 @@
 import Link from "next/link";
 
+/**
+ * Renders a navigation bar with links to the home page and the Next.js documentation.
+ *
+ * The "Home" link routes to the application's root path, while the "Next.js Docs" link opens the official Next.js
+ * documentation in a new browser tab. Tailwind CSS classes are used for styling, including padding, a bottom border,
+ * and an underline effect on hover.
+ *
+ * @returns JSX element representing the navigation bar.
+ */
 export default function NavBar() {
   return (
     <nav className="p-4 border-b">