diff --git a/my-app/src/pages/App.jsx b/my-app/src/pages/App.jsx
index 3cb7a83..a6d0ab6 100644
--- a/my-app/src/pages/App.jsx
+++ b/my-app/src/pages/App.jsx
@@ -49,14 +49,13 @@ function App({ model }) {
 			<div className="flex-1 h-full flex flex-col ">
 
 
-				<div className="bg-gradient-to-t from-[#6246a8] to-[#6747c0] text-white">
-					<div className="flex items-center">
+				<div className="flex items-center bg-gradient-to-t  from-[#6246a8] to-[#6747c0] text-white">
 						<SearchbarPresenter model={model}/>
-					</div>
 				</div>
 
 
-				<div className="flex-auto border bg-[#121212] relative">
+				<div
+					className="flex sm:flex-auto h-screen w-screen sm:w-full bg-gradient-to-t from-[#4f3646] to-[#6747c0] overflow-hidden">
 					<ListViewPresenter model={model}/>
 				</div>
 
diff --git a/my-app/src/views/Components/CoursePagePopup.jsx b/my-app/src/views/Components/CoursePagePopup.jsx
index 457697e..250e4b6 100644
--- a/my-app/src/views/Components/CoursePagePopup.jsx
+++ b/my-app/src/views/Components/CoursePagePopup.jsx
@@ -105,8 +105,8 @@ function CoursePagePopup({
 	if (!isOpen || !course) return null;
 	return (
 		<div
-			className={`fixed  backdrop-blur-lg inset-0  flex justify-center z-50 ${sidebarIsOpen ? 'pl-[400px]' : 'w-full'
-				}`}
+			className={`fixed backdrop-blur-lg inset-0  flex justify-center z-50 
+			${sidebarIsOpen ? 'sm:pl-[400px] flex flex-auto h-screen w-screen ' : 'w-full'}`}
 			onClick={onClose}
 		>
 			<div
@@ -116,7 +116,7 @@ function CoursePagePopup({
 					setShowOverlay(true);
 				}}
 			>
-				<div className="flex-1">
+				<div className="flex-1 overflow-auto">
 					<div className="px-10 py-10 md:px-20 md:py-16 text-slate-900 space-y-8 font-sans">
 						{/* Course Title Section */}
 						<div>
@@ -154,39 +154,47 @@ function CoursePagePopup({
 									</svg>
 								</button>
 
-								<span className="ml-4 text-lg text-violet-700 whitespace-nowrap">
-									({course.credits} Credits)
-								</span>
 							</h2>
 							<div className="my-6 h-1.5 w-full bg-violet-500"></div>
 						</div>
 
 						{/* Course Info Section */}
-						<div className="flex flex-col space-y-4 bg-white/40 p-6 rounded-xl shadow-md">
+						<div className="sm:flex-col inline-flex flex-row flex-wrap space-y-4 bg-white/40 p-6 rounded-xl shadow-md">
 							{/* Top Row - Basic Info */}
-							<div className="grid grid-cols-2 gap-4">
+							<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
 								<div className="flex flex-col space-y-2">
 									<div className="flex items-center gap-2">
 										<span className="text-sm font-medium text-violet-800">Academic Level:</span>
-										<span className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
+										<span
+											className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
 											{course.academicLevel || 'Not specified'}
 										</span>
 									</div>
+									<div className="flex items-center gap-2">
+										<span className="text-sm font-medium text-violet-800">Credits:</span>
+										<span
+											className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
+											{course.credits || 'Not specified'}
+										</span>
+									</div>
 									<div className="flex items-center gap-2">
 										<span className="text-sm font-medium text-violet-800">Department:</span>
-										<span className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
+										<span
+											className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
 											{course.department || 'Not specified'}
 										</span>
 									</div>
 									<div className="flex items-center gap-2">
 										<span className="text-sm font-medium text-violet-800">Language:</span>
-										<span className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
+										<span
+											className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
 											{handlePeriodsAndLanguages(course?.language) || 'Languages not specified'}
 										</span>
 									</div>
 									<div className="flex items-center gap-2">
 										<span className="text-sm font-medium text-violet-800">Course Periods:</span>
-										<span className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
+										<span
+											className="px-3 py-1 bg-violet-100 text-violet-700 rounded-full text-sm font-medium">
 											{handlePeriodsAndLanguages(course?.periods) || 'Periods not specified'}
 										</span>
 									</div>
@@ -194,8 +202,8 @@ function CoursePagePopup({
 								</div>
 
 								<div className="flex flex-col space-y-4">
-									<div className="flex flex-col space-y-4">
-										<div className="flex flex-col bg-violet-50 p-4 rounded-lg space-y-4">
+									<div className="flex flex-wrap flex-col space-y-4">
+										<div className="flex flex-col flex-wrap bg-violet-50 p-4 rounded-lg space-y-4">
 											<div className="flex flex-col">
 												<span className="text-sm font-medium text-violet-800 mb-1">Overall Rating:</span>
 												<div className="flex items-center gap-2">
diff --git a/my-app/src/views/Components/FavouriteDropdown.jsx b/my-app/src/views/Components/FavouriteDropdown.jsx
index 164b259..224e382 100644
--- a/my-app/src/views/Components/FavouriteDropdown.jsx
+++ b/my-app/src/views/Components/FavouriteDropdown.jsx
@@ -23,10 +23,10 @@ const FavouritesDropdown = observer((props) => {
 
     return (
         <div>
-            <div className="fixed mt-3 w-[32rem] right-4 bg-indigo-300/75 backdrop-blur-lg border border-violet-500 rounded-lg z-20 shadow-lg flex flex-col max-h-[calc(100vh-8rem)]">
+            <div className="sm:fixed absolute mt-3  sm:w-[32rem] sm:right-4 sm:-translate-x-0  bg-indigo-300/75 backdrop-blur-lg border border-violet-500 rounded-lg z-20 shadow-lg flex flex-col max-h-[calc(100vh-8rem)]">
                 {/* Fixed Header */}
                 <div className="sticky top-0 p-3 rounded-t-md bg-violet-500 flex justify-between items-center w-full border-b border-solid border-violet-600 font-semibold">
-                    <p className="text-white w-1/4">Code</p>
+                    <p className="text-white w-1/2">Code</p>
                     <p className="text-white w-1/2">Name</p>
                     <p className="text-white w-1/4 text-center">Credits</p>
                     <div className="w-8"></div>
@@ -44,9 +44,9 @@ const FavouritesDropdown = observer((props) => {
                                     
                                 }}
                                 key={course.code}
-                                className="p-3 hover:bg-indigo-400/50 cursor-pointer flex justify-between items-center w-full border-b border-solid border-violet-400"
+                                className="p-3 gap-1 hover:bg-indigo-400/50 cursor-pointer flex justify-between items-center w-full border-b border-solid border-violet-400"
                             >
-                                <p className="text-violet-700 font-semibold w-1/4">{course.code}</p>
+                                <p className="text-violet-700 font-semibold w-1/2">{course.code}</p>
                                 <p className="text-slate-900 font-semibold w-1/2">{course.name}</p>
                                 <p className="text-slate-900 font-semibold w-1/4 text-center">{course.credits} hp</p>
                                 <button
@@ -69,7 +69,7 @@ const FavouritesDropdown = observer((props) => {
 
                 {/* Fixed Footer */}
                 <div className="sticky bottom-0 border-t border-solid border-violet-400 bg-indigo-300/75 backdrop-blur-lg">
-                    <div className='p-3 flex justify-between items-center bg-violet-400/30'>
+                    <div className='sm:p-3 p-0 flex  items-center bg-violet-400/30'>
                         <p className='text-slate-900 font-bold w-1/2'>Total:</p>
                         <p className='text-slate-900 font-bold w-1/4'></p>
                         <p className='text-slate-900 font-bold w-1/4 text-center'>{props.totalCredits} hp</p>
diff --git a/my-app/src/views/ListView.jsx b/my-app/src/views/ListView.jsx
index 29a1315..89385f3 100644
--- a/my-app/src/views/ListView.jsx
+++ b/my-app/src/views/ListView.jsx
@@ -109,10 +109,10 @@ function ListView(props) {
     }
 
     return (
-        <div className="relative bg-gray-100 text-black p-2 flex flex-col gap-3 h-screen">
-            {isLoading ? (
-                <div className="flex justify-center items-center h-full">
-                    <Quantum size="400" speed="10" color="#000061" />
+        <div
+            className="overflow-hidden relative w-full h-screen bg-gray-100 p-4 sm:p-3 text-black flex flex-col gap-1 sm:gap-2 overflow-y-auto">            {isLoading ? (
+            <div className="flex justify-center items-center h-full ">
+                <Quantum size="400" speed="10" color="#000061" />
                 </div>
             ) : (
                 <div className="overflow-y-auto h-full" id="scrollableDiv" ref={props.scrollContainerRef}>
@@ -129,9 +129,9 @@ function ListView(props) {
                             <select
                                 value={props.sortBy}
                                 onChange={(e) => props.setSortBy(e.target.value)}
-                                className="bg-white  shadow-md text-[#000061] font-semibold py-2 px-4 rounded-lg cursor-pointer hover:bg-blue-50 transition-colors duration-200"
+                                className=" w-[90px] sm:w-full bg-white overflow-hidden shadow-md text-[#000061] font-semibold py-2 px-4 rounded-lg cursor-pointer hover:bg-blue-50 transition-colors duration-200"
                             >
-                                <option value="relevance">Sort by Relevance</option>
+                                <option value ="relevance">Sort by Relevance</option>
                                 <option value="name">Sort by Name</option>
                                 <option value="credits">Sort by Credits</option>
                                 <option value="avg_rating">Sort by Overall Rating</option>
@@ -141,7 +141,7 @@ function ListView(props) {
 
                             <button
                                 onClick={() => props.setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc')}
-                                className="bg-white  shadow-md text-[#000061] font-semibold p-2 rounded-lg cursor-pointer hover:bg-blue-50 transition-colors duration-200"
+                                className="bg-white flex flex-wrap shadow-md text-[#000061] font-semibold p-2 rounded-lg cursor-pointer hover:bg-blue-50 transition-colors duration-200"
                                 aria-label={`Sort ${props.sortDirection === 'asc' ? 'ascending' : 'descending'}`}
                             >
                                 {props.sortDirection === 'desc' ? (
diff --git a/my-app/src/views/SearchbarView.jsx b/my-app/src/views/SearchbarView.jsx
index 50d1076..8021b8f 100644
--- a/my-app/src/views/SearchbarView.jsx
+++ b/my-app/src/views/SearchbarView.jsx
@@ -44,24 +44,27 @@ function SearchbarView(props) {
     };
 
   return (
-    <div className="w-full px-6 py-6 flex items-center justify-between" onClick={handleClickOutside}>
+    <div
+        className=" w-full sm:px-6 sm:py-6 pt-4 pb-4 sm:flex p-2 items-center sm:justify-between"
+         onClick={handleClickOutside}>
       <a href="https://course-compass.se/"
-         className="flex items-center h-[90px] w-auto">
+         className="flex justify-center sm:h-[90px] h-[120px] w-auto ">
         <img src={project_logo} className="h-[90px] w-auto" alt="KTH Logo" />
       </a>
 
+    <div className="flex justify-center sm:pr-20">
       <input
         type="text"
-        placeholder="What course are you looking for?"
-        value={props.searchQuery}  // Changed from searchQuery to props.searchQuery
+        placeholder="Search for courses..."
+        value={props.searchQuery}
         onChange={(e) => handleSearch(e.target.value)}
         onClick={(e) => e.stopPropagation()}
-        className="w-[400px] h-[44px] pl-14 pr-4 bg-white text-black rounded-full"
+        className="sm:w-[400px] max-w-full h-[44px] pl-4 pr-4 bg-white text-black rounded-full "
       />
+    </div>
 
-      <div className="flex gap-6 items-center">
+      <div className=" flex sm:gap-4 gap-1 pt-4 sm:pr-0">
         {props.share}
-
         <a
           className="flex items-center justify-center w-[120px] h-[44px] bg-[#003399] text-white rounded-full border border-[#000061] cursor-pointer hover:bg-[#001a4d] transition-all duration-200"
           href = "https://inferencekth.github.io/Course-Compass/"
@@ -96,7 +99,7 @@ function SearchbarView(props) {
                     )}
                 </div>
 
-          <div className="flex items-center cursor-pointer">
+          <div className=" flex items-center cursor-pointer">
               {user ? (
                   <button
                       onClick={handleSignOut}
@@ -112,15 +115,17 @@ function SearchbarView(props) {
 
               )}
 
+              {user && (
+                  <img
+                      src={user.photoURL}
+                      alt="Profile"
+                      className="w-[44px] h-[44px] rounded-full border border-[#000061] ml-2"
+                  />
+              )}
+
           </div>
 
-          {user && (
-              <img
-                  src={user.photoURL}
-                  alt="Profile"
-                  className="w-[44px] h-[44px] rounded-full border border-[#000061]"
-              />
-          )}
+
       </div>
     </div>
   );