diff --git a/docs/backend/backend_python/api.md b/docs/backend/backend_python/api.md
index 96eff1d61..02821cbab 100644
--- a/docs/backend/backend_python/api.md
+++ b/docs/backend/backend_python/api.md
@@ -4,20 +4,3 @@
 	<swagger-ui src="openapi.json"/>
 </div>
 
-<!-- Add a small script to mark the page so we can scope header/footer CSS only for this route -->
-<script>
-	(function () {
-		function markApiPage() {
-			try {
-				document.body.classList.add('api-fixed-500');
-			} catch (e) {
-				/* ignore */
-			}
-		}
-		if (document.readyState === 'loading') {
-			document.addEventListener('DOMContentLoaded', markApiPage);
-		} else {
-			markApiPage();
-		}
-	})();
-</script>
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index e7f412d2b..c6a1479e4 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -1,3 +1,19 @@
+/* Global overflow prevention */
+* {
+  box-sizing: border-box;
+}
+
+html {
+  overflow-x: hidden;
+  max-width: 100vw;
+}
+
+body {
+  overflow-x: hidden;
+  max-width: 100vw;
+  position: relative;
+}
+
 .md-typeset .admonition-title {
   margin-bottom: 10px;
   
@@ -6,18 +22,29 @@
 .md-header__button.md-logo img {
   width: 34px;
   height: auto;
+  flex-shrink: 0;
 }
 
 .md-header__button.md-logo {
   display: flex;
   align-items: center;
-
   padding-right: 0;     
-  margin-right: 0;      
+  margin-right: 0;
+  flex-shrink: 0;
 }
  
 .md-header__title {
-  margin-left: 8px !important;  
+  margin-left: 8px !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.md-header__inner {
+  max-width: 100%;
+  overflow: hidden;
 }
 
 /* Responsive tweaks: ensure header, images, tables and code blocks behave well on small screens */
@@ -47,6 +74,38 @@
 .md-main, .md-content {
   padding-left: 1rem;
   padding-right: 1rem;
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+/* Ensure Material theme containers don't overflow */
+.md-container {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+.md-grid {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+.md-sidebar {
+  max-width: 100%;
+}
+
+/* Navigation drawer on mobile */
+.md-nav__list {
+  word-wrap: break-word;
+}
+
+.md-nav__item {
+  max-width: 100%;
+}
+
+.md-nav__link {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
 }
 
 /* Tablet and small laptop */
@@ -59,49 +118,112 @@
   .md-header__button.md-logo {
     padding-right: 6px;
     margin-right: 6px;
+    flex-shrink: 0;
   }
 
   .md-header__title {
     margin-left: 6px !important;
     font-size: 1rem;
-    white-space: normal;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: calc(100vw - 120px);
+    flex-shrink: 1;
   }
 
   /* Allow header inner area to wrap so items don't overflow */
   .md-header__inner {
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     align-items: center;
     gap: 6px;
+    overflow: hidden;
+    max-width: 100%;
+  }
+
+  .md-header__inner > * {
+    flex-shrink: 0;
+  }
+
+  .md-header__title {
+    flex-shrink: 1;
+    min-width: 0;
+  }
+
+  /* Ensure header actions don't overflow */
+  .md-header__actions {
+    flex-shrink: 0;
+    margin-left: auto;
   }
 
   /* Slightly reduce padding for main content */
   .md-main {
     padding: 0.5rem 0.75rem;
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+
+  .md-content {
+    max-width: 100%;
+    overflow-x: hidden;
   }
 
   /* Make navigation easier to tap */
   .md-nav {
     margin-top: 8px;
   }
+
+  /* Ensure all text content wraps properly */
+  .md-typeset h1,
+  .md-typeset h2,
+  .md-typeset h3,
+  .md-typeset h4,
+  .md-typeset h5,
+  .md-typeset h6 {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    max-width: 100%;
+  }
+
+  .md-typeset p,
+  .md-typeset li,
+  .md-typeset blockquote {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    max-width: 100%;
+  }
 }
 
 /* Small phones */
 @media (max-width: 480px) {
   .md-header__button.md-logo img {
     width: 24px;
+    flex-shrink: 0;
   }
 
   .md-header__title {
-    font-size: 0.95rem;
+    font-size: 0.9rem;
+    max-width: calc(100vw - 100px);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .md-header__title a {
-    font-size: 0.95rem;
+    font-size: 0.9rem;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   /* Ensure actions align to the right and don't push content */
   .md-header__actions {
     margin-left: auto;
+    flex-shrink: 0;
+  }
+
+  .md-header__inner {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
   }
 
   .md-nav {
@@ -109,11 +231,57 @@
   }
 
   .md-content {
-    padding: 0.75rem;
+    padding: 0.5rem;
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+
+  .md-main {
+    padding: 0.5rem;
+    max-width: 100%;
+    overflow-x: hidden;
   }
 
   .md-typeset .admonition-title {
     font-size: 0.95rem;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+
+  /* Ensure all headings and text wrap on very small screens */
+  .md-typeset h1 {
+    font-size: 1.5rem;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    line-height: 1.3;
+  }
+
+  .md-typeset h2 {
+    font-size: 1.25rem;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    line-height: 1.3;
+  }
+
+  .md-typeset h3 {
+    font-size: 1.1rem;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    line-height: 1.3;
+  }
+
+  /* Ensure links don't overflow */
+  .md-typeset a {
+    word-break: break-word;
+    overflow-wrap: break-word;
+  }
+
+  /* Server URLs and long text in API docs */
+  .md-typeset code,
+  .md-typeset pre {
+    word-break: break-all;
+    overflow-wrap: break-word;
+    max-width: 100%;
   }
 }
 
@@ -159,133 +327,164 @@
 /* The API page includes a <swagger-ui> web component whose internal layout
    can overflow on small screens. These rules make summaries wrap and ensure
    panels and code samples are scrollable instead of overlapping. */
+.api-500-wrapper {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 .swagger-ui,
 .swagger-ui * {
   box-sizing: border-box;
+  max-width: 100%;
+}
+
+.swagger-ui {
+  width: 100%;
+  max-width: 100%;
 }
 
 .swagger-ui .topbar {
   flex-wrap: wrap;
+  width: 100%;
+  max-width: 100%;
+}
+
+.swagger-ui .info {
+  width: 100%;
+  max-width: 100%;
+  word-wrap: break-word;
 }
 
 .swagger-ui .info .title,
 .swagger-ui .info .description {
   word-break: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
 }
 
 .swagger-ui .opblock-summary {
   display: flex;
   flex-wrap: wrap;
   gap: 0.25rem;
+  width: 100%;
+  max-width: 100%;
 }
 
 .swagger-ui .opblock .opblock-summary-method,
 .swagger-ui .opblock .opblock-summary-path {
   white-space: normal;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+.swagger-ui .opblock-summary-path {
+  max-width: 100%;
+  word-break: break-all;
 }
 
 /* Make operations and parameters area scroll horizontally instead of overlapping */
 .swagger-ui .opblock-body,
-.swagger-ui .parameters {
+.swagger-ui .parameters,
+.swagger-ui .responses-wrapper,
+.swagger-ui .response-col_status,
+.swagger-ui .response-col_links {
   overflow-x: auto;
+  max-width: 100%;
+  width: 100%;
+}
+
+.swagger-ui .parameters-container,
+.swagger-ui .parameters-col_description {
+  max-width: 100%;
+  word-wrap: break-word;
 }
 
 /* Ensure code samples are responsive */
-.swagger-ui pre, .swagger-ui code {
+.swagger-ui pre, 
+.swagger-ui code {
   white-space: pre-wrap;
   word-break: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
+}
+
+.swagger-ui pre {
+  overflow-x: auto;
+}
+
+.swagger-ui .model-box,
+.swagger-ui .model-container {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+/* Server URL input and other form elements */
+.swagger-ui .scheme-container,
+.swagger-ui input,
+.swagger-ui select {
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 /* Smaller devices: stack operation summary elements and increase spacing */
-@media (max-width: 720px) {
+@media (max-width: 768px) {
   .swagger-ui .opblock-summary {
     flex-direction: column;
     align-items: stretch;
   }
+  
   .swagger-ui .opblock .opblock-summary-path {
-    font-size: 0.95rem;
+    font-size: 0.9rem;
+    word-break: break-all;
+  }
+  
+  .swagger-ui .opblock .opblock-summary-method {
+    font-size: 0.85rem;
+  }
+  
+  .swagger-ui .info .title {
+    font-size: 1.5rem;
+  }
+  
+  .swagger-ui .info .description {
+    font-size: 0.9rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .swagger-ui .opblock .opblock-summary-path {
+    font-size: 0.8rem;
+  }
+  
+  .swagger-ui .info .title {
+    font-size: 1.25rem;
+  }
+  
+  .swagger-ui .info .description {
+    font-size: 0.85rem;
   }
 }
 
 /* Redoc-specific fixes in case the component renders Redoc */
-.redoc-wrap, .redoc {
+.redoc-wrap, 
+.redoc {
   max-width: 100%;
+  width: 100%;
+  box-sizing: border-box;
 }
-.redoc .menu-content, .redoc .operations-wrapper {
+
+.redoc .menu-content, 
+.redoc .operations-wrapper {
   overflow-x: auto;
+  max-width: 100%;
 }
 
-/* Scoped: Force a 500px "fixed" layout only for the Python backend API page.
-   The wrapper `.api-500-wrapper` is added to `docs/backend/backend_python/api.md`.
-   Only this page will use a 500px min-width and allow horizontal scrolling on
-   very small viewports so other pages remain normal.
-*/
-@media (max-width: 500px) {
-  .api-500-wrapper {
-    min-width: 500px !important;
-    overflow-x: auto !important;
-    -webkit-overflow-scrolling: touch;
-    box-sizing: border-box;
-  }
-
-  /* Ensure Swagger/Redoc components inside the wrapper respect the min-width */
-  .api-500-wrapper .swagger-ui,
-  .api-500-wrapper .redoc,
-  .api-500-wrapper .redoc-wrap {
-    min-width: 500px !important;
-  }
-
-  /* Keep code blocks and tables inside the API wrapper readable; they will scroll inside the pane */
-  .api-500-wrapper table,
-  .api-500-wrapper pre,
-  .api-500-wrapper code {
-    min-width: 500px;
-    overflow-x: auto;
-  }
-}
-
-/* When API page is active, also constrain header/footer to the same 500px
-   so the entire visible page appears as a 500px layout (header/footer included).
-   This is only applied when the body has the `.api-fixed-500` class which is
-   added by a small inline script on the API page. */
-@media (max-width: 500px) {
-  body.api-fixed-500 {
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  /* Constrain header, main and footer to the same 500px pane so they appear
-     consistent when the API page forces a fixed layout on small viewports. */
-  body.api-fixed-500 .md-header,
-  body.api-fixed-500 header,
-  body.api-fixed-500 .md-main,
-  body.api-fixed-500 .md-footer,
-  body.api-fixed-500 footer {
-    width: 500px !important;
-    min-width: 500px !important;
-    margin: 0 auto !important;
-    box-sizing: border-box !important;
-    overflow: visible !important;
-  }
-
-  /* Ensure inner containers within header/footer stretch to the 500px width */
-  body.api-fixed-500 .md-header__inner,
-  body.api-fixed-500 .md-footer__inner,
-  body.api-fixed-500 .md-footer-nav,
-  body.api-fixed-500 .md-footer__copyright {
-    width: 100% !important;
-    box-sizing: border-box !important;
-  }
-
-  /* Adjust header inner alignment so actions remain visible within the 500px pane */
-  body.api-fixed-500 .md-header__inner {
-    justify-content: space-between;
-  }
-
-  /* Center the wrapper itself */
-  .api-500-wrapper {
-    margin: 0 auto;
-  }
+.redoc .api-content {
+  max-width: 100%;
+  overflow-x: hidden;
 }
 
 @media (max-width: 600px) {
@@ -312,7 +511,6 @@
   }
 }
 
-\
 .md-footer-meta__inner.md-grid {
   display: flex !important;
   flex-direction: column !important;
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e1e1ddd5f..5c4674b22 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -128,6 +128,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -780,6 +781,7 @@
       "integrity": "sha512-p9OkPbZ5G7UT1MofwYFigGebnrzGJacoBSQM0/6bi/PUMVE+qlWDD/OalvQKbwgQzU6dl0xAv6r4X7Jme0RYxA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.27.1"
       },
@@ -1705,6 +1707,7 @@
       "integrity": "sha512-2KH4LWGSrJIkVf5tSiBFYuXDAoWRq2MMwgivCf+93dd0GQi8RXLjKA/0EvRnVV5G0hrHczsquXuD01L8s6dmBw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.27.1",
         "@babel/helper-module-imports": "^7.27.1",
@@ -5354,8 +5357,7 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -5533,6 +5535,7 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.24.tgz",
       "integrity": "sha512-FE5u0ezmi6y9OZEzlJfg37mqqf6ZDSF2V/NLjUyGrR9uTZ7Sb9F7bLNZ03S4XVUNRWGA7Ck4c1kK+YnuWjl+DA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -5550,6 +5553,7 @@
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -5560,6 +5564,7 @@
       "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -5689,6 +5694,7 @@
       "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "5.62.0",
         "@typescript-eslint/types": "5.62.0",
@@ -5935,6 +5941,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6641,6 +6648,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.19",
         "caniuse-lite": "^1.0.30001751",
@@ -7349,8 +7357,7 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/domexception": {
       "version": "4.0.0",
@@ -7709,6 +7716,7 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -9753,6 +9761,7 @@
       "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/core": "^29.7.0",
         "@jest/types": "^29.6.3",
@@ -11237,7 +11246,6 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -11924,6 +11932,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -11956,6 +11965,7 @@
       "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -12059,7 +12069,6 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -12075,7 +12084,6 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -12195,6 +12203,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -12253,6 +12262,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -12288,14 +12298,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/react-redux": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -12457,7 +12467,8 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -13420,6 +13431,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -13560,6 +13572,7 @@
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -13792,6 +13805,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
       "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -14050,6 +14064,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
       "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -14182,6 +14197,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -14476,20 +14492,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/yaml": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
-      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      }
-    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
diff --git a/frontend/src/api/api-functions/index.ts b/frontend/src/api/api-functions/index.ts
index 5d6f2fa8c..4e22ef925 100644
--- a/frontend/src/api/api-functions/index.ts
+++ b/frontend/src/api/api-functions/index.ts
@@ -4,3 +4,4 @@ export * from './images';
 export * from './folders';
 export * from './user_preferences';
 export * from './health';
+export * from './memories';
diff --git a/frontend/src/api/api-functions/memories.ts b/frontend/src/api/api-functions/memories.ts
new file mode 100644
index 000000000..24ea251db
--- /dev/null
+++ b/frontend/src/api/api-functions/memories.ts
@@ -0,0 +1,11 @@
+import { memoriesEndpoints } from '../apiEndpoints';
+import { apiClient } from '../axiosConfig';
+import { APIResponse } from '@/types/API';
+
+export const fetchMemories = async (): Promise<APIResponse> => {
+  const response = await apiClient.get<APIResponse>(
+    memoriesEndpoints.getMemories,
+  );
+  return response.data;
+};
+
diff --git a/frontend/src/api/apiEndpoints.ts b/frontend/src/api/apiEndpoints.ts
index 69a7e570d..21b7ac03f 100644
--- a/frontend/src/api/apiEndpoints.ts
+++ b/frontend/src/api/apiEndpoints.ts
@@ -30,3 +30,7 @@ export const userPreferencesEndpoints = {
 export const healthEndpoints = {
   healthCheck: '/health',
 };
+
+export const memoriesEndpoints = {
+  getMemories: '/memories/',
+};
\ No newline at end of file
diff --git a/frontend/src/pages/Memories/Memories.tsx b/frontend/src/pages/Memories/Memories.tsx
index 92f232b51..9323959ed 100644
--- a/frontend/src/pages/Memories/Memories.tsx
+++ b/frontend/src/pages/Memories/Memories.tsx
@@ -1,5 +1,192 @@
+import { useEffect, useState } from 'react';
+import { usePictoQuery } from '@/hooks/useQueryExtension';
+import { fetchMemories } from '@/api/api-functions';
+import { useMutationFeedback } from '@/hooks/useMutationFeedback';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { ClockFading, MapPin, Calendar } from 'lucide-react';
+import { convertFileSrc } from '@tauri-apps/api/core';
+import { Image } from '@/types/Media';
+import { MediaView } from '@/components/Media/MediaView';
+
+interface MemoryImage {
+  id: string;
+  path: string;
+  thumbnailPath: string;
+  metadata: any;
+}
+
+interface Memory {
+  id: string;
+  title: string;
+  date: string;
+  type: 'on_this_day' | 'location';
+  image_count: number;
+  images: MemoryImage[];
+  latitude?: number;
+  longitude?: number;
+}
+
 const Memories = () => {
-  return <></>;
+  const [selectedMemoryImages, setSelectedMemoryImages] = useState<Image[]>([]);
+  const [isImageViewOpen, setIsImageViewOpen] = useState(false);
+
+  const { data, isLoading, isSuccess, isError, error } = usePictoQuery({
+    queryKey: ['memories'],
+    queryFn: () => fetchMemories(),
+  });
+
+  useMutationFeedback(
+    { isPending: isLoading, isSuccess, isError, error },
+    {
+      loadingMessage: 'Loading memories',
+      showSuccess: false,
+      errorTitle: 'Error',
+      errorMessage: 'Failed to load memories. Please try again later.',
+    },
+  );
+
+  const memories: Memory[] = (data?.data as Memory[]) || [];
+
+  const handleMemoryClick = (memory: Memory) => {
+    // Convert memory images to Image format for MediaView
+    const images: Image[] = memory.images.map((img) => ({
+      id: img.id,
+      path: img.path,
+      thumbnailPath: img.thumbnailPath,
+      folder_id: '',
+      isTagged: false,
+      metadata: img.metadata,
+    }));
+
+    setSelectedMemoryImages(images);
+    setIsImageViewOpen(true);
+  };
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  };
+
+  if (memories.length === 0 && !isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center p-6">
+        <div className="text-center">
+          <div className="bg-muted/50 mb-6 flex h-32 w-32 items-center justify-center rounded-full mx-auto">
+            <ClockFading className="h-12 w-12 text-muted-foreground" />
+          </div>
+          <h2 className="text-foreground mb-3 text-xl font-semibold">
+            No Memories Yet
+          </h2>
+          <p className="text-muted-foreground mb-6 max-w-md">
+            Memories will appear here as you add more photos to your gallery.
+            They are automatically grouped by date and location.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col overflow-y-auto p-6">
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold">Memories</h1>
+        <p className="text-muted-foreground mt-2">
+          Relive your favorite moments, automatically organized by time and place
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {memories.map((memory) => (
+          <Card
+            key={memory.id}
+            className="group cursor-pointer transition-all hover:shadow-lg"
+            onClick={() => handleMemoryClick(memory)}
+          >
+            <CardHeader className="p-0">
+              <div className="relative aspect-video w-full overflow-hidden rounded-t-xl">
+                {/* Main image */}
+                {memory.images[0] && (
+                  <img
+                    src={convertFileSrc(
+                      memory.images[0].thumbnailPath ||
+                        memory.images[0].path ||
+                        '/placeholder.svg',
+                    )}
+                    alt={memory.title}
+                    className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-110"
+                  />
+                )}
+
+                {/* Overlay with gradient */}
+                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" />
+
+                {/* Additional images indicator */}
+                {memory.images.length > 1 && (
+                  <div className="absolute top-2 right-2 flex gap-1">
+                    {memory.images.slice(1, 4).map((img, idx) => (
+                      <div
+                        key={img.id}
+                        className="h-12 w-12 overflow-hidden rounded border-2 border-white/50"
+                      >
+                        <img
+                          src={convertFileSrc(
+                            img.thumbnailPath || img.path || '/placeholder.svg',
+                          )}
+                          alt=""
+                          className="h-full w-full object-cover"
+                        />
+                      </div>
+                    ))}
+                    {memory.image_count > 4 && (
+                      <div className="bg-black/70 flex h-12 w-12 items-center justify-center rounded border-2 border-white/50 text-xs font-semibold text-white">
+                        +{memory.image_count - 4}
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {/* Memory type icon */}
+                <div className="absolute bottom-2 left-2">
+                  {memory.type === 'on_this_day' ? (
+                    <Calendar className="h-5 w-5 text-white" />
+                  ) : (
+                    <MapPin className="h-5 w-5 text-white" />
+                  )}
+                </div>
+              </div>
+            </CardHeader>
+
+            <CardContent className="p-4">
+              <h3 className="mb-2 text-lg font-semibold line-clamp-2">
+                {memory.title}
+              </h3>
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <ClockFading className="h-4 w-4" />
+                <span>{formatDate(memory.date)}</span>
+              </div>
+              <p className="mt-2 text-sm text-muted-foreground">
+                {memory.image_count} photo{memory.image_count !== 1 ? 's' : ''}
+              </p>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {isImageViewOpen && (
+        <MediaView
+          images={selectedMemoryImages}
+          onClose={() => {
+            setIsImageViewOpen(false);
+            setSelectedMemoryImages([]);
+          }}
+        />
+      )}
+    </div>
+  );
 };
 
 export default Memories;
diff --git a/frontend/src/routes/AppRoutes.tsx b/frontend/src/routes/AppRoutes.tsx
index 22153edbb..7df16fcd1 100644
--- a/frontend/src/routes/AppRoutes.tsx
+++ b/frontend/src/routes/AppRoutes.tsx
@@ -9,6 +9,7 @@ import { MyFav } from '@/pages/Home/MyFav';
 import { AITagging } from '@/pages/AITagging/AITagging';
 import { PersonImages } from '@/pages/PersonImages/PersonImages';
 import { ComingSoon } from '@/pages/ComingSoon/ComingSoon';
+import Memories from '@/pages/Memories/Memories';
 
 export const AppRoutes: React.FC = () => {
   return (
@@ -21,7 +22,7 @@ export const AppRoutes: React.FC = () => {
         <Route path={ROUTES.SETTINGS} element={<Settings />} />
         <Route path={ROUTES.AI} element={<AITagging />} />
         <Route path={ROUTES.ALBUMS} element={<ComingSoon />} />
-        <Route path={ROUTES.MEMORIES} element={<ComingSoon />} />
+        <Route path={ROUTES.MEMORIES} element={<Memories />} />
         <Route path={ROUTES.PERSON} element={<PersonImages />} />
       </Route>
     </Routes>