diff --git a/docs/make.jl b/docs/make.jl
index bae43d1e73..1d0f2ae10c 100644
--- a/docs/make.jl
+++ b/docs/make.jl
@@ -88,7 +88,7 @@ makedocs(; sitename="Lux.jl Documentation",
         repo="github.com/LuxDL/Lux.jl", devbranch="main", devurl="dev",
         deploy_url="https://lux.csail.mit.edu", deploy_decision),
     draft=false,
-    pages=pages)
+    pages)
 
 deploydocs(; repo="github.com/LuxDL/Lux.jl.git",
     push_preview=true, target="build", devbranch="main")
diff --git a/docs/src/.vitepress/config.mts b/docs/src/.vitepress/config.mts
index c111c1c44c..624755d5a1 100644
--- a/docs/src/.vitepress/config.mts
+++ b/docs/src/.vitepress/config.mts
@@ -64,7 +64,7 @@ export default defineConfig({
             { text: 'Home', link: '/' },
             { text: 'Getting Started', link: '/introduction' },
             { text: 'Benchmarks', link: 'https://lux.csail.mit.edu/benchmarks/' },
-            { text: 'Tutorials', link: '/tutorials' },
+            { text: 'Tutorials', link: '/tutorials/' },
             { text: 'Manual', link: '/manual/interface' },
             {
                 text: 'API', items: [
@@ -120,7 +120,7 @@ export default defineConfig({
             },
             "/tutorials/": {
                 text: 'Tutorials', collapsed: false, items: [
-                    { text: 'Overview', link: '/tutorials' },
+                    { text: 'Overview', link: '/tutorials/' },
                     {
                         text: 'Beginner', collapsed: false, items: [
                             { text: 'Julia & Lux for the Uninitiated', link: '/tutorials/beginner/1_Basics' },
@@ -137,6 +137,25 @@ export default defineConfig({
                     {
                         text: 'Advanced', collapsed: false, items: [
                             { text: 'Training a Neural ODE to Model Gravitational Waveforms', link: '/tutorials/advanced/1_GravitationalWaveForm' }]
+                    },
+                    {
+                        text: '3rd Party Tutorials', collapsed: true, items: [
+                            {
+                                text: 'PINNs (NeuralPDE.jl)', link: 'https://docs.sciml.ai/NeuralPDE/stable/tutorials/pdesystem/'
+                            },
+                            {
+                                text: 'UDEs (SciMLSensitivity.jl)', link: 'https://docs.sciml.ai/SciMLSensitivity/stable/tutorials/data_parallel/'
+                            },
+                            {
+                                text: 'Neural DEs (DiffEqFlux.jl)', link: 'https://docs.sciml.ai/DiffEqFlux/stable/examples/neural_ode/'
+                            },
+                            {
+                                text: 'DEQs (DeepEquilibriumNetworks.jl)', link: 'https://docs.sciml.ai/DeepEquilibriumNetworks/stable/tutorials/basic_mnist_deq/'
+                            },
+                            {
+                                text: 'Medical Image Segmentation', link: 'https://github.com/Dale-Black/ComputerVisionTutorials.jl/'
+                            }
+                        ]
                     }]
             },
             "/manual/": {
diff --git a/docs/src/assets/android-chrome-192x192.png b/docs/src/assets/android-chrome-192x192.png
deleted file mode 100644
index 55483620af..0000000000
Binary files a/docs/src/assets/android-chrome-192x192.png and /dev/null differ
diff --git a/docs/src/assets/android-chrome-512x512.png b/docs/src/assets/android-chrome-512x512.png
deleted file mode 100644
index ad2732be1f..0000000000
Binary files a/docs/src/assets/android-chrome-512x512.png and /dev/null differ
diff --git a/docs/src/assets/apple-touch-icon.png b/docs/src/assets/apple-touch-icon.png
deleted file mode 100644
index bd238f5147..0000000000
Binary files a/docs/src/assets/apple-touch-icon.png and /dev/null differ
diff --git a/docs/src/assets/favicon-16x16.png b/docs/src/assets/favicon-16x16.png
deleted file mode 100644
index 1365c74d4c..0000000000
Binary files a/docs/src/assets/favicon-16x16.png and /dev/null differ
diff --git a/docs/src/assets/favicon-32x32.png b/docs/src/assets/favicon-32x32.png
deleted file mode 100644
index a303c49e06..0000000000
Binary files a/docs/src/assets/favicon-32x32.png and /dev/null differ
diff --git a/docs/src/assets/favicon.ico b/docs/src/assets/favicon.ico
deleted file mode 100644
index c4f81393f0..0000000000
Binary files a/docs/src/assets/favicon.ico and /dev/null differ
diff --git a/docs/src/assets/site.webmanifest b/docs/src/assets/site.webmanifest
deleted file mode 100644
index 45dc8a2065..0000000000
--- a/docs/src/assets/site.webmanifest
+++ /dev/null
@@ -1 +0,0 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
diff --git a/docs/src/components/Gallery.vue b/docs/src/components/Gallery.vue
new file mode 100644
index 0000000000..e5cbed2c77
--- /dev/null
+++ b/docs/src/components/Gallery.vue
@@ -0,0 +1,39 @@
+<!-- https://codepen.io/heyDante/pen/bxEYOw -->
+
+<script setup lang="ts">
+import GalleryImage, { type Props } from './GalleryImage.vue';
+
+defineProps<{
+    images: Props[];
+}>();
+</script>
+
+<template>
+    <div class="gallery-image">
+        <GalleryImage v-for="image in images" v-bind="image" />
+    </div>
+</template>
+
+<style scoped>
+.heading {
+    text-align: center;
+    font-size: 2em;
+    letter-spacing: 1px;
+    padding: 40px;
+    color: white;
+}
+
+.gallery-image {
+    padding: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.gallery-image :deep(img) {
+    height: 350px;
+    width: 250px;
+    transform: scale(1);
+    transition: transform 0.4s ease;
+}
+</style>
\ No newline at end of file
diff --git a/docs/src/components/GalleryImage.vue b/docs/src/components/GalleryImage.vue
new file mode 100644
index 0000000000..13be515cac
--- /dev/null
+++ b/docs/src/components/GalleryImage.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { withBase } from 'vitepress'
+export interface Props {
+    href: string;
+    src: string;
+    caption: string;
+    desc: string;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+    <div class="img-box">
+        <a :href="href">
+            <img :src="withBase(src)" height="150px" alt="">
+            <div class="transparent-box1">
+                <div class="caption">
+                    <h2>{{ caption }}</h2>
+                </div>
+            </div>
+            <div class="transparent-box2">
+                <div class="subcaption">
+                    <p class="opacity-low">{{ desc }}</p>
+                </div>
+            </div>
+        </a>
+    </div>
+</template>
+
+<style scoped>
+.img-box {
+    box-sizing: content-box;
+    border-radius: 14px;
+    margin: 20px;
+    height: 350px;
+    width: 250px;
+    overflow: hidden;
+    display: inline-block;
+    color: white;
+    position: relative;
+    background-color: transparent;
+    border: 2px solid var(--vp-c-bg-alt);
+}
+
+.img-box h2 {
+    border-top: 0;
+}
+
+.img-box img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    opacity: 0.3;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.caption {
+    position: absolute;
+    bottom: 30px;
+    color: var(--vp-c-text-1);
+    left: 10px;
+    opacity: 1;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.subcaption {
+    position: absolute;
+    bottom: 5px;
+    color: var(--vp-c-text-1);
+    left: 10px;
+    opacity: 0;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.transparent-box1 {
+    height: 250px;
+    width: 250px;
+    background-color: transparent;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: background-color 0.3s ease;
+}
+
+.transparent-box2 {
+    height: 100px;
+    width: 250px;
+    background-color: transparent;
+    position: absolute;
+    top: 250px;
+    left: 0;
+    transition: background-color 0.3s ease;
+}
+
+.img-box:hover img {
+    transform: scale(1.1);
+}
+
+.img-box:hover .transparent-box1 {
+    background-color: var(--vp-c-bg-alt);
+}
+
+.img-box:hover .transparent-box2 {
+    background-color: var(--vp-c-bg-alt);
+}
+
+.img-box:hover .caption {
+    transform: translateY(-20px);
+    opacity: 1;
+}
+
+.img-box:hover .subcaption {
+    transform: translateY(-20px);
+    opacity: 1;
+}
+
+.img-box:hover {
+    border: 2px solid var(--vp-c-brand-light);
+    cursor: pointer;
+}
+
+.caption>p:nth-child(2) {
+    font-size: 0.8em;
+}
+.subcaption>p:nth-child(2) {
+    font-size: 0.8em;
+}
+
+.opacity-low {
+    opacity: 0.85;
+}
+</style>
\ No newline at end of file
diff --git a/docs/src/public/blas_optimizations.jpg b/docs/src/public/blas_optimizations.jpg
new file mode 100644
index 0000000000..d615fe7b46
Binary files /dev/null and b/docs/src/public/blas_optimizations.jpg differ
diff --git a/docs/src/public/gravitational_waveform.png b/docs/src/public/gravitational_waveform.png
new file mode 100644
index 0000000000..39ba221401
Binary files /dev/null and b/docs/src/public/gravitational_waveform.png differ
diff --git a/docs/src/public/hypernet.jpg b/docs/src/public/hypernet.jpg
new file mode 100644
index 0000000000..7539f2f86e
Binary files /dev/null and b/docs/src/public/hypernet.jpg differ
diff --git a/docs/src/public/lstm-illustrative.webp b/docs/src/public/lstm-illustrative.webp
new file mode 100644
index 0000000000..d5353deeb9
Binary files /dev/null and b/docs/src/public/lstm-illustrative.webp differ
diff --git a/docs/src/assets/lux-logo-dark.svg b/docs/src/public/lux-logo-dark.svg
similarity index 100%
rename from docs/src/assets/lux-logo-dark.svg
rename to docs/src/public/lux-logo-dark.svg
diff --git a/docs/src/assets/lux-logo.svg b/docs/src/public/lux-logo.svg
similarity index 100%
rename from docs/src/assets/lux-logo.svg
rename to docs/src/public/lux-logo.svg
diff --git a/docs/src/public/mlp.webp b/docs/src/public/mlp.webp
new file mode 100644
index 0000000000..62446654d6
Binary files /dev/null and b/docs/src/public/mlp.webp differ
diff --git a/docs/src/public/mnist.jpg b/docs/src/public/mnist.jpg
new file mode 100644
index 0000000000..07ff1edd03
Binary files /dev/null and b/docs/src/public/mnist.jpg differ
diff --git a/docs/src/public/neural-sde.png b/docs/src/public/neural-sde.png
new file mode 100644
index 0000000000..90cc19d23d
Binary files /dev/null and b/docs/src/public/neural-sde.png differ
diff --git a/docs/src/public/pinn.gif b/docs/src/public/pinn.gif
new file mode 100644
index 0000000000..0f790ecb89
Binary files /dev/null and b/docs/src/public/pinn.gif differ
diff --git a/docs/src/public/weather-neural-ode.gif b/docs/src/public/weather-neural-ode.gif
new file mode 100644
index 0000000000..34c46737d1
Binary files /dev/null and b/docs/src/public/weather-neural-ode.gif differ
diff --git a/docs/src/tutorials/index.md b/docs/src/tutorials/index.md
index 0092a7608d..36b4afb4f9 100644
--- a/docs/src/tutorials/index.md
+++ b/docs/src/tutorials/index.md
@@ -1,145 +1,126 @@
 ```@raw html
----
-layout: page
----
+<script setup lang="ts">
+import Gallery from "../components/Gallery.vue";
 
-<script setup>
-import { VPTeamPage, VPTeamPageTitle, VPTeamMembers, VPTeamPageSection } from 'vitepress/theme'
-
-const codeSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg>';
-
-const beginners = [
+const beginner = [
   {
-    avatar: 'https://github.com/LuxDL.png',
-    name: 'Julia & Lux for the Uninitiated',
-    desc: 'A tutorial on how to get started with Julia and Lux for those who have never used Julia before.',
-    links: [
-      {
-        icon: {
-          svg: codeSvg,
-        },
-        link: 'beginner/1_Basics' }
-    ]
+    href: "beginner/1_Basics",
+    src: "https://picsum.photos/350/250?image=444",
+    caption: "Julia & Lux for the Uninitiated",
+    desc: "How to get started with Julia and Lux for those who have never used Julia before."
   },
   {
-    avatar: 'https://github.com/LuxDL.png',
-    name: 'Fitting a Polynomial using MLP',
-    desc: 'Learn the Basics of Lux by fitting a Multi-Layer Perceptron to a Polynomial.',
-    links: [
-      {
-        icon: {
-          svg: codeSvg,
-        },
-        link: 'beginner/2_PolynomialFitting' }
-    ]
+    href: "beginner/2_PolynomialFitting",
+    src: "../mlp.webp",
+    caption: "Fitting a Polynomial using MLP",
+    desc: "Learn the Basics of Lux by fitting a Multi-Layer Perceptron to a Polynomial."
   },
   {
-    avatar: 'https://github.com/LuxDL.png',
-    name: 'Training a Simple LSTM',
-    desc: 'Learn the API for defining Recurrent Models in Lux.',
-    links: [
-      {
-        icon: {
-          svg: codeSvg,
-        },
-        link: 'beginner/3_SimpleRNN' }
-    ]
+    href: "beginner/3_SimpleRNN",
+    src: "../lstm-illustrative.webp",
+    caption: "Training a Simple LSTM",
+    desc: "Learn how to define custom layers and train an RNN on time-series data."
   },
   {
-    avatar: 'https://github.com/PumasAI.png',
-    name: 'Use SimpleChains.jl as a Backend',
-    desc: 'Learn how to train small neural networks really fast',
-    links: [
-      {
-        icon: {
-          svg: codeSvg,
-        },
-        link: 'beginner/4_SimpleChains' }
-    ]
+    href: "beginner/4_SimpleChains",
+    src: "../blas_optimizations.jpg",
+    caption: "Use SimpleChains.jl as a Backend",
+    desc: "Learn how to train small neural networks really fast on CPU."
   }
 ];
 
 const intermediate = [
   {
-    avatar: 'https://github.com/SciML.png',
-    name: 'MNIST Classification using Neural ODE',
-    desc: 'Train a Neural ODE to classify MNIST Images.',
-    links: [
-      {
-        icon: {
-          svg: codeSvg,
-        },
-        link: 'intermediate/1_NeuralODE' }
-    ]
+    href: "intermediate/1_NeuralODE",
+    src: "../mnist.jpg",
+    caption: "MNIST Classification using Neural ODE",
+    desc: "Train a Neural Ordinary Differential Equations to classify MNIST Images."
   },
   {
-    avatar: 'https://github.com/TuringLang.png',
-    name: 'Bayesian Neural Networks',
-    desc: 'Figure out how to use Probabilistic Programming Frameworks like Turing with Lux.',
-    links: [
-      {
-        icon: {
-          svg: codeSvg,
-        },
-        link: 'intermediate/2_BayesianNN' }
-    ]
+    href: "intermediate/2_BayesianNN",
+    src: "https://github.com/TuringLang.png",
+    caption: "Bayesian Neural Networks",
+    desc: "Figure out how to use Probabilistic Programming Frameworks like Turing with Lux."
   },
   {
-    avatar: 'https://github.com/LuxDL.png',
-    name: 'Training a HyperNetwork',
-    desc: 'In this tutorial we will train a hypernetwork to work on multiple datasets by predicting neural network parameters.',
-    orgLink: 'intermediate/3_HyperNet',
-    links: [
-      {
-        icon: {
-          svg: codeSvg,
-        },
-        link: 'intermediate/3_HyperNet' }
-    ]
+    href: "intermediate/3_HyperNet",
+    src: "../hypernet.jpg",
+    caption: "Training a HyperNetwork",
+    desc: "Train a hypernetwork to work on multiple datasets by predicting neural network parameters."
   }
 ];
 
 const advanced = [
   {
-    avatar: 'https://github.com/SciML.png',
-    name: 'Neural ODE to Model Gravitational Waveforms',
-    desc: 'Training a Neural ODE to fit simulated data of gravitational waveforms.',
-    links: [
-      {
-        icon: {
-          svg: codeSvg,
-        },
-        link: 'advanced/1_GravitationalWaveForm' }
-    ]
+    href: "advanced/1_GravitationalWaveForm",
+    src: "../gravitational_waveform.png",
+    caption: "Neural ODE to Model Gravitational Waveforms",
+    desc: "Training a Neural ODE to fit simulated data of gravitational waveforms."
+  }
+];
+
+const thrid_party = [
+  {
+    href: "https://docs.sciml.ai/Overview/stable/showcase/pinngpu/",
+    src: "../pinn.gif",
+    caption: "GPU-Accelerated Physics-Informed Neural Networks",
+    desc: "Use Machine Learning (PINNs) to solve the Heat Equation PDE on a GPU."
+  },
+  {
+    href: "https://docs.sciml.ai/DiffEqFlux/stable/examples/neural_ode_weather_forecast/",
+    src: "../weather-neural-ode.gif",
+    caption: "Weather Forecasting with Neural ODEs",
+    desc: "Train a neural ODEs to a multidimensional weather dataset and use it for weather forecasting."
+  },
+  {
+    href: "https://docs.sciml.ai/SciMLSensitivity/stable/examples/sde/SDE_control/",
+    src: "../neural-sde.png",
+    caption: "Controlling Stochastic Differential Equations",
+    desc: "Control the time evolution of a continuously monitored qubit described by an SDE with multiplicative scalar noise."
+  },
+  {
+    href: "https://github.com/Dale-Black/ComputerVisionTutorials.jl/",
+    src: "https://raw.githubusercontent.com/Dale-Black/ComputerVisionTutorials.jl/main/assets/image-seg-green.jpeg",
+    caption: "Medical Image Segmentation",
+    desc: "Explore various aspects of deep learning for medical imaging and a comprehensive overview of Julia packages."
   }
 ];
 </script>
 
-<VPTeamPage>
-  <VPTeamPageTitle>
-    <template #title>Tutorials</template>
-  </VPTeamPageTitle>
-
-  <VPTeamPageSection>
-    <template #title>Beginners Tutorials</template>
-    <template #members>
-      <VPTeamMembers size="small" :members="beginners" />
-    </template>
-  </VPTeamPageSection>
-
-  <VPTeamPageSection>
-    <template #title>Intermediate Tutorials</template>
-    <template #members>
-      <VPTeamMembers size="small" :members="intermediate" />
-    </template>
-  </VPTeamPageSection>
-
-  <VPTeamPageSection>
-    <template #title>Advanced Tutorials</template>
-    <template #members>
-      <VPTeamMembers size="small" :members="advanced" />
-    </template>
-  </VPTeamPageSection>
-</VPTeamPage>
+# Tutorials
+
+## Beginner Tutorials
+
+<Gallery :images="beginner" />
+
+## Intermediate Tutorials
+
+<Gallery :images="intermediate" />
+
+## Advanced Tutorials
+
+<Gallery :images="advanced" />
+
+## Selected 3rd Party Tutorials
+
+::: warning
+
+These tutorials are developed by the community and may not be up-to-date with the latest
+version of `Lux.jl`. Please refer to the official documentation for the most up-to-date
+information.
+
+Please open an issue (ideally both at `Lux.jl` and at the downstream linked package) if any
+of them are non-functional and we will try to get them updated.
+
+:::
+
+<Gallery :images="thrid_party" />
+
+
+::: tip
+
+If you found an amazing tutorial showcasing `Lux.jl` online, or wrote one yourself, please
+open an issue or PR to add it to the list!
 
+:::
 ```
diff --git a/docs/tutorials.jl b/docs/tutorials.jl
index 18d6c7affc..1eb7013c80 100644
--- a/docs/tutorials.jl
+++ b/docs/tutorials.jl
@@ -39,21 +39,17 @@ try
         withenv("JULIA_DEBUG" => "Literate",
             "PKG_LOG_PATH" => pkg_log_path, "LUX_PATH" => lux_path,
             "JULIA_CUDA_HARD_MEMORY_LIMIT" => "$(CUDA_MEMORY_LIMIT)%",
-            "OUTPUT_DIRECTORY" => joinpath(OUTPUT, d),
-            "EXAMPLE_PATH" => p_, "EXAMPLE_NAME" => name,
-            "JULIA_NUM_THREADS" => Threads.nthreads()) do
-            cmd = `$(Base.julia_cmd()) --color=yes --project=$(tutorial_proj) -e \
+            "OUTPUT_DIRECTORY" => joinpath(OUTPUT, d), "EXAMPLE_PATH" => p_,
+            "EXAMPLE_NAME" => name, "JULIA_NUM_THREADS" => Threads.nthreads(),
+            "JULIA_PKG_PRECOMPILE_AUTO" => 0) do
+            cmd = `$(Base.julia_cmd()) --color=yes --startup-file=no --project=$(tutorial_proj) -e \
                 'using Pkg;
                     io=open(ENV["PKG_LOG_PATH"], "w");
                     Pkg.develop(; path=ENV["LUX_PATH"], io);
                     Pkg.instantiate(; io);
-                    Pkg.precompile(; io);
-                    eval(Meta.parse("using " * join(keys(Pkg.project().dependencies), ", ")));
-                    close(io)'`
-            @info "Running Command: $(cmd)"
-            run(cmd)
-            cmd = `$(Base.julia_cmd()) --color=yes --project=$(tutorial_proj) -e \
-                'using Literate;
+                    close(io);
+
+                    using Literate;
                     function preprocess(path, str)
                         new_str = replace(str, "__DIR = @__DIR__" => "__DIR = \"$(dirname(path))\"")
                         appendix_code = "\n# ## Appendix\nusing InteractiveUtils\nInteractiveUtils.versioninfo()\nif @isdefined(LuxCUDA) && CUDA.functional(); println(); CUDA.versioninfo(); end\nif @isdefined(LuxAMDGPU) && LuxAMDGPU.functional(); println(); AMDGPU.versioninfo(); end\nnothing#hide"