diff --git a/src/components/frame/Frame.tsx b/src/components/frame/Frame.tsx
index 566b516..5d813f4 100644
--- a/src/components/frame/Frame.tsx
+++ b/src/components/frame/Frame.tsx
@@ -9,7 +9,7 @@ export default function Frame({ frame } : { frame: FrameType }) {
       <ol className="steps">
         {frame.steps.map((step, stepIndex) => (
           <li key={stepIndex} className="step">
-            {step.text}
+            <span>{stepIndex + 1}.</span>{step.text}
           </li>
         ))}
       </ol>
diff --git a/src/features/guides/components/Frame.css b/src/features/guides/components/Frame.css
index 54ba5fd..a12fcee 100644
--- a/src/features/guides/components/Frame.css
+++ b/src/features/guides/components/Frame.css
@@ -19,14 +19,14 @@
     gap: var(--size-md);
 }
 
-.frame .buttons button {
+.frame button {
     padding: var(--size-sm) var(--size-md);
 }
 
-.frame .buttons .remove {
+.frame .remove-button {
     margin-left: auto;
 }
 
 .frame ol {
-    margin-left: var(--size-md);
+    margin-left: var(--size-sm);
 }
diff --git a/src/features/guides/components/Frame.tsx b/src/features/guides/components/Frame.tsx
index a7f60b4..9a4895b 100644
--- a/src/features/guides/components/Frame.tsx
+++ b/src/features/guides/components/Frame.tsx
@@ -36,21 +36,21 @@ export default function Frame({
       <div className="buttons">
         <button
           type="button"
-          className="up"
+          className="up-button"
           onClick={() => reOrder(frameIndex, frameIndex - 1)}
         >
           Up
         </button>
         <button
           type="button"
-          className="down"
+          className="down-button"
           onClick={() => reOrder(frameIndex, frameIndex + 1)}
         >
           Down
         </button>
         <button
           type="button"
-          className="remove"
+          className="remove-button"
           onClick={() => onRemove(frame.id)}
         >
           Remove Frame
@@ -67,7 +67,7 @@ export default function Frame({
       <img src={objectUrl} alt={frame.title} />
       <button
         type="button"
-        className="add-step"
+        className="add-step-button"
         onClick={() => addStep(frame.id)}
       >
         Add Step
diff --git a/src/features/guides/components/Step.css b/src/features/guides/components/Step.css
index 4c59448..a28d3c2 100644
--- a/src/features/guides/components/Step.css
+++ b/src/features/guides/components/Step.css
@@ -1,8 +1,11 @@
 .step {
     display: flex;
-    gap: var(--size-md);
+    gap: var(--size-xs);
+}
+.step span {
+    font-weight: bold;
+    color:#555;
 }
-
 .step label {
     flex-direction: row;
     align-items: center;
diff --git a/src/features/guides/components/Step.tsx b/src/features/guides/components/Step.tsx
index 15ecce7..fea39e0 100644
--- a/src/features/guides/components/Step.tsx
+++ b/src/features/guides/components/Step.tsx
@@ -9,7 +9,7 @@ export default function Step({
 }: {
   step: StepType;
   removeStep: (stepId: string) => void;
-  updateStep: (stepId: string, text: string) => void;
+  updateStep: (stepId: string, text: string) => void ;
   index: number;
 }) {
   return (
@@ -22,7 +22,7 @@ export default function Step({
           onChange={(e) => updateStep(step.id, e.target.value)}
         />
       </label>
-      <button type="button" onClick={() => removeStep(step.id)}>
+      <button type="button" className="remove-step-button" onClick={() => removeStep(step.id)}>
         Remove Step
       </button>
     </li>
diff --git a/src/features/guides/routes/Guide.css b/src/features/guides/routes/Guide.css
index fc96af4..b9239d2 100644
--- a/src/features/guides/routes/Guide.css
+++ b/src/features/guides/routes/Guide.css
@@ -4,14 +4,15 @@ main:has(.guide) {
     justify-content: center;
 }
 
-.guide__frames {
+.frames {
     display: flex;
     flex-direction: column;
-    gap: var(--size-xl);
+    gap: 2rem;
 }
 
 .guide {
     max-width: 600px;
+
     .delete-button {
         position: absolute;
         bottom: var(--size-md);
@@ -29,28 +30,31 @@ main:has(.guide) {
         top: var(--size-md);
         right: var(--size-md);
     }
-
 }
+
 @media print {
     main:has(.guide) {
         padding: 0rem;
         justify-content: flex-start;
     }
 
-    .guide__frames {
-        display: block;
-    }
 
-    .guide__frame {
+
+    .frame {
         position: relative;
         break-inside: avoid;
         page-break-inside: avoid;
         background-color: var(--color-bg-panel);
-        margin: var(--size-lg) 0;
+
     }
 
-    .guide__frame img {
+    .frame img {
         max-width: 100%;
-        max-height: 100px;
+        max-height: 300px;
     }
 }
+
+@page {
+    size: A4;
+    margin: 2rem;
+}
diff --git a/src/features/guides/routes/Guide.tsx b/src/features/guides/routes/Guide.tsx
index 2d4f023..de6aad8 100644
--- a/src/features/guides/routes/Guide.tsx
+++ b/src/features/guides/routes/Guide.tsx
@@ -19,7 +19,7 @@ export default function Guide() {
 
       <hr />
 
-      <div className="guide__frames">
+      <div className="frames">
         {guide.frames.map((frame, index) => (
           <Frame key={index} frame={frame} />
         ))}
diff --git a/src/styles/App.css b/src/styles/App.css
index 12b4556..000cc21 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -78,6 +78,8 @@ ul {
     list-style: none;
 }
 
+
+
 a,
 input,
 button,
@@ -119,10 +121,12 @@ textarea,
     border-radius: var(--radius);
     padding: var(--size-sm);
 }
+
 textarea {
     resize: none;
     height: 5rem;
 }
+
 hr {
     margin: var(--size-md) 0;
     border: none;
@@ -130,9 +134,11 @@ hr {
     background-color: var(--color-bg-sidebar);
     border-radius: var(--radius);
 }
+
 :focus-visible {
     border: 2px solid var(--color-accent);
 }
+
 @media print {
     header,
     footer,