diff --git a/packages/feedback/src/screenshot/components/CropIcon.tsx b/packages/feedback/src/screenshot/components/CropIcon.tsx
index 2f4dcc61ca6a..091179d86004 100644
--- a/packages/feedback/src/screenshot/components/CropIcon.tsx
+++ b/packages/feedback/src/screenshot/components/CropIcon.tsx
@@ -9,7 +9,7 @@ export default function CropIconFactory({
 }: FactoryParams) {
   return function CropIcon(): VNode {
     return (
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M15.25 12.5H12.5M12.5 12.5H4.50001C3.94773 12.5 3.50001 12.0523 3.50001 11.5V3.50002M12.5 12.5L12.5 4.50002C12.5 3.94773 12.0523 3.50002 11.5 3.50002H3.50001M12.5 12.5L12.5 15.25M3.50001 3.50002V0.750031M3.50001 3.50002H0.75"
           stroke="currentColor"
diff --git a/packages/feedback/src/screenshot/components/PenIcon.tsx b/packages/feedback/src/screenshot/components/PenIcon.tsx
index ec50862c1dd4..75a0faedf480 100644
--- a/packages/feedback/src/screenshot/components/PenIcon.tsx
+++ b/packages/feedback/src/screenshot/components/PenIcon.tsx
@@ -9,7 +9,7 @@ export default function PenIconFactory({
 }: FactoryParams) {
   return function PenIcon(): VNode {
     return (
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M8.5 12L12 8.5L14 11L11 14L8.5 12Z"
           stroke="currentColor"
diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index b38f69cb76a8..3425c73a4c55 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -407,13 +407,13 @@ export function ScreenshotEditorFactory({
         <style nonce={options.styleNonce} dangerouslySetInnerHTML={styles} />
         <div class="editor__image-container">
           <div class="editor__canvas-container" ref={canvasContainerRef}>
-            <div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
-              <canvas
-                onMouseDown={onDragStart}
-                style={{ cursor: confirmCrop ? 'move' : 'auto' }}
-                ref={croppingRef}
-              ></canvas>
-              {isCropping && (
+            <div
+              class={`editor__crop-container ${isAnnotating ? 'editor__crop-container--inactive' : ''}
+              ${confirmCrop ? 'editor__crop-container--move' : ''}`}
+              ref={cropContainerRef}
+            >
+              <canvas onMouseDown={onDragStart} ref={croppingRef}></canvas>
+              {(!options._experiments.annotations || isCropping) && (
                 <div>
                   <CropCorner
                     left={croppingRect.startX - CROP_BUTTON_BORDER}
@@ -441,48 +441,47 @@ export function ScreenshotEditorFactory({
                   ></CropCorner>
                 </div>
               )}
-              <div
-                style={{
-                  left: Math.max(0, croppingRect.endX - 191),
-                  top: Math.max(0, croppingRect.endY + 8),
-                  display: confirmCrop ? 'flex' : 'none',
-                }}
-                class="editor__crop-btn-group"
-              >
-                <button
-                  onClick={e => {
-                    e.preventDefault();
-                    if (croppingRef.current) {
-                      setCroppingRect({
-                        startX: 0,
-                        startY: 0,
-                        endX: croppingRef.current.width / DPI,
-                        endY: croppingRef.current.height / DPI,
-                      });
-                    }
-                    setConfirmCrop(false);
-                  }}
-                  class="btn btn--default"
-                >
-                  {options.cancelButtonLabel}
-                </button>
-                <button
-                  onClick={e => {
-                    e.preventDefault();
-                    applyCrop();
-                    setConfirmCrop(false);
+              {(!options._experiments.annotations || isCropping) && (
+                <div
+                  style={{
+                    left: Math.max(0, croppingRect.endX - 191),
+                    top: Math.max(0, croppingRect.endY + 8),
                   }}
-                  class="btn btn--primary"
+                  class={`editor__crop-btn-group ${confirmCrop ? 'editor__crop-btn-group--active' : ''}`}
                 >
-                  {options.confirmButtonLabel}
-                </button>
-              </div>
+                  <button
+                    onClick={e => {
+                      e.preventDefault();
+                      if (croppingRef.current) {
+                        setCroppingRect({
+                          startX: 0,
+                          startY: 0,
+                          endX: croppingRef.current.width / DPI,
+                          endY: croppingRef.current.height / DPI,
+                        });
+                      }
+                      setConfirmCrop(false);
+                    }}
+                    class="btn btn--default"
+                  >
+                    {options.cancelButtonLabel}
+                  </button>
+                  <button
+                    onClick={e => {
+                      e.preventDefault();
+                      applyCrop();
+                      setConfirmCrop(false);
+                    }}
+                    class="btn btn--primary"
+                  >
+                    {options.confirmButtonLabel}
+                  </button>
+                </div>
+              )}
             </div>
-
             <canvas
-              class="editor__annotation"
+              class={`editor__annotation ${isAnnotating ? 'editor__annotation--active' : ''}`}
               onMouseDown={onAnnotateStart}
-              style={{ zIndex: isAnnotating ? '2' : '1' }}
               ref={annotatingRef}
             ></canvas>
           </div>
@@ -492,40 +491,24 @@ export function ScreenshotEditorFactory({
             <div />
             <div class="editor__tool-bar">
               <button
-                class="editor__tool"
-                style={{
-                  background: isAnnotating
-                    ? 'var(--button-primary-background, var(--accent-background))'
-                    : 'var(--button-background, var(--background))',
-                  color: isAnnotating
-                    ? 'var(--button-primary-foreground, var(--accent-foreground))'
-                    : 'var(--button-foreground, var(--foreground))',
-                }}
+                class={`editor__tool ${isAnnotating ? 'editor__tool--active' : ''}`}
                 onClick={e => {
                   e.preventDefault();
                   setIsAnnotating(!isAnnotating);
                   setIsCropping(false);
                 }}
               >
-                <CropIcon />
+                <PenIcon />
               </button>
               <button
-                class="editor__tool"
-                style={{
-                  background: isCropping
-                    ? 'var(--button-primary-background, var(--accent-background))'
-                    : 'var(--button-background, var(--background))',
-                  color: isCropping
-                    ? 'var(--button-primary-foreground, var(--accent-foreground))'
-                    : 'var(--button-foreground, var(--foreground))',
-                }}
+                class={`editor__tool ${isCropping ? 'editor__tool--active' : ''}`}
                 onClick={e => {
                   e.preventDefault();
                   setIsCropping(!isCropping);
                   setIsAnnotating(false);
                 }}
               >
-                <PenIcon />
+                <CropIcon />
               </button>
             </div>
             <div />
diff --git a/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts b/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
index 3f78e41a5851..4a9b313cdd6b 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
+++ b/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
@@ -40,6 +40,13 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
     );
 }
 
+.editor__annotation {
+  z-index: 1;
+}
+.editor__annotation--active {
+  z-index: 2;
+}
+
 .editor__canvas-container {
   width: 100%;
   height: 100%;
@@ -55,7 +62,15 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 }
 
 .editor__crop-container {
+  custor: auto;
   position: absolute;
+  z-index: 2;
+}
+.editor__crop-container--inactive {
+  z-index: 1;
+}
+.editor__crop-container--move {
+  cursor: move;
 }
 
 .editor__crop-btn-group {
@@ -65,6 +80,10 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
   background: var(--button-background, var(--background));
   width: 175px;
   position: absolute;
+  display: none;
+}
+.editor__crop-btn-group--active {
+  display: flex;
 }
 
 .editor__crop-corner {
@@ -96,20 +115,28 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
   border-top: none;
 }
 .editor__tool-container {
-  padding-top: 10px;
+  padding-top: 8px;
   display: flex;
   justify-content: space-between;
 }
 .editor__tool-bar {
-  height: 30px;
   display: flex;
-    gap: 8px;
+  gap: 8px;
 }
 .editor__tool {
+  display: flex;
+  padding: 8px 12px;
   justify-content: center;
   align-items: center;
   border: var(--button-border, var(--border));
   border-radius: var(--button-border-radius, 6px);
+  background: var(--button-background, var(--background));
+  color: var(--button-foreground, var(--foreground));
+}
+
+.editor__tool--active {
+  background: var(--button-primary-background, var(--accent-background));
+  color: var(--button-primary-foreground, var(--accent-foreground));
 }
 `;