diff --git a/src/components/WatchFolder/index.tsx b/src/components/WatchFolder/index.tsx
index 227672c11..b16c1ecc1 100644
--- a/src/components/WatchFolder/index.tsx
+++ b/src/components/WatchFolder/index.tsx
@@ -1,5 +1,4 @@
 import { MappingList } from './mappingList';
-import { NoMappingsContent } from './noMappingsContent';
 import React, { useContext, useEffect, useState } from 'react';
 import { Button, Dialog, DialogContent, Stack } from '@mui/material';
 import watchFolderService from 'services/watchFolder/watchFolderService';
@@ -98,17 +97,10 @@ export default function WatchFolder({ open, onClose }: Iprops) {
                 </DialogTitleWithCloseButton>
                 <DialogContent sx={{ flex: 1 }}>
                     <Stack spacing={1} p={1.5} height={'100%'}>
-                        {mappings.length === 0 ? (
-                            <NoMappingsContent />
-                        ) : (
-                            <MappingList
-                                mappings={mappings}
-                                handleRemoveWatchMapping={
-                                    handleRemoveWatchMapping
-                                }
-                            />
-                        )}
-
+                        <MappingList
+                            mappings={mappings}
+                            handleRemoveWatchMapping={handleRemoveWatchMapping}
+                        />
                         <Button
                             fullWidth
                             color="accent"
diff --git a/src/components/WatchFolder/mappingList.tsx b/src/components/WatchFolder/mappingList/index.tsx
similarity index 71%
rename from src/components/WatchFolder/mappingList.tsx
rename to src/components/WatchFolder/mappingList/index.tsx
index 91633a312..940059c7c 100644
--- a/src/components/WatchFolder/mappingList.tsx
+++ b/src/components/WatchFolder/mappingList/index.tsx
@@ -1,14 +1,17 @@
 import React from 'react';
 import { WatchMapping } from 'types/watchFolder';
-import { MappingEntry } from './mappingEntry';
-import { MappingsContainer } from './styledComponents';
+import { MappingEntry } from '../mappingEntry';
+import { NoMappingsContent } from './noMappingsContent/noMappingsContent';
+import { MappingsContainer } from '../styledComponents';
 interface Iprops {
     mappings: WatchMapping[];
     handleRemoveWatchMapping: (value: WatchMapping) => void;
 }
 
 export function MappingList({ mappings, handleRemoveWatchMapping }: Iprops) {
-    return (
+    return mappings.length === 0 ? (
+        <NoMappingsContent />
+    ) : (
         <MappingsContainer>
             {mappings.map((mapping) => {
                 return (
diff --git a/src/components/WatchFolder/checkmarkIcon.tsx b/src/components/WatchFolder/mappingList/noMappingsContent/checkmarkIcon.tsx
similarity index 100%
rename from src/components/WatchFolder/checkmarkIcon.tsx
rename to src/components/WatchFolder/mappingList/noMappingsContent/checkmarkIcon.tsx
diff --git a/src/components/WatchFolder/noMappingsContent.tsx b/src/components/WatchFolder/mappingList/noMappingsContent/noMappingsContent.tsx
similarity index 94%
rename from src/components/WatchFolder/noMappingsContent.tsx
rename to src/components/WatchFolder/mappingList/noMappingsContent/noMappingsContent.tsx
index eda61870c..85a4a8749 100644
--- a/src/components/WatchFolder/noMappingsContent.tsx
+++ b/src/components/WatchFolder/mappingList/noMappingsContent/noMappingsContent.tsx
@@ -3,7 +3,7 @@ import { FlexWrapper } from 'components/Container';
 import React from 'react';
 import constants from 'utils/strings/constants';
 import { CheckmarkIcon } from './checkmarkIcon';
-import { NoMappingsContainer } from './styledComponents';
+import { NoMappingsContainer } from '../../styledComponents';
 export function NoMappingsContent() {
     return (
         <NoMappingsContainer>