diff --git a/studio/components/interfaces/Home/ExampleProject.tsx b/studio/components/interfaces/Home/ExampleProject.tsx
index 39227ed3c47..bfed4470d29 100644
--- a/studio/components/interfaces/Home/ExampleProject.tsx
+++ b/studio/components/interfaces/Home/ExampleProject.tsx
@@ -1,5 +1,7 @@
 import { FC } from 'react'
 import { Typography, IconChevronRight } from '@supabase/ui'
+import { useStore } from 'hooks'
+import Link from 'next/link'
 
 interface Props {
   framework: string
@@ -9,48 +11,51 @@ interface Props {
 }
 
 const ExampleProject: FC<Props> = ({ framework, title, description, url }) => {
+  const { ui } = useStore()
+  const { isDarkTheme } = ui
+
   return (
-    <a href={url}>
-      <div
-        className={[
-          'group relative',
-          'bg-panel-header-light dark:bg-panel-header-dark  hover:bg-panel-border-light dark:hover:bg-panel-border-dark border',
-          'border-panel-border-light dark:border-panel-border-dark  hover:border-panel-border-hover-light',
-          'dark:hover:border-panel-border-hover-dark rounded-md p-4 flex flex-row h-32 hover:border-gray-300',
-          'transition ease-in-out duration-150',
-        ].join(' ')}
-      >
-        <div className="flex flex-col mr-4">
-          <img
-            className="
-              transition-all
-              group-hover:scale-110
-            "
-            src={`/img/libraries/${framework.toLowerCase()}-icon.svg`}
-            alt={`${framework} logo`}
-            width="26"
-          />
-        </div>
-        <div className="space-y-2 w-4/5">
-          <h5 className="text-scale-1200">{title}</h5>
-          <p className="text-scale-1000 text-sm">{description}</p>
-        </div>
+    <Link href={url}>
+      <a>
         <div
-          className="
-          absolute
-          right-4
-          top-3
-          text-scale-900
-          transition-all 
-          duration-200 
-          group-hover:right-3
-          group-hover:text-scale-1200
-        "
+          className={[
+            'group relative',
+            'bg-panel-header-light dark:bg-panel-header-dark  hover:bg-panel-border-light dark:hover:bg-panel-border-dark border',
+            'border-panel-border-light dark:border-panel-border-dark  hover:border-panel-border-hover-light',
+            'dark:hover:border-panel-border-hover-dark rounded-md p-4 flex flex-row h-32 hover:border-gray-300',
+            'transition ease-in-out duration-150',
+          ].join(' ')}
         >
-          <IconChevronRight />
+          <div className="flex flex-col mr-4">
+            <img
+              className="transition-all group-hover:scale-110"
+              src={`/img/libraries/${framework.toLowerCase()}${framework.toLowerCase() == "nextjs" ? isDarkTheme ? "-dark" : "" : ""}-icon.svg`}
+              alt={`${framework} logo`}
+              width={26}
+              height={26}
+            />
+          </div>
+          <div className="space-y-2 w-4/5">
+            <h5 className="text-scale-1200">{title}</h5>
+            <p className="text-scale-1000 text-sm">{description}</p>
+          </div>
+          <div
+            className="
+            absolute
+            right-4
+            top-3
+            text-scale-900
+            transition-all 
+            duration-200 
+            group-hover:right-3
+            group-hover:text-scale-1200
+          "
+          >
+            <IconChevronRight />
+          </div>
         </div>
-      </div>
-    </a>
+      </a>
+    </Link>
   )
 }
 
diff --git a/studio/components/interfaces/Home/Home.constants.ts b/studio/components/interfaces/Home/Home.constants.ts
index f2cab0a2e69..d19e89231bb 100644
--- a/studio/components/interfaces/Home/Home.constants.ts
+++ b/studio/components/interfaces/Home/Home.constants.ts
@@ -33,7 +33,7 @@ export const EXAMPLE_PROJECTS = [
     framework: 'NextJS',
     title: 'Next.js Realtime chat app',
     description: 'Next.js Slack clone app using Supabase realtime subscriptions',
-    url: 'https://github.com/supabase/supabase/tree/master/examples/nextjs-slack-clone',
+    url: 'https://github.com/supabase/supabase/tree/master/examples/slack-clone/nextjs-slack-clone',
   },
   {
     framework: 'NextJS',
@@ -63,36 +63,36 @@ export const EXAMPLE_PROJECTS = [
     framework: 'JavaScript',
     title: 'Vanilla-js Auth app',
     description: 'Example app of real-time chat using supabase realtime api',
-    url: 'https://github.com/supabase/supabase/tree/master/examples/javascript-auth',
+    url: 'https://github.com/supabase/supabase/tree/master/examples/auth/javascript-auth',
   },
   {
     framework: 'React',
     title: 'React Native todo list app',
     description: 'React Native Todo List example with Expo',
-    url: 'https://github.com/supabase/supabase/tree/master/examples/expo-todo-list',
+    url: 'https://github.com/supabase/supabase/tree/master/examples/todo-list/expo-todo-list',
   },
   {
     framework: 'NextJS',
     title: 'NextJS todo list app',
     description: 'NextJS todo list example',
-    url: 'https://github.com/supabase/supabase/tree/master/examples/nextjs-todo-list',
+    url: 'https://github.com/supabase/supabase/tree/master/examples/todo-list/nextjs-todo-list',
   },
   {
     framework: 'React',
     title: 'React todo List app',
     description: 'React todo List example',
-    url: 'https://github.com/supabase/supabase/tree/master/examples/react-todo-list',
+    url: 'https://github.com/supabase/supabase/tree/master/examples/todo-list/react-todo-list',
   },
   {
     framework: 'Svelte',
     title: 'Svelte todo list app',
     description: 'Sveltejs todo with TailwindCSS and Snowpack',
-    url: 'https://github.com/supabase/supabase/tree/master/examples/sveltejs-todo-list',
+    url: 'https://github.com/supabase/supabase/tree/master/examples/todo-list/sveltejs-todo-list',
   },
   {
     framework: 'VueJS',
     title: 'Vue.js todo list app',
     description: 'Vue.js todo app using TypeScript',
-    url: 'https://github.com/supabase/supabase/tree/master/examples/vue3-ts-todo-list',
+    url: 'https://github.com/supabase/supabase/tree/master/examples/todo-list/vue3-ts-todo-list',
   },
 ]
diff --git a/studio/public/img/libraries/expo-dark-icon.svg b/studio/public/img/libraries/expo-dark-icon.svg
new file mode 100644
index 00000000000..a6f238b6784
--- /dev/null
+++ b/studio/public/img/libraries/expo-dark-icon.svg
@@ -0,0 +1 @@
+<svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.069 10.075a2.273 2.273 0 00-.887-.74 2.296 2.296 0 00-2.237.16 2.265 2.265 0 00-.77.859 2.016 2.016 0 00.392 2.274 3.342 3.342 0 002.23-.63 3.289 3.289 0 001.271-1.923zM15.3 1.3l-1.45-.788-6.31 3.481.503.27.957.498 1.732-.954 4.569-2.523-.001.016zm.584-.24a.225.225 0 01.16.15l2.114 6.182a.205.205 0 01-.1.269 4.063 4.063 0 00-1.798 1.974 4.017 4.017 0 00-.175 2.655 4.283 4.283 0 001.755 2.332c.842.55 1.852.79 2.854.68a.269.269 0 01.262.16l2.184 6.345a.256.256 0 01-.101.278l-6.712 3.89a.253.253 0 01-.101.02.27.27 0 01-.181-.03L13.69 24.5a.234.234 0 01-.1-.1l-4.6-10.483-7.005 3.95a.327.327 0 01-.272.01l-1.592-.898a.23.23 0 01-.1-.299l6.805-12.8a.243.243 0 01.11-.099L13.721.03a.259.259 0 01.241 0l1.923 1.03zM7.47 4.499L7.14 4.33.58 16.71l1.197.668 5.657-7.335a.275.275 0 01.231-.1.282.282 0 01.201.149l6.16 14.066 1.646 1.007L9.06 6.005l-.281-.798-1.318-.718.01.01zm10.145 7.382a2.51 2.51 0 01.12-1.663 2.54 2.54 0 011.138-1.23 2.798 2.798 0 013.261.4 2.513 2.513 0 01.073 3.568l-.073.073a2.77 2.77 0 01-3.788.01 2.719 2.719 0 01-.731-1.158z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/studio/public/img/libraries/nextjs-dark-icon.svg b/studio/public/img/libraries/nextjs-dark-icon.svg
new file mode 100644
index 00000000000..99afa3413d3
--- /dev/null
+++ b/studio/public/img/libraries/nextjs-dark-icon.svg
@@ -0,0 +1,3 @@
+<svg width="1000" height="1000" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M467.253 0.269139C465.103 0.464613 458.26 1.14878 452.102 1.63747C310.068 14.4411 177.028 91.0671 92.7664 208.841C45.8456 274.325 15.8358 348.605 4.49658 427.284C0.488759 454.748 0 462.86 0 500.098C0 537.336 0.488759 545.448 4.49658 572.912C31.6716 760.666 165.298 918.414 346.53 976.861C378.983 987.319 413.196 994.453 452.102 998.754C467.253 1000.42 532.747 1000.42 547.898 998.754C615.054 991.326 671.945 974.71 728.055 946.073C736.657 941.675 738.319 940.502 737.146 939.525C736.364 938.939 699.707 889.777 655.718 830.352L575.758 722.353L475.562 574.085C420.43 492.572 375.073 425.915 374.682 425.915C374.291 425.818 373.9 491.693 373.705 572.13C373.412 712.97 373.314 718.639 371.554 721.962C369.013 726.751 367.058 728.706 362.952 730.856C359.824 732.42 357.087 732.713 342.327 732.713H325.415L320.919 729.878C317.986 728.021 315.836 725.578 314.37 722.744L312.317 718.345L312.512 522.382L312.805 326.321L315.836 322.509C317.4 320.457 320.723 317.818 323.069 316.547C327.077 314.592 328.641 314.397 345.552 314.397C365.494 314.397 368.817 315.179 373.998 320.848C375.464 322.411 429.717 404.12 494.624 502.541C559.531 600.963 648.289 735.352 691.887 801.324L771.065 921.248L775.073 918.609C810.557 895.543 848.094 862.703 877.81 828.495C941.056 755.877 981.818 667.326 995.503 572.912C999.511 545.448 1000 537.336 1000 500.098C1000 462.86 999.511 454.748 995.503 427.284C968.328 239.53 834.702 81.7821 653.47 23.3352C621.505 12.975 587.488 5.84016 549.365 1.53972C539.98 0.562345 475.367 -0.51276 467.253 0.269139ZM671.945 302.668C676.637 305.014 680.45 309.51 681.818 314.201C682.6 316.743 682.796 371.085 682.6 493.549L682.307 669.281L651.32 621.781L620.235 574.281V446.538C620.235 363.95 620.626 317.525 621.212 315.277C622.776 309.803 626.197 305.503 630.89 302.962C634.897 300.909 636.364 300.714 651.711 300.714C666.178 300.714 668.719 300.909 671.945 302.668Z" fill="white"/>
+</svg>
diff --git a/studio/public/img/libraries/nextjs-icon.svg b/studio/public/img/libraries/nextjs-icon.svg
index 99afa3413d3..c45d6e63fb9 100644
--- a/studio/public/img/libraries/nextjs-icon.svg
+++ b/studio/public/img/libraries/nextjs-icon.svg
@@ -1,3 +1,3 @@
 <svg width="1000" height="1000" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M467.253 0.269139C465.103 0.464613 458.26 1.14878 452.102 1.63747C310.068 14.4411 177.028 91.0671 92.7664 208.841C45.8456 274.325 15.8358 348.605 4.49658 427.284C0.488759 454.748 0 462.86 0 500.098C0 537.336 0.488759 545.448 4.49658 572.912C31.6716 760.666 165.298 918.414 346.53 976.861C378.983 987.319 413.196 994.453 452.102 998.754C467.253 1000.42 532.747 1000.42 547.898 998.754C615.054 991.326 671.945 974.71 728.055 946.073C736.657 941.675 738.319 940.502 737.146 939.525C736.364 938.939 699.707 889.777 655.718 830.352L575.758 722.353L475.562 574.085C420.43 492.572 375.073 425.915 374.682 425.915C374.291 425.818 373.9 491.693 373.705 572.13C373.412 712.97 373.314 718.639 371.554 721.962C369.013 726.751 367.058 728.706 362.952 730.856C359.824 732.42 357.087 732.713 342.327 732.713H325.415L320.919 729.878C317.986 728.021 315.836 725.578 314.37 722.744L312.317 718.345L312.512 522.382L312.805 326.321L315.836 322.509C317.4 320.457 320.723 317.818 323.069 316.547C327.077 314.592 328.641 314.397 345.552 314.397C365.494 314.397 368.817 315.179 373.998 320.848C375.464 322.411 429.717 404.12 494.624 502.541C559.531 600.963 648.289 735.352 691.887 801.324L771.065 921.248L775.073 918.609C810.557 895.543 848.094 862.703 877.81 828.495C941.056 755.877 981.818 667.326 995.503 572.912C999.511 545.448 1000 537.336 1000 500.098C1000 462.86 999.511 454.748 995.503 427.284C968.328 239.53 834.702 81.7821 653.47 23.3352C621.505 12.975 587.488 5.84016 549.365 1.53972C539.98 0.562345 475.367 -0.51276 467.253 0.269139ZM671.945 302.668C676.637 305.014 680.45 309.51 681.818 314.201C682.6 316.743 682.796 371.085 682.6 493.549L682.307 669.281L651.32 621.781L620.235 574.281V446.538C620.235 363.95 620.626 317.525 621.212 315.277C622.776 309.803 626.197 305.503 630.89 302.962C634.897 300.909 636.364 300.714 651.711 300.714C666.178 300.714 668.719 300.909 671.945 302.668Z" fill="white"/>
+<path d="M467.253 0.269139C465.103 0.464613 458.26 1.14878 452.102 1.63747C310.068 14.4411 177.028 91.0671 92.7664 208.841C45.8456 274.325 15.8358 348.605 4.49658 427.284C0.488759 454.748 0 462.86 0 500.098C0 537.336 0.488759 545.448 4.49658 572.912C31.6716 760.666 165.298 918.414 346.53 976.861C378.983 987.319 413.196 994.453 452.102 998.754C467.253 1000.42 532.747 1000.42 547.898 998.754C615.054 991.326 671.945 974.71 728.055 946.073C736.657 941.675 738.319 940.502 737.146 939.525C736.364 938.939 699.707 889.777 655.718 830.352L575.758 722.353L475.562 574.085C420.43 492.572 375.073 425.915 374.682 425.915C374.291 425.818 373.9 491.693 373.705 572.13C373.412 712.97 373.314 718.639 371.554 721.962C369.013 726.751 367.058 728.706 362.952 730.856C359.824 732.42 357.087 732.713 342.327 732.713H325.415L320.919 729.878C317.986 728.021 315.836 725.578 314.37 722.744L312.317 718.345L312.512 522.382L312.805 326.321L315.836 322.509C317.4 320.457 320.723 317.818 323.069 316.547C327.077 314.592 328.641 314.397 345.552 314.397C365.494 314.397 368.817 315.179 373.998 320.848C375.464 322.411 429.717 404.12 494.624 502.541C559.531 600.963 648.289 735.352 691.887 801.324L771.065 921.248L775.073 918.609C810.557 895.543 848.094 862.703 877.81 828.495C941.056 755.877 981.818 667.326 995.503 572.912C999.511 545.448 1000 537.336 1000 500.098C1000 462.86 999.511 454.748 995.503 427.284C968.328 239.53 834.702 81.7821 653.47 23.3352C621.505 12.975 587.488 5.84016 549.365 1.53972C539.98 0.562345 475.367 -0.51276 467.253 0.269139ZM671.945 302.668C676.637 305.014 680.45 309.51 681.818 314.201C682.6 316.743 682.796 371.085 682.6 493.549L682.307 669.281L651.32 621.781L620.235 574.281V446.538C620.235 363.95 620.626 317.525 621.212 315.277C622.776 309.803 626.197 305.503 630.89 302.962C634.897 300.909 636.364 300.714 651.711 300.714C666.178 300.714 668.719 300.909 671.945 302.668Z" fill="black"/>
 </svg>
diff --git a/studio/public/img/libraries/nextjs.svg b/studio/public/img/libraries/nextjs.svg
deleted file mode 100644
index 843612152bb..00000000000
Binary files a/studio/public/img/libraries/nextjs.svg and /dev/null differ