{% extends "base.html" %}

{% block title %}
  Study Groups
{% endblock title %}
{% block content %}
  <div class="container mx-auto px-4 py-8">
    <div class="max-w-7xl mx-auto">
      <div class="mb-8">
        <h1 class="text-3xl font-bold mb-4">Study Groups</h1>
        <p class="text-gray-600 dark:text-gray-300">Join or create study groups to learn together</p>
      </div>
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Study Groups List -->
        <div class="lg:col-span-2">
