diff --git a/example-site/content/sections/interests/hobbies.json b/example-site/content/sections/interests/hobbies.json
new file mode 100644
index 0000000..4f81aee
--- /dev/null
+++ b/example-site/content/sections/interests/hobbies.json
@@ -0,0 +1,30 @@
+{
+    "interests": [
+        {
+            "label": "Gaming",
+            "image": {
+                "src": "../../images/joystick.png",
+                "alt": ""
+            }
+        },
+        {
+            "label": "Surfing the Web",
+            "image": {
+                "src": "../../images/notebook.png",
+                "alt": ""
+            }
+        },
+        {
+            "label": "Mobile Games",
+            "image": {
+                "src": "../../images/mobile-phone.png",
+                "alt": ""
+            }
+        }
+    ],
+    "button": {
+        "visible": false,
+        "label": "+ Load More",
+        "initiallyShownInterests": 5
+    }
+}
diff --git a/example-site/src/pages/index.js b/example-site/src/pages/index.js
index 49fe864..ae4dffa 100644
--- a/example-site/src/pages/index.js
+++ b/example-site/src/pages/index.js
@@ -21,6 +21,7 @@ export default function IndexPage() {
                 <InterestsSection sectionId="details" heading="Details" />
                 <ProjectsSection sectionId="features" heading="Built-in Features" />
                 <ProjectsSection sectionId="more-features" heading="Advanced Features" fileName="more_projects" />
+                <InterestsSection sectionId="hobbies" heading="Hobbies" fileName='hobbies'/>
                 <ContactSection sectionId="github" heading="Issues?" />
             </Page>
         </>
diff --git a/gatsby-theme-portfolio-minimal/README.md b/gatsby-theme-portfolio-minimal/README.md
index 8d3e604..1c630c0 100644
--- a/gatsby-theme-portfolio-minimal/README.md
+++ b/gatsby-theme-portfolio-minimal/README.md
@@ -193,6 +193,7 @@ content
     │     └── hero.json # has to be JSON
     │ └── interests
     │     └── interests.json # has to be JSON
+    │     └── more_interests.json # has to be JSON
     │ └── legal
     │     └── imprint.md # has to be Markdown
     │ └── projects
@@ -271,14 +272,14 @@ Most section components work the following way: You import and configure the com
 
 The following table shows which section components are available and how they can be configured.
 
-| Section Component  | Available Props                                                                                          | Associated Content File                               |
-|--------------------|----------------------------------------------------------------------------------------------------------|-------------------------------------------------------|
-| `AboutSection`     | `sectionId` _(required)_ <br/> `heading` _(optional)_                                                    | `*contentRootDir*/sections/about/*yourFile*.md`       |
-| `ContactSection`   | `sectionId` _(required)_ <br/> `heading` _(optional)_                                                    | `*contentRootDir*/sections/contact/*yourFile*.json`   |
-| `HeroSection`      | `sectionId` _(required)_                                                                                 | `*contentRootDir*/sections/hero/*yourFile*.json`      |
-| `InterestsSection` | `sectionId` _(required)_ <br/> `heading` _(optional)_                                                    | `*contentRootDir*/sections/interests/*yourFile*.json` |
-| `LegalSection`     | `sectionId` _(required)_ <br/> `heading` _(optional)_                                                    | `*contentRootDir*/sections/legal/*yourFile*.md`       |
-| `ProjectsSection`  | `sectionId` _(required)_ <br/> `heading` _(optional)_ <br/> `fileName` _(optional, default: "projects")_ | `*contentRootDir*/sections/projects/*fileName*.json`  |
+| Section Component  | Available Props                                                                                           | Associated Content File                               |
+|--------------------|-----------------------------------------------------------------------------------------------------------|-------------------------------------------------------|
+| `AboutSection`     | `sectionId` _(required)_ <br/> `heading` _(optional)_                                                     | `*contentRootDir*/sections/about/*yourFile*.md`       |
+| `ContactSection`   | `sectionId` _(required)_ <br/> `heading` _(optional)_                                                     | `*contentRootDir*/sections/contact/*yourFile*.json`   |
+| `HeroSection`      | `sectionId` _(required)_                                                                                  | `*contentRootDir*/sections/hero/*yourFile*.json`      |
+| `InterestsSection` | `sectionId` _(required)_ <br/> `heading` _(optional)_ <br/> `fileName` _(optional, default: "interests")_ | `*contentRootDir*/sections/interests/*fileName*.json` |
+| `LegalSection`     | `sectionId` _(required)_ <br/> `heading` _(optional)_                                                     | `*contentRootDir*/sections/legal/*yourFile*.md`       |
+| `ProjectsSection`  | `sectionId` _(required)_ <br/> `heading` _(optional)_ <br/> `fileName` _(optional, default: "projects")_  | `*contentRootDir*/sections/projects/*fileName*.json`  |
 
 #### Utility Components
 
diff --git a/gatsby-theme-portfolio-minimal/src/sections/Interests/data.tsx b/gatsby-theme-portfolio-minimal/src/sections/Interests/data.tsx
index 8138afc..dc65d09 100644
--- a/gatsby-theme-portfolio-minimal/src/sections/Interests/data.tsx
+++ b/gatsby-theme-portfolio-minimal/src/sections/Interests/data.tsx
@@ -2,16 +2,20 @@ import { graphql, useStaticQuery } from 'gatsby';
 import { ImageObject } from '../../types';
 
 interface InterestsSectionQueryResult {
-    allInterestsJson: {
-        sections: {
-            button: {
-                initiallyShownInterests: number;
-                label: string;
-                visible: boolean;
-            };
-            interests: {
-                image: ImageObject;
-                label: string;
+    allFile: {
+        interestsFiles: {
+            name: string;
+            relativePath: string;
+            section: {
+                button: {
+                    initiallyShownInterests: number;
+                    label: string;
+                    visible: boolean;
+                };
+                interests: {
+                    image: ImageObject;
+                    label: string;
+                }[];
             }[];
         }[];
     };
@@ -19,25 +23,31 @@ interface InterestsSectionQueryResult {
 
 export const useLocalDataSource = (): InterestsSectionQueryResult => {
     return useStaticQuery(graphql`
-        query InterestsSectionQuery {
-            allInterestsJson {
-                sections: nodes {
-                    button {
-                        initiallyShownInterests
-                        label
-                        visible
-                    }
-                    interests {
-                        image {
-                            alt
-                            src {
-                                childImageSharp {
-                                    gatsbyImageData(width: 20, height: 20)
+        query InterestsByFilename {
+            allFile(filter: { childInterestsJson: { id: { ne: null } } }) {
+                interestsFiles: nodes {
+                    name
+                    relativePath
+                    section: children {
+                        ... on InterestsJson {
+                            button {
+                                initiallyShownInterests
+                                label
+                                visible
+                            }
+                            interests {
+                                image {
+                                    alt
+                                    src {
+                                        childImageSharp {
+                                            gatsbyImageData(width: 20, height: 20)
+                                        }
+                                    }
+                                    objectFit
                                 }
+                                label
                             }
-                            objectFit
                         }
-                        label
                     }
                 }
             }
diff --git a/gatsby-theme-portfolio-minimal/src/sections/Interests/index.tsx b/gatsby-theme-portfolio-minimal/src/sections/Interests/index.tsx
index 7a34fd5..90da127 100644
--- a/gatsby-theme-portfolio-minimal/src/sections/Interests/index.tsx
+++ b/gatsby-theme-portfolio-minimal/src/sections/Interests/index.tsx
@@ -9,22 +9,27 @@ import * as classes from './style.module.css';
 
 export function InterestsSection(props: PageSection): React.ReactElement {
     const response = useLocalDataSource();
-    const data = response.allInterestsJson.sections[0];
-    const shouldShowButton = data.button.visible !== false;
-    const initiallyShownInterests = data.button.initiallyShownInterests ?? 5;
+    const allFiles = response.allFile.interestsFiles;
+    const fileNameNeedle = props.fileName ? props.fileName : 'interests';
+    const result = allFiles.find((file) => {
+        return file.name == fileNameNeedle;
+    });
+    const section = result ? result.section[0] : allFiles[0].section[0];
+    const shouldShowButton = section.button.visible !== false;
+    const initiallyShownInterests = section.button.initiallyShownInterests ?? 5;
     const [shownInterests, setShownInterests] = React.useState<number>(
-        shouldShowButton ? initiallyShownInterests : data.interests.length,
+        shouldShowButton ? initiallyShownInterests : section.interests.length,
     );
 
     function loadMoreHandler() {
-        setShownInterests(data.interests.length);
+        setShownInterests(section.interests.length);
     }
 
     return (
         <Animation type="fadeUp">
             <Section anchor={props.sectionId} heading={props.heading}>
                 <div className={classes.Interests}>
-                    {data.interests.slice(0, shownInterests).map((interest, key) => {
+                    {section.interests.slice(0, shownInterests).map((interest, key) => {
                         return (
                             <Animation key={key} className={classes.Interest} type="scaleIn" delay={key * 100}>
                                 {interest.image.src && (
@@ -38,12 +43,12 @@ export function InterestsSection(props: PageSection): React.ReactElement {
                             </Animation>
                         );
                     })}
-                    {shouldShowButton && shownInterests < data.interests.length && (
+                    {shouldShowButton && shownInterests < section.interests.length && (
                         <Animation type="scaleIn" delay={(shownInterests + 1) * 100}>
                             <Button
                                 type={ButtonType.BUTTON}
                                 onClickHandler={loadMoreHandler}
-                                label={data.button.label}
+                                label={section.button.label}
                             />
                         </Animation>
                     )}