diff --git a/app/[slug]/page.tsx b/app/[slug]/page.tsx
index b835433..f1d317e 100644
--- a/app/[slug]/page.tsx
+++ b/app/[slug]/page.tsx
@@ -497,7 +497,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
 
                             return (
                               <div key={index} className="mt-3">
-                                {/* Primary Flex Layout for Step Key, Title, and Description */}
+                                {/* Step header */}
                                 <div className="flex items-start flex-wrap">
                                   <span
                                     className={`text-white/90 font-semibold text-base${guide?.step_key?.includes("Step")
@@ -510,168 +510,26 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                   <span className="text-white/90 font-semibold text-base">
                                     {guide?.step_title}
                                   </span>
-                                  {guide?.steps_points?.length > 0 && (
-                                    <ul className="pl-12 list-disc">
-                                      {guide?.steps_points?.map(
-                                        (p: any, index: number) => (
-                                          <li key={index}>
-                                            {p?.steps_points_title && (
-                                              <span className="text-white/90 font-semibold text-base">
-                                                {p?.steps_points_title}
-                                              </span>
-                                            )}
-                                            {p?.steps_points_description && (
-                                              <p className="text-base text-white/70">
-                                                {p?.steps_points_description
-                                                  ?.split(/(".*?")/)
-                                                  .map(
-                                                    (part: string, i: number) =>
-                                                      part.startsWith("") &&
-                                                        part.endsWith("") ? (
-                                                        <span
-                                                          key={i}
-                                                          className="font-normal text-white/70"
-                                                        >
-                                                          {part}
-                                                        </span>
-                                                      ) : (
-                                                        <React.Fragment key={i}>
-                                                          {part
-                                                            .split(
-                                                              /(\/\/.*?\/\/)/
-                                                            )
-                                                            .map(
-                                                              (
-                                                                sub: string,
-                                                                j: number
-                                                              ) =>
-                                                                sub.startsWith(
-                                                                  "//"
-                                                                ) &&
-                                                                  sub.endsWith(
-                                                                    "//"
-                                                                  ) ? (
-                                                                  <span
-                                                                    key={`${i}-${j}`}
-                                                                    className="font-semibold text-white/70"
-                                                                  >
-                                                                    {sub.slice(
-                                                                      2,
-                                                                      -2
-                                                                    )}
-                                                                  </span>
-                                                                ) : (
-                                                                  sub
-                                                                )
-                                                            )}
-                                                        </React.Fragment>
-                                                      )
-                                                  )}
-                                              </p>
-                                            )}
-                                            {Array.isArray(p?.steps_subpoint) &&
-                                              p?.steps_subpoint?.length > 0 && (
-                                                <ul className="pl-12 list-disc">
-                                                  {p?.steps_subpoint?.map(
-                                                    (
-                                                      sub_p: any,
-                                                      subIndex: number
-                                                    ) => (
-                                                      <li key={subIndex}>
-                                                        {sub_p?.title && (
-                                                          <span className="text-white/90 font-semibold text-base">
-                                                            {sub_p?.title}
-                                                          </span>
-                                                        )}
-                                                        {sub_p?.description && (
-                                                          <span className="text-base text-white/70">
-                                                            {sub_p?.description
-                                                              ?.split(/(".*?")/)
-                                                              .map(
-                                                                (
-                                                                  part: string,
-                                                                  i: number
-                                                                ) =>
-                                                                  part.startsWith(
-                                                                    ""
-                                                                  ) &&
-                                                                    part.endsWith(
-                                                                      ""
-                                                                    ) ? (
-                                                                    <span
-                                                                      key={i}
-                                                                      className="font-semibold text-white/90"
-                                                                    >
-                                                                      {part}
-                                                                    </span>
-                                                                  ) : (
-                                                                    <React.Fragment
-                                                                      key={i}
-                                                                    >
-                                                                      {part
-                                                                        .split(
-                                                                          /(\/\/.*?\/\/)/
-                                                                        )
-                                                                        .map(
-                                                                          (
-                                                                            sub: string,
-                                                                            j: number
-                                                                          ) =>
-                                                                            sub.startsWith(
-                                                                              "//"
-                                                                            ) &&
-                                                                              sub.endsWith(
-                                                                                "//"
-                                                                              ) ? (
-                                                                              <span
-                                                                                key={`${i}-${j}`}
-                                                                                className="font-semibold text-white/90"
-                                                                              >
-                                                                                {sub.slice(
-                                                                                  2,
-                                                                                  -2
-                                                                                )}
-                                                                              </span>
-                                                                            ) : (
-                                                                              sub
-                                                                            )
-                                                                        )}
-                                                                    </React.Fragment>
-                                                                  )
-                                                              )}
-                                                          </span>
-                                                        )}
-                                                      </li>
-                                                    )
-                                                  )}
-                                                </ul>
-                                              )}
-                                          </li>
-                                        )
-                                      )}
-                                    </ul>
-                                  )}
-                                  <span className="text-base text-white/70">
+                                </div>
+
+                                {/* Step descriptions (below title) */}
+                                {description && (
+                                  <div className="mt-2 text-base text-white/70">
                                     {parts?.map((part: any, i: any) =>
-                                      part.startsWith("") &&
-                                        part.endsWith("") ? (
-                                        <>
-                                          <span
-                                            key={`description_${i}`}
-                                            className="text-white"
-                                          >
-                                            {part}
-                                          </span>
-                                        </>
+                                      part.startsWith("") && part.endsWith("") ? (
+                                        <span key={`description_${i}`} className="text-white">
+                                          {part}
+                                        </span>
                                       ) : (
-                                        part
+                                        <React.Fragment key={`description_${i}`}>{part}</React.Fragment>
                                       )
                                     )}
-                                  </span>
-                                </div>
+                                  </div>
+                                )}
+
                                 {/* Step Description2 on a New Line, Only If Present */}
                                 {description2 && desParts?.length > 0 && (
-                                  <div className="mt-2 text-base text-white/70">
+                                  <div className="mt-2 pl-12 text-base text-white/70">
                                     {desParts?.map((part: any, i: any) =>
                                       part.startsWith("") &&
                                         part.endsWith("") ? (
@@ -687,6 +545,93 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                     )}
                                   </div>
                                 )}
+
+                                {guide?.steps_points?.length > 0 && (
+                                  <ul className="pl-12 list-disc mt-2">
+                                    {guide?.steps_points?.map((p: any, index: number) => (
+                                      <li key={index}>
+                                        {p?.steps_points_title && (
+                                          <span className="text-white/90 font-semibold text-base">
+                                            {p?.steps_points_title}
+                                          </span>
+                                        )}
+                                        {p?.steps_points_description && (
+                                          <p className="text-base text-white/70">
+                                            {p?.steps_points_description
+                                              ?.split(/(".*?")/)
+                                              .map((part: string, i: number) =>
+                                                part.startsWith("") && part.endsWith("") ? (
+                                                  <span key={i} className="font-normal text-white/70">
+                                                    {part}
+                                                  </span>
+                                                ) : (
+                                                  <React.Fragment key={i}>
+                                                    {part
+                                                      .split(/(\/\/.*?\/\/)/)
+                                                      .map((sub: string, j: number) =>
+                                                        sub.startsWith("//") && sub.endsWith("//") ? (
+                                                          <span
+                                                            key={`${i}-${j}`}
+                                                            className="font-semibold text-white/70"
+                                                          >
+                                                            {sub.slice(2, -2)}
+                                                          </span>
+                                                        ) : (
+                                                          sub
+                                                        )
+                                                      )}
+                                                  </React.Fragment>
+                                                )
+                                              )}
+                                          </p>
+                                        )}
+                                        {Array.isArray(p?.steps_subpoint) && p?.steps_subpoint?.length > 0 && (
+                                          <ul className="pl-12 list-disc">
+                                            {p?.steps_subpoint?.map((sub_p: any, subIndex: number) => (
+                                              <li key={subIndex}>
+                                                {sub_p?.title && (
+                                                  <span className="text-white/90 font-semibold text-base">
+                                                    {sub_p?.title}
+                                                  </span>
+                                                )}
+                                                {sub_p?.description && (
+                                                  <span className="text-base text-white/70">
+                                                    {sub_p?.description
+                                                      ?.split(/(".*?")/)
+                                                      .map((part: string, i: number) =>
+                                                        part.startsWith("") && part.endsWith("") ? (
+                                                          <span key={i} className="font-semibold text-white/90">
+                                                            {part}
+                                                          </span>
+                                                        ) : (
+                                                          <React.Fragment key={i}>
+                                                            {part
+                                                              .split(/(\/\/.*?\/\/)/)
+                                                              .map((sub: string, j: number) =>
+                                                                sub.startsWith("//") && sub.endsWith("//") ? (
+                                                                  <span
+                                                                    key={`${i}-${j}`}
+                                                                    className="font-semibold text-white/90"
+                                                                  >
+                                                                    {sub.slice(2, -2)}
+                                                                  </span>
+                                                                ) : (
+                                                                  sub
+                                                                )
+                                                              )}
+                                                          </React.Fragment>
+                                                        )
+                                                      )}
+                                                  </span>
+                                                )}
+                                              </li>
+                                            ))}
+                                          </ul>
+                                        )}
+                                      </li>
+                                    ))}
+                                  </ul>
+                                )}
                               </div>
                             );
                           }
diff --git a/app/components/developmentToolsComponent/timeCalculator.tsx b/app/components/developmentToolsComponent/timeCalculator.tsx
index 3c23cf9..c354bc9 100644
--- a/app/components/developmentToolsComponent/timeCalculator.tsx
+++ b/app/components/developmentToolsComponent/timeCalculator.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
 
 type Mode = "add" | "subtract" | "multiply" | "divide" | "between";
@@ -60,7 +60,6 @@ type HMSRow = { h: number; m: number; s: number };
 
 const DEFAULT_HMS_ROWS: HMSRow[] = [
   { h: 0, m: 0, s: 0 },
-  { h: 0, m: 0, s: 0 },
 ];
 
 const toMs = (r: HMSRow) => (Number(r.h) * 3600 + Number(r.m) * 60 + Number(r.s)) * 1000;
@@ -110,6 +109,7 @@ const TimeCalculator = () => {
   const [divisor, setDivisor] = useState<number>(2);
   const [betweenStart, setBetweenStart] = useState<string>("");
   const [betweenEnd, setBetweenEnd] = useState<string>("");
+  const rowsContainerRef = useRef<HTMLDivElement | null>(null);
 
   const computed = useMemo(
     () => calc(mode, rows, multiplier, divisor, betweenStart, betweenEnd),
@@ -133,6 +133,53 @@ const TimeCalculator = () => {
   const updateRow = (idx: number, patch: Partial<HMSRow>) =>
     setRows((prev) => prev.map((r, i) => (i === idx ? { ...r, ...patch } : r)));
 
+  useEffect(() => {
+    if (mode === "between") return;
+    if (rows.length !== 1) return;
+    const first = rows[0];
+    if (!first) return;
+    const hasAny = Boolean(Number(first.h) || Number(first.m) || Number(first.s));
+    if (!hasAny) return;
+    setRows((prev) => (prev.length === 1 ? [...prev, { h: 0, m: 0, s: 0 }] : prev));
+  }, [mode, rows]);
+
+  const focusTimeInput = (rowIdx: number, colIdx: number) => {
+    const root = rowsContainerRef.current;
+    if (!root) return;
+    const el = root.querySelector<HTMLInputElement>(
+      `input[data-bb-time-input="1"][data-row="${rowIdx}"][data-col="${colIdx}"]`
+    );
+    el?.focus();
+    el?.select?.();
+  };
+
+  const handleEnterAdvance = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key !== "Enter") return;
+    e.preventDefault();
+
+    const root = rowsContainerRef.current;
+    if (!root) return;
+    const inputs = Array.from(root.querySelectorAll<HTMLInputElement>(`input[data-bb-time-input="1"]`));
+    if (inputs.length === 0) return;
+
+    const current = e.currentTarget;
+    const idx = inputs.indexOf(current);
+    if (idx < 0) return;
+
+    const next = inputs[idx + 1];
+    if (next) {
+      next.focus();
+      next.select?.();
+      return;
+    }
+
+    // If we were on the last input, add a row and focus it.
+    if (rows.length >= 20) return;
+    const nextRowIdx = rows.length;
+    setRows((prev) => [...prev, { h: 0, m: 0, s: 0 }]);
+    requestAnimationFrame(() => focusTimeInput(nextRowIdx, 0));
+  };
+
   const clearAll = () => {
     setRows(DEFAULT_HMS_ROWS);
     setResultUnit("h");
@@ -226,6 +273,7 @@ const TimeCalculator = () => {
                         <div className="space-y-4">
                           <div className="text-sm text-white/80">Enter values (up to 20 rows)</div>
                           <div
+                            ref={rowsContainerRef}
                             className={`space-y-3 ${rows.length > 3 ? "bb-thin-scroll max-h-[420px] overflow-auto pr-1" : ""
                               }`}
                             style={rows.length > 3 ? { scrollbarWidth: "thin" } : undefined}
@@ -254,6 +302,10 @@ const TimeCalculator = () => {
                                         type="number"
                                         value={Number.isFinite(r.h) ? r.h : 0}
                                         onChange={(e) => updateRow(idx, { h: Number(e.target.value) || 0 })}
+                                        onKeyDown={handleEnterAdvance}
+                                        data-bb-time-input="1"
+                                        data-row={idx}
+                                        data-col={0}
                                         className="w-full bg-transparent outline-none text-white text-sm"
                                       />
                                     </div>
@@ -263,6 +315,10 @@ const TimeCalculator = () => {
                                         type="number"
                                         value={Number.isFinite(r.m) ? r.m : 0}
                                         onChange={(e) => updateRow(idx, { m: Number(e.target.value) || 0 })}
+                                        onKeyDown={handleEnterAdvance}
+                                        data-bb-time-input="1"
+                                        data-row={idx}
+                                        data-col={1}
                                         className="w-full bg-transparent outline-none text-white text-sm"
                                       />
                                     </div>
@@ -272,6 +328,10 @@ const TimeCalculator = () => {
                                         type="number"
                                         value={Number.isFinite(r.s) ? r.s : 0}
                                         onChange={(e) => updateRow(idx, { s: Number(e.target.value) || 0 })}
+                                        onKeyDown={handleEnterAdvance}
+                                        data-bb-time-input="1"
+                                        data-row={idx}
+                                        data-col={2}
                                         className="w-full bg-transparent outline-none text-white text-sm"
                                       />
                                     </div>