diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..62c0544
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,37 @@
+# Contributing
+
+Excited to hear that you are interested in contributing to this project! Thank you!
+
+> Warning: This contributing guide is still work in progress.
+
+## Requisites
+
+The Supabase Modules repository is a pnpm workspace managed using [Turborepo](https://turbo.build/repo). Once you have read and configured your workspace, you can continue with this guide.
+
+## 1. Supabase local-first development
+
+All development takes place locally, which also includes your very own Supabase instance. There is no sharing of environment variables. You will find an `.env.example` file as a guide of the environment variables needed for development.
+
+Please make sure to read [Your Supabase Instance](https://supabase-modules-docs.vercel.app/getting-started/supabase.html) before getting started.
+
+## 2. Creating Database Migrations
+
+Each module directory contains a copy of the migrations needed to support it. However, all database migrations need to be generated locally using `supabase db diff`, read more about [Supabase CLI - Diffs Schema Changes](https://supabase.com/docs/reference/cli/supabase-db-diff).
+
+## 3. Pushing Database Migrations
+
+Database Migrations are not pushed manually to the project's remote Supabase Instance. A GitHub actions workflow using [Supabase Setup-CLI](https://github.com/supabase/setup-cli) has been set for this purpose. 
+
+Once your changes are merged to main, the workflow will push any new migrations to the remote Supabase Instance.
+
+## 4. Create a backup for Database Migrations
+
+In order to simplify our internal process please make sure to copy the migration file's content into a `migrations.sql` file corresponding to your module.
+
+## 5. Creating Hooks and Components
+
+React Hooks are the bread and butter of Supabase Modules. Once the Database logic is working, we need to create the hooks and UI to use it. Supabase Modules internally uses [TanStack Query](https://tanstack.com/query/latest). All of the hooks are created and grouped by Module in the `/modules` directory. 
+
+We strongly recommend creating routes and components to demo your module. React Components are created and grouped by Module in the `/components` directory.
+
+Make sure to see the existing pattern before getting started.
\ No newline at end of file
diff --git a/README.md b/README.md
index 6cd6f6e..7195e74 100644
--- a/README.md
+++ b/README.md
@@ -27,11 +27,9 @@ For example, our [Next.js](https://nextjs.org/) app looks like this:
       📁 migrations
 ```
 
-* The UI lives in the `/components` directory categorized by module name i.e. *user*.
-* The logic lives in the `/modules` directory categorized by module name i.e. *user*.
-* The database configuration lives in the `/supabase` directory where migrations can be identified by module name i.e. *20240214100236_user.sql*.
-
-To learn more about this project, please visit [Supabase Modules Documentation](https://supabase-modules-docs.vercel.app/).
+- The UI lives in the `/components` directory categorized by module name i.e. _user_.
+- The logic lives in the `/modules` directory categorized by module name i.e. _user_.
+- The database configuration lives in the `/supabase` directory where migrations can be identified by module name i.e. _20240214100236_user.sql_.
 
 ## Install
 
@@ -74,3 +72,11 @@ To build, run the following command from the root repository:
 ```bash
 pnpm build
 ```
+
+## Contributing
+
+Excited to hear that you are interested in contributing to this project! Please visit [Contributing](https://supabase-modules-docs.vercel.app/introduction/contributing.html)
+
+## Documentation
+
+To learn more about this project, please visit [Supabase Modules Documentation](https://supabase-modules-docs.vercel.app/).
diff --git a/apps/next/app/globals.css b/apps/next/app/globals.css
index bef7847..95d8cab 100644
--- a/apps/next/app/globals.css
+++ b/apps/next/app/globals.css
@@ -5,64 +5,68 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 240 6% 25%;
+    --foreground: 222.2 47.4% 11.2%;
 
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
 
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
 
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
 
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
 
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
 
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
+    --ring: 215 20.2% 65.1%;
 
     --radius: 0.5rem;
+  }
 
-    @media (prefers-color-scheme: dark) {
-      --background: 0 0% 3.9%;
-      --foreground: 255 255% 245%;
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
 
-      --card: 0 0% 3.9%;
-      --card-foreground: 0 0% 98%;
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
 
-      --popover: 0 0% 3.9%;
-      --popover-foreground: 0 0% 98%;
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
 
-      --primary: 0 0% 98%;
-      --primary-foreground: 0 0% 9%;
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
 
-      --secondary: 0 0% 14.9%;
-      --secondary-foreground: 0 0% 98%;
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
 
-      --muted: 0 0% 14.9%;
-      --muted-foreground: 0 0% 63.9%;
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
 
-      --accent: 0 0% 14.9%;
-      --accent-foreground: 0 0% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
 
-      --destructive: 0 62.8% 30.6%;
-      --destructive-foreground: 0 0% 98%;
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
 
-      --border: 0 0% 14.9%;
-      --input: 0 0% 14.9%;
-      --ring: 0 0% 83.1%;
-    }
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 216 34% 17%;
+
+    --radius: 0.5rem;
   }
 }
 
@@ -72,5 +76,6 @@
   }
   body {
     @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
   }
 }
diff --git a/apps/next/app/layout.tsx b/apps/next/app/layout.tsx
index 8a5358c..4e671ba 100644
--- a/apps/next/app/layout.tsx
+++ b/apps/next/app/layout.tsx
@@ -21,7 +21,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" className="dark" suppressHydrationWarning>
       <body
         className={cn(
           "min-h-dvh bg-background font-sans antialiased",
diff --git a/apps/next/app/providers.tsx b/apps/next/app/providers.tsx
index cddffe7..9a65bda 100644
--- a/apps/next/app/providers.tsx
+++ b/apps/next/app/providers.tsx
@@ -2,6 +2,7 @@
 
 import * as React from "react";
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
 
 export const Providers: React.FC<React.PropsWithChildren> = ({ children }) => {
   const [queryClient] = React.useState(
@@ -15,6 +16,15 @@ export const Providers: React.FC<React.PropsWithChildren> = ({ children }) => {
       })
   );
   return (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    <QueryClientProvider client={queryClient}>
+      <NextThemesProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        disableTransitionOnChange
+      >
+        {children}
+      </NextThemesProvider>
+    </QueryClientProvider>
   );
 };
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index efa5694..eb978e5 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -54,6 +54,7 @@ export default defineConfig({
         items: [
           { text: "Supabase Modules", link: "/introduction/modules" },
           { text: "Workspace", link: "/introduction/workspace" },
+          { text: "Contributing", link: "/introduction/contributing" },
         ],
       },
       {
diff --git a/docs/introduction/contributing.md b/docs/introduction/contributing.md
new file mode 100644
index 0000000..21995d2
--- /dev/null
+++ b/docs/introduction/contributing.md
@@ -0,0 +1 @@
+<!--@include: ../../CONTRIBUTING.md-->
\ No newline at end of file
diff --git a/docs/modules/installation.md b/docs/modules/installation.md
index eff3f8e..a67ac4c 100644
--- a/docs/modules/installation.md
+++ b/docs/modules/installation.md
@@ -25,7 +25,7 @@ degit iamhectorsosa/supabase-modules/apps/next/modules/types types
 
 :::
 
-## Module Utilities
+## Module utilities
 
 If you are adding Supabase Modules to an existing project. Before installing any modules, you will need to add some database utils.
 
@@ -46,7 +46,7 @@ degit iamhectorsosa/supabase-modules/apps/next/modules/utils utils
 
 :::
 
-## List of Modules
+## List of modules
 
 Find all the modules you need for your Supabase project here. Quick to integrate, ready to use.