Add usage guide images and update documentation

Added light and dark mode images for login, domain, target URL, and vanity URL to the assets folder. Updated the Usage Guide to include visual references and expanded instructions for logging in, domain association, target and vanity URLs, and QR code actions. Improved Getting Started instructions with a code block for resource group creation.

Author: JelaniB-sec

docs/URL-Shortener/Getting-Started.md

@@ -13,10 +13,14 @@ If you want to set this up on-prem or in a different environment, please refer t
 1. Navigate to `./infrastructureTemplates` folder in the terminal.
 2. Issue the bicep template build command: `bicep build .\urlShortener.bicep`
 
-    Note: Whenever you issue the bicep build command against the bicep template it will compile it into an ARM template which is the language that Azure speaks. Azure does not support bicep natively
+    Note: Whenever you issue the bicep build command against the bicep template it will compile it into an ARM template which is the language that Azure speaks. Azure does not support bicep natively.
 
 3. Ensure that you are logged into your Azure tenant and select your subscription.
-4. Make a new Azure resource group with the naming and location convention through the CLI: `New-AzResourceGroup -Name Host -Location EastUs2`
+4. Make a new Azure resource group with the naming and location convention through the CLI:
+
+    ```powershell
+    New-AzResourceGroup -Name Host -Location EastUs2
+    ```
 
     Note: Resource group has to be created before deployment.
 

docs/URL-Shortener/Usage-Guide.md

@@ -1,3 +1,25 @@
 # Usage Guide
 
 This guide explains how to operate SUS once it's been deployed. It covers core infrastructure deployment, device and user lifecycle management, and links to detailed task-level workflows.
+
+Log into your associated Azure Account on the top right corner.
+
+![LogIn](../assets/Login-Light.png#only-light){ loading=lazy }
+![LogIn](../assets/Login-Dark.png#only-dark){ loading=lazy }
+
+In the dropdown, the domain name will be associated with the domain that was created on the server. For the purpose of this guide, the domain name is pointing to url.shilab.com.
+
+![Domain](../assets/DomainUrl-Light.png#only-light){ loading=lazy }
+![Domain](../assets/DomainUrl-Dark.png#only-dark){ loading=lazy }
+
+The target URL is the the full destination address that the vanity URL redirects to. It represents the actual location of the content or resource, such as a website, document, or application.
+
+![Target](../assets/TargetUrl-Light.png#only-light){ loading=lazy }
+![Target](../assets/TargetUrl-Dark.png#only-dark){ loading=lazy }
+
+The vanity URL is the customizable, human-readable identifier used to create a short, memorable link that redirects to a longer or more complex destination URL.
+
+![Vanity](../assets/VanityUrl-Light.png#only-light){ loading=lazy }
+![Vanity](../assets/VanityUrl-Dark.png#only-dark){ loading=lazy }
+
+You can see the list of Vanity Names and the associated Destination. Under Action, you have the ability to view and track the QR code that was generated. It is a scannable code that encodes the vanity URL, allowing users to quickly access the target URL using a mobile device. It enhances accessibility and ease of sharing, especially in printed materials or presentations.