diff --git a/src/components/BeerIndex/BeerCard.tsx b/src/components/BeerIndex/BeerCard.tsx
index 3747f7e..962829e 100644
--- a/src/components/BeerIndex/BeerCard.tsx
+++ b/src/components/BeerIndex/BeerCard.tsx
@@ -39,7 +39,12 @@ const BeerCard: FC<{ post: z.infer<typeof BeerPostQueryResult> }> = ({ post }) =
         </div>
         <div className="flex items-end justify-between">
           <div>
-            <p className="text-md lg:text-xl">{post.style.name}</p>
+            <Link
+              className="text-md lg:text-xl hover:underline"
+              href={`/beers/styles/${post.style.id}`}
+            >
+              {post.style.name}
+            </Link>
             <div className="space-x-3">
               <span className="text-sm lg:text-lg">{post.abv.toFixed(1)}% ABV</span>
               <span className="text-sm lg:text-lg">{post.ibu.toFixed(1)} IBU</span>
diff --git a/src/components/BeerStyle/BeerStyleCard.tsx b/src/components/BeerStyle/BeerStyleCard.tsx
index 4c265fb..68d3a62 100644
--- a/src/components/BeerStyle/BeerStyleCard.tsx
+++ b/src/components/BeerStyle/BeerStyleCard.tsx
@@ -11,7 +11,7 @@ const BeerStyleCard: FC<{ beerStyle: z.infer<typeof BeerStyleQueryResult> }> = (
     <div className="card card-compact bg-base-300">
       <div className="card-body justify-between">
         <div className="space-y-1">
-          <Link href={`/beers/types/${beerStyle.id}`}>
+          <Link href={`/beers/styles/${beerStyle.id}`}>
             <h3 className="link-hover link overflow-hidden whitespace-normal text-2xl font-bold lg:truncate lg:text-3xl">
               {beerStyle.name}
             </h3>
@@ -20,7 +20,7 @@ const BeerStyleCard: FC<{ beerStyle: z.infer<typeof BeerStyleQueryResult> }> = (
             <div className="text-sm font-bold">
               ABV Range:{' '}
               <span>
-                {beerStyle.abvRange[0].toFixed(1)}% - {beerStyle.abvRange[1].toFixed(1)}%
+                {beerStyle.abvRange[0].toFixed(1)}% - {beerStyle.abvRange[0].toFixed(1)}%
               </span>
             </div>
             <div className="text-sm font-bold">
@@ -31,8 +31,8 @@ const BeerStyleCard: FC<{ beerStyle: z.infer<typeof BeerStyleQueryResult> }> = (
             </div>
           </div>
 
-          <div>
-            <p>{beerStyle.description}</p>
+          <div className="h-20">
+            <p className="overflow-ellipsis line-clamp-3">{beerStyle.description}</p>
           </div>
 
           <div className="font-semibold">
diff --git a/src/pages/api/beers/styles/[id].ts b/src/pages/api/beers/styles/[id].ts
new file mode 100644
index 0000000..e72e8c1
--- /dev/null
+++ b/src/pages/api/beers/styles/[id].ts
@@ -0,0 +1,41 @@
+import validateRequest from '@/config/nextConnect/middleware/validateRequest';
+import getBeerStyleById from '@/services/BeerStyles/getBeerStyleById';
+
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { createRouter } from 'next-connect';
+import { z } from 'zod';
+
+interface GetBeerStyleByIdRequest extends NextApiRequest {
+  query: { id: string };
+}
+
+const getBeerStyle = async (
+  req: GetBeerStyleByIdRequest,
+  res: NextApiResponse<z.infer<typeof APIResponseValidationSchema>>,
+) => {
+  const { id } = req.query;
+
+  const beerStyle = await getBeerStyleById(id);
+
+  res.status(200).json({
+    message: 'Beer types retrieved successfully',
+    statusCode: 200,
+    payload: beerStyle,
+    success: true,
+  });
+};
+
+const router = createRouter<
+  GetBeerStyleByIdRequest,
+  NextApiResponse<z.infer<typeof APIResponseValidationSchema>>
+>();
+
+router.get(
+  validateRequest({ querySchema: z.object({ id: z.string().cuid() }) }),
+  getBeerStyle,
+);
+
+const handler = router.handler();
+
+export default handler;
diff --git a/src/pages/beers/styles/[id]/index.tsx b/src/pages/beers/styles/[id]/index.tsx
new file mode 100644
index 0000000..2f99284
--- /dev/null
+++ b/src/pages/beers/styles/[id]/index.tsx
@@ -0,0 +1,33 @@
+import getBeerStyleById from '@/services/BeerStyles/getBeerStyleById';
+import BeerStyleQueryResult from '@/services/BeerStyles/schema/BeerStyleQueryResult';
+import { GetServerSideProps, NextPage } from 'next';
+import { z } from 'zod';
+
+interface BeerStylePageProps {
+  beerStyle: z.infer<typeof BeerStyleQueryResult>;
+}
+
+const BeerStylePage: NextPage<BeerStylePageProps> = ({ beerStyle }) => {
+  return (
+    <div>
+      <h1>{beerStyle.name}</h1>
+      <p>{beerStyle.description}</p>
+    </div>
+  );
+};
+
+export default BeerStylePage;
+
+export const getServerSideProps: GetServerSideProps<BeerStylePageProps> = async (
+  context,
+) => {
+  const beerStyle = await getBeerStyleById(context.params!.id! as string);
+
+  if (!beerStyle) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return { props: { beerStyle: JSON.parse(JSON.stringify(beerStyle)) } };
+};
diff --git a/src/pages/beers/styles/index.tsx b/src/pages/beers/styles/index.tsx
index a4bf4da..92bac39 100644
--- a/src/pages/beers/styles/index.tsx
+++ b/src/pages/beers/styles/index.tsx
@@ -38,7 +38,7 @@ const BeerStylePage: NextPage = () => {
           <header className="my-10 flex justify-between lg:flex-row">
             <div>
               <h1 className="text-4xl font-bold lg:text-6xl">The Biergarten App</h1>
-              <h2 className="text-2xl font-bold lg:text-4xl">Types</h2>
+              <h2 className="text-2xl font-bold lg:text-4xl">Styles</h2>
             </div>
           </header>
           <div className="grid gap-6 xl:grid-cols-2">
diff --git a/src/prisma/seed/util/beerStyles.ts b/src/prisma/seed/util/beerStyles.ts
index 5cee9f4..d257414 100644
--- a/src/prisma/seed/util/beerStyles.ts
+++ b/src/prisma/seed/util/beerStyles.ts
@@ -1,4 +1,4 @@
-interface IBeerStyle {
+interface BeerStyle {
   name: string;
   description: string;
   glassware: string;
@@ -6,7 +6,7 @@ interface IBeerStyle {
   ibuRange: [number, number];
 }
 
-const beerStyles: IBeerStyle[] = [
+const beerStyles: BeerStyle[] = [
   {
     name: 'Bock',
     description:
diff --git a/src/prisma/seed/util/canadianCities.ts b/src/prisma/seed/util/canadianCities.ts
index 12ca6c2..2369741 100755
--- a/src/prisma/seed/util/canadianCities.ts
+++ b/src/prisma/seed/util/canadianCities.ts
@@ -1,4 +1,11 @@
-export default [
+interface City {
+  city: string;
+  province: string;
+  latitude: number;
+  longitude: number;
+}
+
+const canadianCities: City[] = [
   {
     city: 'Toronto',
     province: 'Ontario',
@@ -10423,3 +10430,5 @@ export default [
     longitude: -110.4739,
   },
 ];
+
+export default canadianCities;
diff --git a/src/services/BeerStyles/getBeerStyleById.ts b/src/services/BeerStyles/getBeerStyleById.ts
new file mode 100644
index 0000000..a81c66f
--- /dev/null
+++ b/src/services/BeerStyles/getBeerStyleById.ts
@@ -0,0 +1,24 @@
+import DBClient from '@/prisma/DBClient';
+import { z } from 'zod';
+import BeerStyleQueryResult from './schema/BeerStyleQueryResult';
+
+const getBeerStyleById = async (id: string) => {
+  const beerStyle = (await DBClient.instance.beerStyle.findUnique({
+    where: { id },
+    select: {
+      id: true,
+      name: true,
+      postedBy: { select: { id: true, username: true } },
+      createdAt: true,
+      updatedAt: true,
+      abvRange: true,
+      ibuRange: true,
+      description: true,
+      glassware: { select: { id: true, name: true } },
+    },
+  })) as z.infer<typeof BeerStyleQueryResult> | null;
+
+  return beerStyle;
+};
+
+export default getBeerStyleById;