diff --git a/client_web/Documentation/Contexts.md b/client_web/Documentation/Contexts.md
deleted file mode 100644
index 4f397ec..0000000
--- a/client_web/Documentation/Contexts.md
+++ /dev/null
@@ -1,242 +0,0 @@
-# Context Management Documentation
-
-## Overview
-
-This project uses React Context to manage global state across the application. Contexts are used to provide and consume values such as user information and theme settings. This documentation will guide you through the existing context setup and how to create your own context, including both cookie and non-cookie related contexts.
-
-## Existing Contexts
-
-### Theme Context
-
-The `ThemeContext` manages the application's theme (light or dark). It loads the theme from cookies at initialization and updates cookies when the theme changes.
-
-#### `ThemeContext.tsx`
-
-```typescript
-import { createContext, useState, useEffect, ReactNode } from 'react';
-import Cookies from 'js-cookie';
-
-type ThemeContextType = {
-    theme: 'light' | 'dark';
-    setTheme: (theme: 'light' | 'dark') => void;
-};
-
-export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
-
-export const ThemeProvider = ({ children }: { children: ReactNode }) => {
-    const [theme, setTheme] = useState<'light' | 'dark'>('light');
-
-    useEffect(() => {
-        const savedTheme = Cookies.get('theme') as 'light' | 'dark';
-        if (savedTheme) {
-            setTheme(savedTheme);
-        }
-    }, []);
-
-    const updateTheme = (newTheme: 'light' | 'dark') => {
-        setTheme(newTheme);
-        Cookies.set('theme', newTheme, { expires: 365 });
-    };
-
-    return (
-        <ThemeContext.Provider value={{ theme, setTheme: updateTheme }}>
-            {children}
-        </ThemeContext.Provider>
-    );
-};
-```
-
-#### User Context
-The UserContext manages user information such as user ID and name. It does not use cookies.
-
-`UserContext.tsx`
-
-```typescript
-import { createContext, useState, ReactNode } from 'react';
-
-interface User {
-    id: string;
-    name: string;
-}
-
-interface UserContextType {
-    user: User | null;
-    setUser: (user: User | null) => void;
-}
-
-export const UserContext = createContext<UserContextType | undefined>(undefined);
-
-export const UserProvider = ({ children }: { children: ReactNode }) => {
-    const [user, setUser] = useState<User | null>(null);
-
-    return (
-        <UserContext.Provider value={{ user, setUser }}>
-            {children}
-        </UserContext.Provider>
-    );
-};
-```
-
-## Using Contexts
-
-To use the contexts in your components, you can use the custom hooks useTheme and useUser.
-
-`ContextHooks.ts`
-
-```typescript
-const Component = () => {
-    const { theme, setTheme } = useTheme();
-    const { user, setUser } = useUser();
-
-    return (
-        <div>
-            <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
-                Toggle Theme
-            </button>
-            <p>{user ? `Hello, ${user.name}!` : 'Not logged in'}</p>
-        </div>
-    );
-};
-```
-
-## Creating Your Own Context
-
-### Non-Cookie Related Context
-
-1. Create a new context file, e.g., `MyContext.tsx`.
-
-```typescript
-import { createContext, useState, ReactNode } from 'react';
-
-interface MyContextType {
-    value: string;
-    setValue: (value: string) => void;
-}
-
-export const MyContext = createContext<MyContextType | undefined>(undefined);
-
-export const MyProvider = ({ children }: { children: ReactNode }) => {
-    const [value, setValue] = useState<string>('');
-
-    return (
-        <MyContext.Provider value={{ value, setValue }}>
-            {children}
-        </MyContext.Provider>
-    );
-};
-```
-2. Add the new provider to `CombinedProviders.tsx`.
-    
-```typescript
-import { ReactNode } from 'react';
-import { UserProvider } from './UserContext';
-import { ThemeProvider } from './ThemeContext';
-import { MyProvider } from './MyContext';
-
-const providers = [
-    UserProvider,
-    ThemeProvider,
-    MyProvider,
-    // Add more providers here
-];
-
-const CombinedProviders = ({ children }: { children: ReactNode }) => {
-    return providers.reduceRight((acc, Provider) => {
-        return <Provider>{acc}</Provider>;
-    }, children);
-};
-
-export default CombinedProviders;
-```
-
-3. Create a custom hook for the new context.
-
-```typescript
-import { useContext } from 'react';
-import { MyContext } from './MyContext';
-
-export const useMyContext = () => {
-    const context = useContext(MyContext);
-    if (!context) {
-        throw new Error('useMyContext must be used within a MyProvider');
-    }
-    return context;
-};
-```
-
-### Cookie Related Context
-
-1. Create a new context file, e.g., `MyCookieContext.tsx`.
-
-```typescript
-import { createContext, useState, useEffect, ReactNode } from 'react';
-import Cookies from 'js-cookie';
-
-interface MyCookieContextType {
-    value: string;
-    setValue: (value: string) => void;
-}
-
-export const MyCookieContext = createContext<MyCookieContextType | undefined>(undefined);
-
-export const MyCookieProvider = ({ children }: { children: ReactNode }) => {
-    const [value, setValue] = useState<string>('');
-
-    useEffect(() => {
-        const savedValue = Cookies.get('myValue');
-        if (savedValue) {
-            setValue(savedValue);
-        }
-    }, []);
-
-    const updateValue = (newValue: string) => {
-        setValue(newValue);
-        Cookies.set('myValue', newValue, { expires: 365 });
-    };
-
-    return (
-        <MyCookieContext.Provider value={{ value, setValue: updateValue }}>
-            {children}
-        </MyCookieContext.Provider>
-    );
-};
-```
-
-2. Add the new provider to `CombinedProviders.tsx`.
-
-```typescript
-import { ReactNode } from 'react';
-import { UserProvider } from './UserContext';
-import { ThemeProvider } from './ThemeContext';
-import { MyCookieProvider } from './MyCookieContext';
-
-const providers = [
-    UserProvider,
-    ThemeProvider,
-    MyCookieProvider,
-    // Add more providers here
-];
-
-const CombinedProviders = ({ children }: { children: ReactNode }) => {
-    return providers.reduceRight((acc, Provider) => {
-        return <Provider>{acc}</Provider>;
-    }, children);
-};
-
-export default CombinedProviders;
-```
-
-3. Create a custom hook for the new context.
-
-```typescript
-import { useContext } from 'react';
-import { MyCookieContext } from './MyCookieContext';
-
-export const useMyCookieContext = () => {
-    const context = useContext(MyCookieContext);
-    if (!context) {
-        throw new Error('useMyCookieContext must be used within a MyCookieProvider');
-    }
-    return context;
-};
-```
diff --git a/client_web/package.json b/client_web/package.json
index b9a5bad..80fa366 100644
--- a/client_web/package.json
+++ b/client_web/package.json
@@ -5,6 +5,7 @@
   "type": "module",
   "main": "electron.js",
   "scripts": {
+    "start": "mkcert -install && mkcert localhost && vite",
     "dev": "mkcert -install && mkcert localhost && vite",
     "production": "vite --mode production",
     "build": "tsc -b && vite build",
diff --git a/doc/source/client_mobile/index.rst b/doc/source/client_mobile/index.rst
new file mode 100644
index 0000000..2ca73b3
--- /dev/null
+++ b/doc/source/client_mobile/index.rst
@@ -0,0 +1,31 @@
+.. AREA Client Mobile Documentation
+
+AREA Client Mobile
+==================
+
+Welcome to the AREA Client Mobile documentation!
+
+Overview
+--------
+
+The AREA Client Mobile is the mobile application part of the AREA project, built using React Native and TypeScript. It provides a user-friendly interface for setting up and managing automated workflows that integrate various services on mobile devices.
+
+Key Features
+------------
+
+- **User Authentication**: Secure login and registration using various authentication providers.
+- **Responsive Design**: Optimized for various mobile devices.
+- **Customizable Workflows**: Create and manage workflows with ease.
+
+Getting Started
+---------------
+
+To get started with the AREA Client Mobile, follow the installation and setup instructions in the :doc:`installation` section.
+
+Contents
+--------
+
+.. toctree::
+   :maxdepth: 2
+
+   installation
diff --git a/doc/source/client_mobile/installation.rst b/doc/source/client_mobile/installation.rst
new file mode 100644
index 0000000..5b1b0a6
--- /dev/null
+++ b/doc/source/client_mobile/installation.rst
@@ -0,0 +1,31 @@
+Installation
+============
+
+Follow these steps to set up and run the AREA Client Web project.
+
+1. Clone the repository
+-----------------------
+
+.. code-block:: sh
+
+    git clone git@github.com:ASM-Studios/AREA.git
+
+2. Install NPM packages
+-----------------------
+
+.. code-block:: sh
+
+    cd AREA/client_web
+    npm install
+
+3. Run the project
+------------------
+
+.. code-block:: sh
+
+    npm run start
+
+4. Access the application
+-------------------------
+
+To get the .apk, go onto the front-end and navigate to the following URL: https://localhost:8081/client.apk
diff --git a/doc/source/client_web/context.rst b/doc/source/client_web/context.rst
new file mode 100644
index 0000000..d5f1dcf
--- /dev/null
+++ b/doc/source/client_web/context.rst
@@ -0,0 +1,253 @@
+Context Management Documentation
+===============================
+
+Overview
+--------
+
+This project uses React Context to manage global state across the application. Contexts are used to provide and consume values such as user information and theme settings. This documentation will guide you through the existing context setup and how to create your own context, including both cookie and non-cookie related contexts.
+
+Existing Contexts
+-----------------
+
+Theme Context
+~~~~~~~~~~~~~
+
+The `ThemeContext` manages the application's theme (light or dark). It loads the theme from cookies at initialization and updates cookies when the theme changes.
+
+**ThemeContext.tsx**
+
+.. code-block:: typescript
+
+    import { createContext, useState, useEffect, ReactNode } from 'react';
+    import Cookies from 'js-cookie';
+
+    type ThemeContextType = {
+        theme: 'light' | 'dark';
+        setTheme: (theme: 'light' | 'dark') => void;
+    };
+
+    export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+    export const ThemeProvider = ({ children }: { children: ReactNode }) => {
+        const [theme, setTheme] = useState<'light' | 'dark'>('light');
+
+        useEffect(() => {
+            const savedTheme = Cookies.get('theme') as 'light' | 'dark';
+            if (savedTheme) {
+                setTheme(savedTheme);
+            }
+        }, []);
+
+        const updateTheme = (newTheme: 'light' | 'dark') => {
+            setTheme(newTheme);
+            Cookies.set('theme', newTheme, { expires: 365 });
+        };
+
+        return (
+            <ThemeContext.Provider value={{ theme, setTheme: updateTheme }}>
+                {children}
+            </ThemeContext.Provider>
+        );
+    };
+
+User Context
+~~~~~~~~~~~~
+
+The `UserContext` manages user information such as user ID and name. It does not use cookies.
+
+**UserContext.tsx**
+
+.. code-block:: typescript
+
+    import { createContext, useState, ReactNode } from 'react';
+
+    interface User {
+        id: string;
+        name: string;
+    }
+
+    interface UserContextType {
+        user: User | null;
+        setUser: (user: User | null) => void;
+    }
+
+    export const UserContext = createContext<UserContextType | undefined>(undefined);
+
+    export const UserProvider = ({ children }: { children: ReactNode }) => {
+        const [user, setUser] = useState<User | null>(null);
+
+        return (
+            <UserContext.Provider value={{ user, setUser }}>
+                {children}
+            </UserContext.Provider>
+        );
+    };
+
+Using Contexts
+--------------
+
+To use the contexts in your components, you can use the custom hooks `useTheme` and `useUser`.
+
+**ContextHooks.ts**
+
+.. code-block:: typescript
+
+    const Component = () => {
+        const { theme, setTheme } = useTheme();
+        const { user, setUser } = useUser();
+
+        return (
+            <div>
+                <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
+                    Toggle Theme
+                </button>
+                <p>{user ? `Hello, ${user.name}!` : 'Not logged in'}</p>
+            </div>
+        );
+    };
+
+Creating Your Own Context
+-------------------------
+
+Non-Cookie Related Context
+~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+1. Create a new context file, e.g., `MyContext.tsx`.
+
+.. code-block:: typescript
+
+    import { createContext, useState, ReactNode } from 'react';
+
+    interface MyContextType {
+        value: string;
+        setValue: (value: string) => void;
+    }
+
+    export const MyContext = createContext<MyContextType | undefined>(undefined);
+
+    export const MyProvider = ({ children }: { children: ReactNode }) => {
+        const [value, setValue] = useState<string>('');
+
+        return (
+            <MyContext.Provider value={{ value, setValue }}>
+                {children}
+            </MyContext.Provider>
+        );
+    };
+
+2. Add the new provider to `CombinedProviders.tsx`.
+
+.. code-block:: typescript
+
+    import { ReactNode } from 'react';
+    import { UserProvider } from './UserContext';
+    import { ThemeProvider } from './ThemeContext';
+    import { MyProvider } from './MyContext';
+
+    const providers = [
+        UserProvider,
+        ThemeProvider,
+        MyProvider,
+        // Add more providers here
+    ];
+
+    const CombinedProviders = ({ children }: { children: ReactNode }) => {
+        return providers.reduceRight((acc, Provider) => {
+            return <Provider>{acc}</Provider>;
+        }, children);
+    };
+
+    export default CombinedProviders;
+
+3. Create a custom hook for the new context.
+
+.. code-block:: typescript
+
+    import { useContext } from 'react';
+    import { MyContext } from './MyContext';
+
+    export const useMyContext = () => {
+        const context = useContext(MyContext);
+        if (!context) {
+            throw new Error('useMyContext must be used within a MyProvider');
+        }
+        return context;
+    };
+
+Cookie Related Context
+~~~~~~~~~~~~~~~~~~~~~~
+
+1. Create a new context file, e.g., `MyCookieContext.tsx`.
+
+.. code-block:: typescript
+
+    import { createContext, useState, useEffect, ReactNode } from 'react';
+    import Cookies from 'js-cookie';
+
+    interface MyCookieContextType {
+        value: string;
+        setValue: (value: string) => void;
+    }
+
+    export const MyCookieContext = createContext<MyCookieContextType | undefined>(undefined);
+
+    export const MyCookieProvider = ({ children }: { children: ReactNode }) => {
+        const [value, setValue] = useState<string>('');
+
+        useEffect(() => {
+            const savedValue = Cookies.get('myValue');
+            if (savedValue) {
+                setValue(savedValue);
+            }
+        }, []);
+
+        const updateValue = (newValue: string) => {
+            setValue(newValue);
+            Cookies.set('myValue', newValue, { expires: 365 });
+        };
+
+        return (
+            <MyCookieContext.Provider value={{ value, setValue: updateValue }}>
+                {children}
+            </MyCookieContext.Provider>
+        );
+    };
+
+2. Add the new provider to `CombinedProviders.tsx`.
+
+.. code-block:: typescript
+
+    import { ReactNode } from 'react';
+    import { UserProvider } from './UserContext';
+    import { ThemeProvider } from './ThemeContext';
+    import { MyCookieProvider } from './MyCookieContext';
+
+    const providers = [
+        UserProvider,
+        ThemeProvider,
+        MyCookieProvider,
+        // Add more providers here
+    ];
+
+    const CombinedProviders = ({ children }: { children: ReactNode }) => {
+        return providers.reduceRight((acc, Provider) => {
+            return <Provider>{acc}</Provider>;
+        }, children);
+    };
+
+    export default CombinedProviders;
+
+3. Create a custom hook for the new context.
+
+.. code-block:: typescript
+
+    import { useContext } from 'react';
+    import { MyCookieContext } from './MyCookieContext';
+
+    export const useMyCookieContext = () => {
+        const context = useContext(MyCookieContext);
+        if (!context) {
+            throw new Error('useMyCookieContext must be used within a MyCookieProvider');
+        }
+        return context;
+    };
diff --git a/doc/source/client_web/index.rst b/doc/source/client_web/index.rst
new file mode 100644
index 0000000..0f4fcca
--- /dev/null
+++ b/doc/source/client_web/index.rst
@@ -0,0 +1,38 @@
+.. AREA Client Web Documentation
+
+AREA Client Web
+===============
+
+Welcome to the AREA Client Web documentation!
+
+Overview
+--------
+
+The AREA Client Web is the front-end part of the AREA project, built using React and TypeScript. It provides a user-friendly interface for setting up and managing automated workflows that integrate various services.
+
+Key Features
+------------
+
+- **User Authentication**: Secure login and registration using various authentication providers.
+- **Responsive Design**: Optimized for both desktop and mobile devices.
+- **Customizable Workflows**: Create and manage workflows with ease.
+
+Getting Started
+---------------
+
+To get started with the AREA Client Web, follow the installation and setup instructions in the :doc:`installation` section.
+
+Contexts
+--------
+
+The AREA Client Web uses React Context to manage global state across the application. For more details, refer to the :doc:`context` section.
+
+
+Contents
+--------
+
+.. toctree::
+   :maxdepth: 2
+
+   installation
+   context
diff --git a/doc/source/client_web/installation.rst b/doc/source/client_web/installation.rst
new file mode 100644
index 0000000..e43daf1
--- /dev/null
+++ b/doc/source/client_web/installation.rst
@@ -0,0 +1,30 @@
+Installation
+============
+
+Follow these steps to set up and run the AREA Client Web project.
+
+1. Clone the repository
+-----------------------
+
+.. code-block:: sh
+
+    git clone git@github.com:ASM-Studios/AREA.git
+
+2. Install NPM packages
+-----------------------
+
+.. code-block:: sh
+
+    cd AREA/client_web
+    npm install
+
+3. Run the project
+------------------
+
+To start the front-end, ensure that the following binaries are available:
+
+mkcert - For generating SSL certificates.
+
+.. code-block:: sh
+
+    npm run start
diff --git a/doc/source/index.rst b/doc/source/index.rst
index abc47b4..618caeb 100644
--- a/doc/source/index.rst
+++ b/doc/source/index.rst
@@ -20,12 +20,17 @@ Features
 Getting Started
 ---------------
 
-To get started with AREA, follow the installation and setup instructions in the :doc:`installation` section.
+To get started with AREA, follow the installation instructions for the respective components
 
-.. toctree::
-   :maxdepth: 2
-   :caption: Contents:
+Table of Contents
+-----------------
 
-   index
-   contributing
-   Project/index
+.. toctree::
+    :maxdepth: 5
+
+    index
+    contributing
+    Project/index
+    client_web/index
+    client_mobile/index
+    server/index
diff --git a/doc/source/server/index.rst b/doc/source/server/index.rst
new file mode 100644
index 0000000..b9b6daa
--- /dev/null
+++ b/doc/source/server/index.rst
@@ -0,0 +1,31 @@
+.. AREA Server Documentation
+
+AREA Server
+===========
+
+Welcome to the AREA Server documentation!
+
+Overview
+--------
+
+The AREA Server is the backend part of the AREA project, built using Go. It provides the necessary APIs and services to support the client applications.
+
+Key Features
+------------
+
+- **API Services**: Provides RESTful APIs for client applications.
+- **Authentication**: Manages user authentication and authorization.
+- **Workflow Management**: Handles the creation and execution of automated workflows.
+
+Getting Started
+---------------
+
+To get started with the AREA Server, follow the installation and setup instructions in the :doc:`installation` section.
+
+Contents
+--------
+
+.. toctree::
+   :maxdepth: 2
+
+   installation
diff --git a/doc/source/server/installation.rst b/doc/source/server/installation.rst
new file mode 100644
index 0000000..01e6f9a
--- /dev/null
+++ b/doc/source/server/installation.rst
@@ -0,0 +1,26 @@
+Installation
+============
+
+Follow these steps to set up and run the AREA Client Web project.
+
+1. Clone the repository
+-----------------------
+
+.. code-block:: sh
+
+    git clone git@github.com:ASM-Studios/AREA.git
+
+2. Install GO packages
+-----------------------
+
+.. code-block:: sh
+
+    cd AREA/server
+    // TODO: define the command to install the GO packages
+
+3. Run the project
+------------------
+
+.. code-block:: sh
+
+    go run