diff --git a/docs/src/components/community-guides.tsx b/docs/src/components/community-guides.tsx
index 6982853fade77..7f4206c97baf1 100644
--- a/docs/src/components/community-guides.tsx
+++ b/docs/src/components/community-guides.tsx
@@ -52,20 +52,20 @@ const guides: CommunityGuidesProps[] = [
 
 function CommunityGuide({ title, description, url }: CommunityGuidesProps): JSX.Element {
   return (
-    <section className="flex flex-col gap-4 justify-between dark:bg-immich-dark-gray bg-immich-gray dark:border-0 border-gray-200 border border-solid rounded-2xl p-4">
+    <section className="flex flex-col gap-4 justify-between dark:bg-immich-dark-gray bg-immich-gray dark:border-0 border-gray-200 border border-solid rounded-2xl px-4 py-6">
       <div className="flex flex-col gap-2">
-        <p className="m-0 items-start flex gap-2">
+        <p className="m-0 items-start flex gap-2 text-2xl font-bold text-immich-primary dark:text-immich-dark-primary">
           <span>{title}</span>
         </p>
 
         <p className="m-0 text-sm text-gray-600 dark:text-gray-300">{description}</p>
-        <p className="m-0 text-sm text-gray-600 dark:text-gray-300">
+        <p className="m-0 text-sm text-gray-600 dark:text-gray-300 my-4">
           <a href={url}>{url}</a>
         </p>
       </div>
       <div className="flex">
         <Link
-          className="px-4 py-2 bg-immich-primary/10 dark:bg-gray-300  rounded-full hover:no-underline text-immich-primary dark:text-immich-dark-bg font-bold uppercase"
+          className="px-4 py-2 bg-immich-primary/10 dark:bg-gray-300 rounded-xl text-sm hover:no-underline text-immich-primary dark:text-immich-dark-bg font-semibold"
           to={url}
         >
           View Guide
diff --git a/docs/src/components/community-projects.tsx b/docs/src/components/community-projects.tsx
index d8273c67c2179..3a034e3a04cfd 100644
--- a/docs/src/components/community-projects.tsx
+++ b/docs/src/components/community-projects.tsx
@@ -87,23 +87,23 @@ const projects: CommunityProjectProps[] = [
 
 function CommunityProject({ title, description, url }: CommunityProjectProps): JSX.Element {
   return (
-    <section className="flex flex-col gap-4 justify-between dark:bg-immich-dark-gray bg-immich-gray dark:border-0 border-gray-200 border border-solid rounded-2xl p-4">
+    <section className="flex flex-col gap-4 justify-between dark:bg-immich-dark-gray bg-immich-gray dark:border-0 border-gray-200 border border-solid rounded-2xl px-4 py-6">
       <div className="flex flex-col gap-2">
-        <p className="m-0 items-start flex gap-2">
+        <p className="m-0 items-start flex gap-2 text-2xl font-bold text-immich-primary dark:text-immich-dark-primary">
           <span>{title}</span>
         </p>
 
         <p className="m-0 text-sm text-gray-600 dark:text-gray-300">{description}</p>
-        <p className="m-0 text-sm text-gray-600 dark:text-gray-300">
+        <p className="m-0 text-sm text-gray-600 dark:text-gray-300 my-4">
           <a href={url}>{url}</a>
         </p>
       </div>
       <div className="flex">
         <Link
-          className="px-4 py-2 bg-immich-primary/10 dark:bg-gray-300  rounded-full hover:no-underline text-immich-primary dark:text-immich-dark-bg font-bold uppercase"
+          className="px-4 py-2 bg-immich-primary/10 dark:bg-gray-300 rounded-xl text-sm hover:no-underline text-immich-primary dark:text-immich-dark-bg font-semibold"
           to={url}
         >
-          View Project
+          View Link
         </Link>
       </div>
     </section>
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index ebdebae8dc382..f693ce701b3ab 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -12,6 +12,7 @@
 html,
 button {
   font-family: 'Be Vietnam Pro', sans-serif;
+  font-optical-sizing: auto;
 }
 
 img {
@@ -27,9 +28,7 @@ img {
   --ifm-color-primary-light: #4250af;
   --ifm-color-primary-lighter: #4250af;
   --ifm-color-primary-lightest: #4250af;
-  --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-  --ifm-background-color: #f9f8fb;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -42,6 +41,7 @@ img {
   --ifm-color-primary-lighter: #e9f1fe;
   --ifm-color-primary-lightest: #ffffff;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --ifm-background-color: #000000;
 }
 
 div[class^='announcementBar_'] {
@@ -49,3 +49,19 @@ div[class^='announcementBar_'] {
   background-color: #2b3336;
   color: white;
 }
+
+.menu__link {
+  padding: 10px;
+  padding-left: 16px;
+  border-radius: 10px;
+  font-size: 15px;
+}
+
+.menu__list-item-collapsible {
+  border-radius: 10px;
+  font-size: 15px;
+}
+
+code {
+  font-weight: 600;
+}
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
index 162ca922d157f..6b6bbb0f4b4f5 100644
--- a/docs/src/pages/index.tsx
+++ b/docs/src/pages/index.tsx
@@ -7,13 +7,13 @@ function HomepageHeader() {
 
   return (
     <header>
-      <div className="top-[calc(30%)] h-full w-full absolute -z-10">
+      <div className="top-[calc(12%)]  md:top-[calc(30%)] h-screen w-full absolute -z-10">
         <img
           src={isDarkTheme ? 'img/logomark-dark.svg' : 'img/logomark-light.svg'}
-          className="h-full w-full mb-2 antialiased -z-10"
+          className="h-[110%] w-[110%] mb-2 antialiased -z-10"
           alt="Immich logo"
         />
-        <div className="w-full h-full absolute left-0 top-0 backdrop-blur-3xl bg-immich-bg/40 dark:bg-transparent"></div>
+        <div className="w-full h-[120vh] absolute left-0 top-0 backdrop-blur-3xl bg-immich-bg/40 dark:bg-transparent"></div>
       </div>
       <section className="text-center pt-12 sm:pt-24 bg-immich-bg/50 dark:bg-immich-dark-bg/80">
         <img
@@ -56,7 +56,7 @@ function HomepageHeader() {
         <img
           src={isDarkTheme ? '/img/screenshot-dark.webp' : '/img/screenshot-light.webp'}
           alt="screenshots"
-          className="w-[95%] lg:w-[85%] xl:w-[70%] 2xl:w-[50%] "
+          className="w-[95%] lg:w-[85%] xl:w-[70%] 2xl:w-[60%] "
         />
 
         <div className="mx-[25%] m-auto my-14 md:my-28">
diff --git a/docs/static/img/logomark-dark.svg b/docs/static/img/logomark-dark.svg
index 90b6b414150da..446caba279760 100644
--- a/docs/static/img/logomark-dark.svg
+++ b/docs/static/img/logomark-dark.svg
@@ -1,6 +1,6 @@
 <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.5" y="0.5" width="95" height="95" rx="47.5" fill="black"/>
-<rect x="0.5" y="0.5" width="95" height="95" rx="47.5" stroke="#494D56"/>
+<rect x="0.5" y="0.5" width="95" height="95" rx="47.5" fill="#070915"/>
+<rect x="0.5" y="0.5" width="95" height="95" rx="47.5" stroke="#222326"/>
 <path d="M45.4161 33.5746C50.122 37.7636 53.9145 42.2527 56.3552 46.4834C60.5471 38.9453 63.3483 29.988 63.3836 24.283C63.3836 24.2426 63.3836 24.2059 63.3836 24.1716C63.3836 15.7298 55.0082 12.4445 47.7934 12.4445C40.5786 12.4445 32.2032 15.7298 32.2032 24.1716C32.2032 24.2867 32.2032 24.441 32.2032 24.6271C36.2247 26.4247 40.9915 29.6366 45.4161 33.5746Z" fill="#FA2921"/>
 <path d="M19.7453 56.5954C22.6865 53.3052 27.1988 49.7394 32.2908 46.7247C37.708 43.5189 43.1264 41.2793 47.8822 40.2543C42.0473 33.9163 34.4404 28.4697 29.0536 26.6733C29.0159 26.6611 28.9806 26.6501 28.9489 26.639C20.9632 24.0308 15.2671 31.024 13.0384 37.9229C10.8096 44.8218 11.3285 53.8464 19.3142 56.4546C19.4226 56.4901 19.5687 56.5379 19.7453 56.5954Z" fill="#ED79B5"/>
 <path d="M82.6335 37.8066C80.4047 30.9077 74.7086 23.9145 66.7229 26.5227C66.6133 26.5582 66.4672 26.606 66.2918 26.6635C65.8351 31.0632 64.2701 36.6151 61.9123 42.063C59.4046 47.8573 56.3295 52.8717 53.0814 56.5122C61.5067 58.1922 70.8455 58.1016 76.2529 56.3726C76.2907 56.3603 76.326 56.3481 76.3577 56.3383C84.3434 53.7289 84.8622 44.7042 82.6335 37.8066Z" fill="#FFB400"/>