diff --git a/frontend/app/[calculator]/layout.tsx b/frontend/app/[calculator]/layout.tsx
new file mode 100644
index 0000000..499faff
--- /dev/null
+++ b/frontend/app/[calculator]/layout.tsx
@@ -0,0 +1,11 @@
+// app/[calculator]/layout.tsx
+// Layout для страниц калькуляторов с сохранением chat_id
+
+export default function CalculatorLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}
+
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index d3c321d..627a143 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -1,6 +1,11 @@
+// app/page.tsx
+// Главная страница с выбором калькулятора
+
 import { redirect } from 'next/navigation';
+import { getAvailableCalculators } from '@/lib/calculators';
 
 export default function Home() {
-  // Редирект на калькулятор мыла по умолчанию
+  // Редирект на калькулятор мыла по умолчанию, если есть chat_id
+  // Иначе показываем список калькуляторов
   redirect('/soap');
 }
diff --git a/frontend/components/CalculatorNav.tsx b/frontend/components/CalculatorNav.tsx
new file mode 100644
index 0000000..605f0fc
--- /dev/null
+++ b/frontend/components/CalculatorNav.tsx
@@ -0,0 +1,54 @@
+// components/CalculatorNav.tsx
+// Навигация между калькуляторами
+
+'use client';
+
+import { usePathname, useSearchParams } from 'next/navigation';
+
+export default function CalculatorNav() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const chatId = searchParams.get('chat_id');
+  
+  // Сохраняем chat_id при переходах
+  const queryString = chatId ? `?chat_id=${chatId}` : '';
+  
+  const calculators = [
+    { id: 'soap', name: 'Мыло' },
+    { id: 'candle', name: 'Свеча' },
+  ];
+
+  const handleCalculatorChange = (calcId: string) => {
+    window.location.href = `/${calcId}${queryString}`;
+  };
+
+  return (
+    <div className="mb-6 bg-gray-700 rounded-lg p-4">
+      <h2 className="text-lg font-semibold text-gray-200 mb-3">
+        Выберите калькулятор:
+      </h2>
+      <div className="grid grid-cols-2 gap-2">
+        {calculators.map((calc) => {
+          const isActive = pathname === `/${calc.id}`;
+          
+          return (
+            <button
+              key={calc.id}
+              onClick={() => handleCalculatorChange(calc.id)}
+              className={`
+                px-4 py-2 rounded-md text-center font-medium transition-colors
+                ${isActive
+                  ? 'bg-sky-500 text-gray-100'
+                  : 'bg-gray-600 text-gray-200 hover:bg-gray-500 active:bg-gray-400'
+                }
+              `}
+            >
+              {calc.name}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
diff --git a/frontend/components/DynamicCalculator.tsx b/frontend/components/DynamicCalculator.tsx
index 652694f..184751b 100644
--- a/frontend/components/DynamicCalculator.tsx
+++ b/frontend/components/DynamicCalculator.tsx
@@ -8,6 +8,7 @@ import Image from 'next/image';
 import { getCalculator } from '@/lib/calculators';
 import { submitCalculator } from '@/lib/api';
 import FormField from './FormField';
+import CalculatorNav from './CalculatorNav';
 import type { Calculator } from '@/types/calculator';
 
 interface DynamicCalculatorProps {
@@ -215,6 +216,9 @@ export default function DynamicCalculator({ calculatorType }: DynamicCalculatorP
         />
       </div>
 
+      {/* Навигация между калькуляторами */}
+      <CalculatorNav />
+
       {/* Предупреждение о chat_id */}
       {chatId === null && (
         <div className="bg-yellow-800 p-2 text-yellow-200 font-semibold rounded">
diff --git a/frontend/components/SoapCalculator.tsx b/frontend/components/SoapCalculator.tsx
index 683ed81..47296d4 100644
--- a/frontend/components/SoapCalculator.tsx
+++ b/frontend/components/SoapCalculator.tsx
@@ -162,7 +162,7 @@ export default function SoapCalculator() {
     }
 
     try {
-      const res = await fetch(`${API_BASE_URL}/api/submit`, {
+      const res = await fetch(`${API_BASE_URL}/api/submit/soap`, {
         method: 'POST',
         body: formData,
       });