diff --git a/src/App.tsx b/src/App.tsx
index 2d1c5cd3b24aee45568746d44440bcd81e72c4b9..92bca0efab9044519c621c1e4152d81475f32a51 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -29,27 +29,26 @@ function App({}: AppProps) {
   };
 
   return (
-    <div className={'flex h-full'}>
+    <div className={'flex md:flex-row-reverse flex-col h-full'}>
+      <Map
+        onMouseEnter={handlePoiHoverOn}
+        onMouseLeave={handlePoiHoverOff}
+        hoveredPoiId={hoveredPoiId}
+        values={data as PointOfInterest[]}
+        onSelect={handlePoiClick}
+        selectedEntry={selectedPoi}
+      />
       {selectedPoi ? (
-        <SidebarSingleView style={{ flex: 1, minWidth: '250px' }} value={selectedPoi} onClose={handlePoiClose} />
+        <SidebarSingleView className="sidebar" value={selectedPoi} onClose={handlePoiClose} />
       ) : (
         <SidebarListView
           onMouseEnter={handlePoiHoverOn}
           onMouseLeave={handlePoiHoverOff}
-          style={{ flex: 1, minWidth: '250px' }}
+          className="sidebar"
           values={data as PointOfInterest[]}
           onClick={handlePoiClick}
         />
       )}
-
-      <Map
-        onMouseEnter={handlePoiHoverOn}
-        onMouseLeave={handlePoiHoverOff}
-        hoveredPoiId={hoveredPoiId}
-        values={data as PointOfInterest[]}
-        onSelect={handlePoiClick}
-        selectedEntry={selectedPoi}
-      />
     </div>
   );
 }
diff --git a/src/Sidebar/SidebarContainer.tsx b/src/Sidebar/SidebarContainer.tsx
index ae642191fae3032f5ec09a113fc3b2cd91791cab..de02c07e5d9f0ba649cc29aee30ec8437f9d1582 100644
--- a/src/Sidebar/SidebarContainer.tsx
+++ b/src/Sidebar/SidebarContainer.tsx
@@ -9,7 +9,9 @@ const SidebarContainer: React.FC<Props> = ({ style, className, children }) => {
   return (
     <div
       style={style}
-      className={`flex flex-col shadow-2xl border-r-2 border-black border-opacity-20 ${className ?? ''}`}
+      className={`flex flex-col shadow-2xl border-t-2 md:border-r-2 md:border-t-0 border-black border-opacity-20 ${
+        className ?? ''
+      }`}
     >
       {children}
     </div>
diff --git a/src/Sidebar/SidebarListElement.tsx b/src/Sidebar/SidebarListElement.tsx
index ebd09c0aac3e5b709962059d16e880368e7fa351..c17b369b96a65592a61d85ef151ac0ad51bf86bb 100644
--- a/src/Sidebar/SidebarListElement.tsx
+++ b/src/Sidebar/SidebarListElement.tsx
@@ -10,7 +10,7 @@ const SidebarListElement: React.FC<Props> = ({ value, ...restProps }) => {
     value && (
       <div
         {...restProps}
-        className="border-2 border-black border-opacity-20 hover:border-opacity-40 cursor-pointer rounded-lg overflow-hidden mx-4 my-2"
+        className="border-2 border-black border-opacity-20 hover:border-opacity-40 cursor-pointer rounded-lg md:overflow-hidden mx-4 my-2"
       >
         <div className="p-3">
           <h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">{value.category}</h2>
diff --git a/src/Sidebar/SidebarListView.tsx b/src/Sidebar/SidebarListView.tsx
index b42fd6589e50c6f3eb922e103d878aa18c80bc6c..35a14f7bd8d5dd73438356830f05bbba5fa1f1e1 100644
--- a/src/Sidebar/SidebarListView.tsx
+++ b/src/Sidebar/SidebarListView.tsx
@@ -9,6 +9,7 @@ interface Props {
   onClick?: (id: number) => void;
   onMouseEnter?: (id: number) => void;
   onMouseLeave?: () => void;
+  className?: string;
 }
 
 const SidebarListView: React.FC<Props> = ({ values, onMouseEnter, onMouseLeave, onClick, ...restProps }) => {
diff --git a/src/Sidebar/SidebarSingleView.tsx b/src/Sidebar/SidebarSingleView.tsx
index 614073680606d391d5ec2c21f2e2cf7c64bfeca9..badbde26ff878f1513f39dce9b606b94ddeffecc 100644
--- a/src/Sidebar/SidebarSingleView.tsx
+++ b/src/Sidebar/SidebarSingleView.tsx
@@ -7,18 +7,19 @@ interface Props {
   style?: CSSProperties;
   value: PointOfInterest;
   onClose?: () => void;
+  className?: string;
 }
 
-const SidebarSingleView: React.FC<Props> = ({ value, onClose, ...restProps }) => {
+const SidebarSingleView: React.FC<Props> = ({ value, onClose, className, ...restProps }) => {
   const strippedUrl = value?.website?.replace(/(^\w+:|^)\/\//, '');
   return (
-    <SidebarContainer className="relative p-0" {...restProps}>
+    <SidebarContainer className={`relative p-0 ${className || ''}`} {...restProps}>
       <CloseIcon
         size={32}
         className="absolute left-5 top-5 p-1 text-gray-500 inline-block cursor-pointer hover:bg-gray-300 hover:bg-opacity-50 rounded-full"
         onClick={onClose}
       />
-      <img className="lg:h-48 md:h-36 w-full object-cover object-center" src={value.image} alt="blog" />
+      <img className="lg:h-48 md:h-36 h-24 w-full object-cover object-center" src={value.image} alt="blog" />
       <div className="p-6">
         <h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">{value.category}</h2>
         <h1 className="title-font text-lg font-medium text-gray-900 mb-3">{value.name}</h1>
diff --git a/src/index.css b/src/index.css
index 67041bd44a2b36d9d4ff1bd4e553a8d34704874a..fec39715e73963f4535ad2bd60244d8990f14015 100644
--- a/src/index.css
+++ b/src/index.css
@@ -23,3 +23,25 @@ code {
 .marker {
   color: var(--fabcity-red);
 }
+
+.sidebar {
+  flex: 3;
+  overflow-y: scroll;
+  max-height: 50vh;
+}
+
+.leaflet-control-container {
+  display: none;
+}
+
+@screen md {
+  .sidebar {
+    flex: 1;
+    min-width: 250px;
+    max-height: initial;
+  }
+
+  .leaflet-control-container {
+    display: initial;
+  }
+}