diff --git a/scripts/ralph/prd.json b/scripts/ralph/prd.json
index f566f71..05fe869 100644
--- a/scripts/ralph/prd.json
+++ b/scripts/ralph/prd.json
@@ -127,8 +127,8 @@
         "SettingsHubView.vue include MobileBottomNav cu Setări activ",
         "npm run build passes"
       ],
-      "passes": false,
-      "notes": ""
+      "passes": true,
+      "notes": "Completed in iteration 4"
     },
     {
       "id": "US-303",
diff --git a/scripts/ralph/progress.txt b/scripts/ralph/progress.txt
index 30e26cf..7382bb2 100644
--- a/scripts/ralph/progress.txt
+++ b/scripts/ralph/progress.txt
@@ -1038,3 +1038,9 @@ User Stories: 11 (US-301 to US-311)
 [2026-01-12 16:39:02] Working on story: US-301
 [2026-01-12 16:39:02] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_3_US-301.log)
 [2026-01-12 16:40:01] SUCCESS: Story US-301 passed!
+[2026-01-12 16:40:01] Changes committed
+[2026-01-12 16:40:01] Progress: 5/11 stories completed
+[2026-01-12 16:40:03] === Iteration 4/100 ===
+[2026-01-12 16:40:03] Working on story: US-302
+[2026-01-12 16:40:03] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_4_US-302.log)
+[2026-01-12 16:42:59] SUCCESS: Story US-302 passed!
diff --git a/src/modules/data-entry/views/OCRMetricsView.vue b/src/modules/data-entry/views/OCRMetricsView.vue
index e750e8f..ff251ff 100644
--- a/src/modules/data-entry/views/OCRMetricsView.vue
+++ b/src/modules/data-entry/views/OCRMetricsView.vue
@@ -1,6 +1,17 @@
 <template>
-  <div class="ocr-metrics-view">
-    <div class="page-header">
+  <div class="ocr-metrics-view" :class="{ 'mobile-layout': isMobile }">
+    <!-- US-302: Mobile Material Design Top Bar -->
+    <MobileTopBar
+      v-if="isMobile"
+      title="Metrici OCR"
+      :show-back="true"
+      :actions="mobileTopBarActions"
+      @back-click="router.push('/settings')"
+      @action-click="handleTopBarAction"
+    />
+
+    <!-- Desktop Header -->
+    <div class="page-header" v-if="!isMobile">
       <h1>Metrici OCR</h1>
     </div>
 
@@ -365,6 +376,9 @@
         </div>
       </div>
     </div>
+
+    <!-- US-302: Mobile Bottom Navigation -->
+    <MobileBottomNav v-if="isMobile" />
   </div>
 </template>
 
@@ -390,6 +404,10 @@ import {
 } from 'chart.js'
 import { useOCRSettingsStore } from '@data-entry/stores/ocrSettingsStore'
 import { exportToExcel, exportToPDF } from '@reports/utils/exportUtils'
+import { useRouter } from 'vue-router'
+// US-302: Mobile Material Design components
+import MobileTopBar from '@shared/components/mobile/MobileTopBar.vue'
+import MobileBottomNav from '@shared/components/mobile/MobileBottomNav.vue'
 
 // Register Chart.js components
 Chart.register(
@@ -404,6 +422,23 @@ Chart.register(
 
 const ocrStore = useOCRSettingsStore()
 const toast = useToast()
+const router = useRouter()
+
+// US-302: Mobile TopBar actions
+const mobileTopBarActions = computed(() => [
+  {
+    icon: 'pi pi-refresh',
+    label: 'Actualizează',
+    tooltip: 'Actualizează metricile'
+  }
+])
+
+// US-302: Handle top bar action clicks
+const handleTopBarAction = (action) => {
+  if (action.icon === 'pi pi-refresh') {
+    loadAllMetrics()
+  }
+}
 
 // State
 const selectedDays = ref(30)
@@ -811,6 +846,13 @@ onBeforeUnmount(() => {
   margin: 0 auto;
 }
 
+/* US-302: Mobile Layout - Padding for fixed top/bottom bars */
+.ocr-metrics-view.mobile-layout {
+  padding: var(--space-sm);
+  padding-top: 56px; /* MobileTopBar height */
+  padding-bottom: 56px; /* MobileBottomNav height */
+}
+
 .page-header {
   display: flex;
   justify-content: space-between;
diff --git a/src/modules/reports/views/TelegramView.vue b/src/modules/reports/views/TelegramView.vue
index 3b4f819..4853953 100644
--- a/src/modules/reports/views/TelegramView.vue
+++ b/src/modules/reports/views/TelegramView.vue
@@ -1,13 +1,22 @@
 <template>
-  <main class="main-content">
-    <div class="app-container">
-      <!-- Page Header -->
-      <div class="page-header">
-        <h1 class="page-title">Telegram Bot</h1>
-        <p class="page-subtitle">
-          Conectează-ți contul pentru acces rapid din Telegram
-        </p>
-      </div>
+  <div class="telegram-view" :class="{ 'mobile-layout': isMobile }">
+    <!-- US-302: Mobile Material Design Top Bar -->
+    <MobileTopBar
+      v-if="isMobile"
+      title="Telegram"
+      :show-back="true"
+      @back-click="router.push('/settings')"
+    />
+
+    <main class="main-content">
+      <div class="app-container">
+        <!-- Page Header - Desktop only -->
+        <div v-if="!isMobile" class="page-header">
+          <h1 class="page-title">Telegram Bot</h1>
+          <p class="page-subtitle">
+            Conectează-ți contul pentru acces rapid din Telegram
+          </p>
+        </div>
 
       <!-- Loading State -->
       <div v-if="loading" class="loading-state">
@@ -71,15 +80,23 @@
       </div>
     </div>
   </main>
+
+    <!-- US-302: Mobile Bottom Navigation -->
+    <MobileBottomNav v-if="isMobile" />
+  </div>
 </template>
 
 <script setup>
-import { ref, computed, onUnmounted } from "vue";
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import { useRouter } from "vue-router";
 import { useToast } from "primevue/usetoast";
 import Button from "primevue/button";
 import Toast from "primevue/toast";
 import QRCodeVue from "qrcode.vue";
 import axios from "axios";
+// US-302: Mobile Material Design components
+import MobileTopBar from '@shared/components/mobile/MobileTopBar.vue';
+import MobileBottomNav from '@shared/components/mobile/MobileBottomNav.vue';
 
 // Telegram API uses /api/telegram (separate from reports)
 const telegramApi = axios.create({
@@ -97,6 +114,15 @@ telegramApi.interceptors.request.use((config) => {
 });
 
 const toast = useToast();
+const router = useRouter();
+
+// US-302: Mobile state
+const isMobile = ref(window.innerWidth < 768);
+
+// Handle window resize
+const handleResize = () => {
+  isMobile.value = window.innerWidth < 768;
+};
 
 // State
 const linkingCode = ref("");
@@ -196,12 +222,28 @@ const copyCode = async () => {
   }
 };
 
+// US-302: Lifecycle
+onMounted(() => {
+  window.addEventListener('resize', handleResize);
+});
+
 onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
   if (countdownInterval) clearInterval(countdownInterval);
 });
 </script>
 
 <style scoped>
+/* US-302: Mobile Layout - Padding for fixed top/bottom bars */
+.telegram-view.mobile-layout {
+  padding-top: 56px; /* MobileTopBar height */
+  padding-bottom: 56px; /* MobileBottomNav height */
+}
+
+.telegram-view.mobile-layout .main-content {
+  padding: var(--space-sm);
+}
+
 /* Page Header - Uses global .page-header pattern */
 /* Loading - Uses global .loading-spinner pattern */
 /* Card - Uses global .card pattern */