diff --git a/package.json b/package.json
index 20dded9..ee34480 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "react-bootstrap": "^1.6.1",
     "react-dom": "^17.0.2",
     "react-markdown": "^8.0.3",
+    "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.3.0",
     "react-scripts": "4.0.3",
     "react-slick": "^0.28.1",
@@ -32,6 +33,7 @@
     "react-tabs": "^3.2.2",
     "react-typing-animation": "^1.6.2",
     "remarkable": "^2.0.1",
+    "style-loader": "^3.3.1",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },
diff --git a/src/components/blog-card/BlogCard.css b/src/components/blog-card/BlogCard.css
index 2248be6..896a903 100644
--- a/src/components/blog-card/BlogCard.css
+++ b/src/components/blog-card/BlogCard.css
@@ -1,7 +1,7 @@
 
 @media only screen and (max-width: 768px) {
     .blog-card {
-        margin-top: 100px;
+        margin-top: 10px;
     }
 }
 
diff --git a/src/components/blogs/Blogs.tsx b/src/components/blogs/Blogs.tsx
index 08e51a5..5cd4640 100644
--- a/src/components/blogs/Blogs.tsx
+++ b/src/components/blogs/Blogs.tsx
@@ -9,7 +9,7 @@ export default function Blogs() {
 
     return (
         <div className={"child"}>
-            <div className={"row"} style={{alignContent: "center", padding: 50}}>
+            <div className={"row"} style={{alignContent: "center"}}>
                 {AllBlogs.reverse().map((blog, i) => {
                     blogId++;
                     if(!blog.private) {
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
index 150ee32..24050c7 100644
--- a/src/components/footer/Footer.tsx
+++ b/src/components/footer/Footer.tsx
@@ -4,8 +4,8 @@ export default function Footer() {
     return (
         <footer>
             <div style={{height: 12, marginTop: -50}}>
-                <p style={{color: "grey"}} className={"m-0"}>Originally created by Nicholas Orlowsky - Licensed under GNU General Public License v3 - Original source available <a href={"https://github.com/nickorlow/personal-site"}>here</a></p>
-                <p>Hosting provided by <a href={"https://nws.nickorlow.com"}>Nick Web Services (NWS)</a></p>
+                <p style={{color: "grey"}} className={"m-0 small"}>Originally created by Nicholas Orlowsky - Licensed under GNU General Public License v3 - Original source available <a href={"https://github.com/nickorlow/personal-site"}>here</a></p>
+                <p className={"small"}>Hosting provided by <a href={"https://nws.nickorlow.com"}>Nick Web Services (NWS)</a></p>
             </div>
         </footer>
     )
diff --git a/src/components/hobbies/Hobbies.tsx b/src/components/hobbies/Hobbies.tsx
index b4c3e91..6035a5a 100644
--- a/src/components/hobbies/Hobbies.tsx
+++ b/src/components/hobbies/Hobbies.tsx
@@ -1,8 +1,12 @@
 import {AllHobbies} from "../../static/data/Hobbies";
 import InfoCard from "../info-card/InfoCard";
-import React from "react";
+import React, {useState} from "react";
+import {AllJobs} from "../../static/data/Jobs";
+import {Carousel} from "react-bootstrap";
+import JobCard from "../job-card/JobCard";
 
 export default function Hobbies () {
+    const [cur, setCur] = useState(1);
     return (
         <div className={"child"} style={{minHeight: "100vh"}}>
             <div style={{
@@ -10,13 +14,30 @@ export default function Hobbies () {
                 justifyContent: "center",
                 flexDirection: "column",
                 width: "96vw",
+                height: "100vh",
                 minHeight: "100vh",
                 alignContent: "center",
                 alignItems: "center"
             }}>
-                <h1>Other Hobbies</h1>
-                {AllHobbies.map((hobby) => <InfoCard style={{textAlign: "left", maxWidth: "50vmax", margin: 50}}
-                                                     info={hobby}/>)}
+                <div className={"d-md-block d-none"}>
+                    <h1>Other Hobbies</h1>
+                    {AllHobbies.map((hobby) => <InfoCard style={{textAlign: "left", maxWidth: "50vmax", margin: 50}}
+                                                         info={hobby}/>)}
+                </div>
+
+                <div className={"align-content-center d-md-none"}>
+                    <h1 className={"mb-4"}>Other Hobbies</h1>
+                    <p>{cur}/{AllHobbies.length}</p>
+                    <Carousel controls={false} interval={null} onSlide={(e)=>{setCur(e+1)}} indicators={false} wrap={false}>
+                        {AllHobbies.map((hobby, i) =>
+                            <Carousel.Item>
+                                <InfoCard style={{textAlign: "left", maxWidth: "50vmax", margin: 50}}
+                                          info={hobby}/>
+                            </Carousel.Item>
+                        )}
+                    </Carousel>
+
+                </div>
             </div>
         </div>
     )
diff --git a/src/components/job-card/JobCard.tsx b/src/components/job-card/JobCard.tsx
index 800b9db..e750148 100644
--- a/src/components/job-card/JobCard.tsx
+++ b/src/components/job-card/JobCard.tsx
@@ -5,10 +5,10 @@ import "./JobCard.css";
 
 export default function JobCard(props: {style?: any, className?: string, job: Job}){
     return (
-        <ScrollAnimation className={"job-card "+(props.className || "")} style={props.style} animateIn="fade-up" duration={2} animateOnce={true} offset={50} delay={200}>
+        <ScrollAnimation className={"job-card "+(props.className || "")} style={props.style} animateIn={"no-fade-up"} initiallyVisible={true} duration={2} animateOnce={true} offset={50} delay={200}>
             <div className={"row"} style={{paddingTop: 40}}>
                 <div  className={"col-md-4"}>
-                    <img className={"float-left float-md-none"} alt={props.job.company+" company logo"} src={props.job.image} style={{paddingLeft: 20, objectFit: "contain" ,height: "auto", maxWidth: 300}}/>
+                    <img className={"float-left float-md-none"} alt={props.job.company+" company logo"} src={props.job.image} style={{objectFit: "contain" ,height: "auto", width: "300px", maxWidth: '100%'}}/>
                 </div>
                 <div className={"col-md-8 row"}>
                     <div className={"col-md-6 text-left"}>
@@ -17,9 +17,9 @@ export default function JobCard(props: {style?: any, className?: string, job: Jo
                         {props.job.uri != null && <a href={props.job.uri}><h5>{props.job.company}</h5></a>}
                         <p>{props.job.timespan}</p>
                     </div>
-                    <ul  className={"col-md-6 text-left"}>
+                    <div  className={"col-md-6 text-left"}>
                         {props.job.items.map((s) =>  <li>{s}</li>)}
-                    </ul>
+                    </div>
                 </div>
             </div>
         </ScrollAnimation>
diff --git a/src/components/jobs/Jobs.tsx b/src/components/jobs/Jobs.tsx
index 1094e11..3254839 100644
--- a/src/components/jobs/Jobs.tsx
+++ b/src/components/jobs/Jobs.tsx
@@ -1,15 +1,30 @@
 import {AllJobs} from "../../static/data/Jobs";
 import JobCard from "../job-card/JobCard";
-import React from "react";
+import React, {useState} from "react";
 import "./Jobs.css";
+import {Carousel} from "react-bootstrap";
+
 
 export default function Jobs() {
+    const [cur, setCur] = useState(1);
     return (
         <div className={"child"} style={{minHeight: "100vh"}}>
-            <div style={{alignContent: "center", padding: 50}}>
+            <div className={"align-content-center d-md-block d-none"}>
                 <h1 style={{marginBottom: 40}}>Work</h1>
                 {AllJobs.map((job, i) =><JobCard job={job}/>)}
             </div>
+            <div className={"align-content-center d-md-none"}>
+                <h1 className={"mb-4"}>Work</h1>
+                <p>{cur}/{AllJobs.length}</p>
+                <Carousel controls={false} interval={null} onSlide={(e)=>{setCur(e+1)}} indicators={false} wrap={false}>
+                    {AllJobs.map((job, i) =>
+                        <Carousel.Item>
+                            <JobCard job={job}/>
+                        </Carousel.Item>
+                    )}
+                </Carousel>
+
+            </div>
         </div>
     )
 }
diff --git a/src/components/projects/Projects.tsx b/src/components/projects/Projects.tsx
index b8c08fb..de52921 100644
--- a/src/components/projects/Projects.tsx
+++ b/src/components/projects/Projects.tsx
@@ -1,8 +1,11 @@
 import {AllProjects} from "../../static/data/Projects";
 import InfoCard from "../info-card/InfoCard";
-import React from "react";
+import React, {useState} from "react";
+import {AllHobbies} from "../../static/data/Hobbies";
+import {Carousel} from "react-bootstrap";
 
 export default function Projects() {
+    const [cur, setCur] = useState(1);
     return (
         <div className={"child"} style={{minHeight: "100vh"}}>
 
@@ -15,14 +18,29 @@ export default function Projects() {
                 alignContent: "center",
                 alignItems: "center"
             }}>
-                <h1>Projects</h1>
-                <p>(writing code is my biggest hobby)</p>
-                <div className={"row m-0"} style={{justifyContent: "center", padding: 20}}>
-                    {AllProjects.map((project) => <InfoCard className={"col-md-6"} style={{textAlign: "left",marginTop: 35, paddingLeft: 20, paddingRight: 20}}
-                                                            info={project}/>)}
-                </div>
-                <a href={"https://github.com/nickorlow"}>More on GitHub</a>
 
+                <div className={"align-content-center d-md-block d-none"}>
+                    <h1>Projects</h1>
+                    <p>(writing code is my biggest hobby)</p>
+                    <div className={"row m-0"} style={{justifyContent: "center", padding: 20}}>
+                        {AllProjects.map((project) => <InfoCard className={"col-md-6"} style={{textAlign: "left",marginTop: 35, paddingLeft: 20, paddingRight: 20}}
+                                                                info={project}/>)}
+                    </div>
+                    <a href={"https://github.com/nickorlow"}>More on GitHub</a>
+                </div>
+                <div className={"align-content-center d-md-none"}>
+                    <h1 className={"mb-4"}>Projects</h1>
+                    <p>{cur}/{AllProjects.length}</p>
+                    <Carousel controls={false} interval={null} onSlide={(e)=>{setCur(e+1)}} indicators={false} wrap={false}>
+                        {AllProjects.map((project, i) =>
+                            <Carousel.Item>
+                                <InfoCard className={"col-md-6"} style={{textAlign: "left",marginTop: 35, paddingLeft: 20, paddingRight: 20}}
+                                          info={project}/>
+                            </Carousel.Item>
+                        )}
+                    </Carousel>
+
+                </div>
             </div>
         </div>
     )