diff --git a/maternal-web/components/layouts/TabBar/TabBar.tsx b/maternal-web/components/layouts/TabBar/TabBar.tsx
index 818846e..6ece9e8 100644
--- a/maternal-web/components/layouts/TabBar/TabBar.tsx
+++ b/maternal-web/components/layouts/TabBar/TabBar.tsx
@@ -64,38 +64,38 @@ export const TabBar = () => {
         >
           {tabs.map((tab) => {
             if (tab.value === 'voice') {
-              // Center voice button
+              // Center voice button - using BottomNavigationAction as wrapper to avoid prop warnings
               return (
-                <Box
+                <BottomNavigationAction
                   key="voice-placeholder"
-                  sx={{
-                    flex: 1,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}
-                >
-                  <IconButton
-                    aria-label="voice command"
-                    onClick={() => {
-                      const voiceButton = document.querySelector('[aria-label="voice input"]') as HTMLButtonElement;
-                      if (voiceButton) {
-                        voiceButton.click();
-                      }
-                    }}
-                    sx={{
-                      bgcolor: '#FF69B4',
-                      color: 'white',
-                      width: 48,
-                      height: 48,
-                      '&:hover': {
-                        bgcolor: '#FF1493',
-                      },
-                    }}
-                  >
-                    <Mic />
-                  </IconButton>
-                </Box>
+                  label=""
+                  value="voice"
+                  showLabel={false}
+                  icon={
+                    <IconButton
+                      aria-label="voice command"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        const voiceButton = document.querySelector('[aria-label="voice input"]') as HTMLButtonElement;
+                        if (voiceButton) {
+                          voiceButton.click();
+                        }
+                      }}
+                      sx={{
+                        bgcolor: '#FF69B4',
+                        color: 'white',
+                        width: 48,
+                        height: 48,
+                        '&:hover': {
+                          bgcolor: '#FF1493',
+                        },
+                      }}
+                    >
+                      <Mic />
+                    </IconButton>
+                  }
+                  sx={{ minWidth: 80 }}
+                />
               );
             }
             return (