diff --git a/docs/components/image.mdx b/docs/components/image.mdx
new file mode 100644
index 0000000..39acce2
--- /dev/null
+++ b/docs/components/image.mdx
@@ -0,0 +1,247 @@
+---
+title: Blade Components / Image
+description: Learn how to use the Image component in Cloudinary Laravel.
+ogImageTitle: Blade Components / Image
+head:
+  - tag: title
+    content: Blade Components / Image - Cloudinary Laravel
+---
+import Table from '@components/Table.astro';
+
+The Image component provides an easy way to deliver images from Cloudinary using Blade syntax.
+
+With it comes access to more advanced features like dynamic cropping, background removal, overlays, and other Cloudinary transofrmations.
+
+Basic usage:
+
+```blade
+<x-cloudinary::image public-id="example" />
+```
+
+With additional properties:
+
+```blade
+<x-cloudinary::image public-id="example" width="300" height="300" />
+```
+
+## Properties Available
+<Table
+  columns={[
+    {
+      id: 'prop',
+      title: 'Property'
+    },
+    {
+      id: 'type',
+      title: 'Type'
+    },
+    {
+      id: 'required',
+      title: 'Required'
+    },
+    {
+      id: 'example',
+      title: 'Example'
+    }
+  ]}
+  data={[
+    {
+      prop: 'public-id',
+      type: 'string',
+      required: 'Yes',
+      example: () => (<code>sample</code>),
+    },
+    {
+      prop: 'width',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>300</code>),
+    },
+    {
+      prop: 'height',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>300</code>),
+    },
+    {
+      prop: 'alt',
+      type: 'string',
+      required: 'Yes',
+      example: () => (<code>Dog catching a frisbee</code>),
+    },
+    {
+      prop: 'class',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>rounded shadow-lg</code>),
+    },
+    {
+      prop: 'crop',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>fill</code>),
+    },
+    {
+      prop: 'gravity',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>auto</code>),
+    },
+    {
+      prop: 'effect',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>sepia</code>),
+    },
+    {
+      prop: 'rotate',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>90</code>),
+    },
+    {
+      prop: 'colorize',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>50,100,150</code>),
+    },
+    {
+      prop: 'trim',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>true</code>),
+    },
+    {
+      prop: 'blur',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>500</code>),
+    },
+    {
+      prop: 'gray-scale',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>true</code>),
+    },
+    {
+      prop: 'black-white',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>true</code>),
+    },
+    {
+      prop: 'sepia',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>true</code>),
+    },
+    {
+      prop: 'redeye',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>true</code>),
+    },
+    {
+      prop: 'negate',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>true</code>),
+    },
+    {
+      prop: 'oil-paint',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>30</code>),
+    },
+    {
+      prop: 'vignette',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>30</code>),
+    },
+    {
+      prop: 'simulate-colorblind',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>deuteranopia</code>),
+    },
+    {
+      prop: 'pixelate',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>5</code>),
+    },
+    {
+      prop: 'unsharp-mask',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>500</code>),
+    },
+    {
+      prop: 'saturation',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>50</code>),
+    },
+    {
+      prop: 'contrast',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>50</code>),
+    },
+    {
+      prop: 'brightness',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>50</code>),
+    },
+    {
+      prop: 'gamma',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>50</code>),
+    },
+    {
+      prop: 'improve-mode',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>indoor</code>),
+    },
+    {
+      prop: 'shadow',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>50,x5,y5</code>),
+    },
+    {
+      prop: 'border',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>5px_solid_black</code>),
+    },
+    {
+      prop: 'round-corners',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>max</code>),
+    },
+    {
+      prop: 'bg-color',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>lightblue</code>),
+    },
+    {
+      prop: 'art',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>al_dente</code>),
+    },
+    {
+      prop: 'cartoonify',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>20:60</code>),
+    }
+  ]}
+/>
diff --git a/docs/components/upload-widget.mdx b/docs/components/upload-widget.mdx
new file mode 100644
index 0000000..1f3517a
--- /dev/null
+++ b/docs/components/upload-widget.mdx
@@ -0,0 +1,16 @@
+---
+title: Blade Components / Upload Widget
+description: Learn how to use the Upload Widget component in Cloudinary Laravel.
+ogImageTitle: Blade Components / Upload  Widget
+head:
+  - tag: title
+    content: Blade Components / Upload Widget - Cloudinary Laravel
+---
+
+The Upload Widget component provides an easy way to integrate Cloudinary's upload widget into your Laravel application using Blade syntax.
+
+Basic usage:
+
+```blade
+<x-cloudinary::widget>Upload Files</x-cloudinary::widget>
+```
\ No newline at end of file
diff --git a/docs/components/video.mdx b/docs/components/video.mdx
new file mode 100644
index 0000000..1f6447d
--- /dev/null
+++ b/docs/components/video.mdx
@@ -0,0 +1,66 @@
+---
+title: Blade Components / Video
+description: Learn how to use the Video component in Cloudinary Laravel.
+ogImageTitle: Blade Components / Video
+head:
+  - tag: title
+    content: Blade Components / Video - Cloudinary Laravel
+---
+
+import Table from '@components/Table.astro';
+
+The Video component provides an easy way to deliver videos from Cloudinary using Blade syntax.
+
+Basic usage:
+
+```blade
+<x-cloudinary::video public-id="example" />
+```
+
+With additional properties:
+
+```blade
+<x-cloudinary::video public-id="example" width="300" height="300" />
+```
+
+## Properties Available
+<Table
+  columns={[
+    {
+      id: 'prop',
+      title: 'Property'
+    },
+    {
+      id: 'type',
+      title: 'Type'
+    },
+    {
+      id: 'required',
+      title: 'Required'
+    },
+    {
+      id: 'example',
+      title: 'Example'
+    }
+  ]}
+  data={[
+    {
+      prop: 'public-id',
+      type: 'string',
+      required: 'Yes',
+      example: () => (<code>sample</code>),
+    },
+    {
+      prop: 'width',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>300</code>),
+    },
+    {
+      prop: 'height',
+      type: 'string',
+      required: 'No',
+      example: () => (<code>300</code>),
+    }
+  ]}
+/>
diff --git a/docs/configuration.mdx b/docs/configuration.mdx
new file mode 100644
index 0000000..f19c4a6
--- /dev/null
+++ b/docs/configuration.mdx
@@ -0,0 +1,30 @@
+---
+title: Basic Usage / Configuration
+description: Learn how to configure Cloudinary Laravel for your application.
+ogImageTitle: Configuration
+head:
+  - tag: title
+    content: File Storage Driver Basic Usage / Configuration - Cloudinary Laravel
+---
+import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
+import CodeBlock from '@components/CodeBlock.astro';
+
+This SDK implements the [File Storage](https://laravel.com/docs/12.x/filesystem#main-content) Driver interface allowing you to use it as just another storage destination like s3, azure or local disk.
+
+Add a new `cloudinary` key to your `config/filesystems.php` disk key like so:
+
+<CodeBlock alwaysExpanded>
+```php
+  ...,
+  'cloudinary' => [
+      'driver' => 'cloudinary',
+      'key' => env('CLOUDINARY_KEY'),
+      'secret' => env('CLOUDINARY_SECRET'),
+      'cloud' => env('CLOUDINARY_CLOUD_NAME'),
+      'url' => env('CLOUDINARY_URL'),
+      'secure' => (bool) env('CLOUDINARY_SECURE', true),
+      'prefix' => env('CLOUDINARY_PREFIX'),
+  ],
+...,
+```
+</CodeBlock>
\ No newline at end of file
diff --git a/docs/examples.mdx b/docs/examples.mdx
new file mode 100644
index 0000000..00acf34
--- /dev/null
+++ b/docs/examples.mdx
@@ -0,0 +1,10 @@
+---
+title: Examples
+description: Examples of using Cloudinary Laravel.
+ogImageTitle: Examples
+head:
+  - tag: title
+    content: File Storage Driver Examples - Cloudinary Laravel
+---
+
+Coming Soon!
\ No newline at end of file
diff --git a/docs/guides/image-optimization.mdx b/docs/guides/image-optimization.mdx
new file mode 100644
index 0000000..275f242
--- /dev/null
+++ b/docs/guides/image-optimization.mdx
@@ -0,0 +1,28 @@
+---
+title: Guides / Image Optimization
+description: Learn how to optimize images in Cloudinary Laravel.
+ogImageTitle: Guides / Image Optimization
+head:
+  - tag: title
+    content: Guides / Image Optimization - Cloudinary Laravel
+---
+
+Optimization plays a critical role in making your website load as fast as possible.
+
+With the [Image](/components/image) component, your images will be automatically optimized with automatic compression and by delivering the most efficient format based on your browser or device (WebP, AVIF, etc).
+
+:::tip
+You can further optimize delivery with responsive sizing by using the `sizes` prop.
+:::
+
+# Example
+
+```blade
+<x-cloudinary::image 
+  public-id="example" 
+  width="960" 
+  height="600" 
+  sizes="100vw" 
+  alt="My example"
+/>
+```
\ No newline at end of file
diff --git a/docs/guides/uploading-images-and-videos.mdx b/docs/guides/uploading-images-and-videos.mdx
new file mode 100644
index 0000000..dff34b2
--- /dev/null
+++ b/docs/guides/uploading-images-and-videos.mdx
@@ -0,0 +1,31 @@
+---
+title: Guides / Upload Images & Videos
+description: Learn how to upload images & videos in Cloudinary Laravel.
+ogImageTitle: Guides / Upload Images & Videos
+head:
+  - tag: title
+    content: Guides / Upload Images & Videos - Cloudinary Laravel
+---
+
+Laravel Cloudinary provides a seamless way to integrate Cloudinary's powerful upload capabilities into your Laravel project. This guide will show you how to use the `<x-cloudinary::widget>` component to add upload functionality to your application.
+
+# `<x-cloudinary::widget>` Component
+
+The `<x-cloudinary::widget>` component is a wrapper around Cloudinary's Upload Widget, specifically optimized for Laravel projects. It allows you to easily add upload functionality with minimal configuration.
+
+## Basic Usage
+
+Here's a simple example of how to use the widget in your Blade templates:
+
+```blade
+<x-cloudinary::widget>Upload to Cloudinary</x-cloudinary::widget>
+```
+
+## Configuration Options
+Todo
+
+## Best Practices and Tips
+1. Always use upload presets to control what can be uploaded to your Cloudinary account.
+2. Implement signed uploads for enhanced security, especially in production environments.
+3. Customize the upload widget to match your application's design and user experience.
+4. Consider implementing upload restrictions (file types, sizes) using Cloudinarys upload presets.
\ No newline at end of file
diff --git a/docs/guides/using-with-other-cloudinary-sdks.mdx b/docs/guides/using-with-other-cloudinary-sdks.mdx
new file mode 100644
index 0000000..f4bcd75
--- /dev/null
+++ b/docs/guides/using-with-other-cloudinary-sdks.mdx
@@ -0,0 +1,10 @@
+---
+title: Guides / Using with other Cloudinary SDKS
+description: Learn how to use Cloudinary Laravel with other Cloudinary SDKs.
+ogImageTitle: Guides / Using with other Cloudinary SDKS
+head:
+  - tag: title
+    content: Guides / Using with other Cloudinary SDKS - Cloudinary Laravel
+---
+
+Coming Soon!
\ No newline at end of file
diff --git a/docs/index.mdx b/docs/index.mdx
new file mode 100644
index 0000000..9446954
--- /dev/null
+++ b/docs/index.mdx
@@ -0,0 +1,42 @@
+---
+title: Cloudinary Laravel
+description: Laravel SDK for Cloudinary.
+template: splash
+hero:
+  tagline: "Null"
+head:
+  - tag: title
+    content: Cloudinary Laravel - The Image & Video API for Laravel
+---
+
+import { CldImage } from "astro-cloudinary";
+
+import ImageGrid from "@components/ImageGrid.astro";
+import Button from "@components/Button.astro";
+
+<div class="not-content text-center max-w-xl mx-auto mt-14 mb-20 md:mt-36 md:mb-44">
+  <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold">Cloudinary Laravel</h1>
+<p class="text-xl mt-8">
+  High-performance image and video delivery and uploading at scale in Laravel
+  powered by Cloudinary.
+</p>
+
+  <p class="flex items-center justify-center gap-6 mt-8 px-2">
+    
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/62209650/196528621-b68e9e10-7e55-4c7d-9177-904cadbb4296.png" align="center" height="50" />
+      <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/62209650/196528761-a815025a-271a-4d8e-ac7e-cea833728bf9.png" align="center" height="50" />
+      <img alt="Cloudinary" src="https://user-images.githubusercontent.com/62209650/196528761-a815025a-271a-4d8e-ac7e-cea833728bf9.png" align="center" height="50" />
+    </picture>
+
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/1045274/200928533-47539867-07ff-406e-aa8b-25c594652dc8.png" align="center" height="50" />
+      <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/1045274/200928533-47539867-07ff-406e-aa8b-25c594652dc8.png" align="center" height="50" />
+      <img alt="Laravel" src="https://user-images.githubusercontent.com/1045274/200928533-47539867-07ff-406e-aa8b-25c594652dc8.png" align="center" height="50" />
+    </picture>
+
+  </p>
+  <p class="mt-10">
+    <Button href="/installation">Get Started</Button>
+  </p>
+</div>
diff --git a/docs/installation.mdx b/docs/installation.mdx
new file mode 100644
index 0000000..e170c1c
--- /dev/null
+++ b/docs/installation.mdx
@@ -0,0 +1,53 @@
+---
+title: Installing Cloudinary Laravel
+description: Getting started with Cloudinary Laravel.
+ogImageTitle: Installation
+head:
+  - tag: title
+    content: Installation - Cloudinary Laravel
+---
+import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
+import CodeBlock from '@components/CodeBlock.astro';
+
+## Getting Started
+
+<Steps>
+<ol class="!mt-10">
+  <li>
+    ### Installation
+
+    Requires PHP 8.2+ and Laravel 11+.
+
+    <CodeBlock alwaysExpanded>
+    ```
+    composer require cloudinary-labs/cloudinary-laravel
+    ```
+    </CodeBlock>
+  </li>
+  <li>
+    ### Configuration
+
+    After you have installed the SDK, you can invoke the install command to set everything up:
+
+    <CodeBlock alwaysExpanded>
+    ```
+    php artisan cloudinary:install
+    ```
+    </CodeBlock>
+
+    Add your Cloudinary credentials to your .env file:
+
+    <CodeBlock alwaysExpanded>
+    ```
+    CLOUDINARY_URL=cloudinary://API_KEY:API_SECRET@CLOUD_NAME
+    CLOUDINARY_UPLOAD_PRESET=your_upload_preset
+    CLOUDINARY_NOTIFICATION_URL=
+    ```
+    </CodeBlock>
+  </li>
+</ol>
+</Steps>
+
+:::tip
+Don't have a Cloudinary account? <a href="https://cloudinary.com/users/register_free?utm_campaign=devx_laravelcloudinary&utm_medium=referral&utm_source=laravelcloudinary">Sign up for free</a> on cloudinary.com!
+:::