diff --git a/apps/pwrcode-backend/src/modules/search/controllers/documents/React/hooks.ts b/apps/pwrcode-backend/src/modules/search/controllers/documents/React/hooks.ts
index 456ec06..9bac0b9 100755
--- a/apps/pwrcode-backend/src/modules/search/controllers/documents/React/hooks.ts
+++ b/apps/pwrcode-backend/src/modules/search/controllers/documents/React/hooks.ts
@@ -18,7 +18,5 @@ export const hooks: DataProps = {
     
     - "useReducer" : 리듀서 함수 내부의 업데이트 논리를 사용해 상태 변수를 선언
     
-    ![TEST](http://127.0.0.1:9000/computer-science/IMG_5632.jpg)
-    
     `,
 };
diff --git a/apps/pwrcode-frontend/app/computer_science/algorithms/layout.tsx b/apps/pwrcode-frontend/app/computer_science/algorithms/layout.tsx
new file mode 100755
index 0000000..d6a811e
--- /dev/null
+++ b/apps/pwrcode-frontend/app/computer_science/algorithms/layout.tsx
@@ -0,0 +1,8 @@
+import React, { ReactNode, Children } from 'react';
+import './normalize.css';
+import './page.scss';
+export default function MdxLayout({ children }: { children: ReactNode }) {
+  // Create any shared layout or styles here
+
+  return <div className="MDX_ROOT">{children}</div>;
+}
diff --git a/apps/pwrcode-frontend/app/computer_science/algorithms/normalize.css b/apps/pwrcode-frontend/app/computer_science/algorithms/normalize.css
new file mode 100644
index 0000000..e1348b6
--- /dev/null
+++ b/apps/pwrcode-frontend/app/computer_science/algorithms/normalize.css
@@ -0,0 +1,351 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+     ========================================================================== */
+
+/**
+   * Remove the margin in all browsers.
+   */
+
+body {
+  margin: 0;
+}
+
+/**
+   * Render the `main` element consistently in IE.
+   */
+
+main {
+  display: block;
+}
+
+/**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+     ========================================================================== */
+
+/**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+     ========================================================================== */
+
+/**
+   * Remove the gray background on active links in IE 10.
+   */
+
+a {
+  background-color: transparent;
+}
+
+/**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+   * Add the correct font size in all browsers.
+   */
+
+small {
+  font-size: 80%;
+}
+
+/**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+     ========================================================================== */
+
+/**
+   * Remove the border on images inside links in IE 10.
+   */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+     ========================================================================== */
+
+/**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+
+/**
+   * Remove the inner border and padding in Firefox.
+   */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+   * Restore the focus styles unset by the previous rule.
+   */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+   * Correct the padding in Firefox.
+   */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+
+[type='checkbox'],
+[type='radio'] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+     ========================================================================== */
+
+/*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+
+details {
+  display: block;
+}
+
+/*
+   * Add the correct display in all browsers.
+   */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+     ========================================================================== */
+
+/**
+   * Add the correct display in IE 10+.
+   */
+
+template {
+  display: none;
+}
+
+/**
+   * Add the correct display in IE 10.
+   */
+
+[hidden] {
+  display: none;
+}
diff --git a/apps/pwrcode-frontend/app/computer_science/algorithms/page.scss b/apps/pwrcode-frontend/app/computer_science/algorithms/page.scss
new file mode 100644
index 0000000..997a221
--- /dev/null
+++ b/apps/pwrcode-frontend/app/computer_science/algorithms/page.scss
@@ -0,0 +1,60 @@
+$mdx-box-gap: 10px;
+
+.MDX_ROOT {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  color: black;
+  background: white;
+  align-items: stretch;
+  justify-content: stretch;
+}
+
+.MDX_BOX {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: $mdx-box-gap;
+  padding: $mdx-box-gap;
+  flex: 1;
+  transform: rotate(0turn);
+  cursor: pointer;
+}
+
+.MDX_BOX_MATH,
+.MDX_BOX_ALGO,
+.MDX_BOX_ARCH,
+.MDX_BOX_DATABASE,
+.MDX_BOX_LANG,
+.MDX_BOX_NOTES {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+
+  & img {
+    width: 10vmax;
+    height: 10vmax;
+    object-fit: cover;
+  }
+
+  border: 1px solid black;
+  background: #6d6db6;
+  border-radius: 10px;
+  box-shadow: 5px 5px 10px #6d6db6;
+
+  &:hover {
+    border: 1px solid blue;
+    filter: invert(1);
+  }
+}
+
+.MDX_BOX_TEXT {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-items: center;
+  justify-content: space-evenly;
+  font-family: 'Ubuntu';
+}
diff --git a/apps/pwrcode-frontend/app/computer_science/algorithms/page.tsx b/apps/pwrcode-frontend/app/computer_science/algorithms/page.tsx
new file mode 100755
index 0000000..c89957c
--- /dev/null
+++ b/apps/pwrcode-frontend/app/computer_science/algorithms/page.tsx
@@ -0,0 +1,32 @@
+import { MDXRemote } from 'next-mdx-remote/rsc';
+import { Suspense } from 'react';
+import remarkGfm from 'remark-gfm';
+import { useMDXComponents } from '@/mdx-components';
+import { Code } from 'bright';
+
+// app/page.js
+export default async function RemoteMdxPage() {
+  // MDX text - can be from a local file, database, CMS, fetch, anywhere...
+  const res = await fetch(
+    'http://localhost:9000/computer-science/algorithms_and_data_structures/index.mdx',
+    {
+      headers: {
+        'Content-Type': 'text/html',
+      },
+    },
+  );
+  const jsonData = await res.text();
+
+  return (
+    <Suspense fallback={<>Loading...</>}>
+      <MDXRemote
+        source={jsonData}
+        options={{
+          mdxOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        }}
+      />
+    </Suspense>
+  );
+}
diff --git a/apps/pwrcode-frontend/app/computer_science/layout.tsx b/apps/pwrcode-frontend/app/computer_science/layout.tsx
index 8dc058e..b82c9da 100755
--- a/apps/pwrcode-frontend/app/computer_science/layout.tsx
+++ b/apps/pwrcode-frontend/app/computer_science/layout.tsx
@@ -1,16 +1,15 @@
-export default function MdxLayout({ children }: { children: React.ReactNode }) {
+import React, { ReactNode, Children } from 'react';
+import './normalize.css';
+import './page.scss';
+import { Collection } from '../design/organisms/Collection/Collection';
+import { ComputerScienceNavBarCollection } from '../design/organisms/Collection/Collection.stories';
+
+export default function MdxLayout({ children }: { children: ReactNode }) {
   // Create any shared layout or styles here
+
   return (
-    <div
-      style={{
-        color: 'black',
-        background: 'white',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
+    <div className="MDX_ROOT">
+      <Collection {...ComputerScienceNavBarCollection.args} />
       {children}
     </div>
   );
diff --git a/apps/pwrcode-frontend/app/computer_science/normalize.css b/apps/pwrcode-frontend/app/computer_science/normalize.css
new file mode 100644
index 0000000..e1348b6
--- /dev/null
+++ b/apps/pwrcode-frontend/app/computer_science/normalize.css
@@ -0,0 +1,351 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+     ========================================================================== */
+
+/**
+   * Remove the margin in all browsers.
+   */
+
+body {
+  margin: 0;
+}
+
+/**
+   * Render the `main` element consistently in IE.
+   */
+
+main {
+  display: block;
+}
+
+/**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+     ========================================================================== */
+
+/**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+     ========================================================================== */
+
+/**
+   * Remove the gray background on active links in IE 10.
+   */
+
+a {
+  background-color: transparent;
+}
+
+/**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+   * Add the correct font size in all browsers.
+   */
+
+small {
+  font-size: 80%;
+}
+
+/**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+     ========================================================================== */
+
+/**
+   * Remove the border on images inside links in IE 10.
+   */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+     ========================================================================== */
+
+/**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+
+/**
+   * Remove the inner border and padding in Firefox.
+   */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+   * Restore the focus styles unset by the previous rule.
+   */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+   * Correct the padding in Firefox.
+   */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+
+[type='checkbox'],
+[type='radio'] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+     ========================================================================== */
+
+/*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+
+details {
+  display: block;
+}
+
+/*
+   * Add the correct display in all browsers.
+   */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+     ========================================================================== */
+
+/**
+   * Add the correct display in IE 10+.
+   */
+
+template {
+  display: none;
+}
+
+/**
+   * Add the correct display in IE 10.
+   */
+
+[hidden] {
+  display: none;
+}
diff --git a/apps/pwrcode-frontend/app/computer_science/page.scss b/apps/pwrcode-frontend/app/computer_science/page.scss
new file mode 100644
index 0000000..f2e9a32
--- /dev/null
+++ b/apps/pwrcode-frontend/app/computer_science/page.scss
@@ -0,0 +1,63 @@
+$mdx-box-gap: 10px;
+
+.MDX_ROOT {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  color: black;
+  background: white;
+  align-items: stretch;
+  justify-content: stretch;
+}
+
+.MDX_BOX {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: $mdx-box-gap;
+  padding: $mdx-box-gap;
+  flex: 1;
+  transform: rotate(0turn);
+  cursor: pointer;
+}
+
+.MDX_BOX_MATH,
+.MDX_BOX_ALGO,
+.MDX_BOX_ARCH,
+.MDX_BOX_DATABASE,
+.MDX_BOX_LANG,
+.MDX_BOX_NOTES {
+  & a {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+  }
+  & img {
+    width: 10vmax;
+    height: 10vmax;
+    object-fit: cover;
+  }
+
+  border: 1px solid black;
+  background: #6d6db6;
+  border-radius: 10px;
+  box-shadow: 5px 5px 10px #6d6db6;
+
+  &:hover {
+    border: 1px solid blue;
+    filter: invert(1);
+  }
+}
+
+.MDX_BOX_TEXT {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-items: center;
+  justify-content: space-evenly;
+  font-family: 'Ubuntu';
+}
diff --git a/apps/pwrcode-frontend/app/design/atoms/Form/Form.tsx b/apps/pwrcode-frontend/app/design/atoms/Form/Form.tsx
index b17c29e..5c01aa0 100755
--- a/apps/pwrcode-frontend/app/design/atoms/Form/Form.tsx
+++ b/apps/pwrcode-frontend/app/design/atoms/Form/Form.tsx
@@ -23,6 +23,7 @@ export function SearchForm(props: FormProps) {
   return (
     <Component
       {...props}
+      value={keyword.keyword}
       onChange={(e) => {
         setKeyword({ keyword: e.target.value });
       }}
diff --git a/apps/pwrcode-frontend/app/design/molecules/Box/Box.stories.tsx b/apps/pwrcode-frontend/app/design/molecules/Box/Box.stories.tsx
index 6e576a9..6786d90 100755
--- a/apps/pwrcode-frontend/app/design/molecules/Box/Box.stories.tsx
+++ b/apps/pwrcode-frontend/app/design/molecules/Box/Box.stories.tsx
@@ -19,6 +19,8 @@ import {
 } from '../../atoms/Link/Link.stories';
 import { Button } from '../../atoms/Button/Button';
 import { MainFormButton } from '../../atoms/Button/Button.stories';
+import { DropDown } from '../DropDown/DropDown';
+import { MainDropDown } from '../DropDown/DropDown.stories';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
@@ -50,7 +52,7 @@ export const MainBox: Story = {
   },
 };
 
-export const MainBottomBox: Story = {
+export const MainBottomSearchBox: Story = {
   args: {
     flexDirection: 'row',
     children: (
@@ -62,6 +64,20 @@ export const MainBottomBox: Story = {
   },
 };
 
+export const MainBottomBox: Story = {
+  args: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: '10px',
+    children: (
+      <>
+        <DropDown {...MainDropDown.args} />
+        <Box {...MainBottomSearchBox.args} />
+      </>
+    ),
+  },
+};
+
 export const MainNavbarBox: Story = {
   args: {
     flexDirection: 'row',
diff --git a/apps/pwrcode-frontend/app/design/molecules/Card/Card.stories.tsx b/apps/pwrcode-frontend/app/design/molecules/Card/Card.stories.tsx
index abb9578..d3fe819 100755
--- a/apps/pwrcode-frontend/app/design/molecules/Card/Card.stories.tsx
+++ b/apps/pwrcode-frontend/app/design/molecules/Card/Card.stories.tsx
@@ -39,7 +39,7 @@ export const MainCard: Story = {
     justifyContent: 'space-between',
     alignItems: 'center',
     width: '30vmax',
-    height: '40vmax',
+    height: '50vmax',
     border: '10px solid rgba(176, 166, 149, 0.50)',
     padding: '1.19rem 1.75rem 3.25rem 1.75rem',
     animation: '15s linear 1s infinite running slideintest',
@@ -75,7 +75,7 @@ export const SearchCardStory: Story = {
     justifyContent: 'space-between',
     alignItems: 'center',
     width: '75vmax',
-    height: '40vmax',
+    height: '50vmax',
     gap: '10px',
     border: '10px solid rgba(176, 166, 149, 0.50)',
     // padding: '1.19rem 0 3.25rem 0',
diff --git a/apps/pwrcode-frontend/app/design/organisms/Collection/Collection.stories.tsx b/apps/pwrcode-frontend/app/design/organisms/Collection/Collection.stories.tsx
index 3bc67d8..eb4afa1 100755
--- a/apps/pwrcode-frontend/app/design/organisms/Collection/Collection.stories.tsx
+++ b/apps/pwrcode-frontend/app/design/organisms/Collection/Collection.stories.tsx
@@ -39,18 +39,16 @@ type Story = StoryObj<typeof meta>;
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const MainCollection: Story = {
   args: {
-    display: 'grid',
-    justifyContent: 'stretch',
+    display: 'flex',
+    justifyContent: 'center',
     alignContent: 'center',
-    // gridTemplateColumns: 'repeat(auto-fill,1fr)',
     flexDirection: 'column',
     width: '45vmax',
-    gap: '2vmax',
+    gap: '3vmax',
     component: 'MainCollection',
     children: (
       <>
         <Box {...MainBox.args} />
-        <DropDown {...MainDropDown.args} />
         <Box {...MainBottomBox.args} />
       </>
     ),
@@ -67,6 +65,16 @@ export const MainNavBarCollection: Story = {
   },
 };
 
+export const ComputerScienceNavBarCollection: Story = {
+  args: {
+    flexDirection: 'column',
+    position: '',
+    zIndex: '3',
+    width: '100vmax',
+    children: <Box {...MainNavbarBox.args} />,
+  },
+};
+
 export const SearchLogoAndFormCollection: Story = {
   args: {
     display: 'flex',
diff --git a/apps/pwrcode-frontend/package.json b/apps/pwrcode-frontend/package.json
index c423c0d..810d223 100755
--- a/apps/pwrcode-frontend/package.json
+++ b/apps/pwrcode-frontend/package.json
@@ -37,7 +37,8 @@
     "remark-breaks": "^4.0.0",
     "remark-gfm": "3.0.1",
     "remark-lint": "^9.1.2",
-    "remark-mdx": "^3.0.0"
+    "remark-mdx": "^3.0.0",
+    "sass": "^1.69.5"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.5.3",
diff --git a/yarn.lock b/yarn.lock
index df28104..1268530 100755
--- a/yarn.lock
+++ b/yarn.lock
@@ -7326,7 +7326,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:3.5.3, chokidar@npm:^3.5.3":
+"chokidar@npm:3.5.3, chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.5.3":
   version: 3.5.3
   resolution: "chokidar@npm:3.5.3"
   dependencies:
@@ -10822,6 +10822,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immutable@npm:^4.0.0":
+  version: 4.3.4
+  resolution: "immutable@npm:4.3.4"
+  checksum: c15b9f0fa7b3c9315725cb00704fddad59f0e668a7379c39b9a528a8386140ee9effb015ae51a5b423e05c59d15fc0b38c970db6964ad6b3e05d0761db68441f
+  languageName: node
+  linkType: hard
+
 "import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"
@@ -15554,6 +15561,7 @@ __metadata:
     remark-gfm: "npm:3.0.1"
     remark-lint: "npm:^9.1.2"
     remark-mdx: "npm:^3.0.0"
+    sass: "npm:^1.69.5"
     storybook: "npm:^7.5.3"
     typescript: "npm:^5"
     webpack: "npm:^5.89.0"
@@ -16550,6 +16558,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sass@npm:^1.69.5":
+  version: 1.69.5
+  resolution: "sass@npm:1.69.5"
+  dependencies:
+    chokidar: "npm:>=3.0.0 <4.0.0"
+    immutable: "npm:^4.0.0"
+    source-map-js: "npm:>=0.6.2 <2.0.0"
+  bin:
+    sass: sass.js
+  checksum: a9003a9482f2e467fc412cfe58ba4fa14fb78bef7e1283ce5d64a065f8a31114ec3bbf5d4e724f94eb8512c32c768a6f91f228c7f16a26a300bbf4db293b5608
+  languageName: node
+  linkType: hard
+
 "scheduler@npm:^0.23.0":
   version: 0.23.0
   resolution: "scheduler@npm:0.23.0"
@@ -16830,7 +16851,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-js@npm:^1.0.2":
+"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.2":
   version: 1.0.2
   resolution: "source-map-js@npm:1.0.2"
   checksum: 32f2dfd1e9b7168f9a9715eb1b4e21905850f3b50cf02cf476e47e4eebe8e6b762b63a64357896aa29b37e24922b4282df0f492e0d2ace572b43d15525976ff8