diff --git a/.ruby-version b/.ruby-version
index 4560fb9..49cdd66 100644
--- a/.ruby-version
+++ b/.ruby-version
@@ -1 +1 @@
-ruby-2.6.3
+2.7.6
diff --git a/app/controllers/guitars_controller.rb b/app/controllers/guitars_controller.rb
new file mode 100644
index 0000000..92e9a6e
--- /dev/null
+++ b/app/controllers/guitars_controller.rb
@@ -0,0 +1,24 @@
+class GuitarsController < ApplicationController
+    def index
+      render :json => [
+          {
+              'name':'guitar1',
+              'url':'https://rukminim1.flixcart.com/image/416/416/acoustic-guitar/x/8/w/topaz-blue-signature-original-imaefec7uhypjdr9.jpeg?q=70',
+              'price':'100',
+              'description':'blablabla 1'
+          },
+          {
+              'name':'guitar2',
+              'url':'https://shop.brianmayguitars.co.uk/user/special/content/Antique%20Cherry%20a.jpg',
+              'price':'200',
+              'description':'blablabla 2'
+          },
+          {
+              'name':'guitar3',
+              'url':'https://cdn.mos.cms.futurecdn.net/Yh6r74b8CAj2jbdf2FAhq4-970-80.jpg.webp',
+              'price':'300',
+              'description':'blablabla 3'
+          }
+      ]
+    end
+  end
diff --git a/app/controllers/user_controller.rb b/app/controllers/user_controller.rb
deleted file mode 100644
index d1af404..0000000
--- a/app/controllers/user_controller.rb
+++ /dev/null
@@ -1,7 +0,0 @@
-class UserController < ApplicationController
-  def index
-    render :json => [
-      'admin', 'guest'
-    ]
-  end
-end
diff --git a/app/javascript/components/GuitarGallery.js b/app/javascript/components/GuitarGallery.js
new file mode 100644
index 0000000..c7677d6
--- /dev/null
+++ b/app/javascript/components/GuitarGallery.js
@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { Title, TitleSizes, Gallery } from '@patternfly/react-core';
+import GuitarInfo from './GuitarInfo';
+
+// Loading the data from the server:
+
+export const GuitarGallery = () => {
+  const getGuitars = async () => {
+    try {
+      const response = await axios.get('/guitars');
+      if (response.data) {
+        setGuitars(response.data);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const [guitars, setGuitars] = useState([]);
+
+  useEffect(() => {
+    getGuitars();
+  }, []);
+
+  return (
+    <div>
+      <Title headingLevel="h1" size={TitleSizes['4xl']}>
+        Guitars For Sale:
+      </Title>
+      <Gallery
+        hasGutter
+        minWidths={{
+          md: '100px',
+          lg: '150px',
+          xl: '200px',
+          '2xl': '300px'
+        }}>
+        {guitars.map(({ name, url, price, description }) => (
+          <GuitarInfo key={name} name={name} url={url} price={price} description={description} />
+        ))}
+      </Gallery>
+    </div>
+  );
+};
diff --git a/app/javascript/components/GuitarInfo.js b/app/javascript/components/GuitarInfo.js
new file mode 100644
index 0000000..3706d64
--- /dev/null
+++ b/app/javascript/components/GuitarInfo.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  GalleryItem,
+  Grid,
+  GridItem,
+  Card,
+  CardTitle,
+  CardBody,
+  CardFooter
+} from '@patternfly/react-core';
+
+const GuitarInfo = ({ name, url, price, description }) => {
+  return (
+    <GalleryItem>
+      <Card id={name} isFlat>
+        <Grid md={6}>
+          <GridItem>
+            <img className="Guitar-Image" src={url} alt="Guitar Image" />
+          </GridItem>
+          <GridItem>
+            <CardTitle>{name}</CardTitle>
+            <CardBody>Price: {price}</CardBody>
+            <CardFooter>Description: {description}</CardFooter>
+          </GridItem>
+        </Grid>
+      </Card>
+    </GalleryItem>
+  );
+};
+GuitarInfo.propTypes = {
+  name: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+  price: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired
+};
+
+export default GuitarInfo;
diff --git a/app/javascript/components/Users.js b/app/javascript/components/Users.js
deleted file mode 100644
index e267a4c..0000000
--- a/app/javascript/components/Users.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import axios from 'axios';
-import { Title, TitleSizes, List, ListItem } from '@patternfly/react-core';
-
-export const Users = () => {
-  const [users, setUsers] = useState([]);
-  useEffect(() => {
-    const getUser = async () => {
-      try {
-        const response = await axios.get('/user');
-        setUsers(response.data || []);
-      } catch (error) {
-        console.error(error);
-      }
-    };
-    getUser();
-  }, []);
-
-  return (
-    <div>
-      <Title headingLevel="h1" size={TitleSizes['4xl']}>
-        Users:
-      </Title>
-      <List>
-        {users.map((user, index) => (
-          <ListItem key={index}>{user}</ListItem>
-        ))}
-      </List>
-    </div>
-  );
-};
diff --git a/app/javascript/packs/hello_react.jsx b/app/javascript/packs/hello_react.jsx
index 35a0215..5c7d640 100644
--- a/app/javascript/packs/hello_react.jsx
+++ b/app/javascript/packs/hello_react.jsx
@@ -3,9 +3,9 @@
 // of the page.
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Users } from '../components/Users';
+import { GuitarGallery } from '../components/GuitarGallery';
 import './fonts.css';
 
 document.addEventListener('DOMContentLoaded', () => {
-  ReactDOM.render(<Users />, document.body.appendChild(document.createElement('div')));
+  ReactDOM.render(<GuitarGallery />, document.body.appendChild(document.createElement('div')));
 });
diff --git a/app/views/guitar_gallery/index.html.erb b/app/views/guitar_gallery/index.html.erb
new file mode 100644
index 0000000..f861ea2
--- /dev/null
+++ b/app/views/guitar_gallery/index.html.erb
@@ -0,0 +1,2 @@
+<h1>Guitars#index</h1>
+<p>Find me in app/views/guitars/index.html.erb</p>
diff --git a/app/views/user/index.html.erb b/app/views/user/index.html.erb
deleted file mode 100644
index c825aaf..0000000
--- a/app/views/user/index.html.erb
+++ /dev/null
@@ -1,2 +0,0 @@
-<h1>User#index</h1>
-<p>Find me in app/views/user/index.html.erb</p>
diff --git a/config/routes.rb b/config/routes.rb
index 8c9f741..db1f8fc 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -1,5 +1,5 @@
 Rails.application.routes.draw do
   root 'home#index'
-  get '/user', to: 'user#index'
+  get '/guitars', to: 'guitars#index'
   # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
 end