diff --git a/Components/NavBar.js b/Components/NavBar.js
index 4af9457..a55c15e 100644
--- a/Components/NavBar.js
+++ b/Components/NavBar.js
@@ -35,7 +35,7 @@
         }
     }
 
-    onEnter() {
+ /*   onEnter() {
         if ( !this.isTouchDevice ) {
             return this.toggleVertical(this, true)
         }
@@ -44,7 +44,7 @@
     onLeave() {
         return this.toggleVertical(this, false)
     }
-
+*/
     onClick() {
         if ( this.isTouchDevice ) {
             return this.toggleVertical(this)
@@ -60,10 +60,10 @@
 	render() {
 		return (
             <>
-                <div ref={this.hoverSensor} className={(Styles.container + " " + (this.state.isOpen ? Styles.containerOpen : null))} onMouseLeave={() => {this.onLeave()}}>
+                <div ref={this.hoverSensor} className={this.isTouchDevice ? (Styles.container + " " + (this.state.isOpen ? Styles.containerOpen : null)) : Styles.containerDesktop + " " + Styles.container}>
                     <div className={Styles.group}>
-                        <img className={Styles.headerIcon} src="/Icons/CMP.svg" onMouseEnter={() => {this.onEnter()}} onClick={() => {this.onClick()}}/>
-                        <a href="/#"><img className={Styles.icon} src="/Icons/CMP.svg"/></a>
+                        <img className={Styles.headerIcon} src="/Icons/CMP.svg" onClick={() => {this.onClick()}}/>
+                        <a href="/#"><img className={Styles.icon} src="/Icons/Homepage.svg"/></a>
                         <a href="/gps#"><img className={Styles.icon} src="/Icons/GS.svg"/></a>
                         <a href="/rsm#"><img className={Styles.icon} src="/Icons/RM.svg"/></a>
                         <a href="/clicksforms#"><img className={Styles.icon} src="/Icons/CF.svg"/></a>
diff --git a/pages/clicksforms.js b/pages/clicksforms.js
index a69f314..3eb62f3 100644
--- a/pages/clicksforms.js
+++ b/pages/clicksforms.js
@@ -5,7 +5,9 @@
 import CardRow from '../Components/CardRow'
 import Header from '../Components/Header'
 import AutoSpacing from '../Components/AutoSpacing'
+import TileRow from '../Components/TileRow'
 import SectionHeading from '../Components/SectionHeading'
+import Paragraph from '../Components/Paragraph'
 
 export default function Home() {
   return (
@@ -18,6 +20,7 @@
         buttons={[
           {color: "6576CC", buttonText: "FFFFFF", link: "#features", text: "Features"},
           {color: "6576CC", buttonText: "FFFFFF", link: "#commands", text: "Commands"},
+          {color: "6576CC", buttonText: "FFFFFF", link: "#services", text: "Services"},
           {color: "775EBF", buttonText: "FFFFFF", link: "#invite", text: "Invite"}
         ]}
         hideArrow={true}
@@ -25,8 +28,32 @@
       <AutoSpacing
         elements={[
           <SectionHeading title="Features" id="features"/>,
+          <TileRow tiles={[
+            <img src="/Features/ClicksForms/Anonymous.svg" />,
+            <img src="/Features/ClicksForms/Buttons.svg" />,
+            <img src="/Features/ClicksForms/Export.svg" />,
+            <img src="/Features/ClicksForms/Forms.svg" />,
+            <img src="/Features/ClicksForms/Multichoice.svg" />,
+            <img src="/Features/ClicksForms/Questions.svg" />,
+            <img src="/Features/ClicksForms/Types.svg" />,
+            <img src="/Features/ClicksForms/Responses.svg" />,
+          ]} />,
           <SectionHeading title="Commands" id="commands"/>,
-          <SectionHeading title="Invite" id="invite"/>
+          <Paragraph><code>/accept</code>: Completes a form you are asked to fill in</Paragraph>,
+          <Paragraph><code>/apply</code>: Apply to a form</Paragraph>,
+          <Paragraph><code>/create</code>: Creates a new form</Paragraph>,
+          <Paragraph><code>/download</code>: Downloads a form from a service e.g. Google Forms</Paragraph>,
+          <Paragraph><code>/help</code>: Lists all commands</Paragraph>,
+          <Paragraph><code>/responses</code>: Lets you view responses to your servers form</Paragraph>,
+          <Paragraph><code>/manage</code>: Lets you manage your servers forms</Paragraph>,
+          <SectionHeading title="Services" id="services"/>,
+          <Paragraph>ClicksForms support services like <a href="https://forms.google.com">Google Forms</a> through our Add-on (Awaiting approval)</Paragraph>,
+          <Paragraph>Our API is public. You can view it on <a href="https://clicksminuteper.giuthub.io/docs/clicksforms">GitHub</a></Paragraph>,
+          <SectionHeading title="Invite" id="invite"/>,
+          <Paragraph>
+            ClicksForms is available for free on&nbsp;
+            <a href="https://discord.com/api/oauth2/authorize?client_id=805392054678192169&permissions=2416307200&scope=bot%20applications.commands" text="Discord">Discord</a>
+          </Paragraph>
       ]}/>
     </>
   )
diff --git a/pages/index.js b/pages/index.js
index c32a325..91f31e9 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -12,7 +12,7 @@
     <>
       <Header
         name="Clicks Minute Per"
-        subtext="We do cool stuff"
+        subtext="Custom Made Programs"
         gradient={["6576CC", "4B5899"]}
         wave="Main"
         buttons={[]}
diff --git a/styles/globals.css b/styles/globals.css
index ba7da79..1ddc94c 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -7,11 +7,16 @@
   --card-overlay-color: rgba(0, 0, 0, 0);
   --card-filter: drop-shadow(0px 0px 5px #00000080);
   --page-background: #ffffff;
+  --link-color: #6576CC;
+  --hint-color: #f1f1f1;
   /* --card-background-color: rgba(0, 0, 0, 0.65);
   --card-text-color: #ffffff;
   --card-overlay-filter: brightness(0.75);
   --card-filter: drop-shadow(0px 0px 5px #42424280);
-  --page-background: #252525; */
+  --page-background: #252525;
+  --link-color: #6576CC;
+  --hint-color: #10;
+  */
 
   background-color: var(--page-background);
 
@@ -19,8 +24,9 @@
 }
 
 a {
-  color: inherit;
   text-decoration: none;
+  transition: 0.5s ease-in-out;
+  color: var(--link-color)
 }
 
 * {
@@ -28,3 +34,14 @@
   font-family: 'Roboto', sans-serif;
   scroll-behavior: smooth;
 }
+
+code {
+  font-family: monospace;
+  font-weight: bold;
+  color: #F27878;
+  background-color: var(--hint-color);
+  padding: 2px;
+  font-size: 105%;
+  border-radius: 5px;
+  padding-left: 5px;
+}
diff --git a/styles/navbar.module.css b/styles/navbar.module.css
index 37ab894..09d3389 100644
--- a/styles/navbar.module.css
+++ b/styles/navbar.module.css
@@ -17,7 +17,6 @@
     border-radius: 32px;
     transition: 0.5s ease-in-out;
 }
-
 .group {
     display: flex;
     flex-direction: column;
@@ -50,10 +49,27 @@
 }
 
 .containerOpen {
-    max-height: 550px;
+    max-height: 460px;
 }
 
-@media screen and (min-width: 550px) {
+.containerDesktop {
+    animation-name: containerCloseOnStart;
+    animation-duration: 0.5s;
+    animation-direction: forwards;
+    animation-timing-function: ease-in-out;
+}
+
+@keyframes containerCloseOnStart {
+    from { max-height: 460px; }
+    to { max-height: 64px ; }
+}
+
+.containerDesktop:hover {
+    max-height: 460px;
+    animation-name: none;
+}
+
+@media screen and (min-width: 450px) {
     .container {
         flex-direction: row;
         justify-content: left;
@@ -87,7 +103,11 @@
         margin-left: -3px;
     }
     .containerOpen {
-        max-width: 550px;
+        max-width: 460px;
+        max-height: 64px;
+    }
+    .containerDesktop:hover {
+        max-width: 460px;
         max-height: 64px;
     }
     .icon {
@@ -95,4 +115,8 @@
         width: 50px;
         margin-left: 5px;
     }
+    @keyframes containerCloseOnStart {
+        from { max-width: 460px; }
+        to { max-width: 64px ; }
+    }
 }
\ No newline at end of file
diff --git a/styles/tilerow.module.css b/styles/tilerow.module.css
index 832b95e..701f9fc 100644
--- a/styles/tilerow.module.css
+++ b/styles/tilerow.module.css
@@ -10,4 +10,7 @@
 .item {
     display: flex;
     height: 35vmin;
+    width: fit-content;
+    margin-left: 10px;
+    margin-right: 10px;
 }
\ No newline at end of file