diff --git a/src/App.css b/src/App.css
index e8cfee5..fae14c0 100644
--- a/src/App.css
+++ b/src/App.css
@@ -35,6 +35,8 @@
   }
 }
 
-.image {
-  width:"40%";
+
+div.carousel.slide {
+  width:1300px;
+
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 919f040..ae8fda9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -171,15 +171,16 @@ export default class App extends Component {
               role="navigation"
               aria-label="main navigation"
             >
-              <div className="navbar-brand">
-                <Link to="/products">
+            <Link to="/products">
                   <Figure.Image
-                    width={200}
-                    height={200}
+                    width={300}
+                    height={300}
                     src={logo}
-                    alt="brandonImage"
+                    alt="logo"
                   />
                 </Link>
+              <div className="navbar-brand">
+                
                 <b className="navbar-item is-size-4 "></b>
                 <label
                   role="button"
@@ -202,15 +203,15 @@ export default class App extends Component {
                   this.state.showMenu ? 'is-active' : ''
                 }`}
               >
-                <Link to="/products" className="navbar-item">
+                <Link to="/products" className="navbar-item is-size-4">
                   Home
                 </Link>
                 {this.state.user && this.state.user.accessLevel < 1 && (
-                  <Link to="/add-product" className="navbar-item">
+                  <Link to="/add-product" className="navbar-item is-size-4">
                     Add Product
                   </Link>
                 )}
-                <Link to="/cart" className="navbar-item">
+                <Link to="/cart" className="navbar-item is-size-4">
                   Cart
                   <span
                     className="tag is-primary"
@@ -219,19 +220,19 @@ export default class App extends Component {
                     {Object.keys(this.state.cart).length}
                   </span>
                 </Link>
-                <Link to="/checkout" className="navbar-item">
+                <Link to="/checkout" className="navbar-item is-size-4">
                   Checkout
                   <span style={{ marginLeft: '5px' }}></span>
                 </Link>
-                <Link to="/aboutus" className="navbar-item">
+                <Link to="/aboutus" className="navbar-item is-size-4">
                   About the Team
                 </Link>
                 {!this.state.user ? (
-                  <Link to="/login" className="navbar-item">
+                  <Link to="/login" className="navbar-item is-size-4">
                     Login
                   </Link>
                 ) : (
-                  <Link to="/" onClick={this.logout} className="navbar-item">
+                  <Link to="/" onClick={this.logout} className="navbar-item is-size-4">
                     Logout
                   </Link>
                 )}
diff --git a/src/CSS/Checkout.css b/src/CSS/Checkout.css
index 67ff9d2..8455f25 100644
--- a/src/CSS/Checkout.css
+++ b/src/CSS/Checkout.css
@@ -1,11 +1,11 @@
-.padding{
+/* .padding{
   padding:5rem !important;
-  margin-left:300px;
-}
-.card {
+  margin-left:400px;
+} */
+/* .card {
   margin-bottom: 1.5rem;
-} 
-
+}  */
+/* 
 .card {
   position: relative;
   display: -ms-flexbox;
@@ -42,7 +42,7 @@
   border-color: #c8ced3 !important;
   outline: 0;
   box-shadow: 0 0 0 #F44336;
-}
+} */
 
 .carousel .item {
   height: 100px;
diff --git a/src/components/AboutUs.js b/src/components/AboutUs.js
index 98b92e0..f807dea 100644
--- a/src/components/AboutUs.js
+++ b/src/components/AboutUs.js
@@ -10,13 +10,17 @@ class AboutUs extends React.Component {
   render() {
     return(
       <>
-      <Figure.Image width="100%"
+      <div className="columns is-centered">
+      <Figure.Image width="1300px"
         max-height="50%"
         src={headerTeam}
         alt="product-header"
       />
+      </div>
+      
 
       <br></br>
+      <div className='container'>
       <div className='columns is-fluid is-size-4'>
         <div className='column is-half'>
       <div class="card is-half ml-2">
@@ -145,6 +149,7 @@ class AboutUs extends React.Component {
 
 
 
+</div>
 </div>
       </>
 
diff --git a/src/components/Cart.js b/src/components/Cart.js
index f9a4d62..8cbb6c1 100644
--- a/src/components/Cart.js
+++ b/src/components/Cart.js
@@ -17,17 +17,18 @@ const Cart = props => {
 
   return (
     <>
-      <Figure.Image width="100%"
+     <div className="columns is-centered">
+      <Figure.Image width="1300px"
         max-height="50%"
         src={headerCart}
         alt="product-header"
       />
-
+      </div>
+      
       <div className="columns is-centered">
-    <div className="column ">
     <Carousel>
   <Carousel.Item>
-  <Figure.Image width="100%"
+  <Figure.Image width="1300px"
         height={200}
         src={ad}
         alt="games-sale"
@@ -36,7 +37,7 @@ const Cart = props => {
     </Carousel.Caption>
   </Carousel.Item>
   <Carousel.Item>
-    <Figure.Image width="100%"
+    <Figure.Image width="1300px"
         height={200}
         src={adTwo}
         alt="produce-sale"
@@ -46,7 +47,7 @@ const Cart = props => {
     </Carousel.Caption>
   </Carousel.Item>
   <Carousel.Item>
-  <Figure.Image width="100%"
+  <Figure.Image width="1300px"
         height={200}
         src={adThree}
         alt="brandonImage"
@@ -57,7 +58,7 @@ const Cart = props => {
   </Carousel.Item>
 </Carousel>
 </div>
-</div>
+
 
       <div className="container">
         {cartKeys.length ? (
diff --git a/src/components/Checkout.js b/src/components/Checkout.js
index 710268e..cfcfaef 100644
--- a/src/components/Checkout.js
+++ b/src/components/Checkout.js
@@ -22,16 +22,19 @@ const CheckoutItems = (props) => {
 
   return (
     <>
-    <Figure.Image width="100%"
+    <div className="columns is-centered">
+    <Figure.Image width="1300px"
         max-height="50%"
         src={headerCheckout}
         alt="product-header"
       />
+    </div>
+
     <div className="columns is-centered">
-    <div className="column ">
+    
     <Carousel>
   <Carousel.Item>
-  <Figure.Image width="100%"
+  <Figure.Image width="1300px"
         height={200}
         src={ad}
         alt="games-sale"
@@ -40,7 +43,7 @@ const CheckoutItems = (props) => {
     </Carousel.Caption>
   </Carousel.Item>
   <Carousel.Item>
-    <Figure.Image width="100%"
+    <Figure.Image width="1300px"
         height={200}
         src={adTwo}
         alt="produce-sale"
@@ -50,7 +53,7 @@ const CheckoutItems = (props) => {
     </Carousel.Caption>
   </Carousel.Item>
   <Carousel.Item>
-  <Figure.Image width="100%"
+  <Figure.Image width="1300px"
         height={200}
         src={adThree}
         alt="brandonImage"
@@ -61,13 +64,13 @@ const CheckoutItems = (props) => {
   </Carousel.Item>
 </Carousel>
 </div>
-</div>
 
 
 
-    <div className="columns is-size-4">
-    <div className="column is-half ml-2 ">
-    <div className="card ml-6">
+    <div className="container">
+    <div className="columns">
+    <div className="column is-half  ">
+    <div className="card ml-3">
       <div className="card-header">
       <h6 className="title"> Shipping Information</h6>
       </div>
@@ -257,8 +260,8 @@ const CheckoutItems = (props) => {
       </div>
 
     
-      <div className="column is-two-fifths  ">
-      <div className="card ml-6">
+      <div className="column is-half  ">
+      <div className="card ml-2 mr-3">
         <div className="card-header ">
           <h6 className="title m-auto"> Cart </h6>
         </div>
@@ -297,7 +300,7 @@ const CheckoutItems = (props) => {
     </div>
 
     </div>
-    
+    </div>
     </>
   )
 }
diff --git a/src/components/ProductItem.js b/src/components/ProductItem.js
index c2df7b5..570d794 100644
--- a/src/components/ProductItem.js
+++ b/src/components/ProductItem.js
@@ -33,11 +33,11 @@ const ProductItem = (props) => {
             </b>
             
             <div className="is-size-6">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{product.description}</div>
-            {product.stock > 0 ? (
+            {/* {product.stock > 0 ? (
               <small>{product.stock + ' Available'}</small>
             ) : (
               <small className="has-text-danger">Out Of Stock</small>
-            )}
+            )} */}
             <div className="is-clearfix">
               <button
                 className="button is-small is-outlined is-size-6 is-primary   is-pulled-right"
diff --git a/src/components/ProductList.js b/src/components/ProductList.js
index 0371570..3019c83 100644
--- a/src/components/ProductList.js
+++ b/src/components/ProductList.js
@@ -13,18 +13,19 @@ const ProductList = props => {
 
   return (
     <>
-      
-        <Figure.Image width="100%"
+      <div className="columns is-centered">
+        <Figure.Image width="1300px"
         max-height="30%"
         src={headerProduct}
         alt="product-header"
       />
+      </div>
       
       <div className="columns is-centered">
-    <div className="column ">
+
     <Carousel>
   <Carousel.Item>
-  <Figure.Image width="100%"
+  <Figure.Image width="1300px"
         height={200}
         src={ad}
         alt="games-sale"
@@ -33,7 +34,7 @@ const ProductList = props => {
     </Carousel.Caption>
   </Carousel.Item>
   <Carousel.Item>
-    <Figure.Image width="100%"
+    <Figure.Image width="1300px"
         height={200}
         src={adTwo}
         alt="produce-sale"
@@ -43,7 +44,7 @@ const ProductList = props => {
     </Carousel.Caption>
   </Carousel.Item>
   <Carousel.Item>
-  <Figure.Image width="100%"
+  <Figure.Image width="1300px"
         height={200}
         src={adThree}
         alt="brandonImage"
@@ -54,10 +55,10 @@ const ProductList = props => {
   </Carousel.Item>
 </Carousel>
 </div>
-</div>
 
-      <div className="container">
-        <div className="column columns is-multiline  has-text-left">
+
+      <div className="container ">
+        <div className="column columns is-multiline is=half has-text-left">
           {products && products.length ? (
             products.map((product, index) => (
               <ProductItem
diff --git a/src/components/Search.js b/src/components/Search.js
index 106c6ad..be38c35 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -2,7 +2,7 @@ import { Input } from 'semantic-ui-react';
 
 const SearchComponent = (props) => {
   return (
-    <div>
+    <div className='mt-6 mr-3'>
       <Input
         type="text"
         placeholder="Search..."
diff --git a/src/images/logo.png b/src/images/logo.png
index 47cb60a..47e0ba4 100644
Binary files a/src/images/logo.png and b/src/images/logo.png differ