diff --git a/client/dist/assets/fullscreen-icon.png b/client/dist/assets/fullscreen-icon.png
new file mode 100644
index 00000000..d7e7a2dd
Binary files /dev/null and b/client/dist/assets/fullscreen-icon.png differ
diff --git a/client/dist/assets/left-arrow-icon.png b/client/dist/assets/left-arrow-icon.png
new file mode 100644
index 00000000..871ecacd
Binary files /dev/null and b/client/dist/assets/left-arrow-icon.png differ
diff --git a/client/dist/assets/right-arrow-icon.png b/client/dist/assets/right-arrow-icon.png
new file mode 100644
index 00000000..0a955c6c
Binary files /dev/null and b/client/dist/assets/right-arrow-icon.png differ
diff --git a/client/src/components/App.jsx b/client/src/components/App.jsx
index 3b5ecc1d..0cb4cd84 100644
--- a/client/src/components/App.jsx
+++ b/client/src/components/App.jsx
@@ -1,18 +1,21 @@
 import React from "react";
+import Overview from './Overview.jsx';
+import RelatedItemsAndComparison from './RelatedItemsAndComparison.jsx';
+import QuestionsAndAnswers from './QuestionsAndAnswers.jsx';
+import RatingsAndReviews from './RatingsAndReviews.jsx';
 
 class App extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-    }
+    this.state = {}
   }
   render() {
-    const { name } = this.props;
     return (
       <>
-        <h1>
-          Hello World!
-        </h1>
+        <Overview />
+        <RelatedItemsAndComparison />
+        <QuestionsAndAnswers />
+        <RatingsAndReviews />
       </>
     );
   }
diff --git a/client/src/components/Overview.jsx b/client/src/components/Overview.jsx
new file mode 100644
index 00000000..60fab950
--- /dev/null
+++ b/client/src/components/Overview.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+const Overview = () => {
+  return (
+    // Overview Components go here
+    <></>
+  );
+}
+
+export default Overview;
\ No newline at end of file
diff --git a/client/src/components/QuestionsAndAnswers.jsx b/client/src/components/QuestionsAndAnswers.jsx
new file mode 100644
index 00000000..69c09722
--- /dev/null
+++ b/client/src/components/QuestionsAndAnswers.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+const QuestionsAndAnswers = () => {
+  return (
+    // Questions and Answers Components go here
+    <></>
+  );
+}
+
+export default QuestionsAndAnswers;
\ No newline at end of file
diff --git a/client/src/components/RatingsAndReviews.jsx b/client/src/components/RatingsAndReviews.jsx
new file mode 100644
index 00000000..7345fcc6
--- /dev/null
+++ b/client/src/components/RatingsAndReviews.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+const RatingsAndReviews = () => {
+  return (
+    // Ratings and Reviews Components go here
+    <></>
+  );
+}
+
+export default RatingsAndReviews;
\ No newline at end of file
diff --git a/client/src/components/RelatedItemsAndComparison.jsx b/client/src/components/RelatedItemsAndComparison.jsx
new file mode 100644
index 00000000..960aa92b
--- /dev/null
+++ b/client/src/components/RelatedItemsAndComparison.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+const RelatedItemsAndComparison = () => {
+  return (
+    // Related Items and Comparison Components go here
+    <></>
+  );
+}
+
+export default RelatedItemsAndComparison;
\ No newline at end of file
diff --git a/client/src/styles.scss b/client/src/styles.scss
index e69de29b..6e9600b9 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -0,0 +1 @@
+@import './styles/overview.scss';
\ No newline at end of file
diff --git a/client/src/styles/overview.scss b/client/src/styles/overview.scss
new file mode 100644
index 00000000..e69de29b