diff --git a/packages/cyberstorm/package.json b/packages/cyberstorm/package.json
index c8b247a95..0ea6e11c7 100644
--- a/packages/cyberstorm/package.json
+++ b/packages/cyberstorm/package.json
@@ -37,6 +37,7 @@
     "react": "^18.2.0",
     "react-data-table-component": "^7.5.3",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.48.2",
     "react-markdown": "^8.0.7",
     "remark-gfm": "^3.0.1",
     "styled-components": "^6.0.0-rc.5",
diff --git a/packages/cyberstorm/src/components/Layout/PackageDetailLayout/forms.tsx b/packages/cyberstorm/src/components/Layout/PackageDetailLayout/forms.tsx
new file mode 100644
index 000000000..659a695c0
--- /dev/null
+++ b/packages/cyberstorm/src/components/Layout/PackageDetailLayout/forms.tsx
@@ -0,0 +1,52 @@
+import { Dispatch, SetStateAction } from "react";
+
+export async function sessionFetchLikedPackages(
+  session: { sessionid: string; liked_packages: string[] },
+  liked,
+  setLiked: Dispatch<SetStateAction<boolean>>,
+  community: string,
+  packageId: string
+): Promise<{ success: boolean; message: string }> {
+  const payload = JSON.stringify({
+    target_state: packageId in session.liked_packages ? false : true,
+  });
+  const res = await fetch(
+    `https://thunderstore.io/c/${community}/api/v1/package/${packageId}/rate/`,
+    {
+      method: "POST",
+      headers: {
+        authorization: `Session ${session.sessionid}`,
+        "Content-Type": "application/json",
+      },
+      body: payload,
+    }
+  );
+
+  return { success: res.status === 200, message: res.statusText };
+}
+
+export async function actionPackageRate(
+  session: { sessionid: string; liked_packages: string[] },
+  liked,
+  setLiked: Dispatch<SetStateAction<boolean>>,
+  community: string,
+  packageId: string
+): Promise<{ success: boolean; message: string }> {
+  const payload = JSON.stringify({
+    target_state: packageId in session.liked_packages ? false : true,
+  });
+  const res = await fetch(
+    `https://thunderstore.io/c/${community}/api/v1/package/${packageId}/rate/`,
+    {
+      method: "POST",
+      headers: {
+        authorization: `Session ${session.sessionid}`,
+        "Content-Type": "application/json",
+      },
+      body: payload,
+    }
+  );
+  sessionFetchLikedPackages();
+
+  return { success: res.status === 200, message: res.statusText };
+}
diff --git a/packages/cyberstorm/src/components/Layout/Teams/TeamsLayout.tsx b/packages/cyberstorm/src/components/Layout/Teams/TeamsLayout.tsx
index c59370ad9..1ef8ae060 100644
--- a/packages/cyberstorm/src/components/Layout/Teams/TeamsLayout.tsx
+++ b/packages/cyberstorm/src/components/Layout/Teams/TeamsLayout.tsx
@@ -11,11 +11,27 @@ import { Dialog } from "../../Dialog/Dialog";
 import { TextInput } from "../../TextInput/TextInput";
 import { PageHeader } from "../BaseLayout/PageHeader/PageHeader";
 import { Alert } from "../../Alert/Alert";
+import { useForm, useController, UseControllerProps } from "react-hook-form";
 
 /**
  * View for listing and managing authenticated user's teams.
  */
+
 export function TeamsLayout() {
+  const { handleSubmit, control } = useForm<{ teamName: string }>({
+    defaultValues: {
+      teamName: "",
+    },
+    mode: "onChange",
+  });
+  const onSubmit = (data: { teamName: string }) => console.log(data);
+  const asd = {
+    control: control,
+    name: "teamName",
+    rules: { required: true },
+  } as UseControllerProps<{ teamName: string }>;
+  const { field, fieldState } = useController(asd);
+
   return (
     <BaseLayout
       breadCrumb={
@@ -40,7 +56,13 @@ export function TeamsLayout() {
                       can contain the characters a-z A-Z 0-9 _ and must not
                       start or end with an _
                     </div>
-                    <TextInput placeHolder="Team name" />
+                    <form onSubmit={handleSubmit(onSubmit)}>
+                      <TextInput {...field} placeHolder="Team name" />
+                      <p>{fieldState.isTouched && "Touched"}</p>
+                      <p>{fieldState.isDirty && "Dirty"}</p>
+                      <p>{fieldState.invalid ? "invalid" : "valid"}</p>
+                      <input type="submit" />
+                    </form>
                   </div>
                 }
                 trigger={
diff --git a/yarn.lock b/yarn.lock
index ea285054e..0e23e0084 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14055,6 +14055,11 @@ react-hook-form@^7.34.2:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.43.9.tgz#84b56ac2f38f8e946c6032ccb760e13a1037c66d"
   integrity sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ==
 
+react-hook-form@^7.48.2:
+  version "7.48.2"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.48.2.tgz#01150354d2be61412ff56a030b62a119283b9935"
+  integrity sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A==
+
 react-inspector@^6.0.0:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-6.0.2.tgz#aa3028803550cb6dbd7344816d5c80bf39d07e9d"