diff --git a/app/Http/Controllers/.idea/.gitignore b/app/Http/Controllers/.idea/.gitignore
new file mode 100644
index 00000000..13566b81
--- /dev/null
+++ b/app/Http/Controllers/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/app/Http/Controllers/.idea/Controllers.iml b/app/Http/Controllers/.idea/Controllers.iml
new file mode 100644
index 00000000..c956989b
--- /dev/null
+++ b/app/Http/Controllers/.idea/Controllers.iml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/app/Http/Controllers/.idea/modules.xml b/app/Http/Controllers/.idea/modules.xml
new file mode 100644
index 00000000..0315a575
--- /dev/null
+++ b/app/Http/Controllers/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/Controllers.iml" filepath="$PROJECT_DIR$/.idea/Controllers.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/app/Http/Controllers/.idea/php.xml b/app/Http/Controllers/.idea/php.xml
new file mode 100644
index 00000000..29059d00
--- /dev/null
+++ b/app/Http/Controllers/.idea/php.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="MessDetectorOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PHPCSFixerOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PHPCodeSnifferOptionsConfiguration">
+    <option name="highlightLevel" value="WARNING" />
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PhpProjectSharedConfiguration" php_language_level="8.0">
+    <option name="suggestChangeDefaultLanguageLevel" value="false" />
+  </component>
+  <component name="PhpStanOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PsalmOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/app/Http/Controllers/.idea/vcs.xml b/app/Http/Controllers/.idea/vcs.xml
new file mode 100644
index 00000000..c2365ab1
--- /dev/null
+++ b/app/Http/Controllers/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/../../.." vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/app/Http/Controllers/CourseController.php b/app/Http/Controllers/CourseController.php
new file mode 100644
index 00000000..bf86b590
--- /dev/null
+++ b/app/Http/Controllers/CourseController.php
@@ -0,0 +1,101 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Interns2024c\Http\Controllers;
+
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Interns2024c\Models\Course;
+use Illuminate\Validation\Rule;
+
+class CourseController extends Controller
+{
+    use AuthorizesRequests;
+
+    public function index(Request $request)
+    {
+        $query = Course::query();
+
+        if ($request->filled('skill_level')) {
+            $query->where('skill_level', $request->skill_level);
+        }
+
+        $sortBy = $request->get('sort_by', 'id');
+        $order = $request->get('order', 'asc');
+        $allowedSortBy = ['title', 'created_at', 'id'];
+
+        if (in_array($sortBy, $allowedSortBy)) {
+            $query->orderBy($sortBy, $order);
+        }
+
+        $courses = $query->paginate(6);
+
+        return inertia('Courses/Index', [
+            'courses' => $courses,
+            'filters' => $request->only('skill_level', 'sort_by', 'order'),
+        ]);
+    }
+
+    public function create()
+    {
+        return Inertia::render("Courses/Create");
+    }
+
+    public function show($id)
+    {
+        $course = Course::findOrFail($id);
+        return Inertia::render("Courses/Show", ["course" => $course]);
+    }
+
+    public function store(Request $request)
+    {
+        $validated = $request->validate([
+            "title" => [
+                "required",
+                "string",
+                "max:255",
+                Rule::unique('courses', 'title'),
+            ],
+            "description" => "required|string",
+            "language" => "required|string",
+            "skill_level" => "required|string",
+        ]);
+
+        $request->user()->courses()->create($validated);
+        return redirect()->route("courses.index")->with("success", "Course created successfully.");
+    }
+
+    public function edit(Course $course)
+    {
+        return Inertia::render("Courses/Edit", ["course" => $course]);
+    }
+
+    public function update(Request $request, Course $course)
+    {
+        $this->authorize("update", $course);
+
+        $validated = $request->validate([
+            "title" => [
+                "required",
+                "string",
+                "max:255",
+                Rule::unique('courses', 'title')->ignore($course->id),
+            ],
+            "description" => "required|string",
+            "language" => "required|string",
+            "skill_level" => "required|string",
+        ]);
+
+        $course->update($validated);
+        return redirect()->route("courses.index")->with("success", "Course updated successfully.");
+    }
+
+    public function destroy(Course $course)
+    {
+        $this->authorize("delete", $course);
+        $course->delete();
+        return redirect()->route("courses.index")->with("success", "Course deleted successfully.");
+    }
+}
diff --git a/app/Models/Course.php b/app/Models/Course.php
new file mode 100644
index 00000000..20d8573a
--- /dev/null
+++ b/app/Models/Course.php
@@ -0,0 +1,20 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Interns2024c\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Course extends Model
+{
+    use HasFactory;
+
+    protected $fillable = ["title", "description", "language", "skill_level", "user_id"];
+
+    public function teacher()
+    {
+        return $this->belongsTo(User::class, "user_id");
+    }
+}
diff --git a/app/Models/User.php b/app/Models/User.php
index 06bb4bd2..3f3c739c 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -34,6 +34,11 @@ class User extends Authenticatable
         "remember_token",
     ];
 
+    public function courses()
+    {
+        return $this->hasMany(Course::class);
+    }
+
     protected function casts(): array
     {
         return [
diff --git a/app/Policies/CoursePolicy.php b/app/Policies/CoursePolicy.php
new file mode 100644
index 00000000..0d729657
--- /dev/null
+++ b/app/Policies/CoursePolicy.php
@@ -0,0 +1,73 @@
+<?php
+
+namespace Interns2024c\Policies;
+
+use Illuminate\Auth\Access\Response;
+use Interns2024c\Models\Course;
+use Interns2024c\Models\User;
+
+class CoursePolicy
+{
+    /**
+     * Determine whether the user can view any models.
+     */
+    public function viewAny(User $user): bool
+    {
+
+        return true;
+    }
+
+    /**
+     * Determine whether the user can view the model.
+     */
+    public function view(User $user, Course $course): bool
+    {
+
+        return true;
+    }
+
+    /**
+     * Determine whether the user can create models.
+     */
+    public function create(User $user): bool
+    {
+
+        return $user->role === 'teacher' || $user->role === 'admin';
+    }
+
+    /**
+     * Determine whether the user can update the model.
+     */
+    public function update(User $user, Course $course): bool
+    {
+
+        return $user->id === $course->user_id || $user->role === 'admin';
+    }
+
+    /**
+     * Determine whether the user can delete the model.
+     */
+    public function delete(User $user, Course $course): bool
+    {
+
+        return $user->id === $course->user_id || $user->role === 'admin';
+    }
+
+    /**
+     * Determine whether the user can restore the model.
+     */
+    public function restore(User $user, Course $course): bool
+    {
+
+        return $user->role === 'admin' || $user->id === $course->user_id;
+    }
+
+    /**
+     * Determine whether the user can permanently delete the model.
+     */
+    public function forceDelete(User $user, Course $course): bool
+    {
+
+        return $user->role === 'admin';
+    }
+}
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 2f7cc479..fe0fbc8d 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -5,9 +5,12 @@
 namespace Interns2024c\Providers;
 
 use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Gate;
 use Illuminate\Support\Facades\Vite;
 use Illuminate\Support\ServiceProvider;
 use Inertia\Inertia;
+use Interns2024c\Models\Course;
+use Interns2024c\Policies\CoursePolicy;
 
 class AppServiceProvider extends ServiceProvider
 {
@@ -23,7 +26,10 @@ public function register(): void
      */
     public function boot(): void
     {
+        // Vite prefetch
         Vite::prefetch(concurrency: 3);
+
+        // Inertia auth
         Inertia::share([
             "auth" => function () {
                 return [
@@ -31,5 +37,8 @@ public function boot(): void
                 ];
             },
         ]);
+
+
+        Gate::policy(Course::class, CoursePolicy::class);
     }
 }
diff --git a/bootstrap/cache/.gitignore b/bootstrap/cache/.gitignore
old mode 100644
new mode 100755
diff --git a/database/migrations/2024_12_17_124351_create_courses_table.php b/database/migrations/2024_12_17_124351_create_courses_table.php
new file mode 100644
index 00000000..26e1fedf
--- /dev/null
+++ b/database/migrations/2024_12_17_124351_create_courses_table.php
@@ -0,0 +1,27 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class() extends Migration {
+    public function up(): void
+    {
+        Schema::create("courses", function (Blueprint $table): void {
+            $table->id();
+            $table->string("title");
+            $table->text("description");
+            $table->string("language");
+            $table->string("skill_level");
+            $table->foreignId("user_id")->constrained()->onDelete("cascade");
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists("courses");
+    }
+};
diff --git a/package-lock.json b/package-lock.json
index 9a191207..a0468d3f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,8 @@
                 "@tailwindcss/typography": "^0.5.15",
                 "laravel-vite-plugin": "^1.0.5",
                 "lodash": "^4.17.21",
-                "vue": "^3.5.10"
+                "vue": "^3.5.10",
+                "vue-router": "^4.5.0"
             },
             "devDependencies": {
                 "@blumilksoftware/eslint-config": "^2.0.0",
@@ -1518,6 +1519,11 @@
                 "he": "^1.2.0"
             }
         },
+        "node_modules/@vue/devtools-api": {
+            "version": "6.6.4",
+            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+            "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
+        },
         "node_modules/@vue/eslint-config-typescript": {
             "version": "12.0.0",
             "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-12.0.0.tgz",
@@ -5942,6 +5948,20 @@
                 "eslint": ">=6.0.0"
             }
         },
+        "node_modules/vue-router": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
+            "integrity": "sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==",
+            "dependencies": {
+                "@vue/devtools-api": "^6.6.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/posva"
+            },
+            "peerDependencies": {
+                "vue": "^3.2.0"
+            }
+        },
         "node_modules/vue-tsc": {
             "version": "2.1.10",
             "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.1.10.tgz",
diff --git a/package.json b/package.json
index 159dc51a..fbcfbbac 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
         "@tailwindcss/typography": "^0.5.15",
         "laravel-vite-plugin": "^1.0.5",
         "lodash": "^4.17.21",
-        "vue": "^3.5.10"
+        "vue": "^3.5.10",
+        "vue-router": "^4.5.0"
     },
     "devDependencies": {
         "@blumilksoftware/eslint-config": "^2.0.0",
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index 5c5e712c..305ab594 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -3,8 +3,6 @@ import { ref } from 'vue'
 import ApplicationLogo from '@/Components/ApplicationLogo.vue'
 import Dropdown from '@/Components/Dropdown.vue'
 import DropdownLink from '@/Components/DropdownLink.vue'
-import NavLink from '@/Components/NavLink.vue'
-import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue'
 import { Link } from '@inertiajs/vue3'
 
 const showingNavigationDropdown = ref(false)
@@ -13,186 +11,45 @@ const showingNavigationDropdown = ref(false)
 <template>
   <div>
     <div class="min-h-screen bg-gray-100">
-      <nav
-        class="border-b border-gray-100 bg-white"
-      >
-        <!-- Primary Navigation Menu -->
+      <nav class="bg-blue-800 text-white">
         <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <div class="flex h-16 justify-between">
-            <div class="flex">
-              <!-- Logo -->
-              <div class="flex shrink-0 items-center">
-                <Link :href="route('dashboard')">
-                  <ApplicationLogo
-                    class="block h-9 w-auto fill-current text-gray-800"
-                  />
-                </Link>
-              </div>
-
-              <!-- Navigation Links -->
-              <div
-                class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex"
-              >
-                <NavLink
-                  :href="route('dashboard')"
-                  :active="route().current('dashboard')"
-                >
-                  Dashboard
-                </NavLink>
-              </div>
-            </div>
-
-            <div class="hidden sm:ms-6 sm:flex sm:items-center">
-              <!-- Settings Dropdown -->
-              <div class="relative ms-3">
-                <Dropdown align="right" width="48">
-                  <template #trigger>
-                    <span class="inline-flex rounded-md">
-                      <button
-                        type="button"
-                        class="inline-flex items-center rounded-md border border-transparent bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-500 transition duration-150 ease-in-out hover:text-gray-700 focus:outline-none"
-                      >
-                        {{ $page.props.auth.user.name }}
-
-                        <svg
-                          class="-me-0.5 ms-2 size-4"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 20 20"
-                          fill="currentColor"
-                        >
-                          <path
-                            fill-rule="evenodd"
-                            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                            clip-rule="evenodd"
-                          />
-                        </svg>
-                      </button>
-                    </span>
-                  </template>
-
-                  <template #content>
-                    <DropdownLink
-                      :href="route('profile.edit')"
-                    >
-                      Profile
-                    </DropdownLink>
-                    <DropdownLink
-                      :href="route('logout')"
-                      method="post"
-                      as="button"
-                    >
-                      Log Out
-                    </DropdownLink>
-                  </template>
-                </Dropdown>
-              </div>
+          <div class="flex h-16 items-center justify-between">
+            <div class="flex space-x-4">
+              <Link :href="route('dashboard')" class="px-4 py-2 rounded-md text-lg font-semibold hover:bg-blue-700">Dashboard</Link>
+              <Link :href="route('courses.index')" class="px-4 py-2 rounded-md text-lg font-semibold hover:bg-blue-700">Courses</Link>
+              <Link :href="route('courses.create')" class="px-4 py-2 rounded-md text-lg font-semibold hover:bg-blue-700">Create Course</Link>
             </div>
 
-            <!-- Hamburger -->
-            <div class="-me-2 flex items-center sm:hidden">
-              <button
-                class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none"
-                @click="
-                  showingNavigationDropdown =
-                    !showingNavigationDropdown
-                "
-              >
-                <svg
-                  class="size-6"
-                  stroke="currentColor"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    :class="{
-                      hidden: showingNavigationDropdown,
-                      'inline-flex':
-                        !showingNavigationDropdown,
-                    }"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M4 6h16M4 12h16M4 18h16"
-                  />
-                  <path
-                    :class="{
-                      hidden: !showingNavigationDropdown,
-                      'inline-flex':
-                        showingNavigationDropdown,
-                    }"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Responsive Navigation Menu -->
-        <div
-          :class="{
-            block: showingNavigationDropdown,
-            hidden: !showingNavigationDropdown,
-          }"
-          class="sm:hidden"
-        >
-          <div class="space-y-1 pb-3 pt-2">
-            <ResponsiveNavLink
-              :href="route('dashboard')"
-              :active="route().current('dashboard')"
-            >
-              Dashboard
-            </ResponsiveNavLink>
-          </div>
-
-          <!-- Responsive Settings Options -->
-          <div
-            class="border-t border-gray-200 pb-1 pt-4"
-          >
-            <div class="px-4">
-              <div
-                class="text-base font-medium text-gray-800"
-              >
-                {{ $page.props.auth.user.name }}
-              </div>
-              <div class="text-sm font-medium text-gray-500">
-                {{ $page.props.auth.user.email }}
-              </div>
-            </div>
-
-            <div class="mt-3 space-y-1">
-              <ResponsiveNavLink :href="route('profile.edit')">
-                Profile
-              </ResponsiveNavLink>
-              <ResponsiveNavLink
-                :href="route('logout')"
-                method="post"
-                as="button"
-              >
-                Log Out
-              </ResponsiveNavLink>
+            <div class="relative">
+              <Dropdown align="right" width="48">
+                <template #trigger>
+                  <span class="inline-flex rounded-md">
+                    <button type="button"
+                            class="inline-flex items-center rounded-md border border-transparent bg-blue-800 px-4 py-2 text-lg font-semibold text-white hover:bg-blue-700 focus:outline-none">
+                      {{ $page.props.auth.user.name }}
+                      <svg class="-me-0.5 ms-2 size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                           fill="currentColor">
+                        <path fill-rule="evenodd"
+                              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                              clip-rule="evenodd" />
+                      </svg>
+                    </button>
+                  </span>
+                </template>
+
+                <template #content>
+                  <DropdownLink :href="route('profile.edit')">Profile</DropdownLink>
+                  <DropdownLink :href="route('logout')" method="post" as="button">Log Out</DropdownLink>
+                </template>
+              </Dropdown>
             </div>
           </div>
         </div>
       </nav>
 
-      <!-- Page Heading -->
-      <header
-        v-if="$slots.header"
-        class="bg-white shadow"
-      >
-        <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
-          <slot name="header" />
-        </div>
-      </header>
-
-      <!-- Page Content -->
       <main>
         <slot />
       </main>
     </div>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/resources/js/Pages/Courses/Create.vue b/resources/js/Pages/Courses/Create.vue
new file mode 100644
index 00000000..ce005cd4
--- /dev/null
+++ b/resources/js/Pages/Courses/Create.vue
@@ -0,0 +1,73 @@
+<template>
+  <AuthenticatedLayout>
+    <div class="max-w-4xl mx-auto mt-10">
+      <h1 class="text-2xl font-bold mb-6 text-center">Create New Course</h1>
+      <form @submit.prevent="submit" class="bg-white p-6 rounded-lg shadow-md space-y-4">
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Title</label>
+            <input v-model="form.title" type="text" class="input-field" placeholder="Course Title" />
+            <p v-if="form.errors.title" class="text-red-500 text-sm">{{ form.errors.title }}</p>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Language</label>
+            <input v-model="form.language" type="text" class="input-field" placeholder="Language" />
+            <p v-if="form.errors.language" class="text-red-500 text-sm">{{ form.errors.language }}</p>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Description</label>
+            <textarea v-model="form.description" rows="4" class="input-field" placeholder="Course Description"></textarea>
+            <p v-if="form.errors.description" class="text-red-500 text-sm">{{ form.errors.description }}</p>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Skill Level</label>
+            <input v-model="form.skill_level" type="text" class="input-field" placeholder="Skill Level" />
+            <p v-if="form.errors.skill_level" class="text-red-500 text-sm">{{ form.errors.skill_level }}</p>
+          </div>
+        </div>
+
+        <div class="flex justify-end">
+          <button type="submit" class="btn-primary">Save</button>
+        </div>
+      </form>
+    </div>
+  </AuthenticatedLayout>
+</template>
+
+<script setup>
+import { useForm } from '@inertiajs/vue3';
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+
+const form = useForm({
+  title: '',
+  description: '',
+  language: '',
+  skill_level: '',
+});
+
+const submit = () => form.post(route('courses.store'));
+</script>
+
+<style scoped>
+.input-field {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+.btn-primary {
+  background-color: #4f46e5;
+  color: white;
+  padding: 10px 20px;
+  border-radius: 5px;
+  transition: 0.3s;
+}
+
+.btn-primary:hover {
+  background-color: #4338ca;
+}
+</style>
diff --git a/resources/js/Pages/Courses/Edit.vue b/resources/js/Pages/Courses/Edit.vue
new file mode 100644
index 00000000..a0cfff07
--- /dev/null
+++ b/resources/js/Pages/Courses/Edit.vue
@@ -0,0 +1,65 @@
+// Edit.vue
+<template>
+  <div class="min-h-screen flex items-center justify-center bg-gray-100 px-4">
+    <form @submit.prevent="submit" class="bg-white p-8 rounded-lg shadow-lg w-full max-w-2xl">
+      <h2 class="text-3xl font-bold mb-6 text-gray-800 text-center">Edit Course</h2>
+
+      <div class="mb-6">
+        <label class="block text-sm font-medium text-gray-700 mb-2">Title</label>
+        <input v-model="form.title" type="text" placeholder="Enter title"
+               class="w-full border border-gray-300 rounded-lg px-4 py-3 text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500" />
+        <p v-if="errors.title" class="text-red-500 text-sm">{{ errors.title }}</p>
+      </div>
+
+      <div class="mb-6">
+        <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
+        <textarea v-model="form.description" placeholder="Enter description"
+                  class="w-full border border-gray-300 rounded-lg px-4 py-3 text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500" rows="6"></textarea>
+        <p v-if="errors.description" class="text-red-500 text-sm">{{ errors.description }}</p>
+      </div>
+
+      <div class="mb-6">
+        <label class="block text-sm font-medium text-gray-700 mb-2">Language</label>
+        <input v-model="form.language" type="text" placeholder="Enter language"
+               class="w-full border border-gray-300 rounded-lg px-4 py-3 text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500" />
+        <p v-if="errors.language" class="text-red-500 text-sm">{{ errors.language }}</p>
+      </div>
+
+      <div class="mb-6">
+        <label class="block text-sm font-medium text-gray-700 mb-2">Skill Level</label>
+        <input v-model="form.skill_level" type="text" placeholder="Enter skill level"
+               class="w-full border border-gray-300 rounded-lg px-4 py-3 text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500" />
+        <p v-if="errors.skill_level" class="text-red-500 text-sm">{{ errors.skill_level }}</p>
+      </div>
+
+      <button type="submit"
+              class="w-full bg-blue-600 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+        Update Course
+      </button>
+    </form>
+  </div>
+</template>
+
+<script>
+import { useForm } from "@inertiajs/vue3";
+
+export default {
+  props: {
+    course: Object,
+  },
+  setup(props) {
+    const form = useForm({
+      title: props.course.title,
+      description: props.course.description,
+      language: props.course.language,
+      skill_level: props.course.skill_level,
+    });
+
+    const errors = form.errors;
+
+    const submit = () => form.put(route("courses.update", props.course.id));
+
+    return { form, submit, errors };
+  },
+};
+</script>
diff --git a/resources/js/Pages/Courses/Index.vue b/resources/js/Pages/Courses/Index.vue
new file mode 100644
index 00000000..0a278ebf
--- /dev/null
+++ b/resources/js/Pages/Courses/Index.vue
@@ -0,0 +1,87 @@
+<script setup>
+import { ref } from 'vue';
+import { router } from '@inertiajs/vue3';
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+import { Head } from '@inertiajs/vue3';
+
+const props = defineProps({
+  courses: Object,
+  filters: Object,
+});
+
+const filters = ref({
+  skill_level: props.filters.skill_level || '',
+  sort_by: props.filters.sort_by || 'id',
+  order: props.filters.order || 'asc',
+});
+
+const applyFilters = () => {
+  router.get(route('courses.index'), filters.value);
+};
+
+const editCourse = (courseId) => {
+  router.visit(route('courses.edit', courseId));
+};
+
+const deleteCourse = (courseId) => {
+  if (confirm('Are you sure you want to delete this course?')) {
+    router.delete(route('courses.destroy', courseId));
+  }
+};
+</script>
+
+<template>
+  <AuthenticatedLayout>
+    <Head title="Courses" />
+
+    <div class="min-h-screen bg-gray-100 p-6">
+      <h1 class="text-3xl font-extrabold text-center mb-6 text-gray-800">Courses</h1>
+
+      <div class="p-4  rounded-lg shadow-md mb-6 flex flex-wrap items-center justify-center gap-3">
+        <div class="flex gap-3">
+          <select v-model="filters.skill_level" class="border-gray-300 rounded-md px-4 py-2 text-sm w-40">
+            <option value="">All Levels</option>
+            <option value="Beginner">Beginner</option>
+            <option value="Intermediate">Intermediate</option>
+            <option value="Advanced">Advanced</option>
+          </select>
+
+          <select v-model="filters.sort_by" class="border-gray-300 rounded-md px-4 py-2 text-sm w-40">
+            <option value="id">Default</option>
+            <option value="title">Title</option>
+            <option value="created_at">Date</option>
+          </select>
+
+          <select v-model="filters.order" class="border-gray-300 rounded-md px-4 py-2 text-sm w-40">
+            <option value="asc">Ascending</option>
+            <option value="desc">Descending</option>
+          </select>
+        </div>
+
+        <button @click="applyFilters" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-semibold hover:bg-blue-700 transition">
+          Apply
+        </button>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div v-for="course in courses.data" :key="course.id" class="bg-white p-4 rounded-lg shadow-md h-auto flex flex-col justify-between">
+          <div>
+            <h2 class="text-xl font-bold text-gray-800 mb-2">{{ course.title }}</h2>
+            <p class="text-gray-600 text-sm mb-2">{{ course.description }}</p>
+            <p class="text-sm text-gray-500">Language: <span class="font-semibold">{{ course.language }}</span></p>
+            <p class="text-sm text-gray-500">Skill Level: <span class="font-semibold">{{ course.skill_level }}</span></p>
+          </div>
+
+          <div class="mt-4 flex justify-between">
+            <button @click="editCourse(course.id)" class="bg-blue-500 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-600 transition">
+              Edit
+            </button>
+            <button @click="deleteCourse(course.id)" class="bg-red-500 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-red-600 transition">
+              Delete
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </AuthenticatedLayout>
+</template>
diff --git a/resources/js/Pages/Courses/Show.vue b/resources/js/Pages/Courses/Show.vue
new file mode 100644
index 00000000..3a865e0b
--- /dev/null
+++ b/resources/js/Pages/Courses/Show.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="flex justify-center items-center min-h-screen bg-gray-100">
+    <div class="max-w-2xl w-full p-8 bg-white shadow-xl rounded-lg">
+      <h1 class="text-4xl font-bold text-gray-800 mb-6">{{ course.title }}</h1>
+
+      <div class="mb-6">
+        <p class="text-lg text-gray-700"><strong class="font-semibold">Description:</strong> {{ course.description }}</p>
+        <p class="text-lg text-gray-700"><strong class="font-semibold">Language:</strong> {{ course.language }}</p>
+        <p class="text-lg text-gray-700"><strong class="font-semibold">Skill Level:</strong> {{ course.skill_level }}</p>
+      </div>
+
+      <div class="flex space-x-6">
+        <button
+            @click="editCourse"
+            class="w-full sm:w-auto px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
+          Edit Course
+        </button>
+
+        <button
+            @click="deleteCourse"
+            class="w-full sm:w-auto px-6 py-3 bg-red-600 text-white font-semibold rounded-lg shadow-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
+          Delete Course
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { router } from '@inertiajs/vue3'
+
+export default {
+  props: {
+    course: Object,
+  },
+  methods: {
+    editCourse() {
+      router.get(route('courses.edit', this.course.id))
+    },
+    deleteCourse() {
+      if (confirm('Are you sure you want to delete this course?')) {
+        router.delete(route('courses.destroy', this.course.id))
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/resources/js/router.ts b/resources/js/router.ts
new file mode 100644
index 00000000..adca40d9
--- /dev/null
+++ b/resources/js/router.ts
@@ -0,0 +1,24 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+
+// Sayfa bileşenlerini import et
+import CoursesIndex from './Pages/Courses/Index.vue';
+
+const routes: Array<RouteRecordRaw> = [
+    {
+        path: '/',
+        name: 'home',
+        component: CoursesIndex, // Ana sayfa olarak kullanılacak component
+    },
+    {
+        path: '/courses',
+        name: 'courses',
+        component: CoursesIndex, // Örnek başka bir sayfa
+    }
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes,
+});
+
+export default router;
diff --git a/resources/js/ziggy.js b/resources/js/ziggy.js
new file mode 100644
index 00000000..4eeaaf0f
--- /dev/null
+++ b/resources/js/ziggy.js
@@ -0,0 +1,5 @@
+const Ziggy = {"url":"http:\/\/interns2024c.blumilk.localhost","port":null,"defaults":{},"routes":{"sanctum.csrf-cookie":{"uri":"sanctum\/csrf-cookie","methods":["GET","HEAD"]},"ignition.healthCheck":{"uri":"_ignition\/health-check","methods":["GET","HEAD"]},"ignition.executeSolution":{"uri":"_ignition\/execute-solution","methods":["POST"]},"ignition.updateConfig":{"uri":"_ignition\/update-config","methods":["POST"]},"dashboard":{"uri":"dashboard","methods":["GET","HEAD"]},"profile.edit":{"uri":"profile","methods":["GET","HEAD"]},"profile.update":{"uri":"profile","methods":["PATCH"]},"profile.destroy":{"uri":"profile","methods":["DELETE"]},"register":{"uri":"register","methods":["GET","HEAD"]},"login":{"uri":"login","methods":["GET","HEAD"]},"password.request":{"uri":"forgot-password","methods":["GET","HEAD"]},"password.email":{"uri":"forgot-password","methods":["POST"]},"password.reset":{"uri":"reset-password\/{token}","methods":["GET","HEAD"],"parameters":["token"]},"password.store":{"uri":"reset-password","methods":["POST"]},"verification.notice":{"uri":"verify-email","methods":["GET","HEAD"]},"verification.verify":{"uri":"verify-email\/{id}\/{hash}","methods":["GET","HEAD"],"parameters":["id","hash"]},"verification.send":{"uri":"email\/verification-notification","methods":["POST"]},"password.confirm":{"uri":"confirm-password","methods":["GET","HEAD"]},"password.update":{"uri":"password","methods":["PUT"]},"logout":{"uri":"logout","methods":["POST"]}}};
+if (typeof window !== 'undefined' && typeof window.Ziggy !== 'undefined') {
+  Object.assign(Ziggy.routes, window.Ziggy.routes);
+}
+export { Ziggy };
diff --git a/routes/web.php b/routes/web.php
index 233de68c..1cd11cf9 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -6,7 +6,9 @@
 use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
 use Interns2024c\Http\Controllers\Auth\ProfileController;
+use Interns2024c\Http\Controllers\CourseController;
 
+// home page
 Route::get("/", function () {
     return Inertia::render("Welcome", [
         "canLogin" => Route::has("login"),
@@ -16,7 +18,11 @@
     ]);
 });
 
-Route::get("/dashboard", fn() => Inertia::render("Dashboard"))->middleware(["auth", "verified"])->name("dashboard");
+// Dashboard route
+Route::get("/dashboard", fn() => Inertia::render("Dashboard"))
+    ->middleware(["auth", "verified"])
+    ->name("dashboard");
+
 
 Route::middleware("auth")->group(function (): void {
     Route::get("/profile", [ProfileController::class, "edit"])->name("profile.edit");
@@ -24,4 +30,13 @@
     Route::delete("/profile", [ProfileController::class, "destroy"])->name("profile.destroy");
 });
 
+
+Route::middleware(["auth"])->group(function (): void {
+    // course crud route
+    Route::resource("courses", CourseController::class)
+        ->parameters(["courses" => "course"])
+        ->whereNumber("course");
+});
+
+
 require __DIR__ . "/auth.php";
diff --git a/storage/app/.gitignore b/storage/app/.gitignore
old mode 100644
new mode 100755
diff --git a/storage/app/public/.gitignore b/storage/app/public/.gitignore
old mode 100644
new mode 100755
diff --git a/storage/framework/.gitignore b/storage/framework/.gitignore
old mode 100644
new mode 100755
diff --git a/storage/framework/cache/.gitignore b/storage/framework/cache/.gitignore
old mode 100644
new mode 100755
diff --git a/storage/framework/cache/data/.gitignore b/storage/framework/cache/data/.gitignore
old mode 100644
new mode 100755
diff --git a/storage/framework/sessions/.gitignore b/storage/framework/sessions/.gitignore
old mode 100644
new mode 100755
diff --git a/storage/framework/testing/.gitignore b/storage/framework/testing/.gitignore
old mode 100644
new mode 100755
diff --git a/storage/framework/views/.gitignore b/storage/framework/views/.gitignore
old mode 100644
new mode 100755
diff --git a/storage/logs/.gitignore b/storage/logs/.gitignore
old mode 100644
new mode 100755