diff --git a/docs/docs/getting-started/iOS.md b/docs/docs/getting-started/iOS.md
index 19775cce1d65..6687d4a5e6bd 100644
--- a/docs/docs/getting-started/iOS.md
+++ b/docs/docs/getting-started/iOS.md
@@ -1,29 +1,35 @@
 # Using iOS Shortcuts with Mealie
-![](https://help.apple.com/assets/5E8CEA35094622DF10489984/5E8CEA42094622DF1048998D/en_US/ed1f9c157cdefc13e0161e0f70015455.png)
+![](/img/iphone-image.png){: align=right style="height:400px;width:400px"}
+
+
 User  [brasilikum](https://github.com/brasilikum) opened an issue on the main repo about how they had created an [iOS shortcut](https://github.com/hay-kot/mealie/issues/103) for interested users. This is a useful utility for iOS users who browse for recipes in their web browser from their devices.
 
 Don't know what an iOS shortcut is? Neither did I! Experienced iOS users may already be familiar with this utility but for the uninitiated, here is the official Apple explanation:
 
-`
-A shortcut is a quick way to get one or more tasks done with your apps. The Shortcuts app lets you create your own shortcuts with multiple steps. For example, build a “Surf Time” shortcut that grabs the surf report, gives an ETA to the beach, and launches your surf music playlist.
-`
+
+> A shortcut is a quick way to get one or more tasks done with your apps. The Shortcuts app lets you create your own shortcuts with multiple steps. For example, build a “Surf Time” shortcut that grabs the surf report, gives an ETA to the beach, and launches your surf music playlist.
+
 
 Basically it is a visual scripting language that lets a user build an automation in a guided fashion. The automation can be [shared with anyone](https://www.icloud.com/shortcuts/6ae356d5fc644cfa8983a3c90f242fbb) but if it is a user creation, you'll have to jump through a few hoops to make an untrusted automation work on your device. In brasilikum's shortcut, you need to make changes for it to work. Recent updates to the project have changed some of the syntax and folder structure since its original creation.
 
 
-![screenshot](/mealie/docs/docs/img/original.jpg)
+![screenshot](/img/ios-shortcut-image.jpg){: align=right style="height:500;width:400px"}
 
-Aside from putting in your host machine ip or domain, you must also change 
-```
-api/recipe/create-url/
-```
 
-to
 
-```
-api/recipes/create-url
-```
+!!! tip
+    You may need to change the url depending on which version you're using. Recipe is now plural and there is no trailing "/" at the end of the string.
+    
+    ```
+    api/recipe/create-url/
+    ```
 
-**NOTICE** --> recipe is now pluar and there is no trailing "/" at the end of the string.
+    to
+
+    ```
+    api/recipes/create-url
+    ```
+
+    
 
 Having made those changes, you should now be able to share a website to the shortcut and have mealie grab all the necessary information!
diff --git a/docs/docs/img/original.jpg b/docs/docs/img/ios-shortcut-image.jpg
similarity index 100%
rename from docs/docs/img/original.jpg
rename to docs/docs/img/ios-shortcut-image.jpg
diff --git a/docs/docs/img/iphone-image.png b/docs/docs/img/iphone-image.png
new file mode 100644
index 000000000000..e0163661b8b6
Binary files /dev/null and b/docs/docs/img/iphone-image.png differ
diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml
index 368991e751da..1e4c0a88d4be 100644
--- a/docs/mkdocs.yml
+++ b/docs/mkdocs.yml
@@ -18,6 +18,7 @@ markdown_extensions:
   - pymdownx.tasklist:
       custom_checkbox: true
   - admonition
+  - attr_list
 
 extra_css:
   - stylesheets/custom.css
@@ -29,7 +30,7 @@ nav:
   - Getting Started:
       - Installation: "getting-started/install.md"
       - Working With Recipes: "getting-started/recipes.md"
-      - Adding Recipes with iOS shortcuts: "getting-started/iOS.md"
+      - iOS Shortcuts: "getting-started/iOS.md"
       - Planning Meals: "getting-started/meal-planner.md"
       - Site Settings: "getting-started/site-settings.md"
       - Backups and Exports: "getting-started/backups-and-exports.md"