diff --git a/index.js b/index.js
index 7eb0ad0..94fa1d8 100644
--- a/index.js
+++ b/index.js
@@ -9,5 +9,6 @@ import {name as appName} from './app.json';
 import NotesMainPanel from './src/NotesMainPanel';
 import UserAccountPanel from './src/UserAccountPanel';
 import ApplicationSettingsPanel from './src/ApplicationSettingsPanel';
+import NoteWidgetDetailsPanel from './src/NoteWidgetDetailsPanel';
 
 AppRegistry.registerComponent(appName, () => App);
diff --git a/src/NoteWidgetDetailsPanel.js b/src/NoteWidgetDetailsPanel.js
new file mode 100644
index 0000000..3f18eaa
--- /dev/null
+++ b/src/NoteWidgetDetailsPanel.js
@@ -0,0 +1,51 @@
+/**
+ * @format
+ * @flow strict-local
+ */
+
+import React from 'react';
+import {
+  AppRegistry,
+  Button,
+  StyleSheet,
+  Text,
+  View,
+  NativeModules,
+} from 'react-native';
+
+
+class NoteWidgetDetailsPanel extends React.Component {
+
+  goBack = () => {
+    NativeModules.NoteWidgetClickHandler.goToNotesScreen();
+  };
+
+  render() {
+    return(
+      <View style={styles.panel}>
+        <View style={styles.panelContent}>
+          <Text>Note details panel</Text>
+          <Button onPress={this.goBack} title={"Go back..."}></Button>
+        </View>
+      </View>
+    );
+  }
+};
+
+
+const styles = StyleSheet.create({
+  panel: {
+    height: 75,
+    borderColor: "black",
+    borderWidth: 1,
+  },
+  panelContent: {
+    flex: 1,
+    flexDirection: "column",
+  }
+});
+
+
+AppRegistry.registerComponent("NoteWidgetDetailsPanel", () => NoteWidgetDetailsPanel);
+
+export default NoteWidgetDetailsPanel;
diff --git a/src/NotesMainPanel.js b/src/NotesMainPanel.js
index 12b3cf0..5aef9d3 100644
--- a/src/NotesMainPanel.js
+++ b/src/NotesMainPanel.js
@@ -6,18 +6,53 @@
 import React from 'react';
 import {
   AppRegistry,
+  Dimensions,
+  FlatList,
   StyleSheet,
-  Text,
   View,
 } from 'react-native';
+import NoteWidget from './Widgets/NoteWidget';
+
+const window = Dimensions.get("window");
+const screen = Dimensions.get("screen");
+
+const noteWidgetWidth = 300;
 
 
 class NotesMainPanel extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      notes: [{key: "1"}, {key: "2"}, {key: "3"}, {key: "4"}, {key: "5"}, {key: "6"}, {key: "7"}, {key: "8"}, {key: "9"}],
+      dimensions: {window, screen},
+      columns: this.calculateColumnWidth(window),
+    }
+  };
+
+  calculateColumnWidth = (window) => {
+    return Math.floor(window.width / noteWidgetWidth);
+  };
+
+  onChange = ({ window, screen }) => {
+    this.setState({ dimensions: { window, screen }, columns: this.calculateColumnWidth(window) });
+  };
+
+  componentDidMount() {
+    Dimensions.addEventListener("change", this.onChange);
+  };
+
+  componentWillUnmount() {
+    Dimensions.removeEventListener("change", this.onChange);
+  };
+
+  renderNote = notes => {
+    return <NoteWidget width={noteWidgetWidth} ID={notes.item.key}/>
+  };
 
   render() {
     return(
-      <View>
-        <Text>NotesMainPanel</Text>
+      <View style={styles.mainContainer}>
+        <FlatList numColumns={this.state.columns} key={this.state.columns} data={this.state.notes} renderItem={this.renderNote}/>
       </View>
     );
   }
@@ -25,6 +60,12 @@ class NotesMainPanel extends React.Component {
 
 
 const styles = StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+    flexDirection: "column",
+    margin: 20,
+    backgroundColor: "transparent",
+  },
 });
 
 
diff --git a/src/Widgets/NoteWidget.js b/src/Widgets/NoteWidget.js
new file mode 100644
index 0000000..54e9ace
--- /dev/null
+++ b/src/Widgets/NoteWidget.js
@@ -0,0 +1,98 @@
+/**
+ * @format
+ * @flow strict-local
+ */
+
+import React from 'react';
+import {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+  NativeModules,
+} from 'react-native';
+
+
+class NoteWidget extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      width: props.width,
+      ID: Number(props.ID),
+    }
+  };
+
+  enterNote = () => {
+    NativeModules.NoteWidgetClickHandler.openWidget(this.state.ID);
+  };
+
+  render() {
+    return(
+      <TouchableHighlight onPress={this.enterNote} style={styles.noteWidget} underlayColor={'transparent'}>
+        <View style={{width: this.state.width}}>
+
+          <View style={styles.noteHeader}>
+            <Text>{this.state.ID}</Text>
+            <View style={styles.noteTitle}>
+              <Text style={{textAlign: "center"}}>Header</Text>
+            </View>
+          </View>
+
+          <View style={styles.noteSeparator}></View>
+
+          <View style={styles.noteMainContent}>
+            <Text>
+              This is the single widget
+              {'\n'}With the text written here only for the presentation purpose.
+            </Text>
+            <Text>This note has the ID: {this.state.ID}</Text>
+          </View>
+
+        </View>
+      </TouchableHighlight>
+    );
+  }
+};
+
+
+const styles = StyleSheet.create({
+  noteWidget: {
+    borderColor: "grey",
+    borderWidth: 1,
+    margin: 20,
+    backgroundColor: "whitesmoke",
+    borderRadius: 10,
+    shadowOffset: {x: 5, y: 50},
+    shadowColor: "black",
+    elevation: 10,
+    opacity: 0.8
+  },
+  noteHeader: {
+    flex: 1,
+    flexDirection: "row",
+    margin: 5,
+  },
+  noteTitle: {
+    alignSelf: "center",
+    alignContent: "center",
+    alignItems: "center",
+    textAlign: "center",
+    marginHorizontal: 10,
+  },
+  noteSeparator: {
+    borderColor: "black",
+    borderWidth: 0.5,
+    marginTop: 5,
+    marginBottom: 10,
+    alignSelf: "stretch"
+  },
+  noteMainContent: {
+    margin: 10
+  }
+});
+
+
+AppRegistry.registerComponent("NoteWidget", () => NoteWidget);
+
+export default NoteWidget;
diff --git a/windows/ReactNativeNotes/App.cpp b/windows/ReactNativeNotes/App.cpp
index 89e3048..0cfceaa 100644
--- a/windows/ReactNativeNotes/App.cpp
+++ b/windows/ReactNativeNotes/App.cpp
@@ -53,7 +53,7 @@ void App::OnLaunched(activation::LaunchActivatedEventArgs const& e)
     super::OnLaunched(e);
 
     Frame rootFrame = Window::Current().Content().as<Frame>();
-    rootFrame.Navigate(xaml_typename<ReactNativeNotes::MainPage>(), box_value(e.Arguments()));
+    rootFrame.Navigate(xaml_typename<ReactNativeNotes::NotesPage>(), box_value(e.Arguments()));
 }
 
 /// <summary>
diff --git a/windows/ReactNativeNotes/MainPage.cpp b/windows/ReactNativeNotes/MainPage.cpp
index 5499247..cc857fc 100644
--- a/windows/ReactNativeNotes/MainPage.cpp
+++ b/windows/ReactNativeNotes/MainPage.cpp
@@ -15,6 +15,7 @@ namespace winrt::ReactNativeNotes::implementation
     {
         InitializeComponent();
         auto app = Application::Current().as<App>();
+        Navigate( L"NotesPage", false );
     }
 
     void MainPage::TopNavigationPanel_ItemInvoked( Windows::UI::Xaml::Controls::NavigationView const& sender, Windows::UI::Xaml::Controls::NavigationViewItemInvokedEventArgs const& args )
@@ -34,16 +35,25 @@ namespace winrt::ReactNativeNotes::implementation
     {
     }
 
-    void MainPage::Navigate( winrt::hstring pageName ) noexcept
+    void MainPage::Navigate( winrt::hstring pageName, const bool hasAnimation ) noexcept
     {
         auto pageToNavigateTo = Windows::UI::Xaml::Interop::TypeName
         {
             to_hstring( L"ReactNativeNotes." + pageName ),
             Windows::UI::Xaml::Interop::TypeKind::Custom
         };
-        auto navigationAnimation = Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionInfo();
-        navigationAnimation.Effect( Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionEffect::FromLeft );
-        ApplicationContentFrame().Navigate( pageToNavigateTo, nullptr, navigationAnimation );
+        if( hasAnimation )
+        {
+            auto navigationAnimation = Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionInfo();
+            navigationAnimation.Effect( Windows::UI::Xaml::Media::Animation::SlideNavigationTransitionEffect::FromLeft );
+            ApplicationContentFrame().Navigate( pageToNavigateTo, nullptr, navigationAnimation );
+        }
+        else
+        {
+            auto navigationAnimation = Windows::UI::Xaml::Media::Animation::SuppressNavigationTransitionInfo();
+            ApplicationContentFrame().Navigate( pageToNavigateTo, nullptr, navigationAnimation );
+        }
+
     }
 } 
 
diff --git a/windows/ReactNativeNotes/MainPage.h b/windows/ReactNativeNotes/MainPage.h
index e8ea421..7f64eb5 100644
--- a/windows/ReactNativeNotes/MainPage.h
+++ b/windows/ReactNativeNotes/MainPage.h
@@ -14,7 +14,7 @@ namespace winrt::ReactNativeNotes::implementation
         void TopNavigationPanel_BackRequested( Windows::UI::Xaml::Controls::NavigationView const& sender, Windows::UI::Xaml::Controls::NavigationViewBackRequestedEventArgs const& args );
 
     private:
-        void Navigate( winrt::hstring pageName ) noexcept;
+        void Navigate( winrt::hstring pageName, const bool hasAnimation = true ) noexcept;
     };
 }
 
diff --git a/windows/ReactNativeNotes/NativeModules/NoteWidgetClickHandler.hpp b/windows/ReactNativeNotes/NativeModules/NoteWidgetClickHandler.hpp
new file mode 100644
index 0000000..81d5868
--- /dev/null
+++ b/windows/ReactNativeNotes/NativeModules/NoteWidgetClickHandler.hpp
@@ -0,0 +1,41 @@
+#pragma once
+
+#include "pch.h"
+#include "NativeModules.h"
+
+
+namespace ReactNativeNotes
+{
+    REACT_MODULE( NoteWidgetClickHandler );
+    struct NoteWidgetClickHandler
+    {
+        REACT_CONSTANT( ID, L"ID" );
+        const unsigned int ID;
+
+        REACT_METHOD( OpenWidget, L"openWidget" );
+        void OpenWidget( const unsigned int ID ) noexcept
+        {
+            NavigateViaMainFrame( L"ReactNativeNotes.NoteWidgetDetailsPage" );
+        }
+
+        REACT_METHOD( GoToNotesScreen, L"goToNotesScreen" );
+        void GoToNotesScreen() noexcept
+        {
+            NavigateViaMainFrame( L"ReactNativeNotes.MainPage" );
+        }
+
+
+    private:
+        void NavigateViaMainFrame( const winrt::hstring pageName )
+        {
+            auto pageToNavigateTo = winrt::Windows::UI::Xaml::Interop::TypeName
+            {
+                pageName,
+                winrt::Windows::UI::Xaml::Interop::TypeKind::Custom
+            };
+            auto navigationAnimation = winrt::Windows::UI::Xaml::Media::Animation::DrillInNavigationTransitionInfo();
+            auto& rootFrame = winrt::Windows::UI::Xaml::Window::Current().Content().as<winrt::Windows::UI::Xaml::Controls::Frame>();
+            rootFrame.Navigate( pageToNavigateTo, nullptr, navigationAnimation );
+        }
+    };
+}
diff --git a/windows/ReactNativeNotes/NoteWidgetDetailsPage.cpp b/windows/ReactNativeNotes/NoteWidgetDetailsPage.cpp
new file mode 100644
index 0000000..a265b74
--- /dev/null
+++ b/windows/ReactNativeNotes/NoteWidgetDetailsPage.cpp
@@ -0,0 +1,16 @@
+#include "pch.h"
+#include "NoteWidgetDetailsPage.h"
+#include "NoteWidgetDetailsPage.g.cpp"
+
+#include "App.h"
+
+
+namespace winrt::ReactNativeNotes::implementation
+{
+    NoteWidgetDetailsPage::NoteWidgetDetailsPage()
+    {
+        InitializeComponent();
+        auto app = Windows::UI::Xaml::Application::Current().as<App>();
+        ReactRootView().ReactNativeHost( app->Host() );
+    }
+}
diff --git a/windows/ReactNativeNotes/NoteWidgetDetailsPage.h b/windows/ReactNativeNotes/NoteWidgetDetailsPage.h
new file mode 100644
index 0000000..352a8c0
--- /dev/null
+++ b/windows/ReactNativeNotes/NoteWidgetDetailsPage.h
@@ -0,0 +1,19 @@
+#pragma once
+
+#include "NoteWidgetDetailsPage.g.h"
+
+namespace winrt::ReactNativeNotes::implementation
+{
+    class NoteWidgetDetailsPage : public NoteWidgetDetailsPageT<NoteWidgetDetailsPage>
+    {
+    public:
+        NoteWidgetDetailsPage();
+    };
+}
+
+namespace winrt::ReactNativeNotes::factory_implementation
+{
+    class NoteWidgetDetailsPage : public NoteWidgetDetailsPageT<NoteWidgetDetailsPage, implementation::NoteWidgetDetailsPage>
+    {
+    };
+}
diff --git a/windows/ReactNativeNotes/NoteWidgetDetailsPage.idl b/windows/ReactNativeNotes/NoteWidgetDetailsPage.idl
new file mode 100644
index 0000000..3907ce9
--- /dev/null
+++ b/windows/ReactNativeNotes/NoteWidgetDetailsPage.idl
@@ -0,0 +1,8 @@
+namespace ReactNativeNotes
+{
+    [default_interface]
+    runtimeclass NoteWidgetDetailsPage : Windows.UI.Xaml.Controls.Page
+    {
+        NoteWidgetDetailsPage();
+    }
+}
diff --git a/windows/ReactNativeNotes/NoteWidgetDetailsPage.xaml b/windows/ReactNativeNotes/NoteWidgetDetailsPage.xaml
new file mode 100644
index 0000000..e415daf
--- /dev/null
+++ b/windows/ReactNativeNotes/NoteWidgetDetailsPage.xaml
@@ -0,0 +1,14 @@
+<Page
+    x:Class="ReactNativeNotes.NoteWidgetDetailsPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:ReactNativeNotes"
+    xmlns:react="using:Microsoft.ReactNative"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+    <react:ReactRootView
+        x:Name="ReactRootView"
+        ComponentName="NoteWidgetDetailsPanel"
+        MinHeight="400"/>
+</Page>
diff --git a/windows/ReactNativeNotes/ReactNativeNotes.vcxproj b/windows/ReactNativeNotes/ReactNativeNotes.vcxproj
index 047a83d..889bb1f 100644
--- a/windows/ReactNativeNotes/ReactNativeNotes.vcxproj
+++ b/windows/ReactNativeNotes/ReactNativeNotes.vcxproj
@@ -109,6 +109,11 @@
       <DependentUpon>MainPage.xaml</DependentUpon>
       <SubType>Code</SubType>
     </ClInclude>
+    <ClInclude Include="NativeModules\NoteWidgetClickHandler.hpp" />
+    <ClInclude Include="NoteWidgetDetailsPage.h">
+      <DependentUpon>NoteWidgetDetailsPage.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </ClInclude>
     <ClInclude Include="NotesPage.h">
       <DependentUpon>NotesPage.xaml</DependentUpon>
       <SubType>Code</SubType>
@@ -152,6 +157,10 @@
       <DependentUpon>MainPage.xaml</DependentUpon>
       <SubType>Code</SubType>
     </ClCompile>
+    <ClCompile Include="NoteWidgetDetailsPage.cpp">
+      <DependentUpon>NoteWidgetDetailsPage.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </ClCompile>
     <ClCompile Include="NotesPage.cpp">
       <DependentUpon>NotesPage.xaml</DependentUpon>
       <SubType>Code</SubType>
@@ -182,6 +191,10 @@
       <DependentUpon>MainPage.xaml</DependentUpon>
       <SubType>Code</SubType>
     </Midl>
+    <Midl Include="NoteWidgetDetailsPage.idl">
+      <DependentUpon>NoteWidgetDetailsPage.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </Midl>
     <Midl Include="NotesPage.idl">
       <DependentUpon>NotesPage.xaml</DependentUpon>
       <SubType>Code</SubType>
@@ -206,6 +219,9 @@
     <Page Include="MainPage.xaml">
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="NoteWidgetDetailsPage.xaml">
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="NotesPage.xaml">
       <SubType>Designer</SubType>
     </Page>
diff --git a/windows/ReactNativeNotes/ReactNativeNotes.vcxproj.filters b/windows/ReactNativeNotes/ReactNativeNotes.vcxproj.filters
index a0dc1bc..56aead1 100644
--- a/windows/ReactNativeNotes/ReactNativeNotes.vcxproj.filters
+++ b/windows/ReactNativeNotes/ReactNativeNotes.vcxproj.filters
@@ -18,6 +18,7 @@
     <ClInclude Include="App.h" />
     <ClInclude Include="ReactPackageProvider.h" />
     <ClInclude Include="AutolinkedNativeModules.g.h" />
+    <ClInclude Include="NativeModules\NoteWidgetClickHandler.hpp" />
   </ItemGroup>
   <ItemGroup>
     <Image Include="Assets\Wide310x150Logo.scale-200.png">
@@ -62,5 +63,6 @@
     <Page Include="NotesPage.xaml" />
     <Page Include="UserAccountPage.xaml" />
     <Page Include="ApplicationSettingsPage.xaml" />
+    <Page Include="NoteWidgetDetailsPage.xaml" />
   </ItemGroup>
 </Project>
\ No newline at end of file
diff --git a/windows/ReactNativeNotes/ReactPackageProvider.cpp b/windows/ReactNativeNotes/ReactPackageProvider.cpp
index 045cc31..7855d54 100644
--- a/windows/ReactNativeNotes/ReactPackageProvider.cpp
+++ b/windows/ReactNativeNotes/ReactPackageProvider.cpp
@@ -2,6 +2,8 @@
 #include "ReactPackageProvider.h"
 #include "NativeModules.h"
 
+#include "NativeModules/NoteWidgetClickHandler.hpp"
+
 using namespace winrt::Microsoft::ReactNative;
 
 namespace winrt::ReactNativeNotes::implementation