diff --git a/app/Http/Controllers/ComputerScienceResourceController.php b/app/Http/Controllers/ComputerScienceResourceController.php
index 956b5896..8806c8e7 100644
--- a/app/Http/Controllers/ComputerScienceResourceController.php
+++ b/app/Http/Controllers/ComputerScienceResourceController.php
@@ -110,15 +110,16 @@ public function store(StoreResourceRequest $request)
 
         Log::debug('Created resource '.json_encode($resource));
 
-        return redirect(route('resources.show', ['computerScienceResource' => $resource->id]))
+        return redirect(route('resources.show', ['slug' => $resource->slug]))
             ->with('success', 'Created Resource Succesfully!');
     }
 
     /**
      * Display the specified resource.
      */
-    public function show(Request $request, ComputerScienceResource $computerScienceResource, string $tab = 'reviews')
+    public function show(Request $request, string $slug, string $tab = 'reviews')
     {
+        $computerScienceResource = ComputerScienceResource::where('slug', $slug)->firstOrFail();
         // Get the review summaries
         $computerScienceResource->load('reviewSummary');
         $computerScienceResource->load('user');
@@ -128,7 +129,7 @@ public function show(Request $request, ComputerScienceResource $computerScienceR
         if (! in_array($tab, $validTabs)) {
             // Redirect to default if invalid
             return redirect()->route('resources.show', [
-                'computerScienceResource' => $computerScienceResource->id,
+                'slug' => $computerScienceResource->slug,
                 'tab' => 'reviews',
             ]);
         }
diff --git a/app/Http/Controllers/ResourceEditsController.php b/app/Http/Controllers/ResourceEditsController.php
index 23bd12d1..a5fc6bd3 100644
--- a/app/Http/Controllers/ResourceEditsController.php
+++ b/app/Http/Controllers/ResourceEditsController.php
@@ -16,19 +16,16 @@
 
 class ResourceEditsController extends Controller
 {
-    private DataNormalizationService $dataService;
-
     public function __construct(
         private DataNormalizationService $dataNormalizationService
-    ) {
-        $this->dataService = $dataNormalizationService;
-    }
+    ) { }
 
     /**
      * Return the form to create a edit.
      */
-    public function create(ComputerScienceResource $computerScienceResource)
+    public function create(string $slug)
     {
+        $computerScienceResource = ComputerScienceResource::where('slug', $slug)->firstOrFail();
         $computerScienceResource->load('user');
 
         return Inertia::render('ResourceEdits/Create', [
@@ -69,7 +66,7 @@ public function store(ComputerScienceResource $computerScienceResource, StoreRes
             'proposed_changes' => $actualChanges,
         ]);
 
-        return redirect()->route('resource_edits.show', ['resourceEdits' => $resourceEdit->id])
+        return redirect()->route('resource_edits.show', ['slug' => $resourceEdit->slug])
             ->with('success', 'The proposed edits were created. Others can now view it.');
     }
 
@@ -92,8 +89,10 @@ private function calculateChanges(ComputerScienceResource $resource, array $prop
         return $actualChanges;
     }
 
-    public function show(ResourceEdits $resourceEdits)
+    public function show(string $slug)
     {
+        $resourceEdits = ResourceEdits::where('slug', $slug)->firstOrFail();
+
         $resourceEdits->load('resource');
         $resourceEdits->load('user');
 
@@ -160,7 +159,7 @@ public function merge(ResourceEditsService $editsService, ResourceEdits $resourc
         // Delete the edit since we successfully merged the changes
         $resourceEdits->delete();
 
-        return redirect(route('resources.show', ['computerScienceResource' => $resourceEdits->computer_science_resource_id]))
+        return redirect(route('resources.show', ['slug' => $resource->slug]))
             ->with('success', 'Successfully merged new changed!');
     }
 }
diff --git a/app/Models/ComputerScienceResource.php b/app/Models/ComputerScienceResource.php
index 771714bd..221e4dbd 100644
--- a/app/Models/ComputerScienceResource.php
+++ b/app/Models/ComputerScienceResource.php
@@ -14,14 +14,16 @@
 use Illuminate\Database\Eloquent\Relations\HasOne;
 use Illuminate\Support\Facades\Storage;
 use Spatie\Tags\HasTags;
+use Cviebrock\EloquentSluggable\Sluggable;
 
 #[ObservedBy([ComputerScienceResourceObserver::class])]
 class ComputerScienceResource extends Model
 {
+    use HasFactory;
+    use Sluggable;
+
     use HasComments;
 
-    /** @use HasFactory<\Database\Factories\ComputerScienceResourceFactory> */
-    use HasFactory;
     use HasTags;
     use HasVotes;
 
@@ -31,6 +33,20 @@ class ComputerScienceResource extends Model
 
     protected $appends = ['topic_tags', 'programming_language_tags', 'general_tags', 'vote_score', 'user_vote', 'comments_count', 'image_url'];
 
+    /**
+     * Return the sluggable configuration array for this model.
+     *
+     * @return array
+     */
+    public function sluggable(): array
+    {
+        return [
+            'slug' => [
+                'source' => 'name'
+            ]
+        ];
+    }
+
     public function user(): BelongsTo
     {
         return $this->belongsTo(User::class);
diff --git a/app/Models/ResourceEdits.php b/app/Models/ResourceEdits.php
index 1766c2fd..f05d75c3 100644
--- a/app/Models/ResourceEdits.php
+++ b/app/Models/ResourceEdits.php
@@ -14,11 +14,13 @@
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Storage;
 use ShiftOneLabs\LaravelCascadeDeletes\CascadesDeletes;
+use Cviebrock\EloquentSluggable\Sluggable;
 
 #[ObservedBy([ResourceEditsObserver::class])]
 class ResourceEdits extends Model
 {
     use CascadesDeletes;
+    use Sluggable;
 
     use HasComments;
     /** @use HasFactory<\Database\Factories\ResourceEditsFactory> */
@@ -37,6 +39,20 @@ class ResourceEdits extends Model
         'proposed_changes' => 'array',
     ];
 
+    /**
+     * Return the sluggable configuration array for this model.
+     *
+     * @return array
+     */
+    public function sluggable(): array
+    {
+        return [
+            'slug' => [
+                'source' => 'edit_title'
+            ]
+        ];
+    }
+
     public function resource(): BelongsTo
     {
         return $this->belongsTo(ComputerScienceResource::class, 'computer_science_resource_id', 'id');
diff --git a/composer.json b/composer.json
index 17b82b48..6193d31f 100644
--- a/composer.json
+++ b/composer.json
@@ -7,6 +7,7 @@
     "license": "MIT",
     "require": {
         "php": "^8.2",
+        "cviebrock/eloquent-sluggable": "^11.0",
         "inertiajs/inertia-laravel": "^2.0",
         "joelbutcher/socialstream": "^6.2",
         "laravel/framework": "^11.31",
diff --git a/composer.lock b/composer.lock
index 3380bfbf..64b322fc 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "42cee1297eabe050f6a451aef2908c3b",
+    "content-hash": "221a502645753e2ec18df636c08462d0",
     "packages": [
         {
             "name": "bacon/bacon-qr-code",
@@ -189,6 +189,154 @@
             ],
             "time": "2024-02-09T16:56:22+00:00"
         },
+        {
+            "name": "cocur/slugify",
+            "version": "v4.6.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/cocur/slugify.git",
+                "reference": "1d674022e9cbefa80b4f51aa3e2375b6e3c14fdb"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/cocur/slugify/zipball/1d674022e9cbefa80b4f51aa3e2375b6e3c14fdb",
+                "reference": "1d674022e9cbefa80b4f51aa3e2375b6e3c14fdb",
+                "shasum": ""
+            },
+            "require": {
+                "ext-mbstring": "*",
+                "php": "~8.0.0 || ~8.1.0 || ~8.2.0 || ~8.3.0 || ~8.4.0"
+            },
+            "conflict": {
+                "symfony/config": "<3.4 || >=4,<4.3",
+                "symfony/dependency-injection": "<3.4 || >=4,<4.3",
+                "symfony/http-kernel": "<3.4 || >=4,<4.3",
+                "twig/twig": "<2.12.1"
+            },
+            "require-dev": {
+                "laravel/framework": "^5.0|^6.0|^7.0|^8.0",
+                "latte/latte": "~2.2",
+                "league/container": "^2.2.0",
+                "mikey179/vfsstream": "~1.6.8",
+                "mockery/mockery": "^1.3",
+                "nette/di": "~2.4",
+                "pimple/pimple": "~1.1",
+                "plumphp/plum": "~0.1",
+                "symfony/config": "^3.4 || ^4.3 || ^5.0 || ^6.0",
+                "symfony/dependency-injection": "^3.4 || ^4.3 || ^5.0 || ^6.0",
+                "symfony/http-kernel": "^3.4 || ^4.3 || ^5.0 || ^6.0",
+                "symfony/phpunit-bridge": "^5.4 || ^6.0",
+                "twig/twig": "^2.12.1 || ~3.0",
+                "zendframework/zend-modulemanager": "~2.2",
+                "zendframework/zend-servicemanager": "~2.2",
+                "zendframework/zend-view": "~2.2"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Cocur\\Slugify\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Florian Eckerstorfer",
+                    "email": "florian@eckerstorfer.co",
+                    "homepage": "https://florian.ec"
+                },
+                {
+                    "name": "Ivo Bathke",
+                    "email": "ivo.bathke@gmail.com"
+                }
+            ],
+            "description": "Converts a string into a slug.",
+            "keywords": [
+                "slug",
+                "slugify"
+            ],
+            "support": {
+                "issues": "https://github.com/cocur/slugify/issues",
+                "source": "https://github.com/cocur/slugify/tree/v4.6.0"
+            },
+            "time": "2024-09-10T14:09:25+00:00"
+        },
+        {
+            "name": "cviebrock/eloquent-sluggable",
+            "version": "11.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/cviebrock/eloquent-sluggable.git",
+                "reference": "a4281cf0284a21efc1031a065b112ddd6c826eea"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/cviebrock/eloquent-sluggable/zipball/a4281cf0284a21efc1031a065b112ddd6c826eea",
+                "reference": "a4281cf0284a21efc1031a065b112ddd6c826eea",
+                "shasum": ""
+            },
+            "require": {
+                "cocur/slugify": "^4.3",
+                "illuminate/config": "^11.0",
+                "illuminate/database": "^11.0",
+                "illuminate/support": "^11.0",
+                "php": "^8.2"
+            },
+            "require-dev": {
+                "mockery/mockery": "^1.4.4",
+                "orchestra/testbench": "^9.0",
+                "pestphp/pest": "^2.28"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Cviebrock\\EloquentSluggable\\ServiceProvider"
+                    ]
+                },
+                "branch-alias": {
+                    "dev-master": "11.0.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Cviebrock\\EloquentSluggable\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Colin Viebrock",
+                    "email": "colin@viebrock.ca"
+                }
+            ],
+            "description": "Easy creation of slugs for your Eloquent models in Laravel",
+            "homepage": "https://github.com/cviebrock/eloquent-sluggable",
+            "keywords": [
+                "eloquent",
+                "eloquent-sluggable",
+                "laravel",
+                "lumen",
+                "slug",
+                "sluggable"
+            ],
+            "support": {
+                "issues": "https://github.com/cviebrock/eloquent-sluggable/issues",
+                "source": "https://github.com/cviebrock/eloquent-sluggable/tree/11.0.1"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/cviebrock",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-11-29T01:32:17+00:00"
+        },
         {
             "name": "dasprid/enum",
             "version": "1.0.6",
diff --git a/config/computerScienceResource.php b/config/computerScienceResource.php
index 80ca81d6..bc587fec 100644
--- a/config/computerScienceResource.php
+++ b/config/computerScienceResource.php
@@ -2,6 +2,6 @@
 
 return [
     'platforms' => ['book', 'podcast', 'youtube_channel', 'blog', 'website', 'organization', 'service', 'bootcamp', 'newsletter', 'workshop', 'course', 'forum', 'mobile_app', 'desktop_app', 'magazine'],
-    'difficulties' => ['beginner', 'industry_simple', 'industry_standard', 'industry_professional', 'academic'],
+    'difficulties' => ['children', 'beginner', 'industry_simple', 'industry_standard', 'industry_professional', 'academic'],
     'pricings' => ['free', 'paid', 'freemium'],
 ];
diff --git a/database/migrations/2025_01_24_171530_create_computer_science_resources_table.php b/database/migrations/2025_01_24_171530_create_computer_science_resources_table.php
index 9e5ccf9a..60b8cff3 100644
--- a/database/migrations/2025_01_24_171530_create_computer_science_resources_table.php
+++ b/database/migrations/2025_01_24_171530_create_computer_science_resources_table.php
@@ -15,7 +15,7 @@ public function up(): void
         if (! Schema::hasTable('computer_science_resources')) {
             Schema::create('computer_science_resources', function (Blueprint $table) {
                 $table->id();
-
+                $table->string('slug')->unique();
                 // User who posted
                 $table->foreignIdFor(User::class);
 
@@ -28,7 +28,7 @@ public function up(): void
 
                 $table->set('platforms', ['book', 'podcast', 'youtube_channel', 'blog', 'website', 'organization', 'service', 'bootcamp', 'newsletter', 'workshop', 'course', 'forum', 'mobile_app', 'desktop_app', 'magazine'])
                     ->index();
-                $table->enum('difficulty', ['beginner', 'industry_simple', 'industry_standard', 'industry_professional', 'academic'])
+                $table->enum('difficulty', ['children', 'beginner', 'industry_simple', 'industry_standard', 'industry_professional', 'academic'])
                     ->index();
                 $table->enum('pricing', ['free', 'premium', 'paid', 'freemium'])
                     ->index();
diff --git a/database/migrations/2025_03_24_154128_create_resource_edits_table.php b/database/migrations/2025_03_24_154128_create_resource_edits_table.php
index a1174203..93227230 100644
--- a/database/migrations/2025_03_24_154128_create_resource_edits_table.php
+++ b/database/migrations/2025_03_24_154128_create_resource_edits_table.php
@@ -15,6 +15,7 @@ public function up(): void
     {
         Schema::create('resource_edits', function (Blueprint $table) {
             $table->id();
+            $table->string('slug')->unique();
             $table->timestamps();
 
             // The resource we are editting
diff --git a/resources/js/Components/Comments/SortUpvotesByDropdown.vue b/resources/js/Components/Comments/SortUpvotesByDropdown.vue
index 0f6dda9c..a9ce3056 100644
--- a/resources/js/Components/Comments/SortUpvotesByDropdown.vue
+++ b/resources/js/Components/Comments/SortUpvotesByDropdown.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, defineEmits } from "vue";
-import Dropdown from 'primevue/dropdown';
+import { Select } from "primevue";
 
 const props = defineProps({
     initialValue: {
@@ -28,7 +28,7 @@ const emit = defineEmits(['change'])
 <template>
     <div class="flex items-center gap-2 py-4">
         <label class="font-semibold text-gray-700">Sort by:</label>
-        <Dropdown
+        <Select
             v-model="selectedSort"
             :options="sortOptions"
             optionLabel="label"
diff --git a/resources/js/Components/Navbar/UserDropdown.vue b/resources/js/Components/Navbar/UserDropdown.vue
index 461afaf1..f740c85e 100644
--- a/resources/js/Components/Navbar/UserDropdown.vue
+++ b/resources/js/Components/Navbar/UserDropdown.vue
@@ -20,15 +20,6 @@ const logout = () => {
     router.post(route('logout'));
 };
 
-const alignmentClasses = computed(() => {
-    if (props.align === 'left') {
-        return 'origin-top-left left-0';
-    } else if (props.align === 'right') {
-        return 'origin-top-right right-0';
-    } else {
-        return 'origin-top';
-    }
-});
 </script>
 
 <template>
diff --git a/resources/js/Components/ResourceReviews.vue b/resources/js/Components/ResourceReviews.vue
index a1e82e6e..cf63fb86 100644
--- a/resources/js/Components/ResourceReviews.vue
+++ b/resources/js/Components/ResourceReviews.vue
@@ -20,6 +20,10 @@ const props = defineProps({
         type: Number,
         required: true,
     },
+    resourceSlug: {
+        type: String,
+        required: true,
+    },
 });
 
 const showForm = ref(false);
@@ -52,6 +56,7 @@ const iconClose = isEdittingMode ? "mdi:close" : "mdi:eye-off";
         <div v-show="showForm" class="mb-8">
             <CreateResourceReview
             :resource-id="props.resourceId"
+            :resource-slug="props.resourceSlug"
             :resource-review="props.userReview"
             :is-editing-mode="isEdittingMode"
             />
diff --git a/resources/js/Components/Resources/ResourceDescription.vue b/resources/js/Components/Resources/ResourceDescription.vue
new file mode 100644
index 00000000..97811fab
--- /dev/null
+++ b/resources/js/Components/Resources/ResourceDescription.vue
@@ -0,0 +1,130 @@
+<script setup>
+import { defineProps } from 'vue';
+import { Icon } from '@iconify/vue';
+import StarRating from '@/Components/StarRating/StarRating.vue';
+import { platformIcons, pricingIcons, difficultyIcons } from '@/Helpers/icons';
+import { platformLabels, pricingLabels, difficultyLabels } from '@/Helpers/labels';
+
+const props = defineProps({
+    resource: {
+        type: Object,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <div class="flex-grow w-full">
+        <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between mb-4 gap-4">
+            <div class="flex items-center gap-3">
+                <h1 class="text-3xl font-bold">
+                    {{ props.resource.name }}
+                </h1>
+                <a
+                    :href="props.resource.page_url"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-gray-400 hover:text-primary transition-colors duration-200"
+                >
+                    <Icon icon="mdi:external-link" width="24" height="24" />
+                </a>
+            </div>
+            <div class="flex flex-col gap-4">
+                <!-- Overall Rating with Review Count -->
+                <div class="flex items-center gap-4">
+                    <div class="flex items-center gap-2">
+                        <StarRating
+                            :model-value="Number(props.resource.review_summary?.overall_rating)"
+                            :size="23"
+                        />
+                    </div>
+                    <div class="inline-flex items-center gap-1 text-lg font-medium text-gray-700 dark:text-gray-300">
+                        <Icon icon="mdi:account-group" width="20" height="20" />
+                        {{ props.resource.review_summary?.review_count || 0 }}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <p class="text-gray-700 mb-6 text-base leading-relaxed">
+            {{ props.resource.description }}
+        </p>
+
+        <!-- Resource Metadata Section -->
+        <div class="flex flex-col gap-3 mb-4">
+            <!-- Row 1: Resource Properties -->
+            <div class="flex flex-wrap items-center gap-4 text-sm">
+                <!-- Difficulty -->
+                <div v-if="props.resource.difficulty" class="flex items-center gap-1.5 bg-gray-50 dark:bg-gray-800/50 px-3 py-1 rounded-md">
+                    <span class="font-semibold text-gray-900 dark:text-gray-100">Level:</span>
+                    <span class="inline-flex items-center gap-1 text-gray-700 dark:text-gray-300">
+                        <Icon :icon="difficultyIcons[props.resource.difficulty]" width="16" height="16" />
+                        {{ difficultyLabels[props.resource.difficulty] }}
+                    </span>
+                </div>
+
+                <!-- Pricing -->
+                <div class="flex items-center gap-1.5 bg-gray-50 dark:bg-gray-800/50 px-3 py-1 rounded-md">
+                    <span class="font-semibold text-gray-900 dark:text-gray-100">Pricing:</span>
+                    <span class="inline-flex items-center gap-1 text-gray-700 dark:text-gray-300">
+                        <Icon :icon="pricingIcons[props.resource.pricing]" width="16" height="16" />
+                        {{ pricingLabels[props.resource.pricing] }}
+                    </span>
+                </div>
+
+                <!-- Platforms -->
+                <div class="flex items-center gap-1.5 bg-gray-50 dark:bg-gray-800/50 px-3 py-1 rounded-md">
+                    <span class="font-semibold text-gray-900 dark:text-gray-100">Platforms:</span>
+                    <div class="inline-flex flex-wrap items-center gap-2 text-gray-700 dark:text-gray-300">
+                        <span v-for="type in props.resource.platforms" :key="type" class="inline-flex items-center gap-1">
+                            <Icon :icon="platformIcons[type.trim()]" width="16" height="16" />
+                            {{ platformLabels[type.trim()] }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Row 2: Tags -->
+            <div class="flex flex-wrap items-center gap-4 text-sm">
+                <!-- Topic Tags -->
+                <div v-if="props.resource.topic_tags?.length" class="flex items-center gap-1 px-2 py-1 rounded-md">
+                    <span class="inline-flex items-center gap-1 font-semibold text-blue-700 dark:text-blue-200">
+                        <Icon icon="mdi:bookmark" width="14" height="14" />
+                        Topics:
+                    </span>
+                    <div class="inline-flex flex-wrap items-center gap-0.5">
+                        <span v-for="tag in props.resource.topic_tags" :key="tag" class="inline-flex items-center gap-1 bg-blue-100/50 dark:bg-blue-800/30 px-2 py-0.5 rounded-full text-blue-700 dark:text-blue-200">
+                            {{ tag }}
+                        </span>
+                    </div>
+                </div>
+
+                <!-- Programming Language Tags -->
+                <div v-if="props.resource.programming_language_tags?.length" class="flex items-center gap-1.5 px-2 py-1 rounded-md">
+                    <span class="inline-flex items-center gap-1 font-semibold text-purple-700 dark:text-purple-200">
+                        <Icon icon="mdi:language-typescript" width="14" height="14" />
+                        Languages:
+                    </span>
+                    <div class="inline-flex flex-wrap items-center gap-0.5">
+                        <span v-for="tag in props.resource.programming_language_tags" :key="tag" class="inline-flex items-center gap-1 bg-purple-100/50 dark:bg-purple-800/30 px-2 py-0.5 rounded-full text-purple-700 dark:text-purple-200">
+                            {{ tag }}
+                        </span>
+                    </div>
+                </div>
+
+                <!-- General Tags -->
+                <div v-if="props.resource.general_tags?.length" class="flex items-center gap-1.5 px-2 py-1 rounded-md">
+                    <span class="inline-flex items-center gap-1 font-semibold text-yellow-700 dark:text-yellow-200">
+                        <Icon icon="mdi:tag" width="14" height="14" />
+                        Tags:
+                    </span>
+                    <div class="inline-flex flex-wrap items-center gap-0.5">
+                        <span v-for="tag in props.resource.general_tags" :key="tag" class="inline-flex items-center gap-1 bg-yellow-100/50 dark:bg-yellow-800/30 px-2 py-0.5 rounded-full text-yellow-700 dark:text-yellow-200">
+                            {{ tag }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Components/Resources/ResourceDetailedRatings.vue b/resources/js/Components/Resources/ResourceDetailedRatings.vue
new file mode 100644
index 00000000..e51df96f
--- /dev/null
+++ b/resources/js/Components/Resources/ResourceDetailedRatings.vue
@@ -0,0 +1,68 @@
+<script setup>
+import { defineProps } from "vue";
+import { Icon } from "@iconify/vue";
+import StarRating from "@/Components/StarRating/StarRating.vue";
+
+const props = defineProps({
+    reviewSummary: {
+        type: Object,
+        required: true,
+    },
+});
+
+const ratings = [
+    {
+        key: "community_rating",
+        label: "Community",
+        icon: "mdi:account-group",
+    },
+    {
+        key: "teaching_clarity_rating",
+        label: "Teaching",
+        icon: "mdi:school",
+    },
+    {
+        key: "engagement_rating",
+        label: "Engagement",
+        icon: "mdi:thumb-up",
+    },
+    {
+        key: "practicality_rating",
+        label: "Practicality",
+        icon: "mdi:tools",
+    },
+    {
+        key: "user_friendliness_rating",
+        label: "User Friendly",
+        icon: "mdi:account-heart",
+    },
+    {
+        key: "updates_rating",
+        label: "Updates",
+        icon: "mdi:update",
+    },
+];
+</script>
+
+<template>
+    <div class="flex-1 flex justify-center items-center">
+        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-8">
+            <div
+                v-for="rating in ratings"
+                :key="rating.key"
+                class="flex flex-col items-center"
+            >
+                <label
+                    class="flex items-center gap-2 text-sm font-semibold text-gray-600 mb-2"
+                >
+                    <Icon :icon="rating.icon" class="w-4 h-4" />
+                    {{ rating.label }}
+                </label>
+                <StarRating
+                    :model-value="Number(props.reviewSummary?.[rating.key])"
+                    :size="20"
+                />
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Components/Resources/ResourceEdit/ProposeEditsButton.vue b/resources/js/Components/Resources/ResourceEdit/ProposeEditsButton.vue
index 34f1469a..81c0aea1 100644
--- a/resources/js/Components/Resources/ResourceEdit/ProposeEditsButton.vue
+++ b/resources/js/Components/Resources/ResourceEdit/ProposeEditsButton.vue
@@ -4,8 +4,8 @@ import PrimaryButton from '@/Components/PrimaryButton.vue';
 import { Icon } from '@iconify/vue';
 
 const props = defineProps({
-    resourceId: {
-        type: Number,
+    resourceSlug: {
+        type: String,
         required: true,
     },
 });
@@ -13,7 +13,7 @@ const props = defineProps({
 
 <template>
     <div class="flex justify-end mb-4">
-        <Link :href="route('resource_edits.create', { computerScienceResource: props.resourceId })">
+        <Link :href="route('resource_edits.create', { slug: props.resourceSlug })">
             <PrimaryButton class="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700 transition">
                 <Icon icon="mdi:pencil" class="w-5 h-5" />
                 <span>Propose Edits</span>
diff --git a/resources/js/Components/Resources/ResourceEdit/ResourceEdits.vue b/resources/js/Components/Resources/ResourceEdit/ResourceEdits.vue
index 19e43408..2203051c 100644
--- a/resources/js/Components/Resources/ResourceEdit/ResourceEdits.vue
+++ b/resources/js/Components/Resources/ResourceEdit/ResourceEdits.vue
@@ -36,7 +36,7 @@ const props = defineProps({
                         <Link
                             :href="
                                 route('resource_edits.show', {
-                                    resourceEdits: edit.id,
+                                    slug: edit.slug,
                                 })
                                 "
                         >
diff --git a/resources/js/Components/Resources/ResourceItem.vue b/resources/js/Components/Resources/ResourceItem.vue
index b6815421..22686b16 100644
--- a/resources/js/Components/Resources/ResourceItem.vue
+++ b/resources/js/Components/Resources/ResourceItem.vue
@@ -43,7 +43,7 @@ const emit = defineEmits(["upvote", "downvote"]);
             <div class="flex flex-col lg:flex-row justify-between items-start mb-2 w-full gap-2">
                 <div class="flex items-center gap-3">
                     <Link
-                        :href="route('resources.show', { computerScienceResource: resource.id })"
+                        :href="route('resources.show', { slug: resource.slug })"
                         class="group"
                     >
                         <h2 class="text-lg font-semibold tracking-tight text-gray-900 dark:text-gray-100 group-hover:text-primary transition-colors duration-200 font-sans">
diff --git a/resources/js/Components/Resources/ResourceUpvoteSorting.vue b/resources/js/Components/Resources/ResourceUpvoteSorting.vue
index 922c82a0..6cede49a 100644
--- a/resources/js/Components/Resources/ResourceUpvoteSorting.vue
+++ b/resources/js/Components/Resources/ResourceUpvoteSorting.vue
@@ -4,8 +4,8 @@ import { defineProps } from 'vue';
 import SortUpvotesByDropdown from "@/Components/Comments/SortUpvotesByDropdown.vue";
 
 const props = defineProps({
-    resourceId: {
-        type: Number,
+    resourceSlug: {
+        type: String,
         required: true
     },
     initialValue: {
@@ -21,7 +21,7 @@ const props = defineProps({
 function handleSortChange(newSortType) {
     // Change the sort_by parameter
     const baseUrl = route('resources.show', {
-        computerScienceResource: props.resourceId,
+        slug: props.resourceSlug,
         tab: props.tab,
     });
 
diff --git a/resources/js/Components/Resources/Reviews/CreateResourceReview.vue b/resources/js/Components/Resources/Reviews/CreateResourceReview.vue
index c39ee72c..cb2f3993 100644
--- a/resources/js/Components/Resources/Reviews/CreateResourceReview.vue
+++ b/resources/js/Components/Resources/Reviews/CreateResourceReview.vue
@@ -21,6 +21,10 @@ const props = defineProps({
         type: Number,
         required: true,
     },
+    resourceSlug: {
+        type: String,
+        required: true,
+    },
     isEditingMode: {
         type: Boolean,
         default: false,
@@ -81,8 +85,8 @@ const submitReview = async (event) => {
     isSubmitting.value = true;
 
     const url = props.isEditingMode
-        ? route("reviews.update", { computerScienceResource: props.resourceId })
-        : route("reviews.store", { computerScienceResource: props.resourceId });
+        ? route("reviews.update", { computerScienceResource: props.resourceSlug })
+        : route("reviews.store", { computerScienceResource: props.resourceSlug });
 
     const method = props.isEditingMode ? "put" : "post";
 
@@ -91,14 +95,15 @@ const submitReview = async (event) => {
             // Clear localStorage on successful submission
             clearLocalStorage();
 
-            const routeParams = { computerScienceResource: props.resourceId };
+            const routeParams = { slug: props.resourceSlug };
             if (props.isEditingMode) {
                 routeParams.tab = "reviews";
                 routeParams.sort_by = "recently_updated";
             } else {
                 routeParams.sort_by = "latest";
             }
-            router.visit(route("resources.show", routeParams));
+            console.log(routeParams);
+            router.visit(route('resources.show', routeParams));
         })
         .catch((err) => {
             isSubmitting.value = false;
@@ -115,6 +120,7 @@ const submitReview = async (event) => {
         v-if="isDataLoaded"
         class="mx-auto bg-white shadow-lg rounded-2xl p-6 relative"
     >
+    {{ props }}
         <FormSaverChip
             :is-saved="isSavedToLocalStorage"
             :has-content="hasFormContent"
diff --git a/resources/js/Components/Resources/Reviews/ToggleCreateReview.vue b/resources/js/Components/Resources/Reviews/ToggleCreateReview.vue
index 07ae6fc2..7a379d58 100644
--- a/resources/js/Components/Resources/Reviews/ToggleCreateReview.vue
+++ b/resources/js/Components/Resources/Reviews/ToggleCreateReview.vue
@@ -13,6 +13,10 @@ const props = defineProps({
         type: Number,
         required: true,
     },
+    resourceSlug: {
+        type: String,
+        required: true,
+    },
 });
 
 const isEditingMode = computed(() => props.userReview !== null);
@@ -51,6 +55,7 @@ const buttonIcon = computed(() => {
         <div v-show="showForm" class="mb-8">
             <CreateResourceReview
                 :resource-id="props.resourceId"
+                :resource-slug="props.resourceSlug"
                 :resource-review="props.userReview"
                 :is-editing-mode="isEditingMode"
             />
diff --git a/resources/js/Components/StarRating/StarRating.vue b/resources/js/Components/StarRating/StarRating.vue
index 4375481c..01fcc6f3 100644
--- a/resources/js/Components/StarRating/StarRating.vue
+++ b/resources/js/Components/StarRating/StarRating.vue
@@ -3,78 +3,60 @@ import { Icon } from "@iconify/vue";
 import { computed } from "vue";
 
 const props = defineProps({
-    modelValue: {
-        type: Number,
-        default: 0
-    },
-    maxStars: {
-        type: Number,
-        default: 5
-    },
-    size: {
-        type: Number,
-        default: 18
-    }
+    modelValue: { type: Number, default: 0 },
+    maxStars: { type: Number, default: 5 },
+    size: { type: Number, default: 18 },
 });
 
-const formattedRating = computed(() => {
-    return parseFloat((props.modelValue || 0).toFixed(2));
-});
+const formattedRating = computed(() => (props.modelValue || 0).toFixed(2));
 
 const stars = computed(() => {
     const rating = props.modelValue || 0;
-    const fullStars = Math.floor(rating);
-    const hasHalf = rating % 1 >= 0.5;
-    const emptyStars = props.maxStars - fullStars - (hasHalf ? 1 : 0);
-
-    return {
-        full: fullStars,
-        hasHalf,
-        empty: emptyStars
-    };
+    const full = Math.floor(rating);
+    const half = rating % 1 >= 0.5;
+    const empty = props.maxStars - full - (half ? 1 : 0);
+    return { full, hasHalf: half, empty };
 });
-
-const getStarClass = (type) => {
-    const colorClass = {
-        full: 'text-orange-500',
-        half: 'text-orange-500',
-        empty: 'text-gray-400'
-    };
-
-    return colorClass[type];
-};
+const getStarClass = (type) =>
+    ({
+        full: "text-orange-500",
+        half: "text-orange-500",
+        empty: "text-gray-400",
+    }[type]);
 </script>
 
 <template>
-    <div class="inline-flex items-center">
-        <span class="mr-1 text-sm font-medium text-gray-600">{{ formattedRating }}</span>
-        <!-- Full stars -->
-        <Icon
+    <div class="inline-flex items-center flex-wrap gap-1">
+        <span class="text-sm font-medium text-gray-600">
+            {{ formattedRating }}
+        </span>
+        <div class="inline-flex items-center">
+            <!-- Full stars -->
+            <Icon
             v-for="i in stars.full"
             :key="'full-' + i"
             icon="material-symbols:star-rounded"
             :class="getStarClass('full')"
             :width="size"
             :height="size"
-        />
-
-        <!-- Half star -->
-        <Icon
+            />
+            <!-- Half star -->
+            <Icon
             v-if="stars.hasHalf"
             icon="material-symbols:star-half-rounded"
             :class="getStarClass('half')"
             :width="size"
             :height="size"
-        />
-
-        <!-- Empty stars -->
-        <Icon
+            />
+            <!-- Empty stars -->
+            <Icon
             v-for="i in stars.empty"
             :key="'empty-' + i"
             icon="material-symbols:star-outline-rounded"
             :class="getStarClass('empty')"
             :width="size"
             :height="size"
-        />
+            />
+        </div>
     </div>
 </template>
diff --git a/resources/js/Pages/ResourceEdits/Create.vue b/resources/js/Pages/ResourceEdits/Create.vue
index 735b30b7..8276ade6 100644
--- a/resources/js/Pages/ResourceEdits/Create.vue
+++ b/resources/js/Pages/ResourceEdits/Create.vue
@@ -144,7 +144,7 @@ const submit = async () => {
                         <BackButton
                             :route="
                                 route('resources.show', {
-                                    computerScienceResource: props.resource.id,
+                                    slug: props.resource.slug,
                                     tab: 'edits',
                                 })
                             "
diff --git a/resources/js/Pages/ResourceEdits/Show.vue b/resources/js/Pages/ResourceEdits/Show.vue
index 92bbda61..104cbd36 100644
--- a/resources/js/Pages/ResourceEdits/Show.vue
+++ b/resources/js/Pages/ResourceEdits/Show.vue
@@ -110,8 +110,7 @@ const hasChanges = computed(() => changedFields.value.length > 0);
                         <BackButton
                             :route="
                                 route('resources.show', {
-                                    computerScienceResource:
-                                        originalResource.id,
+                                    slug: originalResource.slug,
                                     tab: 'edits',
                                 })
                             "
@@ -241,9 +240,7 @@ const hasChanges = computed(() => changedFields.value.length > 0);
                                         <Link
                                             :href="
                                                 route('resources.show', {
-                                                    computerScienceResource:
-                                                        originalResource
-                                                            .id,
+                                                    slug: originalResource.slug,
                                                 })
                                             "
                                             class="group"
diff --git a/resources/js/Pages/Resources/Show.vue b/resources/js/Pages/Resources/Show.vue
index 4d01b1c9..14a3daf1 100644
--- a/resources/js/Pages/Resources/Show.vue
+++ b/resources/js/Pages/Resources/Show.vue
@@ -1,23 +1,20 @@
 <script setup>
-import { Head, Deferred, Link } from "@inertiajs/vue3";
+import { Deferred, Link } from "@inertiajs/vue3";
 import AppLayout from "@/Layouts/AppLayout.vue";
 import UpvoteResource from "@/Components/Upvote/Upvotable.vue";
-import { pricingLabels, difficultyLabels } from "@/Helpers/labels.js";
 import ResourceReviews from "@/Components/Resources/Reviews/ResourceReviews.vue";
 import ToggleCreateReview from "@/Components/Resources/Reviews/ToggleCreateReview.vue";
 import Commentable from "@/Components/Comments/Commentable.vue";
 import ResourceEdits from "@/Components/Resources/ResourceEdit/ResourceEdits.vue";
 import ResourceUpvoteSorting from "@/Components/Resources/ResourceUpvoteSorting.vue";
 import { getConfigData } from "@/Helpers/config";
-import StarRating from "@/Components/StarRating/StarRating.vue";
-import { Icon } from "@iconify/vue";
-import { platformIcons, pricingIcons, difficultyIcons } from "@/Helpers/icons";
-import { platformLabels } from "@/Helpers/labels";
 import LoadingAnimation from "@/Components/LoadingAnimation.vue";
 import UserProfile from "@/Components/Profile/UserProfile.vue";
 import ProposeEditsButton from "@/Components/Resources/ResourceEdit/ProposeEditsButton.vue";
 import ResourceThumbnail from "@/Components/Resources/ResourceThumbnail.vue";
 import ResourceEditsFAQ from "@/Components/Resources/ResourceEdit/ResourceEditsFAQ.vue";
+import ResourceDescription from "@/Components/Resources/ResourceDescription.vue";
+import ResourceDetailedRatings from "@/Components/Resources/ResourceDetailedRatings.vue";
 
 const props = defineProps({
     tab: {
@@ -85,413 +82,13 @@ const sortingType = urlParams.get("sort_by") || "top";
                             </div>
 
                             <!-- Main content column -->
-                            <div class="flex-grow w-full">
-                                <div
-                                    class="flex flex-col sm:flex-row sm:items-start sm:justify-between mb-4 gap-4"
-                                >
-                                    <div class="flex items-center gap-3">
-                                        <h1 class="text-3xl font-bold">
-                                            {{ props.resource.name }}
-                                        </h1>
-                                        <a
-                                            :href="props.resource.page_url"
-                                            target="_blank"
-                                            rel="noopener noreferrer"
-                                            class="text-gray-400 hover:text-primary transition-colors duration-200"
-                                        >
-                                            <Icon
-                                                icon="mdi:external-link"
-                                                width="24"
-                                                height="24"
-                                            />
-                                        </a>
-                                    </div>
-                                    <div class="flex flex-col gap-4">
-                                        <!-- Overall Rating with Review Count -->
-                                        <div class="flex items-center gap-4">
-                                            <div
-                                                class="flex items-center gap-2"
-                                            >
-                                                <StarRating
-                                                    :model-value="
-                                                        Number(
-                                                            props.resource
-                                                                .review_summary
-                                                                ?.overall_rating
-                                                        )
-                                                    "
-                                                    :size="23"
-                                                />
-                                            </div>
-                                            <div
-                                                class="inline-flex items-center gap-1 text-lg font-medium text-gray-700 dark:text-gray-300"
-                                            >
-                                                <Icon
-                                                    icon="mdi:account-group"
-                                                    width="20"
-                                                    height="20"
-                                                />
-                                                {{
-                                                    props.resource
-                                                        .review_summary
-                                                        ?.review_count || 0
-                                                }}
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <p
-                                    class="text-gray-700 mb-6 text-base leading-relaxed"
-                                >
-                                    {{ props.resource.description }}
-                                </p>
-
-                                <!-- Resource Metadata Section -->
-                                <div class="flex flex-col gap-3 mb-4">
-                                    <!-- Row 1: Resource Properties -->
-                                    <div
-                                        class="flex flex-wrap items-center gap-4 text-sm"
-                                    >
-                                        <!-- Difficulty -->
-                                        <div
-                                            v-if="props.resource.difficulty"
-                                            class="flex items-center gap-1.5 bg-gray-50 dark:bg-gray-800/50 px-3 py-1 rounded-md"
-                                        >
-                                            <span
-                                                class="font-semibold text-gray-900 dark:text-gray-100"
-                                                >Level:</span
-                                            >
-                                            <span
-                                                class="inline-flex items-center gap-1 text-gray-700 dark:text-gray-300"
-                                            >
-                                                <Icon
-                                                    :icon="
-                                                        difficultyIcons[
-                                                            props.resource
-                                                                .difficulty
-                                                        ]
-                                                    "
-                                                    width="16"
-                                                    height="16"
-                                                />
-                                                {{
-                                                    difficultyLabels[
-                                                        props.resource
-                                                            .difficulty
-                                                    ]
-                                                }}
-                                            </span>
-                                        </div>
-
-                                        <!-- Pricing -->
-                                        <div
-                                            class="flex items-center gap-1.5 bg-gray-50 dark:bg-gray-800/50 px-3 py-1 rounded-md"
-                                        >
-                                            <span
-                                                class="font-semibold text-gray-900 dark:text-gray-100"
-                                                >Pricing:</span
-                                            >
-                                            <span
-                                                class="inline-flex items-center gap-1 text-gray-700 dark:text-gray-300"
-                                            >
-                                                <Icon
-                                                    :icon="
-                                                        pricingIcons[
-                                                            props.resource
-                                                                .pricing
-                                                        ]
-                                                    "
-                                                    width="16"
-                                                    height="16"
-                                                />
-                                                {{
-                                                    pricingLabels[
-                                                        props.resource.pricing
-                                                    ]
-                                                }}
-                                            </span>
-                                        </div>
-
-                                        <!-- Platforms -->
-                                        <div
-                                            class="flex items-center gap-1.5 bg-gray-50 dark:bg-gray-800/50 px-3 py-1 rounded-md"
-                                        >
-                                            <span
-                                                class="font-semibold text-gray-900 dark:text-gray-100"
-                                                >Platforms:</span
-                                            >
-                                            <div
-                                                class="inline-flex flex-wrap items-center gap-2 text-gray-700 dark:text-gray-300"
-                                            >
-                                                <span
-                                                    v-for="type in props
-                                                        .resource.platforms"
-                                                    :key="type"
-                                                    class="inline-flex items-center gap-1"
-                                                >
-                                                    <Icon
-                                                        :icon="
-                                                            platformIcons[
-                                                                type.trim()
-                                                            ]
-                                                        "
-                                                        width="16"
-                                                        height="16"
-                                                    />
-                                                    {{
-                                                        platformLabels[
-                                                            type.trim()
-                                                        ]
-                                                    }}
-                                                </span>
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <!-- Row 2: Tags -->
-                                    <div
-                                        class="flex flex-wrap items-center gap-4 text-sm"
-                                    >
-                                        <!-- Topic Tags -->
-                                        <div
-                                            v-if="resource.topic_tags?.length"
-                                            class="flex items-center gap-1 px-2 py-1 rounded-md"
-                                        >
-                                            <span
-                                                class="inline-flex items-center gap-1 font-semibold text-blue-700 dark:text-blue-200"
-                                            >
-                                                <Icon
-                                                    icon="mdi:bookmark"
-                                                    width="14"
-                                                    height="14"
-                                                />
-                                                Topics:
-                                            </span>
-                                            <div
-                                                class="inline-flex flex-wrap items-center gap-0.5"
-                                            >
-                                                <span
-                                                    v-for="tag in resource.topic_tags"
-                                                    :key="tag"
-                                                    class="inline-flex items-center gap-1 bg-blue-100/50 dark:bg-blue-800/30 px-2 py-0.5 rounded-full text-blue-700 dark:text-blue-200"
-                                                >
-                                                    {{ tag }}
-                                                </span>
-                                            </div>
-                                        </div>
-
-                                        <!-- Programming Language Tags -->
-                                        <div
-                                            v-if="
-                                                resource
-                                                    .programming_language_tags
-                                                    ?.length
-                                            "
-                                            class="flex items-center gap-1.5 px-2 py-1 rounded-md"
-                                        >
-                                            <span
-                                                class="inline-flex items-center gap-1 font-semibold text-purple-700 dark:text-purple-200"
-                                            >
-                                                <Icon
-                                                    icon="mdi:language-typescript"
-                                                    width="14"
-                                                    height="14"
-                                                />
-                                                Languages:
-                                            </span>
-                                            <div
-                                                class="inline-flex flex-wrap items-center gap-0.5"
-                                            >
-                                                <span
-                                                    v-for="tag in resource.programming_language_tags"
-                                                    :key="tag"
-                                                    class="inline-flex items-center gap-1 bg-purple-100/50 dark:bg-purple-800/30 px-2 py-0.5 rounded-full text-purple-700 dark:text-purple-200"
-                                                >
-                                                    {{ tag }}
-                                                </span>
-                                            </div>
-                                        </div>
-
-                                        <!-- General Tags -->
-                                        <div
-                                            v-if="resource.general_tags?.length"
-                                            class="flex items-center gap-1.5 px-2 py-1 rounded-md"
-                                        >
-                                            <span
-                                                class="inline-flex items-center gap-1 font-semibold text-yellow-700 dark:text-yellow-200"
-                                            >
-                                                <Icon
-                                                    icon="mdi:tag"
-                                                    width="14"
-                                                    height="14"
-                                                />
-                                                Tags:
-                                            </span>
-                                            <div
-                                                class="inline-flex flex-wrap items-center gap-0.5"
-                                            >
-                                                <span
-                                                    v-for="tag in resource.general_tags"
-                                                    :key="tag"
-                                                    class="inline-flex items-center gap-1 bg-yellow-100/50 dark:bg-yellow-800/30 px-2 py-0.5 rounded-full text-yellow-700 dark:text-yellow-200"
-                                                >
-                                                    {{ tag }}
-                                                </span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+                            <ResourceDescription :resource="props.resource" />
                         </div>
                         <!-- Resource Link and Meta -->
                         <div
                             class="flex flex-col sm:flex-row sm:justify-between items-start sm:items-center"
                         >
-                            <!-- Detailed Ratings Grid -->
-                            <div class="flex-1 flex justify-center items-center">
-                                <div
-                                    class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-7"
-                                >
-                                    <!-- Community Rating -->
-                                    <div class="flex flex-col items-center">
-                                        <label
-                                            class="flex items-center gap-2 text-sm font-semibold text-gray-600 mb-2"
-                                        >
-                                            <Icon
-                                                icon="mdi:account-group"
-                                                class="w-4 h-4"
-                                            />
-                                            Community
-                                        </label>
-                                        <StarRating
-                                            :model-value="
-                                                Number(
-                                                    props.resource
-                                                        .review_summary
-                                                        ?.community_rating
-                                                )
-                                            "
-                                            :size="20"
-                                        />
-                                    </div>
-
-                                    <!-- Teaching Clarity Rating -->
-                                    <div class="flex flex-col items-center">
-                                        <label
-                                            class="flex items-center gap-2 text-sm font-semibold text-gray-600 mb-2"
-                                        >
-                                            <Icon
-                                                icon="mdi:school"
-                                                class="w-4 h-4"
-                                            />
-                                            Teaching
-                                        </label>
-                                        <StarRating
-                                            :model-value="
-                                                Number(
-                                                    props.resource
-                                                        .review_summary
-                                                        ?.teaching_clarity_rating
-                                                )
-                                            "
-                                            :size="20"
-                                        />
-                                    </div>
-
-                                    <!-- Engagement Rating -->
-                                    <div class="flex flex-col items-center">
-                                        <label
-                                            class="flex items-center gap-2 text-sm font-semibold text-gray-600 mb-2"
-                                        >
-                                            <Icon
-                                                icon="mdi:thumb-up"
-                                                class="w-4 h-4"
-                                            />
-                                            Engagement
-                                        </label>
-                                        <StarRating
-                                            :model-value="
-                                                Number(
-                                                    props.resource
-                                                        .review_summary
-                                                        ?.engagement_rating
-                                                )
-                                            "
-                                            :size="20"
-                                        />
-                                    </div>
-
-                                    <!-- Practicality Rating -->
-                                    <div class="flex flex-col items-center">
-                                        <label
-                                            class="flex items-center gap-2 text-sm font-semibold text-gray-600 mb-2"
-                                        >
-                                            <Icon
-                                                icon="mdi:tools"
-                                                class="w-4 h-4"
-                                            />
-                                            Practicality
-                                        </label>
-                                        <StarRating
-                                            :model-value="
-                                                Number(
-                                                    props.resource
-                                                        .review_summary
-                                                        ?.practicality_rating
-                                                )
-                                            "
-                                            :size="20"
-                                        />
-                                    </div>
-
-                                    <!-- User Friendliness Rating -->
-                                    <div class="flex flex-col items-center">
-                                        <label
-                                            class="flex items-center gap-2 text-sm font-semibold text-gray-600 mb-2"
-                                        >
-                                            <Icon
-                                                icon="mdi:account-heart"
-                                                class="w-4 h-4"
-                                            />
-                                            User Friendly
-                                        </label>
-                                        <StarRating
-                                            :model-value="
-                                                Number(
-                                                    props.resource
-                                                        .review_summary
-                                                        ?.user_friendliness_rating
-                                                )
-                                            "
-                                            :size="20"
-                                        />
-                                    </div>
-
-                                    <!-- Updates Rating -->
-                                    <div class="flex flex-col items-center">
-                                        <label
-                                            class="flex items-center gap-2 text-sm font-semibold text-gray-600 mb-2"
-                                        >
-                                            <Icon
-                                                icon="mdi:update"
-                                                class="w-4 h-4"
-                                            />
-                                            Updates
-                                        </label>
-                                        <StarRating
-                                            :model-value="
-                                                Number(
-                                                    props.resource
-                                                        .review_summary
-                                                        ?.updates_rating
-                                                )
-                                            "
-                                            :size="20"
-                                        />
-                                    </div>
-                                </div>
-                            </div>
+                            <ResourceDetailedRatings :review-summary="props.resource.review_summary" />
                             <div
                                 class="text-xs m-6 text-gray-500 text-right min-w-[160px] shrink-0"
                             >
@@ -523,7 +120,7 @@ const sortingType = urlParams.get("sort_by") || "top";
                             cache-for="10s"
                             :href="
                                 route('resources.show', {
-                                    computerScienceResource: props.resource.id,
+                                    slug: props.resource.slug,
                                     tab: tab.value,
                                 })
                             "
@@ -536,7 +133,7 @@ const sortingType = urlParams.get("sort_by") || "top";
                 <!-- Tab Panels -->
                 <div class="px-6 pb-6">
                     <ResourceUpvoteSorting
-                        :resource-id="props.resource.id"
+                        :resource-slug="props.resource.slug"
                         :initial-value="sortingType"
                         :tab="props.tab"
                     ></ResourceUpvoteSorting>
@@ -545,6 +142,7 @@ const sortingType = urlParams.get("sort_by") || "top";
                         <ToggleCreateReview
                             :user-review="userReview"
                             :resource-id="props.resource.id"
+                            :resource-slug="props.resource.slug"
                         />
                         <Deferred data="reviews">
                             <template #fallback>
@@ -576,7 +174,7 @@ const sortingType = urlParams.get("sort_by") || "top";
                     </div>
 
                     <div v-else-if="props.tab === 'edits'">
-                        <ProposeEditsButton :resource-id="props.resource.id" />
+                        <ProposeEditsButton :resource-slug="props.resource.slug" />
                         <ResourceEditsFAQ class="mb-5" />
                         <Deferred data="resourceEdits">
                             <template #fallback>
diff --git a/routes/web.php b/routes/web.php
index afb514e0..d346727f 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -36,7 +36,7 @@
 
     // Resource Edits
     Route::controller(ResourceEditsController::class)->group(function () {
-        Route::get('/resource/{computerScienceResource}/edit/create', 'create')->name('resource_edits.create');
+        Route::get('/resource/{slug}/edit/create', 'create')->name('resource_edits.create');
         Route::post('/resource/{computerScienceResource}/edit/', 'store')->name('resource_edits.store');
         Route::post('/resourceEdits/{resourceEdits}/merge/', 'merge')->name('resource_edits.merge');
     });
@@ -60,7 +60,7 @@
 
 Route::controller(ComputerScienceResourceController::class)->group(function () {
     Route::get('/resources', 'index')->name('resources.index');
-    Route::get('/resources/{computerScienceResource}/{tab?}', 'show')->name('resources.show');
+    Route::get('/resources/{slug}/{tab?}', 'show')->name('resources.show');
 });
 
 // Comments
@@ -74,7 +74,7 @@
 
 // Resource Edits
 Route::controller(ResourceEditsController::class)->group(function () {
-    Route::get('/resource/edit/{resourceEdits}', 'show')->name('resource_edits.show');
+    Route::get('/resource/edit/{slug}', 'show')->name('resource_edits.show');
 });
 
 require __DIR__.'/socialstream.php';
diff --git a/tests/Feature/Utils/TestingUtils.php b/tests/Feature/Utils/TestingUtils.php
index 5c5f487c..ccbf7012 100644
--- a/tests/Feature/Utils/TestingUtils.php
+++ b/tests/Feature/Utils/TestingUtils.php
@@ -79,7 +79,7 @@ public function approveResourceEdit(ResourceEdits $edit)
         // Merge the edit
         $mergeResponse = $this->post(route('resource_edits.merge', ['resourceEdits' => $edit->id]));
         $mergeResponse
-            ->assertRedirect(route('resources.show', ['computerScienceResource' => $edit->computer_science_resource_id]))
+            ->assertRedirect(route('resources.show', ['slug' => $edit->resource->slug]))
             ->assertSessionHas('success', 'Successfully merged new changed!');
     }