diff --git a/app/services/packages_fetcher.ts b/app/services/packages_fetcher.ts
index bbc5c1c..d6e94be 100644
--- a/app/services/packages_fetcher.ts
+++ b/app/services/packages_fetcher.ts
@@ -169,11 +169,11 @@ export class PackagesFetcher {
   /**
    * Fetch a single package with its readme
    */
-  async fetchPackage(name: string) {
-    const pkg = this.packagesList.find((pkg_) => pkg_.name === name)
-    if (!pkg) throw new Error(`Cannot find package ${name}`)
+  async fetchPackage(slug: string) {
+    const pkg = this.packagesList.find((pkg_) => pkg_.slug === slug)
+    if (!pkg) throw new Error(`Cannot find package ${slug}`)
 
-    const stats = await PackageStats.findByOrFail('packageName', name)
+    const stats = await PackageStats.findByOrFail('packageName', pkg.name)
     const readme = await this.#getPackageReadme(pkg)
 
     return {
diff --git a/providers/app_provider.ts b/providers/app_provider.ts
index 59a8e44..cf5175a 100644
--- a/providers/app_provider.ts
+++ b/providers/app_provider.ts
@@ -1,6 +1,7 @@
 import edge from 'edge.js'
 import { join } from 'node:path'
 import { readFile } from 'node:fs/promises'
+import slugify from '@sindresorhus/slugify'
 import { getDirname } from '@poppinss/utils'
 import type { ApplicationService } from '@adonisjs/core/types'
 
@@ -18,6 +19,10 @@ export default class AppProvider {
     const packagesFilePath = join(getDirname(import.meta.url), '../content/build/packages.json')
     const packagesFile = JSON.parse(await readFile(packagesFilePath, 'utf-8'))
 
+    packagesFile.forEach((pkg: any) => {
+      pkg.slug = slugify(pkg.name)
+    })
+
     this.app.container.singleton(PackageFetcher, () => new PackageFetcher())
     this.app.container.bind(PackagesDataRefresher, async (resolver) => {
       return new PackagesDataRefresher(await resolver.make(PackageFetcher), packagesFile)
diff --git a/resources/pages/home/components/package_card.vue b/resources/pages/home/components/package_card.vue
index 8bddc82..5e6b8a4 100644
--- a/resources/pages/home/components/package_card.vue
+++ b/resources/pages/home/components/package_card.vue
@@ -18,7 +18,7 @@ const isV6Compatible = computed(() => props.package.compatibility?.adonis.includ
 <template>
   <Link
     class="group card relative flex cursor-pointer gap-y-2 rounded-xl px-5 py-5"
-    :href="`/packages/${package.name}`"
+    :href="`/packages/${package.slug}`"
     target="_blank"
   >
     <div class="w-full flex items-center justify-between">
diff --git a/tests/functional/commands/add_package.spec.ts b/tests/functional/commands/add_package.spec.ts
index 1a396bd..e8b0f00 100644
--- a/tests/functional/commands/add_package.spec.ts
+++ b/tests/functional/commands/add_package.spec.ts
@@ -62,7 +62,7 @@ test.group('[Commands] Add Package', (group) => {
       compatibility: { adonis: '^5.0.0' },
       firstReleaseAt: '2022-01-01',
       lastReleaseAt: '2023-01-01',
-      type: 'community',
+      type: '3rd-party',
       category: 'Database',
     })
   })
diff --git a/types/packages.ts b/types/packages.ts
index 3c20494..5ce161c 100644
--- a/types/packages.ts
+++ b/types/packages.ts
@@ -24,6 +24,11 @@ export type PackageInfo = {
    */
   name: string
 
+  /**
+   * Slug of the package
+   */
+  slug: string
+
   /**
    * Description of the package
    * Displayed as subline on the website