diff --git a/.prettierrc.json b/.prettierrc.json
index 603c65a1a5..6f5f4f2938 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -8,7 +8,8 @@
   "tabWidth": 2,
   "plugins": [
     "./packages/prettier-plugin-typespec/dist/index.js",
-    "./node_modules/prettier-plugin-organize-imports/index.js"
+    "./node_modules/prettier-plugin-organize-imports/index.js",
+    "prettier-plugin-astro"
   ],
   "overrides": [
     {
@@ -16,6 +17,12 @@
       "options": {
         "parser": "typespec"
       }
+    },
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
     }
   ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8e894d52f4..060a77ad40 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -28,7 +28,7 @@
     "editor.detectIndentation": false,
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "[json][[jsonc][yaml][typespec][markdown][css]": {
+  "[json][[jsonc][yaml][typespec][markdown][css][astro]": {
     "editor.formatOnSave": true,
     "editor.formatOnPaste": true,
     "editor.insertSpaces": true,
@@ -58,8 +58,6 @@
   "vitest.enable": true,
   "vitest.commandLine": "node ./node_modules/vitest/vitest.mjs",
   "prettier.prettierPath": "./node_modules/prettier/index.cjs",
-  "prettier.documentSelectors": ["**/*.tsp"],
-  "testExplorer.errorDecoration": false,
-  "typespec.tsp-server.path": "${workspaceFolder}/packages/compiler",
-  "eslint.experimental.useFlatConfig": true // Still needed new version coming soon should work without https://github.com/microsoft/vscode-eslint/issues/1644
+  "prettier.documentSelectors": ["**/*.tsp", "**/*.astro"],
+  "typespec.tsp-server.path": "${workspaceFolder}/packages/compiler"
 }
diff --git a/package.json b/package.json
index bd7b0fe919..e18ce113f4 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "micromatch": "^4.0.8",
     "picocolors": "~1.1.0",
     "prettier": "~3.3.3",
+    "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-organize-imports": "~4.1.0",
     "rimraf": "~6.0.1",
     "syncpack": "^13.0.0",
diff --git a/packages/website-astro/astro.config.mjs b/packages/website-astro/astro.config.mjs
index 2174f04ee5..b5cd3bf813 100644
--- a/packages/website-astro/astro.config.mjs
+++ b/packages/website-astro/astro.config.mjs
@@ -33,6 +33,7 @@ export default defineConfig({
     starlight({
       title: "TypeSpec",
       sidebar: await resolveSideBars(),
+      favicon: "/img/favicon.svg",
       customCss: ["./src/css/custom.css"],
       components: {
         Header: "./src/components/header/header.astro",
diff --git a/packages/website-astro/src/components/homepage/extensibility-illustration.astro b/packages/website-astro/src/components/homepage/extensibility-illustration.astro
index 53b3a7eacd..17a3359909 100644
--- a/packages/website-astro/src/components/homepage/extensibility-illustration.astro
+++ b/packages/website-astro/src/components/homepage/extensibility-illustration.astro
@@ -3,6 +3,7 @@ import { Code } from "@astrojs/starlight/components";
 import extensibilityTs from "@site/src/assets/tsp-samples/extensibility/custom-lib.ts?raw";
 import extensibilityTsp from "@site/src/assets/tsp-samples/extensibility/custom-lib.tsp?raw";
 ---
+
 <style>
   .codeblock-seperator {
     height: 10px;
diff --git a/packages/website-astro/src/components/theme-picker.astro b/packages/website-astro/src/components/theme-picker.astro
index bf9533d5e3..1973bc7ae8 100644
--- a/packages/website-astro/src/components/theme-picker.astro
+++ b/packages/website-astro/src/components/theme-picker.astro
@@ -14,6 +14,10 @@ import { Icon } from "@astrojs/starlight/components";
     border-radius: 70px;
   }
 
+  .theme-picker:hover {
+    background-color: var(--colorNeutralBackground3Hover);
+  }
+
   .theme-option {
     display: flex;
     padding: 2px;
diff --git a/packages/website-astro/src/css/fluentui.css b/packages/website-astro/src/css/fluentui.css
index e25ce78769..3d3509d3f7 100644
--- a/packages/website-astro/src/css/fluentui.css
+++ b/packages/website-astro/src/css/fluentui.css
@@ -103,7 +103,7 @@
 html {
   font-family: var(--fontFamilyBase);
   color: var(--colorNeutralForeground1);
-  font-size: var(--fontSizeBase300);
+  font-size: var(--fontSizeBase400);
   font-weight: var(--fontWeightRegular);
   line-height: var(--lineHeightBase300);
   -webkit-font-smoothing: antialiased;
diff --git a/packages/website-astro/src/layouts/base-layout.astro b/packages/website-astro/src/layouts/base-layout.astro
index d95e07de7c..243e2fc76b 100644
--- a/packages/website-astro/src/layouts/base-layout.astro
+++ b/packages/website-astro/src/layouts/base-layout.astro
@@ -2,6 +2,7 @@
 import "@site/src/css/custom.css";
 import Header from "@site/src/components/header/header.astro";
 import Footer from "@site/src/components/footer/footer.astro";
+import { baseUrl } from "../utils/base-url";
 
 export interface Props {
   /** Whether to render the footer @default true */
@@ -13,6 +14,8 @@ const { footer = true } = Astro.props;
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href={Astro.site + baseUrl("/img/favicon.svg")} />
+    <link rel="og:image" type="image/svg+xml" href={baseUrl("/img/social.svg")} />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="https://consentdeliveryfd.azurefd.net/mscc/lib/v2/wcp-consent.js" is:inline
     ></script>
diff --git a/packages/website-astro/src/layouts/content.astro b/packages/website-astro/src/layouts/content.astro
index 7d1ea13bc6..bb6e131874 100644
--- a/packages/website-astro/src/layouts/content.astro
+++ b/packages/website-astro/src/layouts/content.astro
@@ -8,7 +8,6 @@ import BaseLayout from "./base-layout.astro";
     max-width: 1024px;
     margin: auto;
     padding: 1rem 2rem;
-
   }
 </style>
 
diff --git a/packages/website-astro/src/pages/blog/_BlogPostPreview.astro b/packages/website-astro/src/pages/blog/_BlogPostPreview.astro
index 7aa2f3486a..18acdebc51 100644
--- a/packages/website-astro/src/pages/blog/_BlogPostPreview.astro
+++ b/packages/website-astro/src/pages/blog/_BlogPostPreview.astro
@@ -24,17 +24,17 @@ const image = post.data.image && (await resolveBlogImagePath(post.slug, post.dat
 ---
 
 <style>
-  .card > :global(.bg) {
+  .link > :global(.card .bg) {
     border: 1px solid var(--colorNeutralStroke3);
-    border-radius: 0 !important;
+    border-radius: 0;
   }
-  .card {
+  .link {
+    display: block;
     border-radius: 0;
     color: var(--colorNeutralForeground1);
-
   }
-  .card:hover {
-    outline: solid var(--colorBrandForeground1)
+  .link:hover {
+    outline: solid var(--colorBrandForeground1);
   }
   .date {
     display: block;
@@ -93,12 +93,8 @@ const image = post.data.image && (await resolveBlogImagePath(post.slug, post.dat
   }
 </style>
 <article aria-labelledby={post.slug}>
-  <Link
-    href={`/blog/${post.slug}/`}
-    data-astro-prefetch
-    class="outline-none after:absolute after:inset-0"
-  >
-    <Card noPadding class="card">
+  <Link class="link" href={`/blog/${post.slug}/`} data-astro-prefetch>
+    <Card noPadding>
       <header>
         <time class="date" datetime={post.data.publishDate.toISOString()}>
           {format(post.data.publishDate, "MMMM d, yyyy")}
diff --git a/packages/website-astro/src/pages/blog/index.astro b/packages/website-astro/src/pages/blog/index.astro
index 475d14286b..59a3f81a27 100644
--- a/packages/website-astro/src/pages/blog/index.astro
+++ b/packages/website-astro/src/pages/blog/index.astro
@@ -25,7 +25,6 @@ const posts = await getCollection("blog");
     margin: 0;
     padding: 0;
   }
-  
 </style>
 <BaseLayout>
   <div class="content">
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7e7af008ba..cf41189009 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -77,6 +77,9 @@ importers:
       prettier:
         specifier: ~3.3.3
         version: 3.3.3
+      prettier-plugin-astro:
+        specifier: ^0.14.1
+        version: 0.14.1
       prettier-plugin-organize-imports:
         specifier: ~4.1.0
         version: 4.1.0(prettier@3.3.3)(typescript@5.6.3)
@@ -2024,7 +2027,7 @@ importers:
     dependencies:
       '@astrojs/check':
         specifier: ^0.9.4
-        version: 0.9.4(prettier@3.3.3)(typescript@5.6.3)
+        version: 0.9.4(prettier-plugin-astro@0.14.1)(prettier@3.3.3)(typescript@5.6.3)
       '@astrojs/react':
         specifier: ^3.6.2
         version: 3.6.2(@types/react-dom@18.3.0)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.4.9(@types/node@22.7.5)(terser@5.34.1))
@@ -11471,6 +11474,10 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  prettier-plugin-astro@0.14.1:
+    resolution: {integrity: sha512-RiBETaaP9veVstE4vUwSIcdATj6dKmXljouXc/DDNwBSPTp8FRkLGDSGFClKsAFeeg+13SB0Z1JZvbD76bigJw==}
+    engines: {node: ^14.15.0 || >=16.0.0}
+
   prettier-plugin-organize-imports@4.1.0:
     resolution: {integrity: sha512-5aWRdCgv645xaa58X8lOxzZoiHAldAPChljr/MT0crXVOWTZ+Svl4hIWlz+niYSlO6ikE5UXkN1JrRvIP2ut0A==}
     peerDependencies:
@@ -12107,6 +12114,9 @@ packages:
   rxjs@7.8.1:
     resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
 
+  s.color@0.0.15:
+    resolution: {integrity: sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==}
+
   sade@1.8.1:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
     engines: {node: '>=6'}
@@ -12136,6 +12146,9 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  sass-formatter@0.7.9:
+    resolution: {integrity: sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw==}
+
   sax@1.3.0:
     resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
 
@@ -12577,6 +12590,9 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
+  suf-log@2.5.3:
+    resolution: {integrity: sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==}
+
   supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -14036,9 +14052,9 @@ snapshots:
 
   '@apidevtools/swagger-methods@3.0.2': {}
 
-  '@astrojs/check@0.9.4(prettier@3.3.3)(typescript@5.6.3)':
+  '@astrojs/check@0.9.4(prettier-plugin-astro@0.14.1)(prettier@3.3.3)(typescript@5.6.3)':
     dependencies:
-      '@astrojs/language-server': 2.15.0(prettier@3.3.3)(typescript@5.6.3)
+      '@astrojs/language-server': 2.15.0(prettier-plugin-astro@0.14.1)(prettier@3.3.3)(typescript@5.6.3)
       chokidar: 4.0.1
       kleur: 4.1.5
       typescript: 5.6.3
@@ -14051,7 +14067,7 @@ snapshots:
 
   '@astrojs/internal-helpers@0.4.1': {}
 
-  '@astrojs/language-server@2.15.0(prettier@3.3.3)(typescript@5.6.3)':
+  '@astrojs/language-server@2.15.0(prettier-plugin-astro@0.14.1)(prettier@3.3.3)(typescript@5.6.3)':
     dependencies:
       '@astrojs/compiler': 2.10.3
       '@astrojs/yaml2ts': 0.2.1
@@ -14073,6 +14089,7 @@ snapshots:
       vscode-uri: 3.0.8
     optionalDependencies:
       prettier: 3.3.3
+      prettier-plugin-astro: 0.14.1
     transitivePeerDependencies:
       - typescript
 
@@ -26573,6 +26590,12 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  prettier-plugin-astro@0.14.1:
+    dependencies:
+      '@astrojs/compiler': 2.10.3
+      prettier: 3.3.3
+      sass-formatter: 0.7.9
+
   prettier-plugin-organize-imports@4.1.0(prettier@3.3.3)(typescript@5.6.3):
     dependencies:
       prettier: 3.3.3
@@ -27347,6 +27370,8 @@ snapshots:
     dependencies:
       tslib: 2.6.2
 
+  s.color@0.0.15: {}
+
   sade@1.8.1:
     dependencies:
       mri: 1.2.0
@@ -27378,6 +27403,10 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
+  sass-formatter@0.7.9:
+    dependencies:
+      suf-log: 2.5.3
+
   sax@1.3.0: {}
 
   sax@1.4.1: {}
@@ -27922,6 +27951,10 @@ snapshots:
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
 
+  suf-log@2.5.3:
+    dependencies:
+      s.color: 0.0.15
+
   supports-color@5.5.0:
     dependencies:
       has-flag: 3.0.0