diff --git a/Documentation/docs/How To/Background + image change.md b/Documentation/docs/How To/Background + image change.md
new file mode 100644
index 0000000..5f10009
--- /dev/null
+++ b/Documentation/docs/How To/Background + image change.md
@@ -0,0 +1,23 @@
+# How to Generate and Replace Backgrounds Using Haky
+
+In this tutorial, we'll guide you through the process of generating a custom background using the Haky tool (hay.app), replacing an existing background image, and updating references in your code. Follow these steps to create and implement your new background effectively.
+
+[](https://youtu.be/PjULTUBBt_s)
+
+## 1. Introduction to Haky
+
+Haky is a powerful background generator tool available at hay.app. This tool allows you to create customized backgrounds with ease.
+
+## 2. Generating a Background
+
+To get started with Haky, follow these steps:
+
+1. Open the Haky application at hay.app.
+2. Input your desired primary color.
+ 
+3. Hit the generate button to create your background.
+ 
+4. Adjust the dimensions to 19 by 6.
+ 
+5. Optionally, you can add a gradient to your background based on your preference.
+ 
\ No newline at end of file
diff --git a/Documentation/docs/How To/Business Analyst Sample.md b/Documentation/docs/How To/Business Analyst Sample.md
new file mode 100644
index 0000000..48d5bac
--- /dev/null
+++ b/Documentation/docs/How To/Business Analyst Sample.md
@@ -0,0 +1,16 @@
+# How to Create a Simple Login Flow for IL Loal
+
+Creating a secure and user-friendly login flow is essential for any application. In this guide, we'll walk you through the steps to set up a basic login flow for IL loal, including email and password authentication, alternative login options, and error handling.
+
+[](https://youtu.be/iQ2lWjIn5po)
+
+## Basic Login Flow
+
+To begin, we'll create a login form that requires an email address and a password. The email address should be validated to ensure it is in a proper format, which can be achieved using Regex.
+
+
+
+
+The password must adhere to Pocket Base's guidelines, which specify that it should be between 8 to 16 characters.
+
+
\ No newline at end of file
diff --git a/Documentation/docs/How To/Email Setup.md b/Documentation/docs/How To/Email Setup.md
new file mode 100644
index 0000000..5e4c096
--- /dev/null
+++ b/Documentation/docs/How To/Email Setup.md
@@ -0,0 +1,17 @@
+# How to Set Up Emails Using MJML and HTML
+
+In this guide, we will walk you through the process of setting up your emails using MJML and HTML files. This step-by-step tutorial will help you configure and customize your first purchase and sign-up emails effectively.
+
+[](https://youtu.be/YfnQhNgiz8c)
+
+## Accessing the Email Directory
+
+To begin, navigate to the fast pocket directory. Here, you will find the first purchase email and the sign-up email.
+
+
+
+## Configuring Emails
+
+Our primary goal is to change the text in the HTML that will be sent out in these emails. These emails are triggered on the first sign-up and the first purchase. While you don't need to worry too much about configuring these initial emails, you can use the provided example to configure additional ones.
+
+
\ No newline at end of file
diff --git a/Documentation/docs/How To/Fly Deploy.md b/Documentation/docs/How To/Fly Deploy.md
new file mode 100644
index 0000000..502bcab
--- /dev/null
+++ b/Documentation/docs/How To/Fly Deploy.md
@@ -0,0 +1,64 @@
+# How to Deploy a Self-Hosted Backend on fly.io
+
+Deploying your self-hosted backend on fly.io can be a quick and efficient process. This guide will walk you through the steps required to get your backend up and running, using the example of setting up a backend for Fast Pocket. Fly.io is a great platform for hosting backends because it allows you to set up your backend swiftly and efficiently.
+
+[](https://youtu.be/1rd9dm0ncUk)
+
+## Setting Up Secrets
+
+Before we begin deployment, it's crucial to set up a secret for our Stripe key, which has been previously generated. This ensures that our transactions are secure.
+
+1. **Set up the Stripe key**:
+ ```bash
+ fly secrets set STRIPE_SECRET_KEY=your_stripe_key
+ ```
+
+
+
+## Configuring the fly.toml File
+
+The `fly.toml` file contains all the configuration settings necessary for deploying to fly.io. Here are the key settings you need to modify:
+
+1. **App Name**: Change the app name to your desired name, e.g., `icon.camp`.
+2. **Primary Region**: Set the primary region to the closest region to where your app will be deployed. For example, if you want your app to be based in Australia, you might choose the region `syd` for Sydney.
+3. **Host**: Ensure the host is set to your app's name, e.g., `icon.camp.fly.dev`.
+4. **Port**: Maintain the same port used for PocketBase, which is `8090`.
+5. **Stripe Billing and Cancel URLs**: Set the URLs for Stripe billing and cancel actions. For instance:
+ - `STRIPE_BILLING_RETURN_URL`: `https://icon.camp/account`
+ - `STRIPE_CANCEL_URL`: `https://icon.camp/pricing`
+ - `STRIPE_SUCCESS_URL`: `https://icon.camp/account`
+6. **Mount Source and Destination**: Configure the source and destination for your fly.io volume. For example:
+ - `source`: `data_icon_camp`
+ - `destination`: `/app/bin/pb_data`
+
+
+
+## Deploying the Application
+
+To deploy your application, follow these steps:
+
+1. **Run the fly launch command**:
+ ```bash
+ fly launch --no-deploy
+ ```
+ This command initializes the deployment process.
+
+
+
+2. **Check for successful configuration**: Ensure the configuration is valid and matches the settings in your `fly.toml` file.
+
+3. **Attach a credit card if necessary**: If the deployment fails, it may be due to not having a credit card attached to your fly.io account.
+
+
+
+## Creating and Mounting Volumes
+
+Next, create and mount the necessary volumes for your application:
+
+1. **Create a volume**:
+ ```bash
+ fly volumes create data_icon_camp --size 3
+ ```
+ This command creates a 3GB volume for storing data.
+
+
\ No newline at end of file
diff --git a/Documentation/docs/How To/Frontend to Backend.md b/Documentation/docs/How To/Frontend to Backend.md
new file mode 100644
index 0000000..e37d039
--- /dev/null
+++ b/Documentation/docs/How To/Frontend to Backend.md
@@ -0,0 +1,22 @@
+# How to Deploy and Style Your Application
+
+Deploying and styling your application can seem daunting, but with a clear step-by-step process, it becomes much more manageable. This guide will walk you through the steps to disconnect from Vercel, connect to a new repository, set up environment variables, create a new deployment, and finally, make changes to style your application.
+
+[](https://youtu.be/UTz5pDUicEc)
+
+## Step 1: Disconnect from Vercel
+To start, you need to disconnect your current setup from Vercel. This ensures that you can connect to the new repository without any conflicts.
+
+
+Navigate to your Vercel project settings and locate the "Connected Git Repository" section. Click the "Disconnect" button next to your current repository to disconnect it.
+
+## Step 2: Connect to the New Repository
+Next, connect your application to the new repository. This will be your core repository for launching the application.
+
+
+In the same "Connected Git Repository" section, search for and select your new repository. Click "Connect" to establish the connection.
+
+## Step 3: Set Up Environment Variables
+Before proceeding, ensure that all required environment variables are set up. This includes variables for tools like PostHog and any other necessary configurations.
+
+
\ No newline at end of file
diff --git a/Documentation/docs/How To/Pocketbase.md b/Documentation/docs/How To/Pocketbase.md
new file mode 100644
index 0000000..7c81fd1
--- /dev/null
+++ b/Documentation/docs/How To/Pocketbase.md
@@ -0,0 +1,14 @@
+# How to Integrate Stripe with Pocket Base Using Fly.io
+
+In this tutorial, we will walk you through the steps to integrate Stripe with Pocket Base using Fly.io. This integration will ensure that your products automatically synchronize with Pocket Base whenever there are updates or new events in Stripe.
+
+[](https://www.youtube.com/watch?v=Q0yRtC9jr_M "Video Title")
+
+
+## Setting Up Web Hook Endpoint
+
+First, we need to set up a web hook endpoint in Pocket Base. Follow these steps:
+
+1. Navigate to your instance of Pocket Base on Fly.io. 
+2. Click on "Add Endpoint" to create a new endpoint. 
+3. Name your endpoint. In this example, we will call it "Stripe Endpoint" or "Fast Pocket Stripe Endpoint". 
\ No newline at end of file
diff --git a/Documentation/docs/How To/Posthog Analytics.md b/Documentation/docs/How To/Posthog Analytics.md
new file mode 100644
index 0000000..4483163
--- /dev/null
+++ b/Documentation/docs/How To/Posthog Analytics.md
@@ -0,0 +1,18 @@
+# How to Connect Your Backend to Vercel with PostHog and Google Analytics
+
+In this tutorial, we will guide you through the process of connecting your backend to a Vercel instance, integrating PostHog for product analytics, and setting up Google Analytics. These steps are crucial for tracking user interactions and gaining insights into your application's performance.
+
+[](https://youtu.be/20-sBCbvEEA)
+
+## Setting Up PostHog
+
+First, we need to set up PostHog, which is a powerful product analytics tool.
+
+1. **Navigate to PostHog**: Go to [posthog.com](https://posthog.com) and click on "Get Started".
+ 
+
+2. **Create an Account**: Use a temporary email to create an account. This is useful if you do not plan to keep the account permanently.
+ 
+
+3. **Verify Email Address**: PostHog will send a verification email. Click the link in the email to verify your address.
+ 
\ No newline at end of file
diff --git a/Documentation/docs/How To/SC Components.md b/Documentation/docs/How To/SC Components.md
new file mode 100644
index 0000000..1271f48
--- /dev/null
+++ b/Documentation/docs/How To/SC Components.md
@@ -0,0 +1,20 @@
+# Getting Started with Fast Pocket: Customizing Your Site
+
+Fast Pocket is a powerful tool that allows you to quickly set up and customize your website. This tutorial will guide you through the initial steps to get your site up and running, focusing on customization and component integration.
+
+[](https://youtu.be/af3NjGQ_4qg)
+
+## Customizing Your Site
+
+One of the first tasks when starting with Fast Pocket is customizing your site. Customization is essential to ensure that your site meets your specific needs and aesthetic preferences.
+
+All the components you will need are located in one place and are set up with light and dark mode theming. This setup ensures that your site can easily switch between themes. The components are aligned with Daisy UI, making it straightforward to style them using Tailwind classes.
+
+
+
+
+## Using Example Components
+
+Fast Pocket provides several example components that you can use as a starting point. You can simply copy the code of these components and paste it into your actual project. These components are designed to work out of the box, saving you time and effort.
+
+
\ No newline at end of file
diff --git a/Documentation/docs/How To/SC Fonts.md b/Documentation/docs/How To/SC Fonts.md
new file mode 100644
index 0000000..8afb513
--- /dev/null
+++ b/Documentation/docs/How To/SC Fonts.md
@@ -0,0 +1,69 @@
+# How to Set Up a Font in Fast NPocket Using Tailwind
+
+Setting up a font in Fast NPocket involves configuring the Tailwind CSS framework and updating the layout files. This guide will walk you through the process step-by-step.
+
+[](https://youtu.be/QrXrqNnSBM4)
+
+## Choosing a Font
+
+To begin, visit [Google Fonts](https://fonts.google.com) to select a font that suits your project. Keep in mind that not all fonts are available in the Next library, so you might need to experiment to find one that works.
+
+
+
+## Setting Up Tailwind Config
+
+Once you've chosen your font, you'll need to define it in the Tailwind config file. For example, you might choose Roboto as your heading font and Indie Flower as your body font. The configuration would look like this:
+
+```javascript
+const roboto = Roboto({
+ variable: "--heading-font",
+ weight: "500",
+ subsets: ["latin"],
+});
+
+const indieFlower = Indie_Flower({
+ variable: "--body-font",
+ weight: "400",
+ subsets: ["latin"],
+});
+```
+
+
+
+## Updating the Layout File
+
+If you decide to swap fonts, this can be easily done in the layout file. For instance, if you want to change the body font to Roboto and the heading font to Indie Flower, you can update the variables accordingly:
+
+```javascript
+export default async function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ const isUserLoggedIn = await isAuthenticated(cookies());
+
+ return (
+
+