diff --git a/src/app/globals.css b/src/app/globals.css
index 949804a..b2b43e0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -37,6 +37,613 @@
   border-bottom: 1px solid var(--border);
 }
 
+.navbar-inner {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 24px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.navbar-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 700;
+  font-size: 1.2rem;
+}
+
+.brand-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  font-size: 1rem;
+  overflow: hidden;
+}
+
+.brand-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.brand-text {
+  color: var(--foreground);
+}
+
+.navbar-links {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: var(--muted);
+}
+
+.navbar-links a:hover {
+  color: var(--primary);
+}
+
+/* ============ FOOTER ============ */
+.footer {
+  margin-top: 80px;
+  border-top: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.footer-inner {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 48px 24px;
+  display: flex;
+  justify-content: space-between;
+  gap: 40px;
+  flex-wrap: wrap;
+}
+
+.footer-brand {
+  max-width: 300px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-weight: 700;
+  font-size: 1.1rem;
+}
+
+.footer-tagline {
+  font-size: 0.9rem;
+  font-weight: 400;
+  color: var(--muted);
+  line-height: 1.5;
+}
+
+.footer-links {
+  display: flex;
+  gap: 60px;
+}
+
+.footer-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.footer-col h4 {
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--muted);
+  margin-bottom: 4px;
+}
+
+.footer-col a {
+  font-size: 0.95rem;
+  color: var(--foreground);
+}
+
+.footer-col a:hover {
+  color: var(--primary);
+}
+
+.footer-bottom {
+  border-top: 1px solid var(--border);
+  text-align: center;
+  padding: 20px 24px;
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
+/* ============ HERO (Landing) ============ */
+.hero {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 80px 24px 60px;
+  text-align: center;
+}
+
+.hero-logo {
+  margin-bottom: 24px;
+}
+
+.hero h1 {
+  font-size: 3rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+  margin-bottom: 16px;
+}
+
+.hero h1 .highlight {
+  background: linear-gradient(135deg, #6366f1, #a855f7);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero p {
+  font-size: 1.2rem;
+  color: var(--muted);
+  max-width: 600px;
+  margin: 0 auto 32px;
+}
+
+.hero-actions {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.btn-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 28px;
+  background: var(--primary);
+  color: white;
+  border-radius: 50px;
+  font-weight: 600;
+  font-size: 1rem;
+  transition: background 0.2s;
+}
+
+.btn-primary:hover {
+  background: var(--primary-dark);
+}
+
+.btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 28px;
+  border: 2px solid var(--border);
+  color: var(--foreground);
+  border-radius: 50px;
+  font-weight: 600;
+  font-size: 1rem;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.btn-secondary:hover {
+  border-color: var(--primary);
+  background: #f5f3ff;
+}
+
+/* ============ SECTION ============ */
+.section {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 24px 60px;
+}
+
+.section-title {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.section-subtitle {
+  color: var(--muted);
+  font-size: 1.05rem;
+  margin-bottom: 32px;
+}
+
+/* ============ PATH CARDS ============ */
+.paths-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 20px;
+}
+
+.path-card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 24px;
+  transition: box-shadow 0.2s, border-color 0.2s;
+}
+
+.path-card:hover {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+  border-color: var(--primary);
+}
+
+.path-card-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border-left: 3px solid;
+  padding-left: 12px;
+}
+
+.path-card-header h3 {
+  font-size: 1.15rem;
+  font-weight: 700;
+}
+
+.path-card-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+}
+
+.path-card p {
+  color: var(--muted);
+  font-size: 0.95rem;
+  flex: 1;
+}
+
+.path-card-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+.path-card-arrow {
+  font-size: 1.2rem;
+  color: var(--primary);
+}
+
+/* ============ PAGE HEADER ============ */
+.page-header {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 48px 24px 32px;
+}
+
+.page-header h1 {
+  font-size: 2.5rem;
+  font-weight: 800;
+  margin-bottom: 8px;
+}
+
+.page-header p {
+  color: var(--muted);
+  font-size: 1.1rem;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.9rem;
+  color: var(--muted);
+  margin-bottom: 12px;
+}
+
+.breadcrumb a {
+  color: var(--primary);
+}
+
+.breadcrumb a:hover {
+  text-decoration: underline;
+}
+
+/* ============ TOPIC CARDS ============ */
+.topics-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.topic-card {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px 24px;
+  transition: box-shadow 0.2s, border-color 0.2s;
+}
+
+.topic-card:hover {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+  border-color: var(--primary);
+}
+
+.topic-card-order {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: #f5f3ff;
+  color: var(--primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.topic-card-body {
+  flex: 1;
+}
+
+.topic-card-body h3 {
+  font-size: 1.05rem;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.topic-card-body p {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.topic-level {
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: capitalize;
+  margin-top: 4px;
+  display: inline-block;
+}
+
+.topic-card-arrow {
+  font-size: 1.4rem;
+  color: var(--primary);
+  flex-shrink: 0;
+}
+
+/* ============ TOPIC DETAIL ============ */
+.topic-detail {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 0 24px 60px;
+}
+
+.topic-detail .topic-meta {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  margin-bottom: 32px;
+}
+
+.topic-content {
+  font-size: 1.05rem;
+  line-height: 1.8;
+}
+
+.video-wrapper {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 aspect ratio */
+  height: 0;
+  overflow: hidden;
+  border-radius: var(--radius);
+  margin-bottom: 32px;
+  background: #000;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.video-wrapper iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.topic-content h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-top: 32px;
+  margin-bottom: 12px;
+  text-align: left;
+}
+
+.topic-content p {
+  margin-bottom: 16px;
+}
+
+.topic-content ul {
+  margin-bottom: 16px;
+  padding-left: 24px;
+}
+
+.topic-content li {
+  margin-bottom: 8px;
+}
+
+.topic-content pre {
+  background: #1e293b;
+  color: #e2e8f0;
+  padding: 20px;
+  border-radius: var(--radius);
+  overflow-x: auto;
+  margin: 16px 0;
+  font-size: 0.9rem;
+  line-height: 1.6;
+}
+
+.topic-content code {
+  font-family: var(--font-mono), monospace;
+  font-size: 0.9em;
+  background: #f1f5f9;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.topic-content pre code {
+  background: none;
+  padding: 0;
+}
+
+/* Resources */
+.resources-section {
+  margin-top: 40px;
+  padding-top: 24px;
+  border-top: 1px solid var(--border);
+}
+
+.resources-section h2 {
+  font-size: 1.3rem;
+  margin-bottom: 16px;
+}
+
+.resource-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.resource-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  font-size: 0.95rem;
+}
+
+.resource-item:hover {
+  border-color: var(--primary);
+}
+
+.resource-type {
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--primary);
+  background: #f5f3ff;
+  padding: 4px 10px;
+  border-radius: 20px;
+}
+
+/* Topic navigation */
+.topic-nav {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 40px;
+  padding-top: 24px;
+  border-top: 1px solid var(--border);
+  gap: 16px;
+}
+
+.topic-nav a {
+  padding: 12px 20px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 0.95rem;
+  transition: border-color 0.2s;
+}
+
+.topic-nav a:hover {
+  border-color: var(--primary);
+  color: var(--primary);
+}
+
+/* ============ CONTRIBUTE PAGE ============ */
+.contribute-content {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 0 24px 60px;
+}
+
+.contribute-content h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-top: 32px;
+  margin-bottom: 12px;
+  text-align: left;
+}
+
+.contribute-content p {
+  color: var(--muted);
+  margin-bottom: 16px;
+  font-size: 1.05rem;
+  line-height: 1.7;
+}
+
+.contribute-content ol,
+.contribute-content ul {
+  padding-left: 24px;
+  margin-bottom: 16px;
+  color: var(--muted);
+  font-size: 1.05rem;
+  line-height: 1.8;
+}
+
+.contribute-content li {
+  margin-bottom: 8px;
+}
+
+.contribute-content code {
+  font-family: var(--font-mono), monospace;
+  font-size: 0.9em;
+  background: #f1f5f9;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.contribute-content pre {
+  background: #1e293b;
+  color: #e2e8f0;
+  padding: 20px;
+  border-radius: var(--radius);
+  overflow-x: auto;
+  margin: 16px 0;
+  font-size: 0.9rem;
+  line-height: 1.6;
+}
+
+.contribute-content pre code {
+  background: none;
+  padding: 0;
+}
+
+.ways-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 16px;
+  margin: 20px 0;
+}
+
+.way-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px;
+  text-align: center;
   @keyframes fade-in {
     0% { opacity: 0; transform: translateY(10px); }
     100% { opacity: 1; transform: translateY(0); }
@@ -54,9 +661,57 @@
   box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.2), 0 4px 6px -2px rgba(37, 99, 235, 0.1);
 }
 
-.bg-shimmer {
-  background: linear-gradient(90deg, var(--color-surface-tertiary) 0%, var(--color-border) 50%, var(--color-surface-tertiary) 100%);
-  background-size: 200% 100%;
-  animation: shimmer 2s linear infinite;
-} */
-}
\ No newline at end of file
+/* ============ RESPONSIVE ============ */
+@media (max-width: 640px) {
+  .hero h1 {
+    font-size: 2rem;
+  }
+
+  .hero p {
+    font-size: 1rem;
+  }
+
+  .paths-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .footer-inner {
+    flex-direction: column;
+  }
+
+  .footer-links {
+    gap: 32px;
+  }
+
+  .navbar-links {
+    gap: 16px;
+    font-size: 0.85rem;
+  }
+
+  .topic-card {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+.video-wrapper {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 aspect ratio */
+  height: 0;
+  overflow: hidden;
+  border-radius: var(--radius);
+  margin-bottom: 32px;
+  background: #000;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.video-wrapper iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+/*force update*/
diff --git a/src/app/paths/[pathSlug]/[topicSlug]/page.tsx b/src/app/paths/[pathSlug]/[topicSlug]/page.tsx
index 8976803..583f5db 100644
--- a/src/app/paths/[pathSlug]/[topicSlug]/page.tsx
+++ b/src/app/paths/[pathSlug]/[topicSlug]/page.tsx
@@ -61,6 +61,14 @@ export default function TopicPage({ params }: { params: any }) {
   const elements = parseContent(topic.content);
 
   return (
+    <div className="topic-detail">
+      <div className="page-header">
+        <div className="breadcrumb">
+          <Link href="/paths">Paths</Link>
+          <span>/</span>
+          <Link href={`/paths/${path.slug}`}>{path.title}</Link>
+          <span>/</span>
+          <span>{topic.title}</span>
     <main className="min-h-screen bg-white pb-20">
       <div className="bg-[#0F172A] pt-32 pb-20 relative overflow-hidden">
         <div className="absolute top-0 left-0 w-full h-full opacity-10">
@@ -93,7 +101,20 @@ export default function TopicPage({ params }: { params: any }) {
           </motion.div>
         </div>
       </div>
+      
+      {topic.videoId && (
+  <div className="video-wrapper">
+    <iframe
+      src={`https://www.youtube.com/embed/${topic.videoId}`}
+      title={topic.title}
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowFullScreen
+    />
+  </div>
+)}
 
+      <div className="topic-content">
+        <ReactMarkdown>{topic.content}</ReactMarkdown>
       <div className="container mx-auto px-6 -mt-10 relative z-20">
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
           
@@ -171,6 +192,6 @@ export default function TopicPage({ params }: { params: any }) {
           </div>
         </div>
       </div>
-    </main>
+    </div>
   );
 }
\ No newline at end of file
diff --git a/src/data/paths/frontend.json b/src/data/paths/frontend.json
index 92f57f1..3bd3381 100644
--- a/src/data/paths/frontend.json
+++ b/src/data/paths/frontend.json
@@ -12,9 +12,18 @@
       "level": "beginner",
       "order": 1,
       "content": "HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure of a web page using a series of elements.\n\n## Key Concepts\n\n- **Elements & Tags**: HTML uses tags like `<p>`, `<h1>`, `<div>` to define content.\n- **Attributes**: Tags can have attributes like `class`, `id`, `href` that provide extra information.\n- **Document Structure**: Every HTML page has `<!DOCTYPE html>`, `<html>`, `<head>`, and `<body>`.\n- **Semantic HTML**: Use tags like `<header>`, `<nav>`, `<main>`, `<footer>` for meaningful structure.\n\n## Example\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>My First Page</title>\n</head>\n<body>\n  <header>\n    <h1>Hello, World!</h1>\n  </header>\n  <main>\n    <p>This is my first web page.</p>\n  </main>\n</body>\n</html>\n```",
+      "videoId": "qz0aGYrrlhU",
       "resources": [
-        { "title": "MDN: HTML Basics", "url": "https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics", "type": "docs" },
-        { "title": "W3Schools HTML Tutorial", "url": "https://www.w3schools.com/html/", "type": "tutorial" }
+        {
+          "title": "MDN: HTML Basics",
+          "url": "https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics",
+          "type": "docs"
+        },
+        {
+          "title": "W3Schools HTML Tutorial",
+          "url": "https://www.w3schools.com/html/",
+          "type": "tutorial"
+        }
       ]
     },
     {
@@ -24,9 +33,18 @@
       "level": "beginner",
       "order": 2,
       "content": "CSS (Cascading Style Sheets) controls the visual presentation of HTML elements.\n\n## Key Concepts\n\n- **Selectors**: Target elements using tag names, classes (`.btn`), IDs (`#header`), or attributes.\n- **Box Model**: Every element is a box with content, padding, border, and margin.\n- **Flexbox**: A layout model for arranging items in rows or columns.\n- **Grid**: A two-dimensional layout system for complex page designs.\n- **Responsive Design**: Use media queries to adapt layouts to different screen sizes.\n\n## Example\n\n```css\n/* Flexbox centering */\n.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n}\n\n/* Responsive text */\nh1 {\n  font-size: clamp(1.5rem, 4vw, 3rem);\n  color: #1e293b;\n}\n```",
+      "videoId": "yfoY5iEFMyw",
       "resources": [
-        { "title": "MDN: CSS First Steps", "url": "https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps", "type": "docs" },
-        { "title": "CSS Tricks: Flexbox Guide", "url": "https://css-tricks.com/snippets/css/a-guide-to-flexbox/", "type": "article" }
+        {
+          "title": "MDN: CSS First Steps",
+          "url": "https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps",
+          "type": "docs"
+        },
+        {
+          "title": "CSS Tricks: Flexbox Guide",
+          "url": "https://css-tricks.com/snippets/css/a-guide-to-flexbox/",
+          "type": "article"
+        }
       ]
     },
     {
@@ -36,9 +54,18 @@
       "level": "beginner",
       "order": 3,
       "content": "JavaScript is the programming language of the web, enabling dynamic and interactive content.\n\n## Key Concepts\n\n- **Variables**: `let`, `const`, and `var` for storing data.\n- **Functions**: Reusable blocks of code — regular functions and arrow functions.\n- **DOM Manipulation**: Select and modify HTML elements with `document.querySelector()`.\n- **Events**: Respond to user actions like clicks, keypresses, and form submissions.\n- **ES6+ Features**: Template literals, destructuring, spread operator, modules.\n\n## Example\n\n```javascript\n// DOM manipulation\nconst button = document.querySelector('#myButton');\n\nbutton.addEventListener('click', () => {\n  const output = document.querySelector('#output');\n  output.textContent = 'Button clicked!';\n  output.style.color = '#3b82f6';\n});\n```",
+      "videoId": "W6NZfCO5SIk",
       "resources": [
-        { "title": "MDN: JavaScript Guide", "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide", "type": "docs" },
-        { "title": "JavaScript.info", "url": "https://javascript.info/", "type": "tutorial" }
+        {
+          "title": "MDN: JavaScript Guide",
+          "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide",
+          "type": "docs"
+        },
+        {
+          "title": "JavaScript.info",
+          "url": "https://javascript.info/",
+          "type": "tutorial"
+        }
       ]
     },
     {
@@ -48,9 +75,18 @@
       "level": "intermediate",
       "order": 4,
       "content": "React is a JavaScript library for building user interfaces using reusable components.\n\n## Key Concepts\n\n- **Components**: Functions that return JSX (HTML-like syntax in JavaScript).\n- **Props**: Pass data from parent to child components.\n- **State**: Manage dynamic data within a component using `useState`.\n- **Effects**: Handle side effects like API calls with `useEffect`.\n- **Conditional Rendering**: Show different UI based on state or props.\n\n## Example\n\n```jsx\nimport { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(count + 1)}>\n        Increment\n      </button>\n    </div>\n  );\n}\n```",
+      "videoId": "SqcY0GlETPk",
       "resources": [
-        { "title": "React Official Docs", "url": "https://react.dev/", "type": "docs" },
-        { "title": "React Tutorial: Tic-Tac-Toe", "url": "https://react.dev/learn/tutorial-tic-tac-toe", "type": "tutorial" }
+        {
+          "title": "React Official Docs",
+          "url": "https://react.dev/",
+          "type": "docs"
+        },
+        {
+          "title": "React Tutorial: Tic-Tac-Toe",
+          "url": "https://react.dev/learn/tutorial-tic-tac-toe",
+          "type": "tutorial"
+        }
       ]
     },
     {
@@ -60,9 +96,18 @@
       "level": "intermediate",
       "order": 5,
       "content": "Next.js is a React framework that adds server-side rendering, routing, and API routes out of the box.\n\n## Key Concepts\n\n- **File-based Routing**: Pages map to files in the `app/` directory.\n- **Server Components**: Components that render on the server by default.\n- **Client Components**: Add `'use client'` for interactive components.\n- **API Routes**: Build backend endpoints in `app/api/`.\n- **Layouts**: Shared UI that wraps multiple pages.\n\n## Example\n\n```tsx\n// app/page.tsx - Server Component\nexport default function Home() {\n  return (\n    <main>\n      <h1>Welcome to my Next.js app</h1>\n    </main>\n  );\n}\n\n// app/api/hello/route.ts - API Route\nexport async function GET() {\n  return Response.json({ message: 'Hello!' });\n}\n```",
+      "videoId": "wm5gMKuwSYk",
       "resources": [
-        { "title": "Next.js Documentation", "url": "https://nextjs.org/docs", "type": "docs" },
-        { "title": "Next.js Learn Course", "url": "https://nextjs.org/learn", "type": "tutorial" }
+        {
+          "title": "Next.js Documentation",
+          "url": "https://nextjs.org/docs",
+          "type": "docs"
+        },
+        {
+          "title": "Next.js Learn Course",
+          "url": "https://nextjs.org/learn",
+          "type": "tutorial"
+        }
       ]
     },
     {
@@ -89,4 +134,4 @@
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/src/data/types.ts b/src/data/types.ts
index 4ca3483..94cd9b2 100644
--- a/src/data/types.ts
+++ b/src/data/types.ts
@@ -11,6 +11,7 @@ export interface Topic {
   level: "beginner" | "intermediate" | "advanced";
   order: number;
   content: string;
+  videoId?: string;
   resources: Resource[];
 }