diff --git a/web/public/Microsoft.svg b/web/public/Microsoft.svg
new file mode 100755
index 00000000000..383a5ac3a4b
--- /dev/null
+++ b/web/public/Microsoft.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.33325" y="1.3335" width="6.33333" height="6.33333" fill="#F25022"/>
+<rect x="8.33325" y="1.3335" width="6.33333" height="6.33333" fill="#80BA01"/>
+<rect x="8.33325" y="8.3335" width="6.33333" height="6.33333" fill="#FFB902"/>
+<rect x="1.33325" y="8.3335" width="6.33333" height="6.33333" fill="#02A4EF"/>
+</svg>
diff --git a/web/src/app/admin/configuration/llm/interfaces.ts b/web/src/app/admin/configuration/llm/interfaces.ts
index 96ccd5ed118..1da0e2e983e 100644
--- a/web/src/app/admin/configuration/llm/interfaces.ts
+++ b/web/src/app/admin/configuration/llm/interfaces.ts
@@ -4,6 +4,7 @@ import {
   AWSIcon,
   AzureIcon,
   CPUIcon,
+  MicrosoftIconSVG,
   MistralIcon,
   MetaIcon,
   OpenAIIcon,
@@ -78,6 +79,9 @@ export const getProviderIcon = (providerName: string, modelName?: string) => {
       if (modelName?.toLowerCase().includes("amazon")) {
         return AmazonIcon;
       }
+      if (modelName?.toLowerCase().includes("phi")) {
+        return MicrosoftIconSVG;
+      }    
       if (modelName?.toLowerCase().includes("mistral")) {
         return MistralIcon;
       }    
diff --git a/web/src/components/icons/icons.tsx b/web/src/components/icons/icons.tsx
index e2a2e9f0dfd..fe07617eeb9 100644
--- a/web/src/components/icons/icons.tsx
+++ b/web/src/components/icons/icons.tsx
@@ -52,6 +52,7 @@ import asanaIcon from "../../../public/Asana.png";
 import anthropicSVG from "../../../public/Anthropic.svg";
 import nomicSVG from "../../../public/nomic.svg";
 import microsoftIcon from "../../../public/microsoft.png";
+import microsoftSVG from "../../../public/Microsoft.svg";
 import mixedBreadSVG from "../../../public/Mixedbread.png";
 
 import OCIStorageSVG from "../../../public/OCI.svg";
@@ -1117,6 +1118,11 @@ export const MetaIcon = ({
   className = defaultTailwindCSS,
 }: IconProps) => <LogoIcon size={size} className={className} src={metaSVG} />;
 
+export const MicrosoftIconSVG = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => <LogoIcon size={size} className={className} src={microsoftSVG} />;
+
 export const MistralIcon = ({
   size = 16,
   className = defaultTailwindCSS,
diff --git a/web/src/lib/hooks.ts b/web/src/lib/hooks.ts
index 8ed2103aab5..214ecb6a8e0 100644
--- a/web/src/lib/hooks.ts
+++ b/web/src/lib/hooks.ts
@@ -326,6 +326,12 @@ const MODEL_DISPLAY_NAMES: { [key: string]: string } = {
   // Meta models
   "llama-3.2-90b-vision-instruct": "Llama 3.2 90B",
   "llama-3.2-11b-vision-instruct": "Llama 3.2 11B",
+  "llama-3.3-70b-instruct": "Llama 3.3 70B",
+
+  // Microsoft models
+  "phi-3.5-mini-instruct": "Phi 3.5 Mini",
+  "phi-3.5-moe-instruct": "Phi 3.5 MoE",
+  "phi-3.5-vision-instruct": "Phi 3.5 Vision",
 
   // Anthropic models
   "claude-3-opus-20240229": "Claude 3 Opus",