Upload folder using huggingface_hub

app/globals.css

@@ -210,3 +210,163 @@ body {
   background-color: rgba(20, 184, 166, 0.2);
   color: #0f766e;
 }
+
+/* ===== RESPONSIVE UTILITIES ===== */
+
+/* Mobile-first responsive container */
+.container-responsive {
+  @apply w-full px-4 mx-auto;
+  max-width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container-responsive {
+    @apply px-6;
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container-responsive {
+    @apply px-8;
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container-responsive {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container-responsive {
+    max-width: 1280px;
+  }
+}
+
+/* Responsive Text */
+.text-responsive-xs {
+  @apply text-xs sm:text-sm;
+}
+
+.text-responsive-sm {
+  @apply text-sm sm:text-base;
+}
+
+.text-responsive-base {
+  @apply text-base sm:text-lg md:text-xl;
+}
+
+.text-responsive-lg {
+  @apply text-lg sm:text-xl md:text-2xl;
+}
+
+.text-responsive-xl {
+  @apply text-xl sm:text-2xl md:text-3xl lg:text-4xl;
+}
+
+.text-responsive-2xl {
+  @apply text-2xl sm:text-3xl md:text-4xl lg:text-5xl;
+}
+
+/* Responsive Spacing */
+.space-responsive {
+  @apply space-y-4 sm:space-y-6 md:space-y-8;
+}
+
+.padding-responsive {
+  @apply p-4 sm:p-6 md:p-8 lg:p-10;
+}
+
+.margin-responsive {
+  @apply m-4 sm:m-6 md:m-8;
+}
+
+/* Responsive Grid */
+.grid-responsive {
+  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6;
+}
+
+.grid-responsive-2 {
+  @apply grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6;
+}
+
+.grid-responsive-3 {
+  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6;
+}
+
+/* Hide/Show on devices */
+.mobile-only {
+  @apply block sm:hidden;
+}
+
+.tablet-up {
+  @apply hidden sm:block;
+}
+
+.desktop-only {
+  @apply hidden lg:block;
+}
+
+/* Responsive Card */
+.card-responsive {
+  @apply bg-white rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-sm hover:shadow-md transition-all;
+}
+
+/* Responsive Button */
+.btn-responsive {
+  @apply px-4 py-2 sm:px-6 sm:py-3 text-sm sm:text-base rounded-lg sm:rounded-xl;
+}
+
+/* Touch-friendly targets for mobile */
+@media (max-width: 640px) {
+  button, a, .clickable {
+    min-height: 44px;
+    min-width: 44px;
+  }
+
+  input, textarea, select {
+    font-size: 16px !important; /* Prevents zoom on iOS */
+  }
+}
+
+/* Responsive Navigation */
+.nav-responsive {
+  @apply flex flex-col sm:flex-row items-center gap-2 sm:gap-4;
+}
+
+/* Safe area for mobile notches */
+.safe-area-top {
+  padding-top: env(safe-area-inset-top);
+}
+
+.safe-area-bottom {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* Responsive Modal */
+.modal-responsive {
+  @apply w-[95vw] sm:w-[85vw] md:w-[75vw] lg:w-[60vw] max-w-4xl;
+  max-height: 90vh;
+}
+
+/* Responsive Chat */
+.chat-container {
+  @apply h-[50vh] sm:h-[60vh] md:h-[70vh] overflow-y-auto;
+}
+
+.chat-input-container {
+  @apply fixed bottom-0 left-0 right-0 sm:relative p-4 bg-white border-t sm:border-t-0;
+}
+
+/* Landscape mode adjustments */
+@media (orientation: landscape) and (max-height: 500px) {
+  .chat-container {
+    height: 40vh;
+  }
+
+  .section-wellness {
+    @apply py-8;
+  }
+}

app/resources/page.tsx

@@ -39,6 +39,7 @@ export default function ResourcesPage() {
   const [activeTab, setActiveTab] = useState('guides');
   const [selectedGuide, setSelectedGuide] = useState<Guide | null>(null);
   const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   const guides: Guide[] = [
     {
@@ -969,13 +970,13 @@ BEST PRACTICES
     <div className="min-h-screen bg-gradient-to-b from-cream-50 to-white">
       {/* Header */}
       <header className="bg-white/80 backdrop-blur-md border-b border-warmgray-100 sticky top-0 z-50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex items-center justify-between h-16">
-            <Link href="/" className="flex items-center space-x-3">
-              <div className="w-10 h-10 bg-gradient-to-br from-teal-500 to-teal-600 rounded-xl flex items-center justify-center shadow-soft">
-                <span className="text-white font-bold text-lg">L</span>
+        <div className="max-w-7xl mx-auto px-3 sm:px-4 lg:px-8">
+          <div className="flex items-center justify-between h-14 sm:h-16">
+            <Link href="/" className="flex items-center space-x-2 sm:space-x-3">
+              <div className="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-teal-500 to-teal-600 rounded-lg sm:rounded-xl flex items-center justify-center shadow-soft">
+                <span className="text-white font-bold text-sm sm:text-lg">LF</span>
               </div>
-              <span className="text-xl font-bold text-warmgray-900">LearnFlow</span>
+              <span className="text-lg sm:text-xl font-bold text-warmgray-900">LearnFlow</span>
             </Link>
 
             <nav className="hidden md:flex items-center space-x-1">
@@ -1000,7 +1001,7 @@ BEST PRACTICES
               ))}
             </nav>
 
-            <div className="flex items-center space-x-3">
+            <div className="hidden md:flex items-center space-x-3">
               <Link href="/register" className="text-warmgray-700 hover:text-teal-700 font-medium text-sm">
                 Sign Up
               </Link>
@@ -1008,43 +1009,86 @@ BEST PRACTICES
                 Login
               </Link>
             </div>
+
+            {/* Mobile menu button */}
+            <button
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              className="md:hidden p-2 rounded-lg text-warmgray-600 hover:bg-teal-50"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                {mobileMenuOpen ? (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                ) : (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                )}
+              </svg>
+            </button>
           </div>
+
+          {/* Mobile menu */}
+          {mobileMenuOpen && (
+            <div className="md:hidden py-4 border-t border-warmgray-100">
+              <div className="flex flex-col space-y-1">
+                {[
+                  { name: 'Home', href: '/' },
+                  { name: 'Courses', href: '/courses' },
+                  { name: 'About', href: '/about' },
+                  { name: 'Resources', href: '/resources' },
+                  { name: 'Contact', href: '/contact' },
+                ].map((item) => (
+                  <Link
+                    key={item.name}
+                    href={item.href}
+                    className={`px-4 py-3 rounded-xl font-medium ${
+                      item.name === 'Resources' ? 'bg-teal-50 text-teal-700' : 'text-warmgray-700 hover:bg-teal-50'
+                    }`}
+                  >
+                    {item.name}
+                  </Link>
+                ))}
+                <div className="pt-4 mt-2 border-t border-warmgray-100 flex flex-col space-y-2">
+                  <Link href="/register" className="text-teal-600 font-medium px-4 py-2">Sign Up</Link>
+                  <Link href="/" className="bg-teal-600 text-white px-4 py-3 rounded-xl text-center font-medium">Login</Link>
+                </div>
+              </div>
+            </div>
+          )}
         </div>
       </header>
 
       {/* Hero Section */}
-      <section className="py-16 px-4">
+      <section className="py-8 sm:py-12 md:py-16 px-4">
         <div className="max-w-4xl mx-auto text-center">
-          <h1 className="text-4xl md:text-5xl font-bold text-warmgray-900 mb-4">
+          <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-warmgray-900 mb-2 sm:mb-4">
             Learning <span className="text-teal-600">Resources</span>
           </h1>
-          <p className="text-lg text-warmgray-600">
+          <p className="text-sm sm:text-base md:text-lg text-warmgray-600 px-2">
             Free guides, cheatsheets, videos, and tools to accelerate your Python learning journey.
           </p>
         </div>
       </section>
 
       {/* Tabs */}
-      <section className="px-4 pb-8">
+      <section className="px-3 sm:px-4 pb-6 sm:pb-8">
         <div className="max-w-6xl mx-auto">
-          <div className="flex flex-wrap justify-center gap-2 bg-white rounded-2xl p-2 shadow-soft">
+          <div className="flex justify-center gap-1 sm:gap-2 bg-white rounded-xl sm:rounded-2xl p-1.5 sm:p-2 shadow-soft overflow-x-auto">
             {[
               { id: 'guides', label: 'Guides', icon: '📖' },
-              { id: 'cheatsheets', label: 'Cheatsheets', icon: '📝' },
+              { id: 'cheatsheets', label: 'Sheets', icon: '📝' },
               { id: 'videos', label: 'Videos', icon: '🎥' },
               { id: 'tools', label: 'Tools', icon: '🛠️' },
             ].map((tab) => (
               <button
                 key={tab.id}
                 onClick={() => setActiveTab(tab.id)}
-                className={`px-6 py-3 rounded-xl font-medium transition-all duration-200 flex items-center gap-2 ${
+                className={`px-3 py-2 sm:px-6 sm:py-3 rounded-lg sm:rounded-xl font-medium transition-all duration-200 flex items-center gap-1 sm:gap-2 text-sm sm:text-base whitespace-nowrap ${
                   activeTab === tab.id
                     ? 'bg-teal-600 text-white shadow-soft'
                     : 'text-warmgray-600 hover:bg-teal-50 hover:text-teal-700'
                 }`}
               >
-                <span>{tab.icon}</span>
-                {tab.label}
+                <span className="text-base sm:text-lg">{tab.icon}</span>
+                <span className="hidden xs:inline sm:inline">{tab.label}</span>
               </button>
             ))}
           </div>
@@ -1052,20 +1096,20 @@ BEST PRACTICES
       </section>
 
       {/* Content */}
-      <section className="px-4 pb-20">
+      <section className="px-3 sm:px-4 pb-12 sm:pb-20">
         <div className="max-w-6xl mx-auto">
           {activeTab === 'guides' && (
-            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
               {guides.map((guide, index) => (
                 <div
                   key={index}
                   onClick={() => setSelectedGuide(guide)}
-                  className="bg-white rounded-2xl p-6 shadow-soft hover:shadow-soft-lg transition-all group cursor-pointer"
+                  className="bg-white rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-soft hover:shadow-soft-lg transition-all group cursor-pointer"
                 >
-                  <div className="text-4xl mb-4">{guide.icon}</div>
-                  <div className="flex items-center gap-2 mb-2">
+                  <div className="text-3xl sm:text-4xl mb-3 sm:mb-4">{guide.icon}</div>
+                  <div className="flex flex-wrap items-center gap-2 mb-2">
                     <span
-                      className={`px-2 py-1 rounded-full text-xs font-medium ${
+                      className={`px-2 py-0.5 sm:py-1 rounded-full text-xs font-medium ${
                         guide.difficulty === 'Beginner'
                           ? 'bg-green-100 text-green-700'
                           : guide.difficulty === 'Intermediate'
@@ -1077,11 +1121,11 @@ BEST PRACTICES
                     </span>
                     <span className="text-warmgray-400 text-xs">{guide.readTime} read</span>
                   </div>
-                  <h3 className="font-semibold text-warmgray-900 mb-2 group-hover:text-teal-600 transition-colors">
+                  <h3 className="font-semibold text-sm sm:text-base text-warmgray-900 mb-1 sm:mb-2 group-hover:text-teal-600 transition-colors">
                     {guide.title}
                   </h3>
-                  <p className="text-sm text-warmgray-600">{guide.description}</p>
-                  <div className="mt-4 text-teal-600 text-sm font-medium flex items-center gap-1">
+                  <p className="text-xs sm:text-sm text-warmgray-600 line-clamp-2">{guide.description}</p>
+                  <div className="mt-3 sm:mt-4 text-teal-600 text-xs sm:text-sm font-medium flex items-center gap-1">
                     Read Guide
                     <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
@@ -1093,19 +1137,19 @@ BEST PRACTICES
           )}
 
           {activeTab === 'cheatsheets' && (
-            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
               {cheatsheets.map((sheet, index) => (
-                <div key={index} className="bg-white rounded-2xl p-6 shadow-soft hover:shadow-soft-lg transition-all group">
-                  <div className="flex items-center justify-between mb-4">
-                    <span className="text-4xl">{sheet.icon}</span>
-                    <span className="text-sm text-warmgray-400">{sheet.downloads} downloads</span>
+                <div key={index} className="bg-white rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-soft hover:shadow-soft-lg transition-all group">
+                  <div className="flex items-center justify-between mb-3 sm:mb-4">
+                    <span className="text-3xl sm:text-4xl">{sheet.icon}</span>
+                    <span className="text-xs sm:text-sm text-warmgray-400">{sheet.downloads} downloads</span>
                   </div>
-                  <h3 className="font-semibold text-warmgray-900 mb-4 group-hover:text-teal-600 transition-colors">
+                  <h3 className="font-semibold text-sm sm:text-base text-warmgray-900 mb-3 sm:mb-4 group-hover:text-teal-600 transition-colors">
                     {sheet.title}
                   </h3>
                   <button
                     onClick={() => downloadCheatsheet(sheet)}
-                    className="w-full bg-teal-50 text-teal-700 py-2.5 rounded-xl font-medium hover:bg-teal-100 transition-colors flex items-center justify-center gap-2"
+                    className="w-full bg-teal-50 text-teal-700 py-2 sm:py-2.5 rounded-lg sm:rounded-xl text-sm font-medium hover:bg-teal-100 transition-colors flex items-center justify-center gap-2"
                   >
                     <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path
@@ -1115,7 +1159,7 @@ BEST PRACTICES
                         d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                       />
                     </svg>
-                    Download Cheatsheet
+                    <span className="hidden xs:inline">Download </span>Cheatsheet
                   </button>
                 </div>
               ))}
@@ -1123,31 +1167,31 @@ BEST PRACTICES
           )}
 
           {activeTab === 'videos' && (
-            <div className="grid md:grid-cols-2 gap-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
               {videos.map((video, index) => (
                 <div
                   key={index}
                   onClick={() => setSelectedVideo(video)}
-                  className="bg-white rounded-2xl overflow-hidden shadow-soft hover:shadow-soft-lg transition-all group cursor-pointer"
+                  className="bg-white rounded-xl sm:rounded-2xl overflow-hidden shadow-soft hover:shadow-soft-lg transition-all group cursor-pointer"
                 >
-                  <div className="bg-gradient-to-br from-teal-500 to-sage-500 h-48 flex items-center justify-center relative">
-                    <span className="text-6xl">{video.thumbnail}</span>
+                  <div className="bg-gradient-to-br from-teal-500 to-sage-500 h-36 sm:h-48 flex items-center justify-center relative">
+                    <span className="text-4xl sm:text-6xl">{video.thumbnail}</span>
                     <div className="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
-                      <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center">
-                        <svg className="w-8 h-8 text-teal-600 ml-1" fill="currentColor" viewBox="0 0 24 24">
+                      <div className="w-12 h-12 sm:w-16 sm:h-16 bg-white rounded-full flex items-center justify-center">
+                        <svg className="w-6 h-6 sm:w-8 sm:h-8 text-teal-600 ml-1" fill="currentColor" viewBox="0 0 24 24">
                           <path d="M8 5v14l11-7z" />
                         </svg>
                       </div>
                     </div>
-                    <span className="absolute bottom-3 right-3 bg-black/70 text-white text-sm px-2 py-1 rounded">
+                    <span className="absolute bottom-2 right-2 sm:bottom-3 sm:right-3 bg-black/70 text-white text-xs sm:text-sm px-2 py-1 rounded">
                       {video.duration}
                     </span>
                   </div>
-                  <div className="p-5">
-                    <h3 className="font-semibold text-warmgray-900 mb-1 group-hover:text-teal-600 transition-colors">
+                  <div className="p-3 sm:p-5">
+                    <h3 className="font-semibold text-sm sm:text-base text-warmgray-900 mb-1 group-hover:text-teal-600 transition-colors line-clamp-1">
                       {video.title}
                     </h3>
-                    <p className="text-sm text-warmgray-500">
+                    <p className="text-xs sm:text-sm text-warmgray-500">
                       {video.channel} • {video.views} views
                     </p>
                   </div>
@@ -1157,24 +1201,24 @@ BEST PRACTICES
           )}
 
           {activeTab === 'tools' && (
-            <div className="grid md:grid-cols-2 gap-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
               {tools.map((tool, index) => (
                 <a
                   key={index}
                   href={tool.url}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="bg-white rounded-2xl p-6 shadow-soft hover:shadow-soft-lg transition-all group flex items-center gap-4"
+                  className="bg-white rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-soft hover:shadow-soft-lg transition-all group flex items-center gap-3 sm:gap-4"
                 >
-                  <div className="text-4xl">{tool.icon}</div>
-                  <div className="flex-1">
-                    <h3 className="font-semibold text-warmgray-900 group-hover:text-teal-600 transition-colors">
+                  <div className="text-3xl sm:text-4xl flex-shrink-0">{tool.icon}</div>
+                  <div className="flex-1 min-w-0">
+                    <h3 className="font-semibold text-sm sm:text-base text-warmgray-900 group-hover:text-teal-600 transition-colors">
                       {tool.name}
                     </h3>
-                    <p className="text-sm text-warmgray-600">{tool.description}</p>
+                    <p className="text-xs sm:text-sm text-warmgray-600 line-clamp-1">{tool.description}</p>
                   </div>
                   <svg
-                    className="w-5 h-5 text-warmgray-400 group-hover:text-teal-600 transition-colors"
+                    className="w-4 h-4 sm:w-5 sm:h-5 text-warmgray-400 group-hover:text-teal-600 transition-colors flex-shrink-0"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -1195,30 +1239,30 @@ BEST PRACTICES
 
       {/* Guide Modal */}
       {selectedGuide && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4" onClick={() => setSelectedGuide(null)}>
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-2 sm:p-4" onClick={() => setSelectedGuide(null)}>
           <div
-            className="bg-white rounded-2xl max-w-3xl w-full max-h-[90vh] overflow-hidden"
+            className="bg-white rounded-xl sm:rounded-2xl max-w-3xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden"
             onClick={(e) => e.stopPropagation()}
           >
-            <div className="p-6 border-b border-warmgray-100 flex items-center justify-between">
-              <div className="flex items-center gap-3">
-                <span className="text-3xl">{selectedGuide.icon}</span>
-                <div>
-                  <h2 className="text-xl font-bold text-warmgray-900">{selectedGuide.title}</h2>
-                  <p className="text-sm text-warmgray-500">{selectedGuide.readTime} read</p>
+            <div className="p-4 sm:p-6 border-b border-warmgray-100 flex items-center justify-between">
+              <div className="flex items-center gap-2 sm:gap-3 flex-1 min-w-0">
+                <span className="text-2xl sm:text-3xl flex-shrink-0">{selectedGuide.icon}</span>
+                <div className="min-w-0">
+                  <h2 className="text-base sm:text-xl font-bold text-warmgray-900 truncate">{selectedGuide.title}</h2>
+                  <p className="text-xs sm:text-sm text-warmgray-500">{selectedGuide.readTime} read</p>
                 </div>
               </div>
               <button
                 onClick={() => setSelectedGuide(null)}
-                className="text-warmgray-400 hover:text-warmgray-600 p-2"
+                className="text-warmgray-400 hover:text-warmgray-600 p-2 flex-shrink-0"
               >
-                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg className="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                 </svg>
               </button>
             </div>
-            <div className="p-6 overflow-y-auto max-h-[calc(90vh-100px)]">
-              <pre className="whitespace-pre-wrap font-mono text-sm text-warmgray-700 leading-relaxed">
+            <div className="p-4 sm:p-6 overflow-y-auto max-h-[calc(95vh-80px)] sm:max-h-[calc(90vh-100px)]">
+              <pre className="whitespace-pre-wrap font-mono text-xs sm:text-sm text-warmgray-700 leading-relaxed">
                 {selectedGuide.content}
               </pre>
             </div>
@@ -1228,26 +1272,26 @@ BEST PRACTICES
 
       {/* Video Modal */}
       {selectedVideo && (
-        <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4" onClick={() => setSelectedVideo(null)}>
+        <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-2 sm:p-4" onClick={() => setSelectedVideo(null)}>
           <div className="w-full max-w-4xl" onClick={(e) => e.stopPropagation()}>
-            <div className="flex justify-between items-center mb-4">
-              <h3 className="text-white font-semibold">{selectedVideo.title}</h3>
-              <button onClick={() => setSelectedVideo(null)} className="text-white hover:text-warmgray-300 p-2">
-                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div className="flex justify-between items-center mb-2 sm:mb-4">
+              <h3 className="text-white font-semibold text-sm sm:text-base line-clamp-1 flex-1 mr-2">{selectedVideo.title}</h3>
+              <button onClick={() => setSelectedVideo(null)} className="text-white hover:text-warmgray-300 p-2 flex-shrink-0">
+                <svg className="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                 </svg>
               </button>
             </div>
             <div className="relative pb-[56.25%] h-0">
               <iframe
-                className="absolute top-0 left-0 w-full h-full rounded-xl"
+                className="absolute top-0 left-0 w-full h-full rounded-lg sm:rounded-xl"
                 src={`https://www.youtube.com/embed/${selectedVideo.youtubeId}?autoplay=1`}
                 title={selectedVideo.title}
                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                 allowFullScreen
               />
             </div>
-            <p className="text-warmgray-400 mt-3 text-sm">
+            <p className="text-warmgray-400 mt-2 sm:mt-3 text-xs sm:text-sm">
               {selectedVideo.channel} • {selectedVideo.views} views
             </p>
           </div>
@@ -1255,13 +1299,13 @@ BEST PRACTICES
       )}
 
       {/* CTA */}
-      <section className="py-16 px-4 bg-gradient-to-r from-teal-600 to-teal-700">
+      <section className="py-10 sm:py-16 px-4 bg-gradient-to-r from-teal-600 to-teal-700">
         <div className="max-w-4xl mx-auto text-center text-white">
-          <h2 className="text-3xl font-bold mb-4">Want More Resources?</h2>
-          <p className="text-teal-100 mb-8">Sign up for free and get access to exclusive learning materials.</p>
+          <h2 className="text-xl sm:text-2xl md:text-3xl font-bold mb-2 sm:mb-4">Want More Resources?</h2>
+          <p className="text-sm sm:text-base text-teal-100 mb-6 sm:mb-8">Sign up for free and get access to exclusive learning materials.</p>
           <Link
             href="/register"
-            className="inline-block bg-white text-teal-700 px-8 py-3 rounded-full font-semibold hover:bg-cream-50 transition-colors shadow-lg"
+            className="inline-block bg-white text-teal-700 px-6 py-2.5 sm:px-8 sm:py-3 rounded-full font-semibold text-sm sm:text-base hover:bg-cream-50 transition-colors shadow-lg"
           >
             Get Started Free
           </Link>

app/student/dashboard/page.tsx

@@ -141,102 +141,122 @@ export default function StudentDashboard() {
       </div>
 
       <div className="relative">
-        <header className="bg-white/80 backdrop-blur-md shadow-lg border-b border-white/20 sticky top-0 z-10">
-          <div className="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">
-            <div className="flex items-center space-x-4">
-              <div className="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
-                <span className="text-white font-bold text-sm">LF</span>
+        {/* Responsive Header */}
+        <header className="bg-white/90 backdrop-blur-md shadow-lg border-b border-white/20 sticky top-0 z-10">
+          <div className="max-w-7xl mx-auto px-3 py-3 sm:px-4 sm:py-4 lg:px-8">
+            <div className="flex justify-between items-center">
+              {/* Logo */}
+              <div className="flex items-center space-x-2 sm:space-x-4">
+                <div className="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center flex-shrink-0">
+                  <span className="text-white font-bold text-xs sm:text-sm">LF</span>
+                </div>
+                <h1 className="text-lg sm:text-xl lg:text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+                  <span className="hidden sm:inline">LearnFlow </span>Dashboard
+                </h1>
               </div>
-              <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-                LearnFlow Dashboard
-              </h1>
-            </div>
 
-            <div className="flex items-center space-x-4">
-              <div className="flex items-center space-x-3 bg-gray-100/50 rounded-full px-4 py-2">
+              {/* Desktop User Menu */}
+              <div className="hidden sm:flex items-center space-x-3 sm:space-x-4">
+                <div className="flex items-center space-x-2 sm:space-x-3 bg-gray-100/50 rounded-full px-3 py-1.5 sm:px-4 sm:py-2">
+                  <div className="w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center">
+                    <span className="text-white text-xs sm:text-sm font-semibold">{user?.name?.charAt(0).toUpperCase() || 'U'}</span>
+                  </div>
+                  <span className="text-gray-700 font-medium text-sm sm:text-base hidden md:inline">{user?.name?.split(' ')[0] || 'User'}</span>
+                </div>
+                <button
+                  onClick={handleLogout}
+                  className="bg-gradient-to-r from-red-500 to-pink-600 hover:from-red-600 hover:to-pink-700 text-white px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg transition-all text-sm sm:text-base"
+                >
+                  Logout
+                </button>
+              </div>
+
+              {/* Mobile User Avatar & Logout */}
+              <div className="flex sm:hidden items-center space-x-2">
                 <div className="w-8 h-8 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center">
                   <span className="text-white text-sm font-semibold">{user?.name?.charAt(0).toUpperCase() || 'U'}</span>
                 </div>
-                <span className="text-gray-700 font-medium">{user?.name?.split(' ')[0] || 'User'}</span>
+                <button
+                  onClick={handleLogout}
+                  className="bg-red-500 text-white p-2 rounded-lg"
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                  </svg>
+                </button>
               </div>
-              <button
-                onClick={handleLogout}
-                className="bg-gradient-to-r from-red-500 to-pink-600 hover:from-red-600 hover:to-pink-700 text-white px-4 py-2 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-md"
-              >
-                Logout
-              </button>
             </div>
           </div>
         </header>
 
-        <main className="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
-          <div className="mb-8">
-            <h2 className="text-3xl font-bold text-gray-800 mb-2">Welcome back, {user?.name?.split(' ')[0] || 'Student'}!</h2>
-            <p className="text-gray-600">Continue your Python learning journey where you left off</p>
+        <main className="max-w-7xl mx-auto px-3 py-4 sm:px-4 sm:py-6 md:px-6 md:py-8 lg:px-8">
+          <div className="mb-4 sm:mb-6 md:mb-8">
+            <h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-gray-800 mb-1 sm:mb-2">Welcome back, {user?.name?.split(' ')[0] || 'Student'}!</h2>
+            <p className="text-sm sm:text-base text-gray-600">Continue your Python learning journey where you left off</p>
           </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6 md:gap-8">
             {/* Progress Overview */}
             <div className="lg:col-span-2">
-              <div className="bg-white/70 backdrop-blur-sm rounded-2xl shadow-xl border border-white/20 p-6 mb-8">
-                <h2 className="text-2xl font-bold text-gray-800 mb-6 flex items-center">
-                  <svg className="w-6 h-6 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <div className="bg-white/70 backdrop-blur-sm rounded-xl sm:rounded-2xl shadow-xl border border-white/20 p-4 sm:p-6 mb-4 sm:mb-6 md:mb-8">
+                <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-gray-800 mb-4 sm:mb-6 flex items-center">
+                  <svg className="w-5 h-5 sm:w-6 sm:h-6 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                   </svg>
                   Your Learning Progress
                 </h2>
 
-                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-                  <div className="bg-gradient-to-br from-blue-100 to-blue-200 p-5 rounded-xl shadow-md border border-white/50">
+                <div className="grid grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-3 md:gap-4 mb-4 sm:mb-6 md:mb-8">
+                  <div className="bg-gradient-to-br from-blue-100 to-blue-200 p-3 sm:p-4 md:p-5 rounded-lg sm:rounded-xl shadow-md border border-white/50">
                     <div className="flex items-center justify-between">
                       <div>
-                        <p className="text-sm font-semibold text-blue-800">Overall Mastery</p>
-                        <p className="text-3xl font-bold text-blue-600 mt-1">72%</p>
+                        <p className="text-xs sm:text-sm font-semibold text-blue-800">Overall Mastery</p>
+                        <p className="text-xl sm:text-2xl md:text-3xl font-bold text-blue-600 mt-0.5 sm:mt-1">72%</p>
                       </div>
-                      <div className="w-12 h-12 bg-blue-500/20 rounded-full flex items-center justify-center">
-                        <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 bg-blue-500/20 rounded-full flex items-center justify-center flex-shrink-0">
+                        <svg className="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
                         </svg>
                       </div>
                     </div>
                   </div>
 
-                  <div className="bg-gradient-to-br from-green-100 to-green-200 p-5 rounded-xl shadow-md border border-white/50">
+                  <div className="bg-gradient-to-br from-green-100 to-green-200 p-3 sm:p-4 md:p-5 rounded-lg sm:rounded-xl shadow-md border border-white/50">
                     <div className="flex items-center justify-between">
                       <div>
-                        <p className="text-sm font-semibold text-green-800">Modules Completed</p>
-                        <p className="text-3xl font-bold text-green-600 mt-1">2/8</p>
+                        <p className="text-xs sm:text-sm font-semibold text-green-800">Modules Completed</p>
+                        <p className="text-xl sm:text-2xl md:text-3xl font-bold text-green-600 mt-0.5 sm:mt-1">2/8</p>
                       </div>
-                      <div className="w-12 h-12 bg-green-500/20 rounded-full flex items-center justify-center">
-                        <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 bg-green-500/20 rounded-full flex items-center justify-center flex-shrink-0">
+                        <svg className="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                         </svg>
                       </div>
                     </div>
                   </div>
 
-                  <div className="bg-gradient-to-br from-yellow-100 to-yellow-200 p-5 rounded-xl shadow-md border border-white/50">
+                  <div className="bg-gradient-to-br from-yellow-100 to-yellow-200 p-3 sm:p-4 md:p-5 rounded-lg sm:rounded-xl shadow-md border border-white/50">
                     <div className="flex items-center justify-between">
                       <div>
-                        <p className="text-sm font-semibold text-yellow-800">Current Streak</p>
-                        <p className="text-3xl font-bold text-yellow-600 mt-1">5 days</p>
+                        <p className="text-xs sm:text-sm font-semibold text-yellow-800">Current Streak</p>
+                        <p className="text-xl sm:text-2xl md:text-3xl font-bold text-yellow-600 mt-0.5 sm:mt-1">5 days</p>
                       </div>
-                      <div className="w-12 h-12 bg-yellow-500/20 rounded-full flex items-center justify-center">
-                        <svg className="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 bg-yellow-500/20 rounded-full flex items-center justify-center flex-shrink-0">
+                        <svg className="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
                         </svg>
                       </div>
                     </div>
                   </div>
 
-                  <div className="bg-gradient-to-br from-purple-100 to-purple-200 p-5 rounded-xl shadow-md border border-white/50">
+                  <div className="bg-gradient-to-br from-purple-100 to-purple-200 p-3 sm:p-4 md:p-5 rounded-lg sm:rounded-xl shadow-md border border-white/50">
                     <div className="flex items-center justify-between">
                       <div>
-                        <p className="text-sm font-semibold text-purple-800">Hours Learned</p>
-                        <p className="text-3xl font-bold text-purple-600 mt-1">24</p>
+                        <p className="text-xs sm:text-sm font-semibold text-purple-800">Hours Learned</p>
+                        <p className="text-xl sm:text-2xl md:text-3xl font-bold text-purple-600 mt-0.5 sm:mt-1">24</p>
                       </div>
-                      <div className="w-12 h-12 bg-purple-500/20 rounded-full flex items-center justify-center">
-                        <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 bg-purple-500/20 rounded-full flex items-center justify-center flex-shrink-0">
+                        <svg className="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                         </svg>
                       </div>
@@ -244,18 +264,18 @@ export default function StudentDashboard() {
                   </div>
                 </div>
 
-                <h3 className="text-xl font-semibold text-gray-800 mb-4 flex items-center">
-                  <svg className="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <h3 className="text-base sm:text-lg md:text-xl font-semibold text-gray-800 mb-3 sm:mb-4 flex items-center">
+                  <svg className="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                   </svg>
                   Learning Modules
                 </h3>
 
-                <div className="space-y-4">
+                <div className="space-y-3 sm:space-y-4">
                   {modules.map((module) => (
                     <div
                       key={module.id}
-                      className={`bg-white/50 backdrop-blur-sm rounded-xl p-5 border transition-all duration-300 hover:shadow-lg ${
+                      className={`bg-white/50 backdrop-blur-sm rounded-lg sm:rounded-xl p-3 sm:p-4 md:p-5 border transition-all duration-300 hover:shadow-lg ${
                         module.status === 'locked'
                           ? 'opacity-60 border-gray-200'
                           : module.status === 'in-progress'
@@ -263,37 +283,39 @@ export default function StudentDashboard() {
                             : 'border-green-200 shadow-md'
                       }`}
                     >
-                      <div className="flex justify-between items-start">
+                      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3 sm:gap-0">
                         <div className="flex-1">
-                          <div className="flex items-center mb-2">
-                            <h4 className="font-bold text-lg text-gray-800">{module.name}</h4>
+                          <div className="flex flex-wrap items-center gap-2 mb-2">
+                            <h4 className="font-bold text-sm sm:text-base md:text-lg text-gray-800">{module.name}</h4>
                             {module.status === 'completed' && (
-                              <span className="ml-3 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                              <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                 <svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                                 </svg>
-                                Completed
+                                <span className="hidden xs:inline">Completed</span>
+                                <span className="xs:hidden">Done</span>
                               </span>
                             )}
                             {module.status === 'in-progress' && (
-                              <span className="ml-3 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                              <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                 <svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                 </svg>
-                                In Progress
+                                <span className="hidden xs:inline">In Progress</span>
+                                <span className="xs:hidden">Active</span>
                               </span>
                             )}
                           </div>
-                          <p className="text-gray-600 text-sm mb-3">{module.description}</p>
+                          <p className="text-gray-600 text-xs sm:text-sm mb-2 sm:mb-3 line-clamp-2">{module.description}</p>
 
-                          <div className="flex items-center justify-between mb-2">
-                            <span className="text-sm font-medium text-gray-700">Progress: {module.progress}%</span>
-                            <span className="text-sm font-medium text-gray-700">Mastery: {module.masteryLevel}%</span>
+                          <div className="flex items-center justify-between mb-1 sm:mb-2 text-xs sm:text-sm">
+                            <span className="font-medium text-gray-700">Progress: {module.progress}%</span>
+                            <span className="font-medium text-gray-700">Mastery: {module.masteryLevel}%</span>
                           </div>
 
-                          <div className="w-full bg-gray-200 rounded-full h-2.5 mb-2">
+                          <div className="w-full bg-gray-200 rounded-full h-2 mb-2">
                             <div
-                              className={`h-2.5 rounded-full ${
+                              className={`h-2 rounded-full ${
                                 module.status === 'completed' ? 'bg-green-500' :
                                 module.status === 'in-progress' ? 'bg-blue-500' : 'bg-gray-400'
                               }`}
@@ -304,7 +326,7 @@ export default function StudentDashboard() {
 
                         <Link
                           href={`/student/learn?module=${module.id}`}
-                          className={`ml-4 px-4 py-2 rounded-lg font-medium transition-all duration-300 transform hover:scale-105 ${
+                          className={`w-full sm:w-auto sm:ml-4 px-3 sm:px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 transform hover:scale-105 text-center ${
                             module.status === 'locked'
                               ? 'bg-gray-300 text-gray-500 cursor-not-allowed'
                               : module.status === 'completed'
@@ -320,8 +342,8 @@ export default function StudentDashboard() {
                         </Link>
                       </div>
 
-                      <div className="mt-3 flex items-center">
-                        <span className={`text-xs px-3 py-1 rounded-full font-medium ${
+                      <div className="mt-2 sm:mt-3 flex items-center">
+                        <span className={`text-xs px-2 sm:px-3 py-1 rounded-full font-medium ${
                           module.masteryLevel >= 90 ? 'bg-gradient-to-r from-blue-100 to-blue-200 text-blue-800' :
                           module.masteryLevel >= 70 ? 'bg-gradient-to-r from-green-100 to-green-200 text-green-800' :
                           module.masteryLevel >= 40 ? 'bg-gradient-to-r from-yellow-100 to-yellow-200 text-yellow-800' :
@@ -339,36 +361,36 @@ export default function StudentDashboard() {
             </div>
 
             {/* Sidebar */}
-            <div className="space-y-6">
+            <div className="space-y-4 sm:space-y-6">
               {/* Recent Activity */}
-              <div className="bg-white/70 backdrop-blur-sm rounded-2xl shadow-xl border border-white/20 p-6">
-                <h3 className="text-xl font-bold text-gray-800 mb-4 flex items-center">
-                  <svg className="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <div className="bg-white/70 backdrop-blur-sm rounded-xl sm:rounded-2xl shadow-xl border border-white/20 p-4 sm:p-6">
+                <h3 className="text-base sm:text-lg md:text-xl font-bold text-gray-800 mb-3 sm:mb-4 flex items-center">
+                  <svg className="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                   </svg>
                   Recent Activity
                 </h3>
-                <ul className="space-y-4">
+                <ul className="space-y-3 sm:space-y-4">
                   {recentActivities.map((activity) => (
-                    <li key={activity.id} className="border-b border-gray-100 pb-4 last:border-0 last:pb-0">
+                    <li key={activity.id} className="border-b border-gray-100 pb-3 sm:pb-4 last:border-0 last:pb-0">
                       <div className="flex items-start">
-                        <div className="flex-shrink-0 mt-1">
-                          <div className="w-8 h-8 bg-gradient-to-r from-blue-100 to-purple-100 rounded-full flex items-center justify-center">
-                            <svg className="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <div className="flex-shrink-0 mt-0.5">
+                          <div className="w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-r from-blue-100 to-purple-100 rounded-full flex items-center justify-center">
+                            <svg className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                             </svg>
                           </div>
                         </div>
-                        <div className="ml-3">
-                          <p className="text-sm font-medium text-gray-800">{activity.activity}</p>
-                          <p className="text-xs text-gray-500 mt-1">{activity.timestamp}</p>
+                        <div className="ml-2 sm:ml-3 flex-1 min-w-0">
+                          <p className="text-xs sm:text-sm font-medium text-gray-800 line-clamp-2">{activity.activity}</p>
+                          <p className="text-xs text-gray-500 mt-0.5 sm:mt-1">{activity.timestamp}</p>
                           {activity.score && (
-                            <span className="inline-block mt-1 px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">
+                            <span className="inline-block mt-1 px-2 py-0.5 text-xs bg-green-100 text-green-800 rounded-full">
                               Score: {activity.score}%
                             </span>
                           )}
                           {activity.result && (
-                            <span className="inline-block mt-1 px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">
+                            <span className="inline-block mt-1 px-2 py-0.5 text-xs bg-blue-100 text-blue-800 rounded-full">
                               {activity.result}
                             </span>
                           )}
@@ -380,23 +402,23 @@ export default function StudentDashboard() {
               </div>
 
               {/* Continue Learning */}
-              <div className="bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl shadow-xl p-6 text-white">
-                <h3 className="text-xl font-bold mb-4 flex items-center">
-                  <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <div className="bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl sm:rounded-2xl shadow-xl p-4 sm:p-6 text-white">
+                <h3 className="text-base sm:text-lg md:text-xl font-bold mb-3 sm:mb-4 flex items-center">
+                  <svg className="w-4 h-4 sm:w-5 sm:h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                   </svg>
                   Continue Learning
                 </h3>
-                <div className="bg-white/20 backdrop-blur-sm rounded-xl p-4 mb-4">
-                  <p className="font-semibold">Control Flow Module</p>
-                  <p className="text-sm opacity-90 mt-1">75% complete • 65% mastery</p>
-                  <div className="w-full bg-white/30 rounded-full h-2 mt-3">
-                    <div className="bg-white h-2 rounded-full" style={{ width: '75%' }}></div>
+                <div className="bg-white/20 backdrop-blur-sm rounded-lg sm:rounded-xl p-3 sm:p-4 mb-3 sm:mb-4">
+                  <p className="font-semibold text-sm sm:text-base">Control Flow Module</p>
+                  <p className="text-xs sm:text-sm opacity-90 mt-1">75% complete • 65% mastery</p>
+                  <div className="w-full bg-white/30 rounded-full h-1.5 sm:h-2 mt-2 sm:mt-3">
+                    <div className="bg-white h-1.5 sm:h-2 rounded-full" style={{ width: '75%' }}></div>
                   </div>
                 </div>
                 <Link
                   href="/student/learn?module=mod2"
-                  className="w-full bg-white text-blue-600 hover:bg-gray-100 font-semibold py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 block text-center"
+                  className="w-full bg-white text-blue-600 hover:bg-gray-100 font-semibold py-2.5 sm:py-3 px-4 rounded-lg text-sm sm:text-base transition-all duration-300 transform hover:scale-105 block text-center"
                   prefetch={false}
                 >
                   Continue Learning
@@ -404,51 +426,51 @@ export default function StudentDashboard() {
               </div>
 
               {/* Quick Actions */}
-              <div className="bg-white/70 backdrop-blur-sm rounded-2xl shadow-xl border border-white/20 p-6">
-                <h3 className="text-xl font-bold text-gray-800 mb-4 flex items-center">
-                  <svg className="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <div className="bg-white/70 backdrop-blur-sm rounded-xl sm:rounded-2xl shadow-xl border border-white/20 p-4 sm:p-6">
+                <h3 className="text-base sm:text-lg md:text-xl font-bold text-gray-800 mb-3 sm:mb-4 flex items-center">
+                  <svg className="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                   </svg>
                   Quick Actions
                 </h3>
-                <div className="space-y-3">
+                <div className="space-y-2 sm:space-y-3">
                   <Link
                     href="/student/quiz"
-                    className="flex items-center p-4 bg-gradient-to-r from-gray-50 to-gray-100 hover:from-blue-50 hover:to-purple-50 rounded-xl transition-all duration-300 transform hover:scale-[1.02] border border-gray-100 hover:border-blue-200"
+                    className="flex items-center p-3 sm:p-4 bg-gradient-to-r from-gray-50 to-gray-100 hover:from-blue-50 hover:to-purple-50 rounded-lg sm:rounded-xl transition-all duration-300 transform hover:scale-[1.02] border border-gray-100 hover:border-blue-200"
                     prefetch={false}
                   >
-                    <div className="w-10 h-10 bg-gradient-to-r from-blue-100 to-blue-200 rounded-lg flex items-center justify-center mr-3">
-                      <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-r from-blue-100 to-blue-200 rounded-lg flex items-center justify-center mr-2 sm:mr-3 flex-shrink-0">
+                      <svg className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                       </svg>
                     </div>
-                    <span className="font-medium text-gray-800">Take a Quiz</span>
+                    <span className="font-medium text-sm sm:text-base text-gray-800">Take a Quiz</span>
                   </Link>
 
                   <Link
                     href="/student/progress"
-                    className="flex items-center p-4 bg-gradient-to-r from-gray-50 to-gray-100 hover:from-green-50 hover:to-teal-50 rounded-xl transition-all duration-300 transform hover:scale-[1.02] border border-gray-100 hover:border-green-200"
+                    className="flex items-center p-3 sm:p-4 bg-gradient-to-r from-gray-50 to-gray-100 hover:from-green-50 hover:to-teal-50 rounded-lg sm:rounded-xl transition-all duration-300 transform hover:scale-[1.02] border border-gray-100 hover:border-green-200"
                     prefetch={false}
                   >
-                    <div className="w-10 h-10 bg-gradient-to-r from-green-100 to-green-200 rounded-lg flex items-center justify-center mr-3">
-                      <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-r from-green-100 to-green-200 rounded-lg flex items-center justify-center mr-2 sm:mr-3 flex-shrink-0">
+                      <svg className="w-4 h-4 sm:w-5 sm:h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                       </svg>
                     </div>
-                    <span className="font-medium text-gray-800">View Progress</span>
+                    <span className="font-medium text-sm sm:text-base text-gray-800">View Progress</span>
                   </Link>
 
                   <Link
                     href="/student/chat"
-                    className="flex items-center p-4 bg-gradient-to-r from-gray-50 to-gray-100 hover:from-purple-50 hover:to-pink-50 rounded-xl transition-all duration-300 transform hover:scale-[1.02] border border-gray-100 hover:border-purple-200"
+                    className="flex items-center p-3 sm:p-4 bg-gradient-to-r from-gray-50 to-gray-100 hover:from-purple-50 hover:to-pink-50 rounded-lg sm:rounded-xl transition-all duration-300 transform hover:scale-[1.02] border border-gray-100 hover:border-purple-200"
                     prefetch={false}
                   >
-                    <div className="w-10 h-10 bg-gradient-to-r from-purple-100 to-purple-200 rounded-lg flex items-center justify-center mr-3">
-                      <svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-r from-purple-100 to-purple-200 rounded-lg flex items-center justify-center mr-2 sm:mr-3 flex-shrink-0">
+                      <svg className="w-4 h-4 sm:w-5 sm:h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                       </svg>
                     </div>
-                    <span className="font-medium text-gray-800">Chat with Tutor</span>
+                    <span className="font-medium text-sm sm:text-base text-gray-800">Chat with Tutor</span>
                   </Link>
                 </div>
               </div>

app/student/learn/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useRef, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import dynamic from 'next/dynamic';
+import Link from 'next/link';
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
 
@@ -27,7 +28,15 @@ export default function LearnPage() {
     { role: 'assistant', content: 'Hello! I\'m your Python tutor. What would you like to learn today?' }
   ]);
   const [inputMessage, setInputMessage] = useState<string>('');
+  const [activeTab, setActiveTab] = useState<'chat' | 'code'>('chat');
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const editorRef = useRef<any>(null);
+  const chatEndRef = useRef<HTMLDivElement>(null);
+
+  // Auto scroll to bottom of chat
+  useEffect(() => {
+    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
 
   const handleRunCode = async () => {
     setIsLoading(true);
@@ -52,11 +61,9 @@ export default function LearnPage() {
           setOutput(data.output || 'Code executed successfully (no output)');
         }
       } else {
-        // Fallback: simulate execution for demo
         simulateExecution();
       }
     } catch (error) {
-      // API not available, simulate execution
       console.log('Using simulated execution (API not available)');
       simulateExecution();
     }
@@ -65,7 +72,6 @@ export default function LearnPage() {
   };
 
   const simulateExecution = () => {
-    // Simple Python simulation for common operations
     const lines = code.split('\n');
     let output = '';
 
@@ -75,7 +81,6 @@ export default function LearnPage() {
         const match = trimmed.match(/print\((.*)\)/);
         if (match) {
           let content = match[1];
-          // Handle string literals
           if ((content.startsWith('"') && content.endsWith('"')) ||
               (content.startsWith("'") && content.endsWith("'"))) {
             output += content.slice(1, -1) + '\n';
@@ -110,18 +115,12 @@ for i in range(5):
 fruits = ['apple', 'banana', 'cherry']
 for fruit in fruits:
     print(fruit)
-
-# Loop with enumerate (get index too)
-for index, fruit in enumerate(fruits):
-    print(f"{index}: {fruit}")
 \`\`\`
 
 **Key points:**
 - \`range(n)\` generates numbers 0 to n-1
 - Use \`break\` to exit early
-- Use \`continue\` to skip to next iteration
-
-Would you like me to explain more or try it in the code editor?`;
+- Use \`continue\` to skip to next iteration`;
     }
 
     if (lowerQuestion.includes('function') || lowerQuestion.includes('def')) {
@@ -130,21 +129,12 @@ Would you like me to explain more or try it in the code editor?`;
 Functions are reusable blocks of code:
 
 \`\`\`python
-# Basic function
 def greet(name):
     return f"Hello, {name}!"
 
-# With default parameter
-def greet(name, greeting="Hello"):
-    return f"{greeting}, {name}!"
-
-# Multiple return values
-def get_stats(numbers):
-    return min(numbers), max(numbers)
-
 # Calling functions
 message = greet("Alice")
-minimum, maximum = get_stats([1, 2, 3, 4, 5])
+print(message)  # Hello, Alice!
 \`\`\`
 
 Try writing a function in the code editor!`;
@@ -156,22 +146,9 @@ Try writing a function in the code editor!`;
 Lists are ordered, mutable collections:
 
 \`\`\`python
-# Create a list
 numbers = [1, 2, 3, 4, 5]
-mixed = [1, "hello", 3.14, True]
-
-# Access elements
-first = numbers[0]      # 1
-last = numbers[-1]      # 5
-
-# Modify lists
-numbers.append(6)       # Add to end
-numbers.insert(0, 0)    # Insert at index
-numbers.remove(3)       # Remove value
-
-# List comprehension
-squares = [x**2 for x in range(5)]
-# Result: [0, 1, 4, 9, 16]
+numbers.append(6)
+print(numbers)  # [1, 2, 3, 4, 5, 6]
 \`\`\`
 
 Try creating a list in the code editor!`;
@@ -180,8 +157,6 @@ Try creating a list in the code editor!`;
     if (lowerQuestion.includes('if') || lowerQuestion.includes('condition')) {
       return `**If Statements in Python**
 
-Control flow with conditions:
-
 \`\`\`python
 age = 18
 
@@ -191,16 +166,9 @@ elif age < 20:
     print("Teenager")
 else:
     print("Adult")
-
-# One-line conditional
-status = "Adult" if age >= 18 else "Minor"
-
-# Multiple conditions
-if age >= 18 and has_license:
-    print("Can drive")
 \`\`\`
 
-Try writing an if statement in the code editor!`;
+Try writing an if statement!`;
     }
 
     return `Great question about "${question}"!
@@ -209,9 +177,8 @@ I'm your Python AI tutor. I can help you with:
 - **Python syntax** - variables, operators, data types
 - **Control flow** - if/else, loops, functions
 - **Data structures** - lists, dictionaries, tuples
-- **Code debugging** - finding and fixing errors
 
-Try asking about a specific topic, or write some code in the editor and I'll help you understand it!`;
+Try asking about a specific topic!`;
   };
 
   const handleSendMessage = async () => {
@@ -248,14 +215,12 @@ Try asking about a specific topic, or write some code in the editor and I'll hel
           content: data.response
         }]);
       } else {
-        // Fallback to local response
         setMessages(prev => [...prev, {
           role: 'assistant',
           content: generateLocalResponse(currentInput)
         }]);
       }
     } catch (error) {
-      // API not available, use local response
       console.log('Using local response (API not available)');
       setMessages(prev => [...prev, {
         role: 'assistant',
@@ -272,230 +237,298 @@ Try asking about a specific topic, or write some code in the editor and I'll hel
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
-      {/* Animated background elements */}
-      <div className="absolute inset-0 overflow-hidden">
+      {/* Animated background - hidden on mobile for performance */}
+      <div className="hidden sm:block absolute inset-0 overflow-hidden pointer-events-none">
         <div className="absolute -top-40 -right-40 w-80 h-80 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
-        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse animation-delay-2000"></div>
+        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
       </div>
 
       <div className="relative">
-        <header className="bg-white/80 backdrop-blur-md shadow-lg border-b border-white/20 sticky top-0 z-10">
-          <div className="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8">
+        {/* Responsive Header */}
+        <header className="bg-white/90 backdrop-blur-md shadow-lg border-b border-white/20 sticky top-0 z-20">
+          <div className="max-w-7xl mx-auto px-3 py-3 sm:px-4 sm:py-4 lg:px-8">
             <div className="flex items-center justify-between">
-              <div>
-                <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-                  Python Learning Studio
-                </h1>
-                <p className="text-gray-600 mt-1">Interactive coding with AI-powered tutoring</p>
+              {/* Logo & Title */}
+              <div className="flex items-center min-w-0">
+                <Link href="/student/dashboard" className="flex items-center">
+                  <div className="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center flex-shrink-0">
+                    <span className="text-white font-bold text-sm sm:text-lg">PY</span>
+                  </div>
+                  <div className="ml-2 sm:ml-3 hidden xs:block">
+                    <h1 className="text-lg sm:text-xl lg:text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate">
+                      Python Studio
+                    </h1>
+                    <p className="text-xs sm:text-sm text-gray-500 hidden sm:block">AI-powered tutoring</p>
+                  </div>
+                </Link>
               </div>
-              <div className="flex items-center space-x-4">
-                <div className="bg-gradient-to-r from-blue-100 to-purple-100 rounded-lg px-4 py-2">
-                  <span className="text-sm font-medium text-gray-700">Module: Control Flow</span>
+
+              {/* Desktop Navigation */}
+              <div className="hidden md:flex items-center space-x-3">
+                <div className="bg-gradient-to-r from-blue-100 to-purple-100 rounded-lg px-3 py-1.5">
+                  <span className="text-xs sm:text-sm font-medium text-gray-700">Module: Basics</span>
                 </div>
-                <div className="w-10 h-10 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center">
-                  <span className="text-white font-bold text-sm">A</span>
+                <Link href="/student/dashboard" className="text-gray-600 hover:text-blue-600 px-3 py-2 text-sm">
+                  Dashboard
+                </Link>
+                <div className="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center">
+                  <span className="text-white font-bold text-xs sm:text-sm">A</span>
                 </div>
               </div>
+
+              {/* Mobile Menu Button */}
+              <button
+                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+                className="md:hidden p-2 rounded-lg hover:bg-gray-100"
+              >
+                <svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  {mobileMenuOpen ? (
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  ) : (
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                  )}
+                </svg>
+              </button>
             </div>
+
+            {/* Mobile Menu */}
+            {mobileMenuOpen && (
+              <div className="md:hidden mt-3 pt-3 border-t border-gray-200">
+                <div className="flex flex-col space-y-2">
+                  <Link href="/student/dashboard" className="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-lg hover:bg-gray-100">
+                    Dashboard
+                  </Link>
+                  <Link href="/resources" className="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-lg hover:bg-gray-100">
+                    Resources
+                  </Link>
+                  <div className="px-3 py-2 bg-blue-50 rounded-lg">
+                    <span className="text-sm text-blue-700">Module: Python Basics</span>
+                  </div>
+                </div>
+              </div>
+            )}
           </div>
         </header>
 
-        <main className="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
+        {/* Mobile Tab Switcher */}
+        <div className="lg:hidden sticky top-[57px] sm:top-[65px] z-10 bg-white/90 backdrop-blur-md border-b border-gray-200 px-3 py-2">
+          <div className="flex space-x-2">
+            <button
+              onClick={() => setActiveTab('chat')}
+              className={`flex-1 py-2.5 px-4 rounded-xl font-medium text-sm transition-all ${
+                activeTab === 'chat'
+                  ? 'bg-blue-600 text-white shadow-md'
+                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+              }`}
+            >
+              <span className="flex items-center justify-center">
+                <svg className="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+                </svg>
+                AI Tutor
+              </span>
+            </button>
+            <button
+              onClick={() => setActiveTab('code')}
+              className={`flex-1 py-2.5 px-4 rounded-xl font-medium text-sm transition-all ${
+                activeTab === 'code'
+                  ? 'bg-green-600 text-white shadow-md'
+                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+              }`}
+            >
+              <span className="flex items-center justify-center">
+                <svg className="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+                </svg>
+                Code Editor
+              </span>
+            </button>
+          </div>
+        </div>
+
+        <main className="max-w-7xl mx-auto px-3 py-4 sm:px-4 sm:py-6 lg:px-8 lg:py-8">
+          {/* Main Content Grid - Side by side on desktop, tabs on mobile */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 lg:gap-8 mb-6 sm:mb-8">
+
             {/* Chat Interface */}
-            <div className="bg-white/70 backdrop-blur-sm rounded-2xl shadow-xl border border-white/20 overflow-hidden">
-              <div className="p-6 border-b border-white/20">
-                <div className="flex items-center">
-                  <div className="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
-                  <h2 className="text-xl font-bold text-gray-800 flex items-center">
-                    <svg className="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-                    </svg>
-                    AI Tutor Chat
-                  </h2>
+            <div className={`${activeTab === 'chat' ? 'block' : 'hidden'} lg:block`}>
+              <div className="bg-white/80 backdrop-blur-sm rounded-xl sm:rounded-2xl shadow-xl border border-white/20 overflow-hidden h-[calc(100vh-200px)] sm:h-[calc(100vh-220px)] lg:h-auto flex flex-col">
+                {/* Chat Header */}
+                <div className="p-3 sm:p-4 lg:p-6 border-b border-gray-100 flex-shrink-0">
+                  <div className="flex items-center">
+                    <div className="w-2.5 h-2.5 sm:w-3 sm:h-3 bg-green-500 rounded-full mr-2 animate-pulse"></div>
+                    <h2 className="text-base sm:text-lg lg:text-xl font-bold text-gray-800 flex items-center">
+                      <svg className="w-4 h-4 sm:w-5 sm:h-5 mr-1.5 sm:mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+                      </svg>
+                      AI Tutor Chat
+                    </h2>
+                  </div>
                 </div>
-              </div>
 
-              <div className="h-96 overflow-y-auto p-6 bg-gradient-to-b from-gray-50 to-gray-100">
-                {messages.map((msg, index) => (
-                  <div
-                    key={index}
-                    className={`mb-4 p-4 rounded-2xl max-w-[85%] ${
-                      msg.role === 'user'
-                        ? 'ml-auto bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg'
-                        : 'mr-auto bg-gradient-to-r from-green-100 to-blue-100 text-gray-800 shadow-md'
-                    }`}
-                  >
-                    <div className="flex items-start">
-                      {msg.role === 'assistant' && (
-                        <div className="w-6 h-6 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center mr-2 flex-shrink-0">
-                          <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
-                          </svg>
+                {/* Chat Messages */}
+                <div className="flex-1 overflow-y-auto p-3 sm:p-4 lg:p-6 bg-gradient-to-b from-gray-50 to-gray-100 lg:h-80">
+                  {messages.map((msg, index) => (
+                    <div
+                      key={index}
+                      className={`mb-3 sm:mb-4 p-3 sm:p-4 rounded-xl sm:rounded-2xl max-w-[90%] sm:max-w-[85%] ${
+                        msg.role === 'user'
+                          ? 'ml-auto bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg'
+                          : 'mr-auto bg-white text-gray-800 shadow-md border border-gray-100'
+                      }`}
+                    >
+                      <div className="flex items-start">
+                        {msg.role === 'assistant' && (
+                          <div className="w-5 h-5 sm:w-6 sm:h-6 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center mr-2 flex-shrink-0">
+                            <svg className="w-2.5 h-2.5 sm:w-3 sm:h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+                            </svg>
+                          </div>
+                        )}
+                        <div className={`text-sm sm:text-base whitespace-pre-wrap ${msg.role === 'user' ? 'text-white' : 'text-gray-800'}`}>
+                          {msg.content}
                         </div>
-                      )}
-                      <div className={`${msg.role === 'user' ? 'text-white' : 'text-gray-800'}`}>
-                        {msg.content}
                       </div>
                     </div>
+                  ))}
+                  <div ref={chatEndRef} />
+                </div>
+
+                {/* Chat Input */}
+                <div className="p-3 sm:p-4 border-t border-gray-100 bg-white flex-shrink-0">
+                  <div className="flex space-x-2">
+                    <input
+                      type="text"
+                      value={inputMessage}
+                      onChange={(e) => setInputMessage(e.target.value)}
+                      onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
+                      placeholder="Ask a Python question..."
+                      className="flex-1 bg-gray-50 border border-gray-200 rounded-xl px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                    />
+                    <button
+                      onClick={handleSendMessage}
+                      disabled={isSending || !inputMessage.trim()}
+                      className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-4 sm:px-6 py-2.5 sm:py-3 rounded-xl disabled:opacity-50 disabled:cursor-not-allowed transition-all font-medium text-sm sm:text-base flex items-center"
+                    >
+                      {isSending ? (
+                        <svg className="animate-spin w-4 h-4 sm:w-5 sm:h-5" fill="none" viewBox="0 0 24 24">
+                          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                      ) : (
+                        <svg className="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+                        </svg>
+                      )}
+                      <span className="ml-1.5 hidden sm:inline">{isSending ? 'Sending...' : 'Send'}</span>
+                    </button>
                   </div>
-                ))}
+                </div>
               </div>
+            </div>
 
-              <div className="p-4 border-t border-white/20 bg-white/50">
-                <div className="flex">
-                  <input
-                    type="text"
-                    value={inputMessage}
-                    onChange={(e) => setInputMessage(e.target.value)}
-                    onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
-                    placeholder="Ask a Python question..."
-                    className="flex-1 bg-white/80 backdrop-blur-sm border border-gray-200 rounded-l-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
-                  />
-                  <button
-                    onClick={handleSendMessage}
-                    disabled={isSending || !inputMessage.trim()}
-                    className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-6 py-3 rounded-r-xl disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 transform hover:scale-105 font-medium"
-                  >
-                    <div className="flex items-center">
-                      {isSending ? (
+            {/* Code Editor */}
+            <div className={`${activeTab === 'code' ? 'block' : 'hidden'} lg:block`}>
+              <div className="bg-white/80 backdrop-blur-sm rounded-xl sm:rounded-2xl shadow-xl border border-white/20 overflow-hidden h-[calc(100vh-200px)] sm:h-[calc(100vh-220px)] lg:h-auto flex flex-col">
+                {/* Editor Header */}
+                <div className="p-3 sm:p-4 lg:p-5 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-gray-100 flex-shrink-0">
+                  <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 sm:gap-0">
+                    <h2 className="text-base sm:text-lg lg:text-xl font-bold text-gray-800 flex items-center">
+                      <svg className="w-4 h-4 sm:w-5 sm:h-5 mr-1.5 sm:mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+                      </svg>
+                      Python Editor
+                    </h2>
+                    <button
+                      onClick={handleRunCode}
+                      disabled={isLoading}
+                      className="bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white px-4 sm:px-6 py-2 sm:py-2.5 rounded-lg sm:rounded-xl disabled:opacity-50 transition-all font-medium text-sm sm:text-base flex items-center justify-center"
+                    >
+                      {isLoading ? (
                         <>
-                          <svg className="animate-spin w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24">
+                          <svg className="animate-spin w-4 h-4 mr-1.5" fill="none" viewBox="0 0 24 24">
                             <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                             <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                           </svg>
-                          Thinking...
+                          Running...
                         </>
                       ) : (
                         <>
-                          <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+                          <svg className="w-4 h-4 mr-1.5" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M8 5v14l11-7z" />
                           </svg>
-                          Send
+                          Run Code
                         </>
                       )}
-                    </div>
-                  </button>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </div>
 
-            {/* Code Editor */}
-            <div className="bg-white/70 backdrop-blur-sm rounded-2xl shadow-xl border border-white/20 overflow-hidden">
-              <div className="p-5 border-b border-white/20 bg-gradient-to-r from-gray-50 to-gray-100">
-                <div className="flex justify-between items-center">
-                  <h2 className="text-xl font-bold text-gray-800 flex items-center">
-                    <svg className="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
-                    </svg>
-                    Python Code Editor
-                  </h2>
-                  <button
-                    onClick={handleRunCode}
-                    disabled={isLoading}
-                    className="bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white px-6 py-2 rounded-lg disabled:opacity-50 transition-all duration-300 transform hover:scale-105 font-medium flex items-center"
-                  >
-                    {isLoading ? (
-                      <>
-                        <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
-                          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                        </svg>
-                        Running...
-                      </>
-                    ) : (
-                      <>
-                        <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                        </svg>
-                        Run Code
-                      </>
-                    )}
-                  </button>
+                {/* Editor */}
+                <div className="flex-1 min-h-[200px] sm:min-h-[250px] lg:h-72">
+                  <MonacoEditor
+                    height="100%"
+                    language="python"
+                    value={code}
+                    onChange={(value) => setCode(value || '')}
+                    onMount={handleEditorDidMount}
+                    theme="vs-dark"
+                    options={{
+                      minimap: { enabled: false },
+                      fontSize: 13,
+                      scrollBeyondLastLine: false,
+                      automaticLayout: true,
+                      fontFamily: 'Consolas, "Courier New", monospace',
+                      padding: { top: 10, bottom: 10 },
+                      lineNumbers: 'on',
+                      wordWrap: 'on',
+                    }}
+                  />
                 </div>
-              </div>
 
-              <div className="h-80">
-                <MonacoEditor
-                  height="100%"
-                  language="python"
-                  value={code}
-                  onChange={(value) => setCode(value || '')}
-                  onMount={handleEditorDidMount}
-                  theme="vs-light"
-                  options={{
-                    minimap: { enabled: true },
-                    fontSize: 14,
-                    scrollBeyondLastLine: false,
-                    automaticLayout: true,
-                    fontFamily: 'Consolas, "Courier New", monospace',
-                  }}
-                />
-              </div>
-
-              <div className="p-4 border-t border-white/20 bg-gray-50/50">
-                <h3 className="font-bold text-gray-800 mb-2 flex items-center">
-                  <svg className="w-4 h-4 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                  </svg>
-                  Output
-                </h3>
-                <div className="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm h-32 overflow-auto border border-gray-700">
-                  {output || 'Click "Run Code" to execute your Python code...'}
+                {/* Output */}
+                <div className="p-3 sm:p-4 border-t border-gray-100 bg-gray-50 flex-shrink-0">
+                  <h3 className="font-bold text-gray-800 mb-2 flex items-center text-sm sm:text-base">
+                    <svg className="w-4 h-4 mr-1.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    Output
+                  </h3>
+                  <div className="bg-gray-900 text-green-400 p-3 sm:p-4 rounded-lg font-mono text-xs sm:text-sm h-20 sm:h-24 lg:h-28 overflow-auto">
+                    {output || 'Click "Run Code" to execute your Python code...'}
+                  </div>
                 </div>
               </div>
             </div>
           </div>
 
-          {/* Learning Resources */}
-          <div className="bg-white/70 backdrop-blur-sm rounded-2xl shadow-xl border border-white/20 p-6">
-            <h2 className="text-2xl font-bold text-gray-800 mb-6 flex items-center">
-              <svg className="w-6 h-6 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          {/* Learning Resources - Responsive Grid */}
+          <div className="bg-white/80 backdrop-blur-sm rounded-xl sm:rounded-2xl shadow-xl border border-white/20 p-4 sm:p-6">
+            <h2 className="text-lg sm:text-xl lg:text-2xl font-bold text-gray-800 mb-4 sm:mb-6 flex items-center">
+              <svg className="w-5 h-5 sm:w-6 sm:h-6 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
               </svg>
               Learning Resources
             </h2>
 
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-              <div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 border border-white/50 hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
-                <div className="w-12 h-12 bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg flex items-center justify-center mb-4">
-                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
-                  </svg>
-                </div>
-                <h3 className="font-bold text-lg text-gray-800 mb-2">Python Basics</h3>
-                <p className="text-gray-600 mb-4">Variables, data types, operators, and basic syntax</p>
-                <button className="bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-4 py-2 rounded-lg transition-all duration-300 transform hover:scale-105">
-                  Start Module
-                </button>
-              </div>
-
-              <div className="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-6 border border-white/50 hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
-                <div className="w-12 h-12 bg-gradient-to-r from-purple-500 to-purple-600 rounded-lg flex items-center justify-center mb-4">
-                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                  </svg>
-                </div>
-                <h3 className="font-bold text-lg text-gray-800 mb-2">Control Flow</h3>
-                <p className="text-gray-600 mb-4">If statements, loops, functions, and control structures</p>
-                <button className="bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white px-4 py-2 rounded-lg transition-all duration-300 transform hover:scale-105">
-                  Start Module
-                </button>
-              </div>
-
-              <div className="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-6 border border-white/50 hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
-                <div className="w-12 h-12 bg-gradient-to-r from-green-500 to-green-600 rounded-lg flex items-center justify-center mb-4">
-                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
-                  </svg>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
+              {[
+                { title: 'Python Basics', desc: 'Variables, data types, operators', color: 'blue', icon: '🐍' },
+                { title: 'Control Flow', desc: 'If statements, loops, functions', color: 'purple', icon: '🔄' },
+                { title: 'Practice', desc: 'Coding challenges and projects', color: 'green', icon: '💪' },
+              ].map((item, index) => (
+                <div
+                  key={index}
+                  className={`bg-gradient-to-br from-${item.color}-50 to-${item.color}-100 rounded-xl p-4 sm:p-6 border border-white/50 hover:shadow-lg transition-all duration-300 cursor-pointer active:scale-[0.98]`}
+                >
+                  <div className="text-3xl sm:text-4xl mb-3">{item.icon}</div>
+                  <h3 className="font-bold text-base sm:text-lg text-gray-800 mb-1 sm:mb-2">{item.title}</h3>
+                  <p className="text-gray-600 text-sm mb-3 sm:mb-4">{item.desc}</p>
+                  <button className={`w-full sm:w-auto bg-${item.color}-500 hover:bg-${item.color}-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors`}>
+                    Start Learning
+                  </button>
                 </div>
-                <h3 className="font-bold text-lg text-gray-800 mb-2">Practice Exercises</h3>
-                <p className="text-gray-600 mb-4">Hands-on coding challenges and projects</p>
-                <button className="bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white px-4 py-2 rounded-lg transition-all duration-300 transform hover:scale-105">
-                  Start Practice
-                </button>
-              </div>
+              ))}
             </div>
           </div>
         </main>
@@ -505,17 +538,22 @@ Try asking about a specific topic, or write some code in the editor and I'll hel
         .animation-delay-2000 {
           animation-delay: 2s;
         }
-        .animation-delay-4000 {
-          animation-delay: 4s;
-        }
         @keyframes pulse {
           0%, 100% { opacity: 0.2; }
           50% { opacity: 0.3; }
         }
-        .animate-pulse {
-          animation: pulse 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        /* Custom scrollbar for chat */
+        .overflow-y-auto::-webkit-scrollbar {
+          width: 6px;
+        }
+        .overflow-y-auto::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        .overflow-y-auto::-webkit-scrollbar-thumb {
+          background: #cbd5e1;
+          border-radius: 3px;
         }
       `}</style>
     </div>
   );
-}
+}