diff --git a/.github/build-package-pages.sh b/.github/build-package-pages.sh
index 8be2bd4..8f94f8e 100755
--- a/.github/build-package-pages.sh
+++ b/.github/build-package-pages.sh
@@ -1,12 +1,19 @@
 #!/bin/bash
 # cmd: $ ./build-package-pages.sh srcJson targetPath
-# sample:  $ .github/build-package-pages.sh src/data/packages.json src/content/packages'
+# sample:  $ .github/build-package-pages.sh src/data/packages.json src/content/'
 
 for row in $(jq -r '.[] | @base64' < "$1"); do
     _jq() {
      echo "${row}" | base64 --decode | jq -r "${1}"
     }
-   touch "$2"/"$(_jq '.slug')".md
+   full_name=$(_jq '.full_name')
+
+   if [[ "$full_name" == *\/* ]] || [[ "$full_name" == *\\* ]]
+   then
+      mkdir -p "$2/+$full_name"
+      rm -rf "$2/+$full_name"
+   fi
+   touch "$2"/"+$(_jq '.full_name')".md
    content="---
 type: page
 title: \"$(_jq '.name')\"
@@ -14,5 +21,5 @@ maintainer: \"$(_jq '.maintainer')\"
 Description: \"$(_jq '.desc' | tr '\"' "'")\"
 layout: \"package-detail\"
 ---"
-   echo "$content" > "$2"/"$(_jq '.slug')".md
+   echo "$content" > "$2"/"+$(_jq '.full_name')".md
 done
\ No newline at end of file
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
index 9f74149..700ceff 100644
--- a/.github/workflows/cd.yml
+++ b/.github/workflows/cd.yml
@@ -37,7 +37,7 @@ jobs:
       uses: getneil/jq-action@v1
       id: version
       with:
-        cmd: '.github/build-package-pages.sh src/data/packages.json src/content/packages'
+        cmd: '.github/build-package-pages.sh src/data/packages.json src/content'
 
     - name: Download package thumbnails from Airtable
       uses: getneil/jq-action@v1
diff --git a/.github/workflows/staging.yml b/.github/workflows/staging.yml
index 1da2b30..01cc9f5 100644
--- a/.github/workflows/staging.yml
+++ b/.github/workflows/staging.yml
@@ -45,7 +45,7 @@ jobs:
     - name: Create Package Detail Pages from packages.json
       uses: getneil/jq-action@v1
       with:
-        cmd: '.github/build-package-pages.sh src/data/packages.json src/content/packages'
+        cmd: '.github/build-package-pages.sh src/data/packages.json src/content'
 
     - name: Download package thumbnails from Airtable
       uses: getneil/jq-action@v1
diff --git a/.gitignore b/.gitignore
index a142cf4..79a2bcb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,4 +27,6 @@ cdk.out
 
 # initially committed _sample.md only the rest will be ignored
 src/content/packages/*
-src/static/Images/packages/*
\ No newline at end of file
+src/static/Images/packages/*
+
+src/content/+*
\ No newline at end of file
diff --git a/README.md b/README.md
index 80eed6b..7d22d9d 100644
--- a/README.md
+++ b/README.md
@@ -29,10 +29,11 @@ The detail pages of each package are not committed to the repository for the
 simple reason of that would be too much repeating data.
 Execute the following command just once per version of
 `/src/data/packages.json`. This will create the package detail pages in
-`/src/content/packages/[package_slug].md`.
+`/src/content/+[package.full_name].md`.
+Which resembles the installation tag in tea cli
 
 ```sh
-.github/build-package-pages.sh src/data/packages.json src/content/packages
+.github/build-package-pages.sh src/data/packages.json src/content
 ```
 
 
diff --git a/src/content/+.md b/src/content/+.md
new file mode 100644
index 0000000..4403dec
--- /dev/null
+++ b/src/content/+.md
@@ -0,0 +1,5 @@
+---
+type: page
+title: "packages"
+layout: "packages"
+---
diff --git a/src/content/packages/_sample.md b/src/content/packages/_sample.md
deleted file mode 100644
index 4695330..0000000
--- a/src/content/packages/_sample.md
+++ /dev/null
@@ -1,15 +0,0 @@
-<!--
-this page will be automatically duplicated/populated
-    by .github/build-package-pages.sh
-    before build & deploy probably in Github Actions
-    values to be replaced are title and Description
-
-WARN: anything else added to this folder will be git ignored
- -->
----
-type: page
-title: "mpdecimal"
-Description: "mpdecimal"
-layout: "package-detail"
----
-
diff --git a/src/layouts/page/packages.html b/src/layouts/page/packages.html
new file mode 100644
index 0000000..83a0da0
--- /dev/null
+++ b/src/layouts/page/packages.html
@@ -0,0 +1,33 @@
+{{ define "main" }}
+
+
+
+<!-- Package Grid -->
+
+<!-- Desktop/Tablet Package Display -->
+
+  <span>
+    {{- partial "package-grid.html" . -}}
+  </span>
+
+<!-- Mobile Package Display -->
+  <!-- dont remove, it is not completely useless there is a ui bug i couldnt figure out 
+    the only solution is to keep it here. sorry - neil
+    -->
+  <span class="swiper-package-display">
+    {{- partial "swiper.html" . -}}
+  </span>
+
+<!-- Style for Swiper -->
+
+<style>
+  .grid-package-display{
+    display:block;
+  }
+  .swiper-package-display {
+    /* dont remove refer to comment above */
+    display: none;
+  }
+</style>
+
+{{ end }}
diff --git a/src/layouts/partials/package-grid.html b/src/layouts/partials/package-grid.html
index 7c1cab6..913f6ff 100644
--- a/src/layouts/partials/package-grid.html
+++ b/src/layouts/partials/package-grid.html
@@ -39,7 +39,7 @@
   }
   .package-grid {
     display: grid;
-    grid-template-columns: auto auto;
+    grid-template-columns: auto;
   }
   #loadMorePackagesBtn {
     cursor: pointer;
@@ -98,6 +98,8 @@
     popularity: 'popularity',
     last_modified: 'last_modified',
   }
+  const showAllPackages = window.location.pathname.includes("/+/");
+
   let sortBy = sortOptions.popularity; // last_modified
   let sortDirection = 'desc'; // asc
   let limit = 16;
@@ -186,7 +188,7 @@
     const packages = getPackageThumbs();
     let i = 0;
     for(const sp of packages) {
-      if (i >= limit) {
+      if (i >= limit && !showAllPackages) {
         sp.classList.add('hidden');
       } else {
         sp.classList.remove('hidden');
@@ -204,6 +206,11 @@
   }
 
   const loadMoreButton = document.getElementById('loadMorePackagesBtn');
+  if (showAllPackages) {
+    loadMoreSection.classList.add('hidden');
+  } else {
+    loadMoreSection.classList.remove('hidden');
+  }
   loadMoreButton.addEventListener('click',() => {
     limit += 16;
     refreshDisplayedPackages();
diff --git a/src/layouts/partials/package-thumbnail.html b/src/layouts/partials/package-thumbnail.html
index 263f7bc..d40a6b3 100644
--- a/src/layouts/partials/package-thumbnail.html
+++ b/src/layouts/partials/package-thumbnail.html
@@ -19,12 +19,12 @@
         <span class="package-install-no">>{{- .installs -}}&nbsp;installs</span> -->
       </p>
     </div>
-    <a href="/packages/{{- .slug -}}/">
+    <a href="/+{{- .full_name -}}/">
       {{- partial "detail-btn.html" . -}}
     </a>
   </div>
   <div class="card-body thumbnail-body-mobile">
-    <a href="/packages/{{- .slug -}}/">
+    <a href="/+{{- .full_name -}}/">
       <button class="detail-btn-mobile"><i class="icon-enter-arrow"></i>details</button>
     </a>
   </div>