Refactor the files inside the features section

docs/07-Features/05-keyboard-shortcuts.md → docs/07-Features/04-keyboard-shortcuts.md

@@ -1,4 +1,4 @@
-# Change Keyboard Shortcuts
+# Keyboard Shortcuts
 
 Now you can make your own shortcuts for any menu, so you don't have to memorize a bunch of different ones for every app. It's like customizing your game controls to play your way!
 This feature is accessible in two ways: via the menu items or through the Keyboard Shortcuts panel.

docs/07-Features/01-live-preview.md → docs/07-Features/05-Live Preview/01-live-preview.md

@@ -8,36 +8,36 @@ The Live Preview feature in Phoenix Code provides instant feedback on changes ma
 
 ## Activating Live Preview for HTML Files
 1. Select the HTML file you wish to edit from the editing panel.
-   ![Open file](images/livePreview/open.png "Open the HTML file from the editing panel").
+   ![Open file](../images/livePreview/open.png "Open the HTML file from the editing panel")
 2. Click the lightning bolt icon, located on the right panel, to initiate Live Preview.
-   ![Lightning icon](images/livePreview/off.png "Initiate Live Preview by clicking the lightning icon").
+   ![Lightning icon](../images/livePreview/off.png "Initiate Live Preview by clicking the lightning icon")
 3. The icon turns gold when Live Preview is active.
-   ![Lightning icon active](images/livePreview/on.png)
+   ![Lightning icon active](../images/livePreview/on.png)
    View the side-by-side Live Preview alongside the code.
-   ![Live Preview active](images/livePreview/livepreviewon.png "Live Preview alongside code").
+   ![Live Preview active](../images/livePreview/livepreviewon.png "Live Preview alongside code")
 
 ## Detaching Live Preview to a New Window
 1. Hover over the Live Preview panel.
 2. Click the pop-out icon to detach Live Preview into a new window.
-   ![Detaching to new window](images/livePreview/popout.png "Click to detach Live Preview to a new window").
+   ![Detaching to new window](../images/livePreview/popout.png "Click to detach Live Preview to a new window")
 3. Live Preview will now display in your default web browser, allowing for uninterrupted coding and viewing.
 
 ## Selecting a Browser for Live Preview
 1. Hover over the Live Preview panel.
-2. Choose your preferred browser by clicking its icon. ![Browser selected](images/livePreview/browser-choice.png "Live Preview in selected browser").
+2. Choose your preferred browser by clicking its icon. ![Browser selected](../images/livePreview/browser-choice.png "Live Preview in selected browser")
 3. Live Preview opens in the chosen browser.
 
 ## Reload Live Preview
-![Reload Live Preview](./images/livePreview/reload.png)
+![Reload Live Preview](../images/livePreview/reload.png)
 The **Reload** button in the live preview toolbar allows you to manually refresh the Live Preview pane to ensure it reflects the latest changes in your code. While Live Preview updates automatically, the Reload button can be helpful if you encounter synchronization issues.
 
 ## Disable Live Preview
 You can disable the live preview panel at startup by following these steps:
 1. Click the settings icon in the toolbar (hover over the toolbar to make it appear).
-![Settings Icon](./images/livePreview/settings-gear.png)
+![Settings Icon](../images/livePreview/settings-gear.png)
 
 2. This will open the live preview settings menu: 
-![Settings menu](./images/livePreview/live-preview-settings-menu.png)
+![Settings menu](../images/livePreview/live-preview-settings-menu.png)
 3. Disable the `Show Live Preview Panel at Startup` option.
 
 

docs/07-Features/02-live-preview-settings.md → docs/07-Features/05-Live Preview/02-live-preview-settings.md

@@ -9,14 +9,14 @@ There are two ways to access the Live Preview Settings dialog:
 1. **From the File Menu**:
     - Navigate to the 'File' menu at the top left of the editor.
     - Select 'Live Preview Settings' from the dropdown.
-![live-preview-settings](images/livePreview/settings-menu.png)
+![live-preview-settings](../images/livePreview/settings-menu.png)
 1. **From the Live Preview Panel**:
     - Locate the live preview panel, typically found at the right side of the editor.
     - Hover over the live preview panel title bar and click the gear icon (⚙️) located at the top right of the panel title bar.
-![live-preview-settings](images/livePreview/settings-gear.png)
+![live-preview-settings](../images/livePreview/settings-gear.png)
 ## Configuring Your Server
 
-![settings-dialog](images/livePreview/settings-dialog.png)
+![settings-dialog](../images/livePreview/settings-dialog.png)
 
 Within the Live Preview Settings dialog, you can configure the following options:
 

docs/07-Features/03-php-live-preview.md → docs/07-Features/05-Live Preview/03-php-live-preview.md

@@ -61,7 +61,7 @@ Setting up a live preview for PHP projects is straightforward with Apache and XA
 
 </Tabs>
 6. Add the following settings to your custom live preview:
-![Custom Live Preview Settings](images/phpLivePreview/phpCustomServer.png)
+![Custom Live Preview Settings](../images/phpLivePreview/phpCustomServer.png)
 Your live preview should now automatically update to reflect changes whenever PHP files are edited.
 
 ## PHP Live Preview in Action

docs/07-Features/11-recent-files.md → docs/07-Features/08-recent-files.md

@@ -8,7 +8,7 @@ The Recent Files dialog box provides quick access to files you’ve recently wor
 * Desktop App: Press `Ctrl + R`.
 * Browser: Press `Ctrl + Alt + Shift + O` (as `Ctrl + R` is reserved for browser reloads).
 
-To customize the keyboard shortcut, refer to [this docs](./05-keyboard-shortcuts.md#changing-a-keyboard-shortcut)
+To customize the keyboard shortcut, refer to [this docs](./keyboard-shortcuts#changing-a-keyboard-shortcut)
 
 ## About Recent Files Dialog
 

docs/07-Features/10-syntax-highlighting.md → docs/07-Features/09-syntax-highlighting.md

@@ -32,7 +32,7 @@ Syntax Highlighting Example [Theme : `Monokai Dark Soda`]
 Syntax Highlighting Example [Theme : `Material Color Light`]
 ![Syntax Highlighting Material Color Light Theme Image](images/syntaxHighlighting/syntax-highlighting-material-color-light-theme.png "Syntax Highlighting by Material Color Light Theme") 
 
-To learn more about Themes. [Click Here](./09-themes.md)
+To learn more about Themes. [Click Here](./themes)
 
 
 ## Add Syntax Highlighting for a Particular File Type