diff --git a/frontend/src/components/atoms/FileCard/index.tsx b/frontend/src/components/atoms/FileCard/index.tsx
index afe8ceff9feea14a683cd9ae4e4c0b5e6d28f346..17ea3fbf8ecbc5b144ab357adf7c16c6d5edce44 100644
--- a/frontend/src/components/atoms/FileCard/index.tsx
+++ b/frontend/src/components/atoms/FileCard/index.tsx
@@ -34,7 +34,7 @@ const FileCard: React.FC<FileCardProps> = ({
     <Card className={styles.quickViewCard} onClick={onClick}>
       <Card.Img variant="top" src={graphIllustration} />
       <Card.Body>
-        <Card.Title>{title}</Card.Title>
+        <Card.Title className={"text-truncate"}>{title}</Card.Title>
         <FontAwesomeIcon
           style={{ fontSize: "1.125rem" }}
           icon={icon}
diff --git a/frontend/src/components/molecules/QuickAccess/index.tsx b/frontend/src/components/molecules/QuickAccessView/index.tsx
similarity index 97%
rename from frontend/src/components/molecules/QuickAccess/index.tsx
rename to frontend/src/components/molecules/QuickAccessView/index.tsx
index c11ad6b1321dd6ab9a7f3ec2765f5f33d595d82f..f1041ed90c6b7c7e6caba6bfeb6b475d4e7bcc41 100644
--- a/frontend/src/components/molecules/QuickAccess/index.tsx
+++ b/frontend/src/components/molecules/QuickAccessView/index.tsx
@@ -25,7 +25,7 @@ interface MyState {
   isHoveringTitle: Boolean;
 }
 
-class QuickAccess extends React.Component<QuickAccessProps, MyState> {
+class QuickAccessView extends React.Component<QuickAccessProps, MyState> {
   constructor(props: QuickAccessProps) {
     super(props);
     this.state = { isSelected: [], isHoveringOver: [], isHoveringTitle: false };
@@ -158,4 +158,4 @@ class QuickAccess extends React.Component<QuickAccessProps, MyState> {
   }
 }
 
-export default QuickAccess;
+export default QuickAccessView;
diff --git a/frontend/src/components/molecules/QuickAccess/style.module.scss b/frontend/src/components/molecules/QuickAccessView/style.module.scss
similarity index 100%
rename from frontend/src/components/molecules/QuickAccess/style.module.scss
rename to frontend/src/components/molecules/QuickAccessView/style.module.scss
diff --git a/frontend/src/components/molecules/ResourceFolders/index.tsx b/frontend/src/components/molecules/ResourcesFolderView/index.tsx
similarity index 97%
rename from frontend/src/components/molecules/ResourceFolders/index.tsx
rename to frontend/src/components/molecules/ResourcesFolderView/index.tsx
index fa0fae8dff3260e13c85a044738e1ae3fad88c00..72dcdd7e4bfa3e45c93b6fc7b1d0b766456bd78a 100644
--- a/frontend/src/components/molecules/ResourceFolders/index.tsx
+++ b/frontend/src/components/molecules/ResourcesFolderView/index.tsx
@@ -19,7 +19,7 @@ interface MyState {
   isHoveringTitle: Boolean;
 }
 
-class ResourceFolders extends React.Component<ResourceFoldersProps, MyState> {
+class ResourcesFolderView extends React.Component<ResourceFoldersProps, MyState> {
   constructor(props: ResourceFoldersProps) {
     super(props);
     this.state = { isSelected: [], isHoveringOver: [], isHoveringTitle: false };
@@ -133,4 +133,4 @@ class ResourceFolders extends React.Component<ResourceFoldersProps, MyState> {
   }
 }
 
-export default ResourceFolders;
+export default ResourcesFolderView;
diff --git a/frontend/src/components/molecules/ResourceFolders/style.module.scss b/frontend/src/components/molecules/ResourcesFolderView/style.module.scss
similarity index 100%
rename from frontend/src/components/molecules/ResourceFolders/style.module.scss
rename to frontend/src/components/molecules/ResourcesFolderView/style.module.scss
diff --git a/frontend/src/components/pages/ModuleResources/index.tsx b/frontend/src/components/pages/ModuleResources/index.tsx
index 1f521461968160779e4770a9fb51769fd447b7d3..7f30c905d9ffd236dfe17f1a522a08f9676981d6 100644
--- a/frontend/src/components/pages/ModuleResources/index.tsx
+++ b/frontend/src/components/pages/ModuleResources/index.tsx
@@ -7,8 +7,8 @@ import FormControl from "react-bootstrap/FormControl";
 import Button from "react-bootstrap/Button";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
-import QuickAccess from "components/molecules/QuickAccess";
-import ResourceFolders from "components/molecules/ResourceFolders";
+import QuickAccessView from "components/molecules/QuickAccessView";
+import ResourcesFolderView from "components/molecules/ResourcesFolderView";
 
 const ModuleResources: React.FC = () => {
   let folderItems = [
@@ -40,7 +40,7 @@ const ModuleResources: React.FC = () => {
 	
 	let quickAccessItems = [
     {
-			title: "Notes 1",
+			title: "My very very very very very long title",
 			type: "File",
 			tags:["new", "Week 1"],
       id: 0,
@@ -93,8 +93,8 @@ const ModuleResources: React.FC = () => {
         </InputGroup.Append>
       </InputGroup>
 
-      <QuickAccess quickAccessItems={quickAccessItems}/>
-      <ResourceFolders folderItems={folderItems}/>
+      <QuickAccessView quickAccessItems={quickAccessItems}/>
+      <ResourcesFolderView folderItems={folderItems}/>
     </>
   );
 };