diff --git a/front-end/src/components/composite/downloadModal/downloadModal.module.scss b/front-end/src/components/composite/downloadModal/downloadModal.module.scss
index e1d5690b..8c874e5f 100644
--- a/front-end/src/components/composite/downloadModal/downloadModal.module.scss
+++ b/front-end/src/components/composite/downloadModal/downloadModal.module.scss
@@ -14,11 +14,41 @@
   }
 
   .tableWrapper {
-    height: 35rem;
+    height: 30rem;
     @include mixins.scrollbar-dark;
   }
+}
 
-  .submitButton {
-    margin-top: 1.25rem;
+/* Responsive styles for smaller desktop windows */
+@media screen and (max-width: 1400px) {
+  .downloadModal {
+    width: 60rem;
+
+    .tableWrapper {
+      height: 30rem;
+    }
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .downloadModal {
+    width: 50rem;
+    padding: 0 1.5rem;
+
+    .tableWrapper {
+      height: 30rem;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .downloadModal {
+    width: 90vw;
+    max-width: 35rem;
+    padding: 0 1rem;
+
+    .tableWrapper {
+      height: 20rem;
+    }
   }
 }
\ No newline at end of file
diff --git a/front-end/src/components/composite/downloadModal/downloadModal.tsx b/front-end/src/components/composite/downloadModal/downloadModal.tsx
index 4fda6cf8..6c2d97ba 100644
--- a/front-end/src/components/composite/downloadModal/downloadModal.tsx
+++ b/front-end/src/components/composite/downloadModal/downloadModal.tsx
@@ -1,4 +1,5 @@
 import styles from './downloadModal.module.scss';
+import baseModalStyles from '@components/ui/baseModal/BaseModal.module.scss';
 import { BaseModal } from '@components/ui/baseModal/BaseModal';
 import { FileTable } from '@components/ui/fileTable/FileTable';
 import { Button } from '@components/ui/button/Button';
@@ -61,7 +62,7 @@ export const DownloadModal = ({ onClose, isOpen }: DownloadModalProps) => {
         <Button 
           onClick={downloadFiles}
           textSize={'2rem'}
-          className={styles.submitButton}
+          className={baseModalStyles.submitButton}
         >
           Download
           <img src={rightArrowIcon} alt="right arrow"/>
diff --git a/front-end/src/components/composite/presetFilesModal/PresetFilesModal.module.scss b/front-end/src/components/composite/presetFilesModal/PresetFilesModal.module.scss
index 16ba0aea..8a5e7ce7 100644
--- a/front-end/src/components/composite/presetFilesModal/PresetFilesModal.module.scss
+++ b/front-end/src/components/composite/presetFilesModal/PresetFilesModal.module.scss
@@ -5,45 +5,41 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0 1rem;
-  max-width: 90rem;
+  padding: 0 2rem;
+  max-width: 50rem;
 
-  .formWrapper {
-    display: flex;
-    gap: 2rem;
-
-    .uploadForm {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 50%;
-
-      .title {
-        all: unset;
-        @include fonts.title-large;
-      }
-    }
+  .title {
+    all: unset;
+    @include fonts.title-large;
+    margin-bottom: 1rem;
+  }
 
-    .selectFiles {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 50%;
+  .tableWrapper {
+    height: 28rem;
+    width: 100%;
+    @include mixins.scrollbar-dark;
+  }
+}
 
-      .title {
-        all: unset;
-        @include fonts.title-large;
-      }
+/* Responsive styles for smaller desktop windows */
+@media screen and (max-width: 1024px) {
+  .presetFilesModal {
+    padding: 0 1.5rem;
+    max-width: 40rem;
 
-      .tableWrapper {
-        height: 35rem;
-        @include mixins.scrollbar-dark;
-      }
+    .tableWrapper {
+      height: 28rem;
     }
   }
+}
 
-  .submitButton {
-    margin-top: 1.25rem;
-  }
+@media screen and (max-width: 768px) {
+  .presetFilesModal {
+    padding: 0 1rem;
+    max-width: 100vw;
 
-}
\ No newline at end of file
+    .tableWrapper {
+      height: 18rem;
+    }
+  }
+}
diff --git a/front-end/src/components/composite/presetFilesModal/PresetFilesModal.tsx b/front-end/src/components/composite/presetFilesModal/PresetFilesModal.tsx
index 239bbb53..009efe3b 100644
--- a/front-end/src/components/composite/presetFilesModal/PresetFilesModal.tsx
+++ b/front-end/src/components/composite/presetFilesModal/PresetFilesModal.tsx
@@ -1,7 +1,7 @@
 import styles from './PresetFilesModal.module.scss';
+import baseModalStyles from '@components/ui/baseModal/BaseModal.module.scss';
 import { BaseModal } from '@components/ui/baseModal/BaseModal';
 import { FileTable } from '@components/ui/fileTable/FileTable';
-import { UploadForm } from '@components/ui/uploadForm/UploadForm';
 import { Button } from '@components/ui/button/Button';
 import { useState, useEffect } from 'react';
 import { rightArrowIcon } from '@assets/icons';
@@ -22,8 +22,7 @@ interface PresetFilesModalProps {
 export const PresetFilesModal = ({ onClose, isOpen, onSubmit, currentSources }: PresetFilesModalProps) => {
   // TODO: Adjust based on preset
   const [selectedFiles, setSelectedFiles] = useState<FileInformation[]>([]);
-  const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
-  const { data: files, refetch } = useFiles();
+  const { data: files } = useFiles();
 
   // Pre-select files based on currentSources prop
   useEffect(() => {
@@ -37,53 +36,32 @@ export const PresetFilesModal = ({ onClose, isOpen, onSubmit, currentSources }:
   }, [currentSources, files]);
 
   const handleSubmit = async () => {
-    if (selectedFiles.length === 0 && uploadedFiles.length === 0) {
-      showWarningToast('Oops!', 'Please select or upload at least one file');
+    if (selectedFiles.length === 0) {
+      showWarningToast('Oops!', 'Please select at least one file');
       return;
     }
 
-    const uploadPromises = uploadedFiles.map((file) => ApiUtil.uploadFile(file));
-    await Promise.all(uploadPromises);
-
     const fileKeys = selectedFiles.map((file) => file.key);
-    
-    const uploadedFolderNames = uploadedFiles.map((file) => {
-      return file.name.substring(0, file.name.lastIndexOf('.'));
-    });
-    
-    fileKeys.push(...uploadedFolderNames);
-
     onSubmit(fileKeys);
     onClose();
-    refetch(); // Refetch files after upload
   };
 
   return (
     <BaseModal isOpen={isOpen} onClose={onClose}>
       <div className={styles.presetFilesModal}>
-
-        <div className={styles.formWrapper}>
-          <div className={styles.uploadForm}>
-            <h2 className={styles.title}>Upload your files</h2>
-            <UploadForm files={uploadedFiles} setFiles={setUploadedFiles} accept={'.bin'}/>
-          </div>
-
-          <div className={styles.selectFiles}>
-            <h2 className={styles.title}>...Or select existing ones</h2>
-            <div className={styles.tableWrapper}>
-              <FileTable 
-                files={getFolders(files || [])} 
-                selectedFiles={selectedFiles} 
-                setSelectedFiles={setSelectedFiles} 
-              />
-            </div>
-          </div>
+        <h2 className={styles.title}>Select a file</h2>
+        <div className={styles.tableWrapper}>
+          <FileTable 
+            files={getFolders(files || [])} 
+            selectedFiles={selectedFiles} 
+            setSelectedFiles={setSelectedFiles} 
+          />
         </div>
 
         <Button 
           onClick={handleSubmit}
           textSize={'2rem'}
-          className={styles.submitButton}
+          className={baseModalStyles.submitButton}
         >
           <span>Submit</span>
           <img src={rightArrowIcon} alt="right arrow"/>
diff --git a/front-end/src/components/composite/presetList/PresetList.module.scss b/front-end/src/components/composite/presetList/PresetList.module.scss
index 0e556155..ddab2220 100644
--- a/front-end/src/components/composite/presetList/PresetList.module.scss
+++ b/front-end/src/components/composite/presetList/PresetList.module.scss
@@ -1,5 +1,5 @@
 @use '@styles/_fonts';
-
+@use '@styles/_mixins';
 
 .presetListWrapper {
   display: flex;
@@ -7,6 +7,7 @@
   background-color: var(--background);
   width: 100%;
   padding-bottom: 4rem;
+  padding-right: 1rem;
 
   .title {
     all: unset;
@@ -18,10 +19,64 @@
   
   .presetList {
     display: grid;
-    grid-template-columns: repeat(3, auto);
+    grid-template-columns: repeat(4, auto);
     gap: 1.5rem;
     width: max-content;
     margin: 0 auto;
   }
+}
+
+/* Responsive styles for larger screens */
+@include mixins.respond-to(ultrawide) {
+  .presetListWrapper {
+    .presetList {
+      grid-template-columns: repeat(3, auto);
+      gap: 1.5rem;
+    }
+  }
+}
+
+/* Responsive styles for smaller desktop windows */
+@include mixins.respond-to(desktop) {
+  .presetListWrapper {
+    padding-right: 1rem;
 
+    .presetList {
+      grid-template-columns: repeat(2, auto);
+      gap: 1.5rem;
+    }
+  }
+}
+
+@include mixins.respond-to(tablet) {
+  .presetListWrapper {
+    padding-right: 0.75rem;
+
+    .title {
+      margin-left: 10%;
+    }
+    
+    .presetList {
+      grid-template-columns: repeat(2, auto);
+      gap: 1.25rem;
+    }
+  }
+}
+
+@include mixins.respond-to(mobile) {
+  .presetListWrapper {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+
+    .title {
+      margin-left: 0.5rem;
+    }
+    
+    .presetList {
+      grid-template-columns: 1fr;
+      width: fit-content;
+      margin: 0 auto;
+      gap: 1rem;
+    }
+  }
 }
diff --git a/front-end/src/components/composite/presetList/presetCard/PresetCard.tsx b/front-end/src/components/composite/presetList/presetCard/PresetCard.tsx
index 009767c0..1b372104 100644
--- a/front-end/src/components/composite/presetList/presetCard/PresetCard.tsx
+++ b/front-end/src/components/composite/presetList/presetCard/PresetCard.tsx
@@ -26,5 +26,4 @@ export const PresetCard = ({ image, name, description, fileCount, onClick }: Pre
       </div>
     </button>
   );
-};
-
+};
\ No newline at end of file
diff --git a/front-end/src/components/composite/uploadModal/uploadModal.module.scss b/front-end/src/components/composite/uploadModal/uploadModal.module.scss
index fdf3856d..40a0fc3f 100644
--- a/front-end/src/components/composite/uploadModal/uploadModal.module.scss
+++ b/front-end/src/components/composite/uploadModal/uploadModal.module.scss
@@ -1,19 +1,30 @@
 @use '@styles/_fonts';
 
+
 .uploadModal {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 40rem;
-  height: 34rem;
   padding: 0 2rem;
 
   .title {
     all: unset;
     @include fonts.title-large;
   }
+}
+
+@media screen and (max-width: 1024px) {
+  .uploadModal {
+    width: 35rem;
+    padding: 0 1.5rem;
+  }
+}
 
-  .submitButton {
-    margin-top: 1.25rem;
+@media screen and (max-width: 768px) {
+  .uploadModal {
+    width: 90vw;
+    max-width: 26rem;
+    padding: 0 1rem;
   }
 }
\ No newline at end of file
diff --git a/front-end/src/components/composite/uploadModal/uploadModal.tsx b/front-end/src/components/composite/uploadModal/uploadModal.tsx
index 5e3580bd..2b7e0975 100644
--- a/front-end/src/components/composite/uploadModal/uploadModal.tsx
+++ b/front-end/src/components/composite/uploadModal/uploadModal.tsx
@@ -9,6 +9,7 @@ import { useFiles } from '@lib/files/useFiles';
 import { showErrorToast, showSuccessToast } from '@components/ui/toastNotification/ToastNotification';
 import { rightArrowIcon } from '@assets/icons';
 import styles from './uploadModal.module.scss';
+import baseModalStyles from '@components/ui/baseModal/BaseModal.module.scss';
 
 interface UploadModalProps {
   isOpen: boolean;
@@ -80,7 +81,7 @@ export const UploadModal = ({ isOpen, onClose }: UploadModalProps) => {
         <Button 
           onClick={submitFiles} 
           textSize={'2rem'}
-          className={styles.submitButton}
+          className={baseModalStyles.submitButton}
           disabled={files.length === 0}
         >
           <span>Submit</span>
diff --git a/front-end/src/components/simple/footer/Footer.module.scss b/front-end/src/components/simple/footer/Footer.module.scss
index 667a2761..72ea046e 100644
--- a/front-end/src/components/simple/footer/Footer.module.scss
+++ b/front-end/src/components/simple/footer/Footer.module.scss
@@ -7,45 +7,59 @@
     background: var(--background);
     display: flex;
     justify-content: space-between;
-    padding: 1rem;
+    align-items: center;
+    padding: 1rem 2rem 2rem 2rem;
     color: var(--text-colour);
     position: sticky;
     z-index: map.get(variables.$z-index, footer);
     width: 100%;
-    height: 3rem;
-    padding-bottom: 2rem;
+    box-sizing: border-box;
+    min-height: 3rem;
+    gap: 1.5rem;
 
     > * {
-        margin: 0 2rem;  
+        margin: 0 1rem;  
     }
 
     .title-group {
         display: flex;
         justify-content: start;
         align-items: center;
+        flex-shrink: 0;
         
         .copyright {
             @include fonts.text-huge; 
             color: var(--tertiary);  
             filter: brightness(2);
+            white-space: nowrap;
         }
 
         .title {
             @include fonts.nav-title;  
             margin-left: 0.5rem;
+            white-space: nowrap;
         }
     }
 
+    img {
+        height: auto;
+        flex-shrink: 0;
+    }
+
     .buttons {
         display: flex;
+        gap: 0.5rem;
+        flex-shrink: 0;
+        margin-left: auto;
 
         > * {
             background: none;
             width: fit-content; 
             font-size: 2.5rem;
-            margin: 0rem 1rem;
+            padding: 0 0.5rem;
             align-items: center;
             display: flex;
+            flex-shrink: 0;
 
             &:hover {
                 filter: brightness(0.8);
@@ -66,4 +80,115 @@
     }
 }
 
+/* Responsive styles for smaller desktop windows */
+@media screen and (max-width: 1200px) {
+  .footer {
+    padding: 1rem 1.5rem 2rem 1.5rem;
+
+    > * {
+        margin: 0 0.75rem;  
+    }
+
+    .title-group {
+        .copyright {
+            font-size: 0.8rem;
+        }
+
+        .title {
+            font-size: 0.9rem;
+        }
+    }
+
+    .buttons {
+        > * {
+            font-size: 2rem;
+            padding: 0 0.35rem;
+
+            .icon {
+                width: 2rem;
+                height: 2rem;
+            }
+        }
+    }
+  }
+}
+
+@media screen and (max-width: 1000px) {
+  .footer {
+    padding: 0.75rem 1rem 1.5rem 1rem;
+    gap: 1rem;
+
+    > * {
+        margin: 0 0.5rem;  
+    }
+
+    .title-group {
+        .copyright {
+            font-size: 0.7rem;
+        }
+
+        .title {
+            font-size: 0.8rem;
+            margin-left: 0.25rem;
+        }
+    }
+
+    .buttons {
+        gap: 0.35rem;
+
+        > * {
+            font-size: 1.5rem;
+            padding: 0 0.25rem;
+
+            .icon {
+                width: 1.5rem;
+                height: 1.5rem;
+            }
+        }
+    }
+  }
+}
+
+@media screen and (max-width: 850px) {
+  .footer {
+    padding: 0.5rem 0.5rem 1rem 0.5rem;
+    gap: 0.75rem;
+
+    > * {
+        margin: 0;  
+    }
+
+    .title-group {
+        min-width: fit-content;
+
+        .copyright {
+            font-size: 0.6rem;
+        }
+
+        .title {
+            font-size: 0.7rem;
+            margin-left: 0.15rem;
+        }
+    }
+
+    img {
+        display: none;
+    }
+
+    .buttons {
+        gap: 0.25rem;
+
+        > * {
+            font-size: 1.2rem;
+            padding: 0 0.2rem;
+
+            .icon {
+                width: 1.2rem;
+                height: 1.2rem;
+            }
+        }
+    }
+  }
+}
+
 
diff --git a/front-end/src/components/simple/howItWorks/HowItWorks.module.scss b/front-end/src/components/simple/howItWorks/HowItWorks.module.scss
index 2cbf48e3..486ef663 100644
--- a/front-end/src/components/simple/howItWorks/HowItWorks.module.scss
+++ b/front-end/src/components/simple/howItWorks/HowItWorks.module.scss
@@ -27,7 +27,7 @@
     display: flex;
     align-items: center;
     gap: 3rem;
-    max-width: 1200px;
+    max-width: 75rem;
     margin: 0 auto;
     width: 100%;
 
@@ -37,7 +37,7 @@
 
     .stepContent {
       flex: 1;
-      max-width: 500px;
+      max-width: 31.25rem;
 
       .stepHeadline {
         all: unset;
@@ -57,12 +57,12 @@
 
     .stepImage {
       flex: 1;
-      max-width: 500px;
+      max-width: 31.25rem;
       border-radius: 8px;
       overflow: hidden;
       background-color: var(--background);
-      min-height: 300px;
-      height: 300px;
+      min-height: 18.75rem;
+      height: 18.75rem;
 
       img {
         width: 100%;
@@ -78,7 +78,7 @@
     flex-direction: column;
     align-items: center;
     gap: 2rem;
-    max-width: 800px;
+    max-width: 50rem;
     margin: 0 auto;
 
     .summaryText {
@@ -114,21 +114,89 @@
     }
   }
 
-  // Responsive design
-  @media (max-width: 768px) {
+  // Responsive design for smaller desktop windows
+  @media screen and (max-width: 1024px) {
+    .title {
+      margin-left: 10%;
+      margin-bottom: 1.5rem;
+    }
+
+    .stepsContainer {
+      gap: 3rem;
+      margin-bottom: 3rem;
+    }
+
     .step {
-      flex-direction: column !important;
       gap: 2rem;
 
-      .stepContent, .stepImage {
+      .stepContent {
+        max-width: 25rem;
+      }
+
+      .stepImage {
+        max-width: 25rem;
+        min-height: 15.625rem;
+        height: 15.625rem;
+      }
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    .title {
+      margin-left: 0.5rem;
+      margin-bottom: 1rem;
+      padding-right: 0.5rem;
+    }
+
+    .stepsContainer {
+      gap: 2rem;
+      margin-bottom: 2rem;
+      padding: 0 0.5rem;
+    }
+
+    .step {
+      flex-direction: column !important;
+      gap: 1.25rem;
+      max-width: 100%;
+
+      .stepContent {
+        max-width: 100%;
+
+        .stepHeadline {
+          font-size: 1.1rem;
+        }
+
+        .stepText {
+          font-size: 0.9rem;
+        }
+      }
+
+      .stepImage {
         max-width: 100%;
+        min-height: 12.5rem;
+        height: 12.5rem;
       }
     }
 
-    .flowDiagram {
-      .flowStep {
-        font-size: 0.875rem;
-        padding: 0.5rem 1rem;
+    .summary {
+      gap: 1.5rem;
+      padding: 0 0.5rem;
+
+      .summaryText {
+        font-size: 0.9rem;
+      }
+
+      .flowDiagram {
+        gap: 0.75rem;
+
+        .flowStep {
+          font-size: 0.75rem;
+          padding: 0.4rem 0.8rem;
+        }
+
+        .flowArrow {
+          font-size: 0.9rem;
+        }
       }
     }
   }
diff --git a/front-end/src/components/simple/titleCard/accel_x.csv b/front-end/src/components/simple/titleCard/accel_x.csv
index 6f017c2a..ffe0d451 100644
--- a/front-end/src/components/simple/titleCard/accel_x.csv
+++ b/front-end/src/components/simple/titleCard/accel_x.csv
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b9765acd5e4ed956ca30dd44b375a067b1d7114e37f587596019ad80b713b78f
-size 47470
+oid sha256:60b11400a9fb5a8b4d14673519f8d063a708f659817dcc6fe97c4b2e7341305f
+size 47472
diff --git a/front-end/src/components/simple/titleCard/titleCard.module.scss b/front-end/src/components/simple/titleCard/titleCard.module.scss
index 7c4b3c3f..70b2b0f4 100644
--- a/front-end/src/components/simple/titleCard/titleCard.module.scss
+++ b/front-end/src/components/simple/titleCard/titleCard.module.scss
@@ -10,6 +10,7 @@
     width: 100%;
     height: 21.69rem;
     background: linear-gradient(0deg, #222222 0%, #525252 98.5%);
+    padding-right: 1rem;
 
     .textContainer {
         display: flex;
@@ -59,4 +60,83 @@
         margin-bottom: 1.5rem; // Subtle shift up
         border-bottom: 1px solid grey;
     }
+}
+
+/* Responsive styles for smaller desktop windows */
+@media screen and (max-width: 1400px) {
+  .titleCard {
+    gap: 6rem;
+    height: 20rem;
+
+    .textContainer {
+      width: 25rem;
+      height: 12rem;
+      margin-left: 2rem;
+
+      .title {
+        width: 95%;
+      }
+
+      .description {
+        width: 85%;
+      }
+    }
+
+    .graphContainer {
+      margin-right: 3rem;
+    }
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .titleCard {
+    gap: 4rem;
+    height: 18rem;
+    padding-right: 0.75rem;
+
+    .textContainer {
+      width: 22rem;
+      height: 11rem;
+      margin-left: 1.5rem;
+
+      .title {
+        font-size: 3.25rem;
+      }
+
+      .description {
+        display: none;
+      }
+    }
+
+    .graphContainer {
+      margin-right: 2rem;
+    }
+  }
+}
+
+@media screen and (max-width: 1000px) {
+  .titleCard {
+    gap: 2rem;
+    height: 16rem;
+    padding-right: 0.5rem;
+
+    .textContainer {
+      width: 18rem;
+      height: 20rem;
+      margin-left: 1rem;
+
+      .title {
+        font-size: 3.5rem;
+      }
+
+      .description {
+        display: none;
+      }
+    }
+
+    .graphContainer {
+      margin-right: 1rem;
+      display: none;
+    }
+  }
 }
\ No newline at end of file
diff --git a/front-end/src/components/ui/baseModal/BaseModal.module.scss b/front-end/src/components/ui/baseModal/BaseModal.module.scss
index fdc5a4bf..54addfbc 100644
--- a/front-end/src/components/ui/baseModal/BaseModal.module.scss
+++ b/front-end/src/components/ui/baseModal/BaseModal.module.scss
@@ -36,6 +36,16 @@
   &.close {
     animation: fadeOut 0.3s ease-in-out forwards;
   }
+
+  /* Responsive adjustments for smaller windows */
+  @media screen and (max-width: 1024px) {
+    padding: 0.75rem;
+  }
+
+  @media screen and (max-width: 768px) {
+    max-width: calc(100vw - 2 * 1rem);
+    padding: 0.5rem;
+  }
 }
 
 .closeButton {
@@ -102,3 +112,24 @@
     opacity: 0;
   }
 }
+
+/* Styling for submit buttons within modals */
+.submitButton {
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+/* Responsive button styling for modals */
+@media screen and (max-width: 1024px) {
+  .submitButton {
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .submitButton {
+    margin-top: 0.75rem;
+    margin-bottom: 0.25rem;
+  }
+}
diff --git a/front-end/src/components/ui/uploadForm/UploadForm.module.scss b/front-end/src/components/ui/uploadForm/UploadForm.module.scss
index b6421d58..fc1e2e0b 100644
--- a/front-end/src/components/ui/uploadForm/UploadForm.module.scss
+++ b/front-end/src/components/ui/uploadForm/UploadForm.module.scss
@@ -15,6 +15,23 @@
   border-radius: 10px;
   overflow: hidden;
 
+  /* Responsive styles for smaller screens */
+  @media screen and (max-width: 1200px) {
+    min-width: 30rem;
+    min-height: 18rem;
+  }
+
+  @media screen and (max-width: 1000px) {
+    min-width: 25rem;
+    min-height: 16rem;
+  }
+
+  @media screen and (max-width: 850px) {
+    min-width: auto;
+    width: 100%;
+    min-height: 14rem;
+  }
+
   &:hover {
     cursor: pointer;
     .uploadFormContent {
@@ -72,6 +89,16 @@
     height: 10rem;
     transition: opacity 1s ease;
     pointer-events: none;
+
+    @media screen and (max-width: 1000px) {
+      width: 12rem;
+      height: 8rem;
+    }
+
+    @media screen and (max-width: 850px) {
+      width: 10rem;
+      height: 6.5rem;
+    }
   }
 
   .uploadFormContent {
@@ -86,6 +113,21 @@
     width: fit-content;
     transition: transform 0.3s ease, filter 0.3s ease, border-color 0.3s ease;
 
+    @media screen and (max-width: 1200px) {
+      padding: 1.5rem 3rem;
+      gap: 1rem;
+    }
+
+    @media screen and (max-width: 1000px) {
+      padding: 1.25rem 2rem;
+      gap: 0.75rem;
+    }
+
+    @media screen and (max-width: 850px) {
+      padding: 1rem 1.5rem;
+      gap: 0.5rem;
+    }
+
     &.disabled {
       display: none;
     }
@@ -99,6 +141,16 @@
       height: 3.125rem;
       //mix-blend-mode: overlay; // This gets fucked by the filter and transform
       opacity: 0.8;
+
+      @media screen and (max-width: 1000px) {
+        width: 2.5rem;
+        height: 2.5rem;
+      }
+
+      @media screen and (max-width: 850px) {
+        width: 2rem;
+        height: 2rem;
+      }
     }
 
     .text, .textHover {
diff --git a/front-end/src/pages/Homepage/Homepage.module.scss b/front-end/src/pages/Homepage/Homepage.module.scss
index 96609ee8..d66e1689 100644
--- a/front-end/src/pages/Homepage/Homepage.module.scss
+++ b/front-end/src/pages/Homepage/Homepage.module.scss
@@ -12,11 +12,30 @@
 
   .body {
     padding-top: 2rem;
+    padding-right: 1rem;
     flex-grow: 1;
-    
   }
 
   .footerWrapper {
     margin-top: auto;
   }
+}
+
+/* Responsive styles for smaller desktop windows */
+@media screen and (max-width: 1200px) {
+  .homepage {
+    .body {
+      padding-right: 0.75rem;
+      padding-left: 0.5rem;
+    }
+  }
+}
+
+@media screen and (max-width: 1000px) {
+  .homepage {
+    .body {
+      padding-right: 0.5rem;
+      padding-left: 0.5rem;
+    }
+  }
 }
\ No newline at end of file
diff --git a/front-end/src/styles/_mixins.scss b/front-end/src/styles/_mixins.scss
index 315f8ce7..7ae9e91e 100644
--- a/front-end/src/styles/_mixins.scss
+++ b/front-end/src/styles/_mixins.scss
@@ -1,5 +1,15 @@
 // File contains common mixins used in the project
 
+@use 'variables' as variables;
+@use 'sass:map';
+
+// Responsive breakpoint mixin
+@mixin respond-to($breakpoint) {
+  @media screen and (max-width: map.get(variables.$breakpoints, $breakpoint)) {
+    @content;
+  }
+}
+
 @mixin scrollbar-dark {
   overflow-y: scroll;
 
diff --git a/front-end/src/styles/_variables.scss b/front-end/src/styles/_variables.scss
index 323b2ac1..2cbb23c1 100644
--- a/front-end/src/styles/_variables.scss
+++ b/front-end/src/styles/_variables.scss
@@ -54,3 +54,10 @@ $z-index: (
   loading: 7,
   graphHeader: 1,
 );
+// Responsive breakpoints
+$breakpoints: (
+  ultrawide: 1600px,
+  desktop: 1400px,
+  tablet: 1024px,
+  mobile: 768px,
+);
\ No newline at end of file