diff --git a/backend/__pycache__/main.cpython-313.pyc b/backend/__pycache__/main.cpython-313.pyc
index 1aac91c..fe77bd0 100644
Binary files a/backend/__pycache__/main.cpython-313.pyc and b/backend/__pycache__/main.cpython-313.pyc differ
diff --git a/backend/main.py b/backend/main.py
index 99fee42..db939f9 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -183,6 +183,7 @@ app = FastAPI(
 # Allow CORS from frontend domains
 allowed_origins = [
     "http://localhost:5173",
+    "http://localhost:5174",
     "http://localhost:3000",
     "https://my-recipes.dvirlabs.com",
     "http://my-recipes.dvirlabs.com",
@@ -192,9 +193,8 @@ app.add_middleware(
     CORSMiddleware,
     allow_origins=allowed_origins,
     allow_credentials=True,
-    allow_methods=["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"],
+    allow_methods=["*"],
     allow_headers=["*"],
-    max_age=0,  # Disable CORS preflight caching
 )
 
 
@@ -551,12 +551,6 @@ def delete_grocery_list_endpoint(list_id: int, current_user: dict = Depends(get_
     return
 
 
-@app.options("/grocery-lists/{list_id}/pin")
-async def options_pin_grocery_list(list_id: int):
-    """Handle CORS preflight for pin endpoint"""
-    return Response(status_code=200)
-
-
 @app.patch("/grocery-lists/{list_id}/pin", response_model=GroceryList)
 def toggle_pin_grocery_list_endpoint(list_id: int, current_user: dict = Depends(get_current_user)):
     """Toggle pin status for a grocery list (owner only)"""
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 6040486..9bea9c0 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -124,6 +124,18 @@ body {
   }
 }
 
+.content-wrapper {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 1.4rem;
+}
+
+@media (min-width: 960px) {
+  .content-wrapper {
+    display: contents;
+  }
+}
+
 .sidebar,
 .content {
   display: flex;
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 5d890ee..cb69b6a 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -373,45 +373,27 @@ function App() {
                 <PinnedGroceryLists onShowToast={addToast} />
               </aside>
             )}
-            <section className="sidebar">
-              <RecipeSearchList
-            allRecipes={recipes}
-            recipes={getFilteredRecipes()}
-            selectedId={selectedRecipe?.id}
-            onSelect={setSelectedRecipe}
-            searchQuery={searchQuery}
-            onSearchChange={setSearchQuery}
-            filterMealType={filterMealType}
-            onMealTypeChange={setFilterMealType}
-            filterMaxTime={filterMaxTime}
-            onMaxTimeChange={setFilterMaxTime}
-            filterTags={filterTags}
-            onTagsChange={setFilterTags}
-            filterOwner={filterOwner}
-            onOwnerChange={setFilterOwner}
-          />
-        </section>
+            <section className="content-wrapper">
+              <section className="content">
+                {error && <div className="error-banner">{error}</div>}
 
-        <section className="content">
-          {error && <div className="error-banner">{error}</div>}
-
-          {/* Random Recipe Suggester - Top Left */}
-          <section className="panel filter-panel">
-            <h3>חיפוש מתכון רנדומלי</h3>
-            <div className="panel-grid">
-              <div className="field">
-                <label>סוג ארוחה</label>
-                <select
-                  value={mealTypeFilter}
-                  onChange={(e) => setMealTypeFilter(e.target.value)}
-                >
-                  <option value="">לא משנה</option>
-                  <option value="breakfast">בוקר</option>
-                  <option value="lunch">צהריים</option>
-                  <option value="dinner">ערב</option>
-                  <option value="snack">קינוחים</option>
-                </select>
-              </div>
+                {/* Random Recipe Suggester - Top Left */}
+                <section className="panel filter-panel">
+                  <h3>חיפוש מתכון רנדומלי</h3>
+                  <div className="panel-grid">
+                    <div className="field">
+                      <label>סוג ארוחה</label>
+                      <select
+                        value={mealTypeFilter}
+                        onChange={(e) => setMealTypeFilter(e.target.value)}
+                      >
+                        <option value="">לא משנה</option>
+                        <option value="breakfast">בוקר</option>
+                        <option value="lunch">צהריים</option>
+                        <option value="dinner">ערב</option>
+                        <option value="snack">קינוחים</option>
+                      </select>
+                    </div>
 
               <div className="field">
                 <label>זמן מקסימלי (דקות)</label>
@@ -452,6 +434,26 @@ function App() {
             currentUser={user}
           />
         </section>
+        
+        <section className="sidebar">
+          <RecipeSearchList
+            allRecipes={recipes}
+            recipes={getFilteredRecipes()}
+            selectedId={selectedRecipe?.id}
+            onSelect={setSelectedRecipe}
+            searchQuery={searchQuery}
+            onSearchChange={setSearchQuery}
+            filterMealType={filterMealType}
+            onMealTypeChange={setFilterMealType}
+            filterMaxTime={filterMaxTime}
+            onMaxTimeChange={setFilterMaxTime}
+            filterTags={filterTags}
+            onTagsChange={setFilterTags}
+            filterOwner={filterOwner}
+            onOwnerChange={setFilterOwner}
+          />
+        </section>
+      </section>
           </>
         )}
       </main>
diff --git a/frontend/src/components/NotificationBell.jsx b/frontend/src/components/NotificationBell.jsx
index 7ab893f..493f164 100644
--- a/frontend/src/components/NotificationBell.jsx
+++ b/frontend/src/components/NotificationBell.jsx
@@ -221,13 +221,15 @@ function NotificationBell({ onShowToast }) {
           width: 420px;
           max-height: 550px;
           background: var(--panel-bg);
+          backdrop-filter: blur(10px);
           border: 1px solid var(--border-color);
           border-radius: 16px;
-          box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
           z-index: 1000;
           display: flex;
           flex-direction: column;
           overflow: hidden;
+          opacity: 0.98;
         }
 
         .notification-header {
diff --git a/frontend/src/components/PinnedGroceryLists.jsx b/frontend/src/components/PinnedGroceryLists.jsx
index 9ca5c29..c6abf14 100644
--- a/frontend/src/components/PinnedGroceryLists.jsx
+++ b/frontend/src/components/PinnedGroceryLists.jsx
@@ -55,7 +55,7 @@ function PinnedGroceryLists({ onShowToast }) {
           <h3 className="note-title">{list.name}</h3>
           <ul className="note-items">
             {list.items.length === 0 ? (
-              <li className="empty-note">רשימה ריקה</li>
+              <li className="empty-note">הרשימה ריקה</li>
             ) : (
               list.items.map((item, index) => {
                 const isChecked = item.startsWith("✓ ");
diff --git a/frontend/src/groceryApi.js b/frontend/src/groceryApi.js
index 585ed67..4fbcad5 100644
--- a/frontend/src/groceryApi.js
+++ b/frontend/src/groceryApi.js
@@ -71,10 +71,7 @@ export const deleteGroceryList = async (id) => {
 export const togglePinGroceryList = async (id) => {
   const res = await fetch(`${API_URL}/grocery-lists/${id}/pin`, {
     method: "PATCH",
-    headers: {
-      ...getAuthHeaders(),
-      "Content-Type": "application/json",
-    },
+    headers: getAuthHeaders(),
   });
   if (!res.ok) {
     let errorMessage = "Failed to toggle pin status";