diff --git a/src/features/guides/components/Frame.css b/src/features/guides/components/Frame.css
index e69de29..74adc21 100644
--- a/src/features/guides/components/Frame.css
+++ b/src/features/guides/components/Frame.css
@@ -0,0 +1,27 @@
+.frame {
+    padding: 1rem;
+    background: #ddd;
+
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.frame .buttons {
+    display: flex;
+    gap: 1rem;
+}
+
+.frame .buttons button {
+    padding: 0.5rem 1rem;
+}
+
+.frame .buttons .remove {
+    margin-left: auto;
+}
+
+.frame .steps {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
diff --git a/src/features/guides/components/Frame.tsx b/src/features/guides/components/Frame.tsx
index 020d900..a57fcfb 100644
--- a/src/features/guides/components/Frame.tsx
+++ b/src/features/guides/components/Frame.tsx
@@ -22,17 +22,32 @@ export default function Frame({
   reOrder: (startIndex: number, endIndex: number) => void;
 }) {
   return (
-    <div>
-      <button type="button" onClick={() => reOrder(frameIndex, frameIndex - 1)}>
-        Up
-      </button>
-      <button type="button" onClick={() => reOrder(frameIndex, frameIndex + 1)}>
-        Down
-      </button>
+    <div className="frame">
+      <div className="buttons">
+        <button
+          type="button"
+          className="up"
+          onClick={() => reOrder(frameIndex, frameIndex - 1)}
+        >
+          Up
+        </button>
+        <button
+          type="button"
+          className="down"
+          onClick={() => reOrder(frameIndex, frameIndex + 1)}
+        >
+          Down
+        </button>
+
+        <button
+          type="button"
+          className="remove"
+          onClick={() => onRemove(frame.id)}
+        >
+          Remove Frame
+        </button>
+      </div>
 
-      <button type="button" onClick={() => onRemove(frame.id)}>
-        Remove Frame
-      </button>
       <label>
         Title
         <input
@@ -41,18 +56,25 @@ export default function Frame({
         />
       </label>
       <img src={URL.createObjectURL(frame.file)} alt={frame.title} />
-      <button type="button" onClick={() => addStep(frame.id)}>
+      <button
+        type="button"
+        className="add-step"
+        onClick={() => addStep(frame.id)}
+      >
         Add Step
       </button>
-      {frame.steps.map((step: StepType, index: number) => (
-        <Step
-          key={step.id}
-          step={step}
-          index={index}
-          removeStep={removeStep}
-          updateStep={updateStep}
-        />
-      ))}
+
+      <div className="steps">
+        {frame.steps.map((step: StepType, index: number) => (
+          <Step
+            key={step.id}
+            step={step}
+            index={index}
+            removeStep={removeStep}
+            updateStep={updateStep}
+          />
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/src/features/guides/components/Step.css b/src/features/guides/components/Step.css
index e69de29..99113b8 100644
--- a/src/features/guides/components/Step.css
+++ b/src/features/guides/components/Step.css
@@ -0,0 +1,15 @@
+.step {
+    display: flex;
+    gap: 1rem;
+}
+
+.step label {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+    flex: 1;
+}
+
+.step input {
+    flex: 1;
+}