diff --git a/frontend/src/js/external-forms/form-concept-group/FormConceptCopyModal.tsx b/frontend/src/js/external-forms/form-concept-group/FormConceptCopyModal.tsx
index bc219477b1..95d7036481 100644
--- a/frontend/src/js/external-forms/form-concept-group/FormConceptCopyModal.tsx
+++ b/frontend/src/js/external-forms/form-concept-group/FormConceptCopyModal.tsx
@@ -147,11 +147,7 @@ const FormConceptCopyModal = ({
   }
 
   return (
-    <Modal
-      onClose={onClose}
-      closeIcon
-      headline={t("externalForms.copyModal.headline")}
-    >
+    <Modal onClose={onClose} headline={t("externalForms.copyModal.headline")}>
       <InputSelect
         label={t("externalForms.copyModal.selectLabel")}
         options={conceptListFieldOptions}
diff --git a/frontend/src/js/headings/Headings.tsx b/frontend/src/js/headings/Headings.tsx
index 5845b205a7..834f63e5a6 100644
--- a/frontend/src/js/headings/Headings.tsx
+++ b/frontend/src/js/headings/Headings.tsx
@@ -1,16 +1,5 @@
-import styled from "@emotion/styled";
+import tw from "tailwind-styled-components";
 
-export const Heading3 = styled("h3")`
-  line-height: 1.3;
-  font-weight: 700;
-  font-size: ${({ theme }) => theme.font.md};
-  color: ${({ theme }) => theme.col.black};
-`;
+export const Heading3 = tw("h3")`text-lg font-normal text-gray-800`;
 
-export const Heading4 = styled("h4")`
-  line-height: 1.2;
-  font-weight: 400;
-  font-size: ${({ theme }) => theme.font.sm};
-  color: ${({ theme }) => theme.col.gray};
-  text-transform: uppercase;
-`;
+export const Heading4 = tw("h4")`text-sm font-normal text-gray-500 uppercase`;
diff --git a/frontend/src/js/modal/Modal.tsx b/frontend/src/js/modal/Modal.tsx
index 1b62439a87..57e1d2210e 100644
--- a/frontend/src/js/modal/Modal.tsx
+++ b/frontend/src/js/modal/Modal.tsx
@@ -1,12 +1,11 @@
 import styled from "@emotion/styled";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { ReactNode, useRef } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useTranslation } from "react-i18next";
 
 import { TransparentButton } from "../button/TransparentButton";
 import { useClickOutside } from "../common/helpers/useClickOutside";
-import FaIcon from "../icon/FaIcon";
+import { Heading3 } from "../headings/Headings";
 import WithTooltip from "../tooltip/WithTooltip";
 
 const Root = styled("div")`
@@ -43,12 +42,6 @@ const TopRow = styled("div")`
   align-items: flex-start;
 `;
 
-const Headline = styled("h3")`
-  margin: 0 10px 15px 0;
-  font-size: ${({ theme }) => theme.font.md};
-  color: ${({ theme }) => theme.col.blueGrayDark};
-`;
-
 const Subtitle = styled(`p`)`
   margin: -15px 0 20px;
   max-width: 600px;
@@ -74,8 +67,7 @@ const ModalContent = ({
   );
 };
 
-// A modal with three ways to close it
-// - a button
+// A modal with two ways to close it
 // - click outside
 // - press esc
 const Modal = ({
@@ -84,7 +76,6 @@ const Modal = ({
   headline,
   subtitle,
   doneButton,
-  closeIcon,
   scrollable,
   onClose,
 }: {
@@ -93,7 +84,6 @@ const Modal = ({
   headline?: ReactNode;
   subtitle?: ReactNode;
   doneButton?: boolean;
-  closeIcon?: boolean;
   scrollable?: boolean;
   onClose: () => void;
 }) => {
@@ -105,14 +95,7 @@ const Modal = ({
     <Root className={className}>
       <ModalContent onClose={onClose} scrollable={scrollable}>
         <TopRow>
-          <Headline>{headline}</Headline>
-          {closeIcon && (
-            <WithTooltip text={t("common.closeEsc")}>
-              <TransparentButton small onClick={onClose}>
-                <FaIcon icon={faTimes} />
-              </TransparentButton>
-            </WithTooltip>
-          )}
+          <Heading3>{headline}</Heading3>
           {doneButton && (
             <WithTooltip text={t("common.closeEsc")}>
               <TransparentButton small onClick={onClose}>
diff --git a/frontend/src/js/pane/TabNavigation.tsx b/frontend/src/js/pane/TabNavigation.tsx
index 6d2535a254..b5f37d0aba 100644
--- a/frontend/src/js/pane/TabNavigation.tsx
+++ b/frontend/src/js/pane/TabNavigation.tsx
@@ -1,6 +1,5 @@
 import styled from "@emotion/styled";
 import { faSpinner } from "@fortawesome/free-solid-svg-icons";
-import { FC } from "react";
 
 import tw from "tailwind-styled-components";
 import FaIcon from "../icon/FaIcon";
@@ -15,7 +14,7 @@ const Root = styled("div")`
   align-items: flex-start;
 `;
 
-const Headline = tw("h2")<{ active: boolean }>`
+const Headline = tw("h2")<{ $active: boolean }>`
   text-sm
   mb-0
   mt-[6px]
@@ -30,10 +29,10 @@ const Headline = tw("h2")<{ active: boolean }>`
   tracking-wider
 
   border-b-[3px]
-  ${({ active }) =>
-    active ? "text-primary-500" : "text-gray-500 hover:text-black"};
-  ${({ active }) =>
-    active
+  ${({ $active }) =>
+    $active ? "text-primary-500" : "text-gray-500 hover:text-black"};
+  ${({ $active }) =>
+    $active
       ? "border-primary-500"
       : "border-transparent hover:border-primary-200"};
 
@@ -54,18 +53,16 @@ export interface TabNavigationTab {
   loading?: boolean;
 }
 
-interface PropsT {
-  onClickTab: (tab: string) => void;
-  activeTab: string | null;
-  tabs: TabNavigationTab[];
-  dataTestId: string;
-}
-
-const TabNavigation: FC<PropsT> = ({
+const TabNavigation = ({
   tabs,
   activeTab,
   onClickTab,
   dataTestId,
+}: {
+  onClickTab: (tab: string) => void;
+  activeTab: string | null;
+  tabs: TabNavigationTab[];
+  dataTestId: string;
 }) => {
   function createClickHandler(key: string) {
     return () => {
@@ -82,7 +79,7 @@ const TabNavigation: FC<PropsT> = ({
           <HoverNavigatable key={key} triggerNavigate={createClickHandler(key)}>
             <SxWithTooltip text={tooltip} lazy>
               <Headline
-                active={activeTab === key}
+                $active={activeTab === key}
                 onClick={createClickHandler(key)}
               >
                 {label}
diff --git a/frontend/src/js/preview/DiagramModal.tsx b/frontend/src/js/preview/DiagramModal.tsx
index 51451c7051..6f4d3b8439 100644
--- a/frontend/src/js/preview/DiagramModal.tsx
+++ b/frontend/src/js/preview/DiagramModal.tsx
@@ -38,7 +38,7 @@ export default function DiagramModal({
   useHotkeys("esc", () => onClose());
 
   return (
-    <Modal closeIcon onClose={() => onClose()}>
+    <Modal onClose={onClose}>
       <Horizontal>
         <SxDiagram stat={statistic} />
         {previewStatsIsBarStats(statistic) &&
diff --git a/frontend/src/js/previous-queries/list/AddFolderModal.tsx b/frontend/src/js/previous-queries/list/AddFolderModal.tsx
index f4815542b6..57d8c269b0 100644
--- a/frontend/src/js/previous-queries/list/AddFolderModal.tsx
+++ b/frontend/src/js/previous-queries/list/AddFolderModal.tsx
@@ -34,7 +34,7 @@ const AddFolderModal = ({ onClose, onSubmit, isValidName }: Props) => {
   const [folderName, setFolderName] = useState<string>("");
 
   return (
-    <Modal onClose={onClose} closeIcon headline={t("addFolderModal.headline")}>
+    <Modal onClose={onClose} headline={t("addFolderModal.headline")}>
       <Content>
         <p>{t("addFolderModal.description")}</p>
         <form
diff --git a/frontend/src/js/previous-queries/list/ProjectItem.tsx b/frontend/src/js/previous-queries/list/ProjectItem.tsx
index 3853d87a26..700d15cde6 100644
--- a/frontend/src/js/previous-queries/list/ProjectItem.tsx
+++ b/frontend/src/js/previous-queries/list/ProjectItem.tsx
@@ -134,12 +134,6 @@ const SxDownloadButton = styled(DownloadButton)`
   }
 `;
 
-const Row = styled("div")`
-  display: flex;
-  align-items: flex-start;
-  gap: 5px;
-`;
-
 const SxFaIcon = styled(FaIcon)`
   opacity: 0.7;
 `;
@@ -237,8 +231,8 @@ const ProjectItem = forwardRef<
                 disabled={!mayEdit}
               />
             </WithTooltip>
-            {!isFormConfig(item) && item.resultUrls.length > 0 ? (
-              <Row>
+            <div className="flex items-center gap-2">
+              {!isFormConfig(item) && item.resultUrls.length > 0 ? (
                 <WithTooltip text={t("previousQuery.downloadResults")}>
                   <SxDownloadButton
                     tight
@@ -250,15 +244,15 @@ const ProjectItem = forwardRef<
                     {topLeftLabel}
                   </SxDownloadButton>
                 </WithTooltip>
-                {!item.containsDates && (
-                  <WithTooltip text={t("previousQuery.hasNoDates")}>
-                    <SxFaIcon red icon={faCalendar} />
-                  </WithTooltip>
-                )}
-              </Row>
-            ) : (
-              <NonBreakingText>{topLeftLabel}</NonBreakingText>
-            )}
+              ) : (
+                <NonBreakingText>{topLeftLabel}</NonBreakingText>
+              )}
+              {!isFormConfig(item) && !item.containsDates && (
+                <WithTooltip text={t("previousQuery.hasNoDates")}>
+                  <SxFaIcon red icon={faCalendar} />
+                </WithTooltip>
+              )}
+            </div>
           </TopLeft>
           <TopRight>
             {executedAt}
diff --git a/frontend/src/js/previous-queries/upload/CSVColumnPicker.tsx b/frontend/src/js/previous-queries/upload/CSVColumnPicker.tsx
index 44d608d998..6be5c05fc4 100644
--- a/frontend/src/js/previous-queries/upload/CSVColumnPicker.tsx
+++ b/frontend/src/js/previous-queries/upload/CSVColumnPicker.tsx
@@ -12,6 +12,7 @@ import { saveAs } from "file-saver";
 import { FC, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import tw from "tailwind-styled-components";
 import { QueryUploadConfigT, UploadQueryResponseT } from "../../api/types";
 import IconButton from "../../button/IconButton";
 import PrimaryButton from "../../button/PrimaryButton";
@@ -30,31 +31,12 @@ const Row = styled("div")`
   margin-bottom: 15px;
 `;
 
-const Grow = styled("div")`
-  display: flex;
-  align-items: center;
-`;
-
-const HorizontalScrollContainer = styled("div")`
-  overflow-x: auto;
-  width: 100%;
-`;
-const Table = styled("table")`
-  margin: 10px 0;
-  border: 1px solid #ccc;
-  text-align: left;
-  width: 100%;
-  padding: 10px;
-  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
-  table-layout: fixed;
-`;
-
-const Td = styled("td")`
-  font-size: ${({ theme }) => theme.font.xs};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 150px;
+const Td = tw("td")`
+  text-xs
+  text-ellipsis
+  overflow-hidden
+  whitespace-nowrap
+  min-w-[150px]
 `;
 const Th = styled("th")`
   font-size: ${({ theme }) => theme.font.xs};
@@ -62,16 +44,6 @@ const Th = styled("th")`
   width: 150px;
 `;
 
-const FileName = styled("code")`
-  display: block;
-  margin: 0 15px 0 0;
-`;
-
-const BoldFileName = styled(FileName)`
-  margin-bottom: 3px;
-  font-weight: 700;
-`;
-
 const Padded = styled("span")`
   padding: 0 6px;
 `;
@@ -276,15 +248,15 @@ const CSVColumnPicker: FC<PropsT> = ({
   return (
     <div>
       <Row>
-        <Grow>
-          <div>
-            <BoldFileName>{file.name}</BoldFileName>
-            <FileName>{csv.length} Zeilen</FileName>
+        <div className="flex items-center gap-3">
+          <div className="flex flex-col text-sm">
+            <code className="font-bold">{file.name}</code>
+            <code>{csv.length} Zeilen</code>
           </div>
           <WithTooltip text={t("common.clear")}>
             <IconButton frame icon={faTrash} onClick={onReset} />
           </WithTooltip>
-        </Grow>
+        </div>
         {csv.length > 0 && (
           <SxInputSelect
             label={t("csvColumnPicker.delimiter")}
@@ -299,66 +271,68 @@ const CSVColumnPicker: FC<PropsT> = ({
           />
         )}
       </Row>
-      <HorizontalScrollContainer>
-        <Table>
-          <thead>
-            {csvLoading && (
-              <tr>
-                <th>{t("csvColumnPicker.loading")}</th>
-              </tr>
-            )}
-            {csv.length > 0 &&
-              csv.slice(0, 1).map((row, j) => (
-                <tr key={j}>
-                  {row.map((cell, i) => (
-                    <Th key={cell + i}>
-                      <InputSelect
-                        smallMenu
-                        options={SELECT_OPTIONS}
-                        value={
-                          SELECT_OPTIONS.find(
-                            (o) => o.value === csvHeader[i],
-                          ) || SELECT_OPTIONS[0]
-                        }
-                        onChange={(value) => {
-                          if (value) {
-                            setCSVHeader([
-                              ...csvHeader.slice(0, i),
-                              value.value as UploadColumnType,
-                              ...csvHeader.slice(i + 1),
-                            ]);
-                          }
-                        }}
-                      />
-                      <SxPadded>{cell}</SxPadded>
-                    </Th>
-                  ))}
+      <div className="overflow-hidden rounded py-3 px-2 border w-full">
+        <div className="overflow-x-auto">
+          <table className="table-fixed [&_td]:px-1 [&_th]:px-1">
+            <thead>
+              {csvLoading && (
+                <tr>
+                  <th>{t("csvColumnPicker.loading")}</th>
                 </tr>
-              ))}
-          </thead>
-          <tbody>
-            {csv.length > 0 &&
-              csv.slice(1, 6).map((row, j) => (
-                <tr key={j}>
-                  {row.map((cell, i) => (
-                    <Td key={cell + i}>
-                      <Padded>{cell}</Padded>
+              )}
+              {csv.length > 0 &&
+                csv.slice(0, 1).map((row, j) => (
+                  <tr key={j}>
+                    {row.map((cell, i) => (
+                      <Th key={cell + i}>
+                        <InputSelect
+                          smallMenu
+                          options={SELECT_OPTIONS}
+                          value={
+                            SELECT_OPTIONS.find(
+                              (o) => o.value === csvHeader[i],
+                            ) || SELECT_OPTIONS[0]
+                          }
+                          onChange={(value) => {
+                            if (value) {
+                              setCSVHeader([
+                                ...csvHeader.slice(0, i),
+                                value.value as UploadColumnType,
+                                ...csvHeader.slice(i + 1),
+                              ]);
+                            }
+                          }}
+                        />
+                        <SxPadded>{cell}</SxPadded>
+                      </Th>
+                    ))}
+                  </tr>
+                ))}
+            </thead>
+            <tbody>
+              {csv.length > 0 &&
+                csv.slice(1, 6).map((row, j) => (
+                  <tr key={j}>
+                    {row.map((cell, i) => (
+                      <Td key={cell + i}>
+                        <Padded>{cell}</Padded>
+                      </Td>
+                    ))}
+                  </tr>
+                ))}
+              {csv.length > 6 && (
+                <tr>
+                  {new Array(csv[0].length).fill(null).map((_, j) => (
+                    <Td key={j}>
+                      <Padded>...</Padded>
                     </Td>
                   ))}
                 </tr>
-              ))}
-            {csv.length > 6 && (
-              <tr>
-                {new Array(csv[0].length).fill(null).map((_, j) => (
-                  <Td key={j}>
-                    <Padded>...</Padded>
-                  </Td>
-                ))}
-              </tr>
-            )}
-          </tbody>
-        </Table>
-      </HorizontalScrollContainer>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
       {uploadResult && (
         <PartialUploadResults>
           <Msg>
diff --git a/frontend/src/js/previous-queries/upload/UploadQueryResults.tsx b/frontend/src/js/previous-queries/upload/UploadQueryResults.tsx
index 3c8638bc48..7a244cfaae 100644
--- a/frontend/src/js/previous-queries/upload/UploadQueryResults.tsx
+++ b/frontend/src/js/previous-queries/upload/UploadQueryResults.tsx
@@ -24,12 +24,13 @@ const SxIconButton = styled(IconButton)`
   padding: 9px 6px;
 `;
 
-interface PropsT {
+const UploadQueryResults = ({
+  className,
+  datasetId,
+}: {
   className?: string;
   datasetId: DatasetT["id"] | null;
-}
-
-const UploadQueryResults = ({ className, datasetId }: PropsT) => {
+}) => {
   const { t } = useTranslation();
 
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
diff --git a/frontend/src/js/previous-queries/upload/UploadQueryResultsModal.tsx b/frontend/src/js/previous-queries/upload/UploadQueryResultsModal.tsx
index 26d58aafd4..a9db707f97 100644
--- a/frontend/src/js/previous-queries/upload/UploadQueryResultsModal.tsx
+++ b/frontend/src/js/previous-queries/upload/UploadQueryResultsModal.tsx
@@ -63,7 +63,6 @@ const UploadQueryResultsModal: FC<PropsT> = ({
   return (
     <Modal
       onClose={onClose}
-      closeIcon
       scrollable
       headline={
         <>
diff --git a/frontend/src/js/upload-concept-list-modal/UploadConceptListModal.tsx b/frontend/src/js/upload-concept-list-modal/UploadConceptListModal.tsx
index 8efe0745db..c481ddf105 100644
--- a/frontend/src/js/upload-concept-list-modal/UploadConceptListModal.tsx
+++ b/frontend/src/js/upload-concept-list-modal/UploadConceptListModal.tsx
@@ -509,11 +509,7 @@ const UploadConceptListModal = ({
   );
 
   return (
-    <Modal
-      closeIcon
-      onClose={onClose}
-      headline={t("uploadConceptListModal.headline")}
-    >
+    <Modal onClose={onClose} headline={t("uploadConceptListModal.headline")}>
       <Root>
         <SxInputSelect
           label={t("uploadConceptListModal.selectConceptRootNode")}