diff --git a/frontend/components/About.tsx b/frontend/components/About.tsx
index 0d3b5d5..00c8bac 100644
--- a/frontend/components/About.tsx
+++ b/frontend/components/About.tsx
@@ -27,8 +27,8 @@ const About: React.FC<AboutProps> = ({ isDarkMode = false }) => {
     }, []);
 
     return (
-        <div className="flex justify-center px-4 lg:px-2">
-            <div className="w-full max-w-5xl">
+        <div className="w-full px-2 sm:px-4 lg:px-6 pt-4 pb-8">
+            <div className="w-full">
                 <div className="flex items-center mb-4">
                     <h2 className="text-2xl font-light">
                         {t('about.title', 'About')}
diff --git a/frontend/components/Areas.tsx b/frontend/components/Areas.tsx
index 134c362..b776bdb 100644
--- a/frontend/components/Areas.tsx
+++ b/frontend/components/Areas.tsx
@@ -158,8 +158,8 @@ const Areas: React.FC = () => {
     };
 
     return (
-        <div className="flex justify-center px-4 lg:px-2">
-            <div className="w-full max-w-5xl">
+        <div className="w-full px-2 sm:px-4 lg:px-6 pt-4 pb-8">
+            <div className="w-full">
                 {/* Areas Header */}
                 <div className="flex items-center mb-8">
                     <h2 className="text-2xl font-light">{t('areas.title')}</h2>
diff --git a/frontend/components/Inbox/InboxItems.tsx b/frontend/components/Inbox/InboxItems.tsx
index 2c0af82..b2c3170 100644
--- a/frontend/components/Inbox/InboxItems.tsx
+++ b/frontend/components/Inbox/InboxItems.tsx
@@ -455,8 +455,8 @@ const InboxItems: React.FC = () => {
     }
 
     return (
-        <div className="flex justify-center px-4 lg:px-2">
-            <div className="w-full max-w-5xl">
+        <div className="w-full px-2 sm:px-4 lg:px-6 pt-4 pb-8">
+            <div className="w-full max-w-5xl mx-auto">
                 {/* Title row with info button on the right */}
                 <div className="flex items-center mb-8 justify-between">
                     <div className="flex items-center">
diff --git a/frontend/components/Notes.tsx b/frontend/components/Notes.tsx
index abfc8f8..b743b05 100644
--- a/frontend/components/Notes.tsx
+++ b/frontend/components/Notes.tsx
@@ -6,7 +6,6 @@ import {
     TrashIcon,
     FolderIcon,
     TagIcon as TagIconOutline,
-    FunnelIcon,
     ClockIcon,
     EllipsisVerticalIcon,
     XMarkIcon,
@@ -18,6 +17,7 @@ import NoteModal from './Note/NoteModal';
 import ConfirmDialog from './Shared/ConfirmDialog';
 import DiscardChangesDialog from './Shared/DiscardChangesDialog';
 import MarkdownRenderer from './Shared/MarkdownRenderer';
+import IconSortDropdown from './Shared/IconSortDropdown';
 import TagInput from './Tag/TagInput';
 import { Note } from '../entities/Note';
 import { createNote, updateNote } from '../utils/notesService';
@@ -75,7 +75,6 @@ const Notes: React.FC = () => {
     const [showProjectDropdown, setShowProjectDropdown] = useState(false);
     const [showTagsInput, setShowTagsInput] = useState(false);
     const [showDiscardDialog, setShowDiscardDialog] = useState(false);
-    const [showSortDropdown, setShowSortDropdown] = useState(false);
     const [showNoteOptionsDropdown, setShowNoteOptionsDropdown] =
         useState(false);
     const hasAutoSelected = useRef(false);
@@ -86,7 +85,6 @@ const Notes: React.FC = () => {
         ENABLE_NOTE_COLOR && previewNote ? previewNote.color : undefined;
     const activeNoteColor =
         (isEditing && editingNoteColor) || previewNoteColor || undefined;
-    const sortDropdownRef = useRef<HTMLDivElement>(null);
     const noteOptionsDropdownRef = useRef<HTMLDivElement>(null);
 
     // Get notes and projects from global store
@@ -412,15 +410,9 @@ const Notes: React.FC = () => {
         }
     }, [sortedNotes, previewNote, uid]);
 
-    // Handle clicking outside sort dropdown to close it
+    // Handle clicking outside note options dropdown to close it
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
-            if (
-                sortDropdownRef.current &&
-                !sortDropdownRef.current.contains(event.target as Node)
-            ) {
-                setShowSortDropdown(false);
-            }
             if (
                 noteOptionsDropdownRef.current &&
                 !noteOptionsDropdownRef.current.contains(event.target as Node)
@@ -483,49 +475,17 @@ const Notes: React.FC = () => {
                             </h3>
                             <div className="flex items-center gap-2">
                                 {/* Sort Filter Dropdown */}
-                                <div className="relative" ref={sortDropdownRef}>
-                                    <button
-                                        onClick={() =>
-                                            setShowSortDropdown(
-                                                !showSortDropdown
-                                            )
-                                        }
-                                        className="p-1 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors"
-                                        aria-label="Sort notes"
-                                    >
-                                        <FunnelIcon className="h-5 w-5" />
-                                    </button>
-                                    {showSortDropdown && (
-                                        <div className="absolute right-0 mt-1 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-50">
-                                            <div className="px-3 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">
-                                                Sort by
-                                            </div>
-                                            <div className="py-1">
-                                                {sortOptions.map((option) => (
-                                                    <button
-                                                        key={option.value}
-                                                        onClick={() => {
-                                                            handleSortChange(
-                                                                option.value
-                                                            );
-                                                            setShowSortDropdown(
-                                                                false
-                                                            );
-                                                        }}
-                                                        className={`w-full text-left px-3 py-2 text-sm transition-colors ${
-                                                            orderBy ===
-                                                            option.value
-                                                                ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
-                                                                : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
-                                                        }`}
-                                                    >
-                                                        {option.label}
-                                                    </button>
-                                                ))}
-                                            </div>
-                                        </div>
+                                <IconSortDropdown
+                                    options={sortOptions}
+                                    value={orderBy}
+                                    onChange={handleSortChange}
+                                    ariaLabel={t(
+                                        'notes.sortNotes',
+                                        'Sort notes'
                                     )}
-                                </div>
+                                    title={t('notes.sortNotes', 'Sort notes')}
+                                    dropdownLabel={t('notes.sortBy', 'Sort by')}
+                                />
                                 <button
                                     onClick={handleNewNote}
                                     className="p-1 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors"
diff --git a/frontend/components/Project/ProjectDetails.tsx b/frontend/components/Project/ProjectDetails.tsx
index 1a84b83..62d41e5 100644
--- a/frontend/components/Project/ProjectDetails.tsx
+++ b/frontend/components/Project/ProjectDetails.tsx
@@ -45,7 +45,8 @@ import { createNote } from '../../utils/notesService';
 import { isAuthError } from '../../utils/authUtils';
 import { getAutoSuggestNextActionsEnabled } from '../../utils/profileService';
 import AutoSuggestNextActionBox from './AutoSuggestNextActionBox';
-import SortFilterButton, { SortOption } from '../Shared/SortFilterButton';
+import { SortOption } from '../Shared/SortFilterButton';
+import IconSortDropdown from '../Shared/IconSortDropdown';
 import LoadingSpinner from '../Shared/LoadingSpinner';
 import { usePersistedModal } from '../../hooks/usePersistedModal';
 import BannerBadge from '../Shared/BannerBadge';
@@ -525,6 +526,40 @@ const ProjectDetails: React.FC = () => {
         saveProjectPreferences(showCompleted, newOrderBy);
     };
 
+    const renderShowCompletedToggle = () => (
+        <button
+            type="button"
+            onClick={() => handleShowCompletedChange(!showCompleted)}
+            className="w-full flex items-center justify-between text-sm text-gray-700 dark:text-gray-300"
+            aria-pressed={showCompleted}
+            aria-label={
+                showCompleted
+                    ? t('projects.hideCompleted', 'Hide completed tasks')
+                    : t('projects.showCompleted', 'Show completed tasks')
+            }
+            title={
+                showCompleted
+                    ? t('projects.hideCompleted', 'Hide completed tasks')
+                    : t('projects.showCompleted', 'Show completed tasks')
+            }
+        >
+            <span>{t('common.showCompleted', 'Show completed')}</span>
+            <span
+                className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
+                    showCompleted
+                        ? 'bg-blue-600'
+                        : 'bg-gray-200 dark:bg-gray-600'
+                }`}
+            >
+                <span
+                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                        showCompleted ? 'translate-x-4' : 'translate-x-0.5'
+                    }`}
+                />
+            </span>
+        </button>
+    );
+
     const handleDeleteProject = async () => {
         if (!project?.uid) {
             return;
@@ -1077,39 +1112,23 @@ const ProjectDetails: React.FC = () => {
                                     >
                                         <MagnifyingGlassIcon className="h-4 w-4 text-gray-600 dark:text-gray-200" />
                                     </button>
-                                    {/* Show Completed Toggle */}
-                                    <div className="flex items-center gap-2">
-                                        <span className="text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap">
-                                            Show completed
-                                        </span>
-                                        <button
-                                            onClick={() =>
-                                                handleShowCompletedChange(
-                                                    !showCompleted
-                                                )
-                                            }
-                                            className={`relative inline-flex h-4 w-7 items-center rounded-full transition-colors ${
-                                                showCompleted
-                                                    ? 'bg-blue-600'
-                                                    : 'bg-gray-200 dark:bg-gray-600'
-                                            }`}
-                                        >
-                                            <span
-                                                className={`inline-block h-3 w-3 transform rounded-full bg-white transition-transform ${
-                                                    showCompleted
-                                                        ? 'translate-x-3.5'
-                                                        : 'translate-x-0.5'
-                                                }`}
-                                            />
-                                        </button>
-                                    </div>
-
-                                    {/* Sort Filter */}
-                                    <SortFilterButton
+                                    <IconSortDropdown
                                         options={sortOptions}
                                         value={orderBy}
                                         onChange={handleSortChange}
-                                        size="mobile"
+                                        ariaLabel={t(
+                                            'projects.sortTasks',
+                                            'Sort tasks'
+                                        )}
+                                        title={t(
+                                            'projects.sortTasks',
+                                            'Sort tasks'
+                                        )}
+                                        dropdownLabel={t(
+                                            'tasks.sortBy',
+                                            'Sort by'
+                                        )}
+                                        extraContent={renderShowCompletedToggle()}
                                     />
                                 </div>
                             )}
@@ -1179,39 +1198,20 @@ const ProjectDetails: React.FC = () => {
                                 >
                                     <MagnifyingGlassIcon className="h-5 w-5 text-gray-600 dark:text-gray-200" />
                                 </button>
-                                {/* Show Completed Toggle */}
-                                <div className="flex items-center gap-2">
-                                    <span className="text-sm text-gray-600 dark:text-gray-400">
-                                        Show completed
-                                    </span>
-                                    <button
-                                        onClick={() =>
-                                            handleShowCompletedChange(
-                                                !showCompleted
-                                            )
-                                        }
-                                        className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
-                                            showCompleted
-                                                ? 'bg-blue-600'
-                                                : 'bg-gray-200 dark:bg-gray-600'
-                                        }`}
-                                    >
-                                        <span
-                                            className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                                                showCompleted
-                                                    ? 'translate-x-4'
-                                                    : 'translate-x-0.5'
-                                            }`}
-                                        />
-                                    </button>
-                                </div>
-
-                                {/* Sort Filter */}
-                                <SortFilterButton
+                                <IconSortDropdown
                                     options={sortOptions}
                                     value={orderBy}
                                     onChange={handleSortChange}
-                                    size="desktop"
+                                    ariaLabel={t(
+                                        'projects.sortTasks',
+                                        'Sort tasks'
+                                    )}
+                                    title={t(
+                                        'projects.sortTasks',
+                                        'Sort tasks'
+                                    )}
+                                    dropdownLabel={t('tasks.sortBy', 'Sort by')}
+                                    extraContent={renderShowCompletedToggle()}
                                 />
                             </div>
                         )}
diff --git a/frontend/components/Projects.tsx b/frontend/components/Projects.tsx
index 081a65a..572919a 100644
--- a/frontend/components/Projects.tsx
+++ b/frontend/components/Projects.tsx
@@ -370,8 +370,8 @@ const Projects: React.FC = () => {
     }
 
     return (
-        <div className="flex justify-center px-4 lg:px-2">
-            <div className="w-full max-w-5xl">
+        <div className="w-full px-2 sm:px-4 lg:px-6 pt-4 pb-8">
+            <div className="w-full">
                 <div className="flex items-center mb-8">
                     <h2 className="text-2xl font-light">
                         {t('projects.title')}
diff --git a/frontend/components/Shared/IconSortDropdown.tsx b/frontend/components/Shared/IconSortDropdown.tsx
new file mode 100644
index 0000000..c260b0d
--- /dev/null
+++ b/frontend/components/Shared/IconSortDropdown.tsx
@@ -0,0 +1,106 @@
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import { FunnelIcon, CheckIcon } from '@heroicons/react/24/outline';
+import { SortOption } from './SortFilterButton';
+
+interface IconSortDropdownProps {
+    options: SortOption[];
+    value: string;
+    onChange: (value: string) => void;
+    ariaLabel?: string;
+    title?: string;
+    className?: string;
+    buttonClassName?: string;
+    dropdownLabel?: string;
+    align?: 'left' | 'right';
+    extraContent?: ReactNode;
+}
+
+const IconSortDropdown: React.FC<IconSortDropdownProps> = ({
+    options,
+    value,
+    onChange,
+    ariaLabel = 'Sort items',
+    title = 'Sort items',
+    className = '',
+    buttonClassName = '',
+    dropdownLabel = 'Sort by',
+    align = 'right',
+    extraContent,
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+
+        const handleClickOutside = (event: MouseEvent) => {
+            if (
+                dropdownRef.current &&
+                !dropdownRef.current.contains(event.target as Node)
+            ) {
+                setIsOpen(false);
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+        return () =>
+            document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen]);
+
+    return (
+        <div className={`relative ${className}`} ref={dropdownRef}>
+            <button
+                type="button"
+                onClick={() => setIsOpen((prev) => !prev)}
+                className={`p-1 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors ${buttonClassName}`}
+                aria-label={ariaLabel}
+                title={title}
+            >
+                <FunnelIcon className="h-5 w-5" />
+            </button>
+            {isOpen && (
+                <div
+                    className={`absolute ${align === 'left' ? 'left-0' : 'right-0'} mt-1 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-50`}
+                >
+                    {dropdownLabel && (
+                        <div className="px-3 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">
+                            {dropdownLabel}
+                        </div>
+                    )}
+                    <div className="py-1">
+                        {options.map((option) => (
+                            <button
+                                key={option.value}
+                                onClick={() => {
+                                    onChange(option.value);
+                                    setIsOpen(false);
+                                }}
+                                className={`w-full text-left px-3 py-2 text-sm transition-colors ${
+                                    value === option.value
+                                        ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
+                                        : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+                                }`}
+                            >
+                                <span className="flex items-center justify-between">
+                                    <span>{option.label}</span>
+                                    {value === option.value && (
+                                        <CheckIcon className="h-4 w-4" />
+                                    )}
+                                </span>
+                            </button>
+                        ))}
+                    </div>
+                    {extraContent && (
+                        <div className="border-t border-gray-200 dark:border-gray-700 px-3 py-2">
+                            {extraContent}
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default IconSortDropdown;
diff --git a/frontend/components/Shared/ViewOptionsBar.tsx b/frontend/components/Shared/ViewOptionsBar.tsx
new file mode 100644
index 0000000..0f88b20
--- /dev/null
+++ b/frontend/components/Shared/ViewOptionsBar.tsx
@@ -0,0 +1,246 @@
+import React, { useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+    MagnifyingGlassIcon,
+    InformationCircleIcon,
+    FunnelIcon,
+} from '@heroicons/react/24/outline';
+import { SortOption } from './SortFilterButton';
+
+export interface ViewOptionsBarProps {
+    // Info/Description
+    showInfo?: boolean;
+    onToggleInfo?: () => void;
+    isInfoExpanded?: boolean;
+
+    // Search
+    showSearch?: boolean;
+    onToggleSearch?: () => void;
+    isSearchExpanded?: boolean;
+
+    // Show Completed Toggle
+    showCompletedToggle?: boolean;
+    showCompleted?: boolean;
+    onToggleCompleted?: () => void;
+    completedLabel?: string;
+
+    // Sort/Filter Dropdown
+    showSort?: boolean;
+    sortOptions?: SortOption[];
+    sortValue?: string;
+    onSortChange?: (value: string) => void;
+    sortLabel?: string;
+
+    // Custom buttons/elements to add
+    customElements?: React.ReactNode;
+
+    // Styling
+    className?: string;
+    position?: 'fixed' | 'relative'; // For upcoming view in Tasks
+    fixedPosition?: string; // Custom position classes for fixed positioning
+}
+
+const ViewOptionsBar: React.FC<ViewOptionsBarProps> = ({
+    showInfo = false,
+    onToggleInfo,
+    isInfoExpanded = false,
+    showSearch = false,
+    onToggleSearch,
+    isSearchExpanded = false,
+    showCompletedToggle = false,
+    showCompleted = false,
+    onToggleCompleted,
+    completedLabel,
+    showSort = false,
+    sortOptions = [],
+    sortValue = '',
+    onSortChange,
+    sortLabel,
+    customElements,
+    className = '',
+    position = 'relative',
+    fixedPosition = '',
+}) => {
+    const { t } = useTranslation();
+    const [isSortDropdownOpen, setIsSortDropdownOpen] = React.useState(false);
+    const sortDropdownRef = useRef<HTMLDivElement>(null);
+
+    // Close sort dropdown when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (
+                sortDropdownRef.current &&
+                !sortDropdownRef.current.contains(event.target as Node)
+            ) {
+                setIsSortDropdownOpen(false);
+            }
+        };
+
+        if (isSortDropdownOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }
+    }, [isSortDropdownOpen]);
+
+    const handleSortSelect = (value: string) => {
+        if (onSortChange) {
+            onSortChange(value);
+        }
+        setIsSortDropdownOpen(false);
+    };
+
+    const containerClasses =
+        position === 'fixed'
+            ? `${fixedPosition} z-20 ${className}`
+            : `flex items-center gap-2 ${className}`;
+
+    return (
+        <div className={containerClasses}>
+            {/* Info Button */}
+            {showInfo && onToggleInfo && (
+                <button
+                    onClick={onToggleInfo}
+                    className={`flex items-center hover:bg-blue-100/50 dark:hover:bg-blue-800/20 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset rounded-lg${isInfoExpanded ? ' bg-blue-50/70 dark:bg-blue-900/20' : ''} p-2`}
+                    aria-expanded={isInfoExpanded}
+                    aria-label={
+                        isInfoExpanded
+                            ? t('common.hideInfo', 'Hide info')
+                            : t('common.showInfo', 'Show info')
+                    }
+                    title={
+                        isInfoExpanded
+                            ? t('common.hideInfo', 'Hide info')
+                            : t('common.aboutView', 'About this view')
+                    }
+                >
+                    <InformationCircleIcon className="h-5 w-5 text-blue-500" />
+                    <span className="sr-only">
+                        {isInfoExpanded
+                            ? t('common.hideInfo', 'Hide info')
+                            : t('common.aboutView', 'About this view')}
+                    </span>
+                </button>
+            )}
+
+            {/* Search Button */}
+            {showSearch && onToggleSearch && (
+                <button
+                    onClick={onToggleSearch}
+                    className={`flex items-center transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset rounded-lg p-2 ${
+                        isSearchExpanded
+                            ? 'bg-blue-50/70 dark:bg-blue-900/20'
+                            : 'bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700'
+                    }`}
+                    aria-expanded={isSearchExpanded}
+                    aria-label={
+                        isSearchExpanded
+                            ? t('common.hideSearch', 'Hide search')
+                            : t('common.showSearch', 'Show search')
+                    }
+                    title={
+                        isSearchExpanded
+                            ? t('common.hideSearch', 'Hide search')
+                            : t('common.search', 'Search')
+                    }
+                >
+                    <MagnifyingGlassIcon className="h-5 w-5 text-gray-600 dark:text-gray-200" />
+                    <span className="sr-only">
+                        {isSearchExpanded
+                            ? t('common.hideSearch', 'Hide search')
+                            : t('common.search', 'Search')}
+                    </span>
+                </button>
+            )}
+
+            {/* Show Completed Toggle */}
+            {showCompletedToggle && onToggleCompleted && (
+                <div className="flex items-center gap-2">
+                    <span className="text-sm text-gray-600 dark:text-gray-400">
+                        {completedLabel ||
+                            t('common.showCompleted', 'Show completed')}
+                    </span>
+                    <button
+                        onClick={onToggleCompleted}
+                        className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
+                            showCompleted
+                                ? 'bg-blue-600'
+                                : 'bg-gray-200 dark:bg-gray-600'
+                        }`}
+                        aria-pressed={showCompleted}
+                        aria-label={
+                            showCompleted
+                                ? t('common.hideCompleted', 'Hide completed')
+                                : t('common.showCompleted', 'Show completed')
+                        }
+                        title={
+                            showCompleted
+                                ? t('common.hideCompleted', 'Hide completed')
+                                : t('common.showCompleted', 'Show completed')
+                        }
+                    >
+                        <span
+                            className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                                showCompleted
+                                    ? 'translate-x-4'
+                                    : 'translate-x-0.5'
+                            }`}
+                        />
+                    </button>
+                </div>
+            )}
+
+            {/* Sort/Filter Dropdown */}
+            {showSort && sortOptions.length > 0 && onSortChange && (
+                <div className="relative" ref={sortDropdownRef}>
+                    <button
+                        onClick={() =>
+                            setIsSortDropdownOpen(!isSortDropdownOpen)
+                        }
+                        className="p-2 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none transition-colors rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
+                        aria-label={
+                            sortLabel ||
+                            t('common.sortFilter', 'Sort and filter')
+                        }
+                        title={
+                            sortLabel ||
+                            t('common.sortFilter', 'Sort and filter')
+                        }
+                    >
+                        <FunnelIcon className="h-5 w-5" />
+                    </button>
+                    {isSortDropdownOpen && (
+                        <div className="absolute right-0 mt-1 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-50">
+                            <div className="px-3 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">
+                                {sortLabel || t('common.sortBy', 'Sort by')}
+                            </div>
+                            <div className="py-1">
+                                {sortOptions.map((option) => (
+                                    <button
+                                        key={option.value}
+                                        onClick={() =>
+                                            handleSortSelect(option.value)
+                                        }
+                                        className={`w-full text-left px-3 py-2 text-sm transition-colors ${
+                                            sortValue === option.value
+                                                ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
+                                                : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+                                        }`}
+                                    >
+                                        {option.label}
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {/* Custom Elements */}
+            {customElements}
+        </div>
+    );
+};
+
+export default ViewOptionsBar;
diff --git a/frontend/components/Tags.tsx b/frontend/components/Tags.tsx
index e6feee5..277d969 100644
--- a/frontend/components/Tags.tsx
+++ b/frontend/components/Tags.tsx
@@ -124,8 +124,8 @@ const Tags: React.FC = () => {
     }
 
     return (
-        <div className="flex justify-center px-4 lg:px-2">
-            <div className="w-full max-w-5xl">
+        <div className="w-full px-2 sm:px-4 lg:px-6 pt-4 pb-8">
+            <div className="w-full">
                 {/* Tags Header */}
                 <div className="flex items-center mb-8">
                     <h2 className="text-2xl font-light">
diff --git a/frontend/components/Task/TasksToday.tsx b/frontend/components/Task/TasksToday.tsx
index a2052de..85d191c 100644
--- a/frontend/components/Task/TasksToday.tsx
+++ b/frontend/components/Task/TasksToday.tsx
@@ -790,8 +790,8 @@ const TasksToday: React.FC = () => {
     }
 
     return (
-        <div className="flex justify-center px-4 lg:px-2">
-            <div className="w-full max-w-5xl">
+        <div className="w-full px-2 sm:px-4 lg:px-6 pt-4 pb-8">
+            <div className="w-full max-w-5xl mx-auto">
                 <div className="flex flex-col">
                     {/* Today Header with Icons on the Right */}
                     <div className="mb-4">
diff --git a/frontend/components/Tasks.tsx b/frontend/components/Tasks.tsx
index 0f8d325..c958612 100644
--- a/frontend/components/Tasks.tsx
+++ b/frontend/components/Tasks.tsx
@@ -5,7 +5,6 @@ import { useSidebar } from '../contexts/SidebarContext';
 import TaskList from './Task/TaskList';
 import GroupedTaskList from './Task/GroupedTaskList';
 import NewTask from './Task/NewTask';
-import SortFilter from './Shared/SortFilter';
 import { Task } from '../entities/Task';
 import { getTitleAndIcon } from './Task/getTitleAndIcon';
 import { getDescription } from './Task/getDescription';
@@ -17,14 +16,12 @@ import {
 import { useStore } from '../store/useStore';
 import { useToast } from './Shared/ToastContext';
 import { SortOption } from './Shared/SortFilterButton';
+import IconSortDropdown from './Shared/IconSortDropdown';
+import { TagIcon, XMarkIcon } from '@heroicons/react/24/solid';
 import {
-    TagIcon,
-    XMarkIcon,
-    MagnifyingGlassIcon,
-} from '@heroicons/react/24/solid';
-import {
-    InformationCircleIcon,
     QueueListIcon,
+    InformationCircleIcon,
+    MagnifyingGlassIcon,
 } from '@heroicons/react/24/outline';
 import { getApiPath } from '../config/paths';
 
@@ -480,23 +477,17 @@ const Tasks: React.FC = () => {
     };
 
     return (
-        <div
-            className={
-                isUpcomingView
-                    ? 'w-full px-2 sm:px-4 lg:px-6'
-                    : 'flex justify-center px-4 lg:px-2'
-            }
-        >
-            <div
-                className={`w-full ${isUpcomingView ? 'max-w-none' : 'max-w-5xl'}`}
-            >
+        <div className="w-full px-2 sm:px-4 lg:px-6 pt-4 pb-8">
+            <div className="w-full max-w-5xl mx-auto">
                 {/* Title row with info button and filters dropdown on the right */}
                 <div
-                    className={`flex flex-col sm:flex-row items-start sm:items-center justify-between ${isUpcomingView ? 'mb-4 sm:mb-6' : 'mb-8'}`}
+                    className={`flex items-center justify-between gap-2 min-w-0 ${
+                        isUpcomingView ? 'mb-4 sm:mb-6' : 'mb-8'
+                    }`}
                 >
-                    <div className="flex items-center mb-2 sm:mb-0">
+                    <div className="flex items-center flex-1 min-w-0 gap-2">
                         <h2
-                            className={`${isUpcomingView ? 'text-lg sm:text-xl' : 'text-2xl'} font-light`}
+                            className={`${isUpcomingView ? 'text-lg sm:text-xl' : 'text-2xl'} font-light truncate`}
                         >
                             {title}
                         </h2>
@@ -517,7 +508,11 @@ const Tasks: React.FC = () => {
                     </div>
                     {/* Info expand/collapse button, search button, show completed toggle, and sort dropdown */}
                     <div
-                        className={`flex items-center gap-2 w-full sm:w-auto justify-end mt-2 sm:mt-0 ${isUpcomingView ? 'md:fixed md:right-4 md:top-20 md:px-3 md:py-2 md:z-20' : 'flex-wrap'}`}
+                        className={`flex items-center gap-2 flex-shrink-0 ${
+                            isUpcomingView
+                                ? 'md:fixed md:right-4 md:top-20 md:px-3 md:py-2 md:z-20'
+                                : ''
+                        }`}
                     >
                         <button
                             onClick={() => setIsInfoExpanded((v) => !v)}
@@ -563,42 +558,65 @@ const Tasks: React.FC = () => {
                                 </span>
                             </button>
                         )}
-                        <div className="flex items-center gap-2">
-                            <span className="text-sm text-gray-600 dark:text-gray-400">
-                                Show completed
-                            </span>
-                            <button
-                                onClick={() => setShowCompleted((v) => !v)}
-                                className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
-                                    showCompleted
-                                        ? 'bg-blue-600'
-                                        : 'bg-gray-200 dark:bg-gray-600'
-                                }`}
-                                aria-pressed={showCompleted}
-                                aria-label={
-                                    showCompleted
-                                        ? 'Hide completed tasks'
-                                        : 'Show completed tasks'
-                                }
-                                title={
-                                    showCompleted
-                                        ? 'Hide completed tasks'
-                                        : 'Show completed tasks'
-                                }
-                            >
-                                <span
-                                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                        <IconSortDropdown
+                            options={sortOptions}
+                            value={orderBy}
+                            onChange={handleSortChange}
+                            ariaLabel={t('tasks.sortTasks', 'Sort tasks')}
+                            title={t('tasks.sortTasks', 'Sort tasks')}
+                            dropdownLabel={t('tasks.sortBy', 'Sort by')}
+                            extraContent={
+                                <button
+                                    type="button"
+                                    onClick={() => setShowCompleted((v) => !v)}
+                                    className="w-full flex items-center justify-between text-sm text-gray-700 dark:text-gray-300"
+                                    aria-pressed={showCompleted}
+                                    aria-label={
                                         showCompleted
-                                            ? 'translate-x-4'
-                                            : 'translate-x-0.5'
-                                    }`}
-                                />
-                            </button>
-                        </div>
-                        <SortFilter
-                            sortOptions={sortOptions}
-                            sortValue={orderBy}
-                            onSortChange={handleSortChange}
+                                            ? t(
+                                                  'tasks.hideCompleted',
+                                                  'Hide completed tasks'
+                                              )
+                                            : t(
+                                                  'tasks.showCompleted',
+                                                  'Show completed tasks'
+                                              )
+                                    }
+                                    title={
+                                        showCompleted
+                                            ? t(
+                                                  'tasks.hideCompleted',
+                                                  'Hide completed tasks'
+                                              )
+                                            : t(
+                                                  'tasks.showCompleted',
+                                                  'Show completed tasks'
+                                              )
+                                    }
+                                >
+                                    <span>
+                                        {t(
+                                            'tasks.showCompleted',
+                                            'Show completed'
+                                        )}
+                                    </span>
+                                    <span
+                                        className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
+                                            showCompleted
+                                                ? 'bg-blue-600'
+                                                : 'bg-gray-200 dark:bg-gray-600'
+                                        }`}
+                                    >
+                                        <span
+                                            className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                                                showCompleted
+                                                    ? 'translate-x-4'
+                                                    : 'translate-x-0.5'
+                                            }`}
+                                        />
+                                    </span>
+                                </button>
+                            }
                         />
                     </div>
                 </div>
diff --git a/frontend/components/ViewDetail.tsx b/frontend/components/ViewDetail.tsx
index 109b484..ed00178 100644
--- a/frontend/components/ViewDetail.tsx
+++ b/frontend/components/ViewDetail.tsx
@@ -19,7 +19,8 @@ import ProjectItem from './Project/ProjectItem';
 import ConfirmDialog from './Shared/ConfirmDialog';
 import { searchUniversal } from '../utils/searchService';
 import { getApiPath } from '../config/paths';
-import SortFilterButton, { SortOption } from './Shared/SortFilterButton';
+import { SortOption } from './Shared/SortFilterButton';
+import IconSortDropdown from './Shared/IconSortDropdown';
 
 interface View {
     id: number;
@@ -473,11 +474,11 @@ const ViewDetail: React.FC = () => {
     }
 
     return (
-        <div className="flex justify-center px-4 lg:px-2">
-            <div className="w-full max-w-5xl">
+        <div className="w-full px-2 sm:px-4 lg:px-6 pt-4 pb-8">
+            <div className="w-full max-w-5xl mx-auto">
                 {/* Header */}
-                <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-8">
-                    <div className="flex items-center flex-1 mb-2 sm:mb-0">
+                <div className="flex items-center justify-between gap-2 flex-wrap sm:flex-nowrap mb-8">
+                    <div className="flex items-center flex-1 min-w-0 gap-2">
                         {isEditingName ? (
                             <input
                                 ref={titleInputRef}
@@ -497,13 +498,13 @@ const ViewDetail: React.FC = () => {
                         ) : (
                             <h2
                                 onClick={handleEditName}
-                                className="text-2xl font-light text-gray-900 dark:text-white cursor-pointer hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                                className="text-2xl font-light text-gray-900 dark:text-white cursor-pointer hover:text-blue-600 dark:hover:text-blue-400 transition-colors truncate"
                             >
                                 {view.name}
                             </h2>
                         )}
                     </div>
-                    <div className="flex items-center gap-2 w-full sm:w-auto justify-end">
+                    <div className="flex items-center gap-1.5 flex-shrink-0">
                         <button
                             onClick={() => setIsSearchExpanded((v) => !v)}
                             className={`flex items-center transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset rounded-lg p-2 ${
@@ -525,38 +526,65 @@ const ViewDetail: React.FC = () => {
                         >
                             <MagnifyingGlassIcon className="h-5 w-5 text-gray-600 dark:text-gray-200" />
                         </button>
-                        <div className="flex items-center gap-2">
-                            <span className="text-sm text-gray-600 dark:text-gray-400">
-                                Show completed
-                            </span>
-                            <button
-                                onClick={() => setShowCompleted((v) => !v)}
-                                className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
-                                    showCompleted
-                                        ? 'bg-blue-600'
-                                        : 'bg-gray-200 dark:bg-gray-600'
-                                }`}
-                                aria-pressed={showCompleted}
-                                aria-label={
-                                    showCompleted
-                                        ? 'Hide completed tasks'
-                                        : 'Show completed tasks'
-                                }
-                            >
-                                <span
-                                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                                        showCompleted
-                                            ? 'translate-x-4'
-                                            : 'translate-x-0.5'
-                                    }`}
-                                />
-                            </button>
-                        </div>
-                        <SortFilterButton
+                        <IconSortDropdown
                             options={sortOptions}
                             value={orderBy}
                             onChange={setOrderBy}
-                            size="desktop"
+                            ariaLabel={t('views.sortTasks', 'Sort tasks')}
+                            title={t('views.sortTasks', 'Sort tasks')}
+                            dropdownLabel={t('tasks.sortBy', 'Sort by')}
+                            extraContent={
+                                <button
+                                    type="button"
+                                    onClick={() => setShowCompleted((v) => !v)}
+                                    className="w-full flex items-center justify-between text-sm text-gray-700 dark:text-gray-300"
+                                    aria-pressed={showCompleted}
+                                    aria-label={
+                                        showCompleted
+                                            ? t(
+                                                  'views.hideCompleted',
+                                                  'Hide completed tasks'
+                                              )
+                                            : t(
+                                                  'views.showCompleted',
+                                                  'Show completed tasks'
+                                              )
+                                    }
+                                    title={
+                                        showCompleted
+                                            ? t(
+                                                  'views.hideCompleted',
+                                                  'Hide completed tasks'
+                                              )
+                                            : t(
+                                                  'views.showCompleted',
+                                                  'Show completed tasks'
+                                              )
+                                    }
+                                >
+                                    <span>
+                                        {t(
+                                            'common.showCompleted',
+                                            'Show completed'
+                                        )}
+                                    </span>
+                                    <span
+                                        className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
+                                            showCompleted
+                                                ? 'bg-blue-600'
+                                                : 'bg-gray-200 dark:bg-gray-600'
+                                        }`}
+                                    >
+                                        <span
+                                            className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                                                showCompleted
+                                                    ? 'translate-x-4'
+                                                    : 'translate-x-0.5'
+                                            }`}
+                                        />
+                                    </span>
+                                </button>
+                            }
                         />
                         <div className="relative" ref={criteriaDropdownRef}>
                             <button
diff --git a/frontend/components/Views.tsx b/frontend/components/Views.tsx
index 955fc70..5900c58 100644
--- a/frontend/components/Views.tsx
+++ b/frontend/components/Views.tsx
@@ -122,8 +122,8 @@ const Views: React.FC = () => {
     }
 
     return (
-        <div className="flex justify-center px-4 lg:px-2">
-            <div className="w-full max-w-5xl">
+        <div className="w-full px-2 sm:px-4 lg:px-6 pt-4 pb-8">
+            <div className="w-full">
                 {/* Views Header */}
                 <div className="flex items-center mb-8">
                     <h2 className="text-2xl font-light">{t('views.title')}</h2>