diff --git a/web/src/components/CaseStarButton.tsx b/web/src/components/CaseStarButton.tsx
index 09816f563..1ba097686 100644
--- a/web/src/components/CaseStarButton.tsx
+++ b/web/src/components/CaseStarButton.tsx
@@ -39,7 +39,7 @@ const CaseStarButton: React.FC<{ id: string }> = ({ id }) => {
   const starred = useMemo(() => Boolean(starredCases.has(id)), [id, starredCases]);
   const text = starred ? "Remove from favorite" : "Add to favorite";
   return (
-    <Tooltip {...{ text }} place={isDesktop ? "top" : "bottom"}>
+    <Tooltip {...{ text }} place={isDesktop ? "right" : "bottom"}>
       <StyledButton
         Icon={Star}
         text=""
diff --git a/web/src/components/FavoriteCases.tsx b/web/src/components/FavoriteCases.tsx
index 44ce19065..c90ab4f5b 100644
--- a/web/src/components/FavoriteCases.tsx
+++ b/web/src/components/FavoriteCases.tsx
@@ -18,7 +18,7 @@ const Container = styled.div`
 `;
 
 const Title = styled.h1`
-  margin-bottom: 12px;
+  margin-bottom: 4px;
 `;
 
 const DisputeContainer = styled.div`
@@ -33,7 +33,7 @@ const StyledLabel = styled.label`
   display: block;
   color: ${({ theme }) => theme.primaryBlue};
   cursor: pointer;
-  margin-bottom: ${responsiveSize(16, 32)};
+  margin-bottom: ${responsiveSize(12, 16)};
   :hover {
     color: ${({ theme }) => theme.secondaryBlue};
   }